/***** BEGIN RESET *****/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;font-family: 'Roboto Condensed', sans-serif;
	border: 0;
	margin: 0;
	padding: 0;	
}

ol, ul {
	list-style: none;
}
img {max-width:100%;height:auto;}
table{border-collapse:collapse; width:100%;}
td{vertical-align:top;}

/* Make HTML 5 elements display block-level for consistent styling */  
header, nav, article, footer, address, img {  
    display: block;  
} 

/***** END RESET *****/

/* Clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

body {font-size:18px;line-height:28px;-webkit-text-size-adjust:none;width:100%;background-position:center center;background-attachment:fixed;background-image: url('../siteart/metal.png');background-repeat:repeat;background-color:black;}
h1, h2, h3, h4 {font-weight:700;line-height:normal;margin-bottom:10px;}
strong {font-weight:700;}
a:link, a:visited, a:active {text-decoration:none; color:#0b2f54;}
a:hover {text-decoration:underline; color:#0b2f54;}

.wrapper {width:100%;max-width:80%;margin:0 auto;padding:3% 0px;}
.onecols, .twocols, .threecols {width:100%;height:auto;display:block;float:left;}
.onecols {max-width:25%;}
.twocols {max-width:50%;}
.threecols {max-width:33%;}

.borderhome {border:4px solid #fff;box-sizing:border-box;}

.head-top-wrap {
   width:100%;
   background:#000;
}
.header-top {
   width: 100%;
   max-width: 80%;
   margin: 0 auto;
   padding: 0px;
   display: flex;
   flex-wrap: wrap;
   justify-content:space-between; 
    align-items: center;
}
.header-top ul {
    display: flex;
    flex-wrap: wrap;
}
.header-top ul li {
    list-style: none;
    padding:5px 0px 5px 20px;
    margin:0;
    text-align: center;
}
.header-top ul li a {
    font-family: 'Roboto Condensed', sans-serif;
    padding:5px;
    color:#fff;
    font-size: 14px;
    font-weight: 700;
    display: block;
}
.head-search {
    padding:5px 0;
    max-width: 500px;
    width:calc(100% - 540px);
}
.head-search .search-box {
   border-radius: 0px!important;
   font-family: 'Roboto Condensed', sans-serif;
    outline:none!important;
    border:none!important;
    padding:5px!important;
    width:calc(100% - 76px)!important;
    height: auto!important;
    line-height: normal!important;
}
.head-search .search-btn {
    border-radius: 0px!important;
    outline:none!important;
    border:none!important;
    background:#DA5A34!important;
    color:#fff!important;
    font-family: 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    padding:5px!important;
    cursor: pointer!important;
    font-size: 16px!important;
    height: auto!important;
    line-height: normal!important;
}
.head-search .search-btn:hover {
    background:#000!important;
}

.logo {float:left;display:block;width:100%;max-width:60%;}
.headerright {float:left;display:flex;align-items: center;justify-content:flex-end;width:100%;max-width:40%;}
/*.headerright span {display:block;float:left;width:100%;max-width:25%;padding:0 10px 10px 10px;font-size:18px;font-weight:700;vertical-align:top;box-sizing:border-box;text-align:center;}*/
.headerright img {display:block;float:right;width:100%;max-width:30%;padding:5px;box-sizing:border-box;}
.headerright {text-align:right;}
header .wrapper {width:100%;max-width:80%;margin:0 auto;padding:20px 0px;color:#fff;}
header a:link, header a:visited, header a:active {text-decoration:none; color:#fff;}
header a:hover {text-decoration:underline; color:#fff;}

.headerright img {display:inline-block;}
.whitebg {background-image:url("../siteart/whitebg.png");background-repeat:repeat;background-position:center center;width:100%;height:auto;background-color:white;}
.wbg {background:#fff;}
.storefront img {width:100%;height:auto;}
.storeinfo {background:rgba(218,90,52,0.98);opacity:.8;border:1px solid #ccc;padding:10px 20px;box-sizing:border-box;color:#fff;width:100%;margin:0px auto;text-shadow: 0 0 5px #000,0 0 5px #000;}
.storeinfo a:link, .storeinfo a:visited, .storeinfo a:active {text-decoration:none;color:#fff;}
.storeinfo a:hover {text-decoration:underline; color:#fff;}

.storefront {position:relative;box-sizing:border-box;width:100%;height:auto;text-align:center;}
.storeinfo {position:absolute;bottom:0;z-index:1;}

.grid {position:relative;clear:both;margin:0 auto;padding:0;width:100%;list-style:none;text-align:center;}
.grid figure {position:relative;overflow:hidden;margin:0;max-width:25%;float:left;display:block;width:100%;height:auto;background:#3085a3;text-align:center;cursor:pointer;box-sizing:border-box;border:4px solid #fff;}
.grid figure img {position:relative;display:block;height:auto;width:100%!important;opacity:0.8;}
.grid figure figcaption {padding:2em;color:#fff;text-transform:uppercase;font-size:1.25em;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-sizing:border-box;}
.grid figure figcaption::before, .grid figure figcaption::after {pointer-events:none;}
.grid figure figcaption, .grid figure figcaption > a {position:absolute;top:0;left:0;width:100%;height:100%;}
.grid figure figcaption > a {z-index:1000;text-indent:200%;white-space:nowrap;font-size:0;opacity:0;}
.grid figure h2 {font-weight:300;font-size:24px;margin:0;}
.grid figure h2 span {font-weight:700;}
.grid figure h2, .grid figure p {margin:0;font-size:24px;}
figure.effect-ming {background:#1b1b1b;}
figure.effect-ming img {opacity:0.5;-webkit-transition:opacity 0.35s;transition:opacity 0.35s;}
figure.effect-ming figcaption::before {position:absolute;top:30px;right:30px;bottom:30px;left:30px;border:2px solid #fff;box-shadow:0 0 0 30px rgba(255,255,255,0.2);content:'';opacity:0;-webkit-transition:opacity 0.35s, -webkit-transform 0.35s;transition:opacity 0.35s, transform 0.35s;-webkit-transform:scale3d(1.4,1.4,1);transform:scale3d(1.4,1.4,1);}
figure.effect-ming h2 {margin:10% 0;-webkit-transition:-webkit-transform 0.35s;transition:transform 0.35s;}
figure.effect-ming p {padding:0;opacity:0;-webkit-transition:opacity 0.35s, -webkit-transform 0.35s;transition:opacity 0.35s, transform 0.35s;-webkit-transform:scale(1.5);transform:scale(1.5);}
figure.effect-ming:hover h2 {-webkit-transform:scale(0.9);transform:scale(0.9);}
figure.effect-ming:hover figcaption::before, figure.effect-ming:hover p {opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}
figure.effect-ming:hover figcaption {background-color:rgba(11,47,87,.8);}
figure.effect-ming:hover img {opacity:0.9;}

li.manu {float:right;}
li.manu img {display:inline-block;max-width:100%;height:auto;}

/** scrolling inv **/
.scrollingbg {background:#1b1b1b;padding:15px 0px;position:relative;}
.scrolling-wrap {width:100%;height:90px;overflow:hidden;}
.scrolling {width:100%;height:92px;}

.scrollingbg .overlay {width:100%;max-width:185px;height:auto;padding:22px 20px;position:absolute;background:#1b1b1b;text-align:center;left:5%;top:13px;
    transform-origin:bottom left;
    -webkit-transform: skew(140deg, 0deg);
    -ms-transform: skew(140deg, 0deg);
    -o-transform: skew(140deg, 0deg);
    transform: skew(140deg, 0deg);
}
.scrollingbg .overlay a:link, .scrollingbg .overlay a:active {text-decoration:none; color:#fff;}
.scrollingbg .overlay a:hover {text-decoration:underline; color:#fff;}

.scrollingbg .overlay h3 {text-transform: uppercase;font-size:16px;color:#fff;
    -webkit-transform: skew(-140deg, 0deg);
    -ms-transform: skew(-140deg, 0deg);
    -o-transform: skew(-140deg, 0deg);
    transform: skew(-140deg, 0deg);
}

footer {color:#fff;width:100%;max-width:80%;padding:3% 0;margin:0 auto;}
footer a:link, footer a:visited, footer a:active {text-decoration:none; color:#fff;}
footer a:hover {text-decoration:underline; color:#fff;}

.button {display:inline-block;border-radius:4px;background-color:#2f318b;border:none;color:#FFFFFF;text-align:center;padding:20px 0;width:100%;max-width:300px;transition:all 0.5s;cursor:pointer;font-size:18px;}
.button span {cursor:pointer;display:inline-block;position:relative;transition:0.5s;}
.button span:after {content:'\00bb';position:absolute;opacity:0;top:0;right:-20px;transition:0.5s;}
.button:hover span {padding-right:25px;}
.button:hover span:after {opacity:1;right:0;}

.accordion {background-color:#eee;color:#444;cursor:pointer;padding:18px;width:100%;box-sizing:border-box;text-align:center;outline:none;transition:0.4s;vertical-align:top;border:1px solid #ccc;}
.accordion img {display:inline-block;max-width:100%;height:auto;}
.active, .accordion:hover {background-color:#ccc;}
.panel {padding:0 18px;background-color:white;box-sizing:border-box;display:none;overflow:hidden;z-index:1;position:absolute;width:100%;max-width:300px;}
.panel div {padding:15px 10px;box-sizing:border-box;}
.panel div:hover {cursor:pointer;}

/** homepage tractor package **/

.package-deal{background: #fff; height: 100%; padding: 20px;}
.package-placeholder{display: block; margin: 20px auto 40px;}

.package-flex{display: flex; align-items: center; flex-wrap: wrap;}
.package-flex h3{flex: 1; font-size: 36px;}
.package-flex a{display: inline-block; background: #EB5E02; padding: 10px 35px; font-size: 20px; font-weight: 700; text-align: center; color: #fff; transition:.3s ease-in;}
.package-flex a:hover{background: #000; text-decoration: none; color: #fff;}

.badge-flex{display: flex; align-items: center; flex-wrap: wrap;}
.badge-logo{width: 100%; max-width: 150px;}
.badge-text{flex: 1; padding-left: 25px; line-height: 1.25;}
.badge-text strong{display: block; margin-bottom: 5px; font-size: 32px;}
.badge-text span{display: block; font-size: 14px; color: #EB5E02;}

/** slider **/

.slick-slide-img {
    background-size: cover;
    background-position: center;
    width:100%;
    height: 30vw;
}
.slick-slide-overlay {
    width: 100%;
    height: 30vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding:20px 20px 10px 20px;
    box-sizing: border-box;
}
.slick-slider-copy {
    width: 100%;
}
.slick-slider-copy.text-right {
    text-align: left; position:absolute; left: 25px; bottom: 25px;
}
.slick-lg-text {
    font-family: 'Roboto Condensed', sans-serif;
    color:#fff!important;
    font-weight: 600;
    font-size: 2.2vw;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
    padding-bottom:.6vw;
}
.slick-md-text {
    font-family: 'Roboto Condensed', sans-serif;
    color:#fff!important;
    font-weight: 600;
    font-size: 1.8vw;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
    padding-bottom:.6vw;
}
.slick-thin-text {
    font-family: 'Roboto Condensed', sans-serif;
    color:#fff!important;
    line-height: normal;
    font-weight: 300;
    font-size: 2vw;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.kubota-btn {
    background:rgba(235,94,2,1.0);
    padding:.4vw 4.5vw;
    text-align: center;
    color:#fff!important;
    transition:.3s ease-in;
    font-size: 1.6vw;
}



.kubota-btn:hover {
    background:rgba(0,0,0,1.0);
    font-family: 'Roboto Condensed', sans-serif;
    color:#fff!important;
    text-decoration: none!important;
}


/** Responsive Styles **/
@media screen and (max-width: 1280px){
	.grid figure h2 {font-size:18px;}
	.grid figure h2, .grid figure p {font-size:18px;}
}


@media screen and (max-width: 1024px){
	body {font-size:16px;line-height:26px;}
	.grid figure {max-width:50%;}
	.hide {display:none;}
	
	.grid figure h2 {font-size:18px;}
	.grid figure h2, .grid figure p {font-size:18px;}
	.storeinfo {font-size:12px;}
	
	.panel div {padding:10px 10px;font-size:14px;}

    .package-deal{max-width: 100%;}
    .badge-logo{max-width: 200px;}
    
    .header-top ul {
        justify-content: center;
    }
    .header-top ul li {
        padding:5px;
        margin:0 auto;
    }

}
@media screen and (max-width: 920px){
    .header-top ul {
        width:100%;
    }
    .head-search {
        margin:0 auto;
        max-width: 500px;
        width: 100%;
    }
}


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

    
	.twocols {max-width:100%;}
	.threecols {max-width:50%;}
	.panel div {padding:10px 10px;font-size:14px;}
	
	.storeinfo {position:relative;bottom:0;z-index:0;}

	.grid figure h2, .grid figure p {font-size:20px;}
	
    .package-flex h3{font-size: 24px;}
    .package-flex a{padding: 10px 20px; font-size: 16px;}
    .package-placeholder{margin: 20px 0 0;}
    .badge-logo{max-width: 100%;}
    .badge-logo img{display: block; max-width: 150px; margin: 15px auto;}
    .badge-text{flex: none; width: 100%; padding: 0; text-align: center;}
    .badge-text strong{font-size: 24px;}
	
	.headerright, .logo {max-width:100%;}
	.headerright {justify-content:center;}
/*	.headerright span {padding:10px 15px;display:inline-block;max-width:50%;}*/
	.headerright img {max-width:40%;float:none;}
	.slick-slide-img {
        height: 300px;
    }
	
	.slick-slide-img {
    background-size: cover;
    background-position: center;
    width:100%;
    height: 55vw;
}
    .slick-slide-overlay {
        min-height: 55vw;
        height: auto;
    }
    .slick-lg-text {
        font-size: 4.2vw;
        padding-bottom:.6vw;
    }
    .slick-md-text {
        font-size: 3.8vw;
        padding-bottom:.6vw;
    }
    .slick-thin-text {
        font-size: 4vw;
        padding-bottom:.6vw;
    }
    .kubota-btn {
        padding:1vw 5.5vw;
        font-size: 3vw;
    }
}
 
 

@media screen and (max-width: 480px){
	.scrollingbg .overlay {display:none;}
	.threecols {max-width:100%;}
	.panel {z-index:0;position:relative;max-width:100%;font-size:16px;}

	.grid figure {max-width:100%;}
	
	.slick-slide-img {
        height: 250px;
    }
	
	.slick-slide-overlay{
		height: 240px;
	}
	

 @media screen and (max-width: 430px){
	 .slick-slide-img {
        height: 240px;
    }
	 
	@media screen and (max-width: 400px){
	 .slick-slide-img {
        height: 220px;
    }
		
		.slick-slide-overlay {
			height: 220px;
		}
	@media screen and (max-width: 360px){
	 .slick-slide-img {
        height: 200px;
    }
		
		.slick-slide-overlay {
			height: 200px;
		}
		
	@media screen and (max-width: 330px){
	 .slick-slide-img {
        height: 180px;
    }
		
		.slick-slide-overlay {
			height: 180px;
		}
		
@media screen and (max-width: 300px){
	 .slick-slide-img {
        height: 160px;
    }
		
		.slick-slide-overlay {
			height: 160px;
		}
		
/*	.headerright span {padding:5px;font-size:16px;max-width:100%;}*/
	.headerright img {width:auto;height:35px;float:none;}
}