/*
(c) 2019
www.dialogsued.de
*/
html {  margin: 0; padding: 0; }
body { overflow-x: hidden; }

::selection { background:blue; color:#fff }
::-moz-selection { background:blue; color:#fff }

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade { opacity:0; -webkit-animation:fadeIn ease-in 1; -moz-animation:fadeIn ease-in 1;animation:fadeIn ease-in 1; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards;	animation-fill-mode:forwards;-webkit-animation-duration:1s;-moz-animation-duration:1s;animation-duration:1s; }
.fade:first-child {-webkit-animation-delay: 1s;-moz-animation-delay: 1s;animation-delay: 1s;}
.fade:nth-child(2n) {-webkit-animation-delay: 1s;-moz-animation-delay:1s;animation-delay: 1;}

::-webkit-scrollbar { width: 15px; }
::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); }
::-webkit-scrollbar-thumb { background: rgba(0,0,255,0.8); }
::-webkit-scrollbar-thumb:window-inactive { background: rgba(0,0,255,0.4); }



/* cookie OLD */
#cookie-popup { font-family: 'wask'; position:fixed; color:#fff; text-align:center; left:0px; bottom:0px; width:100%; background:blue; z-index:999 }
#cookie-popup a {font-family: 'wask'; color:#fff; text-align:center; text-decoration:underline}
#cookie-popup button {font-family: 'wask'; position:relative; color:#fff; text-align:center; margin:0px 20px 20px 20px; padding:5px 10px; border:2px solid #fff; background:blue; font-size:15px; cursor:pointer}
#cookie-popup.hidden { display: none; }

/* cookie NEW */
#cookie-bar {background:#111111; height:auto; line-height:24px; color:#eeeeee; text-align:center; padding:3px 0;}
#cookie-bar.fixed {position:fixed; top:0; left:0; width:100%;}
#cookie-bar.fixed.bottom {bottom:0; top:auto;}
#cookie-bar p {margin:0; padding:0;}
#cookie-bar a {color:#ffffff; display:inline-block; border-radius:3px; text-decoration:none; padding:0 6px; margin-left:8px;}
#cookie-bar .cb-enable {background:#007700;}
#cookie-bar .cb-enable:hover {background:#009900;}
#cookie-bar .cb-disable {background:#990000;}
#cookie-bar .cb-disable:hover {background:#bb0000;}
#cookie-bar .cb-policy {background:#0033bb;}
#cookie-bar .cb-policy:hover {background:#0055dd;}



.dialogsued { position:fixed; left:25px; top:25px; font-family: 'wask'; font-size:15px; }
.dialogsued .logo { font-family: 'waskbold'; }
.dialogsued a { text-decoration:none; color:#000 }

.menu {position:fixed; float:left; width:30%; left:25px; top:100px;  }
.menu .in { margin:0 }
.menu .this { letter-spacing: 20px }
.menu .main { position: relative; float: left; width:100%; }
.menu .sub { position: relative; font-family: 'wask'; margin:10px 0; float: left; width:80%; }
.menu .sub li { display: inline; list-style-type:none; float:left; margin:0 25px 0 10px; }
.menu .sub a { color:#000; padding:2px 5px;  font-size:20px; text-decoration:none}
.menu .sub a {transition: filter .3s ease-in-out; filter: grayscale(100%);}
.menu .sub a:hover { color:blue; font-size:20px; background:blue; color:white; text-decoration:none; filter: grayscale(0%); }
.menu .main li { list-style-type:none; }
.menu .main li.active a { text-decoration:underline;font-size:50px }
.menu .main li.active a {transition: filter .3s ease-in-out; filter: grayscale(100%);}
.menu .main li.active a:hover { text-decoration:underline;color:blue; filter: grayscale(0%);  }
.menu .main li.small a {transition: filter .3s ease-in-out; filter: grayscale(100%);}
.menu .main li.small a { text-decoration:none;font-size:30px; line-height:35px }
.menu .main li a {  font-family: 'butlermedium'; font-size:40px; line-height:45px; color:#000; text-decoration:none }
.menu .main li a {transition: filter .3s ease-in-out; filter: grayscale(100%);}
.menu .main li a:hover { color:blue; text-decoration:none; filter: grayscale(0%);  }
.menu ul ul { list-style:none; padding:0; margin:0; }

.imprint { position:fixed; left:25px; bottom:25px; font-family: 'wask'; font-size:15px; }
.imprint a { margin-right:10px; color:#000; text-decoration:none }
.imprint a:hover { color:blue; text-decoration:underline }

.list { position:relative; float:left; left:25%; top:100px; width:80%; max-width:1800px; }
.series_list .box { margin-bottom:80px }

.box { position: relative; display:block;  width: 26%; margin:2%; float:left; margin-bottom:50px }
.box:before { content: ""; display: block;  padding-top: 100%; }
.box.black { background:black; }
.box.right { text-align:right }
.box.center { text-align:center }
.box.middle { top:50% }
.box.bottom { bottom:0 }
.box.white { background:white; }
.box .inner { bottom: 0;   left: 0;   position: absolute;   right: 0;   top: 0; }
.box .inner.top15 { top:15%; }
.box .inner.w80 img { margin-top:10%; max-width:80%; max-height:80%; }
.box .inner.w100 img { max-width:100%; max-height:100%; }
.box header { position:absolute; }
.box h1 { font-family: 'butlerextrabold'; font-size:50px; line-height:45px; margin:0 }
.box h4 { font-family: 'waskbold'; font-size:20px; line-height:20px; margin:0 }
.box header.left { left:0; text-align:left; }
.box header.top0 { top:0; }
.box header.top50 { top:50%; }
.box header.top { top:10px; }
.box header.middle { top:50%; }
.box header.bottom { bottom:-10px; }
.box header.right { right:0; text-align:right; }

.box { transition: filter .2s ease-in-out; -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */ filter: grayscale(100%); /* FF 35+ */}
.box a:hover { color:blue; zoom:1.05; text-shadow: 1px 2px #ffffff; }
.box:hover { /* left:5px; */ -webkit-filter: grayscale(0%); /* Ch 23+, Saf 6.0+, BB 10.0+ */ filter: grayscale(0%); /* FF 35+ */ }

#serien { float:left; width:100%; margin:150px 0 50px 0; font-family: 'butlerextrabold'; font-size:80px; }
#foot { position: relative; float:left; width:100%; height:100px }

.words { position:relative; float:left; left:30%; top:100px; width:60%; max-width:1800px; font-family: 'wask'; font-size:20px;}
.words h1 { font-family: 'butlerblack'; font-size:60px; line-height:45px; margin:0 0 40px 0; }
.words a { color:blue; text-decoration: none}

.tel { color:blue; padding:10px; font-family:'butlermedium'; text-align: right; font-size:40px; }

textarea, input, button { @include button-reset; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
textarea, input, button { border:1px solid blue; font-family: 'butlermedium'; font-size:20px; cursor:pointer; outline: none; line-height:10px; }
button:hover { border:1px solid #000; color:blue }
::placeholder { color:#eee; opacity: 1; }
:-ms-input-placeholder { color:#eee; }
::-ms-input-placeholder { color:#eee; }
.form_desc { float:left; font-size:20px; margin:40px 0 0 0; }
.inputbox { margin:0; z-index:10; width:100%; border:none; border-bottom:1px solid blue; font-family:'butlermedium'; font-size:35px; color:blue; border-left:none; border-right:none; }
.textarea { line-height: 40px; margin:0; z-index:10; width:100%; height:150px; border:none; border-bottom:1px solid #000; font-family:'butlermedium'; font-size:20px; color:blue; border-left:none; border-right:none; }
.captcha {position:relative; float:left; border:none; width:85px; margin-top:6px; }
.inputbox_small { position:relative; float:left; margin:0; padding:0; z-index:10; text-align:center; width:100px; border:none; border-bottom:1px solid #000; font-family:'butlermedium'; font-size:35px; color:blue; border-left:none; border-right:none; }
.button { cursor:pointer; margin:0 0 0 40px; padding: 20px 40px; background-color:blue; color:#fff; font-size:25px; font-family: 'wask'; border:1px solid #fff; }
.button:hover { cursor:pointer; border:1px solid blue; background-color:#fff; color:#000; font-size:25px; font-family: 'wask'; }

@media screen and ( max-width: 1400px ) {
	.menu { position:fixed; width:20%; left:15px }
  .list { position:relative;width:80%; }
  .words { position:relative;width:60%; }
	.box h1 { font-size:40px;}
  .menu .sub { position: relative; font-family: 'wask'; margin:10px 0; float: left; width:90%; }
  .menu .main li.active a { text-decoration:underline;font-size:30px }
}

@media screen and ( max-width: 1100px ) {
	.dialogsued { position:relative; left:25px; margin:0 0 30px 0; font-family: 'wask'; font-size:15px; }
	.menu { position:relative; width:100%; left:20px; top:0; margin:10px 0 0 0;}
  .list { position:relative;width:100%; left:20px; margin:-30px 0 0 0; }
  .words { position:relative;width:90%; left:20px; margin:-30px 0 0 0; }
	.imprint { display:none }
  .box { margin-bottom:50px }
	.tel { color:blue; padding:10px; font-family:'butlermedium'; text-align: right; font-size:30px; }
  #serien { float:left; width:100%; margin:50px 0 50px 0; font-family: 'butlerextrabold'; font-size:40px; }
  .box h1 { font-family: 'butlerextrabold'; font-size:20px; line-height:25px; margin:0; background:rgba(255, 255, 255, 0.8); padding:3px }
  .box h4 { font-family: 'waskbold'; font-size:12px; line-height:10px; margin:0; background:rgba(255, 255, 255, 0.8); padding:3px }
}

@media screen and (min-width: 800px) {
  .smart_navigation { display:none; }
  .cell { display:none; }
  .overlay { display:none; }
}

@media screen and (max-width: 800px) {
  .smart_navigation { position:absolute; z-index:80; font-family: 'wask'; right:30px; top:30px; cursor:pointer}
	.overlay { height: 0%; width: 100%; position: fixed; z-index: 90; top: 0; right: 0; background-color: rgba(255,255,255, 0.9); overflow-y: hidden; transition: 0.5s; }
	.overlay-content { position: relative; top: 15%; width: 100%; text-align: center; margin-top: 10px; }
	.overlay a { text-decoration: none; font-family: 'wask'; font-size:20px;  padding:5px; margin:5px 30px; line-height:50px; background-color:#fff; color:#000; display: block; transition: 0.3s; border:1px #000 solid}
	.overlay a:hover, .overlay a:focus { background-color:#fff; color:blue; letter-spacing: 2px; opacity: 0.5; }
	.overlay a.mobile_active { background-color:blue; color:#fff  }
	.overlay .closebtn { position: absolute; padding:10px 40px; top: 20px; right: 0px; font-size: 40px; background-color:#fff; color:#000 }
	.overlay .closebtn:hover { letter-spacing:0; opacity:1; background-color:blue; color:#fff }
  .menu { display:none; }
	.list { position:relative; width:90%; margin:-30px 0 0 0; }
	.box { position: relative; display:block; float:left; width: 45%;}
	.box img { }
	#serien { float:left; width:100%; margin:50px 0 50px 0; font-family: 'butlerextrabold'; font-size:40px; }
	.box h1 { font-family: 'butlerextrabold'; text-shadow: 1px 1px #ffffff; font-size:30px; background:none; line-height:25px; margin:0;}
	.box h4 { font-family: 'waskbold'; font-size:20px; background:none; line-height:10px; margin:0;}
}