* {
  margin: 0;
  padding: 0;
  font-size: 15px;
  font-weight: 400;
}

body {
  font-family: 'Fira Mono', sans-serif;

}

h2 {
  font-family: 'Fira Sans';
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 50px;
}

a {
  text-decoration: none;
  color: black;
}

p {
  line-height: 1.5;
}

.name {
  z-index: 100;
  position: fixed;
  margin: 20px 50px;
  top: 0;
  font-family: 'Fira Sans';
  font-weight: 700;
  font-size: 24px;
}
@media (max-width: 580px){
  .name {
    margin-left: 30px;
  }
}

.menubar {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  height: 30px;
  margin: 300px 0 0 -195px;
  position: fixed;
}

.punkt {
  font-family: 'Fira Sans';
  font-weight: 700;
  font-size: 24px;
  margin: 0 20px;
}

.menu {
  display: inline-block;
  cursor: pointer;
  color: black;
  float: left;
}

.menupunkt {
  color: black;
  text-decoration: none;
  line-height: 20px;
  font-family: 'Fira Sans';
  font-size: 24px;
  font-weight: 700;
}

.menupunkt:hover {
  border-width: 2px;
  color: blue;
}

.project-gallery {
  max-width: 1020px;
  padding-left: 100px;
  margin: 100px auto;
}
@media (max-width: 1120px){
  .project-gallery {
    max-width: 680px;
  }
}
@media (max-width: 780px){
  .project-gallery {
    padding-left: 50px;
    padding-right: 50px;
  }
}
@media (max-width: 580px){
  .project-gallery {
    margin: 20px auto;
  }
}

.gallery-small {
  float: left;
  position: relative;
  max-width: 240px;
}
@media (max-width: 580px){
  .gallery-small {
    width: 100%;
    max-width: none;
  }
}

.gallery-big {
  float: left;
  position: relative;
  max-width: 580px;
}
@media (max-width: 580px){
  .gallery-big {
    width: 100%;
  }
}

.margin-general {
  margin: 80px 100px 0 0;
}
@media (max-width: 580px){
  .margin-general {
    margin-right: 0;
  }
}

.margin-top {
  margin-top: 420px;
}
@media (max-width: 1120px){
  .margin-top {
    margin-top: 80px;
  }
}

.margin-left1 {
  margin-left: 340px;
}
@media (max-width: 1120px) {
  .margin-left1.gallery-big {
    margin-left: 0;
    }
}
@media (max-width: 580px) {
  .margin-left1 {
    margin-left: 0;
  }
}

.margin-left2 {
  margin-left: 680px;
}
@media (max-width: 1120px) {
  .margin-left2 {
    margin-left: 340px;
    }
}
@media (max-width: 580px) {
  .margin-left2 {
    margin-left: 0;
    }
}

.clear {
  clear: both;
}

.projekt1 {
  position: absolute;
  left: -100%;
  right: -100%;
  top: -100%;
  bottom: -100%;
  margin: auto;
  max-height: 100%;
}

.projekt2 {
  position: absolute;
  left: -100%;
  right: -100%;
  top: -100%;
  bottom: -100%;
  margin: auto;
  max-width: 100%;
}

.text-gallery {
  font-family: 'Fira Sans';
  font-size: 24px;
  font-weight: 700;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding-top: 100px;
  margin-top: 27px;
  -webkit-transition: box-shadow .3s ease-in-out;
  transition: box-shadow .3s ease-in-out, opacity 0.3s;
  opacity: 0;
}

.text-gallery:hover {
  box-shadow: rgba(150, 150, 150, 0.2) 0 2px 2px,
              rgba(150, 150, 150, 0.2) 0 4px 4px,
              rgba(150, 150, 150, 0.2) 0 8px 8px,
              rgba(150, 150, 150, 0.2) 0 16px 16px,
              rgba(150, 150, 150, 0.2) 0 32px 32px,
              rgba(150, 150, 150, 0.2) 0 64px 64px;
  visibility: visible;
  opacity: 1;
}

.gallery-title {
  text-align: center;
  margin-bottom: 5px;
}

.image-small {
  width: 240px;
  height: 240px;
  overflow: hidden;
  position: relative;
}
@media (max-width: 580px){
  .image-small {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
  }
}

.image-big {
  width: 580px;
  height: 580px;
  overflow: hidden;
  position: relative;
}
@media (max-width: 580px){
  .image-big {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
  }
}

.project-link {
  display: block;
  height: 100%;
  width: 100%;
}

.contact {
  padding-top: 150px;
  padding-bottom: 80px;
  clear: both;
  text-align: center;
}

.socialmediaicons {
  margin: 20px 30px;
}