/*RESET*/
html, body, main {
	margin: 0px;
	padding: 0px;
}
/*RESET*/
main {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
    margin: auto;
    background: #fff;
}
#stage {
    width: 100%;
    overflow: hidden;
    height: 300px;
    position: relative;
    z-index: 10;
    margin: auto;   
    background-image: url(/gnfactory/LNC/GNF/2016/06/01/0005/svg/bakground.svg);
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
}
#ad {
    height: 65px;
    width: 95px;
    background-color: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: absolute;
    top: 25px;
    right: 25px;
    z-index: 100;
    padding: 5px;
    background-image: url(/gnfactory/LNC/GNF/2016/06/01/0005/img/logo.jpg);
    background-position: center;
    background-repeat: no-repeat;
}
h1 {
    font-family: 'Roboto Slab', serif;
    font-size: 44px;
    font-weight: 400;
    color: #000;
    width: 100%;
    text-align: center;
    margin-top: 20px;
} 
/*TREE*/
#tree {
    width: 130px;
    height: 235px;
    position: absolute;
    left: 65%;
    top: 40px;
    z-index: 20;
    background-image: url(/gnfactory/LNC/GNF/2016/06/01/0005/svg/tree.svg);
    background-repeat: no-repeat;
}
/*BIRD*/

/*RAMA*/
#rama {
    width: 260px;
    height: 220px;
    position: absolute;
    left: 0px;
    top: 25px;
    z-index: 20;
    background-image: url(/gnfactory/LNC/GNF/2016/06/01/0005/svg/rama.svg);
    background-repeat: no-repeat;
}
#mono {
    width: 90px;
    height: 116px;
    position: absolute;
    left: 20px;
    top: 60px;
    z-index: 30;
    background-image: url(/gnfactory/LNC/GNF/2016/06/01/0005/img/mono.gif);
    background-repeat: no-repeat;
}
#lora {
    width: 85px;
    height: 185px;
    position: absolute;
    left: 100px;
    top: 40px;
    z-index: 30;
    background-image: url(/gnfactory/LNC/GNF/2016/06/01/0005/svg/lora.svg);
    background-repeat: no-repeat;
}

#hojas1 {
    width: 450px;
    height: 111px;
    position: absolute;
    left: 36%;
    top: 0px;
    z-index: 30;
    background-image: url(/gnfactory/LNC/GNF/2016/06/01/0005/svg/hojas_1.svg);
    background-repeat: no-repeat;
}
#hojas2 {
    width: 195px;
    height: 100px;
    position: absolute;
    left: 92%;
    top: 0px;
    z-index: 30;
    background-image: url(/gnfactory/LNC/GNF/2016/06/01/0005/svg/hojas_2.svg);
    background-repeat: no-repeat;
}
#zacate {
    width: 100%;
    height: 40px;
    position: absolute;
    top: 275px;
    z-index: 60;
    background-image: url(/gnfactory/LNC/GNF/2016/06/01/0005/svg/zacate.svg);
    background-repeat:repeat-x;
}
.fly{
	position:absolute;
    z-index: 10;
}
/*BIRD*/
#bird{
	left:100%;
    z-index: 20;
	-moz-animation:volar 5s infinite;
	-webkit-animation: volar 5s infinite;
	-o-animation:volar 5s infinite;
	-ms-animation:volar 5s infinite;
	-khtml-animation:volar 5s infinite;
	animation:volar 5s infinite;
    animation-duration: 15s

}
@-moz-keyframes volar{
	0%{
		top:5px;
	}25%{
		top:100px;
	}50%{
		top:80px;
	}75%{
		top:25px;
	}100%{
		left:177px;
		top:200px;
	}
}
@-webkit-keyframes volar{
	0%{
		top:5px;
	}25%{
		top:100px;
	}50%{
		top:80px;
	}75%{
		top:25px;
	}100%{
		left:177px;
		top:200px;
	}
}
@-o-keyframes volar{
	0%{
		top:5px;
	}25%{
		top:100px;
	}50%{
		top:80px;
	}75%{
		top:25px;
	}100%{
		left:-177px;
		top:200px;
	}
}
@-ms-keyframes volar{
	0%{
		top:5px;
	}25%{
		top:100px;
	}50%{
		top:80px;
	}75%{
		top:25px;
	}100%{
		left:-177px;
		top:200px;
	}
}
@-khtml-keyframes volar{
	0%{
		top:5px;
	}25%{
		top:100px;
	}50%{
		top:80px;
	}75%{
		top:25px;
	}100%{
		left:-177px;
		top:200px;
	}
}
@keyframes volar{
	0%{
		left:100%;
		top:5px;
	}25%{
		top:100px;
	}50px{
		top:80px;
	}75%{
		top:25px;
	}100%{
		left:-177px;
		top:200px;
	}
}
/*BIRDS*/
#birds{
	right:100%;
    z-index: 10;
	-moz-animation:vuelo 5s infinite;
	-webkit-animation: vuelo 5s infinite;
	-o-animation:vuelo 5s infinite;
	-ms-animation:vuelo 5s infinite;
	-khtml-animation:vuelo 5s infinite;
	animation:vuelo 5s infinite;
    animation-duration: 10s
}
@-moz-keyframes vuelo{
	0%{
		top:50px;
	}100%{
		right:177px;
		top:150px;
	}
}
@-webkit-keyframes vuelo{
	0%{
		top:50px;
	}100%{
		right:177px;
		top:150px;
	}
}
@-o-keyframes vuelo{
	0%{
		top:150px;
	}100%{
		right:177px;
		top:150px;
	}
}
@-ms-keyframes vuelo{
	0%{
		top:50px;
	}100%{
		right:177px;
		top:150px;
	}
}
@-khtml-keyframes vuelo{
	0%{
		top:50px;
	}100%{
		right:177px;
		top:150px;
	}
}
@keyframes vuelo{
	0%{
		top:50px;
	}100%{
		right:-177px;
		top:150px;
	}
}
/*DASY*/
#dasy{
	right:100%;
	-moz-animation:run 5s infinite;
	-webkit-animation: run 5s infinite;
	-o-animation:run 5s infinite;
	-ms-animation:run 5s infinite;
	-khtml-animation:run 5s infinite;
	animation:run 5s infinite;
    animation-duration: 30s;
    z-index: 50;
}
@-moz-keyframes run{
	0%{
		top:235px;
	}100%{
		right:177px;
		top:235px;
	}
}
@-webkit-keyframes run{
	0%{
		top:235px;
	}100%{
		right:177px;
		top:235px;
	}
}
@-o-keyframes run{
	0%{
		top:235px;
	}100%{
		right:177px;
		top:235px;
	}
}
@-ms-keyframes run{
	0%{
		top:235px;
	}100%{
		right:177px;
		top:235px;
	}
}
@-khtml-keyframes run{
	0%{
		top:235px;
	}100%{
		right:177px;
		top:235px;
	}
}
@keyframes run{
	0%{
		top:235px;
	}100%{
		right:-177px;
		top:235px;
	}
}
@media screen and (max-width: 480px) {
    h1 {
        font-size: 32px;
    }
    #garzas {
        left: 35%;
        top: 200px
    }
    #hojas1 {
        display: none;
    }
    #hojas2 {
        left: 70%;
    }
}