/* ____________________________________ Allgemein ____________________________________ */
*{
outline:none;
}

html, body{
width:100%;
-webkit-text-size-adjust: 100%;
-webkit-font-variant-ligatures: no-common-ligatures;
}

body {
font-family: 'DIN Next LT Pro Light';
font-size: 13px;
line-height: 120%;
color:#666;
}

body a {
cursor: pointer;
}

/* ____________________________________ Search ____________________________________ */
#searchLayer{
    width:100%;
    height:100%;
    position:fixed;
    z-index:300;
    background:rgba(0,0,0,0.75);
}

#searchLayer > a {
    display: inline-block;
    float: right;
    padding: 5px;
    margin: 20px;

}
#searchLayer > a img{
    opacity: 0.7;
    transition: all 0.5s ease-in-out;
}
#searchLayer > a:hover img{
    opacity: 1;
}
#searchItem{
    width: 500px;
    height: 80px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -40px 0px 0px -250px;
}

#searchItem .form {
    background: transparent;
    border-bottom:1px solid #fff;
}
#searchItem .form input{
    font-family: 'DIN Next LT Pro Light';
    background: transparent;
    border: none;
    color: #fff;
    font-size: 20px;
    width: 85%;
    float: left;
}
#searchItem .form button{
    background: transparent;
    border: none;
    color: #fff;
    font-size: 20px;
    width: 10%;
    float: right;
    padding: 5px 0;
    margin-top: -10px;
    cursor: pointer;
}

/* ____________________________________ Klassen ____________________________________ */
.center_helper{
height: 100%;
display: inline-block;
vertical-align: middle;
}

.center_content{
width: 97%;
height: auto;
display: inline-block;
vertical-align: middle;
}

.clearfix{
clear: both;
}

.space_110{
height: 110px;
}

.content{
width: 940px;
margin: 0px auto;
}

.button_center{
width: 100%;
padding: 12px 0px 8px;
font-family: 'DIN Next LT Pro Light';
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-size: 16px;
text-align: center;
text-transform: uppercase;
display: block;
text-decoration: none;
color:#666;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}

.hover_bg_white, .hover_bg_grey{
background-color: #e2e2e2;
}

.hover_bg_white:hover, .hover_bg_white:active{
background-color: #fff;
}

.hover_bg_grey:hover, .hover_bg_grey:active{
color:#fff;
background-color: #666;
}

.button_outline{
-webkit-box-shadow:inset 0 0 0 1px #e2e2e2;
box-shadow:inset 0 0 0 1px #e2e2e2;
}

.button_outline:hover, .button_outline:active{
background-color: #e2e2e2;
}

.col65{
width: 65%;
float: left;
}
.col30{
width: 30%;
float: right;
}

.col65{
    width: 65%;
    float: left;
}

.col30 a[href^="tel"]{
color:#666;
text-decoration: none;
}

.delay_15{
-webkit-animation-delay: 1.5s; 
animation-delay: 1.5s;    
}

.delay_20{
-webkit-animation-delay: 2s; 
animation-delay: 2s;    
}

.delay_25{
-webkit-animation-delay: 2.5s; 
animation-delay: 2.5s;    
}

.delay_30{
-webkit-animation-delay: 3s; 
animation-delay: 3s;    
}

.delay_35{
-webkit-animation-delay: 3.5s; 
animation-delay: 3.5s;    
}

.delay_40{
-webkit-animation-delay: 4s; 
animation-delay: 4s;    
}

.delay_45{
-webkit-animation-delay: 4.5s; 
animation-delay: 4.5s;    
}

.delay_50{
-webkit-animation-delay: 5s; 
animation-delay: 5s;    
}

.delay_55{
-webkit-animation-delay: 5.5s; 
animation-delay: 5.5s;    
}

.delay_60{
-webkit-animation-delay: 6s; 
animation-delay: 6s;    
}

.delay_65{
-webkit-animation-delay: 6.5s; 
animation-delay: 6.5s;    
}

.delay_70{
-webkit-animation-delay: 7s; 
animation-delay: 7s;    
}

.delay_75{
-webkit-animation-delay: 7.5s; 
animation-delay: 7.5s;    
}

.delay_80{
-webkit-animation-delay: 8s; 
animation-delay: 8s;    
}

.delay_85{
-webkit-animation-delay: 8.5s; 
animation-delay: 8.5s;    
}

.cs-hidden {
display: none;
}

/* ____________________________________ Content Format ____________________________________ */

/* ______________________________ H1 ______________________________ */
.din_bold_30, h1 {
    font-family: 'DIN Next LT Pro Bold';
    font-size: 30px;
    line-height: 120%;
    color:#666;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

/* ______________________________ H2 ______________________________ */
.din_light_30, h2 {
    font-family: 'DIN Next LT Pro Light';
    font-size: 30px;
    line-height: 120%;
    color:#666;
}

/* ______________________________ H3 ______________________________ */
.din_bold_22, h3 {
    font-family: 'DIN Next LT Pro Bold';
    font-size: 22px;
    line-height: 120%;
    color:#666;
}

/* ______________________________ H4 ______________________________ */
.din_bold_16, h4, h5, h6 {
    font-family: 'DIN Next LT Pro Bold';
    font-size: 16px;
    line-height: 120%;
    color:#666;
}

/* ______________________________ P ______________________________ */
.din_bold_16{
    font-family: 'DIN Next LT Pro Bold';
    font-size: 16px;
    line-height: 145%;
    color:#666;
}

.din_light_16, .content-segment p{
    font-family: 'DIN Next LT Pro Light';
    font-size: 16px;
    line-height: 145%;
    color:#666;
    padding-top: 20px;
}
.content-segment {
    padding-bottom: 10px;
}

.din_light_13{
    font-family: 'DIN Next LT Pro Light';
    font-size: 13px;
    line-height: 120%;
    color:#666;
}

/* ____________________________________ Wishlist ____________________________________ */
#wishlist{
float: right;
position: relative;
}

#wishlist_button{
cursor: pointer;
}

#wishlist_button #bCounter, 
#wishlist_button #bCounter > #con-6 {
display: inline;
padding: 0 1px 0 0;
margin: 0;
}

#wishlist_content{
display: none;
width: 365px;
position: absolute;
z-index: 2;
top:33px;
right: 0px;
padding-top: 13px;
background: url(../../img/custom/wishlist/kmd_wishlist_spitze.svg) no-repeat right 15px top;
}

#wishlist_content_hidden{
display: none;
}

#wishlist_content_wrapper{
background-color: #666;
padding: 10px 10px 15px;
}

#wishlist_content_wrapper ul{
margin-bottom: 10px;
}

#wishlist_content_wrapper li{
display: block;
height: 27px;
padding: 10px 0px 9px;
border-bottom: 1px solid #adadad;
}

#wishlist_content_wrapper li:first-child{
padding: 0px 0px 9px;
}

#wishlist_content_wrapper li img, #wishlist_content_wrapper li p{
float: left;
}

#wishlist_content_wrapper li p{
font-family: 'DIN Next LT Pro Light';
font-size: 16px;
color: #fff;
padding: 8px 0px 0px 20px;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}


#wishlist_content_wrapper li a{
display: block;
cursor: pointer;
width:32px;
min-height: 27px;
background: url(../../img/custom/wishlist/kmd_wishlist_close.svg) no-repeat;
float: right;
margin-right: 0;
opacity: 0.5;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}

#wishlist_content_wrapper li a:hover, #wishlist_content_wrapper li a:active{
opacity: 1;
}

/* ____________________________________ Material Filter ____________________________________ */
#materials_filter{
margin-top: 30px;
position: relative;
z-index: 1;
width: 940px;
}

#materials_filter.filter_fix{
position:fixed;
top:56px;
left: 50%;
margin-left: -470px;
}

.filter_shadow{
-webkit-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.5);
box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.5);
}

.filter_wrapper label{
    display: none;
}

.filter_wrapper, .filter_wrapper2, .filter_space{
float: left;
}

.filter_wrapper, .selectric-scroll{
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

.filter_wrapper,
.filter_wrapper2 {
width: 23.5%;
}

.filter_space{
width: 2%;
}

.filter_wrapper > .button_center,
.filter_wrapper2 > .button_center{
width: calc(100% - 10px);
padding: 9px 0px 7px 10px;
text-align: left;
}
.filter_wrapper > .button_center.bg_image,
.filter_wrapper2 > .button_center.bg_image {
background-image: url(../../img/custom/slider/kmd_slider_next.png);
background-position: 95.999% center;
background-repeat: no-repeat;
}
.filter_wrapper2 > a {
background-image: url('../../img/custom/icons/kmd_pfeil_3.png')!important;
background-position: 99.999% center!important;
transition: all 0.5s ease-in-out;
transition: background-position 0.00001s linear;

}
.filter_wrapper2 > #show.button_center {
width: 32%;
background-position: 99.999% bottom!important;
padding: 10px 0px 8px 10px;
margin-right: 10px;
text-align: left;
float: left;
}

.filter_wrapper2 > #show:hover {
background-position: 99.999% 1px!important;
}

.filter_wrapper2 > #term.button_center {
width: 10%;
background-image: none!important;
background-color: #fff;
padding: 9px 8px 7px 8px;
margin-right: 10px;
text-align: center;
float: left;
}

.filter_wrapper2 > #term:hover {
background-color: #666;
color: #fff;
}

/* HIGHLIGHT ___________________________________________________ */

/* Now the same background, but with brightness filters*/
.highlight {
-webkit-animation: flash ease-out 4s 1;
-moz-animation: flash ease-out 4s 1;
animation: flash ease-out 4s 1;
animation-delay: 1s;
}

@-webkit-keyframes flash {
	from { background-color: rgba(142, 142, 142,1); } 
    10% { background-color: rgba(226, 226, 226,1); }
    20% { background-color: rgba(226, 226, 226,0.2); }
    30% { background-color: rgba(226, 226, 226,1); }
    40% { background-color: rgba(226, 226, 226,0.3); }
    50% { background-color: rgba(226, 226, 226,1); }
    60% { background-color: rgba(226, 226, 226,0.4); }
    70% { background-color: rgba(226, 226, 226,1); }
    80% { background-color: rgba(226, 226, 226,0.5); }
    90% { background-color: rgba(226, 226, 226,1); }
    to { background-color: rgba(226, 226, 226,1); }
}

@keyframes flash {
	from { background-color: rgba(142, 142, 142,1); } 
    10% { background-color: rgba(226, 226, 226,1); }
    20% { background-color: rgba(226, 226, 226,0.2); }
    30% { background-color: rgba(226, 226, 226,1); }
    40% { background-color: rgba(226, 226, 226,0.3); }
    50% { background-color: rgba(226, 226, 226,1); }
    60% { background-color: rgba(226, 226, 226,0.4); }
    70% { background-color: rgba(226, 226, 226,1); }
    80% { background-color: rgba(226, 226, 226,0.5); }
    90% { background-color: rgba(226, 226, 226,1); }
    to { background-color: rgba(226, 226, 226,1); }
}

/* HIGHLIGHT ___________________________________________________ */

.filter_wrapper2 > #reset.button_center {
width: 32%;
background-position: 99.999% bottom!important;
padding: 10px 0px 8px 10px;
text-align: left;
float: right;
}
.filter_wrapper2 > #reset:hover {
background-position: 99.999% 1px!important;    
}
.filter_wrapper2 > #reset.disabled {
background-position: 99.999% center!important;
cursor: default;
color: rgba(0,0,0,0.2);
}
.filter_wrapper2 > #reset.disabled:hover {
background-position: 99.999% center!important;
background-color: #e2e2e2;
}

/* ____________________________________ Material Gallery ____________________________________ */
#materials_gallery{
width: 1000px;
margin: 30px auto 0px;
}

.materials_gallery_item{
float:left;
width: 20%;
position: relative;
overflow: hidden;
display: none;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
    
.materials_gallery_item img{
max-width: calc(100% - 8px);
vertical-align: top;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
padding: 4px;    
}

.materials_gallery_caption{
display: block;
position: absolute;
width: 90%;
height: 100%;
padding: 0% 5%;
background-color: rgba(0,0,0,0.6);
top:0;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

.materials_gallery_caption .txt_center{
display: block;
}

.materials_gallery_caption .din_light{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}

.materials_gallery_item:hover, .materials_gallery_item:active{
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
z-index: 1;
border:none;
-webkit-box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.5);
box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.5);
}

.materials_gallery_item:hover .materials_gallery_caption, #slider a:hover .materials_gallery_caption, .materials_gallery_item:active .materials_gallery_caption, #slider a:active .materials_gallery_caption{
opacity: 1;
visibility: visible;
}

.materials_gallery_item:hover img, .materials_gallery_item:active img{
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}

#load_more, .link_back{
font-family: 'DIN Next LT Pro Light';
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-size: 16px;
color:#666;
text-transform: uppercase;
padding: 17px 0px 13px;
text-align: center;
background: #e2e2e2;
margin: 50px auto 0px;
cursor: pointer;
display: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}

#load_more:hover, #load_more:active, .link_back:hover, .link_back:active{
background-color: #666;
color: #fff;
}

#load_more{
width:20%;
}

.link_back{
width:180px;
display: block;
text-decoration: none;
}

/* ____________________________________ Detail Content ____________________________________ */
#col_wrapper{
margin-top: 40px;
}

#detail_content_img_wrapper{
width:100%;
}

#detail_content_img{
width: 1000px;
height: 350px;
margin: 40px auto 0px;
overflow: hidden;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

#detail_content_img:hover, #detail_content_img:active{
-moz-transform: scale(1.024);
-webkit-transform: scale(1.024);
-o-transform: scale(1.024);
-ms-transform: scale(1.024);
transform: scale(1.024);
-webkit-box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.5);
box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.5);
}

.detail_content_img_desc{
padding-top: 10px;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

#detail_content_img:hover + .detail_content_img_desc, #detail_content_img:active + .detail_content_img_desc{
padding-top:25px 
}

#detail_content_img img{
max-width: 100%;
}

#detail_content table,
#detail_content table {
width:100%;   
}

#more_details{
display: none;
}

#details tr:nth-child(2n+2){
background: #f9f9f9
}

#more_details tr:nth-child(2n+1){
background: #f9f9f9  
}

#detail_content td,
#detail_content2 td{
padding: 8px 0px;
border-bottom: 1px solid #ebebeb;
}

#detail_content tr:first-child td,
#detail_content2 tr:first-child td{
padding: 0px 0px 8px;
}

#more_details tr:first-child td{
padding: 8px 0px;
}

#detail_content td,
#detail_content2 td{
font-family: 'DIN Next LT Pro Light';
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-size: 16px;
color:#666;
display: inline-block;
vertical-align: top;
}

#detail_content td:first-child,
#detail_content2 td:first-child{
width:59.49%;
}

#detail_content td:last-child,
#detail_content2 td:last-child{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 40%;
}

#show_detail_content{
width:50px;
height: 50px;
margin: 0px auto;
background: url(../../img/custom/filter/kmd_material_filter_arrow.png) no-repeat center;
cursor: pointer;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.rotate_arrow{
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}

/* ____________________________________ Slider ____________________________________ */
#slider_wrapper{
width: 100%;
margin-top: 60px;
}

#slider{
width: 960px;
margin: 20px auto 0px;
}

.slick-prev, .slick-next{
position: absolute;
top: 52px;
border: none;
background-color: transparent;
width: 50px;
height: 50px;
cursor: pointer;
}

.slick-prev{
position: absolute;
left: -40px;
background: url(../../img/custom/slider/kmd_slider_prev.png) no-repeat center;
}

.slick-next{
position: absolute;
right: -40px;
background: url(../../img/custom/slider/kmd_slider_next.png) no-repeat center;
}

/* ____________________________________ Shopping Cart ____________________________________ */
#cart_items_wrapper{
margin-top: 40px;
}

.cart_item{
margin-bottom: 100px;
height: 151px;
}

.cart_item .col30{
height: 100%;
position: relative;
}

.cart_item_image{
float: left;
width: 35%;
}

.cart_item_image img{
max-width: 100%;
vertical-align: top;
}

.cart_item_content{
float: right;
width:60%;
}

.cart_item_content h2{
margin-top: 10px;
}

.cart_item_content table{
margin-top: 21px
}

.cart_button_wrapper{
width: 100%;
position: absolute;
bottom: 0px;
}

#cart_items_buttons a{
width: 30%;
float: left;
}

#cart_items_buttons a:nth-child(2){
margin:0% 5%;    
}

/* ____________________________________ Form ____________________________________ */
#form_inputs label, #form_spam label{
font-family: 'DIN Next LT Pro Light';
font-size: 16px;
color:#666;
display: block;
}

#form_inputs label{
margin-bottom: 2px;
}

#form_inputs input, #form_inputs textarea, #form_spam input{
font-family: 'DIN Next LT Pro Light';
font-size: 14px;
color:#000;
background-color:#e9e9e9;
border:none;
padding:5px 1%;
-webkit-appearance: none;
-webkit-border-radius: 0px;
border-radius: 0px;
}

#form_inputs input, #form_inputs textarea{
width:98%;
margin-bottom:10px;
}

#form_inputs input#name_id{
width:47%;
margin-right:2%;
margin-bottom:10px;
float: left;
}
#form_inputs input[name=lastname] {
width:47%;
margin-bottom:10px;
float: right;
}


#form_inputs input#zip_id{
width:18%;
margin-right:2%;
margin-bottom:10px;
float: left;
}
#form_inputs input#city_id{
width:76%;
margin-bottom:10px;
float: right;
}

#form_inputs textarea{
height:130px;
padding: 10px 1%;
resize: none;
}

#form_inputs textarea{
height:130px;
padding: 10px 1%;
resize: none;
}

#form_inputs .error input {
background-color: rgba(255,0,0,0.15);
border-bottom: 1px solid rgba(255,0,0,0.2);
}


#form_spam_terms{
margin-top: 20px;
}

#form_spam{
width: 100%;   
}

#form_spam label{
margin-bottom: 6px;
}

#form_spam img{
margin-right: 20px;
vertical-align: top;
}

#form_spam input{
width: calc(100% - 147px);
}

#form_terms{
margin-top: 20px;
}

#form_terms label{
font-family: 'DIN Next LT Pro Light';
font-size: 16px;
color:#666;
display: block;
margin-bottom: 6px;
}

#form_terms input[type="checkbox"] {
display:none;
}

#form_terms input[type="checkbox"] + label{
margin-bottom: 0px;
}

#form_terms input[type="checkbox"] + label p{
font-family: 'DIN Next LT Pro Light';
font-size: 13px;
color:#666;
line-height: 100%;
display: inline-block;
vertical-align: middle;
}

#form_terms input[type="checkbox"] + label span {
display:inline-block;
width:27px;
height:27px;
margin: 0px 20px 0px 0px;
vertical-align: top;
background:url(../../img/custom/form/kmd_checkbox.png) left no-repeat;
cursor:pointer;
vertical-align: middle;
}

#form_terms input[type="checkbox"] + label a{
color:#666;
}

#form_terms input[type="checkbox"]:checked + label span {
background:url(../../img/custom/form/kmd_checkbox.png) right no-repeat;
}

form input[type="submit"], form input[type="reset"]{
border:none;
font-family: 'DIN Next LT Pro Light';
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-size: 16px;
color:#666;
text-transform: uppercase;
width: 47.5%;
margin-top: 40px;
padding: 7px 0px 3px;
cursor: pointer;
-webkit-appearance: none;
-webkit-border-radius: 0px;
border-radius: 0px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}

form input[type="submit"]{
background-color: #e2e2e2;
}

form input[type="reset"]{
-webkit-box-shadow:inset 0 0 0 1px #e2e2e2;
box-shadow:inset 0 0 0 1px #e2e2e2;
background-color: transparent;
margin-right: 5%;
}

form input[type="submit"]:hover, form input[type="submit"]:active{
color:#fff;
background-color: #666;
}

form input[type="reset"]:hover, form input[type="reset"]:active{
background-color: #e2e2e2;
}