@charset "utf-8";
/* author: Thomas Fux; www.brokenscreen.at -  
background-color: rgba(242, 207, 0,0.6);
*/
* { margin:0; padding:0px;  outline: none; }
html { width:100%; height: 100%; margin: 0px; padding:0px; display:block; box-sizing: border-box; scroll-behavior: smooth; }

body {background: url("https://gig.kanal3.tv/gfx/back.jpg") no-repeat fixed;  background-position: center center; background-clip: border-box; background-size: cover; }

h1 {font-size:16px; background:rgba(242, 207, 0, 1); padding:10px 32px 10px 32px; color:red; font-weight: bold;font-family: 'Montserrat', sans-serif; }

#cont {display:block; width: 100%; max-width: 980px; box-sizing: border-box; margin:0 auto ; position: relative;  text-align: left; min-height: 100%; background: url("gfx/background_paper_70.jpg") no-repeat fixed;  background-size: auto; background-position: top center; }

/* display:flex */
#overlay {display: flex;align-items: center; justify-content: center; position: fixed; top:-100%; left:0; background: rgba(17,17,17,0.90); width: 100vw; height:100vh; z-index:1; transition: all .6s ease }
#overlay div {display:block; width:100%; height:auto; padding:0px;  text-align:center;  font-size:1.2em; box-sizing: border-box; margin:20px; background:rgba(114,114,114,0.00);font-family: 'Montserrat', sans-serif; color: rgba(242, 207, 0, 1); border:solid 0px green   }


video { display: block; width: 80%; max-height: 90vh;  max-width: 1280px; border: 8px solid rgba(242, 207, 0,1); margin:0 auto; border-radius: 8px; -webkit-box-shadow: 0px 0px 11px 0px rgba(242, 207, 0,.6); 
box-shadow: 0px 0px 11px 0px rgba(242, 207, 0,.6);  }

#spon { display:flex; align-items: center; justify-content: space-around; flex-wrap: nowrap; flex-direction: row; flex-basis: auto; width:100%; height:110px;background-color: rgba(242, 207, 0, 0.6); box-shadow: 0px 2px 5px 0px rgba(50, 46, 38, 0.55); }
#spon div img { display:block; max-height:400px; max-width:1280px; width:100%; height:auto }

nav {display:block; margin-top: 16px}
ul {display:flex; align-items: center; justify-content:space-between; flex-wrap: nowrap; flex-direction: row; flex-basis: auto; width:100% }
ul, li {padding:0; text-decoration:none; list-style:none;width:auto }
li .but { display:flex; align-items: center; justify-content: center;  width:214px; height:85px; background: url("gfx/buttons/button.png"); text-align:center; font-family: 'Montserrat', sans-serif; font-size:20px; color:white; position: relative; margin-top:20px;  border-bottom: 1px transparent solid}
.but:hover, .but:active { color:rgba(242, 207, 0, 1);}
.postext { transform:rotate(350deg); line-height: 20px; margin-top: 14px }
.grey {color:rgba(242, 207, 0, 0.8)!important;}
#closebutton { display:none}

.haupt{ display:block; padding:20px; box-sizing: content-box;  font-size:14px; line-height:1.6em; font-family: 'Roboto', sans-serif;}
#slogan {display:block; width:100%; text-align: center; margin-top:20px}
#slogan img { max-width:566px; width:100%}
#logobig {display:block; width:100%; text-align:center; }
#logobig img {max-width: 720px;}

footer { display:flex; align-items: center; justify-content:center; flex-wrap: nowrap; flex-direction: row; flex-basis: auto; width:100%; height:28px; background:black; color:white; font-size:10px}
footer div a {display:block; color:white; margin:0 auto;}


h2 {font-size:18px; color:red; font-weight: bold;font-family: 'Montserrat', sans-serif; }
#votingarea { display:flex; width:100%; height:auto;  justify-content: space-between; flex-wrap: wrap; flex-direction: row;  box-sizing:border-box; gap:10px;   }
#votingarea .boxen {display:block; max-width:289px;  overflow:hidden;  height:100%;   }

.kategorie {display:block; text-align:center; width:100%; height:30px; max-width:289px; background: url("gfx/sonst/kategorie.png") top left no-repeat; color:white; font-weight:bold; line-height:30px  }
.tvposter {display:block; width:100%; max-width:289px; height:auto;  border-width: 2px;border-color: rgb(242, 207, 0);border-style: solid; border-radius: 6px; box-sizing:border-box;  box-shadow: 0px 10px 8px 0px rgba(50, 46, 38, 0.34); margin-top:6px }
.beschreibung {background-color: rgba(242, 207, 0,0.6); padding:20px 6px 24px 6px; border-bottom-left-radius:12px; border-bottom-right-radius:12px; margin-top:-6px; line-height:20px; font-size:15px; height: auto;   }

.mittig {display:block; text-align: center; width:100%;}
.videostart {display:block; max-width: 260px;border-radius: 10px; height: 43px; background-color: rgb(226, 10, 21); text-align:center; line-height:43px; font-size:24px; color:white; font-weight:bold; margin:0 auto; cursor: pointer; box-shadow: inset 0 0 0 0 rgb(226, 10, 21); transition: all 1s ease; border:solid 2px rgba(242, 207, 0,0); }

.videostart:hover,.videostart:focus {box-shadow: inset 0 -3em 4px 10px black; color:rgba(242, 207, 0,1); border:solid 2px rgba(242, 207, 0,1) }

.votebox {text-align: center; display:none}
.votebox2 {text-align: center; display:none}
.votegfx { display:block; width:100%; max-width:226px; height:auto; margin:0 auto;}
.votenow { display:block; width:100%; max-width:80px; height:auto; margin:0 auto} 
.votenow:hover {cursor:pointer;  transform: rotate(6deg) scale(96%)}