/* 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; border: 0; margin: 0; padding: 0; list-style: none;} img{max-width: 100%; image-rendering: -webkit-optimize-contrast;}
.cf{zoom: 1;} .cf:before, .cf:after{content: ""; display: table;} .cf:after{clear: both;} .clear{clear: both;} *, *:before, *:after{box-sizing: border-box;}

html, body{font-family: 'Source Sans Pro', sans-serif; line-height: 1.5; height: 100%; width: 100%;}
body.sticky-footer{display: flex; min-height: 100vh; flex-direction: column;}
::-moz-selection{background: #FEC200; color: #fff; text-shadow: none} ::selection{background: #FEC200; color: #fff; text-shadow: none}

.main{flex: 1; padding: 50px 0;}
.wrap{max-width: 1440px; margin: 0 auto; padding: 0 20px;}

/* TYPOGRAPHY */

h1, h2, h3, h4, h5, h6{font-weight: 700;}
a{text-decoration: none; color: inherit; cursor: pointer; transition: all .2s ease-in-out;} a:hover{color: inherit;}

.arrow-btn{display: inline-flex; align-items: center; position: relative; height: 53px; background: #FEC200; padding: 10px 5px 10px 25px; font-weight: 700; color: #000; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.1);}
.arrow-btn i{padding-left: 60px;}
.arrow-btn:after{position: absolute; right: -16px; content: ""; border-top: 26px solid transparent; border-bottom: 26px solid transparent; border-left: 16px solid #FEC200; z-index: 0;}

.arrow-btn:hover{padding: 10px 15px 10px 35px; color: #000;}

/* HEADER */
.header-container {
	background: transparent !important;
}

.header-container{position: relative; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.1); z-index: 999;background-color: transparent !important;}

.top-header{position: relative; background: #000; font-size: 14px; color: #fff; border-top: 10px #000 solid; overflow: hidden;}
.top-header a:hover{color: #FEC200;}
.top-header .wrap{display: flex; align-items: center;}
.top-header .angle{position: relative; background: #fff; width: 250px; height: 40px; transform: skew(21deg);}
.top-header .spacing{position: absolute; top: 0; right: calc(100% - 50px); background: #fff; width: 100vw; height: 100%; transform: skew(-21deg);}
.top-header .phone{margin-left: auto; padding: 0 20px; font-size: 15px; font-weight: 600;}
.top-header .address{font-size: 15px; font-weight: 600;}

.header .wrap{display: flex; align-items: center; flex-wrap: wrap; padding: 0;}
.header .logo{position: relative; width: 225px; margin-top: -45px; padding: 20px; text-align: center; z-index: 9;}
.header .navigation{width: calc(100% - 225px);}

/* NAVIGATION */

nav.primary{display: inline-block; position: relative; width: 100%; z-index: 999;}
nav.primary ul{display: flex; justify-content: flex-end; width: 100%; margin: 0; padding: 0;}
nav.primary ul li{display: inline-block; position: relative; height: 100%; transition: 0.3s;}
nav.primary ul li a{display: block; padding: 12px 10px; font-size: 18px; font-weight: 600; text-align: center; transition: 0.2s ease-in;}
nav.primary ul li:hover > a{background: #FEC200; color: #000;}

/* HOME */

.tab-section{background: #000 url("/siteart/tile-bg.jpg"); padding: 50px 0; color: #fff;}
.tab-section h2{display: flex; align-items: center; font-size: 36px;}
.tab-section h2 img{max-height: 50px; margin-right: 15px;}
.tab-section .wrap{display: flex; flex-wrap: wrap;}
.tab-section .tab{background: #000; width: calc(50% - 20px); margin: 10px; padding: 100px; font-size: 18px;}
.tab-section .arrow-btn{margin-top: 25px;}

.sales-banner{display: flex; background: #000 url("/siteart/sales-bg.jpg") left center no-repeat; overflow: hidden;}
.sales-banner h2{margin-bottom: 15px; text-decoration: underline;}
.sales-banner .sales-image{display: none;}
.sales-banner .sales-text{display: flex; flex-wrap: wrap; position: relative; left: 105px; width: 100%; max-width: 50%; margin-left: auto; background: #FEC200; padding: 150px 150px 150px 100px; text-align: center; transform: skew(-21deg);}
.sales-banner .sales-text .sales-text-inner{margin: auto; max-width: 515px; font-size: 18px; transform: skew(21deg);}
.sales-banner .arrow-btn{background: #000; margin: 25px auto 0; color: #fff;}
.sales-banner .arrow-btn:after{border-left: 16px solid #000;}

.authorized-dealer{
	background-color: black;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 24px;
}

.authorized-dealer-container{
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.authorized-dealer-text{
	text-transform: uppercase;
	color: white;
	font-weight: 800;
	text-align: center;
}

/* SLIDESHOW */

.carousel{background: #222;}
.carousel-cell{display: flex; align-items: center; justify-content: center; width: 100%; height: 600px; overflow: hidden;}
.carousel.is-fullscreen .carousel-cell{height: 100%;}
.carousel-cell-image{display: block; width: 100%; height: 100%; object-fit: cover;}

.carousel-content{display: flex; flex-wrap: wrap; position: absolute; left: -120px; width: 100%; height: 100%; max-width: 50%; background: rgba(254, 195, 0, 0.8); padding: 100px; transform: skew(21deg);}
.carousel-content strong{text-transform: uppercase;}
.carousel-content h2{margin-bottom: 10px; font-size: 48px; text-transform: uppercase; line-height: 1;}
.carousel-content p{font-weight: 600;}
.carousel-content .carousel-content-inner{max-width: 80%; margin: auto; font-size: 18px; transform: skew(-21deg);}
.carousel-content .arrow-btn{background: #000; margin-top: 35px; color: #fff;}
.carousel-content .arrow-btn:after{border-left: 16px solid #000;}

.carousel .flickity-prev-next-button{background: none; width: 35px; height: 35px; color: #fff; opacity: .75; transition: all .2s ease-in-out;}
.carousel .flickity-prev-next-button:hover{background: none; opacity: 1;}
.carousel .flickity-page-dots .dot{background: #fff;}
.carousel .flickity-page-dots .dot.is-selected{background: #FEC200;}

/* SUB-PAGES */

.contacts{display: flex; flex-wrap: wrap;}
.contacts .contact{flex: 1; background: #fff; margin: 5px; padding: 30px; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.1); border-radius: 5px;}
.contacts .contact a{text-decoration: underline;}
.contacts .contact a:hover{text-decoration: none;}

.location-container{display: flex; flex-wrap: wrap; margin-bottom: 35px;}
.location-container a{text-decoration: underline;}
.location-container a:hover{text-decoration: none;}
.location-container .location-box{background: #f5f5f5; width: 300px; padding: 20px; border-radius: 5px;}
.location-container .location-box h2{font-size: 20px; text-transform: uppercase;}
.location-container .location-frame{width: calc(100% - 300px); padding-left: 35px;}
.location-container .location-frame iframe{width: 100%; height: 400px; border-radius: 5px;}

/* FORM */

.form{margin: 25px auto; padding: 35px; border-radius: 5px; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.1);}
.form h2{margin-bottom: 5px; font-size: 18px; font-weight: 1000; text-transform: uppercase;}
.form .form-row{display: flex; flex-wrap: wrap; margin: 15px 0;}
.form .form-row .label-left{width: 250px; padding-right: 15px;}
.form .form-row .label-left label span{padding-left: 5px; color: red;}
.form .form-row .input-right{width: calc(100% - 250px);}
.form .form-row .input-right label{display: inline; margin-right: 10px; cursor: pointer;}
.form .submit-btn{display: flex; justify-content: center; margin-top: 25px;}
.form input[type="text"], .form input[type="email"], .form select, .form textarea{background: #f2f2f2; width: 100%; padding: 15px; font-family: 'Source Sans Pro', sans-serif; border-radius: 5px; border: none;}
.form input[type="submit"]{display: inline-flex; align-items: center; justify-content: center; background: #FEC200; padding: 18px 50px; font-family: 'Source Sans Pro', sans-serif; font-weight: 700; text-transform: uppercase; text-align: center; line-height: 1.25; color: #000; border: none; border-radius: 10px; transition: all .2s ease-in-out; cursor: pointer;}
.form input[type="submit"]:hover{background: #E9B200; color: #000;}
.form textarea{height: 120px;}

.CaptchaPanel{margin: 0 !important; padding: 0 !important; line-height: normal !important;}
.CaptchaAnswerPanel input{width: 250px; max-width: 100%; padding: 5px; margin: 5px 0;}
.CaptchaMessagePanel{padding: 0 !important; margin: 0 !important; font-weight: normal !important; font-size: 12px; line-height: 14px;}
.CaptchaAnswerPanel{margin: 0; padding: 2px 0px 2px 0px !important;}
.CaptchaWhatsThisPanel{line-height: 0; margin: 0; padding: 8px 0 8px 0 !important;}
.CaptchaWhatsThisPanel a{font-size: 12px; color: #000;} .CaptchaWhatsThisPanel a:hover{text-decoration: none;}

/* CUSTOM */

.img-grid{
	display: flex; 
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.4%;
	justify-content: center;
}
.img-grid > div:nth-of-type(1){
  flex: 33.03333%;
  max-width: 33.03333%;
}
.img-grid > div{
    flex: 31.63333%;
  max-width: 31.63333%;
}
.img-grid > div img{
  max-width: 100%;
	display: block;
    margin-top: 1.3%;
}


/* FOOTER */

.footer{background: #000; padding: 100px 0; color: #fff;}
.footer h3{margin-bottom: 10px; font-size: 20px; font-weight: 600;}
.footer a{display: inline-flex; padding: 5px 0;}
.footer a:hover{color: #FEC200}
.footer .wrap{display: flex; flex-wrap: wrap;}
.footer .col{width: 33.3333%; padding: 0 35px; border-right: 1px #555 solid;}
.footer .col:last-child{border-right: none;}

.footer .phone-link:before{margin-right: 10px; content: "\f879"; font-family: "Font Awesome 5 Free"; font-weight: 900;}
.footer .location-link:before{margin-right: 10px; content: "\f3c5"; font-family: "Font Awesome 5 Free"; font-weight: 900;}

.copyright{background: #000; width: 100%; padding: 20px 0; text-align: center; color: #888; border-top: 1px #555 solid;}
.copyright a:hover{color: #fff;}

/* RESPONSIVE */

nav.mobile, #menu-button{display: none;}

@media screen and (max-width: 1200px){
	nav.primary ul li a{padding: 12px 5px; font-size: 16px;}
	
	.sales-banner{display: flex; background: #000}
	.sales-banner .sales-image{display: block; width: 100%;}
	.sales-banner .sales-image img{display: block; width: 100%; max-width: 350px; margin: 0 auto 25px;}
	.sales-banner .sales-text{left: 0; max-width: 100%; margin: 0; padding: 50px 20px; transform: none;}
	.sales-banner .sales-text .sales-text-inner{max-width: 100%; transform: none;}
}
@media screen and (max-width: 980px){
	.top-header{padding: 7px 0;}
	.top-header .wrap{justify-content: center;}
	.top-header .angle{display: none;}
	.top-header .phone{margin: 0; padding: 0;}
	.top-header .address{padding: 0 15px;}
	.header .logo{width: 100%; margin: 0;}
	.header .logo img{display: block; max-height: 100px; margin: auto;}
	.header .navigation{width: 100%;}
	
	#menu-button{display: block; position: relative; width: 100%; font-size: 18px; font-weight: 700; z-index: 1000;}
	#menu-button a{display: block; background: #000; padding: 10px 22px; text-align: right; color: #fff;}
	#menu-button a:hover{background: #333;}
	
	nav.primary{display: none;}
	nav.mobile{display: block; position: fixed; top: 0; left: -250px; width: 250px; height: 100%; background: #333; z-index: 999999; overflow: auto; box-shadow: 5px 0px 10px 0px rgba(0, 0, 0, 0.1);}
	nav.mobile .mobile-top{display: flex; align-items: center; justify-content: space-between; position: relative; padding: 10px 15px; border-bottom: 4px #FEC200 solid;}
	nav.mobile .mobile-title{font-size: 15px; font-weight: 700; text-transform: uppercase; color: #fff;}
	nav.mobile .menu-toggle{font-family: Arial, sans-serif; font-size: 18px; font-weight: 900; line-height: 1; color: #fff; padding: 5px;}
	nav.mobile .menu-toggle:hover{opacity: .5;}
	nav.mobile .nav-footer{padding: 15px 0; font-size: 12px; text-align: center; color: #fff; opacity: .5;}
	
	nav.mobile ul{list-style: none; font-weight: 400; margin: 0; padding: 0;}
	nav.mobile ul li{position: relative; border-bottom: 1px solid #444;}
	nav.mobile ul li i{position: absolute; right: 15px;}
	nav.mobile ul li a{display: flex; align-items: center; position: relative; font-size: 12px; padding: 12px 15px; font-weight: 700; text-transform: uppercase; color: #fff;}
	nav.mobile ul li a:hover{background: #444;}

	.main{padding: 30px 0 50px;}
	
	.carousel-cell{height: 400px;}
	.carousel-content{left: 0; max-width: 100%; padding: 50px; transform: none;}
	.carousel-content .carousel-content-inner{max-width: 100%; transform: none;}

	.tab-section .tab{padding: 50px;}
}
@media screen and (max-width: 768px){
	.hide-sm{display: none;}
	

	.img-grid > div{
		flex: 97.2% !important;
		max-width: 97.2% !important;
	}
	.tab-section .tab{width: 100%; margin: 10px 0;}

	.carousel-content .carousel-content-inner{font-size: 16px;}
	.carousel-content h2{font-size: 36px;}

	.contacts .contact{flex: none; width: 100%; margin: 5px 0;}
	.location-container{margin-bottom: 15px;}
	.location-container .location-box{width: 100%; margin-bottom: 15px;}
	.location-container .location-frame{width: 100%; padding: 0;}
	.location-container .location-frame iframe{height: 250px;}

	.form .form-row .label-left, .form .form-row .input-right{width: 100%; margin: 2px 0; padding: 0;}

	.footer{padding: 50px 0; text-align: center;}
	.footer .col{width: 50%; padding: 0 20px;}
	.footer .col:first-child{width: 100%; margin-bottom: 50px; padding: 0; border: none;}
}
@media screen and (max-width: 480px){
	.top-header .phone, .top-header .address{font-size: 12px;}
	
	.tab-section .tab{padding: 25px;}
}