@charset "utf-8";

/*
    Site Developer: Karoline Dassie

    Main Colors
    - Black: #000
    - Whte: #fff
    - Yellow: #f7c918
    - 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: 'Source Sans Pro', sans-serif;
        font-weight:normal;
        margin:0;
        padding:0;
        background: #f7c918;
}
    
    .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: 80%; margin: 0 auto;}
    .wrapper-width-small {width: 75%; margin: 0 auto; max-width: 1220px; text-align:center;}
    .inventory-width {width: 80%; margin: 0 auto; padding-bottom: 40px;}
    .pad{padding:2em 0;}

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

    h1 { font-size:25px; color:#fff; text-transform:uppercase; font-weight: 900; margin-bottom: 20px;}
    h2 { font-size:18px; color:#000; text-transform:uppercase; font-weight: 900;}
    h3 { font-size:14px; color:#000; text-transform:uppercase; line-height: normal}
    h4 { color: #000;font-size: 28px; text-transform: uppercase}

    p  { line-height: 26px; color: #000; font-size:17px; font-weight:500; }
    a  { text-decoration:none; transition: all 300ms ease;}
    article a{color:#787878; text-decoration: underline}
    article a:hover{text-decoration: none}
    strong, b{font-weight:900}

/* ================ HEADER STYLES ============= */
    
    .darkgraybg{background: #787878}
    .top{padding: 10px 0 ; text-align: right; color: #fff}
    .topleft{float: left; text-align: left;  }
    .topright a{color:#f7c918 !important;  font-size:21px; text-transform: uppercase; font-weight: 900 }
    .topright p{color:#f7c918;  font-size:21px; text-transform: uppercase; font-weight: 900; margin-left: 15px; display: inline-block}
    .topleft p, .topleft a{color:#fff; float: right; text-align: right; font-style: italic; font-size: 23px;}
    a.btntop{border: 1px solid #000; color: #fff!important; padding: 3px 10px; font-size: 19px}
    a.btntop:hover{background: #fff; color: #000!important}
        
    .headerbg {
        width: 100%; 
        margin: 0 auto; 
        background:#000 url("../siteart/header-back.jpg") no-repeat left; 
        padding:33px 0; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        border-bottom: 4px solid #f7c918;
    }
    .headerbg a {text-decoration: none!important;}

    .logo {float: left; width: 280px; display: block;}
    .logo img{ width: 100%; max-width:  280px; }
    .header-direita {width: calc(100% - 280px); display: block; float: right; text-align: right; margin-top: 13px;}

/* ================ FRAMELESS INV ============= */
    .hosted-content #listings-title {font-size: 25px!important;line-height: normal!important;}
    .hosted-content .listings-wrapper .listings-list .category-banner h3{line-height: normal!important; font-size: 20px}
    .hosted-content #listings-title{color:#f7c918;  }
    .hosted-content .listings-wrapper .listings-list .listing-banner { background: #f7c918!important;}
    a.btncat{display: inline-block; padding: 5px; border: 1px solid #ccc; text-decoration: none!important}    
    a.btncat:hover{background:#000; color: #fff}
        
/* ================ CONTENT ============= */
    article{background: #fff;}
    .graybg{background: #c1c1c1}
    .yellowbg{background: #f7c918}
    .pattern{background:#000 url(../siteart/pattern.jpg) repeat;}
    .pattern p{color:#fff}
    .blackbg{background: #000}
    .blackbg p{color:#fff}

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

    .zoom-container {float:left; width:25%; position: relative; overflow: hidden; display: inline-block; border: 1px solid #fff;  -moz-box-sizing: border-box;-webkit-box-sizing: border-box; box-sizing: border-box;margin:0;}

    .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 {position: absolute; right: 0; bottom: 0; left: 0; z-index: 9; background: rgba(0, 0, 0, 0.5); height:25%; -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: 20px; text-transform: uppercase; color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width:100%;}

    .zoom-container:hover .zoom-caption {background: #f7c918; color: #000}
    .zoom-container .zoom-caption h4:hover{color: #000}

/* ================ 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: #f7c918; border: 1px solid #f7c918; 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:#f8f8f8; padding: 2%; margin: 1em 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: 'Source Sans Pro', 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: 'Source Sans Pro', 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: #000 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;}


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

    .footlinks a{
        display: inline-block; 
        padding: 6px ; 
        margin: 3px 2px; 
        font-size: 15px; 
        font-weight: 500;  
        color: #000;
    }
    .footlinks a:hover{background:#fff }

    .footright {text-align: right}
    .footright a, .footright p{color: #000; font-size: 14px; font-weight: 600;  }
    .footright .fa{font-size: 30px; margin: 0 0 5px 5px}
    .footright a:hover{color:#fff}


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

@media screen and (max-width: 1530px) {
    .wrapper {width: 90%;}
}

@media screen and (max-width: 1025px) {
    h1 {font-size: 27px;}
    .zoom-container .zoom-caption h4 {font-size: 21px;}
    label#title {font-size: 27px;}
    h3 {font-size: 27px;}
    .headerbg {padding: 15px 0;}
    .logo {float: none; margin: 0 auto;}
    .logo img{margin: 0 auto; text-align: center; display: block}
    .header-direita { width: 100% ;display: block;float: none;text-align: center; margin: 0 auto }
}

@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: 14px;}
    
    .onethird {padding: 0;}
    .footright{margin:1em auto 0 auto}
    .twothird, .onethird {width: 100%;text-align: center; float: none; display: block}
    
    .locsqr h4{font-size: 15px}
}

@media screen and (max-width: 700px) {
	.col_left {font-size:20px;}
	.zoom-container {width:49%;}
    article p, article h1{text-align: center}
    .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;}
    a.btncat{display: block; width: 100%;margin: 0 auto; text-align: center}   
	.zoom-container .zoom-caption h4 {font-size: 14px;}
}

@media screen and (max-width: 620px) {
    .pad{padding:1em 0;}
	.pageleft {float:none; width:100%;}
	.pageright {float:none; width:100%;}
 
    a.btntop{display: block; }
    .topleft, .topright{float: none; text-align: center;  }
    .topright a{ font-size:18px; }
    .topright p{display: block; margin: 0 auto; font-size:20px; }
    .topleft p{float:none; text-align:center; font-size: 18px;}
    .footlinks a {
        display: block;
        padding: 5px;
        margin: 0 auto;
    }
}

@media screen and (max-width: 580px) {
	.formfield {width:100%;}
}

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