﻿/* 
    Website Developer: Karoline Dassie

    Main Colors:
    - Yellow: #fad200
    - Black: #000
    - White: #fff
    - Gray: #444444
*/

/*==========================================================

    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;}
table{border-collapse:collapse; width:100%;}
td{vertical-align:top;}

svg:not(:root) {overflow: hidden;/*reset*/}

/*image replacement*/
.hide-text {
    text-indent:  100%;
    white-space:  nowrap;
    overflow:  hidden;
    }	

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    border-style: solid;
    height: 0;
    color: #353535;
    margin: 2em 0
    } 

img { border: 0; max-width:100%;} 
img.imgresp{max-width: 100%;}

/* Make HTML 5 elements display block-level for consistent styling */  
header, nav, article, footer, address { display: block;  } 

/* Clearfix */
.cf:before,.cf:after {content: " ";display: table;}
.cf:after {clear: both;}
.cf {*zoom: 1;}
.clear{clear: both}
/* clear floats */ 
.group:before,
.group:after {content: ""; display: table;} 
.group:after {clear: both;}
.group {zoom: 1;}	
.clear { clear: both;}

::-moz-selection {
    background: #fad200; 
    color: #fff;
    text-shadow: none;
}
::selection {
    background: #000;
    color: #fff;
    text-shadow: none;
}


html, body{
    overflow:auto;/* DO NOT REMOVE, Fixed Background Jumpy Glitch  */
    height:100%;/* DO NOT REMOVE, Fixed Background Jumpy Glitch  */
    -webkit-text-size-adjust: none; 
    -ms-text-size-adjust: 100%; 
    margin: 0;
    padding: 0;
    background: #000!important;
    line-height: normal; 
    font-family: 'Montserrat', sans-serif!important;
}

/*==========================================================

TYPOGRAPHY

===========================================================*/

h1 { font-weight:900; color:#fad200; font-size:34px; text-transform: uppercase; line-height:normal;  }
    h1 span{color: #fff}
h2 { font-weight:900; color:#000; font-size:34px; text-transform: uppercase; line-height:normal;  }
h3 { font-weight:300; color:#fff; font-size:23px; }
h4 { font-weight:800; color:#000; font-size:18px; text-transform: uppercase;}
h5 { font-weight:900; color:#fad200; font-size:21px; text-transform: uppercase; margin-bottom: 15px!important} 
h6 { font-weight:700; color:#fff; font-size:13px; text-transform: uppercase; margin-bottom:10px;}

b{font-weight: 900}
p, ul, ol, li { font-size: 14px; font-weight: 400; color: #5f5f5f; line-height: 26px; }

a, button, .button, a:hover, button:hover, .button:hover, button.mobile_btn::after {
    -webkit-transition:all .45s ease;
    -moz-transition:all .45s ease;
    -ms-transition:all .45s ease;
    -o-transition:all .45s ease;
    transition:all .45s ease;
} 

a:link, a:visited, a:active {text-decoration:none; color: #000}
a:hover {text-decoration:none;}
.column3 a{ color:#fad200}

.center{text-align: center!important}
.forcewhite{color: #fff!important}
.forceyellow{color: #fad200!important}
.quasegross{font-weight: 700}

/*==========================================================

FRAMELESS INVENTORY STYLES

===========================================================*/

.hosted-content h1{text-align: left}
.hosted-content h5{text-align: left}
.hosted-content .listings-wrapper .listings-list .category-banner h3{line-height: normal!important; font-size: 23px!important; color: #fad200!important}
.hosted-content .m-top-20{margin-top: 0!important}
.hosted-content .listings-wrapper .listings-list .listing-banner h2{font-size: 24px!important}


/*==========================================================

LAYOUT STYLES

===========================================================*/
article{
    background: url("../siteart/background.jpg") no-repeat fixed!important;
    padding: 2em 0;
    position: relative;
    background-attachment: fixed;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover!important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

.column1 {width:100%;}
.column2 {width:47.5%; float:left; margin-right:5%; box-sizing: border-box; color:#fff;}
.column3 {width:33.33333%; float:left; padding:0 ; box-sizing: border-box;}
.column4 {width:23%; margin-right:2%; float:left;  box-sizing: border-box;}
.column5 {width:20%; float:left; padding-right:1%; box-sizing: border-box;}
.column6 {width:16%; float:left; padding-right:1%; box-sizing: border-box;}

.twothird{width:60%; float:left;  box-sizing: border-box;}
.onethird{width:40%; float:left; padding-right: 30px; box-sizing: border-box; text-align:left}
.dois-terco{width:70%; float:left; padding-right: 30px; box-sizing: border-box;}
.um-terco{width:30%; float:left; box-sizing: border-box; }

.last{padding-right:0; margin-right:0!important;}
.midcolumn {padding:0 20px;}
.center{text-align:center}

.wrapper{ width:96%; margin:0 auto; padding:0; max-width:1500px; position:relative}
.wrapper-small{ width:100%; margin:0 auto; padding:0; max-width:1024px; position:relative}
.container{/* width:100%; *//* max-width:1200px; */margin:0 auto;}

.white{background:#fff;}

.marg{margin:2em auto;}
.bord{border: 1px solid #444444;box-sizing: border-box;}
.border-it{background:#fff;padding: 5px;box-sizing: border-box;}

.pad{padding:2em 0;}

/*==========================================================

HEADER STYLES 

===========================================================*/

.top{background:#000; text-align: right; padding: 7px 0; color: #fff}
    .top p{color: #fff; font-size: 15px; font-weight: 600; display: inline-block; vertical-align: top;}
    .top h5{margin: 0 20px!important; display: inline-block;}
    .top a{color: #fff; display: inline-block;}
    .top img{max-width: 35px;}
    #acertar{vertical-align: top; display: inline-block; margin-top: 10px}
    #midia{vertical-align: top; display: inline-block; margin-top: 3px}

header{
    position:fixed;
    width:100%;
    margin:0;
    padding:0;
    background:#fad200;
    z-index:999;
    -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.6);
    box-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.6);
}

#spaceheader{height:200px}
.headerwrap{width:96%;max-width:1000px;margin:0 auto;}
.logo{float:left;}
    .logo img{max-width: 150px; width: 100%; display: block}

.header-right{float:right;width: calc(100% - 200px); margin-top: 3.7em;}

/*==========================================================

NAVIGATION

===========================================================*/
/* see menumaker.css for additional nav styles */


/*==========================================================

SLIDESHOW

===========================================================*/

.slides{background:#000;padding:0;color:#fff;position:relative;}

.cycle-slideshow{box-shadow: 0px 2px 5px 1px rgba(0,0,0,.75);}
.cycle-slideshow img{
    width:100%;
}

/* pager */
.cycle-pager { 
    text-align: center; width: 100%; z-index: 500; position: absolute; bottom: 10px; overflow: hidden;display:none;
}
.cycle-pager span { 
    font-family: arial; font-size: 50px; width: 16px; height: 16px; 
    display: inline-block; color: #ddd; cursor: pointer; transition: all .5s ease-in-out; 
}
.cycle-pager span.cycle-pager-active { color:#2885b3;}
.cycle-pager > * { cursor: pointer;}

.vira{background:rgba(0, 0, 0, 0.83); padding: 20px 0}

/*==========================================================

CONTENT STYLES

===========================================================*/

.formcont{background: #fad200}
.formcont p{color: #fff; font-weight: 700; font-size: 17px}

iframe.mapa{border:0; width:100%; height: 350px; display: block}

.local{margin: 2em auto; border: 1px solid #444444; box-sizing: border-box; padding: 2em; background: #fff }
.local p{line-height: 25px; font-weight: 600; }
.local h4{margin-top: 15px}

.manuwrap{margin: 2em auto; box-sizing: border-box; padding: 2em; background: #000}
.manulogo {text-align: center}
    .manulogo img{ max-width: 100%; padding: 15px; display: inline-block}

/*==========================================================

HOME PAGE

===========================================================*/

.grayclear{
    background: rgba(0, 0, 0, 0.54);
    position: relative
}
.grayclear p, .grayclear a{color: #fff!important}

/*==========================================================

BUTTONS

===========================================================*/   
a.morebutton {
    background:#fff; 
    padding:15px 0; 
    color:#000!important; 
    line-height:1em; 
    text-decoration: none;
    display: block;
    text-transform: uppercase;
    margin:1em auto 0 auto;
    max-width: 200px; 
    box-sizing: border-box; 
    text-align:center; 
    font-weight: 500;
    font-size: 16px;
    }
    a.morebutton:hover{background:#000; color:#fff!important;}


.newsletterSignup{text-align: center}
.newsletterSignup input {
    background: rgba(204, 204, 204, 0.69);
    width:390px;
    border: 1px solid #fff;
    box-sizing: border-box;
    border-radius: 0px;
    padding: 15px;
    color: #fff;
    margin: 5px auto;
    text-align: center;
}

.newsletterSignup input:focus {
    border: 1px solid #fad200!important;
    border: 0px;
    outline: none;
    color: #fff;
}

.newsletterSignup input.button,
.newsletterSignup input.button:focus {
    padding:15px 0; 
    background: #fad200;
    color:#000!important; 
    line-height:1em; 
    text-decoration: none;
    display: block;
    text-transform: uppercase;
    margin:1em auto 0 auto;
    max-width: 200px; 
    box-sizing: border-box; 
    text-align:center; 
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
}

.newsletterSignup input.button:hover {
    background: #000;
    color: #fad200!important;
}

    
/*==========================================================

SCROLLING INVENTORY

===========================================================*/

.scrolling-wrap {
    width:100%;
    height:90px;
    overflow:hidden;
    background: #fff;
    padding: 10px 0;
}

.scrolling{
    width:100%;
    height:92px;
}


/*==========================================================

FORM

===========================================================*/

.order-form{display:block;}
#formpage{padding:0;}
form{ margin:0 0 0;}
label{
    display:block;
    font-size:16px;
    padding-top: 4%;
    width:100%;
}
input{
    border: #fad200 solid 1px;
    border-radius: 2px;
    padding: 12px;
    font-size:14px;
    box-sizing:border-box;
    margin:0 1% 10px 0  ;
    width: 99%;
}
input.half{width:49%;float:left;}

input:focus{ outline: #fad200 solid 1px!important;}

input.button2{
    display:block;
    width:200px;
    padding: 10px 0;
    margin:10px 0 0 0;
    background-color:#000;
    color:#fff;
    border: 0;
    -webkit-transition:.3s ease-in;  
    -moz-transition:.3s ease-in;  
    -o-transition:.3s ease-in;  
    transition:.3s ease-in;
}

input.button2:hover{
    background-color:#4d4d4d;
    cursor:pointer;
}

select{
    border:#fad200 solid 1px;
    border-radius: 2px;
    padding: 2%;
    font-size:14px;
    box-sizing:border-box;
    width:98%;
    margin:0 1% 10px;
    color:#969696;
}
select.half{width:48%;float:left;}

textarea{
    font-family: 'Montserrat', sans-serif;
    border: #fad200 solid 1px;
    border-radius: 2px;
    padding: 10px;
    font-size:14px;
    width:99%;
    margin:0 0 10px 0  ;
    box-sizing:border-box;
}
textarea:focus{ outline: #fad200 solid 1px!important;}

.CaptchaPanel {
    margin: 0px auto!important;
    text-align: center;
    padding: 0px !important;
}

.CaptchaWhatsThisPanel a{color: #000}
.CaptchaImagePanel,
.CaptchaMessagePanel,  
.CaptchaAnswerPanel, 
.CaptchaWhatsThisPanel {
    margin:0px 0px 0px !important;
    font-size: 12px;
    color: #000;
    text-align: center;
    font-weight:normal!important;
    padding:0px 0 0!important;
    box-sizing:border-box;
    }

.CaptchaImagePanel{}
.CaptchaMessagePanel{}
#CaptchaAnswer{margin:5px 0; width:390px;padding: 5px 0!important}
fieldset{width:98%;box-sizing:border-box;margin:0 1% 15px;background:#fff;}

.centrocerto .CaptchaImagePanel {
    float: none;
    margin: 0 auto !important;
}
.centrocerto #CaptchaAnswer{width: 100%}
.centrocerto .CaptchaImagePanel,.centrocerto .CaptchaMessagePanel,.centrocerto .CaptchaAnswerPanel,.centrocerto .CaptchaWhatsThisPanel{text-align: center!important;}
.centrocerto input.button2{width:100%; margin:10px auto 0 auto}

/*==========================================================

FOOTER STYLES

===========================================================*/

footer{
    width: 100%;
    margin: 0 auto;
    background: #000;
    color: #fff;
    padding: 1.5em 0;
}

.social{margin-top: 10px}
.social img {max-width: 100%; width: 40px; display: inline-block}

footer a,footer p{color:#fff!important;line-height: 22px}
footer a:hover{color: #fad200!important}

footer h6{text-align: right;}
h6 span a:link, h6 span a:visited, h6 span a:active{ color:#999494!important; text-decoration: underline}
h6 span{ color:#999494!important; }
h6 span a:hover{color:#fad200!important}

#contactinfo h5{margin-bottom: 0!important}
#contactinfo h6{margin-bottom: 0; text-align: left}
#contactinfo p{margin-bottom: 20px;}

/*==========================================================

RESPONSIVE STYLES

===========================================================*/

.option-name, .option-count{font-size: 12px !important;}
#inv{padding: 5% 0;}
#inv *:not(.fa):not(.far):not(.fas):not(.fab):not(.material-icons){font-family: bahnschrift, urw-din, sans-serif!important;} /* Reset font, ignore icons */

.listing-top-right a, .lower-detail-data-left button, .send-email-btn, .media-buttons a, .media-buttons button, .faceted-search, .listing-dealer-info a, .view-listing-details-link, .main-detail-data .contact-options a, .fin-calc-btn-mobile, .selected-facet, .page-nav, .apply-button, .back-button, .calculator-btn, .mobile-done-button {
-moz-border-radius: 0px !important;
-o-border-radius: 0px !important;
-webkit-border-radius: 0px !important;
border-radius: 0px !important;
}

.detail-additional-data h3{color: black !important;}
.faceted-search-content .faceted-section-box .faceted-option-checkbox-container label input {margin: 2px 3px 3px 4px;}
.faceted-text-input-searchType .search-type input[type=checkbox], .faceted-text-input-searchType .search-type  input[type=radio] {margin: 0px 3px 0px 6px;}
.faceted-search-content .faceted-section-box .faceted-option-checkbox-container label input{width: auto !important;}

.bread-crumbs-heading .return-links .return-links-link span, #no-compare-listings, .bread-crumbs-heading .return-links .return-links-link i {color:#fad200 !important;}

.list-content .list-title .list-title-text {color: black !important;}
.hosted-content .attachment-search .search-checkboxes label .row {margin-left:0 !important;margin-right:0 !important;margin-bottom:0px !important;}

.view-listing-details-link, .selected-facet, .view-listing-details-link, .buy-now-link, .check-availability-link, .email-seller-link, .offer-btn, .buy-btn, .dealer-phone-mobile, .offer-btn-mobile, .send-email-btn-mobile, .send-wholesale-email-btn-mobile, .fin-calc-btn-mobile, .mobile-breadcrumb, .main-detail-data .contact-options a, button.g-recaptcha.button, .page-nav, .apply-button, .mobile-done-button, .dealer-btns-bottom a {background:#fad200 !important;}

.selected-facet, .dealer-phone-mobile, .offer-btn, .offer-btn-mobile, .fin-calc-btn-mobile, .send-wholesale-email-btn-mobile, .send-email-btn-mobile, .buy-now-link, .view-listing-details-link, .main-detail-data .contact-options a, button.g-recaptcha.button, .page-nav, .apply-button, .mobile-done-button{border: solid 1px #fad200 !important; transition: ease all 0.2s !important;}

.selected-facet:hover, .dealer-phone-mobile:hover, .offer-btn:hover, .offer-btn-mobile:hover, .fin-calc-btn-mobile:hover, .send-wholesale-email-btn-mobile:hover, .send-email-btn-mobile:hover, .buy-now-link:hover, .view-listing-details-link:hover, .main-detail-data .contact-options a:hover, button.g-recaptcha.button:hover, .page-nav:hover, .apply-button:hover, .mobile-done-button:hover, .dealer-btns-bottom a:hover {background: #fff !important; color: #000 !important; border: solid 1px #000 !important}

.check-availability-link, .email-seller-link, .video-chat-link, .faceted-search, .faceted-show-all-btn, .cs-btns a, .calculator-btn {background: #000 !important; border: solid 1px #000 !important; transition: ease all 0.2s !important;}
.check-availability-link:hover, .email-seller-link:hover, .video-chat-link:hover, .faceted-search:hover, .faceted-show-all-btn:hover, .cs-btns a:hover, .calculator-btn:hover {background: #fff !important; color: #000 !important;}

.list-content .list-title .list-listings-count, .list-content .list-main-section .list-container .list-listing .listing-top .listing-top-left .listing-main-stats .price, #parts-content .parts-top-section .parts-title-and-breadcrumbs .parts-title .parts-listings-count, #inv .error-message, #inv .info, .detail-content .detail-main-body .main-detail-data .detail-price, .detail-content .search-results, .list-content .list-top-section .listing-option-bar .list-listings-count, .detail-price, .compare-price, .compare-title {color: #000 !important;}

/* heading */
.list-content .list-title .list-title-text, .detail-content-mobile .detail-main-body .detail-mobile-top .detail-title, .main-detail-data .detail-title, .parts-title-text {
padding-left: 4px; 
}
.faceted-search-content .faceted-section-box .faceted-option-checkbox-container label {width: auto !important; padding-top: 0 !important;}
.detail-content .detail-additional-data .data-row .data-label, .detail-content-mobile .detail-additional-data .data-row .data-label, .part-detail-additional-data .data-label, .part-detail-content .detail-contact-bar {background: #000 !important;}
.detail-content-mobile .detail-contact-bar .contact-bar-btn, .list-page-nav, .contact-options a {background: #000 !important;}
.list-main-section .contact-options a {border: #000 solid 1px !important; transition: ease all 0.2s !important;}
.list-main-section .contact-options a:hover {background: transparent !important; color: #000!important;}

.detail-content .dealer-info .phone-and-email .send-email-btn, .list-content .list-listing-mobile .dealer-phone-container a, .back-button {border-color: #000!important; color: #000!important;}

.material-icons, .collapsible-content a {color:#fff!important;}

#parts-content .parts-bottom-section .parts-list-view .parts-list-content .parts-listing-container .parts-listing-column .parts-button.view-details {background-color: #000!important;}

.detail-content-mobile .detail-main-body .main-detail-data .dealer-phone-mobile-container .dealer-phone-mobile{margin-right:0!important;}

.detail-content .detail-main-body .main-detail-data .details-fin-calc .detail-btn-calc{height: 48px !important; box-sizing: border-box;}
.dealer-name{color: black !important;}
.forcewhite a{color: white !important;}
.offer-btn{color: black !important;}
.detail-content-mobile .contact-options a {color: black !important;}
input[type=checkbox] {
background-color: initial;
cursor: default;
appearance: auto;
box-sizing: border-box;
margin: 3px 3px 3px 4px;
padding: initial;
border: initial;
}
.faceted-search-content .selected-facets-container .selected-facet {color: black !important;}


.show-all-modal .all-options-container .option-container .faceted-option-checkbox-container label {
padding-top: inherit;
width: initial;
}

.show-all-modal .all-options-container .option-container .faceted-option-checkbox-container label input {
width: initial;
}




/*==========================================================

RESPONSIVE STYLES

===========================================================*/


@media screen and (max-width: 1000px) {
.logo img {max-width: 120px;}
#spaceheader {height:186px;}
}

/* iPads (portrait and landscape) ----------- */

@media screen and (max-width: 1024px) {
.wrapper-small{width: 90%;}
.border-it{padding: 0}
.address{text-align:center; padding:12px 0 15px;}

.infocont p{line-height: normal}
.top{text-align: center; padding:2px 0 }

#acertar {
    vertical-align:middle;
    display: block;
    margin: 0 auto;
}
    
.twothird {width:100%; float:none; padding:0 ; margin: 0 auto; text-align: center}
.onethird {width:100%; float:none; padding:0 ; margin: 0 auto; text-align: center}
.dois-terco {width:100%; float:none; padding:0 ; margin: 0 auto; text-align: center}
.um-terco {width:100%; float:none; padding:0 ; margin: 0 auto; text-align: center}

.column6 {width:33%; float:left; padding:0 ; margin: 10px auto; }

}

@media screen and (max-width: 900px) {
h1,h2 {font-size: 28px;}
h3{font-size: 20px}

#titlehead2 {padding: 1em 0;}
.pad {padding: 1em 0;}
}

@media screen and (max-width: 810px) {
#quote h1 {font-size: 34px; line-height: 34px; text-align: center}

.padit{padding:2em 0;}
.address{text-align:center;padding:8px 55px 18px 55px;}
.address span a{display:none;}

.column2 {width:100%; float:none; padding:0 ; margin: 0 auto; text-align: center}
.column3 {width:100%; float:none; padding:0 ; margin: 0 auto; text-align: center}
.column4 {width:50%; float:left; padding:0 ; margin: 0 auto 1em auto; }

a.morebutton {
    max-width: 150px;
    margin: 10px auto 0 auto;
}

footer h6 {text-align: center;}
footer .last{margin-top: 20px; }
footer {padding: 2em 0; text-align: center;}
#contactinfo h6 { text-align: center;}
#contactinfo p { margin-bottom: 0;}

#mobilemore{display: block; padding-top: 2em;}
#mobileless{display: none}
.wrapper {
width: 100%;
}
}


/* iPhone 5, 6, 6+ ----------- */

@media screen and (max-width: 790px){
#spaceheader {height:190px;}
.top{ padding:5px 0 }
#acertar p{display: none}

.menudebaixo a{display: block}

}


/* Galaxy (portrait and landscape) ----------- */

@media screen and (max-width:640px){

.column4 {width:100%; float:none; padding:0 ; margin: 0 auto 1em auto;  }

.column6 {
    width:50%;
    float: left;
    padding: 0;
    margin: 10px auto;
    text-align: center;
}
.infocont h2 {margin-top: 0;}
input.half {width:100%; float:none; }
.infocont img {display: none;}
.infocont .last{margin-top: 0}

.last{margin-top: 1em}

.CaptchaImagePanel {
    float: none;
    margin: 0 auto !important;
}
#CaptchaAnswer{width: 95%}
.CaptchaImagePanel, .CaptchaMessagePanel, .CaptchaAnswerPanel, .CaptchaWhatsThisPanel{text-align: center!important;}
input.button2{width:95%; margin:10px auto 0 auto}
.newsletterSignup input {width: 95%;}


}


/* Smartphones (portrait and landscape) ----------- */

@media screen and (max-width: 530px){


.pagebottom{padding:20px 0;text-align: center;}
.divfooter {text-align:center;}
input.half{width:98%;float:left;}

.address {display: none }

.square {
    width: 100%;
    float:none;
    margin:10px auto;
}
.square h3 {padding: 100px 0 0 0}

.column6 {width:100%; float:none; padding:0 ; margin: 0 auto; text-align: center;}
}


