#switch01,
#switch02,
#switch03 {
    display: none;
}

.switch-label {
    display: inline-block;
    cursor: pointer;
    background: #fff;
    color: #111;
    padding: 10px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 5px;
    margin-top: 10px;
    box-shadow: 0 2px #666;
    position: absolute; 
    top: 0px; 
    right: 0px;
}

    .switch-label::after {
        content: "on";
    }

    .switch-label::before {
        content: " ";
        display: inline-block;
        border-radius: 100%;
        width: 10px;
        height: 10px;
        background: #003321;
        margin-right: 10px;
        border: 1px solid #111;
    }

    .switch-label:active {
        box-shadow: none;
        -moz-transform: translate3d(0, 2px, 0);
        -ms-transform: translate3d(0, 2px, 0);
        -o-transform: translate3d(0, 2px, 0);
        -webkit-transform: translate3d(0, 2px, 0);
        transform: translate3d(0, 2px, 0);
    }

#switch01:checked + .switch-label::before,
#switch02:checked + .switch-label::before,
#switch03:checked + .switch-label::before {
    background: #22ff55;
}

#switch01:checked + .switch-label::after,
#switch02:checked + .switch-label::after,
#switch03:checked + .switch-label::after {
    content: "off";
}

@-webkit-keyframes flicker {
    0% {
        opacity: 0.03858;
    }

    5% {
        opacity: 0.10628;
    }

    10% {
        opacity: 0.08656;
    }

    15% {
        opacity: 0.7087;
    }

    20% {
        opacity: 0.43873;
    }

    25% {
        opacity: 0.96649;
    }

    30% {
        opacity: 0.6704;
    }

    35% {
        opacity: 0.30393;
    }

    40% {
        opacity: 0.36485;
    }

    45% {
        opacity: 0.85645;
    }

    50% {
        opacity: 0.12155;
    }

    55% {
        opacity: 0.01698;
    }

    60% {
        opacity: 0.31682;
    }

    65% {
        opacity: 0.4085;
    }

    70% {
        opacity: 0.91742;
    }

    75% {
        opacity: 0.66012;
    }

    80% {
        opacity: 0.26094;
    }

    85% {
        opacity: 0.49812;
    }

    90% {
        opacity: 0.24372;
    }

    95% {
        opacity: 0.70141;
    }

    100% {
        opacity: 0.64947;
    }
}

@-moz-keyframes flicker {
    0% {
        opacity: 0.03858;
    }

    5% {
        opacity: 0.10628;
    }

    10% {
        opacity: 0.08656;
    }

    15% {
        opacity: 0.7087;
    }

    20% {
        opacity: 0.43873;
    }

    25% {
        opacity: 0.96649;
    }

    30% {
        opacity: 0.6704;
    }

    35% {
        opacity: 0.30393;
    }

    40% {
        opacity: 0.36485;
    }

    45% {
        opacity: 0.85645;
    }

    50% {
        opacity: 0.12155;
    }

    55% {
        opacity: 0.01698;
    }

    60% {
        opacity: 0.31682;
    }

    65% {
        opacity: 0.4085;
    }

    70% {
        opacity: 0.91742;
    }

    75% {
        opacity: 0.66012;
    }

    80% {
        opacity: 0.26094;
    }

    85% {
        opacity: 0.49812;
    }

    90% {
        opacity: 0.24372;
    }

    95% {
        opacity: 0.70141;
    }

    100% {
        opacity: 0.64947;
    }
}

@keyframes flicker {
    0% {
        opacity: 0.03858;
    }

    5% {
        opacity: 0.10628;
    }

    10% {
        opacity: 0.08656;
    }

    15% {
        opacity: 0.7087;
    }

    20% {
        opacity: 0.43873;
    }

    25% {
        opacity: 0.96649;
    }

    30% {
        opacity: 0.6704;
    }

    35% {
        opacity: 0.30393;
    }

    40% {
        opacity: 0.36485;
    }

    45% {
        opacity: 0.85645;
    }

    50% {
        opacity: 0.12155;
    }

    55% {
        opacity: 0.01698;
    }

    60% {
        opacity: 0.31682;
    }

    65% {
        opacity: 0.4085;
    }

    70% {
        opacity: 0.91742;
    }

    75% {
        opacity: 0.66012;
    }

    80% {
        opacity: 0.26094;
    }

    85% {
        opacity: 0.49812;
    }

    90% {
        opacity: 0.24372;
    }

    95% {
        opacity: 0.70141;
    }

    100% {
        opacity: 0.64947;
    }
}

.monitor {
    background: #121010;
    /*width: 800px;
  height: 600px;*/
    margin-top: 10px;
    position: relative;
    overflow: hidden;
    /*border: 2px solid #666;*/
}

    .monitor::after {
        content: " ";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: rgba(18, 16, 16, 0.1);
        opacity: 0;
        z-index: 2;
        pointer-events: none;
    }

    .monitor::before {
        content: " ";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        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;
    }

#switch01:checked ~ .monitor::after,
#switch02:checked ~ .monitor::after,
#switch03:checked ~ .monitor::after {
    -moz-animation: flicker 0.15s infinite;
    -o-animation: flicker 0.15s infinite;
    -webkit-animation: flicker 0.15s infinite;
    animation: flicker 0.15s infinite;
}

@-webkit-keyframes turn-on {
    0% {
        -moz-transform: scale(1, 0.8) translate3d(0, 0, 0);
        -ms-transform: scale(1, 0.8) translate3d(0, 0, 0);
        -o-transform: scale(1, 0.8) translate3d(0, 0, 0);
        -webkit-transform: scale(1, 0.8) translate3d(0, 0, 0);
        transform: scale(1, 0.8) translate3d(0, 0, 0);
        -webkit-filter: brightness(30);
        filter: brightness(30);
        opacity: 1;
    }

    3.5% {
        -moz-transform: scale(1, 0.8) translate3d(0, 100%, 0);
        -ms-transform: scale(1, 0.8) translate3d(0, 100%, 0);
        -o-transform: scale(1, 0.8) translate3d(0, 100%, 0);
        -webkit-transform: scale(1, 0.8) translate3d(0, 100%, 0);
        transform: scale(1, 0.8) translate3d(0, 100%, 0);
    }

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

    9% {
        -moz-transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
        -ms-transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
        -o-transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
        -webkit-transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
        transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
        -webkit-filter: brightness(30);
        filter: brightness(30);
        opacity: 0;
    }

    11% {
        -moz-transform: scale(1, 1) translate3d(0, 0, 0);
        -ms-transform: scale(1, 1) translate3d(0, 0, 0);
        -o-transform: scale(1, 1) translate3d(0, 0, 0);
        -webkit-transform: scale(1, 1) translate3d(0, 0, 0);
        transform: scale(1, 1) translate3d(0, 0, 0);
        -webkit-filter: contrast(0) brightness(0);
        filter: contrast(0) brightness(0);
        opacity: 0;
    }

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

@-moz-keyframes turn-on {
    0% {
        -moz-transform: scale(1, 0.8) translate3d(0, 0, 0);
        -ms-transform: scale(1, 0.8) translate3d(0, 0, 0);
        -o-transform: scale(1, 0.8) translate3d(0, 0, 0);
        -webkit-transform: scale(1, 0.8) translate3d(0, 0, 0);
        transform: scale(1, 0.8) translate3d(0, 0, 0);
        -webkit-filter: brightness(30);
        filter: brightness(30);
        opacity: 1;
    }

    3.5% {
        -moz-transform: scale(1, 0.8) translate3d(0, 100%, 0);
        -ms-transform: scale(1, 0.8) translate3d(0, 100%, 0);
        -o-transform: scale(1, 0.8) translate3d(0, 100%, 0);
        -webkit-transform: scale(1, 0.8) translate3d(0, 100%, 0);
        transform: scale(1, 0.8) translate3d(0, 100%, 0);
    }

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

    9% {
        -moz-transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
        -ms-transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
        -o-transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
        -webkit-transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
        transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
        -webkit-filter: brightness(30);
        filter: brightness(30);
        opacity: 0;
    }

    11% {
        -moz-transform: scale(1, 1) translate3d(0, 0, 0);
        -ms-transform: scale(1, 1) translate3d(0, 0, 0);
        -o-transform: scale(1, 1) translate3d(0, 0, 0);
        -webkit-transform: scale(1, 1) translate3d(0, 0, 0);
        transform: scale(1, 1) translate3d(0, 0, 0);
        -webkit-filter: contrast(0) brightness(0);
        filter: contrast(0) brightness(0);
        opacity: 0;
    }

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

@keyframes turn-on {
    0% {
        -moz-transform: scale(1, 0.8) translate3d(0, 0, 0);
        -ms-transform: scale(1, 0.8) translate3d(0, 0, 0);
        -o-transform: scale(1, 0.8) translate3d(0, 0, 0);
        -webkit-transform: scale(1, 0.8) translate3d(0, 0, 0);
        transform: scale(1, 0.8) translate3d(0, 0, 0);
        -webkit-filter: brightness(30);
        filter: brightness(30);
        opacity: 1;
    }

    3.5% {
        -moz-transform: scale(1, 0.8) translate3d(0, 100%, 0);
        -ms-transform: scale(1, 0.8) translate3d(0, 100%, 0);
        -o-transform: scale(1, 0.8) translate3d(0, 100%, 0);
        -webkit-transform: scale(1, 0.8) translate3d(0, 100%, 0);
        transform: scale(1, 0.8) translate3d(0, 100%, 0);
    }

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

    9% {
        -moz-transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
        -ms-transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
        -o-transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
        -webkit-transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
        transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
        -webkit-filter: brightness(30);
        filter: brightness(30);
        opacity: 0;
    }

    11% {
        -moz-transform: scale(1, 1) translate3d(0, 0, 0);
        -ms-transform: scale(1, 1) translate3d(0, 0, 0);
        -o-transform: scale(1, 1) translate3d(0, 0, 0);
        -webkit-transform: scale(1, 1) translate3d(0, 0, 0);
        transform: scale(1, 1) translate3d(0, 0, 0);
        -webkit-filter: contrast(0) brightness(0);
        filter: contrast(0) brightness(0);
        opacity: 0;
    }

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

@-webkit-keyframes turn-off {
    0% {
        -moz-transform: scale(1, 1.3) translate3d(0, 0, 0);
        -ms-transform: scale(1, 1.3) translate3d(0, 0, 0);
        -o-transform: scale(1, 1.3) translate3d(0, 0, 0);
        -webkit-transform: scale(1, 1.3) translate3d(0, 0, 0);
        transform: scale(1, 1.3) translate3d(0, 0, 0);
        -webkit-filter: brightness(1);
        filter: brightness(1);
        opacity: 1;
    }

    60% {
        -moz-transform: scale(1.3, 0.001) translate3d(0, 0, 0);
        -ms-transform: scale(1.3, 0.001) translate3d(0, 0, 0);
        -o-transform: scale(1.3, 0.001) translate3d(0, 0, 0);
        -webkit-transform: scale(1.3, 0.001) translate3d(0, 0, 0);
        transform: scale(1.3, 0.001) translate3d(0, 0, 0);
        -webkit-filter: brightness(10);
        filter: brightness(10);
    }

    100% {
        -moz-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -o-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -moz-transform: scale(0, 0.0001) translate3d(0, 0, 0);
        -ms-transform: scale(0, 0.0001) translate3d(0, 0, 0);
        -o-transform: scale(0, 0.0001) translate3d(0, 0, 0);
        -webkit-transform: scale(0, 0.0001) translate3d(0, 0, 0);
        transform: scale(0, 0.0001) translate3d(0, 0, 0);
        -webkit-filter: brightness(50);
        filter: brightness(50);
    }
}

@-moz-keyframes turn-off {
    0% {
        -moz-transform: scale(1, 1.3) translate3d(0, 0, 0);
        -ms-transform: scale(1, 1.3) translate3d(0, 0, 0);
        -o-transform: scale(1, 1.3) translate3d(0, 0, 0);
        -webkit-transform: scale(1, 1.3) translate3d(0, 0, 0);
        transform: scale(1, 1.3) translate3d(0, 0, 0);
        -webkit-filter: brightness(1);
        filter: brightness(1);
        opacity: 1;
    }

    60% {
        -moz-transform: scale(1.3, 0.001) translate3d(0, 0, 0);
        -ms-transform: scale(1.3, 0.001) translate3d(0, 0, 0);
        -o-transform: scale(1.3, 0.001) translate3d(0, 0, 0);
        -webkit-transform: scale(1.3, 0.001) translate3d(0, 0, 0);
        transform: scale(1.3, 0.001) translate3d(0, 0, 0);
        -webkit-filter: brightness(10);
        filter: brightness(10);
    }

    100% {
        -moz-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -o-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -moz-transform: scale(0, 0.0001) translate3d(0, 0, 0);
        -ms-transform: scale(0, 0.0001) translate3d(0, 0, 0);
        -o-transform: scale(0, 0.0001) translate3d(0, 0, 0);
        -webkit-transform: scale(0, 0.0001) translate3d(0, 0, 0);
        transform: scale(0, 0.0001) translate3d(0, 0, 0);
        -webkit-filter: brightness(50);
        filter: brightness(50);
    }
}

@keyframes turn-off {
    0% {
        -moz-transform: scale(1, 1.3) translate3d(0, 0, 0);
        -ms-transform: scale(1, 1.3) translate3d(0, 0, 0);
        -o-transform: scale(1, 1.3) translate3d(0, 0, 0);
        -webkit-transform: scale(1, 1.3) translate3d(0, 0, 0);
        transform: scale(1, 1.3) translate3d(0, 0, 0);
        -webkit-filter: brightness(1);
        filter: brightness(1);
        opacity: 1;
    }

    60% {
        -moz-transform: scale(1.3, 0.001) translate3d(0, 0, 0);
        -ms-transform: scale(1.3, 0.001) translate3d(0, 0, 0);
        -o-transform: scale(1.3, 0.001) translate3d(0, 0, 0);
        -webkit-transform: scale(1.3, 0.001) translate3d(0, 0, 0);
        transform: scale(1.3, 0.001) translate3d(0, 0, 0);
        -webkit-filter: brightness(10);
        filter: brightness(10);
    }

    100% {
        -moz-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -o-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -moz-transform: scale(0, 0.0001) translate3d(0, 0, 0);
        -ms-transform: scale(0, 0.0001) translate3d(0, 0, 0);
        -o-transform: scale(0, 0.0001) translate3d(0, 0, 0);
        -webkit-transform: scale(0, 0.0001) translate3d(0, 0, 0);
        transform: scale(0, 0.0001) translate3d(0, 0, 0);
        -webkit-filter: brightness(50);
        filter: brightness(50);
    }
}

.screen {
    width: 100%;
    height: 100%;
    border: none;
    color: #FFC200;
}

#switch01 ~ .monitor > .screen,
#switch02 ~ .monitor > .screen,
#switch03 ~ .monitor > .screen {
    -moz-animation: turn-off 0.55s cubic-bezier(0.23, 1, 0.32, 1);
    -o-animation: turn-off 0.55s cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-animation: turn-off 0.55s cubic-bezier(0.23, 1, 0.32, 1);
    animation: turn-off 0.55s cubic-bezier(0.23, 1, 0.32, 1);
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

#switch01:checked ~ .monitor > .screen,
#switch02:checked ~ .monitor > .screen,
#switch03:checked ~ .monitor > .screen {
    -moz-animation: turn-on 4s linear;
    -o-animation: turn-on 4s linear;
    -webkit-animation: turn-on 4s linear;
    animation: turn-on 4s linear;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-moz-keyframes overlay-anim {
    0% {
        visibility: hidden;
    }

    20% {
        visibility: hidden;
    }

    21% {
        visibility: visible;
    }

    100% {
        visibility: hidden;
    }
}

@-webkit-keyframes overlay-anim {
    0% {
        visibility: hidden;
    }

    20% {
        visibility: hidden;
    }

    21% {
        visibility: visible;
    }

    100% {
        visibility: hidden;
    }
}

@keyframes overlay-anim {
    0% {
        visibility: hidden;
    }

    20% {
        visibility: hidden;
    }

    21% {
        visibility: visible;
    }

    100% {
        visibility: hidden;
    }
}

.overlay {
    color: #00FF00;
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 60px;
    visibility: hidden;
    pointer-events: none;
}

/*#switch01:checked ~ .monitor .overlay,
#switch02:checked ~ .monitor .overlay,
#switch03:checked ~ .monitor .overlay {
    -moz-animation: overlay-anim 5s linear;
    -o-animation: overlay-anim 5s linear;
    -webkit-animation: overlay-anim 5s linear;
    animation: overlay-anim 5s linear;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}*/