html, body {
    margin: 0;
    padding: 0;
    background: #fff;
    font-family: 'Raleway', sans-serif;
    color: #404041;
    height: 100%;
}

strong{
    font-family: 'Raleway';
    font-weight: 700;
}

h2 strong{
    font-family: 'Montserrat';
    font-weight: 700;
}

main {
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    background: no-repeat;
}
.text-center{text-align:center;}
.text-left{text-align:left;}
.text-right{text-align:right;}

.accordion-button {
  color: #404041;
}

/*
    HEADERS
*/

header {
    float: left;
    background: #f3f3f3;
    width: 100%;
    height: auto;
	padding:10px;
    position: relative;
    display: flex;
	margin-top:75px;
}

    header #logo {
        margin: 0px 0 5px 25px;
    }

        header #logo img {
            width: 90px;
        }

    header #logo-right {
        margin: 10px 25px 5px 0px;
    }

        header #logo-right img {
            width: 150px;
        }

    header .titles-container {
        width: 100%;
        margin: 0px 0px 0px 25px;
        align-items: flex-end;
		text-align:center;
        display: grid;
    }

        header .titles-container > div {
            display: inline-flex;
			text-align:center;
            margin: auto;
        }

        header .titles-container p {
            margin: 0px;
            font-size: 20px;
        }

            header .titles-container p.course-title {
                font-weight: 300;
                color: #e32b36;
                margin-right: 5px;
            }

            header .titles-container p.course-module-title {
                font-weight: 700;
                color: #868686;
                letter-spacing: 0.025em;
            }

            header .titles-container p.course-lesson-title {
                margin: -10px auto 20px auto;
                font-size: 16px;
                font-weight: 300;
                height: auto;
				min-height:16px;
				display:none;
            }


/*
    SECTIONS
*/

section {
    font-size: 28px;
    float: left;
    height: 486px;
    width: 100%;
    position: relative;
    color: #333;
    overflow: hidden;
    background-color: #fff;
}

    section #lessonContentDiv {
        font-size: 16px;
		line-height:20px;
        overflow: hidden;
        height: 100%;
        background-position: bottom right !important;
        background-repeat: no-repeat !important;
        background-color: #fff;
		
    }

    #buttonsNav #nextArrowDiv {
        position: absolute;
        right: 0px;
        bottom: 0px;
        padding: 0px 25px;
        width: 270px;
        vertical-align:middle;
        background: transparent;
        z-index: 999;
        display: inline-block;
        font-size: 16px;
    }

        #buttonsNav #nextArrowDiv img {
            width: 40px;
            position: relative;
            ;
        }

/*
    BUTTONS
*/
nav {
    background: #ffffff;
    border-top: 5px solid #fff;
    float: left;
    padding: 5px 24px;
    width: 980px;
    height: 75px;
    box-sizing: border-box;
    position: absolute;
	top:0;
}

.navigation-button {
    float: left;
    width: 42px;
    height: 42px;
    display: block;
    -moz-border-radius: 22px;
    -webkit-border-radius: 22px;
    -khtml-border-radius: 22px;
    border-radius: 22px;
    -webkit-transition: background-color 0.5s;
    transition: background-color 0.5s;
	background-color:#919191 !important;
	cursor:pointer;
}

    .navigation-button:hover {
        background-color: #e32b36 !important;
    }

.button-back {
    background: url(../img/button-back.png) no-repeat;
    margin-right: 7px;
}

.button-mute {
    background: url(../img/button-mute.png) no-repeat;
}

    .button-mute.muted {
        background-color: #e32b36 !important;
    }

.button-help {
    background: url(../img/button-help.png) no-repeat;
    margin-right: 7px;
}

.button-forward {
    background: url(../img/button-next.png) no-repeat;
}

#progressBar {
    float: left;
    background: #fff;
    height: 43px;
    margin-left: 92px;
    /*margin-right:43px;*/
    margin-right: 0px;
    width: 572px;
    -moz-border-radius: 22px;
    -webkit-border-radius: 22px;
    -khtml-border-radius: 22px;
    border-radius: 22px;
}

    #progressBar .inner {
        padding: 13px;
    }

#progress {
    float: left;
    background: #e32b36;
    height: 17px;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
    -moz-border-radius-topleft: 8px;
    -moz-border-radius-bottomleft: 8px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

    #progress.completed {
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
    }

#bar {
    float: right;
    background: #dfdfdf;
    height: 17px;
    -webkit-border-top-right-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    -moz-border-radius-topright: 8px;
    -moz-border-radius-bottomright: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

#progressPageSpan {
    width: 86px;
    text-align: center;
    font-size: 18px;
    padding-top: 8px;
    color: #919191;
    float: left;
}

/* bloques */
.row img{max-width:100%;}
.bold{font-weight:bold;}
.titulo{font-family: 'Ubuntu',Arial;color:#000;font-weight:bold;font-size:28px;line-height:33px;}
.subtitulo{font-family: 'Ubuntu',Arial;color:#333333;font-size:23px;line-height:28px;font-weight:normal;opacity:0;}
#titulo2{color:#3a777f;color:#3a777f;}
.bloque{opacity:0;width:609px;margin:auto;top:0px;padding:20px 60px;color:#FFF;position:relative;float:none;}
.bloque-50{width:371px;}
.verde{background:#3a777f;color:#fff;}
.naranja{background:#f7a600;color:#fff;}
.radius-5{border-radius:5px;}
.radius-10{border-radius:10px;}
.radius-20{border-radius:20px;}
.link{cursor:pointer;}
.acordeon{padding-right:0px;}

.acordeon .title-content{ padding:5px;font-size:13px;line-height:15px;}
.acordeon .content{padding: 10px;background-color:#fff;opacity:0; -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear}
.acordeon .content.active{opacity:1;}
.acordeon .content ul{margin:0;padding:0;list-style:inside;margin-bottom:10px;}
.acordeon .content p{margin:0;}
.hidden{opacity:0;}
#avatar{transition:opacity .25s linear;}
.flecha{cursor:pointer;    -webkit-transition: background-image 0.5s;transition: background-image 0.5s;}
.bloque.flecha{padding-right:40px;margin-top:20px;}
.flecha::before{    background: url(../img/ArrowExpand.png) no-repeat;content: '';position: absolute;right: 10px;height: 55px;top: 16px;background-size: contain;width: 32px;padding: 12px;}
.flecha.active::before{background-image: url(../img/ArrowCollapse.png);} 
.indice{display:table;}
.indice > img{max-width:60px;padding-left:15px;}
.indice > *{display:table-cell;vertical-align:middle;text-align:left;padding:0 15px 0 0;font-weight:700;}
.blinked{opacity:1;-webkit-transition: opacity 0.5s;transition: opacity 0.5s;}
.hiddenblink{opacity:0;-webkit-transition: opacity 0.5s;transition: opacity 0.5s;}
.transparent-link{text-transform:uppercase;font-weight:bold;}



/* YES-NO */
.question-container{display:table;margin:15px 0;}
.question-container > div{ display:table-cell;vertical-align:middle;margin:0 15px;float:none !important;}
.questions .question{ position:relative;top:0px;padding:10px;margin-bottom:10px;float:left;width:75%;color:#fff;border-radius:5px;background:url(../img/WhiteCheck.png) #7dc1b2 no-repeat 7px;padding-left:30px;}
.questions .answer{ float:left;width:140px;margin-left:15px;opacity:0; }
.questions .answer span{ width:40px;color:#fff;text-align:center;display:inline-block;margin:0 15px;vertical-align:middle;background-color:#61c2ef;padding:10px;border-radius:40px;cursor:pointer;}
.questions .answer span.selected{background-color:green;}
.questions .answer span.error{background-color:red;}
/* YES-NO */
/*
    TEST MODE
*/
body.test-mode nav > .button-forward{
    pointer-events: none;
}

body.test-mode.can-forward nav > .button-forward {
    pointer-events: all;
}

a.answer {
    text-decoration: none;
}

    a.answer:hover {
        text-decoration: none;
    }

    a.answer div {
        border: solid 2px rgba(186, 42, 56, 0);
        padding: 5px 10px;
        font-size: 14px !important;
    }

    a.answer.selected div {
       /* border: solid 2px rgba(186, 42, 56, 1);*/
    }

/*
    INDEX
*/
.row.index-contents {
    margin-left: 35px !important;
    margin-right: 35px !important;
    margin-top: 70px;
}
.row .module-index{ margin-bottom:15px; }
    .row.index-contents .module-index h3 {
        font-size: 19px;
        font-weight: 300;
        color: #e32b36;
        margin-bottom: 0px;
        margin-top: 5px;
    }

    .row.index-contents .module-index h4 {
        font-size: 13px;
        font-weight: 700;
        color: #868686;
        letter-spacing: 0.025em;
        margin: 0px;
    }

    .row.index-contents .module-index ol {
        font-size: 12px;
        margin-top: 0px;
        color: #868686;
        padding-left: 12px;
        font-weight: 300;
    }

        .row.index-contents .module-index ol li.selected,.row.index-contents .module-index h4.selected {
            font-weight: 700;
            color: #e32b36;
        }

/*
    VIDEO
*/
div.video-container {
    width: auto;
	max-width:815px;
    height: 100%;
	display:grid;
    margin:auto;
    position: relative;
	
    opacity: 1;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
}

div.video-container.active {
    opacity: 1;
}

    div.video-container > div {
        margin: 0;
        width: auto !important;
        border: none;
    }
div.video-container iframe{ margin:auto; max-width:100%;}
.plyr--video .plyr__control.plyr__tab-focus, .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded=true] {
    background-color: #e32b36 !important;
}

.plyr__control--overlaid {
    background-color: #e32b36 !important;
    opacity: 1;
}

.plyr--full-ui input[type=range] {
    color: #e32b36 !important;
}

.plyr audio, .plyr video {
    width: auto !important;
    height: 450px !important;
    border: solid 1px #dcdcdc;
}

.plyr__video-wrapper {
    background: #fff !important;
}
/* * */

.title {
    width: fit-content;
    padding: 15px 20px;
    position: absolute;
	font-family:'Ubuntu',Arial;
	font-size:16px;
	color:#999999;
}
#description.title{color:#f7a600;font-weight:bold;font-size:18px;line-height:20px;}

    .title * {
        margin: 0;
    }

.red-title {
    background-color: rgba(132, 200, 188, .8);
    color: #fff;
    border-radius: 15px;
}

    .red-title.no-transparency {
        background-color: rgba(132, 200, 188, 1);
    }

.white-title {
    background-color: rgba(255, 255, 255, .9);
    color: #000;
    border-radius: 15px;
}

.whitesmoke-title {
    background-color: rgba(243, 243, 241, .8);
    color: #000;
    border-radius: 15px;
}

    .whitesmoke-title.no-transparency {
        background-color: rgba(243, 243, 241, 1);
    }

.shadow-title {
    box-shadow: -1px 1px 1px 2px #ccc;
    padding: 10px 20px;
}

/*
    OTHER PAGES
*/
.test-presentation-title {
    font-size: 50px;
    text-align: center;
    font-weight: 700;
    width: 100%;
    color: #e32b36;
}

.test-presentation-subtitle {
    font-size: 28px;
    font-weight: 100;
    color: #868686;
    text-align: center;
    width: 100%;
    line-height: 36px;
}
/* TRIVIAL */
.styled_div div{background:url(../img/check.png) no-repeat center left;padding-left:30px;} 
.styled_div div.white{background:url(../img/WhiteCheck.png) no-repeat center left;padding-left:30px;color:#fff;} 
.trivial-game{font-family: 'Ubuntu', sans-serif;}
a.answer.selected > div{ background:#377780;color:#fff;}
.highcharts-background{fill:transparent;}
.highcharts-color-0 {
  fill: #62c2d5;
  stroke: #62c2d5;
}
.highcharts-color-1 {
  fill: #7cb5ec;
  stroke: #7cb5ec;
}
.highcharts-color-2 {
  fill: #7cb5ec;
  stroke: #7cb5ec;
}
.highcharts-color-3 {
  fill: #60b245 ;
  stroke: #60b245 ;
}
.highcharts-color-4 {
  fill: #f6a500;
  stroke: #f6a500;
}
.highcharts-color-5 {
  fill: #7cb5ec;
  stroke: #7cb5ec;
}
/* TITULO */

.titulo{text-transform:uppercase;}


/* POPUP */
.popup-link{transition: all 0.5s;-webkit-transition:all 0.5s;}
.popup-link.visited:after{content:'';background:url(../img/ReadCheck.png) no-repeat top center;position: absolute;background-size: cover;top: -22px;width: 50px;height: 50px;left: -webkit-calc(50% + 10px);}
.popup-link img{max-width:68px;}
.popup-content{width:90%;height:444px;position:absolute;background-color:rgba(134,193,211,0.9);display:none;top:19px;left:5%;color:#fff;padding:25px;}
.popup-content.full{width:100%;height:100%;top:0;left:0;padding:0;}
.popup-content.full .close{top:0;right:0;}
.popup-content .close{background-color: #fff;opacity: 1;font-size: 14px;width: 20px;height: 20px;border-radius: 20px;text-align: center;font-weight: normal;position: absolute;right: 15px;top: 15px;padding: 3px;}
.popup-content ol{ overflow:auto;height:310px;padding:0px;}
.popup-content ol::-webkit-scrollbar {
    width: 2px;     /* Tamaño del scroll en vertical */
    height: 2px;    /* Tamaño del scroll en horizontal */
	background:red;
}
/* Track */
.popup-content ol::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
.popup-content ol::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
.popup-content ol::-webkit-scrollbar-thumb:hover {
  background: #555;
}
.popup-content .llavero-title{background:url('../img/llavero_activo.png') no-repeat top center;padding: 56px 0 0 0;margin-top: 0px;margin-bottom: 15px;}
.popup-content ol li,.popup-content ul li{ margin-bottom:12px;list-style-position:inside;text-align:justify;padding:0 15px;}

/* BLINK TEXT */

.blink{transition:all 0.5s linear;opacity:0;}


@media print
{
	#buttonsNav,#print{display:none;}
}