* { -moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box; 
}
	
	
body {
    font-family: Arial, sans-serif;
}

body {
    margin: 0px;
}
#ad {
	position: absolute;
    display: block;
    overflow: hidden;
    width: 100px;
    height: 100px;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#banner {
	opacity: 0.0; filter: alpha(opacity=0);
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    overflow: hidden;
}
#banner.visible {
 	opacity: 1.0; filter: alpha(opacity=100);
}

.buttons {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
	z-index:100;
}
.button {
	border:none;
	background:transparent;
    cursor: pointer;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
	z-index:100;
}



#borde {
    border:1px solid #000000;
	position:absolute;
	z-index:50;
	width:100%;
	height:100%;
	top:0px;
	left:0px
}





#fondo{
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: #cccccc;
}

#fondo > img {
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}



#textos {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}


#textos > div{
    position: absolute;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

#textos > div > img {
    width: 100%;
    position: absolute;
    top: 0
}

#textos > div.visible {
	left:0px;
	top:0px;
	opacity:1;
    -webkit-transition: all .4s cubic-bezier(.53,.71,.49,1);
    -moz-transition: all .4s cubic-bezier(.53,.71,.49,1);
    -o-transition: all .4s cubic-bezier(.53,.71,.49,1);
    transition: all .4s cubic-bezier(.53,.71,.49,1);
}
#textos > div.visible2, #textos > div.visible3, #textos > div.visible4 {
	left:0px;
	top:0px;
	opacity:1;
    -webkit-transition: all .4s cubic-bezier(.53,.71,.49,1);
    -moz-transition: all .4s cubic-bezier(.53,.71,.49,1);
    -o-transition: all .4s cubic-bezier(.53,.71,.49,1);
    transition: all .4s cubic-bezier(.53,.71,.49,1);
}
#textos > div.oculto {
	left:0px;
	top:0px;
	opacity:0;
    -webkit-transition: all .2s cubic-bezier(.53,.71,.49,1);
    -moz-transition: all .2s cubic-bezier(.53,.71,.49,1);
    -o-transition: all .2s cubic-bezier(.53,.71,.49,1);
    transition: all .2s cubic-bezier(.53,.71,.49,1);
}



#textos > #hacha, #textos > #precio {
	top:-100%;
    left: 0px;
}

#textos > #hacha.visible, #textos > #precio.visible {
    left:0px;
	top:0px;
}



#textos > #mano2, #textos > #g2, #textos > #g3 {
    position: absolute;
    top: 0px;
    left: -100%;
    width: 100%;
    height: 100%;
    z-index: 2;
	left:100%;
}

#textos > #mano2.visible, #textos > #g2.visible, #textos > #g3.visible {
    left:0px;
}

#textos > #mano2.visible2, #textos > #mano1.visible2, #textos > #g1.visible2 {
    left:0px;
    top: 10px;

}


#textos > #mano2.visible3 {
	left:100%;
    top: 10px;

}

#textos > #mano1.oculto, #textos > #g1.oculto {
    left:0px;
    top: 10px;
}



#textos > #mano2.visible4, #textos > #hacha.visible4 {
	left:-100%;
    top: 0px;

}

#textos > #abuela1, #textos > #abuela2, #textos > #abuela3, #textos > #abuela4, #textos > #caja {
    left:100%;
}

#textos > #abuela1.visible, #textos > #abuela2.visible, #textos > #abuela3.visible, #textos > #abuela4.visible, #textos > #caja.visible {
    left:0px;
}

#textos > #abuela1.visible2, #textos > #abuela2.visible2, #textos > #abuela3.visible2, #textos > #abuela4.visible2, #textos > #logo.visible2 {
    left:-100%;
}