@charset "utf-8";
/* CSS Document */
#elementos{
	width: 680px;
	height: 650px;
	position: relative;
	display: inline-block;
	vertical-align: top;
}
#mapa{
	width: 560px;
	height: 650px;
	background: url(../img/mapa.png) no-repeat;
	background-size: 550px;
	position: relative;
	display: inline-block;
	vertical-align: top;
	margin-top: 5px;
}
.cotas{
	width: 560px;
	height: 650px;
}

#cotas_terrestres{
	background: url(../img/cotas_terrestres.png);
	background-size: 550px;
}
#cotas_acuaticos{
	background: url(../img/cotas_acuatico.png);
	background-size: 550px;
}

nav{
	width:100%;
	height: auto;
	text-align: center;
}

.btn{
	width: 50%;
	height: 100px;
	display: inline-block;
	vertical-align: top;
	-webkit-transition:all 0.2s ease-out;
	-moz-transition:all 0.2s ease-out;
	transition:all 0.2s ease-out;
/*	margin: 0 auto;*/
/*	background: green;*/
}

.btn:hover{
	cursor: pointer;
}

h2{
	margin-top: 10px;
	color: #FFF;
	font-size: 2.4em;
	line-height: 1em;
}

#btn_terrestre{
	float: left;
	background: #5F4224;
}

#btn_terrestre:hover{
	/*-webkit-transform:scaleY(1.05);
	-moz-transform:scaleY(1.05);
	transform:scaleY(1.05);*/
	padding-top: 6px;
	opacity: 0.9;
}

#btn_acuatico{
	background: #71BCBC;
	float: right;
}

#btn_acuatico:hover{
	/*-webkit-transform:scale(1.05) translateX(-9px);
	-moz-transform:scale(1.05) translateX(-9px);
	transform:scale(1.05) translateX(-9px);*/
	padding-top: 6px;
	opacity: 0.9;
}

.cont{
	width: 100%;
	height: 551px;
	background: blue;
	position: absolute;
	bottom: 0;
}

#cont_terrestre{
	/*display: none;*/
	background: #5F4224;
}

#cont_acuatico{
	/*display: none;*/
	background: #71BCBC;
}

.el{
	width: 310px;
	height:165px;
	background: red;
	display: inline-block;
	vertical-align: top;
	border-radius: 5px;
	margin: 0 10px;
}

.el:hover{
	box-shadow: 0 0 20px #FFF;
	cursor: pointer;
}

#info{
	width: 100%;
	height: 50px;
	background:url(../img/info.png) 50% no-repeat;
}

#el_uno{
	background: url(../img/desierto.png);
}

#el_dos{
	background: url(../img/selva.png);
}

#el_tres{
	background: url(../img/llanura.png);
}

#el_cuatro{
	background: url(../img/nevado.png);
}
#el_cinco{
	background: url(../img/paramo.png);
}
.el_ac{
	width: 310px;
	height:165px;
	background: red;
	display: inline-block;
	vertical-align: top;
	border-radius: 5px;
	margin: 60px 10px 0 10px;
}
.el_ac:hover{
	box-shadow: 0 0 20px #FFF;
	cursor: pointer;
}
#cont_acuatico #info{
	margin-top: 10px;
}
#el_ac_uno{
	background: url(../img/rios.png);
}
#el_ac_dos{
	background: url(../img/manglar.png);
}
#el_ac_tres{
	background: url(../img/lagos.png);
}
#el_ac_cuatro{
	background: url(../img/mar.png);
}

/*.ccommons{position: absolute;background:url('../img/btn_cc.png') no-repeat;background-size:contain;width: 52px;height: 50px;bottom:13px;right:20px;cursor:pointer; z-index: 1000;}
.ccommons:hover{ opacity: 0.9}
.ccommons:active{background:url('../img/btn_ccoff.png') no-repeat;background-size:contain;width: 52px;height: 50px;bottom:10px;right:20px}
.lyPopUpccommons{position:absolute;left:361px;top:50%;background:#fff; border: solid 6px #042C49; border-radius:10px;  }
.lyCloseccommons{position:absolute;right:-15px;top:-35px; background:none; padding: 5px; border-radius: 7px; width:50px; height:50px;}
.lyPopContccommons{min-height:350px; max-height:500px; overflow-y: scroll;width:1500px;background:#709CB2;color:#fff;}
.lyPopContccommons .ly_headccommons{padding:25px 0 20px 50px;background:#45b29d;color:#fff;min-height:35px;}
.lyPopContccommons .ly_contccommons{font-size:1.7em;padding:30px 0;text-align: justify; margin: 5px 20px;}
*/



.lyPopContccommons{
	height: 600px;
/*	max-height:500px; */
	overflow-y: scroll;
	width:1300px;
	background:#709CB2;
	color:#fff;
	border-radius: 20px;
}
#cont_commons{
	width: 1200px;
	height: 400px;
	font-size: 1.5em;
/*	background: green;*/
}
.btn_commons{
	position: absolute;background:url('../img/btn_cc.png') no-repeat;background-size:contain;width: 52px;height: 50px;bottom:13px;right:20px;cursor:pointer; z-index: 1000;}
.btn_commons:active{background:url('../img/btn_ccoff.png') no-repeat;background-size:contain;width: 52px;height: 50px;bottom:10px;right:20px}
.btn_commons:hover{ opacity: 0.9}

#btn_cerar_pop{
	position: absolute;
	left: 1260px;
	top: -10px;

}