/* Font rules */
@font-face {
  font-family: "Grilledcheese-BTN-Toast";
  src: url(fonts/GrilledCheese.ttf);
}

@font-face {
  font-family: "Archer-Bold";
  src: url(fonts/Archer-Bold.ttf);
}

@font-face {
  font-family: "Easycore";
  src: url(fonts/Easycore.ttf);
}

/* Fonts rules end */
.loading-gif,
.loading-wrapper {
  left: 0;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease-in;
}

body,
body * {
  -webkit-overflow-scrolling: touch;
}

#index-container,
.btn-wrapper-hover,
.error-body,
.header-complete,
.modal,
.swipe-element,
.work-nav-item label {
  overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
p {
  line-height: normal;
  color: #231f20;
}

.error-intro p a,
i {
  font-style: italic;
}

.modal,
.vertical-center-align {
  -moz-transform: translateY(-50%) !important;
  -ms-transform: translateY(-50%) !important;
  -webkit-transform: translateY(-50%) !important;
  transform: translateY(-50%) !important;
}

#success-modal,
.loading-gif {
  -ms-transform: translateY(-50%) !important;
}

.open-sans-font,
body {
  font-family: "Open Sans", sans-serif;
}

.black-color-font,
p {
  color: #231f20;
}

.btn-flash a,
.contact-item a,
.contact-item a em {
  color: #fff;
  opacity: 1;
  display: block;
}

.error-intro p a,
.footer-item a,
.header-item a,
.no-underline,
.services-wrapper-info a,
.work-next-project a {
  text-decoration: none;
}

body {
  background-color: #fff;
  font-size: 1em;
  font-weight: 100;
  overflow-x: hidden;
}

#index-container::-webkit-scrollbar {
  display: none;
}

::-webkit-scrollbar {
  width: 8px;
  background-color: rgba(0, 0, 0, 0);
  -webkit-border-radius: 100px;
}

::-webkit-scrollbar:hover {
  background-color: rgba(0, 0, 0, 0.09);
}

::-webkit-scrollbar-thumb:horizontal {
  background: rgba(0, 0, 0, 0.5);
  -webkit-border-radius: 100px;
}

::-webkit-scrollbar-thumb:horizontal:active {
  background: rgba(0, 0, 0, 0.61);
  -webkit-border-radius: 100px;
}

.bg-overlay,
.modal-large {
  background: rgba(0, 0, 0, 0.8);
}

h1,
h2,
h3,
h4,
h5 {
  font-weight: 100;
  font-size: 3em;
  margin-bottom: 0.3em;
}

/* p {
  word-spacing: normal;
  letter-spacing: normal
} */
b {
  font-weight: 700;
}

a {
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  text-decoration: none;
}

.modal,
.transition {
  transition: all 0.3s;
}

ul {
  margin-left: 3em;
}

.script-tag {
  display: none;
}

.clear {
  clear: both !important;
  float: none !important;
  height: 0 !important;
  width: 0 !important;
}

.transition {
  -webkit-transition: all 0.3s;
}

.longTransition {
  transition: all 0.8s;
  -webkit-transition: all 0.8s;
}

.no-margin {
  margin: 0;
}

.rel-wrapper {
  position: relative;
}

.vertical-center-align {
  position: absolute;
  top: 50%;
}

.horizontal-center-align {
  left: 0;
  right: 0;
  margin: auto;
}

.block-element {
  display: block;
}

.error-intro p a,
.inline-element {
  display: inline-block;
}

.bg-overlay,
.modal,
.modal-large {
  left: 0;
  display: none;
}

.full-width-img {
  width: 100%;
}

.text-align-center {
  text-align: center;
}

.text-align-left {
  text-align: left;
}

.text-align-right {
  text-align: right;
}

.grid-list {
  margin: 0;
  position: relative;
}

.grid-item {
  position: relative;
  float: left;
  margin: 0 1.5%;
}

.centered-grid {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.grid2 .grid-item {
  width: 47%;
}

.grid3 .grid-item {
  width: 30%;
}

.grid4 .grid-item {
  width: 22%;
}

.grid5 .grid-item {
  width: 17%;
}

.grid6 .grid-item {
  width: 13.6666%;
}

@media screen and (max-width: 767px) {
  .banner-wrapper li {
    display: block;
    width: 70%;
    margin: 2em auto;
  }

  #index-container,
  .btn-wrapper-hover,
  .error-body,
  .header-complete,
  .modal,
  .swipe-element,
  .work-nav-item label {
    overflow: auto;
  }

  .grid-item {
    width: 100% !important;
    margin: 0 0 2em;
    float: none;
  }

  .grid-resp-stack .grid-item {
    float: left;
    margin: 0 1.5%;
  }

  .grid-resp-stack.grid2 .grid-item {
    width: 47% !important;
  }

  .grid-resp-stack.grid3 .grid-item {
    width: 30% !important;
  }

  .grid-resp-stack.grid4 .grid-item {
    width: 22% !important;
  }
}

.border-btn {
  border: 0.2em solid #231f20;
}

.bg-overlay {
  cursor: pointer;
  position: fixed;
  z-index: 999;
  top: 0;
  width: 100%;
  height: 100%;
}

#success-modal,
.modal {
  top: 50%;
  position: fixed;
}

.modal {
  right: 0;
  margin: 7em auto 0;
  width: 90%;
  z-index: 1000;
  border-radius: 0.3em;
  box-shadow: 0 0 0.7em -0.1em #444;
  -webkit-transition: all 0.3s;
}

#success-modal,
.loading-gif {
  -webkit-transform: translateY(-50%) !important;
  -moz-transform: translateY(-50%) !important;
}

#success-modal {
  transform: translateY(-50%) !important;
  background: #fff;
  padding: 3em;
  width: 60%;
  height: auto;
  text-align: center;
  border-radius: 0.4em;
}

#success-modal h3 {
  margin-bottom: 0;
  font-size: 2em;
  font-weight: 500;
  letter-spacing: 0.3rem;
  text-transform: uppercase;
}

.video-modal video {
  height: 100%;
  margin: auto;
}

.close-modal {
  position: absolute;
  right: -2em;
  top: 0;
  width: 3em;
  cursor: pointer;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

.close-modal:hover {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

.resp-show {
  display: none !important;
}

.serif-font {
  font-family: "Libre Baskerville", serif;
}

.small-font-size {
  font-size: 0.85em;
}

.normal-font-size {
  font-size: 1em;
}

.medium-font-size {
  font-size: 1.25em;
}

.medium-font-size2 {
  font-size: 1.5em;
}

.large-font-size {
  font-size: 1.8em;
}

.large-font-size2 {
  font-size: 2em;
}

.extra-large-font-size,
.happy-modal h1 {
  font-size: 2.5em;
}

.extra-large-font-size2 {
  font-size: 3em;
}

.thin-font-weight {
  font-weight: 100;
}

.light-font-weight {
  font-weight: 300;
}

.normal-font-weight {
  font-weight: 400;
}

.medium-font-weight {
  font-weight: 500;
}

.semibold-font-weight {
  font-weight: 600;
}

.bold-font-weight,
.happy-modal h1 {
  font-weight: 700;
}

.ultrabold-font-weight {
  font-weight: 900;
}

.black-color-background {
  background-color: #231f20;
}

.green-color-font {
  color: #7ecb61;
}

.green-color-background {
  background-color: #7ecb61;
}

.grey-color-font {
  color: #6d6e71;
}

.grey-color-background {
  background-color: #6d6e71;
}

.red-color-font {
  color: #e84331;
}

.red-color-background {
  background-color: #e84331;
}

.yellow-color-font {
  color: #f4d03f;
}

.yellow-color-background {
  background-color: #f4d03f;
}

.character-happy,
.modal-body,
.white-color-background {
  background-color: #fff;
}

.white-color-font {
  color: #fff;
}

.light-white-color-background,
.work-intro-block {
  background-color: #fff;
}

.light-white-color-font {
  color: #f9f9f9;
}

.blue-color-font {
  color: #3aade9;
}

.blue-color-background {
  background-color: #3aade9;
}

.loading-wrapper {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #e84331;
  -moz-animation-name: slideLoadingUp;
  -webkit-animation-name: slideLoadingUp;
  animation-name: slideLoadingUp;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -moz-animation-duration: 0.5s;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  z-index: 15;
  -moz-animation-delay: 3.2s;
  -webkit-animation-delay: 3.2s;
  animation-delay: 3.2s;
}

.intro-animation,
.loading-gif {
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in;
  -moz-animation-fill-mode: forwards;
}

.loading-gif {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) !important;
  right: 0;
  width: 23em;
  margin: auto;
  -moz-animation-name: fadeOut;
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  -moz-animation-duration: 0.4s;
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
  -moz-animation-delay: 2.74s;
  -webkit-animation-delay: 2.74s;
  animation-delay: 2.74s;
}

.fade-out-animation,
.intro-animation {
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease-in;
  -webkit-animation-fill-mode: forwards;
}

.intro-animation {
  -moz-animation-name: slideLoadingUp;
  -webkit-animation-name: slideLoadingUp;
  animation-name: slideLoadingUp;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  -moz-animation-duration: 0.5s;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.fade-in-animation,
.fade-out-animation {
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in;
  -moz-animation-duration: 0.4s;
  -webkit-animation-duration: 0.4s;
  -moz-animation-fill-mode: forwards;
}

.fade-out-animation {
  -moz-animation-name: fadeOut;
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
}

.fade-in-animation,
.happy-manaba {
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease-in;
  -webkit-animation-fill-mode: forwards;
}

.fade-in-animation {
  opacity: 0;
  -moz-animation-name: fadeIn;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
}

.characters-caption,
.happy-manaba {
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in;
  -moz-animation-fill-mode: forwards;
}

@-moz-keyframes slideLoadingUp {
  0% {
    top: 0;
  }

  100% {
    top: -100%;
  }
}

@-webkit-keyframes slideLoadingUp {
  0% {
    top: 0;
  }

  100% {
    top: -100%;
  }
}

@keyframes slideLoadingUp {
  0% {
    top: 0;
  }

  100% {
    top: -100%;
  }
}

@-moz-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

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

  100% {
    opacity: 1;
  }
}

.modal-large {
  position: fixed;
  z-index: 15;
  top: 0;
  width: 100%;
  height: 100%;
}

.modal-body {
  margin: 0;
  height: calc(90% - 4.7em);
  padding: 2em;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80%;
  border-bottom: 0.7em solid #e84331;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
}

.happy-modal img {
  width: 45%;
  display: block;
  margin: auto;
}

.happy-modal h1 {
  text-align: center;
  line-height: 1.1em;
}

.happy-manaba {
  opacity: 0;
  transform: translateY(1em);
  -moz-transform: translateY(1em);
  -webkit-transform: translateY(1em);
  -moz-animation-name: manabaUp;
  -webkit-animation-name: manabaUp;
  animation-name: manabaUp;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  -moz-animation-duration: 0.4s;
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
}

.character-happy,
.characters-caption {
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease-in;
  -moz-animation-duration: 0.8s;
  -webkit-animation-fill-mode: forwards;
}

.character-btn,
.character-sad,
.characters-caption {
  animation-fill-mode: forwards;
}

@-moz-keyframes manabaUp {
  0% {
    opacity: 0;
    transform: translateY(1em);
    -moz-transform: translateY(1em);
    -webkit-transform: translateY(1em);
  }

  100% {
    transform: translateY(0);
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
    opacity: 1;
  }
}

@-webkit-keyframes manabaUp {
  0% {
    opacity: 0;
    transform: translateY(1em);
    -moz-transform: translateY(1em);
    -webkit-transform: translateY(1em);
  }

  100% {
    transform: translateY(0);
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
    opacity: 1;
  }
}

@keyframes manabaUp {
  0% {
    opacity: 0;
    transform: translateY(1em);
    -moz-transform: translateY(1em);
    -webkit-transform: translateY(1em);
  }

  100% {
    transform: translateY(0);
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
    opacity: 1;
  }
}

.happy-modal span {
  font-size: 2.5rem;
  color: #1e1e1e;
  font-weight: 100;
}

span.happy-title {
  font-size: 1.5rem;
  color: #1e1e1e;
  margin-top: 0.8em;
  font-weight: 100;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: block;
  text-align: center;
}

.transition-animate {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  z-index: 101;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

.transition-animate div:nth-child(1) {
  height: 0;
  background: #ec6b54;
  transition: all 0.8s;
  -webkit-transition: all 0.8s;
}

.transition-animate div:nth-child(2) {
  height: 0;
  background: #cc4c35;
  transition: all 0.8s;
  -webkit-transition: all 0.8s;
}

.transition-animate div:nth-child(3) {
  height: 0;
  background: #d83f25;
  transition: all 0.8s;
  -webkit-transition: all 0.8s;
}

.transition-animate.animate div:nth-child(1) {
  height: 25em;
}

.transition-animate.animate div:nth-child(2) {
  height: 17em;
}

.transition-animate.animate div:nth-child(3) {
  height: 26em;
}

.characters-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
}

.characters-caption {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  top: 0;
  opacity: 0;
  z-index: 1;
  font-size: 1.5em;
  font-weight: 900;
  text-transform: uppercase;
  margin: 0;
  line-height: 0.9em;
  color: #5d5d5d;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-animation-name: dropDown;
  -webkit-animation-name: dropDown;
  animation-name: dropDown;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -moz-animation-delay: 3.8s;
  -webkit-animation-delay: 3.8s;
  animation-delay: 3.8s;
}

.character-happy,
.character-sad {
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-duration: 0.8s;
}

.characters-caption-block {
  transition: all 0.6s;
  -webkit-transition: all 0.6s;
  display: block;
  margin-top: 0;
  opacity: 1;
}

.characters-caption-block.hide {
  margin-top: -10rem;
  opacity: 0;
}

@-moz-keyframes dropDown {
  0% {
    opacity: 0;
    top: 0;
  }

  100% {
    opacity: 1;
    top: 3rem;
  }
}

@-webkit-keyframes dropDown {
  0% {
    opacity: 0;
    top: 0;
  }

  100% {
    opacity: 1;
    top: 3rem;
  }
}

@keyframes dropDown {
  0% {
    opacity: 0;
    top: 0;
  }

  100% {
    opacity: 1;
    top: 3rem;
  }
}

.characters-caption b {
  font-size: 1.2em;
}

.characters-list {
  margin: 0;
  position: relative;
}

.character-item {
  position: relative;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  cursor: pointer;
  float: left;
  width: 50%;
}

.character-image {
  width: 90%;
  margin: -5% auto 0;
  left: 0;
  right: 0;
  position: absolute;
  top: 50%;
  -moz-transform: translateY(-50%) !important;
  -ms-transform: translateY(-50%) !important;
  -webkit-transform: translateY(-50%) !important;
  transform: translateY(-50%) !important;
}

.character-happy {
  -ms-transform: translateX(-90%);
  -webkit-transform: translateX(-90%);
  transform: translateX(-90%);
  -moz-animation-name: characterHappy;
  -webkit-animation-name: characterHappy;
  animation-name: characterHappy;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 0.8s;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -moz-animation-delay: 3.5s;
  -webkit-animation-delay: 3.5s;
  animation-delay: 3.5s;
}

.character-btn,
.character-sad {
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease-in;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

.character-sad {
  background: #f1f1f1;
  -ms-transform: translateX(90%);
  -webkit-transform: translateX(90%);
  transform: translateX(90%);
  -moz-animation-name: characterSad;
  -webkit-animation-name: characterSad;
  animation-name: characterSad;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  -moz-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -moz-animation-delay: 3.5s;
  -webkit-animation-delay: 3.5s;
  animation-delay: 3.5s;
}

.characters-list.animate .character-happy {
  width: 100%;
}

.characters-list.animate .character-sad {
  width: 0;
}

@-moz-keyframes characterHappy {
  0% {
    -ms-transform: translateX(-90%);
    -webkit-transform: translateX(-90%);
    transform: translateX(-90%);
  }

  100% {
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-webkit-keyframes characterHappy {
  0% {
    -ms-transform: translateX(-90%);
    -webkit-transform: translateX(-90%);
    transform: translateX(-90%);
  }

  100% {
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes characterHappy {
  0% {
    -ms-transform: translateX(-90%);
    -webkit-transform: translateX(-90%);
    transform: translateX(-90%);
  }

  100% {
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-moz-keyframes characterSad {
  0% {
    -ms-transform: translateX(90%);
    -webkit-transform: translateX(90%);
    transform: translateX(90%);
  }

  100% {
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-webkit-keyframes characterSad {
  0% {
    -ms-transform: translateX(90%);
    -webkit-transform: translateX(90%);
    transform: translateX(90%);
  }

  100% {
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes characterSad {
  0% {
    -ms-transform: translateX(90%);
    -webkit-transform: translateX(90%);
    transform: translateX(90%);
  }

  100% {
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.error-intro,
.header-social {
  -moz-transform: translateY(-50%) !important;
  -ms-transform: translateY(-50%) !important;
  -webkit-transform: translateY(-50%) !important;
}

.character-btn {
  position: absolute;
  border: none;
  outline: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1.5em 0;
  font-size: 1.3em;
  letter-spacing: 0.1em;
  font-weight: 300;
  color: #6d6e71;
  background-color: #e84331;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  opacity: 0;
  -moz-animation-name: fadeIn;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -moz-animation-duration: 0.4s;
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -moz-animation-delay: 4.5s;
  -webkit-animation-delay: 4.5s;
  animation-delay: 4.5s;
}

#error-video,
.error-body,
.main-body,
.video-wrapper {
  position: relative;
}

#intro-video,
.caveman-video,
.error-intro,
.error-overlay,
.video-caption {
  position: absolute;
  left: 0;
}

.main-body.show .bg-text-wrapper,
.main-body.show .video-caption {
  -moz-animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

.character-happy .character-btn {
  background-color: #fff;
}

.character-sad .character-btn {
  background: #f1f1f1;
}

.character-item:hover .character-btn {
  background-color: #e84331;
  color: #fff;
}

.main-body {
  opacity: 0;
  z-index: 8;
  transition: all 0.8s;
  -webkit-transition: all 0.8s;
}

.main-body.show {
  opacity: 1;
}

.video-wrapper {
  background-color: #fff;
  z-index: 9;
  min-height: 30em;
}

#intro-video {
  bottom: 0;
  width: 100%;
}

.error-body {
  background-color: #e84331;
}

#error-video {
  width: 100%;
}

.error-intro {
  top: 50%;
  transform: translateY(-50%) !important;
  text-align: center;
  right: 0;
  z-index: 10;
}

.error-intro h1 {
  color: #fff;
  font-weight: 700;
  font-size: 7em;
  margin: 0;
  line-height: 1em;
}

.error-intro p {
  color: #fff;
  font-size: 1.8em;
  line-height: 1em;
}

.error-intro p a {
  font-size: 0.85em;
  color: #fff;
  padding-bottom: 0.2em;
  border-bottom: 0.1em solid transparent;
}

.error-intro p a:hover {
  border-bottom: 0.1em solid #eee;
}

.error-overlay {
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  z-index: 9;
}

.caveman-video {
  bottom: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/caveman.gif);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: bottom;
}

.video-caption {
  z-index: 3;
  top: 18em;
  right: 0;
  opacity: 0;
  transition: all 0.8s;
  -webkit-transition: all 0.8s;
}

.main-body.show .video-caption {
  -moz-animation-name: showVidCaption;
  -webkit-animation-name: showVidCaption;
  animation-name: showVidCaption;
  animation-iteration-count: 1;
  -moz-animation-timing-function: ease-in;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -moz-animation-duration: 0.8s;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  -moz-animation-delay: 0.1s;
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

#logo-text,
.main-body.show .bg-text-wrapper {
  -moz-animation-timing-function: ease-in;
  -webkit-animation-timing-function: ease-in;
}

@-moz-keyframes showVidCaption {
  0% {
    top: 18em;
    opacity: 0;
  }

  100% {
    opacity: 1;
    top: 26%;
  }
}

@-webkit-keyframes showVidCaption {
  0% {
    top: 18em;
    opacity: 0;
  }

  100% {
    opacity: 1;
    top: 26%;
  }
}

@keyframes showVidCaption {
  0% {
    top: 18em;
    opacity: 0;
  }

  100% {
    opacity: 1;
    top: 26%;
  }
}

.video-caption h1 {
  text-align: center;
  line-height: 1em;
  font-size: 2.8em;
  color: #676767;
}

.video-caption h1 b {
  font-weight: 700;
  display: block;
  color: #231f20;
  font-size: 1.35em;
  line-height: 1.05em;
}

.video-caption .btn {
  display: table;
  outline: 0;
  border: none;
  background: 0 0;
  margin: 2.7em auto auto;
}

.video-caption .btn .fa {
  color: #6d6e71;
  padding: 1em 1.2em;
  font-size: 1.5em;
  border-radius: 50%;
  display: table;
  margin: auto;
  border: 0.1em solid #6d6e71;
  opacity: 0.7;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

.video-caption .btn .fa:hover {
  opacity: 1;
  cursor: pointer;
  background-color: #231f20;
  color: #fff;
}

.video-caption .btn span {
  display: block;
  margin-top: 0.5em;
  font-weight: 100;
  width: 16em;
  color: #5a5959;
  position: relative;
}

.video-caption .btn span em {
  display: block;
  opacity: 0.6;
  position: absolute;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  left: 50%;
  white-space: nowrap;
}

.header-logo,
.line-menu {
  display: inline-block;
  vertical-align: middle;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 1em 3%;
  z-index: 14;
  opacity: 1;
  transition: all 1s;
  -webkit-transition: all 1s;
}

.hide-header header {
  top: -5em;
  opacity: 0;
  z-index: 9;
}

.header-logo {
  position: relative;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

#logo-text {
  position: absolute;
  opacity: 0;
  left: 0;
  top: 0.6rem;
  font-size: 3em;
  color: #474747;
  -moz-animation-name: logoText;
  -webkit-animation-name: logoText;
  animation-name: logoText;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
  -moz-animation-duration: 1.1s;
  -webkit-animation-duration: 1.1s;
  animation-duration: 1.1s;
  -moz-animation-fill-mode: none;
  -webkit-animation-fill-mode: none;
  animation-fill-mode: none;
  animation-play-state: paused;
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
}

.header-logo:active #logo-text,
.header-logo:hover #logo-text,
.line-menu:active + .header-logo #logo-text,
.line-menu:hover + .header-logo #logo-text {
  opacity: 1;
  animation-play-state: running;
  -moz-animation-play-state: running;
  -webkit-animation-play-state: running;
}

.header-logo img {
  width: 100%;
  opacity: 0;
}

.header-logo img:last-child {
  position: absolute;
  left: 0;
  top: 0;
}

.header-logo img.show-header {
  opacity: 1;
}

.header-logo {
  width: 7em;
}

.header-logo:hover img,
.line-menu:hover + .header-logo img {
  opacity: 0;
}

@keyframes logoText {
  0% {
    font-family: serif;
  }

  20% {
    font-family: cursive;
  }

  40% {
    font-family: fantasy;
  }

  60% {
    font-family: Georgia;
    text-transform: uppercase;
  }

  80% {
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
  }

  100% {
    font-family: monospace;
  }
}

@-webkit-keyframes logoText {
  0% {
    font-family: serif;
  }

  20% {
    font-family: cursive;
  }

  40% {
    font-family: fantasy;
  }

  60% {
    font-family: Georgia;
    text-transform: uppercase;
  }

  80% {
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
  }

  100% {
    font-family: monospace;
  }
}

@-moz-keyframes logoText {
  0% {
    font-family: serif;
  }

  20% {
    font-family: cursive;
  }

  40% {
    font-family: fantasy;
  }

  60% {
    font-family: Georgia;
    text-transform: uppercase;
  }

  80% {
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
  }

  100% {
    font-family: monospace;
  }
}

.line-menu {
  position: relative;
  width: 2em;
  padding-right: 1em;
  margin-top: 1.2em;
  cursor: pointer;
}

.line-menu label {
  position: absolute;
  bottom: -1em;
  left: -1.3em;
  font-weight: 100;
  font-size: 0.5em;
  letter-spacing: 0.3em;
  opacity: 0;
  color: #6d6e71;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

.line-menu span {
  display: block;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  height: 2px;
  width: 100%;
  background: #969696;
  margin-bottom: 0.6em;
}

.line-menu span:nth-child(2) {
  width: 70%;
}

.line-menu span:nth-child(3) {
  width: 85%;
}

.line-menu:hover span {
  width: 100%;
}

.line-menu:hover label {
  left: -0.1em;
  opacity: 1;
}

.line-menu.show-header span:nth-child(2) {
  width: 0;
}

.line-menu.show-header span:nth-child(1) {
  width: 100%;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform-origin: top left;
  -webkit-transform-origin: top left;
}

.line-menu.show-header span:nth-child(3) {
  width: 100%;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform-origin: bottom left;
  -webkit-transform-origin: bottom left;
}

.bg-text-wrapper {
  position: absolute;
  top: 35%;
  left: -1em;
  z-index: 1;
  opacity: 0;
  transition: all 1.2s;
  -webkit-transition: all 1.2s;
}

.main-body.show .bg-text-wrapper {
  -moz-animation-name: showBgCaption;
  -webkit-animation-name: showBgCaption;
  animation-name: showBgCaption;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  -moz-animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  -moz-animation-delay: 0s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.contact-animate,
.curr-element .work-lines span {
  -moz-animation-duration: 0.5s;
  -webkit-animation-duration: 0.5s;
}

.curr-element .transparent-title-wrapper,
.curr-element .work-lines span {
  -moz-animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

.contact-intro,
.curr-element .transparent-title-wrapper,
.curr-element .transparent-title-wrapper span,
.curr-element .work-lines span {
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@-moz-keyframes showBgCaption {
  0% {
    top: 35%;
    opacity: 0;
  }

  100% {
    opacity: 1;
    top: 17%;
  }
}

@-webkit-keyframes showBgCaption {
  0% {
    top: 35%;
    opacity: 0;
  }

  100% {
    opacity: 1;
    top: 17%;
  }
}

@keyframes showBgCaption {
  0% {
    top: 35%;
    opacity: 0;
  }

  100% {
    opacity: 1;
    top: 17%;
  }
}

.bg-text-wrapper hr {
  border: none;
  border-top: 1px solid #eee;
  width: 70%;
  opacity: 0.6;
}

.bg-text-wrapper hr:last-child {
  left: 0;
  margin: 0 0 0 15%;
  text-align: left;
  width: 30em;
  opacity: 0.6;
}

.bg-text {
  color: #b3b3b3;
  font-size: 15em;
  margin: 0 0 0.1em;
  z-index: 1;
  font-weight: 900;
  opacity: 0.1;
  line-height: 1.3em;
  white-space: nowrap;
}

.header-social {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) !important;
  right: 0;
  margin-top: -0.6em;
}

.header-list-items-wrapper,
.transparent-title-wrapper span {
  -moz-transform: translateY(-50%) !important;
  -ms-transform: translateY(-50%) !important;
  -webkit-transform: translateY(-50%) !important;
}

.header-social-list {
  margin: 0;
}

.header-social-item {
  display: inline-block;
}

.header-social-item a {
  display: block;
  margin-left: 0.6em;
  color: #6d6e71;
  padding: 0.67em 0.6em;
  border: 0.1em solid #6d6e71;
  font-size: 0.85em;
  border-radius: 50%;
  opacity: 0.6;
}

.header-social-item a:hover {
  opacity: 1;
  background-color: #231f20;
  color: #fff;
}

header.show-header {
  z-index: 14;
  position: fixed !important;
}

.header-complete {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  z-index: 13;
  background: rgba(232, 67, 49, 0.95);
  transition: all 0.8s;
  -webkit-transition: all 0.8s;
}

.alt-header .line-menu span,
.header-line,
.show-header .line-menu span,
.solid-header .line-menu span,
.work-lines span {
  background-color: #fff;
}

.header-complete.show-header {
  height: 100%;
}

.solid-header header {
  position: absolute;
}

.alt-header,
.solid-header header {
  padding: 0.3em 3%;
}

.alt-header .header-social,
.solid-header .header-social {
  margin-top: 0;
}

.alt-header .header-logo,
.solid-header .header-logo {
  width: 5.7em;
}

.alt-header .logo-wrapper img:first-child,
.solid-header .logo-wrapper img:first-child {
  opacity: 0 !important;
  top: 0.5em;
}

.alt-header .logo-wrapper img:last-child,
.solid-header .logo-wrapper img:last-child {
  opacity: 1 !important;
  top: 0.5em;
}

.alt-header .header-logo:active .logo-wrapper img:last-child,
.alt-header .header-logo:hover .logo-wrapper img:last-child,
.alt-header .line-menu:active + .header-logo .logo-wrapper img:last-child,
.alt-header .line-menu:hover + .header-logo .logo-wrapper img:last-child,
.solid-header .header-logo:active .logo-wrapper img:last-child,
.solid-header .header-logo:hover .logo-wrapper img:last-child,
.solid-header .line-menu:active + .header-logo .logo-wrapper img:last-child,
.solid-header .line-menu:hover + .header-logo .logo-wrapper img:last-child {
  opacity: 0 !important;
}

.alt-header #logo-text {
  font-size: 2.3em;
}

.alt-header #logo-text,
.alt-header .line-menu label,
.show-header #logo-text,
.show-header .line-menu label,
.solid-header #logo-text,
.solid-header .line-menu label {
  color: #fff;
}

.alt-header .header-social-item a,
.show-header .header-social-item a,
.solid-header .header-social-item a {
  color: #fff;
  border-color: #fff;
  opacity: 1;
}

.header-item-caption,
.header-list-items-wrapper {
  margin-top: 2em;
  opacity: 0;
  text-align: center;
  left: 0;
  right: 0;
}

.alt-header .header-social-item a:hover,
.show-header .header-social-item a:hover,
.solid-header .header-social-item a:hover {
  color: #231f20;
  background-color: #fff;
}

.header-list-items-wrapper {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) !important;
  transition: all 0.6s;
  -webkit-transition: all 0.6s;
}

.header-caption-wrapper {
  height: 2em;
  padding: 0.4em 0;
  position: relative;
}

.header-item-caption {
  color: #fff;
  display: block;
  font-family: "Libre Baskerville", serif;
  font-weight: 100;
  position: absolute;
  top: 0;
  overflow: hidden;
  max-height: 0;
  font-size: 1.5em;
  padding: 0;
  transition: all 0.8s;
  -webkit-transition: all 0.8s;
}

.main-work-title .work-title,
.manaba-btns .btn,
.work-page-caption p {
  font-family: "Open Sans", sans-serif;
}

.header-item-caption.show {
  max-height: 1em;
  padding: 0.5em 0;
  margin-top: 0.5em;
  opacity: 1;
}

.header-list-items {
  margin: 0;
}

.header-list-items-wrapper.show-header {
  opacity: 1;
  margin-top: -1em;
}

.header-item {
  position: relative;
}

.header-item a {
  font-size: 2.3em;
  display: inline-block;
  font-weight: 100;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  margin: 0.6em;
}

.header-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  transition: all 0.7s;
  -webkit-transition: all 0.7s;
  height: 1px;
  width: 0;
  margin: auto;
}

.header-item:hover .header-line {
  width: 4%;
}

.footer-bottom {
  position: absolute;
  bottom: 2em;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.85em;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  opacity: 0;
}

.footer-bottom.show-header {
  opacity: 1;
}

.footer-bottom a,
.footer-bottom span {
  color: #fff;
  font-size: 0.85em;
  text-decoration: none;
  display: inline-block;
  vertical-align: middle;
}

.footer-bottom .fa {
  color: #fff;
  display: inline-block;
  vertical-align: middle;
  font-size: 4px;
  margin: 0 2em;
}

.swipe-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  transition: all 0.8s;
  -webkit-transition: all 0.8s;
  transform: translateY(30%);
  -webkit-transform: translateY(30%);
}

.work-item {
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.pattern-img {
  position: absolute;
  right: 0.5rem;
  bottom: 0rem;
  width: 40em;
  opacity: 0.6;
  z-index: 1;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  transform: translateX(-1rem);
  opacity: 0;
}

.curr-element .pattern-img {
  animation-delay: 0.56s;
  animation-name: showPattern;
}

/* .work-festa {
  background-image: url(../images/work-festa.jpg)
} */
.work-image {
  display: block;
  margin: auto;
  width: 30%;
}

/* .work-voi {
  background-image: url(../images/work-voi.jpg)
} */
.work-landmark {
  background: #fed118;
}

/* .work-247 {
  background-image: url(../images/work-247.jpg)
} */
.work-toysrus {
  background: #004ebc;
}

/* .work-cornerhouse {
  background-image: url(../images/work-cornerhouse.jpg)
} */
.work-soulfull {
  background: #fd6643;
}

.work-central {
  background: #d81616;
}

.work-intuit {
  background: #1865c7;
}

.work-soulfull .transparent-title-wrapper h3 {
  letter-spacing: 1rem;
}

.work-central .transparent-title-wrapper h3 {
  letter-spacing: 2rem;
}

.work-intuit .transparent-title-wrapper h3 {
  letter-spacing: 6rem;
}

.prev-element.swipe-element {
  transform: translateY(-100%);
}

.last-element.swipe-element {
  transform: translateY(-30em);
}

.curr-element.swipe-element {
  transform: translateY(0);
}

.work-item-translate {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: auto;
  z-index: 11;
}

.work-caption {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 5%;
  width: 30%;
}

.work-lines span {
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  position: absolute;
}

.work-lines span:nth-child(1) {
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
}

.work-lines span:nth-child(2) {
  top: 0;
  right: 0;
  width: 2px;
  height: 0;
}

.work-lines span:nth-child(3) {
  bottom: 0;
  right: 0;
  height: 2px;
  width: 0;
}

.work-lines span:nth-child(4) {
  bottom: 0;
  left: 0;
  width: 2px;
  height: 0;
}

.curr-element .work-lines span {
  -moz-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  animation-duration: 0.5s;
  -moz-animation-delay: 0.25s;
  -webkit-animation-delay: 0.25s;
  animation-delay: 0.25s;
}

.curr-element .work-lines span:nth-child(1),
.curr-element .work-lines span:nth-child(3) {
  -moz-animation-name: lineWide;
  -webkit-animation-name: lineWide;
  animation-name: lineWide;
}

.curr-element .work-lines span:nth-child(2),
.curr-element .work-lines span:nth-child(4) {
  -moz-animation-name: lineTall;
  -webkit-animation-name: lineTall;
  animation-name: lineTall;
}

@keyframes showPattern {
  0% {
    transform: translateX(-1rem);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 0.5;
  }
}

@-webkit-keyframes showPattern {
  0% {
    transform: translateX(-1rem);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 0.5;
  }
}

@-moz-keyframes showPattern {
  0% {
    transform: translateX(-1rem);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 0.5;
  }
}

@-moz-keyframes lineWide {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

@-webkit-keyframes lineWide {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

@keyframes lineWide {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

@-moz-keyframes lineTall {
  0% {
    height: 0;
  }

  100% {
    height: 100%;
  }
}

@-webkit-keyframes lineTall {
  0% {
    height: 0;
  }

  100% {
    height: 100%;
  }
}

@keyframes lineTall {
  0% {
    height: 0;
  }

  100% {
    height: 100%;
  }
}

.work-caption-block {
  position: relative;
  padding: 2em 2em 4em;
  opacity: 0;
  margin-top: 2em;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

.curr-element .work-caption-block {
  opacity: 1;
  margin-top: 0;
}

.work-caption .heading {
  position: relative;
  margin: 0 0 1.8em;
  padding: 0 0.5em 0 0;
}

.curr-element .work-caption .heading::before,
.curr-element .work-caption p::before {
  animation-delay: 0.8s;
  animation-name: text-patch-anim;
}

.work-caption .heading::before {
  content: " ";
  position: absolute;
  width: 0;
  height: 112%;
  background: #fff;
  opacity: 1;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.work-caption p::before {
  content: " ";
  position: absolute;
  width: 0;
  height: 100%;
  background: #fff;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.curr-element .work-caption p {
  animation-delay: 1.2s;
}

.curr-element .work-caption h2,
.curr-element .work-caption p {
  animation-delay: 1s;
}

.curr-element .btn-flash,
.curr-element .work-caption h2,
.curr-element .work-caption p,
.curr-element {
  animation-name: text-anim;
}

.work-caption h2 {
  font-weight: 900;
  text-transform: capitalize;
  font-size: 4rem;
  line-height: 0.85em;
  opacity: 0;
  transform: translateX(-1rem);
  color: #fff;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.work-caption p {
  font-size: 1rem;
  line-height: 1.5em;
  opacity: 0;
  transform: translateX(-1rem);
  color: #fff;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.work-caption .line {
  height: 2px;
  width: 0%;
  background: #fff;
  display: block;
  opacity: 0;
  margin-bottom: 1.5em;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.curr-element .work-caption .line {
  animation-delay: 1.1s;
  animation-name: showLine;
}

.btn-flash {
  background: 0 0;
  border: none;
  outline: 0;
  position: absolute;
  right: 1em;
  bottom: -1em;
  cursor: pointer;
  z-index: 10;
}

.btn-wrapper {
  white-space: nowrap;
  position: relative;
}

.btn-wrapper-hover {
  margin: 0;
  white-space: nowrap;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.btn-wrapper-hover li {
  display: inline-block;
  width: 100%;
  height: 100%;
}

.btn-wrapper-hover li:nth-child(1) {
  background-color: #e84331;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  margin-left: -100%;
}

.btn-wrapper-hover li:nth-child(2) {
  background-color: #231f20;
}

.btn-flash:hover .btn-wrapper-hover li:nth-child(1) {
  margin-left: 0;
}

.btn-wrapper span {
  display: block;
  color: #fff;
  padding: 1.5em 3.5em;
  position: relative;
  font-size: 0.8em;
}

.transparent-title-wrapper {
  position: absolute;
  left: -4rem;
  bottom: -10rem;
  z-index: 0;
  white-space: nowrap;
  opacity: 0;
}

.curr-element .transparent-title-wrapper {
  -moz-animation-name: transparentTitle;
  -webkit-animation-name: transparentTitle;
  animation-name: transparentTitle;
  -moz-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -moz-animation-duration: 1.1s;
  -webkit-animation-duration: 1.1s;
  animation-duration: 1.1s;
  -moz-animation-delay: 0s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.contact-intro,
.curr-element .transparent-title-wrapper span {
  -moz-animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@keyframes text-patch-anim {
  0% {
    width: 0;
    left: 0;
  }

  60% {
    left: 0;
    width: 100%;
  }

  100% {
    left: 100%;
    width: 0;
  }
}

@keyframes showLine {
  0% {
    width: 0;
    opacity: 0;
  }

  100% {
    width: 50%;
    opacity: 1;
  }
}

@keyframes text-anim {
  0% {
    transform: translateX(-1rem);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@-moz-keyframes transparentTitle {
  0% {
    opacity: 0;
    bottom: -10em;
  }

  100% {
    opacity: 0.15;
    bottom: -6rem;
  }
}

@-webkit-keyframes transparentTitle {
  0% {
    opacity: 0;
    bottom: -10em;
  }

  100% {
    opacity: 0.15;
    bottom: -6rem;
  }
}

@keyframes transparentTitle {
  0% {
    opacity: 0;
    bottom: -10em;
  }

  100% {
    opacity: 0.15;
    bottom: -6rem;
  }
}

.transparent-title-wrapper h3 {
  font-size: 16em;
  color: #ababab;
  line-height: 0;
  text-transform: uppercase;
  font-weight: 900;
}

.transparent-title-wrapper span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) !important;
  left: 0;
  height: 1px;
  width: 0;
  background-color: #fff;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

.curr-element .transparent-title-wrapper span {
  -moz-animation-name: transparentSpan;
  -webkit-animation-name: transparentSpan;
  animation-name: transparentSpan;
  -moz-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -moz-animation-duration: 0.7s;
  -webkit-animation-duration: 0.7s;
  animation-duration: 0.7s;
  -moz-animation-delay: 1.1s;
  -webkit-animation-delay: 1.1s;
  animation-delay: 1.1s;
}

.contact-animate,
.contact-intro {
  -moz-animation-timing-function: ease-in;
}

@-moz-keyframes transparentSpan {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

@-webkit-keyframes transparentSpan {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

@keyframes transparentSpan {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

.work-nav {
  top: 50%;
  -moz-transform: translateY(-50%) !important;
  -ms-transform: translateY(-50%) !important;
  -webkit-transform: translateY(-50%) !important;
  transform: translateY(-50%) !important;
  position: fixed;
  right: 2em;
  z-index: 8;
}

.work-nav-list {
  margin: 0;
  position: relative;
}

.work-nav-item {
  display: block;
  padding: 0.4em 0;
  cursor: pointer;
}

.work-nav-item label {
  text-align: right;
  display: block;
  position: absolute;
  top: -0.5em;
  white-space: nowrap;
  right: 0;
  font-size: 0.7em;
  opacity: 0;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  color: #f9f9f9;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 400;
  max-height: 0;
}

.work-nav-item:hover label {
  top: -1.5em;
  opacity: 0.7;
  overflow: visible;
  max-height: 1.1em;
}

.work-nav-item span {
  display: block;
  width: 1em;
  height: 1px;
  background-color: #fff;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

.work-nav-item.selected span,
.work-nav-item:hover span {
  width: 2em;
}

.work-wrapper {
  position: relative;
}

.work-nav-number {
  position: absolute;
  right: -0.1em;
  font-size: 2em;
  bottom: -0.7em;
  line-height: 0;
  font-weight: 900;
  z-index: -1;
  color: #fff;
  opacity: 0.1;
}

.swipe-list {
  position: relative;
}

.manaba-block,
.manaba-quote-wrapper {
  position: fixed;
  z-index: 10;
  transition: all 0.3s;
}

.manaba-block {
  bottom: 0;
  right: 3em;
  cursor: pointer;
  opacity: 0;
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 0.3s;
}

.manaba-block.show {
  opacity: 1;
  overflow: visible;
  max-height: 10em;
  bottom: 2em;
}

.manaba-quote-wrapper {
  left: 0;
  top: 0;
  width: 100%;
  height: 0%;
  background: rgba(239, 72, 54, 0.95);
  overflow: hidden;
  -webkit-transition: all 0.3s;
}

.show-manaba.manaba-quote-wrapper {
  height: 100%;
}

.manaba-quote-block {
  padding: 10em 5% 0;
  text-align: left;
}

.new-manaba-wrapper .manaba-block span,
footer {
  text-align: center;
}

.manaba-quote-block h3 {
  color: #fff;
  font-weight: 900;
  font-size: 5em;
  margin-top: 0.4em;
  line-height: 1em;
}

.manaba-img,
.manaba-img-wrapper {
  height: 7em;
  width: 7em;
  overflow: hidden;
  border-radius: 50%;
  padding: 0;
  margin: auto;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

.manaba-img-wrapper {
  border: 6px solid #eceaea;
  box-shadow: 0 0 0.7em 0 #b1b1b1;
}

.manaba-img-wrapper img {
  width: 10.5em;
  margin-top: -0.5em;
  margin-left: -1.5em;
}

.manaba-block.show-manaba .manaba-img-wrapper,
.manaba-block:hover .manaba-img-wrapper {
  padding: 5px;
  box-shadow: 0 0 0.7em -0.1em #b1b1b1;
}

.manaba-block span {
  color: #fff;
  font-weight: 400;
  display: block;
  margin: 0.3em 0 0;
  opacity: 0;
  transform: translateY(1.3em);
  -webkit-transform: translateY(1.3em);
  -moz-transform: translateY(1.3em);
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

.manaba-block.show-manaba span,
.manaba-block:hover span {
  transform: translateY(0);
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  opacity: 1;
}

.transition-line,
.work-hero video {
  -moz-transform: translateY(-50%) !important;
  -ms-transform: translateY(-50%) !important;
  -webkit-transform: translateY(-50%) !important;
}

.manaba-btns .btn {
  display: inline-block;
  font-weight: 400;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  color: #fff;
  opacity: 0.8;
  margin-right: 0.5em;
  border: 2px solid #fff;
  font-size: 1.1em;
  background: 0 0;
  cursor: pointer;
  padding: 0.6em 1.4em;
  border-radius: 0.4em;
  outline: 0;
}

.services-list li div,
.services-wrapper .services-wrapper-info em,
.work-page-caption h1 {
  font-family: "Libre Baskerville", serif;
}

.manaba-btns .btn:hover,
.new-manaba-wrapper .btn.transparent {
  background-color: #fff;
  color: #231f20;
  opacity: 1;
}

.new-manaba-wrapper .manaba-block {
  position: relative;
  right: auto;
  width: 13em;
  bottom: auto;
  margin-top: 2em;
  vertical-align: middle;
  display: inline-block;
}

.manaba-quote-block h3 {
  width: calc(100% - 17rem);
  vertical-align: middle;
  display: inline-block;
}

footer {
  background-color: #231f20;
  border-top: 5em solid #2d2b2c;
  overflow: hidden;
  padding: 5em 7% 2em;
}

.home-footer-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  top: auto;
  width: 100%;
  height: auto;
  padding-top: 25em;
  background: #333031;
}

.footer-intro {
  font-size: 2em;
  line-height: 1.25em;
  color: #fff;
  font-weight: 100;
}

.footer-intro b {
  font-size: 1.25em;
  font-weight: 700;
  display: block;
}

.footer-list {
  margin: 3em 0;
}

.footer-item a {
  font-weight: 100;
  color: #fff;
  display: inline-block;
  opacity: 0.5;
  font-size: 1.8em;
  margin: 0.5em 0;
}

.footer-item a:hover {
  opacity: 1;
}

.footer-legal {
  font-size: 0.7em;
  display: block;
  color: grey;
  padding-top: 3em;
  margin-top: 1em;
  border-top: 1px solid #333;
  position: relative;
  z-index: 10;
}

.footer-legal a {
  color: #eee;
  margin: 0 0.75rem;
}

.footer-legal span {
  color: #eee;
  display: block;
  margin-bottom: 0.5rem;
}

.footer-logo {
  position: absolute;
  left: -20%;
  right: 0;
  width: 140%;
  bottom: -25em;
  margin: auto;
  opacity: 0.012;
  z-index: 0;
}

.bottom-transition,
.top-transition {
  position: fixed;
  left: 0;
  width: 100%;
  height: 0%;
  z-index: 20;
  background-color: #231f20;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
}

.top-transition {
  top: 0;
}

.bottom-transition {
  bottom: 0;
}

.animate.bottom-transition,
.animate.top-transition {
  height: 50%;
}

.transition-line {
  top: 50%;
  transform: translateY(-50%) !important;
  left: 0;
  height: 1px;
  position: fixed;
  z-index: 20;
  background-color: #fff;
  width: 0;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
}

.contact-body,
.contact-intro,
.contact-item {
  position: relative;
}

.animate-mid.transition-line {
  width: 35%;
}

.animate-complete.transition-line {
  width: 100%;
}

#history-container {
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  opacity: 1;
}

#history-container.animate {
  opacity: 0;
}

#contact-container {
  background: #eb5848;
}

.contact-intro {
  padding: 11em 5% 6em;
  text-align: left;
  z-index: 1;
  -moz-animation-name: contactIntro;
  -webkit-animation-name: contactIntro;
  animation-name: contactIntro;
  animation-timing-function: ease-in;
  -moz-animation-duration: 0.7s;
  -webkit-animation-duration: 0.7s;
  animation-duration: 0.7s;
}

#contact-container footer,
#contact-container header,
.contact-animate {
  -moz-animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

.contact-intro h1 {
  color: #fff;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin: 0;
  line-height: 0.8em;
}

.contact-intro p {
  color: #fff;
  font-size: 1.5em;
}

.contact-list {
  margin: 3em 0 0;
}

.contact-item {
  display: block;
  padding-bottom: 1.1em;
  margin-bottom: 1em;
}

.contact-item a,
.contact-item img {
  display: inline-block;
  vertical-align: middle;
}

.contact-item a {
  color: #fff;
  font-size: 1.8em;
  transition: all 0.3s;
  text-decoration: none;
  -webkit-transition: all 0.3s;
  margin-left: 0;
}

.contact-animate,
.contact-line {
  position: absolute;
  transition: all 0.3s;
  left: 0;
}

.contact-item a em {
  opacity: 0.9;
  margin: 0.4em 0;
  font-size: 0.95rem;
}

.contact-item img {
  width: 3em;
  margin-right: 0.5em;
}

.contact-line {
  bottom: 0;
  width: 0;
  height: 1px;
  -webkit-transition: all 0.3s;
  background-color: #fff;
}

.contact-item:hover .contact-line {
  width: 30%;
}

#contact-container footer {
  border-top: 6em solid #333031;
}

.contact-animate {
  top: 0;
  height: 100%;
  width: 0;
  z-index: 0;
  background-color: #e84331;
  -webkit-transition: all 0.3s;
  -moz-animation-name: contactAnimation;
  -webkit-animation-name: contactAnimation;
  animation-name: contactAnimation;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@-moz-keyframes contactAnimation {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

@-webkit-keyframes contactAnimation {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

@keyframes contactAnimation {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

@-moz-keyframes contactIntro {
  0% {
    opacity: 0;
    transform: translateX(-3em);
    -webkit-transform: translateX(-3em);
    -moz-transform: translateX(-3em);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
  }
}

@-webkit-keyframes contactIntro {
  0% {
    opacity: 0;
    transform: translateX(-3em);
    -webkit-transform: translateX(-3em);
    -moz-transform: translateX(-3em);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
  }
}

@keyframes contactIntro {
  0% {
    opacity: 0;
    transform: translateX(-3em);
    -webkit-transform: translateX(-3em);
    -moz-transform: translateX(-3em);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
  }
}

#contact-container footer,
#contact-container header {
  opacity: 0;
  -moz-animation-name: contactHeader;
  -webkit-animation-name: contactHeader;
  animation-name: contactHeader;
  animation-iteration-count: 1;
  -moz-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -moz-animation-duration: 0.5s;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.work-clients-item,
.work-page-caption {
  -webkit-animation-timing-function: ease-in;
  animation-fill-mode: forwards;
  -moz-animation-iteration-count: 1;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@-moz-keyframes contactHeader {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes contactHeader {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

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

  100% {
    opacity: 1;
  }
}

.work-hero {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
}

.work-hero video,
.work-overlay,
.work-page-caption {
  position: absolute;
  width: 100%;
}

.work-hero video {
  top: 50%;
  transform: translateY(-50%) !important;
}

.work-overlay {
  z-index: 1;
  top: 0;
  left: 0;
  height: 100%;
  background: #000;
  opacity: 0.8;
}

.client-info,
.work-page-caption {
  opacity: 0;
  right: 0;
  text-align: center;
}

.work-page-caption {
  top: 50%;
  -moz-transform: translateY(-50%) !important;
  -ms-transform: translateY(-50%) !important;
  -webkit-transform: translateY(-50%) !important;
  transform: translateY(-50%) !important;
  margin-top: 3%;
  z-index: 2;
  left: 0;
  -moz-animation-name: showWorkCaption;
  -webkit-animation-name: showWorkCaption;
  animation-name: showWorkCaption;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -moz-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -moz-animation-duration: 0.8s;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -moz-animation-delay: 0.4s;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.header-thin-line,
.work-clients-item {
  -webkit-animation-iteration-count: 1;
  -moz-animation-timing-function: ease-in;
}

.work-page-caption h1 {
  color: #fff;
  font-size: 4em;
  font-weight: 400;
  margin-bottom: 0;
}

.advent-pro-font,
.lookbook-caption h1,
.thumb h3 {
  font-family: "Advent Pro", sans-serif;
}

.grilled-cheese-font {
  font-family: "Grilledcheese-BTN-Toast", sans-serif;
}

.easycore {
  font-family: "Easycore", sans-serif;
}

.raleway {
  font-family: "Raleway", sans-serif;
}

.archer-font {
  font-family: "Archer-Bold", sans-serif;
}

.work-page-caption p {
  color: #fff;
}

.work-list-wrapper {
  background: rgba(27, 24, 25, 0.9);
  border-top: 0.8em solid #231f20;
  z-index: 2;
  position: relative;
}

.clients-wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 85%;
  margin: auto;
}

.client {
  width: 20%;
  margin-bottom: 3rem;
}

.client img {
  width: 80%;
  display: block;
  margin: auto;
}

.work-clients-list {
  margin: 0 10%;
  z-index: 1;
  position: relative;
}

.work-clients-item {
  float: left;
  width: 33.3333%;
  padding: 4em 0 1em;
  height: 17em;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 0 0.7em 0 transparent;
  transform: scale(0, 0);
  -webkit-transform: scale(0, 0);
  -moz-transform: scale(0, 0);
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-animation-name: showWorkList;
  -webkit-animation-name: showWorkList;
  animation-name: showWorkList;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  -moz-animation-duration: 0.95s;
  -webkit-animation-duration: 0.95s;
  animation-duration: 0.95s;
  position: relative;
}

.header-thin-line,
.work-border span {
  -webkit-animation-timing-function: ease-in;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

.client-info,
.client-logo,
.line-header {
  position: absolute;
  left: 0;
}

.work-clients-item .historyAPI {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.client-info {
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  font-size: 0.85em;
  bottom: 0;
}

.work-clients-item:hover .client-info {
  bottom: 2em;
  opacity: 1;
}

.work-clients-item:hover {
  box-shadow: 0 0 0.7em 0 #2d2d2d;
}

.client-info h3 {
  color: #fff;
  font-weight: 100;
  font-size: 1.25em;
  margin-bottom: 0;
  text-transform: uppercase;
  letter-spacing: 0.3em;
}

.work-clients-item:hover .client-logo {
  margin-top: -0.8em;
}

.client-logo {
  display: block;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  top: 50%;
  -moz-transform: translateY(-50%) !important;
  -ms-transform: translateY(-50%) !important;
  -webkit-transform: translateY(-50%) !important;
  transform: translateY(-50%) !important;
  right: 0;
  height: 9em;
  margin: 0 auto 0.8em;
}

.client-info span {
  font-size: 0.85em;
  display: inline-block;
  color: #fff;
  opacity: 0.8;
  padding: 0.2em 1em 0.2em 0;
  margin-right: 0.6em;
  border-right: 0.1em solid #fff;
}

.client-info span:last-child,
.yellow-bg .client-info span:last-child {
  margin: 0;
  padding: 0;
  border: none;
}

.yellow-bg .client-info span {
  color: #000;
  border-right: 0.1em solid #000;
}

.line-header {
  top: 0;
  width: 100%;
}

.header-thin-line {
  position: fixed;
  height: 1px;
  top: 2.4em;
  left: 13em;
  width: 0;
  z-index: 2;
  background: #eee;
  opacity: 0.6;
  -moz-animation-name: animationLine1;
  -webkit-animation-name: animationLine1;
  animation-name: animationLine1;
  -moz-animation-iteration-count: 1;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  -moz-animation-duration: 0.5s;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.waves-caption h1,
.waves-caption hr,
.work-border span {
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

.waves-caption h1,
.waves-caption hr,
.work-border span,
.work-header-title {
  animation-iteration-count: 1;
}

.services-wrapper .services-wrapper-info,
.waves-caption h1,
.waves-caption hr,
.work-header-title,
.work-intro-block {
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-fill-mode: forwards;
}

.work-border {
  z-index: 1;
  position: absolute;
  top: 5em;
  left: 3em;
  bottom: 3em;
  width: calc(100% - 6em);
  height: calc(100% - 7em);
  border-top: none;
  opacity: 0.6;
}

.work-border span {
  background: #eee;
  position: absolute;
  -moz-animation-duration: 0.5s;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
}

.waves-caption h1,
.waves-caption hr {
  -moz-animation-fill-mode: forwards;
}

.work-border span:nth-child(1) {
  -moz-animation-name: animationLine3;
  -webkit-animation-name: animationLine3;
  animation-name: animationLine3;
  top: 0;
  left: 0;
  width: 1px;
  height: 0;
}

.work-border span:nth-child(2) {
  -moz-animation-name: animationLine3;
  -webkit-animation-name: animationLine3;
  animation-name: animationLine3;
  bottom: 0;
  right: 0;
  width: 1px;
  height: 0;
}

.work-border span:nth-child(3) {
  -moz-animation-name: animationLine2;
  -webkit-animation-name: animationLine2;
  animation-name: animationLine2;
  bottom: 0;
  right: 0;
  height: 1px;
  width: 0;
}

@-moz-keyframes animationLine1 {
  0% {
    width: 0;
  }

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

@-webkit-keyframes animationLine1 {
  0% {
    width: 0;
  }

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

@keyframes animationLine1 {
  0% {
    width: 0;
  }

  100% {
    width: calc(100% - 23em);
  }
}

@-moz-keyframes animationLine2 {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

@-webkit-keyframes animationLine2 {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

@keyframes animationLine2 {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

@-moz-keyframes animationLine3 {
  0% {
    height: 0%;
  }

  100% {
    height: 100%;
  }
}

@-webkit-keyframes animationLine3 {
  0% {
    height: 0%;
  }

  100% {
    height: 100%;
  }
}

@keyframes animationLine3 {
  0% {
    height: 0%;
  }

  100% {
    height: 100%;
  }
}

@-moz-keyframes showWorkCaption {
  0% {
    opacity: 0;
    margin-top: 0;
  }

  100% {
    opacity: 1;
    margin-top: -2%;
  }
}

@-webkit-keyframes showWorkCaption {
  0% {
    opacity: 0;
    margin-top: 0;
  }

  100% {
    opacity: 1;
    margin-top: -2%;
  }
}

@keyframes showWorkCaption {
  0% {
    opacity: 0;
    margin-top: 0;
  }

  100% {
    opacity: 1;
    margin-top: -2%;
  }
}

@-moz-keyframes showWorkList {
  0% {
    opacity: 0;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
  }

  100% {
    opacity: 1;
    transform: translateY(-5em);
    -webkit-transform: translateY(-5em);
    -moz-transform: translateY(-5em);
  }
}

@-webkit-keyframes showWorkList {
  0% {
    opacity: 0;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
  }

  100% {
    opacity: 1;
    transform: translateY(-5em);
    -webkit-transform: translateY(-5em);
    -moz-transform: translateY(-5em);
  }
}

@keyframes showWorkList {
  0% {
    opacity: 0;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
  }

  100% {
    opacity: 1;
    transform: translateY(-5em);
    -webkit-transform: translateY(-5em);
    -moz-transform: translateY(-5em);
  }
}

.work-item-slide {
  position: absolute;
  top: 0;
  left: -20%;
  height: 100%;
  width: 20%;
  background: #eee;
  opacity: 0.2;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

.work-clients-item:hover .work-item-slide,
.work-next-project:hover .work-item-slide {
  left: 100%;
  width: 70%;
}

.work-title {
  display: none;
}

.main-work-title {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 10em;
}

.main-work-line {
  transform-origin: bottom left;
  -webkit-transform-origin: bottom left;
  -moz-transform-origin: bottom left;
  transform: rotate(25deg);
  -webkit-transform: rotate(25deg);
  -moz-transform: rotate(25deg);
  width: 0.4em;
  height: 0;
  position: absolute;
  opacity: 0.1;
  background: #4a4a4a;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

.extend .main-work-line {
  height: 10em;
}

.main-work-title .work-title {
  display: block;
  position: absolute;
  left: 0.3em;
  right: 0;
  font-size: 18.5em;
  overflow: hidden;
  width: 0;
  bottom: 0;
  line-height: 0.7em;
  opacity: 0.1;
  color: #4a4a4a;
  white-space: nowrap;
  font-weight: 700;
  transition: all 0.8s;
  -webkit-transition: all 0.8s;
}

.extend.main-work-title .work-title {
  width: 100%;
}

.waves-wrapper {
  min-height: 400px;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  background-color: #e84331;
  position: relative;
}

#canvas-wrapper {
  position: relative;
  z-index: 10;
}

.waves-caption {
  position: absolute;
  top: 50%;
  -moz-transform: translateY(-50%) !important;
  -ms-transform: translateY(-50%) !important;
  -webkit-transform: translateY(-50%) !important;
  transform: translateY(-50%) !important;
  margin-top: 2%;
  left: 5%;
  z-index: 11;
}

.waves-caption h1 {
  color: #fff;
  font-weight: 100;
  font-size: 4.7em;
  line-height: 0.65em;
  opacity: 0;
  transform: translateY(2em);
  -webkit-transform: translateY(2em);
  -moz-transform: translateY(2em);
  -moz-animation-name: serviceUp;
  -webkit-animation-name: serviceUp;
  animation-name: serviceUp;
  -moz-animation-duration: 0.7s;
  -webkit-animation-duration: 0.7s;
  animation-duration: 0.7s;
}

.waves-caption h1 b {
  position: relative;
}

.waves-caption h1 > span {
  font-size: 2.2rem;
}

.waves-caption h1 .words-roll-wrapper {
  position: absolute;
}

.waves-caption h1 .words-roll-wrapper span {
  display: block;
  overflow: hidden;
  height: 0;
  opacity: 0;
  transform: translateY(-0.2em);
  -webkit-transform: translateY(-0.2em);
  -moz-transform: translateY(-0.2em);
  padding-top: 0.1em;
  margin-top: -0.1em;
  transition: all 0.8s;
  -webkit-transition: all 0.8s;
  padding-left: 1rem;
}

.waves-caption h1 .words-roll-wrapper span.selected {
  transform: translateY(0);
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  opacity: 1;
  height: 1.1em;
}

@-moz-keyframes serviceUp {
  0% {
    opacity: 0;
    transform: translateY(1em);
    -webkit-transform: translateY(1em);
    -moz-transform: translateY(1em);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
  }
}

@-webkit-keyframes serviceUp {
  0% {
    opacity: 0;
    transform: translateY(1em);
    -webkit-transform: translateY(1em);
    -moz-transform: translateY(1em);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
  }
}

@keyframes serviceUp {
  0% {
    opacity: 0;
    transform: translateY(1em);
    -webkit-transform: translateY(1em);
    -moz-transform: translateY(1em);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
  }
}

.waves-caption hr {
  width: 0;
  border: 0.1em solid #fff;
  margin: 3em 0 0;
  -moz-animation-name: serviceLine;
  -webkit-animation-name: serviceLine;
  animation-name: serviceLine;
  -moz-animation-duration: 0.6s;
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
  -moz-animation-delay: 0.1s;
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.services-wrapper .services-wrapper-info,
.work-header-title {
  -moz-animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  -moz-animation-timing-function: ease-in;
  -moz-animation-duration: 0.6s;
  -moz-animation-fill-mode: forwards;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

@-moz-keyframes serviceLine {
  0% {
    opacity: 0;
    width: 0;
  }

  100% {
    opacity: 1;
    width: 19em;
  }
}

@-webkit-keyframes serviceLine {
  0% {
    opacity: 0;
    width: 0;
  }

  100% {
    opacity: 1;
    width: 19em;
  }
}

@keyframes serviceLine {
  0% {
    opacity: 0;
    width: 0;
  }

  100% {
    opacity: 1;
    width: 19em;
  }
}

.services-wrapper {
  padding: 7em 10%;
  background: #1d1d1d;
}

.services-wrapper .services-wrapper-info {
  color: #6d6e71;
  font-size: 1.8em;
  width: 75%;
  margin-left: 10%;
  padding: 2em 3em;
  background: #fff;
  margin-top: -6.5em;
  position: relative;
  z-index: 10;
  opacity: 0;
  box-shadow: 0 0 0.7em -0.1em #9c9c9c;
  -moz-animation-name: serviceWrapper;
  -webkit-animation-name: serviceWrapper;
  animation-name: serviceWrapper;
  animation-iteration-count: 1;
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
  -moz-animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

@-moz-keyframes serviceWrapper {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
  }
}

@-webkit-keyframes serviceWrapper {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
  }
}

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

  100% {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
  }
}

.services-wrapper .services-wrapper-info p {
  opacity: 0.85;
}

.services-wrapper .services-wrapper-info em {
  position: relative;
  color: #231f20;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  cursor: pointer;
  padding: 0 0.1rem 0.2rem;
}

.services-wrapper-info a {
  color: #231f20;
}

.services-wrapper .services-wrapper-info em.selected,
.services-wrapper .services-wrapper-info em:hover,
.services-wrapper-info a:hover {
  color: #e84331;
}

.services-wrapper .services-wrapper-info em span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 0;
  margin: auto;
  height: 0.15rem;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  background-color: #6d6e71;
}

.services-wrapper-info h3 {
  color: #231f20;
  font-weight: 400;
  margin-top: 3em;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
}

.services-list ul {
  margin: 0;
}

.services-list li {
  display: inline-block;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  font-size: 1rem;
  font-weight: 400;
}

.services-list li:hover {
  color: #231f20;
  cursor: inherit;
}

.services-list li div {
  display: inline-block;
  position: relative;
  cursor: default;
  padding-bottom: 0.6em;
}

.services-list li div span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 0;
  margin: auto;
  height: 0.1rem;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  background-color: #6d6e71;
}

.services-list li div:hover span {
  width: 100%;
}

.services-list i {
  font-style: normal;
  opacity: 0.5;
  margin: 0 0.7em 0 1em;
}

.work-header-wrapper {
  position: relative;
}

.work-header-title {
  color: #fff;
  font-weight: 900;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  opacity: 0;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin: 0;
  font-size: 7em;
  position: absolute;
  left: 0;
  bottom: -0.3em;
  line-height: 0.75em;
  z-index: 1;
  -moz-animation-name: showWorkTitle;
  -webkit-animation-name: showWorkTitle;
  animation-name: showWorkTitle;
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
}

#landmark-container .work-header-title {
  font-size: 5em;
}

@-moz-keyframes showWorkTitle {
  0% {
    opacity: 0;
    bottom: -0.3em;
  }

  100% {
    opacity: 1;
    bottom: 0;
  }
}

@-webkit-keyframes showWorkTitle {
  0% {
    opacity: 0;
    bottom: -0.3em;
  }

  100% {
    opacity: 1;
    bottom: 0;
  }
}

@keyframes showWorkTitle {
  0% {
    opacity: 0;
    bottom: -0.3em;
  }

  100% {
    opacity: 1;
    bottom: 0;
  }
}

.work-intro-block {
  padding: 4em 8% 8em;
  /* border-bottom: .1em solid #EFEFEF;
  border-top: 0 solid #EEE; */
  opacity: 0;
  transform: translateY(1em);
  -moz-transform: translateY(1em);
  -webkit-transform: translateY(1em);
  -moz-animation-name: showWorkIntro;
  -webkit-animation-name: showWorkIntro;
  animation-name: showWorkIntro;
  -moz-animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -moz-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -moz-animation-duration: 0.6s;
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -moz-animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.work-intro-block .work-intro-para {
  display: inline-block;
}

.work-intro-para a {
  text-decoration: none;
}

.careers-border,
.careers-btn,
.careers-gradient,
.careers-gradient span,
.careers-info,
.careers-page-caption {
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

.careers-info,
.careers-page-caption {
  -moz-animation-name: careersCaption;
  -webkit-animation-name: careersCaption;
}

.work-intro-block.reduced-margin {
  padding-bottom: 4em;
}

.work-fb-actions {
  padding: 0.8em 0 0;
  margin-top: 1em;
  border-top: 0.1em solid #efefef;
}

.work-fb-actions span {
  margin-right: 0.8em;
  color: #7f7f7f;
  cursor: pointer;
  font-size: 0.85em;
}

.work-fb-actions span:first-child {
  color: #5890ff;
}

@-moz-keyframes showWorkIntro {
  0% {
    opacity: 0;
    border-top: 0 solid #eee;
    transform: translateY(1em);
    -moz-transform: translateY(1em);
    -webkit-transform: translateY(1em);
  }

  100% {
    opacity: 1;
    border-top: 1.6em solid #eee;
    transform: translateY(0);
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
  }
}

@-webkit-keyframes showWorkIntro {
  0% {
    opacity: 0;
    border-top: 0 solid #eee;
    transform: translateY(1em);
    -moz-transform: translateY(1em);
    -webkit-transform: translateY(1em);
  }

  100% {
    opacity: 1;
    border-top: 1.6em solid #eee;
    transform: translateY(0);
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
  }
}

@keyframes showWorkIntro {
  0% {
    opacity: 0;
    border-top: 0 solid #eee;
    transform: translateY(1em);
    -moz-transform: translateY(1em);
    -webkit-transform: translateY(1em);
  }

  100% {
    opacity: 1;
    border-top: 1.6em solid #eee;
    transform: translateY(0);
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
  }
}

.thumb h3,
.work-split img {
  -moz-transform: translateY(-50%) !important;
  -ms-transform: translateY(-50%) !important;
  -webkit-transform: translateY(-50%) !important;
  right: 0;
}

.work-intro-para {
  width: 60%;
  display: block;
  vertical-align: middle;
  color: #6d6e71;
  font-size: 1.25em;
}

.work-split .work-intro-para {
  width: 90%;
}

.work-intro-logo {
  display: inline-block;
  vertical-align: middle;
  width: 35%;
  margin-right: 3%;
}

.work-typography {
  text-align: center;
  margin: 6em 0 0;
  width: 100%;
  float: left;
  margin-left: 2rem;
}

.work-typography.single-typography {
  width: 30%;
}

.work-typography.double-typography {
  width: 47%;
  margin-left: 0 !important;
}

.double-typography .work-typography-item {
  padding: 0 2rem;
}

.double-typography .work-color-item {
  margin: 0 1.5%;
}

.work-color-list {
  width: 35%;
  margin: 6em 0 0 5%;
}

.triple-color {
  width: 60%;
}

.quadruple-color {
  width: 100%;
}

.work-typography-title {
  display: block;
  margin: 0 0 2em;
  width: 100%;
}

.work-typography-item {
  float: left;
  width: 30%;
  margin: 1em 1% 0;
}

.single-typography .work-typography-item {
  width: 98%;
}

.work-typography h4 {
  margin-bottom: 0;
  font-size: 2em;
}

.work-typography span {
  font-size: 0.85em;
  color: #6d6e71;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.work-color-item {
  float: left;
  width: 47%;
  margin: 0 2%;
  display: block;
  height: 6em;
}

.triple-color .work-color-item {
  width: 30.3333%;
  margin: 0 1.5%;
}

.quadruple-color .work-color-item {
  width: 20%;
}

.thumbs-block {
  position: relative;
  background-color: #231f20;
  overflow: hidden;
  width: 100%;
  min-height: 29em;
  padding-bottom: 6em;
  padding-top: 3em;
}

.thumbs-block .thumbs {
  white-space: nowrap;
  text-align: center;
}

.thumbs-block .thumb {
  position: relative;
  white-space: normal;
  overflow: hidden;
  min-width: 20em;
  min-height: 25em;
  display: inline-block;
  vertical-align: middle;
  margin: 2em 1em 4em;
  padding: 0;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

.thumb h3,
.thumbs {
  position: absolute;
}

.thumb:hover .lookbook-overview-img {
  width: 100%;
  margin-top: 0;
  cursor: pointer;
}

.thumb:hover {
  padding: 2em 0 4em;
  margin: 0 1em;
  cursor: pointer;
}

.thumbs {
  margin-left: 0;
}

.thumb h3 {
  top: 50%;
  transform: translateY(-50%) !important;
  left: 0;
  margin: auto;
  font-weight: 100;
  color: #fff;
  line-height: 2.1rem;
}

.frame,
.lookbook-overlay {
  top: 0;
  transition: all 0.3s;
  position: absolute;
  left: 0;
  -webkit-transition: all 0.3s;
}

.thumb h3 em {
  font-size: 1rem;
  letter-spacing: 0.5rem;
  font-weight: 300;
  display: block;
}

.lookbook-overlay {
  width: 100%;
  height: 100%;
  opacity: 0;
}

.art-overlay {
  background: rgba(0, 0, 0, 0.85);
}

.id-overlay {
  background: rgba(70, 71, 65, 0.85);
}

.trend-overlay {
  background: rgba(177, 179, 176, 0.85);
}

.indigo-overlay {
  background: rgba(188, 202, 203, 0.85);
}

.lookbook-overlay:hover {
  opacity: 1;
}

.frame {
  margin: 0;
  width: calc(89.4%);
  height: calc(90.4%);
  border: 0.1em solid #fff;
  opacity: 0.4;
  transform: rotate(25deg);
}

.thumb:hover .frame {
  margin: 2%;
}

.lookbook-overview-img {
  display: block;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  width: 95%;
  margin: auto;
  position: absolute;
  top: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 0;
  right: 0;
}

.lookbook-caption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0 3rem;
  text-align: center;
  z-index: 1;
}

.lookbook-caption h1 {
  color: #f2f2f2;
  font-weight: 300;
  font-size: 5em;
  line-height: 0.8em;
}

.lookbook-caption em {
  font-weight: 100;
  display: block;
  font-size: 0.85em;
  margin-left: 15rem;
}

.work-section {
  margin: 4rem 0;
}

.work-split {
  background-color: #fff;
  position: relative;
  padding: 15rem 8%;
}

.work-split-info {
  width: 40%;
  float: left;
  display: inline-block;
  z-index: 1;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 8%;
}

.work-split-info-right {
  width: 40%;
  display: inline-block;
  z-index: 10;
  position: absolute;
  right: 3%;
  top: 50%;
  transform: translateY(-50%);
}

.work-split-info-right h2 {
  font-weight: 400;
  line-height: 1em;
  text-transform: capitalize;
}

.work-split-info-right span {
  font-size: 0.85rem;
  font-style: italic;
}

#soulfull-container .work-split-image-right {
  width: 30%;
  right: 7rem;
  box-shadow: -1rem 1rem 3rem rgba(0, 0, 0, 0.1);
}

.work-split-image-left {
  left: 3rem;
}

.work-split-info h2 {
  font-weight: 400;
  line-height: 1em;
  text-transform: capitalize;
}

.work-split-info p {
  color: #6d6e71;
}

.work-split img {
  top: 50%;
  transform: translateY(-50%) !important;
  position: absolute;
  width: 45%;
  z-index: 10;
}

#toysrus-container .work-split img {
  width: 35%;
  margin-left: 3%;
}

#toysrus-container .toysrus-mockup img {
  width: 45%;
}

.lineup-wrapper {
  display: block;
  clear: both;
}

.video-container {
  margin-left: 0;
}

.bumper-ad-videos {
  width: 100%;
}
.work-border-img {
  display: block;
  margin: 3em 2em;
  clear: both;
  text-align: center;
}

.work-border-img img {
  margin-bottom: 2em;
  width: 100%;
}

.work-split-imgs img:first-child {
  width: calc(50% - 3em);
  margin: 1em 2em 0 1em;
}

.work-split-imgs img:last-child {
  width: calc(50% - 3em);
  margin: 1em 1em 0 2em;
}

.button {
  padding: 1rem;
  text-transform: uppercase;
  text-align: center;
  margin: 2rem 0 1rem;
  background: transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  outline: none;
  display: block;
  text-decoration: none;
  font-weight: 500;
  width: 10em;
}

.button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-100%);
  width: 100%;
  height: 100%;
  z-index: -1;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

.button:hover {
  color: #fff;
}

.button:hover::before {
  transform: translateX(0%);
}

.btn-green {
  border: 0.1rem solid #6ec130;
  color: #6ec130;
}

.btn-wide {
  width: 15em;
}

.btn-green::before {
  background: #6ec130;
}

.btn-red {
  border: 0.1rem solid #ee002f;
  color: #ee002f;
}

.btn-red a {
  color: #ee002f;
  text-decoration: none;
}

.button a:hover {
  color: #fff;
}

.btn-red::before {
  background: #ee002f;
}

.btn-blue {
  border: 0.1rem solid #3e7efb;
  color: #3e7efb;
}

.btn-blue::before {
  background: #3e7efb;
}

.btn-white {
  border: 0.1rem solid #fff;
  color: #fff;
}

.curr-element .button-wrapper {
  opacity: 0;
  transform: translateX(-1rem);
  animation: text-anim 0.5s 1.2s forwards;
}

.btn-white::before {
  background: #231f20;
}

.btn-white a {
  text-decoration: none;
  color: #fff;
}

/* .index-container .button {

} */
.work-img-carousel-wrapper {
  background: #f88100;
  height: 17rem;
  padding-top: 4rem;
  margin-bottom: 10rem;
}

#soulfull-container .work-img-carousel-wrapper {
  margin-bottom: 0;
  display: block;
  clear: both;
}

.soulfull-wrapper {
  background: #f8f6e4;
  height: 17rem;
  margin-top: 10rem;
}

.soulfull-wrapper .image-carousel {
  margin-top: -10rem;
}

.soulfull-video-wrapper {
  background: #cfcbfe;
  padding: 4rem 0;
  margin-bottom: 5rem;
  height: auto;
}

.intuit-video-wrapper {
  padding: 4rem 0;
  margin-bottom: 5rem;
  height: auto;
}

.video-container li {
  display: inline-block;
  text-align: center;
  margin: 2rem;
}

.video-container li img {
  width: 100%;
}

.image-container {
  text-align: center;
}

.image-carousel {
  margin-top: 5rem;
  margin-left: 0em;
  /* transform: translateX(30%); */
}

/* .image-carousel:hover {
  transform: translateX(7%);
  transition: 2s ease;
} */
.image-carousel li {
  display: inline-block;
  width: 25%;
  margin: 0 1rem;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
  line-height: 0;
}

.image-carousel li img {
  width: 100%;
}

.work-final {
  text-align: center;
  position: relative;
  padding: 2em 15%;
  clear: both;
  display: block;
}

.work-highlight {
  display: block;
  text-align: center;
  margin: 7em auto 0;
  width: 80%;
}

.work-highlight p {
  display: block;
  color: #6d6e71;
  opacity: 0.8;
  font-size: 1.35em;
  text-align: center;
  font-weight: 100;
}

.work-ethos {
  font-size: 0.85em;
  padding: 3em 5% 0;
}

.work-final h3 {
  font-family: "Libre Baskerville", serif;
  font-size: 2.7em;
}

.work-final span {
  font-size: 1.25em;
  font-weight: 400;
}

.work-final span em {
  font-size: 0.6em;
  color: #6d6e71;
}

.work-final hr {
  border: none;
  border: 0.1em solid #6d6e71;
  width: 1.5em;
  margin: 1em auto;
  opacity: 0.3;
}

.work-next-project {
  padding: 0 10%;
  max-height: 0;
  cursor: pointer;
  overflow: hidden;
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  transition: all 0.8s;
  -webkit-transition: all 0.8s;
  -moz-transition: all 0.8s;
  text-align: center;
}

.work-next-project.show {
  max-height: 10em;
  padding: 3.5em 10% 4em;
}

.work-next-project-info h3 {
  color: #fff;
  font-weight: 700;
  font-family: "Open Sans", sans-serif;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.25em;
}

.toysrus-work * {
  font-family: "Open-sans", sans-serif;
}

.work-next-project-arrow .fa {
  margin-left: 0.4em;
}

span.work-next-project-arrow {
  position: absolute;
  top: 50%;
  -moz-transform: translateY(-50%) !important;
  -ms-transform: translateY(-50%) !important;
  -webkit-transform: translateY(-50%) !important;
  transform: translateY(-50%) !important;
  color: #fff;
  font-weight: 100;
  font-size: 1em;
  text-transform: uppercase;
  right: 0;
  letter-spacing: 0.1em;
  margin-top: 1.6em;
}

.work-next-project-info span {
  color: #fff;
  font-size: 0.85em;
}

.work-next-project-info span em {
  color: #fff;
  opacity: 0.5;
  margin: 0 0.5em;
}

.work-next-project-info {
  text-align: left;
  opacity: 0;
  transform: translateY(0.8em);
  -webkit-transform: translateY(0.8em);
  -moz-transform: translateY(0.8em);
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

.work-next-project.show .work-next-project-info {
  opacity: 1;
  transform: translateY(0);
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
}

.toysrus-work .block-title-wrapper {
  padding: 5.5em 5%;
  position: relative;
  z-index: 10;
}

.toysrus-work .block-title-wrapper h3 {
  font-size: 2.5em;
}

.toysrus-work .arrow-top {
  position: absolute;
  left: 0;
  top: -2em;
  width: 0;
  height: 0;
  border-right: 0 solid transparent;
  border-left: calc(1439px) solid transparent;
  border-bottom: 2em solid #00b3bd;
}

.toysrus-work .arrow-down {
  position: absolute;
  left: 0;
  bottom: -2em;
  width: 0;
  height: 0;
  border-left: 0 solid transparent;
  border-right: calc(1439px) solid transparent;
  border-top: 2em solid #005eb3;
}

.toysrus-work h3 span {
  color: #f88100;
}

.stars,
.geoffrey {
  position: absolute;
  z-index: 1;
}

.geoffrey {
  bottom: 0rem;
  left: 0;
  height: 10rem;
}

.stars {
  bottom: 0rem;
  right: 0;
  height: 10rem;
}

.toysrus-work .collage-list {
  margin: 0;
}

.toysrus-work .collage-list-item {
  float: left;
  width: 25%;
  cursor: pointer;
  position: relative;
}

.toysrus-work .collage-list-item img {
  display: block;
}

.toysrus-work .bg-overlay {
  display: none;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
}

.toysrus-work .horizontal-center-align {
  left: 0;
  right: 0;
}

.toysrus-work .collage-list-item h3 {
  font-size: 1.3em;
  letter-spacing: 0.3rem;
  margin: 0 1rem;
}

.toysrus-work .collage-list-item span {
  letter-spacing: 0.3rem;
  font-size: 0.9em;
  opacity: 0;
  display: block;
  margin-bottom: -0.7em;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

.toysrus-work .collage-list-item:hover span {
  opacity: 1;
  margin-bottom: 0;
}

.toysrus-work .collage-list-item .bg-overlay:hover {
  background: rgba(251, 168, 26, 0.7);
  opacity: 1;
}

.toysrus-work .collage-list-item .bg-overlay {
  position: absolute;
  background: rgba(71, 71, 71, 0.5);
  z-index: 0;
  display: block;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  text-align: center;
}

.turqouise-color-background {
  background-color: #00b3bd;
}

.toysrus-work .blue-color-background {
  background-color: #005eb3;
}

.soulfull-work .soulfull-background {
  background: url("../images/soulfull-middle-banner.jpg");
  height: calc(10rem - 5rem);
  padding: 4rem 0;
  background-repeat: no-repeat;
  background-size: cover;
}

.soulfull-banners {
  text-align: center;
}

.soulfull-banners .work-intro-para {
  margin: auto;
}

.banner-wrapper {
  display: block;
  margin: 5rem auto;
}

.banner-wrapper li {
  display: inline-block;
  width: 20%;
  margin: 0 2em;
  vertical-align: middle;
}

.banner-wrapper li img {
  width: 100%;
}

.middle-banner-heading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  text-align: center;
}

.landmark-background {
  background: url("../images/landmark-middle-banner.jpg");
  height: calc(10rem - 5rem);
  padding: 4rem 0;
  background-repeat: no-repeat;
  background-size: cover;
}

.intuit-background {
  background: url("../images/intuit-middle-banner.jpg");
  height: calc(10rem - 5rem);
  padding: 4rem 0;
  background-repeat: no-repeat;
  background-size: cover;
}

.landmark-mockups .work-intro-para {
  width: auto;
}

.max-appraisal-wrapper {
  padding: 0;
  background: white;
  margin-top: -2rem;
}

.max-appraisal-wrapper .work-intro-para,
.soulfull-video-wrapper .work-intro-para,
.work-fb-campaign .work-intro-para {
  width: auto;
  padding: 0 15%;
}

.appraisal-post-container {
  margin: 5rem auto;
  text-align: center;
}

.appraisal-post-container li {
  display: inline-block;
  width: 75%;
  transition: all 0.5s;
}

.appraisal-post-container li:hover {
  width: 100%;
}

.appraisal-post-container li img {
  width: 100%;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
  vertical-align: top;
  transition: all 0.5s ease;
}

.owl-carousel .owl-stage {
  padding-bottom: 5rem;
}

.owl-controls {
  margin-top: -1rem;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 10;
}

.owl-dots {
  height: 2rem;
  margin: auto;
  text-align: center;
}

.owl-dots .owl-dot {
  height: 10px;
  width: 10px;
  border-radius: 10px;
  border: 1px solid #fdd700;
  display: inline-block;
  margin-right: 1rem;
}

.owl-dots .owl-dot.active {
  background: #fdd700;
}

.video-container .owl-dots .owl-dot {
  border: 1px solid #fc0001;
}
.video-container .owl-dots .owl-dot.active {
  background: #fc0001;
}

/* .appraisal-post-container li img:hover {
  transform: translateY(-1rem);
} */
.central-background {
  background: url("../images/central-middle-banner.jpg");
  height: calc(10rem - 5rem);
  padding: 4rem 0;
  background-repeat: no-repeat;
  background-size: cover;
}

.central-mockups .work-split-info-right {
  width: 45%;
  right: 0rem;
}

.central-mockups .work-split-image-left {
  left: 0 !important;
}

.central-mockups .work-split-info {
  width: 45%;
}

.intuit-mockups .work-split-info {
  width: 50%;
}

.intuit-mockups h2 {
  padding-right: 3em;
}

/* .central-mockups .work-intro-para {
  width: 80%;
} */
/* .work-split-image {
  width: 55%;
  float: left;
  display: inline-block;
} */
.work-social-list {
  margin: auto;
  text-align: center;
  margin-bottom: 5rem;
}

.work-social-img {
  display: inline-block;
  margin: 0 1rem;
  box-shadow: 0 10px 10px #ccc;
  border-radius: 1.3rem;
  transition: all 0.5s ease;
  width: 25%;
}

.work-social-img img {
  width: 100%;
}

.work-social-img:hover {
  transform: translateY(-1rem);
}

.performer-modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.93);
  z-index: 100;
  display: none;
}

.performer-modal {
  position: absolute;
  top: 3em;
  left: 3em;
  width: calc(100% - 6em);
  height: calc(100% - 6em);
}

.performer-modal-wrapper .close-modal {
  width: 3em;
  position: absolute;
  top: 0;
  right: 0;
}

.performer-modal-wrapper .performer-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 55%;
}

.performer-modal-wrapper .performer-modal-info {
  position: absolute;
  left: 50%;
  bottom: 2em;
}

.performer-modal-wrapper .performer-title-block {
  padding: 2em;
  margin-left: -10%;
  border-bottom: 0.5em solid #fba81a;
}

.performer-modal-wrapper .performer-para {
  color: #b7b7b7;
  margin: 3em 15% 0;
}

.performer-modal-wrapper .performer-title-block h3 {
  font-size: 3.4em;
  letter-spacing: 0.3rem;
  font-weight: 400;
  line-height: 0.9em;
}

.performer-modal-wrapper .performer-title-block h3 span {
  font-weight: 300;
  text-transform: uppercase;
  margin-top: -0.3em;
  display: block;
}

.performer-modal-wrapper .performer-date {
  font-size: 1.4rem !important;
}

.performer-modal-wrapper .performer-title-block span {
  opacity: 1 !important;
  font-size: 2rem;
  margin-bottom: 0;
  color: #fff;
}

.work-fb-list {
  margin: 0;
  overflow: hidden;
  overflow-x: scroll;
  white-space: nowrap;
  padding: 3em 3%;
}

.work-fb-list .fa {
  font: normal normal normal 14px/1 FontAwesome !important;
}

.careers-info em,
.careers-page-caption h1 b {
  font-family: "Libre Baskerville", serif;
}

.work-fb-post {
  display: inline-block;
  background-color: #fff;
  vertical-align: top;
  white-space: normal;
  width: 33%;
  margin-right: 2%;
  padding: 1em;
  border-radius: 0.4em;
  box-shadow: 0 0 0.7em -0.3em #dcdcdc;
  border: 0.1em solid #efefef;
}

.fb-logo,
.work-fb-header-info {
  vertical-align: middle;
  display: inline-block;
}

.fb-logo,
.work-fb-img {
  border: 0.1em solid #efefef;
}

.work-fb-img {
  display: block;
  width: 100%;
}

.fb-logo {
  width: 3.5em;
}

.work-fb-header-info {
  margin-left: 0.6em;
}

.work-fb-header-info h3 {
  color: #365899;
  margin: 0;
  font-size: 1em;
  font-weight: 500;
}

.work-fb-header-info span {
  font-size: 0.8em;
  color: #90949c;
}

.work-fb-para {
  font-weight: 300;
  margin: 1em 0;
  font-size: 0.9em;
}

.work-facebook-posts {
  border-bottom: 0.1em solid #efefef;
}

.work-fb-stat {
  margin: 0;
  text-align: center;
  text-transform: uppercase;
}

.work-fb-stat li {
  display: inline-block;
  font-size: 0.85em;
  vertical-align: top;
  margin: 0 3rem;
}

.work-fb-stat em {
  font-size: 5em;
  margin-bottom: 0.2rem;
  display: block;
  font-weight: 700;
}

.work-fb-campaign {
  text-align: center;
  padding: 4em 10% 3em;
}

.work-fb-campaign h3,
.work-highlight h3 {
  font-weight: 400;
  line-height: 1em;
  margin-bottom: 1em;
  font-size: 2em;
}

.work-highlight h3 {
  font-size: 1.9em;
  margin-bottom: 0.6em;
}

.work-highlight span {
  display: block;
  font-style: italic;
  font-size: 0.85rem;
  margin: 1.3em 0 0;
  opacity: 0.75;
}

.work-highlight span b {
  font-weight: 400;
}

.work-intro-block p i {
  font-weight: 400;
  font-style: normal;
}

.work-highlight .scratch {
  text-decoration: line-through;
  opacity: 0.6;
}

.work-fb-campaign p,
.work-final p {
  color: #6d6e71;
  font-size: 1.25em;
  margin-bottom: 2em;
}

.work-final p {
  margin-bottom: -2em;
}

.work-fb-stat span {
  font-weight: 100;
  font-size: 0.85em;
  color: #6d6e71;
  letter-spacing: 0.2em;
}

.corner-house-video {
  background-color: #231f20;
}

.corner-house-video .work-fb-campaign {
  padding-bottom: 0;
}

.corner-house-video .work-fb-stat {
  margin-bottom: 5em;
}

.corner-house-video .work-fb-stat li {
  margin: 0 3em;
  color: #eee;
}

.corner-house-video .work-fb-campaign h3,
.tf-posts .work-fb-campaign p,
.tf-posts .work-fb-stat em {
  color: #fff;
}

.corner-house-video .work-fb-stat em {
  font-size: 4.3em;
}

.corner-house-video .work-fb-campaign p {
  color: #f9f9f9;
  opacity: 0.7;
}

.ch-video video {
  width: 60%;
  margin: auto;
  display: block;
}

.ch-video {
  padding-bottom: 5em;
}

.ch-video span {
  display: block;
  color: #6d6e71;
  font-size: 0.85em;
  text-align: center;
  margin: 1em auto 0;
}

.ch-video .fa-play {
  position: absolute;
  top: 50%;
  -moz-transform: translateY(-50%) !important;
  -ms-transform: translateY(-50%) !important;
  -webkit-transform: translateY(-50%) !important;
  transform: translateY(-50%) !important;
  color: #fff;
  display: block;
  text-align: center;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  cursor: pointer;
  margin: auto;
  left: 0;
  right: 0;
  font-size: 4em;
  border: 1px solid rgba(131, 63, 166, 0.8);
  background: rgba(131, 63, 166, 0.8);
  padding-top: 0.5em;
  height: 1.5em;
  width: 2em;
  border-radius: 50%;
}

.ch-video .fa-play:hover {
  font-size: 4.3em;
  border: 0.1em solid rgba(146, 79, 181, 0.8);
}

.tf-highlight {
  margin: 4em auto;
}

.tf-posts {
  background: #f9c31a;
}

.tf-posts .work-fb-stat span {
  color: #fff0c2;
}

.play-video .fa-play {
  background: #01aef0;
  border-color: rgba(1, 174, 240, 0.08) !important;
}

.careers-hero-wrapper {
  position: relative;
  overflow: hidden;
  background-color: rgba(232, 67, 49, 1);
}

.careers-video {
  position: fixed;
  width: 100%;
  margin-top: -11%;
  top: 0;
  left: 1em;
}

.careers-req-wrapper {
  margin: 0;
  overflow: hidden;
  max-height: 0;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}

.careers-item.show .careers-req-wrapper {
  margin: -1em 0 1em;
  max-height: 80em;
}

.careers-item.show h4 {
  color: #231f20;
}

.careers-req-wrapper b {
  display: block;
  margin: 3em 0 1em;
  font-weight: 400;
  color: #e84331;
}

.careers-req-wrapper li {
  margin: 0.5em 0;
  line-height: 1.3em;
  color: #444;
}

.careers-body + footer {
  position: relative;
}

.careers-page-caption {
  position: absolute;
  left: 1em;
  bottom: 11em;
  padding: 4em 4% 2.3em;
  width: calc(92% - 1em);
  z-index: 7;
  opacity: 0;
  transform: translateY(3em);
  -webkit-transform: translateY(3em);
  -moz-transform: translateY(3em);
  animation-name: careersCaption;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -moz-animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.careers-page-caption h1 {
  font-weight: 100;
  font-size: 2em;
  letter-spacing: 0.2em;
  color: #fff;
  text-transform: uppercase;
}

.careers-page-caption h1 b {
  letter-spacing: normal;
  font-size: 1.4em;
  font-weight: 400;
  text-transform: none;
}

.careers-info h3,
.careers-project b {
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.careers-page-caption span {
  color: #fff;
  font-size: 1.3em;
  display: block;
  font-weight: 400;
}

.careers-page-caption hr {
  width: 3em;
  margin: 1.4em 0;
  border: none;
  border-top: 1px solid #fff;
  opacity: 0.7;
}

.careers-page-caption em {
  font-weight: 100;
  font-size: 0.85em;
}

.careers-info-wrapper {
  position: relative;
  background: #fff;
  padding: 6em 8%;
}

.careers-line,
.careers-particles {
  position: absolute;
  top: 0;
  height: 100%;
}

.careers-info {
  margin-left: 20%;
  opacity: 0;
  animation-name: careersCaption;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -moz-animation-delay: 0.9s;
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}

.careers-line {
  left: 13%;
  width: 1px;
  background: #d8d8d8;
}

.careers-info h3 {
  font-size: 0.85em;
  font-weight: 400;
  margin-bottom: 1em;
  color: #888;
}

.careers-info p {
  width: 70%;
  font-size: 1.25em;
  color: #484848;
}

.careers-particles {
  left: 0;
  width: 100%;
}

.careers-opening-wrapper {
  position: relative;
  background: #fff;
  padding: 1em 10%;
}

.careers-opening-wrapper h3 {
  position: relative;
  font-size: 2em;
  font-weight: 600;
  margin: 0 0 1em;
}

.careers-opening-wrapper h3 span {
  display: inline-block;
  vertical-align: middle;
  width: 2em;
  margin-left: 1em;
  height: 1px;
  background: #444;
  opacity: 0.5;
}

.careers-title {
  position: relative;
  cursor: pointer;
}

.careers-list {
  margin: 0 10% 7em;
}

.careers-item {
  padding: 1.8em 1em 1em;
  border-bottom: 1px solid #d8d8d8;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}

.careers-title h4 {
  font-size: 1.4em;
  font-weight: 400;
  color: #6f6f6f;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}

.careers-item:hover {
  border-bottom-color: #e84331;
}

.careers-item.show {
  border-bottom-color: #8a8a8a;
  color: #231f20;
}

.careers-border-img {
  display: block;
  position: absolute;
  width: 100%;
  z-index: 9;
  bottom: 0;
  left: 0;
}

.careers-item .contact-item {
  margin-top: 1.5em;
  margin-bottom: 1em;
  display: inline-block;
  vertical-align: middle;
  padding: 0.8em 0;
}

.careers-item .contact-item img {
  width: 1.3em;
}

.careers-item .contact-item a {
  color: #353535;
  font-size: 1.3em;
}

.careers-item .contact-item:last-child {
  margin-left: 1em;
  padding-left: 1.5em;
  border-left: 1px solid #d8d8d8;
}

.careers-project {
  margin-top: 4em;
  border-left: 0.3em solid #e84433;
  padding-left: 2.2em;
}

.careers-project b {
  font-weight: 400;
  font-size: 1em;
  color: #1e1e1e;
}

.careers-project p {
  line-height: 1.3em;
  color: #444;
  margin-top: 0.8em;
}

.careers-item .contact-item:last-child .contact-line {
  left: 1.5em;
}

.careers-item .contact-line {
  background: #444;
}

.careers-border {
  height: 0;
  background: #1e1e1e;
  border-top: 0.4em solid #252525;
  position: absolute;
  bottom: 0;
  left: 1em;
  width: 100%;
  z-index: 5;
  opacity: 0.95;
  -moz-animation-name: careersBorder;
  -webkit-animation-name: careersBorder;
  animation-name: careersBorder;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -moz-animation-delay: 0.8s;
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

.careers-item:hover .careers-title h4 {
  color: #231f20;
}

.careers-item:hover .careers-expand-btn em:first-child {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
}

.careers-btn {
  position: absolute;
  right: 5%;
  opacity: 0;
  bottom: 8.5rem;
  font-size: 1.6em;
  color: #757575;
  padding: 0.5em 0.7em;
  border-radius: 50%;
  background: #fff;
  border: 0.2em solid #efefef;
  z-index: 11;
  box-shadow: 0 0 0.3em -0.3em #444;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -moz-animation-name: careersCaption;
  -webkit-animation-name: careersCaption;
  animation-name: careersCaption;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -moz-animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.careers-btn:hover {
  border: 0.2em solid #d8d8d8;
  box-shadow: 0 0 1em -0.1em #444;
}

.careers-scrim {
  position: absolute;
  bottom: 5em;
  left: 1em;
  width: calc(100% - 1em);
  height: 60%;
  z-index: 3;
  background: -moz-linear-gradient(
    top,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0.65) 100%
  );
  background: -webkit-linear-gradient(
    top,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0.65) 100%
  );
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0.65) 100%
  );
}

.careers-gradient,
.careers-gradient span {
  top: 0;
  height: 100%;
  position: absolute;
}

.careers-gradient {
  left: 0;
  width: 100%;
  background: #e84331;
  z-index: 7;
  -moz-animation-name: careersGradient;
  -webkit-animation-name: careersGradient;
  animation-name: careersGradient;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -moz-animation-delay: 0s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.careers-gradient span {
  right: 0;
  width: 15%;
  background: #b93022;
  border-right: 5em solid #a23126;
  -moz-animation-name: careersGradientSpan;
  -webkit-animation-name: careersGradientSpan;
  animation-name: careersGradientSpan;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -moz-animation-delay: 0;
  -webkit-animation-delay: 0;
  animation-delay: 0;
}

.careers-expand-btn {
  display: block;
  position: absolute;
  right: 0.5em;
  bottom: 1.4em;
}

.careers-expand-btn em {
  position: absolute;
  display: block;
  width: 1px;
  height: 1.4em;
  background: #6f6f6f;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}

.careers-expand-btn em:last-child {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.xxl-font-size {
  font-size: 6rem !important;
  line-height: 4rem;
  margin-top: -0.7rem;
}

@-moz-keyframes careersGradient {
  0% {
    width: 100%;
  }

  100% {
    width: 0;
  }
}

@-webkit-keyframes careersGradient {
  0% {
    width: 100%;
  }

  100% {
    width: 0;
  }
}

@keyframes careersGradient {
  0% {
    width: 100%;
  }

  100% {
    width: 0;
  }
}

@-moz-keyframes careersGradientSpan {
  0% {
    width: 15%;
  }

  100% {
    width: 60%;
  }
}

@-webkit-keyframes careersGradientSpan {
  0% {
    width: 15%;
  }

  100% {
    width: 60%;
  }
}

@keyframes careersGradientSpan {
  0% {
    width: 15%;
  }

  100% {
    width: 60%;
  }
}

@-moz-keyframes careersCaption {
  0% {
    opacity: 0;
    transform: translateY(1em);
    -webkit-transform: translateY(1em);
    -moz-transform: translateY(1em);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
  }
}

@-webkit-keyframes careersCaption {
  0% {
    opacity: 0;
    transform: translateY(1em);
    -webkit-transform: translateY(1em);
    -moz-transform: translateY(1em);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
  }
}

@keyframes careersCaption {
  0% {
    opacity: 0;
    transform: translateY(1em);
    -webkit-transform: translateY(1em);
    -moz-transform: translateY(1em);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
  }
}

@-moz-keyframes careersBorder {
  0% {
    height: 0;
  }

  100% {
    height: 4em;
  }
}

@-webkit-keyframes careersBorder {
  0% {
    height: 0;
  }

  100% {
    height: 4em;
  }
}

@keyframes careersBorder {
  0% {
    height: 0;
  }

  100% {
    height: 4em;
  }
}

@keyframes slideBtn {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0%);
  }
}

/* Interactive Banner rules */
@keyframes bubble {
  0% {
    transform: scale(0);
  }

  40% {
    transform: scale(1.1);
  }

  80% {
    transform: scale(0.8);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

@keyframes bottle2Anim {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

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

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes dropLetter {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }

  100% {
    opacity: 0;
    transform: translateY(200px) rotate(25deg);
  }
}

@keyframes scaleLetter {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.6);
  }
}

@keyframes shake {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(10deg);
  }

  50% {
    transform: rotate(-10deg);
  }

  75% {
    transform: rotate(10deg);
  }

  100% {
    transform: rotate(-10deg);
  }
}

.main {
  position: relative;
  border: 1px solid #f1f1f1;
  width: 300px;
  height: 250px;
  margin: 5em 2em;
  text-align: center;
  background: #76fdbf;
  overflow: hidden;
  display: inline-block;
}

.yellow-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ebf354;
  height: 200px;
  width: 200px;
  display: block;
  border-radius: 50%;
}

.letters-wrapper {
  /* text-transform: uppercase;
      color: red;
      font-family: "Arial";
      font-weight: 900;
      font-size: 60px;
      overflow: auto;
      display: inline-block;
      position: inherit;
      top: -20px;
      z-index: 1; */
}

.char {
  width: 30px;
  height: 85px;
  text-transform: uppercase;
  color: red;
  font-family: "Impact";
  font-weight: 900;
  font-size: 60px;
  display: inline-block;
  position: inherit;
  top: 5px;
  height: 49px;
  z-index: 1;
  line-height: 45px;
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}

.char-e {
  width: 22px;
}

.char span {
  position: absolute;
  left: 0;
  top: 0;
}

.cta-btn {
  display: inline-block;
  text-transform: uppercase;
  color: white;
  font-family: "Arial", "Helvetica";
  text-decoration: none;
  font-size: 8px;
  background: red;
  padding: 3px 8px;
  padding-top: 4px;
  border-radius: 30px;
  position: relative;
  top: 25px;
  opacity: 1;
  /* animation: blink 1s step-end infinite; */
  animation: blink 1s infinite;
}

.cta-btn-2 {
  top: auto;
  bottom: 10px;
  position: absolute;
  right: 10px;
  width: 70px;
}

.bottle-1 {
  width: 70px;
  position: relative;
  bottom: -4px;
  opacity: 1;
  transition: 0.4s ease;
}

.bottle-2,
.bottle-3 {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.bottle-wrapper {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.last-frame {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: 0.4s ease;
}

.last-frame.is-visible {
  opacity: 1;
  z-index: 100;
}

.intro-logo {
  height: 120px;
  position: absolute;
  left: 46%;
  transform: translateX(-50%);
  top: 42px;
}

.bottle-1.shake {
  /* animation: shake 1s infinite step-end; */
  /* animation: shake 1s infinite; */
  animation: shake 0.4s infinite;
}

.bottle-4 {
  height: 160px;
  position: absolute;
  bottom: -10px;
  left: 45%;
  transform: translateX(-40%) translateY(20px) rotate(-20deg);
}

/* .bottle-2.is-animate {
    animation: bottle2Anim 1s step-end 3;
  }

  .bottle-3.is-animate {
    animation: bottle3Anim 1s step-end 3;
  } */
.bottle-1.is-hidden {
  opacity: 0;
}

.cta-btn.is-hidden {
  display: none;
}

.char.is-hidden {
  opacity: 0;
}

.char.is-drop {
  /* animation: dropLetter 1s step-end forwards; */
  animation: dropLetter 1s forwards;
}

.char.is-drop span {
  /* animation: scaleLetter 1s step-end forwards; */
  animation: scaleLetter 1s forwards;
}

.bottle-wrapper.is-hidden,
.char.is-hidden {
  display: none;
}

#replay-btn {
  position: absolute;
  left: 0;
  z-index: 100;
  bottom: 0;
  display: none;
  width: 20px;
  height: 20px;
  z-index: 1001;
}

.btn-img {
  position: relative;
  width: 100%;
  display: block;
}

.success-msg {
  /* color: red; */
  /* font-family: "Impact"; */
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 100;
  opacity: 0;
  transition: 0.4s ease;
}

.success-msg.is-show .text-img {
  animation: bubble 1s ease forwards;
}

/* .big-text{
    font-size: 3rem;
    font-weight: 900;
    margin-top: 3rem;
    display: block;
  } */
/* .success-msg p{
    width: 60%;
    margin: 0 auto;
    font-size: 1.2rem;
  } */
.alert-msg {
  position: absolute;
  z-index: 100;
  top: 5rem;
  left: 50%;
  transform: translateX(-50%);
  background: orange;
  color: white;
  font-family: "Arial";
  font-size: 8px;
  padding: 4px;
  width: 100px;
  border-radius: 10px;
  opacity: 0;
}

.text-msg {
  transform: scale(0);
}

.alert-msg.is-show {
  animation: blink 0.6s infinite;
}

.bottle-5 {
  height: 180px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-20%) translateY(20px) rotate(20deg);
}

.logo-img {
  position: absolute;
  left: 18px;
  top: 20px;
}

/* Interactive banner rules end */
@media screen and (max-width: 600px) {
  .banner-wrapper li {
    display: block;
    width: 70%;
    margin: 2em auto;
  }
  .clients-wrapper {
    flex-direction: column;
  }

  .client {
    width: 80%;
    margin: auto;
  }

  .error-intro,
  .work-split img {
    -moz-transform: translateY(0) !important;
    -ms-transform: translateY(0) !important;
    -webkit-transform: translateY(0) !important;
  }

  .work-247,
  .work-cornerhouse,
  .work-slk {
    background-position-x: right;
  }

  .swipe-element,
  .work-header-wrapper {
    overflow: hidden;
  }

  #history-container {
    overflow-x: hidden;
  }

  .resp-show {
    display: block !important;
  }

  .resp-hide {
    display: none !important;
  }

  .error-body {
    height: auto !important;
  }

  .error-intro {
    font-size: 0.7em;
    position: relative;
    top: 0;
    padding: 12em 0;
    transform: translateY(0) !important;
  }

  .main-body.show .video-caption {
    margin: 0 2%;
    -moz-animation-delay: 0.3s;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
  }

  .manaba-quote-block {
    padding-top: 2em;
  }

  .new-manaba-wrapper .manaba-block {
    width: 100%;
  }

  .manaba-quote-block h3 {
    width: 100%;
    font-size: 2em;
    margin-top: 1em;
    text-align: center;
  }

  .manaba-btns .btn {
    font-size: 0.8em;
    margin: 0 auto 0.3em;
    text-align: center;
    display: block;
  }

  .footer-bottom .fa,
  .work-nav {
    display: none;
  }

  .video-caption .btn {
    margin-top: 1.5em;
  }

  .video-caption .btn .fa {
    font-size: 1em;
  }

  .video-caption h1 {
    font-size: 1.6em;
  }

  .bg-text {
    font-size: 7em;
  }

  .main-body.show .bg-text-wrapper {
    top: 33%;
  }

  .swipe-element {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: 100%;
    transition: all 0.8s;
    -webkit-transition: all 0.8s;
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }

  .work-item,
  .work-item-translate {
    height: auto !important;
  }

  .transparent-title-wrapper h3 {
    font-size: 5em;
  }

  .transparent-title-wrapper {
    bottom: 0;
    opacity: 0.2;
    display: none;
  }

  /* .work-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 90%;
    padding: 5% 5% 3em;
    z-index: 10
  } */
  .work-caption-block {
    padding: 5%;
    opacity: 1;
    margin-top: -1rem;
  }

  .work-caption h2 {
    font-size: 2em;
    opacity: 1;
  }

  .work-caption p,
  .work-caption .line {
    opacity: 1;
  }

  .work-caption p {
    font-size: 0.85rem;
  }

  .work-caption .line {
    width: 50%;
    margin-left: -1rem;
    display: none;
  }

  .curr-element .btn-flash {
    animation-delay: 2.4s;
  }

  .curr-element .btn-flash,
  .curr-element .work-caption h2,
  .curr-element .work-caption p,
  .curr-element,
  .curr-element .button-wrapper {
    /* animation-name: text-anim; */
    animation-name: none;
  }

  .button-wrapper {
    opacity: 1;
    transform: translateX(-1.2rem);
  }

  .work-lines span:nth-child(1),
  .work-lines span:nth-child(3) {
    width: 100%;
  }

  .work-lines span:nth-child(2),
  .work-lines span:nth-child(4) {
    height: 100%;
  }

  .work-item-translate {
    top: 4rem;
    transform: none;
  }

  .work-item {
    height: 100vh !important;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .work-image {
    width: 80%;
    display: block;
  }

  header {
    background: rgba(255, 255, 255, 0.5);
  }

  .header-social-list {
    margin-top: 1rem;
  }

  .work-caption {
    top: 100%;
    transform: none;
    width: 100%;
    text-align: center;
  }

  .button {
    margin: auto;
  }

  /* .work-festa {
    background-image: url(../images/work-festa-small.jpg)
  }

  .work-voi {
    background-image: url(../images/work-voi-small.jpg)
  }

  .work-247 {
    background-image: url(../images/work-247-small.jpg)
  }

  .work-cornerhouse {
    background-image: url(../images/work-cornerhouse-small.jpg)
  }

  .work-slk {
    background-image: url(../images/work-slk-small.jpg)
  } */
  /* Inner pages */
   {
  }

  .max-appraisal-wrapper {
    background: white;
    display: block;
    clear: both;
    margin-top: 0rem;
    padding: 3rem 0;
  }

  .home-footer-wrapper {
    padding-top: 0;
  }

  .footer-intro,
  .footer-item a {
    font-size: 1em;
  }

  .footer-list {
    margin: 1em 0 3em;
  }

  footer {
    padding: 3em 3% 2em;
    border-top-width: 3em !important;
  }

  .footer-intro b {
    font-size: 1.1em;
  }

  .manaba-block {
    right: 0;
  }

  .alt-header,
  .solid-header header,
  header {
    padding: 0 3%;
    position: absolute;
  }

  .solid-header header {
    background: transparent;
  }

  .line-menu {
    margin-top: 0.2em;
    padding-right: 0.5em;
  }

  #logo-text {
    font-size: 2em;
  }

  .header-logo {
    margin-top: 0.2em;
    width: 5em;
  }

  .alt-header .header-logo,
  .solid-header .header-logo {
    margin-top: 0;
    width: 5em;
  }

  .header-item a {
    font-size: 1.4em;
  }

  .footer-bottom a,
  .footer-bottom span {
    margin: 0.8em 0;
    display: block;
  }

  .footer-bottom {
    bottom: 1em;
  }

  .work-page-caption h1 {
    font-size: 1.3em;
    margin-top: 1.1em;
  }

  .work-page-caption p {
    font-size: 0.85em;
  }

  .work-hero {
    height: auto !important;
    position: relative;
  }

  .work-border {
    left: 2%;
    bottom: 2%;
    width: calc(100% - 4%);
    height: calc(100% - 3%);
    opacity: 0;
  }

  .work-list-wrapper {
    margin: 0 !important;
  }

  .pattern-img {
    opacity: 1;
    right: 0;
  }

  .work-clients-item {
    height: 6.5em;
    width: 100%;
  }

  .waves-caption h1 {
    margin-top: 5%;
    font-size: 1.5em;
  }

  .services-wrapper {
    padding: 5em 5% 2em;
  }

  .services-wrapper .services-wrapper-info {
    font-size: 1em;
    width: 75%;
    margin-left: 2%;
    padding: 11%;
    margin-top: -10em;
  }

  .contact-intro {
    padding: 8em 5% 3em;
    width: 90%;
    text-align: center;
  }

  .contact-intro p {
    font-size: 1em;
  }

  .contact-item img {
    width: 2em;
    display: block;
    margin: 0 auto 0.3em;
  }

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

  .contact-item {
    margin-bottom: 0;
    text-align: center;
  }

  .loading-gif {
    width: 45%;
  }

  .character-item {
    float: none;
    width: 100%;
  }

  .character-btn {
    padding: 1em 0;
    font-size: 1.05em;
  }

  .character-image {
    width: 70%;
    margin-top: 0;
  }

  .character-item:nth-child(3) .character-image {
    left: -5%;
  }

  .character-item:nth-child(4) .character-image {
    margin-top: -5%;
  }

  .characters-caption {
    font-size: 1.2em;
  }

  .client-logo {
    height: 7em;
  }

  @-moz-keyframes dropDown {
    0% {
      opacity: 0;
      top: 0;
    }

    100% {
      opacity: 1;
      top: 1rem;
    }
  }

  @-webkit-keyframes dropDown {
    0% {
      opacity: 0;
      top: 0;
    }

    100% {
      opacity: 1;
      top: 1rem;
    }
  }

  @keyframes dropDown {
    0% {
      opacity: 0;
      top: 0;
    }

    100% {
      opacity: 1;
      top: 1rem;
    }
  }

  @-moz-keyframes showWorkList {
    0% {
      opacity: 0;
      transform: translateY(0);
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
    }

    100% {
      opacity: 1;
      transform: translateY(-2em);
      -webkit-transform: translateY(-2em);
      -moz-transform: translateY(-2em);
    }
  }

  @-webkit-keyframes showWorkList {
    0% {
      opacity: 0;
      transform: translateY(0);
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
    }

    100% {
      opacity: 1;
      transform: translateY(-2em);
      -webkit-transform: translateY(-2em);
      -moz-transform: translateY(-2em);
    }
  }

  @keyframes showWorkList {
    0% {
      opacity: 0;
      transform: translateY(0);
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
    }

    100% {
      opacity: 1;
      transform: translateY(-2em);
      -webkit-transform: translateY(-2em);
      -moz-transform: translateY(-2em);
    }
  }

  .work-page-caption * {
    opacity: 1 !important;
  }

  .contact-intro h1 {
    font-size: 2.8em;
  }

  .work-header-wrapper img {
    width: 200%;
    margin-left: 0%;
  }

  #landmark-container .work-header-wrapper img {
    margin-left: -80%;
  }

  #soulfull-container .work-header-wrapper img {
    margin-left: -40%;
  }

  #central-container .work-header-wrapper img {
    margin-left: -70%;
  }

  #intuit-container .work-header-wrapper img {
    margin-left: -45%;
  }

  .work-header-title {
    font-size: 3em !important;
  }

  .work-intro-block {
    padding: 2em 5% 4em;
    display: block;
    float: left;
  }

  .work-intro-logo {
    display: block;
    width: 100%;
    margin: 0;
  }

  .work-intro-para {
    width: auto !important;
    margin: 0.5em 0 0;
    text-align: center;
    font-size: 1em;
    padding: 0 10%;
    display: block;
  }

  .work-typography,
  .work-typography.single-typography,
  .work-typography.double-typography {
    margin: 3em 0 0;
    width: 100%;
    float: none;
  }

  .double-typography .work-typography-item {
    padding: 0;
    margin-bottom: 2rem;
  }

  .work-typography-item {
    float: none;
    width: 100%;
    margin: 0 0 0.6em;
  }

  .waves-caption h1 .words-roll-wrapper span {
    padding-left: 0.3rem;
  }

  .work-typography h4 {
    font-size: 1.4em;
  }

  .work-highlight {
    margin: 4em auto 0;
    width: 100%;
  }

  .work-highlight h3 {
    font-size: 1.25em;
  }

  .work-highlight p {
    font-size: 1em;
  }

  .work-section {
    margin: 0;
    clear: both;
    display: flex;
    flex-direction: column;
  }

  .work-split {
    padding: 3em 5% 20rem;
    text-align: center;
    margin-bottom: 3rem;
    clear: both;
    display: flex;
    flex-direction: column;
  }

  .central-mockups {
    margin-top: -4rem;
  }

  .toysrus-mockup {
    margin-top: -10rem;
  }

  .toysrus-mockup img {
    width: 85% !important;
  }

  .soulfull-work {
    margin-top: -5rem;
    display: block;
    clear: both;
    background-color: #fff;
    position: relative;
  }

  .soulfull-work .work-split-info-right,
  .soulfull-work .work-split-info {
    top: 50%;
    margin-top: 3rem;
  }

  .work-split-info {
    left: 0rem;
  }

  #soulfull-container .work-split-image-right {
    box-shadow: 0 0rem 1rem rgba(0, 0, 0, 0.15);
  }

  .work-split-info {
    width: 100%;
    text-align: center;
  }

  .work-split-info-right,
  .work-split-info {
    display: block;
    width: 100%;
    right: 0;
    transform: none;
  }

  .work-split-info h2 {
    font-size: 1.25em;
  }

  .work-split-info p {
    font-size: 1em;
  }

  .intuit-mockups .work-split-info {
    width: 100%;
  }

  .work-split img {
    top: 1rem;
    transform: translateY(0) !important;
    position: relative;
    left: 0rem;
    right: 0;
    margin: auto;
    width: 80%;
  }

  #soulfull-container .work-split img {
    width: 100%;
    top: 0;
  }

  #toysrus-container .work-split img {
    width: 80%;
    margin: auto;
  }

  #toysrus-container .work-section {
    margin: 0;
  }

  .soulfull-work .soulfull-background {
    margin: 7rem 0;
  }

  #soulfull-container .work-split-image-right {
    width: 80% !important;
    line-height: 0;
  }

  .soulfull-video-wrapper {
    position: relative;
    z-index: 10;
    margin-bottom: 3rem;
    display: block;
    clear: both;
  }

  .work-social-posts {
    display: block;
    clear: both;
  }

  .work-split-info-right h2,
  .work-split-info h2,
  .max-appraisal-wrapper h2,
  .work-img-carousel-wrapper h2,
  .soulfull-video-wrapper h2,
  .soulfull-banners h2,
  .intuit-video-wrapper h2,
  .work-fb-campaign h3 {
    font-size: 2rem;
    text-align: center;
    padding: 0 5%;
  }

  .work-img-carousel-wrapper {
    padding: 2rem 0;
    height: auto;
    margin-bottom: 3rem;
    display: block;
    clear: both;
  }

  .main {
    margin: 2rem auto;
  }

  .image-carousel {
    margin-top: 3rem;
    transform: none;
    margin-left: 0;
  }

  .soulfull-wrapper .image-carousel {
    margin-top: -5rem;
    padding-bottom: 2rem;
  }

  .soulfull-wrapper {
    height: auto;
    margin-bottom: 5rem;
  }

  .image-carousel:hover {
    transform: none;
  }

  .image-carousel li {
    display: block;
    width: 70%;
    margin: 0 auto 2rem;
  }

  .work-split-info-right .button,
  .work-split-info .button {
    margin: 2rem auto 1rem;
    display: block;
  }

  .video-container li {
    display: block;
    text-align: center;
    margin: 2rem auto;
    width: 80%;
  }

  .video-container li img {
    width: 100%;
  }

  .appraisal-post-container li {
    display: block;
    margin: auto;
  }

  .appraisal-post-container li img {
    box-shadow: 0 0rem 1rem rgba(0, 0, 0, 0.3);
  }

  .work-border-img {
    margin: 4em 0.7em 3rem;
  }

  .work-border-img img {
    margin-bottom: 0.7em;
  }

  .fb_iframe_widget {
    width: 100%;
    overflow: hidden;
  }

  .work-final {
    padding: 2em 0 0;
  }

  .work-final h3 {
    font-size: 1.25em;
    margin: 0 5% 0.3em;
  }

  .work-final span {
    margin: 0 5%;
  }

  .work-next-project {
    position: relative;
    padding: 1em 0 !important;
    margin-top: 2em;
    text-align: center;
  }

  .work-next-project-info {
    opacity: 1;
    text-align: center;
  }

  .work-next-project-info span {
    font-size: 0.75em;
    display: block;
  }

  span.work-next-project-arrow {
    top: 0;
    -moz-transform: translateY(0) !important;
    -ms-transform: translateY(0) !important;
    -webkit-transform: translateY(0) !important;
    transform: translateY(0) !important;
    position: relative;
    right: 0;
    margin-top: 1em;
    display: block;
    font-size: 0.85em;
  }

  .work-final span em {
    display: block;
  }

  .thumbs-block .thumbs {
    overflow-x: scroll;
    position: relative;
  }

  .thumbs-block .thumb {
    width: 65%;
    height: auto;
    min-width: inherit;
    min-height: inherit;
  }

  .thumbs-block {
    padding-bottom: 3em;
    padding-top: 0;
    height: auto;
    min-height: inherit;
  }

  .thumb .lookbook-overview-img {
    display: block;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    width: 100%;
    margin: auto;
    position: relative;
    top: 0;
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
    left: 0;
    right: 0;
  }

  .thumbs-block .lookbook-caption {
    padding: 0;
    right: 0;
    bottom: 0.7em;
    text-align: center;
  }

  .thumb:hover {
    padding: 0;
    margin: 2em 1em 4em;
    cursor: pointer;
  }

  .thumbs-block .lookbook-caption h1 {
    font-size: 2.5em;
  }

  .thumbs-block .lookbook-caption em {
    margin-left: 0;
  }

  .frame,
  .thumb:hover .frame {
    margin: -5% 0 0 -19%;
  }

  .lookbook-overlay {
    position: absolute;
    left: 0;
    top: auto;
    bottom: -2em;
    width: 100%;
    height: auto;
    background: 0 0 !important;
    opacity: 0.7;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
  }

  .thumb h3 {
    position: relative;
    top: 0;
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
    left: 0;
    right: 0;
    font-weight: 100;
    color: #fff;
    line-height: 2.1rem;
  }

  .frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 130%;
    height: 150%;
    border: 0.1em solid #fff;
    opacity: 0.4;
    transform: rotate(25deg);
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
  }

  .art-men-wrapper img,
  .id-women-wrapper img,
  .kalki-cover img,
  .trend-men-wrapper img {
    width: 300%;
    margin-left: -135%;
    margin-top: 3em;
  }

  .geoffrey {
    bottom: 0em;
    left: -3em;
    height: 10em;
  }

  .stars {
    bottom: 0rem;
    right: 0em;
    height: 11em;
  }

  .toysrus-work .block-title-wrapper {
    clear: both;
    display: block;
  }

  .toysrus-work .block-title-wrapper h3,
  .toysrus-work .works-wrapper h2,
  .central-background h3 {
    font-size: 1.5em;
    padding: 0 5%;
  }

  .central-mockups .work-split-info-right,
  .central-mockups .work-split-info {
    width: auto;
  }

  .central-background {
    background-position-x: 9%;
    padding: 6rem 0;
  }

  .central-background h3 {
    margin-top: -2rem;
    width: 80vw;
  }

  #central-container .work-intro-logo {
    margin-left: 0.5rem;
  }

  #central-container .work-split-info-right h2 {
    padding-right: 3rem;
  }

  .toysrus-work .block-title-wrapper span {
    font-size: 1.1em;
  }

  .toysrus-work .collage-list-item {
    width: 50%;
  }

  .toysrus-work .arrow-down {
    display: none;
  }

  .performer-modal-wrapper .performer-img {
    position: relative;
    width: 100%;
  }

  .performer-modal-wrapper .close-modal {
    width: 2em;
    position: fixed;
    top: 0;
    background: #fba81a;
    padding: 0.5em;
    right: 0;
    z-index: 1;
  }

  .performer-modal-wrapper {
    overflow-y: scroll;
  }

  .performer-modal {
    position: absolute;
    top: 1em;
    left: 1em;
    width: calc(100% - 2em);
    height: calc(100% - 2em);
  }

  .performer-modal-wrapper .performer-modal-info {
    position: relative;
    left: 0;
    bottom: 0;
  }

  .performer-modal-wrapper .performer-title-block {
    padding: 2em 0.2em 1em;
    margin-left: 0;
  }

  .performer-modal-wrapper .performer-title-block h3 {
    font-size: 1.4em;
  }

  .performer-modal-wrapper .performer-date {
    font-size: 1.1rem !important;
  }

  .performer-modal-wrapper .performer-para {
    color: #b7b7b7;
    margin: 1em 2% 3em;
  }

  .performer-modal-wrapper .performer-title-block span {
    font-size: 0.9em;
  }

  .work-fb-campaign {
    padding: 2em 5% 0;
  }

  .work-highlight h3 {
    font-size: 1.25em;
  }

  .work-fb-campaign p {
    font-size: 1em;
  }

  .work-fb-stat em {
    font-size: 3em;
  }

  .work-fb-stat li {
    display: block;
    margin: 0 0 2em;
  }

  .work-fb-list {
    padding: 1em 3% 2em;
  }

  .work-fb-post {
    width: 75%;
  }

  .work-final p {
    padding: 0 10%;
  }

  .work-social-img {
    margin: auto;
    display: block;
    margin-bottom: 2rem;
    width: 70%;
  }

  .work-social-img:hover {
    transform: none;
  }

  .work-social-img img {
    width: 100%;
  }

  .ch-video video,
  .happy-modal img {
    width: 100%;
  }

  .corner-house-video .work-fb-stat em {
    font-size: 2.2em;
  }

  .corner-house-video .work-fb-stat li {
    margin: 0 0 0.8em;
  }

  .ch-video .fa-play {
    font-size: 2em;
  }

  .ch-video {
    padding-bottom: 2em;
  }

  .corner-house-video .work-fb-stat {
    margin-bottom: 2em;
  }

  .header-thin-line {
    position: absolute;
  }

  .happy-modal h1 {
    font-size: 1.7em;
  }

  .waves-caption h1 > span,
  span.happy-title {
    font-size: 1.2rem;
  }

  .waves-wrapper {
    height: 22em;
    min-height: initial !important;
  }

  .services-list i {
    display: none;
  }

  .services-list li {
    display: block;
  }

  .careers-page-caption h1 {
    font-size: 1.2em;
  }

  .careers-btn {
    display: none;
  }

  .careers-info {
    margin-left: 0;
  }

  .careers-info p {
    width: 100%;
    font-size: 1em;
  }

  .careers-page-caption {
    bottom: 1em;
  }

  .careers-hero-wrapper {
    height: auto !important;
  }

  .careers-img {
    display: block;
    width: 100%;
  }

  .careers-info-wrapper {
    padding: 3em 8% 3em 10%;
  }

  .careers-line {
    left: 4.5%;
  }

  .careers-opening-wrapper {
    padding: 1em 8%;
  }

  .careers-list {
    margin: 0 0 3em;
  }

  .careers-item {
    padding: 1.8em 0 1em;
  }

  .careers-title h4 {
    font-size: 1em;
  }

  .careers-expand-btn {
    bottom: 1.2em;
  }

  .careers-req-wrapper ul {
    margin-left: 0.5em;
  }

  .careers-item.show .careers-req-wrapper {
    max-height: 200em;
  }

  .careers-item .contact-item {
    display: block;
    margin-bottom: 0;
    margin-top: 0;
  }

  .careers-item .contact-item a {
    font-size: 1.1em;
  }

  .careers-item .contact-item img {
    width: 1.3em;
    display: inline-block;
    vertical-align: middle;
    margin-top: 0.3em;
  }

  .careers-item .contact-item:last-child {
    margin-left: 0;
    padding-left: 0;
    border: none;
  }

  .careers-expand-btn em {
    height: 1em;
  }

  .careers-opening-wrapper h3 {
    font-size: 1.2em;
  }

  .careers-project {
    margin-bottom: 2em;
  }

  .careers-scrim {
    left: 0;
    bottom: 0;
    width: 100%;
  }

  .careers-border {
    left: 0;
  }
}

@media screen and (min-width: 767px) and (max-width: 1024px) {
  .banner-wrapper li {
    display: inline-block;
    width: 25%;
    margin: 0 2em;
  }
  .client {
    width: 40%;
    margin: 3rem auto;
  }

  .work-section {
    margin: 3rem 0;
  }

  .work-split-info {
    left: 5rem;
  }

  .toysrus-work .block-title-wrapper {
    padding: 3em 15%;
  }

  .error-body,
  .work-hero {
    height: auto !important;
  }

  .resp-show {
    display: block !important;
  }

  .resp-hide {
    display: none !important;
  }

  .loading-gif {
    width: 50%;
  }

  .character-item {
    float: none;
    width: 100%;
  }

  .character-btn {
    padding: 1em 0;
    font-size: 1.05em;
  }

  .character-image {
    width: 40%;
    margin-top: 0;
  }

  .character-item:nth-child(3) .character-image {
    left: -5%;
  }

  .character-item:nth-child(4) .character-image {
    margin-top: 0;
  }

  .characters-caption {
    font-size: 1.2em;
  }

  .error-intro {
    font-size: 0.7em;
  }

  .video-caption h1 {
    font-size: 2em;
  }

  .video-caption .btn {
    margin-top: 1.5em;
  }

  .video-caption .btn .fa {
    font-size: 1em;
  }

  .main-body.show .video-caption {
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
  }

  .work-item {
    background-position-x: right;
    background-size: auto 100%;
  }

  .work-caption {
    width: 50%;
    left: 0;
  }

  .work-image {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate3d(calc(-50% + 10rem), -50%, 0);
  }

  .manaba-block {
    right: 1em;
  }

  .manaba-quote-block h3 {
    font-size: 3.4em;
  }

  .manaba-btns .btn {
    font-size: 1em;
  }

  .work-hero {
    position: relative;
  }

  .work-list-wrapper {
    margin: 0 !important;
  }

  .waves-caption h1,
  .work-page-caption h1 {
    font-size: 3em;
  }

  .work-clients-item {
    width: 50%;
    height: 15em;
  }

  .services-wrapper .services-wrapper-info {
    padding: 1.5em 2em;
    font-size: 1.4em;
    margin-top: -10em;
  }

  .work-header-title {
    font-size: 4.5em;
  }

  .work-final h3,
  .work-split-info h2 {
    font-size: 1.7em;
  }

  .work-split-info-right {
    width: 40%;
    right: 3rem;
  }

  .appraisal-post-container li {
    width: 80%;
  }

  .work-next-project {
    position: relative;
    padding: 1em 0 !important;
    margin-top: 4em;
    text-align: center;
    max-height: none !important;
  }

  .work-next-project-info {
    opacity: 1;
    text-align: center;
  }

  .work-next-project-info span {
    font-size: 0.75em;
    display: block;
  }

  span.work-next-project-arrow {
    top: 0;
    -moz-transform: translateY(0) !important;
    -ms-transform: translateY(0) !important;
    -webkit-transform: translateY(0) !important;
    transform: translateY(0) !important;
    position: relative;
    right: 0;
    margin-top: 1em;
    display: block;
    font-size: 0.85em;
  }

  .work-final {
    padding: 3em 0 0;
  }

  .work-final h3 {
    margin: 0 5% 0.3em;
  }

  .toysrus-work .block-title-wrapper h3,
  .toysrus-work .works-wrapper h2 {
    font-size: 1.5em;
  }

  .toysrus-work .block-title-wrapper span {
    font-size: 1.1em;
  }

  .toysrus-work .arrow-down {
    display: none;
  }

  .performer-modal-wrapper .performer-img {
    position: relative;
    width: 50%;
    margin: auto;
    right: 0;
    display: block;
  }

  .performer-modal-wrapper .performer-title-block h3 span {
    display: inline-block;
  }

  .performer-modal-wrapper .close-modal {
    width: 2em;
    position: fixed;
    top: 0;
    background: #fba81a;
    padding: 0.5em;
    right: 0;
    z-index: 1;
  }

  .performer-modal-wrapper {
    overflow-y: scroll;
  }

  .performer-modal {
    position: absolute;
    top: 1em;
    left: 1em;
    width: calc(100% - 2em);
    height: calc(100% - 2em);
  }

  .performer-modal-wrapper .performer-modal-info {
    position: relative;
    left: 0;
    bottom: 0;
    text-align: center;
  }

  .performer-modal-wrapper .performer-title-block {
    padding: 2em 0.2em 1em;
    margin-left: 0;
  }

  .performer-modal-wrapper .performer-title-block h3 {
    font-size: 1.4em;
  }

  .performer-modal-wrapper .performer-date {
    font-size: 1.1rem !important;
  }

  .performer-modal-wrapper .performer-para {
    color: #b7b7b7;
    margin: 1em 2% 3em;
  }

  .performer-modal-wrapper .performer-title-block span {
    font-size: 0.9em;
  }

  .work-intro-block {
    padding-bottom: 4em;
  }

  .work-fb-campaign {
    padding: 3em 5%;
  }

  .work-fb-stat em {
    font-size: 3.5em;
  }

  .work-fb-post {
    width: 55%;
  }

  .client-logo {
    left: 50%;
    -moz-transform: translate(-50%, -50%) !important;
    -ms-transform: translate(-50%, -50%) !important;
    -webkit-transform: translate(-50%, -50%) !important;
    transform: translate(-50%, -50%) !important;
    margin: 0;
  }

  .work-page-caption * {
    opacity: 1 !important;
  }

  .header-thin-line {
    position: absolute;
  }

  .work-caption h2 {
    font-size: 2.2em;
  }
}

@media screen and (min-width: 1400px) {
  .work-split {
    margin: 3rem 0;
  }

  .work-section {
    margin: 10rem 0;
  }
}

@media screen and (min-width: 600px) and (max-width: 1024px) {
  .client {
    width: 40%;
    margin: 3rem auto;
  }
}