/* Copyright (C) 2020 paradigmQ
  14415 SE Mill Plain Blvd Suite 104B,
  Vancouver, WA 98684
  (360) 207-5353
  info@paradigmq.com

  Author: Sam Simonstrong
  sams@escapegamespdx.com */
/* ------------------GLOBALS ------------------ */
button:focus {
    outline: 5;
    outline-color: grey;
}

video:focus {
    outline: 0;
}

input:focus {
    outline: 5;
    outline-color: grey;
}

html {
    min-width: 100%;
    min-height: 100%;
    background-color: #1d1d1d;
}

html > body {
    min-width: 100%;
    min-height: 100%;
    background-color: #1d1d1d;
    background-image: -webkit-linear-gradient(134deg, rgb(60, 60, 60) 13%, rgb(26, 26, 26) 45.5988%, rgb(56, 56, 56) 67%, rgb(126, 126, 126) 87%);
    background-attachment: fixed;
}

* {
    box-sizing: content;

    /* font-size: 16px */
    color: white;
    font-family: courier, monospace;
    text-decoration: none;
    text-transform: none;
    border-width: 0;
    margin: 0;
    padding: 0;
    position: relative;
    top: 0px;
}

a {
    text-transform: none;
    text-decoration: none;
    color: #ffffff;
    width: 100px;
    height: 100px;
}

.clearFix::after {
    content: "";
    clear: both;
    display: table;
}

.outroButton {
    postion: absolute;

    /* display: none */
    z-index: 50;
    position: absolute;
    top: 256px;
    left: 21px;
}

/* ------------------ALL BACKGROUND LOCATIONS------------------ */
.allContentContainers {
    width: 900px;
    height: 765px;
    position: relative;
    float: left;
    background-color: #000000;
}

#casinoBG {
    background-image: url('../assets/bg/casinoBG.jpg');
}

#crimesceneBG {
    background-image: url('../assets/bg/crimesceneBG.jpg');
    background-repeat: no-repeat;
}

#endBG {
    background-image: url('../assets/bg/endBg.jpg');
}

#mapBG {
    background-image: url('../assets/bg/mapBG.jpg');
    border-top-width: 0px;
}

#nightclubBG {
    background-image: url('../assets/bg/nightclubBG.jpg');
}

#payphoneBG {
    background-image: url('../assets/bg/phoneBG.jpg');
}

#stationBG {
    background-image: url('../assets/bg/stationBG.jpg');
}

#theatreBG {
    background-image: url('../assets/bg/theatreBG.jpg');
}

/* ------------------0.0 BASIC UI ------------------ */
.passwordEntry {
    margin-top: 27px;
    background-color: #454545;
    border-radius: 25px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    padding: 19px 50px 26px;
    box-sizing: content-box;
    width: 400px;
    position: relative;
    background-image: url('../assets/bg/folderBg.jpg');
    background-repeat: repeat;
    top: 10px;
    box-shadow: -7px 12px 14px #000000;
}

.passwordEntry input {
    width: 100%;
    margin-top: 15;
    font-size: 40px;
    padding: 5px;
    transition: background-color .2s;
    background-color: #000000;
    position: relative;
}

.passwordEntry input:hover {
    background-color: #252525;
}

.passwordEntry h2 {
    background-color: rgba(0, 0, 0, 0);
    text-align: center;
    font-size: 40px;
    padding-bottom: 5px;
    padding-top: 5px;
    border-radius: 27px;
    position: relative;
}

.submitButt {
    margin-top: 12px;
    font-size: 3em;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
}

.containerMain {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding-top: 30px;
    padding-bottom: 200px;
}

.containerMain::after {
    content: "";
    clear: both;
    display: table;
}

.sideFrames {
    width: 100px;
    height: auto;
    padding-right: 20px;
    padding-left: 20px;
    display: inline-block;
    float: left;
    background-color: rgb(0, 0, 0);
    position: relative;
}

.sideFrames a>img {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    opacity: .5;
    transition: opacity .6s;

    /* position: relative */
    border-radius: 10px;
}

.sideFrames a>img:hover {
    opacity: 1;
}

.sideWhiteBlocks {
    width: 100px;
    height: 100px;
    margin-bottom: 80px;
    background-color: #ffffff;
    border-radius: 10px;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 75px;
    float: left;
}

.incorrectNotify {
    transition: opacity .5s;
    position: absolute;
    width: 410px;
    text-align: center;
    font-size: 55px;
    border-radius: 29px;
    display: inline;
    opacity: 1;
    top: 5px;
    z-index: 1;
}

.videoModalBG {
    display: none;
    position: fixed;
    z-index: 200;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
}

.videoModalContent {
    width: 854px;
    background-color: #858585;
    padding: 30px;
    margin-top: 65px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    background-image: -webkit-linear-gradient(222deg, rgb(18, 18, 18) 7.41916%, rgb(104, 104, 104) 47%, rgb(18, 18, 18) 88.6228%);
    box-shadow: 0px 0px 53px #000000;
}

.videoModalVideo {
    margin-left: auto;
    margin-right: auto;
    position: inherit;
    display: inline-block;
    width: 100%;
    max-width: 854;
    max-height: 480px;
}

.videoModalButton {
    cursor: pointer;
    display: inline;
    width: 80%;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 24px;
    border-radius: 10px;
    margin: 28px 10% 10px;
    position: inherit;
    background-color: #000000;
}

/* ------------------0.1 INDEX ------------------ */
#tempPromo {
    max-width: 350px;
    position: relative;
    margin-right: auto;
    margin-top: 100px;
    margin-left: auto;
    display: block;
    width: 100%;
}

#timertime {
    font-size: 3em;
    text-align: center;
    position: relative;
}

/* ------------------0.2 MAP ------------------ */
.map {
    clear: both;
    position: relative;
}

.crossOut::before {
    left: -40px;
    top: -40px;
    position: absolute;
    content: url(../assets/map/mapCrossout.png);
    z-index: 50;
}

.mapCircle {
    position: absolute;
    z-index: 100;
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: black;
    border-radius: 50%;
    box-shadow: -3px 3px;
}

.mapCircle::after {
    position: inherit;
    top: 40px;
    content: "";
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 80px solid black;
    z-index: -1;
}

.mapContainer {
    display: flex;
    justify-content: center;
}

.mapCircle h5 {
    font-size: 16px;
    text-align: center;
    text-decoration: underline;
    top: -16px;
    position: absolute;
    width: 150px;
    color: #000000;
    text-shadow: -1px 1px white;
    background-color: rgba(255, 255, 255, 0);
    left: -25px;
}

.mapImage {
    width: 90px;
    position: absolute;
    height: 90px;
    top: 5px;
    left: 5px;
    border-radius: 50%;
    z-index: 1;
}

/* ------------------  2. OFFICE - Interesting Developments ------------------ */
.payphoneButt {
    border-width: 0;
    cursor: pointer;
    position: absolute;
    display: inline-block;
    background-color: rgba(0, 0, 0, 0);
    width: 47px;
    height: 47px;
    background-repeat: no-repeat;
    background-position: center center;
    margin-left: 0px;
}

#butt1 {
    top: 482px;
    left: 464px;
    background-image: url('../assets/payphone/1.jpg');
}

#butt2 {
    top: 482px;
    left: 541px;
    background-image: url('../assets/payphone/2.jpg');
}

#butt3 {
    top: 482px;
    left: 619px;
    background-image: url('../assets/payphone/3.jpg');
}

#butt4 {
    top: 550px;
    left: 464px;
    background-image: url('../assets/payphone/4.jpg');
}

#butt5 {
    top: 550px;
    left: 541px;
    background-image: url('../assets/payphone/5.jpg');
}

#butt6 {
    top: 550px;
    left: 619px;
    background-image: url('../assets/payphone/6.jpg');
}

#butt7 {
    top: 615px;
    left: 464px;
    background-image: url('../assets/payphone/7.jpg');
}

#butt8 {
    top: 615px;
    left: 541px;
    background-image: url('../assets/payphone/8.jpg');
}

#butt9 {
    top: 615px;
    left: 619px;
    background-image: url('../assets/payphone/9.jpg');
}

#butt0 {
    top: 678px;
    left: 541px;
    background-image: url('../assets/payphone/0.jpg');
}

#dialedNums {
    position: absolute;
    font-size: 112px;
    text-align: center;
    width: 100%;
    background-color: rgba(0, 0, 0, 0);
    top: 0px;
    text-shadow: 7px 6px 4px #000000;
}

#callText {
    transition: opacity 1s;
    opacity: 0;
    clip-path: polygon(33% 0, 65% 8%, 95% 0, 97% 37%, 99% 79%, 87% 100%, 4% 89%, 6% 64%, 2% 35%, 4% 11%);
    border-color: #ffffff;
    display: inline-block;
    margin-top: 2px;
    padding: 50px 42px 33px;
    max-width: 400px;
    background-color: #000000;
    color: #ffffff;
    position: absolute;
    top: 259px;
    left: 181px;
    text-align: center;
    font-size: 18px;
}

#extNums {
    position: relative;
    top: 147px;
    font-size: 64px;
    background-color: rgba(0, 0, 0, 0);
    margin-left: 244px;
    text-align: center;
    text-shadow: 2px 2px 5px #000000;
}

#notesBG {
    background-image: url('../assets/bg/notesBG.jpg');
}

#casinoMapCircle {
    left: 208px;
    top: 417px;
    display: none;
}

#crimesceneMapCircle {
    left: 474px;
    top: 501px;
}

#nightclubMapCircle {
    top: 328px;
    left: 303px;
    display: none;
}

#payphoneMapCircle {
    left: 62px;
    top: 235px;
}

#theatreMapCircle {
    left: 503px;
    top: 245px;
    display: none;
}

#stationMapCircle {
    top: 106px;
    left: 397px;
    display: none;
}

#officeMapCircle {
    left: 716px;
    top: 84px;
}

#officeBG {
    background-image: url('../assets/bg/officeBG.jpg');
}

#casinoBackground {
    background-image: url('../assets/bg/casinoBG.jpg');
}

.crimesceneEvidence {
    position: absolute;
}

.crimesceneEvidence:hover {
    box-shadow: inset 0px 0px 165px #454545;
    border-radius: 239px;
}

#crimeAshelves {
    width: 405px;
    height: 232px;
    left: 332px;
    top: 500px;
    background-color: rgba(0, 0, 0, 0);
    background-image: url('../assets/crimescene/clueAshelves.png');
    background-repeat: no-repeat;
    background-position: right bottom;
}

#crimeBPhoto {
    background-color: rgba(0, 0, 0, 0);
    background-image: url('../assets/crimescene/clueBphoto.png');
    left: 415px;
    top: 17px;
    width: 156px;
    height: 115px;
}

#crimeCglass {
    width: 157px;
    height: 81px;
    background-color: rgba(0, 0, 0, 0);
    background-image: url('../assets/crimescene/clueCglass.png');
    top: 320px;
    left: 274px;
}

#crimeDcalendar {
    width: 157px;
    height: 192px;
    background-color: rgba(0, 0, 0, 0);
    background-image: url('../assets/crimescene/clueDcalendar.png');
    top: 17px;
    left: 164px;
}

#crimeEWhiskey {
    width: 211px;
    height: 186px;
    background-image: url('../assets/crimescene/clueEwiskey.png');
    background-color: rgba(0, 0, 0, 0);
    top: 263px;
    left: 12px;
}

#crimeFpockets {
    width: 358px;
    height: 359px;
    background-color: rgba(0, 0, 0, 0);
    background-image: url('../assets/crimescene/clueFpockets.png');
    left: 543px;
    top: 200px;
}

#crimeGbook {
    width: 95px;
    height: 74px;
    background-color: rgba(0, 0, 0, 0);
    background-image: url('../assets/crimescene/clueGbook.png');
    top: 225px;
    left: 433px;
}

#crimeHwallet {
    width: 181px;
    height: 154px;
    top: 420px;
    background-color: rgba(0, 0, 0, 0);
    background-image: url('../assets/crimescene/clueHwallet.png');
    left: 216px;
}

#crimesceneEviDescription {
    width: 339px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.44);
    position: absolute;
    top: 11px;
    left: 554px;
    z-index: 100;
}

#crimesceneEviDesText {
    font-size: 24px;
    padding: 8px 15px 13px;
    position: relative;
}

.troubleBoyPortrait {
    width: 175px;
    height: 175px;
    background-color: rgba(0, 0, 0, 0);
    position: absolute;
    opacity: 0.5;
}

#troubleBoyAngel {
    top: 248px;
    left: 479px;
    background-image: url('../assets/nightclub/troubleBoyAngel.jpg');
}

.troubleBoyPortrait:hover {
    opacity: 1;
    box-shadow: 0 0 34px #ffffff;
}

#troubleBoyBruno {
    background-image: url('../assets/nightclub/troubleBoyBruno.jpg');
    left: 210px;
    top: 107px;
}

#troubleBoyGavin {
    background-image: url('../assets/nightclub/troubleBoyGavin.jpg');
    left: 678px;
    top: 169px;
}

#troubleBoyJules {
    background-image: url('../assets/nightclub/troubleBoyJules.jpg');
    left: 23px;
    top: 523px;
}

#troubleBoyKeanu {
    background-image: url('../assets/nightclub/troubleBoyKeanu.jpg');
    left: 255px;
    top: 304px;
}

#troubleBoyMiles {
    background-image: url('../assets/nightclub/troubleBoyMiles.jpg');
    left: 17px;
    top: 43px;
}

#troubleBoyRandy {
    background-image: url('../assets/nightclub/troubleBoyRandy.jpg');
    left: 260px;
    top: 509px;
}

#troubleBoyRoman {
    background-image: url('../assets/nightclub/troubleBoyRoman.jpg');
    left: 447px;
    top: 40px;
}

#troubleBoyTerry {
    background-image: url('../assets/nightclub/troubleBoyTerry.jpg');
    left: 30px;
    top: 293px;
}

#troubleBoyDescription {
    position: absolute;
    top: 448px;
    left: 473px;
    width: 413px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.77);
    font-size: 2px;
}

#troubleBoyDescription > h1 {
    font-size: 41px;
    position: relative;
}

#troubleBoyDescription > p {
    padding: 18px;
    font-size: 20px;
    position: relative;
}

#officeTextBody {
    font-size: 25px;
    color: #000000;
    position: absolute;
    top: 280px;
    left: 155px;
    width: 631px;
    line-height: 43px;
}

.allContentContainers > input {
    background-color: #000000;
    padding-top: 8px;
    padding-bottom: 9px;
    z-index: 100;
    padding-left: 12px;
    font-size: 20px;
    position: absolute;
}

#officeIn1Merlot {
    top: 324px;
    left: 447px;
    width: 97px;
}

#officeIn2Window {
    top: 369px;
    left: 660px;
    width: 97px;
}

#officeIn4Knife {
    top: 454px;
    left: 668px;
    width: 77px;
}

#officeIn5Footprints {
    top: 496px;
    left: 356px;
    width: 154px;
}

#officeIn6Mayor {
    top: 580px;
    left: 147px;
    width: 87px;
}

#officeIn7Amy {
    top: 582px;
    left: 498px;
    width: 66px;
}

#officeIn8Yachts {
    top: 624px;
    left: 325px;
    width: 91px;
}

#officeIn9NineThirty {
    top: 663px;
    left: 541px;
    width: 101px;
}

#officeIn3Two {
    top: 408px;
    left: 415px;
    width: 54px;
}

#incorrectOfficeNotify {
    transition: opacity .5s;
    position: absolute;
    width: 410px;
    text-align: center;
    font-size: 55px;
    border-radius: 29px;
    display: inline;
    opacity: 1;
    top: 5px;
    z-index: 1;
}

#crimesceneEviDescription > h1 {
    font-size: 24px;
    position: relative;
}

#notesBG button {
    font-size: 48px;
    background-color: rgba(0, 0, 0, 0.27);
    position: absolute;
    padding: 14px;
}

#notesBG > button:hover {
    background-color: rgba(55, 55, 55, 0.92);
}

#resetGameButt {
    top: 581px;
    left: 576px;
}

#act2BG {
    position: absolute;
    z-index: 1;
    top: 255px;
    left: 21px;
    display: none;
}

#finaleBG {
    position: absolute;
    z-index: 1;
    top: 511px;
    left: 20px;
    display: none;
}

#mainHintContainer {
    height: 100%;
    width: 900px;
    min-height: 765px;
    position: relative;
    background-image: -webkit-linear-gradient(291deg, rgb(61, 61, 61) 2.17391%, rgb(0, 0, 0) 55.7971%, rgb(36, 36, 36) 94.9275%);
}

.hintButt {
    width: 32%;
    height: 62px;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    padding-left: 67px;
}

.hintButt > button {
    color: #000000;
    font-size: 19px;
    padding: 14px;
}

.hintContainer {
    width: 100%;
    display: none;
}

.hintButtContainer {
    width: 100%;
    margin-top: 23px;
    height: 100%;
}

.hintContainer > h1 {
    width: 100%;
    position: relative;
    font-size: 40px;
    text-align: center;
    font-variant: small-caps;
    padding-top: 9px;
}

.hintDivider {
    background-color: #ffffff;
    padding: 0;
    margin: 16px 16px 25px;
    height: 5px;
    position: relative;
    display: block;
}

.hintItem {
    display: none;
    position: relative;
    float: left;
    width: 100%;
    clear: both;
    height: auto;
    text-align: center;
}

.hintItem > p {
    font-size: 26px;
    padding: 20px 54px 37px 48px;
}

.hintContentContainer {
    height: 100%;
    position: relative;
    display: inline-block;
    width: 100%;
}

#reportMapCircle {
    left: 254px;
    top: 94px;
    display: none;
}

.indexHeader {
    text-align: center;
    font-variant: small-caps;
    font-size: 64px;
}

.indexInfo {
    padding: 22px;
}

.indexInfo > img {
    width: 200px;
    height: 200px;
    float: left;
}

.indexInfo  p {
    float: left;
    width: 65%;
}

.indexInfo  a {
    float: left;
    font-size: 24px;
    margin-left: 40px;
    text-decoration: underline;
    text-transform: uppercase;
    height: 100%;
}

.startEndMainContainers {
    background-image: -webkit-linear-gradient(291deg, rgb(61, 61, 61) 2.17391%, rgb(0, 0, 0) 55.7971%, rgb(36, 36, 36) 94.9275%);
}

#indexMainContainer {
    height: 2295px;
}

.startEndMainContainers > h2 {
    font-size: 46px;
    background-attachment: fixed;
}

.startEndMainContainers p {
    font-size: 24px;
    margin: 8px 37px 8px 40px;
}

.startEndMainContainers > a {
    transition: background .2s;
    width: 405px;
    margin-left: auto;
    margin-right: auto;
    font-size: 43px;
    text-align: center;
    margin-top: 58px;
    padding: 18px 16px 0px;
    background-color: #ffffff;
    border-radius: 16px;
    font-variant: normal;
    color: #000000;
    text-transform: uppercase;
    position: relative;
    display: block;
    min-height: 113px;
}

#startGameButt:hover {
    background-color: #8a8a8a;
}

#endMainContainer {
    height: 1020px;
}

#act3BG {
    position: absolute;
    top: 510px;
    left: 21px;
    z-index: 1;
    display: none;
}

#stationWitness {
    right: 0;
    top: 127px;
    position: absolute;
    z-index: 1;
}

#stationStatement {
    margin-top: 39px;
    margin-left: 48px;
    width: 626px;
    background-color: rgba(0, 0, 0, 0);
    z-index: 2;
    position: absolute;
}

#stationStatement p {
    font-size: 26px;
}

#stationStatementBG {
    width: 641px;
    position: absolute;
    color: rgba(0, 0, 0, 0.66);
    top: 29px;
    left: 33px;
    height: 573px;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 0;
}

#stationFadeInContent {
    opacity: 0;
    transition: opacity 1.5s;
}

.theatreButt {
    width: 133px;
    height: 100px;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: .7;
}

.theatreButt:hover {
    opacity: 1;
    box-shadow: 0px 0px 30px;
}

#heWalkedButt {
    background-image: url('../assets/theatre/heWalkedIcon.jpg');
}

#theChaseButt {
    background-image: url('../assets/theatre/theChaseIcon.jpg');
}

#detourButt {
    background-image: url('../assets/theatre/detourIcon.jpg');
}

#timetableButt {
    background-image: url('../assets/theatre/timetableIcon.jpg');
}

#kansasCityButt {
    background-image: url('../assets/theatre/kansasCityIcon.jpg');
}

#theatreContentVideo {
    width: 634px;
    position: absolute;
    top: 136px;
    left: 133px;
}

#casinoSlideshow {
    top: 300px;
    position: relative;
    opacity: 1;
    transition: opacity .3s;
    border-radius: 16px;
}

#notesBG > p {
    font-family: 'Permanent Marker', cursive;
    color: #000000;
    font-size: 32px;
    width: 335px;
    position: absolute;
}

.notesListHover {
    top: 345px;
    left: 588px;
}

.notesListHover:hover > img {
    opacity: 1;
}

.notesChecklist {
    width: 598px;
    position: absolute;
    top: -97px;
    z-index: 10;
    opacity: 0;
    left: -588px;
}

#officeBG > a {
    transition: opacity .2s;
    display: inline-block;
    width: 251px;
    margin-top: 52px;
    margin-left: 42px;
    padding: 19px;
    font-size: 18px;
    text-align: center;
    height: auto;
    background-color: rgba(0, 0, 0, 0.62);
    border-radius: 25px;
    left: 519px;
    opacity: .4;
}

#officeBG > a:hover {
    opacity: 1;
}