/* MOBILE UI */

@media only screen and (max-width : 640px) {  
	html { width: 100%; }
	#mobile-menu-icon { display: block; position: absolute; right: 4%; margin: 3px 0 0 20px; z-index: 1000; color: #fff; font-size: 20px; }
	#mobile-menu-icon.active { color: #006591; position: fixed; }
	#mobile-panel { display: block; overflow: hidden; background: #0099DD; position: fixed; right: 0; top: 0; z-index: 20; width: 0; transition: width .4s; height: 100%; }
	#mobile-panel.active { transition: width .4s ease-in-out; width: 250px; box-shadow: -4px 0px 5px 0px rgba(0, 0, 0, 0.4); }
	#mobile-panel .social { float: left; padding: 6px 0 5px 18px; }
	#menu { clear: both; display: block; margin: 66px 0 0; width: 250px; }
	#menu li { display: block; font-size: 14px; }
	#menu li a { clear: both; display: block; color: #fff; height: auto; margin: 0 0 20px; padding: 0 20px; }
	#menu li a.current { }
	
	#login-button, #user { margin-right: 40px; }
	
	.w { width: 92%; padding: 0 4%; }
	#pitch { padding: 30px 0 60px; }
	#pitch h1 { margin: 0 0 20px; font-size: 44px; line-height: 52px; }
	.pitch-slogan { font-size: 18px; margin: 0 0 20px; }
	.pitch-desc { margin: 0 0 70px; font-size: 16px; font-weight: 300; }
	
	.pbutton { padding: 12px 15px; }
	#pitch .pbutton { width: 140px; padding: 14px 0; }
	.pbutton.transparent { padding: 14px 16px; }
	.reghalf, .reghalf.last, .half, .half.last, .third, .third.last, .fourth, .fourth.last { float: none; width: 100%; padding: 0; margin: 0 0 20px; }
	.fourth.thinner { width: 100%; margin: 0 0 20px; padding: 0; }
	
	.pitch-video { margin: 0 5%; }
	.pitch-video h2 { font-size: 21px; line-height: 24px; }
	.pitch-video-hold { margin: 0; }
	.pitch-video video { width: 100%; }

	.grey .w { padding: 0 4% 40px; width: 92%; }
	
	.thin-page { width: 100%; }
	
	.double { float: none; padding: 30px 4% 40px; width: 92%; text-align: center; }
	
	.home-narrow, .constrained { padding: 0; }
	h2.constrained { font-size: 22px; line-height: 1.3em; }
	
	.bubble { display: inline-block; position: relative; background: #019ADE; border-radius: 50%; width: 210px; height: 170px; padding: 40px 0 0; }
	.bubble p { padding: 0 20px; font-size: 15px; line-height: 1.3em; }
	.bubble p.bubble-featured { font-size: 34px; letter-spacing: -1.5px; line-height: 56px; }

	.small-bubble-text { padding: 10px 0 0; font-size: 15px; line-height: 1.2em;  }

	.clogo { width: 30%; height: 64px; margin: 0 0 20px; }
	.clogo img { display: block; margin: 0 auto; position: relative; max-width: 86%; top: 50%; transform: translateY(-50%);  }

	.formats { padding: 0 0 30px; width: 100%; }
	
	.blog-info { float: none; text-align: center; }
	.share { clear: none; float: left; margin: 0 10px 5px 0; }
	.blog-post { clear: both; margin: 0; padding: 0; overflow: auto; }
	.blog-category-post-image { float: none; width: 100%; margin: 0 0 10px; }
	
	.sel-cat { width: 48%; }
	
	#main { float: none; width: 100%; }
	
	#side { float: none; clear: both; width: 100%; }
	
	#preview { float: none; width: 80%; }
	#footer { padding: 40px 0; text-align: center; }
	#copy { clear: both; float: none; }
	#links { clear: both; float: none; margin: 0 0 20px; }
	#links li a { margin: 0 10px; }
	#social { clear: both; float: none; margin: 0 0 40px; }
	
	
	/* cookie notice */
	#co-wrap { width: 94%; padding: 10px 3%; }
	
	#notice a.cookies-button { display: block; padding: 8px 0; margin: 15px 15% 0; }
	
}