html,
body{
  font-family: "Rubik",sans-serif;
  /*font-family: "grapheinpro",Arial,"Helvetica Neue",Helvetica,sans-serif; */
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  overflow-y: hidden !important;
  overflow-x: hidden !important;
  outline:none !important;
  border:none;
  -ms-user-select: none;
      user-select: none;
  -o-user-select:none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none
}

/*h1 { 
  font-family: Oswald; font-size: 11px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 11px; 
} 

h3 { font-family: Oswald; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 15.4px; } p { font-family: Oswald; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 20px; } blockquote { font-family: Oswald; font-size: 21px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 30px; } pre { font-family: Oswald; font-size: 13px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 18.5714px; }
*/
#logo-block{  
  display: inline-block;  
  position:absolute;      
  left:15px;
  bottom:2px;
  height:50px;
  width:auto;
}

.logos{
  display:inline-block;
  height:40px;
  left:auto;
  right:auto;
  opacity:.7;
  -webkit-box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.4);
          box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.4);
}

/*#MTA{
  width:134px;  
}*/

#viewDiv {
  position: absolute;
  right: 0px;
  left: 0px;
  bottom:0px;
  width:100%;
  height:100%;
  overflow-y: hidden !important; 
  border: 0px;
  outline:none !important;
  border:none;
  outline-color: white;
  -ms-user-select: none;
      user-select: none;
  -o-user-select:none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none  
}

#viewDiv:focus{
  -ms-user-select: none;
      user-select: none;
  -o-user-select:none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
}

#loader{
  position: relative;
  display:none;
  left: 40%;
  top: 5%;
  width: 80px;
  height: 80px;
  /*z-index: 9999;*/
  background: url(imgs/9.gif) center no-repeat #fff;
}.hide{
  display:none
}.show{
  display:block
}


#panel-header{
  display:none;
}

#panel{
  position: absolute;
  width:330px;
  background: white;
  top: 0px;
  right: 0px;
  left: auto;
  padding-left:30px;
  padding-right:25px;
  padding-top:35px;
  padding-bottom:20px;
  font-family: "Rubik",sans-serif;  
  color:#404040;
  overflow-y:scroll;
  overflow-x:hidden;
  opacity: 0.9;
  height:100%;     
}

#menuImg{
  display: none;
  background-color: white !important;
}

/*#CCSF{
  position:absolute;
  display:none;
  top:20px;
  left:31px;  
  width:312px;
}

#CCSF a:hover{
  background-color:none !important;  
  padding:none !important;
  border-radius: none !important;
  color:none !important;
}*/

#mapTitle{
  position:relative;
  font-family: "Rubik",sans-serif;
  font-size: 47px;
  margin-left: 2px;
  margin-top: -12px;
  margin-right: 0px;
  font-weight: 500;
  color: #1EABB4;
  border-radius:8px;
  border: 2px solid #1EABB4;
  padding-left: 16px;
  padding-top: 12px;
  padding-bottom:24px;
  cursor: pointer;
}

#mapSubTitle{
  position:absolute;
  font-family: "Rubik",sans-serif;
  margin-left: 2px;  
  font-size: 14px;
  font-weight: 600;
  margin-top: -60px;
  color: #1EABB4;
/*  border: 2px solid #1EABB4;*/
  border-radius:8px;
  padding-left: 21px;
  padding-bottom: 14px;
}

#intro{
  margin-top:-15px;
  margin-left:5px;
  font-family: "Rubik",sans-serif;
  font-size:14px;
  margin-right:10px;
}

#intro-notes{
  margin-top:20px;
  margin-left:5px;
  font-family: "Rubik",sans-serif;
  font-size:12px;
  font-style: italic;
  margin-right:10px;
}


.searchOptions button {    
    margin-top:15px;
    margin-bottom: 10px;
    border: 2px solid #1EABB4;    
    background-color: white;
    color: #1EABB4;
    /*color: # 22BEC8; */
    font-size: 13px;
    font-weight:700;
    font-family: "grapheinpro",Arial,"Helvetica Neue",Helvetica,sans-serif;  
    margin-left:3px;
    height:50px;
    padding: 0px 10px; /* Some padding */
    cursor: pointer; /* Pointer/hand icon */
    display: inline-block; /* Make the buttons appear below each other */
    float:left;
    border-radius: 6px
}


.searchOptions button:focus {outline:0;}

/* Clear floats (clearfix hack) */
.searchOptions:after {
    content: "";
    clear: both;
    display: table;
}
/*https://webaim.org/resources/contrastchecker/*/

#searchSuperSection{
  display:none;
}

#searchSuperTitle{
  display:block;
}

#superSVG{
  display:block;
}

#searchHoodTitle{
  display:block;
  height:10px;
}

#hoodSVG{
  display:block;
}

#resultsTitle{  
  position: relative;
  font-family: "grapheinpro",Arial,"Helvetica Neue",Helvetica,sans-serif; 
  font-size:14px;
  font-weight: 600; 
  width:100%;
  top:10px;
}

#about{
  display:none;
  position:relative;
  font-family: "grapheinpro",Arial,"Helvetica Neue",Helvetica,sans-serif; 
  font-size:11px;
  font-style: italic;
  color:gray;
  top:10px;
  bottom:10px;  
}

#note{
  position:relative;
  font-family: "grapheinpro",Arial,"Helvetica Neue",Helvetica,sans-serif; 
  font-size:11px;
  font-style: italic;
  color:gray;
  top:10px;
  bottom:10px;  
  line-height: 1.2em;
}

#results{
  font-family: "grapheinpro",Arial,"Helvetica Neue",Helvetica,sans-serif; 
  background-color: white;
  font-size:12px;
  line-height: 1.3em;
  padding-bottom:80px;
  padding-left:8px;
  padding-top:0px;
  padding-right:10px;
  margin-top:0px;
  display:none
}

#listed-name{
  margin-top:15px;
  margin-bottom:5px;
  margin-left:-9px;
  background-color: #CAE9FF;
  height:auto;
  padding: 5px 8px;
  right:25px;
  text-decoration: none;
  cursor:pointer;
  width:100%;
  font-size:13px;
  line-height: 1.6em;
  font-weight:600;
  display:inline-block;
  border-radius: 3px
}

br{
  display:block;
  content:"";
  margin-top:5px;
}


#linked-page{
  font-weight: 600;
  font-style: bold;  
  text-decoration:none;
  font-size:12px;
  margin-top:5px;
}

#linked-page a:link{
  color:#1EABB4 !important;  
}

#linked-page a:hover{
  background-color:#1EABB4;
  padding:2px 4px;
  border-radius: 2px;
  color:white !important;
}

#linked-page:visited{
  color:#707070;
  font-weight:bold;
  text-decoration:underline
}


#type:hover{
  background-color:#f6ff77;
}

input{
  width:275px;
  border: 1px solid #dddddd;
  padding: 10px 13px;
  height:15px;
  border-radius: 7px;
}

#mbl-userInput{
  display:none;
}

.title{
  margin-left:1px;
  height:2px;
}

.mode1 {
  display:inline-block;
  height:31px;
  cursor:pointer;
}

.mode2 {
  display:inline-block;
  height:31px;
  cursor:pointer;
}

.modes {
  display:inline-block;
  border-width:0px;
  border-color:white; 
  padding:3px;
  border-radius:30px;
}

#modesDiv{
  height:35px;
  width:287px;
}

.m{
  border: 1px solid #ededed;
  padding: 10px 10px;
  border-radius: 4px;
}

.box {
  border: 1px solid #ededed;
  padding: 10px 0px 0px 20px;
  border-radius: 4px;
  height:300px;
}

.hidden{
  display:none !important;
}

#modesTitle {
  display:block;
}

.esri-popup{
  display:none;
}

#mbl-title{
    display:none;
  }

/*#mbl-CCSF{
  display:none;
}*/

#mbl-intro{
  display:none;
}

#mbl-top-panel{
  display:none;
}

#bar{
  display:none;
}

#mbl-tiny-title{
  display:none;
}

/*#panel-cntr{
  display:none;
}*/

#arrow{
  display:none;
}

#about{
  display:none;
}

#mbl-menu{
  display:none;
}

#splash{
  display:none;
}

#type-block-mbl{
  display:none;
}

#info-mbl{
  display:none;
}

#logo-block-mbl{  
  display:none;
}

#mbl-btn-block{
  display:none;
}

#loader-mbl-cntr{
  display:none;
}

/*---------------f---------------------------------------MOBILE------------------------------------------------------------*/

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

#modesDiv{
  display:none;
};

#viewDiv{
  top:0px;
  height:100%;
  outline:none;
  z-index:0;
  text-align:center;
}

#viewDiv:active{
  outline:none;
}

#splash{  
  position: absolute;
  display:inline-block;
  top:0px;
  height:90%;
  width:70%;
  background-color:#1EABB4;
  color:white;  
  text-align: left;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding:18% 13% 25% 20%;
  font-weight: 200;
  font-family: "Rubik","grapheinpro",Arial,"Helvetica Neue",Helvetica,sans-serif; 
  z-index:100;
  opacity: .85;
  background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0)), to(rgba(0,0,0,.4)));
  background-image: -o-linear-gradient(bottom, rgba(0,0,0,0), rgba(0,0,0,.4));
  background-image: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,.4));
/*  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.4));*/
}

h1{
  font-weight: 100;  
  font-size:250%;
  width:85%;
  line-height: .1em;
  font-family: "Rubik","grapheinpro",Arial,"Helvetica Neue",Helvetica,sans-serif; 
}
 
h2{
  font-weight: 100;
  font-size:140%; 
  margin-left:3px; 
  line-height:.5em;  
  font-family: "Rubik","grapheinpro",Arial,"Helvetica Neue",Helvetica,sans-serif; 
}

h4{
  font-weight: 1;
  font-size:75%;
  line-height: 1.5em;
  margin-bottom:0px;
  font-family: "Rubik","grapheinpro",Arial,"Helvetica Neue",Helvetica,sans-serif; 
}

#author{
  display:inline-block;
  position:relative;
  margin:auto;    
  margin-top:15px;
  margin-bottom:10px;
  font-weight: 1;
  font-size:65%;  
  opacity:0.9;
  font-family: "Rubik","grapheinpro",Arial,"Helvetica Neue",Helvetica,sans-serif; 
}


#logo-block-mbl{  
  display:inline-block;  
  position:relative;        
  left:0px;
  top:7px;
  padding:0px;
  margin:auto;    
  left:0;right:0;
}

#MTA{
  width:auto;
  opacity: 1
}

.logos-mbl{
  display:inline-block;
  max-height:45px;  
  width:auto;
  height:40px;
  margin-right:1px;
  margin-top:5px;
  float:center;
  opacity:1;
  -webkit-box-shadow: 0px 0px 6px rgba(255,255,255,0.4);
          box-shadow: 0px 0px 6px rgba(255,255,255,0.4);
}

#x{
  display:inline-block;
  position:absolute;    
  float:right;
  top:22px;
  right:35px;
  width:18px;  
  padding:6px;
  border-radius: 30px;
}

/*  #mbl-CCSF{
   display:none;
   float:left;
   height:50px;
   margin-left:15px;
   margin-top:3px;
   opacity: 1
  }*/

  #hoodSVG{
    display:none;
  }

  #superSVG{
    display: none;
  }

  #left-grad{
    position:absolute;
    display:none;
    width:70px;
    height:100%;
    top:0px;    
    color:white;        
    background-image: -webkit-gradient(linear, right top, left top, from(rgba(255,255,255,0)), to(rgba(255,255,255,.7)));        
    background-image: -o-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,.7));        
    background-image: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,.7));    
  }

  #right-grad{
    position:absolute;
    display:none;
    width:60px;
    float:right;
    left:auto;
    right:0px;
    height:100%;
    top:0px;    
    color:white;    
    opacity:.8;    
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,0)), to(rgba(0,0,0,.1)));    
    background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1));    
    background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.1));    
  }

  #bottom-grad{
    position:absolute;
    display:inline-block;
    width:100%;
    height:70px;
    bottom:-1px;
    top:auto;
    color:white;    
    margin:auto;    
    left:0;right:0;
/*    background-color:red;*/
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,.3)));
    background-image: -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.3));
    background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.3));    
  }

  #mbl-top-panel{
    position:relative;
    display:inline-block;
    height:60px;
    top:0px;
    text-align: center;    
    width:100%;   
    font-family: "grapheinpro",Arial,"Helvetica Neue",Helvetica,sans-serif; 
    opacity:1;
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(255,255,255,0)), to(rgba(255,255,255,.6)));
    background-image: -o-linear-gradient(bottom, rgba(255,255,255,0), rgba(255,255,255,.6));
    background-image: linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,.6));
    /*box-shadow: 0 0 8px rgba(0,0,0,0.2);*/
  }

  #mbl-title{
    position:relative; 
    display:none; 
    color:#1EABB4;     
    font-weight:500;
    font-size:120%;
    font-style: condensed;        
    margin-top:5px;
  }

  #mbl-intro{
    display:none;
    /*display:inline-block;*/
    position: relative; 
    color:white;
    font-weight: 500;
    font-weight:bold;
    width:90%;
    font-size: 70%;
    font-style: italic;
    margin-left:125px;
    top:-9px;
    margin-right:0px;  
  }

  #burger{
    display:none;
    float:right;
    margin-top:15px;
    margin-right:15px;
    width:25px;
  }

  #mbl-userInput{
    position:absolute;
    display:inline-block;
    height:25px;
    left:78px;
    /*margin:auto;    
    left:0;right:0;*/
    width:auto;
    max-width:85vw;
    min-width:65vw;
    top:16px;
  }

  #mbl-textbox{
    position:relative;
    margin-top:5px;
    padding:0 12px 0 13px;
    width:90%;
    text-align: center;
    height:2.5em;
    font-size:90%;
    border-width:0px;    
    border-radius: 30px;
    /*z-index:20;*/
    -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.1);
            box-shadow: 0px 0px 6px rgba(0,0,0,0.1);
  }

  #input{
    width:70%;    
  }

  @-webkit-keyframes blink { 
     50% { border-color: #FF9696; } 
  }

  @keyframes blink { 
     50% { border-color: #FF9696; } 
  }

  #mbl-btn-block{
    position:absolute;
    display:inline-block;
    height:auto;
    width:60px;
    left:14px;
    top:15px;    
  }

  .mbl-btns{
    margin:1px;
    padding:10px;
    width:30px;    
    background-color:#1EABB4;
    border-radius: 0px;
    -webkit-box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.4);
            box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.4);
  }

  #search-mbl{    
    /*display:inline-block;
    position:absolute;*/
    background-color:#FF9696;
    /*float:right;
    top:15px;
    right:14px;*/
  }

  .esri-ui-corner{
    display:none;
  }

  #info-mbl{
    display:inline-block;
    position:absolute;    
    float:right;
    top:21px;
    right:13px;
    width:20px;
    padding:5px;
    border-radius: 30px;
    -webkit-box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.4);
            box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.4);
  }

  #type-block-mbl {
    display: none;
    position: absolute;
    font-family: "Rubik",sans-serif;
    font-size:75%;
    padding: 0px;
    border:0px;
    height:170px;
    float:left;
    right:auto;
    width:40px;
    max-width:80px;
    /*max-width:85%;*/
    /*max-height:40px;*/
    margin-top:auto;
    margin-bottom:auto;
    margin-right:10px;
    vertical-align: center;
    /*width:auto;*/
    top:240px;  
    left:22px;
  }

  .type-icons-mbl{
    width:28px;
    background-color: #1EABB4;
    border-radius:25px;
    margin-left:1px;
    margin-bottom:5px;
    margin-right:5px;
    vertical-align: center;
    padding:2px;
    max-width:35px;
    min-width:20px;
    float:right;
    -webkit-box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.4);
            box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.4);      
  }

  #panel-cntr{  
    display:inline-block;
    position:absolute;      
    bottom:-1px;
    top:auto;
    color:white;    
    margin:auto;    
    left:0;right:0;
    height:40px;
    min-height:10px;
    max-height:50vh;
    width:100%;      
    padding-top:20px;
    overflow-x: hidden;
    overflow-y:hidden;
  }

  #arrow{       
    display:block;
    position:absolute;      
    top:0px;
    margin:auto;    
    left:0;right:0;
    opacity:.95;
    width:50px;    
  }

  #panel{       
    position:relative;
    top:0px;
    padding-left:25px;
    padding-right:30px;
    padding-top:5px;
    padding-bottom:0px;
    text-align:center;
    margin:auto;    
    left:0;right:0;
    width:84%;
    opacity:0.95;
    overflow-y: hidden;
    border-style: solid;
    border-width:3px 1px 1px 0px;
    border-radius:15px 15px 0px 0px;    
    border-color: #ffffff;
    /*background: white;  */  
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);  
            box-shadow: 0 0 5px rgba(0,0,0,0.2);

  }

  #resultsTitle{
   display:inline-block;
   position:relative;   
   text-align:center;
   left:0;right:0;   
   margin:auto;  
   width:100%;     
   margin-top:3px; 
   margin-bottom:0px;
   font-size:85%;
   color:#404040;
   top:4px;
  }

  #results{
    display:block;
    position:relative; 
    background: white;
    width:98%;
    color:#404040;
    font-size:70%;
    margin:auto;
    left:0;right:0;
    margin-top:3px;    
    margin-bottom:3px;
    overflow-y: scroll;
    max-height:30vh;
    height:auto;
    opacity:1;
    padding-bottom:0px;
  }

  #note{
    display:none;
    position:relative;   
    top:0px;
    margin:auto;
    left:0;right:0;
    margin-top:2px;
    width:88%;
    line-height: 1.3em;
  }

  #about{
   display:none;
   position:relative;   
   text-align:center;
   left:0;right:0;      
   margin:auto;      
   width:85%;
   text-align: center;
   line-height: 1.2em;
   width:90%;   
   margin-top:3px;
   margin-bottom:10px;
   top:0px;   
  }

 #infoDiv {
      position: relative;
      display:none;
      top:135px;
      left:3px;
      background-color: white;
      color: black;
      padding: 6px;      
      width: 235px;
      outline-width: 2px;
      border-radius: 1px;
      border:1px solid #d3d3d3; 
      font-family: 'Helvetica Neue', sans-serif; 
      font-size: 12px;
      letter-spacing: 0px; 
    }

  .drop-down{
      display:none;
      position: absolute;
      width: 97px;
      left: 147px;
      top:4px;
      outline-width: 2px;
      border-radius: 1px;
      border:1px solid #d3d3d3; 
      font-family: 'Helvetica Neue', sans-serif; 
      font-size: 12px;
      letter-spacing: 0px; 
    }

    #type-drop{
      display:none;
    }

    #hood-drop{
      display:none;
    }

    #super-drop{
      display:none;
    }

  #linked-page{
    font-size:100%;
  }

  #listed-name{
    margin-left:-5px;
    padding:10px 18px 7px 17px;
    margin-top:8px;
    width:91%;
    font-size:115%;
    border-radius:40px;
  }

 #searchSuperTitle{
    display:none;
  }

  #searchHoodTitle{
    display:none;
  }

  #modesTitle{
    display:none;
  }

  #userInput{
    display:none;
  }

  #mbl-tiny-title{
    display:none;
  }

  #intro-notes{
    display:none;
  }
  
/*  #CCSF{
    display:none;
  }*/

  #logo-block{
    display:none;
  }

  .logos{
    display:none;
  }

  #intro{
    display:none; 
  }

  #mapTitle{
    display:none;
  }

  #mapSubTitle{
    display:none;
  }

  .searchOptions button {    
    display:none;
  }


  #menuImg{
    background-color: white !important;
    cursor: pointer;
    display: inline-block;
    float:left;
    margin-top:21px;
    margin-left:2px;
    width:20px;
    height:20px;
  }

  #loader-mbl-cntr{
    position: absolute;
    display:none;
    margin:auto;
    background-color: white;
    text-align: center;
    left:0;
    right:0;
    width: 100%;
    height: 100%; 
    opacity:.9; 
  }

  #loader-mbl-text{
    position: absolute;
    display:inline-block;
    top:245px;
    font-family: "Rubik","grapheinpro",Arial,"Helvetica Neue",Helvetica,sans-serif; 
    font-size: 70%;
    font-weight: 400;
    font-style:italic;
    margin:auto;
    left:0;
    right:0;
    width:50%;
    height:auto;
    color:#404040;
  }

  #loader-mbl{
    position: absolute;
    display:inline-block;
    margin:auto;
    left:0;
    right:0;
    top:170px;
    width: 80px;
    height: 80px;
    opacity:1; 
    /*z-index: 9999;*/
    background: url(imgs/erf.gif) center no-repeat #fff;
  /*  box-shadow: 0 0 8px 8px white inset;*/
  }


}

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

  #x{
    top:22px;
    right:32px;
  }

}

@media screen and (max-width: 360px){
  
  #mbl-userInput{
    max-width:80vw;
    min-width:55vw;
    width:auto;
    margin-right:40px;
  }

  #mbl-textbox{  
    width:80%;
  }

  #panel{
    padding-left:15px;
    padding-right:15px;
  }

  #results{
    padding-right:10px;
    width:90%;
  }

  h1{
    font-size:200%;
  }

  h2{
    font-size:110%;
  }

  h4{
    font-size:70%;
    font-family: "Rubik","grapheinpro",Arial,"Helvetica Neue",Helvetica,sans-serif; 
  }

  #splash{
    width:62%;
    padding-left:25%;
    padding-right:13%;
  }

  #author{
    font-size:65%; 
  }

  .logos-mbl{
    left:0px;
    height:32px; 
    margin-right:0px; 
  }


  #x{    
    width:18px;  
    padding:6px;
    right:13px;
  }

}

 

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

#resultsTitle{
  font-size:85%;
  width:100%;
}

}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */

  #linked-page{
    margin-top:0px;
  }

  br{
    line-height: 120%
  }

  #resultsTitle{  
    top:5px;
  }

  #results{
    line-height: 1.5em
  }

}