/* Static parts of the overview including the title and background */


/* developer grid , makes positioning objects evenly, easier. DO NOT LEAVE VISIBLE IN RELEASE PRODUCT */
body {
    font-family: 'Lato', sans-serif;
}
/*h1{font-size: 2em;*/
/*color: white;*/
/*line-height: 1em;*/
/*font-weight: bold;}*/
/*h2{*/
    /*color: white;*/
/*}*/
/*.buildingName h1 {*/
    /*font-size: 1.3em;*/
    /*line-height: 1.2em;*/
    /*text-align: center;*/
/*}*/

/*h4{*/
    /*margin-top: 0 !important;*/
    /*font-size:.9em;*/
    /*font-weight: 400 !important;*/
/*}*/

/* #iframevideo {
    margin-top: 8%;
    left:10%;
} */
/*responsive video iframe*/
/* .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;*/
/*}*/
/*.modal-backdrop {*/
    /*position: fixed;*/
    /*top: 0;*/
    /*right: 0;*/
    /*bottom: 0;*/
    /*left: 0;*/
    /*z-index: 1040;*/
    /*!* background-color: #999 !important; *!*/
    /*background: -webkit-linear-gradient(to bottom right, #94c7c8 0%, #edf7f6 100%);*/
    /*background: -moz-linear-gradient(to bottom right, #94c7c8 0%, #edf7f6 100%);*/
    /*background: -o-linear-gradient(to bottom right, #94c7c8 0%, #edf7f6 100%);*/
    /*background: linear-gradient(to bottom right, #94c7c8 24%, #edf7f6 100%);*/
/*}*/
/*end*/

/* .blur makes the background blur when an infrastructure item, Opervational Views button, or System Views button is clicked
  Internet Explorer and Firefox interprets this really weirdly, especially IE where it randomly makes the infrastructure item title box clear */

.blur {
display: none;
}

.overviewWrapper{
    width:50%;
    z-index: 1;
}

/*.modal-open .modal{*/
    /*overflow: hidden;*/
    /*min-width: 1000px;*/
/*}*/
/*.modal-header{*/
    /*display: none;*/
/*}*/
/*.modal-footer{*/
    /*border-top: none;*/
    /*bottom:70%;*/
    /*margin-right: 5.3%*/
/*}*/
/*.modal-dialog{*/
  /*height: 100vh;*/
  /*width: 80%;*/
  /*background-color: rgba(0,0,0,0.0);*/
  /*margin-top:0;*/
  /*overflow: hidden;*/

/*}*/
/*.modal-content{*/
    /*box-shadow: none;*/
    /*background-color: rgba(0,0,0,0.0);*/
    /*outline: none;*/
    /*border: none;*/
    /*overflow: hidden;*/
    /*left: 1.8%;*/
    /*top: 10%;*/
/*}*/
/*.modal-body{*/
/*height: 72vh;*/
    /*overflow: hidden;*/
    /*min-height:600px;*/

/*}*/

/*.modal-open{ overflow-y: hidden;}*/
.buildingImg{
    /*left: 48%;*/
    /*top:2%;*/
    /*width: auto;*/
    /*!* display: flex; *!*/
    /*!* float: right; *!*/
    /*position: absolute;*/
    /*-webkit-animation-delay: .5s;*/
}
.buildingImg > img {
/*max-width: 91%;*/
    /*width: auto;*/
    /*height: auto;*/
}

.modalArrowLeft{
    /*cursor: pointer;*/
    /*position: fixed;*/
    /*top: 37%;*/
}

.modalArrowRight{
    /*cursor: pointer;*/
    /*position: fixed;*/
    /*top: 37%;*/
    /*right: 2%;*/
}

.buildingName{

    /*width: 45%;*/
    /*height: 21%;*/
    /*left: 0;*/
    /*-webkit-animation-delay: .25s;*/
    /*padding: 10px 10px;*/
    /*position: absolute;*/
    /*color: #ffffff;*/
    /*font: 32px 'Helvetica', sans-serif;*/
    /*font-weight: 700;*/
    /*text-align: left;*/
    /*background: -webkit-linear-gradient(top,#246896,#286090);*/
    /*background-color: #286090;*/
    /*display: inline-block;*/
    /*float: left;*/
    /*font-size: 1.8vw;*/
    /*border-radius: 6px;*/
}
#buildingText{
    /*position: relative;*/
    /*top: 0;*/
    /*left: 0;*/
    /*width: 100%;*/
    /*height: 100%;*/
    /*font-size: 3.3vw;*/

}

#textFrameTop{
    /*height: 30px;*/
    /*top: 21px;*/
    /*left: 0;*/
    /*background-color: #286090;*/
    /*position: relative;*/
    /*z-index: 0;*/
    /*!* border-radius: 10px 0px 0px 0px !important; *!*/
    /*!* border-bottom: 5px solid white; *!*/
    /*!* box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); *!*/
    /*border-radius: 6px 6px 0 0 ;*/
}


#textFrame{
    /*height: 100%;*/
    /*overflow-y: auto;*/
    /*!*min-height: 50%;*!*/
    /*width: 100%;*/
    /*!*min-width: 100px;*!*/
    /*max-height: 70%;*/
    /*left: 0;*/
    /*top: 20px;*/
    /*position: relative;*/
    /*background-color: #286090;*/
    /*letter-spacing:0.1em;*/
    /*border-top: 2px solid white;*/
    /*border-right: 3px solid #286090;*/
    /*border-bottom: 3px solid #286090;*/
    /*border-radius: 0 0 6px 6px;*/
}

#buildingInfoContainer{
    /*height: 100%;*/
    /*!* min-height: 50%; *!*/
    /*width: 45%;*/
    /*min-width: 100px;*/
    /*!* max-height: 91%; *!*/
    /*left: 0;*/
    /*top: 22.75%;*/
    /*position: absolute;*/
}

#controls{

    z-index: +2;
}

.buildingInfo{
    /*!*border-top: 1px solid white;*!*/
    /*height: 70%;*/
    /*width: 100%;*/
    /*overflow-y: auto;*/
    /*position: absolute;*/
    /*!*margin-top: 10%;*!*/
    /*padding:25px;*/
    /*-webkit-animation-delay: 1s;*/
}
/*.buildingInfo p {*/
    /*margin-top: 8%;*/
/*}*/

/*scroll bar effect color*/
/*.buildingInfo::-webkit-scrollbar {*/
 /*width: 1em;*/
	/*background-color: #F5F5F5;*/
/*}*/

/*.buildingInfo::-webkit-scrollbar-track {*/
  /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
   /*background-color: #F5F5F5;*/
/*}*/

/*.buildingInfo::-webkit-scrollbar-thumb {*/

  	/*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);*/
  	/*background-color:#3d5268;*/
/*}*/
#grid {
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: .4;
    top: -0%;
    left: -0%;
    z-index: -1000000;
    visibility: hidden;
}
/* @media screen and (max-width: 1280px) {
    .modal-footer {
        position: absolute !important;
        top: 79% !important;
        left: 83% !important;
        display: inline-block !important;
    }
} */
/*media query for featured video*/

/* @media screen and (max-width: 1024px){

    #iframevideo {
        margin-top: 25% !important;
        left:0;
        position: absolute;

    }
    .videoModalContainer{
        position: relative;
        padding-bottom: 80%;
        height: 0;
        overflow: hidden;
    }
    .videoModalContainer video{
        position: absolute;
        top:20%;
        left: 0;
        width: 80%;
        height: 50%;
        background-color: black !important;
    }
    .modal-footer {
        border-top: none;
        margin-bottom: 17%  !important;
        margin-right: 55.3%  !important;
        padding: 1px  !important;
        left: 40%  !important;
        bottom: -7%  !important;
        position: fixed  !important;
        width: 25%  !important;
    }
} */

/* FAA background image */
#FAA_Background
{
   position: fixed;
    height: 85%;
    width: 65%;
    top: 10%;
    left: 18%;
    z-index: -100;  /* sets the image to be behind everything, -100 is arbitrary */
}
#BackgroundBox
{
    position: fixed;
    width: 90%;
    height: 33%;
    top: 46%;
    left: 5%;
    opacity: .8;
    border-radius: 4px;
    z-index: -50;
}

#TextBoxWrapper
{
    position: fixed;
    width: 90%;
    height: 33%;
    top: 46%;
    left: 5%;
    opacity: .8;
    border-radius: 4px;
    z-index: +1;
}

#NextGenText
{
    position: fixed;
    width: 35%;
    height: 8%;
    top: 1.7%;
    left: 31.8%;
}
 #OverviewTitle
 {
     position: fixed;
     width: 15%;
     height: 7%;
     top: 1%;
     left: 46%;

 }
/* home, detailed program, send comments buttons. */

.OverviewButtons
{
    position: fixed;
    cursor: pointer;
}

#DetailedButton
{
    width: 8%;
    height: 6%;
    top: 3%;
    left: 84%;
    /*box-shadow: 4px 4px 5px ;*/
    border-radius: 7px;
    opacity: 1;
}
#CommentButton
{
    width: 8%;
    height: 6%;
    top: 10%;
    left: 85%;
    border-radius: 5px;

    opacity: 1;
}
#HomeButton
{
    width: 8%;
    height: 6%;
    top: 3%;
    left: 5%;
     /*box-shadow: 4px 4px 5px ;*/
    border-radius: 7px;
    opacity: 1;

}
/* hover effect for the home, detailed program and comment button */
.OverviewButtons:hover
{
opacity: .6 !important;
}
#CapabilitiesText
{
    position: fixed;
    width:4%;
    height: 20%;
    left: 1.5%;
    top: 79%;
    visibility: hidden;
}
#ProgramsText
{
    position: fixed;
    width:6%;
    height: 20%;
    left: 1.5%;
    top: 69%;

}
#InfrastructureText
{
    position: fixed;
    width:5%;
    height: 25%;
    left: 1.5%;
    top: 45%;

}

#PhaseText
{
    position: fixed;
    width:5%;
    height: 25%;
    left: 1.5%;
    top: 10%;

}

/* GPS satellites*/

.GPS
{
    position: fixed;
    width: 1.2%;
    height: 1.2%;
    opacity: .3;

}
#GPS1
{
    top: 18%;
    left: 14.5%;
}
#GPS2
{
    top: 18%;
    left: 24.5%;
}
#GPS3
{
    top: 14%;
    left: 35%;
}
#GPS4
{
    top: 10%;
    left: 49%;
}
#GPS5
{
    top: 14%;
    left: 63.5%;
}
#GPS6
{

    top: 18%;
    left: 74%;
}
#GPS7
{
    top: 18%;
    left: 84%;
}
/* phases of flight*/
.phase
{
    position: fixed;
    width: 15%;
    height: auto;
    top: 16.5%;
    opacity: .73;
    cursor: pointer;

}
#phase0
{
    z-index: 1;
    width: 19.732%;
    height: 26.7%;
    left: 9.2%;
}
#phase1
{
    z-index: 1;
    left: 23.495%;
    width: 16.872%;
    height: 26.7%;
}
#phase2
{
    z-index: 1;
    left: 37.26%;
    width: 25.188%;
    height: 26.8%;
}
#phase3
{
    z-index: 1;
    left: 59.19%;
    width: 16.96%;
    height: 26.7%;
}
#phase4
{
    z-index: 1;
    left: 70.61%;
    width: 19.6%;
    height: 26.7%;
}

#AcRoute
{
    position: fixed;
    width: 55%;
    height: 13%;
    top: 21%;
    left: 22%;
    visibility: hidden;
    z-index: 2;

}
#AcRouteGreen
{
    position: fixed;
    width: 30%;
    height: 12%;
    top: 13%;
    left: 35%;
    visibility: hidden;
    opacity: 0;
    z-index: 2;


}
#PlaneWheels
{
    position: fixed;
    width: 10%;
    height: 10%;
    z-index: 9;
    visibility: hidden;
}
#ConflictPlane
{
    position: fixed;
    width: 10%;
    height: 10%;
    z-index: 9;
    visibility: hidden;
    opacity:0;
}
#fakelol
{
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
}
#PlaneNoWheels
{
    position: fixed;
    width: 10%;
    height: 10%;
   z-index: 10;
    visibility: hidden;

}
#PlaneNoWheelsRed
{
    position: fixed;
    width: 10%;
    height: 10%;
    z-index: 10;
    visibility: hidden;

}
#PlaneNoWheelsGreen
{
    position: fixed;
    width: 10%;
    height: 10%;
    z-index: 10;
    visibility: hidden;

}
#PlaneWheelsGreen
{
    position: fixed;
    width: 10%;
    height: 10%;
    z-index: 10;
    visibility: hidden;

}
#PlaneWheelsRed
{
    position: fixed;
    width: 10%;
    height: 10%;
    z-index: 10;
    visibility: hidden;

}

#UAV
{
    position: fixed;
    width: 10%;
    height: 10%;
    z-index: 10;
    top: 22%;
    left: 80%;
    visibility: hidden;
    opacity: 0;
}
.planeFms{
    display: none;
    opacity: 0;
    width: 13%;
    left:0;
    top:10%;
    position: absolute;

}
.planeGps{
    display: none;
    opacity: 0;
    width: 13%;
    left:0;
    top:10%;
    position: absolute;

}
.planeAdsbOut{
    display: none;
    opacity: 0;
    width: 13%;
    left:0;
    top:10%;
    position: absolute;

}
.actors{
    display: none;
    opacity: 0
}
#atc{
    left: 41%;
    position: absolute;
    top: 37%;
}
#atcA{
    position: absolute;
    left: 31%;
    top: 52%;
}
#atcB{
    position: absolute;
    top: 52%;
    left: 10%;
}
#tmu{
    position: absolute;
    top: 37%;
    left: 33%;
}
#tmc{
    position: absolute;
    left: 46%;
    top: 61%;
}
#dispatcher{
    position: absolute;
    left: 16%;
    top: 65%;
}
#pilotPeople{
    width: 13%;
    left:45%;
    top:9%;
    position: absolute;
}

#atcB_Right_tracon{
    position: absolute;
    top: 50%;
    left: 62%;
}
#atc_Right_airport{
    right: 10%;
    position: absolute;
    top: 53%;
}
#atc_Right_artcc{
    position: absolute;
    top: 37%;
    left: 60%;
}
#tmu_Right_Artcc{
    position: absolute;
    top: 37%;
    left: 54%;
}
.tools{
    position: absolute;
    display: none;
    opacity: 0;
}
#acTools{
    left: 39%;
    top: 4%;
    z-index: 3;
}
#groundTools{
    top: 50%;
    left: 33%;
    transform: scale(.7);
    max-width: 40%;
}
/*overview buildings and icons */
.OverviewInfrastructure
{
    position: fixed;
    opacity: 1;
    z-index: 1;
}
#MLAT
{
    width: 6%;
    height: 9%;
    top: 67%;
    left: 4%;
}
#Gate_L
{
    width: 6%;
    height: 8%;
    top: 58%;
    left: 11%;
}
#Gate_R
{
    width: 6%;
    height: 8%;
    top: 59%;
    left: 86%;
}

#gateOnlyL{
    width: 6%;
    height: 8%;
    top: 58%;
    left: 11%;
    /*z-index: 50;*/
}
#gateOnlyR{
    width: 6%;
    height: 8%;
    top: 59%;
    left: 86%;
    /*z-index: 50;*/
}
#glideSlopeOnlyL{
    width: 1.5%;
    height: 2%;
    top: 59.5%;
    left: 12%;
    z-index: 1000;
}
#glideSlopeOnlyR{
    width: 1.5%;
    height: 2%;
    top: 60.5%;
    left: 87%;
    z-index: 1000;
}
#localizerOnlyL{
    width: 1.5%;
    height: 2%;
    top: 62%;
    left: 11.5%;
    z-index: 1000;
}
#localizerOnlyR{
    width: 1.5%;
    height: 2%;
    top: 63%;
    left: 86.5%;
    z-index: 1000;
}


#Aircraft_Infrastructure
{
    width: 3%;
    height: 4%;
    top: 57%;
    left: 5%;
}
#TerminalRadarLeft
{
    width: 4%;
    height: 7%;
    top: 45%;
    left: 6%;
}
#SurfaceRadarLeft
{
    width: 3%;
    height: 5%;
    top: 44%;
    left: 14.5%;
}
#TerminalRadarRight
{
    width: 4%;
    height: 7%;
    top: 45%;
    left: 89.55%;
}
#SurfaceRadarRight
{
    width: 3%;
    height: 5%;
    top: 44%;
    left: 82%;
}
#AOC
{
    width: 5%;
    height: 8%;
    top: 68.5%;
    left: 12%;
}
#DCNSLeft
{
    width: 5%;
    height: 8%;
    top: 55%;
    left: 18%;
}
#DCNSRight
{
    width: 5%;
    height: 8%;
    top: 55%;
    left: 77%;
   }
#NEMC
{
    width: 5%;
    height: 8%;
    top: 65%;
    left: 22%;
 }
#ARTCCNational
{
    width: 5%;
    height: 8%;
    top: 66%;
    left: 27%;
}
#NationalArtccCircle
{
    width: 9%;
    height: 11%;
    top: 68.5%;
    left: 21.5%;
    z-index: -1;

}

#FTI_CloudLeft
{
    width: 4.5%;
    height: 7%;
    top: 57%;
    left: 26%;
}
#FTI_CloudRight
{
    width: 4.5%;
    height: 7%;
    top: 57%;
    left: 67.5%;
}
#RCAGLeft
{
    width:4.5%;
    height: 9%;
    top: 46%;
    left: 21%;
}
#RCAGRight
{
    width: 4.5%;
    height: 9%;
    top: 46%;
    left: 72%;
}

#ADSB-AntennaLeft
{
    width: 5%;
    height: 7%;
    top: 42%;
    left: 29.5%;
}
#ADSB-AntennaRight
{
    width: 5%;
    height: 7%;
    top: 42%;
    left: 64.5%;
}
#ARTCCLocalLeft
{
    width: 5%;
    height: 8%;
    top: 42.5%;
    left: 37%;
}
#ARTCCLocalRight
{
    width: 5%;
    height: 8%;
    top: 42.5%;
    left: 57%;
}
#TowerTracon_L
{
    width: 4%;
    height: 8%;
    top: 56%;
    left: 34.5%;
}
#TowerTracon_R
{
    width: 5%;
    height: 9%;
    top: 55%;
    left: 60%;
}

#SWIM
{
    width: 8%;
    height: 12%;
    top: 53.5%;
    left: 45%;
    cursor: pointer;

}
#EnRouteRadar
{
    width: 4%;
    height: 8%;
    top: 40.5%;
    left: 47.5%;
}
#CommandCenter
{
    width: 5%;
    height: 11.5%;
    top: 66.5%;
    left: 47%;
}
#WJHTC
{
    width: 7%;
    height: 11%;
    top: 67.5%;
    left: 35%;
}
#WeatherProcessor
{
     width: 5%;
     height: 7%;
     top: 68.5%;
     left: 56.5%;
}
#WeatherService
{
    width:5.5%;
    height: 8%;
    top: 66%;
    left: 63.5%;
}
#RMLSImg
{
    width: 4.5%;
    height: 8%;
    top: 68%;
    left: 71.25%;
}
#FSS_bldg
{
    width: 4.5%;
    height: 9%;
    top: 69%;
    left: 80%;
}
#RemotePilot
{
    width: 5%;
    height: 9%;
    top: 68.5%;
    left: 87.5%;
}
#key
{

    width: 16%;
    height: 10%;
    top: 90%;
    left: 5%;
}
#gateTowerL
{
    width: 6%;
    height: 9%;
    top: 54%;
    left: 15%;
    visibility: hidden;
    position: absolute;
}
#gateTowerR
{
    width: 6%;
    height: 9%;
    top: 55%;
    left: 90%;
    visibility: hidden;
    position: absolute;
}
#RTRl
{
    width: 6%;
    height: 9%;
    top: 42%;
    left: 26%;
    visibility: hidden;
    position: absolute;
}
#RTRr
{
    width: 6%;
    height: 9%;
    top: 42%;
    left: 65%;
    visibility: hidden;
    position: absolute;
}

/* Overview infrastrucure text */
.Text
{
    width: 7%;
    height: 2%;
    z-index: 2;
    margin-top: 4px;
    position: absolute;
    font-size: 0.85vw;
    color: #1a1a1a ;
    font-family: inherit;
    font-weight: bold;
    text-align: center;

}
#TerminalRadarTextL
{
    top: 16% ;
    left: 0.25% ;
}
#TerminalRadarTextR
{
    top: 14% ;
    left: 93.25% ;
}
#SurfaceRadarTextL
{
    top: 6.5% ;
    left: 8.5% ;
}
#SurfaceRadarTextR
{
    top: 6.5% ;
    left: 83.5% ;
}
#RCAGTextL
{
    top: 18.5% ;
    left: 15% ;
}
#RCAGTextR
{
    top: 22.5% ;
    left: 72% ;
}
#ADS-BTextL
{
    top: 5.5% ;
    left: 26.75% ;
}
#ADS-BTextR
{
    top: 5.5% ;
    left: 65.75% ;
}
#LocalARTCCTextR
{
    top: 7.25% ;
    left: 55% ;
}
#LocalARTCCTextL
{
    top: 7.25% ;
    left: 33% ;
}
#EnRouteRadarText
{
    top: 5% ;
    left: 46% ;
}
#PilotText
{
    top: 42% ;
    left: 1.5% ;
    text-align: left;
}
#GateTextL
{
    top: 52.5% ;
    left: 4% ;
}
#GateTextR
{
    top: 55.5% ;
    left: 87.5% ;
}

#DCNSTextL
{
    top: 49.5% ;
    left: 13.5% ;
}
#DCNSTextR
{
    top: 50.5% ;
    left: 79% ;
}
#TowerTraconTextL
{
    top: 47.5%;
    left: 30.5%;
}
#TowerTraconTextR
{
    top: 47.5% ;
    left: 59% ;
}
#AOCText
{
    top: 85.5% ;
    left: 5.5% ;
}
#NEMCText
{
    top: 74.5% ;
    left: 15.5% ;
}

    #TerminalRadarTextL
    {
        top: 16% ;
        left: 0.25% ;
    }
    #TerminalRadarTextR
    {
        top: 15% ;
        left: 93.25% ;
    }

    #RCAGTextL
    {
        top: 18.5% ;
        left: 15% ;
    }
    #RCAGTextR
    {
        top: 22.5% ;
        left: 72% ;
    }
    #ADS-BTextL
    {
        top: 5.5% ;
        left: 26.3% ;
    }
    #ADS-BTextR
    {
        top: 5.5% ;
        left: 65.3%; ;
    }
    #LocalARTCCTextR
    {
        top: 7.25% ;
        left: 55% ;
    }
    #LocalARTCCTextL
    {
        top: 7.25% ;
        left: 33% ;
    }
    #EnRouteRadarText
    {
        top: 5% ;
        left: 46% ;
    }
    #PilotText
    {
        top: 42% ;
        left: 1.5% ;
        text-align: left;
    }
    #GateTextL
    {
        top: 52.5% ;
        left: 4% ;
    }
    #GateTextR
    {
        top: 55.5% ;
        left: 87.5% ;
    }
    #DCNSTextL
    {
        top: 49.5% ;
        left: 13.5% ;
    }
    #DCNSTextR
    {
        top: 50.5% ;
        left: 79% ;
    }
    #TowerTraconTextL
    {
        top: 47.5% ;
        left: 30.5% ;
    }
    #TowerTraconTextR
    {
        top: 49.5% ;
        left: 59% ;
    }
    #MLATText
    {
        top: 87.5% ;
        left: 1% ;
        text-align: Left;
    }
    #AOCText
    {
        top: 86.5% ;
        left: 5.5% ;
    }
    #NEMCText
    {
        top: 74.5% ;
        left: 15.5% ;
    }

#WJHTCText
{
    top: 90.5%;
    left: 33.5%;
    white-space: nowrap;
}

    #CommandCenterText
    {
        top: 86.5%;
        left: 43.5%;
    }
    #WeatherProcessorText
    {
        top: 86%;
        left: 56.5%;
    }
    #RMLSText
    {
        top: 86% ;
        left: 72.5% ;
    }
    #FSSText
    {
        top: 87.25% ;
        left: 80% ;
    }
    #RemotePilotText
    {
        top: 87%;
        left: 88.5%;
    }

#WeatherRadarText
{
    top: 82% ;
    left: 64.75% ;
}
#NationalARTCCText
{
    top: 83% ;
    left: 23% ;
}


/*Special snowflake noaa icon */
#NOAA
{
    top: 74%;
    left: 65%;
    width: 2.5%;
    height: auto;
    /*height: 2.5%*/
}

/*popups , and anything else used only during animation */


.popup
{
    z-index: 100;
    position: fixed;
    opacity: 0;
    visibility: hidden;

}
#FlightPlan
{
    top: 55%;
    left: 6%;
    width: 15%;
    height: 17%;
    z-index: 100;
}

#AfnCon
{
    width: 8%;
    height: 15%;
    top: 40%;
    left:8%;

}
#WirelessSignal1
{
    width: 3%;
    height: 3%;
    top: 57%;
    left:10%;
}
#WirelessSignal3
{
    width: 3%;
    height: 3%;
    top: 57%;
    left:10%;
}
#WirelessSignal4
{
    width: 3%;
    height: 3%;
    top: 57%;
    left:10%;
}
#WirelessSignal2
{
    width: 3%;
    height: 3%;
    top: 57%;
    left:22%;
}
#ptimeWindow
{
    top: 54%;
    left: 44%;
    width: 10%;
    height: 11%;
}
#FlightInfo
{
    top: 51%;
    left: 42%;
    width: 5%;
    height: 5%;

}
#DCLPrep
{
    top: 54%;
    left: 38%;
    width: 7%;
    height: 7%;

}
#DCLApproved
{
    top: 58%;
    left: 38%;
    width: 5%;
    height: 3%;

}
#DCLReceived
{
    top: 50%;
    left: 42%;
    width: 5%;
    height: 3%;

}
#DispatchCopy
{
    top:68%;
    left: 10%;
    width: 4%;
    height: 4%;

}
#DepartureClearence
{
    top:65%;
    left: 25%;
    width: 8%;
    height: 5%;
}
#cmapTag{
    top:65%;
    left: 30%;
    width: 4%;
}

#flowInformation
{
    top: 38%;
    left: 43%;
    width: 12%;
    height: 12%;
}

#flowInformation2
{
    top: 53%;
    left: 23%;
    width: 12%;
    height: 12%;
}

#RadarIcon
{


    width: 6%;
    height: 8%;
    top:40%;
    left: 18%;

}
#Globe
{

    width: 6%;
    height: 8%;
    top:64%;
    left: 9%;
}
#FusedRadarAirport
{
    width: 12%;
    height: 17%;
    top:45%;
    left: 43%;
}
#SwimVisTool
{

    width: 12%;
    height: 16%;
    top:55%;
    left: 50%;
}
#FusedRadarDisplay
{
    width: 12%;
    height: 14%;
    top:55%;
    left: 68%;

}

#FusedRadarDisplayTerminal /* Shows on right TRACON. Used in ADS-B OV animation */
{
    width: 12%;
    height: 14%;
    top:55%;
    left: 68%;

}

#CDTI
{
    width: 14%;
    height: 16%;
    top:20%;
    left: 75%;



}
#TFMSPopup1
{
    width: 15%;
    height: 17%;
    top:60%;
    left: 55%;

}
#TFMSPopup2
{
    width: 15%;
    height: 17%;
    top:60%;
    left: 55%;

}
#TFMSPopup3
{
    width: 15%;
    height: 17%;
    top:60%;
    left: 55%;

}
#EFS
{
    width: 15%;
    height: 17%;
    top:53%;
    left: 43%;

}
#TBFMPopup
{

    width: 15%;
    height: 17%;
    top:40%;
    left: 64%;

}
#SystemDown
{
    width: 7%;
    height: 8%;
    top:42%;
    left: 57%;
}
#OutOfService
{
    width: 7%;
    height: 8%;
    top:53%;
    left: 57%;
}

#TOS
{
    top: 55%;
    left: 6%;
    width: 30%;
    height: 20%;
    z-index: 100;

}
#FlightPlanCreated
{
    top: 55%;
    left: 40%;
    width: 19%;
    height: 17%;
    z-index: 100;

}
#Storm
{
    top: 14%;
    left: 42%;
    width: 15%;
    height: 15%;
    z-index: 100;

}
#WeatherRadar
{

    top: 58.5%;
    left: 74%;
    width: 15%;
    height: 20%;
    z-index: 100;

}
#WeatherEvent
{
    top: 15%;
    left: 46%;
    width: 10%;
    height: 15%;
    z-index: 100;

}
#WeatherArrow
{
    top: 48%;
    left: 67%;
    width: 15%;
    height: 20%;
    z-index: 100;

}

#weatherInformation
{
    top: 38%;
    left: 43%;
    width: 8%;
    height: 8%;
}
#TBOCap
{
    position: fixed;
    top: 13%;
    left: 18%;
    width: 20%;
    height: 10%;


}
#TBOIncap
{
    position: fixed;
    top: 1%;
    left: 18%;
    width: 20%;
    height: 10%;


}
#ConflictAlert
{
    position: fixed;
    top: 1%;
    left: 35%;
    width: 8%;
    height: 3%;


}
#weatherAlert
{
    position: fixed;
    top: 65%;
    left: 50%;
    width: 8%;
    height: 8%;

}
#ReRouteInfo
{
    position: fixed;
    top: 45.5%;
    left: 28%;
    width: 8%;
    height: 6%;

}
#MaintInfo
{
    position: fixed;
    top: 40%;
    left: 40%;
    width: 8%;
    height: 5%;

}
#RMLSPopup
{
    position: fixed;
    top: 55%;
    left: 78%;
    width: 16%;
    height: 18%;

}




#UASText1
{
    position: fixed;
    top: 52%;
    left: 55%;
    width: 12%;
    height: 11%;

}
#UASText2
{
    position: fixed;
    top: 37%;
    left: 24%;
    width: 12%;
    height: 11%;


}
#UASText3
{
    position: fixed;
    top: 63%;
    left: 80%;
    width: 11%;
    height: 8%;

}
#UASText4 {
    position: fixed;
    top: 52%;
    left: 55%;
    width: 12%;
    height: 11%;
}

#UASText5
{
    position: fixed;
    top: 63%;
    left: 80%;
    width: 11%;
    height: 8%;


}
#UASText6
{
    position: fixed;
    top: 52%;
    left: 55%;
    width: 12%;
    height: 11%;

}





.envelope
{
    position: fixed;
    width: 2%;
    height: 2.5%;
    z-index: 100;
    opacity: 0;
    visibility:hidden ;
}
#envelope1
{
}

#envelope2
{

}
#envelope3
{
}
#envelope4
{
}
#envelope5
{
}
#envelope6
{
}


/* The overall Class for the top 11 buttons                */
.topRowButton
{
    position: fixed;
    height: 8%;
    width: 8.18%;
    top: 81%;
    /* font-family: 'Arial', sans-serif; */

    color: white;
    border: 1px solid dimgray;
    border-radius: 0;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    visibility: visible;
    font-weight: normal;
}
/* top_buttons The 11 top buttons unique properties. left is its position from the left of the screen.
   background-color sets the button color */
#DataComm
{
    left: 5%;
    background-color: #6d8bac;
    visibility: visible;
    transition: all 0.1s ease;
}
#ASDE-X
{
    left: 13.18%;
    background-color: #6d8bac;
    transition: all 0.1s ease;
}
#ADS-B
{
    left: 21.36%;
    background-color: #6d8bac;
    transition: all 0.1s ease;
}
#STARS
{
    left: 29.54%;
    background-color: #6d8bac;
    transition: all 0.1s ease;
}
#ERAM
{
    left: 37.72%;
    background-color: #6d8bac;
    transition: all 0.1s ease;
}
#TFMS
{
    left: 45.9%;
    background-color: #6d8bac;
    transition: all 0.1s ease;
}
#TBFM
{

    left: 54.08%;
    background-color: #6d8bac;
    transition: all 0.1s ease;
}
#TFDM
{
    left: 62.26%;
    background-color: coral ;
    transition: all 0.1s ease;
}
#NVS
{
    left: 70.44%;
    width: 8.19%!important; /* fixes a small division error that results in a gap between css wx and ads-b */
    background-color: coral ;
    transition: all 0.1s ease;
}
#Css-Wx
{
    left: 78.62%;
    background-color: coral ;
    transition: all 0.1s ease;

}

#ATOP
{
    left: 86.8%;
    background-color: #6d8bac;
    transition: all 0.1s ease;
}

/* adds the highlight when you hover over a button*/
.topRowButton:hover{
    color:white !important;
    background-color: orange !important;

}

/* Class for positioning the bottom row of buttons*/
.bottomRowButton
{
    position: fixed;
    height: 8%;
    width: 8.18%;
    top: 91%;
    /* font-family: 'Arial', sans-serif; */
    color: white;
    border: 1px solid dimgray;

    border-radius: 0;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    font-weight: normal;
}
/* bottom_buttons */
#PBN
{
    left:25.45%;
    background-color: rgba(219,112,147,.5);
}

#ABRR
{
    left:33.63%;
    background-color: rgba(219,112,147,.5);
}

#TBM
{
    left:41.81%;
    background-color: rgba(219,112,147,.5);
    transition: all 0.3s ease;
}
#TBO
{
    left: 54.08%;
    background-color: palevioletred;
}

#RMLS
{
    left: 66.35%;
    background-color: #6d8bac ;
    transition: all 0.1s ease;
}

#UAS
{
    left: 78.62%;
    background-color: darkseagreen;
    transition: all 0.3s ease;
}
#CST
{
    left: 86.8%;
    background-color: rgba(143,188,143,.5);
}

/* bottom buttons hover */
.bottomRowButton:hover {
    color: white !important;
    background-color: orange !important;
}

.nonFunctional:hover {
    color: rgba(255,255,255,.7) !important;
    background-color: rgba(35,35,35,1) !important;
}

/*Add animation to buttons when TBO is hovered over*/

#TBO:hover ~ #DataComm{
    -webkit-transform: translateY(-15px);
translateY(- 15 px);
    background: linear-gradient(#6d8bac 60%, palevioletred);
}

#TBO:hover ~ #ASDE-X{
    -webkit-transform: translateY(-15px);
translateY(- 15 px);
    background: linear-gradient(#6d8bac 60%, palevioletred);
}

#TBO:hover ~ #ADS-B{
    -webkit-transform: translateY(-15px);
translateY(- 15 px);
    background: linear-gradient(#6d8bac 60%, palevioletred);
}

#TBO:hover ~ #STARS{
    -webkit-transform: translateY(-15px);
translateY(- 15 px);
    background: linear-gradient(#6d8bac 60%, palevioletred);
}

#TBO:hover ~ #ERAM{
    -webkit-transform: translateY(-15px);
translateY(- 15 px);
    background: linear-gradient(#6d8bac 60%, palevioletred);
}

#TBO:hover ~ #TFMS{
    -webkit-transform: translateY(-15px);
translateY(- 15 px);
    background: linear-gradient(#6d8bac 60%, palevioletred);
}

#TBO:hover ~ #TBFM{
    -webkit-transform: translateY(-15px);
translateY(- 15 px);
    background: linear-gradient(#6d8bac 60%, palevioletred);
}

#TBO:hover ~ #TFDM{
    -webkit-transform: translateY(-15px);
translateY(- 15 px);
    background: linear-gradient(coral 60%, palevioletred);

}
#TBO:hover ~ #NVS{
    -webkit-transform: translateY(-15px);
translateY(- 15 px);
    background: linear-gradient(coral 60%, palevioletred);
}

#TBO:hover ~ #Css-Wx{
    -webkit-transform: translateY(-15px);
translateY(- 15 px);
    background: linear-gradient(coral 60%, palevioletred);
}

#TBO:hover ~ #ATOP{
    -webkit-transform: translateY(-15px);
translateY(- 15 px);
    background: linear-gradient(#6d8bac 60%, palevioletred);
}

/* Video contols, now playing, and link to detailed, for when an animation is activated.*/
#slider{
    background: none!important;
    position: fixed;
    width: 50%;
    height: .6%;
    left: 24.75%;
    top: 87%;
    z-index: 100;
    background-color: cornflowerblue!important;
    visibility: hidden;

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

}
.nowPlayingButton
{
    position: fixed;
    z-index: 100;
    cursor: pointer;
    width: 9%;
    /* height: 6%; */
}
#returnButton
{
    top: 85%;
    left: 8%;
    visibility: hidden;
    opacity: 0;
}

#detailedAnimationButton
{
    top: 85%;
    left: 80.7%;
    visibility: hidden;
    opacity: 0;
}
#nowPlayingText
{
    position: fixed;
    top: 82%;
    left: 25%;
    width: 18%;
    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;
}

#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;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Displays the name of the Program via png image when an Overview animation button is clicked */
.NowPlayingText
{
    position: fixed;
    width: 13%;
    height: 10%;
    top: 81.7%;
    left: 43%;
    visibility: hidden;
    opacity: 0;
}
/* Displays the name of the Program in hyper text when an Overview animation button is clicked */
.NowPlayingProgramText
{
    position: fixed;
    width: 13%;
    height: 10%;
    top: 80.7%;
    left: 43%;
    visibility: hidden;
    opacity: 0;
    font-size: 30px;
    font-weight: bold;
}
#timer{
    position: fixed;
    top: 82.5%;
    left: 70%;
    width: 45vw;
    font-size: 1.375vw;
    display: none;
}
#DataCommText
{
}
#ASDE-XText
{
}
#ADS-BText
{

}
#STARSText
{

}

/* Classes for displaying infrastructure each animation requires */
.DataComm
{

}
.ASDE-X
{

}
.ADS-B
{

}
.STARS
{

}
.ERAM
{

}
.TFDM
{

}
.TFMS
{

}
.TBFM
{

}
.NVS
{

}
.TBO
{

}
.CSSWX
{

}
.UAS
{

}
.RMLS
{

}



.horizontal_dotted_line{


}
#line1
{
    position: fixed;
    top: 5%;
    left: 38%;
    border-bottom: 3px dotted red;
    width:10%;
    transform:rotate(310deg);
    visibility: hidden;
    opacity: 0;
    z-index: 100;
}
#line2
{
    position: fixed;
    top: 7%;
    left: 42%;
    border-bottom: 3px dotted red;
    width:25%;
    transform:rotate(0deg);
    visibility: hidden;
    opacity: 0;
    z-index: 100;
}
#line3
{
    position: fixed;
    top: 12.5%;
    left: 60%;
    border-bottom: 3px dotted red;
    width:10%;
    transform:rotate(50deg);
    visibility: hidden;
    opacity: 0;
    z-index: 100;
}

#ilsL{
    opacity: 0;
}
#ilsR{
    opacity: 0;
}
/*#ilsLeft{
    top: 58%;
    left:9.5%;
    width: 3.5%;
    height:4.5%;
}#ilsRight{
     top: 59%;
     left: 84.5%;
     width: 3.5%;
     height:4.5%;
 }*/
#vortec{
    width: 4.5%;
    height:6%;
    top: 53%;
    left: 40.5%;
}
#vortecRight{
    width: 4.5%;
    height:6%;
    top: 53%;
    left: 54%;
}
/*#ilsTextLeft{
    position: absolute ;
    font-size: 0.85vw ;
    top: 45.5% ;
    left: 1.6% ;
    color: #1a1a1a ;
    font-family: inherit ;
    text-align: center ;
 }
#ilsTextRight{
    position: absolute ;
    font-size: 0.85vw ;
    top: 48.5% ;
    left: 85% ;
    color: #1a1a1a ;
    font-family: inherit;
    text-align: center;
}*/
#vorTextLeft{
    position: absolute ;
    font-size: 0.85vw ;
    top: 36% ;
    left: 38% ;
    color: #1a1a1a ;
    font-family: inherit;
    text-align: center;
}
#vorTextRight{
    position: absolute ;
    font-size: 0.85vw ;
    top: 37% ;
    left: 53% ;
    color: #1a1a1a ;
    font-family: inherit;
    text-align: center;
}


/* infrastructure programs */
#adsbTag{
    top: 10%;
    left: 10%;
    height: 8%;
    width: 5%;
}
#asdexTag{

}
#cssWxTag{

}
#dataCommTag{

}
#eramTagL{
    position: absolute;
    top: 45%;
    left: 38.5%;
    width: 4%;
    z-index: -1;
}
#eramTagR{
    position: absolute;
    top: 45%;
    left: 58%;
    width: 4%;
    z-index: -1;
}
#nvsTag{

}
#starsTagL{
    position: absolute;
    top: 59%;
    left: 36%;
    width: 4%;
    z-index: -1;
}
#starsTagR{
    position: absolute;
    top: 60%;
    left: 62%;
    width: 4%;
    z-index: -1;
}
#tbfmTag{
    position: absolute;
    top: 45%;
    left: 58%;
    width: 4%;
    z-index: -1;
}
#tbfmTagTraconR{
    position: absolute;
    top: 55%;
    left: 61%;
    width: 4%;
    z-index: -1;
}

#tdlsTagL{ /* TDLS comes out of the Tower ICON same as STARS, so will share the same properties as starsTags */
    position: absolute;
    top: 59%;
    left: 36%;
    width: 4%;
    z-index: -1;
}
#tdlsTagR{
    position: absolute;
    top: 60%;
    left: 62%;
    width: 4%;
    z-index: -1;
}
#tfmsTagCommandCenter{
    top: 72%;
    left: 49%;
    width: 4%;
    z-index: -1;
}
#tfmsTagWJHTC{
    top: 72%;
    left: 40%;
    width: 4%;
    z-index: -1;
}
#tfmsTag{

}
/*new entrants hover space sectors*/
.uasSpace{
    width: 45%;
    height: 69%;
    left:50%;
    top:10%;
    background-color: rgba(43, 125, 161, 0.25);
    position: absolute;
    z-index: 999;
    text-align: center;
    font-size: 2em;
    padding: 1%;
    color: #6a6a6a;
    display: none;
}
.cstSpace{
    width: 45%;
    height: 69%;
    right:50%;
    top:10%;
    background-color: rgba(73, 166, 141, 0.25);
    position: absolute;
    z-index: 999;
    text-align: center;
    font-size: 2em;
    padding: 1%;
    color: #6a6a6a;
    display: none;

}

.newEntHover_sharedFaaHq{
    position: absolute;
    top: 56%;
    right: 47.5%;
    width: 100px;
    display: none;
}
.newEntHover_vehicleOperator{

    position: absolute;
    top: 60%;
    left: 14.5%;
    width: 100px;
    display: none;
}
.newEntHover_launchSiteRocket{
    position: absolute;
    top: 10%;
    left: 23%;
    width: 300px;
    z-index: 99;
    display: none;
    transform: rotate(50deg)
}

.newEntHover_operatorRadar{
    position: absolute;
    top: 45%;
   left: 10%;
    width: 70px;
    display: none;
}
.newEntHover_launchSite{
    position: absolute;
    top: 57.5%;
    left: 29%;
    width: 150px;
    z-index: 99;
    display: none;
}
.newEntHover_Pic{
    position: absolute;
    top: 63.5%;
    left: 90%;
    width: 81px;
    z-index: 0;
    display: none;

}

.newEntHover_uas{
    position: absolute;
    top: 10%;
    left: 70%;
    width: 150px;
    z-index: 99;
    display: none;
}


@media screen and (max-width: 768px){
    .infrastructure-wrapper{
        display: flex;
        flex-direction: column;
    }
    .buildingImg > img {
        box-shadow: 2px 3px 12px #6f6f6f91;
        border-radius: 15px 0px 0px 0px;
        object-fit: contain;
        width: 100%;

        background-image: linear-gradient(#403d5f, #b7d9da);
        height: 171px;
    }

}