
/**** FONTS ***/ 

@font-face {
    font-family: 'andika_basicregular';
    src: url('../fonts/andbasr-webfont.eot');
    src: url('../fonts/andbasr-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/andbasr-webfont.woff2') format('woff2'),
         url('../fonts/andbasr-webfont.woff') format('woff'),
         url('../fonts/andbasr-webfont.ttf') format('truetype'),
         url('../fonts/andbasr-webfont.svg#andika_basicregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'league_spartanregular';
    src: url('../fonts/leaguespartan-bold-webfont.eot');
    src: url('../fonts/leaguespartan-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/leaguespartan-bold-webfont.woff2') format('woff2'),
         url('../fonts/leaguespartan-bold-webfont.woff') format('woff'),
         url('../fonts/leaguespartan-bold-webfont.ttf') format('truetype'),
         url('../fonts/leaguespartan-bold-webfont.svg#league_spartanregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


body{
    background-image:url("../img/background.jpg");
    font-family: 'andika_basicregular', Arial, Helvetica, sans-serif;
    font-size: 20px;
    line-height: 1.4;
}
/*::-webkit-input-placeholder {
    color: #FFFFFF;
    opacity: 1 !important;
}*/

::-ms-input-placeholder{
    color: #FFFFFF;   
}
.oacontext{
    /*box-shadow: 0 0 3px #666;*/
    height: 100%;
}
.content {
    height: 100%;
}

ul {
    margin:0;
    padding:0;
}

li{
    list-style: none;
}

p {
	color: #336cb6;
    font-family: "andika_basicregular",Arial,Helvetica,sans-serif;
    font-size: 22px;
    line-height: 1.4;
}

/*.pantalla {
    min-height: 575px;
}*/
.pantalla{
	bottom: 0;
    left: 0;
    padding-top: 1px;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    margin: 50px auto auto;
    min-height: 572px;
}
.pantallaPersonajeVanidosa,
.pantallaPersonajePeleonero,
.pantallaDescubrete,
.pantallaNoEtiquetas{
	max-height:1280px;
    min-width:768px;
    max-width:1280px;
}


/*creditos*/


/*.logos {
    border-bottom: 1px solid #f4f4f4;
     position: relative;
    top: -6px; 
}*/
.logos > ul {
    text-align: center;
}
.logos li {
    background-image: url("../img/general/logos.png");
    background-position: 0 center;
    background-repeat: no-repeat;
    display: inline-block;
    height: 70px;
    list-style: outside none none;
    margin-left: -15px;
    text-indent: -9999px;
    width: 181px;
}
.logos li.sep {
    background-position: -186px center;
    margin-left: 5%;
    margin-right: 5%;
    width: 246px;
}


.logos li.unam {
    background-position: -443px center;
    margin-right: 5%;
    width: 80px;
}


.logos li.dgtic {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    color: #5b5b5b;
    font-size: 25px;
    font-weight: bold;
    position: relative;
    text-indent: 0;
    top: 16px;
    width: 100px;
}
.left {
    float: left;
    margin-left: 3%;
    text-align: center;
    width: 40%;
}


.right {
    float: right;
    margin-right: 2%;
    text-align: center;
    width: 52%;
}

.creditos--col:nth-of-type(1), .creditos--col:nth-of-type(2), .creditos--col.creditos-dgtic > .creditos--lista{
	width: 90%;
}

.vntn.vntn-creditos {
    width: 92%;
    max-width: 1240px;
}
.vntn-creditos .vntn--btn-cerrar {
	top: 6px;
}
/*
.vntn-creditos .vntn--btn-cerrar {
     background-color: #f1fbf1;
    border-color: #0d7d03;
    color: #103400;
    right: -18px;
    top: -18px;
    z-index: 60;
}*/


h2.vntn--titulo {
	color: #664cb7;
    display: block;
    font-family: "league_spartanregular",Arial,Helvetica,sans-serif;
    font-size: 1.2em;
    font-weight: lighter;
    letter-spacing: 1px;
    text-align: center;
}

.creditos--entidad {
    font-size: 17px;
    line-height: 22px;
    margin-left: 10%;
    text-transform: uppercase;
}
.creditos--cargo, .creditos--credito {
    display: block;
    font-size: 16px;
    font-weight: bold;
}
p.creditos--entidad {
    margin: 15px 20px;
}

.creditos--nombre {
    display: block;
    font-size: 16px;
    line-height: 20px;
}

.creditos--col.creditos-dgtic > .creditos--lista {  
    margin: 10px 2% 34px;
}

.creditos--lista > li {
    margin-bottom: 11px;
}

.copy > p {
    color: #32401f;
    font-size: 17px;
}

.copy p {
	 color: #336cb6;
    border: 0 none;
    display: block;
    font-size: 11px;
    line-height: 13px;
    text-align: center;
}
.copy img{
	margin-right:5px;
}
.vntn--contenido {
 	background-color: #fff;
    border-radius: 16px;
    height: 576px;
    padding: 12px 25px 25px;
}


.copy {
   position: relative;
    width: 93%;
    top: -40px;
}
..mCSB_container {
    height: 320px;
}
.ui-tabs {
    text-align: right;
    position:relative;
    top: -45px;
}

/*fin de creditos*/

/* --------------------------
 *   Ventanas 
 * ------------------------- */
.vntn {
	color: #336cb6;
	transform: translate(-50%, -50%);
	-ms-transform:translate(-50%, -50%);
   	-webkit-transform:translate(-50%, -50%);
	left: 50%;
    margin: auto;
    position: fixed;
    top: 50%;
    z-index: 50;
}

.vntn-chica{
	background: url("../img/ventana_chica.png") no-repeat;
	width:438px;
	height:194px;
}
.vntn p{
	margin: 15px 30px 22px 50px;
}
.vntn-chica p{
	margin-top: 60px;
}
.vntn h1{
    font-family: "league_spartanregular",Arial,Helvetica,sans-serif;
    font-size: 1.7em;
    font-weight: lighter;
    letter-spacing: 1px;
    margin: 36px 20px 0;
    text-align: center;
}

.overlay[data-color="azul"]{
    background-color: rgba(127,209,230, 0.96);
}

.overlay[data-color="rosa"]{
    background-color: rgba(255, 136, 135, 0.95);
}

.overlay[data-color="morado"]{
    background-color: rgba(167, 139, 217, 0.98);
}

.vntn--btn-cerrar {
	background: url("../img/navegacion.png") no-repeat -44px -168px;
	border:none;
	right: 6px;
    top: 13px;
}
.vntn--instruccion, .vntn--conclusion {
	background: url("../img/ventana_med.png") no-repeat;
	width:652px;
	height:320px;
	text-align: center;
}
.vntn-grande{
	background: url("../img/ventana_gde.png") no-repeat;
	width:746px;
	height:604px;
}
.pantallaDescubrete .vntn-descubrete h1{
	margin-top:25px;
}
.pantallaDescubrete .vntn-descubrete p{
	margin: 5px 20px 16px 30px;
}
.pantallaNoEtiquetas .vntn-grande h1{
	margin-top:90px;
}
.pantallaNoEtiquetas .vntn-grande button{
	margin-top:20px;
}
.actDescubrete-realimentacion1 p{
	margin-top:120px;
}
.actDescubrete-realimentacion2 p{
	margin-top:80px;
	margin-bottom: 48px;
}
.actDescubrete-realimentacion3 p:first-child{
	margin-top:45px;
}
.pantallaPersonajes .vntn-grande li{
	font-size: 1em;
    list-style: outside none disc;
    margin-right: 50px;
    margin-top: 17px;
    text-align: left;
    font-size: 22px;
}
.pantallaPersonajes .vntn-grande ul{
	margin-bottom:20px;
}
.vntn--instruccion ul{
	background-color: #ccc;
    border-radius: 5px;
    margin-left: 60px;
    padding: 0 0 12px 44px;
    width: 616px;
    background-color: rgba(127, 209, 230, 0.3);
}
.vntn--conclusion.peleonero {
    padding-top: 26px;
}
.vntn--conclusion.vanidosa {
    padding-top: 4px;
}
.pantallaPersonajePeleonero .vntn--instruccion {
	padding-top: 46px;
}
.pantallaPersonajeVanidosa .vntn--instruccion {
	padding-top: 40px;
}

/* --------------------------
 *   Botones Navegación
 * ------------------------- */
button, .owl-prev, .owl-next {
    cursor: pointer;
    font-family: "league_spartanregular",Arial,Helvetica,sans-serif;
    font-size: 1em;
    letter-spacing: 1px;
    color:#FFF; 
}

.owl-prev.disabled, .owl-next.disabled{
    display: none;
}

.btn-inicio, .btn-instruccion, .btn-creditos{
	background: url("../img/navegacion.png") no-repeat;
    padding-top: 10px;
    font-size: 0.87em;
    letter-spacing: 0;
    position: relative;
}
.btn-instruccion, .btn-creditos{
	float:right;
}
.btn-inicio{
	background-position: 0 -126px;
    height: 42px;
    left: 6px;
    padding-left: 37px;  
    top: 6px;
    width: 137px;
}
.btn-instruccion{
	background-position: 0 0;
    height: 42px;
    padding-left: 48px;
    right: 9px;
    top: 6px;
    width: 175px;
}
.btn-creditos{
	background-position: -132px -168px;
    height: 42px;
    right: 6px;
    text-indent: -9999px;
    top: 6px;
    width: 44px;
}

.btn-empezar, .owl-prev,
.owl-next, .btn {
	background-color: #00b16b;
    border: medium none;
    border-radius: 5px;
    color: #fff;
    font-size: 1em;
    position: relative;
}
.btn-continuar{
	padding-right: 44px;
}
.btn-continuar:after,
.btn-a-genero:after,
.btn-a-nombre:before, 
.owl-prev:before,
.owl-next:after,
.btn-regresar:before,
.personaje-vanidosa .btn-personaje:before,
.personaje-peleonero .btn-personaje:after{
	background: url("../img/navegacion.png") no-repeat;
    content: "";
    height: 36px;
    position: absolute; 
    top: 4px;
    width: 36px;
}
.btn-siguiente:after{
	background: url("../img/navegacion.png") no-repeat scroll -181px -72px;
    content: "";
    height: 36px;
    position: absolute;
    right: 6px;
    width: 36px;
}
.btn-siguiente{
	padding-right:44px;
	position: relative;
}
.btn-continuar:after{
	background-position: -175px -36px;
	right: 6px;
}
.btn-a-nombre,
.btn-regresar,
.personaje-vanidosa .btn-personaje:before{
	padding-left: 44px;
}
.btn-a-nombre:before,
.btn-regresar:before,
.personaje-vanidosa .btn-personaje:before{
	background-position: -176px -168px;
	left: 6px;
}

.btn-elegir-mas{
	margin-right:20px;
}
.owl-prev, .owl-next{
	height: 44px;
    line-height: 45px;
    width: 128px;
}
.owl-wrapper-outer{
	height: 514px;
}
.owl-prev{
	float:left;
	margin-left:6px;
	padding-left: 48px;
    width: 107px;
    bottom:0;
}
.owl-next{
	float: right;
    margin-right: 6px;
    padding-left: 6px;
    padding-right: 22px;
}
.owl-prev:before{
	background-position:-175px -0px;
	left:6px;
}

.owl-next:after{  
	background-position: -181px -72px;
	right:6px;
}
.personaje-peleonero .btn-personaje:after{
	background-position: -175px -36px;
	right: 6px;
}
.personaje-peleonero .btn-personaje{
	padding-right: 44px;
	right: 0;
}

[data-onphase = "portada"] .nav-secciones{
    display: none;
}

.nav-secciones{
	background-color: #3fc8e1;
    display: inline-block;
    font-size: 0.87em;
    margin-left: 16px;
    margin-top: 6px;
    position: relative;
    top: 1px;
    height: 42px;
}
.nav-secciones:before,
.nav-secciones:after{
	content:"";
	display:inline-block;
	width:10px;
	height:42px;
	background: url("../img/navegacion.png") no-repeat;  
    position: absolute;
    top: 0;
    width: 10px;
}
.nav-secciones:before{
	background-position:-211px -0px;
	left: -10px;
}
.nav-secciones:after{
	background-position: -181px -108px;
	right: -13px;
    width: 13px;
}

.vntn--conclusion .btn-continuar-sig-personaje{
	margin-right:3%;
}
.comic .btn{
	position:absolute;
	right:6px;
	bottom:6px;
	z-index: 5;
}


/*
.btn-icono{
	background-color:#3FC8E1;
	font-size: 0.87em;
	position:relative;
	margin-right: 25px;
	top:6px;
}
.btn-icono:before,
.btn-icono:after{
	content:"";
	display:inline-block;
	width:10px;
	height:42px;
	background: url("../img/navegacion.png") no-repeat;  
    position: absolute;
    top: 0;
    width: 10px;
}
.btn-icono:before{
	background-position:-211px -0px;
	left: -10px;
}
.btn-icono:after{
	background-position: -181px -108px;
	right: -13px;
    width: 13px;
}*/


/* --------------------------
 *   PORTADA 
 * ------------------------- */
/*
.portada{
    background: url("../img/portada/img_portada.png") no-repeat center center;
}*/
.titulo{
	color: #1a62b4;
    font-family: "league_spartanregular",Arial,Helvetica,sans-serif;
    font-size: 1.4em;
    left: 0;
    letter-spacing: 1px;
    margin: auto;
    position: absolute;
    right: 0;
    text-align: center;
    top: 42%;
    width: 530px;
}

.titulo:before{
	background: url("../img/img_portada.png") no-repeat scroll center center;
    content: "";
    display: block;
    height: 526px;
    margin: 0;
    position: absolute;
    right: -22px;
    top: -275px;
    width: 596px;
    z-index: -1;
}

.titulo > span{
	color: #664cb7;
    display: block;
    font-size: 2.3em;
    letter-spacing: 3px;
    margin-top: 7px;
}
.div-nombre, .div-genero{
	left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    text-align: center;
    top: 74%;
    width: 320px;
}

.div-genero{
	width:390px;
}
.nombre{
	font-family: 'andika_basicregular', Arial, Helvetica, sans-serif;
	background-color: #664cb7;
    border: medium none;
    border-radius: 5px;
    color: #fff;
    display: block;
    font-size: 1.15em;
    height: 56px;
    text-align: center;
    width: 320px;
    margin-bottom: 7%;
}
.div-genero > label {
	background-color: #664cb7;
    border-radius: 5px;
    color: #fff;
    display: inline-block;
    width: 184px;
    text-align:left;
    cursor: pointer;
    margin-bottom: 5%;
    font-size: 1.1em;
}
.fem{
	margin-right:16px;
}

input[type="radio"], input[type="checkbox"]{
	display:none;
}

.div-genero > label:before{
	background: url("../img/ico_genero.png") no-repeat;
    content: "";
    display: inline-block;
    height: 53px;
    margin: 4px 9px 1px;
    width: 53px;
}

.div-genero > label.fem:before {
	background-position: -0px -53px;
}
.div-genero > label.masc:before {
	background-position: -0px -0px;
}

.div-genero > label > span{
	position: absolute;
    top: 16px;
}



/* --------------------------
 *   1 - Descúbrete
 * ------------------------- */

.back_juego{
	background: url("../img/back_juego.png") no-repeat;
    bottom: 0;
    float: left;
    height: 542px;
    margin: auto 0 auto 3%;
    position: absolute;
    top: 0;
    width: 743px;
}
.back_juego .item > label{
	background-color:#8675d1;
	color:#FFF;
	border-radius:5px;
    cursor: pointer;
    display: inline-block;
    margin: 50px 40px;
    padding: 7px 20px 12px;
}

.back_juego label.e-oculto{
    display: none;
}
.owl-pagination{
	display:none;
}
.back_juego .item > label:hover{
	background-color:#999;
}
.item {
    margin-left: 30px;
    font-size: 1.1em;
}
.owl-item > .item {
	height:400px;
    text-align: center;
}
.reloj{
	bottom: 21px;
    color: #1a62b4;
    font-family: "league_spartanregular",Arial,Helvetica,sans-serif;
    font-size: 1em;
    font-weight: lighter;
    position: absolute;
    right: 14px;
    width: 90px;
}
.reloj .contador{
	display:inline-block;
	width: 30px;
}
.adj-seleccionados{
    bottom: 0;
    margin: auto;
    position: absolute;
    right: 3%;
    top: 0;
}

[data-onphase = "pantallaNoEtiquetas"] .adj-seleccionados{
    float: left;
}

[data-genero = "femenino"] .adj-seleccionados{
    width:187px;
    height:551px;
    background: url("../img/siluetas.png") no-repeat -750px -0px;
}

[data-genero = "masculino"] .adj-seleccionados{
    width:210px;
    height:554px;
    background: url("../img/siluetas.png") no-repeat -540px -254px;
}

.js-adj-seleccionados{
    position: absolute;
    bottom: 0px;
    width: 187px;
    overflow: auto;
    right: 0;
}
/*
.btn-adj_seleccionado {
	background-color: rgba(251, 248, 240, 0.7);
    border-radius: 5px;
    color: #414141;
    font-family: "andika_basicregular",Arial,Helvetica,sans-serif;
    font-size: 22px;
    left: 0;
    padding-bottom: 5px;
    right: 0;
    text-align: center;
    display: block;
    margin-top: 4px;
    width: 100%;
}*/

/* --------------------------
 *   Historieta 
 * ------------------------- */

.owl-carousel.carrusel-comic {
    margin-top: -285px;
    position: absolute;
    top: 50%;
    width: 100%;
    z-index: 1;
}
.pantallaDescubrete .owl-carousel .owl-stage-outer {
    height: 100%;
}
.pantallaHistorieta .owl-carousel .owl-stage-outer {
    height: 620px;
}
.owl-nav {
    bottom: 1%;
    position: fixed;
    width: 100%;
}
.owl-carousel.carrusel-comic .owl-item > div {
    height: 561px;
    width: 739px;
    left:0;
    right:0;
    margin:auto;
}
.owl-stage .btn-continuar{
	bottom: -58px;
    position: absolute;
    right: 6px;
}


/* --------------------------
 *   Personajes 
 * ------------------------- */

.pantallaPersonajes .textorv{
	bottom: 0;
    height: 480px;
    left: 0;
    margin: auto;
    max-width: 900px;
    min-width: 760px;
    position: absolute;
    right: 0;
    top: 0;
    width: 75%;
}

.personaje-vanidosa,
.personaje-peleonero {
	width: 360px;
	background: url("../img/personajes/expedientes.png") no-repeat;
	height:480px;
}

.pintar-letras{
    color: #1a62b4;
}

.personaje-vanidosa{
	background-position:-0px -0px;
	width:348px;
	float:left;
}

.personaje-peleonero{
	background-position: -348px -0px;
	width:347px;
	float:right;
}
.btn-personaje{
	position:absolute;
	bottom:0;
}
.personaje-vanidosa .btn-personaje{
	left:0px;
	padding-left: 44px;
}
.personaje-peleonero .personaje-peleonero{
	right:0;
	padding-right: 44px;
}

.textorv {
    text-align: center;
}
.etiqueta{
	background: url("../img/personajes/etiquetas.png") no-repeat scroll 0 0;
    color: #ccc;
    font-family: "league_spartanregular",Arial,Helvetica,sans-serif;
    font-size: 1.5em;
    height: 71px;
    left: 0;
    letter-spacing: 1px;
    line-height: 2.2em;
    margin: auto;
    position: absolute;
    right: 0;
    top: 6px;
    width: 237px;
    z-index: 9;
}

.etiqueta.et-activa{
    z-index: 47;
}

.vntn--btn-cerrar-img-vanidosa,.vntn--btn-cerrar-img-peleonero{
    background: url("../img/navegacion.png") no-repeat scroll -88px -168px;
    float: right;
    height: 42px;
    position: relative;
    right: 16px;
    text-indent: -9999px;
    top: -34px;
    width: 44px;
    z-index: 50;
}

.vntn--btn-cerrar-img-vanidosa{
	
}

/*** Img etiquetas ***/

.encuentra-vanidosa img, .encuentra-peleonero img{
	position:absolute;	
}
.jaime.img-activa, .yaretzi.img-activa{
    z-index: 47;
}
.ysociable {
    right: 0;
    top: 7%;
}
.yestudiando{
	left:0;
	bottom:0;
	z-index: 7;
}
.ypatinando{
	left: 4%;
    top: 5%;
}
.yprotectora{
	bottom: 0;
    left: 29%;
    z-index: 5;
}
.yvanidosa01{
	left: 25%;
    top: 18%;
    z-index: 6;
}
.yvanidosa02{
	bottom: 0;
    right: 0;
    z-index: 7;
}
.yvanidosa03{
	bottom: 0;
    right: 20%;
}

.jlector{
	bottom: 1%;
    left: 42%;
    z-index:5;
}
.jcocinero{
	left:3%;
    top: 2%;
}
.jcinefilo{
	bottom: 0;
    right: 6%;
}
.jpeleonero01{
	top:4%;
	right:0;	
}
.jpeleonero02{
	left:0;
	bottom:0;
	z-index: 7;
}
.jpeleonero03{
	right: 31%;
    top: 12%;
}
.jvanidoso{
	left: 25%;
    top: 5%;
}
.pantallaPersonajePeleonero::after {
    background: url("../img/personajes/back_gris.png") no-repeat scroll 0 0;
    bottom: 0;
    content: "";
    display: block;
    height: 136px;
    position: absolute;
    right: 0;
    width: 742px;
    z-index: -1;
}
.lbl-etiqueta{
    background-color: #f9f3e8;
    border: 2px dashed #afafaf;
    border-radius: 5px;
    box-shadow: 0 0 0 5px #f9f3e8;
    color: #666;
    display: block;
    font-size: 1.1em;
    left: 0;
    line-height: 1.1em;
    margin: auto;
    padding: 3px 14px 12px;
    right: 0;
}
/*
.lbl-etiqueta:before{
	content:"";
	display:block;
	background: url("../img/personajes/etiquetas.png") no-repeat -80px -190px;
	width:68px;
	height:24px;
}*/
.vntn-etiqueta{
	top:25%;
}


.btn-adj_selec,
.btn-etiqueta-seleccionada,
.btn-adj_seleccionado{
	font-family: "andika_basicregular",Arial,Helvetica,sans-serif;
	background-color: #9380cf;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    height: 44px;
    letter-spacing: 0;
    margin-top: 6px;
    width: 175px;
}
.btn-adj_seleccionado{
	background-color:rgba(147,128,207, 0.9);
}
.btn-adj_selec{
	float:right;
	margin: 4px 4px 0 0;
	
}
.preguntas{
    bottom: 0;
    height: 540px;
    margin: auto auto auto 3%;
    position: absolute;
    text-align: center;
    top: 0;
    width: 700px;
    background: url("../img/back_preguntas.png") no-repeat center center;
    color: #336cb6;
    font-family: "andika_basicregular",Arial,Helvetica,sans-serif;
    font-size: 22px;
    line-height: 1.4;
    padding: 0 30px;
}
.preguntas .btn-siguiente{
	bottom: 3%;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
     width: 200px;
}
.js-mostrar-etiqueta{
	top:0;
	bottom:0;
	margin:auto;
}
.btn-etiqueta-seleccionada{
	bottom:0;
	left:0;
	right:0;
	top:27%;
	margin:auto;
	position: absolute;
	padding-bottom: 3px;
}
.preguntas > div:first-child {
    margin-top:245px;
}
.preguntas input.texto {
	font-family: "andika_basicregular",Arial,Helvetica,sans-serif;
    border: 2px solid #6fc58c;
    border-radius: 5px;
    display: block;
    font-size: 1em;
    height: 100px;
    left: 0;
    margin: 30px auto auto;
    position: absolute;
    right: 0;
    text-align: center;
    width: 400px;
    color: #666;
}
.preguntas > div:nth-child(2) {
    margin-top: 165px;
}
.preguntas > div:nth-child(3) {
    margin-top: 227px;
}
.preguntas > div:nth-child(4) {
    margin-top: 160px;
}
.preguntas > div:nth-child(5) {
    margin-top: 113px;
}
.preguntas > div:nth-child(6) {
    margin-top: 200px;
}
.preguntas > div:nth-child(7) {
    margin-top: 160px;
}
.btn-otra-etiqueta,
.btn-conclusion{
	position:absolute;
	right:0;
	left:0;
	margin:auto;
}
.btn-otra-etiqueta{
	margin-top: 50px;
}
.btn-conclusion{
	bottom:3%;
}

/*.btn-adverbio{
	background-color: #13CAEA;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-family: "andika_basicregular",Arial,Helvetica,sans-serif;
    height: 44px;
    letter-spacing: 0;
    margin-right: 12px;
    margin-top: 6px;
    padding-bottom: 5px;
    width: 180px;
}
.btn-adverbio.segundo{
	background-color: #01B3E1;
}
.btn-adverbio.tercero{
	background-color: #00A0D2;
}*/

.btn-adverbio{
    background-color: #13CAEA;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-family: "andika_basicregular",Arial,Helvetica,sans-serif;
    height: 44px;
    letter-spacing: 0;
    margin-right: 12px;
    margin-top: 6px;
    padding: 0px 10px;
    padding-bottom: 5px;
    width: 180px;
    display: inline-block;
     line-height: 2em;
}
.btn-adverbio.segundo{
    background-color: #01B3E1;
}
.btn-adverbio.tercero{
    background-color: #00A0D2;
}
.btn-adverbio > label{
     padding: 0px 10px;
}

.btn-adverbio.activo{
    background-color: #de4e65;
}
.frase-realimentacion{
	background-color: rgba(251, 248, 240, 0.5);
    border-radius: 5px;
    display: block;
    font-size: 22px;
    margin: 40px 60px;
    padding: 10px;
    right: 0;
    text-align: center;
}

/* --------------------------
 *   Responsive 
 * ------------------------- */
/* estilos aplican en width < 1024px  (iPad landscape) */
@media screen and (max-width: 1024px) {
	
	/*.owl-stage .btn-continuar {
    	bottom: -48px;
    	left: 0;
    	margin: auto;
    	right: 0;
   		top: inherit;
	}*/
	.owl-carousel.carrusel-comic {
    	top: 47%;
	}
}


/* estilos aplican en width < 1045px  (Breakpoint) */
@media screen and (max-width: 985px) {
	
	.back_juego,
	.preguntas {
    	left: 0;
   		margin: auto;
    	position: absolute;
    	right: 0;
    	top:-30%;
    	bottom:inherit;
	}
	.preguntas{
		top:5%;
	}
	.adj-seleccionados{
    	bottom: 5%;
    	left: 0;
    	margin: auto;
    	position: absolute;
    	right: 0;  
    	top:auto;
	}

    .contenedor-adj{
        direction: rtl;
    }
    .contenedor-adj,.contenedor-adj > button {
        -ms-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }


	[data-genero = "femenino"] .adj-seleccionados{
        width:541px;
        height:254px;
        background: url("../img/siluetas.png") no-repeat -0px -0px;
    }

    [data-genero = "masculino"] .adj-seleccionados{
        width:540px;
        height:219px;
        background: url("../img/siluetas.png") no-repeat -0px -254px;
    }
    .div-nombre, .div-genero { 
    	top: 69%;
	}
	.nombre {
    	margin-bottom: 16%;
   }
   .js-adj-seleccionados {
    	right:inherit;
    	left: 0;
    	width:inherit;
	}
   	.btn-adj_seleccionado{
   		width: 168px;
   		display: inline-block;
   		margin:6px 12px 0 0;
  	}
  	.vntn--contenido {
    	height: 840px;
    	min-width: 620px;	
  	}
  	.left {
	    text-align: center;
    	width: 100%;
    	float:none;
    	margin:0;
	}
	.right {
		float:none;
    	margin:0;
    	text-align: center;
    	width: 100%;
	}
	.mCSB_container.mCS_y_hidden.mCS_no_scrollbar_y {
    	height: 515px;
    }
    .ui-tabs-nav {
    	text-align: center;
	}
	h2.vntn--titulo {
   		text-align: center;
	}
	.logos li.sep {
   	 	margin-left: 3%;
    	margin-right: 3%;
	}
	.ui-tabs {
    	top: 0;
    	position: relative;
    	height: 547px;
	}
	.logos li.sep {
    	margin-left: -7px;
    	margin-right: 0
    }
    .logos li.unam {
    	margin-right: 14px
    }
	.copy {
   		top: auto;
   		width:100%;
	}
  
  
}


/* estilos aplican en width < 800px  (IE y Android Portrait) */
@media screen and (max-width: 800px) {

	/* --------------------------------
	 * Incluir aqui los estilos
	 * a los elementos que cambiaran. 
	 * -------------------------------- */

     /*body{
        border:solid 2px blue;
     }*/
    
    /*.oacontext{
     	width:760px; 
        height:927px;
    }*/
    
    .pantallaPersonajePeleonero::after {
    	height: 229px;
	}
    .jlector {
    	bottom: 14%;
    	left: 35%;
	}
	.jpeleonero03 {
    	right: 13%;
    	top: 35%;
	}
	.jvanidoso {
    	left: 25%;
    	top: 21%;
	}
	.jcinefilo {
    	right: 1%;
	}
	.yestudiando {
    	left: -4%;
	}
	.yprotectora {
    	left: 20%;
	}
	.yvanidosa03 {
    	bottom: 11%;
    	right: 11%;
	}
	.yvanidosa01 {
    	left: 25%;
    	top: 25%;
	}
	.ypatinando {
    	left: 4%;
    	top: 5%;
	}
	.yvanidosa02 {
    	right: -2%;
	}
	
}

/* estilos palican width < 768px (iPad, portrait)*/
@media screen and (max-width: 768px) {

	/* --------------------------------
	 * Incluir aqui los estilos
	 * a los elementos que cambiaran. 
	 * -------------------------------- */
     /*body{
        background-color:red;
        border:solid 2px green;
     }*/
    
    .jvanidoso {
    	left: 25%;
    	top: 16%;
	}
	.jlector {
    	left: 37%;
	}
    .yvanidosa03 {
    	bottom: 2%;
    	right: 4%;
	}
	.yvanidosa01 {
    	left: 23%;
    	top: 25%;
	}	
	.ysociable {
   		right: 0;
    	top: 1%;
	}
	.ypatinando {
    	left: 4%;
    	top: 2%;
	}
	.nav-secciones button{
    	padding: 0;
    	letter-spacing: 0.5px;
	}
     
}

