/* #Media Queries
================================================== */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
	.buy { background: url(../images/b2.jpg) 0 50% no-repeat!important; }
	.work { background: url(../images/faces.jpg) 0 50% no-repeat!important; }
	.testimonials { background: url(../images/sailing.jpg) 0 50% no-repeat!important; }
	.newsletter { background: url(../images/dog.jpg) 0 50% no-repeat!important;}
	.buy, .work, .testimonials , .newsletter { -webkit-background-size: 1024px auto!important;}
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	.buy { background: url(../images/b2.jpg) 0 50% no-repeat!important; }
	.work { background: url(../images/faces.jpg) 0 50% no-repeat!important; }
	.testimonials { background: url(../images/sailing.jpg) 0 50% no-repeat!important; }
	.newsletter { background: url(../images/dog.jpg) 0 50% no-repeat!important; }
	.buy, .work, .testimonials, .newsletter { -webkit-background-size: 959px auto!important;}
	
	.white-overlay,
	.testimonials-overlay{
		padding: 60px 0 30px;
		width: 556px;
	}

	.white-overlay h4 { font-size: 31px; }
	.white-overlay p { font-size: 14px; }
	
	.promo img { width: 90%; }
	.promo h3{margin-top: 40px; }
	.promo p {margin-right: 20px;}
	
	#about h5 {margin-bottom: 30px;}	
	#about article {padding: 35px 0;}
	.picture {padding: 0 6px;}
	.picture span {	margin-left: 2px;font-weight: 600;font-size: 13px;}
	.picture ul {margin-right: 0px;}
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (max-width: 767px) {
	
	.buy { background: url(../images/b2.jpg) 0 50% no-repeat!important; }
	.work { background: url(../images/faces.jpg) 0 50% no-repeat!important; }
	.testimonials { background: url(../images/sailing.jpg) 0 50% no-repeat!important; }
	.newsletter { background: url(../images/dog.jpg) 50% 50% no-repeat!important; }
	.buy, .work, .testimonials, .newsletter { -webkit-background-size: 767px auto!important;}
	
	.white-overlay,
	.testimonials-overlay{
		margin: 100px auto;
		padding: 40px 0 20px;
		width: 420px;
	}

	.white-overlay h4 { font-size: 24px; }
	.white-overlay p { font-size: 14px; }
	
	.button {font-size: 13px; padding: 6px 25px;}
	
	.buy { background: url(../images/b2.jpg) no-repeat; }

	nav {
		border-bottom: 0;
	}
	
	nav ul {
		display: none;
		height: auto;
	}
	
	nav ul li {
		width: 100%;
	}
	
	nav li a {
	  	text-align: left;
	  	width: 100%;
  	}
	
	nav .pull {
		display: block;
		background: #161616;
		width: 100%;
		text-align: right;
		color: #fff;
	}
	
	nav .pull i{
		font-size: 21px;
		padding: 11px;
	}
	
	nav .pull:hover {
		background: #1d1d1d;
		color: #8ebd00;
	}
	
	.title h2 {
		padding: 0;
		margin: 40px 0 5px;
		border: 0;
		text-align: center;
	}
	
	.title p {
		line-height: 23px;
		font-size: 18px;
		text-align: center;
	}
	
	.service {	margin: 25px 0;}
	#about article {padding: 20px 0;}
	
	.title p.three-lines,
	.title p.two-lines,
	.title p.one-line {margin: 0 0 40px;}
	
	.promo h3,
	.promo p{
		text-align: center;
		margin-right: 0;
	}
	
	.promo a {
		margin: 0 auto;
		width: 120px;
		display: block;
	}
	
	.skill-title {width: 100%; margin-top: 0px; margin-bottom: 3px;}
	.skill-bar {width: 100%;}
	
	.picture {padding: 0 6px;margin-bottom: 20px;}
	
	.newsletter h4 {font-size: 28px;}
	.newsletter-form input[type=text] { width: 160px; padding: 9px 0px 9px 35px;}
	.contact-details p {width: 60%; margin: 0 auto 40px;}
	.work p { font-size: 14px; }
	
	.plan { margin-bottom: 0; }
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {

	.white-overlay,
	.testimonials-overlay{
		margin: 100px auto;
		padding: 40px 0 20px;
		width: 300px;
	}
	
}

/* #Retina Graphics
================================================== */

@media all and (-webkit-min-device-pixel-ratio: 1.5) {

	.hex {
		background: url('../images/hex@2x.png') center no-repeat;	
		background-size: 113px 125px;
	}

	.hex:hover {
		background: url('../images/hex-green@2x.png') center no-repeat;	
		background-size: 113px 125px;
	}
	
	.picture ul li a{
		background: url('../images/smallhex@2x.png') center 66% no-repeat;
		background-size: 25px auto;
	}

	.picture ul li a:hover{
		background: url('../images/smallhex@2x.png') center bottom no-repeat;
		background-size: 25px auto;
	}
	
	.socials li a {
		background: url('../images/smallhex_w@2x.png') no-repeat;
		background-size: 31px auto;
	}

	.socials li a:hover {
		background: url('../images/smallhex_w@2x.png') bottom no-repeat;
		background-size: 31px auto;
	}
		
}