* {
    box-sizing: border-box;
  }

html, body {
  margin:0;
  height:100%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* type */

@font-face { font-family: IBMPlexMono-Regular; src: url('https://cdn.glitch.global/9f9b2020-1635-4cf1-9112-3a6a537aea16/IBMPlexMono-Regular.otf?v=1654456744290'); }
@font-face { font-family: IBMPlexMono-Light; src: url('https://cdn.glitch.global/9f9b2020-1635-4cf1-9112-3a6a537aea16/IBMPlexMono-Light.otf?v=1654456744245'); }
@font-face { font-family: IBMPlexMono-Medium; src: url('https://cdn.glitch.global/9f9b2020-1635-4cf1-9112-3a6a537aea16/IBMPlexMono-Medium.otf?v=1656092961535'); }
@font-face { font-family: IBMPlexSans-Medium; src: url('https://cdn.glitch.global/9f9b2020-1635-4cf1-9112-3a6a537aea16/IBMPlexSans-Medium.otf?v=1655906528367'); }
@font-face { font-family: Brando Regular; src: url('https://cdn.glitch.com/0d4e30fd-0d14-497b-9ec1-52b120582450%2FBrando%20Regular.otf?v=1606062706433'); }
@font-face { font-family: Brando Italic; src: url('https://cdn.glitch.com/a1c57b31-977a-496a-9d49-d85aa17fb81e%2FBrando-Italic.otf?v=1611250782843'); }
@font-face { font-family: Brando SemiBold; src: url('https://cdn.glitch.com/b2d11f0f-662a-48f6-910e-f1ebf9a17419%2FBrando-SemiBold.otf?v=1609786316395'); }
@font-face { font-family: Brando SemiBoldItalic; src: url('https://cdn.glitch.global/9f9b2020-1635-4cf1-9112-3a6a537aea16/Brando%20SemiBoldItalic.otf?v=1673650971773'); }
@font-face { font-family: Brando ExtraLight; src: url('https://cdn.glitch.com/0d4e30fd-0d14-497b-9ec1-52b120582450%2FBrando%20ExtraLight.woff?v=1606231963558'); }
@font-face { font-family: Brando ExtraLightItalic; src: url('https://cdn.glitch.com/a1c57b31-977a-496a-9d49-d85aa17fb81e%2FBrando-ExtraLightItalic.otf?v=1610731016840'); }
@font-face { font-family: Brando Sans Regular; src: url('https://cdn.glitch.global/9f9b2020-1635-4cf1-9112-3a6a537aea16/BrandoSans-Regular.otf?v=1656102430899'); }
@font-face { font-family: Brando Sans SemiBold; src: url('https://cdn.glitch.global/9f9b2020-1635-4cf1-9112-3a6a537aea16/Brando%20Sans%20SemiBold.otf?v=1654456250306'); }
@font-face { font-family: Brando Black; src: url('https://cdn.glitch.global/9f9b2020-1635-4cf1-9112-3a6a537aea16/Brando%20Black.otf?v=1672952733396'); }

h1 {
  font-family: Brando Regular, serif;
  font-size: 2.8em;
  text-align: center;
  color: #000000;
  line-height: 1.2;
}

h2 {
  font-family: Brando SemiBold, sans-serif;
  font-size: 2.1em;
  text-align: left;
  color: #000000;
  line-height: 1.2em;
  margin-top: 2.1em;
  margin-bottom: 0.5em;
}

h3 {
  font-family: Brando SemiBold, sans-serif;
  font-size: 1.4em;
  text-align: left;
  color: #000000;
  line-height: 1.2em;
  margin-top: 2.1em;
  margin-bottom: 0.5em;
}
  
p {
  font-family: Brando Regular, serif;
  font-size: 16px; 
  color: #000000;
}

.section-title {
  font-family: IBMPlexMono-Light, sans-serif;
  font-size: 1.2em; 
  color: #000000;
}

.textlink:link {
  color: white;
  text-decoration: none;
}

.textlink:visited {
  color: white;
  text-decoration: none;
}

.textlink:hover {
  color: white;
  opacity: 0.5;
  text-decoration: none;
}

.textlink:active {
  color: white;
  text-decoration: none;
}

/* imagery */

img { 
  float: left;
  max-width: 100%;
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}

video { 
  float: left;
  max-width: 100%;
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}

/* nav */

.logo {
  margin-left: 8.33%;
  float: left;
  position: relative;
  z-index: 100;
  font-family: IBMPlexMono-Medium, sans-serif;
  word-spacing: -0.25em;
  font-weight: 550;
  font-size: 1.2em;
  color: #000000;
  padding: 20px 0;
}
  
@media (max-width: 600px) {
  .logo {
   margin-right: 8.33%;
   float: left;
   font-family: IBMPlexMono-Light, sans-serif;
   font-size: 1.5em;
  }
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
.logo {
   width: 24.8%;
   margin-left: 8.3%;
  }
}

.logo a{
  color: #000000;
  text-decoration: none;
  }

.menu {
  margin-right: 8.33%;
  float: right;
  position: relative;
  z-index: 100;
  font-family: IBMPlexMono-Light, sans-serif;
  font-weight: light;
  font-size: 1.2em;
  color: #000000;
  padding: 20px 0;
}

@media (max-width: 600px) {
  .menu {
   margin-right: 8.33%;
   float: right;
   padding: 28px 0;
   width: 3.0%;
  }
}
    
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
.menu {
   margin-right: 8.33%;
   float: right;
   
  }
} 

.menu a{
  color: #000000;
  text-decoration: none;
  }

.logo-white {
  margin-left: 8.33%;
  float: left;
  position: relative;
  z-index: 100;
  font-family: IBMPlexMono-Medium, sans-serif;
  word-spacing: -0.25em;
  font-weight: 550;
  font-size: 1.2em;
  color: #FFFFFF;
  padding: 20px 0;
}
  
@media (max-width: 600px) {
  .logo-white {
   margin-right: 8.33%;
   float: left;
   font-family: IBMPlexMono-Light, sans-serif;
   font-size: 1.5em;
  }
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
.logo-white {
   width: 24.8%;
   margin-left: 8.3%;
  }
}

.logo-white a{
  color: #FFFFFF;
  text-decoration: none;
  }

.menu-white {
  margin-right: 8.33%;
  float: right;
  position: relative;
  z-index: 100;
  font-family: IBMPlexMono-Light, sans-serif;
  font-weight: light;
  font-size: 1.2em;
  color: #FFFFFF;
  padding: 20px 0;
}

@media (max-width: 600px) {
  .menu-white {
   margin-right: 8.33%;
   float: right;
   padding: 28px 0;
   width: 3.0%;
  }
}
    
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
.menu-white {
   margin-right: 8.33%;
   float: right;
  }
} 

.menu-white a{
  color: #FFFFFF;
  text-decoration: none;
  }

.nav-wide{
   z-index:100;
}

.nav-small{
   display: none;
}

@media only screen and (max-width: 600px){           
   .nav-wide{
     display: none;
   }

   .nav-small{
     display: block;
     z-index:100;
   }
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .nav-small{
     display: none;
   }

  .nav-wide{
     display: block;
   }
}

.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 1);
  overflow-y: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  width: 100%;
  text-align: center;
  margin-top: 0px;
}

.overlay a {
  padding: 0px;
  text-decoration:none;
  font-size: 4em;
  font-family: IBMPlexMono-Light, sans-serif;
  line-height: 1.5em;
  color: #E1DEDB;
  display: block;
  transition: 0.3s;
}
    
.language {
  padding: 0px;
  text-decoration:none;
  font-size: 2em;
  font-family: IBMPlexMono-Light, sans-serif;
  line-height: 2em;
  color: #E1DEDB;
  display: block;
  transition: 0.3s;
}

.language:hover {
  opacity: 0.5;
}
    
@media (max-width: 600px) {
  .overlay a {
  padding: 0px;
  text-decoration:none;
  font-size: 2.5em;
  font-family: IBMPlexMono-Light, sans-serif;
  color: #E1DEDB;
  display: block;
  transition: 0.3s;
  }
}
    
.overlay a:hover, .overlay a:focus {
  color: #ffffff;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}
    
.animatie {
  position: relative;
  background: #000000;
  animation-name: language;
  animation-duration: 3s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

@keyframes language {
  0%   {top:500px;}
  100% {top:0px;}
}
    
.menu1{
  animation-name: fadein;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
  
.menu2{
  animation-name: fadein;
  animation-duration: 3s;
  animation-delay: 2.5s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
    
.menu3{
  animation-name: fadein;
  animation-duration: 3s;
  animation-delay: 3s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

.menu1:hover {
  text-decoration: underline;
}

.menu2:hover {
  text-decoration: underline;
}
  
.menu3:hover {
  text-decoration: underline;
}
    
@keyframes fadein {
  0%   {color:#E1DEDB;}
  100% {color:#000000;}
}
    
.overlaylogo {
  margin-left: 8.3%;
  float: left;
  font-family: IBMPlexMono-Light, sans-serif;
  word-spacing: -0.25em;
  font-weight: light;
  color: #FFFFFF;
  font-size: 1.5em;
  padding: 20px 0;
}
   
@media (max-width: 600px) {
  .overlaylogo {
   margin-left: 8.3%;
  }
}
    
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .overlaylogo {
   width: 24.9%;
   margin-left: 8.3%;
  } 
}
    
.close {
  margin-right: 8.3%;
  float: right;
  width: 3.4%;
  padding: 28px 0;
}
  
@media (max-width: 600px) {
  .close {
    margin-right: 8.33%;
    float: right;
  }
}
    
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .close {
   margin-right: 8.33%;
   float: right;
   width: 4.2%;
  }
} 

.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: #000000;
}

.hover-underline-animation:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1.5px;
  bottom: 0;
  left: 0;
  background-color: #000000;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.selected-underline {
  text-decoration: underline;
  text-underline-position: under;
  text-underline-offset: -2.5px;
  text-decoration-thickness: 1.5px;
  color: #000000;
}

.hover-underline-animation-white {
  display: inline-block;
  position: relative;
  color: #FFFFFF;
}

.hover-underline-animation-white:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1.5px;
  bottom: 0;
  left: 0;
  background-color: #FFFFFF;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.hover-underline-animation-white:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.selected-underline-white {
  text-decoration: underline;
  text-underline-position: under;
  text-underline-offset: -2.5px;
  text-decoration-thickness: 1.5px;
  color: #FFFFFF;
}

/* stage */

@media only screen and (min-width: 992px) {
.mobile-image {
display:none;
}
.desktop-image {
display:block;
}
}
/* show mobile hide desktop */
@media only screen and (max-width: 991px) {
.mobile-image {
display:block;
}
.desktop-image {
display:none;
}
}


#video-desktop {display: block;}
#video-mobile {display: none;}

@media screen and (max-width: 991px) {

#video-desktop {display: none;}
#video-mobile {display: block;}

}

#stage {
    border: 0px solid green;
  }

  #stage a {
    position: absolute;
  }

  #stage a img {
    width:100vw;
    height:100vh;
    box-sizing:border-box;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center center;
    border: 0px solid red;
  }

  #stage a video {
    width:100vw;
    height:100vh;
    object-fit:cover;
    box-sizing:border-box;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center center;
    border: 0px solid yellow;
  }

  #stage a::after {
    position: absolute;
    bottom: 2%;
    left: 0;
    transform: translateY(-50%);
    width: 83.4%;
    margin-left: 8.3%;
    margin-right: 8.3%;
    text-align: left;
    content: attr(title);
    font-family: Brando SemiBold, serif;
    font-weight: medium;
    font-size: 1.2em;
    color: #FFFFFF;
  }

  #stage a:nth-of-type(1) {
    animation-name: fader;
    animation-delay: 4s;
    animation-duration: 1s;
    z-index: 20;
  }
  #stage a:nth-of-type(2) {
    z-index: 10;
  }
  #stage a:nth-of-type(n+3) {
    display: none;
  }

  @keyframes fader {
    from { opacity: 1.0; }
    to   { opacity: 0.0; }
  }

.stage-margin {
    position:relative; width:83.3%; margin-left:8.3%; height:100vh;
  }

@media (max-width: 600px) {
  
 #stage {
    border: 0px solid green;
  }

  #stage a {
    position: absolute;
  }

  #stage a img {
    width:100vw;
    height:85vh;
    object-fit:cover;
    box-sizing:border-box;
    background-size:contain;
    background-repeat:no-repeat;
    background-position: center center;
  }

  #stage a video {
    width:100vw;
    height:85vh;
    object-fit:cover;
    box-sizing:border-box;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center center;
  }

  #stage a::after {
    position: absolute;
    bottom: 2%;
    left: 0;
    transform: translateY(-50%);
    width: 83.4%;
    text-align: left;
    margin-left: 8.3%;
    margin-right: 8.3%;
    content: attr(title);
    font-family: Brando SemiBold, serif;
    font-weight: medium;
    font-size: 1.2em;
    line-height: 1.2;
    color: #FFFFFF;
  } 
  
.stage-margin{
    position:relative; width:83.3%; margin-left:8.3%; height:75vh;
  }
  
}

/* cv */

.cv-mobilelandscape{
   display: none;
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .cv-wideandsmall{
     display: none;
   }

  .cv-mobilelandscape{
     display: block;
   }
}

.cv-column01 {
  float: left;
  width: 19.98%;
  padding: 0px;
  border: 0px solid red;
  height: 100%;
}

.cv-column02 {
  float: left;
  width: 19.98%;
  padding: 0px;
  border: 0px solid red;
  margin-top:110px;
}

.cv-column03 {
  float: left;
  width: 19.98%;
  padding: 0px;
  border: 0px solid red;
  height: ;
  margin-top:80px;
}

.cv-column-jump {
  float: left;
  width: 19.98%;
  padding: 0px;
  height: 100%;
  margin-top: 18vh;
}
  
@media (max-width: 600px) {
  .cv-column01 {
  float: left;
  width: 100%;
  padding: 0px;
  height: 100%;
  }
}

@media (max-width: 600px) {
  .cv-column02 {
  float: left;
  width: 100%;
  padding: 0px;
  margin-top: -15px;
  }
}

@media (max-width: 600px) {
  .cv-column03 {
  float: left;
  width: 100%;
  padding: 0px;
  margin-top: -32px;
  }
}

@media (max-width: 600px) {
  .cv-column-jump {
  float: left;
  width: 100%;
  padding: 0px;
  margin-top: 0;
  margin-bottom: 25px;
  }
}

.divider {
  width:1px;
  height:80vh;
  background-color:#929292;
  float:left;
  position: absolute;
}
  
@media (max-width: 600px) {
  .divider {
  display: none;
  }
}

.column-A { background: ; }
.column-B { background: ; }
.column-C { background: ; }
.column-D { background: ; }
.column-E { background: ; }

@media screen and (max-width: 600px) {
    .container { display: flex; flex-flow: column; }
    .column-A { order: 3; }
    .column-B { order: 4; }
    .column-C { order: 1; }
    .column-D { order: 2; }
    .column-E { order: 5; }
}

.container {
    padding: 0px;
}

.container div {
    display: inline-block;
    height: 100%;
}

.about-intro {
  font-family:Brando Regular,serif;
  font-size:32px;
  width:42%;
  margin:auto;
  margin-top: 50px;
  text-align:center
}

@media (max-width: 600px) {
  .about-intro {
  font-family:Brando Regular,serif;
  font-size:24px;
  width:100%;
  margin:auto;
  margin-top:50px;
  text-align:center
  }
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .about-intro {
  font-family:Brando Regular,serif;
  font-size:24px;
  width:80%;
  margin:auto;
  margin-top:50px;
  text-align:center;
  } 
}

.about-title-line1 {
  font-family:Brando ExtraLight,serif;
  font-size:128px;
  line-height:90%;
  width:53%;
  text-align:left;
  margin:auto;
  margin-top:100px;
  border:0px solid red;
}

.about-title-line2 {
  font-family:Brando ExtraLight,serif;
  font-size:128px;
  line-height:90%;
  width:53%;
  text-align:right;
  margin:auto;
  margin-top:-15px;
  border:0px solid red;
}

@media (max-width: 600px) {
  .about-title-line1 {
  font-family:Brando ExtraLight,serif;
  font-size:64px;
  line-height:90%;
  width:100%;
  text-align:left;
  margin:auto;
  margin-top:50px;
  }
}

@media (max-width: 600px) {
  .about-title-line2 {
  font-family:Brando ExtraLight,serif;
  font-size:64px;
  line-height:90%;
  width:100%;
  text-align:right;
  margin-top:0px;
  margin:auto;
  margin-top:0px;
  }
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) {
  .about-title-line1 {
  font-family:Brando ExtraLight,serif;
  font-size:96px;
  line-height:90%;
  width:80%;
  text-align:left;
  margin:auto;
  margin-top:50px;
  }
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) {
  .about-title-line2 {
  font-family:Brando ExtraLight,serif;
  font-size:96px;
  line-height:90%;
  width:80%;
  text-align:right;
  margin-top:0px;
  margin:auto;
  }
}

/* clients */

.client-logo {
  float: left;
  width: 25%;
  padding: 25px;
}

.client-text {
  float: left;
  width: 100%;
  padding: 0px;
}

@media (max-width: 600px) {
  .client-text {
  float: left;
  width: 100%;
  padding: 15px; 
  background: #FFFFFF;
  }
}

@media (max-width: 600px) {
  .client-logo {
  float: left;
  width: 100%;
  padding: 0px;
  background: #FFFFFF;
  }
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) {
  .client-text {
  float: left;
  width: 100%;
  padding: 15px; 
  background-color: #FFFFFF;
  }
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) {
  .client-logo {
  float: left;
  width: 50%;
  padding: 0px;
  background: #FFFFFF;
  }
}

.credits {
  font-family: Brando Regular, serif;
  font-size: 1em; 
  color: #000000;
  text-align: justify;
  text-justify: inter-word;
  font‐weight: normal;
  font‐style: normal;
}

.credits-small{
   display: none;
}

@media only screen and (max-width: 500px){           
   .credits-wide{
     display: none;
   }

   .credits-small{
     display: block;
   }
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .credits-wide{
     display: none;
   }

  .credits-small{
     display: block;
   }
}

/* services */

.services-small{
   display: none;
}

@media only screen and (max-width: 500px){           
   .services-wide{
     display: none;
   }

   .services-small{
     display: block;
   }
}

.services-mobilelandscape{
   display: none;
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .services-wide{
     display: none;
   }

  .services-mobilelandscape{
     display: block;
   }
}

.services01 {
  float: left;
  background-color: rgba(94,69,88,0.75);
  width: 48.25%;
  height: 60vh;
  padding: 25px;
}

@media (max-width: 600px) {
  .services01 {
  float: left;
  background-color: rgba(94,69,88,0.75);
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  height: 100%;
  padding: 25px;
  }
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) {
.services01 {
  float: left;
  background-color: rgba(94,69,88,0.75);
  width: 48.25%;
  height: 105vh;
  padding: 25px;
  }
}

.services02 {
  float: left;
  background-color: rgba(178,193,182,0.75);
  width: 48.25%;
  height: 60vh;
  padding: 25px;
  margin-top:20vh;
}

@media (max-width: 600px) {
  .services02 {
  float: left;
  background-color: rgba(178,193,182,0.75);
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 10%;
  height: 100%;
  padding: 25px;
  }
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) {
.services02 {
  float: left;
  background-color: rgba(178,193,182,0.75);
  width: 48.25%;
  height: 105vh;
  padding: 25px;
  margin-top:20vh;
  }
}

.services-gutter {
  width:3.5%;
  height:80vh;
  float:left;
}

@media (max-width: 600px) {
  .services-gutter {
  display:none;
  }
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) {
  .services-gutter {
  width:3.5%;
  height:80vh;
  float:left;
  }
}

.services-container {
  margin-left: auto;
  margin-right: auto;
  width:50%;
  height:100%;
}

@media (max-width: 600px) {
  .services-container {
  width:100%;
  height:100%;
  }
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) {
  .services-container {
  width:90%;
  height:100%;
  }
}

.services-title{
  font-family:Brando ExtraLight,serif;
  font-size:3.25vw;
  line-height:1.0;
  color: #E4DDD3;
}

.services-list{
  font-family:Brando Regular,serif;
  font-size:24px;
  color: #E4DDD3;
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) {
.services-title{
  font-family:Brando ExtraLight,serif;
  font-size:42px;
  line-height:1.0;
  color: #E4DDD3;
    }
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) {
.services-list{
  font-family:Brando Regular,serif;
  font-size:20px;
  color: #E4DDD3;
    }
}

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-container>div {
  width: 65%;
} 

ul.no-bullets {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-family:Brando Regular,serif;
  font-size:1.4vw;
  line-height: 1.2;
  color:#E4DDD3;
}

@media (max-width: 600px) {
  ul.no-bullets {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-family:Brando Regular,serif;
  font-size:20px;
  line-height: 1.2;
  color:#E4DDD3;
}
}

ul li { padding: 5px 0px; }

.button {
  background-color: #929292;
  border: 1px solid;
  border-color: #E4DDD3;
  opacity: 1.0;
  padding: 15px 15px;
  width: 180px;
  font-family: Brando ExtraLight;
  text-decoration: none;
  display: inline-block;
  font-size: 24px;
  cursor: pointer;
  margin: 20px;
  transition: border 0.5s;
}

.active, .button:hover {
  border: 1px solid transparent;
  color: black;
}

.active, .next:hover {
  border: 1px solid transparent;
  color: black;
}

.active, .previous:hover {
  border: 1px solid transparent;
  color: black;
}

/* studio */

.logo-horizontal {
  padding:65px 0;
  object-fit: contain;
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
.logo-horizontal {
   padding:20px 0;
  }
}

.logo-square{
   display: none;
}

@media only screen and (max-width: 500px){           
   .logo-horizontal{
     display: none;
   }

   .logo-square{
     display: block;
   }
}

.logo-sP {
  margin-left: 8.33%;
  width: 8.26%;
  float: left;
}
  
@media (max-width: 600px) {
  .logo-sP {
   width: 39.4%;
   margin-left: 8.3%;
  }
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
.logo-sP {
   width: 24.8%;
   margin-left: 8.3%;
  }
}

/* footer */

.footer-column {
  float: left;
  width: 25%;
  padding: 0px;
  height: 100%;
  margin-top: 25px;
}
  
@media (max-width: 600px) {
  .footer-column {
  float: left;
  width: 100%;
  padding: 0px;
  margin-top: 0;
  margin-bottom: 25px;
  }
}
  
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .footer-column {
  float: left;
  width: 50%;
  padding: 0px;
  margin-top: 0px;
  }
}
  
.footer-doublecolumn {
  float: left;
  width: 50%;
  padding: 0px;
  height: 100%;
  margin-top: 25px;
}
  
@media (max-width: 600px) {
  .footer-doublecolumn {
  float: left;
  width: 100%;
  padding: 0px;
  margin-top: 0;
  margin-bottom: 25px;
  }
}
  
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .footer-doublecolumn {
  float: left;
  width: 50%;
  padding: 0px;
  margin-top: 0;
  }
}

.footer-mobilelandscape{
   display: none;
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .footer-wideandsmall{
     display: none;
   }

  .footer-mobilelandscape{
     display: block;
   }
}

/* cases */

.titel {
  margin-left: 8.33%;
  margin-right: 1.5%;
  width: 40.9%;
  height: 75vh;
  float: left;
  padding: 25px;
  border: 1px solid grey;
}
  
@media (max-width: 600px) {
  .titel {
    width: 83.33%;
    height: 75vh;
    font-size: 0.7em;
    text-align: center;
    padding: 0px;
  }
}
    
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .titel {
    width: 40%;
    margin-right: 3.4%;
    height: 100vh;
    font-size: 0.7em;
    text-align: center;
    padding: 10px;
  }
}
  
.quote {
  margin-left:8.3%;
  width: 83.3%;
  height: 75vh;
  float: left;
  background-color: #E1DEDB;
}
  
.statement {
  font-family: Brando ExtraLight, serif;
  font-size: 2.8em; 
  color: #000000;
  font‐weight: Light;
  font‐style: normal;
  padding: 10%;
}
  
@media (max-width: 600px) {
  .statement {
    font-size: 1.6em;
  }
} 
    
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .statement {
    font-size: 1.4em;
  }
}
  
.bijschrift {
  font-family: Brando Regular, serif;
  font-size: 1.2em; 
  color: #ffffff;
  font‐weight: normal;
  font‐style: normal;
  padding: 10%;
}
  
@media (max-width: 600px) {
  .bijschrift {
   font-size: 1em;
   padding: 25px;
  }
} 
    
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .bijschrift {
   font-size: 1em;
   padding: 25px;
  }
}

.onderschrift {
  font-family: Brando Regular, serif;
  font-size: 1.2em; 
  color: #ffffff;
  font‐weight: normal;
  font‐style: normal;
  padding: 10%;
}
  
@media (max-width: 600px) {
  .onderschrift {
   font-size: 1em;
   padding: 25px;
  }
} 
    
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .onderschrift {
   font-size: 0.6em;
   padding: 25px;
  }
}

.afbeelding {
  width: 40.9%;
  height: 75vh;
  float: left;
  padding: 0px; 
}
  
@media (max-width: 600px) {
  .afbeelding {
   width: 83.33%;
   height: 37vh;
   margin-left: 8.3%;
   margin-top: 8.3%;
   display:none;
  }
}
    
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .afbeelding {
   width: 40%;
   height: 100vh;
  }
}

.video {
  width: 100%;
  height: 75vh;
  padding: 0px; 
}
  
@media (max-width: 600px) {
  .video {
   width: 100%;
  height: 23vh;
  }
}
    
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .video {
   width: 100%;
   height: 75vh;
  }
}

.container1 {
   height: 37vh;
   position: relative; }
.container1 h1 {
   margin: 0;
  padding: 15px;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-right: -50%;
   transform: translate(-50%, -50%)
}
  
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .container1 {
   height: 50vh;
   position: relative; }
  .container1 h1 {
   margin: 0;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-right: -50%;
   transform: translate(-50%, -50%)
  }
}
  
.container2 {
   height: 38vh;
   position: relative; }
.container2 p {
   margin: 0;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-right: -50%;
   transform: translate(-50%, -50%)
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .container2 {
   height: 50vh;
   position: relative; }
  .container2 h1 {
   margin: 0;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-right: -50%;
   transform: translate(-50%, -50%)
  }
}
  
.container3 {
   height: 75vh;
   position: relative; }
.container3 p {
   margin: 0;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-right: -50%;
   transform: translate(-50%, -50%)
}
  
div.container4 {
   height: 38vh;
   position: relative; }
div.container4 p {
   margin: 0;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-right: -50%;
   transform: translate(-50%, -50%)
}
  
@media (max-width: 600px) {
  div.container4 {
  margin-top: 0px;
  }
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  div.container4 {
  margin-top: 0px; 
  }
}
  
div.container5 {
   height: 38vh;
   position: relative; }
div.container5 p {
   margin: 0;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-right: -50%;
   transform: translate(-50%, -50%)
}
  
@media (max-width: 600px) {
  div.container5 {
  margin-top: 65px;
  }
}

.column {
  float: left;
  width: 49.1%;
  padding: 0px;
  height: 36vh;
}
  
@media (max-width: 600px) {
  .column {
  float: left;
  width: 100%;
  padding: 0px;
  height: 23vh;
  }
}
  
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .column {
  float: left;
  width: 100%;
  padding: 0px;
  height: 75vh; 
  }
}

.gutter {
  float: left;
  width: 1.8%;
  padding: 0px;
  height: 36vh;
}
  
@media (max-width: 600px) {
  .gutter {
  float: left;
  padding: 0px;
  height: 25px;
  }
}
  
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .gutter {
  float: left;
  padding: 0px;
  height: 25px;  
  }
}

.twocolumn1 {
  float: left;
  width: 27.77%;
  margin-left:8.3%;
  height: 75vh;
}
   
@media (max-width: 600px) {
  .twocolumn1 {
  width: 83.33%;
  height: 37vh;
  margin-left: 8.3%;
  }
}
    
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .twocolumn1 {
  width: 41.66%;
  height: 75vh;  
  }
}
  
.twocolumn2 {
  float: left;
  width: 55.55%;
  height: 75vh;       
}
  
@media (max-width: 600px) {
  .twocolumn2 {
  width: 83.33%;
  height: 37vh;
  margin-left: 8.3%;
  }
}
    
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .twocolumn2 {
  width: 41.66%;
  height: 75vh;  
  }
}

.twocolumn1-5 {
  float: left;
  width: 16.67%;
  margin-left:8.3%;
  height: 75vh;
}
   
@media (max-width: 600px) {
  .twocolumn1-5 {
  width: 83.33%;
  height: 37vh;
  margin-left: 8.3%;  
  }
}
    
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .twocolumn1-5 {
  width: 41.66%;
  height: 50vh;  
  }
}
  
.twocolumn2-5 {
  float: left;
  width: 66.67%;
  height: 75vh;       
}
  
@media (max-width: 600px) {
  .twocolumn2-5 {
  width: 83.33%;
  height: 27vh;
  margin-left: 8.3%;
  }
}
    
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .twocolumn2-5 {
  width: 41.66%;
  height: 50vh;  
  }
}

.twocolumn4-5 {
  float: left;
  width: 16.67%;
  height: 75vh;
}
   
@media (max-width: 600px) {
  .twocolumn4-5 {
  width: 83.33%;
  height: 37vh;
  margin-left: 8.3%;  
  }
}
    
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .twocolumn4-5 {
  width: 41.66%;
  height: 50vh;  
  }
}
  
.twocolumn3-5 {
  float: left;
  width: 66.67%;
  margin-left:8.3%;
  height: 75vh;       
}
  
@media (max-width: 600px) {
  .twocolumn3-5 {
  width: 83.33%;
  height: 27vh;
  margin-left: 8.3%;
  }
}
    
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .twocolumn3-5 {
  width: 41.66%;
  height: 50vh;  
  }
}
  
.twocolumn3 {
  float: right;
  width: 27.77%;
  margin-right:8.3%;
  height: 75vh;
  background-color:#5AC56B;
}
  
@media (max-width: 600px) {
  .twocolumn3 {
  width: 83.33%;
  height: 37vh;
  margin-left: 8.3%;  
  }
}
    
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .twocolumn3 {
  width: 41.66%;
  height: 75vh;  
  }
}
  
.twocolumn4 {
  float: left;
  width: 55.63%;
  margin-left: 8.3%;
  height: 75vh;       
}
  
@media (max-width: 600px) {
  .twocolumn4 {
  width: 83.33%;
  height: 37vh;
  margin-left: 8.3%;
  }
}
    
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .twocolumn4 {
  width: 41.74%;
  height: 75vh;  
  }
}

.twocolumn11 {
  float: left;
  width: 27.77%;
  margin-left:8.3%;
  height: 75vh;
  display:flex;
  justify-content:center;
  align-items:center;
  height:75vh;
}
   
@media (max-width: 600px) {
  .twocolumn11 {
  width: 83.33%;
  height: 37vh;
  margin-left: 8.3%;  
  }
}
    
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .twocolumn11 {
  width: 41.66%;
  height: 75vh;  
  }
}
  
.twocolumn22 {
  float: left;
  width: 55.55%;
  height: 75vh;
  display:flex;
  justify-content:center;
  align-items:center;
}
  
@media (max-width: 600px) {
  .twocolumn22 {
  width: 83.33%;
  height: 37vh;
  margin-left: 8.3%;
  }
}
    
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .twocolumn22 {
  width: 41.66%;
  height: 75vh;  
  }
}
  
.twocolumn33 {
  float: right;
  width: 27.77%;
  margin-right:8.3%;
  height: 75vh;
  display:flex;
  justify-content:center;
  align-items:center;
  height:75vh;
}
  
@media (max-width: 600px) {
  .twocolumn33 {
  width: 83.33%;
  height: 37vh;
  margin-left: 8.3%;
  border-top: 0.5px solid white;
  }
}
    
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .twocolumn33 {
  width: 41.66%;
  height: 75vh;  
  }
}
  
.twocolumn44 {
  float: left;
  width: 55.63%;
  margin-left: 8.3%;
  height: 75vh;
  display:flex;
  justify-content:center;
  align-items:center;
  height:75vh;
}
  
@media (max-width: 600px) {
  .twocolumn44 {
  width: 83.33%;
  height: 37vh;
  margin-left: 8.3%;
  border-bottom: 0.5px solid white;
  }
}
    
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .twocolumn44 {
  width: 41.74%;
  height: 75vh;  
  }
}
  
.twocolumn3-gutter {
  float: right;
  width: 26.77%;
  margin-right:8.3%;
  height: 36.25vh;
  background-color:#FFFFFF;
}
  
@media (max-width: 600px) {
  .twocolumn3-gutter {
  width: 83.33%;
  height: 37vh;
  margin-left: 8.3%;  
  }
}
    
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .twocolumn3-gutter {
  width: 41.66%;
  height: 75vh;  
  }
}
  
.twocolumn4-gutter {
  float: left;
  width: 55.06%;
  margin-left: 8.3%;
  height: 75vh;       
}
  
@media (max-width: 600px) {
  .twocolumn4-gutter {
  width: 83.33%;
  height: 37vh;
  margin-left: 8.3%;
  }
}
    
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .twocolumn4-gutter {
  width: 41.74%;
  height: 75vh;  
  }
}

.screendesign3columns-column {
  float: left;
  width: 30.66%;
  padding: 0px;
  height: 75vh;
}
  
@media (max-width: 600px) {
  .screendesign3columns-column {
  float: left;
  width: 100%;
  padding: 0px;
  height: 75vh;
  }
}
  
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .screendesign3columns-column {
  float: left;
  width: 100%;
  padding: 0px;
  height: 75vh;
  }
}

.screendesign3columns-gutter {
  float: left;
  width: 4%;
  padding: 0px;
  height: 75vh;
}
  
@media (max-width: 600px) {
  .screendesign3columns-gutter {
  float: left;
  padding: 0px;
  height: 25px;
  }
}
  
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .screendesign3columns-gutter {
  float: left;
  padding: 0px;
  }
}

.screendesign4columns-column {
  float: left;
  width: 22%;
  padding: 0px;
  height: 75vh;
}
  
@media (max-width: 600px) {
  .screendesign4columns-column {
  float: left;
  width: 100%;
  padding: 0px;
  height: 75vh;
  }
}
  
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .screendesign4columns-column {
  float: left;
  width: 100%;
  padding: 0px;
  height: 75vh; 
  }
}

.screendesign4columns-gutter {
  float: left;
  width: 4%;
  padding: 0px;
  height: 75vh;
}
  
@media (max-width: 600px) {
  .screendesign4columns-gutter {
  float: left;
  padding: 0px;
  height: 25px;
  }
}
  
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .screendesign4columns-gutter {
  float: left;
  padding: 0px;
  height: 25px;  
  }
}
 
.flex-container-screen-large {
  display: flex;
  height: 75vh;
  justify-content: center;
  align-items: center;
}

.flex-container-screen-large>div {
  width: 60%;
}
  
@media (max-width: 600px) {
  .flex-container-screen-large {
  display: flex;
  height: 23vh;
  justify-content: center;
  align-items: center;
  }
}

@media (max-width: 600px) {
  .flex-container-screen-large>div {
  width: 70%;
  }
}
  
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .flex-container-screen-large {
  display: flex;
  height: 75vh;
  justify-content: center;
  align-items: center;
  }
} 

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .flex-container-screen-large>div {
   width: 60%;
  }
} 

.flex-container-screen-mob {
  display: flex;
  height: 75vh;
  justify-content: center;
  align-items: center;
  float:left;
}

.flex-container-screen-mob>div {
  width: 42%;
}

@media (max-width: 600px) {
  .flex-container-screen-mob {
  display: flex;
  height: 37.5vh;
  justify-content: center;
  align-items: center;
  }
}

@media (max-width: 600px) {
  .flex-container-screen-mob>div {
  width: 70%;
  }
}
  
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .flex-container-screen-mob {
  display: flex;
  height: 75vh;
  justify-content: center;
  align-items: center;
  }
} 

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .flex-container-screen-mob>div {
   width: 46%;
   padding: 10px;
  }
}

.flex-container-screen-portrait {
  display: flex;
  height: 75vh;
  justify-content: center;
  align-items: center;
  float:left;
}

.flex-container-screen-portrait>div {
  width: 42%;
}

@media (max-width: 600px) {
  .flex-container-screen-portrait {
  display: flex;
  height: 37.5vh;
  justify-content: center;
  align-items: center;
  margin-top: 0px;
  }
}

@media (max-width: 600px) {
  .flex-container-screen-portrait>div {
  width: 35%;
  }
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .flex-container-screen-portrait {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  }
} 

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .flex-container-screen-portrait>div {
   width: 56%;
  }
}

.flex-container-screen-small {
  display: flex;
  height: 36vh;
  justify-content: center;
  align-items: center;
}

.flex-container-screen-small>div {
  width: 60%;
}
  
@media (max-width: 600px) {
  .flex-container-screen-small {
  display: flex;
  height: 23vh;
  justify-content: center;
  align-items: center;
  }
}

@media (max-width: 600px) {
  .flex-container-screen-small>div {
  width: 70%;
  }
}
  
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .flex-container-screen-small {
  display: flex;
  height: 75vh;
  justify-content: center;
  align-items: center;
  }
} 

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .flex-container-screen-small>div {
   width: 60%;
  }
}

.screendesigns-small{
   display: none;
}

@media only screen and (max-width: 500px){           
   .screendesigns-wide{
     display: none;
   }

   .screendesigns-small{
     display: block;
   }
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .screendesigns-wide{
     display: none;
   }

  .screendesigns-small{
     display: block;
   }
}

.previous {
  background-color: #FFFFFF;
  border: 1px solid grey;
  opacity: 1.0;
  padding: 15px 15px;
  width: 180px;
  font-family: Brando ExtraLight;
  text-decoration: none;
  display: inline-block;
  font-size: 24px;
  cursor: pointer;
  margin: 20px;
  transition: border 0.5s;
}

@media (max-width: 600px) {
  .previous {
   width: 40px;
   margin: 0px;
   border: 0px;
  }
}

.previous::before {
  content: "Previous"; 
}
  
.previous:hover {
  border: 1px solid transparent;
}
  
@media (max-width: 600px) {
  .previous::before {
    content: "";
  }
}

.next {
  background-color: #FFFFFF;
  border: 1px solid grey;
  opacity: 1.0;
  padding: 15px 15px;
  width: 180px;
  font-family: Brando ExtraLight;
  text-decoration: none;
  display: inline-block;
  font-size: 24px;
  cursor: pointer;
  margin: 20px;
  transition: border 0.5s;
}
  
@media (max-width: 600px) {
  .next {
   width: 40px;
   margin: 0px;
   border: 0px;
  }
}

.next::after {
content: "Next"; 
}
  
.next:hover {
  border: 1px solid transparent;
}
  
@media (max-width: 600px) {
  .next::after {
   content: ""; 
  }
}

.process-column {
  float: left;
  width: 30%;
  padding: 0px;
  height: 100%;
  margin-top: 25px;
}
  
@media (max-width: 990px) {
  .process-column {
  float: left;
  width: 100%;
  padding: 0px;
  margin-top: 0;
  margin-bottom: 25px;
  }
}
  
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .process-column {
  float: left;
  width: 100%;
  padding: 0px;
  margin-top: 0px;
  }
}

.process-gutter {
  float: left;
  width: 5%;
  padding: 0px;
  height: 100%;
  margin-top: 25px;
}

.process-small{
   display: none;
}

@media only screen and (max-width: 990px){           
   .process-wide{
     display: none;
   }

   .process-small{
     display: block;
   }
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .process-wide{
     display: none;
   }

  .process-small{
     display: block;
   }
}

.process-copy {
  font-family: Brando Regular, serif;
  font-size: 1.2em; 
  color: #ffffff;
  font-weight: normal;
  font-style: normal;
  padding: 10%;
}
  
@media (max-width: 600px) {
  .process-copy {
   font-size: 1em;
   padding: 25px;
  }
} 
    
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .process-copy {
   font-size: 0.7em;
   padding: 25px;
  }
}

/* insights */

.article-small{
   display: none;
}

@media only screen and (max-width: 990px){           
   .article-wide{
     display: none;
   }

   .article-small{
     display: block;
   }
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .article-wide{
     display: none;
   }

  .article-small{
     display: block;
   }
}

.otherarticles-small{
   display: none;
}

.otherarticles-extrasmall{
   display: none;
}

@media only screen and (max-width: 990px){           
   .otherarticles-wide{
     display: none;
   }
  
  .otherarticles-extrasmall{
     display: none;
   }

   .otherarticles-small{
     display: block;
   }
}

@media only screen and (max-width: 600px){           
   .otherarticles-wide{
     display: none;
   }

   .otherarticles-small{
     display: none;
   }
  
  .otherarticles-extrasmall{
     display: block;
   }
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .otherarticles-wide{
     display: none;
   }

  .otherarticles-small{
     display: block;
   }
}

.text-column {
  float: left;
  width: 50%;
  padding: 0px;
  height: 100%;
  margin-top: 25px;
}
  
@media (max-width: 990px) {
  .text-column {
  float: left;
  width: 100%;
  padding: 0px;
  margin-top: 0;
  margin-bottom: 25px;
  }
}
  
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .text-column {
  float: left;
  width: 100%;
  padding: 0px;
  margin-top: 0px;
  }
}

.side-column {
  float: left;
  width: 20%;
  padding: 0px;
  height: 100%;
  margin-top: 25px;
}

.article-intro {
  font-family: Brando ExtraLight, serif;
  font-size:2.0em;
  color:#000000;
  margin-top:0px;
  padding:0%;
}
  
@media (max-width: 600px) {
  .article-intro {
  font-family: Brando ExtraLight, serif;
  font-size:1.6em;
  color:#000000;
  margin-top:0px;
  padding:0%;
  }
}
  
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .article-intro {
  font-family: Brando ExtraLight, serif;
  font-size:1.6em;
  color:#000000;
  margin-top:0px;
  padding:0%;
  }
}

.copy {
 font-family: Brando Regular, serif;
  font-size: 1.4em; 
  color: #000000;
  font-weight: normal;
  font-style: normal;
  padding: 0%;
  margin-top:0px;
}
  
@media (max-width: 600px) {
  .copy {
   font-size: 1.2em;
   padding: 0px;
  }
} 
    
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .copy {
   font-size: 1.2em;
   padding: 0px;
  }
}

@media (max-width: 600px) {
  h2 {
   font-size: 1.5em;
   line-height: 1.2em;
  }
} 
    
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  h2 {
   font-size: 1.8em;
   line-height: 1.2em;
  }
}

figure {
  border: 0px;
  padding: 2em 0 0 0;
  margin: auto;
}

figcaption {
  background-color: #A18944;
  color: black;
  font-family: Brando Regular, serif;
  font-size: 1.0em;
  padding: 0 0 0 0;
  text-align: left;
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
figcaption {
   font-size: 0.6em;
  }
}

.externallink:link {
  color: #A18944;
  text-decoration: none;
}

.externallink:visited {
  color: #A18944;
  text-decoration: none;
}

.externallink:hover {
  color: #A18944;
  opacity: 0.5;
  text-decoration: none;
}

.externallink:active {
  color: #A18944;
  text-decoration: none;
}

.hyperlink:link {
  color: #000000;
  text-decoration: underline;
}

.hyperlink:visited {
  color: #000000;
  text-decoration: underline;
}

.hyperlink:hover {
  color: #000000;
  text-decoration: none;
}

.hyperlink:active {
  color: #000000;
  text-decoration: none;
}

/* motion */

svg line {
  fill: none;
  stroke: #0099dd;
  stroke-width: 3;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  -webkit-animation: dash 3s linear forwards;
  animation: dash 3s linear forwards;
}
@-webkit-keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}