body {
  background: rgba(176,23,23,0);
  color: rgb(255,255,255);
  opacity: 1;
}

@media (min-width: 992px) {
  #start {
    background: url("../../assets/img/Homepage%20groot.jpg") center / cover no-repeat !important;
  }
}

a.text-warning:focus, a.text-warning:hover {
  color: #ba009c!important;
}

@media (min-width: 768px) {
  #contact {
    background: url("../../assets/img/hoofd%20groot.jpg") center / cover no-repeat !important;
  }
}

.container.over-ons {
  /*margin-left: 22px;*/
  /*text-align: center;*/
  /*padding-top: 200px;*/
}

@media (min-width: 768px) {
  #over-ons {
    background: url("../../assets/img/tentakels%20groot%202.jpg") center / cover no-repeat !important;
    padding-top: 158px;
  }
}

@media (min-width: 576px) {
  #over-ons-tekst {
    margin-top: 0px;
    padding-top: 240px;
    max-width: 500px !important;
  }
}

@media (min-width: 300px) {
  #over-ons-tekst {
    max-width: 250px;
    font-size: 16px !important;
  }
}

#over-ons-tekst {
  margin-top: 0px;
  padding-top: 150px;
  margin-left: 20px;
  overflow-y: scroll;
}

@media (min-width: 768px) {
  #navcol-1 {
    background-color: rgba(214,19,54,0) !important;
  }
}

#navcol-1 {
  background-color: #1a1a1c;
}

.navbar-dark .navbar-nav .nav-link {
  color: rgb(255,255,255);
}

.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
  color: var(--cyan);
}

@media (min-width: 768px) {
  #mobiel {
    background: url("../../assets/img/hoofd%20groot.jpg") center / cover no-repeat !important;
  }
}

@media (min-width: 768px) {
  #mobieltekst {
    font-size: 24px;
  }
}

@media (min-width: 768px) {
  .mobieltekst {
    text-align: center;
    font-size: 28px;
  }
}

#icon {
  color: white;
}

@media (min-width: 768px) {
  #icon {
    font-size: 50px;
  }
}

@media (min-width: 576px) {
  #iconen {
    transform: scale(1.50);
  }
}

@media (min-width: 768px) {
  .social-icons {
    color: #313437;
    background-color: #fff;
    text-align: center;
  }
}

.social-icons {
  color: #313437;
  background-color: #fff;
  text-align: center;
}

@media (min-width: 768px) {
  #spacer-iconen {
    margin-top: 279px !important;
    height: 150px;
  }
}

@media (min-width: 576px) {
  #spacer-iconen {
    margin-top: 160px;
    height: 200px;
  }
}

@media (min-width: 300px) {
  #spacer-iconen {
    margin-top: 120px;
    height: 150px;
  }
}

@media (min-width: 576px) {
  .btw {
    text-align: center;
    font-size: 18px !important;
  }
}

#bottom-btw {
  position: fixed;
  bottom: 100px;
}

#project2 .jumbotron.jumbotron-fluid {
  background: url("../../assets/img/Afrika-Museum-groot.jpg") center / cover no-repeat;
  font-family: Quicksand, sans-serif;
  /*height: 27vh!important;*/
  border-radius: 30px;
}

#project1 .jumbotron.jumbotron-fluid {
  background: url("../../assets/img/turned-groot.jpg") center / cover no-repeat;
  font-family: Quicksand, sans-serif;
  height: 80vh !important;
  border-radius: 30px;
}

@media (min-width: 300px) {
  #project2 .jumbotron.jumbotron-fluid {
    background: url("../../assets/img/Afrika-Museum-groot.jpg") center /cover no-repeat;
    font-family: Quicksand, sans-serif;
    height: 47vh !important;
    border-radius: 30px;
    margin: auto !important;
  }
}

@media (min-width: 300px) {
  #project1 .jumbotron.jumbotron-fluid {
    background: url("../../assets/img/turned-groot.jpg") center /cover no-repeat;
    font-family: Quicksand, sans-serif;
    height: 47vh !important;
    border-radius: 30px;
    margin: auto !important;
  }
}

@media (min-width: 768px) {
  #heading {
    padding-left: 12px;
    margin-top: 249px !important;
  }
}

@media (min-width: 576px) {
  #heading {
    padding-left: 24px;
    margin-top: 259px;
    font-size: 24px!important;
  }
}

@media (min-width: 300px) {
  #heading {
    padding-left: 12px;
    margin-top: 200px;
    font-size: 18px;
  }
}

#heading {
  padding-left: 12px;
  margin-top: 150px;
  font-size: 18px;
}

@media (min-width: 576px) {
  #teskt1 {
    margin-top: 18px!important;
  }
}

#teskt1 {
  margin-top: -17px;
}

@media (min-width: 768px) {
  #project2 {
    margin-top: 150px!important;
  }
}

@media (min-width: 300px) {
  #project1, #project2 {
    margin-top: 40px;
  }
}

#footer-4 {
  position: absolute;
  bottom: 0;
  padding-bottom: 10px;
}

#footer-3 {
  /*position: absolute;*/
  bottom: 0;
  padding-bottom: 4px;
}

#opdracht-container {
  position: relative;
}