/* 
    Website Developer: Karoline Dassie

    Main Colors:
    - Blue: #0017ab
    - Light Blue: #5d8ee1
    - Dark Red: #c3000a
    - Bright Red: #ff0030
    - White: #fff
    - Light Gray: #b7bcc0
    - Black: #282828
*/

/*==========================================================

    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: #0017ab; 
        color: #fff;
        text-shadow: none;
    }
    ::selection {
        background: #b7bcc0;
        color: #fff;
        text-shadow: none;
    }

    html, body{
        -webkit-text-size-adjust: none; 
        -ms-text-size-adjust: 100%; 
        margin: 0;
        padding: 0;
        background: #282828!important;
        line-height: normal; 
        font-family: 'Titillium Web'!important;
    }

/*==========================================================

    TYPOGRAPHY

===========================================================*/
    h1 { font-weight:400; color:#282828; font-size:27px; text-transform: uppercase; line-height:normal; margin-bottom:15px }
	h2 { font-weight:600; color:#5d8ee1; font-size:40px; text-transform: uppercase; }
	h3 { font-weight:600; color:#fff; font-size:25px; text-transform: uppercase; margin-bottom: 10px }
	h4 { font-weight:800; color:#b7bcc0; font-size:15px; text-transform: uppercase;}
	h5 { font-weight:600; color:#0017ab; font-size:19px;} 
    b{font-weight: 900}
	p, ul, ol, li { font-size: 14px; font-weight: 400; color: #5f5f5f; line-height: 26px; }

    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: #999494}
    a:hover {text-decoration:none;}
    .center{text-align: center!important}
    .right{text-align: right}

    .forcered{background: #c3000a!important}
    .forcebrightred{background: #ff0030!important}


/*==========================================================

    LAYOUT STYLES

===========================================================*/

	.column1 {width:100%;}
	.column2 {width:50%; float:left; 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; }
    .metade{float: left; width: 50%; padding-right: 30px;box-sizing: border-box;}

	.last{padding-right:0!important; margin-right:0!important;}
    .midcolumn {padding:0 20px;}
	.center{text-align:center}
    .wrapper{ width:90%; margin:0 auto; padding:0; max-width:1370px; position:relative}
    
    .white{background:#fff;}
    .pad{padding:2em 0;}

   
/*==========================================================

    HEADER STYLES 

===========================================================*/

    #headerwraptrk{
        position:relative;
        width:100%;
        margin:0;
        padding:0;
        background:url("../siteart/diagonal-noise.png")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);
    }

    .header-righttrk{float:right; width:530px; text-align: right; margin: 10px 0 0 0}
    .logotrk{float:left; width:30%; padding: 0; background: #fff;}
    .logotrk img{max-width:260px; width: 100%; display: block; margin: 0 auto; }

    a.headerbtnon{display: inline-block; margin: 1%; padding: 1% 20px; border: 2px solid #fff; text-align: center; background: #0017ab; color: #fff; font-weight: 500}
    a.headerbtnon:hover{color: #fff}
    a.headerbtnoff{display: inline-block; margin: 1%; padding: 1% 20px; border: 2px solid #fff; text-align: center; color: #000; font-weight:700}
    a.headerbtnoff:hover{background: #fff}

    #headerwrap{
        position:relative;
        width:100%;
        margin:0;
        padding:0;
        background:url("../siteart/diagonal-noise.png")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);
    }

    .blueline{background: #5d8ee1; height:10px;}
    .redline{background: #c3000a; height: 10px}

    .logo{float:left; width:30%; padding: 0; background: #fff;}
    .logo img{max-width:260px; width: 100%; display: block; margin: 0 auto; }
    
    .header-right{float:right; width:70%; text-align: right; margin: 10px 0 0 0}

    a.headerbtnonmat{display: inline-block; margin: 1%; padding: 1% 20px; border: 2px solid #fff; text-align: center; color: #000; font-weight: 700}
    a.headerbtnonmat:hover{background: #fff}
    a.headerbtnoffmat{display: inline-block; margin: 1%; padding: 1% 20px; border: 2px solid #fff; text-align: center; background: #ff0030; color: #fff; font-weight:500}
    a.headerbtnoffmat:hover{color: #fff}

/*==========================================================

    NAVIGATION

===========================================================*/
/* see menumaker.css for additional nav styles */


/*==========================================================

    CONTENT STYLES

===========================================================*/
    article{background: #fff}
    .formcont{background: #0017ab}
    .formcont p{color: #fff; font-weight: 700; font-size: 17px}
    iframe.mapa{border:0; width:100%; height: 300px; display: block}

/*==========================================================

    HOME PAGE

===========================================================*/
    
    #graybg{background:#282828}
    #graybg h1{ color:#fff;}
    #graybg p{color: #fff;}
    #mainphoto img{width: 100%; max-width: 100%; height: auto}
    #graybg a:link, #graybg a:visited, #graybg a:active {text-decoration:none; color: #fff}

    /*
        a.yellowbtn {
            background:#5d8ee1; 
            padding:15px 0; 
            color:#fff; 
            border-radius:3px; 
            line-height:1em; 
            text-decoration: none;
            display: block;
            max-width: 200px; 
            box-sizing: border-box; 
            margin: 10px 0 0 0; 
            text-align:center; 
            text-transform: uppercase;
            font-weight: 500;
            font-size: 16px;
        }
        a.yellowbtn:hover{background:#0017ab; color:#fff; border-radius:3px;}
    */

/*==========================================================

    SCROLLING INVENTORY

===========================================================*/

    .scrolling-wrap {
        width:100%;
        height:90px;
        overflow:hidden;
        background:#5d8ee1;
        padding: 1em 0;
    }

    .scrolling{
        width:100%;
        height:92px;
    }

/*==========================================================

    BRANDS

===========================================================*/
    
    .brand{ 
        background:#fff url("../siteart/header_bg.jpg") no-repeat center; 
        text-align: center; 
        padding: 2em 0;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    .brand img{
        height: 70px; 
        display: inline-block; 
        margin: 1% 2%;
    }

    .brandhead{  
        text-align: center; 
        padding:1.5em 0 0 0;
        width: calc(100% - 530px - 30%);
        float: left;
    }

    .brandhead img{
        width: 18%;
        display: inline-block;
        margin: 0.5%;
    }


/*==========================================================

    FORM

===========================================================*/
    
    .formcont {
        background: #f8f8f8;
        padding: 2%;
        margin: 1em auto;
    }
    .order-form{display:block;}
    #formpage{padding:0;}
    form{ margin:0 0 0;}
    label{
        display:block;
        font-size:16px;
        padding-top: 4%;
        width:100%;
    }
    .forcarred input{border-color: #ff0030!important;}
    input{
        border: #0017ab solid 1px;
        border-radius: 2px;
        padding:6px 12px;
        font-size:14px;
        box-sizing:border-box;
        margin:0 1% 10px 0  ;
        width: 99%;
        font-family: 'Titillium Web';
    }
    input.half{width:49%;float:left;}
    .forcarred input:focus{outline-color: #c3000a!important}
    input:focus{ outline: #0017ab solid 1px!important;}

    input.button2{
        display:block;
        width:200px;
        padding: 10px 0;
        margin:10px 0 0 0;
        background-color:#282828;
        color:#fff;
        border: 0;
        -webkit-transition:.3s ease-in;  
        -moz-transition:.3s ease-in;  
        -o-transition:.3s ease-in;  
        transition:.3s ease-in;
    }

    .forcarred input.button2:hover{background-color: #c3000a!important}
    input.button2:hover{
        background-color:#5d8ee1;
        cursor:pointer;
    }
    
    .forcarred select{border-color: #ff0030!important;}
    select{
        border:#0017ab solid 1px;
        border-radius: 2px;
        padding: 2%;
        font-size:14px;
        box-sizing:border-box;
        width:98%;
        margin:0 1% 10px;
        color:#969696;
    }
    select.half{width:48%;float:left;}

    .forcarred textarea{border-color: #ff0030!important;}
    textarea{
        font-family: 'Titillium Web';
        border: #0017ab solid 1px;
        border-radius: 2px;
        padding: 10px;
        font-size:14px;
        width:99%;
        margin:0 0 10px 0  ;
        box-sizing:border-box;
    }
    textarea:focus{ outline: #0017ab solid 1px!important;}
    .forcarred textarea:focus{outline:  #ff0030 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{color: #000;}
    #CaptchaAnswer{margin:5px 0; width:395px}
    fieldset{width:98%;box-sizing:border-box;margin:0 1% 15px;background:#fff;}

    .centrocerto .CaptchaImagePanel {
        float: none;
        margin: 0 auto !important;
    }
    .centrocerto #CaptchaAnswer{width: 100%}
    .centrocerto .CaptchaImagePanel,.centrocerto .CaptchaMessagePanel,.centrocerto .CaptchaAnswerPanel,.centrocerto .CaptchaWhatsThisPanel{text-align: center!important;}
    .centrocerto input.button2{width:100%; margin:10px auto 0 auto}
    
    

/*==========================================================

    FOOTER STYLES

===========================================================*/

    .bottom{
        width: 100%;
        margin: 0 auto;
        background:#0017ab;
        color: #fff;
    }
    .bottom a, .bottom p{color:#fff!important}
    .bottom a:hover{color: #fff!important}

    .caixabtm{
        border:1px solid #fff; 
        text-align: center; 
        padding: 20px 0 25px 0;
        width: 47%;
        float: left;
        display: block;
        margin: 0 1%;
    }

    footer{
        width: 100%;
        margin: 0 auto;
        background: #282828;
        color: #fff;
        padding: 2em 0;
        text-align: center;
    }
    footer h3{font-size: 15px!important; margin-bottom: 5px }
    footer h3 a:link,footer h3 a:visited,footer h3 a:active {color: #fff}
    footer p{ font-weight: 600; font-size: 12px;}    
    footer a:hover{color: #fff}
    
    img.bobcatresp{max-width:240px; width:100%; display: block; margin: 0 auto 10px auto}

/*==========================================================

    RESPONSIVE STYLES

===========================================================*/


/* iPads (portrait and landscape) ----------- */

@media screen and (max-width: 1212px) {
    .brandhead{  
        text-align: center; 
        padding: 0;
        width: 100%;
        float: none;
    }
    .brandhead img{width: 7%;}
    .header-righttrk {width: 60%;}
    .logotrk {width: 40%; padding: 34px 0}
}


@media screen and (max-width: 1025px) {
    .logo {width: 50%;}
    .header-right {width: 50%;}
    .logotrk {padding: 50px 0}
    a.headerbtnon {display: block;padding: 1% 10px; margin: 2%}
    a.headerbtnoff {display: block;padding: 1% 10px; margin: 2%}
    a.headerbtnonmat{display: block;padding: 1% 10px; margin: 2%}
    a.headerbtnoffmat{display: block;padding: 1% 10px; margin: 2%}
    
    .brandhead img {width: 10%;}
}


@media screen and (max-width: 850px) {
    article h1{text-align: center}
    article h2{text-align: center}
    article p{text-align: center; font-size: 16px;}
    .wrapper {width: 90%;}
      
    #mobilemore{display: block; padding-top: 2em;}
    #mobileless{display: none}
    .metade{width:100%; float:none; padding:0 ; margin: 0 auto; text-align: center}
    .brand img { margin: 1%; height: 50px}
}


/* iPhone 5, 6, 6+ ----------- */

@media screen and (max-width: 736px){
    .last h3 {margin:20px 0 0 0;}
    h3{margin:0}
    .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:50%; float:left; padding:0 ; margin: 0 auto; }
    

    .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}
    
    .brandhead img {width: 16%;}
    .brandhead{padding: 10px 0 0 0}
    .header-right {
        float:none;
        width: 100%;
        text-align: center;
        margin: 0 auto; 
        padding: 10px 0;
    }
    .header-righttrk {
        float:none;
        width: 100%;
        text-align: center;
        margin: 0 auto; 
        padding: 0;
    }
    .logotrk {    
        float:none;
        width: 100%;
        padding: 15px 0;
    }
    .logotrk img {max-width: 230px}
    .logo {    
        float:none;
        width: 100%;
        padding: 15px 0;
    }
    .logo img {max-width: 230px}
    
    input.half{width:98%;float:left;}
    .menubaixo a { display: block;font-size:17px; margin: 10px auto;}

    .caixabtm {
        border: 1px solid #fff;
        text-align: center;
        min-height: auto;
        padding: 10px 0;
        width: 100%;
        float: none;
        display: block;
        margin: 20px  auto;
    }
}
    

@media screen and (max-width:540px){
    .esconder{display: none!important}
    .mostrarmobile{display: block;}
    .brand{padding: 1em 0}
    .brand img {margin:5px auto;height: 50px; display: block}
}