@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: 16px !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:#202322;
     background-color: #fff;
}
body, html {height: 100%; -moz-osx-font-smoothing: grayscale;}


a:focus {text-decoration: none!important;}

a, a:active, a:focus { color: #212339; text-decoration: none;}
a:hover, a:active{color: #D42C2C; 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: #ffffff; text-decoration: none; font-size: 12px!important; line-height: 20px;}
/*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: 'Nunito', sans-serif; letter-spacing: 0;color: #000001;}
/* h1, .h1 {font-size:3rem; line-height:3.5rem; font-weight: 600;} */

h1, .h1 {font-size:2.25rem; line-height:3.125rem; font-weight: 400;}
h2, .h2 {font-size:1.875rem; line-height:2.625rem; font-weight: 400;}
h3, .h3 {font-size:1.75rem; line-height:2.375rem; font-weight: 400;}
h4, .h4 {font-size:1.5rem; line-height:2.0625rem; font-weight: 400;}
h5, .h5 {font-size:1.375rem; line-height:1.875rem; font-weight: 400;}
h6, .h6 {font-size:1rem; line-height:1.5625rem; font-weight: 400;}

p {font-size: 0.875rem;font-weight: 400;  font-family: 'Inter', sans-serif !important;line-height:1.3125rem;}
.span{font-size: 0.75rem;font-weight: 400;  font-family: 'Inter', sans-serif !important;line-height: 1.1875rem!important;}


/* sm  */ @media (min-width: 576px) {}
/* md  */ @media (min-width: 768px) {
h1, .h1 {font-size:2.625rem; line-height:3.5rem; font-weight: 400;}
h2, .h2 {font-size:2.25rem; line-height:3rem; font-weight: 400;}
h3, .h3 {font-size:2.125rem; line-height:2.75rem; font-weight: 400;}
h4, .h4 {font-size:1.875rem; line-height:2.4375rem; font-weight: 400;}
h5, .h5 {font-size:1.75rem; line-height:2.25rem; font-weight: 400;}
h6, .h6 {font-size:1.125rem; line-height:1.6875rem; font-weight: 400;}

p {font-size: 1rem;font-weight: 400;  font-family: 'Inter', sans-serif !important;line-height:1.5rem;}
.span{font-size: 0.875rem;font-weight: 400;  font-family: 'Inter', sans-serif !important;line-height: 1.3125rem!important;}


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

h1, .h1 {font-size:3rem; line-height:3.875rem; font-weight: 400;}
h2, .h2 {font-size:2.375rem; line-height:3.125rem; font-weight: 400;}

}


.font-main {font-family: 'inter', sans-serif!important;}
.font-alt {font-family: 'Nunito', sans-serif!important;}


/* text color */
.text-alt{color:#D22F2C;}



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

.bg-alt{background: #F9F9F9!important;}
.bg-hover{background: #8a1e13;}
.bg-gray-alt{background: #F2F1F1}
.bg-alt-div{background: linear-gradient(180deg, rgba(249,249,249,1) 0%, rgba(249,249,249,1) 92%, rgba(255,255,255,1) 92%);}



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




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

.btn-main {
  font-size: 14px;
  min-width: 150px;
  color: #fff;
  background: #D22F2C;
  border: 0px;
  font-family: "Inter";
  font-weight: 500;
  transition: all 0.7s ease!important;
}

.btn-main:hover{
  color: #fff!important;
  transition: all 0.7s ease!important;
}

.btn-link{
  color: #D42C2C!important;
}

.btn-link:hover{
  color: #8a1e13!important;
}

/*Btn back*/

.btn-back {
 display: flex;
 height: 3em;
 width: auto;
 align-items: center;
 justify-content: center;
 border-radius: 3px;
 transition: all 0.5s linear;
 cursor: pointer;
 border: none;
 background: transparent;
}

.btn-back > svg {
 margin-right: 5px;
 margin-left: 5px;
 font-size: 20px;
 font-weight: 500;
 transition: all 0.4s ease-in;
}

.btn-back:hover > svg {
 font-size: 1.2em;
 transform: translateX(-5px);
}

.btn-back:hover {
 transform: translateY(-2px);
}


/* ===================================
    Galerias
====================================== */
.content-btn-nav{
  display: flex;
    justify-content: center;
    margin-top: 50px;
}

.content-btn-nav-test{
  display: flex;
width: 100%;
justify-content: space-between;
position: absolute;
top: 50%;
left: 0%;
transform: translate(-0%, -50%);
}

/*-----Nav galery Linea del tiempo-----*/
.swiper-button-next-ltiempo::after {
  height: 100%;
 content: "\F285";
 font-family: bootstrap-icons !important;
 display: flex;
 justify-content: center;
 align-items: center;
}

.swiper-button-prev-ltiempo::after {
  height: 100%;
content: "\F284";
font-family: bootstrap-icons !important;
display: flex;
justify-content: center;
align-items: center;
}

.swiper-button-next-ltiempo {
  width: 35px;
  height: 35px;
   position: relative;
   margin-left: 15px;
   display: inline-table !important;
   top:0px;
   font-size: 20px;
   color: #000;
   border-radius: 50%;
     transition:all .7s ease;
}

.swiper-button-next-ltiempo:hover{
  background: #D42C2C;
  border: 1px solid #D42C2C;
  color: #fff;
}

.swiper-button-prev-ltiempo {
  width: 35px;
  height: 35px;
   position: relative;
   margin-right: 15px;
   display: inline-table !important;
   top:0px;
   font-size: 20px;
   color: #000;
   border: 1px solid #FF0000;
   border-radius: 50%;
     transition:all .7s ease;
}

.swiper-button-prev-ltiempo:hover {
  background: #D42C2C;
  border: 1px solid #D42C2C;
  color: #fff;
}

.swiper-button-next-ltiempo.swiper-button-disabled, .swiper-button-prev-ltiempo.swiper-button-disabled {
   opacity: .35;
   cursor: auto;
   pointer-events: none;
}

/*-----Nav galery Pilares-----*/
.swiper-button-next-pilares::after {
  height: 100%;
 content: "\F285";
 font-family: bootstrap-icons !important;
 display: flex;
 justify-content: center;
 align-items: center;
}

.swiper-button-prev-pilares::after {
  height: 100%;
content: "\F284";
font-family: bootstrap-icons !important;
display: flex;
justify-content: center;
align-items: center;
}

.swiper-button-next-pilares {
  width: 35px;
  height: 35px;
   position: relative;
   margin-left: 15px;
   display: inline-table !important;
   top:0px;
   font-size: 20px;
   color: #000;
   border-radius: 50%;
     transition:all .7s ease;
}

.swiper-button-next-pilares:hover{
  background: #D42C2C;
  border: 1px solid #D42C2C;
  color: #fff;
}

.swiper-button-prev-pilares {
  width: 35px;
  height: 35px;
   position: relative;
   margin-right: 15px;
   display: inline-table !important;
   top:0px;
   font-size: 20px;
   color: #000;
   border: 1px solid #FF0000;
   border-radius: 50%;
     transition:all .7s ease;
}

.swiper-button-prev-pilares:hover {
  background: #D42C2C;
  border: 1px solid #D42C2C;
  color: #fff;
}

.swiper-button-next-pilares.swiper-button-disabled, .swiper-button-prev-pilares.swiper-button-disabled {
   opacity: .35;
   cursor: auto;
   pointer-events: none;
}


/*-----Nav galery testimoneo-----*/
.swiper-button-next-test::after {
  height: 100%;
 content: "\F285";
 font-family: bootstrap-icons !important;
 display: flex;
 justify-content: center;
 align-items: center;
}

.swiper-button-prev-test::after {
  height: 100%;
content: "\F284";
font-family: bootstrap-icons !important;
display: flex;
justify-content: center;
align-items: center;
}

.swiper-button-next-test {
  width: 35px;
  height: 35px;
   position: relative;
   margin-left: 15px;
   display: inline-table !important;
   top:0px;
   font-size: 20px;
   color: #E51C21;
   border-radius: 50%;
     transition:all .7s ease;
}

.swiper-button-next-test:hover{
  background: #D42C2C;
  border: 1px solid #D42C2C;
  color: #fff;
}

.swiper-button-prev-test {
  width: 35px;
  height: 35px;
   position: relative;
   margin-right: 15px;
   display: inline-table !important;
   top:0px;
   font-size: 20px;
   color: #E51C21;
   border-radius: 50%;
     transition:all .7s ease;
}

.swiper-button-prev-test:hover {
  background: #D42C2C;
  border: 1px solid #D42C2C;
  color: #fff;
}

.swiper-button-next-test.swiper-button-disabled, .swiper-button-prev-test.swiper-button-disabled {
   opacity: .35;
   cursor: auto;
   pointer-events: none;
}

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


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

.line-deco{
  width: 30%;
  height: 1px;
  background: #D22F2C;
  margin-top: 20px;
  margin-bottom: 20px;
}

.line-deco-alt{
  width: 30%;
  height: 1px;
  background: #C5C5C5;
  margin-top: 20px;
  margin-bottom: 20px;
}


.border-left-10{
  border-left: 0px solid #D53837!important;
  border-right: 0px solid transparent;
}

.border-right-10{
  border-right: 0px solid #D53837!important;
  border-left: 0px solid transparent
}

.border-top-10{
  border-top: 10px solid #D53837!important;
}

.border-color-white{border-color: #fff;}

/* ===================================
    hover
====================================== */

.hover-zoom:hover .image,
.parent:hover .hover-zoom .image {
	transform: scale(1.1);
	transition-duration: 7s;
}

.hover-zoom-rotate:hover .image,
.parent:hover .hover-zoom-rotate .image {
	transform: scale(1.1) rotate(3deg);
	transition-duration: 7s;
}


/* ===================================
    Cards
====================================== */

.main-card{
  background: #FFFFFF;
  padding: 25px;
}

.main-card img{
  width: 35px;
  margin-left: 10px;
}

.card-bottom{
  position: relative;
  bottom: auto;
  right: auto;
  margin-top: 50px;
}

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

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

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

.content-institucion{
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

.content-institucion img{
  width: 200px;
}





/* ===================================
    Alertas
====================================== */

.noti-info{
  background: #D53837;
  color:#fff;
  padding: 15px;
  width: 100%;
  transition: 0.7s ease all;
}

/* ===================================
    Modal
====================================== */


/* ===================================
    Codigo Etica
====================================== */

.cover-etica{
  width: 100%;
  min-height: auto;
  background-image:url('../../assets/img/codigo-de-etica/cover.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

}

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

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



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





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


.grid-main{grid-template-columns: 50% auto;}

.cover-etica{min-height: 100%;}

.main-card{padding: 40px;}
.main-card img{width: 50px;}

.card-bottom{position: absolute;right: 15px;bottom: 0px;margin-top: 0px;}


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


.grid-institucion{ grid-template-columns: 1fr 1fr;}

.border-left-10{
  border-left: 10px solid #D53837!important;
  border-right: 10px solid transparent;
}

.border-right-10{
  border-right: 10px solid #D53837!important;
  border-left: 10px solid transparent
}

} /* ipad Landscape */
/* xl  */ @media (min-width: 1200px) {



}
/* xxl */ @media (min-width: 1400px) {}