@import url("https://fonts.googleapis.com/css?family=Roboto:100,400,700");
/*
 * @param $px - font size in px - returns rem equivalent
 */
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0; }

body {
  background-color: #ffffff;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-size: 16px; }

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50; }

.header--nav {
  width: 100%;
  height: 74px;
  background-color: #ffffff; }

.header--nav--bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 74px;
  width: 100%;
  display: block; }

.header--logo--holder {
  cursor: pointer;
  display: inline-block;
  position: relative;
  margin-top: 16px;
  margin-left: 24px; }

.header--logo {
  height: 35px;
  width: 126px;
  display: inline-block; }

.header--menu-button {
  cursor: pointer;
  position: absolute;
  display: inline-block;
  width: 30px;
  height: 30px;
  top: 24px;
  right: 24px; }
  .header--menu-button > span {
    overflow: hidden;
    display: block;
    pointer-events: none;
    position: absolute;
    height: 5px;
    background-color: #000100;
    left: 0;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    width: 100%; }
    .header--menu-button > span > span {
      -webkit-transform-origin: right;
              transform-origin: right;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }

.footer--container {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 24px;
  font-size: 0.75rem;
  width: 100%;
  z-index: 30;
  background-color: #ffffff; }

.footer--copyright {
  position: absolute;
  right: 24px;
  bottom: 4px; }

.footer--contact {
  position: absolute;
  left: 24px;
  bottom: 4px; }

@media only screen and (max-width: 780px) {
  .footer--container {
    font-size: 0.59375rem; } }

@media only screen and (max-width: 400px) {
  .footer--container {
    font-size: 0.5rem; } }

.background--canvas {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0; }

.header--menu {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 460px;
  max-width: 100%;
  overflow: hidden; }

.header--menu--panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff; }
  .header--menu--panel[data-col="blue"] {
    background-color: #3667a9; }
  .header--menu--panel[data-col="pink"] {
    background-color: #F8A99B; }
  .header--menu--panel[data-col="green"] {
    background-color: #056849; }
  .header--menu--panel[data-col="grey"] {
    background-color: #585857; }

.header--menu--panel--main {
  padding-top: 100px;
  overflow-x: hidden;
  overflow-y: auto; }
  .header--menu--panel--main::-webkit-scrollbar {
    width: 8px; }
  .header--menu--panel--main::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px; }
  .header--menu--panel--main::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0);
    border-radius: 8px; }

.header--menu--item {
  width: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 8px 0 8px 20px;
  font-size: 4.5rem;
  font-weight: 400; }
  .header--menu--item.header--menu--item--link {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    cursor: pointer; }
    .header--menu--item.header--menu--item--link[data-selected="true"]::after {
      content: "";
      border-bottom: 2px solid;
      -webkit-box-flex: 1;
          -ms-flex: auto;
              flex: auto;
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
      height: 0; }

@media only screen and (max-width: 400px) {
  .header--menu--item {
    font-size: 3.75rem; } }

.page-intro--canvas {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0; }

.grid--container {
  position: absolute;
  left: 12px;
  top: 0;
  width: calc(100% - 24px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: grid;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding-top: 120px;
  padding-bottom: 60px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }
  .grid--container[data-cols="1"] .grid--item--content--featured {
    grid-column: span 1;
    grid-row: span 1; }

.grid--item {
  cursor: pointer;
  -webkit-transform-origin: top;
          transform-origin: top;
  display: inline-block;
  position: relative;
  width: 100%;
  -webkit-box-flex: 360px;
      -ms-flex: 360px;
          flex: 360px;
  -o-object-fit: cover;
     object-fit: cover;
  overflow: hidden; }
  .grid--item::after {
    content: "";
    display: block;
    height: 0;
    padding-top: 60%; }

.grid--item--filler {
  height: 0;
  border: none; }

.grid--item--content {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  max-height: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden; }

.grid--item--content--featured {
  grid-column: span 2;
  grid-row: span 2; }

.grid--item--content--image {
  pointer-events: none;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center; }

.grid--item--content--label {
  font-size: 100px;
  font-weight: 700;
  white-space: nowrap;
  line-height: 4.5rem;
  letter-spacing: -0.04em;
  display: inline-block;
  -webkit-transform-origin: center center;
          transform-origin: center center;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  text-transform: uppercase; }

.grid--item--content--label--bg {
  pointer-events: none;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden; }

.page-video-detail--player {
  display: block;
  position: relative;
  width: 100%;
  min-height: 320px;
  max-height: calc(100vh - 240px);
  height: 56.25vw; }
  .page-video-detail--player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100%;
    background-color: #000100; }

.page-video-detail--cover {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  z-index: 10;
  -webkit-transform-origin: top;
          transform-origin: top; }

.page-video-detail--info {
  display: block;
  top: 0;
  left: 0;
  padding: 0 24px;
  margin: 0 auto 60px;
  width: 100%;
  max-width: 960px; }
  .page-video-detail--info h1 {
    color: #000100;
    font-size: 2rem;
    margin-bottom: 0;
    text-transform: uppercase; }
    .page-video-detail--info h1 > span {
      font-weight: 100; }
  .page-video-detail--info p {
    font-size: 1.125rem;
    color: #000100;
    margin-top: 5px; }

.page-video-detail--extra {
  position: relative;
  margin-bottom: 120px; }
  .page-video-detail--extra img {
    width: 100%;
    height: auto; }
  .page-video-detail--extra .page-video-detail--vimeo-wrapper {
    position: relative;
    width: 100%;
    background-color: #000100;
    overflow: hidden; }
    .page-video-detail--extra .page-video-detail--vimeo-wrapper::before {
      content: "";
      pointer-events: none;
      position: relative;
      display: block;
      padding-top: 56.25%;
      height: 0; }
    .page-video-detail--extra .page-video-detail--vimeo-wrapper iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100% !important;
      height: 100%; }

.page-base {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 120px;
  width: 100%; }

.page-client--wrapper {
  max-width: 960px;
  width: 100%;
  display: block;
  margin: 0 auto;
  padding: 0 24px; }
  .page-client--wrapper h1 {
    font-size: 3rem;
    font-weight: 100;
    text-transform: uppercase;
    margin: 0 0 12px; }

.client-login--form-error {
  display: block;
  font-size: 18px;
  text-transform: uppercase;
  color: #585857;
  padding: 6px; }

.page-client--form input {
  display: block;
  font-size: 28px;
  padding: 12px 24px;
  width: 100%;
  margin-bottom: 24px; }

.page-client--form input[type=submit] {
  display: none; }

.page-client--form--btn {
  font-size: 28px;
  padding: 12px 24px;
  background-color: #F8A99B;
  font-weight: 800;
  -webkit-transition: 0.2s background-color;
  transition: 0.2s background-color;
  cursor: pointer; }

.page-client--form--btn:hover {
  background-color: #056849; }

.page-contact {
  margin-top: 0;
  height: 100%; }

.page-contact--info {
  display: block;
  position: absolute;
  bottom: 60px;
  left: 0;
  width: 100%; }

.page-contact--address {
  display: inline-block;
  padding: 12px;
  margin: 12px 24px;
  background-color: #ffffff;
  font-size: 1.125rem;
  font-weight: 100; }
  .page-contact--address span {
    font-weight: 700; }
  .page-contact--address a {
    color: #000000;
    text-decoration: none; }

.page-contact--person {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 12px;
  margin: 12px 24px;
  background-color: #ffffff; }
  .page-contact--person[data-color="blue"] {
    background-color: #3667a9; }
  .page-contact--person[data-color="pink"] {
    background-color: #F8A99B; }
  .page-contact--person[data-color="green"] {
    background-color: #056849; }
  .page-contact--person[data-color="grey"] {
    background-color: #585857; }

.page-contact--name {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 1.125rem;
  font-weight: 700; }

.page-contact--title {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 1.125rem;
  font-weight: 100;
  text-transform: uppercase; }

.page-contact--email {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1; }
  .page-contact--email a {
    font-size: 1.125rem;
    font-weight: 400;
    color: #000000;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-transition: 0.2s color;
    transition: 0.2s color; }
    .page-contact--email a:hover {
      color: #ffffff; }

.page-contact--social {
  display: inline-block;
  padding: 0;
  margin: 24px 24px 0 0;
  height: 36px; }

.page-contact--map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.social--btn--twitter,
.social--btn--linkedin,
.social--btn--instagram,
.social--btn--facebook {
  cursor: pointer;
  display: inline-block;
  margin: 0 8px 0 0;
  background-color: #ffffff;
  border-radius: 50%;
  width: 36px;
  height: 36px; }

.social--btn--twitter {
  background-color: #00aced; }

.social--btn--linkedin {
  background-color: #0077b5; }

.social--btn--facebook {
  background-color: #3B5998; }

.social--btn--instagram {
  background-color: #F8A99B; }

@media only screen and (max-width: 780px) {
  .page-contact--info {
    position: relative;
    width: 100%;
    padding-top: 140px; }
  .page-contact--person {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; }
  .page-contact--name {
    margin-bottom: 2px; }
  .page-contact--social {
    display: block;
    margin: 0 24px 12px; }
  .page-contact--address {
    font-size: 0.9375rem; }
  .page-contact--name {
    font-size: 0.9375rem; }
  .page-contact--title {
    font-size: 0.9375rem; }
  .page-contact--email a {
    font-size: 0.9375rem; } }

.page-play--holder {
  max-width: 960px;
  width: 100%;
  display: block;
  margin: 0 auto; }
  .page-play--holder h1 {
    font-size: 2rem;
    font-weight: 100; }
  .page-play--holder p {
    font-size: 0.875rem;
    font-weight: 400; }
  .page-play--holder a {
    color: #000100; }

.page-careers--holder {
  max-width: 960px;
  width: 100%;
  display: block;
  margin: 0 auto;
  padding: 0 24px; }
  .page-careers--holder h1 {
    font-size: 3rem;
    font-weight: 100;
    text-transform: uppercase; }
  .page-careers--holder p, .page-careers--holder ul, .page-careers--holder li {
    font-size: 1.125rem;
    font-weight: 400; }
  .page-careers--holder a {
    color: #000100; }

.page-careers--posting-holder {
  margin-bottom: 60px; }

.page-careers--posting-content {
  margin-bottom: 36px; }

.page-careers--posting,
.page-careers--back {
  display: block;
  padding: 12px 24px;
  font-size: 24px;
  font-weight: 100;
  margin-bottom: 12px;
  cursor: pointer; }

.page-wp--holder {
  max-width: 960px;
  width: 100%;
  display: block;
  margin: 0 auto;
  padding: 0 24px; }
  .page-wp--holder h1 {
    font-size: 3rem;
    font-weight: 100;
    text-transform: uppercase; }
  .page-wp--holder p, .page-wp--holder ul, .page-wp--holder li {
    font-size: 1.125rem;
    font-weight: 400; }
  .page-wp--holder a {
    color: #000100; }

.page-wp--posting-holder {
  margin-bottom: 60px; }

.page-wp--posting-content {
  margin-bottom: 36px; }

.page-wp--posting,
.page-wp--back {
  display: block;
  padding: 12px 24px;
  font-size: 24px;
  font-weight: 100;
  margin-bottom: 12px;
  cursor: pointer; }

.carousel-wrap {
  height: 0px;
  width: 100%;
  padding-top: 56.25%;
  position: relative;
  margin-top: 60px;
  margin-bottom: 100px;
  overflow: visible; }

.carousel-holder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.carousel {
  background: #000000;
  width: 100%;
  height: 100%; }

.carousel-cell {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%; }

.flickity-button {
  display: none; }