@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: 'Inter', sans-serif !important;
     -webkit-font-smoothing: antialiased;
     font-smooth: antialiased;
     /* font-size: 16px; */
     font-weight: 400;
     line-height: auto;
     color:#636363;
     background-color: #fff;
     transition: background-color 1s ease;
}
body, html {height: 100%; -moz-osx-font-smoothing: grayscale;}

body{
  overflow-x: hidden;
  position: relative;
}

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

a{color:#F28A19; text-decoration: none;font-size:14px;}
a:hover{
  color: #1158A0;
}

#idioma a{
  color:#fff; text-decoration: none;font-size:14px;
}

#idioma a:hover{
  color:#F28A19;
}

.header-appear #idioma a{
  color: #212622;
}

.header-appear #idioma a:hover{
  color:#F28A19;
}

section{
  transition: background-color 1s ease;
}


a, a:active, a:focus { color: #F28A19; text-decoration: none;}
a:hover, a:active{color: #393939; text-decoration:underline; 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: #ffffff; 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; }*/

/** Custom Select **/


.form-select{
  background: transparent!important;
}


  .custom-select-wrapper {
    position: relative;
    display: inline-block;
    user-select: none;
  }


  .custom-select-wrapper select {
    display: none;
    background: blue;
  }

  .custom-select-trigger {
      position: relative;
      padding: 0 20px 0 0px;
      color: #fff;
      background: transparent;
      border-radius: 4px;
      cursor: pointer;

  }

  .custom-select-trigger:after {
      position: absolute;
      display: block;
      content: '';
      width: 10px;
      height: 10px;
      top: 50%;
      right: 0px;
      margin-top: -3px;
      border-bottom: 1px solid #fff;
      border-right: 1px solid #fff;
      transform: rotate(45deg) translateY(-50%);
      transition: all .4s ease-in-out;
      transform-origin: 50% 0;
  }

  .custom-select.opened .custom-select-trigger:after {
    margin-top: 3px;
    transform: rotate(-135deg) translateY(-50%);

  }

  .custom-options {
    position: absolute;
    display: block;
    top: 100%; left: 0; right: 0;
    min-width: 60px;
    margin: 15px 0;
    border: 1px solid #b5b5b5;
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: 0 2px 1px rgba(0,0,0,.07);
    background: #fff;
    transition: all .4s ease-in-out;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-15px);

  }

  .custom-select.opened .custom-options {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateY(0);

  }

  .custom-options:before {
    position: absolute;
    display: block;
    content: '';
    bottom: 100%; right: 25px;
    width: 7px; height: 7px;
    margin-bottom: -4px;
    border-top: 1px solid #b5b5b5;
    border-left: 1px solid #b5b5b5;
    background: #fff;
    transform: rotate(45deg);
    transition: all .4s ease-in-out;

  }

  .option-hover:before {
    background: #f9f9f9;
  }

  .custom-option {
    position: relative;
    display: block;
    padding: 3px 22px;
    border-bottom: 1px solid #b5b5b5;
    cursor: pointer;
    transition: all .4s ease-in-out;
    margin: 0;

  }

  .custom-option:hover,
  .custom-option.selection {
    background: #f9f9f9;
  }

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

h2, .h2 {font-size:2.72rem; line-height:2.62rem; font-weight: 600;}
h3, .h3 {font-size:2rem; line-height:1.8rem; font-weight: 600;}
h4, .h4 {font-size:1.5rem; line-height:2.0rem; font-weight: 600;}
h5, .h5 {font-size:1.29rem; line-height:1.68rem; font-weight: 600;}
h6, .h6 {font-size:1rem; line-height:1.31rem; font-weight: 400;}

h1, .h1 {font-size:2.72rem; line-height:2.3rem; font-weight: 600;}





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

.font-main {font-family: 'Inter', sans-serif;}
.font-alt {font-family: 'Open Sans', sans-serif;}


/* text color */
.text-main {color: #F28A19;}
.text-alt {color: #393939;}


.logo-pilares {
  width: 50%;
}

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

.jd-bg-white{
  background: #fff;
}

.jd-bg-yellow{
  background: #FFD603;
}

.jd-bg-green{
  background: #8BBE23;
}

.jd-bg-blue{
  background: #3A66AF;
}

.jd-bg-orange{
  background: #F28A19;
}

.jd-bg-gray{
  background:#F9F9F9;
}


.bg-ellipse-cover-bottom {
     -webkit-clip-path: ellipse(85% 75% at 50% 75%);
     clip-path: ellipse(115% 100% at 50% 0%);
}


.white{
  background-color: #fff;
}
/* ===================================
    Curva
====================================== */

.content-curva-positive{
  width: 100%;
  height: 335px;
  background:#F9F9F9;
  position: absolute;
  bottom: 0;
  z-index: 0;
}

.curva{
  width: 100%;
  height: 100%;
  background: white
}



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

.btn-main{
  background:linear-gradient(0deg, rgba(243, 139, 25, 0.2), rgba(243, 139, 25, 0.2));
  border-radius: 43px;
  border: none;
  color: #F38B19;
  padding: 9px 5px;
  min-width: 150px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-left: 20px;
  padding-right: 20px;
  border: 1px solid #F38B19;

}

.btn-main:hover {
  background-size: 90% 0%;
}
/* ===================================
    Cover
====================================== */
#galeria-cover{
  width: 100%;
  height: 100vh;
  background:url("../img/cover/creatividad.jpg");
  background-position-x: center;
  background-position-y: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed!important;

}

#galeria-cover .prueba{
  width: 100%;
  height: 100vh;
  position: absolute;
  top:0;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

#galeria-cover .swiper-slide {
      transform: none!important;
      height: 100vh;
      width: 100%;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      background-position-x: center;
      background-position-y: center;
      background-repeat: no-repeat;
      background-size: cover;
      background-attachment: fixed!important;
    }

.creatividad{
  background-image: url("../img/cover/creatividad.jpg");
}

.dinamismo{
  background-image: url("../img/cover/dinamismo.jpg");
}

.experiencia{
  background-image: url("../img/cover/experiencia.jpg");
}

.frescura{
  background-image: url("../img/cover/frescura.jpg");
}

.innovacion{
  background-image: url("../img/cover/innovacion.jpg");
}

.profesionalismo{
  background-image: url("../img/cover/profesionalismo.jpg");
}

.sentid{
  background-image: url("../img/cover/sentid-humano.jpg");
}






#galeria-cover .title{
      font-size: 30px;
      position: absolute;
      top: 50%;
      bottom: auto;
      left: 50%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      color: white;
      width: 100%;
      text-align: center;
    }


#galeria-cover .logo{
  width: 50%;
  position: absolute;
  top: 43%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}


.content-inicio-botones{
  width: 100%;
  position: absolute;
  top: 50%;
  z-index: 10;
}


#galeria-cover .swiper-button-next {

       width: 50px;
       height: 50px;
       padding: 8px 16px;
       color: #F28A19;
       font-size: 25px!important;
     }

  #galeria-cover .swiper-button-prev {
       width: 50px;
       height: 50px;
       padding: 8px 16px;
       border-radius: 100%;
       color: #F28A19;
       font-size: 25px!important;
     }

  #galeria-cover .swiper-button-next:after, .swiper-button-prev:after {
    font-size: 20px;
  }


/* ===================================
    Contacto
====================================== */

.form-control{
  background-color: #F2F2F2;
  color: #F38B19;
  border: none;
}

.contact{
  background: #F9F9F9;
}

.content-form{
  width: 100%;
}

.grid-inputs{
  display: grid;
  grid-template-columns: 1fr;
  gap:0px;
}

.noti-info{
  background: #F38B19;
  color: white;
}
/* ===================================
    Container
====================================== */

.panel {
  /* min height incase content is higher than window height */
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  /* outline: 10px solid hotpink; */
  /* turn above on to see the edge of panels */
  position: relative;
}

.back{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 25px;
  top:25px;
  background: #F38B19;
  display: none;
}

.cintillo{
  width: 100%;
  position: absolute;
  bottom: 0;
  background-color: blue;
  height: 90px;
  background:url("../../assets/img/cintillo-pilares.svg");
  background-repeat: repeat-x;
}

.content-pilar{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: column;

}

.cont-inf-inicio{
  padding: 0px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.content-img-pilar{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content-img-pilar img{
  width: 100%;
}

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


.img-inicio{
  position:relative;
  width: 100%;
  height: auto;
  z-index: 10;
}

/* ===================================
    Grid
====================================== */

.grid-main{
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
}

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

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

.content-nav{
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: space-between;
  z-index: 100;
}


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

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


/*-------------------*/


  .prev-carousel{
    width: 35px;
    height: 35px;
    background: #FFFFFF80;
    border-radius: 100%;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .next-carousel{
    width: 35px;
    height: 35px;
    background: #FFFFFF80;
    border-radius: 100%;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
  }



   .swiper-button-next-mark {
      position: relative;
      margin: 0px 15px;
      display: inline-table !important;
      top:0px;

  }

   .swiper-button-prev-mark {
      position: relative;
      margin: 0px 15px;
      display: inline-table !important;
      top:0px;
  }


  .swiper-button-next-hos {
     position: relative;
     margin: 0px 15px;
     display: inline-table !important;
     top:0px;

 }

  .swiper-button-prev-hos {
     position: relative;
     margin: 0px 15px;
     display: inline-table !important;
     top:0px;
 }

 .swiper-button-next-event {
    position: relative;
    margin: 0px 15px;
    display: inline-table !important;
    top:0px;

}

 .swiper-button-prev-event {
    position: relative;
    margin: 0px 15px;
    display: inline-table !important;
    top:0px;
}


.swiper-button-next-entre {
   position: relative;
   margin: 0px 15px;
   display: inline-table !important;
   top:0px;

}

.swiper-button-prev-entre {
   position: relative;
   margin: 0px 15px;
   display: inline-table !important;
   top:0px;
}



/*-------------------*/

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

.swiper {
     width: 100%;
     height: 100%;
   }

#galeria-inicio{
  position: relative;
  width: 100%;
}

#galeria-inicio .swiper-wrapper{
  width:0px;
}

#galeria-inicio .swiper-slide {
     text-align: center;
     font-size: 18px;
     background: transparent;
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
     height: 300px;
   }

#galeria-inicio .swiper-slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }



 #galeria-pilar{
   width: 85%;
 }

 #galeria-pilar .swiper-slide {
       text-align: center;
       font-size: 18px;
       background: transparent;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
       width: 150px;
       height: 100%;
       padding: 20px;
     }



.content-icon{
  height: 87px;
}

.info-ico-pilar{
    font-family: 'Inter', sans-serif;
  margin-top: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.info-ico-pilar p{
  font-weight: 600;
  color: #3e403c;
}
/* #galeria-pilar .swiper-slide img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
  }*/


  #galeria-clientes .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: transparent;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 150px;
        height: auto;
        padding: 20px;
      }

#galeria-agencia .swiper-slide {
  width: 100%;
  height: auto;
    }




 .content-icon{
  width: 100%;
  height: 100px;
  position: relative;
  background: transparent!important;
}

 .icon-sector{
  width: 120px;
  height: 120px;
  object-fit: cover;
  position: absolute;
  top:100%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}


.content-inf-sector{
  width: 100%;
  min-height: 200px;
  background: #F9F9F9;
  padding-top: 70px;
  padding-bottom: 35px;
  padding-left: 15px;
  padding-right: 15px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;}

.content-inf-sector h6{
  color: #393939;
  font-weight: 500;
  text-align: left;
}

.content-inf-sector p{
  text-align: left;
  margin-bottom: 0!important;

}


#galeria-presencia .swiper-slide{
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

#galeria-presencia .swiper-slide h5{
  margin-bottom: 0px;
  color: #393939;
}


/* ===================================
    Read More
====================================== */

.read-more p:last-child {
  margin-bottom: 0;
}
.read-more__link-wrap {
  display: block;
  margin-top: 15px;
  color: #F38B19;
}

.read-more__link-wrap i{
  color: #F38B19;
}

.read-more__link-wrap p{
  color: #F38B19;
}


.read-more__link {
  font-weight: 700;
}

.read-more.is-inline,
.read-more.is-inline p,
.read-more.is-inline + span {
  display: inline;
}

.read-more.is-inline + span {
  margin-left: 0.25em;
}

.read-more.is-inline.is-expanded + span {
  display: inline-block;
  margin-left: 0;
}

article {
  max-width: 37em;
  line-height: 1.4;
}
article + article {
  border-top: 1px solid #ddd;
}

/** Traducciones **/

.traduccion{
  list-style: none;
}

.icono-language{
  width: 100px;
}




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


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

.content-img-pilar img{
  width: 80%;
}

#galeria-cover .title{
      font-size:40px;
      position: absolute;
      top:50%;
      bottom: auto;
      left: 50%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      color: white;
      width: 100%;
      text-align: center;
    }
} /* @media (max-width: 575px) {} */
/* sm  */ @media (min-width: 576px) {



.content-img-pilar img{
  width: 70%;
}

.back{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 25px;
  top:25px;
  background: #F38B19;
  display: inline;
}

#galeria-cover .title{
      font-size: 50px;
      position: absolute;
      bottom: 0px;
      top: auto;
      left: 50%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      color: white;
      width: 100%;
      text-align: center;
    }

    #galeria-cover .logo{
      width: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }


}
/* md  */ @media (min-width: 768px) {

.grid-inputs{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap:15px;
}

.content-img-pilar img{
  width: 50%;
}

#galeria-cover .swiper-button-next:after, .swiper-button-prev:after {
  font-size: 40px;
}

#galeria-inicio .swiper-wrapper{
  width:200px;
}

#galeria-inicio .swiper-slide {
     text-align: center;
     font-size: 18px;
     background: transparent;
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
     height: 400px;
   }

   .back{
     width: 100%;
      height: 100%;
     position: absolute;
     left: 25px;
     top:25px;
     background: #F38B19;
     display: inline;
   }

   #galeria-cover .title{
         font-size: 75px;
         position: absolute;
         bottom: 0px;
         top: auto;
         left: 50%;
         -ms-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
         color: white;
         width: 100%;
         text-align: center;
       }

      .logo-pilares {
        width: 200px;
      }



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

.content-img-pilar img{
  width: 35%;
}


#galeria-inicio .swiper-slide {
     text-align: center;
     font-size: 18px;
     background: transparent;
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
     height: 300px;
   }

   .back{
     width: 100%;
     height: 100%;
     position: absolute;
     left: 25px;
     top:25px;
     background: #F38B19;
     display: inline;
   }

#galeria-inicio .swiper-wrapper{
  width:500px;
}

.grid-main{
  display: grid;
  grid-template-columns: 40% auto;
  gap:0;
}

.cont-inf-inicio{
  padding-left: 60px;
  padding-right: 60px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

#galeria-cover .title{
      font-size: 100px;
      position: absolute;
      bottom: 0px;
      top: auto;
      left: 50%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      color: white;
      width: 100%;
      text-align: center;
    }

} /* ipad Landscape */
/* xl  */ @media (min-width: 1200px) {
#galeria-cover .title{
      font-size: 130px;
      position: absolute;
      bottom: 0px;
      top: auto;
      left: 50%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      color: white;
      width: 100%;
      text-align: center;
    }
}
/* xxl */ @media (min-width: 1400px) {}