/* RETINA */

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	.featuresWrap {
		background-image: url("../img/header2x.png"), url("../img/stars.jpg");
		}
	#alpha .featuresWrap {
		background-image: url("../img/headerAlpha2x.png"), url("../img/stars.jpg");
		}
	#alpha .nnwIcon {
		background-image: url("../img/app-icon-512dark.png");
		}
	.bpxl {
		background-image: url("../img/bpxl2x.png");
		}
	.twitter {
		background-image: url("../img/twitter2x.png");
		}
	.adn {
		background-image: url("../img/adn2x.png");
		}	
	.nnwIcon {
		background-image: url("../img/app-icon-512.png");
		}
	.smallIcon {
		background-image: url("../img/app-icon-128.png");
		width: 64px !important;
		height: 64px !important;
		background-size: 64px 64px !important;
		}
	.zoom {
		background-image: url("../img/zoom2x.png");
		}
	.MacAppStore {
		background-image: url("../img/MAS2x.png");
		}
	#flipView #front:hover {
		background-image: url("../img/info2x.png");
		background-size: 24px 24px;
		}

	#flipView #back:hover {
		background-image: url("../img/close2x.png");
		background-size: 24px 24px;
		}
	}

/* DEVICES */

/* iPad both */

@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) {
	body {
		background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0b0f1f), color-stop(15%,#0b0f1f), color-stop(85%,#0b0f1f), color-stop(100%,#0b0f1f));
		}
	.zoom {
		opacity: 1;
		background: none;
		}
	#download input, #download .formButtons {
		position: relative;
		left: -1px;
		}
	#home .bottomBar, #home .version3 {
		display: none;
		}
	}

/* iPad landscape */

@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: landscape) {
	.outerWrap {
		width: 980px;
		}
	#flipView #back {
		width: 200px !important;
		}
	}

/* iPad portrait */

@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: portrait) {
	.outerWrap {
		width: 750px;
		margin: 0;
		}
	.secondary .outerWrap {
		margin: 50px 0;
		}
	.featuresWrap {
		background-position: 50% 5%, 50% 10% !important;
		}
	.main {
		flex-flow: row wrap;
		-webkit-flex-flow: row wrap;
		}
	.midColumn {
		-webkit-box-flex: 1 750px;      /* OLD - iOS 6-, Safari 3.1-6 */
		-moz-box-flex: 1 750px;         /* OLD - Firefox 19- */
		width: 750px;
		-webkit-flex: 1 750px;          /* Chrome */
		-ms-flex: 1 750px;              /* IE 10 */
		flex: 1 750px; 
		
		-webkit-box-ordinal-group: 1;   /* OLD - iOS 6-, Safari 3.1-6 */
		-moz-box-ordinal-group: 1;      /* OLD - Firefox 19- */
		-ms-flex-order: 1;              /* TWEENER - IE 10 */
		-webkit-order: 1;               /* NEW - Chrome */
		order: 1; 
		
		margin-bottom: 20px;
		}
	.leftColumn {
		-webkit-box-flex: 1 auto;      /* OLD - iOS 6-, Safari 3.1-6 */
		-moz-box-flex: 1 auto;         /* OLD - Firefox 19- */
		width: auto;
		-webkit-flex: 1 auto;          /* Chrome */
		-ms-flex: 1 auto;              /* IE 10 */
		flex: 1 auto;   
	
		-webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
		-moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
		-ms-flex-order: 2;              /* TWEENER - IE 10 */
		-webkit-order: 2;               /* NEW - Chrome */
		order: 2; 
		}
	.rightColumn {
		-webkit-box-flex: 1 auto;      /* OLD - iOS 6-, Safari 3.1-6 */
		-moz-box-flex: 1 auto;         /* OLD - Firefox 19- */
		width: auto;
		-webkit-flex: 1 auto;          /* Chrome */
		-ms-flex: 1 auto;              /* IE 10 */
		flex: 1 auto;   
	
		-webkit-box-ordinal-group: 3;   /* OLD - iOS 6-, Safari 3.1-6 */
		-moz-box-ordinal-group: 3;      /* OLD - Firefox 19- */
		-ms-flex-order: 3;              /* TWEENER - IE 10 */
		-webkit-order: 3;               /* NEW - Chrome */
		order: 3; 
		}
	#support .outerWrap, #changes .outerWrap {
		width: 726px;
		padding: 0 20px;
		}
	#support #right {
		padding-left: 30px;
		}
	.midColumn p:not(#flipView p) {
		width: 300px;
		font-size: 14px;
		}
	#flipView #back {
		width: 200px !important;
		}
	#download .bottomBar {
		margin-top: -100px;	
		margin-bottom: 200px;
		}
	/*.tagline, .midColumn p:not(#flipView p), .bottomBar, .footer {
		position: relative;
		top: 100px;
		}*/
	.featuresWrap {
		background-position: 50% 40px, 50% 50%;
		padding-top: 30px;
		}
	.leftColumn .featureBox {
		margin-right: 10px;
		}
	.rightColumn .featureBox {
		margin-left: 10px;
		}
	.feature1, .feature3 {
		left: 0;
		}
	.feature4, .feature6 {
		left: 0;
		}
	}
	
/* iPhone both */	

@media only screen 
and (device-width: 320px)  {
	body {
		padding: 0 !important;
		background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0b0f1f), color-stop(15%,#0b0f1f), color-stop(85%,#0b0f1f), color-stop(100%,#0b0f1f));
		}
	.outerWrap {
		margin: 0 auto !important;
		padding: 0 5px !important;
		}
	.content, .message {
		width: auto !important;
		margin: 40px auto !important;
		padding: 10px 15px 20px 15px !important;
		-webkit-text-size-adjust: none;
		}
	#home .midColumn {
		pointer-events: none;
		}
	#support #faq, #support #right {
		-webkit-box-flex: 1 0 100%;      /* OLD - iOS 6-, Safari 3.1-6 */
		-moz-box-flex: 1 0 100%;         /* OLD - Firefox 19- */
		width: 100%; 
		-webkit-flex: 1 0 100%;          /* Chrome */
		-ms-flex: 1 0 100%;              /* IE 10 */
		flex: 1 0 100%;  
		padding: 0;
		}
	#changes .content {
		margin-top: 10px !important;
		}
	#changes .content h2, #changes .content h2 span {
		font-size: 18px;
		}
	.featuresWrap {
		background-size: 300px auto, 750px 470px;
		background-position: 50% 40px, 50% 0;
		}
	.topNav {
		margin-top: 10px;
		}
	.secondary .topNav {
		margin-top: 30px;
		}
	.main {
		-webkit-flex-direction: column;
		-moz-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		}
	.midColumn {
		-webkit-box-flex: 4;      /* OLD - iOS 6-, Safari 3.1-6 */
		-moz-box-flex: 4;         /* OLD - Firefox 19- */
		width: 40%;
		-webkit-flex: 4;          /* Chrome */
		-ms-flex: 4;              /* IE 10 */
		flex: 4;   
		
		-webkit-box-ordinal-group: 1;   /* OLD - iOS 6-, Safari 3.1-6 */
		-moz-box-ordinal-group: 1;      /* OLD - Firefox 19- */
		-ms-flex-order: 1;              /* TWEENER - IE 10 */
		-webkit-order: 1;               /* NEW - Chrome */
		order: 1; 
		
		width: 100%;
		margin-top: 20px;
		padding-top: 35px;
		}
	.leftColumn, .rightColumn {
		-webkit-box-flex: 3;      /* OLD - iOS 6-, Safari 3.1-6 */
		-moz-box-flex: 3;         /* OLD - Firefox 19- */
		width: 30%;
		-webkit-flex: 3;          /* Chrome */
		-ms-flex: 3;              /* IE 10 */
		flex: 3;   

		width: 100%;
		}
	.leftColumn, .rightColumn {
		-webkit-box-ordinal-group: 3;   /* OLD - iOS 6-, Safari 3.1-6 */
		-moz-box-ordinal-group: 3;      /* OLD - Firefox 19- */
		-ms-flex-order: 3;              /* TWEENER - IE 10 */
		-webkit-order: 3;               /* NEW - Chrome */
		order: 3; 
		}
	.rightColumn .feature {
		-webkit-flex-direction: row;
		-moz-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;  
		}
	.feature1, .feature3, .feature4, .feature6 {
		position: static;
		left: 0;
		}
	.nnwIcon {
		margin: 0 auto;
		}
	.smallIcon {
		margin-top: -32px !important;
		}
	.midColumn h2 {
		margin-top: 0;
		}
	.midColumn p {
		width: 270px !important;
		margin: 0 auto;
		}
	.nnwIcon {
		width: 200px;
		height: 200px;
		background-size: 200px 200px;
		}
	#flipView .back {
		display: none;
		}
	.bottomBar {
		margin-bottom: 10px;
		-webkit-justify-content: space-between;
		-moz-justify-content: space-between;
		-ms-justify-content: space-between;
		justify-content: space-between; 
		}
	.leftColumn .featureBox, .rightColumn .featureBox {
		margin: 10px;
		}
	.zoom {
		width: 300px;
		margin: -54px -150px;
		opacity: 1;
		background: none;
		}
	#download input {
		margin-top: -50px;
		}
	.shootingStar {
		display: none !important;
		}
	#home .bottomBar, #home .version3 {
		display: none;
		}
	}
	
/* iPhone portrait */
	
@media only screen 
and (device-width: 320px)
and (orientation: portrait) {
	.outerWrap {
		width: 310px !important;
		}
	.bottomBar a {
		-webkit-box-flex: 0 150px;      /* OLD - iOS 6-, Safari 3.1-6 */
		-moz-box-flex: 0 150px;         /* OLD - Firefox 19- */
		width: 150px;
		-webkit-flex: 0 150px;          /* Chrome */
		-ms-flex: 0 150px;              /* IE 10 */
		flex: 0 150px;   
	
		margin: 0 5px; 
		}
	.secondary .bpxl {
		display: none;
		}
	#download input {
		width: 290px;
		margin-left: -5px;
		}
	#download .formButtons {
		width: 290px;
		}
	#download .formRight button {
		font-size: 14px;
		padding: 0 0.5em;
		}
	}
	
/* iPhone landscape */

@media only screen
and (device-width: 320px)
and (orientation: landscape) {
	.outerWrap {
		width: 90% !important;
	}
	.bottomBar {
		width: 360px;
		margin-left: auto;
		margin-right: auto;
		}
	.bottomBar a {
		-webkit-box-flex: 0 165px;      /* OLD - iOS 6-, Safari 3.1-6 */
		-moz-box-flex: 0 165px;         /* OLD - Firefox 19- */
		width: 165px;
		-webkit-flex: 0 165px;          /* Chrome */
		-ms-flex: 0 165px;              /* IE 10 */
		flex: 0 165px;   
	
		margin: 0 10px; 
		}
	.footer .copyright {
		font-size: 6pt !important;
		}
	.row {
		display: inline-block;
		width: 320px;
		clear: both;
		margin: 0 auto;
		}
	#download input {
		width: 400px;
		}
	#download .formButtons {
		width: 400;
		margin: -5px auto 50px auto;
		}	
	#download .formRight button {
		position: relative;
		left: 4px;
		}
	}
	
/* iPhone 4 landscape */
	
@media only screen
and (device-height: 480px)
and (orientation: landscape) {
	body, .outerWrap {
		width: 470px;
		}
	}