/* lato-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/lato-v23-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('fonts/lato-v23-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/lato-v23-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/lato-v23-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/lato-v23-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/lato-v23-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}

body{font-family: 'Lato', Arial, sans-serif;background-color:#ebebeb}
textarea{font-family: 'Lato', Arial, sans-serif}
img{border:0}
h1{color: #ff8800;text-align:center;line-height:140%}
p{clear:both}
#content a{color:#1e5799}
#content a:hover{color:#000}
#content{font-size:1em;color:#333;line-height:150%}
#wrap{box-shadow: 0 0 61px #777;background-color:#fff;margin:0 auto;max-width:1200px}
#navi a{ color: white;display: inline-block;font-size: 1.2em;padding: 25px 23px 18px;text-decoration: none;border-bottom: 7px solid transparent;text-shadow: 1px 1px 3px #000}
#navi a:hover{background-color: rgba(255, 255, 255, 0.4);border-bottom: 7px solid #ff8800}
#navi{text-align: center;background: #1e5799;background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 )}
tr:nth-child(even){background-color:#ececec}
th{text-align:left}
th, td{padding:2px}
table { margin-top: 75px}
#drehstrom{background-color:#777}
#wechselstrom{background-color:#888}
.hersteller > p {background-color: #ebebeb;border-radius: 10px;box-shadow: 1px 1px 3px #777;display: inline-block;font-size: 1.7em;margin: 29px;padding: 19px}
.hersteller{clear: both;text-align: center;}
#logo{display: block;margin: 10px auto 50px;width:100%;max-width: 650px}
#footer{ background-color: #207cca;color: #eee;padding: 26px;text-align: center;text-shadow: 2px 1px 6px #000;clear:both}
.produkt{display:none}
.produkt-bild{width:100%}
.hersteller p{cursor:pointer}
p.active {background-color: #777;color: #fff}

@media all and (min-width:1000px){
	table {margin-left: 490px}
	.effect-apollo {width:50%;float:left}
	.produkt-bild{float:left;width:450px}
	.produkt h2{text-align:center}
	#content{padding:45px 100px}
}

@media all and (max-width:999px){
	#content{padding:20px}
	.effect-apollo {width:100%;margin:0 auto}
}

#google_translate_element {
  padding: 10px;
  height: 45px;
}

.icon svg {
  max-width: 40px;
  display: inline;
}

.call-btn {
	padding:30px;
	font-size:1.4em;
	display:block;
	max-width:200px;
	margin:30px auto;
	color:#fff !important;
	background-color:#ff8800;
	text-align:center;
	text-decoration:none;
	text-transform:uppercase;
}

#footer-nav {
	padding:20px;
}

#footer a {
  color: #fff;
  padding: 5px;
}

#logo, #navi a, .effect-apollo img, .produkt, #content{-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-o-transition:all 0.2s linear;-ms-transition:all 0.2s linear;transition:all 0.2s linear}}
	
/*Apollo*/
.effect-apollo img {
	opacity: 0.95;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale3d(1.05,1.05,1);
	transform: scale3d(1.05,1.05,1);
}
.grid {margin: 0 auto;max-width: 1000px}
.effect-apollo {
	position: relative;
	overflow: hidden;
	min-width: 320px;
	max-width: 500px;
	max-height: 500px;
	height: auto;
	background: #3085a3;
}
.effect-apollo img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
	opacity: 0.8;
}
.effect-apollo h2 {
	margin-top:0;
}
.effect-apollo .figcaption {
	padding: 1.4em;
	color: #fff;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.effect-apollo .figcaption,
.effect-apollo .figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}