﻿/* 
    Website Developer: Karoline Dassie

    Main Colors:
    - Dark Red: #b10700
    - Red: #d30700
    - White: #fff
    - Light Gray: #1a1a1a
    - Gray: #232323
*/

/*==========================================================

    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: #ccc;
        margin: 10px 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: #b10700; 
        color: #fff;
        text-shadow: none;
    }
    ::selection {
        background: #1a1a1a;
        color: #fff;
        text-shadow: none;
    }

    html, body{
        -webkit-text-size-adjust: none; 
        -ms-text-size-adjust: 100%; 
        margin: 0;
        padding: 0;
        background:#1a1a1a url("../siteart/bg.jpg") top center repeat-x;
        line-height: normal; 
        font-family: Arial, Helvetica, sans-serif;
    }

/*==========================================================

    TYPOGRAPHY

===========================================================*/
    #mainbg h2,#mainbg h5{font-family: Arial, Helvetica, sans-serif;}

    #mainbg h1 { font-weight:900; color:#b10700; font-size:25px; text-transform: uppercase; line-height:normal;  }
	#mainbg h2 { font-weight:800; color: #fff; font-size: 20px; margin: 0 0 10px 0; line-height: normal; }
	#mainbg h3 { font-weight:900; color:#fff; font-size:18px; text-transform: uppercase; margin-bottom: 10px }
	#mainbg h4 { font-weight: 600; color: #fff; font-size: 15px; }
	#mainbg h5 { font-weight:600; color:#b10700; font-size:19px;} 
    #mainbg b{font-weight: 900}
	#mainbg p, #mainbg ul, #mainbg ol, #mainbg li { font-size: 13px; font-weight: 400; color: #fff; line-height: 22px; }

    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;
    } 

    #mainbg a:link,#mainbg a:visited,#mainbg a:active {text-decoration:underline; color: #fff}
    #mainbg a:hover {text-decoration:none; color:#b10700 }
    a:link, a:visited, a:active {text-decoration:none; color: #1a1a1a}
    a:hover {text-decoration:none;}

    .right{text-align: right}
    .center{text-align: center!important}
    .grey {font-style: italic;color: #cccccc;}

/*==========================================================

    FRAMELESS INVENTORY STYLES

===========================================================*/

    .hosted-content h1{text-align: left}
    .hosted-content h5{text-align: left}
    .hosted-content .dp-listings-wrapper .dp-listings-list .category-banner h3{line-height: normal!important; font-size: 23px!important; color: #b10700!important}
    .hosted-content .m-top-20{margin-top: 0!important}
    .hosted-content .dp-listings-wrapper .dp-listings-list .dp-listing-banner h2{font-size: 24px!important}

/*==========================================================

    LAYOUT STYLES

===========================================================*/

	.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;}
	
	.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:994px; position:relative}
    .white{background:#fff;}
    .pad{padding: 30px}

/*==========================================================

    HEADER STYLES 

===========================================================*/

    header{
        position:relative;
        width:100%;
        margin:0;
        padding:0;
        background: #D0D0D0 url("../siteart/header_bg.jpg") top center no-repeat;
        -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);
    }
    .headerleft{
        float: left;
        text-align: right;
        padding: 10px 1.5% 10px 0;
        width: 380px;
        border-right: 1px solid #f8f8f8;
        vertical-align: top;
    }
    .headerleft p{font-size: 13px; line-height: 19px; margin-right: 13px}
    .headright{float: left; border-left: 1px solid #cfcfcf; padding:10px 0 0 1.5%;}
    .headright img{border: 1px solid #b1b1b1; margin: 3px;}
    .address_info p{color: #000}

/*==========================================================

    CONTENT STYLES

===========================================================*/
    img.financelogo{max-width:200px; width:100%; height:auto; display: block; margin: 20px 0 0 0; padding: 20px; background: #1a1a1a}    

    .formcont{background: #b10700}
    .formcont p{color: #fff; font-weight: 700; font-size: 17px}

/*==========================================================

    HOME PAGE

===========================================================*/
    #mainbg{
        background:#232323;
        border: 1px #474747 solid;
        margin: 10px auto;
        position: relative;
        color: #fff;
        font-size: 14px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
    }
    .twothird{width:57%; float:left; box-sizing: border-box; border-right: 3px #000 solid; padding: 15px;background: #1a1a1a;
        -moz-border-radius-bottomleft: 10px;
        -moz-border-radius-topleft: 10px;
        -webkit-border-bottom-left-radius: 10px;
        -webkit-border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        border-top-left-radius: 10px;
    }
    .onethird{width:43%; float:left; box-sizing: border-box; font-size: 12px;padding: 15px;text-align: center;border-left: 1px #3e3d3d solid;background: #232323;
        -moz-border-radius-bottomright: 10px;
        -moz-border-radius-topright: 10px;
        -webkit-border-bottom-right-radius: 10px;
        -webkit-border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top-right-radius: 10px;
    }

    .atlogo {width: 100%; display: block; text-align: right; padding: 10px 0}
    .atlogo img{display: inline-block; text-align: right;max-width: 250px; width:100%}
    .fiftyfive{max-width: 290px; width:100%; margin: 20px auto; display: block}
    .mainphoto{max-width: 650px; width:100%; margin: 20px 0; }
    
    .darkerbg{background: #1a1a1a!important}
    .assoc{
        background: #232323;
        margin: 20px 0 0 0;
        padding: 10px;
    }
    .assoc a{color: #fff; font-size: 11px;font-weight:normal; text-decoration: underline}
    
    #manulinks{float: right; width: 40%}
    
    #manulogos{float: left; width: 60%}
    #manulogos img{display: inline-block; margin: 0 2%;}

    a.botaoat {
        text-decoration: none!important;
        text-align: center;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 14px;
        display: block;
        padding: 8px 0;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        border: 2px #cccccc solid;
        color: #C63131!important;
        margin: 5px auto 50px auto;
        max-width: 400px;
        
        background: rgba(238,238,238,1);
        background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(238,238,238,1)), color-stop(100%, rgba(204,204,204,1)));
        background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%);
        background: -o-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%);
        background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%);
        background: linear-gradient(to bottom, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc', GradientType=0 );
        }
        a.botaoat:hover{background:#C63131; color:#fff!important;}

/*==========================================================

    CONTACT PAGE

===========================================================*/
    iframe.mapa{border:0; width:100%; display: block; height:540px;}

    .onethird-cont{width:40%; float:left; box-sizing: border-box; border-right: 3px #000 solid; padding: 15px;background: #1a1a1a;
        -moz-border-radius-bottomleft: 10px;
        -moz-border-radius-topleft: 10px;
        -webkit-border-bottom-left-radius: 10px;
        -webkit-border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        border-top-left-radius: 10px;
    }

    .twothird-cont{width:60%; float:left; box-sizing: border-box; font-size: 12px;padding: 15px;text-align: center;border-left: 1px #3e3d3d solid;background: #232323;
        -moz-border-radius-bottomright: 10px;
        -moz-border-radius-topright: 10px;
        -webkit-border-bottom-right-radius: 10px;
        -webkit-border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top-right-radius: 10px;
    }

/*==========================================================

    FOOTER STYLES

===========================================================*/
   
    .divfooter {
        max-width: 450px;
        width: 100%;
        text-align: center;
        margin: 15px auto;
    }
    .smallfootertext {
        font-size: 8pt;
        color: #999999;
    }
    .footertext {
        font-size: 10pt;
        color: #999999;
    }
    a.footerlink:link, a.footerlink:visited, a.footerlink:active {
        text-decoration: underline;
        font-size: 10pt;
        color: #fff;
    }

/*==========================================================

    NAVIGATION

===========================================================*/
/* see menumaker.css for additional nav styles */


/*==========================================================

    INVENTORY STYLES

===========================================================*/



#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 */

.dp-list-content .dp-listing-portion-title, .dp-list-content .dp-listing-description, .dp-list-content .dp-listing-widgets a, .dp-list-content .dp-list-listing .dealer-name{color: #000 !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;}


.bread-crumbs-heading .return-links .return-links-link span, #no-compare-listings, .bread-crumbs-heading .return-links .return-links-link i {color:#b90e00 !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:#b90e00 !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 #b90e00 !important; color: #fff !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: #b90e00 !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;}

.dp-list-content .dp-list-title .dp-list-listings-count, .dp-list-content .dp-list-main-section .dp-list-container .dp-list-listing .dp-listing-top .dp-listing-top-left .dp-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, .dp-list-content .dp-list-top-section .dp-listing-option-bar .dp-list-listings-count, .detail-price, .compare-price, .compare-title {color: #000 !important;}
 
/* heading */
.dp-list-content .dp-list-title .dp-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; 
}

.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, .dp-list-page-nav, .contact-options a {background: #000 !important;}
.dp-list-main-section .contact-options a {border: #000 solid 1px !important; transition: ease all 0.2s !important;}
.dp-list-main-section .contact-options a:hover {background: transparent !important; color: #000!important;}

.detail-content .dealer-info .phone-and-email .send-email-btn, .dp-list-content .dp-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;}










/*==========================================================

    RESPONSIVE STYLES

===========================================================*/
    
/* iPads (portrait and landscape) ----------- */
 
@media screen and (max-width: 1030px) {
   .twothird{width:100%; float:none;  border-bottom: 3px #000 solid;
        -webkit-border-top-left-radius: 10px;
        -webkit-border-top-right-radius: 10px;
        -moz-border-radius-topleft: 10px;
        -moz-border-radius-topright: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    .onethird{width:100%; float:none;border-top: 1px #3e3d3d solid;
        -webkit-border-bottom-right-radius: 10px;
        -webkit-border-bottom-left-radius: 10px;
        -moz-border-radius-bottomright: 10px;
        -moz-border-radius-bottomleft: 10px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    #manulogos { text-align: right;}
    .atlogo {text-align: center; padding:10px 0 0 0}
    .headerleft{float:none;padding: 10px 0;width: 100%;border-bottom: 1px solid #f8f8f8; border-right:0; vertical-align: middle;text-align: center;}
    .headright{float: none;padding:0; width: 100%;border-top: 1px solid #cfcfcf; border-left: none; text-align: center}
    .headright img{margin: 1%; max-width: 176px; width:100%}
    .address_info{display: none}
    
     iframe.mapa{height:300px;}

    .onethird-cont{width:100%; float:none; border-top: 1px #3e3d3d solid; text-align: center;
        -webkit-border-bottom-right-radius: 10px;
        -webkit-border-bottom-left-radius: 10px;
        -moz-border-radius-bottomright: 10px;
        -moz-border-radius-bottomleft: 10px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    .twothird-cont{width:100%; float:none;  border-bottom: 3px #000 solid;
        -webkit-border-top-left-radius: 10px;
        -webkit-border-top-right-radius: 10px;
        -moz-border-radius-topleft: 10px;
        -moz-border-radius-topright: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
}

@media screen and (max-width: 850px) {
    .wrapper {width: 90%;}
    #mobilemore{display: block; padding-top: 2em;}
    #mobileless{display: none}
}


/* iPhone 5, 6, 6+ ----------- */

@media screen and (max-width: 736px){
    h2, article p{text-align: center} 
    .assoc{
        background: #232323;
        margin: 20px 0 0 0;
        padding: 10px;
    }
    .assoc a{color: #fff; font-size: 11px;font-weight:normal; text-decoration: underline}
    
    #manulinks{float: none; width: 100%; text-align: center}
    #manulogos{float: none; width: 100%; text-align: center}
    #manulogos img{display: inline-block; margin: 1%;}
    
    img.financelogo {
        margin: 20px auto 0 auto;
    }
}


/* Galaxy (portrait and landscape) ----------- */

@media screen and (max-width:660px){
    .headright img{width:30%}
    .CaptchaImagePanel {
        float: none;
        margin: 0 auto !important;
    }
    #CaptchaAnswer{width: 100%}
    .CaptchaImagePanel, .CaptchaMessagePanel, .CaptchaAnswerPanel, .CaptchaWhatsThisPanel{text-align: center!important;}
    input.button2{width:100%; margin:10px auto 0 auto}
}


/* Smartphones (portrait and landscape) ----------- */

@media screen and (max-width: 500px){
    #menu-button {font-size: 20px!important;}
    input.half{width:98%;float:left;}
}
 
@media screen and (max-width: 320px){

}


