﻿/* 
    Website Developer: Karoline Dassie

    Main Colors:
    - Blue: #22406d
    - White: #fff
    - Light Gray: #b7bcc0
    - Gray: #8b8b8b
*/

/*==========================================================

    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: #22406d; 
        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: #22406d!important;
        line-height: normal; 
        font-family: 'Open Sans', sans-serif;
    }
    *{
        box-sizing: border-box !important;
    }

/*==========================================================

    TYPOGRAPHY

===========================================================*/
    .testimonial-text h2,h5,.heading-5{font-family: 'Open Sans Condensed', sans-serif;}

    h1, .heading-2 { font-weight:900; color:#22406d; font-size:25px; text-transform: uppercase; line-height:normal;  }
	h2 { font-weight:900; color:#22406d; font-size:20px; text-transform: uppercase; }
	h3 { font-weight:900; color:#fff; font-size:18px; text-transform: uppercase; margin-bottom: 10px }
	h4, .heading-2-grey { font-weight:800; color:#707070; font-size:15px; text-transform: uppercase;}
	h5, .heading-5 { font-weight:600; color:#22406d; 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: #dbdee1}
    a:hover {text-decoration:none;}

    .right{text-align: right}
    .center{text-align: center!important}
    #forcegreen{color: #3ea841!important}
    #forcegray{color: #8b8b8b!important}
.heroslide.slick-slide h2{
	position: relative;

    text-align: center;
    font-size: 45px;
    color: #fff;
    font-weight: 900 !important;
    text-shadow: 2px 2px 8px rgba(2, 2, 2, 1);
}
.heroslide.slick-slide h1{
	position: relative;
    text-align: center;
    font-size: 45px;
    color: #fff;
    font-weight: 900 !important;
    text-shadow: 2px 2px 8px rgba(2, 2, 2, 1);
}
.heroslide.slick-slide h1 span{
	position: relative;
    text-align: center;
    font-size: 50px;
	text-decoration: underline;
    color: #fff;
    font-weight: 900 !important;
    text-shadow: 2px 2px 8px rgba(2, 2, 2, 1);
}
.heroslide.slick-slide{
	height: 700px;
	display: flex!important;
	justify-content: center;
	align-items: center;
}
/*==========================================================

    FRAMELESS INVENTORY STYLES

===========================================================*/
    .list-content {margin-top: 40px !important;}
    .hosted-content h1{text-align: left}
    .hosted-content h5{text-align: left}
    .hosted-content .listings-wrapper .listings-list .category-banner h3{line-height: normal!important; font-size: 23px!important; color: #22406d!important}
    .hosted-content .m-top-20{margin-top: 0!important}
    .hosted-content .listings-wrapper .listings-list .listing-banner h2{font-size: 24px!important}

/*==========================================================

    LAYOUT STYLES

===========================================================*/

    .column1 {width:100%;}
    .column1.center-text p {text-align: center;}
	.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}
    
    article{background: #fff}
    .wrapper{ 
		width:96%; 
		margin:0 auto; 
		padding:0;
		max-width:1300px; position:relative}

    .white{background:#fff;}
    .pad{
		padding:3em 0;
}

   
/*==========================================================

    HEADER STYLES 

===========================================================*/
    .top{background:#b7bcc0; padding: 7px 0; color: #fff}
        .top a, .top p{color: #22406d}
    .top .mrglft{ margin-left: 20px}

    header{
        position:fixed;
        width:100%;
        margin:0;
        padding:0;
        background:#22406d;
        z-index:999;
        -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);
    }

    #spaceheader{height:152px}
    .headerwrap{width:96%;max-width:1000px;margin:0 auto;}
    .logo{float:left;width:30%;padding: 20px 0;}
        .logo img{max-width: 300px; width: 100%; display: block}
    
    .header-right{float:right;width:70%;}
    .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:#b7bcc0 1px solid;margin-right:20px;}

    .address span a{
        font-size: 12px;
        padding: 5px 20px 5px 0;
        color: #b7bcc0;
        vertical-align: bottom;
        border-right: #b7bcc0 1px solid;
        margin-right: 20px;
        text-decoration:none;
    }

    .address span a:hover{color:#22406d;}

/*==========================================================

    NAVIGATION

===========================================================*/
/* see menumaker.css for additional nav styles */


/*==========================================================

    SLIDESHOW

===========================================================*/

    .slides{background:#b7bcc0;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

===========================================================*/
    #graybtm{background:#5c5a5a}

    .formcont{background: #22406d}
    .formcont p{color: #fff; font-weight: 700; font-size: 17px}
    
    iframe.mapa{border:0; width:100%; height: 400px; display: block}
    #overmap{display: block; text-align: center ; margin: 0 auto -8em auto; position: relative; padding: 4em 0 0 0}

    
    img.shaferlogo{max-width: 400px; width: 100%; margin: 0 auto;  display: block;}
    img.itrlogo{max-width: 170px; width: 100%; display: inline-block; }
    img.officePic {margin: 10px; float: left}

/*==========================================================

    HOME PAGE

===========================================================*/
    .welcome{
        background:#fff;
        box-shadow:inset 0px -2px 3px 0px #373737;
        position: relative
    }

    a.morebutton {
        background:#22406d; 
        padding:15px 0; 
        color:#fff; 
        border-radius:3px; 
        line-height:1em; 
        text-decoration: none;
        display: block;
        max-width: 150px; 
        box-sizing: border-box; 
        margin: 10px 0 0 0; 
        text-align:center; 
        font-weight: 500;
        font-size: 16px;
        }
        a.morebutton:hover{background:#b7bcc0; color:#fff; border-radius:3px;}
    
    .manu{margin: 2em auto 0 auto; text-align: center}
    .manu a{width: 19%; display: inline-block; text-align: center; margin: 1% 0}


/*==========================================================

    OUR TEAM PAGE STYLES

===========================================================*/   

    .teampage h4, .heading-2-grey{font-size: 25px!important}
    .team{width: 46%; margin: 1% 1% 1% 0; border: 1px solid #ccc; padding: 1%; display: inline-block; float: left;}
    .team img{max-width: 100%; width:200px; display: block; float: left; margin: 0 20px 0 0}
    .teampage a:link,.teampage a:visited,.teampage a:active {text-decoration: underline;color: #5f5f5f;}
	.teampage h2.heading-2-blue{font-size: 25px; color: #22406D;}
    .ITRBOX{width: 46%; margin: 1% 1% 1% 0; border: 1px solid #fff; padding: 1%; display: inline-block; float: right;}
    .ITRBOX img{min-width: 200px; width: 100%; display: block; margin: 0 auto}
	

/*==========================================================

    SCROLLING INVENTORY

===========================================================*/

    .scrolling-wrap {
        width:100%;
        height:90px;
        overflow:hidden;
        background: #fff;
    }

    .scrolling{
        width:100%;
        height:92px;
    }


/*==========================================================

    FORM

===========================================================*/

    .order-form{display:block;}
    #formpage{padding:0;}
    form{ margin:0 0 0;}
    label{
        display:block;
        font-size:16px;
        padding-top: 4%;
        width:100%;
    }
    input{
        border: #22406d solid 1px;
        border-radius: 2px;
        padding: 12px;
        font-size:14px;
        box-sizing:border-box;
        margin:0 1% 10px 0  ;
        width: 99%;
    }
    input.half{width:49%;float:left;}

    input:focus{ outline: #22406d solid 1px!important;}

    input.button2{
        display:block;
        width:200px;
        padding: 10px 0;
        margin:10px 0 0 0;
        background-color:#b7bcc0;
        color:#fff;
        border: 0;
        -webkit-transition:.3s ease-in;  
        -moz-transition:.3s ease-in;  
        -o-transition:.3s ease-in;  
        transition:.3s ease-in;
    }

    input.button2:hover{
        background-color:#4d4d4d;
        cursor:pointer;
    }

    select{
        border:#22406d 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;}

    textarea{
        font-family: 'Open Sans', sans-serif;
        border: #22406d solid 1px;
        border-radius: 2px;
        padding: 10px;
        font-size:14px;
        width:99%;
        margin:0 0 10px 0  ;
        box-sizing:border-box;
    }
    textarea:focus{ outline: #22406d solid 1px!important;}

    .CaptchaPanel {
        margin: 0px 0px 0px 0px !important;
        text-align: center;
        padding: 0px !important;
    }

    .CaptchaWhatsThisPanel a{color: #fff!important}
    .CaptchaImagePanel,
    .CaptchaMessagePanel,  
    .CaptchaAnswerPanel, 
    .CaptchaWhatsThisPanel {
        margin:0px 0px 0px !important;
        font-size: 12px;
        color: #fff;
        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: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: #707070;
        color: #fff;
    }
    .bottom a, .bottom p{color:#fff!important}
    .bottom a:hover{color: #22406d!important}

    footer{
        width: 100%;
        margin: 0 auto;
        background: #22406d;
        color: #fff;
    }
    footer h3{font-size: 14px!important}
    footer p{ font-weight: 600; color: #dbdee1;}    
    footer a:hover{color: #fff}
    .menubaixo a{margin-right: 8px;font-size: 13px;}

/*==========================================================

    RESPONSIVE STYLES

===========================================================*/
    
/* iPads (portrait and landscape) ----------- */
 
@media screen and (max-width: 1250px) {
    .logo{max-width: 220px;}
    .header-right {width: calc(100% - 220px);}
    #spaceheader {height: 133px;}
			.heroslide.slick-slide{height: 550px;}

	.heroslide.slick-slide h1 {
		font-size: 35px;
		line-height: 35px;
	}	
	.heroslide.slick-slide h1 span{
		font-size: 40px;
		line-height: 40px;
	}	
	.heroslide.slick-slide h2 {
		font-size: 35px;
		line-height: 35px;
	}
}
}
@media screen and (max-width: 1025px) {
    .header-right {float: right;width: 50%;}
    .logo {float: left; width: 50%;}
    .pad {padding: 1.5em 0;}
    .manu a {width: 19.4%;}
		.heroslide.slick-slide{height: 400px;}
}

@media screen and (max-width: 850px) {
    .wrapper {width: 90%;}
    
    .menubaixo a {margin-right: 5px;}
 
    h1{text-align: center}
    .teampage h4{text-align: center}
    article p{text-align: center}
    
    a.morebutton {
        max-width: 150px;
        margin: 10px auto 0 auto;
    }

    #mobilemore{display: block; padding-top: 2em;}
    #mobileless{display: none}
    
    .team{width: 98%; margin: 1% auto; display:block; float: left;}
    .teampage p {text-align: right}
    .ITRBOX {width: 98%; margin: 1% auto; display:block; float: none;}
    
    img.shaferlogo, img.officePic{display: block; margin: 0 auto; float: none;}
    .onethird, .twothird {width:100%; float:none; padding:0 ; margin: 0 auto; text-align: center}
}


/* iPhone 5, 6, 6+ ----------- */

@media screen and (max-width: 736px){
    .manu a {width: 49%;}
    .manu{text-align: left}
    h3 {margin:20px 0 0 0;}
    .first h3{margin:0;}    
    
    .top .last{display: none}
    .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; }

}


/* Galaxy (portrait and landscape) ----------- */

@media screen and (max-width:640px){

    .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}
}


/* Smartphones (portrait and landscape) ----------- */

@media screen and (max-width: 500px){
    .logo img {max-width: 150px;}
    #menu-button {font-size: 20px!important;}
    #spaceheader {height: 115px;}
   
    	.heroslide.slick-slide h1 {
		font-size: 28px;
		line-height: 28px;
	}
    	.heroslide.slick-slide h1 span{
		font-size: 33px;
		line-height: 33px;
	}	
	.heroslide.slick-slide h2 {
		font-size: 28px;
		line-height: 28px;
	}
    input.half{width:98%;float:left;}
    
    .team{width: 98%; margin: 1% auto; display:block; float:none}
    .teampage p {text-align: center}
    .team img{float: none; margin: 0 auto}
		.heroslide.slick-slide{height: 250px;}
     .manu a {width: 99%;}
}

/*---- faceted links  ----*/
.faceted-search-content .faceted-section-box .faceted-option-checkbox-container label {
    font-size: 14px !important;
}
.list-content .list-top-section .sticky-top-menu {
    position: relative !important;
}

.faceted-search-content .faceted-section-box .faceted-option-checkbox-container label input {
    margin-right: 5px !important;
    width: auto !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 .check-availability-link,
  .detail-content .detail-main-body .main-detail-data .offer-btn, .detail-content .detail-main-body .main-detail-data .buy-btn,
  .detail-content .detail-additional-data .data-row .data-label, .faceted-search-content .selected-facets-container .selected-facet, .paging-container .page-navs button.list-page-nav,
  .modal-content .form-bottom .captcha-and-submit .captcha-placeholder button, .modal-content .form-bottom .captcha-and-submit .captcha-placeholder input,
  .faceted-search-content .mobile-done-button-container .mobile-done-button,
  .faceted-search-content .faceted-section-box .show-all-modal .show-all-modal-content-container .show-all-modal-content .title-close-row .apply-button {
    background: #22406d !important;
  }
  
  .faceted-search-content .faceted-section-head, .faceted-search-content .faceted-section-head h5 {
    background: #22406d !important;
    color: #fff !important;
  }

  .faceted-search-content .faceted-section-head, .faceted-search-content .faceted-section-head {
      width: 100% !important;
  }
  
  .list-content .list-main-section .list-container .list-listing .listing-top-right .listing-dealer-info .dealer-name,
  .list-content .list-main-section .list-container .list-listing .listing-top .listing-top-left .listing-main-stats .price,
  .list-content .list-main-section .list-container .fin-calc, .list-content .listing-portion-title,
  .detail-content .detail-main-body .main-detail-data .detail-price {
    color: #22406d !important;
  }
  
  .list-content .list-title, .list-content .list-title .list-listings-count, .faceted-search-content .faceted-section-box .faceted-option-checkbox-container .option-name, .contact-information a,
  .faceted-search-content .faceted-section-box .faceted-option-checkbox-container .option-count,
  .list-content .list-top-section .listing-option-bar .list-sort-order .sort-by-dropdown-container,
  .breadcrumbs .breadcrumbs-element, .detail-content .search-results, .legal-text-content, .detail-content .dealer-info .field-name, .detail-content .dealer-info .field-value, .detail-additional-data h4, .mc-thumb-strip .mc-btn.mc-btn-next span, .mc-thumb-strip .mc-btn.mc-btn-prev span, .detail-content .dealer-info .google-maps-link i, .paging-container .page-number, .paging-container .list-page-number,
  .faceted-search-content .faceted-section-box .faceted-date-range, .faceted-search-content .faceted-section-box .faceted-date-range .days-ago-input {
    color: #000 !important;
  }
  
  .detail-content .dealer-info .phone-and-email .send-email-btn, .faceted-search-content .faceted-section-box .show-all-modal .show-all-modal-content-container .show-all-modal-content .title-close-row .back-button {
    border: 1px solid #22406d !important;
    color: #22406d !important;
  }
  
  .list-content .listing-bottom .listing-description-text {
    color: #000 !important;
  }
  
  .faceted-search-content .faceted-section-box .faceted-option-checkbox-container .option-name {
    margin-top: 0 !important;
  }

  @media screen and (max-width: 769px) {
    .list-content {
        margin-top: 70px !important;
    }
  }
  
  @media screen and (max-width: 785px) {
  .listing-option-mobile .listing-option-bar {
    background: #22406d !important;
  }
  .listing-option-mobile .listing-option-bar .listing-option-bar-option {
    color: #fff !important;
  }
  .listing-option-mobile .listing-option-bar #option-bar-sort #sort-option-container a {
    color: #000 !important;
  }
  }
  
  @media (max-width: 992px) {
    .detail-content-mobile .detail-contact-bar .contact-bar-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-additional-data .data-row .data-label,
    .mobile-breadcrumb,
    .list-content .list-listing-mobile .view-listing-details-link {
        background: #22406d !important;
    }
    .list-content .list-listing-mobile .price-container .price {
        color: #22406d !important;
    }
    .fin-calc p, .fin-calc strong, .dealer-info a {
        color: #22406d !important;
    }
    .list-content .list-listing-mobile .email-seller-link {
        height: 38px !important;
    }
    .spec-container a, .list-content .list-listing-mobile .listing-portion-title {
        color: #22406d !important;
    }
    .list-content .list-listing-mobile .dealer-phone-container .dealer-phone-call, .list-content .list-listing-mobile .dealer-phone-container .dealer-phone-text {
        border: 1px solid #22406d !important;
    }
    .detail-content-mobile .detail-main-body .detail-mobile-top .detail-title,
    .detail-content-mobile .detail-main-body .detail-mobile-top .detail-category,
    .detail-content-mobile .detail-main-body .main-detail-data,
    .main-detail-data .currency-selector,.detail-content-mobile .share-listing {
        color: #000 !important;
    }
    .detail-content-mobile .detail-additional-data .data-row .data-value,
    .list-content .list-listing-mobile .listing-description-text,
    .faceted-search-content .faceted-section-box .faceted-option-checkbox-container .option-name {
        color: #000 !important;
    }
  }

  @media (max-width: 769px) {
    .list-content .list-listing-mobile .video-chat-link {
        height: 36px !important;
    }
  }

