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

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

}

/*estilos del sitio*/

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

a{
	color: #227A4F;
	font-weight: bold;
	text-decoration: none;
}

/*hover= al pasar el mouse en el enlace*/
a:hover{
	color: #616161;
}

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

form{
	width: 100%;

}

form div{
	margin: .5em;
}

h2,h3{
	color: #000000;
	font-family: Verdana , Helvetica;
	text-align: left;
}

hr { 
  	background-color: black;
  	height: 2px; 	
  	margin-top: .5em;
 	width: 100%;

}	

iframe{
	border-radius: .5em;
}

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;
}

img, video{
	max-width: 50%;
	border-radius: 15px;
}

header, section#contenido, footer{
	background: #FFF;
	margin: 0 auto;
	max-width: 100%;
	text-align: left;
}
header,nav{
	background: 0;	
}
header h1{
	margin-left: 1.4em;
	max-width: 100%;
	padding: 0.4em;
	vertical-align: middle;
}
nav{
	margin-left: 3.2em;
	max-width: 100%;
	padding: 0.4em;
}
nav ul{
	list-style: none;
}

nav li{
	display: inline-block;
	padding: 0.1em;
	vertical-align: top;
}

nav a{
	background: #FFF;
	border: 0.1em solid #D7D7D7;
	border-radius: 0.25em;
	color: #616161;
	display: block;
	font-family: Calibri, Helvetica, Verdana;
	font-size: 1.2em;
	padding: 0.2em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	text-align: center;
	-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: #227A4F;
	/*dashed= discontinua*/
	border: 0.1em;
	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,section#trabajos{
	background: #FFF;
	border-radius: 0.5em;
	color: black;
	display: inline-block;
	margin: 0 auto;
	max-width: 95%;
	padding: 0.25em;
	vertical-align: top;
	width: 65%;
}

article#galeria-inicio, article#trabajos{
	border-radius: 0.5em;
	margin: 0.5em;
	margin-left: 3.6em;
	padding: 0.5em;
	text-align: left;
	font-size: 0.9em;
	width: 82%;
}



article#galeria-inicio div, article#trabajos div{
	text-align: center;
	width: 100%;
}

article#galeria-inicio img{
	max-width: 100%;
}

section#logro{
	background: #FFF;
	border-radius: .5em;
	color: black;
	margin: 0.5em auto;
	max-width: 98%;
	padding: .5em;
	text-align: center;

}

div.portafolio{
	margin: 2em auto;
}

div.portafolio article{
	display: inline-block;
	padding: 1em;
	text-align: center;
}

div.personal img{
	border-radius: 0.5em;
	display: inline-block;
	margin: 0 auto;
	text-align: center;
	width: 46%;
}

section#menu-lateral, section#logro-conseguido{
	background: #FFF;
	display: inline-block;
	margin: 0 auto;
	min-height: 350px;
	padding: .5em;
	text-align: justify;
	vertical-align: top;
	width: 80%;
}
section#menu-lateral{
	background: #FFF;
	margin: 0 1.5em;
	padding: 1.5em;
	width: 13.5%;
}

section#menu-lateral ol{
	list-style: square;
	padding: 1em;
}

section#menu-lateral li{

	display: block;
	padding: 0.1em;
	text-align: left;
	vertical-align: top;
}


section#contacto, section#mapa{
	background: #FFF;
	border-radius: .5em;
	color: black;
	display: inline-block;
	margin: .5em 3em;
	min-height: 350px;
	padding: .5em;
	text-align: left;
	vertical-align: top;
	width: 40%;
}


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

span.datos-contacto{
	color: #227A4F;
	
}

section#mapa{
	text-align: center;
}

footer{
	background: #FFF url(../img/fondo.jpg) ;
	color: #000;
	font-size: 0.85em;
	padding: 0.75em 0;
	text-align: center;
}

.fade{
	opacity: 1;
	/*filter--> para IE */
	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--> para IE */
	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);
}

/*Cuando la anchura del navegador sea de 1081px para ariba...*/
@media screen and (min-width: 1921px){
	header h1{
		text-align: left;
		width: 35%;
	}

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

@media screen and (max-width: 1920px){
	nav li{
		font-size: 0.95em;
	}
	
	article#galeria-inicio,article#trabajos{
		width: 90%;
	}
	
	section#trabajos{
		max-width: 90%;
	}
	div.portafolio article{
		padding: .5em;
	}
}

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

	section#menu-lateral,section#logro-conseguido{
		max-width: 75%;
	}

	article#trabajos{
		font-size: 0.78em;
		max-width: 100%;
	}

	div.portafolio article{
		margin: .5em auto;
	}
}

@media screen and (max-width: 1180px){
	section#menu-lateral,section#logro-conseguido{
		max-width: 60%;
	}
	section#contacto, section#mapa{
		display: block;
		width: 90%;
	}
	article#trabajos{
		width: 95%;
	}
}

@media screen and (max-width: 900px){
	nav li{
		font-size: 0.85em;
	}
	
	section#trabajos{
		max-width: 95%;
	}

	section#menu-lateral{
		font-size: 0.9em;
	}

	
	div.portafolio article{
		padding: 2em;
	}

	section#contacto, section#mapa{
		display: block;
		width: 90%;
	}
	section#contacto{
		margin-bottom: .2em;
	}

}

@media screen and (max-width: 730px){
	nav li{
		display: inline-block;
		margin: 0px;
		width: 98%;
	}
	
	section#principal{
		font-size: 0.8em;
		padding-left: 1.75em;
	}

	section#trabajos{
		font-size: 0.8em;
		padding-left: 1.75em;
	}
	
	section#menu-lateral,section#logro-conseguido{
	
		font-size: 0.9em;
		max-width: 95%;
	}
	
	section#contacto, section#mapa{
		display: block;
		font-size: 0.8em;
		width: 85%;
	}


	div.portafolio article{
		display: block;
		margin: .5em auto;
		padding: 1em;
	}


}


}