/* #Media Queries
================================================== */

	/* RETINA DISPLAYS - BACKGROUND IMAGE REPLACE */
	@media only screen and (-webkit-min-device-pixel-ratio: 2) {
		#menuBtn {
		  background-image: url('../images/menuBtn@2x.png');
		  background-size: 36px 36px;
		}
		.heroHeading {
			background-image: url("../images/eCart@2x.png");
			background-size: 310px 177px;
		}
		.parallaxHeader {
			background-image: url("../images/lightbulb@2x.png");
			background-size: 120px 148px;
		}
	}

	/* WEBKIT ONLY BROWSERS WITH RETINA */
	@media screen and (-webkit-min-device-pixel-ratio: 0) {

	}

	/* Smaller than 1300 */
	@media only screen and (max-width: 1299px) {
		.parallaxHeader {
			width: 1200px;
		}
		.heroHeading {
			margin-left: 0;
		}
		.iconContent img {
		  width: 380px;
		  height: auto;
		}
	}

	/* Smaller than 1200 */
	@media only screen and (max-width: 1199px) {
		.parList li {
		    font-size: 22px;
		    padding-top: 25px;
		    margin-bottom: 8px;
		}

		.ipad > img {
		    width: 460px;
		}

		.ipadScreenImage {
			width: 460px;
			height: 290px;
		}

		.parallaxHeader h4 {
		    font-size: 32px;
		}

		.heroContent h2, .heroContent h1 {
		    font-size: 73px;
		    line-height: 75px;

		}
		.heroContent img {
			width: 180px;
			height: auto;
		}
		.heroContent {
		    width: 903px;
		}

		.iconContent img {
			width: 300px;
		}

		.parallaxHeader {
			width: 1099px;
		}

		.hero3 {
		    background-position: -380px 0;
		}
		.parallaxHeader {
			width: 960px;
		}
		.iconContent {
			padding: 0 10px;
		}
		.hero2Content {
			margin-right: 10px;	
		}
		.mastheadContainer {
		  width: 960px;
		 }
		.iconContent img {
		  width: 280px;
		  height: auto;
		}
	}

	/* TABLET LANDSCAPE */
	@media only screen and (max-width: 1024px) {
		.parList li {
			opacity: 1;
		}
		.dots {
			display: none;
		}
	}

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {

		.heroContent {
		    margin: 240px auto 0;
		    width: 703px;
		}

		.heroContent img {
		    width: 150px;
		}

		.heroContent h2, .heroContent h1 {
		    font-size: 62px;
		    line-height: 60px;
		}

		.iconContent img {
		    width: 236px;
		}

		.parList {
		    margin-top: 32px;
		}

		.parList li {
		    font-size: 18px;
		    padding-top: 13px;
		}

		.ipad > img {
		    width: 364px;
		}

		.ipadScreenImage {
			width: 364px;
			height: 240px;
		}

		.parallaxSection {
		    padding-bottom: 42px;
		}

		.iphone {
			background-position: center center;
		}

		.iconContent {
			padding: 0 10px;
		}
		.stripeContent {
			margin-right: 10px;
		}
		.stripeContent.left {

			margin-right: 5px;
			padding-right: 25px;

		}
		.heroHeading {
			background-position: center top;
		}
		.heroContent h2, .heroContent h1 {
			float: none;
			text-align: center;
			padding-left: 0;
			padding-top: 188px;
		}
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		.parallaxHeader {
			width: 768px;
		}
		.parallaxHeader h4 {
			padding-right: 22px;
		}
		.iconContent img {
		  width: 216px;
		  height: auto;
		}
		.iconContent p {
			font-size: 21px;
		}
		.parList li {
			font-size: 17px;
		}
		.mastheadContainer {
		  width: 768px;
		 }
		 .footnotes p {
		 	padding: 0 80px;
		 }
		 .parallaxHeader {
		 	background-position: 15px 10px;
		 }
		 .parallaxHeader h4 {
		 	padding-left: 155px;
		 }
		 .stripeContent {
		 	width: auto;
		 	margin-top: 50px;
		 }

		 .stripeContent.right {
		 	margin-left: 0;
		 	width: auto;
		 }

		 .stripeContent p {
		 	width: auto;
		 }
	}

	/* WEBKIT ONLY BROWSERS - Tablet Portrait to Standard 960 */
	@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 768px) and (max-width: 959px)  {

	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {

		.ipad > img {
		    width: 364px;
		}

		.iconContent p {
		    margin-top: 0;
		}

		.mhButtonContainer {
		    display: block;
		    float: none;
		    margin: 0 auto;
		    width: 400px;
		}

		.masthead .cta.teal {
		  margin-left: 0;
		  margin-right: 15px;
		}

		.masthead .nav {
		  float: right;
		  display: block;
		  margin: 0;
		  border-top: 1px solid #597199;
		}

		.logoContainer {
		    display: block;
		    float: left;
		    height: 48px;
		    margin: 22px auto 0;
		    width: 185px;
		}

		.nav a {
		  padding: 12px 32px;
		}

		.nav a.rightSide {
			padding-right: 0;
		}

		.divider {
		    background-color: #fff;
		    float: right;
		    height: 20px;
		    margin-top: 11px;
		    width: 1px;
		}

		.heroContent {
			margin: 200px auto 0;
		    width: auto;
		}

		.heroContent h2, .heroContent h1 {
		    float: none;
		    font-size: 80px;
		    text-align: center;
		}

		.heroContent img {
		    float: none;
		    margin: 0 auto 20px;
		    width: 194px;
		}

		.iconContent img {
		    margin: 0 auto;
		    width: 380px;
		}

		.iphone {
		    background-position: -870px 0;
		}

		.hero2Content {
		    margin-top: 280px;
		    text-align: left;
		    width: 420px;
		}

		.parallaxHeader h4 {
		    font-size: 35px;
		    padding-left: 10px;
		    padding-top: 20px;
		    text-align: left;
		    width: 300px;
		}

		.parallaxSection {
			padding-bottom: 40px;
		}

		.parList {
		    margin-top: 0;
		}

		.ipad > img {
		    width: 420px;
		}

		.ipadScreenImage {
			  left: 40px;
			  top: 70px;
			  width: 100%;
			  max-width: 339px;
		}

		.parList li {
		    font-size: 21px;
		    padding-top: 10px;
		}
		
		.parList li.step2 {
		  padding-bottom: 0px;
		}

		.hero3 {
		    background-position: -583px 0;
		}

		.tealDivider {
		    height: 118px;
		}

		.tealDivider h3 {
		    font-size: 38px;
		    line-height: 39px;
		    padding-top: 20px;
		}

		.cta {
		    display: inline-block;
		}

		.iconContent {
		    margin: 50px 0 0;
		}

		.iconContent.last {
		  margin-bottom: 80px;
		}
		.iconContent p {
			text-align: center;
			padding: 0;
		}
		.masthead {
  			padding-bottom: 6px;
  		}
  		.heroContent h2, .heroContent h1 {
  			line-height: 75px;
  			padding-top: 130px;
  		}
  		#menuBtn {
  			display: block;
  			float: right;
  			margin-right: 20px;
  		}
  		.mhButtonContainer {
  			display: none;
  			width: auto;
  			clear: both;
  		}
  		.divider {
  			display: none;
  		}
  		.masthead .nav {
  			float: none;
  		}
		.nav a {
		    padding: 15px 32px 15px 0;
		    text-align: left;
		    font-size: 21px;
		}
		.stripeContent h4 {
			float: right;
			margin-right: 0;
		}
		.stripeTitle img {
			float: right;
		}
		.nav a {
		    padding: 15px 0;
		    text-align: center;
		    font-size: 21px;
		}
		.logoContainer {
			margin-left: 20px;
		}
		.mhButtonContainer {
			padding: 10px 20px 0;
		}
		.nav a.navPad {
			padding-bottom: 8px;
		}
		.stripeContent p.last {
		    padding-left: 0;
		}
		.parallaxHeader {
			background-position: center 20px;
		}
		.parallaxHeader h4 {
			text-align: center;
			width: auto;
		}
		.heroHeading {
			background-size: 200px 115px;
		}
		.footnotes p {
			padding: 0;
		}
		.ipadScreen2, .ipadScreen1 {
			display: none;
		}
		.ipadScreen3 {
			opacity: 1;
		}
		.ipad {
		    margin-top: 0;
		}
		.ipadScreenImage {
			top: 0;
			left: 0;
			margin: 0 auto 20px;
			position: relative;
			height: auto;
		}
		.stripe {
			height: auto !important;
		}

		.stripeContent {
			border: 0;
		}

		.stripeContent.right {
			margin: 50px 0 0 0;
			width: auto;
		}
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		.parallaxHeader {
			width: 420px;
			padding-top: 30px;
		}
		.stripeContent {
			width: 420px;
			margin-right: 0;
			margin-top: 40px;
		}
		.stripe {
			height: 700px;
			background-position: -1660px center;
		}
		.iconContent img {
		  width: 420px;
		  height: 265px;
		}
		.mastheadContainer {
		  width: auto;
		 }
		 .logoContainer {
		 	margin-left: 20px;
		 }
		 #menuBtn {
		 	margin-right: 20px;
		 }
		.parallaxHeader h4 {
			padding-left: 0;
			padding-top: 150px;
		}
		.iconContent img {
		  width: 400px;
		  height: auto;
		}
		.stripeContent {
			width: auto;
		}

		.stripeContent p {
			width: auto;
		}

	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		.logoContainer {
		    background-size: 174px auto;
		}

		.mhButtonContainer {
		    margin-top: 5px;
		    width: auto;
		}

		.cta {
		    text-align: center;
		}

		.heroContent h2, .heroContent h1 {
		    float: none;
		    font-size: 62px;
		    text-align: center;
		}

		.iconContent img {
		    margin: 0 auto;
		    width: 280px;
		}

		.ipad > img {
			width: 300px;
		}

		.ipad .ipadChrome {
		    height: auto;
		}

		.tealDivider {
		    height: 117px;
		}

		.tealDivider h3 {
		    font-size: 28px;
		    line-height: 39px;
		    padding-top: 20px;
		}

		.ipadScreenImage img {
			width: 300px;
			margin-right: 0;
		}

		.hero2Content {
		    width: auto;
		    margin-top: 38px;
		}

		.hero2Content h4 {
		    font-size: 30px;
		}

		.parList {
		    margin-top: 0;
		    padding-left: 30px;
		}

		.parList li {
		    font-size: 18px;
		    padding-top: 10px;
		}

		.hero3 {
		    background-position: -703px 0;
		    height: 678px;
		}

		.hero3 h4 {
		    font-size: 34px;
		    margin-top: 195px;
		}

		.hero3 p {
		    font-size: 22px;
		    width: 300px;
		}

		.parallaxHeader {
			width: 300px;
			padding-top: 30px;
		}
		.parallaxHeader h4 {
			padding-left: 0;
			padding-top: 150px;
		}
		.stripeContent {
			width: 290px;
		}
		.stripe {
			height: 770px;
			background-position: -1940px center;
		}
		.stripeContent p {
			font-size: 21px;
		}
		.stripeContent h4 {
			padding-left: 30px;
		}
		.iphone {
		    background-position: -331px 0px;
		    height: 380px;
		}
		.mastheadContainer {
		  width: auto;
		 }
		 .hero {
		 	height: 670px;
		 }
		 .heroContent {
		 	margin: 190px auto 0;
		 }
		 .hero2Content p {
		 	font-family: 'book', Arial, Helvetica, Verdana, Sans-serif;
		 }
		 .stripeContent {
			border: 0;
			width: auto;
		}

		.stripeContent p {
			width: auto;
		}

		.stripe h4 {

			text-align: left;

		}
	}

	/*  #iPhone 6PLUS (Portrait)  */
	@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 3) {
		.parallaxHeader h4 {
			padding-right: 10px;
		}
	}

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

	}

	/*  #iPhone 6PLUS (ALL)  */
	@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3) {
		.hero2Content {
			margin-left: 10px;
		}
		.parallaxHeader {
			width: auto;
			padding-left: 20px;
		}
		.parallaxHeader h4 {
			width: auto;
			padding-left: 0;
		}
		.ipad {
			margin-left: 10px;
		}
		.ipadScreenImage {
			left: 50px;
		}
		.stripeContent {
			margin-right: 10px;
		}
		.parList li {
			padding-right: 10px;
		}
		.footnotes {
			padding: 0 10px;
		}
	}

	@media only screen and (max-width: 1199px) and (min-width: 960px) {

		.stripeContent {
			width: auto;
			margin-top: 60px;
			padding-right: 25px;
		}

		/*.stripeContent.left {

			padding-left: 30px;

		}*/

		.stripeContent.right {
			margin-left: 0;
			padding-left: 12px;
			width: auto;
		}

		.stripeContent p {
			width: auto;
		}
	}