body{
    font-family: 'Prompt' !important;
}
.contact-text{
    font-size: 13px;
    line-height: 17px;
}
.beattieBubble{
    position:absolute;top:200px;text-align:center;left:-50px;animation:none;display:none
}
.noPaddingOnMobile{
    padding-left: 10px;
}
#oncameraVid{
    width:100%;
    background-color:black;
    margin-bottom:10px;
    height:300px;
}
y{
    color:#F0E68C;
}
.show400px{
    display: none;
}
.contact-image{
    width:120px;
    float:right;
    max-width: 100%;
    margin-right: -10px;
}
.contact-p{
    font-size: 13px;
    line-height: 17px;
}
.mobileHorizontalPositioner{
    left: 0px;
    top: 0px;
    position: relative;
}
 .btn.close-btn{
    color:white;
    background-color:grey;
    font-weight: 700;
     font-family: 'Prompt';
     font-size: 16px;
}
.btn.close-btn:hover{
    color: khaki;
    background-color: black;
}
.whatsNewVideo{
    background-color:black;width: 80%;margin: auto;
}
.whatsnewText{
    font-size: 14px;
    padding: 2px;
    position: relative;
    width: 100%;
    text-align: left;
    margin-bottom: 0px;
    line-height: 16px;
}
.whatsnewBox{
    color:white;
    padding:2px;
    padding-left: 8px;
}
.onCamLink{
    color:white;
}
.onCamLink:hover{
    color: khaki;
    cursor: pointer;
    text-decoration: none;
}
a.whatsnewA:visited{
    color:white;
}
a.whatsnewA:link{
    color:white;
}
a.whatsnewA{
    color:white;
}
a.whatsnewA:hover{
    color:khaki;
    text-decoration: none;
    cursor: pointer;
}
.whatsnewBox:hover{

}
.whatsnewBox-link{
    color:khaki;
}
.whatsnewBox-link:hover{
    color:blue;
    cursor: pointer;
    text-decoration: none;
}
.footer{
    bottom:0px;position:absolute;max-width:1080px;width:100%;z-index:2;background-color:white;font-size:12px;    
    position: fixed;
}
.footer img{
    height: auto;
}
.whatsnew-text{
    font-family: 'Prompt';
    font-size: 16px;
    padding-top: 4px;
}
.about-image{
    width:180px;
    height:230px;
    display: inline;
    padding: 10px;
    float: left;
}
.about-text{
    color: white;
    font-size: 12px;
    padding: 10px;
    width:80%;
    margin: auto;
}
.svg-icon {
    width: 1.5em;
    height: 1.5em;
}

.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
    fill: white;
}

.svg-icon circle {
    stroke: #4691f6;
    stroke-width: 1;
}
.clickMicText{
    font-size: 20px;
}

#linkContainer img:hover{
    opacity: .6;
}

.webPlay{
    width: 80px;
    height: auto;
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
    display:none;
}
.playbuttonhover{
    fill:maroon;
}
.playbuttonhover:hover{
    cursor: pointer;
    opacity: .5;
}

.webPlay:hover{
    cursor: pointer;
    opacity: 0.6;
}

.clientBox{
    width: 200px; 
    height: 100px;
    position:absolute; 
    top:0px; 
    right:0px; 
    padding:0px;
    margin:0px; 
    overflow:hidden;
    position:absolute;
    transition:.5s;
}
body{
    margin: 0px;
    height: 100%;
    position: absolute;
    width:100%;
}
.navBox {
    transform: rotate(-10deg);
    width: 700px;
    font-size: 24px;
    padding: 20px;
    overflow: hidden;
    font-family: 'Prompt', sans-serif;
    font-weight: 700;
    line-height: 28px;
    position: absolute;
    z-index: 100;
    margin-top: -60px;
}

.navBox div {
    display: block;
    color: black;
}

.navBox div:hover {
    font-size: 30px;
    color: maroon;
    cursor: pointer;
}


.navBox div b {
    color: maroon;
}

.navBox div:hover b {
    color: black;
}
.characature{
    position:relative;
    width:100%;
    height:700px;
    margin:0px;
    overflow:hidden;
    padding:0px;
    padding-top:0px;
    zoom:1;
    top: 90px;
}

.char2{
    position:relative;
    display:inline-block; 
    z-index:-3;
    zoom:1;
}
    a:link{
        color: khaki;
    }
a:visited{
    color: khaki;
}
.mouseMoving {
    width: 200px;
    height: 200px;
    position: absolute;
    vertical-align: middle;
    display: inline-block;
    text-align: center;
    display: table-cell;
}

.center {
    vertical-align: middle;
    text-align: center;
    display: table-cell;
    position: relative;
}
.content-box{
    height:600px;
    padding-top:20px;
    display:inline-block;
    background-color:#292929;
    overflow:hidden;
    position: absolute;
    /*
            left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
    */
}
.content-box-inner{
    height:560px;
    background-color:292929;
    bottom:0;
    overflow:auto;
    width:600px;
}
div .maroon{
    color:maroon;
}

.vidBox{
    position:relative; 
    max-width:500px;
    margin: auto;
}
.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
    margin:auto;
    align-content: center;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}
    button.fullscreenBtn{
        display: block;
    }
.cityscape{
    display: table-cell;
}
.micZoom{
    zoom:1;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 3;
    overflow: visible;
    pointer-events: none;
    padding-top: 0px;
}
.micZoom2{
    zoom:1;
    position: absolute;
    width: 1100px;
    height: 100%;
    z-index: 3;
    overflow: hidden;
    pointer-events: none;
    padding-top: 0px;
    margin-left: -400px;
}
.hideOnMobile{
    display: table-cell;
}

.btn-circle {
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  padding: 0;
  border-radius: 50%;
}

.audioLinkBox{
    font-family: 'Rubik Mono One', sans-serif;
    line-height: 14px;
    padding: 10px;
    color:white;
    overflow: auto;
    height: auto;
    padding-top:0px;
    font-family: 'Prompt', sans-serif;
    margin: 0px;
    text-align: left;
    font-size: 14px;
    padding-bottom: 26px;
}
.audioLinkBox p{
    margin: 0px;
    text-align: left;
    padding: 3px;
    font-family: 'Prompt', sans-serif;
}
.audioLinkBox p2{
    padding: 3px;
}
.trailerControls{
    position:absolute; bottom:20px; width:100%; 
    opacity:0.9;
    transition: .5s;
}
.trailerControls:hover{
    opacity: 1;
}
.videoBox{
    background-color:black;
    color:white;
    padding:10px;
    height:80px;
}
.videoBox:hover{
    cursor: pointer;
    background-color: dimgrey;
}
.videoBox:hover h1{
    color:khaki;
}
.audioLinkBox p:hover{
    color:khaki;
    cursor: pointer;
}
.pointer:hover{
    cursor: pointer;
}
.content-scale-container{
    height: 600px;
    display: inline-block;
    position: relative;
    align-self: center;
    width:600px;
}
.hideOnDesktop{
    display: none;
}

.livetheaterVideo{
    background-color:black;width: 80%;margin: auto;
}
.livetheaterText{
    font-size: 14px;
    padding: 2px;
    position: relative;
    width: 100%;
    text-align: left;
    margin-bottom: 0px;
    line-height: 16px;
}
.livetheaterBox{
    color:white;
    padding:2px;
    padding-left: 8px;
}
a.livetheaterA:visited{
    color:white;
}
a.livetheaterA:link{
    color:white;
}
a.livetheaterA{
    color:white;
}
a.livetheaterA:hover{
    color:khaki;
    text-decoration: none;
    cursor: pointer;
}
.livetheaterBox:hover{

}
.livetheaterBox-link{
    color:khaki;
}
.livetheaterBox-link:hover{
    color:blue;
    cursor: pointer;
    text-decoration: none;
}
.livetheater-text{
    font-family: 'Prompt';
    font-size: 16px;
    padding-top: 4px;
}

@media screen and (max-width: 1079px) {
    .livetheater-text{
        font-size: 12px;
    }
    .livetheaterText{
        font-size: 12px;
    }
}

@media screen and (max-width:500px){
    .livetheaterVideo{
        background-color:black;width: 100%;margin: auto;
    }
}

@media screen and (max-width: 1079px) {
    .about-text{
    font-size: 11px;
    }
    .hideOnDesktop{
        display: block;
    }
    .content-scale-container{
    height: inherit;
    display: inherit;
    position: inherit;
    width:inherit;
}
    .micZoom{
        zoom:0.5;
    padding-top: 160px;
    }
        .micZoom2{
    zoom: .5;
    padding-top: 160px;
    width: 100%;
    margin: 0px;
    }
    .content-box{
        height: auto;
        overflow: visible;
        width:100%;
        position: absolute;
          left: auto;
          top: auto;
          transform: translate(0%, 0%);
    }
    .content-box-inner{
        height: auto;
        width:100%;
    }
    .characature{
        zoom:0.5;
        top: 20px;
    }
    .char2{
        zoom:0.5;
        margin-top: -80px;
        width: 100%;
    }
    .clientBox{
        width:100px;
        height:50px;
    }
    button.fullscreenBtn{
        display: none;
    }
    .cityscape{
        display:none;
    }
    .hideOnMobile{
        display: none;
    }
    .clickMicText{
    font-size: 10px;
}
        .videoBox{
        width:140px;
        margin: auto;
    }
    .whatsnew-text{
        font-size: 12px;
    }
    .footer{
        font-size:10px;
    }
    .footer img{
        height: 24px;
    }
    .navBox{
            font-size: 18px;
    line-height: 23px;
    }
    .navBox div:hover {
        font-size: 26px;
    }
    .about-image{
            width: 140px;
    height: 180px;
    }
    .whatsnewText{
    font-size: 12px;
    }
    .mobileHorizontalPositioner{
        left: 100px;
        top: -150px;
    }
    .beattieBubble{
        top:160px;
    }
    
}
@media screen and (max-width:500px){
    .characature{
        zoom:0.5;
        top: 260px;
        left:60px;
    }
    .mobileHorizontalPositioner{
    left: 50px;
    top: 0px;
    }
        .char2{
        zoom:0.5;
        margin-top: 130px;
        width: 100%;
        left:80px;
    }
        #oncameraVid{
        height:unset;
    }
    .beattieBubble{
        top:200px;
    }
    .whatsNewVideo{
    background-color:black;width: 100%;margin: auto;
}
    .contact-text{
    font-size: 12px;
    line-height: 15px;
}
        .show400px{
        display: block;
    }
    .hide400px{
        display: none;
    }
    .contact-p{
        font-size: 11px;
        line-height: 14px;
    }
    .noPaddingOnMobile{
        padding-left: 0px;
    }
}

/* Responsive video posters */
.video-responsive.video-poster--enabled {
    position: relative;
}

.video-responsive.video-poster--enabled video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    /* object-fit: cover; */
}

.video-responsive.video-poster--enabled .video-poster {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.video-responsive.video-poster--enabled.video-poster--visible .video-poster {
    display: block;
    cursor: pointer;
}