/*
	Based on the Strata by HTML5 UP template - html5up.net
*/

/* Reset */

	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}

	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
		display: block;
	}

	body {
		line-height: 1;
	}

	ol, ul {
		list-style: none;
	}

	blockquote, q {
		quotes: none;
	}

	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

	body {
		-webkit-text-size-adjust: none;
	}

/* Basic */

	html {
		height: 100%;
	}
	
	body {
		background: #fff;
		margin: 0;
		height: 100%;
	}

	body, input, select, textarea {
		color: #000;
		font-family: "Avenir Next", Avenir, "Muli", Helvetica, Arial, sans-serif;
		font-size: 18pt;
		font-weight: 300; /* default is 400 */
		line-height: 1.55em;
	}
	
	a {
		text-decoration: none;
	}
	
	a:link {
		color: #FF9A01;
	}
	
	a:visited {
		color: #E7AB4C;
	}
	
	a:hover {
		color: #FFC200;
	}
	
/* Hero, Screenshots */
	
	#island {
		height:610px;
		width: 100%;
		text-align: center;
		overflow: hidden;
	}
	
	#header_hype_container {
		position: relative;
		margin: auto;
		height: 100%;
		width: 100%;
	}
	
	.container {
		position: relative;
		background: rgb(43, 78, 108);
		width: 100%;
		overflow: hidden;		
	}
	
	#container-hero {
		height: 1120px;
	}
	
	.screenshot {
		position: absolute;
		width: 100%;
		height: 100%;
	}
	
	.shadow {
		pointer-events: none;
		height: 100%;
		width: 150%;
		position: absolute;
		left: -25%;
		-moz-box-shadow: inset 0 0 16px 4px rgba(0, 0, 0, 0.30);
		-webkit-box-shadow: inset 0 0 16px 4px rgba(0, 0, 0, 0.30);
		box-shadow: inset 0 0 16px 4px rgba(0, 0, 0, 0.30);
	}
	
	.pencil-tip {
		position: absolute;
		width: 1894px;
		height: 1858px;
	}	
	
	.pencil-tip img {
		height: 100%;
	}
	
	#pencil-hero {
		top: -500px;
		right: -1100px;
	    -ms-transform: scale(0.8, 0.8);
	    -moz-transform: scale(0.8, 0.8);
	    -webkit-transform: scale(0.8, 0.8);
	    transform: scale(0.8, 0.8);
	}
	
	.hero-title {
		margin-top: 2em;
		margin-left: 2em;
		margin-right: 2em;
		color: #fff;
		font-size: 22pt;
		font-weight: 500; /* default is 400 */
		text-align: center;
	}
	
	.hero {
		margin-top: 0.6em;	
		text-align: center;
	}
	
	.hero img {
		height: 650px;
	}
	
	.hero-caption {
		position: relative;
		margin-bottom: 2em;
		color: #fff;
		font-weight: 400;
		text-align: center;
		width: 60%;
		left: 20%;
		line-height: 1.1em;
	}
	
	.hero-summary {
		font-size: 17pt;
	}
	
	.hero-byline1 {
		display: inline-block;
		margin-top: 1.8em;
		font-size: 13pt;
		width: 80%;
	}
	
	.hero-byline2 {
		display: inline-block;
		margin-top: 1.6em;
		font-size: 11pt;
		font-weight: 400;
	}
	
	.hero-video {
		display: inline-block;
		margin-top: 1.6em;
		font-weight: 600;
		font-size: 13pt;
		width: 80%;
		height: 30px;
		/* color: rgb(255, 154, 1); */
	}
	
	.hero-video img {
  	  	width: 30px;
	  	height: 30px;
		vertical-align: middle;
		margin: 5px;
	}
	
	/* The switch - the box around the slider */
	#switch {
	  	position: relative;
	 	display: inline-block;
	 	width: 65px;
	 	height: 20px;
	}
	
	#switch img {
  	  	width: 65px;
	  	height: 20px;
	}
	
/* Get it */

	.get-it {
		width: 100%;
		position: relative;
		text-align: center;
		overflow: hidden;
		color: rgba(0, 0, 0, 0.55);
		background-color: white;
		padding-top: 1.5em;
		padding-bottom: 1.5em;
	}
	
	.getit-download-buttons {
		margin: 0 auto;
	}
	
	.download-button {
		display: inline-block;
		padding: 9px; 
		background-color: rgb(255, 154, 1); 
		border-bottom-left-radius: 6px; 
		border-bottom-right-radius: 6px; 
		border-top-left-radius: 6px; 
		border-top-right-radius: 6px; 
		word-wrap: break-word; 
		font-size: 15px; 
		text-align: center; 
		font-weight: normal;
		color: rgb(255, 255, 255); 
		overflow: visible; 
		width: 122px; 
		height: 28px; 
		line-height: 15px;
		cursor: pointer; 
		-webkit-user-select: none; 
		vertical-align: top;
		margin: 10px;
	}
	
	.download-button .byline{
		font-size: 12px; 
	}
	
	.download-button:hover {
		background-color: #FFAA01; 
	}
	
	.appstore-button {
		display: inline-block;
		height: 28px;
		vertical-align: top;
		margin: 1em;
	}
	
	.macappstore-button {
		display: inline-block;
		height: 28px;
		vertical-align: top;
		margin: 1em;
	}
	
	.getit-description1 {
		padding-left: 1em;
		padding-right: 1em;
		margin-top: 0;
		font-size: 11pt;
		font-weight: 400;
		line-height: 1.6;
	}
	
	.getit-description2 {
		padding-left: 1em;
		padding-right: 1em;
		margin-top: 2em;
		font-size: 11pt;
		font-weight: 400;
		line-height: 1.6;
	}
	
	.getit-availability1, .getit-availability2 {
		padding-top: 1.2em;
		padding-left: 1em;
		padding-right: 1em;
		font-size: 8pt;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.4);
		line-height: 1.6;
	}

	
/* Features */
	
	.feature {
		margin-top: 2.5em;
		margin-bottom: 3.5em;
		position: relative;
		background: white;
		width: 100%;
		overflow: hidden;	
		text-align: center;	
		color: black;
	}
		
	.feature-icon {
		margin-bottom: -0.2em;
	    -ms-transform: scale(0.5, 0.5);
	    -moz-transform: scale(0.5, 0.5);
	    -webkit-transform: scale(0.5, 0.5);
	    transform: scale(0.5, 0.5);	
	}	
	
	.feature-title {
		font-size: 22pt;
		font-weight: 600; /* default is 400 */
		margin-bottom: 0.8em;
		margin-left: 2em;
		margin-right: 2em;
	}
	
	.feature-description {
		margin-top: 1em;
		font-size: 13pt;
		font-weight: 400;
		line-height: 1.8em;
	}
	
	.feature-column1 {
		display: inline-block;
		text-align: left;
		vertical-align: top;
		width: 33%;
		margin-right: 1.2em;
	}
	
	.feature-column2 {
		display: inline-block;
		text-align: left;
		vertical-align: top;
		width: 33%;
		margin-left: 1.2em;
	}	
	
	.slide img {
		width: auto;
		margin: 0 auto; /* it centers any block level element */
	}
	
	.feature-screenshot img {
		padding-top: 5%;
		height: 600px;
	}
	
	#container-feature1, #container-feature2, #container-feature3, #container-feature4, #container-feature5, #container-feature6 {
		height: 700px;
	}
	
	#pencil-feature1 {
		top: -1000px;
		left: -550px;
	    -ms-transform: rotate(90deg);
	    -moz-transform: rotate(90deg);
	    -webkit-transform: rotate(90deg);
	    transform: rotate(90deg);
	}
	
	#pencil-feature2 {
		top: -900px;
		left: -700px;
	    -ms-transform: scale(0.8, 0.8);
	    -moz-transform: scale(0.8, 0.8);
	    -webkit-transform: scale(0.8, 0.8);
	    transform: scale(0.8, 0.8);
	}
	
	#pencil-feature3 {
		top: -750px;
		right: -600px;
	    -ms-transform: rotate(210deg) scale(0.6, 0.6);
	    -moz-transform: rotate(210deg) scale(0.6, 0.6);
	    -webkit-transform: rotate(210deg) scale(0.6, 0.6);
	    transform: rotate(210deg) scale(0.6, 0.6);
	}
	
	#pencil-feature4 {
		top: -650px;
		right: -400px;
	    -ms-transform: rotate(20deg) scale(0.8, 0.8);
	    -moz-transform: rotate(20deg) scale(0.8, 0.8);
	    -webkit-transform: rotate(20deg) scale(0.8, 0.8);
	    transform: rotate(20deg) scale(0.8, 0.8);
	}
	
	#pencil-feature5 {
		top: -750px;
		right: -600px;
	    -ms-transform: rotate(210deg) scale(0.6, 0.6);
	    -moz-transform: rotate(210deg) scale(0.6, 0.6);
	    -webkit-transform: rotate(210deg) scale(0.6, 0.6);
	    transform: rotate(210deg) scale(0.6, 0.6);
	}
	
	#pencil-feature6 {
		top: -900px;
		left: -700px;
	    -ms-transform: scale(0.8, 0.8);
	    -moz-transform: scale(0.8, 0.8);
	    -webkit-transform: scale(0.8, 0.8);
	    transform: scale(0.8, 0.8);
	}
	
/* Call to Action */
	
	.banner {
		position: relative;
		background: rgb(223, 227, 232);
		width: 100%;
		height: 286px;
		overflow: hidden;	
		text-align: center;	
		vertical-align: top;
	}
	
	.ada img {
		width: 592px;
		height: 286px;
	}
		
	.island img {
		width: 409px;
		height: 228px;
	}
	
	.call-to-action {
		position: relative;
		margin-top: 2em;
		width: 100%;
		overflow: hidden;	
		text-align: center;	
		color: rgba(0, 0, 0, 0.7);
	}
	
	.logo {
		display: inline-block;
		width: 195px;
		height: 40px;
	}
	
	.logo img {
		width: 195px;
		height: 40px;
	}
	
	.cta-description1 {
		padding-left: 1em;
		padding-right: 1em;
		font-size: 11pt;
		font-weight: 400;
		line-height: 1.6;
	}
	
	.cta-description2 {
		padding-left: 1em;
		padding-right: 1em;
		margin-top: 1em;
		margin-bottom: 0em;
		font-size: 11pt;
		font-weight: 400;
		line-height: 1.6;
	}
	
	.cta-availability1, .cta-availability2 {
		padding-top: 0em;
		padding-bottom: 2em;
		padding-left: 1em;
		padding-right: 1em;
		font-size: 8pt;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.4);
	}
	
	.cta-download-buttons {
		margin: 0 auto;	
	}
	/*
	
	.cta-download-button4 {
	    -webkit-box-ordinal-group: 4;
	    -moz-box-ordinal-group: 4;
	    box-ordinal-group: 4;
		margin-bottom: 2.5em;
	}*/
	
	.call-to-action .download-button {
		width: 140px; 
		height: 26px; 
		line-height: 14px;
	}
	
	.cta-separator {
		display: relative;
		height: 1px;
		width: 250px;
		margin: 0 auto;
		margin-top: 0.4em;
		margin-bottom: 0.4em;
		background-color: rgba(0, 0, 0, 0.15);
	}
	
	.editorschoice img {
		width: 100px;
		height: 36px;
		opacity: 0.8;
		margin-top: 0.5em;
		margin-bottom: 1em;
	}

	
/* Menu */

	.menu {
		position: absolute;
		background-color: #fff;
		background-color: rgba(255, 255, 255, 0.95);
		width: 190px;
		top: 10px;
		right: 14px;
		overflow: hidden;	
		padding: 10px; 
		border-style: solid;
		border-bottom-left-radius: 6px; 
		border-bottom-right-radius: 6px; 
		border-top-left-radius: 6px; 
		border-top-right-radius: 6px; 
		border-color: rgba(0, 0, 0, 0.2);
		border-width: 1px;
		font-size: 16px; 
		text-align: left;	
		font-weight: normal;
		color: #FF9A01;
		z-index: 1000;
		line-height: 30px; 
		/* Hide initially */
		display: none;
		opacity: 0.0;
	}

	.closebox {
		position: absolute;
		top: 6px;
		right: 16px;
	}
	
	.closebox img {
		width: 12px;
		height: 12px;
	}

	.menu-items {
		padding-top: 1.8em;
		padding-bottom: 1em;
	}
	
	.menu-item {
		display: inline-block;
		margin-left: 1.5em;
		padding-top: 0.5em;
		padding-bottom: 0.5em;
		border-bottom-style: solid;
		border-width: 1px;
		border-color: #ccc;
		width: 70%;
	}
	
	.menu-item:last-child {
		border-bottom-style: none;
	}
	
	.menu-item a:link {
		color: black;
	}
	
	.menu-item a:hover {
		color: #FF9A01;
	}
	
	.menu-item a:visited {
		color: #777;
	}
	
/* Whatsnew */
	
	.whatsnew {
		position: absolute;
		background-color: #fff;
		background-color: rgba(255, 255, 255, 0.95);
		width: 80%;
	    height: 540px;
		
		top:20px;
		left:50%;
	    margin-left: -42%;
		
		overflow: hidden;	
		padding: 10px; 
		border-style: solid;
		border-bottom-left-radius: 6px; 
		border-bottom-right-radius: 6px; 
		border-top-left-radius: 6px; 
		border-top-right-radius: 6px; 
		border-color: rgba(0, 0, 0, 0.2);
		border-width: 1px;
		font-size: 16px; 
		text-align: left;	
		font-weight: normal;
		color: #FF9A01;
		z-index: 999;
		line-height: 30px; 
		/* Hide initially */
		display: none;
		opacity: 0.0;
	}
	
	.ytvideo {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	}
	
/* In Action Moview */
	
	.inaction {
		position: absolute;
		background-color: #fff;
		background-color: rgba(255, 255, 255, 0.95);
		width: 80%;
	    height: 540px;
	
		top:15%;
		left:50%;
	    margin-left: -42%;
	
		overflow: hidden;	
		padding: 10px; 
		border-style: solid;
		border-bottom-left-radius: 6px; 
		border-bottom-right-radius: 6px; 
		border-top-left-radius: 6px; 
		border-top-right-radius: 6px; 
		border-color: rgba(0, 0, 0, 0.2);
		border-width: 1px;
		font-size: 16px; 
		text-align: left;	
		font-weight: normal;
		color: #FF9A01;
		z-index: 999;
		line-height: 30px; 
		/* Hide initially */
		display: none;
		opacity: 0.0;
	}
	
/* Footer */
	
	.footer {
		position: relative;
		background: rgb(210, 225, 219);
		width: 100%;
		overflow: hidden;	
		text-align: center;	
		color: black;
	}
	
	.navigation {
		position: relative;
		font-size: 11pt;
		font-weight: 500;
		z-level: 10;		
	}
	
	.navigation-item {
		display: inline-block;
		padding: 2em;
		padding-bottom: 1em;
	}
	
	.navigation-item a:link {
		color: black;
	}
	
	.navigation-item a:hover {
		color: #FF9A01;
	}
	
	.navigation-item a:visited {
		color: #777;
	}
	
	.navigation .social {
		left: 57%;
	}

	.copyright {
		padding-left: 2em;
		padding-right: 2em;
		font-size: 8pt;
		line-height: 1.4em;
	}
	
	.copyright-apple {
		margin-top: 0.8em;
		margin-bottom: 5em;
		font-size: 7pt;
		line-height: 1.4em;
		padding-left: 2em;
		padding-right: 2em;
	}

	#footer-shadow {
		height: 150%;
		top: 0;
	}
	
	.social {
		position: relative;
		top: 6px;
		left: 50%;
		margin-left: -50%;
		width: 23px;
		height: 23px;
		opacity: 0.8;
	}
	
	.social img {
		width: 23px;
		height: 23px;
	}
	
/* Responsiveness */
	
	/* Below 1024px the animation starts to scale down, we then move to the next level */
	@media screen and (max-width: 1024px) {
		
		#island {
			height: 570px;
		}
		
		.hero img {
			height: 600px;
		}
		
		#container-hero {
			height: 1070px;
		}
		
		#pencil-hero {
			top: -600px;
			right: -1250px;
		}
		
		#container-feature1, #container-feature2, #container-feature3, #container-feature4, #container-feature5, #container-feature6 {
			height: 600px;
		}
		
		.feature-screenshot img {
			height: 500px;
		}
		
		#pencil-feature1 {
			top: -1000px;
			left: -800px;
		    -ms-transform: rotate(90deg) scale(0.8, 0.8);
		    -moz-transform: rotate(90deg) scale(0.8, 0.8);
		    -webkit-transform: rotate(90deg) scale(0.8, 0.8);
		    transform: rotate(90deg)scale(0.8, 0.8);
		}
	
		#pencil-feature2 {
			top: -950px;
			left: -1000px;
		}
	
		#pencil-feature3 {
			top: -850px;
			right: -800px;
		    -ms-transform: rotate(210deg) scale(0.5, 0.5);
		    -moz-transform: rotate(210deg) scale(0.5, 0.5);
		    -webkit-transform: rotate(210deg) scale(0.5, 0.5);
		    transform: rotate(210deg) scale(0.5, 0.5);
		}
		
		#pencil-feature4 {
			top: -850px;
			right: -400px;
		}
	
		#pencil-feature5 {
			top: -850px;
			right: -800px;
		    -ms-transform: rotate(210deg) scale(0.5, 0.5);
		    -moz-transform: rotate(210deg) scale(0.5, 0.5);
		    -webkit-transform: rotate(210deg) scale(0.5, 0.5);
		    transform: rotate(210deg) scale(0.5, 0.5);
		}
		
		#pencil-feature6 {
			top: -950px;
			left: -1000px;
		}
		
		.slick-dots {
		    bottom: 0px;
		}
		
		.whatsnew, .inaction{
		    height: 480px;
		}
	}

	@media screen and (max-width: 900px) {

		#island {
			height: 508px;
		}
		
		.hero img {
			height: 500px;
		}
		
		#container-hero {
			height: 960px;
		}
		
		#container-feature1, #container-feature2, #container-feature3, #container-feature4, #container-feature5, #container-feature6 {
			height: 500px;
		}
		
		.feature-screenshot img {
			height: 420px;
		}
		
		.slick-dots {
		    bottom: -5px;
		}
		
		.whatsnew, .inaction {
		    height: 400px;
		}
	}

	@media screen and (max-width: 800px) {

		#island {
			height: 508px;
		}
		
		#container-hero {
			height: 1050px;
		}
		
		.slick-dots {
		    bottom: -10px;
		}
		
		.whatsnew, .inaction {
		    height: 480px;
		}
	}
	
	@media screen and (max-width: 700px) {

		#island {
			height: 430px;
		}
		
		#container-hero {
			height: 850px;
		}
		
		.hero img {
			height: 400px;
		}
		
		.hero-caption {
			width: 90%;
			left: 5%;
		}
		
		#pencil-hero {
			top: -800px;
			right: -1250px;
		}
		
		#container-feature1, #container-feature2, #container-feature3, #container-feature4, #container-feature5, #container-feature6 {
			height: 400px;
		}
		
		.feature-screenshot img {
			height: 320px;
		}
		
		.navigation {
			padding-top: 2em;
			padding-bottom: 2em;
		}
		
		.navigation-item {
			width: 100%;
			padding: 0;
			text-align:center;
		}
		
		.navigation .social {
			margin: 0;
			padding: 0;
			left: 50%;
			margin-left: -11px;
		}
		
		.feature-column1 {
			width: 70%;
			margin-right:0;
		}
	
		.feature-column2 {
			text-align: left;
			width: 70%;
			margin-left: 0;
			margin-top: 1em;
		}	
		
		#pencil-feature1 {
			top: -1000px;
			left: -880px;
		    -ms-transform: rotate(90deg) scale(0.8, 0.8);
		    -moz-transform: rotate(90deg) scale(0.8, 0.8);
		    -webkit-transform: rotate(90deg) scale(0.8, 0.8);
		    transform: rotate(90deg)scale(0.8, 0.8);
		}
	
		#pencil-feature2 {
			top: -950px;
			left: -1000px;
		}
	
		#pencil-feature3 {
			top: -950px;
			right: -800px;
		    -ms-transform: rotate(210deg) scale(0.5, 0.5);
		    -moz-transform: rotate(210deg) scale(0.5, 0.5);
		    -webkit-transform: rotate(210deg) scale(0.5, 0.5);
		    transform: rotate(210deg) scale(0.5, 0.5);
		}
		
		#pencil-feature4 {
			top: -850px;
			right: -400px;
		    -ms-transform: rotate(20deg) scale(0.6, 0.6);
		    -moz-transform: rotate(20deg) scale(0.6, 0.6);
		    -webkit-transform: rotate(20deg) scale(0.6, 0.6);
		    transform: rotate(20deg) scale(0.6, 0.6);
		}
	
		#pencil-feature5 {
			top: -950px;
			right: -800px;
		    -ms-transform: rotate(210deg) scale(0.5, 0.5);
		    -moz-transform: rotate(210deg) scale(0.5, 0.5);
		    -webkit-transform: rotate(210deg) scale(0.5, 0.5);
		    transform: rotate(210deg) scale(0.5, 0.5);
		}
		
		#pencil-feature6 {
			top: -950px;
			left: -1000px;
		}
			
		.getit-description1, .getit-description2, .getit-availability1, .getit-availability2, .cta-description1, .cta-description2, .cta-availability1, .cta-availability2 {
			padding-left: 1.5em;
			padding-right: 1.5em;
		}
	}
	
	@media screen and (max-width: 600px) {

		#island {
			height: 360px;
		}
		
		#container-hero {
			height: 880px;
		}
		
		.hero img {
			height: 320px;
		}
		
		#pencil-hero {
			top: -700px;
			right: -1200px;
		    -ms-transform: scale(0.6, 0.6);
		    -moz-transform: scale(0.6, 0.6);
		    -webkit-transform: scale(0.6, 0.6);
		    transform: scale(0.6, 0.6);
		}
		
		#container-feature1, #container-feature2, #container-feature3, #container-feature4, #container-feature5, #container-feature6 {
			height: 320px;
		}
		
		.feature-screenshot img {
			height: 260px;
		}
		
		#pencil-feature1 {
			top: -950px;
			left: -850px;
		    -ms-transform: rotate(90deg) scale(0.6, 0.6);
		    -moz-transform: rotate(90deg) scale(0.6, 0.6);
		    -webkit-transform: rotate(90deg) scale(0.6, 0.6);
		    transform: rotate(90deg)scale(0.6, 0.6);
		}
	
		#pencil-feature2 {
			top: -950px;
			left: -900px;
		    -ms-transform: scale(0.5, 0.5);
		    -moz-transform: scale(0.5, 0.5);
		    -webkit-transform: scale(0.5, 0.5);
		    transform: scale(0.5, 0.5);
		}
	
		#pencil-feature3 {
			top: -850px;
			right: -800px;
		    -ms-transform: rotate(210deg) scale(0.3, 0.3);
		    -moz-transform: rotate(210deg) scale(0.3, 0.3);
		    -webkit-transform: rotate(210deg) scale(0.3, 0.3);
		    transform: rotate(210deg) scale(0.3, 0.3);
		}
		
		#pencil-feature4 {
			top: -850px;
			right: -500px;
		    -ms-transform: rotate(20deg) scale(0.3, 0.3);
		    -moz-transform: rotate(20deg) scale(0.3, 0.3);
		    -webkit-transform: rotate(20deg) scale(0.3, 0.3);
		    transform: rotate(20deg) scale(0.3, 0.3);
		}
	
		#pencil-feature5 {
			top: -850px;
			right: -800px;
		    -ms-transform: rotate(210deg) scale(0.3, 0.3);
		    -moz-transform: rotate(210deg) scale(0.3, 0.3);
		    -webkit-transform: rotate(210deg) scale(0.3, 0.3);
		    transform: rotate(210deg) scale(0.3, 0.3);
		}
		
		#pencil-feature6 {
			top: -950px;
			left: -900px;
		    -ms-transform: scale(0.5, 0.5);
		    -moz-transform: scale(0.5, 0.5);
		    -webkit-transform: scale(0.5, 0.5);
		    transform: scale(0.5, 0.5);
		}
		
		.banner {
			width: 100%;
			height: auto;
		}
		
		.banner img {
			width: 100%;
			height: auto;
			margin-bottom: -10px;
		}
	}
	
	/* iPhone 8 plus @ 414px */
	@media screen and (max-width: 500px) {

		#island {
			height: 360px;
		}
		
		#header_hype_container {
			padding-top: 70px
		}
		
		.hero img {
			height: 270px;
		}
		
		#container-hero {
			height: 850px;
		}
		
		#pencil-hero {
			top: -600px;
			right: -1250px;
		}
		
		#container-feature1, #container-feature2, #container-feature3, #container-feature4, #container-feature5, #container-feature6 {
			height: 300px;
		}
		
		.feature-screenshot img {
			height: 240px;
		}
		
		#pencil-feature1 {
			top: -1050px;
			left: -850px;
		}
	
		#pencil-feature2 {
			top: -1000px;
			left: -1000px;
		}
	
		#pencil-feature3 {
			top: -850px;
			right: -800px;
		}
		
		#pencil-feature4 {
			top: -800px;
			right: -700px;
		}
	
		#pencil-feature5 {
			top: -850px;
			right: -800px;
		}
		
		#pencil-feature6 {
			top: -750px;
			right: -600px;
		}
	}
	
	/* iPhone 8 @ 375px */
	@media screen and (max-width: 400px) {

		#island {
			height: 310px;
		}
		
		#container-hero {
			height: 800px;
		}
		
		.hero img {
			height: 230px;
		}
		
		#container-feature1, #container-feature2, #container-feature3, #container-feature4, #container-feature5, #container-feature6 {
			height: 250px;
		}
		
		.feature-screenshot img {
			height: 200px;
		}
		
		.getit-availability1, .getit-availability2 {
			margin-top: 2em;
		}
		
		.whatsnew {
		    height: 480px;
			
		}
		

	}
	
	/* iPhone 5S @ 320px */
	@media screen and (max-width: 350px) {

		#island {
			height: 280px;
		}

		#container-hero {
			height: 880px;
		}

		.hero img {
			height: 220px;
		}
		
	}