/* Site Developed by Karoline Dassie

    Main Colors
    - Red: #a11317
    - Dark Blue: #163a76
    - Light Blue: #2982b8
    - Dark Gray: #282828
    - White: #fff
    - Black: #000
*/

/* 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; box-sizing: border-box; font-family: 'Roboto Condensed', sans-serif; font-style:normal; -webkit-text-size-adjust:none;}
ol, ul {list-style: none;}
table{border-collapse:collapse; width:100%;}
td{vertical-align:top;}

/* Make HTML 5 elements display block-level for consistent styling */  
header, nav, article, footer, address, img {display: block;} 

/* Clearfix */
.cf:before,.cf:after {content: " "; display: table;}
.cf:after {clear: both;}
.cf {*zoom: 1;}
*, *:before, *:after {box-sizing: inherit;}
.clear{clear: both}

/* ======================== LAYOUT ======================== */
    body {font-size:14px; line-height:20px; background: #fff; overflow-x:hidden;}
    .sitewidth {width:80%; margin:0 auto;}
    .sitewidth-inv {width:80%; margin:0 auto;}

    .column_two   {display:inline-block; vertical-align:top; width:49%;}
    .column_three {display:inline-block; vertical-align:top; width:33%;}
    .column_four  {    
        display: block;
        vertical-align: top;
        width: 25%;
        float: left;
        padding: 0;
        margin: 0;
    }
    .pad-slide{padding: 1em 0 2em 0}
    .pad{padding: 3em 0}
    hr{margin: 2.5em 0 2em 0}
    
    .metade{width: 50%; float: left}
    .terco{width: 33%; float: left}

/* ======================== TYPOGRAPHY ========================*/
    h1,h2{font-family: 'Oswald', sans-serif;}

    h1 {font-size: 50px; line-height: normal; color:#fff; font-weight: 100; text-transform: uppercase}
    h2 {font-size: 25px; line-height: normal; color: #282828;}
    h3 {font-size: 24px; line-height: normal; }
    h4 {font-size: 20px; line-height: normal; text-transform: uppercase; color:#2982b8; font-weight: 600;}

    p {font-size:18px; margin:5px 0 15px; line-height:25px;}
    a:link, a:visited, a:active {text-decoration:none;}
    a:hover {transition: all 300ms ease; text-decoration:none; color:#005a94;}
    .linke a:link, .linke a:visited, .linke a:active {text-decoration:none; color:#2982b8}
    .linke a:hover, .linke a:hover {text-decoration:none; color:#a11317}

     a.botao:link, a.botao:visited, a.botao:active {text-decoration:none; color:#2982b8; border:1px solid #2982b8; text-align: center; font-weight: 800; text-transform: uppercase; padding: 15px 0 ; width:200px; display: block; margin: 20px 0 0 0 }
     a.botao:hover, a.botao:hover {text-decoration:none; color:#a11317; border:1px solid #a11317; }



/* ======================== HEADER AND NAVIGATION ======================== */
    .central-header{
        width: 100%;
        padding: 3em 0 0; 
        position: fixed;
        z-index: 99;
        background: #fff
    }
    .central-header a{color: #fff!important}
    .espacoheader{height: 144px}

    .central-header-inv{
        background: #fff; 
        width: 100%;
        padding: 3em 0; 
    }
    .central-header-inv a{color: #fff!important}
    .logomobile{display: none}

    /*find this under menu.css */   


/* ======================== CONTENT STYLES ======================== */
    #main {width:100%; margin:0 auto;}
    #main img {width:100%;}
    .tagline {background: #282828; padding: 20px 0}
    .tagline-base {background: #282828; padding: 2px 0 6px 0; /*margin-top: -49px; */z-index: 0; position: relative;}

    .pageleft {
        float:left; 
        width:65%; 
        padding:3em 10% 0 10%;
    }
    .pageleft h2{margin-bottom: 20px}
    .pageright {
        float: right;
        padding: 3% 0 3% 10%;
        width: 35%;
        background:#2a82b8 url("../siteart/bg2.jpg") no-repeat; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        color:#fff; 
        font-family: 'Oswald', sans-serif; 
        font-size: 25px;
        font-weight: 500; 
        
    }


    .contato .pageright {
        padding: 1em 0 3em 10%;
    }
    .contato .pageright p, .contato .pageright a {
        color:#fff; 
        font-family: 'Oswald', sans-serif; 
        font-size: 20px;
        font-weight: 500;
        line-height: normal;
        margin: 0!important;
        padding: 0!important;
        text-transform: uppercase;
    }

    .pageright a {
        color:#fff; 
        font-family: 'Oswald', sans-serif; 
        font-size: 25px;
        font-weight: 500;
        text-transform: uppercase;
    }
    .pageright a:hover{color: #ccc}

    .line {border-top:1px solid #ccc; width:100%; margin:15px 0;} 
    .contato .line {border-top:1px solid #ccc; width:100%; margin:20px 0 0 0;} 
    .whitebg{background: #fff}
    iframe.mapa{display: block; width: 100%; height: 350px; border: none!important}

/* ======================== CTA BOXES ======================== */
    .CTAbox1{background: #163a76 url("/siteart/compactors.png") no-repeat center center; text-align: center; padding: 3.5em 0;
      
    }

    .CTAbox2{background: #2982b8 url("/siteart/excavator.png") no-repeat center center; text-align: center; padding: 3.5em 0;        
   
    }

    .CTAbox3{background: #163a76 url("/siteart/aggregate.png") no-repeat center center; text-align: center; padding: 3.5em 0;
       
    }

    .CTAbox4{background: #2982b8 url("/siteart/wheelloaders.png") no-repeat center center; text-align: center; padding: 3.5em 0;
     
    }

    .CTAbox1:hover, .CTAbox2:hover,.CTAbox3:hover ,.CTAbox4:hover{opacity: 0.7; transition: all 300ms ease; cursor: pointer}
    .CTAbox1 a, .CTAbox2 a, .CTAbox3 a, .CTAbox4 a{font-family: 'Oswald', sans-serif; color: #fff; text-transform: uppercase; font-size: 30px; font-weight: 500}


/* ======================== SCROLLING INVENTORY ======================== */
    .scrolling-wrap {width:100%; height:90px; background: #fff; overflow:hidden;}
    .scrolling{width:100%; height:92px;}


/* ======================== MANUFACTURERS ======================== */
    #manu {background:#fff; text-align:center;}
    #manu img {display:inline-block; vertical-align:middle; padding: 0 2% 2% 2%; width: 15%;}

.img-responsive {max-width: 100%; height: auto; display:block; }
.myreview {max-height: 170px;}


/* ======================== FOOTER ======================== */
    .copyright{background: #282828; padding: 10px 0; text-align: center;}
    .copyright p, .copyright a{color: #d5d5d5; font-size: 14px; letter-spacing: 1px;}
    .copyright a:hover{color: #fff}

    .footer {background:#000; padding:3em 0;}
    .footer a, .footer p, .footer a[href^="tel:"]{color:#d5d5d5!important; font-weight: 600; text-transform: uppercase; font-size:14px; letter-spacing: 1px}
    .footer a:hover{color: #fff!important}
    .footer h4{margin-bottom: 10px; letter-spacing: 1px;}


/* ======================== FORM ======================== */
    #formpage {vertical-align:top;}
    #formpage div {vertical-align:top; padding:5px 8px;}
    #formpage input {padding:8px; border:1px solid #8e8d8d; color:#8e8d8d; font-size:12px;}
    #formpage textarea {padding:8px; border:1px solid #8e8d8d; color:#8e8d8d; font-size:12px;}

    /* 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 #8e8d8d; color:#000; vertical-align:middle; font-size:12px; line-height:normal; padding:8px; background: #fff; width: 100%}
    #formpage input  {width:100%;}
    #formpage input.larger  {width:100%;}
    #formpage textarea {width:100%; height:120px;}
    #formpage input.checkbox {padding:0; border:0; margin:0 5px 0 0; width:13px; height:13px; display:inline; background-color:#fff;}
    #formpage input.radio {padding:0;  border:0; margin:0 5px 0 0; width:15px; height:15px; display:inline;}

    /* focus states of various types of fields */
    #formpage input:focus,
    #formpage textarea:focus,
    #formpage select:focus {background:#8e8d8d; color:#FFF; border:1px solid #16598d; outline-style:none;}
    #formpage input.radio:focus,
    #formpage input.checkbox:focus {background:none; border:0;	outline-style:none;}

    #formpage input.botones,
    #formpage input.botones:focus {width:200px;  margin:10px 0 0 0; padding:15px 0 ; font-size:14px;line-height:14px; font-weight:bold; color:#fff;  text-transform:uppercase; cursor: pointer; background:#2982b8; border:1px solid #2982b8;}
    #formpage input.botones:hover {background:#a11317; fborder:1px solid #a11317; }

    /*control the Captcha */
    .captcha {width:33%;  padding: 0!important;}
    .CaptchaPanel {margin:0 0 0 0 !important; padding:0 0 0 0 !important; text-align:left !important; line-height:normal !important;}
    .CaptchaImagePanel {margin:0 0 0 0; padding:0 0 0 0!important}
    .CaptchaMessagePanel {padding:8px 0  !important; margin:0 0 0 0 !important; font-weight:normal !important; font-size:12px; line-height:14px;}
    .CaptchaAnswerPanel {margin:0 0 0 0; padding:0 0!important;}
    .CaptchaWhatsThisPanel {line-height:normal;	margin:0 0 0 0; padding:8px 0 0 0 !important;}
    .CaptchaWhatsThisPanel a {color:#000;}
    .CaptchaWhatsThisPanel a:hover {text-decoration:none;} 
    .submit{padding: 0!important}

/* SHOWROOMS */

.showrooms-grid{
	display: flex;
    flex-wrap: wrap;
	justify-content: space-around;
}
.showrooms-grid a{
	width: 260px;
	overflow: hidden;
	margin: 10px;
	text-align: center;
}
.showrooms-grid a img{
	display: inline !important;
	max-width: 100%;
	filter: brightness(1.1) grayscale(0.1);
	padding: 20px;
}
 
/* ======================== RESPONSIVE STYLES ======================== */
@media screen and (max-width: 1480px) {
    #search input{background-position:235px 4px;}

    .column_three {width:30%;}
}

@media screen and (max-width: 1220px) {
    #search input{background-position:225px 4px;}
    .espacoheader{height: 0}
    
    .pageright {padding: 6% 0 5% 10%;}
    .central-header{padding: 0; position: relative; }
    .central-header-inv{padding: 0; position: relative; }
    .logomobile{display: block; padding-top: 5px;}
    .logomobile img{display: block; margin: 0 auto 10px auto; text-align: center}
    .pad-slide{padding:20px 0}
    .pad{padding:2em 0}
    .tagline-base{ margin: 0}
    .sitewidth-inv {width:95%; margin:0 auto;}
    
    .contato .pageleft {
        width:55%; 
    }
    .contato .pageright {
        width: 45%;
        font-size: 18px;
        padding: 3em 2% 4em 5%;
    }
    iframe.mapa{width: 95%; height: 400px}
}

@media screen and (max-width: 1100px) {
    .terco {
        width: 50%;
    }
}

@media screen and (max-width: 1040px){
    h1 {font-size: 38px;}
    #search input{width: 60%; background-position:245px 4px; padding:8px 20px 5px; font-size:13px;}
    .captcha {width:50%;}
    
    .column_four {width:50%;}
    
    .footer .column_four {height: 170px;}
    
    .pageright a {font-size: 20px;}
    .pageleft {padding: 3em 2% 0 5%;}

    .CTAbox1{background: #163a76 url("/siteart/compactors.png") no-repeat center center;
    }

    .CTAbox2{background: #2982b8 url("/siteart/excavator.png") no-repeat center center;
    }

    .CTAbox3{background: #2982b8 url("/siteart/aggregate.png") no-repeat center center;
    }

    .CTAbox4{background: #163a76 url("/siteart/wheelloaders.png") no-repeat center center; 
    }

}

@media screen and (max-width: 800px) {
    .tagline{text-align: center}
    .tagline-base{text-align: center; margin: 0}
    .lista{text-align: center}
    .pageright {
        padding: 2% 0;
        width: 100%;
        float: none;
    }
    .pageleft {
        padding: 2% 0;
        width: 80%;
        margin: 0 auto;
        float: none;
        text-align: center;
    }
    .pageright a {
        font-size: 20px;
        display: block;
        border: 1px solid #fff;
        width: 80%;
        margin: 15px auto;
        padding: 10px 0;
    }
    
    
    iframe.mapa{width: 90%; height: 250px; margin: 0 auto}
    .contato .pageleft {
        padding: 2% 0;
        width: 100%;
        float: none;
    }
    .contato .pageright {
        padding: 30px 0 0 0;
        width: 100%;
        float: none;
    }
    .contato .pageright p{display:block; text-align: center}
    .contato h1{text-align: center}
    .contato .pageright a{    
        font-size: 18px;
        display: inline-block;
        border: none;
        width: auto;
        text-align: center;
    }
    .contato .pageright p{    
        font-size: 18px;
    }
    
    .contato .line{display: block}
    .line{display: none}
    #manu img { width: 24%;}
    .terco {
        width: 100%;
        float: none
    }
    
    .column_two{width:100%; display: block}
    .about .column_two {text-align: center}
}

@media screen and (max-width: 649px) {
    h1 {font-size: 29px;}
    #search input{width: 75%; background-image:none; padding:8px 20px 5px; font-size:13px;}
    .captcha {width:75%;}
   
    .col_two {display:block; width:100%;}
    
    .CTAbox1 a, .CTAbox2 a, .CTAbox3 a, .CTAbox4 a {font-size: 25px;}
    
    .CTAbox1{background: #163a76 url("/siteart/compactors.png") no-repeat center center;
      
        padding: 4em 0;
    }

    .CTAbox2{background: #2982b8 url("/siteart/excavator.png") no-repeat center center;
     
        padding: 4em 0;
    }

    .CTAbox3{background: #2982b8 url("/siteart/aggregate.png") no-repeat center center;
       
        padding: 4em 0;
    }

    .CTAbox4{background: #163a76 url("/siteart/wheelloaders.png") no-repeat center center; 
     
        padding: 4em 0;
    }
    
    .copyright {
        width: 80%;
        margin: 0 auto;
    }
    .footer .column_four{width: 100%; height: auto; display: block; text-align: center}
    
}
 

@media screen and (max-width: 420px){
    h1 {font-size: 25px;}
    
    #search input{width: 100%; margin:.5em auto; background-image:none; padding:8px 0 5px; text-align:center; font-size:13px;}
    

    .captcha {width:100%;}
    .CaptchaPanel {text-align:center !important;}
    #formpage input.botones,#formpage input.botones:focus {width:100%;}

    .col_two {display:block; width:100%;}	


}