@charset “utf-8;
body{
   background-color:black;
}
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    border: 0;
}
img{
    
    width:100%;
    display:block;
    margin:auto;
}
.mainhead{
    background-color:#e7e5e6;
    
     align-content: center;
    justify-content:center,

    
}
header{
    background-image: url(../cabeza%20chica.jpg);
    width: 100vw;
    height: auto;
    background-size: contain;
    background-repeat:repeat;
    background-position: center center;
    
}
.head{
    
    box-sizing: border-box;
    background-color:#e7e5e6;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size:2.5em;
    color:black;
   
    align-content: center;
    
}


#perfil img{
    width: 100%;
    display: block;
     border-bottom: 0.3rem solid black;
     
   
   
}

.nivs{
   
     max-width: 100em;
    margin-left: auto;
    margin-right: auto;
}
.nivs figure{
     position: relative;
    overflow: hidden;
   
}
.nivs img{
     object-fit: cover;
    object-position: left center;
     width: 50vmin;
    height: 65vmin;
    display: block;
   
}
.nivs figcaption{
    background-color: black;
    opacity: 75;
    font-family: 'Montserrat', sans-serif;
    color: white;
    padding: .5em;
    line-height: 1em;
    text-transform: uppercase;
    font-weight: 1000;
    position: absolute;
    width: 100%;
    height: 100%;
    top: calc( 100% - 2em );
 font-size: 1em;
    transition: all .6s ease-out;
}
.nivs figure:hover figcaption {
    background-color:  rgb(15,198,192, .5);
    
    color: white;
    font-size: 1em;
    font-weight: 700;
    top: 0;
    transition: all .2s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.nivs figcaption span {
    display: block;
    font-size: .75em;
    color:  white;
    margin-top: .5em;
    text-transform: none;
}


.companieras{
   display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;
   padding-bottom: 1em;
  background-color:#e7e5e6;
    font-size:0.7em; 
    margin-right: 1em;  
    margin-left: 1em;
    margin-top: 1em;
}

.navbar{
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    padding-top: 0.4em;
      position: fixed;
    z-index: 10;
     background-color:#e7e5e6;
    width: 100%;
    opacity: 80%;
    
}
.navbar li{
     font-size: 0.7em;
     padding-right: 0.4em;
}

.titulo {
    display: flex;
    background-color:#e7e5e6;
    display: inline-block;
justify-content: center;
    align-content: center;
    font-size:0.5em;
      border-right: 0.1rem solid black;
margin: 0.5em;
}

nav ul li a:hover {
    background-color:rgb(15,198,192);
    color: floralwhite;
    padding:0.5em;
     transition: 0.2s;  
}

ul{
    font-family: 'Montserrat', sans-serif;
    text-decoration: none; 
    list-style: none;
}

a{
    color:black;
    text-decoration:none;
}

p{
 
    font-family: sans-serif;
}

li{
    margin: 0.3em;
   
}
h3,h2,h4{
   color:#e7e5e6;
    font-size:1,5em;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
   
    font-size:0.8em;
    
}

#imgLogo{
width: 6em;
}




 .anhos{
    font-family: 'Montserrat', sans-serif;
    font-size: 1em;
    text-align: center;
    
}
    

.recuadre{
    display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
    background-color:#e7e5e6;
   padding: 1em 5em;
}



.materias{
  border-bottom-color: black;
     color:w;
    margin:0.5em;
 border-left: 0.5rem solid black; 
}

.barra{
    text-align: center;
    align-content: center;
    margin: 0.5em;
     font-size: 1.5em;
     color: white;
}

progress {
    width: 10em;
    height:.8em;
    -webkit-appearance: none;
    border-radius: 0.6em;
    align-content: center;
    box-shadow: 0.5rem 0.5rem 2rem #e7e5e6;
    
}
progress li{ 
   
    font-size: 2em;
}

progress::-webkit-progress-bar {
    background-color: #e7e5e6;
    border-radius: 0.6em;
    
}

progress::-webkit-progress-value {
    background: rgb(15,198,192);
    border-radius: 0.6em;
}




.draws{
      background-color:#e7e5e6;
    display: flex;
    justify-content: center;
    align-content: center; 
}



.girl{
    background-image: url(..streetgirl.png);
    width: 12em;
}

#boceto img{
    margin-top: 5em;
    width: 8em;
    border-radius: 2em;
   opacity: 80%;
    
}

.titulosabajo{
  margin:1em;
    text-align: center;
    color:#e7e5e6;
     border-bottom: 0.1rem solid #e7e5e6;
}

.datosfadu{ 
    font-family: 'Montserrat', sans-serif;
    padding: 3em;
    font-size: 12px;
    display: flex;
    background-color:#e7e5e6;
    background-size: contain;
    background-repeat:repeat;
    background-position: center center;
    
}
.box1{
 flex:0.1em;  
    margin:0.1em;
    border-right: 0.1rem solid black;
}
.box2{
    flex:0.1em;
    margin:0.1em;
     border-right: 0.1rem solid black;
}
.box3{
    margin:0.1em;
    flex:0.1em;
     border-right: 0.1rem solid black;
}
.box4{
    align-content: center;
    margin:4em;
    color:#e7e5e6;
   
    
}


    

footer{
               
    font-family: sans-serif;
    color:#e7e5e6;
    font-size:12px;
}
   
@media (min-width: 1200px){
    .navbar li{
        font-size:1em;
    }
    .rep{
          display: flex;
        margin-top: 10em;
        
    }
    .mainhead figure{
        height: 72vh;
overflow: hidden;
    }
    .head{
        padding: 1em;
    }
    #perfil img{
        width: 60em;
        height:39.2em;
        margin: none;
    }
    
    .recuadre{
       margin-bottom: 1em;
    }
    .materias{
       
        margin-right: 4em;
        margin-left:4em;
    }
    h3,h2,h4{
        font-size:2em;
}
    .barra{
        font-size: 1em;
        margin: 2em;
        
    }
    progress {
    width: 20em;
    height:1em;
        margin: 2em;
    }
    
    p{
        align-content: center;
        text-align: center;
    }
    .companieras{
        width: 50%;
margin: auto;
        font-size: 1.2em;
    }
    #boceto img{
        width: 15em;
        border-radius: 2em;
    }
    .girl{
        width: 20em;
        margin-right: 1em;
    }
    .cabeza{
         background-color:#e7e5e6;
    }
    .nivs figcaption span {
    display: block;
    font-size: 1.5em;
     line-height: 1em;
    color:  white;
    margin-top: .5em;
    text-transform: none;
}
}