* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

html,
body {
  height: 100%;
  position: relative;
  background-color: #263238;
}

h1, h2, h3, h4, h5 {
  font-family: 'Space Mono', monospace;
  color: #ECEFF1;
}

p, input, form, a, li {
  font-family: 'Work Sans', sans-serif;
  color: #ECEFF1;
}

h1 {font-size: 2rem; margin-bottom: 1rem;}
h2 {font-size: 1.7rem; margin-bottom: 1rem;}
h3 {font-size: 1.5rem; font-style: italic; margin-bottom: 1rem;}
h4 {font-size: 1.3rem; margin-bottom: 1rem;}
h5 {font-size: 1.2rem; margin-bottom: 1rem;}

.map-wrapper, .content-wrapper, .add-div, .site-outline, .form-button, .form-input {
  border: solid #64FCDA 1px;
  border-radius: 5px;
  box-shadow: 0 0 30px #64FCDA;
  padding: 1rem;
}

.site-outline {
  border-radius: 14px;
  margin: 1rem;
}

#map {
  height: 100%;
}

.header {
  width: 100%;
  padding: 1rem;
}

.heading {
 text-align: center;
}

.main-wrapper {
  padding: 1rem;
}

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

.map-wrapper {
  width: 600px;
  height: 600px;
}

#directions-form {
  display: none;
}

.form {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
}

.form-input {
  text-align: center;
  color: #546E7A;
  font-size: 1.2rem;
  line-height: 1.5;
  margin: .5rem 0;
}

.footer-items {
  flex: 2 1 0;
  margin: auto;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
}

#google-directions-response {
  text-align: center;
  margin: .5rem 0;
}

#google-directions-error-response {
  color: #FF5252;
}

.footer-item {
  display: inline;
  font-size: 1rem;
  padding: 0 1rem 2rem 0;
}

@media (min-width: 290px) {
  .left {
    width: 100%;
    margin: 1rem auto;
  }

  .right {
    width: 100%;
    margin: 1rem auto;
  }

  .content-wrapper {
    width: 100%;
  }

  .map-wrapper {
    width: 100%;
  }
}

@media (min-width: 1024px) {
  .left, .right {
    width: 45%
  }

  .conent-wrapper {
    margin: auto;
  }
  .map-wrapper {
    margin: auto;
  }
}

/* @media (min-width: 600px) and (max-width: 768px) {
  .left {
    order: 2;
  }

  .middle {
    order: 1;
  }

  .right {
    order: 3;
  }
} */

/* @media (min-width: 600px) {} */

/* @media (min-width: 900px) and (max-width: 1199px) {} */

/* @media (min-width: 900px) {} */

/* @media (min-width: 1200px) and (max-width: 1799px) {} */

/* @media (min-width: 1200px) {} */

/* @media (min-width: 1800px) {} */