:root{
    /*--red:#ff2e63;*/
    --black:#252a34;
    --blue:#08d9d6;
    --white:#eaeaea;
    --title:35px;
    --text:19px;
 }
 
 *{
     margin:0;
     padding: 0;
     box-sizing: border-box;
 }
 body{
     background: #ffff;
     overflow-x: hidden;
     font-family: 'Red Hat Text', sans-serif;
 }
 .go-top{
     position: fixed;
     bottom: 100px;
     right: -100%;
     width: 50px;
     height: 50px;
     background: #fff;
     border:2px solid var(--blue);
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
     z-index: 1000;
     transition: 0.5s;
 }
 .go-top:hover{
     background: var(--blue);
     color:#fff;
     border: 2px solid var(--white);
 }
 .go-top:hover span{color:var(--white);}
 
 .go-top > span{
    font-size: 30px;
    color: var(--black);
 }
 
 
 /** Skew **/
 .skew-abajo{
     position: absolute;
     bottom: 0;
     left: 0;
     border-width: 0 0 10vh 100vw;
     border-style: solid;
     border-color: transparent transparent #fff transparent;
 }
 .skew-arriba{
     position: absolute;
     top: 0;
     left: 0;
     border-width: 10vh 100vw 0 0;
     border-style: solid;
     border-color: #fff transparent transparent transparent;
     z-index: 10;
 }
 
 /** Navegation Menu **/
 #header{
     position: relative;
     width: 100%;
 }
 .menu{
     position: fixed;
     top:0;
     left: 0;
     width: 100%;
     height: 60px;
     background: #fff;

     display: flex;
     justify-content: space-between;
     align-items: center;
     z-index: 9999;
 }
 .menu .logo-box{margin-left: 20px;}
 .menu .logo-box h1 a{
     text-decoration: none;
     font-size: var(--title);
     font-weight: 400;
     color:var(--black);
 }
 .menu .list-container{margin-right: 20px;}
 .menu .list-container ul{display: flex;}
 .menu .list-container ul li{list-style: none;}
 .menu .list-container ul li a{
     text-decoration: none;
     margin: 0px 10px;
     padding:8px;
     color: var(--black);
     border-radius: 24px;
     transition: 0.3s;
     font-size: 16px;
 }
 .menu .list-container ul li a.active{
     background: var(--blue);
     color:#fff;
 }
 .menu .list-container ul li a:hover{
     background: var(--blue);
     color:#fff;
 }
 
 .btn-menu > .fa-bars{
     display: none;
 }
 
 @media only screen and (max-width:900px){
     .btn-menu > .fa-bars{
         display: block;
         position:absolute;
         right: 30px;
         top: 20px;
         font-size: 28px;
         color: var(--black);
         transition: 0.5s;
         cursor: pointer;
     }
     .btn-menu > .fa-times{color: var(--blue);}
     .btn-menu > .fa-bars:hover{color:var(--blue);}
     .menu .logo-box{margin-left: 30px;}
     .menu .list-container{
         position: fixed;
         top:60px;
         left:-100%;
         background:#fff;
         width: 100%;
         height: calc(100vh - 60px);
     }
     .menu .list-container .lists{
         width: 100%;
         height: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
         border-top:4px solid var(--blue);
     }
     .menu .list-container ul li{
         width: 90%;
         border-bottom: 2px solid var(--black);
         display: flex;
         justify-content: center;
     }
     .menu .list-container ul li a{
         font-size: 20px;
         text-align: center;
         padding:12px 0px;
     }
     .menu .list-container ul li a.active{
         background: none;
         color:var(--blue);
     }
     .menu .list-container ul li a:hover{
         background: none;
         color:var(--blue);
     }
 }
 
 /** Navegation Menu **/
 
 /** IMG Header **/
 .img-header{
     position: relative;
     width: 100%;
     height: 100vh;
     background:url(../img/header.jpg);
     background-attachment: fixed;
     background-position: center;
     background-size: cover;
 }
 .img-header .welcome{
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0,0,0,0.6);
 
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
 }
 .img-header .welcome h1{
     font-size: 50px;
     color:#fff;
     font-weight: 200;
 }
 .img-header .welcome hr{
     width: 400px;
     height: 2px;
     background: #fff;
     border: none;
     margin-top: 5px;
 }
 .img-header .welcome p{
     font-size: 20px;
     color: #fff;
     margin-top: 20px;
 }
 .img-header .welcome > button{
     width: 170px;
     height: 40px;
     background: var(--blue);
     border-radius: 24px;
     border:none;
     outline: none;
     font-size: 22px;
     color: #fff;
     text-align: center;
     margin-top: 20px;
     cursor: pointer;
     transition: 0.5s;
 }
 .img-header .welcome > button:hover{
     background:var(--blue);
 }
 
 @media only screen and (max-width:773px ){
     .img-header .welcome h1{font-size: 40px;}
     .img-header .welcome > button{width: 130px; font-size: 20px;}
 }
 @media only screen and (max-width:590px){
     .img-header .welcome h1{font-size: 30px;}
     .img-header .welcome hr{width: 100px;}
     .img-header .welcome p{font-size: 17px;}
     .img-header .welcome > button{width: 100px; font-size: 17px;}
 }
 
 /** Acerca de Nosotros **/
 .acerca-de{
     width: 100%;
     margin-top: 120px;
 }
 .acerca-de .info-container{
     width: 80%;
     margin:auto;
     display: flex;
     justify-content: center;
     flex-direction: column;
 }
 .acerca-de .info-container h1{
     font-size: 50px;
     font-weight: 400;
     color: var(--black);
     text-align: center;
     margin-bottom: 20px;
 }
 .acerca-de .info-container h2{
    font-size: 35px;
    font-weight: 400;
    color: var(--black);
    text-align: center;
    margin-bottom: 20px;
}
 .acerca-de .info-container p{
     text-align: center;
     font-size: 17px;
     color: var(--black);
     line-height: 35px;
     margin:10px 0px;
 }
 .acerca-de .info-container .about-gallery{
     width: 100%;
     display: flex;
     justify-content: center;
     margin: 50px 0px;
 }
 .acerca-de .info-container .about-gallery img{
     width: calc(33.333% - 10px);
     height: 300px;
     margin: 10px 10px;
     object-fit: cover;
     border-radius: 10px;
     cursor: pointer;
 }
 .acerca-de .info-container .about-more{
     width: 100%;
     display: flex;
     justify-content: center;
 }
 .acerca-de .info-container .about-more button{
     width: 120px;
     height: 40px;
     text-align: center;
     line-height: 40px;
     font-size: 20px;
     background: var(--blue);
     border: none;
     outline: none;
     border-radius: 20px;
     color: #fff;
     cursor: pointer;
     transition: 0.5s;
 }
 .acerca-de .info-container .about-more button:hover{background: var(--blue);}
 
 @media only screen and (max-width:773px){
     .acerca-de .info-container .about-gallery{flex-direction: column;}
     .acerca-de .info-container .about-gallery img{width: 100%;}
 }
 @media only screen and (max-width:590px){
     .acerca-de .info-container h1{font-size: 30px;}
     .acerca-de .info-container p{font-size: 15px;}
 }
 
 /** Nuestros proyectos **/
 .our-projects{
     position: relative;
     width: 100%;
     height: 100%; 
     background: url(../img/tema1.jpg);
     background-attachment:fixed;
     background-position: center;
     background-size: cover;
     margin-top: 100px;
 }
 .our-projects .deg-background{
     position:absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background:rgba(0,0,0,0.8);
 }
 .our-projects .ejeZproject{
     position: relative;
     width: 100%;
     height: 100%;
 }
 .our-projects .container-project{
     width: 70%;
     margin:auto;
     padding-top: 90px;
 }
 .our-projects .container-project .project-title{
     border:2px solid #fff;
     padding:10px;
     text-align: center;
     width: 50%;
     margin: auto;
 }
 .our-projects .container-project .project-title h2{
     font-size: 40px;
     color: #fff;
     font-weight: normal;
 }
 .our-projects .container-project .project-title hr{
    background:#fff;
    width: 50%;
    height: 3px;
    margin: 10px auto;
 }
 .our-projects .container-project .project-img{
     width: 100%;
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     margin-top: 80px;
     padding-bottom: 100px;
 }
 .our-projects .container-project .project-img img{
   width: calc(30% - 10px);
   margin:10px;
   object-fit: cover;
   border-radius: 10px;
   cursor: pointer;
 }
 @media only screen and (max-width:773px){
     .our-projects .container-project .project-img img{width: 80%; margin-bottom: 30px;}
 }
 @media only screen and (max-width:446px){
     .our-projects .container-project .project-title h2{font-size: 30px;}
 }
 
 /** Testimonios **/
 .testimonios{
     width: 100%;
     margin-top: 120px;
 }
 .testimonios .testimonios-title{
     width: 50%;
     margin:auto;
     text-align: center;
 }
 .testimonios .testimonios-title h2{
     font-size: 50px;
     font-weight: normal;
     color: var(--black);
     margin-bottom: 10px;
 }
 .testimonios .testimonios-title hr{
     width: 60%;
     height: 2px;
     margin:auto;
     background: var(--black);
 }
 .testimonios .box-testimonio{
     width: 90%;
     margin: 80px auto;
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
 }
 .testimonios .box-testimonio .card-testimonio{
     width: 45%;
     margin: 20px;
 }
 .testimonios .box-testimonio .card-testimonio .card-img{
     display: flex;
     justify-content: center;
     margin-bottom: 70px;
 }
 .testimonios .box-testimonio .card-testimonio .card-img img{
     width: 200px;
     height: 200px;
     /*border-radius: 50%;*/
     object-fit: contain;
     /*cursor: pointer;*/
 }
 .testimonios .box-testimonio .card-testimonio .testimonio-text{
     border: 2px solid var(--blue);
     padding:20px;
     border-radius: 20px;
     transition: 0.1s;
     cursor: pointer;
 }
 .testimonios .box-testimonio .card-testimonio .testimonio-text h4{
     font-size: 30px;
     font-weight: 400;
     color: var(--blue);
     text-align: center;
     margin-bottom: 10px;
     transition: 0.1s;
 }
 .testimonios .box-testimonio .card-testimonio .testimonio-text p{
     font-size: 20px;
     text-align: center;
     line-height: 40px;
     color: var(--black);
 }
 .testimonios .box-testimonio .card-testimonio .testimonio-text:hover{
     border: 2px solid var(--blue);
 }
 .testimonios .box-testimonio .card-testimonio .testimonio-text:hover h4{
     color: var(--blue);
 }
 
 @media only screen and (max-width:890px){
     .testimonios .box-testimonio .card-testimonio .card-img img{width: 200px; height: 200px;}
     .testimonios .box-testimonio .card-testimonio{width: 100%;}
     .testimonios .box-testimonio .card-testimonio .testimonio-text h4{font-size: 25px;}
     .testimonios .box-testimonio .card-testimonio .testimonio-text p{font-size: 17px; line-height: 35px;}
 }
 
 /** Footer **/
 .footer{
     position: relative;
     width: 100%;
     height: 100%;
     background: url(../img/footer.jpg);
     background-attachment: fixed;
     background-position: center;
     background-size: cover;
 }
 .footer .deg-footer{
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0,0,0,0.6);
 }
 .footer .ejeZfooter{
     position: relative;
     width: 100%;
     height: 100%;
 }
 .footer .footer-content{
     padding-top: 100px;
     width: 90%;
     margin: auto;
     padding-bottom: 100px;
 }
 .footer .footer-content .footer-title{
     width: 50%;
     margin: auto;
     border:2px solid #fff;
     padding:15px;
 }
 .footer .footer-content .footer-title h2{
     font-size: 35px;
     font-weight: 400;
     color: #fff;
     text-align: center;
     margin-bottom: 5px;
 }
 .footer .footer-content .footer-title hr{
     background: #fff;
     height: 2px;
     width: 80%;
     margin:auto;
 }
 .footer .formulario-content{
     width: 60%;
     margin: 50px auto;
     background: #fff;
     padding:30px;
     border-radius: 50px;
     border: 1.5px solid var(--blue);
 }
 .footer .formulario-content #formulario{
     display: flex;
     justify-content: center;
     flex-direction: column;
 }
 .footer .formulario-content #formulario label{
     font-size: 20px;
     text-align: center;
     color: var(--black);
     margin: 30px 0px 10px 0px;
 }
 .footer .formulario-content #formulario input{
     width: 90%;
     height: 40px;
     margin:auto;
     border-radius: 24px;
     outline: none;
     border:1.5px solid var(--blue);
     text-align: center;
     font-size: 18px;
     color: var(--black);
 }
 .footer .formulario-content #formulario textarea{
     width: 90%;
     height: 200px;
     margin:auto;
     padding: 20px;
     border-radius: 24px;
     outline: none;
     border:1.5px solid var(--blue);
     font-size: 15px;
     color: var(--black);
 }
 .footer .formulario-content #formulario .send{
     margin: 30px;
     display: flex;
     justify-content: center;
 }
 .footer .formulario-content #formulario button{
     width: 120px;
     height: 40px;
     text-align: center;
     line-height: 40px;
     font-size: 20px;
     background: var(--blue);
     border: none;
     outline: none;
     border-radius: 20px;
     color: #fff;
     cursor: pointer;
     transition: 0.5s;
 }
 .footer .formulario-content #formulario button:hover{
     background: var(--blue);
 }
 .footer .formulario-content #formulario .mensaje-form{
     width: 100%;
     margin:auto;
     padding:20px;
 }
 .footer .formulario-content #formulario .mensaje-form p{
     font-size:19px;
     color: var(--black);
     line-height: 35px;
 }
 .footer .footer-text{
     position:absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 70px;
     background:rgba(0,0,0,0.8);
     display: flex;
     justify-content: center;
     align-items: center;
     border-top: 2px solid #fff;
 }
 .footer .footer-text p{
     font-size: 20px;
     text-align: center;
     color: #fff;
 }
 
 @media only screen and (max-width:900px){
     .footer .formulario-content{width: 85%; padding:20px;}
     .footer .formulario-content #formulario input{width: 100%;}
     .footer .formulario-content #formulario textarea{width: 100%;}
 }
 @media only screen and (max-width:590px){
     .footer .formulario-content{width: 95%; padding:20px;}
     .footer .formulario-content #formulario label{font-size: 17px;}
     .footer .formulario-content #formulario input{width: 100%; font-size: 17px;}
     .footer .formulario-content #formulario textarea{width: 100%;}
     .footer .formulario-content #formulario .mensaje-form p{font-size: 17px;}
     .footer .footer-text{width: 100%; padding: 0px 30px;}
     .footer .footer-text p{font-size: 17px;}
 }