/* 
    Website Developer: Karoline Dassie

    Main Colors:
    - Orange: #ff6600
    - Gray: #303030
    - White: #fff
*/

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

    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;
	} 

img { border: 0; 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: #ff6600; 
    color: #fff;
    text-shadow: none;
}
::selection {
    background: #303030;
    color: #fff;
    text-shadow: none;
}

html, body{
    -webkit-text-size-adjust: none; 
    -ms-text-size-adjust: 100%; 
    margin: 0;
    padding: 0;
    background: #303030!important;
    line-height: normal;
    font-family: 'Open Sans', sans-serif; 
}

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

    TYPOGRAPHY

===========================================================*/
    h1 { font-weight:900; color:#5f5f5f; font-size:28px; line-height:normal; margin-bottom:10px; font-family: 'Poppins', sans-serif;}
	h2 { font-weight:900; color:#fff; font-size:28px; text-transform: uppercase; font-family: 'Poppins', sans-serif;}
	h3 { font-weight:600; color:#ff6600; font-size:18px; font-family: 'Poppins', sans-serif; margin-bottom: 3px }
	h4 { font-weight:500; color:#ff6600; font-size:14px; }
	h5 { font-weight:500; color:#303030; font-size:14px; } /*not used yet*/
    h6 { font-weight:900; color:#fff; font-size:14px; text-transform: uppercase; margin-bottom:10px; font-family: 'Poppins', sans-serif;}
    
	/* ---- For Inventory h2 ---- */
	.dealer-contact__header h2{
	color: #000 !important;
	}

	p, ul, ol, li { font-size: 15px; font-weight: 400; color: #5f5f5f; }

    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: #303030}
    a:hover {text-decoration:none;}

    a.appbutton {background:#ff6600; padding:10px 40px; color:#fff; border-radius:3px; line-height:1em; text-decoration: none;display: inline-block; max-width: 338px; box-sizing: border-box;}
    a.appbutton:hover{background:#303030; color:#fff; border-radius:3px;}

    .center{text-align: center!important}

    .address h4 a, .address h3 a{ color:#ff6600!important; }

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

    LIST STYLE

===========================================================*/
    ul.list{margin:0; padding: 0 0 5% 7%;}
    ul.list li{font-size:16px;}

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

    LAYOUT STYLES

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

	.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 20px; 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;}
	
	.twothird{width:70%; float:left; padding-right: 30px; box-sizing: border-box;}
	.onethird{width:30%; float:left; box-sizing: border-box; text-align:right}
	.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;}
	.center{text-align:center}

    .wrapper{ width:85%; margin:0 auto; padding:0; max-width:1200px; position:relative}
    .container{width:100%;max-width:1200px;margin:0 auto;}

    .white{background:#fff;}
    .border-it{background:#fff;padding:15px;border:#ccc 1px solid;box-sizing: border-box;}
    .padit{padding:4em 0;}

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

    SIDE POP TABS

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

    .side{background: #fff; position: fixed; z-index: 9999999999!important;}

    #FacebookTab, #YoutubeTab{display: block; height: 55px; width: 49px; position: absolute; left: -49px; top: 0;}
    #Facebook, #Youtube{z-index: 999999; cursor: pointer;}

    #Facebook{width: 315px; height: 560px; top: 180px; right: -315px;}
    #FacebookTab{background: url(../siteart/fb.png); }

    #Youtube{width: 315px; height: 200px; top: 250px; right: -315px;}
    #YoutubeTab{background: url(../siteart/weather.png); }


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

    HEADER STYLES 

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

    header{
        position:relative;
        width:100%;
        margin:0;
        padding:10px 0 0 0;
        background:#fff;
        z-index:999;
        -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
        box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
    }

    .headerwrap{width:96%;max-width:1200px;margin:0 auto;}
    .logo{float:left;width:40%;}
.logo img {width: 100%;}
    .header-right{float:right;width:60%;}
    .address{text-align:right;padding:0px 0 15px;line-height: 20px;}

    .application{float:right;font-size:14px;text-transform:uppercase;padding:5px 20px 0;border-right:#000 1px solid;margin-right:20px;}

    .address span a{
        font-size: 12px;
        padding: 5px 20px 5px 0;
        color: #000;
        vertical-align: bottom;
        border-right: #000 1px solid;
        margin-right: 20px;
        text-decoration:none;
    }

    .address span a:hover{color:#ff6600;}

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

    NAVIGATION

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


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

    SLIDESHOW

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

    .slides{background:#303030;padding:0;color:#fff;position:relative;}

    .cycle-slideshow{box-shadow: 0px 2px 5px 1px rgba(0,0,0,.75);}
    .cycle-slideshow img{
        width:100%;
    }

    /* pager */
    .cycle-pager { 
        text-align: center; width: 100%; z-index: 500; position: absolute; bottom: 10px; overflow: hidden;display:none;
    }
    .cycle-pager span { 
        font-family: arial; font-size: 50px; width: 16px; height: 16px; 
        display: inline-block; color: #ddd; cursor: pointer; transition: all .5s ease-in-out; 
    }
    .cycle-pager span.cycle-pager-active { color:#2885b3;}
    .cycle-pager > * { cursor: pointer;}


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

    CONTENT STYLES

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

    iframe.mapa{border:0; width:100%; height: 300px; display: block}
.privacylist li {
    padding: 10px 0px;
    list-style: decimal;
    list-style-position: outside;
}
.privacylist {
    width: 85%;
	padding: 10px 0px;
}
.listwidth h3{
	width: 100%;
	text-align: center;
}
.listwidth{
	justify-content: center;
    display: flex;
    flex-wrap: wrap;	
}
/*==========================================================

    HOME PAGE

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

    .welcome{
        background:#fff url("../siteart/pattern.png") center center fixed;
        border-top:#ff6600 2px solid;
        box-shadow:inset 0px -2px 3px 0px #ccc;
        position: relative
    }

    /*  CALLOUT RIBBON - HOME PAGE  */
    .ribbon{color:#fff;background:#ff6600;position:relative;padding:15px 0;text-align:left;}
    .ribbon h2{padding:0;margin:0;display:inline-block;}
    .ribbon p{font-size: 16px; font-weight: 400; color: #fff; padding:0 0;margin:0 10px;display:inline-block;}
    .ribbon a.appbutton{border:#fff 1px solid;margin:0 20px;}


    /* ICONS - HOME PAGE */
    .linkbox{position:relative;text-align:center;font-size:20px;font-weight:700;line-height: 20px;text-transform:uppercase;}

    .linkbox i{display:block;color:#ff6600;font-size:60px;padding-top:10px;padding-bottom:30px;margin-bottom:10px;background:url(../siteart/shadow.png) bottom center no-repeat;	-webkit-transition:.3s ease-in;  
        -moz-transition:.3s ease-in;  
        -o-transition:.3s ease-in;  
        transition:.3s ease-in;
    }

    .linkbox:hover i{display:block;color:#ff6600;font-size:60px;padding-top:0px;padding-bottom:40px;margin-bottom:10px;background:url(../siteart/shadow.png) bottom center no-repeat;}

    .linkbox img{margin:0 auto;display:block;color:#ff6600;padding:10px 20px 10px;padding-bottom:30px;margin-bottom:10px;background:url(../siteart/shadow.png) bottom center no-repeat;	-webkit-transition:.3s ease-in;  
        -moz-transition:.3s ease-in;  
        -o-transition:.3s ease-in;  
        transition:.3s ease-in;
    }

    .linkbox:hover img{padding-top:0px;padding-bottom:40px;}
    .linkbox a{text-decoration:none;color: #ff6600;}
    .linkbox a:hover{text-decoration:none;color:#303030;}
	

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

    SCROLLING INVENTORY

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

    .scrolling-wrap {
        width:100%;
        height:90px;
        overflow:hidden;
        background: #fff;
    }

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


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

    FORM

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

    .order-form{display:block;background:#fafafa;padding:15px 10px;border:#ccc 1px solid;}
    .order-form h4{padding-left:1%;}
    #formpage{padding:0;}
    form{ margin:0 0 0;}
    .order-form label{
        display:block;
        font-size:16px;
        padding-top: 4%;
        width:100%;
    }
    input{
        border: #999999 solid 1px;
        border-radius: 2px;
        padding: 1%;
        font-size:14px;
        box-sizing:border-box;
        margin:0 1% 10px;
    }
    input.half{width:48%;float:left;}

    input:focus{ border: #2885b3 solid 1px;}

    input.button2{
        display:block;
        width:50%;
        margin:0 auto 20px;
        border:#e29912 solid 1px;
        background-color:#ff6600;
        color:#fff;
        border-radius: 2px;
    }

    input.button2:hover{
        background-color:#4d4d4d;
        cursor:pointer;
    }

    select{
        border: #999999 solid 1px;
        border-radius: 2px;
        padding: 1%;
        font-size:14px;
        box-sizing:border-box;
        width:98%;
        margin:0 1% 10px;
        color:#969696;
    }
    select.half{width:48%;float:left;}

    textarea{
        font-family: 'Open Sans', sans-serif;
        border: #999999 solid 1px;
        border-radius: 2px;
        padding: 1%;
        font-size:14px;
        width:98%;
        margin:0 1% 10px;
        box-sizing:border-box;
    }

    .CaptchaPanel {
        margin: 0px 0px 0px 0px !important;
        text-align: center;
        padding: 0px !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:5px 0; width:50%;}
    fieldset{width:98%;box-sizing:border-box;margin:0 1% 15px;background:#fff;}

.nav-search-btn {
    padding: 1% 20px;
}
.hpinventorysect{
	text-align: center;
	padding: 18px 20px;
}
.invsearchfield{
	width: 78%;
}
/*==========================================================

    FOOTER STYLES

===========================================================*/
    footer{
        width: 100%;
        margin: 0 auto;
        background: #303030;
        color: #fff;
        padding: 3em 0;
    }

    footer p, footer a:link, footer a:visited, footer a:active{color:#fff; font-size: 13px; font-weight: 400;  line-height: 24px}
    footer a:hover{color:#ff6600; }
    h6 span a:link, h6 span a:visited, h6 span a:active, h6 span{  color:#929292!important;}


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

    FRAMELESS INVENTORY STYLES

===========================================================*/
.captcha-placeholder .button{background-color: #ff6600!important;}
.modal-content .modal-top .modal-title {color: #000!important}
.detail-content .dealer-info .phone-and-email .send-email-btn {
    color: #ff6600!important;
    border: 1px solid #ff6600!important;
}
.detail-content .detail-main-body .main-detail-data .detail-price {color: #ff6600!important;}
.list-content .list-top-section .listing-option-bar .list-sort-order .sort-by-dropdown-container .bold { width: 70px;font-size: 14px;}
.detail-content .search-results { color: #ff6600!important;}
.list-content .list-title .list-listings-count {color: #ff6600!important}
.list-content .list-main-section .list-container .list-listing .listing-top-right .view-listing-details-link, .list-content .list-main-section .list-container .list-listing .listing-top-right .buy-now-link, .list-content .list-main-section .list-container .list-listing .listing-top-right .check-availability-link, .list-content .list-main-section .list-container .list-listing .listing-top-right .email-seller-link, .list-content .list-main-section .list-container .list-listing .listing-top-right .video-chat-link{background-color: #ff6600!important}
.list-content .list-main-section .list-container .list-listing .listing-top .listing-top-left .listing-main-stats .price{color: #ff6600!important}
.faceted-search-content .faceted-section-box .faceted-option-checkbox-container .option-name {margin: 0 0 0 3px!important;font-size: 12px!important;}
.info {color: #ff6600!important;}

.faceted-search-content .selected-facets-container .selected-facet, .list-content .list-main-section .list-container .list-listing .listing-top-right .view-listing-details-link {background: #ff6600 !important;}
.hosted-content .attachment-search .search-checkboxes label .row {margin-left:0 !important;margin-right:0!important;margin-bottom:0px!important;}

.list-content .list-main-section .list-container .list-listing .listing-top-right .view-listing-details-link, .faceted-search-content .selected-facets-container .selected-facet, .list-content .list-listing-mobile .view-listing-details-link, .list-content .list-listing-mobile .buy-now-link, .list-content .list-listing-mobile .check-availability-link, .list-content .list-listing-mobile .email-seller-link, .detail-content .detail-main-body .main-detail-data .offer-btn, .detail-content .detail-main-body .main-detail-data .buy-btn, .detail-content-mobile .detail-main-body .main-detail-data .dealer-phone-mobile-container .dealer-phone-mobile, .detail-content-mobile .detail-main-body .main-detail-data .offer-btn-mobile, .detail-content-mobile .detail-main-body .main-detail-data .send-email-btn-mobile, .detail-content-mobile .detail-main-body .main-detail-data .send-wholesale-email-btn-mobile, .detail-content-mobile .detail-main-body .main-detail-data .fin-calc-btn-mobile {background:#ff6600 !important; }
.list-content .list-title .list-title-text, .detail-content-mobile .detail-main-body .detail-mobile-top .detail-title {font-size: 22px; line-height: 26px;}

.detail-content .detail-additional-data .data-row .data-label, .detail-content-mobile .detail-additional-data .data-row .data-label {background: #ff6600 !important;}
.detail-content-mobile .detail-contact-bar .contact-bar-btn, .faceted-search-content .mobile-done-button-container .mobile-done-button {background: #000 !important;}






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

    GRID

===========================================================*/
    /*  GRID OF TWELVE  */
    .span_12_of_12 {width: 100%;}
    .span_11_of_12 {width: 91.5%;}
    .span_10_of_12 {width: 83%;}
    .span_9_of_12 {width: 74.5%;}
    .span_8_of_12 {width: 66%;}
    .span_7_of_12 {width: 57.5%;}
    .span_6_of_12 {width: 49%;}
    .span_5_of_12 {width: 40.5%;}
    .span_4_of_12 {width: 32%;}
    .span_3_of_12 {width: 23.5%;}
    .span_2_of_12 {width: 15%;}
    .span_1_of_12 {width: 6.5%;}

    /*  GRID OF FIVE  */
    .span_5_of_5 {width: 100%;}
    .span_4_of_5 {width: 79.6%;}
    .span_3_of_5 {width: 59.2%;}
    .span_2_of_5 {width: 38.8%;}
    .span_1_of_5 {width: 18.4%;}

    /*  GRID OF FOUR  */
    .span_4_of_4 {width: 100%;}
    .span_3_of_4 {width: 74.5%;}
    .span_2_of_4 {width: 49%;}
    .span_1_of_4 {width: 23.5%;}

    /*  GRID OF THREE  */
    .span_3_of_3 { width: 100%; }
    .span_2_of_3 { width: 66.13%; }
    .span_1_of_3 { width: 32.26%; }


/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 720px) {
	.col {  margin: 4% 0 4% 0%; }
	.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
	.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
	.span_1_of_5, .span_2_of_5, .span_3_of_5, .span_4_of_5, .span_5_of_5 { width: 100%; }
    .span_1_of_12, .span_2_of_12, .span_3_of_12, .span_4_of_12, .span_5_of_12, .span_6_of_12, .span_7_of_12, .span_8_of_12, .span_9_of_12, .span_10_of_12, .span_11_of_12, .span_12_of_12 {width: 100%; }			
}



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

    RESPONSIVE STYLES

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

@media screen and (max-width: 1200px) {
    .wrapper{width:95%}
}

 
/* iPads (portrait and landscape) ----------- */
 
@media screen and (max-width: 1024px) {
    .logo{float:none;width:100%;text-align:center;margin: 0 auto}
    .logo img{margin: 0 auto; max-width: 350px;}
    .header-right{float:none;width:100%;}
    .address{text-align:center;padding:12px 0 15px;}
    .ribbon{text-align: center; padding: 20px 0; display: block}
    .ribbon p{margin:0 auto 5px auto; display: block}
    .ribbon h2{line-height: 23px;}
}
 
@media screen and (max-width: 768px) {
    h1 {font-size: 25px; line-height: 30px; text-align: center}
    h2 {font-size: 25px }
    h4 {font-size: 13px;}
    h3 {font-size: 15px; margin: 0}
    h6 {margin:20px auto 3px auto}
    .welcome p{text-align: center}
    .logo{float:none;text-align:center;}
    .logo img{max-width: 250px; }
    
    .padit{padding:20px 0;}
    .address{text-align:center;padding:8px 55px 18px 55px;}
    .address span a{display:none;}
    .categorybox{width: 48%;}
    footer{padding:10px 0 20px 0}
    
    .column3 {width:100%; float:none; padding:0 ; margin: 0 auto; text-align: center}
	.column4 {width:100%; float:none; padding:0 ; margin: 0 auto; text-align: center}
	.column5 {width:100%; float:none; padding:0 ; margin: 0 auto; text-align: center}
    
    .linkbox i{font-size:40px}
    .linkbox:hover i{font-size:40px;}

    .linkbox img{max-width: 70px}
}


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

@media screen and (max-width: 736px){
    .topbar ul li{float:none;padding:7px 0 7px 0;}
    .topbar ul li:last-child{float:none;padding:7px 0 7px 0;}
    .arrowdown{display:none;}	
    
    input.half {
        width: 98%;
        float: left;
        margin: 1% auto;
        padding: 3% 1%;
    }
	.invsearchfield{
		padding: 10px;
	}
    .nav-search-btn {
    padding: 10px 20px;
}
}


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

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


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

@media screen and (max-width: 480px){
    .categorybox .categorybox-title{font-size:20px;}
    .pagebottom{padding:20px 0;text-align: center;}
    .divfooter {text-align:center;}
    input.half{width:98%;float:left;}
    
    .logo{text-align:left;}
    .address {display: none }
    
    .column4 {width:100%; float:none; padding:0 ; margin: 0 auto; }
	.nav-search-btn {
    padding: 10px 13px;
}
}
 
@media screen and (max-width: 350px){
	.logo img {width: 75%;}

}