body {
  display: flex;
  padding: 20px;
}

.container {
  display: flex;
  width: 100%;
  flex-direction: column;
  font-family: 'Arial', 'Verdana', Helvetica san-serif;
  margin-top: 30px;
}

.header-nav-bar-container {
  display: flex;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
}

.header {
  width: 50%;
  font-size: 40px;
  position: relative;
  right: 10px;
}

.nav-bar {
  width: 30%;
}

.links .link a.first-link {
  padding-left: 0px;
}

.links .link a.last-link {
  padding: 0 0 0 6px;
}

.links {
  display: flex;
  list-style-type: none;
  font-size: 12px;
  color: rgba(32, 79, 144, 1);
  padding-left: 0;
}

.link a {
  text-decoration: none;
  padding: 10px;
  color: rgba(32, 79, 144, 1);
}

.link a:hover {
  color: grey;
}

.email a{
  color: rgba(32, 79, 144, 1);
  text-decoration: none;
}

.email a:hover{
  color: grey;
}

.main-page-banner {
  display: flex;
  justify-content: center;
  margin: 40px 0;
}

.slider {
  width: 50%;
  background-color: rgb(248, 112, 96);
}

.copy {
  width: 30%;
  margin-left: 10px;
  padding: 20px;
}

.copy-header {
  font-size: 20px;
  margin: 0px 0 20px 0;
}

.copy-content {
  font-size: 16px;
  line-height: 1.5;
}

.main {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px;
  min-height: 600px;
}

.content {
  width: 50%;s
  margin: 10px;
}

.large-image {
  height: 248px;
  background-color: rgba(32, 79, 144, 1);
  margin: 0 20px;
}

.content-header {
  font-size: 20px;
  margin: 20px 20px 0 20px;
  border-bottom: 1px dotted rgba(205, 215, 214, 1)
}

.floated-image-row {
  display: flex;
  flex-direction: row;
  padding: 20px;
}

.main-image {
  padding-left: 20px;
  max-width: 100%;
  height: auto;
}

.main-image-wrapper {
  padding: 0 40px 0 0;
  margin-top: 10px;
}

.service-photos {
  display: flex;
  justify-content: space-evenly;
}

.image {
  height: 184px;
  width: auto;
}
.content-content {
  font-size: 12px;
  padding: 20px;
  line-height: 1.5;
}

.content-right-of-image {
  width: 60%;
  padding: 0px 20px 0 20px;

}

.subdivided-row {
  display: flex;
  flex-direction: row;
}

.sub-header {
  margin: 0 0 10px 0;
  font-size: 14px;
  font-weight:bold;
  clear: both;
}

.headshot {
  height: 100px;
  margin: 0 20px 20px 0;
  float: left;
}

.sub-content {
  margin-bottom: 10px;
}

.tag-line {
  font-size: 20px;
  color: rgb(248, 112, 96);
  margin: 20px 0;
  text-align: center;
  padding: 20px;
  font-family: 'Trebuchet MS', 'Arial', Helvetica, san-serif;
}

.form {
  width: 100%;
  margin-top: 20px;
  padding: 10px 10px 30px 10px;
  border-radius: 4px;
  background-color: rgba(32, 79, 144, .21);
}

.form-name-fields {
  display: flex;
  flex-direction: row;
  justify-content: space-between
}

.first {
  margin-right: 4px;
}

.name {
  width: 50%;
}

form input {
  width:100%;
}

.flex-input {
  display: flex;
}

.submit {
  width: auto;
  float: right;
}

form textarea {
  width: 100%;
  height:200px;
}

.form-label {
  margin-top: 10px;
}

.contact-side-bar {
  width: 30%;
  margin: 10px;
  padding: 20px;
  background-color: rgba(10, 10, 10, .10);
  border-radius: 4px;
}

.contact-info {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: rgba(32, 79, 144, 1);
}

.contact-us-header {
  font-size: 20px;
  padding: 10px 0 0 0;
  margin-bottom: 10px;
  border-bottom: 1px dotted rgba(205, 215, 214, 1)
}

.contact-row {
  padding: 6px 0;
  border-bottom: 1px dotted rgba(205, 215, 214, 1)
}

.bold {
  font-weight: bold;
}


.map {
  height: 300px;
  margin: 40px auto;
  border: 1px solid white;
}

.map-wrap {
  display: flex;
  justify-content: center;
}

.footer {
  display: flex;
  justify-content: center;
  color: grey;
  flex-wrap: wrap;
}

.footer-title {
  width: 50%;
}

.footer-name {
  padding: 0 10px;
}

.footer-nav-bar {
  width: 30%;
  padding-left: 40px;
}

.footer .links {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0;
  justify-content: flex-end;
}

.footer .link a {
  text-decoration: none;
  padding: 0 6px;
  border-right: 1px solid grey;
  font-size: 10px;
  color: grey;
}

.footer .link.no-right-border a{
  border: none;
  padding-right: 0px;
}

@media all and (max-width: 1000px) {
  .header-nav-bar-container {
    display: block;
    text-align:center;
  }

  .header {
    width: 100%;
    position: initial;
    font-size: 30px;
  }

  .nav-bar {
    width: 100%;
  }
  
  .image {
    height: 148px;
  }
  
  .links {
    justify-content: center;
  }

  .main-page-banner {
    display: none;
  }
  
  .map {
    height: 200px;
  }
}

@media all and (max-width: 848px) {

  .footer {
    justify-content: space-between;
  }
  
  .footer-title {
    width: 40%;
    margin-right: 10px;
  }
  
  .footer-nav-bar {
    width: 40%;
    margin: 0 10px 0 0;
  }

  .content {
    width: 100%;
  }

  .contact-side-bar {
    display: flex;
    width: 100%;
  }

  .map {
    margin: initial;
  }

  .contact-side-bar {
    justify-content: space-between;

  }

  .main {
    margin-top: 20px;
  }
}

@media all and (max-width: 640px) {

  .footer-title {
    position: initial;
    width: 100%;
    text-align: center;
  }

  .footer-nav-bar {
    width:100%;
    padding: 0;
  }

  .footer .links {
    justify-content: center;
  }
  
  .image-wrapper {
    float: left;
    margin-right: 20px;
  }
  
  .content-right-of-image {
    width: 100%;
    padding: 0 20px 0 0;
  }
  
  .floated-image-row {
    display: block;
  }
  
  .contact-side-bar {
    display: initial;
  }

  .headshot {
    height: 70px;
  }
  
  .map {
    margin: 40px auto 0px auto;
    height: 300px
  }

  .contact-info {
    width: 300px;
    margin: 0 auto;
  }
}

@media all and (max-width: 510px) {

  .subdivided-row {
    display: initial;
  }

  .header {
    font-size: 21px;
  }
  
  .image {
    height: 100px;
    margin-bottom: 20px;
  }
  
  .content-right-of-image {
    width: 100%;
  }

  .form {
    width: initial;
  }
}