@import url('fonts.css');
@import url('font-awesome.min.css');

html, body { font-family:"Myriad Pro"; color:#5c686d; font-size:14px; line-height:1.33em; }
body { background:#eceeed; }
h1, h2, h3, h4, h5 { margin:0; padding:0; font-weight:normal; }
h2 { font-size:18px; }
h3 { font-size:16px; }
h4 { font-size:14px; }
div { margin:0; padding:0; box-sizing:border-box; }
a { color:#5c686d; text-decoration:none; }
a:hover { color:#ec6607 !important; }
a > img { outline:none; border:none; }
img { max-width:100%; width:auto; }

.linie { width:100%; height:3px; vertical-align:top; position:relative; }
.linie img { width:100% !important; height:3px; position:absolute;top:0; }
.clearfix { clear:both; }

#scrolltop { position:fixed; height:50px; top:250px; z-index:1000; display:none; width:50px; background:#fff; box-shadow:5px 5px 7px #666; text-align:center; font-size:25px; line-height:50px; padding:0 12px; }
#scrolltop a { display:block; }
#scrolltop.show { display:block; }
#outerwrapper { max-width:1200px; width:85%; margin:20px auto; background:#fff; box-shadow:10px 10px 15px #666; position:relative; }
#headerwrapper { position:relative; padding:30px; text-align:center; }
#leos { position:absolute; top:30px; right:30px; }
#leos img { height:60px; margin-left:15px; }

#searchform { position:absolute; right:30px; bottom:0; display:table; border-collapse:separate; }
#searchform input { display:table-cell; width:170px; z-index:2; margin-bottom:0px; height:18px; padding:6px 12px; font-size:14px; font-weight:normal; line-height:1; color:#555; background-color:#FFF; background-image:none; border:1px solid #CCC; border-radius:4px; box-shadow:0px 1px 1px rgba(0, 0, 0, 0.075) inset; transition:border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; border-bottom-right-radius:0px; border-top-right-radius:0px; border-right:0px none; }
#searchform a {	display:table-cell; padding:6px 12px; font-size:14px; font-weight:normal; line-height:1; color:#555; text-align:center; background-color:#EEE; border:1px solid #CCC; border-radius:4px; border-bottom-left-radius:0px; border-top-left-radius:0px; }

#menuwrapper { min-height:50px; }
ul#menu { list-style-type:none; margin:0; padding:0 30px; position: relative; z-index:100; }
ul#menu li { display:inline-block; margin:0; padding:0 15px 0 0; text-transform:uppercase; }
ul#menu li a { display:block; width:auto !important; height: 50px; line-height: 50px; color: #5c686d; text-decoration: none; }
ul#menu li:hover ul a { color: #2f3036; height: 40px; line-height: 40px; }
ul#menu li:hover ul a:hover { color: #ec6607; }
ul#menu li ul.submenu { display: none; position:absolute; margin:0; padding:0; z-index:100; top:50px; background:rgba(255,255,255,0.80); }
ul#menu li ul li { display: block; float: none; text-transform:none; }
ul#menu li ul li a { width: auto; padding: 0 15px; }
ul#menu li a.active { color:#ec6607; }
ul#menu li:hover > ul.submenu { display:block; }
ul#menu .lang { position:absolute; right:10px; }
ul#menu .lang span { display:inline-block !important; padding:0 10px; }
ul#menu .lang a { display:inline-block !important; padding:0 10px; }

.show-menu { text-decoration: none; color: #fff; background:#ec6607; padding: 10px 30px; display: none; }
input[type=checkbox]{ display: none; }
input[type=checkbox]:checked ~ #menu{ display: block; }

#footerwrapper { background:#ABBAC3; padding:30px; line-height:25px; }
#footerwrapper > ul { margin:0; padding:0; list-style-type:none; display:flex; flex-direction:row; flex-wrap:no-wrap; align-content:flex-start; justify-content:space-between; }
#footerwrapper > ul > li { flex:0 0 auto; text-transform:uppercase; }
#footerwrapper ul.submenu { margin:0; padding:0; list-style-type:none; text-transform:none; display:none; }
#footerwrapper a { color:#fff !important; }
#footerwrapper a:hover { color:#ec6607 !important; }

#imagewrapper { height:350px; position:relative; padding:0; margin:0; }
#imagewrapper .slider { list-style-type:none; padding:0; margin:0; position:relative; }
#imagewrapper .slider li { position:absolute; top:0; left:0; z-index:1; transition:.3s all ease-in-out; opacity:0; }
#imagewrapper .slider li img { height:auto; width:100%; }
#imagewrapper .slider li.active { z-index:10; opacity:1; }

#logowrapper { height:60px; margin:20px 30px; position:relative; }
#logowrapper button.prevPage { position:absolute; left:-30px; }
#logowrapper button.nextPage { position:absolute; right:-30px; }
#logowrapper .btn { display: inline-block; padding:4px; margin-bottom: 0px; line-height: 30px; color: #333; text-align: center; vertical-align: middle; cursor: pointer; background-color: #FFF; border-width: 1px 1px 2px; border-style: solid; -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none;  border-image: none; border-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.15); font-size:24px; }
#logowrapper .disabled { color:#ccc; }
.frame { width: 100%; height: 50px; padding: 0; }
.frame .slidee { margin: 0; padding: 0; height: 100%; list-style: none; }
.frame .slidee li { display:table-cell; margin:0; padding: 0 30px 0 0; height: 100%; width:auto !important; }
.frame .slidee li:last-child { padding:0; }
.frame .slidee li a { white-space:nowrap; }
.frame .slidee li:hover a { color:#ec6607 !important; cursor:pointer; }
.frame .slidee li:hover { cursor:pointer; }
.scrollbar { width: 100%; height: 10px; background:#ddd; border:1px solid #ddd; border-radius:5px; }
.scrollbar .handle { width: 100px; height: 100%; background: #ec6607; border:1px solid #ec6607; border-radius:5px; }

.grayscale {
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
	filter: gray; /* IE6-9 */
	-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
	transition:all linear .5s;
}

#contentwrapper { min-height:350px; padding:0 30px 30px; }
#contentwrapper a:not(.img)::before { font-family:FontAwesome; content:"\f08e\00a0 "; }

figure { display:block; position:relative; margin:0 40px 20px 0; padding:0; }
figure img { max-width:100%; width:auto; }
figure figcaption { position:absolute; top:0; left:0; background:#ec6607; color:#fff; text-transform:uppercase; padding:8px 8px 4px 8px; margin:0; line-height:1em; }
figure figcaption a { color:#fff; }
figure figcaption a:hover { color:#5c686d !important; }
.home figure { display:inline-block; width:45%; }

.left70 { float:left; width:75%; }
.right30 { margin-left:75%; }

.headorange { display:inline-block; background:#ec6607; color:#fff; text-transform:uppercase; padding:8px 8px 4px 8px; margin:0; line-height:1em; }
.headgray { display:inline-block; background:#5c686d; color:#fff; text-transform:uppercase; padding:8px 8px 4px 8px; margin:0; line-height:1em; }
.newsarchiv { float:right; margin:0 40px 0 0; }

article { display:block; }
article > h1 { font-size:16px; }
article.news { display:block; margin:25px 0; padding:0 40px 0 0; }
article.news img { float:left; margin:0 20px 0 0; }
article.news h1 { color:#ec6607; margin-left:270px; }
article.news time { display:block; float:right; }
article.news p { margin-left:270px; }

article.termine { display:block; margin:25px 0; padding:0 30px 0 0; }
article.termine h1 { color:#EC6607; }

.orange { color:#ec6607 !important; }

.flex-container { display:flex; flex-direction:row; flex-wrap:no-wrap; justify-content:space-between; }
.content-items-wrapper { width:140px; position:relative; height:240px; background:#ABBAC3; padding:10px; line-height:1.6em; }
.content-items-wrapper img { position:absolute; bottom:10px; left:10px; width:120px; }
.transparent { opacity:0.5; filter:alpha(opacity=50); }
.transparent:hover { opacity:1; filter:alpha(opacity=100); }

.uebersicht { width:31.5%; margin:0 20px 30px 0; height:180px; float:left; }
.uebersicht .img { float:left; margin:0; width:200px; }
.uebersicht .img img { max-width:100%; max-height:160px; }
.uebersicht .text { margin-left:210px; }
.uebersicht .img-small { float:left; margin:0; width:150px; }
.uebersicht .text-large { margin-left:160px; }
.uebersicht a { display:inline-block; }

fieldset.table { border:0; margin:0; padding:0; }
fieldset.table label { display:inline-block; width:125px; }
fieldset.table input[type="text"] { width:300px; }

input[type="text"], select, textarea { border:1px solid #ec6607; font-family:"Myriad Pro"; padding:.3em; }
input[type="submit"] { border:1px solid #ec6607; border-radius:3px; padding:.3em; background:#ddd; }
input[type="submit"]:hover { background:#efefef; }
input[type="submit"]:active { position:relative; top:1px; }

#map { width:100%; height:inherit; }

.leftbox { float:left; width:45%; }
.leftbox img { max-width:100%; width:auto; }
.rightbox { margin-left:48%; }

.padding-0-40 { padding:0 40px; }

.image-gallery{display:flex;}
.image-gallery .image-gallery-item{display:inline-block; max-width:32%; padding:10px;}

@media screen and (max-width : 770px){
	ul#menu { position: static; display: none; z-index:100; }
	ul#menu li { margin-bottom: 1px; }
	ul#menu li, ul#menu li a { width: 100%; }
	ul#menu ul.submenu { position:relative !important; margin:0; padding:0; top:0 !important; }
	ul#menu .lang { position:relative; left:0; }
	ul#menu .lang span { display:inline-block !important; padding:0 10px 0 0; }
	ul#menu .lang a { display:inline-block !important; padding:0 10px 0 0; }
	.show-menu { display:block; }
	
	#searchform { position:relative; left:0; width:100%; margin:20px 0 0; }
	#searchform input { width:98%; }
	#searchform a { max-width:50px; min-width:25px; padding:0 0 0 25px; }
}

@media screen and (min-device-width: 768px) and (max-width:1024px) {
	#outerwrapper { width:97%; }
	#imagewrapper { height:290px; }
	.uebersicht { width:45%; }
	.home figure { margin:0 20px 20px 0; }
}
@media screen and (max-width:768px) {
	#outerwrapper { width:95%; max-width:95%; min-width:95%; box-shadow:none; }
	#leos { display:none; height:0; width:0; }
	#imagewrapper { height:200px; }
	#contentwrapper { padding:0 20px 20px; }
	article.news { padding:0 30px 0 0; }
	article.news img { width:150px; }
	article.news h1 { margin-left:170px; }
	article.news p { margin-left:170px; }
	.uebersicht { width:100%; display:block; }
	.uebersicht .text { margin-left:210px; }
	.padding-0-40 { padding:0 20px; }

}
@media screen and (max-width:550px) {
	#outerwrapper { margin:10px auto; width:98%; max-width:98%; min-width:98%; }
	#imagewrapper { height:130px; }
	.left70 { float:none; width:100%; display:block; }
	.right30 { margin-left:0; display:block; }
	.home figure { width:100%; }
	.uebersicht .img { width:100px; }
	.uebersicht .img img { width:100px; }
	.uebersicht .text { margin-left:120px; }
}
@media screen and (max-width:450px) {
	#imagewrapper { height:100px; }
	article.news { padding:0; margin:10px 0; }
	article.news img { width:auto; float:none; display:block; }
	article.news h1 { margin:0; display:block; }
	article.news time { display:block; float:none; }
	article.news p { margin:0; display:block; }
}

/* Flex + Grid display for products*/
.products-wrapper{
	display: flex;
	flex-flow: row wrap;
}
.product-wrapper {
	flex-basis:33%;
	display: grid;
	grid-template-columns: 100px 110px 120px 100px;
	grid-template-rows: 2rem 2rem auto;
	grid-template-areas:
            "productimage productimage productnumber productgender"
            "productimage productimage productdescriptiontitle productdescriptiontitle"
            "productimage productimage productdescription designme";
	margin: 1rem;
	flex-grow: 1;
}
.product-image {
	grid-area: productimage;
	max-width: 200px;
	margin-right:10px;
	mix-blend-mode: multiply;
}

.product-number{
	grid-area: productnumber;
}
.product-gender{
	grid-area: productgender;
	justify-self: end;
	mix-blend-mode: multiply;
}
.product-description-title{
	grid-area: productdescriptiontitle;
}
.product-description-text{
	grid-area: productdescription;
}
.design-me{
	grid-area: designme;
	align-self: center;
	justify-self: end;
	mix-blend-mode: multiply;
}