/* --- ALLGEMEINES --- */
@charset "utf-8";
*{box-sizing: border-box; background-repeat:no-repeat !important;}
html{width:100%; min-height:100%; color:rgb(0,0,0); font-family:'Open Sans', sans-serif; font-weight:400;}
body{background:none !important; background-image:none !important;}
img{border:none; margin:none;}
[class*="col"] img{width:100%;}
.clear{clear:both;}
.wrapper{padding:0px !important;}
.line{padding:0px !important; margin:15px 12.5% 25px 12.5%; height:0px; width:75%; position:relative; clear:left; border-bottom:1px solid rgb(0,0,0);}
ul{margin:0px auto;}
h1, h2{font-size:30pt; color:rgb(0,0,0); text-transform:uppercase; margin:0 0 25px 0; line-height:0.9; font-weight:800;}
.new{color:rgb(255,150,70);}
p, span{color:rgb(0,0,0); font-size:10.5pt; line-height:150%; font-weight:400;}
.wp-comment-stars{display:none !important;}

/* --- LINKS & BUTTONS --- */
a, a:visited{color:rgb(40,130,200); transition:color 0.2s ease; text-decoration:none; font-weight:800; text-transform:uppercase;}
a:hover{color:rgb(255,150,70);}
.button{height:auto; padding:15px 10px !important; transition:all 0.2s ease; background:rgb(40,130,200); color:rgb(255,255,255) !important; font-size:16pt; margin-bottom:10px; text-transform:uppercase; line-height:1; border:0px none; cursor:pointer;}
.button:hover{background:rgb(255,150,70); padding:15px 0px 15px 20px !important; color:rgb(255,255,255) !important;}
.offline{background:rgb(150,150,150) !important;}

/* --- BANNER --- */
.banner{background-color:rgb(40,130,200); position:absolute; top:0px; left:0px; right:0px;}
.logo{background:url('./images/png/logo.png'); background:url('./images/svg/logo.svg'), none; background-position:top center; position:relative; margin-left:auto; margin-right:auto; z-index:2; display:block; background-size:100% auto;}
.logo span{position:absolute; top:0; left:0; bottom:0; right:0; opacity:0; background:inherit; background-position:bottom center !important; -webkit-transition:opacity 0.2s; -moz-transition:opacity 0.2s; -o-transition:opacity 0.2s; background-size:100% auto;}
.logo span:hover{opacity:1;}
.banner-cast{position:absolute; top:0px; bottom:0px; background:url(../images/banner/8.png) center right no-repeat; background-size:auto 100%; margin-left:auto; margin-right:auto;}

/* --- BUTTONS NAV, SOCIAL --- */
[class*="btn"]{position:relative; margin:20px 25px 0 0; float:left; display:block; height:30px; background-position:top center;}
[class*="btn"] span{position:absolute; top:0; left:0; bottom:0; right:0; opacity:0; background:inherit; background-position:bottom center !important; -webkit-transition:opacity 0.2s; -moz-transition:opacity 0.2s; -o-transition:opacity 0.2s;}
[class*="social"]{width:30px; margin:20px 5px 0 0 !important;}
[class*="btn"] span:hover{opacity:1;}
a.btn-first{width:40px; background:url('./images/png/first.png'); background:url('./images/svg/first.svg'), none;}
a.btn-prev{width:25px; background:url('./images/png/prev.png'); background:url('./images/svg/prev.svg'), none;}
a.btn-prev-grey{width:25px; background:url('./images/png/prev.png'); background:url('./images/svg/prev.svg'), none; background-position:center center !important}
a.btn-rand{width:40px; background:url('./images/png/rand.png'); background:url('./images/svg/rand.svg'), none;}
a.btn-next{width:25px; background:url('./images/png/next.png'); background:url('./images/svg/next.svg'), none;}
a.btn-next-grey{width:25px; background:url('./images/png/next.png'); background:url('./images/svg/next.svg'), none; background-position:center center !important}
a.btn-last{width:40px; background:url('./images/png/last.png'); background:url('./images/svg/last.svg'), none;}
a.btn-social-facebook{background:url('./images/png/fb.png'); background:url('./images/svg/fb.svg'), none;}
a.btn-social-twitter{background:url('./images/png/twitter.png'); background:url('./images/svg/twitter.svg'), none;}
a.btn-social-rss{background:url('./images/png/rss.png'); background:url('./images/svg/rss.svg'), none;}
a.btn-social-twitch{background:url('./images/png/twitch.png'); background:url('./images/svg/twitch.svg'), none;}
a.btn-social-yt{background:url('./images/png/yt.png'); background:url('./images/svg/yt.svg'), none;}
a.btn-social-kofi{background:url('./images/png/kofi.png'); background:url('./images/svg/kofi.svg'), none;}
a.btn-social-amazon{background:url('./images/png/amazon.png'); background:url('./images/svg/amazon.svg'), none;}

/* --- NAVIGATION ---*/
.navigation{line-height:200%; font-size:16pt; padding:0px !important;}
.absolute, .fixed{z-index:998;}
.fixed{position:fixed; -webkit-transform: translateZ(0);}
.absolute{position:absolute; left:0px;}
.navigation a{padding-left:50px; position:relative; height:30px; line-height:30px; margin-bottom:7px; display:block;}
a.current{background:url('./images/png/nav.png'); background:url('./images/svg/nav.svg'), none; background-repeat:no-repeat; background-position:top left;}
a.current span{position:absolute; top:0; left:0; bottom:0; right:0; opacity:0; background:inherit; background-position:bottom left !important; -webkit-transition:opacity 0.2s; -moz-transition:opacity 0.2s; -o-transition:opacity 0.2s;}
a.current span:hover{opacity:1;}

/* --- SUCHFUNKTION NAVIGATION ---*/
form.search {height:30px; width:70%; float:left; margin:15px 0px 0px 50px; position:relative;}
form.search input[type=text]{height:28px; width:calc(100% - 40px);}
form.search button[type=submit]{position:relative; cursor:pointer; width:30px; height:30px; background:url('./images/png/search.png'); background:url('./images/svg/search.svg'), none;; float:right; display:block; padding:0px; outline:0px; border:none; transition:all 0.2s ease;}
form.search button[type=submit] span{position:absolute; top:0; left:0; bottom:0; right:0; opacity:0; background:inherit; background-position:bottom center !important; -webkit-transition:opacity 0.2s; -moz-transition:opacity 0.2s; -o-transition:opacity 0.2s;}
form.search button[type=submit] span:hover{opacity:1;}

/* --- COMIC --- */
img.comic{width:100%; margin-left:auto; margin-right:auto; margin-top:10px; margin-bottom:10px; display:block;}
.twitter-share-button{float:right; margin:10px 0 0 10px; padding:0px; height:20px !important;}
.fb-like{float:right; margin:10px 0 0 10px; padding:0px; height:20px !important; top:-3px;}

/* --- FOOTER ---*/
.footer{position:absolute; bottom:0px; left:0px; right:0px; height:auto; background:rgb(0,0,0);}
.footer p{color:rgb(255,255,255) !important;}
.wrapper-footer{height:auto; position:relative; margin:0px auto;}

/* --- DISQUS THREAD --- */
#disqus_thread{height:calc(auto - 50px);}

/* --- ARCHIV --- */
.archive{height:340px; overflow:hidden; position:relative; background:url(./images/bx_loader.gif) no-repeat center center;}
.archive h3{font-size:16pt; position:absolute; top:-21px; left:0px; right:0px; padding:15px; background:rgb(0,0,0); line-height:1; overflow:hidden; z-index:2; pointer-events:none;}
.archive span{width:auto; height:auto; padding:10px 10px 10px 15px; position:absolute; left:0px; top:50%; background:rgb(255,150,70); z-index:2; display:block; color:rgb(255,255,255); pointer-events:none;}
.archive p{font-size:10.5pt; color:rgb(255,255,255); padding:15px; background:rgb(0,0,0); position:absolute; bottom:-15px; left:0px; right:0px; height:auto; text-transform:none; overflow:hidden; pointer-events:none;}
.archive a {position:absolute; top:15px; right:15px; bottom:15px; left:15px; overflow:hidden;}
.archive img{-webkit-filter:grayscale(90%); filter:grayscale(90%); z-index:0; transition:all 0.2s ease; margin:0px auto; width:auto; min-width:100%; height:auto; min-height:100%;}
.archive img:hover{-webkit-filter:none; filter:none; transform:scale(1.1);}

/* --- FANART --- */
.fanart{position:relative;}
.fanart img{z-index:1; position:relative;}
.fanart p{font-size:10.5pt; color:rgb(255,255,255); padding:15px; background:rgb(0,0,0); position:absolute; bottom:0px; left:15px; right:15px; height:auto; text-transform:none; overflow:hidden; pointer-events:none; position:relative;}

/* --- BACKEND --- */
input{width:100%;}
input[type=submit]{font-weight:800;}
input[type=text], input[type=password], input[type=file]{border:1px solid black; margin:0 0 20px 0; padding:5px; font-size:10.5pt; float:left; transition:all 0.2s ease;}
input[type=text]:focus, input[type=password]:focus{border:1px solid rgb(255,150,70) !important; outline: none;}
input[type=file]{display:none;}
input[type=radio], input[type=checkbox]{width:15px; height:15px;}
.custom-file-upload{height:auto; width:100% !important; padding:10px !important; transition:all 0.2s ease; background:rgb(40,130,200); color:rgb(255,255,255) !important; font-size:10.5pt; text-transform:uppercase; line-height:1; border:0px none; cursor:pointer; margin-bottom:20px; font-weight:800;}
.custom-file-upload:hover{background:rgb(255,150,70); padding:10px 0px 10px 15px !important; color:rgb(255,255,255) !important;}
.error{color:red !important;}
.check{color:green !important;}

@media screen and (min-width:1030px){/* --- ALLGEMEINES DESKTOP --- */
html{position:relative; padding:175px 20% 235px 20%;}
body{margin:0px auto; min-width:800px; max-width:1300px;}
[class*="col"]{float:left; padding:15px; position:relative;}
.col-d1{width:25%;}
.col-d2{width:50%;}
.col-d3{width:75%;}
.col-d4{width:100%;}

/* --- BANNER --- */
.banner{height:150px;}
.logo{width:400px; height:95px; margin-top:25px;}
.banner-cast{height:150px; min-width:800px; max-width:1300px; left:20%; right:20%;}

/* --- COMIC --- */
img.comic{min-width:770px !important; max-width:1100px !important;}

/* --- MENU BUTTON - WIRD NUR AUF TABLET & PHONE ANGEZEIGT --- */
.menu{display:none;}
.menu span{display:none;}

/* --- NAVIGATION --- */
.absolute, .fixed{width:20%;}
.absolute{top:190px;}
.fixed{top:30px; left:0px;}

/* --- FOOTER --- */
.footer{padding:0px 20%;}
.wrapper-footer{min-width:800px; max-width:1300px;}}
@media screen and (max-width:1029px) and (min-width:735px){/* --- ALLGEMEINES TABLET --- */
html{position:relative; padding:155px 5% 350px 15%;}
body{margin:0px auto; min-width:600px; max-width:1029px;}
.hide-t{display:none;}
[class*="col"]{float:left; padding:15px; position:relative;}
.col-t1{width:33.33%;}
.col-t2{width:66.66%;}
.col-t3{width:100%;}
.col-t5{width:50%;}

/* --- BANNER --- */
.banner{height:130px;}
.logo{width:400px; height:95px; margin:17px auto;}
.banner-cast{height:130px; min-width:600px; max-width:1029px; left:0px; right:0px;}

/* --- COMIC --- */
.comic{width:100%; overflow-x:scroll;}
img.comic{width:1100px;}

/* --- MENU BUTTON - WIRD NUR AUF TABLET & PHONE ANGEZEIGT --- */
.menu{width:30px; height:30px; position:relative; margin:7px 0 0 50px; cursor:pointer; z-index:999; display:block; background:url('./images/png/menu.png'); background:url('./images/svg/menu.svg'), none; background-position:top center;}
.menu span{position:absolute; top:0; left:0; bottom:0; right:0; opacity:0; background:inherit; background-position:bottom center !important; -webkit-transition:opacity 0.2s; -moz-transition:opacity 0.2s; -o-transition:opacity 0.2s;}
.menu span:hover{opacity:1;}
.close{background:url('./images/png/close.png'); background:url('./images/svg/close.svg'), none;}
.close span{position:absolute; top:0; left:0; bottom:0; right:0; opacity:0; background:inherit; background-position:bottom center !important; -webkit-transition:opacity 0.2s; -moz-transition:opacity 0.2s; -o-transition:opacity 0.2s;}
.close span:hover{opacity:1;}

/* --- NAVIGATION ---*/
.navigation{width:300px; position:relative; margin-top:90px; display:none;}
.absolute, .fixed{height:100%; width:auto;}
.absolute{top:130px; padding-top:35px;}
.fixed{top:0px; left:0px; padding-top:35px;}
#nav-wrapper{background:#FFF; height:100%; width:0px; position:absolute; top:0px; left:0px; bottom:0px; box-shadow:0 0 15px rgba(0,0,0, 0.3);}

/* --- FOOTER --- */
.footer{padding:0px 5% 0px 15%;}
.wrapper-footer{min-width:600px; max-width:1029px;}}
@media screen and (max-width:734px){/* --- ALLGEMEINES MOBILE --- */
html{position:relative; min-width:320px; padding:120px 20px 300px 60px;}
body{margin:0px auto;}
.hide-m{display:none;}
[class*="col"]{float:left; padding:10px; position:relative;}
.col-m1{width:50%;}
.col-m2{width:100%;}

/* --- BANNER --- */
.banner{height:100px;}
.logo{width:240px; height:57px; margin:21px auto;}
.banner-cast{display:none;}

/* --- COMIC --- */
.comic{width:100%; overflow-x:scroll;}
img.comic{width:1000px;}

/* --- MENU BUTTON - WIRD NUR AUF TABLET & PHONE ANGEZEIGT --- */
.menu{width:30px; height:30px; position:relative; margin:10px 0 0 20px; cursor:pointer; z-index:999; display:block; background:url('./images/png/menu.png'); background:url('./images/svg/menu.svg'), none; background-position:top center;}
.menu span{position:absolute; top:0; left:0; bottom:0; right:0; opacity:0; background:inherit; background-position:bottom center !important; -webkit-transition:opacity 0.2s; -moz-transition:opacity 0.2s; -o-transition:opacity 0.2s;}
.menu span:hover{opacity:1;}
.close{background:url('./images/png/close.png'); background:url('./images/svg/close.svg'), none;}
.close span{position:absolute; top:0; left:0; bottom:0; right:0; opacity:0; background:inherit; background-position:bottom center !important; -webkit-transition:opacity 0.2s; -moz-transition:opacity 0.2s; -o-transition:opacity 0.2s;}
.close span:hover{opacity:1;}

/* --- BUTTONS NAV, SOCIAL --- */
[class*="btn"]{position:relative; margin:10px 15px 0 0 !important; float:left; height:30px; background-position-x:center !important;}
[class*="btn"] span{background-position-x:center !important;}
.btn-last{margin-right:0px !important;}
.twitter-share-button{float:left;}
.fb-like{float:left; margin-left:0px;}

/* --- NAVIGATION ---*/
.navigation{position:relative; margin-top:90px; display:none;}
.navigation a{margin-bottom:3px !important;}
.absolute, .fixed{height:100%; width:auto; padding-top:25px;}
.absolute{top:100px;}
.fixed{top:0px; left:0px;}
#nav-wrapper{background:#FFF; height:100%; width:0px; position:absolute; top:0px; left:0px; bottom:0px; box-shadow:0 0 15px rgba(0,0,0, 0.3);}

/* --- FOOTER --- */
.footer{padding:0px 20px 0px 60px;}
.wrapper-footer{position:relative;}

/* --- FANART --- */
.fanart p{left:10px !important; right:10px !important;}}