﻿html {
    scroll-behavior: smooth;
}


body {
    overflow-y:auto;
    background-color:#ffffff;
    font-size:1.2em;
}

.bgcolor {
    background-color: #ffffff;
}

.reversed {
    background-color: rgb(64, 64, 66);
    color:white;
}


#Content {
    min-height:20em;
}

.reversed {
    background-color:#505050;
    color:white;
}

.center {
    text-align: center;
}

.form {
    text-align: left;
}

.responsive {
    font-size: 1vw;
    margin-left: 2%;
    margin-right: 2%;
}

@media screen and (min-width:640px) {
    .responsive {
        margin-left: 4%;
        margin-right: 4%;
    }
}

@media screen and (min-width:960px) {
    .responsive {
        margin-left: 8%;
        margin-right: 8%;
    }
}

@media screen and (min-width:1500px) {
    .responsive {
        width: 1400px;
        margin-left: auto;
        margin-right: auto;
        font-size: 12px;
    }
}



header {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    background-color:black;
    height:7em;
}

header .Logo {
    display: block;
    position: absolute;
    font-size: 1.3em;
    left: 1.5em;
    top: .4em;
    width: 9.05em;
    height: 4.6em;
    background-image: url(/Shared/Images/Logo/dark.png);
    background-repeat: no-repeat;
    background-size: contain;
}


footer {
    position:relative;
    background-color:black;
    margin-top:0;
    color:white;
    height:8em;
}

footer img {
    display:block;
    position:absolute;
    left:2em;
    top:2em;
    width:10em;
    height:auto;
}

footer .Logo {
    display: block;
    position: absolute;
    font-size: 1.3em;
    left: 1.5em;
    top: .4em;
    width: 9.05em;
    height: 4.6em;
    background-image: url(/Shared/Images/Logo/dark.png);
    background-repeat: no-repeat;
    background-size: contain;
}


footer nav {
    display:inline-block;
    position:absolute;
    right:4em;
    left:auto;
    top:2em;
}

footer nav a {
    display: inline-block;
    font-size:1.2em;
    text-decoration:none;
    margin-left:2em;
}


footer nav a:hover {
    color: #ffb700;
}

.heading {
    display: block;
    position: relative;
    background-size: cover;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    z-index: 1;
    margin-bottom: 0;
}

/*.heading:after {
    content: "";
    display: block;
    left: 0;
    height: 0;
    padding-top: 45%;
}

@media only screen and (max-width: 960px) {
    .heading:after {
        padding-top: 60%;
    }
}*/

.heading.set1 {
    background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Desktop/Football_Grimace.png);
}
.heading.set2 {
    background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Desktop/Baseball_Swing.png);
}
.heading.set3 {
    background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Desktop/Basketball_Dunk.png);
}
.heading.set4 {
    background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Desktop/Basketball_Stare.png);
}
.heading.set5 {
    background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Desktop/Soccer_Kick.png);
}
.heading.set6 {
    background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Desktop/Soccer_Net.png);
}
.heading.set7 {
    background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Desktop/Hockey_Player.png);
}
.heading.set8 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Desktop/Hockey_Sprint.png); }
.heading.set9 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Desktop/Basketball_Jump.png); }
.heading.set10 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Desktop/Boxing_Spar.png); }
.heading.set11 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Desktop/Horse_Racing.png); }
.heading.set12 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Desktop/Football_Stare.png); }
.heading.set13 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Desktop/Fighter.png); }
.heading.set14 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Desktop/Football_Crouch.png); }
.heading.set15 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Desktop/Football_Snap.png); }
.heading.set16 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Desktop/Rugby_Pass.png); }
.heading.set17 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Desktop/Cricket_Player.png); }
.heading.set18 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Desktop/Cricket_Slogger.png); }
.heading.set19 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Desktop/Tennis_Serve.png); }
.heading.set20 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Desktop/Darts_Board.png); }
.heading.set21 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Desktop/Darts_Bullseye.png); }
.heading.set22 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Desktop/Snooker_Shot.png); }
.heading.set23 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Desktop/Soccer_Volley.png); }
.heading.set24 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Desktop/Tennis_Return.png); }
.heading.set25 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Desktop/Boxing_Jab.png); }

@media only screen and (max-width: 960px) {
    .heading.set1 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Mobile/Football_Grimace.png); }
    .heading.set2 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Mobile/Baseball_Swing.png); }
    .heading.set3 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Mobile/Basketball_Dunk.png); }
    .heading.set4 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Mobile/Basketball_Stare.png); }
    .heading.set5 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Mobile/Soccer_Kick.png); }
    .heading.set6 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Mobile/Soccer_Net.png); }
    .heading.set7 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Mobile/Hockey_Player.png); }
    .heading.set8 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Mobile/Hockey_Sprint.png); }
    .heading.set9 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Mobile/Basketball_Jump.png); }
    .heading.set10 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Mobile/Boxing_Spar.png); }
    .heading.set11 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Mobile/Horse_Racing.png); }
    .heading.set12 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Mobile/Football_Stare.png); }
    .heading.set13 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Mobile/Fighter.png); }
    .heading.set14 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Mobile/Football_Crouch.png); }
    .heading.set15 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Mobile/Football_Snap.png); }
    .heading.set16 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Mobile/Rugby_Pass.png); }
    .heading.set17 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Mobile/Cricket_Player.png); }
    .heading.set18 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Mobile/Cricket_Slogger.png); }
    .heading.set19 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Mobile/Tennis_Serve.png); }
    .heading.set20 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Mobile/Darts_Board.png); }
    .heading.set21 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Mobile/Darts_Bullseye.png); }
    .heading.set22 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Mobile/Snooker_Shot.png); }
    .heading.set23 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Mobile/Soccer_Volley.png); }
    .heading.set24 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Mobile/Tennis_Return.png); }
    .heading.set25 { background-image: linear-gradient(90deg,rgba(0,1,12,0.82) 0%,rgba(14,40,75,0) 100%),url(/Shared/Images/Headers/Mobile/Boxing_Jab.png); }
}

.heading .copy {
    display: block;
    font-size: 5vw;
    top: .2em;
    left: 36px;
    color: white;
    margin: auto;
    width: 80%;
}

.heading h1 {
    display: block;
    position: relative;
    margin: 0;
    margin-top: .3em;
    font-size: 3.6em;
    line-height: 1.1;
    color: white;
    text-shadow: 0 0 .07em rgba(0,0,0,.5), 0 0 1px rgba(0,0,0,.9);
}

.heading h2 {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    font-size: 2.8em;
    line-height: 1.4;
    color: white;
    text-shadow: 0 0 1px black;
}

.heading h2:last-of-type {
    color: #fec10c;
}

.heading hr {
    display: block;
    position: relative;
    color: white;
    padding: 0;
    margin-top: .5vw;
    margin-bottom: 1.5vw;
    border: none;
    color: white;
    position: relative;
    height: 20px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22none%22%20stroke%3D%22%23eaeaea%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
    background-repeat: no-repeat;
    background-position: 50% 50%
}

.heading hr::after, .heading hr::before {
    content: "";
    position: absolute;
    top: 50%;
    max-width: calc(50% - (50px / 2));
    border-bottom: 1px solid rgba(255,255,255,0.5);
}

.heading hr::before {
    right: calc(50% + (50px / 2));
    width: 100%
}

.heading hr::after {
    left: calc(50% + (50px / 2));
    width: 100%
}

.heading .Bonus {
    font-size: .3em;
    width: 25em;
    color: black;
    background-color: #ffd101;
    background: linear-gradient(to bottom, #ffd101, #fcb116);
    position: absolute;
    text-align: center;
    border-radius: .2em;
    top: -0.6em;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.heading .Bonus a {
    font-weight:bold;
    text-decoration:none;
}



@media only screen and (max-width: 960px) {
    .heading .copy {
        left: 20px;
        font-size: 6vw;
        top: 4vw;
    }
}

.choices {
    display: inline-block;
    position: relative;
    width: 100%;
    max-width: 1300px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: -18vw;
    top: 0;
    bottom: auto;
    text-align: center;
    z-index: 2;
}


.choices div {
    display: inline-block;
    position: relative;
    width: 23%;
    margin-left:4%;
    margin-right:4%;
    height: auto;
    background-image: url(/Shared/Images/Headers/choice1.png);
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.choices div:before {
    content:"";
    display: block;
    width:1px;
    height:0;
    padding-top:150%;
}

.choices div.join {
    background-image: url(/Shared/Images/Headers/choice1.png);
}

.choices div.choose {
    background-image: url(/Shared/Images/Headers/choice2.png);
}

.choices div.win {
    background-image: url(/Shared/Images/Headers/choice3.png);
}

@media only screen and (max-width: 960px) {

}


h2.section, section h2 {
    position: relative;
    display: inline-block;
    font-size: 2.8em;
    line-height: 1.2;
    color: #404042;
    text-transform: uppercase;
}

.reversed h2, .reversed h2 {
    color:white;
}

section.reversed {
    padding: 2%;
}

h2.section.reversed, section.reversed h2 {
    color: white;
}

h2.section:after {
    content: "";
    position: absolute;
    left: 100%;
    margin-left: .4em;
    top: 1em;
    width: 3.5em;
    border-bottom: .15em solid #404042;
}

.reversed h2.section:after {
    border-bottom: .15em solid white;
}

@media only screen and (max-width: 960px) {
    h2.section {
        font-size: 5vw;
        margin-top: 1em;
    }
}

section.games {
    position: relative;
    display: block;
    text-align: center;
    vertical-align: top;
    color: #3d3d3d;
}

section.games a {
    position: relative;
    display: inline-block;
    font-size: 1.6em;
    width: 80%;
    margin-right: 1.5%;
    margin-left: 1.5%;
    margin-bottom: 3%;
    border-radius: 1.2em;
    border: 3px solid rgba(0,0,0,.05);
    vertical-align: top;
    text-decoration: none;
    box-sizing: border-box;
    text-align: left;
    min-height: 75em;
    overflow:hidden;
}


section.games img {
    width: 100%;
    height: auto;
}

section.games h2 {
    position: relative;
    font-size: 4em;
    color: #404042;
    text-align: left;
    padding-left: 1.2em;
}

section.games h2:after {
    content: "";
    display: block;
    position: absolute;
    left: .5em;
    top: .4em;
    bottom: .2em;
    width: .25em;
    background-color: rgb(153, 153, 153);
}

section.games h3 {
    font-size: 1.9em;
    color: #404042;
    text-align: left;
    padding-left: 1.0em;
}

section.games h4 {
    font-size: 1.6em;
    color: #999;
    text-align: left;
    padding-left: 1.2em;
}

section.games p {
    font-size: 1.6em;
    text-align: left;
    padding-left: 1.2em;
    padding-right: 1em;
}

section.games ul {
    font-size: 1.6em;
    text-align: left;
    padding-left: 3em;
    padding-right: 1em;
}

section.games .playnow {
    display: inline-block;
    position: absolute;
    font-size: 1.6em;
    color:black;
    font-weight:bold;
    padding-left: 2em;
    padding-right: 2em;
    padding-top: .6em;
    padding-bottom: .6em;
    border: 1px solid black;
    border-radius: .3em;
    left: 1.2em;
    top: auto;
    bottom: 1em;
    background-color: #fec10c;
    cursor: pointer;
}

section.games .playnow:hover {
    background-color: #f19b13;
    color: white;
}

section.games .playnow.disabled {
    color: black;
    background-color: #a0a0a0;
    cursor:default;
}

section.games .playnow.disabled:hover {
    background-color: #a0a0a0;
    color: black;
}


@media screen and (min-width:640px) {
    section.games a {
        font-size: 1em;
        width: 45%;
        min-height: 70em;
    }
}

@media screen and (min-width:960px) {
    section.games a {
        font-size: .8em;
        width: 45%;
        min-height: 75em;
    }
}

@media screen and (min-width:1500px) {
    section.games a {
        min-height: 80em;
    }
}


section.live {
    min-height: 10em;
}


header nav {
    display: block;
    position: absolute;
    width: auto;
    top: 1.3em;
    vertical-align: middle;
    left: auto;
    right: 2em;
    z-index: 3;
}

header nav .Top {
    display: inline-block;
    position: relative;
    width: auto;
    margin-left: 0;
    margin-right: 1.5em;
    padding-left: 0;
    padding-right: 0;
    color: white;
    background-color: transparent;
    text-align: center;
    vertical-align: top;
    line-height: 4;
    cursor: pointer;
    font-size: 1.0em;
    text-decoration: none;
    border-radius: .2em;
    vertical-align: middle;
    border: .15em solid transparent;
    border-radius: .6em;
}

header nav a.Top:hover {
    color: #ffb700;
}

header nav a.Top:before {
    content: '';
    display: block;
    position: absolute;
    z-index: 1;
    bottom: 1em;
    width: 0%;
    height: 1px;
    background-color: #ffb700;
    transition: width .2s;
    left: 0;
    right: auto;
}

header nav a.Top:hover:before {
    width: 100%;
}

header nav a.Top.Selected {
    color: #ffdb7c;
}

header nav a.Top.Selected:before {
    width: 100%;
    background-color: #ffdb7c;
}

    header nav a.Top:active {
        color: #ff0303;
    }

        header nav a.Top:active:before {
            background-color: #ff0303;
        }

    header nav a.Top:hover svg {
        fill: white;
    }

    header nav span {
        display: inline-block;
        position: relative;
        line-height: 1.8;
        font-size: 1.4em;
        vertical-align: middle;
        margin-left: .1em;
        margin-right: .1em;
        color: #3674ac;
    }

    header nav .dropdown {
        display: inline-block;
        position: relative;
    }

header nav .dropdown ul {
    display: none;
    position: absolute;
    padding: 0;
    margin: 0;
    top: 4em;
    left: -1em;
    width: 12em;
    background-color: white;
    list-style-type: none;
    z-index: 4;
    color: black;
    border: 1px solid #ffb700;
}

header nav .dropdown:hover ul {
    display: inline-block;
}

header nav .dropdown:hover ul li {
    padding: 0;
    margin: 0;
}

header nav .dropdown:hover ul li a {
    display: block;
    padding-left: 1em;
    padding-right: 1em;
    line-height: 2.5em;
    cursor: pointer;
    text-decoration: none;
    color: black;
}

header nav .dropdown:hover ul li:hover {
    background-color: black;
}

header nav .dropdown:hover ul li:hover a {
    color: #ffb700;
    text-decoration: none;
}


@media only screen and (max-width: 960px) {
    header {
        height: 4.5em;
    }
    header .Logo, footer .Logo {
        font-size: .83em;
    }
    footer nav {
        font-size: 1.8vw;
    }
    header nav {
        font-size: 1.8vw;
        right: 1.5em;
        top: 20px;
    }
}

