* {
    box-sizing: border-box;
    font-family: 'Raleway', sans-serif;
}

a {
    all: unset;
    cursor: pointer;
}

body {
    background-color: #eeeded;
    max-width: 100%;
    color: black;
}

header {
    width: 100%;
    background-color: white;
    padding: 30px 60px;
    display: block;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


header .header-area__left {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 30px;
}

.top-menu__wrap {
    display: inline-flex;
}

.top-menu {
    display: inline-grid;
    grid-auto-flow: column;
    column-gap: 20px;
    align-items: center;
}

.top-menu li a {
    text-transform: uppercase;
    font-weight: 600;
}

.top-menu li a:hover {
    color: #673AB7;
}

header .logo-side {
    display: inline-block;
}

.logo-side img {
    height: 70px;
}

header .login-bar {
    float: right;
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    column-gap: 20px;
}

.login-bar .input-field {
    color: white;
    width: 150px;
}

.input-field .field__input {
    color: black;
}

.input-field .field__label {
    font-size: 14px;
    color: black;
}

.btn-join {
    height: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #673AB7;
    color: black;
    padding: 0 20px;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    border-radius: 7px;
    transition: all .6s ease;
    -webkit-animation: input-shadow ease-in-out 1s infinite;
    animation: input-shadow ease-in-out 2s infinite;
}

.btn-join:hover {
    color: #673AB7;
    border-color: white;
    -webkit-animation: unset;
    animation: unset;
    box-shadow: 0px 0px 10px 3px #673AB7;
}

.burger-menu-icon__wrap {
    display: none;
}



.main-container {
    padding-left: 60px;
    padding-right: 60px;
}

.content-container {
    width: 1000px;
}

.area-main {
    text-align: center;
}

section#main {
    width: 100%;
    display: inline-block;
    padding-top: 30px;
    padding-bottom: 30px;
    display: inline-flex;
    justify-content: center;
    /* background: linear-gradient(269deg, #000000, #966be1, #673ab7, #0d0c0d);
    background-size: 800% 800%;

    -webkit-animation: backgroundAnimation-purple 10s ease infinite;
    -moz-animation: backgroundAnimation-purple 10s ease infinite;
    animation: backgroundAnimation-purple 10s ease infinite; */
}

.area-main.content-container>* {
    margin-bottom: 14px;
}

.main-title-wrap h1 {
    font-size: 40px;
    letter-spacing: 4px;
}



.main-logo-wrap .logo-wrap {
    display: inline-flex;
    align-items: center;
}

.logo-wrap img {
    height: 260px;
    -moz-transform: rotate(25deg);
    -webkit-transform: rotate(25deg);
    -o-transform: rotate(25deg);
    -ms-transform: rotate(25deg);
    transform: rotate(25deg);
    border: 4px solid #673AB7;
}

.slogan-wrap h2 {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 30px;

}

section#games {
    width: 100%;
    display: inline-block;
    padding-top: 50px;
    padding-bottom: 50px;
    display: inline-flex;
    justify-content: center;
    background-color: #dedada;
}

.area-games-sort.content-container {
    width: 1100px;
}

.area-games-sort {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: 40px;
    row-gap: 40px;
}

.game {
    display: inline-block;
    height: 100%;
    padding: 50px 20px;
    position: relative;
    background-image: radial-gradient(circle at 100% 100%, transparent -4px, #d23a14 -4px, #d23a14 1px, transparent 1px), linear-gradient(to right, #d23a14, #ef8625), radial-gradient(circle at 0% 100%, transparent -4px, #ef8625 -4px, #ef8625 1px, transparent 1px), linear-gradient(to bottom, #ef8625, #d38909), radial-gradient(circle at 0% 0%, transparent -4px, #d38909 -4px, #d38909 1px, transparent 1px), linear-gradient(to left, #d38909, #ed8b02), radial-gradient(circle at 100% 0%, transparent -4px, #ed8b02 -4px, #ed8b02 1px, transparent 1px), linear-gradient(to top, #ed8b02, #d23a14);
    background-size: 1px 1px, calc(100% - 2px) 4px, 1px 1px, 4px calc(100% - 2px);
    background-position: top left, top center, top right, center right, bottom right, bottom center, bottom left, center left;
    background-repeat: no-repeat;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.game.slots {
    background-image: radial-gradient(circle at 100% 100%, transparent -3px, #7454f8 -3px, #7454f8 1px, transparent 1px), linear-gradient(to right, #7454f8, #1e115f), radial-gradient(circle at 0% 100%, transparent -3px, #1e115f -3px, #1e115f 1px, transparent 1px), linear-gradient(to bottom, #1e115f, #4b07e9), radial-gradient(circle at 0% 0%, transparent -3px, #4b07e9 -3px, #4b07e9 1px, transparent 1px), linear-gradient(to left, #4b07e9, #3d42d1), radial-gradient(circle at 100% 0%, transparent -3px, #3d42d1 -3px, #3d42d1 1px, transparent 1px), linear-gradient(to top, #3d42d1, #7454f8);
    background-size: 1px 1px, calc(100% - 2px) 4px, 1px 1px, 4px calc(100% - 2px);
    background-position: top left, top center, top right, center right, bottom right, bottom center, bottom left, center left;
    background-repeat: no-repeat;
}

.game.poker {
    background-image: radial-gradient(circle at 100% 100%, transparent -3px, #c02670 -3px, #c02670 1px, transparent 1px), linear-gradient(to right, #c02670, #9d016c), radial-gradient(circle at 0% 100%, transparent -3px, #9d016c -3px, #9d016c 1px, transparent 1px), linear-gradient(to bottom, #9d016c, #5f0747), radial-gradient(circle at 0% 0%, transparent -3px, #5f0747 -3px, #5f0747 1px, transparent 1px), linear-gradient(to left, #5f0747, #a43d5c), radial-gradient(circle at 100% 0%, transparent -3px, #a43d5c -3px, #a43d5c 1px, transparent 1px), linear-gradient(to top, #a43d5c, #c02670);
    background-size: 1px 1px, calc(100% - 2px) 4px, 1px 1px, 4px calc(100% - 2px);
    background-position: top left, top center, top right, center right, bottom right, bottom center, bottom left, center left;
    background-repeat: no-repeat;
}

.game.sportsbook {
    background-image: radial-gradient(circle at 100% 100%, transparent -3px, #3aac11 -3px, #3aac11 1px, transparent 1px), linear-gradient(to right, #3aac11, #267703), radial-gradient(circle at 0% 100%, transparent -3px, #267703 -3px, #267703 1px, transparent 1px), linear-gradient(to bottom, #267703, #3fa919), radial-gradient(circle at 0% 0%, transparent -3px, #3fa919 -3px, #3fa919 1px, transparent 1px), linear-gradient(to left, #3fa919, #3cdd3f), radial-gradient(circle at 100% 0%, transparent -3px, #3cdd3f -3px, #3cdd3f 1px, transparent 1px), linear-gradient(to top, #3cdd3f, #3aac11);
    background-size: 1px 1px, calc(100% - 2px) 4px, 1px 1px, 4px calc(100% - 2px);
    background-position: top left, top center, top right, center right, bottom right, bottom center, bottom left, center left;
    background-repeat: no-repeat;
}

.game.horse-race {
    background-image: radial-gradient(circle at 100% 100%, transparent -4px, #06297a -4px, #06297a 1px, transparent 1px), linear-gradient(to right, #06297a, #172ede), radial-gradient(circle at 0% 100%, transparent -4px, #172ede -4px, #172ede 1px, transparent 1px), linear-gradient(to bottom, #172ede, #1b81d0), radial-gradient(circle at 0% 0%, transparent -4px, #1b81d0 -4px, #1b81d0 1px, transparent 1px), linear-gradient(to left, #1b81d0, #173dd3), radial-gradient(circle at 100% 0%, transparent -4px, #173dd3 -4px, #173dd3 1px, transparent 1px), linear-gradient(to top, #173dd3, #06297a);
    background-size: 1px 1px, calc(100% - 2px) 5px, 1px 1px, 5px calc(100% - 2px);
    background-position: top left, top center, top right, center right, bottom right, bottom center, bottom left, center left;
    background-repeat: no-repeat;
}

.game.keno {
    background-image: radial-gradient(circle at 100% 100%, transparent -4px, #7f0b11 -4px, #7f0b11 1px, transparent 1px), linear-gradient(to right, #7f0b11, #e91616), radial-gradient(circle at 0% 100%, transparent -4px, #e91616 -4px, #e91616 1px, transparent 1px), linear-gradient(to bottom, #e91616, #ee6d6d), radial-gradient(circle at 0% 0%, transparent -4px, #ee6d6d -4px, #ee6d6d 1px, transparent 1px), linear-gradient(to left, #ee6d6d, #8f0505), radial-gradient(circle at 100% 0%, transparent -4px, #8f0505 -4px, #8f0505 1px, transparent 1px), linear-gradient(to top, #8f0505, #7f0b11);
    background-size: 1px 1px, calc(100% - 2px) 5px, 1px 1px, 5px calc(100% - 2px);
    background-position: top left, top center, top right, center right, bottom right, bottom center, bottom left, center left;
    background-repeat: no-repeat;
}

.game .game__title h3 {
    font-size: 29px;
    text-transform: uppercase;
    text-align: center;

    font-weight: bold;
}


.game .game__title h3.poker {
    color: #9f046c;
}

.game .game__title h3.slots {
    color: #4724f4;
    /* text-shadow: 4px 1px 4px #503abf; */
}

.game .game__title h3.bingo {
    color: #f89b43;
}

.game .game__title h3.sportsbook {
    color: #277b04;
}

.game .game__title h3.horse-race {
    color: #06297a;
}

.game .game__title h3.keno {
    color: #7f0b11;
}

.game .game__subTitle {
    text-align: center;
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
}

.game .game__subTitle a {
    color: orange;
    text-decoration: none;
    display: none;
}

.user-area {
    float: right;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
}

.user-area .message {
    display: inline-flex;
    align-items: center;
}

.btn-logout {
    -webkit-animation: unset;
    animation: unset;
    padding: auto;
    padding: 10px;
}

@media only screen and (max-width: 768px) {
    .main-container {
        padding-left: 10px;
        padding-right: 10px;
    }

    header {
        padding: 20px 10px;
    }

    .logo-side img {
        height: 50px;
    }

    .login-bar .input-field {
        width: auto;
    }

    .btn-join {
        font-size: 10px;
    }

    .area-games-sort.content-container, .content-container {
        width: 90%;
    }

    .area-games-sort {
        grid-template-columns: 1fr 1fr;
        row-gap: 14px;
    }

    .game .game__title h3 {
        font-size: 17px;
    }

    .game {
        padding: 20px 12px;
    }

    .logo-wrap img {
        height: 150px;
    }

    .slogan-wrap h2 {
        font-size: 20px;
    }
}



/* diğer sayfa */

section#jackpots {
    width: 100%;
    display: inline-block;
    /* padding-top: 50px; */
    padding-bottom: 50px;
    display: inline-flex;
    justify-content: center;
}

body {
    background-image: url('../img/bg-main.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

div.heading {
    display: grid;
    grid-template-columns: 200px repeat(9, 100px);
    column-gap: 10px;
    justify-content: center;
}

div.heading .place {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: white;
    color: white;
}

div.heading .place.title {
    background-color: unset;
    text-transform: uppercase;
}

div.heading .place img {
    width: 100px;
    height: auto;
}

div.table {
    overflow-x: scroll;
    background: #4d4d4d52;
    padding: 20px 10px;
    color: white;
}

div.table::-webkit-scrollbar {
    display: none;
}

div.table .progressive {
    display: grid;
    grid-template-columns: 200px 1fr;
    margin-top: 20px;
    column-gap: 10px;
}

/* div.table .progressive:nth-child(2n) {
    background: #00000099;
} */

div.table .progressive .gameImg img {
    width: 198px;
    height: auto;
}

div.table .progressive .data {
    display: grid;
    grid-template-rows: 1fr;
}

div.table .progressive .data-row {
    display: grid;
    grid-template-columns: repeat(9, 100px);
    column-gap: 10px;
    justify-content: center;
}

div.table .progressive .data-row span {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}


div.table .progressive .data-row .data__price {
    color: #f4b924;
    font-weight: bold;
    /* background-image: linear-gradient(to right, #462523 0, #cb9b51 22%, #f6e27a 45%, #f6f2c0 50%, #f6e27a 55%, #cb9b51 78%, #462523 100%);
    color: transparent;
    -webkit-background-clip: text; */
}

/* div.table .progressive .data-row span:nth-child(1) {
    background-color: rgb(255 151 0 / 60%);
}

div.table .progressive .data-row span:nth-child(2) {
    background-color: rgba(0, 128, 0, 0.60);
}

div.table .progressive .data-row span:nth-child(3) {
    background-color: rgba(128, 19, 0, 0.60);
}

div.table .progressive .data-row span:nth-child(4) {
    background-color: rgba(13, 0, 128, 0.60);
}

div.table .progressive .data-row span:nth-child(5) {
    background-color: rgba(128, 0, 81, 0.60);
}

div.table .progressive .data-row span:nth-child(6) {
    background-color: rgba(69, 72, 69, 0.60);
}

div.table .progressive .data-row span:nth-child(7) {
    background-color: rgba(0, 45, 128, 0.60);
}

div.table .progressive .data-row span:nth-child(8) {
    background-color: rgba(93, 10, 226, 0.60);
}

div.table .progressive .data-row span:nth-child(9) {
    background-color: rgba(10, 226, 71, 0.60);
}

div.table .progressive .data-row span:nth-child(10) {
    background-color: rgba(67, 44, 3, 0.60);
} */

div.table .progressive:nth-child(2) .data-row span.data__item {
    background-color: rgb(255 151 0 / 60%);
}

div.table .progressive:nth-child(3) .data-row span.data__item {
    background-color: rgb(255 0 0 / 60%);
}

div.table .progressive:nth-child(4) .data-row span.data__item {
    background-color: rgb(3 194 240 / 60%);
}

div.table .progressive:nth-child(5) .data-row span.data__item {
    background-color: rgb(84 86 92 / 60%);
}

div.table .progressive:nth-child(6) .data-row span.data__item {
    background-color: rgb(255 151 0 / 60%);
}

div.table .progressive:nth-child(7) .data-row span.data__item {
    background-color: rgb(255 0 0 / 60%);
}

div.table .progressive:nth-child(8) .data-row span.data__item {
    background-color: rgb(3 194 240 / 60%);
}

div.table .progressive:nth-child(9) .data-row span.data__item {
    background-color: rgb(84 86 92 / 60%);
}

div.table .progressive:nth-child(10) .data-row span {
    background-color: rgb(255 151 0 / 60%);
}



.no-bg {
    background-color: unset !important;
    background: unset !important;
}

@media only screen and (max-width: 768px) {

    div.heading {
        grid-template-columns: 80px repeat(10, 60px);
        column-gap: 3px;
    }

    div.table .progressive {
        display: grid;
        grid-template-columns: 80px 1fr;
        margin-top: 4px;
        column-gap: 3px;
    }

    div.table .progressive .gameImg img {
        width: 100%;
    }

    div.table .progressive .data-row {
        grid-template-columns: repeat(10, 60px);
        column-gap: 3px;
    }

    div.heading .place img {
        width: 100%;
        height: auto;
    }

    div.heading .place.title {
        font-size: 11px;
    }

    /* div.table .progressive .data-row span {
        font-size: 11px;
    } */
}


/* diğer sayfa end */


div.table.mobile {
    display: none;
}

div.table.mobile div.heading {
    display: grid;
    grid-template-columns: 50px repeat(4, 60px);
    column-gap: 10px;
}

div.table.mobile .progressive .data-row {
    display: grid;
    grid-template-columns: repeat(4, 60px);
    column-gap: 10px;
}

div.table.mobile .progressive {
    grid-template-columns: 50px 1fr;
    column-gap: 10px;
}

@media only screen and (max-width: 768px) {
    div.table {
        display: none;
    }

    div.table.mobile {
        display: grid;
        padding: 20px 10px;
        width: 97%;
        row-gap: 8px;
    }
}





section#choose-denomination {
    display: inline-block;
    width: 100%;
    text-align: center;
    margin: 20px 0;
}

.deniminations__wrap {
    display: inline-block;
}

.deniminations {
    display: inline-grid;
    grid-template-columns: auto 1fr auto;
    column-gap: 20px;
    align-items: center;
    color: white;
    background-color: black;
    border-radius: 30px;
}

.choose-text {
    font-weight: 200;
    text-transform: uppercase;
}

.denomination {
    cursor: pointer;
    /* opacity: .5; */
    height: 60px;
}

.denomination.active {
    opacity: 1;
    animation: rotation-y 5s infinite linear;
}

.denomination img {
    height: 100%;
    width: auto;
}

section#jackpots {
    /* padding-top: 10px; */
}

.data__item {
    font-family: sans-serif !important;
}


section#page-banner {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
    margin: 10px 0;
    height: 100px;
}

section#page-banner img.main-banner-image {
    position: relative;
    height: 100%;
    width: auto;
}


@media only screen and (max-width: 1330px) {
    .top-menu, .login-bar, .user-area {
        display: none !important;
    }

    .burger-menu-icon__wrap {
        display: inline-block;
    }

    .social-icons__wrap.mobile-menu {
        display: block;
        text-align: center;
    }
}

@media only screen and (min-width:768px) and (max-width: 1330px) {
    .area-games-sort {
        grid-template-columns: repeat(3, 1fr);
    }

    .top-menu, .login-bar, .user-area {
        display: none !important;
    }

    .burger-menu-icon__wrap {
        display: inline-block;
    }

}

.message,
.btn-logout-wrap {
    display: inline-block;
}

.logo-wrap img {
    -webkit-transform: none;
    transform: unset;
    border: unset;
}

body {
    background-image: unset;
}

.header-area__left.default {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 30px;
}

.top-menu__wrap {
    display: inline-flex;
}

.top-menu {
    display: inline-grid;
    grid-auto-flow: column;
    column-gap: 20px;
    align-items: center;
}

.top-menu li a {
    text-transform: uppercase;
    font-weight: 600;
}

.top-menu li a:hover {
    color: #673AB7;
}

.burger-menu-icon__wrap {}

.burger-menu-icon {}

.burger-menu-icon svg {
    width: 30px;
}



.social-icons__wrap {
    display: inline-block;
    width: 100%;
    text-align: right;
    padding-top: 20px;
}

.social-icons {
    display: inline-grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: 5px;
}

.social-icons .social-icon {}

.social-icons .social-icon svg {
    width: 30px;
    fill: #673AB7;
}

.social-icons .social-icon:hover svg {
    fill: black;
}

.mobile-menu__wrap {
    display: none;
    width: 100vw;
    min-height: 100vh;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    background: #EEEDED;
    overflow-y: hidden;
    padding: 30px 10px;
    box-sizing: border-box;
}

.mobile-menu__wrap.open {}

.mobile-menu {
    position: relative;
    height: 100%;
    width: 100%;
    padding-top: 30px;
    overflow-y: scroll;
}

.btn-close-menu {
    position: absolute;
    top: 0px;
    right: 0px;
}

.btn-close-menu svg {
    width: 30px;
}

.mobile-menu .menu-logo-side {
    width: 100%;
    display: inline-flex;
    justify-content: center;
}

.mobile-menu .menu-logo-side img {
    height: 70px;
    width: auto;
}

.mobile-menu .menu-list {
    margin-top: 20px;
    /* display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px; */
}

.mobile-menu .menu-list li {
    display: inline-block;
    width: 100%;
    padding: 13px 40px;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    background: #bdbdbd17;
    -webkit-box-shadow: -1px 0px 5px 0px #d7d5d5;
    box-shadow: -1px 0px 5px 0px #d7d5d5;
    /* text-align: center; */
}

.mobile-menu .menu-list li.active {
    color: #673AB7;
    box-shadow: -1px 0px 5px 0px #673ab7;
}


.mobile-menu .menu-login-bar {
    display: grid;
    grid-template-columns: 1fr 1fr .5fr;

}

.mobile-menu .menu-user-area {
    text-align: center;
}

.mobile-menu .menu-login-bar, .mobile-menu .menu-user-area {
    margin-top: 20px;
}

@media only screen and (max-width: 768px) {
    .social-icons__wrap {
        display: none;
    }

    body.mobile-menu-open {
        max-height: 100vh;
        overflow-y: hidden;
    }

    .mobile-menu .menu-login-bar, .mobile-menu .menu-user-area {
        margin-bottom: 10px;
    }

    section#choose-denomination {
        margin: 8px 0;
    }

    section#jackpots {
        padding-top: 0px;
    }

    .denomination {
        height: 50px;
    }
}

.goldenText {
    font-family: 'Times New Roman', serif;
    font-weight: bold;
    background-image: linear-gradient(to right, #946e6c 0, #cb9b51 22%, #f6e27a 45%, #f6f2c0 50%, #f6e27a 55%, #cb9b51 78%, #946e6c 100%);
    color: transparent;
    -webkit-background-clip: text;

}

.choose-text {
    display: inline-flex;
    align-items: center;
}

.choose-text .mainText {
    margin: 0 20px;
}

.choose-text .arrow {
    font-size: 20px;
}

.data__item {
    font-family: 'Teko', sans-serif !important;
    font-size: 28px;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    text-shadow: 1px 1px 2px #000000;
}

@media only screen and (max-width: 768px) {

    div.table .progressive .data-row span.data__item {
        font-size: 16px;
    }

    .deniminations {
        column-gap: 10px;
    }

    .choose-text .mainText {
        margin: 0 5px;
    }

    section#page-banner {
        margin: 5px 0;
    }

    section#page-banner img.main-banner-image {
        height: 100%;
    }
}

.arrow {
    position: relative;
    display: inline-block;
    height: 28px;
    width: auto;
}

.arrow img {
    height: 100%;
    width: auto;
}

.rotate {
    animation: rotation 5s infinite linear;
}

.rotate-y {
    animation: rotation-y 5s infinite linear;
}


.internal-content-container {
    width: 70%;
}

section#page-banner .page-banner__content {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

section#page-banner .banner {
    position: relative;
    height: 100%;
}

section#page-banner .banner img {
    height: 100%;
}

@media only screen and (max-width: 768px) {
    .internal-content-container {
        width: unset;
    }

    section#page-banner {
        height: 50px;
    }

    section#page-banner .banner {
        display: none;
    }
}

.data__item.marked {
    -webkit-animation: mark-shadow ease-in-out 1s infinite;
    animation: mark-shadow ease-in-out 1s infinite;
    background-color: #5e11c4 !important;
}

.header-area__right {
    display: flex;
}

.header-area__right .other-website {
    margin-right: 30px;
}

.header-area__right .other-website img {
    width: 280px;
    height: auto;
}

@media only screen and (max-width: 768px) {
    .header-area__right .other-website {
        display: none;
    }
}