/*
* styles for lightbox for displaying project videos and details
* Author: beardy brackets - web development
*/
.c-lightbox {
  animation: fadein 200ms;
  background-color: #2c2c2c;
  bottom: 0;
  color: #fff;
  left: 0;
  min-height: 100vh;
  overflow-y: auto;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 1000000;
  /*
  * Header
  */
  /*
  * Body
  */
  /*Loader Animation*/
  /*
  * Footer
  */ }
@keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
  .c-lightbox.fade-out {
    animation: fadeout 200ms; }
@keyframes fadeout {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }
  .c-lightbox__container {
    display: flex;
    flex-direction: column;
    height: 100%;
    opacity: 0;
    overflow-x: hidden;
    transition: opacity 300ms ease-out;
    width: 100%; }
    .c-lightbox__container.loaded {
      opacity: 1; }
  .c-lightbox__meta {
    display: inline-block;
    font-size: 0.813rem;
    margin-bottom: 1.036rem;
    text-transform: uppercase; }
  .c-lightbox__header {
    display: flex;
    justify-content: space-between;
    padding: 4.063rem; }
  .c-lightbox__title {
    font-size: 2.5rem; }
  .c-lightbox__close {
    position: fixed;
    right: 4.063rem;
    top: 4.063rem; }
    .c-lightbox__close span {
      cursor: pointer; }
  .c-lightbox__body {
    flex-grow: 1;
    margin-bottom: 100px;
    /*padding: 0 $lbBodyPadding 5.313rem $lbBodyPadding;*/ }
  .c-lightbox__slider-container {
    max-height: 500px;
    position: relative;
    /*transform: translateX(-$lbBodyPadding);*/
    width: 100vw; }
  .c-lightbox__slider {
    margin: auto;
    margin-bottom: 5.313rem;
    max-height: 500px;
    overflow: hidden;
    position: relative;
    width: 896px; }
  .c-lightbox__slides {
    display: flex;
    transition: transform 300ms ease-in-out;
    width: max-content; }
  .c-lightbox__slider-item {
    display: inline-block;
    max-height: 500px;
    position: relative;
    width: 896px; }
    .c-lightbox__slider-item video {
      height: auto;
      width: 100%; }
  .c-lightbox__slider-nav {
    align-items: center;
    display: flex;
    justify-content: space-between;
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - (10.938rem * 2)); }
    .c-lightbox__slider-nav div {
      pointer-events: all;
      transition: transform 200ms ease-out; }
      .c-lightbox__slider-nav div:hover {
        transform: scale(1.2); }
      .c-lightbox__slider-nav div span {
        cursor: pointer; }
  .c-lightbox__slider-pagination {
    left: 50%;
    position: absolute;
    top: 100%;
    transform: translate(-50%, 0.938rem); }
    .c-lightbox__slider-pagination ul li {
      background-color: #999;
      border-radius: 50%;
      display: inline-block;
      height: 0.438rem;
      width: 0.438rem; }
      .c-lightbox__slider-pagination ul li.current {
        background-color: #fff; }
  .c-lightbox__text {
    display: inline-flex;
    gap: 8.75rem;
    justify-content: center;
    padding: 0 80px; }
  .c-lightbox__meta-title {
    color: #999;
    display: inline-block;
    /*font-size: 20px;*/ }
  .c-lightbox__text-flex-item {
    flex-basis: 43%; }
  .c-lightbox__loader {
    display: inline-block;
    height: 80px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80px; }
    .c-lightbox__loader div {
      animation-timing-function: cubic-bezier(0, 1, 1, 0);
      background: #fff;
      border-radius: 50%;
      height: 13px;
      position: absolute;
      top: 33px;
      width: 13px; }
    .c-lightbox__loader div:nth-child(1) {
      animation: loader-ellipsis1 0.6s infinite;
      left: 8px; }
    .c-lightbox__loader div:nth-child(2) {
      animation: loader-ellipsis2 0.6s infinite;
      left: 8px; }
    .c-lightbox__loader div:nth-child(3) {
      animation: loader-ellipsis2 0.6s infinite;
      left: 32px; }
    .c-lightbox__loader div:nth-child(4) {
      animation: loader-ellipsis3 0.6s infinite;
      left: 56px; }
    .c-lightbox__loader.complete {
      display: none; }
@keyframes loader-ellipsis1 {
  0% {
    transform: scale(0); }
  100% {
    transform: scale(1); } }
@keyframes loader-ellipsis3 {
  0% {
    transform: scale(1); }
  100% {
    transform: scale(0); } }
@keyframes loader-ellipsis2 {
  0% {
    transform: translate(0, 0); }
  100% {
    transform: translate(24px, 0); } }
  .c-lightbox__footer {
    font-size: 20px;
    align-items: center;
    color: #999;
    display: flex;
    justify-content: space-between;
    margin-bottom: 2.5rem;
    padding: 0 10.938rem; }
    .c-lightbox__footer a {
      color: #999 !important; }
  @media (max-width: 960px) {
    .c-lightbox__text {
      font-size: 18px;
      gap: 4.75rem;
      padding: 0 40px; }
    .c-lightbox__footer {
      font-size: 16px; } }
  @media (max-width: 768px) {
    .c-lightbox__header {
      padding: 1.375rem; }
    .c-lightbox__body {
      padding: 1.375rem; }
    .c-lightbox__title {
      font-size: 2.375rem;
      line-height: 2.5rem; }
    .c-lightbox__slider-nav {
      max-width: 90vw;
      width: calc(100% - (1.375rem * 2)); }
    .c-lightbox__slider-container {
      /*transform: translateX(0);*/
      width: 100%; }
    .c-lightbox__slider {
      margin-bottom: 2.938rem;
      width: 100%; }
    .c-lightbox__slider-item {
      width: calc(100vw - (1.375rem * 2)); }
    .c-lightbox__close {
      position: relative;
      right: auto;
      top: auto; }
    .c-lightbox__text {
      display: flex;
      flex-direction: column;
      gap: 2.75rem;
      padding: 0; }
    .c-lightbox__footer {
      font-size: 16px;
      flex-wrap: wrap;
      justify-content: space-around;
      margin-top: 3.625rem;
      padding: 0 1.375rem; }
    .c-lightbox__footer-right {
      text-align: left; }
    .c-lightbox__footer-left {
      text-align: right; } }