/**
 * Main Combined CSS Stylesheet
 *
 * + Includes Normalize styles
 *
 */
/* Combined Version */ 
/************************************************
 * NORMALIZE STYLES
 ************************************************ 
 */
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2rem;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

 
 
/************************************************
 * BEGIN OLD STYLES
 ************************************************ 
 */

pre { margin: 0; font-family: monospace; }
a:link { color: #000; text-decoration: underline; }
table { border-collapse: collapse; border: 0; width: 934px; box-shadow: 3px 3px 5px #999; }
.center { text-align: center; }
.center table { margin: 1em auto; text-align: left; }
.center th { text-align: center !important; }
td, th { border-bottom: 1px solid #666; border-left: 1px solid #666; border-right: 1px solid #666; font-size: 100%; vertical-align: baseline; padding: 4px 5px; white-space: nowrap; }
h2 { font-size: 1.2rem; }
/* for phpinfo table */
.p { text-align: left; }
.e { background-color: #ccf; width: 300px; font-weight: bold; }
.h { background-color: #99c; font-weight: bold; }
.v { background-color: #ddd; max-width: 300px; overflow-x: auto; word-wrap: break-word; white-space: break-spaces; }
.v i { color: #999; }
hr { width: 934px; background-color: #ccc; border: 0; height: 1px; }
.fleft { float: left; }
.underline { text-decoration: underline; }
#top-navbar { width: 100%; display: block; overflow: hidden; }
.main-logo { width: 100px; height: 100px; margin: 0 30px; }
.main-nav { padding: 40px 0 0 33px; float: left; display: inline-block; }
.main-nav a { display: inline-block; padding: 8px 12px; margin: 3px 0; border-radius: 3px; text-decoration: none; font-size: 12px; text-transform: uppercase; font-weight: bold; border: 1px solid #454545; color: #454545; background: transparent; }
.main-nav a:hover { background: #454545; color: #fff; }
#loginForm p { padding: 10px 0; }
#loginForm div { padding: 10px; }
#loginForm span.label { padding: 0px 10px 0 0; vertical-align: middle; display: block; }
.container a { color: #454545; }
.container table thead td { background-color: #ccc; padding: 4px 10px; font-weight: bold; }
.container table tbody td { padding: 4px 10px; }
.container input.input { background-color: #fff; border: 1px solid #ccc; padding: 10px 0 10px 15px; margin-top: 10px; border-radius: 4px; font-size: 18px; min-width: 28ch; }
.container input[type="submit"] { background-color: #036; color: #eee; border: none; margin-top: 10px; border-radius: 4px; cursor: pointer; padding: 10px 25px; font-size: 16px; }
.container input[type="submit"]:hover { color: #fff; }
.container button { background-color: #ccc; border: 0; padding: 5px 10px; cursor: pointer; }
.container button:hover { background-color: #222; color: #fff; }
.container .phptable { width: 960px; }
.container .phptable table { font-size: 18px; }
.footer { border-radius: 3px; padding: 20px; margin: 33px; text-align: right; font-size: 11px; }
.footer a { color: #454545; }


/**************************************************************************
 * END OLD STYLES
 **************************************************************************
 */

 
/**
 * BEGIN NEW GRID STYLES
 *
 */ 
 /** -------------------------------------------------------
 * Debugger Styles
 * --------------------------------------------------------
 */
/* FOR DEBUGGING ONLY ! */
.debug {
   position: fixed;
	top: 0;
	left: .5em;
	z-index: 99999;
	background: rgba(0,0,0,.5);
	color: #fff;
	padding: .5em;
	border-radius: 0 0 5px 5px;
	border: 2px solid #ccc;
	border-top: 0;
}
.debug span {
	float: left;
	font-size: 11px;
} 
.debug .metric .heading {
    color: chartreuse;
}
/* End debugger styles */
/* ------------------------------------------------------- */

/* --------------------------------------------------------
 *  base fallback css pre flex or grid
 * --------------------------------------------------------
 */
html {
    font-size: 100%; /* % at root, em at containers and query, text level elements are rem (this approach lets users scale text in browser | browser default at 100% 1 rem = 16px) */    
} 
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    overflow-x: hidden;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
    background-color: #fff;
    color: #454545;
}
a:focus,
a:active {
    outline: none;
}
h1 {
    font-size: 1.8rem;
}
h1.page-title {
    background-color: #036;
    padding: 20px 20px 20px 35px;
    margin: -20px -20px 20px -20px;   
    color: #eee;
}
h1.page-title.page-error {
    background-color: crimson;
    color: white;
    margin: 0;
}
h1.modern {
    padding: 20px;
    background: #036;
    margin: -20px -20px 0 -20px;
    color: #eee; 
}
h1.modern-inner {
    padding: 20px;
    background: cornflowerblue;
    margin: -20px -20px 0 -20px;
    color: white;
    font-size: 1.4rem;
}
.modern-sub {
    font-size: 1rem;
    vertical-align: middle;
}
h2.banner {
    color: #036;
    font-size: 1.6rem;
}
h2.modern-inner {
    color: #036;
    background-color: #ddd;
    padding: 15px;
    margin: -20px -20px 20px -20px;    
}
ul {
    list-style: none;
}
input {
    border-radius: 5px;
}
img {
    width: 100%;
    height; auto;
}
img.map {
    max-width: 800px;
}
.no-display {
    display: none;
}
.center {
    margin: 0 auto !important;
    text-align: center !important;
}

.header {
    background-color: #efefef;
    background-image: url(../images/tread2.gif);
    background-repeat: repeat-x;
    background-position: center;
    background-size: contain;     
    position: relative;   
    min-height: 70px;
    margin: 0 auto;
    display: table;
    width: 100%;    
} 
.header-logo {
    display: table-cell;
    width: 25%;
    text-align: right;
    vertical-align: middle;
}
.top-nav {
    display: block;
    background-color: #eee;
    position: sticky;
    top: 0;
    /* float: left; */
    width: 100%;
    z-index: 999;
    box-shadow: 1px 1px 20px #ccc;
}
.top-nav a {
    font-weight: bold;
    
    color: #036;
    text-decoration: none;
    padding: 10px 0;
}
.top-nav ul {
    padding: 0;
    margin: 0 auto;
    text-align: center;
}
.top-nav li {
    display: inline-block;
    padding: 0 10px;
}
.header-logo img {         /* dont want this image to resize */
    max-height: 80px;
    max-width: 100px;
    height: auto;
    display: block;
    float: right;
    margin: 10px auto;
    
}
.header-banner {
    display: table-cell;
    width: 50%;
    text-align: center;
    vertical-align: middle;
}
.header-banner ul {
    margin: 0;
    padding: 0;
}
.header-search {
    display: table-cell;
    width: 10%;
    text-align: right;
    vertical-align: middle;
    min-width: 220px;
}
.header-links {
    display: table-cell;
    width: 2%;
    text-align: center;
    vertical-align: middle;
}
.header-links ul {
    display: inline-block;
    margin: 0;
    padding: 10px 30px 0;
}
.header-links li {
    display: table-cell;
    padding: 0 15px;
    position: relative;
    height: 40px;
    width: 30px;
    min-width: 30px;
}
form.search {
    position: relative;
    width: 220px;
    max-width: 220px;
    height: auto;
    margin: 0 auto;
}
.search-vin {
    text-decoration: underline !important;
    color: white !important;
    font-weight: bold;
}
#user-button {
    display: none;
}
#cart-button {
    display: none;
}
#search-button {
    position: absolute;
    height: 40px;
    width: 40px;
    background-color: transparent;
    border: none;
    left: -10px;
    top: 0;
}
/* font awesome */

#iconText-search {
    position: absolute;
    background-color: transparent;
    border: none;
    left: 0;
    top: 18px;
}
#search-button img {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
}

/*
#search-button:before {
content: '\f002';
font-family: FontAwesome;
color: #036;
font-size: 22px;
padding: 0;
position: absolute;
bottom: 0;
left: 0;
background: none;
cursor: pointer;
z-index: 999;
top: 0;
right: 0;
font-weight: bold;
}
*/

svg.search {
    position: absolute;
    left: 0;
    right: 0;
    top: 2px;
    margin: auto;
}
svg.cart {
    position: absolute;
    left: 0;
    right: 0;
    top: 2px;
    margin: auto;
}
#cart-qty {
    position: absolute;
    background-color: #ccc;
    border-radius: 1px;
    z-index: 1;
    opacity: 1;
    top: 2px;
    right: 0;
    left: 18px;
    bottom: 0;
    display: table;
    border-collapse: collapse;
    z-index: 999;
    max-height: 1rem;
}
#cart-qty-update {
    font-size: 12px; /* dont want this to scale with text hence the px */
    display: table-cell;
    padding: 1px;
}
svg.user {
    position: absolute;
    left: 6px;
    right: 0;
    top: 0;
    margin: auto;
}
svg.contact {
    position: absolute;
    left: 0;
    right: 0;
    top: 2px;
    margin: auto;
}
#home-button {
    position: relative;
}
svg.home {
    position: absolute;
    left: 0;
    right: 0;
    top: 4px;
    margin: auto;    
}
#iconText-login {
    position: absolute;
    height: 40px;
    width: 40px;
    background-color: transparent;
    border: none;
    left: 0;
    top: 24px;
}
#iconText-login:before {
    content: '\f007'; /* fa-user */
    font-family: FontAwesome;
    color: #036;
    font-size: 28px; /* dont want this to scale with text hence the px */
    padding: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    background: none;
    cursor: pointer;
    z-index: 999;
    top: -28px;
    right: 0;
    font-weight: bold;
}
#iconText-cart {
    position: absolute;
    height: 40px;
    width: 40px;
    background-color: transparent;
    border: none;
    left: 0;
    top: 24px;
}
#iconText-cart:before {
    content: '\f218'; /* fa-cart-down */
    font-family: FontAwesome;
    color: #036;
    font-size: 30px; /* dont want this to scale with text hence the px */
    padding: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    background: none;
    cursor: pointer;
    z-index: 989;
    top: -30px;
    right: 0;
    font-weight: bold;
}
#iconText-contact {
    position: absolute;
    background-color: transparent;
    border: none;
    left: 0;
    top: 18px;

}
#contact-button img {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
}

/*
#iconText-contact:before {
    content: '\f075'; 
    font-family: FontAwesome;
    color: #036;
    font-size: 28px;
    padding: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    background: none;
    cursor: pointer;
    z-index: 999;
    top: -30px;
    right: 0;
    font-weight: bold;
}
*/

#iconText-home {
    position: relative;
    background-color: transparent;
    border: none;
    padding: 7px 0 6px 0;
}

/* Now using SVG
#iconText-home:after {
    content: '\f015';
    font-family: FontAwesome;
    color: #036;
    font-size: 22px;
    padding: 0;
    background: none;
    cursor: pointer;
    z-index: 999;
    font-weight: bold;
}
*/

.iconText {
    color: #036;
    font-size: 12px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center; 
    font-weight: bold;
    padding: 1px 0;
}

.top-banner {
    width: 100%;
    min-height: 200px;
    max-height: 200px;
    background-color: white;
    float: left;
    /*
    background-image: url(../images/banner1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    */
    position: relative;
}    
.top-banner img {
    width: auto;
}
.top-button {
    cursor: pointer; 
}
.top-button a {
    text-decoration: none;
}
.search-box {
    padding: 5px;
    font-size: 1rem;
    max-width: 165px;
}
.hamburger {
    display: none;
    position: absolute;
    left: 20px;
    bottom: 12px;
    height: 40px;
    width: 40px;
    /* background-color: white; */
    font-size: 36px;
    cursor: pointer;
}
.hamburger:after {
    content: '\f0c9'; /* fa-bars */
    color: #036;
    font-family: FontAwesome;
}
.open {
    display: block;
}
.main-content {    
    text-align: left;
    float: left;
    width: 70%;  
    margin-bottom: 6em;
}
.main-content h1 {
    text-align: center;
    margin: 1.5em 0 1.5em 0;
}
.main-content p {
    padding: 0 3em;
    margin: 0 0 1em 0;
    font-weight: normal;
    font-size: 1.25rem;
    font-family: sans-serif;
}
.main-content p:last-of-type {
    margin-bottom: 4em;
}
.content {
    width: 100%;
    overflow-x: hidden;
    display: block;
} 
.sidebar {
    text-align: center;
    float: left;
}
.sidebar.left {
    width: 15%;
}
.sidebar.right {
    width: 15%;
}
.sidebar ul {
    margin: 30px 0 20px 30px;
    padding: 0;
}
.sidebar li {
    padding: 10px;
    text-align: left;
}
.footer {
    text-align: center;
    min-height: 300px; 
    width: 100%;
    /* float: left; */
}
.illustration-left {
    margin: auto;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -74px;
}
.container { 
    border: 1px solid #454545; 
    border-radius: 3px; 
    padding: 20px; 
    margin: 30px auto; 
    overflow: hidden; 
    background-color: rgba(255,255,255,.7);
    box-shadow: 10px 10px 15px #999;
    min-height: 300px;
    max-width: 1600px;
}   
.container a.standard-button {
    border-style: none;
    padding: 0;
    color: #fff;
    background-color:#036;
    color: #eee;
    border: none;
    margin-top: 10px;
    border-radius: 4px;
    cursor: pointer;
    padding: 10px 25px;
    font-size: 16px;
    text-decoration: none;
}
.more-button .standard-button {
    background-color: cornflowerblue !important;
    margin: 20px !important;
}
.button-box-container {
    padding: 50px;
}
.button-box {
    width: 100%;
    padding: 10px;
    margin: 20px;
}
.button-box.specs-button {
    padding: 20px 0;
    margin: 20px 0;
}
.button-box-right {
    position: absolute;
    right: 0;
    top: 0;
}
.box {
    margin-bottom: 30px;
}  

.wide-inner-box {
    padding: 20px;
    margin: 50px;
    border: 1px solid #ccc;
    display: block;
    overflow: hidden;
    border: 1px solid #ccc;
}  
.inner-box-50 {
    width: 40%;
    float: left;
    padding: 20px;
    border: 1px solid #ccc;
    margin: 20px;
    min-width: 300px;
}
.tiny-images {
    display: flex;
	flex-flow: row;
	align-items: flex-start;
	flex-wrap: nowrap;
    position: relative;
    overflow: hidden;
	min-height: auto;
	min-width: 150px;
}
.tiny-images img {
    width: 100%;
    height: auto;
    display: block;
	border: 1px solid black;
}
.tiny-images img:before,
.tiny-images img:after {
	display: none;
}
.description-item {
    padding: 15px 0;
}
.more-button {
    display: block;
    float: left;
    margin: 20px 0 !important;
    width: 100%;
}
.desc-bloc-wt {
    padding: 10px;
    background-color: white;
}
.desc-bloc-gr {
    padding: 10px;
    background-color: #ddd;
}
.head {
    float: left;
    width: 20%;
    min-width: 100px;
    font-weight: bold;
}

/* HOME PAGE STYLES */
.home .container {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0;
}
.home h1.page-title {
    margin: 0;
}
#home-video {
    display: block;
    width: 100%;
    object-position: top;
    object-fit: contain;
    box-shadow: 10px 10px 15px #999;
    max-width: 1200px;
    min-width: 600px;
    margin: auto;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;    
    /* cursor: pointer; */
}
/* exampleOne page for debugging only */
.home.exampleone .container {
  padding: 20px;
}

/* ERROR PAGE STYLES */
.container.error404 {
    max-width: 920px;
    padding: 0;
    margin: 30px auto;
}
.container.error404 .box {
    min-height: calc(100vh - 200px);
}
.error-box {
    position: relative; 
}
.error-page-text {
    margin: 20px;
    min-width: 300px;
    min-height: 430px;
    position: relative;
    height: calc(100vh - 300px);
    overflow: hidden;    
}
.error-page-text div {
    max-width: 400px;
    width: 100%;
    max-height: 300px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    display: block;    
}
.error-page-image {
    padding: 20px;
    min-width: 300px;
    min-height: 430px;
    position: relative;
    height: auto;
}
.error-page-image img {
    max-width: 400px;
    width: 100%;
    height: auto;
    margin: auto;
    display: block;
    box-shadow: 5px 5px 10px #666;
}
.error-page-text {
    min-height: calc(100vh - 400px);
    position: relative;
    margin: 20px;
}
div[class*=' error-page-'],
div[class^='error-page-'] {
    width: 45%;
    float: left;
}

/* LOGIN STYLES */
h2.display-error {
    text-align: center;
    margin: 17px 0;
}
.container.login {
    border: none;
    background-color: transparent;
    box-shadow: none;
}
.container .box {
    /* border: 1px solid #ddd; */
    border: none;
    /* padding: 0 20px 0 40px; */
    padding: 0;
    margin: 0; /* was 30 */
    /* max-width: 400px; */
    /* border-radius: 4px; */
    min-width: 300px;   
    min-height: calc(100vh - 320px);
    /* max-width: 350px; */
    position: relative;
	/* overflow-y: scroll; */
}
.container.login .box {
    margin: auto;
    position: relative;
    height: calc(100vh - 230px);
    min-height: 500px;
    max-width: 400px;
    min-width: 300px;
}
.login-box {
    background-color: rgba(255,255,255,.5);
    display: block;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 50px;
    max-height: 450px;
    min-width: 380px;
    min-height: 450px;
    box-shadow: 10px 10px 15px #999;
    border-radius: 3px;    
}

.container.login .top-box {
    width: 100%;
    padding: 10px 0 10px 40px;
    background: #036;
    margin: 0;
    display: block;
    width: auto;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    color: #eee;
}
.grid .container {
    padding: 0;
}
.grid .container input.input {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px 0 10px 15px;
    margin-top: 10px;
    border-radius: 4px;
    font-size: 1.13rem;
    min-width: 28ch;
}
.grid .container input[type="submit"] {
    background-color: #036;
    color: #eee;
    margin-bottom: 20px;
    border-radius: 4px;       
    cursor: pointer;
    padding: 10px 25px;  
    font-size: 1rem;
}
.grid .container input[type="submit"]:hover {
    color: #fff;
}
#loginForm div {
    padding: 10px 0 10px 20px;
}
#loginForm div.low-box {
    padding: 0 0 10px 20px;
}
#loginForm div.error-message {
    padding: 0;
}
#loginForm p {
    padding: 0;
    margin: 0;
}
#loginForm span.label {
    padding: 0px 10px 0 0;
    vertical-align: middle;
    display: block;
}
.error {
    opacity: 0;    
    background-color: pink;
    padding: 20px;
    border-radius: 0;    
    
    -moz-animation-name: error-animate;
    -webkit-animation-name: error-animate;
    -o-animation-name: error-animate;
    animation-name: error-animate;
    
    -moz-animation-delay: 0;
    -webkit-animation-delay: 0;
    -o-animation-delay: 0;
    animation-delay: 0;
    
    -moz-animation-duration: .6s;
    -webkit-animation-duration: .6s;
    -o-animation-duration: .6s;
    animation-duration: .6s;
    
    -moz-animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    -o-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    
    font-weight: normal;
    color: black;
    display: block;
}
@-webkit-keyframes error-animate {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes error-animate {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes error-animate {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes error-animate {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
.success {
    opacity: 0;    
    background-color: forestgreen;
    padding: 20px;
    border-radius: 0;    

    -moz-animation-name: success-animate;
    -webkit-animation-name: success-animate;
    -o-animation-name: success-animate;    
    animation-name: success-animate;

    -moz-animation-delay: 0;
    -webkit-animation-delay: 0;
    -o-animation-delay: 0;    
    animation-delay: 0;
    
    -moz-animation-duration: .1s;
    -webkit-animation-duration: .1s;
    -o-animation-duration: .1s;    
    animation-duration: .1s;
    
    -moz-animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    -o-animation-timing-function: ease-in-out;    
    animation-timing-function: ease-in-out;
    
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;    
    animation-fill-mode: forwards;
    
    font-weight: normal;
    color: white;
    display: block;
}
@-webkit-keyframes success-animate {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes success-animate {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes success-animate {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes success-animate {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
/* road background */
.background-road .site-container {
    background-image: url('../images/white-road.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
    padding-bottom: 20px;
}

.grid .footer {
    margin: 0;
    background-color: transparent;
}
.grid .top-box {
    width: 100%;
    padding: 1px 0 10px 20px;
    background: skyblue;
    margin: 0;
    display: block;
    width: auto;
} 

/* END GRID STYLES */

/* WAIT LOADER ANIMATIONS */

/* horizontal dots */
.loader-hd,
.loader-hd:before,
.loader-hd:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  
  -moz-animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  
  -moz-animation: load-horiz-dots 1.8s infinite ease-in-out;
  -webkit-animation: load-horiz-dots 1.8s infinite ease-in-out;
  -o-animation: load-horiz-dots 1.8s infinite ease-in-out;
  animation: load-horiz-dots 1.8s infinite ease-in-out;
}
.loader-hd {
  color: rgba(255,255,255,.5);
  font-size: 10px;
  margin: 80px auto;
  position: relative;
  text-indent: -9999em;
  transform: translateZ(0);
  
  -moz-animation-delay: -0.16s;
  -webkit-animation-delay: -0.16s;
  -o-animation-delay: -0.16s;
  animation-delay: -0.16s; 
  
  position: absolute;
  left: 50%;
  top: 50%;
}
.loader-hd:before,
.loader-hd:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader-hd:before {
  left: -3.5em;

  -moz-animation-delay: -0.32s;
  -webkit-animation-delay: -0.32s;
  -o-animation-delay: -0.32s;  
  animation-delay: -0.32s;
}
.loader-hd:after {
  left: 3.5em;
}
@-webkit-keyframes load-horiz-dots {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@-moz-keyframes load-horiz-dots {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@-o-keyframes load-horiz-dots {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load-horiz-dots {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

/* PLAIN CONTAINER STYLES */ 
.plain table {
    border-collapse: collapse; 
    border: 0; 
    width: 934px; 
    box-shadow: 1px 2px 3px #ccc;
}
.plain .center {
    text-align: center;
}
.plain .center table {
    margin: 1em auto; 
    text-align: left;
}
.plain .center th {
    text-align: center !important;
}
.plain td, .plain th {
    border: 1px solid #666; 
    font-size: 100%; 
    vertical-align: baseline; 
    padding: 4px 5px;
    white-space: break-spaces;
}
.plain .container {
    border: 1px solid #454545;
    border-radius: 3px;
    padding: 20px;
    margin: 33px;
    overflow: hidden;
    min-width: 300px;
}
.plain .container a {
    color: #454545;
}
.plain .container table {
    font-size: 1rem;
    margin-top: 20px;
}
.plain .container table thead td {
    background-color: #ccc;
    padding: 4px 10px;
    font-weight: bold;
}
.plain .container table tbody td {
    padding: 4px 10px;
}

.plain .container .box {
    border: 1px solid #ddd;
    padding: 10px 0 40px 30px;
    margin: 20px auto;
    max-width: unset;
    min-width: unset;
    overflow: auto;
}
.plain .container.login .box {
    max-width: 350px;
    min-width: 350px;
}
.plain .container input.input {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px 0 10px 15px;
    margin-top: 10px;
    border-radius: 4px;   
    font-size: 1.13rem;
    min-width: 28ch;
}
/*
.plain .container input[type="submit"] {
    background-color: #ccc;
    border: 1px solid #ccc;
    border-radius: 4px;       
    cursor: pointer;
    padding: 10px 25px;
    font-size: 1rem;
}
*/
.plain .container input[type="submit"]:hover {
    background-color: #222;
    color: #fff;
}
.plain .container button {
    background-color: #ccc;
    border: 0;
    padding: 5px 10px;
    cursor: pointer;
}
.plain .container button:hover {
    background-color: #222;
    color: #fff;
}
.plain .container .phptable {
    width: 960px;
}
.plain .container .phptable table {
    font-size: 1.13em;
}

/* DIV TABLE STYLES */

.table {
    display: table;
    width: 100%;
    margin-bottom: 10px;
}
.table-row {
    display: table-row;
}
.table-column {
    float: left;
    padding: 10px 0;
}
.table-head {
    display: table-header-group;
}
.table-body {
    display: table-row-group;
}
.table-header {
    padding: 10px;
    text-align: justify;
    border: 1px solid #aaa;
    background: #eee;
}
.table-data {
    display: table-cell;
}
.table-data input {
    border-radius: 0;
    padding: 10px;
    border: 1px solid #aaa;
}

/* VTABLE CSS TABLE */
.vcol {
    display: table-cell;
    overflow: hidden;
    max-width: 200px;
    min-width: 140px;
}
.vdub {
    display: inline-block;
    margin-bottom: 15px;
    margin-right: 15px;
    box-shadow: 3px 3px 5px #999;
}
.vdub h3 {
    background-color: #036;
    color: #eee;
    padding: 10px;
    margin: 0;
}
.vd.heading {
    background-color: #eee;
}
.vd {
    border: 1px solid #aaa;
    padding: 10px;
    white-space: nowrap;
}

/* PHPINFO PAGE */
.phpinfo img {
    width: auto;
}
/*
.phpinfo .top-nav a {
    color: #000 !important;
    text-decoration: none !important;
}

.phpinfo a:hover {
    text-decoration: none !important;
}
.phpinfo a:link {
    color: #000 !important;
    text-decoration: none !important;
}
.phpinfo a {
    background-color: transparent !important;
}
*/
.phpinfo a:link {
    color: #036 !important;
    background-color: transparent !important;
    text-decoration: none !important;
}

/* CONTACT PAGE */

.contact .box.center {
    position: relative;
}

.right-box {
    width: 49%;
    display: block;
    float: left;
    position: relative;
    overflow: visible;
    min-width: 350px;
    min-height: 600px; 
}
.card,
.contact-info {
    max-width: 400px;
    min-width: 350px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 300px;
    margin: auto;
}
.card img {
    box-shadow: 4px 4px 7px #aaa;
}
.left-box {
    width: 49%;
    display: block;
    float: left;
    position: relative;
    min-height: 500px;
    min-width: 450px;
}
.contact-info img {
    max-width: 400px;
    height: auto;
    width: 100%;
    box-shadow: 4px 4px 15px #666;
}
.line {
    float: left;
    width: 100%;
    margin-bottom: 30px;
    border: 1px solid #ccc;
    min-width: 310px;
    box-shadow: 4px 4px 7px #aaa;
}
.line-heading {
    background-color: #aaa;
    padding: 10px;
}
.line-heading h3 {
    margin: 0;
    padding: 0;
    color: #eee;
}
.line-text {

    padding: 10px;
}
.line-text h2 {
    margin: 0;
    padding: 0;
    font-size: 1.4rem;
    color: #036;
}

/*-------- new left info -----------*/
.contact-info {
	background-image: url('../images/contact-info-back.jpg');
	max-height: 400px;
	width: 330px;
	max-width: 330px;
	min-width: 330px;
}
.two-row-box {
	padding: 15px 0 0 15px;
}
.two-row-box.first {
	padding: 20px 0 0 15px;
}
.txt-hdr-box {
	height: auto;
	width: fit-content;
	background-color: green;
	display: flex;
	flex-direction: row;
	align-items: center;	
}
.txt-hdr {
	color: white;
	margin: auto;
	padding: 10px 20px;
	font-weight: bold;
}
.txt-box {
	width: 300px;
	height: auto;
	background-color: white;
	display: flex;
	align-items: center;
	flex-direction: row;	
}
.txt {
	margin: auto;
	padding: 10px 0;
	font-weight: bold;
	font-size: 1.1em;
}


/* DISPLAY PAGE and MID HEADER MENU */
#mid-nav {
    position: sticky;
    top: 38px;
    z-index: 999;
}
.mid-nav ul {
    display: block;
    background-color: #ccc;
    margin: 0;
    padding: 5px 0 0 10px;
}
.mid-nav li {
    display: inline-block;
    padding-bottom: 5px;
}
.mid-nav li:after {
    content: ' |';
    color: #999;
}
.mid-nav li:last-child:after {
    content: '';
}
.mid-nav a {
    color: #036;
    text-decoration: none;
    font-weight: bold;
    font-size: .8rem;
}
.display-lightgallery img {
    width: 100%;
    max-width: 200px;
    height: auto;
   
} 
.display .active,
.map .active {
    text-decoration: underline;
}    
/* INVENTORY PAGE & some DISPLAY PAGE */

.inventory h2 {
    padding: 0;
}
.inventory .inventory.box,
.search .search.box {
    margin: 1rem;
    min-width: 320px;

}
.display h1.page-title {
    margin: 0;
}
.inventory table,
.display table {
    border-collapse: collapse;
    margin: 30px 0;
    padding: 0;
    table-layout: auto;
    width: 90%;
    font-weight: normal;
}

.inventory table caption {
    font-size: 1.5em;
    margin: .5em 0 .75em;
}
.inventory table caption.trucks-caption,
.inventory table caption.trailers-caption,
.inventory table caption.cranes-caption,
.inventory table caption.trenchers-caption {
    text-align: left;
    background-color: #ddd;
    padding: 20px;
    margin: 0;
    font-size: 1.25rem;
    font-weight: bold;
    color: #036;
    box-shadow: 3px 0px 5px #999
}
.inventory table caption.trenchers-caption a {
	color: #036;
}
.inventory table tr,
.display table tr {
    padding: .35em;
}

.inventory table th,
.inventory table td,
.display table th,
.display table td {
    padding: .625em;
    text-align: center;
    border: 1px solid #ccc !important;
}
.inventory table td,
.display table td {
    padding: 10px !important;
}
.inventory table td::before,
.display table td::before {
    text-shadow: none;
}
.inventory table td[data-label="VIN"],
.display table td[data-label="VIN"] {
    font-weight: bold;
    background: #036;
    color: #eee;
}
.inventory table td[data-label="VIN"] a {
	color: #eee;
}
.inventory table th,
.display table th {
    white-space: nowrap;
    background: #036;
    color: #efefef;
}
.inventory table td[data-label="Pictures"] {
    text-decoration: underline;
}
.sold {
	color: red;
	font-weight: bold;
}
/* END INVENTORY PAGE */


/* TRUCKS AND TRAILERS PAGES */

.trucks h2,
.trailers h2,
.cranes h2,
.trenchers h2 {
    padding: 0 20px;
    color: #036;
}
.home table,
.trucks table, 
.trailers table,
.cranes table,
.trenchers table {
    border: 0;
    box-shadow: none !important;  
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    table-layout: auto;
    width: 100%;
    font-weight: normal;    
    
}
.home table caption,
.trucks table caption,
.trailers table caption,
.cranes table caption,
.trenchers table caption {
    font-size: 1.3rem;
}
.home table thead,
.trucks table thead,
.trailers table thead
.cranes table thead,
.trenchers table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
.home table tr,
.trucks table tr,
.trailers table tr,
.cranes table tr,
.trenchers table tr {
    /* border: 1px solid #ccc; */
    display: block;
    margin: 1rem;
    /* padding: 15px; */
    background-color: #ccc;
    border-radius: 0;
    max-width: 300px;
    float: left;
    min-width: 250px;
    width: 100%;
    box-shadow: 3px 3px 5px #999;
}
.home table td,
.trucks table td,
.trailers table td,
.cranes table td,
.trenchers table td {
    display: block;
    text-align: right;
    background: linear-gradient(90deg, #eee 50%, #fff  50%);
    padding: 7px 10px !important;
    
}
.home table td::before,
.trucks table td::before,
.trailers table td::before,
.cranes table td::before,
.trenchers table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
}
.home table td:last-child,
.trucks table td:last-child,
.trailers table td:last-child,
.cranes table td:last-child,
.trenchers table td:last-child {
   /* border-bottom: 0; */
}
.home table td:first-child,
.trucks table td:first-child,
.trailers table td:first-child,
.cranes table td:first-child,
.trenchers table td:first-child {
   border-bottom: 1px solid #666;
}
.home table td[data-label="VIN"],
.trucks table td[data-label="VIN"],
.trailers table td[data-label="VIN"],
.cranes table td[data-label="VIN"],
.trenchers table td[data-label="VIN"] {
    font-weight: bold;
    background: #036;
    color: #eee;
}
.home table td[data-label="VIN"] a,
.trucks table td[data-label="VIN"] a,
.trailers table td[data-label="VIN"] a,
.cranes table td[data-label="VIN"] a,
.trenchers table td[data-label="VIN"] a {
    font-weight: bold;
    background: #036;
    color: #eee;
}
/* for pgwslideshow not used 
.thumbs {
    height: 292px;
    width: auto;
}
*/
/*
.thumbs img {
    max-height: 70px;
    width: auto;
}
*/
.home table td.thumbs,
.trucks table td.thumbs,
.trailers table td.thumbs,
.cranes table td.thumbs,
.trenchers table td.thumbs {
    padding: 0 !important;
    border: 1px solid #666;
    border-radius: 0;
    background: none;
}
/* TRUCKS AND TRAILERS LIGHTGALLERY */
.lightgallery {
    display: block;
    position: relative;
    overflow: hidden;
}
.lightgallery img {
    width: 25%;
    height: auto;
    display: block;
    float: left;
}

#lg-share {
    display: none;
}
.lg-fullscreen.lg-icon {
    display: none;
}

/* MAPS PAGES */
.map h1.page-title {
    margin: 0;
}
.map .content {
    background-image: url('../images/white-road.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;    
}
.map .container {
    background-color: #eeefea;
    max-width: 1600px;
    margin: 33px auto;
}

/* NEWS PAGES */
.news-container {
    margin: -20px;
}
.post {
    padding: 10px 50px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin: 0 10px 20px;
}
.post-head {
    padding: 20px 0;
    position: relative;
}
.feed-title-container {
    width: 100%;
    display: block;
    overflow: hidden;
}
h1.feed-title {
    text-align: left !important;
    text-decoration: overline underline;
    background-color: #ccc;
    float: left;
    padding: 10px;
    border-radius: 4px;
    margin-left: 10px;
}
.post-exerpt {
    font-size: 1.1rem;
    line-height: 1.6rem;
}
.news-link {
    display: block;
    overflow: hidden;
}

.news-link .standard-button {
    display: block;
    float: left;
    margin-top: 20px !important;
    margin-bottom: 20px;
}
.post-head .date,
.post-head .author {
    font-family: Times New Roman;
    font-weight: bold;
    color: 
    #999;
}
a.item-title {
    position: relative;
}
a.item-title::after {
    position: absolute;
    font-family: FontAwesome;
    content: '\f08e';
    right: -20px;
    top: 3px;
    font-size: .9rem;
}
.news-link a {
    position: relative;
    padding: 10px 35px 10px 25px !important;    
}
.news-link a::after {
    position: absolute;
    font-family: FontAwesome;
    content: '\f08e';
    right: 11px;
    bottom: 12px;
    font-size: 12px;
}



/* HOVER EFFECTS */

/* Middle out underline */
/* MAIN MENU PAGE ACTIVE STYLES */

.home .top-button.hvr-mid a:before,
.trailers .topnav-trailers.hvr-mid a:before,
.trucks .topnav-trucks.hvr-mid a:before,
.cranes .topnav-cranes.hvr-mid a:before,
.trenchers .topnav-trenchers.hvr-mid a:before,
.inventory .topnav-inventory.hvr-mid a:before,
.news .topnav-news.hvr-mid a:before,
.contact .topnav-contact.hvr-mid a:before,
.grid .topnav-grid.hvr-mid a:before,
.phpinfo .topnav-phpinfo.hvr-mid a:before,
.exampleone .topnav-exampleone.hvr-mid a:before {
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
    opacity: 1;
}
.hvr-mid a:hover::before {
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -o-transform: scaleX(1);    
    transform: scaleX(1);
    opacity: 1;
}
.hvr-mid a:before {
    content: "";
    position: absolute;
    width: 100%; 
    height: 3px;
    bottom: 0;
    left: 0;
    right: 0;
    background: #036;
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -o-transform: scaleX(0);    
    transform: scaleX(0);
    -webkit-transition: -webkit-transform .3s ease-in-out, opacity .1s ease-in-out;
    -moz-transition: -moz-transform .3s ease-in-out, opacity .1s ease-in-out;
    -o-transition: -o-transform .3s ease-in-out, opacity .1s ease-in-out;
    transition: transform .3s ease-in-out, opacity .1s ease-in-out;
    -webkit-transition-delay: 0;
    -moz-transition-delay: 0;
    -o-transition-delay: 0;
    transition-delay: 0;
    z-index: -1;    
    opacity: 0;
}
.hvr-mid a {
    backface-visibility: hidden;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    overflow: hidden;
    position: relative;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);    
    -o-transform: translateZ(0);
    transform: translateZ(0);
    vertical-align: bottom;
    padding: 0;
    text-decoration: none;	   
    padding: 10px 0;
}


/* ANIMATIONS */

/* Header banner text */

.header-banner ul {
    position: relative;
    min-height: 70px;
    margin: auto;
}
.header-banner li {
    display: none;
}
.home .header-banner li {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    backface-visibility: hidden;
    opacity: 1; /* make opacity 0 if using animation below */
}

/*
.home .header-banner li:nth-of-type(1) {
    -webkit-animation-name: banner-slide;
    -moz-animation-name: banner-slide;
    -o-animation-name: banner-slide;    
    animation-name: banner-slide;
    
    -webkit-animation-duration: 24s;
    -moz-animation-duration: 24s;
    -o-animation-duration: 24s;    
    animation-duration: 24s; /* total animation time */
/*    
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    o-animation-fill-mode: both;    
    animation-fill-mode: both;
    
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-timing-function: ease-in-out;
    -o-animation-timing-function: ease-in-out;    
    animation-timing-function: ease-in-out;
    
    -webkit-animation-delay: 0;
    -moz-animation-delay: 0;
    -o-animation-delay: 0;    
    animation-delay: 0; /* staggered start */
/*    
    -webkit-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    -o-animation-iteration-count: 1;    
    animation-iteration-count: 1; 
}
*/

.home .header-banner li:nth-of-type(2) {
    display: none;
}
.header-banner li:nth-of-type(2) {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
@-webkit-keyframes banner-slide {
    0% {
        opacity: 0;
        transform: translate3d(20%,0,0);
    }
    /* 2 seconds in */
    8.33% {
        opacity: 1;
        transform: translate3d(0,0,0);
    }
    /* sit around forever */
    100% {
        opacity: 1;
        transform: translate3d(0,0,0);    
    }
}
@-moz-keyframes banner-slide {
    0% {
        opacity: 0;
        transform: translate3d(20%,0,0);
    }
    /* 2 seconds in */
    8.33% {
        opacity: 1;
        transform: translate3d(0,0,0);
    }
    /* sit around forever */
    100% {
        opacity: 1;
        transform: translate3d(0,0,0);    
    }
}
@-o-keyframes banner-slide {
    0% {
        opacity: 0;
        transform: translate3d(20%,0,0);
    }
    /* 2 seconds in */
    8.33% {
        opacity: 1;
        transform: translate3d(0,0,0);
    }
    /* sit around forever */
    100% {
        opacity: 1;
        transform: translate3d(0,0,0);    
    }
}
@keyframes banner-slide {
    0% {
        opacity: 0;
        transform: translate3d(20%,0,0);
    }
    /* 2 seconds in */
    8.33% {
        opacity: 1;
        transform: translate3d(0,0,0);
    }
    /* sit around forever */
    100% {
        opacity: 1;
        transform: translate3d(0,0,0);    
    }
}

/* Poster text */
.video-wrap {
    max-width: 1200px;
    margin: auto;
    display: block;
    overflow: hidden;
    height: auto;
    position: relative;
}
.poster {
    position: absolute;
    z-index: 9;
    max-width: 1200px;
    width: 100%;
    text-align: center;
    bottom: 0;
    top: 0;
    margin: auto;
    left: 0;
    right: 0;
    max-height: 70px;
}
.poster a {
    color: white;
    font-size: 24px;
    font-size: 3vmin;
    font-weight: bold;
    text-decoration: none;
    background-color: #036;
    padding: 10px 30px;
    border-radius: 4px;
    text-shadow: none;
    box-shadow: 0px 0px 20px white;
}
.poster span {
    width: 100%;
    display: block;
}
li.poster {
    color: white;
    font-size: 48px;
    font-size: 5vmin;
    font-weight: bold;
    text-shadow: 4px 4px 2px black;
    text-decoration: none;
}
.poster ul {
    position: relative;
    min-height: 70px;
    margin: auto;
	z-index: 0;
}
.poster li {
    display: none;
}
.home .poster li {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    backface-visibility: hidden;
    opacity: 0;
	z-index: 0;
}
.home .poster li:nth-of-type(1) {
    -webkit-animation-name: poster-slide;
    -moz-animation-name: poster-slide;
    -o-animation-name: poster-slide;    
    animation-name: poster-slide;
    
    -webkit-animation-duration: 33s;
    -moz-animation-duration: 33s;
    -o-animation-duration: 33s;    
    animation-duration: 33s; /* total animation time */
    
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    o-animation-fill-mode: both;    
    animation-fill-mode: both;
    
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-timing-function: ease-in-out;
    -o-animation-timing-function: ease-in-out;    
    animation-timing-function: ease-in-out;
    
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    -o-animation-delay: 0s;    
    animation-delay: 0s; /* staggered start */
    
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;    
    animation-iteration-count: infinite; 
}
.home .poster li:nth-of-type(2) { 
    -webkit-animation-name: poster-slide;
    -moz-animation-name: poster-slide;
    -o-animation-name: poster-slide;    
    animation-name: poster-slide;
    
    -webkit-animation-duration: 33s;
    -moz-animation-duration: 33s;
    -o-animation-duration: 33s;    
    animation-duration: 33s; /* total animation time */
    
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    o-animation-fill-mode: both;    
    animation-fill-mode: both;
    
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-timing-function: ease-in-out;
    -o-animation-timing-function: ease-in-out;    
    animation-timing-function: ease-in-out;
    
    -webkit-animation-delay: 11s;
    -moz-animation-delay: 11s;
    -o-animation-delay: 11s;    
    animation-delay: 11s; /* staggered start */
    
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;    
    animation-iteration-count: infinite;     
    
    
}
.home .poster li:nth-of-type(3) {    
    -webkit-animation-name: poster-slide;
    -moz-animation-name: poster-slide;
    -o-animation-name: poster-slide;    
    animation-name: poster-slide;
    
    -webkit-animation-duration: 33s;
    -moz-animation-duration: 33s;
    -o-animation-duration: 33s;    
    animation-duration: 33s; /* total animation time */
    
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;    
    animation-fill-mode: both;
    
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-timing-function: ease-in-out;
    -o-animation-timing-function: ease-in-out;    
    animation-timing-function: ease-in-out;
    
    -webkit-animation-delay: 22s;
    -moz-animation-delay: 22s;
    -o-animation-delay: 22s;    
    animation-delay: 22s; /* staggered start */
    
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;    
    animation-iteration-count: infinite;     

}
@-webkit-keyframes poster-slide {
    0% {
        opacity: 0;
		z-index: 0;
        -webkit-transform: translate3d(20%,0,0);
        transform: translate3d(20%,0,0);
    }
    /* wait 1 second */
    3.03% {
        opacity: 0;
        -webkit-transform: translate3d(20%,0,0);
        transform: translate3d(20%,0,0);
    }
    /* 2 seconds in */
    9.09% {
        opacity: .99;
		z-index: 99;
        -webkit-transform: translate3d(0,0,200px);
        transform: translate3d(0,0,0);
    }
    /* sit for 6 seconds */
    27.27% {
        opacity: .99;
        -webkit-transform: translate3d(0,0,200px);
        transform: translate3d(0,0,0);        
    }
    /* 2 seconds out */
    33.33% {
        opacity: 0;
		z-index: 0;
        -webkit-transform: translate3d(-20%,0,0);
        transform: translate3d(-20%,0,0);
    }
    /* sit around for 21 seconds and repeat */
    100% {
        display: none;
        opacity: 0;
        -webkit-transform: translate3d(20%,0,0);
        transform: translate3d(20%,0,0);    
    }
}
@-moz-keyframes poster-slide {
    0% {
        opacity: 0;
		z-index: 0;
        -moz-transform: translate3d(20%,0,0);
        transform: translate3d(20%,0,0);
    }
    /* wait 1 second */
    3.03% {
        opacity: 0;
        -moz-transform: translate3d(20%,0,0);
        transform: translate3d(20%,0,0);
    }
    /* 2 seconds in */
    9.09% {
        opacity: 1;
		z-index: 99;
        -moz-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }
    /* sit for 6 seconds */
    27.27% {
        opacity: 1;
        -moz-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);        
    }
    /* 2 seconds out */
    33.33% {
        opacity: 0;
		z-index: 0;
        -moz-transform: translate3d(-20%,0,0);
        transform: translate3d(-20%,0,0);
    }
    /* sit around for 21 seconds and repeat */
    100% {
        display: none;
        opacity: 0;
        -moz-transform: translate3d(20%,0,0);
        transform: translate3d(20%,0,0);    
    }
}
@-o-keyframes poster-slide {
    0% {
        opacity: 0;
		z-index: 0;
        -o-transform: translate3d(20%,0,0);
        transform: translate3d(20%,0,0);
    }
    /* wait 1 second */
    3.03% {
        opacity: 0;
        -o-transform: translate3d(20%,0,0);
        transform: translate3d(20%,0,0);
    }
    /* 2 seconds in */
    9.09% {
        opacity: 1;
		z-index: 99;
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }
    /* sit for 6 seconds */
    27.27% {
        opacity: 1;
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);        
    }
    /* 2 seconds out */
    33.33% {
        opacity: 0;
		z-index: 0;
        -o-transform: translate3d(-20%,0,0);
        transform: translate3d(-20%,0,0);
    }
    /* sit around for 21 seconds and repeat */
    100% {
        display: none;
        opacity: 0;
        -o-transform: translate3d(20%,0,0);
        transform: translate3d(20%,0,0);    
    }
}
@keyframes poster-slide {
    0% {
        opacity: 0;
		z-index: 0;
        transform: translate3d(20%,0,0);
    }
    /* wait 1 second */
    3.03% {
        opacity: 0;
        transform: translate3d(20%,0,0);
    }
    /* 2 seconds in */
    9.09% {
        opacity: 1;
		z-index: 99;
        transform: translate3d(0,0,0);
    }
    /* sit for 6 seconds */
    27.27% {
        opacity: 1;
        transform: translate3d(0,0,0);        
    }
    /* 2 seconds out */
    33.33% {
        opacity: 0;
		z-index: 0;
        transform: translate3d(-20%,0,0);
    }
    /* sit around for 21 seconds and repeat */
    100% {
        display: none;
        opacity: 0;
        transform: translate3d(20%,0,0);    
    }
}


/* Logo */
.home .spin {
    -webkit-animation-name: spin-it;
    -moz-animation-name: spin-it;
    -o-animation-name: spin-it;    
    animation-name: spin-it;
    
    -webkit-animation-duration: .4s;
    -moz-animation-duration: .4s;
    -o-animation-duration: .4s;    
    animation-duration: .4s;
    
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    o-animation-fill-mode: both;    
    animation-fill-mode: both;
    
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;    
    animation-timing-function: linear;   
    
    -webkit-animation-delay: .25s;
    -moz-animation-delay: .25s;
    -o-animation-delay: .25s;    
    animation-delay: .25s;
    
    
    backface-visibility: hidden;
    opacity: 0;
    
    -webkit-transform: scaleX(0) scaleY(0) rotate(-180deg);
    -moz-transform: scaleX(0) scaleY(0) rotate(-180deg);
    -o-transform: scaleX(0) scaleY(0) rotate(-180deg);
    transform: scaleX(0) scaleY(0) rotate(-180deg);
    
}
@-webkit-keyframes spin-it {
  from {
    -webkit-transform: rotate(-180deg) scaleX(0) scaleY(0);  
    transform: rotate(-180deg) scaleX(0) scaleY(0);
    opacity: 0;

  }
  to {
    -webkit-transform: rotate(180deg) scaleX(1) scaleY(1);
    transform: rotate(180deg) scaleX(1) scaleY(1);
    opacity: 1;
  }
}
@-moz-keyframes spin-it {
  from {
    -moz-transform: rotate(-180deg) scaleX(0) scaleY(0);
    transform: rotate(-180deg) scaleX(0) scaleY(0);
    opacity: 0;

  }
  to {
    -moz-transform: rotate(0) scaleX(1) scaleY(1);
    transform: rotate(0) scaleX(1) scaleY(1);
    opacity: 1;
  }
}
@-o-keyframes spin-it {
  from {
    -o-transform: rotate(-180deg) scaleX(0) scaleY(0);
    transform: rotate(-180deg) scaleX(0) scaleY(0);
    opacity: 0;

  }
  to {
    -o-transform: rotate(0) scaleX(1) scaleY(1);
    transform: rotate(0) scaleX(1) scaleY(1);
    opacity: 1;
  }
}
@keyframes spin-it {
  from {
    transform: rotate(-180deg) scaleX(0) scaleY(0);
    opacity: 0;

  }
  to {
    transform: rotate(0) scaleX(1) scaleY(1);
    opacity: 1;
  }
}

/* HOME PAGE MP4 */
[class^="movie-show-"],
[class*=" movie-show-"] {
    -webkit-animation-name: cine-show;
    -moz-animation-name: cine-show;
    -o-animation-name: cine-show;    
    animation-name: cine-show;
    
    -webkit-animation-duration: .5s; /* was .25 */
    -moz-animation-duration: .5s;
    -o-animation-duration: .5s;    
    animation-duration: .5s;
    
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    o-animation-fill-mode: both;    
    animation-fill-mode: both;
    
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;    
    animation-timing-function: ease-out;   
    
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    -o-animation-delay: 0s;    
    animation-delay: 0s;
    
    
    backface-visibility: hidden;
    opacity: 0;
    /* transform: scaleX(.95) scaleY(.95); */
}
.movie-show-0 {
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    -o-animation-delay: 0s;    
    animation-delay: 0s;
}
@-webkit-keyframes cine-show {
  0%{
    opacity: 0;
  }
  50% {
    opacity: .9; /* was .9 */
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes cine-show {
  0%{
    opacity: 0;
  }
  50% {
    opacity: .9;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes cine-show {
  0%{
    opacity: 0;
  }
  50% {
    opacity: .9;
  }
  100% {
    opacity: 1; 
  }
}
@keyframes cine-show {
  0%{
    opacity: 0;
  }
  50% {
    opacity: .9;
  }
  100% {
    opacity: 1;
  }
}
/* LOGIN, TRUCKS, TRAILERS & IMAGES PAGES */
[class^="anim-show-"],
[class*=" anim-show-"] {
    -webkit-animation-name: show-it;
    -moz-animation-name: show-it;
    -o-animation-name: show-it;    
    animation-name: show-it;
    
    -webkit-animation-duration: .5s;
    -moz-animation-duration: .5s;
    -o-animation-duration: .5s;    
    animation-duration: .5s;
    
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    o-animation-fill-mode: both;    
    animation-fill-mode: both;
    
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;    
    animation-timing-function: ease-out;   
    
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    -o-animation-delay: 0s;    
    animation-delay: 0s;
    
    
    backface-visibility: hidden;
    opacity: 0;
    /* transform: scaleX(.95) scaleY(.95); */
}
.anim-show-1 {
    -webkit-animation-delay: .1s;
    -moz-animation-delay: .1s;
    -o-animation-delay: .1s;    
    animation-delay: .1s;
}
.anim-show-2 {
    -webkit-animation-delay: .2s;
    -moz-animation-delay: .2s;
    -o-animation-delay: .2s;    
    animation-delay: .2s;
}
.anim-show-3 {
    -webkit-animation-delay: .3s;
    -moz-animation-delay: .3s;
    -o-animation-delay: .3s;    
    animation-delay: .3s;
}
.anim-show-4 {
    -webkit-animation-delay: .4s;
    -moz-animation-delay: .4s;
    -o-animation-delay: .4s;    
    animation-delay: .4s;
}
.anim-show-5 {
    -webkit-animation-delay: .5s;
    -moz-animation-delay: .5s;
    -o-animation-delay: .5s;    
    animation-delay: .5s;
}
.anim-show-6 {
    -webkit-animation-delay: .6s;
    -moz-animation-delay: .6s;
    -o-animation-delay: .6s;    
    animation-delay: .6s;
}
.anim-show-7 {
    -webkit-animation-delay: .7s;
    -moz-animation-delay: .7s;
    -o-animation-delay: .7s;    
    animation-delay: .7s;
}
.anim-show-8 {
    -webkit-animation-delay: .8s;
    -moz-animation-delay: .8s;
    -o-animation-delay: .8s;    
    animation-delay: .8s;
}
.anim-show-9 {
    -webkit-animation-delay: .9s;
    -moz-animation-delay: .9s;
    -o-animation-delay: .9s;    
    animation-delay: .9s;
}
.anim-show-10 {
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;    
    animation-delay: 1s;
}
@-webkit-keyframes show-it {
  0%{
    opacity: 0;
  }
  50% {
    opacity: .9;
  }
  100% {
    opacity: 1; 
  }
}
@-moz-keyframes show-it {
  0%{
    opacity: 0;
  }
  50% {
    opacity: .9;
  }
  100% {
    opacity: 1; 
  }
}
@-o-keyframes show-it {
  0%{
    opacity: 0;
  }
  50% {
    opacity: .9;
  }
  100% {
    opacity: 1; 
  }
}
@keyframes show-it {
  0%{
    opacity: 0;
  }
  50% {
    opacity: .9;
  }
  100% {
    opacity: 1; 
  }
}

/* CONTACT PAGE */
.anim-slow-left {
    
    animation-name: slow-it-left;
    -webkit-animation-name: slow-it-left;
    -moz-animation-name: slow-it-left;
    -o-animation-name: slow-it-left;    
    
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;    
    
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    o-animation-fill-mode: both;    
    
    animation-timing-function: linear;  
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    
    animation-delay: .1s;
    -webkit-animation-delay: .1s;
    -moz-animation-delay: .1s;
    -o-animation-delay: .1s;    
    
    backface-visibility: hidden;
    opacity: 0;
    
    -webkit-transform: translate3d(-20px,0,0);
    -moz-transform: translate3d(-20px,0,0);
    -o-transform: translate3d(-20px,0,0);
    transform: translate3d(-20px,0,0);
}
@-webkit-keyframes slow-it-left {
  0%{
    opacity: 0;
    -webkit-transform: translate3d(-20px,0,0);
    transform: translate3d(-20px,0,0);
  }
  50% {
    opacity: .5;
    -webkit-transform: translate3d(-10px,0,0);
    transform: translate3d(-10px,0,0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
}
@-moz-keyframes slow-it-left {
  0%{
    opacity: 0;
    -moz-transform: translate3d(-20px,0,0);
    transform: translate3d(-20px,0,0);
  }
  50% {
    opacity: .5;
    -moz-transform: translate3d(-10px,0,0);
    transform: translate3d(-10px,0,0);
  }
  100% {
    opacity: 1;
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
}
@-o-keyframes slow-it-left {
  0%{
    opacity: 0;
    -o-transform: translate3d(-20px,0,0);
    transform: translate3d(-20px,0,0);
  }
  50% {
    opacity: .5;
    -o-transform: translate3d(-10px,0,0);
    transform: translate3d(-10px,0,0);
  }
  100% {
    opacity: 1;
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
}
@keyframes slow-it-left {
  0%{
    opacity: 0;
    transform: translate3d(-20px,0,0);
  }
  50% {
    opacity: .5;
    transform: translate3d(-10px,0,0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}
.anim-slow-right {
    
    animation-name: slow-it-right;
    -webkit-animation-name: slow-it-right;
    -moz-animation-name: slow-it-right;
    -o-animation-name: slow-it-right;    
    
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;    
    
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    o-animation-fill-mode: both;    
    
    animation-timing-function: linear;  
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    
    animation-delay: .1s;
    -webkit-animation-delay: .1s;
    -moz-animation-delay: .1s;
    -o-animation-delay: .1s;    
    
    backface-visibility: hidden;
    opacity: 0;
    -webkit-transform: translate3d(20px,0,0);
    -moz-transform: translate3d(20px,0,0);
    -o-transform: translate3d(20px,0,0);
    transform: translate3d(20px,0,0);
    /* transform: scaleX(.95) scaleY(.95); */
}
@-webkit-keyframes slow-it-right {
  0%{
    opacity: 0;
    -webkit-transform: translate3d(20px,0,0);
    transform: translate3d(20px,0,0);
  }
  50% {
    opacity: .9;
    -webkit-transform: translate3d(10px,0,0);
    transform: translate3d(10px,0,0);
  }
  100% {
    opacity: 1; 
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
}
@-moz-keyframes slow-it-right {
  0%{
    opacity: 0;
    -moz-transform: translate3d(20px,0,0);
    transform: translate3d(20px,0,0);
  }
  50% {
    opacity: .9;
    -moz-transform: translate3d(10px,0,0);
    transform: translate3d(10px,0,0);
  }
  100% {
    opacity: 1; 
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
}
@-o-keyframes slow-it-right {
  0%{
    opacity: 0;
    -o-transform: translate3d(20px,0,0);
    transform: translate3d(20px,0,0);
  }
  50% {
    opacity: .9;
    -o-transform: translate3d(10px,0,0);
    transform: translate3d(10px,0,0);
  }
  100% {
    opacity: 1; 
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
}
@keyframes slow-it-right {
  0%{
    opacity: 0;
    transform: translate3d(20px,0,0);
  }
  50% {
    opacity: .9;
    transform: translate3d(10px,0,0);
  }
  100% {
    opacity: 1; 
    transform: translate3d(0,0,0);
  }
}

/* INVENTORY PAGE */
[class^="anim-up-"],
[class*=" anim-up-"] {
    -webkit-animation-name: up-it;
    -moz-animation-name: up-it;
    -o-animation-name: up-it;    
    animation-name: up-it;
    
    -webkit-animation-duration: .5s;
    -moz-animation-duration: .5s;
    -o-animation-duration: .5s;    
    animation-duration: .5s;

    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    o-animation-fill-mode: both;    
    animation-fill-mode: both;
    
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;    
    animation-timing-function: ease-out; 

    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    -o-animation-delay: 0s;    
    animation-delay: 0s;
    
    
    backface-visibility: hidden;
    opacity: 0;
    -webkit-transform: translate3d(0,20px,0);
    -moz-transform: translate3d(0,20px,0);
    -o-transform: translate3d(0,20px,0);
    transform: translate3d(0,20px,0);
}
.anim-up-1 {
    -webkit-animation-delay: .1s;
    -moz-animation-delay: .1s;
    -o-animation-delay: .1s;    
    animation-delay: .1s;
}
.anim-up-2 {
    -webkit-animation-delay: .2s;
    -moz-animation-delay: .2s;
    -o-animation-delay: .2s;    
    animation-delay: .2s;
}
.anim-up-3 {
    -webkit-animation-delay: .3s;
    -moz-animation-delay: .3s;
    -o-animation-delay: .3s;    
    animation-delay: .3s;
}
.anim-up-4 {
    -webkit-animation-delay: .4s;
    -moz-animation-delay: .4s;
    -o-animation-delay: .4s;    
    animation-delay: .4s;
}
.anim-up-5 {
    -webkit-animation-delay: .5s;
    -moz-animation-delay: .5s;
    -o-animation-delay: .5s;    
    animation-delay: .5s;
}
.anim-up-6 {
    -webkit-animation-delay: .6s;
    -moz-animation-delay: .6s;
    -o-animation-delay: .6s;    
    animation-delay: .6s;
}
.anim-up-7 {
    -webkit-animation-delay: .7s;
    -moz-animation-delay: .7s;
    -o-animation-delay: .7s;    
    animation-delay: .7s;
}
.anim-up-8 {
    -webkit-animation-delay: .8s;
    -moz-animation-delay: .8s;
    -o-animation-delay: .8s;    
    animation-delay: .8s;
}
.anim-up-9 {
    -webkit-animation-delay: .9s;
    -moz-animation-delay: .9s;
    -o-animation-delay: .9s;    
    animation-delay: .9s;
}
.anim-up-10 {
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;    
    animation-delay: 1s;
}
@-webkit-keyframes up-it {
  from {
    -webkit-transform: translate3d(0,20px,0);  
    transform: translate3d(0,20px,0);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0,20px,0);  
    transform: translate3d(0,0,0);
    opacity: 1; 
  }
}
@-moz-keyframes up-it {
  from {
    -moz-transform: translate3d(0,20px,0);  
    transform: translate3d(0,20px,0);
    opacity: 0;
  }
  to {
    -moz-transform: translate3d(0,0,0);  
    transform: translate3d(0,0,0);
    opacity: 1; 
  }
}
@-o-keyframes up-it {
  from {
    -o-transform: translate3d(0,20px,0);  
    transform: translate3d(0,20px,0);
    opacity: 0;
  }
  to {
    -o-transform: translate3d(0,0,0);  
    transform: translate3d(0,0,0);
    opacity: 1; 
  }
}
@keyframes up-it {
  from {
    transform: translate3d(0,20px,0);
    opacity: 0;
  }
  to {
    transform: translate3d(0,0,0);
    opacity: 1; 
  }
}





/*  MEDIA QUERIES  */
 
@media screen and (max-width: 1280px) {
    .main-content {
        width: 100%;
    }
    .news .sidebar.right {
        display: none; 
    }
    .news .sidebar ul {
        margin: 20px 0 20px 10px;
    }
    .news .sidebar.left {
        width: 100%;
    }    
    .news .main-content h1 {
        margin: 0 0 30px 10px;
    }
    h2.banner {
        font-size: 1.2em;
    }
}    
 
@media screen and (max-width: 1050px) {

    .inventory table,
    .display table {
        border: 0;
    }

    .inventory table caption {
        font-size: 1.3em;
    }
  
    .inventory table thead,
    .display table thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
  }
  
    .inventory table tr,
    .display table tr {
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        display: block;
        padding: 15px;
        background-color: transparent;
        border-radius: 0;
    }
    .inventory table tr:last-of-type,
    .display table tr:last-of-type {
        border-bottom: 1px solid #ccc;
    }  
    .inventory table td,
    .display table td {
        display: block;
        text-align: right;
        background: linear-gradient(90deg, #eee 50%, #fff  50%);
        padding: 7px 10px !important;
        
    }
  
    .inventory table td::before,
    .display table td::before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
    }
  
    .inventory table td:last-child,
    .display table td:last-child {
        border-bottom: 0;
    }
}

 
@media screen and (max-width: 768px) {    
	/* for apple side to side bounce */
	html {
		height  : 100%;
		overflow: hidden;
		position: relative;
	}
	body {
		height  : 100%;
		overflow: auto;
		position: relative;
	}
	/* end side to side bounce */
	
    .header {
        display: block;

    }
    .header-search {
        display: block;
        width: unset;
        padding: 5px;
    }
    .header-links {
        display: block;
        width: unset;
        text-align: right;
    }
    .header-links ul {
        margin: 0;
        padding: 5px;
    }
    .top-nav {
        position: relative;
        display: none;
    }
    #mid-nav {
        position: relative;
    }
    .top-nav li {
        display: block;
        border: 1px dashed #ccc;
    }
    .hamburger {
        display: block;      
    }
    .main-content p {
        padding: 0 1em;
    }
    .sidebar.left,
    .sidebar.right {
        width: 100%;
    }
    .main-content {
        width: 100%;
    }
    #home-button {
        padding: 0;
        margin: auto;
        width: 100%;
    }
    svg.home {
        top: 8px;
    }
    .inner-box {
        padding: 0;
        margin: 0;
        border: none;
    }
    .inner-box-50 {
        margin: 20px 0;
    }
    .wide-inner-box {
        margin: 10px;
    }
    .home table,
    .trucks table, 
    .trailers table,
    .cranes table,
	.trenchers table {
        width: 100% ;
        margin: 0 auto;
        padding: 0;
        display: block;
    }
    .home table tr,
    .trucks table tr,
    .trailers table tr,
    .cranes table tr,
	.trenchers table tr {
        width: 100%;
        max-width: 100%;
        margin: 1rem 0;
        float: none;
    }  
    /* error page */
    div[class*=' error-page-'],
    div[class^='error-page-'] {
        width: 100%;
        float: unset;
        margin: 0;
        padding: 20px 0;
    }    
    .error-page-image {
        min-height: 320px;
        height: unset;
    }
    .error-page-image img {
        margin: auto;
    }
    /* contact page */
    .left-box {
        width: 100%;
        min-width: unset;
    }
    .right-box {
        width: 100%;
    }  
	/*
	.tiny-images img {
		width: calc(25% - 5px);    
    }
	*/
	.poster a {
		display: inline-flex;
		margin-top: 15px;
	}
	
}
@media screen and (max-width: 570px) {
    .lightgallery {
        min-height: unset;
    }
}
@media screen and (max-width: 480px) {
    h1 {
        margin: 0;
    }
    /* ^ starts with and * is contains */
    .container { 
        border: none; 
        border-radius: unset; 
        padding: 33px 10px; 
        margin: 20px 0; 
    }     
    div[class^="header-"] {
        margin: 10px 0 0 0;
    }    
    .bar-top {
        top: 7px;
    }
    .box {
        margin: 0;
        padding: 0;
        border: none;
    }
    .trucks .box {
        margin: 0;
    }
    .grid .container.login .box {
        max-width: 100%;
    }
    .grid .container input.input {
        min-width: 24ch;
    }
    table {
        width: 100%;
    }
    tr {
        margin: 1rem 0;
        width: 100%;
    }   
    .inventory table,
    .display table {
        width: 100%;
    }
    .inventory table tr,
    .display table tr {
        margin: 1rem 0;
        padding: 0;
        border: none;
    }
    .display-lightgallery img {
        max-width: unset;
    }
    .inventory .inventory.box {
        margin: 0;
    }
    .inventory.box h2 {
        margin-left: 15px;
    }
    /* contact page */
    .card-text {
        padding: 0;
    }
    .vdub, .vcol {
        width: 100%;
    }
    /* protected edit pages */
    .table-column {
        width: 100%;
		overflow: hidden;
    }
    .table-data {
        display: block;
    }
    .table-data input {
        width: 100%;
    }
    .sidebar.left {
        padding-left: 20px;
    }
    .feed-title-container {
        margin-left: 30px;
    }
}

@media screen and (max-width: 425px) {

    .box {
        padding: 0;
    }
}

/* --------------------------------------------------------
 *  ONLY IF BROWSER SUPPORTS FLEX
 * --------------------------------------------------------
 */
/* 
@supports (display: flex) {
    .top-banner {
        display: flex;
        margin: 0;
        padding: 0;
    }
    .content {
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        align-items: normal;
    }
    .main-content {
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 5;
        flex-direction: column;
    }
    .main-content h1 {
        text-align: center;
    }
    .sidebar {
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
    }
    .footer {
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .menu {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-evenly;
        flex-grow: .1;
    }    
    .header {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-evenly;
        background-color: red;
    }
    .header-logo {
        display: flex;
        flex: 1;
        flex-direction: row;
        justify-content: center;
    }
    .header-banner {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: center;
    }
    .header-banner ul {
        text-align: center;
        margin: 0;
        padding: 0 5px;
    }
    .top-nav {
        display: flex;
        justify-content: center;
        
    }
    .top-nav ul {
        display: flex;
        flex-flow: wrap;
        justify-content: flex-start;
        margin: 0;
        padding: 0;
    }    
    .header-search {
        display: flex;
        flex-grow: initial;
        flex: 1;
        flex-direction: column;
        justify-content: center;
        padding: 10px;
    }
    form#search {
        display: flex;
        justify-content: flex-end;
    }
    .search-box {
        display: flex;
        flex: 3;
        flex-direction: column;
        flex-grow: unset;
    }
    .search-button {
        display: flex;
        flex: 1;
        flex-direction: column;
        padding: 2px;
        flex-grow: unset;
    }
    .header-links {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: .5;
    }
    .header-links ul {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        margin: 0;
        padding: 0;
    }
    @media screen and (max-width: 768px) {    
        .header-logo {

        }
        .top-nav {

        }
    
        .main-content {
            flex: 1 0 100%;
        }

        .sidebar {
            flex: 1 0 100%;
        }
    }
    @media screen and (max-width: 480px) {
        
    }    
    
}
*/
/* --------------------------------------------------------
 *  ONLY IF BROWSER SUPPORTS GRID
 * --------------------------------------------------------
 */
/* 
@supports (display: grid) {    
    .site-container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "top-nav"
            "top-banner"
            "content"
            "footer";     
    }
  
    .header {
        grid-area: header;  
        display: grid;
        grid-template-columns: 1fr 1fr 1fr .5fr;
        grid-template-rows: 1fr;
        grid-template-areas:
            "header-logo header-banner header-search header-links"
    }    
    .header-logo {
        grid-area: header-logo;
    }
    .header-banner {
        grid-area: header-banner;
    }    
    .header-search {
        grid-area: header-search;
    }    
    .header-l {
        grid-area: header-logo;
    }       
    .top-nav {
        grid-area: top-nav;
    }
    .top-banner {
        grid-area: top-banner;
    }
    .content {
        grid-area: content;
    }   
    .footer {
        grid-area: footer;
    }

    
    @media screen and (max-width: 768px) {    
        .header {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            grid-template-areas:
                "header-logo header-banner" 
                "header-search header-links"           
        }
        form#search {
            justify-content: center;
        }        
    }
    
    @media screen and (max-width: 480px) {
        
    }
    
    
}

*/