/*************************************
**************************************
reset.css

zero out browser default styles.
(based on the standard Meyers reset).
**************************************
*************************************/

/*reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote,
a, abbr, acronym, address, big, cite,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: 'Open Sans Condensed', sans-serif;
    vertical-align: baseline;}
:focus {outline: 0;}
body {
line-height: 1;
color: black;
background: white;}
ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
.l, .left {float: left;}
.r, .right {float: right;}
p {margin: 2% 0%;}

header, footer {padding: 1em;}

header {
    background: #fff;
    float: left;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0px 1px 4px #dedede;
}

footer {
	background: #444;
	float: left;
	width: 100%;
	text-align: center;
	box-sizing: border-box;
}

.copyright {
	color: #fff;
	font-weight: 200;
	font-size: 16px;
}

.inner {
	max-width: 1600px;
	width: 100%;
	margin: 0 auto;
}

h1, h2 {
    font-size: 48px;
    color: #444;
    float: left;
}

h1.mainTitle .logo {max-width: 200px;width: 100%;}
h1.mainTitle .logo img {width: 100%;}

nav.mainNav {
	float: right;
	margin-top: 2em;
}

nav.mainNav ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-pack: distribute;
        justify-content: space-around;
}

nav.mainNav ul li a {
    text-decoration: none;
    color: #444;
	padding: 1em 2em;
	transition: all .3s linear;
	cursor: pointer;
	font-size: 22px;
}

nav.mainNav ul li a:hover {
	background: #9e0b0b;
	color: #fff;
}

section {
	float: left;
	width: 100%;
	position: relative;
	padding: 4em 2em;
	box-sizing: border-box;
}

section p {
	max-width: 700px;
	width: 100%;
	font-size: 14px;
	color: #222;
	margin: .5em auto;
	line-height: 1.6;
}

section h2 {
	float: left;
	width: 100%;
	text-align: center;
	margin-bottom: 1em;
}

.wrapper {
	float: left;
	width: 100%;
}

.quotes {
    float: left;
    width: 100%;
    padding: 0;
    text-align: center;
	background: rgba(0, 0, 0, 0.1) url('http://www.bestpickuptoolbox.com/assets/img/hero-image.jpg') center center no-repeat;
	background-size: cover;
	border-top: solid 2px #333;
	border-bottom: solid 2px #333;
}

.quote {
	font-size: 48px;
    color: #fff;
    position: relative;
    padding: 3em;
    float: left;
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
	box-sizing: border-box;
	text-shadow: 0px 0px 30px #000;
}

.vid-wrapper {
	max-width: 800px;
	width: 100%;
	margin: 0 auto;
}

.flex-box-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
            align-items: center;
    -ms-flex-line-pack: center;
        align-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    float: left;
    width: 100%;
}

#why, #add-on {background: #eaeaea;}
#why p, #future p {
	font-size: 22px;
	font-weight: 100;
	text-align: center;
}
.box {
    width: 25%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
            align-items: center;
    -ms-flex-line-pack: center;
        align-content: center;
    padding: 1em;
    box-sizing: border-box;
}

.box-icon {
    width: 100%;
    max-width: 100px;
    margin: 1em auto;
    height: 100px;
}

.box p {min-height: 100px;max-width: 250px;}

.box-description {
	font-size: 30px;
	color: #9e0b0b;
}

.contact-info {padding: 0;}

.contact-list {
    float: left;
    width: 50%;
    line-height: 1.6;
    font-size: 20px;
	padding: 2em;
	box-sizing: border-box;
	background: #9e0b0b;
	color: #fff;
}
.contact-list ul {float: right;max-width: 500px;}
.contact-list li a {color: #fff;}

.contact-form {
	float: left;
	width: 50%;
	padding: 2em;
	box-sizing: border-box;
}

.contact-form form {max-width: 600px;width: 100%;}

.contact-form input {
    float: left;
    width: 100%;
    font-size: 14px;
    padding: .5em;
    box-sizing: border-box;
    margin: .25em 0;
	outline: none;
	background #eee;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: 2px;
	border: solid 1px #ccc;
}

.button {
	background: #9e0b0b;
	color: #fff;
	border: solid 1px transparent;
	border-radius: 0;
	outline: none;
	max-width: 150px;
	cursor: pointer;
}

.button:hover {
	background: #eaeaea;
	border-color: #9e0b0b;
	color: #9e0b0b;
}

.contact-form, .contact-list {min-height: 200px;padding: 1em;}

#future p{
	text-align: center;
	
}

.stats-list {
    list-style: disc;
    width: 100%;
    font-size: 28px;
    max-width: 900px;
    margin: 2em auto;
    line-height: 1.8;
    color: #333;
    padding-left: 8%;
	box-sizing: border-box;
	clear: both;
}


@media screen and (max-width: 980px) {
	.box {width: 50%;}
	nav.mainNav, .mainTitle {width: 100%;}
	nav.mainNav ul li a {padding: .5em;}
	.logo {margin: 0 auto;max-width: 250px;}
}

@media screen and (max-width: 650px) {
	.box, .contact-list, .contact-form, .contact-list ul {width: 100%;}
	.box p {min-height: auto;}
	.quote {padding: .5em;}
}