:root {
    --base-color: #181818;
    --main-color: orange;
    --secondary-color: #b87a23;
    --third-color: #007bff;
    --disable-color: #b3aeae;
}

.main-color-text {
    color: var(--main-color) !important;
}

.mt-20p {
    margin-top: 20vh;
}

.alert-bottom {
    position: fixed;
    bottom: 5px;
    left: 12%;
    width: 76%;
    z-index: 99;
}

.bottom_0 {
    bottom: 0;
}

.left_0 {
    left: 0;
}

.right_0 {
    right: 0;
}

.top_0 {
    top: 0;
}

.accountPanel {
    text-align: center;
    padding-top: 0.3em;
    padding-bottom: 1em;
}

.accountPanel a {
    font-size: 2em;
    margin-bottom: 0.8em;
}

.course_stain_container {
    height: 8vmin;
}

.course_stain_container > p {
    font-size: 12px;
}

.top_10_container {
    height: 7vmin;
}

.top_10_container > img {
    width: auto !important;
}

#loading {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#loading_veil {
    position: fixed;
    min-height: inherit;
    width: 100%;
    display: none;
    top: 0;
    left: 0;
    background-color: black;
    opacity: 0.5;
}

.loading_veil_carousel {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #fff;
    opacity: 0.8;
    z-index: 1;
}

.loading_carousel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 65% !important;
}

.backButton {
    font-size: 140%;
}

.margin-b-4 {
    margin-bottom: 4% !important;
}

.pad-3 {
    padding: 3% !important;
}

.opacity-0 {
    opacity: 0 !important;
}

.opacity-20 {
    opacity: 0.2 !important;
}

.opacity-100 {
    opacity: 100 !important;
}

.top-94 {
    top: 94% !important;
}

.accountPanelInformation {
    border-left: 3px solid #e3bf42;
}

.panelSelected {
    display: initial !important;
}

.panelAccount {
    display: none;
}

.buttonSelected {
    color: #e3bf42 !important;
}

form[name='create_user'] input {
    margin-bottom: 10px;
}

.error {
    color: red;
}

.custom-control-input:checked~.custom-control-label::before {
    border-color: #e3bf42;
    background-color: #e3bf42;
}

@media (max-width: 769px) {
    .accountPanelInformation {
        border-top: 3px solid #e3bf42;
        padding-top: 1.3em;
    }
}

.course-overlay {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.course-carousel {
    transition: all .12s ease-in-out;
}

.carousel_course_buttons_container {
    height: 100%;
    width: 30px;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    transition: height width 1s ease;
}

.course-carousel .volume_button_carousel,
.thumbs_button_carousel.thumbs_up_button,
.thumbs_button_carousel.thumbs_down_button {
    background-color: #00000082;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15px;
    height: 15px;
    cursor: pointer;
    border-radius: 50%;
    border: 1px solid transparent;
}

.thumbs_button_carousel{
    transition: opacity 0.5s ease, height 0.5s ease;
}

.thumbs_empty, .thumbs_selected{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.course-carousel .div_multimedia {
    transform-style: preserve-3d;
}

.course-carousel .div_multimedia>video {
    opacity: 0;
    top: 49%;
    transform: translateY(-49%);
}

.owl-item {
    margin-bottom: 15px !important;
}

/*********  Start Carousel zoom effect *********/
@media (min-width: 1200px) {
    .container-courses {
        display: flex;
        margin-top: 50px;
    }

    .container-courses .item-courses {
        position: relative;
        display: block;
        flex: 1 1 0;
        margin-bottom: 5vh;
        transition: transform 300ms;
        transition-delay: 0.15s;
    }

    .container-courses:focus-within .item-courses,
    .container-courses:hover .item-courses {
        transform: translateX(-25%);
    }

    .container-courses .item-courses:focus~.item-courses,
    .container-courses .item-courses:hover~.item-courses {
        transform: translateX(25%);
    }

    .container-courses .item-courses:focus,
    .container-courses .item-courses:hover,
    .section-results   .item-courses:focus,
    .section-results   .item-courses:hover {
        transform: scale(1.5);
        z-index: 999;
    }

    .container-courses .item-courses img,
    .container-courses .item-courses video {
        display: block;
        max-width: 100%;
    }

    .container-courses .svg_button_carousel svg, .cards .svg_button_carousel svg {
        fill: #fff;
        height: 8px;
        width: 8px;
    }
}
/*********  End Carousel zoom effect *********/

/*********  Start Carousel zoom effect *********/
@media (min-width: 1200px) {
    .container-courses-comprar {
        display: flex;
        margin-top: 50px;
    }

    .container-courses-comprar .item-courses {
        position: relative;
        display: block;
        flex: 1 1 0;
        margin-bottom: 5vh;
        transition: transform 200ms;
        transition-delay: 0s;
    }

    .container-courses-comprar:focus-within .item-courses,
    .container-courses-comprar:hover .item-courses {
        transform: translateX(-11%);
    }

    .container-courses-comprar .item-courses:focus~.item-courses,
    .container-courses-comprar .item-courses:hover~.item-courses {
        transform: translateX(11%);
    }

    .container-courses-comprar .item-courses:focus,
    .container-courses-comprar .item-courses:hover {
        transform: scale(1.2);
        z-index: 999;
    }

    .container-courses-comprar .item-courses img,
    .container-courses-comprar .item-courses video {
        display: block;
        max-width: 100%;
    }

    .container-courses-comprar .svg_button_carousel svg {
        fill: #fff;
        height: 8px;
        width: 8px;
    }
}
/*********  End Carousel zoom effect *********/

.pointer_events_none {
    pointer-events: none;
}

.owl-prev,
.owl-next {
    width: 40px;
    height: 100%;
    position: absolute;
    top: 0;
    background: rgba(0, 0, 0, 0.3) !important;
    display: block !important;
    border: 0 solid black !important;
}

.owl-stage-outer {
    padding: 10px;
}

.owl-prev {
    left: -20px;
}

.owl-next {
    right: -20px;
}

.owl-prev i,
.owl-next i {
    transform: scale(2, 2);
    color: #fff;
}

.owl-carousel:hover .owl-prev,
.owl-carousel:hover .owl-next {
    background: rgba(0, 0, 0, 0.6) !important;
}

.width-course {
    width: 480px;
}

.carousel-title {
    font-family: "Barlow Semi Condensed", sans-serif;
    font-weight: bold;
    margin-bottom: 1em;
}

.carousel-title-regular {
    font-family: "Barlow", sans-serif;
    font-weight: bold;
    margin-bottom: 1em;
}

body {
    background-color: #141414 !important;
}

.section-destacado {
    background-image: url("../../images/fondo_destacado.webp");
}

.object-fit-contain {
    object-fit: contain;
}

.max-height-300px {
    max-height: 300px;
}

.scale-103 {
    transform: scale(1.03);
}

.max-height-400px {
    max-height: 400px;
}

.proximamente_vertical {
    height: 432px;
    object-fit: cover;
}

.section-clientes {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 20px;
    background-color: #FFF;
}

.section-clientes-title {
    text-align: center;
    position: relative;
    top: 35px;
    margin-bottom: 45px;
}

img.navbar-logo-empresa {
    height: 59px !important;
    object-fit: contain;
}

div.navbar-logo-empresa {
    max-width: 70% !important;
}

.flex-direction-unset {
    flex-direction: unset;
}

.h-10 {
    height: 10% !important;
}

.min-h-10 {
    min-height: 10% !important;
}

.h-90 {
    height: 90% !important;
}

.w-90{
    width: 90% !important;
}

img.navbar-logo-bySmartly {
    height: 25px !important;
}

.basic-cover {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.basic-contain {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.section-results,
.section-results+.course-details {
    margin-top: 15vmin;
}

.max-width-550px {
    max-width: 550px !important;
}

.max-width-800px {
    max-width: 800px !important;
}

.questionTitle legend {
    max-width: 100% !important;
}

.questionAnswer div div {
    padding: 0 !important;
}

.questionAnswer span.select2.select2-container {
    width: 100% !important;
}

.fsize-18 {
    font-size: 18px;
}

h1.resp-header {
    font-size: calc(18px + 2.4vw);
}

.active {
    color: var(--main-color) !important;
}

a.quiet-link {
    line-height: 1.3rem !important;
    color: #d2d2d2;
}

.div-center {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    display: block;
}

.vmin-3 {
    font-size: calc(5px + 2.5vmin * 0.8) !important;
}

p.vmin-3 {
    font-size: calc(3px + 2.5vmin * 0.8) !important;
}

.barra-naranja {
    background-color: var(--main-color);
    color: white;
    font-size: 24px;
    font-weight: bold;
    line-height: 30px;
}

@media (max-width: 430px) {
    .barra-naranja {
        font-size: 18px;
    }
}

@media (max-width: 330px) {
    .barra-naranja {
        font-size: 16px;
    }
}

p.text-align-center {
    text-align: center;
}

.btn-smartly {
    color: white;
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.btn-smartly:hover {
    color: white;
    background-color: #f3b600;
    border-color: #f3b600;
}

.btn-smartly.focus,
.btn-smartly:focus {
    color: white;
    background-color: #f3b600;
    border-color: #f3b600;
    box-shadow: 0 0 0 1px rgb(238, 182, 0);
}

.btn-smartly:not(:disabled):not(.disabled).active,
.btn-smartly:not(:disabled):not(.disabled):active,
.show>.btn-warning.dropdown-toggle {
    color: white;
    background-color: #f3b600;
    border-color: #f3b600;
}

footer.footer-bottom {
    position: absolute !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 0 !important;
}

.content-wrapper {
    padding-bottom: 2rem !important;
}

#page-container {
    position: relative !important;
    min-height: 100vh !important;
    width: 100%;
}

.z-index-1 {
    z-index: 1;
}

.z-index-2 {
    z-index: 2;
}

/* ------- PASSWORD STRENGTH METER ------- */
meter {
    margin: 0 auto 1em;
    width: 100%;
    height: 0.5em;

    /* Applicable only to Firefox */
    background: none;
    background-color: rgba(0, 0, 0, 0.1);
}

meter::-webkit-meter-bar {
    background: none;
    background-color: rgba(0, 0, 0, 0.1);
}

/* Webkit based browsers */
meter[value="1"]::-webkit-meter-optimum-value {
    background: red;
}

meter[value="2"]::-webkit-meter-optimum-value {
    background: orange;
}

meter[value="3"]::-webkit-meter-optimum-value {
    background: lawngreen;
}

meter[value="4"]::-webkit-meter-optimum-value {
    background: green;
}
/* ------- END OF PASSWORD STRENGTH METER ------- */

@media (max-width: 991px) {
    div.mi-cuenta-image {
        display: none;
    }
}

div.background-image {
    background-size: cover;
    background-position: center;
}

/* -------- SPEECH BUBBLES -------- */
.exam_previous{
    font-family: 'Barlow Condensed';
    font-size: 1.3rem;
}

.exam_review {
    font-family: 'Barlow Condensed';
    font-size: calc(5px + 2vmin);
}

.exam_review > .container > div:nth-child(1) > div:nth-child(1) .speech_bubble > div:nth-child(2) > *:nth-child(1){
    color: white;
    font-style: italic;
    margin: 0 !important;
    margin-bottom: .5rem !important;
}

.exam_previous .speech_bubble{
    border-radius: 500px;
    padding: 35px;
}

.exam_review .speech_bubble {
    width: 75%;
    border-radius: 500px;
    padding: 50px;
}

.exam_review .speech_bubble p{
    color: white;
}

.exam_previous .speech_bubble_corner {
    height: 8vmin;
    width: 50%;
}

.exam_previous .speech_bubble_corner_left_side{
    margin-right: auto;
}

.exam_previous .speech_bubble_corner_right_side {
    margin-left: auto;
}

.exam_previous .speech_bubble_corner_left_side svg {
    height: 100%;
    transform: rotate(90deg);
    float: right;
    margin-right: -0.5%;
}

.exam_previous .speech_bubble_corner_right_side svg {
    height: 100%;
    float: left;
}

.exam_previous .ready_speech_bubble_corner svg path {
    fill: #5dccd7;
}

.exam_previous .try_speech_bubble_corner svg path {
    fill: #0895be;
}

.exam_previous .cheering_up_speech_bubble_corner svg path {
    fill: #0768a6;
}

.exam_previous .exam_passed_speech_bubble_corner svg path{
    fill: #28a745;
}

.exam_review .correct_answer {
    background-color: #1da83e;
    margin-left: auto;
}

.exam_review .unselected_answer {
    background-color: #ffa600;
    margin-right: auto;
}

.exam_review .wrong_answer {
    background-color: #de3141;
    margin-right: auto;
}

.exam_review .try_again_speech_bubble_corner svg,
.exam_review .result_speech_bubble_corner svg,
.exam_review .time_to_review_speech_bubble_corner svg,
.exam_review .not_better_speech_bubble_corner svg,
.exam_review .max_mark_speech_bubble_corner svg {
    height: 100%;
    transform: rotate(270deg);
}

.exam_review .not_better_speech_bubble_corner {
    height: 8vmin;
    width: 100%;
    margin-left: -1px;
}

.exam_review .max_mark_speech_bubble_corner {
    height: 5vmin;
    width: 100%;
    margin-left: -1px;
}

.exam_review .not_better_speech_bubble_corner svg path,
.exam_review .max_mark_speech_bubble_corner svg path {
    fill: #00a7c2;
    stroke: #00a7c2;
}

.exam_review .time_to_review_speech_bubble_corner {
    height: 5vmin;
    width: 75.1%;
    margin-left: auto;
}

.exam_review .time_to_review_speech_bubble_corner svg path {
    fill: #00a7c2;
    stroke: #00a7c2;
}

.exam_review .try_again_speech_bubble_corner {
    height: 5vmin;
    width: 50.1%;
    margin-left: auto;
}

.exam_review .try_again_speech_bubble_corner svg path {
    fill: #70d7b3;
    stroke: #70d7b3;
}

.exam_review .result_speech_bubble_corner {
    height: 9vmin;
    width: 100%;
    margin-left: -1px;
}

.exam_review .result_speech_bubble_corner svg path {
    fill: #ef6814;
    stroke: #ef6814;
}

.exam_review .correct_answer_speech_bubble_corner {
    height: 8vmin;
    width: 100%;
    margin-right: -1px;
}

.exam_review .unselected_answer_speech_bubble_corner,
.exam_review .incorrect_answer_speech_bubble_corner {
    height: 8vmin;
    width: 75%;
    margin-right: auto;
}

.exam_review .correct_answer_speech_bubble_corner svg,
.exam_review .unselected_answer_speech_bubble_corner svg,
.exam_review .incorrect_answer_speech_bubble_corner svg {
    position: absolute;
    top: 1px;
    right: 0px;
    height: 100%;
    transform: rotate(180deg);
}

.exam_review .correct_answer_speech_bubble_corner svg path {
    fill: #1da83e;
    stroke: #1da83e;
}

.exam_review .unselected_answer_speech_bubble_corner svg path {
    fill: #ffa600;
    stroke: #ffa600;
}

.exam_review .incorrect_answer_speech_bubble_corner svg path {
    fill: #de3141;
    stroke: #de3141;
}

.indicator {
    content: '';
    position: absolute;
    top: -4px;
    right: -4px;
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 100%;
    background-color: #ef172c;
    animation: .9s infinite beatHeart;
    transform-origin: center;
}

@keyframes beatHeart {
    0% {
        transform: scale(0.9);
    }
    25% {
        transform: scale(1.1);
    }
    40% {
        transform: scale(0.9);
    }
    60% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(0.9);
    }
}
.notification {}

.notification-dropdown {
    min-width: 320px;
}

.notification-dropdown,
.connection-dropdown,
.nav-user-dropdown {
    padding: 0px;
    margin: 0px;
}

.notification-title {
    font-size: 14px;
    color: #ffffff;
    text-align: center;
    padding: 8px 0px;
    border-bottom: 1px solid #2f2f2f;
    line-height: 1.5;
    background-color: #161616;
}

.notification-list {}

.notification-list .list-group-item {
    border-radius: 0px;
    padding: 12px;
    margin-top: -1px;
    border-left: transparent;
    border-right: transparent;
    background-color: #161616;
}

.notification-list .list-group-item.active {
    z-index: 2;
    font-weight: bold;
    color: #3d405c;
    background-color: #161616;
    border-color: #2f2f2f;
}

.notification-list .list-group-item-action:focus,
.list-group-item-action:hover, .list-group-item.active:hover {
    color: #404040;
    text-decoration: none;
    background-color: #2d2d2d;
}

.notification-list .list-group-item:last-child {}

.notification-info {}

.notification-info .notification-date {
    display: block;
    font-size: 11px;
    margin-top: 4px;
    text-transform: uppercase;
    color: #71748d;
}

.notification .dropdown-toggle::after,
.connection .dropdown-toggle::after,
.nav-user .dropdown-toggle::after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border: none;
}

.notification-list-user-img {
    float: left;
}

.notification-list-user-block {
    padding-left: 50px;
    font-size: 14px;
    line-height: 21px;
}

.notification-list-user-name {
    color: #5969ff;
    font-size: 14px;
    margin-right: 8px;
}

.list-footer,
.conntection-footer {
    font-size: 14px;
    color: #fff;
    text-align: center;
    padding: 10px 0px;
    line-height: 1.5;
    font-weight: 700;
    background-color: #FFA500;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.list-footer a,
.conntection-footer a {
    color: #fff;
}

.list-footer a:hover,
.conntection-footer a:hover {
    color: #fff;
}

p.video-card {
    line-height: 2.4vh;
    font-size: calc(7px + 0.9vmin) !important;
}

.video-card-title {
    font-size: calc(8px + 0.8vmin) !important;
}

.fa {
    font-family: 'Font Awesome\ 5 Free' !important;
}
.btn.btn-google {background:#ffffff; border-color: #ffffff; color: #232323}
.btn.btn-google:hover, .btn.btn-google:focus {background: #e3e3e3; color: #232323}

.btn.btn-ulpgc {background:#002F67; border-color: #002F67; color: #FFFFFF}
.btn.btn-ulpgc:hover, .btn.btn-ulpgc:focus {background: #002452; color: #FFFFFF}

header nav.navbar.white-link .navbar-nav > li > span:hover, nav.navbar.bootsnav.white-link ul.nav > li > span:hover { color: rgba(255,255,255,0.6) !important;}
header nav.navbar.white-link .header-social-icon span:hover, nav.navbar.bootsnav.white-link .header-social-icon span:hover { color: rgba(255,255,255,0.6) !important;}
@media (max-width: 991px) {
    .navbar-nav li > span, nav.navbar.navbar-default ul.nav > li > span, header .navbar-nav li > span {
        margin: 0 !important;
        padding: 9px 15px 8px !important;
        display: block !important;
        line-height: normal !important;
    }
}
.footer-bottom span:hover, span:active{color: var(--main-color); text-decoration: none;}
.wow.fadeInUp.enlace-color  span:hover, span:active{color: var(--main-color); text-decoration: none;}
.wow.fadeIn.enlace-color  span:hover, span:active{color: var(--main-color); text-decoration: none;}

.social-icon-style-8 span:hover { color: #ff214f !important;}



.changeActiveButton {
    background: transparent !important;
    border-color: #e3bf42 !important;
    color: #e3bf42 !important;
}
@media (max-width: 420px) {
    .changeDisplay {
        display: block !important;
    }
    .changeWidth {
        width: 100% !important;
    }
    .changeMargin {
        margin-top: 2% !important;
    }
}

.simple-dropdown .dropdown-menu > li > span {font-size: 12px; color: #9d9d9d; }
nav.navbar.navbar-default ul li.dropdown .dropdown-menu li > span:hover  {color: #fff; background:  transparent; position: relative; left: 5px !important; }

.enlaceBlog {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}
.privacy-policy td:nth-child(1){
    width: 40%;
}

.privacy-policy td:nth-child(2){
    width: 60%;
}
/* ---- ----- ----- video slider tipo netflix ----- ----- ----- */
.video-principal {
    font-size: 16px;
    min-height: 28.62em;
    color: white;

}

.video-principal .contenedor {
    margin: 0 auto;
    margin-bottom: 6.25em;
}

.video-principal .titulo {

    font-weight: 800 !important;
    font-size: 3.12em !important;
    margin-bottom: 0.4em;
    visibility: inherit;
    transition: none 0s ease 0s;
    color: #fff;
    opacity: 1;
    box-shadow: rgb(153, 153, 153) 0px 0px 0px 0px;
    padding-right: 50%;
}

.boton {

    background: rgba(0,0,0, 0.5) !important;
    border: none;
    border-radius: 0.31em !important;
    padding: 0.93em 1.87em;
    color: #fff;
    margin-right: 1.25em;
    cursor: pointer;
    transition: .3s ease all;
    font-size: 1.12em;
}

.boton:hover {
    background: #fff;
    color: #000;
}

.boton i {
    margin-right: 1.25em;
}

/* ---- ----- ----- Media Queries video slider tipo netflix ----- ----- ----- */
@media screen and (max-width: 800px) {

    .video-principal .titulo {
        display: none;    }

    .dNone{
        display: none !important;
    }
    .video-dispositive{
        max-height: 220px !important;
    }
}
.main_veil {
    position: absolute;
    min-height: inherit;
    width: 100%;
    top: 0;
    left: 0;
    height:100%;
    background-color: black;
    opacity: 0.5;
    z-index: 10;
}

@media (max-width: 576px){
    .exam_previous .speech_bubble{
        padding: 15px;
    }

    .exam_previous .speech_bubble p{
        font-size: calc(10px + 1.2vmin);
        line-height: 15px;
    }
}