/*
Theme Name: Rik Buter | Portfolio
Author: Peter Dijkstra
Version: 0.0.1
*/
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

html {
  font-size: 62.5%;
  /* @include respond(phone) {
        font-size: 50%;
    }
    @include respond(tab-port) {
        font-size: 60%;
    }
    @include respond(tab-land) {
        font-size: 70%;
    }
    @include respond(big-desktop) {
        font-size: 80%;
    } */ }

body {
  box-sizing: border-box; }

.container {
  width: 90rem;
  margin: auto; }

a:link {
  text-decoration: none;
  color: #f30; }

a:visited {
  text-decoration: none;
  color: #f30; }

a:active {
  text-decoration: none;
  color: #f30; }

a:hover {
  text-decoration: underline;
  color: #f30; }

a img, a img:link, a img:visited, a img:active, a img:hover {
  text-decoration: none;
  border: 0px; }

body {
  font-family: Arial,Verdana,Helvetica,sans-serif; }

/*
@import "components/bg-video";
@import "components/button";
@import "components/card";
@import "components/composition";
@import "components/feature-box";
@import "components/form";
@import "components/popup";
@import "components/story";
*/
.background {
  position: fixed;
  top: 0;
  left: 0;
  background-image: url("./img/Void_Panorama_Mobile.png");
  background-color: #e6e6e7;
  background-repeat: no-repeat;
  width: 100vw;
  height: 100vh;
  background-attachment: fixed;
  min-height: 1100px;
  z-index: 0; }
  .background .mobile-landscape, .background .mobile-portrait, .background .desktop-landscape, .background .desktop-portrait {
    background: red;
    position: fixed;
    bottom: 0;
    left: 0;
    height: 10px;
    width: 100vw;
    display: none; }
  @media only screen and (orientation: portrait) {
    .background {
      background-size: auto 700px;
      background-position: -10px -20px; }
      .background .desktop-landscape, .background .desktop-portrait, .background .mobile-landscape {
        display: none; }
      .background .mobile-portrait {
        display: block; } }
  @media only screen and (orientation: landscape) {
    .background {
      background-size: auto 814px;
      background-position: -12px -20px; }
      .background .desktop-landscape, .background .desktop-portrait, .background .mobile-portrait {
        display: none; }
      .background .mobile-landscape {
        display: block; } }
  @media only screen and (min-width: 600px) and (orientation: portrait) {
    .background {
      background-image: url("./img/panorama_1080.png");
      background-position: -520px -20px;
      background-size: auto 1080px; }
      .background .desktop-landscape, .background .mobile-portrait, .background .mobile-landscape {
        display: none; }
      .background .desktop-portrait {
        display: block; } }
  @media only screen and (min-height: 600px) and (orientation: landscape) {
    .background {
      background-image: url("./img/panorama_1080.png");
      background-position: -520px -20px;
      background-size: auto 1080px; }
      .background .desktop-portrait, .background .mobile-portrait, .background .mobile-landscape {
        display: none; }
      .background .desktop-landscape {
        display: block; } }

.background-green {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #dde1d1;
  width: 100vw;
  height: 100vh;
  z-index: -10; }

footer {
  position: fixed;
  bottom: 1rem;
  width: 100%;
  text-align: center;
  color: #333;
  z-index: 20;
  line-height: 0; }
  footer span {
    background-color: #e1e3e2cc;
    border-radius: 2px 2px 0 0;
    padding: .4rem; }

header {
  position: fixed;
  top: 0;
  left: 0;
  padding-top: 3rem;
  width: 100%;
  position: relative;
  z-index: 10;
  /* @media only screen and (orientation: portrait){
        // mobile first
        @media only  screen and (min-width: 600px ) { // non-mobile styling
            position: relative;
        }
    }
    @media only screen and (orientation: landscape){
        // mobile first
        @media only  screen and (min-height: 600px ) { // non-mobile styling
            position: relative;
        }
    } */ }
  header .menu {
    list-style-type: none;
    position: fixed;
    transform: scale(1);
    transform-origin: 0 0; }
    @media only screen and (orientation: portrait) {
      header .menu {
        top: -20px;
        left: 62px; } }
  @media only screen and (orientation: portrait) and (min-width: 600px) {
    header .menu {
      top: -7px;
      left: 162px; } }
    @media only screen and (orientation: landscape) {
      header .menu {
        top: -20px;
        left: 62px; } }
  @media only screen and (orientation: landscape) and (min-height: 600px) {
    header .menu {
      top: -7px;
      left: 162px; } }
    header .menu .menu-item {
      cursor: pointer;
      position: fixed; }
      header .menu .menu-item#rikbuter {
        width: 75px;
        height: 31px; }
      header .menu .menu-item#tekeningen {
        width: 183px;
        height: 49px; }
      header .menu .menu-item#etsen {
        width: 98px;
        height: 37px; }
      header .menu .menu-item#diversen {
        width: 107px;
        height: 33px; }
      header .menu .menu-item#beeldverhalen {
        width: 120px;
        height: 38px; }
      @media only screen and (orientation: portrait) {
        header .menu .menu-item {
          transform-origin: 0 0; }
          header .menu .menu-item#rikbuter {
            top: 133px;
            left: 40px; }
          header .menu .menu-item#tekeningen {
            top: 49px;
            left: -38px; }
          header .menu .menu-item#etsen {
            top: 40px;
            left: 143px; }
          header .menu .menu-item#diversen {
            top: 90px;
            left: 192px; }
          header .menu .menu-item#beeldverhalen {
            top: 98px;
            left: -12px; } }
  @media only screen and (orientation: portrait) and (min-width: 600px) {
    header .menu .menu-item#rikbuter {
      top: 200px;
      left: 103px; }
    header .menu .menu-item#tekeningen {
      top: 73px;
      left: 10px; }
    header .menu .menu-item#etsen {
      top: 60px;
      left: 271px; }
    header .menu .menu-item#diversen {
      top: 132px;
      left: 338px; }
    header .menu .menu-item#beeldverhalen {
      top: 150px;
      left: 42px; } }
      @media only screen and (orientation: landscape) {
        header .menu .menu-item {
          transform-origin: 0 0; }
          header .menu .menu-item#rikbuter {
            top: 156px;
            left: 61px; }
          header .menu .menu-item#tekeningen {
            top: 61px;
            left: -25px; }
          header .menu .menu-item#etsen {
            top: 49px;
            left: 181px; }
          header .menu .menu-item#diversen {
            top: 104px;
            left: 233px; }
          header .menu .menu-item#beeldverhalen {
            top: 118px;
            left: 7px; } }
  @media only screen and (orientation: landscape) and (min-height: 600px) {
    header .menu .menu-item#rikbuter {
      top: 200px;
      left: 103px; }
    header .menu .menu-item#tekeningen {
      top: 73px;
      left: 10px; }
    header .menu .menu-item#etsen {
      top: 60px;
      left: 271px; }
    header .menu .menu-item#diversen {
      top: 132px;
      left: 338px; }
    header .menu .menu-item#beeldverhalen {
      top: 150px;
      left: 42px; } }

.back {
  color: #f30;
  cursor: pointer;
  font-size: 1.5rem;
  text-align: center;
  padding: 0 1rem 3rem 1rem;
  margin-top: 20rem; }

.back-mobile {
  font-size: 1.5rem;
  padding: 0 1rem 3rem 1rem;
  margin-top: 23px; }

.back-fixed {
  cursor: pointer;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 3rem;
  text-align: center;
  background-color: #dde1d1;
  display: none; }
  .back-fixed a {
    font-size: 1.3rem;
    line-height: 3rem; }
  @media only screen and (orientation: landscape) and (max-width: 814px) {
    .back-fixed {
      height: 2rem; }
      .back-fixed a {
        line-height: 2rem; } }

.dev-box {
  position: fixed;
  background-color: black;
  cursor: pointer;
  color: white;
  bottom: 10%;
  left: 10%;
  z-index: 100;
  font-family: 'Courier New', Courier, monospace;
  font-size: 2rem;
  padding: 8px; }
  @media only screen and (max-width: 568px) {
    .dev-box {
      font-size: 2rem;
      bottom: 1rem;
      left: 1rem;
      width: calc( 100% - 2rem); } }

.thumbs {
  z-index: 10;
  text-align: center;
  margin: 2rem; }
  .thumbs .thumb {
    cursor: pointer;
    max-height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    max-width: 100vw;
    margin: auto; }
    @media only screen and (orientation: portrait) {
      .thumbs .thumb {
        max-height: 100vh;
        max-width: 100vw;
        margin: auto; } }

.mobile-gallery {
  width: 100vw;
  text-align: center; }
  .mobile-gallery img {
    max-width: 100vw; }
  .mobile-gallery p {
    margin-bottom: 5rem;
    font-size: 1.2rem;
    padding: 0.15rem 2rem 2rem 1.2rem;
    width: 100vw;
    text-align: center;
    /* @media only screen and (orientation:landscape) and (max-width: 814px) {
            font-size: .6rem;
        } */ }

.swipe-msg {
  width: 100vw;
  text-align: center;
  font-size: 1rem;
  padding: 1rem;
  margin-top: -3rem; }

#quick-nav {
  margin: 0 auto 1rem auto;
  margin-top: -2rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between; }

.prev-nav, .next-nav {
  padding: 2rem 2rem 0.5rem 2rem;
  font-size: 1.3rem;
  position: relative; }
  @media only screen and (max-width: 600px) {
    .prev-nav, .next-nav {
      font-size: 1.5rem; } }
  @media only screen and (max-height: 600px) {
    .prev-nav, .next-nav {
      font-size: 1.5rem; } }

.item {
  text-align: center;
  width: 100vw; }
  .item::after {
    content: "";
    display: table;
    clear: both; }
  .item img {
    max-width: 100vw; }
  .item p {
    margin-bottom: 5rem;
    font-size: 1.2rem;
    padding: 2rem; }

.item-mobile {
  text-align: center;
  width: 100vw; }
  .item-mobile img {
    max-width: 100vw; }
  .item-mobile p {
    margin-bottom: 5rem;
    font-size: 1.5rem;
    padding: 1rem; }