/**
 * core.css
 * Main Stylesheet for the Marietta C. Designs
 * @author Tony Collings
 * @package MCD
 * @version 1.0
 * @date Jan 2013
 */


/*	HTML Overrides
	------------------------------------------------------------------------- */
	body{
		background-color: #000;
		/*
		color: #010101;
		*/
		color: #474646; /* Requested by artist (emma_spano@conair.com) - Jan 2014 */
		font-family: Helvetica neue,Helvetica,Arial,sans-serif;
		font-size: 12px;
		line-height: 20px;
		margin: 0px; padding: 0px;
		text-align: center;
		-webkit-text-size-adjust: none; /* Prevent iOS from text resizing */
		width: 100%; height: 100%;
	}
	form,input,select,textarea{
		font-family: Helvetica neue,Helvetica,Arial,sans-serif;
	}
	a {
		color: #e32624;
		text-decoration: none;
		cursor: pointer !important;
	}
	a:hover {
		color: #e32624;
		/*
		text-decoration: underline;
		*/
		text-decoration: none !important; /* Requested by artist (emma_spano@conair.com) - Jan 2014 */
	}
	:hover,
	:active,
	:target {
		outline: none;
	}

	/* To remove unwanted outlines in IE on hyperlink:focus */
	a:active, a:focus {
		border: none;
		outline: none;
	}
	h1,h2,h3,h4 {
		display: inline-block; margin: 0px; padding: 0px;
		font-weight: 300 !important;
	}
	h1{
		font-size: 32px;
	}
	h2{
		font-size: 28px;
	}
	h3{
		font-size: 24px;
	}
	h4{
		font-size: 20px;
	}
	.icon {
		display: inline-block; vertical-align: middle; margin: 0px; margin-right: 10px;
	}

	h1.page-title {
		display: block; clear: both;
		line-height: 110%;
	}

	/* CSS3 Tables ! */
	.table {display:table;}
	.tr {display:table-row;}
	.td {display:table-cell;}
	.thead {display:table-header-group; }
	.tbody {display: table-row-group; }
	.tfoot {display: table-footer-group; }

		.thead .td {
			text-transform: uppercase;
			font-family: 'Fjalla One', sans-serif;
			font-size: 15px;
		}



	div.no-script{
		display: block;
		position: absolute;
		top: 0px; left: 0px;
		z-index: 6000000;
		color: #fff;
		width: 100%;
		font-size: 14px;
		background-color: #ce3816;
	}
		.no-script h3{
			display: block;
			margin: 0px;
			padding: 20px;
			font-size: 32px;
		}
		.no-script p{
			display: block;
			margin: 0px;
			padding: 20px; padding-top: 0px;
		}

		.microdata {
			display: none;
		}


	/* Stuff for random debugging */

	div#debugging,
	pre#debug {
		width: 500px;
		height: 400px;
		position: fixed; z-index: 30000000;
		right: 10px;
		top: 10px;
		padding:20px;
		overflow: auto;
		text-align: left !important;

		-webkit-box-shadow:  0px 0px 10px 0px rgba(0, 0, 0, 0.5); /* CSS3 */
		box-shadow:  0px 0px 10px 0px rgba(0, 0, 0, 0.5); /* CSS3 */

		color: #fff;


		/* The clever bit... */
		background: rgba(0, 0, 0, 0.6);
		/* For shitty browsers... yup! IE */
		/* http://msdn.microsoft.com/en-us/library/ms532930%28v=vs.85%29.aspx */
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
	}

	pre#debug h1,
	pre#debug h2 {
		display: block; clear: both;
	}

	.uc {text-transform: uppercase !important; }
	.lc {text-transform: lowercase !important; }


	.blur-this{
		-webkit-filter: blur(2px);
		filter: blur(2px);
		-ms-filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius=2)";
	}



/*	Global
	------------------------------------------------------------------------- */


	/* Two types of .inner available due to differing page dimensions */

	.inner{
		width: 1010px; /* Correct p/Emma's Layout */
		margin: 0px auto;
		position: relative;
		text-align: left;
	}
	.wide-inner {
		width: 1130px; /* Correct p/Emma's Layout */
		margin: 0px auto;
		position: relative;
		text-align: left;
	}

	.colgroup{
		display: block; clear: both;
	}
	.col {
		display: block; float: left;
	}
	/*
	.clear {
		display: block; clear: both;
	}
	*/

	.clear:before,.clear:after {
		content:"";
		display:table;
	}
	.clear:after {
		clear:both;
	}
	.opaque { position: inherit; }
	.opaque:before {
		content: "";
		display: block;
		position: absolute; top: 0px; left: 0px; z-index: -1;
		width: inherit !important;
		height: inherit !important;
		background-color: #fff;
		opacity: 0.80;
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
		filter: alpha(opacity=80);
	}

	.blur {
		-webkit-filter: blur(2px);
		filter: blur(2px);
		-moz-filter: blur(2px);
 		-o-filter: blur(2px);
		-ms-filter: blur(2px);
		filter: url('svg/blur-effect.svg#blur');
		filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='2');
	}

	.font-fjalla-one { font-family: 'Fjalla One', sans-serif; }

	.gray {color: #8a8c8b !important; }
	.white {color: #fff !important; }

	/* Core Color Palette in the Main Nav' Menu */
	.pink {color: #e40f8f !important; }
	.replace-pink{color:#c52813!important;}
	.lime-green {color: #96d411 !important; color:#c52813!important;}
	.blue {color: #13b2da !important; color:#c52813!important;}
	.orange {color: #fa8825 !important; color:#c52813!important;}
	.red {color: #df3331 !important; color:#c52813!important;}
	.grey {color: #8a8c8b !important; }

	.relative{
		position: relative !important;
	}
	.no-image .no-image-txt {display: block !important; }
	.no-image-txt {
		display: none;
		width: 100px; height: 25px;
		line-height: 25px;
		vertical-align: middle;
		text-transform: uppercase;
		background-color: #505050;
		color: #3a3839;
		text-align: center;
		position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
		margin: auto auto;
		text-shadow: 0px 1px 0px #5a5a5a;
        filter: dropshadow(color=#5a5a5a, offx=0, offy=1);
	}


	.no-pdf {
		display: block;
		padding: 10px; margin: 10px;
		color: #fff;
		background-color: #e40f8f;
		font-family: 'Fjalla One', sans-serif;
		text-shadow: 0px 1px 0px #e06eb6;
        filter: dropshadow(color=#e06eb6, offx=0, offy=1);
	}
	.no-pdf a {display: inline-block; border-bottom: 1px dotted #fff; color: #fff;  text-decoration: none !important; }
	.no-pdf a:hover {border-bottom: 1px solid #fff; color: #fff; text-decoration: none !important; }




/*	Layout
	------------------------------------------------------------------------- */

	#viewport {
		text-align: center;
		width: 100%; height: 100%;
		min-width: 1010px;
		position: absolute; top: 0px; left: 0px;
		z-index: 20;
	}



	#background-texture {
		position: fixed; top: 0px; left: 0px;
		width: 100%; height: 1431px /* Height of Graphic */;
		overflow: hidden;
		background: #FFF /*url('img/background-texture.jpg') top left repeat-x*/;
		z-index: -1 !important; /* Avoid re-paint issues in Droid 4.0.4 on Samsung GT-N8013 */
	}

	div#page-wrapper {
		margin: 0px; padding: 0px;
		position: absolute;
		width: 1130px; /* Max-Width of Content */

		left: 50%;
		margin-left: -565px; /* 1130 / 2 */

		/* 101px (header+border) */
		top: 101px;
		z-index: 500;
		text-align: left;
	}

		body#homepage #page-wrapper {
			/* 101px (header+border) + 620px carousel  = 721px */
			top: 721px;
		}


	div#content {
/*		-webkit-box-shadow:  0px 8px 8px 0px rgba(0, 0, 0, 0.5);
        box-shadow:  0px 8px 8px 0px rgba(0, 0, 0, 0.5);*/
	}

	div#content {
		background-color: #ffffff;

	}



	/*
	div#background-graphics {
		width: 100%; height: 100%; max-height: auto;
		position: fixed; top: 0px; left: 0px;
		z-index: 5; overflow: hidden;
		text-align: center;
	}

	div#background-graphics img {
		width: 100%; height: auto;
		position: absolute; bottom: -200px; left: 0px;
	}

	@media all and (orientation: landscape){
		div#background-graphics img {
			width: 100%; height: auto;
			margin-top: -200px;
		}
	}
	@media all and (orientation: portrait){
		div#background-graphics img {
			width: auto; height: 100% !important;
			margin-top: -200px;
		}
	}
	*/





	/* Header */
	div#header {
		height: 95px; width: 100%; position: fixed; top: 0px; left: 0px;
		z-index: 3000;
		background: #000 url('img/background-texture.jpg') left top repeat-x; /* To create illusion of content flowing "underneath" */
background:white;
		border-bottom: 6px solid #E6E8E7;
	}
	#header .inner {height: 100%;

	}

	#header::after {
		width: 100%;
/*		background: transparent url('img/shading/header-shading.png') left top repeat-x; */
		height: 7px;
		content: "";
		position: absolute; /* bottom: -22px; 15px (header.border-bottom + this.height) = 22px */
		left: 0px;
		z-index: 300000;
	}

		span.rusk-logo {
			display: block;
			width: 211px; height: 62px;
			position: absolute; top: 20px; left: 0px;
		}

	ul.primary-nav {
		display: inline-block;
		position: absolute; left: 290px; bottom: 12px;
		margin: 0px; padding: 0px;
		font-size: 13.5px;
	}
	ul.primary-nav li {color: #fff; text-transform: uppercase;
		display: inline-block;
	}

	/* Expose menu for non-Javascript */
	ul.primary-nav li:hover {}
	/* End */

	ul.primary-nav li a {color: #000; display: block; padding: 0px 20px; }
	ul.primary-nav li a:hover {text-decoration: underline; }

		li#products { background: transparent url('../images/ui/nav.png') left 2px no-repeat; }
		li#tips { background: transparent url('../images/ui/nav.png') left 2px no-repeat; }
		li#news { background: transparent url('../images/ui/nav.png') left 2px no-repeat; }
		li#education { background: transparent url('../images/ui/nav.png') left 2px no-repeat; }
		li#galleries { background: transparent url('../images/ui/nav.png') left 2px no-repeat; }

	/* Sub Nav CSS */
	div#sub-nav{
		display: none;
		position: fixed;
		z-index: 2800; /* Below #header + #search-bar */
		padding: 10px;
		top: 101px; /* 87px header.height + 15px header.border-bottom */
		left: 50%;
		margin-left: -505px; /* This value is adjusted with Mootools? OR... Does it sit flush left with the logo? */
		width: 1010px; /* Request by designer. emma_spano@conair.com - Jan 2014 */
		text-align: left !important;
/*		color: #fdfdfd; */
		color:white;
		font-size: 14px !important; letter-spacing: 1px !important;
	}
	div#sub-nav a {
		color: #9f9d9e;
		text-decoration: none;
	}
	div#sub-nav a:hover{
		color: #9f9d9e;
		text-decoration: underline;
	}
		#sub-nav span.subnav-opacity{
			display: block;
			position: absolute; top: 0px; left: 0px;
			width: 100%; height: 100%;
			background-color: #000;
			opacity: 0.8;
			-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
			filter: alpha(opacity=80);
			z-index: -1;
		}
		#sub-nav #nav-products{width: 1010px; height: 260px; }
		#sub-nav #nav-tips{}
		#sub-nav #nav-news{}
		#sub-nav #nav-education{}
		#sub-nav #nav-galleries{}


		#sub-nav #nav-products div.menu-image {border-right: 3px solid #e1108f;
border-right:3px solid #c52813!important;
		}
		#sub-nav #nav-tips div.menu-image {border-right: 3px solid #a2e20f;}
		#sub-nav #nav-news div.menu-image {border-right: 3px solid #0dbae4;}
		#sub-nav #nav-education div.menu-image {border-right: 3px solid #fa8825;}
		#sub-nav #nav-galleries div.menu-image {border-right: 3px solid #c343fc;}

		div.menu-image {
			width: 285px; height: 260px; overflow: hidden;
			background-color: #3a3839;
		}
		div.menu-image img {
			width: 285px; height: auto;
		}

		div.menu-items {
			line-height: 140%;
			width: 720px;
		}
		div.menu-items ul {
			font-size: 12px;
			margin: 0px; padding: 0px 20px;
		}
		div.menu-items ul li {
			display: block;
		}
		div.menu-items ul li a {
			display: block;
			padding: 5px;
			cursor: pointer !important;
		}
		div.menu-items ul li a:hover {
			background-color: #3a3839;
			text-decoration: none !important;
		}
		div.menu-items ul li:first-child {
			display: block; clear: both;
			padding: 5px 5px 10px 5px;
			font-size: 16px; text-transform: uppercase;
		}





	ul.secondary-nav {
		display: inline-block;
		font-size: 13.5px;
		height: 35px;
/*		line-height: 35px; vertical-align: middle; */
		margin: 0px !important;
		padding: 0px !important;
		color: #54554F;
		list-style-type: none;
		position: absolute; top: 0px; right: 35px; /* 35px for search + buffer */
	}
	ul.secondary-nav li {
		background-color: #E7E8E8;

		display: inline-block;
		padding: 10px 0 11px;
		margin: 0px;


	}
	ul.secondary-nav li a {
		display: block;
		padding: 0px 20px;
		margin: 0px;
		color: #54554F;
/*		border-left: 1px solid #7e776d; */
		line-height: 100%;
	}
	ul.secondary-nav li:first-child a {
		border-left: 0px !important;
	}

	ul.social-channels {
		display: inline-block; position: absolute;
		top: 10px; right: 510px; /* Adjust as necessary to accomodate secondary-nav */
		list-style-type: none; padding: 0px; margin: 0px;
	}
	ul.social-channels li {
		display: inline-block;
		width: 24px; height: 24px;
		-webkit-border-radius: 2px;
		border-radius: 2px;
		overflow: hidden;
	}

	ul.social-channels li a {
		display: block;
		width: 100%; height: 100%;
	}



	span#website-search {
		display: block; height: 35px; width: 35px;
		text-align: center;
		background-color: #E7E7E7; color: #fff;
		position: absolute; top: 0px; right: 0px;
		cursor: pointer !important;
	}
	span#website-search img {
		display: inline-block; width: 19px; height: 19px;
		position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; margin: auto auto; /* center/center hack */
	}

	div#search-bar {
		height: 50px; width: 100%;
		line-height: 50px; vertical-align: middle;
		background-color: #fff;
		color: #68686a;
		position: fixed; top: 0px; left: 0px;
		z-index: 2900; /* Above page-wrapper, below header */
		font-weight: lighter; text-transform: uppercase;
		font-family: 'Fjalla One', sans-serif;
	}
		form#website-search {
			display: block; border: 0px;
			margin: 0px; padding: 0px;
			width: 100%; height: 50px;
		}
		form#website-search input {
			display: block; border: 0px;
			margin: 0px; padding: 0px;
			width: 100%; height: 50px; text-align: center;
			line-height: 50px; vertical-align: middle;
			text-transform: uppercase;
			font-family: 'Fjalla One', sans-serif;
			font-size: 15px;
		}



	/* SELFIE CONTEST */

	div#selfie-contest-promo {
	    background-color: #000;
    	height: 79px;
    	position: absolute;
    	top: 94px;
	    width: 100%;
	}



	/* Footer */
	div#footer {font-size: 11px; }

		#footer .inner {
			padding: 10px;
		}

	div#footer,
	#footer a,
	#footer a:hover {color: #000; }

	#footer a:hover {text-decoration: underline; }

		ul.footer-left {display: inline-block; float: left; list-style-type: none; }
			.footer-left li {display: inline-block; }
			.footer-left li a {display: block; border-left: 1px solid #fff; line-height: 100%; padding: 0px 20px;  }
			.footer-left li:first-child a {border-left: 0px; padding-left: 0px; }

		ul.footer-right {display: inline-block; float: right; list-style-type: none; }
			.footer-right li {display: inline-block;  }
			.footer-right li a {display: block; border-left: 1px solid #fff; line-height: 100%; padding: 0px 20px;}
			.footer-right li:first-child a {border-left: 0px; padding-left: 0px; }
			li.rusk-aus,
			li.rusk-eur {
				vertical-align: middle;
			}
			li.rusk-aus img,
			li.rusk-eur img {
				display: inline-block;
				vertical-align: middle;
				margin-right: 10px;
			}
			li.rusk-aus sup,
			li.rusk-eur sup {
				display: inline-block;
				margin-top: -3px;
				vertical-align: middle;
			}

		div.patent-notification {
			display: block; float: left; line-height: 100%;
			padding-bottom: 50px; margin-left: 40px;
		}
		div.patent-notification strong {
			display: block; clear: both; margin-bottom: 3px;
		}



/*	GLOBAL CONTENT
	--------------------------------------------------------------------- */


/*	HOMEPAGE (Other pages should call in their own module.[module].css file
	-------------------------------------------------------------------------- */


	#hp-carousel {
		width: 100%; height: 620px;
		background-color: rgba(75, 71, 76, 1);
		position: relative;
		top: 101px; /* 95px header + 6px header border.bottom */
	}
		#hp-carousel .inner {
			display: inline-block;
			height: 100%;
			width: 1140px !important;
		}

	#hp-carousel ul#slides {
		width: 100%; height: 100%; display: block; list-style-type: none;
		white-space: nowrap; font-size: 0;
		margin: 0px; padding: 0px;
	}

	#hp-carousel ul#slides > li {
		display: inline-block;
		width: 100%; height: 100%;
		font-size: 1rem;
		box-sizing: border-box;
	}

	#hp-carousel ul#slides > li a {
		/*display: block; width: 100%; height: 100%; box-sizing: border-box;*/
		cursor: pointer !important;
	}

		#hp-carousel li#slide-1 {
			background: #fff url('../images/homepage/RUSK1-the-look-all-stars.jpg') center center no-repeat;
            position: relative;
            text-align: center;
            width:100%;

        }

        #slide-1 a.learn-more {
            display: inline-block;
            padding: 10px 0;
            color: #fff;
            background-color: #c6007c;
            font-size: 0.9rem; letter-spacing: 0.01rem;
            position: relative;
            border:1px solid #fff;
            text-decoration: none;
            cursor: pointer;
            position:absolute;
            bottom:50px;
            left:500px!important;
            width:140px;
        }

        #slide-1 a.learn-more:hover {
            text-decoration: underline;
        }

	/* View Video */
	span.video-play {
		display: inline-block;
		border: 2px solid #278aa7;
		background-color: #278aa7;
		color: #fff; text-transform: uppercase;
		padding: 10px 15px;
		position: absolute;
		bottom: 100px; right: 200px;
		padding-right: 55px;
		-webkit-box-shadow: 0 0 20px 0 rgba(0,0,0,0.35);
		box-shadow: 0 0 20px 0 rgba(0,0,0,0.35);
	}

		span.video-play::after {
			display: block;
			width: 25px; height: 25px;
			-webkit-border-radius: 25px;
			border-radius: 25px;
			content: "";
			border: 2px solid #fff;
			position: absolute;
			right: 15px;
			top: 50%;
			-webkit-transform: translateY(-50%);
			transform: translateY(-50%);
		}

		span.video-play::before {
			display: inline-block;
			content: "";
			width: 0;
			height: 0;
			border-top: 8px solid transparent;
			border-left: 10px solid #fff;
			border-bottom: 8px solid transparent;
			position: absolute;
			right: 23px;
			top: 50%;
			-webkit-transform: translateY(-50%);
			transform: translateY(-50%);
		}


	a#play-video-btn {
		display: inline-block;
		text-transform: uppercase;
		color: #fff;
		background-color: #01b7aa;
		position: absolute;
		top: 500px;
		left: 155px;
		padding: 9px 15px;
		font-size: 1rem;
		font-weight: bolder;
		border: 2px solid #01b7aa;
		-webkit-transition: all 500ms ease-in-out;
		transition: all 500ms ease-in-out;
	}
	a#play-video-btn:hover {
		border: 2px solid #fff;
	}

	a#rusk-10yr {
		display: block; width: 135px; height: 135px;
		position: absolute;
		top: 10px; right: -15px;
		text-align: center;
	}
	a#rusk-10yr img {
		display: block;
		max-width: 100%;
	}
	a#rusk-10yr span {
		display: block; clear: both;
		width: 100%;
		padding: 10px 0px;
		box-sizing: border-box;
		text-align: center;
		color: #fff;
		text-transform: uppercase;
		font-size: 1.1rem;
		font-weight: normal;
		position: relative;
	}

	a#rusk-10yr span::after {
		display: block;
		width: 10px; height: 20px;
		background-image: url('img/ui/white-triangle.png');
		background-size: contain;
		background-position: center center;
		background-repeat: no-repeat;
		position: absolute;
		top: 50%; transform: translateY(-50%);
		right: 0px;
		content: "";
	}

	a#play-video-btn span {
		display: block; clear: both;
		width: 200px;
		padding: 10px 0px;
		box-sizing: border-box;
		text-align: center;
		color: #fff;
		text-transform: uppercase;
		font-size: 1.1rem;
		font-weight: normal;
		position: relative;
	}

	a#play-video-btn span::after {
		display: block;
		width: 10px; height: 20px;
		background-image: url('img/ui/white-triangle.png');
		background-size: contain;
		background-position: center center;
		background-repeat: no-repeat;
		position: absolute;
		top: 50%; transform: translateY(-50%);
		right: 0px;
		content: "";
	}







	#fca-banner {
		width: 100%; height: 60px;
		position: absolute;
		top: 0px; left: 0px;
		z-index: 50;
		text-align: center;
		z-index: 600; /* Above mouseover images */
	}
	#fca-banner .fca-banner-opacity{
		display: block;
		width: 100%; height: 100%;
		position: absolute; top: 0px; left: 0px;
		z-index: -1;
		background-color: #bdbdbd;
		opacity: 0.5;
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
		filter: alpha(opacity=50);
	}
	#fca-banner img {
		position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
		margin: auto auto;
		display: block; width: 469px; height: 30px;
	}


	/* Fashion, Culture, Attitude */
	div#fca-content {
		width: 100%; margin-top: 5px;
		height: 680px;
		overflow: hidden;
	}
	div#fca-content .col {
		width: 400px;
		height: 680px;
		line-height: 25px;
	}

	div#culture {
		/* Middle col' is smaller */
		/* 1132px content.width - (2*400px other.col) - padding */
		width: 330px !important;
		background-color: #ededed;
	}
		#fca-content span.fca-image {
			display: block;
			overflow: hidden;
			position: relative;
			width: 100%;
		}
		#fca-content span.fca-image img {
			height: auto;
		}
		#fca-content span.fca-image img.fca-over {
			height: auto;
			position: absolute;
			top: 0px; left: 0px;
			z-index: 550;
			opacity: 0;
			transition: all 500ms ease-in-out;

		}
		#fca-content span.fca-image.active img.fca-over {
			opacity: 1;
		}

		#fca-content div.fca-description {
			padding: 25px;
			padding-bottom: 0px;
		}

		#fashion div.fca-description {
			padding-left: 50px;
		}
		#attitude div.fca-description {
			padding-right: 50px;
		}



	div.brand-section {
		display: block; clear: both;
		border-top: 1px solid #d9d7d8;
		text-align:center;/*image size reduction*/
	}
	div.brand-section a img{
		width:80%;/*image size reduction*/
	}
	div.brand-section:first-child {
		border-top: 0px;
	}





/*	FORMS
	------------------------------------------------------------------------- */
	form {
		font-family: Helvetica neue,Helvetica,Arial,sans-serif;
		color: #8a8a8a;
		text-align: left;
		padding: 20px;
		background-color: #fff;
	}



	input[type=checkbox],
	input[type=radio]{
		vertical-align: middle;
		padding: 0px !important;
		margin: 0px !important;
	}

	input[type=checkbox].custom-checkbox,
	input[type=radio].custom-radio{
		display: none;
	}

	input[type=checkbox]:checked+label.custom-checkbox,
	input[type=radio]:checked+label.custom-radio {
		background: transparent url('img/ui/checkbox-checked.png') left top no-repeat;
	}

	label.custom-radio,
	label.custom-checkbox {cursor: pointer !important; padding-left: 30px;
		background: transparent url('img/ui/checkbox-unchecked.png') left top no-repeat;
		display: inline-block;
		line-height: 100% !important;
	}

	input,select,textarea{
		font-family: Helvetica neue,Helvetica,Arial,sans-serif;
		font-size: 12px; line-height: 120%;

	}


	fieldset {
		border: 0px;
		margin: 0px; padding: 0px;
		position: relative;
	}
	legend {

	}
	legend span {
		font-size: 32px;
		color: #405050 !important;
		display: inline-block; line-height: 100%;
		margin-bottom: 30px;
	}

	label{
		display: inline-block;
		width: 200px; margin-right: 20px;
		color: #898b8a !important;
	}
	label.form-label{
		vertical-align: top;
		margin: 8px 10px 0px 0px; /* margin-top: to match padding on .form-field */
		font-size: 18px;
		font-family: 'Fjalla One', sans-serif;
		color: #8a8a8a;
	}
	label span.label-hint{
		font-size: 11px; color: #4b4b4b !important;
		display: block; clear: both; margin-top: 5px; line-height: 140%;
	}
	label.checkbox-label {
		width: auto !important; vertical-align: middle !important;
		font-size: 14px; margin-left: 10px;
		cursor: pointer !important;
	}
	label.mandatory:before  {
		 content:" *";
		 width: 10px; height: 10px;
		 color: #f98925;
		 padding: 0px 3px;
	}

	input[type=number],
	select {
		-webkit-appearance:none;
	}



	span.custom-select{
		display: inline-block;
		position: relative;
		overflow: hidden;
		background: #c8cac9 url('img/ui/form-select-arrow.png') no-repeat right;
		border: 1px solid #c8cac9;
		width: 210px; /* 20px narrower to "hide" drop-down */
		background-color: #c8cac9;
		cursor: pointer !important;
		vertical-align: middle; margin-top: -4px;
	}

	span.custom-select:hover,
	span.custom-select:active,
	span.custom-select:target {
		border: 1px solid #5a5a5a;
		outline: none;
	}

	span.custom-select select{
		background: transparent;
		position: relative;
		border: 1px solid #c8cac9 !important;
		width: 250px;
		border-radius: 0;
		-webkit-appearance: none;
		display: inline-block;
		cursor: pointer !important;
		padding: 4px 12px;
		padding-right: 0px;
		background-color: transparent !important;
	}
	span.custom-select select:focus {
		border: 1px solid #c8cac9 !important;
	}


	span.custom-select option:first-child {
		background-color: transparent !important;
		color: #fff !important;
	}

	select option {
		vertical-align: middle;
		display: block;
		background-color: #f6f6f6;
		color: #8b8b8b;
		padding: 2px 10px;
		padding-left: 15px;
		border: 0px;
		font-size: 12px;
	}
	select option:focus {
		background-color: #8b8b8b !important;
		color: #f6f6f6;
	}







	span.form-row {
		display: block;
		clear: both;
		margin-bottom: 20px;
	}
		span.form-checkboxes{
			display: inline-block;
			padding: 8px 18px;
		}
		span.file-upload {
			padding: 10px;
			border: 1px solid #d0d4d5;
			background-color: #ebefef;
			margin-left: -10px;
		}
		span.file-upload a.ui-button {
			margin-left: 20px;
		}
		span.file-upload span.label-hint{
			margin: 0px 0px 0px 155px;
			display: block; clear: both;
			padding: 5px 0px; font-size: 11px;
		}

	.form-errors{
		color: #dd4b39;
	}

	input.form-field,
	textarea.form-field,
	select.form-field{
		padding: 6px 18px;
		font-size: 14px;
		/*
		-webkit-border-radius: 5px;
    	border-radius: 5px;
		*/
		display: inline-block;
		border: 1px solid #c8cac9;
		background-color: #c8cac9;
		color: #000 !important;
	}

	input.form-field:focus,
	textarea.form-field:focus,
	select.form-field:focus{
		border: 1px solid #5a5a5a;
		-webkit-box-shadow: inset 2px 2px 3px 1px rgba(90, 90, 90, 0.1);
        box-shadow: inset 2px 2px 3px 1px rgba(90, 90, 90, 0.1);
	}

	input[readonly],
	textarea[readonly],
	select[readonly],
	input[disabled],
	textarea[disabled],
	select[disabled],

	input[readonly]:focus,
	textarea[readonly]:focus,
	select[readonly]:focus,
	input[disabled]:focus,
	textarea[disabled]:focus,
	select[disabled]:focus {
		border: 0px;
		border-bottom: 1px solid #7fc241;
		background-color: transparent;
		color: #405050 !important;
		cursor: default !important;
		-webkit-box-shadow: none;
        box-shadow: none;
		-webkit-border-radius: 0px;
    	border-radius: 0px;
	}

	input[type=email]{
		background: #c8cac9 url('img/icons/input-email.png') 8px 9px no-repeat;
		padding-left: 40px;
		width: 245px;
	}
	input[type=password]{
		background: #c8cac9 url('../images/icons/key.png') 8px 14px no-repeat;
		padding-left: 40px;
		width: 245px;
	}
	input.search-field {
		background: #c8cac9 url('../images/icons/magnifier.png') 8px 14px no-repeat;
		padding-left: 40px;
	}



	div.form-buttons{
		display: block; clear: both;
		margin: 10px 0px;
		text-align: right;
	}
		div.form-buttons a {
			display: inline-block; margin-left: 20px; cursor: pointer !important;
		}



	input[type=submit],
	input[type=button],
	a.ui-button {
		display: inline-block;
		cursor: pointer !important;
		text-align: center; vertical-align: middle;
		padding: 5px 10px !important; margin: 0px 5px !important;
		font-family: 'Fjalla One', sans-serif;
		color: #fff;
		font-size: 18px;
		background-color: #fa8923;
		border: 1px solid #fa8923;
	}
	input[type=submit]:hover,
	input[type=button]:hover,
	a.ui-button:hover {
		/*
		color: #221e1f;
		text-decoration: none;
		background: #a2d96c url('img/shading/nav-focus-gradient.png') left top repeat-x;
		color: #fff;
		border: 1px solid #6ba21f;
		text-shadow: 0px 1px 0px #5c9d1b;
        filter: dropshadow(color=#5c9d1b, offx=0, offy=1);
		cursor: pointer !important;
		*/
	}

	a.error-button {
		background-color: #d44514 !important;
		background-image: none !important;
		border: 2px solid #944124;
		text-shadow: 0px 1px 0px #944124;
        filter: dropshadow(color=#944124, offx=0, offy=1);
		color: #fff;
	}
	a.error-button:hover{
		border: 2px solid #944124;
		text-shadow: 0px 1px 0px #944124;
        filter: dropshadow(color=#944124, offx=0, offy=1);
	}

	div.form-errors{
		font-size: 14px;
		background-color: #dd312f;
		color: #fff;
		padding: 10px;
		/*
		-webkit-border-radius: 10px;
		border-radius: 10px;
		border: 2px solid #e15947;
		*/
		-webkit-box-shadow:  0px 0px 10px 0px rgba(0, 0, 0, 0.2);
        box-shadow:  0px 0px 10px 0px rgba(0, 0, 0, 0.2);
		margin-bottom: 20px;
	}
		.form-errors h3 {
			display: block; clear: both;
			font-size: 18px;
			margin: 0px; margin-bottom: 10px; padding: 0px;
		}
		.form-errors p {
			display: block; clear: both;
			margin: 10px 0px; padding: 0px;
		}
		.form-errors ul {
			display: block; clear: both; list-style-type: none;
			margin: 0px; margin-left: 10px;
			padding: 0px;
		}
		.form-errors ul li {
			display: block; margin-bottom: 5px;
		}

		.form-errors a {
			font-weight: bolder; color: #fff;
			text-decoration: normal;
		}
		.form-errors a:hover {
			text-decoration: underline;
		}








/*	Overlays
	------------------------------------------------------------------------- */


	span#overlay-mask{
		position: absolute;
		display: block;
		width: 100%; height: 100%;
		left: 0px; top: 0px;
		z-index: 1000000;
		background-color:#000;
		opacity: 0.75;
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
		filter: alpha(opacity=75);
	}

	/*
	.drag-handle:hover{
		cursor: url(img/icons/cursor-move.png), default;
	}
	*/

	.overlay {
		/* Dimension values overridden on a case-by-case basis */
		position: absolute;
		width: 500px; height: auto;
		left: 50%; top: 50px;
		margin-left: -250px;
		z-index: 50000000;
		background-color: #fff;
		-webkit-box-shadow:  0px 0px 20px 0px rgba(0, 0, 0, 0.5);
		box-shadow:  0px 0px 20px 0px rgba(0, 0, 0, 0.5);

	}


	.overlay-content {
		text-align: center;
		background-color: #fff;
		margin-top: 30px; /* Clear the Title Bar */
	}

	.overlay-title {
		display: block;
		position: absolute; top: 2px; left: 0px;
		width: inherit;
		height: 30px;
		background-color: #898b8a;
		color: #fff;
		font-family: 'Fjalla One', sans-serif;
		font-size: 16px;
		line-height: 30px; vertical-align: middle;
		border-left: 10px solid #fff;
		text-align: left;
		padding-left: 20px;
	}

	.overlay-success {
		padding: 20px;
		text-align: left !important;
	}

	#map-overlay .overlay-title {border-color: #13b2da; }



		a.overlay-close{

			display: inline-block;
			cursor: pointer !important;
			text-align: center; vertical-align: middle;
			position: absolute; top: 2px; right: 0px;
			width: 70px;
			height: 30px;
			line-height: 30px;
			z-index: 500100;
			color: #474948;
			text-decoration: none;
			font-family: 'Fjalla One', sans-serif;
		}
		a.overlay-close:hover {
			text-decoration: none;
		}

		#map-overlay .overlay-close {background-color: #13b2da; }



		/* Global Overlay Overrides */


		/* Media Overlay - Fashion, Culture, Attitude */
		div#media-overlay {
			position: absolute; top: 50px; left: 50%;
		}


		#media-container {
			position: absolute; top: 50px; left: 50%; z-index: 3000000;
			-webkit-box-shadow:  0px 0px 20px 0px rgba(0, 0, 0, 0.5);
			box-shadow:  0px 0px 20px 0px rgba(0, 0, 0, 0.5);
			border: 4px solid #9c9a9b;
		}

		#media-container.video {width: 800px; height: 450px; /* 16:9 Aspect Ratio 800x450 */ margin-left: -400px;  }
		#media-container.image.portrait {width: 500px; overflow: hidden; margin-left: -250px; }
		#media-container.image.landscape {width: 800px; overflow: hidden; margin-left: -400px; }
		#media-container.image.square {width: 600px; height: 600px; overflow: hidden; margin-left: -300px; }

		#media-container.image.portrait img,
		#media-container.image.landscape img,
		#media-container.image.square img {width: 100%; height: auto; }


	/* Passport to Rewards Overlay */
	div#passport-to-rewards {
		background-color: transparent;
		width: 700px;
	}
		#passport-to-rewards span.overlay-title {
			display: inline-block; width: 640px;
			padding: 0px; margin: 0px;
			background-color: #716b6b; color: #fff; height: 50px; line-height: 50px; vertical-align: middle;
			font-size: 24px;
			text-transform: uppercase;
			text-align: center;
			border-left: 0px;
		}
		#passport-to-rewards a.overlay-close {
			display: block;
			padding: 0px; margin: 0px;
			width: 50px; height: 50px; line-height: 50px; vertical-align: middle;
			background-color: #716b6b; color: #fff;
			font-size: 24px;
			text-align: center;
		}
		#passport-to-rewards .overlay-content {
			margin-top: 60px;
			background-color: #000;
		}
		#passport-to-rewards .overlay-content ul {
			background-color: #000;
			height: 100px;
			margin: 0px; padding: 30px;
		}
		#passport-to-rewards .overlay-content ul li {
			border-left: 1px solid #534e50;
			height: 100px;
			line-height: 100px; vertical-align: middle;
			display: inline-block;
			padding: 0px 35px;
			font-size: 24px;
			text-transform: uppercase;
			color: #fff;
		}
		.overlay-content ul li a,
		.overlay-content ul li a:hover {
			color: #fff; text-decoration: none;
		}
		#passport-to-rewards .overlay-content ul li:first-child {
			border-left: 0px;
		}

	/* PDF Overlay */

	div#pdf-overlay {
		width: 600px; height: auto;
	}
		#pdf-overlay a.overlay-close  {
			display: inline-block; height: 40px; line-height: 40px;
			padding: 0px;
			position: absolute; top: 0px; left: 0px;
			font-size: 15px;
		}
		#pdf-overlay a.file-download {
			display: inline-block; height: 40px; line-height: 40px;
			padding: 0px 15px;
			position: absolute; top: 0px; right: 0px;
			background-color: #fa8825; color: #fff;
			font-size: 15px;
		}
		a.file-download span {
			color: #000;
			vertical-align: middle; line-height: 40px;
		}
		/*
		#pdf-title {
			height: 50px; width: 100%; display: block; clear: both;
			border: 1px solid #000;
			content: attr(id);
			position: absolute; bottom: 0px; left: 0px;
		}
		*/

	div#pdf-content {
		width: 600px;
		height: 550px;
		/*
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		*/
		margin-top: 40px; /* Buttons */
	}

	/* Salon Enquiry */
	div#class-contact-overlay {
		text-align: left;
	}
	div#class-contact-overlay h1 {

	}


	/* Warnings Overlay */
	div#warnings-overlay {
		width: 800px;
	}

	div#warnings-overlay span.overlay-title {
		border-left: 10px solid #fc8803;
		width: 770px;
	}
	div#warnings-overlay #warning-content {
		text-align: left;
		padding: 20px;
		height: 550px;
		overflow: auto;
	}
		#warning-content div {
			margin: 20px 0px;
		}

		#warning-content h2,
		#warning-content h3 {
			display: block;
			font-family: 'Fjalla One', sans-serif;
			margin: 10px 0px;
			clear: both;
			line-height: 120%;
		}
		#warning-content h2 {
			color: #fc8803;
			font-size: 24px;
		}
		#warning-content h3 {
			color: #898b8a;
			font-size: 15px;
		}
		#warning-content strong.underline {
			display: inline-block;
			border-bottom: 1px solid #000;
			line-height: 100%;
			font-style: italic;
		}
		#warning-content .section {
			margin-bottom: 40px;
		}
		#warning-content .section:last-child {
			margin-bottom: 0px;
		}

	div#warnings-overlay a.overlay-close {
		background-color: #fc8803 !important;
	}


	/*	PopFX Video Overlay...
		------------------------------------------------------------ */


	#homepage-video {
		width: 100%; max-width: 1040px;
		position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
		z-index: 30000;
		border: 10px solid #fff;
		margin-left: auto;
	}
	#homepage-video .overlay-content {
		background-color: #000;
		margin-top: 0px;
	}


	#homepage-video .overlay-close {
		position: absolute;
		top: -55px; right: -15px;
		display: block; width: 40px; height: 40px;
	}

	#homepage-video .overlay-close::before,
	#homepage-video .overlay-close::after {
		display: block;
		width: 80%; height: 5px;
		background-color: #000;
		content: "";
		position: absolute;
		top: 50%; left: 50%;
		-webkit-transform: translate(-50%,-50%) rotate(45deg);
		transform: translate(-50%,-50%) rotate(45deg);
		-webkit-transition: all 500ms ease-in-out;
		transition: all 500ms ease-in-out;
	}

	#homepage-video .overlay-close:hover::before,
	#homepage-video .overlay-close:hover::after {
		-webkit-transform: translate(-50%,-50%) rotate(0deg);
		transform: translate(-50%,-50%) rotate(0deg);
	}

	#homepage-video .overlay-close::before {
		-webkit-transform: translate(-50%,-50%) rotate(-45deg);
		transform: translate(-50%,-50%) rotate(-45deg);
	}


		#homepage-video {
			width: 100%;
			height: auto;
			background-color: transparent;
			display: block;
			line-height: 0;
		}





	/*offset anchor tags*/
	.offset_anchor::before {
	  content:"";
	  display:block;
	  height:115px; /* fixed header height*/
	  margin:-115px 0 0; /* negative fixed header height */
	}


	#notifications-banner {
		display: block; clear: both;
		padding: 0px 10px; box-sizing: border-box;
		width: 100%;
		height: 30px;
		line-height: 30px;
		vertical-align: middle;
		color: #fff !important;
		transition: all .10s linear;
		-o-transition: all .10s linear;
		-moz-transition: all .10s linear;
		-webkit-transition: all .10s linear;
		font-size: 0.75rem;
		text-align: center !important;
		margin-top: 0px !important;
		padding-top: 0px !important;
		background-color: #000;
		background: -moz-linear-gradient(top, #383838 0%, #000000 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, #383838 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #383838 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#383838', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
		z-index:25;
		position:relative;
	}

	#notifications-banner.minimize {
		height: 0px;
		opacity: 0;
		padding: 0px !important;
	}

	#notifications-banner a {
		color: #fff !important;
		font-weight: bolder;
		text-decoration: none;
	}
	#notifications-banner a:hover {
		font-weight: bolder;
		text-decoration: underline;
	}

	#notifications-banner a.notification-close {
		display: inline-block;
		font-size: 1rem;
		width: 20px; height: 20px;
		border: 1px solid #757575;
		text-align: center;
		box-sizing: border-box;
		line-height: 100%;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		padding-top: 2px;
		vertical-align: middle;
		position: relative; top: -2px;
		margin-left: 20px;
	}
	a.notification-close span {
			display: inline-block;
			text-align: center;
			position: relative;
			top: -2px;
	}