/* --------------------------
 *  Fuentes
 * ------------------------- */

/*Muli*/

@font-face {
    font-family: 'mulibold';
    src: url('../fonts/muli/muli-bold-webfont.eot');
    src: url('../fonts/muli/muli-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/muli/muli-bold-webfont.woff2') format('woff2'),/*CAUSA ERROR*/
         url('../fonts/muli/muli-bold-webfont.woff') format('woff'),
         url('../fonts/muli/muli-bold-webfont.ttf') format('truetype'),
         url('../fonts/muli/muli-bold-webfont.svg#mulibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'mulilight';
    src: url('../fonts/muli/muli-light-webfont.eot');
    src: url('../fonts/muli/muli-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/muli/muli-light-webfont.woff2') format('woff2'),
         url('../fonts/muli/muli-light-webfont.woff') format('woff'),
         url('../fonts/muli/muli-light-webfont.ttf') format('truetype'),
         url('../fonts/muli/muli-light-webfont.svg#mulilight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'muliregular';
    src: url('../fonts/muli/muli-webfont.eot');
    src: url('../fonts/muli/muli-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/muli/muli-webfont.woff2') format('woff2'),
         url('../fonts/muli/muli-webfont.woff') format('woff'),
         url('../fonts/muli/muli-webfont.ttf') format('truetype'),
         url('../fonts/muli/muli-webfont.svg#muliregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*Fira Sans*/

@font-face {
    font-family: 'fira_sansbold';
    src: url('../fonts/firasans/firasans-bold-webfont.eot');
    src: url('../fonts/firasans/firasans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/firasans/firasans-bold-webfont.woff2') format('woff2'),
         url('../fonts/firasans/firasans-bold-webfont.woff') format('woff'),
         url('../fonts/firasans/firasans-bold-webfont.ttf') format('truetype'),
         url('../fonts/firasans/firasans-bold-webfont.svg#fira_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'fira_sansitalic';
    src: url('../fonts/firasans/firasans-italic-webfont.eot');
    src: url('../fonts/firasans/firasans-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/firasans/firasans-italic-webfont.woff2') format('woff2'),
         url('../fonts/firasans/firasans-italic-webfont.woff') format('woff'),
         url('../fonts/firasans/firasans-italic-webfont.ttf') format('truetype'),
         url('../fonts/firasans/firasans-italic-webfont.svg#fira_sansitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'fira_sansregular';
    src: url('../fonts/firasans/firasans-regular-webfont.eot');
    src: url('../fonts/firasans/firasans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/firasans/firasans-regular-webfont.woff2') format('woff2'),
         url('../fonts/firasans/firasans-regular-webfont.woff') format('woff'),
         url('../fonts/firasans/firasans-regular-webfont.ttf') format('truetype'),
         url('../fonts/firasans/firasans-regular-webfont.svg#fira_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* --------------------------
 *  Generalidades
 * ------------------------- */
.oacontext{
    position: relative; 
    /*box-shadow: 0 0 3px #666;*/
    background: -moz-linear-gradient(top,  rgba(0,204,192,1) 0%, rgba(117,206,221,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(0,204,192,1) 0%,rgba(117,206,221,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(0,204,192,1) 0%,rgba(117,206,221,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.overlay{
	background-color: rgba(28, 180, 194, 0.95);
}

body{
    font-family: 'muliregular', Arial, Helvetica, sans-serif;
    font-size: 19px;
    line-height: 1.4;
    background-color:#75CEDD;
}

.content {
    height: 100%;
}

ul {
    margin:0;
    padding:0;
}

li{
    list-style: none;
}

p {
	color: #2d2b2b;
    font-family: "muliregular",Arial,Helvetica,sans-serif;
}
h1{
    color: #5267d0;
    font-family: "fira_sansbold",Arial,Helvetica,sans-serif;
    font-size: 2.8em;
    margin-bottom: 0;
    text-align: center;
}
h2{
    color: #585753;
    font-family: "fira_sansbold",Arial,Helvetica,sans-serif;
    font-size: 1.5em;
    text-align: center;
}


/* --------------------------
 *  Header 
 * ------------------------- */

.header {
    position: absolute;
    background: none;
    width: 90%;
    width: calc(100% - 12px);
    z-index: 1;
}

.header .btn-icono {
	font-family: "muliregular",Arial,Helvetica,sans-serif;
    background: none;
    border: none;
    line-height: 43px;
    color: #fff;
    font-size: 1.1em;
    margin: 0;
    overflow: hidden;
    height: 46px;
    padding-left: 46px;
    position: relative;
}

.header .btn-icono::before {
    background: url("../img/sprites.png") no-repeat -90px -135px #8EC25D;
    content: "";
    display: block;
    height: 44px;
    color: #fff;
    width: 44px;
    text-align: center;
    line-height: 44px;
    position: absolute;
    top: 0;
    left: 0;
}

.header .btn-inicio::before {
    background-position: -90px -135px;
}

.header .btn-instruccion::before {
    background-position: -90px -90px;
    background-color: #5168D0;
}

.header .btn-bienvenidos::before {
    content: "\2600";
    background: #d93240;
    font-size: 1.8em;
    background-color:#F1AD4A;
}

.header .btn-creditos::before {
    background-position: -136px -91px;
    background-color:#C196C1;
}


.btn-icono.btn-creditos {
    float: right;
    padding: 0;
    text-indent: -9999px;
    width: 44px;
}

.btn-icono.btn-instruccion {
    float: right;
    margin-right: 10px;
}

.btn-icono.btn-bienvenidos{
    margin-right: 10px;
    float: right;
}


/*.btn-icono.btn-bienvenida{
    margin-right: 60px;
    float: right;
}*/


/* --------------------------
 *  BOTONES
 * ------------------------- */

button {
	border: none;
    color: #fff;
    cursor: pointer;
    font-family: "mulibold",Arial,Helvetica,sans-serif;
    font-size: 20px;
    min-height: 44px;
    position: relative;
}

.vntn--btn-cerrar{
	background-color:#5168D0;
	border:none;
	color: #fff;
    font-size: 1.5em;
    height: 48px;
    right: 0;
    top: 0;
    width: 48px;
    font-weight:normal;
}

.vntn-instruccion .vntn--btn-cerrar{
	background-color:#30C875;
	height: 51px;
}
.vntn-realim-bien .vntn--btn-cerrar,
.css-vtn-escaleta-correcto .vntn--btn-cerrar{
	height: 60px;
}

.vntn--btn-comenzar, .btn_continuar{
	background-color:#F29200;
	border:4px solid #FCAD36;
}
.btn_continuar {
    padding-right: 38px;
	    width: 154px;
}
.css-btn-mas, 
.css-btn-foto{
	padding-left:38px;
}
.css-btn-video{
	padding-left:48px;
}

.btn_continuar:after,
.css-btn-foto:before,
.css-btn-mas:before,
.css-btn-video:before{
    background: url("../img/navegacion_iconos.png") no-repeat scroll -0px -160px;
    content: "";
    height: 44px;
    position: absolute;
    top: -4px;
    width: 44px;
}
.css-btn-foto:before,
.css-btn-mas:before{
	    left:-2px;
}
.css-btn-video:before{
	  left:2px;
}


.btn_continuar:after{
	right: -2px;
}
.css-btn-foto:before{
	background-position: -132px -152px;
}
.css-btn-mas:before{
	background-position: -44px -160px;
}
.css-btn-video:before{
	background-position: -45px -108px;
}
.css-btn-foto{
	background-color: #7055c8;
    border: 4px solid #8c76d8;
    bottom: 47px;
    position: absolute;
    right: 0;
}
.css-btn-video{
	background-color: #87c846;
    border: 4px solid #c9f19b;
    left: 104px;
    position: absolute;
    top: 181px;
}

.css-btn-premioCont {
    background-color: orange;
}


/**** LINKS ****/

a {
    text-decoration: none;
}
.css-btn-def{
	border-bottom: 3px solid #2bc972;
    color: #2bc972;
    display: inline-block;
    font-weight: bold;
    height: 26px;
}


/* --------------------------
 *  ventanas
 * ------------------------- */

.vntn {
    /*top: -10px;*/
    -webkit-transition: all 300ms ease 0s;
    transition: all 300ms ease 0s;
    width: 70%;
    text-align: center;
    background-color:#F8F6EA;
    box-shadow: none;
}

.vntn-bienvenidos.e-oculto,
.vntn-instruccion.e-oculto{
    display: block !important;
    opacity: 0;
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
    top: 22px;
    right: 150px;
   /* z-index: -1;*/
}


.vntn-instruccion{
	z-index: 40;
	}


.vntn-bienvenidos.e-oculto{
    right: 480px;
}


/*	.vntn.vtn-postit{
		width: 100%; 
		height:100%;
		top: 0px;
		}*/
		
		
/*ventana para saber mas*/

.css-img-mas {
	background-repeat: no-repeat;
	height: 270px;
	width: 270px;
}
.tit-mas-vnt{
	background-color: #b447c8;
    display: inline-block;
    font-family: "fira_sansbold",Arial,Helvetica,sans-serif;
    font-size: 1.1em;
    height: 100%;
    margin-left: -20px;
    padding-left: 60px;
    padding-right: 20px;
    line-height: 2.6em;
}
.tit-mas-vnt:before {
    background: url("../img/navegacion_iconos.png") no-repeat scroll -0px -108px;
    content: "";
    height: 52px;
    left: 6px;
    position: absolute;
    top: 6px;
    width: 45px;
}
/*.css-parasaber-1 {
	background-image: url(../img/parasaber/parasaber1.jpg);
}*/
.portada .vntn-bienvenidos,
.vntn-bienvenidos.desde-periodico{
	background: url("../img/portada/back.jpg") repeat;
	border:7px solid #01CDC1;
	box-shadow:0 0 0 5px #F7AC39;
}
.css-vntn-def{
	background-color: #9eee9f;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.4);
    color: #333;
    text-align: left;
    top: 56%;
    width: 460px;
     border: medium none;
}
.css-vntn-def .css-txt-tit {
	border-bottom: 3px solid #5168d0;
    font-family: "mulibold",Arial,Helvetica,sans-serif;
    font-size: 23px;
    margin: -12px -20px 16px;
    padding-bottom: 7px;
    padding-left: 20px;
}
.vntn-instruccion{
	background-color: #efedde;
    border: 3px solid #5168d0;
    box-shadow: -6px 6px 0 rgba(0, 0, 0, 0.2);
    left: auto;
    right: 0;
    top: -50px;
    width: 420px;
}
.vntn-bienvenidos{
	background-color:#F8F6EA;
}
.vntn-encabezado-instruccion{
	background-color: #5168d0;
    border-bottom: 3px solid #30C875;
    color: #fff;
    font-family: "muliregular",Arial,Helvetica,sans-serif;
    font-size: 1.1em;
    height: 48px;
    left: -20px;
    line-height: 43px;
    padding-right: 12px;
    position: relative;
    text-align: right;
    top: -20px;
    width: 400px;
}
.pantalla4-video .vntn-bienvenidos,
.pantalla3-video .vntn-bienvenidos,
.pantalla2 .vntn-bienvenidos{
	background-color: #efedde;
    border: 3px solid #5168d0;
    box-shadow: -6px 6px 0 rgba(0, 0, 0, 0.2);
    width: 560px;
    max-width: none;
}
.vntn-encabezado-bienvenida{
	background-color: #5168d0;
    border-bottom: 5px solid #f29200;
    color: #fff;
    font-family: "muliregular",Arial,Helvetica,sans-serif;
    font-size: 1.5em;
    height: 60px;
    left: -20px;
    line-height: 54px;
    margin-bottom: -30px;
    padding-right: 12px;
    position: relative;
    text-align: center;
    top: -44px;
    width: 591px;
}
.vntn-encabezado-bienvenida:before {
    content: "☀";
    font-size: 1.3em;
    margin-right: 7px;
}

.vntn-encabezado-instruccion:before{
	background: url("../img/sprites.png") no-repeat scroll -90px -90px;
    content: "";
    display: block;
    height: 44px;
    line-height: 44px;
    position: absolute;
    right: 154px;
    width: 44px;
}
.vntn-instruccion--txt {
   /* margin-top: 75px;*/
}

.vtn-postit,
.css-vtn-mas{
	background-color: #fff9b5;
    border: 4px solid #454b95;
    box-shadow: none;
    max-width: 90%;
    width: 84%;
    top: 0;
}
.css-vtn-mas{
	background-color: #F8F6EA;
}
.vntn-realim-bien{
	border: 3px solid #474b95;
    right: -53%;
    top: 3%;
    width: 31%;
}

.vntn-tips-video{
	background-color: #22b4c3;
    border: medium none;
    box-shadow: none;
    max-width: 90%;
    width: 84%;
}


/* The animation code */
/* The animation code */

.css-area-postPeriodico{
	
-webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 4s ease-in-out;
  -ms-transition: opacity 4s ease-in-out;
  -o-transition: opacity 4s ease-in-out;
  transition: opacity 4s ease-in-out;
  
	}

.css-area-postit-1 {
    /*left: -678px;*/
    position: relative;
}
 
 
 .css-area-postit-2 {
    /*left: -678px;*/
    position: relative;
}
 
 
 .css-area-postit-3{
    /*left: -678px;*/
    position: relative;
}
 
 
 
 .css-area-postit-4 {
   /* left: -678px;*/
    position: relative;
}
 
 
 
 .css-area-postit-5{
   /* left: -678px;*/
    position: relative;
}
 
 
 .e-visible{ 
opacity:0;
	}
 
/* The animation code */
@keyframes periodico {
   from {left:-678px;}
   to {left:0px;}	
}

.css-anim-parrafo{ 
animation-name: periodico;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 1s;

-webkit- animation-name: periodico;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 1s;


-ms-animation-name: periodico;
-ms-animation-duration: 1s;
-ms-animation-timing-function: linear;
-ms-animation-delay: 1s;

-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
-ms-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
	
 	}


.css-btn-vaportada{
	bottom: 66px;
    position: absolute;
    right: 12px;
}



/***** Para saber más ******/
.css-tit-mas.css-tit-vtn{
	
}
.css-vtn-escaleta-correcto{
	background-color: #f8f6ea;
    border: 3px solid #474b95;
    right: 0;
    width: 520px;
}
.pantalla2 .css-inicio-pantalla.vntn-bienvenidos{
	right: -61%;
    width: 400px;
}












/* --------------------------
 *  Pantallas
 * ------------------------- */

/* --------------------------
 *  portada
 * ------------------------- */


.pantalla {
	padding-top: 56px;
 
	 bottom: 0;
	 left: 0;
	 margin: 50px auto auto;
	 max-height: 1280px;
	 max-width: 1280px;
	 min-height: 570px;
	 min-width: 756px;
	 padding-top: 1px;
	 position: absolute;
	 right: 0;
	 top: 0;
	 width: auto;
}

.portada .vntn-bienvenidos p {
	text-align: center;
}

.css-elemento {
	display: inline-block;
	vertical-align: middle;
}
.css-area-periodico {
    background-color: #f3e6d6;
    box-shadow: -10px 5px 0 rgba(0, 0, 0, 0.1);
    margin-left: 2%;
    min-height: 442px;
    min-width: 510px;
    padding: 20px;
    width: 45%;
}
.fase_periodico .css-area-periodico {
    min-height: 520px;
    width: 56%;
}
/*
.css-area-periodico:before{
	background-color: #97978b;
    content: "";
    display: block;
    height: 98%;
    position: absolute;
    right: 0;
    top: 7px;
    -ms-transform:rotate(3deg);
   	-webkit-transform:rotate(3deg);
    transform: rotate(3deg);
    width: 100%;
    z-index: -1;
}*/
.css-periodico {
 text-align: right;
}
.btn-creditos {
	z-index: 51;
}

.css-area-foto-video {
	vertical-align: bottom;
    width: 44%;
}

.css-fv {
	position: absolute;
}

.css-video-normal {
	background: url("../img/portada/menu_imgs.png") no-repeat -0px -487px;
	bottom: 0;
    height: 487px;
    right: 0;
    width: 44%;
}

.css-video-activo {
	background: url("../img/portada/menu_imgs.png") no-repeat -0px -0px;
}

.css-foto-normal {
	right:1%;
	bottom:0;
	z-index:1;
	background: url("../img/portada/menu_imgs.png") no-repeat -630px -215px;
	width:256px;
	height:215px;
}

.css-foto-activo {
	background: url("../img/portada/menu_imgs.png") no-repeat -630px -0px;
}

/* --------------------------
 *  pantalla 2 periodico
 * ------------------------- */

.tit-periodico,
.css-tit-periodico-2{
	color: #928e89;
    font-family: "fira_sansbold",Arial,Helvetica,sans-serif;
    font-size: 4.2em;
    line-height: 78px;
    text-align: center;
    text-transform: uppercase;
    position:relative;
    margin-bottom: 20px;
    margin-top: -12px;
}
.css-tit-periodico-2{
    font-size: 1.8em;
    margin:0;
}
.tit-periodico:after,
.css-tit-periodico-2:after{
	background-color: #aca7a1;
    bottom: -12px;
    content: "";
    display: block;
    height: 8px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    width: 400px;
}
.css-tit-periodico-2:after{
	bottom: 14px;
    width: 409px;
}
.css-periodico h2{
	color: #5068d2;
    font-size: 2.3em;
    margin: 0 0 -10px;
}

.css-btn-postit {
	background-color: #fff69b;
    color: #333;
    float: left;
    height: 145px;
    margin: 5px;
    padding: 12px;
    text-align: center;
    width: 40%; 
    box-shadow: -4px 4px 0 rgba(0, 0, 0, 0.1);
}

.css-btn-postit-a {
	
}

.css-area-postits {
    float: right;
    width: 38%;
}

.css-postit-1{
	height: 117px;
    padding-top: 40px;
}

.css-postit-2,
.css-postit-3{
	height: 125px;
    padding-top: 32px;
}
.css-postit-4{
	height: 97px;
    padding-top: 60px;
}
.css-postit-5{
	height:168px;
    padding-top: 20px;
}

/*Ventana post it*/

.css-tit-vtn,
.css-tit-vtn-correcto{
	background-color: #474b95;
    border-bottom: 5px solid #62c976;
    color: #fff;
    font-family: "fira_sansregular",Arial,Helvetica,sans-serif;
    font-size: 1.3em;
    height: 70px;
    line-height: 2.6em;
    margin: -20px -20px 40px;
    padding-left: 20px;
    text-align: left;
}
.css-tit-vtn-correcto{
	background-color:#474B95;
    border-bottom: 5px solid #62c976;
    color: #00f07f;
    font-weight: bold;
    height: 60px;
    text-align: center;
}
.css-vtn-objeto .btn_continuar{
	margin-top:12px;
}

.css-conte-vtn{
    display: inline-block;
    margin-right: 30px;
    text-align: justify;
    top: 0;
    vertical-align: top;
    width: 46%;
}
.css-vtn-li-tipo{
	list-style: outside none disc;
    margin-bottom: 12px;
    margin-left: 33px;
    text-align: left;
}


.css-vtn-ul-tipo {
   /* left: 496px;
    position: absolute;*/
}
.vntn.vtn-postit.js-vntn {
    /*height: 95%;*/
}

.css-img-vtn.css-img-vtn.js-imagen-vtn > img {
	/*padding-bottom: 50px;*/
}




.css-img-vtn {
	background-repeat: no-repeat;
    border-left: 4px solid #454b95;
    display: inline-block;
    position: relative;
    text-align: left;
    width: 46%;
}
.css-area-imgTxt {
	background-color: #FFFFFF;
}
.css-pie-vtn{
	display: block;
    font-size: 0.9em;
    padding-left: 12px;
}
.vtn-postit .vntn--btn-cerrar,
.vtn-mas .vntn--btn-cerrar,
.vtn-tip .vntn--btn-cerrar,
.vntn-tips-video .vntn--btn-cerrar{
	height:70px;
}
.css-vntn-def .vntn--btn-cerrar{
	height:48px;
}

/*partes del periodico*/
.css-area-postit-1 {
}
.css-area-postit-2 {
}
.css-area-postit-3 {
}
.css-area-postit-4 {
    background-image: url("../img/periodico/foto_periodico.jpg");
    background-repeat: no-repeat;
    display: inline-block;
    height: 206px;
    margin-bottom: 4px;
    vertical-align: top;
    width: 320px;
}

.css-area-postit-5 {
}

.css-block-post {
	display: inline-block;
}

.css-izq-post {
	height: 100%;
	width: 45%;
	background-color: #FFDBDB;
}

.css-der-post {
	background-color: #daf5ff;
	height: 43%;
	vertical-align: top;
	width: 45%;
}



/*imagenes de ventana*/
.imagenVtn-1 {
	background-image: url(../img/periodico/ocoxal.jpg);
}

.imagenVtn-2 {
	background-image: url(../img/periodico/xochi.jpg);
}

.imagenVtn-3 {
	background-image: url(../img/periodico/mich.jpg);
}

.imagenVtn-4 {
	background-image: url(../img/periodico/milpalta.jpg);
}

.imagenVtn-5 {
	background-image: url(../img/periodico/venado.jpg);
}

.css-postit-vtn {
	left: 70%;
	position: relative;
}

.css-selec-post {
	background-color: #5168d0;
    color: #fff;
}

.css-img-mas {
	background-repeat: no-repeat;
	height: 270px;
	width: 270px;
}

.css-img-masP1 {
	background-image: url(../img/periodico/foto_periodico.jpg);
}

.css-btn-mas {
    background-color: #b447c8;
    border: 3px solid #bf66d0;
    bottom: 12px;
    position: absolute;
    right: 12px;
    width: 212px;
}
.parte-tit-periodico{
	color: #514c49;
    font-family: "fira_sansbold",Arial,Helvetica,sans-serif;
    font-size: 1.2em;
    text-transform: uppercase;
}
.subtit-periodico{
	color: #797b7a;
    font-family: "fira_sansbold",Arial,Helvetica,sans-serif;
    font-size: 1.2em;
    margin: 8px 0;
    text-align: center;
}
.css-periodico .texto-periodico{
	margin-bottom: 12px;
    text-align: justify;
}
.css-area-postPeriodico{
	
}
.pie-periodico{
  background-color: #ded0c3;
    display: inline-block;
    font-size: 0.9em;
    margin-bottom: 12px;
    padding: 6px;
    text-align: left;
    width: 100%;
}
.css-btn-escucha{
	position absolute;
	width: 47%;
	right:12px;
	padding:0;
}


.css-pie-period-img {
    position: relative;
    top: 212px;
    width: 95%;
    background-color:transparent;
}

.css-pie-audio{ 
	
}

.anuncio-periodico{
	background-color: #c9f19b;
	box-shadow:-5px 5px 0 rgba(0,0,0,0.15);
}


/* --------------------------
 *  pantalla FOTOGRAFIA
 * ------------------------- */

.css-foto-tijera {
	bottom: 0;
    height: 433px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: -80px;
    width: 579px;
	background: url("../img/foto/tijeras.jpg") no-repeat 0px 0px;
	border: 5px solid #a1f5dd;
}

.css-continuar1 {
	left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 86%;
}

.css-continuar2 {
	bottom: 8px;
    left: 75%;
    position: absolute;
}

.css-foto-tijera-txt {
	background-color: #f4f4ea;
    border: 5px solid #a1f5dd;
    bottom: -96px;
    margin: -5px;
    padding: 5px 8px;
    position: absolute;
}


.css-pie-foto-tijera {
    font-size:0.9em;

}




.css-txt-pie-ifo{
	   font-size: 16px;
	}

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    border-bottom-right-radius:none;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
    border-bottom-left-radius: none;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
    border-top-right-radius: none;
}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
    border-top-left-radius: none;
}
.ui-widget-content {
    background:none;
    border:none;
}

/*Pantalla actividad de foto*/

.css-bloques {
	display: inline-block;
}

.css-block-derecho {
	background-color: #a5f2de;
    left: 1%;
    position: absolute;
    width: 750px;
    min-height: 560px;
}
.css-txt-pie{
	background-color: #f4f4ea;
    min-height: 145px;
    padding: 1px 12px;
    width: 717px;
}
.css-txt-pie p{
	margin:0;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    background-color: #5168d0;
}

.css-ul-tab{
	border-bottom: 4px solid #5168d0;
    font-size: 1.1em;
    font-weight: bold;
    height: 51px;
}

.ui-tabs .ui-tabs-nav li {
	border: 2px solid #5168d0;
    border-radius: 9px 9px 0 0;
    float: right;
    text-align: center;
    width: 100px;
}


.css-tab-tit{
 	background-color: #a5f2de;
    font-size: 1.15em;
    font-weight: bold;
    height: 54px;
    line-height: 2.9em;
    padding: 0 12px;
    position: absolute;
    top: 0;
    width: 269px;
}



/*derecho fondos y pie*/

.css-conte-tab {
	
}


/* .css-img-pie-1{ 
background: url("../img/foto/img-1.jpg") no-repeat 0px 0px;
}*/


/*izquierdo objetos*/
.css-block-izquierdo {
	background-color: #f0efdd;
    border: 3px solid #5168d0;
    box-shadow: -5px 5px 0 rgba(0, 0, 0, 0.1);
    min-width: 250px;
    padding: 0 12px;
    position: absolute;
    right: 1%;
    vertical-align: top;
    width: 290px;
}

.css-area-objetos {
	

}

.css-objetos-tit {
	background-color: #5168d0;
    color: #fff;
    display: inline-block;
    font-size: 1.1em;
    height: 48px;
    line-height: 2em;
    margin-left: -15px;
    margin-bottom: 5px;
    text-align: center;
    width: 320px;
}

.css-trompo-1 {
	background-color: #C3E7FF;
	background: url("../img/foto/trompo-1.png") no-repeat 0px 0px;
}

.css-trompo-2 {
	background-color: #C3E7FF;
	background: url("../img/foto/trompo-2.png") no-repeat 0px 0px;
}

.css-nahual-1 {
	background-color: #C3E7FF;
	background: url("../img/foto/nahual-1.png") no-repeat 0px 0px;
}

.css-nahual-2 {
	background-color: #C3E7FF;
	background: url("../img/foto/nahual-2.png") no-repeat 0px 0px;
}

.css-mango-1 {
	background-color: #C3E7FF;
	background: url("../img/foto/mango-1.png") no-repeat 0px 0px;
}

.css-mango-2 {
	background-color: #C3E7FF;
	background: url("../img/foto/mango-2.png") no-repeat 0px 0px;
}

.css-nube-1 {
	background-color: #C3E7FF;
	background: url("../img/foto/nube-1.png") no-repeat 0px 0px;
}

.css-nube-2 {
	background-color: #C3E7FF;
	background: url("../img/foto/nube-2.png") no-repeat 0px 0px;
}
.css-arbol-1 {
	background-color: #C3E7FF;
	background: url("../img/foto/arbol-1.png") no-repeat 0px 0px;
}

.css-li-obj {
	background-color: rgba(0, 0, 0, 0.13);
    border: 1px solid #ccc;
    display: inline-block;
    height: 90px;
    width: 140px;
}
.css-btn-reset-foto {
	position: absolute;
	bottom: 0px;
	left: 765px;
}

.css-btn-print-foto {
	position: absolute;
	bottom: 0px;
	left: 1000px;
}

.css-btn-local-foto {
	position: absolute;
	bottom: 0px;
	left: 1300px;
}

.css-pie-tip {
    color: #fff;
    margin: auto;
    position: relative;
    text-align: left;
    width: 460px;
    font-size:0.9em;
}	
/*Ventana objetos correcto e incorrecto*/

.css-obj-correcto{ 
background-color: #004CFF;
color:#00C116;	
	}

.css-obj-incorrecto{ 
background-color: #FF475F;
color: #FFFFFF;	
	}
	
	
.css-btn-vtn-f{
	background-color: #f29200;
    border: 4px solid #fcad36;
    color: #ffffff;
    left: 538px;
    position: absolute;
    top: 361px;
}
	
	
/* Tips foto */	
.css-btn-tip-foto{
	background-color: #7257C8;
    border: 3px solid #A994FD;
    bottom: 66px;
    position: absolute;
    right: 10px;
    width: 214px;
}

.css-tit-tip{ 
	background-color: #474b95;
    border-bottom: 5px solid #62c976;
    box-shadow: -5px 5px 0 rgba(0, 0, 0, 0.1);
    color: #fff;
    font-family: "fira_sansbold",Arial,Helvetica,sans-serif;
    font-size: 1.3em;
    height: 70px;
    letter-spacing: 1px;
    line-height: 2.6em;
    margin: -20px 0 0;
    padding-left: 20px;
    position: absolute;
    right: 0;
    text-align: left;
    width: 300px;
}
.css-tit-tip.vntn-tit-video{
	background-color: #30c875;
    border-color: #4c73ce;
}
.vntn-tips-ilustra{
	margin-top:40px;
}

.css-btn-vtn-tip{ 
	color:#7B0002;
}
	
.css-globo-tip-final{ 
	background: url("../img/tip/back_dialogo.png") no-repeat;
	bottom: -31px;
    color: #ffffff;
    height: 171px;
    padding: 27px 52px 0;
    position: absolute;
    right: -113px;
    width: 268px;
}
.vtn-tip{
	background-color:#22B4C3;
	box-shadow:none;
	border: medium none;
}
.css-conte-tip{
	background-color: #f8f6ea;
    display: inline-block;
    margin-bottom: 20px;
    min-width: 430px;
    padding: 16px;
    margin-top: 82px;
}	

.css-btn-vtn-sig-fot,
.css-btn-vtn-ant-fot{
	background: url("../img/navegacion_iconos.png") no-repeat;
    height: 108px;
    position: absolute;
    text-indent: -9999px;
    top: 57%;
    width: 68px;
}
.css-btn-vtn-sig-fot{
	background-position:-68px -0px;
	 right: 9%;
}
.css-btn-vtn-ant-fot{
	background-position: -0px -0px;
	left: 9%;
}
.css-img-vtn-tip {
    display: block;
    height: 348px;
    margin: auto;
    width: 460px;
}
.css-img-vtn-tip > img {
    border: 5px solid #a1f5dd;
}

/* Tips video */
.video-tip {
	display: inline-block;
	margin: 6px;
}
/* entire container, keeps perspective */
.flip-container {
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-ms-perspective: 1000;
	perspective: 1000;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	     position: relative; 
   
}

.flip-container.e-active{
	  z-index: 20; 
	}



/*  UPDATED! flip the pane when hovered */
.flip-container.e-active .flip-back {
	-webkit-transform: rotateY(0deg) translateZ(11px);
	-moz-transform: rotateY(0deg) translateZ(11px);
	-ms-transform: rotateY(0deg) translateZ(11px);
	transform: rotateY(0deg) translateZ(11px);
	width: 450px;
	height: 380px;
	/*z-index: 11;*/
}
.flip-container.e-active .flip-back.tipback-video-02,
.flip-container.e-active .flip-back.tipback-video-04 {
	-webkit-transform: rotateY(0deg) translate3d(-155px, 0px, 11px);
	-moz-transform: rotateY(0deg) translate3d(-155px, 0px, 11px);
	-ms-transform: rotateY(0deg) translate3d(-155px, 0px, 11px);
	transform: rotateY(0deg) translate3d(-155px, 0px, 11px);
}
.flip-container.e-active .flip-back.tipback-video-05 {
	-webkit-transform: rotateY(0deg) translate3d(-73px, -267px, 11px);
	-moz-transform: rotateY(0deg) translate3d(-73px, -267px, 11px);
	-ms-transform: rotateY(0deg) translate3d(-73px, -267px, 11px);
	transform: rotateY(0deg) translate3d(-73px, -267px, 11px);
}

.flip-container.e-active .flip-front {
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
}
/*  UPDATED! front pane, placed above back */
.flip-front {
	z-index: 2;
	transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	background-color: white;
	
}

.flip-back .flip--content {
	background-color: #F8F6EA;
	transition: all .5s;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	width: 450px;
	height: 380px;
	position: relative;
	opacity: 0;
	font-weight:normal;
	color:#333;
}















.e-active .flip-back .flip--content {
	opacity: 1;
}

.flip-container, .flip-front, .flip-back {
	width: 295px;
	height: 250px;
}







/*.flip-front, .flip-back {
	backface-visibility: hidden;
	transition: 0.6s;
	-webkit-transition: 0.6s;
	-moz-transition: 0.6s;
	-ms-transition: 0.6s;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	border: 3px solid #F5F2E9;
	position: absolute;
	top: 0;
	left: 0;
	cursor: pointer;
}*/







.flip-front {
	position:absolute;
	/*position:sticky;*/

	backface-visibility: hidden;
	
	transition: 0.6s;
	
	-webkit-transition: 0.6s;
	-moz-transition: 0.6s;
	-ms-transition: 0.6s;
	
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	
	border: 3px solid #F5F2E9;
	
	 	 
	top: 0;
	left: 0;
	
	cursor: pointer; 
	
/*z-index: 10;*/

}



 .flip-back { 

	position:absolute;
	
	
	backface-visibility: hidden;
	
	transition: 0.6s;
	
	-webkit-transition: 0.6s;
	-moz-transition: 0.6s;
	-ms-transition: 0.6s;
	
	transform-style: preserve-3d;
	
	
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	
	border: 3px solid #F5F2E9;
	
	 
	 
	top: 0;
	left: 0;
	
	cursor: pointer; 
	
	
/*	z-index: 11;*/

	

	
}






.flip--content {
    background-color: #5168d0;
    bottom: 0;
    color: #fff;
    font-weight: bold;
    height: 48px;
    line-height: 1em;
    padding-top: 12px;
    position: absolute;
    width: 100%;
}
.flip-front.tip-video-01{
	background: url("../img/tip/tip-video_01.jpg") no-repeat;
}
.flip-front.tip-video-02{
	background: url("../img/tip/tip-video_02.jpg") no-repeat;
}
.flip-front.tip-video-03{
	background: url("../img/tip/tip-video_03.jpg") no-repeat;
}
.flip-front.tip-video-04{
	background: url("../img/tip/tip-video_04.jpg") no-repeat;
}
.flip-front.tip-video-05{
	background: url("../img/tip/tip-video_05.jpg") no-repeat;
}
.flip--content li {
    list-style: outside none disc;
    margin-bottom: 16px;
    margin-left: 20px;
}
.tit-back_tipvideo{
	background-color: #5168d0;
    color: #fff;
    font-size: 1.1em;
    font-weight: bold;
    height: 36px;
    margin-bottom: 16px;
    margin-top: -12px;
    padding-top: 12px;
}
.tit-back_tipvideo.cinco{
    height: 55px;
    line-height: 1.2em;
    padding-left: 12px;
    padding-right: 70px;
    padding-top: 9px;
}
.flip--content ul{
	line-height: normal;
    padding: 0 12px;
    text-align: left;
}
.flip--content .btn-close{
	position:absolute;
	font-size: 1.7em;
	width: 48px;
	height:48px;
	background-color:#30C875;
	top: 0;
	right:0px;
}
.flip-front.tip-video-05 + .flip-back .btn-close{
	height:64px;
}
.instruccion-tipvideo{
	color: #fff;
    left: 0;
    padding-right: 320px;
    text-align: left;
}


/* back , inicio */
.flip-back {
	transform: rotateY(-180deg);
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	overflow: hidden;
	transition: transform .3s, width 0.3s 0.5s, height .3s 1s;
	-webkit-transition: -webkit-transform .3s, width 0.3s 0.5s, height .3s 1s;
	-moz-transition: -moz-transform .3s, width 0.3s 0.5s, height .3s 1s;
	-ms-transition: -ms-transform .3s, width 0.3s 0.5s, height .3s 1s;
	z-index: 1;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.css-ficha-video{ 
	background-color: rgba(255, 255, 255, 0.4);
    bottom: 65px;
    box-shadow: -3px 3px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 5px;
    min-height: 50px;
    padding: 12px;
    position: absolute;
    right: 2%;
    width: 240px;
}

/*ACTIVIDAD VIDEO*/

video{
	border: 5px solid #a6f2cc;
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
}
.css-continuar-video{
	bottom: 3%;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
}
.css-area-escaleta-drop {
   display: inline-block;
    margin-left: 2%;
    margin-top: 1%;
    min-width: 656px;
    position: relative;
    vertical-align: top;
    width: 60%;
}
.css-area-escaleta-drag {
    display: inline-block;
    margin-right: 2%;
    margin-top: 2%;
    min-width: 320px;
    width: 29%;
}

.css-btn-regresar-video {
	background-color: #eb9200;
    border: 3px solid #f3ac36;
    bottom: 12px;
    left: 12px;
    position: absolute;
}

.css-btn-tips-video{
	background-color: #30c875;
    border: 3px solid #0ef185;
    bottom: 66px;
    position: absolute;
    right: 10px;
    width: 214px;
}

.css-btn-revisar-escaleta {
	background-color: #fe396f;
    border: 3px solid #ff7a9f;
    bottom: -50px;
    position: absolute;
    right: 38px;
    width: 234px;	
}

.css-escaleta-columna{ 
	display:inline-block; 
	vertical-align:top;
	text-align: center;
}
.css-escaleta-ul-num{
	width:8%;
	min-width:133px;
}
.css-escaleta-ul-drop.audio{
	width: 50%;
}
.css-escaleta-ul-drop.video{
	width: 28%;
}
.css-escaleta-tit{
	background-color: #5168d0;
    color: #ffffff;
    height: 48px;
    line-height: 45px;
    margin-bottom: 4px;
    margin-top: 4px;
    padding: 0 10px;
    text-align: center;
}
.css-escaleta-num{ 
	background-color: #f4f4ea;
    font-size: 1.2em;
    height: 83px;
    line-height: 80px;
    margin-bottom: 4px;
    margin-top: 4px;
    text-align: center;
}

.css-escaleta-drop{ 
	background-color: #cbd3fa;
    border: 3px dotted #5168d0;
    height: 77px;
    margin-bottom: 4px;
    margin-top: 4px;
}
		
.css-escaleta-segv{ 
	background-color: #f4f4ea;
    color: #000000;
    height: 83px;
    margin-bottom: 4px;
    margin-top: 4px;
    padding: 0 8px;
}

.css-escaleta-drag{
	background-color: rgba(255, 255, 255, 0.6);
	box-shadow:-3px 3px 0 rgba(0,0,0,0.1);
    margin-bottom: 5px;
    min-height: 70px;	
}
	
.css-escaleta-drag-3{
	
}
	
.css-conte-drag	{ 
	min-height: 65px;
    padding-top: 10px;
}
	
	
.css-correcto{
	background-color: #9eee9f;
    border: medium solid #30c875;
}	
	
	
.css-vntn-btn-Continuar{
	background-color: #f29200;
    border: 4px solid #fcad36;
}		
		
.css-tit-vtn-incorrecto{
	background-color: #FF475F;
	text-align: center;
}	


.css-txt-autor{
	 font-size: 0.91em;
	}
		
	
/* --------------------------
 *  Reponsive 
 * ------------------------- */

@media screen and (max-width: 1177px) {
	.css-conte-vtn {
	    margin-bottom: 20px;
	    margin-right: 0;
	    width: 96%;
	}
    
}

@media screen and (max-width: 1096px) {
	
	.css-block-derecho {
	    left: -3%;
	    -webkit-transform: scale(0.9);
		-moz-transform: scale(0.9);
		-ms-transform: scale(0.9);
	    transform: scale(0.9);
	}
	.css-block-izquierdo {
	    top: 4%;
	}
	.css-btn-vtn-f {
	    left: 458px;
	    top: 349px;
	}
    
}


/* estilos aplican en width < 1024px  (iPad landscape) */
@media screen and (max-width: 1024px) {
	.pantalla {
	    height: 718px;
	}
	.fase_periodico .css-area-periodico {
    	margin-left: 1%;
    }
    .css-ficha-video {  
	    bottom: 1%;
	    right: 2%;
	    width: 320px;
	}
    
}

/* Breakpoint */
@media screen and (max-width: 1018px) {
	
	.css-area-periodico {
	    left: 0;
	    position: absolute;
	    right: 0;
	    top: 3%;
	    width: 84%;
	    margin:auto;
	}
	
	.css-area-foto-video {
	    bottom: 0;
	    left: 0;
	    margin: auto;
	    right: 0;
	    width: 60%;
	}
	.css-area-escaleta-drop {
	    margin-left: 5%;
    	width: 90%;
	}
	.css-area-escaleta-drag {
	    margin-left: 20%;
	    width: 60%;
	}
	.vntn-realim-bien {
	    left: 0;
	    right: 0;
	    top: 510px;
	    width: 60%;
	}
	.css-ficha-video {
	    left: 0;
	    margin: auto;
	    right: 0;
	    top: 76%;
	    width: 640px;
	    bottom: auto;
	}
	.css-btn-revisar-escaleta {
	    right: 2%;
	    width: 203px;
	}
	.pantalla2 .css-inicio-pantalla.vntn-bienvenidos {
	    right: 0;
	    top: 3%;
	    width: 80%;
	}
	.css-continuar2 {
		bottom: auto;
	    left: 0;
	    margin: auto;
	    position: absolute;
	    right: 0;
	    top: 86%;
	}
	.css-btn-vtn-sig-fot {
	    right: -4%;
	}
	.css-btn-vtn-ant-fot {
	    left: -4%;
	}
	.css-globo-tip-final { 
	    bottom: -192px;
	    right: 0;
	}
	.css-block-derecho {   
	    left: 0;
	    margin: auto;
	    right: 0;
	    top: 1%;
	    -webkit-transform: none;
		-moz-transform: none;
		-ms-transform: none;
	    transform: none;
	    transform:none;
	}
	.css-btn-vtn-f {
	    left: 551px;
	    top: 371px;
	}
	.css-block-izquierdo { 
	    left: 0;
	    margin: auto;
	    right: 0;
	    top: 582px;
	    vertical-align: top;
	    width: 586px;
	}
	.css-objetos-tit {
	    width: 615px;
	}
	.css-btn-postit {
	    width: 79%;
	}
	.css-btn-postit {
	    padding: 9px;
	}
	.css-area-postits {
	    width: 27%;
	}
	.css-postit-1 {
	    height: 84px;
    	margin-top: 12%;
	}
	.css-postit-2 {
	    height: 129px;
	}
	.css-postit-3 {
	    height: 109px;
	}
	.css-postit-4 {
	    height: 84px;
	}
	.css-postit-5 {
	    height: 155px;
	}

}

/* estilos aplican en width < 800px  (IE y Android Portrait) */
@media screen and (max-width: 800px) {
	
	.pantalla {
	    height: 1061px;
	}
	.css-video-normal {
	   	bottom: 0;
	    width: 78%;
	}
	
	
	.css-img-vtn {
	    width:100%;
	}
	

}	
	

/* estilos palican width < 768px (iPad, Android portrait)*/
@media screen and (max-width: 768px) {
	
	.pantalla {
	    height: 877px;
	}
	.css-video-normal {
	    height: 308px;
	    width: 82%;
	}
	.css-area-escaleta-drag {
	    margin-left: 12%;
    	width: 76%;
	}
	.css-escaleta-drag {
	    min-height: 40px;
	}
	.css-conte-drag {
	    min-height: 32px;
	}
	.css-btn-tip-foto {  
	    bottom: 12px;
	    right: 240px;
	}

	

}