@charset "UTF-8";
/* Theme Name: C100 Studio 2023
Theme Description: Custom Theme for C100 Studio 
Author: Nicolas Lehmann | EMVY  
URI: http://www.emvy.eu
Version: 0.0.1
Text Domain: finom
*/
/*@import url('bootstrap/css/bootstrap.min.css');*/
@font-face {
  font-family: GT-America;
  src: url("./fonts/GT-America-Standard-Regular.woff") format("woff2"), url("./fonts/GT-America-Standard-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* *** Variables *** */
/*$sliderOverlayBy2: 15vw;*/
html {
  scroll-behavior: smooth;
  scroll-padding-top: 280px;
}

@media (max-width: 991px) {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 140px;
  }
}
body, .wp-admin .editor-styles-wrapper {
  background-color: #ffffff;
  font-family: "GT-America", Helvetica, sans-serif;
  font-size: 16px;
  letter-spacing: 0.07rem;
  color: #000000;
  -webkit-hyphens: auto;
          hyphens: auto;
  font-smooth: subpixel-antialiased;
  -webkit-font-smoothing: subpixel-antialiased;
  margin: 0;
  padding: 0;
  max-width: 100vw;
  overflow-x: hidden;
}

@media (max-width: 767px) {
  body:not(.page-template-projects-archive):not(.page-template-projects-archive-v2), .wp-admin .editor-styles-wrapper {
    font-size: 20px;
    overflow-y: hidden;
  }
}
/* srcoll snap */
* {
  box-sizing: border-box;
}

html {
  scroll-snap-type: y proximity;
}

/*@media screen and (min-width: 1024px) {
    main section:not(:last-child) {
        scroll-snap-align: start;
        scroll-margin: $headerHeightScrolled;
    }
}
@media screen and (max-width: 1023px) {
    main section .section-slide-col {
        scroll-snap-align: start;
        scroll-margin: $headerHeightMobile;
    }
}*/
main > .emvy-zeile:not(:last-child) {
  /*scroll-snap-align: start;
  scroll-margin-top: 0;*/
}

body:not(.wp-admin) h1, .h1, body:not(.wp-admin) h2, .h2 {
  font-size: 80px;
  line-height: 0.81;
  margin-bottom: 42px;
  text-align: left;
}

@media screen and (max-width: 991px) {
  body:not(.wp-admin) h1, .h1, body:not(.wp-admin) h2, .h2 {
    font-size: 58px;
    /*transform: rotate(9deg);
    transform-origin: right bottom;
    text-align: right;*/
  }
}
@media screen and (max-width: 639px) {
  body:not(.wp-admin) h1, .h1, body:not(.wp-admin) h2, .h2 {
    font-size: 54px;
    margin-bottom: 30px;
  }
}
body:not(.wp-admin) h1 br, body:not(.wp-admin) h2 br {
  display: none;
}

h3, .wp-admin .editor-styles-wrapper h3, .h3 {
  font-weight: 600;
  font-size: 25px;
  line-height: 1.24;
  margin-bottom: 21px;
  /*display: inline-block;*/
}

@media screen and (max-width: 767px) {
  h3, .h3 {
    font-size: 21px;
  }
}
h3 + h3 {
  margin-top: -30px;
}

h4, .wp-admin .editor-styles-wrapper h4, .h4 {
  font-weight: normal;
  font-size: 21px;
  line-height: normal;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 15px;
}

@media screen and (max-width: 767px) {
  h4, .h4 {
    font-size: 21px;
    line-height: normal;
    margin-bottom: 11px;
  }
}
h5, .wp-admin .editor-styles-wrapper h5, .h5 {
  font-weight: normal;
  font-size: 24px;
  line-height: 30px;
  margin-bottom: 0.42rem;
}

@media screen and (max-width: 767px) {
  h5, .h5 {
    font-size: 21px;
    line-height: 28px;
  }
}
/* Hyperlinks*/
a, a:visited, a:focus {
  color: currentColor;
  font-weight: normal;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: all 400ms;
}

header a, header a:visited, header a:focus, footer a, footer a:visited, footer a:focus {
  text-decoration: none;
}

main a:hover, .overlayer a:hover, footer a:hover {
  background: linear-gradient(0deg, currentColor, currentColor);
  background-size: 100% 3px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: all 400ms;
}

/* paragraph */
* > p:first-child {
  margin-block-start: 0;
}

/* *** wrapper *** */
.wrapper {
  position: relative;
  width: 100%;
}

/* *** image margin *** */
figure {
  margin: 0;
}

/* regular page / imprint / datenschutz */
body:not(.home):not(.page-template-projects-archive).page main {
  padding-left: 80px;
  padding-right: 80px;
  padding-top: 210px;
  padding-bottom: 80px;
}

@media screen and (max-width: 767px) {
  body:not(.home):not(.page-template-projects-archive):not(.page-template-projects-archive-v2).page main {
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 84px;
    padding-bottom: 84px;
  }
}
/* *** Header *** */
body:not(.wp-admin) header {
  display: block;
  position: fixed;
  width: 100%;
  padding-left: 80px;
  padding-right: 80px;
  top: 40px;
  z-index: 2;
  pointer-events: none;
}

@media screen and (max-width: 767px) {
  body:not(.wp-admin) header {
    padding-left: 25px;
    padding-right: 25px;
    top: 6vw;
    /*mix-blend-mode: difference;*/
    color: #ffffff;
  }
  body.projects-template-default header {
    mix-blend-mode: difference;
  }
}
body:not(.wp-admin) header a {
  pointer-events: all;
  cursor: pointer;
}

.header-wrapper {
  display: flex;
  position: relative;
  justify-content: space-between;
}

@media (max-width: 1399px) {
  body.page-template-projects-archive-v2 .header-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  body.page-template-projects-archive-v2 .header-wrapper > *:nth-child(2) {
    order: 3;
    grid-column: span 2;
  }
}
.logo * {
  font-size: 1.125em !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
  font-weight: normal !important;
  margin: 0;
  padding: 0;
  margin-top: 5px;
}

@media (max-width: 767px) {
  .logo * {
    font-size: 21px !important;
  }
}
@media (max-width: 399px) {
  .logo * {
    font-size: 20px !important;
  }
}
@media (max-width: 360px) {
  .logo * {
    font-size: 18px !important;
  }
}
@media (max-width: 340px) {
  .logo * {
    font-size: 16px !important;
  }
}
@media screen and (min-width: 768px) {
  .home .logo *, .page-template-projects-archive .logo * {
    color: #ffffff;
  }
}
nav * {
  font-size: 1.125em !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
  font-weight: normal !important;
  margin: 0;
  padding: 0;
  margin-top: 5px;
}

@media (max-width: 767px) {
  nav * {
    font-size: 21px !important;
  }
}
@media (max-width: 399px) {
  nav * {
    font-size: 20px !important;
  }
}
@media (max-width: 360px) {
  nav * {
    font-size: 18px !important;
  }
}
@media (max-width: 340px) {
  nav * {
    font-size: 16px !important;
  }
}
@media screen and (min-width: 768px) {
  .home nav *, .page-template-projects-archive nav * {
    color: #ffffff;
  }
}
@media (max-width: 1399px) {
  body.page-template-projects-archive-v2 nav *, body.page-template-projects-archive-v2 header a {
    color: #000000;
  }
  body.page-template-projects-archive-v2 nav .about {
    text-align: right;
  }
}
/* ticker old */
.ticker-wrap {
  width: 100%;
  overflow: hidden;
  /*padding-left: 100%;*/
  box-sizing: content-box;
}

.ticker {
  padding: 7px;
  animation: MoveLeftRight 40s linear infinite;
  display: inline-block;
  white-space: nowrap;
  padding-right: 100%;
  box-sizing: content-box;
  font-family: inherit;
}

.ticker p {
  margin: 0;
  padding: 0;
}

@keyframes MoveLeftRight {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
/* ticker by ChatGPT */
#ticker-container {
  width: 100%;
  height: 33px;
  overflow: hidden;
}

#ticker-content {
  white-space: nowrap;
  position: absolute;
  padding-left: 100vw;
  animation: ticker 36s linear infinite;
  will-change: transform;
}

@keyframes ticker {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
#ticker-container p {
  margin: 0;
  padding: 0;
  line-height: 33px;
  display: inline;
}

/*
main {
    background-color: #f5f2f0;
}
*/
/* Gutenberg blocks columns mobile */
.main-content .wp-block-columns {
  /*gap: $GutenbergColumnsGap;*/
  gap: 0; /* gap set o because of older safari - using margins instead */
  margin-bottom: 0;
}

@media (max-width: 991px) {
  .main-content .wp-block-columns {
    flex-direction: column;
    flex-wrap: nowrap !important;
    gap: 0;
  }
}
.main-content .wp-block-column {
  padding-top: 0;
  padding-bottom: 0;
}

.main-content .wp-block-columns .wp-block-column {
  margin-left: 30px;
  margin-right: 30px;
}

.main-content .wp-block-columns .wp-block-column:first-child {
  margin-left: 0 !important;
  margin-right: 30px;
}

.main-content .wp-block-columns .wp-block-column:last-child {
  margin-left: 30px;
  margin-right: 0;
}

@media (max-width: 991px) {
  .main-content .wp-block-column {
    padding-top: 0;
    padding-bottom: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0;
  }
  .main-content .wp-block-column:empty {
    display: none;
    margin-bottom: 0;
  }
  /*main .wp-block-column + .wp-block-column {
      margin-top: 60px;
  }*/
  main .wp-block-column .wp-block-column + .wp-block-column {
    margin-top: 0;
  }
  /*.wp-block-media-text.is-stacked-on-mobile {
      -ms-grid-columns: 100%!important;
      grid-template-columns: 100%!important;
  }*/
  .wp-block-media-text {
    display: flex;
    flex-direction: column;
  }
}
/* ul List */
.main-content ul {
  padding: 0;
  position: relative;
}

/*.has-text-align-center + ul {
    text-align: center;
}*/
/*.main-content > div:not(.job_listings):not(.single_job_listing) ul li {
	padding: 0;
	margin-left: 30px;
    list-style: none;
    margin-bottom: 15px;
}
.main-content > div:not(.job_listings):not(.single_job_listing) ul li:before {
	content: " ";
	position: absolute;
	left: 0;
	margin-top: 10px;
	background: url(img/bullet.svg) no-repeat;
    background-size: contain;
	width: 14px;
	height: 14px;
}*/
.main-content ul li:not([style="list-style: upper-roman;"]) {
  list-style: none;
  padding: 0;
  padding-left: 30px;
  margin-left: 0;
  margin-bottom: 6px;
  /*text-align: justify;*/
}

.main-content ul li:not([style="list-style: upper-roman;"]):before {
  content: "○";
  font-weight: 700;
  font-size: 1.6em;
  line-height: 1em;
  padding-right: 9px;
  color: currentColor;
  position: absolute;
  margin-left: -30px;
  transform: translateY(-5px);
}

/* *** Footer *** */
footer {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  padding-left: 30px;
  padding-right: 30px;
  font-size: 0.84rem;
}

@media screen and (max-width: 767px) {
  footer {
    padding-left: 25px;
    padding-right: 25px;
  }
}
body.page-template-projects-archive footer {
  position: fixed;
}

body:not(.home):not(.single-projects):not(.page-template-projects-archive) footer {
  position: relative;
}

@media screen and (min-width: 768px) {
  body.home footer {
    color: #ffffff;
  }
}
/* *** Overlayer *** */
body.overlayer-active {
  max-height: 100vh;
  overflow: hidden;
}

.overlayer {
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 60px;
  background-color: #ffffff;
  z-index: 10;
}

@media screen and (max-width: 767px) {
  .overlayer {
    padding-left: 25px;
    padding-right: 25px;
  }
}
.overlayer .inner {
  max-height: 100%;
  overflow-y: auto;
  scrollbar-color: #000000 #ffffff;
  scrollbar-width: thin;
  padding-right: 11px;
}

.overlayer .inner::-webkit-scrollbar {
  width: 9px;
}

.overlayer .inner::-webkit-scrollbar-track {
  background: #ffffff;
}

.overlayer .inner::-webkit-scrollbar-thumb {
  background-color: #000000;
  border-radius: 0px;
  border: 3px solid #ffffff;
}

.overlayer .button-close {
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  right: 15px;
  top: 15px;
  background: url(img/button-close.svg) no-repeat;
  background-size: contain;
  cursor: pointer;
  opacity: 1;
  transition: opacity 200ms;
}

.overlayer .button-close:hover {
  opacity: 0.5;
}

/* *** about page hover images *** */
.hover-about {
  display: block;
  position: absolute;
  width: auto;
  height: 38.2vh;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms;
}

body.about-hover-christian .hover-about.hover-christian {
  opacity: 1;
}

body.about-hover-studio .hover-about.hover-studio {
  opacity: 1;
}

.hover-about .widget, .hover-about .widget figure {
  width: 100%;
  height: 100%;
}

.hover-about .widget figure img {
  width: auto;
  height: 100%;
}

/* *** Work Index *** */
.work-index-nav {
  display: flex;
  flex-direction: row;
}

@media screen and (max-width: 1399px) {
  body.page-template-projects-archive-v2 .work-index-nav {
    flex-wrap: wrap;
    justify-content: center;
    margin-left: -15px;
    margin-right: -15px;
    pointer-events: all;
    opacity: 1;
    transition: opacity 0.3s ease-out;
  }
  body.page-template-projects-archive-v2.scrolled .work-index-nav {
    opacity: 0;
    pointer-events: none;
  }
}
.work-index-nav > div {
  margin: 0;
  margin-right: 42px;
  cursor: pointer;
  pointer-events: all;
}

@media screen and (max-width: 1399px) {
  .work-index-nav > div {
    margin-right: 30px;
  }
  body.page-template-projects-archive-v2 .work-index-nav > div {
    margin-left: 15px;
    margin-right: 15px;
    white-space: nowrap;
    margin-bottom: 11px;
  }
}
.index-projects {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

@media screen and (max-width: 1399px) {
  .index-projects {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}
@media screen and (max-width: 1199px) {
  .index-projects {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
@media screen and (max-width: 979px) {
  .index-projects {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen and (max-width: 767px) {
  .index-projects {
    grid-template-columns: 1fr 1fr;
  }
}
.index-projects.v2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 120px;
}

@media screen and (max-width: 1399px) {
  .index-projects.v2 {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 100px;
  }
}
@media screen and (max-width: 1199px) {
  .index-projects.v2 {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }
}
@media screen and (max-width: 979px) {
  .index-projects.v2 {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    row-gap: 90px;
  }
}
@media screen and (max-width: 767px) {
  .index-projects.v2 {
    grid-template-columns: 1fr;
    gap: 60px;
  }
}
.index-projects.v2 > a {
  text-decoration: none;
}

.index-project {
  display: block;
  position: relative;
  padding-top: 56.25%;
  cursor: default;
}

.index-project:hover {
  cursor: pointer;
}

@media screen and (max-width: 767px) {
  .index-projects.v2 .index-project {
    padding-top: 0;
  }
}
.index-project-image {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

@media screen and (max-width: 767px) {
  .index-projects.v2 .index-project-image {
    position: relative;
    padding-top: 56.25%;
  }
  .index-projects.v2 .index-project-image.rollover {
    display: none;
  }
}
.index-project-image.rollover {
  opacity: 0;
  transition: all 0.6s;
}

.index-project:hover .index-project-image.rollover {
  opacity: 1;
  transition: all 0.3s;
}

.index-project-image img {
  display: block;
  position: absolute;
  width: 100% !important;
  height: 100% !important;
  left: 0;
  top: 0;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
}

.index-project-text {
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: all 0.4s;
}

.index-project:hover .index-project-text {
  opacity: 1;
}

.index-project-text div {
  text-align: center;
  color: #ffffff;
}

.index-projects.v2 .index-project-text {
  display: flex;
  position: absolute;
  width: 100%;
  height: auto;
  left: 0;
  top: unset;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
  padding-top: 15px;
  background: none;
  opacity: 1;
  transition: all 0.4s;
}
.index-projects.v2 .index-project:hover .index-project-text {
  opacity: 1;
}
.index-projects.v2 .index-project-text div {
  text-align: center;
  color: #000000;
}

@media screen and (max-width: 767px) {
  .index-projects.v2 .index-project-text {
    position: relative;
  }
}
.fadeoutproject {
  opacity: 0;
  transition: opacity 0.5s;
}

.hideproject {
  display: none;
}

/* *** Backend *** */
.interface-interface-skeleton__sidebar .image-button {
  display: inline-block;
  height: auto;
}/*# sourceMappingURL=style.css.map */