
html>/**/body .prev:before, x:-moz-any-link, x:default {
	line-height:1em;
} 	

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

/* Fonts: */
@font-face {
    font-family: 'ag-book';
    src: url('fonts/ag-book-rounded-bold.eot');
    src: url('fonts/ag-book-rounded-bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/ag-book-rounded-bold.woff') format('woff'),
         url('fonts/ag-book-rounded-bold.ttf') format('truetype');
    font-weight:400;
    font-style:normal;
}
@font-face {
	font-family: 'ModernPictograms';
    src: url('fonts/original_modernpics.eot?#iefix') format('embedded-opentype'), 
         url('fonts/original_modernpics.woff') format('woff'),
         url('fonts/original_modernpics.ttf') format('truetype'),
         url('fonts/original_modernpics.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}	
@font-face {
    font-family: 'HelveticaNeue';
    src: url('fonts/HelveticaNeue.eot');
    src: url('fonts/HelveticaNeue.eot?#iefix') format('embedded-opentype'),
         url('fonts/HelveticaNeue.woff') format('woff'),
         url('fonts/HelveticaNeue.ttf') format('truetype'),
         url('fonts/HelveticaNeue.svg#HelveticaNeue') format('svg');
    font-weight:400;
    font-style:normal;
}
@font-face {
	font-family: 'websymbolsregular';
	src: url('fonts/websymbolsregular.eot');
	src: url('fonts/websymbolsregular.woff') format('woff'), url('fonts/websymbolsregular.ttf') format('truetype'), url('fonts/websymbolsregular.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

/*
	Document Colours:
	-----------------------------
	#ecedef = Section Bg GRAY
	#c2c3c8 = Header Border GRAY
	#222221 = Paragraph Text GRAY
	#db9b5f = ORANGE
	#e369a3 = PURPLE
	#d8047f = Gradient MAGENTA
	#ec852f = Gradient ORANGE
	#b3b3b2 = Navigation GRAY
	#e25100 = Intense ORANGE
*/
.pantalla {
	width: 100vw; 
    height: 94.75vw; /* 100/94.75 = 1.1527 */
    max-height: 100vh;
    max-width: 105.54vh; /* 800/758 = 1.0554 */
	margin: auto;
	padding-bottom: 5em;
}
.pizarra {
    /*
	height: 80%;
    margin-left: 10.5% !important;
    margin-right: -100%;
    padding: 1% 3%;
    top: 20%;
    width: 70%;
	font-size:.7em;
	width: 800px;
	height: 768px;
	max-height: 100%;
	max-width: 100%;*/
	/*width: 100vw; 
    height: 86.75vw; /* 100/86.75 = 1.1527 */
   /* max-height: 100vh;
    max-width: 115.27vh; /* 800/694 = 1.1527 */
	width: 100%;
	height: 100%;
	margin: auto;
	position: relative;
	
}

/* Style: */
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
a, button, label, li {
	-webkit-transition: all .5s;
	transition: all .5s;
}
.cursiva{
	font-style:italic;}
	
.cursiva2{
	font-style:italic;}	

html, body {
	width: 100%;
	height: 100%;
}
body, h3 p.menor, ul.radio_options a, ul.radio_options label {
	font-family: 'HelveticaNeue', Arial, Helvetica, sans-serif;
	color: #222221;
}
header, h1, h2, h3, h4, h6, figure, .next, .prev, .titulo, button, label, .test_abc li span, input[type="button"], .question {
	font-family: 'ag-book';
	font-weight: 400;
}
strong, p a {
	font-weight: 400;
	color: #e369a3;
}
p a:hover {
	color: #ec852f;
}
a, button, label {
	cursor: pointer;
}
section {
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-box-shadow: 0 6px 6px #c2c3c8;
	-moz-box-shadow: 0 6px 6px #c2c3c8;
	box-shadow: 0 12px 6px -6px #c2c3c8;
	padding-top: 12%;
	background: #ecedef;
}

.op_test{
	width:100%;}
.menor3{
	color:#000 !important;}
.menor4{
	color:#FFF !important;}	
.menor5{	
color:#FFF !important;
    padding-left: 5%;
    padding-top: 17%;
    text-align: justify;
}		
#bg-sizer {
	max-width: 100%;
	max-height: 100%;
	width: 100%;
	height: auto;
}
/* Header: */
header {
	background: url(../img/bg-header.png) no-repeat top left transparent;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	background-size: 100% 100%;
	width: 100%;
	height: 13.44%;
	-webkit-box-shadow: 0 6px 0 #c2c3c8;
	-moz-box-shadow: 0 6px 0 #c2c3c8;
	box-shadow: 0 6px 0 #c2c3c8;
	margin: 0 0 6px;
	font-size: 1.8em;
	color: #fff;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9;
	display: table;
}
header h1 {
	display: table-cell;
	padding: 0 5% 0 5%;
	height: 100%;
	line-height: 1em;
	vertical-align: middle;
}
header h1 span {
	/*color: #db9b5f;
	background: #fff;
	display: inline-block;
	width: 1.4em;
	height: 1.4em;
	-webkit-border-radius: 99px;
	-moz-border-radius: 99px;
	border-radius: 99px;
	font-size: 1.4em;
	line-height: 1.4em;
	padding: 0;
	text-align: center;
	vertical-align: middle;
	margin-right: 3%;
	position: absolute;
	top: .6em;
	left: 5%;*/
}
header h2~h1 {
	  line-height: 90%;
    width: 70%;
}


#sin_fondo{
	border:none;
	background:none;
	   border: none;
	   font-family:"ag-book";
    color: white;
    font-size: 1.5em;
    font-weight: 400;}

header h2 {
	width: 50%;
	height: 100%;
	font-size: .8em;
	text-align: center;
	background: #db9b5f;
	display: table-cell;
	vertical-align: middle;
}
/*
	Article // Tipos de 
	artículo según el fondo:
	-----------------------------
	.intro				= fondo gradiente diagonal
	.intro.magenta		= fondo gradiente vertical, predomina magenta
	.intro.naranja		= fondo gradiente vertical, predomina naranja
	.temario			= fondo gris
	.temario.primero	= fondo gris, animaciones de comienzo de tema
	.escena				= fondo url completo, especificar img en el html
*/
article {
	-webkit-border-radius: 0 0 20px 20px;
	-moz-border-radius: 0 0 20px 20px;
	border-radius: 0 0 20px 20px;
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}
.intro, .intro_gral {
	color: #fff;
	/* Diagonal gradient: */
	background: #d8047f; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #d8047f 25%, #ec852f 75%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(25%,#d8047f), color-stop(75%,#ec852f)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-45deg,  #d8047f 25%,#ec852f 75%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-45deg,  #d8047f 25%,#ec852f 75%); /* Opera 11.10+ */
	background: -ms-linear-gradient(-45deg,  #d8047f 25%,#ec852f 75%); /* IE10+ */
	background: linear-gradient(135deg,  #d8047f 25%,#ec852f 75%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8047f', endColorstr='#ec852f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.intro.magenta {
	/* Vertical gradient, mostly magenta: */
	background: #d8047f; /* Old browsers */
	background: -moz-linear-gradient(top,  #d8047f 50%, #ec852f 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#d8047f), color-stop(100%,#ec852f)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #d8047f 50%,#ec852f 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #d8047f 50%,#ec852f 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #d8047f 50%,#ec852f 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #d8047f 50%,#ec852f 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8047f', endColorstr='#ec852f',GradientType=0 ); /* IE6-9 */
	padding: 6% 6% 2% 8%;
}
.intro.naranja {
	/* Vertical gradient, mostly orange: */
	background: #d8047f; /* Old browsers */
	background: -moz-linear-gradient(top,  #d8047f 0%, #ec852f 50%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d8047f), color-stop(50%,#ec852f)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #d8047f 0%,#ec852f 50%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #d8047f 0%,#ec852f 50%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #d8047f 0%,#ec852f 50%); /* IE10+ */
	background: linear-gradient(to bottom,  #d8047f 0%,#ec852f 50%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8047f', endColorstr='#ec852f',GradientType=0 ); /* IE6-9 */
	padding: 6% 6% 2% 8%;
}
.intro.naranja.extra {
	/* Vertical gradient, 90% orange: */
	background: rgb(227,105,163); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(227,105,163,1) 0%, rgba(236,133,47,1) 40%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(227,105,163,1)), color-stop(40%,rgba(236,133,47,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(227,105,163,1) 0%,rgba(236,133,47,1) 40%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(227,105,163,1) 0%,rgba(236,133,47,1) 40%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(227,105,163,1) 0%,rgba(236,133,47,1) 40%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(227,105,163,1) 0%,rgba(236,133,47,1) 40%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e369a3', endColorstr='#ec852f',GradientType=0 ); /* IE6-9 */
}

.intro {
	color: #fff;
	/* Diagonal gradient: */
	background: #d8047f; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #d8047f 25%, #ec852f 75%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(25%,#d8047f), color-stop(75%,#ec852f)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-45deg,  #d8047f 25%,#ec852f 75%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-45deg,  #d8047f 25%,#ec852f 75%); /* Opera 11.10+ */
	background: -ms-linear-gradient(-45deg,  #d8047f 25%,#ec852f 75%); /* IE10+ */
	background: linear-gradient(135deg,  #d8047f 25%,#ec852f 75%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8047f', endColorstr='#ec852f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}


.intro.magenta, .ambito.magenta {
	/* Vertical gradient, mostly magenta: */
	background: #d8047f; /* Old browsers */
	background: -moz-linear-gradient(top,  #d8047f 50%, #ec852f 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#d8047f), color-stop(100%,#ec852f)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #d8047f 50%,#ec852f 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #d8047f 50%,#ec852f 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #d8047f 50%,#ec852f 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #d8047f 50%,#ec852f 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8047f', endColorstr='#ec852f',GradientType=0 ); /* IE6-9 */
	padding: 6% 6% 2% 8%;
}
.edad.naranja, .ambito.naranja, .way.naranja {
	/* Vertical gradient, mostly orange: */
	background: #d8047f; /* Old browsers */
	background: -moz-linear-gradient(top,  #d8047f 0%, #ec852f 50%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d8047f), color-stop(50%,#ec852f)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #d8047f 0%,#ec852f 50%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #d8047f 0%,#ec852f 50%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #d8047f 0%,#ec852f 50%); /* IE10+ */
	background: linear-gradient(to bottom,  #d8047f 0%,#ec852f 50%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8047f', endColorstr='#ec852f',GradientType=0 ); /* IE6-9 */
	padding: 6% 6% 2% 8%;
}
.ambito.naranja.extra {
	/* Vertical gradient, 90% orange: */
	background: rgb(227,105,163); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(227,105,163,1) 0%, rgba(236,133,47,1) 40%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(227,105,163,1)), color-stop(40%,rgba(236,133,47,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(227,105,163,1) 0%,rgba(236,133,47,1) 40%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(227,105,163,1) 0%,rgba(236,133,47,1) 40%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(227,105,163,1) 0%,rgba(236,133,47,1) 40%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(227,105,163,1) 0%,rgba(236,133,47,1) 40%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e369a3', endColorstr='#ec852f',GradientType=0 ); /* IE6-9 */
}



.bocadillo.naranja .next_text:hover  {
	background-image: url(../img/next-hover.png);
	cursor:pointer;
}
.bocadillo.naranja .next_text2:hover  {
	background-image: url(../img/next-hover.png);
	cursor:pointer;
}
.bocadillo.naranja .next_text3:hover  {
	background-image: url(../img/next-hover.png);
	cursor:pointer;
}
.bocadillo.naranja .next_text4:hover  {
	background-image: url(../img/next-hover.png);
	cursor:pointer;
}
.bocadillo.naranja .next_text5:hover  {
	background-image: url(../img/next-hover.png);
	cursor:pointer;
}

.bocadillo.naranja .next_text {
	background: url(../img/next.png) no-repeat center center transparent;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	background-size: contain;
	margin: 0 0 0 10px;
	width: 3em;
	height: 3em;
	position: static;
	float: right;
	margin-top: 10%;
	cursor:pointer;
}

.bocadillo.naranja .next_text2 {
	background: url(../img/next.png) no-repeat center center transparent;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	background-size: contain;
	margin: 0 0 0 10px;
	width: 3em;
	height: 3em;
	position: static;
	float: right;
	margin-top: 10%;
	cursor:pointer;
}
.bocadillo.naranja .next_text3 {
	background: url(../img/next.png) no-repeat center center transparent;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	background-size: contain;
	margin: 0 0 0 10px;
	width: 3em;
	height: 3em;
	position: static;
	float: right;
	margin-top: 10%;
	cursor:pointer;
}
.bocadillo.naranja .next_text4 {
	background: url(../img/next.png) no-repeat center center transparent;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	background-size: contain;
	margin: 0 0 0 10px;
	width: 3em;
	height: 3em;
	position: static;
	float: right;
	margin-top: 10%;
	cursor:pointer;
}
.bocadillo.naranja .next_text5 {
	background: url(../img/next.png) no-repeat center center transparent;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	background-size: contain;
	margin: 0 0 0 10px;
	width: 3em;
	height: 3em;
	position: static;
	float: right;
	margin-top: 10%;
	cursor:pointer;
}

.bocadillo.naranja .next_text:hover {
	background-image: url(../img/next-hover.png);
}

.bocadillo.naranja .next_text2:hover {
	background-image: url(../img/next-hover.png);
}

.bocadillo.naranja .next_text3:hover {
	background-image: url(../img/next-hover.png);
}

.bocadillo.naranja .next_text4:hover {
	background-image: url(../img/next-hover.png);
}
.bocadillo.naranja .next_text5:hover {
	background-image: url(../img/next-hover.png);
}


.temario {
	background: #ecedef;
}
.escena {
	background: url() no-repeat bottom center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	position: absolute;
	bottom: 0;
	z-index: 0;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}
.escena div.escena {
	-webkit-border-radius: 0 0 20px 20px;
	-moz-border-radius: 0 0 20px 20px;
	border-radius: 0 0 20px 20px;
	overflow: hidden;
	width: 100%;
	height: 100%;
	z-index: 2;
}
article p {
	font-size: 1em;
	line-height: 1em;
	text-align:justify;

}
article p+p {
	margin-top: .75em;
}
.intro strong {
	color: #fff;
}
.col_izquierda, .col_derecha {
	width: 50%;
	height: 100%;
	margin: 0;
	text-align:justify;
}
.true .col_izquierda p{
	left: -5%;
    position: relative;
    text-align: center;
    top: 29%;
    width: 75%;
	}
.col_izquierda {
	float: left;
		font-size:1.2em;
}
.col_derecha {
	font-size:1.2em;
	float: right;
	padding: 8% 5% 8% 2%;
}
.col_completa {
	width: 100%;
	height: 100%;
}
.col_parcial {
	width: 91%;
	height: 100%;
	padding: 6% 30% 6% 6%;
}
.col_parcial2 {
	width: 91%;
	height: 100%;
	padding: 6% 30% 6% 6%;
}
.col_parcial.derecha {
	padding: 6% 6% 6% 30%;
}
.col_parcial p {
	color:#000;
	font-size: 1.2em;
}
.col_escena_naranja {
	color: #fff;
	margin-top: 2%;
	padding: 2% 4%;
}
.indent {
	padding: 6% 5% 6% 16%;
	background: url(../img/li-romboide-01.png) no-repeat 5% 11% transparent;
	
}

.primero .col_derecha > ul {
	font-size: 1.2em;
}
ol, .boton .col_derecha ul, .primero .col_derecha > ul {
	padding-left: 2em;
	margin: .5em 0;
}
ol li, .boton .col_derecha ul li, .primero .col_derecha > ul > li {
	margin-bottom: .5em;
	position: relative;
}
.talk{
	width:95%;
	padding:.1%;
	text-align:left;}

.diapo ol, ul {
    line-height: 150%;
  /*  list-style-type: decimal;*/
    padding-bottom: 2%;
    width: 100%;
	font-size:1em;
}

.formulario{
	text-align:left;}
.indentado {
    list-style-type: circle;
    margin-left: 10%;
}



.reducido {
	font-size: .95em;
}
ul.radio_options input[type="radio"] {
	display: none;
}
ul.radio_options {
	list-style-type: none;
	margin: 4% 0;
	display: block;
}
ul.radio_options li {
	font-size: 1.15em;
	position: relative;
}
ul.radio_options li+li {
	margin-top: 4%;
}
ul.radio_options a, ul.radio_options label {
	display: block;
	padding: 0 0 0 6%;
	text-align: justify;
	width: 91%;
	background: url(../img/radio-off.png) no-repeat 0 1%;
	cursor: pointer;
	min-height:2em;
}
ul.radio_options a:hover, ul.radio_options label:hover {
	background-image: url(../img/radio-hover.png);
	color: #db9b5f;
}
ul.radio_options a:active, ul.radio_options a.activo, ul.radio_options input[type="radio"]:checked + label {
	background-image: url(../img/radio-on.png) !important;
	color: inherit !important;
}
.centrado {
	text-align: center;
}
.col_izquierda img, .col_derecha img {
	max-width: 100%;
	height: auto;
	/*margin-top:60%;*/
}
.plus img{
	margin-top:50%;
	width:100%;}
.col_izquierda.centrado img, .col_izquierda.frases img {
	       max-height: 50%;
    position: absolute;
    top: 10%;
    width: auto;
}
.col_izquierda .explain img {
	max-height: 40vmin;
	margin-bottom: -15% !important;
	width: auto;
}
.menu {
	padding: 8% 5% 8% 5%;
}
figure {
	position: relative;
	margin: 2.5% auto;
	max-width: 80%;
}
figure span {
	position: absolute;
	top: 30%;
	bottom: 50%;
	left: 0;
	width: 100%;
	height: 30%;
	color: #fff;
	margin: auto;
	font-size: 1.8em;
	text-align: center;
}
figure.centrado img {
	margin-bottom: -30%;
	max-height: 45vmin;
	width: auto;
}
figure.centrado ~ * {
	position: relative;
	z-index: 1;
}
figure + img {
	max-height: 50%;
	width: auto;
}
.abajo_derecha, .texto_abajo_derecha {
	bottom: 0;
    height: 45%;
    max-width: 100%;
    position: absolute;
    right: 2%;
    text-align: justify;
    top: 25%;
}
.abajo_derecha img, .abajo_izquierda img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: 100%;
}
.abajo_izquierda {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 45%;
	height: 20%;
	color: #db9b5f;
	font-size: 1.15em;
	line-height: 1.1em;
}
.abajo_izquierda img {
	float: left;
	width: 40%;
	height: auto;
	margin: 0 5%;
}
.texto_abajo_derecha {
	width: 55%;
	height: auto;
	padding: 0 1% 2% 0;
	font-size:1.2em;
}
.alto_derecha, .alto_izquierda, .bajo_izquierda {
	width: 25%;
	height: 75%;
	position: absolute;
	bottom: 0;
	right: 0;
}
.alto_izquierda, .bajo_izquierda {
	left: 0;
	right: auto;
}
.alto_derecha img, .alto_izquierda img {
	height: 100%;
	width: auto;
	position: absolute;
	bottom: 5%;
	right: 20%;
}
.alto_izquierda img {
	left: 20%;
	right: auto;
}
.arriba_izquierda {
	float: left;
	margin: -1% 4% 0 -8%;
}
.arriba_izquierda img {
	max-width: 20vmin;
	height: auto;
}
.bajo_izquierda img {
	width: 80%;
	height: auto;
	margin: 0 auto;
	position: absolute;
	left: 10%;
}
.flota_izquierda {
	float: left;
	width: 15%;
}
.flota_izquierda img {
	max-width: 100%;
	height: auto;
}
.intro .titulo {
	margin: 16% 8% 8% 16%;
	text-align: left;
	font-size: 2.5em;
	line-height: 1.1em;
}
.intro .col_izquierda:after, .col_izquierda.menu:after {
	content: "";
	margin: 8% auto 4%;
	width: 1%;
	height: 64%;
	background: #fff;
	position: absolute;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
}
.col_izquierda.menu:after {
	background: #c2c3c8;
	height: 80%;
}
.intro .col_derecha.frases {
	padding-left: 6%;
	padding-right: 8%;
	font-size:1.2em;
}
.col_izquierda.frases {
	padding-left: 6%;
	padding-right: 6%
}
h3, h4 {
	text-align: left;
	font-size: 1.8em;
	line-height: 1.1em;
	color:#fff;
}

.string h4{
        font-size: 4em;
    margin-left: 7%;
    margin-top: 4%;
    text-align: center;
    width: 80%;}

.string p{
	    bottom: 15%;
    font-size: 2em;
    position: absolute;
    text-align: center;
    width: 100%;
	font-family:"ag-book";
	color:#b3b3b2;}	



.boton_comprobar {
padding:15px; /* Espacio entre la imagen y el borde */
background:#FFF; /* Color de fondo que se ve entre el espacio */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.boton_comprobar:hover {
border-radius: 0% 50%; 
box-shadow: 0px 0px 15px #000; 
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}






.temario h3, .true h3 {
	color: #db9b5f;
}
.bubble h3{
	color: #db9b5f;
	}
.col_parcial h3 {
	color: #e369a3;
	padding: 1% 0 1% 10%;
	background: url(../img/li-romboide-02.png) no-repeat 0 50% transparent;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	background-size: contain;
}
h3 p.menor {
	font-size: 0.6em;
	font-weight: 400;
}
.intro_escena + .col_parcial strong {
	color: #ec852f;
}
.intro.magenta h3 {
	font-size: 2em;
}
.intro.magenta p, .intro.naranja p {
	font-size: 1.4em;
}
h5 {
	text-align:left;
	color: #db9b5f;
	font-size: 1.5em;
	margin: 0 0 .7em;
}
.col_parcial h5 {
	color: #e369a3;
}
h3 + p {
	margin-top: .7em;
}
h3.intro_escena {
	background: none;
	padding: 4% 0 2% 6%;
	font-size: 2em;
	color: #ec852f;
}
.menu_vert_x4, .menu_vert_x3 {
	margin: 5% 0;
	list-style-type: none;
}
.menu_vert_x4 li, .menu_vert_x3 li {
	display: block;
}
.menu_vert_x4 li+li {
	margin-top: 5%;
}
.menu_vert_x3 li+li {
	margin-top: 2.5%;
}
.menu_vert_x4 a, .menu_vert_x3 a {
	cursor: pointer;
	text-align:left;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	display: block;
	background: url(../img/li-arrow.png) 3% 50% no-repeat #c2c3c8;
	color: #fff;
	text-decoration: none;
	font-size: 1.25em;
	padding: 2% 3% 2% 8%;
}
.menu_vert_x4 a:hover, .menu_vert_x3 a:hover {
	background-color: #e369a3;
}
.menu_vert_x4 a:active, .menu_vert_x4 a.activo, .menu_vert_x3 a:active, .menu_vert_x3 a.activo {
	background-color: #db9b5f;
}
.menu_circulos {
	list-style-type: none;
	width: 100%;
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: 0;
	right: 0;
}
.menu_circulos li {
	width: 45%;
	position: absolute;
	bottom: 0;
}
.menu_circulos li:first-child {
	left: 5%;
}
.menu_circulos li:last-child {
	right: 5%;
}
.menu_circulos.triple li {
	width: 33.3%;
	left: 33.3%;
}
.menu_circulos.triple li:first-child {
	left: 0;
}
.menu_circulos.triple li:last-child {
	left: 66.6%;
}
.menu_circulos a {
	display: block;
	text-align: center;
	text-decoration: none;
	font-family: 'ag-book';
	font-weight: 400;
	font-size: 1.4em;
	line-height: 1.2em;
	padding: 0 0 4%;
}
.menu_circulos img {
	display: block;
	margin: 0 auto 1%;
	max-width: 75%;
	height: auto;
	position: relative;
	bottom: 0;
}
.menu_circulos a span {
	display: none;
	position: absolute;
	left: 6%;
	top: 2%;
	width: 14%;
	height: 90%;
	background: url(../img/romboide-03.png) no-repeat top center transparent;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	background-size: contain;
}
.menu_circulos a:hover span {
	display: block;
}
.menu_circulos a:hover img {
	bottom: 5px;
}
.ventana_scroll, .plus {
	padding-right:10%;
	max-height: 100%;
}
.plus2{
	font-size:1.2em;
	width:90%;}

.plus3{
	height: 100%;
    overflow: auto;
    padding-left: 7%;
    width: 95%;
}
a.enlace, a.url, a[target=_blank] {
	/*display: inline-block;*/
	padding: 0 1.3em 0 0;
	background: url(../img/a-enlace.png) no-repeat right 50% transparent;
	-webkit-background-size: 1em;
	-moz-background-size: 1em;
	background-size: 1em;
	color: #d8047f;
	position: static !important;
	height: auto !important;
	width: auto !important;
}
a.url, a[target=_blank] {
	padding: 0 2em 0 0;
	background-image: url(../img/romboide-02.png);
	color: #db9b5f;
	-webkit-background-size: 1.8em;
	-moz-background-size: 1.8em;
	background-size: 1.8em;
}

/* FTScroller */
#scrollable, #scrollable_2 {
	width: 100%;
	height: 90%;
	overflow: hidden;
	position: relative;
}
#scrollable:after, #scrollable_2:after {
	content: "";
	background: url(../img/bg-scrollable.png) bottom left repeat-x transparent;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	background-size: contain;
	height: 8%;
	width: 100%;
	position: absolute;
	bottom: 0;
}

.ftscroller_scrollbar {
	 opacity: 0.4;
	/*opacity: 1 !important;*/
	width: 2%;
	background: #db9b5f;
	border: none;
	border-top: 6px solid #d8047f;
	border-bottom: 6px solid #d8047f;
}
.ftscroller_scrollbarinner {
	background: #db9b5f;
}
.ftscroller_container{
	padding-right:6%;}

/* Questions & Buttons */
.oculto {
	display: none;
}
.visible {
	display: block;
}
button.si, button.no, button.comprobar-01, button.comprobar-02, input.comprobar-01, input.comprobar-02, label.si, label.no  {
	background: none;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	border: none;
	cursor: pointer;
	font-size: 1.5em;
	color: #fff;
	position: relative;
	display: inline-block;
	text-align: center;
}
button.si, label.si {
	background-image: url(../img/bot-si.png);
}
button.si:hover, label.no:hover {
	background-image: url(../img/bot-si-hover.png);
}


button.no, label.no {
	background-image: url(../img/bot-no.png);
}
.url{background: url(../img/bot-no.png) no-repeat;
    height: 100%;
	width:100%;
    left: 55%;
    position: absolute;}

button.no:hover, label.no:hover {
	background-image: url(../img/bot-no-hover.png);
}

button.si:hover, label.si:hover{
	background-image: url(../img/bot-si-hover.png);
	}

button.comprobar-01, input.comprobar-01 {
	background-image: url(../img/bot-comprobar-01.png);
}
button.comprobar-01:hover, input.comprobar-01:hover {
	background-image: url(../img/bot-comprobar-01-hover.png);
}
button.comprobar-01.small, input.comprobar-01.small {
	width: 20%;
	height: 32%;
	font-size: 1em;
	padding: 0 5% 4% 1%;
	position: absolute;
	bottom: 4%;
	right: 6%;
}
button.comprobar-02, input.comprobar-02 {
	background-image: url(../img/bot-comprobar-02.png);
}
button.comprobar-02:hover, input.comprobar-02:hover {
	background-image: url(../img/bot-comprobar-02-hover.png);
}
button.small .movil, label.small .movil, input.small .movil {
	max-width: 70%;
	height: auto;
	position: absolute;
	bottom: 73%;
	left: 0;
	right: 10%;
	margin: 0 auto;
}
.bien{
	color:#fff;}
.bien:before, .mal:before {
	content: "";
	background: url(../img/error.png) no-repeat center center transparent;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	background-size: contain;
	position: absolute;
	left: 0;
	width: 30%;
	height: 45%;
}
.bien:before {
	background-image: url(../img/acierto.png);
	left: 40%;
	right: 60%;
	top: -10%;;
}
h4.bien:before, h4.mal:before {
	position: static;
	float: left;
	height: 1.5em;
	width: 2em;
}
.radio_options .bien:before, .radio_options .mal:before, #formulario li .bien:before, #formulario li .mal:before {
	left: 98%;
	right: 0;
}
.pregunta-01, .pregunta-03 {
	padding: 8% 4% 0 0;
	padding: 5vmin 0 0 0;
	height: 90%;
}
.pregunta-01 .si {
	width: 50%;
	float: left;
	padding: 8% 8% 12%;
}
.pregunta-01 .no {
	width: 50%;
	float: right;
	padding: 15%;
}
.pregunta-01 .comprobar-01, .pregunta-02 .comprobar-02, .pregunta-03 .comprobar-01 {
	width: 60%;
	height: 20vmin;
	font-size: 1.25em;
	padding: 0 20% 12% 0;
	margin: 0 auto;
	text-align: center;
	display: inline-block;
}
.pregunta-02 {
	display: block;
	width: 50%;
	padding: 0 0 0 8%;
	color: #fff;
}
.pregunta-02 .comprobar-02 {
	width: 40%;
	padding: 4% 5% 0 0;
	position: absolute;
	bottom: 3%;
	right: 12%;
}
.pregunta-03 {
	position: relative;
}
.pregunta-03 .si {
	width: 60%;
	float: left;
	padding: 4% 12% 12% 8%;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	background-size: 100% 100%;
}
.pregunta-03 .no {
	position: absolute;
	right: 0;
	top: 5%;
	width: 50%;
	padding: 25% 10% 15%;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	background-size: 100% 100%;
}
.pregunta-03.comprimido label {
	font-size: 1.25em;
	line-height: 0.9em;
}
.test_abc {
	clear: left;
	list-style-type: none;
}
.test_abc li {
	display: block;
	position: relative;
	margin-bottom: 4%;
	left: 0;
}
.test_abc li span {
	position: absolute;
	left: -20%;
	background: #fff;
	-webkit-border-radius: 99px;
	-moz-border-radius: 99px;
	border-radius: 99px;
	color: #e25100;
	font-size: 1.5em;
	line-height: 1.5em;
	width: 1.5em;
	height: 1.5em;
	text-align: center;
}
.test_abc li:hover {
	left: 2%;
}
.explain, .explain2 {
	width: 100%;
	border-bottom-left-radius:1.2em;
	border-bottom-right-radius:1.2em;
	padding: 2% 6% 4%;
	position: absolute;
	right: 0;
	bottom: 0;
	background: #e369a3;
	text-align:justify;
}
.explain {
	background: #e369a3;
	border-top: .3em solid #e369a3;
}
h4 {
	color: #e369a3;
	margin: 0 0 .8em;
}
input[type="radio"] {
	float:left;
	/*display: none;*/
}
ul.menu_question {
	margin: 5% 0;
	list-style-type: none;
	color: #fff;
	display: block;
	line-height: 150%;
	padding-bottom: 2%;
	width: 100%;
	font-size: 1em;
}
ul.menu_question li {
	display: block;
	width: 100%;
}
.menu_vert_x4 a.question, .menu_vert_x3 a.question, .question {
	-webkit-border-radius: 999px;
	-moz-border-radius: 999px;
	border-radius: 999px;
	height: 3em;
	width: 3em;
	text-align: center;
	position: static;
	font-size: 6em;
	line-height: 3em;
	padding: 0;
	margin: 0 auto;
	display: block;
	float: left;
	background: rgb(219, 155, 95);
}
.question:hover {
	background: #e369a3 !important;
}

/*
.pregunta-01 .explain .explain {
	width: 140%;
}
.pregunta-01 > .explain > div {
	width: 140%;
	right: 0;
	position: absolute;
	bottom: 0;
}*/
.narrador_img img {
	max-height: 40vmin;
	width: auto;
}
.recurso {
	text-align: center;
	margin-top: 2em;
}
.recurso img {
	width: 100% !important;
	height: 100%;
}
.recurso img + span {
	/*padding-right: 10%;*/
	padding: 28% 25% 25% 10%;
	color:#F09;
}

/* Dialogues & Scenes */
.bocadillo {
	background: url() no-repeat center center transparent;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	background-size: 100% 100%;
	position: absolute;
	text-align: justify;
}
.bocadillo.naranja {
	font-size: 1.1em;
	line-height: 1.2em;
	color: #e25100;
	padding: 42px 29px 40px 43px;
}
.bocadillo.naranja.negativo {
	color: #fff;
}
.bocadillo.naranja .next {
	background: url(../img/next.png) no-repeat center center transparent;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	background-size: contain;
	margin: 0 0 0 10px;
	width: 30%;
	height: 30%;
	position: static;
	float: right;
	margin-top: 10%;
}
.bocadillo.naranja .next:hover {
	background-image: url(../img/next-hover.png);
}
.bocadillo.romboide-01 {
	background-image: url(../img/bocadillo-romboide-01.png);
	width: 24.75%;
	height: 27.85%;
	right: 26%;
	bottom: 47%;
}
.bocadillo.romboide-02 {
	background-image: url(../img/bocadillo-romboide-02.png);
	width: 26.13%;
	height: 33.86%;
	right: 40%;
	bottom: 47%;
	padding-top: 6%;
}
.bocadillo.romboide-03 {
	background-image: url(../img/bocadillo-romboide-03.png);
	width: 24.75%;
	height: 27.85%;
	left: 13%;
	bottom: 43%;
}
.bocadillo.romboide-04 {
	background-image: url(../img/bocadillo-romboide-04.png);
	width: 24.75%;
	height: 27.85%;
	right: 10%;
	bottom: 44%;
	padding: 9% 2% 0 3%;
}
.bocadillo.grande {
	background-image: url(../img/bocadillo-grande-01.png);
	max-width: 50%;
	max-height: 50%;
}
.primaria-chica-patio-01 {
	background: url(../img/primaria-chica-patio-01.png) no-repeat center center transparent;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	background-size: 100% 100%;
	position: absolute;
	width: 10.60%;
	height: 23.5%;
	right: 4%;
	bottom: 19.5%;
}
.cuadro-naranja-01 {
	background: url(../img/cuadro_naranja_movil_01.png) no-repeat bottom left transparent;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	background-size: 100% 100%;
	width: 45%;
	height: 68%;
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 17% 4% 5% 4%;
	color: #fff;
	z-index: 10;
}
.cuadro-naranja-01 p {
	font-size: 1.05em;
	line-height: 1.3em;
}

/* Navigation: */
.prev, .next, .relleno{    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: medium none;
    bottom: 0;
    color: #b3b3b2;
    cursor: pointer;
    font-size: 1.5em;
    line-height: 3em;
    position: relative;
}
.prev, .prev:before{
	 line-height: 5em;
	}
.next2{
	position: absolute;
	bottom: 0;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 1.5em; 
	line-height: 50px;
	color: #b3b3b2;
	left:40%;
	top:35%;
}
.next3, .cerrar {
	border:1px solid red;
	position: absolute;
	bottom: 0;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 1.5em; 
	line-height: 50px;
	color: #b3b3b2;
	top:35%;
	height:16%;
}
.next3, .cerrar {
    font-size: 1.5em;
}
.next3, .cerrar {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: medium none;
    bottom: 0;
    color: #b3b3b2;
    cursor: pointer;
    font-size: 1.5em;
    height: 16%;
    line-height: 50px;
    position: absolute;
    top: 0;
	
right: 1%;
width: 2em;
height: 2em;
}
.relleno{
	float: left;
    height: 3em;
    margin: 0 10px 0 0;
    width: 7.2em;
	opacity:0;
	z-index:-1;}
.prev, .relleno {
	    left: 0;
    text-align: justify;
   
}
.prev{
	padding-right:3.3em;}
.next {
	    float: right;
    text-align: right;
}
.prev:before {
	background: url("../img/prev.png") no-repeat center center transparent;
	-webkit-background-size: 100% 100%;
	-khtml-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	background-size: 100% 100%;
    content: "";
    float: left;
    height: 3em;
    margin: 0 10px 0 0;
    width: 3em;
}
.prev:hover {
	color: #db9b5f;
}
.prev:hover:before {
	background-image: url(../img/prev-hover.png);
}
.next:before {    background: url("../img/next.png") no-repeat center center transparent;
	-webkit-background-size: 100% 100%;
	-khtml-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	background-size: 100% 100%;
    content: "";
    float: right;
    height: 3em;
    margin: 0 0 0 10px;
    width: 3em;
}
.next_url:before {    background: url("../img/next.png") no-repeat center center transparent;
	-webkit-background-size: 100% 100%;
	-khtml-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	background-size: 100% 100%;
    content: "";
    float: right;
    height: 4.5em;
    margin: 0 10px;
    width: 4.5em;
	z-index:999 !important;
	position:relative;
}
.next2:before{
	
	content: "";
	background: url(../img/next.png) no-repeat center center transparent;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	background-size: contain;
	margin: 0 0 0 10px;
	width: 2em;
	height: 2em;
	float: right;}

.next3:before, .cerrar:before {
	content: "";
	background: url(../img/error.png) no-repeat center center transparent;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	background-size: contain;
	margin: 0 0 0 10px;
	width: 2em;
	height: 2em;
	float: right;}	
	
	
.next2:hover{
	color:#db9b5f;}
.next:hover, .next3:hover, .cerrar:hover {
	color: #db9b5f;
}
.next:hover:before, .next2:hover:before, .next_url:hover:before  {
	background-image: url(../img/next-hover.png);
}
section .prev:before, section .next:before {
	/*display: none;*/
}

.test_ancho{
	height: 90%;
    margin: 0 0 5% 10%;
    overflow: auto;
    padding: 2%;
    width: 85%;
	font-size:1.2em;
	text-align:justify;}
.next2{
	font-size:3.5em;}
	
	
.reiniciar{
	          font-size: 2em;
    left: 76%;
    position: absolute;
    text-align: right;
    top: 13%;
    width: 5%;
    z-index: 10 !important;
	}
.reiniciar:before{
	    color: #e369a3;
    content: "R";
    cursor: pointer;
    font-family: "ModernPictograms";
    font-size: 3.7em;
    font-weight: normal !important; }	
	
.btn{
	cursor: pointer;
    float: left;
    height: 10%;
    position: absolute;
    text-align: center;
    top: 30%;
    width: 100%;}		

.btn:before	{ content:">";
font-weight:bold;
font-size: 4em;
}	
.pop_up_container {
	    background: none repeat scroll 0 0 rgba(219, 155, 95, 0.95);
    display: none;
    height: 100%;
    left: 0;
    margin: 0;
    padding: 10%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1000;
}
.pop_up {
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	background: #ecedef;
	-webkit-box-shadow: 0 6px 6px #c2c3c8;
	-moz-box-shadow: 0 6px 6px #c2c3c8;
	box-shadow: 0 12px 6px -6px #c2c3c8;
	height: 100%;
	position: relative;
	text-align:justify;
	font-size:.9em;
	overflow:hidden;
}
.pop_up2{
	position:absolute;
	background:#FFF;
	display: block;
   
    opacity: 0.95;
    
    z-index: 14;
	border-radius:1.5em;}	
.pop_up p {
	
font-size:1.5em;	
font-family:"ag-book";
text-align:center;
padding-top:10%;
opacity:1 !important;}	

.pop_up2 p {
	
font-size:1.5em;	
font-family:"ag-book";
text-align:center;
padding-top:20%;
opacity:1 !important;}	

.negrita{
	font-weight:bold !important;}
	a{
		text-decoration:none !important;}
		
.menor2{
	    border: 1px solid #db9b5f;
    border-radius: 1em;
    color: #000 !important;
    font-family: "HelveticaNeue";
    font-size: 1em !important;
    height: 46%;
    margin-left: 3%;
    padding: 2%;
    position: absolute;
    top: 46%;
    width: 91%;
   }
   
 .menor6{
	    border: 1px solid #db9b5f;
    border-radius: 1em;
    color: #000 !important;
    font-family: "HelveticaNeue";
    font-size: 1em !important;
    height: 100%;
    margin-left: 3%;
    padding: 2%;
    position: absolute;
    top: -25%;
    width: 91%;
   }  		
   
button.prev2, button.aceptar, button#next_secc, button#boton, button#boton1 {
	background: #fff;
	color: #e369a3;
	border: none;
	padding: .3em 1em;
}
button#next_secc:hover, button#boton:hover {
	color: #db9b5f;
}
button.prev2:hover, button.aceptar:hover{
	color:#e369a3;}

button.prev2:before{
	    background: url("../img/next.png") no-repeat center center transparent;
	-webkit-background-size: 100% 100%;
	-khtml-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	background-size: 100% 100%;
    content: "";
    
    height: 1em;
    margin: 0 0 0 10px;
    width: 1em;	
	}


/*Cambios Sergio*/



.next_2:before {
    background: url("../img/next.png") no-repeat center center transparent;
	-webkit-background-size: 100% 100%;
	-khtml-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	background-size: 100% 100%;
    content: "";
    float: right;
    height: 4.5em;
    left: 91%;
    margin: 0 0 0 10px;
    position: absolute;
    top: 91.8%;
    width: 4.5em;
}
.next_2:hover {
    background: url("../img/next-hover.png") no-repeat center center transparent;
	-webkit-background-size: 100% 100%;
	-khtml-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	background-size: 100% 100%;	
	}
.next_2 {
    cursor: pointer;
    right: 0;
    text-align: right;
}
#sin_fondo {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: medium none;
    color: #b3b3b2;
    cursor: pointer;
    font-family: "ag-book";
    font-size: 1.7em;
    font-weight: 400;
    left: 78%;
    line-height: 2.5em;
    position: absolute;
	top:91%;
}
#sin_fondo:hover {
	color:#db9b5f;}
.next:hover:before{
    background: url("../img/next-hover.png") no-repeat center center transparent;
	-webkit-background-size: 100% 100%;
	-khtml-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	background-size: 100% 100%;	}	
.next:hover{color:#db9b5f;}

.next2:hover:before{
    background: url("../img/next-hover.png") no-repeat center center transparent;
	-webkit-background-size: 100% 100%;
	-khtml-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	background-size: 100% 100%;	}	
	
.num{
	background: none repeat scroll 0 0 #db9b5f;
    border-radius: 99px;
    color: #fff;
    display: inline-block;
    font-size: 1.4em;
    height: 1.4em;
    line-height: 1.4em;
    margin-right: 3%;
    padding: 0;
    text-align: center;
    width: 1.4em;
	}
.test_ancho li:before{
	    border: 0.2em solid #db9b5f;
    border-radius: 3em;
    content: " ";
    height: 1.3em;
    left: -1.9em;
    position: absolute;
    top: -0.05em;
    width: 1.3em;}


#formulario{
	height:100%;}	
#scrollable, #scrollable_2{
	overflow:hidden;}	
	
.nav{
	position:absolute;
	left:35%;}
.indice, .progress{    
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
	-webkit-background-size: 100% 100%;
	-khtml-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	background-size: 100% 100%;
    border: medium none;
    bottom: 0;
    color: #b3b3b2;
    cursor: pointer;
    font-size: 1.5em;
    line-height: 3em;
    margin-left: 12%;
}
.progress:before{
	 background: url("../img/progreso_normal.png") no-repeat center center transparent;
	-webkit-background-size: 100% 100%;
	-khtml-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	background-size: 100% 100%;		
    content: "";
    float: right;
    height: 3em;
    margin: 0 0 0 10px;
    width: 3em;}
	
.indice:before{    
	background: url("../img/indice_normal.png") no-repeat  center center  transparent;
	-webkit-background-size: 100% 100%;
	-khtml-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	background-size: 100% 100%;
    content: "";
    float: right;
    height: 3em;
    margin: 0 0 0 10px;
    width: 3em;}	

.indice:hover:before{
	background: url("../img/indice_hover.png") no-repeat  center center  transparent;
	-webkit-background-size: 100% 100%;
	-khtml-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	background-size: 100% 100%;}	
	
.progress:hover:before{
	    background: url("../img/progreso_hover.png") no-repeat  center center transparent;
		-webkit-background-size: 100% 100%;
	-khtml-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	background-size: 100% 100%;}	
		
.frase0{
	text-align:left;
	}		
	
.pop_up li a, .pop_up a li{
	font-size:1.2em;
}	

.pop_up li a, .pop_up a[target="_blank"]{
	color:#db9b5f !important;
	font-size:1em !important;
	}

.explain h4, h4.mal, h4.bien{
	color:#FFF;}
.explain p, .explain2 p{
	color:#FFF;
	}	
.stars{
	font-family:'websymbolsregular';
	font-size:2em;
	color:#ecedef !important;}
	
.stars_si{
	font-family:'websymbolsregular';
	color:#FC0 !important;}		

.pop_up strong, .pop_up p{
	/*font-family: 'ag-book';*/
	text-align:left !important;	
	margin-top:-12%;
	}	
	
.ancho_extra{
	    color: #E468A2;
    font-size: 1.2em;
    left: 45%;
    position: absolute;
    top: 6%;
    width: 75% !important;}	
.ancho_extra span{
	color:#db9b5f;}	
	
	
.col_parcial2 span{
	    color: #fff;
    font-family: "HelveticaNeue";
    font-size: 1em;
    left: 10%;
    position: absolute;
    top: 31%;}	
.col_parcial span.cursiva2{
	color:red;}	
.col_parcial3{
           font-family: "ag-book";
    font-size: 5em;
    left: 13%;
    position: absolute;
    text-align: center;
    top: 36%;
    width: 75%;}	


.narrador_img{
	width:100%;
	
	}	



/* Añadido */
.pop_up {
	padding: 5em 8% 0;
}
.pop_up header {
	z-index: 0;
	height:2.2em;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
	/* Safari only override */
    ::i-block-chrome,.pop_up header {
	width:119.047619047619% !important;
    }
	/*.pantalla {
	width: 800px; 
    height: 694px;
	max-width: 100%;
	max-height: 100%;
	}
	.next {
	background: url("../img/next.png") no-repeat center center transparent;
	-webkit-background-size: 100% 100%;
	-khtml-background-size: 100% 100%;
	background-size: 100% 100%;
	-moz-background-size: 100% 100%;
    float: right;
    height: 3em;
    margin: 0 0 0 10px;
    width: 3em;	
	}
	.next:hover {
	background: url("../img/next-hover.png") no-repeat center center transparent;
	-webkit-background-size: 100% 100%;
	-khtml-background-size: 100% 100%;
	background-size: 100% 100%;	
	}
	.next:before { display:none }
	.next:hover:before { display:none }*/
}
.pop_up header h1 {
	padding: .6em 5%;
}
.pop_up ul {
	list-style-type: none;
}
.pop_up ul li {
	padding-left: 2em;
	background: url(../img/li-romboide-01.png) no-repeat left .2em transparent;
	-webkit-background-size: 1em 1em;
	-moz-background-size: 1em 1em;
	background-size: 1em 1em;
	margin: 0 0 .8em;
	line-height: 1.2em;
}
.plus ul li {
	padding-left: 2em;
	background: url(../img/li-romboide-01.png) no-repeat left .2em transparent;
	-webkit-background-size: 1em 1em;
	-moz-background-size: 1em 1em;
	background-size: 1em 1em;
	margin: 0 0 .8em;
	line-height: 1.2em;
}
.bubble ul li {
	padding-left: 2em;
	background: url(../img/li-romboide-01.png) no-repeat left .2em transparent;
	-webkit-background-size: 1em 1em;
	-moz-background-size: 1em 1em;
	background-size: 1em 1em;
	margin: 0 0 .8em;
	line-height: 1.2em;
}

.pop_up > ul > li:hover {
	background-image: url(../img/li-romboide-02.png);
}
.pop_up li a, .pop_up a {
	color: #222221 !important;
}
.pop_up li a:hover, .pop_up a:hover {
	color: #db9b5f !important;
}
.pop_up ul li ul {
	list-style-type: none;
	margin: .8em 0;
	padding: 0;
}
.pop_up ul li ul li {
	background: none;
	font-size: .9em;
	line-height: 1.2em;
}	
.edad_way{
	padding-right: 6%;
    padding-top: 15%;
    text-align: center;
    width: 100%;}
.edad_way img{
     width: 47%;
	 margin-right:15%;}	
.boton{
	margin-top: 2%;
    text-align: center;
    width: 100%;
		}

button.prev2, button.aceptar{
	background:none;
	color:#fff;
	font-size:1.6em;
	font-family:'ag-book'}

h3 + p.selecc{
     color: #fff;
    font-family: "ag-book";
    font-size: 1.6em;
    font-weight: bold;
    left: 0;
    margin-top: 2.1em;
    position: absolute;
    text-align: center;
    width: 100%;}
.selecc{
	text-align:center;
	color:#fff;}	
	
.secuencia img{
	width:35%;}
.bubble {
       position:relative;
	    font-size: 1.2em;
    height: 66%;
    margin: -2% auto 0;
    padding: 11% 6% 3% 8%;
    text-align: justify;
    width: 80%;
	z-index:1;
}
.narrador{
	width:90%;
    text-align:center;}	
.narrador img{
    margin-left: -13%;
    margin-top: -26%;
    width: 60%;}	 
	 
/* Guia Didáctica */

p+h5, h3 p.menor {

            margin-top: .7em;

}

h5 img {

            height: 1em !important;

            width: auto !important;

            display: inline-block;

            margin-top: .4em;

}

h5 img+img {

            margin-left: .25em;

}	


 .cont_explain{
	    color: #fff;
    font-size: 1.2em;
    height: 100%;
    left: -120%;
    top: 68%;
    width: 232%; 
	/*margin-top:-5%;*/
	 }
.send{
	text-align:center;
	width:100%;}	 
.smaller{
    margin-left:2%;
    margin-top: 8%;}	
	
.leyenda{
	color: #666;
    font-size: 0.65em;
    margin-top: 9%;}	
.logo{
	 bottom: 5%;
    margin-left: 30%;
    position: absolute;}	
.logo img{
	width:60%;}		