/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
	#wrapper {
		position: absolute;
		top: 200px;
		margin: 0 auto;
	}
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
  	#wrapper {
  		position: absolute;
		top: 200px;
		margin: 0 auto;
	}
}

/* Desktops and laptops ----------- */
@media screen 
and (min-width : 1224px) {
	#wrapper {
		position: absolute;
		top: 200px;
		margin: 0 auto;
	}	
}

/* Large screens ----------- */
@media screen 
and (min-width : 1824px) {
	#wrapper {
		position: absolute;
		top: 200px;
		margin: 0 auto;
	}

}


/**** SMARTPHONES ****/

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
	#container {
		top: 0px;
	}
	nav ul {
		margin-left: 10px;
	}
	nav li {	
		margin-left: 6px;
		margin-right: 6px;
		font-size: 0.8em;
	}
}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
	#container {
		top: 0px;
	}
	nav ul {
		margin-left: 10px;
	}
	nav li {	
		margin-left: 6px;
		margin-right: 6px;
		font-size: 0.8em;
	}
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
	#container {
		top: 0px;
	}
	nav ul {
		margin-left: 10px;
	}
	nav li {	
		margin-left: 6px;
		margin-right: 6px;
		font-size: 0.8em;
	}
}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

	#container {
		top: 0px;
	}
	nav ul {
		margin-left: 10px;
	}
	nav li {	
		margin-left: 6px;
		margin-right: 6px;
		font-size: 0.8em;
	}
}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {

	#container {
		top: 0px;
	}
	nav ul {
		margin-left: 10px;
	}
	nav li {	
		margin-left: 6px;
		margin-right: 6px;
		font-size: 0.8em;
	}
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

	#container {
		top: 0px;
	}
}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) {
   #container { 
   		top:-150px;
   		width:640px;	 
   }
   body img { max-width:640px; max-height:350px; }           
	nav ul {
		margin-left: 10px;
	}
	nav li {	
		margin-left: 6px;
		margin-right: 6px;
		font-size: 0.8em;
	}
}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 
   #container { 
   		top:-150px;
   		width:640px;	 
   }
   body img { max-width:640px; max-height:350px; }      
	nav ul {
		margin-left: 10px;
	}
	nav li {	
		margin-left: 6px;
		margin-right: 6px;
		font-size: 0.8em;
	}
}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 
   #container { 
   		top:-150px;
   		width:640px;	 
   }
   body img { max-width:640px; max-height:350px; }      
	nav ul {
		margin-left: 10px;
	}
	nav li {	
		margin-left: 6px;
		margin-right: 6px;
		font-size: 0.8em;
	}
}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

	#container {
		top: 0px;
	}
}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

	#container {
		top: 0px;
	}
}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) {

	#container {
		top: 0px;
	}
}
/* ----------- Galaxy S3 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) {

	#container {
		top: 0px;
	}
}

/* Portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: portrait) {

	#container {
		top: 0px;
	}
}

/* Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: landscape) {

	#container {
		top: 0px;
	}
}

/* ----------- Galaxy S4 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

	#container {
		top: 0px;
	}
}

/* Portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

	#container {
		top: 0px;
	}
}

/* Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

	#container {
		top: 0px;
	}
}

/* ----------- Galaxy S5 en HTC one----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

	#container {
		top: 0px;
	}
}

/* Portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

	#container {
		top: 0px;
	}
}

/* Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

	#container {
		top: 0px;
	}
}