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

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-palomaDelgada:before {
	content: "\e601";
	float: left;
	margin: 7px 7px 0 0;
}
.icon-palomaGruesa:before {
	content: "\e600";
}

.icon-menu:before {
	content: "\e9bd";

	font-size: 28px;
}

html, body{
	width: 100%;

}


html{
	
}

body{
	font-family: 'Open Sans', sans-serif;
	overflow-y:scroll;
}

#cabecera{
	border: 0px solid red;
	background: #43b3a4;
	position: relative;
	width: 100%;
	height: 150px;

	box-shadow: 0 0 10px #000000;
}

#cabecera-conten{
	border: 0px solid black;
	background: #43b3a4;
	width: 1100px;
	height: 150px;
	margin: 0 auto;
}

#logotipo{
	border: 0px solid white;
	width: 320px;
	float: left;
}

#logotipo img{
	width: 100%;
	margin:25px 0 0 0;
}

#menu{
	width: 750px;
	float: left;
	margin:40px 0 0 20px;
}

#menu a{
	text-decoration: none;
	color: white;
}

#menu ul{
	width: 100%;
	margin-bottom: 20px;
	float: left;
}
#menu ul li{
	position: relative;
	width: 16.66%;
	float: left;
}


.demo{
	width: 100%;
	float: left;
	display: none;
}


.btn-demo{
	display:inline-block;
	padding:10px 22px; /* menos padding */
	background: linear-gradient(135deg, #1e3c72, #2a5298); /* degradado azul */
	color:#fff;
	font-size:1rem;
	font-weight:700;
	text-decoration:none;
	border-radius:40px;
	box-shadow:0 6px 14px rgba(0,0,0,.2);
	letter-spacing:.3px;
	transition: all .3s ease;
	position:relative;
	overflow:hidden;
}

.btn-demo:hover{
	transform:translateY(-2px) scale(1.02);
	box-shadow:0 10px 20px rgba(0,0,0,.25);
}

.btn-demo:active{
	transform:scale(.97);
}

/* Efecto brillo */
.btn-demo::after{
	content:"";
	position:absolute;
	top:0; left:-75%;
	width:50%; height:100%;
	background:linear-gradient(120deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 80%);
	transform:skewX(-20deg);
}

.btn-demo:hover::after{
	animation: shine 1s forwards;
}

@keyframes shine{
	0%{ left:-75%; }
	100%{ left:125%; }
}


.menu{
	border: 0px solid white;
	width: 100%;
	font-size: 0.9em;
	color: white;
	text-align: center;
	padding: 10px 0;

	border-radius: 10px;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.menu:hover, .activo{
	background: #318b7f;
}

.diferente{
	padding: 3px 10px 2px;
}

#menu ul li:hover #menu-secundario{
	max-height: 200px;
}

#menu-secundario{
	background:rgba(46,133,121,0.7);
	position: absolute;
	top:37px;
	left: 0;
	z-index: 100;
	width: 100%;
	float: left;

	overflow: hidden;
	max-height: 0;

	transition:all 0.5s;

	border-radius: 10px;
}

#menu-secundario ul{
	width: 100%;
	float: left;
}

#menu-secundario ul li{
	width: 100%;
}

.menu-secundario{
	border: 0px solid black;
	width: 100%;
	font-size: 14px;
	text-align: center;
	padding: 10px 0;
}

.menu-secundario:hover{
	background:rgba(46,133,121,1);
}

#menu-r{
	border: 0px solid white;
	width: 65%;
	text-align: right;
	color: white;
	float: left;
	padding: 2% 5% 2% 0;
	margin: 5px 0 0 0;

	display: none;

	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}

#menu-r-menu{
	border: 0px solid red;
	background: #43b3a4;
	position: relative;
	z-index: 100;
	float: left;
	display: none;
}

#menu-r-menu a{
	color: white;
	text-decoration: none;
}

.menu-r{
	border-bottom: 1px solid #f7f7f7;
	width: 100%;
	text-align: center;
	float: left;
	padding: 3px 0;
	cursor: pointer;
}

.menu-r:hover{
	background:rgba(46,133,121,1);
}

#wrapP{
	width: 1100px;
	margin: 0 auto;
}

#contenido{
	border: 0px solid red;
	width: 100%;
	float: left;
	padding: 0 0 60px 0;
}

#titulo{
	border: 0px solid green;
	width: 100%;
	float: left;
}

#titulo-pestana{
	border: 0px solid red;
	width: 1100px;
	color: #1e3773;
	font-size: 20px;
	padding: 30px 0 15px 0;
	margin: 0 auto;
}

#url{
	border: 0px solid red;
	background: #ddd;
	width: 100%;
	float: left;
}

#url-conten{
	background: #ddd;
	width: 1100px;
	height: auto;
	padding: 10px 0;
	margin: 0 auto;
}

#footer{
	background: #ddd;
	width: 100%;
	height: 300px;
	float: left;

	box-shadow: 0 5px 10px #C4C4C4;
}

#footer-conten{
	border: 0px solid red;
	background: #ddd;
	width: 1100px;
	height: 300px;
	margin: 0 auto;
}

.seccion{
	border: 0px solid red;
	width: 33.3%;
	text-align: center;
	float: left;
	padding: 10px;

	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}

.desarrollo-seccion{
	color: gray;
	line-height: 22px;
	padding: 20px 0 28px;
}

.desarrollo-seccion h3{
	color: gray;
	font-size: 23px;
}

#pie{
	border-top: 1px dotted gray;
	width: 100%;
	float: left;
}

#pie-conten{
	border: 0px solid red;
	width: 1100px;
	color: gray;
	margin: 0 auto;
}

#pie-conten span{
	border: 0px solid red;
	float: left;
	padding: 20px 0;
}

#redes{
	margin:0 0 0 220px;
	padding:13px 0 0 0;
}

#spanContacto{
	border:0px solid red !important;
	float:right !important;
}

@media screen and (max-width: 1100px){
	#footer-conten{
		width: 100%;
	}

	.seccion{
		width: 33%;
	}

	#pie{
		background: white;
		position: fixed;
		bottom: 0;
		left: 0;
	}

	#pie-conten{
		width: 100%;
	}

	#pie-conten span{
		border: 0px solid red;
		padding: 0;
	}

	#redes{
		margin-left: 17%;
	}

	#copy, #spanContacto{
		margin: 7px 0 0 0;
	}


	#titulo-pestana, #url-conten{
		width: 100%;
		padding-left:3%;

		box-sizing:border-box;
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;
	}
}

@media screen and (max-width: 1077px){
	#wrapP{
		border: 0px solid red;
		width: 100%;
	}

	#cabecera, #cabecera-conten{
		border: 0px solid green;
		width: 100%;
		height: auto;
		float: left;
	}

	#logotipo{
		width: 30%;
	}

	#logotipo img{
		margin-top: 0;
		padding: 2.5% 0;
	}

	#menu{
		display: none;
	}

	#menu-r{
		cursor: pointer;
		display: block;
	}	
	.demo{
		display: block;
	}
}

@media screen and (max-width: 800px){
	#redes{
		margin-left: 50px;
	}
}

@media screen and (max-width: 700px){
	#copy{
		display: none;
	}
}

@media screen and (max-width: 600px){
	#footer, #footer-conten{
		height: auto;
		display: none;
	}

	.seccion{
		width:100%;
	}

	#pie-conten span{
		text-align: center;
		padding: 7px 0;
	}

	#redes{
		width: 30%;
		margin: 0;
	}

	#spanContacto{
		width: 68%;
		margin: 8px 0 0 0;
	}
}

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

@media screen and (max-width: 400px){
	#logotipo{width:40%;}

	#menu-r{
		width: 60%;
	}
}