@font-face { 
	font-family: 'Lato'; 
	src: url('Lato-Light.ttf') format('truetype');
	font-weight: normal;
}
@font-face { 
	font-family: 'Lato'; 
	src: url('Lato-Regular.ttf') format('truetype');
	font-weight: bold;
}
@font-face { 
	font-family: 'Lato'; 
	src: url('Lato-Black.ttf') format('truetype');
	font-weight: 1000;
}


@media (min-width: 1061px) {
	body {
		max-width: 1000px;
		font-size: 20px;
	}
	.grid {
		grid-template-columns: repeat(4, 1fr);
	}
	.grid > li {
		min-width: 200px;
	}
	figure > div > ul {
		font-size: 75%;
	}
	#product header p, 
	#product header figure {font-size: 100%;}
}
@media (min-width: 801px) and (max-width: 1060px) {
	body {
		max-width: 800px;
		font-size: 18px;
	}
	.grid {
		grid-template-columns: repeat(4, 1fr);
	}
	.grid > li {
		min-width: 150px;
	}
	figure > div > ul {
		font-size: 70%;
	}
	#product header p, 
	#product header figure {font-size: 115%;}
}
@media (min-width: 400px) and (max-width: 800px) {
	body {
		max-width: 90vw;
		font-size: 21px;
	}
	.grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.grid > li {
		min-width: 180px;
	}
	header figure {
		clear:both;
	}
	figure > div > ul > li { font-size:16px} 
}

@media (min-width: 400px) {
	padding: 1.3em;
	.grid > li {
		max-height: 100vw;
		max-width: 50vw;
	}
	.grid.products > li {min-height: 300px;}
}
@media (max-width: 399px) {
	body {
		max-width: 90vw;
		font-size: 21px;
		padding:0;
	}
	.grid {
		grid-template-columns: 1fr;
	}
	.grid > li {
		min-width: 73vw;
		max-width: 90vw;
		max-height: 160vw;
	}
	.grid.logos > li > img {max-height: 50px !important}
	.grid.logos > li {padding:5px !important}
	.grid.logos {grid-gap:5px !important}
	.grid.products > li {min-height: 415px;}
	
	figure > div > ul {
		font-size: 90%;
	}
}


#product h1 > span, 
#product h2 > span, 
#product h3 > span { display:block; }


#product header {margin-top:80px;}
#product header figure {float:left; margin: 0 30px 30px 0;}
		
		
@media (max-width: 800px) {
	#product header p, 
	#product header figure {font-size: 100%;}
	header figure { clear:both; }
}
		
		
/* Linkfarben für die Produkte  */

.over a {color: #00A8B0}





* {box-sizing: border-box;}

a { 
    font-weight: bold;
    color: #87ab20;
    display: inline-block;
}
footer a {color: #87ab20;}

p { line-height:1.5em;}


body {
	font-family: 'Lato', sans-serif;
	font-weight: normal;
	color:#828282;
	color:#5c5c5c;
	/* hyphens: auto; */
	margin: 0 auto;
	
}

body > img {width: 25%;float: left;margin-top: 87px;}

header {
	margin-top: 37px;
	position:relative;
}
header > img {
	max-width: 200px;
	width: 50vw;
}
header figure {width: 300px; max-width: 50vw;}

header .ibc {
	float:right;

}

content{
    clear: both;
    display: block;
}
section, footer {
    border-top: 1px solid #ccc;
    padding-top: 30px;
    padding-bottom:50px;
}
h1 {font-size:2em;}




footer {
	padding: 1em 0;
	margin-top: 3em;
	margin-bottom:3em;
}
footer p {font-size:80%}

ul {
	margin: 0;
	padding: 0;
	display: block;
}
li {
	display:block;
	padding: 0;
	list-style: none;		
}
ul.listy li {padding: 0 0 0.66em 2em;}

.grid {
	display: grid;
	grid-gap: 1em;
	grid-auto-flow: row;
}

.grid.products {
	padding-top:40px;
}
.grid.logos {
	padding-bottom:30px;
}
.grid.featured {
	margin-top: 39px;
}

.grid.featured li span  {
	border-radius:50%;
	width:150px;
	height:150px;
	background-size: 120%;
	background-position: center -114px;
	display:block;
	margin:auto;
}
.grid.featured li span.panoo  {
	background-image:url(panoo.svg);
}
.grid.featured li span.over  {
	background-image:url(over.svg);
}
.grid.products > li {
	width: 100%;
	cursor: pointer;
}
.grid > li > figure, .grid > li > figure > div, .grid > li > figure > div > * {
	width: 100%;
}

.grid.logos > li {
	border: 1px solid #ccc;
	text-align: center;
    padding: 1.5em;
}

.grid.logos > li > img {
	width:100%;
	max-width: 200px;
	max-height: 80px;
	min-height: 80px;
	object-fit: contain;
	object-position: center center;
}

figure {margin: 0;}
figure > figcaption {
	text-align: center;
	padding: 0.5em 0.25em;
	font-weight: bold;
}

figure.third > div {
	perspective: 800px;
	width: 100%;
	transform: rotate3d(0, 0, 0, 180deg);
	/* animation: anim3d 5s infinite linear; */
	transition-property: transform;
	transition-duration: 1s;
	transform-style: preserve-3d;
	outline: 1px solid #aaa;
	outline-offset: -5px;
}
figure.third:hover > div {
	transform: rotate3d(0, 1, 0, 180deg);
}
figure > div > ul {
	width: 100%;
	height: 98%;
	overflow:hidden;
	display: block;
	margin:2px;
	padding: 1em;
	
}
figure > div > ul >li {
	padding: 0.33em 0;
}
figure > div > ul >li:first-child {
	font-weight: bold;
}
figure > div > .front {
	position: relative;
	top: 0;
	left:0;
	transform: rotate3d(0, 0, 0, 180deg);
	backface-visibility: hidden;
}
figure > div > .back {
	position: absolute;
	top: 0;
	left:0;
	transform: rotate3d(0, 1, 0, 180deg);
	backface-visibility: hidden;
}
figure li.url {
	position:absolute;
	bottom:10px;
} 


@keyframes anim3d {
	0% {   transform: rotateY(0) ;}
	100% {  transform: rotateY(360deg) ; }
}

.touch figure.third > div {
	transform: none;
	outline: 1px solid #aaa;
	outline-offset: -5px;
}
.touch figure > div > .back {
	position:unset;
	transform: none;
	backface-visibility: unset;
	height:360px;
	min-height:320px;
}
.touch .grid.products > li > figure.third:hover {
	transform: unset;
}
.touch .grid.products > li > figure.third > div > img {
	height: 80px;
	object-fit: cover;
	object-position: 0 69%;
}
.touch .grid.products > li > figure.third.offset > div > img {
    object-position: 0 67%;
}
.touch .grid.products > li > figure.third > figcaption {
	padding-top: 0;
}
footer > a > img {width: 100px;}
footer > a {float: left; padding: 6px 1em 0 0; display:inline;}

.video-wrapper {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-wrapper iframe,  
.video-wrapper object,  
.video-wrapper embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}