/********** TEMPLATE CSS **********/

:root{
    --primary:#06BBCC;
    --light:#F0FBFC;
    --dark:#181d38;
}

.owl-nav button{
    width:45px;
    height:45px;
    border-radius:50% !important;
    background:#3498db !important;
    color:white !important;
    font-size:22px !important;
    margin:0 5px;
}

.owl-dots{
    margin-top:15px;
    text-align:center;
}

.owl-dot span{
    width:12px !important;
    height:12px !important;
}


.noticia-img{
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
    border-radius:15px;
    display:block;
}

.row{
    align-items:flex-start;
}


.portada-principal{
    height: 350px;
}

.portada-img{
    width:100%;
    height:350px;
    object-fit:cover;
    display:block;
}

@media (max-width:768px){

    .portada-principal{
        height:auto;
    }

    .portada-img{
        height:280px;
    }

}








/* =========================
   GENERAL
========================= */

body{
    font-family:'Merriweather', serif;
}

h1,h2,h3,h4,h5,h6{
    font-family:'Poppins', sans-serif;
    font-weight:600;
}

.fw-medium{
    font-weight:600 !important;
}

.fw-semi-bold{
    font-weight:700 !important;
}

.back-to-top{
    position:fixed;
    display:none;
    right:45px;
    bottom:45px;
    z-index:99;
}

/* =========================
   TEXTOS
========================= */

.texto-confluencia{
    font-size:20px;
    line-height:1.9;
    color:#222;
}

/* =========================
   SPINNER
========================= */

#spinner{
    opacity:0;
    visibility:hidden;
    transition:opacity .5s ease-out, visibility 0s linear .5s;
    z-index:99999;
}

#spinner.show{
    transition:opacity .5s ease-out, visibility 0s linear 0s;
    visibility:visible;
    opacity:1;
}

/* =========================
   BUTTONS
========================= */

.btn{
    font-family:'Nunito', sans-serif;
    font-weight:600;
    transition:.5s;
}

.btn.btn-primary,
.btn.btn-secondary{
    color:#FFFFFF;
}

.btn-square{
    width:38px;
    height:38px;
}

.btn-sm-square{
    width:32px;
    height:32px;
}

.btn-lg-square{
    width:48px;
    height:48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square{
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:normal;
    border-radius:0;
}

/* =========================
   NAVBAR
========================= */

.navbar,
.navbar .nav-link,
.dropdown-menu{
    font-family:'Poppins', sans-serif;
}

.navbar .nav-link,
.navbar .dropdown-item,
.navbar .navbar-brand h5{
    color:white !important;
}

.navbar .nav-link:hover,
.navbar .dropdown-item:hover{
    color:#f1f1f1 !important;
}

.navbar .dropdown-menu{
    background:#3498db !important;
    border:none;
}

.navbar .dropdown-item:hover{
    background:rgba(255,255,255,0.15) !important;
}

.navbar-toggler{
    border-color:rgba(255,255,255,0.5);
}

.navbar-toggler-icon{
    filter:brightness(0) invert(1);
}

.navbar .dropdown-toggle::after{
    border:none;
    content:"\f107";
    font-family:"Font Awesome 5 Free";
    font-weight:900;
    vertical-align:middle;
    margin-left:8px;
}

.navbar-light .navbar-nav .nav-link{
    margin-right:30px;
    padding:25px 0;
    color:#FFFFFF;
    font-size:15px;
    text-transform:uppercase;
    outline:none;
    font-weight:500;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active{
    color:var(--primary);
}

.navbar-light .navbar-brand,
.navbar-light a.btn{
    height:75px;
}

.navbar-light.sticky-top{
    top:-100px;
    transition:.5s;
}

@media (max-width:991.98px){

    .navbar-light .navbar-nav .nav-link{
        margin-right:0;
        padding:10px 0;
    }

    .navbar-light .navbar-nav{
        border-top:1px solid #EEEEEE;
    }
}

@media (min-width:992px){

    .navbar .nav-item .dropdown-menu{
        display:block;
        margin-top:0;
        opacity:0;
        visibility:hidden;
        transition:.5s;
    }

    .navbar .dropdown-menu.fade-down{
        top:100%;
        transform:rotateX(-75deg);
        transform-origin:0% 0%;
    }

    .navbar .nav-item:hover .dropdown-menu{
        top:100%;
        transform:rotateX(0deg);
        visibility:visible;
        transition:.5s;
        opacity:1;
    }
}

.navbar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.navbar-brand {
    margin: 0 !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    display: flex;
    align-items: center;
}

.navbar-brand h5 {
    margin: 0 !important;
    line-height: 1.2;
}

.navbar {
    min-height: 85px;
}

.navbar-brand {
    height: 85px;
    display: flex;
    align-items: center;
}

/* =========================
   HEADER CAROUSEL
========================= */

@media (max-width:768px){

    .header-carousel .owl-carousel-item{
        position:relative;
        min-height:500px;
    }

    .header-carousel .owl-carousel-item img{
        position:absolute;
        width:100%;
        height:100%;
        object-fit:cover;
    }
}

.header-carousel .owl-nav{
    position:absolute;
    top:80%;
    right:1%; 
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
}

.header-carousel .owl-nav .owl-prev,
.header-carousel .owl-nav .owl-next{
    margin:7px 0;
    width:45px;
    height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#FFFFFF;
    background:transparent;
    border:1px solid #FFFFFF;
    font-size:22px;
    transition:.5s;
}

.header-carousel .owl-nav .owl-prev:hover,
.header-carousel .owl-nav .owl-next:hover{
    background:var(--primary);
    border-color:var(--primary);
}

/* =========================
   CARDS
========================= */

.info-card{
    position:relative;
    height:250px;
    border-radius:20px;
    overflow:hidden;
    cursor:pointer;
    transition:0.3s;
    box-shadow:0 5px 15px rgba(0,0,0,0.2);
}

.info-card:hover{
    transform:scale(1.03);
}

/* =========================
   VIDEOS
========================= */

.video-card{
    position:relative;
    overflow:hidden;
    border-radius:18px;
    max-width:420px;
    margin:auto;
    transition:0.3s;
    box-shadow:0 4px 15px rgba(0,0,0,0.15);
    background:#fff;
}

.video-card:hover{
    transform:scale(1.02);
}

.video-container{
    position:relative;
}

.video-preview{
    width:100%;
    height:220px;
    object-fit:cover;
    display:block;
}

.play-button{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:70px;
    height:70px;
    background:rgba(255,255,255,0.9);
    border-radius:50%;
    box-shadow:0 4px 12px rgba(0,0,0,0.25);
}

.play-button::before{
    content:'';
    position:absolute;
    top:50%;
    left:54%;
    transform:translate(-50%, -50%);
    border-style:solid;
    border-width:12px 0 12px 20px;
    border-color:transparent transparent transparent #3498db;
}

.video-modal{
    display:none;
    position:fixed;
    z-index:999999;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.75);
}

.video-modal-content{
    position:relative;
    width:80%;
    max-width:750px;
    height:420px;
    margin:40px auto;
    background:#000;
    border-radius:15px;
    overflow:hidden;
}

#videoFrame{
    width:100%;
    height:100%;
    border:none;
    display:block;
    border-radius:15px;
}

.cerrar{
    position:absolute;
    top:-45px;
    right:0;
    color:#fff;
    font-size:40px;
    cursor:pointer;
    z-index:1000000;
}

@media(max-width:768px){

    .video-card{
        max-width:100%;
    }

    .video-preview{
        height:180px;
    }

    .video-modal-content{
        width:95%;
        height:250px;
        margin:80px auto;
    }
}

/* =========================
   GALLERY
========================= */

.gallery-item{
    position:relative;
    overflow:hidden;
    border-radius:20px;
    cursor:pointer;
}

.gallery-item img{
    width:100%;
    height:220px;
    object-fit:cover;
    transition:0.4s;
}

.gallery-item:hover img{
    transform:scale(1.08);
}

.gallery-overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.45);
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    transition:0.5s;
}

.gallery-overlay h5{
    color:#fff;
    font-size:28px;
    font-weight:bold;
}

.gallery-item:hover .gallery-overlay{
    opacity:1;
}

/* =========================
   MODAL GALERIA
========================= */

#modalGaleria{
    display:none;
    position:fixed;
    z-index:999999;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.95);
    justify-content:center;
    align-items:center;
}

#imagenModal{
    max-width:90%;
    max-height:90%;
    border-radius:15px;
}

#cerrarModal{
    position:absolute;
    top:20px;
    right:35px;
    color:white;
    font-size:55px;
    cursor:pointer;
    font-weight:bold;
}

/* =========================
   RECTANGULO
========================= */

.rectangulo{
    position:absolute;
    padding-left:5px;
    padding-right:9px;
    top:20px;
    left:80px;
    width:80%;
    height:40px;
    background:#3498db;
    border-radius:15px;
    display:flex;
    justify-content:left;
    align-items:left;
    color:white;
    font-size:20px;
    font-weight:bold;
    box-shadow:0 2px 10px rgba(0,0,0,0.2);
}


.curso-card{
    min-height: 240px;
}

.curso-body{
    display:flex;
    flex-direction:column;
    height:100%;
}

.curso-body .btn{
    margin-top:auto;
}

.curso-body h4{
    min-height:65px;
}








/* =========================
   CATEGORY & COURSES
========================= */

.category img,
.course-item img{
    transition:.5s;
}

.category a:hover img,
.course-item:hover img{
    transform:scale(1.1);
}

/* =========================
   FOOTER
========================= */

.footer{
    background:#3498db !important;
}

.footer h3,
.footer h4,
.footer p,
.footer a,
.footer i{
    color:white !important;
}

.footer .btn.btn-social{
    margin-right:5px;
    width:35px;
    height:35px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--light);
    font-weight:normal;
    border:1px solid #FFFFFF;
    border-radius:35px;
    transition:.3s;
}

.footer .btn.btn-social:hover{
    background:white !important;
    color:#3498db !important;
}

.footer .btn.btn-link{
    display:block;
    margin-bottom:5px;
    padding:0;
    text-align:left;
    color:#FFFFFF;
    font-size:15px;
    font-weight:normal;
    text-transform:capitalize;
    transition:.3s;
    text-decoration:none;
}

.footer .btn.btn-link::before{
    position:relative;
    content:"\f105";
    font-family:"Font Awesome 5 Free";
    font-weight:900;
    margin-right:10px;
}

.footer .btn.btn-link:hover{
    color:#f1f1f1 !important;
    padding-left:5px;
}

.footer .copyright{
    padding:25px 0;
    font-size:15px;
    border-top:1px solid rgba(256,256,256,.1);
}

.footer .copyright a{
    color:var(--light);
}

.footer .footer-menu a{
    margin-right:15px;
    padding-right:15px;
    border-right:1px solid rgba(255,255,255,.1);
}

.footer .footer-menu a:last-child{
    margin-right:0;
    padding-right:0;
    border-right:none;
}

.footer a {
    transition: .3s;
}

.footer a:hover {
    opacity: .85;
    padding-left: 3px;
}

.footer iframe {
    box-shadow: 0 3px 10px rgba(0,0,0,.15);
}

.footer .btn {
    width: 35px;
    height: 35px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}