/* 

.navbar-figura {

  border-top: solid transparent;

  width: 130px;

  border-right: solid transparent 40px; 

  border-bottom: solid #0f4c75 40px;

  transform: translate(0px, -41px);

} */





/*.nav-per {

  background: linear-gradient(to bottom, #0f4c75, #29719d);  

  background: linear-gradient(to bottom, #00003e, #31317d);

}

*/





#logoiexpro {

  width: 100%;

  object-fit: contain;

}





@media (max-width: 515px) {

  #logoiexpro {

    width: 100%;

    object-fit: contain;

  }

}



.navbar-light .navbar-nav .nav-link {

  color: #fff;

}



.navbar-light .navbar-nav .nav-link:hover {

  color: #fff;

}



.becas,

li,

a:hover {

  color: #ffffff;

  z-index: 999;

}



.show {

  color: #ffffff !important;

}





.nav-per {

  position: absolute;

  width: 102%;

  border-bottom: solid transparent;

  border-left: solid transparent 50px;

  border-right: solid transparent 50px;

  margin-left: -44px;

  border-top: solid #252C5B 40px;

}







@media (max-width: 1399px) {

  .nav-per {

    width: 112.5%;

  }

}





@media (max-width: 1199px) {

  .ampliar-12 {

    flex: 0 0 auto;

    width: 100%;

  }



  .nav-per {

    width: 110%;

  }

}









@media (min-width: 768px) and (max-width: 992px) {

  .navbar-expand-lg .navbar-nav {

    flex-direction: row;

  }



  .navbar-nav {

    display: flex;

    flex-direction: column;

    padding-left: 0;

    margin-bottom: 0;

    list-style: none;

  }



  .navbar-collapse {

    flex-basis: 100% !important;

    flex-grow: 1 !important;

    align-items: center !important;

  }





  .navbar-expand-lg .navbar-toggler {

    display: none;

  }



  .navbar-expand-lg .navbar-nav .nav-link {

    padding-right: .5rem;

    padding-left: .2rem;

  }



  .navbar-expand-lg .navbar-nav {

    flex-direction: row;

    margin-left: -30px;

  }



  .collapse:not(.show) {

    display: flex !important;

  }



  .navbar-expand-lg .navbar-collapse {

    display: flex !important;

    flex-basis: auto !important;

  }

  #mentitulo{
    display: flex !important;


  }



  .nav-per {

    width: 120%;

    margin-left: -67px;

  }



  .navbar-nav .dropdown-menu {

    position: absolute;

  }



}







@media (max-width: 768px) {

  .nav-per {

    display: none;

  }



  .navbar-light .navbar-nav .nav-link {

    color: #141414;

  }



  .navbar-light .navbar-nav .nav-link:hover {

    color: #000000;

  }



  .navbar-light .navbar-nav .nav-link:hover {

    width: 100%;

    background-color: #31317d;

    color: #ffffff;

    padding-left: 20px;

    transition: padding-left 0.3s ease;

  }



  .show {

    color: #000000 !important;

  }



}



@media (max-width: 576px) {

  .col-btn-cel {

    margin-top: -77px;

    margin-bottom: 11px !important;

  }

}







@media (min-width: 576px) and (max-width: 992px) {

  .col-videos {

    flex: 0 0 auto;

    width: 100%;

  }

}



/* .connector-line {

  position: absolute;

  bottom: -3px;

  left: 50%;

  width: 100%;

  height: 6px;

  background-color: #0f4c75;

  transform: translateX(-50%);

} */



.container1 {

  display: flex;

  align-items: center;

  width: 100%;

  height: 30px !important;

  position: relative;

  margin-left: -44px;

}











/* 

.connector-line {

  position: absolute;

  bottom: 28px;

  left: 50%;

  width: 80%;

  height: 5px;

  background-color: #0f4c75;

  transform: translateX(-50%);

}





.container1 {

  display: flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;

  height: 100px;

}

*/



.left-box,

.right-box {

  width: 220px;

  /* Ancho de cada contenedor */

  height: 40px;

  /* Altura del contenedor, ajusta según el contenido */

  box-sizing: border-box;

  /* Asegura que el padding y border se incluyan en el ancho/alto total */

  display: flex;

  align-items: center;

  justify-content: center;

  color: white;

  position: relative;

  /* Permite posicionar elementos hijos en relación con el contenedor */

  margin-left: 10px;

}



.left-box {

  width: 220px;

  color: white;

  border-top: solid transparent;

  /* border-left: solid transparent 50px; */

  border-right: solid transparent 50px;

  border-bottom: solid #0f4c75 40px;

}



.right-box {

  width: 220px;

  color: white;

  border-top: solid transparent;

  /* border-left: solid transparent 50px; */

  border-left: solid transparent 50px;

  border-top: solid #B91295 40px;

  margin-top: 2px;

  position: relative;

  margin-right: 50px;



}

















.header-encabezadosme {

  padding: 0px !important;

  margin-bottom: 0;

  background-color: transparent !important;

  border-bottom: none;

  margin-bottom: 10px;



  display: flex;

  flex-direction: column;

  justify-content: space-between;

  /* Distribuye espacio entre los elementos */

  overflow: hidden;

  /* Asegura que el contenido no se salga del contenedor */

  position: relative;





}





.titulos-encabezadosme {

  width: 220px;

  color: white;

  border-top: solid transparent;

  /* border-left: solid transparent 50px; */

  border-right: solid transparent 50px;

  border-bottom: solid #0f4c75 40px;

}





.texto-encabezadosme {

  font-family: 'Roboto Condensed Regular, Helvetica, Arial, sans-serif' !important;



  color: #ffffff;

  top: 34px;

  left: 10px;

  position: relative;

  font-size: 17px;

  /* font-weight: 600; */

}



.linea-encabezadosme {

  background-color: #0f4c75;

  width: 120%;

  height: 5px;

  margin-top: 0px;

}





.texto-encabezadosme-left {

  font-size: 15px;

}



.margenesme {

  margin-left: -18px;

  margin-right: -18px;

}











.header-encabezadosmelef {

  padding: 0px !important;

  margin-top: 0;

  background-color: transparent !important;

  border-top: none;

  margin-top: 10px;



  display: flex;

  flex-direction: column;

  justify-content: space-between;

  /* Distribuye espacio entre los elementos */

  overflow: hidden;

  /* Asegura que el contenido no se salga del contenedor */

  position: relative;





}







.titulos-encabezadosmelef {

  width: 220px;

  color: white;

  border-top: solid transparent;

  /* border-left: solid transparent 50px; */

  border-left: solid transparent 50px;

  border-top: solid #0f4c75 40px;

  margin-top: 10px;

  position: relative;



}





.texto-encabezadosmelef {

  font-family: 'Roboto Condensed Regular, Helvetica, Arial, sans-serif' !important;



  color: #ffffff;

  top: 34px;

  left: 10px;

  position: relative;

  font-size: 17px;



  /* font-weight: 600; */

}



.linea-encabezadosmelef {

  background-color: #0f4c75;

  width: 200%;

  height: 5px;

  margin-top: 0px;

}





.texto-encabezadosmelef-left {

  font-size: 15px;

}







/* Contenedor principal para los elementos adicionales */

.container1s {

  display: flex;

  align-items: center;

  /* Centra verticalmente los elementos hijos */

  justify-content: space-between;

  /* Distribuye los contenedores en la misma línea */

  width: 100%;

  /* Ancho del contenedor principal */

  position: relative;

  /* Permite posicionar el elemento de la línea de conexión */

}



/* Contenedor izquierdo */

.left-boxs {

  width: 220px;

  color: white;

  border-top: solid transparent;

  /* border-left: solid transparent 50px; */

  border-right: solid transparent 50px;

  border-bottom: solid #0f4c75 40px;

  margin-right: -60px;

  margin-top: -10px;



}





/* Línea de conexión */

.connector-lines {

  background-color: #0f4c75;

  width: 200%;

  height: 5px;

  margin-top: 28px;

}



/* Contenedor principal que envuelve todo */

.container1m {

  position: relative;

  /* Permite que los elementos hijos con posición absoluta se posicionen en relación con este contenedor */

  display: inline-block;

  /* Asegura que el contenedor se ajuste al tamaño del contenido */

}



/* Contenedor izquierdo */

.left-boxsm {

  position: relative;

  /* Permite que el enlace dentro del contenedor se posicione correctamente */

  z-index: 0;

  /* Asegura que esté debajo del enlace */

  background-color: #0f4c75;

  /* Color de fondo del contenedor */





}



/* Línea de conexión */

.connector-linesm {

  position: absolute;

  /* Posiciona esta línea en relación con el contenedor principal */

  top: 46%;

  /* Ajusta la posición vertical de la línea */

  left: 100%;

  /* Coloca la línea a la derecha del contenedor */

  border-right: solid transparent 50px;

  border-bottom: solid #0f4c75 41px;

  border-top: solid transparent;

  width: 283px;



  transform: translateY(-50%);

  /* Centra verticalmente la línea en el contenedor */

  z-index: 0;

  /* Asegura que esté debajo de los contenedores */

}



/* Asegura que el enlace esté sobre el contenedor */

.left-boxsm a {

  position: relative;

  /* Permite que el enlace se posicione correctamente en relación con su contenedor */

  z-index: 2;

  /* Asegura que el enlace esté sobre otros elementos */

  color: white;

  /* Color del texto del enlace */

  text-decoration: none;

  /* Elimina el subrayado del enlace */

}











.header-encabezados {

  padding: 0px !important;

  margin-bottom: 0;

  background-color: transparent !important;

  border-bottom: none;

  margin-bottom: 10px;



  display: flex;

  flex-direction: column;

  justify-content: space-between;

  /* Distribuye espacio entre los elementos */

  overflow: hidden;

  /* Asegura que el contenido no se salga del contenedor */

  position: relative;





}







.titulos-encabezados {

  width: 220px;

  color: white;

  border-top: solid transparent;

  /* border-left: solid transparent 50px; */

  border-right: solid transparent 50px;

  border-bottom: solid #0f4c75 40px;

}





.texto-encabezados {

  font-family: 'Roboto Condensed Regular, Helvetica, Arial, sans-serif' !important;



  color: #ffffff;

  top: 34px;

  left: 10px;

  position: relative;

  font-size: 17px;

  /* font-weight: 600; */

}



.linea-encabezados {

  background-color: #0f4c75;

  width: 100%;

  height: 5px;

  margin-top: 0px;

}





.texto-encabezados-left {

  font-size: 15px;

}



.margenes {

  margin-left: -18px;

  margin-right: -18px;

}





@media (max-width: 991px) {

  .col8-per {

    flex: 0 0 auto;

    width: 100%;

  }

}







#scrollTopBtn {

  display: none;

  position: fixed;

  bottom: 20px;

  right: 20px;

  z-index: 1000;

}



.rvoe:hover {

  color: red;

}



.cardtitle {

  width: 300px;

  /* Ancho de la tarjeta */

  height: 200px;

  /* Altura de la tarjeta */

  overflow: hidden;

  /* Esconde el contenido que sobrepasa el tamaño de la tarjeta */

}



.cardtitle img {

  object-fit: cover;

  /* Ajusta la imagen dentro del tamaño sin distorsionarla */

  width: 100%;

  /* Asegura que la imagen cubra todo el ancho de la tarjeta */

  height: 150px;

  /* Ajusta la altura de la imagen dentro de la tarjeta */

}



.cardtitle-body {

  height: 50px;

  /* Ajusta la altura del cuerpo de la tarjeta */

  padding: 10px;

  /* Añade un poco de espacio alrededor del contenido */

}



.cardtitle-title {

  font-size: 12px;

  /* Ajusta el tamaño del texto del título */

  text-align: center;

  /* Centra el texto del título */

}





.cardtitle1 {

  width: 300px;

  height: auto;

  overflow: hidden;

  position: relative;

}



.card-img-wrapper {

  position: relative;

  z-index: 1;

}



.cardtitle1-body {

  position: relative;

  z-index: 2;

  /* Asegúrate de que esté por encima del .card-img-wrapper */

}









.cardtitle1 img {

  width: 100%;

  height: auto;

  display: block;

  object-fit: cover;

  /* Esto asegura que la imagen se ajuste al contenedor */

}



.cardtitle1-body {

  width: 100%;

  height: 100%;

  padding: 10px;

  box-sizing: border-box;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}



.cardtitle1-title {

  text-decoration: none;

  color: #000;

  font-size: 14px;

  /* Cambia esto según tus necesidades */

}





.card-img-wrapper {

  position: relative;

  overflow: hidden;



}



.card-img-wrapper .overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.5);

  color: white;

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0;

  transition: opacity 0.3s ease;

  cursor: pointer;

  /* Cambia el cursor a una mano al pasar sobre la tarjeta */

}



.card-img-wrapper:hover .overlay {

  opacity: 1;

}



.overlay i {

  font-size: 2rem;

}









.card {

  border-radius: 0 !important;

}



.bg-purple {

  background-color: #B91295;

}



.bg-purplenav {

  background-color: #B91295;



}



.bg-purplenavP {

  color: white;

}





.bg-purplenav1 {

  background-color: #0f4c75;

}



.imglogo {

  width: 80%;



}





.bg-whitemenu {

  background-color: #FFF;

}





a {

  text-decoration: none;

  /* Elimina el subrayado */

  color: inherit;

  /* Hereda el color del texto del contenedor padre */

}





.title {

  border-width: 1px;

  border-style: solid;

  border-color: transparent transparent transparent #ddd;

  /* Color del borde */

}



.btnleer {

  border: 1px solid #0f4c75;

  background: #0f4c75;

  color: white;

  padding: 2px;

}



.becas,

li,

a {

  font-size: 14px;

}



.becas,

li,

a:hover {

  font-size: 14px;

  color: #000;



}



.rounded-circle {

  transform: translate(78vw, 10px);

}



.pagination-controls {

  margin-top: 20px;

  text-align: center;

}



.pagination-controls button {

  margin: 0 5px;

}



.carousel-item .card {

  margin: 5px;

}



.card-eventos {

  height: 490px;

}





/* INDEX */





@media (max-width: 991px) {

  .col-eventos {

    width: 100% !important;

  }



  .col-md-4-carreras {

    width: 100% !important;

  }

}



.carousel-indicators [data-bs-target] {

  background-color: black !important;

  height: 12px;

  width: 12px;

  border-radius: 50% !important;

  opacity: 1;

}



.carousel-indicators .active {

  background-color: #0c6dad !important;

}





.carousel-indicators {

  margin-bottom: -24px !important;

}





.li-index {

  font-family: 'Roboto Condensed Regular, Helvetica, Arial, sans-serif' !important;

  font-size: 14px !important;

  text-align: left !important;

  text-indent: -1em;

  padding-left: 1em;

  color: #0000009c;

}





.carreras-index {

  object-fit: contain !important;

  max-width: 99px;

  height: 99px;

  display: block;

}





.cortar-parrafo {

  width: 120px;

  overflow: hidden;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 5;

  /* Número de líneas antes del truncamiento */

  line-height: 1.2em;

  /* Ajusta según sea necesario para controlar la altura de la línea */

  max-height: calc(1.2em * 5);

  /* Calcula la altura total para 5 líneas */

  text-overflow: ellipsis;

}



.titulo-carreras {

  font-size: 16px;

  color: #0f4c75;

}







.textc {

  color: white;

  border-bottom: 1px solid gray;

  padding-bottom: 13px;

}





.textb {

  color: black;

}









.iconsocial {



  background: #000;

}



/* Estilo base para las imágenes */

.social-icon img {

  background: #0f4c75;

  width: 40px;

  height: 40px;

}



/* Cambiar el fondo al pasar el cursor */

.social-icon img:hover {

  background-color: #FFF;

  /* Cambia a negro al hacer hover */

  transition: background-color 0.3s ease;



}







/************************************************************/

/* MODAL PARA ZOOM DE IMAGENES  */

/************************************************************/





#modalImg .modal-body {

  padding: 2px;

}



#modalImg .modal-content {

  width: auto !important;

  background-color: transparent !important;

  border: none !important;

}



#modalImg .modal-header {

  border: none !important;

}





#modalImg .fa-square-xmark {

  font-size: 40px;

  z-index: 10;

  color: white;

  cursor: pointer;

}



/************************************************************/



#infoModal .modal-body {

  padding: 2px;

}



#infoModal .modal-content {

  width: auto !important;

  background-color: transparent !important;

  border: none !important;

}



#infoModal .modal-header {

  border: none !important;

}





#infoModal .fa-square-xmark {

  font-size: 40px;

  z-index: 10;

  color: white;

  cursor: pointer;

}





/************************************************************/

/* SECCION DE CARRERAS */

/************************************************************/





.color-card-Header {

  background-color: #0f4c75 !important;

  color: white !important;

}



.header-vacio {

  height: 35px !important;

}



.subtitulos-carreras {

  background: url(https://iexpro.edu.mx/laboratoriosaevirtual_v1/Inicio/Img/h3-bg.png)repeat-x center right;

  line-height: 1;

  padding-bottom: 4px;

  height: 25px;

  margin-top: 40px;

  margin-bottom: 40px;

}





.subtitulos-letra {

  font-family: 'Roboto Condensed Regular, Helvetica, Arial, sans-serif' !important;

  background: #ffffff;

  padding-right: 9px;

  font-size: 20px;

}



.container-carreras {

  padding-left: 5px;

  padding-right: 5px;

}



.card-carreras-index {

  width: 500px;

  height: 100px;

  border: none;

}



.card-carreras-index .card-title {

  font-size: 14px;

  color: #0f4c75 !important;

  padding-left: 8px;

  width: 100%;

  cursor: pointer;

}



.card-carreras-index .card-title:hover,

.body-programas .card-title:hover {

  text-decoration: underline;

}



.card-carreras-index:hover .image-overlay-footer {

  opacity: 1;

  cursor: pointer;

}



.img-carreras-index {

  object-fit: cover !important;

  width: 100px;

  height: 100px;

  display: block;

}





.card-carreras-index .image-overlay {

  width: 91%;

  left: 8px !important;

}



.card-carreras-index .fa-magnifying-glass-plus {

  font-size: 30px !important;

}



.card-carreras-index .card-img-wrapper:hover .image-overlay {

  opacity: 1;

  cursor: pointer;

}







@media (max-width: 576px) {

  .container-carreras .col-12 {

    flex: 0 0 auto;

    width: 33%;

  }



  .container-carreras .card-img-wrapper {

    display: flex;

    justify-content: center;

  }



  .card-carreras-index .image-overlay {

    width: 100%;

    left: 0px !important;

  }



}



@media (min-width: 576px) {

  .container-carreras .card-img-wrapper {

    display: flex;

    justify-content: center;

  }

}



.indicadores-carreras {

  margin-bottom: -40px !important;

}



/************************************************************/

/* SECCION DE FOOTER */

/************************************************************/





.card-eventos-footer {

  width: 500px;

  height: 125px;

  background-color: #000;

  border-color: #000 !important;

}





.img-eventos-footer {

  object-fit: cover !important;

  width: 125px;

  height: 125px;

  display: block;

}





.card-eventos-footer .card-title {

  font-size: 12px;

  color: white !important;

  padding-left: 8px;

}



.no-padding {

  padding: 0 !important;

}



.no-padding .card-body {

  margin-top: 0px;

  padding-top: 0px;

  margin-left: 0px;

  padding-left: 0px;

}



.image-overlay-footer {

  position: absolute;

  top: 0;

  left: -6px;

  width: 100%;

  height: 102%;

  background-color: rgba(0, 0, 0, 0.5);

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  opacity: 0;

  transition: opacity 0.3s ease;

}



.card-eventos-footer:hover .image-overlay-footer {

  opacity: 1;

  cursor: pointer;

}





@media (min-width: 992px) and (max-width: 1399px) {

  .col-sm-5 {

    width: 100%;

    margin-bottom: 12px;

    display: flex;

    justify-content: center;

  }





  .card-eventos-footer,

  .card-carreras-index {

    height: auto;

    margin-left: 10px;

  }



  .no-gutters {

    margin-left: 10px;

    margin-left: 10px;

    text-align: center;

    justify-content: center;

  }





  .card-carreras-index .image-overlay {

    width: 100%;

    left: 0px !important;

  }







}







@media (max-width: 991px) {

  .col-md-4 {

    width: 100%;

  }



  .image-overlay-footer {

    left: -12px;

  }



}
.container-sm 
{

  max-width: 1340px;
}

@media (min-width: 430px) and (max-width: 932px) {

  #celtitu{
    display: flex;

}

}


@media (max-width: 576px) {

  .col-12 {

    margin-bottom: 45px;

  }



  #cel {

    display: block !important;

    /* Forza la aplicaci%C3%B3n del estilo */

  }



  #lap {

    display: none !important;

    /* Forza la aplicaci%C3%B3n del estilo */

  }






}





#cel {

  display: none;

}







/************************************************************/

/* SECCION DE PROGRAMAS EDUCATIVOS  */

/************************************************************/



.no-border {

  border: none !important;

}



.cCarousel-item .card-img-wrapper:hover .image-overlay {

  opacity: 1;

  cursor: pointer;

}





.card-programas .card-body {

  text-align: center;

  padding: 0.5rem;

}



.card-programas .titulo-card {

  font-size: 0.875rem;

  margin: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  max-width: 100%;

}





/* CAROUSEL */

/************************************************************/

.seccion {

  background-color: white;

}



.indicador-izquierda {

  margin-right: 38px;



}



.indicadores-programa {

  width: 100%;

  display: flex;

  justify-content: space-between;

  /* Espacio entre las flechas */

  position: absolute;

  top: 32px;

}



#cCarousel {

  position: relative;

  max-width: auto;

  margin: auto;

}



.arrow-programa {

  position: absolute;

  display: flex;

  width: 35px;

  height: 35px;

  justify-content: center;

  align-items: center;

  z-index: 999;

  font-size: 26px;

  color: white !important;

  background: #0f4c75;

  cursor: pointer;

}



#cCarousel #prev {

  left: 0px;

}



#cCarousel #next {

  right: 0px;

}



#carousel-vp {

  width: auto;

  height: 300px;

  display: flex;

  align-items: center;

  position: relative;

  overflow: hidden;

  margin: auto;

}







#cCarousel #cCarousel-inner {

  display: flex;

  position: absolute;

  transition: 0.3s ease-in-out;

  gap: 13px;

  left: 0px;

}



.cCarousel-item {

  width: 200px;

  height: 300px;

  border: 2px solid white;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  background-color: white;

}



.cCarousel-item img {

  display: grid;

  width: 100%;

  object-fit: contain;

  min-height: 150px;

  color: white;

}



.cCarousel-item .infos {

  height: auto;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: space-around;

  color: rgb(255, 255, 255);

}



.cCarousel-item .infos button {

  background: #222;

  padding: 10px 30px;

  border-radius: 15px;

  color: white;

  font-size: 1rem;

  font-weight: bold;

  cursor: pointer;

}



/* .img-programa-edu{

  width: 480px;

  height: 480px;

  display: block;

  object-fit: cover !important;

} */





.header-article {

  font-size: 22px;

  color: black;

  font-weight: 800;

}



@media (max-width: 770px) {

  #carousel-vp {

    width: 510px;

  }

}



@media (max-width: 510px) {

  #carousel-vp {

    width: 172px;

  }



  .header-article {

    font-size: 15px;

  }



  .infos span {

    font-size: 12px;

  }



  .cCarousel-item img {

    min-height: 100px;

  }



  .cCarousel-item {

    height: 225px;

    line-height: 15px;

    width: 172px;

  }

}