@import url('https://fonts.googleapis.com/css?family=Caveat');
@import url('https://fonts.googleapis.com/css?family=Dosis:600,700');

* {
    -webkit-font-smoothing: antialiased; /* This needs to be set or some font faced fonts look bold on Mac in Chrome/Webkit based browsers. */
    -moz-osx-font-smoothing: grayscale; /* Fixes font bold issue in Firefox version 25+ on Mac */
}

body,html{
    background-color: #000000;
}

#urlcopy{
    display: none;
    position: absolute;
    color: #FBEA9A;
    font-family: Arial, sans-serif;
    left: 32%;
    top: 37.3%;
    font-size: 10px;
    overflow: hidden;
    width: 32%;
}

#urlcopy p{
    width: 800%;
}

::selection {
    background: #8be6ff; /* WebKit/Blink Browsers */
}
::-moz-selection {
    background: #8be6ff; /* Gecko Browsers */
}

#warning{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    text-align: center;
}

#warning img{
    width: 100%;
    max-width: 400px;
}

#legal{
    color: white;
    position: absolute;
    top: 517px;
    text-align: center;
    font-family: Arial, sans-serif;
}

#legal a{
    color: #f8688b;
    text-decoration: none !important;
    outline: 0;
}

#legal span {
    line-height: 1.3vw !important;
    font-size: 1.2vw !important;
    display: block;
}

.shadow{
   /* -webkit-box-shadow: 0px 7px 15px 1px rgba(0,0,0,0.45);
    -moz-box-shadow: 0px 7px 15px 1px rgba(0,0,0,0.45);
    box-shadow: 0px 7px 15px 1px rgba(0,0,0,0.45);*/
}

#extraheight {
    width: 100%;
    height: 400vh;
    position: absolute;
    left: 0;
    top:0;
}

@media (min-width: 900px) {
    #extraheight {
        display: none;
    }

    #legal span {
        line-height: 11px !important;
        font-size: 10px !important;
    }
}


#multiplayerurl, #urlcopybtn{
    display: none;
}

.mainContainer{
    left: 0;
    top: 0;
    display: none;
    z-index: 9;
    position: relative;
}

.mainContainer-clipper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#score-rooms-panel-container{
    position: absolute;
    width: 50%;
    top: 0;
    left: 50%;
    margin-left: -34%;
    transition: top 500ms ease-out;
}

#score-rooms-panel-container.hidden {
    top: -20%;
}

.gamesContainer {

}

#score-rooms-panel {
    width: 100%;
    display: block;
}

.youtube-play-again {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* background-image: url(../img/black60.png); */
    background-color: black;
    display: none;
    cursor: pointer;
}

.youtube-play-again img {
    width: 100%;
}

#game_time {
    width: 26.2222222%;
    position: absolute;
    top: 15%;
    left: 2.5%;
}

.timer_dots {
    width: 0.8888888889%;
    position: absolute;
    left: 15.5%;
    top: 49.5%;
}

.double-digits-container {
    position: absolute;
    width: 9.777777778%;
    top: 42%;
    height: 27.08333%;
    border: 1px solid #8b8483;
}

#dd-minutes {
    left: 4.6%;
}

#dd-seconds {
    left: 16.7%;
}

.single-digit-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
}

.single-digit-container:last-child {
    left: 50%;
}

.top-half-mask, .bottom-half-mask {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
}

.top-half-mask {
    height: 50%;
}

.topA_mc {
    -webkit-transform-origin: bottom;
    -ms-transform-origin: bottom;
    transform-origin: bottom;
}

.topA_mc.flipped {
    -webkit-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    transform: rotateX(90deg);
    transition: all 300ms ease-in-out;
}

.bottom-half-mask {
    height: 50%;
    top: 50%;
}

.bottomA_mc {
    -webkit-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;
    -webkit-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    transform: rotateX(90deg);
}

.bottomA_mc.flipped {
    display: block;
    transition: all 300ms ease-in-out 300ms;
    -webkit-transform: rotateX(0);
    -ms-transform: rotateX(0);
    transform: rotateX(0);
}

.bottom-half-mask-inside {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: -100%;
}

.top-half-mask img, .bottom-half-mask img {
    width: 100%;
    display: block;
}

.topA_mc {
    z-index: 10;
}

.bottomA_mc {
    z-index: 9;
}

.topB_mc {
    z-index: 8;
}

.bottomB_mc {
    z-index: 7;
}

.room-thumbs-container {
    position: absolute;
    width: 64.88886%;
    height: 33%;
    left: 30%;
    top: 22%;
}

.room-names-container {
    position: absolute;
    width: 65.33333%;
    left: 30%;
    top: 54%;
}

.room_name {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    display: none;
}

.room_name_active {
    display: block;
}

.room-thumb {
    position: absolute;
    top: 0;
    width: 17.808219%;
    cursor: pointer;
}

.roomthumb_active{
    display: none;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.room-thumb-active .roomthumb_active{
    display: block;
}

#rt0 {
    left: 0;
}

#rt1 {
    left: 20.5%;
}

#rt2 {
    left: 41%;
}

#rt3 {
    left: 61.5%;
}

#rt4 {
    left: 82%;
}

.room-thumb img {
    width: 100%;
}

#items-to-find-container{
    position: absolute;
    width: 24.1111111111%;
    top: 0;
    right: 0;
    transition: right 500ms ease-out;
}

#items-to-find-container.hidden {
    right: -25%;
}

#items-to-find {
    width: 100%;
}

#game_list {
    width: 77.8801%;
    position: absolute;
    top: 14%;
    left: 16%;
}

#ingame-instructions, #item-found-screen, #all-items-found-screen {
    background-image: url(../img/black60.png);
}

#item-found-screen {
    display: none;
}

.game_item_found {
    width: 30.2222222%;
    left: 27%;
    top: 24%;
    position: absolute;
}

.game_complete_msg {
    width: 41%;
    position: absolute;
    left: 23%;
    top: 31%;
}

#game_hint_drag_to_look {
    position: absolute;
    left: 22%;
    top: 76.5%;
    width: 38.88888888889%;
}

#game_hint_find_all_items {
    position: absolute;
    left: 49%;
    top: 22%;
    width: 28.11111%;
}

#game_hint_move_between_rooms {
    position: absolute;
    left: 8.5%;
    top: 16.5%;
    width: 38%;
}

#rotateicon {
    width: 15.33333333%;
    position: absolute;
    left: 34.5%;
    top: 64%;
}

#got_it_btn{
    left: 26.444444%;
    top: 39%;
    width: 32.555555556%;
}

#frame-panel-left-container{
    position: absolute;
    width: 8.44444%;
    top: 30.5%;
    left: 0;
    transition: left 500ms ease-out;
}

#frame-panel-left-container.hidden {
    left: -25%;
}

#framepanel_left {
    width: 100%;
}

.side-panel-btn {
    position: absolute;
    left: 20%;
    width: 60.526316%;
    cursor: pointer;
}

#sidepanel-exit {
    top: 60%;
}

#sidepanel-instructions {
    top: 7%;
}

#sidepanel-sound-toggle {
    top: 33.5%;
}

.sidepanel-sound-on, .sidepanel-sound-off {
    width: 100%;
}

.sidepanel-sound-off {
    display: none;
}

.single-sound-toggle-panel {
    position: absolute;
    left: 0;
    top: 42%;
    width: 8.555555556%;
}

.single-sound-toggle-panel-icon-container {
    width: 59.74026%;
    position: absolute;
    left: 21%;
    top: 15%;
    cursor: pointer;
}

.soundonoffpanel {
    width: 100%;
}

#loader-screen {
    background-color: black;
}

#loading_off, #loading_on {
    position: absolute;
    left: 50%;
    width: 36.4444444%;
    margin-left: -18.222222%;
    top: 29%;
}

#loading_off {
    display: none;
}

.loaderlinecontainer {
    position: absolute;
    left: 50%;
    width: 18%;
    margin-left: -9%;
    top: 52%;
    height: 5%;
    overflow: hidden;
}

.greyline {
    width: 100%;
}

.blueline {
    position: absolute;
    top: 0;
    left: -112%;
    width: 112%;
    height: 100%;
}

.canvasholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-container{
    position: absolute;
    left: 0;
    top:0;
    display: none;
}

.video-container video {
    width: 100%;
    position: absolute;
    left: 0;
    top:0;
}

#dynamic-canvas {
    position: absolute;
    left: 0;
    top:0;
    display: none;
}

.youtube, .game-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
}

.game-screen {
    overflow: hidden;
}

#transitionclip {
    background-color: black;
}

.main-game-button {
    position: absolute;
    cursor: pointer;
}

#home_btn_start{
    left: 50%;
    margin-left: -16.388888889%;
    top: 73%;
    width: 32.777777778%;
}

#instructions_btn_play{
    left: 50%;
    margin-left: -16.111111%;
    top: 73%;
    width: 32.222222222%;
}

#play_again_button {
    left: 50%;
    margin-left: -16.33333333%;
    top: 73%;
    width: 32.666667%;
}

#instructions_btn_play{
    display: none;
}

#home_tt {
    position: absolute;
    width: 21%;
    top: 3%;
    left: 3%;
}

#home_game_tt {
    position: absolute;
    width: 54.333333333%;
    top: 3%;
    left: 50%;
    margin-left: -27.1666667%;
}

#howtoplaytitle {
    width: 67%;
    position: absolute;
    top: 3%;
    left: 16.5%;
}

#instructions360 {
    width: 38.666666667%;
    position: absolute;
    top: 27%;
    left: 13%;
    transition: left 700ms ease-out 300ms;
}
#instructions360.hidden {
    left: -50%;
}

#instructionstextcard {
    width: 39.4444444444%;
    position: absolute;
    top: 23%;
    right: 14.5%;
    transition: right 700ms ease-out 500ms;
}
#instructionstextcard.hidden {
    right: -50%;
}
#instructionstextcardimg{
    width: 100%;
}
#instructions_card_text{
    width: 89.014085%;
    position: absolute;
    left: 5.5%;
    top: 2%;
}

#scorepanel {
    position: absolute;
    left: 50%;
    width: 34.444444444%;
    margin-left: -17.2222222%;
    top: 31%;
}

#scorepanel-img {
    width: 100%;
}

#gameover_hotel_logo {
    width: 43.54838%;
    position: absolute;
    left: 5%;
    top: 46%;
}

#gameover_with_compliments {
    width: 44.83871%;
    position: absolute;
    top: 55%;
    right: 4%;
}

#gameover_your_time {
    width: 92.903226%;
    position: absolute;
    left: 3.5%;
    top: 0;
}

#scoretxt {
    width: 100%;
    text-align: center;
    font-family: 'Caveat', cursive;
    color: #353763;
    font-size: 70px;
    position: absolute;
    top: 24%;
}

#end-screen {
    /*display: block;*/
}

#endscreen-trailer-btn {
    cursor: pointer;
    width: 29.222222222%;
    height: 37.15%;
    position: absolute;
    top: 37.5%;
    right: 6.5%;
}

.gameover_trailer_img_shadow {
    width: 33.33333333%;
    position: absolute;
    top: 40.5%;
    right: 4.5%;
}

#endscreen-trailer-btn, .gameover_trailer_img_shadow {
    -webkit-transform: rotate(8deg);
    -ms-transform: rotate(8deg);
    transform: rotate(8deg);
}

#gameover_trailer_ttl {
    position: absolute;
    width: 80.4123%;
    top: 60%;
    left: 10%;
}

#gameover_trailer_img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#gamover_gameover_ttl{
    width: 55.3333333%;
    position: absolute;
    margin-left: -27.666666665%;
    left: 50%;
    top: 3%;
}

.sharepanelcontainer {
    position: absolute;
    width: 24.22222222%;
    top: 32%;
    left: 10.5%;
    -webkit-transform: rotate(-11deg);
    -ms-transform: rotate(-11deg);
    transform: rotate(-11deg);
}

.sharepanelcontainer-img {
    width: 100%;
}

.sharepanelcontainer-us {
    top: 10%;
    width: 18%;
    left: 78%;
}

.postcardpromo {
    cursor: pointer;
    position: absolute;
    width: 29.555555556%;
    top: 31%;
    left: 6%;
}

.baseimage {
    width: 100%;
}

.youtubecode {
    top: 2.7%;
    left: 1.6%;
    width: 96.8%;
    height: 88.9%;
    position: absolute;
}

.youtubeclosebutton{
    position: absolute;
    right: 1%;
    top: 8.1027%;
    width: 4.333333%;
    cursor: pointer;
}

.youtubeclosebutton img{
    width: 100%;
}

#checkDiv {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.rotate-msg{
    position: absolute;
    left: 0;
    top:0;
    z-index: 201;
    display: none;
    width: 100%;
    height: 100%;
    background-size: cover;
    overflow: hidden;
    text-align: center;
    background-color: #000;
}



.rotate-msg img{
    height: 100%;
}


.frametop {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 20;
}

.framebottom {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
}

.frameleft {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
}

.frameright {
    position: absolute;
    height: 100%;
    right: 0;
    top: 0;
}

.framefooter-left {
    position: absolute;
    left: 0.8%;
    bottom: 0;
    height: 7.70751%;
    display: none;
}

.framefooter-left img {
    height: 100%;
}

.framefooter-right {
    position: absolute;
    bottom: 1.03%;
    right: 0.8%;
    height: 5.533597%;
    display: none;
}

.framefooter-right img {
    height: 100%;
    display: inline-block;
    cursor: pointer;
}

#hidden-canvas-for-360 {
    display: none;
}

.hidden-button {
    position: absolute;
    background-image: url(../img/empty.png);
    cursor: pointer;
    width: 32%;
    height: 20%;
}

#hidden-share-btn-facebook {
    top: 32%;
    left: 27%;
}

#hidden-share-btn-twitter {
    top: 32%;
    left: 62%;
}

.crossedoutline {
    position: absolute;
    left: 21%;
    width: 45.16129%;
}

#col0, #hc0 {
    top: 30%;
}

#col1, #hc1 {
    top: 35%;
}

#col2, #hc2 {
    top: 40.3%;
}

#col3, #hc3 {
    top: 45.5%;
}

#col4, #hc4 {
    top: 50.5%;
}

#col5, #hc5 {
    top: 56%;
}

#col6, #hc6 {
    top: 61%;
}

#col7, #hc7 {
    top: 66.5%;
}

#col8, #hc8 {
    top: 71.5%;
}

#col9, #hc9 {
    top: 77%;
}

#col10, #hc10 {
    top: 82.5%;
}

#col11, #hc11 {
    top: 88%;
}

.found-image {
    position: absolute;
    left: 29.5%;
    top: 37%;
    width: 25.44444444%;
    -webkit-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    transform: rotate(2deg);
}

#form-overlay {
    display: none;
    background: url(../img/black60.png);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    font-family: 'Dosis', sans-serif;
    font-weight: 600;
    color: #8a001d;
}

.form-overlay-content {
    background-image: url(../us/form-background.png);
    width: 442px;
    height: 422px;
    background-size: cover;
    position: absolute;
    left: 229px;
    top: 5.3%;
    -moz-transform-origin: top;
    -webkit-transform-origin: top;
    transform-origin: top;
}

#captcha-ui-id0, .captcha-ui {
    display: none;
}

#form-overlay input {
    font-size: 14px;
    border: 1px #8a001d solid;
    border-radius: 7px;
    line-height: 33px;
    color: #8a001d;
    position: absolute;
    font-family: 'Dosis', sans-serif;
    font-weight: 600;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 0 9px;
}

#form-overlay input[type='checkbox'] {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 5px;
    border: 1px #8a001d solid;
    top: 0;
    left: 0;
}

#form-overlay input[type='checkbox']:checked {
    background: #dc002e;
}

#form-overlay input[type='submit'] {
    background-color: #dc002e;
    color: #ecdcbc;
    text-transform: uppercase;
    font-weight: 700;
    width: 202px;
    left: 228px;
    top: 88%;
    border-color: #dc002e;
    font-size: 17px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    cursor: pointer;
}

.form-title {
    font-size: 19px;
    text-transform: uppercase;
    text-align: center;
    top: 74px;
    position: absolute;
    left: 0;
    width: 100%;
}

.form-postcard-address {
    font-size: 18px;
    left: 16px;
    position: absolute;
    top: 100px;
}

#form-fn {
    top: 122px;
    left: 16px;
}

#form-fn-error {
    left: 25px;
    top: 159px;
}

#form-ln {
    top: 122px;
    left: 228px;
}

#form-ln-error {
    top: 159px;
    left: 237px;
}

#form-adr1 {
    top: 177px;
    left: 16px;
}

#form-adr1-error {
    top: 214px;
    left: 25px;
}

#form-adr2 {
    top: 177px;
    left: 228px;
}

#form-adr2-error {
    top: 214px;
    left: 237px;
}

#form-zip {
    top: 232px;
    left: 16px;
}

#form-zip-error {
    top: 269px;
    left: 25px;
}

#form-city {
    top: 232px;
    left: 158px;
}

#form-city-error {
    top: 269px;
    left: 167px;
}

#form-state {
    top: 232px;
    left: 300px;
}

#form-state-error {
    top: 269px;
    left: 309px;
}

#form-email {
    top: 298px;
    left: 228px;
}

#form-email-error {
    top: 337px;
    left: 237px;
}



.form-input-large {
    width: 202px;
}

.form-input-medium {
    width: 130px;
}

#form-news-cb, #form-terms-cb {
    width: 35%;
    position: absolute;
    font-size: 12px;
    left: 3%;
    padding-left: 33px;
    padding-top: 4px;
}

#form-news-cb {
    top: 70%;
}

#form-terms-cb {
    top: 84%;
}

#form-terms-cb a {
    color: #8a001d;
    text-decoration: underline;
}

.error {
    position: absolute;
    font-size: 12px;
}

#TERMS-error {
    top: 46px;
}

#form-overlay .signup-result {
    width: 33.555555556%;
    height: 31.81818182%;
    background-size: cover;
    position: absolute;
    left: 33.22222222%;
    top: 30.83%;
    background-image: url(../us/form-thanks.png);
    cursor: pointer;
}

#form-overlay .signup-result h2, #form-overlay .signup-result p {
    display: none;
}

.form-closebtn{
    position: absolute;
    cursor: pointer;
    right: 8px;
    top: 11px;
}

.hintclicker {
    background-image: url(../img/empty.png);
    position: absolute;
    width: 10%;
    height: 4%;
    left: 19%;
    margin-top: -2%;
    cursor: pointer;
}