#map-container{
 height: 500px;
 width: 380px;
 float: left;
 margin-bottom: 20px;
}

#map-container.drivePage {
  width: 470px;
}

#menu{
 height: 350px;
 width: 210px;
 float: left;
 margin-left: 20px;
 font-size: 11px;
}

#menu h5 {
  color: #0064B8;
  font-size: 14px;
  font-weight: normal;
  margin: 0 0 5px;
}

#menu ul {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}

#map img { max-width: none; }

#map, #map {
  height: 100%;
}

@media print {
  html, body {
    height: auto;
  }
}

#menu > div > h5{
    color: #0064AF;
}

.menuItems > li label > img,input{
    vertical-align: middle;
}

.menuItems > li label > span{
    vertical-align: bottom;
}

#facItems, #filterItems{
    margin: 0;
    width: 210px;
}


/* THIS IS FOR THE POP UP WINDOWS */
#facilityThumbnail{
    width: 100px;
}

#facName{
    color:#9259A4;
}
#facilityDetails > div{
    display: inline-block
}

.featName{
    color:#0067ac;
}

#detail{
    vertical-align: top;
    padding-left: 10px;
}

/*small window */
.smallWin{
    width: 143px;
    line-height: 15px;

}

.smallWin .mapLink{
 font-size: x-small;
}

.smallWin #facAddress{
 font-size: x-small;
}

.smallWin > #facName{
    font-size: x-small;
    font-weight: 900;

}

.smallWin > .featName{
    font-size: x-small;
    font-weight: 900;
}

.smallWin > .featVal{
    font-size: x-small;
}

.smallWin > #facNote{
    font-size: x-small;
}

/* normal Window */
.normalWin{
    width: 190px;
    line-height: 18px;

}

.normalWin .mapLink{
 font-size: small;
}

.normalWin #facAddress{
 font-size: small;
}

.normalWin > #facName{
    font-size: small;
    font-weight: 900;
}

.normalWin > .featName{
    font-size: small;
    font-weight: 800;
}

.normalWin > .featVal{
    font-size: small;
}

.normalWin > .featName{
    font-size: small;
    font-weight: 800;
}

/* big win */
.bigWin > #facNote{
    font-size: small;
    line-height: 20px;

}

/* big Window */
.bigWin{
    width: 270px;
}

.bigWin .mapLink{
 font-size: small;
}

.bigWin #facAddress{
 font-size: small;
}

.bigWin > #facName{
    font-size: small;
    font-weight: 900;
}

.bigWin > .featName{
    font-size: small;
    font-weight: 800;
}

.bigWin > .featVal{
    font-size: small;
}

.bigWin > .featName{
    font-size: small;
    font-weight: 800;
}

    @-moz-keyframes pulsate {
		from {
			-moz-transform: scale(0.25);
			opacity: 1.0;
		}
		95% {
			-moz-transform: scale(1.3);
			opacity: 0;
		}
		to {
			-moz-transform: scale(0.3);
			opacity: 0;
		}
	}
	@-webkit-keyframes pulsate {
		from {
			-webkit-transform: scale(0.25);
			opacity: 1.0;
		}
		95% {
			-webkit-transform: scale(1.3);
			opacity: 0;
		}
		to {
			-webkit-transform: scale(0.3);
			opacity: 0;
		}
	}
	/* get the container that's just outside the marker image, 
		which just happens to have our Marker title in it */
	#map div.gmnoprint[title="I might be here"] {
		-moz-animation: pulsate 1.5s ease-in-out infinite;
		-webkit-animation: pulsate 1.5s ease-in-out infinite;
		border:1pt solid #fff;
		/* make a circle */
		-moz-border-radius:51px;
		-webkit-border-radius:51px;
		border-radius:51px;
		/* multiply the shadows, inside and outside the circle */
		-moz-box-shadow:inset 0 0 5px #06f, inset 0 0 5px #06f, inset 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f;
		-webkit-box-shadow:inset 0 0 5px #06f, inset 0 0 5px #06f, inset 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f;
		box-shadow:inset 0 0 5px #06f, inset 0 0 5px #06f, inset 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f;
		/* set the ring's new dimension and re-center it */
		height:51px!important;
		margin:-18px 0 0 -18px;
		width:51px!important;
	}
	/* hide the superfluous marker image since it would expand and shrink with its containing element */
/*	#map_canvas div[style*="987654"][title] img {*/
	#map div.gmnoprint[title="I might be here"] img {
		display:none;
	}
	/* compensate for iPhone and Android devices with high DPI, add iPad media query */
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (device-width: 768px) {
		#map div.gmnoprint[title="I might be here"] {
			margin:-10px 0 0 -10px;
		}
	}
	

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

  #map-container{
   width: 300px;
  }

  #map-container.drivePage {
    width: 370px;
  }  

}


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

  #map-container.drivePage {
    width: 100%;
  }

  #menu.drivePage {
    margin-left: 0;
    display: flex;    
  }

}

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

  #map-container{
   width: 250px;
  }

}

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

  #map-container, #map-container.drivePage {
   width: 100%;
  }

  #menu {
  	margin-left: 0;
  	display: flex;
  }

}