/* 
    Website Developer: Karoline Dassie

    Main Colors:
    - Red: #cc2427
    - Black: #000
    - White: #fff
    - Gray: #333333
*/

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

    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: 3em 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: #cc2427; 
        color: #fff;
        text-shadow: none;
    }
    ::selection {
        background: #000;
        color: #fff;
        text-shadow: none;
    }

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

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

    INVENTORY

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

.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, .list-container-flexrow .view-listing-details-link, .modal-content .form-bottom .captcha-and-submit .captcha-placeholder button, .contact-options a, .fin-calc-mobile>a {background:#cc2427 !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: #cc2427 !important;text-transform: uppercase; letter-spacing: 1px;}
.detail-content-mobile .detail-contact-bar .contact-bar-btn, .faceted-search-content .mobile-done-button-container .mobile-done-button {background: #000 !important;}

.detail-content .detail-main-body .main-detail-data .offer-btn, .detail-content .detail-main-body .main-detail-data .buy-btn {float:none;}
.modal-content .modal-top .modal-title, .listing-description, .list-content .listing-portion-title, .list-content .list-title .list-title-text, .detail-content .dealer-info h3, .dealer-info, .detail-content-mobile .dealer-info h3, .fin-calc p, .detail-content-mobile .detail-main-body .detail-mobile-top .detail-title, .detail-additional-data h3 {color:#000 !important;}
.dealer-btns-bottom a {background: #cc2427 !important;}
.page-nav, .mobile-breadcrumb{background-color:#cc2427!important}
.view-listing-details-link i, .view-listing-details-link span,.view-listing-details-link span:hover {color:WHITE !important;}
.search-results,.detail-content .detail-main-body .main-detail-data .detail-price, .detail-content .detail-main-body .main-detail-data .alternate-retail-price, .list-content .list-title .list-listings-count {color:#cc2427!important}
.bottom-section {text-align: left!important;} .faceted-option-checkbox-container input{width: 7%;}
.list-content .list-title {padding: 17px!important; margin-top: 17px!important;}
.faceted-section-box {padding: 17px 5%!important;} .disclaimer span {color:grey!important;} .contact-information a:link,.contact-information a:visited,.contact-information a:active {color:black!important;}
.detail-content {padding-top: 25px;}

.detail-content .dealer-info .phone-and-email .send-email-btn{color:#cc2427!important ; border:1px solid #cc2427!important }

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

   OLD FRAMELESS INVENTORY STYLES

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

    .hosted-content h1{text-align: left; font-size: 30px!important}
    .hosted-content h5{text-align: left; text-transform: inherit; color: #000!important}
    .hosted-content .listings-wrapper .listings-list .category-banner h3{line-height: normal!important; font-size: 23px!important; color: #cc2427!important}
    .hosted-content .m-top-20{margin-top: 0!important}
    .hosted-content .listings-wrapper .listings-list .listing-banner h2{font-size: 24px!important; color: #000!important}

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

    TYPOGRAPHY

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

    h1 { font-weight:900; color:#cc2427; font-size:45px; text-transform: uppercase; line-height:normal;  }
	h2 { font-weight:100; color:#fff; font-size:25px; text-transform: uppercase; }
	h3 { font-weight:900; color:#fff; font-size:25px; text-transform: uppercase}
	h4 { font-weight:600; color:#cc2427; font-size:18px; text-transform: uppercase;}
	h5 { font-weight:700; color:#cc2427; font-size:15px; text-transform: uppercase; } 
        
    h5 a:link,h5 a:visited,h5 a:active {color:#fff}

    b{font-weight: 900}
	p, ul, ol, li { font-size: 15px; font-weight: 400; color: #CFCFCF; line-height: 25px; }

    a, button, .button, a:hover, button:hover, .button:hover, button.mobile_btn::after {
        -webkit-transition:all .3s ease;
        -moz-transition:all .3s ease;
        -ms-transition:all .3s ease;
        -o-transition:all .3s ease;
        transition:all .3s ease;
    } 

    a:link, a:visited, a:active {text-decoration:none; color:#cc2427}
    a:hover {text-decoration:none;}
    .column3 a{ color:#cc2427}

    .center{text-align: center!important}
    #forcegreen{color: #3ea841!important}
    #forcegray{color: #333333!important}
    
    .black{background: #000}    

    .loco a:link,.loco a:visited,.loco a:active{color:#fff}
    .loco a:hover{color:#CFCFCF}

    b, strong{font-weight: 900}

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

    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 ; 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-left: 40px; box-sizing: border-box; text-align:right}
	.dois-terco{width:70%; float:left; 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}
    .fibre{background:#ccc url("../siteart/carbon_fibre.png") repeat; background-color: black;}
    .wrapper{ width:96%; margin:0 auto; padding:0; max-width:1200px; position:relative}
    .wrapper-small{ width:100%; margin:0 auto; padding:0; max-width:1024px; position:relative}
    .container{width:100%;max-width:1000px;margin:0 auto;}

    .white{background:#fff;}
    .bord{border: 1px solid #333333;box-sizing: border-box;}
    .border-it{background:#fff;padding: 5px;box-sizing: border-box;}
    .padit{padding:4em 0;}
    .pad{padding:3em 0;}



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

    HEADER STYLES 

===========================================================*/
    .top{background:#cc2427; color: #fff}
        .top a, .top p{color: #fff;}
    
    
    header{
        position:fixed;
        width:100%;
        margin:0;
        padding:0;
        background:#ccc url("../siteart/littleknobs.png") repeat;
        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);
		background-color: black;
    }

    #spaceheader{height:175px}

    .headerwrap{width:96%;max-width:1000px;margin:0 auto;}
    .logo{display: inline-block!important; margin: 0; padding: 1em 0; text-align: center}
        .logo img{width:100%; max-width: 350px; display: inline-block!important; margin: 0;}
    
    .header-left{float:left; width:355px; text-align: left}
    .header-right{float:right; width: calc(100% - 355px); text-align: right}
        .header-right h4{display: block;}
    .pracima{margin:40px 0 0 0}
    .celshow{display: none}
    .vinte{display: inline-block; float: right; margin: 0 0 0 15px}  

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

    NAVIGATION

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


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

    SLIDESHOW

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

    .slides{background:#000;padding:0;color:#fff;position:relative;}
    .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 > * { cursor: pointer;}


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

    CONTENT STYLES

===========================================================*/
    #graybtm{background:#5c5a5a}
    
    .formcont{ background: #ebebeb; border: 1px solid #000; padding: 2%}
    .formcont p{color: #fff; font-weight: 700; font-size: 17px}
    
    iframe.mapa{border:0; width:100%; height: 400px; display: block}
    .infocont img {   
        display: inline-block;
        vertical-align: middle;
    }
    
    iframe.omapa{width:100%;height:680px; border:0}

    .infocont p{line-height: 33px}
    #pattern{background:url("../siteart/pattern.jpg") repeat}
    
  
/*==========================================================

	ZOOM

==========================================================*/
    .image-zoom-container {
        list-style: none;
    }

    .square{
        width: 33.33%;
        float: left;
        margin: 0;
    }

    .square h3 {
        display: block;
        text-align: center;
        margin: 20% auto 0 auto;
        padding: 10px 0;
        width: 100%;
        color: #cc2427;
    }
    
    .zoom-container {
        position: relative;
        overflow: hidden;
        display: inline-block;
        width: 100%; 
        vertical-align: top;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        float:left;
        *width:100%;
    }

    .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;
        -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 INVENTORY

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

    .scrolling-wrap {
        width:100%;
        height:90px;
        overflow:hidden;
        padding: 10px 0;
        background: #cc2427;
    }

    .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: #ccc solid 1px;
        border-radius: 2px;
        padding: 12px;
        font-size:14px;
        box-sizing:border-box;
        margin:0 1% 10px 0  ;
        width: 99%;
        font-family: 'Montserrat', sans-serif;
    }
    input.half{width:49%;float:left;}

    input:focus{ outline: #cc2427 solid 1px!important;}

    input.button2{
        display:block;
        width:200px;
        padding: 10px 0;
        margin:10px 0 0 0;
        background-color:#000;
        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:#ccc 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: 'Montserrat', sans-serif;
        border: #ccc solid 1px;
        border-radius: 2px;
        padding: 10px;
        font-size:14px;
        width:99%;
        margin:0 0 10px 0  ;
        box-sizing:border-box;
    }
    textarea:focus{ outline: #cc2427 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{}
    #CaptchaAnswer{margin:5px 0; width:100%}
    fieldset{width:98%;box-sizing:border-box;margin:0 1% 15px;background:#fff;}

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

    FOOTER STYLES

===========================================================*/
    #bottom{
        width: 100%;
        margin: 0 auto;
        background:#333333 ;
        /*background:#333333 url("../siteart/carbon_fibre.png") repeat ;*/
        color: #fff;
        padding: 2em 0;  
        display: block;
        text-align: center;
        }

    #menufoot{padding-bottom: 2em;}
        #menufoot ul li{display: inline-block}
        #menufoot ul li a{text-transform: uppercase; margin:0 10px; font-weight: 600; color: #fff}
        #menufoot ul li a:hover{color:#cc2427!important; font-weight: 600!important}

    a.footerlink:link, a.footerlink:visited, a.footerlink:active{text-decoration:underline; font-size:13px; color:#999999}
    a.footerlink:hover {text-decoration:none; font-size:13px;color: #fff}
    .footertext{font-size:13px; color:#999999;}
    .smallfootertext{font-size:10px; color:#999999;}
    .divfooter {max-width:700px; text-align:center; margin:0 auto;}

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

    RESPONSIVE STYLES

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

@media screen and (max-width: 1177px) {
    .dois-terco{width:50%}
    .um-terco{width:50%}
}

@media screen and (max-width: 1100px) {
    iframe.omapa{height:700px;}
}

/* iPads (portrait and landscape) ----------- */
 
@media screen and (max-width: 1025px) {
 
    .wrapper-small{width: 90%;}
    .border-it{padding: 0}
    
    .logo{ margin: 0; text-align: left}
        .logo img{margin: 0 0 0 10px;}
    
    .header-right {
        float: none;
        width: 100%;
        text-align: center;
        margin: 0;
        border-top: 1px solid #ccc;
        padding: 16px 0
    }
    .header-left{
        float: none;
        width: 100%;
        text-align: center;
    }
    .cont-right {
        display: block; 
        border-top: 1px solid #fff;
        float: none;
        padding: 5px 0;
        max-height: auto;
        width: 100%;
        clear: both;
    }
    .cont-right p{display: inline-block}
    .cont-right i {font-size:30px; padding: 0 0 0 10px}
    
    .pracima {margin: 0 auto;}
    .celshow{width: 120px; display: inline-block!important}
    .vinte{display: none} 
}


@media screen and (max-width: 810px) {
    
    .padit{padding:2em 0}
    .column2 {width:100%; float:none; padding:0 ; margin: 0 auto; text-align: center}
    
    a.morebutton {
        max-width: 150px;
        margin: 10px auto 0 auto;
    }
    .square {
        width: 100%;
        float: none;
        margin:0 auto;
    }
    
    .infocont .last{margin-top: 20px}
    #bottom .last{margin-top: 20px}
    footer .last{text-align: center}
    
    .dois-terco{width:100%; float:none; padding:0 ; margin: 0 auto; text-align: center}
    .um-terco{width:100%; float:none; margin: 0 auto; text-align: center}
    
    #spaceheader {height: 0;}
    header {position:relative;}
}


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

@media screen and (max-width: 736px){
    h1{font-size: 36px; text-align: center}
    h2{font-size: 22px; text-align: center}
    p{text-align: center}
    
    .top{text-align: center}
    #menufoot ul li{display: block}
    #menufoot ul li a{margin: 0}
    
    .twothird{width:100%; float:none; margin: 0 auto; text-align: center}
    .onethird{width:100%; float:none; padding:0 ; margin: 3em auto 0 auto; text-align: center}
    iframe.omapa{height:300px;}
    
}


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

@media screen and (max-width:640px){
    footer .last a{display: block}
    .separar{display: none}
    
    .celshow{width: 100px}  
    .logo img{margin: 0 0 0 10px; max-width: 250px}
    .header-right {padding: 10px 0}
    .header-right h4{display: block; margin: 0 auto; font-size: 16px;}
}


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

@media screen and (max-width: 500px){
    input.half{width:98%;float:left;}
    .logo img{margin: 0 0 0 10px; max-width: 200px}
    .celshow{width: 80px; display: inline-block; margin: 10px auto 0 auto}  
    .logo img{margin: 0 0 0 10px; max-width: 200px; display: block}
    .logo{padding: 10px 0 0 0}
}