@font-face {
	font-family: Avenir;
	src:url(../font/avenir.otf),
		url(../font/avenir.ttf) format("truetype");
}

body {
	font-family: Avenir, Arial;
}

#wrapper {
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	background: url("../img/background2.png");	
}

.section {
	height: 700px;
}/* inicio */

.inicio {
	width: 100%;
	height: 1000px;
	text-align: center;
}

.titulo {
	margin-top:300px;
	opacity:0;
	overflow:visible;
	text-align: left;
}

.titulo img {
	width: 100%;
	height:auto;
}

.titulo .fecha {
	margin-top: 25px;
	width: 260px;
}

.pluma {
	opacity: 0;
}

.pluma img {
	height:655px;
}

/* Introducción */
#angelologia {
	opacity: 0;
	font-size: 16px;
	transform: translateY(25%);
	position: absolute;
}

.descripcion {
	border-bottom-color: #000;
	border-bottom-style: groove;
	border-bottom-width: medium;
}

.ilya_emilia {
	opacity: 0;
	transform: translateY(20%);
	position: absolute;
}

.obra {
	width: 100%;
	text-align: center;
	font-size: 30px;
	color: #bfbfbf;
}
.desc {
	font-size: 15px;
}

/* Cobertizo */
.parallax {
	position: relative;
	
}

.cobertizo {
	width: 100%;
}

.imagen_cobertizo {
	height: 512px;
	margin-top:250px; 
	opacity: 0;
}

.cielo {
	background-image: url("../img/cielo.png");
	background-repeat:no-repeat;
	background-size: 200% 100%;
	width: 100%;
	height: 500px;
	background-position: 0 0;
	position: absolute;
}

.campo {
	background-image: url("../img/campo.png");
	background-repeat: no-repeat;
	background-size: 140% 100%;
	width: 100%;
	height: 448px;
	background-position: 0 0;
	position: absolute;
	top:450px;
}

.texto_cobertizo {
	position: absolute;
	margin-top: 150px;
	opacity:0;
}

/*Hospital / Idea Feliz */
.hospital_text, 
.happy_text {
	position: absolute;
	opacity:0;	
}

.hospital, 
.idea {
	position: absolute;
	opacity: 0;
	margin-left: 88px;
}

.hospital {
	margin-top: 43px;
}

.pedestal{
	position: absolute;
	margin-top: 458px;
	margin-left: 49px;
}

/* Prueba destino */
.prueba_destino {
	position: relative;
	width: 100%;
}

.layer1 {
	background-image: url("../img/destino_fondo.png");
	background-repeat: no-repeat;
	background-size: 200%;
	width: 100%;
	height: 834px;
	background-position: 15% -150%;
	top:1300px;
	position: absolute;
}

.layer2{
	position: absolute;
	opacity: 0;
	margin-top: 100px;
}

.layer3 {
	background-image: url("../img/destino_angel_large.png");
	background-repeat: no-repeat;
	background-position: 70% 0;
	width: 270px;
	height: 1600px;
	position: absolute;
	z-index: 10;
}

/* Como conocer un ángel */
.conocer_texto {
	opacity: 0;
}

.conocer_img{
	width: 180px;
	margin-left: 180px;
	margin-top: 250px;
	bottom:0;
}

/* Ángel Caído */
.angel_caido {
	width: 100%;
	overflow: visible;
}

.texto_caido {
	opacity: 0;
	position: absolute;
}

.img_caido {
	position: absolute;
	width: 80%;
	opacity: 0;
	margin-top: 200px;
	margin-left:30%;
}

.img_caido img {
	width: 100%;
	max-width: 1000px;
	margin-top: -280px; 
}

.fondo {
	position: absolute;
	z-index: -10;
	width: 100%;
	height: 500px;
	margin-top: 200px;
	overflow: hidden;
}

.fondo img {
	width: 120%;
	opacity: 0;
}

/* Créditos */
.creditos_texto {
	height: 100%;
	margin-top: 25px;
	position: absolute;
	float: none !important;
	opacity: 0;
}

.creditos_logo {
	width: 70%;
	text-align: center;
	opacity: 0;
	margin-top: 500px;
	z-index: 40;
}

.creditos_logo img {
	width: 80%;
	max-width: 1000px;
}

.redes {
	margin-top: 620px;
	float: left;
	z-index: 100;
	position: absolute;
	opacity: 0;
}

a.links {
	color: #000000;
	text-decoration: none;
	border-left-color: #000000;
	border-left-style: black;
	border-left-style: groove;
	border-left-width: thin;
}

a.uno {
	color: #000000;
	text-decoration: none;
	border-left-style: none;
}

a:visited {
	color:#000000;
}

a:hover {
	color: #bfbfbf;
}

.triggers {
	position: absolute;
}

.espacio0 {
	width: 100%;
	height: 1px;
}

.espacio1 {
	width: 100%;
	height: 100px;
}

.espacio2 {
	width:100%;
	height:200px;
}

.espacio3 {
	width:100%;
	min-height:300px;
}

.espacio4 {
	width: 100%;
	min-height: 400px;
}

.espacio6 {
	width: 100%;
	min-height: 800px;
}

.espacio8 {
	width: 100%;
	min-height: 800px;
}

.espacio11 {
	width: 100%;
	min-height: 1100px;
}

@media only screen and ( min-width: 1230px ){
	.creditos_logo {
		margin-top: 550px;
	}
}

@media only screen and ( max-width: 480px ){
	.wrapper {
		width: 100%;
		max-width: 480px;
		overflow: hidden;
	}
}