/*@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,600;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,600;1,800;1,900&display=swap');*/
@import url("https://use.typekit.net/jox0jls.css");
html{
    scrollbar-width: none;
}
body{
    /*font-family: "Poppins", sans-serif;*/
    font-family: "canada-type-gibson", sans-serif;
    background-color: var(--color-main-b-1) !important;
    --topbar-height: 0;
    scrollbar-width: none;
}
body[data-top-bar-visible]{
    --header-offset: 116px;
    --topbar-height: 40px;
    --bottom-menu-height: 0;
}
.button.primary{
    color: #fff;
}
.button{
    border-radius: 6px;
    color: #fff;
}
.button.secondary{
    background: var(--secondary-btn-bgn);
}
.button.secondary:hover{
    background: var(--secondary-btn-bgh);
}
#mainMenu{
    border-radius: 10px;
    padding-top: 10px;
}
#mainMenu a{
    color: var(--color-main-f-3);
    display: flex;
    align-items: center;
    align-content: center;
    padding: 10px;
    position: relative;
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
}
#mainMenu #languageMenu a > img,
#mainMenu a > svg{
    height: 25px;
    width: 25px;
    margin: 0 auto;
}
#mainMenu a span{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 60px;
    display: none;
    background-color: var(--color-main-b-3);
    border-radius: 5px;
    white-space: nowrap;
    padding: 5px;
}
#mainMenu a span:before{
    left: 0;
    width: 10px;
    height: 10px;
    border: 10px solid transparent;
    border-right-color: var(--color-main-b-3);
}
#mainMenu a:hover span{
    display: block;
}
#mainMenu a svg path{
    fill: var(--color-main-f-3);
}
#mainMenu a.active svg path{
    fill: var(--color-main-f-0);
}
#mainMenu a:hover svg path{
    fill: var(--color-main-f-0);
}
#mainMenu a.active{
    color: var(--color-main-f-2);
}
#mainMenu a:hover:not(.active){
    color: var(--color-main-f-0);
}
.menu-group{
    border-bottom: 1px solid var(--color-main-b-2);
    padding: 10px 0;
}
.menu-group-header{
    color: var(--color-main-f-2);
    font-size: 13px;
}
#socialMediaMenu{
    display: flex;
}
#socialMediaMenu a{
    margin-right: 5px;
    padding: 5px;
}
#socialMediaMenu a svg{
    margin: 0;
}
.game p{
    font-size: 13px;
    font-weight: lighter;
}
#homePageMenu{
    margin-top: 20px;
}
#headerMenuTabs{
    display: flex;
    margin: 0 -5px;
}
#headerMenuTabs a{
    margin: 0 5px;
    position: relative;
}
#headerMenuTabs img{
    height: 40px;
}
#mainMenuTabs{
    padding: 10px 10px 5px 10px;
    display: none;
    margin-top: 15px;
}
#mainMenuTabs a{
    width:33.333%;
    margin: 0 5px;
    padding: 0;
    position: relative;
}
#mainMenuTabs img{
    width: 100%
}
#headerMenuTabs img,
#mainMenuTabs img{
    transition: opacity .1s;
}
#headerMenuTabs span,
#mainMenuTabs span{
    position: absolute;
    z-index: 10;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    color: white;
}
#headerMenuTabs img:last-child,
#mainMenuTabs img:last-child{
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
}
#headerMenuTabs a.active img:first-child,
#headerMenuTabs a:hover img:first-child,
#mainMenuTabs a.active img:first-child,
#mainMenuTabs a:hover img:first-child{
    opacity: 0;
}
#headerMenuTabs a.active img:last-child,
#headerMenuTabs a:hover img:last-child,
#mainMenuTabs a.active img:last-child,
#mainMenuTabs a:hover img:last-child{
    opacity: 1;
}
#rightBar,
#leftBar{
    height: calc(100vh - var(--topbar-height));
    top: var(--topbar-height);
    z-index: 101;
    transition: all .3s ease-in-out;
}
#languageMenu a img{
    margin-right: 12px;
}
#mainMenu hr{
    margin: 9px 0;
    background: var(--color-main-f-4);
    opacity: .5;
}
#header{
    position: fixed;
    width: calc(100% - var(--left-bar-width));
    left: var(--left-bar-width);
    top: var(--topbar-height);
    height: var(--header-height);
    z-index: 100;
    background-color: var(--color-main-b-0);
    box-shadow: 0 0 5px 5px rgba(0,0,0,.3);
    transition: all .3s ease-in-out;
}
#siteHeader{
    width: 100%;
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
}
#topBar{
    position: fixed;
    top:0;
    left: 0;
    z-index: 102;
}
#leftBar{
    padding: 0;
    overflow: visible auto;
    scrollbar-width: none;
    z-index: 101;
    background-color: var(--color-main-b-4);
}
#headerLogoMobile img{
    height: 24px;
}
#pageContent{
    padding-top: 20px;
}
#leftBarLogo{
    height: var(--header-height);
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    background-color: var(--color-main-b-3);
    margin-bottom: 10px;
    box-shadow: -6px 0 5px 5px rgba(0,0,0,.2);
    position: sticky;
    top: 0;
    z-index: 20;
}
#leftBarLogo img.closed{
    height: 45px;
}
#leftBarLogo img.opened{
    height: 25px;
}
#siteContent #leftBarLogo .opened{
    display: none;
}
#siteContent #leftBarLogo .closed{
    display: block;
}
#siteContent.left-bar-visible{
    --left-bar-width: 275px;
}
#siteContent.left-bar-visible #leftBarLogo .opened{
    display: block;
}
#siteContent.left-bar-visible #leftBarLogo .closed{
    display: none;
}
#pageWrapper{
    background-color: var(--color-main-b-0);
}
[data-desktop-page] #siteContent.right-bar-visible #pageWrapper{
    padding-right: var(--right-bar-width);
}
[data-desktop-page] #pageWrapper{
    padding-left: var(--left-bar-width);
}
[data-desktop-page] #siteContent.right-bar-visible.left-bar-visible #pageWrapper{
    padding-right: var(--right-bar-width);
    padding-left: var(--left-bar-width);
}
[data-desktop-page] #siteContent.right-bar-visible #header{
    width: calc(100% - var(--left-bar-width) - var(--right-bar-width));
    right: var(--right-bar-width);
}
[data-desktop-page] #siteContent.right-bar-visible.left-bar-visible #header{
    width: calc(100% - var(--left-bar-width) - var(--right-bar-width));
    left: var(--left-bar-width);
    right: var(--right-bar-width);
}
#leftBarToggleBtn{
    display: flex;
    justify-content: center;
    margin: 0;
    position: absolute;
    bottom: 0;
    z-index: 9;
    background: var(--color-main-b-1);
    border-top: 1px solid #3d3f3f;
    width: 100%;
    padding: 10px 0;
}
#siteContent.left-bar-visible #leftBarToggleBtn{
    bottom: 5px;
    position: fixed;
    left: 225px;
    z-index: 999;
    width: unset;
    background-color: unset;
    border: unset;
}
#leftBarToggleBtn svg{
    opacity: .7;
    height: 28px;
    width: 28px;
    transform: rotate(180deg);

}
#siteContent #leftBarToggleBtn .opened{
    display: none;
}
#siteContent.left-bar-visible #leftBarToggleBtn svg{
    transform: rotate(0);
}
#siteContent.left-bar-visible #leftBarToggleBtn .closed{
    display: none;
}
#siteContent.left-bar-visible #leftBarToggleBtn .opened{
    display: block;
}
#siteContent #headerLogo{
    display: none;
}
#siteContent.left-bar-visible #headerLogo{
    display: block;
}
#siteContent #headerMenuTabs{
    display: flex;
}
#siteContent.left-bar-visible #headerMenuTabs{
    display: none;
}
#siteContent.left-bar-visible #mainMenu{
    padding: 10px;
    margin: 15px;
    background-color: var(--color-main-b-2);
}
#siteContent.left-bar-visible #mainMenuTabs{
    display: flex;
}

#siteContent #mainMenu a.active{
    background: #375288;
    border-radius: 10px;
}
#siteContent.left-bar-visible #mainMenu a{
    display: flex;
}
#siteContent.left-bar-visible #mainMenu #languageMenu a img,
#siteContent.left-bar-visible #mainMenu a svg{
    margin: 0 10px 0 0;
}
#siteContent.left-bar-visible #mainMenu a span{
    background: transparent;
    padding: 0;
    position: relative;
    display: block;
    transform: unset;
    left: 0;
    top: 0;
}
#siteContent #mainMenu > strong{
    padding: 0 15px;
    font-weight: 600;
}
#siteContent #mainMenu strong{
    color: var(--color-main-f-3);
    display: none;
}
#siteContent.left-bar-visible #mainMenu strong{
    color: #fff;
    display: block;
}
.casino-loader a,
.casino-loader button{
    background: var(--color-main-b-0) !important;
    transform: translateY(5px);
    z-index: 1;
    border-radius: 10px;
    margin: 0 0 15px 0;
    padding: 10px 10px;
    font-size: 15px;
    font-weight: 500;
    position: relative;
    border: none;
    color: #fff;
    text-transform: capitalize;
}
.casino-loader{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}
.casino-loader:after{
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 1px;
    background-color: rgba(255,255,255,.5);
    width: 100%;
}
[data-mobile-page] .casino-loader.text-center{
    padding: 5px;
    font-size: 14px;
}
[data-mobile-page] #footer{
    padding-bottom: 40px;
}
#footer{
    padding-top: 30px;
    padding-bottom: 0;
    background-color: var(--color-main-b-1);
}
#footer hr{
    border-color: rgba(255,255,255,.2);
    width: 100%;
    max-width: 1200px;
}
#footer > section{
    width: 100%;
    max-width: 1200px;
    margin: 20px auto;
}
#footerText {
    text-align: center;
    color: var(--color-main-f-3);
}
#footerText a{
    color: var(--color-main-f-3);
}
#footerSocialMedia {
    color: var(--color-main-f-3);
}
#languageSelect{
    position: relative;
    cursor: pointer;
    font-family: sans-serif;
}
#languageSelect .selected span:first-child {
    width: 100%;
}
#languageSelect .selected {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: rgba(255,255,255,.1);
    border-radius: 10px;
    color: var(--color-main-f-3);
    text-align: center;
    font-weight: 600;
}
#languageSelect .arrow {
    margin-left: 10px;
    transition: 0.3s ease-in-out;
}
#languageSelect.open .arrow {
    transform: rotate(180deg);
}
#languageSelect .options {
    display: none;
    position: absolute;
    width: 100%;
    border: 1px solid rgba(255,255,255,.1);
    background: var(--color-main-b-3);
    top: calc(100% + 5px);
    left: 0;
    z-index: 10;
    border-radius: 10px;
    overflow: hidden;
}
#languageSelect .options a {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    color: var(--color-main-f-3);
    border-bottom: 1px solid rgba(255,255,255,.1);
    text-align: center;
}
#languageSelect .options a:hover {
    background: var(--color-main-b-4);
}
#languageSelect.open .options {
    display: block;
}
#footerLanguageSwitch,
#footerLicense {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
}
#footerLicense img{
    height: 25px;
}
#footerText {
    font-size: 15px;
}
#footerMenu {
    color: white;
    display: flex;
    justify-content: space-between;
}
#footerMenu .footer-menu-section-header{
   font-weight: 600;
    font-size: 15px;
    margin-bottom: 10px;
}
#footerMenu a{
    display: flex;
    color: var(--color-main-f-3);
    padding: 5px 0;
    font-weight: 500;
}
#footerMenu div{
    display: flex;
    flex-direction: column;
}
#siteContent:not(.left-bar-visible) #leftBar{
    overflow: visible !important;
}

#leftBar a span{
    z-index: 9;
    white-space: nowrap;
}
.slider-top img {
    filter: brightness(1) invert();
}
#scrollToTop {
    position: fixed;
    z-index: 100;
    right: 5px;
    bottom: 5px;
    padding: 11px 20px;
    border-radius: 20px;
    background: var(--color-main-b-5);
    color: white;
}

#blogCategoryMenu{
    overflow: auto hidden;
    padding: 3px;
    margin: 20px 0;-webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.1) transparent;
    transform: translate(0);
}
#blogCategoryMenu a{
    padding: 10px;
    margin-right: 10px;
    color: var(--color-main-f-0);
    border-radius: 50px;
    white-space: nowrap;
}
#blogCategoryMenu a:hover{
    background-color: var(--color-main-b-7);
}
#blogCategoryMenu a.active {
    background-color: var(--color-main-b-5);
}
#blogCategoryMenu img {
    height: 20px;
    width: 20px;
    filter: brightness(1) invert();
    margin-right: 10px;
}
#blogCategoryMenuInner{
    display: flex;
    background-color: var(--color-main-b-6);
    border-radius: 50px;
    padding: 7px;
    min-width: max-content
}
#blogCategoryMenuWrapper{
    display: flex;
}
[data-mobile-page] #footerMenu {
    flex-direction: column;
}
[data-mobile-page] #footerMenu a {
    padding: 7px 20px;
}
[data-mobile-page] #footerMenu .footer-menu-section {
    background-color: var(--color-main-b-8);
    border-radius: 10px;
    margin-bottom: 10px;
}
[data-mobile-page] #footerMenu .footer-menu-section-body {
    background-color: transparent;
}
[data-mobile-page] #footerMenu .active .footer-menu-section-header {
    border-bottom: 1px solid var(--color-main-b-7);
}
[data-mobile-page] #footerMenu .footer-menu-section-header {
    margin-bottom: 5px;
    background-color: transparent;
    padding: 10px 20px;
    position: relative;
    cursor: pointer;
}
[data-mobile-page] #footerMenu .footer-menu-section-header:after {
   content: '▼';
    position: absolute;
    right: 15px;
    top: 10px;
}
[data-mobile-page] #footerMenu .active .footer-menu-section-header:after {
    transform: rotate(180deg);
}
[data-mobile-page] #footerMenu .footer-menu-section-body{
   display: none;
}
[data-mobile-page] #footerMenu .footer-menu-section.active .footer-menu-section-body{
   display: block;
}
[data-mobile-page] #leftBar{
    top: 100%;
    left: unset;
    transition: top .3s ease-in-out;
}
[data-mobile-page] #footer{
    padding-left: 10px;
    padding-right: 10px;
}
[data-mobile-page][data-top-bar-visible] #siteContent.left-bar-visible #leftBar{
    top: 95px;
    bottom: unset;
    height: calc(100% - var(--bottom-menu-height) - 95px);
}
[data-mobile-page] #siteContent.left-bar-visible #leftBar{
    top: 55px;
    width: 100%;
    height: calc(100% - var(--bottom-menu-height) - 55px);
}
[data-mobile-page] #siteChat{
    height: calc(100% - var(--bottom-menu-height));
}
body[data-mobile-page]{
    --bottom-menu-height: 68px;
}
body[data-mobile-page] #siteHeader{
    padding: 0 10px;
}
#headerLogoMobile{
    margin-left: 5px;
}
[data-mobile-page] #bottomMenu{
    background-color: var(--color-main-b-0);
    height: var(--bottom-menu-height);
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    width: 100%;
    z-index: 200;
    padding: 0 10px;
    grid-template-columns: repeat(5,1fr);
    box-shadow: 0 -4px 6px -1px #0003;
}
[data-mobile-page] #bottomMenu small{
    opacity: .7;
    color: white;
    font-size: 14px;
}
[data-mobile-page] #bottomMenu svg{
    opacity: .7;
    width: 24px;
    height: 24px;
    fill: white;
}
[data-mobile-page] #bottomMenu a,
[data-mobile-page] #bottomMenu button{
    display: flex;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    border-top: 3px solid transparent;
    width: 20%;
    background-color: transparent;
    position: relative;
}
[data-mobile-page] #bottomMenu .active,
[data-mobile-page] #bottomMenu .right-bar-visible,
[data-mobile-page] #bottomMenu .left-bar-visible{
    border-top-color: white;
}
[data-mobile-page] #bottomMenu .left-bar-visible small,
[data-mobile-page] #bottomMenu .left-bar-visible svg,
[data-mobile-page] #bottomMenu .right-bar-visible small,
[data-mobile-page] #bottomMenu .right-bar-visible svg,
[data-mobile-page] #bottomMenu .active small,
[data-mobile-page] #bottomMenu .active svg{
    opacity: 1;
}
[data-mobile-page] #mainMenuTabs{
    margin: 0;
}
[data-mobile-page] #mainMenuTabs a{
    font-size: 18px;
}
[data-mobile-page] #mainMenu a{
    font-size: 18px;
}
[data-mobile-page] .left-bar-visible #topBar {
    z-index: 9;
}
[data-mobile-page] #siteContent{
    --left-bar-width: 0px;
    --header-height: 55px;
}
[data-mobile-page] #scrollToTop {
    bottom: 75px;
}
@media (max-width: 1280px){
    #pageContent{
        padding: 0 10px;
    }
}
@media (max-width: 768px){
    #tableGamesPageContent img {
        margin-top: -310px;
    }
}
@media (max-width: 992px){

}
@media (max-width: 576px){
    #tableGamesPageContent img {
        margin-top: -110px;
    }
    #siteContent:not(.left-bar-visible) #languageMenu img{
        display: none;
    }
    #siteContent.left-bar-visible{
        --left-bar-width: 275px;
    }
    #header{
        left: 0;
        width: 100%;
        z-index: 9;
    }
    #siteContent.left-bar-visible #leftBarToggleBtn{
        left: 275px;
    }
    #siteContent.left-bar-visible #leftBarToggleBtn svg{
        opacity: .8;
    }
    #siteContent.left-bar-visible #leftBarToggleBtn:after{
        content: '';
        background-color: rgba(0,0,0,.8);
        position: fixed;
        width: 100vw;
        height: 100vh;
        left: 0;
        top: 0;
        z-index: -1;
    }
    #siteContent.right-bar-visible #rightBarToggleBtn{
        position: fixed;
        right: 330px;
        bottom: 10px;
    }
    #siteContent.right-bar-visible #rightBarToggleBtn:after{
        content: '';
        background-color: rgba(0,0,0,.8);
        position: fixed;
        width: 100vw;
        height: 100vh;
        left: 0;
        top: 0;
        z-index: -1;
    }
}