@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;600&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Nunito Sans', sans-serif;
    text-decoration: none;
    list-style: none;
}

html{
    scroll-behavior: smooth;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

body{
    background-color: #fff;
    overflow: hidden;
    overflow-y: auto;
    width: 100%;
}

.name-company{
    position: absolute;
    display: inline-block;
    line-height: 15px;
    height: 100%;
    width: 200px;
    margin-left: 95px;
    text-align: center;
    transform: translateY(25px);
}

h5{
   color: #000;
}

nav{
    position: relative;
    position: fixed;
    top: 0;
    background: #fff;
    height: 80px;
    width: 100%;
    z-index: 100;
}

nav ul li a{
    font-size: 30px;
    color: #000;
}

nav ul li a:hover{
    
    color: #82c41d;
}


.castillo{
    position: absolute;
    padding: 12px 50px;
}

.castillo img{
    width: 50px;
    height: 74px;
    padding-bottom: 24px;
}

.logo{
    height: 40px;
}

nav ul{
    float: right;
    margin-right: 25px;
}

nav ul li{
    display: inline-block;
    line-height: 80px;
    margin: 0 8px;
}
nav ul li a{
    color: #000;
    font-size: 12px;
    padding: 5px 5px;
    border-radius: 4px;
}

nav ul li a.activo{
    background-color: #222;
    color: #fff;
    transition: .5s;
}

nav ul li a:hover{
    background-color: #222;
    color: #fff;
    transition: .5s;
}

.chequeo{
    font-size: 25px;
    color: #fff;
    float: right;
    line-height: 80px;
    margin-right: 12px;
    cursor: pointer;
    display: none;
}

#chequeo{
    display: none;
}

.sobre-nosotros, .galeria, .servicios, .contactanos{
    width: 100%;
    height: 100%;
}

.sobre-nosotros, .contactanos{
    background-color: #fff;
}

.galeria{
    background-color: #000;
}

.servicios{
    background-color: #eed;;
}

.slideshow .about-us, .gallery, .services, .contact-us{
    width: 84%;
    height: 900px;
    background-color: #fff;
    margin: auto;
}

#sobre-nosotros, #ultimos-proyectos, #galeria, #servicios, #contactanos{
    scroll-margin-top: 80px;
}


.about-us{
    background-color: #fff;
    margin-top: 40px;
    height: fit-content;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-auto-rows: 10px;
    align-items: normal;
    margin-bottom: 10px;
    padding-top: 100px;
    padding-bottom: 70px;
    width: 84%;
    max-width: 1335px;
    margin: auto;
}

.about-us__informacion{
    padding-left: 40px;
    grid-column: 1/3;
}

.about-us__informacion h3{
    font-size: 25px;
}

.about-us__informacion p{
    padding-top: 20px;
    font-size: .9rem;
}

.about-us__informacion hr{
    display: inline-block;
}

.hr-gordo{
    width: 15px;
    height: 14px;
    background-color: #222;
    border: 1px solid #222;
}

.hr-seco{
    width: 110px;
    height: 5px;
    background-color: #82c41d;
    margin-left: 5px;
    margin-bottom: 3px;
    border: 1px solid #82c41d;
}

.about-us__iconos{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(1, 1fr);
    grid-auto-rows: 300px;
    grid-auto-flow: dense;
    margin-top: 25px;
    align-items: center;
    justify-items: center;
    grid-column: 1/3;
    
}

.about-us__icono-1 i, .about-us__icono-2 i, .about-us__icono-1 h5, .about-us__icono-2 h5{
    text-align: center;
    padding-bottom: 30px;
}

.about-us__icono-1, .about-us__icono-2{
    text-align: center;
}

 .about-us__icono-2 i{
     font-size: 36px;
     color: #82c41d;
}

.about-us__icono-1 i{
    font-size: 36px;
    color: #82c41d;
}

.about-us__imagen-derecha{
    grid-row: 1/3;
    grid-column: 3/4;
    text-align: center;
}

.about-us__imagen-derecha img{
   padding: 40px;
   width: 420px;
   height: 350px;
}



.title{
    height: 125px;
    font-size: 25px;
    background-color: #fff;
    text-align: center;
    scroll-margin-top: 80px;
    padding-top: 45px;
    padding-bottom: 10px;
}

.title hr{
    display: inline-block;
}

.hr-flaco-1, .hr-flaco-2{
    width: 100px;
    height: 5px;
    background-color: #82c41d;
    margin-bottom: 3px;
    border: 1px solid #82c41d;
}

.hr-flaco-1{
    margin-left: -20px;
    margin-right: 5px;
}

.hr-flaco-2{
    margin-left: 5px;
}

.hr-barriga{
    width: 15px;
    height: 14px;
    background-color: #222;
    border: 1px solid #222;
}

.gallery, #gallery{
    background-color: #000;
    color: #fff;
}

#gallery .hr-barriga{
     background-color: #fff;
}

#gallery .hr-flaco-1{
     margin-left: 2px;
}

#gallery{
    padding-top: 15px;
}

#services{
    padding-top: 25px;
}

#services .hr-flaco-1{
     margin-left: 3px;
}

.gallery{

    height: 100%;
    max-width: 1335px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    align-items: center;
    justify-items: center;
    padding: 20px;
}

.gallery__img{
    padding: 20px;
}

.gallery img{
    width: 300px;
    height: 196px;
    cursor: pointer;
}

#services{
    background-color: #eed;
}

.services{
    background-color: #eed;
    max-width: 1335px;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    align-items: center;
    justify-items: center;
    padding-top: 40px;
    padding-bottom: 40px;
    grid-auto-flow: dense;
}


.services__icono-1, .services__icono-2, .services__icono-3, .services__icono-4, .services__icono-5{
    padding: 30px;
    text-align: center;
}

.services i{
    padding-bottom: 20px;
    
    font-size: 30px;
    
}

.services__icono-1 i{
    font-size: 36px;
    color: #82c41d;
}

.services__icono-2 i{
    
    font-size: 36px;
    color: #82c41d;
}

.services__icono-3 i{
    
    font-size: 36px;
    color: #82c41d;
}

.services__icono-4 i{
    
    font-size: 36px;
    color: #82c41d;
}

.services__icono-5 i{
    
    font-size: 36px;
    color: #82c41d;
}


#contact-us .hr-flaco-1{
    margin-left: 2px;
}


.contact-us{
    height: 90%;
    max-width: 1335px;
    margin-top: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(1, 1fr);
    grid-auto-rows: 400px;
    align-items: start;
    justify-items: center;
    padding-top: 25px;
    padding-bottom: 50px;
    gap: 5px;

}

.contact-us__quick-contact{
   /*min-width: 290px;*/
   display: grid;
   justify-items: start;
   background-color: #fff;
   padding-left: 15px;
   padding-top: 30px;
   padding-bottom: 30px;
   border: 2px solid #ddd;
   border-radius: 0px; 
}

.contact-us__quick-contact h4, .contact-us__quick-contact h5{
    margin-left: 10px;
    font-size: 16px;
 }

 .contact-us__quick-contact h5{
    padding-right: 15px;
 }
 
.contact-us__quick-contact h4{
    font-size: 25px;
}

.quick-contact__address{
    margin-bottom: 10px;
}

.quick-contact__address p{
    float: right;
    font-size: 14px;
    margin-left: 30px;
    margin-top: 20px;
    color: #000;
}

.quick-contact__address i{
    margin-top: 23px;
    margin-left: 20px;
    font-size: 32px;
    color: #82c41d;
}

.quick-contact__email{
    margin-bottom: 10px;
}

.quick-contact__email p{
     float: right;
     font-size: 14px;
     margin-left: 30px;
     margin-top: 20px;
     color: #000;
 }

.quick-contact__email p a, .quick-contact__phone p a{
    color: #000;
}

.quick-contact__email p a:visited, .quick-contact__phone p a:visited{
    color: #000;
}

 .quick-contact__email i{
     margin-top: 20px;
     margin-left: 20px;
     font-size: 26px;
     color: #82c41d;
 }

 .quick-contact__phone{
    margin-bottom: 10px;
 }

 .quick-contact__phone p{
    float: right;
     font-size: 14px;
     margin-left: 30px;
     margin-top: 20px;
     color: #000;
 }
 
 .quick-contact__phone i{
     margin-top: 20px;
     margin-left: 20px;
     font-size: 26px;
     color: #82c41d;
 }

 .contact-us__form-container{
    width: 95%;
    height: 100%;
    grid-column: 2/4;
    padding-top: 30px;
    padding-left: 10px;
    padding-right: 5px;
    padding-bottom: 30px;
    border-radius: 4px;
    background-color: #f5f6f6;
}
 

 .form-horizontal{
    width: 95%;
    height: 100%;
    margin: auto;
 }

 .form-horizontal #email, .form-horizontal #phone{
    scroll-margin-top: 80px;
 }
 

.form-horizontal textarea{
    width: 100%;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1.375rem;
    resize: none;
}

.form-horizontal h4{
    font-size: 25px;
}    

.form-horizontal input{
    width: 48.39%;
    height: 40px;
    padding-left: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: start;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1.175rem;
}

.form-horizontal .captcha, .form-horizontal .boton{
    width: 100%;
}

.boton{
    cursor: pointer;
    background-color: #b0d32e;
    border: 1px solid #b0d32e;
    color: #fff;
    transition-property: background, border;
    transition-duration: 1s;
}

#submit{
    text-align: center;
    padding-left: 0;
}



.boton:hover{
    background-color: #053305;
    border: #053305;
}

.input-name, .input-phone{
    margin-right: 2.6%;
}

.capcha-container{
    display: flex;
    width: 100%;
    height: fit-content;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    justify-content: center;
}

.capcha-item-imagen{
    height: 54px;
    width: fit-content;
    max-width: 200px;
    flex-grow: 1;
    flex-basis: 100px;
    border: 1px solid #ccc;
    flex-grow: 1;
    
    
}

.capcha-item-imagen img{
    width: 200px;
    max-width: 200px;
    height: 100%;
}

.capcha-item-boton{
    height: 100%;
    max-width: 60px;
    flex-grow: 1;
    flex-basis: 50px;
    background-color: #b0d32e;
    border: none;
    border-radius: 4px;
    flex-grow: 1;
    height: 54px;
    cursor: pointer;
    transition: all 0.8s;
    line-height: 54px;
    text-align: center;
}

.capcha-item-boton:hover{
    background-color: #7c9c07;
}

.capcha-container .capcha-item-input{
    flex-grow: 1;
    flex-basis: 160px;
    height: 56px;
    border-radius: 4px;
}

.capcha-item-boton i {
    font-size: 20px;
    color: #fff;
}



.warnings, .error-name, .error-phone, .error-phone2, .error-email, .error-email2{
    color: #000;
    background-color: #ec3333;
    width: 100%;
    height: 40px;
    display: flex;
    border: 1px solid #ec3333;
    border-radius: 4px;
    align-items: center;
    margin-top: 10px;
}

.warnings h5, .error-name h5, .error-phone h5, .error-phone2 h5, .error-email h5, .error-email2 h5{
    padding-left: 20px;
    color: #fff;
    font-size: 1.15rem;
}



.oky{
    color: #000;
    background-color: #b0d32e;
    width: 100%;
    height: 40px;
    display: flex;
    border: 1px solid #b0d32e;
    border-radius: 4px;
    align-items: center;
    margin-top: 10px;
}

.oky h5{
    padding-left: 20px;
    color: #fff;
    font-size: 1.15rem;
}


.futer-1{
    width: 100%;
    background-color: #222;
    margin-top: 50px;
    border-top: 3px solid #222;
}

.futer-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 92%;
  max-width: 1335px;
  height: 330px;
  margin: auto;
  margin-top: 20px;
  justify-content: center;
 
}

.futer-grid__logo{
    width: 100%;
    grid-column: 1/2;
    padding-top: 5px;
}

.futer-grid__logo p{
    margin-top: 34px;
    margin-right: 30px;
    color: #fff;
    font-size: 14px;
    line-height: 30px;
}    

.logo__hoja img{
    width: 44px;
    height: 54px;
}

.logo__marca{
    position: absolute;
    transform: translateY(-50px);
    margin-left: 56px;
    text-align: center;
    font-size: 12px;
    margin-top: 4px;
    color: #fff;
}

.futer-grid__our-services{
    grid-column: 2/3;
    padding-left: 20px;
}

.futer-grid__our-services .hr-seco{
   width: 130px;
}

.futer-grid__our-services ul{
    margin-top: 18px;
    line-height: 54px;
}

.futer-grid__our-services ul li{
    border-bottom: 1px dashed #fff;
    color: #fff;
}

.futer-grid__our-services ul li a{
    color: #fff;
}

.futer-grid__our-services ul li a:hover{
    color: #b0d32e;
}

.futer-grid__our-services .hr-seco{
    position: absolute;
    margin-left: 18px;
    transform: translateY(-10px);
}

.futer-grid__our-services .hr-gordo{
    position: relative;
    background-color: #fff;
}

.futer-grid__our-services h3{
    color: #fff;
    font-weight: 400;
}

.futer-grid__contact-us{
    grid-column: 3/4;
    padding-left: 40px;
}

.tema .hr-seco{
    position: absolute;
    margin-left: 19px;
    transform: translateY(-5px);
}

.tema .hr-gordo{
    position: relative;
    background-color: #fff;
    transform: translateY(5px);
}

.futer-grid__contact-us .contact-us__quick-contact{
  border: none;
  padding-left: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 20px;
  background-color: #222;
}

.futer-grid__contact-us .tema h3{
    color: #fff;
    font-weight: 400;
}

.futer-grid__contact-us .contact-us__quick-contact i{
    padding-left: 0;
    margin-left: 0;
    padding-top: 5px;
    font-size: 20px;
    color: #fff;
}

.futer-grid__contact-us .contact-us__quick-contact p{
       font-size: 12px;
       color: #fff;
}

.futer-grid__contact-us .contact-us__quick-contact .quick-contact__email p a, .futer-grid__contact-us .contact-us__quick-contact .quick-contact__phone p a{
    color: #fff;
}

.futer-2{
    width: 100%;
    height: fit-content;
    background-color: #000;
}

.futer-powered{
    width: 100%;
    max-width: 1335px;
    margin: auto;
    height: 34px;
    background-color: #000;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}

.futer-powered .izquierda, .futer-powered .derecha{
     width: 50%;
     text-align: center;
     height: fit-content;
     background-color: #000;
    
}

.futer-powered .izquierda h3, .futer-powered .derecha h3{
    color: #fff;
    font-size: 14px;
}

.futer-powered .derecha h3 a{
    color: #fff;
}

.futer-powered .derecha h3 a:hover{
    color: #b0d32e;
}

@media only screen and (max-width: 1325px) {

    .form-horizontal input{
        width: 47.84%;
    }

    .form-horizontal .captcha, .form-horizontal .boton{
        width: 100%;
    }

    .input-name, .input-phone{
        margin-right: 3.6%;
    }


}




@media only screen and (max-width: 1210px) {
    .gallery{
        width: 100%;
    }

    .gallery img{
       
        width: 290px;
        
        height: 189px;
        
    }

    .form-horizontal input{
        width: 48%;
    }

    .form-horizontal .captcha, .form-horizontal .boton{
        width: 100%;
    }

    .input-name, .input-phone{
        margin-right: 3.0%;
    }


}


@media only screen and (max-width: 1150px) {
    .gallery img{
        width: 270px;
        height: 176px;
           
    }
}


@media only screen and (max-width: 1085px) {
    .gallery img{
        width: 240px;
        height: 157px;
       
    }
}



@media only screen and (max-width: 992px){
      .castillo{
        padding-left: 20px;
      }

      nav ul li a{
        font-size: 9.5px;
      }

      .name-company{
        width: 180px;
        margin-left: 58px;
    }

    .name-company h5{
        font-size: 10px;
    }

   
    .about-us__informacion{
        padding-right: 20px;
        font-size: 14px;
    }

    .about-us__iconos{
        padding-left: 15px;
        font-size: 12px;
    }

    .about-us__icono-1 img{
        margin-left: -10px;
    }

    .about-us__icono-1 h5, .about-us__icono-2 h5{
        margin-left: 11px;
    }

    .about-us__icono-2 h5{
        padding-left: 2px;
    }

    .about-us__icono-2{
        margin-left: -4px;
    }

    .about-us__icono-2 img{
        padding-top: 0;
        margin-bottom: -5px;
    }


    .gallery{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }


    .gallery img{
        
        width: 286px;
        height: 187px;
    }

    .services__icono-4 img{
        padding-top: 10px;
    }

    .services__icono-5 img{
        margin-left: 14px;
    }

    .contact-us{
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(2, 1fr);
        align-items: center;
    }

    .contact-us__quick-contact{
        grid-column: 1/2;
        grid-row: 1/2;
        width: 90%;
        margin-left: 100px;
        margin-right: 100px;
        margin-bottom: 0;
        height: 80%;
    }


    .contact-us__form-container{
        grid-column: 1/2;
        grid-row: 2/3;
        width: 90%;
        margin-top: 0;
    }

    .form-horizontal{
        padding-left: 20px;
        padding-right: 20px;
    }

    .form-horizontal input{
        width: 100%;
    }

    .futer-1{
        width: 100%;
    }

    .futer-grid{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        height: 530px;
    }

    .futer-grid__logo{
        grid-column: 1/3;
        grid-row: 1/2;
        height: 170px;
    }

    .futer-grid__our-services{
        grid-column: 1/2;
        grid-row: 2/3;
        height: 350px;
    }

    .futer-grid__our-services ul{
        margin-top: 14px;
        line-height: 58px;
    }

    .futer-grid__contact-us{
        grid-column: 2/3;
        grid-row: 2/3;
        height: 350px;
    }


    .futer-1 .logo__hoja{
        margin-left: 33%;
        margin-right: 33%;
        position: relative;
    }

    .futer-grid__logo .logo__hoja{
        width: 80%;
    }

    .futer-grid__logo .logo__hoja img{
        width: 49px;
        height: 47px;

    }

    .futer-grid__logo .logo__hoja .logo__marca{
        margin-left: 10%;
    }
    
    .futer-1 .logo__marca h3{
        font-size: 12px;
    }

    .futer-1 .futer-grid__logo p{
        font-size: 12px;
        text-align: center;
    }

    .futer-1 .futer-grid__our-services .tema{
        position: relative;
    }

    .futer-1 .futer-grid__our-services .tema .hr-gordo{
        width: 12px;
        height: 12px;
        margin-top: 5px;
    }

    .futer-1 .futer-grid__our-services .tema .hr-seco{
        width: 104px;
        margin-top: 2px;
        margin-left: 15px;
        
    }

    .futer-1 .futer-grid__our-services .tema h3{
        font-size: 16px;
    }

    .futer-1 .futer-grid__our-services ul li, .futer-1 .futer-grid__our-services ul li a{
        
        font-size: 14px;
    }

    .futer-1 .futer-grid__contact-us .tema{
        position: relative;
    }

    .futer-1 .futer-grid__contact-us .tema h3{
        font-size: 16px;
    }

    .futer-1 .futer-grid__contact-us .tema .hr-gordo{
        width: 12px;
        height: 12px;
        margin-top: 5px;
    }

    .futer-1 .futer-grid__contact-us .tema .hr-seco{
        width: 90px;
        margin-top: 2px;
        margin-left: 15px;      
    }

    .futer-grid__contact-us .contact-us__quick-contact{
        margin-left: 0;
    }

    .futer-grid__contact-us .contact-us__quick-contact .quick-contact__address, .futer-grid__contact-us .contact-us__quick-contact .quick-contact__phone, .futer-grid__contact-us .contact-us__quick-contact .quick-contact__email{
        height: 70px;
    }

    .futer-powered{
        height: 44px;
    }

    .futer-powered .izquierda, .futer-powered .derecha{
        width: 450px;
        height: fit-content;
        background-color: #000;
        text-align: center;
   }
}


@media only screen and (max-width: 768px){
     .chequeo{
        display: block;
        margin-top: 10px;
     } 

    nav ul{
        position: fixed;
        width: 100%;
        height: 100%;
        background: #222;
        opacity: 0.9;
        top: 80px;
        left: 100%;
        text-align: center;
        transition: all .5s;
     }

     nav{
        position: fixed;
     }

     nav ul li{
        display: block;
        margin: 38px 0;
        line-height: 40px;
     }

     nav ul a{
        font-size: 20px;
        
     }

     nav ul li a{
        color: #fff;
     }

     nav ul li a:hover, nav ul li a.activo{
        background: none;
        color: #53FBBC ;
     }

     #chequeo:checked ~ ul{
        left: 0;
     }
    
     .name-company{
        width: 148px;
        height: 80px;
        margin-left: 35%;
        margin-right: 35%;
    }

    .name-company h5{
        font-size: 12px;
    }
   
    .about-us, .gallery, .services, .contact-us, .contact-us__quick-contact, .contact-us__form-container{
        width: 100%;
    }

    .sobre-nosotros, .galeria, .servicios{
        padding-bottom: 50px;
    }
 
    .about-us{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        padding-top: 0;
        text-align: left;
        margin-top: 5px;
        margin-bottom: 10px;
        height: 1090px;
    }

    .about-us__informacion{
        grid-column: 1/3;
        padding-left: 40px;
        padding-right: 40px;
        padding-top: 5px;
        margin-bottom: 0;
    }

    .about-us__iconos{
        grid-column: 1/3;
        padding: 0;
        margin-top: 0;
    }

    .about-us__informacion{
        font-size: 16px;
    }

    .about-us__icono-1 h5, .about-us__icono-2 h5{
        font-size: 13px;
    }

    .about-us__icono-1 i{
        padding-left: 8px;
        padding-right: 0;
    }

    .about-us__icono-2 i{
        padding-left: 8px;
        padding-right: 0;
    }

    .about-us__imagen-derecha{
        grid-column: 1/3;
        grid-row: 3/4;
        margin-top: 0;
    }

    .about-us__imagen-derecha img{
        width: 100%;
        height: 100%;
        padding: 0 15px;
        border-radius: 8px;
    }


    .gallery{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        border: #000;
       
    }

    .gallery img{
        width: 246px;
        height: 161px;
    }

    .services__icono-1, .services__icono-2, .services__icono-3, .services__icono-4, .services__icono-5{
        padding: 25px;
    }

    .services__icono-1 h5, .services__icono-2 h5, .services__icono-3 h5, .services__icono-4 h5, .services__icono-5 h5{
        font-size: 13px;
    }

    .services__icono-2 i{
        
        margin-bottom: 10px;
    }

    .services__icono-4 h5{
        margin-top: 10px;
    }


    .contact-us{
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(2, 1fr);
        align-items: center;
        
    }

    .contact-us__quick-contact{
        grid-column: 1/2;
        grid-row: 1/2;
        padding-left: 10px;
        height: 80%;
    }

    .contact-us__form-container{
        grid-column: 1/2;
        grid-row: 2/3;
    }

    .form-horizontal input{
         width: 100%;
    }

    .futer-grid{
        width: 100%;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(3, 1fr);
        margin-left: 0;
        padding-left: 0;
        height: 930px;
        
    }

    .futer-grid__logo{
        grid-column: 1/2;
        grid-row: 1/2;
        padding-left: 20px;
        padding-right: 20px;
        
    }

    .futer-grid__logo p{
        margin-right: 0;
        color: #fff;
    }


    .futer-grid__our-services{
        grid-column: 1/2;
        grid-row: 2/3; 
        padding-left: 20px;
        padding-right: 20px;
    }


    .futer-grid__contact-us{
        grid-column: 1/2;
        grid-row: 3/4;
        padding-left: 20px;
        padding-right: 20px;
  
    }

    .futer-1 .futer-grid__contact-us .contact-us__quick-contact{
       width: 100%;
    }

    .izquierda{
        display: block;
        width: 100%;
    }

    .derecha{
        display: block;
        width: 100%;
    }

    .izquierda h3, .derecha h3{
        font-size: 10px;
        font-weight: lighter;
    }
}

@media only screen and (max-width: 700px) {
    .futer-grid__logo .logo__hoja{  
        margin: auto;
    }

    .futer-grid__logo .logo__hoja img{  
        margin-left: 25%;
    }

    .futer-grid__logo .logo__hoja .logo__marca{
        margin-left: 37%;
    }
}

@media only screen and (max-width: 630px) {
    .gallery img{
        width: 226px;
        height: 148px;
    }

    .futer-grid__logo .logo__hoja img{  
        margin-left: 22%;
    }

    .futer-grid__logo .logo__hoja .logo__marca{
        margin-left: 36%;
    }
}

@media only screen and (max-width: 595px){
    .about-us{
      height: 900px;
    }

    .warnings h5, .error-name h5, .error-phone h5, .error-phone2 h5, .error-email h5, .error-email2 h5{
        font-size: 1rem;
        padding-right: 8px;
    }
}

@media only screen and (max-width: 575px) {
    .gallery img{
        width: 206px;
        height: 135px;
    }

    .futer-grid__logo .logo__hoja{  
        margin: auto;
    }

    .futer-grid__logo .logo__hoja img{  
        margin-left: 20%;
    }

    .futer-grid__logo .logo__hoja .logo__marca{
        margin-left: 34%;
    }
}

@media only screen and (max-width: 540px) {
    .services{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }

    .services__icono-5{
        grid-column: 1/3;
    }
}


@media only screen and (max-width: 525px) {
    .gallery img{
        width: 186px;
        height: 122px;
    }

    .warnings h5, .error-name h5, .error-phone h5, .error-phone2 h5, .error-email h5, .error-email2 h5{
        font-size: .94rem;
        
    }
}

@media only screen and (max-width: 490px) {
    .gallery img{
        width: 166px;
        height: 108px;
    }

    .warnings h5, .error-name h5, .error-phone h5, .error-phone2 h5, .error-email h5, .error-email2 h5{
        font-size: 0.84rem;
    }

    .futer-grid__logo .logo__hoja{  
        margin: auto;
    }

    .futer-grid__logo .logo__hoja img{  
        margin-left: 12%;
    }

    .futer-grid__logo .logo__hoja .logo__marca{
        margin-left: 30%;
    }
}

@media only screen and (max-width: 445px) {
    .gallery img{
        width: 146px;
        height: 95px;
    }

    .warnings h5, .error-name h5, .error-phone h5, .error-phone2 h5, .error-email h5, .error-email2 h5, .oky h5{
        font-size: 0.8rem;
       
    }

    .futer-grid__logo .logo__hoja img{  
        margin-left: 9%;
    }

    .futer-grid__logo .logo__hoja .logo__marca{
        margin-left: 29%;
    }

}


@media only screen and (max-width: 410px){


    nav ul li{
   
        margin-top: 12%;
        line-height: 40px;
    
    }
     

    .about-us, .gallery, .services, .contact-us{
        width: 100%;
        margin: 0 0 0 0;
        padding: 0 0 0 0;
    }

    .castillo{
        width: 70px;
        height: 80px;
        padding-left: 20px;
    }

    .castillo img{
        width: 45px;
        height: 69px;
    }

    .name-company{
        margin-left: 30%;
    }

    .name-company h5{
        font-size: 10px;
        text-align: center;
    }

    .about-us{
        
        height: 810px;
    }

    .gallery{
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(6, 1fr);
        border: #000;
       
    }

    .gallery img{
        width: 246px;
        height: 186px;
    }


    .contact-us{
       align-items: center;
    }

    .contact-us__quick-contact{
        height: 80%;
    }

    .contact-us__quick-contact h4{
         padding-top: 30px;
    }

    .contact-us__quick-contact h5{
        font-size: 16px;
    }

    .quick-contact__address img, .quick-contact__email img, .quick-contact__phone img{
        width: 26px;
        height: 26px;
    }

    .quick-contact__address h5, .quick-contact__email h5, .quick-contact__phone h5{
           font-size: 14px;
    }
    
    .title h1{
        font-size: 18px;
       }
    
    .contact-us{
        width: 100%;
        margin: 0 0 0 0;
        padding: 0 0 0 0;
       }
    
    .contact-us__quick-contact{
        width: 100%;
        margin: 0 0 0 0;
        padding: 0 0 0 0;
       }
    
    .contact-us__form-container{
        width: 100%;
        margin: 0 0 0 0;
       }
    
    .form-horizontal{
        width: 100%;
        margin: 0 0 0 0;
       }
    

    .form-horizontal h4{
        font-size: 16px;
    }

   .capcha-container .capcha-item-input {
        font-size: 0.96rem;   
    }

    .futer-grid{
        height: 940px;
    }

    .futer-grid__logo .logo__hoja{  
        margin: auto;
    }

    .futer-grid__logo .logo__hoja img{  
        margin-left: 4%;
    }

    .futer-grid__logo .logo__hoja .logo__marca{
        margin-left: 26%;
    }
    

}

@media only screen and (max-width: 350px){
   .title h1{
    font-size: 18px;
   }

   .castillo{
    width: 70px;
    height: 80px;
    padding-left: 20px;
   }

   .name-company{
     margin-left: 27%;
   }


   nav ul li{
    
    margin-top: 12%;
    line-height: 40px;

  }

  .about-us{
    height: 800px;
  }
   
  .services__icono-1 h5, .services__icono-2 h5, .services__icono-3 h5, .services__icono-4 h5, .services__icono-5 h5{
    font-size: 10px;
    
}

   .contact-us{
    width: 100%;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
   }

   .contact-us__quick-contact{
    width: 100%;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
   }

   .contact-us__form-container{
    width: 100%;
    margin: 0 0 0 0;
   }

   .form-horizontal{
    width: 100%;
    margin: 0 0 0 0;
   }

   .futer-grid{
    height: 980px;
   }

   .futer-grid__logo{
    height: 180px;
    
   }

   .futer-grid__logo .logo__hoja{  
        margin: auto;
        width: 90%;
   }

   .futer-grid__logo .logo__hoja img{  
        margin-left: 0;
  }

   .futer-grid__logo .logo__hoja .logo__marca{
    margin-left: 24%;
  }

   .futer-powered .izquierda, .futer-powered .derecha{
      height: 70%;
   }

   .futer-powered .izquierda{
    padding-top: 10px;
   }

}