@import url('https://fonts.googleapis.com/css2?family=Old+Standard+TT:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');


header{
    position: relative;
    height: 100px;
}
main{
    height: fit-content !important;
    width: 100%;

    font-family: 'Old Standard TT';
    color: white;

    margin-bottom: 150px !important;
}
#h1proyectos{
    position: relative;
    top: 50px;
    font-size: 120px;

    height: 150px;
    width: 100%;
    left: -235px;

    overflow: hidden;
    text-align: center;
    font-weight: 400;
}



#locales{
    cursor: pointer;
    position: absolute;
    left: calc(50% - 600px/2);

    font-size: 27px;
    color: orange;

    height: 32px;
    width: 337px;

    overflow: hidden;
    white-space: nowrap;
}
#residencial{
    cursor: pointer;
    position: absolute;
    left: calc(50% - -330px/2);

    font-size: 27px;
    color: white;

    height: 32px;
    width: 134px;

    overflow: hidden;
    white-space: nowrap;
}
#locales:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0px;
    height: 1px;
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: right center;
    -moz-transform-origin: right center;
    -ms-transform-origin: right center;
    -o-transform-origin: right center;
    transform-origin: right center;
    background: currentColor;
    -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    transition: -webkit-transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    -o-transition: -o-transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    -moz-transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), -moz-transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), -webkit-transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), -moz-transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), -o-transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
#locales:focus,
#locales:hover {
    color: orange;
    text-decoration: none;
}
#locales:hover:before {
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}
#residencial:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0px;
    height: 1px;
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: right center;
    -moz-transform-origin: right center;
    -ms-transform-origin: right center;
    -o-transform-origin: right center;
    transform-origin: right center;
    background: currentColor;
    -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    transition: -webkit-transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    -o-transition: -o-transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    -moz-transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), -moz-transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), -webkit-transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), -moz-transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), -o-transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
#residencial:focus,
#residencial:hover {
    color: white;
    text-decoration: none;
}
#residencial:hover:before {
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}



#wrapperinstalaciones{
    margin-left: 80px;
}
#lineauno{
    margin-top: 250px;
}
.lineas{
  position: static;
  margin-left: calc(50% - 1080px/2);
  margin-top: 50px;

  width: 0px;
  height: 0px;

  border: 0px solid #EED5B6;
}
.h2s{
    opacity: 0;
    font-family: 'Montserrat';
    font-weight: 400;
  
    font-size: 36px;
  
    position: static;
    margin-left: calc(50% - 1080px/2);
    margin-top: 60px;
  
    width: 1080px;
}
.imgsmarcas{
    width: 130px;
    height: auto;
}
#carrier{
    position: absolute;
    width: 200px;
    margin-left: -40px;
    margin-top: 3px;
}
#polytherm{
    position: absolute;
    width: 140px;
    margin-left: -25px;
    margin-top: 7px;
}
#climaver{
    position: absolute;
    border-radius: 10px;
    width: 100px;
    margin-left: 20px;
    margin-top: 5px;
}
#schako{
    position: absolute;
    margin-top: 0px;
    width: 140px;
    margin-left: -20px;
}
#trox{
    position: absolute;
    margin-top: 3px;
    width: 140px;
    margin-left: 260px;
}
#koolair{
    position: absolute;
    border-radius: 10px;
    margin-top: -5px;
    width: 110px;
    margin-left: 140px;
}
.imgs{
    opacity: 0;

    position: static;
    margin-left: calc(50% - 1080px/2);
    margin-top: 25px;
  
    width: 600px;
    height: auto;

    border-radius: 10px;
}
#imgvidrio{
    height: 500px;
    object-fit: cover;
}
#imgcasette{
    height: 500px;
    object-fit: cover;
}











@media (max-width: 1300px) and (min-width: 600px){
    main{
        height: fit-content;
        width: 100%;
    
        font-family: 'Old Standard TT';
        color: white;
    
        margin-top: -70px;
        height: 1030vw;
    }
    #h1proyectos{
        position: relative;
        top: 50.0006px;
        font-size: 100.0004px;
    
        height: 150.0005px;
        width: 390px;
        left: calc(50% - 390px/2);
    
        text-align: unset;
        overflow: hidden;
        font-weight: 400;
    }
}
@media (max-width: 600px){
    main{
        height: fit-content;
        width: 100%;
    
        font-family: 'Old Standard TT';
        color: white;
    
        margin-top: -120px;
        height: 1230vw;
    }
    #h1proyectos{
        position: relative;
        top: 70.0772px;
        font-size: 18vw;
    
        height: 30.5385vw;
        width: 76vw;
        left: 12vw;
    
        overflow: hidden;
        text-align: unset;
        font-weight: 400;
    }
}



/*Ajuste logo*/
@media (max-width: 950px){     
    #locales{
        cursor: pointer;
        position: absolute;
        left: calc(50% - 370px/2);
    
        font-size: 27px;
        color: white;
    
        height: 32px;
        width: 337px;
    
        overflow: hidden;
        white-space: nowrap;
    }
    #residencial{
        cursor: pointer;
        position: absolute;
        margin-top: 40px;
        left: calc(50% - 370px/2);
    
        font-size: 27px;
        color: orange;
    
        height: 32px;
        width: 134px;
    
        overflow: hidden;
        white-space: nowrap;
    }  
    #divpabellondeespana{
        margin-top: 130px;
    }
}
@media (max-width: 600px){
    #locales{
        cursor: pointer;
        position: absolute;
        left: calc(50% - 73.33vw/2);
        margin-top: -3.333vw;
    
        font-size: 5.33vw;
        color: white;
    
        height: 5.33vw;
        width: 66vw;
    
        overflow: hidden;
        white-space: nowrap;
    }
    #residencial{
        cursor: pointer;
        position: absolute;
        margin-top: 3.533vw;
        left: calc(50% - 73.33vw/2);
    
        font-size: 5.33vw;
        color: orange;
    
        height: 5.33vw;
        width: 26.66vw;
    
        overflow: hidden;
        white-space: nowrap;
    } 
    #divpabellondeespana{
        margin-top: 28.666vw;
    }
}
@media (max-width: 500px){
    #locales{
        cursor: pointer;
        position: absolute;
        left: calc(50% - 73.33vw/2);
        margin-top: -1.333vw;
    
        font-size: 5.93vw;
        color: white;
    
        height: 6.23vw;
        width: 74vw;
    
        overflow: hidden;
        white-space: nowrap;
    }
    #residencial{
        cursor: pointer;
        position: absolute;
        margin-top: 7.533vw;
        left: calc(50% - 73.33vw/2);
    
        font-size: 5.93vw;
        color: orange;
    
        height: 6.23vw;
        width: 28.66vw;
    
        overflow: hidden;
        white-space: nowrap;
    } 
}


/*Medias*/
@media (max-width: 1160px){
    #wrapperinstalaciones{
        margin-left: 80px;
    }
    #lineauno{
        margin-top: 250px;
    }
    .lineas{
      position: static;
      margin-left: calc(50% - 830px/2);
      margin-top: 50px;
    
      width: 0px;
      height: 0px;
    
      border: 0px solid #EED5B6;
    }
    .h2s{
        opacity: 0;
        font-family: 'Montserrat';
        font-weight: 400;
      
        font-size: 30px;
      
        position: static;
        margin-left: calc(50% - 830px/2);
        margin-top: 60px;
      
        width: 830px;
    }
    .imgsmarcas{
        width: 130px;
        height: auto;
    }
    #carrier{
        width: 200px;
        margin-left: -50px;
    }
    #polytherm{
        width: 140px;
        margin-left: -30px;
    }
    #climaver{
        border-radius: 10px;
        width: 100px;
    }
    .imgs{
        opacity: 0;
    
        position: static;
        margin-left: calc(50% - 830px/2);
        margin-top: 25px;
      
        width: 600px;
        height: auto;
    
        border-radius: 10px;
    }
    #imgcompactos{
        height: 500px;
        object-fit: cover;
    }
    #imgvrv{
        height: 500px;
        object-fit: cover;
    }
    #imgvidrio{
        height: 500px;
        object-fit: cover;
    }
    #imgcasette{
        height: 500px;
        object-fit: cover;
    }
}
@media (max-width: 910px){
    main{
        height: fit-content !important;
        width: 100%;
    
        font-family: 'Old Standard TT';
        color: white;
    
        margin-bottom: -100px !important;
    }

    #wrapperinstalaciones{
        margin-left: 5%;
    }
    #lineauno{
        margin-top: calc(120px + 15vw);
    }
    .lineas{
      position: static;
      margin-left: unset;
      margin-top: 50px;
    
      width: 0px;
      height: 0px;
    
      border: 0px solid #EED5B6;
    }
    .h2s{
        opacity: 0;
        font-family: 'Montserrat';
        font-weight: 400;
      
        font-size: 30px;
      
        position: static;
        margin-left: unset;
        margin-top: 60px;
      
        line-height: 50px;
        width: 95%;
    }
    .imgsmarcas{
        width: 130px;
        height: auto;
    }
    #carrier{
        width: 200px;
        margin-left: -50px;
    }
    #polytherm{
        width: 140px;
        margin-left: -30px;
    }
    #climaver{
        border-radius: 10px;
        width: 100px;
    }
    .imgs{
        opacity: 0;
    
        position: static;
        margin-left: unset;
        margin-top: 25px;
      
        max-width: 600px;
        width: 95%;
        height: auto;
    
        border-radius: 10px;
    }
    #imgcompactos{
        height: 500px;
        object-fit: cover;
    }
    #imgvrv{
        height: 500px;
        object-fit: cover;
    }
    #imgvidrio{
        height: 500px;
        object-fit: cover;
    }
    #imgcasette{
        height: 500px;
        object-fit: cover;
    }
}
@media (max-width: 590px){
    #trox{
        display: none;
    }
    #polytherm{
        position: static;
        width: 140px;
        margin-left: -45px;
        margin-top: 7px;
    }
    #climaver{
        position: static;
        border-radius: 10px;
        width: 80px;
        margin-left: 0px;
        margin-top: 0px;
    }
    #carrier{
        position: static;
        width: 200px;
        margin-left: -50px;
        margin-top: 5px;
    }
}
@media (max-width: 430px){
    #trox{
        display: none;
    }
    #koolair {
        display: none;
    }
}