@font-face {
  font-family : "Din Pro Bold";
  src         : url(../fonts/DinProBold.ttf) format("truetype");
  font-display: auto;
}

:root {
  --slide-background-color: rgba(0, 0, 0, 0.75);
}

html.noscroll {
  overflow: hidden;
}

#videobg {
  position: fixed;
  top     : 0;
  left    : 0;
  width   : 100%;
  height  : 100%;
  z-index : 1;
  opacity : 0;
}

#videobg video {
  height : 100vh;
  width  : auto;
  margin : auto;
  display: block;
}

@media (min-aspect-ratio: 16/9) {
  #videobg video {
    height: auto;
    width : 100vw;
  }
}

#about .robot {
  display        : inline-block;
  background     : url(../img/robot-text.png) no-repeat center center;
  background-size: auto 100%;
  text-indent    : 100%;
  white-space    : nowrap;
  overflow       : hidden;
  width          : 3.5em;
  height         : 1.1em;
}

#about h2 {
  position       : absolute;
  right          : 5%;
  bottom         : 15%;
  width          : 35%;
  height         : 75%;
  background     : url(../img/who.png) no-repeat right bottom;
  background-size: contain;
}

#about .icons {
  width                : 90vw;
  max-width            : 1200px;
  padding-top          : 25vh;
  margin               : 0 auto;
  display              : grid;
  grid-template-columns: 20fr 5fr 20fr 5fr 20fr 5fr 20fr;
  align-items          : center;
  text-align           : center;
  color                : #84ca98;
}

#about .icons-mobile {
  margin-left          : 5%;
  margin               : 0 auto;
  display              : grid;
  grid-template-columns: 1fr 1fr;
  align-items          : center;
  text-align           : center;
  color                : #84ca98;
  padding-left         : 23%;
  padding-right        : 23%;
  /* opacity           : 0.7; */
}

#about .icons-text {
  width                : 85vw;
  margin               : 0 auto;
  display              : grid;
  grid-template-columns: 20fr 5fr 20fr 5fr 20fr 5fr 20fr;
}

#about .icon-top-text {
  text-transform: uppercase;
  font-size     : 10pt;
}

#about .icon-bot-text {
  font-size: 22pt;
}

#about .about-container {
  max-width : 1100px;
  width     : 80vw;
  margin    : 0 auto;
  margin-top: 10vh;
}

#about p {
  font-size  : 1.4em;
  line-height: 1.3em;
  color      : #ddd;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
}

#services .container {
  position: absolute;
  left    : 5%;
  bottom  : 5%;
  width   : 60%;
}

#services h2 {
  position       : absolute;
  right          : 5%;
  bottom         : 5%;
  width          : 35%;
  height         : 70%;
  background     : url(../img/what.png) no-repeat right bottom;
  background-size: contain;
}

#services h3 {
  text-align    : center;
  padding       : 1em 0;
  font-size     : 1.4em;
  line-height   : 1em;
  text-transform: uppercase;
  color         : #ccc;
  letter-spacing: -1px;
}

#services .cols {
  display : table;
  position: relative;
}

#services .col {
  position           : relative;
  z-index            : 3;
  width              : 25%;
  padding            : 80px 0.7em 0 0.7em;
  display            : table-cell;
  background-repeat  : no-repeat;
  background-position: center top;
  background-size    : auto 80px;
}

#services .line {
  position: absolute;
  z-index : 2;
  top     : 40px;
  width   : 100%;
  height  : 100px;
  background: -moz-linear-gradient(left,
      rgba(36, 70, 86, 0.5) 0%,
      rgba(0, 0, 0, 0) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear,
      left top,
      right top,
      color-stop(0%, rgba(36, 70, 86, 0.5)),
      color-stop(100%, rgba(0, 0, 0, 0)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left,
      rgba(36, 70, 86, 0.5) 0%,
      rgba(0, 0, 0, 0) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left,
      rgba(36, 70, 86, 0.5) 0%,
      rgba(0, 0, 0, 0) 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(left,
      rgba(36, 70, 86, 0.5) 0%,
      rgba(0, 0, 0, 0) 100%);
  /* IE10+ */
  background: linear-gradient(to right,
      rgba(36, 70, 86, 0.5) 0%,
      rgba(0, 0, 0, 0) 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80244656', endColorstr='#00000000', GradientType=1);
  /* IE6-9 */
}

#services p {
  font-size  : 0.9em;
  line-height: 1.2em;
  color      : #fff;
}

#projects {
  /* Position */
  position: absolute !important;
  top     : 0;
  left    : 0;
  margin  : 10px;


  max-width: calc(100% - 20px);
  height   : calc(100% - 20px);

  display           : block;
  /* Hide scrollbar */
  overflow-x        : auto;
  overflow-y        : hidden;
  -ms-overflow-style: none;
  scrollbar-width   : none;
  
  -webkit-overflow-scrolling: touch;
}

.see-more {
  z-index         : 2;
  position        : absolute;
  bottom          : 1.5em;
  right           : 1.5em;
  pointer-events  : none;
  font-weight     : bolder;
  border-radius   : 0.5em;
  background-color: rgba(0, 0, 0, 0.65);
  padding         : 0.5em;
  color           : #84ca98;
  opacity         : 1;
  transition      : opacity 1s ease;
}

.see-more.seen {
  opacity: 0;
}

.see-more::after {
  content: ' >>>';
}

#projects .more-content {
  display: none;
}

#projects::-webkit-scrollbar {
  display: none;
}

#project-scroll-progress {
  width : 100%;
  height: 10px;

  position: absolute;
  bottom  : 0;
  left    : 0;

  background-color  : rgba(0, 0, 0, 0.25);
  border            : none;
  -webkit-appearance: none;
  appearance        : none;
  display           : block;
}

#project-scroll-progress:not([value]) {
  background-color: rgba(0, 0, 0, 0.25);
}

#project-scroll-progress[value]::-webkit-progress-bar {
  background-color: rgba(0, 0, 0, 0.25);
}

#project-scroll-progress[value]::-moz-progress-bar {
  background-color: #85cb98;
}

#project-scroll-progress[value]::-webkit-progress-value {
  background-color: #85cb98;
}

.proj-item-container {
  display      : block;
  position     : relative;
  /* background: rgba(0, 0, 0, 0.65); */
}

.proj-item-container::after {
  content: "";
  display: block;
}

.sizing-img {
  height        : 100%;
  pointer-events: none;
}

.proj-item-container .content {
  position: absolute;
  top     : 5px;
  left    : 5px;
  overflow: hidden;

  width : calc(100% - 10px);
  height: calc(100% - 10px);
}

.proj-item-container .content>video {
  position         : absolute;
  top              : 50%;
  left             : 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform   : translateX(-50%) translateY(-50%);
  -ms-transform    : translateX(-50%) translateY(-50%);
  transform        : translateX(-50%) translateY(-50%);
  min-height       : 100%;
}

.category-label {
  position : absolute;
  left     : 50%;
  bottom   : 0.5em;
  font-size: 1.25rem;
  transform: translateX(-50%);
  color    : #84ca98;
}

.category-label::before {
  content: '#';
}

.proj-item-container .overlay {
  position           : absolute;
  top                : 0;
  left               : 0;
  width              : 100%;
  height             : 100%;
  z-index            : 2;
  background-color   : rgba(0, 0, 0, 0.65);
  opacity            : 0;
  display            : block;
  overflow           : hidden;
  background-repeat  : no-repeat;
  background-position: center center;
  transition         : opacity 0.2s ease;
}

@media (hover) {
    .proj-item-container .overlay:hover {
      opacity: 1;
    }
}

#intro {
  background: rgb(0, 0, 0);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 90%, var(--slide-background-color) 100%);
}

#contact {
  text-align: center;
  background: rgb(0, 0, 0);
  background: linear-gradient(90deg, var(--slide-background-color) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 100%);
}

#contact a {
  color: #fff;
}

#contact h2 {
  position       : absolute;
  left           : 5%;
  top            : 5%;
  width          : 35%;
  height         : 80%;
  background     : url(../img/talk.png) no-repeat left top;
  background-size: contain;
}

#contact .container {
  position: absolute;
  bottom  : 5%;
  right   : 5%;
  width   : 40em;
}

#contact p {
  color      : #fff;
  font-size  : 1.35em;
  line-height: 1.3em;
  text-align : center;
  margin     : 0 0 2em 0;
}

#contact p a {
  font-weight: 700;
  color      : #fff;
}

#contactform {
  font-size  : 1.5em;
  line-height: 1.5em;
  display    : inline-block;
  margin     : 0 auto;
}

#contactform .field {
  position     : relative;
  width        : 100%;
  display      : table;
  margin-bottom: 1em;
}

#contactform label {
  display       : table-cell;
  border        : none;
  text-transform: uppercase;
  color         : #fff;
  font-weight   : 700;
  width         : 6em;
  text-align    : right;
  vertical-align: top;
  padding-right : 0.5em;
}

#contactform .input {
  display      : table-cell;
  border       : none;
  color        : #fff;
  padding      : 0 0.2em;
  margin       : 0 0 0 0.5em;
  background   : transparent;
  border-bottom: 1px solid #86c898;
  width        : 20em;
}

#contactform textarea.input {
  resize  : none;
  overflow: hidden;
  height  : 1em;
}

#contactform .input:focus {
  outline: none;
}

#sendbtnwrap {
  text-align: right;
}

#send {
  border               : 1px solid #fff;
  -moz-border-radius   : 8px;
  -webkit-border-radius: 8px;
  border-radius        : 8px;
  background           : transparent;
  color                : #85cb98;
  text-transform       : uppercase;
  font-size            : 1em;
  padding              : 0.5em 0;
  display              : inline-block;
  text-transform       : uppercase;
  letter-spacing       : 1px;
  text-shadow          : 1px 1px 0 rgba(0, 0, 0, 0.25);
  outline              : none;
  width                : 50%;
}

#send:hover {
  background: rgba(255, 255, 255, 0.2);
}

#usercheck {
  display: none;
}

#contact {
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
}

#contact .more {
  margin-top           : 2em;
  border               : 1px dotted rgba(255, 255, 255, 0.2);
  -moz-border-radius   : 8px;
  -webkit-border-radius: 8px;
  border-radius        : 8px;
}

#contact .more a {
  font-size: 1.1em;
}

#contact h3 {
  font-size     : 1.2em;
  text-transform: uppercase;
  margin-bottom : 0.5em;
}

#contact .phone,
#contact .social,
#contact .address,
#contact .hours {
  padding       : 1em;
  text-align    : center;
  font-size     : 1.1em;
  float         : left;
  width         : 50%;
  letter-spacing: 1px;
}

#contact .phone h3,
#contact .phone a,
#contact .social h3,
#contact .social ul {
  line-height: 1.55em;
}

#contact .tollfree .digits,
#contact .tollfree:hover .letters {
  display: none;
}

#contact .tollfree:hover .digits {
  display: inline;
}

#contact .phone {
  border-right: 1px dotted rgba(255, 255, 255, 0.2);
}

#contact .social ul {
  display: inline-block;
}

#contact .social li {
  display: inline;
}

#contact .social a {
  font-size: 1.4em;
  display  : inline-block;
  margin   : 0 0.5em;
}

#contact .social .text {
  display: none;
}

#contact .address {
  border-top  : 1px dotted rgba(255, 255, 255, 0.2);
  clear       : left;
  text-align  : left;
  border-right: 1px dotted rgba(255, 255, 255, 0.2);
}

#contact .address h3 {
  text-align: center;
}

#contact .hours {
  border-top: 1px dotted rgba(255, 255, 255, 0.2);
}

#sendstatus {
  background           : #2db34a;
  padding              : 0.7em 1em;
  color                : #fff;
  font-size            : 1.2em;
  -moz-border-radius   : 3px;
  -webkit-border-radius: 3px;
  border-radius        : 3px;
  text-shadow          : 1px 1px rgba(0, 0, 0, 0.25);
  margin               : -1em 0 1em 0;
  display              : none;
  visibility           : hidden;
}

#sendstatus.error {
  background: #f14d4d;
}

#sendstatus.on {
  visibility: visible;
}

#loader {
  width         : 0%;
  opacity       : 0.95;
  pointer-events: none;

  transition: width 3s ease;
  transition: opacity 1.5s ease;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (-moz-min-device-pixel-ratio: 1.25),
only screen and (-o-min-device-pixel-ratio: 5/4),
only screen and (min-device-pixel-ratio: 1.25),
only screen and (min-resolution: 120dpi) {
  #services .brand {
    background-image: url(../img/brand@2x.png);
  }

  #services .design {
    background-image: url(../img/design@2x.png);
  }

  #services .promote {
    background-image: url(../img/promote@2x.png);
  }

  #services .love {
    background-image: url(../img/love@2x.png);
  }
}

/* Browser specific adjustments */

.ie9 #loader {
  display: none;
}

.ie9 #slides .swiper-slide {
  float : left;
  width : 100%;
  height: 100%;
}

/* avp */

.cs-logo-container {
  position   : relative;
  top        : 50%;
  transform  : translateY(-50%);
  margin-left: 5%;
}

.grid-container {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-left          : 5vw;
  margin-right         : 5vw;
  column-gap           : 3%;
}

/* ---- .grid-item ---- */

.grid-item {
  width                   : 100%;
  height                  : 25vw;
  background              : rgb(0, 221, 136, 0.5);
  border                  : 2px solid #333;
  border-color            : hsla(0, 0%, 0%, 0.7);
  justify-self            : center;
  /* transition-duration  : 500ms;
	z-index                  : 1; */
}

.grid-item--big {
  width : 400px;
  height: 400px;
}

.grid-item--width2 {
  width: 200px;
}

.grid-item--height2 {
  height: 200px;
}

.grid-item--red {
  background: #d00;
}

.grid-item--blue {
  background: #19f;
}

.case-studies-logo {
  width    : calc((90vh - 400px) / 2);
  max-width: 150px;
}

.case-study-focus {
  transform: scale(1.5);
  z-index  : 100;
}

.case-study-btns {}

.case-study-btn {
  margin-top      : 50px;
  padding         : 20px;
  width           : 17vw;
  justify-self    : center;
  color           : rgb(138, 201, 159);
  background-color: rgb(50, 50, 50, 0.5);
  cursor          : pointer;
  transition      : all 0.2s ease-in-out;
  border-radius   : 10px;
  text-align      : center;
  z-index         : 999;
}

.case-study-btn:hover {
  transform       : scale(1.1);
  background-color: rgb(50, 50, 50, 0.8);
}

.case-study-button-top {
  font-size: 16px;
}

.case-study-button-bot {
  font-size     : 2vw;
  text-transform: uppercase;
  font-style    : italic;
  font-weight   : bold;
}

.case-study-button-bot-selected {
  border-bottom : solid;
  padding-bottom: 10px;
}

.none {
  display: none;
}

.cs-swiper-container {
  width     : 100%;
  height    : calc(50vh + 8px);
  margin-top: 10vh;
  position  : relative;
}

.cs-swiper-slide {
  background-position: center;
  background-size    : cover;
  width              : 50vh;
  /* height          : 300px; */
  background-size    : contain;
  background-repeat  : no-repeat;
  transition         : 0.5s;
  position           : relative;
  flex-shrink        : 0;
  border-top-style   : solid;
  border-top-color   : #84ca98;
  border-top-width   : 4px;
  border-bottom-style: solid;
  border-bottom-color: #84ca98;
  border-bottom-width: 4px;
  /* height          : calc( 100% - 8px); */
}

.cs-swiper-slide img {
  position             : absolute;
  /* left              : -50%; */
  width                : 100%;
  -webkit-transition   : opacity 0.3s ease-in-out;
  -moz-transition      : opacity 0.3s ease-in-out;
  -o-transition        : opacity 0.3s ease-in-out;
  transition           : opacity 0.3s ease-in-out;
  object-fit           : contain;
  /* transform         : translateX(-50%); */
}

/* Mobile for case study layout */
.cs-swiper-slide img.top:hover {
  opacity: 0;
}

/**************************\
  Basic Modal Styles
\**************************/

.modal {
  display: none;
}

.modal.is-open {
  display: block;
}

.modal {
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir,
    helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;
}

.modal__overlay {
  position       : fixed;
  top            : 0;
  left           : 0;
  right          : 0;
  bottom         : 0;
  background     : rgba(0, 0, 0, 0.6);
  display        : flex;
  justify-content: center;
  align-items    : center;
  z-index        : 10;
}

.modal__container {
  background-color  : #fff;
  color             : black;
  padding           : 30px;
  max-width         : 90vw;
  /* width          : 200px;
	height             : 300px; */
  max-height        : 90vh;
  border-radius     : 4px;
  overflow-y        : auto;
  box-sizing        : border-box;
}

.modal__header {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
}

.modal__title {
  margin-top   : 0;
  margin-bottom: 0;
  font-weight  : 600;
  font-size    : 1.25rem;
  line-height  : 1.25;
  color        : #00449e;
  box-sizing   : border-box;
}

.modal__close {
  background: transparent;
  border    : 0;
}

.modal__close:before {
  content: "\2715";
}

.modal__content {
  margin-top           : 2rem;
  margin-bottom        : 2rem;
  line-height          : 1.5;
  color                : rgba(0, 0, 0, 0.8);
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap             : 5%;
  margin-left          : 5%;
  margin-right         : 5%;
}

.modal__btn {
  font-size                  : 0.875rem;
  padding-left               : 1rem;
  padding-right              : 1rem;
  padding-top                : 0.5rem;
  padding-bottom             : 0.5rem;
  background-color           : #e6e6e6;
  color                      : rgba(0, 0, 0, 0.8);
  border-radius              : 0.25rem;
  border-style               : none;
  border-width               : 0;
  cursor                     : pointer;
  -webkit-appearance         : button;
  text-transform             : none;
  overflow                   : visible;
  line-height                : 1.15;
  margin                     : 0;
  will-change                : transform;
  -moz-osx-font-smoothing    : grayscale;
  -webkit-backface-visibility: hidden;
  backface-visibility        : hidden;
  -webkit-transform          : translateZ(0);
  transform                  : translateZ(0);
  transition                 : -webkit-transform 0.25s ease-out;
  transition                 : transform 0.25s ease-out;
  transition                 : transform 0.25s ease-out, -webkit-transform 0.25s ease-out;
}

.modal__btn:focus,
.modal__btn:hover {
  -webkit-transform: scale(1.05);
  transform        : scale(1.05);
}

.modal__btn-primary {
  background-color: #00449e;
  color           : #fff;
}

#port-modal .modal__content {
  margin: 2rem 0;
}

#modal-video {
  max-height: 100%;
}

#intro-video-modal .modal__container {
  max-width       : unset;
  max-height      : unset;
  width           : 100%;
  height          : 100%;
  padding         : 0;
  background-color: #000011;
  display         : flex;
  justify-content : center;
}

#intro-video-modal .modal__close {
  position: absolute;
  top     : 2.5%;
  right   : 2.5%;
}

#intro-video-modal video {
  max-height: 100%;
  width     : 100%;
}

#intro-video-modal[aria-hidden="false"] .modal__overlay {
  animation: mmfadeIn 0.5s ease;
}

#intro-video-modal[aria-hidden="true"] .modal__overlay {
  animation: mmfadeOut 2s ease;
}

#audio-modal .modal__container {
  padding   : unset;
  background: transparent;

  position: relative;

  width : unset;
  height: unset;
}

#audio-modal .modal__close {
  position: absolute;
  top     : 1em;
  right   : 1em;
}

/**************************\
  Demo Animation Style
\**************************/
@keyframes buttonFadeIn {
  from {
    opacity  : 0;
    scale    : 0;
    font-size: 0;
  }

  to {
    opacity  : 1;
    scale    : 1;
    font-size: 2em;
  }
}

@keyframes buttonFadeOut {
  from {
    opacity  : initial;
    scale    : initial;
    font-size: initial;
  }

  to {
    opacity  : 0;
    scale    : 0;
    font-size: 0;
  }
}

@keyframes mmfadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes mmfadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes mmslideIn {
  from {
    transform: translateY(15%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes mmslideOut {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-10%);
  }
}

.micromodal-slide {
  display: none;
}

.micromodal-slide.is-open {
  display: block;
}

.micromodal-slide[aria-hidden="false"] .modal__overlay {
  animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="false"] .modal__container {
  animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__overlay {
  animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__container {
  animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
  will-change: transform;
}

.cs-hdr-img {
  width           : 700px;
  height          : 150px;
  left            : 0;
  right           : 0;
  margin          : auto;
  background-color: cyan;
}

.cs-hero {
  left            : 0;
  right           : 0;
  margin          : auto;
  width           : 500px;
  height          : 150px;
  background-color: cornflowerblue;
}

.cs-block {
  /* height        : 300px;
	  background-color: chocolate; */
}

.cs-h4 {
  font-family           : "Open Sans", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-align            : left;
  box-sizing            : border-box;
  margin                : 0;
  padding               : 0;
  border                : 0;
  outline               : 0;
  background            : 0 0;
  vertical-align        : baseline;
  padding-bottom        : 10px;
  color                 : #333;
  font-weight           : 500;
  line-height           : 1em;
  font-size             : 18px;
}

.cs-p {
  color                 : #666;
  font-family           : "Open Sans", Arial, sans-serif;
  font-weight           : 500;
  -webkit-font-smoothing: antialiased;
  line-height           : 1.7em;
  text-align            : left;
  box-sizing            : border-box;
  margin                : 0;
  padding               : 0;
  border                : 0;
  outline               : 0;
  background            : 0 0;
  font-size             : 14px;
  vertical-align        : baseline;
  padding-bottom        : 0;
  margin-bottom         : 4%;
}

/************
  end avp stuff
  *****************/

.curtain-container {
  position     : absolute;
  width        : 100%;
  height       : 100%;
  /* overflow-x: hidden; */
}

.top-slider,
.bottom-slider {
  position     : absolute;
  float        : left;
  height       : 50%;
  width        : 100%;
  background   : rgba(0, 0, 0, 0.95);
  transition   : height 0.5s cubic-bezier(0.79, 0.14, 0.15, 0.86);
  /* background: black; */
  z-index      : 1000;
  will-change  : height;
}

/* .top-slider.open,
.bottom-slider.open {
  height    : 0%;
  transition: height 1.3s cubic-bezier(0.79, 0.14, 0.15, 0.86);
} */

.swiper-slide-active .top-slider,
.swiper-slide-active .bottom-slider {
  height    : 0%;
  transition: height 2s cubic-bezier(0.79, 0.14, 0.15, 0.86);
}

.swiper-slide-active .top-slider h1,
.swiper-slide-active .bottom-slider h1 {
  opacity   : 0;
  transition: opacity 2s cubic-bezier(.95, .05, .8, .04);
}

.top-slider {
  top          : 0;
  border-bottom: 5px #84ca98 solid;
}

.bottom-slider {
  bottom    : 0;
  border-top: 5px #84ca98 solid;
}

.top-slider h1,
.bottom-slider h1 {
  position                 : absolute;
  font-family              : "Din Pro Bold", sans-serif;
  text-indent              : unset;
  text-transform           : uppercase;
  color                    : rgba(0, 0, 0, 0.5);
  -webkit-text-stroke-width: 5px;
  -webkit-text-stroke-color: #84ca98;
  font-size                : 28vh;
  letter-spacing           : -0.065em;
  line-height              : 0.85;
  text-align               : center;
  pointer-events           : none;
  left                     : 0;
  right                    : 0;
}

.top-slider h1 {
  bottom       : 0;
  margin-bottom: -0.025em;
}

.bottom-slider h1 {
  top       : 0;
  margin-top: -0.12em;
}

@media (max-width: 480px) and (min-width: 320px) {

  .top-slider,
  .bottom-slider {
    display: none;
  }
  
  .curtain-container {
      display: none;
  }

}

#case-study-outer-wrapper {
  width  : 80%;
  height : 80%;
  margin : 2rem auto;
  display: flex;
}

#case-study-upper,
#case-study-lower {
  width: 100%;
}

#case-study-upper {
  height       : 90%;
  margin-bottom: 2%;
}

#case-study-lower {
  position: relative;
  height  : 5%;
}

#case-study-selection,
#case-study-preview {
  width        : 100%;
  height       : 90%;
  margin-bottom: 2%;
  display      : inline-block;
  overflow-x   : auto;
}

#case-study-selection {
  -ms-overflow-style: none;
  scrollbar-width   : none;
}

#case-study-selection::-webkit-scrollbar {
  display: none;
}

#case-study-preview {
  position  : relative;
  padding   : 2rem;
  overflow-y: hidden;
}

.preview-content {
  font-family: Arial, san-serif;
  color      : #8e8e8e;
}

.preview-content::before {
  content       : '';
  width         : 100%;
  height        : 100%;
  background    : linear-gradient(transparent 30%, #111 95%);
  position      : absolute;
  top           : 0;
  left          : 0;
  pointer-events: none;
}

.preview-content h4 {
  font-weight: bold;
}

.read-more {
  text-align      : center;
  display         : inline-block;
  padding         : 0.25em 0.5em;
  text-transform  : uppercase;
  letter-spacing  : 2px;
  border-radius   : 0.25em;
  font-size       : 1.25rem;
  color           : black;
  background-color: #85cb99;
  font-weight     : bold;
  opacity         : 1;
  transition      : opacity 0.75s ease-in;
  cursor          : pointer;
}

.read-more:hover {
  background-color: #9ad4ab;
}

.read-more:not([data-target-modal]) {
  opacity: 0;
}

.case-study-button-container {
  height  : 50%;
  width   : 50%;
  position: relative;
}

.case-study-button {
  position : absolute;
  width    : 90%;
  left     : 50%;
  transform: translateX(-50%);
  cursor   : pointer;
}

.case-study-button,
#case-study-preview {
  background-color: #111111;
  border-radius   : 2rem;
}

.case-study-button:hover,
.case-study-button.selected {
  background-color: #2b4931;
}

.case-study-logo {
  max-width : 75%;
  max-height: 50%;
}

.logo-container {
  display        : flex;
  justify-content: center;
  width          : 100%;
  height         : 20%;
  margin         : 4rem auto;
}

.logo-container .case-study-logo {
  height    : 100%;
  max-height: 100%;
  max-width : 100%;
}

.case-study-button .case-study-logo {
  transform: translate(-50%, -50%);
  position : absolute;
  top      : 50%;
  left     : 50%;
}

.case-study-button .case-study-category-title {
  transform: translateX(-50%);
  position : absolute;
  bottom   : 1rem;
  left     : 50%;
  font-size: 1.25vmax;
}

@media (min-width: 480px) {
  .case-study-button-container:not(:nth-child(2n)) .case-study-button {
    top: 0;
  }

  .case-study-button-container:nth-child(2n) .case-study-button {
    bottom: 0;
  }
}

.case-study-button::after {
  content       : "";
  display       : block;
  padding-bottom: 100%;
}

.case-study-category-title {
  font-size     : 1.5em;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  color         : #85cb99;
}

.case-study-category-title::before {
  content: "#";
}

.case-study-category-title:empty::before {
  content: "";
}

#case-study-navigation {
  width   : 100%;
  position: absolute;
  bottom  : 5%;
}

#case-study-outer-wrapper .swiper-button-next::after,
#case-study-outer-wrapper .swiper-button-prev::after {
  font-size: 2rem;
}

#case-study-outer-wrapper .swiper-button-next,
#case-study-outer-wrapper .swiper-button-prev {
  color: #84ca98;
  top  : 45%;
}

#case-study-outer-wrapper .swiper-button-next,
#case-study-outer-wrapper .swiper-button-prev.rtl {
  right: -1vw;
  left : auto
}

#case-study-outer-wrapper .swiper-button-prev,
#case-study-outer-wrapper .swiper-button-next.rtl {
  left : -1vw;
  right: auto
}

#case-study-selection-and-navigation-wrapper,
#case-study-preview-and-read-more-container {
  height  : 100%;
  position: relative;
}

#case-study-selection-and-navigation-wrapper {
  width       : 45%;
  margin-right: 5%;
}

#case-study-preview-and-read-more-container {
  width: 50%;
}

#case-study-pagination {
  position : absolute;
  left     : 50%;
  bottom   : 50%;
  transform: translate(-50%, 50%);
}

#case-study-pagination .swiper-pagination-bullet {
  width           : 2vmin;
  height          : 2vmin;
  display         : inline-block;
  border-radius   : 100%;
  background-color: rgba(0, 0, 0, 0.25);
  border          : 2px solid #85cb99;
  margin          : 0 0.65vmin;
  opacity         : 1;
}

#case-study-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #85cb99;
}


#case-study-preview-and-read-more-container .read-more {
  position : absolute;
  bottom   : 5%;
  right    : 0;
  transform: translateY(50%);
}

@media (min-width: 320px) and (max-width: 480px) {
  #case-study-outer-wrapper {
    width         : 80%;
    height        : 85%;
    margin        : 0.7rem auto;
    display       : flex;
    flex-direction: column;
  }

  #case-study-preview-and-read-more-container,
  #case-study-selection-and-navigation-wrapper {
    width: 100%;
  }

  #case-study-preview-and-read-more-container {
    height       : 65%;
    margin-bottom: 3%;
    order        : 1;
  }

  #case-study-selection-and-navigation-wrapper {
    height: 30%;
    margin: unset;
    order : 2;
  }

  #case-study-preview,
  #case-study-selection {
    width : 100%;
    margin: unset;
  }

  #case-study-preview,
  .case-study-button {
    border-radius: 1rem;
  }

  .case-study-button-container {
    height     : 100%;
    width      : calc(100% / 2) !important;
    flex-shrink: 0;
  }

  #case-study-selection {
    height: 100%;
  }

  #case-study-preview {
    position     : relative;
    padding      : 1rem;
    overflow-y   : hidden;
    height       : 100%;
    margin-bottom: 3%;
  }

  .case-study-button .case-study-category-title {
    font-size: 0.7em;
  }

  .logo-container {
    margin: 2rem auto;
  }

  #case-study-lower {
    position      : relative;
    height        : 15%;
    order         : 2;
    display       : flex;
    flex-direction: column;
  }

  #case-study-navigation {
    width    : 100%;
    position : absolute;
    left     : 50%;
    bottom   : -7%;
    transform: translateX(-50%);
  }

  #case-study-outer-wrapper .swiper-button-next::after,
  #case-study-outer-wrapper .swiper-button-prev::after {
    font-size: 1.5rem;
  }

  #case-study-outer-wrapper .swiper-button-next,
  #case-study-outer-wrapper .swiper-button-prev {
    top: 40%;
  }

  #case-study-pagination .swiper-pagination-bullet {
    width : 4vmin;
    height: 4vmin;
  }

  #case-study-outer-wrapper .swiper-button-next,
  #case-study-outer-wrapper .swiper-button-prev.rtl {
    right: -6vw;
  }

  #case-study-outer-wrapper .swiper-button-prev,
  #case-study-outer-wrapper .swiper-button-next.rtl {
    left: -6vw;
  }

  #case-study-outer-wrapper .read-more {
    display  : block;
    width    : 70%;
    bottom   : 5%;
    left     : 50%;
    font-size: 1rem;
    right    : unset;
    transform: translateX(-50%);
  }

  #case-study-pagination {
    display: inline-block;
    order  : 2;
    width  : max-content;
    left   : 50%;
    bottom : 10%;
  }
}

:root {
  --project-page-content-width: 95%;
}

#project-page-container {
  height    : 88%;
  width     : var(--project-page-content-width);
  /*margin    : 3% auto;*/
  background: #000000e0;
  position  : absolute;
  top: calc((100% - 88%) / 2);
  left: calc((100% - var(--project-page-content-width)) / 2);
}

#project-controls-wrapper {
  width    : var(--project-page-content-width);
  font-size: 1rem;
  height   : 3.5em;
  margin   : 1.5% auto;
  display  : flex;
}

#project-controls {
  display        : flex;
  justify-content: space-between;
  width          : 100%;
  height         : 100%;
  flex-shrink    : 1;
  overflow-x     : auto;
}

#project-back-button {
  border-radius: 2rem;

  background-color: #85cb99;
  color           : black;

  font-family   : 'Din Pro', sans-serif;
  text-transform: uppercase;

  opacity: 0;

  animation          : buttonFadeOut 0.25s ease;
  animation-fill-mode: forwards;
  z-index            : 2;
  padding            : 0.25em 0.5em;
  position           : absolute;
  bottom             : 3vh;
  left               : 2vw;
  pointer-events     : none;
}

#project-back-button:hover {
  background: rgba(255, 255, 255, 0.2);
}

#project-back-button.hide {
  display: none;
}

#project-back-button.show {
  animation          : buttonFadeIn 0.45s ease;
  animation-fill-mode: forwards;
  display            : inline-block;
  pointer-events     : painted;
}

/*
@media screen and (max-aspect-ratio: 671 / 471) {
  #project-page-container {
    height     : unset;
    padding-top: 57%;
 }

 #project-controls-wrapper {
   margin: 2% auto;
 }
}
*/

.project-filter-tag {
  float           : left;
  padding         : 0.5em;
  border-radius   : 0.5em;
  color           : black;
  background-color: white;
}

.project-filter-tag::before {
  content      : "x";
  font-weight  : bolder;
  padding-right: 5px;
}

[data-filter-method="company"].project-filter-tag {
  color           : white;
  background-color: blue;
}

[data-filter-method="category"].project-filter-tag {
  color           : white;
  background-color: red;
}

#project-control-box {
  display       : flex;
  flex-direction: column;
  background    : rgba(0, 1, 1, 0.65);
  padding       : 5%;
}

select[name="tag-dropdown"] {
  height: 100%;
  float : left;
}

.mobile-services {
  display: none;
}

section.swiper-slide {
  background: var(--slide-background-color);
}

.sizzle-video-button {
  top            : 50%;
  left           : 50%;
  margin-top     : 20%;
  min-height     : 100%;
  min-width      : 100%;
  width          : 100%;
  font-size      : 5em;
  position       : absolute;
  color          : #85ca99;
  text-align     : center;
  transform      : translate(-50%, -50%) scale(0.8, 0.8);
  display        : flex;
  justify-content: center;
}

.sizzle-video-button div {
  cursor: pointer;
}

.sizzle-video-responsive {
  left            : 50%;
  min-height      : 100%;
  min-width       : 100%;
  width           : 100%;
  position        : absolute;
  top             : 50%;
  transform       : translate(-50%, -50%) scale(0.8, 0.8);
  /* overflow     :hidden;
    padding-bottom:56.25%;
    position      :relative;
	height           :0; */
  opacity         : 0;
  display         : none;
}

.sizzle-video-iframe {
  left    : 0;
  top     : 0;
  height  : 100%;
  width   : 100%;
  position: absolute;
}

/*******************
    Carousel Start

    This should only do anything for mobile!

    media query from: 
        https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488
*******************/
@media (min-width: 320px) and (max-width: 480px) {

  .cs-swiper-container {
    margin-top: 5vh;
  }

  .cs-swiper-slide img.top:hover {
    opacity: 1;
  }

  #about p {
    font-size: 1em;
  }

  #about .about-container {
    margin-top: 0px;
  }

  #about .curtain-container {
    /* background-color: black;
        opacity        : .7; */
  }

  #about.carousel__cell {
    background      : unset;
    background-color: black;
  }

  .swiper-wrapper {
    display: unset;
  }

  #case-studies .swiper-wrapper {
    display: flex;
  }

  .carousel_scene {
    background-image     : url(/assets/img/bgsmall.jpg) center;
    background-attachment: fixed;
    background-size      : cover;
  }

  .mobile-services {
    display              : grid;
    grid-template-columns: 30% 70%;
  }

  .services-logo {
    /* width         : 25%; */
    height           : 14vh;
    background-image : url(../img/brand.png);
    background-size  : contain;
    background-repeat: no-repeat;
    margin-left      : 10%;
    margin-right     : 10%;
    margin-top       : 10%;
  }

  .services-title {
    width : auto;
    margin: 5%;
  }

  .services-blurb {
    grid-column  : 1 / span 2;
    margin-left  : 10%;
    margin-right : 10%;
    margin-bottom: 5%;
  }

  #services .cols {
    display: none !important;
  }

  .cs-swiper-container {
    height: 50vh;
  }

  .cs-swiper-slide {
    height: 50vh;
    width : 50vh;
  }

  #slides h2 {
    display: none;
  }

  .case-study-btn {
    margin-top: 10px;
    padding   : 10px;
    z-index   : 999;
    width     : 50vw;
  }

  .bottom {
    display: none;
  }

  #cs-promotion,
  #cs-innovation,
  #cs-branding {
    /* display: flex; */
  }


  .cs-swiper-container {
    position: relative;
  }

  .case-study-button-bot {
    font-size: 4vw;
  }

  .sizzle-video-button {
    top          : 60%;
    /* left      : 50%; */
    line-height  : unset;
    /* min-height: 100%; */
    /* min-width : 100%; */
    /* width     : 100%; */
    font-size    : 3em;
    display      : unset;
    /* position  : absolute; */
    /* color     : #85ca99; */
    /* text-align: center; */
    /* transform : translate(-50%, -50%) scale( 0.8, 0.8); */
  }

}

/*******************
    Carousel End
*******************/

#videobg {
  transition: opacity 1s;
}

#video-modal .video-content {
  display        : flex;
  justify-content: center;
  max-height     : 96%;
  max-width      : 100%;
}

#projects-modal .modal__container {
  width : 96vw;
  height: 90vh;
}

#video-modal .modal__container {
  width : 70vw;
  height: 70vh;
}

#video-modal video {
  margin: 1%;
}

#projects-modal .modal__container,
#video-modal .modal__container {
  background-color: rgba(0, 0, 0, 0.9);
  padding         : 1vmin;
  border          : 5px #84ca98 solid;
  border-radius   : 0;
}

#projects-modal .modal__close::before,
#video-modal .modal__close::before {
  color: white;
}

#project-modal-btn {
  position     : absolute;
  font-size    : 50pt;
  top          : 50%;
  left         : 50%;
  transform    : translate(-50%, -50%);
  border       : 1px black solid;
  border-radius: 1em;
  background   : white;
  color        : black;
  padding      : 1em;
}

.table {
  display: table;
  /* Allow the centering to work */
  margin : 0 auto;
}

ul.horizontal-list {
  min-width  : 696px;
  list-style : none;
  padding-top: 20px;
}

ul.horizontal-list li {
  display: inline;
}

* {
  box-sizing: border-box;
}

/* Slideshow container */

.slideshow-container {
  max-width: 1000px;
  width    : 80%;
  height   : auto;
  display  : block;
  position : relative;
  margin   : auto;
}

/* Hide the images by default */

.csSlide {
  display: none;
}

/* Next & previous buttons */

.prev,
.next {
  cursor       : pointer;
  position     : absolute;
  top          : 50%;
  width        : auto;
  margin-top   : -22px;
  padding      : 16px;
  color        : black;
  font-weight  : bold;
  font-size    : 18px;
  transition   : 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select  : none;
}

/* Position the "next button" to the right */

.next {
  right        : 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */

div:hover~.prev,
div:hover~.next,
.prev:hover,
.next:hover {
  background-color: rgba(255, 244, 244, 0.8);
}

/* Caption text */
.text {
  color     : #f2f2f2;
  font-size : 15px;
  padding   : 8px 12px;
  position  : absolute;
  bottom    : 8px;
  width     : 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color    : #f2f2f2;
  font-size: 12px;
  padding  : 8px 12px;
  position : absolute;
  top      : 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor          : pointer;
  height          : 15px;
  width           : 15px;
  margin          : 0 2px;
  background-color: #bbb;
  border-radius   : 50%;
  display         : inline-block;
  transition      : background-color 0.6s ease;
}

.active,
.dot:hover {
  background-color: #717171;
}

/* Fading animation */

.fade {
  -webkit-animation-name    : fade;
  -webkit-animation-duration: 1.5s;
  animation-name            : fade;
  animation-duration        : 1.5s;
}

@-webkit-keyframes fade {
  from {
    opacity: 0.4;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade {
  from {
    opacity: 0.4;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeInfoBox {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* Case study media queries */
@media only screen and (max-device-width: 414px) and (max-device-height: 823px) {
  .swiper-slide {
    height: auto;
  }

  #slides .swiper-slide {
    /* height: auto; */
  }

  #slides #portfolio,
  #slides #case-studies {
    height: 100%;
  }

  #slides #about,
  #slides #contact,
  #slides #sizzle {
    min-height: 100%;
  }
}

/* All other devices */
@media only screen and (max-device-width: 414px) {
  .body-elem {
    margin   : -2.5rem;
    transform: scale(0.9);
  }
}

/* iphone 4 and 5 */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  .body-elem {
    margin   : -3.5rem;
    transform: scale(0.8);
  }
}

#filter-info-list {
  display        : flex;
  flex-flow      : column;
  justify-content: flex-end;
  position       : absolute;
  bottom         : 2%;
  left           : 2%;

  height        : 96%;
  pointer-events: none;
}

.filter-info-box {
  background   : rgba(0, 0, 0, 0.85);
  border-radius: 8px;
  padding      : 1em;
  margin-top   : 0.5em;

  pointer-events: none;
  z-index       : 100;
  font-size     : medium;

  animation                : fadeInfoBox 5s ease;
  animation-iteration-count: infinite;
}

/* .sendbtnwrap {
    text-align: right;
  } */

.filter-button {
  border        : 0;
  background    : transparent;
  color         : #85cb98;
  text-transform: uppercase;
  font-size     : 1.5em;
  letter-spacing: 2px;
  text-shadow   : 1px 1px 0 rgba(0, 0, 0, 0.25);
  font-weight   : bold;
  height        : 100%;
  padding       : 0.4em 1em;
  font-family   : "Din Pro", sans-serif;
  font-weight   : normal;
}

.filter-button.selected {
  color: white;
}

.filter-button:hover {
  background   : rgba(255, 255, 255, 0.2);
  border-bottom: medium solid #84ca98;
}

.filter-button.selected:hover {
  border-bottom-color: white;
}

.cs-video {
  width  : 75%;
  height : auto;
  margin : auto;
  display: block;
}

/* img[data-sizes="auto"] {
  display: block;
  width  : 100%;
} */

.rtrlogo {
  position: fixed; 
  bottom: 7%; 
  right: 1%; 
  z-index: 999;
  transition: transform 0.3s, opacity 0.3s; /* Smooth transition */
}

.rtrlogo:hover {
  transform: scale(1.1); /* Slightly increase the size */
  opacity: 0.8; /* Slightly decrease the opacity */
}

.rtrlogo:hover::after {
  content: "Chat with Robot the Robot ?";
  position: absolute;
  top: 50%;
  right: 110%; /* Position the text to the left of the logo */
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  white-space: nowrap;
  z-index: 1000; /* Make sure the text appears above other elements */
}