a {
  text-decoration: underline;
}

.body {
  background-color: #000;
  flex-direction: column;
  justify-content: center;
  font-family: Poppins, sans-serif;
  font-size: 18px;
  line-height: 1.5em;
  display: flex;
}

.why-clojure-container {
  flex-direction: column;
  align-items: stretch;
}

.header {
  height: 75px;
  background-color: #f04b5c;
  padding-left: 75px;
  position: relative;
  overflow: visible;
}

.image {
  position: absolute;
  top: 0%;
  bottom: auto;
  left: auto;
  right: 0%;
}

.why-clojure-logo {
  margin-top: 17px;
  margin-bottom: 10px;
}

.coming-soon {
  background-color: #f5b051;
  padding: 10px 115px;
}

.overview {
  background-color: #e5d0b1;
  padding: 30px 115px;
  position: relative;
}

.image-2 {
  position: absolute;
  top: auto;
  bottom: 0%;
  left: 0%;
  right: auto;
}

.contact {
  color: #e5d0b1;
  background-color: #d6575e;
  padding: 30px 115px;
}

.contact-cta {
  text-align: center;
}

.assoc {
  background-color: #e5b061;
  padding: 20px 75px;
}

.members {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  display: flex;
}

.members-intro {
  order: -1;
  align-self: center;
}

.social {
  color: #e5d0b1;
  background-color: #152330;
  justify-content: center;
  padding: 20px 75px;
  font-size: 14px;
  display: flex;
}

.social-intro {
  order: -1;
  align-self: center;
}

.socials {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: flex-start;
  display: flex;
}

.facebook, .twitter, .linkedin {
  align-self: center;
}

.flexiana {
  background-color: rgba(0, 0, 0, 0);
  align-self: center;
}

.juxt, .metosin, .thortech-solutions {
  align-self: center;
}

.contact-link {
  color: #e5d0b1;
}

@media screen and (max-width: 991px) {
  .header {
    padding-left: 50px;
  }

  .coming-soon, .overview, .contact {
    padding-left: 80px;
    padding-right: 80px;
  }

  .assoc {
    padding-left: 50px;
    padding-right: 50px;
    font-size: 14px;
    line-height: 1.3em;
  }
}

@media screen and (max-width: 767px) {
  .members {
    flex-direction: column;
  }
}

@media screen and (max-width: 479px) {
  .header {
    padding-left: 10px;
  }

  .image {
    display: none;
  }

  .coming-soon {
    padding-left: 20px;
    padding-right: 20px;
  }

  .overview {
    padding-left: 20px;
    padding-right: 40px;
  }

  .image-2 {
    display: none;
  }

  .contact {
    padding-left: 20px;
    padding-right: 60px;
  }

  .assoc, .social {
    padding-left: 20px;
    padding-right: 20px;
  }

  .social-intro {
    font-size: 12px;
    line-height: 1.3em;
  }
}


