.screen-body {
    background: #2A4347 none repeat scroll 0 0;
    margin: 0;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
}

.screen-body-dos{
    background-color: #02018c;
}

.screen-body-prod{
    background-color: #fed000;
}

.screen::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;
}
.screen-lines .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;
}
.crt-contact .overlay::after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/crt.png');
    background-repeat: no-repeat;
    background-size: 101% 101%;
    background-position: center;
    content: "";
}
.screen-lines .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;
    opacity: 0.5;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}
.beam {
    height: 100vh;
    overflow: hidden;
    width: 100vw;
    z-index: -1;
    transform: scale(0, 0);
    background: #2A4347;
    /* background: transparent linear-gradient(to bottom, #85908c 0%, #323431 100%) repeat scroll 0 0; */
}

.dos-beam{
    background-color: #909090;;
}
.prod-beam{
    background-color: black;
}

.contact-border-holder, .prod-wrapper-main, .dos-wrapper-main, .dos-middle-show-page, .dos-shows-list-holder, .dos-shows-image-holder, .dos-shows-desc-holder {
    opacity: 0;
}
.contact-border-holder, .dos-wrapper, .prod-wrapper {
    pointer-events: all;
    animation: jerkup 100ms infinite;
}

.on .contact-border-holder{
    transition: opacity 1500ms ease-out 1000ms;
    opacity: 1;
}
.on .prod-wrapper-main{
    transition: opacity 1500ms ease-out 1000ms;
    opacity: 1;
}
.on .dos-wrapper-main{
    transition: opacity 0ms linear 850ms;
    opacity: 1;
}
.on .dos-middle-show-page{
    transition: opacity 250ms linear 0ms;
    opacity: 1;
}
.on .dos-shows-list-holder{
    transition: opacity 50ms linear 1250ms;
    opacity: 1;
}
.on .dos-shows-image-holder{
    transition: opacity 50ms linear 1500ms;
    opacity: 1;
}
.on .dos-shows-desc-holder{
    transition: opacity 50ms linear 1750ms;
    opacity: 1;
}
.on .beam {
    animation: 750ms linear 0ms normal forwards 1 running on;
}
.off .beam {
    animation: 750ms cubic-bezier(0.23, 1, 0.32, 1) 0ms normal forwards 1 running off;
}

@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);
   }
}
@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(0.25px);
   }
    100% {
        transform: translateY(0);
   }
}
.text span:nth-child(2) {
    animation: jerkup 1s infinite;
}
.text span:nth-child(3) {
    animation: glitch1 1s infinite;
}
@keyframes glitch1 {
    0% {
        transform: translateX(0);
   }
    30% {
        transform: translateX(0);
   }
    31% {
        transform: translateX(10px);
   }
    32% {
        transform: translateX(0);
   }
    98% {
        transform: translateX(0);
   }
    100% {
        transform: translateX(10px);
   }
}
.text span:nth-child(2) {
    animation: glitch2 1s infinite;
}
@keyframes glitch2 {
    0% {
        transform: translateX(0);
   }
    30% {
        transform: translateX(0);
   }
    31% {
        transform: translateX(-10px);
   }
    32% {
        transform: translateX(0);
   }
    98% {
        transform: translateX(0);
   }
    100% {
        transform: translateX(-10px);
   }
}
.overlay .text {
    animation: 5s ease 2000ms normal none infinite running glitch;
}
/* @keyframes glitch {
    40% {
        opacity: 1;
        transform: scale(1, 1);
        transform: skew(0, 0);
   }
    41% {
        opacity: 0.8;
        transform: scale(1, 1.2);
        transform: skew(80deg, 0);
   }
    42% {
        opacity: 0.8;
        transform: scale(1, 1.2);
        transform: skew(-50deg, 0);
   }
    43% {
        opacity: 1;
        transform: scale(1, 1);
        transform: skew(0, 0);
   }
} */

@media(max-width: 800px) {
.crt-contact .overlay::after{
    background-image: none;
}

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