@charset "utf-8";

/*
    Site Developer: Karoline Dassie

    Main Colors
    - Black: #000
    - Whte: #fff
    - Yellow: #ffdd00
    - Green: #347d2e
    - Gray: #414141
    - Light Gray: #c1c1c1
*/

/***** BEGIN 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;}
.clear {clear: both; height:0px; margin:0;}
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

/* =============  LAYOUT ============= */
    
    html, body {
        -webkit-text-size-adjust: none; 
        overflow-x: hidden; 
        font-family: 'Montserrat', sans-serif;
        font-weight:normal;
        margin:0;
        padding:0;
    }
    
    .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: 90%; margin: 0 auto;}
    .wrapper-width-small {width: 75%; margin: 0 auto; max-width: 1220px; text-align:center;}
    .inventory-width {width: 85%; margin: 0 auto; padding-bottom: 40px;}
    .pad{padding:2.5em 0;}
/* ================ INVENTORY ============= */

.list-content .list-main-section .list-container .list-listing .listing-top-right .view-listing-details-link, .faceted-search-content .selected-facets-container .selected-facet, .list-content .list-listing-mobile .view-listing-details-link, .list-content .list-listing-mobile .buy-now-link, .list-content .list-listing-mobile .check-availability-link, .list-content .list-listing-mobile .email-seller-link, .detail-content .detail-main-body .main-detail-data .offer-btn, .detail-content .detail-main-body .main-detail-data .buy-btn, .detail-content-mobile .detail-main-body .main-detail-data .dealer-phone-mobile-container .dealer-phone-mobile, .detail-content-mobile .detail-main-body .main-detail-data .offer-btn-mobile, .detail-content-mobile .detail-main-body .main-detail-data .send-email-btn-mobile, .detail-content-mobile .detail-main-body .main-detail-data .send-wholesale-email-btn-mobile, .detail-content-mobile .detail-main-body .main-detail-data .fin-calc-btn-mobile, .list-container-flexrow .view-listing-details-link, .modal-content .form-bottom .captcha-and-submit .captcha-placeholder button, .contact-options a, .fin-calc-mobile>a {background:#347d2e !important; }
.list-content .list-title .list-title-text, .detail-content-mobile .detail-main-body .detail-mobile-top .detail-title {font-size: 22px; line-height: 26px;}

.detail-content .detail-additional-data .data-row .data-label, .detail-content-mobile .detail-additional-data .data-row .data-label {background: #347d2e !important;text-transform: uppercase; letter-spacing: 1px;}
.detail-content-mobile .detail-contact-bar .contact-bar-btn, .faceted-search-content .mobile-done-button-container .mobile-done-button {background: #000 !important;}

.detail-content .detail-main-body .main-detail-data .offer-btn, .detail-content .detail-main-body .main-detail-data .buy-btn {float:none;}
.modal-content .modal-top .modal-title, .listing-description, .list-content .listing-portion-title, .list-content .list-title .list-title-text, .detail-content .dealer-info h3, .dealer-info, .detail-content-mobile .dealer-info h3, .fin-calc p, .detail-content-mobile .detail-main-body .detail-mobile-top .detail-title {color:#000 !important;}
.dealer-btns-bottom a {background: #347d2e !important;}
.page-nav{background-color:#347d2e!important}
.search-results {color:#347d2e!important}
.bottom-section h5 {color:black!important;}
.price {color:black!important;}
.list-listings-count {color:black!important;}
.currency-selector {color:black!important;}
 .compare-price {color: black!important;} .cs-btns span, .cs-btns i {color:white!important;} .return-links span, .return-links i {color:black!important;}
/* ================ TYPOGRAPHY ============= */

    h1 { font-size:38px; color:#fff;  font-weight:700; margin-bottom: 20px}
    h2 { font-size:22px; color:#000; text-transform:uppercase; font-weight: 900; margin-bottom: 20px;}
    h3 { font-size:28px; color:#a6a6a5; font-weight: 500}
    h4 { font-size: 28px; color:#000; text-transform: uppercase}
    h5 { font-size: 18px; color:#ffdd00; font-weight: 800}
    h6 { font-size: 18px; color:#347d2e; font-weight: 600}

    p { line-height: 23px; color: #000; font-size:18px; font-weight:500; }
    a { text-decoration:none; transition: all 300ms ease; color:  #347d2e}
    strong, b{font-weight:900}

/* ================ COVID ALERT ============= */

    #covid{background:#ff0000; padding: 15px 0; text-align: center;}
    #covid a{color: #fff; font-weight: 700;font-size: 25px}

/* ================ HEADER STYLES ============= */

    .top{padding: 10px 0; background: #ffdd00; text-align:left; color: #347d2e}
    .top a{color: #347d2e; font-weight:700; text-transform: uppercase; margin: 10px;}
    .top a:hover{color: #000}

	.top-flex {display: flex; width: 90%; margin: 0 auto; align-items: center;}
	.top-flex button {background: #347d2e; color: #ffdd00; border: none; width: 200px; padding: 10px 0; font-family: 'Montserrat', sans-serif; font-weight: bold; border-radius: 8px;}
	.top-flex button:hover {background: #000;transition: .5s; cursor: pointer !important;}
	.mobile-top {display: none;}

    .headerbg {
        width: 100%; 
        margin: 0 auto; 
        background:#000; 
        padding:10px 0; 
    }
    .headerbg a {text-decoration: none!important; color: #fff}

    .logo {float: left; width:630px; display: block; margin-top: 20px}
    .logo img{ width: 100%; max-width: 630px;}

    .header-direita {width: calc(100% - 630px); display: block; float: right; text-align: right}
    .header-direita p{color: #fff; font-size:14px; font-weight: normal; }
    .header-direita p span{font-weight: 700; color: #ffde00}

    .header-direita-mobile{display: none; margin: 10px 0 0 0}    
    .header-direita-mobile a{padding: 10px 0; text-align: center; width: 33%; border: 1px solid #fff; float: left; display: block}

/* ================ FRAMELESS INV ============= */

    .hosted-content #listings-title{color:#347d2e;}
    .hosted-content .listings-wrapper .listings-list .listing-banner { background: #ffdd00!important;}

/* ================ CONTENT ============= */

    .pattern{background:#000 url(/siteart/darkTireBIG.png) repeat;}
    .pattern p{color:#a6a6a5}

    .blackbg{background: #000}
    .blackbg p{color:#fff}

    .greenbg{background:#347d2e}

    .darkgraybg{background: #414141}
    .darkgraybg p{color:#9c9c9b; font-size: 15px}
    .darkgraybg p span{color: #fff!important; font-weight: 900!important; font-size: 18px}
    
    img.allacrossimg{width: 100%; max-width: 100%; height: auto;display: block}

    a.botao {
        display:block; 
        background: #fff; 
        color: #347d2e;
        font-size: 18px; 
        text-transform: uppercase;
        font-weight: 800; 
        padding: 10px 0;
        width: 90%;
        text-align: center;
        margin:0;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
    }
    a.botao:hover{color: #fff; background: #347d2e;}

    .pracima{margin-top: 2.5em}
.quartos img{max-width: 100%}    

/* ================ ZOOM ============= */

    .zoom-container {float:left; width:32.3%; position: relative; overflow: hidden; display: inline-block; -moz-box-sizing: border-box;-webkit-box-sizing: border-box; box-sizing: border-box;margin:.5%;}

    .zoom-container img {display: block; width: 100%; height: auto; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease;}

    .zoom-container .zoom-caption {color: #347d2e; position: absolute; right: 0; bottom: 0; left: 0; z-index: 9; background:#ffdd00 ; height:33%; -webkit-transition: all .5s ease;  -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease;}

    .zoom-container .zoom-caption h4 {display: block; text-align: center; font-size: 22px; text-transform: uppercase;  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width:100%;}

    .zoom-container:hover .zoom-caption {background: rgba(254, 200, 30, 0.5); height:100%;}
    .zoom-container .zoom-caption {height:30%;}

/* ================ FORM STYLES ============= */

    #formpage {vertical-align:top; margin: 0 auto; }
    #formpage div {vertical-align:top; padding:10px 10px;  line-height: 26px;}
    #formpage input {padding:6px 5px 10px; border:1px solid #dadada; font-size:14px; background:#fff; width: 100%; margin-top: 5px;}
    #formpage textarea {padding:6px 6px; border:1px solid #dadada; color:#000; font-size:14px; background:#fff; margin-top: 5px;}

    /* selects have similar styles to input & textarea fields, but with no padding. Text in a dropdown select is positioned differently */
    #formpage select {border:1px solid #dadada; color:#282828; vertical-align:middle; font-size:16px; line-height:normal; padding:10px; margin-top:5px; width:100%; background:#fff;}

    .formfield {width:50%; float:left; margin-right: 12px; margin-top: 10px; margin: 0 auto; font-size: 16px; line-height: 2;}
    #formpage input.larger  {width:100%;}
    #formpage textarea {width:100%; height:150px;}
    #formpage input.checkbox {padding:0; border:0; margin:0 5px 0 15px; width:15px; height:15px; display:inline; background-color:#fff; color:black; text-transform:uppercase;}
    #formpage input.radio {padding:0; border:0; margin:0 5px 0 0; width:15px; height:15px; display:inline;}
    #formpage .textbox {display: inline-block; width: 100%; text-align: left; font-size: 16px;}

    /* focus states of various types of fields */
    #formpage input:focus,
    #formpage textarea:focus,
    #formpage select:focus {background:#f2f1f0; border:1px solid #abacac; outline-style:none;}
    #formpage input.radio:focus,
    #formpage input.checkbox:focus {background:none; border:0; outline-style:none;}
    #formpage input.button,
    #formpage input.button:focus {width: 200px; display: inline-block; line-height:14px; color:#fff; background: #000; padding: 10px 0px; font-size: 14px; font-weight: 600; text-decoration:none; text-transform: uppercase;  transform: none!important;}
    #formpage input.button:hover {display: inline-block; background: #ffdd00; border: 1px solid #ffdd00; line-height:14px; color:#2a2a2a; text-decoration:none;  text-transform: uppercase;  transition: all .2s ease-in-out;}
    
    /* for plain text next to an input field, if not using a table structure */
    #formpage label.basic {color:#212121; font-size:13px; text-align:left;} 

    /*control the Captcha */
    #formpage .captcha .CaptchaWhatsThisPanel a {text-align: center !important; margin-top: 10px;}
    .CaptchaPanel {margin:0 auto !important;padding:0 0 0 0 !important;line-height:normal !important;color:#000;width: 50%;text-align: center; }
    .CaptchaImagePanel {margin: 0 auto;	text-align: center !important; margin-top: 10px; padding:0 0 0 0;}
    .CaptchaMessagePanel {padding:0 0 0 0 !important; margin:0 0 0 0 !important; font-weight:normal !important; font-size:12px; line-height:14px; text-align: center;}
    .CaptchaAnswerPanel {margin:0 0 0 0; padding:2px 0px 2px 0px !important;}
    .CaptchaWhatsThisPanel {line-height:0; margin:0 0 10px 0; padding:10px 0 10px 0 !important;}
    .CaptchaWhatsThisPanel a {color:#000; text-align: center !important; border: none;}
    .CaptchaWhatsThisPanel a:hover {text-decoration:none; background: none; color: #000;} 



/* ================ SCROLLING ============= */
    
    #greenline{background: #347d2e; height: 17px; border-bottom: #fff 3px solid}
    #yellowline{background: #ffdd00; height: 7px;}

    .scrolling-wrap {
        width:100%;
        height:90px;
        overflow:hidden;
        background: #c1c1c1;
        padding:10px 0 0 0;
    }
    .scrolling{
        width:100%;
        height:92px;
    }

/* ================ CONTACT PAGE ============= */
    
    .infonow a, .infonow p{color: #fff; line-height: 26px;}
    .infonow h2{font-size:17px; margin-bottom: 5px; color: #fec82d}
    .locsqr{float: left; width: 49%; margin: 0.5%; border:1px solid #ccc; padding: 1%}
    .locsqr h4{font-size: 20px}
    
    .formcont{ background:#fec82d; padding: 2%; margin: 1em auto 2em auto}
    .formcont p{color: #fff; font-weight: 700; font-size: 14px}

    .order-form{display:block;}
    .order-form label{
        display:block;
        font-size:16px;
        padding-top: 4%;
        width:100%;
    }
    .order-form input{
        border: #ccc solid 1px;
        border-radius: 2px;
        padding: 12px;
        font-size:14px;
        box-sizing:border-box;
        margin:0 1% 10px 0  ;
        width: 99%;
        font-family: 'Montserrat', sans-serif;}
    .order-form input.half{width:49%;float:left;}

    .order-form input:focus{ outline: #000 solid 1px!important;}

    .order-form 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;
    }

    .order-form input.button2:hover{
        background-color:#414141;
        cursor:pointer;
    }

    .order-form select{
        border:#ccc solid 1px;
        border-radius: 2px;
        padding: 2%;
        font-size:14px;
        box-sizing:border-box;
        width:98%;
        margin:0 1% 10px;
        color:#969696;
    }
    .order-form select.half{width:48%;float:left;}

    .order-form textarea{
        font-family: 'Montserrat', sans-serif;
        border: #ccc solid 1px;
        border-radius: 2px;
        padding: 10px;
        font-size:14px;
        width:99%;
        margin:0 0 10px 0  ;
        box-sizing:border-box;
    }
    .order-form textarea:focus{ outline: #cc2427 solid 1px!important;}

    .CaptchaPanel {
        margin: 0px 0px 0px 0px !important;
        text-align: center;
        padding: 0px !important;
    }

    .CaptchaWhatsThisPanel a{color: #000!important}
    .CaptchaImagePanel,
    .CaptchaMessagePanel,  
    .CaptchaAnswerPanel, 
    .CaptchaWhatsThisPanel {
        margin:0px 0px 0px !important;
        font-size: 12px;
        color: #000;
        text-align: left !important;
        font-weight:normal!important;
        padding:0px 0 0!important;
        box-sizing:border-box;
        }

    .CaptchaImagePanel{float:left;margin-right:10px !important;}
    .CaptchaMessagePanel{}
    #CaptchaAnswer{margin:0 0 10px 0!important; width:100%}
    fieldset{width:98%;box-sizing:border-box;margin:0 1% 15px;background:#fff;}

/* ================ MAPA ============= */

    .mapsarea{
        background:#fff url("../siteart/mapa.jpg") no-repeat fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    .mapsarea a{color: #000}
    .mapsarea i{color: #347d2e}    
    .mapsarea img{max-width: 210px}

/* ================ FOOTER STYLES ============= */

    .blackbg{background: #000}
    
    .footlinks a{
        margin: 3px 0; 
        font-size: 13px; 
        font-weight: 600; 
        text-transform: uppercase; 
        color: #BEBEBE;
    }
    .footlinks a:hover{color:#ffdd00}

    .footright {text-align: left}
    .footright a, .footright p{color: #BEBEBE; font-size: 12px; font-weight: 500;}
    .footright a:hover{color:#ffdd00}

/* ================ RESPONSIVE ============= */

@media only screen and (max-width: 1340px) {
	.top-flex, .wrapper {width: 95%;}
}
@media only screen and (max-width: 1260px) {
	.top{display: none}
	.mobile-top {display: contents;}
	.mobile-top-bkgrd {background: #ffdd00;}
	.mobile-top-button {width: 90%; margin: 0 auto; text-align: center; padding: 10px 0;}
	.mobile-top-button button {background: #347d2e; color: #ffdd00; border: none; width: 200px; padding: 10px 0; font-family: 'Montserrat', sans-serif; font-weight: bold; border-radius: 8px;}
	.mobile-top-button button:hover {background: #000;transition: .5s; cursor: pointer !important;}
}
@media screen and (max-width: 1040px) {
    .zoom-container .zoom-caption h4 {font-size: 21px;}
    label#title {font-size: 27px;}
    
    .headerbg {padding: 10px 0;}
    .logo {float: none; max-width: 500px; width: 100%; margin: 0 auto;}
    .logo img{margin: 0 auto; text-align: center;display: block}
    .header-direita {display: none }
    .header-direita-mobile{width: 100%; display: block; float: none; text-align: center} 
    
    .column4{width: 50%; margin: 1em auto}
    
    .quartos .column4{width: 48%; min-height: 180px; margin: 0}
    .quartos img {max-width: 200px;width: 100%;}
    .pracima{margin: 0; min-height: 220px!important;}
    
    #covid{padding: 10px ;}
    #covid a{font-size: 20px}
    
}

@media screen and (max-width: 975px) {
	.col_left {float:none; width:100%;}
	.col_right {float:none; width:100%;}
	.zoom-container .zoom-caption h4 {font-size: 18px;}

    .footright{margin:2em auto 0 auto}
    .twothird, .onethird {width: 100%;text-align: center; float: none; display: block}
    
    .locsqr h4{font-size: 15px}
}

@media screen and (max-width: 800px) {
    
}

@media screen and (max-width: 700px) {
    h1 {font-size: 30px; text-align: center}
    h3 {font-size: 20px; text-align: center}
    h4 {text-align: center}
    h5 {font-size: 22px; }
    .zoom-container {width: 70%;float: none;margin: 1% auto; display: block;}
    .pattern p {text-align: center}
    p {text-align: center}
    
    .hosted-content p,.hosted-content h1, .hosted-content h3, .hosted-content h5 {text-align: left}
    
	.col_left {font-size:20px;}
    .locsqr{float: none; width: 99%; margin: 0.5% auto; padding: 1% 0; text-align: center}
    .locsqr h4{font-size: 20px}
    
    .CaptchaPanel { width: 100%!important;}
    .order-form input.half {width: 99%;float: left;}
    
    .column4{width: 100%; margin: 10px auto; text-align: center}
    .column2{float: none; width: 100%; margin: 0 auto; text-align: center}
    .mapsarea img{margin: 0 auto 1em auto}
    #covid a{font-size: 16px}
}

@media screen and (max-width: 670px) {
    .pad{padding:2em 0;}
    .darkgraybg .pad{padding: 0 0 2em 0}
	.pageleft {float:none; width:100%;}
	.pageright {float:none; width:100%;}
    .footright a, .footright p {font-size: 11px; line-height: normal;}
    
    .quartos .column4{width:100%; min-height: auto; margin: 0 auto; text-align: center}
    .quartos img {max-width: 200px; width: 100%; text-align: center; display: block;  margin: 2em auto 10px auto;}
    .pracima{margin: 0; min-height:auto!important;}
    a.botao{margin: 0 auto}
}

@media screen and (max-width: 580px) {
	.formfield {width:100%;}
    
    .header-direita-mobile a{ width: 99%; border: 1px solid #fff; float: none;}
}

@media screen and (max-width: 480px) {
	.zoom-container {width:100%;}
}
@media only screen and (max-width: 240px) {
	.mobile-top-button button {width: 100%;}
}