/* DEFAULTS */

:root {
    --long-shadow: 0px 20px 30px -10px rgba(0, 20, 40, 0.1),
                   0px 10px 20px -5px rgba(0, 0, 0, 0.1),
                   0px 5px 10px -3px rgba(0, 0, 0, 0.1),
                   0px 3px 5px -3px rgba(0, 0, 0, 0.2);

    --display-font: 'Expletus Sans';
    --text-font: 'poppins';

    --azul-oscuro: #005A9F;
    --azul-claro: #39B4FF;
    --amarillo: #FFBB33;
    --oscuro: #1E2326;
    --medio: #C1D7E0;
    --claro: #EDEEEF;
}

body {
    font-size: 16px;
    font-family: var(--text-font);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--display-font);

}

h1 {
    font-size: 32px;
    font-weight: 800;
}

h2 {
    font-size: 24px;
    font-weight: 600;
}

h3 {
    font-size: 22px;
    font-weight: 500;
}

/* .btn:not(:disabled):not(.disabled){
    border-color: #76cbff;
    font-family: var(--display-font);
    font-weight: 600;
    line-height: 1.6em;
    transition: all .3s ease-in-out;
}

.btn:not(:disabled):not(.disabled).btn-secondary{
    border-color: var(--azul-oscuro);
}

.btn:not(:disabled):not(.disabled).btn-secondary:hover{
    border-color: #fff;
    box-shadow: var(--long-shadow);
}

.btn.btn-primary{
    color: #fff;
    padding: 8px 32px;
    position: relative;
    background: transparent;
    z-index: 1;
    overflow: hidden;
    border-radius: 30px;
    border-top: 1px solid var(--azul-claro);
    box-shadow: var(--long-shadow);
    transition: transform .3s ease-in-out;
}

.btn.btn-primary:not(.search-icon):hover{
    transform: scale(1.05) translateY(-4px);
}

.btn.btn-primary::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    background: radial-gradient(ellipse at bottom center, var(--azul-claro), var(--azul-oscuro));
    transition: top .3s ease-in-out;
    z-index: -1;
}

.btn.btn-primary:hover::after{
    top: -100%;
}

.btn.btn-secondary{
    color: var(--azul-oscuro);
    padding: 8px 32px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    position: relative;
    background: transparent;
    z-index: 1;
    overflow: hidden;
    border-radius: 30px;
    border: 2px solid var(--azul-oscuro);
}

.btn.btn-secondary::after{
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at center center, var(--azul-claro), var(--azul-oscuro));
    transition: all .3s ease-in-out;
    transform: translateY(0);
    z-index: -1;
}

.btn.btn-secondary:hover{
    color: #fff;
}

.btn.btn-secondary:hover::after{
    transform: translateY(-50%);
    top: 50%;
} */

/* HEADER */

.header-main {
    box-shadow: var(--long-shadow);
    z-index: 100;
}

.navbar-static-top {
    max-height: 40px;
    font-size: 14px;
}

.navbar-brand.has-logo img {
    width: 100%;
}

.primary-navigation li{
    border-radius: 30px;
}

.primary-navigation .navigation .nav-link{
    font-family: var(--display-font);
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 30px;
}

[data-key="home"],
[data-key="mycourses"]{
    display: none;
}

/* BODY */

#page-wrapper {
    margin-top: 40px !important;
}

.drawer-toggles{
    position: relative;
    z-index: 103;
}


/* HOMEPAGE */

/* 
.homepage-carousel .controls a.carousel-control{
    background-color: transparent;
    border: none;
}

.heading-content .animated{
    opacity: 1 !important;
}

.homepage-carousel>div .homecarousel-slide-item .slide-item .slide-text .heading-content{
    border-radius: 8px;
    box-shadow: var(--long-shadow);
    background: radial-gradient(ellipse at bottom center, #EDEEEFAA, #EDEEEF22);
    backdrop-filter: blur(10px);
    border-top: 1px solid #ffffff88;
}

.homepage-carousel>div .homecarousel-slide-item .slide-item .slide-text .heading-content h1{
    text-shadow: 1px 1px 1px var(--oscuro);
}

.homepage-carousel>div .homecarousel-slide-item .slide-item .slide-text .heading-content p{
    color: var(--oscuro);
    font-weight: 500;
    text-transform: uppercase;
}

.available-content{
    box-shadow: var(--long-shadow);
    border: 5px solid #fff;
    border-radius: 8px;
    z-index: 102;
}

.available-courses .available-block .course-slider .slick-slide .available-content .available-info{
    background-color: #fff;
}

.available-courses .available-block .course-slider .slick-slide .available-content .available-info h6 a{
    color: var(--azul-oscuro);
}

.slick-list{
    overflow: visible;
    overflow-x: clip;
} */



/* FOOTER */

.footer-main {
    font-size: 14px;
    line-height: 1.2em;
}



.footer-main ul a {
    margin: 0 0 8px 0;
    padding: 0;
}



.footer-bottom {
    font-size: 12px;
    line-height: 1.2em;
    color: #a2a2a2;
    background-color: #1E2326;
}



/* OTHER */

.custom-shape-divider {
    width: 100%;
    height: 0;
    z-index: 100;
    display: flex;
    flex-direction: row;
    position: relative;
    z-index: 101;
}



.shape-divider-header {
    align-items: flex-start;
    margin-top: -1px;
}



.shape-divider-header svg {
    color: #fff;
    height: 32px;
    width: 100%;
    transform: scaleY(-1);
}



.shape-divider-footer {
    align-items: flex-start;
    margin-top: -1px;
}



.shape-divider-footer svg {
    color: #fff;
    height: 32px;
    width: 100%;
    transform: scaleY(-1);
}



.shape-divider-footer svg path {
    width: 100%;
}

.mediaplugin.mediaplugin_videojs>div{
    max-width: 800px !important;
    border-radius: 12px;
    overflow: hidden;
    border: 5px solid #fff;
    box-shadow: var(--long-shadow);
}

.h5p-iframe-wrapper{
    border-radius: 12px;
    overflow: hidden;
    border: 5px solid #fff;
    box-shadow: var(--long-shadow);
}

.activity.subsection>.activity-item{
    background-color: #f6f6f6;
}