@media screen and (max-width:579px) {

#chat-banner {display:none;}   

.taktil-instagram {display:none;}

#taktil .taktil-tekst {
    line-height: 1.15 !important;
    margin-top: 12px !important;
}

#mobil-image-sepaatv {
    display: flex;
    width: 100%;
    margin: 0 auto;
    opacity: 0;
    bottom: 20px;
    position: fixed;
}

#mobil-image-sepaatv > img {
    width: 210px;
    margin: 0 auto;
    text-align: center;
    display: flex;
}

#loader-overlay img {
    margin-bottom: 8px;
    width: 200px !important;
}   

#taktil-knap-mobil {
    display: block !important;
    left: 118px !important;
    top: 265px !important;
    width: 26px !important;
    height: 23px !important;
    position:absolute;
    z-index:2;
    opacity:0;
}    

#taktil {
    width: 244px !important;
    height: 191px !important;
    margin-left: -2px !important;
    top: 213px !important;
    background-size: 244px 191px !important;
    padding:7px !important;
    z-index:995 !important;
}

#taktil h2 {
    font-size:13px !important;
    margin-bottom:8px !important;
}

#taktil p {
    font-size:10px !important;
}

#player-div-nyc {
    height: 218px !important;
    left: -1260px !important;
    top:184px !important;
}

#tv-glow, #tv-glow-inset {
    width: 297px !important;
    height: 235px !important;
    margin-top: 19px !important;
    margin-right: -54px !important;
}  

#flimmer {
    margin-right: -49px !important;
}

#static, #static-fejl {
    margin-right: -45px !important;
}    

.pause-menu, .nosignal-menu {
    margin-top: 49px !important;
    margin-left: -151px !important;
}

.kanaltekst {
    margin-top: 55px !important;
    margin-left: -230px !important;
}

.kanaltekst span {
    font-size: 20px !important;
}

#play, #off {
    left: 60px !important;
    top: 254px !important;
}    

#forrigekanal {
    left: 244px !important;
    top: 267px !important;
}

#naestekanal {
    left: 270px !important;
    top: 267px !important;
}

#restart-music {
    width: 23px !important;
    height: 22px !important;
    left: 208px !important;
    top: 267px !important;
}

#pause-resume {
    width: 281px !important;
    height: 216px !important;
    margin-top: 31px !important;
    margin-left: 45px !important;
    position: absolute;
    top: auto;
    left: auto;
}

.marquee-container {
    margin-left: 144px;
    margin-top: 268px;
    width: 60px;
    height: 18px;
    right: 176px;
}

#player-container-nyc {
    width: 271px;
    height: 308px;
    margin-left: 0px !important;
    top: 116px;
}

#static-out-music, #static-pause {
    width: 276px !important;
    height: 215px !important;
    margin-top: 28px !important;
    margin-right: -44px !important;
}

.screen {
    width: 276px !important;
    height: 215px !important;
    margin-top: 28px !important;
    margin-left: 0px !important;
}

}

@media screen and (min-width:580px) and (max-width:1025px) {

#taktil .taktil-tekst {
    line-height: 1.15 !important;
    margin-top: 10px !important;
}

#mobil-image-sepaatv {
    display: flex;
    width: 100%;
    margin: 0 auto;
    opacity: 0;
    bottom: 20px;
    position: fixed;
}

#mobil-image-sepaatv > img {
    width: 400px;
    margin: 0 auto;
    text-align: center;
    display: flex;
}    

.kanaltekst span {
    font-size: 22px !important;
}    

#chat-banner {display:none;}

#loader-overlay img {
    margin-bottom: 8px;
    width: 250px !important;
}
    
#taktil-knap-mobil {
    display:block !important;
    left: 172px !important;
    top: 387px !important;
    width: 32px !important;
    height: 27px !important;
    position:absolute;
    z-index:2;
    opacity:0;
}

#taktil {
    width:364px !important;
    height:273px !important;
    margin-left: -2px !important;
    top: 103px !important; 
    background-size: 364px 273px !important;    
}

#taktil h2 {
    font-size:18px !important;
    margin-bottom:10px !important;
}

#taktil p {
    font-size:14px !important;
}

#player-div-nyc {
    height: 311px !important;
    left: -1201px !important;
    top: 211px !important;
}

#play, #off {
    left: 84px !important;
    top: 375px !important;
    width: 79px !important;
} 

#forrigekanal {
    left: 352px !important;
    top: 384px !important;
    height: 35px !important;
    width: 35px !important;
}

#naestekanal {
    left: 390px !important;
    top: 384px !important;
    height: 35px !important;
    width: 35px !important;
}

#restart-music {
    left: 300px !important;
    top: 384px !important;
    height: 35px !important;
    width: 35px !important;
}

#infoknap {
    left: 169px !important;
    top: 384px !important;
    height: 35px !important;
    width: 35px !important;
}

#pause-resume {
    width: 404px !important;
    height: 315px !important;
    margin-top: 39px !important;
    margin-left: -204px !important;
    position: absolute;
    top: auto;
    left: auto;
}

#flimmer {
    margin-left: 0px !important;
    width: 427px !important;
    padding: 0px !important;
    margin-top: 76px !important;
}

#tv-glow, #tv-glow-inset {
    margin-top: 49px;
    margin-left: 0px;
}    

#player-container-nyc {margin-left:0px !important;}

#static, #static-out-music, #static-pause {margin-right: -45px !important;}

#static-fejl {margin-left: 0px !important;}

#static-pause {
    width: 404px !important;
    height: 315px !important;
    margin-top: 39px !important;
}

.pause-menu > img {
    width: 120px;
}

.nosignal-menu > img {
    width: 120px;
}

.pause-menu, .nosignal-menu {
    margin-top: 72px !important;
    margin-left: -222px !important;
}

.kanaltekst {
    margin-top: 72px !important;
    margin-left: -331px !important;
}

.screen {margin-left:0px !important;}

#fejl-tv {margin-left:0px !important;}

.marquee-container {
    margin-left: 209px;
    margin-top: 389px;  
}

}

@media screen and (max-width:1025px) {

#tvguide, #musikguide {
    display:none !important;
}

.taend00 {display:none !important;}

.taend00-mobil {
    display:block !important;
    width:100%;
}

.composite-overlay {
    display:none;
}

#floating-sky {
    display:none !important;    
}

}

@media screen and (min-width:1026px) {

#loader-overlay img {
    width:300px !important;
    margin-bottom:15px;
}

#static-out-music, #static-pause, #static, #static-fejl, #flimmer, .screen, #fejl-tv {
    margin-left:-14px !important; 
}

.pause-menu, .nosignal-menu {
    margin-left: -354px !important;
}

.kanaltekst {
    margin-left: -481px !important;
}

.nosignal-menu > img {
    width:260px !important;
}

#tv-glow, #tv-glow-inset {
	border-radius:0px !important;
    margin-top: 70px !important;
    margin-left: -14px !important;
    width: 639px !important;
    height: 485px !important;
}

 .marquee-container {
    width: 168px !important;
    height: 30px !important;
    margin-left: 195px !important;
    margin-top: 619px !important;
    z-index: 1 !important;
    font-size:19px !important;
}  

#play, #off {
    left: 85px !important;
    top: 600px !important;
    width: 100px !important;
    height: 60px !important;
}

#pause-resume {
	left: 363px !important;
    top: 614px !important;
    width: 40px !important;
    height: 43px !important;
}

#restart-music {
	left: 405px !important;
    top: 614px !important;
    width: 40px !important;
    height: 43px !important;
}

#player-div-nyc {
	top: 200px !important;
	height: 474px !important;
	left: -1556px !important;
}

}

/* General CSS */

#flimmer, #static-fejl, #static {
    z-index:5 !important;  
}

#static-out-music, #static-pause {
    z-index:12 !important;
}

#taktil h2 {
    font-family: 'NLTP-TVG', sans-serif;
    font-size: 24px;
    color: #ffd74a;
    text-shadow: 3px 3px 3px #000000;
    font-weight: 700;
    text-align:center;
    margin-bottom:15px;
}

#taktil p {
    font-family: 'NLTP-TVG', sans-serif;
    font-size: 18px;
    color: white;
    font-weight: 700;
}

#taktil {
    display: none;
    position: absolute;
    width: 571px;
    height: 339px;
    background-image: url(bgs/taktil.jpg) !important;
    z-index: 991;
    top: 139px;
    margin: 0 auto;
    margin-left: -7px;
    color: #ffd74a;
    font-size: 20px;
    line-height: 1.4;
    padding:15px;
    background-size: 571px 339px;
    opacity: 0.9;
}

#taktil, #taktil * {
    font-family: 'NLTP-TVG', sans-serif;
    -webkit-text-stroke: 0.1px #00000057;
    text-shadow: 3px 3px 3px #000000;
    font-weight: 700;
}

#taktil .taktil-tekst {
    font-size: 16px;
    line-height: 1.35;
    margin-top:2px;
}

#taktil .taktil-tekst a {
    color: #e2d186;
    text-decoration: none;
}

#taktil .taktil-tekst .taktil-orange {
    color: #e2d186;
    text-decoration: none;
}

#taktil .taktil-tekst .taktil-orange a {
    color: #e2d186;
    text-decoration: none;
}

#taktil .taktil-credits-link {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

#taktil.taktil-credits-active {
    overflow: hidden;
}

#taktil .taktil-credits {
    position: relative;
    width: 100%;
}

#taktil .taktil-credits-scroll {
    animation: taktil-credits-roll 35s linear forwards;
}

@keyframes taktil-credits-roll {
    to {
        transform: translateY(var(--taktil-credits-distance));
    }
}

#musikguide {
    display:none;
    z-index: 4;
    position: absolute;
    opacity: 1;
    top: 494px;
    margin-left: -4px;
    width: 649px;
    height: auto;
    pointer-events:none;
}

#musikguide img {
    width: 88%;
    height: auto;
    position: absolute;
    margin: 0 auto;
    margin-left: 38px;
}

.musikbar-blue {
    display: none;
}

.musikbar-gold {
    display: none;
}

.musikbar-grey {
    display: none;
}

.musikguide-text-artist {
    font-family: 'ArialRounded-MG', sans-serif;
    font-size: 24px;
    position: absolute;
    color: #e690de;
    top: 9px;
    left: 74px;
}

.musikguide-text-title {
    font-family: 'ArialRounded-MG', sans-serif;
    font-size: 20px;
    position: absolute;
    color: #50afdf;
    top: 37px;
    left: 98px;
}

#tvguide {
    display:none;
    z-index: 10;
    position: absolute;
    opacity: 1;
    top: 490px;
    margin-left: -4px;
    width: 649px;
    height: auto;
    pointer-events:none;
}

#tvguide img {
    width: 88%;
    height: auto;
}

.tvguide-text-kanal {
    font-family: 'NLTP-TVG', sans-serif;
    font-size: 15px;
    position: absolute;
    color: white;
    top: 7px;
    left: 175px;
    -webkit-text-stroke: 0.1px #00000057;
    text-shadow: 3px 3px 3px #000000;
    font-weight: 700;
}

.tvguide-text-program {
    font-family: 'NLTP-TVG', sans-serif;
    font-size: 18px;
    position: absolute;
    color: white;
    top: 41px;
    left: 75px;
    -webkit-text-stroke: 0.1px #00000057;
    text-shadow: 3px 3px 3px #000000;
    font-weight:700;
}

.tvguide-text-tid {
    font-family: 'Andale-TVG', sans-serif;
    font-size: 11px;
    position: absolute;
    color: #cfcf4e;
    top: 7px;
    left: 51px;
    text-shadow: 3px 3px 3px #000000;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.tvguide-text-tvguide {
    font-family: 'Andale-TVG', sans-serif;
    font-size: 11px;
    position: absolute;
    color: #cfcf4e;
    top: 7px;
    left: 554px;
    text-shadow: 3px 3px 3px #000000;
    font-weight: 700;
    letter-spacing: -0.5px;
}

#container00 {
	background-image: url(bgs/00s/himmel.jpg) !important;
	background-position-y: -234px;
	position:absolute;
	background-size:auto;
	overflow:hidden;
}	

#chat-banner {
    display:none;
    position: absolute;
    right: 40px;
    bottom: 0;
    width: 365px;
    max-width: calc(100vw - 40px);
    z-index: 101;
}

@media screen and (max-width:1019px) {
    #chat-banner {display:none !important;}
}

#chat-banner > img {
    display: block;
    width: 100%;
}

#chat-banner > button, #chat-banner > a {
    position: absolute;
    top: 0;
    height: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

#chat-banner .chat-toggle {
    left: 0;
    width: 42%;
}

#chat-banner .chat-time-travel {
    left: 42%;
    width: 32%;
}

#chat-banner .chat-email {
    left: 74%;
    width: 26%;
}

#time-travel-prompt {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 197px;
    width: 330px;
    max-width: 100%;
    transform: translateX(-50%);
    z-index: 2;
}

#time-travel-prompt img {
    display: block;
    width: 100%;
}

#time-travel-prompt button {
    position: absolute;
    top: 51%;
    width: 19%;
    height: 24%;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

#time-travel-prompt .time-travel-yes {
    left: 30%;
}

#time-travel-prompt .time-travel-no {
    left: 51%;
}

#chat-notification {
    display: none;
    position: absolute;
    right: 5px;
    bottom: calc(100% + 14px);
    width: 326px;
    max-width: 100%;
    min-height: 57px;
    box-sizing: border-box;
    border: 1px solid #879ba2;
    border-radius: 12px;
    background: linear-gradient(#eff7f9, #d8e9ec);
    box-shadow: 0 3px 4px #4c5556, inset 0 1px #fff;
    color: #575757;
    font-family: Arial, sans-serif;
}

.chat-notification-icon {
    position: absolute;
    top: 8px;
    left: 10px;
    width: 40px;
    height: 36px;
    border: 1px solid #a4b1b6;
    border-radius: 5px;
    background: linear-gradient(#e0e9eb, #d2dfe2);
    text-align: center;
}

.chat-notification-icon img {
    display: block;
    width: 20px;
    height: 20px;
    margin: 7px auto 0;
    filter: hue-rotate(235deg);
}

.chat-notification-message {
    margin: 11px 30px 10px 61px;
    overflow-wrap: anywhere;
}

.chat-notification-name, .chat-notification-status {
    display: block;
}

.chat-notification-name {
    font-size: 14px;
    line-height: 17px;
}

.chat-notification-status {
    font-size: 12px;
    line-height: 15px;
}

.chat-notification-close {
    position: absolute;
    top: 15px;
    right: 13px;
    border: 0;
    padding: 0;
    background: transparent;
    color: #68b6d0;
    font: 19px Arial, sans-serif;
    cursor: pointer;
}

.taend00 {
	display:block;
	pointer-events:none;
	visibility: visible;
    width: 1186px;
    right: -120px;
    position: absolute;
    height: auto;
}

#floating-sky {
    z-index: 20;
    pointer-events:none;
    top: 665px;
    position: absolute;
}

#floating-sky img {
  animation:skyMove 25s ease-in-out infinite;
  will-change: transform;
  width:850px;
}

@keyframes skyMove {
  0%   { transform: translate(0, 0) scale(1); }
  20%  { transform: translate(16px, -18px) scale(1.05); }
  40%  { transform: translate(-20px, 12px) scale(1.1); }
  60%  { transform: translate(14px, 20px) scale(1.15); }
  80%  { transform: translate(-18px, -10px) scale(1.05); }
  100% { transform: translate(0, 0) scale(1); }
} 

#infoknap {
    left: 460px;
    top: 629px;
    width: 23px;
    height: 22px;
    background: transparent;
    border: none;
    cursor: grab;
    z-index: 30;
    padding: 0;
}

.kanaltekst {
    position: absolute;
    z-index: 13;
    width: 200px;
    opacity: 0;
    color: lime;
    font-family: Sys;
    pointer-events: none;
    text-shadow: 0 0 3px lime;
    margin-top:129px;
}

.kanaltekst span {
    position: absolute;
    font-size: 35px;
    filter: blur(1px);
    animation: blur 30ms infinite, jerk 50ms infinite;
}

.kanaltekst span:nth-child(1) {
    color: red;
    margin-left: -2px;
    filter: blur(2px);
}

.kanaltekst span:nth-child(2) {
    color: lime;
    margin-left: 2px;
    filter: blur(2px);
    animation: glitch2 1s infinite;
}

.kanaltekst span:nth-child(3) {
    color: blue;
    filter: blur(1px);
    animation: glitch1 1s infinite;
}

.kanaltekst span:nth-child(4) {
    color: white;
    filter: blur(1px);
    text-shadow: 0 0 50px rgba(255, 255, 255, 0.4);
}

.kanaltekst span:nth-child(5) {
    color: rgba(255, 255, 255, 0.1);
    filter: blur(15px);
}

#forrigekanal {
    left: 488px;
    top: 629px;
    width: 23px;
    height: 22px;
    background: transparent;
    border: none;
    cursor: grab;
    z-index: 30;
    padding: 0;
}

#naestekanal {
    left: 516px;
    top: 629px;
    width: 23px;
    height: 22px;
    background: transparent;
    border: none;
    cursor: grab;
    z-index: 30;
    padding: 0;
}

#taktil-knap {
    left: 587px;
    top: 450px;
    width: 83px;
    height: 27px;
    background: transparent;
    border: none;
    cursor: grab;
    z-index: 30;
    padding: 0;
}

.power-overlay, .forward-overlay, .pause-overlay, .info-overlay, .minus-overlay, .plus-overlay, .composite-overlay, #forrigekanal, #naestekanal, #infoknap, #taktil-knap {
    position: absolute;
    z-index:2;
}

.power-overlay  {
    left: 90px;
    top: 601px;
    width: 87px;
    display:none;
}   

.forward-overlay {
    left: 406px;
    top: 617px;
    width: 33px;
    display:none;
}
.pause-overlay {
    left: 368px;
    top: 617px;
    width: 33px;
    display:none;
}

.info-overlay {
    left: 462px;
    top: 628px;
    width: 21px;
    display:none;
}

.minus-overlay {
    left: 489px;
    top: 628px;
    width: 21px;
    display:none;
}

.plus-overlay {
    left: 516px;
    top: 628px;
    width: 21px;
    display:none;
}

.composite-overlay {
    left: 558px;
    top: 619px;
    width:80px;
}

@font-face {
    font-family: 'Andale-TVG';
    src: url('lcdfonts/Andale-TVG.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
	}

@font-face {
    font-family: 'NLTP-TVG';
    src: url('lcdfonts/NLTP-TVG.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
	}

@font-face {
    font-family: 'ArialRounded-MG';
    src: url('lcdfonts/Arial-Rounded.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
	}

/* DVD Logo */

@font-face {
    font-family: 'DVD';
    src: url('lcdfonts/DVD.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

#dvd-knap {
    display: none;
    left: 179px;
    top: 564px;
    width: 409px;
    height: 27px;
    background: transparent;
    border: none;
    cursor: grab;
    z-index: 30;
    padding: 0;
    position: absolute;
}

#dvd-knap2 {
    display: none;
    left: 179px;
    top: 564px;
    width: 409px;
    height: 27px;
    background: transparent;
    border: none;
    cursor: grab;
    z-index: 30;
    padding: 0;
    position: absolute;
}

/* ORIGINAL STYLE!

#dvd-logo-container {
    display: none;
    z-index: 6;
    position: absolute;
    transition: opacity 3.5s ease;
    animation: shake 1s infinite;
    opacity: 1;
    margin-top: 79px;
    margin-left: -8px;
    width: 608px;
    height: 469px;
    background: #45484d;
    background: -moz-radial-gradient(center, ellipse cover, #45484d 0%, #000000 100%);
    background: -webkit-radial-gradient(center, ellipse cover, #45484d 0%, #000000 100%);
    background: radial-gradient(ellipse at center, #45484d 0%, #000000 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000', GradientType=1);
    overflow: hidden;
} */

#dvd-logo-container {
    display: none;
    z-index: 0;
    position: absolute;
    transition: opacity 3.5s ease;
    animation: shake 1s infinite;
    opacity: 1;
    margin-top: 11px;
    margin-left: 23px;
    width: 608px;
    height: 469px;
    background: #00000000;
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000', GradientType=1);
    overflow: hidden;
    top: 0px;
    pointer-events:none;
}

#dvd-pause {
    display: none;
    z-index: 5;
    position: absolute;
    opacity: 1;
    margin-top: 11px;
    margin-left: 23px;
    width: 608px;
    height: 469px;
    background: #00000000;
    top: 0px;
}

#dvd-loading {
    display: none;
    z-index: 0;
    position: absolute;
    opacity: 1;
    margin-top: 11px;
    margin-left: 23px;
    width: 608px;
    height: 469px;
    background: #00000000;
    top: 170px;
}

#dvd-loading img {
    width:50px;
}

#dvd-loading h3 {
    font-family: "Sys";
    font-size: 26px;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000;
    filter: blur(1px);
    color:yellow;
    margin-top: 60px;
    margin-left: 57px;
}

#dvd-logo {
    display:block;
    font-family: 'DVD', sans-serif;
    position: absolute;
    background-size: 100% auto;
    background-repeat: no-repeat;
    width: 103px;
    height: 46px;
    color: #fff;
}

#dvd-logo:before {
	font-family: 'DVD', sans-serif;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "\e900";
	font-size: 45px;
}

/* DVD Menu */

#dvd-menu-container {
    z-index: 12;
    position: absolute;
    display: none;
    margin-top:68px;
    margin-left: -14px;
    width: 649px;
    height: 486px;
}

#dvdmenu {
	background: #1b2838 none repeat scroll 0 0;
	margin: 0;
	overflow: hidden;
	height: 100vh;
	width: 100vw;
}
@font-face {
	src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/terminal_copy.ttf);
	font-family: 'Terminal';
}

@font-face {
	src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/sys.ttf) format('truetype');
	font-family: 'Sys';
}

/* DVD Screen Background */
.dvdscreen::before {
	background: transparent linear-gradient(to bottom, #85908c 0%, #323431 100%);
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate3d(-50%, -50%, 0);
	width: 100%;
	height: 100%;
	z-index: -1;
}

/* CRT Scanlines */
.dvdscreen .overlay {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
    pointer-events:none;
}

.dvdscreen .overlay::after {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/crt.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	content: "";
}

.dvdscreen .overlay::before {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	content: " ";
	background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
		linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
	z-index: 2;
	background-size: 100% 2px, 3px 100%;
	pointer-events: none;
}

.picture {
	height: 488px;
	overflow: hidden;
	width: 628px;
	z-index: -1;
	transform: scale(0, 0);
	/*background: transparent linear-gradient(to bottom, #85908c 0%, #323431 100%);*/
    background: #00000070;
}

.dvdmenu {
    opacity: 0;
    top: -305px;
    position: relative;
    margin: 0 auto;
    background-color: #0069ff;
    box-sizing: border-box;
    font-family: "Sys";
    font-size: 25px;
    height: auto;
    text-transform: uppercase;
    width: 250px;
    text-shadow: 1px 1px 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000;
    filter: blur(1px);
    color: #fff;
    animation: jerkup 100ms infinite;
    padding-top: 5px;
}

.dvdmenu header {
	color: #e7e05c;
	margin-bottom: 10px;
	padding: 5px 15px;
	animation: 5s ease 2000ms normal none infinite running glitch;
    pointer-events:none;
}

.dvdmenu ul {
	margin: 0;
	padding: 0;
	animation: 5s ease 2000ms normal none infinite running glitch;
}

.dvdmenu ul li {
	box-sizing: border-box;
	list-style: outside none none;
	padding: 5px 15px;
}

.dvdmenu ul li.active {
	background-color: #1af2ff;
}

.dvdmenu ul li.hover {
	background-color: #1af2ff;
}

.dvdmenu ul li a {
	color: #fff;
	text-decoration: none;
    width: 250px;
    position: relative;
    display: block;
    left: -15px;
}

.dvdmenu footer {
	background-color: #2afd72;
	margin-top: 10px;
	padding: 5px 15px;
	animation: 5s ease 2000ms normal none infinite running glitch;
}

.dvdmenu footer::after {
	clear: both;
	content: " ";
	display: table;
}

.dvdmenu footer .key {
	float: left;
	width: 50%;
}

.dvdmenu footer .key span {
	background-color: #0069ff;
	border: 6px solid #e7e05c;
	border-radius: 6px;
	display: inline-block;
	height: 34px;
	line-height: 36px;
	padding-left: 6px;
}

.dvdmenu footer .key:last-child {
	text-align: right;
}

.dvdon .picture {
	animation: 3000ms linear 0ms normal forwards 1 running on;
}
.dvdoff .picture {
	animation: 750ms
		cubic-bezier(0.230, 1.000, 0.320, 1.000)
		0ms
		normal
		forwards
		1
		running
		off;
}

.dvdtext {
    color: lime;
    opacity: 0;
    filter: blur(0.5px);
    font-family: Sys;
    left: -20px;
    position: absolute;
    text-shadow: 0 0 3px lime;
    top: 10%;
    width: 200px;
    pointer-events:none;
}

.dvdon .text,
.dvdon .menu {
	opacity: 1;
	transition: opacity 10ms ease 2000ms;
}

@keyframes on {
	0% {
		transform: scale(1, 1) translate3d(0, 0, 0);
		filter: brightness(2);
		opacity: 0.6;
	}

	100% {
		transform: scale(1, 1) translate3d(0, 0, 0);
		filter: contrast(1) brightness(1.2) saturate(1.3);
		opacity: 1;
	}
}

/*@keyframes on {
	0% {
		transform: scale(1, 0.8) translate3d(0, 0, 0);
		filter: brightness(4);
		opacity: 1;
	}
	3.5% {
		transform: scale(1, 0.8) translate3d(0, 100%, 0);
	}

	3.6% {
		transform: scale(1, 0.8) translate3d(0, -100%, 0);
		opacity: 1;
	}

	9% {
		transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
		filter: brightness(4);
		opacity: 0;
	}

	11% {
		transform: scale(1, 1) translate3d(0, 0, 0);
		filter: contrast(0) brightness(0);
		opacity: 0;
	}

	100% {
		transform: scale(1, 1) translate3d(0, 0, 0);
		filter: contrast(1) brightness(1.2) saturate(1.3);
		opacity: 1;
	}
}*/

@keyframes off {
	0% {
		transform: scale(1, 1);
		filter: brightness(1);
	}
	40% {
		transform: scale(1, 0.005);
		filter: brightness(100);
	}
	70% {
		transform: scale(1, 0.005);
	}
	90% {
		transform: scale(0.005, 0.005);
	}
	100% {
		transform: scale(0, 0);
	}
}

.dvdtext span {
	filter: blur(1px);
	position: absolute;
    font-size:35px;
}
.dvdtext span:nth-child(1) {
	color: red;
	margin-left: -2px;
	filter: blur(2px);
}
.dvdtext span:nth-child(2) {
	color: lime;
	margin-left: 2px;
	filter: blur(2px);
}
.dvdtext span:nth-child(3) {
	color: blue;
	position: 20px 0;
	filter: blur(1px);
}
.dvdtext span:nth-child(4) {
	color: #fff;
	filter: blur(1px);
	text-shadow: 0 0 50px rgba(255, 255, 255, 0.4);
}
.dvdtext span:nth-child(5) {
	color: rgba(255, 255, 255, 0.1);
	filter: blur(15px);
}

.dvdtext span {
	animation: blur 30ms infinite, jerk 50ms infinite;
}

@keyframes blur {
	0% {
		filter: blur(1px);
		opacity: 0.8;
	}
	50% {
		filter: blur(1px);
		opacity: 1;
	}
	100% {
		filter: blur(1px);
		opacity: 0.8;
	}
}

@keyframes jerk {
	50% {
		transform: translateX(1px);
	}
	51% {
		transform: translateX(0);
	}
}

@keyframes jerkup {
	0% {
		transform: translateY(0px);
	}
	100% {
		transform: translateY(0);
	}
}

.dvdtext span:nth-child(2) {
	animation: glitch2 1s infinite;
}

.dvdtext span:nth-child(3) {
	animation: glitch1 1s infinite;
}

@keyframes glitch1 {
	0%, 30% {
		transform: translateX(0);
	}
	31%, 32% {
		transform: translateX(0px);
	}
	98% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(0px);
	}
}

@keyframes glitch2 {
	0%, 30% {
		transform: translateX(0);
	}
	31%, 32% {
		transform: translateX(0px);
	}
	98% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(0px);
	}
}

.overlay .dvdtext {
	animation: 5s ease 2000ms normal none infinite running glitch;
}

@keyframes glitch {
	0%, 100% {
		opacity: 1;
	}
}

/* Zap Zap - Rick Roll */

#zapzap {
	display: block;
	z-index: 10;
	position: absolute;
	margin-top: 71px;
	margin-left: -14px;
	width: 609px;
	height: 481px;
	opacity: 0;
}

.outlet {
    user-select: none;
    position: absolute;
    cursor: pointer;
    z-index: 99;
    width: 82px;
    height: 30px;
    top: 659px;
    left: 1134px;
    opacity:0;
}

.outlet.shake-hard {
  animation: outlet-shake 0.1s linear infinite;
}

#video-container.shake-hard {
  animation: outlet-shake 0.1s linear infinite;
}

.outlet:active {
  cursor: grab;
}

.receptacle {
  position:absolute;
  margin: 12px auto;
  width: 0px;
  height: 0px;
  background: linear-gradient(-35deg, #f0f1f3 20%, #dcdde0 40%, white 80%);
  border-radius: 20px;
  border: 2px solid #b3b4b8;
  box-shadow: 
    inset 0 0 12px 6px rgba(0, 0, 0, 0.06),
    0 0 6px 1px rgba(0, 0, 0, 0.1);
}

.contact-opening {
	position: absolute;
}

.contact-opening:not(:last-child):before {
  content: "";
  position: absolute;
  width: 60px;
  height: 30px;
}

.contact-opening:nth-child(2) {
  right: 22px;
  border-radius: 2px 10px 10px 2px;
}

.contact-opening:last-child {
    width: 89px;
    height: 34px;
    top: -14px;
    left: -47px;
}

.contact-opening:last-child:before {
  content: "";
  position: absolute;
}

.shake-hard .contact-opening:before {
  cursor: none;
  animation: light-up 0.2s linear infinite;
}

.screw {
  position: relative;
  margin: 0 auto;
  width: 32px;
  height: 32px;
  background: linear-gradient(-45deg, #d8d9db 30%, white 70%);
  border: 1px solid #b3b4b8;
  border-radius: 100%;
  transform: rotate(45deg);
}

.screw:after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
  width: 6px;
  height: 100%;
  background-color: #4a4b50;
}

.jolt {
  position: fixed;
  cursor: none;
  user-select: none;
  overflow: visible;
  margin-top: -15px;
  margin-left: -15px;
  width: 30px;
  height: 30px;
  opacity: 0;
  pointer-events: none;
  z-index: 100;
}

.jolt:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  font-size: 24px;
  color: #00c8ff;
  text-align: center;
  line-height: 30px;
}

.jolt.shake-hard {
  opacity: 1;
  animation: cursor-shock 0.1s linear infinite;
}

@media (hover: none) {
  .jolt.shake-hard {
    opacity: 0;
  }
}

.shake-hard {
  cursor: none;
}

@keyframes outlet-shake {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-4px, -4px); }
  20% { transform: translate(4px, 4px); }
  30% { transform: translate(-4px, 4px); }
  40% { transform: translate(4px, -4px); }
  50% { transform: translate(-3px, -3px); }
  60% { transform: translate(3px, 3px); }
  70% { transform: translate(-4px, 4px); }
  80% { transform: translate(4px, -4px); }
  90% { transform: translate(-2px, 0px); }
  100% { transform: translate(0, 0); }
}

@keyframes cursor-shock {
  0% { transform: translate(0, 0) rotate(0deg); }
  10% { transform: translate(-2px, -2px) rotate(-5deg); }
  20% { transform: translate(2px, 2px) rotate(5deg); }
  30% { transform: translate(-2px, 2px) rotate(-5deg); }
  40% { transform: translate(2px, -2px) rotate(5deg); }
  50% { transform: translate(-1px, -1px) rotate(-3deg); }
  60% { transform: translate(1px, 1px) rotate(3deg); }
  70% { transform: translate(-2px, 2px) rotate(-5deg); }
  80% { transform: translate(2px, -2px) rotate(5deg); }
  90% { transform: translate(-1px, 0px) rotate(-2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes light-up {
  50% { background-color: white; }
}

#zap-button {
    display:none;
    position: absolute;
    width: 93px;
    height: 30px;
    cursor: pointer;
    z-index: 100;
    top: 658px;
    margin-left: 428px;
    opacity: 0;
}

#astley-button {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: transparent;
  border: 2px solid #ff1493;
  border-radius: 4px;
  cursor: pointer;
  z-index: 100;
  top: 20px;
  right: 80px;
}

#astley-player {
    z-index: 11;
    position: absolute;
    display: none;
    margin-left: -14px;
    width: 649px;
    height: 486px;
    top:109px;
}

#astley-video-overlay {
    width: 649px;
    height: 486px;
  overflow: hidden;
}

#astley-video {
  width: 649px;
  height: 494px;
  display: block;
  object-fit: fill;
}

.rickroll-container {
    width: 168px !important;
    height: 30px !important;
    margin-left: 195px !important;
    margin-top: 619px !important;
    z-index: 1 !important;
    font-size:19px !important;
    overflow: hidden;
    position: absolute;
    border: 1px solid black;
    color: #1f318a;
    background-color: black;
    border-radius: 3px 0 3px 0;
    display: none;
    align-items: center;
    justify-content: flex-start;
}

.rickroll-text {
    font-family: 'LCDLight2';
    font-weight: 300;
    font-style: normal;
    position: absolute;
    white-space: nowrap;
    padding-left: 6px;
    padding-top: 1px;
    width:max-content !important;
    pointer-events: none;
}

.musikguide-text-rickroll {
    display: none;
    font-family: 'ArialRounded-MG', sans-serif;
    font-size: 34px;
    position: absolute;
    color: #e690de;
    top: 16px;
    left: 122px;
}

