@charset "utf-8";

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-decoration: none;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}

/* CSS Variables */

:root {
  --main-text-size: 22px;
  --main-line-height: 31px;
    
  --caption-text-size: 16px;
  --caption-line-height: 22px;  
  
  --main-text-colour: black;
  --main-link-colour: #969696;

  --offset: 0px;
}

/* PACE Preloader */

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background: #387c41;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
}

/* Swiper Firefox Fix */

@-moz-document url-prefix() {
  .swiper-container{
    display: -moz-box;
  }
  .swiper-wrapper{
    width: 200px!important;
  }
}

.swiper-home-container .swiper-slide, .swiper-home-container .swiper-slide-next, .swiper-home-container .swiper-slide-prev{
  opacity: 0 !important;
}

.swiper-home-container .swiper-slide-active{
  opacity: 1 !important;
}
  
/* Website Style */

::-moz-selection {
  color: #fbfbfb;
  background: #282828; }

::selection {
  color: #fbfbfb;
  background: #282828; }

  @font-face {
    font-family: 'AT Surt';
    src: url('/fonts/ATSurt-Light.eot');
    src: url('/fonts/ATSurt-Light.eot?#iefix') format('embedded-opentype'),
        url('/fonts/ATSurt-Light.woff2') format('woff2'),
        url('/fonts/ATSurt-Light.woff') format('woff'),
        url('/fonts/ATSurt-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AT Surt';
    src: url('/fonts/ATSurt-LightOblique.eot');
    src: url('/fonts/ATSurt-LightOblique.eot?#iefix') format('embedded-opentype'),
        url('/fonts/ATSurt-LightOblique.woff2') format('woff2'),
        url('/fonts/ATSurt-LightOblique.woff') format('woff'),
        url('/fonts/ATSurt-LightOblique.ttf') format('truetype');
    font-weight: 300;
    font-style: oblique;
    font-display: swap;
}

@font-face {
    font-family: 'AT Surt';
    src: url('/fonts/ATSurt-RegularOblique.eot');
    src: url('/fonts/ATSurt-RegularOblique.eot?#iefix') format('embedded-opentype'),
        url('/fonts/ATSurt-RegularOblique.woff2') format('woff2'),
        url('/fonts/ATSurt-RegularOblique.woff') format('woff'),
        url('/fonts/ATSurt-RegularOblique.ttf') format('truetype');
    font-weight: normal;
    font-style: oblique;
    font-display: swap;
}

@font-face {
    font-family: 'AT Surt';
    src: url('/fonts/ATSurt-Regular.eot');
    src: url('/fonts/ATSurt-Regular.eot?#iefix') format('embedded-opentype'),
        url('/fonts/ATSurt-Regular.woff2') format('woff2'),
        url('/fonts/ATSurt-Regular.woff') format('woff'),
        url('/fonts/ATSurt-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



body {
  font-family: 'AT Surt', sans-serif;
  font-weight: 300;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  color: var(--main-text-colour);
  line-height: 1;
  margin: 0 auto;
  overflow: scroll;
  overflow-x: hidden;
}

.barba-container, #header{
  max-width: 1920px;
  margin: 0 auto;
}

/* .errorPage {
  margin-top: 50px;
} */

.homepage{
  position: relative !important;
}

ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

em {
  font-family: 'AT Surt', sans-serif;
  font-style: oblique;
}

/* Styles */

img, iframe{
  position: relative;
  z-index: 90;
}

.ratio-box {
  width: 100%;
  position: relative;
  background-size: 100%;
  background-repeat: no-repeat;

  background-color: #eee;
}

.ratio-box img,
.ratio-box .vimeoCover,
.ratio-box .vimeoPlayer {
  position: absolute;
  top: 0;
  left: 0;
}

.ratio-box .vimeoCover,
.ratio-box .vimeoPlayer,
.ratio-box iframe {
  width: 100%;
  height: 100%;
}

.vimeoPlayer div {
  animation: fadeIn 900ms 100ms;
}

.image-item {
  width: 100%;
}

.navigation{
  margin-left: 20px;
}

p{
  font-size: var(--main-text-size);
  line-height: var(--main-line-height);
}

.caption p {
  font-size: var(--caption-text-size);  
  line-height: var(--caption-line-height);  
  color: var(--main-link-colour);
  max-width: 640px;
}

.caption{
  padding-top:12px;
}

.link-black a{
  color: var(--main-text-colour);
    -webkit-transition:color 0.3s;
    -moz-transition:color 0.3s;
    -o-transition:color 0.3s;
    transition:color 0.3s;
}

.link-black a:hover{
  color: var(--main-link-colour);
}

.link-gray a{
  color: var(--main-link-colour);
    -webkit-transition:color 0.3s;
    -moz-transition:color 0.3s;
    -o-transition:color 0.3s;
    transition:color 0.3s;
}

.link-gray a:hover{
  color: var(--main-text-colour);
}

h1 {
  font-size: var(--main-text-size);
  float: left;
  color: var(--main-text-colour);
}

h2 {
  padding-bottom: 12px;
  padding-top: 18px;
  font-size: var(--main-text-size);
  line-height: 24px;
}
h2 a{
  text-decoration: none;
}

h3{
  font-size: var(--main-text-size);
  color: var(--main-link-colour);
}

#content{
	margin-top:50px;
}

.homepage{
	margin-top: 0px !important;
}

.cineWrap{
  width: 100%;
  height: 100%;
  z-index: 3000;
  background-color: var(--main-text-colour);
  display: none;
  position: fixed;
  overflow: none;
}

.cineEmbed{
  margin: 50px;
}

.cineEmbed iframe{
  top: 4% !important;
  left: 4% !important;
  width: 92% !important;
  height: 92% !important;         
}

.cineExit{
  background:none;
  border:none;
  margin:0;
  padding:0;
  font-family: 'AT Surt', sans-serif;
  font-weight: 300;
  display: block;
  cursor: pointer;
  font-size: 60px;
  color: white;
  position: fixed;
  right: 20px;
  top: -12px;
  z-index: 3500;
}

.exitCine:hover{
  color: var(--main-link-colour);
  }




/* Header */

#header{
  width: 100%;
  height: 32px; 
  padding-top: 20px;
  font-size: var(--main-text-size);
  position: relative;
  z-index: 999;
  }

#header a{
  color: var(--main-text-colour);
}

#header a:hover{
  color: var(--main-link-colour);
}

.gray{
  color: var(--main-link-colour) !important;
    -webkit-transition:color 0.3s;
    -moz-transition:color 0.3s;
    -o-transition:color 0.3s;
    transition:color 0.3s 
}

.gray:hover{
  color: var(--main-text-colour) !important;
}

.grid-header-container{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  padding: 0 50px; 
  z-index: 100;
}

.grid-header-siteName{
  grid-column-start: 1;
  grid-column-end: 5; 
}

.grid-header-projects, .grid-header-entry{
  grid-column-start: 5;
  grid-column-end: 10;
}

.grid-header-entry{
  margin-top: -50px;
  position: absolute;
}

.grid-header-info{
  grid-column-start: 10;
  grid-column-end: 13;
  text-align: right;
}

.project-name{
  margin-top: 3px;
  font-size: var(--main-text-size);
  color: var(--main-text-colour);
  width: 100%;
  z-index: 300;
}

.closed{
  display: none;
}

.open{
	display: grid;
}

.sign{
  float: left;
  width: 20px;
}

.infoToggle{
  cursor: pointer;
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;  }
  
.tuck-in-credits{
	grid-column: 1/13;	
}

.tuck-in-credits-grid{

	grid-template-columns: repeat(12, 1fr);;
	
}

.tuck-in p{
	margin-bottom: 5px !important;
}

/* Error page */

#error-grid, #asset-grid {
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(10, 1fr);
  grid-gap: 0px;
  max-width: 1920px;
  width: 100vw;
  position: relative;
  /*z-index: 50;*/

  box-sizing: border-box;

  padding: 0 50px;
}


#error-grid-centre {
  grid-column: 5 / 9;
  grid-row: 3 / 9;
}

#four-oh-four {
  display: block;
}

table.assets {
  margin-bottom: 4em;
}

table.assets a {
  color: inherit;
}

table.assets thead th,
table.assets td {
  padding: 6px 0;
}

table.assets th:nth-child(2),
table.assets td:nth-child(2) {
  text-align: right;
}

table.assets tr {
  height: 1em;
}

table.assets tr:hover {
  background: #ccc6;
  color: #111;
}

td.kind-image {
  content: "#";
}

td.kind-access {
  content: "&";
}

td.kind-audio {
  content: "#";
}

td.kind-compressed {
  content: "Σ";
}

td.kind-excel {
  content: "#";
}

td.kind-flash {
  content: "#";
}

td.kind-html {
  content: "#";
}

td.kind-illustrator {
  content: "#";
}

td.kind-image {
  content: "#";
}

td.kind-pdf {
  content: "#";
}

td.kind-photoshop {
  content: "#";
}

td.kind-php {
  content: "#";
}

td.kind-powerpoint {
  content: "#";
}

td.kind-text {
  content: "#";
}

td.kind-video {
  content: "#";
}

td.kind-word {
  content: "#";
}

.homepage{
  padding-top: 0 !important;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: fixed;
  height: inherit;
/*  background-color:#ffdede; */
}

#home-grid, #slider-zone-left, #slider-zone-right, #error-grid {
  height:         calc(100vh - 110px - var(--offset, 0) );
  height:    -moz-calc(100vh - 110px - var(--offset, 0) );
  height: -webkit-calc(100vh - 110px - var(--offset, 0) );
}

#home-grid{
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(52, 1fr);
  grid-template-rows: repeat(30, 1fr);
  grid-gap: 0px;
  max-width: 1920px;
  width: 100vw;
  z-index: 50;
}

.home-grid-mobile-image{
  grid-column: 4 / 50; 
  grid-row: 1 / 31; 
  text-align: center;
}

.home-grid-unit{
  align-items: center;
}

.home-mobile-image{
  display: none;
  }
  
.home-mobile-image-align{
  margin: 0 auto;
}

.home-grid-unit img{
  max-width: 100%;
  max-height: 100%;
  top: 50%;
  transform: translateY(-50%);
}

#home-footer, #error-footer {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 12px;
  position: fixed;
  padding: 0 50px;

  width: 100vw;
  max-width: 1920px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 250;
}

#home-footer {
  bottom: -40px;
}

#error-footer {
  bottom: 20px;
  left: 0;
}

#slider-number{
  grid-column: 1 / 5;

  
}

#slider-desc{
  grid-column: 5 / 10;
}

#slider-info{
  grid-column: 10/13;
}

#slider-zones{
  position: fixed;
  width: 100%;
  z-index: 200;
}

#slider-zone-left{
  position: fixed;
  width: 50vw;
  left: 0;
  cursor: url(/img/ui/slider-customArrow-left.svg), w-resize;
  z-index: 201;
}

#slider-zone-right{
  position: fixed;
  width: 50vw;
  right: 0;
  cursor: url(/img/ui/slider-customArrow-right.svg), e-resize;
  z-index: 201;
}

.home-slide{
  display: none;
}


/* Project List Styles */

.projectThumb{
  width: 100%;
}

.projectThumbWrap{
  display:block;
  overflow:auto;
  padding: 20px 0;
  
}

.grid-projectList {
  display: grid;
  grid-template-columns: repeat(12, 1fr);;
  column-gap: 12px;
  padding: 35px 50px;
}

.grid-projectThumb{
  margin-bottom: 80px;
}



.grid-projectThumb a{
  color:  var(--main-link-colour) !important;
  -webkit-transition:color 0.3s;
    -moz-transition:color 0.3s;
    -o-transition:color 0.3s;
    transition:color 0.3s;
}

.grid-projectThumb a:hover{
  color: var(--main-text-colour) !important;
}


#projectListFooter{
  display: block;
  font-size: var(--main-text-size);
  margin-top: 30px;
  padding-bottom: 50px;
  

}

#projectListFooter a{
  text-decoration: none;
  color: var(--main-text-colour);
}

#projectListFooter a:hover{
  color: var(--main-link-colour);
}



/* Project Entries Style */

.vimeoEmbed{
  position: relative;
  width: 100%;
}

.vimeoCover{
  position: absolute;
  z-index: 90;
}

.cineMode:hover, 
.vimeoCover:hover {
  cursor: pointer;
}

.playBtn{
  position: absolute;
  top:50%;
  left: 50%;
  width: 112px;
  height: 112px;
  margin: -56px 0 0 -56px;
  z-index: 300;
  opacity: 1;
    -webkit-transition:opacity 0.3s;
    -moz-transition:opacity 0.3s;
    -o-transition:opacity 0.3s;
    transition:opacity 0.3s;
}

.cineMode:hover .playBtn,
.vimeoCover:hover .playBtn {
  opacity: 0.5;
}

#projectEntriesFooter{
  font-size: var(--main-text-size);
  margin-top: 40px;
  padding: 30px 50px;
  color: var(--main-text-colour);
}

.backToProjects{
  float: right;
}

.grid-projectHeader {
  display: grid;
  grid-template-columns: repeat(12, 1fr);;
  grid-column-gap: 12px;
}

/*

Maybe the following class should also be targeted
by the properties below: (Max on 29.01.2020)

.infoToggleContent.open

*/
.grid-projectEntry{
  display: grid;
  grid-template-columns: repeat(12, 1fr);;
  grid-column-gap: 12px;  
  margin: 35px 50px 0 50px;
  grid-row-gap:10px;
}

.grid-imageDuo{
  padding-top: 9px;
  grid-row-gap: 12px; 
}

.grid-projectHeader {
  align-items: end;
  margin: 16px 0 40px 0;
}

.grid-projectHeader h2{
  padding-bottom: 0px;
}

.grid-image{
  grid-row-gap: 12px;
}

  .grid-projectTitle{
    grid-column: 1 / 10;
  }

  .grid-spacer{
    grid-column: 1 / 13;
  }
  
  .grid-projectDate{
    grid-column: 10 / 13;
    text-align: right;
  }
  
  .grid-projectDate h3{
    line-height: 32px;
  }

  .grid-projectEntry hr{ 
    border-width: 0px;
    height: 30px;
  }

  .grid-projectDescription {

    grid-column: 1 / 8;
    max-width: 740px;
  }
  
  .descPadding{
    padding-top: 30px;
  }
  
  .grid-projectDescription p, .infoToggleContent p{
    margin-bottom: 30px;
  }
  
  .infoToggleContent{
    margin-top: 30px;
    margin-left: 50px;
  }
  
  .grid-projectCredits-title{
    grid-column: 1 / 4;
  }

  .grid-projectCredits-role{
    grid-column: 4 / 8;
  }
  
  .grid-projectCredits-name{
    grid-column: 8 / 13;
  }
  
  .credits-highlight{
    color: var(--main-link-colour);
  }
  
  .credits-highlight p, .credits-highlight p a{
    color: var(--main-link-colour) !important;
    border-bottom-color: var(--main-link-colour) !important;
  }
  
  .credits{
    display: flex;
  }
  
  .credits-lines{
    display: none;
  }
  
@media only screen and (max-width:1500px) {

  .grid-projectList{
  padding: 30px 50px;
  }
  
  #header a, .grid-header-entry, p, #projectEntriesFooter, h2{
    font-size: 20px;
    line-height: 29px;  
  }
  
  .credits p{
  margin-bottom: -7px;
  }
  
  .grid-projectDescription{
  max-width: 700px;
    }


}

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

  .grid-projectList{
  padding: 20px 50px;
  }
  
}

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


  #header a, .grid-header-entry, p, #projectEntriesFooter{
    font-size: 18px;
    line-height: 24px;  
  }
  
  .caption p{
    max-width: 98%;
    font-size: 14px;
    line-height: 20px;  
  }
  
  .projectList{
	  margin-top:30px !important;
  }
  
  #projectEntriesFooter{
    padding: 30px 30px;
  }

  h2{
    font-size: 18px;
    line-height: 24px;
    padding-top: 8px;
  }
  
  h3{
    display: none;
  }
  
  .extra{
    display: none;
  }
  
  .grid-spacer{
    height: 30px !important;
  }
  
  .grid-projectEntry{
    margin: 0 30px;
  }
  
  .grid-projectDescription{
    max-width: 100%;
    grid-column: 1 / 13 !important;
  }

  .error-grid-unit, table.assets {
    max-width: 100%;
    grid-column: 1 / 13 !important;
    grid-row: 1 / 11 !important;  
  }
  
  .grid-header-container{
    padding: 0 30px;
  }
  
  .grid-projectList{
    padding: 20px 30px;
  }
  
  .grid-projectThumb{
    grid-column-start: 1 !important;
    grid-column-end: 13 !important;
    align-self: auto !important;
    margin-bottom: 30px;
  }
  
  .grid-header-siteName{
    grid-column: 1 / 7;
  }
  
  .grid-header-projects{
    grid-column: 7 / 10;
  }
  
  .grid-header-entry{
    grid-column: 1 / 13;
    padding-top: 5px;
  }
  
  .grid-projectList-projectTitle, .grid-singleImage, .grid-item, .grid-projectCredits-title, .grid-projectCredits-role, .grid-projectCredits-name{
  grid-column: 1 / 13 !important;
  }

.descPadding{
	padding-top: 12px;
}

  .grid-projectCredits-title{

    margin-bottom: 18px;
  }
  
  .aboutPage{
    margin-top: 50px;
  }
  
  .grid-projectCredits-role{
    margin-left: 40px;
  }
  
  .grid-projectCredits-name{
    margin-left: 40px;
  }
  
  .credits-highlight{
    color: var(--main-text-colour); 
  }
  
  .credits-highlight p, .credits-highlight p a{
    color: var(--main-text-colour) !important;
    border-bottom-color: var(--main-text-colour) !important;
  }
  
  .about-image{
    width: 200px;
    margin-left: 40px;
  }
  
  .home-mobile-image{
    display: inherit;
  }
  
  .home-desktop-images{
    display: none;
  }
  
  .home-grid-unit {
      align-items: normal;
  }
  
  #home-footer, #error-footer, #asset-grid {
    padding: 0 30px;
  } 

}

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

  
  #header a, .grid-header-entry, p, #projectEntriesFooter, h2{
    font-size: 16px;
    line-height: 21px;  
  }

  .caption p{
    max-width: 100%;
    font-size: 12px;
    line-height: 17px;  
  }
  

  
  .entryPage{
    padding-top: 0px !important;
    margin-top: -6px !important;
  }
  
  .grid-item, .grid-header-container{
    margin-bottom: 30px;
  }
  
  .grid-projectDescription p, .infoToggleContent p {
    margin-bottom: 19px;
  }
  
  .grid-projectDescription{
    margin-bottom: 11px;
  }
  
  .grid-header-entry{
    
    margin-top: 0px;
    position: inherit;
  }
  
  .grid-projectEntry{
    grid-row-gap: 0px;
  }

  .credits-end{
    margin-bottom: 35px;
  }
  
  .grid-projectCredits-role{
    margin-bottom: 8px;
  }
  
  .grid-projectCredits-role, .grid-projectCredits-name{
    margin-left: 22px;
  }
  
  .descPadding{
    padding-top: 0px;
  }
  
  .grid-spacer{
    height:0px !important;
  }

  .grid-header-siteName{
    grid-column-start: 1;
    grid-column-end: 7;
  }

  .grid-header-projects {
    grid-column-start: 7;
    grid-column-end: 9;
  }

  /*
  #error-grid #slider-desc {
    grid-column-start: 1;
    grid-column-end: 5; 
  }
  */
  
  .grid-header-info{
  grid-column-start: 11;
    grid-column-end: 13;
    text-align: left;
  }
  
  .grid-projectList-projectTitle{
    padding-top: 5px;
  }
  
  h2{
    padding-bottom: 0px;
  }
  
  .aboutPage{
    margin-top: 30px;
  }
  
  .infoToggle{
    margin-bottom: 8px;
  }
  
  .infoToggle{
    display: none;
  }
  
  .backToProjects{
    float: right;
    margin-bottom:20px;
  }
  
  .previousProject{
    float: left;
  }
  
  .nextProject{
    float: left;
    clear: both;
  }
  
  .next-project-dash{
    display: none;
  }
  
  #slider-number, #slider-desc, #slider-info{
    grid-column: 1 / 13;
  } 

}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
   @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
        @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 
.ratio-box img {
 opacity:0;  /* make things invisible upon start */

 /* call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time */
 -webkit-animation:fadeIn ease-in 1; 
    -moz-animation:fadeIn ease-in 1;
         animation:fadeIn ease-in 1;
 
 /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
 -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
         animation-fill-mode:forwards;
 
 -webkit-animation-duration:840ms;
    -moz-animation-duration:840ms;
         animation-duration:840ms;

 -webkit-animation-delay:120ms;
    -moz-animation-delay:120ms;
         animation-delay:120ms;
}