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


/* !Media Queries ============================== */

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

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 960px) {
		.container { box-sizing: border-box; width: 100%; padding: 3%; }
		#header .container { box-sizing: border-box; width: 100%; padding: 0 3% 0 0; }
		#nav .container { box-sizing: border-box; width: 100%; padding: 1.5em; }
		#nav ul { width: 100%; }
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 768px) {
		#header h1 { float: left; width: 100%; background: none; }
		#header h1 .logo { padding: 50px 0 0 0; }
		p#tagline { top: 75%; width: 80%; }
		#nav {  }
		#nav a.mn-toggle {
			display: block;
			position: relative;
			z-index: 1;
			width: 60px;
			padding: 0;
			margin: 0 0 0 15px;
			font-size: 18px;
			text-align: right;
			text-transform: uppercase;
			cursor: pointer;
			color: #fff;
		}
		#nav a.mn-toggle:before {
			content: "";
			display: block;
			position: absolute;
			top: 2px;
			left: -1em;
			width: 25px;
			height: 2px;
			border-top: 6px double #fff;
			border-bottom: 6px double #fff;
		}
		#nav ul.nav_1 {
			display: none;
			position: relative;
			clear: both;
			float: left;
			width: 100%;
		}
			#nav ul.nav_1 li {
				display: block;
				position: relative;
				float: left;
				width: 100%;
			}
				#nav ul.nav_1 li ul {
					display: block;
					position: relative;
					float: left;
					width: 100%;
					background: none;
					box-shadow: none;
				}
					#nav ul.nav_1 li ul li {
						display: block;
						position: relative;
						float: left;
						width: 50%;
					}
					#nav ul.nav_1 li ul li:nth-of-type(2n+1){ clear: both; float: left; }
						#nav ul.nav_1 > li > ul li a,
						#nav ul.nav_1 > li:hover > ul li a,
						#nav ul.nav_1 > li.at > ul li.at a { width: 90%; padding: 3% 3% 3% 7%; color: #fff; }
						#nav ul.nav_1 > li:hover > ul li:hover a,
						#nav ul.nav_1 > li > ul li:hover a,
						#nav ul.nav_1 > li > ul li.at a { color: #fff; }
		#nav ul.member_nav_1 {
			clear: both;
			float: left;
			width: 100%;
			border-top: 1px dotted #fff;
		}
			#nav ul.member_nav_1 li {
				float: left;
				width: 100%;
				padding: 0;
			}
		
		.member-nav .user {
			float: left;
			clear: both;
		}
		.member-nav .subscription {
			float: left;
			clear: both;
		}
		
		#introduction h2 { font-size: 32px; line-height: 36px; }
		#introduction h2:before { left: -10px; }
		#introduction p { line-height: 36px; }
		#main,
		#sidebar { clear: both; float: left; width: 100%; padding: 0; margin: 0; border: none; }
		
		ul.seminar-list li .heading { width: 100%; margin-bottom: 5px; }
		ul.seminar-list li a.register { clear: both; float: left; width: 35%; }
		a.subscribe.elert { box-sizing: border-box; width: 70%; padding: 10px 20px; margin: 0 15%; }
		
		#footer div.column { width: 100%; margin: 0; }
		#footer div.column:nth-of-type(2n) { display: none; }
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 670px) {
		h1 { font-size: 40px; }
		#introduction h2 { font-size: 30px; line-height: 1.1; }
		#tip h2 { width: 100%; margin-left: 0; }
		form.standard .input.text label, form.standard .input.select label, form.standard .input.textarea label { width: 100%; text-align: left; }
		form.standard .input.text input[type="text"], form.standard .input.text input[type="password"] { width: 100%; float: left; }
		form.standard .input.select select { width: 100%; float: left; }
		form.standard .input.checkbox { width: 100%; float: left; }
		#footer div.column h2 { font-size: 35px; }
		#footer div.column h2 span { font-size: 12px; }
		
		.presenter-headshots {  }
		.presenter-headshots > div { width: 32% !important; }
		.presenter-headshots > div:nth-child(3n+1) { margin-left: 0; }
	}