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

}

body{ font-family: 'robotolight', Arial; }
header{ padding: 1em 0}
/*.logo,nav{ display: inline-block; vertical-align: top}*/
div.logo{ display: inline-block; float: left;margin-right: 1em;}
nav{float: right;}
.clear{clear: both;}
.centrar{ width: 86%; margin:0 auto; max-width: 1200px; position: relative;}
.fndAzul{ background: #00457E}
a { text-decoration: none}
nav ul {
	
	list-style-type:none;
	margin:0;
	padding:0;
}
nav ul li {
	display:inline-block;
	float: left;
	margin-right: 1px;
}
nav ul li a {
	display:block;
	/*min-width:140px;*/
	padding: 0.2em 0.8em;
	height: 50px;
	text-align: center;
	line-height: 50px;
	
	color: #12477B;
	text-decoration: none;
	text-transform: uppercase;
}
nav ul li:hover a {background: #00457E; color: #FFF}
nav ul li:hover ul a {
	background: #f3f3f3;
	color: #2f3036;
	height: 40px;
	line-height: 40px;
}
nav ul li:hover ul a:hover {color: #fff;}
nav ul li ul {display: none;}
nav ul li ul li {display: block;float: none;}
nav ul li ul li a {
	width: auto;
	min-width: 100px;
	padding: 0 20px;
}
nav ul li a:hover + .hidden, .hidden:hover {display: block;}
nav .show-menu {
	text-decoration: none;
	color: #fff;
	background: #12477B;
	text-align: center;
	padding: 0.4em 0.8em;
	display: none;
	position: absolute;
	right: 0
}

nav input[type=checkbox]{display: none;}
nav input[type=checkbox]:checked ~ #menu{display: block;}
div#form{ margin: 1em}
form { width:800px}
form div{ width: 48%; display: inline-block; vertical-align: top;}
form div:nth-child(odd){ margin-right: 3%}
form input,textarea{ margin-bottom: 1em; border: 2px solid #12477B; padding: 0.4em;}
form input{width: 80%;}
form textarea{width: 100%;  height: 6em}
form input[type=submit]{ background: #12477B; color: #FFF; text-align: center}
footer{ padding: 2em 0 1em 0}
footer #direccion{ float: right; color: #888}
.logo img{ width:260px}
.btn-hover{ background: #12477B; color: #FFF}
#slogan{ padding: 2% 0;-webkit-box-shadow: inset 0px 5px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    inset 0px 5px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow:         inset 0px 5px 5px 0px rgba(50, 50, 50, 0.75);}
#slogan p{ color:#FFF; font-size: 1.5em;  width: 80%; margin: 1em auto; text-align: center;}
section#empresa{ padding: 1% 0 4% 0}
section#empresa article{ width: 28%; display: inline-block; vertical-align: top; min-height: 250px; position: relative;}
section#empresa article p{ padding-bottom: 1em; color: #888}
section#empresa article:nth-child(even){margin: 0 7%}
section#empresa article a{ vertical-align:middle;border: 1px solid #888; border-radius: 5px; padding: 0.5em 0.6em 0.5em 1em; color:#888; position: absolute; bottom: -20px; font-size: 0.9em;}
section#empresa article i{margin: 0em}
section#sistema{ position: relative; background: url(../img/imagen2.jpg) no-repeat; background-size: 100%; min-height: 326px; border-bottom: 1px solid #888; margin-top: 4em}
section#sistema article div{ margin: 2em 2em 1.5em 2em}
section#sistema article{
	position: absolute;
	top:-10px;
	left: 0%;
	bottom: -5px;
	background: #FFF;
	width: 400px;
	height: 340px; border-top: 10px solid #00457E;
	-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    4px 4px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow:         4px 4px 5px 0px rgba(50, 50, 50, 0.75);
}
section#sistema article h3{color: #888; margin: 0}
section#sistema article h2{ margin: 0}
section#sistema article div img{ width: 100px}
section#sistema article div img:nth-child(odd){ border-right: 1px solid #CBD8E1; padding-right: 1em}
section#sistema article div img:nth-child(even){ padding-left: 1em}
section#titulos{ margin-bottom: 2em; 
	padding: 0;
	height: 225px;
	border-bottom: 10px solid #12477B}
section#titulos.quienes{
	background: url("../img/quienes-somos.jpg") no-repeat; 
	background-size: 100% 225px; }
section#titulos.contacto{
	background: url("../img/contacto.jpg") no-repeat; 
	background-size: 100% 225px; }
section#titulos.como{
	background: url("../img/como-lo-hacemos.jpg") no-repeat; 
	background-size: 100% 225px; }	
section#titulos.natania{
	background: url("../img/natania1.jpg") no-repeat; 
	background-size: 100% 350px; }	
section#titulos.altoplan{
	background: url("../img/altoplan1.jpg") no-repeat; 
	background-size: 100% 350px; }
}	
section#titulos div{position: absolute; left: 50%}
section#titulos h2{  text-align: center; color: #FFF; padding-top: 1.2em;text-shadow:2px 2px 5px #242424; font-size: 3.5em; margin: 0}
.div-dos{ width: 48%; display: inline-block; vertical-align: top}
section#quienes{ padding-bottom: 2em}
section#quienes img{ width: 100%}
section#quienes article:nth-child(even){ 
	border: 1px solid #A4A4A4; 
	margin-left: 3%;
	-webkit-box-shadow: 4px 4px 6px -3px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    4px 4px 6px -3px rgba(50, 50, 50, 0.75);
	box-shadow:         4px 4px 6px -3px rgba(50, 50, 50, 0.75);}
section#quienes article:nth-child(even) div{ margin: 2em}
article#ver-sistema{ width: 60%; margin: 0 auto}
article#ver-sistema img{ vertical-align: middle; }
article#ver-sistema img:nth-child(odd){ margin: 0 1em}
@media screen and (max-width : 1120px){
	.centrar{ width: 98%}
}
@media screen and (max-width : 985px){
	.logo img{ width: 180px}
	nav ul li a {
  	font-size: 0.8em;
  	padding: 0.2em 0.4em;}
  	form div:nth-child(odd){ margin-right: 0}
}
@media screen and (max-width : 828px){
	nav{ float: none}
	section#empresa article{ width: auto; display: block; min-height: 100px; margin-bottom: 3em}
	section#empresa article a{ position: relative;}
	section#empresa article:nth-child(even) {margin: 0 0 3em 0;}
	form div:nth-child(odd){ margin-right: 0%;}
	section#empresa article p{ padding-bottom: 0; margin-bottom: 0}
	form{ width: auto}
	form div{ display: block}
}
@media screen and (max-width : 690px){
	nav ul {position: static;display: none;}
	nav ul li {margin-bottom: 1px;}
	nav ul li, li a {width: 100%;}
	nav .show-menu {display:block; top: 0}
	.div-dos{ width: auto; display: block;}
}
@media screen and (max-width : 620px){
	form div{ width: auto;}
	section#empresa {padding: 0;}
	section#sistema{ background: none}
}
@media screen and (max-width : 568px){
	section#titulos.quienes,section#titulos.como,section#titulos.contacto{ background: none}
	section#titulos h2{ padding-top: 0;color: #BCBCBC;font-size: 2.5em;}
	section#titulos{ height: auto;}
}
@media screen and (max-width : 414px){
section#sistema article{ width: auto;}
section#sistema article div{margin: 1em 1em .5em 1em;}
}
@media screen and (max-width : 320px){
	section#sistema article div {
  margin: 0.5em 0.5em 0em 0.5em;
}
}
@media screen and (max-width : 320px){
	section#sistema article div img{ width: 70px}
}