body{
font-family: arial, sans-serif, verdana;
height:7680px;
color:white;
margin:0;
padding:0;
background-color:#000000;
}

ul{
list-style:none;
}

nav{
display:block;
}

nav li{
float:left;

}

nav a{

display:block;
}

a{
text-decoration:none;
font-weight:bold;
color:#57caff;
}

p{
font-size: 22px;
width: 560px;
position: absolute;
left: 200px;
top: 255px;
background: rgba(0, 0, 0, 0.2);
padding: 10px 20px;
border-radius: 10px;
}

.content{
position: absolute;
background:url(images/fondototal.jpg) top center no-repeat;
width:100%;
height:7680px;
display:block;
}

.planet0, .planet1, .planet2, .planet3, .planet4, .planet5, .planet6, .planet7, .planet8, .planet9, .planet10 {
display:block;
position:absolute;
}

.planet0{
width:548px;
height:174px;
background:url(images/float-portada.png);
top:6%;
left:20%;
position:absolute;

}

.planet1{
width:1090px;
height:700px;
background:url(images/cloroformo.png);
left:5%;
top:13%;
}

.planet2{
background:url(images/disfraz.png);
width:732px;
height:707px;
left:45%;
top:21%;
}

.planet3{
background:url(images/conduce.png);
width:575px;
height:752px;
left:30%;
top:30%;
}

.planet4{
background:url(images/fotografia.png);
width:534px;
height:753px;
left:40%;
top:40%;
}

.planet5{
background:url(images/sabotea.png);
width:900px;
height:371px;
left:30%;
top:55%;
}

.planet6{
background:url(images/intercepta.png);
width:1095px;
height:765px;
left:5%;
top:60%;
}

.planet7{
background:url(images/apoderarse.png);
width:513px;
height:282px;
left:30%;
top:60%;
}

.planet8{
background:url(images/francotirador.png);
width:630px;
height:606px;
left:0%;
top:80%;
}

.planet9{
background:url(images/vigila.png);
width:489px;
height:409px;
left:62%;
top:80%;
}

.planet10{
background:url(images/scrolar.png);
width:247px;
height:99px;
left:60%;
top:7%;
}

.button{
background: #142036;
padding: 5px 10px;
border: 2px solid #142036;
border-radius: 5px;
color: white;
box-shadow: 0 0 10px white;
margin-left:25px;

background-image: linear-gradient(bottom, rgb(20,32,54) 10%, rgb(97,119,158) 78%);
background-image: -o-linear-gradient(bottom, rgb(20,32,54) 10%, rgb(97,119,158) 78%);
background-image: -moz-linear-gradient(bottom, rgb(20,32,54) 10%, rgb(97,119,158) 78%);
background-image: -webkit-linear-gradient(bottom, rgb(20,32,54) 10%, rgb(97,119,158) 78%);
background-image: -ms-linear-gradient(bottom, rgb(20,32,54) 10%, rgb(97,119,158) 78%);

background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0.1, rgb(20,32,54)),
	color-stop(0.78, rgb(97,119,158))
);
}

.button:hover{
box-shadow: 0 0 20px white;
}



/****************************************************************************************************
 * Media queries */
 
@media only screen and (max-device-width : 768px) and (orientation : portrait) {
  /* Rules only for iPad - Portrait */

  #instrucciones {
  -webkit-background-size: 1920px 7680px;
background:url(images/bg_francotirador.jpg) top center no-repeat;
	width:768px;
	height:1024px;
	
	
}

 
}

@media only screen and (max-device-width : 1024px) and (orientation : landscape) {
  /* Rules only for iPad - Landscape */

  #instrucciones {
  -webkit-background-size: 1920px 7680px;  
	background:url(images/fondototal.jpg) top center no-repeat;
	width:1024px;
	height:768px;
	
}  
}