@font-face {
    font-family: 'DS-Digi';
    font-style: normal;
    font-weight: 400;
    src: local('DS-Digi'), url('https://rubin8cdn2.azureedge.net/gaas/DS-Digital/DS-DIGI.TTF') format('truetype');
}

@font-face {
    font-family: 'Titillium';
    src: url('https://rubin8cdn2.azureedge.net/gaas/Titillium/titillium-regular.woff2') format('woff2'),
    url('https://rubin8cdn2.azureedge.net/gaas/Titillium/titillium-regular.woff') format('woff'),
    url('https://rubin8cdn2.azureedge.net/gaas/Titillium/titillium-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html,
body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    font-family: 'Titillium', "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
    overflow: hidden;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-overflow-scrolling: none;
    -o-user-select: none;
    user-select: none;
    cursor: default;
    background-color: #eef;
    background: url(https://rubin8cdn2.azureedge.net/essendon/images/backgrounds/bigBackground.png) no-repeat;
    background-size: 100% 100%;
    color: #fff;
}

.wrapper {
    margin: 0 auto;
    -ms-transform-origin: center top;
    -moz-transform-origin: center top;
    -o-transform-origin: center top;
    -webkit-transform-origin: center top;
    transform-origin: center top;
    width: 640px;
    height: 960px;
    /* background-color: #fff; */
    background-size: contain;
    overflow: hidden;
    -ms-box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.5);
    -o-box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.5);
}


.inner {
    margin: 0 auto;
    -ms-transform-origin: center top;
    -moz-transform-origin: center top;
    -o-transform-origin: center top;
    -webkit-transform-origin: center top;
    transform-origin: center top;
    width: 640px;
    height: 960px;
    /* background-color: #fff; */
    background-size: contain;
    overflow: hidden;
}

.page {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    background: url(https://rubin8cdn2.azureedge.net/essendon/images/backgrounds/background-home.png) no-repeat;
    background-size: contain;
}

.gamePage,
.resultPage,
.leaderboardPage,
.homePage,
.infoPage,
.termsPage,
.statsPage {
    visibility: hidden;
}

input,
textarea {
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}

.button {
    position: absolute;
    height: 75px;
    width: 350px;
    left: 0;
    right: 0;
    margin: auto;
    cursor: pointer;
    transition: 0.3s transform;
}

.button:hover {
    transform: scale(1.1);
}

.button:active {
    box-shadow: #000 0px 0px 0px;
}

.blackout {
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    top: 0px;
    z-index: 100;
}

.loadingPage {
    background: rgba(201, 5, 39, 0.9);
    background-size: contain;
    z-index: 100;
}

.loadingPage .logo {
    background: url(https://rubin8cdn2.azureedge.net/essendon/images/logos/loading-logos.png) no-repeat;
    background-size: contain;
    width: 445px;
    height: 700px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 300px;
}

.loadingText {
    color: #fff;
    font-size: 32px;
    width: 100%;
    position: absolute;
    top: 520px;
    left: 0px;
    overflow: hidden;
    text-align: center;
    font-weight: bold;
    /* font-family: 'RockwellBold', serif; */
}

@keyframes loadingAnimation {
    0% {
        width: 250px;
    }
    100% {
        width: 325px;
    }
}

.optionsContainer {
    position: absolute;
    top: 830px;
    left: 0;
    right: 0;
    margin: auto;
    width: 500px;
}

.optionsContainer .options {
    position: absolute;
    width: 80px;
    height: 80px;
    background: url(,,/images/scoresIcon.png) no-repeat;
    background-size: contain;
    /* left: 35px; */
    /* top: 300px; */
    cursor: pointer;
    transition: all 0.2s;
}

.optionsContainer .options:hover {
    transform: scale(1.1);
}

.optionsContainer .options:active {
    transform: scale(0.95);
}

.optionsContainer .help {
    background-image: url(https://rubin8cdn2.azureedge.net/essendon/images/helpIcon.png);
    left: 45px;
}

.optionsContainer .leaderboard {
    background-image: url(https://rubin8cdn2.azureedge.net/essendon/images/scoresIcon.png);
    left: 155px;
    /* right: 0; */
    /* margin: auto; */
}

.optionsContainer .stats {
    background-image: url(https://rubin8cdn2.azureedge.net/essendon/images/statsIcon.png);
    right: 155px;
}

.optionsContainer .facebook {
    background-image: url(https://rubin8cdn2.azureedge.net/essendon/images/FB-btn.png);
    right: 45px;
}

.backButton {
    top: 800px;
    background: url(https://rubin8cdn2.azureedge.net/essendon/images/buttons/back-btn.png) no-repeat;
    background-size: contain;
}

.terms {
    position: absolute;
    width: 500px;
    height: 670px;
    background: url(https://rubin8cdn2.azureedge.net/essendon/images/blank-panel.png) no-repeat;
    background-size: contain;
    margin: auto;
    left: 0;
    right: 0;
    top: 70px;
    font-size: 14px;
}

.terms .scrollArea {
    height: 643px;
    top: 9px;
}