@import url('http://fonts.cdnfonts.com/css/alien-2');

*{
	/*font-family: bungee, sans-serif;*/
	font-family: MS Sans Serif, sans-serif;
	background: #ccc;
}
body{
	margin: 0;
	background: #ccc;
}
#cabecera{
	position: relative;
	width: 554px;
	height: 65px;
	padding-top: 5px;
	margin-left: auto;
	margin-right: auto;
	/*background: blue;*/
}
#cabecera:hover #tres-botones-cortina{
	width: 7px;
}
#cabecera:hover #linea-1{
	background: rgba(0, 0, 0, 0);
}
#cabecera:hover #linea-2{
	background: #00aaff;
}
#cabecera:hover #linea-3{
	background: #00aaff;
}
#cabecera:hover #menu{
	margin-top: 2px;
}
#tres-botones{
	float: left;
	width: 40px;
	height: 40px;
}
#tres-botones:hover #tres-botones-cortina{
	width: 7px;
}
#tres-botones:hover #linea-1{
	background: rgba(0, 0, 0, 0);
}
#tres-botones:hover #linea-2{
	background: #00aaff;
}
#tres-botones:hover #linea-3{
	background: #00aaff;
}
#tres-botones:hover ~ #menu ul li a{
	color: #22aaff;
}
#tres-botones-cortina{
	float: right;
	width: 40px;
	height: 40px;
	transition: 0.6s;
}
#linea-1{
	transition: 0.4s;
}
#linea-1, #linea-2, #linea-3{
	height: 6px;
	border-radius: 3px;
	margin-top: 4px;
	margin-bottom: 7px;
	background: #777;
}
#menu{
	float: left;
	width: 514px;
	height: 30px;
	margin-top: -38px;
	transition: 0.5s;
}
#menu ul{
	padding: 0;
	display: flex;
	list-style: none;
}
#menu ul li{
	width: 128px;
	border-right: 2px solid #ccc;
	transition: 1s;
}
#menu ul li:hover{
	border-right: 2px solid #4477ff;
}
#menu ul li a{
	display: block;
	font-family: MS Sans Serif, sans-serif;
	font-size: 16px;
	color: #00aaff;
	font-weight: 600;
	text-decoration: none;
	text-align: center; /* Esta propiedad va de la mano de "display: block" en cuanto a centrar al texto */
}
#inicio, #acerca, #servicios, #contacto{
	transition: 1s;
}
#inicio:hover, #acerca:hover, #servicios:hover, #contacto:hover{
	color: #4477ff;
}
h1{
	margin-right: auto;
	margin-left: auto;
	margin-top: 50px;
	margin-bottom: 50px;
	width: 954px;
	color: white;
	font-size: 48px;
	line-height: 55px;
	animation: aparece-texto 2s, aparece-sombra 2s;
	text-shadow: 2px 2px 10px #222, -2px -2px 10px #0088ff;
	text-align: center;
}
#formulario-contacto{
	margin-right: auto;
	margin-left: auto;
	margin-top: 50px;
	margin-bottom: 50px;
	width: 554px;
}
h1 span{
	position: absolute;
	right: 0;
	width: 0;
	background: #ccc;
	border-left: 1px solid #000;
	animation: escribe-texto 2s;
}
#paginas{
	margin: auto;
}
form{
	padding: 2px;
	position: relative;
	/*overflow: hidden;*/
}
form label{
	font-weight: 900;
	color: #0088ff;
	padding-top: 15px;
	padding-bottom: 7px;
}
form textarea{
	max-width: 554px;
	max-height: 100px;
	min-width: 554px;
}
form input, textarea{
	font-size: 14px;
	outline: none;
	width: 554px;
	border-radius: 4px;
	margin-bottom: 10px;
}
form label, input, textarea{
	display: flex;
}
form input::placeholder{
    font-size: 14px;
    color: #555;
}
form textarea::placeholder{
	font-size: 14px;
	color: #555;
}
form #btnEnviar{
	font-size: 14px;
	font-weight: 900;
	background: #0088ff;
	color: #ccc;
	width: 200px;
	border: none;
	transition: 0.6s;
}
form #btnEnviar:hover{
	background: #44aaee;
	color: #ccc;
}
form #btnEnviar:active{
	background: #ccc;
	color: #0088ff;
}
@keyframes aparece-texto{
	from{
		color: rgba(0, 0, 0, 0);
	}
	to{
		color: white;
	}
}
@keyframes escribe-texto{
	from{
		width: 100%;
	}
	to{
		width: 0;
	}
}
@keyframes aparece-sombra{
	from{
		text-shadow: 0 0 0 #ccc;
	}
	to{
		text-shadow: 2px 2px 10px #222, -2px -2px 10px #0088ff;
	}
}
#ventana-3d-1{
	width: 640px;
	height: 480px;
	margin-left: auto;
	margin-right: auto;
	background: blue;
	transition: 2s;
}

/* Estilos y recursos para el sitio de contacto */
#aviso-error{
	width: 100%;
	height: 100vh;
	background: rgba(0, 0, 0, 0.7);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
}
#mensaje-modal{
	background: #ccc;
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
	width: 400px;
	padding: 30px 20px 15px;
}
#mensaje-modal h3{
	text-align: center;
	font-family: 'Ubuntu';
	font-size: 20px;
	font-weight: 400;
	color: #000;
}
#mensaje-modal h3:after{
	display: block;
	width: 100%;
	height: 1px;
	background: #c5c5c5;
	margin: 10px 0px 15px;
}
#mensaje-modal p{
	font-size: 16px;
	color: red;
}
#mensaje-modal #btnCerrar{
	display: inline-block;
	padding: 3px 10px;
	margin-top: 10px;
	font-weight: 900;
	color: #ccc;
	background: #0088ff;
	border: 2px solid #0088ff;
	border-radius: 4px;
	cursor: pointer;
	float: right;
}