@charset "utf-8";

/* ----------------------------------
Name: global.css
Version: 1.0.0
Autor: Fragmenta Soluciones Digitales
Website: https://www.fragmenta.mx
----------------------------------- */

/* ===================================
    Reset
====================================== */
*,
*::before,
*::after {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}
html { font-size: 14px !important;}
body {
     font-family: 'Open Sans', sans-serif !important;
     -webkit-font-smoothing: antialiased;
     font-smooth: antialiased;
     /* font-size: 16px; */
     font-weight: 400;
     line-height: auto;
     color:#444444;
     background-color: #fff;
}
body, html {-moz-osx-font-smoothing: grayscale;}


/*body, html { height: 100%; -moz-osx-font-smoothing: grayscale;}*/

/*a{color:#04B3EB; text-decoration: none;font-size:14px;}
a:hover{
  color: #1158A0;
}




/*a, a:active, a:focus { color: #ED1C24; text-decoration: none;}
a:hover, a:active{color: blue; text-decoration: none; cursor: pointer;}
a:focus, a:active, button:focus, button:active, .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {outline: none; box-shadow: none; } */

footer a, footer a:active, footer a:focus { color: #000; text-decoration: none; font-size: 11px;}
footer a:hover, footer a:active{color: #1158A0; text-decoration: none; cursor: pointer;}
footer a:focus, footer a:active, footer button:focus, footer button:active, footer .btn.active.focus, footer .btn.active:focus, footer .btn.focus, footer .btn:active.focus, footer .btn:active:focus,footer  .btn:focus {outline: none; box-shadow: none; }

/*img {max-width:100%; height:auto; }*/


/* ===================================
    Typography
====================================== */
/* heading */
h1, h2, h3, h4, h5, h6 {font-family: 'Bebas Neue', sans-serif; letter-spacing: 0;color: #000000;}
/* h1, .h1 {font-size:3rem; line-height:3.5rem; font-weight: 600;} */

h1, .h1 {font-size:4.14rem; line-height:4.5rem; font-weight: 400;}
h2, .h2 {font-size:3rem; line-height:3rem; font-weight: 400;}
h3, .h3 {font-size:2.8rem; line-height:2.5rem; font-weight: 400;}
h4, .h4 {font-size:2rem; line-height:2.2rem; font-weight: 400;}
h5, .h5 {font-size:2rem; line-height:1.5rem; font-weight: 400;}
h6, .h6 {font-size:1.85rem; line-height:2rem; font-weight: 400;}




/* xxs */ @media (max-width: 430px) {}
/* xs  */ @media (min-width: 431px) {} /* @media (max-width: 575px) {} */
/* sm  */ @media (min-width: 576px) {
h2, .h2 {font-size:3.8rem; line-height:3.5rem; font-weight: 400;}
h3, .h3 {font-size:3.14rem; line-height:2.5rem; font-weight: 400;}
h4, .h4 {font-size:3.42rem; line-height:3.5rem; font-weight: 400;}
h5, .h5 {font-size:2.8rem; line-height:2.5rem; font-weight: 400;}
h1, .h1 {font-size:5.14rem; line-height:5.5rem; font-weight: 400;}
}
/* md  */ @media (min-width: 768px) {
h2, .h2 {font-size:4.8rem; line-height:4.5rem; font-weight: 400;}
h3, .h3 {font-size:4.14rem; line-height:3.5rem; font-weight: 400;}
h4, .h4 {font-size:4.22rem; line-height:4.5rem; font-weight: 400;}
h5, .h5 {font-size:3.5rem; line-height:3.5rem; font-weight: 400;}
h1, .h1 {font-size:6.14rem; line-height:6.5rem; font-weight: 400;}
} /* ipad Portrait */
/* lg  */ @media (min-width: 992px) {
h2, .h2 {font-size:5.8rem; line-height:5.5rem; font-weight: 400;}
h3, .h3 {font-size:5.14rem; line-height:4.5rem; font-weight: 400;}
h4, .h4 {font-size:4.3rem; line-height:5rem; font-weight: 400;}
h5, .h5 {font-size:4.14rem; line-height:4rem; font-weight: 400;}
h1, .h1 {font-size:7.14rem; line-height:7.5rem; font-weight: 400;}
} /* ipad Landscape */
/* xl  */ @media (min-width: 1200px) {
h4, .h4 {font-size:4.42rem; line-height:5rem; font-weight: 400;}
}
/* xxl */ @media (min-width: 1400px) {}



p {font-size: 1rem;font-weight: 400;  font-family: 'Open Sans', sans-serif !important;line-height: normal;}

.font-main {font-family: 'Bebas Neue', sans-serif;}
.font-alt {font-family: 'Caveat', sans-serif;}


/* text color */

.text-alt {color: #ED1C24;}


/* ===================================
    Background color
====================================== */

.bg-main{background: radial-gradient(81.69% 308.53% at 84.47% 56.74%, #DDE0E5 0%, #B0B9C8 100%);}
.bg-cintas{background: radial-gradient(81.69% 308.53% at 84.47% 56.74%, #E5E1DD 0%, #C8C3B0 100%);}
.bg-alt{background: #F8F8F8;}



/* ===================================
    Covers
====================================== */

.parallax-text {
  position: fixed;}


/* ===================================
    Button
====================================== */

.btn-main{
  color: #fff;
  background: linear-gradient(90.06deg, #D02C2F 2.1%, #960003 99.19%);
  padding: 9px 5px;
  min-width: 200px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-left: 25px;
  padding-right: 25px;
  border-radius: 32px;
  border: none;
}


.btn-main:hover {
  background: #ED1C24;
}

.btn-play-video{
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ED1C24;
  border-radius: 50%;
  border: none;
  color: #fff;
  transition: all 0.5s;
}

.btn-play-video i{
  font-size: 30px;
}

.btn-play-video:hover{
  background: linear-gradient(90.06deg, #D02C2F 2.1%, #960003 99.19%);
  color: #fff;
}

.btn-play-video:hover i{
  font-size: 35px;
}

/* ===================================
    Galerias
====================================== */

.content-pag{
  margin-top: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}


.swiper-pagination-bullet{
   background:#D9D9D9;
   opacity:1;
   margin-right: 5px;
}

.swiper-pagination-bullet-active{
 background: #DB2530;
}


/* ===================================
       Call to action
====================================== */



/* ===================================
    Lines
====================================== */


/* ===================================
    Z-index
====================================== */

.frente{
  z-index: 20;
}

.frente-w{
  background-color: #fff;
  position: relative;
  z-index: 10;
}

.frente-alt{
  background-color: #F8F8F8;
  position: relative;
  z-index: 10;
}

/* ===================================
    Contenedores
====================================== */

.sect-100{
  height: 100vh;
}


.content-info{
  width: 100%;
}

.content-info-md{
  width: 100%;
}

.content-info-sm{
  width: 100%;
}

.content-info-xs{
  width: 100%;
}

/* ===================================
    Notificaciones
====================================== */

.noti-info{
  background: #3C3C3C;
  color:#fff;
  padding: 15px;
}

/* ===================================
    Img
====================================== */


/* ===================================
  Efecto videos
====================================== */

.grid-video{
  display: grid;
  grid-template-columns: 1fr;
}

.bg-viral{
  background:url("../../assets/img/Inicio/img-lomas-viral.jpg");
  background-position-x: center;
    background-position-y: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -webkit-filter: blur(5px);
}

.bg-resitente{
  background:url("../../assets/img/Inicio/img-cintas-resistentes.jpg");
  background-position-x: center;
    background-position-y: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -webkit-filter: blur(5px);
}

.cont-info-vis{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #FFFFFF4D;
  padding: 15px;
}

.container-img {
  width: 100%;
  margin-bottom: 20px;
  position: relative;
  justify-content: center;
  overflow: hidden;
  object-fit: cover;
  object-position: 50% 50%;
  aspect-ratio: 1 / 1;
  text-align: center;
}
 .container-img .container-txt {
   width: 100%;
  display: none;
  text-align: center;
  color:#5C5C5C!important;
  margin-top: 10px;
  margin-bottom: 10px;
}



.container-txt img{
  height:100% !important;
  width: 100% !important;
  object-fit: cover;
  object-position: 50% 50%;
  aspect-ratio: 1 / 1;
}



 .container-img .container-txt.bounce {
  transform: translate(0%, 0%) scale(0);
  transition: all 300ms 0ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
}


 .container-img .item-img {
  position: absolute;
  z-index: 10;
  width: 100%;
  height: 100%;
  transition: all 0.2s ease-in-out;
}
 .container-img:hover .container-txt {
  opacity: 1;
  z-index: 80;
  transition: all 300ms 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: inline;
}



 .container-img:hover .container-txt.bounce {
  transform: translate(0%, 0%) scale(1);
}


 .container-img:hover .item-img.blur {
   filter: blur(3px);
   -moz-filter: blur(3px);
   -o-filter: blur(3px);
   -webkit-filter: blur(3px);
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -o-transform: scale(1.2);
  -moz-transform: scale(1.2);
}



/* ===================================
    Responsive
====================================== */

/* xxs */ @media (max-width: 430px) {}
/* xs  */ @media (min-width: 431px) {} /* @media (max-width: 575px) {} */
/* sm  */ @media (min-width: 576px) {


.content-info-xs{
  width: 80%;
}

.container-img .container-txt {
  width: 70%;
 display: none;
 text-align: center;
 color:#5C5C5C!important;
 margin-top: 10px;
}
.grid-video{
  display: grid;
  grid-template-columns: 50% auto;
}
}
/* md  */ @media (min-width: 768px) {

.content-info{
  width: 80%;
}



.content-info-sm{
  width: 80%;
}

.content-info-xs{
  width: 50%;
}

.container-img .container-txt {
  width: 50%;
 display: none;
 text-align: center;
 color:#5C5C5C!important;
 margin-top: 10px;
}


} /* ipad Portrait */
/* lg  */ @media (min-width: 992px) {

.content-info-xs{
  width: 30%;
}



.content-info-sm{
  width: 70%;
}

} /* ipad Landscape */
/* xl  */ @media (min-width: 1200px) {
.content-info-md{
  width: 75%;
}

.content-info-sm{
  width: 50%;
}
}
/* xxl */ @media (min-width: 1400px) {}