@font-face {
    font-family:"produkt"; src:url("../fonts/Produkt-Light.woff2") format("woff2");
    font-style:normal;font-weight:400;
}

@font-face {
    font-family:"produkt2"; src:url("../fonts/Produkt-LightItalic.woff2") format("woff2");
    font-style:normal;font-weight:400;
}
/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select,textarea{margin:0}html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}img,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}td:not([align]),th:not([align]){text-align:left}

html {
    box-sizing: border-box;
    font-size: 62.5%;
    margin: 0;
    padding: 0;

}

button {
  padding: 0;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  background: none;
}

*, *:before, *:after {
  box-sizing: border-box;
}


::selection {
  color: #319177;
}

html,
body {
  height: 100%;
    background: white;
    overflow-x: hidden;
}

::scrollbar {
  display: none;
}

body {
  line-height: 1.5;
  font-family: 'produkt', Helvetica, Arial, sans-serif;
  /*background: #eef6ed;*/
  background: #bdf0d4;
  color: #333;
  scroll-behavior: smooth;
  min-height: 100vh;
}

body {
  font-size: 14px;
}

.quoteblock {
  font-size: 94%;
  line-height: calc(14px * 1.5);
}


@media screen and (min-width: 320px) {
  body {
    font-size: 16px;
  }
  .quoteblock {
    line-height: calc(16px * 1.5);
  }
}
@media screen and (min-width: 1200px) {
  body {
    font-size: 18px;
  }
  .quoteblock {
    line-height: calc(18px * 1.5);
  }
}

a {
    text-decoration: none;
    color: #319177;
    -webkit-transition: color 0.1s ease, opacity 0.1s ease;
    -moz-transition: color 0.1s ease, opacity 0.1s ease;
    -ms-transition: color 0.1s ease, opacity 0.1s ease;
    -o-transition: color 0.1s ease, opacity 0.1s ease;
    transition: color 0.1s ease, opacity 0.1s ease;
}

a:hover {
    /*color: #56887d;*/
    color: #319177;
    text-decoration: none;
}

p a:hover {
    color: #56887d;
    text-decoration: none;
}

b, strong, em, i {
    font-family: 'produkt2', sans-serif;
    font-style: normal;
    font-weight: 400;
}

h1,h2,h3,h4,h5,h6 {
  text-transform: uppercase;
  margin-bottom: calc(1em * 2);
  margin-bottom: calc(1em * 1.5);
}

p {
  margin-bottom: calc(1em * 1.5);
}

header#sitename {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}

nav#mainnav, nav#homenav {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 998;
  width: 100%;
}

.entrynav {
  background: #FFF;
}

.navborder {
  width: 100%;
  height: 1px;
  display: block;
  content: " ";
  border-top: 1px solid #396f4f;
  margin-top: calc((1em * 1.5) / 2);
}

#homenav ul li a {
  opacity: 1;
}

#mainnav ul li a {
  opacity: 0.5;
}

#mainnav ul li a:hover {
  opacity: 1;
}

#mainnav ul li a.active {
  opacity: 1;
}

footer {
  padding-top: calc(((1em * 1.5) * 9) + 1.5rem);
  padding-bottom: 1.5rem;
}

.white {
  background: #FFFFFF;
}

.info-my {
  margin-top: calc(((1em * 1.5) * 9) + 1.5rem);
}

.index-list {
  margin-top: calc(((1em * 1.5) * 5) + 1.5rem);
}

#project-list {
  display: contents;
}

#project-list div {
  padding-top: calc((1em * 1.5) / 2);
  padding-bottom: calc((1em * 1.5) * 2);
  margin-top: calc((1em * 1.5) / 2);
  border-top: 1px solid #56887d;
  -webkit-transition: opacity 0.1s ease;
  -moz-transition: opacity 0.1s ease;
  -ms-transition: opacity 0.1s ease;
  -o-transition: opacity 0.1s ease;
  transition: opacity 0.1s ease;
}

#project-list:hover div{
  opacity: 0.5;
}
#project-list:hover div:hover {
  opacity: 1;
}

.entry-lead-image {
  height: 100vh;
}

.entry-lead-image figure {
  padding-top: calc(((1em * 1.5) * 6) + 1.5rem);
  padding-bottom: calc(((1em * 1.5) * 6) + 1.5rem);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.entry-margin-top {
    padding-top: calc(((1em * 1.5) * 13) + 1.5rem);
}

/****** PROJECT *******/
.project-title, .entry-title {
  position: absolute;
  top: calc(((1em * 1.5) * 2) + 1.5rem);
  left: 1.5rem;
  width: 100%;
}

.project-block:last-of-type {
  margin-bottom: calc(((1em * 1.5) * 4) + 1.5rem);
}

.project-link {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  width: 100%;
}

.project-slider {
  position:relative;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  animation: fadeIn ease 350ms;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-delay: 0.35s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}

.slider {
  width: 100%;
  height: 100%;
}

.slider-title {
  position: fixed;
  bottom: 15px;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.slick-track {
  min-height: 100vh;
}

.slider .slick-slide {
  height: 100vh !important;
  padding-top: calc(((1em * 1.5) * 6) + 1.5rem);
  padding-bottom: calc(((1em * 1.5) * 6) + 1.5rem);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  display: flex !important;
  justify-content: center;
  align-items: center;
}

figure img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - (((1em * 1.5) * 12) + 3rem));
}
.prev-next {
  position: absolute;
  top: 50px;
  left: 0;
  height: calc(100vh - 100px);
  width: 100vw;
  display: flex;
  flex-flow: row wrap;
}
.sl-prev, .sl-next {
  width: 50%;
  height: 100%;
  display: block;
  content: " ";
}

.sl-prev {
  cursor: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='28' height='28' x='0px' y='0px' viewBox='0 0 716 1082' style='enable-background:new 0 0 716 1082;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%2356887D;%7D%0A%3C/style%3E%3Cpolygon class='st0' points='659.6,1.5 540.3,1.5 0,541.8 540.3,1082 659.6,1082 119.3,541.8 '/%3E%3Cellipse class='st0' cx='602.5' cy='542.5' rx='96.5' ry='104.8'/%3E%3C/svg%3E") 28 28, auto;
}

.sl-next {
  cursor: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='28' height='28' x='0px' y='0px' viewBox='0 0 716 1082' style='enable-background:new 0 0 716 1082;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%2356887D;%7D%0A%3C/style%3E%3Cpolygon class='st0' points='55.5,1082 174.8,1082 715,541.8 174.8,1.5 55.5,1.5 595.8,541.8 '/%3E%3Cellipse class='st0' cx='112.5' cy='541' rx='96.5' ry='104.8'/%3E%3C/svg%3E")28 28, auto;
}


/* Mobile Menu */
/*.mob-menu {
  position: fixed;
  top: 0;
  left: 0;
  transform: translateY(-100%);
  width: 100%;
  z-index: 9999;
  transition: transform .7s;
  -webkit-transition: -webkit-transform .7s;
  transition-timing-function: cubic-bezier(.28,.37,.22,1);
}

.mob-menu.menu-open {
  transform: translate(0);
  -webkit-transform: translate(0);
}*/

.mob-menu {
  position: relative;
  width: 100%;
  max-height: 0;
  z-index: 9999;
  opacity: 0;
  overflow: hidden;
  transition: all .35s;
  transition-timing-function: cubic-bezier(.28,.37,.22,1);
}

.mob-menu.menu-open {
  max-height: 106px;
  opacity: 1;
}



/* media queries */
@media (min-width: 576px) {

  .image-wrap img, .double-wrap img {
    max-height: 80px;
  }

}

@media (min-width: 768px) {
  .entrynav{
    background: transparent;
  }
  .navborder {
    display: none;
  }

  .entry-title {
    top: 0;
  }
  .entry-margin-top {
      padding-top: calc(((1em * 1.5) * 9) + 1.5rem);
  }

  .index-list {
    margin-top: calc(((1em * 1.5) * 8) + 1.5rem);
  }

  .project-title, .entry-title {
    top: 0;
  }
  .project-link {
    bottom: 0;
  }

  .slider .slick-slide, .entry-lead-image figure {
    padding-left: 8vw;
    padding-right: 8vw;
    padding-top: 110px;
    padding-bottom: 110px;
  }

  figure img {
    max-height: calc(100vh - 220px);
  }
  footer {
    padding-bottom: 3rem;
  }
}

@media (min-width: 992px) {
  .slider .slick-slide, .entry-lead-image figure {
    padding-left: 10vw;
    padding-right: 10vw;
  }

}

@media (min-width: 1280px) {

}

@media (min-width: 1400px) {

}

@media (min-width: 1600px) {

}