:root {
	--text-colour: #aaa;
}


@font-face {
  font-family: "VCR OSD";
  src: url("/assets/css/vcrosd.woff") format("woff");
}

@font-face {
  font-family: "Montserrat SemiBold";
  src: url("/assets/css/Montserrat-SemiBold.woff") format("woff");
}

@font-face {
  font-family: "Tommy Soft Bold";
  src: url("/assets/css/tommy-soft-bold.otf") format("opentype");
}

@font-face {
  font-family: "Tommy Soft Medium";
  src: url("/assets/css/tommy-soft-medium.otf") format("opentype");
}

@font-face {
  font-family: "Bureau GrotThreeSeven Regular";
  src: url("/assets/css/bureau_grotthreeseven_regular.otf") format("opentype");
}

html,
body {
  margin:0;
  padding:0;
  font-family: Bureau GrotThreeSeven Regular,Futura,Trebuchet MS,Arial,sans-serif;
  /* font-family: Montserrat SemiBold,Futura,Trebuchet MS,Arial,sans-serif; */
  /*font-family: "VCR OSD";*/
  height:100%;
  background:#222;
  color:var(--text-colour);
}

html {
  height:100%;
}

body {
  height:100%;
}

#container[data-page="Home"] {
  height:100%;
}

#topbar {
  height:60px;
    font-family: Bureau GrotThreeSeven Regular, sans-serif;
  /*text-transform: uppercase;*/
}

#topbar nav {
  display:flex;
  justify-content: space-between;
  align-items: center;
  height:100%;
  padding:5px 20px 0 20px;
}

#logo {
  flex-grow:0;
  width:70px;
  border-radius: 70px;
  margin:0 20px;
  border:2px solid var(--text-colour);
}

#gridContainer {
  display:flex;
  /* height:100%; */
}

.nameLogo a {
  font-family: Bureau GrotThreeSeven Regular;
  /*font-size:25px;*/
  font-size:30px;
  font-weight:400 !important;
}

#sidebar {
  height:100%;
  padding:20px 20px 0 20px;
  width:250px;
  box-sizing:border-box;
}

#sidebar .header {
	margin-bottom:30px;
}

#sidebar a.category {
  text-decoration:none;
  color:var(--text-colour);
  display:block;
  font-weight:600;
  margin:20px 0;
  transition: padding .2s;
  padding-left:0;
}

#sidebar a.category.active {
  text-decoration:underline;
}

#sidebar a.category {
  text-decoration:none;
  color:var(--text-colour);
  display:block;
  font-weight:600;
  margin:20px 0;
  transition: padding .2s;
  padding-left:0;
}

#sidebar a.category:hover {
  padding-left:10px;
}

#sidebar .socialicons {
  margin-top:30px;
  font-size:22px;
}

#sidebar a {
  text-decoration:none;
  color:var(--text-colour);
  display:inline-block;
  font-weight:600;
  margin:5px 0;
}

#sidebar a:first-child {
  margin-top:10px;
}

#grid {
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns:33.33% 33.33% 33.33%;
  padding:10px;
  box-sizing:border-box;
}

#grid a {
  margin:10px;
  background-size:cover;
  background-position:center;
  color:var(--text-colour);
  /*font-family:"VCR OSD";*/
  text-decoration:none;
}

#grid a:hover > div.overlay {
  background:rgba(0,0,0,0.5);
}

#grid.categories {
  width:calc(100% - 20px);
  min-height:calc(100% - 100px);
  display:grid;
  grid-template-columns:50% 50%;
  /*grid-auto-rows:50%;*/
  padding:10px;
}

#grid.categories a {
  /* height:400px; */
  aspect-ratio: 16 / 9;
  margin:10px;
  background-size:cover;
  background-position:center;
  color:var(--text-colour);
  /*font-family:"VCR OSD";*/
  text-decoration:none;
}

#grid a span:first-child {
  font-size:1rem;
  text-align:right;
  display:block;
}

#grid a span:last-child {
  font-size:0.7rem;
  display:block;
  text-align:right;
}

#grid a div.overlay {
  background:rgba(0,0,0,0.3);
  width:100%;
  height:100%;
  display:flex;
  justify-content: flex-end;
  align-items:flex-end;
  transition:.1s background;
  padding: 25px;
  box-sizing: border-box;
}

#grid a div.overlay.brandLogo {
  justify-content: center;
  align-items: center;
}

#grid a div.overlay div {
  max-width:100%;
}

#grid a div.overlay div span {
  font-weight:600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: rgba(0,0,0,0.5) 1px 1px;
  /* text-shadow: rgba(0,0,0,0.7) 0px 0px 3px; */
}

nav {
  font-size: 25px;
  color:var(--text-colour);
}

nav a {
  color:var(--text-colour);
  text-decoration:none;
  margin:0px;
  width:100%;
  height:100%;
}

nav .catlinks a {
  margin:0px 15px;
}

#project {
  max-width:1080px;
  width:100%;
  margin:auto;
  padding-top: 20px;
}

#project .titles {
  margin:10px;
}

#project .titles span:first-child {
  font-size:2rem;
  text-align:right;
  display:block;
}

#project .titles span:last-child {
  font-size:1.2rem;
  display:block;
  text-align:right;
}

#project .crew,
#project .about {
  padding:10px;
}

#project .about {
  line-height:1.5;
  font-size:0.9rem;
}

#project .about p:first-child {
  margin-top:0;
}

#project .about p:last-child {
  margin-bottom:0;
}

#project .crew hr {
  border:none;
  border-top:1px solid var(--text-colour);
  width:100%;
  /* max-width:700px; */
  margin:0 auto 32px auto;
}

#project .crew {
  box-sizing: border-box;
  width:100%;
  /* max-width:700px; */
  font-size: 0.8rem;
}

#project .crew .member {
  display:flex;
  justify-content: space-between;
  margin-bottom:10px;
  border-bottom: 1px dashed #868686;
}

#project .crew .member a {
  color: inherit;
}

.vimeo {
  background-image:url("loading.gif");
  background-position: center;
  background-repeat: no-repeat;
}

#cont404 {
  padding:10px;
  display:flex;
  flex-direction:column;
  justify-content: space-between;
  align-items: center;
}

#cont404 img {
  width:300px;
}

.aboutcontainer,
.clientlist {
  width:80%;
  margin:auto;
}

.aboutcontainer a {
  color:inherit;
}

.aboutcontainer .portraitimage {
  width: 33%;
  float:right;
  margin-left:30px;
}

.aboutcontainer .portraitimage img {
  width:100%;
}

@media only screen and (min-width: 601px) {

  .mobile {
    display:none;
  }

}

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

  html {
    /*background: #1b1b1b;*/
  }

  #container {
    overflow-x:hidden;
  }

  .desktop {
    display:none;
  }

  #topbar {
    height:70px;
  }

  #gridContainer {
    flex-direction: column;
  }

  #sidebar {
    box-sizing: border-box;
    padding: 20px;
    width:100%;
  }

  #sidebar .header {
  	margin-bottom:0;
  }

  #sidebar a:first-child {
    margin-top:20px;
  }

  #sidebar .socialicons {
  	margin-top:0;
  }

  #sidebar a.category,
  #sidebar .socialicons {
    text-align: right;
  }

  #sidebar .header a,
  #sidebar .socialicons a {
    margin:0;
  }

  #sidebar .header {
    display:flex;
    justify-content:space-between;
  }

  #sidebar .mobile a {
    font-size:25px;
  }

  #sidebar .menu {
    height:0px;
    transition: .4s height;
    overflow:hidden;
    font-size:16px;
  }

  #sidebar .menu.active {
    height: 290px;
  }

  #grid {
    width:calc(100%);
    /* height:calc(100% - 70px); */
    height:auto;
    grid-template-columns:100%;
    /* grid-template-rows:16.66% 16.66% 16.66% 16.66% 16.66% 16.66%; */
    padding:0;
  }

  #grid.categories {
    grid-template-columns:100%;
    padding:0;
    display:inline;
    width:100%;
  }

  #grid.categories a {
    /* height:200px; */
    aspect-ratio: 16 / 9;
    margin:0;
    display:block;
  }

  #grid.categories a:first-child {
    margin-top:0;
  }

  #container[data-page="Home"] #grid a {
    margin:0 !important;
    /* height: 200px; */
    aspect-ratio: 16 / 9;
  }

  #grid a div.overlay {
    background:rgba(0,0,0,0.5);
    justify-content: flex-end;
  }

  #grid a div.overlay span {
    margin-right:15px;
  }

  #project {
    padding-top:0;
  }

  #project .titles span {
    text-align: right;
    display: block;
  }

  #project .titles span:first-child {
    font-size: 1.5rem;
  }

  #project .titles span:last-child {
    font-size: 0.9rem;
  }

  #project hr {
    margin:20px auto;
    width:calc(100% - 20px);
  }

  .aboutcontainer .portraitimage {
    width:100%;
    margin-left:0;
    float:none;
  }

}