/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

::selection {
    background: #ffd100;
    text-shadow: none;
}

::-moz-selection {
	background: #ffd100;
    text-shadow: none;
}


/*
 * A better looking default horizontal rule
 */c

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

a[href^=tel]{ color:#fffff; text-decoration:none;}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap; /* 1 */
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    clip-path: none;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}


/*
 * TOOLTIP
 */

.tooltip {
    position: relative;
    display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #000000;
    color: #ffffff;
    text-align: center;
    padding: 10px;
    border-radius: 6px;
	font-size:11px;
	line-height:14px;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
	margin:25px 0 0 -210px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

	li.spacer {
	margin-bottom:2px;
}


/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

.recaptcha {
	margin:0 auto 0 auto;
	text-align:center;
	padding:20px 0 0 0;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre {
        white-space: pre-wrap !important;
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

	p {
	margin:0;
	padding:0;
	}
	
    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}


/* ==========================================================================
   HERTZ STYLES
   ========================================================================== */
	
	body {
	background:#e6e7e8;
	font-family: 'Ride', Arial, sans-serif;
	}

	header {
	width:100%; 
	height:90px; 
	background:#ffffff; 
	margin-top:0; 
	border-bottom:1px solid #ffd100;
	}

	.header_logo {
	width:50%;
	float:left;
	padding:20px 0 0 30px;
	text-align:left;
	box-sizing: border-box;
	}

	.logo_m {
	display:none;
	}

	.header_book {
	width:50%;
	float:right;
	text-align:right;
	box-sizing: border-box;
	padding:50px 30px 0 0;
	}

	main.landing  {
	display:block;
	background-color:#ffffff;
	background-position:top center;
	background-repeat:no-repeat;
	}

	main.faq  {
	display:block;
	background-color:#ffffff;
	height:auto
	}
	
	.main_htz, .faq_htz {
	width:780px;
	float:left;
	font-family: 'Ride', Arial, sans-serif;
	text-align:left;
	box-sizing: border-box;
	}

	.main_htz h1 {
	width:100%;
	font-family: 'ride-light', Arial, sans-serif;
	text-align:left;
	margin:0;
	}

	.faq_htz h1 {
	width:100%;
	}

	.main_htz {
	color:#ffffff;
	font-size:11px;
	line-height:14px;
	text-align:left;
	padding:10px 0 0 40px;
	box-sizing: border-box;
	}

	
	.main_htz h1 {
	color:#58595b;
	font-size:18px;
	line-height:24px;
	text-align:left;
	padding:10px 0 0 0;
	margin:0;
	font-weight:normal;
	}
	
	.main_chart {
	width:100%;
	padding:20px 0 20px 0;
	box-sizing: border-box;
	}

	.main_chart h2 {
	color:#58595b;
	font-family: 'ride-light', Arial, sans-serif;
	font-size:24px;
	line-height:24px;
	text-align:left;
	padding:0 0 14px 0;
	margin:0;
	font-weight:lighter;
	}

	.table_htz {
	width:100%;
	padding:5px 0 0 0;
	}

	.faq_htz {
	padding:32px 40px 30px 40px;
	box-sizing: border-box;
	}

	.faq_htz h1 {
	color:#58595b;
	font-family: 'ride-light', Arial, sans-serif;
	font-weight:lighter;
	font-size:30px;
	line-height:38px;
	text-align:left;
	padding:0 0 0 0;
	margin:0;
	}

	.main_body, .main_upgrade {
	width:100%;
	color:#58595b;
	font-family: 'ride-light', Arial, sans-serif;
	font-weight:lighter;
	font-size:14px;
	line-height:20px;
	text-align:left;
	padding:10px 0 0 0;
	}

	.main_upgrade {
	width:100%;
	padding:20px 0 0 0;
	}

	.faq_body {
	width:100%;
	background-color:#ffffff;
	color:#58595b;
	font-family: 'ride-light', Arial, sans-serif;
	font-size:12px;
	line-height:20px;
	text-align:left;
	}

	.faq_body h2 {
	color:#58595b;
	font-family: 'ride-bold', Arial, sans-serif;
	font-size:14px;
	line-height:19px;
	text-align:left;
	font-weight:normal;
	margin:20px 0 0 0;
	}

	.faq_body h3 {
	color:#58595b;
	font-family: 'ride-light', Arial, sans-serif;
	font-size:17px;
	line-height:22px;
	text-align:left;
	font-weight:normal;
	margin-top:10px;
	}

	.faq_body ul {
	margin:0 0 7px 18px;
	padding:0;
	list-style:disc outside none;
	}

	.faq_body li {
	padding:0;
	}

	.faq_body ul:nth-child(2) {
	list-style-type:none !important;
	margin:0 0 0 18px;
	}

	.bodylink {
	color:#58595b !important;
	}

	.faqlink {
	color:#58595b !important;
	}

	hr {
	margin:24px 0 24px 0;
	}

/* TABLE - MAIN */

	table.main_htz {
	color:#ffffff;
	font-family: 'Ride', Arial, sans-serif;
	font-size:11px;
	line-height:14px;
	text-align:left;
	padding:20px 0 20px 0;
	border-spacing:0;
	}

	.tableheader {
	font-size:12px;
	line-height:14px;
	background:#ffffff;
	text-align:center;
	padding:5px;
	vertical-align:middle;
	}

	.tablecellh {
	color:#58595b;
	width:50%;
	height:60px;
	border-top:1px solid #484848;
	border-right:1px solid #484848;
	border-left:1px solid #484848;
	vertical-align:middle;
	}

	.tablecellh2 {
	color:#58595b;
	width:50%;
	height:60px;
	border-top:1px solid #484848;
	border-right:1px solid #484848;
	vertical-align:middle;
	padding:0 5px 0 5px;
	}

	.tablecells, .tablecells1, .tablecells2, .tablecells3, .tablecells4 {
	color:#58595b;
	font-size:12px;
	line-height:14px;
	background:#ffffff;
	text-align:center;
	height:60px;
	vertical-align:middle;
	padding:0 5px 0 5px;
	}

	.tablecells1 {
	border-top:1px solid #484848;
	border-left:1px solid #484848;
	border-bottom:1px solid #484848;
	border-right:1px solid #484848;
	}

	.tablecells2 {
	border-top:1px solid #484848;
	border-bottom:1px solid #484848;
	border-right:1px solid #484848;
	}

	.tablecells3 {
	border-bottom:1px solid #484848;
	border-left:1px solid #484848;
	border-right:1px solid #484848;
	}

	.tablecells4 {
	border-bottom:1px solid #484848;
	border-right:1px solid #484848;
	}

	.tablecells {
	}

    span.small {
        font-size: smaller;
        line-height: 5px;
    }

/* END TABLE - MAIN */

/* FORM - MAIN */

	.form_htz {
	width:320px;
	padding:10px 10px 10px 0;
	float:right;
	box-sizing: border-box;
	}

	.form_wrapper {
	width:100%;
	background:#f3f3f3;
	padding:0 27px 27px 27px;
	box-sizing: border-box;
	}

	.form_wrapper ul {
	list-style-type:none;
    list-style-position:outside;
    margin:0px;
    padding:0px;
	}


	li.name {
	height:75px;
	}

	label {
	font-family: 'ride', Arial, sans-serif;
	color:#58595b;
	font-size:11px;
	line-height:11px;
	padding:0 0 7px 0;
	display:block;
	}

	input {
	width:100%;
	box-sizing: border-box;
	height:30px;
	margin:0;
	padding:5px;
	}

	.mr_select {
	width:100%;
	box-sizing: border-box;
	height:30px;
	padding:5px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	margin-bottom: 0px;
	-webkit-box-shadow: inset 0 0 0 #ffffff;
	-moz-box-shadow: inset 0 0 0 #ffffff;
	box-shadow: inset 0 0 0 #ffffff;
	outline:none;
	border:1px solid #cccccc;
	background-image:url(../images/arrow_down.png);
	background-repeat:no-repeat;
	-webkit-appearance: none;
  	-moz-appearance: none;
	background-position:top right;
	background-position:
    calc(100% - 10px) 50%,
    calc(100% - 15px) calc(1em + 2px), 100% 0;
	}

	.errorbkgd {
	background:#ffe5e5;
	}

	.form_header {
	width:100%;
	padding:24px 27px 13px 0;
	font-family: 'ride-light', Arial, sans-serif;
	font-size:24px;
	line-height:29px;
	color:#58595b;
	box-sizing: border-box;
	}

	.forgot {
	font-family: 'ride', Arial, sans-serif;
	font-size:11px;
	line-height:11px;
	color:#58595b;
	text-decoration:none;
	text-align:left;
	cursor: pointer;
	}

	.error {
	font-family: 'ride', Arial, sans-serif;
	font-size:11px;
	line-height:18px;
	color:#ff0000;
	text-align:left;
	padding:8px 0 0 0;
	}

	.form_cta button {
	border:2px solid #ffd100; 
	background-color:#ffd100; 
	padding:14px 20px 14px 20px; 
	color:#58595b; 
	display:inline-block; 
	font-family: 'ride-bold', Arial, sans-serif; 
	font-size:12px; 
	line-height:0;
	text-align:center; 
	text-decoration:none; 
	-webkit-text-size-adjust:none; 
	text-shadow:none !important; 
	box-shadow:none !important;
	cursor:pointer;
	}

	.form_cta:hover button {
	background-color:#000000;
	font-family: 'ride-bold', Arial, sans-serif; 
	border:2px solid #ffd100; 
	color:#ffd100;
	}
	
	p {
	margin:10px 0 0 0;
	padding:0;
	}

       .panrecap  {
       transform: scale(0.84);
       transform-origin: 0 0;
       }

/* END FORM - MAIN */

/* CONFIRMATION */

	.confirm_htz {
	width:320px;
	padding:50px 10px 10px 0;
	float:right;
	box-sizing: border-box;
	}

	.confirm_wrapper {
	width:100%;
	background:#ffcc00;
	padding:24px 27px 24px 27px;
	font-family: 'ride-light', Arial, sans-serif; 
	font-size:14px;
	line-height:1.4em;
	box-sizing: border-box;
	}

	.confirm_cta {
	font-size:18px;
	line-height:1.8em;
	font-family: 'ride-bold', Arial, sans-serif; 
	color:#58595b;
	padding:10px 0 0 0;
	}
	
/* END CONFIRMATION */

/* FOOTER - MAIN */

	footer {
	border-top:1px solid #ffd100;
	padding:16px 0 14px 0;
	}

	.footerlinks {
	color:#58595b;
	text-decoration:underline;
	}

	.footer1, .footer2 {
	font-family: 'Ride', Arial, sans-serif;
	font-size:11px;
	text-align:center;
	}

	.footer1 {
	color:#58595b;
	}

	.footer2 {
	color:#58595b;
	padding:12px 0 0 0;
	line-height:20px;
	}

	.htz_txt {
	font-family: 'Ride', Arial, sans-serif;
	color:#ffffff;
	}



/* TABLET - HORIZONTAL */

@media screen and (max-width: 1100px){
	
	body {
	width:100%;
	box-sizing: border-box;
	margin:0 auto 0 auto;
	background:#ffffff;
	font-family: 'Ride', Arial, sans-serif;
	}
	
	main.landing {
	background-position:-100px 0;
	}
	
	.main_htz {
	width:64%;
	}
	
	.faq_htz {
	width:64%;
	}

	.main_headline {
	width:64%;
	}
	
}

/* TABLET - VERTICAL */

@media screen and (max-width: 900px){
	
	body {
	width:100%;
	margin:0;
	background:#ffffff;
	font-family: 'Ride', Arial, sans-serif;
	box-sizing: border-box;
	}

	header {
	width:100%; 
	height:auto;
	background:#ffffff; 
	margin-top:0; 
	border-bottom:1px solid #ffd100;
	}

	.header_logo {
	width:100%;
	background:#ffffff;
	float:none;
	padding:0;
	text-align:left;
	box-sizing: border-box;
	}

	.logo {
	display:none;
	}
	
	.logo_m {
	display:block;
	width:100%;
	height:auto;
	}
	
	.header_book {
	display:none;
	}

	main.landing {
	background:url(../images/main01_750x420.jpg);
	background-size:100% auto;
	background-repeat:no-repeat;
	height:auto;
	}
	
	.main_htz {
	width:100%;
	float:none;
	font-family: 'Ride', Arial, sans-serif;
	text-align:left;
	padding:0 7% 0 7%;
	box-sizing: border-box;
	}
	
	.main_htz_img {
	width:100%;
	float:none;
	text-align:left;
	padding:2% 0 0 0;
	box-sizing: border-box;
	}

	.faq_htz, .faq_htz h1 {
	width:100%;
	float:none;
	}
	
	.faq_htz {
	padding:7% 7% 0 7%;
	}
	
	.faq_htz h1 {
	font-size:30px;
	line-height:38px;
	margin:0;
	padding:0 0 0 0;
	}
	
	.main_htz h1 {
	width:100%;
	font-size:15px;
	line-height:20px;
	margin:0;
	box-sizing: border-box;
	}
	
	.main_body {
	width:100%;
	color:#58595b;
	font-family: 'Ride', Arial, sans-serif;
	font-size:18px;
	font-size:calc(9px + 1vw);
	line-height:1.7em;	
	text-align:left;
	box-sizing: border-box;
	}
	
	.show {
	display:none;
	}
	/* TABLE - MAIN */
	
	.main_chart {
	width:100%;
	padding:10px 0 0 0;
	box-sizing: border-box;
	}
	
	.main_chart h2 {
	font-size:4.2vw;
	line-height:1.2em;	
	}
	
	table.main_htz {
	width:100%;
	color:#ffffff;
	font-family: 'Ride', Arial, sans-serif;
	font-size:2.8vw;
	line-height:1.2em;	
	padding:5% 0 5% 0;
	box-sizing: border-box;
	}

	.tableheader {
	font-size:2.8vw;
	line-height:1.2em;	
	background:#0d0d0d;
	text-align:center;
	padding:5%;
	vertical-align:middle;
	}
	
	.tablecellh {
	width:50%;
	padding:5%;
	height:auto;
	}

	.tablecells, .tablecells1, .tablecells2, .tablecells3, .tablecells4 {
	font-size:2.8vw;
	line-height:1.2em;	
	background:#ffffff;
	text-align:center;
	vertical-align:middle;
	padding:5%;
	height:auto;
	}

/* END TABLE - MAIN */
	
/* FORM - MAIN */	
	
	.form_htz {
	width:100%;
	padding:7%;
	float:none;
	box-sizing: border-box;
	}

	.form_wrapper {
	width:100%;
	background:#f3f3f3;
	padding:0 20px 0 20px;
	box-sizing: border-box;
	animation:none !important;
	}

	.form_wrapper ul {
	list-style-type:none;
    list-style-position:outside;
    margin:0px;
    padding:0 0 20px 0;
	}

	li.form_header {
	height:auto;
	}

	label {
	font-family: 'ride', Arial, sans-serif;
	color:#58595b;
	font-size:11px;
	line-height:11px;
	padding:0 0 7px 0;
	display:block;
	}
	
	input {
	width:100%;
	box-sizing: border-box;
	height:30px;
	margin:0;
	padding:5px;
	}

	.form_header {
	width:100%;
	padding:24px 0 12px 0;
	}

	.forgot {
	font-family: 'ride', Arial, sans-serif;
	font-size:11px;
	line-height:11px;
	color:#58595b;
	text-decoration:none;
	text-align:left;
	}

	.form_cta button {
	width:100%;
	}

	.form_cta:hover button {
	background-color:#000000;
	font-family: 'ride-bold', Arial, sans-serif; 
	border:2px solid #ffd100; 
	color:#ffd100;
	}
	
	/* END FORM - MAIN */	
	
	/* CONFIRMATION */

	.confirm_htz {
	width:100%;
	padding:7%;
	float:none;
	height:auto;
	}

	.confirm_wrapper {
	width:100%;
	padding:5%;
	height:auto;
	}
	
/* END CONFIRMATION */
	
	footer {
	border-top:1px solid #ffd100;
	padding:20px 20px 20px 20px;
	}
	
}