body{
font-family: arial, sans-serif, verdana;
height:14000px;
color:white;
margin:0;
padding:0;
}
p{
font-size: 35px;
width: 35%;
position: absolute;
left: 5%;
top: 20%;
color: #843d22;
padding: 10px 20px;

font-family: roboto slab;

}
{text-shadow: 0 1px 1px #000;
}
.ptext {font-size: 30px;
position: absolute;
padding: 15px 20px;
color: #843d22;
font-family: handlee;}

.ptext2 {font-size: 30px;
position: absolute;
padding: 120px 20px;
color: #843d22;
font-family: handlee;}

.ptext3 {font-size: 30px;
position: absolute;
padding: 10px 20px;
color: #843d22;
font-family: handlee;}

{
/*The loading bar*/
.bmeter {
position: absolute;
top: 146px;
left: 0px;
width: 0%;
height: 15px;
background-color: #CA2529;
opacity: 1;
z-index: 16;
}}
/*The end screen*/
.theend {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #000;
color: #fff;
padding-top: 40%;
padding-bottom: 25%;
padding-left: 70%;
font-size: 72px;
font-weight: bold;
font-family: roboto slab;
opacity: 0;
z-index: 13;
}
.content{
position:fixed;
width:100%;
height:100%;
}

.behind, .planet1, .planet2, .lift, .thrust, .drag, .weight{
display:block;
position:absolute;
}

.behind{
width:100%;
height:110%;
background:url(images/back4.jpg) top center no-repeat;
top:0%;
left:0%;
position:absolute;
z-index:-1;
}
.planet2{
background:url(images/wind2.png) no-repeat;
width:500px;
height:397px;
left:45%;
top:100%;
}

.planet1{
width:652px;
height:304px;
background:url(images/helicopter-animation3.gif) no-repeat;
left:65%;
top:100%;
}


.lift{
width:500px;
height:397px;
background:url(images/lift.png) no-repeat;
left:60%;
top:100%;
}

.thrust{
width:347px;
height:227px;
background:url(images/thrust.png) no-repeat;
left:100%;
top:80%;
}

.drag{
width:347px;
height:227px;
background:url(images/drag.png) no-repeat;
left:100%;
top:52%;
}

.weight{
width:500px;
height:397px;
background:url(images/weight.png) no-repeat;
left:60%;
top:100%;
}

.page1 {
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
background: rgba(32, 30, 44, .2);
	width: 400px;
	height: 300px;
	margin-left: 0%;
	margin-top: 5%;
	padding-right: 10px;
	padding-top: 10px;
	padding-left: 10px;
	padding-bottom: 10px;
	border-width: 0;

	}


/*For OXP DEMO Only*/
.floating {
position: fixed;
width: 100%;
height: 161px;
top: 0px;
left: 0px;
z-index: 15;
}
.float_inner {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 146px;
z-index: 16;
background-color: #000;
}
@media only screen and (min-width: 480px) and (max-width: 780px){
p{
font-size: 15px;
width: 35%;
position: absolute;
left: 0%;
top: 30%;
color: #843d22;
padding: 10px 20px;

font-family: roboto slab;

}
{text-shadow: 0 1px 1px #000;
}
.ptext {font-size: 15px;
position: absolute;
padding: 15px 20px;
color: #843d22;
font-family: handlee;}

.ptext2 {font-size: 15px;
position: absolute;
padding: 120px 20px;
color: #843d22;
font-family: handlee;}

.ptext3 {font-size: 15px;
position: absolute;
padding: 10px 20px;
color: #843d22;
font-family: handlee;}


/*The end screen*/
.theend {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #000;
color: #fff;
padding-top: 40%;
padding-bottom: 25%;
padding-left: 70%;
font-size: 20px;
font-weight: bold;
font-family: roboto slab;
opacity: 0;
z-index: 13;
}
.content{
position:fixed;
width:100%;
height:100%;
}

.behind, .planet1, .planet2, .lift, .thrust, .drag, .weight{
display:block;
position:absolute;
}

.behind{
width:100%;
height:110%;
background:url(images/back4.jpg) top center no-repeat;
top:0%;
left:0%;
position:absolute;
z-index:-1;
}
.planet2{
background-size: 50%;
}

.planet1{
background-size: 50%;
}


.lift{
background-size: 50%;
}

.thrust{
background-size: 50%;
}

.drag{
background-size: 50%;
}

.weight{
background-size: 50%;
}



/*For OXP DEMO Only*/
.floating {
position: fixed;
width: 100%;
height: 161px;
top: 0px;
left: 0px;
z-index: 15;
}
.float_inner {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 90px;
z-index: 16;
background-color: #000;
}



}