/* variables
======================================================================================================================================================================================================== */

/* main container */
:root
{
    --cord-color: #2b3d1a;
    --h-l-wire-thickness: 0.2rem;
    --socket-size: 1em;
}

/* mobile settings */
@media only screen and (max-width: 768px)
{
    :root
    {
        --socket-size: 0.85em;
    }
}










/* holiday lights
======================================================================================================================================================================================================== */

/* main container */
html > body .h-l
{
    position: absolute; display: block; margin: 0; padding: 0;
    background: var(--cord-color);
}





/* top string around c1 logo
==================================================================================================== */

/* main container */
html > body .c1-logo-wrapper .h-l.top {top: 0; left: 0; float: left; width: 100%; height: var(--h-l-wire-thickness);}

/* rotate lights */
html > body .c1-logo-wrapper .h-l.top ul :nth-of-type(even):is(li) {transform: rotate(0deg);}

/* mobile settings */
@media only screen and (max-width: 1280px)
{
    html > body .c1-logo-wrapper .h-l.top {display: none;}
}






/* right string around c1 logo
==================================================================================================== */

/* main container */
html > body .c1-logo-wrapper .h-l.right
{
    transform: rotate(-90deg); transform-origin: top right;
    top: 0; right: 0; float: right; width: 11.1rem; height: var(--h-l-wire-thickness);
}

/* rotate lights */
html > body .c1-logo-wrapper .h-l.right ul li {transform: rotate(180deg);}

/* mobile settings */
@media only screen and (max-width: 1280px)
{
    html > body .c1-logo-wrapper .h-l.right {display: none;}
}





/* bottom right angle around c1 logo
==================================================================================================== */

/* main container */
html > body .c1-logo-wrapper .h-l.bottom-right
{
    transform: rotate(-32.25deg); transform-origin: top right;
    top: calc(100% - 14rem); right: 0.1rem; float: right; width: 26rem; height: var(--h-l-wire-thickness);
}

/* rotate lights */
html > body .c1-logo-wrapper .h-l.bottom-right ul li {transform: rotate(180deg);}

/* mobile settings */
@media only screen and (max-width: 1280px)
{
    html > body .c1-logo-wrapper .h-l.bottom-right {display: none;}
}





/* bottom around c1 logo
==================================================================================================== */

/* main container */
html > body .c1-logo-wrapper .h-l.bottom {bottom: 0; left: 0; float: left; width: calc(100% - 22rem); height: var(--h-l-wire-thickness);}

/* rotate lights */
html > body .c1-logo-wrapper .h-l.bottom ul li {transform: rotate(180deg);}

/* mobile settings */
@media only screen and (max-width: 1280px)
{
    html > body .c1-logo-wrapper .h-l.bottom {width: 100%;}
}










/* list
======================================================================================================================================================================================================== */

/* main container */
html > body .h-l ul
{
    /* flex rules */
    display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: center; row-gap: 0; column-gap: 0;

    /* standard rules */
    width: 100%;
}





/* individual bulbs
==================================================================================================== */

/* main container */
html > body .h-l ul li
{
    /* flex rules */
    order: 0; flex-grow: 1; flex-shrink: 1; flex-basis: auto; align-self: center;
}





/* socket
==================================================================================================== */

/* main container */
html > body .h-l ul li::before
{
    z-index: 1;
    transform: translate3d(-50%,0,0);
    bottom: 0; left: 50%; display: block; float: left; width: var(--socket-size); height: var(--socket-size);
    background: var(--cord-color);
    border-radius: 0.15em;
}





/* bulb
==================================================================================================== */

/* main container */
html > body .h-l ul li .bulb
{
    z-index: 2;
    transform: translate3d(-50%,0,0);
    position: absolute; bottom: calc(var(--socket-size) - 0.3rem); left: 50%; display: block; float: left; width: calc(var(--socket-size) * 1.5); height: calc(var(--socket-size) * 2);
    border-radius: 50% / 60% 60% 40% 40%;
}

/* set correct layering */
html > body .h-l ul li .bulb.off {z-index: 1;}
html > body .h-l ul li .bulb.on {z-index: 2;}

/* the bulb */
html > body .h-l ul li .bulb::after
{
    z-index: 1;
    position: relative; display: block; float: left; width: 100%; height: 100%;
    border-radius: inherit;
}





/* bulb colors
================================================== */

/* green on */
html > body .h-l ul li.g .bulb.on::after
{
    background: #ccffdc;
    box-shadow: inset 0 0 0.5em 0 #00bc53, 0 0 3em 0 #00ff6e;
}
html > body .h-l ul li.g .bulb.off::after
{
    background: #024906;
    box-shadow: inset 0 0 0.25em 0 #005f18;
}



/* pink */
html > body .h-l ul li.p .bulb.on::after
{
    background: #ffc6f6;
    box-shadow: inset 0 0 0.5em 0 #ff5fa4, 0 0 3em 0 #ff91c1;
}
html > body .h-l ul li.p .bulb.off::after
{
    background: #630a30;
    box-shadow: inset 0 0 0.25em 0 #96154c;
}



/* orange */
html > body .h-l ul li.o .bulb.on::after
{
    background: #fff08d;
    box-shadow: inset 0 0 0.5em 0 #fda838, 0 0 2em 0 #ffcd8c;
}
html > body .h-l ul li.o .bulb.off::after
{
    background: #633e0c;
    box-shadow: inset 0 0 0.25em 0 #966421;
}



/* blue */
html > body .h-l ul li.b .bulb.on::after
{
    background: #5af5f3;
    box-shadow: inset 0 0 0.5em 0 #0cb4ed, 0 0 2em 0 #80dfff;
}
html > body .h-l ul li.b .bulb.off::after
{
    background: #022a4f;
    box-shadow: inset 0 0 0.25em 0 #024381;
}



/* red */
html > body .h-l ul li.r .bulb.on::after
{
    background: #f99f5a;
    box-shadow: inset 0 0 0.5em 0 #ff070a, 0 0 2em 0 #ff8082;
}
html > body .h-l ul li.r .bulb.off::after
{
    background: #520516;
    box-shadow: inset 0 0 0.25em 0 #850823;
}





/* bulb animations
================================================== */

/* on */
html > body .h-l ul li .bulb.on {animation: bulbOnAni 0.5s ease infinite 0s;}
@keyframes bulbOnAni
{
    0% {opacity: 0;}
    50% {opacity: 1;}
    100% {opacity: 0;}
}

/* animation delays */
html > body .h-l ul li.g .bulb.on {animation-delay: 0s;}
html > body .h-l ul li.p .bulb.on {animation-delay: 0.1s;}
html > body .h-l ul li.o .bulb.on {animation-delay: 0.2s;}
html > body .h-l ul li.b .bulb.on {animation-delay: 0.3s;}
html > body .h-l ul li.r .bulb.on {animation-delay: 0.4s;}



















/* top string around footer
==================================================================================================== */

/* main container */
html > body .top-partner-footer-wrapper .h-l.bottom {bottom: calc((var(--h-l-wire-thickness) / 2) * -1); left: 0; float: left; width: 100%; height: var(--h-l-wire-thickness);}

/* rotate lights */
html > body .top-partner-footer-wrapper .h-l.bottom ul li {transform: rotate(180deg);}

/* mobile settings */
@media only screen and (max-width: 1500px)
{
    html > body .top-partner-footer-wrapper .h-l.bottom ul li.s-4 {display: none;}
}
@media only screen and (max-width: 1280px)
{
    html > body .top-partner-footer-wrapper .h-l.bottom ul li.s-3 {display: none;}
}
@media only screen and (max-width: 768px)
{
    html > body .top-partner-footer-wrapper .h-l.bottom ul li.s-2 {display: none;}
}