/* reseteo universal */
* {
	border: 0;
	margin: 0;
	padding: 0;
}

article,figcaption,figure,footer,header,hgroup,nav,section {
    display: block;
}

/* estilos del sitio */
@font-face {
    font-family: "Chaet";
    src: url("../fonts/Chalet.eot");
    src: url("../fonts/Chalet.eot?#iefix") format("embedded-opentype"),
         url("../fonts/Chalet.woff") format("woff"),
         url("../fonts/Chalet.ttf") format("truetype"),
         url("../fonts/Chalet.svg#Chalet") format("svg");
    font-weight: normal;
    font-style: normal;
}

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

body {
	background: #212121 url(../img/fondo.jpg);
	color: #FFF;
	font-family: "Chalet", Helvetica, Verdana;
	font-size: 1em;
}

a {
	color: #57ABB8;
	font-weight: bold;
	text-decoration: none;
}

a:hover {
	color:#F60;
}

audio, iframe, img, video {
	max-width: 100%;
}

fieldset {
	border: .1em solid #F60;
	border-radius: .5em;
	padding: 1em;
}

figcaption {
	font-size: 0.85em;
	padding: 0.25em;
	text-align: left;
}

form {
	width: 100%;
}

form div {
	margin: .5em;
}


h2, h3 {
	color: #F90;
	font-family: "Chalet", Helvetica, Verdana;
	text-align:center;
}

h3 {
	background: #E2E7F1;
	border-radius: 1em;
	box-shadow: .25em .25em .25em rgba(255,153,0,.5);
	margin-bottom: .5em;
	padding-left: .5em;
}

hr {
	border: 1px dashed #FFF;
	margin: 1em 0;
}

iframe {
	border-radius: .5em;
}

input[type="email"], input[type="text"], textarea {
	background: #EEE;
	border-radius: .25em;
	color: #F60;
	font-size: 1em;
	padding: .25em;
	width: 95%;
}

input[type="email"]:focus, input[type="text"]:focus, textarea:focus {
	background: #C6ECF9;
}

input[type="submit"] {
	background: #F90;
	border-radius: 0 .25em;
	color: #500;
	font-family: "Chalet";
	font-size: 1.25em;
	padding: .25em;
}

input[type="submit"]:hover {
	background: #7BBFD5;
	border-radius: .25em 0;
	color: #000;
	cursor: pointer;
}

label {
	cursor: pointer;
}

legend { 
	color: #F90;
	font-size: 1.2em;
	font-weight: bold;
}

ol{
	padding: 0 2em;
}

ol li{
	padding: 1em 0;
}

textarea {
	resize:none;
}

header, section#contenido, footer {
	background: #FFF url(../img/fondo.jpg);
	margin: 0 auto;
	max-width: 90%;
	text-align: center;
}

header h1, nav {
	display: inline-block;
	max-width: 100%;
	vertical-align: middle;
}

nav ul{
	list-style: none;	
}

nav li {
	display:inline-block;
	padding: 0.1em;
	vertical-align: top;
}
nav li ul{
	display:none;
	position:absolute;
	min-width:140px;
	}
nav li:hover > ul{
	display:block;
	}
nav li ul li{
	position:relative;
	}
nav li ul li ul{
	right:-140px;
	top:0px;
	}
	
nav a {
	background: #000;
	border: 0.1em solid #57ABB8;
	border-radius: 0.25em;
    color: #F60;
    display: block;
    font-family: "Chalet", Helvetica, Verdana;
    font-size: 1.4em;
	padding: 0.2em;
	-ms-transition: all 0.5s ease-in;
	-moz-transition: all 0.5s ease-in;
	-o-transition: all 0.5s ease-in;
	-webkit-transition: all 0.5s ease-in;
	transition: all 0.5s ease-in;
}

nav a:hover {
	background: #212121;
	border: 0.1em dashed #F60;
	border-radius: 0 0.5em 0 0.5em;
    color: #FFF;
	-ms-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

section#principal, aside {
	background: #011E30;
	border-radius: 0.5em;
	display: inline-block;
	margin: 0 auto;
	max-width: 100%;
	padding: 0.20em;
	vertical-align: top;
	width: 65%;
}

article#galeria-inicio  {
	border-radius: 0.5em;
	margin: 0.5em;
	padding: 0.5em;
	text-align: left;
	width: 95%;
}

aside {	
	width: 30%;
}

aside img, #img-acerca img, #video-acerca, #img-servicios {
	border-radius: 0.5em;	
}

article#descripcion-acerca, article#multimedia-acerca{
	background: #011E30;
	border-radius: .5em;
	display: inline-block;
	margin: 0 auto;
	max-width: 100%;
	min-height: 543px;
	padding: .5em;
	text-align: justify;
	vertical-align: top;
	width: 55%;
}

article#multimedia-acerca{
	text-align: center;
	width: 40%;
}

section#servicios-principal, section#servicios-tipos {
	margin: 0 auto;
	max-width: 95%;
}

#img-servicios, article#nuestros-servicios {
	display: inline-block;
	margin: 1em 0;
	vertical-align: top;
	width: 40%;
}

article#nuestros-servicios1 {
	display: inline-block;
	margin: 1em 0;
	vertical-align: top;
	width: 30%;
	background: #011E30;
	border-radius: .5em;
	border-color:#000;
	max-width: 100%;
	min-height: 235px;
	padding: .5em;
	text-align: justify;
	width: 55%;
}
#img-servicios1 {
	display: inline-block;
	margin-top: 8%;
	vertical-align: top;
	border-radius: 5px;
	width: 60%;
}

article#nuestros-servicios, article#servicio1, article#servicio2, article#servicio3 {
	background: #011E30;
	border-radius: .5em;
	border-color:#000;
	max-width: 100%;
	min-height: 300px;
	padding: .5em;
	text-align: justify;
	width: 55%;
}

article#servicio1, article#servicio2, article#servicio3 {
	background: #011E30;
	display: inline-block;
	width: 31%;
	vertical-align: top;
	border-color:#000;
}

article#servicio1 div, article#servicio2{
	text-align: center;
}

section#trabajos {
	background: #069;
	border-radius: .5em;
	margin: 0 auto;
	max-width: 80%;
	padding: .5em;
	text-align: center; 
}

div.portafolio {
	margin: 1em auto;
}

div.portafolio article{
	display: inline;
	padding: 1em;
}

section#contacto, section#mapa {
	background: #011E30;
	border-radius: .5em;
	display: inline-block;
	margin: 0 auto;
	min-height: 350px;
	padding: .5em;
	text-align: justify;
	vertical-align: top;
	width: 45%;
}

article#info-contacto, article#contactanos {
	border: .1em solid #1E6381;
	border-radius: .5em;
	margin: .5em;
	min-height: 144px;
	padding: .5em;
}

span.datos-contacto {
	color: #F90;
	margin-left: 1em; 
}

span.datos-movistar {
	color: #F90;
	margin-left: 1.2em; 
	
}
span.datos-rpm {
	color: #F90;
	margin-left: 4.3em; }


span.datos-contact {
	color: #F90;
	margin-left: 6.3em; 
}
span.datos-direcciones {
	color: #F90;
	margin-left: 1.1em; 
}
span.datos-email {
	color: #F90;
	margin-left: 4.3em; 
}
span.datos-juliaca {
	color: #F90;
	margin-left: 3.9em; 
}
span.datos-mpuno {
	color: #F90;
	margin-left: 6.9em; 
	
}
span.datos-arequipa {
	color: #F90;
	margin-left: 6.9em;	
}

span.datos-cusco {
	color: #F90;
	margin-left: 6.9em; 
}

span.datos-claro {
	color: #F90;
	margin-left: 6.9em; 
	
}
span.datos-nex {
	color: #F90;
	margin-left: 6.9em; 
	
}
span.datos-web {
	color: #F90;
	margin-left: 4.4em; 
	
}
span.datos-direccion {
	color: #F90;
	margin-left: 2.1em; 
	
}
span.datos-mjuliaca {
	color: #F90;
	margin-left: 0.6em; 
	
}
span.datos-puno {
	color: #F90;
	margin-left: 9.9em; 
}

span.datos-jr {
	color: #F00;
	margin-left: 1.2em; 
	display:block;
	padding:5px 5px 5px 35px;
	margin:5px 0px;
	font-size:13px;
	border-bottom: 1px dashed #EEEEEE;
}
span.datos-jrj {
	color: #F00;
	margin-left: 1.2em; 
	display:block;
	padding:5px 5px 5px 35px;
	margin:5px 0px;
	font-size:13px; 
	
}

span.datos-jrjn {
	color: #FFF;
	margin-left: 1.2em; 
	display:block;
	padding:5px 5px 5px 20px;
	margin:5px 0px;
	font-size:13px; 
	
}

span.direcciones {
	color: #F00;
	font-weight:bold;
	margin-left: 1.2em; 
	display:block;
	padding:5px 5px 0px 20px;
	margin:0px 0px;
	font-size:16px; 
	
}
span.direc {
	color: #F00;
	font-weight:bold;
	margin-left: 1.2em; 
	display:block;
	padding:5px 5px 0px 20px;
	margin:0px 0px;
	font-size:16px; 
	
}
section#mapa {
	text-align: center;
}

footer {
	color: #fff;
	font-size: 1.1em;
	padding: 0.75em 0;
}


.fade{
	opacity: 1;
	filter:alpha(opacity=10);
	-ms-transition: all 0.5s ease-in;
	-moz-transition: all 0.5s ease-in;
	-o-transition: all 0.5s ease-in;
	-webkit-transition: all 0.5s ease-in;
	transition: all 0.5s ease-in;
}

.fade:hover{
	opacity: 0.7;
	filter:alpha(opacity=7);
	-ms-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

.redonda {
	border-radius: 3.125em; /*50px/16px*/
	box-shadow: 5px 5px 10px rgba(255,255,255,.3);
}

@media screen and (min-width:1081px){
	header h1{
		text-align: left;
		width: 35%;
	}	

	nav {
		text-align: right;
		width: 60%;
	}	
}

@media screen and (max-width: 1080px){
	nav li {
		font-size: 1.3em;
	}

	article#galeria-inicio  {
		width: 90%;
	}

	aside{
		width: 20%;
	}
	
	article#descripcion-acerca, article#multimedia-acerca, #img-servicios, article#nuestros-servicios {
		width: 45%;
	}
	
	article#servicio1, article#servicio2, article#servicio3 {
		width: 30%;
	}

	section#trabajos {
		max-width: 90%;
	}

	div.portafolio article{
		padding: .5em;
	}

	form {
		width:95%;
	}
}

@media screen and (max-width: 800px){
	nav li {
		font-size: 0.95em;
	}

	article#galeria-inicio  {
		width: 88%;
	}
	
	#img-servicios, article#nuestros-servicios, article#servicio1 {
		display: block;
		margin: 0 0 .25em 0;
		width: 95%;
	}
	
	#img-servicios {
		width: 98%;
	}
	
	article#servicio2, article#servicio3 {
		width: 45%;
	}

	section#trabajos {
		max-width: 95%;
	}

	div.portafolio article {
		padding: 2em;
	}

	section#contacto, section#mapa {
		display: block;
		width: 95%;
	}

	section#contacto {
		margin-bottom: .1em;
	}
	
	form {
		width: 100%;
	}
}

@media screen and (max-width: 600px){
	nav li {
		display: inline-block;
		margin: 0px;
		width: 98%;
	}
	
	section#principal, article#descripcion-acerca, article#servicio2{
		margin-bottom: 0.2em;
	}
	
	section#principal, aside, article#descripcion-acerca, article#multimedia-acerca, article#servicio2, article#servicio3 {
		display: block;
		width: 95%;
	}
	
	#img-servicios {
		display: none;
	}

	div.portafolio article {
		display: block;
		margin: .5em auto;
		padding: 0;
	}
}
body{
	color:#CCC;
	font-family: Arial;
	background-color: #CCC;
}
.container{
	width: 800px;
	height:1200px;
	background-color: #FFF;
	border:solid 2px #999;
	margin: auto;
	font-family: Arial;
	padding: 20px;
}
.ventana{
	width: 100%;
	height: 100%;
	color: #FFF;
	position: fixed;
	background-image: url(../img/bg-modal.png);
	top: 0;
	left: 0;
	display:none;
}
.form{
	width: 450px;
	height: 300px;
	padding: 30px;
	background-color: dimgray;
	color: #666;
	top: 50%;
	left: 50%;
	position: absolute;
	margin-left: -175px;
	margin-top: -175px;
    border-radius: 9px;
}
.cerrar{
	font-weight: 900;
	text-align: right;
}
.cerrar a{
	color: red;
}