/**********************************************************************************
	(c) Myitrail
	Design by Josh Cherry
	Styles by Josh Jones
		111 Web Studio (http://111webstudio.com)
**********************************************************************************/


/**********************************************************************************
	Fonts
**********************************************************************************/

@import url('https://fonts.googleapis.com/css?family=Oxygen:300,400,700');



/**********************************************************************************
	HTML
**********************************************************************************/

body {
	margin: 0;
	padding: 0;
	font-weight: 400;
	font-size: 1em;
	font-family: "Oxygen", sans-serif;
	color: #4c4c4c;
	background-color: #dbdbdb;
}

strong,
b {
	font-weight: 700;
}

p {
	margin-top: 0;
}

a {
	color: #5a8fc7;
	-webkit-transition: all 0.3s ease-in-out;
	   -moz-transition: all 0.3s ease-in-out;
		 -o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
}
a:hover {
	color: #1c5d88;
}




/**********************************************************************************
	Main Structure
**********************************************************************************/

/*
#f1efef
*/

#container {
	background-color: #fff;
}


/**********************************************************************************
	Header
**********************************************************************************/

header {
	position: relative;
	line-height: 0;
	background: #001d44 url('/img/bg-striped.jpg') center top no-repeat;
	-webkit-background-size: cover;
	   -moz-background-size: cover;
	     -o-background-size: cover;
	        background-size: cover;
}

header > img {
	width: 70%;
	box-sizing: border-box;
	margin: 24px auto 36px;
	display: block;
}

header #headerbar {
	position: absolute;
	width: 100%;
	box-sizing: border-box;
/*
	background: transparent url('/img/bg-roads.jpg') center bottom no-repeat;
	-webkit-background-size: cover;
	   -moz-background-size: cover;
	     -o-background-size: cover;
	        background-size: cover;
*/
}
header #topbarmainnav {
	position:fixed;
	width:100%;
	z-index:9999;
}
header #topbar {
	background-color: rgb(190,211,220); /* rgba(210, 210, 210, 0.9); */
	width:100%;
}
header #mainnav {
	background-color: rgb(197,241,243); /* rgba(255, 255, 255, 0.82); /* fff */
}

body.inside header #headerbar {
	position: relative;
}

header #topbar,
header #mainnav {
	text-align: right;
	padding: 12px 0;
}

header #shopping-cart-wrapper {position:relative; float:right; margin-left:5px; }
header #shopping-cart {
	background-image:url(/img/btn/shopping-cart.png);
	height:39px;
	width:38px;	
	float:right;
}
header #cart-qty {
	color:#c40000;	
	font-weight:bold;
	padding-right:4px;
}

header a.logo {
	position: absolute;
	left: 0;
	top: 3px;
	display: inline-block;
	width: 270px;
	z-index: 3;
}
header a.logo img {
	width: 100%;
}

header .calls-to-action {
	position: relative;
	margin-top: 180px;
	display: block;
	padding: 0 24px;
	box-sizing: border-box;
	text-align: center;
	width: 100%;
	z-index:99;
}
header .call-buttons {
	display: inline-block;
}
header .call-buttons a {
	display: block;
	padding: 10px 130px;
	background-color: #cc0000;
	color: #fff !important;
	font-size: 1.3em;
	line-height: normal;
	margin: 14px auto;
	text-decoration: none;
	-webkit-transition: all 0.3s ease-in-out;
	   -moz-transition: all 0.3s ease-in-out;
	     -o-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
}
header .call-buttons a:nth-of-type(2) {
	background-color: #336699;
}
header .call-buttons a:nth-of-type(3) {
	background-color: #ccc;
}
header .call-buttons a:hover {
	background-color: #333;
}

.nav {
	line-height: normal;
}
a.navmenu {
	display: none;
}
.topnav.show,
.topnav.hide {
	display: block;
}

ul.nav,
ul.nav li,
ul.nav li ul {
	margin: 0;
	padding: 0;
	list-style: none;
	box-sizing: border-box;
}

ul.nav li {
	display: inline;
	position: relative;
	cursor: pointer;
}

ul.nav li.social {
	font-size: 1.5em;
}

ul.nav li a {
	box-sizing: border-box;
	display: inline-block;
	padding: 12px 6px;
	color: #858585;
	text-decoration: none;
	font-size: 0.75em;
	background-color: transparent;
}
ul.nav > li:hover > a,
ul.nav li a:hover {
	color: #111;
}
#topbar ul.nav li a {
	color: #424242;
}
#topbar ul.nav li a:hover {color:#fff; }

ul.nav li.btn a {
	border-radius: 4px;
	padding: 12px;
	color: #fff !important;
}
ul.nav li.btn.red a {
	background-color: #dc393b;
}
ul.nav li.btn.blue a {
	background-color: #1c5d88;
}
ul.nav li.btn a:hover {
	background-color: #555;
}

#billing-login {
	display:inline-block;
}
#billing-login a:hover {color:#fff; }
#billing-login li {position:relative; z-index:998; }
ul.top-level {
	padding-inline-start:0;
	padding-inline-end:20px;
}

.top-level li:hover {color:#fff; }

ul.sub-level {
	display:none;
	background:#bed3dc;
	text-align:center;
	margin-top:20px;
}
li:hover .sub-level {
	display:block;
	position:absolute;
	top:20px;
}
ul.sub-level li a {padding:5px; }
.sub-level img {
	width:80px;
}



/**********************************************************************************
	Content
**********************************************************************************/

#back-to-prod {padding-left:10px; }


/**********************************************************************************
	Footer
**********************************************************************************/

footer {
	font-size: 0.9em;
	color: #858585;
	background-color:#dbdbdb;
}
footer .columns {
	padding: 24px;
}
footer .column {
	box-sizing: border-box;
	width: 31%;
	float: left;
	margin: 0;
	padding: 0;
	min-height: 50px;
	line-height: 1.7em;
}
footer .column:nth-of-type(2) {
	margin: 0 3.5%;
}

footer .phone {
	font-size: 1.3em;
}

footer a {
	color: #555;
	text-decoration: none;
	padding: 3px 2px;
}
footer a:hover {
	background-color: #e7e7e7;
	color: #555;
	cursor: pointer;
}

footer form input[type='text'],
footer form textarea {
	background-color: #d7d3d0;
	border: none;
	padding: 16px 12px;
	display: block;
	width: 100%;
}
footer form input[type='text'] {
	border-bottom: 1px solid #25211e;
}
footer form input[type='submit'] {
	background-color: transparent;
	border: none !important;
	padding: 16px 12px;
	-webkit-transition: all 0.3s ease-in-out;
	   -moz-transition: all 0.3s ease-in-out;
	     -o-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
}
footer form input[type='submit']:hover {
	background-color: #fff;
	cursor: pointer;
}

.recent-posts {
	
}
.recent-post {
	margin-bottom: 12px;
}
.recent-post > div {
	display: inline-block;
	float: left;
}
.recent-post-thumb {
	width: 24%;
	min-height: 40px;
	background-color: #ccc;
	margin-right: 4%;
}
.recent-post-content {
	width: 68%;
	font-size: 0.8em;
}



/**********************************************************************************
	Global Classes
**********************************************************************************/

* {
	outline: none !important;
}

.wrapper {
	position: relative;
	width: auto;
	max-width: 1400px;
	margin: 0 auto;
	box-sizing: border-box;
}

.section {
	background-color: #f1efef;
	border: 1px solid #f7f4f4;
	border-width: 3px 0;
	/*margin: 0 0 48px;*/
	box-sizing: border-box;
	background-position: left center;
	background-repeat: no-repeat;
	-webkit-background-size: contain;
	   -moz-background-size: contain;
		 -o-background-size: contain;
			background-size: contain;
}

.section .content {
	margin-top: 20px;
	margin-bottom: 20px;
	float: right;
	width: 50%;
	box-sizing: border-box;
	padding: 1% 2%;
	/*background-color: rgba(241, 239, 239, 0.8);*/ /* #f1efef */

}

.section.inside,
.section.inside .content {
	background-color: #fff;
	border-width: 0;
	margin-top:130px; /* static topbarmainnav padding */
}
.section.inside .content {
	margin-top: 6%;
	margin-bottom: 6%;
}

.section .content h1 {
	margin-top: 0;
	margin-bottom: 24px;
}
.section .content h4 {
	margin-top: 0;
	margin-bottom: 24px;
	font-size:2em;
}
.section .content p {
	font-size: 0.85em;
	line-height: 1.7em;
}

.section.full .content {
	float: none;
	width: auto;
	padding: 20px 48px;
	overflow:auto;
}
.section.center .content {
	text-align: center;
}
.section.center .left {
	text-align: left;
}

.section.bg-white,
.content.bg-white {
	background-color: #fff !important;
	border: none;
}
.section .content .buttons,
.section .content .boxes {
	display: table;
	border-collapse: collapse;
	margin: 24px auto 0;
}
.section .content .buttons a,
.section .content .boxes a {
	display: table-cell;
	box-sizing: border-box;
	padding: 0 4px;
	text-align: center;
	vertical-align: top;
}
.section .content .buttons a {
	width: 50%;
}
.section .content .buttons a img {
	width: 100%;
	max-width: 350px;
}
.section .content .boxes a {
	width: 25%;
	padding: 0 24px;
}
.section .content .boxes a img {
	width: 100%;
	max-width: 350px;
}

.section.personal {
	background-image: url('/img/bg-key.jpg');
}
.section.asset {
	background-image: url('/img/bg-boxes.jpg');
}
.section.fleet {
	background-image: url('/img/bg-truck.jpg');
}

#homeContact {
	border-collapse: collapse;
	border-spacing: 0;
	border: none;
	margin: 0;
	width: 100%;
}
#homeContact td {
	box-sizing: border-box;
	padding: 6px;
}
#homeContact input,
#homeContact select,
#homeContact textarea {
	box-sizing: border-box;
	border: 1px solid #d1cac5;
	padding: 12px 18px;
	font-size: 0.9em;
	width: 100%;
	margin: 0;
}
#homeContact select {
	-webkit-appearance:none;
	-moz-appearance:none;
	background:url('/img/btn/gray-down-arrow.png') no-repeat 90% center;
	appearance:none;
	color:#999999;	
	width:90%;
}
#homeContact input[type='submit'] {
	border: 1px solid #dc393b;
	background-color: #dc393b;
	color: #fff;
	text-align: left;
	border-radius: 0;
	-webkit-transition: all 0.3s ease-in-out;
	   -moz-transition: all 0.3s ease-in-out;
		 -o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
}
#homeContact input[type='submit']:hover {
	border: 1px solid #a72023;
	background-color: #a72023;
	cursor:pointer;
}

.plm10 {margin-left:10%; }

.red {
	border:1px #ee3a43 solid;
}
.red-wrap {
	border-top:1px #ee3a43 solid;
	border-bottom:1px #ee3a43 solid;
}
.blue {
	border:1px #658faf solid;
}
.blue-wrap {
	border-top:1px #658faf solid;
	border-bottom:1px #658faf solid;
}
.gray {
	border:1px #999999 solid; 
}
.gray-wrap {
	border-top:1px #999999 solid;
	border-bottom:1px #999999 solid;
}
.orange {
	border:1px #ff9966 solid; 
}
.orange-wrap {
	border-top:1px #ff9966 solid;
	border-bottom:1px #ff9966 solid;
}
.black {
	border:1px #000 solid; 
}
.black-wrap {
	border-top:1px #000 solid;
	border-bottom:1px #000 solid;
}

.borderRadius5 {
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}
.borderRadius10 {
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
}
.borderRadius20 {
	border-radius:20px;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
}

.clr {clear:both; }

.crossLink {color:#9CF; }
.crossLink a:link, a:visited, a:hover, a:active  {color:#9CF; text-decoration:underline; }

#mainBody {
	padding:20px; 
	overflow:auto;
	margin:0 auto 20px auto;
	box-sizing:border-box;
	margin-top:130px; /* static topbarmainnav padding */
}

.textLine {}
.textLine label {width:146px; padding-top:4px; padding-right:4px; margin:3px 0; font-weight:bold; float:left; text-align:right; }

.textLine input {
	float:left;
	padding:3px;
	margin:3px 0;
	border:1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:6px;
}
.textLine input:focus {
	background: #fff; 
    border:1px solid #555; 
    box-shadow: 0 0 3px #aaa; 
}
.textLine input[type=radio] {display:inline; margin-top:8px; margin-right:4px; float:left; box-shadow:none; }
.textLine .checkboxLabel {width:20px; padding-right:20px; }

.textLine select {
	float:left;
	padding:3px;
	margin:3px 5px 3px 0;
	border:1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:2px;
}
.textLine select:focus {
	background: #fff; 
    border:1px solid #555; 
    box-shadow: 0 0 3px #aaa; 
}
.textLine button {
	float:left;
	padding:3px;
	margin:3px 5px 3px 0;
	border:1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:2px;
}

.responsive_img {right:-50%; max-width:100%; height:auto; width: auto\9; }

a.divLink {position:absolute; width:100%; height:100%; top:0; left:0; text-decoration:none; }

#anchors {padding:20px; }

.anchor {
	display:block;
	position:relative;
	top: -184px;
}
.anchorTop {display:inline-block; padding-bottom:30px; padding-top:10px; }

/**********************************************************************************
	Responsive
**********************************************************************************/

@media screen and ( max-width: 1048px ) {
	.wrapper {
		padding: 0 24px;
	}
}

@media screen and ( max-width: 900px ) {
	header .calls-to-action {
		margin-top: 138px;
	}
	#mainBody {margin-top:88px; }
	a.navmenu {
		display: inline-block;
		box-sizing: border-box;
		background-color: transparent;
		width: auto;
		margin: 0 auto;
		padding: 3px 10px 6px;
		font-size: 1.4em;
		font-family: Arial, sans-serif;
		line-height: normal;
		color: #fff;
		text-align: center;
		text-decoration: none;
		-webkit-transition: all 0.3s ease-in-out;
		   -moz-transition: all 0.3s ease-in-out;
			 -o-transition: all 0.3s ease-in-out;
				transition: all 0.3s ease-in-out;
	}
	a.navmenu.active {
		background-color: #979797;
		color: #fff;
	}
	a.navmenu.inactive {
		color: #fff;
	}
	a.navmenu.active:hover,
	a.navmenu.inactive:hover {
		color: #fff;
		background-color: #979797;
	}
	a.navmenu span {
		display: inline-block;
		vertical-align: middle;
		font-size: 0.5em;
		text-transform: uppercase;
	}
	a.navmenu.inactive span::before {
		content: 'open ';
	}
	a.navmenu.active span::before {
		content: 'close ';
	}
/*
	.topnav {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		padding-top: 12px;
	}
*/
	.topnav.show {
		display: block;
	}
	.topnav.hide {
		display: none;
	}

	#mainnav .topnav {
		margin-top: -34px;
	}
	ul.nav {
		width: 145px;
		position: relative;
		margin: 0 0 12px;
		padding: 0;
		left: auto;
		bottom: auto;
		float:right;
		text-align:left;
	}
	ul.nav li,
	ul.nav li:hover,
	ul.nav a:hover {
		background: transparent;
	}
	ul.nav li {
		display: block;
		float: none;
		margin: 0;
		border-bottom: 1px solid #fff;
	}
	#topbar ul.nav li:first-child {
		border-top: 1px solid #fff;
	}
	

	ul.nav li.btn a {
		border-radius: 0;
		padding:12px 24px;
		color: #fff;
	}
	ul.nav li a {
		display: block;
		width: auto;
		margin: 0;
		float: none;
		padding: 12px 24px;
		font-size: 0.85em;
		background-color: #979797;
		color: #fff !important;
	}
	ul.nav li:hover a,
	ul.nav li a:hover {
		background-color: #222;
		color: #fff;
	}
	header #headerbar {
		position: relative;
		display: block;
		width: 100%;
		padding: 0;
		box-sizing: border-box;
		background-color: 
	}
	#billing-login {
		display:block;
	}
	ul.top-level {
		padding-inline-end:0;
	}
}

@media screen and ( max-width: 700px ) {
	footer .column {
		width: auto;
		float: none;
		display: block;
		margin: 0 0 24px !important;
	}
}

@media screen and ( max-width: 600px ) {
	.section {
		/*margin: 0 0 48px;*/
		box-sizing: border-box;
		background-position: right center;
		-webkit-background-size: cover;
		   -moz-background-size: cover;
			 -o-background-size: cover;
				background-size: cover;
	}
	.section .content {
		float: none;
		width: auto;
		padding: 12px 24px;
		box-sizing: border-box;
		background-color: rgba(241, 239, 239, 0.8);
	}
	.section .content .boxes a {padding:0 5px; }
	.section.inside .content {
		padding: 36px 24px 12px;
	}
}

@media screen and ( max-width: 550px ) {
	header .call-buttons {
		display: block;
	}
	header .call-buttons a {
		display: block;
		padding: 10px;
		text-align: center;
		font-size: 1em;
	}
}

@media screen and ( max-width: 540px ) {
	#homeContact {
		width: 100%;
	}
	#homeContact td {
		display: block;
		width: 100% !important;
		text-align: left;
	}
}




/**********************************************************************************
	clearfix
**********************************************************************************/

.group:before,
.group:after {
	content: "";
	display: table;
} 
.group:after {
	clear: both;
}
.group {
	zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}