@-webkit-keyframes  {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.table-center {
  display: table;
  position: absolute;
  height: 100%;
  top: 0;
  width: 100%;
}
.text-wrapper {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.full-width {
  width: 100%;
  display: block;
  transform: translate3d(0, 0, 0);
}
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  height: 100%;
  overflow: hidden;
}
.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
  background-color: #141414;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}
.slick-slider .slick-list,
.slick-track,
.slick-slide,
.slick-slide img {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  zoom: 1;
}
.slick-track:before,
.slick-track:after {
  content: "";
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}
.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}
.slick-prev,
.slick-next {
  position: absolute;
  display: block;
  height: 100%;
  width: 16%;
  cursor: pointer;
  background: transparent;
  color: transparent;
  top: 0;
  padding: 0;
  border: none;
  outline: none;
}
.slick-prev:focus,
.slick-next:focus {
  outline: none;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: 0.25;
}
.slick-prev {
  left: -25px;
}
.slick-next {
  right: -25px;
}
.slick-slider {
  margin-bottom: 30px;
}
.slick-dots {
  position: absolute;
  left: 0px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0px;
  width: 3px;
  top: 0;
  height: 70%;
  top: 15%;
}
.slick-dots li {
  position: relative;
  display: block;
  height: 17% !important;
  width: 50px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  vertical-align: top;
}
.slick-dots li button {
  border: 0;
  height: 80%;
  top: 10%;
  width: 50px;
  display: block;
  position: relative;
  outline: 0;
  color: transparent;
  padding: 0;
  cursor: pointer;
  vertical-align: inherit;
  background-color: transparent;
}
.slick-dots li button:before,
.slick-dots li button:after {
  background: #fff;
  bottom: 0;
  position: absolute;
  height: 0;
  content: '';
  width: 2px;
  left: 20px;
  transition: width linear 0.1s;
  transform: translate3d(0, 0, 0);
}
.slick-dots li button:before {
  background-color: rgba(255,255,255,0.2);
  width: 2px;
  height: 100%;
}
.slick-dots li button:hover:after {
  width: 6px;
  height: 100%;
}
.slick-dots li button.leaving:after {
  transition: width linear 0.1s, height linear 0.3s;
}
.slick-dots .slick-active button:after {
  transition: height linear 7s, width ease-in 0.3s;
  height: 100%;
  width: 2px;
  top: 0;
}
.carousel-container {
  position: relative;
  height: 700px;
}
.carousel-container .align-para {
  padding-left: 10%;
  padding-right: 10%;
  margin: 0 auto;
  max-width: 560px;
}
#mainCarousel.carousel a {
  height: auto;
  width: 170px;
  margin-left: 10px;
  margin-right: 10px;
  display: inline-block;
}
#mainCarousel.carousel a:last-child {
  margin-top: 20px;
}
#mainCarousel.carousel a:hover {
  color: #0c0c0c;
}
.carousel {
  list-style-type: none;
  margin-bottom: 0;
}
.carousel,
.carousel li,
.carousel a,
.carousel .cover {
  height: 700px;
}
.carousel .text-wrapper {
  width: 100%;
}
.carousel a {
  width: 100%;
  display: block;
}
@media (max-width: 1024px) {
  .carousel-container {
    height: 630px;
  }
  .carousel,
  .carousel li,
  .carousel a,
  .carousel .cover {
    height: 630px;
  }
}
@media (max-width: 768px) {
  .carousel-container {
    height: 450px;
  }
  .carousel,
  .carousel li,
  .carousel a,
  .carousel .cover {
    height: 350px;
  }
}
body {
  text-rendering: optimizeLegibility;
}
.title {
  font: 100 58px/1.2 'AvantGardeGothicITCW01X';
  color: #131313;
  letter-spacing: -2px;
}
.second-title {
  font: 100 58px/1.2 'AvantGardeGothicITCW01X';
  color: #131313;
  font-size: 48px;
  letter-spacing: -1px;
  font-weight: 100;
}
.subtitle {
  font: 100 20px/1.6 'AvantGardeGothicITCW01X';
  letter-spacing: -0.2px;
}
p {
  font: 100 17px/1.5 'AvantGardeGothicITCW01X';
  letter-spacing: 0.5px;
  color: #131313;
  letter-spacing: 1px;
}
.second-title.hide-desktop {
  margin-bottom: 5px;
}
@media (max-width: 768px) {
  .title {
    font-size: 48px;
  }
  .second-title {
    font-size: 42px;
  }
  .subtitle,
  p {
    font-size: 18px;
    line-height: 1.4;
  }
}
@media (smallmobile) {
  .title {
    font-size: 36px;
    padding: 0 20px;
  }
  .second-title {
    font-size: 32px;
  }
  .subtitle,
  p {
    font-size: 16px;
  }
}
@font-face {
  font-family: 'icomoon';
  src: url("../fonts/icomoon.eot?3ywdkg");
  src: url("../fonts/icomoon.eot?3ywdkg#iefix") format("embedded-opentype"), url("../fonts/icomoon.woff2?3ywdkg") format("woff2"), url("../fonts/icomoon.ttf?3ywdkg") format("truetype"), url("../fonts/icomoon.woff?3ywdkg") format("woff"), url("../fonts/icomoon.svg?3ywdkg#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"],
[class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
/* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-client-ebay-classifieds:before {
  content: "\e912";
}
.icon-client-aesop:before {
  content: "\e913";
}
.icon-client-simon-johnson:before {
  content: "\e914";
}
.icon-client-pernod-ricard:before {
  content: "\e915";
}
.icon-client-bresic-witney:before {
  content: "\e916";
}
.icon-client-sonoma .path1:before {
  content: "\e900";
  color: #1a1a1a;
}
.icon-client-sonoma .path2:before {
  content: "\e901";
  margin-left: -1.0166015625em;
  color: #fff;
}
.icon-client-sonoma .path3:before {
  content: "\e902";
  margin-left: -1.0166015625em;
  color: #fff;
}
.icon-client-sonoma .path4:before {
  content: "\e903";
  margin-left: -1.0166015625em;
  color: #fff;
}
.icon-client-sonoma .path5:before {
  content: "\e904";
  margin-left: -1.0166015625em;
  color: #fff;
}
.icon-client-sonoma .path6:before {
  content: "\e905";
  margin-left: -1.0166015625em;
  color: #fff;
}
.icon-client-sonoma .path7:before {
  content: "\e906";
  margin-left: -1.0166015625em;
  color: #fff;
}
.icon-client-sonoma .path8:before {
  content: "\e907";
  margin-left: -1.0166015625em;
  color: #fff;
}
.icon-client-sonoma .path9:before {
  content: "\e908";
  margin-left: -1.0166015625em;
  color: #fff;
}
.icon-client-sonoma .path10:before {
  content: "\e909";
  margin-left: -1.0166015625em;
  color: #fff;
}
.icon-client-sonoma .path11:before {
  content: "\e90a";
  margin-left: -1.0166015625em;
  color: #fff;
}
.icon-client-sonoma .path12:before {
  content: "\e90b";
  margin-left: -1.0166015625em;
  color: #fff;
}
.icon-client-sonoma .path13:before {
  content: "\e90c";
  margin-left: -1.0166015625em;
  color: #fff;
}
.icon-client-sonoma .path14:before {
  content: "\e90d";
  margin-left: -1.0166015625em;
  color: #fff;
}
.icon-client-sonoma .path15:before {
  content: "\e90e";
  margin-left: -1.0166015625em;
  color: #fff;
}
.icon-client-sonoma .path16:before {
  content: "\e90f";
  margin-left: -1.0166015625em;
  color: #fff;
}
.icon-client-sonoma .path17:before {
  content: "\e910";
  margin-left: -1.0166015625em;
  color: #fff;
}
.icon-client-sonoma .path18:before {
  content: "\e911";
  margin-left: -1.0166015625em;
  color: #fff;
}
.icon-client-redcross:before {
  content: "\e60f";
}
.icon-client-alleasing:before {
  content: "\e610";
}
.icon-client-clemengerbbdo:before {
  content: "\e611";
}
.icon-client-ebay:before {
  content: "\e612";
}
.icon-client-gumtree:before {
  content: "\e613";
}
.icon-client-hcf:before {
  content: "\e614";
}
.icon-client-mitsubishi:before {
  content: "\e615";
}
.icon-client-quay:before {
  content: "\e616";
}
.icon-client-unsw:before {
  content: "\e617";
}
.icon-pollen:before {
  content: "\e600";
}
.icon-down:before {
  content: "\e607";
}
.icon-up:before {
  content: "\e608";
}
.icon-left:before {
  content: "\e609";
}
.icon-right:before {
  content: "\e60a";
}
.icon-desktop:before {
  content: "\e60b";
}
.icon-mobile:before {
  content: "\e60c";
}
.icon-tablet:before {
  content: "\e60d";
}
.icon-quote:before {
  content: "\e60e";
}
.icon-facebook:before {
  content: "\e601";
}
.icon-instagram:before {
  content: "\e602";
}
.icon-link:before {
  content: "\e603";
}
.icon-linkedin:before {
  content: "\e604";
}
.icon-pinterest:before {
  content: "\e605";
}
.icon-twitter:before {
  content: "\e606";
}
.next {
  height: 42px;
  width: 42px;
  background-color: #0d0d0d;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  cursor: pointer;
  bottom: 10%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.next:after {
  content: '';
  position: absolute;
  margin-top: -22px;
  margin-left: -22px;
  z-index: 0;
  top: 50%;
  left: 50%;
  transition: all 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
  width: 44px;
  height: 44px;
  background-color: #fff;
  border-radius: 50%;
  transform: scale(0);
}
.next.hover:after,
.next:hover:after {
  transform: scale(1);
}
.next.hover .text,
.next:hover .text,
.next.hover [class^="icon-"],
.next:hover [class^="icon-"] {
  color: #0d0d0d;
  z-index: 3;
}
.next [class^="icon-"] {
  display: block;
  color: #fff;
  width: 20px;
  height: 20px;
  overflow: hidden;
  position: absolute;
  top: 50%;
  margin-top: -10px;
  left: 50%;
  margin-left: -10px;
  z-index: 2;
}
.next.grey {
  background-color: #2b2b2b;
}
.left-arrow,
.right-arrow {
  height: 40px;
  width: 40px;
  background-color: #2b2b2b;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  position: absolute;
  bottom: 68px;
  right: 40px;
}
.left-arrow:after,
.right-arrow:after {
  content: '';
  position: absolute;
  margin-top: -21px;
  margin-left: -21px;
  z-index: 0;
  top: 50%;
  left: 50%;
  transition: all 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
  width: 42px;
  height: 42px;
  background-color: #fff;
  border-radius: 50%;
  transform: scale(0);
}
.left-arrow.hover:after,
.right-arrow.hover:after,
.left-arrow:hover:after,
.right-arrow:hover:after {
  transform: scale(1);
}
.left-arrow.hover .text,
.right-arrow.hover .text,
.left-arrow:hover .text,
.right-arrow:hover .text,
.left-arrow.hover [class^="icon-"],
.right-arrow.hover [class^="icon-"],
.left-arrow:hover [class^="icon-"],
.right-arrow:hover [class^="icon-"] {
  color: #2b2b2b;
  z-index: 3;
}
.left-arrow svg,
.right-arrow svg {
  width: 18px;
  height: 33px;
  margin-left: 12px;
  margin-top: 4px;
  z-index: 2;
  position: relative;
  fill: #fff;
}
.left-arrow.grey,
.right-arrow.grey {
  background-color: #2b2b2b;
}
@media (smallmobile) {
  .left-arrow,
  .right-arrow {
    right: 20px;
    bottom: 28px;
  }
}
.left-arrow {
  right: 95px;
}
.left-arrow svg {
  transform: scale(-1);
}
@media (smallmobile) {
  .left-arrow {
    right: auto;
    left: 20px;
  }
}
.button {
  border-radius: 5px;
  border: 1px solid #fff;
  width: 200px;
  text-align: center;
  padding: 13px 0;
  font-size: 14px;
  letter-spacing: 0.6px;
  margin-top: 50px;
  cursor: pointer;
}
.button:hover {
  background-color: #fff;
  color: #000;
}
.goto {
  font-size: 16px;
  color: #000;
  border-bottom: 2px solid #000;
  position: relative;
  font-weight: 900;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
}
.goto .icon-right {
  font-size: 13px;
  position: absolute;
  right: -23px;
  top: 7px;
}
@media (smallmobile) {
  .goto {
    margin: 0 auto;
    display: table;
  }
}
.fade {
  opacity: 1;
  transition: all 0.3s ease;
}
.fade .clientName,
.fade .title,
.fade .header {
  transition: all 2s ease;
}
.fade.ng-leave {
  transition: all 0.3s ease;
}
.fade.ng-leave .clientName,
.fade.ng-leave .title,
.fade.ng-leave .header {
  transition: all 0.3s ease;
}
.fade.ng-enter {
  transition: all 0.3s ease;
}
.fade.ng-enter .clientName,
.fade.ng-enter .title,
.fade.ng-enter .header {
  transition: all 1.7s ease;
}
.fade.ng-hide,
.fade.ng-enter {
  opacity: 0;
}
.fade.ng-hide .clientName,
.fade.ng-enter .clientName,
.fade.ng-hide .title,
.fade.ng-enter .title,
.fade.ng-hide .header,
.fade.ng-enter .header {
  opacity: 0;
}
.fade.ng-enter-active,
.fade.ng-leave {
  opacity: 1;
}
.fade.ng-enter-active .clientName,
.fade.ng-leave .clientName,
.fade.ng-enter-active .title,
.fade.ng-leave .title,
.fade.ng-enter-active .header,
.fade.ng-leave .header {
  opacity: 1;
}
.fade.ng-leave-active {
  opacity: 0;
}
.fade.ng-leave-active .clientName,
.fade.ng-leave-active .title,
.fade.ng-leave-active .header {
  opacity: 0;
}
.title {
  font: 100 58px/1.2 'AvantGardeGothicITCW01X';
  color: #131313;
  text-align: center;
  margin: 28px auto 94px auto;
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: content-box;
}
@media (max-width: 1024px) {
  .title {
    margin-bottom: 40px;
    margin-top: 40px;
  }
}
@media (max-width: 768px) {
  .title {
    font-size: 42px;
    line-height: 48px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (smallmobile) {
  .title {
    font-size: 34px;
    line-height: 40px;
  }
}
.title.tight {
  margin-bottom: 24px;
}
.header {
  position: relative;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: auto 570px;
  height: 570px;
  height: 95vh;
  max-height: 570px;
  text-align: center;
  color: #fff;
}
@media (max-width: 768px) {
  .header {
    min-height: 460px;
    height: 95%;
  }
}
@media (min-width: 1400px) {
  .header {
    background-size: 100%;
  }
}
.header .title {
  max-width: 700px;
  font: 54px/65px 'AvantGardeGothicITCW01X';
  letter-spacing: -0.4px;
  color: #fff;
}
@media (max-width: 768px) {
  .header .title {
    font-size: 36px;
    line-height: 42px;
  }
}
.header.clear-text .title,
.header.clear-text .clientName,
.header.clear-text span {
  color: #131313;
}
.header .arrow {
  bottom: 12%;
}
.header .clientName {
  padding-top: 166px;
  margin-bottom: 30px;
  font-size: 18px;
  line-height: 18px;
  margin-right: -3px;
  color: #fff;
}
@media (max-width: 768px) {
  .header .clientName {
    font-size: 18px;
  }
}
.icon-pollen {
  position: absolute;
  color: #fff;
  left: 46px;
  top: 9px;
  font-size: 84px;
}
.home {
  background-color: #fff;
  border-radius: 50%;
  content: '';
  height: 13px;
  width: 13px;
  position: absolute;
  left: 60px;
  top: 44px;
  z-index: 98;
}
#nav-wrapper {
  position: absolute;
  top: 0;
  z-index: 99;
  width: 100%;
  height: 100px;
  transform: translateY(-100px);
  transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
#nav-wrapper.active,
#nav-wrapper.show {
  transform: translateY(0);
  transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
#nav-wrapper .bg {
  transform: translateY(-100px);
  transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
  background-color: #fff;
  box-shadow: 0 0px 6px #ccc;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100px;
  content: '';
}
#nav-wrapper.stuck {
  position: fixed;
}
#nav-wrapper.stuck .bg {
  transform: translateY(0);
}
#nav-wrapper.stuck .home {
  display: none;
}
#nav {
  position: absolute;
  right: 10px;
  user-select: none;
  touch-action: none;
}
#nav ul {
  list-style-type: none;
}
#nav li {
  float: left;
}
#nav li a {
  font: 16px/1.5 'AvantGardeGothicITCW01X';
  letter-spacing: 0.8px;
  color: #fff;
  margin-right: 45px;
  cursor: pointer;
}
.stuck #nav li a,
.clearHeader #nav li a {
  color: #131313;
}
.stuck .icon-pollen,
.clearHeader .icon-pollen {
  color: #131313;
}
.stuck .nav-toggle span,
.clearHeader .nav-toggle span {
  background-color: #131313;
}
.stuck .home,
.clearHeader .home {
  background-color: #131313;
}
@media (max-width: 768px) {
  #nav {
    -webkit-tap-highlight-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 30;
    height: 104%;
    width: 100%;
    transform: translate3d(0, -1000px, 0);
    background-color: transparent;
    transition: transform 0.1s cubic-bezier(0.215, 0.61, 0.355, 1), background 0.05s ease-out;
  }
  #nav .nav {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    text-align: center;
    color: #3d3d3d;
    list-style-type: none;
    cursor: pointer;
    width: 220px;
  }
  #nav .nav li {
    float: none;
    line-height: 4px;
  }
  #nav .nav li a {
    font-family: AvantGardeGothicITCW01X;
    font-weight: 600;
    font-size: 34px;
    color: #fff;
    margin-right: 0;
    transform: translateY(-40%);
    transition: opacity 1s;
  }
  @include scale(0);
  #nav .nav li a:hover {
    color: #fff !important;
  }
  #nav a {
    position: relative;
    display: block;
    opacity: 0;
  }
  #nav.active {
    transform: translate3d(0, 0, 0);
    background-color: #131313;
    transition: transform 0.05s ease-in, background 0.4s ease-in-out;
  }
  #nav.active li a {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease-in, transform 0.3s ease-out;
  }
  @include scale(1);
  #nav.active li:nth-child(1) a {
    transition-delay: 0.2s;
  }
  #nav.active li:nth-child(3) a {
    transition-delay: 0.3s;
  }
  #nav.active li:nth-child(4) a {
    transition-delay: 0.4s;
  }
  .nav-toggle {
    -webkit-tap-highlight-color: transparent;
    transform: translate3d(0, 0, 0);
    width: 40px;
    height: 40px;
    position: absolute;
    z-index: 99;
    right: 15px;
    top: 30px;
    padding-top: 10px;
    box-sizing: border-box;
    cursor: pointer;
  }
  .nav-toggle span {
    display: block;
    background-color: #fff;
    width: 16px;
    display: block;
    height: 2px;
    position: absolute;
    left: 10px;
    opacity: 1;
    transform: rotate(0deg);
    transition: 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  .nav-toggle span:nth-child(1) {
    top: 13px;
  }
  .nav-toggle span:nth-child(2) {
    top: 18px;
  }
  .nav-toggle span:nth-child(3) {
    top: 23px;
  }
  .close span {
    background-color: #fff !important;
  }
  .close span:nth-child(1) {
    top: 18px;
    transform: rotate(135deg);
  }
  .close span:nth-child(2) {
    opacity: 0;
    left: -30px;
  }
  .close span:nth-child(3) {
    top: 18px;
    transform: rotate(-135deg);
  }
  .home {
    left: 30px;
  }
  #nav-wrapper {
    height: 0;
    overflow: hidden;
  }
  #nav-wrapper.stuck {
    height: 105px;
  }
  #nav-wrapper.active {
    height: 100%;
  }
  #nav-wrapper .bg .icon-pollen {
    left: 25px;
  }
}
.projects {
  background-color: #000;
  zoom: 1;
}
.projects:after,
.projects:before {
  content: "";
  display: table;
}
.projects:after {
  clear: both;
}
.projects .half {
  height: 316px;
}
.projects .half .second-title {
  margin-bottom: 10px;
  font-size: 36px;
}
.projects .half p {
  font-size: 15px;
}
.projects.clear-text .half p {
  color: #fff;
}
.projects .mitsubishi {
  background-image: url("../images/projects/work-tile-mitsubishi.jpg");
}
.projects .woolworths {
  background-image: url("../images/projects/work-tile-woolworths.jpg");
}
.projects .ebay {
  background-image: url("../images/projects/ebay-thumb.jpg");
}
.projects .gumtree {
  background-image: url("../images/projects/work-tile-gumtree.jpg");
}
.projects .australian-red-cross {
  background-image: url("../images/projects/work-tile-redcross.jpg");
}
.projects .the-story-of-more {
  background-image: url("../images/projects/work-tile-more.jpg");
}
.projects .gumtree-ipad {
  background-image: url("../images/projects/work-tile-gumtree-ipad.jpg");
}
.projects .taku {
  background-image: url("../images/projects/work-tile-taku.jpg");
}
.projects .quay {
  background-image: url("../images/projects/work-tile-quay.jpg");
}
.projects .peter-gilmore {
  background-image: url("../images/projects/work-tile-peter-gilmore.jpg");
}
.projects .ebay-classified {
  background-image: url("../images/projects/work-tile-ebay.jpg");
}
.projects .prezzee {
  background-image: url("../images/projects/work-tile-prezzee.jpg");
}
.projects .city-of-sydney {
  background-image: url("../images/projects/work-tile-city-of-sydney.jpg");
}
.projects .dolmio-pepper-hacker {
  background-image: url("../images/projects/work-tile-dolmio.jpg");
}
footer {
  padding-bottom: 50px;
  zoom: 1;
}
footer:after,
footer:before {
  content: "";
  display: table;
}
footer:after {
  clear: both;
}
.social {
  list-style-type: none;
  margin: 48px 0 0 30px;
  float: left;
}
.social li {
  float: left;
}
.social a {
  font-size: 20px;
  width: 50px;
  text-align: left;
  display: block;
  color: #131313;
}
.social a.twitter {
  margin-top: 2px;
  margin-left: 1px;
}
.contact {
  float: right;
  text-align: right;
  line-height: 20px;
  font-size: 16px;
  margin: 36px 40px 0 0;
}
.contact .infos {
  font: 22px/75px 'AvantGardeGothicITCW01X';
  text-decoration: underline;
  letter-spacing: 0.5px;
  line-height: 26px;
  font-size: 16px;
}
.contact .mail {
  margin-right: 10px;
}
.contact a {
  color: #131313;
  letter-spacing: 0.8px;
}
@media (max-width: 768px) {
  .social {
    text-align: center;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    margin-top: 45px;
    float: none;
  }
  .social a {
    text-align: center;
  }
  .infos {
    margin-bottom: 20px;
  }
  .contact {
    text-align: center;
    font-size: 14px;
    margin: 10px 0 0 0;
    padding-bottom: 40px;
    float: none;
  }
  .contact span {
    display: block;
  }
  .contact span.hide-mobile {
    display: none;
  }
  .mail {
    display: block;
    margin-right: 0;
  }
}
.contact-form {
  min-height: 436px;
  clear: both;
  position: relative;
  background-color: #f5f5f1;
  font-size: 30px;
  padding-top: 95px;
  line-height: 48px;
}
.contact-form span {
  color: #d6243d;
  display: inline-block;
  border-bottom: 1px dashed #d6243d;
  line-height: 38px;
  margin-right: 10px;
  outline: none;
}
@media (smallmobile) {
  .contact-form {
    font-size: 20px;
    line-height: 36px;
  }
  .contact-form span {
    line-height: 30px;
  }
}
.contact-form .submit {
  height: 100px;
  width: 100px;
  background-color: #141414;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  margin: 53px auto;
  text-align: center;
}
.contact-form .submit:after {
  content: '';
  position: absolute;
  margin-top: -51px;
  margin-left: -51px;
  z-index: 0;
  top: 50%;
  left: 50%;
  transition: all 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
  width: 102px;
  height: 102px;
  background-color: #fff;
  border-radius: 50%;
  transform: scale(0);
}
.contact-form .submit.hover:after,
.contact-form .submit:hover:after {
  transform: scale(1);
}
.contact-form .submit.hover .text,
.contact-form .submit:hover .text,
.contact-form .submit.hover [class^="icon-"],
.contact-form .submit:hover [class^="icon-"] {
  color: #141414;
  z-index: 3;
}
.contact-form .submit .text {
  position: relative;
  text-decoration: none !important;
  z-index: 2;
  color: #fff;
  font-size: 16px;
  line-height: 101px;
}
.contact-form .submit .icon-right,
.contact-form .submit .text {
  transition: all 1.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.contact-form .submit.nameError .icon-right {
  top: -170px;
  color: #d6243d;
  transform: rotate(90deg);
  left: -130px;
}
.contact-form .submit.nameErrorEnd .icon-right {
  left: 100px;
}
.contact-form .submit.loading {
  animation-name: rotate;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  background-color: #fff;
  border-top: 5px solid #141414;
  border-right: 5px solid #fff;
  border-bottom: 5px solid #141414;
  border-left: 5px solid #fff;
}
.contact-form .submit.loading .icon-right,
.contact-form .submit.loading .text {
  transform: scale(0);
}
.contact-form .cancel {
  cursor: pointer;
  margin-top: -50px;
  font: 22px/75px 'AvantGardeGothicITCW01X';
  text-decoration: underline;
  letter-spacing: 0.5px;
  font-size: 16px;
  text-decoration: underline;
}
.contact-form .icon-right {
  position: absolute;
  color: #fff;
  font-size: 20px;
  top: 40px;
  left: 40px;
}
.contact-form .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  top: 0;
  visibility: hidden;
  opacity: 0;
  transition: all 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.contact-form .overlay.open {
  visibility: visible;
  opacity: 1;
}
.contact-form .overlay.open .choices-wrapper {
  transform: scale(1);
}
.contact-form .choices {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  text-align: left;
  padding: 40px 0;
}
.contact-form .choices-wrapper {
  transition: all 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: scale(0);
  position: absolute;
  width: 100%;
  height: 100%;
}
.contact-form .line {
  padding: 4px 50px;
  font-size: 32px;
}
.contact-form .line:hover {
  background-color: #f4f4f4;
  cursor: pointer;
}
.contact-form .line.active {
  color: #d6243d;
}
@media (max-width: 1024px) {
  .contact-form .line {
    font-size: 18px;
    min-width: 220px;
    padding: 4px 30px;
    line-height: 36px;
  }
}
.contact-form .second-part {
  margin-top: -20px;
  display: none;
}
.contact-form .last-part {
  display: none;
}
.contact-form .contenteditable {
  display: inline-block;
  min-width: 110px;
  max-width: 600px;
}
@media (max-width: 1024px) {
  .contact-form .contenteditable {
    max-width: 88%;
  }
}
.contact-form .tryagain {
  transform: scale(1.5);
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.contact-form .tryagainend {
  transform: scale(1);
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.contact-form:after {
  content: "";
  display: table;
  clear: both;
}
.clients-wrapper {
  background-color: #131313;
  padding: 60px 10px;
  z-index: 0;
  position: relative;
  zoom: 1;
  overflow: hidden;
}
.clients-wrapper:after,
.clients-wrapper:before {
  content: "";
  display: table;
}
.clients-wrapper:after {
  clear: both;
}
.clients-wrapper .clients {
  list-style-type: none;
  display: inline-block;
  font-size: 65px;
}
.clients-wrapper li {
  vertical-align: middle;
  display: table-cell;
  margin-bottom: 20px;
  margin-top: 20px;
  width: 130px;
  color: #fff;
}
@media (max-width: 1400px) {
  .clients-wrapper li {
    max-width: 8%;
    display: inline-block;
    max-width: none;
  }
}
.icon-client-aesop {
  font-size: 23px;
  display: block;
  margin-top: -10px;
}
.icon-client-gumtree {
  font-size: 66px;
  margin-left: -25px;
}
@media (max-width: 1024px) {
  .icon-client-gumtree {
    margin-left: 0;
  }
}
.icon-client-hcf {
  font-size: 86px;
}
.icon-client-alleasing {
  font-size: 87px;
}
.icon-client-mitsubishi {
  font-size: 60px;
}
.icon-client-unsw {
  font-size: 88px;
}
.icon-client-quay {
  font-size: 88px;
  margin-left: -24px;
}
@media (max-width: 1024px) {
  .icon-client-quay {
    margin-left: 0;
  }
}
.icon-client-ebay {
  font-size: 84px;
  margin-left: 13px;
}
@media (max-width: 1024px) {
  .icon-client-ebay {
    margin-left: 0;
  }
}
.icon-client-ebay-classifieds {
  font-size: 88px;
  margin-left: -30px;
}
@media (max-width: 1024px) {
  .icon-client-ebay-classifieds {
    margin-left: 0;
  }
}
.icon-client-redcross {
  font-size: 60px;
}
.icon-client-bresic-witney {
  font-size: 17px;
  top: -19px;
  position: relative;
}
.icon-client-pernod-ricard {
  font-size: 42px;
  position: relative;
  top: -12px;
}
.icon-client-simon-johnson {
  font-size: 10px;
  position: relative;
  top: -20px;
}
.icon-client-sonoma {
  font-size: 60px;
  margin-left: -20px;
}
@media (max-width: 1024px) {
  .icon-client-sonoma {
    margin-left: 0;
  }
}
.clients-wrapper li.icon-client-clemengerbbdo {
  font-size: 88px;
}
@media (max-width: 455px) {
  .clients-wrapper li.icon-client-clemengerbbdo {
    display: none;
  }
}
.panel {
  padding-top: 100px;
  padding-bottom: 110px;
  color: #0c0c0c;
  position: relative;
  background-color: #fff;
  overflow: hidden;
}
.panel.light-grey {
  background-color: #f1f1f1;
}
.panel.dark {
  background-color: #141414;
  color: #fff;
}
.panel.dark p,
.panel.dark .title,
.panel.dark .label {
  color: #fff;
}
@media (max-width: 1024px) {
  .panel {
    padding-top: 80px;
  }
}
@media (max-width: 768px) {
  .panel {
    padding-top: 40px;
  }
  .panel .para-sub-title {
    margin-top: 0;
  }
}
.panel .text-container {
  max-width: 618px;
  margin: auto;
  position: relative;
  z-index: 2;
  box-sizing: content-box;
  padding-left: 20px;
  padding-right: 20px;
}
@media (max-width: 768px) {
  .panel .text-container {
    max-width: 500px;
  }
}
@media (smallmobile) {
  .panel .text-container {
    width: auto;
  }
}
.panel p {
  margin: 0px;
  text-align: left;
  font: 100 20px/1.6 'AvantGardeGothicITCW01X';
  letter-spacing: -0.2px;
  color: #0c0c0c;
}
@media (max-width: 768px) {
  .panel p {
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0.05px;
    text-align: center;
  }
}
.panel .para-in-first {
  margin-bottom: 98px;
}
@media (max-width: 1024px) {
  .panel .para-in-first {
    margin-bottom: 40px;
    margin-top: 40px;
  }
}
@media (smallmobile) {
  .panel .para-in-first {
    margin-top: 0;
  }
}
.half {
  width: 50%;
  display: block;
  position: relative;
  height: 510px;
  float: left;
  color: #fff;
}
.half .slick-slide {
  height: 510px;
}
.half .text-wrapper {
  padding-left: 10%;
  padding-right: 10%;
}
.half .align-para {
  min-height: 140px;
}
.half .align-para ++breakpoint $small-mobile {
  min-height: 100px;
  margin-bottom: 20px;
}
.hover-effect .half:before {
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  background-color: #000;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  height: 100%;
  width: 100%;
  opacity: 0;
}
.hover-effect .half:hover:before {
  opacity: 0.5;
}
@media (max-width: 768px) {
  .half {
    color: #b22222;
    width: 100%;
    height: 360px;
    float: none;
    overflow: hidden;
  }
  .half:last-child {
    margin-bottom: -1px;
  }
  .half .slick-slide {
    height: 360px;
  }
  .half .text-wrapper {
    padding-left: 2%;
    padding-right: 2%;
  }
  .half p {
    padding-left: 5px;
    padding-right: 5px;
  }
}
.bec {
  background-image: url("../images/peoples/services-people-bec.jpg");
}
.brett {
  background-image: url("../images/peoples/services-people-brett.jpg");
}
.evan {
  background-image: url("../images/peoples/services-people-evan.jpg");
}
.hugo {
  background-image: url("../images/peoples/services-people-hugo.jpg");
}
.knotty {
  background-image: url("../images/peoples/services-people-knotty.jpg");
}
.jordan {
  background-image: url("../images/peoples/services-people-jordan.jpg");
}
.marty {
  background-image: url("../images/peoples/services-people-marty.jpg");
}
.pierre {
  background-image: url("../images/peoples/services-people-pierre.jpg");
}
.ross {
  background-image: url("../images/peoples/services-people-ross.jpg");
}
.half.bec {
  background-image: url("../images/peoples/people-bec.jpg");
}
.half.brett {
  background-image: url("../images/peoples/people-brett.jpg");
}
.half.evan {
  background-image: url("../images/peoples/people-evan.jpg");
}
.half.hugo {
  background-image: url("../images/peoples/people-hugo.jpg");
}
.half.jordan {
  background-image: url("../images/peoples/people-jordan.jpg");
}
.half.knotty {
  background-image: url("../images/peoples/people-knotty.jpg");
}
.half.marty {
  background-image: url("../images/peoples/people-marty.jpg");
}
.half.pierre {
  background-image: url("../images/peoples/people-pierre.jpg");
}
.half.ross {
  background-image: url("../images/peoples/people-ross.jpg");
}
.circle-icons {
  margin: 96px auto 130px auto;
  max-width: 1400px;
  zoom: 1;
}
.circle-icons:after,
.circle-icons:before {
  content: "";
  display: table;
}
.circle-icons:after {
  clear: both;
}
@media (smallmobile) {
  .circle-icons {
    margin-top: 80px;
    margin-bottom: 80px;
  }
}
.circle-icons > div {
  position: relative;
  z-index: 0;
  float: left;
  font-size: 18px;
  font-weight: bold;
  margin-top: 52px;
  max-width: 200px;
  width: 14.28%;
  min-width: 140px;
  text-align: center;
  height: 180px;
}
@media (max-width: 1024px) {
  .circle-icons > div {
    max-width: 400px;
    width: 33.3%;
  }
}
@media (smallmobile) {
  .circle-icons > div {
    width: 50%;
    height: 130px;
  }
}
.circle-icons [class^="icon-"],
.circle-icons [class*=" icon-"] {
  font-size: 55px;
  margin-bottom: 10px;
}
.circle-icons [class^="icon-"]:after,
.circle-icons [class*=" icon-"]:after {
  background-color: #fff;
  border-radius: 50%;
  content: "";
  width: 110px;
  height: 110px;
  position: absolute;
  top: -25px;
  left: 50%;
  margin-left: -55px;
  z-index: -1;
}
@media (smallmobile) {
  .circle-icons [class^="icon-"],
  .circle-icons [class*=" icon-"] {
    font-size: 30px;
    margin-bottom: 40px;
  }
  .circle-icons [class^="icon-"]:after,
  .circle-icons [class*=" icon-"]:after {
    width: 70px;
    height: 70px;
    top: -20px;
    margin-left: -35px;
  }
}
.bullet-list {
  font: 100 17px/1.5 'AvantGardeGothicITCW01X';
  letter-spacing: 0.5px;
  color: #131313;
  text-align: left;
  list-style-type: none;
  padding-top: 10px;
  padding-left: 40px;
}
.bullet-list li {
  padding-top: 20px;
}
.home-page-panel {
  padding-bottom: 150px;
  padding-top: 150px;
}
@media (max-width: 768px) {
  .home-page-panel {
    padding-bottom: 50px;
    padding-top: 80px;
  }
}
.home-page-panel .title {
  max-width: 600px;
}
.home-page-panel p.index-first-para {
  max-width: 500px;
}
.covervid-container {
  min-height: 300px;
  transition: min-height 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  overflow: hidden;
  position: relative;
}
@media (max-width: 768px) {
  .covervid-container {
    background-image: url("../images/hero.jpg");
    background-size: cover;
  }
}
.covervid-container video,
.covervid-container img {
  width: 100%;
}
.hero {
  height: 720px;
  max-height: 78vh;
  -webkit-transition: max-height 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: max-height 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  position: relative;
  overflow: hidden;
}
.hero .cover {
  background-image: url("../images/hero.jpg");
  height: 720px;
  max-height: 78vh;
}
@media (min-width: 768px) {
  .hero .cover {
    position: fixed;
    width: calc(100% - 30px);
  }
}
@media (max-width: 768px) {
  .hero {
    background-attachment: initial;
  }
}
@media (max-width: 1024px) and (min-width: 500px) {
  .hero .cover,
  .hero {
    max-height: 46vh;
  }
}
.covervid-wrapper {
  position: absolute;
  top: 0px;
  width: 100%;
}
.covervid-video {
  cursor: url("../images/cursor.png"), auto;
  width: 100%;
  display: block;
}
#svg_pollen {
  padding: 5px;
  width: 100%;
}
#svg_pollen path,
#svg_pollen rect {
  fill: #fff;
}
p.index-first-para {
  max-width: 46%;
  display: inline-block;
  text-align: center;
}
@media (max-width: 1024px) {
  p.index-first-para {
    max-width: 90%;
  }
}
@media (max-width: 768px) {
  p.index-first-para {
    max-width: 70%;
  }
}
.second-title {
  margin-bottom: 24px;
}
.howwework {
  background-image: url("../images/how-we-work.jpg");
}
.peter-gilmore {
  background-image: url("../images/projects/work-hero-peter-gilmore.jpg");
  position: relative;
}
.peter-gilmore:after {
  background-image: url("../images/fwa_motd_topleft.png");
  width: 68px;
  height: 68px;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}
.aesop-hero {
  background-image: url("../images/projects/work-hero-easop.jpg");
}
.aesop-hero h2,
.aesop-hero p,
.aesop-hero span,
.aesop-hero .button {
  color: #131313 !important;
}
@media (min-width: 769px) {
  .aesop-hero h2 {
    min-width: 500px;
  }
}
@media (min-width: 1025px) {
  .aesop-hero.homepage-carousel a:last-child {
    background-color: #edede1;
  }
}
@media (max-width: 1024px) {
  .aesop-hero.homepage-carousel a:last-child {
    position: relative;
    display: block !important;
    font-size: 14px;
    margin: 12px auto 0 auto !important;
  }
  .aesop-hero.homepage-carousel a:last-child:after {
    position: absolute;
    bottom: 10px;
    content: '';
    background-color: #131313;
    height: 1px;
    right: 27px;
    left: 27px;
  }
}
.gumtree-hero {
  background-image: url("../images/projects/work-hero-gumtree.jpg");
}
.dolmio-hero {
  background-image: url("../images/projects/work-hero-dolmio.jpg");
}
.ebay-hero {
  background-image: url("../images/projects/work-hero-ebay-classifieds.jpg");
}
.prezzee-hero {
  background-image: url("../images/projects/work-hero-prezzee.jpg");
}
.quay-hero {
  background-image: url("../images/projects/work-hero-quay02.jpg");
  position: relative;
}
.quay-hero:after {
  background-image: url("../images/awwwards.png");
  background-repeat: no-repeat;
  width: 70px;
  height: 105px;
  content: '';
  position: absolute;
  left: 0;
  top: 50px;
  z-index: 2;
}
@media (max-width: 768px) {
  .quay-hero:after {
    top: 20px;
    background-size: 35px auto;
  }
}
.quay-hero:before {
  background-image: url("../images/developer-award-ribbon.jpg");
  background-repeat: no-repeat;
  width: 54px;
  height: 160px;
  content: '';
  position: absolute;
  left: 0;
  top: 200px;
  z-index: 2;
}
@media (max-width: 768px) {
  .quay-hero:before {
    top: 80px;
    background-size: 27px auto;
  }
}
.about .title {
  max-width: 1010px;
}
.about .people-working {
  background-image: url("../images/about/people-working.jpg");
}
.about .laptop {
  background-image: url("../images/about/laptop.jpg");
}
.about .sofa {
  background-image: url("../images/about/sofa.jpg");
}
.about .people-working p {
  min-width: 300px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) {
  .about .contactLink .second-title {
    max-width: 300px;
    margin: 0 auto 30px auto;
  }
}
.about .replaceOnMobile {
  background: url("../images/about/ross-bec.jpg") center;
  background-size: cover;
}
@media (max-width: 768px) {
  .about .replaceOnMobile {
    height: 360px;
  }
  .about .replaceOnMobile + .panel {
    padding-top: 55px;
    padding-bottom: 55px;
  }
  .about .replaceOnMobile img {
    display: none;
  }
}
.services .title,
.services .second-title {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.services section {
  padding-left: 365px;
  padding-top: 110px;
  position: relative;
  max-width: 925px;
  box-sizing: border-box;
  margin: 0 auto;
  text-align: left;
}
@media (max-width: 768px) {
  .services section {
    padding-top: 250px;
    padding-left: 15px;
    padding-right: 15px;
  }
}
.services .tag {
  font-size: 18px;
  line-height: 18px;
  margin-bottom: 20px;
}
.services .plan {
  background-image: url("../images/services/plan.svg");
}
.services .discover {
  background-image: url("../images/services/discover.svg");
}
.services .execute {
  background-image: url("../images/services/execute.svg");
}
.services .create {
  background-image: url("../images/services/create.svg");
}
.services .analyse {
  background-image: url("../images/services/analyse.svg");
}
.services .communicate {
  background-image: url("../images/services/communicate.svg");
}
.services .service-design {
  background-repeat: no-repeat;
  background-size: 220px;
  position: absolute;
  height: 350px;
  width: 365px;
  left: 30px;
  top: 170px;
}
@media (max-width: 768px) {
  .services .service-design {
    background-size: 150px;
    background-position: center;
    height: 150px;
    width: 100%;
    left: 0;
    top: 70px;
  }
}
@media (max-width: 768px) {
  .services .table-center {
    height: 350px;
  }
  .services .carousel-container .align-para {
    padding-left: 5px;
    padding-right: 5px;
  }
}
.services .services-list {
  background-color: #f5f5f1;
  padding-top: 50px;
}
.services .services-list ul {
  font-size: 16px;
  list-style-position: inside;
  line-height: 32px;
  margin-top: 45px;
}
.services .services-list p {
  margin-right: 70px;
}
@media (max-width: 768px) {
  .services .services-list {
    text-align: center;
    padding-top: 95px;
  }
  .services .services-list section,
  .services .services-list p {
    text-align: center;
  }
  .services .services-list p {
    margin-right: 0;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
  .services .services-list ul {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    list-style-type: none;
  }
}
.services .people-working p {
  min-width: 300px;
}
.services .second-title + .text-container {
  margin-top: 50px;
}
.services .replaceOnMobile {
  background: url("../images/services/people-working.jpg") center;
  background-size: cover;
}
@media (max-width: 768px) {
  .services .replaceOnMobile {
    height: 360px;
  }
  .services .replaceOnMobile + .panel {
    padding-top: 55px;
    padding-bottom: 95px;
  }
  .services .replaceOnMobile img {
    display: none;
  }
}
.sem .header .title {
  padding-top: 194px;
  max-width: 400px;
  margin-top: 0;
}
.sem .title {
  max-width: 800px;
  margin-bottom: 40px;
  margin-top: 40px;
}
.sem .title + .goto {
  margin-top: 40px;
}
@media (min-width: 769px) {
  .sem .title + .goto {
    margin-top: -40px;
  }
}
.sem .no-margin-bottom {
  margin-bottom: 0;
}
.sem .goto {
  margin-bottom: 40px;
}
.sem .panel {
  padding-top: 40px;
}
.sem .panel .para-in-first {
  margin-bottom: 40px;
  margin-top: 40px;
}
.user-experience-design .header {
  background-image: url("../images/sem/user-experience.jpg");
}
.digital-strategy .header {
  background-image: url("../images/sem/digital-strategy.jpg");
}
.mobile-tablet-application .header {
  background-image: url("../images/sem/mobile-tablet-application.jpg");
}
@media (max-width: 768px) {
  .work-page .title {
    max-width: 400px;
  }
}
.studycase {
  overflow: hidden;
  margin: 0 auto;
  background-color: #fff;
}
@media (max-width: 768px) {
  .studycase {
    overflow-y: scroll /* has to be scroll, not auto */;
    -webkit-overflow-scrolling: touch;
  }
}
.studycase .header .title {
  max-width: 600px;
  margin-top: 50px;
}
@media (max-width: 768px) {
  .studycase .header .title {
    max-width: 400px;
  }
}
.studycase .temps {
  background-position: center 0;
  background-repeat: no-repeat;
  background-size: 1372px;
  width: 100%;
  height: 8192px;
  position: absolute;
  top: 0;
  z-index: 8;
  opacity: 0.4;
}
.studycase .panel {
  padding-bottom: 0;
}
.studycase .cover {
  width: 100%;
}
.studycase .device-content-wrapper {
  box-sizing: content-box;
  padding: 0 40px;
  margin: 166px auto 0 auto;
  max-width: 1028px;
}
@media (max-width: 1024px) {
  .studycase .device-content-wrapper {
    margin-top: 120px;
  }
}
@media (max-width: 768px) {
  .studycase .device-content-wrapper {
    margin-top: 66px;
  }
}
.studycase .device-content-wrapper img {
  width: 100%;
  display: block;
}
.studycase .underline {
  text-decoration: underline;
}
.studycase .panelfooter {
  position: relative;
  height: 382px;
  background-color: #fff;
}
@media (max-width: 768px) {
  .studycase .panelfooter {
    height: 236px;
  }
}
.studycase .panelfooter .link {
  height: 52px;
  width: 52px;
  background-color: #141414;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  position: absolute;
  margin-left: -26px;
  left: 50%;
  top: 82px;
}
.studycase .panelfooter .link:after {
  content: '';
  position: absolute;
  margin-top: -27px;
  margin-left: -27px;
  z-index: 0;
  top: 50%;
  left: 50%;
  transition: all 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
  width: 54px;
  height: 54px;
  background-color: #fff;
  border-radius: 50%;
  transform: scale(0);
}
.studycase .panelfooter .link.hover:after,
.studycase .panelfooter .link:hover:after {
  transform: scale(1);
}
.studycase .panelfooter .link.hover .text,
.studycase .panelfooter .link:hover .text,
.studycase .panelfooter .link.hover [class^="icon-"],
.studycase .panelfooter .link:hover [class^="icon-"] {
  color: #141414;
  z-index: 3;
}
.studycase .panelfooter .link .icon {
  width: 52px;
  height: 52px;
  margin-left: 13px;
  margin-top: 12px;
}
.studycase .panelfooter .link .icon span {
  color: #fff;
  font-size: 26px;
  top: 13px;
  position: absolute;
  left: 13px;
  z-index: 2;
}
.studycase .panelfooter .footerlink {
  position: absolute;
  text-align: center;
  width: 100%;
  top: 133px;
  font: 22px/75px 'AvantGardeGothicITCW01X';
  text-decoration: underline;
  letter-spacing: 0.5px;
  color: #141414;
}
@media (max-width: 768px) {
  .studycase .panelfooter .footerlink {
    font-size: 16px;
    top: 120px;
  }
}
.studycase .label {
  top: 93px;
}
@media (smallmobile) {
  .studycase .label {
    left: 20px;
    top: 28px;
  }
}
.studycase .project-grid--title p {
  color: #fff;
  font: 100 58px/1.2 'AvantGardeGothicITCW01X';
  color: #131313;
  line-height: 32px;
  font-size: 24px;
}
@media (smallmobile) {
  .studycase .project-grid--title {
    left: 20px;
    bottom: 28px;
  }
  .studycase .project-grid--title p,
  .studycase .project-grid--title h1 {
    font-size: 18px;
    line-height: 18px;
  }
}
.studycase .contact {
  background-color: #141414;
  min-height: 300px;
  padding-top: 107px;
  margin-bottom: -54px;
  padding-bottom: 90px;
  text-align: center;
}
.studycase .contact a {
  color: #75777a;
  text-decoration: none;
}
.studycase .contact p {
  color: #fff;
  text-align: center;
  font-size: 16px;
}
.studycase .logo {
  height: 57px;
  margin: 0 auto 36px auto;
  width: 144px;
}
.studycase .logo svg {
  width: 144px;
  fill: #fff;
}
.studycase .social {
  margin: 37px auto 0 auto;
  display: inline-block;
}
.quote {
  text-align: center;
  margin-left: 20px;
  margin-right: 20px;
  font-size: 22px;
}
.quote cite {
  font: 22px/75px 'AvantGardeGothicITCW01X';
  text-decoration: underline;
  letter-spacing: 0.5px;
}
.quote cite {
  display: block;
  font-style: normal;
}
.quote-icone {
  width: 100px;
  height: 100px;
  background-color: #92c100;
  border-radius: 50%;
  margin: -16px auto 63px auto;
  text-align: center;
}
.quote-icone .icon-quote {
  font-size: 44px;
  color: #fff;
  position: relative;
  top: 19px;
  left: 1px;
}
.study-case .title {
  max-width: 760px;
  margin-bottom: 20px;
}
@media (max-width: 1024px) {
  .study-case .panel {
    padding-bottom: 80px;
  }
}
@media (max-width: 768px) {
  .study-case .panel {
    padding-bottom: 40px;
  }
}
.study-case .small-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 0;
  margin-top: 50px;
}
@media (max-width: 768px) {
  .study-case .small-title {
    font-size: 16px;
  }
}
.study-case img {
  margin: 0 auto;
  max-width: 100%;
}
.study-case .richtext-image {
  height: auto !important;
}
.study-case .column-layout-section .half {
  height: auto;
}
.study-case .column-layout-section .rich-text {
  padding-left: 20px;
  padding-right: 20px;
}
@media (max-width: 768px) {
  .study-case .column-layout-section .rich-text {
    padding-bottom: 10px;
  }
}
.study-case .wide-image-section {
  padding-bottom: 90px;
}
@media (max-width: 1024px) {
  .study-case .wide-image-section {
    padding-bottom: 70px;
  }
}
@media (max-width: 768px) {
  .study-case .wide-image-section {
    padding-bottom: 40px;
  }
}
.study-case .video-section {
  max-width: 1280px;
  margin: 20px auto 90px auto;
}
@media (max-width: 1024px) {
  .study-case .video-section {
    margin-bottom: 80px;
  }
}
@media (max-width: 768px) {
  .study-case .video-section {
    margin-bottom: 40px;
  }
}
.study-case .richtext-image {
  padding-top: 40px;
}
.study-case .richtext-image.right {
  margin-right: 0;
}
.study-case .richtext-image.left {
  margin-left: 0;
}
.study-case .dark {
  background-color: #141414;
  overflow: auto;
  color: #fff;
}
.study-case .dark .small-title,
.study-case .dark p,
.study-case .dark .title,
.study-case .dark .label {
  color: #fff;
}
.study-case .quote-section {
  padding-bottom: 80px;
}
.study-case .dark section {
  padding-top: 80px;
  padding-bottom: 80px;
  background-color: transparent;
}
.mitsubishi p::selection,
.mitsubishi h1::selection,
.mitsubishi h2::selection,
.mitsubishi h3::selection,
.mitsubishi h4::selection {
  background: #e00;
  color: #fff;
}
.mitsubishi .header {
  background-image: url("../images/work/mitsubishi/header-filter.jpg");
}
.mitsubishi .header .title {
  max-width: 700px;
}
.mitsubishi .panel1 .car {
  width: auto;
  float: right;
  max-width: 100%;
  margin-bottom: 200px;
}
@media (max-width: 768px) {
  .mitsubishi .panel1 .car {
    margin-bottom: 0px;
    max-width: 90%;
    margin-top: 77px;
  }
}
.mitsubishi .panel2 .title {
  max-width: 1022px;
}
.mitsubishi .panel3 .title {
  margin-bottom: 0;
}
.mitsubishi .panel4 {
  padding-bottom: 150px;
}
.mitsubishi .panel4 .devices {
  height: 750px;
  margin-top: 100px;
  position: relative;
}
.mitsubishi .panel4 .devices div {
  transition: all 300ms ease-in;
}
.mitsubishi .panel4 .skrollable-before .ipad {
  transform: translate3d(-90%, 0, 0);
}
.mitsubishi .panel4 .skrollable-before .iphone {
  transform: translate3d(90%, 0, 0);
}
.mitsubishi .panel4 .ipad {
  width: 558px;
  height: 756px;
  background-image: url("../images/work/mitsubishi/ipad.png");
  margin-left: -27px;
}
.mitsubishi .panel4 .iphone {
  position: absolute;
  width: 228px;
  height: 479px;
  right: -5px;
  bottom: 0;
  background-image: url("../images/work/mitsubishi/iphone.png");
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
  .mitsubishi .panel4 .devices {
    height: 376px;
    margin-left: auto;
    max-width: 260px;
    margin-right: auto;
    margin-top: 56px;
  }
  .mitsubishi .panel4 .ipad {
    max-width: 280px;
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .mitsubishi .panel4 .iphone {
    max-width: 120px;
    height: 256px;
    margin-left: 20px;
    right: -10px;
    background-size: 100%;
    background-repeat: no-repeat;
  }
}
.redcross {
  overflow: hidden;
}
.redcross p::selection,
.redcross h1::selection,
.redcross h2::selection,
.redcross h3::selection,
.redcross h4::selection {
  background: #e00;
  color: #fff;
}
.redcross .header {
  background-image: url("../images/work/redcross/header-filter.jpg");
}
.redcross .header .title {
  max-width: 400px;
}
@media (smallmobile) {
  .redcross .title {
    font-size: 30px;
    line-height: 36px;
  }
}
.redcross .header .title {
  font-size: 32px;
  line-height: 38px;
}
.redcross .panel1 .title {
  max-width: 870px;
}
.redcross .panel1 .nuclearTarget-container {
  margin-top: 126px;
  background-image: url("../images/work/redcross/nuclear-target-bg.png");
  background-repeat: repeat-x;
  background-size: auto 100%;
}
.redcross .panel1 .nuclearTarget {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 981px;
}
@media (max-width: 1024px) {
  .redcross .panel1 .nuclearTarget-container {
    margin-top: 80px;
  }
}
.redcross .panel2 {
  overflow: visible;
}
.redcross .panel2 .title {
  max-width: 770px;
}
.redcross .panel2 .para-sub-title {
  margin-bottom: 167px;
  z-index: 2;
  position: relative;
}
@media (max-width: 768px) {
  .redcross .panel2 .para-sub-title {
    margin-bottom: 70px;
  }
}
.redcross .panel2 .nuclearMap {
  width: 100%;
  display: block;
}
.redcross .panel2 .circleTarget {
  position: absolute;
  right: 31%;
  z-index: 2;
  bottom: 145px;
}
.redcross .panel2 .circleTarget div {
  position: absolute;
}
@media (smallmobile) {
  .redcross .panel2 .circleTarget {
    bottom: 90px;
  }
}
.redcross .panel2 .pin {
  width: 47px;
  height: 61px;
  margin-left: -23.5px;
  margin-top: -26px;
  z-index: 4;
  left: 50%;
  top: 50%;
  background-image: url("../images/work/redcross/pin.png");
}
@media (smallmobile) {
  .redcross .panel2 .pin {
    width: 23px;
    height: 30px;
    margin-left: -12px;
    margin-top: -13px;
    background-size: 100%;
  }
}
.redcross .panel2 .transparent {
  width: 710px;
  height: 710px;
  bottom: -355px;
  left: -355px;
  opacity: 0.8;
}
@media (max-width: 1024px) {
  .redcross .panel2 .transparent {
    width: 400px;
    height: 400px;
    bottom: -200px;
    left: -200px;
  }
}
@media (smallmobile) {
  .redcross .panel2 .transparent {
    width: 150px;
    height: 150px;
    bottom: -75px;
    left: -75px;
  }
}
.redcross .panel2 .round1,
.redcross .panel2 .round2,
.redcross .panel2 .round3,
.redcross .panel2 .round4 {
  border-radius: 50%;
}
.redcross .panel2 .round1 {
  background-color: #ff6248;
  width: 100%;
  height: 100%;
  transition: all 0.5s;
}
.redcross .panel2 .round2 {
  background-color: #f4172b;
  width: 75%;
  height: 75%;
  left: 12.5%;
  top: 12.5%;
  transition: all 0.5s 0.1s;
}
.redcross .panel2 .round3 {
  background-color: #b90000;
  width: 50%;
  height: 50%;
  left: 25%;
  top: 25%;
  transition: all 0.5s 0.2s;
}
.redcross .panel2 .round4 {
  background-color: #8a1010;
  width: 25%;
  height: 25%;
  left: 37.5%;
  top: 37.5%;
  transition: all 0.5s 0.3s;
}
.redcross .panel3 {
  min-height: 1300px;
  overflow: visible;
}
.redcross .panel3 .para-in-first {
  margin-top: 176px;
}
@media (max-width: 1024px) {
  .redcross .panel3 .para-in-first {
    margin-top: 20px;
  }
}
@media (smallmobile) {
  .redcross .panel3 .para-in-first {
    margin-top: 0;
  }
}
.redcross .panel3 .title {
  max-width: 800px;
}
.redcross .panel3 .social-posts {
  max-width: 100%;
  width: 892px;
  height: 787px;
  margin-left: -435px;
  position: absolute;
  left: 50%;
  bottom: -425px;
  z-index: 2;
}
.redcross .panel3 .social-posts div {
  position: absolute;
}
@media (max-width: 1024px) {
  .redcross .panel3 {
    min-height: 1000px;
  }
}
@media (max-width: 768px) {
  .redcross .panel3 {
    min-height: 830px;
    padding-top: 80px;
  }
  .redcross .panel3 .social-posts {
    margin-top: 56px;
  }
}
@media (smallmobile) {
  .redcross .panel3 {
    min-height: 760px;
  }
  .redcross .panel3 .social-posts {
    transform: scale(0.5);
    margin-left: -305px;
  }
}
.redcross .panel4 {
  margin-bottom: 150px;
  margin-top: 284px;
}
.redcross .panel4 .title {
  max-width: 680px;
}
.redcross .panel4 .mac {
  text-align: center;
  margin: 70px 40px 0 40px;
}
.redcross .panel4 .mac img {
  max-width: 1285px;
  width: 100%;
  display: inline-block;
}
@media (smallmobile) {
  .redcross .panel4 {
    margin-top: 154px;
  }
}
.redcross #post1 {
  width: 444px;
  height: 208px;
  left: 338px;
  top: 199px;
  z-index: 15;
  background-image: url("../images/work/redcross/post1.jpg");
}
.redcross #post2 {
  width: 303px;
  height: 92px;
  left: 83px;
  top: 435px;
  z-index: 14;
  background-image: url("../images/work/redcross/post2.jpg");
}
.redcross #post3 {
  width: 312px;
  height: 146px;
  left: 46px;
  top: 312px;
  z-index: 13;
  background-image: url("../images/work/redcross/post3.jpg");
}
.redcross #post4 {
  width: 271px;
  height: 127px;
  left: 199px;
  top: 224px;
  z-index: 12;
  background-image: url("../images/work/redcross/post4.jpg");
}
.redcross #post5 {
  width: 279px;
  height: 132px;
  left: 126px;
  top: 21px;
  z-index: 11;
  background-image: url("../images/work/redcross/post5.jpg");
}
.redcross #post6 {
  width: 318px;
  height: 119px;
  left: 498px;
  top: 422px;
  z-index: 10;
  background-image: url("../images/work/redcross/post6.jpg");
}
.redcross #post7 {
  width: 279px;
  height: 132px;
  left: 242px;
  top: 512px;
  z-index: 9;
  background-image: url("../images/work/redcross/post7.jpg");
}
.redcross #post8 {
  width: 213px;
  height: 65px;
  left: 567px;
  top: 550px;
  z-index: 8;
  background-image: url("../images/work/redcross/post8.jpg");
}
.redcross #post9 {
  width: 214px;
  height: 65px;
  left: 677px;
  top: 390px;
  z-index: 7;
  background-image: url("../images/work/redcross/post9.jpg");
}
.redcross #post10 {
  width: 214px;
  height: 65px;
  left: 522px;
  top: 54px;
  z-index: 6;
  background-image: url("../images/work/redcross/post10.jpg");
}
.redcross #post11 {
  width: 159px;
  height: 48px;
  left: 0px;
  top: 505px;
  z-index: 5;
  background-image: url("../images/work/redcross/post11.jpg");
}
.redcross #post12 {
  width: 159px;
  height: 48px;
  left: 382px;
  top: 0px;
  z-index: 4;
  background-image: url("../images/work/redcross/post12.jpg");
}
.redcross #post13 {
  width: 211px;
  height: 64px;
  left: 494px;
  top: 166px;
  z-index: 3;
  background-image: url("../images/work/redcross/post13.jpg");
}
.redcross #post14 {
  width: 212px;
  height: 65px;
  left: 240px;
  top: 137px;
  z-index: 2;
  background-image: url("../images/work/redcross/post14.jpg");
}
.redcross #post15 {
  width: 151px;
  height: 46px;
  left: 85px;
  top: 258px;
  z-index: 1;
  background-image: url("../images/work/redcross/post15.jpg");
}
.woolworths .temps {
  background-image: url("../images/temp/woolworths.jpg");
}
.woolworths p::selection,
.woolworths h1::selection,
.woolworths h2::selection,
.woolworths h3::selection,
.woolworths h4::selection,
.woolworths .title::selection {
  background: #058543;
  color: #fff;
}
.woolworths .header {
  background-image: url("../images/work/woolworths/header-filter.jpg");
}
.woolworths .panel1 {
  position: relative;
  z-index: 2;
}
.woolworths .panel1 .christmas-cheese {
  background: url("../images/work/woolworths/christmas-cheese-bg.png") repeat-x;
  background-size: auto 100%;
  margin-top: 60px;
  text-align: center;
}
.woolworths .panel1 .christmas-cheese img {
  max-width: 960px;
  width: 100%;
  display: block;
  margin: 0 auto;
}
.woolworths .panel2 {
  overflow: visible;
}
.woolworths .panel2 .title span {
  display: block;
}
.woolworths .panel2 .para-sub-title {
  z-index: 2;
  position: relative;
}
.woolworths .panel2 .recipes {
  margin-top: 100px;
  width: 100%;
}
@media (smallmobile) {
  .woolworths .panel2 .recipes {
    margin-top: 50px;
    margin-bottom: 50px;
  }
}
.woolworths .panel3 {
  text-align: center;
}
.woolworths .panel3.dark {
  background-color: #000;
}
.woolworths .panel3 .title {
  max-width: 680px;
}
.woolworths .panel4 .devices {
  height: 750px;
  max-width: 900px;
  margin-top: 100px;
  position: relative;
}
@media (smallmobile) {
  .woolworths .panel4 .devices {
    margin-bottom: 100px;
  }
}
.woolworths .panel4 .iphone,
.woolworths .panel4 .iphone2,
.woolworths .panel4 .iphone3 {
  background-image: url("../images/work/woolworths/iphone.png");
  background-size: 100%;
  position: absolute;
  top: 40px;
  width: 253px;
  height: 544px;
  background-repeat: no-repeat;
}
.woolworths .panel4 .iphone .content,
.woolworths .panel4 .iphone2 .content,
.woolworths .panel4 .iphone3 .content {
  background-size: 100%;
  position: absolute;
  width: 211px;
  height: 376px;
  top: 85px;
  left: 21px;
}
.woolworths .panel4 .iphone {
  left: 0;
}
.woolworths .panel4 .iphone .content {
  background-image: url("../images/work/woolworths/iphone1.jpg");
}
.woolworths .panel4 .iphone2 {
  margin-left: -126px;
  left: 50%;
  z-index: 2;
}
.woolworths .panel4 .iphone2 .content {
  background-image: url("../images/work/woolworths/iphone2.jpg");
}
.woolworths .panel4 .iphone3 {
  right: 0;
}
.woolworths .panel4 .iphone3 .content {
  background-image: url("../images/work/woolworths/iphone3.jpg");
}
@media (max-width: 768px) {
  .woolworths .panel4 {
    min-height: 0;
  }
  .woolworths .panel4 .devices {
    height: 590px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 56px;
  }
  .woolworths .panel4 .iphone {
    left: 20px;
  }
  .woolworths .panel4 .iphone3 {
    right: 20px;
  }
}
@media (smallmobile) {
  .woolworths .panel4 .devices {
    margin-top: 0;
    height: 315px;
  }
  .woolworths .panel4 .iphone,
  .woolworths .panel4 .iphone2,
  .woolworths .panel4 .iphone3 {
    width: 127px;
    height: 272px;
  }
  .woolworths .panel4 .iphone .content,
  .woolworths .panel4 .iphone2 .content,
  .woolworths .panel4 .iphone3 .content {
    width: 106px;
    height: 188px;
    top: 43px;
    left: 11px;
  }
  .woolworths .panel4 .iphone2 {
    margin-left: -63px;
  }
  .woolworths .panel4 .iphone3 {
    width: 127px;
  }
}
.ebay p::selection,
.ebay h1::selection,
.ebay h2::selection,
.ebay h3::selection,
.ebay h4::selection,
.ebay .title::selection {
  background: #058543;
  color: #fff;
}
.ebay .header {
  background-image: url("../images/work/ebay/header-filter.jpg");
}
@media (smallmobile) {
  .ebay .title {
    font-size: 30px;
    line-height: 36px;
  }
}
.ebay .bar {
  background-image: url("../images/work/ebay/bar.png");
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  height: 20px;
}
.ebay .panel1 {
  min-height: 580px;
  overflow: visible;
}
@media (max-width: 768px) {
  .ebay .panel1 {
    min-height: 300px;
  }
  .ebay .panel1 .title {
    margin-bottom: 36px;
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (smallmobile) {
  .ebay .panel1 {
    min-height: 350px;
  }
}
.ebay .panel2 {
  overflow: visible;
  padding-bottom: 80px;
}
.ebay .panel2 .title {
  max-width: 600px;
}
.ebay .panel2 .steps {
  margin: 200px 40px 0 40px;
}
.ebay .panel2 .steps img {
  margin: 0 auto;
  max-width: 765px;
  width: 100%;
  display: block;
}
@media (max-width: 1024px) {
  .ebay .panel2 {
    padding-top: 120px;
  }
  .ebay .panel2 .steps {
    margin-top: 100px;
  }
}
@media (max-width: 768px) {
  .ebay .panel2 {
    padding-bottom: 20px;
  }
}
@media (smallmobile) {
  .ebay .panel2 {
    padding-top: 45px;
  }
}
.ebay .panel3 {
  text-align: center;
}
.ebay .panel3.dark {
  background-color: #000;
}
.ebay .panel3 .title {
  margin-bottom: 0;
  max-width: 680px;
}
.ebay .panel3 .mac {
  max-width: 100%;
  max-width: calc(100% - 40px);
  margin-top: 87px;
  margin-bottom: -5px;
}
@media (max-width: 768px) {
  .ebay .panel3 {
    min-height: 10px;
  }
  .ebay .panel3 .mac {
    margin-top: 60px;
  }
}
.ebay .panel4 {
  text-align: center;
}
.ebay .panel4 .screenshot {
  margin: 100px auto;
  max-width: 100%;
  max-width: calc(100% - 40px);
}
@media (smallmobile) {
  .ebay .panel4 .screenshot {
    margin: 50px 20px;
  }
}
.ebay .facecontainer {
  width: 992px;
  margin-left: -496px;
  position: absolute;
  left: 50%;
  bottom: 238px;
}
@media (max-width: 768px) {
  .ebay .facecontainer {
    transform: scale(0.6);
    bottom: 116px;
    z-index: 3;
  }
}
@media (smallmobile) {
  .ebay .facecontainer {
    transform: scale(0.3);
    bottom: 70px;
    z-index: 3;
  }
}
.ebay .facecontainer div {
  position: absolute;
}
.ebay #face1 {
  width: 193px;
  height: 193px;
  left: 456px;
  top: 98px;
  z-index: 11;
  background-image: url("../images/work/ebay/face1.png");
}
.ebay #face2 {
  width: 86px;
  height: 86px;
  left: 805px;
  top: 137px;
  z-index: 10;
  background-image: url("../images/work/ebay/face2.png");
}
.ebay #face3 {
  width: 119px;
  height: 119px;
  left: 595px;
  top: 233px;
  z-index: 9;
  background-image: url("../images/work/ebay/face3.png");
}
.ebay #face4 {
  width: 119px;
  height: 119px;
  left: 560px;
  top: 0px;
  z-index: 8;
  background-image: url("../images/work/ebay/face4.png");
}
.ebay #face5 {
  width: 119px;
  height: 120px;
  left: 381px;
  top: 209px;
  z-index: 7;
  background-image: url("../images/work/ebay/face5.png");
}
.ebay #face6 {
  width: 120px;
  height: 120px;
  left: 171px;
  top: 195px;
  z-index: 6;
  background-image: url("../images/work/ebay/face6.png");
}
.ebay #face7 {
  width: 119px;
  height: 119px;
  left: 873px;
  top: 194px;
  z-index: 5;
  background-image: url("../images/work/ebay/face7.png");
}
.ebay #face8 {
  width: 119px;
  height: 119px;
  left: 636px;
  top: 144px;
  z-index: 4;
  background-image: url("../images/work/ebay/face8.png");
}
.ebay #face9 {
  width: 78px;
  height: 78px;
  left: 323px;
  top: 108px;
  z-index: 3;
  background-image: url("../images/work/ebay/face9.png");
}
.ebay #face10 {
  width: 120px;
  height: 119px;
  left: 0px;
  top: 168px;
  z-index: 2;
  background-image: url("../images/work/ebay/face10.png");
}
.ebay .adContainer {
  margin: 50px auto -18px auto;
  width: 504px;
  position: relative;
}
.ebay .adContainer div {
  position: absolute;
}
@media (max-width: 768px) {
  .ebay .adContainer {
    margin: 0px auto 45px auto;
  }
}
@media (smallmobile) {
  .ebay .adContainer {
    transform: scale(0.5);
    transform-origin: 25%;
    margin-top: 20px;
    margin-top: 30px;
    z-index: 2;
  }
}
.ebay #cursor {
  width: 17px;
  height: 22px;
  left: 457px;
  top: 90px;
  z-index: 4;
  background-image: url("../images/work/ebay/cursor.png");
}
.ebay #scale {
  width: 29px;
  height: 24px;
  left: 474px;
  top: 76px;
  z-index: 3;
  background-image: url("../images/work/ebay/scale.png");
}
.ebay #rotate {
  width: 31px;
  height: 26px;
  left: 206px;
  top: 2px;
  z-index: 2;
  background-image: url("../images/work/ebay/rotate.png");
}
.ebay #ad {
  width: 472px;
  height: 98px;
  left: 1px;
  top: 15px;
  z-index: 1;
  background-image: url("../images/work/ebay/ad.png");
}
@media (smallmobile) {
  .ebay #ad {
    left: -50px;
  }
}
.gumtree .olive {
  background-color: #f1f1f1;
}
.gumtree .green {
  background-color: #f7f8eb;
}
.gumtree p::selection,
.gumtree h1::selection,
.gumtree h2::selection,
.gumtree h3::selection,
.gumtree h4::selection,
.gumtree .title::selection {
  background: #058543;
  color: #fff;
}
.gumtree .header {
  background-image: url("../images/work/gumtree/header-filter.jpg");
}
.gumtree .panel1 .title {
  max-width: 800px;
}
.gumtree .panel1 .timeline {
  background: url("../images/work/gumtree/mac.png") no-repeat center;
  background-size: 100%;
  width: 100%;
  max-width: 827px;
}
.gumtree .panel1 .timeline-controller {
  position: relative;
  max-width: 827px;
  height: 100%;
  width: 100%;
  margin: 0 auto;
}
.gumtree .panel1 .timeline-bg {
  position: absolute;
  height: 100%;
  top: 0;
  left: -20px;
  background-color: #f7f8eb;
}
.gumtree .panel1 .timeline-wrapper {
  position: relative;
  margin: 0 20px;
}
.gumtree .panel1 .screenshot2 {
  background: url("../images/work/gumtree/screenshot2.png") no-repeat 0 center;
  background-size: 827px;
  max-width: 827px;
  height: 100%;
  position: absolute;
  top: 0;
}
.gumtree .panel1 .screenshot1 {
  width: 100%;
  background: url("../images/work/gumtree/screenshot1.png") no-repeat 0 center;
  background-size: 827px;
  max-width: 827px;
  height: 100%;
  position: absolute;
  top: 0;
}
.gumtree .panel1 .screenshot3 {
  background: url("../images/work/gumtree/screenshot3.png") no-repeat 0 center;
  background-size: 827px;
  max-width: 827px;
  height: 100%;
  position: absolute;
  top: 0;
}
.gumtree .panel1 .tempscreen {
  padding: 80px 40px 40px 40px;
  text-align: center;
}
.gumtree .panel1 .tempscreen img {
  margin: 0 auto;
  max-width: 100%;
}
.gumtree .panel2 {
  padding-bottom: 190px;
}
.gumtree .panel2 p.para-in-first {
  margin-top: -6px;
  margin-bottom: 93px;
}
.gumtree .panel2 .title {
  max-width: 700px;
  margin-bottom: 63px;
}
.gumtree .panel2 .reponsive-process {
  position: relative;
  margin-left: -388px;
  min-height: 770px;
}
@media (smallmobile) {
  .gumtree .panel2 {
    padding-bottom: 40px;
  }
}
.gumtree .panel3 {
  padding-top: 288px;
}
.gumtree .panel3 .title {
  max-width: 810px;
  margin-bottom: 290px;
}
@media (max-width: 768px) {
  .gumtree .panel3 {
    padding-top: 145px;
  }
  .gumtree .panel3 .title {
    margin-bottom: 145px;
  }
}
@media (smallmobile) {
  .gumtree .panel3 {
    padding-top: 40px;
  }
  .gumtree .panel3 .title {
    margin-bottom: 60px;
  }
}
.gumtree .panel4 {
  padding-bottom: 188px;
}
@media (max-width: 768px) {
  .gumtree .panel4 {
    padding-bottom: 40px;
  }
}
.gumtree .panel4 p.para-in-first {
  margin-bottom: 5px;
}
.gumtree .panel4 .sub-title {
  margin-top: 22px;
  max-width: 700px;
}
.gumtree .panel4 .ux {
  width: 100%;
}
.gumtree .panel4 .photoshop {
  position: relative;
  max-width: 1272px;
  width: 100%;
  height: 880px;
  margin: 10px auto;
}
.gumtree .panel4 .photoshop .photoshop-main {
  width: 105.817610063%;
  position: absolute;
  left: 7.86163522%;
  top: 88px;
  top: 10%;
  z-index: 1;
}
.gumtree .panel4 .photoshop .photoshop-tools {
  width: 3.380503145%;
  position: absolute;
  top: 124px;
  top: 14.090909091%;
  z-index: 2;
}
.gumtree .panel4 .photoshop .photoshop-panels {
  width: 30.738993711%;
  position: absolute;
  right: -18.474842767%;
  top: 45px;
  top: 5.113636364%;
  z-index: 2;
}
@media (max-width: 1024px) {
  .gumtree .panel4 .photoshop {
    height: 716px;
  }
}
@media (max-width: 768px) {
  .gumtree .panel4 .photoshop {
    height: 550px;
  }
}
@media (smallmobile) {
  .gumtree .panel4 .photoshop {
    height: 370px;
  }
}
@media (max-width: 320px) {
  .gumtree .panel4 .photoshop {
    height: 240px;
  }
}
.gumtree .panel5 {
  text-align: center;
}
.gumtree .panel5 .devices-carousel-container {
  overflow: hidden;
  transition: max-height 1000ms;
  height: 680px;
  padding-top: 90px;
  margin-bottom: 30px;
}
.gumtree .panel5 .devices-carousel-container.ready {
  max-height: 2000px;
}
@media (max-width: 1024px) {
  .gumtree .panel5 .devices-carousel-container {
    height: 516px;
  }
}
@media (max-width: 768px) {
  .gumtree .panel5 .devices-carousel-container {
    height: 390px;
    padding-top: 50px;
  }
}
@media (smallmobile) {
  .gumtree .panel5 .devices-carousel-container {
    height: 290px;
  }
}
@media (max-width: 320px) {
  .gumtree .panel5 .devices-carousel-container {
    height: 220px;
  }
}
.gumtree .panel5 .small-devices {
  display: inline-block;
}
.gumtree .panel5 .small-devices div {
  cursor: pointer;
  width: 80px;
  float: left;
}
.gumtree .panel5 .small-devices div:last-child {
  width: 60px;
  margin-right: 20px;
}
.gumtree .panel5 .small-devices span {
  font-size: 38px;
  color: #8b8b8b;
}
.gumtree .panel5 .small-devices span:hover {
  color: #fff;
}
.gumtree .panel5 .small-devices .active span {
  color: #fff;
}
.gumtree .panel6 {
  padding-bottom: 196px;
}
.gumtree .panel6 .title {
  max-width: 900px;
  margin-bottom: 75px;
}
@media (max-width: 1024px) {
  .gumtree .panel6 {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .gumtree .panel6 .title {
    font-size: 34px;
    line-height: 40px;
  }
}
@media (smallmobile) {
  .gumtree .panel6 {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .gumtree .panel6 .title {
    font-size: 24px;
    line-height: 26px;
    letter-spacing: 0.1px;
  }
}
.gumtree .panelfooter {
  background-color: #141414;
}
.gumtree .panelfooter .footerlink {
  top: 170px;
  color: #fff;
}
.gumtree .panelfooter .link {
  background-color: #fff;
  top: 118px;
}
.gumtree .panelfooter .link .icon {
  margin-left: 0;
}
.gumtree .panelfooter .link .icon span {
  color: #141414;
}
.gumtree .panelfooter .link:hover:after {
  background-color: #141414;
}
.gumtree .panelfooter .link:hover [class^="icon-"] {
  color: #fff;
}
.gumtree .devices-carousel {
  max-width: 2632px;
}
.gumtree .devices-carousel .mbp {
  position: relative;
  z-index: 4;
  display: block;
  max-width: 1263px;
  width: 100%;
  margin-top: 10px;
  height: 700px;
  box-sizing: border-box;
  padding-left: 5px;
  padding-right: 5px;
  margin: 0 auto;
}
.gumtree .devices-carousel .mbp .screen {
  position: absolute;
  left: 153px;
  z-index: 3;
  width: 75.9303246239113%;
  margin-top: 3.32541567695962%;
  left: 12.1140142517815%;
}
.gumtree .devices-carousel .ipad {
  position: relative;
  z-index: 8;
  display: block;
  max-width: 558px;
  width: 44.180522565%;
  box-sizing: border-box;
  padding-left: 5px;
  padding-right: 5px;
  height: 700px;
  margin: 0 auto;
}
.gumtree .devices-carousel .ipad .screen {
  position: absolute;
  z-index: 7;
  width: 78.3154121863799%;
  margin-top: 11.6487455197133%;
  left: 11.2903225806452%;
}
.gumtree .devices-carousel .iphone {
  position: relative;
  z-index: 12;
  display: block;
  max-width: 349px;
  width: 27.632620744%;
  box-sizing: border-box;
  padding-left: 5px;
  padding-right: 5px;
  height: 700px;
  margin: 0 auto;
}
.gumtree .devices-carousel .iphone .screen {
  position: absolute;
  z-index: 11;
  width: 84.8137535816619%;
  margin-top: 30.945558739255%;
  left: 8.02292263610315%;
}
.gumtree .devices-carousel .border {
  position: absolute;
  width: 100%;
  height: auto;
  margin-top: 0;
  top: auto;
  left: 0;
}
.gumtree .responsive-process {
  max-width: 1378px;
  margin: 0 auto;
  position: relative;
  min-height: 770px;
}
@media (max-width: 1024px) {
  .gumtree .responsive-process {
    min-height: 600px;
  }
}
@media (max-width: 768px) {
  .gumtree .responsive-process {
    min-height: 400px;
  }
}
@media (smallmobile) {
  .gumtree .responsive-process {
    min-height: 300px;
  }
}
@media (max-width: 320px) {
  .gumtree .responsive-process {
    min-height: 250px;
  }
}
.gumtree .responsive-process #mac {
  position: absolute;
  width: 827px;
  left: -27%;
  top: 2.83%;
  z-index: 2;
  max-width: 60%;
}
.gumtree .responsive-process #arrow {
  position: absolute;
  width: 747px;
  max-width: 54.2%;
  top: 25.7%;
  right: 40%;
  z-index: 1;
}
.gumtree .responsive-process #devices {
  right: -15%;
  position: absolute;
  width: 716px;
  top: 2.395%;
  z-index: 8;
  max-width: 52%;
}
.gumtree .responsive-process #devices img {
  position: absolute;
}
.gumtree .responsive-process #android {
  width: 35.7541899441341%;
  margin-top: 0.27932960893855%;
  left: 9.49720670391061%;
  z-index: 7;
}
.gumtree .responsive-process #ipad {
  width: 31.7039106145251%;
  margin-top: 42.5977653631285%;
  left: 31.4245810055866%;
  z-index: 6;
}
.gumtree .responsive-process #iphone {
  width: 17.877094972067%;
  left: 56.145251396648%;
  z-index: 5;
}
.gumtree .responsive-process #macbook {
  width: 100%;
  margin-top: 23.463687150838%;
  z-index: 4;
}
@media (smallmobile) {
  .gumtree .contact {
    min-height: 500px;
  }
}
.gumtreeipad .green {
  background-color: #f7f8eb;
}
.gumtreeipad p::selection,
.gumtreeipad h1::selection,
.gumtreeipad h2::selection,
.gumtreeipad h3::selection,
.gumtreeipad h4::selection,
.gumtreeipad .title::selection {
  background: #92c100;
  color: #fff;
}
.gumtreeipad img {
  margin: 0 auto;
  max-width: 100%;
}
.gumtreeipad .header {
  background-image: url("../images/work/gumtreeipad/header-filter.jpg");
}
.gumtreeipad .panel1 .title {
  max-width: 800px;
}
.gumtreeipad .panel1 .uxscreen {
  padding: 80px 40px 140px 40px;
}
@media (smallmobile) {
  .gumtreeipad .panel1 .uxscreen {
    padding: 50px 40px 62px 40px;
  }
}
.gumtreeipad .panel2 {
  padding-bottom: 0;
}
.gumtreeipad .panel2 p.para-in-first {
  margin-top: -6px;
  margin-bottom: 93px;
}
.gumtreeipad .panel2 .title {
  max-width: 800px;
}
.gumtreeipad .panel2 .title:first-child {
  max-width: 700px;
  margin-bottom: 63px;
}
.gumtreeipad .ux {
  background-image: url("../images/work/gumtreeipad/ux-bg.jpg");
}
.gumtreeipad .screens {
  margin-top: 120px;
}
.gumtreeipad .screens img {
  width: 100%;
}
.gumtreeipad .panel5 {
  text-align: center;
}
.gumtreeipad .panel5 .title {
  max-width: 916px;
}
.gumtreeipad .panel5 .slick-list {
  background-color: transparent;
}
.gumtreeipad .panel5 .devices-carousel-container {
  padding-top: 90px;
}
.gumtreeipad .panel5 .devices-carousel-container img {
  max-width: 80%;
}
.gumtreeipad .store-classment {
  background-color: #f4f5f4;
  margin-top: -240px;
  padding-top: 350px;
  padding-bottom: 100px;
}
@media (smallmobile) {
  .gumtreeipad .store-classment {
    margin-top: -180px;
    padding-top: 220px;
  }
}
.gumtreeipad .store-classment img {
  max-width: 90%;
  margin-bottom: 100px;
}
@media (max-width: 1024px) {
  .gumtreeipad .store-link img {
    max-width: 200px;
  }
}
.gumtreeipad .panel6 {
  overflow: visible;
  padding-bottom: 120px;
}
.gumtreeipad .panel6 .title {
  max-width: 700px;
  margin-bottom: 75px;
  font-size: 18px;
  letter-spacing: 0px;
  line-height: 26px;
}
@media (max-width: 1024px) {
  .gumtreeipad .panel6 .title {
    font-size: 16px;
    line-height: 26px;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 40px;
  }
}
.gumtreeipad .quote {
  text-align: center;
  margin-left: 20px;
  margin-right: 20px;
  font-size: 22px;
}
.gumtreeipad cite {
  font: 22px/75px 'AvantGardeGothicITCW01X';
  text-decoration: underline;
  letter-spacing: 0.5px;
  display: block;
  font-style: normal;
}
.gumtreeipad .quote-icone {
  width: 100px;
  height: 100px;
  background-color: #92c100;
  border-radius: 50%;
  margin: -150px auto 63px auto;
  text-align: center;
}
@media (max-width: 1024px) {
  .gumtreeipad .quote-icone {
    margin-top: -130px;
  }
}
@media (max-width: 768px) {
  .gumtreeipad .quote-icone {
    margin-top: -90px;
  }
}
.gumtreeipad .icon-quote {
  position: relative;
  top: 20px;
  font-size: 50px;
}
@media (smallmobile) {
  .gumtreeipad {
    min-height: 500px;
  }
}
@media (max-width: 1024px) {
  .gumtreeipad .gipad-category {
    display: none;
  }
}
.backgroundclip .uxprocess [class^="icon-"]:before,
.backgroundclip .uxprocess [class*=" icon-"]:before {
  background: linear-gradient(to top, #478400 0%, #80bc3a 99%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.thestoryofmore p::selection,
.thestoryofmore h1::selection,
.thestoryofmore h2::selection,
.thestoryofmore .title::selection {
  background: #5c2c54;
  color: #fff;
}
.thestoryofmore .header {
  background-image: url("../images/work/thestoryofmore/header-filter.jpg");
}
.thestoryofmore .header .title {
  max-width: 420px;
}
.thestoryofmore img {
  margin: 0 auto;
  max-width: 100%;
}
.thestoryofmore .panel1 .title {
  max-width: 760px;
}
.thestoryofmore .panel2 {
  margin-bottom: 100px;
}
@media (max-width: 768px) {
  .thestoryofmore .panel2 {
    margin-bottom: 40px;
  }
}
.thestoryofmore .panel2 .para-in-first {
  margin-top: 30px;
}
.thestoryofmore .panel2 .para-sub-title {
  margin-bottom: 30px;
  padding-top: 30px;
}
.thestoryofmore .deadlineloom {
  background: radial-gradient(ellipse at center, #3c1f37 0%, rgba(60,31,55,0) 75%);
  display: table;
  width: 100%;
  padding: 0;
  min-height: 1400px;
}
@media (max-width: 1024px) {
  .thestoryofmore .deadlineloom {
    min-height: 1200px;
  }
}
@media (max-width: 768px) {
  .thestoryofmore .deadlineloom {
    min-height: 500px;
    padding-top: 50px;
    padding-bottom: 50px;
  }
}
.thestoryofmore .deadlineloom div {
  display: table-cell;
  vertical-align: middle;
}
.thestoryofmore .deadlineloom img {
  max-width: 80%;
}
.thestoryofmore .panel4 img {
  margin-bottom: -80px;
  margin-top: 100px;
  position: relative;
  z-index: 1;
}
@media (max-width: 768px) {
  .thestoryofmore .panel4 img {
    margin-top: 0;
    margin-bottom: -60px;
  }
}
.thestoryofmore .panel5 {
  padding-top: 160px;
  margin-bottom: 160px;
}
.thestoryofmore .panel5 .title {
  margin-top: 100px;
  max-width: 800px;
}
@media (max-width: 768px) {
  .thestoryofmore .panel5 .title {
    margin-top: 80px;
  }
}
@media (max-width: 768px) {
  .thestoryofmore .panel5 {
    margin-bottom: 80px;
  }
}
.thestoryofmore .purple {
  background-color: #492443;
}
.thestoryofmore .grey {
  background-color: #f4f5f4;
  overflow: visible;
}
.thestoryofmore .video {
  padding-top: 0;
  margin-top: 100px;
}
@media (max-width: 768px) {
  .thestoryofmore .video {
    margin-top: 40px;
  }
}
.thestoryofmore .pretty-embed:after {
  background: #fff;
  margin-top: -90px;
  margin-left: -90px;
  border-radius: 50%;
  width: 180px;
  height: 180px;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.thestoryofmore .pretty-embed:hover:after {
  background: #492443;
}
.thestoryofmore .pretty-embed:before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  margin-top: -27px;
  margin-left: -17px;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 44px solid #492443;
  z-index: 2;
}
.thestoryofmore .pretty-embed:hover:before {
  border-left: 44px solid #fff;
}
.thestoryofmore .pretty-embed.play:before {
  display: none;
}
.thestoryofmore #thestoryofmore-video {
  margin: 0 auto;
}
.thestoryofmore #thestoryofmore-video img {
  max-width: 633px;
  margin: 100px auto 100px auto;
}
.thestoryofmore .img-row {
  margin: 60px auto;
  max-width: 800px;
  zoom: 1;
}
.thestoryofmore .img-row:after,
.thestoryofmore .img-row:before {
  content: "";
  display: table;
}
.thestoryofmore .img-row:after {
  clear: both;
}
.thestoryofmore .img-row.two-column img {
  float: right;
  max-width: 50%;
}
.thestoryofmore .img-row.two-column img:first-child {
  float: left;
}
.taku p::selection,
.taku h1::selection,
.taku h2::selection,
.taku .title::selection {
  background: #c4d05d;
  color: #fff;
}
.taku .clear {
  zoom: 1;
  display: block;
}
.taku .clear:after,
.taku .clear:before {
  content: "";
  display: table;
}
.taku .clear:after {
  clear: both;
}
.taku .header {
  background-image: url("../images/work/taku/header-filter.jpg");
}
.taku .header .title {
  max-width: 1200px;
}
.taku img {
  margin: 0 auto;
  max-width: 100%;
}
.taku .panel1 .title {
  max-width: 340px;
}
@media (min-width: 769px) {
  .taku .panel1 .title {
    max-width: 760px;
    margin-top: 100px;
  }
}
@media (max-width: 768px) {
  .taku .panel1 .title {
    margin-bottom: 0;
  }
}
.taku .panel2 {
  margin-bottom: 100px;
  padding-top: 400px;
}
@media (max-width: 768px) {
  .taku .panel2 {
    margin-bottom: 40px;
    padding-top: 100px;
  }
}
.taku .panel2 .title {
  max-width: 700px;
}
.taku .panel2 .para-in-first {
  margin-top: 30px;
}
.taku .panel2 .para-sub-title {
  margin-bottom: 30px;
  padding-top: 30px;
}
.taku .panel3 {
  margin-top: 280px;
  padding-bottom: 100px;
}
.taku .panel3 .presentation {
  margin-top: -280px;
  margin-bottom: 100px;
  max-width: 340px;
}
@media (min-width: 769px) {
  .taku .panel3 {
    margin-top: 580px;
    padding-bottom: 200px;
  }
  .taku .panel3 .presentation {
    margin-top: -580px;
    max-width: 1000px;
  }
}
.taku .panel3 .clear {
  text-align: center;
}
.taku .panel3 a {
  display: inline-block;
  margin-top: 60px;
}
@media (min-width: 769px) {
  .taku .panel3 a {
    margin-right: 40px;
    margin-top: 100px;
  }
}
.taku .phone-panel {
  background-image: url("../images/work/taku/header-filter-blur.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-size: cover;
  overflow: visible;
  height: 600px;
  margin-top: 100px;
}
.taku img.wine-matcher {
  margin-bottom: 60px;
  max-width: 60%;
}
@media (min-width: 769px) {
  .taku img.wine-matcher {
    margin-bottom: 100px;
  }
}
.taku .phoneBG {
  background-image: url("../images/work/taku/iphone-bg.png");
  background-repeat: no-repeat;
  margin: 0 auto;
  text-align: center;
  width: 400px;
  z-index: 5;
  position: relative;
  min-height: 700px;
  max-width: 100%;
  background-size: 100%;
}
.taku .phoneBG img {
  display: inline-block;
  margin-top: 22%;
  margin-bottom: 50px;
  max-width: 65%;
  margin-left: -3%;
}
.taku .phoneBG .home-screen {
  margin-bottom: -350px;
}
@media (max-width: 768px) {
  .taku .phoneBG {
    width: 320px;
  }
}
.taku .phones {
  zoom: 1;
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
}
.taku .phones:after,
.taku .phones:before {
  content: "";
  display: table;
}
.taku .phones:after {
  clear: both;
}
@media (min-width: 1200px) {
  .taku .phones {
    width: 1200px;
  }
}
@media (min-width: 769px) {
  .taku .phones .phoneBG {
    max-width: 33%;
    float: left;
  }
}
@media (max-width: 380px) {
  .taku .phones .phoneBG:last-child,
  .taku .phones .phoneBG:first-child {
    margin-bottom: -60px;
  }
}
.taku .playstore img {
  width: 166px;
  margin-top: -2px;
}
.taku .appstore img {
  width: 178px;
}
.taku .grey {
  background-color: #f5f2ef;
  overflow: visible;
}
.quay p::selection,
.quay h1::selection,
.quay h2::selection,
.quay .title::selection {
  background: #dde5f3;
  color: #fff;
}
.quay .clear {
  zoom: 1;
  display: block;
}
.quay .clear:after,
.quay .clear:before {
  content: "";
  display: table;
}
.quay .clear:after {
  clear: both;
}
.quay .header {
  background-image: url("../images/work/quay/header-filter.jpg");
}
.quay .header .title {
  max-width: 600px;
}
.quay .preHeader {
  margin-bottom: 70px;
  font-size: 18px;
  line-height: 18px;
}
.quay img {
  margin: 0 auto;
  max-width: 100%;
}
.quay .title {
  padding-left: 10px;
  padding-right: 10px;
}
.quay .panel1 {
  margin-bottom: 100px;
}
.quay .panel1 .title {
  max-width: 450px;
}
@media (min-width: 769px) {
  .quay .panel1 .title {
    max-width: 860px;
  }
}
.quay .panel2 {
  background-color: #dde5f3;
}
@media (max-width: 768px) {
  .quay .panel2 {
    padding-top: 100px;
  }
}
.quay .panel2 .title {
  max-width: 700px;
}
.quay .panel2 .para-in-first {
  margin-top: 30px;
}
.quay .panel2 .para-sub-title {
  margin-bottom: -25px;
  padding-top: 30px;
}
.quay .panel3 {
  margin-top: 0;
  background-image: url("../images/work/quay/pattern.jpg");
  overflow: visible;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: auto 600px;
}
.quay .panel3 .preHeader,
.quay .panel3 .title {
  color: #fff;
}
.quay .panel3 .title {
  max-width: 800px;
}
.quay .panel3 .chrome > img {
  display: none;
}
@media (min-width: 769px) {
  .quay .panel3 {
    background-size: 100%;
    background-attachment: fixed;
  }
}
@media (min-width: 1025px) {
  .quay .panel3 {
    max-height: 960px;
    margin-bottom: 560px;
  }
  .quay .panel3 .chrome {
    background-image: url("../images/work/quay/chrome.png");
    min-height: 1121px;
    background-size: 100%;
    max-width: 100%;
    width: 963px;
    position: relative;
    margin: 0 auto;
    background-repeat: no-repeat;
    padding-bottom: 5px;
  }
  .quay .panel3 .chrome > img {
    display: block;
    padding-top: 6.2%;
    margin: 0 auto;
    max-width: 98.7%;
  }
}
.quay .phoneBG {
  background-image: url("../images/work/quay/iphone-gold.png");
  background-repeat: no-repeat;
  margin: 0 auto;
  text-align: center;
  width: 242px;
  z-index: 5;
  position: relative;
  min-height: 493px;
  max-width: 100%;
  background-size: 100%;
}
.quay .phoneBG img {
  display: inline-block;
  margin-top: 24.5%;
  max-width: 87%;
}
@media (min-width: 1025px) {
  .quay .phoneBG {
    position: absolute;
    right: -200px;
    top: 50%;
    transform: translateY(-50%);
    right: -80px;
    margin-top: -122px;
  }
}
.quay .panel4 {
  margin-bottom: 200px;
}
.quay .panel4 .title {
  max-width: 1000px;
}
.quay .panel4 a {
  color: #0c0c0c;
}
.ebay-classified .header {
  background-image: url("../images/work/ebay-classified/header-filter.jpg");
}
.ebay-classified img {
  width: 100%;
  box-sizing: border-box;
  display: block;
}
.ebay-classified .panel1 .title {
  margin-bottom: 120px;
  margin-top: 120px;
}
@media (max-width: 768px) {
  .ebay-classified .panel1 .title {
    margin-bottom: 40px;
    margin-top: 40px;
  }
}
.ebay-classified .panel2 {
  position: relative;
}
.ebay-classified .panel2 .relative {
  position: relative;
}
.ebay-classified .panel2 slick {
  position: absolute;
  width: 20%;
  top: 18%;
  left: 39.6%;
}
.ebay-classified .panel2 .slick-list {
  background-color: transparent;
}
.ebay-classified .panel3 .title {
  max-width: 900px;
}
.ebay-classified .panel3 #world_map {
  margin: 40px 0 80px 0;
  position: relative;
}
.ebay-classified .panel3 .ux-layers {
  margin-top: 80px;
  position: relative;
}
.ebay-classified .panel3 .layers {
  position: absolute;
  height: 100%;
  margin: 0 auto;
  top: 0;
  left: 50%;
  width: initial;
  transform: translate3d(-50%, -60px, 0);
  transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 2s;
}
.ebay-classified .panel3 .layers:last-child {
  transform: translate3d(-50%, -80px, 0);
}
.ebay-classified .panel3 .layers.active {
  transform: translate3d(-50%, 0, 0);
}
@media (max-width: 768px) {
  .ebay-classified .panel3 #world_map {
    margin: 20px 0 40px 0;
  }
}
.ebay-classified #canvas {
  width: 100%;
}
.ebay-classified #world_map {
  min-height: 300px;
}
.ebay-classified #world_map.addTiles .countries {
  opacity: 1;
  transform: scale(1);
}
.ebay-classified .countries {
  opacity: 0;
  transition: all ease-in 0.5s;
  transform: scale(0.9);
  transform-origin: 50%;
  font-size: 15px;
  color: #fff;
  text-align: center;
  position: absolute;
  padding: 7px 14px;
  display: inline-block;
  border-radius: 5px;
}
@media (smallmobile) {
  .ebay-classified .countries {
    position: initial;
  }
}
@media (max-width: 1024px) {
  .ebay-classified .countries {
    font-size: 12px;
  }
}
.ebay-classified .countries.green {
  background-color: #a8cd33;
}
.ebay-classified .countries.green.top:before {
  border-bottom-color: #a8cd33;
}
.ebay-classified .countries.green.left:before {
  border-right-color: #a8cd33;
}
.ebay-classified .countries.orange {
  background-color: #f38e13;
}
.ebay-classified .countries.orange:before {
  border-left-color: #f38e13;
}
.ebay-classified .countries.blue {
  background-color: #48417e;
}
.ebay-classified .countries.blue.left:before {
  border-right-color: #48417e;
}
.ebay-classified .countries.blue.right:before {
  border-left-color: #48417e;
}
.ebay-classified .countries:before {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 6px 6px 6px;
  border-color: transparent;
}
@media (min-width: 769px) {
  .ebay-classified .countries:before {
    content: '';
  }
}
.ebay-classified .countries.top:before {
  left: 50%;
  top: -6px;
  margin-left: -6px;
}
.ebay-classified .countries.left:before {
  border-width: 6px 6px 6px 0;
  left: -6px;
  top: 50%;
  margin-top: -6px;
}
.ebay-classified .countries.right:before {
  border-width: 6px 0 6px 6px;
  right: -6px;
  top: 50%;
  margin-top: -6px;
}
.ebay-classified #kc {
  top: 31%;
  right: 83%;
  transition-delay: 1.1s;
}
.ebay-classified #uk {
  left: 54.5%;
  top: 31%;
  transition-delay: 1.2s;
}
.ebay-classified #ki {
  left: 54%;
  top: 42%;
  transition-delay: 1.3s;
}
.ebay-classified #vm {
  right: 79%;
  top: 50%;
  transition-delay: 1.4s;
}
.ebay-classified #aa {
  right: 70%;
  bottom: 22%;
  transition-delay: 1.5s;
}
.ebay-classified #sa {
  bottom: 13%;
  left: 53%;
  margin-left: -76px;
  transition-delay: 1.6s;
}
.ebay-classified #a {
  left: 84%;
  bottom: 26%;
  transition-delay: 1.7s;
}
.ebay-classified .panel5 {
  margin-top: -300px;
  padding-top: 300px;
  background-color: #f5f2ef;
}
.ebay-classified .panel5 a {
  display: inline-block;
  margin: 20px 20px 40px 0;
}
@media (max-width: 1024px) {
  .ebay-classified .panel5 {
    margin-top: -400px;
  }
}
@media (max-width: 768px) {
  .ebay-classified .panel5 a {
    display: inline-block;
    margin: 40px 0px 10px 0;
  }
}
.ebay-classified .small-logo {
  width: 100%;
  height: 50px;
  margin-top: -140px;
  margin-bottom: 100px;
}
.ebay-classified .small-logo img {
  width: initial;
  margin-left: auto;
  margin-right: auto;
  max-width: 80%;
}
.ebay-classified .phone-container {
  min-height: 700px;
  max-width: 100%;
}
@media (min-width: 769px) {
  .ebay-classified .phone-container {
    width: 400px;
    float: left;
  }
}
.ebay-classified .phoneBG {
  background-image: url("../images/work/taku/iphone-bg.png");
  background-repeat: no-repeat;
  margin: 0 auto;
  text-align: center;
  width: 100%;
  z-index: 5;
  position: relative;
  min-height: 700px;
  max-width: 100%;
  background-size: 100%;
}
.ebay-classified .phoneBG img {
  display: inline-block;
  margin-top: 22%;
  margin-bottom: 50px;
  max-width: 65%;
  margin-left: -3%;
}
@media (max-width: 768px) {
  .ebay-classified .phoneBG {
    width: 320px;
  }
}
.ebay-classified .phones {
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1200px) {
  .ebay-classified .phones {
    width: 1200px;
  }
}
.ebay-classified .playstore img {
  width: 166px;
  margin-top: -2px;
}
.ebay-classified .appstore img {
  width: 178px;
}
.petergilmore p::selection,
.petergilmore h1::selection,
.petergilmore h2::selection,
.petergilmore .title::selection {
  background: #dde5f3;
  color: #fff;
}
.petergilmore .header {
  background-image: url("../images/work/peter-gilmore/header-filter.jpg");
}
.petergilmore .header .title {
  max-width: 600px;
}
.petergilmore .panel {
  padding-bottom: 40px;
}
.petergilmore img {
  margin: 0 auto;
  max-width: 100%;
}
.petergilmore .blue {
  background-color: #dfe7f3;
}
.petergilmore .grey {
  background-color: #eeebf0;
}
.petergilmore .black {
  background-color: #000;
}
.petergilmore .black p,
.petergilmore .black a {
  color: #fff;
}
.petergilmore .panel1 {
  padding-bottom: 0;
}
.petergilmore .peter_repeat_bg {
  margin-top: 100px;
  background: url("../images/work/peter-gilmore/peter_repeat_bg.jpg") repeat-x;
  background-size: auto 100%;
}
.petergilmore .panel2 {
  padding-bottom: 0;
}
.petergilmore .circle {
  margin-top: 100px;
}
.petergilmore .panel3 .title {
  margin-top: 0;
  margin-bottom: 30px;
}
.petergilmore .panel5 {
  padding-bottom: 0;
}
@media (min-width: 769px) {
  .petergilmore .panel6 .title {
    margin: 0px auto 40px auto;
  }
}
.petergilmore .panel8 .goto {
  margin-top: 20px;
}
@media (min-width: 769px) {
  .petergilmore .panel8 .goto {
    margin-top: 10px;
    margin-right: 60px;
  }
}
.petergilmore .panel9 .title {
  max-width: 1000px;
  margin-bottom: 30px;
}
.petergilmore .awards {
  display: inline-block;
  width: 170px;
  margin-top: 60px;
  margin-bottom: 100px;
  vertical-align: middle;
}
.petergilmore .awards a {
  font-size: 16px;
  color: #fff;
  display: block;
  margin-top: 10px;
}
@media (max-width: 768px) {
  .petergilmore .awards {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 70px;
  }
}
.petergilmore .ipad-wrapper {
  margin-top: 40px;
  margin-bottom: 100px;
  position: relative;
  height: 380px;
  overflow: hidden;
}
@media (min-width: 769px) {
  .petergilmore .ipad-wrapper {
    height: 574px;
  }
}
.petergilmore .ipad-wrapper .ipad {
  height: 100%;
  background: url("../images/work/peter-gilmore/ipad.png") center no-repeat;
  background-size: auto 100%;
  position: absolute;
  top: 0;
  width: 100%;
}
.petergilmore .ipad-wrapper .dragme,
.petergilmore .ipad-wrapper > .content {
  position: absolute;
  top: 8.3% !important;
  height: 77.2%;
  left: 0;
}
.petergilmore .ipad-wrapper .background-content img {
  opacity: 0.9;
}
.petergilmore .ipad-wrapper .dragme {
  background: url("../images/work/peter-gilmore/content.jpg");
  background-size: auto 100%;
  left: 50%;
  overflow: hidden;
}
.petergilmore .ipad-wrapper .dragme .content {
  height: 100%;
}
.petergilmore .ipad-wrapper .content img {
  height: 100%;
  max-width: none;
}
.petergilmore .ipad-wrapper .drag-wrapper {
  height: 100%;
  position: relative;
}
.petergilmore .drag-wrapper {
  cursor: -webkit-grab;
}
.petergilmore .drag-wrapper.active {
  cursor: -webkit-grabbing;
}
@media (max-width: 768px) {
  .petergilmore .covervid-container {
    background-image: url("../images/work/peter-gilmore/dish.jpg");
    margin-bottom: 20px;
  }
}
.aesop p::selection,
.aesop h1::selection,
.aesop h2::selection,
.aesop h3::selection,
.aesop h4::selection,
.aesop .title::selection {
  background: #fffef4;
  color: #20201e;
}
.aesop .header {
  background-image: url("../images/work/aesop/header.jpg");
}
.aesop img {
  max-width: calc(100% - 80px);
  padding: 40px;
  display: block;
  margin: 0 auto;
}
.aesop .slick-list {
  background-color: #fff;
}
.aesop .gif {
  margin-bottom: 40px;
  margin-top: 40px;
}
.aesop .carousel {
  height: auto;
}
@media (min-width: 769px) {
  .aesop #quote {
    margin-bottom: 60px;
  }
}
.aesop .aesop-home {
  max-width: 956px;
  margin: 80px auto;
}
.aesop .dark {
  background-color: #20201e;
  overflow: visible;
  margin-top: 380px;
  z-index: 2;
  padding-bottom: 400px;
  margin-bottom: 300px;
}
@media (max-width: 768px) {
  .aesop .dark {
    padding-bottom: 200px;
    margin-bottom: 50px;
  }
}
.aesop .panel1 .title {
  max-width: 1000px;
  margin-top: 80px;
}
@media (min-width: 769px) {
  .aesop #aesop-carousel {
    float: left;
  }
  .aesop #aesop-intro {
    float: right;
  }
}
.aesop .screenshots {
  width: 1116px;
  margin: 0 auto;
  max-width: 100%;
}
.aesop .screenshots:after {
  content: "";
  display: table;
  clear: both;
}
@media (min-width: 769px) {
  .aesop .screenshots img {
    max-width: calc(50% - 80px);
  }
}
.aesop #aesop-store {
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
}
.aesop #devices {
  width: 783px;
  max-width: 100%;
  margin: -400px auto 0 auto;
  position: relative;
}
@media (max-width: 768px) {
  .aesop #devices {
    margin-top: -260px;
    margin-bottom: -40px;
  }
}
.aesop #devices img {
  margin-left: 0;
}
.aesop #aesop-iphone {
  position: absolute;
  bottom: 0;
  right: 0;
}
.aesop #aesop-nav {
  margin-bottom: 0;
}
.aesop .panel3 {
  width: 100%;
  padding-bottom: 80px;
}
@media (max-width: 768px) {
  .aesop .panel3 {
    padding-top: 230px;
  }
}
.aesop .panel3 .title {
  max-width: 618px;
}
.aesop .panel4 {
  overflow: visible;
  padding-bottom: 120px;
  margin-bottom: 0;
  margin-top: 40px;
}
.aesop .panel4 .title {
  max-width: 700px;
  font-size: 27px;
  line-height: 40px;
  padding-left: 20px;
  letter-spacing: 1px;
  padding-right: 20px;
  margin-top: 40px;
  margin-bottom: 20px;
}
@media (max-width: 1024px) {
  .aesop .panel4 .title {
    font-size: 16px;
    line-height: 26px;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 40px;
  }
}
.aesop .panel4 .goto {
  margin-bottom: 0;
  color: #fff;
  border-bottom: 1px solid #fff;
}
.aesop .goto {
  margin-top: 40px;
  margin-bottom: 120px;
}
.prezzee .small-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 50px;
  margin-top: 50px;
}
@media (max-width: 768px) {
  .prezzee .small-title {
    font-size: 16px;
  }
}
.prezzee .header {
  background-image: url("../images/work/prezzee/header-filter.jpg");
}
.prezzee .header .clientName {
  padding-top: 206px;
}
.prezzee img {
  margin: 0 auto;
  max-width: 100%;
}
.prezzee .panel1 .title {
  margin-bottom: 120px;
  max-width: 760px;
}
@media (max-width: 768px) {
  .prezzee .panel1 .title {
    margin-bottom: 40px;
    margin-top: 40px;
  }
}
.prezzee .panel2 .small-title {
  margin-top: 200px;
}
@media (max-width: 1024px) {
  .prezzee .panel2 .small-title {
    margin-top: 120px;
  }
}
@media (max-width: 768px) {
  .prezzee .panel2 .small-title {
    margin-top: 60px;
  }
}
.prezzee .panel2 .title {
  max-width: 538px;
}
@media (max-width: 768px) {
  .prezzee .panel2 {
    margin-top: 58px;
  }
}
@media (smallmobile) {
  .prezzee .panel2 {
    margin-top: 20px;
  }
}
.prezzee .panel3 .title {
  max-width: 900px;
}
.prezzee .panel3 .prezzee-phone-large {
  margin-top: 100px;
}
@media (max-width: 768px) {
  .prezzee .panel3 .prezzee-phone-large {
    margin-top: 30px;
  }
}
.prezzee .panel4 {
  overflow: visible;
}
.prezzee .panel5 {
  clear: both;
}
.prezzee .panel5 a {
  display: inline-block;
  margin: 20px 20px 40px 0;
}
@media (max-width: 1024px) {
  .prezzee .panel5 {
    margin-top: 0;
  }
}
@media (max-width: 768px) {
  .prezzee .panel5 a {
    display: inline-block;
    margin: 40px 0px 10px 0;
  }
}
.prezzee .small-logo {
  max-width: 618px;
  margin: 0 auto 70px auto;
}
.prezzee .small-logo img {
  margin-left: 0;
}
@media (max-width: 768px) {
  .prezzee .small-logo img {
    margin-left: auto;
  }
}
.prezzee .phone-container {
  min-height: 600px;
  max-width: 100%;
}
@media (min-width: 769px) {
  .prezzee .phone-container {
    width: 400px;
  }
}
.prezzee .phoneBG {
  background-image: url("../images/work/prezzee/iphone-bg.png");
  background-repeat: no-repeat;
  margin: 0 auto;
  text-align: center;
  width: 100%;
  z-index: 5;
  position: relative;
  min-height: 685px;
  max-width: 100%;
  background-size: 100%;
}
.prezzee .phoneBG img {
  display: inline-block;
  margin-top: 19.4%;
  margin-bottom: 50px;
  margin-left: -0.5%;
  max-width: 69%;
}
@media (max-width: 768px) {
  .prezzee .phoneBG {
    width: 320px;
  }
}
.prezzee .phones {
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1200px) {
  .prezzee .phones {
    width: 1200px;
  }
}
@media (max-width: 768px) {
  .prezzee .phones {
    margin-top: 30px;
  }
}
@media (min-width: 769px) {
  .prezzee .phones .phone-container {
    max-width: 33%;
    float: left;
  }
}
@media (max-width: 768px) {
  .prezzee .phoneBG {
    min-height: 570px;
  }
}
.prezzee .appstore img {
  width: 178px;
  margin-bottom: 80px;
}
.dolmio-pepper-hacker .small-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 50px;
  margin-top: 50px;
}
@media (max-width: 768px) {
  .dolmio-pepper-hacker .small-title {
    font-size: 16px;
  }
}
.dolmio-pepper-hacker .header {
  background-image: url("../images/work/dolmio-pepper-hacker/header-filter.jpg");
}
.dolmio-pepper-hacker .header .clientName {
  padding-top: 206px;
}
.dolmio-pepper-hacker .header .title {
  max-width: 100%;
}
.dolmio-pepper-hacker img {
  margin: 0 auto;
  max-width: 100%;
}
.dolmio-pepper-hacker .panel1 .title {
  max-width: 760px;
  margin-bottom: 100px;
  margin-top: 100px;
}
.dolmio-pepper-hacker .panel1 span {
  position: absolute;
  font-size: 20px;
}
.dolmio-pepper-hacker .panel1 .icon-down {
  position: absolute;
  right: -24px;
  font-size: 12px;
  top: 9px;
}
.dolmio-pepper-hacker .panel1 img {
  width: 100%;
  max-width: 1800px;
}
.dolmio-pepper-hacker .panel1 .devices {
  margin-top: 100px;
}
@media (max-width: 768px) {
  .dolmio-pepper-hacker .panel1 .title {
    margin-bottom: 40px;
    margin-top: 40px;
  }
  .dolmio-pepper-hacker .panel1 .devices {
    margin-top: 40px;
  }
}
.dolmio-pepper-hacker .panel2 .desk,
.dolmio-pepper-hacker .panel2 .energy {
  margin: 100px auto 140px auto;
}
@media (max-width: 768px) {
  .dolmio-pepper-hacker .panel2 .desk,
  .dolmio-pepper-hacker .panel2 .energy {
    margin: 40px auto 60px auto;
  }
}
@media (smallmobile) {
  .dolmio-pepper-hacker .panel2 {
    margin-top: 20px;
  }
}
.dolmio-pepper-hacker .panel3 {
  margin-top: -50px;
  padding-top: 200px;
  padding-bottom: 110px;
}
.dolmio-pepper-hacker .panel3:before {
  background-color: #f4f4f4;
  position: absolute;
  left: 0;
  bottom: 0;
  top: 185px;
  width: 100%;
  content: '';
}
.dolmio-pepper-hacker .panel3 .title {
  text-align: left;
  padding-left: 0;
  padding-top: 100px;
}
.dolmio-pepper-hacker .panel3 .title,
.dolmio-pepper-hacker .panel3 p {
  max-width: 472px;
  margin-left: 0;
}
.dolmio-pepper-hacker .panel3 .remote-phone {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}
.dolmio-pepper-hacker .panel3 .remote-container {
  position: absolute;
  left: -223px;
  top: -220px;
}
.dolmio-pepper-hacker .panel3 .phone-container {
  position: absolute;
  right: -253px;
  bottom: -377px;
}
@media (max-width: 1024px) {
  .dolmio-pepper-hacker .panel3 {
    padding-bottom: 100px;
    padding-top: 122px;
    margin-top: -25px;
  }
  .dolmio-pepper-hacker .panel3:before {
    top: 100px;
  }
  .dolmio-pepper-hacker .panel3 .title {
    padding-top: 40px;
  }
  .dolmio-pepper-hacker .panel3 .remote-container {
    left: -7%;
    width: 33%;
    top: -10%;
  }
  .dolmio-pepper-hacker .panel3 .phone-container {
    max-width: 50%;
    right: -22%;
  }
  .dolmio-pepper-hacker .panel3 .title,
  .dolmio-pepper-hacker .panel3 p {
    max-width: 60%;
    margin-left: 30%;
    text-align: left;
  }
  .dolmio-pepper-hacker .panel3 .title:nth-child(3),
  .dolmio-pepper-hacker .panel3 p:nth-child(4) {
    margin-left: 0;
  }
}
.dolmio-pepper-hacker .panel4 {
  padding-top: 0;
}
.dolmio-pepper-hacker .panel4 img {
  width: 100%;
}
.dolmio-pepper-hacker .panel4 .title {
  padding: 0;
  position: absolute;
  top: 70%;
  width: 100%;
  color: #fff;
}
.dolmio-pepper-hacker .panel5 {
  background-color: #20201e;
  padding-bottom: 8rem;
  text-align: center;
  overflow: visible;
  position: relative;
}
.dolmio-pepper-hacker .panel5 .text-container {
  max-width: 695px;
}
.dolmio-pepper-hacker .panel5 p {
  text-align: center;
}
.dolmio-pepper-hacker .panel5 .bandt,
.dolmio-pepper-hacker .panel5 .youtube {
  float: left;
  width: 50%;
}
.dolmio-pepper-hacker .panel5 .num {
  font-size: 18px;
  padding-top: 85px;
  display: block;
  clear: left;
  border-bottom: 1px solid #525252;
  padding-bottom: 15px;
}
.dolmio-pepper-hacker .panel5 a {
  color: #525252;
  font-size: 18px;
  display: block;
  margin-top: 20px;
}
.dolmio-pepper-hacker .panel5 #dormioCase {
  margin: -300px auto 115px auto;
  max-width: 95%;
}
@media (max-width: 1024px) {
  .dolmio-pepper-hacker .panel5 #dormioCase {
    margin-top: -20%;
  }
}
@media (max-width: 768px) {
  .dolmio-pepper-hacker .panel5 #dormioCase {
    margin-top: -15%;
  }
}
.circle-ripple {
  background-color: rgba(255,255,255,0.8);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  animation: ripple 1s linear infinite;
  position: absolute;
  top: 40%;
  right: 24%;
  opacity: 0.5;
}
@-moz-keyframes  {
  0% {
    box-shadow: 0 0 0 0 rgba(255,255,255,0.1), 0 0 0 1em rgba(255,255,255,0.1), 0 0 0 3em rgba(255,255,255,0.1), 0 0 0 5em rgba(255,255,255,0.1);
  }
  100% {
    box-shadow: 0 0 0 1em rgba(255,255,255,0.1), 0 0 0 3em rgba(255,255,255,0.1), 0 0 0 5em rgba(255,255,255,0.1), 0 0 0 8em rgba(255,255,255,0);
  }
}
@-webkit-keyframes  {
  0% {
    box-shadow: 0 0 0 0 rgba(255,255,255,0.1), 0 0 0 1em rgba(255,255,255,0.1), 0 0 0 3em rgba(255,255,255,0.1), 0 0 0 5em rgba(255,255,255,0.1);
  }
  100% {
    box-shadow: 0 0 0 1em rgba(255,255,255,0.1), 0 0 0 3em rgba(255,255,255,0.1), 0 0 0 5em rgba(255,255,255,0.1), 0 0 0 8em rgba(255,255,255,0);
  }
}
@-o-keyframes  {
  0% {
    box-shadow: 0 0 0 0 rgba(255,255,255,0.1), 0 0 0 1em rgba(255,255,255,0.1), 0 0 0 3em rgba(255,255,255,0.1), 0 0 0 5em rgba(255,255,255,0.1);
  }
  100% {
    box-shadow: 0 0 0 1em rgba(255,255,255,0.1), 0 0 0 3em rgba(255,255,255,0.1), 0 0 0 5em rgba(255,255,255,0.1), 0 0 0 8em rgba(255,255,255,0);
  }
}
@keyframes  {
  0% {
    box-shadow: 0 0 0 0 rgba(255,255,255,0.1), 0 0 0 1em rgba(255,255,255,0.1), 0 0 0 3em rgba(255,255,255,0.1), 0 0 0 5em rgba(255,255,255,0.1);
  }
  100% {
    box-shadow: 0 0 0 1em rgba(255,255,255,0.1), 0 0 0 3em rgba(255,255,255,0.1), 0 0 0 5em rgba(255,255,255,0.1), 0 0 0 8em rgba(255,255,255,0);
  }
}
.city-of-sydney .small-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 50px;
  margin-top: 50px;
}
@media (max-width: 768px) {
  .city-of-sydney .small-title {
    font-size: 16px;
  }
}
.city-of-sydney .header {
  background-image: url("../images/work/city-of-sydney/header-filter.jpg");
}
.city-of-sydney .header .clientName {
  padding-top: 206px;
}
.city-of-sydney .header .title {
  max-width: 800px;
}
.city-of-sydney img {
  margin: 0 auto;
  max-width: 100%;
}
.city-of-sydney .panel1 .title {
  margin-top: 40px;
  margin-bottom: 120px;
  max-width: 760px;
}
.city-of-sydney .panel1 .wall {
  padding-top: 60px;
  padding-bottom: 100px;
}
@media (max-width: 768px) {
  .city-of-sydney .panel1 .title {
    margin-bottom: 20px;
    margin-top: 40px;
  }
  .city-of-sydney .panel1 .wall {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}
.city-of-sydney .panel2 .title,
.city-of-sydney .panel3 .title {
  max-width: 1190px;
}
.city-of-sydney .panel2 .quote,
.city-of-sydney .panel3 .quote {
  font-weight: 700;
}
.poster-wrapper {
  margin-top: 80px;
  margin-bottom: 60px;
}
.poster-wrapper img {
  box-shadow: 0px 0px 50px #ccc;
}
@media (max-width: 1024px) {
  .poster-wrapper {
    margin-top: 40px;
    margin-bottom: 40px;
  }
}
.poster-wrapper img {
  max-width: none;
  width: 250%;
  margin-left: -75%;
}
@media (max-width: 1800px) {
  .poster-wrapper {
    animation: horizontalLoop 30s ease-in-out infinite;
  }
  .poster-wrapper img {
    margin-left: 0;
  }
}
@-moz-keyframes  {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-150%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes  {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-150%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@-o-keyframes  {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-150%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes  {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-150%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
.upwire .small-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 50px;
  margin-top: 50px;
}
@media (max-width: 768px) {
  .upwire .small-title {
    font-size: 16px;
  }
}
.upwire .header .clientName {
  padding-top: 206px;
}
.upwire img {
  margin: 0 auto;
  max-width: 100%;
}
.upwire .panel1 .title {
  margin-bottom: 120px;
  max-width: 700px;
}
.upwire .panel1 .icon-down {
  position: absolute;
  top: 6px;
  right: -27px;
}
@media (max-width: 768px) {
  .upwire .panel1 .title {
    margin-bottom: 40px;
    margin-top: 40px;
  }
}
.upwire .panel2 {
  background: linear-gradient(#2b98f0, #4054b2);
  overflow: visible;
}
.upwire .panel2,
.upwire .panel2 p,
.upwire .panel2 h2 {
  color: #fff;
}
.upwire .panel2 .small-title {
  margin-top: 200px;
}
@media (max-width: 1024px) {
  .upwire .panel2 .small-title {
    margin-top: 120px;
  }
}
@media (max-width: 768px) {
  .upwire .panel2 .small-title {
    margin-top: 60px;
  }
}
.upwire .panel2 .upwire_background {
  width: 100%;
}
.upwire .panel2 .title {
  max-width: 538px;
}
.upwire .panel2 .schema {
  margin-bottom: -626px;
  margin-top: 50px;
  position: relative;
  z-index: 10;
}
@media (max-width: 768px) {
  .upwire .panel2 .schema {
    margin-bottom: -84%;
  }
}
@media (max-width: 768px) {
  .upwire .panel2 {
    margin-top: 58px;
  }
}
@media (smallmobile) {
  .upwire .panel2 {
    margin-top: 20px;
  }
}
.upwire .panel3 {
  padding-top: 440px;
}
@media (max-width: 768px) {
  .upwire .panel3 {
    padding-top: 56%;
  }
}
.upwire .panel3 .screens {
  margin-top: 100px;
}
.upwire .panel4 .title {
  max-width: 700px;
}
.upwire .panel4 dl {
  text-align: left;
  padding: 70px 0 40px 100px;
  width: 614px;
  max-width: 100%;
  margin: 0 auto;
  font-size: 1.25rem;
}
@media (max-width: 768px) {
  .upwire .panel4 dl {
    padding: 70px 30px 40px 70px;
    box-sizing: border-box;
    font-size: 1rem;
  }
}
.upwire .panel4 dt {
  font-weight: 800;
  position: relative;
}
.upwire .panel4 dt:before {
  position: absolute;
  content: '';
  top: 20px;
  left: -33px;
  background-color: #0c0c0c;
  border-radius: 50%;
  width: 7px;
  height: 7px;
}
.upwire .panel4 dd {
  padding-bottom: 25px;
}
.upwire .panel5 {
  clear: both;
}
.upwire .panel5 a {
  display: inline-block;
  margin: 20px 20px 40px 0;
}
.upwire .panel5 #upwireCase {
  max-width: 900px;
  margin: 0 auto 100px auto;
}
@media (max-width: 1024px) {
  .upwire .panel5 {
    margin-top: 0;
  }
}
@media (max-width: 768px) {
  .upwire .panel5 a {
    display: inline-block;
    margin: 40px 0px 10px 0;
  }
}
.divider {
  position: relative;
}
.divider:before {
  top: 0;
  width: 50%;
  left: 50%;
  content: '';
  position: absolute;
  transform: translateX(-50%);
  border-top: 1px solid #e5e5e5;
}
.sj-macbook {
  margin-top: -170px;
}
@media (max-width: 1024px) {
  .sj-macbook {
    margin-top: -145px;
  }
}
@media (max-width: 768px) {
  .sj-macbook {
    margin-top: -100px;
  }
}
@media (max-width: 375px) {
  .sj-macbook {
    margin-top: -70px;
  }
}
.sj-stats {
  padding-bottom: 0 !important;
}
.sj-stats img {
  margin: 0 6%;
  vertical-align: top;
  display: inline-block;
}
.sj-stats img:nth-child(1) {
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .sj-stats img {
    display: block;
    margin: 0 auto;
  }
  .sj-stats img:nth-child(1) {
    margin-bottom: 45px;
  }
}
.columns-2 {
  margin: 0 15%;
}
.columns-2:after {
  display: block;
  content: '';
  clear: both;
}
.columns-2 .column-tile {
  width: 50%;
  float: left;
  padding: 0 3%;
  margin-bottom: 40px;
  box-sizing: border-box;
}
.columns-2 .column-tile:nth-child(odd) img {
  margin: 0 0 0 auto;
}
.columns-2 .column-tile:nth-child(even) img {
  margin: 0 auto 0 0;
}
@media (max-width: 768px) {
  .columns-2 .column-tile {
    width: 100%;
    margin-bottom: 30px;
  }
  .columns-2 .column-tile:nth-child(odd) img {
    margin: 0 auto;
  }
  .columns-2 .column-tile:nth-child(even) img {
    margin: 0 auto;
  }
}
@font-face {
  font-family: 'Avant Garde';
  src: url("../fonts/avantgarde/avantgarde-extra-light.woff") format('woff'), url("../fonts/avantgarde/avantgarde-extra-light.ttf") format('truetype');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'Avant Garde';
  src: url("../fonts/avantgarde/avantgarde-book.woff") format('woff'), url("../fonts/avantgarde/avantgarde-book.ttf") format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Avant Garde';
  src: url("../fonts/avantgarde/avantgarde-medium.woff") format('woff'), url("../fonts/avantgarde/avantgarde-medium.ttf") format('truetype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Avant Garde';
  src: url("../fonts/avantgarde/avantgarde-demi.woff") format('woff'), url("../fonts/avantgarde/avantgarde-demi.ttf") format('truetype');
  font-weight: 600;
  font-style: normal;
}
.gumtree-rebrand p {
  color: #131313;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  font-family: "Avant Garde", Helvetica, Arial, sans-serif;
  margin-bottom: 20px;
  letter-spacing: 0;
}
.gumtree-rebrand p:last-child {
  margin-bottom: 0;
}
.gumtree-rebrand p.quote {
  font-size: 36px;
  font-weight: 200;
  line-height: 1.3;
  letter-spacing: -0.5px;
}
.gumtree-rebrand p a {
  color: #131313;
  text-decoration: underline;
}
.gumtree-rebrand p a:hover,
.gumtree-rebrand p a:focus,
.gumtree-rebrand p a:active {
  color: #626161;
}
.gumtree-rebrand .block-video {
  position: relative;
}
.gumtree-rebrand .block-video video {
  width: 100%;
  display: block;
}
.gumtree-rebrand .block-video video::-webkit-media-controls-panel,
.gumtree-rebrand .block-video video::--webkit-media-controls-play-button,
.gumtree-rebrand .block-video video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}
.gumtree-rebrand .block-video video.paused + .play-control,
.gumtree-rebrand .block-video video.stopped + .play-control {
  display: block;
}
.gumtree-rebrand .block-video .play-control {
  display: none;
  top: 50%;
  left: 50%;
  width: 12vw;
  height: 12vw;
  padding: 5px;
  position: absolute;
  cursor: pointer;
  transform: translate(-50%, -50%);
  background: url("../images/work/gumtree-rebrand/play-btn.png") center no-repeat transparent;
  background-size: 12vw 12vw;
}
.gumtree-rebrand .block-video .speaker-control {
  right: 4px;
  bottom: 0;
  padding: 10px;
  cursor: pointer;
  position: absolute;
}
.gumtree-rebrand .block-video .speaker-control .speaker-on,
.gumtree-rebrand .block-video .speaker-control .speaker-off {
  width: 20px;
}
.gumtree-rebrand .block-video .speaker-control .speaker-on {
  display: none;
}
.gumtree-rebrand .block-text {
  margin-top: 70px;
  margin-bottom: 65px;
  position: relative;
}
.gumtree-rebrand .block-text.no-margin-bottom {
  margin-bottom: 0;
}
.gumtree-rebrand .block-text.negative-margin-top {
  margin-top: -20%;
}
.gumtree-rebrand .block-text .content-container {
  padding: 0 40px;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}
.gumtree-rebrand .block-text .content-container .text-container {
  margin-bottom: 30px;
  text-align: left;
}
.gumtree-rebrand .block-text .content-container .text-container.large-margin-bottom {
  margin-bottom: 50px;
}
.gumtree-rebrand .block-text .content-container .quote-container {
  margin-bottom: 40px;
}
.gumtree-rebrand .block-text .content-container .quote-container.large-margin-top {
  margin-top: 70px;
}
.gumtree-rebrand .block-text .content-container .quote-container .blockquote .quote {
  margin-left: -40px;
  margin-right: -40px;
}
.gumtree-rebrand .block-text .content-container .quote-container .blockquote .author {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  margin-top: 30px;
  padding-bottom: 0;
  font-family: "Avant Garde", Helvetica, Arial, sans-serif;
}
.gumtree-rebrand .block-image {
  max-height: 300px;
  overflow: hidden;
}
.gumtree-rebrand .block-image.laptop-image {
  max-height: none;
}
.gumtree-rebrand .block-image.laptop-image .image-container {
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.gumtree-rebrand .block-image.laptop-image .image-container img {
  left: initial;
  width: 100%;
  transform: translateX(0);
}
.gumtree-rebrand .block-image.mobile-animation {
  background: url("../images/work/gumtree-rebrand/gumtree-rebrand-bg-icons.jpg") top center repeat-x transparent;
  background-size: auto 97%;
  padding-top: 90px;
  padding-bottom: 75px;
  max-height: none;
}
.gumtree-rebrand .block-image.mobile-animation .image-container {
  position: relative;
}
.gumtree-rebrand .block-image.mobile-animation .image-container img {
  left: initial;
  width: auto;
  max-width: 30%;
  transform: translateX(0);
}
.gumtree-rebrand .block-image.mobile-animation .image-container .spinner-container {
  top: 0;
  left: 50%;
  width: 65%;
  max-width: 790px;
  position: absolute;
  transform: translateX(-50%);
}
.gumtree-rebrand .block-image.mobile-animation .image-container .spinner-container.animate .circles-container {
  transform: rotate(45deg);
}
.gumtree-rebrand .block-image.mobile-animation .image-container .spinner-container.animate .circles-container .circle.green-circle {
  stroke-dashoffset: 212.058;
}
.gumtree-rebrand .block-image.mobile-animation .image-container .spinner-container.animate .circles-container .circle.green-dark-circle {
  stroke-dashoffset: 183.372;
}
.gumtree-rebrand .block-image.mobile-animation .image-container .spinner-container.animate .circles-container .circle.yellow-circle {
  stroke-dashoffset: 169.372;
}
.gumtree-rebrand .block-image.mobile-animation .image-container .spinner-container.animate .circles-container .circle.blue-circle {
  stroke-dashoffset: 155.372;
}
.gumtree-rebrand .block-image.mobile-animation .image-container .spinner-container.animate .circles-container .circle.red-circle {
  stroke-dashoffset: 141.372;
}
.gumtree-rebrand .block-image.mobile-animation .image-container .spinner-container .circles-container {
  transform: rotate(-70deg);
  transition: transform 0.8s ease-in;
  transition-delay: 0.3s;
}
.gumtree-rebrand .block-image.mobile-animation .image-container .spinner-container .circles-container .circle {
  fill: transparent;
  stroke-width: 3px;
  transition: all 0.8s ease-in;
  transition-delay: 0.5s;
  stroke-dasharray: 282.744;
  stroke-dashoffset: 282.744;
}
.gumtree-rebrand .block-image.mobile-animation .image-container .spinner-container .circles-container .circle.purple-circle {
  stroke: #36263b;
  stroke-dasharray: 0;
  stroke-dashoffset: 0;
}
.gumtree-rebrand .block-image.mobile-animation .image-container .spinner-container .circles-container .circle.green-circle {
  stroke: #4ad540;
  transition-delay: 0s;
}
.gumtree-rebrand .block-image.mobile-animation .image-container .spinner-container .circles-container .circle.green-dark-circle {
  stroke: #3baa33;
}
.gumtree-rebrand .block-image.mobile-animation .image-container .spinner-container .circles-container .circle.yellow-circle {
  stroke: #fdb82a;
}
.gumtree-rebrand .block-image.mobile-animation .image-container .spinner-container .circles-container .circle.blue-circle {
  stroke: #00a2cd;
}
.gumtree-rebrand .block-image.mobile-animation .image-container .spinner-container .circles-container .circle.red-circle {
  stroke: #ee4055;
}
.gumtree-rebrand .block-image .image-container img {
  left: 50%;
  width: 120%;
  max-width: none;
  position: relative;
  transform: translateX(-50%);
}
@media (min-width: 768px) {
  .gumtree-rebrand p {
    font-size: 18px;
  }
  .gumtree-rebrand p.quote {
    font-size: 42px;
  }
  .gumtree-rebrand .block-text {
    margin-top: 100px;
    margin-bottom: 95px;
  }
  .gumtree-rebrand .block-text.no-margin-bottom {
    margin-bottom: 0;
  }
  .gumtree-rebrand .block-text .content-container .text-container {
    margin-bottom: 40px;
  }
  .gumtree-rebrand .block-text .content-container .text-container.large-margin-bottom {
    margin-bottom: 60px;
  }
  .gumtree-rebrand .block-text .content-container .quote-container {
    margin-bottom: 58px;
  }
  .gumtree-rebrand .block-text .content-container .quote-container .blockquote .quote {
    margin-left: -90px;
    margin-right: -90px;
  }
  .gumtree-rebrand .block-image {
    max-height: 500px;
  }
  .gumtree-rebrand .block-image.mobile-animation {
    padding-top: 120px;
    padding-bottom: 105px;
  }
  .gumtree-rebrand .block-video video,
  .gumtree-rebrand .block-video .speaker-control {
    right: 10px;
    bottom: 5px;
  }
  .gumtree-rebrand .block-video video .speaker-on,
  .gumtree-rebrand .block-video .speaker-control .speaker-on,
  .gumtree-rebrand .block-video video .speaker-off,
  .gumtree-rebrand .block-video .speaker-control .speaker-off {
    width: 30px;
  }
}
@media (min-width: 992px) {
  .gumtree-rebrand p {
    font-size: 20px;
  }
  .gumtree-rebrand p.quote {
    font-size: 48px;
  }
  .gumtree-rebrand .block-text {
    margin-top: 120px;
    margin-bottom: 115px;
  }
  .gumtree-rebrand .block-text.no-margin-bottom {
    margin-bottom: 0;
  }
  .gumtree-rebrand .block-text.negative-margin-top {
    margin-top: -15%;
  }
  .gumtree-rebrand .block-text .content-container {
    max-width: 570px;
  }
  .gumtree-rebrand .block-text .content-container .text-container.large-margin-bottom {
    margin-bottom: 70px;
  }
  .gumtree-rebrand .block-text .content-container .quote-container .blockquote .quote {
    margin-left: -128px;
    margin-right: -128px;
  }
  .gumtree-rebrand .block-image {
    max-height: 600px;
  }
  .gumtree-rebrand .block-image.laptop-image .image-container {
    max-width: 675px;
  }
  .gumtree-rebrand .block-image.mobile-animation {
    padding-top: 140px;
    padding-bottom: 125px;
  }
  .gumtree-rebrand .block-image .image-container img {
    left: initial;
    width: 100%;
    transform: translateX(0);
  }
  .gumtree-rebrand .block-video video,
  .gumtree-rebrand .block-video .speaker-control {
    right: 15px;
    bottom: 5px;
  }
}
@media (min-width: 1200px) {
  .gumtree-rebrand p.quote {
    font-size: 54px;
  }
  .gumtree-rebrand .block-text {
    margin-top: 130px;
    margin-bottom: 125px;
  }
  .gumtree-rebrand .block-text.no-margin-bottom {
    margin-bottom: 0;
  }
  .gumtree-rebrand .block-text.negative-margin-top {
    margin-top: -200px;
  }
  .gumtree-rebrand .block-text .content-container {
    max-width: 680px;
  }
  .gumtree-rebrand .block-text .content-container .quote-container .blockquote .quote {
    margin-left: -130px;
    margin-right: -130px;
  }
  .gumtree-rebrand .block-image {
    max-height: 700px;
  }
  .gumtree-rebrand .block-image.new-brand .image-container {
    height: 700px;
    position: relative;
  }
  .gumtree-rebrand .block-image.new-brand .image-container img {
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
  }
  .gumtree-rebrand .block-image.laptop-image .image-container {
    max-width: 810px;
  }
  .gumtree-rebrand .block-image.mobile-animation {
    padding-top: 150px;
    padding-bottom: 135px;
  }
  .gumtree-rebrand .block-image.mobile-animation .image-container .spinner-container {
    width: 57%;
  }
  .gumtree-rebrand .block-image.mobile-animation .image-container img {
    max-width: 360px;
  }
  .gumtree-rebrand .block-video video,
  .gumtree-rebrand .block-video .speaker-control {
    bottom: 7px;
  }
}
* {
  margin: 0px;
  padding: 0px;
}
*[contenteditable] {
  -webkit-user-select: auto;
}
img {
  display: block;
}
html {
  height: 100%;
  min-width: 320px;
}
a {
  text-decoration: none;
}
.clearfix {
  zoom: 1;
}
.clearfix:after,
.clearfix:before {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
body {
  font: 100 58px/1.2 'AvantGardeGothicITCW01X';
  color: #131313;
  height: 100%;
  background-color: #fff;
  text-align: center;
}
video,
a {
  cursor: pointer;
}
#main {
  min-height: 1200px;
}
.container {
  position: relative;
  height: 100%;
  margin: 15px;
}
.container.overflow {
  position: fixed;
}
#preloader {
  height: 100%;
  width: 100%;
  position: fixed;
  background: #000;
  top: 0;
  z-index: 100;
}
.box {
  position: absolute;
  left: 0;
  height: 100%;
  background: #09f;
}
.hidden {
  opacity: 0;
}
.hide-desktop {
  display: none;
}
.cover {
  background-size: cover;
  transform: translate3d(0, 0, 0);
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}
.clear-text p,
.clear-text .title,
.clear-text .second-title,
.clear-text .button,
.clear-text .goto,
.clear-text span {
  color: #fff;
}
.clear-text .goto {
  border-color: #fff;
}
.clear-text .half p {
  color: #a8a8a8;
}
@media (max-width: 1024px) {
  .clear-text .half p {
    color: #fff;
  }
}
@media (max-width: 768px) {
  .hide-mobile {
    display: none;
  }
  .hide-desktop {
    display: block;
  }
}
@media (smallmobile) {
  .container {
    margin: 5px;
  }
}