@charset "utf-8";

*{
	margin: 0;
}

@font-face {
    font-family: 'league_gothicregular';
    src: url('leaguegothic-regular-webfont-webfont.eot');
    src: url('leaguegothic-regular-webfont-webfont.eot?#iefix') format('embedded-opentype'),
         url('leaguegothic-regular-webfont-webfont.woff') format('woff'),
         url('leaguegothic-regular-webfont-webfont.ttf') format('truetype'),
         url('leaguegothic-regular-webfont-webfont.svg#league_gothicregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

a,a img, a:visited{
	border: none;
	text-decoration: none;
}

body{
	background: white;
	color: white;
	font-family: 'league_gothicregular', Sans-Serif;
	font-size: 25px;
	margin: 0px auto;
	padding: 0;
}

footer{
	background-image: url(../img/footer.png);
	background-position: center;
	background-repeat: repeat-x;
	height: 316px;
	width: 100%;
}

h1{
	background: url(../img/soyelhijo.png);
	background-size:100%;
	background-repeat: no-repeat;
	color: rgba(255, 255, 255, 0.0);
	font-family: Sans-Serif;
	font-size: 0.5em;
	min-height: 479px;
	max-width: 680px;
}

h2{
	font-family: 'league_gothicregular', Sans-Serif;
	font-size: 3em;
	font-weight: normal;
	margin: 0 auto;
	text-align: center;
	text-shadow: 0px 4px 13px rgba(0, 0, 0, 0.25);
	text-transform: uppercase;
	width: 400px;
}

header{
	margin: -65px auto 0px auto;
	max-width: 875px;
}

nav{
	background: white;
	box-shadow: 0px 5px 22px rgba(0, 0, 0, 0.5);
	font-size: 1em;
	margin: -581px auto 0px auto;
	min-height: 50px;
	padding: 0;
	text-align: center;
	text-transform: none;
}

nav ul{
	color: #008186;
	margin: 25px auto 0px auto;
	max-width: 895px;
	padding: 0;
	text-align: left;
}

nav ul a:link{
	text-decoration: none;
	color: #008186;
}

nav ul a:visited{
	text-decoration: none;
	color: #008186;
}

nav ul li{
	display: inline-block;
	margin: 10px 3.2% 10px 2%;
	padding-left: 25px;
}

nav ul li.flecha-abajo{
	background: url(../img/menu-flecha-abajo.jpg);
	background-position: left center;
	background-repeat: no-repeat;
}

nav ul li.flecha-blog{
	background: url(../img/menu-flecha-blog.jpg);
	background-position: left center;
	background-repeat: no-repeat;
}

nav ul li.flecha-cv{
	background: url(../img/menu-flecha-cv.jpg);
	background-position: left center;
	background-repeat: no-repeat;
}

#background-header{
	background: #016273;
	background-image: linear-gradient(#016273, #1D293C);
	height: 506px;
	margin: 50px 0px 0px 0px;
	width: 100%;
}

#background-header #estrellas{
	background: url(../img/fondo-estrellas.png);
	background-repeat: repeat-x;
	height: 100%;
	width: 100%;
	animation:stars 13s linear infinite;
}

	@keyframes stars
	{
	from {background-position: 0px 10px;;}
	to {background-position: -986px 10px;;}
	}

#contacto{
	text-align: center;
}

#contacto #info{
	display: inline-block;
	font-family: 'league_gothicregular', Sans-Serif;
	font-weight: normal;
	height: auto;
	margin: 30px 4% 0 4%;
	text-align: center;
	vertical-align: top;
	width: 180px;
}

#contacto #info .tit-info{	
	color: white;
	font-size: 1.6em;	
	margin: 0 0 10px 0;
	text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.25);
	text-transform: lowercase;
}

#contacto #info .txt-info{
	color: #FD4C7F;
	font-size: 1.2em;
	margin: 0 0 11px 0;
}

#contacto #formulario{
	display: inline-block;
	height: auto;	
	margin: 37px 4% 0 4%;
	width: 280px;
}

#contacto #formulario #asunto{
	background: #F7F7F7;
	background-image: linear-gradient(#FEFEFE, #E6E6E6);
	border: none;
	border-radius: 30px;
	color: #4BC8BD;
	font-family: 'league_gothicregular', Sans-Serif;
	font-size: 0.8em;
	height: 30px;
	margin: 0px 0px 18px 0px;
	padding: 0px 0px 0px 15px;
	text-transform: uppercase;
	width: 270px;
}

#contacto #formulario #enviar{
	background: #77D5CD;
	background-image: linear-gradient(#91DDD7, #3CC3B7);
	border: none;
	border-radius: 30px;
	color: white;
	font-family: 'league_gothicregular', Sans-Serif;
	font-size: 0.8em;
	height: 30px;
	margin: 0;
	padding: 0px 0px 0px 15px;
	text-align: left;
	text-transform: uppercase;
	width: 285px;
}

#contacto #formulario #enviar:active{
	background: #50C9BF;
	background-image: linear-gradient(#009D89, #50C9BF);
	color: #A6EFB7;
}

#contacto #formulario #enviar:hover{
	background: #77D5CD;
	background-image: linear-gradient(#3CC3B7, #91DDD7);
}

#contacto #formulario #mensaje{
	background: #F7F7F7;
	background-image: linear-gradient(#FEFEFE, #E6E6E6);
	border: none;
	border-radius: 15px;
	color: #4BC8BD;
	font-family: 'league_gothicregular', Sans-Serif;
	font-size: 0.8em;
	height: 128px;
	margin: 0px 0px 18px 0px;
	padding: 10px 0px 0px 15px;
	text-transform: uppercase;
	width: 270px;
}

#contacto #formulario #nombre{
	background: #F7F7F7;
	background-image: linear-gradient(#FEFEFE, #E6E6E6);
	border: none;
	border-radius: 30px;
	color: #4BC8BD;
	font-family: 'league_gothicregular', Sans-Serif;
	font-size: 0.8em;
	height: 30px;
	margin: 0px 0px 18px 0px;
	padding: 0px 0px 0px 15px;
	text-transform: uppercase;
	width: 270px;
}

#fondo{
	background: #9AE8C2;
	background-image: linear-gradient(#69CFEC, #C4FE9E);
	height: auto;
	margin: 7px 0px 0px 0px;
	position: absolute;
	width: 100%;
	z-index: 2;
}

#marcadeagua{
	background: url(../img/marca-de-agua.png);
	height: 81px;
	margin: 0px 0px 0px 80%;
	width: 71px;
}

#montanas-cabezote{
	background: url(../img/montanas-cabezote.png);
	background-position: 0px 0px;
	background-repeat: repeat-x;
	height: 170px;
	margin: -185px auto 0px auto;
	width: 100%;
	position: absolute;
	z-index: 3;
	animation:montanas 17s linear infinite;
}

	@keyframes montanas
	{
	from {background-position: 0px 0px;;}
	to {background-position: 974px 0px;;}
	}

#nubes-cabezote{
	background: url(../img/nubes-cabezote.png);
	background-repeat: repeat-x;
	background-position: center;
	height: 114px;
	margin: -79px auto 0px auto;
	width: 100%;
	position: absolute;
	z-index: 4;
	animation:nubes 11s linear infinite;
}

	@keyframes nubes
	{
	from {background-position: 0px 0px;;}
	to {background-position: 973px 0px;;}
	}

#social480{
	display: none;
}

#tecnologia{
	background-image: url(../img/burbujas.png);
	background-position: center;
	margin: 0;
	min-height: 385px;
	max-width: 100%;
}

#tecnologia #logos{
	background-image: url(../img/logoshtml5.png);
	background-position: center center;
	background-repeat: no-repeat;
	margin: 0;
	min-height: 385px;
	max-width: 100%;
}

.nubes-body{
	background: url(../img/nubes-body.png);
	background-position: center;
	background-repeat: repeat-x;
	margin: 39px 0px 0px 0px;
	height: 80px;
}

/* Media query */
@media screen and (max-width: 900px){
}

@media screen and (max-width: 680px){
	h1{	
	min-height: 430px;
	max-width: 680px;
	}
	h2{		
	font-size: 2em;
	}
	header{
	margin: 10px auto 0px auto;
	}
	nav ul li{
	margin: 10px 3% 10px 14%;
	height: 27px;
	text-align: center;
	vertical-align: top;
	width: 8%;
	}
	#contacto #info{
	width: 250px;
	}
	#contacto #info .tit-info{
	font-size: 1.5em;
	}
	#contacto #info .txt-info{
	font-size: 1em;
	}
	#marcadeagua{
		display: none;
	}
}

@media screen and (max-width: 480px){
	.nada{
		display: none;
	}
	h1{	
	min-height: 320px;
	max-width: 680px;
	}
	h2{	
	font-size: 1.8em;
	width: 250px;
	}
	nav ul li{
	font-size: 0.9em;
	height: 27px;
	margin: 10px 1% 10px 11%;
	text-align: center;
	vertical-align: top;
	width: 8%;
	}
	#contacto #info .tit-info{
	font-size: 1.6em;
	}
	#contacto #info .txt-info{
	font-size: 1.1em;
	}
	#social480{
		display: block;
		margin: 0 auto;
		text-align: center;
	}
	#social480 img{
		display: inline-block;
		margin: 20px 1% 0 1%;
	}

}