@font-face {
  font-family: "Trade";
  font-style: normal;
  font-weight: 400;
  src: local("Trade"), local("TradeGothic BoldCondTwenty"), url(../assets/fonts/tradegothic-boldcondtwenty-webfont.woff) format("woff");
}
@font-face {
  font-family: "AltTrade";
  src: url("../assets/fonts/ufonts.com_alternate_gothic_no3_d-webfont.eot");
  src: url("../assets/fonts/ufonts.com_alternate_gothic_no3_d-webfont.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/ufonts.com_alternate_gothic_no3_d-webfont.woff") format("woff"), url("../assets/fonts/ufonts.com_alternate_gothic_no3_d-webfont.ttf") format("truetype"), url("../assets/fonts/ufonts.com_alternate_gothic_no3_d-webfont.svg#alternate_gothic_no3_dregular") format("svg");
  font-weight: normal;
  font-style: normal;
}
* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  -moz-box-sizing: border-box; /* Firefox */
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

img,
a {
  border: none;
  text-decoration: none;
  color: inherit;
}

body {
  background-color: #000000;
  margin: 0;
  padding: 0;
  font-family: "Open Sans Condensed", "Arial Narrow", Arial, sans-serif;
  font-family: Verdana;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

#wrapper.desktop {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  /* ------ VIDEO ----- */
}
#wrapper.desktop #container {
  position: relative;
  z-index: 10;
}
#wrapper.desktop .top-nav {
  position: absolute;
  left: 0px;
  top: 10px;
  width: 100%;
  display: flex;
  justify-content: center;
}
#wrapper.desktop .top-nav ul {
  display: flex;
  text-transform: uppercase;
  justify-content: space-between;
  align-items: center;
  width: 639px;
}
#wrapper.desktop .top-nav ul li {
  font-weight: bold;
  text-transform: uppercase;
}
#wrapper.desktop .top-nav ul li h1 {
  color: rgba(255, 255, 255, 0.4);
  transition: 0.8s ease-in-out;
  margin: 0;
}
#wrapper.desktop .top-nav ul li h1:hover {
  cursor: pointer;
  color: #b5b5b5;
}
#wrapper.desktop .top-nav ul li h1.active {
  color: #b5b5b5;
}
#wrapper.desktop .copy {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.5%;
  display: flex;
  text-align: left;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
}
#wrapper.desktop .copytop-desktop {
  margin-top: -11%;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 1px;
}
#wrapper.desktop .copytop-desktop li {
  margin-bottom: 1px;
}
#wrapper.desktop .copytop-desktop ul {
  margin-top: 7px;
}
#wrapper.desktop .copybottom-desktop {
  margin-top: 4%;
}
#wrapper.desktop .copybottom-desktop a {
  color: rgba(255, 255, 255, 0.65);
}
#wrapper.desktop .copybottom-desktop a:hover {
  color: rgb(255, 255, 255);
  cursor: pointer;
}
#wrapper.desktop .copybottom-desktop h1 {
  font-size: 9px !important;
  font-size: 0.7vw !important;
}
#wrapper.desktop .copybottom-desktop h1:first-child, #wrapper.desktop .copybottom-desktop h1:nth-child(2), #wrapper.desktop .copybottom-desktop h1:nth-of-type(2) {
  text-transform: uppercase;
}
#wrapper.desktop .copybottom-desktop ul h1 {
  margin-top: 0;
}
#wrapper.desktop .copybottom-desktop li {
  font-weight: 400;
  font-size: 8px;
  font-size: 0.7vw;
  margin-bottom: 1px;
}
#wrapper.desktop h1,
#wrapper.desktop p {
  color: #b5b5b5;
  font-size: 0.7vw !important;
  font-size: 0.8vw;
}
#wrapper.desktop h1 {
  font-weight: bold;
}
#wrapper.desktop .bold {
  color: #b5b5b5;
  font-weight: 700 !important;
  font-size: 9px !important;
  font-size: 0.7vw !important;
}
#wrapper.desktop li {
  list-style: none;
  font-size: 9px;
  font-size: 0.7vw;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 3px;
}
#wrapper.desktop #navWrapper {
  position: absolute;
  top: 50%;
  width: 100%;
  overflow: hidden;
  left: 0px;
  z-index: 10;
}
#wrapper.desktop #nav {
  position: relative;
  display: inline-block;
}
#wrapper.desktop #nav .thumb {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
#wrapper.desktop #nav .thumb,
#wrapper.desktop #nav .center {
  position: absolute;
  height: 100%;
  display: block;
  cursor: pointer;
}
#wrapper.desktop #nav .thumb img,
#wrapper.desktop #nav .center img {
  width: 100%;
  height: 100%;
}
#wrapper.desktop .highlight {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: #b5b5b5;
  opacity: 0;
}
#wrapper.desktop .page {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  visibility: hidden;
}
#wrapper.desktop .page .imgContainer {
  position: absolute;
  width: 44.45%;
  height: 44.5%;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
}
#wrapper.desktop .page img {
  display: block;
  height: auto;
  width: 100%;
}
#wrapper.desktop .topleft {
  top: 0px;
  left: 0px;
}
#wrapper.desktop .topright {
  top: 0px;
  left: 55.6%;
}
#wrapper.desktop .bottomleft {
  bottom: 0px;
  left: 0px;
}
#wrapper.desktop .bottomright {
  bottom: 0px;
  left: 55.6%;
}
#wrapper.desktop #player {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 0%;
  height: 100%;
  z-index: 20;
  overflow: hidden;
}
#wrapper.desktop #playerContainer {
  position: relative;
}
#wrapper.desktop #playerContainer + h1 {
  font-size: 40px !important;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -30%);
  text-align: center;
}
#wrapper.desktop #pageContainer {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  visibility: hidden;
}
#wrapper.desktop #footer {
  position: absolute;
  left: 0px;
  bottom: 10px;
  width: 100%;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 1px;
  font-size: 10px;
  font-size: 0.7vw;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
#wrapper.desktop #footer a {
  margin-right: 10px;
}
#wrapper.desktop #footer li {
  display: inline;
  color: rgba(255, 255, 255, 0.4);
  opacity: initial;
  cursor: pointer;
}
#wrapper.desktop #footer a:hover,
#wrapper.desktop #footer li:hover {
  color: #ffffff;
  transition: all 0.5s ease-out allow-discrete;
}
#wrapper.desktop .close {
  position: absolute;
  z-index: 15;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
#wrapper.desktop .cinema {
  background: black;
  width: 100vw;
  z-index: 15;
  position: absolute;
  left: 0;
  right: 0;
  display: block;
}
#wrapper.desktop video.transition {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 1000px;
  margin-top: 80px;
  transform: translate(-50%, -50%);
}

#wrapper.mobile {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
#wrapper.mobile .mobile-header {
  margin-top: 30px;
}
#wrapper.mobile .mobile-header img {
  width: 100%;
  height: auto;
}
#wrapper.mobile .copytop-mobile {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 1px;
}
#wrapper.mobile .copytop-mobile li {
  margin-bottom: 1px;
}
#wrapper.mobile .copytop-mobile ul {
  margin-top: 7px;
}
#wrapper.mobile .copybottom-mobile {
  margin-top: 10px;
  margin-bottom: 20px;
}
#wrapper.mobile .copybottom-mobile a,
#wrapper.mobile .copybottom-mobile li {
  color: rgba(255, 255, 255, 0.65);
}
#wrapper.mobile .copybottom-mobile a:hover,
#wrapper.mobile .copybottom-mobile li:hover {
  color: rgb(255, 255, 255);
}
#wrapper.mobile .copybottom-mobile li {
  font-family: Verdana, Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  margin-bottom: 1px;
  text-align: center;
}
#wrapper.mobile .copybottom-mobile h1 {
  font-size: 16px !important;
}
#wrapper.mobile .copybottom-mobile h1:first-child {
  text-transform: uppercase;
}
#wrapper.mobile h1 {
  color: #b5b5b5;
  font-weight: bold;
  font-size: 20px;
  text-align: center;
}
#wrapper.mobile .bold {
  color: #b5b5b5;
  font-weight: 700 !important;
  font-size: 14px !important;
}
#wrapper.mobile li {
  list-style: none;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 3px;
}
#wrapper.mobile .thumb {
  width: 100%;
}
#wrapper.mobile .thumb img {
  display: block;
  height: auto;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 9/3;
}
#wrapper.mobile .mobile-footer {
  position: relative;
  width: 100%;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 1px;
  font-size: 14px;
  margin-bottom: 30px;
  margin-top: 50px;
}
#wrapper.mobile .mobile-footer a:hover {
  color: #ffffff;
}
#wrapper.mobile .close {
  position: absolute;
  z-index: 10;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
#wrapper.mobile + .project-modal {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
  visibility: hidden;
  opacity: 0;
  background-color: #000000;
}
#wrapper.mobile + .project-modal h1 {
  font-weight: bold;
  text-align: left;
  font-size: 16px;
  margin-bottom: 5px;
  margin-top: 5px;
}
#wrapper.mobile + .project-modal li {
  text-align: left;
  font-size: 14px;
  list-style-type: none;
}
#wrapper.mobile + .project-modal img {
  display: block;
  max-width: 389px;
  max-height: 144px;
  height: auto;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  margin-bottom: 5px;
}
#wrapper.mobile + .project-modal iframe {
  margin-top: 50px;
  margin-bottom: 5px;
}
#wrapper.mobile + .project-modal .copy {
  padding-left: 20px;
  padding-right: 20px;
  margin-bottom: 70px;
  color: #b5b5b5;
}
#wrapper.mobile + .project-modal .copy ul {
  padding: 0;
  list-style: none;
}
#wrapper.mobile + .project-modal .copy ul li {
  display: inline;
}
#wrapper.mobile + .project-modal .copy ul li::after {
  content: " // ";
}
#wrapper.mobile + .project-modal .copy ul li:last-child::after {
  content: ""; /* Removes the separator from the last item */
}/*# sourceMappingURL=index.css.map */