.task-1.container {
  display: grid;
  height: 100vh;
  grid-template-rows: auto 1fr auto;
}

#pac-input {
  background-color: #fff;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  margin-top: 12px;
  margin-left: 12px;
  margin-right: 12px;
  padding: 0 11px 0 13px;
  text-overflow: ellipsis;
  width: 20%;
}

#pac-input:focus {
  border-color: #4d90fe;
}

.search-form .form-group {
  float: right !important;
  transition: all 0.35s, border-radius 0s;
  width: 32px;
  height: 32px;
  background-color: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  border-radius: 25px;
  border: 1px solid #ccc;
}
.search-form .form-group input.form-control {
  padding-right: 20px;
  border: 0 none;
  background: transparent;
  box-shadow: none;
  display:block;
}
.search-form .form-group input.form-control::-webkit-input-placeholder {
  display: none;
}
.search-form .form-group input.form-control:-moz-placeholder {
  /* Firefox 18- */
  display: none;
}
.search-form .form-group input.form-control::-moz-placeholder {
  /* Firefox 19+ */
  display: none;
}
.search-form .form-group input.form-control:-ms-input-placeholder {
  display: none;
}
.search-form .form-group:hover,
.search-form .form-group.hover {
  width: 100%;
  border-radius: 4px 25px 25px 4px;
}
.search-form .form-group span.form-control-feedback {
  position: absolute;
  top: -1px;
  right: -2px;
  z-index: 2;
  display: block;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  color: #3596e0;
  left: initial;
  font-size: 14px;
}

#map {
	width: 100%;
	height: 100%;
}
/* GRID STYLES */
.header {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 4;
    align-items: center;
    background-color: #f0f8ff;
}


.main-nav {
    grid-column: 3;
}

.hamburger {
    /*grid-column: 4;*/
    grid-column: 2;
    justify-self: end;
}

.main-nav ul {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 1;
    justify-items: center;
}

.fa-bars {
    font-size: 1.4em;
}


.main-nav {
    display: none;
}
body {
  margin: 0;
  background-color: #e9ebee;
}

#navbar {
  display: grid;
  min-height: 100px;
  grid-auto-flow: column;
  background-color: #fcfcfc;
  grid-gap: 1.5em;
  padding: 0 40px;
  -webkit-box-shadow: -1px 4px 5px 0px rgba(209, 205, 209, 1);
  -moz-box-shadow: -1px 4px 5px 0px rgba(209, 205, 209, 1);
  box-shadow: -1px 4px 5px 0px rgba(209, 205, 209, 1);
}

.logo img {
    display: block;
    /*height: 10%;*/
}
.logo {
    /*grid-column: 2;*/
    grid-column: 4;
}
#logo {
  display: grid;
  justify-content: start;
  align-content: center;
  font-family: "Open Sans", sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #000;
  text-transform: uppercase;
}
.logo span {
  color: #0474bc;
}

.links span {
  color: #0474bc;
}
.links img {
    display: block;
    height: 10%;
}
.links {
    /*grid-column: 2;*/
    grid-column: 4;
}
#links {
  display: grid;
  justify-content: start;
  align-content: center;
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #000;
  text-transform: uppercase;
}


a {
  text-decoration: none;
  color: #333;
}

a:hover {
  color: #0474bc;
}

/* =======================
******* Mobile Menu ******
========================*/
.mobile-links li {
  line-height: 2.8rem;
}

.mobile-btn {
  display: grid;
  justify-content: left;
  align-content: center;
  /*grid-auto-flow: column;*/
  grid-column: 1;
  cursor: pointer;
}

.nav-list {
  font-family: "Open Sans", sans-serif;
  list-style-type: none;
}

.nav-list:hover {
  opacity: 0.5;
  cursor: pointer;
}

/* Larger Phone to Tablet */
@media (min-width: 120px) and (max-width: 418px) {
  .links{
	  display: none;
  },
  .mobile-menu {
  position: absolute;
    display: block;
    list-style-type: none;
    background-color: #fff;
    float: right;
    width: 20%;
    padding: 5px 0 50px 0;
    border: 1px solid #eee;
    z-index: 55;
  }
	#legend { display: none; float: left; background-color: white;  margin-bottom: 30px; margin-right: 120px; }
}

/* small Mobile to large phone */
@media (min-width: 419px) and (max-width: 1188px) {
  .links{
	  display: none;
  },
  .mobile-menu {
  position: absolute;
    display: block;
    list-style-type: none;
    background-color: #fff;
    float: right;
    width: 20%;
    padding: 5px 0 50px 0;
    border: 1px solid #eee;
    z-index: 55;
  }
	#legend { display: none; background-color: white;  margin-bottom: 10px; }
	.legend li { float: left; margin-left: 0px; }
}

/* Tablet to Desktop */
@media (min-width: 1189px) {
  .mobile-menu,
  .mobile-btn,
  .fa-bars { display: none; },
  .links {
	  position: absolute;
	  display: grid;
	  list-style-type: none;
	  background-color: #fff;
	  float: right;
	  width: 25%;
	  padding: 5px 10px 50px 10px;
	  border: 1px solid #eee;
	  z-index: 55;
  justify-content: right;
  align-content: center;
  grid-auto-flow: column;
  grid-gap: 1.5em;
  font-family: "Open Sans", sans-serif;
	}
  .naver {
	  padding: 20px;
  	}
	#legend { background-color: white; margin-bottom: 10px; margin-right: 10px; }
	.legend li { float: left; margin-right: 10px; }
  }

#google_translate_element { background-color: white; margin-top: 10px; justify: center; }
.google_translate_element { float: left; margin-right: 10px; }

/* basic positioning */
.legend { list-style: none; 
  font-family: "Open Sans", sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #000;
  background-color: #fff;
}
ul { padding: 5px; }
.legend span { border: 1px solid #ccc; float: left; width: 12px; height: 12px; margin: 2px; }
/*.legend span { float: left;  margin: 2px; }*/
/* your colors */
.legend .awesome { background-color: #3399ff; }
.legend .kindaawesome { background-color: #33cc33; }
.legend .notawesome { background-color: #FFA500; }
.fa-dumpster-fire { color: #3399ff; }
.fa-radiation { color: #33cc33; }
.fa-skull-crossbones { color: #FFA500; }