/*==========  INFO  ==========*/
/*max-width: bezieht sich auf alles, was kleiner oder gleich der angegebenen Maße ist*/
/* Large Devices, Wide Screens */
/*@media only screen and (max-width : 1200px){} */
/* Medium Devices, Desktops */
/*@media only screen and (max-width : 992px){} */
/* Extra Small Devices, Phones */
/* @media only screen and (max-width : 480px){} */
/* Extra small devices: phones Less than 768px  =>-col-xs-$ */
/* Small devices: tablets 768px and up => .col-sm-$ */
/* Medium devices: Desktops 992px and up => .col-md-$ */
/* Large devices: large Desktops 1200px and up  => col-lg-$ */



    /* Diese Variablen können bearbeitet werden. var(--nav-text-color) kann auch durch einen separaten Farbcode ersetzt werden */    /* Farbverlauf der Navigationsleiste. Wird von den meisten Browsern unterstützt. Nur ganz alte können das eventuell nicht. */
	
:root {
      --nav-color-gradient-top: #FFF;
      --nav-color-gradient-bottom: #FFF;
      --nav-color-gradient-bottom-start: 0%;   /* Fallback wenn der Farbverlauf nicht unterstützt wird */
      --nav-color-fallback: #FFF;               /* Text Farbe der Hauptnavigations items */
      --nav-text-color: #4c4c4c;
      --nav-text-color-hover: var(--nav-text-color);
      --nav-text-color-focus: var(--nav-text-color);      /* Dropdown Farben */
      --nav-dropdown-background-color: #4c4c4c;
      --nav-dropdown-text-color: #FFF;
      --nav-dropdown-background-color-hover: #FFFFFF;
      --nav-dropdown-text-color-hover: #4c4c4c;
	  --nav-burger-gradient-top: #FFFFFF;
      --nav-burger-gradient-bottom: #FFFFFF;
      --nav-burger-gradient-bottom-start: 0%;
      --nav-burger-text-color: #4c4c4c;
      --nav-burger-border-color: #4c4c4c;
      --button-primary-color-start: #b2b2b2;
      --button-primary-color-end: #c1c1c1;
      --button-primary-text-color: white;
      --button-primary-inactive-color-start: #dddddd;
      --button-primary-inactive-color-end: #dddddd;
}


body {color:#4c4c4c; font-family: PTSansRegular; line-height: 130%; letter-spacing: 0.1em;}



.smaller {font-size: font-family: PTSansRegular; letter-spacing: 0.1em; line-height: 130%;}

.smaller-mini {font-family: PTSansRegular; line-height: 130%; letter-spacing: 0.1em;}

.smaller-space {font-family: PTSansRegular; line-height: 170%; letter-spacing: 0.1em; }
 
/* kleiner breiter*/  
.smaller-space {font-family: PTSansRegular; line-height: 170%; letter-spacing: 0.1em; }
 @media only screen and (max-width : 319px) { .smaller-space {font-size: 10pt; }}
 @media only screen and (min-width : 320px) { .smaller-space {font-size: 10pt; }}
 @media only screen and (min-width : 480px) { .smaller-space {font-size: 10pt; }}
 @media only screen and (min-width : 768px) { .smaller-space {font-size: 10pt; }}
 @media only screen and (min-width : 992px) { .smaller-space {font-size: 10pt; }}
 @media only screen and (min-width : 1200px){ .smaller-space {font-size: 10pt; }}
 @media only screen and (min-width : 1200px){ .smaller-space {font-size: 10pt; }}
 
.smaller-link-space {font-family: PTSansRegular; line-height: 170%; letter-spacing: 0.1em; }
 @media only screen and (max-width : 319px) { .smaller-link-space {font-size: 10pt; }}
 @media only screen and (min-width : 320px) { .smaller-link-space {font-size: 10pt; }}
 @media only screen and (min-width : 480px) { .smaller-link-space {font-size: 10pt; }}
 @media only screen and (min-width : 768px) { .smaller-link-space {font-size: 10pt; }}
 @media only screen and (min-width : 992px) { .smaller-link-space {font-size: 10pt; }}
 @media only screen and (min-width : 1200px){ .smaller-link-space {font-size: 10pt; }}
 @media only screen and (min-width : 1200px){ .smaller-link-space {font-size: 10pt; }}
.smaller-link-space:hoover {text-decoration: underline;} 


.larger {font-family: PTSansRegular; line-height: 120%; letter-spacing: 0.1em;}




/* !!!!!!! LOGOS !!!!!!!  */

.kk_toplogo           {margin:0px; padding:0px; margin-top:0px;}
.kk_logo              {margin-left: 25px; margin-top: 18px; margin-bottom:  0px; width:400px}
.kk_logo_mobile       {margin-left: 10px; margin-top:  0px; margin-bottom:  0px; width:200px}
.kk_order_logo        {margin-left: 25px; margin-top:  0px; margin-bottom:  0px; width:350px}
.kk_order_logo_mobile {margin-left: 15px; margin-top:  0px; margin-bottom:  0px; width:150px}


li.kk_hotline {
  background-image: none;
  background-color: #4c4c4c;
  padding: 2px 5px 2px 5px;
}

li.kk_top_link {
  padding: 2px 5px 2px 5px;
  background-image: -webkit-linear-gradient(top,#4c4c4c 0,#4c4c4c 100%);
  background-image: -moz-linear-gradient(top,#4c4c4c 0,#4c4c4c 100%);
  background-image: -o-linear-gradient(top,#4c4c4c 0,#4c4c4c 100%);
  background-image: linear-gradient(top,#4c4c4c 0,#4c4c4c 100%);
  background-color: #4c4c4c;
  color: #fff;
  filter: progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#e7ab00, endColorstr=#b99313);
  zoom: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#e7ab00, endColorstr=#b99313)";
  background-image: -ms-linear-gradient(top,#e7ab00 0,#b99313 100%);
}

/* Suchleiste */
.kk_search_button {
  height: 30px;
  font-family: PTSansRegular;
  width: 30px;
  padding-left: 8px;
  font-size: 12pt;
  line-height: 30px;
  margin-left: 0;
  border: 0;
  border-radius: 0px 0px 0px 0px;
  background-image: -webkit-linear-gradient( top, #4c4c4c 0%, #4c4c4c 100%);
  background-image: -moz-linear-gradient(top, #4c4c4c 0%, #4c4c4c 100%);
  background-image: -o-linear-gradient(top, #4c4c4c 0%, #4c4c4c 100%);
  background-image: linear-gradient(top, #4c4c4c 0%, #4c4c4c 100%);
}
.kk_search_input  { border:1px 1px 1px 0px solid #ccc; float:right; color: #000; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
                    line-height: 30px; height: 30px; font-family: PTSansRegular,Arial,sans-serif; font-size: 12pt; padding: 2px 6px; margin: 0;
					border: 1px solid #ccc;}
.backToTop a {
    display: none;
    position: fixed;
    right: 15px;
    bottom: 15px;
    color: #ffffff;
    text-decoration: none;
    background: #4c4c4c;
    padding: 13px;
    /* font-size: larger; */
}
					





.kk_navbar {
      background-color: var(--nav-color-fallback);
      background-image: -moz-linear-gradient(top,var(--nav-color-gradient-top) var(--nav-color-gradient-bottom-start),var(--nav-color-gradient-bottom) 100%);
      background-image: -webkit-linear-gradient(top,var(--nav-color-gradient-top) var(--nav-color-gradient-bottom-start),var(--nav-color-gradient-bottom) 100%);
      background-image: -o-linear-gradient(top,var(--nav-color-gradient-top) var(--nav-color-gradient-bottom-start),var(--nav-color-gradient-bottom) 100%);
      background-image: linear-gradient(180deg,var(--nav-color-gradient-top) var(--nav-color-gradient-bottom-start),var(--nav-color-gradient-bottom) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=var(--nav-color-gradient-top), endColorstr=var(--nav-color-gradient-bottom));
}
.kk_navbar .nav > li > a { color: var(--nav-text-color);}
.kk_navbar .nav > li > a:hover { color: var(--nav-text-color-hover);}
.kk_navbar .nav > li > a:focus { color: var(--nav-text-color-focus);}


.dropdown-menu > li > a { background-color: var(--nav-dropdown-background-color); color: var(--nav-dropdown-text-color); }
.dropdown-menu > li > a:hover { background-color: var(--nav-dropdown-background-color-hover);
      color: var(--nav-dropdown-text-color-hover);}
.navbar-toggle {
      color: #4c4c4c;
      border-color: #4c4c4c;
      background-image: -moz-linear-gradient(top,var(--nav-burger-gradient-top) var(--nav-burger-gradient-bottom-start),var(--nav-burger-gradient-bottom) 100%);
      background-image: -webkit-linear-gradient(top,var(--nav-burger-gradient-top) var(--nav-burger-gradient-bottom-start),var(--nav-burger-gradient-bottom) 100%);
      background-image: -o-linear-gradient(top,var(--nav-burger-gradient-top) var(--nav-burger-gradient-bottom-start),var(--nav-burger-gradient-bottom) 100%);
      background-image: linear-gradient(180deg,var(--nav-burger-gradient-top) var(--nav-burger-gradient-bottom-start),var(--nav-burger-gradient-bottom) 100%);
	  border-radius:0px
}
/* Navbar */
.navbar-header {  float: none}
.navbar-left,.navbar-right {float: none !important;}
.navbar-toggle {display: block;}
.navbar-collapse {border-top: 1px solid transparent; box-shadow: inset 0 0 0 rgba(255,255,255,0.1); background: #FFF;}
.navbar-fixed-top {top: 0; border-width: 0 0 1px; }
.navbar-collapse.collapse {display: none!important; background: #FFF; }
.navbar-nav { float: none!important; background: #FFF; margin-top: 7.5px;}
.navbar-nav>li { float: none;}
.navbar-nav>li>a { padding-top: 5px; padding-bottom: 5px;}
.collapse.in{ display:block !important;}
.kk_order_navigation_button{ float:left;}
.dropdown-toggle { display: block!important; color: black;}
.navbar .nav li.dropdown.open > .dropdown-toggle {color: black;}
.navbar-nav > li > .dropdown-menu { position: inherit; width: 100%;  -webkit-box-shadow: none;
  box-shadow: none; margin-bottom: 5px; border:none;} 
.navbar-nav > hr{ display: none; }
.navbar-nav > li > .dropdown-menu .open{display: block;}



.kk_basketButton2Link {
  border: 0;
  background-image: none;
  color: #00f;
  background-color: #fff;
}


/*
    Zentriert
*/
.navbar-header {  
    display: flex; 
    justify-content: center;
}
.navbar-toggle {
    display: block; 
    float: none!important;
}
.navbar-collapse .dropdown {
    text-align: center;
}
.navbar-collapse .dropdown a:first-child:nth-last-of-type(2){
    margin-left: 38px;
}
.dropdown-menu > li > a { text-align: center } 


/*
    Button Farben
*/
 button,
 input[type="button"],
 input[type="submit"]:not(.kk_basketButton2Link),
 input[type="reset"],
 .kk_well,
 .kk_imageSelection,
 .kk_nav-tab-active

{
    background-color: var(--button-primary-color-start)!important;
    color:var(--button-primary-text-color);
    background-image: -webkit-linear-gradient(top,var(--button-primary-color-start) 0,var(--button-primary-color-end) 100%);
    background-image: -moz-linear-gradient(top,var(--button-primary-color-start) 0,var(--button-primary-color-end) 100%);
    background-image: -o-linear-gradient(top,var(--button-primary-color-start) 0,var(--button-primary-color-end) 100%);
    background-image: linear-gradient(180deg, var(--button-primary-color-start) 0%, var(--button-primary-color-end) 100%);
}

.kk_nav-tab-inactive {
    background-color: var(--button-primary-inactive-color-start)!important;
    color:var(--button-primary-text-color);
    background-image: -webkit-linear-gradient(top,var(--button-primary-inactive-color-start) 0,var(--button-primary-inactive-color-end) 100%);
    background-image: -moz-linear-gradient(top,var(--button-primary-inactive-color-start) 0,var(--button-primary-inactive-color-end) 100%);
    background-image: -o-linear-gradient(top,var(--button-primary-inactive-color-start) 0,var(--button-primary-inactive-color-end) 100%);
    background-image: linear-gradient(180deg, var(--button-primary-inactive-color-start) 0%, var(--button-primary-inactive-color-end) 100%);
}


.kk_button-basket-active button, .kk_button-basket-active input {
  background-image: -webkit-linear-gradient(top,#baa147 0,#c9b158 100%);
  background-image: -moz-linear-gradient(top,#baa147 0,#c9b158 100%);
  background-image: -o-linear-gradient(top,#baa147 0,#c9b158 100%);
  background-image: linear-gradient(top,#baa147 0,#c9b158 100%);
  filter: progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#baa147, endColorstr=#c9b158);
  zoom: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#c79500, endColorstr=#c9b158)";
  background-image: -ms-linear-gradient(top,#baa147 0,#c9b158 100%);
}

.kk_button-basket button, .kk_button-basket input {
  border: 0; height: 40px; font-size: 10pt; font-weight: 400; color: #fff; cursor: pointer; text-align: left; width: 100%; }



/* Kollektionseinblendungen */

.content_gallery_item {
  padding:8px;
  line-height:1.7;
  margin-bottom:10px;
  position:relative;
  background-color:#fff;
  display:flex;
  flex-direction:column
}
.content_gallery_item_image_wrapper {
  flex-grow:1;
  flex-direction:row;
  align-items:center
}
.content_gallery_item div {
  margin:0 0 22px 0
}
.content_gallery_item img {
  width:auto;
  height:auto;
  max-height:250px;
  max-width:200px;
  box-shadow:2px 2px 6px rgba(0,0,0,.3)
}
.max-width-100 {
  max-width:100%!important
}
.content_gallery_item img.img_alike {
  box-shadow:none!important
}
.content_gallery_item>.caption>.artist {
  font-weight:700;
}
.content_gallery_item>.caption>.delivery {
  font-size:smaller-space;
  margin:0
}
.content_gallery_item>.caption>.price {
  font-size:smaller-space
}




/* MOTIVSEITEN */
/*aktuelles Material*/
.kk_matSubHeader {margin-top:10px;margin-bottom:5px;}
.kk_singleMatOption {padding:0px 0px 0px 0px;}
				
.kk_matGroup {cursor:pointer;margin:5px; border:0px; font-size:smaller; }
.kk_matGroup:hover{transition: background 1s ease 0s; background-color:#ededed;}
.kk_matGroupActive {background-color: #ededed;}
.kk_singleMatMainDiv { position:relative; width:300px;}
.kk_singleMatPromoDiv {position:absolute;top:11px;left:80px;}
			
.kk_singleMatPromo { height:20px; width:30px; border:1px solid #a1a2c1;background-image: -webkit-linear-gradient( top, #c79500 0%, #e8ab00 100%);
background-image: -moz-linear-gradient(top, #c79500 0%, #e8ab00 100%); background-image: -o-linear-gradient(top, #c79500 0%, #e8ab00 100%); background-image:
linear-gradient(top, #c79500 0%, #e8ab00 100%); color:#ffffff;

 /* Für Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#c79500, endColorstr=#e8ab00);zoom: 1;

/* Für Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#c79500, endColorstr=#e8ab00)";

/* Für Internet Explorer 10 */
background-image: -ms-linear-gradient(top, #c79500 0%, #e8ab00 100%);
							}
.kk_changeMat {clear:both;text-align:right;padding-right:5px;border:0px solid red;}


/*Material Popup*/
			
.kk_moreMatShow {display:none;visibility:hidden;position:absolute;left:100px;top:200px;z-index:100;width:1000px;background-color:#fff;overflow-x:hidden;overflow-y:scroll;background-color:#f5f2f3;}
.kk_moreMatActive {background-color: #ededed;}
.kk_moreMatList {width:350px; margin-bottom: 5px;}
.kk_moreMatElement {float:left;padding:10px; margin:10px; width:150px; }
.kk_moreMatType {height:250px;cursor:pointer; width:150px; font-size: smaller; line-height: 100%; float:left; margin:0px; padding:5px 0px 5px 5px;}
.kk_moreMatType:hover {background-color:#ededed; transition: background 1s ease 0s;}
.kk_moreMatHeadline {padding:0px;margin:30px 30px 10px 30px;}
.kk_moreMatPic { }
.kk_moreMatText {float:left; padding:10px 5px 10px 10px ;margin-left:5px;height:61px;width:167px;text-align:left; font-size:smaller;}
.kk_moreMatClear {clear:both;}
.kk_moreMatSpace {clear:both;height:20px;}
.kk_moreMatClose {text-align:right;margin:10px;}
.kk_mirror { cursor: help;  position: relative; }
.kk_matForm {padding:0px;margin:0px;}