/********************************************************************************************* 

x. Smaller than 800px (height)

*********************************************************************************************/
@media only screen and (max-height:800px) {
	
	html, body {
		font-size: 20px;
	}
	
	h1 {
		font-size: 50px;
		line-height: 50px;
	}
	
	#about .content {
		padding: 140px 0 0 0;
	}
	
	#about .content p {
		margin: 0 0 30px 0;
	}
	
	#about .divider {
		margin: 0 auto 30px auto;
	}
	
	#packaging .wrapper {
		width: 750px; height: 600px;
		margin: -300px 0 0 -375px;
	}
	
}

/********************************************************************************************* 

x. Smaller than 700px (height)

*********************************************************************************************/
@media only screen and (max-height:700px) {
	
	#contact .wrapper {
		height: 500px;
		margin-top: -250px;
	}
	
	#introduction .wrapper {
		height: 300px;
		margin-top: -150px;
	}
	
	#packaging .wrapper {
		width: 630px; height: 500px;
		margin: -250px 0 0 -315px;
	}
	
}

/********************************************************************************************* 

x. Smaller than 1024px

*********************************************************************************************/
@media only screen and (max-width:1024px) {
	
	#about, #contact, #introduction, #packaging, #video {
		padding: 100px 0;
		position: relative !important;
		top: 0 !important; bottom: 0 !important;
	}
	
	#about {
		opacity: 1 !important;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
		filter: alpha(opacity=100) !important;
	}
	
	#about .content {
		opacity: 1 !important;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
		filter: alpha(opacity=100) !important;
		padding: 0;
	}
		
	#about .title {
		height: auto;
		display: block;
		margin: 0 0 50px 0 !important;
		position: relative;
		top: 0 !important;
	}
	
	#about .title h1 {
		display: block;
	}
	
	#about .title span {
		opacity: 1 !important;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
		filter: alpha(opacity=100) !important;
	}
	
	#about .wrapper { 
		margin: 0 auto !important;
		padding: 0;
		position: relative;
		top: 0; left: 0;
	}
	
	body {
		overflow: auto;
	}
	
	#contact, #introduction {
		box-shadow: none;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
	}
	
	#contact .wrapper, #introduction .wrapper {
		height: 400px;
		margin: 0 auto;
		position: relative;
		top: 0; left: 0;
	}
	
	#introduction .arrow {
		display: block;
	}
	
	#introduction .loading {
		display: none;
	}
	
	#packaging {
		padding-top: 0;
	}
	
	#packaging #flower { 
		left: 0 !important;
	}
	
	#packaging #vapor-oil {
		right: 0 !important;
	}
	
	#packaging .wrapper {
		width: 750px; height: 600px;
		margin: 0 auto;
		position: relative;
		top: 0; left: 0;
	}
	
	#video {
		display: none;
	}
	
	#anchors {
		display: none;
	}
	
}

/********************************************************************************************* 

x. Smaller than 900px

*********************************************************************************************/
@media only screen and (max-width: 900px) {
	
	#about, #packaging {
		padding: 50px 0;	
	}
	
	#about .wrapper {
		width: auto;
		padding: 0 50px;
	}
	
	html, body {
		font-size: 20px;
	}
	
	h1 {
		font-size: 50px;
		line-height: 50px;
	}
	
	#packaging {
		padding-top: 0;
	}

	#packaging .wrapper {
		width: 630px; height: 500px;
	}

}

/********************************************************************************************* 

x. Smaller than 800px

*********************************************************************************************/
@media only screen and (max-width: 800px) {
	
	.pop-up {
		width: 500px;
		padding: 50px;
	}
	
}


/********************************************************************************************* 

x. Smaller than 700px

*********************************************************************************************/
@media only screen and (max-width: 700px) {
	
	#contact .wrapper, #introduction .wrapper {
		width: 300px; height: 350px;
	}
	
	h1 {
		font-size: 40px;
		line-height: 40px;
	}

	#packaging .wrapper {
		width: 510px; height: 400px;
	}

}

/********************************************************************************************* 

x. Smaller than 600px

*********************************************************************************************/
@media only screen and (max-width: 600px) {
	
	#about, #packaging {
		padding: 30px 0;	
	}
	
	#about .content p, #about .divider, #about .title  {
		margin-bottom: 30px !important;
	}
	
	#about .wrapper {
		padding: 0 30px;
	}
	
	h1 {
		font-size: 30px;
		line-height: 30px;
	}
	
	html, body {
		font-size: 18px;
	}
	
	#packaging {
		padding-top: 0;
	}
	
	#packaging .wrapper {
		width: 440px; height: 350px;
	}
	
	.pop-up {
		width: 300px;
		padding: 30px;
	}
	
	.pop-up form .textarea-wrapper, .pop-up form .textfield-wrapper {
		margin: 0 0 10px 0;
	}
	
	.pop-up form table td {
		display: block;
		padding: 0;
	}
	
}

/********************************************************************************************* 

x. Smaller than 500px

*********************************************************************************************/
@media only screen and (max-width: 500px) {
	
	#packaging .wrapper {
		width: auto; height: auto;
		padding: 0 60px;
	}
	
	#packaging #flower, #packaging #vapor-oil {
		height: auto;
		position: relative;
	}
	
	#packaging #flower {
		margin: -80px 0 30px 0;
	}
	
	#packaging .product img {
		width: 100%; height: auto;
	}
	
}

/********************************************************************************************* 

x. Smaller than 500px

*********************************************************************************************/
@media only screen and (max-width: 500px) {
	
	h1 {
		font-size: 25px;
		line-height: 25px;
	}
	
	html, body {
		font-size: 16px;
	}
	
	#packaging #vapor-oil {
		margin: 0 0 30px 0;
	}
	
	.pop-up {
		width: 250px;
	}
	
}


/********************************************************************************************* 

x. Smaller than 400px

*********************************************************************************************/
@media only screen and (max-width: 400px) {
	
	#contact {
		padding: 30px 0;
	}
	
	#contact .wrapper {
		width: 220px; height: 300px;
	}
	
	#introduction {
		padding: 60px 0;
	}
	
	#introduction .arrow {
		display: none;
	}
	
	#introduction .wrapper {
		width: 220px; height: auto;
	}
	
}


/********************************************************************************************* 

x. Smaller than 320px

*********************************************************************************************/
@media only screen and (max-width: 320px) {
	
	.pop-up {
		padding: 10px;
	}
	
}

/********************************************************************************************* 

x. Retina Graphics

*********************************************************************************************/
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    
    #about .divider {
		background: none;
		background-image: url(../img/divider@2x.png);
		background-size: 109px 7px;
	}
    
    #introduction .arrow {
		background: none;
		background-image: url(../img/arrow@2x.png);
		background-size: 56px 56px;
	}
	
	 #video .play {
		background: none;
		background-image: url(../img/play@2x.png);
		background-size: 56px 56px;
	}
    
}