/* Main CSS */


/* Typography
================================================== */
body { 
	font-size: 14px; color:#000000;
	font-family: 'Open Sans', sans-serif;
	color: #fff;
	background-color: #363636;
	font-weight: 300;
	line-height: 1.7em;
}

/* Basic Text
================================================== */
h1, h2, h3, h4, h5, h6 {font-weight:800; color: #c08e00; }

h1 {
	font-size: 1.7em;
	margin-bottom: 24px;
}

h2 {
	font-size: 1.5em;
	margin-bottom: 18px;
}


/* #Basic Styles
================================================== */
html{}

.hide-on-desktop{display:none;}
.edit-mode{position:relative !important; margin-top:5px !important; margin-bottom:5px !important; height:auto !important; z-index:auto !important; bottom:0 !important;}

@media (min-width: 1200px) {
  .container {
    width: 1200px;
  }
}

img {
	max-width: 100% !important;
	height: auto !important;
}

a {
	color: #c08e00;
	text-decoration: none;
}

a:hover {
	color: #daa100;
	text-decoration: none;
}

.row {
	margin: 0;
}
/* #Header
================================================== */
.header-wrap{
	background-color: rgba(255,255,255,.95); 
	padding-bottom: 15px;
	position: relative;
	width: 100%;
	z-index: 50;
	}


#header{text-align: right; margin-top:20px;}

#call, #apply {
		font-size: 1.2em;
		font-weight: 600;
		color: #fff;
		margin-top: 10px;
		padding: 5px 7px;
		text-align: center;
	}


#apply p {
	padding: 12px 10px;
}

#call p {
	padding-top: 12px;

}

#navigation>div {
	float: right;
}

#logo img {
	padding: 10px;
	max-height: 140px !important;
	width: auto !important;
}

/*Navigation 
================================================== */
#mobile-dropdown ul>li>ul>li>ul>li {display: none;}

@media only screen and (min-width: 768px) {


	#navigation>#mobile-dropdown>ul>li>ul{
		z-index:10; 
		display:none;
		position:absolute;
		padding:0; }
	#mobile-dropdown-button{display:none;}
	#navigation {margin-top: 20px;}
	#navigation a{color:#000; display:block; text-decoration:none; font-weight: 600;}
	#navigation a:hover, #navigation a:focus {color: #cb990d; background-color: transparent;}
	#navigation .nav-selected {color: #c08e00;}
	#navigation>#mobile-dropdown>ul{padding:0; margin:10px 0 0 0; list-style:none; float:left; width:100%; font-size: 16px;}
	#navigation>#mobile-dropdown>ul>li{float:left;}
	#navigation>#mobile-dropdown>ul>li>a{ padding: 10px; text-align:center; font-style: normal;}
	#navigation>#mobile-dropdown>ul>li>a:active {color: #c08e00;}
	#navigation .nav-selected {color: #c08e00;}
	#navigation>#mobile-dropdown>ul>li:hover>a{color: #c08e00;}

		
	#navigation>#mobile-dropdown>ul>li>ul>li{float:left;  list-style-type:none; height:auto !important; width: 180px;}

	#navigation>#mobile-dropdown>ul>li>ul>li a{padding:15px 15px; color:#000000; background-color: #c08e00; margin:auto; text-decoration:none; font-size:16px;}

	#navigation>#mobile-dropdown>ul>li:hover>ul{display:inline-block; }
	#navigation>#mobile-dropdown>ul>li:hover>ul>li a{font-style: normal; }
	#navigation>#mobile-dropdown>ul>li:hover>ul>li a:hover{}

	#navigation>#mobile-dropdown>ul>li>ul>li>ul{display:none; } 

	.nav>li>a:hover {background-color: transparent;}


.header-wrap {
  top: 0px;
  position: fixed;
  z-index: 50;
}

#apply p {
	margin: 0px 10px;
}

}



/* #Mobile
=================================================== */
@media only screen and (max-width: 768px) { 

	.header-wrap {padding:0;}

	.head-photo {margin-top: -150px;}

	.hide-on-mobile{display:none;}
	.hide-on-desktop{display:block;}

	#logo{position:relative;}
	#logo img {margin: 0 auto;}

	#mobile-dropdown-button{display:block; padding:10px; width:100%; cursor:pointer; color:#c08e00; position:relative;}
	#mobile-dropdown{display:none; z-index:5; width:100%; position:absolute; background-color: #c08e00 }
	#mobile-dropdown a{display:block; color:#fff; font-style: normal; width:100%; padding:8px 25px; text-decoration:none;}
	#mobile-dropdown>ul{list-style:none; padding:0; margin-right:30px; }
	#mobile-dropdown a:hover{background-color: #cb990d;}
	#mobile-dropdown ul>li>ul {list-style:none; padding-left:0;}
	#mobile-dropdown ul>li>ul a{padding-left:50px;}
	#mobile-dropdown ul>li>ul>li>ul a{padding-left:70px;}

}


/* #Content
================================================== */

#content-wrap{margin-bottom:20px;}

.content{padding: 30px 10px;}

#hero-container {
	background: url("images/IMG_4021.jpg"); 
	background-size: cover;
	background-position: center;
	height: auto;
	padding-top: 100px;
	padding-bottom: 100px;
}

#hero-container2 {
	background: url("images/join-truck.png"); 
	background-size: cover;
	background-position: center;
	height: auto;
	padding: 0;
}



.transparent-white {
	padding-top: 3%;
	padding-bottom: 3%;
	padding-left: 10%;
	padding-right:10%;
	background-color: rgba(256, 256, 256, 0.75);
	text-align: center;
}

.gradient-right {
  background-image: -moz-linear-gradient( 180deg, rgb(51,51,51) 0%, rgba(255,255,255,.3) 50%, rgba(255,255,255,0) 100%);
  background-image: -webkit-linear-gradient( 180deg, rgb(51,51,51) 0%, rgba(255,255,255,.3) 50%, rgba(255,255,255,0) 100%);
  background-image: -ms-linear-gradient( 180deg, rgb(51,51,51) 0%, rgba(255,255,255,.3) 50%, rgba(255,255,255,0) 100%);
}

@media only screen and (max-width: 768px) { 
.gradient-right {
  background-image: -moz-linear-gradient( 180deg, rgb(51,51,51) 0%, rgba(255,255,255,.3) 100%);
  background-image: -webkit-linear-gradient( 180deg, rgb(51,51,51) 0%, rgba(255,255,255,.3) 100%);
  background-image: -ms-linear-gradient( 180deg, rgb(51,51,51) 0%, rgba(255,255,255,.3) 100%);
}
}

.call-to-action {
	color: #000;
	font-weight: 600;
	font-size: 1.4em;
	line-height: 1.7em;
	text-align: center;
	margin-top: 50px;
	margin-bottom: 50px;
	text-align: center;
}

.become-driver {
	background-color: #c08e00;
	color: #000;
}

.become-driver h1 {
	color: #fff;
}

button {
	color: #fff;
	background-color: #c08e00;
	padding: 10px 15px;
}

button:hover {
 background-color: #cb990d;
}

.main-description {
	font-size: 1.2em;
	padding: 35px;
}

.two-big-columns, .equal-height>div {
	padding: 0;
}

.owner-operators {
	background: url("images/gotloads.png");
}

.kj-drivers {
	background: url("images/needloads.png");
}

.owner-operators, .kj-drivers {
	display: block;
	font-weight: 600;
	margin: 0;
	padding: 20% 14%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.white-description {
 color: #fff;
 padding: 270px 15px 5px 15px;
 text-align: center;
 text-shadow: 2px 2px 3px #222;
}

.white-description h1 {
	color: #fff;
}

.white-description p {
	color:black;
}

.over-road-background {
	color: #fff;
	padding-top: 5%;
	position: absolute; 
   top: 0px;
   width: 100%;
   text-align: center;
   padding-right: 25px;
}

@media only screen and (min-width: 768px) {
		.over-road-background {
			padding-top: 12%;
		}
	}

.over-road-background h1 {
	color: #fff;
}

.equal-height {
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
}

.survey {
	text-align: center;
	color: #fff;
	font-weight: 800px;
	font-size: 24px;
	border: none;
	padding-bottom: 20px;
}



.gold-word {
	height: 170px;
	font-weight: 800;
	background: #c08e00;
	padding: 70px 10px;
	text-align: center;
	font-size: 2em;
	margin-bottom: 20px;
}

.gold-word a {
	color: #000;
	text-decoration: none;
}

.gold-word:hover {
	background-color: #cb990d;
}

#main-wrap{padding:10px 0;}
#main{padding-top:40px;}

.hs_submit{
	background-color:#e1a900;
	color:#e1a900;
}

.hs-submit{
	background-color:#e1a900;
	color:#e1a900;
}

.hs_submit hs-submit{
	background-color: #e1a900;
	color:#e1a900;
}

ul{
	text-decoration: none;
}

/* #Footer
================================================== */
#footer-wrap{position:relative; color:#ffffff; font-size:12px; padding:20px 0; background:#000;}

#footer{ margin-bottom:5px; text-align: right;}

.footer-widget {
	padding-bottom: 10px;
}

.footer-widget a {
	color: #fff;
}

.footer-widget a:hover {
	text-decoration: underline;
}


#copyright{}


/* Secondary Pages 
===================================*/

.head-photo {
	background-image: url("images/blackandwhitephoto1.jpg");
	height: 260px;
	background-size: cover;
	background-blend-mode: multiply;
}

.head-home {
	background-image: none;
	background-color: #FFF;
	height: 160px;
}

/* Driver Owner 
==================== */

.full-width-gold {
	color: #fff;
	font-weight: 600;
	font-size: 25px;
	line-height: 33px;
	background-color: #c08e00;
	margin: 20px auto;
}


.blackbox {
color:black;
	padding:10px;
}


    .google-maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }