/* 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;} ol, ul{list-style: none;} img{max-width: 100%; height: auto; image-rendering: -webkit-optimize-contrast;}

/* FRAMEWORK */

html, body{font-family: 'Roboto', sans-serif; font-size: 14px; -webkit-text-size-adjust: none}
::-moz-selection{background: #FBB613; color: #fff; text-shadow: none} ::selection{background: #FBB613; color: #fff; text-shadow: none}

.main{padding: 50px 0;}
.container{max-width: 1200px; margin: 0 auto; padding: 0 20px;}
.black{background: #000; color: #fff;}

.column12, .column11, .column10, .column9, .column8, .column7, .column6, .column5, .column4, .column3, .column2, .column1{float: left; padding: 0 25px 0 0;} .column12{width: 100%;} .column11{width: 91.6666%;} .column10{width: 83.3333%;} .column9{width: 75%;} .column8{width: 66.6666%;} .column7{width: 58.3333%;} .column6{width: 50%;} .column5{width: 41.6666%;} .column4{width: 33.3333%;} .column3{width: 25%;} .column2{width: 16.6666%;} .column1{width: 8.3333%;} .last{padding: 0;} .cf{zoom: 1;} .cf:before, .cf:after{content: ""; display: table;} .cf:after{clear: both;} .clear{clear: both;} *{box-sizing: border-box;}

/* TYPOGRAPHY */

h1{display: inline-block; text-transform: uppercase; margin-bottom: 15px; padding-bottom: 10px; color: #fff; border-bottom: 7px #FBB613 solid;}
p{font-size: 16px; line-height: 24px;}
a{text-decoration: none; color: inherit; transition: all .2s ease-in-out;} a:hover{color: inherit;}

.yellow-link{font-weight: 700;} .yellow-link:hover{color: #FBB613;}

/* HEADER */

.banner{background: #000; text-align: center;} .banner img{display: block; margin: 0 auto;}
.header{background: #000; padding: 15px 0; font-weight: 700; color: #fff;}
.header .phone{float: left; font-size: 24px; text-transform: uppercase; padding: 18px 0;} .header .phone a:hover{color: #FBB613;}
.header .search{float: right;}
.header .search .radio-field{display: inline-block; padding: 0 12px 0 5px;}
.header .search input[type="text"]{display: inline-block; vertical-align: top; margin: 4px 0; padding: 8px; font-family: 'Roboto', sans-serif; border: none; border-radius: 3px;}
.header .search input[type="submit"]{display: inline-block; vertical-align: top; margin: 4px 0; padding: 8px 15px; background: #FBB613; font-family: 'Roboto', sans-serif; font-weight: 700; text-transform: uppercase; color: #000; border: none; border-radius: 3px; cursor: pointer; transition: all .2s ease-in-out;}
.header .search input[type="submit"]:hover{background: #333; color: #FBB613;}
.header .search label{cursor: pointer;}

.header-container{z-index: 9999999999; top: -100px; transition: all .5s linear; box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.5);}
.stick{position: fixed; top: 0; width: 100%;}
.push{height: 44px;}

/* NAVIGATION */

#cssmenu{background: #FBB613; position: relative;}
#cssmenu ul{display: flex; max-width: 1200px; margin: 0 auto; font-size: 0; text-align: center;}
#cssmenu ul li{flex: 1; display: inline-block; position: relative; border-left: 1px #000 solid;}
#cssmenu ul li:last-child{border-right: 1px #000 solid;}
#cssmenu ul li a{display: block; font-size: 16px; font-weight: 900; text-decoration: none; text-transform: uppercase; color: #000; padding: 12px 25px;}
#cssmenu > ul > li:hover > a{background: #000; color: #FBB613;}
#cssmenu #menu-button{display: none;}

/* HOME */

.hero{background: #000; border: 15px #000 solid; max-height: 400px; text-align: center; overflow: hidden;} .hero img{display: block; margin: 0 auto;}
.about{background: #000 url("../siteart/about.jpg") center center no-repeat; padding: 25px 0; border-bottom: 15px #000 solid; color: #fff;}
.about .container{background: rgba(0,0,0,0.75); padding: 25px;}

.scrolling-wrap{background: #000; width: 100%; height: 100px; overflow: hidden; border-top: 5px #FBB613 solid; border-bottom: 5px #FBB613 solid;}
.scrolling{width: 100%; height: 92px;}

#engines{background: #000 url("../siteart/engines.png") left center no-repeat;}
#parts{background: #000 url("../siteart/parts.png") left center no-repeat;}

.button-container{display: flex; flex-wrap: wrap;}
.button-container a{display: block; background: rgba(0,0,0,.5); width: calc(25% - 10px); margin: 5px; padding: 10px; border: 3px #FBB613 solid; font-size: 16px; font-weight: 700; text-align: center; color: #fff;}
.button-container a:hover{background: #FBB613; color: #000;}

.cores{background: #000 url("../siteart/cores.jpg") center center no-repeat; padding: 25px 0; border-bottom: 15px #000 solid; color: #fff;}
.cores .container{background: rgba(0,0,0,0.75); padding: 25px;}

/* FOOTER */

.footer{background: #000; padding: 25px 0; font-size: 12px; line-height: 20px; text-align: center; color: #777; border-top: 1px #333 solid;}

/* RESPONSIVE */

@media screen and (max-width: 985px){
	.main{padding: 30px 0;}
    
	#cssmenu{width: 100%;}
	#cssmenu ul{width: 100%; display: none;}
	#cssmenu ul li{width: 100%; border: none; border-top: 1px solid #000;}
	#cssmenu ul li:last-child{border-right: none;}
	#cssmenu ul li a{font-size: 12px; padding: 20px; width: 100%;}
	#cssmenu #menu-button{display: block; padding: 20px; color: #000; cursor: pointer; font-size: 12px; font-weight: 700; text-transform: uppercase;}
	#cssmenu #menu-button::after{position: absolute; top: 19px; right: 20px; font-family: FontAwesome; font-size: 16px; content: '\f0c9';}
    .push{height: 54px;}
}
@media screen and (max-width: 768px){
    .column3{width: 50%; margin-bottom: 15px;}
    
    .header .phone, .header .search{float: none; width: 100%; text-align: center; padding: 5px 0;}
    .header .search .radio-field{display: none;}
    .button-container a{width: calc(50% - 10px);}
}
@media screen and (max-width: 480px){
    .column3{width: 100%; padding: 0;}
}