@charset "utf-8";
@font-face {
	font-family: 'frutiger_light';
	src: url('../fonts/frutiger_light.eot');
	src: url('../fonts/frutiger_light.eot?#iefix') format('embedded-opentype'),  url('../fonts/frutiger_light.woff') format('woff'),  url('../fonts/frutiger_light.ttf') format('truetype'),  url('../fonts/frutiger_light.svg#Sri-TSCRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'frutiger_reg';
	src: url('../fonts/frutiger_roman.eot');
	src: url('../fonts/frutiger_roman.eot?#iefix') format('embedded-opentype'),  url('../fonts/frutiger_roman.woff') format('woff'),  url('../fonts/frutiger_roman.ttf') format('truetype'),  url('../fonts/frutiger_roman.svg#Sri-TSCRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'frutiger_bold';
	src: url('../fonts/frutiger_bold.eot');
	src: url('../fonts/frutiger_bold.eot?#iefix') format('embedded-opentype'),  url('../fonts/frutiger_bold.woff') format('woff'),  url('../fonts/frutiger_bold.ttf') format('truetype'),  url('../fonts/frutiger_bold.svg#Sri-TSCRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}
html, body{
	min-width:600px;
	font-size:15px;
}
html {
	position: relative;
	min-height: 100%;
}
body {
	/* Margin bottom igual a la altura del footer */
	margin-bottom: 100px;
	font-family: 'frutiger_light';
	background: url(../images/background.png) bottom center no-repeat;
	background-size: 100%;
	background-color: #76BBD6;
}
b, h1, h2, h3 {
	font-family: 'frutiger_bold';
	color:#00608b;
}
ul{
	list-style-image:url(../images/punto-lista.png);
}
ul li{
	margin-bottom:8px;
}
.container{
	position:relative;
}
/* Globo de texto 
-------------------------------------------------- */
.globo {
	margin: 0px 0px 20px -30px;
	padding: 20px;
	width: -moz-calc(100% + 30px);
	width: calc(100% + 30px);
	background: transparent;
	position: relative;
	z-index:1;
}
.personaje {
	width: 130px;
	height: 130px;
	background: url(../images/ciudadano2.png) no-repeat center;
	background-size: 90%;
	border-radius: 50%;
	float: left;
	margin-right: 20px;
	margin-bottom: 10px;
	margin-top: -10px;
}
.ciudadano {
	width: 130px;
	height: 130px;
	background: url(../images/ciudadano.png) no-repeat center;
	background-size: contain;
	border-radius: 50%;
	float: left;
	margin-right: 20px;
	margin-bottom: 10px;
	margin-top: -10px;
}
.logos{
	position:absolute;
	width:380px;
	right:0;
	top:0;
	height:130px;
	display:block;
	background:#FFF;
}
.logos:before{
	content:'';
	position:absolute;
	right:0;
	top:130px;
	border-right:solid 380px #FFF;
	border-bottom:solid 10px transparent;
}
.logo-tic{
	float:right;
	width:240px;
	height:130px;
	background:url(../images/logo_tic.svg) no-repeat center;
	background-size:80%;
}
.logo-transmilenio{
	float:right;
	width:180px;
	height:180px;
	background:url(../images/logo_transmilenio.svg) no-repeat center;
	background-size:50%;
}
.logo-sitp{
	float:right;
	width:140px;
	height:130px;
	background:url(../images/logo_sitp.svg) no-repeat center;
	background-size:100%;
}
/* Contenido 
-------------------------------------------------- */
.sonido{
	position:absolute;
	right:-10px;
	top:35px;
	width:60px;
	height:60px;
	display:block;
	border-bottom:solid 2px #330;
	border-radius:50%;
	background:url(../images/sonido1.png) no-repeat center #b9c939;
	background-size:100%;
	z-index:100;
	transition:all .3s;
}
.sonido:hover{
	background:url(../images/sonido1.png) no-repeat center #337ab7;
	background-size:100%;
}
.sonido:active{
	background:url(../images/sonido1.png) no-repeat center #337ab7;
	background-size:100%;
	border-bottom:solid 0px #330;
}
.position-sonido{
	top:145px;
}
.sonido2{
	position:absolute;
	right:20px;
	top:0px;
	width:60px;
	height:60px;
	display:block;
	border-bottom:solid 2px #330;
	border-radius:50%;
	background:url(../images/sonido1.png) no-repeat center #b9c939;
	background-size:100%;
	transition:all .3s;
}
.sonido2:hover{
	background:url(../images/sonido1.png) no-repeat center #337ab7;
	background-size:100%;
}
.sonido2:active{
	background:url(../images/sonido1.png) no-repeat center #337ab7;
	background-size:100%;
	border-bottom:solid 0px #330;
}
.faq{
	width:600px;
	height:auto;
	padding:10px;
	margin:auto;
	display:none;
}
.faq hr, .creditos hr{
	border-color:#00608B;
}
.creditos{
	width:600px;
	height:auto;
	padding:10px;
	margin:auto;
	display:none;
}
.creditos p{
	margin-bottom:2px;
}
.glosario{
	width:600px;
	height:auto;
	padding:10px;
	margin:auto;
	display:none;
}
.glosario p{
	margin-bottom:2px;
}
.fin-modulo{
	margin-top:120px;
	width: -moz-calc(100% + 45px);
	width: calc(100% + 45px);
	height: auto;
	margin-left: -45px;
	padding: 20px 30px 20px 40px;
	position:relative;
	display:block;
}
.fin-modulo .personaje{
	background:url(../images/ciudadano3.png) no-repeat center;
	background-size:contain;
	position:absolute;
	top:200px;
	left:40px;
	margin-top:-150px;
	width:300px;
	height:300px;
	z-index:10;
}
.fin-modulo .recuadro{
	text-align:center;
	width:615px;
	margin-left:170px;
	padding-left:70px;
	padding-top:70px;
	height:200px;
	background:#045b83;
	display:block;
	position:absolute;
	z-index:-1;
}
.fin-modulo .recuadro:before{
	content:'';
	position:absolute;
	width:100%;
	left:0;
	bottom:-40px;
	border-left:615px solid transparent;
	border-top: solid 40px #045b83;
}
.fin-modulo .recuadro.final{
	height:250px;
}
.fin-modulo .recuadro2{
	text-align:center;
	width:625px;
	margin-left:165px;
	margin-top:-5px;
	height:210px;
	background:#DDD;
	display:block;
	position:absolute;
	z-index:-10;
}
.fin-modulo .recuadro2.final{
	height:260px;
}
.fin-modulo .recuadro2:before{
	content:'';
	position:absolute;
	width:100%;
	left:0;
	bottom:-40px;
	border-left:625px solid transparent;
	border-top: solid 40px #DDD;
}
.fin-modulo h1,.fin-modulo p{
	margin:0;
	color:#FFF;
	text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.4);
}
.fin-modulo p{
	font-size:2em;
}
.fin-modulo h1{
	font-size:2.8em;
	text-transform:uppercase;
}
.canvas-container{
	width:100%;
	height:600px;
	text-align:center;
}
.canvas-tarjetas{
	background-color:#FFFFFF;
	margin:auto;
	width:650px;
	display:block;
}
.tarjetas_cont{
	display:block;
}
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.tarjeta1{
	float:left;
	display:block;
	width:23%;
	height:145px;
	margin:0px 1%;
	background:url(../images/tarjeta1-repose.png) no-repeat top center;
	background-size:85%;
	cursor:pointer;
	transition:all 0.15s;
}
.tarjeta2{
	float:left;
	display:block;
	width:23%;
	height:145px;
	margin:0px 1%;
	background:url(../images/tarjeta2-repose.png) no-repeat top center;
	background-size:85%;
	cursor:pointer;
	transition:all 0.15s;
}
.tarjeta3{
	float:left;
	display:block;
	width:23%;
	height:145px;
	margin:0px 1%;
	background:url(../images/tarjeta3-repose.png) no-repeat top center;
	background-size:85%;
	cursor:pointer;
	transition:all 0.15s;
}
.tarjeta4{
	float:left;
	display:block;
	width:23%;
	height:145px;
	margin:0px 1%;
	background:url(../images/tarjeta3-repose.png) no-repeat top center;
	background-size:85%;
	cursor:pointer;
	transition:all 0.15s;
}
.tarjeta1:hover{
	background:url(../images/tarjeta1-hover.png) no-repeat top center;
	background-size:85%;
}
.tarjeta2:hover{
	background:url(../images/tarjeta2-hover.png) no-repeat top center;
	background-size:85%;
}
.tarjeta3:hover{
	background:url(../images/tarjeta3-hover.png) no-repeat top center;
	background-size:85%;
}
.tarjeta4:hover{
	background:url(../images/tarjeta4-hover.png) no-repeat top center;
	background-size:85%;
}
.tarjeta-azul{
	float:left;
	display:block;
	width:23%;
	height:145px;
	margin:0px 5%;
	background:url(../images/tarjeta-azul1.png) no-repeat top center;
	background-size:85%;
	cursor:pointer;
	transition:all 0.15s;
}
.tarjeta-azul:hover{
	background:url(../images/tarjeta-azul2.png) no-repeat top center;
	background-size:85%;
}
.tarjeta-roja{
	float:left;
	display:block;
	width:23%;
	height:145px;
	margin:0px 5%;
	background:url(../images/tarjeta-roja1.png) no-repeat top center;
	background-size:85%;
	cursor:pointer;
	transition:all 0.15s;
}
.tarjeta-roja:hover{
	background:url(../images/tarjeta-roja2.png) no-repeat top center;
	background-size:85%;
}
.tarjeta-verde{
	float:left;
	display:block;
	width:23%;
	height:145px;
	margin:0px 5%;
	background:url(../images/tarjeta-verde1.png) no-repeat top center;
	background-size:85%;
	cursor:pointer;
	transition:all 0.15s;
}
.tarjeta-verde:hover{
	background:url(../images/tarjeta-verde2.png) no-repeat top center;
	background-size:85%;
}
.contenido-tarjeta{
	position:absolute;
	top:250px;
	left:10%;
	width:80%;
	text-align:left;
	transition:all .32s;
	display:none;
}
.contenido-tarjeta h3{
	text-align:center;
	margin:0 0 30px;
}
.listas-tarjetas{
	text-align:left;
	display:none;
}
.listas-tarjetas img{
	float:left;
	width:250px;
	margin:10px;
}
.fancybox:hover img{
	border:solid 2px #0099CC;
}
a:hover img{
	border:solid 2px #0099CC;
}
.contenido {
	border: solid 4px #00608b;
	width: -moz-calc(100% + 45px);
	width: calc(100% + 45px);
	height: auto;
	margin-left: -45px;
	padding: 20px 30px 20px 40px;
	background: #FFF;
	position:relative;
}
.imagen{
	width:100%;
	margin:auto;
	text-align:center;
}
.imagen-half{
	width:50%;
	margin:auto;
	text-align:center;
	display:block;
	float:left;
}
.titulo {
	padding: 20px 30px;
	margin-left: -45px;
	width: -moz-calc(100% + 45px);
	width: calc(100% + 45px);
	background: #00608b;
	border-top-right-radius: 10px;
}
.titulo p, .titulo b{
	color:#FFF;
	margin-bottom:0;
}
.titulo p{
	padding-left:140px;
}
.titulo h1 {
	color: #FFF;
	font-size: 1.4em;
	margin: 0 auto 0;
	line-height: 30px;
	padding-left: 20px;
}
.index-color {
	text-align: center;
	margin-top: 160px;
	padding-top: 70px;
	padding-left: 100px;
	padding-right: 80px;
	background: #FFF;
	color: #00608b;
	border-right: solid 4px #00608b;
	border-left: solid 4px #00608b;
	border-bottom: solid 4px #00608b;
	border-top: solid 20px #00608b;
	position: relative;
}
.index-color:after {
	content: '';
	width: 100%;
	border-right: 915px solid transparent;
	border-bottom: 20px solid #00608b;
	position: absolute;
	top: -40px;
	left: -4px;
	display: block;
	z-index: -1;
}
.index-color .personaje {
	position: absolute;
	left: 50%;
	top: -150px;
	width: 200px;
	height: 200px;
	margin-left: -100px;
	margin-right: 0;
	margin-top: 0;
	margin-bottom: 0;
}
.index-color h1 {
	margin-top: 0;
	font-size: 4em;
	text-align: center;
	text-transform: uppercase;
}
.index-color h1.light {
	font-family: 'frutiger_light';
	font-size: 2em;
	text-align: center;
	text-transform: uppercase;
}
.index-color h2 {
	font-family: 'frutiger_light';
	font-size: 1.6em;
	text-align: center;
	line-height: 1.2em;
}
.index-color video {
	width: 80%;
	margin: auto;
	text-align: center;
}
.iframe-content{
	width:100%;
	height:850px;
}
.alerta{
	font-family:'frutiger_reg';
	width:90%;
	height:auto;
	margin:20px auto 0;
	background:#FFF;
	padding:10px 30px;
	border:#900 solid 4px;
	border-radius:10px;
	color:#333;
}
.alerta h2{
	text-align:center;
	color:#900;
}
.alerta b{
	color:#333;
}
.list-bus{
	padding:0;
}
li.label-bus{
	display:inline-block;
	list-style:none;
}
.label-bus{
	width:40%;
	height:50px;
	margin:10px 4%;
	background:#FFF;
	display:block;
	position:relative;
	-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.4);
	-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.4);
	box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.4);
}
.label-bus a{
	font-family:'frutiger_bold';
	line-height:50px;
	text-align:center;
	display:block;
}
.label-bus .bus1:after{
	content:'';
	width:50px;
	height:50px;
	position:absolute;
	left:0;
	top:0;
	background:url(../images/bus1.png) no-repeat left center;
	background-size:100%;
	display:block;
}
.label-bus .bus2:after{
	content:'';
	width:50px;
	height:50px;
	position:absolute;
	left:0;
	top:0;
	background:url(../images/bus2.png) no-repeat left center;
	background-size:100%;
	display:block;
}
.label-bus .bus3:after{
	content:'';
	width:50px;
	height:50px;
	position:absolute;
	left:0;
	top:0;
	background:url(../images/bus3.png) no-repeat left center;
	background-size:100%;
	display:block;
}
.label-bus .bus4:after{
	content:'';
	width:50px;
	height:50px;
	position:absolute;
	left:0;
	top:0;
	background:url(../images/bus4.png) no-repeat left center;
	background-size:100%;
	display:block;
}
.label-bus .bus5:after{
	content:'';
	width:50px;
	height:50px;
	position:absolute;
	left:0;
	top:0;
	background:url(../images/bus5.png) no-repeat left center;
	background-size:100%;
	display:block;
}
.bus-pop{
	width:800px;
	display: none;
	padding:0 30px 20px;
}
.bus-pop img{
	width:70%;
	margin:auto;
	text-align:center;
}
.señal-pop{
	width:800px;
	display:none;
	padding:0 30px 20px;
}
.mitad{
	width:100%;
	margin:auto;
	border:0;
}
.mitad td{
	width:50%;
	border:0;
}
.mitad td div{
	width:80%;
	margin:auto;
	padding:5%;
	border-radius:10px;
	background:#FFF;
	-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.4);
	-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.4);
	box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.4);
}
.mitad td div.imagen{
	width:100%;
	margin:auto;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
.mitad-responsive{
	display:none;
	width:100%;
	text-align:center;
}
.mitad-responsive div{
	text-align:left;
	width:80%;
	margin:0 auto;
	padding:5%;
	border-radius:10px;
	background:#FFF;
	-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.4);
	-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.4);
	box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.4);
	display:none;
}
.actividad1{
	width:100%;
	height:150px;
}
.actividad1 .drop{
	width:30%;
	margin:1.25%;
	float:left;
}
.actividad1 .drop .titular{
	font-family:'frutiger_bold';
	width:100%;
	background:#C5D82E;
	text-align:center;
	text-transform:uppercase;
	padding:20px 0;
	border-top-left-radius:8px;
	border-top-right-radius:8px;
}
.actividad1 .active .titular{
	background:#30CED6;
}
.drag1{
	width:100%;
	margin:1.25% auto;
	display:inline-block;
	background:#DDDDDD;
	text-align:center;
	padding:20px;
	cursor: pointer;
}
.invi{
	width:100%;
	height:20px;
	display:inline-block;
	background:transparent;
}
.actividad2{
	width:100%;
	height:650px;
	display:block;
}
.actividad3{
	width:100%;
	height:520px;
	display:block;
	text-align:center;
}
.actividad3 .content{
	width:837px;
	margin:auto;
}
.actividad3 .drags{
	text-align:center;
	width:150px;
	height:50px;
	display: inline-block;
	background:#3CA6BC;
	color:#FFF;
	line-height:50px;
	margin:5px;
	cursor:pointer;
	border-radius:5px;
}
.actividad3 .drop1, .actividad3 .drop2, .actividad3 .drop3, .actividad3 .drop4, .actividad3 .drop5{
	text-align:center;
	width:170px;
	height:65px;
	display:block;
	border:solid 2px #3CA6BC;
	position:absolute;
	right:0;
	border-radius:5px;
}
.actividad3 .drop1{
	top:30px;
}
.actividad3 .drop2{
	top:110px;
}
.actividad3 .drop3{
	top:195px;
}
.actividad3 .drop4{
	top:280px;
}
.actividad3 .drop5{
	top:370px;
}
.actividad3 .mitad1{
	width:40%;
	height:460px;
	padding:50px 20px 20px 20px;
	float:left;
	position:relative;
}
.actividad3 .mitad2{
	width:60%;
	height:460px;
	padding:50px 20px 20px 20px;
	float:left;
	position:relative;
}
.actividad3 .mitad2 img{
	width:80%;
}
.actividad4{
	height:650px;
}
.actividad4-1{
	background:#D9F8FF;
	margin-bottom:20px;
	width:80%;
	float:left;
	padding:20px;
	-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.4);
	-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.4);
	box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.4);
}
.actividad4-2{
	width:20%;
	float:left;
	padding:20px;
}
.actividad4-3{
	width:100%;
	float:left;
	padding:20px;
	text-align:center;
}
.actividad-final{
	width:100%;
	height:180px;
}
.actividad-final .drop{
	width:17%;
	margin:1.25%;
	float:left;
}
.actividad-final .drop .titular{
	font-family:'frutiger_bold';
	width:100%;
	background:#C5D82E;
	text-align:center;
	text-transform:uppercase;
	padding:20px 0;
	border-top-left-radius:8px;
	border-top-right-radius:8px;
}
.actividad-final .drop.active .titular{
	background:#42A3B1;
}
.drag-final-content{
	width:17%;
	margin:1.25%;
	display:inline-block;
}
.drag-final{
	width:17%;
	margin:1.25% 1.07%;
	display:inline-block;
	background:#DDDDDD;
	text-align:center;
	padding:20px;
	cursor: pointer;
}
/*============ Sopa de letras ============*/

/* Estilo para las celdas de la cuadricula */
.rf-tgrid {
    font-family: 'frutiger_bold';
    font-weight: bold;
    font-size: .9em;
    margin: 1px;
    padding: 8px 10px;
	border: 1px solid #00608B;
    vertical-align: middle;
    text-align: center;
	width:30px;
	height:30px;

}

/* Estilo para la cuadricula */
.rf-tablestyle {
    border: 2px solid #00608B;
    background-color: #FFF;
    cursor: pointer;
}

/* Estilo para el DIV que contiene la cuadricula */
#rf-searchgamecontainer {
    float: left;
    padding-right: 20px; 
}

/* Estilo para el DIV que contiene la lista de palabras */
#rf-wordcontainer {
    font-family: 'frutiger_light';
    float :left;
    padding-top: 20px;
	margin : 0;
    border: none;
	cursor: pointer;	
}
#rf-wordcontainer ul {
    cursor: default;
	list-style:decimal;
	font-size:.9em;
}

/* Estilo de las palabras que se han encontrado */
.rf-foundword {
    font-family: 'frutiger_light';
	text-decoration : line-through;
	color :#666;
	font-style : italic;

}

#rf-tablegrid .rf-armed {
/*	background: lightcyan;*/
}

#rf-tablegrid .rf-highlight {
    background: red;
}


#rf-tablegrid .rf-glowing {
	background-color: #CCCCCC;
}

#rf-tablegrid .rf-selected {
/*	background-color: #e1e1e1;
*/	background-color: #007DA8;
	color:#FFF;
    font-weight: lighter;
}

/* Estilo para las palabras que ya no hacen parte de la cuadricula */
.rf-pfalse {
    color: gray;
    visibility: hidden; 
}
/*========== select ==========*/
select {
	width:90%;
	min-width:150px;
    padding:3px;
    margin: 0;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    background: #FFF;
    color:#000;
    border:none;
    outline: none;
    display: inline-block;
    cursor:pointer;
}

/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    select {padding-right:18px}
}
/* Flechas de navegación 
-------------------------------------------------- */
.avanzar {
	position: fixed;
	right:0;
	top:50%;
	z-index:1000;
}
.retrocede {
	position: fixed;
	left:0;
	top:50%;
	z-index:1000;
}
.avanzar a {
	background: #C5D82E url(../images/arrow-b.png) no-repeat center;
	background-size: 10px;
	position: relative;
	width: 60px;
	height: 50px;
	display: block;
	-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.4);
	-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.4);
	box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.4);
	transition: all .2s;
}
.avanzar a:hover {
	background: #4898b3 url(../images/arrow-b.png) no-repeat center;
	background-size: 12px;
}
.avanzar a:after {
	content: '';
	display: block;
	border-left: 60px solid transparent;
	border-top: 10px solid #C5D82E;
	position: absolute;
	bottom: -10px;
	right: 0;
	transition: all .2s;
}
.avanzar a:hover:after {
	content: '';
	border-left: 60px solid transparent;
	border-top: 10px solid #4898b3;
}
.avanzar a:before {
	content: '';
	font-family: 'frutiger_bold';
	line-height: 50px;
	text-align: center;
	color: #333;
	width: 0px;
	height: 50px;
	background: #FFF;
	position: absolute;
	top: 0;
	right: 50px;
	display: block;
	transition: all .2s;
	z-index: -1;
	-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.4);
	-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.4);
	box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.4);
}
.avanzar a:hover:before {
	content: 'Avanza';
	width: 120px;
	top: 0;
	right: 50px;
}
.avanzar a p {
	display: none;
}
.retrocede a {
	background: #C5D82E url(../images/arrow-a.png) no-repeat center;
	background-size: 10px;
	position: relative;
	width: 60px;
	height: 50px;
	display: block;
	float: left;
	-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.4);
	-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.4);
	box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.4);
	transition: all .2s;
}
.retrocede a:hover {
	background: #4898b3 url(../images/arrow-a.png) no-repeat center;
	background-size: 12px;
}
.retrocede a:after {
	content: '';
	display: block;
	border-right: 60px solid transparent;
	border-top: 10px solid #C5D82E;
	position: absolute;
	bottom: -10px;
	left: 0;
	transition: all .2s;
}
.retrocede a:hover:after {
	content: '';
	border-right: 60px solid transparent;
	border-top: 10px solid #4898b3;
}
.retrocede a:before {
	content: '';
	font-family: 'frutiger_bold';
	line-height: 50px;
	text-align: center;
	color: #333;
	width: 0;
	height: 50px;
	background: #FFF;
	position: absolute;
	top: 0;
	left: 50px;
	display: block;
	transition: all .2s;
	z-index: -1;
	-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.4);
	-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.4);
	box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.4);
}
.retrocede a:hover:before {
	content: 'Vuelve';
	width: 120px;
	top: 0;
	left: 60px;
}
.retrocede a p {
	display: none;
}
/* footer 
-------------------------------------------------- */
.footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	/* Tamaño del footer */
	height: 80px;
	background-color: none;
}
.footer-content {
	width: 270px;
	height: 80px;
	position: relative;
	float: left;
	background: #4898b3;
	-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.4);
	-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.4);
	box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.4);
}
.footer-content:after {
	content: '';
	width: 270px;
	border-right: 270px solid transparent;
	border-bottom: 10px solid #4898b3;
	position: absolute;
	top: -10px;
	left: 0;
}
.footer-content .iconos {
	width: 210px;
	height: 55px;
	margin: 12px auto;
}
.footer-content .iconos .icono1 a{
	background: url(../images/icon_faq_repose.png) center no-repeat #FFF;
	background-size:50%;
}
.footer-content .iconos .icono1 a:hover{
	background: url(../images/icon_faq_hover.png) center no-repeat #FFF;
	background-size:50%;
}
.footer-content .iconos .icono2 a{
	background: url(../images/icon_glosario_repose.png) center no-repeat #FFF;
	background-size:50%;
}
.footer-content .iconos .icono2 a:hover{
	background: url(../images/icon_glosario_hover.png) center no-repeat #FFF;
	background-size:50%;
}
.footer-content .iconos .icono3 a{
	background: url(../images/icon_credits_repose.png) center no-repeat #FFF;
	background-size:50%;
}
.footer-content .iconos .icono3 a:hover{
	background: url(../images/icon_credits_hover.png) center no-repeat #FFF;
	background-size:50%;
}

.footer-content .iconos .icono1 a, .footer-content .iconos .icono2 a, .footer-content .iconos .icono3 a {
	width: 55px;
	height: 55px;
	border-radius: 50%;
	margin-left: 7.5px;
	margin-right: 7.5px;
	float: left;
}
.footer-content .iconos .icono1 a p, .footer-content .iconos .icono2 a p, .footer-content .iconos .icono3 a p {
	display: none;
}
.footer-content .iconos .icono1:after, .footer-content .iconos .icono2:after, .footer-content .iconos .icono3:after {
	content: '';
	font-family: 'frutiger_bold';
	font-size: 1.1em;
	text-align: center;
	line-height: 55px;
	color: #333;
	width: 210px;
	height: 60px;
	background:#FFF;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	display: block;
	position: absolute;
	bottom: 0;
	left: 30px;
	z-index: -1;
	transition: all .2s;
}
.footer-content .iconos .icono1:hover:after {
	content: 'Preguntas frecuentes';
	font-family: 'frutiger_bold';
	bottom: 80px;
}
.footer-content .iconos .icono2:hover:after {
	content: 'Glosario';
	font-family: 'frutiger_bold';
	bottom: 80px;
}
.footer-content .iconos .icono3:hover:after {
	content: 'Créditos';
	font-family: 'frutiger_bold';
	bottom: 80px;
}
/* menú de navegación
-------------------------------------------------- */
.col-sm-3 {
	z-index: 10;
}
.navbar-color {
	font-size:14px;
	width: 100%;
	background: #70afc6; /* Old browsers */
	background: -moz-linear-gradient(top, #70afc6 0%, #4898b3 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #70afc6), color-stop(100%, #4898b3)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #70afc6 0%, #4898b3 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #70afc6 0%, #4898b3 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #70afc6 0%, #4898b3 100%); /* IE10+ */
	background: linear-gradient(to bottom, #70afc6 0%, #4898b3 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#70afc6', endColorstr='#4898b3', GradientType=0 ); /* IE6-9 */
	padding-bottom: 30px;
}
.navbar-color:after {
	width: 100%;
	border-left: 270px solid transparent;
	border-top: 10px solid #4898b3;
	position: absolute;
	bottom: -10px;
	left: 0;
	display: block;
}
.navbar.navbar-default {
	border: none;
}
.nav.navbar-nav.navbar-color {
	-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.4);
	-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.4);
	box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.4);
}
.nav.navbar-nav.navbar-color li a {
	padding-left: 30px;
	color: #FFF;
	display: block;
	z-index: 100;
	transition: all .2s;
}
.nav.navbar-nav.navbar-color li a:hover {
	font-family: 'frutiger_bold';
	color: #333;
}
.nav.navbar-nav.navbar-color li:last-child a:after {
	border-bottom: none;
}
.nav.navbar-nav.navbar-color li:first-child a {
	background: #FFF url(../images/logo.png) no-repeat;
	background-position: 35px center;
	background-size: 60%;
	height: 120px;
}
.nav.navbar-nav.navbar-color li:first-child a:hover:before {
	display: none;
}
.nav.navbar-nav.navbar-color li:first-child a:hover {
	font-family: 'frutiger_light';
	color: #333;
}
.nav.navbar-nav.navbar-color li a:after {
	content: '';
	position: absolute;
	bottom: 0px;
	left: 10%;
	width: 80%;
	border-bottom: solid 1px #FFF;
}
.nav.navbar-nav.navbar-color li a:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 44px;
	background: #fded00;
	z-index: -1;
	transition: all .2s;
	-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.4);
	-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.4);
	box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.4);
}
.nav.navbar-nav.navbar-color li a:hover:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 105%;
	height: 44px;
	background: #fded00;
	z-index: -1;
}
.nav.navbar-nav.navbar-color li a.active:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 105%;
	height: 44px;
	background: #fded00;
	z-index: -1;
}
.nav.navbar-nav.navbar-color li a.active{
	font-family:'frutiger_bold';
	color:#333;
}
/* Botones
-------------------------------------------------- */
.lista-botones{
	text-align:center;
	list-style:none;
	padding:0;
}
.lista-botones li{
	margin:40px auto;
}
.btn-basico {
	margin:20px;
	text-decoration: none;
	text-align: center;
	padding: 11px 32px;
	border: solid 2px #005072;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	font: 1em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-weight: bold;
	color: #E5FFFF;
	background-color: #3ba4c7;
	background-image: -moz-linear-gradient(top, #3ba4c7 0%, #1982a5 100%);
	background-image: -webkit-linear-gradient(top, #3ba4c7 0%, #1982a5 100%);
	background-image: -o-linear-gradient(top, #3ba4c7 0%, #1982a5 100%);
	background-image: -ms-linear-gradient(top, #3ba4c7 0%, #1982a5 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1982a5', endColorstr='#1982a5', GradientType=0 );
	background-image: linear-gradient(top, #3ba4c7 0%, #1982a5 100%);
	-webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
	-moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
	box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
	-webkit-transition: all 0.02s ease-in;
	-moz-transition: all 0.02s ease-in;
	-o-transition: all 0.02s ease-in;
	transition: all 0.02s ease-in;
}
.btn-basico:hover {
	border: solid 2px #72005b;
	color: #E5FFFF;
	background-color: #44cfd4;
	background-image: -moz-linear-gradient(top, #44cfd4 0%, #13708f 100%);
	background-image: -webkit-linear-gradient(top, #44cfd4 0%, #13708f 100%);
	background-image: -o-linear-gradient(top, #44cfd4 0%, #13708f 100%);
	background-image: -ms-linear-gradient(top, #44cfd4 0%, #13708f 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#13708f', endColorstr='#13708f', GradientType=0 );
	background-image: linear-gradient(top, #44cfd4 0%, #13708f 100%);
}
.btn-basico:active {
	border: solid 2px #005072;
	color: #E5FFFF;
	background-color: #3ba4c7;
	background-image: -moz-linear-gradient(top, #3ba4c7 0%, #1982a5 100%);
	background-image: -webkit-linear-gradient(top, #3ba4c7 0%, #1982a5 100%);
	background-image: -o-linear-gradient(top, #3ba4c7 0%, #1982a5 100%);
	background-image: -ms-linear-gradient(top, #3ba4c7 0%, #1982a5 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1982a5', endColorstr='#1982a5', GradientType=0 );
	background-image: linear-gradient(top, #3ba4c7 0%, #1982a5 100%);
}
.btn-basico a{
	color:#FFF;
	display:block;
}
@media (max-width: 5000px) {
/* Hacer el menú de navegación vertical
-------------------------------------------------- */
.sidebar-nav .navbar .navbar-collapse {
	padding: 0;
	max-height: none;
}
.sidebar-nav .navbar ul {
	float: none;
}
.sidebar-nav .navbar ul:not {
	display: block;
}
.sidebar-nav .navbar li {
	float: none;
	display: block;
	margin-bottom:0;
}
.sidebar-nav .navbar li a {
	padding-top: 12px;
	padding-bottom: 12px;
}
}
@media (max-width: 1200px) {
.iframe-content{
	height:650px;
}
.globo:before {
	width: 743px;
	border-left: 743px solid transparent;
	left: -16px;
	display: block;
}
.index-color:after {
	width: 743px;
	border-right: 743px solid transparent;
	left: -16px;
	display: block;
}
.navbar-color {
	padding-bottom: 20px;
}
.navbar-color:after {
	border-left: 213px solid transparent;
	display: block;
}
/* Contenido
-------------------------------------------------- */
.fin-modulo .personaje{
	top:200px;
	left:0;
}
.fin-modulo .recuadro{
	margin-left:120px;
}
.fin-modulo .recuadro2{
	margin-left:115px;
}
.mitad{
	display:none;
}
.mitad-responsive{
	display:block;
}
.actividad3{
	height:500px;
}
.actividad3 .content{
	width:600px;
}
.actividad3 .drags{
	height:40px;
	line-height:40px;
}
.actividad3 .mitad1{
	width:260px;
	height:400px;
}
.actividad3 .mitad2{
	width:340px;
	height:400px;
}
.actividad3 .mitad2 img{
	width:100%;
}
.actividad3 .drop1, .actividad3 .drop2, .actividad3 .drop3, .actividad3 .drop4, .actividad3 .drop5{
	height:55px;
}
.actividad3 .drop1{
	top:30px;
}
.actividad3 .drop2{
	top:95px;
}
.actividad3 .drop3{
	top:165px;
}
.actividad3 .drop4{
	top:235px;
}
.actividad3 .drop5{
	top:310px;
}
.actividad4{
	height:730px;
}
.actividad4-1{
	width:75%;
}
/* Footer
-------------------------------------------------- */
.footer-content {
	width: 213px;
}
.footer-content:after {
	content: '';
	width: 213px;
	border-right: 213px solid transparent;
}
.footer-content .iconos {
	width: 210px;
	height: 45px;
	margin: 17px auto;
}
.footer-content .iconos .icono1 a {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	margin-left: 15.5px;
	margin-right: 7.5px;
	float: left;
}
.footer-content .iconos .icono2 a {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	margin-left: 15.5px;
	margin-right: 7.5px;
	float: left;
}
.footer-content .iconos .icono3 a {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	margin-left: 15.5px;
	margin-right: 7.5px;
	float: left;
}
.footer-content .iconos .icono1:after, .footer-content .iconos .icono2:after, .footer-content .iconos .icono3:after {
	font-size: 1.1em;
	color: #333;
	width: 213px;
	left: 0;
}
}
@media (max-width: 990px) {
.canvas-tarjetas{
	display:none;
}
.tarjetas_cont{
	display:none;
}
.listas-tarjetas{
	display:block;
}
.fin-modulo{
	margin-top:0;
	text-align:center;
}
.fin-modulo .personaje{
	width:250px;
	height:250px;
	position:relative;
	margin:0 auto;
	top:0;
	left:0;
	text-align:center;
	float:none;
}
.fin-modulo .recuadro{
	width:507px;
	position:relative;
	top:0;
	left:0;
	margin:-50px auto 0;
	padding-left:0;
}
.fin-modulo .recuadro:before{
	display:none;
}
.fin-modulo .recuadro2{
	width:517px;
	top:220px;
	left:50%;
	margin-left:-253.5px;
}
.fin-modulo .recuadro2:before{
	display:none;
}
.iframe-content{
	height:500px;
}
.nav.navbar-nav.navbar-color li a {
	padding-left: 15px;
	color: #FFF;
}
.globo:before {
	width: 578px;
	border-left: 578px solid transparent;
	left: -16px;
	display: block;
}
.index-color:after {
	width: 578px;
	border-right: 578px solid transparent;
	left: -16px;
	display: block;
}
.index-color video {
	width: 90%;
}
.navbar-color {
	padding-bottom: 10px;
}
.navbar-color:after {
	border-left: 158px solid transparent;
	display: block;
}
li.label-bus{
	display:block;
}
.label-bus{
	width:90%;
	margin:10px auto;
	padding:0;
}
.actividad3 .content{
	width:500px;
}
.actividad3 .mitad1{
	width:155px;
}
.actividad4{
	height:920px;
}
.actividad4-1{
	width:65%;
}
}
@media (max-width: 768px) {
.sonido{
	position:absolute;
	right:10px;
	top:90px;
}
.position-sonido{
	top:300px;
	right:12px;
}
.logos{
	position:relative;
	margin:auto;
	width:400px;
}
.logos:before{
	display:none;
}
.fin-modulo{
	width:100%;
	margin:0 auto;
	padding:0;
}
.fin-modulo .recuadro2{
	top:200px;
	margin-left:-258.5px;
}
.navbar-nav {
	margin: auto;
}
.navbar-color {
	padding-bottom: 0;
}
.navbar-color:after {
	display: none;
}
.index-color:after {
	display: none;
}
.nav.navbar-nav.navbar-color li a {
	text-align: center;
}
.nav.navbar-nav.navbar-color li a:before {
	content: '';
	width: 100%;
	height: 0;
}
.nav.navbar-nav.navbar-color li a:hover:before {
	content: '';
	width: 100%;
	height: 44px;
}
.nav.navbar-nav.navbar-color li:first-child a {
	background: #FFF url(../images/logo.png) no-repeat;
	background-position: center center;
	background-size: 110px;
	height: 80px;
}
/* Globo de texto 
-------------------------------------------------- */
.globo {
	margin: 0px 0px 10px 0px;
	padding: 20px;
	width: 100%;
	height: auto;
}
.globo:before {
	display: none;
}
/* Contenido 
-------------------------------------------------- */
.contenido {
	border: solid 4px #00608b;
	width: 100%;
	height: auto;
	margin-left: 0;
	padding: 20px;
}
.titulo {
	padding: 5px;
	margin-left: 0;
	width: 100%;
	min-height:80px;
}
.index-color {
	margin-top: 120px;
	padding-top: 70px;
	border-right: solid 4px #00608b;
	border-left: solid 4px #00608b;
	border-bottom: solid 4px #00608b;
	border-top: solid 20px #00608b;
}
.index-color .personaje {
	top: -130px;
}
.actividad4{
	height:910px;
}
.bus-pop{
	width:500px;
}
.bus-pop img{
	width:100%;
}
/* Flechas de navegación 
-------------------------------------------------- */
.avanzar {
	position: relative;
	right:0;
	top:0;
}
.retrocede {
	position: relative;
	left:0;
	top:0;
}
.avanzar a {
	background: #C5D82E url(../images/arrow-b.png) no-repeat;
	background-position: 150px center;
	background-size: 10px;
	position: relative;
	width: 180px;
	height: 50px;
	display: block;
	float: right;
	margin-right: 0;
	-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.4);
	-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.4);
	box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.4);
	transition: all .2s;
}
.avanzar a:hover {
	background: #4898b3 url(../images/arrow-b.png) no-repeat;
	background-position: 150px center;
	background-size: 12px;
}
.avanzar a:after {
	content: '';
	border-left: 180px solid transparent;
}
.avanzar a:hover:after {
	content: '';
	border-left: 180px solid transparent;
}
.retrocede a {
	background: #C5D82E url(../images/arrow-a.png) no-repeat;
	background-position: 20px center;
	background-size: 10px;
	position: relative;
	width: 180px;
	height: 50px;
	display: block;
	float: left;
	-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.4);
	-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.4);
	box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.4);
	transition: all .2s;
}
.retrocede a:hover {
	background: #4898b3 url(../images/arrow-a.png) no-repeat;
	background-position: 20px center;
	background-size: 12px;
}
.retrocede a:after {
	content: '';
	border-right: 180px solid transparent;
}
.retrocede a:hover:after {
	content: '';
	border-right: 180px solid transparent;
}
.retrocede a:before, .avanzar a:before {
	display: none;
}
.avanzar a p, .retrocede a p {
	display: block;
	line-height: 50px;
	text-align: center;
	color: #333;
	font-size: 1.2em;
}
/* Footer
-------------------------------------------------- */
.footer {
	position:absolute;
	background: #4898b3;
}
.footer-content {
	width: 100%;
}
.footer-content:after {
	display: none;
}
.footer-content:after {
	content: '';
	width: 213px;
	border-right: 213px solid transparent;
}
.footer-content .iconos {
	width: 376px;
	height: 45px;
	margin: 17px auto;
}
.footer-content .iconos .icono1 a, .footer-content .iconos .icono2 a, .footer-content .iconos .icono3 a {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin-left: 5px;
	margin-right: 80px;
	float: left;
}
.footer-content .iconos .icono1 a p, .footer-content .iconos .icono2 a p, .footer-content .iconos .icono3 a p {
	display: block;
	color: #FFF;
	padding-left: 50px;
	line-height: 45px;
	text-align: center;
}
.footer-content .iconos .icono1:after, .footer-content .iconos .icono2:after, .footer-content .iconos .icono3:after {
	display: none;
}
}
.ui-accordion .ui-accordion-content{
	height:300px;
}