/**
 * @license
 * MyFonts Webfont Build ID 2976032, 2015-02-19T19:09:07-0500
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: CapistranoBF by Bomparte's Fonts
 * URL: http://www.myfonts.com/fonts/bomparte/capistrano-bf/capistrano-bf/
 * Copyright: Copyright (c) 2010 by Bomparte's Fonts. All rights reserved.
 * Licensed pageviews: 10,000
 * 
 * 
 * License: http://www.myfonts.com/viewlicense?type=web&buildid=2976032
 * 
 * © 2015 MyFonts Inc
*/


/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/2d6920");

  
@font-face {font-family: 'capistrano';src: url('fonts/2D6920_0_0.eot');src: url('fonts/2D6920_0_0.eot?#iefix') format('embedded-opentype'),url('fonts/2D6920_0_0.woff2') format('woff2'),url('fonts/2D6920_0_0.woff') format('woff'),url('fonts/2D6920_0_0.ttf') format('truetype');}
 

/* reset5 © 2011 opensource.736cs.com MIT */
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,b,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,audio,canvas,details,figcaption,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,summary,time,video{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0;}body{line-height:1;}article,aside,dialog,figure,footer,header,hgroup,nav,section,blockquote{display:block;}nav ul{list-style:none;}ol{list-style:decimal;}ul{list-style:disc;}ul ul{list-style:circle;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:none;}ins{text-decoration:underline;}del{text-decoration:line-through;}mark{background:none;}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help;}table{border-collapse:collapse;border-spacing:0;}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}input[type=submit],input[type=button],button{margin:0!important;padding:0!important;}input,select,a img{vertical-align:middle;}

html.nav_active, html.nav_active body {
	height: 100%;
	padding: 0;
	margin: 0;
}

body {
	background: #2d2f33;
	background: -moz-radial-gradient(center, circle cover, #2d2f33 0%, #0c0c0c 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#2d2f33), color-stop(100%,#0c0c0c));
	background: -webkit-radial-gradient(center, circle cover, #2d2f33 0%,#0c0c0c 100%);
	background: -o-radial-gradient(center, circle cover, #2d2f33 0%,#0c0c0c 100%);
	background: -ms-radial-gradient(center, circle cover, #2d2f33 0%,#0c0c0c 100%);
	background: radial-gradient(circle at center, #2d2f33 0%,#0c0c0c 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d2f33', endColorstr='#0c0c0c',GradientType=1 );
	
	background-attachment: fixed;

	font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #c0c0c0;
}

.cursive {
	font-family: capistrano, cursive;
	font-size: 35px;
	padding: .7em 0; /* capture the insane ascenders and descenders */
	font-weight: normal;
	
	color: white;
	text-shadow: 0px 0px 6px #3b3b3b;
	text-shadow: 0px 0px 6px rgba(60, 60, 60, 0.5);
}

a {
	color: orange;
}
p, blockquote, ul, ol {
	color: #bbb;
}

.limit_width {
	max-width: 1024px !important;
	margin-left: auto;
	margin-right: auto;
}

.outerWidth {
	width: 80%;
	margin: 0 auto;
}

/* h1 is a stretchy container that maintains its aspect ratio */

#top h1 {
	text-indent: -9999px;
	height: 0;
	width: 100%;
	padding-bottom: 23.22%;
	position: relative;
	margin: 15px 0;
	
	pointer-events: all;
}

#top h1 img {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

#top h1 #subtitle {
	display: block;
	text-indent: -9999px;
	position: absolute;
	bottom: 14%;
	width: 100%;
	height: 14px;
	background: url('/img/back_road_exploration.png') center center no-repeat;		
	background-size: contain;
}


/* modernizr will show the svg version to capable browsers */
#mm_svg_black { display: none; }
#mm_svg { display: none; }
html.svg #top h1 #mm_png { display: none; }
html.svg #top h1 #mm_svg { display: block; }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ MAIN NAVIGATION ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

nav.main {
	text-align: justify;
	font-size: 13px;
	text-transform: uppercase;
	line-height: 13px;
	
	/* a series of tricks to accomodate the arrow selector thingy:
		- we need overflow hidden to hide the excess arrow on the sides
		- but that hides the dropdowns, which necessarily overflow...
		- except we make the container super tall so they don't
		- and compensate with negative margin-bottom, and pointer-events
		- to make the extended container effectively invisible
	*/
	
	overflow: hidden;
	height: 500px;
	margin-bottom: -460px;
	pointer-events: none;
}
nav.main:after {
	content: '';
	display: inline-block;
	width: 99%;
	height: 0;
}

nav.main .navLink {
	display: inline-block;
	vertical-align: top;
	margin: 0;
	position: relative;
	
	pointer-events: auto;
}

nav.main > .navLink.current:after {
	content: '';
	display: block;
	width: 2400px;
	margin-left: -1200px;
	height: 14px;
	position: absolute;
	bottom: -14px;
	left: 50%;
	background: url('/img/navarrowbar.png') center bottom repeat-x;
	pointer-events: none;
}

nav.main .navLink .subNav {
	position: absolute;
	top: 100%;
	right: -15px;
	z-index: 50;
	padding: 20px 15px 10px;
	background-color: rgba(26, 27, 29, 0.85);
	
	line-height: 120%;
	white-space: nowrap;
	
	transition: all .3s;
	
	/* display: none; */
	opacity: 0;
	max-height: 0px;
	z-index: -5;
	overflow: hidden;
}
nav.main .subNav .navLink {
	display: block;
	text-align: right;
}
nav.main .subNav .navLink a {
	display: block;
	padding: 4px 0;
}

nav.main div.hasSubNav:hover div.subNav {
	/* display: block; */
	opacity: 1;
	z-index: 50;
	max-height: 500px;
}

nav.main a {
	text-decoration: none;
	color: #bcbcbc;
}

nav.main .navLink.current > a {
	color: white;
	font-weight: bold;
}

nav.main a:hover { text-decoration: underline; }
nav.main .navLink.hasSubNav > a:hover {
	text-decoration: none;
	cursor: default;
}

nav.main a.contact {
	top: -12px;
	border-top-style: solid;
	position: absolute;
	right: 0;
	padding: 2px 8px 4px;
	text-align: center;
	border: 1px solid #333;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	color: #CCC;
	font-size: small;
	text-decoration: none;
	
	pointer-events: auto;
	
	text-transform: lowercase;
}

#blank_line {
	display: none;
}
nav.contact_current #blank_line {
	display: block;
	position: absolute;
	margin-top: 12px;
	width: 100%;
	border-top: 1px solid white;
	height: 1px;	
}

.newflag {
	font-size: 10px;
	color: red;
	vertical-align: text-top;
}

.nav_toggle {
	display: none;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  pinned nav changes ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */


#pinned_nav_container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: rgba(27, 28, 29, 0.9);
	padding: 10px 0 0;
	z-index: 9999;
	
	-webkit-transform: translate(0,-60px);
	transform: translate(0,-60px);
	moz-transform: translate(0,-60px);
	opacity: 0;
	
	-webkit-transition: -webkit-transform .2s; /* Changed here */ 
	 -moz-transition: -moz-transform .2s;
	   -o-transition: -o-transform .2s;
	      transition: transform .2s;
}

#pinned_nav_container.showing {
	-webkit-transform: translate(0,0);
	transform: translate(0,0);
	-moz-transform: translate(0,0);
	opacity: 1;
}

nav.main.pinned a.contact {
	top: 5px;
	right: 5px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  press showcase ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */

#press_header {
	font-size: 10px;
	text-transform: uppercase;
	font-weight: 600;
	text-align: center;
	letter-spacing: 3px;
	font-style: italic;
	
	font-family: 'Cabin', 'Gill Sans', 'Helvetica Neue', sans-serif;
	margin-bottom: 10px;
	
}

#press_showcase {
	padding: 0 20px;
	box-sizing: border-box;
	margin: 15px 0;
}

a.press_link {
	display: inline-block;
	height: 36px;
	opacity: 0.5;
	transition: .3s;
}
a.press_link:hover {
	opacity: 1;
}
a.press_link img {
	line-height: 36px;
	vertical-align: middle;
}

.justify {
	text-align: justify;
	/* border: 1px solid grey; */
	width: 103%;
	width: 100%;
	/* width: 100%; */
	/* word-break: break-all; */
	color: white;
}
.justify:after {
	content: '';
	width: 100%;
	height: 0;
	display: inline-block;
}
.justify .space {
	display: inline-block;
	vertical-align: top;
	margin-bottom: 3%;
}
.justify .break {
	display: inline-block;
	width: 100%;
	height: 3%;
}
/*
.justify:after {
	content: "";
	display: inline-block;
	width: 100%;
	height: 0;
}
*/

.justify .padline {
	display: inline-block;
	visibility: hidden;
	margin: 0;
}

a.car, a.gsitem, a.rental, a.mat {
	width: 225px;
	color: #DDD;
	font-size: 11px;
	text-decoration: none;
	text-align: right;
}
a.car img, a.gsitem img, a.rental img, a.mat img {
	display: block;
	width: 100%;
	margin-bottom: 3px;
}

.outerWidth {
	max-width: 1007px;
}
header#top {
	margin: 0 auto;
	position: relative;
	
	pointer-events: none;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ slideshow ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */

#slideshow {
	width: 100%;
	position: relative;
	margin: 10px 0 15px;
	z-index: 10;

	display: none; /* js will show this once it loads */
}

.slidesjs-previous, .slidesjs-next {
	display: none;
}

.slidesjs-play,
.slidesjs-stop,
.slidesjs-pagination {
	position: absolute;
	bottom: 8px;
	z-index: 999;
	
	opacity: 0;
	transition: opacity .2s;
}

#slideshow:hover .slidesjs-play,
#slideshow:hover .slidesjs-stop,
#slideshow:hover .slidesjs-pagination {
	opacity: 1;
}

.slidesjs-play,
.slidesjs-stop {
	left: 8px;
	text-indent: -9999px;
	display: block;
	height: 20px;
	width: 20px;
	font-size: 20px;
	line-height: 20px;
}

.slidesjs-stop:after,
.slidesjs-play:after {
	content: "\f04c";
	font-family: FontAwesome;
	font-weight: normal;
	font-style: normal;
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	text-indent: 0;
	color: white;
}
.slidesjs-play:after {
	content: "\f04b";
}

ul.slidesjs-pagination {
	list-style-type: none;
	left: 32px;
}
ul.slidesjs-pagination li {
	display: inline;
}
ul.slidesjs-pagination li a {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 20px;
	background: white;
	border: 1px solid white;
	border-color: transparent;
	border-color: rgba(255, 255, 255, 0);
	padding: 2px;
	margin: 0 1px;
	background-clip: content-box;
	text-indent: -999px;
	
	transition: border-color 1.2s;
}
ul.slidesjs-pagination li a.active {
	border-color: rgba(255, 255, 255, 1);
}

.slidesjs-control a img {
	width: 100%;
}

.mobile_only { display: none !important; }
.uppercase { text-transform: uppercase; }

img.float_right {
	float: right;
	clear: right;
	margin: 15px 0 15px 15px;
	border: 0;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  Footer  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */

footer {
	margin: 50px 0;
	color: #3d3d3d;
	font-size: 11px;
	clear: both;
	overflow: hidden;
	
	border-top: 1px solid white;
	padding-top: 20px;
	
	position: relative;
}

footer a {
	color:#3d3d3d;
}


footer #social {
	margin: 0 auto;
	text-align: center;
/* 	clear: both; */
}
footer #social a {
	padding: 0 15px;
	opacity: 0.5;
	
	transition: .2s;
}
footer #social a:hover {
	opacity: 1;
}

footer .affiliates {
	float: right;
	clear: right;
	max-width: 200px;
	text-align: right;
}

footer .affiliates a {
	display: block;
	color: white;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
}
footer .affiliates a img {
	display: inline-block;
	vertical-align: middle;
	margin-right: 5px;
}

footer .notaffiliates a {
	text-indent: -9999px;
	direction: rtl; /* so that text-indent will work on the right */
	overflow: hidden;
	display: inline-block;
	height: 25px;
	margin-bottom: 12px;
	background-repeat: no-repeat;
	background-position: left top;
}

nav#foot {
	float: left;
	max-width: 45%;
	margin: 15px 0;
}
#toplink {
}
#smallprint {
	clear: both;
}

nav#foot {
	margin-bottom: 15px;
	line-height: 150%;
}
nav#foot a {
	text-transform: lowercase;
}

#toplink, footer #mc_embed_signup {
	width: 195px;
	float: left;
}

footer #mc_embed_signup {
	float: right;
	text-align: right;
	margin-bottom: 20px;
}

footer #mc-embedded-subscribe-form label {
	display: block;
	text-align: center;
	font-size: 13px;
	text-transform: uppercase;
	margin-bottom: 5px;
}

footer #mc-embedded-subscribe-form div.clear {
/* 	display: inline; */
	margin-top: 5px;
}

footer #mc-embedded-subscribe-form input {
	font-size: 13px;
	text-align: left;
	font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', "Helvetica Neue", Helvetica, Arial, sans-serif;
}

footer #mce-EMAIL {
	background-color: rgba(255, 255, 255, 0.3);
	color: black;
	transition: .2s;
}
footer #mce-EMAIL:focus {
	background-color: rgba(255, 255, 255, 1);
	color: #333;
	outline: none;
}

footer #mc-embedded-subscribe {
	background: white;
	color: black;
	padding: 3px 12px 2px !important;
	border-radius: 8px;
	border: 0;
	opacity: 0.5;
	transition: .2s;
	cursor: pointer;
}
footer #mc-embedded-subscribe:hover {
	opacity: 1;
}


/************************/
/*! more general stuff  */
/************************/

.info {
	text-align: center;
	line-height: 140%;
	font-size: 16px;
	width: 80%;
	margin: 0 auto 30px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  CAR PAGES  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */

div.carpost {
	text-align: center;
	
	font-size: 14px;
	line-height: 145%;
}

.carpost header {
	max-width: 625px;
	margin: 0 auto 15px;
	position: relative;
}

.carpost header h1 {
	min-height: 65px;
	text-align: right;
	background-position: left bottom;
	background-repeat: no-repeat;
	font-size: 20px;
	margin:  10px 0 5px;
	line-height: 25px;
}
.carpost header h1.below {
	text-align: center;
	font-size: 25px;
	min-height: 0;
	font-weight: normal;
}

.carpost header img.model {
	width: auto;
	float: right;
	margin-bottom: 5px;
	max-width: 100%;
}
.carpost header h2.modeltext {
	text-align: right;
	margin-top: 0.5em;
	font-size: 40px;
	margin-bottom: -0.4em;
	position: relative;
}

.carpost header img {
	width: 100%;
	max-height: 500px;
}

/* new 3/2025 */
.carpost header {
	max-width: 100%;
	margin: 0 auto 15px;
	position: static;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0 5%;
}
.carpost header h2.modeltext {
    margin-bottom: -0.6em;
}
.cargallery_wrap {
	max-height: none !important;
}

.carpost ul {
	text-align: left;
	list-style-type: square;
	width: 40%;
	margin: 0 0 15px 15px;
	float: right;
	padding-left: 15px;
}
.carpost ul.nofloat {
	float: none;
	display: block;
	margin: 0 auto 30px;
	width: 75%;
}

.carpost p {
	text-align: left;
	margin-bottom: 15px;
	max-width: 40em;
	margin: 0 auto 15px;
}

.carpost > img {
	max-width: 100%;
	margin: 15px auto;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~    RENTALS    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */

#rental_banner {
	width: 100%;
	margin-top: 10px;
	margin-bottom: 20px;
}

a.rental,
a.rentalcar {
	font-size: 13px;
	line-height: 160%;
	text-align: left;
}
a.rental.space {
	width: 46%;
	min-width: 0;
/* 	margin-bottom: 3%; */
}
a.rental h3,
a.rentalcar h3 {
	font-size: 40px;
	margin-top: -0.7em;
}

a.rental span,
a.rentalcar span {
	float: right;
}

.carpost header .nickname {
	min-height: 0;
	text-align: left;
	font-size: 50px;
	float: left;
}
.carpost header .nickname.cursive {
	font-size: 50px;
	position: absolute;
	top: -0.45em;
}

.fullname {
	text-align: right;
	font-size: 20px;
	line-height: 38px;
	margin-bottom: 10px;
	margin-top: 10px;
}

.preload {
	display: none;
}

div.cargallery {
	width: 100%;
	text-align: justify;
	margin-top: 10px;
}

.cargallery_wrap {
	width: 100%;
	max-height: 500px;
}
#cargallery_big {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}
.cargallery .pad {
	display: inline-block;
	height: 0;
}
div.cargallery a {
	display: inline-block;
	width: 18%;
	vertical-align: top;
	padding-bottom: 2.5%;
}
div.cargallery a img {
	width: 100%;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  GARAGE SALE  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */

a.gsitem {
	font-size: 13px;
	line-height: 160%;
}

p.gsinfo {
	font-size: 14px;
}

/* garagesale item pages */

.gspost {
	text-align: center;
	margin-top: 20px;
}

.gspost h3 {
	text-align: center;
	font-size: 20px;
	margin: 0 0 5px 0;
}

.gspost img {
	margin: 0 14px 14px;
	max-width: 100%;
	vertical-align: middle;
}

.gspost p {
	font-size: 14px;
	text-align: left;
	line-height: 145%;
	max-width: 40em;
	margin: 15px auto 15px;
}

.gspost span {
	font-size: 14px;
	color: #666;
}

.gspost span b {
	font-weight: 400;
	color: red;
	margin-left: 15px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  ABOUT  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */

section#about p {
	width: 75%;
	margin-left: 40px;
	line-height: 160%;
	margin-bottom: 15px;
}
section#about p strong {
	font-size:larger;
}
section#about p,
section#about ul li {
	font-size: 16px;
}

section#about h2 {
	height: 65px;
	background-position: left center;
	background-repeat: no-repeat;
	text-indent: -9999px;
	margin-bottom: 0;
	margin-top: 20px;
	/* clear: both; */
}
section#about h2.cursive {
	text-indent: 0;
	height: auto;
	font-size: 40px;
	margin-bottom: -4px;
	margin-top: 40px;
}

section#about h3 {
	letter-spacing:2px;
}

section#about ul {
	list-style-type: disc;
	margin: 10px 0 10px 40px;
}

section#about ul li {
	line-height: 170%;
	font-size: inherit;
}

section#about a {
	text-decoration:none;
	color:#D5701C;
}
section#about a:hover {
	text-decoration:underline;
}

section#about a.center {
	display:block;
	text-align:center;
	font-size:large;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  PRESS  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */

a.newpressquote {
	color: white;
	display: inline-block;
	vertical-align: top;
	width: 48%;
	margin: 3% 0;
	text-decoration: none;
	
	text-align: left;
}


a.newpressquote img {
	float: left;
	margin-right: 15px;
	
	float: none;
	display: block;
	margin: 0 auto 15px;
	
	max-width: 90%;
}
a.newpressquote span {
	line-height: 140%;
	font-size: 15px;
	color: white;
	display: block;
	text-indent: 23px;
	padding-top: 10px;
	margin-top: -10px;
	background: url('/img/quote.png') left top no-repeat;
	position: relative;
}

a.newpressquote span:after {
	content: 'read more';
	position: absolute;
	bottom: -25px;
	right: 25px;
	font-size: 13px;
	
	opacity: 0;
	transition: opacity .2s;
}
a.newpressquote:hover span:after {
	opacity: .7;
}

a.pressquote {
	display:inline-block;
	min-height:60px;
	padding-left:110px;
	background-position:left center;
	background-repeat:no-repeat;
	border-style:dashed none;
	border-width:1px;
	border-color:black;
	margin: 0 4% 30px 4%;
	line-height: 120%;
}


a.pressquote:hover {
	border-color:#292421;
	text-decoration:none;
}

a.pressquote span {
	display:inline-block;
	background:url('../img/quote.png') left top no-repeat;
	margin-top:5px;
	padding:2px 0 0 30px;
	color:#959595;
	font-weight:bold;
	font-size:14px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  TESTIMONIALS  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */

blockquote {
	margin-top: 7px;
	margin-left: 4%;
	margin-bottom: 50px;
	width: 85%;
	padding-left: 10px;
	border-left: 1px dotted #393939;
	font-size: 14px;
	line-height: 140%;
}

cite {
	line-height: 120%;
}

section#testimonials ul {
	margin-left: 40px;
	list-style-type: disc;
	font-size: 14px;
}

section#testimonials ul li {
	line-height: 170%;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  GALLERY  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */

section#gallery {
	text-align: center;
	/* max-width: 625px; /* max width of images... maybe will change */
	margin: 0 auto;
}

div.gallimg {
	margin: 0 auto;
	margin-bottom: 15px;
	clear: both;
}

div.ratio_img {
	position: relative;
	/* padding-bottom will be set in the style tag by the server */
	/* 	padding-top: 30px; */ /* IE7 fix removed as its distoring the images */
	padding-top: 1px;
	height: 0;
	overflow: hidden;
}

div.ratio_img img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;  
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  COMING SOON  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */

div.message {
	text-align: center;
	padding: 1em;
	margin-bottom: 1em;
	background: rgba(255, 255, 255, 0.1);
	text-transform: uppercase;
	font-weight: bold;
	font-size: 0.8em;
}

div.message.red {
	color: red;
}

.coming {
	clear: both;
	margin: 0 auto 25px;
	overflow: hidden;
}

.coming h3 {
	margin-bottom: 5px;
}

.coming img {
	float: left;
	margin-right: 15px;
	width: 40%;
	max-width: 300px;
}

.coming ul {
	list-style-type: square;
	padding-left: 30px;
	display: inline-block;
	font-size: 14px;
	line-height: 140%;
	text-align: left;
	width: 52%;
	box-sizing: border-box;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  TRAVELS  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */

div.travelspost {
	text-align: center;
}
.travelspost img {
	display: block;
	margin: 15px auto 15px;
	max-width: 100%;
}
.travelspost p {
	line-height: 145%;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  VIDEOS  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */

div#player {
	width: 100%;
	position: relative;
	padding-bottom: 50%;
	/* padding-top: 30px; /* IE7 fix */
	height: 0;
	overflow: hidden;
	margin-bottom: 30px;
}
div#player iframe {
	position: absolute;
	width: 100%;
	height: 100%;
}

#player #poster {
/* 	display: none; */
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-size: cover;
	z-index: 20;
}
#poster #playbutton {
	color: #111111;
	opacity: 0.5;
	-webkit-transition: opacity .2s;
	transition: opacity .2s;
	font-size: 70px;
	
	position: absolute;
	top: 50%;
	left: 50%;
	display: inline-block;
	margin: -35px 0 0 -35px;
}
#poster:hover #playbutton {
	opacity: 0.8;
}


.vidthumb {
	text-decoration: none;
}

.vidthumb img {
	width: 100%;
	padding: 3px;
	border: 1px solid #333;
	box-sizing: border-box;
}
.vidthumb h3 {
	font-size: 13px;
	text-align: center;
	color: #bbb;
	font-weight: normal;
	margin-top: 5px;
}

.vidthumb.current img,
.vidthumb.current h3 {
	border-color: white;
	color: white;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  Blog index  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */

a.bloggrid {
	display: inline-block;
	vertical-align: top;
	width: 48%;
	margin-bottom: 7%;
	text-decoration: none;
}
a.bloggrid img {
	width: 100%;
	margin-bottom: 8px;
}
a.bloggrid h3 {
	margin: 2px 0 10px;
	vertical-align: top;
	font-size: 20px;
	color: #CCC;
	text-align: left;
}

div.date {
	font-family: 'Helvetica Neue', Helvetica, sans-serif;
	color: #888;
	border-bottom: 2px solid #888;
	font-size: 10px;
	text-transform: uppercase;
	padding-bottom: 2px;
	display: inline-block;
	float: left;
	margin-right: 11px;
	vertical-align: top;
	text-align: center;
}
div.date b {
	display: block;
	font-size: 30px;
	line-height: 30px;
	font-weight: bold;
}

div.bloglink h3, .blogpost h3 {
	margin: 2px 0 10px;
	vertical-align: top;
	font-size: 20px;
	color: #CCC;
}

div.bloglink div.text p {
	clear: left;
	font-size: 13px;
	line-height: 140%;
}

/* ~~~~ blog post ~~~~~ */



.blogpost {
	position: relative;
	text-align: left;
	margin: 0 auto 20px auto;
}
.blogpost header {
	overflow: hidden;
	margin: 0 auto 20px;
}

.blogpost p {
	font-size: 14px;
	line-height: 145%;
	max-width: 40em;
	margin: 15px auto;
}

.blogpost img {
	display: block;
	margin: 15px auto;
	max-width: 100%;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  personal cars  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */

#personalcars {
	margin-top: 1em;
}




/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  FAQ page  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */

.faqq, .faqa {
	line-height: 140%;
	padding-left: 1.5em;
	position: relative;
	margin-bottom: 5px;
}

.faqq:before, .faqa:before {
	content: 'Q';
	font-size: 20px;
	font-weight: bold;
	display: inline-block;
	position: absolute;
	left: 0;
	margin-right: .3em;
	vertical-align: top;
}
.faqa:before {
	content: 'A';
}

.faqa {
	margin-left: 1em;
	margin-bottom: 15px;
}

#faqimg {
	float: right;
	max-width: 40%;
	margin: -10px 0 10px 10px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  Prev / next post navigation  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */


nav.newpostnav {
	width: 100%;
	clear: both;
	height: 0;
	position: sticky;
	top: 150px;
}
nav.newpostnav a {
	position: absolute;
	top: 150px;
	display: inline-block;
	width: 250px;
	height: 12px;
	line-height: 12px;
	text-align: center;
	font-size: 12px;
	text-transform: uppercase;
	text-decoration: none;
	color: #888;
	
	transition: color .2s;
	
}
nav.newpostnav a:hover {
	color: white;
	
}
nav.newpostnav a.prev {
	left: -135px;
	transform: rotate(-90deg);
	transform-origin: center center;
	-webkit-transform: rotate(-90deg);
	-webkit-transform-origin: center center;
}
nav.newpostnav a.next {
	right: -135px;
	transform: rotate(90deg);
	transform-origin: center center;
	-webkit-transform: rotate(90deg);
	-webkit-transform-origin: center center;
}
nav.newpostnav a i {
	display: inline-block;
	margin: 0 4px;
	color: orange;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ mobile prevnext ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#mobile_postnav {
	width: 80%;
	text-align: center;
	position: absolute;
	top: 14px;
	left: 10%;
	
	top: -500px; /* hide on desktop */
	display: none; /* hide by default before js checks */
}

#mobile_postnav a {
	font-size: 20px;
}

#mheader {
	display: inline-block;
	text-transform: uppercase;
	margin: 0 .5em;
	font-size: 18px;
}


/* show mobile pinned nav all the time  */

/*
header#top {
	margin-left: 0;
	margin-top: 50px;
}

header#top h1 #subtitle {
	margin-left: 0;
	bottom: 5%;
	width: 94%;
}
*/


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  FLOOR MATS  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */

#floormats img.banner {
	width: 100%;
	margin-top: 10px;
	margin-bottom: 20px;
}

#floormats h2 {
	font-size: 22px;
	text-transform: uppercase;
	text-align: center;
	margin-bottom: .5em;
	letter-spacing: 1px;
}

#floormats p {
	margin: 0 auto 15px;
	max-width: 668px;
	font-size: 14px;
	line-height: 145%;
}

#floormats .imgline {
	text-align: center;
	margin-bottom: 35px;
}

#floormats .imgline img {
	height: 300px;
	display: inline-block;
	margin: 0 15px;
}

a.mat h3 {
	font-size: 15px;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  CONTACT  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */

section#contact {
	text-align: center;
}
#contact p {
	margin: 0 auto 15px;
	max-width: 35em;
	font-size: 14px;
	line-height: 145%;
	text-align: left;
}
#contact img {
	max-width: 100%;
	margin-top: 20px;
}

#contact #mc_embed_signup {
	text-align: center;
	margin-bottom: 20px;
	margin-top: 20px;
}

#contact #mc-embedded-subscribe-form label {
	display: block;
	text-align: center;
	font-size: 14px;
	margin-bottom: 5px;
}

#contact #mc-embedded-subscribe-form div.clear {
	display: inline;
	margin-left: 5px;
}

#contact #mc-embedded-subscribe-form input {
	font-size: 13px;
	text-align: left;
	font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#contact #mce-EMAIL {
	background-color: rgba(255, 255, 255, 0.3);
	color: black;
	transition: .2s;
	width: 18em;
}
#contact #mce-EMAIL:focus {
	background-color: rgba(255, 255, 255, 1);
	color: #333;
	outline: none;
}

#contact #mc-embedded-subscribe {
	background: white;
	color: black;
	padding: 3px 12px 2px !important;
	border-radius: 8px;
	border: 0;
	opacity: 0.5;
	transition: .2s;
	cursor: pointer;
}
#contact #mc-embedded-subscribe:hover {
	opacity: 1;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  DOWNLOADS  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */

section#download h1 {
	text-align: center;
	font-size: 25px;
	font-weight: normal;
	margin: 10px 0 5px;
	line-height: 25px;
}

section#download p, 
section#download form {
	max-width: 80%;
	margin: 2em auto;
	line-height: 145%;
}

section#download form label {
	display: block;
	padding-left: 6em;
	line-height: 1.75em;
	position: relative;
}
section#download form label span {
	position: absolute;
	left: 0;
	width: 6em;
	text-overflow: ellipsis;
}
section#download form input {
	display: inline-block;
	padding: 0.2em 0.5em;
}
section#download form input[type=submit] {
	position: static;
}





/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  RESPONSIVENESS  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */

@media all and (min-width: 50px) {
	/* 2 columns */
	.justify .space {
		width: 48%;
		min-width: 0;
	}
	.outerWidth { width: 96%; }
	nav.pinned a.contact { display: none; }
	
	a.rental.space {
		width: 48%;	
	}
}		
@media all and (min-width: 926px) {
	/* 3 columns */
	.justify .space {
		width: 31%;
	}
	.outerWidth { width: 80%; }
	nav.pinned a.contact { display: block; }
	
	.mat.space {
		width: 21.75%;
	}
}
/*
@media all and (min-width: 1274px) { 
	/* 4 columns *
	.justify .space {
		width: 21.75%;
		width: 225px;
	}
}
*/

@media all and (max-width: 700px)
	and (orientation : portrait) {
	.outerWidth { width: 96%; }
	
	.mobile_only { display: inline-block !important; }
	section#download p.mobile_only {
		display: block !important;
	}
	.desktop_only { display: none !important; }
	.uppercase { text-transform: none; }
	
	header#top h1 #subtitle {
		/* display: none; */
		margin-left: -25px;
		background-size: contain;
		bottom: 6%;
	}
	nav.main a.contact {
		display: none;
	}
	
	#press_showcase {
		/* shrink the whole thing */
		transform: scale(.65);
		-webkit-transform: scale(.65);
		-moz-transform: scale(.65);
		-ms-transform: scale(.65);
		width: 150%;
		margin: -8px 0 0 -25%;
	}
	
	/* collapse nav */
	/* show toggle button */
	header#top {
		padding-left: 25px;
	}
	
	#topnav { display: none; }
	.newpostnav { display: none; }
	#mobile_postnav {
		top: 14px; /* show on mobile */
	}
	

	.nav_toggle {
		display: block;
		width: 20px;
		height: 20px;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 501;
		cursor: pointer;
		pointer-events: auto;

	}
	.nav_toggle svg {
		height: 100%;
		width: 100%;
	}
	#pinned_nav_container .nav_toggle {
		top: 15px;
		left: 2%;
	}

	#pinned_nav_container {
		height: 35px; /* to accomodate the nav_toggle, which is absolutely positioned */
	}
	
	body.mobile_nav #pinned_nav_container {
		/* when we're at the top of the page we have to show the pinned container */
		opacity: 1;
		-webkit-transform: translate(0,0);
		-moz-transform: translate(0,0);
		transform: translate(0,0);
		
		/* normally just a top bar, pinned container fills screen and scrolls internally */
		height: 100%;
		padding: 0;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}
	body.mobile_nav #pinnednav {
		display: block;
		margin-bottom: 15px;
	}
	body.mobile_nav #top .nav_toggle {
		display: none;
	}
	body.mobile_nav {
		overflow: hidden;
	}
	
	#pinnednav {
		text-align: left;
		padding: 40px 0;
		z-index: 500;
		font-size: 30px;
		line-height: 150%;
		
		height: auto;
		overflow: hidden;
		
		display: none;
	}
	#pinnednav .navLink {
		display: block;
	}
	#pinnednav .navLink.current:after {
		display: none;
	}
	
	#pinnednav .navLink.hasSubNav > a {
		display: none;
	}
	
	#pinnednav .navLink.hasSubNav .newflag {
		display: none;
	}
	
	#pinnednav .navLink .subNav {
		display: block;
		background: none;
		padding: 0 0 0 5%;
		padding-left: 0; 
		position: static;
		opacity: 1;
		max-height: none;
		z-index: auto;
	}
	#pinnednav .subNav .navLink {
		/* font-size: 24px; */
		line-height: 130%;
		text-align: left;
	}
	#pinnednav .subNav .navLink a {
		display: inline-block;
	}
	#pinnednav div.hasSubNav:hover div.subNav {
		max-height: none;
		z-index: auto;
		opacity: 1;
	}
	#pinnednav .navLink i { display: none !important; }
	#pinnednav .navbar {
		display: none;
	}
	#pinnednav a.contact {
		/* undo all the special styles for mobile nav */
		position: static;
		border: 0;
		padding: 0;
		color: #bcbcbc;
		text-transform: inherit;
		font-size: inherit;
		text-align: inherit;
		display: inline-block;
	}
	#pinnednav a.contact:hover { text-decoration: underline; }

	/* 	Footer stuff */

/*
	footer .affiliates, footer .social, footer nav#foot {
		width: 100%;
		text-align: center;
		float: none;
		max-width: none;
	}
*/
	footer .unfloat {
		width: 100% !important;
		text-align: center !important;
		float: none !important;
		max-width: none !important;		
	}
	footer .affiliates a, footer .social a {
		margin: 0 10px 10px;
	}
	footer nav#foot {
		text-align: center;
	}
	
	footer #toplink {
		display: block;
		margin-bottom: 10px;
	}
	
	/* everything else */
	a.bloggrid h3 {
		font-size: 16px;
	}
	div.bloglink {
		margin-bottom: 40px;
	}
	div.bloglink div.text, div.bloglink img {
		width: 100%;
		float: none;
		margin-left: 0;
		margin-right: 0;
	}
	div.bloglink img {
		margin-bottom: 10px;
	}
	
	p.info {
		width: 100%;
		margin-left: 0;
		margin-right: 0;		
	}
	
	img.float_right {
		float: none;
		margin: 15px auto;
		display: block;
	}
	section#about p, .gspost p {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
	.gspost img {
		margin-left: 0;
		margin-right: 0;
	}
	
	.coming img {
		display: block;
		float: none;
		margin: 0 auto 15px;
		width: auto;
	}
	.coming {
		text-align: center;
	}
	.coming ul {
		width: 100%;
	}
	
	a.rental h3 {
		font-size: 30px;
	}
	
	.carpost header {
		padding: 0;
	}
	.carpost header h2.modeltext {
		display: none;
	}

}