* {
	border: 0;
	margin: 0;
	padding: 0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
}
@font-face {
    font-family: 'source_code_proregular';
    src: url(../fonts'SourceCodePro-Regular-webfont.eot');
    src: url(../fonts'SourceCodePro-Regular-webfont.eot?#iefix') format(../fonts'embedded-opentype'),
         url(../fonts'SourceCodePro-Regular-webfont.woff2') format('woff2'),
         url(../fonts'SourceCodePro-Regular-webfont.woff') format('woff'),
         url(../fonts'SourceCodePro-Regular-webfont.ttf') format('truetype'),
         url(../fonts'SourceCodePro-Regular-webfont.svg#source_code_proregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
body {
	background: #FFFFFF;
	font-family: 'Lobster', cursive;
	font-size: 14px;
	color: #ff0000;
	text-align: center;
}
a {
	color: #f60;
	text-decoration: none;
}
header,img{
max-height:auto;
max-width: 100%;
}
header,section.portada,section.articulos{
	margin: 0px auto;
	width: 90%;
	border: 2px solid #000;
	background: #fff; 
}
section.portada{
	width: 90%;
	border: 2px solid #000;	
	background: blue;
}
h1 {
  color: #000;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;

}
h2 {
  color: #000;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;

}
h3 {
  color: #000;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;

}
h1,nav.menu{
	display: inline-block;
	vertical-align: middle;
	width: 30%;
	text-align: left;
}
nav.menu{
	text-align: right;
	width: 60%;
}
nav.menu ul{
	list-style: none;
}
nav.menu ul li{
	display: inline-block;
}
nav.menu ul li a {
	background: #FF6700;
	color: #000;
	text-decoration: none;
	font-weight:bold;
	display: block;
	padding: 10px 20px;
	margin:0 5px;
	font-family: 'source_code_proregular';
	/*width: 150px;
	height: 30px;
	text-align: center;
	line-height: 30px;*/
	transition: all ease 1s;
	-webkit-transition: all ease 1s;
	-ms-transition: all ease 1s;	
	-mz-transition: all ease 1s;
}
nav.menu ul li a:hover{
	background: #000;
	color: #FF6700;
	transition: all ease 1s;
	-webkit-transition: all ease 1s;
	-ms-transition: all ease 1s;	
	-mz-transition: all ease 1s;
}
section.portada img {
	width: 100%;
}
section.index {

}
article.lenguajes {
	display: inline-block;
	vertical-align: top;
	width: 28%;
	background: #58baff;
	border-radius: 10px;
	padding: 10px;
	min-height: 400px;
	color: #000;
	font-size: 16px;
	text-shadow:-2px -2px 5px #333;
	box-shadow: 2px 2px 5px #333;
}
article.lenguajes p{
	margin-bottom: 20px;
}
article.lenguajes img{
	width: 200px;
	height: 300px;
}

article.lenguajes a{
	background: #FF6700;
	color: #000;
	padding: 10px 15px;
	margin-top: 15px;
}
article.lenguajes a:hover{
	background: black;
	color: #FF6700;
}
footer{
	background: #fff;
	color: #000;
	padding: 15px 0;

}

i.iconos {
	font-size: 35px;
}
a:hover{
	color:#999;
}
section.contenedor-login{
	display: inline-block;
	vertical-align: top;
	font-family: 'Open Sans', sans-serif;
	width: 90%;
	height: 80%;
	border: 2px solid #000;
		background-color: #FF6701;
	
}
section.contenedor-login2{
	display: inline-block;
	vertical-align: top;
	font-family: 'Open Sans', sans-serif;
	width: 90%;
	height: 80%;
	border: 2px solid #000;
	background-color: #fff;
	
}
article.registrate, article.login{
	display: inline-block;
	vertical-align: middle;
	width: 55%;
	margin:100px auto;
	-webkit-transition:all ease 1s;
	-moz-transition:all ease 1s;
	-ms-transition:all ease 1s;
	transition:all ease 1s;
}
article.registrate{
	background: rgba(0,0,0,.7);
	padding: 20px;
}	
article.registrate a{
	width: 100%;
	padding: 20px;
	text-align: center;
	height: 80px;
	line-height: 40px;
	display: block;
	font-size: 50px;
	background: #f60;
	color: #fff;
}
article.registrate a:hover{
	background: blue;
}
article.registrate p{
	font-size: 25px;
	color: #fff;
	margin-top: 20px;
	text-align: left;
}
article.login{
	width: 40%;
	background: #fff;
	color: #222;
	border-radius: 10px;
	padding: 20px;
}
article.login form h1{
	display: block;
	width: 100%;
	font-size: 20px;
	margin-bottom: 20px;
	text-align: center;
}
article.login form input{
	width: 80%;
	border: 1px solid #999;
	height: 35px;
	padding: 10px;
	margin: 2px auto;
}
article.login form input.enviar{
	background: #FF6701;
	color: #fff;
	cursor: pointer;
	margin-bottom:20px;
}
article.login form input.enviar:hover{
	background: #444;
}

/*etiqueta media query que establece que cuando el sitio se esta viendo desde un dispositivo que no excede de resolucion de pantalla los 700px adopta estas propiedades para las etiquetas mencionadas en ese bloque*/
@media (max-width: 800px){
	article.lenguajes{
		width: 80%;
		margin: 5px 0;
	}
	h1, nav.menu{
		display: block;
		width: 100%;
		text-align: center;
	}
	article.registrate, article.login{
		width: 95%;
		display: block;
		vertical-align: top;
		margin:5px;
	}
}
@media (max-width: 500px){
	nav.menu ul li{
		display: block;
		width: 100%;
		margin-bottom: 2px;
	}
	article.registrate a{
		font-size: 25px;
	}
	}