@import 'variable.scss';

// Set style
body {
    background-attachment: fixed;
    background-repeat    : no-repeat;
    background-size      : cover;
    background-position  : center;
    // background-image: url('../img/content_bg.jpg');
    background-image     : url('../img/bg-body2.jpg');
    width                : 100%;
    height               : 100%;
    font-family          : $font;
}

.sc-7dvmpp-1{
    display: none !important;
}
.sc-8eqc3y-0{
    font-family: $font !important;
}
.q8c6tt-2{
    bottom: 50px !important;
    right: -10px !important;
}
header {
    .bg {
        background-image   : url('../img/bg-header3.jpg');
        background-repeat  : no-repeat;
        background-position: bottom;
        background-size    : cover;
    }

    .btn-header {
        a {
            margin: 5px;
        }
    }

    .navigation {
        width           : 100%;
        background-color: $bg-header;
        // display: none;

        ul {
            max-width      : 1200px;
            margin         : auto;
            margin-bottom  : 0;
            text-align     : center;
            // padding-left: 0;

            li {
                list-style-type: none;
                display        : inline-block;
                padding        : 10px 0;
                margin         : 0 -3px;
                margin-bottom  : -3px;

                a {
                    // padding: 10px 15px;
                    text-decoration: none;
                    text-transform : uppercase;
                    font-weight    : bold;
                    font-family    : $font-k;
                    color          : $black;
                    padding        : 10px 20px;
                    transition     : all 0.5s;
                }


                &:hover {
                    background-color: $bg-active;
                    transition      : all 0.5s;

                    a {
                        color     : $white !important;
                        transition: all 0.5s;
                    }
                }
            }

            li.flags {

                a,
                button {
                    img {
                        height            : 23px;
                        box-shadow        : 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0);
                    }
                }

                &:hover {
                    background-color: $bg-header;
                    transition      : all 0.5s;
                }


                .icon {
                    cursor      : pointer;
                }

                .icon img {
                    display   : inline-block;
                   height: 23px;
                    margin-top: 4px;
                    box-shadow        : 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0);
                }

                .icon:hover {
                    opacity: .7
                }

                .logo {
                    flex       : 1;
                    margin-left: 50px;
                    color      : #eee;
                    font-size  : 20px;
                    font-family: monospace;
                }

                .notifications {
                    width           : 131px;
                    height          : 0px;
                    opacity         : 0;
                    position        : absolute;
                    top             : 45px;
                    right           : 0;
                    border-radius   : 5px 0px 5px 5px;
                    background-color: $bg-header;
                    z-index: 100;
                    box-shadow      : 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                }

                .notifications-item {
                    display      : flex;
                    border-bottom: 1px solid #eee;
                    padding      : 6px 9px;
                    margin-bottom: 0px;
                    cursor       : pointer;
                    transition: all 0.5s;
                }

                .notifications-item:hover {
                    background-color: $bg-active;
                    transition: all 0.5s;

                    h4{
                        color: $white !important;
                    }
                }

                .notifications-item img {
                    display      : block;
                    height       : 25px;
                    margin-right : 9px;
                    box-shadow        : 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0);
                }

                .notifications-item .text h4 {
                    color     : $black;
                    font-size : 16px;
                    margin-top: 3px;
                }
            }
        }
    }
}

// #wowslider-container1{
//     border: 2px dashed $bg-active;
// }
.animation-logo {
    animation: pulse 2s ease infinite alternate;
}

.menu-active {
    background-color: $bg-active;
    transition      : all 0.5s;

    a {
        color     : $white !important;
        transition: all 0.5s;
    }
}

.my-bg-black {
    background-color: rgba($color: #000000, $alpha: 0.5);
    border          : 2px solid $bg-active;
}

.video-youtube {
    margin-top: 15px;
    // padding: 15px;

    img {
        width: 100%;
    }
}

.games {
    padding: 15px;

    .item-game {
        position: relative;
        border  : 1px solid $bg-color;

        .img-banner {
            width              : 100%;
            background-position: center center;
            background-size    : cover;
            background-repeat  : no-repeat;

            ::before {
                background-color: $black;
                width           : 100%;
                height          : 100%;
                position        : absolute;
                top             : 0;
                left            : 0;
            }

            img {
                width: 100%;
            }
        }

        &:hover {

            .title {
                background-image: url('../img/bg-text.jpg');

                h3 {
                    color: $black;
                }
            }
        }

        .title {
            background-position: center center;
            background-size    : cover;
            background-repeat  : no-repeat;
            background-color   : $bg-active;

            h3 {
                text-align    : center;
                margin-bottom : 0;
                font-size     : 18px;
                padding       : 5px 0;
                font-family   : $font-k;
                color         : $bg-color;
                text-transform: uppercase;
            }

        }
    }
}

.game-item {
    img {
        transform : scale(1);
        transition: transform 0.5s;
    }
}

.game-item:hover {
    img {
        -webkit-box-shadow: 0px 0px 10px 0px $bg-color;
        box-shadow        : 0px 0px 10px 0px $bg-color;
        transform         : scale(1.05);
        transition        : all 0.5s;
    }
}

.img-hover-zoom--quick-zoom {
    img {
        transform: scale(1);
        transition         : transform .5s ease;
    }
}

/* The Transformation */
.img-hover-zoom--quick-zoom:hover {
    img {
        transform          : scale(1.5);
    }
}

.img-item {
    overflow        : hidden;
}

.rotate-scale-up:hover {
    img {
        -webkit-animation: rotate-scale-up 1s linear both;
        animation        : rotate-scale-up 1s linear both;
    }
}

@-webkit-keyframes rotate-scale-up {
    0% {
        -webkit-transform: scale(1) rotateZ(0);
        transform        : scale(1) rotateZ(0);
    }

    50% {
        -webkit-transform: scale(1.2) rotateZ(180deg);
        transform        : scale(1.2) rotateZ(180deg);
    }

    100% {
        -webkit-transform: scale(1) rotateZ(360deg);
        transform        : scale(1) rotateZ(360deg);
    }
}

@keyframes rotate-scale-up {
    0% {
        -webkit-transform: scale(1) rotateZ(0);
        transform        : scale(1) rotateZ(0);
    }

    50% {
        -webkit-transform: scale(1.2) rotateZ(180deg);
        transform        : scale(1.2) rotateZ(180deg);
    }

    100% {
        -webkit-transform: scale(1) rotateZ(360deg);
        transform        : scale(1) rotateZ(360deg);
    }
}

.s-desc {
    margin          : 50px 0;
    background-color: $bg-color;
    border          : 2px solid $bg-active;
    padding         : 15px;

    h1 {
        font-size     : 20px;
        color         : $bg-active;
        font-family   : $font-k;
        font-weight   : bold;
        text-transform: uppercase;
    }

}

.angry-animate {
    -webkit-animation: change-color 3s ease 1s infinite normal;
    -moz-animation   : change-color 3s ease 1s infinite normal;
    -ms-animation    : change-color 3s ease 1s infinite normal;
    animation        : change-color 3s ease 1s infinite normal;
}

@-webkit-keyframes change-color {
    0% {
        color: $success;
    }

    50% {
        color: $primary;
    }

    100% {
        color: $bg-active;
    }
}

@keyframes change-color {
    0% {
        color: $success;
    }

    50% {
        color: $primary;
    }

    100% {
        color: $bg-active;
    }
}

.casino-game {
    margin            : 50px 0;
    -webkit-box-shadow: inset 0px 0px 18px -2px #ec9a0a80;
    box-shadow        : inset 0px 0px 18px -2px #ec9a0a80;

    h1 {
        padding            : 5px;
        font-size          : 20px;
        font-family        : $font-k;
        // background-color: $bg-header;
        // background-image: linear-gradient(180deg, #CE6D1F 0%, #C09D0B 100%);
        background-image   : linear-gradient(180deg, #782684 0%, #C09D0B 100%);
        // color: $bg-active;
        color              : $white;
        border-left        : 5px solid $bg-active;
    }

    .list-item {
        padding: 15px;

        .col-6:hover {
            h3 {
                background-color: $bg-color;
                transition      : all 0.5s;
            }
        }
    }

    .game-name {
        h3 {
            text-align      : center;
            color           : $white;
            padding         : 10px 0;
            font-size       : 14px;
            margin-bottom   : 0;
            text-transform  : uppercase;
            background-color: $bg-active;
            border-radius   : 0 0 10px 10px;
        }
    }
}

.footer {
    background-color      : $bg-active;
    width                 : 100%;
    border-top            : 2px solid $bg-color;
    // background-image: url('../img/bg-footer3.jpg');
    // background-position: center;
    // background-size: cover;

    .footer-body {
        padding            : 50px 0;
        // background-color: rgba($color: #000000, $alpha: 0.7);

        .footer-desc {
            .col-12 {
                border   : 1px dashed $bg-color;
                // margin: 2px;
                padding  : 10px;
            }
        }

        .list-casino {
            margin-top    : 15px;
            border-bottom : 2px solid $bg-color;
            padding-bottom: 5px;

            img {
                height: 26px;
            }
        }

        .payment-method {
            margin: 20px 0 0;

            .row {
                div {
                    align-self: center;
                    text-align: center;
                }
            }

            img {
                height: 80px;
            }
        }
    }

    h4 {
        color      : $bg-color;
        font-size  : 18px;
        font-weight: bold;
    }

    p {
        color    : $white;
        font-size: 14px;
    }

    .footer-bottom {
        width           : 100%;
        padding         : 15px 0;
        background-color: rgba($color: #000000, $alpha: 0.5);

        p {
            margin-bottom: 0;
            text-align   : center;
        }
    }
}

.border-red {
    border: 1px solid $bg-active;
}

.bg-cock-fight {
    background-color: $bg-active;
    padding         : 5px !important;
}

.bg-animate {
    -webkit-animation: change-bg-color 3s ease 1s infinite normal;
    -moz-animation   : change-bg-color 3s ease 1s infinite normal;
    -ms-animation    : change-bg-color 3s ease 1s infinite normal;
    animation        : change-bg-color 3s ease 1s infinite normal;
}

@-webkit-keyframes change-bg-color {
    0% {
        background-color: $success;
    }

    50% {
        background-color: $primary;
    }

    100% {
        background-color: $bg-active;
    }
}

@keyframes change-bg-color {
    0% {
        background-color: $success;
    }

    50% {
        background-color: $primary;
    }

    100% {
        background-color: $bg-active;
    }
}

.promotion {
    .content-pro {
        background-color: rgba($color: #000000, $alpha: 0.83);
        border          : 1px solid $bg-header;
        border-radius   : 0 0 10px 10px;
        border-top      : none;


        h3 {
            text-align      : center;
            color           : $white;
            padding         : 10px 0;
            font-size       : 18px;
            text-transform  : uppercase;
            background-color: $bg-active;
        }

        p {
            margin-bottom: 0;
            color        : $white;
            padding      : 5px;
        }
    }
}
.modal-content{
    background-color: $bg-active !important;

    p{
        color: $white !important;
    }
}
.font-k{
    font-family: $font-k;
}

.cock-footer {
    background-color: rgba($color: #000000, $alpha: 0.6);

    h3 {
        font-family: $font-k;
        color      : $bg-header;
    }
}

.about-us {
    padding         : 20px 0px;
    background-color: #1b041e;

    .social {
        padding: 5px;

        h1 {
            color      : $bg-header;
            text-align : center;
            font-size  : 25px;
            font-family: $font-k;
        }

        ul {
            margin : 0;
            padding: 0;

            li {
                margin: 8px 0;

                a {
                    color          : $white;
                    text-decoration: none;

                    img {
                        width: 60px;
                    }

                    span {
                        margin-left: 5px;
                    }

                    &:hover {
                        span {
                            color     : $bg-color;
                            transition: all 0.5s;
                        }
                    }
                }
            }
        }
    }

    .about-desc {
        padding: 10px;

        .logo {
            max-width: 200px;
            margin   : auto;
        }

        p {
            color: $white;

            span {
                color         : $bg-header;
                text-transform: uppercase;
            }
        }
    }
}

.register-about-us {
    padding            : 20px 10px;
    // background-color: #1b041e;

    h1 {
        text-align : center;
        color      : $bg-header;
        font-size  : 25px;
        font-family: $font-k;
        padding    : 10px 20px;
    }

    .item {

        // background-color: rgba($color: #000000, $alpha: 0.7);
        // padding: 15px;
        h2 {
            font-size  : 16px;
            color      : $bg-header;
            font-family: $font-k;
            text-align : center;
        }

        p {
            color        : $white;
            margin-bottom: 0;
        }

        ul {
            padding: 0;
            margin : 0;

            li {
                padding  : 8px 0;
                font-size: 13px;

                i {
                    margin-right: 5px;
                }
            }
        }
    }
}

$p-l-a: 9px;

.m-mobile {
    position: fixed;
    bottom  : 0;
    left    : 0;
    width   : 100%;
    z-index : 100;

    nav {
        background-color: $bg-header;

        ul {
            margin    : 0;
            padding   : 0;
            position  : relative;
            width     : 100%;
            text-align: center;

            li {
                list-style-type    : none;
                display            : inline-block;
                // background-color: $bg-active;
                // margin-left: -5px;

                a {
                    display         : block;
                    font-size       : 9px;
                    padding         : $p-l-a;
                    font-family     : $font-k;
                    text-align      : center;
                    text-decoration : none;
                    text-transform  : uppercase;
                    background-color: $bg-header;

                    span {
                        display  : block;
                        font-size: 16px;
                    }
                }
            }

            li.active {
                background-color: $bg-header;
                border-radius   : 50px;
                position        : relative;
                top             : -20px;

                a {
                    border-radius: 50px;
                    color        : $bg-active;

                    span {
                        font-size: 20px;
                    }
                }
            }
        }
    }
}

.social-share{
    .fb-share-button{
        margin-top: -3px;
    }
    iframe{
        margin: 0 5px;
        align-self: center;
    }
}

.promotion-detail{
    @extend .social-share;
    .fb-share-button{
        margin-top: 0 !important;
    }
}