.rowy {
  display: flex;
  flex-wrap: wrap;
}

.one{
	 width: 33.3%    !important;
  height: auto   !important;
    padding-right: 8px;
    padding-bottom: 20px;
}

.two{
	width: 33.3%    !important;
  	height: auto   !important;
    padding-bottom: 20px;
    padding-left: 5px;
    padding-right: 5px;
}

.three{
	 width: 33.3%    !important;
  height: auto   !important;
    padding-left: 8px;
    padding-bottom: 20px;
}

.mobile video {
  /* override other styles to make responsive */
  width: 100%    !important;
  height: auto   !important;
}
.mobile .rowy {
  display: flex;
  flex-wrap: wrap;
}

.mobile .one{
width: 33.3%    !important;
  height: 100%   !important;
    padding-right: 5px;
    padding-bottom: 10px;
}

.mobile .two{
	 width: 33.3%    !important;
  height: 100%   !important;
   padding-left: 2px;
    padding-right: 2px;
    padding-bottom: 10px;
}

.mobile .three{
	 width: 33.3%    !important;
  height: 100%   !important;
    padding-left: 5px;
    padding-bottom: 10px;
}


.repres:hover .project_text {
   color: white;
}

.repres:hover  img{
  -webkit-filter: grayscale(100) ;
  filter: grayscale(100) ;
}

.repres  img{
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

.repres{
  margin-top: 24px;
}

.inline-photo {
  border: 1em solid #fff;
  border-bottom: 4em solid #fff;
  border-radius: .25em;
  box-shadow: 1em 1em 2em .25em rgba(0,0,0,.2);
  margin: 2em auto;
  opacity: 0;
  transform: translateY(4em) rotateZ(0deg);
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
  opacity .3s .25s ease-out;
  max-width: 600px;
  width: 90%;
  will-change: transform, opacity;
}

.inline-photo.is-visible {
  opacity: 1;
  transform: rotateZ(0deg);
}
/* --------- fontface ----------- */
@font-face {
    font-family: 'Gotham';
    src: url('webfonts/Gotham-BoldItalic.eot');
    src: url('webfonts/Gotham-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('webfonts/Gotham-BoldItalic.woff2') format('woff2'),
        url('webfonts/Gotham-BoldItalic.woff') format('woff'),
        url('webfonts/Gotham-BoldItalic.ttf') format('truetype'),
        url('webfonts/Gotham-BoldItalic.svg#Gotham-BoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Gotham';
    src: url('webfonts/Gotham-Medium.eot');
    src: url('webfonts/Gotham-Medium.eot?#iefix') format('embedded-opentype'),
        url('webfonts/Gotham-Medium.woff2') format('woff2'),
        url('webfonts/Gotham-Medium.woff') format('woff'),
        url('webfonts/Gotham-Medium.ttf') format('truetype'),
        url('webfonts/Gotham-Medium.svg#Gotham-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham';
    src: url('webfonts/Gotham-Black.eot');
    src: url('webfonts/Gotham-Black.eot?#iefix') format('embedded-opentype'),
        url('webfonts/Gotham-Black.woff2') format('woff2'),
        url('webfonts/Gotham-Black.woff') format('woff'),
        url('webfonts/Gotham-Black.ttf') format('truetype'),
        url('webfonts/Gotham-Black.svg#Gotham-Black') format('svg');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham';
    src: url('webfonts/Gotham-Bold.eot');
    src: url('webfonts/Gotham-Bold.eot?#iefix') format('embedded-opentype'),
        url('webfonts/Gotham-Bold.woff2') format('woff2'),
        url('webfonts/Gotham-Bold.woff') format('woff'),
        url('webfonts/Gotham-Bold.ttf') format('truetype'),
        url('webfonts/Gotham-Bold.svg#Gotham-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'GothamBlack';
    src: url('webfonts/GothamBlack.eot');
    src: url('webfonts/GothamBlack.eot?#iefix') format('embedded-opentype'),
        url('webfonts/GothamBlack.woff2') format('woff2'),
        url('webfonts/GothamBlack.woff') format('woff'),
        url('webfonts/GothamBlack.ttf') format('truetype'),
        url('webfonts/GothamBlack.svg#GothamBlack') format('svg');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham';
    src: url('webfonts/Gotham-ThinItalic.eot');
    src: url('webfonts/Gotham-ThinItalic.eot?#iefix') format('embedded-opentype'),
        url('webfonts/Gotham-ThinItalic.woff2') format('woff2'),
        url('webfonts/Gotham-ThinItalic.woff') format('woff'),
        url('webfonts/Gotham-ThinItalic.ttf') format('truetype'),
        url('webfonts/Gotham-ThinItalic.svg#Gotham-ThinItalic') format('svg');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Gotham';
    src: url('webfonts/Gotham-Thin.eot');
    src: url('webfonts/Gotham-Thin.eot?#iefix') format('embedded-opentype'),
        url('webfonts/Gotham-Thin.woff2') format('woff2'),
        url('webfonts/Gotham-Thin.woff') format('woff'),
        url('webfonts/Gotham-Thin.ttf') format('truetype'),
        url('webfonts/Gotham-Thin.svg#Gotham-Thin') format('svg');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham';
    src: url('webfonts/Gotham-MediumItalic.eot');
    src: url('webfonts/Gotham-MediumItalic.eot?#iefix') format('embedded-opentype'),
        url('webfonts/Gotham-MediumItalic.woff2') format('woff2'),
        url('webfonts/Gotham-MediumItalic.woff') format('woff'),
        url('webfonts/Gotham-MediumItalic.ttf') format('truetype'),
        url('webfonts/Gotham-MediumItalic.svg#Gotham-MediumItalic') format('svg');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Gotham';
    src: url('webfonts/Gotham-LightItalic.eot');
    src: url('webfonts/Gotham-LightItalic.eot?#iefix') format('embedded-opentype'),
        url('webfonts/Gotham-LightItalic.woff2') format('woff2'),
        url('webfonts/Gotham-LightItalic.woff') format('woff'),
        url('webfonts/Gotham-LightItalic.ttf') format('truetype'),
        url('webfonts/Gotham-LightItalic.svg#Gotham-LightItalic') format('svg');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Gotham';
    src: url('webfonts/Gotham-BlackItalic.eot');
    src: url('webfonts/Gotham-BlackItalic.eot?#iefix') format('embedded-opentype'),
        url('webfonts/Gotham-BlackItalic.woff2') format('woff2'),
        url('webfonts/Gotham-BlackItalic.woff') format('woff'),
        url('webfonts/Gotham-BlackItalic.ttf') format('truetype'),
        url('webfonts/Gotham-BlackItalic.svg#Gotham-BlackItalic') format('svg');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Gotham';
    src: url('webfonts/Gotham-Book.eot');
    src: url('webfonts/Gotham-Book.eot?#iefix') format('embedded-opentype'),
        url('webfonts/Gotham-Book.woff2') format('woff2'),
        url('webfonts/Gotham-Book.woff') format('woff'),
        url('webfonts/Gotham-Book.ttf') format('truetype'),
        url('webfonts/Gotham-Book.svg#Gotham-Book') format('svg');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham';
    src: url('webfonts/Gotham-BookItalic.eot');
    src: url('webfonts/Gotham-BookItalic.eot?#iefix') format('embedded-opentype'),
        url('webfonts/Gotham-BookItalic.woff2') format('woff2'),
        url('webfonts/Gotham-BookItalic.woff') format('woff'),
        url('webfonts/Gotham-BookItalic.ttf') format('truetype'),
        url('webfonts/Gotham-BookItalic.svg#Gotham-BookItalic') format('svg');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Gotham';
    src: url('webfonts/Gotham-Light.eot');
    src: url('webfonts/Gotham-Light.eot?#iefix') format('embedded-opentype'),
        url('webfonts/Gotham-Light.woff2') format('woff2'),
        url('webfonts/Gotham-Light.woff') format('woff'),
        url('webfonts/Gotham-Light.ttf') format('truetype'),
        url('webfonts/Gotham-Light.svg#Gotham-Light') format('svg');
    font-weight: 300;
    font-style: normal;
}


@font-face {
    font-family: 'Space Grotesk';
    src: url('webfonts/SpaceGrotesk-Regular.eot');
    src: url('webfonts/SpaceGrotesk-Regular.eot?#iefix') format('embedded-opentype'),
        url('webfonts/SpaceGrotesk-Regular.woff2') format('woff2'),
        url('webfonts/SpaceGrotesk-Regular.woff') format('woff'),
        url('webfonts/SpaceGrotesk-Regular.ttf') format('truetype'),
        url('webfonts/SpaceGrotesk-Regular.svg#SpaceGrotesk-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space Grotesk';
    src: url('webfonts/SpaceGrotesk-Bold.eot');
    src: url('webfonts/SpaceGrotesk-Bold.eot?#iefix') format('embedded-opentype'),
        url('webfonts/SpaceGrotesk-Bold.woff2') format('woff2'),
        url('webfonts/SpaceGrotesk-Bold.woff') format('woff'),
        url('webfonts/SpaceGrotesk-Bold.ttf') format('truetype'),
        url('webfonts/SpaceGrotesk-Bold.svg#SpaceGrotesk-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space Grotesk';
    src: url('webfonts/SpaceGrotesk-Light.eot');
    src: url('webfonts/SpaceGrotesk-Light.eot?#iefix') format('embedded-opentype'),
        url('webfonts/SpaceGrotesk-Light.woff2') format('woff2'),
        url('webfonts/SpaceGrotesk-Light.woff') format('woff'),
        url('webfonts/SpaceGrotesk-Light.ttf') format('truetype'),
        url('webfonts/SpaceGrotesk-Light.svg#SpaceGrotesk-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space Grotesk';
    src: url('webfonts/SpaceGrotesk-SemiBold.eot');
    src: url('webfonts/SpaceGrotesk-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('webfonts/SpaceGrotesk-SemiBold.woff2') format('woff2'),
        url('webfonts/SpaceGrotesk-SemiBold.woff') format('woff'),
        url('webfonts/SpaceGrotesk-SemiBold.ttf') format('truetype'),
        url('webfonts/SpaceGrotesk-SemiBold.svg#SpaceGrotesk-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space Grotesk';
    src: url('webfonts/SpaceGrotesk-Medium.eot');
    src: url('webfonts/SpaceGrotesk-Medium.eot?#iefix') format('embedded-opentype'),
        url('webfonts/SpaceGrotesk-Medium.woff2') format('woff2'),
        url('webfonts/SpaceGrotesk-Medium.woff') format('woff'),
        url('webfonts/SpaceGrotesk-Medium.ttf') format('truetype'),
        url('webfonts/SpaceGrotesk-Medium.svg#SpaceGrotesk-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
  font-family: 'AkkuratLightLight';
  src: url('webfonts/AkkuratLightLight.eot');
  src: local('Akkurat-Light'), local('AkkuratLightLight'),
  url('webfonts/AkkuratLightLight.eot?#iefix') format('embedded-opentype'),
  url('webfonts/AkkuratLightLight.woff2') format('woff2'),
  url('webfonts/AkkuratLightLight.woff') format('woff'),
  url('webfonts/AkkuratLightLight.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'AkkuratBoldBold';
  src: url('AkkuratBoldBold.eot');
  src: local('Akkurat-Bold'), local('AkkuratBoldBold'),
  url('webfonts/AkkuratBoldBold.eot?#iefix') format('embedded-opentype'),
  url('webfonts/AkkuratBoldBold.woff2') format('woff2'),
  url('webfonts/AkkuratBoldBold.woff') format('woff'),
  url('webfonts/AkkuratBoldBold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Akkurat';
  src: url('Akkurat-BoldItalic.eot');
  src: local('Akkurat Bold Italic'), local('Akkurat-BoldItalic'),
  url('webfonts/Akkurat-BoldItalic.eot?#iefix') format('embedded-opentype'),
  url('webfonts/Akkurat-BoldItalic.woff2') format('woff2'),
  url('webfonts/Akkurat-BoldItalic.woff') format('woff'),
  url('webfonts/Akkurat-BoldItalic.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: 'AkkuratItalicItalic';
  src: url('AkkuratItalicItalic.eot');
  src: local('Akkurat-Italic'), local('AkkuratItalicItalic'),
  url('webfonts/AkkuratItalicItalic.eot?#iefix') format('embedded-opentype'),
  url('webfonts/AkkuratItalicItalic.woff2') format('woff2'),
  url('webfonts/AkkuratItalicItalic.woff') format('woff'),
  url('webfonts/AkkuratItalicItalic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Akkurat';
  src: url('Akkurat-LightItalic.eot');
  src: local('Akkurat Light Italic'), local('Akkurat-LightItalic'),
  url('webfonts/Akkurat-LightItalic.eot?#iefix') format('embedded-opentype'),
  url('webfonts/Akkurat-LightItalic.woff2') format('woff2'),
  url('webfonts/Akkurat-LightItalic.woff') format('woff'),
  url('webfonts/Akkurat-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: 'Syne';
  src: url('Syne-Bold.eot');
  src: local('Syne Bold'), local('Syne-Bold'),
  url('webfonts/Syne-Bold.eot?#iefix') format('embedded-opentype'),
  url('webfonts/Syne-Bold.woff2') format('woff2'),
  url('webfonts/Syne-Bold.woff') format('woff'),
  url('webfonts/Syne-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Syne';
  src: url('Syne-Italic.eot');
  src: local('Syne Italic'), local('Syne-Italic'),
  url('webfonts/Syne-Italic.eot?#iefix') format('embedded-opentype'),
  url('webfonts/Syne-Italic.woff2') format('woff2'),
  url('webfonts/Syne-Italic.woff') format('woff'),
  url('webfonts/Syne-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Akkurat';
  src: url('Akkurat.eot');
  src: local('Akkurat'),
  url('webfonts/Akkurat.eot?#iefix') format('embedded-opentype'),
  url('webfonts/Akkurat.woff2') format('woff2'),
  url('webfonts/Akkurat.woff') format('woff'),
  url('webfonts/Akkurat.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Syne';
  src: url('Syne-Regular.eot');
  src: local('Syne Regular'), local('Syne-Regular'),
  url('webfonts/Syne-Regular.eot?#iefix') format('embedded-opentype'),
  url('webfonts/Syne-Regular.woff2') format('woff2'),
  url('webfonts/Syne-Regular.woff') format('woff'),
  url('webfonts/Syne-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Aktiv Grotesk';
  src: local('Aktiv Grotesk Light'), local('AktivGrotesk-Light'),
  url('webfonts/AktivGrotesk-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Aktiv Grotesk';
  src: local('Aktiv Grotesk Italic'), local('AktivGrotesk-Italic'),
  url('webfonts/AktivGrotesk-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Aktiv Grotesk';
  src: local('Aktiv Grotesk Bold Italic'), local('AktivGrotesk-BoldItalic'),
  url('webfonts/AktivGrotesk-BoldItalic.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: 'Aktiv Grotesk';
  src: local('Aktiv Grotesk'), local('AktivGrotesk-Regular'),
  url('webfonts/AktivGrotesk-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Aktiv Grotesk';
  src: local('Aktiv Grotesk Light Italic'), local('AktivGrotesk-LightItalic'),
  url('webfonts/AktivGrotesk-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: 'Aktiv Grotesk';
  src: local('Aktiv Grotesk Bold'), local('AktivGrotesk-Bold'),
  url('webfonts/AktivGrotesk-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

/* --------- selection ----------- */

::selection {
  background-color: blue; /* WebKit/Blink Browsers */
  color: white;
}

::-moz-selection {
  background-color: blue; /* Gecko Browsers */
  color: white;
}

html{
  overflow-x: hidden;
  scroll-behavior: smooth;
}

a{
  text-decoration:none; 
}

body{
  background-color: #0A0A0A;
  mix-blend-mode: difference;
}



/* --------- slideshow ----------- */

.topslide {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 100vh; /* Should be removed. Only for demonstration */
}

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.mySlides {
  display: none;     
}

.prev,
.next {
  position: absolute;
  top: 65px;
  height: 75vh;
  width: 30vw;
  font-weight: bold;
  font-size: 30px;
  transition: .4s ease;
  z-index: 5;
}

.next {
  right: 0px;
  cursor: url(cursor_karlijn_14x14_white.cur), auto !important;
}

.prev {
  left: 0px;
  cursor: url(cursor_karlijn_14x14_white_left.cur), auto !important;
}

.slider_text {
  color: black;
  font-family: 'Syne';
  font-weight: normal;
  font-style: normal;
  font-size: 45px;
  margin-left: 35px;
  margin-bottom: 35px;
  line-height: 0.9;
  position: absolute;
  bottom: 0;
  text-align: left;
  text-decoration:none; 
}

.slider_text a{
 text-decoration:none; 
 color: white;
 mix-blend-mode: difference;
}

.slider_text a:hover{
 text-decoration:none; 
 color: #9e9e9e;
}

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.dotbox{
  position: absolute;
  bottom: 35px;
  right: 35px;
  mix-blend-mode: difference;
}

.dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin: 0 2px;
  border: 1.5px solid white;
  background-color: transparent;
  border-radius: 50%;
  display: inline-block;
  transition: background-color .6s ease;
}

.active, .dot:hover {
  background-color: white;
}

/* --------- slideshow images ----------- */
.EBU_img{
  background:url(images/02-EBU-Fast-Forward-2020-karlijn-den-Hoedt.jpg) center center no-repeat;
  background-color: #6a8fab;
  background-size: cover;
  height: 100vh;
  width: 100vw;
}


.rtn_img{
  background:url(images/rtn_posters2.jpg) center center no-repeat;
  background-color: #6a8fab;
  background-size: cover;
  height: 100vh;
  width: 100vw;
}

.puma_img{
  background:url(https://karlijndenhoedt.nl/images/PUMA-bodywear-studio-Karlijn-den-Hoedt-interactive-site-00.jpg) center center no-repeat;
  background-color: black;
  background-size: 90%;
  background-position: center;
  height: 100vh;
  width: 100vw;
}

.dsc_img{
  background:url(images/newvintage.jpg) center center no-repeat;
  background-size: cover;
  height: 100vh;
  width: 100vw;
}

.nsj_img{
  background:url(images/nsj_poster.jpg) center center no-repeat;
  background-size: cover;
  height: 100vh;
  width: 100vw;
}

.kiv_img{
  background:url(images/gameover.png) center center no-repeat;
  background-size: cover;
  height: 100vh;
  width: 100vw;
}

.sign_img{
  background:url(images/bord2.jpg) center center no-repeat;
  background-size: cover;
  height: 100vh;
  width: 100vw;
}

.idl_img{
  background:url(https://karlijndenhoedt.nl/images/website_inge_de_lange.jpg) center center no-repeat;
  background-size: cover;
  height: 100vh;
  width: 100vw;
}

.mg_img{
  background:url(images/turning-circles.gif) center center no-repeat;
  background-color: yellow;
  background-size: 40%;
  height: 100vh;
  width: 100vw;
}

.stt_img{
  background:url(images/stt_boekenlegger.jpg) center center no-repeat;
  background-size: cover;
  background-color: #5eafe6;
  height: 100vh;
  width: 100vw;
}

/* --------- basics ----------- */


body {
  font-family: 'Akkurat';
  font-weight: normal;
  font-style: normal;
  text-transform: normal;
  margin:0;
  padding: 0;
}

.main{
  overflow-x:hidden; 
   /* overflow-y:hidden;
   height: 100vh;*/
   width: 100vw;
   color: black;
 }

 .row {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.row3 {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
}

.top {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-transform: uppercase;
}

/* -------------------- menu --------------- */

/*.aboutbutton{
  position: fixed;
  right: 35px;
  padding: 55px 0px;
  z-index: 10;
  cursor: pointer;
  user-select: none;
  mix-blend-mode: difference;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-size: 15px;
  font-family: 'Akkurat';
  font-weight: normal;
  font-style: normal;
    text-transform:uppercase;
  mix-blend-mode: difference;
  text-align: right; 
  padding-top: 35px;  
  z-index: 6;
}

.aboutbutton a{
  text-decoration: none;
 color: white;
  mix-blend-mode: difference;
}*/


#overlay-button,  #overlay-button_white{
  position: fixed;
  right: 35px;
  padding: 55px 0px;
  z-index: 10;
  cursor: pointer;
  user-select: none;
  mix-blend-mode: difference;
/*  display: none;*/
}

#overlay-button span {
  height: 2px;
  width: 25px;
  border-radius: 1px;
  background-color: white;
  mix-blend-mode: difference;
  position: relative;
  display: block;
  transition: all .2s ease-in-out;
}

#overlay-button span:before {
  top: -6px;
  visibility: visible;
}

#overlay-button span:after {
  top: 6px;
}

#overlay-button span:before, #overlay-button span:after {
  height: 2px;
  width: 25px;
  border-radius: 1px;
  background-color: white;
  mix-blend-mode: difference;
  position: absolute;
  content: "";
  transition: all .2s ease-in-out;
}

input[type=checkbox] {
  display: none;
}

input[type=checkbox]:checked ~ #overlay {
  visibility: visible;
}

input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span {
  background: transparent;
}

input[type=checkbox]:checked ~ #overlay-button span:before {
  transform: rotate(45deg) translate(3px, 5px);
  opacity: 1;
  background-color: white;
}

input[type=checkbox]:checked ~ #overlay-button span:after {
  transform: rotate(-45deg) translate(4px, -6px);
  background-color: white;
}


/* ------------- -------- white button. ------------ ------- ----------*/

#overlay-button_white span {
  height: 3px;
  width: 25px;
  border-radius: 1px;
  background-color: white;
  position: relative;
  display: block;
  transition: all .2s ease-in-out;
}

#overlay-button_white span:before {
  top: -6px;
  visibility: visible;
}

#overlay-button_white span:after {
  top: 6px;
}

#overlay-button_white span:before, #overlay-button_white span:after {
  height: 3px;
  width: 25px;
  border-radius: 1px;
  background-color: white;
  position: absolute;
  content: "";
  transition: all .2s ease-in-out;
}

input[type=checkbox]:checked ~ #overlay-button_white:hover span, input[type=checkbox]:checked ~ #overlay-button_white span {
  background: transparent;
}

input[type=checkbox]:checked ~ #overlay-button_white span:before {
  transform: rotate(45deg) translate(3px, 5px);
  opacity: 1;
  background-color: white;
}

input[type=checkbox]:checked ~ #overlay-button_white span:after {
  transform: rotate(-45deg) translate(4px, -6px);
  background-color: white;
}

/* ------------- -------- white button end ------------ ------- ----------*/


#overlay {
  height: 100vh;
  width: 50vw;
  background: black;
  left: 50vw;
  z-index: 9;
  visibility: hidden;
  position: fixed;
  overflow: hidden !important;
}

#overlay.active {
  visibility: visible;
}

#overlay ul li a:hover {
   color: #9e9e9e;
}

.menu_contact{
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  color: white;
  line-height: 1.3;
  padding-top: 20vh;
  padding-left: 35px;
  padding-right: 35px;
  font-size: 13px;
}

.menu_contact a{
  color: white;
}

.menu_contact a:hover{
   color: #9e9e9e;
}

.menu{
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  color: white;
}

.menu_kopje{
  font-family: 'Syne';
  font-weight: 800;
  text-transform:uppercase;
  font-size: 30px;
}

.menu ul{
  list-style-type: none;
  text-align: left;
  display: flex;
  flex-direction: column;
  margin:0;
  padding:0;
}

.menu ul li a{
  text-decoration: none;
  color: white;
  font-size: 70px;
  font-family: 'Syne';
  font-weight: 800;
  text-transform:uppercase;
  line-height: 1.0;
}

.menu{
  padding-top: 20vh;
  padding-left: 35px;
  padding-right: 35px;
}

/* -------------------- HOME --------------- */

.title {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-size: 15px;
  font-family: 'Akkurat';
  font-weight: normal;
  font-style: normal;
  mix-blend-mode: difference;
  position:fixed; 
  text-align: left; 
  padding-top: 35px;  
  padding-left: 35px; 
  z-index: 1;
}

.title a{
  text-decoration: none;
 color: white;
  mix-blend-mode: difference;
}

.extra { 
    display: none;
}

.title a:hover .extra {
    display: inline-block;
    color: #9e9e9e;
}

.title a:hover {
    color: #9e9e9e;
}


/* ----------- projects ---------- */

.row2 {
  display: flex;
  padding-bottom: 24px;
  padding-top: 19px;
  padding-left: 19px;
  padding-right: 19px;
  -webkit-flex-direction: row;
  flex-direction: row;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 50%;
  max-width: 50%;
  padding: 0 15px;
  overflow: hidden;
}

.repres img {
  vertical-align: middle;
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

.repres img:hover{
 -webkit-filter: grayscale(100%);
 filter: grayscale(100%);
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}

.project_text{
  font-size: 13px;
  font-family: 'Akkurat';
  font-weight: normal;
  font-style: normal;
  padding-top: 10px;  
  text-transform:none;
  color: #9e9e9e;
  text-decoration:none; 
  /*  text-transform: uppercase;*/
}

/* ----------- footer ---------- */

.footer{
 -webkit-flex: 3;
 -ms-flex: 3;
 flex: 3;
  display: none;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 60px;
    border-top: 1px solid #000;
    background: red;
    z-index: 1;
}
}

.footer2{
 -webkit-flex: 2;
 -ms-flex: 2;
 flex: 2;
 display: none;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 60px;
    border-top: 1px solid #000;
    background: red;
    z-index: 1;
}

hr{
  border-top: 0.2px solid black;
}

.footer_icons{
  font-size: 12px;
  font-family: 'Akkurat';
  font-weight: normal;
  font-style: normal;
  padding-top: 35px;  
  padding-bottom: 35px;  
  padding-left: 35px; 
  padding-right: 35px; 
  text-transform: none;
 color: white;
  text-align: right;
}
.footer_text{
  font-size: 12px;
  font-family: 'Akkurat';
  font-weight: normal;
  font-style: normal;
  padding-top: 10px;  
  padding-bottom: 20px;  
  padding-left: 35px; 
  text-transform: none;
  color: white;
  text-align: left;
}

.footer_text a{
  color: white;
  text-decoration:none; 
}

.footer_text a:hover{
   color: #9e9e9e;
  text-decoration:none; 
}

.footer_text2{
  font-size: 12px;
  font-family: 'Akkurat';
  font-weight: normal;
  font-style: normal;
  padding-top: 10px;  
  padding-bottom: 20px;  
  padding-right: 35px; 
  text-transform: none;
  color: black;
  text-align: right;
}

.footer_text2 a{
  color: black;
  text-decoration:none; 
}

.footer_text2 a:hover{
   color: #9e9e9e;
  text-decoration:none; 
}

.footer_line{
  margin-left: 35px; 
  margin-right: 35px; 
  margin-top: 35px;
}


    /* Responsive layout - makes a two column-layout instead of four columns */
    @media (max-width: 800px) {
      .column {
        flex: 100%;
        max-width: 100%;
      }
      .title{
        padding-top: 20px;
        padding-left: 20px;
      }

      /*.aboutbutton{
      	display: none;
      }*/
      
      #overlay-button, #overlay-button_white {
        right: 20px;
        padding: 30px 0px;
       
      }
      
      .row2{
        -webkit-flex-direction: column;
        flex-direction: column;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 0px;
      }
    
      .slider_text {
        font-size: 30px;
        margin-left: 20px;
        margin-bottom: 20px;
      }
    
      .dotbox{
        display: none;
      }
    
      .mg_img {
        background-size: 80%;
      }
    
      .footer_text, .footer_text2{
        font-size: 9px;
      }
      
      .footer_text{
          padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
      }
    
    .footer_text2{
          padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 20px;
      }
    
      #overlay{
        width: 100vw;
        left: 0vw;
      }
    
      .rtn_img{
        background:url(images/rtn_posters2_mobile.jpg) center center no-repeat;
        background-color: #6a8fab;
        background-size: cover;
        height: 100vh;
        width: 100vw;
      }
      
       .puma_img{
        background:url(images/PUMA-bodywear-studio-Karlijn-den-Hoedt-interactive-site-01.jpg) center center no-repeat;
        background-color: #6a8fab;
        background-size: cover;
        height: 100vh;
        width: 100vw;
      }
      
      .dsc_img{
        background:url(images/newvintage_mobile.jpg) center center no-repeat;
        background-size: cover;
        height: 100vh;
        width: 100vw;
      }
    
      .nsj_img{
        background:url(images/nsj_poster_mobile.jpg) center center no-repeat;
        background-size: cover;
        height: 100vh;
        width: 100vw;
      }
    
      .kiv_img{
        background:url(images/gameover.png) center center no-repeat;
        background-size: cover;
        height: 100vh;
        width: 100vw;
      }
    
      .sign_img{
        background:url(images/bord2_mobile.jpg) center center no-repeat;
        background-size: cover;
        height: 100vh;
        width: 100vw;
        background-position: 34% 37%;
      }
    
      .idl_img{
        background:url(images/website_inge_de_lange_mobile.jpg) center center no-repeat;
        background-size: cover;
        height: 100vh;
        width: 100vw;
      }
    
      .mg_img{
        background:url(images/turning-circles.gif) center center no-repeat;
        background-color: yellow;
        background-size: 40%;
        height: 100vh;
        width: 100vw;
      }
    
      .stt_img{
      background:url(images/stt_boekenlegger.jpg) center center no-repeat;
      background-size: cover;
      height: 100vh;
      width: 100vw;
    }

}