html, body {height: 100%}
body{
	background-image:url("../img/bg.jpg");
	height:100%;
	width:100%;
 	position:relative;
    font-family: 'handleeregular';
	color:#096aab
 }

 a,a:active,a:focus,a:hover {
   outline: 0;
}

.h100{
	height:100%;
}

.menu-links{
	max-width:100%;
}

.menu-links a{
	margin-left:25px;
	margin-right:25px;
}

.svg-responsive{
	display:block;
	min-width:100%;
	max-width:100%;
	/*max-height:100%;*/
	margin:auto;
}

 .right{
 	text-align: right;
 }

 .left{
 	text-align: left;
 }

 .center{
 	text-align: center;
 }

.viewport{
	width:100%;
	height:100%;
	max-width:1024px;
	max-height:768px;
	border:solid 10px #096aab;
	margin:auto;
	background-color:#fff;
	border-radius: 10px;
	overflow:hidden;
	background-color:#096aab;
}

.disabled{
	opacity:.5;
}

.view{
	position:relative;
	width:100%;
	height:100%;
	background-size: cover;
	background-position:center center;
	border-radius: 10px;
}

#incompatible{
	position:fixed;
	width:100%;
	height:100%;
	z-index:100000;
	background:#fff;
	text-align: center;
	margin-top:-50px;
	padding-top:20px;
}

#incompatible h1{
	font-size:22px;
	font-weight: bold;
	color:#888;
}

#incompatible .cont{
	margin:auto;
	margin-top:50px;
	max-width:800px;
	padding:20px;
	border:dashed 10px #888;
	border-radius: 20px;

}

#intro{
		background-image:url("../img/intro.jpg");
}

#intro .progress-container{
	padding: 20px;
	width: 50%;
}

#intro .personaje{
	position:absolute;
	bottom: 0px;
	max-width: 60%;
	max-height:100%;
}

#intro .logo{
	position:absolute;
	right:10px;
	top:10px;
	max-width: 50%;

}

#intro-menu{
	background-image:url("../img/scene02.jpg");

}



#intro-menu .items{
	position:absolute;
	width:100%;
	top:10%;
	transform: scale(0.7);
}

#docentes-menu{
	background-image:url("../img/scene.jpg");

}

#docentes-menu .items{
	position:absolute;
	width:100%;
	bottom:10%;
	text-align: center;
}

#docentes-menu .titulo{
	padding-top:10px;
}

#personaje-menu{
	background-image:url("../img/cielo.png");

}

#creditos{
	background-image:url("../img/creditos.png");
	background-size: cover;
	background-position: center bottom;
	background-repeat: no-repeat;
	background-color: #e2f9ff;

}

#personaje-menu .items{
	position:absolute;
	width:100%;
	bottom:10%;
	text-align: center;
}

#personaje-menu .titulo{
	padding-top:10px;
}

#personaje-menu .cartel{
	position: absolute;
	width: 35%;
	bottom: 1500px;
	left: 50%;
	margin-left: -17%;
	opacity:0;
	 -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}


#personaje-menu .cartel.presente{
	opacity:1;
	bottom: 0px;

}

#personaje-menu .form{
	position:absolute;
	width:100%;
	padding: 20px;
	z-index:2
	-moz-transform:rotate(-3deg);
	-webkit-transform:rotate(-3deg);
	-ms-transform:rotate(-3deg);
	-o-transform:rotate(-3deg);
	transform:rotate(-3deg);
}

#personaje-menu .form h2{
	margin:0;
	margin-top:10px;
	font-size:38px;
	line-height: 34px;
}

#personaje-menu .form-wrap{
	width:80%;
	margin:auto;
}

.block{
	display:block;
}

.input-line{
	border:none;
	border: dashed 2px #096aab;
	background-color:transparent;
	width:100%;
	font-size:22px;
	text-align: center;
	font-weight: bold;
	margin-top:5px;
	color:#888;
}

.input-mini{
	border:none;
	border-bottom: dashed 2px #096aab;
	background-color:transparent;
	font-size:22px;
	font-weight: bold;
	color:#888;
	font-family: 'Arial',sans-serif;

}

.btn-command{
	background-color:#096aab;
	border:solid 3px #096aab;
	color:#fff;
	width:100%;
	font-size:22px;
	padding:5px;
	padding-left:8px;
	padding-right:8px;
	font-weight: bold;
	margin-top:10px;
	text-decoration: none;
}

.btn-command:active,
.btn-command:focus{
	color:#fff;
	text-decoration: none;
}

.btn-command:hover{
	background-color:#fff;
	color:#096aab;
	text-decoration: none;

}

.btn-secundary{
	color:#fff;
	background-color:#ef762e;
	border:solid 3px #ef762e;

}

.btn-secundary:hover,
.btn-secundary.active{
	color:#ef762e;
	background-color:#fff;
}

.btn-true{
	color:#fff;
	background-color:#008000;
	border:solid 3px #008000;
}

.btn-true:hover,
.btn-true.active{
	color:#008000;
	background-color:#fff;
}

.btn-false{
	color:#fff;
	background-color:red;
	border:solid 3px red;
}

.btn-false:hover,
.btn-false.active{
	color:red;
	background-color:#fff;
}


.btn-checked{
    background-color: #fff;
    border: 3px solid #008000;
    color: #008000;
}


.main-menu{
	position:relative;
	z-index:100;
	/*position:absolute;*/
	width:100%;
	background-color:#fff;
	padding:10px;
	min-height: 50px;
	border-radius: 10px;
	border-bottom:solid 5px #096aab;

	 -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.pop-info{
	background:#fff;
	background-color:rgba(255,255,255,.8);
	padding:20px;
	margin:auto;
	max-width: 500px;
	width:100%;
	font-size:20px;
	border:solid 3px #096aab;
	border-radius: 10px;
}

.scene{
	position: absolute;
	top: 0px;
	left: 25%;
	width: 100%;
	height: 100%;
	margin-left: -31%;
}


.img-responsive{
	max-width:100%;
	max-height:100%;
	display:inline-block;

}

#guia-portada{
	background-image:url("../img/cielo.png");

}

#personaje-menu .titulo h1,
#guia-portada .wellcome h1{
	text-align: center;
	color:#fff;
	text-shadow:1px 1px 1px #000;
	font-size:50px;
	font-weight: bold;
}
.over-parallax{
	position:relative;
	z-index:10;
}

.layer{
	width:100%;
	top:auto !important;
	bottom: 0px;
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   -o-backface-visibility: hidden;
   backface-visibility: hidden;

   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -ms-perspective: 1000;
   -o-perspective: 1000;
   perspective: 1000;

   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   -o-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

.layer-down{
	margin-bottom:-80px;
}

.layer-up{
	margin-bottom:-50px;
}

.layer-up2{
	margin-bottom:-45px;
}

.layer-bottom{
	top:auto !important;
	bottom: 20px;
}

.escenario{
	height:100%;
	width:100%;
	background-size:cover;
	background-position: center center;
	background-color:#fff;

}

.close-conversacion{
	position: absolute;
	right: 10px;
	top: -25px;
	background-color: rgba(255,255,255,0.8);
	text-align: center;
	font-size: 30px;
	border-radius: 15px;
	box-shadow: 0px -4px 1px 1px #096AAB;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 2px;
}

.open-conversacion{
	position: fixed;
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	font-size: 30px;
	width: 50px;
	height: 50px;
	text-align: center;
	padding-top: 10px;
	right: 10px;
	bottom: 5px;
	box-shadow: 0px 0px 1px 1px #096AAB;
	z-index: 2;
}

.btn-action{
	position: absolute;
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	font-size: 30px;
	width: 50px;
	height: 50px;
	text-align: center;
	right: 10px;
	top: 5px;
	box-shadow: 0px 0px 1px 1px #096AAB;
	z-index: 2;
	padding-top: 10px;
}

.btn-action.extra{
	font-size: 50px;
	width: 70px;
	height: 70px;
}

.btn-action.off{
	box-shadow: 0px 0px 1px 1px #888;

}

.btn-action.off a{
	color:#888;
}

.btn-action.extra.off a{
	color:red;
}


.btn-action.extra.off{
	box-shadow: 0px 0px 10px 1px #fff;
}

.overlay-conversacion{
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #fff;
	opacity: 0.7;
}

.conversacion{
	/*position:absolute;*/
	position: fixed;
	bottom:0;
	width:100%;
	padding:10px;
	background-color:rgba(255,255,255,0.8);
	margin-bottom:-500px;
	 -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
    opacity:0;
    height:auto;
	/*border-top:solid 5px #096aab;*/
	box-shadow: 0px -4px 1px 1px #096AAB;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	z-index: 80;
}

.contenido-conversacion{

    opacity:1;
}

.profile{
	margin:20px;
}

.me-plugin{
	display: none;
}

.contenido-conversacion.is-hidden{
	opacity:0;
}

.conversacion.visible{
	margin-bottom:0px;
	opacity:1;
}

.conversacion .nombre{
	font-weight: bold;
	color:#000;
}

.conversacion .personaje{
	height:151px;
	width:120px;
	background-image:url("../img/personajes/moreno.png");
	background-position:left center;
	background-repeat: no-repeat;
	float:left;

}

.conversacion .profesora{

	background-image:url("../img/personajes/anim-profesora.png");
}


.conversacion .teacher{

	background-image:url("../img/personajes/anim-teacher.png");
}

.conversacion .chico{
	background-image:url("../img/personajes/anim-moreno.png");
}

.conversacion .chica{
	background-image:url("../img/personajes/anim-rubia.png");
}

.conversacion .rubio{
	background-image:url("../img/personajes/anim-rubio.png");
}

.conversacion .pelirroja{
	background-image:url("../img/personajes/anim-pelirroja.png");
}

.botonera{
	margin-top:20px;
	text-align: right;
}

.botonera .btn-command{
	margin-left:2px;
}


.bubble
{
position: relative;
width: 275px;
height: 120px;
padding: 5px;
background: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: #7F7F7F solid 4px;
}



.dialogo{
	position:relative;
	font-size: 22px;
	padding-left:50px;
	padding-top:20px;
	/*box-shadow: 0px 0px 8px #000;*/
	border:solid 8px #aaa;
	padding:10px;
	border-radius: 20px;
	margin-left:128px;
	background-color:#fff;
	z-index:2;
}

.dialogo.error{
	background-color: #ffcccc;
	border: 8px solid rgb(255, 34, 34);
	color: red;
}

.dialogo.acierto{
	background-color: #a6ffa6;
	border: 8px solid #008000;
	color: #0d6a0d;
}

.dialogo.acierto:after{
	border-color: transparent #a6ffa6;
}


.dialogo.acierto:before{
	border-color: transparent #008000;
}


.dialogo-mini{
	position:absolute;
	font-size:40px;
	font-weight: bold;
	font-family: sans-serif;
	padding:10px;
	line-height: 30px;
	margin-left: 55%;
	margin-top: 2%;
	min-height: auto;
	color:#888;

}

.dialogo.principal{
	min-height: 100px;

}

.dialogo:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 8px 20px 8px 0px;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
margin-top: -15px;
left: -20px;
top: 60px;
}

.dialogo:before
{
content: '';
position: absolute;
border-style: solid;
border-width:13px 26px 13px 0px;
border-color: transparent #aaa;
display: block;
width: 0;
z-index: 0;
margin-top: -20px;
left: -33px;
top: 60px;
}

.dialogo.error:after{
	border-color: transparent #ffcccc;
}


.dialogo.error:before{
	border-color: transparent rgb(255, 34, 34);
}

.dialogo .label{
	display: inline-block;
	white-space: normal;
}

.menu-indice{
	background-color: rgba(255, 255, 255, 0.8);
	margin-top: -2000px;
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 20px;
	opacity:0;
	z-index: 99;

	 -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.menu-indice.active{
	margin-top: 0px;
	opacity:1;
}

.menu-indice h1{
	color:#EF762E;
	margin-top: 10px;
	font-weight: bold;
	padding-bottom: 10px;
	text-align: center;
}

.menu-indice h2{
	font-weight:bold;
	text-shadow:1px 1px 2px #000;
	background-color:#096AAB;
	color:#fff;
	margin-top:0px;
	padding-top:5px;
	text-align:center;
	border-radius: 10px;
	font-size: 24px;

}

.menu-indice .indice-block{
	text-align:center;
	margin-bottom:20px;
	border: solid 1px #096AAB;
	background-color:#fff;
	border-radius: 10px;
}

.menu-indice .leyenda-block{
	margin-bottom:10px;
	border: solid 1px #096AAB;
	background-color:#fff;
	border-radius: 10px;
}

.menu-indice .leyenda-block h3{
	display:inline-block;
 	background-color:#096AAB;
	color:#fff;
	margin:0;
	padding:5px;
	font-weight:bold;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	padding-left:10px;
	padding-right:10px;
}

.menu-indice .leyenda-block .leyenda{
	display:inline-block;
	font-size:16px;
	margin-left:10px;
}

.menu-indice .leyenda-block .leyenda.ok{
	color:green;
}

.menu-indice .leyenda-block .leyenda.current{
	color:blue;
}

.menu-indice .leyenda-block .leyenda.last{
	color:red;
}

.menu-indice .subindice{
	list-style: none;
	margin-left:0;
	padding-left:0;
	/*max-height: 60px;
	overflow: hidden;*/
}

.menu-indice .indice-block.inactiva{
	opacity:.5;
}

.menu-indice .indice-block:hover{
	border-color:#EF762E;
	opacity:1;

}


.menu-indice .indice-block:hover h2{
 	background-color:#EF762E;

	 -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;

 }

.menu-indice .subindice li{
	position:relative;
	margin-right:10px;
	display: inline-block;
}

.menu-indice .subindice li .btn-command{
	position:relative;
	border-radius: 20px;
	/*width: 50px;*/
	/*height: 45px;*/
	display: inline-block;
	text-align: center;
	/*overflow:hidden;*/
	font-size: 18px;
	 -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;

}

.menu-indice .subindice li .btn-command:hover{
   -moz-transform: scale(1.1);
   -webkit-transform: scale(1.1);
   -o-transform: scale(1.1);
   -ms-transform: scale(1.1);
   transform: scale(1.1);
 }

.menu-indice .subindice li .btn-command:hover{
	z-index:2;
}

.close-menu{
	font-size:40px;
}

.hito-ok,
.hito-current,
.hito-last{
	position: absolute;
	right: -10px;
	top: -12px;
	color: green;
	background-color: #fff;
	border-radius: 20px;
	border: 2px solid green;
	padding: 5px;
	font-size: 14px;
}

.hito-current{
	color: blue;
	border-color:blue;
}

.hito-last{
	color: red;
	border-color:red;
}

.hito-demo{
	position:relative;
	right:auto;
	top:auto;
}

.formulario{
	margin-top:20px;
	padding:10px;
}

.formulario label{
	font-size:16px;
	font-weight: bold;
	color:#888;
}

/*.menu-indice .subindice li .btn-command span{
	opacity: 0;
}

.menu-indice .subindice li .btn-command:hover{
	width: 100%;

}

.menu-indice .subindice li .btn-command:hover span{
	opacity: 1;
}*/

.escena{
	position: absolute;
	width:100%;
	height:100%;
	background-size:cover;
	background-position:center center;
	opacity:0;
	/*display:none;*/
	visibility:hidden;
}

.escena.visible{
	/*display:block;*/
	visibility:visible;
	opacity:1;

}

.escena.nocover{
	background-size:auto;
	background-position: center -20px;
}

.escena.clase2{
	background-image:url("../img/escenas/intro/clase2.png");

}

.escena.clase3{
	background-image:url("../img/escenas/intro/clase3.png");

}

.escena.clase-mapa{
	background-image:url("../img/escenas/intro/clase_mapa.png");

}


.escena.senderismo{
	background-image:url("../img/escenas/intro/senderismo.png");

}


.escena.pueblo{
	background-image:url("../img/escenas/intro/pueblo.png");

}

.escena.ciudad{
	background-image:url("../img/escenas/intro/ciudad.png");

}

.escena.manga{
	background-image:url("../img/escenas/intro/fondo_manga.png");

}

.escena.saltando{
	background-image:url("../img/escenas/intro/saltando.png");

}

#guia-intro .escenario{
	background-image:url("../img/escenas/intro/clase.png");

}

/*MAPA*/

.escena.mapa{
	background-color:#fff;
}

#map{
	padding-top: 10px;
}

.contenedor-colores{
	padding: 10px;
	/*border: 1px solid rgb(204, 204, 204);*/
	margin-left: -15px;
	margin-top: 25px;
}


.colores{
	padding:5px;
	background-color:#fff;
}

.colores.active{
	border:solid 2px #ccc;
	border-radius:10px;
	box-shadow:1px 1px 8px #000;
}

.colores span{
	display: inline-block;
	width:20px;
	height:20px;
	border-radius: 10px;
}

.colores .blue span{
	background-color:blue;
}

.colores a.blue{
	color:blue;
}

.colores .yellow span{
	background-color:#f8b504;
}
.colores a.yellow{
	color:#f8b504;
}

.colores .red span{
	background-color:red;
}
.colores a.red{
	color:red;
}

.colores .green span{
	background-color:green;
}
.colores a.green{
	color:green;
}

/* PLANO */

.escena.fondo-plano{

	background-image:url("../img/escenas/ejer1_4/bg-plano.png");
	background-position:left top;
	background-size:100% auto ;


}

.escena.plano{
	background-image:url("../img/escenas/ejer1_4/plano.jpg");
	background-position:top center;

}

.plano-leyenda{
	max-height: 95%;
	background-color:#fff;
	padding:10px;
	margin: 10px;
	border-radius: 20px;
	box-shadow: 0px 0px 10px #fff;
	border: solid 2px #096AAB;
	max-width: 80%;
	margin-left: auto;
}

.plano-icon{
	display: inline-block;
	width:40px;
	height:40px;
	border:solid 2px #096AAB;
	padding:5px;
	margin-bottom:5px;
	background-color: #fff;
	border-radius: 5px;
}

.plano-icon img{
	max-width:100%;
}

.plano-label{
	display: inline;
	padding-left:10px;
	font-size: 18px;
}

.plano-flotante{
	position: absolute;
}

.plano-asignado{
	opacity:.5;
}

#mapa-ejer6{

	 -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    -ms-transition: all 0.8s ease;
    transition: all 0.8s ease;

	overflow: hidden;
}

/* VIAS */

.escena.intro-via{
	background-image:url("../img/escenas/ejer1_7/intro.png");
}

.escena.via-urbana{
	background-image:url("../img/escenas/ejer1_7/urbana.png");
	background-color:#fff;
}

.escena.via-interurbana{
	background-image:url("../img/escenas/ejer1_7/interurbana.png");
	background-color:#fff;
}

/* CIRCULAR */

.escena.act01{
	background-image:url("../img/escenas/ejer1_8/act01.png");
}
.escena.act01_1{
	background-image:url("../img/escenas/ejer1_8/act01_1.png");
}

.escena.act02{
	background-image:url("../img/escenas/ejer1_8/act02.png");
}
.escena.act03{
	background-image:url("../img/escenas/ejer1_8/act04.png");
}
.escena.act04{
	background-image:url("../img/escenas/ejer1_8/act03.png");
}
.escena.act05{
	background-image:url("../img/escenas/ejer1_8/act05.png");
}
.escena.act06{
	background-image:url("../img/escenas/ejer1_8/act06.png");
}
.escena.act07{
	background-image:url("../img/escenas/ejer1_8/act07.png");
}
.escena.act08{
	background-image:url("../img/escenas/ejer1_8/act08.png");
}
.escena.act09{
	background-image:url("../img/escenas/ejer1_8/act09.png");
}
.escena.act10{
	background-image:url("../img/escenas/ejer1_8/act10.png");
}
.escena.guardia{
	background-image:url("../img/escenas/ejer1_8/guardia.png");
}

.info-cuadro{
	max-width:600px;
	margin:auto;
	margin-top:10px;
	background-color:#fff;
	padding:10px;
	font-size:19px;
	border-radius: 20px;
	border: solid 3px #ccc;
}

.info-cuadro .info-titulo{
	color:#000;
}

#paleta-colores{
	margin-top:20px;
	font-size:18px;
	margin-left: -10px;
	padding-right: 10px;
}


#paleta-colores .color-info{
	color:#666;
	font-style: italic;
	padding: 5px;
	border:dotted 2px #ccc;
	margin-bottom:10px;
}

#paleta-colores .color-txt{
	display: block;
	color:#000;
	text-decoration: none;
	 -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;

}

.animacion{
	 -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}


#paleta-colores .color-txt:hover,
#paleta-colores .color-txt.active{
   -moz-transform: scale(1.1);
   -webkit-transform: scale(1.1);
   -o-transform: scale(1.1);
   -ms-transform: scale(1.1);
   transform: scale(1.1);
}

#paleta-colores .color-txt.inactive{
	opacity:0.5;
}

#paleta-colores .cl{
	display: inline-block;
	width:30px;
	height:30px;
	border-radius: 15px;
	border:solid 3px #000;
}

#paleta-colores .cl-label{
	display: inline-block;

}


.escena.autovia{
	background-image:url("../img/escenas/ejer1_10/autovia.png");
}


.escena.ejer11_01{
	background-image:url("../img/escenas/ejer1_11/escena.png");
}

.escena.ejer11_02{
	background-image:url("../img/escenas/ejer1_11/act01.png");
}
.escena.ejer11_03{
	background-image:url("../img/escenas/ejer1_11/act02.png");
}
.escena.ejer11_04{
	background-image:url("../img/escenas/ejer1_11/act03.png");
	background-size: cover !important;
}
.escena.ejer11_05{
	background-image:url("../img/escenas/ejer1_11/act04.png");
}
.escena.ejer11_06{
	background-image:url("../img/escenas/ejer1_11/act05.png");
}


.escena.ejer12_01{
	background-image:url("../img/escenas/ejer1_12/act01.png");
}

.escena.ejer12_02{
	background-image:url("../img/escenas/ejer1_12/act02.png");
}

.escena.ejer12_03{
	background-image:url("../img/escenas/ejer1_12/act03.png");
}
.escena.ejer12_04{
	background-image:url("../img/escenas/ejer1_12/act04.png");
}
.escena.ejer12_05{
	background-image:url("../img/escenas/ejer1_12/act05.png");
}


.calculadora{
	margin-top:20px;
}

.calculadora textarea{
	font-family:"Curier new",Arial,sans-serif;
	width: 100%;
  	text-align: right;
  	font-size: 30px;
  	border: 1px dashed;
}

.calculadora .info{
	font-size:18px;
	color:#666;
	padding:5px;
	text-align: right;
}

.escena.portada-ud2{
	background-image:url("../img/escenas/ejer2_0/portada.png");

}

.escena.ud2-intro{
	background-image:url("../img/escenas/ejer2_1/intro.png");

}

.escena.ud2-monumentos{
	background-image:url("../img/escenas/ejer2_1/monumentos.png");

}

.escena.ud2-parque{
	background-image:url("../img/escenas/ejer2_1/parque.png");

}

.escena.ud2-castillo{
	background-image:url("../img/escenas/ejer2_1/castillo.png");

}

.escena.ud2-metro{
	background-image:url("../img/escenas/ejer2_1/metro.png");

}

#mapa-ud2-intro text{
	font-family: 'Arial',sans-serif;
}

.escena.ud2-clase01{
	background-image:url("../img/escenas/ejer2_2/clase01.png");
}

.escena.ud2-clase02{
	background-image:url("../img/escenas/ejer2_2/clase02.png");
}

.escena.ud2-clase03{
	background-image:url("../img/escenas/ejer2_2/clase03.png");
}

.escena.ud2-mapa{
    background-color: #9BCEF3;
}

.escena.ud2-mapa .zoom-out{
	margin-top: -70px;
	transform: scale(0.8);
	background-color: rgb(155, 206, 243);
	margin-left: -120px;
}

.option-normal {
	color:#666;
	display:inline-block;
	margin-right:10px;

}

.escena.ud2-ejer3{
	/*background-image:url("../img/escenas/ejer2_3/intro.png");*/
}

.fondo-transportes{
	background-image:url("../img/escenas/ejer2_4/fondo.png");
}

.ud2-ejer4-privado{
	background-image:url("../img/escenas/ejer2_4/privado.png");
}

.ud2-ejer4-publico{
	background-image:url("../img/escenas/ejer2_4/publico.png");
}


.transportes h1{
	font-family: verdana,sans-serif;
	color:#fff;
	font-weight:bold;
	text-shadow:1px 1px #000;
	font-size: 24px;
	text-align: center;
}

.transportes.privados{
    float: left;
    width: 50%;
    height: 100%;
    background-color:#D2753F;
    background-color:rgba(210,117,63,0.6);
}

.transportes.publicos{
    float: right;
    width: 50%;
    height: 100%;
    background-color:#086AAB;
    background-color:rgba(8,106,171,0.6);
}

.transportes.contenedor{
	position: absolute;
	width: 550px;
	background-color: rgb(253, 253, 253);
	/*height: 300px;*/
	top: 120px;
	margin-left: -275px;
	left: 50%;
	border: 3px dashed rgb(210, 117, 63);
	padding:10px;
}

.transportes.contenedor .transporte-libre{
	/*display:inline-block;*/
	/*max-width:150px;*/
	float: left;
	text-align: center;
	font-family: 'Arial',sans-serif;
	padding:5px;
	background-color:#fff;
}

.transportes.contenedor .transporte-libre.desactivado{
	opacity:0.3;
}

.transportes.contenedor .t1{
	max-width:110px;
}

.transportes.contenedor .t2{
	max-width:130px;
}

.transportes.contenedor .t3{
	max-width:210px;
}

.medios-transporte  [ng-drop].drag-enter{
        border:solid 5px red;
    }

.transportes-listado .transporte{
	position: relative;
	background-color: #FFF;
	width: 180px;
	height: 110px;
	margin-left: 20px;
	margin-top: 10px;
	border: 2px dashed #D2753F;
	background-size: 70%;
	background-position: center center;
	background-repeat: no-repeat;
}

.transportes-listado .transporte .lbl{
	text-align: center;
	position:absolute;
	width:100%;
	bottom:5px;
	font-family: 'Arial',sans-serif;

}

.transportes.publicos .transporte{
	margin-left: 60%;
}

.escena.ud2-ejer5{
	background-image:url("../img/escenas/ejer2_5/intro.png");
}

.ud2-distacia{
	background-color:#DCFFFD;
}

.item-pregunta{
	margin-top:20px;
	font-family: 'Arial',sans-serif;
}

.item-pregunta img{
	border: 4px solid #226693;
	border-radius: 5px;
}

.item-pregunta h2{
	color:#000;
}

.item-pregunta .desc{
	color:#666;
	font-size:18px;
}

.item-pregunta input{
	background:none;
	border:none;
	border-bottom: 1px solid #666;
	display: inline;
	width:50px;
	text-align:center;
	font-weight: bold;
}

.trans-containers{
	position:absolute;
	width:100%;
	height:100%;
}

.trans-containers h1{
	font-family: verdana, sans-serif;
	font-weight: bold;
	text-shadow: 1px 1px 4px #000;
	color:#fff;
	margin:0;
	font-size:40px;
	text-align: center;
}

.trans-containers .aire,
.trans-containers .aire h1{
	line-height: 225px;
}

.trans-containers .aire .container-overlay{
	line-height: 225px;
	background-color:rgba(210, 117, 63, .6);
}

.trans-containers .mar,
.trans-containers .mar h1{
	line-height: 130px;
}

.trans-containers .mar .container-overlay{
	background-color:rgba(51, 101, 53, 0.6);
}


.trans-containers .tierra h1{
	padding-top:30px;
}

.trans-containers .tierra .container-overlay{
	background-color:rgba(255, 221, 125, 0.6);
	height: 330px;
}

.trans-containers .container-overlay{
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
    opacity:1;
}

.trans-containers .container-overlay.no-visible{
	opacity:0;
}

.trans-containers .trans-container.drag-enter .container-overlay{
	opacity:1 ;
}


.transportes-tipos{
    position: absolute;
    background-color: #fff;
    height: 100%;
    width:120px;
    left:0px;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
		-webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;
}

.transportes-tipos.not-visible{
	left:-200px;
}

.transportes-tipos{
	border-right:4px solid #096aab;
	box-shadow: 0px 4px 13px #000;
}

.transportes-tipos .transporte{
	text-align: center;
	border-bottom: 1px solid #096aab;
    padding: 3px;

}


.transportes-tipos .desactivado{
	opacity:0.3;
}

.intro-distacia{
	background-image:url("../img/escenas/ejer2_6/intro.png");

}

[ng-drag="true"] { cursor: -moz-grab;  cursor: -webkit-grab; }

.dragging { cursor: move; }



.escena.ud2-ejer7{
	background-image:url("../img/escenas/ejer2_7/intro.png");
}

.escena.ud2-ejer7-atasco{
	background-image:url("../img/escenas/ejer2_7/atascos.png");
}

.escena.ud2-ejer7-accidente{
	background-image:url("../img/escenas/ejer2_7/accidentes.png");
}

.escena.ud2-ejer7-contaminacion{
	background-image:url("../img/escenas/ejer2_7/contaminacion.png");
}

.escena.ud2-ejer7-renovables{
	background-image:url("../img/escenas/ejer2_7/renovables.png");
}

.escena.ud2-ejer7-no-renovables{
	background-image:url("../img/escenas/ejer2_7/no-renovables.png");
}





.medios-transporte-energia{
	color:#000;
}

.fondo-transportes-energia{
	background-image:url("../img/escenas/ejer2_8/fondo.png");
}

.transportes-energia h1{
	font-family: verdana,sans-serif;
	color:#fff;
	font-weight:bold;
	font-size: 24px;
	text-align: center;
}

.transportes-energia.contaminantes{
    float: left;
    width: 50%;
    height: 100%;

}


.transportes-energia.contaminantes h1{
	color:#685641;
	text-align:left;
	padding-left:20px;
}

.transportes-energia.limpios h1{
	color:#62A000;
	text-align:right;
	padding-right:20px;
}



.transportes-energia.limpios{
    float: right;
    width: 50%;
    height: 100%;

}

.transportes-energia.contenedor{
	position: absolute;
	width: 350px;
	top: 10px;
	margin-left: -175px;
	left: 50%;
	padding:10px;
	text-align: center;
}

.transportes-energia.contenedor .transporte-libre-energia{
	display:inline-block;
	text-align: center;
	font-family: 'Arial',sans-serif;
	padding:5px;
}

.transportes-energia.contenedor .transporte-libre-energia.desactivado{
	opacity:0.3;
}

.transportes-energia.contenedor .t1{
	max-width:110px;
}

.transportes-energia.contenedor .t2{
	max-width:130px;
}

.transportes-energia.contenedor .t3{
	max-width:210px;
}

.medios-transporte-energia  [ng-drop].drag-enter{
        border:solid 5px red;
    }

.transportes-listado-energia .transporte-energia {
	position: relative;
	max-width: 150px;
	display:inline-block;
}

.transportes-listado-energia .transporte-energia .lbl{
	text-align: center;
	width:100%;
	font-family: 'Arial',sans-serif;

}

.contenedor-energia{
	display:inline-block;
	max-width:300px;
}

.transportes-energia.contaminantes .transporte-energia{
	margin-left: 10px;
}


.ud2-ejer9-intro{
	background-image:url("../img/escenas/ejer2_9/intro.png");
}

.ud2-ejer9-hermano{
	background-image:url("../img/escenas/ejer2_9/hermano.png");
}

.ud2-ejer9-hibrido{
	background-image:url("../img/escenas/ejer2_9/hibrido.png");
}


.ud2-ejer9-coches{
	background-image:url("../img/escenas/ejer2_9/consumos.png");
}

.ud2-ejer9-consumos{
	background-image:url("../img/escenas/ejer2_9/fondo.png");
}

#grafico-ud2-textos,
#grafico-ud2-textos svg text{
	font-family: Arial, sans-serif !important;
}


.item-src,
.item-tar{
	cursor:pointer;
	cursor:hand;
}

.item-tar.item-no-selected text{
	opacity:0;
}

.item-tar.item-selected text{
	opacity:1;
}



.item-src.item-no-selected{
	opacity:0.5;
}

.item-src.item-selected{
	opacity:1;
}

.item-src:hover{
	opacity:1;
}


.consumos{
	width:90%;
	margin-left:auto;
	margin-top:50px;
	margin-right:auto;
	background-color:#fff;
	border: 4px solid #096aab;
}


.consumos th,
.consumos td{
	border: 4px solid #096aab;
	text-align: center;
	color:#000;
	font-size:20px;
	font-family: 'Arial',sans-serif;
	padding:5px;
}

.consumos input[type="text"]{
	border:none;
	border-bottom: 1px dotted #000;
	width:50px;
	text-align: center;
}

.i-verdadero,
.i-falso{
	font-size:22px;
}

.i-verdadero{
	color:green;
}

.i-falso{
	color:red;
}


.escena.ud2_ejer10_01{
	background-image:url("../img/escenas/ejer2_10/escena01.png");
}

.escena.ud2_ejer10_02{
	background-image:url("../img/escenas/ejer2_10/escena02.png");
}

.escena.ud2_ejer10_03{
	background-image:url("../img/escenas/ejer2_10/escena03.png");
}

.escena.ud2_ejer10_04{
	background-image:url("../img/escenas/ejer2_10/escena04.png");
}

.escena.ud2_ejer10_05{
	background-image:url("../img/escenas/ejer2_10/escena05.png");
}

.escena.ud2_ejer10_06{
	background-image:url("../img/escenas/ejer2_10/escena06.png");
}

.escena.ud2_ejer10_07{
	background-image:url("../img/escenas/ejer2_10/escena07.png");
}

.escena.ud2_ejer10_08{
	background-image:url("../img/escenas/ejer2_10/escena08.png");
}

.escena.ud2_ejer10_09{
	background-image:url("../img/escenas/ejer2_10/escena09.png");
}

.ud2_ejer11_plano{
	background-image:url("../img/escenas/ejer2_11/plano.png");
	background-size: initial !important;
	background-repeat:no-repeat;
}

.ud2_ejer12_metro{
	background-image:url("../img/escenas/ejer2_12/plano.png");
	background-size: initial !important;
}

.escena.ud3-intro{
	background-image:url("../img/escenas/ejer3_1/intro.jpg");
}

.escena.ud3-ruta{
	background-image:url("../img/escenas/ejer3_1/mapa.png");
}

.escena.ud3-ruta1{
	background-image:url("../img/escenas/ejer3_1/mapa01.png");
}

.escena.ud3-ruta2{
	background-image:url("../img/escenas/ejer3_1/mapa02.png");
}

.escena.ud3-ruta3{
	background-image:url("../img/escenas/ejer3_1/mapa03.png");
}

.escena.ud3-ruta4{
	background-image:url("../img/escenas/ejer3_1/mapa04.png");
}

.escena.ud3-cp01{
	background-image:url("../img/escenas/ejer3_2/01.jpg");
}

.escena.ud3-cp02{
	background-image:url("../img/escenas/ejer3_2/02.jpg");
}

.escena.ud3-cp03{
	background-image:url("../img/escenas/ejer3_2/03.jpg");
}

.escena.ud3-cp04{
	background-image:url("../img/escenas/ejer3_2/04.jpg");
}

.escena.ud3-bicis{
	background-image:url("../img/escenas/ejer3_3/bicis.png");
}

.escena.ud3-bici-urbana{
	background-image:url("../img/escenas/ejer3_3/urbana.png");
}

.escena.ud3-bici-cicloturismo{
	background-image:url("../img/escenas/ejer3_3/cicloturismo.png");
}

.escena.ud3-bici-carretera{
	background-image:url("../img/escenas/ejer3_3/carretera.png");
}

.escena.ud3-bici-contrareloj{
	background-image:url("../img/escenas/ejer3_3/contrareloj.png");
}

.escena.ud3-bici-terreno{
	background-image:url("../img/escenas/ejer3_3/terreno.png");
}

.escena.ud3-bici-descenso{
	background-image:url("../img/escenas/ejer3_3/descenso.png");
}

.escena.ud3-bici-electrica{
	background-image:url("../img/escenas/ejer3_3/electrica.png");
}

.escena.ud3-bici-tandem{
	background-image:url("../img/escenas/ejer3_3/tandem.png");
}

.escena.ud3-bici-reclinada{
	background-image:url("../img/escenas/ejer3_3/reclinada.png");
}

.escena.ud3-partes{
	background-image:url("../img/escenas/ejer3_4/bici.png");
}

.escena.ud3-partes2{
	background-image:url("../img/escenas/ejer3_4/partes.png");
}

.escena.ud3-seguridad0{
	background-image:url("../img/escenas/ejer3_5/dialog00.png");
}

.escena.ud3-seguridad1{
	background-image:url("../img/escenas/ejer3_5/dialog01.png");
}

.escena.ud3-seguridad2{
	background-image:url("../img/escenas/ejer3_5/dialog02.png");
}

.escena.ud3-seguridad3{
	background-image:url("../img/escenas/ejer3_5/dialog03.png");
}

.escena.ud3-seguridad4{
	background-image:url("../img/escenas/ejer3_5/dialog04.png");
}

.escena.ud3-seguridad5{
	background-image:url("../img/escenas/ejer3_5/dni.png");
}

.ud3-seguridad-juego{
	background-color: #fff;
}

.ud3-seguridad-juego .bg{
	background-image:url("../img/escenas/ejer3_5/fondo.png");
	background-size: cover;

}
.item-seguridad{
	position: relative;
	display: inline-block;
	max-width: 60px;
	margin:5px;
	z-index: 10;
}

.item-seguridad.big{
		max-width: 90px !important;
}


.item-seguridad.break{
	display: block;
	padding:5px;
}

.cuerpo{
	position: relative;
	height: 70%;
	margin:auto;
	margin-top:40px;
	width: 50%;
	background-image:url("../img/escenas/ejer3_5/body.png");
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}

.cuerpo .elemento-cuerpo{
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	position: absolute;
	width:100%;
	height:100%;
}

#escena{
	background-color: #fff;
}

.escena.ud3-ajustes-intro{
	background-image:url("../img/escenas/ejer3_6/intro.png");
}

.escena.ud3-ajustes-altura{
	background-image:url("../img/escenas/ejer3_6/altura.png");
}

.escena.ud3-ajustes-manillar{
	background-image:url("../img/escenas/ejer3_6/manillar.png");
}

.escena.ud3-ajustes-sillin{
	background-image:url("../img/escenas/ejer3_6/sillin.png");
}

.escena.ud3-bici-partes1{
	background-image:url("../img/escenas/ejer3_7/partes01.png");
}

.escena.ud3-bici-partes2{
	background-image:url("../img/escenas/ejer3_7/partes02.png");
}

.escena.ud3-bici-partes3{
	background-image:url("../img/escenas/ejer3_7/partes03.png");
}

.escena.ud3-bici-cambio01{
	background-image:url("../img/escenas/ejer3_7/cambio01.png");
}

.escena.ud3-bici-cambio02{
	background-image:url("../img/escenas/ejer3_7/cambio02.png");
}

.escena.ud3-bici-combina{
	background-image:url("../img/escenas/ejer3_7/combina.png");
}

.escena.ud3-bici-plato1{
	background-image:url("../img/escenas/ejer3_7/plato1.png");
	}

	.escena.ud3-bici-plato2{
		background-image:url("../img/escenas/ejer3_7/plato2.png");
		}
		.escena.ud3-bici-plato3{
			background-image:url("../img/escenas/ejer3_7/plato3.png");
			}

.esquema-bici{
	margin-top: 20px;
	position: relative;
	z-index: 5;
}


.figura-bici.drag-enter{
        border:dotted 2px red;
    }

.opaque{
	background-color: #fff;
}
.escena.ud3-bici-pinones{
	background-image:url("../img/escenas/ejer3_7/pinones.png");
	}

.escena.ud3-bici-pinon1{
	background-image:url("../img/escenas/ejer3_7/pinon1.png");
	}

.escena.ud3-bici-pinon9{
	background-image:url("../img/escenas/ejer3_7/pinon9.png");
}

.dialogo.plato1{
	background-color: #feea93;
	border: 8px solid #e1b80d;
	color: #e1b80d;
}
.dialogo.plato1:after{
	border-color: transparent #feea93;
}
.dialogo.plato1:before{
	border-color: transparent #e1b80d;
}

.dialogo.plato2{
	background-color: #ffbe84;
	border: 8px solid #ff7900;
	color: #ff7900;
}
.dialogo.plato2:after{
	border-color: transparent #ffbe84;
}
.dialogo.plato2:before{
	border-color: transparent #ff7900;
}

.dialogo.plato3{
	background-color: #fea3a3;
	border: 8px solid #941a1a;
	color: #941a1a;
}
.dialogo.plato3:after{
	border-color: transparent #fea3a3;
}
.dialogo.plato3:before{
	border-color: transparent #941a1a;
}

.dialogo.pinon1{
	background-color: #b6d9ff;
	border: 8px solid #00448e;
	color: #00448e;
}
.dialogo.pinon1:after{
	border-color: transparent #b6d9ff;
}
.dialogo.pinon1:before{
	border-color: transparent #00448e;
}

.dialogo.pinon9{
	background-color: #baffb8;
	border: 8px solid #0d8e09;
	color: #0d8e09;
}
.dialogo.pinon9:after{
	border-color: transparent #baffb8;
}
.dialogo.pinon9:before{
	border-color: transparent #0d8e09;
}


.escena.ud3-bici-rueda{
	background-image:url("../img/escenas/ejer3_8/partes.png");
}

.ud3-reproductor{
	background-image:url("../img/escenas/ejer3_8/clase.png");

}

.video-js{
width: 100%;
height: 470px;
}

.escena.ud3-caso01{
	background-image:url("../img/escenas/ejer3_9/01.png");
}

.escena.ud3-caso02{
	background-image:url("../img/escenas/ejer3_9/02.png");
}

.escena.ud3-caso03{
	background-image:url("../img/escenas/ejer3_9/03.png");
}


.escena.ud3-sen-fondo{
	background-image:url("../img/escenas/ejer3_9/fondo.png");
}

.escena.ud3-sen-senales{
	background-image:url("../img/escenas/ejer3_9/senales.png");
}

.escena.ud3-sen-agente1{
	background-image:url("../img/escenas/ejer3_9/agente1.png");
}

.escena.ud3-sen-agente2{
	background-image:url("../img/escenas/ejer3_9/agente2.png");
}

.escena.ud3-sen-circunstancial{
	background-image:url("../img/escenas/ejer3_9/circunstancial.png");
}

.escena.ud3-sen-barrera{
	background-image:url("../img/escenas/ejer3_9/barrera.png");
}

.escena.ud3-sen-panel{
	background-image:url("../img/escenas/ejer3_9/panel.png");
}

.escena.ud3-sen-semaforo{
	background-image:url("../img/escenas/ejer3_9/semaforo.png");
}

.escena.ud3-sen-verde{
	background-image:url("../img/escenas/ejer3_9/verde.png");
}

.escena.ud3-sen-rojo{
	background-image:url("../img/escenas/ejer3_9/rojo.png");
}

.escena.ud3-sen-ciclos{
	background-image:url("../img/escenas/ejer3_9/ciclos.png");
}


.escena.ud3-sen-ambar{
	background-image:url("../img/escenas/ejer3_9/ambar.png");
}

.escena.ud3-sen-marca1{
	background-image:url("../img/escenas/ejer3_9/marca1.png");
}

.escena.ud3-sen-marca2{
	background-image:url("../img/escenas/ejer3_9/marca2.png");
}
.escena.ud3-sen-marca3{
	background-image:url("../img/escenas/ejer3_9/marca3.png");
}

.escena.ud3-circular01{
	background-image:url("../img/escenas/ejer3_10/01.png");
}

.escena.ud3-circular02{
	background-image:url("../img/escenas/ejer3_10/02.png");
}

.escena.ud3-circular03{
	background-image:url("../img/escenas/ejer3_10/03.png");
}

.escena.ud3-circular04{
	background-image:url("../img/escenas/ejer3_10/04.png");
}

.escena.ud3-circular-fondo{
	background-image:url("../img/escenas/ejer3_10/fondo.png");
}

.conjunto-senales{
	background-color: rgb(255, 255, 255);
	margin: 10px;
	padding: 20px;
	border-radius: 10px;
	border: 3px solid red;
}

.conjunto-senales .senal{
		background-color: #fff;

}

.conjunto-senales h2{
	color:red;
	margin: 0;
	font-size: 18px;
	font-family: sans-serif;
}

.conjunto-senales .senal .senal-fondo{
	background-color: #fff;
	background-size: contain;
	background-position: center center;
	width: 100%;
	height: 200px;
	background-repeat: no-repeat;
}

.conjunto-senales .senal .senal-tit{
	font-size: 16px;
	text-align: center;
	color: #000;
	font-family: sans-serif;
}

.conjunto-senales .senal.dragging{
	opacity:0.8;
}

.conjunto-senales .sen-num{
	background-color: #aaa;
	color:#fff !important;
	font-size: 40px;
	line-height: 200px;
	text-align: center;
}

.conjunto-senales  [ng-drop].drag-enter{
  	background-color: red;
}

.escena.ud3-circular-p1{background-image:url("../img/escenas/ejer3_10/p1.png");}
.escena.ud3-circular-p2{background-image:url("../img/escenas/ejer3_10/p2.png");}
.escena.ud3-circular-p3{background-image:url("../img/escenas/ejer3_10/p3.png");}
.escena.ud3-circular-p4{background-image:url("../img/escenas/ejer3_10/p4.png");}
.escena.ud3-circular-p5{background-image:url("../img/escenas/ejer3_10/p5.png");}
.escena.ud3-circular-p6{background-image:url("../img/escenas/ejer3_10/p6.png");}
.escena.ud3-circular-p7{background-image:url("../img/escenas/ejer3_10/p7.png");}
.escena.ud3-circular-p8{background-image:url("../img/escenas/ejer3_10/p8.png");}
.escena.ud3-circular-p9{background-image:url("../img/escenas/ejer3_10/p9.png");}
.escena.ud3-circular-p10{background-image:url("../img/escenas/ejer3_10/p10.png");}
.escena.ud3-circular-p11{background-image:url("../img/escenas/ejer3_10/p11.png");}
.escena.ud3-circular-p12{background-image:url("../img/escenas/ejer3_10/p12.png");}
.escena.ud3-circular-p13{background-image:url("../img/escenas/ejer3_10/p13.png");}
.escena.ud3-circular-p14{background-image:url("../img/escenas/ejer3_10/p14.png");}
.escena.ud3-circular-p15{background-image:url("../img/escenas/ejer3_10/p15.png");}
.escena.ud3-circular-p16{background-image:url("../img/escenas/ejer3_10/p16.png");}

.escena.ud3-casos-fondo{background-image:url("../img/escenas/ejer3_11/fondo.png");}
.escena.ud3-casos-p1{background-image:url("../img/escenas/ejer3_11/p1.png");}
.escena.ud3-casos-p2{background-image:url("../img/escenas/ejer3_11/p2.png");}
.escena.ud3-casos-p3{background-image:url("../img/escenas/ejer3_11/p3.png");}
.escena.ud3-casos-p4{background-image:url("../img/escenas/ejer3_11/p4.png");}
.escena.ud3-casos-p5{background-image:url("../img/escenas/ejer3_11/p5.png");}
.escena.ud3-casos-p6{background-image:url("../img/escenas/ejer3_11/p6.png");}
.escena.ud3-casos-p7{background-image:url("../img/escenas/ejer3_11/p7.png");}
.escena.ud3-casos-p8{background-image:url("../img/escenas/ejer3_11/p8.png");}
.escena.ud3-casos-p9{background-image:url("../img/escenas/ejer3_11/p9.png");}
.escena.ud3-casos-p10{background-image:url("../img/escenas/ejer3_11/p10.png");}

.escena.ud3-comportamiento01{
	background-image:url("../img/escenas/ejer3_11/01.png");
}

.escena.ud3-comportamiento02{
	background-image:url("../img/escenas/ejer3_11/02.png");
}

.escena.ud3-comportamiento03{
	background-image:url("../img/escenas/ejer3_11/03.png");
}

.escena.ud3-comportamiento04{
	background-image:url("../img/escenas/ejer3_11/04.png");
}


.escena.ud3-accidente01{background-image:url("../img/escenas/ejer3_12/accidente01.png");}
.escena.ud3-accidente02{background-image:url("../img/escenas/ejer3_12/accidente02.png");}
.escena.ud3-accidente03{background-image:url("../img/escenas/ejer3_12/accidente03.png");}
.escena.ud3-accidente04{background-image:url("../img/escenas/ejer3_12/accidente04.png");}
.escena.ud3-accidente05{background-image:url("../img/escenas/ejer3_12/accidente05.png");}
.escena.ud3-accidente06{background-image:url("../img/escenas/ejer3_12/accidente06.png");}
.escena.ud3-accidente07{background-image:url("../img/escenas/ejer3_12/accidente07.png");}
.escena.ud3-accidente08{background-image:url("../img/escenas/ejer3_12/accidente08.png");}
.escena.ud3-accidente09{background-image:url("../img/escenas/ejer3_12/accidente09.png");}

.escena.ud3-barras{background-image:url("../img/escenas/ejer3_13/barras.png");}

.escena.ud3-hacer-fondo{background-image:url("../img/escenas/ejer3_14/fondo.png");}
.escena.ud3-hacer-p1{background-image:url("../img/escenas/ejer3_14/p1.png");}
.escena.ud3-hacer-p2{background-image:url("../img/escenas/ejer3_14/p2.png");}
.escena.ud3-hacer-p3{background-image:url("../img/escenas/ejer3_14/p3.png");}
.escena.ud3-hacer-p4{background-image:url("../img/escenas/ejer3_14/p4.png");}

.escena.fin{background-image:url("../img/escenas/ejer3_14/fin.png");}


.escena.svg text{
	font-family: 'Arial',sans-serif !important;
}

#guia-ud3-bici-partes text{
	font-weight: bold;
	cursor:pointer;
	cursor:hand;
}

.text-rollover{
	font-size:20px !important;
}

.text-rollover.active,
.text-rollover:hover{
	font-size:24px !important;
}

.text-rollover.active{
	text-decoration:line-through;
}

/*.blur-1{
	filter: blur(1px); -webkit-filter: blur(1px); -moz-filter: blur(1px);

	-o-filter: blur(1px); -ms-filter: blur(1px);

	filter: url(blur.svg#blur-1);
}

.blur-2{
	filter: blur(1.5px); -webkit-filter: blur(1.5px); -moz-filter: blur(1.5px);

	-o-filter: blur(2px); -ms-filter: blur(1.5px);

	filter: url(blur.svg#blur-2);
}

.blur-3{
	filter: blur(3px); -webkit-filter: blur(3px); -moz-filter: blur(3px);

	-o-filter: blur(3px); -ms-filter: blur(3px);

	filter: url(blur.svg#blur-3);
}*/

.svg-filter-animation {
  -webkit-animation: filter 1s;
  -moz-animation: filter 1s;
  animation: filter 1s;
}

#splash{
	position: absolute;
}

.btn-back{
	margin-top: 5px;
	text-align: center;
	transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-webkit-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
}

.btn-back:hover{
	transform: scale(1.1);
}

.btn-trofeo{
	position: absolute;
	width: 100%;
	margin-top: 30px;
	text-align: center;
	transition: all 0.2s linear;
	opacity: 0.5;

	-moz-transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
}

.btn-trofeo:hover{
	opacity: 1;
}

.btn-play{
	position: absolute;
	width: 100%;
	text-align: center;
	bottom: 0px;
	opacity: 0.5;

	transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
}

.btn-play:hover{
	opacity: 1;

}

#juego{
	position: absolute;
	font-family: Arial, sans-serif;

}

#juego .juego-fondo{
	background-image:url("../img/juego/splash.png");
}

#juego .trofeo-fondo{
	background-image:url("../img/juego/trofeos.png");
}

.juego-header{
	position: relative;
}

.juego-chrono{
	position: absolute;
	right: 10px;
	top: 10px;
	padding: 10px;
	font-size: 24px;
	font-weight: bolder;
	color: #fff;
	background-color: red;
	border-radius: 20px;
	box-shadow: 0px 3px 5px #666;
}

.juego-marcador{
	width:300px;
	margin: auto;
	margin-top:20px;
	text-align: center;
	font-size: 16px;
	color: #fff;
	background-color: #096aab;
	border-radius: 20px;
	box-shadow: 0px 3px 5px #666;
}

.btn-tmp{
	position: absolute;
	bottom: 0;
}

.btn-tmp a{
	display: inline-block;
	font-size: 20px;
	color: #fff;
	background-color: #096aab;
	padding:10px;
	margin:10px;
	border: solid 3px #fff;
}

.juego-big-font{
	font-size: 40px;
	font-weight: bold;
	text-shadow: 1px 1px 2px #000;
}

.juego-semaforo{
	position: absolute;
	left: 10px;
	top: 10px;
	width: 76px;
	height: 82px;
	background-position: center center;
	background-size: contain;
	background-image:url("../img/juego/semaforo.png");
}

.anim{
	animation-name: semaforo;
	animation-duration: 0.5s;
}

.juego-semaforo-ko,
.juego-semaforo-ok{
	width: 76px;
	height: 82px;
	background-position: center center;
	background-size: contain;
	background-image:url("../img/juego/semaforo-ko.png");
	transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-webkit-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;

}

.juego-semaforo-ok{
	background-image:url("../img/juego/semaforo-ok.png");
}

.juego-semaforo-ko.ng-hide,
.juego-semaforo-ok.ng-hide {
  opacity: 0;


}

@keyframes semaforo {
    0%   {transform:scale(1)}
    25%  {transform:scale(1.1)}
    50%  {transform:scale(1.2)}
    100% {transform:scale(1)}
}


.juego-questions{
	position: absolute;
	bottom: 20px;
	width: 90%;
	left:5%;
}

.juego-question{
	background-color: #096aab;
	color: #fff;
	font-size: 24px;
	padding: 20px;
	border: solid 4px #fff;
	border-radius: 20px;
	margin-bottom: 20px;
	text-align: center;
}

.juego-respuesta{
	position: relative;
	display: block;
	background-color: #096aab;
	border-radius: 20px;
	color: #fff;
	margin-top: 10px;
	padding: 10px;
	font-weight: bold;
	font-size: 18px;
	border: solid 2px #fff;

	transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-webkit-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
}

.juego-respuesta:hover,
.juego-respuesta:active,
.juego-respuesta:focus{
	text-decoration: none;
	color: #fff;
}

.juego-respuesta:hover{
	text-decoration: none;
	color: #fff;
	opacity: 0.8;
	transform: scale(1.1);
	z-index: 2;
	box-shadow: 0px 2px 3px #000;
}

.juego-respuesta.r-a{
	background-color: #975938;
}

.juego-respuesta.r-b{
	background-color: #69085a;
}

.juego-respuesta.r-c{
	background-color: #41a62a;
}

.juego-respuesta.r-d{
	background-color: #db9602;
}

.juego-respuesta-fondo{
	position: absolute;
	left:0;
	right: 0;
	top:0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.juego-respuesta-fondo.contain{
	background-size: contain;
}

.juego-respuesta-fondo.auto{
	background-size:auto;
}


.stat-container{
	width:90%;
	border:solid 3px #096aab;
	margin:auto;
	margin-top: 10px;
	background-color:#fff;
	border-radius: 10px;
	padding:10px;
	text-align: center;
}

.stat-container h1{
	color:#096aab;
	font-size: 24px;
	font-weight: bold;
	margin-top: 0px;
	margin-bottom: 2px;
	text-align: center;
	border-bottom: 2px solid #ccc;
	padding-bottom: 2px;
}

.stat-container h2{
	color:#666;
	font-size: 16px;
	margin-top: 5px;
	margin-bottom: 5px;
	text-align: center;
}

.stat-container h3{
	color:#888;
	font-size: 14px;
	margin-top: 5px;
	margin-bottom: 5px;
	text-align: center;
}

.stat-container .trofeo{
	display: inline-block;
	max-width: 180px;
	margin-left: 5px;
	margin-right: 5px;
}

.stat-container .carnet{
	display: inline-block;
	max-width: 250px;

}