@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap');


@font-face {
	font-family: 'DINProLight';
	src: url('../fonts/DINPro/DINPro-Light.eot'); /* IE9 Compat Modes */
	src: url('../fonts/DINPro/DINPro-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('../fonts/DINPro/DINPro-Light.woff') format('woff'), /* Modern Browsers */
		 url('../fonts/DINPro/DINPro-Light.ttf')  format('truetype'); /* Safari, Android, iOS */
	font-weight: 300;
	font-style: normal;
}
@font-face {
	font-family: 'DINProRegular';
	src: url('../fonts/DINPro/DINPro-Regular.eot'); /* IE9 Compat Modes */
	src: url('../fonts/DINPro/DINPro-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('../fonts/DINPro/DINPro-Regular.woff') format('woff'), /* Modern Browsers */
		 url('../fonts/DINPro/DINPro-Regular.ttf')  format('truetype'); /* Safari, Android, iOS */
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'DINProMedium';
	src: url('../fonts/DINPro/DINPro-Medium.eot'); /* IE9 Compat Modes */
	src: url('../fonts/DINPro/DINPro-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('../fonts/DINPro/DINPro-Medium.woff') format('woff'), /* Modern Browsers */
		 url('../fonts/DINPro/DINPro-Medium.ttf')  format('truetype'); /* Safari, Android, iOS */
	font-weight: 500;
	font-style: normal;
}
@font-face {
	font-family: 'DINProBold';
	src: url('../fonts/DINPro/DINPro-Bold.eot'); /* IE9 Compat Modes */
	src: url('../fonts/DINPro/DINPro-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('../fonts/DINPro/DINPro-Bold.woff') format('woff'), /* Modern Browsers */
		 url('../fonts/DINPro/DINPro-Bold.ttf')  format('truetype'); /* Safari, Android, iOS */
	font-weight: 700;
	font-style: normal;
}

/* ------------------------------------
   CSS Prefix
   -----------------------
   <div> - layer
   <table> - table
   <tr> - row
   <td> -column
   <h1>~<h6> - header
   <span> - style
   <a> - link
   <ul>/<ol> - listing
   <li> - list
   <img> - img
   <p> - panel  
---------------------------------------*/

@media all{
	
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, input, textarea,
table, caption, tbody, tfoot, thead, tr, th, td {
	border:0;
	outline:0; 
	font-family: Arial, sans-serif;
	font-size: 16px;
	color:#888888;
	line-height:24px;
	font-weight:300;
	letter-spacing:1px;
}

a {
	color: #888888;
	text-decoration:none;
	-webkit-transition: all .5s ease-out;
	-moz-transition: all .5s ease-out;
	-ms-transition: all .5s ease-out;
	transition: all .5s ease-out;
	-webkit-user-modify: read-only;
	-moz-user-modify: read-only;
}

a:hover{
	color: #000;
	text-decoration:none;
}


/* Text Style*/
h1 {
	font-family: 'DINProRegular', Arial, sans-serif;
	font-size: 48px;
	line-height: 48px;
	font-weight:600;
	color:#c7c000;
	letter-spacing:-2px;
	text-transform:uppercase;	
	margin:0 0 20px;
	padding:0;
}
h2 {
	font-family: 'DINProRegular', Arial, sans-serif;
	font-size: 41px;
	line-height: 41px;
	font-weight:600;
	color:#ff8e00;
	letter-spacing:-2px;
	text-transform:uppercase;	
	margin:0 0 20px;
	padding:0;
}
h3 {
	font-size: 22px;
	line-height: 22px;
	font-weight:700;
	color:#2e2d40;
	letter-spacing:0;
	margin:0 0 15px;
	padding:0;
}
h4{
	font-family: 'DINProMedium', Arial, sans-serif;
	font-size: 56px;
	line-height: 58px;
	color:#ffd900;
	letter-spacing: -2px;
	font-weight: 700;
	margin: 0 0 25px;
	padding: 0;
	text-transform: uppercase;
}
h5{
	font-family: 'DINProMedium', Arial, sans-serif;
	font-size: 34px;
	line-height: 36px;
	color:#ffd900;
	letter-spacing: -2px;
	font-weight: 700;
	margin: 0 0 10px;
	padding: 0;	
	text-transform: uppercase;
}
	p{
		font-size: 17px;
		color:#808080;
		line-height: 24px;
		margin: 0;
		padding: 0;
		letter-spacing: 0;
	}


.red {color:#FF0000;}
.yellow{color:#f9cf00!important}
.orange {color:#ffa200;}
.grey {color:#666666;}
.green {color:#73AD00;}
.blue {color:#0069b3;}
.black {color:#000000;}
.blackbold {color:#000000; font-weight:bold;}
.white {color:#ffffff;}
.gold {color:#b8a252;}
.bgRed {background:#FF0000;}
.bgOrange {background:#FF6600;}
.bgGrey {background:#666666;}
.bgGreen {background:#73AD00;}
.bgBlue {background:#2d95d1;}
.bgBlack {background:#000000;}
.bgWhite {background:#ffffff;}

/* reusable classes */
.floatLeft {float:left;width:auto;}
.floatRight {float:right;width:auto;}
.right {text-align:right;}
.left {text-align:left}
.center {text-align:center;}
.justify {text-align:justify}
.blank {border:1px solid #bbb;padding:0;margin:0;}
.subtitle {color:#000000;padding:15px 15px 0 15px;}
.caption {font-family:arial,verdana;font-size:10px;font-style:normal;font-weight:bold;color:#999999;}
.alert {color:#CC0000;font-size:15px;}
.spacer {line-height:1px;}
small {color:#999;font-size:80%;}
.line {border-top: 1px solid #999999;height: 1px;margin-top:6px;margin-bottom:6px;padding:0px;clear:both;}
.dotted {border-top: 1px dotted #999999;height: 1px;margin-top:3px;margin-bottom:3px;padding:0px;}
.imgFloatLeft {float:left;padding:0 20px 20px 0;display:block;}
.imgFloatRight {float:right;padding:0 0 20px 20px;display:block;width:auto;}
.divider-xs{height:10px}
.divider-sm{height:20px}
.divider-md{height:40px}
.divider-lg{height:60px}
.font-regular{font-weight: 400!important}

/* Background */
.bg-yellow{background: url("../img/bg-run.jpg") no-repeat center center #fff200;background-size: cover;}
.bg-yellow2{background: #ffd900}
.bg-dot{background: url("../img/bg-dot.png") repeat}	
.bg-grey{background: #f2f2f2;}
.bg-darkgrey{background: #e5e5e5;}
	

/*general*/
.clear{clear:both;}

.clearfloat:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
* html .clearfloat {
    height: 1%;
}
.clearfix {
    display: block;
}

.hide {
	display: none;
}

.center{
		text-align: center;    
}
.img-responsive{width: 100%;height: auto;}
	
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }


input, textarea { 
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none; 
}
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
#element::-webkit-scrollbar { 
    display: none; 
}

	
/* Scrollbar */
/*
 *  STYLE 1
 */

#style-1::-webkit-scrollbar-track
{
	border-radius: 10px;
	background-color: transparent;
}

#style-1::-webkit-scrollbar
{
	width: 12px;
	background-color: transparent;
}

#style-1::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color: #d9d9d9;
}
	
/* Alignment Style */
body {
	padding:0;
	margin:0 auto;
	background: white;
}


/*Controls Section*/
.layer-wrapper {
	width: 100%;
	margin: 0 auto;
	padding:0;
}
.layer-content{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}
section{
	width: 100%;
    height: auto;
    padding: 30px 0;
}

/**** Header ****/

/**** Homepage ****/
	.section-about{
		margin-top: -60px;
	}	
	.mascot{
		-webkit-animation: admonkey2 1.5s linear infinite;
    	animation: admonkey2 1.5s linear infinite;
		margin-left: 30px;
	}
@-webkit-keyframes admonkey2 {
    0% { -webkit-transform: rotate(0deg); }
    50% { -webkit-transform: rotate(-10deg); }
    100% { -webkit-transform: rotate(0deg); }
}

@keyframes admonkey2 {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(-10deg); }
    100% { transform: rotate(0deg); }
}
	
.item{
	margin-bottom: 20px;
	text-align: center;
}
.item .img{
	width:80px;
	height: 80px;
	background: white;
	border-radius: 50%;
	margin: 0 auto 20px;
    padding: 15px;
    position: relative;
    opacity: 0.7;
    filter: Alpha(opacity=70);
    transition: all 0.4s ease;
}
.item .img img{
    position: relative;
    z-index: 2;
}
.item .img:after{
    content: '';
    display: block;
    width: 84px;
    height: 84px;
    position: absolute;
    left: -2px;
    top: -2px;
    border: 3px solid #FFF;
    border-radius: 50%;
    transition: all 0.2s ease-in;
    opacity: 0;
    filter: Alpha(opacity=0);
}

.item:hover .img{
    opacity: 1;
    filter: Alpha(opacity=100);
}
.item:hover .img:after{
    transform: scale(1.2,1.2);
    opacity: 1;
    filter: Alpha(opacity=100);

}
.item span{
	font-family: 'DINProRegular', Arial, sans-serif;
	letter-spacing: -1px;
	display: block;
	color: #f45700;
	font-weight: 600;
	font-size: 37px;
	margin-bottom: 10px;
}
.item p{color: #8d8700;text-transform: uppercase;}
	
/* Bootstrap Slider */
	.carousel{
		top: -110px;
	}
	.carousel-inner>.item{
		height: 620px;
		background-repeat: no-repeat!important;
		background-size: cover!important;
		background-position: center center!important;
	}
	.carousel-inner>.item iframe{
		height: 620px;
	}
	.carousel-control{
		width: 10%;
		height: 40px!important;
		top: 45%!important;
		background: none!important;
	}
	.carousel-control span{
		color: white;
	}
	
/* Page About */
	.layer-banner img{
		margin-top: -110px;
	}
	.layer-box{
		padding: 50px 20px 40px;
		background: white;
		margin: 0 0 50px;
	}
	.layer-box p{
		color: #808080;
		font-weight: 300;
	}
	.layer-box ol{
		list-style-type: decimal;
	}
	.layer-box ul {
	  list-style: none; /* Remove default bullets */
	}
	.layer-box ul li, .layer-box ol li{
		margin: 0 0 6px;
		font-weight: 700;
		letter-spacing: 0;
		line-height: 15px;
		font-size: 12px;
	}
	.layer-box ol li b{
		font-size: 20px;
		line-height: 20px;
		font-weight: 600;
	}
	.layer-listing ol{
		list-style-type: none;
		margin: 0;
		padding: 0 0 0 6px;
	}
	.layer-box ul li::before {
	  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
	  color: #ffd900; /* Change the color */
	  font-size: 20px;
	  font-weight: bold; /* If you want it to be bold */
	  display: inline-block; /* Needed to add space between the bullet and the text */ 
	  width: 1em; /* Also needed for space (tweak if needed) */
	  margin-left: -1em; /* Also needed for space (tweak if needed) */
	}
	.layer-listing{
		height: 700px;
		overflow-y: auto;
		overflow-x: hidden;
	}
	
/* Page Race */
	.layer-race .bg-yellow2{
		padding: 50px 15px;
		text-align: right;
	}
	.layer-race .bg-yellow2 p{
		font-family: 'DINProMedium', Arial, sans-serif;
		font-weight: 600;
		letter-spacing: 0;
		line-height: 23px;
		font-size: 21px;
		color: #58595b;
	}
	.layer-race .bg-yellow2 span{
		font-family: 'DINPrBold', Arial, sans-serif;
		display: block;
		font-size: 28px;
		line-height: 29px;
		font-weight: 600;
		color: #58595b;
		margin: 0 0 10px;
	}
	.layer-race .bg-yellow2 p.small-text{
		font-size: 14px;
		line-height: 16px;
	}
	.layer-race .bg-grey{
		padding: 50px 30px;
	}
	.layer-race .bg-grey b{
		font-size: 19px;
		font-weight: 700;
		margin-bottom: 12px;
		display: block;
	}
	.layer-map{
		border: 7px solid white;
		background: white;
		box-shadow: 0px 0px 5px #999;
	}

/* Page C0ntact */
	.layer-contact {
		min-height: 450px;
	}
	.layer-contact p{
		margin: 15px 0;
	}
	.layer-contact p img{
		margin: 0 8px 0 0;
		vertical-align: middle;
	}
	.link-phone, .link-phone a{
		color:#808080;
	}
	.layer-contact-right{
		margin: 0 -15px;
		padding: 25px;
		background: url("../img/icon-download.png") center right no-repeat #ffea00;
	}
	.layer-contact-right h3{
		font-family: 'DINProMedium', Arial, sans-serif;
		font-size: 38px;
		font-weight: 400;
		color: #ff8e00;
		line-height: 38px;
		text-transform: uppercase;
		letter-spacing: -1.5px;
	}
	.layer-contact-right h6{
		font-size: 21px;
		font-weight: 600;
		color: #564c01;
		line-height: 21px;
		letter-spacing: 0;
	}
	.layer-contact-right p{
		color: #564c01;
	}
/* Page Review */
	.btn-menu a{
		font-size: 18px;
		padding: 40px 25px;
		background: #c0c0c0;
		font-weight: 700;
		margin: 0 0 20px;
		display: block;
		color: #564c01;
		letter-spacing: 0;
		position: relative;
		text-transform: uppercase;
	}
	.btn-menu a:hover{
		color:black;
		background: #aaaaaa;
	}
	.btn-menu a.active{
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffea00+0,ff9c00+100 */
		background: #ffea00; /* Old browsers */
		background: -moz-linear-gradient(-45deg,  #ffea00 0%, #ff9c00 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(-45deg,  #ffea00 0%,#ff9c00 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(135deg,  #ffea00 0%,#ff9c00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffea00', endColorstr='#ff9c00',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	}
	.btn-menu a span{
		font-size: 18px;
		font-weight: 700;
		color: #564c01;
		position: absolute;
		right:25px;
		text-transform: uppercase;
	}
	.item-thumbnail{
		margin: 0 0 25px;
	}
	.item-thumbnail span{
		display: block;
		font-size: 17px;
		line-height: 20px;
		margin: 10px 0 0;
		padding: 0;
		color:#58595b;
		letter-spacing: 0;
	}
	.item-thumbnail img{
		width: 100%;
		height: auto;
	}
	.gallery a:hover, .item-thumbnail a:hover{
		opacity: 0.7;
	}
	
/* Page Sponsor */
	.layer-sponsor{
		padding: 20px 0;
		border-bottom: 1px solid #888888;
		width: 90%;
		margin: 0 auto 25px;
		text-align: center;
	}
	
/**** Footer ****/
	footer{
		padding: 25px 0 90px;
		background: #2e2d40;
	}
	footer p{
		color: white;
		font-size: 12px;
		font-weight: 300;
		letter-spacing: 0;
		text-align: left;
		opacity: 0.5;
	}
	



/* ====================================================================================================================
 * RESPONSIVE
 * ====================================================================================================================*/	
	
/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
	.layer-content{
		max-width: 100%;
		margin: 0 auto;
		padding: 0 15px;
	}	
	.layer-header .layer-content{
		padding: 0;
	}
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
	.btn-menu a{
		padding: 15px 10px;
		font-size:13px;
		line-height: 14px;
		height:70px;
		margin: 0 0 10px;
	}
	.btn-menu a span{
		right:5px;
		bottom: 3px;
		font-size:12px;
	}
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
.layer-contact {
		min-height: auto;
	}
		
}
	
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
	h4{
		font-size: 40px;
		line-height: 42px;
	}
	
.section-about {
    margin-top: -100px;
}
	.layer-banner{
	}
	.layer-banner img{
		margin-top: -89px;
	}
	.layer-race .bg-yellow2{
		padding: 20px 20px;
		text-align: left;
	}
	.layer-race .bg-grey{
		padding: 30px 20px;
	}	
	/* Bootstrap Slider */
	.carousel{
		top: -90px;
	}
	.carousel-inner>.item{
		height: 400px;
	}
	.carousel-inner>.item iframe{
		height: 400px;
	}
	.carousel-control{
		height: 400px;
	}
	.item{
		min-height: 170px;
	}
}


/*Larger Lightbox(PrettyPhoto) in mobile/tablet*/

@media only screen and (max-width: 479px) {
	 .pp_pic_holder{ 
		 left: 50% !important; 
		 width: 370px !important;  
		 margin-left: -185px !important; 
	}
	 div.pp_default .pp_content_container .pp_right{ 
		 padding-right: 21px !important; 
	}
	 .pp_content, #pp_full_res img{ 
		 width: 100% !important; 
		 height: 100% !important; 
	}
	 div.pp_default .pp_content_container .pp_details {
		 margin-top: 20px !important; 
	}
	.pp_content_container .pp_details {
		float: left;
		margin: 25px 0 2px 0;
		z-index: 10;
	}
}