/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

@import url('fonts/fonts.css');


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {

	font-family: inherit;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
       
        -webkit-text-size-adjust: none;
        -webkit-appearance: none;
        
        
}
:focus {/* remember to define focus styles! */
	outline: 0;
}

input,textarea
{
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    -webkit-appearance: none;
    border-radius: 0;
    margin: 0;
    
/*    -webkit-user-select: none;
     -moz-user-select: -moz-none;
      -ms-user-select: none;
          user-select: none;*/
}

img{border:0}

/* WYSIWYG DEFAULTS*/


.clear
{
    display: block;
    clear:both;
}


.entry-content img {
margin: 0 0 1.5em 0;
}
.alignleft, img.alignleft {
margin-right: 1.5em;
display: inline;
float: left;
}
.alignright, img.alignright {
margin-left: 1.5em;
display: inline;
float: right;
}
.aligncenter, img.aligncenter {
margin-right: auto;
margin-left: auto;
display: block;
clear: both;
}
.alignnone, img.alignnone {
/* not sure about this one */
}
.wp-caption {
margin-bottom: 1.5em;
text-align: center;
padding-top: 5px;
}
.wp-caption img {
border: 0 none;
padding: 0;
margin: 0;
}
.wp-caption p.wp-caption-text {
line-height: 1.5;
font-size: 10px;
margin: 0;
}
.wp-smiley {
margin: 0 !important;
max-height: 1em;
}
blockquote.left {
margin-right: 20px;
text-align: right;
margin-left: 0;
width: 33%;
float: left;
}
blockquote.right {
margin-left: 20px;
text-align: left;
margin-right: 0;
width: 33%;
float: right;
}
.gallery dl {}
.gallery dt {}
.gallery dd {}
.gallery dl a {}
.gallery dl img {}
.gallery-caption {}
.size-full {}
.size-large {}
.size-medium {}
.size-thumbnail {}


/*END WYSIWYG DEFAULTS*/
#wpadminbar
{
    position: fixed!important;
}
html,body
{
    position: relative;
    max-width: 100%;
    overflow-x: hidden;
    background: black;
}
html
{
 
}
body
{
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-user-select: none;
     -moz-user-select: -moz-none;
      -ms-user-select: none;
          user-select: none;
    
          
    font-family: "HeroicWeb",Arial, Helvetica ,sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    color: white;
    line-height: 1.25;
    letter-spacing: 0.075em;
}
h1,h2,h3,h4,h5,h6
{
    font-weight: normal;
    margin-bottom: 25px;
}
p,ul,ol
{
    margin-bottom: 25px;
}
strong
{
    font-weight: bold;
}
em
{
    font-style: italic;
}
a
{
    
}
#app-body
{
    background: black;
    position: fixed;
    width: 100%;
    height: 100%;
}
#app-frame
{
    position: absolute;
    background: white;
    background-size: cover;
    overflow: hidden;
    
    background: #091424 url(img/screen-intro.jpg) no-repeat center center;
    background-size: cover;
}
.screen
{
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #091424;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /*display: none;*/
    
    height: 1px;
    opacity: 0.01;
    z-index: 10;
    
    transition: opacity 0.01s 0.5s, height 0.01s 1s;
    /*display: none;*/
}
.screen.screen-showing
{
    height: 100%;
    opacity: 1;
    z-index: 11;
    transition: opacity 0.333s 0s, height 0s 0s;
}
.screen.screen-locked:after
{
    content:"";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    z-index: 99999;
}
.screen.screen-showing.screen-no-logout
{
    z-index: 15;
}

#screen-rep-login
{
    background-image: url(img/screen-rep-login.jpg);
}
#version-label
{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2.75%;
    text-align: center;
    color: #8f98a3;
    font-size: 0.85em;
}
.text-field
{
    letter-spacing: inherit;
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    line-height: inherit;
    text-align: center;
    font-size: 1.1em;
    border: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    background: transparent;
    box-sizing: border-box;
}
.text-field::-webkit-input-placeholder {
   color: white;
}
#rep-login-text
{
    left: 28%;
    top: 53%;
    height: 4.5%;
    width: 44%;
    text-transform: uppercase;
}
#rep-login-button
{
    cursor: pointer;
    position: absolute;
    display: block;
    top: 60%;
    left: 26%;
    width: 48%;
    height: 7%;
}
#sync-button
{
    cursor: pointer;
    position: absolute;
    display: block;
    top: 73.25%;
    left: 26%;
    width: 48%;
    height: 7%;
}
#screen-outlet-login
{
    background-image: url(img/screen-outlet-login.jpg?v=2);
}
#outlet-login-search-text
{
    top: 21%;
    left: 28%;
    height: 4.25%;
    width: 44%;
}
#outlet-login-search-results
{
    position: absolute;
    top: 28.6%;
    bottom: 36.25%;
    left: 27.2%;
    right: 27.2%;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.outlet-result
{
    display: block;
    padding: 1em 0.5em;
    margin: auto;
    /*border-bottom: 1px solid #f8f8f8;*/
    text-align: center;
    color: white;
    cursor: pointer;
    background: rgba(255,255,255,0.1);
    margin-bottom: 1px;
}
.outlet-result.outlet-result-selected
{
    background: rgba(255,255,255,0.25);
}
.outlet-result.outlet-ticked:before
{
    content: "";
    display: inline-block;
    background: url(img/tick.png) no-repeat center center;
    background-size: contain;
    height: 18px;
    width: 20px;
    vertical-align: top;
    margin-right: 10px;
}
.button
{
    position: absolute;
    display: block;
    cursor: pointer;
}
.button:after
{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    opacity: 0;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.75) 0%,rgba(255,255,255,0) 45%); 
    transition: opacity 0.5s;
}
.button:active:after
{
    opacity: 1;
    transition: none;
}
#button-x,
.button-main-menu
{
    right: 4%;
    top: 5%;
    width: 5%;
    height: 4%;
    background: transparent url(img/btn-x.png) no-repeat center center;
    background-size: auto 28%;
    z-index: 14;
    color: #9e8637;
    /*padding-right: 3%;*/
    font-size: 0.75em;
    text-transform: uppercase;
    text-align: right;
    line-height: 3.1;
    display: none;
}
#button-x span,
.button-main-menu span
{
    position: absolute;
    display: block;
    right: 100%;
}
.button-main-menu
{
    display: block;
}
.button-main-menu.button-main-menu-white
{
    background-image: url(img/btn-x-white.png);
    color: white;
}
#login-info.login-info-white
{
    color: white;
}
#button-outlet-login-previous
{
    height: 5.5%;
    width: 23%;
    left: 27%;
    top: 66%;
}
#button-outlet-login-continue
{
    height: 5.5%;
    width: 23%;
    right: 27%;
    top: 66%;
}
#screen-popup
{
    z-index: 30;
    background-color: transparent;
    background-image: url(img/screen-popup.png);
    opacity: 0.01;
    transition: opacity 0.5s 0s, height 0.01s 0.5s;
}
#screen-popup.popup-showing
{
    height: 100%;
    opacity: 1;
    transition: opacity 0.5s 0s, height 0s 0s;
}
#button-popup-okay,
#button-menu-continue,
#button-menu-quit
{
    top: 56%;
    left: 36.5%;
    height: 6.75%;
    width: 27.25%;
}
#button-menu-continue
{
    left: auto;
    right: 50%;
}
#button-menu-quit
{
    left: 50%;
}
#screen-popup-heading
{
    position: absolute;
    left: 25%;
    right: 25%;
    top: 36%;
    height: 5%;
    color: #454545;
    font-family: Serif12BetaWeb,serif;
    font-size: 2em;
    font-weight: bold;
    text-transform: uppercase;
    color: #9e8637;
    text-align: center;
}
#screen-popup-message-wrap
{
    display: table;
    position: absolute;
    left: 25%;
    width: 50%;
    top: 41%;
    height: 13%;
    color: #454545;
    text-align: center;
}
#screen-popup-message
{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 1.15em;
}
#screen-quit
{
    z-index: 20;
    background: transparent url(img/screen-quit.png) no-repeat center center;
    background-size: cover;
    opacity: 0.01;
    transition: opacity 0.5s 0s, height 0.01s 0.5s;
}
#screen-quit.quit-showing
{
    height: 100%;
    opacity: 1;
    transition: opacity 0.5s 0s, height 0s 0s;
}
#login-info
{
    display: block;
    position: absolute;
    left: 5%;
    top: 5%;
    height: 4%;
    
    width: 50%;
    z-index: 16;
    color: #9e8637;
    
    font-size: 0.75em;
    text-transform: uppercase;
    text-align: left;
    line-height: 3.1;
    
}
#screen-terms
{
    background-image: url(img/screen-terms.jpg);
}
#terms-previous
{
    position: absolute;
    top: 81%;
    right: 50%;
    height: 6.5%;
    width: 23%;
}
#terms-accept
{
    position: absolute;
    top: 81%;
    left: 50%;
    height: 6.5%;
    width: 23%;
}
#terms-not-interested
{
    position: absolute;
    top: 89%;
    left: 35%;
    height: 4.5%;
    width: 30%;
}
#screen-register
{
    background-image: url(img/screen-registration.jpg);
}
#screen-register.menu-initiated
{
    background-image: url(img/screen-registration-menu.jpg);
}
#register-owner-name-text
{
    top: 41.4%;
    left: 30%;
    width: 40%;
    height: 4.5%;
}
#register-owner-email-text
{
    top: 48.25%;
    left: 30%;
    width: 40%;
    height: 4.5%;
}
#register-staff-name-text
{
    top: 55%;
    left: 30%;
    width: 40%;
    height: 4.5%;
}
#button-register-previous,
#button-ptpcode-previous,
#incentives-previous
{
    position: absolute;
    top: 62%;
    right: 50%;
    height: 6.5%;
    width: 23%;
}
#button-register-continue,
#button-ptpcode-continue,
#incentives-continue,
#mystery-done
{
    position: absolute;
    top: 62%;
    left: 50%;
    height: 6.5%;
    width: 23%;
}
#register-outlet-name-label,
#ptpcode-outlet-name-label
{
    position: absolute;
    top: 35.4%;
    left: 5%;
    right: 5%;
    height: 3%;
    overflow: hidden;
    color: #9e8637;
    font-size: 1.5em;
    text-align: center;
    text-shadow: 0em 0.15em 0.3em rgba(0,0,0,0.4);
    white-space: nowrap;
}
#button-ptpcode-previous,
#button-ptpcode-continue,
#incentives-previous,
#incentives-continue
{
    top: 86%;
}
#screen-incentives
{
    background-image: url(img/screen-incentives.jpg);
}
#screen-incentives.menu-initiated
{
    background-image: url(img/screen-incentives-menu.jpg);
}
#screen-mystery
{
    background-image: url(img/screen-mystery.jpg);
}
#mystery-message
{
    position: absolute;
    top: 70.3%;
    left: 10%;
    right: 10%;
    color: white;
    text-align: center;
    height: 1.3em;
    overflow: hidden;
    font-size: 1.1em;
}
#mystery-done
{
    top: 81%;
    margin-left: -15%;
    width: 30%;
}
.menu-initiated #incentives-previous
{
    display: none;
}
.menu-initiated #incentives-continue
{
    left: 38.5%;
}
#terms-scroller
{
    position: absolute;
    left: 14%;
    right: 14%;
    top: 20.9%;
    bottom: 20.9%;
    overflow: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
#terms-content
{ 
    border: 2em solid transparent;
    height: 605%;
    background: url(img/terms-content.png) no-repeat top center;
    background-size: 100%;
}
#screen-ptpcode
{
    background-image: url(img/screen-ptpcode.jpg);
}
#ptpcode-outlet-name-label
{
    top: 18.8%;
}
#ptpcode-code-1-label,
#ptpcode-code-2-label
{
    position: absolute;
    top: 53.5%;
    left: 5%;
    right: 5%;
    height: 3%;
    white-space: nowrap;
    overflow: hidden;
    color: #9e8637;
    font-family: Serif12BetaWeb, serif;
    font-size: 1.25em;
    font-style: italic;
    text-align: center;
    color: #1f2b3c;
}
#ptpcode-code-2-label
{
    top: 62.5%;
}
#screen-menu
{
    background-image: url(img/screen-menu.jpg);
}
#menu-swiper-container
{
    position: absolute;
    top: 15%;
    height: 70%;
    width: 100%;
    left: 0;
    overflow: visible;
}
.menu-swiper-slide
{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
#menu-swiper-module-1:after,
#menu-swiper-module-2:after,
#menu-swiper-module-3:after,
#menu-swiper-mystery:after
{
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    bottom: -6%;
    left: 0;
    height: 2px;
    background: url(img/menu-dot.png);
    background-repeat: repeat-x;
    background-position: left center;
    background-size: 0.58em;
}
#menu-swiper-module-1
{
    background-image: url(img/menu-module-1.png);
}
#menu-swiper-module-1:after
{
    width: 50%;
    left: 50%;
}
#menu-swiper-module-2
{
    background-image: url(img/menu-module-2.png);
}
#menu-swiper-module-3
{
    background-image: url(img/menu-module-3.png);
}
#menu-swiper-mystery:after
{
    width: 50%;
    left: 0%;
}
#menu-swiper-mystery
{
    background-image: url(img/menu-mystery.png);
}
#menu-swiper-incentives
{
    background-image: url(img/menu-incentives.png);
}
#menu-swiper-registration
{
    background-image: url(img/menu-registration.png);
}
#menu-counter
{
    position: absolute;
    top: 81.6%;
    height: 15%;
    width: 25%;
    left: 37.5%;
    
    background: url(img/menu-counter.png) no-repeat center center;
    background-size: contain;
    z-index: 1;
    
    text-align: center;
    font-size: 1.9em;
    line-height: 4.35em;
    color: #9e8637;
    font-family: Serif12BetaWeb,serif;
    font-weight: bold;
    letter-spacing: 0.1em;
}
.swiper-complete-stamp
{
    position: absolute;
    width: 40%;
    height: 40%;
    top: 35%;
    left: 30%;
    background: url(img/menu-complete-stamp.png) no-repeat center center;
    background-size: 100%;
    display: none;
}
.menu-swiper-module-complete .swiper-complete-stamp
{
    display: block;
}
#screen-module-1
{
    background-image: url(img/screen-module-1.jpg);
}
#screen-module-2
{
    background-image: url(img/screen-module-2.jpg);
}
#screen-module-3
{
    background-image: url(img/screen-module-3.jpg);
}
.subscreen
{
    /*overflow: hidden;*/
    position: absolute;
    top: 24.4%;
    bottom: 14.6%;
    left: 10.8%;
    right: 10.8%;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    
    transform: translate3d(150%,0,0);
    transition: transform 0.333s;
}
.subscreen.subscreen-showing
{
    transform: translate3d(0,0,0);
}
.subscreen.subscreen-complete
{
    transform: translate3d(-150%,0,0);
}
#subscreen-module-1-stock-question
{
    background-image: url(img/m1-stock-question.jpg);
}
#subscreen-module-2-stock-question
{
    background-image: url(img/m1-stock-question.jpg);
}
#subscreen-module-3-stock-question
{
    background-image: url(img/m1-stock-question.jpg);
}
.subscreen.subscreen-locked:after
{
    content:"";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    z-index: 99999;
}
#module-1-stock-yes,
#module-1-stock-no,
#module-2-stock-yes,
#module-2-stock-no,
#module-3-stock-yes,
#module-3-stock-no
{
    top: 62%;
    height: 10%;
    width: 30%;   
    left: 50%;
}
#module-1-stock-no,
#module-2-stock-no,
#module-3-stock-no
{
    left: auto;
    right: 50%;
}
#subscreen-module-1-stock-success
{
    background-image: url(img/m1-stock-success.jpg);
}
#subscreen-module-2-stock-success
{
    background-image: url(img/m2-stock-success.jpg);
}
#subscreen-module-3-stock-success
{
    background-image: url(img/m3-stock-success.jpg);
}
#subscreen-module-1-stock-failure
{
    background-image: url(img/m1-stock-failure.jpg);
}
#subscreen-module-2-stock-failure
{
    background-image: url(img/m2-stock-failure.jpg);
}
#subscreen-module-3-stock-failure
{
    background-image: url(img/m3-stock-failure.jpg);
}
#module-1-stock-success-okay,
#module-1-stock-failure-okay,
#module-2-stock-success-okay,
#module-2-stock-failure-okay,
#module-3-stock-success-okay,
#module-3-stock-failure-okay
{
    top: 79%;
    height: 10%;
    right: 33%;
    left: 33%;
}
#subscreen-module-1-info-1
{
    background-image: url(img/m1-info-1.jpg);
}
#subscreen-module-1-info-2
{
    background-image: url(img/m1-info-2.jpg);
}
#subscreen-module-1-info-3
{
    background-image: url(img/m1-info-3.jpg);
}
#subscreen-module-1-info-4
{
    background-image: url(img/m1-info-4.jpg);
}
#subscreen-module-1-info-5
{
    background-image: url(img/m1-info-5.jpg);
}
#subscreen-module-1-info-6
{
    background-image: url(img/m1-info-6.jpg);
}
#subscreen-module-1-info-7
{
    background-image: url(img/m1-info-7.jpg);
}
#subscreen-module-1-info-8
{
    background-image: url(img/m1-info-8.jpg);
}

#subscreen-module-2-info-1
{
    background-image: url(img/m2-info-1.jpg);
}
#subscreen-module-2-info-2
{
    background-image: url(img/m2-info-2.jpg);
}
#subscreen-module-2-info-3
{
    background-image: url(img/m2-info-3.jpg);
}
#subscreen-module-2-info-4
{
    background-image: url(img/m2-info-4.jpg);
}
#subscreen-module-2-info-5
{
    background-image: url(img/m2-info-5.jpg);
}
#subscreen-module-2-info-6
{
    background-image: url(img/m2-info-6.jpg);
}
#subscreen-module-2-info-7
{
    background-image: url(img/m2-info-7.jpg);
}

#subscreen-module-3-info-1
{
    background-image: url(img/m3-info-1.jpg);
}
#subscreen-module-3-info-2
{
    background-image: url(img/m3-info-2.jpg);
}
#subscreen-module-3-info-3
{
    background-image: url(img/m3-info-3.jpg);
}
#subscreen-module-3-info-4
{
    background-image: url(img/m3-info-4.jpg);
}
#subscreen-module-3-info-5
{
    background-image: url(img/m3-info-5.jpg);
}
#subscreen-module-3-info-6
{
    background-image: url(img/m3-info-6.jpg);
}
#subscreen-module-3-info-7
{
    background-image: url(img/m3-info-7.jpg);
}

.button-subscreen-previous
{
    background: url(img/btn-previous.png) no-repeat center center;
    background-size: contain;
    bottom: -12%;
    height: 9%;
    right: 50.5%;
    width: 27%;
}
.button-subscreen-next,
.button-question-next
{
    background: url(img/btn-continue.png) no-repeat center center;
    background-size: contain;
    bottom: -12%;
    height: 9%;
    left: 50.5%;
    width: 27%;
}
#subscreen-module-1-info-1 .button-subscreen-previous,
#subscreen-module-2-info-1 .button-subscreen-previous
{
    display: none;
}
#subscreen-module-1-info-1 .button-subscreen-next,
#subscreen-module-2-info-1 .button-subscreen-next
{
    margin-left: -13.5%;
}
.button-question-next
{
    margin-left: -13.5%;
    display: none;
}
.quiz-question-answered .button-question-next
{
    display: block;
}
.quiz-start
{
    bottom: 11%;
    height: 10%;
    left: 33%;
    width: 34%;
}
#module-2-quiz-start
{
    bottom: 8%;
}
#module-3-quiz-start
{
    top: 82%;
}
#subscreen-module-1-quiz-instructions
{
    background-image: url(img/m1-quiz-instructions.jpg);
}
#subscreen-module-2-quiz-instructions
{
    background-image: url(img/m2-quiz-instructions.jpg);
}
#subscreen-module-3-quiz-instructions
{
    background-image: url(img/m3-quiz-instructions.jpg);
}
#subscreen-module-1-quiz-question-1
{
    background-image: url(img/m1-quiz-question-1.jpg);
}
#subscreen-module-1-quiz-question-2
{
    background-image: url(img/m1-quiz-question-2.jpg);
}
#subscreen-module-1-quiz-question-3
{
    background-image: url(img/m1-quiz-question-3.jpg);
}
.quiz-response
{
    position: absolute;
    left: 11%;
    right: 11%;
    height: 12.5%;
    border: 1px solid #384463;
    box-sizing: border-box;
    text-align: center;
    color: #384463;
    line-height: 4em;
}
.quiz-response-a
{
    top: 32.25%;
}
.quiz-response-b
{
    top: 46.5%;
}
.quiz-response-c
{
    top: 61%;
}
.quiz-response-d
{
    top: 75.5%;
}
.quiz-response.quiz-response-answered
{
    color: #b35b6b;
    border-color: #b35b6b;
}
.quiz-response.quiz-response-answered.quiz-response-correct
{
    color: #9e8637;
    border-color: #9e8637;
}
#subscreen-module-1-quiz-results
{
    background-image: url(img/m1-quiz-results.jpg);
}
#subscreen-module-2-quiz-results
{
    background-image: url(img/m2-quiz-results.jpg);
}
#subscreen-module-3-quiz-results
{
    background-image: url(img/m3-quiz-results.jpg);
}
.quiz-try-again
{
    bottom: 11%;
    height: 10%;
    right: 50%;
    width: 34%;
}
.quiz-finish
{
    bottom: 11%;
    height: 10%;
    left: 50%;
    width: 34%;
}
.quiz-results-score-wrap
{
    position: absolute;
    display: block;
    left: 10%;
    right: 10%;
    top: 38%;
    font-size: 3.5em;
    color: #9f8538;
    text-align: center;
}
.quiz-results-score
{
    color: #061e42;
}
#subscreen-module-2-quiz-results .quiz-results-score-wrap
{
    color: #061e42;
    text-transform: uppercase;
}
#subscreen-module-2-quiz-results .quiz-results-score
{
    color: #9f8538;
}
#screen-sync
{
    background-image: url(img/screen-sync.jpg);
}
#sync-loading
{
    position: absolute;
    top: 60%;
    left: 42%;
    right: 42%;
    height: 9%;
    background: url(img/sync-icon.png) no-repeat center center;
    background-size: contain;
    -webkit-animation: rotating 1s linear infinite;
}
@-webkit-keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}
#button-cancel-sync
{
    left: 25%;
    right: 25%;
    height: 6.5%;
    top: 73.5%;
}
#subscreen-module-1-game-intro
{
    background-image: url(img/m1-game-intro.jpg);
}
#module-1-game-intro-next
{
    left: 32%;
    right: 32%;
    top: 80%;
    height: 12%;
}
#screen-module-1-game-instructions-1
{
    background-image: url(img/m1-game-instructions-1.jpg);
}
#module-1-game-instructions-next
{
    left: 35%;
    right: 35%;
    top: 87%;
    height: 7%;
}
#screen-module-1-game-instructions-2
{
    background-image: url(img/m1-game-instructions-2.jpg);
}
#screen-module-2-game-instructions
{
    background-image: url(img/m2-game-instructions.jpg);
}
#screen-module-3-game-instructions
{
    background-image: url(img/m3-game-instructions.jpg);
}
#module-1-game-start
{
    left: 35%;
    right: 35%;
    top: 89.5%;
    height: 7%;
}
#module-2-game-start
{
    left: 35%;
    right: 35%;
    top: 89.5%;
    height: 7%;
}
#module-3-game-start
{
    left: 35%;
    right: 35%;
    top: 88%;
    height: 7%;
}
#screen-module-1-game-main
{
    background-image: url(img/m1-game-bg.jpg);
}
#screen-module-1-game-results
{
    background-image: url(img/m1-game-results.jpg);
}
#screen-module-2-game-results
{
    background-image: url(img/m2-game-results.jpg);
}
#screen-module-3-game-results
{
    background-image: url(img/m3-game-results.jpg);
}
#screen-module-3-game-main
{
    background-image: url(img/m3-game-bg.jpg);
}
#m3-game-indicator-correct
{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: url(img/m3-game-bg-correct.jpg) no-repeat center center;
    background-size: cover;
    display: none;
}
#m3-game-indicator-incorrect
{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: url(img/m3-game-bg-incorrect.jpg) no-repeat center center;
    background-size: cover;
    display: none;
}
#module-1-game-timer
{
    position: absolute;
    width: 100%;
    height: 10%;
    height: 5%;
    bottom: 3%;
    font-size: 1.75em;
    text-align: center;
}
#module-2-game-timer
{
    position: absolute;
    width: 100%;
    height: 10%;
    height: 5%;
    bottom: 5.2%;
    font-size: 2.1em;
    text-align: left;
    right: 0;
    left: 81%;
}
#module-2-game-score
{
    position: absolute;
    height: 10%;
    height: 5%;
    bottom: 5.2%;
    font-size: 2.1em;
    text-align: left;
    left: 20%;
    right: auto;
}
.module-1-game-zone,
.module-1-game-item
{
    position: absolute;
    width: 15%;
    height: 10%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 130%;
}
#module-1-game-item-1,
#module-1-game-zone-1
{
    top: 19.1%;
    left: 58%;
}
#module-1-game-item-1
{
    background-image: url(img/m1-game-item-1.png);    
}
#module-1-game-item-2,
#module-1-game-zone-2
{
    top: 29.8%;
    left: 27.2%;
}
#module-1-game-item-2
{
    background-image: url(img/m1-game-item-2.png);    
}
#module-1-game-item-3,
#module-1-game-zone-3
{
    top: 40.5%;
    left: 58%;
}
#module-1-game-item-3
{
    background-image: url(img/m1-game-item-3.png);    
}
#module-1-game-item-4,
#module-1-game-zone-4
{
    top: 51.3%;
    left: 27.2%;
}
#module-1-game-item-4
{
    background-image: url(img/m1-game-item-4.png);    
}
#module-1-game-item-5,
#module-1-game-zone-5
{
    top: 62%;
    left: 58%;
}
#module-1-game-item-5
{
    background-image: url(img/m1-game-item-5.png);    
}
#module-1-game-item-6,
#module-1-game-zone-6
{
    top: 72.9%;
    left: 27.2%;
}
#module-1-game-item-6
{
    background-image: url(img/m1-game-item-6.png);    
}
#module-1-game-item-7,
#module-1-game-zone-7
{
    top: 83.6%;
    left: 58%;
}
#module-1-game-item-7
{
    background-image: url(img/m1-game-item-7.png);    
}
#module-1-game-dragzone
{
    position: absolute;
    top: 12%;
    bottom: 3%;
    left: -10%;
    right: -10%;
}
#module-1-game-board
{
    position: absolute;
    top: 12%;
    bottom: 3%;
    left: 0%;
    right: 0%;
}
.module-1-game-board-area
{
    position: absolute;
    width: 15%;
    height: 15%;
    /*background: rgba(255,255,255,0.5);*/
}
#module-1-game-board-area-1
{
    left: -2.5%;
    top: 5%;
}
#module-1-game-board-area-2
{
    left: -2.5%;
    top: 27.5%;
}
#module-1-game-board-area-3
{
    left: -2.5%;
    top: 50%;
}
#module-1-game-board-area-4
{
    left: -2.5%;
    top: 72.5%;
}
#module-1-game-board-area-5
{
    right: 12.5%;
    top: 5%;
}
#module-1-game-board-area-6
{
    right: 12.5%;
    top: 27.5%;
}
#module-1-game-board-area-7
{
    right: 12.5%;
    top: 50%;
}
#module-1-game-board-area-8
{
    right: 12.5%;
    top: 72.5%;
}
#module-1-game-results-retry,
#module-2-game-results-retry,
#module-3-game-results-retry
{
    height: 6%;
    left: 37%;
    right: 37%;
    top: 86%;
}
#module-2-game-results-retry
{
    height: 17%;
    top: 70%;
}
#module-1-game-results-finish,
#module-2-game-results-finish,
#module-3-game-results-finish
{
    height: 5%;
    right: 37%;
    left: 37%;
    top: 93%;
}
#module-2-game-results-finish
{
    top: 90.5%;
    top: 70%;
}
#module-3-game-results-retry
{
    height: 6%;
    top: 70%;
}
#module-3-game-results-finish
{
    top: 78%;
}
.game-results-score-wrap
{
    position: absolute;
    display: block;
    left: 10%;
    right: 10%;
    top: 33%;
    font-size: 3.5em;
    color: #384463;
    text-align: center;
}
#module-2-game-results-score-wrap
{
    top: 43%;
    color: white;
}
.game-results-score
{
    color: white;
}
#screen-module-2-game-main
{
    background-image: url(img/m2-game-bg.jpg);
}
.m2-game-layer
{
    
    transition: none;
}
.m2-game-layer.layer-animated
{
    transition: transform 40s linear;
}
#screen-module-2-game-background-1
{
    position: absolute;
    width: 500%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(img/m2-game-background-city-1.png);
    background-repeat: repeat-x;
    background-position: center;
    background-size: auto 100%;
}
#screen-module-2-game-background-1.layer-animated
{
    transform: translate3d(-100%,0,0);
}
#screen-module-2-game-background-2
{
    position: absolute;
    width: 1000%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(img/m2-game-background-city-2.png);
    background-repeat: repeat-x;
    background-position: center;
    background-size: auto 100%;
}
#screen-module-2-game-background-2.layer-animated
{
    transform: translate3d(-100%,0,0);
}
#screen-module-2-game-lines
{
    position: absolute;
    width: 2000%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(img/m2-game-road-lines.png);
    background-repeat: repeat-x;
    background-position: center;
    background-size: auto 100%;
}
#screen-module-2-game-lines.layer-animated
{
    transform: translate3d(-100%,0,0);
}
#screen-module-2-game-foreground
{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(img/m2-game-controls.png);
    background-repeat: repeat-x;
    background-position: center;
    background-size: auto 100%;
}
#screen-module-2-game-objects
{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
#screen-module-2-game-objects.layer-animated
{
    transform: translate3d(-2000%,0,0);
}
#screen-module-2 .text-field
{   
    width: 36%;
    height: 6%;
    color: #1c2839;
}
#m2-game-man
{
    position: absolute;
    left: 42%;
    bottom: 28%;
    width: 16%;
    height: 10%;
    background: url(img/m2-game-man-sprite.png) no-repeat center center;
    /*background-color: rgba(255,0,0,0.5);*/
    background-position: 0% center;
    background-size: 1000%;
}
#screen-module-2 .text-field::-webkit-input-placeholder {
   color: #1c2839;
}
#module-2-field-price-1
{
    top: 29%;
    left: 11%;
}
#module-2-field-price-2
{
    top: 29%;
    right: 11%;
}
#module-2-field-price-3
{
    top: 44.8%;
    left: 11%;
}
#module-2-field-price-4
{
    top: 44.8%;
    right: 11%;
}
#module-2-field-price-5
{
    top: 60.7%;
    left: 32%;
}
.m2-reveal
{
    display: table;
    position: absolute;
    box-sizing: border-box;
    width: 37%;
    height: 36%;
    color: #1c2839;
}
.m2-reveal > span
{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding: 0 10px;
}
#m2-reveal-1,
#m2-reveal-3
{
    top: 46%;
    left: 9.5%;
}
#m2-reveal-2,
#m2-reveal-4
{
    top: 46%;
    right: 9%;
}
.m2-reveal.unrevealed:after
{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(img/m2-touch-reveal.jpg) no-repeat center center;
    background-size: cover;
}
#subscreen-module-2-quiz-question
{
    background: url(img/m2-quiz-bg.png) no-repeat center center;
    background-size: cover;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
#subscreen-module-3-quiz-question
{
    background: url(img/m3-quiz-bg.jpg) no-repeat center center;
    background-size: cover;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
#module-2-quiz-responses
{
    position: absolute;
    top: 67%;
    bottom: 10%;
    left: 17.1%;
    right: 17.4%;
}
.quiz-drag
{
    display: block;
    position: relative;
    width: 100%;
    height: 20%;
    color: #a19144;
    background: #0d192a;
    border: 1px solid #a19144;
    box-sizing: border-box;
    margin-bottom: 2.55%;
    text-align: center;
    font-size: 0.8em;
    overflow: hidden;
    line-height: 3em;
    cursor: pointer;
}
#module-2-quiz-dropzones
{
    position: absolute;
    top: 33.5%;
    bottom: 35.5%;
    left: 16.1%;
    right: 16.5%;
}
.quiz-dropzone
{
    display: block;
    width: 100%;
    height: 20%;
    margin-bottom: 2.55%;   
}
#module-3-quiz-dropzones
{
    position: absolute;
    top: 38.5%;
    bottom: 24.25%;
    left: 73.1%;
    right: 13%;
}
#module-3-quiz-responses
{
    position: absolute;
    top: 80%;
    left: 12.75%;
    right: 12.75%;
    height: 5%;
}
#screen-module-3 .quiz-drag
{
    width: 18%;
    height: 100%;
    float: left;
    margin-right: 2.5%;
}
#screen-module-3 .quiz-dropzone
{
    margin-bottom: 0;
}
#screen-module-3 .quiz-drag:last-child
{
    margin-right: 0;
}
.m2-game-object
{
    position: absolute;
}
.m2-game-object-nonvisible,
.m2-game-object-visible
{
    width: 10%;
    height: 10%;
    top: 60%;
}
.m2-game-object-nonvisible
{
    background: url(img/m2-game-item-nonvisible.png) no-repeat center center;
    background-size: contain;
    left: 10em;
}
.m2-game-object-visible
{
    background: url(img/m2-game-item-visible.png) no-repeat center center;
    background-size: contain;
    left: 20em;
}
.m2-game-object-price
{
    background: url(img/m2-game-item-price.png) no-repeat center center;
    background-size: contain;
    width: 15%;
    height: 11%;
    left: 30em;
    top: 45%;
}
.m2-game-object-stock
{
    background: url(img/m2-game-item-stock.png) no-repeat center center;
    background-size: contain;
    width: 23%;
    height: 19%;
    left: 40em;
    top: 60%;
}
#m2-game-trigger
{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    cursor: pointer;
}
#m3-game-packs
{
    position: absolute;
    top: 20%;
    bottom: 40%;
    left: 7%;
    right: 7%;   
    letter-spacing: 0;
    word-spacing: 0;
    text-align: center;
}
.m3-game-pack
{
    display: inline-block;
    width: 16%;
    height: 20%;
    margin-bottom: 14%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 1;
    transition: opacity 0.5s;
}
.m3-game-pack.has-dropped
{
    opacity: 0;
}
#m3-game-pack-1
{
    background-image: url(img/m3-game-pack-1.png);
}
#m3-game-pack-2
{
    background-image: url(img/m3-game-pack-2.png);
}
#m3-game-pack-3
{
    background-image: url(img/m3-game-pack-3.png);
}
#m3-game-pack-4
{
    background-image: url(img/m3-game-pack-4.png);
}
#m3-game-pack-5
{
    background-image: url(img/m3-game-pack-5.png);
}
#m3-game-pack-6
{
    background-image: url(img/m3-game-pack-6.png);
}
#m3-game-pack-7
{
    background-image: url(img/m3-game-pack-7.png);
}
#m3-game-pack-8
{
    background-image: url(img/m3-game-pack-8.png);
}
#m3-game-pack-9
{
    background-image: url(img/m3-game-pack-9.png);
}
#m3-game-pack-10
{
    background-image: url(img/m3-game-pack-10.png);
}
#m3-game-pack-11
{
    background-image: url(img/m3-game-pack-11.png);
}
#m3-game-pack-12
{
    background-image: url(img/m3-game-pack-12.png);
}
#m3-game-pack-13
{
    background-image: url(img/m3-game-pack-13.png);
}
#m3-game-pack-14
{
    background-image: url(img/m3-game-pack-14.png);
}
#m3-game-pack-15
{
    background-image: url(img/m3-game-pack-15.png);
}
#m3-game-pack-16
{
    background-image: url(img/m3-game-pack-16.png);
}
#m3-game-pack-17
{
    background-image: url(img/m3-game-pack-17.png);
}
#m3-game-pack-18
{
    background-image: url(img/m3-game-pack-18.png);
}
#m3-game-requests
{
    position: absolute;
    top: 70%;
    left: 25%;
    right: 25%;
    height: 8%;
}
.m3-game-request
{
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: none;
}
.m3-game-pack-dragging
{
    z-index: 10;
}
.m3-game-request-current
{
    display: block;
}
#m3-game-request-1
{
    background-image: url(img/m3-game-request-1.png);
    /*display: block/*/
}
#m3-game-request-2
{
    background-image: url(img/m3-game-request-2.png);
}
#m3-game-request-3
{
    background-image: url(img/m3-game-request-3.png);
}
#m3-game-request-4
{
    background-image: url(img/m3-game-request-4.png);
}
#m3-game-request-5
{
    background-image: url(img/m3-game-request-5.png);
}
#m3-game-request-6
{
    background-image: url(img/m3-game-request-6.png);
}
#m3-game-request-7
{
    background-image: url(img/m3-game-request-7.png);
}
#m3-game-request-8
{
    background-image: url(img/m3-game-request-8.png);
}
#m3-game-request-9
{
    background-image: url(img/m3-game-request-9.png);
}
#m3-game-request-10
{
    background-image: url(img/m3-game-request-10.png);
}
#m3-game-request-11
{
    background-image: url(img/m3-game-request-11.png);
}
#m3-game-request-12
{
    background-image: url(img/m3-game-request-12.png);
}
#m3-game-request-13
{
    background-image: url(img/m3-game-request-13.png);
}
#m3-game-request-14
{
    background-image: url(img/m3-game-request-14.png);
}
#m3-game-request-15
{
    background-image: url(img/m3-game-request-15.png);
}
#m3-game-request-16
{
    background-image: url(img/m3-game-request-16.png);
}
#m3-game-request-17
{
    background-image: url(img/m3-game-request-17.png);
}
#m3-game-request-18
{
    background-image: url(img/m3-game-request-18.png);
}
#m3-game-results-score-wrap
{
    top: 40%;
    color: #fbc84f;
    font-weight: bold;
    font-size: 4.5em;
}
#m3-game-dropzone
{
    position: absolute;
    bottom: 0;
    height: 30%;
    width: 100%;
}
#m3-door-left
{
    position: absolute;
    left: 0;
    top: 13%;
    height: 55.5%;
    width: 50.1%;
    background: url(img/m3-game-door-left.jpg) no-repeat center center;
    background-size: 100% 100%;
    transition: transform 1s linear;
}
#m3-door-right
{
    position: absolute;
    top: 13%;
    height: 55.5%;
    right: 0;
    width: 50.1%;
    background: url(img/m3-game-door-right.jpg) no-repeat center center;;
    background-size: 100% 100%;
    transition: transform 1s linear;
}
#m3-door-left.door-open
{
    transform: translate3d(-100%,0,0);
}
#m3-door-right.door-open
{
    transform: translate3d(100%,0,0);
}