@font-face {
    font-family:"FoundersGroteskRegular";
    src: url('../fonts/FoundersGrotesk-Regular.otf');
}

@font-face {
    font-family:"FoundersGroteskLight";
    src: url('../fonts/FoundersGrotesk -Light.otf');
}

@font-face {
    font-family:"TimesNowLight";
src: url('../fonts/TimesNowLight.otf');
}



body {
  font-family: "FoundersGroteskRegular";
  font-size: 18px;
  line-height: 1.2;
  background-color: #f5f5f5;
  color: #333333;
  margin: 1% 1% 1% 1%;
  width: 98%;
}

header{
  display: flex;
  align-items: top;
  justify-content: space-between;
    position: fixed;
    left: 1%;
    right: 1%;
    top: 1%;
font-family: "FoundersGroteskLight";
   
}

/* header nav a{
font-family: "FoundersGroteskLight";
     font-kerning: none;
} */

header h1 img{
    width: 90%;
}

h1,
nav, footer {
  font-family: "FoundersGroteskLight";
  font-size: 20px;
  font-weight: 100;
  color: #000000;
  text-decoration: none;
}

a {
    color: #000000;
  text-decoration: none;
}

nav a {
  font-family: "FoundersGroteskLight";
  font-size: 20px;
  color: #000000;
  text-decoration: none;
  margin: 0 0 0 35px;

}

nav a.selected {
   font-family: "FoundersGroteskRegular";
}

section{
    margin: 30px 0 30px 0;
    display: flex;
    align-items: top;
    justify-content: space-between;
    grid-auto-flow: dense;
}

section.project{
    width: 100%;
   /*  height: 650px; */
}

section.primero{
    margin-top: 120px;
}

section.project div.todo{
  /*   grid-column: 1 / span 6; */
    width: 49%;
    
}

section.project div.todo_project{
    width: 100%;
    display: inherit;
    align-items: top;
}



section.project div h2{
    font-size: 18px;
    font-family: "FoundersGroteskLight";
    font-weight: 100;
}

section.informacion div h2{
    font-size: 18px;
    font-family: "FoundersGroteskLight";
    font-weight: 100;
}


section.project img{
    width: 100%;

}

section.informacion{
    margin-top: 100px;
}

div.text{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 1% 1%;
    font-family: "TimesNowLight";
    align-items: top;
    
}

div.todotexto{
    width: 30%;
    position: fixed;
    display: block;
    font-family: "TimesNowLight";
    align-items: top;
    align-content: flex-start;
  
    
}

div.todotexto h2{
    grid-column: 1 / span 2;
    line-height: 1.2;
    
}

div.todotexto p{
    grid-column: 1 /span 2;
     font-size: 18px;
    font-weight: 100;
    line-height: 1.2; 
    
}

div.todotexto p a{
    font-family: "TimesNowLight"; 
    
}

section.imagenes{
    width: 60%;
    margin-left: 40%;
}

div.todoimages{
    width: 100%;
    
    
}


div.text h2{
    grid-column: 1 / span 2;
    line-height: 1.2;
    
}

div.text_project h2{
    grid-column: 1 / span 2;
    line-height: 1.2;
     
}

}

div.text h2.prueba{
    grid-column: 1 / span 6;
    line-height: 1.2;
    font-size: 25px;
    
}

div.text p{
    grid-column: 3 /span 4;
     font-size: 18px;
    font-weight: 100;
    line-height: 1.2;
}



section.description{
    width: 100%;
   
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 1% 1%;
    font-family: "FoundersGroteskLight";
    font-size: 23px;
}


section.description p{
    grid-column: 1 / span 3;
    
}

section.description div{
    grid-column: 1 / span 4;
    font-size: 23px;
    margin-bottom: 5px;
}

section.description p.bio{
    margin-bottom: 20px;
}

section.description h2{
    grid-column: 1 / span 2;
    font-size: 23px;
  font-family: "TimesNowLight";
}

section.description li{
    grid-column: 1 / span 2;
    font-size: 23px;
    text-decoration: none;
    list-style: none;
}

section.description li a{
    grid-column: 1 / span 2;
    font-family: "FoundersGroteskRegular";
    font-size: 23px;
    text-decoration: none;
    margin: 0 0 0 0px;
    
}


footer{
   
    display: flex;
    align-items: center;
    justify-content: space-between;  
    align-content: flex-end;
    position: fixed;
    left: 1%;
    right: 1%;
    bottom: 1%;
}


footer a{
    font-family: "FoundersGroteskLight";
    margin-left: 35px;
}


.carousel{
    width: 100%;
    height: auto;
    margin-bottom: 50px;
    
}


.gallery-cell{
    width: 100%;
    
}

.gallery-cell img{
    width: 100%;
}

.video video{
    width: 100%;
}


@media (max-width: 660px){
    
    
body {
  margin: 2% 2% 2% 2%;
  width: 96%;
}
 header{
    display: flex;
    align-items: top;
    justify-content: space-between;
    position: fixed;
    left: 1%;
    right: 1%;
    top: 1%;
    font-family: "FoundersGroteskLight";
    }
    
header h1{
    width: 59%;
    margin-left: 1%;
    }
    
header h1 a img{
        width: 90%;
    }
    
header nav{
    width: 41%;
    display: flex;
    align-items: top;
    justify-content: left;
    font-family: "FoundersGroteskLight";
    }
    
header nav a{
    font-size: 15px;
    margin: 2% 0% 0 13%;
    }  
    

    
h1,  footer {
 
  font-size: 15px;
}
    
a {
  font-size: 18px;
} 
    
a:hover, a.selected {
font-family: "FoundersGroteskLight";
}

section.project{
    display: block;
}
    
section.primero{
    margin-top: 100px;
}

section.project div.todo{
    width: 100%;
    
}
    

section.project img{
  
    width: 100%;

}

div.text{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1% 1%;
    font-family: "TimesNowLight";
    align-items: top;
    margin: 0 0 4% 0;
    
}


div.text h2{
    grid-column: 1 / span 3;
    line-height: 1.2;
    margin-top: 3px;
    margin-bottom: -8px;
    
}



div.text p{
    grid-column: 1 /span 3;
     font-size: 18px;
    font-weight: 100;
    line-height: 1.2;
}

    
section.description{

    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1% 1%;
    font-size: 20px;
}


section.description p{
    grid-column: 1 / span 2;
    
}

section.description div{
    grid-column: 1 / span 2;
    font-size: 20px;
    margin-bottom: 5px;
}

section.description p.bio{
    margin-bottom: 40px;
}

section.description h2{
    grid-column: 1 / span 2;
    font-size: 20px;
}

section.description li{
    grid-column: 1 / span 2;
    font-size: 20px;
     margin-bottom: -4px;
}

section.description li a{
    grid-column: 1 / span 2;    
    font-size: 20px;
   
    
}


section.informacion{
    margin-top: 90px;
}


div.todotexto{
    width: 95%;
    position: inherit;
    display: inline;
     
}

section.informacion div h2{
    font-size: 20px;
    font-family: "FoundersGroteskLight";
    font-weight: 100;
}    

div.todotexto p{
        font-size: 20px;
     font-family: "TimesNowLight";
    }
    
    
section.imagenes{
    width: 100%;
    margin-left: 0;
}

div.todoimages{
    width: 100%;
    
    
}
    
    
    
}


@media (max-width: 400px){
    
header nav a{
    font-size: 15px;
    margin: 3% 0% 0 12%;
    }  
    
    footer h1{
       font-size:  13px;
    }
    
footer a {
  font-size: 13px;
} 
    
}