.mobile-only { display: none; }

/* tablet */
@media all and (max-width:920px) {

	#our-clients aside { width: 100%; }
	#our-clients aside ul li { margin: 0; }
	#our-clients section { width: 100%; }
	#stories ul { margin-top: 100px; }

	#about section.team { width: 600px; float: none; display: block; margin: 20px auto 20px; }
	
	.member:nth-child(4) {  
		clear: both;
	}
	
	#static .content img { margin-top: 120px; margin-left: 10px; }

	#demos ul { margin-bottom: 0; }
	#demos ul li { width: 33.3%; }
	#demos article { margin-top: 30px; }
	#demos h3 { margin: 20px 20px 0 10px; font-size: 3.2em; height: 70px; }
	#demos ul li p { margin: 10px 20px 0 10px; font-size: 1.2em; }
	#demos article h1, #demos article p { margin-left: 10px; margin-right: 10px; }

	#nav-wrapper nav ul li { font-size: 1.4em; }
	
	#header-slider h1 { font-size: 4em; margin: 0 10px 10px 10px; }
	#header-slider p { font-size: 3em; margin: 0 10px 10px 10px; }
	
	#header-wrapper .buttons { top: 280px; padding-right: 10px; }
	
	#services nav.mobile { position: absolute !important; top: 20px !important; left: 0; padding: 10px 10px; }
	#services nav li { font-size: 1.6em; }
	#services article { padding: 0 10px; }
	
	#about h1 { margin: 0 10px 30px 10px; }
	#about section { width: 100%; }
	#about section.left { margin-bottom: 30px; }
	#about p { margin-left: 10px; margin-right: 10px; }
	#about section.team { width: 550px; float: none; display: block; margin: 20px auto 20px; }
	#about section.team .member { margin: 0 3px 10px; }

	#useful-links h1 { margin: 0 10px 30px 10px; }
	#useful-links h2 { margin: 30px 10px 15px 10px; }
	#useful-links h2.first { margin-top: 0; }
	#useful-links section { width: 100%; }
	#useful-links section.left { margin-bottom: 30px; }
	#useful-links p, #useful-links dt, #useful-links dd { margin-left: 10px; margin-right: 10px; }
	
	#our-clients nav { margin-top: 20px; padding: 10px; }
	#our-clients nav li { font-size: 1.6em; }
	#our-clients article { margin-top: 0; margin-bottom: 0; }
	#our-clients aside h1 { margin-top: 90px; }
	#our-clients section { margin-bottom: 30px; }
	#our-clients section h1 { margin-top: 30px; }
	#clients-wrapper { margin-left: 10px; margin-right: 10px; }
	#stories section>ul { margin-top: 30px; }
	#stories section>ul>li { font-size: 1.6em; line-height: 2em; background-position-y: 10px !important; }
	#stories section>ul>li li, #stories section>ul>li p { line-height: 1.5em; }
	
	#contact article { margin: 50px 10px; }

	#feature-wrapper { height: 770px; }
	
	#feature-wrapper a.next, #feature-wrapper .previous { height: 200px; background: rgba(109, 109, 109, 0.6); position: absolute; top: 69px; right: 0; }
	#feature-wrapper a.next span, #feature-wrapper .previous span { position: absolute; top: 50%; left: 0; margin-top: -15px; height: 31px; width: 31px; display: block; height: 31px; background: url('../images/arrows.png'); }
	#feature-wrapper a.next span { background-position: 100% 0; }
	#feature-wrapper a.previous span { background-position: 0% 0; }
	#feature-wrapper .next { right: 0; }
	#feature-wrapper .previous { left: 0; }
}

/* mobile */
@media screen and (max-width:700px) {
	.mobile-only { display: block; }
        .mobile-hide, #nav-demos { display: none !important; }

	#news-wrapper { display:none; }
	#nav-wrapper nav { overflow: scroll; }
	#nav-wrapper nav ul { margin: 0; }
	#nav-wrapper nav ul li { background: #413a3c; display: block; margin: 0; border-bottom: 3px solid #231f20; }
	#nav-wrapper nav ul li a { padding: 15px 20px; display: block; }
	#nav-wrapper .mobile-nav { width: 100%; height: 60px; display: block; overflow: hidden; }
	#nav-wrapper .mobile-nav span { display: block; margin: 20px 10px 0 0; width: 32px; height: 22px; float: right; background: url('../images/mobile-nav.png') 0 0 no-repeat; }
	#nav-wrapper .hide { display: none; }
	#nav-wrapper nav ul li ul { background: #413a3c; overflow: hidden; }
	#nav-wrapper nav ul li ul li { margin: 15px 15px; display: block; float: left; width: 40px; height: 40px; background: url('../images/top-icons-x2.png') 0 0 no-repeat; background-size: 40px 120px; border: none;  height:20px; }
	#nav-wrapper nav ul li ul li#top { background-position: 0 0; }
	#nav-wrapper nav ul li ul li#facebook { background-position: 0 -40px; }
	#nav-wrapper nav ul li ul li#twitter { background-position: 0 -80px; }
	
	#social { display: block; }
	
	#dot { background: #1c1f26; }
	
	#static .content img { display: none; }
	#static .content img#logo { display: block; margin: 80px 0 0 10px; position: relative; width: 94px; height: 94px; }
	
	#header-slider h1 { font-size: 3em; margin: 10px; }
	#header-slider p { font-size: 1.8em; margin: 10px; }
	
	#header-wrapper { height: 425px; }
	#header-wrapper header { padding-top: 150px; }
	#header-wrapper .buttons { top: 40px; right: 4%; }
	
	#news span { margin-left: 10px; }
	
/*	#services { padding: 0 10px; } */
	#services h1 { margin-top: 170px; }
	#services p { width: 100% !important; }
	
	#services .circle1, #services .circle2, #services .circle3, #services .circle4 { display: none; }
	#services article { min-height: auto; margin-bottom: 30px; }
	
	#services nav.mobile { padding-bottom: 5px; }
	.content-wrapper nav ul li { float: none; background: none; margin-bottom: 5px; }
	
	#services .popup article { padding: 0 10px; }
	#services .popup article h1 { margin-top: 200px; font-size: 3.5em; }
	#services .popup article p { font-size: 1.3em; }
	
	#feature-wrapper a.next, #feature-wrapper .previous { top: 89px; }
	
	#demos article h1 { margin-left: 10px; margin-right: 10px; }
	#demos article p { margin-left: 10px; margin-right: 10px; }
	#demos ul { margin-bottom: 0; }
	#demos ul li { width: 50%; }
	#demos article { margin-top: 30px; }
	#demos h3 { margin: 20px 20px 0 10px; font-size: 2.4em; height: 70px; }
	#demos ul li p { margin: 10px 20px 0 10px; font-size: 1.2em; }
	
	#slider-wrapper { clear: both; margin-top: 40px; }
	#feature-wrapper { height: 650px; }
	#feature-wrapper .feature ul { top: 56px; margin-left: -40px; }
	#feature-wrapper iframe { height: 200px !important; }
	#feature-wrapper p.right, #feature-wrapper p.left { font-size: 1.2em; }
	
	#our-clients nav { padding: 10px 10px 5px 10px; }
	#our-clients h1 { margin-top: 110px; margin-bottom: 10px; }
	#our-clients aside { width: 100%; }
	#our-clients aside ul li { margin: 0; font-size: 1.8em; }
	#our-clients section { width: 100%; }
	#our-clients .blur1, #our-clients .blur1, #our-clients .blur1, #our-clients .blur1 { display: none; }
	#our-clients h2 { margin: 30px 0 15px 0; }
	#our-clients h2.first { margin-top: 0; }
/*	#our-clients section.mobile-only p { margin-left: 10px; margin-right: 10px; } */
	
/*
	#stories h1 { margin-left: 10px; margin-right: 10px; }
	#stories p { margin-left: 10px; margin-right: 10px; }
	#stories ul { margin: 20px 10px; }
*/
	#stories ul { margin: 20px 0; }
	#stories ul li { width: 100%; background-position: 99% 18px; }
	#stories ul li strong { display: block; }
	
	#about article { margin: 50px auto; }
	#about h1 { margin: 0 10px 30px 10px; }
	#about section { width: 100%; }
	#about section.left { margin-bottom: 30px; }
	#about p { margin-left: 10px; margin-right: 10px; }
	#about section.team { width: 315px; float: none; display: block; margin: 20px auto 20px; }
	#about section.team .member { margin: 0 3px 10px; }
	
	#about .blur1, #about .blur2, #about .blur3, #about .blur4 { display: none; }
	
	#useful-links article { margin: 50px auto; }
	#useful-links h1 { margin: 0 10px 30px 10px; }
	#useful-links h2 { margin: 30px 10px 15px 10px; }
	#useful-links h2.first { margin-top: 0; }
	#useful-links section { width: 100%; }
	#useful-links section.left { margin-bottom: 30px; }
	#useful-links p, #useful-links dt, #useful-links dd { margin-left: 10px; margin-right: 10px; }

	#contact article { margin: 50px auto; }
	#contact h1 { margin: 10px 10px 20px 10px; }
	#contact dl { margin: 0 10px; }
	#contact section a { margin-left: 10px; }
	#contact section { width: auto; }
	
	.member:nth-child(4) {  
		clear: none;
	}
	
	#logos h1 { margin: 10px 10px 0 10px; }
	#logos2 { display: none; }
	#logos .logos { height: auto; overflow: scroll; }
	#logos1 { margin-top: 40px; }
	#logos1 div { left: 0 !important; width: 100% !important; position: relative; }
	#logos1 img { display: block; float: none; width: 100%; }
	#logos1 img:last-child { display: none; }
	
	#feature-wrapper .iframe { height: 200px; }
}

/* desktop and tablet */
@media all and (min-width:721px) {
	#nav-wrapper nav ul { display: block !important; }
}

/* retina screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	#nav-wrapper .mobile-nav span { background-image: url('../images/mobile-nav-x2.png'); background-size: 30px 22px; }
	#header-wrapper header .buttons a { background-image: url('../images/arrows.png'); background-size: 62px 61px; }
	#nav-wrapper nav ul li ul li { background: url('../images/top-icons-x2.png') 0 0 no-repeat; background-size: 20px 60px !important; }
	#nav-wrapper nav ul li ul li#top { background-position: 0 0; }
	#nav-wrapper nav ul li ul li#facebook { background-position: 0 -20px; }
	#nav-wrapper nav ul li ul li#twitter { background-position: 0 -40px; }
	
	#stories section > ul > li { background: url('../images/stories-x2.png') 100% 5px no-repeat; background-size: 18px 19px; }
	#stories section > ul > li.active { background: url('../images/stories-down-x2.png') 100% 5px no-repeat; background-size: 18px 19px; }
}

@media ((-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)) and (max-width:700px) {
	#nav-wrapper nav ul li ul li { background-size: 40px 120px !important; }
	#nav-wrapper nav ul li ul li#facebook { background-position: 0 -40px; }
	#nav-wrapper nav ul li ul li#twitter { background-position: 0 -80px; }
}