/* ------------------------------------------------------------ *\
	Responsive
\* ------------------------------------------------------------ */

.header-toggle { width: 40px; height: 40px; display: none; position: absolute; top: 44px; right: 15px; z-index: 20; padding: 0; border: 1px solid transparent; margin: 0; background-color: transparent; border-radius: 4px; box-shadow: none; -webkit-appearance: none; }
.header-toggle:focus { outline: 0 none; }
.header-toggle span { width: 22px; height: 3px; display: block; margin: auto; position: relative; background-color: #000; border-radius: 2px; }
.header-toggle span + span { margin-top: 4px; }

.mobile-cart,
#mobile-top-links { display: none; }

.intro > div.video { float: right; display: block; margin-bottom: 20px; position: absolute; top: 5px; right: 5px; }
	.intro .video-button { display: block; position: relative; }
.intro .video-button img { width: 100%; height: auto; display: block; }

.intro .video-button:before,
.intro .video-button:after { content: ''; display: block; position: absolute; top: 50%; left: 50%; }

.intro .video-button:before { width: 40px; height: 40px; border: 5px solid #fff; margin: -20px 0 0 -20px; border-radius: 50%; }
.intro .video-button:after { width: 0; height: 0; border: 10px solid transparent; border-left: 14px solid #fff; margin: -4px 0 0 -1px; }

.intro .video-button:hover:before { border-color: #000; }
.intro .video-button:hover:after { border-left-color: #000; }

.video-popup { opacity: 0; visibility: hidden; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background-color: rgba(0,0,0,.75); 
	-webkit-transition: opacity .5s, visibility .5s;
			transition: opacity .5s, visibility .5s;
}
.video-popup.visible { opacity: 1; visibility: visible; z-index: 50; }
.video-popup iframe { display: block; position: absolute; top: 50%; left: 50%; margin: -162px 0 0 -280px; }
.video-popup .popup-close { font-size: 35px; line-height: 40px; color: #fff; text-align: center; font-weight: normal; width: 40px; height: 40px; display: block; position: absolute; top: 15px; right: 15px; cursor: pointer; }

a,
.top {
	-webkit-transition: color .4s ease, border-color .4s ease, background-color .4s ease;
			transition: color .4s ease, border-color .4s ease, background-color .4s ease;
}

.header-toggle span {
	-webkit-transform: rotate(0deg);
	-webkit-transition: -webkit-transform .3s ease;
			transform: rotate(0deg);
			transition: transform .3s ease;
}

.top { position: fixed; top: 0; left: 0; right: 0; z-index: 10; background: #F0F0F0 url(images/bg.png) repeat-x 0 0; }
.top-inner { width: 980px; height: 118px; margin: auto; position: relative; }

.picker { padding: 0 2% 0 2%; }
.picker:after { content: ''; line-height: 0; display: table; clear: both; }

.galbox { float: left; margin: 1%; padding: 0; overflow: hidden; }
.galbox.w4  { width: 23% }
.galbox.w3 { width: 31.333333% }
.galbox.w2   { width: 48% }
.galbox.w1   { width: 98% }
.galbox div { padding: 3% }

@media only screen and ( max-width: 1023px ) {
	html,
	body { height: 100%; padding: 0; margin: 0; }

	ul { padding-left: 20px; }

	#main { width: auto; position: static; padding: 125px 15px 15px; }
	#logo { width: 161px; position: static; top: auto; margin: 2px auto 0 0; }

	.top { position: fixed; top: 0; left: 0; right: 0; z-index: 80; background: transparent; }
	.top-inner { width: auto; height: auto; }
	.scrolled .top-inner { height: 90px; }

	.header-toggle { display: block; }

	.header { max-height: 0; position: relative; z-index: 5; margin-top: -38px; overflow: hidden; background-color: #2b2b2b; 
		-webkit-transition: max-height .5s linear;
				transition: max-height .5s linear;
	}

	.show-popup #content { position: relative; top: auto; z-index: 90; }

	.scrolled .top { background-color: rgba(186,186,186,.95); }
	.scrolled #logo img { width: 120px; height: auto; }
	.scrolled .header-toggle { top: 24px; }
	.scrolled .mobile-cart { top: 34px; }
	.scrolled .header { margin-top: -26px; }

	.show-header .header { max-height: 800px; }
	.show-header .header-toggle { background-color: #2b2b2b; }
	.show-header .header-toggle span { background-color: #fff; }
	.show-header .header-toggle span:nth-child(2) { display: none; }
	.show-header .header-toggle span:nth-child(1) {	top: 4px; 

		-webkit-transform: rotate(-45deg);
				transform: rotate(-45deg);
	}
	.show-header .header-toggle span:nth-child(3) {	top: -3px; 

		-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
	}

	.mobile-cart { display: block; position: absolute; top: 51px; right: 68px; }

	#tabnav { width: auto; height: auto; position: static; top: auto; padding: 0; border: 0; border-left: 0; border-color: transparent; margin: 0; background-color: transparent; }
	#tabnav:after { content: ''; line-height: 0; display: table; clear: both; }
	#tabnav li { width: 50%; float: left; display: block; border: 0; }
	
	#tabnav li a,
	#tabnav li a:link,
	#tabnav li a:visited { font-size: 14px; line-height: 20px; color: #fff; text-shadow: none; text-align: center; width: auto; float: none; display: block; padding: 10px; border: 0; border-bottom: 1px solid #404040; cursor: pointer; }

	#tabnav li a:hover,
	#tabnav li a:active { background-color: #888; }
	#tabnav li:last-child a { border-bottom: 0; }

	#cart { position: static; top: auto; right: auto; margin: 10px 10px 2px; display: none; }

	#toplinks { display: none; }

	#mobile-top-links { font-size: 14px; line-height: 20px; position: absolute; top: 44px; right: 92px; padding: 10px; margin: 0; display: block; }
	#mobile-top-links a { font-size: 16px; color: #000; text-decoration: none; margin-right: 10px; }

	.scrolled #mobile-top-links { top: 25px; }
	
	#mobile-top-links a,
	#mobile-top-links a:link,
	#mobile-top-links a:visited { font-size: 14px; }

	#content { width: auto; position: static; top: auto; padding: 15px; }
	#content > iframe { display: none; }

	.bighead { font-size: 35px; line-height: 1; padding-bottom: 3px; margin: 0; }

	.running { margin: 0; }
	.running + .running { clear: both; }
	.running + div:not([class]) { display: none; }

	.intro { width: auto; }
	.intro > div { width: 49% !important; float: left; }
	.intro > div.video { position: static; top: auto; right: auto; }

	.cols { width: auto; }
	.cols:after { content: ''; line-height: 0; display: table; clear: both; }

	.cols .left,
	.cols .right { width: 49%; }

	.details { width: auto; margin: 0; }
}

@media only screen and ( max-width: 767px ) {
	.intro > div { width: auto !important; float: none; }
	.intro > div.video { float: none; }

	.cols .left, 
	.cols .right { width: auto; float: none; }

	.galbox.w4   { width: 48% }
	.galbox.w3   { width: 48% }
}

@media only screen and ( max-width: 640px ) {
	.video-popup iframe { width: 440px; height: 260px; margin: -130px 0 0 -220px; }
}

@media only screen and ( max-width: 480px ) {
	.video-popup iframe { width: 280px; height: 200px; margin: -100px 0 0 -140px; }

	#logo { width: 120px; padding-top: 17px; }
	#logo a { display: block; }
	#logo img { width: 100%; height: auto; display: block; }

	.header { margin-top: -26px; }

	.scrolled .header { margin-top: -27px; }

	.scrolled #logo { padding-top: 0; }

	.galbox.w4   { width: 98% }
	.galbox.w3   { width: 98% }
	.galbox.w2   { width: 98% }
}