@charset "utf-8";
/* CSS Document */

body{ margin:0; padding:0; background-color:#fff; font-family: 'Aller',Arial,sans-serif;}
h1{ display: none;}
/*h1{ color: #00B6C5; font-family: 'Aller',Arial,sans-serif; font-size: 34px; font-weight: 300; line-height:36px; margin:0; padding:0; letter-spacing: -0.03em;}*/
h2{ color: #000; font-family: 'Aller',Arial,sans-serif; font-size: 24px; font-weight: 300; line-height:26px; margin:0; padding:0; letter-spacing: -0.03em; }
a{ color:#CC382C; text-decoration: none}
a:hover, a:focus{ text-decoration: underline; transition: all 0.3s ease 0s;}
.contenedor{ max-width:1400px; margin:0 auto;}
.cabecera{ padding: 25px 20px; /*border-bottom:1px solid #eee;*/ background-color:#fff; display: flex; justify-content: space-between;}
.cabecera .logo{ width:30%; float:left;}
.cabecera .logo object{ width:150px;}
.cabecera .cabeUser{ display: flex; align-items: flex-end;}
.cabecera .cabeUser .user{ float:left; width:100%; font-size:14px; display: flex; justify-content: flex-end;}
.cabecera .cabeUser .user ul li{ float:left; list-style-type:none; color:#000; padding-left:20px;}
.cabecera .cabeUser .user ul li:first-child { padding-right:0;}
.cabecera .cabeUser .user ul li.alumno:before{content:''; height:1.5em; width:1.5em; background-image:url('img/alumno-icono.svg'); background-size:contain; background-repeat:no-repeat; padding-left: 1.7em; }
.cabecera .cabeUser .user ul li.nivel:before{content:''; height:1.5em; width:1.5em; background-image:url('img/nivel.svg'); background-size:contain; background-repeat:no-repeat; padding-left: 1.7em; }
.cabecera .cabeUser .user ul li.salir:before{content:''; height:1.5em; width:1.5em; background-image:url('img/salir.svg'); background-size:contain; background-repeat:no-repeat; padding-left: 1.7em; }
.cabecera .cabeUser .user ul li.salir a{ text-decoration:none; color:#7a7a7a; font-size:13px;}
.cabecera .cabeUser .user ul li.salir a:hover, .cabecera .cabeUser .user ul li.salir a:focus{ color:#CC382C;}
.contenido{ display: flex; flex-direction: column;}


/*=================
* LOGIN
*=================*/
#Login .popup{ z-index:3; width:640px; height:400px; padding:30px; position:absolute; top:50%; left:50%; margin-left:-320px; margin-top:-200px;}

@-webkit-keyframes bummer {
    100% {
        -webkit-transform: scale(1,1); 
    }
}

@keyframes bummer {
    100% {
        transform: scale(1,1); 
    }
}
#Login .popup .logo{ margin:0 auto; padding-bottom:30px; max-width:250px;}
#Login .popup .contenido{ float:left;}
#Login .popup .contenido .usuario, #Login .popup .contenido .pass, #Login .popup .contenido .text, #Login .popup .contenido .boton{ float:left; width:100%; text-align:center;}
#Login .popup .contenido .pass, #Login .popup .contenido .text{ margin-top:20px;}
#Login .popup .contenido .boton{ margin-top:40px;}
#Login .popup .contenido .pass input, #Login .popup .contenido .text input{margin: 0 auto;}
#Login .popup .contenido input::placeholder{color:#ccc;}

#Login input[type="text"]{ position: relative; box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.2); outline: none; font-size: 18px; color: #60666d; text-align:left; margin: 0; padding: 15px; background-color: #fff; border:none; width:370px;}
#Login input[type="password"]{ position: relative; box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.2); outline: none; font-size: 18px; color: #60666d; text-align:left; margin: 0; padding: 15px; background-color: #fff; border:none; width:370px;}
#Login input[type="submit"]{   color: #fff; background-color: #00B6C5; border:none; cursor:pointer; padding:15px; font-size:20px; width:150px; border-radius: 50px; box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.2); /*transition-duration: 1s;*/}
#Login input[type=submit]:hover{ background-color: #CC382C; outline: none;}

.bot{ color: #fff; border:none; cursor:pointer; padding:10px 20px; font-size:18px; box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.2); transition-duration: 1s; display:inline-block; text-decoration:none; margin:3px;}

/*=================
* SLIDER FRASES GRABACIONES
*=================*/
.carouselCont{ float:left;}
.carousel .cont { display: flex; /*align-items: center;*/ text-align: center; padding: 80px; background-color: #f9f9f9; border: 1px solid #eee; border-radius: 0 0 20px 20px; flex-direction: column; justify-content: center;}
.carousel-item{ /*align-items: center;*/ }
.carousel-control-next, .carousel-control-prev{ display: none;}
.carouselSidebar{ float:left; display: flex; flex-direction: column; align-items: flex-end; padding: 50px 20px 30px 20px;}
.carouselSidebar button{ display: flex!important;
    flex-direction: row;
    justify-content: space-between;
    margin-inline-start: auto;
    width: 100%; align-items: center; border:none;}
.carousel h2{ font-size: 40px; font-weight: 600; line-height:50px;}
.delayedShow{
  visibility: hidden;
  animation: 0s linear 1s forwards delayedShow ;
}
/*.carousel-inner h2{ animation: fadein 1s; }*/
.instrucciones{ padding: 15px 20px; border-top:1px solid #eee; border-right:1px solid #eee; border-left:1px solid #eee; border-radius: 20px 20px 0 0; text-align: center}
button { background: none; cursor: pointer;}
.instrucciones img.micro{ width:24px; height: 24px; margin: 0 3px;}
/*.instrucciones #mensaje1, .instrucciones #mensaje2, .instrucciones #mensaje3, .instrucciones #mensajeStop{ display: none;}*/

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: flex!important;
 justify-content: center!important;text-align: center!important;
}

.carousel-item-next:not(.carousel-item-start),
.active.carousel-item-end {
  opacity: 0;
}

.carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start {
  opacity: 0;
}

@keyframes fadein {
  from { opacity: 0}
  to   { opacity: 1; visibility: visible;}
}

@keyframes delayedShow {
  to {
    visibility: visible;
  }
}

.carouselSidebarBot {
    align-items: center;
    border-bottom: 1px solid #eee;
    display: flex;
   /* flex-direction: row-reverse;*/
    flex-shrink: 0;
    height: 46px;
    justify-content: center;
    overflow: hidden;
	width: 46px;
	font-size:18px; line-height: 22px;
}
.carouselSidebarBot.last{ border-bottom:none;}



.carouselSidebarBot .num {
    align-items: center;
    border-radius: 50%;
    color: #000;
    display: flex;
    font-weight: 600;
    height: 37px;
    justify-content: center;
    width: 39px;
	background: #fff;
    color: #959595;
    border: 1px solid #959595;
}

.carouselSidebarBot .contents {
    align-items: center;
    height: 100%;
	display:flex!important;
	justify-content: center;
}

@media (min-width: 768px) {
    .carouselSidebarBot .contents {
        display:flex!important
    }
}

.carouselSidebarBot.active {
	font-weight:600;
	width:100%;
}

.carouselSidebarBot.active .num {
    background: #CC382C;
    color: #fff
}

@media (min-width: 768px) {
    .carouselSidebarBot.active .num {
        background:#CC382C;
		 border: 1px solid #CC382C;
    }
}

.carouselSidebar .carouselSidebarBot button img{ width:20px; height: 20px;}
.carouselSidebar .carouselSidebarBot button img:hover, .carouselSidebar .carouselSidebarBot button img:focus{ filter: invert(.5) sepia(6) saturate(7) hue-rotate(140deg)}

.carouselSidebarBot.done {
    background: inherit;
	    
}
.carouselSidebarBot button{ text-align: left; font-size: 18px; line-height: 18px; color:#777;}
.carouselSidebarBot button:hover{ color:#000;}
/*.carouselSidebarBot.done .contents{
width: 85%; justify-content: center;
}*/

@media (min-width: 768px) {
    /*.carouselSidebarBot.done {
        padding-inline-start:6px;
    }*/

    .carouselSidebarBot.done.closed {
        padding-inline-start:0}

    .carouselSidebarBot.done .num {
         background: #fff;
    color: #00B6C5;
    border: 1px solid #00B6C5;
    }
.contResult{ align-items: center; display: flex; height: 100%; width:100%; background-color: rgba(255,255,255,0.9); position: absolute; z-index: 1000;}	
.avisoResult {
    align-items: center;
    display: flex;
    font-size: 20px;
	line-height: 30px;
    padding-inline-end: 40px;
    position: absolute;
	top:250px;
    right: 0;
    text-align: end;
    width: 338px;
	color:#fff;
	background-color: #00B6C5;
    padding: 30px;
    border-radius: 30px; 
	-webkit-box-shadow: 10px 10px 44px -15px rgba(0,0,0,0.02);
-moz-box-shadow: 10px 10px 44px -15px rgba(0,0,0,0.02);
box-shadow: 10px 10px 44px -15px rgba(0,0,0,0.2);
}
	
.avisoResult:before {
     content: "";
    position: absolute;
    top: 60px;
    right:-30px;
    z-index: 1;
    border: solid 15px transparent;
    border-left-color: #00B6C5;
}

.carouselSidebarBot.done .contents {
    display: flex
}

.carouselSidebarBot.pending .num {
    background: inherit;
}

.carouselSidebarBot.open {
    justify-content: space-between;
    width: 175px
}
}
@media (max-width: 767px) {
    .carouselSidebarBot.open {
        width:auto
    }
	.carouselSidebarBot .contents {
		/*justify-content: space-around;*/
		width:50%;
	}
}


.carouselSidebarBot.open .contents {
    display: flex!important
}

.carouselSidebarBot.open .num {
    background: #CC382C;
	color:#fff;
    margin: 7px 15px 7px 7px
}

@media (min-width: 768px) {
    .carouselSidebarBot.open .num {
        margin:0
    }
}


/*.carouselSidebarBot.recording.done .contents>* {
    height: 100%
}*/

/*.carouselSidebarBot.recording .text {
    color: var(--dark-grey);
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: .4px;
    margin: 0 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    width: 133px
}*/

.carouselSidebarBot.recording .padder {
    display: inline-block;
    padding: 0 16px
}

.carouselSidebarBot.recording .play .padder {
    border-inline-start:none}

.carouselSidebarBot.recording button {
    border: none;
    height: 100%;
    padding: 0
}

.carouselSidebarBot.recording button.play:hover path {
    fill:#00B6C5;
}

.carouselSidebarBot.recording button.redo:hover path {
    fill: #00B6C5;
}

.carouselSidebarBot.recording button.share:hover path {
    fill: #00B6C5;
}

.carouselSidebarBot.recording .placeholder {
    width: 55px
}


/*=================
* Barra de progreso
*=================*/

.progreso{
    height: 10px;
    background: #e9e9ea;
    border-radius: 15px;
    margin-bottom: 20px;
    overflow: visible;
    position: relative;
}
.progreso:before,
.progreso:after{
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: -5px;
    left: 0;
    z-index: 1;
}
.progreso:after{
    border: 7px solid #e9e9ea;
    left: auto;
    right: 0;
}
.progreso .barra{
    box-shadow: none;
    border: none;
    border-radius: 15px;
    position: relative;
    -webkit-animation: animate-positive 1s;
    animation: animate-positive 1s;
	float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    background-color: #CC382C;
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease;
}
.progreso .valor{
    width: 70px;
    height: 30px;
    line-height: 24px;
    border-radius: 20px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    position: absolute;
    top: -10px;
    right: 0;
    z-index: 2;
	 border: 2px solid #CC382C;
    color: #CC382C;
	text-align: center;
}
.progreso .valor .valorOff{ color:#999}
.progreso.completado:before{ border: 7px solid #CC382C;}

@-webkit-keyframes animate-positive{
    0%{ width: 0; }
}
@keyframes animate-positive{
    0%{ width: 0; }
}

/*=================
* Botones bottom
*=================*/


.botonesBottom {
    display: flex;
    /*justify-content: space-between;*/
	justify-content: flex-end;
    /*margin-top: 4vh;*/
}

.botonesBottom img {
    width: 24px;
    height: 24px;
    margin: 0 5px;
}

.botonesBottom div{
	display: flex;
}

.botonesBottom .button:first-child {
    margin-inline-end: 20px;
}

.botonesBottom .button{ background-color: #fff;
    border: 1px solid rgba(0,0,0,.5);
    border-radius: 50px;
    color: #000;
	padding: 0 30px; text-decoration: none; height: 60px; display: flex; align-items: center;}

.botonesBottom .button:hover, .botonesBottom .button:focus{
	background-color: #00B6C5;
	color:#fff;
	border: 1px solid #00B6C5;
	transition: all 0.3s ease 0s;
}

.botonesBottom .button:hover img, .botonesBottom .button:focus img{
	filter: invert(1) brightness(200%);
}

.botonesBottom .submit button {
    background: #CC382C;
    border: none;
    border-radius: 50px;
    color: #fff;
    font-weight: 500;
	padding: 0 50px;
	height: 60px;
	font-size: 20px;
	/*box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);*/
	transition: all 0.3s ease 0s;
  	cursor: pointer;
}


.botonesBottom .submit button:hover {
  background: #e75549;	
  box-shadow: 0px 15px 15px rgba(231, 85, 73, 0.3);
	transform: translateY(-4px);

}


.botonesBottom .submit.disabled button {
    background: #f3f2f1;
    color: #959595;
    cursor: default;
	transition:none;
}

.botonesBottom .submit.disabled button:hover {
	 background: #f3f2f1;
    color: #959595;
	transform: none;
	box-shadow: none;
}

.formPreguntas{ align-items: end;
    display: flex;
    flex-direction: column;}

.contAvisoPolitica {
    width: 350px;
	background-color: #fff;
    padding: 20px;
    border-radius: 30px; 
	-webkit-box-shadow: 10px 10px 44px -15px rgba(0,0,0,0.06);
-moz-box-shadow: 10px 10px 44px -15px rgba(0,0,0,0.06);
box-shadow: 10px 10px 44px -15px rgba(0,0,0,0.1);
	margin-bottom: 11px;
	margin-top: -100px;
	z-index: 1000;
	position: absolute;
}

.labeled-checkbox{ 
    text-align: left;
 align-items: flex-start;
    display: flex;
    flex-direction: row;
}
.checkbox-container :required,.checkbox-container :valid,.labeled-form-control :required,.labeled-form-control :valid {
    box-shadow: none;
}

.checkbox-container .label,.labeled-form-control .label {
    background: #fff;
    color: #111;
    margin-inline-start:9px;padding: 0 5px;
    position: absolute;
    top: -8px;
    z-index: 100;
}

.checkbox-container {
    display: flex;
    flex-direction: column;
    position: relative;
	    border: 1.6px solid #111;
    border-radius: 2px;
    flex-shrink: 0;
    height: 15px;
    margin-top: 5px;
    margin-inline-end: 10px;
    position: relative;
    width: 15px;
}
.checkbox-container input{   
    color: #000;
	padding: 13px;
	appearance: none;
    background: transparent;
    border: none!important;
    height: 100%;
    left: 0;
    margin: 0!important;
    outline: none!important;
    padding: 0!important;
    position: absolute;
    top: 0;
    width: 100%;

}

.checkbox-container input:checked{
	background: #fff;
}
.checkbox-container input:checked~.checkmark {
    display: block;
}
.checkbox-container .checkmark {
    display: none;
    pointer-events: none;
    position: absolute;
    top: -6px;
    width: 100%;
}


@media (max-width: 1400px) {
	.botonesBottom{ padding: 20px;}
}

@media (min-width: 1280px) {
	.carousel .cont {min-height: 400px;}
   .carousel{ min-height: 400px; width:80%; float:left; }
	.carouselSidebar{ width:20%;}
	.botonesBottom{ width:80%;}
	.barraProgreso{ width:80%;}
}

@media (min-width: 1060px) and (max-width: 1279px) {
	.carousel .cont {min-height: 400px;}
	.carousel{ min-height: 400px; width:75%; float:left; }
	.carouselSidebar{ width:25%;}
	.botonesBottom{ width:100%;}
	.barraProgreso{ width:100%;}
}
@media (min-width: 850px) and (max-width: 1059px) {
	.carousel .cont {min-height: 400px;}
	.carousel{ min-height: 400px; width:70%; float:left; }
	.carouselSidebar{ width:30%;}
	.botonesBottom{ width:100%;}
	
}
@media (min-width: 850px) {
	.carouselSidebarBot{justify-content: space-between;}
    .carouselSidebarBot .contents{ width:80%;}
}
@media (min-width: 769px) and (max-width: 849px) {
	.carousel .cont {min-height: 200px;}
	.carousel{ min-height: 200px; width:100%; float:left; }
	.carouselSidebar{ width:100%; padding: 0; flex-direction: row; align-items: flex-end; flex-wrap: wrap;}
	.carouselSidebarBot.done .contents{ width: 50%;}
	.carouselSidebarBot.done{ width:50%;}
	.carouselSidebarBot{ justify-content: flex-end;}
	.carouselSidebarBot .text{ margin-right:10px;}
	.botonesBottom{ width:100%;}
	.barraProgreso{ width:100%;}
}

@media (min-width: 768px) {
    .carouselSidebarBot {
        display:flex!important;
        flex-direction: row;
        margin-inline-start:auto;padding: 30px 20px;
        width: 100%
    }
	
}

@media (max-width: 767px) {
	.carouselSidebar{ width:100%;}
	.carouselSidebarBot.done .contents{ width: 50%;}
	.carouselSidebarBot.done{ width:50%;}
	.carousel h2 {font-size: 24px; line-height: 30px;}
	.carousel .cont{ padding: 30px 20px 40px 20px; margin:0 10px;}
	.carouselSidebar{ padding: 0;}
	.carouselSidebarBot.done{ width:100%;}
	.botonesBottom{ justify-content: center;}
	.cabecera .cabeUser .user ul li{ float:none; text-align: right;}
	.cabecera{ padding: 15px 20px 5px 20px;}
}


/*=================
* GRABANDO
*=================*/

.pulse
{
    /*position: absolute;
    top: 50%;
    left: 50%;*/
    /*transform: translate(-50%,-50%);*/
    width: 70px;
    height: 70px;
    background: #CC382C;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 84px;
    font-size: 38px;
	position:relative;
	margin: -35px auto 20px auto;
	cursor:pointer;
 
}
.pulse:hover, .pulse:focus{ background: #e75549; transition: 0.5s;}
.pulse .fa{ line-height:73px;}
.pulse:before,
.pulse:after
{
    content: '';
    display: block;
    position: absolute;
    border: 50%;
    border: 1px solid #CC382C;
    left: -20px;
    right: -20px;
    top: -20px;
    bottom: -20px;
    border-radius: 50%;
    animation: animate 1.5s linear infinite;
    opacity: 0;
    backface-visibility: hidden;
}
.pulse.inactivo:before,
.pulse.inactivo:after
{
    display: none;
}
.pulse:after
{
    animation-delay: .5s;
}
.pulse.inactivo.desactivado{
    background: #ccc;
    cursor: auto;
    
}
@keyframes animate 
{
    0%
    {
        transform: scale(0.5);
        opacity: 0;
    }
    50%
    {
        opacity: 1; 
    }
    100%
    {
        transform: scale(1.2);
        opacity: 0;
    }
}


@media (max-width: 992px){
	.container { max-width: 840px;}
}
@media (max-width: 768px){
	.container { max-width: 640px;height:auto;}
}
@media (max-width: 576px){
.container { max-width: 460px; height:auto;}
}