/* HEY THERE! JUST SOME HAND CODED CSS HERE FOLKS. NONE OF THIS PREMADE FRAMEWORK OR GRID SYSTEM. WE DO IT CUSTOM BECAUSE EVERY JOB IS DIFFERENT! */



/* RESET / HTML5 / CLEAR FIX /////////////////////////////////////// */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,input,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {margin:0;padding:0;border:0;text-decoration:none;list-style:none;}
header,footer,nav,section,article,aside {display:block;}
.clear					{ clear: both; content: "."; height: 0; visibility: hidden; display: block; }
.hidden					{ display: none; }
html	{ -webkit-text-size-adjust: 100%; }
input, textarea	{ -webkit-appearance: none; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; }



/* ////////// FONTS /////////// */

@font-face {
    font-family: 'MuseoSansRounded';
    src: url('../fonts/MuseoSansRounded-100-webfont.eot');
    src: url('../fonts/MuseoSansRounded-100-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/MuseoSansRounded-100-webfont.woff') format('woff'),
         url('../fonts/MuseoSansRounded-100-webfont.ttf') format('truetype'),
         url('../fonts/MuseoSansRounded-100-webfont.svg#MuseoSansRounded100Regular') format('svg');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'MuseoSansRounded';
    src: url('../fonts/MuseoSansRounded-300-webfont.eot');
    src: url('../fonts/MuseoSansRounded-300-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/MuseoSansRounded-300-webfont.woff') format('woff'),
         url('../fonts/MuseoSansRounded-300-webfont.ttf') format('truetype'),
         url('../fonts/MuseoSansRounded-300-webfont.svg#MuseoSansRounded300Regular') format('svg');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'MuseoSansRounded';
    src: url('../fonts/MuseoSansRounded-500-webfont.eot');
    src: url('../fonts/MuseoSansRounded-500-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/MuseoSansRounded-500-webfont.woff') format('woff'),
         url('../fonts/MuseoSansRounded-500-webfont.ttf') format('truetype'),
         url('../fonts/MuseoSansRounded-500-webfont.svg#MuseoSansRounded500Regular') format('svg');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'MuseoSansRounded';
    src: url('../fonts/MuseoSansRounded-700-webfont.eot');
    src: url('../fonts/MuseoSansRounded-700-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/MuseoSansRounded-700-webfont.woff') format('woff'),
         url('../fonts/MuseoSansRounded-700-webfont.ttf') format('truetype'),
         url('../fonts/MuseoSansRounded-700-webfont.svg#MuseoSansRounded700Regular') format('svg');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'MuseoSansRounded';
    src: url('../fonts/MuseoSansRounded-900-webfont.eot');
    src: url('../fonts/MuseoSansRounded-900-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/MuseoSansRounded-900-webfont.woff') format('woff'),
         url('../fonts/MuseoSansRounded-900-webfont.ttf') format('truetype'),
         url('../fonts/MuseoSansRounded-900-webfont.svg#MuseoSansRounded900Regular') format('svg');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'MuseoSansRounded';
    src: url('../fonts/MuseoSansRounded-1000-webfont.eot');
    src: url('../fonts/MuseoSansRounded-1000-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/MuseoSansRounded-1000-webfont.woff') format('woff'),
         url('../fonts/MuseoSansRounded-1000-webfont.ttf') format('truetype'),
         url('../fonts/MuseoSansRounded-1000-webfont.svg#MuseoSansRounded1000Regular') format('svg');
    font-weight: 1000;
    font-style: normal;
}
@font-face {
    font-family: 'Museo';
    src: url('../fonts/museo500-regular-webfont.eot');
    src: url('../fonts/museo500-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/museo500-regular-webfont.woff') format('woff'),
         url('../fonts/museo500-regular-webfont.ttf') format('truetype'),
         url('../fonts/museo500-regular-webfont.svg#Museo500') format('svg');
    font-weight: 500;
    font-style: normal;
}





@font-face { font-family: 'GoodDog'; src: url('../fonts/GoodDog-webfont.eot'); src: url('../fonts/GoodDog-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/GoodDog-webfont.woff') format('woff'), url('../fonts/GoodDog-webfont.ttf') format('truetype'), url('../fonts/GoodDog-webfont.svg#GoodDogRegular') format('svg'); font-weight: normal; font-style: normal; }



/* /////// MAIN LAYOUT //////// */
body					{ background: #FFF; height: 100%; margin: 0; background-attachment: fixed; font-family: 'MuseoSansRounded', Tahoma, sans-serif; font-weight: 300; font-size: 62.5%; text-align: center; color: #000; text-align: center; }
html 					{ -webkit-font-smoothing: antialiased; } /* MAKE STUFF PRETTY IN WEBKIT */
.sw						{ width: 960px; position: relative; margin: 0 auto; text-align: left; }
.container				{ padding: 30px 0; text-align: left; }
.main-content			{ padding: 3em 0 }
.noscript				{ position: absolute; top: 0; left: 0; width: 100%; padding: 1em; font-weight: bold; color: #fff; background: red; font-size: 1.5em; }
.noscript a				{ color: #000; }


/* /////// COMMON STYLES /////// */
.rnd					{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.gs						{ background-image: url("/images/global/global-sprite.png"); background-repeat: no-repeat; }
.ib			 			{ display: inline-block; zoom: 1; *display: inline; /*display: -moz-inline-stack;*/ }

/* /////// FONTS & STYLES /////// */
a						{ transition: color 250ms, background-color 250ms; -webkit-transition: color 250ms, background-color 250ms; -moz-transition: color 250ms, background-color 250ms; -o-transition: color 250ms, background-color 250ms; -ms-transition: color 250ms, background-color 250ms; }
p						{ margin-bottom: 1em; }
p.bodycopy				{ font-size: 1.5em; line-height: 1.4em; }
p.medcopy				{ font-size: 2em; line-height: 1.4em; color: #555; }
p.highlight				{ font-weight: 100; font-size: 2.6em; color: #666; /*letter-spacing: -0.025em;*/ padding-bottom: 0.4em; }
a						{ color: #7e5fb8; }
a:hover					{ color: #af9ad7; }
a:active				{ color: #FFF; }
a.link					{ font-size: 1.6em; }
a p.bodycopy			{ color: #FFF; }
.text-left				{ text-align: left; }
.text-center			{ text-align: center; }

.sub-title				{ color: #888; font-size: 1.2em; font-weight: normal; }
.sec-title				{ font-size: 5em; }
.med-title				{ font-size: 3.5em; }
.sml-title				{ font-size: 2em; }
.white-heading			{ color: #fff; }

/* ALT FONT */
.af						{ font-family: "GoodDog", sans-serif; font-weight: normal; }


/* GLOBAL HERO STYLES */
.hero					{ margin-bottom: 1em; overflow: hidden; }
.hero h1				{ font-size: 4.3em; line-height: 1.1em; margin-bottom: 0.3em; }
.hero .subheading		{ font-size: 3.5em; color: #8c8c8c; }


/* /////// HEADER /////// */
.logo					{ width: 221px; position: absolute; left: 0; top: 15px }
.header-phone			{ position: absolute; right: 0; top: 30px; font-size: 2.6em; color: #FFF; background-position: left top; padding: 0.4em 0 0.4em 2em; background-size: 50px 50px; }
.primary-nav 			{ padding: 2.1em 0; }
.primary-nav			{ background: #FFF; text-align: center; position: relative; font-size: 1.8em; text-align: right; }
.primary-nav a			{ color: #000; padding: 0 1.34em; text-transform: uppercase; font-weight: bold; display: inline-block; }
.primary-nav a:hover	{ color: #666; }
.primary-nav a:active	{ color: #C5A067; }
.home-page .home-link, .about-page .about-link, .products-page .products-link, .contact-page .contact-link, .system-page .system-link	{ color: #7e5fb8; }	

/* DROP DOWN */
.dropdown-holder		{ display: inline; }
.dropdown				{ position: absolute; background: #FFF; text-align: left; z-index: 4; border: solid 17px #FFF; margin-top: -2px; left: 0; width: 930px; }
.dropdown a				{ padding: 0; display: block; float: left; width: 24%; font-size: .8em; text-align: center; padding: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0.5%; background: #eee;
color: #7e5fb8; }
.dropdown a:hover		{ color: #aa95cf; background: #eee; }
.dropdown a:active		{ color: #5b3f8e; background: #eee; }	
.dropdown h1			{ text-align: center; margin: 0.5em 0; }




/* ////// ACCOUNT & CART BAR //////// */
.account-bar			{ text-align: right; font-weight: bold; padding: 14px 0; }
.account-bar a			{ color: #535353; text-transform: uppercase; font-size: 1.7em; padding-left: 1em; padding-bottom: 5px; }
.header-cart			{ background-position: left 0; background-size: 35px; padding: 5px 0 25px 25px; position: relative; margin-bottom: -5px; }
.header-total			{ font-size: 1.4em; color: #7e5fb8; padding-left: 1.1em; position: relative; }
.red-circle				{ background: #D50016; display: block; position: absolute; left: 20px; top: -10px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; color: #FFF; text-align: center; padding: 0.2em .5em; font-size: .85em; }
.login-link				{ padding-right: 1em; }


/* /////// BUTTONS /////// */
.button					{ display: inline-block; padding: 0.7em 1.1em; font-size: 2em; font-weight: bold; /*letter-spacing: -0.05em;*/ transition: background-color 250ms; -webkit-transition: background-color 250ms; -moz-transition: background-color 250ms; -o-transition: background-color 250ms; -ms-transition: background-color 250ms; background: #000; }
.button, .button:hover, .button:active	{ color: #FFF; }
.button:active			{ -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3); box-shadow: inset 0 1px 2px rgba(0,0,0,0.3); }
.button:hover			{ background: #777; }
.button:active			{ background: #555; }


/* LOGIN DROPDOWN */
.login-dropdown 		{ position: absolute; top: 86px; right: 0; color: #C5A067; z-index: 99999; padding: 0 20px; width: 300px; background-color: #EBEBEB; border: solid 3px #CCC; border-top: none; } /* Dropdown Menu */
.login-dropdown form 	{ margin: 0 0 2em 0; overflow: auto; text-align: left; }
#loader3				{ float: left; margin-left: 15px; }
.login-dropdown	p		{ color: #666; }
.login-dropdown .textbox{ margin-bottom: 15px;  background-color: #666; color: #fff; font-size: 1.6em; transition: background-color 250ms; -webkit-transition: background-color 250ms; -moz-transition: background-color 250ms; -o-transition: background-color 250ms; border: none; padding: 12px 15px; width: 270px; background: #CCC; color: #786969; }
.login-dropdown .textbox:hover { background-color: #DDD; }
.login-dropdown .textbox:focus { background-color: #FFF; color: #666; }
.login-dropdown form .button { font-size: 1.6em; float: left; cursor: pointer; }
label.error         	{ color: #D88184; display: block; margin-top: -10px; margin-bottom: 5px; font-size: 1.1em; text-align: left; }
.confirmation      		{ background: url('../images/global/tick.png') no-repeat left center; font-size: 1.2em; clear: both; padding: 10px 0 5px 40px ; text-align: left; margin-top: 10px; }
.login-dropdown .warning{ background: url('../images/global/warning-login.png') no-repeat left center; font-size: 1.2em; clear: both; padding: 10px 0 10px 35px ; text-align: left; line-height: 1.1em; }
.dark-confirmation		{ background: url('/images/global/login-tick.png') no-repeat left 10px; font-size: 1.5em; clear: both; padding: 20px 0 10px 35px ; text-align: left; }
.need-help				{ display: block; text-align: left; color: #000 !important; padding: 1.5em 0 2em 35px!important; background: url('/images/global/need-help.png') no-repeat left 12px; font-size: 1.2em !important; text-transform: none !important; border-top: solid 1px #CCC; }
.need-help b			{ color: #888; }
.need-help:hover		{ color: #999!important; }

/* /////// COLUMNS //////// */
.col					{ float: left; }
.row					{ overflow: auto; clear: both; }
.sep					{ margin-bottom: 30px; }
.half					{ width: 48%; margin-right: 4%; }
.third					{ width: 31%; margin-right: 3.47%; }
.third:nth-child(3n)		{ margin-right: 0; }
.quarter				{ width: 22%; margin-right: 4%; }
.quarter:nth-child(4n)	{ margin-right: 0; }
.quarter:nth-child(4n+5) { clear: both; }
.fifth					{ width: 18%; margin-right: 2.5%; }
.fifth:nth-child(5n)	{ margin-right: 0; }
.fifth:nth-child(5n+6)	{ clear: both; }
.sixth					{ width: 15%; margin-right: 2%; }
.sixth:nth-child(6n)	{ margin-right: 0; }
.seventh				{ width: 13%; margin-right: 1.5%; }
.seventh:nth-child(7n)	{ margin-right: 0; }
.eighth					{ width: 11%; margin-right: 1.714%; }
.eighth:nth-child(8n)	{ margin-right: 0; }

.two-third				{ width: 65%; margin-right: 3%; }
.three-quarter			{ width: 74%; margin-right: 4%; }
.two-fifth				{ width: 38.5%; margin-right: 2.5%; }
.three-fifth			{ width: 59%; margin-right: 2.5%; }
.four-fifth				{ width: 79.5%; margin-right: 2.5%; }
.five-sixth				{ width: 83%; margin-right: 2%; }
.three-eighth			{ width: 36.428%; margin-right: 1.714%; }
.three-seventh			{ width: 42%; margin-right: 1.5%; }
.four-seventh			{ width: 56.5%; margin-right: 1.5%; }
.last					{ margin-right: 0 !important; }
.middle					{ margin-left: auto; margin-right: auto; }
.centered				{ margin-left: auto; margin-right: auto; text-align: center; }
.ctr					{ text-align: center; }

.thumb img				{ width: 100%; max-height: 100%; }



/* /////// FEATURE ROWS /////// */
.alt-row				{ border-top: solid 1px #666; border-bottom: solid 1px #666; padding: 30px 0; margin: 30px 0; clear: both; }
.black-row				{ background: #181818; }
.grey-row				{ background-color: #EBEBEB; }




/* /////// FOOTER /////// */
footer, .breadcrumbs	{ padding: 30px 0; overflow: auto; }
.breadcrumbs			{ border-bottom: solid 1px #CCC; }
.breadcrumbs p			{ font-size: 1.5em; color: #999; margin-bottom: 0; }
.location				{ float: left; width: 80%; }
.top-link				{ float: right; width: 20%; text-align: right; }
.copyright				{ float: left; font-size: 1.4em; color: #888; text-align: left; }
.copyright a			{ color: #CCC; }
.copyright a:hover		{ color: #FFF; }
.copyright a:active		{ color: #000; }
.credit					{ float: right;	text-align: right; font-size: 1.4em; }


/* MEDIA QUERIES */


@media screen and (max-width: 980px) {
	.sw						{ width: 90%; padding-left: 5%; padding-right: 5%; }
	.logo					{ left: 5%; }
	.primary-nav a.contact-link { padding: 0px 0px 0px 1.34em; }
	.sec-title				{ font-size: 4em; }
	p.medcopy				{ float: left; width: auto; }
	.shop-button			{ float: right; width: auto; }
	.dropdown				{ padding-left: 0; padding-right: 0; width: 95%; }
	.dropdown a				{ font-size: .8em; width: 32%; }
	.fifth:nth-child(5n+6)	{ clear: none; }

}

@media screen and (min-width: 768px) and (max-width: 980px) {
	/* COLS */
	.fifth 					{ width: 22%; margin-right: 2.5%; }
	.fifth:nth-child(5n)	{ margin-right: 2.5%; }
	.fifth:nth-child(4n)	{ margin-right: 0; }
	.fifth:nth-child(5n+6)	{ clear: none; }
	.fifth:nth-child(4n+5) 	{ clear: both; }
	
	
}	

@media screen and (min-width: 568px) and (max-width: 767px) {
	.fifth 					{ width: 31%; margin-right: 2.5%; }
	.fifth:nth-child(4n)	{ margin-right: 2.5%; }
	.fifth:nth-child(3n)	{ margin-right: 0; }
	
	.fifth:nth-child(4n+5)	{ clear: none; }
	.fifth:nth-child(3n+4) 	{ clear: both; }
	
	.quarter				{ width: 30%; }
	.quarter:nth-child(4n)	{ margin-right: 2.5%; }
	.quarter:nth-child(3n)	{ margin-right: 0; }
	.quarter:nth-child(4n+5){ clear: none; }
	.quarter:nth-child(3n+4){ clear: both; }
}

@media screen and (max-width: 730px) {
	.dropdown				{ display: none!important; }
	footer					{ border-top: solid 1px #CCC; }
	.breadcrumbs			{ display: none; }

}
@media screen and (min-width: 601px) and (max-width: 730px) {
	.primary-nav a			{ padding: 0px 1%; }
	.primary-nav a.contact-link { padding: 0px 0px 0px 1%; }
}

@media screen and (max-width: 600px) {
	.credit, .copyright		{ text-align: center; float: none; }
	.copyright				{ margin-bottom: .2em; }
}

@media screen and (min-width: 480px) and (max-width: 667px) {
	.logo					{ width: 161px; top: -57px; }
	.primary-nav 			{ padding: 0px; text-align: center; }
	.primary-nav a 			{ padding: 1.2em 3%; text-align: center; }
	.primary-nav a.contact-link { padding: 0px 0px 0px 3%; }
	.primary-nav a.products-link	{ border-left: 1px solid #ccc;
	border-right: 1px solid #ccc; }
}

@media screen and (max-width: 567px) {
	p.medcopy, .shop-button { float: none; text-align: center; }
	p.medcopy				{ width: 100%; }
	
	.fifth 					{ width: 48%; margin-right: 2.5%; }
	.fifth:nth-child(2n)	{ margin-right: 0; }
	.fifth:nth-child(3n+4)	{ clear: none; }
	.fifth:nth-child(2n+3) 	{ clear: both; }
	
	.quarter				{ width: 48%; }
	.quarter:nth-child(2n)	{ margin-right: 0; }
	.quarter:nth-child(4n+5){ clear: none; }
	.quarter:nth-child(2n+3){ clear: both; }
	
}

@media screen and (max-width: 479px) {
	header .sw				{ width: 95%; padding-left: 2.5%; padding-right: 2.5%; }
	.logo					{ width: 161px; top: -53px; }
	.primary-nav 			{ padding: 0px; text-align: center; }
	.primary-nav a 			{ padding: 1.2em 1%; text-align: center; }
	.primary-nav a.contact-link { padding: 0px 0px 0px 1%; }
	.checkout-link			{ display: none; }
	.primary-nav a.products-link	{ border-left: 1px solid #ccc;
	border-right: 1px solid #ccc; }
	
	.third 					{ width: 100%; margin-right: 0; margin-bottom: 2em; }
	.third img				{ width: 36%; float: left; }
	
}

@media screen and (max-width: 374px) {
	header .sw.nav				{ width: 100%; padding-left: 0; padding-right: 0; }
	.primary-nav			{ font-size: 1.6em; }
	.primary-nav a			{ padding: 1.2em 5%; }
	.primary-nav a.contact-link { padding: 0px 5%; }
	.mob					{ display: none; }
	
}