/* CSS main stylesheet */


/*!
 * IE10 viewport hack for Surface/desktop Windows 8 bug
 * Copyright 2014-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

/*
 * See the Getting Started docs for more information:
 * http://getbootstrap.com/getting-started/#support-ie10-width
 */
@-ms-viewport     { width: device-width; }
@-o-viewport      { width: device-width; }
@viewport         { width: device-width; }


/* fonts */

@font-face {
    font-family: 'FuturaLight';
    src: url('../fonts/futura-light.eot');
    src: url('../fonts/futura-light.eot?#iefix') format('embedded-opentype'), url('../fonts/futura-light.woff') format('woff'), url('../fonts/futura-light.ttf') format('truetype'), url('../fonts/futura-light.svg#FuturaLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'FuturaBook';
	src: url('../fonts/futura-book.eot');
	src: url('../fonts/futura-book.eot?#iefix') format('embedded-opentype'), url('../fonts/futura-book.woff') format('woff'), url('../fonts/futura-book.ttf') format('truetype'), url('../fonts/futura-book.svg#FuturaBook') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'FuturaHeavy';
	src: url('../fonts/futura-heavy.eot');
	src: url('../fonts/futura-heavy.eot?#iefix') format('embedded-opentype'), url('../fonts/futura-heavy.woff') format('woff'), url('../fonts/futura-heavy.ttf') format('truetype'), url('../fonts/futura-heavy.svg#FuturaHeavy') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: 'FuturaBold';
    src: url('../fonts/futura-bold.eot');
    src: url('../fonts/futura-bold.eot?#iefix') format('embedded-opentype'), url('../fonts/futura-bold.woff') format('woff'), url('../fonts/futura-bold.ttf') format('truetype'), url('../fonts/futura-bold.svg#FuturaBold') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* main styles */


#QR
{
	padding-top:60px;
}

body
{
	font-family: 'FuturaBook', Arial, Helvetica, sans-serif;
	font-size:15px;
}

strong
{
	font-weight: normal;
	font-style:normal;
	font-family: 'FuturaHeavy', Arial, Helvetica, sans-serif;
}

#skipNavigation {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5000000;
    padding: 10px;
    background: #fff;
    color: #000;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
    opacity: 0;
    transition:opacity .5s;
}

#skipNavigation:focus {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
}


#main-navbar
{
	width:100%;
	height:80px;
	background-color:transparent;
	transition: background-color .5s;
	position:fixed;
	z-index:300;
	
}

#main-navbar.past-main {
    background-color:#000;
    transition: background-color .5s;
}


.main-navbar-remove-affix
{
	position:static;
}

#navlogo-cont
{
	padding-top: 8px;
    padding-left: 20px;
}

#navlogo
{
	width:200px;
	height:auto;
}
	
#leftnav
{
	background:transparent;
	border:0;
	z-index:500;
}

#leftnav a:link, #leftnav a:visited
{
	
	font-family: 'FuturaBook', Arial, Helvetica, sans-serif;
	font-size: 14px;
	color:#FFF;
	text-transform: uppercase; 
	background:transparent;
}


#leftnav a:active, #leftnav a:focus
{
	background:transparent;
	color:#fff;
}





.hero-logo
{
	width:500px;
	height:auto;
}





.grid-area > div
{
	padding:20px 10px 20px 10px;
	font-size:18px;
	font-family: 'FuturaHeavy', Arial, Helvetica, sans-serif;
	text-align:center;
}

.grid-item img
{
	width:100%;
	-webkit-backface-visibility: hidden;
	padding:7px;
}

.grid-item
{
	margin:25px 0;
	cursor: pointer;
	transition: color .3s, opacity .3s;
	opacity:.88;
	color:#000;
}

.grid-item:hover, .grid-item:focus		
{
	color:#D11D10;
	transition: color .3s, opacity .3s;
	opacity:1;
	text-decoration: none;
}

.extra-text-small
{
	font-size:14px;
}


#footer
{
	padding:30px 0;
	background-color:#222;
	color:#dedede;
	text-align:center;
	font-size:10px;
	margin-top:30px;
}



.embed-vid {
    width: 100%;
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.embed-vid iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.embed-img
{
	width:100%;
	height:auto;
}

.section-bg
{
	background-color: #fff;
	padding:30px 0 30px 0;
}

.section-bg-pin
{
	background-image: url('../images/pinstripe-dark.png');
	padding:60px 0 60px 0;
	margin-top:30px;
}

.btw-sect
{
	border-bottom:4px solid #799b3e;
	padding-top:50px;
	background-color:#fff;
	width:75%;
	margin:auto;
}

.img-explainer
{
	padding:110px 0 110px 0;
	font-size:16px;

}


.headline-explainer
{
	padding:40px 0 40px 0;
	text-align:center;
}


.headline-explainer div:nth-child(1)
{
	font-family: 'FuturaBold', Arial, Helvetica, sans-serif;
	font-size:89px;
	letter-spacing: -2px;
	line-height: 70px
}

.headline-explainer span:nth-child(2)
{
	font-family: 'FuturaBold', Arial, Helvetica, sans-serif;
	font-size:64px;
	border-bottom:6px solid #799b3e;
	text-shadow: -8px 0 white, 0 8px white, 8px 0 white, 0 0px white;
	display:inline-block;
	letter-spacing: -2px;
	line-height: 66px
}

.headline-explainer div:nth-child(3)
{
	margin-top:15px;
	font-family: 'FuturaBook', Arial, Helvetica, sans-serif;
	font-size:24px;
}

.explainer
{
	text-align:left;
	padding: 110px 24% 70px 24%;
	line-height:30px;
	background-image: url('../images/gray-s.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	font-size:20px;
	background-color:#fff;
}

.bullet-title
{
	margin-bottom:30px;
	text-align:center;
	font-family: 'FuturaHeavy', Arial, Helvetica, sans-serif;
	font-size:40px;
	color:#fff;
}

.bullet-list-values
{
	font-size:20px;
	color:#fff;
	padding:0 15px 0 15px;
}

.bullet-list-values div:before
{
	content: "●";
	color:#799b3e;
	position: absolute;
    margin-left: -1.1em; 
}


.bullet-list-values ul
{
	list-style-type:none;
}

.bullet-list-values li:before {
    content: "–"; /* en dash here */
    position: absolute;
    margin-left: -1.1em; 
}

.sign-off-logos
{
	text-align:center;
}


.sign-off-logos :nth-child(1)
{
	width:300px;
	padding-top:15px;
	margin:0 0 15px 0;
}

.sign-off-logos :nth-child(2)
{
	font-style: italic;
}

.sign-off-logos :nth-child(3)
{
	width:200px;
	margin:20px 0 15px 0;
}

.available-carts
{
	text-align: center;
	margin:60px 0 30px 0;
	font-size:40px;
	font-family: 'FuturaHeavy', Arial, Helvetica, sans-serif;
	color:#799b3e;
}

.contact
{
	margin:30px 0 0 0;
	text-align: center;
}

.transcript
{
	text-align:center;
}

.transcript a:link, .transcript a:visited, .transcript a:hover, .transcript a:active
{
	color:#ee3124;
}



#hero-image
{
	background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%), url('../images/hero.jpg') no-repeat center; /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%), url('../images/hero.jpg') no-repeat center; /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%), url('../images/hero.jpg') no-repeat center; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	background-size:cover;
	height:578px;
	padding:175px 0 0 0;
}


#hero-text-area
{
	text-align:center;
	color:white;
	line-height:65px;
	margin-top:40px;
	display:block;
}



#hero-text-area sup
{
	position:relative;
	font-size:40%;
	top:-30px;
	left:3px;
	font-style:normal;
}

#hero-text-area h1 span:nth-child(1)
{
	font-size: 28px;
	margin-top:-20px;
	display:block;
}

#hero-text-area h1 span:nth-child(2)
{
	font-family: 'FuturaBold';
	font-size:50px;
	display:block;
	margin-top:20px;
}

#hero-text-area h1 span:nth-child(2) em
{
	width:100%;
	border-bottom:10px solid rgba(238, 49, 36, .5);
	position:relative;
	top:-14px;
	padding-bottom:4px;
}

#hero-text-area h2
{
	font-size: 26px;
}

.explainer-top
{
	text-align:center;
	margin: 35px 0;
	padding: 70px 24%;
	line-height:30px;
	background-image: url('../images/gray-s.png') ;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	height:300px;
	font-size:20px;
}

.explainer-bottom
{
	font-size:18px;
	margin: 80px 28% 75px 28%;
	text-align:center;
}

.grid-bg
{
	background-image: url('../images/grid-bg.png');
	background-repeat: repeat-y;
	background-size:100%;
	padding:30px 0;
}
