/*
	Site Developed by Karoline Dassie
	
    Main colors:
    - Gray: #565656
    - Red: #d10000
    - Black: #333333
*/

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

	RESET 

=======================*/
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, h7, h8, 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;}
    img { border: 0;} 
	svg:not(:root) {overflow: hidden;/*reset*/}
		
	/* clear floats */ 
	.group:before,
	.group:after {content: ""; display: table;} 
	.group:after {clear: both;}
	.group {zoom: 1;}	
	.clear { clear: both;}

    ::-moz-selection {
        background: #d10000;
        color: #fff;
        text-shadow: none;
    }

    ::selection {
        background: #d10000;
        color: #fff;
        text-shadow: none;
    }


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

	LAYOUT

=======================*/
    body {
        background:#d10000;
        font-family: 'Lato', sans-serif;
        -webkit-text-size-adjust: none;
        padding:0;
        margin: 0;
        font-size: 15px;
    }

    article{background: #fff}   
    
    .sitewidth {
        max-width:1200px;
        margin:0 auto;
    }

    .column1 {width:100%;}
    .column2 {width:49%; *width: 48%; float:left; margin-right:1%; box-sizing: border-box; text-align: right;}
    .column3 {width:30%; *width: 30%; margin:0 1.5%; float: left; box-sizing: border-box;}
    .column4 {width:25%; *width: 25%; float:left;  box-sizing: border-box; text-align: right;}
    .column5 {width:20%; float:left; padding-right:1%; box-sizing: border-box;}
    .column6 {width:16.66666%; *width: 14%; float:left; padding-right: 20px; box-sizing: border-box; margin: 0 0 20px 0;}
    
    .half {width:50%; *width: 50%; float:left; padding-right: 30px;  box-sizing: border-box;}
    .twothird{width:70%; *width: 70%; float:left; box-sizing: border-box;}
    .onethird{width:30%; *width: 30%; float:left; box-sizing: border-box; text-align:right}

    .last{padding-right:0; margin-right:0}
    .onethird img{max-width: 100%}

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

	TYPOGRAPHY 

=======================*/
    a {color:#333333; text-decoration:none; transition: all 300ms ease;}
    a:hover {color:#565656;}

    p {
        font-size:15px;
        color:#333333;
        line-height:23px;
    }

    h1 {
        font-family: 'Oswald', sans-serif;
        font-size:40px;
        color:#000;
        font-weight:900;
        text-transform: uppercase;
    }

    h2 {
        font-size:20px;
        color:#fff;
        font-weight:600;
        text-transform: uppercase;
        margin-bottom: 10px
    }

    h3 {
        
        font-size:23px;
        color:#fff;
        margin-top:9%;
        font-weight:900;
        text-transform:uppercase;
    }

    h4 {
        font-size:18px;
        color:#fff;
        font-weight:600;
    }

    h5 {
        font-size:18px;
        color:#fff;
        font-weight:900;
        margin: 0 0 15px 0;
        text-transform:uppercase;
    }

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

	HEADER

=======================*/
    .barra{margin:0 0 0 1em; color:#d10000 }

    header {
        position:relative;
        width:100%;
        background:#333333;
        z-index:999;
    }

    #main-logo {
        float:left;
        margin-top:35px;
    }

    #main-logo img{
        width:100%;
        display: block;
        max-width:270px;
    }

    .right-head{
        float: right;
    }

    .topinfo{background: #565656; padding: 10px 0; text-align: right;}
        .topinfo a, .topinfo p{color:#fff!important;font-size: 18px!important; text-decoration: none;}
       

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

	SLIDESHOW

=======================*/
    #slideshow {
        width:100%;
        position:relative;
        z-index:1;
    }

    .cycle-slideshow { width:100%; }

    .cycle-slideshow img { width:100%; float:left; }

    /* pager */
    .pager { 
        text-align:center; width:100%; margin:-50px auto -10px auto; position:relative; z-index:999; float:left;}
    .pager span { 
        font-size:50px; width:16px; height:16px; display:inline-block; color:#fff; color:#fff; cursor:pointer; 
    }
    .pager span.cycle-pager-active { color:#d10000;}
    .pager > * { cursor:pointer;}


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

	ZOOM

=======================*/
    .image-zoom-container {list-style: none;}
    .square{
        width: 32%; 
        float:left;
        margin:0;
    }
    .sqr-mid{margin:0 2%;}
    .square h4 {
        display: block;
        text-align: center;
        color:#fff!important;
        font-size: 20px;
        text-transform: uppercase;
        font-weight: 600;
    }
    
    .zoom-container {
        position: relative;
        overflow: hidden;
        display: inline-block;
        width: 100%; 
        vertical-align: top;
        box-sizing: border-box;
        float:left;
    }

    .zoom-container img {
        display: block;
        width: 100%;
        height: auto;
        -webkit-transition: all .5s ease; /* Safari and Chrome */
        -moz-transition: all .5s ease; /* Firefox */
        -ms-transition: all .5s ease; /* IE 9 */
        -o-transition: all .5s ease; /* Opera */
        transition: all .5s ease;
    }
    .zoom-container .zoom-caption {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 10;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
        background: rgba(0,0,0,0.4);
        -webkit-transition: all .5s ease; /* Safari and Chrome */
        -moz-transition: all .5s ease; /* Firefox */
        -ms-transition: all .5s ease; /* IE 9 */
        -o-transition: all .5s ease; /* Opera */
        transition: all .5s ease;
    }

    .zoom-container:hover img {
        -webkit-transform:scale(1.25); /* Safari and Chrome */
        -moz-transform:scale(1.25); /* Firefox */
        -ms-transform:scale(1.25); /* IE 9 */
        -o-transform:scale(1.25); /* Opera */
         transform:scale(1.25);
    }
    .zoom-container:hover .zoom-caption {background: none;}

    .hide-zoom-mobile{clear:both}


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

	SCROLLING

=======================*/
    .scrolling-wrap {
        width:100%;
        height:90px;
        overflow:hidden;
        background: #fff;
        padding: 3px 0;
    }

    .scrolling{
        width:100%;
        height:92px;
        background: #fff;
    }
/*--inventory--*/
    .inv-main{ padding: 2em 0; background: #fff;}
 	.inv-sitewidth {
        width:90%;
        margin:0 auto;
    }
#inv-buttonwrap {
        margin: 20px auto 0 auto;
    }
  #inv-buttonwrap a {
        color: #fff;
        text-decoration: none;
        background: #d10000!important;
        padding: 15px 0px ;
        font-size: 14px;
        border: 1px solid #fff;
        width:24.82%;
        float: left;
        text-align: center;
        font-weight: bold;
        text-transform: uppercase;
        display: block;
	    font-family: 'Lato', sans-serif;
        }
        #inv-buttonwrap a:hover{background: #333!important; transition: .3s ease-in-out all;}


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

	CONTENT

=======================*/
    .main{background: #fff; padding: 2em 0}

    #mainimg{
        background: #fff url("../siteart/mainimg.jpg") no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        padding: 20px;
        }

    iframe.map {
        border:0;
        width:100%;
        height:220px;
    }

    .center{text-align: center}
    .red{background: #d10000 }
    .pad{padding: 10px 0}
    
    a.botao{padding: 10px; display: block; color: #000; text-transform: uppercase; text-align: center; border: 1px solid #000; margin: 0 auto; width:200px;}
    a.botao:hover{background: #000; color: #fff;}
    .start{margin: 1.5em auto 2em auto;}

    #linha{width: 100%; height: 2px; background: #565656; margin:2em auto}

    #buttonwrap {
        margin: 20px auto 0 auto;
    }

    a.invbotao:link, a.invbotao:active, a.invbotao:visited {
        color: #fff;
        text-decoration: none;
        background: #d10000;
        padding: 15px 0px ;
        font-size: 14px;
        border: 1px solid #787878;
        width:24.82%;
        float: left;
        text-align: center;
        font-weight: bold;
        text-transform: uppercase;
        display: block;
        }
        a.invbotao:hover{background: #333333}

    .dashline{border: 1px dashed #333333;}

    .logosqr{float: left; width: 50%; border:1px solid #d10000; margin: 1% 0; text-align: center;  font-weight: 900}
    .logosqr:hover{transition: all 300ms ease; opacity: 0.8;}
    .logosqr img{display: block; margin: 0 auto; height: 60px;padding: 20px 0;}
    .logosqr p{background: #000; color: #fff;padding: 10px 0;}

    .pmr{width: 48%!important; margin:1% 1.5% 1% 0!important;}
    


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

	ADVANCED SEARCH

=======================*/
    #searchwrap{ background:rgba(51, 51, 51, 0.6); padding:1%; border: 1px solid #fff; width:70%; text-align: center}

    #searchwrap h4{text-align:left;color:#fff;font-weight:900;}

    .agfilter{background:#333333;}
    .consfilter{background:#333333;}
    .truckfilter{background:#333333;}
    .agfilter:hover,.consfilter:hover,.truckfilter:hover{cursor:pointer;background: #565656; transition: all 300ms ease;}
    .agselected{background:#d10000;}
    .consselected{background:#d10000;}
    .truckselected{background:#d10000;}

    .agfilter,.consfilter,.truckfilter{width: 30%; margin: 1%; display:inline-block; zoom: 1; padding: 5px 0;}
    .agfilter p,.consfilter p,.truckfilter p{color:#fff;font-size:15px;}

    .search select{width:100%;color:#565656}
    .search label{padding:0;color:#565656;font-weight:700;text-align:left;font-size:14px;}

    .search input{padding: 8px 2%; width: 95%;background:#fff;}
        .search input:focus{outline-color:#d10000;}

    .search select{padding:8px 4px;background:#fff;}
        .search select:focus{outline-color:#d10000;}

    .keyed {width: 22%; margin: 1%; display:inline-block; zoom:1;}

    #searchfull{width:96.5%;}

    .searchsubmit{
        background:#d10000!important;
        padding:8px 2%; 
        border: none; 
        color: #fff; 
        font-weight:bold;
        width:100%!important;
        transition: all 300ms ease;
    }
    .searchsubmit:hover{cursor:pointer;background: #565656!important}



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

	FORM

=======================*/
    #formpage{
        border:1px #ccc solid;
        padding:2em;
        margin:2em auto;
    }

    #formpage input {
        padding:10px 1%;
        border-radius:0;
        border:1px solid #8e8d8d;
        color:#8e8d8d;
        font-size:12px;
        margin: 0 0 1em 0;
    }

    #formpage input  {
        width:98%;
        padding:10px 1%;
    }

    #formpage textarea {
        border-radius:0;
        border:1px solid #8e8d8d;
        width:98%;
        color:#8e8d8d;
        font-size:12px;
        margin: 0 ;
        padding:10px 1%;
        height:85px;
        font-family: 'Lato', sans-serif;
    }

    #formpage input:focus,
    #formpage textarea:focus,
    #formpage select:focus {
        background:#fff; 
        color:#333333;
        border:1px solid #565656;
        border-radius:0;
        outline-style:none;
    }

    #formpage input.button,
    #formpage input.button:focus {
        display:block;
        width:200px; 
        margin:0 auto;
        padding:7px 0;
        background:#565656;
        border-radius:0;
        font-size:16px;
        cursor: pointer;
        line-height:16px;
        font-weight:bold;
        color:#fff;
        text-transform:uppercase;
		font-family: 'Lato', sans-serif;
        transition:background-color 300ms ease, background-color 300ms ease, all 300ms ease;
    }
    #formpage input.button:hover {
        background:#d10000;
        color:#fff;
    }

    /* 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;
    }
    #formpage label.checkbox {
        /*  color:#212121;*/
        font-size:13px;
        text-align:left;
        display:inline;
        padding:0;
    }

    /*control the Captcha */

    .CaptchaPanel {
        margin:1em 0 !important;
        padding:0 0 0 0 !important;
        text-align: center;
        line-height:normal !important;
    }

    .CaptchaImagePanel {
        margin:0 0 0 0;
        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;
    }

    .CaptchaAnswerPanel {
        margin:0 auto;
        width:50%;
        padding:2px 0px 2px 0px !important;
    }

    .CaptchaWhatsThisPanel {
        line-height:0;
        margin:0 0 0 0;
        padding:8px 0 8px 0 !important;
    }
    .CaptchaWhatsThisPanel a {color:#333333;}
    .CaptchaWhatsThisPanel a:hover {text-decoration:none;} 

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

	FOOTER

=======================*/
    #footer {
        background: #d10000;
        padding:2em 0;
    }

    #menufoot{text-align: left;}
    #menufoot a{color: #fff; display: block; margin: 5px 0; text-decoration: none;}
    #menufoot a:hover{color:#333333}

    a.footerlink:link, a.footerlink:visited, a.footerlink:active{
    text-decoration:underline; font-size:13px; color:#fff;}
    a.footerlink:hover {text-decoration:none; font-size:13px; color:#fff;}
    .footertext{font-size:13px; color:#fff;}
    .smallfootertext{font-size:13px; color:#fff; line-height: 1.6;}
    .divfooter {max-width:100%; text-align:right; color:#fff;}



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

	RESPONSIVE STYLES

=======================*/
@media screen and (max-width: 1515px) { 
    .boxtext {
        width: 91%;
        max-width: 100%;
        padding: 1% 3%;
        margin-top: 10em;
    }
}

@media screen and (max-width: 1200px) { 
    .sitewidth{width: 95%}
    #searchwrap{width: 98%; background:rgba(51, 51, 51, 0.4); 
}
    
@media screen and (max-width: 1185px) { 
    #inv-buttonwrap a.invbotao:link, #inv-buttonwrap a.invbotao:active, #inv-buttonwrap a.invbotao:visited {width: 24.75%;}
}


@media screen and (max-width: 1100px) { 
	#togscroll-btn{width:24%;}
    
    .boxtext {
        width: 92%;
        max-width: 100%;
        padding: 1% 2.5%;
        position: absolute;
        left: 1.5%;
        margin-top: 3em;
    }
	
    .square h4 {font-size:23px;}

	#main-logo {
		width:100%;
		float:none;
		margin:0 auto;
        text-align: center
	}
    
    #main-logo img{display: block; margin: 0 auto}
    
    .right-head {
        width: 100%;
        float: none;
        margin: 0 auto;
        text-align: center
    }
    .topinfo {
        width: 100%;
        float: none;
        margin: 0 auto;
        text-align: center
    }
    .topright {
        width: 100%;
        float: none;
        margin: 10px auto;
        text-align: center
    }
    .topright a{display: inline-block}
    header .search {
        width: 500px;
        margin: 0 auto;
        text-align: center;
    }
    .plusprala {margin-right:0;}
    .topinfo p{line-height: 20px}
    #main-logo {padding: 20px 0;}
}


@media screen and (max-width: 940px) {
	#overslide{background:rgba(0, 0, 0, 0.42); text-align:center; width:100%; left:0;}
    .onethird {
		width:100%;
		float:none;
		padding:0;
		text-align:center;
	}
	.twothird {
		width:100%;
		float:none;
		padding:1em 0;
		text-align:center;
	}
    .onethird img{max-width: 260px}
    #menufoot, .divfooter {text-align:center;}
    #inv-buttonwrap a.invbotao:link, #inv-buttonwrap a.invbotao:active, #inv-buttonwrap a.invbotao:visited {width: 50%!important;}
}

@media screen and (max-width: 855px) {
	.clear-mobile{clear:both;}
	.hide-zoom-mobile{clear:none}
    
    #topimg3{
        height: 350px;
        margin-bottom: 20px;
    }
	
	.keyed {width: 47%;}

    #topimg3 img{ max-width: 220px; display: block; text-align: center; margin: 0 auto 10px auto}
    .logosqr{float: none; width: 100%; margin:1% auto!important}
    .pmr { width: 100%!important; margin:1% auto!important}
}

@media screen and (max-width: 800px) {
    h1{text-align: center}
    h2{text-align: center}
    p{text-align: center}
	#togscroll-btn{width:30%;}
	
	#wrap-mobile{float:left; width:50%}
    
    .zoom-container{float: none;}
    .square {width: 100%; float: none; margin: 0 auto;}
    .sqr-mid { margin:2% auto;}
    
    .half{width: 100%; float: none; margin: 10px auto; padding: 0;}
    
     .boxtext {
        width: 95%;
        max-width: 95%;
        padding: 2.5%;
        position: relative;
        left: auto;
         background: #565656;
         border: 0;
        margin:0 auto;
         clear: both
    }
}

@media screen and (max-width: 610px) {  
	.agfilter, .consfilter, .truckfilter {width: 90%; margin:1px auto;}
    .keyed {width: 90%; margin:1% auto; display: block}
    a.invbotao:link, a.invbotao:active, a.invbotao:visited {width: 100%; float: none;}
	
    .main{padding: 2em 0}
	#togscroll-btn {
		margin-bottom:0;
		background:#333333;
		width:100%;
	}
    header .search {
        width:100%;
        margin: 0 auto;
        text-align: center;
    }
    #menufoot a{display: block}
}

@media screen and (max-width: 550px) {  
	
    #togscroll-btn {
		padding-left:15%;
		width:85%;
	}
	
	#inv-buttonwrap a.invbotao:link, #inv-buttonwrap a.invbotao:active, #inv-buttonwrap a.invbotao:visited {width: 100%!important;}
}