body {
	background: url(background.jpg);
	background-repeat: repeat;
}
 
#root {
	width: 1000px;
	height: 490px;
	margin: auto;	
	background-color: #FFFFFF;
	padding: 20px;
}

#main {
	width: 580px;
	height: 490px;
	float: left;
}

#loko {
	width: 580px;
	height: 410px;
}

#enter {
	width: 580px;
	height: 60px;
	margin-top: 20px;
}

#social {
	width: 400px;
	height: 490px;
	float: right;
}

#socialtop {
	width: 400px;
	height: 60px;
}

#sociali {
	width: 400px;
	height: 410px;
	margin-top: 20px;
}

#copyright {
	width: 250px;
	height: 25px;
	margin-top: 20px;
	float: right;
}

img.ri
{
	max-width: 90%;
	top: 5%;
	left: 5%;
	border-radius: 3px;
	box-shadow: 0 3px 6px rgba(0,0,0,0.9);
}

@media screen and (orientation: portrait) {
  img.ri {
      max-width: 90%;
  }
}

@media screen and (orientation: landscape) {
  img.ri {
      max-height: 90%;
  }
}

/* Laptop/Tablet (1024px) */
@media only screen and (min-width: 681px) and (max-width: 1024px) and (orientation: landscape) {
	#root { width: 600px; height: 990px; padding: 10px;}
	#main { width: 600px; max-height: 55%;}
	#loko { width: 600px; max-height: 83%;}
	#enter { width: 600px; max-height: 5%;}
	#social { width: 600px;}
	#socialtop { width: 400px; margin: auto;}
	#sociali { width: 400px; margin-left: 100px;}
}

/* Tablet Portrait (768px) */
@media only screen and (min-width: 621px) and (max-width: 1024px) and (orientation: portrait) {
	#root { width: 600px; height: 990px; padding: 10px;}
	#main { width: 600px; max-height: 55%;}
	#loko { width: 600px; max-height: 83%;}
	#enter { width: 600px; max-height: 5%;}
	#social { width: 600px;}
	#socialtop { width: 400px; margin: auto;}
	#sociali { width: 400px; margin-left: 100px;}
}

/* Phone Landscape (480px) */
@media only screen and (min-width: 680px) and (max-width: 680px) and (orientation: landscape) {
	#root { width: 400px; height: 840px; padding: 10px;}
	#main { width: 400px; max-height: 40%;}
	#loko { width: 400px; max-height: 81%;}
	#enter { width: 400px; max-height: 5%;}
	#social { width: 400px; }
	#socialtop { width: 400px; }
	#sociali { width: 400px; }
}

/* Phone Portrait (320px) */
@media only screen and (max-width: 620px) {
	#root { width: 400px; height: 840px; padding: 10px;}
	#main { width: 400px; max-height: 40%;}
	#loko { width: 400px; max-height: 81%;}
	#enter { width: 400px; max-height: 5%;}
	#social { width: 400px; }
	#socialtop { width: 400px; }
	#sociali { width: 400px; }
}