@font-face {
  font-family: 'Fjalla One';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/fjallaone/v16/Yq6R-LCAWCX3-6Ky7FAFrOF6kjouQb4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
    background-image: url(../images/xmas-bg-mobile.jpg);
    background-repeat:repeat;
}

.faq-title {
    font-weight:600!important;
    margin-left:-5%;
    margin-right:-5%;
}

body::before {
    background-color: var(--neutral-background);
    content:"";
    width:100%;
    height:190px;
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
}

.promotion-heading h1 {
    font-size:54px;
    line-height:1em;
}

.christmas-banner {
    margin-top:0!important;
    --banner-height:70vh;
    /* --banner-height:500px; */
    --img-board-width:90%;
    --img-board-height:auto;
    --img-lady-width:90%;
    --img-lady-height:auto;
    --img-lady-top:10px;
    --img-lady-bottom:auto;
    --img-lady-right:0;

    --icon-size:36px;
    --icon-left:44px;
    --free-spin-width:68%;
    --free-spin-height:auto;
    --text-font-size:34px;
    --text-left:0;
    --text-width:auto;
    --text-height:94%;

    --btn-signup-font-size:inherit;
    --btn-signup-padding: 14px 36px;
    
    --disclaimer-pad-bottom:5px;
    --disclaimer-font-size:14px;    
    --disclaimer-leading:24px;

    --board-justify:center;
    --board-left:0;
    --board-height:auto;
    --board-align:unset;

    --ar-bg-img:768/1140;
    --ar-gift-img:768/202;
    --ar-board-img: 768/798;
    --ar-lady-img:740/614;

    --max-content-width:1400px;

    --offset-top:-6%;
    --offset-bottom:-2%;

    mask-image: linear-gradient(to bottom, black 97%, transparent 100%);
    mask-repeat: no-repeat;
    mask-size: cover;
}

.bonus-card {
    align-items: center!important;
}
.bonus-card .promo-card-inner {
    align-items: center!important;
}
.bonus-card::before {
    top:-20px!important;
    left: 0%!important;
    bottom: auto!important;
    transform: none!important;
    width: 88%!important;
    height:62px!important;
}

.bonus-amount {
    display:flex;
    flex-wrap: wrap;
    align-items: center;
    gap:10px;
}

.bonus-amount span {
    font-size:60px!important;
}


.spins-card {
    align-items: center!important;
}
.spins-card::after {
    top:-26px!important;
    right:0!important;
    left:auto!important;
    height:80px!important;
    width:80%!important;
    transform: none!important;
}

.advent-calendar .left {
    width:100%;
}
.advent-calendar .left .promo-title {
    text-align:center;
}

.advent-calendar .right {
    width:100%;
    padding:2%;
    color: #F5F9FB;
    font-family: "Fjalla One";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 38px; /* 158.333% */

}
.advent-calendar .right img {
    position:relative;
    top:auto;
    left:auto;
    transform:none;
}
.advent-calendar .right .promo-card {
    text-align: center;
    padding-top:32px;
    gap:10px;
}


.advent-calendar .right .btn-primary {
    background: white;
    color: #F4313F;
}
.advent-calendar .right .btn-primary:after{
    content: url(../images/arrow-right-red.svg);
}

@media (min-width:390px) {
    .christmas-banner {
        --text-height:97%;
        --free-spin-width:76%;
    }
}

@media (min-width:430px) {
    .christmas-banner {
        --free-spin-width:78%;
    }
}

@media (min-width:440px) {
    .christmas-banner {
        --banner-height:80vh;
        --text-height:94%;
        --img-board-width:100%;    
        --free-spin-width:90%;    
        --icon-size:40px;
        --icon-left:48px; 
        --text-font-size:40px;     
        --disclaimer-pad-bottom:10px;
    }
}

@media (min-width:480px)  {
    .christmas-banner {
        --banner-height:70vh;
        max-height:700px;
    }
}

@media (min-width:768px) {
    .christmas-banner {
        max-height:unset;
        --banner-height:auto;
        --ar-bg-img:3600/1530;
        --ar-gift-img:3600/438;
        --ar-board-img:1562/1530;
        --ar-lady-img:1820/1428;
        --img-lady-width:54%;
        --img-board-width:45%;
        --text-width:46%;
        --text-height:auto;
        --board-justify:flex-start;
        --free-spin-width:63%;
        --text-font-size:34px;    
        --icon-size:36px;
        --icon-left:44px;      
        --btn-signup-padding: 10px 25px;     
    }

    .christmas-banner .text {
        padding-top:6%;
    }
    body {
        background-image: url(../images/xmas-bg-desktop.png);
    }
}

@media (min-width:820px) {

}

@media (min-width:993px) {
    .christmas-banner {
        margin-top:50px!important;
    }
}
@media (min-width:1024px) {
    .christmas-banner {
        --text-height:340px;
    }
    .bonus-amount span {
        font-size:80px!important;
    }
    .advent-calendar {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        max-width: 1370px;
        margin-left: auto;
        margin-right: auto;        
    }
    .advent-calendar .left .promo-title {
        text-align: left;
        margin:0;
    }

    .advent-calendar .left {
        flex: 0 0 38%;
    }
    .advent-calendar .right {
        position:relative;
        flex: 0 0 58%;
    }
    .advent-calendar .promo-card-inner {
        text-align: left;
        align-items:flex-start!important;
    }
    .advent-calendar .right .promo-card {
        flex-direction: row;
        padding-top:0;
        min-height:230px;
    }
    
    .advent-calendar .promo-card-inner article {
        width:69%;
        line-height:1.6em
    }

    .advent-calendar .right picture {
        position:absolute;
        bottom:0;
        right:0;
        width:auto;
        height:95%;
    }
    .advent-calendar .right picture img {
        width:auto;
        height:100%;
    }
}

@media (min-width:1200px) {
    .christmas-banner {
        --banner-height:500px;
        --text-height:82%;
        --free-spin-width:60%;

        --img-lady-top:auto;
        --img-lady-bottom:0;
        --text-left:7vw;
        --img-lady-width:45%;
        --btn-signup-font-size:32px;
        --btn-signup-padding:5px 24px 3px;  

        --text-width:41%;
        --img-board-width:48%;
        --board-left:9vw;
        --disclaimer-font-size:18px;
        --disclaimer-leading:25px;
    }
    .advent-calendar .left {
        flex: 0 0 41%;
    }

    .advent-calendar .right {
        flex: 0 0 55%;
    }

    .advent-calendar .promo-card-inner {
        width:72%;
    }

    .advent-calendar .promo-card-inner article {
        width:100%;
    }    

    .advent-calendar .left .promo-title {
        font-size:82px;
        line-height:1em;
    }

}

@media (min-width:1300px) {
    .christmas-banner {
        --text-height: 78%;
    }

    .promotion-heading h1 {
        font-size:100px;        
    }

    .advent-calendar .left .promo-title {
        font-size:104px;
        line-height:1em;
        font-weight: 600;
        letter-spacing:-0.01em;
    }
    .advent-calendar {
        gap:0;
    }
    .advent-calendar .left {
        flex-basis:44%;
    }
    .advent-calendar .right {
        flex: 0 0 53%;
        font-size:24px;
        line-height:38px;
    }    

    .advent-calendar .right .promo-card {
        min-height: 246px;
    }    
    
}     
@media(min-width:1400px) {
    .advent-calendar .left .promo-title {
        font-size:112px;
    }    
}

@media(min-width:1500px) {
    .christmas-banner {
        --text-left: 5vw;
        --img-board-width: 50%;
    }
}
@media(min-width:1600px) {
    .christmas-banner {
        --banner-height:auto;
        --text-height:80%;
        --free-spin-width:68%;
        --icon-size:50px;
        --icon-left:63px;
        --text-font-size:58px;
        --text-left:9.5vw;
        --btn-signup-font-size:41px;
        --offset-top:-5%;
        --offset-bottom:2%;
        --img-board-width:65%;
        --img-lady-width:53%;
        --disclaimer-font-size:24px;
        --disclaimer-leading:56px;
        --btn-signup-padding:12px 28px;
    }
}

@media(min-width:1700px) {
    .christmas-banner {
        --img-board-width:70%;
    }
}

@media(min-width:1920px) {
    .christmas-banner {
        --banner-height:810px;
        --img-board-width:auto;
        --img-board-height:100%;
        --icon-size:61px;
        --icon-left:75px;
        --text-font-size:80px;
        --text-width:787px;
        --text-height:78%;        
        --text-left:8vw;
        --img-lady-width:1011px;
        --board-left:6vw;
        --board-height:100%;
        --board-align:flex-end;
        --free-spin-width:auto;
        --free-spin-height:42%;
        --disclaimer-font-size:28px;
        --disclaimer-leading:70px;
        --btn-signup-padding:12px 28px;
        --offset-top:-4%;
        --offset-bottom:3%;        
        --btn-signup-font-size:50px;
    }
    .christmas-banner .text {
        padding-top:0%;
    }
}
@media(min-width:2560px) {
    .christmas-banner {
        --img-lady-right:10%;
        --board-left:20%;
        --text-left:21%;
    }
}

@media(min-width:3840px) {
    .christmas-banner {
        --board-left:30%;
        --text-left:31%;        
        --img-lady-right:20%;
    }
}

picture img {
    width:100%;
    height:auto;   
    vertical-align: middle;
}

.christmas-banner {
    position:relative;
    overflow: hidden;
    height:var(--banner-height);
}

.christmas-banner .wrapper {
    position:absolute;
    width:100%;
    height:100%;
}

.christmas-banner .bg img {    
    aspect-ratio:var(--ar-bg-img);
}


.christmas-banner .gifts {
    position:absolute;
    bottom:0;
    left:0;
    z-index:3;    
    width:100%;
}

.christmas-banner .gifts img {
    aspect-ratio:var(--ar-gift-img);
}

.christmas-banner .board {
    position:absolute;
    bottom:0;
    height:var(--board-height);
    left:var(--board-left);
    z-index:2;
    display:flex;
    flex-wrap:wrap;
    align-content: var(--board-align);
    justify-content: var(--board-justify);
}



.christmas-banner .board img {
    aspect-ratio: var(--ar-board-img);
    width:var(--img-board-width);
    height:var(--img-board-height);
}

.christmas-banner .lady {
    position:absolute;
    top:var(--img-lady-top);
    bottom:var(--img-lady-bottom);
    right:var(--img-lady-right);
    z-index:1;
    width:var(--img-lady-width);
    height:var(--img-lady-height);
    display:flex;
    justify-content: center;
}
.christmas-banner .lady img {
    aspect-ratio:var(--ar-lady-img);
}

.christmas-banner .text {
    position:absolute;    
    top:0;
    left:var(--text-left);
    width:var(--text-width);
    height:var(--text-height);
    display:flex;
    z-index:4;
    flex-direction: column;
    justify-content: end;   
    align-items: center;
    align-content: center;
    text-align: center;
    flex-wrap:wrap;
    font-family: "TT Bluescreens";    
    font-style: normal; 
    font-size: var(--text-font-size);       
    font-weight: 700;   
    line-height: 41.568px; /* 103.92% */    
    filter: drop-shadow(0 4px 10px #511111);
    color:#F5F9FB;
}

.christmas-banner .text .offset {
    margin-top:var(--offset-top);
    margin-bottom:var(--offset-bottom);
    filter: drop-shadow(0 4px 10px #511111);
}


.christmas-banner .text .gc,
.christmas-banner .text .sc {
    background-repeat:no-repeat;
    background-position: left center;
    background-size:var(--icon-size);
    padding-left:var(--icon-left);
}

.christmas-banner .text .gc {
    color: #FFD660;
    background-image:url(../images/xmas-2025-icon-gc.svg);

}

.christmas-banner .text .sc {
    color:#36FFD0;
    background-image:url(../images/xmas-2025-icon-sc.svg);
}

.christmas-banner .text small {
    color: #FFF;
    font-size: var(--disclaimer-font-size);
    font-weight: 600;
    line-height:var(--disclaimer-leading);
    padding-bottom:var(--disclaimer-pad-bottom);
}

.christmas-banner .get-50-free-spin {
    width:var(--free-spin-width);
    height:var(--free-spin-height);
    aspect-ratio: 1226/526;
    filter: drop-shadow(0 4px 10px #511111);
    vertical-align:middle;
}

.christmas-banner .btn-signup {
    align-self:center;
    display: inline-flex;

    width:fit-content;
    font-size:var(--btn-signup-font-size);
    padding: var(--btn-signup-padding);
    justify-content: center;
    align-items: center;
    gap: 19px;    
    border-radius: 10px;
    background: #F4313F;
    box-shadow: 0 4px 10px 0 #511111;
    text-decoration: none;
    color:white;
}
/* .page-template-christmas-2025 section{
    margin-top: 0px;
} */
.promo-card{
    border-radius: 10px;
    background: #89000A;
    box-shadow: 0 4px 20px 0 #511111;
    padding: 50px 30px 0;
}
.promotion-heading{
    text-align: center;
}
.promotion-heading p{
    color: var(--colors-neutral-Text, #372C35);
    text-align: center;
    font-family: "TT Bluescreens";
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px; /* 125% */
}
.bonus-card::before {
   content: "";
    position: absolute;

    background-image: url('../images/bonus-card-vector-v2.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    pointer-events: none;
}
.spins-card::after {
    content: "";
    position: absolute;

    background-image: url('../images/spin-card-vector-v2.svg?ver=1.0'); /* put your SVG/PNG here */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right center;
    pointer-events: none;
}