﻿ /* 
    Website Developer: Karoline Dassie

    Main Colors:
    - Red: #d10000
    - White: #fff
    - Gray: #333333
    - Black: #000
*/

/*==========================================================

    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: #d10000; 
        color: #fff;
        text-shadow: none;
    }
    ::selection {
        background: #d10000;
        color: #fff;
        text-shadow: none;
    }

    html, body{
        -webkit-text-size-adjust: none; 
        -ms-text-size-adjust: 100%; 
        margin: 0;
        padding: 0;
        background: #d10000!important;
        line-height: normal; 
        font-family: 'Lato', sans-serif!important;
    }

.slogan h1 {font-weight:100; color:#fff; font-size: 25px; text-transform: uppercase; font-family: 'Oswald', sans-serif; display: flex; justify-content: center; background-color: black; padding: 5px;}
.slogan p {font-weight:100; color:#fff; font-size: 25px; text-transform: uppercase; font-family: 'Oswald', sans-serif; display: flex; justify-content: center; background-color: black; padding: 5px;}
.logo p {font-weight: 900; color: #fff; font-size: 40px; line-height: normal; }
/*==========================================================

    TYPOGRAPHY

===========================================================*/
    h2{font-family: 'Oswald', sans-serif;}

    h1 { font-weight:900; color:#fff; font-size:40px; line-height:normal;}
	h2 { font-weight:100; color:#fff; font-size:25px; text-transform: uppercase;}
	h3 { font-weight:900; color:#fff; font-size:17px; text-transform: uppercase;}
    h4 { font-weight:800; color:#d10000; font-size:15px; text-transform: uppercase; margin-bottom: 7px}
	h5 { font-weight:600; color:#d10000; font-size:19px;} 
    b, strong{font-weight: 900}
	p, ul, ol, li { font-size: 15px; font-weight: 400; color: #333333; line-height: 24px; }

    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;}
    .linkunderline a {text-decoration: underline!important}
    .linkunderline a:hover {text-decoration: none!important}

    .right{text-align: right}
    .center{text-align: center!important}
    

/*==========================================================

    FRAMELESS INVENTORY STYLES

===========================================================*/
    .hosted-content .listings-wrapper, .hosted-content .listings-detail-wrapper, .hosted-content .listings-drilldown-wrapper{font-family: 'Lato', sans-serif!important;}
    .hosted-content h1, .hosted-content #listings-title{color:#333333!important;font-family: 'Lato', sans-serif; }
    .parttitle{color:#333333!important; padding: 10px 20px 10px 110px ; font-size: 2rem; font-size:900 }
    .list-content .list-top-section .listing-option-bar .list-listings-count, .modal-content .modal-top .modal-title, .info{color: #d10000!important}
    .detail-content .dealer-info .phone-and-email .send-email-btn {
        background-color: #fff!important;
        color: #d10000!important;
        border: 1px solid #d10000!important;
    }
    .button, .contact-options a, .fin-calc-mobile>a, .mobile-breadcrumb{background-color: #d10000!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;}
	
	.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}
    
    article{background: #fff}
    .wrapper{ width:96%; margin:0 auto; padding:0; max-width:1300px; position:relative}
    .whitebg{background:#fff;}
    .pad{padding:2em 0;}
    .padall{padding:2em;}
   
/*==========================================================

    HEADER STYLES 

===========================================================*/
    .top{background:#d10000; text-align: right; padding: 7px 0; color: #fff; }
    .top a, .top p{color: #fff!important; display: inline-block; margin-left: 7px; font-style: italic}

    header{
        background:#333333;
        z-index:999;
        padding: 1em 0;
    }
    .logo{float:left;width:30%;padding: 20px 0;}
    .logo img{max-width: 300px; width: 100%; display: block}
    .header-right{float:right;width:70%;}
       
    #slogan{background:#000; text-align:center; padding:10px 0;}
    
/*==========================================================

    NAVIGATION

===========================================================*/
/* see menumaker.css for additional nav styles */


/*==========================================================

    CONTENT STYLES

===========================================================*/
    .mainimg{
        background:url("../siteart/mainimg.jpg") no-repeat fixed bottom; 
        padding: 3em 0; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    .formcont{background: #d10000}
    .formcont p{color: #fff; font-weight: 700; font-size: 17px}
    iframe.mapa{border:0; width:100%; height: 400px; display: block}

    img.building{box-shadow:0px 1px 3px 0px #00000078; margin: 20px 0 0 0}

    a.botao:link, a.botao:visited, a.botao:active {
        background:#fff;
        padding:15px 0; 
        color:#000; 
        border-radius:3px; 
        text-decoration: none;
        display: block;
        width: 30%;
        float: left;
        box-sizing: border-box; 
        margin: 1% 1.5%; 
        text-align:center; 
        font-weight: 500;
        font-size: 18px;
        border: 1px solid #000;
        transition: all 300ms ease!important;
    }
    a.botao:hover{background:#d10000;  color:#fff; transition: all 300ms ease!important;}
    
/*==========================================================

    SCROLLING INVENTORY

===========================================================*/

    .scrolling-wrap {
        width:100%;
        height:90px;
        overflow:hidden;
        background: #fff;
    }

    .scrolling{
        width:100%;
        height:92px;
    }


/*==========================================================

    FOOTER STYLES

===========================================================*/

    .bottom{
        width: 100%;
        margin: 0 auto;
        background: #d10000;
        color: #fff;
    }
    .bottom a,.bottom p{color:#fff!important}
    .bottom a:hover{color: #ccc!important}

    a.footerlink:link, a.footerlink:visited, a.footerlink:active{text-decoration:underline; font-size:12px;color:#fff;}
    a.footerlink:hover {text-decoration:none; font-size:12px;color:#fff;}
    .footertext{font-size:12px; color:#fff;}
    .smallfootertext{font-size:12px; color:#fff;}
    .divfooter {width: 100%; text-align:right; margin:0; color:#fff; }


/*===================== 

FACETED INVENTORY

=======================*/


.list-content .list-main-section .list-container .list-listing .listing-top-right .view-listing-details-link, .list-content .list-listing-mobile .view-listing-details-link {
	color: #fff!important;
	background-color: #d10000!important;
}

.detail-content .detail-additional-data .data-row .data-label, .detail-content-mobile .detail-additional-data .data-row .data-label {
	color: #fff!important;
	background-color: #d10000!important;
}

.faceted-search-content .selected-facets-container .selected-facet {
	color: #fff!important;
	background-color: #d10000!important;
}

.detail-content .detail-main-body .main-detail-data .offer-btn, .detail-content .detail-main-body .main-detail-data .buy-btn {
	color: #fff!important;
	background-color: #d10000!important;
}

.detail-content-mobile .detail-contact-bar .contact-bar-btn, .detail-content-mobile .detail-main-body .main-detail-data .send-email-btn-mobile, .detail-content-mobile .detail-main-body .main-detail-data .offer-btn-mobile, .detail-content-mobile .detail-main-body .main-detail-data .dealer-phone-mobile-container .dealer-phone-mobile {
	color: #fff!important;
	background-color: #d10000!important;
	border: none!important;
}

.list-content .list-listing-mobile .dealer-phone-container .dealer-phone-call, .list-content .list-listing-mobile .dealer-phone-container .dealer-phone-text {
	border: 1px solid #d10000!important;
	color: #d10000!important;

}

.detail-content .search-results {
	color: #d10000!important;
}

.paging-container .page-navs .list-page-nav {
	color: #fff!important;
	background-color: #d10000!important;
}

.list-content .list-title .list-title-text {
	color: #d10000!important;
}

.list-content .list-title .list-listings-count {
	color: #333!important;
}

#parts-content .parts-top-section .parts-title-and-breadcrumbs .parts-title {
	color: #d10000!important;
}

#parts-content .parts-top-section .parts-title-and-breadcrumbs .parts-title .parts-listings-count {
	color: #333!important;
}

#parts-content .parts-bottom-section .parts-list-view .parts-list-content .parts-listing-container .parts-button.view-details {
	color: #fff!important;
	background-color: #d10000!important;
}

#parts-content .parts-bottom-section .parts-list-view .parts-list-content .parts-listing-container .mobile-parts-detail-container .dealer-phone-container a {
	border: 1px #d10000 solid!important;
	color: #d10000!important;
}













/*==========================================================

    RESPONSIVE STYLES

===========================================================*/
    
/* iPads (portrait and landscape) ----------- */
 
@media screen and (max-width: 1380px) {
    h2{font-size: 22px}
    .header-right {float: right;width: 50%;}
    .logo {float: left; width: 50%;}
    .pad {padding: 1.5em 0;}
    header{padding: 0}
    
}

@media screen and (max-width: 950px) {
    p{text-align: center}
    .logo{width:100%}
    .top {text-align: center;}
    .column4 {width: 50%;margin: 10px auto;text-align: center}
}

@media screen and (max-width: 810px) {
    h1{font-size: 35px}
    h2{font-size: 18px}
    .wrapper {width: 90%;}
    article p{text-align: center}
    .mainimg {padding: 1em 0;}
    a.botao:link, a.botao:visited, a.botao:active{width: 47%}
}


/* iPhone 5, 6, 6+ ----------- */

@media screen and (max-width: 736px){
    .divfooter{text-align: center}
    .last{margin-top: 20px!important}
    .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:100%; float:none; padding:0 ; margin: 0 auto; text-align: center}
}

/* Smartphones (portrait and landscape) ----------- */

@media screen and (max-width: 500px){
    h1 {font-size: 25px;}
    h2{font-size: 15px}
    #menu-button {font-size: 20px!important;}
    a.botao:link, a.botao:visited, a.botao:active {width: 100%; float: none; margin: 5px auto; font-size:15px; }
}
 


