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


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

.mobile-menu-toggle {
	display: none;
	position: absolute;
	z-index: 1000;
	top: -60px;
	right: 0;
	width: 30px;
	padding: 3px 0 0 0;
	border-top: 9px double #000;
	border-bottom: 9px double #000;
	line-height: 0;
}
	
	/* Greater than 1450 (devices and browsers) */
	@media only screen and (min-width: 1200px) {
		
	}
	
	/* Smaller than 1200 (devices and browsers) */
	@media only screen and (max-width: 1200px) {
		.container,
		.site-header > .container,
		main .container,
		.site-footer .container { left: auto; width: 100%; margin: 0; padding: 15px; }
		.site-header > .container { padding: 0 15px; }
		.site-header > .container:after { display: none; }
	}
	
	/* Smaller than standard 1024 (devices and browsers) */
	@media only screen and (max-width: 1024px) {
		main.internal div.acknowledgement { height: auto; }
	}
	
	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 768px) {
		body.home { overflow: auto; }
		
		.cke > .c2,
		.cke > .c3 { width: 100%; margin: 0; }
		iframe { max-width: 100%; }
		.form-block form.fm-form div.input-text,
		.form-block form.fm-form div.input-email,
		.form-block form.fm-form div.input-datepicker { flex-basis: 100%; }
		
		main { display: block; }
		
		.primary,
		.sidebar { display: block; position: relative; width: 100%; }
		
		div.article-set article { padding: 30px 15px; }
		div.article-set article:first-child { padding: 0 15px 30px 15px; }
		div.article-set article h3 span.date { display: block; width: 100%; margin: 0 0 10px 0; }
		div.article-set article h3 a { display: block; }
		
		main.internal .event-set > .event { width: 100%; margin: 0 0 15px 0; }
		.event-display div.no-event-image { width: 100%; margin: 0 0 15px 0; }
		.event-display div.no-event-image h3 { padding: 2em 1em; font-size: 40px; }
		.event-display .event-copy { width: 100%; padding: 0; margin: 0; }
		
		.booking-block { padding: 0; }
		#calendar-set .calendar .calendar-week.labels { display: none; }
		#calendar-set .calendar .calendar-week { margin: 0; }
		#calendar-set .calendar .calendar-week .day { flex-basis: 33%; margin-bottom: 1px; }
		#calendar-set .calendar .calendar-week .day span:first-child:after {
			content: " day";
			font-size: 12px;
			font-weight: 300;
		}
		#calendar-set .calendar .calendar-week .day.sun span:first-child:after { content: " Sunday"; }
		#calendar-set .calendar .calendar-week .day.mon span:first-child:after { content: " Monday"; }
		#calendar-set .calendar .calendar-week .day.tue span:first-child:after { content: " Tuesday"; }
		#calendar-set .calendar .calendar-week .day.wed span:first-child:after { content: " Wednesday"; }
		#calendar-set .calendar .calendar-week .day.thu span:first-child:after { content: " Thursday"; }
		#calendar-set .calendar .calendar-week .day.fri span:first-child:after { content: " Friday"; }
		#calendar-set .calendar .calendar-week .day.sat span:first-child:after { content: " Saturday"; }
		#calendar-set .calendar .calendar-week .day span.marked { padding-top: 30px; }
		#calendar-set .calendar .calendar-week .day span.marked:after { top: 50px; }
		
		div.product-purchase > div.product-image { flex-basis: 100%; max-width: 100%; order: 1; }
		div.product-purchase > div.product-description { flex-basis: 100%; max-width: 100%; order: 2; }
		
		.auction-list-item { width: 49%; }
		.auction-item .item-summary { flex-wrap: wrap; }
		.auction-item .figure-set,
		.auction-item .interface-set { flex-basis: 100%; width: 100%; }
		.auction-item dt { flex-basis: 35%; }
		.auction-item dd { flex-basis: 65%; }
		
		main.internal div.acknowledgement ul.footer-nav { width: 100%; margin: 0; }
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 670px) {
		body { display: block; position: relative; }
		div.site-container { flex-wrap: wrap; }
		header.site-header { display: block; clear: both; float: left; width: 100%; max-width: 100%; }
		
		.site-header > .container { padding: 0; }
		.site-title { margin: 1em 0; }
		.site-title > a { min-height: 120px; }
		
		main,
		main.internal { display: block; clear: both; float: left; width: 100%; overflow: auto; }
		
		body.home div.no-event-image h3 { padding: 3em 1em; }
		
		nav.main-nav { position: relative; }
		.mobile-menu-toggle { display: block; }
		nav.main-nav ul.nav-1 { display: none; }
		.no-js nav.main-nav ul.nav-1 { display: block; }
		
		
		div.article-set article { padding: 15px 0; }
		div.article-set article:first-child { padding: 0 0 15px 0; }
		
		div.product-set div.product-listing { flex-basis: 49%; max-width: 49%; }
		.gallery-set > li { flex-basis: 32%; max-width: 32%; }
		
		.banner-set { display: none; }
		.form-block { padding: 15px; }
		
		#calendar-set .calendar .calendar-week .day span { font-size: 12px; }
		#calendar-set .calendar .calendar-week .day span:first-child:after { font-size: 10px; }
		
		main.internal div.acknowledgement ul.footer-nav { display: block; }
		main.internal div.acknowledgement ul.footer-nav li { flex-basis: 100%; }
		main.internal div.acknowledgement ul.footer-nav li a { padding: 10px; }
	}
	
	@media only screen and (max-width: 520px) {
		.location ul { width: 80%; margin: 0 auto; }
		
		div.product-set div.product-listing { flex-basis: 100%; max-width: 100%; }
		div.product-purchase > div.product-image { flex-basis: 100%; max-width: 100%; }
		.gallery-set > li { flex-basis: 49%; max-width: 49%; }
		div.product-purchase > div.product-description { flex-basis: 100%; max-width: 100%; }
		div.product-purchase > div.product-description > form { padding: 0 0 1.25rem 0; border-bottom: 1px solid #000; } 
		
		.auction-list-item { width: 100%; }
		.auction-item dl { font-size: 0.8em; }
		.auction-item dt { flex-basis: 40%; }
		.auction-item dd { flex-basis: 60%; }
		.auction-item .item-details p { font-size: 0.8em; }
	}