@import url("bebasneue.css");
@import url("socicon.css");

html {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	font-family: 'Roboto', sans-serif;
}

body {
  background: url(/images/template/bg.jpg) fixed no-repeat center top;
  background-size: cover;
  padding: 0;
  margin: 0;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	line-height: 22px;
	color: #555;
	
}

h1, h2, h3, h4, h5, h6 {
	font-family: bebas_neuebold, Impact, sans-serif;
	font-weight: normal;
}

h3, h4 {
  font-family: bebas_neue_regularregular, Impact, sans-serif;
  letter-spacing: 0.1em;
}

h3 {font-size:1.3em;}

h4 {font-size:1.1em;}

h1.orange, h2.orange, h3.orange{
	margin: 0;
	color: #ce3b26;
	text-align: center;
	letter-spacing: normal;
}

h1.orange{font: normal 36px/40px bebas_neue_regularregular, 'Arial Narrow', sans-serif;}
h2.orange{font: normal 30px bebas_neue_regularregular, "Arial Narrow", sans-serif;}
h3.orange{font: normal 24px bebas_neue_regularregular, "Arial Narrow", sans-serif;}

/* Encloses a character in an orange dot.  Usually used for numbering. */
h2 .dot, h3 .dot {
	width: 40px;
	height: 40px;
	line-height: 40px;
	font-size: 22px;
	font-weight:bold;
	text-align: center;
	display: inline-block;
	color:#fff;
	background: #ce3b26;
	content: "";
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	margin-right:15px;
}


/* Miscellaneous Styles */
 .photo_left, .photo_right {display:block; border:1px solid black;}
 .photo_left {float:left; margin:0 1em 1em 0;}
 .photo_right{float:right; margin:0 0 1em 1em;}
/* Style for cover images */ 
.cover{margin-right:10px; margin-bottom: 10px;  float: left; border:0px;}
 

div.hr {
	height: 36px;
	box-sizing: border-box;
	padding: 16px 0;
	background: url(/images/template/paw.svg) no-repeat center center;
	background-size: contain;
}

div.hr::before {
	width: 45%;
	height: 4px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#bbbbbb+0,bbbbbb+100&0+0,1+100 */
	background: -moz-linear-gradient(left,  rgba(187,187,187,0) 0%, rgba(187,187,187,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(187,187,187,0) 0%,rgba(187,187,187,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(187,187,187,0) 0%,rgba(187,187,187,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00bbbbbb', endColorstr='#bbbbbb',GradientType=1 ); /* IE6-9 */
	display: block;
	content: "";
	float: left;
}

div.hr::after {
	width: 45%;
	height: 4px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#bbbbbb+0,bbbbbb+100&1+0,0+100 */
	background: -moz-linear-gradient(left,  rgba(187,187,187,1) 0%, rgba(187,187,187,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(187,187,187,1) 0%,rgba(187,187,187,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(187,187,187,1) 0%,rgba(187,187,187,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbbbbb', endColorstr='#00bbbbbb',GradientType=1 ); /* IE6-9 */
	display: block;
	content: "";
	float: right;
}

div.hr hr {
	display: none;
}

.notice {
	border-top: 5px solid #ce3b26;
	color: #ce3b26;
	font-weight: 700!important;
	background: #e1e1e1;
	padding: 20px 20px 20px 55px;
	margin: 20px 0;
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.notice::before {
	color: #ce3b26;
	display: block;
	width: 54px;
	height: 54px;
	text-align: center;
	content: "!";
	font-weight: 700;
	font-size: 44px;
	line-height: 80px;
	position: absolute;
	left: 0;
	top: 0;
	background: url('/images/template/arrow-red.svg') no-repeat 20px top;
	background-size: 15px auto;
}

blockquote {
	background: #e1e1e1;
	padding: 20px 20px 20px 55px;
	margin: 20px 0 50px 0;
	position: relative;
	width: 100%;
	box-sizing: border-box;
	border-top: 5px solid #bbb;
}

blockquote::before {
	display: block;
	width: 54px;
	height: 54px;
	text-align: center;
	color: #bbb;
	content: "\201c";
	font: bold 54px/84px Georgia, "Times New Roman", serif;
	position: absolute;
	left: 0;
	top: 0;
	background: url('/images/template/arrow-gray.svg') no-repeat 20px top;
	background-size: 15px auto;
}

blockquote[cite]::after {
	display: block;
	text-align: right;
	content: "- " attr(cite);
	font-style: italic;
	background: #555;
	color: #fafafa;
	font-size: 14px;
	padding: 6px 20px;
	margin: 20px 0 20px;
	position: absolute;
	left: 0;
	right: 0;
	width: 100%;
	box-sizing: border-box;
}

/*
.photoText p {
	background: #555;
	color: #fafafa;
	text-align: center!important;
	font-size: 14px;
	padding: 5px 10px;
	margin: 0 0 20px;
}

.photoText img {
	width: 100%;
	height: auto;
	display: block;
}
*/

.photoText 
{
  display:block;
  float:left;
  margin:1em;
  overflow:hidden;
  border-left:1px solid #ddd;
  border-bottom:1px solid #ddd;
  background: -webkit-gradient(linear,left top,right top, from(#CBCBCB), to(#FCFCFC));
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#CBCBCB',endColorStr='#FCFCFC', GradientType=1);
	 o-border-radius: 5px;
	 -icab-border-radius: 5px;
	 -khtml-border-radius: 5px;
	 -moz-border-radius: 5px;
	 -webkit-border-radius: 5px;
	 border-radius: 5px;
}

.photoText img 
{   
     overflow:hidden;
     border-color:#000;
    -webkit-border-top-left-radius: 5px;
     -webkit-border-top-right-radius: 5px;
     -moz-border-radius-topleft: 5px;
     -moz-border-radius-topright: 5px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
}


.photoText p 
{
	color: #fafafa;
	text-align: center!important;
	font-size: 14px;
	text-shadow: 0 -1px 0 rgba(255,255,255,.5);
    border-right:1px solid #eee;
   	-webkit-border-bottom-left-radius: 5px;
		 -webkit-border-bottom-right-radius: 5px;
		 -moz-border-radius-bottomleft: 5px;
		 -moz-border-radius-bottomright: 5px;
		 border-bottom-left-radius: 5px;
		 border-bottom-right-radius: 5px;
}


/* slightly enhanced, universal clearfix hack */
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */


#page_wrap {
  display: table;
  width: 100%;
  height: 100%;
  background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cc000000',GradientType=0 );
}

#page {
	width: 1200px;
	margin: 40px auto;
	background: #fafafa;
	box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

#header {
	width: 100%;
	height: 500px;
	/*background: #404c5e url(../images/header.jpg) no-repeat center -40px;*/
	background-size: cover;
	position: relative;
	z-index: 1;
	overflow: hidden;
}

#header img {
	position: absolute;
	top: -40px;
	z-index: 0;
}

.header-inner {
    position: relative;
	top: 170px;
	z-index: 3;
	
}

#header h1 {
	text-align: center;
	font: normal 90px/90px bebas_neue_regularregular, Impact, sans-serif;
	color: #fff;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
	margin: 0;
	padding: 0;
}

#header p {
	margin: 0;
	padding: 0;
	text-align: center;
	color: #ce3b26;
	font: normal 34px/34px bebas_neuebold, Impact, sans-serif;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

#content_wrap {
}

#breadcrumbs {
	height: 30px;
	background: #eaeaea;
	margin: 0;
	width: 1200px;
	top: 0;
	transition: all 0.2s ease-in-out;
	z-index: 90;
}

body.sidebar #breadcrumbs {
	width: 900px;
}

#breadcrumbs.sticky {
	position: fixed;
	top: 40px;
}

#breadcrumbs ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	float: left;
	clear: both;
}

#breadcrumbs ul li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	float: left;
}

#breadcrumbs ul li a,
#breadcrumbs ul li:last-child {
	height: 30px;
	padding: 0 10px 0 26px;
	text-decoration: none;
	color: #555;
	font: normal 20px/30px bebas_neuebook, "Arial Narrow", sans-serif;
	display: block;
	position: relative;
	transition: color 0.2s ease-in-out;
	font-variant: small-caps;
}

#breadcrumbs ul li a:hover {
	color: #000000;
}

#breadcrumbs ul li:first-child a {
	padding-left: 20px;
}

#breadcrumbs ul li a {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eaeaea+0,d0d0d0+100 */
	background: rgb(234,234,234); /* Old browsers */
	background: -moz-linear-gradient(left,  rgba(234,234,234,1) 0%, rgba(208,208,208,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(234,234,234,1) 0%,rgba(208,208,208,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(234,234,234,1) 0%,rgba(208,208,208,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#d0d0d0',GradientType=1 ); /* IE6-9 */
}

#breadcrumbs ul li a::after {
	content: '';
	display: block;
	border-left: 13px solid #d0d0d0;
	border-right: 13px solid transparent;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	position: absolute;
	right: -26px;
	top: 0;
	z-index: 1;
}

#content_decoration {
	height: 100%;
	display: block;
}

body.sidebar #content_decoration {
	display: table;
}

#main_wrap {
	width: 100%;
	height: 100%;
}

body.sidebar #main_wrap {
	width: 900px;
	float: right;
}

#main {
	width: 800px;
	margin: 0 auto;
}

body.sidebar #main {
	width: 670px;
}

#main p {
	font-weight: normal;
	/*text-align: justify;*/
	text-align: left;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
     hyphens: auto;
	}

	
#main p.capital::first-letter {
	color: #ce3b26;
	font-weight: 300;
	font-size: 44px;
}

#main div.title {
	margin: 80px 0 0;
	font: 300 14px/14px 'Roboto', sans-serif;
	text-align: center;
	letter-spacing: 4px;
	text-transform: uppercase;
}

#main div.title h2 {
	margin: 0;
	color: #ce3b26;
	font: normal 40px/36px bebas_neue_regularregular, 'Arial Narrow', sans-serif;
	text-align: center;
	letter-spacing: normal;
}

#main div.title span.date {
	display: block;
	font-weight: bold;
	font-size: 10px;
	margin: 10px 0 0;
}

#main div.title h2::after {
	content: "";
	display: block;
	width: 200px;
	height: 2px;
	margin: 18px auto;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cccccc+0,cccccc+100&0+0,1+25,1+75,0+100 */
	background: -moz-linear-gradient(left,  rgba(204,204,204,0) 0%, rgba(204,204,204,1) 25%, rgba(204,204,204,1) 75%, rgba(204,204,204,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(204,204,204,0) 0%,rgba(204,204,204,1) 25%,rgba(204,204,204,1) 75%,rgba(204,204,204,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(204,204,204,0) 0%,rgba(204,204,204,1) 25%,rgba(204,204,204,1) 75%,rgba(204,204,204,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00cccccc', endColorstr='#00cccccc',GradientType=1 ); /* IE6-9 */
}

#sidebar_wrap {
	width: 300px;
	height: 100%;
	background: #ddd;
	box-sizing: border-box;
	border-right: 1px solid #bbb;
	display: inline-block;
}

#sidebar h2 {
	background: #ccc;
	margin: 0 0 30px;
	padding: 16px 0;
	font: normal 28px/30px bebas_neue_regularregular, "Arial Narrow", sans-serif;
	text-align: center;
	color: #555;
}

#sidebar ul {
	list-style-type: none;
	margin: 0;
	padding: 0 30px;
	text-align: center;
}

#sidebar ul li {
	list-style-type: none;
	margin: 0 0 30px;
	padding: 0;
}

#sidebar ul li br {
	display: none;
}

#sidebar ul li span {
	font: bold 10px/8px 'Roboto', sans-serif;
	color: #ce3b26;
	letter-spacing: 4px;
	text-transform: uppercase;
	display: block;
	margin: 15px 0 0;
}

#sidebar ul li a {
	text-decoration: none;
	display: block;
}

#sidebar ul li a h3 {
	font: normal 26px/24px bebas_neuebook, "Arial Narrow", sans-serif;
	margin: 0;
	color: #555;
}

#sidebar ul li a br {
	display: none;
}


ul.book {
	display: block;
	position: relative;
	width: 130px;
	height: 196px;
	margin: 18px auto 0!important;
	padding: 0!important;
	list-style: none;
	perspective-origin: 0 50% 0;
	perspective: 800px;
	-webkit-transform: translate3d(0,0,0);
	transition: box-shadow 0.2s ease-in-out;
	transition-delay: 0.1s;
	box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

#sidebar a:hover ul.book {
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

ul.book li {
	margin: 0!important;
	padding: 0!important;
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 130px;
	height: 196px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#999999+90,ffffff+100 */
	background: #999999; /* Old browsers */
	background: -moz-linear-gradient(left,  #999999 90%, #ffffff 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #999999 90%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #999999 90%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */

	transform-origin: 0 50% 0;
	transform-style: preserve-3d;
	transition: all .5s cubic-bezier(0.25,1,.25,1);
}

.cover {
	z-index: 2 !important;
	display: block;
	width: 130px;
	height: 196px;
	background:#333 !important;
	transform: rotateY(0deg) translateZ(0px);
}
.page1 {
	display: none;
	transform: rotateY(20deg) translateZ(-1px);
}
.page2 {
	display: none;
	transform: rotateY(30deg) translateZ(-2px);
}
.page3 {
	display: none;
	transform: rotateY(40deg) translateZ(-3px);
}

.book:hover .page1 {
transform: rotateY(-34deg);
}

.book:hover .page2 {
transform: rotateY(-27deg);
}

.book:hover .page3 {
transform: rotateY(-15deg);
}

.book:hover .cover {
transform: rotateY(-40deg);
}

#menu-wrap {
	margin-top: -40px;
	transition: all 0.2s ease-in-out;
}

#menu-wrap.sticky {
	margin-top: 0;
	position: fixed;
	top: 0;
	z-index: 3;
}

#menu, #menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#menu {
  width: 1200px;
	height: 40px;
  margin: 0;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.5+0,1+100 */
	background: -moz-linear-gradient(top,  rgba(0,0,0,0.5) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
	z-index: 100;
	position: relative;
	text-align: center;
}

#menu:before,
#menu:after {
    content: "";
    display: table;
}

#menu:after {
    clear: both;
}

#menu {
    zoom:1;
}

#menu li {
    position: relative;
		display: inline-block;
		z-index:3;
}

#menu li a::after {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.1+0,0.4+50,0.1+100 */
	background: -moz-linear-gradient(top,  rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.4) 50%,rgba(255,255,255,0.1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.4) 50%,rgba(255,255,255,0.1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1affffff', endColorstr='#1affffff',GradientType=0 ); /* IE6-9 */
	content: "";
	width: 1px;
	height: 40px;
	position: absolute;
	right: -2px;
	top: 0;
}

#menu li:first-of-type a::before {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.1+0,0.4+50,0.1+100 */
	background: -moz-linear-gradient(top,  rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.4) 50%,rgba(255,255,255,0.1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.4) 50%,rgba(255,255,255,0.1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1affffff', endColorstr='#1affffff',GradientType=0 ); /* IE6-9 */
	content: "";
	width: 1px;
	height: 40px;
	position: absolute;
	left: 0;
	top: 0;
}

#menu a {
  display: block;
  padding: 0 30px;
  color: #fafafa;
  font: normal 26px/40px bebas_neue_regularregular, Impact, sans-serif;
  text-decoration: none;
	transition: color 0.2s ease-in-out;
	font-variant: small-caps;
}

#menu li:hover > a {
    color: #ce3b26;
}

*html #menu li a:hover { /* IE6 only */
    color: #ce3b26;
}

#menu ul {
    margin: 20px 0 0 0;
		margin-left: -90px!important;
    _margin: 0; /*IE6 only*/
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 40px;
    left: 50%;
    z-index: 1;
    background: rgba(0, 0, 0, 0.8);
    transition: all .2s ease-in-out;
		border-top: 5px solid #ce3b26;
}

#menu ul::before {
	content: "";
	display: block;
	width: 12px;
	height: 16px;
	padding: 0;
	box-sizing: border-box;
	border-bottom: 8px solid #ce3b26;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 8px solid transparent;
	position: absolute;
	top: -21px;
	left: 50%;
	margin-left: -8px;
}

#menu li:hover > ul {
    opacity: 1;
    visibility: visible;
    margin: 0;
}

#menu ul ul {
    top: 0;
    left: 150px;
    margin: 0 0 0 20px;
    _margin: 0; /*IE6 only*/
    box-shadow: -1px 0 0 rgba(255,255,255,.3);
}

#menu ul li {
    float: none;
    display: block;
    border: 0;
    _line-height: 0; /*IE6 only*/
}

#menu ul li::after {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.1+0,0.4+50,0.1+100 */
	background: -moz-linear-gradient(left,  rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.4) 50%,rgba(255,255,255,0.1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.4) 50%,rgba(255,255,255,0.1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1affffff', endColorstr='#1affffff',GradientType=1 ); /* IE6-9 */
	content: '';
	width: 100%;
	height: 1px;
	display: block;
}

#menu ul li:last-child::after {
	display: none;
}

#menu ul a {
  padding: 5px 10px 8px;
  width: 180px;
  _height: 10px; /*IE6 only*/
  display: block;
  white-space: nowrap;
  float: none;
  text-transform: none;
	box-sizing: border-box;
	font-size: 22px;
	line-height: 20px
}

#menu ul a:hover {
}

#menu ul li:first-child > a {
    border-radius: 3px 3px 0 0;
}

#menu ul li:first-child > a:after {

}

#menu ul ul li:first-child a:after {
    left: -6px;
    top: 50%;
    margin-top: -6px;
    border-left: 0;
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-right: 6px solid #3b3b3b;
}

#menu ul li:first-child a:hover:after {
    border-bottom-color: #04acec;
}

#menu ul ul li:first-child a:hover:after {
	border-right-color: #0299d3;
    border-bottom-color: transparent;
}

#menu ul li:last-child > a {
    border-radius: 0 0 3px 3px;
}

#menu-trigger { /* Hide it initially */
    display: none;
}

#footer {
	background: #ccc;
	padding: 30px;
	box-sizing: border-box;
	border-top: 1px solid #aaa;
}

#footer span {
	display: block;
	text-align: center;
}

#footer span.copy {
	margin: 10px 0 0;
}

#footer span.links a {
	width: 40px;
	height: 40px;
	display: inline-block;
	margin: 0 3px;
	text-decoration: none;
	color: #fff;
	vertical-align: top;
}

/*--------------------------------------------------------
*  Completely alter the display of the bottom links
---------------------------------------------------------*/

#footer span.links a::before {
	width: 40px;
	height: 40px;
	line-height: 40px;
	font-size: 20px;
	text-align: center;
	display: block;
	background: #555;
	content: "";
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	font-family: "socicon";
}

#footer span.links a:nth-child(1)::before {
	content: "\e040";
	background: #4da7de;
}

#footer span.links a:nth-child(2)::before {
	content: "\e041";
	background: #3e5b98;
}

#footer span.links a:nth-child(3)::before {
	content: "\e00b";
	background: #f26109;
}

#footer span.links a img {
	display: none;
}

#tos a {font-size:0.9em; text-decoration: none; color:#559;}
#tos a:hover{text-decoration:underline; color:#009;}
/*--------------------------------------------------------
*  Responsive Design (1st step)
---------------------------------------------------------*/
@media screen and (max-width: 1200px) {
	#page {
		width: 1000px;
	}

	.header-inner 
	{
		top: 125px;
	}
	#menu {
		width: 1000px;
	}

	#breadcrumbs {
		width: 1000px;
	}

	body.sidebar #breadcrumbs {
		width: 750px;
	}

	body.sidebar #main_wrap {
		width: 750px;
	}

	#sidebar_wrap {
		width: 250px;
	}

	#main {
		width: 700px;
	}

	body.sidebar #main {
		width: 500px;
	}

	#header img {
		left: -100px;
	}
}

/*--------------------------------------------------------
*  Responsive Design (2nd step)
---------------------------------------------------------*/
@media screen and (max-width: 1000px) {
	#page {
		width: 800px;
	}

	#header {
		background-position: center center;
		height: 400px;
	}

	#header img {
		left: -150px;
	}

	
	
	.header-inner 
	{
		top: 125px;
	}

	#menu {
		width: 800px;
	}

	#breadcrumbs {
		width: 800px;
	}

	body.sidebar #breadcrumbs {
		width: 600px;
	}

	body.sidebar #main_wrap {
		width: 600px;
	}

	#sidebar_wrap {
		width: 200px;
	}

	#main {
		width: 500px;
	}

	#menu a {
		padding: 0 20px;
	}
}

/*--------------------------------------------------------
*  Responsive Design (3rd step)
---------------------------------------------------------*/
@media screen and (max-width: 800px) {
	#page {
		width: 100%;
		margin: 0;
	}

	#header {
		background-position: right center!important;
		background-attachment: fixed;
	}

	#header img {
		left: inherit;
		right: 0;
	}

	.header-inner {
		top: 120px!important;
	}

	#menu,
	#breadcrumbs,
	body.sidebar #breadcrumbs, 
	body.sidebar #main_wrap,
	#content_decoration {
		width: 100%;
	}

	#menu-wrap.sticky {
		width: 100%;
	}

	#menu-wrap.sticky.active {
		bottom: 0;
	}

	body.sidebar #main_wrap,
	#sidebar_wrap {
		float: none;
		display: block;
		width: 100%;
		height: auto;
	}

	#sidebar_wrap {
		padding: 0 0 30px;
	}

	#menu a {
		font-size: 24px;
	}
}

/*--------------------------------------------------------
*  Responsive Design (4th step)
---------------------------------------------------------*/
@media screen and (max-width: 600px) {
	#header h1 {
		font-size: 45px;
		line-height: 45px;
	}

	#header p {
		font-size: 17px;
		line-height: 17px;
	}

	.header-inner {
		top: 150px!important;
	}

	#main {
		width: 80%;
	}

	#breadcrumbs ul {
		white-space: nowrap;
		overflow-x: auto;
		height: 40px;
		width: 100%;
		float: none;
		clear: none;
	}

	#breadcrumbs ul li {
		display: inline-block!important;
		float: none;
	}

	#breadcrumbs ul li:last-child {
		padding-right: 20px;
	}

  #menu-wrap {
    position: relative;
		z-index: 100;
  }

	#menu-wrap.sticky {
		overflow-y: auto;
	}

  #menu-wrap * {
    box-sizing: border-box;
  }

  #menu-trigger {
    display: block; /* Show it now */
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    padding: 0 30px;
		text-align: center;
    color: #fafafa;
    font: normal 28px/40px bebas_neue_regularregular, Impact, sans-serif;
		background: -moz-linear-gradient(top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,1) 100%);
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,1) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#000000',GradientType=0 );
		vertical-align: middle;
  }

	#menu-trigger span {
		display: inline-block;
		width: 20px;
		height: 3px;
		background: #fafafa;
		vertical-align: middle;
		margin: 0 15px 0 0;
		position: relative;
	}

	#menu-trigger span::before,
	#menu-trigger span::after {
		width: 20px;
		height: 3px;
		position: absolute;
		left: 0;
		background: #fafafa;
		content: "";
	}

	#menu-trigger span::before {
		top: -8px;
	}

	#menu-trigger span::after {
		bottom: -8px;
	}

  #menu {
      margin: 0;
			/*padding: 10px;*/
      position: absolute;
      top: 40px;
      width: 100%;
      z-index: 100;
      display: none;
      box-shadow: none;
			background: none;
			text-align: left;
			border-top: 5px solid #ce3b26;
  }

  #menu:after {
		content: "";
		display: block;
		width: 12px;
		height: 16px;
		padding: 0;
		box-sizing: border-box;
		border-bottom: 8px solid #ce3b26;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-top: 8px solid transparent;
		position: absolute;
		top: -20px;
		left: 50%;
		margin-left: -8px;
  }

	#menu ul::before {
		display: none;
	}

  #menu ul {
      position: static;
      visibility: visible;
      opacity: 1;
      margin: 0;
      background: none;
      box-shadow: none;
			border: none;
			text-align: left;
			margin-left: 0!important;
  }

  #menu ul ul {
      margin: 0;
			padding: 0 0 0 20px;
      box-shadow: none;
  }

  #menu li {
    position: static;
    display: block;
    float: none;
    border: 0;
		background: rgba(0, 0, 0, 0.8);
    box-shadow: none;
  }

	#menu li ul li {
		background: none;
	}

  #menu ul li{
    box-shadow: none;
  }

	#menu ul li a {
		padding: 10px 40px;
	}

  #menu a {
    display: block;
    float: none;
    padding: 10px 20px;
		line-height: 100%;
		position: relative;
  }

	#menu a::after {
		background: -moz-linear-gradient(left, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.1) 100%)!important;
		background: -webkit-linear-gradient(left, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.4) 50%,rgba(255,255,255,0.1) 100%)!important;
		background: linear-gradient(to right, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.4) 50%,rgba(255,255,255,0.1) 100%)!important;
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1affffff', endColorstr='#1affffff',GradientType=1 )!important;
		content: ''!important;
		width: 100%!important;
		height: 1px!important;
		display: block;
		right: 0!important;
		top: inherit!important;
		bottom: 0;
	}

	#menu ul li:last-child > a {
		padding: 10px 40px 30px;
	}

	#menu ul a::after {
		display: none;
	}

/*  Lines below this point were removed in later version */
	#menu li:first-of-type a::before {
		display: none;
	}

  #menu a:hover{
  }

  #menu ul a{
      padding: 0;
      width: auto;
  }

  #menu ul a:hover{
      background: none;
  }

  #menu ul li:first-child a:after,
  #menu ul ul li:first-child a:after {
      border: 0;
  }

	div.hr::before,
	div.hr::after {
		width: 40%;
	}

}
/*--------------------------------------------------------
*  Responsive Design (Last step)
---------------------------------------------------------*/
@media screen and (min-width: 600px) {
  #menu {
      display: block !important;
  }
}

/* iPad */
.no-transition {
  transition: none;
  opacity: 1;
  visibility: visible;
  display: none;
}

#menu li:hover > .no-transition {
  display: block;
}