body{
    background-color:#ffe475;
    }

.grid-margin-x{
    margin-left:2%;
    margin-right:2%;
}

.grid-margin-x-photogal{
    margin-left: 2%;
    margin-right: 2%;
}

 .grid-margin-x-big{
    margin-left: 2%;
    margin-right: 2%;
}

.main{
    padding-top: 4em;
    height: 100%;
}

.main-portfolio{
    padding-top: 4em;
    padding-bottom: 12vh;
}

.main-portfolio-proyecto{
    padding-top: 4em;
    padding-bottom: 3vh;
}

.main-photo{
    padding-top: 1em;
    padding-bottom: 5vh;

}



 .preloadercontenido{
z-index:20;   
  background-color: #ffe475;
  opacity: 90%;
  height:100%;
  width: 100%;
  position:fixed;
-webkit-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;

}

.preloader{
 
  width: 200px;
  height: 200px;
  margin:20% 40%;
  border: 10px solid white;
  border-top: 10px solid #94b9ba;
  border-radius: 50%;
  animation-name: girar;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes girar {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}



/*cabecera movil*/
        .header{
            background-color:black;
            height:3em;
            position:fixed;
            width:100%;
            z-index: 510;
            overflow:hidden;
            padding-top:0.4em;   
            align-items: baseline;
            padding-bottom: 2em;
            
        }


        .logo{
            position:absolute;
            float:left;
            padding-top: 0.2em;
            left:0;
        }


        .logoup{
            position:absolute;
            width: 7.4em;
        }


        .logodown{
            position:absolute;
            width: 7.4em;
            z-index:-1;
        }


        .logoup:hover {
            /*filter:blur(2px);*/
            opacity:0%;
            background-image:url(/img/logo-hover.png);
            transition: opacity 300ms;
        }


        .menu{
            position: absolute;
            right: 1%;
            top:0.8em;

        }   


        .menu a{
            font-family: 'Playfair Display', serif;
            font-weight: 400;
            font-size: 14px;
            color:#ffe475;
            padding-left: 0.3em;
            padding-right: 0.3em;

        }

        .menu img{
            width:1em;
            margin-left: 0em;
            padding-bottom: 0.3em;

        }


        /*.menu a:visited {
            color:#ffe474;
        }*/


        .menu a:hover{
            color:white;
        }


        .menu a:active{
            color:#94b9ba;
        }


/*Submenu movil*/
        .submenu{
            background-color: white;
            position: fixed;
            margin: 0;
            bottom: 0;
            left: 0;
            display: inline-block;
            list-style: none;
            width: 100%;
            padding-bottom: 0.5em;
            padding-top: 0.2em;
            text-align: center;
            z-index: 10;

        }
        .submenu li{
            display: inline-block;

        }


        .submenu a{
            font-family:'Playfair display', sans-serif;
            font-weight: 400;
            font-size: 4vw;
            padding: 0.5em;
            color: #94b9ba;
        }


        .submenu a:hover{
            color:#123f45;
            font-weight: 600;
        }

        
        .submenu-proy{
          position: relative;
          background-color: #94b9ba;
          margin: 0;
          bottom: 0;
          left: 0;
          display: inline-block;
          list-style: none;
          width: 100%;
          padding-bottom: 0.1em;
          padding-top: 0.2em;
          text-align: center;
          z-index: 10;
    
}

        .submenu-proy li{
            display: inline-block;

        }


        .submenu-proy a{
            font-family:'Playfair display', sans-serif;
            font-weight: 400;
            font-size: 4vw;
            padding: 0.3em;
            color: #ffe475;
        }


        .submenu-proy a:hover{
            color:#123f45;
            font-weight: 600;
        }


        .down{
            position: fixed;
            margin: 0;
            bottom: 0;
            left: 0;
        }


        .backeye{
            position: fixed;
            margin: 0;
            bottom: 0;
            right: 0;
            padding-bottom: 18%;
            padding-right: 4%;
            width: 20%;
        }

           .backeyeno{
            position: fixed;
            margin: 0;
            bottom: 0;
            right: 0;
            padding-bottom: 18%;
            padding-right: 4%;
            width: 18%;
            z-index: 10;
        }
     


/*cuerpo movil*/

        .main-about{
           padding-top: 4em;

        }

        h1{
            font-family: 'Playfair Display', serif;
            font-weight: 500;
            font-style: italic;
            font-size: 6.4vw;
        }
        h2{
            font-family: 'Raleway', sans-serif;
            font-weight:200;
            font-size: 12px;
        }

        h3{
            font-family: 'Playfair Display', serif;
            font-weight: 900;
            font-style: italic;
            font-size:80px;
            color: #ffffff;
            text-shadow: 0px 0px 5px black;
        }

        h4{
            font-family: 'Raleway', sans-serif;
            font-weight:500;
            font-size:14px;
            line-height: 15px;
            color: black;
            padding-left:1em;
        }

        h5{
            font-family: 'Playfair Display', serif;
            font-weight: 500;
            font-style: italic;
            font-size: 40px;
            color:black;
        }
        h6{
            margin-left: 6%;
            font-family:'Raleway', sans-serif;
            font-weight: 400;
            font-size: 14px;
        }

        p{
            font-family: 'Raleway', sans-serif;
            font-weight: 500;
            font-size: 16px;
            color: #0b0b0b;
            z-index: 8;
        }



/*home movil*/

        .construction h1{
            text-align: center;
            font-size: 50px;
        }


        .constructionportfolio h1{
            text-align: center;
            font-size: 50px;
            padding-top: 5em;
        }


/*entrada movil*/

        .welcome{
        position: fixed;           
        width: 30%;
        z-index: 10;
            
        }

 .loguito{
        position: absolute;           
        width: 30%;
     }


        .cabecera{
       padding-top: 12vw;       
       padding-left: 34vw;
        
        }

        .cabecera h1{
            font-size: 7.5vw;
            line-height: 6vw;
        }

.blue{
    color: #94b9ba;
}

/*gal movil*/

        .gal img:hover{
            /*filter:blur(2px);*/
            opacity:20%;
            background-color:black;
            transition: opacity 500ms;
        }
        .gal h1{
            position:absolute;
            z-index:-1;
            font-size: 9vw;
            color:#ffe475;
            padding-left: 5vw;
            padding-top: 40vw;
        }


        .gal h2{
            position:absolute;
            z-index:-1;
            font-size:4vw;
            color:#ffe475;
            line-height: 30vw;
            padding-left: 5vw;
            padding-top: 40vw;
            text-align: right;
            }


        .gal:hover{
            background-color:black;
            opacity: 90%;
          }


/*titulos movil*/
         .titulos{
           padding-top: 1vw;
           padding-left: 15vw;
        
        }

        .titulos h1{
            font-size: 7.5vw;
            line-height: 6vw;
        }

        .ojito{
        position: absolute;           
        width: 15vw;
        }


/*proyectos movil*/
.adapt1{
    display:block;
}
.adapt2{
    display:none;
}

.adapt3{
    display: none;
}

 .description3{
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    z-index: 5;
    }

.quote p{
    color: #123f45;
    font-family: 'Playfair display', serif;
    font-weight: 900;
    font-size: 20px;
}

  /*  .description2{
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    z-index: 5;
    }*/
    
video{
    width: 100%;
    margin: 2%;
}

/*about movil*/
        .me{
            position:relative;
            float:left;
           }

        .meup{
            width: 100%;
            left:0;
            right;0;
            top:0;
        }

        .medown{
            width: 100%;
            position:absolute;
            left:0;
            right;0;
            top:0;
            z-index:-1;
        }


        .meup:hover {
            opacity:0%;
            transition: opacity 10ms;
        }


        .hey{
            position:absolute;
            top:72%;
        }


        .about{
            padding-top: 0.4em;
            padding-left: 0.8em;

        }


        .contact {
            padding-top:0em;
            padding-bottom: 2em;
       

        }
        .contact h5 {
            font-weight: 800;
            font-size: 50px;
            Color: white;
            text-shadow: 0 0 1px white;
            padding-right: 0;
            
        }


        .contact h4{
            font-weight: 500;
            font-size: 20px;
            padding-left: 0;
            padding-right: o;
        }
        
        .details{
            text-align: left;
        }



/*  MEDIUM more than 641 px*/
@media only screen and (min-width: 40.063em) {

body{
    background-color:#ffe475;
 }

.grid-margin-x{
    margin-left: 4%;
    margin-right: 4%;
}

.main-about{
     padding-top: 2em;
 }

.main-portfolio{
     padding-top: 4em;
    padding-bottom: 8%;
}
     
    .grid-margin-x-photogal{
    margin-left: 4%;
    margin-right: 4%;
        
}
    
    .grid-margin-x-big{
    margin-left: 4%;
    margin-right: 4%;
}
    
/*cabecera medium*/

        .header{
            height: 3em;
            padding-top:0.6em;      
            width:102%;
            margin-left:-2%;
            padding-top: 0.4em;
        }

        .logo{
            left:1em;
        }

        .logoup{
            position:absolute;
            width: 8em;
        }


        .logodown{
            position:absolute;
            width: 8em;
            z-index:-1;
        }

        .menu{
            margin-right: 0.5em;
            top:0.6em;
        }
        .menu a{
            font-size: 18px;
        }

        .menu img{
            margin-left: 0.5em;
        }


/*submenu medium*/
 
        .submenu a{
            font-size: 2.2vw;
        }

        .submenu-proy a{
            font-size: 2.1vw;
        }
        
    
   
/*cuerpo medium*/


        h3{
            font-size:99px;
        }

        h4{
            font-size:18px;
            line-height: 18px;
        }

        h5{
            font-size: 35px;
        }


        p{
            font-size: 2.4vw;
        }


/*entrada medium*/
        .welcome{
        position: fixed;           
        width: 25%;
            
        }

     .loguito{           
        width: 25%;
     }

        .cabecera{
        padding-top: 10vw;
        padding-left: 29vw;
        
        }

        .cabecera h1{
            font-size: 6.5vw;
            line-height: 5.5vw;
        }


   
/*gal medium*/

        .gal h1{
            font-size: 4.5vw;
            padding-left: 4vw;
            padding-top: 20vw;
        }


        .gal h2{
            font-size: 1.5vw;
            line-height: 15vw;
            padding-left: 4vw;
            padding-top: 20vw;
            }

    
    /*proyectos medium*/
    
     
    .adapt1{
        display: none;
    }

    
    .adapt2{
        display: block;
    }
    
    .adapt3{
        display:none;
    }

      .adapt4{
        display:block;
    }
    

    .description2{
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    z-index: 5;
    }
    
  .quote p{
    color: #123f45;
    font-family: 'Playfair display', serif;
    font-weight: 900;
    font-size: 2.1vw;
    z-index: 8;
      
} 
     
       .backeye{
            padding-right: 1%;
            padding-bottom: 5%;
            width: 18%;
        }
    
        .backeyeno{
            padding-right: 1%;
            padding-bottom: 5%;
            width: 14%;
        }
    
    
    video{
    width: 95%;
    margin: 2%;
}
    
    video::-internal-media-controls-download-button {
    display:none;
}


/*about medium*/
    .me{
    position: relative;
    padding-top: 2em;
  
    }
    

    .medown{
        padding-top: 2em;
     }
    
    
    .hey{
     top: 60%;
     left:100%;
    }
    
        .about{
            position: relative;
    
            padding-left: 0;

        }


        .contact {
text-align: center;
        
        }
    
        .contact h5 {
            font-weight: 800;
            font-size: 60px;
            padding-right: 1.3em;
        }


        .contact h4{
            font-weight: 500;
            font-size: 20px;
            padding-left: 0;
            padding-right: 4em;
        }

  .details{
            text-align: center;
        }

 
    
    
    
    
}


/* LARGE more than 1025px*/
@media only screen and (min-width: 64.063em) {
    
    body{
    background-color:#ffe475;
    }
    
.grid-margin-x{
    margin-left: 10%;
    margin-right: 10%;
}

    .main-about{
        padding-top: 3em;
        display: flex;
    }

 .main-portfolio{
    padding-top: 4em;
    display: flex;
    padding-bottom: 6%;
}   
.grid-margin-x-photogal{
    margin-left: 16%;
    margin-right: 16%;
}
    
.grid-margin-x-big{
    margin-left: 8%;
    margin-right: 8%;
}
        
  
         h3{
            font-size:90px;
        }


        h5{
            font-size: 30px;
        }

        p{
            font-size:2vw;
        }

    h1{
        font-size: 4em;
    }
    
/*cabecera large*/
        .header{
            height:3.2em; 
            padding-top: 0.4em;
        }

            .logo{
                left:1.5em;
            }

        .logoup{
            width:9em;
        }


        .logodown{
            width:9em;
        }

        .menu a{
             font-size: 22px;
        }   

  
    
/*entrada large*/
        .welcome{
        position: fixed;           
        width: 15%;   
        }

         .loguito{           
        width: 15%;
     }
    
    
        .cabecera{
        padding-top: 2.5vw;
        padding-left: 18vw;
        
        }

        .cabecera h1{
            font-size: 6vw;
            line-height: 5vw;
        }


     
/*gal large*/

        .gal h1{
            font-size: 2.7vw;
            padding-left: 2.5vw;
            padding-top: 11vw;
        }


        .gal h2{
            font-size: 1.2vw;
            line-height: 10vw;
            padding-left: 2.5vw;
            padding-top: 11vw;
            }
    
    /*about large*/
        .hey{
            top:0;
            left:85%;
        }
    
        .me{
            position:relative;
        }
     
    
        .about{
            position: relative;
            padding-top: 7em;
            padding-left: 0;

        }
    
        .details{
            text-align: center;
        }
    
        .contact{
            text-align: center;
            position: absolute;
            padding-top: 35em;
            padding-left:3em;
            z-index: -1;
        }
    

 /*submenu LARGE*/

        .submenu a{
            font-size: 2vw;
        }

     .down{
            position: relative;
        }

    /*proyectos large*/
    .adapt1{
        display: none;
    }

    .adapt2{
        display: block;
    }
    
    .adapt3{
        display:block;
        padding-left: 1em;
    }
    
    .ajuste{
        margin-bottom: 2.5em;
    }
    
    .adapt4{
        display:none;
    }
    
    .img adapt3{
        padding-bottom: 2em;
    }
    
  .quote p{
    color: #123f45;
    font-family: 'Playfair display', serif;
    font-weight: 900;
    font-size: 1.7vw;
}  
    
     .description2{
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    z-index: 5;
    }
    
    .description2 h5{
        font-size: 4vw;
    }
    
      .backeye{
            padding-right: 1%;
            width: 15%;
        }
    
    video{
    width: 95%;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 2%;

}
}  


    /*XLARGE more than 1441 x*/
@media  only screen and (min-width: 90.063em){
    
    body{
    background-color:#ffe475;
    max-width: 1900px;
    align-content: center;
    }
   
.grid-margin-x-photogal{
    margin-left: 20%;
    margin-right: 20%;
}
    
     .grid-margin-x{
    margin-left: 14vw;
}
   
/*cabecera xlarge*/
        .header{
            height: 3.5em;
        }

        .logo{
            left:2em;
        }
        .logoup{
            width:12em;
            padding-left: 2em;
        }


        .logodown{
            width:12em; padding-left: 2em;
        }


        .menu a{
            font-size: 24px;
        }


        p{
            font-size:1.5vw;
        }

    h1{
        font-size: 5em;
    }
    
    /*entrada xlarge*/
        .welcome{
        position: fixed;           
        width: 16%; 
        
        }

         .loguito{           
        width: 16%;
     }
    
    
        .cabecera{
        padding-top: 3vw;
        padding-left: 17vw;
        padding-bottom: 3em;
        
        }

        .cabecera h1{
            font-size: 6em;
            line-height: 0.9em;
        }

    
    .submenu-proy{
        width: 100vw;
    }
    
/*gal xlarge*/

        .gal h1{
            font-size: 2.3em;
            padding-left: 2vw;
            padding-top: 5em;
        }


        .gal h2{
            font-size: 1em;
            line-height: 4em;
            padding-left: 2vw;
            padding-top: 13em;
            }
    
    
    
}