.site-content {
    margin: 0;
    padding: 0;
    min-height: calc(100vh - 191px);
}


.site-content {
    width: 100%%;
    background-color: #213242;
    background-image:url('https://www.gamblejoe.com/images/snow1a.png'),
    url('https://www.gamblejoe.com/images/snow2a.png'),
    url('https://www.gamblejoe.com/images/snow3a.png');
    -webkit-animation:schnee 25s linear infinite;
    -moz-animation:schnee 25s linear infinite;
    -ms-animation:schnee 25s linear infinite;
    animation:schnee 25s linear infinite;
}


@keyframes schnee{0%{background-position:0px 0px,0px 0px,0px 0px}
100%{background-position:500px 1000px,400px 400px,300px 300px}}
@-moz-keyframes schnee{0%{background-position:0px 0px,0px 0px,0px 0px}
100%{background-position:500px 1000px,400px 400px,300px 300px}}
@-webkit-keyframes schnee{0%{background-position:0px 0px,0px 0px,0px 0px}
100%{background-position:500px 1000px,400px 400px,300px 300px;}}
@-ms-keyframes schnee{0%{background-position:0px 0px,0px 0px,0px 0px}100%
{background-position:500px 1000px,400px 400px,300px 300px}}


.site-network {
    display: none;
}

.closed_door {
    width: 300px;
    height: 250px;
    border: 1px solid #111;
    float: left;
    margin: 10px;
}

.page_adventscalendar .site-content {
    background-color: #213242;
}

.page_adventscalendar .site-content .infotext_win {
    padding: 20px 60px 20px;
}

@media screen and (max-width: 640px) {
    .page_adventscalendar .site-content .infotext_win {
        padding: 10px;
    }
}


.page_adventscalendar .site-content .container {
    background-color: #c3cbd0;
}

.page_adventscalendar .site-content .container_top{
    background-color: #c3cbd0;
    background-image: url('https://www.gamblejoe.com/images/calenderheader2020.png');
    background-position: top;
    background-repeat: repeat-x;
    background-size:   contain;
    /* padding-bottom: 190px; */
    padding-left: 20px;
    margin: 0 auto;
    max-width:1180px;
    border-top: 1px solid #222;
    height: calc(8vw);
}

.page_adventscalendar .site-content .container_bottom{
    background-color: #c3cbd0;
    background-image: url('https://www.gamblejoe.com/images/advent/footer_2022.png');
    background-position: bottom;
    background-repeat: no-repeat;
    background-size:   contain;
    /* padding-bottom: 190px; */
    padding-left: 20px;
    margin: 0 auto;
    max-width:1180px;
    border-bottom: 1px solid #222;
    height: calc(14vw);
}


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

    .page_adventscalendar .site-content .container_top,
    .page_adventscalendar .site-content .container_bottom {
         max-width: 1440px;
    }
}


.page_adventscalendar .site-content ul.revealed {
    cursor: inherit;
}


.page_adventscalendar .site-content ul.doors {
    margin:20px auto 30px auto;
    padding:0;
    list-style-type:none;
    max-width:100%;
    width: 100%;
    text-align: center;
    user-select: none;
}

.page_adventscalendar .site-content ul.doors li {
    font-weight: 400;

    box-sizing: border-box;
    border-radius: 6px;
    display: inline-block;
    color:#111;

    font-size: 14px;
    padding:15px;
    /*margin:25px 12px; */
    width: calc(40vw);
    height: calc(40vw);
    max-width: 229px;
    max-height: 229px;
    line-height: 23px;
    text-align:center;
    position: relative;
    vertical-align:top;
    user-select: none;
    perspective: 800px;
    transition: all 0.4s ease-in-out;
    margin: 0 0 10px;
}

.page_adventscalendar .site-content .door {
    user-select: none;
    color:#fff;
    font-size: 60px;
    position: absolute;
    top:0;
    left:0;
    box-sizing: border-box;
   /* border-left: 1px #eee solid;*/
    border-radius: 6px;
    width: calc(40vw);
    height: calc(40vw);
    max-width: 229px;
    max-height: 229px;
    transform-origin: 0 40%;
    transition: all 0.4s ease-in-out;
    transform-style: preserve-3d;
    -webkit-filter: grayscale(100%);
    filter: grayscale(90%);
}




@media screen and (min-width: 1200px) {
    .page_adventscalendar .site-content ul.doors li {
        /* width: 200px; */
        width: calc(15vw);
        height: calc(15vw);
        max-width: 229px;
        max-height: 229px;
        padding:0;
        font-size: 17px;
        margin: 0 0 10px;
    }

    .page_adventscalendar .site-content .door {
        font-size: 54px;
    }

}

.page_adventscalendar .site-content .door {

}

.page_adventscalendar .site-content .advd_cl .door {
    background-color: #111;
    opacity: 0.6;
}

.page_adventscalendar .site-content .advd{
    /* background-color: #EDEDED; */
}

.page_adventscalendar .site-content .advd .door {
    background-color: #317a00;
    z-index: 4; cursor: pointer;
}


.page_adventscalendar .site-content .advd_cl .revealed {
    display: none;
}

.page_adventscalendar .site-content .revealed {
    user-select: none;
}

.open {
    box-shadow: 14px 0px 15px -1px rgba(0,0,0,0.2);
    color: #91c1cc;
    transform: rotate3d(0, 1, 0, -91deg);
}

.jiggle {
    animation: jiggle 0.2s infinite;
    transform: rotate(-1deg);
}

@keyframes jiggle {
    0% {
                transform: rotate(-1deg);
    }
    50% {
            transform: rotate(1deg);
    }
}


.page_adventscalendar .site-content .winlist {
    margin:0 auto 60px auto;
    padding:0;
    list-style-type:none;
    text-align: center;
    display: inline-block;
}

.page_adventscalendar .site-content .winlist span{
    font-size: 1.4rem;
}



.page_adventscalendar .site-content .nowinner {
    min-height: 300px;
}

.page_adventscalendar .site-content .winlist li{
    float: left;
    text-align: center;
    margin: 12px;
    display: block;
}

.page_adventscalendar .site-content .winlist li img{
    display: block;
    border-radius: 50%;
    margin: 0 auto;
}



@media screen and (max-width: 800px) {
    .page_adventscalendar .site-content .winlist li{
        margin: 10px;
    }

    .page_adventscalendar .site-content .winlist li img{
        max-width: 50%;
    }
     .page_adventscalendar .site-content .winlist li img{
        max-width: 50%;
    }

    .page_adventscalendar .site-content .winlist li span{
        font-size: 12px;
    }

    .page_adventscalendar .site-content .winlist li{
        width: 120px;
    }

}

.page_adventscalendar .site-content .presentbag {
    width: 90%;
}

.advd .door.opened{
    -webkit-filter: none;
    filter: none;
}

.adventsbox.box_tip{
    padding: 10px;
    display: inline-block;
    margin: 30px 0;
}

.adventsbox.box_tip:before{
    display: none;
}

.adventsbox .dan_img{
    float: left; width: 10%; min-width: 100px;
}

.adventsbox .adventstxt{
    float: left;
    padding: 15px;
}

body.page_adventscalendar .xmastext .sponlogo{
    max-width: 400px;
    float: right;
    margin-left: 10px;

}

@media screen and (max-width: 800px) {
    body.page_adventscalendar .xmastext .sponlogo{
        max-width: 300px;
        float: none;
        display: block;
        margin: 10px auto 20px;
    }
}


body.page_adventscalendar .btn_anima{
    background-color: #8a1616;
    color: #FFF;
    font-family: open_sanssemibold, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 14px;
    border: 1px solid transparent;
    padding: 1.25rem 2.5rem;
    border-radius: 10px;
    font-weight: bold;
    display: inline-block;
    margin: 0 0 15px;
}

/*
:root {
    --btn_anima-bg: #000000;
    --btn_anima-bg-subtle: #1a1818;
    --btn_anima-fg: #ffffff;
    --btn_anima-highlight: blue;
    --btn_anima-highlight-subtle: #8484ff;

    --btn_anima-bg: #a40707;
    --btn_anima-bg-subtle: #8a1616;
    --btn_anima-fg: #ffffff;
    --btn_anima-highlight: #e13b3b;
    --btn_anima-highlight-subtle: #ffc1c4;


}

@property --gradient-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@property --gradient-angle-offset {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@property --gradient-percent {
    syntax: "<percentage>";
    initial-value: 5%;
    inherits: false;
}

@property --gradient-shine {
    syntax: "<color>";
    initial-value: white;
    inherits: false;
}

body.page_adventscalendar .btn_anima {
    --animation: gradient-angle linear infinite;
    --duration: 3s;
    --shadow-size: 2px;
    isolation: isolate;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    outline-offset: 4px;
    padding: 1.25rem 2.5rem;
    font-family: inherit;
    font-family: open_sanssemibold, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 14px;
    border: 1px solid transparent;
    border-radius: 360px;
    color: var(--btn_anima-fg);
    background: linear-gradient(var(--btn_anima-bg), var(--btn_anima-bg))
            padding-box,
        conic-gradient(
                from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
                transparent,
                var(--btn_anima-highlight) var(--gradient-percent),
                var(--gradient-shine) calc(var(--gradient-percent) * 2),
                var(--btn_anima-highlight) calc(var(--gradient-percent) * 3),
                transparent calc(var(--gradient-percent) * 4)
            )
            border-box;
    box-shadow: inset 0 0 0 1px var(--btn_anima-bg-subtle);

    &::before,
    &::after,
    span::before {
        content: "";
        pointer-events: none;
        position: absolute;
        inset-inline-start: 50%;
        inset-block-start: 50%;
        translate: -50% -50%;
        z-index: -1;
    }

    &:active {
        translate: 0 1px;
    }
}


body.page_adventscalendar .btn_anima::before {
    --size: calc(100% - var(--shadow-size) * 3);
    --position: 2px;
    --space: calc(var(--position) * 2);
    width: var(--size);
    height: var(--size);
    background: radial-gradient(
            circle at var(--position) var(--position),
            white calc(var(--position) / 4),
            transparent 0
        )
        padding-box;
    background-size: var(--space) var(--space);
    background-repeat: space;
    mask-image: conic-gradient(
        from calc(var(--gradient-angle) + 45deg),
        black,
        transparent 10% 90%,
        black
    );
    border-radius: inherit;
    opacity: 0.4;
    z-index: -1;
}


body.page_adventscalendar .btn_anima::after {
    --animation: shimmer linear infinite;
    width: 100%;
    aspect-ratio: 1;
    background: linear-gradient(
        -50deg,
        transparent,
        var(--btn_anima-highlight),
        transparent
    );
    mask-image: radial-gradient(circle at bottom, transparent 40%, black);
    opacity: 0.6;
}

body.page_adventscalendar .btn_anima span {
    z-index: 1;

    &::before {
        --size: calc(100% + 1rem);
        width: var(--size);
        height: var(--size);
        box-shadow: inset 0 -1ex 2rem 4px var(--btn_anima-highlight);
        opacity: 0;
    }
}

body.page_adventscalendar .btn_anima {
    margin: 0 0 15px;
    --transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);
    transition: var(--transition);
    transition-property: --gradient-angle-offset, --gradient-percent,
        --gradient-shine;

    &,
    &::before,
    &::after {
        animation: var(--animation) var(--duration),
            var(--animation) calc(var(--duration) / 0.4) reverse paused;
        animation-composition: add;
    }

    span::before {
        transition: opacity var(--transition);
        animation: calc(var(--duration) * 1.5) breathe linear infinite;
    }
}

body.page_adventscalendar .btn_anima:is(:hover, :focus-visible) {
    --gradient-percent: 20%;
    --gradient-angle-offset: 95deg;
    --gradient-shine: var(--btn_anima-highlight-subtle);

    &,
    &::before,
    &::after {
        animation-play-state: running;
    }

    span::before {
        opacity: 1;
    }
}

@keyframes gradient-angle {
    to {
        --gradient-angle: 360deg;
    }
}

@keyframes shimmer {
    to {
        rotate: 360deg;
    }
}

@keyframes breathe {
    from,
    to {
        scale: 1;
    }
    50% {
        scale: 1.2;
    }
}       */

body.page_adventscalendar .youarein{
    text-align: center;
    padding: 10px 15px;
    color: #135c09;
    background-color: #00BF00;
    display: inline-block;
    border-radius: 4px;
    border: 1px solid #999;
    font-family: open_sansbold, "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-bottom: 15px;
    background-image: linear-gradient(
        45deg,
        #c8ffbc 0%,
        #c8ffbc 10%,
        #9bfa93 10%,
        #9bfa93 20%,
        #c8ffbc 20%,
        #c8ffbc 30%,
        #9bfa93 30%,
        #9bfa93 40%,
        #c8ffbc 40%,
        #c8ffbc 50%,
        #9bfa93 50%,
        #9bfa93 60%,
        #c8ffbc 60%,
        #c8ffbc 70%,
        #9bfa93 70%,
        #9bfa93 80%,
        #c8ffbc 80%,
        #c8ffbc 90%,
        #9bfa93 90%,
        #c8ffbc 100%
    );
    text-shadow: 0px 0px 4px #fff;
}

body.page_adventscalendar .rrrmssg{
    text-align: center;
    padding: 10px 15px;
    color: #000;
    background-color: #00BF00;
    display: inline-block;
    border-radius: 4px;
    border: 1px solid #999;
    font-family: open_sansbold, "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-bottom: 15px;
    background-image: linear-gradient(
        45deg,
        #fabbbb 0%,
        #fabbbb 10%,
        #ff9696 10%,
        #ff9696 20%,
        #fabbbb 20%,
        #fabbbb 30%,
        #ff9696 30%,
        #ff9696 40%,
        #fabbbb 40%,
        #fabbbb 50%,
        #ff9696 50%,
        #ff9696 60%,
        #fabbbb 60%,
        #fabbbb 70%,
        #ff9696 70%,
        #ff9696 80%,
        #fabbbb 80%,
        #fabbbb 90%,
        #ff9696 90%,
        #fabbbb 100%

    );
    text-shadow: 0px 0px 4px #fff;
}