@font-face {
          font-family: segoilight_eot;
          src: url('fonts/segoeuil.eot');
      }
      @font-face {
          font-family: segoilight_ttf;
          src: url('fonts/segoeuil.ttf');
      }
      @font-face {
          font-family: "Helvetica Neue";
          src: url('fonts/HelveticaNeue.ttf');
      }
      html, body { 
        height: 100%; 
        margin: 0; 
        padding: 0;
        overflow:hidden;
        /*font-family: segoilight_eot,segoilight_ttf;*/
        font-family: Arial, Helvetica, sans-serif;
        color: #474545;
      }
      #sideBar{
        display: inline-block;
        width: 20%;
        background: #F5F1E6;
        height: 100%;
        margin-right: -4px;
        z-index: 10;
        position: absolute;
        box-shadow: 2px 0px 10px #888888;
      }
      #map-canvas{
        display: inline-block;
        width: 100%;
        height: 100%;
        vertical-align: top;
		position: static !important;
      }
    input[type=text]::-ms-clear {
        display: none;
    }
    .cancel-btn{
      position: absolute;
      cursor: pointer;
      width: 40px;
      height: 40px;
      top:0px;
      right: 0px;
      border-radius: 50%;
      display: none;
    }
    .cancel-btn:before{
      content:'';
      position: absolute;
      height: 30px;
      width: 3px;
      right: 19px;
      top: 5px;
      background: white;
      -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    }
    .cancel-btn:after{
      content:'';
      position: absolute;
      height: 30px;
      width: 3px;
      right: 19px;
      top: 5px;
      background: white;
      -ms-transform: rotate(-45deg); /* IE 9 */
    -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
    transform: rotate(-45deg);
    }

    #tourContent{
      position: absolute;
      width: 70%;
      left: 25%;
      z-index: 200;
      background: white;
      top: 20px;
      height: 80%;
      padding: 15px;
      border-radius: 5px;
      display: none;
     }
     #tourContentCloseBtn{
      position: absolute;
      bottom: 0px;
      margin-left: -30px;
      margin-bottom: -20px;
      cursor: pointer;
     }
     .tourbuttons,.liveView,.liveReload{
      cursor: pointer;
     }
     .tourIcon{
      width: 50px;
      margin-left: -15px;
      vertical-align: top;
     }
     .reloadIcon{
      width: 30px;
      margin-top: 15px;
      margin-bottom: 10px;
      vertical-align: top;
     }
     .tourText{
      display: inline-block;
      margin-top: 15px;
      font-weight: bold;
      margin-left: -10px;
     }
     .liveText{
      display: inline-block;
      margin-top: 20px;
      font-weight: bold;
      margin-left: 0px;
     }
     .reloadText{
      display: inline-block;
      margin-top: 20px;
      font-weight: bold;
      margin-left: 5px;
     }
      #sideBar>.topNav{
        height: 55px;
        background: white;
      }
      #sideBar>.topNav>.spLogo{
        height: 100%;
        display: inline-block;
        vertical-align: top;
        line-height: 53px;
        font-size: 15px;
        padding-left: 10px;
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        color: #777;
      }
      #sideBar>.topNav>.spLogo img{
        height: 50%;
        margin-top:13px;
        margin-left: 10px;
        vertical-align: top;
      }
      #sideBar>.topNav>.buttonHolder{
        width: 15%;
        height: 100%;
        display: inline-block;
        background: #EB7A75;
        text-align: center;
        float: right;
        position: relative;
        cursor: pointer;
      }
      #sideBar>.topNav>.buttonHolder.selected{
        z-index: 10;
        background: #E23C34;
        -webkit-box-shadow: 0px 0px 10px 0px #888888;
        -moz-box-shadow: 0px 0px 10px 0px #888888;
        box-shadow: 0px 0px 10px 0px #888888;  
      }
      #sideBar>.topNav>.buttonHolder>img{
        height: 40%;
        margin-top: 15px;
      }
      #sideBar>#DirectionsMainHolder>.swapHolder{
        width: 10%;
      }
      .inputSection{
        position: relative;
        z-index: 15;
        padding: 8px;
        background: #E23C34;

      }
      #sideBar>#DirectionsMainHolder>.inputSection>.swapHolder{
        display: inline-block;
        width: 8%;
        vertical-align: top;
        cursor: pointer;
      }
      #sideBar>#DirectionsMainHolder>.inputSection>.swapHolder>img{
        width: 80%;
        margin-top: 20px;
      }
      #sideBar>#DirectionsMainHolder>.inputSection>.inputsHolder{
        width: 72%;
        display: inline-block;
        padding-bottom: 10px;
      }
      #sideBar>#DirectionsMainHolder>.inputSection>.inputsHolder>.startendInputs{
        border-bottom: 2px solid white;
        position: relative;
      }
      #sideBar>#DirectionsMainHolder>.inputSection>.inputsHolder>.startendInputs>img{
        margin-top: 10px;
        width: 7%;
      }
      #sideBar>#DirectionsMainHolder>.inputSection>.inputsHolder>.startendInputs>input{
        vertical-align: top;
        background: transparent;
        width: calc(85% - 25px);
        border: none;
        height: 35px;
        color:white;
        outline: none;
        font-size: 17px;
        /*font-family: segoilight_eot,segoilight_ttf;*/
        font-family: Arial, Helvetica, sans-serif;
      }
      ::-webkit-input-placeholder {
         color: #E2B0B0;
         font-style: italic;
      }

      :-moz-placeholder { /* Firefox 18- */
         color: #E2B0B0;  
         font-style: italic;
      }

      ::-moz-placeholder {  /* Firefox 19+ */
         color: #E2B0B0;  
         font-style: italic;
      }

      :-ms-input-placeholder {  
         color: #E2B0B0;  
         font-style: italic;
      }
      #searchBtn{
        width: 8%;
        display: inline-block;
        cursor: pointer;
        vertical-align: top;
        padding: 25px 0px 0px 15px;
      }
     #searchBtn img{
      width: 100%;
     }
     #sideBar>#PositionsMainHolder>.inputSection>.inputsHolder{
      width: 100%;
      display: inline-block;
     }
     #sideBar>#PositionsMainHolder>.inputSection>.inputsHolder>input{
      color: white;
      border: none;
      background: transparent;
      outline: none;
      height: 50px;
      font-size: 22px;
      width: calc(100% - 35px);
      padding-left: 3px;
      padding-right: 3px;
     }
     #HowToUseHolder .inputSection{
      color: white;
      font-weight: bold;
      padding :15px 7px 15px 15px;
     }
     #directionContent, #categoryContent, #howtouseContent{
      height: calc(100% - 161px);
      overflow-y:scroll;
      color: #474545;
     }
      #directionContent::-webkit-scrollbar , #categoryContent::-webkit-scrollbar {
       width: 5px;
       margin-right: 15px;
       border-radius: 20px;
      }

      #directionContent::-webkit-scrollbar-track , #categoryContent::-webkit-scrollbar-track{
        -webkit-box-shadow: none;
      }

      #directionContent::-webkit-scrollbar-thumb , #categoryContent::-webkit-scrollbar-thumb{
        background-color: red;
        border-radius: 50px;
      }
     .directionsHolder{
      border-bottom: 2px solid white;
     }
     .directionsHolder>.iconContent{
      text-align: center;
      width: 19%;
      display: inline-block;
      vertical-align: top;
     }
     .directionsHolder>.iconContent img{
      margin-top: 15px;
     }
     .directionsHolder>.directions{
      display: inline-block;
      text-align: center;
      width: 77%;
      border-left: 2px solid white;
     }
     .directionsHolder>.directions>.dHead{
      padding-top: 5px;
      font-style: italic;
      color: darkgrey;
     }
     .directionsHolder>.directions>.dMain{
      padding: 5px 0px 5px 0px;
      font-size: 20px;  
     }
     .directionsHolder>.directions>.dExtra{
      font-size: 15px; 
      font-style: italic;
      padding-bottom: 5px; 
     }
     .startContent{

     }
     .walkContent{
      background: #F0F2FF;
     }
     .stairsContent{
      background: #EEFFF4;
     }
     .endContent{
      background: #FFF0F0;
     }
     .totalTimeAndDistance{
      color: #474747;
      text-align: center;
     }
     .totalTimeAndDistance img{
      max-height: 20px;
      vertical-align: bottom;
      margin-right: 10px;
     }
     #closeSideBarBtn img{
      height: 15px;
      margin-top: 17px;
     }
     #closeSideBarBtn{
      cursor: pointer;
      left: 120px;
      text-align: center;
      width: 50px;
      height: 50px;
      background: red;
      border-radius: 50%;
      position: absolute;
      bottom: 15px;
      box-shadow: -3px 3px 10px #888888;
     }
     #openSideBar img{
      width: 20px;
      margin-top: 15px;
     }
     #openSideBar{
      cursor: pointer;
      left: 20px;
      text-align: center;
      width: 50px;
      height: 50px;
      background: red;
      border-radius: 50%;
      position: absolute;
      bottom: 5px;
      box-shadow: -3px 3px 10px #888888;
      top: 20px;
     }
     #popup{
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 50;
      display: none;
     }
     #popupBg{
      position: absolute;
      background: black;
      width: 100%;
      height: 100%;
      opacity: 0;
      z-index: -1;
      cursor: pointer;
     }

     #popupContent img{
      max-width: 100%;
     }
     #popupContent .label{
      color: maroon;
      font-weight: bold;
      margin-bottom: 15px;
     }
     #popupContent, #popupShare{
      background: white;
      padding: 0px 20px 20px 20px;
      border-radius: 8px;
      border: 3px solid lightgrey;
      width: 900px;
      margin: auto;
      position: absolute;
      margin-top: 20px;
      max-height: 80%;
      overflow-y:auto;
      overflow-x:hidden;
      opacity: 0;
      left: 0;
      right: 0;
     }
     #popupShare input{
      height: 40px;
      width: 100%;
      border-radius: 3px;
      border: 1px solid lightgrey;
      padding-left: 10px;
     }
     #openModal{
      cursor: pointer;
      right: 20px;
      text-align: center;
      width: 50px;
      height: 50px;
      background: #347AE2;
      border-radius: 50%;
      position: absolute;
      bottom: 5px;
      box-shadow: -3px 3px 10px #888888;
      top: 20px;
     }
     #openModal img{
      margin-top: 8px;
      height: 60%;
     }
     #shareLink{
      cursor: pointer;
      right: 20px;
      text-align: center;
      width: 50px;
      height: 50px;
      background: #34E26A;
      border-radius: 50%;
      position: absolute;
      bottom: 5px;
      box-shadow: -3px 3px 10px #888888;
      top: 90px;
     }
     #shareLink img{
      margin-top: 12px;
      margin-left: -4px;
      height: 50%;
     }
     #downloadMap{
      cursor: pointer;
      right: 20px;
      text-align: center;
      width: 50px;
      height: 50px;
      background: #8734E2;
      border-radius: 50%;
      position: absolute;
      bottom: 5px;
      box-shadow: -3px 3px 10px #888888;
      top: 160px;
     }
     #downloadMap img{
      margin-top: 8px;
      margin-left: -1px;
      height: 60%;
     }
     .barContent{
      display: none;
     }
     .cHead{
      background: #FFEDE4;
      padding: 15px 10px 15px 15px;
      cursor: pointer;
     }
     .cHead>.dropDownIcon{
      width: 5%;
      vertical-align: top;
      margin-top: 3px;
      padding-right: 10px;
      transform: rotate(-90deg);
      -ms-transform: rotate(-90deg); /* IE 9 */
      -moz-transform: rotate(-90deg); /* Firefox */
      -webkit-transform: rotate(-90deg); /* Safari and Chrome */
      -o-transform: rotate(-90deg); /* Opera */
      margin-bottom: 5px;
      transition-duration: 0.2s;
     }
     .cHead>.dropDownIcon.rotated{
      margin-bottom: 0px;
      transform: rotate(0deg);
      -ms-transform: rotate(0deg); /* IE 9 */
      -moz-transform: rotate(0deg); /* Firefox */
      -webkit-transform: rotate(0deg); /* Safari and Chrome */
      -o-transform: rotate(0deg); /* Opera */
      transition-duration: 0.2s;
     }
     .eye{
      width: 20px;
      float: right
     }
     .cBody{
      display: none;
      padding: 10px;
     }
     .cBody>li{
      padding: 10px;
      padding-left: 40px;
      list-style-type: none;
      cursor: pointer;
     }
     .cBody>li>.cBodyText, .cHead>.cHeadText{
      width: 80%;
      display: inline-block;
      color: #474545;
     }
	 .popular{
		color: red !important;
	 }
     .facility{
      padding: 15px 10px 15px 40px;
      cursor: pointer;
      list-style-type: none;
     }
     #footer{
      height: 30px;
      width: 100%;
      position: fixed;
      bottom: 0px;
      background: blue;
      text-align: center;
      padding-top: 7px;
      z-index: 1;
      color: white;
      cursor: pointer;

     }
     #gateHours{
      width: 100%;
      border-spacing: 0px 10px;
      font-size: 13px;
     }
     .tableWrapper{
        width: auto;
        overflow-x: scroll;
     }
     #gateHours td{
        padding: 5px 10px 5px 10px;
      }
     #gateHours tr:nth-child(even) {
        background: #FFEEEC;
      }
      .noticeInfoHolder{
        padding: 15px;
        background: #F2F2F2;
        margin-top: 20px;
      }
      .scrollFix{
        overflow-y: hidden;
      }
     @media (max-width:1300px){
      #sideBar{
        width: 25%;
      }
      #popupContent , #popupShare{
        max-width: 800px;
       }
       #tourContent{
        width: 65%;
        left: 30%;
       }
     }
     @media (max-width:960px){
      #sideBar{
        width: 35%;
      }
      #popupContent , #popupShare{
        max-width: 600px;
       }
       #tourContent{
        width: 55%;
        left: 40%;
       }
     }
     @media (max-width:810px){
      #sideBar{
        width: 45%;
      }
      #popupContent , #popupShare{
        width: auto;
        margin-right: 20px;
        margin-left: 20px;
       }
       #tourContent{
        width: 45%;
        left: 50%;
       }
     }
     @media (max-width:610px){
      #sideBar{
        display: none;
        width: 95%;
        margin-left: -95%;
      }
      #sideBar>#DirectionsMainHolder>.inputSection>.inputsHolder>.startendInputs>input{
        width: 80%;
      }
      #tourContent{
        width: 87%;
        left: 3%;
       }
       #tourContentCloseBtn{
        margin-left: -20px;
       }
        #shareLink,#downloadMap,#openModal{
        display: none;
       }
       #openSideBar{
        left: auto !important;
        right: 20px !important;
       }
       #openModal{
        top: 90px;
       }
     }