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

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

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

@font-face {
    font-family: 'fira_sansregular';
    src: url('../fonts/firasans-regular-webfont.eot');
    src: url('../fonts/firasans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/firasans-regular-webfont.woff2') format('woff2'),
         url('../fonts/firasans-regular-webfont.woff') format('woff'),
         url('../fonts/firasans-regular-webfont.ttf') format('truetype'),
         url('../fonts/firasans-regular-webfont.svg#fira_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
 /* --------------------------
 *  Generales 
 * ------------------------- */
 .oacontext{
    box-shadow: 0 0 3px #666;
    position: relative;
    background: url('../img/fondomapa.jpg') repeat;
    -webkit-transition: background-position 1s;
    -ms-transition: background-position 1s;
    transition: background-position 1s;
    -webkit-transition-delay: 0.25s;
    -ms-transition-delay: 0.25s;
    transition-delay: 0.25s;
    overflow: hidden;
}
body {
	font-family:'fira_sansregular',Arial,Helvetica,sans-serif;
	font-size:16px;
	background: url("../img/halftone.png") repeat scroll 0 0;
}
.titulo{
    font-family:'fira_sansbold',Arial,Helvetica,sans-serif;
    font-size: 22px;
    line-height: 1.2em;
}
.txt{
    text-align: justify;
    margin-top: -10px;
}

.liga{
    font-weight: bold;
    color:#e5572c;
}
.col-cntnr {
    min-height: 420px;
}

h1{
	background-color: #b75cb7;
    color: #fff;
    font-size: 26px;
    margin: 5px 0 6px -6px;
    padding: 4px 12px 10px 0;
    text-align: right;
    width: 100%;
}

h2 {
	font-weight:bold;
	font-size:20px;
}
hr{
	border-color: -moz-use-text-color -moz-use-text-color #e397e8;
	border-color: -ms-use-text-color -ms-use-text-color #e397e8;
	border-color: -webkit-use-text-color -webkit-use-text-color #e397e8;
	border-color: #e397e8;
    border-style: none none dashed;
    border-width: medium medium 2px;
    height: 5px;
    margin-top: -16px;
}

span.bold {
    font-weight: bold;
}

.btns{
	text-align: left;
}
.btn-menu{
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    border: none;
    font-family: "fira_sansregular",Arial,Helvetica,sans-serif;
    font-size: 1.2em;
    font-weight:bold;
    color:#5f5c3b;
    width: 200px;
    padding-right: 50px;
}
.btn-menu::before{
    background: url('../img/menu.png') no-repeat;
    content: "";
    height: 52px;
    display: inline-block;
    width: 52px;
    vertical-align: middle;
}
.btn.btn-conclusion {
    background: #355ab7;
    font-size: 23px;
    margin: 69px auto 2px 60px;
    padding: 3px 11px;
}

.btn-conclusion::after {
    background: rgba(0, 0, 0, 0) url("../img/historia.png") no-repeat scroll center center;
    content: "";
    display: block;
    height: 90px;
    margin-left: 6px;
    margin-top: -110px;
    position: absolute;
    width: 92px;
}

.vntn--btn-cerrar {
	background-color: #b75cb7;
    box-shadow: 0 0 0 3px #fff inset;
    border-radius: 50px;
    color: #fff;
    font-family: "fira_sansbold",Arial,Helvetica,sans-serif;
    font-size: 20px;
    right: -20px;
    top: -14px;
    width: 46px;
    height: 46px;
    line-height: 44px; 
    text-align: center;    
    padding: 0; 
}

.btn {
   display: block;
	margin: 10px auto;
	background: #46aaaa;
	border:solid 1px #fff;
	color: #fff;
	border-radius: 5px;
	font-size: 17px;
	font-family:'fira_sansbold',Arial,Helvetica,sans-serif;
	box-shadow:
	-webkit-box-shadow: 3px 6px 6px -1px rgba(117, 143, 143, 1);
	-moz-box-shadow: 3px 6px 6px -1px rgba(117, 143, 143, 1);
	box-shadow: 3px 6px 6px -1px rgba(117, 143, 143, 1);
}
.piefoto, .oeste .piefoto{
	background: rgba(135, 204, 201, 1) url("../img/imgcrdt.png") no-repeat scroll 9px center;
    color: #000;
    font-family: "fira_sansbook",Arial,Helvetica,sans-serif;
    font-size: 16px;
    padding: 5px;
    margin: 0;
    text-align:center;
    margin: 0 0 5px;
}


.texto_cursiva{
	font-style:oblique;
}

.btn.next.js-next-slide::before {
    background-color: #b75cb7;
    border: 1px solid #fff;
    border-radius: 50%;
    bottom: 0;
    content: "";
    display: block;
    height: 46px;
    margin: auto;
    position: absolute;
    right: -28px;
    top: 0;
    width: 46px;
}
.btn.next.js-next-slide::after {
    border: solid 16px #fff;
    border-color: transparent transparent transparent white;
    bottom: 0;
    content: "";
    display: block;
    height: 0;
    margin: auto;
    position: absolute;
    right: -32px;
    top: 0;
    width: 0;
}

.btn.last.js-last-slide::before {
    background-color: #b75cb7;
    border: 1px solid #fff;
    border-radius: 50%;
    bottom: 0;
    content: "";
    display: block;
    height: 46px;
    margin: auto;
    position: absolute;
    left: -28px;
    top: 0;
    width: 46px;
}
.btn.last.js-last-slide::after {
    border: solid 16px #fff;
    border-color: transparent white transparent transparent;
    bottom: 0;
    content: "";
    display: block;
    height: 0;
    margin: auto;
    position: absolute;
   left: -32px;
    top: 0;
    width: 0;
}
.decotitulo::before {
    content: "";
    display: inline-block;
    height: 41px;
    vertical-align: middle;
    width: 43px;
}
.col.izq{
    margin-left: 0.5%;
    margin-right: 0.1%;
    width: 59%;
}

.col.der{
    margin-right: 20px;
    min-width: 320px;
    width: 36%;
}
.col{
    display: inline-block;
    vertical-align: top;
}

.contenedorimagen.imgvert {
    margin: auto auto 5px;
    max-width: 445px;
}
.contenedorimagen.imghor {
    margin: auto auto 5px;
    max-width: 550px;
}
/* --------------------------
 *  Tabs 
 * ------------------------- */


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

.header {
    position: absolute;
    background-color: rgba(241, 232, 220, 0.8);
    width: 90%;
    width: calc(100% - 12px);
    z-index: 1;
	height: 53px;
}

.header .btn-icono {
    border: medium none;
    color: #5f5c3b;
    font-family: 'fira_sansregular',Arial,Helvetica,sans-serif;
    font-size: 1.2em;
    font-weight: normal;
    height: 44px;
    line-height: 43px;
    margin: 0;
    overflow: hidden;
    padding-left: 50px;
    position: relative;
}

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

.header .btn-inicio::before {
    background-position: -90px -135px;
	border-radius:50px;
	border: 2px solid #fff;
}

.header .btn-instruccion::before {
    background-color: #fbb03b;
    background-position: -90px -90px;
	border-radius:50px;
	border: 2px solid #fff;
}

.header .btn-bienvenidos::before {
    content: "\2600";
    background: #d93240;
}

.header .btn-creditos::before {
    background-position: -136px -91px;
	background-color:#bcb090;
	border: 1px solid #fff;
}


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

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

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

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

.content{
	position: relative;
}

.pantalla{
	padding-top: 56px;
	opacity: 1;
	-webkit-transition: all 0.25s;
	-ms-transition: all 0.25s;
	transition: all 0.25s;
	-webkit-transition-delay: 0s;
	-ms-transition-delay: 0s;
	transition-delay: 0s;
    min-height: 623px;
}

.pantalla.e-oculto{
	opacity: 0;
	display: block;
	pointer-events: none;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	width: 100%;
}

.oacontext,
.oacontext[data-onphase="centro"],
.oacontext[data-onphase="portada"]{
	background-position: -562px -1419px;
}

.oacontext[data-onphase="sur"]{
	background-position: -562px -2500px;
}

.oacontext[data-onphase="norte"]{
	background-position: -562px 500px;	
}

.oacontext[data-onphase="este"]{
	background-position: -1800px -1419px;	
}

.oacontext[data-onphase="oeste"]{
	background-position: 1200px -1419px;	
}

/***ESTILOS CENTRO***/

.centro .brjl{
    background: rgba(255, 255, 255, 0.8) url("../img/centromenu.png") no-repeat scroll center;
    border: solid 18px rgba(47, 202, 237, 0.8);
    border-radius: 50%;
	position: absolute;
    top:25%;
    left: 0;
    right: 0;
    width: 270px;
    height: 270px;
    margin: auto;
}

.arrow{
    font-family: 'fira_sansbold',Arial,Helvetica,sans-serif;
    font-style: italic;
	border: 2px solid #fff;
    border-radius: 13px;
    cursor: pointer;
    font-size: 22px;
    line-height: 1.1em;
    padding: 4px 0;
    position: relative;
    text-align: center;
    width: 151px;
    color:#fff;
}

.arrow.norte {
    background-color: #3ba39e;
    position: relative;
    left: 64px;
     top: 16px;
    width: 120px;
}
.arrow.norte::before{
    background: url("../img/manual.png") no-repeat scroll center center;
    content: "";
    display: block;
    height: 82px;
    left: 2px;
    position: absolute;
    top: -68px;
    width: 100px;
}
.arrow.sur {
    background-color: #b75cb7;
    position: relative;
    left: 63px;
    top: 33px;
}
.arrow.sur::before{
    background: url("../img/historia.png") no-repeat scroll center center;
    content: "";
    display: block;
    height: 95px;
    left: 35px;
    position: absolute;
    top: 48px;
    width: 110px;
}
.arrow.este {
    background-color: #355ab7;
    left: 194px;
    position: relative;
    top: -13px;
    width: 124px;
}
.arrow.este::before{
    position: absolute;
    background: url("../img/actividades.png") no-repeat scroll center center;
    content:"";
    display: block;
    width: 92px;
    height: 75px;
    top: -63px;
    left: 18px;
}

.arrow.oeste {
   background-color: #e5572c;
   position: relative;
    left: -44px;
    padding-right: 15px;
    text-align: right;
    top: 46px;
    width: 105px;
}
.arrow.oeste::before{
    background: url("../img/sabiasque.png") no-repeat scroll center center;
    content: "";
    display: block;
    height: 75px;
    left: -26px;
    position: absolute;
    top: -12px;
    width: 75px;
}

/***ESTILOS SUR***/
.sur.pantalla, .este.pantalla {
	background:rgba(100,232,232,0.7);	
}
.oeste.pantalla {
	background:rgba(199,217,201,0.7);	
}

.sur .notas, .oeste .notas{
	position: relative;
}

.sur .notas .nota, .oeste .notas .nota,
.vntn-manual, .actividad, .este .actividad{
	display: block;
	position: relative;
	opacity: 1;
	-webkit-transition: opacity 0.5s;
	-ms-transition: opacity 0.5s;
	transition: opacity 0.5s;
	background: rgba(255, 255, 255, 0.5);
	border: #46aaaa solid 2px;
    min-height: 500px;
}

.sur .notas .nota.e-oculto, .oeste .notas .nota.e-oculto{
	opacity: 0;
	display: block;
    position: absolute;
    overflow: hidden;
    height: 0;
    width:0;
}
.sur h1 {
}

.sur .nota[data-param="2"] img.flip{
	-webkit-transform: rotateZ(180deg);
	-ms-transform: rotateZ(180deg);
	transform: rotateZ(180deg);
}


/***ESTILOS NORTE***/
.norte h1{
    background-color: #3ba39e;
}
.norte hr{
    border-color: #a3e8e6;
}
.norte .decotitulo::before {
    background:url("../img/manual_ico.png") no-repeat scroll center center;
}

.norte.pantalla, .este.pantalla {
	background:rgba(199,217,201,0.7);
	
}
.norte .descrp{
    display: inline-block;
}

.norte .descrp .imagend{
	width:40%;
	float:right;
	max-width:304px;
	margin:0 5%;
}
.norte .descrp .imagend img{
	width:100%;	
}

.norte .imgs {
    display: inline-block;
    width: 45%;
}

.norte .btn-tab-container {
    margin: 0 auto 0 12px;
    padding: 0;
    text-align: left;
    width: auto;
    height: 52px;
}

.norte .btn.selec--btn-map{
	display: inline-block;
    margin-left: 2px;
}

.norte .btn.selec--btn-map.e-activo{
	background: #DD624A;
}
.selec--btn-map{
    font-size: 16px;
}

.norte .elmnts{
	background-color: #ede2cc;
    border: 2px solid #fff;
    color: #837961;
    font-size: 18px;
    transition: all 0.3s ease 0s;
	-webkit-transition: all 0.3s;
	-mstransition: all 0.3s;
	transition: all 0.3s;
}

.norte .elmnts.e-activo{
	background-color: #46aaaa;
    border: medium none;
    color: #fff;
    font-size: 18px;
    margin-left: 6px;
    width: auto;
}
.btn.elmnts.js-tab-manual.e-activo.btnraya::after {
    border-left: 3px solid #46aaaa;
    content: "";
    font-size: 5px;
    left: -66px;
    position: relative;
    top: 24px;
}
.btnrayaup{
    background: #ede2cc;
    color: #837961;
}
.btnrayaup.e-activo{
    color: #fff;
}
.norte .btn.selec--btn-map.e-activo.btnrayaup::after {
    border-left: 3px solid #dd624a;
    content: "";
    font-size: 6px;
    left: -27px;
    position: relative;
    top: -33px;
}

.norte .col.der {
    margin-top: -80px;
}

/*Mpas tamaños*/


/*MAPA TOPOGRÁFICO*/

.norte .mapas-mundo .frntrInt{
	background: url('../img/capas/act1fronterasinternacional.png') no-repeat;
	background-size: contain;
	z-index: 8;

}

.norte .mapas-mundo .cmns{
	background: url('../img/capas/act1caminos.png') no-repeat;
	background-size: contain;
	z-index: 9;
}

.norte .mapas-mundo .nmbrsCdds{
	background: url('../img/capas/act1nombresciudades.png') no-repeat;
	background-size: contain;
	z-index: 6;
}

.norte .mapas-mundo .riosLagos{
	background: url('../img/capas/act1riosylagos.png') no-repeat;
	background-size: contain;
	z-index: 6;
}

.norte .mapas-mundo .frntrNcnl{
	background: url('../img/capas/act1fronterasinternas.png') no-repeat;
	background-size: contain;
	z-index: 7;	
}

.norte .mapas-mundo .base{
	background: url('../img/capas/act1base.jpg') no-repeat;
	background-size: contain;
	z-index: 5;
}

/*MAPA MIGRACIÓN*/

.mapas-mundo .migra-1{
	background: url('../img/capas/flecha1migracion.png') no-repeat;
	z-index: 8;

}

.mapas-mundo .migra-2{
	background: url('../img/capas/flecha2migracion.png') no-repeat;
	z-index: 9;
}

.mapas-mundo .migra-3{
	background: url('../img/capas/flecha3migracion.png') no-repeat;
	z-index: 6;
}

.mapas-mundo .migra-4{
	background: url('../img/capas/flecha4migracion.png') no-repeat;
	z-index: 5;
}

.mapas-mundo .migraBase{
	background: url('../img/capas/mapa_migra.jpg') no-repeat;
	z-index: 4;
}

.migra-1.js-capa.capa span,
.migra-2.js-capa.capa span,
.migra-3.js-capa.capa span,
.migra-4.js-capa.capa span {
    margin-right: 13px;
}


.migra-1 .checkbox + label::before {
    border: 3px solid #e7224b;
}
.migra-2 .checkbox + label::before {
    border: 3px solid #fc3862;
}
.migra-3 .checkbox + label::before {
    border: 3px solid #f85275;
}
.migra-4 .checkbox + label::before {
    border: 3px solid #ff708e;
}
/**ESTILOS PARA ClimaS**/
.js-wthr.cli.btn.desertico.encendido {
    background: #e3aa20;
    color: #fff;
}
.js-wthr.cli.btn.tropical.encendido {
    background: #e13c2c;
    color: #fff;
}
.js-wthr.cli.btn.templado.encendido {
    background: #41840f;
    color: #fff;
}

.js-wthr.cli.btn.todos.encendido {
    background: #46aaaa;
    color: #fff;
}

.div-mpTyps {
    height: 500px;
}

/**ESTILOS PARA LOS TOOLTIPS**/

.norte .div-elemnts{
	border-top: 2px solid #3ba39e;
    margin: 14px 0 0;
    position: relative;
}

.norte .hint{
	width: 100px;
	height: 44px;
	text-align: center;
	border: 5px solid #359faa;
	border-radius: 11px;
	margin-bottom: 5px;
	cursor: pointer;
    position: absolute;
    text-indent: -3000px;
}

.imagenh.mCS_img_loaded {
    max-width: 100%;
    vertical-align: middle;
}
.hint[data-param="titulo"] {
    height: 13.72%;
    right: 0.5%;
    top: 1.2%;
    width: 19.5%;
}
.hint[data-param="leyenda"] {
    bottom: -2px;
    height: 25.5%;
    left: 0.3%;
    text-indent: -1500px;
    width: 32.5%;
}
.hint[data-param="eGrafica"] {
    height: 9%;
    right: 3.5%;
    top: 23%;
    width: 22.5%;
}
.hint[data-param="fuente"] {
    height: 6.2%;
    left: 36.7%;
    bottom: 3%;
    width: 12.2%;
}


.norte .hint.unchecked{
	-webkit-animation: blink 5s infinite;
	-ms-animation: blink 5s infinite;
	animation: blink 5s infinite;
}

@-webkit-keyframes blink{
	0% { border-color: #359faa; }
	25% { border-color: #dbf9fc; }
	50% { border-color: #359faa; }
	75% { border-color: #dbf9fc; }
	100% { border-color: #359faa; }
}

@-ms-keyframes blink{
	0% { border-color: #359faa; }
	25% { border-color: #dbf9fc; }
	50% { border-color: #359faa; }
	75% { border-color: #dbf9fc; }
	100% { border-color: #359faa; }
}

@keyframes blink{
	0% { border-color: #359faa; }
	25% { border-color: #dbf9fc; }
	50% { border-color: #359faa; }
	75% { border-color: #dbf9fc; }
	100% { border-color: #359faa; }
}

.tltipWndws .tltip{
	position: absolute;
	background-color: #e5572c;
    border: 2px solid;
    border-radius: 5px;
    color: #fff;
    height: auto;
    padding: 7px 30px;
    /*position: relative;*/
    width: 300px;
	-webkit-transform: scale(1,1);
	-ms-transform: scale(1,1);
	transform: scale(1,1);
	-webkit-transition: all 0.5s;
	-ms-transition: all 0.5s;
	transition: all 0.5s;
}

.tltipWndws .tltip[data-param="titulo"]{
	top: 10%;
    left: 30%;
}

.tltipWndws .tltip[data-param="leyenda"]{
	top: 50%;
	left: 20%;
}

.tltipWndws .tltip[data-param="eGrafica"]{
	top: 30%;
	left: 30%;
}

.tltipWndws .tltip[data-param="fuente"]{
	top: 55%;
	left: 40%;
}

.js-vntn.tltip > h3 {
    margin-top: 11px;
    padding: 0 16px;
}
.js-vntn.tltip > p {
    padding-left: 16px;
}
.tltipWndws .tltip .vntn--btn-cerrar{
    border: 2px solid;
    background-color: #e5572c;
}

.tltipWndws .tltip.e-oculto{
	opacity: 0;
	-webkit-transform: scale(0,0);
	-ms-transform: scale(0,0);
	transform: scale(0,0);
}

/***ESTILOS PARA LAS ACTIVIDADES NORTE (MANUAL)***/

.norte .next-act.e-oculto{
	display: none;
}
.norte .titulo{
    color: #dd624a;
    text-align: right;
    margin-right: 50px;
}

.mapaElem{
    border: 5px solid #837961;
    height: auto;
    margin: 10px auto 15px auto;

    position: relative;
    width: 50%;
}

.actividad {
    background: transparent;
    border: none;
    display: block;
    opacity: 1;
}

/*.norte .div-mapaPob-svg{
	background: url("../img/pattern.png"); repeat scroll 0 0;
    height: 557px;
    position: relative;
    width: 820px;
     border: 5px solid #837961;
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
}*/

.norte .mapaPob{
	position: relative;
    height: 405px;
}

.norte .mapaPob .capa{
	top: 0;
	left: 0;
	background-size: contain;
	background-repeat: no-repeat;
    min-width: 550px;
    height: 370px;
    z-index: 2;
    border:5px solid #837961;
    position: absolute;
}

.norte .slider{
    width: 113px;
}

.norte .mapaPob .capa.ligera{
	background-image: url('../img/capas/poblacionbaja.png');
}

.norte .mapaPob .capa.media{
	background-image: url('../img/capas/poblacionmedia.png');
}

.norte .mapaPob .capa.densa{
	background-image: url('../img/capas/poblacionalta.png');
}

.norte .mapaPob .capa.base{
	background-image: url('../img/capas/mapaact2.jpg');
	z-index: 1;
}

.norte .mapa-climas{
	position: relative;
	width: 100%;
	height: 500px;
}

.norte .mapa-climas .capa{
	position: absolute;
	top: 0;
	left: 0;
	background-size: contain;
	background-repeat: no-repeat;
    min-width: 550px;
    height: 370px;
    z-index: 2;
    border:5px solid #837961;
}

.js-icono.icono {
    margin: -10px 3px 0 auto;
    text-align: center;
}
.norte .mapa-climas .capa.arido{
	background-image: url('../img/capas/clima1.png');
}

.norte .mapa-climas .capa.calido{
	background-image: url('../img/capas/clima3.png');
}

.norte .mapa-climas .capa.templado{
	background-image: url('../img/capas/clima2.png');
}

.norte .mapa-climas .capa.base{
	background-image: url('../img/capas/mapaact2.jpg');
	z-index: 1;
}

.norte .mapa-svg{
	display: inline-block;
	height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    pointer-events: none;
}

.norte .mapa-svg .land{
	pointer-events: auto;
	cursor: pointer;
	fill-opacity: 1;
	stroke:white;
	stroke-opacity: 1;
	stroke-width:0.5;
}

.norte .act-iconos{
	display: inline-block;
    width: 30%;
    text-align: right;
    position: relative;
    right: -300px;
}

.norte .act-iconos .icono{
	width: 100px;
	display: block;
	margin: 5px;
}

.norte .icono.e-oculto{
	display: none;
}

.norte .icono .pob, .norte .icono .cli{
	background: #ede2cc ;
    color: #837961;
    display: inline-block;
    line-height: 1.2em;
    margin-top: 0;
    vertical-align: middle;
    width: 155px;
    text-align: right;
}

.js-selec-map.selec-map {
    border-top: 2px solid #3ba39e;
    display: inline-block;
    margin: 14px 0 0;
    padding: 0 3px 2px;
    width: 100%;
}
.js-pandc.pob.btn.ligera {
    background: #ede2cc url("../img/pocapoblacion.png") no-repeat scroll 3px center;
    padding-left: 22px;
}
.js-pandc.pob.btn.ligera.encendido {
    background: #e8f06c url("../img/pocapoblacion.png") no-repeat scroll 3px center;
    color: #8b8e14;
    padding-left: 22px;
}
.js-pandc.pob.btn.media {
    background: #ede2cc url("../img/medianapoblacion.png") no-repeat scroll 3px center;
    padding-left: 22px;
}

.js-pandc.pob.btn.media.encendido {
    background: #fce603 url("../img/medianapoblacion.png") no-repeat scroll 3px center;
    color: #89680a;
    padding-left: 22px;
}
.js-pandc.pob.btn.densa {
    background: #ede2cc url("../img/muchapoblacion.png") no-repeat scroll 3px center;
    padding-left: 22px;
}
.js-pandc.pob.btn.densa.encendido {
    background: #f2a457 url("../img/muchapoblacion.png") no-repeat scroll 3px center;
    color: #c25711;
    padding-left: 22px;
}
.js-pandc.pob.btn.todo.encendido {
    background: #3ba39e ;
    color: #fff;
}
/***ESTILOS PARA LAS ACTIVIDADES ESTE***/
.este h1{
    background-color: #355ab7;
}
.este hr{
    border-color: #85accc;
}
.este .decotitulo::before {
    background:url("../img/actividades_ico.png") no-repeat scroll center center;
    width: 58px;
}

.este .col.izq{
    width: 65%;
}

.este .col.der {
    width: 13%;
}
/*LONGITUD BARRA*/
.slider{
	display: inline-block;
	width: 150px;
	height: 20px;
}

.slider.e-oculto{
    display: none;
}

.ui-slider-horizontal .ui-slider-range-min {
    left: 0;
}
.ui-slider-horizontal .ui-slider-range {
    top: 0;
    height: 100%;
}
.ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    font-size: .7em;
    display: block;
    border: 2px solid #194c4b;
    background-position: 0 0;
    background: rgba(206,245,243,1);
    background: -moz-linear-gradient(left, rgba(206,245,243,1) 0%, rgba(59,163,158,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(206,245,243,1)), color-stop(100%, rgba(59,163,158,1)));
    background: -webkit-linear-gradient(left, rgba(206,245,243,1) 0%, rgba(59,163,158,1) 100%);
    background: -o-linear-gradient(left, rgba(206,245,243,1) 0%, rgba(59,163,158,1) 100%);
    background: -ms-linear-gradient(left, rgba(206,245,243,1) 0%, rgba(59,163,158,1) 100%);
    background: linear-gradient(to right, rgba(206,245,243,1) 0%, rgba(59,163,158,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cef5f3', endColorstr='#3ba39e', GradientType=1 );

}
.checkbox{
    display: none;
}
label {
    display: block;
    width: 250px;
}

.checkbox:checked + label::before {
    background: url("../img/ojoabierto.png") no-repeat scroll center center #fff;
}
.checkbox + label::before {
    background: #fff url("../img/ojocerrado.png") no-repeat scroll center center;
    border: 3px solid #46aaaa;
    border-radius: 5px;
    content: "";
    display: inline-block;
    float: left;
    height: 40px;
    margin: 3px 7px 1px 0;
    width: 40px;
}
.checkbox:checked + label {
    display: block;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    border-bottom-right-radius: 4px;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
    border-bottom-left-radius: 4px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
    border-top-right-radius: 4px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
    border-top-left-radius: 4px;
}
.ui-widget-header {
    border: 1px solid #aaaaaa;
    background: #cccccc 50% 50% repeat-x;
    color: #222222;
    font-weight: bold;
}

.ui-slider .ui-slider-handle {
    background: #29a8a5 ;
    cursor: default;
    height: 1.2em;
    position: absolute;
    width: 1.2em;
    z-index: 2;
    -ms-touch-action: none;
    touch-action: none;
    border: 2px solid #194c4b;
}

.ui-widget-content {
    border: 1px solid #aaaaaa;
    background: #ffffff 50% 50% repeat-x;
    color: #222222;
}
.ui-widget {
    font-family: Verdana,Arial,sans-serif;
    font-size: 1.1em;
}
.ui-slider {
    position: relative;
    text-align: left;
    margin-left: 7px;
}

.este .mapas-mundo {
    width: 700px;
}

.mapas-mundo .draggable-map{
    height: 372px;
	position: relative;
	-webkit-transform: scale(1,1);
	-ms-transform: scale(1,1);
	transform: scale(1,1);
	-webkit-transition: transform 1s;
	-ms-transition: transform 1s;
	transition: transform 1s;
	-webkit-touch-action: none;
	-ms-touch-action: none;
	touch-action: none;
}

.norte .mapas-mundo .draggable-map{
    width: 550px;
}

.mapa-curvas .draggable-map{
    height: 346px;
}

.norte .capa-cmns .checkbox + label::before {
    border: 3px solid #eae4e7;
}

.capa-frntrInt .checkbox + label::before {
    border: 3px solid #e64096;
}
.capa-frntrNcnl .checkbox + label::before {
    border: 3px solid #f5ed05;
}

.mapas-mundo .draggable-map.zoomIn{
	-webkit-transform: scale(3,3);
	-ms-transform: scale(3,3);
	transform: scale(3,3);
}

.mapas-mundo .imagen{
	position: absolute;
    background-size: contain;
	top: 0;
	left: 0;
    width: 93.5%;
	height: 100%;
    border: 5px solid #837961;
}
.este .titulo {
    color: #355ab7;
}

.este .leyendas{
    bottom: -3px;
    height: 100px;
    position: absolute;
    right: 115px;
    width: 357px;
    z-index: 10;
}

.este .leyendas .leyenda{
    width: 100%;
    height: 100%;
}

.este .leyendas .leyenda[data-param="cmns"]{
    background: url('../img/capas/leyenda_caminos.png') no-repeat;
}

.este .leyendas .leyenda[data-param="wrldRlgn"]{
    background: url('../img/capas/leyenda_religiones.png') no-repeat;
}

.este .leyendas .leyenda[data-param="wrldFrntrs"]{
    display: none;
}

.este .leyendas .leyenda[data-param="wrldWthr"]{
    background: url('../img/capas/leyenda_clima.png') no-repeat;
}

.este .leyendas .leyenda[data-param="ppltnDnsty"]{
    background: url('../img/capas/leyenda_poblacion.png') no-repeat;
}

.este .mapas-mundo .draggable-map {
    height: 360px;
    margin-top: 10px;
    width: 93%;
}

.este .mapas-mundo .wrldRlgn{
	background: url('../img/capas/religiones_int.png') no-repeat;
	background-size: contain;
	z-index: 5;

}

.este .mapas-mundo .cmns{
	background: url('../img/capas/caminos_int.png') no-repeat;
	background-size: contain;
	z-index: 7;
}

.este .mapas-mundo .wrldWthr{
	background: url('../img/capas/climas_int.png') no-repeat;
	background-size: contain;
	z-index: 4;
}

.este .mapas-mundo .ppltnDnsty{
	background: url('../img/capas/densidad_poblacion_int.png') no-repeat;
	background-size: contain;
	z-index: 6;
}

.este .mapas-mundo .wrldFrntrs{
	background: url('../img/capas/paises_int.png') no-repeat;
	background-size: contain;
	z-index: 8;	
}

.este .mapas-mundo .base{
	background: url('../img/capas/capa_base_int.jpg') no-repeat;
	background-size: contain;
	z-index: 3;
}

.iconos-capas {
    margin: -8px 0 5px -7px;
    padding: 2px;
    width: 500px;
}
.norte .iconos-capas .capa{
    padding: 2px;
    width: 187px;
    margin: 0 2px 3px 0;
    position: relative;
    -webkit-touch-action: none;
    -ms-touch-action: none;
    touch-action: none;
    display: inline-block;
}

.mapa-flujo .iconos-capas .capa {
    width: 126px;
}

.mapa-flujo .iconos-capas {
    width: 393px;
    margin-left: 6%;
}

/* --------------------------
 *  Oeste
 * ------------------------- */

.oeste hr {
    border-color: #eab488;
}
.oeste h1 {
    background-color: #e5572c;
}
.oeste .decotitulo::before {
    background:url("../img/sabiasque_ico.png") no-repeat scroll center center;
}
.oeste .btn.next.js-next-slide::before,

.oeste .btn.last.js-last-slide::before  {
    background-color: #e5572c;
}
.oeste.pantalla{
    background-color: rgba(100, 232, 232, 0.7);
}
.oeste .titulo{
    color:#e5572c;
}
.oeste p{
    text-align: justify;
}

/* --------------------------
 *  Ventanas
 * ------------------------- */

.vntn {
    background-color: #cce055;
    border: 5px solid #fff;
    color: #000;
    top: 120px;
    transition: all 300ms ease 0s;
    width: 51%;
	box-shadow:
	-webkit-box-shadow: 6px 8px 7px -1px rgba(143,143,143,1);
	-moz-box-shadow: 6px 8px 7px -1px rgba(143,143,143,1);
	box-shadow: 6px 8px 7px -1px rgba(143,143,143,1);
}

.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{
    background: #ffc;
    border: 10px solid #fbb03b;
    color: #8d5307;
    line-height: 1.5em;
    top: 190px;
}

.vntn-instruccion .vntn--btn-cerrar{
    background:#bcb090;
    text-align: center;
}

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

.titulo.instrucciones{
    text-align: center;
}

/* --------------------------
 *  Portada
 * ------------------------- */

.portada--intro .titulo,
.titulo.conclusion{
	background: #46aaaa;
    color: #fff;
    font-family: "fira_sansbold",Arial,Helvetica,sans-serif;
    font-size: 28px;
    margin-left: -20px;
    margin-top: auto;
    padding: 0 20px 8px;
    text-align: center;
    width: 100%;	
}
.portada--intro hr,
.vntn-conclusion hr {
	border-color: #6ad8d5;
    border-style: none none dashed;
    border-width: medium medium 2px;
    height: 5px;
    margin-left: -21px;
    margin-right: -19px;
    margin-top: -37px;
}

.portada--intro .txt{
    margin: 37px 0;	
}

.portada .btn-entrar {
	box-shadow:
	-webkit-box-shadow: 3px 6px 6px -1px rgba(143,143,143,1);
	-moz-box-shadow: 3px 6px 6px -1px rgba(143,143,143,1);
	box-shadow: 3px 6px 6px -1px rgba(143,143,143,1);	
}


/* --------------------------
 *  Sur
 * ------------------------- */
.sur .decotitulo::before {
    background:url("../img/historia_ico.png") no-repeat scroll center center;
}
.nota{
	padding-top: 10px;
    text-align: center;
}


.nota .imagenh{
	max-width: 90%;
    cursor: pointer;
}
.sur .titulo{
    color:#a050a0;
}

.nota .col .btns{
	margin-bottom: 5px;
    text-align: center;
}

.nota .col .btn.next{
    display: inline-block;
    margin: 5px;
    position: relative;
    text-align: left;
    width: 125px;
}
.nota .col .btn.last{
    display: inline-block;
    margin: 5px;
    text-align: right;
    width: 125px;
    position: relative;
}

/* --------------------------
 *  Breakpoints 
 * ------------------------- */

@media screen and (max-width: 1132px) {
}

/* estilos palican width < 910px (iPad, Android portrait)*/


@media screen and (max-width: 910px) {

/* --------------------------
 * Generales
 * ------------------------- */

    .iconos-capas {
    width: 100%;
    }
    .mapaElem{
        width: 70%;
    }
    .div-mpTyps {
        height: 100%;
}
    .iconos-capas .capa {
    display: inline-block;
    margin: -11px;
    padding: 2px;
    position: relative;
    width: 256px;
    }
    .mapa-flujo .iconos-capas {
    width: 100%;
}
    .col.der {
    margin-left: 20px;
    margin-right: 20px;
    min-width: 700px;
    width: 85%;
    }
    .col.izq {;
    min-height: 350px;
    width: auto;
    }

    .col-cntnr {
    min-height: 231px;
    }

    .pantalla {
    min-height: 850px;
    }
    .sur .notas .nota, .oeste .notas .nota, .vntn-manual, .actividad, .este .actividad {
    min-height: 600px;
    }
    .nota .imagenv {
    max-width: 70%;
    }
    .sur .nota[data-param="2"] .izq{
        width: 53%;
    }
    .sur .nota[data-param="2"] .der{
        width: 40%;
    }
    .contenedorimagen.imgvert {
    margin: auto auto 5px;
    max-width: 380px;
    }

/* Norte */
    .norte .icono .pob, .norte .icono .cli{
    margin-top: 5px;
    }
    .norte .map-pob .col.der {
    margin-top: -34px;
    }

    .norte .mapa-cli .col.der{
    margin-top: -133px;
    }

    .norte .mapa-flujo .col.der{
    margin-top: -60px;
    }

    .norte .mapa-curvas .col.der{
    margin-top: -89px;
    }

    .norte .titulo{
    text-align: left;
    margin-left: 10px;
    }

    .norte .actividad .col{
    display: block;
    }

 /* Sur */

 /* Este */
    .este .iconos-capas .capa{
        display: inline-block;
        width: 45%;
        margin: 5px;
        padding: 2px;
    }

    .este .col.izq{
        display: block;
        margin: auto;
        width: 700px;
    }

    .este .col.der {
        display: block;
        margin: auto;
        min-width: 320px;
        margin-top: -50px;
        width: 90%;
    }
    .mapas-mundo{
        height: 430px;
    }

/* Oeste */
    .btn.btn-conclusion {
    background: #355ab7 none repeat scroll 0 0;
    font-size: 23px;
    margin: 24px auto;
    padding: 3px 11px;
    }
    .vntn-conclusion {
    width: 85%;
    }


	/* --------------------------------
	 * Incluir aqui los estilos
	 * a los elementos que cambiaran. 
	 * -------------------------------- */

}