/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/
@charset "UTF-8";

/* -------------Fonts----------- */
@font-face {
  font-family: 'montserrat';
  src: url('../fonts/montserrat-semibold-webfont.woff2') format('woff2'),
    url('../fonts/montserrat-semibold-webfont.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'montserrat';
  src: url('../fonts/montserrat-bold-webfont.woff2') format('woff2'),
    url('montserrat-bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

/* -------------Variables----------- */
:root {
  --white: #eee9e2;
  --gray: #b2b5a5;
  --black: #1e1e1e;
  --accent1: #b2b5a5;
  --accent2: #b2b5a5;
}

/* -------------Animation----------- */
@-webkit-keyframes h1 {
  from {
    -webkit-transform: scale(.95);
    transform: scale(.95);
    text-shadow: 0.3vw 0.3vw 0 var(--accent2);
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    text-shadow: 0.1vw 0.1vw 0 var(--accent2);
  }
}

@keyframes h1 {
  from {
    -webkit-transform: scale(.95);
    transform: scale(.95);
    text-shadow: 0.3vw 0.3vw 0 var(--accent2);
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    text-shadow: 0.1vw 0.1vw 0 var(--accent2);
  }
}

@-webkit-keyframes turn {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes turn {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes blink {
  0% {
    color: var(--black);
  }

  50% {
    color: var(--white);
  }

  100% {
    color: var(--black);
  }
}

@keyframes blink {
  0% {
    color: var(--black);
  }

  50% {
    color: var(--white);
  }

  100% {
    color: var(--black);
  }
}

/* -------------General----------- */
::-moz-selection {
  color: var(--white);
  background: var(--black);
}

::selection {
  color: var(--white);
  background: var(--black);
}

* {
  margin: 0;
  padding: 0;
  font-family: montserrat, sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* overflow-x: hidden; */
}

body {
  background-color: var(--accent1);
  background: -webkit-gradient(linear, left top, left bottom, from(var(--accent1)), to(var(--accent2)));
  background: -o-linear-gradient(var(--accent1), var(--accent2));
  background: linear-gradient(var(--accent1), var(--accent2));
}

main {
  min-height: 90vh;
}

h1 {
  display: block;
  margin-top: 4rem;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: .6rem;
  -webkit-animation: h1 1s linear infinite alternate;
  animation: h1 1s linear infinite alternate;
  color: var(--white);
  overflow: hidden;
}

h2 {
  margin-bottom: 2rem;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .2rem;
  color: var(--black);
  overflow: hidden;
}

h3 {
  margin-bottom: 1.5rem;
}

h4 {
  margin-bottom: 1rem;
}

hr {
  width: 100%;
  opacity: 0;
  margin: 0.6rem 0;
}

p, li {
  color: white;
  text-align: left;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  margin-bottom: 1rem;
}

iframe {
  padding: 0;
  margin: 0;
}

#wrapper {
  width: 50%;
  margin: 5rem auto 4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

#index #wrapper {
  width: 100%;
  margin-top: 3rem;
}

#privacy {
  padding-top: 2rem;
}

#contact {
  background-color: var(--gray);
  width: 100%;
  padding: 1rem;
}

.mail {
  width: 75%;
  margin: 1rem auto;
  background-color: var(--accent2);
  display: flex;
  justify-content: center;
  align-items: center;
}

.mail p, .mail p a {
  font-size: 1.5rem;
  display: inline;
  color: yellow;
  font-family: monospace;
  font-weight: normal;
  margin-top: 1rem;
}

.mail p {
  margin-right: 1rem;
  /* animation: blink .5s linear infinite alternate; */
}

.mail p a {
  animation: blink 1s linear infinite alternate;
  text-decoration: underline;
}

/* ------------Navigation----------- */
header nav {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}

nav ul, footer ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  list-style: none;
}

nav li {
  color: var(--white);
  background-color: var(--black);
  letter-spacing: 0.3rem;
  width: calc(100% / 3);
  margin: 0;
  height: 1.6rem;
}

a, footer abbr {
  font-weight: 700;
  padding-top: 0.2rem;
  color: var(--white);
  display: block;
  width: 100%;
  height: 100%;
}

a:hover {
  color: var(--accent1);
  background-color: var(--white);
}

a.active {
  background-color: var(--white);
  color: var(--black);
}

footer li {
  height: 3rem;
}

footer li:last-of-type {
  display: none;
}

footer a, footer abbr {
  padding-top: 0.2rem;
}

/* ------------Text----------- */
.text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.text h2, h3, h4 {
  width: 100%;
  color: var(--black);
  font-weight: 700;
  text-align: left;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

.text ul {
  margin: 2rem 0;
  padding-left: 1rem;
}

.text a {
  font-weight: 600;
  display: inline;
  text-decoration: underline;
}

/* ------------Cover----------- */
.series {
  height: 18vw;
  width: calc(100% / 3 - 8vw);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: static;
  margin: 0.3rem;
  /* background-color: var(--black); */
}

.vertical .large {
  height: 100%;
  width: calc(100% / 3 * 2);
}

.vertical .small {
  height: 50%;
  width: calc(100% / 3);
}

.horizontal {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

.horizontal .large {
  width: 100%;
  height: calc(100% / 3 * 2);
}

.horizontal .small {
  width: 50%;
  height: calc(100% / 3);
}

.mouseover {
  position: absolute;
  width: inherit;
  height: inherit;
  z-index: 10;
  opacity: 0;
}

.series:hover .mouseover {
  opacity: 1;
}

.mouseover a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.mouseover p {
  color: var(--accent1);
  text-align: center;
  padding: 0 2rem;
}

/* ------------Bilder----------- */
.image {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  /* padding: 0.1rem; */
}

.image img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.video {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
}

.video iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}

.text p {
  width: 100%;
}

.text .image {
  padding: 0;
}

.profile {
  width: 30%;
  overflow: hidden;
}

.profile img {
  -webkit-animation: turn linear 5s infinite;
  animation: turn linear 5s infinite;
}

.profile img:hover {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

.wide, .detail, .video {
  width: 100%;
  margin-top: 1rem;
}

.detail {
  width: calc(50% - 0.5rem);
}

#gradient .detail {
  width: calc(33% - 0.5rem);
}

/* ------------Laptops/Desktops----------- */
@media screen and (max-width:1900px) {
  #wrapper {
    width: 70%;
  }

  .series {
    width: calc(100% / 3 - 3vw);
    height: 24vw;
    margin: 0.3rem;
  }
}

/* ------------Tablets/Laptops----------- */
@media screen and (max-width:1400px) {
  * {
    font-size: 26px;
  }

  h1 {
    font-size: 1.4rem;
    margin-top: 3rem;
  }

  #wrapper {
    width: 80%;
  }

  #wrapper, #index #wrapper {
    margin: 1.5rem auto 2rem;
  }

  header li {
    height: 1.5rem;
  }

  nav a, nav abbr {
    font-size: 0.9rem;
    padding-top: 0.2rem;
  }

  span {
    display: none;
  }

  .series {
    width: calc(100vw / 2 - 1rem);
    height: 33vw;
    margin: 0.2rem;
  }

  .image {
    padding: 0.05rem;
  }

  .wide, .detail, .video {
    margin-top: 0.5rem;
  }

  .detail, #gradient .detail {
    width: calc(50% - 0.25rem);
  }
}

/* ------------Smartphones/Tablets----------- */
@media screen and (max-width:700px) {
  * {
    font-size: 22px;
  }

  h1 {
    font-size: 1.2rem;
    letter-spacing: .3rem;
    margin-top: 3rem;
  }

  h2 {
    font-size: 1.1rem;
    letter-spacing: .2rem;
  }

  #wrapper {
    width: 100%;
  }

  #wrapper, #index #wrapper {
    margin: 1rem auto 0.4rem;
  }

  nav li {
    height: 2.2rem;
  }

  nav a, nav abbr {
    padding-top: 0.5rem;
  }

  header li:last-of-type {
    display: none;
  }

  header li {
    width: 50%;
  }

  footer ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }

  footer li {
    width: 100%;
    height: 2.2rem;
  }

  footer li:first-of-type {
    height: 4rem;
  }

  footer li:last-of-type {
    display: inline;
  }

  .text p, .text h2, .text h3, .text h4 {
    max-width: 96%;
    margin-left: auto;
    margin-right: auto;
  }

  .series {
    width: 100vw;
    height: 75vw;
    margin: 0.2rem 0;
  }

  .image {
    padding: 0;
  }

  .wide, .detail, .video {
    margin: 0.2rem 0;
    width: 100%;
  }

  #gradient .detail {
    margin: 0.2rem 0;
  }
}