body{
	background-color: #F5F7FA;
}
.activo{
	background: #A0D468;
	color: white;
	text-decoration: none;
	border: 3px solid #8CC152;
}
.activoa{
	background: #F4DD3F;
	color: white;
	text-decoration: none;
	border: 3px solid #F6BB42;
}
.activor{
	background: #FC6E51;
	color: white;
	text-decoration: none;
	 border: 3px solid #E9573F;
}
.activoaz{
	background: #5D9CEC;
	color: white;
	text-decoration: none;
	 border: 3px solid #4A89DC;
}
.activoj{
	background: #48CFAD;
	color: white;
	text-decoration: none;
	border: 3px solid #37BC93;
}
#tradicion .row {
	padding: 0;
}
#movilidad .row {
	padding: 10px;
}

.borde{
	border-radius: 0px;
}

.arr{
	margin-top: -25px;
}

#reflexion1{
	background: #A0D468;
	border-bottom: rgba(255,255,255,0.3) solid 20px;
	padding: 0px;
	color: #FFF;
	font-size: 3em;
	text-shadow: 1px 1px gray;
}

#rojo{
	background: #E74642;
	border-bottom: rgba(255,255,255,0.3) solid 20px;
	padding: 0px;
	color: #FFF;
	font-size: 3em;
	text-shadow: 1px 1px gray;
}
#azul{
	background: #4A89DC;
	border-bottom: rgba(255,255,255,0.3) solid 20px;
	padding: 0px;
	color: #FFF;
	font-size: 1em;
	text-shadow: 1px 1px gray;
}
#amarillo{
	background: #FFCE54;
	border-bottom: rgba(255,255,255,0.3) solid 20px;
	padding: 0px;
	color: #FFF;
	font-size: 1em;
	text-shadow: 1px 1px gray;
}
#movilidad{
	background: #E74642;
	color: white;
	text-shadow: 1px 1px gray;
}
#tradicion{
	background:#37BC9B;
	color: white;
	text-shadow: 1px 1px gray;
}
/*efecto en imagenes*/
.enlace {
	float: left;
	border: 5px solid transparent;
	overflow: hidden;
	position: relative;
	text-align: center;
	cursor: default;
	padding: 0;
}

.enlace .mask, .enlace .content {
	width: 98%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
}
.enlace img {
	display: block;
	position: relative;
}
.enlace h2 {
	text-transform: uppercase;
	color: #fff;
	text-align: center;
	position: relative;
	font-size: 17px;
	padding: 10px;
	background: hsla(0,0%,0%,0.8);
	margin: -17px 11px 0px 40px;
	text-align: left;
	opacity: 0.69;
}/**/
.enlace p {
   
	font-size: 14px;
	position: relative;
	color: #fff;
	padding: 0px 5px 0px;
	text-align: center;
}

/* Example styles */
.enlace img {
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}
.enlace .mask {
	opacity: 0;
	width: 100%;
	padding: 0px;
	height: 100%;
	background-color: hsla(213,33%,59%,0.7);
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	-webkit-transform: translate(265px, 265px);
	-moz-transform: translate(265px, 265px);
	-o-transform: translate(265px, 265px);
	-ms-transform: translate(265px, 265px);
	transform: translate(265px, 265px);
}
.enlace h2 {
	border-bottom: 1px solid rgba(0, 0, 0, 0.3);
	background: transparent -moz-element() repeat scroll 0 0;
	margin: -17px 11px 0px 40px;
	-webkit-transform: translate(200px, -200px);
	-moz-transform: translate(200px, -200px);
	-o-transform: translate(200px, -200px);
	-ms-transform: translate(200px, -200px);
	transform: translate(-46px, 94px);
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
.enlace p { 
	font-weight: bold;
	-webkit-transform: translate(-200px, 200px);
	-moz-transform: translate(-200px, 200px);
	-o-transform: translate(-200px, 200px);
	-ms-transform: translate(-200px, 200px);
	transform: translate(-200px, 200px);
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
.enlace a.info {
	-webkit-transform: translate(0px, 100px);
	-moz-transform: translate(0px, 100px);
	-o-transform: translate(0px, 100px);
	-ms-transform: translate(0px, 100px);
	transform: translate(0px, 100px);
	-webkit-transition: all 0.2s 0.1s ease-in-out;
	-moz-transition: all 0.2s 0.1s ease-in-out;
	-o-transition: all 0.2s 0.1s ease-in-out;
	-ms-transition: all 0.2s 0.1s ease-in-out;
	transition: all 0.2s 0.1s ease-in-out;
}
.enlace:hover .mask { 
	background-color: #5D9CEC;
	opacity: .80;
	-webkit-transform: translate(-0px, 0px);
	-moz-transform: translate(-0px, 0px);
	-o-transform: translate(-0px, 0px);
	-ms-transform: translate(-0px, 0px);
	transform: translate(-0px, 0px);
}
.enlace:hover h3 { 
	-webkit-transform: translate(0px,0px);
	-moz-transform: translate(0px,0px);
	-o-transform: translate(0px,0px);
	-ms-transform: translate(0px,0px);
	transform: translate(0px,0px);
	-webkit-transition-delay: 0.3s;
	-moz-transition-delay: 0.3s;
	-o-transition-delay: 0.3s;
	-ms-transition-delay: 0.3s;
	transition-delay: 0.3s;
}
.enlace:hover p {
	-webkit-transform: translate(0px,0px);
	-moz-transform: translate(0px,0px);
	-o-transform: translate(0px,0px);
	-ms-transform: translate(0px,0px);
	transform: translate(0px,0px); 
	-webkit-transition-delay: 0.4s;
	-moz-transition-delay: 0.4s;
	-o-transition-delay: 0.4s;
	-ms-transition-delay: 0.4s;
	transition-delay: 0.4s;
}
.enlace:hover a.info {
	-webkit-transform: translate(0px,0px);
	-moz-transform: translate(0px,0px);
	-o-transform: translate(0px,0px);
	-ms-transform: translate(0px,0px);
	transform: translate(0px,0px); 
	-webkit-transition-delay: 0.5s;
	-moz-transition-delay: 0.5s;
	-o-transition-delay: 0.5s;
	-ms-transition-delay: 0.5s;
	transition-delay: 0.5s;
}
.cuadro
{
	/*border: 1px solid gray;*/
	width: 100%;
	text-shadow: 1px 1px gray;
	box-shadow: 1px 1px 1px 1px gray;
	text-align: center;
	padding-bottom: 16px;
	padding-top: 16px;
}
.linea{
	box-shadow: 0 1px gray;

}

#btn-reflexion1, #btn-tradicion, #btn-azul, #btn-rojo, #btn-amarillo, #btn-movilidad{
	text-decoration: unset;
	outline: none;
}
h1{
   /* text-shadow: 3px 1px #000; */
   text-shadow: 3px 3px 4px #000
}
.raya{
	width: 20%;
	border: 1px solid #B2B3B4;
	float: left;
	margin-top: 34px;
}
#textoInicial{
	float: left;
	text-align: center;
	border-top: 1px solid rgb(0, 0, 0); 
	width: 100%; 
	margin-top: 40px;
}
#textoInicial h2{
	margin-left: auto; 
	margin-right: auto; 
	background-color: rgb(245, 247, 250); 
	width: 480px; 
	max-width: 480px;
	margin-top: -18px;
	padding: 0 20px;
}
#subtitulo{
	float: left;
	width: 100%;
}
.img-ruta{
	width: 100%;
	height: 100%;
}
.divprincipal{
	background-color: #CC9900;
}
.divamarillo{
	padding: 10px;
	
}
.divamarillo h3{
	text-align: justify;
}
.textoModal{
	width: 100%;
	height: 300px;
	overflow: auto;
}
#textoOculto{
	display: none;
}