/* CSS Document */
* {
	border:0;
	margin:0;
	padding:0;
}

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

}

body {
	background:#FFF;
	font-size:1em;
    font-family: 'exoregular';
	color:#333;	
}
a {
	color:#2ba6de;
	/*font-weight:bold;   /* en negrita */
	text-decoration:none;
	font-family: 'colaborate-thinregular';
}
a:hover {
	color:#dc4e12;
}
img {
	max-width:100%;   /* todas imagenes adaptable al 1005 */
	}
header, section#contenedor, footer {      
	background:#fff;
	margin: 0 auto;
	text-align:center;	 /*texto centralizado */
	width:90%  /* ancho */
}
header h1, nav {
	display:inline-block;    
	max-width:100%;
	vertical-align:middle;  /* que se alinie a la mitad */
}

nav ul{
	list-style:none;  /* no tenga puntitos ni viñetas */
	}
nav ul li {
	display:inline-block;  
	padding:0.1em;        /* borde interior */
	vertical-align:top;    /* que se alinie a arriba */
	}
nav ul li a{
	background:#2ba6de;
	color:#fff;
	display:block;
	font-size:1.2em;
	padding:0.3em 0.6em;
	transition:all ease-in 0.5s;   / * cracteristica cc3  aplicar transiciones duracion */
	border-radius:2px;
	
}

nav ul li a:hover, .marcado{
	background:#369;
	color:#fff;
	transition:all ease-out 0.5s;
	}
section#principal,aside {
	background:#fff;
	margin:0 auto;
	height:90%;
	padding: 0.2em;
	display:inline-block; /* distribucion en line */
	vertical-align:top;
	width:70%;
	max-width:100%
	}
	
	aside {
	width:25%;
	height:50px;
	background:#CCC;
	text-align:center;
	color:#2ba6de;
	font-weight:bold;
	border:0.1em solid #2ba6de;
	border-radius:0.2em;
	

}
	
section#libre {
	height:130px;
	max.width:900px;
}

section#libreform {
	height:350px;
	max.width:900px;
}
	


article {
	
	width:95%;
	
}

article#articulos {
	display:inline-block;
	vertical-align:top;
	width:30%;
	height:280px;
	margin:20px auto;
}
article#articulosnos {
	display:inline-block;
	vertical-align:top;
	margin:20px 2px 1px 2px;
	
	
}

	
article#articulos, .texto,.texto1,.texto2 {
	color#fff;
	text-align:justify;
	padding:1%;
	color:#2ba6de;
	font-family: 'colaborate-thinregular';
}

article#articulosnos .texto {
	display:inline-block;
	vertical-align:top;
	font-size:14px;
	margin:5px auto;
	padding:2px auto;
	text-align:justify;
	width:55%;
	}
	
article#articulosnos .texto1,article#articulosnos .texto2{
	display:inline-block;
	vertical-align:top;
	font-size:14px;
	margin:5px auto;
	padding:2px auto;
	text-align:top;
	width:55%;
}

    .texto3, .cambia {
	display:none;
}

footer {
	text-align:center;  /* texto aliniedo */
	padding:0.2em 0;
	font-size:0.8em;  /* tamaño fuente */
	height:50px;
	
}

article#formulario {
	display:inline-block;
	vertical-align:top;
	text-align:left;
	margin:0 auto;
	width:45%;
	border:0;
	
}
article#formulario label {
	display:block;
	color:#c60;
		
}
article#formulario input,article#formulario textarea{
     width:100%;
	 padding:.3em;
	 color:#fff;
	 font-size:1em;
	 height:30px;
	 background:#999;
	 border-radius:5px;
}
article#formulario textarea {
	min-height:120px;
	border-radius: 0 1.5em;
}
article#formulario .botones{
	width:25%;
	background:#6CF;
	margin:0.5em;
}
article#formulario .botones:hover{
		background:#000;
	
}
article#infocontacto{
	display:inline-block;
	vertical-align:top;
	margin:0 2em;
	background:#9C0;
	color:#000;
	padding:.5em;
	width:30%;
	border-radius:0.3em;
	
}
article#infocontacto h2{
	font-size:1.2em;
	border-bottom:#F90 .2em  solid;
}

article#articulosnos h2{
	font-size:1.5em;
	border-bottom:#2ba6de .2em  solid;
	
}
	

@media (min-width:1050px) {
	
	header h1 {
		text-align:left;
		width:35%;
	}
	nav {
		
		text-align:right;
		width:60%;
	}
}
@media (max-width:900px) {
	
	section#principal,aside{
		margin-top:0.5em;
	}
		
}
@media (max-width:680px) {
	
	header,section#contenedor,footer{
		width:100%;
	}
	
	section#principal,aside{
		margin-top:1px;
		vertical-align:top;
		display:inline-block;
		
	}
	article#articulosnos {
		width:90%;
	}
	
	article#articulosnos img {
		width:45%;
	}
	
	article#articulosnos .texto,article#articulosnos h2{
		width:50%;
		vertical-align:top;
		display:inline-block;
		font-size:14px;
		
	}
	nav {
		text-align:center;
	}
	
	img.desplaza {
    display:inline-block;
	text-align:right;
	width:50%;
			}

    article#articulosnos .texto2 {
   
		 width:50%;
		
	}
	article#articulosnos .texto1 {
   
		 width:50%;
		 
		
	}
	aside {
		width:90%;
		height:20%;
		text-align:center;

}
}
@media (max-width:480px) {
	
	section#contenedor,section#principal {
		width:90%;
		text-align:center;
	}
	nav ul li {
		width:90%;
		font-size:0.8em;
		
				
	}
	
	
	
	article#articulosnos,article#articulos {
		width:90%;
	}
	
	article#articulos img{
		width:45%;
	}
	
	article#articulosnos .texto,article#articulos .texto,article#articulosnos h2{
		width:50%;
		vertical-align:top;
		font-size:13px;
		display:inline-block;
		
	}
	article#articulosnos .texto1,article#articulosnos .texto3 {
		
		width:80%;
		font-size:13px;	
		height:50;
		
		
		
	}
	
	article#articulosnos img{
		width:45%;
		
	}
	
	img.desplaza {
     display:none;
	
	}
	
	img.cambia {
		display:inline-block;
	}

    article#articulosnos .texto2 {
    
	  display:none;
		
	}
	
	article#articulosnos  .texto3 {
		display:inline-block;
		vertical-align:top;
		font-size:13px;
		color:#2ba6de;
		text-align:justify;
		margin:auto;
		
	}
	
	article#articulosnos .texto1 h2,article#articulosnos .texto2 h2, article#articulosnos .texto h2 {
		width:100%;
		text-align:center;
		margin:auto;
	}
	
	article#articulosnos .texto3 h2{
		width:100%;
		text-align:center;
		margin:auto;
	}
	
	article#articulos {
		height:50%;
	}
	
	  	   
	nav {
		text-align:center;
	}

    article#infocontacto,article#formulario {
		text-align:center;
		width:90%;
		margin:auto;
	}
	
	article#formulario .botones{
	width:30%;
	background:#6CF;
	margin:0.5em;
	font-size:13px;
}
	section#libreform {
		height:50;
	}
	
	aside {
		width:80%;
		height:20%;
		text-align:center;

}

 
}