/**

** OUTLINE **

MEDIA QUERIES
  1] iPad (landscape @1024px)
  2] Monitor ~900px
  3] Monitor ~850px
  4] iPad (portrait @768px)
  5] Smartphone (480x320)

**/

/* -------------------------------------------------------- */
/* - MEDIA QUERIES ---------------------------------------- */
/* -------------------------------------------------------- */

/* iPads (landscape) -------------------------------------- */
@media screen
and (max-width : 1024px) {

	body {
		overflow-x: hidden;
	}
	
	body > section > * {
		width: 100%;
		padding: 0;
	}
	
	header > a {
		width: 293px;
		height: 138px;
		margin-left: 10%;
		background-repeat: no-repeat;
	}
	
	html[lang="en"] header > a {background-image: url(../images/lord-of-the-rings-online-EN.png);}
	html[lang="fr"] header > a {background-image: url(../images/lord-of-the-rings-online-FR.png);}
	html[lang="de"] header > a {background-image: url(../images/lord-of-the-rings-online-DE.png);}
	
	header > h1 {
		margin-right: 3%;
		font-size: 2.6em;
		width: 45%;
	}
	
	#headtext {
		right: 40px;
	}
	
	#sign-up-content {
		width: 100%;
		padding: 0 3%;
	}
	
	aside {
		width: 46%;
	}
	
	q {
		font-size: 1.9em;
		left: 3%;
	}
	
	#effect,
	#slideshow {
		display: none;
	}
	
	#footer-wrap {
		margin-top: 6%;
	}
	
	body > section > footer {
		width: 90%;
	}
	
	#legal > figure:first-child::after {
		width: 120px;
	}
}
/* ------------------------- *//* ------------------------- */
/* iPad hide CSS3 animations if not exactly 1024px -------- */
@media screen 
and (max-width : 1023px) {
	div[id^="newEffect"] {
		display: none;
	}
}
/* ------------------------- *//* ------------------------- */
/* Monitor Screen @ ~900px wide --------------------------- */
@media screen
and (max-width : 900px) {

	header > h1 {
		margin-right: 3%;
		font-size: 2.3em;
		width: 46%;
	}
	
	aside > div#aside-inner {
		padding: 0 8% 5%;
	}
}
/* ------------------------- *//* ------------------------- */
/* Monitor Screen @ ~850px wide --------------------------- */
@media screen
and (max-width : 850px) {

	q {
		font-size: 1.7em;
	}
}
/* ------------------------- *//* ------------------------- */
/* iPad Portrait View ------------------------------------- */
@media screen
and (max-width : 768px) {

	header > h1 {
		margin-right: 3%;
		font-size: 2.2em;
		width: 50%;
	}
	
	header > a {
		margin-left: 1%;
		width:40%;
		max-height:138px;
		background-size:100% auto;
	}
	
	aside {
		width: 56%;
	}
	
	q {
		display: none;
	}
	
	section#page-mid > * {
	background-size: 0%;
	}
	
	#footer-wrap::before {
		position: absolute;
		left: 30px;
		top: -140px;
		width: 100%;
		height: 150px;
		background: url(../images/logo-awards.png) no-repeat;
		content: "";
		display: block;
		background-size: 38% auto;
	}
}
/* ------------------------- *//* ------------------------- */
/* Hide Effect if not exactly 768px wide ------------------ */
@media screen 
and (max-width : 767px) {
	div[id^="newEffect"] {
		display: none;
	}
}
/* ------------------------- *//* ------------------------- */
/* Smartphone/iPhone -------------------------------------- */
@media screen 
and (max-width : 480px)
and (min-width : 1px) {
	header > a {
		position: relative;
		top: 0;
		left: 0;
		height: 95px;
		width: 213px;
		margin: 16px auto;
		display: block;
		background-repeat: no-repeat; 
	}
	
html[lang="en"] header > a {background-image: url(../images/lotro-smartphone-logo-EN.png);}
	html[lang="fr"] header > a {background-image: url(../images/lotro-smartphone-logo-FR.png);}
	html[lang="de"] header > a {background-image: url(../images/lotro-smartphone-logo-DE.png);}
	
	#effect {
		display: none;
	}
	
	h1 {
		display: none;
	}
	
	#sign-up-content {
		padding: 2%;
	}
	
	aside {
		width: 100%;
		right:0; /*added to counteract marketing postioning */
	}
	
	#footer-wrap {
		width: 100%;
	}
	
	footer {
		width: 98%;
	}
	
	#legal {
		margin-top: 60px;
	}
	
	#legal > figure::after {
		width: 1px;
		height: 1px;
		position: relative;
		content: "";
		display: block;
	}
	
	#legal > figure:first-child::after {
		width: 1px;
	}
	
	#legal img {
		top: 58px;
		height: 60px;
		position: absolute;
		margin: 0;
	}
	
	#legal > figure:first-child > img {
		left: 30%;
	}
	#legal figure:last-of-type::after img {
		top: 55px;
		left: -200px;
	}
	
	footer figure#rating::after {
		width: 0px;
	}
	
	#footer-wrap::before {
		left: 31%;
	}
	
	footer p {
		display: inline-block;
    margin: 0;
    padding: 0 20px;
	}
	
	img.rating {
		left: 45%;
	}
}

@media screen 
and (max-width : 600px)
and (min-width : 1px) {
html h4 {
    font-size: 1.75em;
}
}

@media screen 
and (max-width : 480px) {
	#footer-wrap::before {
		top: -20px;
	}
}

@media screen 
and (max-width : 320px) {
	#footer-wrap::before {
		top: -10px;
	}
}
/* ------------------------- *//* ------------------------- */