@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Work Sans'), local('WorkSans-Regular'),
       url('../assets/fonts/work-sans-v5-latin-regular.woff2') format('woff2'),
       url('../assets/fonts/work-sans-v5-latin-regular.woff') format('woff');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Work Sans Bold'), local('WorkSans-Bold'),
       url('../assets/fonts/work-sans-v5-latin-700.woff2') format('woff2'),
       url('../assets/fonts/work-sans-v5-latin-700.woff') format('woff');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 900;
  src: local('Work Sans Black'), local('WorkSans-Black'),
       url('../assets/fonts/work-sans-v5-latin-900.woff2') format('woff2'),
       url('../assets/fonts/work-sans-v5-latin-900.woff') format('woff');
}
@font-face {
    font-family: 'Monum Reg';
    font-style: normal;
    font-weight: 400;
    src: url('../assets/fonts/monumentextended-regular-webfont.woff2') format('woff2'),
         url('../assets/fonts/monumentextended-regular-webfont.woff') format('woff');    
}
body {
  background: #121212;
  color: #fff;
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
}
body.body-photo {
  padding: 0;
}
h1, h2, h3 {
  font-family: 'Work Sans', sans-serif;
  font-weight: 700;
  font-size: 1.6em;
  margin-top: 0; 
}
p {
  line-height: 1.5;
}
a {
  color: #fff;
  text-decoration: none;
}
a:hover, a:focus, a:active {
  color: #fff;
  text-decoration: line-through;
  font-style: italic;
}
a.logo-link {
  font-family: 'Monum Reg', sans-serif;
}
a.btn-white {
  display: inline-block;
  padding: 1rem 1.2rem;
  background: #fff;
  color: #000;
  font-weight: 700;
  border: 2px solid #000;
}
a.btn-white:hover,
a.btn-white:active,
a.btn-white:focus {
  background: #000;
  color: #fff;
  text-decoration: line-through;
  border: 2px solid #fff;
}
ul {
  padding: 0;
  margin-bottom: 0;
}
li {
  list-style: none;
  list-style-type: none;
  padding: 0;
}
li.workcat {
  padding-left: 15px;
}
h1 {
  padding: 30px 5px 0px 30px;
}
h3, h2, p {
  padding: 0; 
}
*::selection {
  background: #ffffff;
  color: #000;
}
*::-moz-selection {
  background: #ffffff;
  color: #000;
}
h1.hi {
  padding: 0;
  margin: 0;
  text-align: center;
  font-size: 6em;
}
h1.hi::selection {
  background: #000000;
  color: #ffffff;
}
h1.hi::-moz-selection {
  background: #000000;
  color: #ffffff;
}
.top-left h1 {
  display: inline-block;
}
.breadcrumb-link {
  font-family: 'Work Sans', sans-serif;
  font-weight: 700;
  margin: 0 5px;
}
.breadcrumb-active {
  text-decoration: line-through;
  font-style: italic;
}
.divider {
  /*color: #000;*/
  margin: 0 5px;
}
div.bgoverlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 1;
  z-index: -50;
  background: url('../img/asfalt-light.png');
  background-repeat: repeat;
}
video.bgvideo{ 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
}
.image_container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  background-color: #121212;
}

.image_container .item {
  margin-left: .3125rem;
}

.image_container .item:first-child {
  margin-left: 0;
}

.image_container .item img {
  height: 100vh;
}

.top {
  position: absolute;
  top: 2rem;
  left: 2rem;
  z-index: 10;
  font-size: 2rem;
}

.primary {
  position: fixed;
  top: 0;
  left: 0;
  /*max-width: 12.5%;*/
  z-index: 1000;
}
.secondary {
  position: fixed;
  top: 0;
  right: 0;
  max-width: 12.5%;
  z-index: 1000;
}
.bottom-left {
  top: auto;
  bottom: 0;
  right: 0;
  padding: 30px 0px 30px 30px;
  max-width: 12.5%;
}
.bottom-right {
  top: auto;
  bottom: 0;
  right: 0;
  padding: 30px 30px 30px 0px;
  text-align: right;
}
.content {
  margin-left: 12.5%;
  max-width: 75%;
}
.content-photo {
  margin: 0;
  max-width: 100%;
}
.content article {
  margin-bottom: 30px;
}
.content article.work-item {
  background: #000;
    padding: 25px 35px;
}
.content article img {
  width: 100%;
  margin-bottom: 30px;
}
img.profilepic {
  max-width: 480px;
  background: #fff;
  padding: 20px;
}
a.imprintlink {
  display: inline-block;
  margin-top: 10%;
}
/* Hide scrollbar BEGIN */

.ps__rail-x {
  opacity: 0 !important;
}

/* Hide scrollbar END */
/* Responsive */
@media (max-width: 768px){
  body {
    padding: 10px;
  }
  body.body-photo
  {
    padding: 0;
  }
  .primary, .secondary {
    position: relative;
    max-width: initial;
    width: 50%;
    height: auto;
  }
  h1, h2, h3, p {
    padding: 0;
  }
  h1.hi {
    font-size: 2em;
  }
  .top-left h1 {
    display: inline;
    padding-right: 5px;
  }
  .bottom-left, .bottom-right {
    padding: 0;
    float: left;
  }
  .body-photo .bottom-left {
    display: none;
  }
  .body-photo .primary,
  .body-photo .secondary {
    position: absolute;
    padding: 15px;
  }
  .content {
    max-width: initial;
    width: 100%;
    padding: 0;
    margin: 150px 0 0 0;
  }
}