/*===================== 
	CSS reset/normalize 
=======================*/

/**Correct `block` display not defined in IE 8/9.**/
article,aside,details,figcaption,figure,footer,header,hgroup,
main,nav,section,summary {display: block;}
pre {white-space: pre-wrap;}
small { font-size: 80%;}


/*===================== 
	base styles 
=======================*/

html {
    -ms-text-size-adjust: 100%; 
    -webkit-text-size-adjust: 100%; 
    overflow-x: hidden;
	}

body {
	font-family: 'Rubik', sans-serif; 
    margin: 0;
	padding:0;
	}

svg:not(:root) {overflow: hidden;}
	
.clear {clear: both;}


.row:after {
    content: "";
    display: table;
    clear: both;
}

/* width */
::-webkit-scrollbar {
  width: 15px;
}

/* Track */
::-webkit-scrollbar-track {
  background:#E7E7E7;
  box-shadow: inset 0 0 10px #7C7C7C;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background:#B7B7B7;
  border-radius: 10px;
  box-shadow:0 0 10px #7C7C7C inset;
}


/*===================== 
	typography 
=======================*/

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	}
	h1 {color:#EC3033}
	h2 {color:#EC3033}
	h3 {font-size:30px}
	h4 {font-size:19px; color:#EC3033}
	h5 {font-size:18px}
	h6 {font-size:15px}

p {margin: 0;}

/*===================== 
	header styles 
=======================*/


.top-info {margin:20px}

.header-col{
    float:left;
    width:33.33%;
    text-align:center
}

.logo{width:300px}

.header-link{margin-top:50px}

.header-link a{
    color:#5C5C5C;
    text-decoration:none;
    font-size:30px;
    transition:.3s ease
}

.header-link a:hover{
    color:#EC3033
}


/*===================== 
	nav styles 
=======================*/

#menu-button{display: none;}

nav.mobile {display:none;}

.custom-navigation {
    background:#ea1a1e;
    width:100%;
    overflow:auto;
    display:block;
    padding:5px 0px 10px 0px;
}

nav.primary {
	padding:0;
	display:block;
}

nav.primary ul {
  padding: 0 !important; 
}

nav.primary ul li {
    display:inline-block;
    position: relative !important; 
}
			
nav.primary ul li a {
    color:#fff;
    font-size:26px;
    line-height:35px !important;
    text-decoration:none;
    margin-left:40px;
    margin-right:40px;
    padding:0 10px !important;
    display:block;
    margin-bottom:-10px !important;
    position: relative;
    font-family:'Rubik', sans-serif;
    text-align:center;

}	

nav.primary ul li a:after {
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #fff;
  transition: width 0.4s ease 0s, left 0.4s ease 0s;
  width: 0;
}
			
nav.primary ul li a:hover:after {
   width: 100%; 
    left: 0; }
	
/*===================== 
	content styles 
=======================*/


.auction-banner{
    background-color:#ea1a1e;
    color:white;
    padding:20px 5vw;
    font-size:18px;
    margin: 15px auto 0px auto;
    text-align: center;

    span{
        font-weight:600;
        font-size:20px;
    }

    a{
        color: #fff;
    }
}

/* default */

.default-img img{
    width:100%;
    height:100%;
}

.columns{
    float:left;
    width:20%;
    text-align:left;
}

.image-section{
    display:block;
    overflow:auto;
}

.truck{
    background-image:url("../siteart/truck.png");
    background-size:cover;
    filter:brightness(60%);
    width:100%;
    height:500px;
    transition:.3s ease;
    cursor:pointer;
}

.truck:hover{
    filter:brightness(100%);
}


.trailer{
    background-image:url("../siteart/trailer.jpeg");
    background-size:cover;
    filter:brightness(60%);
     width:100%;
    height:500px;
    transition:.3s ease;
    cursor:pointer;
}

.trailer:hover{
    filter:brightness(100%);
}

.construction{
    background-image:url("../siteart/construction.JPG");
    background-size:cover;
    filter:brightness(60%);
    width:100%;
    height:500px;
    transition:.3s ease;
    cursor:pointer;
}

.construction:hover{
    filter:brightness(100%);
}

.ag{
    background-image: url("../siteart/ag.jpg");
    background-size:cover;
    filter:brightness(60%);
    width:100%;
    height:500px;
    transition:.3s ease;
    cursor:pointer;
}

.ag:hover{
    filter:brightness(100%);
}

.other{
    background-image: url("../siteart/other.jpeg");
    background-size:cover;
    filter:brightness(60%);
    width:100%;
    height:500px;
    transition:.3s ease;
    cursor:pointer;
}

.other:hover{
    filter:brightness(100%);
}

.center-text {
    text-align: center;
    padding: 10px 5vw 20px;
}

.image-link{
    width:100%;
    height:500px;
    position:relative;
	background-color: #000;
}

.image-link h2{
    position:absolute;
    bottom:0;
    line-height:30px;
    color:white;
    text-decoration:none;
    margin-left:30px;
    margin-bottom:30px;
    font-size:25px;
    font-weight:600;
}

/* Logo Bar */

.slick-next,
.slick-next:hover,
.slick-next:focus,
.slick-next:visited {
    background: url(../siteart/next.png) no-repeat 50% 50% / 20px rgba(0, 0, 0, 0.5);
    right: 45px;
    transform: rotate(0deg);
}

.slick-prev,
.slick-prev:hover,
.slick-prev:focus,
.slick-prev:visited {
    background: url(../siteart/prev.png) no-repeat 50% 50% / 20px rgba(0, 0, 0, 0.5);
    left: 45px;
    transform: rotate(0deg);
}

.slick-next,
.slick-prev {
    position: absolute;
    display: block;
    z-index: 99999999;
    width: 25px;
    height: 25px;
    border-radius: 3px;
    opacity: 1;
    top: 40%;
}

button.slick-prev.slick-arrow {
    position: absolute;
    z-index: 999;
}

.slick-slide img {
    display: block;
    padding: 10px 0;
    width: 100%;
    max-width:700px
}

.slick-slide {
    display: table;
    padding: 0 5px 0 0;
}


/* contact */


.form{
    width:95%;
    margin:40px auto
}

.form label{
    line-height:40px;
    font-weight: bold;
}


.form-float{
    float:left;
    width:33.33%;
    margin:10px 0px;
}

input {
	padding: 8px;
	border: 1px solid #ddd;
	color: #000;
    background-color:#F0F0F0;
	font-size: 12px;
	box-sizing: border-box;
	border-radius: 2px;
	margin-bottom: 5px;
    font-family: 'Rubik', sans-serif; 
}

textarea {
	width: 100%;
	padding: 8px;
	color: #000;
    border: 1px solid #ddd;
    background-color:#F0F0F0;
	font-size: 12px;
	box-sizing: border-box;
	border-radius: 2px;
	height: 100px;
	margin-bottom: 5px;
    font-family: 'Rubik', sans-serif; 
}

textarea_comment {
	width: 100%;
	padding: 8px;
	border: 1px solid #ddd;
	color: #000;
	font-size: 12px;
	box-sizing: border-box;
	border-radius: 0px;
	height: 100px;
	margin-bottom: 5px;
    font-family: 'Rubik', sans-serif; 
}

select {
	padding: 8px;
	border: 0px solid #ddd;
	color: #000;
	font-size: 12px;
	box-sizing: border-box;
	border-radius: 0px;
	margin-bottom: 25px;
}

input:focus,
textarea:focus,
select:focus {
	padding: 8px;
	border: 1px solid #ddd;
	color: #000;
	font-size: 12px;
	box-sizing: border-box;
	border-radius: 0px;
	outline-style: none;
}

input.button,
input.button:focus {
    background:#EC3033 !important;
    border-color:#EC3033!important;
    padding:10px 30px;
    color:white;
    text-decoration:none;
    font-size:15px;
    transition:.2s ease;
    border-radius:2px;
    width:200px;
    border:0px;
     border-radius:2px;
    cursor: pointer;
    margin-top:25px;
    margin-bottom:30px;
}

input.button:hover {
    border-color:#EC3033!important;
    background:#DC1417 !important;
}

/* captcha */


.CaptchaPanel {
	margin:0 0 0 0 !important;
	padding:0 0 0 0 !important;
	text-align: center;
	line-height:normal !important;
}

.CaptchaImagePanel {
	margin:0 0 0 0;
	padding:0 0 0 0;
}

.CaptchaMessagePanel {
	padding:0 0 0 0 !important;
	margin:0 0 0 0 !important;
	font-weight:normal !important;
	font-size:12px;
	line-height:14px;
	font-family: 'Rubik', sans-serif;
}

.CaptchaAnswerPanel {
	margin:10px auto;
    width:100%!important;
	padding:2px 0px 2px 0px !important;
}


.CaptchaWhatsThisPanel {
	line-height:0;
	margin:0 0 5px 0;
	padding:8px 0 8px 0 !important;
	font-family: 'Rubik', sans-serif;
}
.CaptchaWhatsThisPanel a {color:#000;}
.CaptchaWhatsThisPanel a:hover {text-decoration:none;}


/* about */

.about-section{
    margin:40px auto 150px auto;
    width:95%;
}

.about-text{
    padding-bottom:40px
}

.about-text a{
    color:#000;
    transition:.3s ease;
    text-decoration:none
}

.about-text a:hover{
    color:#EC3033;
}

/*===================== 
	Button styles 
=======================*/
#signup{
    margin: 5px 0;
    background: #2C2C2C;

}
#signup a {
    background: #2C2C2C;
    text-decoration: none;
}
#signup div {
    width: 90%;
    margin: 0 auto;
    padding: 20px 0 15px 0;
}
#signup h4 {
    color: #fff;
    font-size: 18px;
    text-transform: uppercase;
    line-height: 28px;
    text-align: center;
}
#signup:hover{background-color: #EC3033;}

/*===================== 
	footer styles 
=======================*/

.footer-wrap{
    width:100%;
    background:#fff;
    font-family: 'Rubik', sans-serif !important; 
}

.top-footer{
    margin:0 auto;
    color:#5C5C5C;
    padding:20px;
    border-top:1px solid #DDDDDD;
}

.footer-logo{
    float:left;
    margin-left:20px
}

.footer-logo img{
    width:200px
}

.footer-links{
    float:right;
    margin-right:40px;
    margin-top:40px
}

.footer-links a{
    color:#5C5C5C;
    padding:0px 40px;
    text-decoration:none;
    transition:.3s ease
}

.footer-links a:hover{
    color:#EC3033
}


.bottom-footer{
    background-color:#ea1a1e;
    height:40px;
    padding-top:25px;
    color:white;
    width:100%;
    margin-top:20px;
    font-size:12px
    
}

.auctiontime{
    color:white;
    text-decoration:none;
    transition:.4s ease
}

a.auctiontime:hover{
    text-decoration:underline
}


/*========================== 
	  Responsive styles 
============================*/
@media screen and (max-width: 1300px)  {
nav.primary ul li a {
    margin-left:20px;
    margin-right:20px;
    padding:0 10px !important;

}	
.footer-links a{
    padding:0px 10px;
}    
}

@media screen and (max-width: 1000px)  {
   
.slick-slide img {
    display: block;
    padding: 10px 0;
    width: 100%;
    max-width:400px
}
    
    
.footer-logo{
    float:none;
    margin-left:0px;
    text-align:center;
    margin-bottom:-14px
}

.footer-links{
    display:none
}

.header-link{display:none}

.header-logo{width:100%; text-align:center}
    
/* mobile nav */	
    
nav.primary ul{display:none;}

#menu-button{ 
    width: 90%;
    display: block;
    font-size: 26px;
    position: relative;
    line-height:40px; 
    z-index: 400;
    margin-top:12px;
    margin-bottom:5px
}
    
#menu-button a{
    color:#000;
    text-decoration: none;
    font-weight:normal;
    transition:.3s ease;
}
    
nav.mobile {
    display:block;
    position: fixed;
    top: 0;
    left: -350px;
    width:300px;
    height: 100%;
    background-color:#FFF;
    border-right:1px solid #DBDBDB;
    z-index: 500;
    overflow:auto;
}

nav.mobile .social-media {
    position: relative;
    text-decoration: none;
    display: inline-block;
    font-size:16px;
    word-spacing:13px;
    padding:0 0 0 5px;
    color: #ccc !important;
}

nav.mobile .mobile_top {
    position: relative;
    display:block;
    padding: 0;
    margin:15px 0 10px 0;
    color: #999;
    font-size: 18px;
    font-weight: 400;
}

/* menu 'x' button */
    
nav.mobile .menu-toggle {
    position: absolute;
    padding: 3px 8px 3px;
    font-family: Arial, sans-serif;
    font-size:35px;
    font-weight: thin;
    line-height: 1;
    color: #999;
    text-decoration: none;
    top:0;
    right:10px;
	}
    

/* menu list */
    
nav.mobile ul {
    list-style: none;
    font-weight: 300;
    margin-top:40px;
    padding-left:0px !important;
}
    
nav.mobile ul li {
    position:relative;
    border-bottom:1px solid #E5E5E5
}

nav.mobile ul li a {
    position: relative;
    display: block;
    font-size:15px;
    color: black;
    text-decoration: none;
    font-family:'Rubik', sans-serif;
    font-weight:500;
     padding: 13px 10px 13px 20px!important;
}

nav.mobile ul li a:after {
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  right: 100%;
  position: absolute;
  background:#EF2D30;
  transition: width 0.4s ease 0s, right 0.4s ease 0s;
  width: 0;
}
			
nav.mobile ul li a:hover:after {
   width: 100%; 
    right: 0; 
}
nav.mobile ul li .fa-chevron-down {
    color:#000;
    font-size:12px;
    margin-top:-3px
}
}

 @media screen and (max-width: 1000px)  {
    
.columns{
    float:none;
    width:100%;
}
.image-link{height:200px;}
     
.other, .construction, .truck, .trailer, .ag{height:200px;}     
     
}
 

 @media screen and (max-width: 700px)  {
     
.form{width:90%;}

.about-section{margin:40px auto 40px auto; width:90%;}
     
.form-float{
    float:none;
    width:100%
}
     
   
}