/* Big tablets to 1200px (widths smallers than the 1140 row) */
@media only screen and (max-width: 1200px) {


	header{
		/* background-image:
		linear-gradient(
		rgba(0, 0, 0, 0.2),
		rgba(0 ,0 ,0, 0.8),
		rgba(0 ,0 ,0, 0.9)),
		url(img/hero.jpg); */
		
		/* background-size: cover; */
		/* background-position: center; */
		/* height:60vh; */
	    /* background-attachment: fixed; */
	}

	.hero-text-box{
		width: 100%;
		padding: 0 4%;
	}

	.row{
		margin:  0 4%;
	}



}



/* Small tablets to big tablets: from 768 to 1023px */
@media only screen and (max-width: 1023px) {

	body {
		font-size: 16px;
	}


	header{
		/* background-image:
		linear-gradient(
		rgba(0, 0, 0, 0.2),
		rgba(0 ,0 ,0, 0.8),
		rgba(0 ,0 ,0, 0.9)),
		url(img/hero.jpg); */
		
		background-size: 100%;
		background-position: top;
		height:48vh;
	    background-attachment: fixed;
	}

	.section-wholesaler{
		background-size: 180%;
		background-position: center;
		height:auto;
	    background-attachment: fixed;
	}

	.hero-text-box{
		top: 38%;
	}

	h1{font-size: 170%;}


	.main-nav li {
		padding: 0 4px;
	}

	.main-nav li a{
		/* padding: 6px 16px 2px 16px; */
	}


	.btn-full:link, .btn-full:visited{
		padding: 8px 18px;
		font-size: 14px;
	}

	.btn-ghost:link, .btn-ghost:visited{
		padding: 8px 18px;
		font-size: 14px;
	}


	.long-copy {
		width: 90%;
		margin: 0 5%;
	}

	.padding-box{
		padding: 32px 8px 26px;
	}

	.works-step div{
		height: 44px;
		width: 44px;
	}

	.contact-form{
		width: 100%;
	}

}


/* Small phones to small tablets: from 481 to 767px */
@media only screen and (max-width: 767px) {

	body {font-size: 16px;}
	section {padding: 30px 0}



	header{
		/* background-image:
		linear-gradient(
		rgba(0, 0, 0, 0.2),
		rgba(0 ,0 ,0, 0.6),
		rgba(0 ,0 ,0, 1.0)),
		url(img/hero.jpg); */
		
		/* background-size: cover; */
		/* background-position: center; */
		height: 36vh;
	    /* background-attachment: initial; */
		/* max-height: 330px; */
	}


	.main-nav {display: none;}


	.mobile-nav-icon{
		display: inline-block;
	}

	


	.main-nav{
		float: left;
		margin-top: 16px;
		margin-left: 20px;
	}

	.main-nav li{
		display: block;
	}

	.main-nav li a:link,
	.main-nav li a:visited {
		display: block;
		border: 0;
		padding: 10px 0;
		font-size: 100%;
	}

	.main-nav li a:hover,
	.main-nav li a:active {
		background-color: unset;
		color: #fff;
		border: none;
	}

	.sticky .main-nav {
		margin-top: 12px;
		margin-left: 20px;
	}


	.sticky .main-nav li a:link,
	.sticky .main-nav li a:visited {
		padding: 10px 0;
	}

	.sticky .main-nav li a:hover,
	.sticky .main-nav li a:active {
		background-color: unset;
		color: unset;
		border: none;
	}

	.sticky .mobile-nav-icon i{
		color: #555;
	}


	.hero-text-box{
		/* width: 100%; */
		/* padding: 0 4%; */
		top: 30%;
	}

	.hero-text-box h1{
		margin-bottom: 10px;
	}



	.row{
		/* padding: 0 4% */
		margin:  0 4%;
	}

	.col{
		/* width: 100%; */
		/* margin: 0 0 4% 0; */
	}

	.long-copy {
		width: 90%;
		margin: 4%;
	}

	.padding-box{
		padding: 16px 8px 4px;
		margin: 0;
	}


	.section-solutions p{
	font-size: 90%;
	line-height: 145%;
}

	h1{font-size: 120%;}
	h2{font-size: 140%;}


	.steps-box:first-child{
		text-align: center;
		padding-right: 0%;
		margin-top: 0px;
		margin-bottom: 0;
	}

	.iPhone-V{
		display: none;
	}

	.iPhone-H{
		display: inline;
	}


	.steps-box:last-child {
	    padding-left: 4%;
	    padding-right: 4%;
	    margin-top: 32px;
	}

	.steps-box p{
		font-size: 16px;
	}

	.works-step{
		margin-bottom: 24px;
		width: 100%;
	}

	.section-wholesaler{
		height: auto;
	}


	.section-cities{
		text-align: center;
	}


	.section-cities img{
		width: 60%;
		height: auto;
		margin-top: 18px;
		margin-bottom: 2px;
	}

	.section-cities h3{
		padding-top: 0;
		padding-bottom: 2px;
	}

	.city-feature{
		display: inline;
		margin-right: 16px;
	}

	.city-feature ion-icon{
		padding-right: 0;
	}


	.plan-box{
		width: 70%;
		margin: 10px 15% 5px;
	}

	.form-empty-space{
		height: 0;
		margin: 0;
	}

/* Small phones: from 0 to 480px */
@media only screen and (max-width: 480px) {

	header{
		background-image:
		linear-gradient(
		rgba(0, 0, 0, 0.2),
		rgba(0 ,0 ,0, 0.7),
		rgba(0 ,0 ,0, 1.0)),
		url(img/hero.jpg);
		
		background-size: cover;
		background-position: center;
		height: 80vh;
	    background-attachment: initial;
	}


	h1{font-size: 74%;}
	h2{font-size: 100%;}

	.city-feature{
		display: block;
	}

	.steps-box p{
		font-size: 12px;
	}


	.form-empty-space{
		height: 0;
		margin: 0;
	}

}




}