/*

  HTML CSS

*/

body {
    margin: 0;
    padding: 0;
    background-color: #272727;
}

@media screen and (min-width: 1200px) {
    .col-lg-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 20% !important;
        max-width: 20% !important;
    }
    .main {
        min-height: 768px;
    }
    .lobby_roulettes {
        max-width: 80% !important;
    }
}
/*

Clases CSS

*/

.gray {
    background-color: darkgray;
}

.green {
    background-color: #23640f;
}

.blue {
    background-color: #013788;
}

.yellow {
    background-color: #838102;
}
.background {
    -webkit-box-shadow: inset -1px -1px 50px 0px #000000; 
    box-shadow: inset -1px -1px 999px 0px #000000;
}
.bgshape {
    background-position: top !important;
    background-size: cover !important;
    background-image: url('/assets/template/lobby/casinov2/img/background_01.jpg');
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    height: 100vh;
}

.casino {
    width: 20vw;
    height: 7vw;
    padding-top: 2vw;
    margin-right: auto;
    margin-left: auto;
}

.casino_p {
    position: relative;
    z-index: 10;
}

.envivo {
    margin-right: auto;
    margin-left: auto;
    display: block;
    position: relative;
    width: 9vw;
    height: 8vw;
    top: -1.5vw;
    z-index: 10;
    animation: envivofloat 1s linear infinite;
    animation-direction: alternate;
}

.lobby_roulettes {
    display: flex;
    justify-content: center;
    margin-top: 4vw;
    filter: drop-shadow(0 0 0.75rem black);
    z-index: 999;
}

.coins {
    border: 1px solid #FFF;
    position: absolute;
}

.lc,
.rc {
    width: 8vw;
    position: absolute;
    top: -7vw;
}

.lc {
    left: -4.4vw;
}

.rc {
    transform: scaleX(-1);
    left: 16.2vw;
}

.lobby_roulettes .img-fluid:hover {
    max-width: 100%;
    height: auto;
}
.lobby_roulettes .img-fluid{
    max-width: 100%;
    height: auto;
    border-radius: 20px;
}

.fixpos {
    margin-top: 9vw;
    width: 100%;
    height: 70%;
    display: block;
    position: relative;
    z-index: 100;
}

.lobby_roulettes>div {
    margin-bottom:20px;
    filter: brightness(0.8);
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.lobby_roulettes>div:hover {
    filter: brightness(1);
    -webkit-filter: brightness(1);
    transform: translate(0, -0.5vw);
    -webkit-transform: translate(0, -0.5vw);
    -moz-transform: translate(0, -0.5vw);
    -ms-transform: translate(0, -0.5vw);
    -o-transform: translate(0, -0.5vw);
}

.lights {
    display: block;
    position: relative;
    top: 0vw;
    left: 0vw;
    z-index: 12;
    mix-blend-mode: screen;
}

.bgshine {
    width: 11vw;
    height: 12vw;
    left: 44vw;
    top: 12vw;
    position: absolute;
    mix-blend-mode: screen;
    z-index: 0;
    transform: rotate(10deg);
}

.shinerot {
    opacity: 0.2;
    transform: rotate(360deg);
    animation: rotation 3s linear infinite;
}

.lbshine {
    left: -1.62vw;
    top: -0.18vw;
    display: block;
    position: absolute;
    background-size: contain;
    background-position: center center;
    width: 6vw;
    height: 6vw;
    animation: casinolights steps(1);
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    background-image: url('/assets/template/lobby/casinov2/img/lightbulbshine.png');
}

.ls1 {
    animation-delay: 0.2s
}

.ls2 {
    animation-delay: 0.4s
}

.ls3 {
    animation-delay: 0.6s
}

.ls4 {
    animation-delay: 0.8s
}

.ls5 {
    animation-delay: 1s
}

.ls6 {
    animation-delay: 1.2s
}

.ls7 {
    animation-delay: 1.4s
}

.ls8 {
    animation-delay: 1.6s
}

.ls9 {
    animation-delay: 1.8s
}

.ls10 {
    animation-delay: 2s
}

.ls11 {
    animation-delay: 2.2s
}

.ls12 {
    animation-delay: 2.4s
}

.ls13 {
    animation-delay: 2.6s
}

.ls14 {
    animation-delay: 2.8s
}

.background {
    width: 100%;
    height: 100%;
}


/*

animation Stage

*/

@keyframes envivofloat {
    from {
        transform: translate(0, 0.1vw);
        -webkit-transform: translate(0, 0.1vw);
        -moz-transform: translate(0, 0.1vw);
        -ms-transform: translate(0, 0.1vw);
        -o-transform: translate(0, 0.1vw);
    }
    to {
        transform: translate(0, -0.1vw);
        -webkit-transform: translate(0, -0.1vw);
        -moz-transform: translate(0, -0.1vw);
        -ms-transform: translate(0, -0.1vw);
        -o-transform: translate(0, -0.1vw);
    }
}

@keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes casinolights {
    0% {
        left: -1.2vw;
        top: -0.9vw;
    }
    2% {
        left: -0.2vw;
        top: -0.9vw;
    }
    4% {
        left: 0.65vw;
        top: -1vw;
    }
    6% {
        left: 1.6vw;
        top: -1.1vw;
    }
    8% {
        left: 2.4vw;
        top: -1.2vw;
    }
    10% {
        left: 3.35vw;
        top: -1.3vw;
    }
    12% {
        left: 4.3vw;
        top: -1.38vw;
    }
    14% {
        left: 5.18vw;
        top: -1.48vw;
    }
    16% {
        left: 6.1vw;
        top: -1.55vw;
    }
    18% {
        left: 7vw;
        top: -1.55vw;
    }
    20% {
        left: 7.9vw;
        top: -1.53vw;
    }
    22% {
        left: 8.75vw;
        top: -1.51vw;
    }
    24% {
        left: 9.65vw;
        top: -1.46vw;
    }
    26% {
        left: 10.54vw;
        top: -1.43vw;
    }
    28% {
        left: 11.46vw;
        top: -1.38vw;
    }
    30% {
        left: 12.37vw;
        top: -1.24vw;
    }
    32% {
        left: 13.26vw;
        top: -1.21vw;
    }
    34% {
        left: 14.23vw;
        top: -1.1vw;
    }
    36% {
        left: 15.1vw;
        top: -0.9vw;
    }
    38% {
        left: 15.6vw;
        top: -0.15vw;
    }
    40% {
        left: 15.52vw;
        top: 0.58vw;
    }
    42% {
        left: 15.4vw;
        top: 1.4vw;
    }
    44% {
        left: 15.25vw;
        top: 2.17vw;
    }
    46% {
        left: 15.13vw;
        top: 2.95vw;
    }
    48% {
        left: 15vw;
        top: 3.75vw;
    }
    50% {
        left: 14.65vw;
        top: 4.55vw;
    }
    52% {
        left: 13.77vw;
        top: 4.57vw;
    }
    54% {
        left: 12.96vw;
        top: 4.46vw;
    }
    56% {
        left: 12.1vw;
        top: 4.36vw;
    }
    58% {
        left: 11.24vw;
        top: 4.3vw;
    }
    60% {
        left: 10.39vw;
        top: 4.24vw;
    }
    62% {
        left: 9.52vw;
        top: 4.21vw;
    }
    64% {
        left: 8.65vw;
        top: 4.21vw;
    }
    66% {
        left: 7.85vw;
        top: 4.20vw;
    }
    68% {
        left: 6.98vw;
        top: 4.20vw;
    }
    70% {
        left: 6.1vw;
        top: 4.15vw;
    }
    72% {
        left: 5.23vw;
        top: 4.17vw;
    }
    74% {
        left: 4.35vw;
        top: 4.18vw;
    }
    76% {
        left: 3.54vw;
        top: 4.24vw;
    }
    78% {
        left: 2.66vw;
        top: 4.31vw;
    }
    80% {
        left: 1.84vw;
        top: 4.36vw;
    }
    82% {
        left: 0.94vw;
        top: 4.46vw;
    }
    84% {
        left: 0.15vw;
        top: 4.58vw;
    }
    86% {
        left: -0.71vw;
        top: 4.52vw;
    }
    88% {
        left: -1.1vw;
        top: 3.76vw;
    }
    90% {
        left: -1.23vw;
        top: 2.93vw;
    }
    92% {
        left: -1.28vw;
        top: 2.18vw;
    }
    94% {
        left: -1.45vw;
        top: 1.35vw;
    }
    96% {
        left: -1.52vw;
        top: 0.58vw;
    }
    98% {
        left: -1.62vw;
        top: -0.18vw;
    }
    /* last one */
    100% {
        left: -1.2vw;
        top: -0.9vw;
    }
}