/*
maps.css contains media breakpoints to over write those in main.css and so maps.css must always load last
*/
.reference {position:relative; width:100%;  z-index:90; height:100%}
img.reference {position:relative; max-width:100%;  z-index:90;}
a.reference:link {color: white; text-decoration:none; }
a.reference:visited{color: white; text-decoration:none; }
a.reference:hover {color: white; text-decoration:none; }
a.tileLink{border-color:rgb(255,255,255);  border-style:none; border-width:none; }
#map-canvas{position:relative;  max-width:100%; }
.mapSection{position:relative;max-width:100%;max-height:100%;display:block;	z-index:90;}
#content {position:absolute;max-width:300px;z-index:99;float:right;right:2.23%;top:10%;padding:6px;background-color:#285398;color:#FFFFFF;font-size:60%;}

#comment{position:absolute;width:100%;height:auto;top:44%;font-size:2.5em;z-index:99;color:#000099;display:-webkit-box;display:-ms-flexbox;display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;}
#click  {position:absolute;width:100%;height:auto;top:0em;font-size:2.5em;z-index:99;color:#ff0000;display:-webkit-box;display:-ms-flexbox;display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;background-color:#FFFF00;}
/*
@media only screen and (max-width: 380px)  {}
@media only screen and (min-width: 381px)  {}
@media only screen and (min-width: 601px)  {}
@media only screen and (min-width: 790px)  {}
@media only screen and (min-width: 1187px) {}
*/
@media only screen and (max-width:1187px) {#comment, #click {font-size:2em;}}
@media only screen and (max-width:799px) {#comment, #click {font-size:1.5em;}}
@media only screen and (max-width:600px) {#comment, #click {font-size:0.8em;}}