.overlay:not(.section) {
    width:1920px;
    height:1080px;
    position:absolute;
    left:0px;
    top:0px;
    overflow:hidden;
}

.overlay * {
    box-sizing:border-box;
}


.broadcast {
    position:absolute;
    top:0px;
    width:100%;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    color:rgb(255 255 255 / 30%);
}

.wrapper.expired .overlay,
.wrapper.pre_access .overlay {
    filter:grayscale(1);
}

.expired_reds,
.pre_access_reds {
    z-index:-1;
}

.wrapper.expired .expired_reds,
.wrapper.pre_access .pre_access_reds {
    z-index:100;
}

.overlay_expired,
.overlay_pre_access {
    position:absolute;
    width:1%;
    height:1%;
    top:50%;
    display:flex;
    color:red;
    align-items:center;
    justify-content:center;
    transform:rotate(-45deg);
    color:rgb(255 0 0 / 0.3);
    font-size:32px;
}

.overlay_expired span,
.overlay_pre_access span {
    margin-left:150px;
}

.overlay_expired.oe1,
.overlay_pre_access.oe1 {
    left:0%;
}

.overlay_expired.oe2,
.overlay_pre_access.oe2 {
    left:25%;
}

.overlay_expired.oe3,
.overlay_pre_access.oe3 {
    left:50%;
}

.overlay_expired.oe4,
.overlay_pre_access.oe4 {
    left:75%;
}

.overlay_expired.oe5,
.overlay_pre_access.oe5 {
    left:100%;
}

.expired_reds,
.pre_access_reds {
    position:absolute;
    top:0px;
    left:0px;
    width:1920px;
    height:1080px;
    overflow:hidden;
}

.expired_reds .overlay_expired,
.pre_access_reds .overlay_pre_access {
    margin-top:40px;
    margin-left:-160px;
    text-shadow:40px 40px 5px rgb(50 50 50 / 70%);
}

.unauthorized {
    font-size: 28px;
    padding: 8px;
    background-color: rgba(0, 0, 0, 0.72);
    position: absolute;
    height: 70px;
    line-height: 52px;
    width: 100%;
}





/* hidden debug buttons */

.scale_to_fit,
.scrollable {
    position:absolute;
    z-index:2;
    top:5px;
    left:5px;
    width:120px;
    background-color:rgba(80,80,80,0.8);
    border:1px solid rgba(180,180,180,0.6);
    opacity:0;
    transition-duration:0.3s;
}

.scrollable {
    top:35px;
}

.scale_to_fit:hover,
.scrollable:hover {
    opacity:1;
    cursor:pointer;
}

#twitcher.element {
    position:absolute;
    top:84px;
    left:0px;
    z-index:20;
}




/* element - main background */

.main_bg {
    position:absolute;
    width:1920px;
    height:1080px;
    top:0px;
    left:0px;
}

.bg_itself {
    width:100%;
    height:100%;
    background-size:cover;
    background-image:url("../images/bright_horizon.jpg");
}

.unary .main_bg {
    clip-path: polygon(
        0px 0px, 1920px 0px, 1920px 1080px, 0px 1080px, /* outer edges */
        0px 1044px, 1284px 1044px, 1284px 80px,
        0px 80px
    );
}

.binary .main_bg {
    clip-path: polygon(
        0px 0px, 1920px 0px, 1920px 1080px, 0px 1080px, /* outer edges */
        0px 800px, 1920px 800px, 1920px 80px, 0px 80px /* box around dual screens */
    );
}

.cutouts.unary .main_bg { /* move v2 to wrapper */
    clip-path: polygon(
        0px 0px, /* top left */
        
        1311px 0px,/* depart top edge */
        1311px 290px, 1312px 294px, 1315px 298px, 1320px 300px, /* nhe kills */
        1577px 300px, 1581px 298px, 1584px 294px, 1585px 289px, /* nhe kills */
        1585px 165px, 1583px 160px, 1580px 157px, 1577px 156px, /* nhe kills */
        1320px 156px, 1315px 158px, 1313px 160px, 1311px 166px, /* nhe kills */
        1311px 0px,/* rejoin top edge */
        
        1920px 0px, 1920px 1080px, /* top right, bottom right, bottom left */
        0px 1044px, 1284px 1044px, 1284px 80px, 
        1138px 80px, 1138px 58px, 1136px 52px, 1130px 47px, 1124px 45px, 796px 45px, 790px 47px, 784px 52px, 782px 58px, 782px 80px, /* host-join cutout */
        0px 80px
    );
}

.cutouts.binary .main_bg {
    clip-path: polygon(
        0px 0px, 1920px 0px, 1920px 1080px, /* top left, top right, bottom right */
        630px 1080px, /* depart bottom edge */
        
        630px 879px, 628px 875px, 625px 873px, 621px 872px, /* nhe kills - top right corner */
        443px 872px, 439px 873px, 435px 876px, 434px 880px, /* nhe kills - top left corner */
        434px 967px, 436px 971px, 439px 973px, 442px 974px, /* nhe kills - bottom left corner */
        622px 974px, 625px 973px, 628px 971px, 630px 967px, /* nhe kills - bottom right corner */
        
        630px 1080px, /* rejoin bottom edge */
        0px 1080px, /* bottom left corner */
        0px 800px, 1920px 800px, 1920px 80px, 
        1138px 80px, 1138px 58px, 1136px 52px, 1130px 47px, 1124px 45px, 796px 45px, 790px 47px, 784px 52px, 782px 58px, 782px 80px, /* host-join cutout */
        0px 80px /* rejoin left edge */
    );
}

.cutouts.onoff.binary .main_bg {
    clip-path: polygon(
        0px 0px, 1920px 0px, 1920px 1080px, /* top left, top right, bottom right corners */
        0px 1080px, /* bottom left corner */
        0px 800px, 1920px 800px, 1920px 80px, 
        1138px 80px, 1138px 58px, 1136px 52px, 1130px 47px, 1124px 45px, 796px 45px, 790px 47px, 784px 52px, 782px 58px, 782px 80px, /* host-join cutout */
        0px 80px /* rejoin left edge */
    );
}

.cutouts.onoff.unary .main_bg {
    clip-path: polygon(
        0px 0px, /* top left */
        1920px 0px, 1920px 1080px, 0px 1080px, /* top right, bottom right, bottom left */
        0px 1044px, 1284px 1044px, 1284px 80px, 
        1138px 80px, 1138px 58px, 1136px 52px, 1130px 47px, 1124px 45px, 796px 45px, 790px 47px, 784px 52px, 782px 58px, 782px 80px, /* host-join cutout */
        0px 80px
    );
}

.box2 .main_bg .bg_itself {
    background-image:url("../images/night_planet.jpg");
}





/* element - lan title */


.lan_title {
    font-size:56px;
    background-color:transparent;
    font-family:HandelGothic;
    display:flex;
    align-items:center;
    justify-content:center;
    height:80px;
    line-height:82px;
    width: 1288px;
    width: 780px;
}

.unary .lan_title {
    position: absolute;
    top: 0px;
    left: 0px;
}

.binary .lan_title {
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 56px;
    background-color: transparent;
    font-family: HandelGothic;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    line-height: 82px;
    width: 810px;
}

.lan_title .words {
    text-shadow:0px 0px 6px black, 0px 0px 6px black;
}




/* element - nhe kills */

.nhe_kills {
    display:none;
    position:absolute;
}

.cutouts.nhe .nhe_kills {
    display:block;
}

.cutouts.nhe.brb .nhe_kills {
    display:none;
}

.cutouts.nhe.unary .nhe_kills {
    top: 154px;
    left: 1310px;
    width: 276px;
    height: 148px;
}

.cutouts.nhe.binary .nhe_kills {
    left: 432px;
    top: 870px;
    width: 200px;
    height: 106px;
}

.nhe_kills .border {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border: 3px solid red; /* inspector testing */
    border: 3px solid #3a3a3a;
    border-radius: 12px;
    z-index: 5;
}

.nhe_kills .shadow {
    position: absolute;
    top: 2px;
    right: 2px;
    bottom: 2px;
    left: 2px;
    box-shadow: inset 6px 0px 0px #c900ff, inset -6px 9px 0px #00b7ff, inset -3px -6px 0px #00ff2b, inset -5px 0px 0px #f7ff00; /* inspector testing (colorful inner shadows) */
    box-shadow: inset 7px 0px 0px #000000, inset -6px 9px 0px #000000, inset -3px -6px 0px #000000, inset -5px 0px 0px #000000;
    z-index: 4;
    border-radius: 8px;
}

.nhe_kills table.headers {
    /*display: none; */ /* inspector testing */
    background-color: transparent;
    filter: blur(0.6px);
    position: absolute;
    top: 6px;
    left: 6px;
    width: 265px;
    padding: 0;
    letter-spacing: 1px;
    background-color: #000000;
    color: #dadada;
    font-weight: bold;
    font-family: Interstate;
    text-align: left;
    font-size: 21px;
    z-index: -1;
}

.nhe_kills table td:nth-child(3) {
    text-align: right;
}

.nhe_kills .test {
    position: absolute;
    z-index: -2;
    background-image: url(../images/nhe_player_scores_tied_single.jpg);
    background-position: center;
    background-repeat: no-repeat;
    opacity:0.6;
    display:none;
}

.unary .nhe_kills .test {
    top: 10px;
    left: 9px;
    width: 260px;
    height: 130px;
}

.unary .nhe_kills .headers .place {
    width:77px;
}

.binary .nhe_kills .headers .place {
    width:54px;
}

.binary .nhe_kills .test {
    top: 8px;
    left: 9px;
    width: 182px;
    height: 91px;
    background-image: url(../images/nhe_player_scores_tied_dual.jpg);
}

.binary .nhe_kills .shadow {
    box-shadow: inset 7px 0px 0px red, inset -6px 9px 0px green, inset -3px -6px 0px yellow, inset -5px 0px 0px purple;
    box-shadow: inset 7px 0px 0px #000000, inset -7px 6px 0px #000000, inset -3px -6px 0px #000000, inset -5px 0px 0px #000000;
}

.nhe_test .nhe_kills .test {
    display:block;
}

.binary .nhe_kills table.headers {
    top: 3px;
    top: 4px;
    left: 6px;
    width: 188px;
    font-size: 15px;
    font-size: 15.5px;
    /* font-size: 16px; */
    letter-spacing: 0px;
    /* opacity: 0; */
    /* opacity: 0.5; */
}

/*.nhe_kills_test table .red {*/
/*    color: rgb(var(--box1));*/
/*    color: #f5919a;*/
/*}*/

/*.nhe_kills_test table .blue {*/
/*    color: rgb(var(--box2));*/
/*    color: #8382f1;*/
/*}*/


/* element - logos */

.binary .logo.left {
    position: absolute;
    left: 424px;
    top: 800px;
    width: 216px;
    height: 244px;
}

.binary .logo.right {
    position: absolute;
    left: 1280px;
    top: 800px;
    width: 216px;
    height: 244px;
}

.binary .logo.right img {
    width:84%;
}

.unary .logo {
    position: absolute;
    top: 154px;
    width: 276px;
    height: 148px;
    /*height:255px;*/
    background-color: rgba(0,0,0,0.6);
    padding: 40px;
    border-radius:12px;
}

.wrapper.cutouts .logo.left {
    display: none;
}

.wrapper.cutouts.onoff .logo.left,
.wrapper.cutouts.brb .logo.left {
    display:block;
}

.unary .logo.right {
    right: 26px;
    width:280px;
}

.unary .logo.left {
    left: 1310px;
    /*background-image:url("../images/logo.nhe.png");*/
}

.logo.left div, .logo.right div {
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
    background-repeat: no-repeat;
    background-position: center;
}

.wrapper .overlay.dual .logo div {
    background-size:96%;
}

.logo .nhe {
    background-image:url("../images/logo.nhe.png");
}

.logo .streamez {
    background-image:url("../images/logo.streamez.png");
}

.logo .halofinder {
    background-image:url("../images/HaloFinderLogo.png");
}

.logo .halo1hub {
    background-image:url("../images/logo.halo1hub.png");
}

.logo .pro {
    background-image:url("../images/logo.halo1pro.2.png");
}

.qr_gen {
    display: flex;
    justify-content: center;
    align-items: center;
}

:root {
    --cycle_time: 30;
}

/* two items */
.cycle div.rotate:first-child:nth-last-child(2) {
    animation:first_of_2 infinite calc(var(--cycle_time) * 2s) normal;
}
.cycle div.rotate:first-child:nth-last-child(2) ~ div.rotate:nth-child(2) {
    animation:second_of_2 infinite calc(var(--cycle_time) * 2s) normal;
}

/* three items */
.cycle div.rotate:first-child:nth-last-child(3) {
    animation:first_of_3 infinite calc(var(--cycle_time) * 3s) normal;
}
.cycle div.rotate:first-child:nth-last-child(3) ~ div.rotate:nth-child(2) {
    animation:second_of_3 infinite calc(var(--cycle_time) * 3s) normal;
}
.cycle div.rotate:first-child:nth-last-child(3) ~ div.rotate:nth-child(3) {
    animation:third_of_3 infinite calc(var(--cycle_time) * 3s) normal;
}

/* four items */
.cycle div.rotate:first-child:nth-last-child(4) {
    animation:first_of_3 infinite calc(var(--cycle_time) * 4s) normal;
}
.cycle div.rotate:first-child:nth-last-child(4) ~ div.rotate:nth-child(2) {
    animation:second_of_3 infinite calc(var(--cycle_time) * 4s) normal;
}
.cycle div.rotate:first-child:nth-last-child(4) ~ div.rotate:nth-child(3) {
    animation:third_of_3 infinite calc(var(--cycle_time) * 4s) normal;
}
.cycle div.rotate:first-child:nth-last-child(4) ~ div.rotate:nth-child(4) {
    animation:third_of_3 infinite calc(var(--cycle_time) * 4s) normal;
}


@keyframes first_of_2 {
    0%   { opacity: 1.0; filter:blur(0.0px); }
    45%  { opacity: 1.0; filter:blur(0.0px); }
    50%  { opacity: 0.0; filter:blur(9.0px); }
    95%  { opacity: 0.0; filter:blur(9.0px); }
    100% { opacity: 1.0; filter:blur(0.0px); }
}
@keyframes second_of_2 {
    0%   { opacity: 0.0; filter:blur(0.0px); }
    45%  { opacity: 0.0; filter:blur(9.0px); }
    50%  { opacity: 1.0; filter:blur(0.0px); }
    95%  { opacity: 1.0; filter:blur(0.0px); }
    100% { opacity: 0.0; filter:blur(9.0px); }
}

@keyframes first_of_3 {
    0%     { opacity: 1.0; filter:blur(0.0px); }
    30%    { opacity: 1.0; filter:blur(0.0px); }
    33.33% { opacity: 0.0; filter:blur(9.0px); }
    63.67% { opacity: 0.0; filter:blur(9.0px); }
    66.67% { opacity: 0.0; filter:blur(0.0px); }
    96.67% { opacity: 0.0; filter:blur(0.0px); }
    100%   { opacity: 1.0; filter:blur(0.0px); }
}
@keyframes second_of_3 {
    0%      { opacity: 0.0; filter:blur(0.0px); }
    30%     { opacity: 0.0; filter:blur(9.0px); }
    33.33%  { opacity: 1.0; filter:blur(0.0px); }
    63.67%  { opacity: 1.0; filter:blur(0.0px); }
    66.67%  { opacity: 0.0; filter:blur(9.0px); }
    100%    { opacity: 0.0; filter:blur(9.0px); }
}
@keyframes third_of_3 {
    0%      { opacity: 0.0; filter:blur(0.0px); }
    63.67%  { opacity: 0.0; filter:blur(9.0px); }
    66.67%  { opacity: 1.0; filter:blur(0.0px); }
    96.67%  { opacity: 1.0; filter:blur(0.0px); }
    100%    { opacity: 0.0; filter:blur(9.0px); }
}

@keyframes first_of_4 {
    0%   { opacity: 1.0; filter:blur(0.0px); }
    22%  { opacity: 1.0; filter:blur(0.0px); }
    25%  { opacity: 0.0; filter:blur(9.0px); }
    47%  { opacity: 0.0; filter:blur(9.0px); }
    50%  { opacity: 0.0; filter:blur(0.0px); }
    97%  { opacity: 0.0; filter:blur(0.0px); }
    100% { opacity: 1.0; filter:blur(0.0px); }
}
@keyframes second_of_4 {
    0%    { opacity: 0.0; filter:blur(0.0px); }
    22.5% { opacity: 0.0; filter:blur(9.0px); }
    25%   { opacity: 1.0; filter:blur(0.0px); }
    47.5% { opacity: 1.0; filter:blur(0.0px); }
    50%   { opacity: 0.0; filter:blur(9.0px); }
    100%  { opacity: 0.0; filter:blur(9.0px); }
}
@keyframes third_of_4 {
    0%     { opacity: 0.0; filter:blur(0.0px); }
    47.5%  { opacity: 0.0; filter:blur(9.0px); }
    50%    { opacity: 1.0; filter:blur(0.0px); }
    72.5%  { opacity: 1.0; filter:blur(0.0px); }
    75%    { opacity: 0.0; filter:blur(9.0px); }
    100%   { opacity: 0.0; filter:blur(9.0px); }
}
@keyframes fourth_of_4 {
    0%     { opacity: 0.0; filter:blur(0.0px); }
    72.5%  { opacity: 0.0; filter:blur(9.0px); }
    75%    { opacity: 1.0; filter:blur(0.0px); }
    97.5%  { opacity: 1.0; filter:blur(0.0px); }
    100%   { opacity: 0.0; filter:blur(9.0px); }
}




/* element - series */

.series {
    position:absolute;
    width:640px;
    height:70px;
    display: flex;
    flex-direction: row;
}

.unary .series {
    top:322px;
    right:0px;
}

.binary .series {
    top:798px;
    left:640px;
}

.series .box {
    width:250px;
}

.series .wins {
    float:left;
    width:70px;
    flex:none;
    height:100%;
    font-family:HandelGothic;
    font-size:3em;
    display:flex;
    align-items:center;
    justify-content:center;
}

.ffa .series .wins {
    display:none;
}

.series .slogo {
    display:none;
    width:0px;
    height:100%;
    background-image:url("../images/streamez.box.png");
    background-image:url("../images/slogo.png");
    background-size:contain;
    background-repeat:no-repeat;
    display:block;
}

.logos .series .slogo {
    width:70px;
    display:flex;
}

.binary .series .slogo {
    background-image:url("../images/slogo_pad_top.png");
}

.logos .series .box {
    width:215px;
}

.ffa .series .box {
    width:320px;
}

.logos.ffa .series .box {
    width:285px;
}

.series .players {/*, .series_logo .players {*/
    float:left;
    width:100%;
    height:100%;
    /* for names that are too long (Option 1) */
    overflow:hidden;
}

.series .players .player {/*, .series_logo .players .player {*/
    display:flex;
    align-items:center;
    justify-content:center;
    float:left;
    height:50%;
    font-family:TitilliumSemiBold;
    /* for names that are too long (Option 2) */
    line-height: 14px;
}

.series .players .player.w1-1 {
    font-size: 1.4em;
    line-height:28px;
    padding-bottom:2px;
}

.wrapper.single .series .players .player.w1-1 {
    height:100%;
}

.series .players .player.w1-2 {
    font-size: 1em;
    /* for Vinny Mendoza */
    /*font-size: 0.95em; */
    /* for names that are too long (Option 3) */
    /*white-space: nowrap; */
    /* maybe a javascript text measuring solution is in order */
}

.wrapper.ffa .series .players .player.w1-2 {
    font-size:1.25em;
}

.series .box:first-child .wins {/*, .series_logo .box:first-child .wins {*/
    padding-left: 4px;
}

.series .box:last-child .wins {/*, .series_logo .box:last-child .wins {*/
    padding-right: 4px;
}

/*.ts .series .box.box1 {*/
/*    border-right:none;*/
/*}*/

/*.ts .series .box.box2 {*/
/*    border-left:none;*/
/*}*/

.ts .series .box:nth-child(1) {
    border-right:none;
}
.ts .series .box:nth-last-child(1) {
    border-left:none;
}


/* element - web cam box */

.webcam {
    position: absolute;
    bottom: 336px;
    left: 1310px;
    width: 584px;
    height: 332px;
    background-color: rgba(0,0,0,0.6);
}

.binary .webcam {
    border: 4px solid black;
    bottom:36px;
    width:424px;
    height:242px;
    background-color: rgba(0,0,0,0.6);
}

.binary .webcam.box1 {
    left:0px;
}

.binary .webcam.box2 {
    left:1496px;
}



/* element - chat box */

.binary .chat {
    position:absolute;
    left:640px;
    bottom:36px;
    height:176px;
    width:640px;
    background-color: rgba(0,0,0,0.6);
}

.unary .chat {
    position: absolute;
    bottom: 86px;
    left: 1310px;
    width: 584px;
    height: 230px;
    background-color: rgba(0,0,0,0.6);
}

.chat_watermark {
    display:none;
    width:100%;
    height:100%;
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    opacity:0.1;
    background-image:url('../images/chat_watermark.png');
}

.logos .chat_watermark {
    display:block;
}


/* element - screen */

.overlay .screen,
.overlay .away {
    position:absolute;
    bottom:32px;
    left:-4px;
    width:1288px;
    height:968px;
}

.overlay .away {
    z-index:1;
}

.wrapper.brb .overlay .screen,
.wrapper.brb .overlay .box_labels {
    display:none;
}

.element.away {
    display:none;
}

.wrapper.brb .overlay .element.away {
    z-index: 1;
    color: white;
    background-color: rgb(20 116 190 / 32%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8vh;
    width: 1280px;
    height: 960px;
    bottom: 36px;
    left:0px;
}

.wrapper.brb .overlay.dual .element.away {
    top: 80px;
    bottom: unset;
    height: 722px;
    width: 100%;
}

.overlay .away iframe {
    position: absolute;
    left: 0px;
    top: 4px;
    width: calc(100% - 4px);
    height: calc(100% - 8px);
    border: none;
}

.wrapper.brb .overlay .element.main_bg {
    clip-path:unset;
}

.binary .screen {
    width:960px;
    height:722px;
}

.screen.box1 {
    background-size: cover;
}

.screen.box2 {
    background-size: cover;
}

.binary .screen.box1 {
    position:absolute;
    top:80px;
    left:0px;
}

.binary .screen.box2 {
    position:absolute;
    top:80px;
    left:960px;
}

.screen .bg {
    width:100%;
    height:100%;
    opacity:0;
    background-size: 100%;
    filter:grayscale(100%);
}

.stencil .screen .bg {
    opacity:0.5;
}

.single .screen .bg {
    background-image:url("../images/single_screen.png");
}

.double .screen .bg {
    background-image:url("../images/half_screen.jpg");
    background-image:url("../images/double_screen.png");
}

.triple .screen .bg {
    background-image:url("../images/triple_screen.png");
}

.quadruple .screen .bg {
    background-image:url("../images/quarter_screen_4v4.jpg");
    background-image:url("../images/quadruple_screen.png");
}

.screen .name {
    display:none;
}

.screen_names .screen .name {
    display:block;
}

.screen div.p1, .screen div.p2, .screen div.p3, .screen div.p4 {
    /*font-size: 1.3em;*/
    font-size: 40.4px;
    
    /* version 1 */
    /*color: #5085b4;*/
    /*text-shadow: rgba(200, 225, 255, 0.5) -0.5px -0.5px 0px, rgba(16,16,16,1) 0px 1px 0px, rgba(16,16,16,1) 1px 1px 0px;*/
    /*font-family: Interstate;*/
    /*opacity: 0.84;*/
    /*filter: blur(1px);*/
    
    /* version 2 */
    color: #3f7bb5;
    text-shadow: rgba(200, 225, 255, 0.77) -0.5px -0.5px 0px, rgba(16,16,16,1) 0px 1px 0px, rgba(16,16,16,1) 2px 2px 0px;
    font-family: Interstate;
    opacity: 0.95;
    filter: blur(0.8px);
}

.binary .screen div.p1,
.binary .screen div.p2,
.binary .screen div.p3,
.binary .screen div.p4 {
    font-size:30px;
    filter: blur(0.8px);
}

.wrapper .screen .name {
    position:absolute;
}

.wrapper.single .screen .p1 {
    bottom:2.06%;
    left:0%;
    width:100%;
}

.wrapper.double .screen .p1, .wrapper.triple .screen .p1 {
    /*bottom: calc(50% + 4px);*/
    bottom: 50.8%;
    bottom: 51.1%;
    left: 1.4%;
    left: 1%;
}
.wrapper.double .screen .p2, .wrapper.triple .screen .p2 {
    left: 1.4%;
    left: 1%;
    bottom: 1.56%;
    bottom: 1.86%;
    bottom: 2.06%;
    /* this offset from bottom is slightly higher, but is the same distance from the HUD as
    the top screen, to keep the on-screen names aligned when toggling between half-screens */
}

.wrapper.triple .screen .p2 {
    bottom: 51.1%;
    left: 0%;
    width: 50.39%; /* 5 pixels to the right, per dman. center is 320, he wants 325 px */
    width: 51.25%; /* dman now wants 328 */
    text-align: center;
}

.wrapper.quadruple .screen .p1 {
    bottom: 51.1%;
    left: 0%;
    width: 50.39%; /* 5 pixels to the right, per dman. center is 320, he wants 325 px */
    width: 51.25%; /* dman now wants 328 */
    text-align: center;
}

.wrapper.quadruple .screen .p2 {
    bottom: 51.1%;
    left: 50%;
    width: 49.766%; /* 3 pixels to the left of center, per dman. center is 960, he wants 957 px */
    width: 48.438%; /* dman now wants 950 */
    text-align: center;
}

.wrapper.triple .screen .p2,
.wrapper.quadruple .screen .p3 {
    bottom: 2.06%;
    left: 0%;
    width: 50.39%;
    width: 51.25%; /* dman now wants 328 */
    text-align: center;
}

.wrapper.triple .screen .p3,
.wrapper.quadruple .screen .p4 {
    bottom: 2.06%;
    left: 50%;
    width: 49.776%;
    width: 48.438%; /* dman now wants 950 */
    text-align: center;
}

.wrapper.single .screen .p2,
.wrapper.single .screen .p3,
.wrapper.single .screen .p4,
.wrapper.double .screen .p3,
.wrapper.double .screen .p4,
.wrapper.triple .screen .p4 {
    display: none;
}



/* element - clock */

.clock {
    position:relative;
    width:200px;
    height:72px;
}

.unary .clock {
    position:absolute;
    bottom:0px;
    right:0px;
    z-index:2;
}

.binary .clock {
    position:absolute;
    bottom:0px;
    right:0px;
    height:36px;
    width: 260px;
    z-index:2;
}

.unary .clock_back {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 200px;
    height: 100%;
    z-index: -2;
    -webkit-clip-path: polygon(38px 0px, 201px 0px, 201px 72px, 0px 72px, 0px 38px);
    clip-path: polygon(38px 0px, 201px 0px, 201px 72px, 0px 72px, 0px 38px);
    clip-path: polygon(36px 0px, 200px 0px, 200px 72px, 0px 72px, 0px 36px);
}

.binary .clock_back {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 260px;
    height: 100%;
    z-index: -2;
    display:none;
}

.binary .clock_date {
    width: 50%;
    float: left;
    height:26px;
    height:100%;
    line-height:36px;
}

.binary .clock_time {
    width: 50%;
    float: left;
    font-size: 24px;
    line-height: 36px;
}

.unary .clock_front {
    position: absolute;
    top: 4px;
    right: 0px;
    width: 203px;
    height: 64px;
    z-index: -1;
    -webkit-clip-path: polygon(43px 0px, 205px 0px, 205px 72px, 0px 72px, 0px 36px, 7px 36px);
    clip-path: polygon(43px 0px, 205px 0px, 205px 72px, 0px 72px, 0px 36px, 7px 36px);
    clip-path: polygon(41px 0px, 205px 0px, 205px 72px, 0px 72px, 0px 36px, 5px 36px);
}

.binary .clock_fade {
    right:260px;
}

.binary .clock_front {
    position: absolute;
    top: 4px;
    right: 0px;
    width: 264px;
    height: 28px;
    z-index: -1;
}

.clock_time {
    height: 40px;
    line-height: 46px;
    width: 100%;
    text-align: center;
    font-size: 36px;
    padding-left: 24px;
}

.unary .clock_time .seconds {
    font-size:0.4em;
    margin-left:5px;
}

.clock_time .ampm {
    margin-left: -16px;
    margin-top: -7px;
    font-size: 0.3em;
    position: absolute;
}

.clock_date {
    height: 28px;
    line-height: 26px;
    font-size: 19px;
    width: 100%;
    text-align: center;
    padding-left: 24px;
}

.binary .clock_date {
    height: 36px;
    line-height: 38px;
    font-size: 22px;
}

.clock_fade {
    width: 150px;
    height: 28px;
    bottom: 4px;
    position: absolute;
    right: 200px; /* some overlap here for the preview scale-induced misalignment - gradient stop set to 90% to cover the overlap */
}

.clock .timeout {
    position: absolute;
    left: -1px;
    top: 0px;
    right: 0px;
    width: 0%;
    height: 100%;
    height: 50px; /* enough to cover top line only*/
    background-color: rgb(250 50 250);
    z-index: -2;
    -webkit-clip-path: polygon(38px 0px, 201px 0px, 201px 72px, 0px 72px, 0px 38px);
    clip-path: polygon(36px 0px, 201px 0px, 201px 72px, 0px 72px, 0px 36px);
}




/* element - commentating */

.commentating {
    position: absolute;
    left: 780px;
    top: 24px;
    width: 360px;
    height: 36px;
    border: 2px solid rgb(82 82 82);
    background: #000000;
    background-color: rgba(0,0,0,0.9);
    border-radius: 22px;
    line-height: 30px;
    color: #b7b7b7;
}

.commentating span {
    filter:brightness(1.5);
    /*opacity:0.7;*/
}

.commentating .box1caster {
    /*color: rgb(var(--box1));*/
    font-weight:100;
}

.commentating .box2caster {
    /*color: rgb(var(--box2));*/
    font-weight:100;
}

.cutouts .commentating {
    top: 4px;
    border-bottom-left-radius: 0px; /* makes look like speech bubble, lol */
    border-bottom-left-radius: 22px;
}



/* element - host join */

.box_labels {
    position:absolute;
    top:44px;
    left:50%;
    margin-left:-180px;
    width:360px;
    height:36px;
    font-size:24px;
}

.cutouts.nhe_test .box_labels {
    display:flex;
}

.box_labels > div {
    position:absolute;
    /*display:none;*/
}

.box_labels .border {
    display:none;
    width:100%;
    height:100%;
    border: 3px solid rgb(50,50,50);
    border-bottom:none;
    border-top-left-radius:18px;
    border-top-right-radius:18px;
}

.box_labels .nhe_test,
.box_labels .host_join,
.box_labels .host_join_dual {
    display:none;
    top: 0px;
    left: 50%;
    width: 400px;
    margin-left: -200px;
    height: 36px;
    background-color: black;
    justify-content: center;
    line-height: 38px;
    border-radius: 0px;
    border: none;
    z-index: -2;
}

.box_labels .host_join_dual {
    padding-top:8px;
}

.box_labels .nhe_test {
    top:2px;
    opacity:0.6;
}

.cutouts .box_labels div.border {
    display:block;
}

.box_labels .nhe_test {
    background-image: url(../images/nhe_team_scores_tied_0.jpg);
    background-position: center;
    background-repeat: no-repeat;
}

.cutouts.nhe.nhe_test.unary .box_labels .nhe_test {
    display:block;
}

.cutouts.nhe.nhe_test.binary .box_labels .nhe_test {
    display:block;
}

.cutouts.onoff .host_join_dual {
    display:flex;
}

.cutouts.onoff.unary .box_labels .host_join {
    display:flex;
}

.cutouts.onoff.binary .box_labels .host_join_dual {
    display:flex;
}





/*.host_join_border, .host_join, .host_join_dual, .host_join_nhe_test {*/
/*    position:absolute;*/
/*    top:44px;*/
/*    height:36px;*/
/*    width:360px;*/
/*    left:50%;*/
/*    margin-left:-180px;*/
/*    border: 3px solid rgb(50,50,50);*/
/*    border-bottom:none;*/
/*    font-size:24px;*/
/*    border-top-left-radius:18px;*/
/*    border-top-right-radius:18px;*/
    /*padding-top:6px;*/
/*    color:#f1f1f1;*/
/*    font-family: Interstate;*/
/*    font-family: TitilliumSemiBold;*/
/*    display:none;*/
/*}*/

/*.host_join, .host_join_dual, .host_join_nhe_test {*/
    /*display: flex;*/
/*    z-index: -2;*/
/*    background-color: black;*/
/*    justify-content: center;*/
/*    line-height: 36px;*/
/*    border-radius: 0px;*/
/*    width: 400px;*/
/*    margin-left: -200px;*/
/*    height: 40px;*/
/*    top: 40px;*/
/*    border: none;*/
/*}*/

/*.onoff .host_join_nhe_test {*/
/*    display:none;*/
/*}*/

/*.host_join_dual {*/
/*    background-color:black;*/
/*    padding-top:12px;*/
/*}*/


/*.wrapper.cutouts .host_join,*/
/*.wrapper.cutouts .host_join_dual,*/
/*.wrapper.cutouts .host_join_border {*/
/*    display:flex;*/
/*}*/

/*.wrapper.cutouts.nhe.binary .host_join,*/
/*.wrapper.cutouts.onoff.binary .host_join {*/
/*    display:none;*/
/*}*/

/*.wrapper.cutouts.nhe.unary .host_join_dual,*/
/*.wrapper.cutouts.onoff.unary .host_join_dual {*/
/*    display:none;*/
/*}*/

/*.wrapper.cutouts.onoff .host_join,*/
/*.wrapper.cutouts.onoff .host_join_dual {*/
/*    display:flex;*/
/*}*/

/*.wrapper.cutouts.nhe .host_join,*/
/*.wrapper.cutouts.nhe .host_join_dual {*/
/*    display:none;*/
/*}*/

/*.wrapper.cutouts.nhe .host_join div {*/
/*    border:none;*/
/*}*/

.host_join_dual .box1 {
    float:left;
    height:24px;
    width:180px;
    border-right:1px solid #f1f1f1;
    line-height:22px;
}

.host_join_dual .box2 {
    float:left;
    height:24px;
    width:180px;
    border-left:1px solid #f1f1f1;
    line-height:22px;
}

/*.host_join, .host_join_nhe_test {*/
/*    height:42px;*/
/*    line-height:46px;*/
/*}*/

/*.host_join_nhe_test {*/
/*    filter: blur(1px);*/
/*    z-index:-1;*/
/*}*/




/* element - rails */

.rails {
    height:36px;
    /*overflow:hidden;*/
    /*overflow-y:visible;*/
    position:absolute;
    bottom:0px;
    left:0px;
    width:100%;
    border-width:4px 0px;
    color:white;
    font-size: 22px;
    line-height: 26px;
    border-left:none!important;
}

.rails .timeout {
    position: absolute;
    height: 36px;
    bottom: -4px;
    left: 0px;
    width: 0%;
    border-top: 4px solid #7b7b7b;
    /*border-top: 4px solid rgb(0 0 0 / 50%);*/
    /*border-top: 4px solid rgb(250 50 250);*/ /* purpley-pink */
    border-bottom: 4px solid #7b7b7b;
    border-bottom:none;
    /* comment line above to restore bottom border */
}


/* element - ticker */

.ticker {
    position: absolute;
    height: 28px;
    bottom: 4px;
    left: 0px;
    width: 100%;
    font-size: 22px;
    line-height: 22px;
}

.slider {
    white-space:nowrap;
}

.slider > span, .slider > div {
    width:auto;
    white-space:nowrap;
    margin-right:300px;
    position:relative;
    height:100%;
    height:28px;
    top:2px;
    top:0px;
    text-align:left;
    display:inline-block;
    line-height: 28px;
}

.slider .twicker_logo {
    position: absolute;
    width: 32px;
    height: 30px;
    margin-left: -35px;
    margin-top: -4px;
}