.wrap-content, .header-content, .nav-content, .main-content, .footer-content {
  width:     75vw;
  margin:    0px auto;
  padding:   0rem;
  max-width: 1000px;
}

.wrap-content {
  display:         flex;
  flex-direction:  row;
  justify-content: space-between;
}

.header-content {
  display:         flex;
  flex-direction:  row;
  justify-content: space-between;
}

.nav-content {
  display:         flex;
  flex-direction:  row;
  justify-content: flex-start;
  flex-wrap:       wrap;
  padding:         0 2rem;
}

.nav-button {
  flex-grow:  1;
}

.active-button-red {
  background-color: #A72A32;
}

.active-button-black {
  background-color: #212529;
}

.footer-content{
  display:         flex;
  flex-direction:  row;
  justify-content: flex-start;
  flex-wrap:       wrap;
}

.footer-box a {
  display: block;
}

.section-container {
  width:          100vw;
  min-height:     100vh;
  position:       relative;
  padding-bottom: 10rem; /* Equals height of the footer and pushes away the content in the case they would touch.*/ 
}

.footer {
  position: absolute;
  bottom:   0;
  left:     0;
  width:    100vw;
}

.main-content {
  padding-bottom: 25rem;
}

.footer-content {
  margin-top: 2rem;
}

/* Login-page stuff. */

.login-textbox {
  text-align: left;
  margin:     0 auto;
}

.login-label {
  margin-bottom: .5rem;
}

.login-info {
  border:        1px solid black;
  border-radius: 5px;
  line-height:   1.4rem;
  margin-bottom: 1rem;
  width:         10.5rem;
}

.login-form .login-info, .login-label, .login-button {
  display: block;
}

.login-button {
  color:            white;
  background-color: #A72A32;
  font-family:        "Roboto", sans-serif;
  font-size:          .9rem;
  border:             1px solid #A72A32;
  border-radius:      5px;
  line-height:        1.4rem;
  position:           relative;
  top:                1px;
  width:              10.5rem;
}

.media-box {
  display:flex;
  flex-direction: row;
}

.group-overview {
  display: flex;
  flex-direction: row;
}

.text-box .name-card {
  margin: 1rem auto;
  max-width: 30rem;
}

.social-box, .banner-box {
  margin: 2rem auto;
}

.social-logos {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}  

@media (max-width: 800px){
  /*.main-content {
      padding-bottom: 50rem;
  }
  
  .footer-content {
      display:        flex;
      flex-direction: column;
  }
  .footer-box{
      padding: .25rem 0 .25rem;
  }*/
  .wrap-content, .header-content, .nav-content, .main-content, .footer-content {
      width: 100%;
  } 
}

@media (max-width: 1300px) {
  .main-content {
    padding-bottom: 50rem;
  }

  .footer-content {
    display:        flex;
    flex-direction: column;
  }
  .footer-box{
    padding: .25rem 0 .25rem;
  }
}

@media (max-width: 1080px) {
  .nav-content{
    display:        flex;
    flex-direction: column;
    padding:        0;
    width:          100%;
    max-width:      none;
  }
}

@media (max-width: 936px) {
  .logo-box {
      display:        flex;
      flex-direction: column;
  }
  .group-overview {
    display: flex;
    flex-direction: column;
  }
}

@media (max-width: 475px) {
  .wrap-content {
      flex-direction: column;
  }
  .header-content {
      flex-direction: column;
  }
  .headlines {
    padding-top: 1rem;
  }
  .address-box {
    padding-bottom: 1rem;
  }
}