@font-face {
    font-family: 'Bryant';
    src: url('../includes/bryant-regular.eot');
    src: url('../includes/bryant-regular.eot?#iefix') format('embedded-opentype'),
         url('../includes/bryant-regular.woff') format('woff'),
         url('../includes/bryant-regular.ttf') format('truetype'),
         url('../includes/bryant-regular.svg#bryant-regular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Bryant Light';
    src: url('../includes/bryant-light.eot');
    src: url('../includes/bryant-light.eot?#iefix') format('embedded-opentype'),
         url('../includes/bryant-light.woff') format('woff'),
         url('../includes/bryant-light.ttf') format('truetype'),
         url('../includes/bryant-light.svg#bryant-light') format('svg');
    font-weight: normal;
    font-style: normal;
}

* { margin: 0; padding: 0; }
body { 
	font-size: 11px; 
	color: #FFFFFF; 
	background: #3c3c3c; 
	font-family: 'Bryant Light', Helvetica, Arial, sans-serif;
	text-align: center; 
}

a:hover, a:link:hover, a:visited:hover {  }
a:link, a:visited, a:active { color: #FFFFFF; text-decoration: none; }

img {display: block; border: 0;}

li { list-style: none; }
p { margin: 0 0 10px 0;}

h1,h2,h3,h4 { font-size: 18px; font-weight: bold; margin: 0 0 10px 0; }
h1 { font-size: 36px; }
h2 { font-size: 35px; text-transform: uppercase; }

h3 { color: #00b5ce; }
h4 { margin: 0 0 3px 0; font-size: 13px; }
div.container{ margin: 0 auto; width: 100%; }

*+html .clearfix{min-height: 1%;}
/* float clearing for everyone else */
.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
}

.white { color: #FFFFFF; }
.bold { font-weight: bold; }
.left { float: left; }
.right { float: right; }
.clear { clear: both; }
.center, .center img { text-align: center; margin: 0 auto;}
.gray { color: #adacad; }

/* header styles */
.container-header { background: #000000; }

#header { padding: 28px 0 0px 0; }
#logo { float: left; padding: 0 120px 0 0; }


/* top nav styles */
nav { float: left; }
nav ul { margin: 20px 0 0 0; }
nav ul li { float: left; padding: 10px 48px 0px 0; }
nav ul li a {
	color: #FFFFFF;
}

nav ul li.last { padding-right: 0; }


/* main styles */
#main { width: 100%; float: left; }
#main-top {
	background: url('../images/whyiride.jpg') no-repeat top left;
	height: 472px;
	position: relative;
	background-size: 100%;
}
#main .social-media {
	background: #FFFFFF;
	color: #adadad;
	font-size: 24px;
	padding: 7px 0;
}
.social-inner {
	text-align: center;
	margin: 0 auto;
	display: inline-block;
	width: 100%;
}
.social-media a, .read-more a { color: #00b5ce; }
.social-icons, .social-text { height: 24px; display: inline-block; font-weight: bold; }
.social-icons ul { padding: 0 15px 0 0; }
.social-icons ul li { float: left; margin: 0 8px 0 0; }
.social-icons ul li img { margin-top: 3px; }
.social-icons ul li.last { margin-right: 0; }

.read-more a { font-style: italic; }

.inline-pops {
	height: 271px;
	
	padding: 0;
	/*width: 33.3%;*/
	width: 20%;
	float: left;
	background-position: center center;
	cursor: pointer;
	position:relative;
}
.inline-pops .box-inner {
    width: 100%; height: 100%;
    background: #09b5ce;
    /*background: url('../images/blue-overlay.png') repeat top left;*/
    transition: all ease 0.5s;
    -moz-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    opacity: .65;
}
.inline-pops.active { width: 60%; background-size: cover; }
.inline-pops.active .box-inner { background: none; }
.inline-pops .box-rider-inner { width: 30%; padding: 20px 0 0 4%; text-align: left; }
.inline-pops .box-inner .box-inner-content { display: none; }

.inline-pops h1 {
	position: absolute;
	top: 5%;
	left: 4%;
	z-index:2000;
}

.box-inner-content {
	opacity:.8;
	background-color:#fff;
	padding: 10px;
	color:#000;
	font-size:14px;
	margin-top: 40px;
	/*border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	*/
}
.box-inner-content p {
	/*text-shadow: 1px 1px 1px #000;*/
	/*font: 13px/18px Helvetica,Arial,sans-serif;*/
	font-family: 
	color: #636363;
}

#box-rider { background-image: url('../images/home_therider.jpg'); }
#box-ride { background-image: url('../images/home_theride.jpg'); }
#box-route { background-image: url('../images/home_theroute_markers.jpg'); }

.inline-pops:hover .box-inner { background: none; opacity: 1; }
/*.inline-pops:hover .box-inner .box-inner-content { display: block; }*/

#gallery{
	color: #333333;
	background: url('../images/home_gallery.jpg') no-repeat top left;
	height: 272px;
	position: relative;
	background-size: 100%;
}
#gallery h2 {
    text-shadow: 0 0 15px #333333;
    -moz-text-shadow: 0 0 15px #333333;
    -webkit-text-shadow: 0 0 15px #333333;
    padding-top: 7%;
    font-size: 46px;
}
.gallery-additional { display: none; }

.media .media-section {
	float: left;
	width: 50%; 
}
.media .newsletter { background: #11b6ce url('../images/newsletter-shadow-top.gif') repeat-x top left; height: 100px; padding: 10px 0 0 25px; }
.media .newsletter2 { background: #b7b7b8 url('../images/newsletter-shadow.gif') repeat-x bottom left; height: 101px; padding: 10px 0 0 25px; }
.more-videos {
	box-shadow:inset 0 0 5px #000000;
	-moz-box-shadow:inset 0 0 5px #000000;
	-webkit-box-shadow:inset 0 0 5px #000000;
}
.more-videos-image {
    width: 100%;
    height: 221px;
    background: url('../images/home_morevideos.jpg') no-repeat center center;
    background-size: 100%;
}
.more-videos-image h2, .play-video h2 { margin-top: 10%; padding: 3px 0 2px 60px; background: url('../images/btn_play.png') no-repeat top left; display: inline-block; }
.more-videos-image:hover h2, #gallery:hover h2 { color: #09b5ce; }


#more-videos {
	display: none;
	height: 460px;
	width: 720px;
	overflow: hidden;
}

#more-videos .more-videos-image {
	padding-top: 20px;
	height: 50px;
}

#main-video {
	display:none;
	width:720px;
	height:400px;
	overflow:hidden;
}

#videoTitle {
	color: #09b5ce;
}

.play-video {
	
	width: 30%;
	height: 100%;
	margin: 0 auto;
	position: relative;
}
.play-video .click {
	position: absolute;
	top: 20%;
	left: 0;
	width: 100%;
	height: 80%;
	cursor: pointer;
}

.play-video h2 { margin-top: 0; padding: 55px 0 0 0; background-position: center top; }

.form-text {
	border: 1px solid #b2dde7;
	background: none;
	font-size: 24px;
	color: #b2dde7;
	padding: 4px 10px;
	float: left;
	margin: 0 30px 0 0;
}
.media .newsletter .form-text {
	width: 360px;
}
.media .newsletter2 .form-text {
	width: 180px;
	color: #dededd;
	border-color: #dededd;
	margin-right: 20px; 
}
.media .newsletter2 .message { float: left; font-size: 14px; margin: 5px 0 0 15px; }


.fancybox-skin {
	background: #3c3c3c !important;
	border-radius: 0 !important;
}
.fancybox:hover, .fancybox-thumb:hover { opacity: .8; }

#the-rider {
	background-image: url('../images/therider-bg.jpg');
}
#the-ride {
	background-image: url('../images/theride-bg.jpg');
}
#the-route {
	background-image: none;
	position: relative;
}

a.fancybox-inline {
	width: 100%;
	height: 100%;
	display:block;
	
}

.inline-box {
	position: relative;
	display: none;
	width: 100%;
	height: 811px;
	background-repeat: no-repeat;
	background-position: top left;
	background-size: 100%;
}
.inline-box .logo-overlay {
    background: url('../images/logo_whyiride.png') no-repeat top right;
    width:129px;
    height: 177px;
    position: absolute;
    right: 30px;
    top: 20px;
    z-index: 99;
    background-size: 100%;
}
.inline-box .left-column {
	width: 50%;
	
	float: left;
	margin: 165px 0 0 0;
	position:relative;
	z-index:5000;
}
.inline-box .left-column h2 { color: #FFFFFF; font-size: 84px; margin: 0 0 0 150px; line-height: 70px; text-align: left; }
.inline-box .content-box {
	background: #FFFFFF;
	text-align: left;
	padding: 15px 25px 15px 150px;
	
}
.inline-box .content-box h3 { font-size: 28px; color: #00B5CE; }
.inline-box .content-box p {
	font: 14px/18px Bryant, Arial, sans-serif;
	color: #636363;
	background-color:#FFF;
	
}
.inline-box .content-box a { color: #00B5CE; text-decoration: underline; }
.inline-box ul.nav li {
	width: 34%;
	float: left;
	background: #cdcccc;
	padding: 20px 0;
	text-align: center;
	font-size: 22px;
	
}
.inline-box ul.nav li a { background-color: inherit; color: #FFFFFF; }
.inline-box ul.nav li.first { background-color: #0ca1c1; width: 34%; }
.inline-box ul.nav li.middle { background-color: #00b2dc; width: 33%; }
.inline-box ul.nav li.last { background-color: #0ca1c1; width: 33%; }

.inline-box ul.nav li:hover { background-color: #cdcccc;  }
.inline-box ul.nav li:hover a, .inline-box ul li a.active { color: #959595; text-decoration: none; display: block; width: 100%; height: 100%; }
ul.nav li.active { background-color: #cdcccc !important; }

.inline-box .btn-close {
	position: absolute;
	top: 80px;
	right: 15px;
	z-index:8000;
	font-size: 24px;
}
.btn-close a {
	text-decoration: none !important;
	font-weight:bold;
}

ul.basic li {
	font: 14px/18px Bryant, Arial, sans-serif;
	list-style-type: square;
	margin: 0 0 0 16px;
}

#the-map {
	/*min-width:100%;
	min-height:100%;*/
	width: 100%;
	height: 100%;
	z-index: 10;
	position: absolute;
}


.btn {
	bottom: 0;
	position: absolute;
	left: 50%;	
	margin-left: -105px;
}
.logo{
    top: 25px;
    position: absolute;
    left: 50%;	
    margin-left: -85px;
    z-index:2000;
}

/* footer styles */
footer { 
	font-size: 12px;
	padding: 10px 0 40px;
	margin: 20px auto 0;
	text-align: center;
	display: inline-block;
	font-family: 'Bryant';
}
footer, footer a:link, footer a:active, footer a:visited { color: #898584; }
footer .footer-media {
	text-align: center;
	margin: 0 auto 60px auto; 
}
footer .footer-media-section {
	float: left;
	width: 216px;
	height: 350px;
	margin: 0 80px 0 0;
	text-align: left;
	font-size: 13px;
}
footer .footer-media-section.last { margin-right: 0; }
footer .footer-media-section .comment { color: #FFFFFF; }
footer .footer-media-section ul li { margin: 0 0 10px 0; }
footer .footer-media-section.twitter ul li { background: url('../images/icon-tweet-sm.gif') no-repeat 0 5px; padding: 0 0 0 30px; }
footer .footer-media-section a { color: #00b5ce; }
footer .footer-media-section.instagram .instragram-widget { width: 100%; height: 216px; }

.instagram a img {
	width: 48px;
	float: left;
	margin: 5px 5px 0 0;
}

footer .copyright { margin: 18px 0 0 0; }


.fancybox-wrap {
	margin-top: 20px !important;
}

#fancybox-thumbs ul li { opacity: 1 !important; }
#fancybox-thumbs ul {
	/*left: 0 !important;*/
}