@media 
only screen and (min-device-width: 320px) and (max-device-width: 767px),
only screen and (min-width: 320px) and (max-width: 767px) {
    body{
        

    }
	
} 
@media 
only screen and (min-device-width: 768px) and (max-device-width: 991px),
only screen and (min-width: 768px) and (max-width: 991px) {
    
}


@media 
only screen and (min-device-width: 200px) and (max-device-width: 819px),
only screen and (min-width: 200px) and (max-width: 819px) { 
	.btn_grabar::before{display: none;}
    .hide-mobile{
        display: none !important;
    }
    .hide-desktop{
        display: block;
    }
    .title {
        right: 1em;
		width: 100%;
		line-height: 15px;
		padding-right: 0;
		bottom: 1em;
    }
    #modal_real{
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 15px;
        width: 95%;
        margin-top: 0%;
    }
    #modal_real #tutorial{
        grid-template-columns: 1fr;
        grid-template-rows: 215px 40px 80px 20px auto;
    }
    #modal_real #tutorial .mask{
        grid-column-start: 1;
        grid-column-end: 1;
    }
	.tut{
		width: 100%;
	}
	.tut.wide .icono {
		margin-left: 0%;
	}
    #punto_tuto_container{
        grid-column-start: 1;
        grid-column-end: 1;
    }
    .btn_flecha_tutorial{
        display: none;
    }
    #barra_preload{
        width: 100%;
    }
    
	
	#btn_volver_cuento,
	.btn_abrir_player{
		width: 56px;
		height: 56px;
	/*	order: 3;*/
	}
	#player_container.closed #player,
	#player_container.closed{
		width: 56px;
	}
	#player_container.closed{
		left: auto;
    	right: 1em;
		transform: translateX(0);
	}
	
    #player_container{
        height: 60px;
		column-gap: 0.3em;
    }
    #player{
        height: 56px;
		width: auto;
		gap:1em;
		padding-left: 0.5em;
		padding-right: 0.5em;
    }
    .player_btn{
        height: 33px;
        width: 33px;
    }
    #player_btn_config{
        margin-left: 2%;
    }
	
	#player_btn_escena_ant,
	#player_btn_escena_sig,
	#player_btn_parrafo_ant,
	#player_btn_parrafo_sig
	{
		
	}
    .player_escenas_launcher{
        max-width: 330px;
        width: auto;
/*        margin-left: auto;*/
        height: 33px;
        z-index: 1;
    }
    #punto_escena_container{
        display: none;
    }
    #title_container{
        height: 33px;
        min-width: 100px;
    }
    #title_container .nombre_cuento{
        display: none;
    }
    #title_container .nombre_escena{
        white-space: nowrap;
        
        min-width: 220px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #title_container .n_escena{
        margin-left: 2%;
    }
    #title_container p:last-child{
        padding-right: 15px;
    }
    #container_desplegable{
        width: 70%;
        left: 15%;
        margin-left: 0;
        top: calc(65px - 100vh);
        z-index: 999;
    }
    #desplegable_escenas_container{
        width: 100%;
        left: 0;
        position: absolute;
        height: calc(100vh - 10px);
        border-radius: 14px 14px 0 0;
    }
    #desplegable_escenas_container.open { 
        top:0;
        z-index: 999!important;
    }
    #listado_escenas{
        height: calc(100vh - 100px);
        grid-column-end: 4;
    }
    #listado_escenas:before {
        width: 100%;
    }
    #listado_escenas .simplebar-track{
        right: 3px;
    }
    #listado_escenas .item_listado_escena{
        width: calc(100% - 20px);
    }
    #desplegable_escenas_container .btn_ocultar{
        justify-self: end;
        height: 30px;
        width: 30px;
    }
    #desplegable_escenas_container .btn_ocultar .ico{
        margin-top: 4px;
    }
    #subtitulos{
       bottom: 76px;
    }
    #subtitulos p{
        font-size: 18px;
        line-height: 18px;
    }
    #marcador_escena{
        width: 40px;
        height: 95px;
        top: -50px;
        flex-wrap: wrap;
    }
    #marcador_escena .container_marcador{
        flex-wrap: wrap;
        align-content: center;
        margin: 0;
        height: 45px;
        width: 80%;
        margin-left: 10%;
        align-self: flex-start;
    }
    #marcador_escena .btn_fullscreen{
        align-self: flex-end;
    }
    #marcador_escena .container_marcador .actual{}
    #marcador_escena .container_marcador .actual p{
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,0.7);
    }
    #marcador_escena .container_marcador .total{}
    #marcador_escena .container_marcador .total p{}
    

    .creditos .creditos_portada .preconfig{
        grid-template-columns: 100%;
        grid-gap: 10%;
        margin-bottom: 30%;
        grid-template-rows: auto auto auto;
    }
    .creditos .creditos_portada .preconfig .preconfig_text{
        grid-column-end: 1;
        padding-bottom: 10px;
    }
    .creditos .creditos_portada .preconfig .btn_principal{
        justify-self: center;
    }

	.creditos .creditos_portada{
		width: 100%;
		overflow-x: auto;
		overflow-y: auto;
	}
	
	.creditos .creditos_portada .premios,
	.creditos .creditos_portada .titulo{
		width: 60%;
	}
	
	.creditos .creditos_portada .premios a{
		width: 40px;
		margin-right: 1em;
	}
	
	.creditos .creditos_portada h1,
	.creditos .creditos_portada h2{
		color: var(--blanco-real);
		font-weight: 400;
	}
	.creditos .creditos_portada h1{
		font-size: 1.3em;
		line-height: 1.3em;
	}
	
	.creditos .btn_favorito{
		position: fixed;
		top: 1em;
		left: 1em;
	}
	
	.seleccionar .preconfig_text{
		color: var(--gris);
	}
	
	.config{
		display: block;
		width: 100%;
		padding-left: 0;
	}
	.config .mask{
		overflow: hidden;
	}
	.config .wrapper{
		display: inline-flex;
		width: 240%;
		align-content: space-between;
		gap: 0.5em;
	}
	
	.seleccionar .preconfig_text{
		padding-bottom: 0.1em;
	}
	
	label.radio{
		margin: 0rem 0.1rem;
		padding: 0.5em 1.2em;
		font-size: 0.8em;
		flex-grow: 1;
	}
	label.radio img{
		width: 1.4rem;
	}
	.btn_circular{
		width: 50px;
		height: 50px;
	}
	.seleccionar{
		
	}

	
	#modal_salida .wraper_modal{
		width: 100%;
	}
	
	#modal_salida .linea_botones .btn_principal {
		padding: 0.4em 1em;
		font-size: 1em;
		margin: 0;
	}
	
	.miniatura_titulo{
		width: 60%;
	}
	
	.config .btn_principal{
		padding: 0.9em;
	}
	.btn_principal{
		gap: 0.5em;
	}
	.btn_principal p{
		font-size: 0.7em;
	}
	.btn_reproducir_cuento p{
	/*	display: none;*/
	}
	.btn_grabar p{
		display: none;
	}
	
	.botones_comenzar > *{
		
	}
	
	.creditos .creditos_portada .links_externos{
		display: inline-block;
	}
	
	.creditos .creditos_portada .descripcion{
		text-align: center;
		font-size: 1em;
		line-height: 2em;
		margin-top: 2em;
		padding-bottom: 3em;
	}
/*
	.creditos .creditos_portada .descripcion:before,
	.creditos .creditos_portada .descripcion:after{
		content: 'o';
		position: absolute;
		text-align: center;
		width: 100%;
		margin-top: -2.5em;
		display: block;
		color: var(--gris);
	}
	.creditos .creditos_portada .descripcion:after{
		margin-top: 1em;
		content: 'o\Ao\Ao\Ao';
		white-space: pre-wrap;
		line-height: 1em;
		
	}
*/
	
	
	
	.ideas_despues_de_leer{
		margin-top: 3em;
	}
	
	#cargador{
		width: 100%;
	}
	
	#modal_calificacion .btn_cerrar{
		left: auto;
	}
	
	
    .drag_tolltip{
        width: 274px;
        grid-template-rows: 8px 128px auto 8px;
    }
    .drag_tolltip .cabecera{
        overflow: hidden;
        width: 258px;
        height: 128px;
    }
    .drag_tolltip .cabecera img{
        width: 100%;
    }
    .drag_tolltip p{
        font-size: 30px;
        line-height: 27px
    }
    .drag_tolltip.vertical p:after {
        margin-left: 110px;
    }
    .drag_tolltip.horizontal:after {
        margin-top: 115px;
        margin-left: 271px;    
    }
    
    #escena_03 .drag_tolltip{
        top: 490px;
        left: 1440px;
    }
    #escena_09 .drag_tolltip{
        top: 300px;
        left: 85px;
    }
    #escena_10 .drag_tolltip{
        top: 330px;
        left: 400px;
    }
    #escena_03 .drag_tolltip{
        top: 540px!important;
        left: 650px!important;
    }
    #marcador_escena{
        top: -100px;
        height:145px;
    }
    #marcador_escena .container_marcador{
       box-sizing: border-box;
    }
    #marcador_escena .player_btn{
        margin-left: 0px;
    }
    #title_container .nombre_escena {
        min-width: 120px!important;
        box-sizing: border-box;
    }
    #player_btn_config {
        margin-left: 1.5%!important;
        margin-right: 1.5%;
    }
    #tut04 .icono .player_btn{
        width: 45px;
        height: 45px;
    }
    #senas_container{
        bottom: 60px;
        right: 70px;
    }
    .player_escenas_launcher{
        margin-right: 1.5%;
    }
}

@media (orientation: portrait) {
	#gira_pantalla {
		display: grid;
	}
	#modal_salida .wraper_modal{
    	width: 90%;
	}
	#modal_salida .linea_botones{
	    flex-flow: row wrap;
    	width: 70%;
    	justify-content: center;	
	}
	.ideas_despues_de_leer h1{
		font-size: 1.4em;
	}
}

@media screen and (min-width:320px) and (max-width:896px) and (orientation: landscape) {
	.btn_grabar::before{display: none;}
	.btn_principal{
		padding: 0.6em 0.6em;
		gap: 0.5em 
	}
	.btn_principal p{
		font-size: 0.6em;
	}
	
    #final_cuento .creditos{
        grid-template-columns:repeat(2, minmax(10px, 1fr));
		margin-top: 10%;
    }
	#final_cuento .miniatura_titulo{
		display: block;
	}
	#final_cuento .miniatura_titulo .transparencia{
		height: 100%;
	}
	#final_cuento .miniatura_titulo .btn_favorito{
		position: relative;
		left: auto;
		right: 1em;
		top: -90%;
	}
	#modal_real #tutorial{
        grid-template-rows: 215px 40px 40px 20px auto;
    }
	#btn_adelante{
		right: 4%;
	}
	#btn_adelante.min{
		right: 1%;
	}
	#modal_salida .wraper_modal{
		width: 90%;
	}
	#modal_salida .ideas_despues_de_leer{
		margin-top: 1em;
	}
	.miniatura_titulo{
		width: 40%;
		height: 9em;
	}
	
	#btn_init{
		position: fixed;
    	bottom: 1em;
	}
	
	#container_desplegable{
        top: calc(105px - 100vh);
    }
	
	#desplegable_escenas_container{
        height: calc(100vh - 45px);
    }
	#desplegable_escenas_container.open { 
		 top:0;
		 overflow: hidden;
    }
	 #listado_escenas{
        height: calc(100vh - 100px);
        grid-column-end: 4;
    }
	
	label.radio{
		margin: 0rem 0.1rem;
		padding: 0.5em 0.5em;
		font-size: 0.95em;
		flex-grow: 1;
	}
	label.radio img{
		width: 1.4rem;
	}
	.btn_circular{
		width: 50px;
		height: 50px;
	}
	
	.ideas_despues_de_leer{
		margin-top: 0.2em;
	}
	/*********************/
	/*PLAYER*/
	/*******************/
	#title_container {
		height: 33px;
		min-width: 100px;
	}
	#title_container .nombre_cuento{
		display: none;
	}
	#title_container p{
		text-wrap: nowrap;
	}
	
	#punto_escena_container{
		display: none;
	}
	#btn_volver_cuento,
	.btn_abrir_player{
		width: 56px;
		height: 56px;
	/*	order: 3;*/
	}
	#player_container.closed #player,
	#player_container.closed{
		width: 56px;
	}
	#player_container.closed #player,
	#player_container.closed #btn_volver_cuento{
		width: 54px;
		height: 54px;
		margin-top: 1px;
	}
	#player_container.closed{
		left: auto;
    	right: 1em;
		transform: translateX(0);
	}
	
    #player_container{
        height: 60px;
		column-gap: 0.3em;
    }
    #player{
        height: 56px;
		width: auto;
		gap:1em;
		padding-left: 0.5em;
		padding-right: 0.5em;
    }
    .player_btn{
        height: 33px;
        width: 33px;
    }
    #player_btn_config{
        margin-left: 2%;
    }
	
	#player_btn_escena_ant,
	#player_btn_escena_sig,
	#player_btn_parrafo_ant,
	#player_btn_parrafo_sig
	{
		
	}
    .player_escenas_launcher{
        max-width: 330px;
        width: auto;
        height: 33px;
        z-index: 1;
    }
	.config .wrapper{
		width: 140%;
	}
	
}

@media screen and (min-width:910px) and (max-width:1180px) and (orientation: landscape) {
	#modal_salida .wraper_modal{
		width: 65%;
	}
	
	#modal_salida .ideas_despues_de_leer{
		margin-top: 2rem;
	}

	 #desplegable_escenas_container.open { 
        top:80px;
    }
}
@media 
only screen and (min-device-width: 768px) and (max-device-width: 1024px),
only screen and (min-device-width: 820px) and (max-device-width: 1180px) {
	.seleccionar label.radio{
		margin: 0rem 0.1rem;
		padding: 1em 0.5em;
		font-size: 0.95em;
		flex-grow: 1;
	}
	.btn_principal{
		padding: 1em 0.8em;
	}
	.btn_principal p{
		font-size: 0.8em;
	}
}

@media screen and (min-width:200px) and (max-width:819px) and (orientation: portrait) {
	.btn_grabar::before{display: none;}
	#final_cuento .creditos{
		display: grid;
		grid-template-columns: none;
		grid-template-rows: repeat(3, minmax(10px, 1fr));
		width: 100%;
		row-gap: 1.5em;
		column-gap: 0;
		justify-items: center;
		text-align: center;
    }
	
	#final_cuento .creditos .miniatura_container{
		grid-column-start: 1;
		grid-column-end: 1;
		grid-row-start: 1;
		grid-row-end: 1;
		width: 100%;
    }
	#final_cuento .creditos .miniatura_container p{
		color: var(--blanco);
		background: var(--blanco);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
 
	}
	
	#final_cuento .creditos .botones_final{
		grid-column-start: 1;
		grid-column-end: 1;
		grid-row-start: 2;
		grid-row-end: 2;
    }
	#final_cuento .creditos .botones_final .pre-ranking h2{
		color: var(--blanco);
		font-size: 1.5em;
		font-weight: 400;
	}
	#final_cuento .creditos .ideas_despues_de_leer{
		grid-column-start: 1;
		grid-column-end: 1;
		grid-row-start: 3;
		grid-row-end: 3;
		flex-flow: row;
		align-items: center;
		justify-content: flex-start;
    }
	#final_cuento .ideas_despues_de_leer .textos_comunicacion{
		text-align: left;
	}
	/****************/
	.botones_final .btn_principal{
		margin: 1em auto;
	}
	#btn_volver_leer{
		float: none;
	}
	
}
@media (hover: hover){
	.btn_principal.sandia:hover{
		background-color:var(--sandia-hover);
	}
	.btn_principal.azul:hover{
		background-color:var(--azul-hover);
	}
	.btn_azul:hover{
		background-color: var(--blanco);
	}
	.btn_azul:hover .ico rect,
	.btn_azul:hover .ico stroke,
	.btn_azul:hover .ico polygon,
	.btn_azul:hover .ico path{
		fill: var(--azul);
	}
	.btn_sandia:hover{
		background-color: var(--blanco);
	}
	.btn_sandia:hover .ico rect,
	.btn_sandia:hover .ico stroke,
	.btn_sandia:hover .ico polygon,
	.btn_sandia:hover .ico path{
		fill: var(--sandia);
	}
	.btn_blanco:hover{
		background-color: var(--azul-cobalto);
	}
	.btn_blanco:hover rect,
	.btn_blanco:hover stroke,
	.btn_blanco:hover polygon,
	.btn_blanco:hover path{
		fill:var(--blanco-real);
	}
	
}