/*** CUSTOM STYLES ***/

html, body {
  overflow-x:hidden;
}

@font-face {
  font-family: 'SairaSemiCondensed-SemiBold';
  src: url('../fonts/SairaSemiCondensed-SemiBold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SairaSemiCondensed-Regular';
  src: url('../fonts/SairaSemiCondensed-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SairaSemiCondensed-Medium';
  src: url('../fonts/SairaSemiCondensed-Medium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SairaSemiCondensed-Bold';
  src: url('../fonts/SairaSemiCondensed-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SairaSemiCondensed-Light';
  src: url('../fonts/SairaSemiCondensed-Light.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SairaSemiCondensed-Thin';
  src: url('../fonts/SairaSemiCondensed-Thin.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SairaSemiCondensed-ExtraLight';
  src: url('../fonts/SairaSemiCondensed-ExtraLight.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}



html,body‚* {margin:0px;padding:0px;clear:both;}

a {text-decoration:none;transition:.6s;}
a:hover, a:focus {outline:none;opacity:.5;transition:.6s;}

header .menu {
  background: rgb(255 255 255 / 85%);
  padding: 15px 30px;
  text-align: center;
  border-radius: 30px;
  width: auto;
  display:inline-flex;
  align-items:center;
}

.content-menu-fixed {
  position:fixed;
  left:0;
  right:0;
  top:50px;
  text-align:center;
  z-index:99;
}

header .menu a {
  display: inline-block;
  font-family: 'SairaSemiCondensed-SemiBold';
  color: #041443;
  text-decoration: none;
  margin: 0 20px;
  font-size: 13px;
  max-width: 140px;
  line-height: 1.1;
}



.hero {
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background-size:cover;
  background-position:center;
}


.hero h3 {
  color: #fff;
  font-family: 'SairaSemiCondensed-Medium';
  font-size: 6em;
  line-height: 1;
}

.hero a {
  background: transparent;
  border-radius: 50px;
  padding: 8px 70px;
  color: #fff;
  margin: 40px 0px 0px;
  font-family: 'Roboto', sans-serif;
  font-size: 19px;
  font-weight: 400;
  
  border: 2px #fff solid;
  transition:.6s;
}

.hero a:hover {
  background: #001348;
  border-color: #001348;
  opacity: 1;
  color: #ffff;
  transition:.6s;
}

header {
  position: absolute;
  width: 100%;
  top: 50px;
  left: 0;
  right: 0;
  z-index:2;
}

header img {max-width:150px !important}


.contacto {
  padding:100px 0px;
}

.contacto h3 {
  font-family: 'SairaSemiCondensed-Medium';
  color: #000839;
  font-size: 40px;
  margin: 0;
}
.contacto p {
  margin: 10px 0 0;
  color: #000839;
  font-size: 20px;
  font-family: "Roboto", sans-serif;
  line-height: normal;
}

.contacto .legales p {
  text-align: center;
  margin-top: 2%;
  font-size: 17px;
}

.contacto iframe {}


.background02 {
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background-size:cover;
  background-position:top;
}

.background02 h3 {
  font-family: 'SairaSemiCondensed-Light';
  color:#fff;
  margin:0px;
  font-size: 4.5em;
}
.background02 p {
  font-family: "Roboto", sans-serif;
  color:#fff;
  margin: 25px 0px 80px;
  font-size: 21px;
  font-weight: normal;
}

.info-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  flex:0 0 20%;
}

.info-icon .icon {
  margin-top:auto;
}

.info-icon img {
  max-width: 85px;
  margin-bottom: 20px;
}

.info-icon span {
  color: #fff;
  font-family: 'SairaSemiCondensed-Medium';
  border: 1px #fff solid;
  min-width: 200px;
  margin-bottom: 0;
  margin-top: 0;
  padding: 8px 15px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.3;
}


.background03 {
  position:relative;
  min-height:90vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background-size:cover;
  background-position:top;
}

.background03 h3 {
  font-family: 'SairaSemiCondensed-Medium';
  color:#fff;
  margin:0px;
  line-height:1;
  font-size: 6em;
}
.background03 p {
  font-family: "Roboto", sans-serif;
  color:#fff;
  margin: 25px 0px 0px;
  font-size: 19px;
  font-weight: normal;
}

.slide-products {
  padding:100px 0px;
  background-color:#eff0f7;
}


.item-slide {
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-height: 430px;
}

.item-slide .sect-left {
    flex: 0 0 50%;
  
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('../images/fondo-detalles.jpg');
    background-size:cover;
    background-position:left;
    border-radius: 20px 0px 0px 20px;

}

.item-slide .sect-left .info {
    margin-right: auto;
    margin-left: 15%;
}

.item-slide .sect-left h5 {
  font-family: 'SairaSemiCondensed-Medium';
  color: #0aaae2;
  font-size: 20px;
  text-transform: uppercase;
}
.item-slide .sect-left h4 {
  color:#fff;
  font-family: 'SairaSemiCondensed-Medium';
  font-size:37px;
  line-height:1.1;
  margin:0 0 50px;
  padding-right: 50px;

}

.item-slide .sect-left a {
  background: #001348;
  margin: 30px 0px 0px;
  font-size: 16px;
  border-radius: 50px;
  padding: 8px 70px;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  
  border: 2px #fff solid;
  transition: .6s;

}

.item-slide .sect-left a:hover {
  background: #fff;
  transition: .6s;
  color: #001348;
  opacity:1;
}


.item-slide .sect-right {
    flex: 0 0 50%;
    background: white;
  
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0px 20px 20px 0px;
}

.item-slide .sect-right img {
  max-width:90%;
}

.owl-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
}

.owl-dot {
  width: 13px;
  height: 13px;
  background: #cccfd6;
  border-radius: 100%;
  margin: 0 5px;
}

.owl-dot.active {
  background: #011547;
}


.header-section {
  min-height:50vh;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
}

.header-section h3 {
  color:#fff;
  font-family: 'SairaSemiCondensed-Medium';
  margin:0;
  font-size:62px;
  line-height:1.1;

}

.content-grilla-productos {
  text-align: center;
  background: #eff0f7;
  padding: 100px 0px;
  position: relative;
}

.content-grilla-productos .container {
  padding:0px;
}

.content-grilla-productos .position-menu {
  position: absolute;
  top: -30px;
  left: 0;
  right: 0;
}

.content-grilla-productos .position-menu .nav-links {
  background: #fff;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 100%;
  padding: 20px 35px;
  border-radius: 30px;
}

.content-grilla-productos .position-menu .nav-links span {
  color: #001447;
  font-family: 'SairaSemiCondensed-Medium';
  margin: 0 20px;
  font-size: 17px;
  transition:.6s;
}

.content-grilla-productos .position-menu .nav-links span.active {
  text-decoration:underline;
}

.content-grilla-productos .position-menu .nav-links span:hover {
  cursor:pointer;
  transition:.6s;
  opacity:.6;
}

.card-product {

  background: #fff;
  padding: 30px;
  border-radius: 0px 35px 0px 35px;
  margin:15px;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;

}

.card-product h4 {
  margin: auto 0px;
  font-size: 27px;
  font-family: 'SairaSemiCondensed-SemiBold';
  color: #001876;
  font-weight: normal;
}

.card-product button {
  background: #fff;
  font-size: 16px;
  border-radius: 50px;
  padding: 8px 70px;
  color: #001348;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  
  border: 2px #001348 solid;
  transition: .6s;
}
.card-product:hover {
  opacity:1;
}
.card-product:hover button, .btn-ver-mas:hover {
  background: #001348;
  color:#fff;
  opacity:1;
  transition: .6s;
}

.btn-ver-mas {
  margin-top: 50px;
  display: inline-block;
  border: 2px #001348 solid;
  background:transparent;
  color: #001348;
  padding: 8px 70px;
  border-radius: 50px;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 400;
}

.superficies {
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background-size:cover;
  background-position:top;
  padding:100px 0px;
}

.superficies h3 {
  font-family: 'SairaSemiCondensed-SemiBold';
  color:#001447;
  margin:0px;
  font-size: 4.5em;
}
.superficies p {
  font-family: "Roboto", sans-serif;
  color:#001447;
  margin: 25px 0px 40px;
  font-size: 21px;
  font-weight: normal;
}

.evoluciona {
  padding:150px 0px 0px;
  background:#001447;
}

.evoluciona h4 {
  font-family: 'SairaSemiCondensed-SemiBold';
  color:#fff;
  margin:0px;
  font-size: 3em;
}
.evoluciona p {
  font-family: "Roboto", sans-serif;
  color:#fff;
  margin: 25px 0px 0px;
  font-size: 18px;
  font-weight: normal;
}

.evoluciona .btn-ver-mas {
  background:#fff;
  color:#001348;
  margin-bottom:30px;
}

.evoluciona .btn-ver-mas:hover {
  background:#001348;
  border-color:#fff;
  color:#fff;
}

.grid{
  margin:0 auto;
  width:auto;
  display:block;
  position:relative;
  min-width: 1320px;
  max-width:100%;
}

/* ejemplo: 4 columnas + gutter 2% */
.grid-sizer,
.grid .card-product{ width: 20%; }  /* 23% * 4 + 2% * 3 ≈ 94% */
.gutter-sizer{ width: 2%; }         /* gutter en % */
.grid .card-product{ margin:15px 0 !important; }


.grid .card-product,
.grid-sizer{
  box-sizing: border-box;   /* <- soluciona gaps por padding */
}

.is-hidden{ display:none !important; }

/* breakpoints */
@media (max-width:1199.98px){
  .grid-sizer, .grid .card-product{ width: 31%; }
  .gutter-sizer{ width: 3%; }
}
@media (max-width:991.98px){
  .grid-sizer, .grid .card-product{ width: 48%; }
  .gutter-sizer{ width: 4%; }
}
@media (max-width:575.98px){
  .grid-sizer, .grid .card-product{ width: 100%; }
  .gutter-sizer{ width: 0; }
}


@media (max-width:767px){

  .responsive-center {
    text-align:center;
  }

  .background02 {
    padding-top:80px;
  }


  .is-sticky .content-menu-fixed {
    top:25px;
  }


  .content-menu-fixed {
      top: 105px;
      max-width: 95%;
      margin: 0 auto;
      transition: .6s;
  }

  header .menu {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    padding: 15px 1px;
    text-align: center;
    justify-content:center;
  }

  header .menu a {
    font-size: 11px;
    flex: 0;
    margin: 0 5px;
    text-align: center;
  }

  .content-grilla-productos {
    padding: 35px 25px;
  }

  .content-grilla-productos .position-menu {
    position:relative;
    top:0px;
  }

  .content-grilla-productos .position-menu .nav-links {
    flex-direction: column;
    margin-bottom: 30px;
    width: 100%;
    padding: 15px 0px 10px;
  }

  .content-grilla-productos .position-menu .nav-links span {
    margin: 0 0px 10px;
    font-size: 17px;
  }

  .header-section h3 {
    font-size: 50px;
    padding: 0px 25px;
  }

  .grid {
    min-width:inherit;
  }
  .hero h3 {
    font-size:4em;
  }

  .background02 h3 {
    font-size:3.5em ;
  }

  .background02 .col-12.h-100 {
    flex-direction:column;
    padding-bottom:80px;

  }

  .info-icon {
    margin-bottom:20px;
  }

  .background03 {
    min-height:50vh;
    padding: 80px 20px;
  }

  .background03 h3 {
    font-size:4em;
  }


  .item-slide {
    flex-direction:column;
    height:100%;
  }

  .item-slide .sect-left, .item-slide .sect-right {
    padding:45px;
  }

  .item-slide .sect-left .info {
    margin-left:0px;
  }

  .item-slide .sect-left h4 {
    font-size:32px;
    padding-right:0px;
  }

  .superficies h3 {
    font-size: 2.5em;
  }

  .superficies p {
    font-size:18px;
  }

  .owl-carousel .owl-stage-outer {
    height:100%;
  }

  .owl-carousel.owl-drag .owl-item {
    height:100%;
  }

  .owl-carousel .owl-stage {
    height:100%;
  }

  .contacto h3 {
    font-size:38px;
  }

}

@media (max-width:320px) {

  header .menu a {
    font-size: 10px;
  }

}