/* ------------------------------------------------------------------------------- */
/*  Reset & Clearfix (http://meyerweb.com/eric/tools/css/reset/)
/* ------------------------------------------------------------------------------- */

	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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline; }
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
		display: block; }
	body {
		line-height: 1; }
	ol, ul {
		list-style: none; }
	blockquote, q {
		quotes: none; }
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none; }
	table {
		border-collapse: collapse;
		border-spacing: 0; }

/* =============================================================================
   Skeleton Grid - Modified by Lucas Dechow (http://dechowmedia.com)
   ========================================================================== */

/* #Base 960 Grid - Modified with percentages (pixel values in comments)
================================================== */

    .container                                  { position: relative; width: 93%; margin: 0 auto; padding: 0; } /*960px by 1024px*/
    .container-fixed							{ position: relative; width: 960px; margin: 0 auto; padding: 0;}
    .column, .columns                           { float: left; display: inline; margin-left: 0; margin-right: 0; } /*10px Margin - JSharp No Margin */ 
    .row                                        { margin-bottom: 2%; } /*20px Margin*/

    /* Nested Column Classes */
    .column.alpha, .columns.alpha               { margin-left: 0; }
    .column.omega, .columns.omega               { margin-right: 0; }

    /* Base Grid */
    .container-fixed .four.columns              { width: 220px; margin-right:25px; }
    .container-fixed .four.columns.omega        { margin-right:0px; }
    .container .one.column                      { width: 4.1%;  } /*40px*/
    .container .two.columns                     { width: 10.4%; } /*100px*/
    .container .three.columns                   { width: 16.6%; } /*160px*/
    .container .four.columns                    { width: 22.9%; } /*220px*/
    .container .five.columns                    { width: 29.16%; } /*280px*/
    .container .six.columns                     { width: 35%; } /*340px*/
    .container .seven.columns                   { width: 41.6%; } /*400px*/
    .container .eight.columns                   { width: 47.9%; } /*460px*/
    .container .nine.columns                    { width: 54.16%; } /*520px*/
    .container .ten.columns                     { width: 60%; } /*580px*/
    .container .eleven.columns                  { width: 66.66%; } /*640px*/
    .container .twelve.columns                  { width: 77.1%; } /*700px*/
    .container .thirteen.columns                { width: 79.16%; } /*760px*/
    .container .fourteen.columns                { width: 85%; } /*820px*/
    .container .fifteen.columns                 { width: 91.66%; } /*880px*/
    .container .sixteen.columns                 { width: 97.9%; } /*940px*/

    .container .one-third.column                { width: 31.25%; } /*300px*/
    .container .two-thirds.column               { width: 64.5%; } /*620px*/

    /* Offsets */
    .container .offset-by-one                   { padding-left: 6.25%;  } /*60px*/
    .container .offset-by-two                   { padding-left: 12.5%; } /*120px*/
    .container .offset-by-three                 { padding-left: 18.75%; } /*180px*/
    .container .offset-by-four                  { padding-left: 25%; } /*240px*/
    .container .offset-by-five                  { padding-left: 31.25%; } /*300px*/
    .container .offset-by-six                   { padding-left: 37.5%; } /*360px*/
    .container .offset-by-seven                 { padding-left: 43.7%; } /*420px*/
    .container .offset-by-eight                 { padding-left: 50%; } /*480px*/
    .container .offset-by-nine                  { padding-left: 56.25%; } /*540px*/
    .container .offset-by-ten                   { padding-left: 62.5%; } /*600px*/
    .container .offset-by-eleven                { padding-left: 68.75%; } /*660px*/
    .container .offset-by-twelve                { padding-left: 75%; } /*720px*/
    .container .offset-by-thirteen              { padding-left: 81.25%; } /*780px*/
    .container .offset-by-fourteen              { padding-left: 87.5%; } /*840px*/
    .container .offset-by-fifteen               { padding-left: 93.75%; } /*900px*/


/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 768px) and (max-width: 959px) {
        .container                                  { width: 93%; } /*768px*/
        .container-fixed							{ width: 768px; }
        .container .column,
        .container .columns                         { margin-left: 0; margin-right: 0; } /*10px Margin - JSharp No Margin */
        .column.alpha, .columns.alpha               { margin-left: 0; margin-right: 1.3%; } /*10px margin*/
        .column.omega, .columns.omega               { margin-right: 0; margin-left: 1.3%; } /*10px margin*/

		.container-fixed .four.columns              { width: 172px; margin-right:20px;}
		.container-fixed .four.columns.omega        { margin-right:0px; }
        .container .one.column                      { width: 3.64%; } /*28px*/
        .container .two.columns                     { width: 9.89%; } /*76px*/
        .container .three.columns                   { width: 16.1%; } /*124px*/
        .container .four.columns                    { width: 22.39%; } /*172px*/
        .container .five.columns                    { width: 28.64%; } /*220px*/
        .container .six.columns                     { width: 34.89%; } /*268px*/
        .container .seven.columns                   { width: 41.14%; } /*316px*/
        .container .eight.columns                   { width: 47.39%; } /*364px*/
        .container .nine.columns                    { width: 53.64%; } /*412px*/
        .container .ten.columns                     { width: 59.89%; } /*460px*/
        .container .eleven.columns                  { width: 66.14%; } /*508px*/
        .container .twelve.columns                  { width: 77.61%; } /*556px*/
        .container .thirteen.columns                { width: 78.64%; } /*604px*/
        .container .fourteen.columns                { width: 84.89%; } /*652px*/
        .container .fifteen.columns                 { width: 91.14%; } /*700px*/
        .container .sixteen.columns                 { width: 97.39%; } /*748px*/

        .container .one-third.column                { width: 30.72%; } /*236px*/
        .container .two-thirds.column               { width: 64%; } /*492px*/

        /* Offsets */
        .container .offset-by-one                   { padding-left: 6.25%; } /*48px padding*/
        .container .offset-by-two                   { padding-left: 12.5%; } /*96px padding*/
        .container .offset-by-three                 { padding-left: 18.75%; } /*144px padding*/
        .container .offset-by-four                  { padding-left: 25%; } /*192px padding*/
        .container .offset-by-five                  { padding-left: 31.25%; } /*240px padding*/
        .container .offset-by-six                   { padding-left: 37.5%; } /*288px padding*/
        .container .offset-by-seven                 { padding-left: 43.75%; } /*336px padding*/
        .container .offset-by-eight                 { padding-left: 45%; } /*348px padding*/
        .container .offset-by-nine                  { padding-left: 56.25%; } /*432px padding*/
        .container .offset-by-ten                   { padding-left: 62.5%; } /*480px padding*/
        .container .offset-by-eleven                { padding-left: 68.75%; } /*528px padding*/
        .container .offset-by-twelve                { padding-left: 75%; } /*576px padding*/
        .container .offset-by-thirteen              { padding-left: 81.25%; } /*624px padding*/
        .container .offset-by-fourteen              { padding-left: 87.5%; } /*672px padding*/
        .container .offset-by-fifteen               { padding-left: 93.75%; } /*720px padding*/
    }


/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 767px) {
        .container { width: 93%; }
        .container-fixed { width: 320px; }
        .columns, .column { margin: 0; }

		.container-fixed .four.columns { width: 300px;}
		
        .container .one.column,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column,
        .container .two-thirds.column  { width: 100%; } /*300px*/

        /* Offsets */
        .container .offset-by-one,
        .container .offset-by-two,
        .container .offset-by-three,
        .container .offset-by-four,
        .container .offset-by-five,
        .container .offset-by-six,
        .container .offset-by-seven,
        .container .offset-by-eight,
        .container .offset-by-nine,
        .container .offset-by-ten,
        .container .offset-by-eleven,
        .container .offset-by-twelve,
        .container .offset-by-thirteen,
        .container .offset-by-fourteen,
        .container .offset-by-fifteen { padding-left: 0; }

    }


/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .container { width: 93%; } 
        .container-fixed { width: 480px; }
        .columns, .column { margin: 0; }
		
		.container-fixed .four.columns              { width: 100px; margin-right:10px;}
		.container-fixed .four.columns.omega        { margin-right:0px; }
		
        .container .one.column,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column,
        .container .two-thirds.column { width: 100%; } /*420px*/
    }


/* #Clearing
================================================== */

    /* Self Clearing Goodness */
    .container:after, .container-fixed:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

    /* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */
    .clearfix:before,
    .clearfix:after,
    .row:before,
    .row:after {
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0; }
    .row:after,
    .clearfix:after {
      clear: both; }
    .row,
    .clearfix {
      zoom: 1; }

    /* You can also use a <br class="clear" /> to clear columns */
    .clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
    }


/* #Basic Styles
================================================== */
	body {
		background: #fff;
		font: 11px/17px Open Sans, Arial, sans-serif;
		font-weight:400;
		color: #181717;
		-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
		-webkit-text-size-adjust: 100%;
 	}

/* #Typography
================================================== */
	h1, h2, h3, h4, h5, h6 {color: #666; font-family: 'Open Sans', Arial, sans-serif; font-weight: 400; }
	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
	h1 { font-size: 25px; line-height: 28px; text-transform: uppercase;}
	h2 { font-size: 20px; line-height: 24px; margin-bottom: 10px;}
	body.home #main-content h1, body.home #main-content h2, footer h2, #category-landing h2, body.sub-page.sub-landing  #main-content-wrap h1 {color: #fff; }
	h3 { font-size: 12px; line-height: 18px; margin-bottom: 5px; }
	h4 { font-size: 12px; line-height: 18px; margin-bottom: 6px; }
	h5 { font-size: 11px; line-height: 18px; }
	h6 { font-size: 10px; line-height: 18px; }
	.subheader { color: #777; }

	p { margin: 0 0 10px 0; }
	p img { margin: 0; }
	p.lead { font-size: 21px; line-height: 27px; color: #777;  }

	em { font-style: italic; }
	strong { font-weight: bold; color: #333; }
	small { font-size: 80%; }

/*	Blockquotes  */
	blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; }
	blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
	blockquote cite { display: block; font-size: 12px; color: #555; }
	blockquote cite:before { content: "\2014 \0020"; }
	blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }

	hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; }

/* #Links
================================================== */

	a {
		outline:none;
		cursor:pointer;
	    transition:color .4s ease-out;
	    -moz-transition:color .4s ease-out;
	    -webkit-transition:color .4s ease-out;
	    -o-transition:color .4s ease-out;
	    -ms-transition:color .4s ease-out;
		transition:none !ie;
		text-decoration: none;
	}

	a, a:visited { color:#333; text-decoration: none; outline: 0; font-weight:bold; }
	a:hover, a:focus { color:#b11f1f; text-decoration:none; font-weight:bold;}
	p a, p a:visited { line-height: inherit; }

/* #Lists
================================================== */
	ul, ol { margin-bottom: 20px; }
	ul { list-style: none outside; }
	ol { list-style: decimal; }
	ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
	ul.square { list-style: square outside; }
	ul.circle { list-style: circle outside; }
	ul.disc { list-style: disc outside; }
	ul ul, ul ol,
	ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%;  }
	ul ul li, ul ol li,
	ol ol li, ol ul li { margin-bottom: 6px; }
	li { line-height: 18px; margin-bottom: 12px; }
	ul.large li { line-height: 21px; }
	li p { line-height: 21px; }

/* #Images
================================================== */

img.scale-with-grid {max-width: 100%;height: auto;vertical-align: bottom !important;}
img.min-img-width {min-width:100%; width:100%; height: auto; padding:0; margin:0;vertical-align: bottom !important;}

/* #Buttons
================================================== */

	.button,
	button,
	input[type="submit"],
	input[type="reset"],
	input[type="button"] {
		background: #eee; /* Old browsers */
		background: #eee -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */
		background: #eee -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */
		background: #eee -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */
		background: #eee -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */
		background: #eee -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */
		background: #eee linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */
	  border: 1px solid #aaa;
	  border-top: 1px solid #ccc;
	  border-left: 1px solid #ccc;
	  -moz-border-radius: 3px;
	  -webkit-border-radius: 3px;
	  border-radius: 3px;
	  color: #444;
	  display: inline-block;
	  font-size: 11px;
	  font-weight: bold;
	  text-decoration: none;
	  text-shadow: 0 1px rgba(255, 255, 255, .75);
	  cursor: pointer;
	  margin-bottom: 20px;
	  line-height: normal;
	  padding: 8px 10px;
	  font-family: Open Sans, Arial, sans-serif; }

	.button:hover,
	button:hover,
	input[type="submit"]:hover,
	input[type="reset"]:hover,
	input[type="button"]:hover {
		color: #222;
		background: #ddd; /* Old browsers */
		background: #ddd -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.3) 100%); /* FF3.6+ */
		background: #ddd -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */
		background: #ddd -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Chrome10+,Safari5.1+ */
		background: #ddd -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Opera11.10+ */
		background: #ddd -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* IE10+ */
		background: #ddd linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* W3C */
	  border: 1px solid #888;
	  border-top: 1px solid #aaa;
	  border-left: 1px solid #aaa; }

	.button:active,
	button:active,
	input[type="submit"]:active,
	input[type="reset"]:active,
	input[type="button"]:active {
		border: 1px solid #666;
		background: #ccc; /* Old browsers */
		background: #ccc -moz-linear-gradient(top, rgba(255,255,255,.35) 0%, rgba(10,10,10,.4) 100%); /* FF3.6+ */
		background: #ccc -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.35)), color-stop(100%,rgba(10,10,10,.4))); /* Chrome,Safari4+ */
		background: #ccc -webkit-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Chrome10+,Safari5.1+ */
		background: #ccc -o-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Opera11.10+ */
		background: #ccc -ms-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* IE10+ */
		background: #ccc linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* W3C */ }

	.button.full-width,
	button.full-width,
	input[type="submit"].full-width,
	input[type="reset"].full-width,
	input[type="button"].full-width {
		width: 100%;
		padding-left: 0 !important;
		padding-right: 0 !important;
		text-align: center; }

	/* Fix for odd Mozilla border & padding issues */
	button::-moz-focus-inner,
	input::-moz-focus-inner {
    border: 0;
    padding: 0;
	}


/* #Forms
================================================== */

	form {
		margin-bottom: 20px; }
	fieldset {
		margin-bottom: 20px; }
	input[type="text"],
	input[type="password"],
	input[type="email"],
	textarea,
	select {
		border: 1px solid #ccc;
		padding: 6px 10px;
		outline: none;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 2px;
		font: 13px Open Sans, Arial, sans-serif;
		color: #777;
		margin: 0;
		width: 210px;
		max-width: 100%;
		display: block;
		margin-bottom: 20px;
		background: #fff;
		border-radius: 4px 4px 4px 4px;
		-moz-border-radius: 4px 4px 4px 4px;
		-webkit-border-radius: 4px 4px 4px 4px;
		-o-border-radius: 4px 4px 4px 4px;
	}
	select {
		padding: 0; }
	input[type="text"]:focus,
	input[type="password"]:focus,
	input[type="email"]:focus,
	textarea:focus {
		border: 1px solid #aaa;
 		color: #444;
 		-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
		-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
		box-shadow:  0 0 3px rgba(0,0,0,.2); }
	textarea {
		min-height: 60px; }
	label,
	legend {
		display: block;
		font-weight: bold;
		font-size: 13px;  }
	select {
		width: 220px; }
	input[type="checkbox"] {
		display: inline; }
	label span,
	legend span {
		font-weight: normal;
		font-size: 13px;
		color: #444; }

/* #Resets
================================================== */
	.remove-bottom { margin-bottom: 0 !important; }
	.half-bottom { margin-bottom: 10px !important; }
	.add-bottom-s { margin-bottom: 20px !important; }
	.add-bottom-l { margin-bottom: 50px !important; }
	.add-top-s { margin-top: 20px !important; }
	.add-top-l { margin-top: 50px !important; }
	.flt-lht {float:left !important;}
 	.flt-rht {float:right !important;}
 	.txt-rht {text-align:right;}
 	.pad-s {padding: 5px 15px;}
 	.pad-m {padding-top:50px;}
 	.pad-l {padding: 6%;}
 	
 	.bck-one {
 	background: url(../img/bck-70.png) top left repeat;
 	border-radius: 4px 0 0 4px;
	-moz-border-radius: 4px 0 0 4px;
	-webkit-border-radius: 4px 0 0 4px;
	-o-border-radius: 4px 0 0 4px;
 	}

/* #Site Wide
================================================== */

* { margin:0; padding:0; }
img{ border:none; }

html.js #js-alert {display:none;}
html.no-js #js-alert {margin:30px 0px 15px 0px; color:#fff; font-weight:bold; width:40%; padding:5px; z-index:10;}
.alert {background-color:#8e7d41;}

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

/* layout.css overrides */
.dl-menuwrapper ul, ol { margin-bottom: 0; }
.dl-menuwrapper ul ul, .dl-menuwrapper ul ol,
.dl-menuwrapper ol ol, .dl-menuwrapper ol ul {
	margin: 0; font-size: 100%;
}
.dl-menuwrapper ul ul li, .dl-menuwrapper ul ol li,
.dl-menuwrapper ol ol li, .dl-menuwrapper ol ul li { margin-bottom: 0; }
.dl-menuwrapper li { line-height: 18px; margin-bottom: 0; }

/* Common styles of menus */
.dl-menuwrapper {
	width: 100%;
	max-width: 250px;
	position: fixed;
	top:0;
	right:0;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	perspective: 1000px;
	-webkit-perspective-origin: 50% 200%;
	-moz-perspective-origin: 50% 200%;
	perspective-origin: 50% 200%;
	z-index:1001;
}

.dl-menuwrapper:first-child {
	margin-right: 100px;
}

.dl-menuwrapper ul {
	background: #aaa;
}

.dl-menuwrapper ul {
	padding: 0;
	list-style: none;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.dl-menuwrapper li {
	position: relative;
}

.dl-menuwrapper li a {
	display: block;
	position: relative;
	padding: 10px 20px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 300;
	color: #fff;
	outline: none;
}

.no-touch .dl-menuwrapper li a:hover {
	background: rgba(255,248,213,0.1);
}

.dl-menuwrapper li.dl-back > a {
	padding-left: 30px;
	background: rgba(0,0,0,0.1);
}

.dl-menuwrapper li.dl-back:after,
.dl-menuwrapper li > a:not(:only-child):after {
	position: absolute;
	top: 0;
	line-height: 50px;
	font-family: 'icomoon';
	speak: none;
	-webkit-font-smoothing: antialiased;
	content: "\e000";
}

.dl-menuwrapper li.dl-back:after {
	left: 10px;
	color: rgba(212,204,198,0.3);
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	transform: rotate(180deg);
}

.dl-menuwrapper li > a:after {
	right: 10px;
	color: rgba(0,0,0,0.15);
}

.dl-menuwrapper .dl-menu {
	position: fixed;
	top: 42px;
	width: 100%;
	opacity: 0;
	pointer-events: none;
	-webkit-transform: translateY(10px);
	-moz-transform: translateY(10px);
	transform: translateY(10px);
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}

.dl-menuwrapper .dl-menu.dl-menu-toggle {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.dl-menuwrapper .dl-menu.dl-menuopen {
	opacity: 1;
	pointer-events: auto;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}

/* Hide the inner submenus */
.dl-menuwrapper li .dl-submenu {
	display: none;
}

/* 
When a submenu is openend, we will hide all li siblings.
For that we give a class to the parent menu called "dl-subview".
We also hide the submenu link. 
The opened submenu will get the class "dl-subviewopen".
All this is done for any sub-level being entered.
*/
.dl-menu.dl-subview li,
.dl-menu.dl-subview li.dl-subviewopen > a,
.dl-menu.dl-subview li.dl-subview > a {
	display: none;
}

.dl-menu.dl-subview li.dl-subview,
.dl-menu.dl-subview li.dl-subview .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li {
	display: block;
}

/* Dynamically added submenu outside of the menu context */
.dl-menuwrapper > .dl-submenu {
	position: absolute;
	width: 100%;
	top: 54px;
	left: 0;
	margin: 0;
}

/* Animation class for moving out and in */
.dl-menu.dl-animate-out-5 {
	-webkit-animation: MenuAnimOut5 0.4s ease;
	-moz-animation: MenuAnimOut5 0.4s ease;
	animation: MenuAnimOut5 0.4s ease;
}

@-webkit-keyframes MenuAnimOut5 {
	100% {
		-webkit-transform: translateY(40%);
		opacity: 0;
	}
}

@-moz-keyframes MenuAnimOut5 {
	100% {
		-moz-transform: translateY(40%);
		opacity: 0;
	}
}

@keyframes MenuAnimOut5 {
	100% {
		transform: translateY(40%);
		opacity: 0;
	}
}

.dl-menu.dl-animate-in-5 {
	-webkit-animation: MenuAnimIn5 0.4s ease;
	-moz-animation: MenuAnimIn5 0.4s ease;
	animation: MenuAnimIn5 0.4s ease;
}

@-webkit-keyframes MenuAnimIn5 {
	0% {
		-webkit-transform: translateY(40%);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0);
		opacity: 1;
	}
}

@-moz-keyframes MenuAnimIn5 {
	0% {
		-moz-transform: translateY(40%);
		opacity: 0;
	}
	100% {
		-moz-transform: translateY(0);
		opacity: 1;
	}
}

@keyframes MenuAnimIn5 {
	0% {
		transform: translateY(40%);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-5 {
	-webkit-animation: SubMenuAnimIn5 0.4s ease;
	-moz-animation: SubMenuAnimIn5 0.4s ease;
	animation: SubMenuAnimIn5 0.4s ease;
}

@-webkit-keyframes SubMenuAnimIn5 {
	0% {
		-webkit-transform: translateZ(-200px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0);
		opacity: 1;
	}
}

@-moz-keyframes SubMenuAnimIn5 {
	0% {
		-moz-transform: translateZ(-200px);
		opacity: 0;
	}
	100% {
		-moz-transform: translateZ(0);
		opacity: 1;
	}
}

@keyframes SubMenuAnimIn5 {
	0% {
		transform: translateZ(-200px);
		opacity: 0;
	}
	100% {
		transform: translateZ(0);
		opacity: 1;
	}
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-5 {
	-webkit-animation: SubMenuAnimOut5 0.4s ease;
	-moz-animation: SubMenuAnimOut5 0.4s ease;
	animation: SubMenuAnimOut5 0.4s ease;
}

@-webkit-keyframes SubMenuAnimOut5 {
	0% {
		-webkit-transform: translateZ(0);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateZ(-200px);
		opacity: 0;
	}
}

@-moz-keyframes SubMenuAnimOut5 {
	0% {
		-moz-transform: translateZ(0);
		opacity: 1;
	}
	100% {
		-moz-transform: translateZ(-200px);
		opacity: 0;
	}
}

@keyframes SubMenuAnimOut5 {
	0% {
		transform: translateZ(0);
		opacity: 1;
	}
	100% {
		transform: translateZ(-200px);
		opacity: 0;
	}
}

/* No JS Fallback */
.no-js .dl-menuwrapper .dl-menu {
	position: relative;
	opacity: 1;
	-webkit-transform: none;
	-moz-transform: none;
	transform: none;
}

.no-js .dl-menuwrapper li .dl-submenu {
	display: block;
}

.no-js .dl-menuwrapper li.dl-back {
	display: none;
}

.no-js .dl-menuwrapper li > a:not(:only-child) {
	background: rgba(0,0,0,0.1);
}

.no-js .dl-menuwrapper li > a:not(:only-child):after {
	content: '';
}


/* Colours */
.dl-menuwrapper button {
	background: #08cbc4;
}

.dl-menuwrapper button:hover,
.dl-menuwrapper button.dl-active,
.dl-menuwrapper ul {
	background: #b11f1f;
}

/*  Responsive Nav  -------*/
header #dl-menu {
	display: none;
}

header a.resp_menu {
	display: none;
	position: fixed;
	top: 0px;
	right: 0px;
	width: 32px;
	height: 37px;
	background: #b11f1f;
	padding: 5px;
	z-index:2;
}

header a.resp_menu span {
	display: block;
	width: 32px;
	height: 37px;
	background: transparent url(../img/ipad-menu.png) 0 0 no-repeat;
}

/* STANDARD NAV */
header ul.nav, header ul.nav li {margin:0;padding:0;}
.nav {position:fixed;bottom:25px;right:4%;z-index:99;}
.nav li {float:left;}
.nav li a {color:#333; text-transform: uppercase; font-weight: bold; margin-right:20px;}
.nav li:last-child a {margin-right:0px;}
.nav li a:hover, .nav li a.nav-selected {color:#b11f1f;}


/* #CORE LAYOUT
================================================== */
header {z-index:120;}
body.sub-page #main-content-head {position:relative;height:auto;width:100%;top:1px;}
body.sub-page #main-content-wrap {background: #fff; width:100%; padding-bottom: 30px;}
body.sub-page.sub-landing  #main-content-wrap {background: none;}

body.home #main-content-wrapper {position:relative; margin-top:200px; padding-bottom:50px;}
body.sub-page #main-content-wrapper {margin-top:150px; position:relative; padding-bottom:200px;}

#main-content {clear:both;}
#main-content h1, #main-content h2 {margin-bottom:10px;}

#logo {position: fixed; top:0; left:0; width:290px; z-index:11;}
#logo img {min-width:100%; width:100%;}

@-webkit-keyframes fade-in { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fade-in { from { opacity:0; } to { opacity:1; } }
@-ms-keyframes fade-in { from { opacity:0; } to { opacity:1; } }
@-0-keyframes fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes fade-in { from { opacity:0; } to { opacity:1; } }

#bck {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
  z-index:-1;
}
#bck img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

img.fadeIn {
	opacity:0;  /* make things invisible upon start */
    -webkit-animation:fade-in ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fade-in ease-in 1;
    -ms-animation:fade-in ease-in 1;
    -o-animation:fade-in ease-in 1;
    animation:fade-in ease-in 1;
 
    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    -ms-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
 
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    -ms-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;
}

.fadeIn.visible {
  opacity: 1;
}

/* #FOOTER
================================================== */

footer {position: fixed; bottom:0; left:0px; width:100%; z-index:11;}

#footer-head {position:relative;height:auto;width:100%;top:1px;}
footer .wrap {position:relative; width:100%; font-size:10px; background: #fff; z-index:2;}
footer .container {padding:5px 0 7px 0; min-height:30px;}

footer #footer-btns {position: absolute; width:960px; left:50%; margin-left:-480px; z-index:-1;}
body.home footer #footer-btns {top:-90px;}
body.sub-page footer #footer-btns {top:-70px;}

footer .container-fixed {color:#fff; text-transform: uppercase;}
footer .foot-head-wrap {position: relative; top:20px; z-index:22; width:90%;}

footer .container-fixed .four.columns {height:130px;overflow:hidden;}
footer .container-fixed .four.columns img {position: relative; top:-28px;}

footer #contact-foot {padding-top:20px;}
footer #contact-foot .icons {margin-top:20px;}

.icon-fb {background: transparent url(../img/ico-fb.png) 0 0 no-repeat;width:38px; height:38px;}
.icon-inst {background: transparent url(../img/ico-inst.png) 0 0 no-repeat;width:37px; height:38px;}
.icon-fb, .icon-inst, .det-p {float:left;font-size:14px;line-height: 38px; margin-right:5px;}
.icon-fb:hover, .icon-inst:hover, .det-p:hover {opacity:.5; filter: alpha(opacity=50);cursor: pointer;}
.det-p:after {clear:right;}
.det-p a, .det-p a:active {color:#fff;}

footer .slideDownHov {
	background:#fff;
}
footer .slideDownHov:hover {
	margin-top:10px;
	cursor: pointer;
}

/* #STYLES
================================================== */
.highlight {color:#b11f1f;font-weight:bold;}
.credits {font-size: .9em;line-height:22px;}
#social-icons {float:right; margin-left:10px; line-height:22px;}

body.home #main-content h1 {font-size:45px;line-height:45px;clear:right;}
body.home #main-content h2 {font-size:22px;line-height:26px;clear:right;}
body.home #main-content p {color:#fff; font-size:11px;opacity:.7; filter: alpha(opacity=70);}

footer span.left-head, footer span.right-head, footer h2, #category-landing span.left-head, #category-landing span.right-head, #category-landing h2 {line-height:21px;padding:0;float:left;}
footer h2, #category-landing h2 {background: transparent url(../img/red-banner-mid.png) 0 0 repeat; font-size:13px; letter-spacing: 1px; text-transform: uppercase;}
footer span.left-head, #category-landing span.left-head {background: transparent url(../img/red-banner-rht.png) 0 0 no-repeat;width:10px;height:21px;}
footer span.right-head, #category-landing span.right-head {background: transparent url(../img/red-banner-lft.png) 0 0 no-repeat;width:10px;height:21px;}

.thumb-fade {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}

.thumb-fade:hover {
opacity: 0.7;
filter: alpha(opacity=70);
}

/* #SUB PAGE
================================================== */

#parent-page-head {position:relative; top:-50px;}
#parent-page-head h1 {color:#fff; margin-bottom:5px;}
#breadcrumb {font-size: .9em; margin-bottom: 10px;}

/* #CATEGORY / GALLERY
================================================== */
body.sub-gallery article {margin-top:-30px;}
#category-landing .four.columns {margin-right:2%;}
#category-landing .cat-btn {height:160px; overflow: hidden; background: #fff;}
#category-landing .cat-title {position: relative; top:30px; z-index:22;}
#category-landing .cat-btn img {position: relative; top:-27px;}


/* #Media Queries
================================================== */

	@media only screen and (min-width: 1200px) {
		.container-fixed {width: 1200px; }
		.container-fixed .four.columns {width: 280px; }
		footer #footer-btns {position: absolute; width:1200px; left:50%; margin-left:-600px; z-index:-1;}
	}

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {

		header .nav {
			display: none;
		}
		
		header #dl-menu {
			display: block;
			z-index:999;
		}

		header a.resp_menu {
			display: block;
			z-index:999;
		}
		
		
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
	footer #footer-btns {position: absolute; width:768px; left:50%; margin-left:-384px; z-index:-1;}
	body.home footer #footer-btns {top:-100px;}
	body.sub-page footer #footer-btns {top:-70px;}
	.slideDownHov .min-img-width {height:130px !important; width:auto;}
	
	.det-p {font-size:11px;}
	footer h2 {font-size:11px;}
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
	footer {position: relative !important;}
	footer #footer-btns {position:static !important; left:auto !important; margin:0; padding:0; width:100%; padding-bottom:20px;}
	/* .container-fixed .four.columns  { width: 172px; margin-right:20px;} */
	
	footer .slideDownHov:hover {
	margin:0 !important;
	}
	
	body.home .slideUp{
	animation-name: none;
	-webkit-animation-name: none;	
	}

	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
	.container-fixed .four.columns  { width: 50%; margin:0px;}
	
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		#logo {width:95%; position:fixed; z-index:80;}
		#main-content h2 {word-break:break-all;}
		.container-fixed .four.columns  { width: 100%; margin:0;}
	}