@charset "UTF-8";
/*
Theme Name: Zoe Paul
Theme URI: http://zoe-paul.com
Description: Theme for Zoë Paul
Author: Till M. Kammertöns
Author URI: https://www.tillkammertoens.com
Version: 1.5
*/
@font-face {
  font-family: "Helvetica Neue";
  font-weight: 400;
  src: url("fonts/7bdc73f2-5ac9-4be2-98ea-e001c305aba5.eot?#iefix");
  src: url("fonts/7bdc73f2-5ac9-4be2-98ea-e001c305aba5.eot?#iefix") format("eot"), url("fonts/92130cb4-d99d-43aa-a0a8-2cf4451f4d6e.woff2") format("woff2"), url("fonts/cf9b3e3a-e56a-428a-83f3-9cb745540375.woff") format("woff"), url("fonts/8a4e62ee-5417-45df-bb4c-9068cc56ba1e.ttf") format("truetype");
}
@font-face {
  font-family: "Helvetica Neue";
  font-weight: 700;
  src: url("fonts/de38f48e-1e5f-4456-8aee-50205491ce73.eot?#iefix");
  src: url("fonts/de38f48e-1e5f-4456-8aee-50205491ce73.eot?#iefix") format("eot"), url("fonts/6ad96b1d-8329-433d-91b4-4f413604f0c6.woff2") format("woff2"), url("fonts/f8e09480-4f5d-4eac-bcb7-a19f73c610ee.woff") format("woff"), url("fonts/d6d65be6-ba91-4364-b66b-43f2aa2f4caf.ttf") format("truetype");
}
@font-face {
  font-family: "Helvetica Neue";
  font-weight: 800;
  src: url("fonts/04e2de4c-4ab6-44dd-b763-d6b63334d789.eot?#iefix");
  src: url("fonts/04e2de4c-4ab6-44dd-b763-d6b63334d789.eot?#iefix") format("eot"), url("fonts/3b49d471-2353-4ac2-9c89-6cfb6202efb2.woff2") format("woff2"), url("fonts/cd107686-9f1a-450b-b113-d94c81c3cbeb.woff") format("woff"), url("fonts/ab383859-4060-463f-a9dc-e1a661d4e4bc.ttf") format("truetype");
}
:root {
  --font-size: 18px;
  --color: black;
  --font-weight: normal;
  --menu-color: #00D9FF;
}

h1, nav, .artwork_meta {
  --color: var(--menu-color);
}

h1 {
  --color: var(--menu-color);
  --font-weight: 800;
  --font-size: 54px;
  --letter-spacing: 5px;
}
@media (min-width: 767px) {
  h1 {
    --font-size: 112px;
    --letter-spacing: 20px;
  }
}

@media (min-width: 767px) {
  .home h1 {
    --font-size: 200px;
  }
}

nav {
  --letter-spacing: 0.5;
  --font-size: 28px;
  --font-weight: 700;
}
@media (min-width: 767px) {
  nav {
    --font-size: 18px;
  }
}

p {
  --line-height: 24px;
  --margin-bottom: 12px;
  --letter-spacing: .5px;
}

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  color: var(--color);
  font-weight: var(--font-weight);
  padding: 155px 25px 25px;
}
@media (max-width: 766px) {
  body {
    transition: margin-top 1s;
  }
}
@media (min-width: 767px) {
  body {
    padding: 56px 70px;
  }
}

a {
  color: var(--color);
  text-decoration: none;
}

header {
  position: fixed;
  top: 0px;
  left: 0px;
  mix-blend-mode: multiply;
  mix-blend-mode: plus-darker;
  z-index: 1;
}
@media (min-width: 767px) {
  header {
    pointer-events: none;
  }
}
@media (max-width: 766px) {
  header {
    cursor: pointer;
  }
  header * {
    cursor: pointer;
  }
}

h1 {
  font-weight: var(--font-weight);
  font-size: var(--font-size);
  color: var(--color);
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
}
@media (max-width: 766px) {
  h1 {
    margin: 25px;
    transition: padding-top 1s;
  }
}
@media (min-width: 767px) {
  h1 {
    width: 100vw;
    position: fixed;
    top: 80px;
    left: 0px;
    text-align: center;
    padding-left: 10px;
  }
}

h2 {
  display: none;
}

nav {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  mix-blend-mode: multiply;
  mix-blend-mode: plus-darker;
  z-index: 1;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing);
  font-weight: var(--font-weight);
  font-size: var(--font-size);
}
nav ul {
  display: flex;
  list-style-type: none;
  height: fit-content;
  flex-direction: column;
  width: 100vw;
  padding: 25px 20px;
}
nav ul li {
  display: block;
  margin: 0 0 20px;
}
nav .current-menu-item a {
  border-bottom: 3px solid var(--color);
}
@media (min-width: 767px) {
  nav .current-menu-item a {
    border-bottom: 2px solid var(--color);
  }
}
@media (max-width: 766px) {
  nav {
    z-index: 15;
    height: 0px;
    overflow: hidden;
    transition: height 1s;
    background-color: white;
  }
}
@media (min-width: 767px) {
  nav {
    position: fixed;
    top: 210px;
  }
  nav:hover {
    mix-blend-mode: normal;
  }
  nav ul {
    flex-direction: row;
    margin: 0 auto;
    padding: 0;
    max-width: 720px;
    justify-content: space-between;
  }
}

@media (min-width: 767px) {
  .home h1 {
    min-width: 1210px;
    width: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .home nav {
    top: 55px;
  }
  .home .artwork_meta {
    cursor: default;
  }
}

p {
  line-height: var(--line-height);
  margin-bottom: var(--margin-bottom);
  letter-spacing: var(--letter-spacing);
}

@media (max-width: 766px) {
  .menuActive h1 {
    padding-top: 266px;
  }
  .menuActive nav {
    padding-top: 0;
    mix-blend-mode: initial;
    height: 260px;
    margin-bottom: 100px;
  }
  .menuActive #artworks_container {
    height: calc(100vh - 260px) !important;
    height: calc(var(--vh, 1vh) * 100 - 260px) !important;
    top: 260px !important;
  }
}
@media (min-width: 767px) {
  .home header, .home nav, .home .artwork_meta {
    opacity: 0;
    transition: opacity 0.7s ease-in-out;
  }
  .home.menuOn header, .home.menuOn nav, .home.menuOn .artwork_meta {
    opacity: 1;
  }

  article {
    margin-top: 180px;
  }
}
img {
  max-width: 100%;
}

video {
  max-width: 100%;
}

#artworks_container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100vh;
  max-height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  max-height: calc(var(--vh, 1vh) * 100);
  width: 100vw;
  overflow-y: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  transition: height 1s, top 1s;
}
@media (min-width: 767px) {
  #artworks_container .control {
    height: 100vh;
    width: 20vw;
    position: fixed;
    z-index: 10;
  }
  #artworks_container .prev {
    left: 0px;
    cursor: w-resize;
  }
  #artworks_container .next {
    right: 0px;
    cursor: e-resize;
  }
  #artworks_container .control.inactive {
    cursor: default;
  }
}
#artworks_container .artwork {
  flex-shrink: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  height: 100%;
  width: 100vw;
}
#artworks_container .artwork img, #artworks_container .artwork video {
  object-fit: cover;
  object-position: 50% 50%;
  min-width: 100%;
  min-height: 100%;
  max-width: 100%;
  max-height: 100%;
}
#artworks_container .artwork .artwork_meta {
  mix-blend-mode: multiply;
  mix-blend-mode: plus-darker;
  z-index: 1;
  color: var(--color);
  position: absolute;
  bottom: 0px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 25px;
}
@media (max-width: 766px) {
  #artworks_container .artwork .artwork_meta:focus {
    mix-blend-mode: normal;
  }
}
@media (min-width: 767px) {
  #artworks_container .artwork .artwork_meta {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
  #artworks_container .artwork .artwork_meta:hover {
    mix-blend-mode: normal;
  }
}

/*# sourceMappingURL=style.css.map */