@charset "utf-8";

/*
    Site Developer: Karoline Dassie

    Main Colors
    - Black: #000
    - Whte: #fff
    - Yellow: #fcd41a
    - Gray: #787878
    - 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: 'Open Sans', sans-serif;
        font-weight:normal;
        margin:0;
        background: #fcd41a;
        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}

    .width {width: 1600px; margin: 0 auto; max-width: 90%;}
    .wrapper{width: 90%; margin: 0 auto;}
    .wrapper-width-small {width: 75%; margin: 0 auto; max-width: 1220px; text-align:center;}
    .inventory-width {max-width: 1220px; width: 90%; margin: 0 auto; }
    .pad{padding:2em 0;}


    .newinvbtn{padding: 1em 0}

    .newinvbtn a{
        display: inline-block; 
        background: #c1c1c1;
        font-size: 16px; 
        color: #000; 
        font-weight: 700; 
        text-transform: uppercase;
        padding: 15px 0;
        width: 19.5%; margin-top: 4px;
        text-align: center;
        font-family: 'Open Sans Condensed', sans-serif;
    }
    .newinvbtn a:hover{color:#fff; background: #cccccc}








/* ================ TYPOGRAPHY ============= */

    h1{ font-size:35px; color:#000; text-transform:uppercase; font-weight:900; margin: 20px 0 10px 0}
    h2{ font-size:21px; color:#fff; text-transform:uppercase; margin-bottom: 20px; font-weight: 900;}
    h3{ font-size:24px; color:#000; text-transform: uppercase; margin-bottom: 10px; font-weight: 900}
    h4{ font-size:24px; color:#838383; text-transform: uppercase; margin-bottom: 10px; font-weight: 900}
    h5{ font-size:18px; color:#000; text-transform:uppercase; margin-bottom: 10px; font-weight: 800;}

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

/* ================ HEADER STYLES ============= */
    .headerbg {
        width: 100%; 
        background:#000; 
        text-transform: uppercase;
    }
    
    .logo { width: 250px; display: block; position: absolute; z-index: 1; margin: -30px 0 0 0;}
    .logo:hover { margin:0;}
    .logo img { width: 100%; max-width:  250px; }

    .header-direita { width: calc(100% - 250px); display: block; float: right; text-align: right; padding:2em 0;}
    .header-direita p{ color: #fcd41a; font-size: 15px;font-weight: 600; display: inline-block; margin: 0 15px}
    .header-direita a{ color: #fff!important; }

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

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

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

    .graybg{background: #c1c1c1}
    .yellowbg{background: #fcd41a}
    .whiteptrn{background:#fff url("../siteart/main-bg.jpg") repeat fixed;}
    .pattern{background:#000 url("../siteart/pattern.jpg") repeat fixed;}
    .pattern p{color:#fff}
    .blackbg{background: #000}
    .blackbg p{color:#fff}

    a.botao {
        display: inline-block; 
        border: 1px solid #fff; 
        color: #fff; 
        font-size: 14px; 
        font-weight: 800; 
        font-style:italic; 
        padding: 10px;
        text-align: center;
        margin:0;
    }
    a.botao:hover{color:#fcd41a; border-color: #fcd41a;}

	
	.home-inv h5 {text-align: center; width:100%; font-size:25px;}


    .quatrobtn{padding: 2em 0}
    .quatrobtn a{
        display: inline-block; 
        background: #c1c1c1;
        font-size: 18px; 
        color: #000; 
        font-weight: 700; 
        text-transform: uppercase;
        padding: 40px 0;
        width: 23.6%;
        margin:0 0.5%;
        text-align: center;
        font-family: 'Open Sans Condensed', sans-serif;
    }
    .quatrobtn a:hover{color:#fff; background: #cccccc}
    
    .mapa{border: 0; display: block; width: 100%; height: 300px;}

/* ================ PARTS REQUEST ============= */

    .prala{float: left; width: calc(100% - 250px); display: block}
    .praca{float: right; width: 248px; display: block; background: #ececec; border: 1px solid #ccc}
        .praca p{font-size: 18px; text-transform: uppercase; padding:5px 0; background: #fff; text-align: center; font-weight: 900}
    .praca .order-form input{padding:7px; margin: 0 auto 8px auto ; }
    .praca .formcont {
        padding:18px 5%;
        margin: 0 auto;
    }
    .praca .CaptchaPanel{width: 100%!important}
    .praca .CaptchaImagePanel {
        float: none;
        margin: 0 auto!important;
        text-align: center!important;
    }
    .praca .order-form input.button2{width: 100%; margin:10px auto 0 auto; display: block}

/* ================ DO WE NEED THIS 

    button,input,optgroup,select,textarea {font-family: inherit;font-size: 100%;line-height: 1.15; margin: 0; }
    button,input { overflow: visible;}
    button,select { text-transform: none; height:30px; width:100%;}
    button,[type="button"],[type="reset"],[type="submit"] { -webkit-appearance: button;}

    .col_left {float:left; width:55%;}
    .col_right {float:right; width:45%;}

    .pageleft {float:left; width:55%;}
    .pageright {float:right; width:40%; margin-bottom:2%;}
    .pageright img {width:100%;}
? ============= */

/* ================ 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: #fcd41a; border: 1px solid #fcd41a; 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;} 

/* ================ CONTACT PAGE ============= */

    .locsqr{float: left; width: 49%; margin: 0.5%; border:1px solid #ccc; padding: 1%}
    .locsqr h4{font-size: 20px}
    
    .formcont{ background:#ececec; 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: 'Open Sans', 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:#787878;
        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: 'Open Sans', 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;}

/* ================ SCROLLING ============= */

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


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

    .footlinks a{
        display: inline-block; 
        margin: 3px; 
        font-size: 13px; 
        font-weight: 800; 
        text-transform: uppercase; 
        color: #000;
        font-family: 'Open Sans Condensed', sans-serif; 
        
    }
    .footlinks a:hover{color:#fff }

    .footright {text-align: right; font-style: italic;}
    a.footerlink:link, a.footerlink:visited, a.footerlink:active{text-decoration:underline;font-size:11px;color: #6b6b6b}
    a.footerlink:hover {text-decoration:none;font-size:11px;}
    .footertext{font-size:11px;color: #6b6b6b}
    .smallfootertext{font-size:11px;color: #6b6b6b}
    .divfooter {text-align:right;line-height: 18px;}


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

@media screen and (max-width: 1025px) {
    .quatrobtn a { font-size: 15px; width: 48.6%; margin: 0.5%; padding: 20px 0}
    .logo{max-width: 170px;position: relative;float: left}
    .logo {width: 170px;margin:0;}
    .header-direita p{display: block}
    
    /* ================ PARTS REQUEST ============= */
    .prala{float: none; width: 100%;}
    .praca{float: none; width: 100%;}
    .praca .formcont {padding:30px 5%;}
     .praca p {font-size: 20px;}
}

@media screen and (max-width: 975px) {
	.col_left {float:none; width:100%;}
	.col_right {float:none; width:100%;}
    .footright{margin:2em auto 0 auto}
    .twothird, .onethird {width: 100%;text-align: center; float: none; display: block}
    .locsqr h4{font-size: 15px}
    .divfooter {text-align: center;}
    .centermbl{text-align: center;}
	.head {padding-right: 0% !important;}
}

@media screen and (max-width: 800px) {
    .header-direita{padding: 10px 0}
    .logo {float: none;width: 170px; margin: 0 auto;}
    .logo img{margin: -10px auto 0 auto; text-align: center;display: block}
    .logo:hover{margin: -10px auto 0 auto;}
    .header-direita { width: 100% ;display: block;float: none;text-align: center }
}

@media screen and (max-width: 700px) {
	.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;}
}

@media screen and (max-width: 620px) {
    .pad{padding:1em 0;}
	.pageleft {float:none; width:100%;}
	.pageright {float:none; width:100%;}
}

@media screen and (max-width: 580px) {
    .quatrobtn a { font-size: 15px; width: 100%; margin: 1% auto;}
	.formfield {width:100%;}
}

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

}