html{
    min-height: 100%;
}
body{
    overflow:hidden;
    -khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    background:#6FC5ED;
}

.hide{
    display: none;
}
.opacity0{
    opacity:0;
}
.opacity100{
    opacity:100;
}

/* ------------------------ */
/* ------ Login Page ------ */
/* ------------------------ */
#signup{
    width:800px;
    margin: 0px auto;
    padding-top: 5%;
}
.dialog{
    padding:24px;
    background-color:white;
    border-radius: 24px;
    -moz-border-radius: 24px;
    -webkit-border-radius: 24px;
    display: inline-block;
    position: fixed;
    width: 800px;
    bottom: 24px;
}
.dialog_image{
    float:left;
    width:70px;
    height:70px;
    border-radius: 50%;
    background-size: contain;
    -webkit-box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.2);
}
.dialog_astro{
    background-image: url('../gameimages/dialog_astro.png');
}
.dialog_text{
    float: left;
    padding: 15px 0;
    max-width: 680px;
    padding-left: 24px;
}
/* .abc gets pulled in via google auth api */
.abcRioButtonContentWrapper{
    background-image:url(../gameimages/login_2.png);
    background-size: auto;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: top;
    background-size: contain;
}
.abcRioButtonIcon{
    display: none;
}
.abcRioButtonLightBlue{
    box-shadow: none!important;
    background-color: transparent!important;
}
.abcRioButtonContents{
    position: absolute!important;
    margin: -1px!important;
    border: 0!important;
    padding: 0!important;
    width: 1px!important;
    height: 1px!important;
    overflow: hidden!important;
    clip: rect(0 0 0 0)!important;
    text-transform: none!important;
    white-space: nowrap!important;
}
/* ------------------------ */
/* ------ Game Board ------ */
/* ------------------------ */
#game{
    width:100%;
    height:100%;
    overflow:hidden;
}
#game.hide{
    opacity: 0;
}
#map{
  position: absolute;
  overflow:hidden;
  left:0px;
  top:0px;
}

.mapDecoration{
    -moz-user-select: none;
    position: initial;
    display: none;
}
#board_background img.mapDecoration.australia {
    right: 625px;
    bottom: 822px;
    top: auto;
    left: auto;
}
#board_background img.mapDecoration.canada {
    top: 526px;
    left: 422px;
}
#board_background img.mapDecoration.mongolia {
    top: 749px;
    left: auto;
    right: 1195px;
}
#board_background img.mapDecoration.india {
    top: 1307px;
    left: auto;
    right: 1916px;
}
#board_background img.mapDecoration.england {
    top: 747px;
    left: auto;
    right: 2814px;
}
#board_background img.mapDecoration.japan {
    top: 1128px;
    left: auto;
    right: 891px;
}
#board_background img.mapDecoration.russia {
    top: 570px;
    left: auto;
    right: 884px;
}
#board_background img.mapDecoration.brazil {
    top: 1169px;
    left: 3160px;
}
#board_background img.mapDecoration.israel {
    top: auto;
    left: 381px;
    bottom: 898px;
}
#board_background img.mapDecoration.zambia {
    top: 1385px;
    left: 2916px;
}
#board_background img.mapDecoration.guatemala {
    top: 1587px;
    left: 1455px;
}
#board_background img.mapDecoration.antartica {
    bottom: 202px;
    left: 2845px;
    top: auto;
}
#board_background img.mapDecoration.easterisland {
    top: 2020px;
    left: 700px;
}
#board_background img.mapDecoration.hawaii {
    top: 1438px;
    left: 459px;
}

.panel {
    position: fixed;
    right: -505px;
    top: 80px;
    width: 505px;
    background: rgba(255,255,255,0.85);
	border-radius: 20px;
    padding: 20px;
    max-height: 390px;
    overflow-y: scroll;
    min-height: 80%;
    z-index: 3115;
    padding:34px;
}

.panel h1 {
    font-size: 1.5rem;
}

.panel .header .btn {
	background-color: transparent;
}



/*Z-index reference*/
/* 0 - 50: background images */
/* 100-999: player pieces 100 - 2100 Supports 20 spaces with 100 slots in each*/
/* 3000: Circle destinations */
/* 3001 - 3100: foreground images */
/* 3101: Invisible spaces (all_spaces)*/
/* 3105: debug circles */
/* 3110: space popover */
/* 3115: Panels */
/* 3120: HUD */
/* 3130: Overlays (cb_modal)*/
    /* 10: header_container + close overlay */
/* 3140: Flying Astro */
/* 3150: Found Collectable */
/* 3500: Confetti */

#confetti{
    position: absolute;
    z-index: 3500;
    left:0px;
    top:0px;
    right:0px;
    bottom:0px;
    pointer-events: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
    background: none !important;
}

/*---- BACKGROUND ----*/
#board_background div, #board_background img{
    position:absolute;
    left:0px;
    top:0px;
    z-index: 50;
    /*opacity: 0.5;*/
}



/*---- SPACES ----*/
#all_spaces{
    z-index: 3101;
    position:absolute;
    left: 0px;
    top: 0px;
}
.space{
    /*border:solid 2px #000;*/
    position: absolute;
    background: transparent;
    cursor: pointer;
}
.space:focus{
    outline: none;
}
.debug_space{
    border:3px solid #333333;
}
.debug_space_active{
    border:3px solid #333333;
    background-color: rgba(255, 255, 255, 0.3)
}



.cruise{
    width: 100px;
    z-index: 1010;
    position: absolute;
    background: transparent;
}

#cruise_1{
    top: 530px;
    left: 820px;
}
#cruise_2{
    top: 430px;
    left: 2240px;
}
#cruise_3{
    top: 1440px;
    left: 1640px;
}
#cruise_4{
    top: 1110px;
    left: 2500px;
}
.cruise.rock{
  animation: rocktheboat ease-in-out 0.5s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: rocktheboat ease-in-out 0.5s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: rocktheboat ease-in-out 0.5s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
}

@keyframes rocktheboat{
  0% {
    transform:  rotate(0deg) ;
  }
  25% {
    transform:  rotate(5deg) ;
  }
  75% {
    transform:  rotate(-5deg) ;
  }
  100% {
    transform:  rotate(0deg) ;
  }
}

@-moz-keyframes rocktheboat{
  0% {
    -moz-transform:  rotate(0deg) ;
  }
  25% {
    -moz-transform:  rotate(5deg) ;
  }
  75% {
    -moz-transform:  rotate(-5deg) ;
  }
  100% {
    -moz-transform:  rotate(0deg) ;
  }
}

@-webkit-keyframes rocktheboat {
  0% {
    -webkit-transform:  rotate(0deg) ;
  }
  25% {
    -webkit-transform:  rotate(5deg) ;
  }
  75% {
    -webkit-transform:  rotate(-5deg) ;
  }
  100% {
    -webkit-transform:  rotate(0deg) ;
  }
}



#space_cannon{
    top: 1570px;
    left: 234px;
    width: 130px;
    height: 110px;
    position: absolute;
    background: transparent;
}

#space_cannon .hover_text{
    display: none;
    font-size: 1.6rem;
    margin-left: -12px;
    text-align: center;
    color: #000;
    margin-top: -120px;
}


/*---- PLAYER SPACES ----*/
#players{
    width:100%;
    height:100%;
    position: absolute;
}
.playerBalloon{
    position: absolute;
    width:35px;
    height:100px;
    background-image: url('../gameimages/balloons/balloon1.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 65px;
    height: 123px;
    z-index:100;
}
.pbc1{
    background-image: url('../gameimages/balloons/balloon1.png');
}
.pbc2{
    background-image: url('../gameimages/balloons/balloon2.png');
}
.pbc3{
    background-image: url('../gameimages/balloons/balloon3.png');
}
.pbc4{
    background-image: url('../gameimages/balloons/balloon4.png');
}
.pbc5{
    background-image: url('../gameimages/balloons/balloon5.png');
}
.pbc6{
    background-image: url('../gameimages/balloons/balloon6.png');
}
.playerPiece_solo{
    position: absolute;
    width: 48px;
    left: 30px;
    border-radius: 50%;
}
.playerPiece, .debug_circle{
    border-radius: 50%;
    position: absolute;
    width:35px;
    height:35px;
    /*z-index:100;*/
    /*left:0;
    right:0;
    bottom:0px;*/
    margin:auto;
}
.debug_circle{
    z-index:3105;
    background-color:#000000;
}
.debug_active{
    border:solid 3px #fcc203;
    background-color: #1a508a;
}
.debug_scale{
    border:solid 3px #f54290;
}
.playerImage{
    border-radius: 50%;
    width:35px;
    height:35px;
}

#space_popover .playerImage{
    margin-right:8px;
}

#space_popover{
    width:200px;
    width:auto;
    position:absolute;
    left: -99999px;
    top: -99999px;
    z-index:3110;
}
#space_popover hr{
    margin-bottom: 0.5rem
}
#space_popover b{
    display: block;
}
#space_popover .player-row{
    margin-top: 8px;
}

.popover {
    position: absolute;
    padding: 0px;
    background: #FFFFFF;
    /*border: #000 solid 1px;*/
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

    -webkit-box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.15);
    box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.15);

    padding: 12px;
    min-height:24px;

    max-width:360px;
}

.popover:after {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 78px;
    border-style: solid;
    border-width: 20px 20px 0;
    border-color: #FFFFFF transparent;
    display: block;
    width: 0;
    filter: drop-shadow(0px 4px 3px rgba(0, 0, 0, 0.2));
    -webkit-filter: drop-shadow(0px 4px 3px rgba(0, 0, 0, 0.2));
    -moz-filter: drop-shadow(0px 4px 3px rgba(0, 0, 0, 0.2));

    margin: auto;
    left: 0;
    right: 0;
}
.popover.right:after{
    top: 0;
    bottom: 0;
    right: -40px;
    left:auto;
    height: 40px;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #FFFFFF;
    filter: drop-shadow(5px 4px 3px rgba(0, 0, 0, 0.2));
    -webkit-filter: drop-shadow(5px 4px 3px rgba(0, 0, 0, 0.2));
    -moz-filter: drop-shadow(5px 4px 3px rgba(0, 0, 0, 0.2));
}
.popover.left:after{
    top: 0;
    bottom: 0;
    right: auto;
    left:-40px;
    height: 40px;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 20px solid #FFFFFF;
    filter: drop-shadow(-5px 4px 3px rgba(0, 0, 0, 0.2));
    -webkit-filter: drop-shadow(-5px 4px 3px rgba(0, 0, 0, 0.2));
    -moz-filter: drop-shadow(-5px 4px 3px rgba(0, 0, 0, 0.2));
}
.popoverPlayerSelect{
    margin-left:6px;
}

/*---- HUD ----*/
#HUD > div, #HUD > button{
    position: absolute;
    z-index: 3120;
}
#HUD_bottom_buttons{
    position: absolute;
    top: 0px;
    left: 0px;
}
.hubButton{
    background: #FFF;
    padding: 20px;
    margin: 20px;
    border-radius: 12px;
    color: #06D;
    float: right;
    margin-left: 0px;
}

#HUD_top{
    position: absolute;
    z-index: 3120;
    top:0px;
    right:0px;
    padding:12px;
    /*background: #333333;
    border-bottom-left-radius: 26px;
    filter: drop-shadow(-1px 2px 10px rgba(0, 0, 0, 0.9));
    -webkit-filter: drop-shadow(-1px 2px 10px rgba(0, 0, 0, 0.9));
    -moz-filter: drop-shadow(-1px 2px 10px rgba(0, 0, 0, 0.9));*/
}
#HUD_user_menu{
    float: right;
}

.btn-light{
    color: #07415C !important;
}
#HUD .btn{
    border-radius: 24px;
    margin-left: 12px;
    font-family: 'trailhead_bold2regular';
    font-size:1.2rem;
    padding-top:11px;
}
#HUD .btn-circle{
    padding: initial;
}
.btn-circle{
    border-radius: 50%;
    width:47px;
    height:47px;
    padding: initial !important;
    margin-left: 12px;
    border: none;
}
.btn-circle img{
    width:100%;
    height:100%;
}
.btn-circle:first-child{
    margin-left: 0px;
}

#logout {
    bottom: 0px;
    right: 200px;
}



/* ------------------------ */
/* ------ CB_MODAL ------ */
/* ------------------------ */
.cb_modal {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 3130;
    padding-top: 80px;
}
.cb_modal .button_container h2, .cb_modal .button_container .h2{
    text-align: center;
    margin-bottom:22px;
    font-family: 'trailhead_bold2regular';
}
.button_container{
    width:24%;
    height:auto;
    padding:16px;
    background:#EEEEEE;
    border-radius: 16px;
    margin: 0 auto;
    margin-top:-18px;
    /*filter: drop-shadow(0px 2px 10px rgba(0, 0, 0, 0.9));
    -webkit-filter: drop-shadow(0px 2px 10px rgba(0, 0, 0, 0.9));
    -moz-filter: drop-shadow(0px 2px 10px rgba(0, 0, 0, 0.9));*/
    overflow: scroll;
    max-height: 92%;
}
.button_container.wide{
    width:50%;
}
#overlay_user_menu{
    text-align: center;
}
#overlay_user_menu > .button_container{
    padding-top:34px;
}
#overlay_user_menu > .yourPlayerImage{
    width:80px;
    height:80px;
}


/* ------------------------ */
/* ------ OVERLAYS ------ */
/* ------------------------ */
.overlay {
    position: absolute;
    left: 0;
    bottom: 160px;
    right: 0;
    top: 0;
    /*background: rgba(0, 0, 0, 0.75);*/
    z-index: 3130;

    padding-bottom: 160px;
    bottom: 0;
    background: rgba(255,255,255,0.4);
}
.overlay.dark{
    background: rgba(0,0,0,0.25);
}
.overlay.dark .whitebg{
    background: rgba(0, 0, 0, 0.80);
    color:#DDD;
}
.overlay.dark .chat .chatfooter{
    background: rgba(0, 0, 0, 0.10);
    border-top-color: #333;
}
.overlay .content_container h2{
    text-align: center;
    margin-bottom:22px;
    font-family: 'trailhead_bold2regular';
}
.overlay .page_block{
    background: #DDD;
    padding:12px;
    border-radius: 8px;
}
.overlay .page_block_detour{
    width: 100%;
    padding: 8px;
    background: #ffc20a;
    font-size: 4rem;
    font-weight: bold;
    text-align: center;
    border-radius: 22px;
    margin-bottom:24px;
}
.overlay .page_block_roadblock{
    width: 100%;
    padding: 8px;
    font-size: 4rem;
    font-weight: bold;
    text-align: center;
    border-radius: 22px;
    background: #a61212;
    margin-bottom:24px;
    color:white;
}
.overlay .page_block_routeclue{
    width: 100%;
    padding: 8px;
    font-size: 4rem;
    font-weight: bold;
    text-align: center;
    border-radius: 22px;
    /*background: #a61212;*/
    margin-bottom:24px;
    /*color:white;*/
    background:#222;
    color:#ebba34;
}
.overlay .page_block_routeinfo{
    width: 100%;
    padding: 8px;
    font-size: 4rem;
    font-weight: bold;
    text-align: center;
    border-radius: 22px;
    background: #75afe6;
    margin-bottom:24px;
}
.overlay_content{
    position: absolute;
    left: 0;
    right: 0;
    top: 48px;
    background: rgba(255, 255, 255, 0.75);
    z-index: 3150;
	width:500px;
    margin: auto;
	padding:48px;
	height:auto;
	border-radius: 20px;
}

#overlay_found h2, h2.trailhead, #shirt_found h2{
    text-align: center;
    font-size: 3rem;
    font-family: 'trailhead_bold2regular';
    margin-bottom:24px;
}
.overlay .header_container h1{
    font-family: 'trailhead_bold2regular';
    color:#07415C;
    font-size: 5rem;
    float:left;
    max-width: 75vw;
}
.overlay .header_container img{
    float: left;
    width: 180px;
    margin-top: -50px;
    margin-right: 20px;
    margin-left: -30px;
}
.overlay.dark .header_container h1{
    color:#FFFFFF;
}

/* overlay_2 */
@media only screen and (max-width: 1380px) {
    #overlay_2 .header_container h1{
        font-size: 4.5rem;
    }
}
@media only screen and (max-width: 1280px) {
    #overlay_2 .header_container h1{
        font-size: 4rem;
    }
}
@media only screen and (max-width: 1180px) {
    #overlay_2 .header_container h1{
        font-size: 3.5rem;
    }
}
@media only screen and (max-width: 1080px) {
    #overlay_2 .header_container h1{
        font-size: 3rem;
    }
}
/* overlay_8 */
@media only screen and (max-width: 1110px) {
    #overlay_8 .header_container h1{
        font-size: 4.5rem;
    }
}
/* overlay_1 */
@media only screen and (max-width: 1140px) {
    #overlay_1 .header_container h1{
        font-size: 4.5rem;
    }
}

.badge_bg{
    background-color:rgba(0,0,0,0.8);
}
.overlay .header_container .header_description{
    color:#FFFFFF;
    text-shadow:0 1px 0 #000, 0 2px 0 #000, 0 3px 0 #000,0 50px 30px rgba(0,0,0,.3);
    font-size: 1.5rem;
    margin-top: 20px;
}
@media only screen and (max-width: 1435px) {
    .overlay .header_container .header_description{
        font-size: 1.2rem;
    }
}
@media only screen and (max-width: 1175px) {
    .overlay .header_container .header_description{
        display: none;
    }
}
@media only screen and (max-width: 880px) {
    .overlay .header_container .header_description{
        display: none;
    }
}
@media only screen and (max-width: 720px) {
    .overlay .header_container .header_description{
        display: none;
    }
}
.overlay .header_container{
    position: absolute;
    top: 58px;
    left: 84px;
    text-align: center;
    z-index: 10;
}



.content_container{
    position: relative;
    height:100%;
}
.overlay .content_container{
    padding: 0px;
    margin: 55px;
    margin-bottom: 0px;
    border-radius: 30px;
}
.content_container .modal_content{
    padding:42px;
    padding-top:68px !important;
    border-radius: 20px;
    position: absolute;
    top:0px;
    bottom:0px;
    overflow: scroll;
    width: 100%;
}
.modal_content img{
    max-width: 100%;
}
.col-last{
    padding-right: 0px;
    position: absolute;
    right: 0px;
    bottom: 0px;
    top: 0px;
}
.chat-message-input{
    margin-bottom: 0px !important;
}
.chatbody{
    max-height: 100%;
    overflow: scroll;
    padding-bottom: 34px;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.chatbody::-webkit-scrollbar{
    display: none;
}

/*
.content_container .row{
    min-height: 86%;
    margin-left: 0px;
    margin-right: 0px;
}
.content_container .modal_content{
    padding:48px;
    border-radius: 20px;
}
*/
.modal_content p{
    font-size:1.2rem;
}
.modal_content b{
    font-size:1.4rem;
}
.meetjoin-containerlink{
    position: relative;
    margin: auto;
    text-align: center;
    display: block;
    margin-top:32px;
}
.meetjoin-bg{
    width:100%;
    width: 50vw;
}
.meetjoin-click{
    position: absolute;
    bottom:3vw;
    left:0px;
    right:0px;
    background: white;
    border-radius: 30px;
    padding:12px;
    width: fit-content;
    margin: auto;
    padding-right: 18px;
    color: #108A7F;
    font-weight: bold;
}
.meetjoin-click img{
    width:22px;
    float:left;
    margin-right:12px;
}
.meetjoin-title{
    position: absolute;
    bottom:9vw;
    left:0px;
    right:0px;
    font-size: 1.5rem;
    color:#032D60;
    font-weight: bold;
}
.col-last{
    padding-right: 0px;
}

.content_container .chat{
    height: 100%;
    padding: 34px !important;
}

.chat .chatfooter{
    position: absolute;
    bottom: 0px;
    left: 0px;
    border-top: 1px solid #DDD;
    right: 0px;
    padding: 18px;
    background:white;
}
.chat .chatmessage{
    background:#E8F0F6;
    border-radius: 8px;
    width:90%;
    padding:10px;
    clear: both;
    float: left;
    margin-bottom: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
}
.chat .chatmessage.myMessage{
    clear: both;
    float: right;
    background:#376A6C;
    color:#FFFFFF;
}
.chat .chatmessage .playerImage{
    width:24px;
    height:24px;
    float:left;
    margin-right:6px;
}
.chat .chatmessage .playerName{
    float:left;
    font-weight: bold;
    font-size: 0.8rem;
    opacity: 0.5;
}
.chat .chatmessage .chattext{
    width:100%;
    clear:both;
    font-size: 1rem;
}
.whitebg{
    background: rgba(255, 255, 255, 0.95);
}

.close-overlay:focus{
    background-color:#CCC;
}
.show_timezones{
    font-size:13px;
}
.overlay .close-overlay{
    position: absolute;
    right: 39px;
    top: 72px;
    padding:12px;
    border-radius: 20px;
}
.overlay .close-overlay img{
    width:32px;
}
.content_container .close-overlay{
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 10;
}
.container_large_font{
    font-size:1.3rem;
}
.container_white{
    background: white;
}
.container_blue{
    background: #E8F5FB;
}
.container_round{
    border-radius: 12px;
}
.container_padding{
    padding:21px;
}
.container_shadow{
    -webkit-box-shadow: 0px 4px 8px 0px rgba(40,18,2,0.2);
    -moz-box-shadow: 0px 4px 8px 0px rgba(40,18,2,0.2);
    box-shadow: 0px 4px 8px 0px rgba(40,18,2,0.2);
}
/* INFO */
#overlay_info .content_container h2{
    font-size: 4rem;
}
#overlay_info hr{
    border-color: #A86403;
    border-width: 6px;
}
#overlay_info table{
    margin:0px;
    width:100%;
}
#optional_events_callout, #optional_bingo, #singup_for_breakouts{
    margin: auto;
    max-width: 1220px;
    padding: 40px;
    margin-bottom:24px;
}
#optional_bingo, #singup_for_breakouts{
    padding:0px;
    height:130px;
    overflow: hidden;
    background: #B6DD72;
    position: relative;
    cursor: pointer;
    display: block;
}
#singup_for_breakouts{
    background: #FFF;
}
#optional_bingo img, #singup_for_breakouts img{
    width:100%
}
#optional_bingo .optional_bingo_text, #singup_for_breakouts .optional_bingo_text{
    font-family: 'trailhead_bold2regular';
    font-size: 2rem;
    color:#203000;
    position: absolute;
    top: 18px;
    font-size: 3.5vw;
}
#singup_for_breakouts .optional_bingo_text{
    text-align: center;
    width:92%;
    color:#333;
}
#optional_events_callout .col{
    padding-left:30px;
    padding-right:30px;
    cursor: pointer;
}
#optional_events_callout .col center{
    font-weight: bold;
    font-size: 1.2rem;
    padding-top:8px;
}
@media only screen and (max-width: 920px) {
    #optional_events_callout .col{
        padding-left:12px;
        padding-right:12px;
    }
}
/* ------------------------ */
/* ------ Buttons ------ */
/* ------------------------ */
.btn-primary{
    background-color:#07415C;
    border:#07415C;
}
.btn-secondary{
    border-color:#07415C;
    color:#07415C;
    border-width: 2px;
    background:white;
}
.btn-primary:hover, .btn-primary.active:hover, .btn-primary:active:hover{
    background-color:#052d40;
    border:#052d40;
}
.btn-primary:active, .btn-primary:focus, .btn-primary.focus, .btn-primary.active.focus, .btn-primary:active:focus{
    background-color:#07415C;
    border:#07415C;
    outline-color:#6B9557;
}
.btn-primary.disabled, .btn-primary:disabled{
    background-color:#444444;
    border:#444444;
    outline-color:#444444;
}

.big_number{
    font-size:8rem;
}

.progressbar{
    width:100%;
    height:18px;
    background-color: #84B7A1;
    border-radius: 10px;
}
.progress{
    width:60%;
    height:18px;
    background-color:#265D47;
    border-radius: 10px;
}

/* ------------------------ */
/* ------ ACCESSIBILITY ------ */
/* ------------------------ */

.assistive-text{
    position: absolute!important;
    margin: -1px!important;
    border: 0!important;
    padding: 0!important;
    width: 1px!important;
    height: 1px!important;
    overflow: hidden!important;
    clip: rect(0 0 0 0)!important;
    text-transform: none!important;
    white-space: nowrap!important;
}

/* ------------------------ */
/* ------ TABLES ------ */
/* ------------------------ */
table{
    width:98%;
    margin:1%;
    -webkit-box-shadow: 0px 4px 8px 0px rgba(40,18,2,0.2);
    -moz-box-shadow: 0px 4px 8px 0px rgba(40,18,2,0.2);
    box-shadow: 0px 4px 8px 0px rgba(40,18,2,0.2);
    background: white;
}
table td, table th{
    padding:8px;
}
table thead tr{
    color:#084968;
    font-weight: bold;
}
table tr{
    border-bottom: solid 1px #CBD1D6;
}

/* ------------------------ */
/* ------ HUNT ------ */
/* ------------------------ */
.overlay .h2{
    font-family: 'trailhead_bold2regular';
    font-size:3rem;
}
.overlay .h3{
    font-family: 'trailhead_bold2regular';
    font-size:2rem;
}
/*
.overlay .content_container{
    padding: 0px;
    margin: 40px;
    margin-bottom: 0px;
    border-radius: 30px;
}
*/
#overlay_hunt .btn-block{
    margin-bottom:16px;
}
.day_gift_label{
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
}
.day_gift_img{
    width: 100%;
    max-width: 300px;
    margin:auto;
    text-align: center;
    display: block;
    margin-top:25px;
}
.day_gift_time{
    text-align: center;
    font-size: 1.4rem;
}
#murder_room_btn{
    margin-bottom: 21px;
}
#detective_cody{
    height: 145%;
    position: absolute;
    right: 30px;
    top: 22px;
}
.button_container{
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.button_container::-webkit-scrollbar {
  display: none;
}


#overlay_game{

}
#trailhead_screenshot{
    max-width:800px;
    margin:auto;
    height:100%;
}
#trailhead_screenshot a{
    width:100%;
    height:100%;
    display:block;
    background-image:url('../gameimages/game_screenshot.png');
    background-position: top right;
    border-radius: 12px;
}
#trailhead_story .row{
    padding-top:12px;
    padding-bottom: 12px;
}
#trailhead_story h2{
    font-size: 3rem;
    margin-top: 20px;
}
#overlay_bingo h2{
    font-size: 3rem;
}
#overlay_bingo ol li{
    margin-bottom:12px;
}
#overlay_bingo ul li{
    margin-bottom:12px;
}


#astroReminder{
    position: fixed;
    z-index: 3140;
}

.kudos_img{
    width:100%;
    border-radius: 50%;
    padding-bottom: 1em;
}
.kudos_person{
    padding:24px;
    text-align: center;
}


/*---- DEETOUR -----*/

.detourBox{
    margin: auto;
    text-align: center;
}
.detourBtn{
    border:solid 1px #AAA;
    padding:24px;
    margin:12px;
    min-width:200px;
    font-size: 1.5rem;
}
.detourBtn:hover{
    background: #EEE;
}




 /* ----------------------------------------------
  * Generated by Animista on 2020-9-29 22:8:54
  * Licensed under FreeBSD License.
  * See http://animista.net/license for more info.
  * w: http://animista.net, t: @cssanimista
  * ---------------------------------------------- */


@-webkit-keyframes text-pop-up-bl{
     0%{
         -webkit-transform:translateY(0) translateX(0);
         transform:translateY(0) translateX(0);
         -webkit-transform-origin:50% 50%;
         transform-origin:50% 50%;
         text-shadow:none;
         /*opacity: 0;*/
     }100%{
        -webkit-transform:translateY(50px) translateX(-50px);
        transform:translateY(50px) translateX(-50px);
        -webkit-transform-origin:50% 50%;
        transform-origin:50% 50%;
        text-shadow:0 1px 0 #084968,0 2px 0 #084968,0 3px 0 #084968,0 4px 0 #084968,0 5px 0 #084968,0 6px 0 #084968,0 7px 0 #084968,0 8px 0 #084968,0 9px 0 #084968,0 50px 30px rgba(0,0,0,.3);
        /*opacity: 1;*/
    }
}

/*
text-pop-up-bottom
text-pop-up-br (bottom right)
text-pop-up-top
text-pop-up-bl (bottom left)
*/

 @-webkit-keyframes text-pop-up-bottom{0%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;text-shadow:none}100%{-webkit-transform:translateY(50px);transform:translateY(50px);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;text-shadow:0 1px 0 #084968,0 2px 0 #084968,0 3px 0 #084968,0 4px 0 #084968,0 5px 0 #084968,0 6px 0 #084968,0 7px 0 #084968,0 8px 0 #084968,0 9px 0 #084968,0 50px 30px rgba(0,0,0,.3)}}@keyframes text-pop-up-bottom{0%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;text-shadow:none}100%{-webkit-transform:translateY(50px);transform:translateY(50px);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;text-shadow:0 1px 0 #084968,0 2px 0 #084968,0 3px 0 #084968,0 4px 0 #084968,0 5px 0 #084968,0 6px 0 #084968,0 7px 0 #084968,0 8px 0 #084968,0 9px 0 #084968,0 50px 30px rgba(0,0,0,.3)}}
 @-webkit-keyframes text-pop-up-br{0%{-webkit-transform:translateY(0) translateX(0);transform:translateY(0) translateX(0);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;text-shadow:none}100%{-webkit-transform:translateY(50px) translateX(50px);transform:translateY(50px) translateX(50px);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;text-shadow:0 1px 0 #084968,0 2px 0 #084968,0 3px 0 #084968,0 4px 0 #084968,0 5px 0 #084968,0 6px 0 #084968,0 7px 0 #084968,0 8px 0 #084968,0 9px 0 #084968,0 50px 30px rgba(0,0,0,.3)}}@keyframes text-pop-up-br{0%{-webkit-transform:translateY(0) translateX(0);transform:translateY(0) translateX(0);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;text-shadow:none}100%{-webkit-transform:translateY(50px) translateX(50px);transform:translateY(50px) translateX(50px);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;text-shadow:0 1px 0 #084968,0 2px 0 #084968,0 3px 0 #084968,0 4px 0 #084968,0 5px 0 #084968,0 6px 0 #084968,0 7px 0 #084968,0 8px 0 #084968,0 9px 0 #084968,0 50px 30px rgba(0,0,0,.3)}}
 @-webkit-keyframes text-pop-up-top{0%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;text-shadow:none}100%{-webkit-transform:translateY(-50px);transform:translateY(-50px);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;text-shadow:0 1px 0 #084968,0 2px 0 #084968,0 3px 0 #084968,0 4px 0 #084968,0 5px 0 #084968,0 6px 0 #084968,0 7px 0 #084968,0 8px 0 #084968,0 9px 0 #084968,0 50px 30px rgba(0,0,0,.3)}}@keyframes text-pop-up-top{0%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;text-shadow:none}100%{-webkit-transform:translateY(-50px);transform:translateY(-50px);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;text-shadow:0 1px 0 #084968,0 2px 0 #084968,0 3px 0 #084968,0 4px 0 #084968,0 5px 0 #084968,0 6px 0 #084968,0 7px 0 #084968,0 8px 0 #084968,0 9px 0 #084968,0 50px 30px rgba(0,0,0,.3)}}