@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url("https://use.typekit.net/rih1tzz.css");
body {
  margin: 0;
  //background: #010101 url('../img/zwartevilt.png') center top repeat;
  //background: #010101;
  background: #060606;
  background: #010101;
  background: #000000;
  color: #ccc;
  color: #f1f1f1;
  color: #f3f3f3;
  //color: #e2e2e2;
  //color: #fff;
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
  font-weight: 400;
  //letter-spacing: 0.075em;
  //letter-spacing: 0.05em;
}

body.light {
  background: #f3f3f3;
  color: #000000;
}

body.modal {
  overflow: hidden;
}

body * {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
 

body * {
  box-sizing: border-box;
}

::-moz-selection {
  background: #888;
  background-color: red;
}

::selection {
  background: #888;
  background-color: rgb(178, 89, 89);
  background: #454545;
}

h1, h2, h3, h4 {
  text-transform: uppercase;
  //letter-spacing: 0;
  letter-spacing: 0.15vw;
}

h1 {
  font-weight: 100;
}

h2, h3 {
  font-weight: 200;
}

h4 {
  font-size: 1.1em;
  font-weight: 900;
  margin-bottom: 1em;
}

h4 .thin {
  font-weight: 400;
}

b {
  font-weight: 900;
  text-transform: uppercase;
  clear: both
}

hr {
  border: none !important;
  display: block;
  width: 100%;
  height: 5vw;
  min-height: 80px; //max-height: 140px;
  margin: 0 0 0 0;
  background: #151515;
  background: repeating-linear-gradient(-55deg, transparent, transparent 3em, rgba(120, 120, 120, 0.2) 3em, rgba(120, 120, 120, 0.2) 6em);
}

.page_content>hr {
  min-height: 70px;
  height: 3vw;
}

img {
  pointer-events: none;
}
/*
span, p, i {
  -webkit-user-select: auto !important;
  -moz-user-select: auto !important;
  -ms-user-select: auto !important;
  user-select: auto !important;
}

h1 span, h2 span, h3 span, h4 span {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}
  */

.button, a.button {
  display: inline-block;
  padding: 0.3em 1em;
  color: #111;
  background: #ccc;
  text-decoration: none;
  text-transform: uppercase;
  //border-radius: 2px;
  transition: all 0.2s ease-out;
}

.button:hover, a.button:hover {
  background: #eee;
}

/* @begin UTILITY */
.text_center {
  text-align: center !important;
}

.resizing * {
  transition: all 0s 0s linear !important;
}

.ease, .cell>*.ease:hover, .cell>*:hover .ease {
  transition: all 0.2s ease-out;
}

/* @end UTILITY */
/* @begin STRUCTURE */
.page_content {}

body.modal .page_content {}

section {
  position: relative;
  width: 100%;
  clear: both;
}

/* @end STRUCTURE */
/* @begin HEADER */
/*
.page_content>header {
  position: relative;
  height: 5.65em;
  font-size: 1.2em;
  text-align: center;
}

@media screen and (min-width: 48em) {
  .page_content>header {
    font-size: 1.5em;
  }
}

@media screen and (min-width: 64em) {
  .page_content>header {
    //font-size: 1.8em;
  }
}
*/

#brute {
  display: block;
  position: relative;
  width: 100%;
  height: 39.5vw;
  height: 55vw;
  height: 45.4vw;
  overflow: hidden;
  border-style: solid;
  border-color: #f1f1f1;
  border-width: 0 0 0.7vw 0.7vw;
  z-index: 200;
}

body.light #brute {
  border-color: #000000;
}



#brute .line-01, #brute .line-02, #brute .line-03 {
  display: block;
  overflow: hidden;
  width: 95.23vw;
  width: 97.2vw;
  position: absolute;
  pointer-events: none;
  //background: #f3f3f3;
  border-style: solid;
  border-color: #f3f3f3;
  border-width: 0.7vw;
  z-index: 6000;
  display: none;
}

body.light #brute .line-01, body.light #brute .line-02, body.light #brute .line-03 {
  border-color: #000000;
}

#brute .line-01 {
  width: 94.08vw;
  width: 100vw;
  //width: 97.2vw;
  height: 0.5vw;
  height: 46vw;
  left: 0;
  bottom: 3.3vw;
  border-right-width: 0;
}

#brute .line-02 {
  width: 95.23vw;
  width: 97.2vw;
  height: 0.5vw;
  height: 46vw;
  right: 0;
  bottom: 3.3vw;
  border-right-width: 0;
  border-bottom-width: 0;
  border-left-width: 0;
}

#brute .line-03 {
  width: 97.2vw;
  height: 6vw;
  right: 0;
  top: 0;
  border-top-width: 0;
  border-bottom-width: 0;
  border-left-width: 0;
}

.brute_wrapper {
  z-index: 10;
  position: absolute;
  display: block;
  width: inherit;
  height: inherit;
  transform: scale(1.4);
  pointer-events: none;
  margin-top: 5.94vw;
  margin-left: -0.35vw;
}

.brute_name {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  font-family: "field-gothic-xxxcondensed", sans-serif;
  font-size: 30vw;
  letter-spacing: -0.2vw !important;
}

.brute_name .n {
  font-size: 24.36vw;
  margin-right: 2.7vw;
}

.brute_title {
  position: absolute;
  font-family: "raleway", sans-serif;
  font-size: 1.5vw;
  text-transform: uppercase;
  //left: 18.71vw;
  //top: 5vw;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  margin: -8.355vw 0 0 -24.885vw;
  line-height: 1.8vw;
  letter-spacing: 0.69vw;
}


/* @begin MENU */

#menu {
  position: relative;
  display: block;
  width: 100vw;
  //width: 30vw;
  height: 10.35vw;
  left: 0;
  top: 0;
  overflow: hidden;
  z-index: 8888;
  text-transform: uppercase;
  padding: 0;
  margin: 0;
  border-style: solid;
  border-color: #f1f1f1;
  border-width: 0 0.7vw 0.7vw 0;
}

body.light #menu {
  border-color: #000000;
}

.menu_inner {
  position: absolute;
  width: 88vw;
  height: 10vw;
  top: 0;
  left: 50%;
  transform: translate(-50%,0);
  margin-left: 0.35vw;
}

#menu a, #menu a:visited {
  display: inline-block;
  color: inherit;
  position: absolute;
  overflow: visible;
  width: auto;
  height: auto;
  top: 50%;
  transform: translate(0, -50%);
  text-decoration: none;
  font-size: 3vw;
  //font-size: 1.15vw;
  letter-spacing: 0.04vw;
  letter-spacing: 0.045vw;
  letter-spacing: 0.05vw;
  //letter-spacing: 0.1vw;
  pointer-events: all !important;
  cursor: pointer !important;
}

@media screen and (min-width: 48em) {
  #menu {
    height: 6.35vw;
  }
  .menu_inner {
    height: 6vw;
  }
  #menu a, #menu a:visited {
    font-size: 1.2vw; 
    font-size: 1.6vw;
  }
}

@media screen and (min-width: 64em) {
  #menu a, #menu a:visited {
    font-size: 1.2vw;
  }
}

@media screen and (min-width: 100em) {
  
}

#menu a:hover,  #menu a:active {
  //text-decoration: underline;
  //font-weight: 900;
}

#menu a::after {
  content: '';
  display: none;
  position: absolute;
  width: 100%;
  height: 0.25vw;
  background: #f1f1f1;
  bottom: -0.4vw;
  left: 0;
}

body.light #menu a::after {
  background: #000000;
}

#menu a:hover::after {
  display: block;
}

#menu a.l {
  left: 0;
}

#menu a.m {
  text-align: center;
  left: 50%;
  transform: translate(-50%, -50%);
}

#menu a.r {
  text-align: right;
  right: 0;
}

body.light #menu a.r {
  transform: translate(0, -50%) rotateZ(180deg);
}

body.light #menu a.r::after {
  top: -0.4vw;
  bottom: auto;
}

/* @end MENU */

#lander {
  display: block;
  overflow: hidden;
  position: relative;
  margin: 0;
  padding: 5vw 0;
  display: none;
}

.hero-video {
  position: relative;
  width: 84%;
  height: 10vw;            /* adjust to your design; or use 400px if fixed height */
  overflow: hidden;
  left: 50%;
  transform: translate(-50%, 0);
}

.hero-video video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;        /* keeps aspect ratio, fills like background-size: cover */
  object-position: center;
  pointer-events: none;     /* disables all interaction */
}

.overlay-content {
  position: relative;
  z-index: 1;
  color: white;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;     /* clickable if needed */
}



.page_content>header {
  //background: #f3f3f3;
}

.page_content>header, #profile {
  text-align: center;
}

#profile {
  padding: 6vw 2vw 2vw 2vw;
  font-weight: 100;
  font-style: normal;
  text-transform: uppercase !important;
  letter-spacing: 0.8vw !important;
  //letter-spacing: 0.1vw !important;
  margin-right: -0.4vw;
}

.page_content>header b, #profile span b {
  font-weight: 900;
  text-transform: inherit !important;
}

.page_content>header {
  overflow: hidden;
}

.page_content>header h1 {
  color: #f3f3f3;
  color: #010101;
  //cursor: default;
  font-weight: 200;
  font-size: 7.5vw;
  transform: translate(3.2vw,0);
  margin: 0 -3vw !important;
}

.page_content>header span, #profile span {
  display: block;
}

#profile .avatar {
  display: inline-block;
  position: relative;
  width: 16vw;
  height: 16vw;
  border-radius: 50%;
  background: white;
  margin-bottom: 3vw;
}

#profile .profile-info {
  display: block;
  position: relative;
  height: auto;
  width: 100%;
  text-align: center;
  letter-spacing: 0vw !important;
  //text-transform: none !important;
  margin-bottom: 8vw;
  font-family: "futura-pt", sans-serif;
  font-family: "Raleway", sans-serif;
  font-family: "Montserrat", sans-serif;
}

#profile .profile-info b {
  font-weight: 600;
}

#profile .profile-info span {
  margin-bottom: -.1vw;
  font-size: 2.79vw;
}

#profile .profile-info .name {
  letter-spacing: 1.5vw !important;
  margin-right: -1.5vw;
}

#profile .profile-info .title {
  font-size: 1.3vw;
  font-weight: 200;
  letter-spacing: 1.5vw !important;
  margin-right: -1.65vw;
}

@media screen and (min-width: 48em) {
  .page_content>header {
    //font-size: 2.7vw;
  }
}

header.rv {
  height: 5vw;
  padding: 0 !important;
  margin: 0 !important;
  display: block;
  position: relative;
  overflow: hidden;
  display: none;
}

header.rv span {
  display: block;
  position: absolute;
  //color: #010101;
  font-size: 3vw;
  width: 50%;
  height: auto;
  top: 50%;
  transform: translate(0, -50%);
  margin: 0 0 0 0 !important;
  padding: 0 !important;
}

header.rv .left {
  font-weight: 900;
  left: 1vw;
  text-align: left;
}

header.rv .right {
  font-weight: 200;
  text-align: right;
  right: 0.55vw;
}

@media screen and (min-width: 64em) {
  .page_content>header {
    //font-size: 2vw;
  }
  #profile .name {
    //font-size: 5vw;
    //margin-bottom: 0vw;
  }
  #profile .title {
    //font-size: 1.225vw;
    //margin-right: -0.31vw;
  }
}

@media screen and (min-width: 100em) {
  .page_content>header {
    //font-size: 1.66em;
  }
}

.page_content>header span b {
  //text-transform: none !important;
}


.page_content header.nb {
  display: none !important;
}

.page_content>header .vibrant {
  transition: background 1s 1s ease-out;
}

.page_content>header .vibrant[mode="1"] {
  background: -webkit-linear-gradient(45deg, #30a0da 1%, #a1feff 75%, #deffb3 99%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page_content>header .vibrant[mode="2"] {
  background: -webkit-linear-gradient(45deg, #e9306d 1%, #fd9696 75%, #fbffba 99%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page_content>header .vibrant[mode="3"] {
  background: -webkit-linear-gradient(45deg, #f4556c 1%, #f38bfa 75%, #90d6fe 99%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page_content>header .vibrant[mode="4"] {
  background: -webkit-linear-gradient(45deg, #049fe7 1%, #8479f0 75%, #e085f7 99%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*
.page_content>header .vib:nth-child(1) {
  color: #ea5e6d;
}

.page_content>header .vib:nth-child(2) {
  color: #f07a69;
}

.page_content>header .vib:nth-child(3) {
  color: #f9a162;
}

.page_content>header .vib:nth-child(4) {
  color: #ffbd5e;
}
*/
.page_content>header>h1 {
  
 }

@media screen and (min-width: 64em) {
  .page_content>header>h1 {
    
  }
}

/* @end HEADER */
/* @begin REEL */
.reel {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 0;
  padding-bottom: 56.3%;
  display: none;
}

.reel iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/* @end REEL */
/* @begin MAIN */
main {
  position: relative;
  //background:#e2e2e2;
  display: block;
  overflow: hidden;
  z-index: 100;
  //margin-top: -3.25vw;
  background:#f3f3f3;
  //background:#000000;
  //margin-top: -4vw;
  margin-top: -0.7vw;
  background: linear-gradient(
  to bottom in lab,
  #f3f3f3 0%,
  #000000 100%
  );
  background-size: 100% 30vw;
  background-size: 100% 59.3vw;
  background-size: 100% 90%;
  background-repeat: no-repeat;
  background-color: #000000;
  background-position: 0 0.7vw;
  //background-position: 0 0;
}

body.light main {
  background:#000000;
  //background:#f3f3f3;
}

body.light main {
  background:#000000;
  //background:#f3f3f3;
  background: linear-gradient(
  to bottom in oklab,
  #000000 0%,
  #f3f3f3 100%
  );
  background-size: 100% 70%;
  background-repeat: no-repeat;
  background-color: #f3f3f3;
  background-position: 0 0;
  //background-size: 100% 59.3vw;
  background-size: 100% 90%;
  background-position: 0 0.7vw;
}

main[view="grid"] .grid, main[view="reel"] .reel {
  display: block !important;
}

.grid {
  position: relative;
  overflow: hidden;
  width: 100%;
  display: none;
}

.cell {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 60%;
  //padding-bottom: 122%;
  overflow: hidden;
  color: #fff;
  font-size: 3.1vw;
  margin-top: 0.5%;
}

.cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media screen and (min-width: 48em) {
  .cell {
    width: 50%;
    width: calc(100%/2);
    width: calc(99.35%/2);
    padding-bottom: 28%;
    padding-bottom: 60%;
    margin-right: 0.65%;
    margin-top: 0.65%;
    font-size: 1.3vw;
    float: left;
  }

  .cell:nth-child(2n) {
    margin-right: 0;
  }

  .cell:last-child {
    width: 100%;
  }

  .cell:last-child>*>img {
    
  }
}

@media screen and (min-width: 64em) {
  .cell, .cell:last-child {
    width: 33.3%;
    width: calc(100%/3);
    width: calc(98.7%/3);
    padding-bottom: 33.33%;
    //padding-bottom: 32.68%;
    //padding-bottom: 20%;
    padding-bottom: 40%;
    font-size: 0.9vw;
    margin-right: 0.65%;
    margin-top: 0.65%;
  }
  
  .cell:nth-child(2n) {
    margin-right: 0.65%;
  }

  .cell:nth-child(3n) {
    margin-right: 0;
  }

  .cell:last-child {
    width: 66.66%;
    width: calc((100%/3)*2);
    width: calc((98.7%/3)*2 + 0.65%);
    margin-right: 0;
  }

}

@media screen and (min-width: 100em) {
  .cell, .cell:last-child {
    width: 25%;
    width: calc(100%/4);
    width: calc(98.05%/4);
    padding-bottom: 14.5%;
    padding-bottom: 30%;
    //padding-bottom: 35%;
    font-size: 0.65vw;
  }

  .cell:last-child {
    width: 100%;
    width: calc(100%/2);
    width: calc((98.05%/2) + 0.65%);
    //padding-bottom: 16.67%;
    //padding-bottom: 13%;
    //width: 25%;
    margin-right: 0;
    margin-top: 0.65%;
  }

  .cell:nth-child(3n) {
    margin-right: 0.65%;
  }

  .cell:nth-child(4n) {
    margin-right: 0;
  }
  

}

.cell>* {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

.cell>*, .project_content {
  //color: #ccc;
}

.cell>*::before, .cell>*::after {
  content: '';
  position: absolute;
  display: block;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.cell>*::before {
  opacity: 0;
  transition: all 0.2s ease-out;
  /*
  background: -moz-linear-gradient(top, rgba(204, 204, 204, 0.05) 0%, rgba(204, 204, 204, 0.20) 50%);
  background: -webkit-linear-gradient(top, rgba(204, 204, 204, 0.05) 0%, rgba(204, 204, 204, 0.20) 50%);
  background: linear-gradient(to bottom, rgba(204, 204, 204, 0.05) 0%, rgba(204, 204, 204, 0.20) 50%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0dcccccc', endColorstr='#30cccccc', GradientType=0);
  */
  background: rgba(1, 1, 1, 0.75);
  //background: -moz-linear-gradient(0deg, rgba(1, 1, 1, 0.5) 0%, rgba(1, 1, 1, 0) 100%) !important;
  //background: -webkit-linear-gradient(0deg, rgba(1, 1, 1, 0.5) 0%, rgba(1, 1, 1, 0) 100%) !important;
  //background: linear-gradient(0deg, rgba(1, 1, 1, 0.5) 0%, rgba(1, 1, 1, 0) 100%) !important;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#010101", endColorstr="#010101", GradientType=1) !important;
}

.cell>*::after {
  opacity: 1;
  opacity: 0.5;
  background: rgba(204, 204, 204, 0.15);
  display: block;
  display: none;
}

.cell:last-child>*::after {
  display: block;
}

.cell>*::before {
  opacity: 1;
}

@media screen and (min-width: 48em) {
  .cell>*::before {
    opacity: 1;
  }

  .cell:last-child>*::before {
    opacity: 1;
  }

  .cell>*:hover::before {
    opacity: 1;
  }

  .cell>*::after {
    display: block;
    opacity: 0.5;
    display: none;
  }
}

.cell>*>img {
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

@media screen and (min-width: 64em) {
  .cell>*::before {
    opacity: 0;
  }

  .cell>*>img {
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1);
  }

  .cell>*:hover>img {
    -webkit-transform: translate3d(0, 0, 0) scale(1.03);
    transform: translate3d(0, 0, 0) scale(1.03);
  }
}

.cell>.showreel>img {
  //width: 100%;
  //height: auto;
}

.cell>* .cell_title {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  height: auto;
  width: 100%;
  text-align: left;
  
  font-family: "field-gothic-xxxcondensed", sans-serif;
  font-size: 8em;
  line-height: 0.81em;
  line-height: auto;
}

.cell_title h3 {
  margin: 0 0 0 0  !important;
}

.cell * {
  color: #ffffff !important;
}

@media screen and (min-width: 48em) {
  .cell>* .cell_title {
    text-align: justify;
  }
}

@media screen and (min-width: 64em) {
  .cell>* .cell_title {
    position: absolute;
    opacity: 0;
  }

  .cell>*:hover .cell_title, .cell:last-child .cell_title {
    opacity: 1;
  }
}

.cell_info {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  font-size: 1.3em;
  text-align: left;
}

.cell>* .cell_title, .cell_info {
  padding: 2.05vw 3.075vw;
  padding: 2vw 3vw;
  //padding: 2vw;
}

.cell_info b {
  font-weight: 800;
  text-transform: uppercase;
  display: inline-block;
  padding-right: 1.1em;
}

.cell_info .spacer {
  display: inline-block;
  position: relative;
  width: 1em;
  letter-spacing: 0;
  border-style: solid;
  border-color: #f3f3f3;
  border-width: 0 0 0.1em 0;
}

.cell_info a {
  pointer-events: all !important;
  font-size: inherit;
  text-decoration: none;
  color: #ddd;
  font-weight: inherit;
}

.cell>* .cell_client, .cell_project {
  display: inline-block;
  width: 100%;
  position: relative;
  opacity: 1;
}

@media screen and (min-width: 64em) {
  .cell>* .cell_client, .cell>* .cell_project {
    opacity: 0;
  }

  .cell>*:hover .cell_client, .cell>*:hover .cell_project, .cell:last-child .cell_client {
    opacity: 1;
  }
}

.cell_project {
  display: none !important;
}


#rchive .project_left_inner article {
  margin: 4em 0 0 0;
  overflow: hidden;
}

#rchive .project_left_inner article:first-of-type {
  margin: 0 0 0 0;
}

#rchive .project_left_inner article.alt {
  margin: 6em 0 0 0;
}

#rchive .project_left_inner article:last-child {
  margin-bottom: 0;
}


@media screen and (min-width: 48em) {
  .cell>*.contact::before {
    display: none !important;
  }
}

.cell>*.contact::after {
  background: rgba(155, 155, 155, 0.15);
}


#modal[active="contact"] .mc_slash {
  background: #ccc;
}


/* @end MAIN */
/* @begin MODAL */
#modal {
  position: fixed;
  z-index: 9000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 1;
  //background: rgba(204, 204, 204, 0.2);
  //background: rgba(0, 0, 0, 0.42);
  //background: rgba(50, 50, 50, 0.8);
  //background: rgba(120, 120, 120, 0.6);
  backdrop-filter: blur(8px);
}

#modal[active=""] {
  pointer-events: none;
  background: rgba(204, 204, 204, 0);
  background: none;
  backdrop-filter: none;
}

#modal_inner {
  position: absolute;
  z-index: 9990;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0);
  width: 92%;
  width: calc(100% - 3vw);
  height: 92%;
  height: calc(100% - 1.5vw);
  padding: 0;
  //border-radius: 10px 10px 0 0;
  overflow: hidden;
  backdrop-filter: blur(50px);
  background: rgba(30, 30, 30, 0.7);
  border-width: 1px 1px 0 1px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.15);
}

#modal[active=""] #modal_inner {
  -webkit-transform: translate3d(-50%, 100%, 0);
  transform: translate3d(-50%, 100%, 0);
}

#modal_load {
  opacity: 0;
  transition: all 1s ease-out;
}

#modal_load.active {
  opacity: 1;
}

#modal_close {
  position: absolute;
  display: block;
  z-index: 9999;
  top: 0;
  right: 0;
  height: 6em;
  width: 6em;
  text-decoration: none;
}

.mc_slash {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0) scale(1, 1);
  transform: translate3d(-50%, -50%, 0) scale(1, 1);
  width: 0.1em;
  height: 2.2em;
  pointer-events: none;
}

.mc_slash.one {
  -webkit-transform: translate3d(-50%, -50%, 0) rotate(45deg) scale(1, 1);
  transform: translate3d(-50%, -50%, 0) rotate(45deg) scale(1, 1);
}

#modal_close:hover .mc_slash.one {
  -webkit-transform: translate3d(-50%, -50%, 0) rotate(45deg) scale(2, 1);
  transform: translate3d(-50%, -50%, 0) rotate(45deg) scale(2, 1);
}

.mc_slash.two {
  -webkit-transform: translate3d(-50%, -50%, 0) rotate(-45deg) scale(1, 1);
  transform: translate3d(-50%, -50%, 0) rotate(-45deg) scale(1, 1);
}

#modal_close:hover .mc_slash.two {
  -webkit-transform: translate3d(-50%, -50%, 0) rotate(-45deg) scale(2, 1);
  transform: translate3d(-50%, -50%, 0) rotate(-45deg) scale(2, 1);
}

.mc_slash {
  background: #ccc;
}

#modal[active=""] .mc_slash {
  background: #ccc;
}

/* @end MODAL */
/* @begin PROJECT CONTENT */
.project_content, #modal {
  font-size: 0.7rem;
}

.project_content {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.project_content header {
  position: relative;
  width: 100%;
}

.project_content h2 {
  position: relative;
  font-size: 2.1em;
  margin-top: 0.2em;
  margin-bottom: 1.3em;
  padding-left: 2.1rem;
  padding-right: 2.1rem;
}

@media screen and (min-width: 48em) {
  .project_content h2 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

.project_layout {
  position: relative;
  height: 100%;
  width: 100%;
  //background: #1b1b1b;
}

.project_left, .project_right {
  position: relative;
  width: 100%;
}

.project_right {
  z-index: 3;
  height: auto; //height: 46.8vw;
  font-size: 2.8vw;
  padding: 2.5em 0;
  text-align: left !important;
  //background: #151515;
  //background: rgba(40, 40, 40, 0.8);
  //background: rgb(21, 21, 21);
  //background: -moz-linear-gradient(-45deg, rgba(38, 38, 38, 1) 0%, rgba(21, 21, 21, 1) 40%);
  //background: -webkit-linear-gradient(-45deg, rgba(38, 38, 38, 1) 0%, rgba(21, 21, 21, 1) 40%);
  //background: linear-gradient(135deg, rgba(38, 38, 38, 1) 0%, rgba(21, 21, 21, 1) 40%);
  //filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#262626', endColorstr='#151515', GradientType=1);
}

.project_left {
  z-index: 1;
  height: calc(100% - 46.8vw);
  height: 100%;
  background: rgba(20, 20, 20, 0.5);
}

@media screen and (min-width: 48em) {
  .project_left, .project_right {
    float: left;
    height: 100%;
  }

  .project_right {
    font-size: inherit;
  }
}

.project_left_inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  overflow: auto;
}

@media screen and (max-width: 48em) {
  .project_left_inner {
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

.project_left_inner article {
  margin-bottom: 10vw;
}

.project_left_inner article.images img {
  max-width: 100%;
  width: auto;
}

.project_left_inner article.vids img,
.project_left_inner article.images img,
.project_left_inner article.vids video {
  max-width: 100%;
  pointer-events: none;
}

.project_left_inner article.images,
.project_left_inner article.gifs,
.project_left_inner article.vids {
  padding-left: 1rem;
  padding-right: 1rem;
}

@media screen and (min-width: 48em) {
  .project_left_inner article {
    margin-bottom: 6.4vw;
  }
  .project_left_inner article.images,
  .project_left_inner article.gifs,
  .project_left_inner article.vids {
    padding-left: 1.5em;
    padding-right: 1.5em;
  }
}

@media screen and (min-width: 64em) {
  .project_left_inner article {
    margin-bottom: 6.4vw;
  }
}

@media screen and (min-width: 100em) {
  .project_left_inner article {
    margin-bottom: 7vw;
  }
}

.project_left_inner article:last-child {
  margin-bottom: 0;
}

.project_left_inner article.projLogo {
  margin-top: -3vw;
  margin-bottom: 8vw !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

.project_left_inner article.projLogo h2 {
  margin-top: 0;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.08) !important;
  font-size: 9vw;
}

@media screen and (min-width: 48em) {
  .project_left_inner article.projLogo {
    //margin-top: -2vw;
    margin-bottom: 3.5vw !important;
  }

  .project_left_inner article.projLogo h2 {
    font-size: 4vw;
  }
}

.project_left_inner article p {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  max-width: 90em;
  text-align: justify;
  padding-left: 3em;
  padding-right: 3em;
  line-height: 1.8;
  font-weight: 500;
}

.project_left_inner a {
  color: inherit;
}

@media screen and (min-width: 48em) {
  .project_content, #modal {
    //font-size: 0.85em;
  }

  .project_left {
    width: calc(100% - 26em);
  }

  .project_right {
    width: 26em;
    height: 100%;
  }
}

@media screen and (min-width: 64em) {
  .project_content, #modal {
    font-size: 0.8rem;
  }

  .project_left {
    width: calc(100% - 26em);
  }

  .project_right {
    width: 26em;
  }
}

@media screen and (min-width: 100em) {
  .project_content, #modal {
    //font-size: 0.8vw;
  }
}

.p_info {
  margin: 0;
  padding-left: 2.1rem;
  padding-right: 2.1rem;
}

@media screen and (min-width: 48em) {
  .p_info {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

.p_info hr {
  height: 1px;
  min-height: 1px;
  margin: 1.5em 0;
  background: #444;
}

.p_info p {
  display: block;
  margin: 0 0 0.5em 0;
  padding: 0;
}

.p_info p b {
  text-transform: uppercase;
  display: inline-block;
  padding-right: 1.3em;
}

.p_info a,
.p_info a:hover {
  color: inherit;
}

.project_left img {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 100%;
}

.project_left img.gif {
  width: auto;
}

.project_left img.limit {
  height: auto;
  width: auto;
}

.vid_embed {
  position: relative;
  width: 100%;
  height: 0;
  background: #000;
  padding-bottom: 56.25%;
}

.vid_embed.square {
  padding-bottom: 100%;
}

.vid_embed.widescreen {
  padding-bottom: 41.66%;
}

.vid_embed.widescreen2 {
  padding-bottom: 37.5%;
}

.vid_embed.anamorphic {
  padding-bottom: 46.2%;
}

.vid_embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.vid_embed.nl {
  max-width: 745px;
  padding-bottom: 0;
  height: auto;
}

.vid_embed.nl iframe {
  position: relative;
  height: auto;
  width: 100%;
  max-width: 745px;
}

.vp-player-layout {
  width: 100% !important;
  height: auto !important;
  left: 0 !important;
  right: 0 !important;
}

@media screen and (min-width: 100em) {
  .img_grid img {
    width: 50%;
    width: calc(50% - 1px);
    float: left;
  }

  .img_grid.odd img:first-child {
    width: 100%;
  }

  .img_grid img:nth-child(2n+1) {
    margin-left: 1px;
  }
}

/* @end PROJECT CONTENT */
/* @begin SCROLLBAR OVERRIDES */
.scroll-wrapper {
  position: absolute !important;
  width: 100%;
  height: 100%;
}

.scroll-element.scroll-x {
  display: none !important;
}

.scrollbar-macosx>.scroll-element .scroll-bar {
  background-color: #6c6c6c;
}

.scroll-bar {
  opacity: 0 !important;
}

.scroll-bar.nowyouseeme, .scroll-bar:hover {
  opacity: 1 !important;
}

.scrollbar-macosx>.scroll-element.scroll-y .scroll-bar {
  width: 5px !important;
}

@supports (-moz-appearance:meterbar) and (display:flex) {
  .project_left_inner {
    overflow-y: scroll !important;
  }
}

/* @end SCROLLBAR OVERRIDES */
.hide-for-mobile {
  display: none;
}

.show-for-mobile {}

@media screen and (min-width: 48em) {
  .hide-for-mobile {
    display: block;
  }

  .show-for-mobile {
    display: none !important;
  }
}