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



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



body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

/* Nav */

.navbar-wrapper {
  position: relative;
}

.nav {
  justify-content: flex-end;
  position: absolute;
  right: 0;
  margin: 40px;
  border: transparent;
  margin: 4.68vw 3.64vw 0vw 0vw;
  z-index: 9;
  font-family: 'Kanit', sans-serif;
  
  font-size: 1.1vw;
}

.nav-tabs .dropdown-menu {
  background-color: #006992;
}

.nav-tabs .nav-link {
  border: transparent;
  color: white;
  opacity: 81%;
}

.iconOrder {
  display: flex;
  align-items: center;
}

.paddingIcon {
  padding-right: 2vw;
}


/* Landing */

.imageContainer {
  position: relative;
  display: inline-block;
}

.orderTitle {
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.orderTitle .container {
  max-width: 100%;
  text-align: center;
}

.orderTitle .img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}


.img {
  display: block;
  max-width: 100%;
  height: auto;

}

.contentContainer {
  position: absolute;
  top: 55%;
  left: 47%;
  transform: translate(-140%, -90%);
  text-align: center;
  color: white;
  padding: 20px;
  display: flex;
  flex-direction: column;
  width: 30%
}

.contentContainer1 {
  transform: translate(-167.5%, -72%);
  position: absolute;
  color: white;
  text-align: center;
  top: 50%;
  left: 56.5%;
  width: 30%;
  margin: 0 auto;
}

.contentContainerProducts {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-140%, -55%);
  text-align: center;
  color: white;
  padding: 1.04vw;
  display: flex;
  flex-direction: column;
  width: 36%;
  margin-left: 5.05%
}

.contentContainerProductsRight {

  position: absolute;
  top: 50%;
  left: 46%;
  transform: translate(15%, -55%);
  text-align: center;
  color: white;
  padding: 20px;
  display: flex;
  flex-direction: column;
  width: 46%
}

.contentContainerProductsRightFix {

  position: absolute;
  top: 50%;
  left: 46%;
  transform: translate(15%, -40%);
  text-align: center;
  color: white;
  padding: 1.04vw;
  display: flex;
  flex-direction: column;
  width: 46%;
}

/*Texto diseño*/

.quienesSomos {
  font-family: 'Kanit', sans-serif;
  color: #a08c88;
  font-size: 6vw;
  padding-top: 140px;
  display: flex;
  text-align: justify;
  width: 100%;
  font-weight: bold;
}

.textBrown {
  color: #a08c88;
}

.textBlue {
  color: #006992;
}

.fontTam {
  color: #006992;
  font-family: geologica;
  font-size: 4.5vw;
  font-weight: 900;
  display: flex;
  text-align: justify;
  letter-spacing: 2px;
  width: 100%;
  

}

.spaceText0 {
  color: white;
  font-family: 'Kanit', sans-serif;
  font-size: 1.5vw;
  font-weight: 300;
  padding-top: 1.04vw;
  width: 100%;
  display: flex;
  text-align: justify;
}

.spaceText1 {
  color: white;
  font-family: 'Kanit', sans-serif;
  font-size: 1vw;
  font-weight: 300;
  display: flex;
  text-align: justify;
  padding-top: 1.5vw;

  width: 100%;

}

.textLanding {
  color: #006992;
  font-size: 1.4vw;
  font-weight: 300;
  font-family: 'Kanit', sans-serif;
  display: flex;
  text-align: justify;
  padding-top: 1.04vw;
  width: 100%;
}


/* panel de secciones*/

.containerOrder {
  display: flex;
  flex-direction: row;
  width: 91vw;
  height: 27vw;
  padding: 1.04vw;
  font-size: 1.09vw;

}

.subTitle {
  color: #006992;
  display: flex;
  text-align: justify;
  padding-bottom: 1.04VW;
  font-family: 'Kanit', sans-serif;
  font-weight: bold;
  font-size: 1.1vw;
}

.subTitleFix{
  color: #006992;
  display: flex;
  text-align: justify;
  padding-bottom: 1.04VW;
  font-family: 'Kanit', sans-serif;
  font-weight: bold;
  font-size: 1.1vw;
}

.subOrder {
  padding: 0.5vw;
  color: white;
}

.paddingBot {
  padding-bottom: 1vw;
  padding-left: 1.04vw;
  font-size: 1.4vw;
  font-weight: 600;
}

.colorFont {
  padding-left: 1.04vw;
  font-size: 0.9vw;
  display: flex;
  text-align: left;
}

.lineUp {
  border-left: 1px solid;
  border-image: linear-gradient(180deg, #fafafa, #006992) 1;
}

.button {
  padding: 0.52vw 1.25vw 0.52vw 1.25vw;
  border-right: 2px solid;
  border-image: linear-gradient(509deg, #006992, #dee2e6) 1;
  margin-left: 20%;
  background-color: transparent;
  color: white;
  margin-top: 1.4vw;
  font-family: 'Kanit', sans-serif;
}

.button2 {
  padding: 0.52vw 1.25vw 0.52vw 1.25vw;
  border-right: 2px solid;
  border-image: linear-gradient(509deg, #006992, #dee2e6) 1;
  margin-left: 20%;
  background-color: transparent;
  color: white;
  margin-top: 1.4vw;
  font-family: 'Kanit', sans-serif;
}

.button3 {
  padding: 0.52vw 1.25vw 0.52vw 1.25vw;
  border-right: 2px solid;
  border-image: linear-gradient(509deg, #006992, #dee2e6) 1;
  margin-left: 20%;
  background-color: transparent;
  color: white;
  margin-top: 1.4vw;
  font-family: 'Kanit', sans-serif;
}

.button4 {
  padding: 0.52vw 1.25vw 0.52vw 1.25vw;
  border-right: 2px solid;
  border-image: linear-gradient(509deg, #006992, #dee2e6) 1;
  margin-left: 20%;
  background-color: transparent;
  color: white;
  margin-top: 1.4vw;
  font-family: 'Kanit', sans-serif;
}

.button5 {
  padding: 0.52vw 1.25vw 0.52vw 1.25vw;
  border-right: 2px solid;
  border-image: linear-gradient(509deg, #006992, #dee2e6) 1;
  margin-left: 20%;
  background-color: transparent;
  color: white;
  margin-top: 1.4vw;
  font-family: 'Kanit', sans-serif;
}

.button6 {
  padding: 0.52vw 1.25vw 0.52vw 1.25vw;
  border-right: 2px solid;
  border-image: linear-gradient(509deg, #006992, #dee2e6) 1;
  margin-left: 20%;
  background-color: transparent;
  color: white;
  margin-top: 2.8vw;
  font-family: 'Kanit', sans-serif;
}

/*Lineas*/

.lineWhite {
  background: linear-gradient(to right, #006992, #fafafa) 0.1vw;
  height: 0.1vw;
  width: 100%
}

.line {
  background: linear-gradient(to right, #006992, black) 0.1vw;
  height: 0.1vw;
  width: 100%;
}






/*botones*/

.buttonHome2 {
  border-right: 2px solid;
  border-image: linear-gradient(509deg, #006992, #fafafa) 1;
  margin-left: 15%;
  background-color: transparent;
  color: #006992;
  padding: 0.52vw 1.7vw 0.52vw 1.7vw;
  margin-top: 3vw;
  font-family: 'Kanit', sans-serif;
}

.buttonHome {
  border-right: 2px solid;
  border-image: linear-gradient(509deg, #006992, #0d160b) 1;
  margin-left: 15%;
  background-color: transparent;
  color: #006992;
  padding: 0.52vw 1.7vw 0.52vw 1.7vw;
  margin-top: 3.64vw;
  font-family: 'Kanit', sans-serif;
}

/*Footer*/

.footerCh {
  background-color: #0d160b;
  color: #006992;
  display: flex;
  justify-content: space-between;
  height: 15vw;
  font-family: 'Kanit', sans-serif;
}

.footerOrder {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-left: 2vw;
}

.footerOrder2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 1vw;
  color: #a08c88;
}

.footerOrder3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.footerOrder4 {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 1.04vw;
}

.spaceFoot0 {
  padding-right: 1.04vw;
  font-size: 1vw;

}

.spaceFoot {
  padding-left: 1.04vw;
  border-left: 1px solid #006992;
  font-size: 1vw;
  padding-right: 1.04vw;
}

.tamanoImg {
  width: 20vw;
  height: 10vw;
}

.intoFooter {
  display: flex
}

.logoImg {
  margin-left: 50px;
}

.telColor {
  color: #a08c88;
}

.lineBrown {
  background: linear-gradient(to right, #a08c88, black) 1px;
  height: 2px;
  width: 40vw;

}

/* Sections CSS */

.contentContainerProductsSection {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-135%, -8%);
  text-align: center;
  color: white;
  padding: 1.04vw;
  display: flex;
  flex-direction: column;
  width: 32.5vw;
}

.contentContainerProductsSectionFix {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-136%, -45%);
  text-align: center;
  color: white;
  padding: 1.04vw;
  display: flex;
  flex-direction: column;
  width: 32.5%;
}

.contentContainerProductsSectionFix2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-135%, -20%);
  text-align: center;
  color: white;
  padding: 1.04vw;
  display: flex;
  flex-direction: column;
  width: 32.5vw
}

.contentContainerProductsSectionFix3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-135%, -55%);
  text-align: center;
  color: white;
  padding: 1.04vw;
  display: flex;
  flex-direction: column;
  width: 32.5vw
}

/*logo HOME*/

.logoImg {
  z-index: 1;
  margin-left: 50px;
  position: absolute;
  top: -0%;
  left: 2%;
}

.logoStats {
  width: 35%;
  transform: translate(-9%, 3%);
}

.positionImg {
  position: relative;
}

.homeLink {
  height: 20px;
}

/*mobile design*/

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

  .logoStats {
    width: 35%;
    transform: translate(175%, 10%);
  }

  .titleMod{
    transform: translate(2%, 72%);
  }
  
  
  .img {
    display: none;
  }


  .tamanoImg {
    width: 40vw;
    height: 22vw;
}

  .footerCh {
    display: flex;
    flex-direction: column;
    height: auto;
  }

  .spaceFootMob {
    border-left: 1px solid #006992;
    padding-left: 2vw;
  }

  .spaceFoot0Mob {
    padding-right: 2vw;
  }


  .spaceFoot0 {
    padding-right: 20px;
    font-size: 13px;
  }
  .imgMobile {
    display: block;
    max-width: 100%;
  }

  .textLandingFix {
    padding-top: 100vw !important;
    font-size: 4vw;
    display: flex;
    text-align: center;
    width: 80vw;
    color: #006992;
    margin-left: 5vw;
  }

  .fixModulos{
    height: 240vw;
    background-color: #0d160b;
  }

  .quienesSomos {
    transform: translate(5%, 10%);
    font-size: 10vw;
    width: 120vw;
    font-weight: bold;

  }


  .spaceText1{
    font-size: 4.5vw;
    width: 80vw;
    transform: translate(8%, 25%);
  }


  .contentContainer {
    transform: translate(-150%, -100%);
  }

  .contentContainerProducts{
    transform: translate( -125%, -60%);
   

  }
  

  .contentContainerProductsRight{
    transform: translate( -85%, -45%);
  }

  
  .fontTam{
    font-size: 10vw;
    width: 111vw;
  }

  .fontTamMob{
    font-size: 11vw;
    width: 111vw;
    
  }

  .sectionTamMob{
    transform: translate(13%, 30%);
  }

  .spaceText0{
    font-size: 4vw;
    display: flex;
    text-align: left;
    width: 90vw;
}
  
  .buttonHome2Move{
    transform: translate(0%, 120%);
  }

  .buttonHomeMove{
    transform: translate(0%, 90%);
  }

 .textLanding{
  padding-top: 65vw;
  font-size: 4vw;
  display: flex;
  text-align: center;
  width: 80vw;

  }

  .textLandingFixPanel{
    transform: translate(0%, 10%);
  }

.subTitle{
  width: 80vw;
  padding-left: 10vw;
  font-size: 3vw;
  transform: translate(0%, 250%);

}

.techoTejaMob{
  transform: translate(2%, 45%);
}

.tejaProduct{
  transform: translate(7%, 240%);
}

.buttonHome2{
  margin-left: 17vw;
  width: 45vw;
  margin-top: 7vw;
}

.buttonHomeMove3{
  transform: translate(12%, 10%);
}

.textTeja{
  transform: translate(0%, 5%);
}

.subLanaFix{
  transform: translate(0%, 100%);
}

.buttonHome{
  margin-left: 17vw;
  width: 45vw;
  margin-top: 5vw;
}



.contentContainerProductsRightFix{
  transform: translate(-102%, -50%);
  width: 43vw;
}

.fixMobile1{
  transform: translate(-6%, 0%);
}

.fixMobile2{
  margin-left: 19vw;
}

.fixMobile3{
  font-size: 5.5vw;
  transform: translate(1%, 140%);
}

.fixOrderTitle{
  height: 190vw;
}

.fixLanding{
  padding-top: 80vw;
  transform: translate(-2%, 2%);
}

.containerFixChapa{
  transform: translate( -123%, -55%);

}

.subTitleFix{
  margin-left: 2vw;
  font-size: 3vw;
  width: 80vw;
  padding-left: 19vw;
  color: #006992;
  display: flex;
  text-align: justify;
  padding-bottom: 1.04VW;
  font-family: 'Kanit', sans-serif;
  font-weight: bold;
}

.panelT1Font{
  transform: translate(5%, 40%);
}

.spaceFoot{
padding-left: 20px;
border-left: 1px solid #006992;
font-size: 13px;
padding-right: 20px;
}
/*Seccion Panel Muro */

.contentContainerProductsSection{
  transform: translate(-120%, -37%)
}

.contentContainerProductsSectionFix{
  transform: translate(-119%, -50%);
}

.centradoEps{
  transform: translate(24%, 30%);
}

.lanaMob{
  transform: translate(-3%, 40%);
}

.acusticosMob{
  transform: translate(5%, 10%);
}

/*Seccion T1*/

.centradoT1{
  transform: translate(12%, 78%);
}

.lanaT1Font{
  transform: translate(-6%, 10%);
}

.t101Mob{
  transform: translate(0%, 5%);
}

.t101PurMob{
  transform: translate(0%, -40%);
}

.textPanelT1{
  transform: translate(-2%, 16%);
}

.buttonHomeMoveSection{
  transform: translate(0%, 220%);
}
/*techo teja*/

.techoTejaFont{
  transform: translate(-6%, 4%);

}

.tejaMetalicaFont{
  transform: translate(0%, 80%);
}

.sinuosidalTitle{
  transform: translate(3%, 10%);
}

.tejaText{
  padding-top: 100vw;
}

/*lana Mineral*/

.contentContainerProductsSectionFix2{
  transform: translate(-125%, -47%);
}

.placasFont{
  transform: translate(15%, 25%);
}

.mantaFont{
  transform: translate(15%, -50%);
}

.fieltroFont{
  transform: translate(13%, -50%);
}

.orderHeight{
  height: 210vw;
}

.orderHeight2{
  height: 220vw;
  background-color: #0d160b;
}

/*chapa*/

.chapaFont{
  transform: translate(0%, 50%);
}

.textMobChapa{
  transform: translate(-3%, 11%);
}

.sinuosidalMob{
  transform: translate(-3%, 16%);
}

/*modulos*/

.obradorFont{
  transform: translate(7%, 50%);
}

.casaFont{
  transform: translate(20%, 50%);
}

.navMod{
  position: fixed !important;
  z-index: 9;
  
}

.obradorText{
  transform: translate(-3%, 10%);
}

.container-fluid{
  
  margin-top: 5vw;
}

.navbar-dark{
  color: black;  
}

.navSpace{
  display: none;
}

.backgroundNav{
  background-color: #006992 !important;
  font-family: 'Kanit', sans-serif;
  font-size: 4vw;
}

.nav-tabs .nav-link{
  padding: 0.5vw 1vw;
}
  
.navbar-dark .navbar-nav .nav-link{
  color: #fafafa;
}

/*bordes menu hamburguesa*/

.borderBottom{
  border-bottom: 1px solid;
    border-image: linear-gradient(70deg, #fafafa, #006992) 1;
}

}
/* cosas mobile que no quiero que se vean en desktop*/

@media screen and (min-width: 721px) {

  .imgMobile {
    display: none;
    max-width: 100%;
    height: auto;
  }

  .intoFooterMob {
    display: none;
  }

  .footerOrder2Mob {
    display: none;
  }


  .footerOrder4Mob {
    display: none;
  }

.navCustom{
  display: none;
}

.navbar{
  display: none;
}



}


/* cosas desktop que no quiero que aparezcan mobile*/

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

  .footerCh {
    display: flex;
    flex-direction: column;
    height: auto;
    align-content: center;
    flex-wrap: wrap;
  }

  .spaceFoot {
    display: none;

  }

  .spaceFoot0 {
    display: none;
  }

  .footerOrder {
    margin-right: 10vw;
    align-items: center;
  }

  .intoFooterMob {
    display: flex;
    justify-content: start;
  }

 


  .footerOrder2 {
    display: none;
  }

  .footerOrder4 {
    display: none;
  }

  .footerOrder3 {
    display: flex;
    flex-direction: column;
  }

  .footerOrder4Mob {
    display: flex;
    flex-direction: row-reverse;
    transform: translate(0%, -150%);
    
  }

  .footerOrder2Mob {
    margin-bottom: 2vw;
  }

  .lineWhite{
    display: none;
  }

  .line{
    display: none;
  }

  .navbar-wrapper{
    display: none;
  }

}

/* boton flotante*/

#btn-mas{
  display: none;
}

.containerBox{
  position: fixed;
  bottom: 1.46vw;
  right: 2.46vw;
  
}

.redes a, .fa-regular {
  display: block;
  text-decoration: none;
  background-color:#0d160b;
  color: #006992;
  width: 55px;
  height: 55px;
  line-height: 55px;
  text-align: center;
  border-radius: 50%;
  transition: all 500ms ease;
  margin-bottom: 20px;
}

.fa-add:before, .fa-message:before {
  content: "\2b";
  line-height: 2.5;
  border: none;
  outline: none;
  
  
}



#btn-mas:checked~ .redes a{
  margin-bottom: 1vw;
  opacity: 1;
  visibility: visible;
}

.backgroundMail{
  background-color: #5098f7 !important; 
}

.backgroundWp{
  background-color: #25D366 !important;
}

.backgroundMessage{
  background-color: #00BFFF;
}