.wrapper{
  /*width:auto;*/
    /*min-width: 1030px;*/
    /*display: inline-block;*/

}

.detailedIcon {
    position: fixed;
    width: 9%;
    height:11%;
    z-index: 6;
    cursor: pointer;
    opacity:0 ;
    visibility: hidden;
}

#cstTimer {
    position: fixed;
    left: 70%;
}

#backgroundBox
 {
     position: fixed;
     width: 90%;
     height: 33%;
     top: 46%;
     left: 5%;
     opacity: 1;
     border-radius: 0;
     z-index: -50;
     background-color:#609b42;
    border-top-left-radius:0%;
    border-top-right-radius:0%;

 }
.greenCurve{
    position: fixed;
    width: 90%;
    height: 3%;
    top: 44%;
    left: 5%;
    /*background-image: url("../assets/img/spaceAssets/bkgCurve.png");*/
    background-repeat: no-repeat;
}
#water{
    position:absolute;
    top:44.4%;
    left:40%;
    display:none;
    opacity: 0;
    max-width: 15%;
    max-height: 25%;
}
 #spacebox{
   position: fixed;
   width: 90%;
   height: 31.8%;
   top: 15%;
   left: 5%;
   border-radius: 0;
   z-index: -50;
   background-color:#140138;
  background-image: url("../assets/img/spaceAssets/spaceGradient.jpg");
     background-repeat: repeat-x;
     vertical-align: bottom;
 }
#spaceboxStars{
    position: fixed;
    width: 90%;
    height: 29%;
    top: 15%;
    left: 5%;
    border-radius: 0;
    z-index:1;
    background-image: url("../assets/img/spaceAssets/spaceStars.png");
    background-repeat: repeat-x;
    vertical-align: bottom;
}
 .OverviewInfrastructure
 {
     position: fixed;
     opacity: 1;
     z-index: 1;
 }
.infrastructure{

}
 /*OverView Buttons*/
 .scenarioButtons{
    position: fixed;
    top: 80%;
    width: 90%;
    display: flex;
    flex-direction: row;
    overflow-y: auto;
    background-color: #a3c1ce4d;
    height: 96px;
    transform: translate(-50%, 0px);
    left: 50%;
    border-radius: 10px;
    justify-content: space-evenly;
    flex-wrap: wrap;
    padding-top: .5%;
 }
.asIsWrapper{
    background-color: #58688a38;
    padding: 8px;
    border-radius: 8px;
    height: 70px;
    text-align: center;
    margin-bottom: 5px;
}
.btn-title{
    border-bottom: solid 1px #6f899f;
    margin-bottom: 8px;
}
.toBeWrapper{
    background-color: #58688a38;
    padding: 8px;
    border-radius: 8px;
    height: 70px;
    text-align: center;
}
/* this is the UI play buttons*/
.sliderWrapper{
  visibility: hidden;
}
.nowPlayingText {
    position: fixed;
    top: 82%;
    left: 25%;
    width: 23vw;
    height: 8%;
    opacity: 0;
    display: none;
    font-size: 1.375vw;
}
.tittle{
    position: fixed;
    top: 82%;
    /*left: 35%;*/
    width: 45vw;
    font-size: 1.375vw;
  margin-left: 42.5%;
    display: none;
    opacity: 0;

}

#asIsLaunchText{
    position: fixed;
    visibility: hidden
}
#asIsReentryText{
    position: fixed;
    visibility: hidden
}
#asIsOffNominalReentryText{
    position: fixed;
    visibility: hidden
}
#toBeReentryText{
    position: fixed;
    visibility: hidden
}
.sliderWrapper{

}
#slider{
    background: none!important;
    position: absolute;
    width: 48%;
    height: 10px;
    /*left:24.75%;*/
    top: 87%;
    z-index: 100;
    background-color: cornflowerblue!important;
    visibility: hidden;
    margin-left: 25%;
    min-width: 40%;


}
#slider .ui-state-default, .ui-widget-content .ui-state-default {
    background: grey!important;

}
.nowPlayingButton
{
    position: fixed;
    z-index: 100;
    cursor: pointer;
    width: 11%;
    display: none;
}
#returnButton
{

    top: 85%;
    left: 8%;
    visibility: hidden;
    opacity: 0;
    display: none;


}

#detailedAnimationButton
{
    top: 85%;
    left: 80.7%;
    visibility: hidden;
    opacity: 0;


}
#nowPlayingText
{

    position: fixed;
    top: 82%;
    left: 25%;
    width: 24%;
    height: 8%;
    opacity: 0;
    visibility: hidden;

}
#playButton
{
    width: 5%;
    height: 7%;
    left: 46.5%;
    top:90%;
    opacity: 0;
    visibility: hidden;
}
#pauseButton
{
    width: 5%;
    height: 7%;
    left: 46.5%;
    top:90%;
    opacity: 0;
    visibility: hidden;
}

.NowPlayingText
{
    position: fixed;
    width: 20%;
    height: 10%;
    top: 81.7%;
    left: 43%;
    visibility: hidden;
    opacity: 0;

}

/*infrastructure*/

.envelopeRight{
  position: fixed;
  top:50%;
  right:25%;
    max-width: 10%;
    display: none;
    opacity: 0;
    z-index: 4;

}
.envelopeLeft{
    position: fixed;
    top:50%;
    left:25%;
    max-width: 10%;
    display: none;
    opacity: 0;
    z-index: 4;

}
#envelope1, #envelope2, #envelope3, #envelope4{
    position: fixed;
    top:50%;
    left:25%;
    max-width: 10%;
    display: none;
    opacity: 0;
    z-index: 4;

}


#range {
  position:fixed;
  top:45%;
  right:45%;
    max-width: 15%;
    max-height: 25%;
    z-index: 2;

}

#wjhCenter{
    position:fixed;
    top:50%;
    right:45%;
    max-width: 15%;
    max-height: 25%;
    z-index: 4;
    display: none;
    opacity: 0;

}

#rocket{
    position:fixed;
    top:45%;
    right:45%;
    max-width: 15%;
    max-height: 25%;
    z-index: 3;

}
#atcsccEmc{
  position: fixed;
  top:62%;
  right:30%;
    max-width: 10%;
    max-height: 20%;
    z-index: 3;
}
#rcag{
  position: fixed;
  top:45%;
  right:20%;
    max-width: 10%;
    max-height: 20%;
}
#localArtcc{
  position: fixed;
  top:58%;
  right:10%;
    max-width: 10%;
    max-height: 20%;
    z-index: 3;
}
#faaHQ{
  position: fixed;
  top:45%;
  left: 10%;
    max-width: 10%;
    max-height: 20%;
    z-index: 3;
}
#vehicleOperator{
  position: fixed;
  top:58%;
  left:20%;
    max-width: 10%;
    max-height: 20%;
    z-index: 3;
}
#operatorRadar{
    position: fixed;
    top:40%;
    left:28%;
    max-width: 8%;
    max-height: 20%;
    z-index: 3;
}

/*hidden assets that dont move should have indez set to 2 and display none*/

#ahaIcon{
    position: fixed;
    top:58%;
    left:23%;
    width: 2.5%;
    max-width: 10%;
    opacity: 0;
    display:none;
    z-index: 2;

}
#ahaIcon2{
    position: fixed;
    top:58%;
    left:23%;
    width: 2.5%;
    max-width: 10%;
    opacity: 0;
    display:none;
    z-index: 2;

}
#ahaIcon3{
    position: fixed;
    top:58%;
    left:23%;
    width: 2.5%;
    max-width: 10%;
    opacity: 0;
    display:none;
    z-index: 2;

}
#ahaIcon4{
    position: fixed;
    top:58%;
    left:23%;
    width: 2.5%;
    max-width: 10%;
    opacity: 0;
    display:none;
    z-index: 2;

}

#ahaIconRight{
    position: fixed;
    top:67%;
    right:30%;
    width: 2.5%;
    max-width: 10%;
    opacity: 0;
    display:none;
    z-index: 2;

}
#sdiIcon{
    position:fixed;
    top:50%;
    right:45%;
    max-width: 15%;
    max-height: 25%;
    z-index: 2;
    display: none;
    opacity: 0;

}
#wocNotice{
    position: fixed;
    top:68%;
    right:29%;
    max-width: 10%;
    max-height: 20%;
    z-index: 3;
    display: none;
    opacity: 0;
}
#telephoneOne{
    position: fixed;
    top:65%;
    left:27%;
    width: 2.5%;
    max-width: 10%;
    opacity: 0;
    display:none;
    z-index: 2;

}
#telephoneTwo{
    position: fixed;
    top:65%;
    right:32%;
    width: 2.5%;
    max-width: 10%;
    opacity: 0;
    display:none;
    z-index: 2;

}
#hotLineVo{
    position: fixed;
    top:65%;
    left:27%;
    width: 2.5%;
    max-width: 10%;
    opacity: 0;
    display:none;
    z-index: 2;
}
#hotLineATC{
    position: fixed;
    top:65%;
    right:32%;
    width: 2.5%;
    max-width: 10%;
    opacity: 0;
    display:none;
    z-index: 2;

}
#hotLineARTCC{
    position: fixed;
    top:58%;
    right:12%;
    width: 2.5%;
    max-width: 10%;
    opacity: 0;
    display:none;
    z-index: 2;
}
#hotLineFAA{
    position: fixed;
    top:45%;
    left: 15%;
    width: 2.5%;
    max-width: 10%;
    opacity: 0;
    display:none;
    z-index: 2;
}
#tfmsTag{
    position: fixed;
    top:58%;
    right:35%;

    display: none;
    z-index: 2;
    max-width: 5%;

}

.line {
    position:fixed;
    top:60%;
    width: 0;
    height:1px;
    display:none ;
    border-bottom: dashed #2b5483  2px;
    border-width:5px;
    opacity: 0;
    z-index: 5;
}
.line2 {
    position:fixed;
    top:52.5%;
    left:51%;
    width: 0%;
    height:1px;
    display:none ;
    border-bottom: dashed #2b5483  2px;
    border-width:5px;
    opacity: 0;
    z-index: 5;
}
.line3 {
    position:fixed;
    top:53%;
    left:53%;
    width: 0;
    height:1px;
    display:none ;
    border-bottom: dashed #2b5483  2px;
    border-width:5px;
    opacity: 0;
    z-index: 5;
}
.line4 {
    position:fixed;
    top:60%;
    width: 0;
    height:1px;
    display:none ;
    border-bottom: dashed #2b5483  2px;
    border-width:5px;
    opacity: 0;
    z-index: 5;
}

.lineTwo {
    position:fixed;
    top:60%;
   right:13%;
    width: 20%;
    height:1px;
    display:none ;
    border-bottom: dashed #a02023  2px;
    border-width:5px;
    opacity: 0;
    z-index: 3;
    transform: rotate(-10deg);
}
.lineThree {
    position:fixed;
    top:53%;
    left:15%;
    width: 14%;
    height:1px;
    display:none ;
    border-bottom: dashed #a02023  2px;
    border-width:5px;
    opacity: 0;
    z-index: 1;
    transform: rotate(35deg);
}
#airplane{
    position: fixed;
    top:35%;
    max-width: 10%;
    left:30%;
    z-index: 3;
    display: none;
    opacity: 0;
}
#capsule{
      position: fixed;
      top:15%;
      left:45%;
      max-width: 5%;
      z-index: 3;
      display: none;
      opacity: 0;
  }
.capsuleFireOne{
    position: fixed;
    top:15%;
    left:45%;
    max-width: 5%;
    z-index: 3;
    display: none;
    opacity: 0;
}
.capsuleFireTwo{
    position: fixed;
    top:15%;
    left:45%;
    max-width: 5%;
    z-index: 3;
    display: none;
    opacity: 0;
}
.capsuleFireThree{
    position: fixed;
    top:15%;
    left:45%;
    max-width: 5%;
    z-index: 3;
    display: none;
    opacity: 0;
}
.capsuleFireFour{
    position: fixed;
    top:15%;
    left:45%;
    max-width: 5%;
    z-index: 3;
    display: none;
    opacity: 0;
}
#capsuleOpen{
    position: fixed;
    top:45%;
    left:45%;
    max-width: 5%;
    z-index: 3;
    display: none;
    opacity: 0;
}
#manOne{
    position: fixed;
    top:47%;
    left:48%;
    max-width: 2%;
    z-index: 3;

    opacity: 0;
}
#phoneWaveRight{
    position: fixed;
   transform: rotate(30deg);
    top:52%;
    right:25%;
    opacity: 0;
    display: none;
    max-width: 10%;
    max-height: 20%;
    z-index: 3;
}

#rocketFire{
    position:fixed;
    top:45%;
    right:45%;
    max-width: 15%;
    max-height: 25%;
    z-index: 3;
    display: none;
    opacity: 0;

}
#rocketSmoke{
    position:fixed;
    top:45%;
    right:45%;
    max-width: 15%;
    max-height: 25%;
    z-index: 3;
    display: none;
    opacity: 0;

}


.btnwrapper{
    position: absolute;
    left: 7.55%;
    top: 80%;
    padding-left: 2%;
    padding-right:0;
    margin-left: auto;
    margin-right: auto;
    /*display: inline-flex;*/
}


.tooltip-styling{
    background: white !important;
    opacity: .8 !important;
}


body {
    font-family: 'Lato', sans-serif;
}
/* h1{font-size: 2em;
    color: white;
    line-height: .8em;
    font-weight: bold;} */

h4{
    margin-top: 0 !important;
    font-size:.9em;
    font-weight: 400 !important;
}
img{
    max-width: 100%;
    max-height: 100%;
}
/* #iframevideo {
    margin-top: 8%;
    left:10%;

} */
/*responsive video ifame*/
/* .videoModalContainer{
    position: relative;
    padding-bottom: 80%;
    height: 0;
    overflow: hidden;
} */
/* .videoModalContainer video{
    position: absolute;
    top:0;
    left: 10%;
    width: 80%;
    height: 50%;
    background-color: black !important;
} */
/*end*/

.overviewWrapper{
    width:auto;
    z-index: 1;
}

@media screen and (max-width: 768px) {
  

}

#loader {
    position: absolute;
    left: 46.5%;
    top:90%;
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
    display: none;
}