:root {
    --primaryColor: 233, 192, 22;
    --primaryBg: var(--primaryColor);
    --primaryGradient: linear-gradient(274.32deg, #e9c016 -8.24%, #f8e18e 47.18%, #e9c016 107.53%);
    --primaryHoverGradient: linear-gradient(274.32deg, #d8ae00 -8.24%, #ffcd00 47.18%, #d8ae00 107.53%);
    --secondaryColor: 236, 79, 79;
    --secondaryBg: var(--secondaryColor);
    --secondaryGradient: linear-gradient(274.32deg, #89111c -8.24%, #d63035 47.18%, #89111c 107.53%);
    --secondaryHoverGradient: linear-gradient(274.32deg, #8a000e -8.24%, #d31e23 47.18%, #8a000e 107.53%);
    --infoColor: 98, 98, 98;
    --infoBg: var(--infoColo);
    --darkColor: 21, 21, 21;
    --darkBg: var(--darkColor);
    --darkGradient: linear-gradient(180deg, #f8f8fc00, #f8f8fc);
    --succesColor: 111, 214, 48;
    --succesBg: var(--succesColor);
    --succesGradient: linear-gradient(180deg, #f8f8fc00, #f8f8fc);
    --warningColor: 179, 149, 85;
    --warningBg: var(--warningColor);
    --warningGradient: linear-gradient(180deg, #f8f8fc00, #f8f8fc);
    --dangerColor: 119, 101, 63;
    --dangerBg: var(--dangerColor);
    --dangerGradient: linear-gradient(180deg, #f8f8fc00, #f8f8fc);
    --whiteColor: 255, 255, 255;
    --blackColor: 30, 30, 30;
    --darkBlackColor: 39, 39, 39;
    --blackGrey: 36, 33, 24;
    --grey: 40, 40, 40;
    --green: #25a433;
    --mainBg: 56, 53, 44;
    --borderWrnBtnColor: 86, 11, 17;
    --halloween: 220, 164, 83;
    --font-family-base: "Roboto", sans-serif;
    --heading-font-family: "Roboto Condensed", sans-serif;
    --heading-font-family-secondary: "Roboto Condensed", sans-serif;
    --filterWhite: brightness(0) invert(1);
    --filterBlack: brightness(0);
    --filterPrimary: invert(91%) sepia(24%) saturate(5078%) hue-rotate(357deg) brightness(99%) contrast(85%);
    --gradientShadowTop: linear-gradient(180deg, #38352ce6, #38352c80 51.56%, #38352c00);
    --gradientShadowTopDark: linear-gradient(180deg, #38352c00, #38352c);
    --gradientShadowBottom: linear-gradient(0deg, #38352ce6, #38352c80 51.56%, #38352c00);
    --gradientShadowBottomDark: linear-gradient(0deg, #38352c, #38352ccc 51.56%, #38352c00);
    --transitionTime: 0.3s;
    --customBtnClip: polygon(10px 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0% 50%);
    --customLabelClip: polygon(5px 0%, calc(100% - 5px) 0%, 100% 50%, calc(100% - 5px) 100%, 5px 100%, 0% 50%);
    --customBtnBorderClip: polygon(0% 50%, 10px 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%, 2px 50%, 12px calc(100% - 2px), calc(100% - 12px) calc(100% - 2px), calc(100% - 2px) 50%, calc(100% - 12px) 2px, 12px 2px, 2px 50%);
}
body {
    display: flex;
    flex-direction: column;
    font-family: var(--font-family-base);
    background: rgb(var(--blackColor));
}

.container {
    padding: 0 20px;
    position: relative;
    max-width: 1920px;
    margin: 0 auto;
}
@media screen and (min-width: 1280px) {
    .container {
        padding: 0 76px;
    }
}
@media screen and (min-width: 1024px) {
    .container {
        padding: 0 44px;
    }
}
@media screen and (min-width: 768px) {
    .container {
        padding: 0 32px;
    }
}

.header{
    position: sticky;
    top: 0;
    left: 0;
    z-index: 102;
    width: 100%;
    background: rgb(21 , 21, 21);
    pointer-events: auto;
}
.header__inner{
    position: relative;
    height: 106px;
    padding: 12px 20px;

}
.header__buttons{
    display: flex;
    gap:8px;
}

.header__button{
    min-height: 40px;
    padding: 0 24px 0 24px;
    background-color: initial;
    border: 2px solid rgb(var(--primaryBg));
    transition: border-color var(--transitionTime);
}

@media screen and (max-width: 460px) {
    .header__button {
        padding: 0 8px 0 8px;
    }
}

.header__button-text{
    color: rgb(var(--primaryColor));
    transition: color var(--transitionTime);
    text-transform: uppercase;
    font-family: Roboto Condensed, sans-serif;
    letter-spacing: .05em;
    line-height: 1;
    text-shadow: none;
    font-size: 14px;
    white-space: nowrap;
}

.front-section{
    height: calc(70vh - 138px);
    min-height: 850px;
    background-image: url(/images/entrance-page-baner.jpg);
    overflow: unset;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    transition: height 1s;
}

.content-section__text{
    text-align: left;
    font-size: 16px;
    line-height: 180%;
    font-weight: 400;
    margin: 0 auto;
    color: rgb(var(--whiteColor));
    letter-spacing: .06em;
}

table, th, td {
    border: 1px solid wheat;
    padding: 0px 5px;
}

.content-section__text h1 {
    font-size: 2em;
    font-weight: bold;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
    line-height: normal;
}

.content-section__text h2 {
    font-size: 1.5em;
    font-weight: bold;
    margin-top: 0.83em;
    margin-bottom: 0.83em;
    line-height: normal;
}

.content-section__text h3 {
    font-size: 1.17em;
    font-weight: bold;
    margin-top: 1em;
    margin-bottom: 1em;
    line-height: normal;
}


.content-section__text p {
    font-size: 1em;
    font-weight: normal;
    margin-top: 1em;
    margin-bottom: 1em;
}

.content-section__text > ol, ul {
    all: revert !important;
}

.footer{
    display: grid;
    grid-row-gap: 20px;
    position: relative;
    padding: 20px 20px 84px;
    background-color: rgb(var(--grey));
    overflow: hidden;
    margin-top: 20px;
    z-index: 5;
    padding: 20px 32px 22px;
    margin-top: 40px;
}
.footer__payments{
    display: grid;
    align-items: center;
    grid-template-columns: repeat(3, 88px);
    justify-content: center;
    margin: 20px 0;
}
.footer__payment{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: nowrap;
}
.footer__inserted-licenses{
    display: flex;
    justify-content: center;
    align-items: center;
    grid-gap: 20px;
    gap: 20px;
    flex-wrap: wrap;
    margin: 0 0 20px 0;
}
.footer__inserted-text{
    display: grid;
    grid-row-gap: 12px;
    margin: 20px 0;
    text-align: center;
    font-size: 12px;
    line-height: 180%;
    font-weight: 400;
    max-width: 750px;
    margin: 0 auto;
    color: rgb(var(--whiteColor));
    letter-spacing: .06em;
}



.seo-block {
    margin: 40px auto 0
  }

  .seo-block--title {
    position: relative
  }

  .seo-block-wrap {
    margin-bottom: 24px;
    position: relative;
    width: 100%;
    display: inline-block
  }

  .seo-block-wrap h1,
  .seo-block-wrap h3 {
    font-size: 16px;
    line-height: 125%;
    font-weight: 400;
    color: rgb(var(--whiteColor));
    text-transform: uppercase;
    padding: 24px 40px 24px 69px;
    letter-spacing: .03em;
    flex: 1;
    position: relative;
    background-color: rgb(var(--blackColor));
    clip-path: var(--customBtnClip);
    background-size: 120px;
    background-repeat: no-repeat;
    background-position: -25px 45%
  }

  .seo-block-wrap h1:hover,
  .seo-block-wrap h3:hover {
    cursor: pointer
  }

  .seo-block-wrap h1:before,
  .seo-block-wrap h3:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    clip-path: var(--customBtnBorderClip);
    background: rgba(var(--warningColor))
  }

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

    .seo-block-wrap h1,
    .seo-block-wrap h3 {
      white-space: normal;
      padding: 24px 45px 24px 84px;
      background-position: -15px 45%
    }
  }

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

    .seo-block-wrap h1,
    .seo-block-wrap h3 {
      font-size: 20px;
      line-height: 100%
    }
  }

  .seo-block-wrap h1:after,
  .seo-block-wrap h3:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    background-image: url(/images/arrow-accordion.svg);
    background-repeat: no-repeat;
    width: 18px;
    height: 12px;
    background-size: contain;
    background-position: center;
    filter: var(--filterWhite)
  }

  .seo-block-wrap h1.icon-medal,
  .seo-block-wrap h3.icon-medal {
    background-image: url(/cdn-static//images/casinoly/seo/seo-icon-1.png)
  }

  @media (min-resolution: 192dpi) {

    .seo-block-wrap h1.icon-medal,
    .seo-block-wrap h3.icon-medal {
      background-image: url(/cdn-static//images/casinoly/seo/seo-icon-1@2x.png)
    }
  }

  .seo-block-wrap h1.icon-star,
  .seo-block-wrap h3.icon-star {
    background-image: url(/cdn-static//images/casinoly/seo/seo-icon-2.png)
  }

  @media (min-resolution: 192dpi) {

    .seo-block-wrap h1.icon-star,
    .seo-block-wrap h3.icon-star {
      background-image: url(/cdn-static//images/casinoly/seo/seo-icon-2@2x.png)
    }
  }

  .seo-block-wrap h1.icon-cherry,
  .seo-block-wrap h3.icon-cherry {
    background-image: url(/cdn-static//images/casinoly/seo/seo-icon-2.png)
  }

  @media (min-resolution: 192dpi) {

    .seo-block-wrap h1.icon-cherry,
    .seo-block-wrap h3.icon-cherry {
      background-image: url(/cdn-static//images/casinoly/seo/seo-icon-3@2x.png)
    }
  }

  .seo-block-wrap p {
    font-size: 16px;
    line-height: 150%;
    font-weight: 400;
    color: rgb(var(--whiteColor));
    padding: 18px 28px 0;
  }

  @media screen and (min-width: 540px) {
    .seo-block-wrap p {
      padding: 18px 43px 0
    }
  }

  @media screen and (min-width: 768px) {
    .seo-block-wrap p {
      padding: 18px 84px 0
    }
  }

  .seo-block-wrap img {
    width: 100%;
    object-fit: cover;
    padding: 37px 28px 0;
    height: 150px;
  }

  @media screen and (min-width: 540px) {
    .seo-block-wrap img {
      padding: 37px 43px 0
    }
  }

  @media screen and (min-width: 768px) {
    .seo-block-wrap img {
      padding: 37px 84px 0
    }
  }

  .seo-block-wrap--content {
    position: relative;
    margin: 45px auto 0
  }

  .seo-block-wrap--content._hidden {
    display: none
  }

  @media screen and (min-width: 1024px) {
    .seo-block-wrap--content div {
      display: flex;
      align-items: flex-start
    }
  }

  .seo-block-wrap._open {
    padding-bottom: 40px
  }

  .seo-block-wrap._open:before {
    position: absolute;
    content: "";
    display: block;
    left: 0;
    width: 95%;
    height: 68px;
    z-index: -1;
    background: rgb(var(--mainBg));
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .1)) drop-shadow(0 4px 50px rgba(175, 142, 94, .6));
    margin-left: 10px
  }

  .seo-block-wrap._open:after {
    content: "";
    position: absolute;
    background: rgb(var(--mainBg));
    top: 34px;
    height: calc(100% - 34px);
    width: 100%;
    z-index: -1
  }

  .seo-block-wrap._open p,
  .seo-block-wrap._open img {
    display: block;
    filter: none
  }

  .seo-block-wrap._open h1:after,
  .seo-block-wrap._open h2:after {
    transform: translateY(-50%) rotate(-180deg)
  }

  .seo-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    width: 40px;
    height: 40px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1
  }

  .seo-icon--ball {
    background-image: url(/images/ball.png)
  }

  .seo-icon--roullette {
    background-image: url(/images/roullete.png)
  }

  .seo-icon--card {
    background-image: url(/images/card.png)
  }

  .seo-icon--medal {
    background-image: url(/images/medal.png)
  }

  .main-bn--box {
    position: absolute;
    left: 0;
    bottom: -20px;
    padding-bottom: 145px;
    width: 100%;
    z-index: 12;
    transition: .6s opacity ease, .6s transform ease;
    text-align: center;
    color: rgb(var(--whiteColor));
    opacity: 1;
    visibility: visible;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    height: calc(100% - 60px);
}

@media screen and (max-width: 460px) {
    .main-bn--box {
        padding-bottom: 300px;
        height: calc(100% - -40px);
    }
}

@media screen and (min-width: 1280px) {
    .main-bn--box {
        transform: translateY(-44%);
        max-width: 475px;
        top: 50%;
        left: 12%;
        width: unset;
        height: unset;
        display: block;
        bottom: unset;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
    .main-bn--box {
        transform: translateY(-50%);
        max-width: 325px;
        padding-bottom: 0;
        width: unset;
        height: unset;
        display: block;
        left: 12%;
        bottom: unset;
        top: 45%;
    }
}

.main-bn--gods, .main-bn--cards {
    position: relative;
    transform: scale(.5);
}

@media screen and (min-width: 1280px) {
    .main-bn--gods, .main-bn--cards {
        height: 140px;
    }
}

@media screen and (min-width: 1024px) {
    .main-bn--gods, .main-bn--cards {
        height: 200px;
        transform: scale(.65);
    }
}

.main-bn--god, .main-bn--card {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    transition: transform 1s;
}

.main-bn--god:nth-child(1) {
    transform: translate(-308px, 150px);
}
.main-bn--god:nth-child(2) {
    transform: translate(-249px, 89px);
}
.main-bn--god:nth-child(3) {
    transform: translate(-158px, 44px);
}
.main-bn--god:nth-child(4) {
    transform: translate(-50%);
}
.main-bn--god:nth-child(5) {
    transform: translate(calc(-50% + 118px), 44px);
}
.main-bn--god:nth-child(6) {
    transform: translate(calc(-50% + 207px), 89px);
}
.main-bn--god:nth-child(7) {
    transform: translate(calc(-50% + 279px), 150px);
}

.main-bn--god:after {
    content: "";
    position: absolute;
    width: 75%;
    height: 300px;
    background: linear-gradient(180deg, #b29555 19.7%, rgba(178, 149, 85, .15) 75%, transparent 100%);
    top: 50%;
    left: 50%;
    transform: translate(-50%);
    z-index: -2;
    filter: blur(15px);
    transform-origin: top;
    opacity: 0;
    transition: opacity var(--transitionTime);
}
.main-bn--god:nth-child(1):after {
    transform: translate(-100%) rotate(-55deg);
    opacity: .8;
}
.main-bn--god:nth-child(2):after {
    transform: translate(-100%) rotate(-50deg);
    opacity: .8;
}
.main-bn--god:nth-child(3):after {
    transform: translate(-68%) rotate(-30deg);
    opacity: .8;
}
.main-bn--god:nth-child(4):after {
    transform: translate(-50%);
    opacity: .8;
}
.main-bn--god:nth-child(5):after {
    transform: translate(-40%) rotate(20deg);
    opacity: .8;
}
.main-bn--god:nth-child(6):after {
    transform: translate(-15%) rotate(45deg);
    opacity: .8;
}
.main-bn--god:nth-child(7):after {
    transform: translate(38%) rotate(60deg);
    opacity: .8;
}

.main-bn--box-title {
    font-size: 16px;
    line-height: 137%;
    font-weight: 700;
    margin: 24px 6px 50px;
    text-shadow: 0 4px 20px #251e0b;
    font-family: var(--heading-font-family), sans-serif;
    position: relative;
    text-transform: uppercase;
}
.main-bn--box-title:after {
    content: "";
    display: block;
    width: 203px;
    left: 50%;
    transform: translate(-50%);
    height: 1px;
    bottom: -25px;
    position: absolute;
    background-color: rgb(var(--primaryBg));
}

@media screen and (min-width: 1280px) {
    .main-bn--box-title {
        font-size: 56px;
        margin-bottom: 50px;
    }
}

@media screen and (min-width: 1024px) {
    .main-bn--box-title {
        transition: unset;
    }
}

.main-bn--box-title {
    margin-bottom: 28px;
    transform: var(--transformMobile);
    transition: .6s transform ease;
}

@media screen and (min-width: 1280px) {
    .main-bn--box-title {
        font-size: 56px;
        line-height: 120%;
        font-weight: 900;
        text-transform: capitalize;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
    .main-bn--box-title {
        font-size: 36px;
        line-height: 42px;
        font-weight: 900;
        font-family: var(--font-family-base), sans-serif;
        text-transform: capitalize;
    }
}

.main-bn--box-prize {
    font-size: 28px;
    line-height: 140%;
    font-weight: 500;
    margin: 0 auto 16px;
    text-shadow: 0 4px 20px #251e0b;
    transform: var(--transformMobile);
    transition: 1.2s transform ease;
    padding: 0 8px;
}

@media (min-width: 1280px) and (max-height: 900px) {
    .main-bn--box-prize {
        font-size: 30px;
    }
}

@media screen and (min-width: 1024px) {
    .main-bn--box-prize {
        order: 2;
        padding: 0;
    }
}

.custom-button--warn {
    background: url(/images/ornamented-btn.png) no-repeat 50% 50% / 100% 100%;
    border: none;
    min-height: 75px;
    min-width: 315px;
}

.custom-button__title {
    color: rgb(var(--whiteColor));
}

.custom-button__title {
    font-size: 26px;
    padding: 25px 0;
    font-weight: 600;
    white-space: unset;
    text-transform: uppercase;
    font-family: Roboto Condensed, sans-serif;
    letter-spacing: .05em;
    line-height: 1;
    text-shadow: none;
    transition: color var(--transitionTime);
    white-space: nowrap;
}