/*
	(c)2012 - visuallizard.com
	
	Mobile styles using Media Queries
*/

/* !Media Queries ============================== */
body > iframe { position: absolute; width: 0; height: 0; }
.cke div.c2 { line-height: 0; }

.mobile-menu-toggle { display: none; }

/* Greater than standard 1200 (devices and browsers) */
@media only screen and (max-width: 1200px) {
	body.home nav,
	nav { margin-left: 0; }
	nav:after { display: none; }
	nav h1 { margin-left: 0; }
	nav ul { margin-right: 0; }
	a.more { right: 1em; }
	
	
	#subscribe .col { padding: 1.5em; }
	ul.related { left: 0; width: 90%; margin: 0 5%; }
}

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 1024px) {
	.mobile-menu-toggle {
		position: relative;
		padding-left: 1.25em;
		background: transparent;
		display: block;
		font-size: 16px;
		line-height: 16px;
		position: absolute;
		top: 12px;
		right: 1rem;
		margin: 0;
	}
	.mobile-menu-toggle:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 2em;
		height: 3px;
		border-top: 9px double #000;
		border-bottom: 9px double #000;
	}
	
	nav {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		flex-basis: 100%;
		max-width: 100%;
		padding: 3rem 0 0 0;
	}
	nav ul.nav_1 { display: none; }
	nav.show ul.nav_1 { display: block; width: 100%; margin: 20px 0; background: #fff; }
	nav.show ul.nav_1 li { width: 100%; border: none; border-bottom: 1px solid #777; }
	nav.show ul.nav_1 li a { padding: 10px; text-align: left; }
	nav.show ul.nav_1 > li > ul { display: block; position: relative; width: 100%; padding: 0 0 0 1rem; border: none; font-size: 1rem; background: #f3f4f4; }
	nav.show ul.nav_1 > li > ul > li { border: none; border-top: 1px solid #777; }
	nav.show ul.nav_1 > li > ul > li:first-child { border: none; }
	nav.show ul.nav_1 li > ul.nav_2 li a { padding: 10px; }
	
	header .container { width: 100%; padding: 0 1rem; margin: 0 auto; }
	header .container ul.translate { top: 50px; right: 1rem; }
	
	div.banner { min-height: 80px; }
/*
	#header div.slider-wrapper { width: 100%; height: auto; }
	#header div.slider-wrapper ul.slider { min-height: 80px; }
*/
	.content .container,
	#content .container { padding: 1.5em; }
	#testimonials { margin: 30px 0 0 0; }
	#testimonials .container { padding: 0 1.5em; }
	
	ul.related { left: 0; width: 90%; margin: 0 5%; }
	
	#introduction .container { padding: 1.5em; }
	
	div.blurb { flex-basis: 100%; max-width: 100%; }
	div.blurb:nth-child(2) { border-top: 1px solid #000; }
	div.blurb img { width: 15% }
	
	#home-testimonials .slick-next { right: 0; }
	#home-testimonials .slick-prev { left: 0; }
	#home-testimonials .container svg#open-quo { left: 5px; }
	#home-testimonials .container svg#close-quo { right: 5px; }
	
	#home-partners ul { display: block; }
	
	
	iframe,
	#fdi-video iframe { max-width: 100%; max-height: 480px; }
	#infoblock-container { margin: 0; }
	
	#subscribe div.col { padding: 1rem; }
	
	footer > .container { width: 100%; left: 0; padding: 0; margin: 0; text-align: left; box-sizing: border-box; }
	footer > .container div.col,
	footer > .container div.col:nth-child(1) { padding: 1rem; }
	footer > .container p { font-size: 14px; }
	
	

	
}

/* Tablet Portrait size to standard 768 (devices and browsers) */
@media only screen and (max-width: 768px) {
	nav h1 { width: 40%; }
	
	div.banner { min-height: 0; }
	div.banner > img.tagline { top: 60%; left: 1.5em; width: 45%; margin: 0; }
	
	iframe,
	#home-introduction iframe { max-width: 100%; max-height: 400px; }
	.cke div.c2 { width: 100%; margin: 0 0 2% 0; }
	
	#content .container { padding: 1.5em; }
	#content .container .main { width: 100%; padding: 0; }
	.sidebar div.staffer.connect .contact-info { width: 68%; }
	
	.cke div.c1,
	.cke div.c2,
	.cke div.c3,
	.cke div.c4,
	.cke div.c5,
	.cke div.c6 { width: 100%; margin: 0 0 15px 0; }
	
	#testimonials .container > blockquote { padding: 15px 0; }
	#testimonials .container > blockquote > p { font-size: 16px; line-height: 1.2; }
	
	div.news-posts div.news-post,
	div.news-posts div.news-post.first { width: 100%; margin: 0 0 20px 0; }
	div.news-releases div.news-release img { width: 100%; margin: 0 0 15px 0; }
	div.news-releases div.news-release div.post-info { width: 100%; }
	div.news-releases div.news-release div.post-info h3,
	div.news-releases div.news-release div.post-info p.brief { width: 100%; }
	
	.content .container > h2:first-of-type,
	.content .container .main > h2:first-of-type,
	h2.section-heading { padding: 10px 15px; }
	
	.content .container > h2:first-of-type:after,
	.content .container .main > h2:first-of-type:after,
	h2.section-heading:after { display: none; }
	
	#home-connect .container { width: 100%; padding: 1em; margin: 0; }
	div.staffer.connect,
	div.staffer.connect:nth-child(2n+1) { width: 70%; margin: 0 15% 1em 15%; }
	
	#subscribe .container { padding: 30px 0; }
	#subscribe div.col { flex-basis: 49%; max-width: 49%; padding: 1rem; }
	#subscribe div.col:nth-child(2) { max-width: 49%; }
	#subscribe .col ul.footer-nav { width: 100%; }
	#subscribe .col ul.footer-nav a { padding: 0.625rem 0; text-align: left; }
	#subscribe .container div:nth-of-type(3n) img { width: 100%; min-height: 10px; margin: 0 0 5px 0; }
	
	footer > .container div.col { flex-basis: 49%; max-width: 49%; padding: 1rem 3rem; }
	footer > .container div.col:nth-child(1) { order: 1; flex-basis: 100%; }
	
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 670px) {
	
	iframe,
	#home-introduction iframe { max-width: 100%; max-height: 180px; }
	a.more { position: relative; top: auto; right: auto; width: 100%; margin: 0 0 15px 0;  text-align: left; }
	
	header .container > h1 { flex-basis: 45%; max-width: 45%; }
		
	form.standard .input.checkbox { width: 50%; }
	
	div.banner .container > h2 { padding: 3rem 0 0 0; }
	
	#introduction .container { padding: 1.5em; }
	.info-block h2 { font-size: 20px; }
	
	#home-introduction { padding: 1em 0; }
	
	#home-posts .container .feature-posts div.feature-post { width: 100%; margin: 0 0 10px 0; }
	
	#testimonials { margin: 30px 0 0 0; }
	#testimonials .container > h3 { margin: -75px 0 60px 15px; }
	
	#home-testimonials .container div.quote { padding: 3.5em 1.5em 3.5em 1.5em; }
	#home-testimonials .container svg#open-quo { top: 0; left: -5px; }
	#home-testimonials .container svg#close-quo { bottom: 50px; right: -5px; }
	#home-testimonials .container div.quote div.quote-content p { font-size: 1rem; line-height: 1.1; }
	#home-testimonials .container div.quote p.credit { left: 8%; width: 84%; font-size: 1rem; line-height: 1.25; }
	
	.content .container > h2:first-of-type,
	.content .container .main > h2:first-of-type,
	h2.section-heading { padding: 10px 15px; }
	
	#successful-companies { padding: 1.5rem; }
	#successful-companies ul.slick-dots { width: 50%; margin: 0 auto; }
	
	div.blurb { flex-wrap: wrap; }
	div.blurb img { width: 100%; padding: 2em 5em; }
	div.blurb div.blurb-block { max-width: 100%; }
	
	div.staffer.connect,
	div.staffer.connect:nth-child(2n+1) { width: 100%; margin: 0 0 1em 0; }
	div.staffer.connect .contact-info p { font-size: 0.875rem; }	
	div.staffer.connect .contact-info p b.name { font-size: 1rem; }
	
	
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 520px) {
	iframe, #fdi-video iframe { max-height: 180px; }
	iframe.widget { width: 100%; height: 770px; margin: 0 auto; }
	
	div.banner .container { top: 0; left: 0; bottom: 0; right: 0; padding: 0 1rem; }
	div.banner .container > img { margin: 2rem 0 0 0; }
	div.banner .container > h2 { flex-basis: 60%; flex-grow: 1; padding: 1.5rem 0 0 0; font-size: 2.5rem; }
	
	div.sector-success { flex-wrap: wrap; }
	div.sector-success div.sectorsuccess-stat { width: 100%; }
	div.sector-success div.sectorsuccess-desc { width: 100%; padding: 1.5rem 0 0 0; }
	
	div.video-list button.slick-next { right: -30px; }
	div.video-list button.slick-prev { left: -30px; }
	#key-sectors ul.sectors button.slick-prev { left: -30px; }
	#key-sectors ul.sectors button.slick-next { right: -30px; }
	
	#successful-companies ul.slick-dots { width: 70%; margin: 0 auto; }
	
	div.content#introduction { margin: 0; }
	
	div#mfm-contact .container { padding: 0 1.5em 2rem 1.5em; }
	div#mfm-contact .container > img { flex-basis: 50%; max-width: 50%; margin: 0 auto; }
	div#mfm-contact .container > div.content-body { max-width: 100%; }
	
	#subscribe div.col { flex-basis: 100%; max-width: 100%; }
	#subscribe div.col:nth-child(2) { max-width: 100%; }
	
	footer > .container div.col { padding: 1rem; }
	
}