body {
  /* Background */
  background-color: #FFFFFF;
  /* Typography */
  font-family: acme-gothic, sans-serif;
	font-weight: 400;
	font-style: normal;
  font-size: 16px;
  color: #ECDDDD;
  max-width: 1300px;
  margin: auto;
}

.title {
  position: relative;
  width: 100%;
  top: 200px;
  : 100px 0 0 0;
}

h1 {
  color: #013938;
  font-size: 2.25em;
  line-height: 1.2;
}

a {
  color: #ECDDDD;
  text-decoration: none;
}

/* ––––––– PROJECT ––––––– */

* {
  box-sizing: border-box;
}


.headline {
  height: auto;
  text-align: center;
  padding: 60px 0 0 0;
}

.row {
  display: -ms-flexbox; /* IE 10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE 10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create two equal columns that sits next to each other */
.column {
  -ms-flex: 50%; /* IE 10 */
  flex: 50%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
}

/* Style the buttons */
.btn {
  font-family: acme-gothic, sans-serif;
  border: none;
  border-radius: 25px;
  outline: none;
  padding: 12px 20px 14px 20px;
  background-color: #f1f1f1;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
}

.btn:hover {
  background-color: #ddd;
}

.btn.active {
  background-color: #013938;
  color: white;
}


/* ––––––– TOP NAVIGATION ––––––– */

header {
  width: 100%;
  max-width: 1300px;
  padding: 37px 45px 45px 45px;
  position: fixed;
  z-index: 1;
  overflow: hidden;
}


/* Logo */
header a img {
 width: 70px;
 float: left;
 margin-right: 45px;
}

aside.socialmedia {
 position: absolute;
 right: 50px;
 top: 40px;
 height: 25px;
 z-index: 2;
 width: 120px;
}

aside.socialmedia a img {
 height: 25px;
 width: 40px;
 margin: 0 0 0 0;
 padding-left: 15px;
}


.text {
  font-size: 16px;
  position: relative;
  width: 70%;
  top: 100px;
  padding: 10px 0 20px 0;
}

.buttontext {
  font-size: 12px;
  color: #013938;
}

/* ––––––– FURTHER PROJECTS –––––––

.furtherprojects {
  height: 450px;
  padding: 25px;

}

.project01 img, .project02 img, .project03 img {
  width: 50%;
  float: left;
  padding: 20px;
}

.container {
  position: relative;
  width: 100%;
}

*/

.nextproject {
  position: relative;
  height: 60px;
  margin: 40px 0 40px 0;
}

.button {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 150px;
  background-color: #013938;
  padding: 10px 18px 12px 18px;
  border-radius: 25px;
  color: white;
}

.button:hover {
  background-color: #d8aa00;
  transition: 0.5s ease;
}




/* ––––––– FOOTER ––––––– */


footer {
  height: 20px;
  width: 90%;
  position: sticky;
  bottom: 40px;
  padding: 20px 0 0 45px;
}

footer p {
  font-size: 10px;
}

footer a {
  margin: 0 0 0 50px;
}

footer a:hover {
  color: #d8aa00;
  transition: 0.3s ease;
}





@media only screen and (max-width: 940px) {

  header {
    width: 80%;
    padding-right: 45px;
  }

  footer {
    position: fixed;
    max-width: 880px;
  }

  aside.socialmedia {
    right: 0;
    height: 25px;
    position: fixed;
    top: 40px;
    z-index: 2;
    width: 120px;
    margin-right: 50px;
  }



}


@media only screen and (max-width: 768px) {


}


@media only screen and (max-width: 600px) {
  header {
    padding: 15px 40px 0 45px;
  }

  header a img {
    margin-top: 22px;
    margin-left: ;
  }

  .text {
    font-size: 16px;
    line-height: 22px;
    top: 110px;
  }

}

@media only screen and (max-width: 520px) {

  .text {
    top: 140px;
  }

}


@media only screen and (max-width: 425px) {
  header {
    padding: 0px 20px 0 20px;
  }

  aside.socialmedia {
    top: 25px;
    right: -25px;
  }

  header a img {
    margin-top: 25px;
  }

  footer {
    padding: 20px 0 0 20px;
  }

  .text {
    top: 170px;
  }

}

@media only screen and (max-width: 375px) {


}