html,body{
    background:#d1d1d1;
    height:100%;width:100%;
    padding:0;
    margin:0;
}

button#fab {
    position: absolute;
    right: 1em;
    bottom: 1em;
    z-index: 1;
}

div#map {
    position: relative;
    mix-blend-mode: multiply;
}

.drawer-header {
    box-sizing: border-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding: 16px;
    height: 151px; 
    background:url("img/logo.jpg");
    background: url('../img/logo.jpg');
    background-size: cover;
    color:rgba(0,0,0,0.87);
    padding-top: 13em;
    text-align: center;
}
.drawer-header .mdl-layout-title,
.drawer-header p{

    font-weight: 600!important;
}
.drawer-header__logo{

}
.mdl-navigation{
    padding:1em;
}

.mdl-layout__subtitle,.mdl-layout-subtitle {
    display: block;
    position: relative;
    font-family: "Roboto","Helvetica","Arial",sans-serif;
    font-size: 16px;
    line-height: 1;
    letter-spacing: .02em;
    font-weight: 400;
    box-sizing: border-box
}

.mdl-list__header{
    padding-left: 0;
    padding-right: 2em;
}

.map-wrap #map{
    transition: opacity .5s ease-in-out;
    opacity:1;
}
.map-wrap #map.hide {
    opacity:0;
}

.map-wrap{
    height:100%;
    width:100%;
    max-height:800px;
    max-width:800px;
    /* padding: 32px 32px; */
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; 
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch; 
}

#map{
    height:100%;
    width:100%;
    max-height:800px;
    max-width:800px;
max-width: none;
 min-width: 0px;
}

.moh{
background-image:url("../img/moh.jpg");
}
.ash{
background-image:url("../img/ash.jpg");
}
.bam{
background-image:url("../img/bam.jpg");
}

.grid {
    mix-blend-mode: multiply;
    pointer-events: none;
    height:100%;
    width:100%;
    max-height:800px;
    max-width:800px;
    position: absolute;
    border-top: thin solid black;
    border-left: thin solid black;
    top:0;
    left:0;
/*
    top: 30px;
    left: 32px;    
*/
}

.map-wrap {
    position: relative;
}

.grid.size19 > .box {
    box-sizing: border-box;
    width: 5.555%;
    border-right: thin solid black;
    border-bottom: thin solid black;
    float: left;
    height: 5.555%;
    position:relative;
    z-index:2;
}

.grid.size13 > .box {
    box-sizing: border-box;
    width: 8.333%;
    border-right: thin solid black;
    border-bottom: thin solid black;
    float: left;
    height: 8.333%;
    position:relative;
    z-index:2;
}

.grid.size9 > .box {
    box-sizing: border-box;
    border-right: thin solid black;
    border-bottom: thin solid black;
    float: left;
    width: 12.5%;
    height: 12.5%;
    position:relative;
    z-index:2;
}
.map-wrap.size9 .pebble{
    width:9.6%;
    height:9.6%;
    margin-left:-4.8%;
    margin-top:-4.8%;
    border-radius: 100px;
}
@media screen and (min-width: 760px) {
    .star{
        margin:0;
    }
    .map-wrap.size9{
        transform:scale(0.6);
    }
    .map-wrap.size13{
        transform:scale(0.8);
    }
}

.map-wrap.size13 .pebble{
   width:6.2%;
    height:6.2%;
    margin-left:-3.1%;
    margin-top:-3.1%;
    border-radius: 100px;
}
.map-wrap.size19{
    transform:scale(1);
}
.ishi{
    pointer-events: none;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
}
.ishi.active{
    pointer-events: auto;
}
.pebble{
    width: 4.25%;
    height: 4.25%;
    border-radius: 30px;
    display: block;
    position: absolute;
    top: 14px;
    left: 15px;
    margin-left: -2.125%;
    margin-top: -2.125%;
    pointer-events:auto;
}
.pebble.white{
    background:white;
    background-image: -webkit-radial-gradient(center, #FFFFFF, #e3e3e3); /* Chrome 10-25, iOS 5+, Safari 5.1+ */


}
.pebble.black{
    background:black;
    background-image: -webkit-radial-gradient(center, #292929, #000000); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
}
.star{
    width:6px!important;
    height:6px!important;
    border-radius:60px!important;
    position: absolute !important;
    background:rgba(0,0,0,1);
    margin:0;
}



.star:nth-child(1) {
  left: 16%;
  top: 16%; }

.star:nth-child(2) {
  left: 16.1%;
  top: 82.7%; 
  }

.star:nth-child(3) {
  left: 82.7%; 
  top: 16%; }

.star:nth-child(4) {
  left: 82.7%;
  top: 82.7%; }

.star:nth-child(5) {
  left: 49.5%;
  top: 49.5%;
  }

.star:nth-child(6) {
  left: 49.5%;
  top: 16%; }

.star:nth-child(7) {
  left: 49.5%;
  top: 82.7%; }

.star:nth-child(8) {
  left: 16%;
  top: 49.5%; }

.star:nth-child(9) {
  left: 82.7%;
  top: 49.5%; }

.size13 .star:nth-child(1) {
  left: 24.5%;
  top: 24.5%; }

.size13 .star:nth-child(2) {
  left: 24.5%;
  top: 74.5%; }

.size13 .star:nth-child(3) {
  left: 74.5%;
  top: 24.5%; }

.size13 .star:nth-child(4) {
  left: 74.5%;
  top: 74.5%; }