@import "/css/fontawesome-all.min.css";
@import "/css/normalize.css";

*, :after, :before {
    box-sizing: border-box
}

body {
    text-align: center
}

.main {
    padding-bottom: 1em;
    font-family: helvetica, arial, sans-serif;
    font-size: 14px
}

img.responsive {
    margin: 0 auto;
    max-width: 98%;
    height: auto
}

ul {
    list-style: none;
    margin: 0;
    padding: 0
}

nav {
    padding-bottom: 1em;
    font-weight: 700
}

.logo-default, ul.menu {
    display: none
}

ul.menu li, .drop-menu-toggle {
    overflow: hidden;
    background: #c5b0d5;
    background: -moz-linear-gradient(top, #c5b0d5 0%, #c5b0d5 3%, #976fb2 5%, #571d70 27%, #32143f 45%, #694c76 61%, #392942 100%);
    background: -webkit-linear-gradient(top, #c5b0d5 0%, #c5b0d5 3%, #976fb2 5%, #571d70 27%, #32143f 45%, #694c76 61%, #392942 100%);
    background: linear-gradient(to bottom, #c5b0d5 0%, #c5b0d5 3%, #976fb2 5%, #571d70 27%, #32143f 45%, #694c76 61%, #392942 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c5b0d5', endColorstr='#392942', GradientType=0)
}

ul.menu a, .drop-menu-toggle {
    padding: 0.5em 0;
    color: #fff;
    display: block;
    text-decoration: none
}

hr {
    width: 90%;
    margin: 0.5em auto;
    padding: 0;
    color: #222
}

.games-wrapper {
    margin: 1em 0
}

/*
.game-selector ul {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
}

.game-selector li {
 flex: 0 1 auto
}
*/

.game-selector-arrow {
    display: none
}

.game-selector img {
    border: 2px solid transparent
}

.game-selector img.selected {
    border: 2px solid red
}

footer {
    padding-top: 1em
}

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

    .grid {
        display: grid;
        display: -ms-grid;
        grid-template-columns: 1fr 970px 1fr;
        -ms-grid-columns: 1fr 970px 1fr
    }

    .grid > div.content {
        grid-column: 2/3;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1
    }

    #menu-toggle,
    .logo-mobile {
        display: none
    }

    .content {
        position: relative
    }

    .logo-default {
        display: inline-block
    }

    nav {
        position: absolute;
        top: 5px;
        right: 0;
        display: flex;
        z-index: 180
    }

    ul.menu {
        display: flex;
    }

    ul.menu li {
        padding: 30px 0 0;
        background: url('/images/vgt/btn-bg.png') repeat-x;
    }

    ul.menu li.menu-div {
        width: 3px;
        background: url('/images/vgt/btn-div.png') no-repeat
    }

    ul.menu li.games-drop-down {
        width: 145px;
    }

    ul.menu a {
        display: block;
        padding: 12px 1em;
        background: transparent
    }

    ul.menu a#games-toggle {
        cursor: pointer;
    }

    ul.menu ul {
        display: none;
        margin-top: 3px;
        border: 1px solid #dedede;
    }

    ul.menu ul li {
        height: 40px;
        padding: 0;
        background-position: center center;
    }

    ul.menu ul li.games-drop-down {
        border: 1px solid red
    }

    .cabinet {
        position: absolute;
        top: 5px;
        left: 50px;
        z-index: 55
    }

    .mid-wrapper {
        margin-top: 115px;
        height: 565px;
        background: url('/images/vgt/vgt_bg.jpg') no-repeat center center;
        background-size: cover
    }

    .bubble-wrapper {
        padding-top: 1em
    }

    .bubble {
        margin-left: 340px;
        width: 620px;
        height: 405px;
        background: url('/images/vgt/jade-bubble.jpg') no-repeat top left;
        background-size: cover
    }

    #logo-wrapper {
        position:absolute;
        top:115px;
        left:0;
        width:100%;
        text-align:left;
        z-index:105;
    }
    #logo {
        width:1140px;
        min-width:755px;
        margin:0 auto;
    }
    #logo img {
        margin-left:425px;
    }

    #text1-wrapper {
        position:absolute;
        top:270px;
        left:0;
        width:100%;
        text-align:left;
        z-index:105;
    }
    #text1 {
        width:1140px;
        min-width:755px;
        margin:0 auto;
    }
    #text1 img {
        margin-left:435px;
    }

    #dragon-wrapper {
        position:absolute;
        top:110px;
        left:0;
        width:100%;
        text-align:left;
        z-index:104;
    }
    #dragon {
        width:1140px;
        min-width:755px;
        margin:0 auto;
    }
    #dragon img {
        margin-left:640px;
    }

    #text2-wrapper {
        position:absolute;
        top:335px;
        left:0;
        width:100%;
        text-align:left;
        z-index:105;
    }
    #text2 {
        width:1140px;
        min-width:755px;
        margin:0 auto;
    }
    #text2 img {
        margin-left:430px;
    }

    #expanding-wild-wrapper {
        position:absolute;
        top:385px;
        left:0;
        width:100%;
        text-align:left;
        z-index:105;
    }
    #expanding-wild {
        width:1140px;
        min-width:755px;
        margin:0 auto;
    }
    #expanding-wild img {
        margin-left:450px;
    }

    #teacup-wrapper {
        position:absolute;
        top:215px;
        left:0;
        width:100%;
        text-align:left;
        z-index:105;
    }
    #teacup {
        width:1140px;
        min-width:755px;
        margin:0 auto;
    }
    #teacup img {
        margin-left:800px;
    }

    #freespin-wrapper {
        position:absolute;
        top:385px;
        left:0;
        width:100%;
        text-align:left;
        z-index:105;
    }
    #freespin {
        width:1140px;
        min-width:755px;
        margin:0 auto;
    }
    #freespin img {
        margin-left:790px;
    }

    .game-selector ul {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
    }

    .game-selector li {
        flex: 0 1 auto
    }

    .game-selector-wrapper {
        float: right;
        margin-top: 1em;
        margin-right: 0.5em
    }

    .game-selector > ul > li {
        padding: 0 3px
    }

    .game-selector > ul > li:nth-child(2) {
        height: 130px;
        background: transparent url('/images/vgt/selector-bg.png') no-repeat top left;
        background-size: cover
    }

    .game-selector-arrow {
        display: block;
        padding: 1.8em 0 0 0
    }

    .games {
        margin-top: 0.5em
    }

    footer {
        text-align: center
    }

    footer ul {
        list-style: none;
    }

    footer li {
        display: inline;
        padding-left: 1em;
        font-size: 0.8em;
        color: #555;
        font-weight: 700
    }

    #mobile {
        display: none
    }

}

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

    .grid {
        display: grid;
        display: -ms-grid;
        grid-template-columns: 1fr 1140px 1fr;
        -ms-grid-columns: 1fr 1140px 1fr
    }

    .menu > li:nth-child(8),
    .menu > li:nth-child(10) {
        width: 120px
    }

    .poker-logo-wrapper {
        left: 500px
    }

    .bubble {
        margin-left: 410px;
        width: 670px;
        height: 407px;
        background: url('/images/vgt/jade-bubble.jpg') no-repeat top left;
        background-size: cover
    }

    .screens-wrapper {
        width: 720px;
        left: 380px
    }

    .game-selector-wrapper {
        margin-right: 3.2em
    }

    .games li {
        padding: 0.1em 0.5em;
    }

    .game-selector > ul > li:nth-child(2) {
        width: 660px
    }

}