@import"https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700";

@keyframes line-animation {
    to {
        stroke-dashoffset: 0
    }
}

@keyframes fill-animation {
    from {
        fill: transparent
    }

    to {
        fill: #fff
    }
}

:root {
    --animate-delay: 0.5s;
    --input-padding-x: 1.5rem;
    --input-padding-y: .75rem
}

.admin-container {
    align-items: flex-start;
    display: flex;
    gap: 2rem;
    overflow-x: hidden;
    padding: 0
}

.admin-container main {
    flex-grow: 1
}

.admin-container aside {
    z-index: 1
}

.admin-page nav .bg-dark {
    background-color: transparent !important
}

.admin-menu {
    color: #000
}

.admin-menu li {
    margin-bottom: 1rem
}

.admin-menu li :last-child {
    margin-bottom: 0
}

.admin-menu .admin-menu-link {
    align-items: center;
    background: #fff;
    border-radius: 100%;
    color: #084b11;
    display: flex;
    flex-direction: column;
    height: 90px;
    justify-content: center;
    transition: all .5s ease;
    width: 90px
}

.admin-menu .admin-menu-link:hover {
    background: #084b11;
    color: #fff
}

.admin-menu .admin-menu-link.active {
    background: #084b11;
    color: #fff
}

.user-information {
    align-items: center;
    display: flex;
    flex-direction: column
}

.user-actions-dashboard {
    display: flex;
    justify-content: end
}

.user-actions-dashboard a {
    color: #002644
}

.user-actions-dashboard a:hover {
    color: #3b5998
}

.card {
    color: #000
}

.card .card-icon {
    color: #084b11
}

.curso-header {
    align-items: center;
    display: flex;
    justify-content: space-around;
    left: 0;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1030
}

.curso-en-curso,
.curso-list-preview,
.curso-nuevo {
    box-sizing: border-box;
    max-height: 425px;
    position: relative
}

.curso-list {
    height: 371px;
    overflow-y: hidden
}

.curso-list:hover,
.curso-list:active,
.curso-list:focus {
    overflow-y: scroll
}

.curso-list-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding: 0 .5rem;
    width: 100%
}

.curso-list-preview {
    display: flex;
    flex-direction: column;
    gap: .7rem
}

.curso-list-item {
    display: flex;
    gap: .5rem
}

.curso-player {
    display: flex
}

.curso-player-column {
    width: 75%
}

.curso-informacion {
    background: rgba(59, 89, 152, .5);
    margin: 0 auto;
    padding: 1rem 5rem 5rem;
    width: 100%
}

.curso-en-curso,
.curso-nuevo {
    overflow: hidden
}

.curso-en-curso .continuar-curso-bg,
.curso-bg {
    background-attachment: scroll;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 425px;
    transition: all 300ms ease-in-out 0s;
    width: 100%;
    z-index: 0
}

.curso-en-curso:hover .continuar-curso-bg,
.curso-nuevo:hover .curso-bg {
    transform: scale(1.1)
}

.curso-nuevo .curso-nuevo-detalles {
    mix-blend-mode: luminosity
}

.curso-item-image {
    align-items: center;
    background-attachment: scroll;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex: 0 0 35%;
    justify-content: center;
    min-height: 6rem
}

.curso-item-image a {
    color: #0dcaf0
}

.curso-item-image a:hover {
    color: #03a3ad
}

.curso-item-text {
    flex: 0 0 50%
}

.curso-item-text a {
    color: #03a3ad;
    text-decoration: none;
    font-weight: 500
}

.curso-item-text a:hover {
    color: #084b11
}

.curso-item-text h6 {
    margin: 0
}

.curso-wrap {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 1rem
}

.curso-link {
    background-attachment: scroll;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 130px;
    margin-right: 1rem;
    width: 130px
}

.curso-extracto {
    padding: 0 calc(1.5rem / 3);
    width: calc(100% - 130px)
}

.curso-extracto a h5 {
    font-size: 1rem
}

.curso-extracto p {
    margin-bottom: .5rem
}

.curso-stats {
    align-content: space-between;
    display: flex
}

.curso-stats div:first-child {
    margin-right: 1rem
}

.curso-resumen-detalles {
    color: #fff;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%
}

.curso-nombre {
    align-items: center;
    display: flex;
    justify-content: space-between
}

.curso-nombre h5 {
    margin: 0
}

.curso-costos {
    align-items: flex-end;
    display: flex;
    gap: 1rem
}

.curso-comprar {
    display: flex;
    gap: .5rem
}

.curso-precio {
    color: #03a3ad;
    font-size: 1.5rem;
    font-weight: 700
}

.curso-precio-regular {
    color: #adb5bd
}

.continuar-curso-resumen,
.curso-nuevo-detalles {
    position: absolute;
    padding: 1rem;
    width: 100%;
    min-height: 425px;
    background-color: rgba(0, 38, 68, .5);
    z-index: 5
}

.curso-en-curso .progress {
    position: relative;
    z-index: 5
}

.curso-item-text a.curso-completado,
p.curso-completado {
    color: #179613
}

.curso-item-text a.curso-completado:hover {
    color: #084b11
}

.curso-item-text a.curso-en-progreso,
p.curso-en-progreso {
    color: #03a3ad
}

.curso-item-text a.curso-en-progreso:hover {
    color: #084b11
}

p.sin-iniciar {
    color: #495057
}

.curso-en-curso video {
    width: 100%;
    height: 100%
}

.video-playlist {
    overflow-y: scroll;
    position: Absolute;
    right: 0;
    top: 0px;
    width: 25%
}

.video-playlist .btn:focus {
    box-shadow: none
}

.video-playlist .btn-link {
    text-decoration: none
}

.video-playlist .btn-link h6 {
    margin: 0
}

.video-playlist .btn-link .duracion-curso {
    color: #fff;
    font-size: .75rem
}

.video-playlist .playlist {

    height: 670px;
    overflow-y: scroll;
}

.video-playlist .playlist-content {
    background: rgba(59, 89, 152, .5)
}

.video-playlist-player {
    display: flex;
    justify-content: center
}

.video-playlist-player video {
    background-color: rgba(0, 38, 68, .9)
}

.video-playlist .card {
    background-color: transparent;
    border-radius: 0;
    color: #002644
}

.video-playlist .card-header {
    background-color: rgba(0, 38, 68, .9)
}

.tema-modulo {
    flex: 1;
    min-width: 1px;
    display: flex;
    flex-direction: column;
    margin-left: 4px;
    margin-bottom: 1rem
}

.tema-titulo {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.43em
}

.tema-titulo a:hover {
    color: #fff
}

.tema-meta {
    font-size: 12px;
    line-height: 1em;
    opacity: .7;
    padding-top: 4px
}

.tema-meta a:hover {
    color: #fff
}

.tema-items {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 4px
}

.tema-recursos .btn {
    border-radius: 0
}

.cursos-nuevos {
    position: relative
}

.cursos-nuevos div:first-child {
    align-items: flex-end;
    display: flex;
    gap: 1rem
}

.cursos-nuevos-bg {
    background-color: #03a3ad;
    height: 200px;
    position: absolute;
    width: 100%;
    z-index: -1
}

.cursos-nuevos-container {
    display: flex;
    flex-wrap: wrap
}

.nuevo-curso-desc {
    transform: translateY(75px);
    transition: all 300ms ease-in-out 0s
}

.curso-nuevo:hover .nuevo-curso-desc {
    transform: translateY(0)
}

.curso-detalles {
    position: relative
}

.curso-detalles,
.curso-detalles::before,
.curso-detalles::after {
    background-color: #002644
}

.curso-detalles::before,
.curso-detalles::after {
    display: block;
    content: "";
    position: absolute;
    top: 0px;
    height: 100%;
    width: calc(-576px + 50vw)
}

.curso-detalles::before {
    left: 0px;
    transform: translateX(-100%)
}

.curso-detalles::after {
    right: 0px;
    transform: translateX(100%);
    width: calc(-92px + 49vw)
}

.curso-detalles h5,
.acerca-del-curso h5,
.curso-temario h5,
.curso-valoraciones h5 {
    color: #03a3ad
}

.curso-temario ul li {
    list-style-type: none
}

.curso-porcentajes>div {
    margin-bottom: .5rem
}

.progress {
    height: .3rem
}

.autor-resena,
.autor-resena img {
    height: 100px
}

.fa-star.active {
    color: #ffb200
}

.tarjeta-comprar {
  width: 100%;

    z-index: 6
}

.curso-teaser {
    position: relative
}

.look-teaser {
    left: 40%;
    position: absolute;
    text-align: center;
    top: 40%;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, .5)
}

.look-teaser a {
    color: rgba(255, 255, 255, .75)
}

.look-teaser a:hover {
    color: #fff
}

.curso-poster {
    left: 0;
    position: absolute;
    top: 0;
    z-index: -1
}

.poster-gradient {
    background: #002644;
    background: linear-gradient(0deg, #002644 0%, rgba(0, 38, 68, 0) 100%);
    background-color: transparent !important
}

.curso-card,
.curso-modulos .card,
.user-resumen {
    background-color: rgba(59, 89, 152, .75)
}

.curso-card {
    min-height: 25.375rem
}

.curso-card .card-item {
    border-bottom: 1px solid #fff
}

.curso-modulos .card-header {
    border: none
}

.curso-modulos .card-header h2 button h6,
.curso-modulos .card-header h2 button small {
    color: #fff
}

.curso-modulos .card-header h2 button:focus h6 {
    color: #0dcaf0
}

.descripcion-datos .desc-section {
    border-top: solid 1px #fff;
    padding: 1rem 0
}

.descripcion-cifras,
.descripcion-certificado,
.descripcion-detallada {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: flex-start
}

.descripcion-cifras *,
.descripcion-detallada * {
    width: 100%
}

.descripcion-detallada div:first-child,
.descripcion-cifras div:first-child,
.descripcion-cifras div:last-child {
    width: 30%
}

.descripcion-cifras div p {
    margin-bottom: .3rem
}

.corazon-blanco {
    color: #fff
}

.corazon-rojo {
    color: #dc3545
}

.top-cursos svg {
    color: #ffb200
}

@media(max-width: 780px) {
    .curso-header {
        flex-direction: column;
        position: relative
    }

    .curso-player-column {
        width: 100%
    }

    .curso-informacion {
        padding: 0 1rem
    }

    .curso-list-header {
        flex-direction: column
    }

    .curso-list-header h1 {
        text-align: center
    }

    .curso-wrap {
        align-items: center;
        flex-direction: column;
        gap: 1rem
    }

    .curso-extracto {
        text-align: center;
        width: 100%
    }

    .curso-stats {
        justify-content: center
    }

    .compartir-curso {
        position: absolute;
        right: 1rem;
        top: 1rem
    }

    .compartir-curso span {
        display: none
    }

    .video-playlist {
        height: 300px;
        position: relative;
        right: 0;
        top: 0;
        width: 100%
    }

    .playlist {
        height: calc(100% - 60px)
    }

    .valoracion-info {
        flex-direction: column
    }

    .valoracion-info .promedio-curso {
        margin-bottom: 1rem;
        margin-right: 0 !important;
        text-align: center;
        width: 100%
    }

    .valoracion-info .curso-porcentajes {
        width: 50%
    }
}

@media(max-width: 767px) {
    .curso-list-preview {
        margin-top: 1rem
    }
}

@media(min-width: 320px)and (max-width: 768px) {
    .curso-list-item {
        flex-direction: column;
        padding-right: 1rem
    }
}

.instructor-afodemy {
    align-items: center
}

.instructor-perfil,
.instructor-avatar {
    display: flex;
    align-items: center
}

.instructor-avatar {
    width: 100%
}

.instructor-avatar img {
    border-radius: 50%;
    margin-right: 1.5rem;
    width: 80px
}

.instructor-social-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 40%
}

.instructor-social-links a:hover {
    color: #03a3ad !important
}

.instructor-descripcion {
    text-align: justify
}

.instructor-detalles a {
    font-weight: 600;
    text-decoration: none
}

@media(max-width: 480px) {
    .instructor-perfil {
        flex-direction: column
    }

    .instructor-avatar {
        justify-content: center;
        margin-bottom: 1rem;
        margin-right: 0 !important
    }

    .instructor-social-links {
        margin: .5rem 0;
        width: 100%
    }
}

.notas-contenedor .btn-link {
    text-decoration: none
}

.notas-contenedor .btn-outline-light {
    color: #fff
}

.notas-contenedor .btn-outline-light:hover {
    color: #212529
}

.notas-cuerpo {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%
}

.notas-timestamp {
    align-self: flex-start
}

.notas-creadas *,
.sin-notas-creadas * {
    font-size: 14px
}

.nota-creada {
    border-top: 1px solid #e9ecef
}

.nota-creada p {
    margin: 0
}

.notas-acciones {
    display: flex;
    justify-content: end
}

.lista-pyr .pregunta-afodemy,
.respuestas-afodemy-list .respuesta-afodemy {
    display: flex;
    border-top: .06rem solid #dee2e6;
    font-size: .9rem;
    line-height: 1em;
    padding: 1rem 1.5rem 0;
    margin: 1rem 0 0;
    align-items: center
}

.avatar-afodemy {
    height: auto;
    width: 6rem
}

.avatar-afodemy img {
    border-radius: 50%
}

.pregunta-contenido {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.pregunta-contenedor,
.pregunta-autor,
.respuesta-contenedor,
.respuesta-autor {
    align-items: center;
    display: flex;
    min-width: .06rem;
    padding-left: 1rem
}

.pregunta-encabezado,
.respuesta-encabezado {
    margin-bottom: .5rem;
    font-weight: 600
}

.pregunta-stats,
.respuesta-stats {
    display: flex;
    flex-direction: column
}

.pregunta-votos,
.respuesta-votos {
    display: flex;
    align-items: center;
    justify-content: end
}

.pregunta-stats .icono,
.respuesta-stats .icono {
    padding: .7rem
}

.pregunta-respuestas,
.respuesta-reportar {
    display: flex;
    align-items: center;
    justify-content: end
}

.respuesta-votos,
.respuesta-reportar {
    justify-content: end !important
}

.pregunta-autor *,
.respuesta-autor *,
.notas-acciones * {
    padding: 0 .5rem;
    font-size: .8rem
}

.pregunta-autor .autorNam,
.respuesta-autor .autorNam {
    padding-left: 0
}

.respuestas-afodemy-list .card {
    background-color: rgba(255, 255, 255, .25);
    color: #002644
}

.respuestas-comentario .card {
    background-color: transparent
}

@media(max-width: 480px) {
    .avatar-afodemy {
        margin-bottom: 1.5rem
    }

    .lista-pyr-header {
        flex-direction: column
    }

    .lista-pyr .pregunta-afodemy,
    .respuestas-afodemy-list .respuesta-afodemy,
    .pregunta-contenedor,
    .respuesta-contenedor {
        flex-direction: column
    }

    .pregunta-stats,
    .respuesta-stats {
        flex-direction: row
    }
}

.cursos-recomendados {
    margin-bottom: 3rem;
    min-height: 19rem
}

.cursos-recomendados-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr))
}

.recomendacion-item {
    height: auto
}

.recomendacion-image {
    background-attachment: scroll;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    height: 14rem;
    width: 100%
}

.recomendacion-texto {
    background-color: #002644;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: .75rem
}

.recomendacion-instructor {
    margin: 0
}

.recomendacion-valor {
    align-items: center;
    display: flex;
    gap: 2rem;
    justify-content: flex-start
}

footer {
    background-color: #002644;
    color: #fff;
    min-height: 7.5rem;
    padding: 3rem 0;
    position: relative;
    z-index: 3
}

footer a {
    color: #fff
}

footer ul li a {
    font-size: .8rem
}

.locale-select-container select {
    width: 50%
}

.bg-afodemy {
    background: linear-gradient(0deg, rgba(0, 38, 68, 0) 0%, rgba(0, 38, 68, 0.25) 100%);
    background-color: transparent !important;
    transition: all .5s ease-in-out
}

.bg-afodemy .navbar-brand {
    height: 4.75rem;
    margin: 0;
    position: relative;
    width: 14.375rem
}

.bg-afodemy .navbar-brand>div {
    height: 100%;
    position: absolute;
    top: 0;
    transition: opacity 2s ease;
    width: 100%
}

.bg-afodemy .navbar-brand #logo-azul {
    background-image: url("/storage/img/brand/afodemy_logo_azul.webp");
    background-attachment: scroll;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 1
}

.bg-afodemy .navbar-brand #logo-blanco {
    background-image: url("/storage/img/brand/afodemy_logo_blanco.webp");
    background-attachment: scroll;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0
}

.bg-afodemy .navbar-nav .nav-link {
    color: #002644
}

.bg-afodemy .afodemy-btn {
    background-color: transparent;
    color: #002644;
    font-variant: all-petite-caps
}

.bg-afodemy .afodemy-btn:hover {
    background-color: transparent;
    color: #3b5998
}

.bg-afodemy-scrolling {
    background: #002644 !important;
    color: #fff
}

.bg-afodemy-scrolling .navbar-nav .nav-link {
    color: #fff
}

.bg-afodemy-scrolling .menu-mobile-btn {
    color: #fff
}

.bg-afodemy-scrolling .afodemy-btn {
    background-color: transparent;
    color: #fff;
    font-variant: all-petite-caps
}

.bg-afodemy-scrolling .afodemy-btn:hover {
    background-color: transparent;
    color: #fff
}

.bg-afodemy-scrolling .btn-register {
    border: 1px solid #fff;
    color: #fff
}

.bg-afodemy-scrolling .btn-register:hover {
    background-color: rgba(255, 255, 255, .5);
    border: 1px solid rgba(255, 255, 255, .5);
    color: #002644
}

.bg-afodemy-scrolling .btn-login {
    background-color: #fff;
    color: #002644
}

.bg-afodemy-scrolling .btn-login:hover {
    background-color: rgba(255, 255, 255, .5);
    color: #002644
}

.bg-afodemy-scrolling .offcanvas {
    background: #002644 !important
}

.bg-afodemy-scrolling .offcanvas .afodemy-side-actions a {
    color: #fff
}

.bg-afodemy-scrolling .offcanvas .afodemy-side-actions hr {
    background-color: #179613
}

.bg-afodemy-scrolling .offcanvas .afodemy-side-actions .btn-cart {
    border: 1px solid #fff;
    color: #fff;
    width: 100%
}

.bg-afodemy-scrolling .offcanvas .afodemy-side-actions .btn-cart:focus,
.bg-afodemy-scrolling .offcanvas .afodemy-side-actions .btn-cart:active {
    background-color: #ced4da;
    border: 1px solid #ced4da;
    color: #002644
}

.bg-afodemy-scrolling .offcanvas .accordion .dropdown-item-detail a {
    color: #002644
}

.bg-afodemy-scrolling .offcanvas .accordion .btn-cart {
    border: 1px solid #002644;
    color: #002644;
    width: 100%
}

.bg-afodemy-scrolling .offcanvas .accordion .btn-cart:focus,
.bg-afodemy-scrolling .offcanvas .accordion .btn-cart:active {
    background-color: #ced4da;
    border: 1px solid #ced4da;
    color: #002644
}

.bg-achievements {
    background: linear-gradient(0deg, #3b5998 0%, #002644 100%);
    color: #ffffef
}

.menu-mobile {
    display: none
}

.menu-mobile-btn {
    display: none
}

.menu-mobile-btn:focus {
    box-shadow: none
}

.menu-mobile .btn-close {
    background-color: #fff;
    border-radius: 100%;
    opacity: 1;
    position: absolute;
    right: -3.5rem;
    top: 1rem
}

.menu-mobile .offcanvas-header {
    position: absolute;
    right: 0
}

.menu-divider::before {
    content: "|"
}

@media(min-width: 320px)and (max-width: 800px) {
    .menu-desktop {
        display: none
    }

    .menu-desktop.user-logged {
        display: none
    }

    .menu-mobile {
        display: flex;
        width: 18.75rem
    }

    .menu-mobile-btn {
        display: inline-flex
    }
}

.page-start .mainView {
    margin-top: 9rem
}

.page-start .afodemy-form {
    width: 100%
}

.page-main .mainView {
    margin-top: 6.875rem
}

.page-curso .mainView {
    margin: 6.4rem auto 0
}

.mainView {
    height: auto;
    margin-bottom: 10rem;
    min-height: 37.5rem;
    position: relative;

}

.main-presentation {
    background: linear-gradient(20deg, #002644 0%, #0d6efd 50%, #002644 100%);
    border-radius: 2rem;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr));
    padding: 5rem;
    position: relative
}

.tagline-layer {
    height: 100%;
    position: absolute;
    width: 100%
}

.tagline-layer-0 {
    background-image: url("/storage/img/tagline/16.webp");
    background-attachment: scroll;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
    mix-blend-mode: screen
}

.tagline-layer-1 {
    background-image: url("/storage/img/tagline/15.webp");
    background-attachment: scroll;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
    mix-blend-mode: color-dodge
}

.tagline-layer-2 {
    background-image: url("/storage/img/tagline/14.webp");
    background-attachment: scroll;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
    mix-blend-mode: color-dodge
}

.tagline-layer-3 {
    background-image: url("/storage/img/tagline/13.webp");
    background-attachment: scroll;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
    mix-blend-mode: color-dodge;
    opacity: .8
}

.tagline-layer-4 {
    background-image: url("/storage/img/tagline/12.webp");
    background-attachment: scroll;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
    mix-blend-mode: screen
}

.tagline-layer-5 {
    background-image: url("/storage/img/tagline/11.webp");
    background-attachment: scroll;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
    mix-blend-mode: hard-light
}

.tagline-layer-6 {
    background-image: url("/storage/img/tagline/10.webp");
    background-attachment: scroll;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
    mix-blend-mode: color-dodge;
    opacity: .75
}

.tagline-layer-7 {
    background-image: url("/storage/img/tagline/09.webp");
    background-attachment: scroll;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
    mix-blend-mode: screen
}

.tagline-layer-8 {
    background-image: url("/storage/img/tagline/08.webp");
    background-attachment: scroll;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
    mix-blend-mode: color-dodge;
    opacity: .75
}

.tagline-layer-9 {
    background-image: url("/storage/img/tagline/07.webp");
    background-attachment: scroll;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
    mix-blend-mode: color-dodge
}

.tagline-layer-10 {
    background-image: url("/storage/img/tagline/06.webp");
    background-attachment: scroll;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
    mix-blend-mode: color-dodge
}

.tagline-layer-11 {
    background-image: url("/storage/img/tagline/05.webp");
    background-attachment: scroll;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
    mix-blend-mode: color-dodge;
    opacity: .5
}

.tagline-layer-12 {
    background-image: url("/storage/img/tagline/04.webp");
    background-attachment: scroll;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
    mix-blend-mode: color-dodge
}

.tagline-layer-13 {
    background-image: url("/storage/img/tagline/03.webp");
    background-attachment: scroll;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
    mix-blend-mode: screen;
    opacity: .5
}

.tagline-layer-14 {
    background-image: url("/storage/img/tagline/02.webp");
    background-attachment: scroll;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
    mix-blend-mode: color-dodge;
    opacity: .75
}

.tagline-layer-15 {
    background-image: url("/storage/img/tagline/01.webp");
    background-attachment: scroll;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
    mix-blend-mode: screen
}

.tagline-layer-16 {
    background-image: url("/storage/img/tagline/00.webp");
    background-attachment: scroll;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    mix-blend-mode: color-dodge
}

.photo-credit a {
    color: #002644 !important
}

.photo-credit a:hover {
    color: #3b5998
}

.checkout-page .container {
    max-width: 60rem
}

@media(min-width: 670px)and (max-width: 780px) {
    .page-start .mainView {
        margin-top: 7rem
    }

    .page-main .afodemy-form {
        width: 100%
    }

    .page-curso .bg-dark {
        padding-bottom: 1rem
    }

    .page-curso .mainView {
        margin-top: 1rem
    }

    .main-presentation {
        padding: 1rem
    }

    .tagline-layer {
        opacity: .3
    }
}

@media(min-width: 320px)and (max-width: 560px) {
    .page-start .mainView {
        margin-top: 7rem
    }

    .page-main .afodemy-form {
        width: 100%
    }

    .page-curso .bg-dark {
        padding-bottom: 1rem
    }

    .page-curso .mainView {
        margin-top: 0rem
    }

    .main-presentation {
        padding: 1rem
    }

    .tagline-layer {
        opacity: .3
    }
}

* {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    padding: 0;
    margin: 0
}

html {
    height: 100%
}

body {
    background-image: url("/storage/img/bg/afodemy_bg.webp");
    background-attachment: fixed;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #ffffef;
    color: #002644;
    height: 100%
}

body.recover-password {
    align-items: center;
    background-image: url("/storage/img/bg/vino-li-u0rOLndCjSc-unsplash.jpg");
    background-attachment: scroll;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    height: 100%;
    padding-top: 40px;
    padding-bottom: 40px
}

body.is-loading {
    overflow: hidden
}

main {
    font-weight: 100
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700
}

a {
    color: #002644;
    text-decoration: none;
    transition: all .5s ease
}

a:hover {
    color: #03a3ad
}

@media(max-width: 480px) {
    body {
        background-image: url("/storage/img/bg/afodemy_bg.webp");
        background-attachment: fixed;
        background-position: right bottom;
        background-repeat: no-repeat;
        background-size: cover
    }
}

@media(max-width: 480px) {
    .navbar-brand.afodemy-logo {
        margin-right: 0
    }

    .afodemy-group .btn {
        font-size: .8rem;
        padding: .5rem .25rem
    }

    .bg-dark {
        background: #002644;
        background: linear-gradient(180deg, #002644 0%, #002644 100%);
        background-color: transparent !important;
        padding-bottom: 2rem;
        text-align: center
    }

    .curso-descripcion .tab-content {
        width: 80%
    }

    .curso-nuevo-item {
        margin-bottom: 1.5rem
    }

    .curso-nuevo-item:last-child {
        margin-bottom: 0
    }

    .curso-detalles::before,
    .curso-detalles::after {
        width: 12px
    }

    .descripcion-datos .desc-section {
        flex-direction: column
    }

    .descripcion-detallada div:first-child,
    .descripcion-cifras div:first-child,
    .descripcion-cifras div:last-child {
        width: 100%
    }

    .logged-in .navbar-brand.afodemy-logo {
        margin-right: 80px
    }
}

@media(max-width: 767px) {
    .afodemy-tagline {
        width: 100%
    }

    .afodemy-tagline h1 {
        font-size: calc(1.375rem + 1vw)
    }

    .nuevo-curso-desc {
        transform: translateY(0)
    }

    .locale-select-container {
        margin: 0 0 1.5rem;
        text-align: center
    }

    .locale-select-container select {
        width: 100%
    }

    .afodemy-links {
        line-height: 3rem
    }

    .afodemy-links,
    .afodemy-copy {
        padding: 0 1.5rem
    }

    .afodemy-copy {
        text-align: center
    }

    #videoBG {
        display: none
    }

    #video-poster {
        background-color: transparent;
        background-image: url("/storage/img/video-bg-poster.jpg");
        background-position: 45% center;
        background-size: cover
    }

    .afodemy-modal .tab-pane {
        width: 80%
    }

    .afodemy-modal .afodemy-search {
        width: 100%
    }
}

@media screen and (max-width: 830px) {
    .curso-descripcion .tab-content {
        width: 80%
    }
}

@media(min-aspect-ratio: 16/9) {
    #videoBG {
        height: auto;
        width: 100%
    }
}

@media(max-aspect-ratio: 16/9) {
    #videoBG {
        height: 100%;
        width: auto
    }
}

.user-panel {
    color: #002644;
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(6, 1fr);
    margin-bottom: 3rem;
    position: relative
}

.user-panel-header {
    min-height: 20rem
}

.user-panel h1 {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    grid-area: 1/1/2/13;
    margin: 0
}

.user-panel-01 {
    grid-area: 2/1/7/9
}

.user-panel-02 {
    align-items: center;
    display: flex;
    grid-area: 2/9/3/13;
    justify-content: space-between;
    width: 100%
}

.user-panel-03 {
    grid-area: 3/9/6/13;
    height: 16rem;
    overflow-x: hidden;
    overflow-y: auto
}

.user-panel-04 {
    align-items: center;
    display: flex;
    grid-area: 6/9/7/13;
    justify-content: center
}

.user-actions {
    align-items: center;
    display: flex
}

.user-logged {
    align-items: flex-end;
    display: flex;
    gap: .8rem
}

.user-logged .btn:focus {
    box-shadow: none
}

.user-profile-cover,
.user-profile-information {
    width: 100%
}

.user-profile-cover {
    background-color: #002644;
    height: 6.25rem
}

.user-profile-head {
    align-items: flex-start;
    color: #ffffef;
    display: flex;
    height: 12.5rem;
    justify-content: flex-start;
    margin-bottom: 3rem;
    margin-top: -5.625rem
}

.user-profile-links a {
    color: #ffffef
}

.user-profile-links a:hover {
    color: wheat
}

.user-profile-body {
    display: flex
}

.user-profile-image {
    margin-right: 3rem;
    position: relative
}

.user-profile-image img {
    border-radius: 100%;
    height: 12.5rem;
    width: 12.5rem
}

.user-profile-image-upload {
    background-color: #3b5998;
    border-radius: 100%;
    box-shadow: rgba(0, 0, 0, .5) 2px 2px 6px;
    cursor: pointer;
    left: -1rem;
    padding: 1rem;
    position: absolute;
    top: 0
}

.user-profile-image-upload form {
    position: relative
}

.user-profile-image-upload form input {
    border-radius: 100%;
    cursor: pointer;
    opacity: 0;
    left: -0.905rem;
    padding: 1rem;
    position: absolute;
    top: -0.905rem;
    width: 64px;
    z-index: 10
}

.user-display-name {
    font-weight: 800
}

.user-resumen {
    flex: 0 0 auto;
    padding: calc(1.5rem / 2);
    width: 25%
}

.user-dashboard {
    flex: 0 0 auto;
    padding: 0 calc(1.5rem / 2);
    width: 75%
}

.user-showcase {
    display: flex
}

.user-curso-actual {
    flex: 0 0 auto;
    padding: 0 calc(1.5rem / 2);
    width: 58.33%
}

.user-curso-tree {
    flex: 0 0 auto;
    padding: 0 calc(1.5rem / 2);
    width: 41.67%
}

.user-curso-tree .curso-list {
    overflow-y: auto
}

.user-social-links li {
    float: left;
    margin-right: 1rem
}

.user-achievements {
    align-items: center;
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 1rem;
    padding: 1rem
}

.user-achievements div {
    text-align: center
}

.user-achievements div span {
    margin-right: 1rem
}

.user-profesion {
    background-color: #002644;
    border-radius: .15rem .15rem .5rem .5rem;
    box-shadow: #000 0 -2px 3px;
    bottom: .5rem;
    padding: .5rem;
    position: absolute;
    text-align: center;
    width: 100%
}

.user-profesion::after,
.user-profesion::before {
    background-color: #002644;
    content: "";
    height: 40px;
    position: absolute;
    top: -0.7rem;
    width: 50%;
    z-index: -1
}

.user-profesion::after {
    clip-path: polygon(0% 0%, 75% 0%, 60% 50%, 75% 100%, 0% 100%);
    right: -55px
}

.user-profesion::before {
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 40% 50%);
    left: -55px
}

.user-profesion p {
    margin-bottom: 0
}

.temas-profesor {
    display: flex;
    justify-content: center;
    align-items: center
}

.temas-profesor li {
    border: 1px solid #fff;
    margin-right: 1rem;
    padding: .25rem
}

.temas-profesor li:last-child {
    margin-right: 0
}

@media(max-width: 480px) {
    .user-panel {
        display: flex;
        flex-direction: column
    }

    .user-profile-head {
        align-items: center;
        height: 350px;
        flex-direction: column;
        justify-content: center;
        margin-bottom: 1.5rem
    }

    .user-profile-body {
        flex-direction: column;
        gap: 1.5rem
    }

    .user-profile-links {
        text-align: center;
        margin: .5rem 0
    }

    .user-profile-image {
        margin-bottom: 1.5rem;
        margin-right: 0
    }

    .user-display-name {
        margin-bottom: .5rem !important
    }

    .user-resumen,
    .user-dashboard,
    .user-curso-actual,
    .user-curso-tree {
        width: 100%
    }

    .user-dashboard,
    .user-curso-actual,
    .user-curso-tree {
        padding: 0
    }

    .user-showcase {
        flex-direction: column;
        gap: 1.5rem
    }

    .user-achievements {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem 0 !important
    }
}

.btn {
    border-radius: 0 1rem 0 0
}

.btn:focus {
    box-shadow: none
}

.btn-register,
.btn-login,
.btn-cart {
    font-variant: all-petite-caps;
    letter-spacing: -0.05rem;
    text-decoration: none;
    transition: all 500ms ease-in-out
}

.btn-register {
    border: 1px solid #002644;
    color: #002644
}

.btn-register:hover {
    background-color: rgba(0, 38, 68, .5);
    border: 1px solid rgba(0, 38, 68, .5);
    color: #fff
}

.btn-login {
    background-color: #002644;
    color: #fff
}

.btn-login:hover {
    background-color: rgba(0, 38, 68, .5);
    color: #fff
}

.btn-cart {
    align-items: center;
    border: 1px solid #fff;
    color: #fff;
    display: flex;
    gap: .5rem;
    justify-content: center;
    width: 100%
}

.btn-cart:hover {
    background-color: #ced4da;
    border: 1px solid #ced4da;
    color: #002644
}

.btn-google,
.btn-facebook {
    color: #fff
}

.btn-google {
    background-color: #ea4335
}

.btn-facebook {
    background-color: #3b5998
}

.btn .badge {
    top: -10px
}

.btn-close:hover {
    color: #fff
}

.btn-favorito {
    color: #fff
}

.btn-favorito:hover {
    color: #ea4335
}

.btn-favorito .active {
    color: #dc3545
}

.btn-favorito .active:hover {
    color: #dc3545
}

.btn-link:focus {
    box-shadow: none
}

.btn-block {
    width: 100%
}

.afodemy-section {
    margin-bottom: 3rem;
    margin-top: 3rem
}

.afodemy-section-title {
    font-variant: small-caps;
    margin: 0
}

.afodemy-grid {
    align-items: center;
    display: grid;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem
}

.afodemy-grid-featured {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 25rem), 1fr))
}




.cross {
    padding: 10px;
    color: #0DCAF0;
    cursor: pointer;
    font-size: 23px
}

.cross i {
    margin-top: -5px;
    cursor: pointer
}

.comment-box {
    padding: 5px
}

.comment-area textarea {
    resize: none;
    border: 1px solid #0DCAF0
}

.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #ffffff;
    outline: 0;
    box-shadow: 0 0 0 1px #0DCAF0;
}

.send {
    color: #fff;
    background-color: #0DCAF0;
    border-color: #0DCAF0;
}

.send:hover {
    color: #fff;
    background-color: #0DCAF0;
    border-color: #0DCAF0
}

.rating {
    display: inline-flex;
    margin-top: -10px;
    flex-direction: row-reverse
}

.rating>input {
    display: none
}

.rating>label {
    position: relative;
    width: 28px;
    font-size: 35px;
    color: #0DCAF0;
    cursor: pointer
}

.rating>label::before {
    content: "\2605";
    position: absolute;
    opacity: 0
}

.rating>label:hover:before,
.rating>label:hover~label:before {
    opacity: 1 !important
}

.rating>input:checked~label:before {
    opacity: 1
}

.rating:hover>input:checked~label:before {
    opacity: 0.4
}
.cross {
    padding: 10px;
    color: #0DCAF0;
    cursor: pointer;
    font-size: 23px
}

.cross i {
    margin-top: -5px;
    cursor: pointer
}

.comment-box {
    padding: 5px
}

.comment-area textarea {
    resize: none;
    border: 1px solid #0DCAF0
}

.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #ffffff;
    outline: 0;
    box-shadow: 0 0 0 1px 0DCAF0;
}

.send {
    color: #fff;
    background-color: #0DCAF0;
    border-color: #0DCAF0
}

.send:hover {
    color: #fff;
    background-color: #0DCAF0;
    border-color: #0DCAF0
}

.rating {
    display: inline-flex;
    margin-top: -10px;
    flex-direction: row-reverse
}

.rating>input {
    display: none
}

.rating>label {
    position: relative;
    width: 28px;
    font-size: 35px;
    color: #0DCAF0;
    cursor: pointer
}

.rating>label::before {
    content: "\2605";
    position: absolute;
    opacity: 0
}

.rating>label:hover:before,
.rating>label:hover~label:before {
    opacity: 1 !important
}

.rating>input:checked~label:before {
    opacity: 1
}

.rating:hover>input:checked~label:before {
    opacity: 0.4
}
.afodemy-grid-top {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr))
}

.afodemy-grid-categories {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr))
}

.afodemy-grid-categories .afodemy-item {
    height: 15rem
}

.afodemy-grid-categories .afodemy-details-text {
    transform: translateY(0rem)
}

.afodemy-item {
    align-items: center;
    color: #fff;
    display: flex;
    height: 30rem;
    overflow: hidden;
    position: relative;
    transition: all 500ms ease;
    width: 100%
}

.afodemy-item:hover .afodemy-details-text {
    transform: translateY(0)
}

.afodemy-item:hover .afodemy-item-bg {
    transform: scale(1.1)
}

.afodemy-item-wrap {
    height: 100%;
    position: relative;
    width: 100%
}

.afodemy-item-bg {
    background-attachment: scroll;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    position: absolute;
    transition: all 500ms ease;
    width: 100%;
    z-index: 0
}

.afodemy-item-bg-color {
    background-color: rgba(0, 38, 68, .5);
    height: 100%;
    mix-blend-mode: luminosity;
    position: absolute;
    width: 100%;
    z-index: 1
}

.afodemy-details {
    height: 100%;
    padding: 1rem;
    position: absolute;
    width: 100%;
    z-index: 2
}

.afodemy-details-text {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    height: 100%;
    justify-content: flex-end;
    transition: all 500ms ease;
    transform: translateY(4.5rem);
    width: 100%
}

.afodemy-details-text h5 {
    margin: 0;
    text-align: center
}

.afodemy-details-text a {
    margin-top: 1.2rem
}

.afodemy-input-search input {
    border-radius: 2rem !important
}

.afodemy-tagline {
    color: #fff;
    position: relative;
    z-index: 2
}

.afodemy-tagline-picture {
    min-height: 10rem
}

.afodemy-tagline-deco {
    height: 100%;
    position: absolute;
    width: 100%
}

.afodemy-btn {
    background-color: #3b5998;
    color: #fff;
    font-variant: all-petite-caps;
    letter-spacing: -0.05rem;
    text-decoration: none;
    transition: all 500ms ease-in-out
}

.afodemy-btn:hover {
    background-color: rgba(59, 89, 152, .5);
    color: #fff
}

.afodemy-btn span .fa-stack-1x {
    color: #000
}

.afodemy-btn-group {
    display: flex;
    gap: .5rem
}

.afodemy-nav {
    color: #002644;
    font-variant: all-petite-caps;
    letter-spacing: -0.05rem;
    text-decoration: none;
    transition: all 500ms ease-in-out
}

.afodemy-nav.active,
.afodemy-nav:hover {
    background-color: rgba(59, 89, 152, .5) !important;
    color: #fff
}

.afodemy-modal {
    color: #002644 !important
}

.afodemy-modal .modal-content {
    background-color: rgba(0, 0, 0, .9);
    font-weight: 100
}

.afodemy-modal a {
    color: #fff;
    text-decoration: none
}

.afodemy-modal .btn-close {
    color: #ea4335;
    opacity: 1;
    text-decoration: none
}

.afodemy-modal .btn-close:hover {
    color: #dc3545
}

.afodemy-modal .tab-pane {
    margin: 0 auto;
    width: 50%
}

.afodemy-modal .afodemy-search {
    width: 50%
}

.afodemy-form {
    color: #002644 !important;
    padding: 0 1rem;
    margin: 1.5rem auto;
    width: 35%
}

.afodemy-search .btn-search {
    border-radius: 2rem 0 0 2rem
}

.afodemy-search .btn-search-mobile {
    border-radius: 2rem
}

.afodemy-wl,
.afodemy-cart,
.afodemy-alerts,
.afodemy-user-actions {
    position: relative
}

.afodemy-wl .dropdown-menu,
.afodemy-cart .dropdown-menu,
.afodemy-alerts .dropdown-menu,
.afodemy-user-actions .dropdown-menu {
    padding: .5rem 1rem !important;
    width: 20rem
}

.afodemy-wl .dropdown-menu li,
.afodemy-cart .dropdown-menu li,
.afodemy-alerts .dropdown-menu li,
.afodemy-user-actions .dropdown-menu li {
    display: flex;
    margin-bottom: .85rem
}

.afodemy-wl .dropdown-menu li:first-child,
.afodemy-wl .dropdown-menu li:last-child,
.afodemy-cart .dropdown-menu li:first-child,
.afodemy-cart .dropdown-menu li:last-child,
.afodemy-alerts .dropdown-menu li:first-child,
.afodemy-alerts .dropdown-menu li:last-child,
.afodemy-user-actions .dropdown-menu li:first-child,
.afodemy-user-actions .dropdown-menu li:last-child {
    margin-bottom: 0
}

.afodemy-wl .dropdown-menu li.divider,
.afodemy-cart .dropdown-menu li.divider,
.afodemy-alerts .dropdown-menu li.divider,
.afodemy-user-actions .dropdown-menu li.divider {
    display: inline !important
}

.afodemy-cart .btn-cart {
    flex-direction: column
}

.afodemy-loader {
    align-items: center;
    background-color: rgba(0, 0, 0, .8);
    display: flex;
    height: 100vh;
    justify-content: center;
    position: fixed;
    width: 100%;
    z-index: 3
}

.afodemy-loader-logo {
    height: 350px;
    width: 350px
}

.afodemy-loader-logo path,
.afodemy-loader-logo polygon {
    fill: none;
    stroke: #fff;
    stroke-width: .1rem;
    stroke-linecap: round
}

.afodemy-loader-logo path:nth-child(1) {
    animation: line-animation 4s ease alternate infinite .1s, fill-animation 2s ease alternate infinite .5s;
    stroke-dasharray: 301px;
    stroke-dashoffset: 301px
}

.afodemy-loader-logo path:nth-child(2) {
    animation: line-animation 4s ease alternate infinite .3s, fill-animation 2s ease alternate infinite .7s;
    stroke-dasharray: 257px;
    stroke-dashoffset: 257px
}

.afodemy-loader-logo path:nth-child(3) {
    animation: line-animation 4s ease alternate infinite .5s, fill-animation 2s ease alternate infinite .9s;
    stroke-dasharray: 341px;
    stroke-dashoffset: 341px
}

.afodemy-loader-logo path:nth-child(4) {
    animation: line-animation 4s ease alternate infinite .7s, fill-animation 2s ease alternate infinite 1.1s;
    stroke-dasharray: 341px;
    stroke-dashoffset: 341px
}

.afodemy-loader-logo path:nth-child(5) {
    animation: line-animation 4s ease alternate infinite .9s, fill-animation 2s ease alternate infinite 1.3s;
    stroke-dasharray: 324px;
    stroke-dashoffset: 324px
}

.afodemy-loader-logo path:nth-child(6) {
    animation: line-animation 4s ease alternate infinite 1.2s, fill-animation 2s ease alternate infinite 1.5s;
    stroke-dasharray: 413px;
    stroke-dashoffset: 413px
}

.afodemy-loader-logo path:nth-child(7) {
    animation: line-animation 4s ease alternate infinite 1.5s, fill-animation 2s ease alternate infinite 1.7s;
    stroke-dasharray: 248px;
    stroke-dashoffset: 248px
}

.afodemy-loader-logo polygon:nth-child(8) {
    animation: line-animation 4s ease alternate infinite .3s, fill-animation 2s ease alternate infinite .7s;
    stroke-dasharray: 340px;
    stroke-dashoffset: 340px
}

.afodemy-loader-logo polygon:nth-child(9) {
    animation: line-animation 4s ease alternate infinite .6s, fill-animation 2s ease alternate infinite 1s;
    stroke-dasharray: 540px;
    stroke-dashoffset: 540px
}

.afodemy-loader-logo polygon:nth-child(10) {
    animation: line-animation 4s ease alternate infinite .9s, fill-animation 2s ease alternate infinite 1.3s;
    stroke-dasharray: 250px;
    stroke-dashoffset: 250px
}

.afodemy-footer {
    display: flex
}

.afodemy-links {
    display: grid;
    flex: 0 1 80%;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    line-height: 2.5rem
}

.afodemy-languages {
    flex: 0 1 20%
}

.afodemy-copy {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 3rem 0
}

.afodemy-side-actions a {
    color: #002644
}

.afodemy-side-actions hr {
    background-color: #ea4335
}

.afodemy-side-actions .dropdown-item {
    color: #fff
}

.afodemy-side-actions .dropdown-item-detail {
    color: currentColor;
    padding: 0
}

.afodemy-side-actions .btn-cart {
    border: 1px solid #002644;
    color: #002644;
    width: 100%
}

.afodemy-side-actions .btn-cart:focus,
.afodemy-side-actions .btn-cart:active {
    background-color: #ced4da;
    border: 1px solid #ced4da;
    color: #002644
}

.afodemy-slide {
    display: grid;
    gap: .5rem;
    height: 19rem;
    overflow: auto
}

.afodemy-slide hr {
    background-color: #ea4335
}

.afodemy-slide .dropdown-item-detail {
    padding: 0
}

.afodemy-slide .dropdown-item-detail a {
    color: #002644
}

@media(min-width: 320px)and (max-width: 720px) {
    .afodemy-item {
        height: 15rem
    }

    .afodemy-item:active .afodemy-item-bg,
    .afodemy-item:focus .afodemy-item-bg {
        transform: scale(1.1)
    }

    .afodemy-item-bg {
        background-position: top center
    }

    .afodemy-details-text {
        transform: translateY(0)
    }

    .afodemy-footer,
    .afodemy-copy {
        flex-direction: column
    }

    .afodemy-links ul {
        text-align: center
    }
}

@media(max-width: 768px) {
    .afodemy-details-text {
        transform: translateY(0)
    }

    .afodemy-footer,
    .afodemy-copy {
        flex-direction: column
    }

    .afodemy-links ul {
        text-align: center
    }
}

.dropdown-menu {
    background-color: #002644;
    border: none;
    color: #fff
}

.dropdown-item {
    color: #fff
}

.dropdown-item:hover {
    background-color: #3b5998;
    color: #fff
}

.dropdown-item-detail {
    display: grid;
    font-size: .8rem;
    gap: .5rem;
    grid-template-columns: repeat(1, 1fr);
    width: 100%
}

.dropdown-item-detail a {
    display: grid;
    gap: .7rem;
    grid-template-columns: repeat(3, 1fr)
}

.dropdown-item-detail a img {
    grid-area: 1/1/2/2;
    height: 5rem;
    width: 5rem
}

.dropdown-item-detail a div {
    grid-area: 1/2/2/4
}

.dropdown-item-detail a p {
    margin: 0;
    white-space: normal
}

.dropdown-item-detail a .item-price {
    font-size: 1.05rem
}

.dropdown-item-profile {
    display: grid;
    font-size: 1.3rem;
    gap: .5rem;
    grid-template-columns: repeat(3, 1fr);
    width: 100%
}

.dropdown-item-profile img {
    grid-area: 1/1/2/2;
    height: 5rem;
    width: 5rem
}

.dropdown-item-profile div {
    grid-area: 1/2/2/4
}

.dropdown-item-profile p {
    margin: 0;
    white-space: normal
}

.dropdown-header {
    color: #adb5bd
}

.form-signin {
    width: 100%
}

.form-signin .btn {
    font-size: 80%;
    border-radius: 5rem;
    letter-spacing: .1rem;
    font-weight: bold;
    padding: 1rem;
    transition: all .2s
}

.form-floating input,
.form-floating select {
    border-radius: 2rem
}

.recover-password .form-signin {
    background-color: rgba(255, 255, 255, .75);
    color: #000;
    margin: auto;
    max-width: 330px;
    padding: 15px;
    width: 100%
}

.recover-password-link {
    color: #002644 !important
}

.recover-password-link:hover {
    color: #3b5998
}

.modal-content {
    background-attachment: scroll;
    background-position: none none;
    background-repeat: none;
    background-size: cover
}

.login-modal {
    background-image: url("/storage/img/bg/desola-lanre-ologun-zYgV-NGZtlA-unsplash.jpg")
}

.register-modal {
    background-image: url("/storage/img/bg/ali-yahya-V4BS2agsRYI-unsplash.jpg")
}

.afodemy-showcase {
    margin: auto;
    width: 100vw
}

.afodemy-glider {
    align-items: center;
    display: flex;
    height: 400px;
    margin: 0 0 3rem;
    overflow: hidden;
    scroll-behavior: smooth;
    width: 100%
}

.afodemy-glider-item {
    align-items: center;
    background-attachment: scroll;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    height: 250px;
    position: relative;
    transition: ease all 500ms;
    width: calc(100vw / 5)
}

.afodemy-glider-item:hover .curso-resumen {
    opacity: 1
}

.curso-resumen {
    align-items: center;
    background-color: rgba(0, 38, 68, .5);
    color: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-end;
    mix-blend-mode: luminosity;
    padding: 1.5rem;
    position: absolute;
    transition: all 500ms ease;
    width: 100%
}

@media(max-width: 767px) {
    .titulo-indicadores {
        justify-content: center
    }

    .afodemy-glider {
        height: 350px;
        margin: 1rem 0 3rem
    }

    .afodemy-glider-item {
        height: 350px;
        width: calc(100vw / 1)
    }

    .curso-resumen {
        height: auto;
        opacity: 1;
        padding: 20px 5px
    }

    .flecha-izquierda,
    .flecha-derecha {
        background: transparent;
        height: auto;
        padding: .5rem;
        top: 35px
    }
}

#videoBG,
#video-poster {
    position: fixed;
    top: 0;
    z-index: -1
}

#video-poster {
    background-color: rgba(0, 0, 0, .15);
    display: block;
    height: 100vh;
    width: 100%
}
.rate {
    float: left;
    height: 46px;
    padding: 0 10px;
}
.rate:not(:checked) > input {
    position:absolute;
    visibility: hidden;
}
.rate:not(:checked) > label {
    float:right;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:30px;
    color:#ccc;
}
.rate:not(:checked) > label:before {
    content: '★ ';
}
.rate > input:checked ~ label {
    color: #ffc700;
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: #deb217;
}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
    color: #c59b08;
}

/*# sourceMappingURL=style.css.map */