html {
  font-size: 16px !important;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
    margin: 0 !important; /* Eliminar márgenes predeterminados */
}


/* Titles */
.section-title {
    font-family: "Bitter", sans-serif;
    margin-top: 1rem !important;
    margin-bottom: 1.5rem;
}

/* _Nav */

.logo_header {
    width: 19rem !important;
    height: auto !important;
    margin-left: 3rem;
}


@media(max-width: 755px) {
    .logo_header {
        margin-right: 3rem;
        margin-left: 3rem;
        width: 17rem !important;
    }
}

.home_logo {
    width: 6rem !important;
    height: auto !important;
}

/*Header*/

.bg-image {
    background-image: url('../img/statics/bg-header.jpg') !important;
}

/*Colors*/

.table_color {
    background-color: #07b9c2 !important;
}

.top_nav {
    background-color: #05bac1 !important;
}

.nav-blue {
    background-color: #054c64 !important;
}

.mobile_nav {
    background-color: #3e7586 !important;
}

.bg-blue-opacity {
    background-color: #06bac230 !important;
}

.bg-ligth-opacity {
    background-color: #c5dfff87 !important;
}

#mainnav .submenu li {
    background-color: #0d2236 !important;
}

#mainnav .submenu li:not(.menu-column):hover {
	background-color: #07b9c2 !important;
}

.text-aqua {
    color: #3d99ae;
}

.bg-aqua-opacity {
    background-color: #f3f9f9;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.bg-aladefe {
    background-image: url(/img/home/banners/Banner_white.jpg) !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 42em;
}

@media (max-width: 788px){
    .bg-aladefe {
        background-image: url(/img/home/banners/Banner_white_sm_v2.jpg) !important;
        height: 45rem;
    }
}

.bg-DarkTeal {
    background-color: #034b61 !important;
    border: 0;
    color: #fff;
}

.bg-Teal {
    background-color: #005e63 !important;
    border: 0;
    color: #fff;
}


/*buttons*/
.flat-future .post-future .flat-button.color-v2 {
    background-color: #12c4ab !important;
    text-decoration: none !important;
    border-radius: 5px;
}
.flat-future .post-future .flat-button.color-v2:hover {
    background-color: #059ea5 !important;
    text-decoration: none !important;
}    

/*Margins*/

.ml-1{
    margin-left:.25rem;
}

.mt-8 {
    margin-top: 5rem;
}

/*Map*/

.map-content{
    max-width:100%;
    max-height:100%;
}

.map-content iframe{
    width:100% !important;
    height:17rem !important;
}

/*Carousel*/

.carousel-container {
    position: relative;
    max-width: 100%;
    overflow: hidden;
}

.carousel {
    display: flex;
    transition: transform 0.5s ease;
}

.carousel-item {
    min-width: 100%;
    box-sizing: border-box;
}

.carousel img {
    width: 100%;
    height: auto;
}



.cont-info-programa{
    display: grid;
    place-items:center;
}

.cont-programa {
    height: 70%;
    display: grid;
    place-items: center;
}


.btn_trab {
    padding: 1rem;
    background: #07b9c2 !important;
    border-radius: 8px;
}

.btnEnvio {
    padding: .7rem;
    background: #005e63 !important;
    border-radius: 8px;
}

.enlace_trab{
    color: #fff;
    text-decoration: none;
    letter-spacing: 1px;
}

.btn-cyan button.btn-cyan, a.btn-cyan {
    display: inline-block;
    height:auto !important;
    font-weight: 400;
    color: #fff;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 2rem 0.75rem !important;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-darkCyan {
    background-color: #005e63;
    color: white;
    border-color: #005e63;
    border-radius: 10px 10px 10px 10px !important;
}

.btn-darkCyan:hover {
    background-color: #005e63;
    color: #0d6efd;
    border-color: #007B7F;
}

/* Estilos contador */
.cont-menu {
    display: flex;
    background-color: transparent;
    justify-content: center;
    align-items: center;
    width: 100%;
    bottom: 0;
    gap: 2rem;
}

.clock-item {
   /* padding: .30rem;*/
    align-items: center;
    justify-content: center;
    flex-direction: column;
    display: flex;
    position: relative;
/*    background-color: rgba(185, 223, 216, 0.71);*/
    border-radius: 10px;
    text-align: center;
}

.d-day {
    text-align: center;
    background-color: #06bac230;
    border-radius: 10rem;
}

.d-text {
    font-size: 1.5rem;
    font-weight: bold;
    color: #005e63;
}


/* tiempo */
.time {
    /*letter-spacing: 1px;*/
    font-size: 3rem;
    font-weight: 800;
    margin: 0;
}

.days {
    color: #054c64;
}

.hrs {
    color: #072243;
}

.min {
    color: #05bac1;
}

.seg {
    color: #009245;
}

.enlace_hos {
    text-decoration: none;
}

.parrafoTime {
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    margin-top: 0.2rem;
}

/* Estilos para los separadores */
.separator {
    font-size: 4rem;
    font-weight: lighter;
    margin: 0 0.5rem;
    color: #fff;
}

.separator-nav {
    font-size: 2.25rem;
    font-weight: 300;
    margin: 0 0.5rem;
    color: #fff;
}

.count-nav {
    margin: 0;
    margin-right: 1rem;
    font-size: 1.35rem;
    font-weight: bolder;
    color: #fff;
}

/* Estilos para el contador */
.countdown {
    text-align: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.countdown li {
    list-style: none;
}

    .countdown li > span {
        font-size: 3.2rem;
        color: #25568b;
        font-weight: 700;
        font-family: 'Oswald', sans-serif;
    }

@media (max-width: 755px) {
    .countdown li > span {
        font-size: 2rem;
    }
}

.countdown li > p {
    font-weight: 500;
    font-size: 1.25rem;
    margin-bottom: 0;
    color: black;
    font-family: 'Oswald', sans-serif;
}

@media (max-width: 755px) {
    .countdown li > p {
        font-size: 1rem;
    }

    .countdown-dnone {
        display: none;
    }

    .separator-nav {
        display: none;
    }
}

/* Colores específicos para cada elemento */
.countdown li:nth-child(2) span {
    color: #097dac;
}

.countdown li:nth-child(3) span {
    color: #51aebf;
}

.countdown li:nth-child(4) span {
    color: #0abae3;
}


.text-blue {
    color: #07b9c2;
    font-weight: 600;
    font-size: 1.5rem;
}

.text-date {
    font-size: 1.3rem;
    font-weight: 500;
}

/* MODAL */

/* Fondo modal: negro con opacidad al 50% */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 5rem;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    overflow: auto;
    overflow-wrap: break-word;
    word-wrap:break-word;
    background-color: rgba(0,0,0,0.5);
}

/* Ventana o caja modal */
.fade-low {
    -webkit-animation-name: animarsuperior;
    -webkit-animation-duration: 0.5s;
    animation-name: animarsuperior;
    animation-duration: 0.5s
}


/* Animación */
@-webkit-keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

@keyframes animarsuperior {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}


/* HOVER */

.hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover:hover {
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

.fs-7 {
    font-size:.8rem !important;
}

.fw-400 {
    font-weight: 428 !important;
}

.h-90 {
    height:90%;
}

.btn-teal {
    text-decoration: none;
    padding: 9px 20px;
    transition: all .2s;
    border-radius: 3px;
    border: solid .2rem #cecece;
    font-weight: 600;
    color: #4b8699;
}

.btn-teal:hover, btn-teal:focus {
    color: #0a58ca;
    /*color: #179bd7;*/
    outline: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}



.active-btn {
    color: #4b8699;
    text-decoration: none;
}

.fa-hover:hover .active-btn {
    transition: all 0.3s ease-in-out;
    transform: translateX(.4rem);
}

.reviews__stars {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0 0 5px 0;
}

.reviews__stars ul {
    display: flex;
    padding: 0;
    margin: 0;
    gap:.5rem;
}

.reviews__stars ul li.full {
    color: #f9c706;
}

.reviews__stars ul li.gray {
    color: #ccc;
}

.flag-icon {
    width: 4rem;
    height: auto;
    display:flex;
    align-self:center;
}

.card-country {
    border: 1px solid #007bff;
    border-radius: 10px;
    transition: transform 0.2s;
}

.card-country:hover {
    transform: scale(1.05);
}

.emblockquote blockquote {
    font-size: 20px;
    font-style: italic;
    padding-left: 45px;
    position: relative;
    margin-bottom: 35px;
    color: var(--black-color);
}

.emblockquote blockquote:before {
    top: 0;
    left: 0;
    width: 3px;
    content: "";
    height: 100%;
    position: absolute;
    background: #054c64;
}

/* ESTILOS MODAL TRABAJOS */

.title-aladefe {
    font-family: 'Helvetica Neue', sans-serif;
}

.date-job {
    background-color: orange;
    color: #fff;
    font-weight: bold;
    padding: .25rem;
}

.steps-job {
    color:red;
    font-size:1.5rem;
    font-weight: bold;
}

.p-job {
    font-size:1.4rem;
    font-weight:600;
}

@media (max-width: 600px) {
    .p-job {
        font-size: 4vw !important;
    }
}

.py-4r {
    padding-top: 2rem;
    padding-bottom: 4rem;
}

@media (max-width: 800px) {
    .py-4r {
        padding-top: 21rem;
        padding-bottom: 4rem;
    }
}


/* ESTILOS DE TABLA PAÍSES */

.stylish-table {
    max-width: 600px;
    margin: auto;
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

    .stylish-table table {
        width: 100%;
        border-collapse: collapse;
    }

    .stylish-table td {
        border: 1px solid #ddd;
        padding: 12px;
        text-align: left;
        color: #333;
        transition: background-color 0.3s, color 0.3s;
    }

        .stylish-table td:hover {
            background-color: rgba(0, 94, 99, 0.8);
            color: white;
        }

@media (max-width: 600px) {
    .stylish-table td {
        display: block;
        width: 100%;
    }
}


@media (max-width: 600px) {
    .stylish-table td {
        display: block;
        width: 100%;
    }
}


/* Iframe */

.embed-container {
    width: 100%;
    height: 50rem; /* o min-height: 50rem; */
    position: relative;
    overflow: hidden;
}

    .embed-container object,
    .embed-container iframe,
    .embed-container embed {
        width: 100%;
        height: 100%;
        border: none; /* Elimina el borde */
    }

.fancybox-image, .fancybox-iframe {
    height: 50rem !important;
}

/* Pop Up estilos */

.custom-popup {
    position: fixed;
    top: -100px; /* Comienza fuera de la vista */
    left: 50%;
    transform: translateX(-50%);
    background-color: white; /* Color de fondo */
    color: black; /* Color del texto */
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    transition: top 0.5s ease; /* Animación de caída */
    z-index: 1000; /* Asegúrate de que esté por encima de otros elementos */
}

    .custom-popup.visible {
        top: 20px; /* Posición visible */
    }

.custom-button {
    background-color: #007bff; /* Color del botón */
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
}

    .custom-button:hover {
        background-color: #0056b3; /* Color del botón al pasar el mouse */
    }

.hidden {
    display: none; /* Oculta el pop-up */
}

.magister--container {
    display: flex;
    flex-direction: column; /* Mantiene el título en la parte superior */
    align-items: center; /* Centra el contenido horizontalmente */
    padding: 20px;
}

.section-title {
    font-size: 2em; /* Tamaño del título */
    margin-bottom: 20px; /* Espacio debajo del título */
    text-align: center; /* Centra el texto del título */
    color: #333; /* Color del texto del título */
}

.magister--card {
    display: flex; /* Usar flexbox para alinear imagen y contenido */
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin: 15px;
    padding: 20px;
    width: 100%; /* Ajusta el ancho según sea necesario */
    max-width: 600px; /* Ancho máximo para las tarjetas */
    transition: transform 0.3s; /* Transición para el efecto hover */
}

    .magister--card:hover {
        transform: scale(1.02); /* Efecto de hover */
    }

.magister--flag {
    width: 30%; /* Ancho de la bandera */
    height: auto;
    border-radius: 8px 0 0 8px; /* Bordes redondeados en la parte izquierda */
}

.magister--content {
    padding-left: 20px; /* Espacio entre la imagen y el contenido */
    width: 70%; /* Ancho del contenido */
}

.magister--image {
    width: 100%;
    height: auto;
    border-radius: 8px; /* Bordes redondeados para la imagen del magistrado */
}

.magister--name {
    font-size: 1.5em;
    margin: 10px 0;
}

.magister--education-title {
    font-size: 1.2em;
    margin: 10px 0;
    color: #555; /* Color más suave para el título */
}

.magister--education-description {
    font-size: 1em;
    color: #333; /* Color del texto */
    line-height: 1.5; /* Espaciado entre líneas */
    text-align: justify; /* Justificar el texto */
}