:root {
    --main-width: 1242px;
}

body{background: var(--main-primary-white);}

h1 {
    font-size: 28px;
    font-weight: 700;
}

h2 {
    font-size: 26px;
    font-weight: 700;
}

h2 > span {
    font-size: 20px;
    font-weight: 400;
    font-family: Roboto, serif;
}

h3 {
    font-size: 20px;
    font-weight: 400;
    font-family: Roboto, serif;
}

h4 {
    font-size: 18px;
    font-weight: 400;
}

p {
    font-size: 16px;
    font-weight: 400;
}

a {
    text-decoration: none;
    color: var(--main-primary-fucsia);
}

.btn {
    padding: 10px 20px;
    font-size: 15px;
}

.txt-size-12{
    font-size: 12px;
}

button {
    font-weight: 700;
    font-size: 15px;
}

.txt-white{
    color: var(--main-primary-white);
}

.txt-blue{
    color: var(--main-primary-blue-dark);
}

.bg-blue{
    background-color: var(--main-primary-blue-dark);
}

.txt-primary-blue {
    color: var(--main-primary-blue);
}

.txt-primary-fucsia {
    color: var(--main-primary-fucsia);
}

.txt-grey {
    color: #CACACA;
}

.uppercase {
    text-transform: uppercase;
}

.m-0{
    margin: 0 auto;
}

.m3p{
    margin: 3%;
}

.mt-50{
    margin-top: 50px;
}

.mb-20{
    margin-bottom: 20px;
}

.p-0 {
    padding: 0;
}

.p-title {
    padding: 2% 1% 1%;
}

.pb-15{
    padding-bottom: 10px;
}

.pt-20{
    padding-top: 20px;
}

.px-5{
    padding: 0 5%;
}

.txt-center{
    text-align: center;
}

.w-100{
    width: 100%;
}

.w-50{
    width: 50%;
}

.w-30{
    width: 30%;
}

.items-center{
    place-items: center;
}

/* promotions swiper balls */
#promotions .swiper-pagination-bullet {
    background-color: var(--main-primary-white);
}
#promotions .swiper-pagination-bullet-active{
    background-color: var(--main-primary-white);
}

/* promotional_prizes swiper balls */
#promotional_prizes .swiper-pagination-bullet{
    background-color: rgb(17, 16, 66, 30%);
}
#promotional_prizes .swiper-pagination-bullet-active{
    background-color: rgb(17, 16, 66, 80%);
}

.wrapper{width: 100%; padding: 0; margin:0 auto; position: relative;}

#content .home_main_banner {
    max-width: var(--main-width);
    width: 100%;
    height: auto;
}

#page #content {
    top: 58px;
}
/* Header */
#header_mbl {position: fixed; width: 100%; z-index: 2; height: 58px; top: 0 ; background-color: var(--color-desktop-primary-1); box-shadow: 0 4px 3.84px 0.16px rgba(0, 0, 0, 0.5); display: flex;}
#header_mbl #home_yb_logo {flex: 3; padding: 0 2%; align-self: center;}
#header_mbl #home_yb_logo a {display: flex}
#header_mbl #home_yb_logo a img {padding-right: 4%}
#header_mbl #home_yb_logo a img:nth-child(1) {width: 65%; height: auto; box-sizing: border-box}

#header_mbl #other_logos {flex: 2; float: right; align-self: center;}
#header_mbl #other_logos * {box-sizing: unset}
#header_mbl #other_logos a {float: right; padding: 0 6%; width: 20%}
#header_mbl #other_logos a:nth-child(1) {border-left: 1px solid #ffffff80;}
#header_mbl #other_logos a img {width: 100%; height: auto}

#header_mbl #header_menu_desktop {flex: 1;}
#header_mbl #header_menu_desktop #nav-icon3 {width: 50%; height: 50%; top: 15%}

/* Top promotion */
#home_promo_slider {
    background-color: var(--main-primary-blue-dark);
    max-height: fit-content;
}
#home_promo_slider .swiper-slide img {width: 100%; mask-image: linear-gradient(to bottom, black 75%, transparent 100%)}

#home_promo_slider .btn {
    text-decoration: none;
    font-family: Roboto, serif;
    padding: 10px 20px;
    font-size: 15px;
    left: 20%;
    transform: translateX(0);
    -webkit-transform: translateX(0);
}

/* New button */
.btn.green-button {border-radius: 50px; background: linear-gradient(180deg, #108E4C 0, #BAF126 100%); box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.70) inset; border: none;}
.btn.blue-button {border-radius: 50px; background: linear-gradient(180deg, #014F89 0, #0293FC 100%); box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.70) inset; border: none;}
.glowing-button {animation: glowing 2000ms infinite;}
@keyframes glowing {
    50% {
        transform: scale(1.1)
    }
}

/* Last winners */
#last_winners_container {
    height: 90px;
    align-content: center;
    display: flex;
}

.last_winner_slider {
    flex: 1;
    display: flex;
}
.last_winner_slider .swiper-wrapper .swiper-slide{
    display: flex;
    justify-content: center;
}
.last_winner_slider .swiper-wrapper .swiper-slide .winner_details_container{
    align-self: center;
}

.winner_img {
    flex: none;
    width: 50px;
}
.winner_img > img {
    width: 100%;
}

.align-center {
    align-content: center;
}
.winner_details_container {
    display: flex;
    align-items: center;
}
.winner_details {
    display: flex;
    flex-direction: column;
    font-family: Roboto, serif;
    font-size: 11px;
    font-weight: 400;
}

/* Payment logos */
#payment_logos {
    padding: 1% 20%;
}
#payment_logos img {
    width: 100%;
}

/* Shared Jackpot and mechanics */
#homepage_shared_jackpot {
    text-align: center;
}

#homepage_shared_jackpot img{
    width: 160px;
}

#homepage_shared_jackpot div:nth-child(1) {
    position: relative;
    z-index: 1;
}

#homepage_shared_jackpot div:nth-child(2) {
    position: relative;
    top: -15px;
    z-index: 0;
}

#homepage_shared_jackpot #shared_jackpot_amount {
    display: inline-block;
    padding: 5px 2%;
    border-radius: 50px;
    font-weight: 900;
    font-size: 30px;
}

#homepage_rooms_jackpot, #homepage_mechanics_content {
    padding: 0 1% 1%;
    font-family: Roboto, serif;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

#homepage_rooms_jackpot > div, #homepage_mechanics_content > div {
    margin: 3%;
    cursor: pointer;
}

#homepage_rooms_jackpot img, #homepage_mechanics_content img {
    width: 100%;
}

#homepage_rooms_jackpot .img_container, #homepage_mechanics_content .img_container {
    position: relative;
}

.room_amount {
    position: absolute;
    top: 55.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 700;
    font-size: 24px;
}

#homepage_rooms_jackpot .room_title, #homepage_mechanics_content .mechanic_title {
    font-weight: 700;
    font-size: 16px;
}

#homepage_rooms_jackpot .room_txt, #homepage_mechanics_content .mechanic_txt {
    font-weight: 400;
    font-size: 14px;
    padding: 0 2%;
}

.esdyb_container {
    display: flex;
}

.esdyb_container div {
    flex: 1;
    max-height: none;
}

.esdyb_container div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#yobingo_calendar {
    margin-bottom: 30px;
}

#yobingo_calendar a {
    color: var(--main-primary-fucsia);
    font-weight: 500;
    font-size: 16px;
    text-decoration: underline;
}

/* casino_games_header */
#casino_games_container {
    position: relative;
    height: auto;
    width: auto;
    background-color: var(--main-primary-blue-dark);
    padding: 1% 0;
}

#casino_games_container > div{
    max-width: var(--main-width);
    margin: auto;
}

#casino_games_container img{
    width: 40px;
    height: auto;
}

/* bingo_show_details */
#bingo_show_details {
    aspect-ratio: 1863/1070;
    margin: 8.3% 0 0;
    background-image: linear-gradient(to bottom right, #41175A, #5A238C, #FE0065);
    font-family: Roboto, serif;
    letter-spacing: 0;
    text-align: left;
}

#bingo_show_details > div {
    padding: 3%;
}

#bingo_show_details > div h2 {
    text-align: left;
}

#bingo_show_details > div h3 {
    font-size: 18px;
}

#bingo_show_details > div .btn {
    margin: 0 20px;
}

@media screen and (width <= 1150px) {
    #bingo_show_details > div h2 {
        font-size: 20px;
    }
    #bingo_show_details > div h3 {
        font-size: 16px;
    }
    #bingo_show_details > div p {
        font-size: 14px;
    }
}

/* promotions */
#promotions .swiper-slide {
    background-color: var(--main-primary-blue-dark);
    max-height: fit-content;
}

#promotions .swiper-slide img {
    width: 100%;
    mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
}

/* home page casino games */
#casino_games {
    padding: 0 1% 3%;
}

#casino_games span {
    font-weight: 700;
    font-size: 14px;
    padding-left: 1%;
}

#casino_games #casino_games_body {
    display: flex;
    gap: 2%;
}

#casino_games #casino_games_body>div div{
    flex: 1;
    display: flex;
    align-items: center;
}

#casino_games #casino_games_body>div div .img_container {
    flex: 1;
    padding: 2%;
    margin-bottom: 15px;
}

#casino_games #casino_games_body>div div .img_container img {
    width: 100%;
}

#casino_games #casino_games_text {
    display: flex;
    gap: 2%;
    padding: 0;
}

#casino_games #casino_games_text > p {
    flex: 1;
}

/* promotional prizes title */
.hr-prizes{
    display: none;
    width: 20%;
    border-color: #959595;
    margin: 0 0 20px;
}

#promotional_prizes_title {
    place-items: center;
}

#promotional_prizes_title h3 {
    color: var(--main-primary-blue-dark);
}

#promotional_prizes img {
    width: 100%;
    cursor: pointer;
}

#promotions_text {
    padding: 0 5%;
}

#promotions_text h4 {
    font-weight: 700;
}

#promotions_text .wrap {
    text-align: center;
    margin: 20px 0;
}

/* contact social */
#contact_logo {
    width: 10%;
    padding: 1% 0;
    margin: auto;
}

#contact_logo img {
    width: 100%;
}

.img_logo_contact_social{
    width: 30%;
}

.img_logo_contact_social img{
    width: 100%;
}

#icons-content{
    padding: 0 40%;
    justify-content: space-evenly;
    display: flex;
    gap: 10%;
}

#icons-content a{
    flex: 1;
}

#icons-content a img{
    width: 100%;
}

.hr-contact {
    width: 30%;
    border-color: var(--main-primary-white);
    margin: 0 auto;
}

#contact-content {
    padding: 0 36%;
    display: flex;
    gap: 5%;
}

#contact-content div {
    flex: 1;
    display: flex;
    align-items: center;
}

#contact-content img {
    flex: 1;
    width: 100%;
}

#contact-content span {
    flex: 4;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
}

#contact-content .br-white {
    border-right: 1px solid var(--main-primary-white);
}

#politic_privacy .homepage_width > div{
    padding: 1% 18%;
}

#politic_privacy .responsibility-container {
    padding: 0 20%;
    display: flex;
    align-content: center;
}

#politic_privacy .responsibility-container a:nth-child(1){
    flex: 2;
}

#politic_privacy .responsibility-container a{
    align-content: center;
    flex: 1;
}

#politic_privacy .responsibility-container img{
    width: 100%;
    max-height: 35px;
}

.footer--small-image {
    height:35px;
    margin: 15px 10px 0 10px;
}

#politic_privacy .logo-stores {
    padding-bottom: 5px;
    display: flex;
    justify-content: center;
}

#politic_privacy .payment-methods{
    width: 100%;
}

#politic_privacy .payment-methods img{
    width: 100%;
}

/* login_register_footer */
#login_register_footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 10;
    display: flex;
    justify-content: space-evenly;
    padding-bottom: 20px;
    background-image: linear-gradient(0deg, var(--main-primary-blue-dark) 0%, transparent 100%);
}

#login_register_footer div {
    width: 100%;
    padding: 4% 2%;
    justify-content: center;
    flex: 1;
}

#login_register_footer div button{
    height: 40px;
}

/* footer */
#footer_container {
    position: relative;
    height: auto;
    background-color: var(--main-primary-blue-dark);
}

#footer_container > div{
    margin: auto;
}

#footer-contacts {
    font-weight: 700;
    font-size: 14px;
}

#footer-contacts a {
    color: var(--main-primary-white);
}

#logInPopUp #main_login_form #login-submit.btn{
    padding: 10px 0;
    min-width: 160px;
}

#logInPopUp #bottom_login_box.register_container a.btn {
    padding: 10px 0;
    font-weight: 700;
    min-width: 160px;
}

/* width adjustment */
@media screen and (width > 540px) {
    #header .wrapper,
    .homepage_width {max-width: var(--main-width); margin: auto}
}

@media screen and (width <= 540px) {
    h1 {
        font-size: 21px;
    }

    h2 {
        font-size: 20px;
    }

    h3 {
        font-size: 18px;
    }

    h4 {
        font-size: 16px;
    }

    p {
        font-size: 14px;
    }

    .p-title {
        padding: 3%;
    }

    #last_winners_container {
        width: 100%;
        padding: 0;
    }

    #payment_logos {
        padding: 1% 0;
    }

    #homepage_shared_jackpot img{
        width: 127px;
    }

    #homepage_shared_jackpot div:nth-child(1) {
        position: relative;
        z-index: 1;
    }

    #homepage_shared_jackpot div:nth-child(2) {
        position: relative;
        top: -15px;
        z-index: 0;
    }

    #homepage_shared_jackpot #shared_jackpot_amount {
        padding: 2% 6%;
    }

    #homepage_rooms_jackpot, #homepage_mechanics_content {
        padding: 1%;
        grid-template-columns: repeat(2, 1fr);
    }

    .room_amount {
        position: absolute;
        top: 55%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-weight: 700;
        font-size: 14px;
    }

    /* this element is a little tricky, is used because in some devices there's a gap between this div and the next one*/
    #promotional_esdyb {
        background-image: linear-gradient(to right, #41175A, #5A238C);
        background-position: 0 105%;
        background-repeat: no-repeat;
        background-size: 100% 20%;
    }

    #bingo_show_details {
        margin: 0;
        padding: 5% 5% 10%;
        background-image: linear-gradient(to bottom right, #41175A, #5A238C, #FE0065);
        font-family: Roboto, serif;
        letter-spacing: 0;
        text-align: center;
    }

    #bingo_show_details > div {
        padding: 0;
        max-height: none;
    }

    #bingo_show_details > div h2, #bingo_show_details > div h3 {
        text-align: center;
    }

    #bingo_show_details > div h3 {
        font-weight: 400;
    }

    #homepage_rooms_jackpot .room_title, #homepage_mechanics_content .mechanic_title {
        font-weight: 700;
        font-size: 14px;
    }

    #homepage_rooms_jackpot .room_txt, #homepage_mechanics_content .mechanic_txt {
        font-weight: 400;
        font-size: 12px;
        padding: 0;
    }

    #yobingo_calendar {
        margin-bottom: 20px;
    }

    #yobingo_calendar a {
        font-size: 12px;
    }

    #casino_games #casino_games_body {
        display: block;
    }

    #casino_games #casino_games_body>div div{
        display: flex;
        align-items: center;
    }

    #casino_games #casino_games_body>div div .img_container {
        flex: 1;
        padding: 2%;
        margin-bottom: 15px;
    }

    #casino_games #casino_games_body>div div .img_container img {
        width: 100%;
    }

    #casino_games #casino_games_text {
        display: block;
        padding: 3%;
    }

    #promotional_prizes_title {
        background-color: var(--main-primary-blue-dark);
        color: var(--main-primary-white);
    }

    #promotional_prizes_title h3 {
        color: var(--main-primary-white);
    }

    .hr-prizes {
        display: block;
        margin: 0 auto;
    }

    #contact_logo {
        width: 30%;
        padding: 3%;
    }

    #icons-content{
        padding: 0 20%;
    }

    #contact-content {
        padding: 0 5%;
        gap: 2%;
    }

    .hr-contact {
        width: 90%;
        border-color: var(--main-primary-white);
    }

    #politic_privacy {
        padding: 5% 5% 60px;
    }

    #politic_privacy .responsibility-container {
        padding: 5% 10%;
        gap: 5%;
    }

    #politic_privacy .responsibility-container img{
        width: 100%;
        max-height: 22px;
    }

    #footer-contacts {
        font-size: 12px
    }

    #politic_privacy .logo-stores {
        padding-bottom: 10px;
    }

    #politic_privacy .homepage_width > div{
        padding: 1% 0;
    }

    @keyframes glowing {
        50% {
            transform: scale(1.1)
        }
    }
}