/*
	(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; }

/* smaller than standard 2400 (devices and browsers) */
@media only screen and (max-width: 2400px) {

	div.separator.marquee > ul li { font-size: 10.5rem; }
	div.separator.marquee > ul li img { max-height: 9rem; }

}

/* smaller than standard 2000 (devices and browsers) */
@media only screen and (max-width: 2000px) {

	div.separator.marquee > ul li { font-size: 7rem; }
	div.separator.marquee > ul li img { max-height: 7rem; }

}

/* smaller than standard 1600 (devices and browsers) */
@media only screen and (max-width: 1600px) {

	div.separator.marquee > ul li { font-size: 5.5rem; }
	div.separator.marquee > ul li img { max-height: 5.5rem; }

}

/* smaller than standard 1200 (devices and browsers) */
@media only screen and (max-width: 1200px) {

	div.separator.marquee > ul li { font-size: 5rem; }
	div.separator.marquee > ul li img { max-height: 5rem; }

}

/* 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 #fff;
		border-bottom: 9px double #fff;
	}

	header { position: relative; }
	div.content#introduction > div#top { padding: 0; }

	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: #000; }
	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; }

	header .container { width: 100%; padding: 0 1rem; margin: 0 auto; }

}

/* Tablet Portrait size to standard 850 (devices and browsers) */
@media only screen and (max-width: 850px) {

	body { overflow-x: hidden; }
	.container,
	section#live-thrive div.container,
	section#creative-industries div.container,
	footer div.container { padding: 0 1rem; }
	section { padding: 1.5rem 0; }
	header h1 { max-width: 30%; }
	div.video-placeholder { min-height: 0; }
	div.content#introduction h1 { display: block; font-size: 3rem; line-height: 1; text-align: left; }
	div.content#introduction h1 img { float: right; max-width: 40px; margin: 5px 0 0 1rem; }
	a.button.super { font-size: 3rem; }
	h2.section-heading { font-size: 2rem; letter-spacing: 0.5px; }
	div.heading { margin: 0 0 1.5rem 0; }
	section#tax-benefits h2.section-heading { flex: 1 0 50%; max-width: 75%; margin: 0; }
	div.advantages figure p { padding: 0 1rem; }
	section#live-thrive div.container > div.description h2 { padding: 0 70px 0 0; font-size: 1.75rem; }
	section#live-thrive div.container > div.description ul { font-size: 1.25rem; }
	section#live-thrive div.container > div.description ul li { line-height: 1.1; margin-bottom: 0.5rem; }
	section#live-thrive div.container > div.quote { padding: 1.5rem 4rem 0 4rem; }
	section#live-thrive div.container > div.quote p { font-size: 1.25rem; margin-bottom: 2rem; }
	section#creative-industries div.container aside ul { font-size: 1rem; }

	div.separator.destinations > ul li { font-size: 1.75rem !important; padding: 0 !important; }
	div.separator.marquee > ul li { font-size: 3.5rem !important; }
	div.separator.marquee > ul li img { max-height: 3.25rem; }

	form.standard {  }
	form.standard div.input.text,
	form.standard div.input.email,
	form.standard div.input.select { flex: 0 0 100%; max-width: 100%; }

	footer { padding: 1.5rem 0; }

}

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

	.cke div.c2 { flex: 0 0 100%; max-width: 100%; }
	header h1 { max-width: 50%; }
	div.video-placeholder { min-height: 0; }
	div.content#introduction h1 { display: block; font-size: 2.25rem; text-align: left; }
	div.content#introduction h1 img { float: right; max-width: 65px; margin: -2rem 0 0 1rem; }
	a.button.super { font-size: 1.75rem; column-gap: 0.625rem; }
	a.button.super > img { flex: 1 0 30px; max-width: 30px; }
	section#tax-benefits h2.section-heading { flex: 1 0 100%; max-width: 100%; padding: 0; font-size: 1.75rem; }
	div.separator.destinations > h2 { padding: 0 2rem; }
	div.separator.marquee > ul li { font-size: 1.5rem !important; }
	div.separator.marquee > ul li img { max-height: 1.75rem; }
	section#creative-industries div.container aside { flex: 0 0 100%; max-width: 100%; }
	section#creative-industries div.container div.industry-set { flex: 0 0 100%; max-width: 100%; }
	footer > .container div.col { flex: 0 0 32%; max-width: 32%; }

}

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

	div.advantages figure { flex: 0 0 100%; max-width: 100%; }
	div.advantages figure p { min-height: auto; }
	section#live-thrive div.container > figure,
	section#live-thrive div.container > div.description { flex: 0 0 100%; max-width: 100%; }
	section#live-thrive div.container > div.quote { padding: 1.5rem 0 0 0; }
	section#live-thrive div.container > div.quote p { font-size: 1rem; }

	section#successes div.video-placeholder { display: none; }


	footer > .container div.col { flex: 0 0 100%; max-width: 100%; margin-bottom: 30px; }
	footer > .container div.col ul.social li a svg { order: 0; }
	footer > .container div.col ul.social li a span { order: 1; text-align: left; }

}