/*
Theme Name: DRUM CPH NY
Theme URI: 
Author: Tobias Fridolin
Description: Wordpress Theme
Version: 1.1
*/
@font-face {
  font-family: Clarendon;
  src: url(fonts/Clarendon.TTF);
  font-weight: normal;
  font-weight: 400;
}
@font-face {
  font-family: Avenir;
  src: url("fonts/Avenir Next LT Pro - regular.ttf");
  font-weight: normal;
  font-weight: 400;
}
:root,
body {
  --wp--style--block-gap: min(4.2vw, 24px);
  --wp--preset--font-size--large: min(44px, 8vw);
}

.wp-block-image {
  margin-bottom: 0;
}

a {
  display: inline-block;
}

.cph-max-width-900 {
  max-width: 900px;
}

.cph-max-width-1220 {
  max-width: 1220px;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: Avenir, Arial, Helvetica, sans-serif;
}

p {
  max-width: 64ch;
}

h1,
h2,
h3 {
  max-width: 46ch;
  font-family: Clarendon;
  font-weight: normal;
}

html {
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  background-color: #fafafa;
}

footer {
  background-color: #121137;
  background-color: #f8f7f5;
  margin-top: 0;
}
footer li {
  margin-top: 0;
  list-style: none;
}
footer li a {
  text-decoration: none;
}
footer .wrapper {
  padding-left: 24px;
  padding-right: 24px;
  max-width: 1220px;
  margin: auto;
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-top: 8vh;
  padding-bottom: 8vh;
  gap: 32px;
}
footer .wrapper > div {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  width: fit-content;
}
footer .wrapper div:first-child {
  flex-basis: 50%;
  flex-basis: calc(50% + 32px);
}
footer .wrapper div:nth-child(2) {
  flex-basis: 25%;
}
footer .wrapper div:nth-child(3) {
  flex-basis: 25%;
}
footer p,
footer li,
footer a {
  line-height: 1.5;
  font-size: 16px;
  text-decoration: none;
  color: #FAF2DE;
  color: white;
  color: rgba(255, 255, 255, 0.7);
  color: #28343C;
}
footer a {
  color: black;
}
footer .heading {
  font-family: tiempos text, clarendon, serif;
  font-size: 28px;
  line-height: 1.3;
  color: #28343C;
  color: #FAF2DE;
  color: white;
  color: black;
}
footer .text {
  max-width: 40ch;
  color: rgba(255, 255, 255, 0.7);
  color: #28343C;
}
footer span {
  display: flex;
  flex-direction: column;
}
footer span p {
  white-space: nowrap;
}
footer ul + ul,
footer span + span {
  margin-top: 1.5em;
}
footer .heading + p {
  margin-top: 0.5em;
}
@media screen and (max-width: 900px) {
  footer .wrapper {
    flex-wrap: wrap;
    gap: max(4vh, 40px);
  }
  footer .wrapper div:first-child {
    flex-basis: 100%;
  }
  footer .wrapper div:nth-child(2) {
    flex-basis: 50%;
  }
  footer .wrapper div:nth-child(3) {
    flex-basis: 50%;
  }
}

#logo {
  fill: #121137;
  position: absolute;
  top: 34px;
  left: 40px;
  z-index: 8;
}

#nav-burger {
  fill: #121137;
  position: fixed;
  right: 40px;
  top: 30.5px;
  height: 23px;
  width: 23px;
  z-index: 10;
  cursor: pointer;
}
#nav-burger svg {
  position: relative;
}
#nav-burger #dark rect {
  fill: #121137;
}
#nav-burger #light {
  display: none;
}
#nav-burger #light rect {
  fill: white;
}
#nav-burger span {
  background-color: #121137;
  position: absolute;
  left: 0;
  height: 2.64px;
  width: 23px;
}

#burger-nav-overlay {
  display: flex;
  transition: width 200ms;
  width: 0;
  height: 100vh;
  background-color: #121137;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
}
@supports (backdrop-filter: blur()) {
  #burger-nav-overlay {
    backdrop-filter: blur(12px);
    background-color: rgba(18, 17, 55, 0.95);
  }
}
@supports (-webkit-backdrop-filter: blur()) {
  #burger-nav-overlay {
    -webkit-backdrop-filter: blur(12px);
    background-color: rgba(18, 17, 55, 0.95);
  }
}
#burger-nav-overlay .wrapper {
  max-width: 1220px;
  margin: auto;
  padding-left: 24px;
  padding-right: 24px;
  margin-top: initial;
  margin-bottom: initial;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: max(8vh, 64px);
  padding-bottom: max(8vh, 64px);
}
#burger-nav-overlay .menu-logo {
  position: absolute;
  top: 34px;
  left: 40px;
  visibility: hidden;
}
#burger-nav-overlay .menu-logo svg {
  fill: white;
}
#burger-nav-overlay .menu-info,
#burger-nav-overlay .contact-info {
  display: flex;
  flex-basis: 50%;
}
#burger-nav-overlay .menu-info {
  justify-content: space-between;
  align-items: center;
}
#burger-nav-overlay .contact-info {
  justify-content: flex-end;
  align-items: flex-end;
  opacity: 0;
}
#burger-nav-overlay .contact-info__wrapper {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  height: fit-content;
}
#burger-nav-overlay .contact-info__wrapper div {
  width: 25%;
}
#burger-nav-overlay .contact-info ul li {
  margin-top: 0;
  list-style: none;
}
#burger-nav-overlay .contact-info ul li a {
  text-decoration: none;
}
#burger-nav-overlay .contact-info ul li {
  font-size: 14px;
  color: rgba(250, 242, 222, 0.7);
  color: rgba(255, 255, 255, 0.7);
}
#burger-nav-overlay .contact-info ul li a {
  color: #FAF2DE;
  color: white;
}
#burger-nav-overlay .contact-info ul + ul {
  margin-top: 1.5em;
}

body.burger-open {
  overflow-y: hidden;
}

#menu-top-menu {
  display: flex;
  flex-direction: column;
}
#menu-top-menu .menu-item {
  visibility: hidden;
  cursor: pointer;
  line-height: 1.5;
}
#menu-top-menu .menu-item:hover a {
  color: #909da7;
}
#menu-top-menu .menu-item a {
  transition: color 100ms;
  font-size: 34px;
  color: #FAF2DE;
  color: white;
  font-family: tiempos text, clarendon, serif;
}

.menu-top-menu-container {
  width: 25%;
  margin-left: auto;
}

.navigation li {
  margin-top: 0;
  list-style: none;
}
.navigation li a {
  text-decoration: none;
}

.cases a {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.cases a:hover img {
  transform: scale(1.08);
}
.cases .case-client {
  line-height: 1.2;
}
.cases .case-project {
  line-height: 1.3;
}
.cases .case-thumbnail {
  display: flex;
  margin-bottom: 16px;
  overflow: hidden;
}
.cases .case-thumbnail img {
  transition: transform 1000ms;
}
.cases .case-client {
  font-family: tiempos text, clarendon, serif;
  font-size: 16px;
  margin-bottom: 8px;
  font-family: clarendon, serif;
  color: black;
}
.cases .case-project {
  font-family: founders gotesk text, avenir, sans-serif;
  font-size: 14px;
  color: black;
}
.cases .case-tags {
  list-style: none;
  margin-bottom: 4px;
  position: relative;
}
.cases .case-tags .filter-by {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  font-size: 10px;
  padding: 0.3em 0.6em;
  border-radius: 1em;
  backdrop-filter: blur(2px);
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}
@media screen and (max-width: 600px) {
  .cases .case-tags .filter-by {
    display: none;
  }
}
.cases .case-tags a {
  display: inline-block;
}
.cases .case-tags li {
  font-family: founders gotesk text, avenir, sans-serif;
  display: inline-block;
  font-size: 12px;
  font-weight: 300;
  color: rgba(0, 0, 0, 0.5);
  position: relative;
  cursor: pointer;
  transform: color 200ms;
}
.cases .case-tags li:hover {
  color: black;
}
.cases .case-tags li:after {
  content: ",";
}

@media screen and (max-width: 1000px) {
  #logo {
    top: 20px;
    left: 24px;
  }

  #nav-burger {
    top: 16.5px;
    right: 24px;
  }

  #burger-nav-overlay .menu-logo {
    top: 20px;
    left: 24px;
  }
  #burger-nav-overlay .contact-info__wrapper {
    flex-direction: column;
  }
  #burger-nav-overlay .contact-info__wrapper div {
    width: 100%;
  }

  .menu-top-menu-container {
    width: 100%;
  }

  .contact-info div + div {
    margin-top: 1.5em;
  }
}

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