@charset "UTF-8";
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/open-sans/open-sans-v27-latin-300.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/open-sans/open-sans-v27-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/open-sans/open-sans-v27-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/open-sans/open-sans-v27-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/open-sans/open-sans-v27-latin-800.woff2") format("woff2");
}
.ff-container {
  display: inline-block;
  position: relative;
  background: rgba(0, 0, 0, 0.5) url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHdpZHRoPSc1MHB4JyBoZWlnaHQ9JzUwcHgnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIiBjbGFzcz0idWlsLXNwaW4iPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJub25lIiBjbGFzcz0iYmsiPjwvcmVjdD48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1MCA1MCkiPjxnIHRyYW5zZm9ybT0icm90YXRlKDApIHRyYW5zbGF0ZSgzNCAwKSI+PGNpcmNsZSBjeD0iMCIgY3k9IjAiIHI9IjgiIGZpbGw9IiNmZmZmZmYiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGZyb209IjEiIHRvPSIwLjEiIGJlZ2luPSIwcyIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InNjYWxlIiBmcm9tPSIxLjUiIHRvPSIxIiBiZWdpbj0iMHMiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGVUcmFuc2Zvcm0+PC9jaXJjbGU+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDQ1KSB0cmFuc2xhdGUoMzQgMCkiPjxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSI4IiBmaWxsPSIjZmZmZmZmIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiBmcm9tPSIxIiB0bz0iMC4xIiBiZWdpbj0iMC4xMnMiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+PGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJzY2FsZSIgZnJvbT0iMS41IiB0bz0iMSIgYmVnaW49IjAuMTJzIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlVHJhbnNmb3JtPjwvY2lyY2xlPjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCkgdHJhbnNsYXRlKDM0IDApIj48Y2lyY2xlIGN4PSIwIiBjeT0iMCIgcj0iOCIgZmlsbD0iI2ZmZmZmZiI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgZnJvbT0iMSIgdG89IjAuMSIgYmVnaW49IjAuMjVzIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0ic2NhbGUiIGZyb209IjEuNSIgdG89IjEiIGJlZ2luPSIwLjI1cyIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZVRyYW5zZm9ybT48L2NpcmNsZT48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTM1KSB0cmFuc2xhdGUoMzQgMCkiPjxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSI4IiBmaWxsPSIjZmZmZmZmIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiBmcm9tPSIxIiB0bz0iMC4xIiBiZWdpbj0iMC4zN3MiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+PGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJzY2FsZSIgZnJvbT0iMS41IiB0bz0iMSIgYmVnaW49IjAuMzdzIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlVHJhbnNmb3JtPjwvY2lyY2xlPjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxODApIHRyYW5zbGF0ZSgzNCAwKSI+PGNpcmNsZSBjeD0iMCIgY3k9IjAiIHI9IjgiIGZpbGw9IiNmZmZmZmYiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGZyb209IjEiIHRvPSIwLjEiIGJlZ2luPSIwLjVzIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0ic2NhbGUiIGZyb209IjEuNSIgdG89IjEiIGJlZ2luPSIwLjVzIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlVHJhbnNmb3JtPjwvY2lyY2xlPjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMjUpIHRyYW5zbGF0ZSgzNCAwKSI+PGNpcmNsZSBjeD0iMCIgY3k9IjAiIHI9IjgiIGZpbGw9IiNmZmZmZmYiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGZyb209IjEiIHRvPSIwLjEiIGJlZ2luPSIwLjYycyIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InNjYWxlIiBmcm9tPSIxLjUiIHRvPSIxIiBiZWdpbj0iMC42MnMiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGVUcmFuc2Zvcm0+PC9jaXJjbGU+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDI3MCkgdHJhbnNsYXRlKDM0IDApIj48Y2lyY2xlIGN4PSIwIiBjeT0iMCIgcj0iOCIgZmlsbD0iI2ZmZmZmZiI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgZnJvbT0iMSIgdG89IjAuMSIgYmVnaW49IjAuNzVzIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0ic2NhbGUiIGZyb209IjEuNSIgdG89IjEiIGJlZ2luPSIwLjc1cyIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZVRyYW5zZm9ybT48L2NpcmNsZT48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzE1KSB0cmFuc2xhdGUoMzQgMCkiPjxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSI4IiBmaWxsPSIjZmZmZmZmIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiBmcm9tPSIxIiB0bz0iMC4xIiBiZWdpbj0iMC44N3MiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+PGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJzY2FsZSIgZnJvbT0iMS41IiB0bz0iMSIgYmVnaW49IjAuODdzIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlVHJhbnNmb3JtPjwvY2lyY2xlPjwvZz48L2c+PC9zdmc+") center center no-repeat;
}
.ff-container .ff-image {
  z-index: 0;
  vertical-align: top;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
}
.ff-container .ff-image.ff-image-ready {
  opacity: 1;
}
.ff-container .ff-canvas {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
  vertical-align: top;
  opacity: 0;
}
.ff-container .ff-canvas.ff-responsive {
  width: 100%;
}
.ff-container .ff-canvas.ff-canvas-ready {
  -webkit-transition: opacity 300ms;
  -o-transition: opacity 300ms;
  transition: opacity 300ms;
  opacity: 1;
}
.ff-container .ff-canvas.ff-canvas-active {
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
  opacity: 0;
}
.ff-container.ff-responsive {
  width: 100%;
}
.ff-container.ff-responsive .ff-image {
  width: 100%;
}
.ff-container.ff-responsive .ff-canvas-ready {
  width: 100%;
}

/*  ========================================================================
 *  Frosty.js
 *  https://github.com/owensbla/frosty
 *  http://labs.blakeowens.com/frosty
 *  ======================================================================== */
.tip {
  background-color: black;
  background-color: rgba(0, 0, 0, 0.8);
  color: #eee;
  font-size: 11px;
  line-height: 16px;
  max-width: 200px;
  padding: 4px 8px;
}
.tip.success {
  background-color: #47fe42;
  background-color: rgba(71, 254, 66, 0.8);
  color: #025600;
}
.tip.error {
  background-color: #ff7f86;
  background-color: rgba(255, 127, 134, 0.8);
  color: #7f0006;
}
.tip.light {
  background-color: #ebebeb;
  background-color: rgba(235, 235, 235, 0.8);
  color: #222;
}

.tip[class*=arrow]:before {
  content: " ";
  position: absolute;
  border: solid transparent;
  width: 0px;
  height: 0px;
  border-width: 5px;
  border-color: black;
  border-color: rgba(0, 0, 0, 0.8);
}

.success[class*=arrow]:before {
  border-color: #47fe42;
  border-color: rgba(71, 254, 66, 0.8);
}

.error[class*=arrow]:before {
  border-color: #ff7f86;
  border-color: rgba(255, 127, 134, 0.8);
}

.light[class*=arrow]:before {
  border-color: #ebebeb;
  border-color: rgba(235, 235, 235, 0.8);
}

.tip.arrow-right:before {
  border-right-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
  margin-top: -5px;
  top: 50%;
  left: 100%;
}

.tip.arrow-left:before {
  border-left-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
  margin-top: -5px;
  top: 50%;
  right: 100%;
}

.tip.arrow-top:before {
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  margin-left: -5px;
  bottom: 100%;
  left: 50%;
}

.tip.arrow-bottom:before {
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  margin-left: -5px;
  top: 100%;
  left: 50%;
}

/*!
 *  Font Awesome 4.1.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: "FontAwesome";
  src: url("../fonts/fontawesome-webfont%EF%B9%96v=4.1.0.eot");
  src: url("../fonts/fontawesome-webfont%EF%B9%96.eot#iefix&v=4.1.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont%EF%B9%96v=4.1.0.woff") format("woff"), url("../fonts/fontawesome-webfont%EF%B9%96v=4.1.0.ttf") format("truetype"), url("../fonts/fontawesome-webfont%EF%B9%96v=4.1.0.svg#fontawesomeregular") format("svg");
  font-weight: normal;
  font-style: normal;
}
.fa {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* makes the font 33% larger relative to the icon container */
.fa-lg {
  font-size: 1.3333333333em;
  line-height: 0.75em;
  vertical-align: -15%;
}

.fa-2x {
  font-size: 2em;
}

.fa-3x {
  font-size: 3em;
}

.fa-4x {
  font-size: 4em;
}

.fa-5x {
  font-size: 5em;
}

.fa-fw {
  width: 1.2857142857em;
  text-align: center;
}

.fa-ul {
  padding-left: 0;
  margin-left: 2.1428571429em;
  list-style-type: none;
}
.fa-ul > li {
  position: relative;
}

.fa-li {
  position: absolute;
  left: -2.1428571429em;
  width: 2.1428571429em;
  top: 0.1428571429em;
  text-align: center;
}
.fa-li.fa-lg {
  left: -1.8571428571em;
}

.fa-border {
  padding: 0.2em 0.25em 0.15em;
  border: solid 0.08em #eee;
  border-radius: 0.1em;
}

.pull-right {
  float: right;
}

.pull-left {
  float: left;
}

.fa.pull-left {
  margin-right: 0.3em;
}
.fa.pull-right {
  margin-left: 0.3em;
}

.fa-spin {
  -webkit-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear;
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
.fa-rotate-90 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.fa-rotate-180 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.fa-rotate-270 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

.fa-flip-horizontal {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.fa-flip-vertical {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  -webkit-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}

.fa-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}

.fa-stack-1x, .fa-stack-2x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}

.fa-stack-1x {
  line-height: inherit;
}

.fa-stack-2x {
  font-size: 2em;
}

.fa-inverse {
  color: #fff;
}

/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
   readers do not read off random characters that represent icons */
.fa-glass:before {
  content: "\f000";
}

.fa-music:before {
  content: "\f001";
}

.fa-search:before {
  content: "\f002";
}

.fa-envelope-o:before {
  content: "\f003";
}

.fa-heart:before {
  content: "\f004";
}

.fa-star:before {
  content: "\f005";
}

.fa-star-o:before {
  content: "\f006";
}

.fa-user:before {
  content: "\f007";
}

.fa-film:before {
  content: "\f008";
}

.fa-th-large:before {
  content: "\f009";
}

.fa-th:before {
  content: "\f00a";
}

.fa-th-list:before {
  content: "\f00b";
}

.fa-check:before {
  content: "\f00c";
}

.fa-times:before {
  content: "\f00d";
}

.fa-search-plus:before {
  content: "\f00e";
}

.fa-search-minus:before {
  content: "\f010";
}

.fa-power-off:before {
  content: "\f011";
}

.fa-signal:before {
  content: "\f012";
}

.fa-gear:before,
.fa-cog:before {
  content: "\f013";
}

.fa-trash-o:before {
  content: "\f014";
}

.fa-home:before {
  content: "\f015";
}

.fa-file-o:before {
  content: "\f016";
}

.fa-clock-o:before {
  content: "\f017";
}

.fa-road:before {
  content: "\f018";
}

.fa-download:before {
  content: "\f019";
}

.fa-arrow-circle-o-down:before {
  content: "\f01a";
}

.fa-arrow-circle-o-up:before {
  content: "\f01b";
}

.fa-inbox:before {
  content: "\f01c";
}

.fa-play-circle-o:before {
  content: "\f01d";
}

.fa-rotate-right:before,
.fa-repeat:before {
  content: "\f01e";
}

.fa-refresh:before {
  content: "\f021";
}

.fa-list-alt:before {
  content: "\f022";
}

.fa-lock:before {
  content: "\f023";
}

.fa-flag:before {
  content: "\f024";
}

.fa-headphones:before {
  content: "\f025";
}

.fa-volume-off:before {
  content: "\f026";
}

.fa-volume-down:before {
  content: "\f027";
}

.fa-volume-up:before {
  content: "\f028";
}

.fa-qrcode:before {
  content: "\f029";
}

.fa-barcode:before {
  content: "\f02a";
}

.fa-tag:before {
  content: "\f02b";
}

.fa-tags:before {
  content: "\f02c";
}

.fa-book:before {
  content: "\f02d";
}

.fa-bookmark:before {
  content: "\f02e";
}

.fa-print:before {
  content: "\f02f";
}

.fa-camera:before {
  content: "\f030";
}

.fa-font:before {
  content: "\f031";
}

.fa-bold:before {
  content: "\f032";
}

.fa-italic:before {
  content: "\f033";
}

.fa-text-height:before {
  content: "\f034";
}

.fa-text-width:before {
  content: "\f035";
}

.fa-align-left:before {
  content: "\f036";
}

.fa-align-center:before {
  content: "\f037";
}

.fa-align-right:before {
  content: "\f038";
}

.fa-align-justify:before {
  content: "\f039";
}

.fa-list:before {
  content: "\f03a";
}

.fa-dedent:before,
.fa-outdent:before {
  content: "\f03b";
}

.fa-indent:before {
  content: "\f03c";
}

.fa-video-camera:before {
  content: "\f03d";
}

.fa-photo:before,
.fa-image:before,
.fa-picture-o:before {
  content: "\f03e";
}

.fa-pencil:before {
  content: "\f040";
}

.fa-map-marker:before {
  content: "\f041";
}

.fa-adjust:before {
  content: "\f042";
}

.fa-tint:before {
  content: "\f043";
}

.fa-edit:before,
.fa-pencil-square-o:before {
  content: "\f044";
}

.fa-share-square-o:before {
  content: "\f045";
}

.fa-check-square-o:before {
  content: "\f046";
}

.fa-arrows:before {
  content: "\f047";
}

.fa-step-backward:before {
  content: "\f048";
}

.fa-fast-backward:before {
  content: "\f049";
}

.fa-backward:before {
  content: "\f04a";
}

.fa-play:before {
  content: "\f04b";
}

.fa-pause:before {
  content: "\f04c";
}

.fa-stop:before {
  content: "\f04d";
}

.fa-forward:before {
  content: "\f04e";
}

.fa-fast-forward:before {
  content: "\f050";
}

.fa-step-forward:before {
  content: "\f051";
}

.fa-eject:before {
  content: "\f052";
}

.fa-chevron-left:before {
  content: "\f053";
}

.fa-chevron-right:before {
  content: "\f054";
}

.fa-plus-circle:before {
  content: "\f055";
}

.fa-minus-circle:before {
  content: "\f056";
}

.fa-times-circle:before {
  content: "\f057";
}

.fa-check-circle:before {
  content: "\f058";
}

.fa-question-circle:before {
  content: "\f059";
}

.fa-info-circle:before {
  content: "\f05a";
}

.fa-crosshairs:before {
  content: "\f05b";
}

.fa-times-circle-o:before {
  content: "\f05c";
}

.fa-check-circle-o:before {
  content: "\f05d";
}

.fa-ban:before {
  content: "\f05e";
}

.fa-arrow-left:before {
  content: "\f060";
}

.fa-arrow-right:before {
  content: "\f061";
}

.fa-arrow-up:before {
  content: "\f062";
}

.fa-arrow-down:before {
  content: "\f063";
}

.fa-mail-forward:before,
.fa-share:before {
  content: "\f064";
}

.fa-expand:before {
  content: "\f065";
}

.fa-compress:before {
  content: "\f066";
}

.fa-plus:before {
  content: "\f067";
}

.fa-minus:before {
  content: "\f068";
}

.fa-asterisk:before {
  content: "\f069";
}

.fa-exclamation-circle:before {
  content: "\f06a";
}

.fa-gift:before {
  content: "\f06b";
}

.fa-leaf:before {
  content: "\f06c";
}

.fa-fire:before {
  content: "\f06d";
}

.fa-eye:before {
  content: "\f06e";
}

.fa-eye-slash:before {
  content: "\f070";
}

.fa-warning:before,
.fa-exclamation-triangle:before {
  content: "\f071";
}

.fa-plane:before {
  content: "\f072";
}

.fa-calendar:before {
  content: "\f073";
}

.fa-random:before {
  content: "\f074";
}

.fa-comment:before {
  content: "\f075";
}

.fa-magnet:before {
  content: "\f076";
}

.fa-chevron-up:before {
  content: "\f077";
}

.fa-chevron-down:before {
  content: "\f078";
}

.fa-retweet:before {
  content: "\f079";
}

.fa-shopping-cart:before {
  content: "\f07a";
}

.fa-folder:before {
  content: "\f07b";
}

.fa-folder-open:before {
  content: "\f07c";
}

.fa-arrows-v:before {
  content: "\f07d";
}

.fa-arrows-h:before {
  content: "\f07e";
}

.fa-bar-chart-o:before {
  content: "\f080";
}

.fa-twitter-square:before {
  content: "\f081";
}

.fa-facebook-square:before {
  content: "\f082";
}

.fa-camera-retro:before {
  content: "\f083";
}

.fa-key:before {
  content: "\f084";
}

.fa-gears:before,
.fa-cogs:before {
  content: "\f085";
}

.fa-comments:before {
  content: "\f086";
}

.fa-thumbs-o-up:before {
  content: "\f087";
}

.fa-thumbs-o-down:before {
  content: "\f088";
}

.fa-star-half:before {
  content: "\f089";
}

.fa-heart-o:before {
  content: "\f08a";
}

.fa-sign-out:before {
  content: "\f08b";
}

.fa-linkedin-square:before {
  content: "\f08c";
}

.fa-thumb-tack:before {
  content: "\f08d";
}

.fa-external-link:before {
  content: "\f08e";
}

.fa-sign-in:before {
  content: "\f090";
}

.fa-trophy:before {
  content: "\f091";
}

.fa-github-square:before {
  content: "\f092";
}

.fa-upload:before {
  content: "\f093";
}

.fa-lemon-o:before {
  content: "\f094";
}

.fa-phone:before {
  content: "\f095";
}

.fa-square-o:before {
  content: "\f096";
}

.fa-bookmark-o:before {
  content: "\f097";
}

.fa-phone-square:before {
  content: "\f098";
}

.fa-twitter:before {
  content: "\f099";
}

.fa-facebook:before {
  content: "\f09a";
}

.fa-github:before {
  content: "\f09b";
}

.fa-unlock:before {
  content: "\f09c";
}

.fa-credit-card:before {
  content: "\f09d";
}

.fa-rss:before {
  content: "\f09e";
}

.fa-hdd-o:before {
  content: "\f0a0";
}

.fa-bullhorn:before {
  content: "\f0a1";
}

.fa-bell:before {
  content: "\f0f3";
}

.fa-certificate:before {
  content: "\f0a3";
}

.fa-hand-o-right:before {
  content: "\f0a4";
}

.fa-hand-o-left:before {
  content: "\f0a5";
}

.fa-hand-o-up:before {
  content: "\f0a6";
}

.fa-hand-o-down:before {
  content: "\f0a7";
}

.fa-arrow-circle-left:before {
  content: "\f0a8";
}

.fa-arrow-circle-right:before {
  content: "\f0a9";
}

.fa-arrow-circle-up:before {
  content: "\f0aa";
}

.fa-arrow-circle-down:before {
  content: "\f0ab";
}

.fa-globe:before {
  content: "\f0ac";
}

.fa-wrench:before {
  content: "\f0ad";
}

.fa-tasks:before {
  content: "\f0ae";
}

.fa-filter:before {
  content: "\f0b0";
}

.fa-briefcase:before {
  content: "\f0b1";
}

.fa-arrows-alt:before {
  content: "\f0b2";
}

.fa-group:before,
.fa-users:before {
  content: "\f0c0";
}

.fa-chain:before,
.fa-link:before {
  content: "\f0c1";
}

.fa-cloud:before {
  content: "\f0c2";
}

.fa-flask:before {
  content: "\f0c3";
}

.fa-cut:before,
.fa-scissors:before {
  content: "\f0c4";
}

.fa-copy:before,
.fa-files-o:before {
  content: "\f0c5";
}

.fa-paperclip:before {
  content: "\f0c6";
}

.fa-save:before,
.fa-floppy-o:before {
  content: "\f0c7";
}

.fa-square:before {
  content: "\f0c8";
}

.fa-navicon:before,
.fa-reorder:before,
.fa-bars:before {
  content: "\f0c9";
}

.fa-list-ul:before {
  content: "\f0ca";
}

.fa-list-ol:before {
  content: "\f0cb";
}

.fa-strikethrough:before {
  content: "\f0cc";
}

.fa-underline:before {
  content: "\f0cd";
}

.fa-table:before {
  content: "\f0ce";
}

.fa-magic:before {
  content: "\f0d0";
}

.fa-truck:before {
  content: "\f0d1";
}

.fa-pinterest:before {
  content: "\f0d2";
}

.fa-pinterest-square:before {
  content: "\f0d3";
}

.fa-google-plus-square:before {
  content: "\f0d4";
}

.fa-google-plus:before {
  content: "\f0d5";
}

.fa-money:before {
  content: "\f0d6";
}

.fa-caret-down:before {
  content: "\f0d7";
}

.fa-caret-up:before {
  content: "\f0d8";
}

.fa-caret-left:before {
  content: "\f0d9";
}

.fa-caret-right:before {
  content: "\f0da";
}

.fa-columns:before {
  content: "\f0db";
}

.fa-unsorted:before,
.fa-sort:before {
  content: "\f0dc";
}

.fa-sort-down:before,
.fa-sort-desc:before {
  content: "\f0dd";
}

.fa-sort-up:before,
.fa-sort-asc:before {
  content: "\f0de";
}

.fa-envelope:before {
  content: "\f0e0";
}

.fa-linkedin:before {
  content: "\f0e1";
}

.fa-rotate-left:before,
.fa-undo:before {
  content: "\f0e2";
}

.fa-legal:before,
.fa-gavel:before {
  content: "\f0e3";
}

.fa-dashboard:before,
.fa-tachometer:before {
  content: "\f0e4";
}

.fa-comment-o:before {
  content: "\f0e5";
}

.fa-comments-o:before {
  content: "\f0e6";
}

.fa-flash:before,
.fa-bolt:before {
  content: "\f0e7";
}

.fa-sitemap:before {
  content: "\f0e8";
}

.fa-umbrella:before {
  content: "\f0e9";
}

.fa-paste:before,
.fa-clipboard:before {
  content: "\f0ea";
}

.fa-lightbulb-o:before {
  content: "\f0eb";
}

.fa-exchange:before {
  content: "\f0ec";
}

.fa-cloud-download:before {
  content: "\f0ed";
}

.fa-cloud-upload:before {
  content: "\f0ee";
}

.fa-user-md:before {
  content: "\f0f0";
}

.fa-stethoscope:before {
  content: "\f0f1";
}

.fa-suitcase:before {
  content: "\f0f2";
}

.fa-bell-o:before {
  content: "\f0a2";
}

.fa-coffee:before {
  content: "\f0f4";
}

.fa-cutlery:before {
  content: "\f0f5";
}

.fa-file-text-o:before {
  content: "\f0f6";
}

.fa-building-o:before {
  content: "\f0f7";
}

.fa-hospital-o:before {
  content: "\f0f8";
}

.fa-ambulance:before {
  content: "\f0f9";
}

.fa-medkit:before {
  content: "\f0fa";
}

.fa-fighter-jet:before {
  content: "\f0fb";
}

.fa-beer:before {
  content: "\f0fc";
}

.fa-h-square:before {
  content: "\f0fd";
}

.fa-plus-square:before {
  content: "\f0fe";
}

.fa-angle-double-left:before {
  content: "\f100";
}

.fa-angle-double-right:before {
  content: "\f101";
}

.fa-angle-double-up:before {
  content: "\f102";
}

.fa-angle-double-down:before {
  content: "\f103";
}

.fa-angle-left:before {
  content: "\f104";
}

.fa-angle-right:before {
  content: "\f105";
}

.fa-angle-up:before {
  content: "\f106";
}

.fa-angle-down:before {
  content: "\f107";
}

.fa-desktop:before {
  content: "\f108";
}

.fa-laptop:before {
  content: "\f109";
}

.fa-tablet:before {
  content: "\f10a";
}

.fa-mobile-phone:before,
.fa-mobile:before {
  content: "\f10b";
}

.fa-circle-o:before {
  content: "\f10c";
}

.fa-quote-left:before {
  content: "\f10d";
}

.fa-quote-right:before {
  content: "\f10e";
}

.fa-spinner:before {
  content: "\f110";
}

.fa-circle:before {
  content: "\f111";
}

.fa-mail-reply:before,
.fa-reply:before {
  content: "\f112";
}

.fa-github-alt:before {
  content: "\f113";
}

.fa-folder-o:before {
  content: "\f114";
}

.fa-folder-open-o:before {
  content: "\f115";
}

.fa-smile-o:before {
  content: "\f118";
}

.fa-frown-o:before {
  content: "\f119";
}

.fa-meh-o:before {
  content: "\f11a";
}

.fa-gamepad:before {
  content: "\f11b";
}

.fa-keyboard-o:before {
  content: "\f11c";
}

.fa-flag-o:before {
  content: "\f11d";
}

.fa-flag-checkered:before {
  content: "\f11e";
}

.fa-terminal:before {
  content: "\f120";
}

.fa-code:before {
  content: "\f121";
}

.fa-mail-reply-all:before,
.fa-reply-all:before {
  content: "\f122";
}

.fa-star-half-empty:before,
.fa-star-half-full:before,
.fa-star-half-o:before {
  content: "\f123";
}

.fa-location-arrow:before {
  content: "\f124";
}

.fa-crop:before {
  content: "\f125";
}

.fa-code-fork:before {
  content: "\f126";
}

.fa-unlink:before,
.fa-chain-broken:before {
  content: "\f127";
}

.fa-question:before {
  content: "\f128";
}

.fa-info:before {
  content: "\f129";
}

.fa-exclamation:before {
  content: "\f12a";
}

.fa-superscript:before {
  content: "\f12b";
}

.fa-subscript:before {
  content: "\f12c";
}

.fa-eraser:before {
  content: "\f12d";
}

.fa-puzzle-piece:before {
  content: "\f12e";
}

.fa-microphone:before {
  content: "\f130";
}

.fa-microphone-slash:before {
  content: "\f131";
}

.fa-shield:before {
  content: "\f132";
}

.fa-calendar-o:before {
  content: "\f133";
}

.fa-fire-extinguisher:before {
  content: "\f134";
}

.fa-rocket:before {
  content: "\f135";
}

.fa-maxcdn:before {
  content: "\f136";
}

.fa-chevron-circle-left:before {
  content: "\f137";
}

.fa-chevron-circle-right:before {
  content: "\f138";
}

.fa-chevron-circle-up:before {
  content: "\f139";
}

.fa-chevron-circle-down:before {
  content: "\f13a";
}

.fa-html5:before {
  content: "\f13b";
}

.fa-css3:before {
  content: "\f13c";
}

.fa-anchor:before {
  content: "\f13d";
}

.fa-unlock-alt:before {
  content: "\f13e";
}

.fa-bullseye:before {
  content: "\f140";
}

.fa-ellipsis-h:before {
  content: "\f141";
}

.fa-ellipsis-v:before {
  content: "\f142";
}

.fa-rss-square:before {
  content: "\f143";
}

.fa-play-circle:before {
  content: "\f144";
}

.fa-ticket:before {
  content: "\f145";
}

.fa-minus-square:before {
  content: "\f146";
}

.fa-minus-square-o:before {
  content: "\f147";
}

.fa-level-up:before {
  content: "\f148";
}

.fa-level-down:before {
  content: "\f149";
}

.fa-check-square:before {
  content: "\f14a";
}

.fa-pencil-square:before {
  content: "\f14b";
}

.fa-external-link-square:before {
  content: "\f14c";
}

.fa-share-square:before {
  content: "\f14d";
}

.fa-compass:before {
  content: "\f14e";
}

.fa-toggle-down:before,
.fa-caret-square-o-down:before {
  content: "\f150";
}

.fa-toggle-up:before,
.fa-caret-square-o-up:before {
  content: "\f151";
}

.fa-toggle-right:before,
.fa-caret-square-o-right:before {
  content: "\f152";
}

.fa-euro:before,
.fa-eur:before {
  content: "\f153";
}

.fa-gbp:before {
  content: "\f154";
}

.fa-dollar:before,
.fa-usd:before {
  content: "\f155";
}

.fa-rupee:before,
.fa-inr:before {
  content: "\f156";
}

.fa-cny:before,
.fa-rmb:before,
.fa-yen:before,
.fa-jpy:before {
  content: "\f157";
}

.fa-ruble:before,
.fa-rouble:before,
.fa-rub:before {
  content: "\f158";
}

.fa-won:before,
.fa-krw:before {
  content: "\f159";
}

.fa-bitcoin:before,
.fa-btc:before {
  content: "\f15a";
}

.fa-file:before {
  content: "\f15b";
}

.fa-file-text:before {
  content: "\f15c";
}

.fa-sort-alpha-asc:before {
  content: "\f15d";
}

.fa-sort-alpha-desc:before {
  content: "\f15e";
}

.fa-sort-amount-asc:before {
  content: "\f160";
}

.fa-sort-amount-desc:before {
  content: "\f161";
}

.fa-sort-numeric-asc:before {
  content: "\f162";
}

.fa-sort-numeric-desc:before {
  content: "\f163";
}

.fa-thumbs-up:before {
  content: "\f164";
}

.fa-thumbs-down:before {
  content: "\f165";
}

.fa-youtube-square:before {
  content: "\f166";
}

.fa-youtube:before {
  content: "\f167";
}

.fa-xing:before {
  content: "\f168";
}

.fa-xing-square:before {
  content: "\f169";
}

.fa-youtube-play:before {
  content: "\f16a";
}

.fa-dropbox:before {
  content: "\f16b";
}

.fa-stack-overflow:before {
  content: "\f16c";
}

.fa-instagram:before {
  content: "\f16d";
}

.fa-flickr:before {
  content: "\f16e";
}

.fa-adn:before {
  content: "\f170";
}

.fa-bitbucket:before {
  content: "\f171";
}

.fa-bitbucket-square:before {
  content: "\f172";
}

.fa-tumblr:before {
  content: "\f173";
}

.fa-tumblr-square:before {
  content: "\f174";
}

.fa-long-arrow-down:before {
  content: "\f175";
}

.fa-long-arrow-up:before {
  content: "\f176";
}

.fa-long-arrow-left:before {
  content: "\f177";
}

.fa-long-arrow-right:before {
  content: "\f178";
}

.fa-apple:before {
  content: "\f179";
}

.fa-windows:before {
  content: "\f17a";
}

.fa-android:before {
  content: "\f17b";
}

.fa-linux:before {
  content: "\f17c";
}

.fa-dribbble:before {
  content: "\f17d";
}

.fa-skype:before {
  content: "\f17e";
}

.fa-foursquare:before {
  content: "\f180";
}

.fa-trello:before {
  content: "\f181";
}

.fa-female:before {
  content: "\f182";
}

.fa-male:before {
  content: "\f183";
}

.fa-gittip:before {
  content: "\f184";
}

.fa-sun-o:before {
  content: "\f185";
}

.fa-moon-o:before {
  content: "\f186";
}

.fa-archive:before {
  content: "\f187";
}

.fa-bug:before {
  content: "\f188";
}

.fa-vk:before {
  content: "\f189";
}

.fa-weibo:before {
  content: "\f18a";
}

.fa-renren:before {
  content: "\f18b";
}

.fa-pagelines:before {
  content: "\f18c";
}

.fa-stack-exchange:before {
  content: "\f18d";
}

.fa-arrow-circle-o-right:before {
  content: "\f18e";
}

.fa-arrow-circle-o-left:before {
  content: "\f190";
}

.fa-toggle-left:before,
.fa-caret-square-o-left:before {
  content: "\f191";
}

.fa-dot-circle-o:before {
  content: "\f192";
}

.fa-wheelchair:before {
  content: "\f193";
}

.fa-vimeo-square:before {
  content: "\f194";
}

.fa-turkish-lira:before,
.fa-try:before {
  content: "\f195";
}

.fa-plus-square-o:before {
  content: "\f196";
}

.fa-space-shuttle:before {
  content: "\f197";
}

.fa-slack:before {
  content: "\f198";
}

.fa-envelope-square:before {
  content: "\f199";
}

.fa-wordpress:before {
  content: "\f19a";
}

.fa-openid:before {
  content: "\f19b";
}

.fa-institution:before,
.fa-bank:before,
.fa-university:before {
  content: "\f19c";
}

.fa-mortar-board:before,
.fa-graduation-cap:before {
  content: "\f19d";
}

.fa-yahoo:before {
  content: "\f19e";
}

.fa-google:before {
  content: "\f1a0";
}

.fa-reddit:before {
  content: "\f1a1";
}

.fa-reddit-square:before {
  content: "\f1a2";
}

.fa-stumbleupon-circle:before {
  content: "\f1a3";
}

.fa-stumbleupon:before {
  content: "\f1a4";
}

.fa-delicious:before {
  content: "\f1a5";
}

.fa-digg:before {
  content: "\f1a6";
}

.fa-pied-piper-square:before,
.fa-pied-piper:before {
  content: "\f1a7";
}

.fa-pied-piper-alt:before {
  content: "\f1a8";
}

.fa-drupal:before {
  content: "\f1a9";
}

.fa-joomla:before {
  content: "\f1aa";
}

.fa-language:before {
  content: "\f1ab";
}

.fa-fax:before {
  content: "\f1ac";
}

.fa-building:before {
  content: "\f1ad";
}

.fa-child:before {
  content: "\f1ae";
}

.fa-paw:before {
  content: "\f1b0";
}

.fa-spoon:before {
  content: "\f1b1";
}

.fa-cube:before {
  content: "\f1b2";
}

.fa-cubes:before {
  content: "\f1b3";
}

.fa-behance:before {
  content: "\f1b4";
}

.fa-behance-square:before {
  content: "\f1b5";
}

.fa-steam:before {
  content: "\f1b6";
}

.fa-steam-square:before {
  content: "\f1b7";
}

.fa-recycle:before {
  content: "\f1b8";
}

.fa-automobile:before,
.fa-car:before {
  content: "\f1b9";
}

.fa-cab:before,
.fa-taxi:before {
  content: "\f1ba";
}

.fa-tree:before {
  content: "\f1bb";
}

.fa-spotify:before {
  content: "\f1bc";
}

.fa-deviantart:before {
  content: "\f1bd";
}

.fa-soundcloud:before {
  content: "\f1be";
}

.fa-database:before {
  content: "\f1c0";
}

.fa-file-pdf-o:before {
  content: "\f1c1";
}

.fa-file-word-o:before {
  content: "\f1c2";
}

.fa-file-excel-o:before {
  content: "\f1c3";
}

.fa-file-powerpoint-o:before {
  content: "\f1c4";
}

.fa-file-photo-o:before,
.fa-file-picture-o:before,
.fa-file-image-o:before {
  content: "\f1c5";
}

.fa-file-zip-o:before,
.fa-file-archive-o:before {
  content: "\f1c6";
}

.fa-file-sound-o:before,
.fa-file-audio-o:before {
  content: "\f1c7";
}

.fa-file-movie-o:before,
.fa-file-video-o:before {
  content: "\f1c8";
}

.fa-file-code-o:before {
  content: "\f1c9";
}

.fa-vine:before {
  content: "\f1ca";
}

.fa-codepen:before {
  content: "\f1cb";
}

.fa-jsfiddle:before {
  content: "\f1cc";
}

.fa-life-bouy:before,
.fa-life-saver:before,
.fa-support:before,
.fa-life-ring:before {
  content: "\f1cd";
}

.fa-circle-o-notch:before {
  content: "\f1ce";
}

.fa-ra:before,
.fa-rebel:before {
  content: "\f1d0";
}

.fa-ge:before,
.fa-empire:before {
  content: "\f1d1";
}

.fa-git-square:before {
  content: "\f1d2";
}

.fa-git:before {
  content: "\f1d3";
}

.fa-hacker-news:before {
  content: "\f1d4";
}

.fa-tencent-weibo:before {
  content: "\f1d5";
}

.fa-qq:before {
  content: "\f1d6";
}

.fa-wechat:before,
.fa-weixin:before {
  content: "\f1d7";
}

.fa-send:before,
.fa-paper-plane:before {
  content: "\f1d8";
}

.fa-send-o:before,
.fa-paper-plane-o:before {
  content: "\f1d9";
}

.fa-history:before {
  content: "\f1da";
}

.fa-circle-thin:before {
  content: "\f1db";
}

.fa-header:before {
  content: "\f1dc";
}

.fa-paragraph:before {
  content: "\f1dd";
}

.fa-sliders:before {
  content: "\f1de";
}

.fa-share-alt:before {
  content: "\f1e0";
}

.fa-share-alt-square:before {
  content: "\f1e1";
}

.fa-bomb:before {
  content: "\f1e2";
}

/* HTML5 ✰ Boilerplate
 * ==|== normalize ==========================================================
 */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
  display: block;
}

audio, canvas, video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

audio:not([controls]) {
  display: none;
}

[hidden] {
  display: none;
}

html {
  font-size: 100%;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-size: 13px;
  line-height: 1.231;
}

body, button, input, select, textarea {
  font-family: sans-serif;
  color: #222;
}

::-moz-selection {
  background: #77bbc9;
  color: #fff;
  text-shadow: none;
}

::selection {
  background: #77bbc9;
  color: #fff;
  text-shadow: none;
}

a {
  color: #00e;
}

a:hover {
  color: #06e;
}

a:focus {
  outline: thin dotted;
}

a:hover, a:active {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b, strong {
  font-weight: bold;
}

blockquote {
  margin: 1em 40px;
}

dfn {
  font-style: italic;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

ins {
  background: #ff9;
  color: #000;
  text-decoration: none;
}

mark {
  background: #ff0;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

pre, code, kbd, samp {
  font-family: monospace, monospace;
  _font-family: "courier new", monospace;
  font-size: 1em;
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

q {
  quotes: none;
}

q:before, q:after {
  content: "";
  content: none;
}

small {
  font-size: 85%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

ul, ol {
  margin: 1em 0;
  padding: 0 0 0 40px;
}

dd {
  margin: 0 0 0 40px;
}

nav ul, nav ol {
  list-style: none;
  list-style-image: none;
  margin: 0;
  padding: 0;
}

img {
  border: 0;
  -ms-interpolation-mode: bicubic;
  vertical-align: middle;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 0;
}

form {
  margin: 0;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

label {
  cursor: pointer;
}

legend {
  border: 0;
  *margin-left: -7px;
  padding: 0;
}

button, input, select, textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
  *vertical-align: middle;
}

button, input {
  line-height: normal;
  *overflow: visible;
}

table button, table input {
  *overflow: auto;
}

button, input[type=button], input[type=reset], input[type=submit] {
  cursor: pointer;
  -webkit-appearance: button;
}

input[type=checkbox], input[type=radio] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

input[type=search] {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical;
}

input:invalid, textarea:invalid {
  background-color: #f0dddd;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td {
  vertical-align: top;
}

/**
 * COLORS
 */
/**
 * FONTS & FONT SIZES
 */
/**
 * GENERAL STYLES
 */
html {
  -webkit-font-smoothing: antialiased;
}

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

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

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

svg {
  max-height: 100%;
}

/** Fonts**/
/*OPEN SANS*/
/**
 * GENERAL STYLES
 */
.inner {
  margin: 50px auto;
  max-width: 1440px;
}

#metaData {
  display: none;
}

.fa-stack-3x {
  font-size: 7em;
}

header, footer, article, nav, section {
  display: block;
}

h1 {
  font-size: 44px;
  line-height: 44px;
  color: #4e4e4e;
  font-weight: 300;
  margin: 0;
  padding: 0;
}

p {
  color: #4e4e4e;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 200;
}

h3 a, h3 a:link, h3 a:visited {
  text-decoration: none;
  color: #4e4e4e;
}

h3 a:hover {
  text-decoration: underline;
}

span.title {
  font-size: 24px;
  font-weight: 300;
}

.read-more {
  text-decoration: none;
  color: #040404;
  font-weight: 600;
  font-size: 14px;
  margin: 10px 0 0 0;
}

a {
  text-decoration: none;
  color: #666666;
  outline: 0;
}
a:link, a:visited {
  color: #666666;
}
a:hover {
  color: #7acbe4;
}

#isNoJS {
  display: none;
}

/**
  * SELECTION
  */
::-moz-selection {
  background: #AAA;
  /* Safari */
}
::selection {
  background: #AAA;
  /* Safari */
}

::-moz-selection {
  background: #AAA;
  /* Firefox */
}

/**
 * LINK STYLES
 */
/**
 * CLEARING UL MARGINS AND PADDINGS
 */
ul {
  margin: 0;
  padding: 0;
}
ul li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

/**
Cursor
**/
.cursor {
  margin: 0px;
}

.cursorNoClick {
  margin: 0px;
}

.clear {
  clear: both;
}

.clearfix:before, .clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1;
}

.no-wrap {
  white-space: nowrap;
}

.greyBg {
  background-color: #F7F7F5;
}

.fluid-img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}
.fluid-img.min-width {
  width: 100%;
}

.disable-hover,
.disable-hover * {
  pointer-events: none !important;
}

.preventSelect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.ScrollSceneIndicators {
  z-index: 1000 !important;
}

/*.block {
  overflow-y: hidden;
  overflow-y: auto;
}*/
#debug {
  position: fixed;
  z-index: 1000;
  top: 0px;
  right: 0px;
  width: 200px;
  height: 200px;
  display: none;
}

/** INTRO **/
#intro {
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 1250;
  background-color: #FFF;
}
#intro .logo {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -35px;
  margin-left: -35px;
  z-index: 400;
}

.header {
  min-height: 150px;
  position: relative;
  overflow: hidden;
  height: 600px;
}
.header .svgout {
  z-index: 300;
}
.header .logoDigitalAgency {
  position: relative;
  top: 364px;
  width: 374px;
  margin: auto;
  opacity: 0;
}
.header .logobrushed {
  position: absolute;
  text-align: center;
  z-index: 200;
  width: 100%;
}
.header .logobrushed .logoSprite {
  background: transparent url("../img/logoSprite.png") 0px 0px no-repeat;
  margin: auto;
  width: 380px;
  height: 380px;
  position: relative;
}

/*.featuredCasesContainer {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}*/
.videoContainer {
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
}

.header .video {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

/*.intro_video, .intro_video_container{
  position: relative;
}*/
.intro_video_container {
  overflow: hidden;
  position: fixed;
  width: 100%;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  transform: translateZ(0);
  height: inherit;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.featuredCasesContainer .svg_gradientShape {
  top: -2000px;
}

.intro_video_container .svg_gradientShape {
  position: absolute;
  z-index: 100;
  bottom: -50px;
  top: auto;
}

.container_content {
  width: 960px;
  margin: auto;
}

.videoBack {
  width: 853px;
  height: 480px;
  top: 50px;
  position: absolute;
  opacity: 0;
  display: none;
}

.svgout {
  position: absolute;
  bottom: 0;
  z-index: 10;
}

.header-svg {
  width: 100%;
}

#container_wrapper {
  position: relative;
  padding: 0;
}

.homepage #container, .homepage #container_loader {
  padding-top: 0px;
  width: 100%;
}
.homepage .container_content {
  padding-top: 50px;
}

#container, #container_loader {
  position: relative;
  width: 100%;
  margin: auto;
}

.isMobile .header .logobrushed .logoSprite {
  margin-top: 40px;
}

@media (max-width: 1000px) {
  .logobrushed .logoSprite {
    background: transparent url("../img/logo_device.png") center center no-repeat !important;
    background-position: center center !important;
    width: 100% !important;
    background-size: contain !important;
    margin: auto;
  }
}
.isTablet .logoSprite, .isMobile .logoSprite {
  background-image: url("../img/logo_device.png") !important;
  background-position: center center !important;
  background-size: contain !important;
}

/**
This file includes Transitions, navigation, Parallax, effects etc.
**/
/** TOP LOADING INDICATOR **/
.pace .pace-progress {
  background-image: -o-linear-gradient(#C1F3E3 0%, #78E2E6 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#C1F3E3), to(#78E2E6));
  background-image: linear-gradient(#C1F3E3 0%, #78E2E6 100%);
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  height: 2px;
  -webkit-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
}

.pace-inactive {
  display: none;
}

.bg {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: 100% auto;
  background-position: center center;
}

section.bleed {
  overflow: visible;
}
section.bleed .bg {
  height: 110%;
}
section.createPolygon {
  overflow: visible;
}

.diagonal:before {
  content: " ";
  display: block;
  position: absolute;
  top: 36px;
  bottom: 56px;
  left: 0;
  right: 0;
  -webkit-transform: skewY(2deg);
  -ms-transform: skewY(2deg);
  transform: skewY(2deg);
  z-index: -1;
  background: red;
  padding: 2px;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

/***
Background Images
**/
.bgImage {
  position: absolute;
  width: 100%;
  height: auto;
  left: 0px;
  top: 0px;
}

/***
SVG'S
***/
.top-left, .top-right {
  position: absolute;
  top: 0px;
  left: 0;
  z-index: 300;
}

.bottom-left, .bottom-right {
  position: absolute;
  bottom: 0px;
  left: 0;
  z-index: 300;
}

/* SPECIAL FIX FOR SVGs */
/* Friends dont let their friend write media queries everywhere!*/
/* Friends will be Friends (Freddie Mercury, 1946 - 1991) */
@media (max-width: 700px) {
  .top-left, .top-right, .bottom-left, .bottom-right {
    max-height: 25px;
    height: 25px;
  }
}
/***
WAYPOINTS
***/
.wpTrigger {
  position: relative;
}

/**
Transition Layer
**/
#maskFx {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: 1500;
}
#maskFx #transitionLoading {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -30px;
  margin-left: -20px;
  z-index: 400;
  outline: #FFF 1px solid !important;
}
#maskFx .logo {
  width: 40px;
  height: 48px;
  outline: 1px solid #FFF !important;
}
#maskFx .logo .mask {
  position: absolute;
  height: 100%;
  width: 100%;
  background: transparent url("../img/logoMask.png") no-repeat center center;
  background-size: 100% 100%;
  z-index: 10;
  outline: 1px solid #FFF !important;
}
#maskFx .logo .bg {
  position: absolute;
  height: 100%;
  width: 100%;
  background: transparent url("../img/logoFill.png") repeat center center;
  background-size: 40px 139px;
  -webkit-animation: loop 4s linear infinite;
  animation: loop 4s linear infinite;
  padding: 1px;
}

#maskBlack {
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: 110;
  background-color: #000;
  opacity: 0;
  cursor: pointer;
}

#fxBg {
  height: 100%;
  width: 100%;
}

#webby-notice-2016 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 550px;
  margin-top: -250px;
  margin-left: -275px;
  z-index: 500;
  text-align: center;
}
#webby-notice-2016 img.webby-award {
  display: block;
  margin: 0 auto 25px auto;
  opacity: 0;
  position: relative;
  top: 0;
}
#webby-notice-2016 h5 {
  opacity: 0;
  font-size: 42px;
  font-weight: 200;
  margin-top: 0;
  margin-bottom: 15px;
  color: #4e4e4e;
  position: relative;
  top: 0;
  bottom: 0;
}
#webby-notice-2016 h5.boldi {
  font-weight: 800;
}
#webby-notice-2016 h5 span.upper {
  position: relative;
  font-size: 20px;
  top: -15px;
  left: 2px;
}
#webby-notice-2016 h6 {
  opacity: 0;
  font-size: 20px;
  font-weight: 200;
  color: #4e4e4e;
  margin: 0;
  padding-top: 10px;
  position: relative;
  top: 0;
  bottom: 0;
}

@media (max-width: 767px) {
  #maskFx #transitionLoading.firstLoad {
    margin-top: 80px;
  }

  #webby-notice-2016 {
    margin-top: -120px;
  }
  #webby-notice-2016 img.webby-award {
    width: 54px;
  }
  #webby-notice-2016 h5 {
    font-size: 20px;
    margin-bottom: 10px;
  }
  #webby-notice-2016 h5 span.upper {
    font-size: 12px;
    top: -10px;
  }
  #webby-notice-2016 h6 {
    font-size: 16px;
    padding-top: 5px;
  }
}
/* This is used for the Transiton space */
#realSpace {
  position: absolute;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background-color: #000;
  z-index: 1;
}
#realSpace #realSpaceContainer {
  position: absolute;
  width: 100%;
  overflow: hidden;
  min-height: 100%;
}

#svgMask {
  position: relative;
  width: auto;
  height: 100%;
}
#svgMask svg {
  position: relative;
}

.polygonBG {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 200%;
  height: 100%;
  z-index: 1;
}
.parallaxParent {
  position: absolute;
  width: 100%;
  z-index: 1;
  top: 0px;
}

/**
Particles
**/
#particles {
  position: fixed !important;
  top: 0px;
  width: 100%;
  height: 100%;
  bottom: 0px;
  left: 0px;
  z-index: 100000;
  pointer-events: none;
}

header {
  z-index: 501;
  font-family: "Open Sans", sans-serif;
  position: fixed;
  top: 40px;
}
header .headerContainer {
  position: relative;
}
header .headerContainer:hover .navigation__toggle {
  background-color: #1a1c1a;
}
header .headerContainer:hover .navigation__toggle .hamburger-icon {
  background: #7acbe4;
}

header.showLightbox {
  z-Index: 2001;
}
header.showLightbox .navigation_toggle {
  background-color: #FFF;
}
header.showLightbox .hamburger-icon {
  background-color: #1a1c1a;
}

.header__logo {
  width: 37px;
  height: 42px;
  position: absolute;
  right: 45px;
  z-index: 2;
}

/**
CONTACT CTA
**/
.contactCta {
  position: fixed;
  z-index: 499;
  bottom: 70px;
  left: 40px;
}
.contactCta__circle {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 9999px;
}
.contactCta__icon {
  position: relative;
  top: 1px;
  width: 26px;
  height: 26px;
}
.contactCta__labelContainer {
  position: absolute;
  left: 25px;
  top: 0;
  bottom: 0;
  overflow: hidden;
}
.contactCta__label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  padding-left: 25px;
  padding-right: 20px;
  border-radius: 0 9999px 9999px 0;
  font-size: 16px;
  white-space: nowrap;
}
.contactCta__circle {
  background-color: #000000;
  color: #FFFFFF;
}
.contactCta__label {
  background-color: #1a1c1a;
  color: #7acbe4;
}
.contactCta:hover .contactCta__circle {
  background-color: #1a1c1a;
  color: #7acbe4;
}
.contactCta__labelContainer {
  -webkit-transform: scaleX(0%);
      -ms-transform: scaleX(0%);
          transform: scaleX(0%);
  -webkit-transition-delay: 0.3s;
       -o-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.contactCta__label {
  -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
          transform: translateX(-100%);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
@media (hover: hover) and (pointer: fine) {
  .contactCta:hover .contactCta__labelContainer {
    -webkit-transform: scaleX(100%);
        -ms-transform: scaleX(100%);
            transform: scaleX(100%);
    -webkit-transition-delay: 0s;
         -o-transition-delay: 0s;
            transition-delay: 0s;
  }
  .contactCta:hover .contactCta__label {
    -webkit-transform: translateX(0%);
        -ms-transform: translateX(0%);
            transform: translateX(0%);
  }
}

@media (max-height: 650px), (max-width: 520px) {
  .contactCta {
    bottom: 15px;
    left: 15px;
  }
}
/**
NAVIGATION ICON
**/
.projects .navigation__toggle .hamburger-icon {
  background: #333;
}

.navigation__toggle {
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  width: 50px;
  height: 47px;
  position: absolute;
  z-index: 5;
  left: 40px;
  border-radius: 2px;
  cursor: pointer;
  background-color: #FFF;
  padding: 15px;
}
.navigation__toggle.isTop {
  background-color: #000000;
  color: #FFFFFF;
}
.navigation__toggle.isTop .hamburger-icon {
  background-color: #FFF;
}
.navigation__toggle.isTop:hover .hamburger-icon {
  background-color: #7acbe4 !important;
}
.navigation__toggle .burger {
  position: relative;
}
.navigation__toggle:hover {
  background-color: #1a1c1a;
}
.navigation__toggle:hover .hamburger-icon {
  background: #7acbe4;
}
.navigation__toggle.show {
  background-color: #1a1c1a;
}
.navigation__toggle.show .hamburger-icon {
  background-color: #FFF;
}
.navigation__toggle.show:hover {
  background-color: #1a1c1a;
}
.navigation__toggle.show:hover .hamburger-icon {
  background: #7acbe4;
}
.navigation__toggle.isScroll {
  background: #333;
}
.navigation__toggle .hamburger-icon {
  cursor: pointer;
  height: 3px;
  width: 100%;
  background: #1a1c1a;
  position: absolute;
  display: none;
}
.navigation__toggle .hamburger-icon.top {
  top: 0;
}
.navigation__toggle .hamburger-icon.middle {
  top: 7px;
}
.navigation__toggle .hamburger-icon.bottom {
  top: 14px;
}
/*
Main Breadcrumb and Typewriter nav
*/
.header__welcome {
  width: auto;
  height: 45px;
  position: fixed;
  z-index: 4;
  left: 78px;
  margin-left: 10px;
  color: #FFF;
  font-size: 20px;
}
.header__welcome.isTyping {
  background-color: transparent;
  overflow: visible;
}
.header__welcome.isTyping .typewriter, .header__welcome.isTyping .breadcrumb {
  background-color: transparent;
}
.header__welcome .breadcrumb_container, .header__welcome .typewriter_container {
  line-height: 28px;
  overflow: hidden;
  display: none;
  font-size: 16px;
}
.header__welcome .breadcrumb_container {
  border-radius: 2px;
}
.header__welcome .breadcrumb_container a:link, .header__welcome .breadcrumb_container a:visited, .header__welcome .breadcrumb_container a:hover {
  color: #FFF;
}
.header__welcome .breadcrumb {
  background-color: #1a1c1a;
  padding: 10px 15px 9px 9px;
  line-height: 28px;
}
.header__welcome .typewriter_container {
  display: none;
  line-height: 46px;
  padding-left: 20px;
}
.header__welcome .fa {
  font-size: 10px;
  line-height: 20px;
  vertical-align: middle;
  padding-right: 5px;
  padding-left: 5px;
}
.header__welcome ul {
  position: relative;
}
.header__welcome a {
  text-decoration: none;
  display: block;
  -webkit-transition: color 0.3s ease-out;
  -o-transition: color 0.3s ease-out;
  transition: color 0.3s ease-out;
}
.header__welcome .expander, .header__welcome .current, .header__welcome .typewriter-cursor, .header__welcome .typer {
  display: inline-block;
}
.header__welcome .expander:hover a, .header__welcome .current:hover a, .header__welcome .typewriter-cursor:hover a, .header__welcome .typer:hover a {
  color: #7acbe4;
}

/** Typewriter **/
.typewriter-cursor {
  display: none;
  opacity: 1;
  font-weight: 100;
  /*-webkit-animation: blink 0.7s infinite;
  -moz-animation: blink 0.7s infinite;
  -ms-animation: blink 0.7s infinite;
  -o-animation: blink 0.7s infinite;
  animation: blink 0.7s infinite;*/
}

/*
@keyframes blink{
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes blink{
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes blink{
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}
@-ms-keyframes blink{
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}
@-o-keyframes blink{
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}
*/
/* MAIN NAVIGATION */
#spaceNav {
  position: fixed;
  bottom: 0px;
  display: none;
  left: 0px;
  height: 100%;
  z-index: 500;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  padding: "2px";
}
#spaceNav .mask {
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 120%;
  width: 500px;
  overflow: hidden;
  background-color: #1a1c1a;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transformOrigin: "bottom left";
  transform-origin: "bottom left";
  -ms-transform-origin: "bottom left";
  -webkit-transform-origin: "bottom left";
  padding: 2px;
}
#spaceNav .mask img {
  display: block;
  position: absolute;
}

.main-nav {
  width: 400px;
  margin: 0 auto;
  position: absolute;
  z-index: 2;
  top: 2%;
  padding: 150px 2% 2% 1%;
  font-family: "Open Sans", sans-serif;
}
.main-nav ul {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  display: inline-block;
}
.main-nav li {
  display: block;
  padding: 1%;
  margin: 0 0 0.5% 0;
  position: relative;
  left: 0px;
}
.main-nav li:last-child {
  margin-right: 0;
}
.main-nav li:hover {
  color: #e46c6e;
}
.main-nav li.active {
  color: #7acbe4;
  cursor: default;
}
.main-nav li.active a:link, .main-nav li.active a:visited {
  color: #7acbe4;
  cursor: default;
}
.main-nav li a {
  color: #FFF;
  font-size: 46px;
  font-weight: 200;
  text-decoration: none;
  opacity: 1;
  padding: 5px;
  -webkit-transition: color 0.3s ease-out;
  -o-transition: color 0.3s ease-out;
  transition: color 0.3s ease-out;
}
.main-nav li a:hover {
  opacity: 1;
  color: #7acbe4;
}

.lang-nav {
  position: absolute;
  bottom: 70px;
  left: 100px;
  font-size: 19px;
  color: #666666;
  z-index: 2;
}
.lang-nav li {
  float: left;
}
.lang-nav li a {
  color: #fff;
  font-weight: 200;
  text-decoration: none;
  opacity: 0.8;
  padding: 5px;
  font-weight: 400;
  -webkit-transition: color 0.3s ease-out;
  -o-transition: color 0.3s ease-out;
  transition: color 0.3s ease-out;
}
.lang-nav li a:hover {
  opacity: 1;
  color: #7acbe4;
}
.lang-nav li.active {
  color: #7acbe4;
  cursor: default;
}
.lang-nav li.active a:link, .lang-nav li.active a:visited, .lang-nav li.active a:hover {
  color: #7acbe4 !important;
  cursor: default;
  opacity: 0.8 !important;
}

@media (max-height: 730px) {
  .main-nav {
    padding-top: 100px;
  }
  .main-nav li a {
    font-size: 42px;
  }
}
/**
For smaller screens
**/
@media only screen and (max-height: 650px), only screen and (max-width: 520px) {
  header {
    top: 15px !important;
  }
  header .navigation__toggle {
    top: 0px !important;
    left: 15px !important;
  }

  #navBg {
    width: 75%;
  }

  .main-nav {
    top: 0px;
    padding-top: 100px;
  }
  .main-nav li {
    left: -75px;
  }
  .main-nav li a {
    font-size: 32px;
  }

  .lang-nav {
    left: 15px;
    bottom: 50px;
    font-size: 15px;
  }

  .typewriter_container {
    padding-left: 10px !important;
  }

  .header__welcome {
    left: 55px !important;
  }
}
@media only screen and (max-height: 450px) {
  .main-nav {
    padding-top: 80px;
  }
  .main-nav li a {
    font-size: 18px;
  }
}
body.contact #footer {
  background: #fff;
}

body.contactpage #footer .footer_contact_link {
  display: none;
}
body.contactpage #footer .footer_contact_mailto {
  display: block;
}

#footer {
  position: relative;
  width: 100%;
  height: auto;
  background: #F7F7F5;
  color: #1a1c1a;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  padding: 0;
  overflow: hidden;
}
#footer .footer_contact_mailto {
  display: none;
}
#footer h5 {
  margin: 0 0 20px 0;
  font-size: 16px;
  font-weight: 800;
  line-height: 20px;
}
#footer ul {
  position: relative;
}
#footer .footer-desktop {
  overflow: hidden;
  margin-bottom: 80px;
}
#footer ul.footer-columns {
  width: 100%;
  max-width: 1480px;
  margin: 70px auto 0 auto;
  padding: 0 100px;
  overflow: hidden;
}
#footer ul.footer-columns > li {
  width: 15.333%;
  margin: 1.5% 1.5% 0 1.5%;
  float: left;
}
#footer ul.footer-columns > li.sitemap {
  width: 10%;
  margin-left: 12%;
}
#footer ul.footer-columns > li.services {
  width: 20%;
  margin-right: 1.5%;
  text-align: left;
}
#footer ul.footer-columns > li.services img {
  margin-top: 20px;
  width: 160px;
}
#footer ul.footer-columns > li.latestnews {
  width: 21%;
  margin-right: 1.5%;
}
#footer ul.footer-columns > li.latestnews p {
  max-width: 200px;
}
#footer ul.footer-columns > li.latestnews a.title {
  color: #333;
  line-height: 0;
}
#footer ul.footer-columns > li.latestnews a.title:hover {
  color: #7acbe4;
}
#footer ul.footer-columns > li.visitus {
  width: 26%;
  margin-right: 0;
}
#footer ul.footer-columns > li.visitus .first {
  margin-top: 27px;
}
#footer ul.footer-columns > li.visitus .address {
  margin: 4px 0;
}
#footer ul.footer-columns > li.visitus .spacer {
  margin-top: 16px;
}
#footer ul.footer-columns > li.getintouch {
  width: 140px;
  float: right;
}
#footer ul.footer-columns > li:last-child {
  margin-right: 0;
}
#footer ul.footer-columns > li li {
  margin: 15px 0;
  font-size: 14px;
  color: #666666;
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
}
#footer .button {
  margin-top: 5px;
}
#footer .fa-stack {
  border: none;
  color: #a3a4a3;
}
#footer .fa-stack a {
  color: #a3a4a3;
}
#footer .fa-stack a:hover {
  color: #fff;
}
#footer .footer-black {
  width: 100%;
  background: #1a1c1a;
  color: #a3a4a3;
  font-size: 12px;
}
#footer .footer-black .inner {
  width: 100%;
  max-width: 1480px;
  padding: 0 100px;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
#footer .footer-black .top {
  padding: 12px 0;
}
#footer .footer-black .top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#footer .footer-black .iaapa {
  margin-left: 7px;
}
#footer .footer-black .social-icons {
  margin-left: -5px;
}
#footer .footer-black .social-icons .fa-stack {
  margin-right: 5px;
  height: 18px;
}
#footer .footer-black .social-icons .fa-stack-2x {
  font-size: 18px;
}
#footer .footer-black .iaapa {
  display: inline-block;
}
#footer .footer-black .iaapa a {
  color: #a3a4a3;
}
#footer .footer-black .iaapa a:hover {
  color: #7acbe4;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
#footer .footer-black .iaapa svg {
  display: inline-block;
  vertical-align: middle;
  width: 155px;
  height: 18px;
  fill: currentColor;
}
#footer .footer-black .copyright {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#footer .footer-black .copyright .copyright-links {
  margin-left: 40px;
}
#footer .footer-black .copyright .copyright-links a {
  color: #a3a4a3;
}
#footer .footer-black .copyright .copyright-links a:link, #footer .footer-black .copyright .copyright-links a:visited {
  color: #a3a4a3;
}
#footer .footer-black .copyright .copyright-links a:hover {
  color: #7acbe4;
}
#footer .footer-black .copyright .copyright-links a + a {
  margin-left: 10px;
}
#footer .footer-black .contact {
  margin-left: 30px;
}

.footer-mobile {
  display: none;
}

/* MEDIA QUERIES */
/*
@media (max-width: 1105px) {
  #footer {
    ul.footer-columns {
      > li {
        &.logo {
          width: 33%;
        }
        &.latestnews {
          display: none;
        }
        &.sitemap {
          width: 25%;
        }
        &.visitus {
          width: 30%;
        }
      }
    }
  }
}*/
@media (max-width: 1400px) {
  #footer .footer-black .inner {
    display: block;
  }
  #footer .footer-black .copyright {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 15px 0 18px;
    border-top: 1px solid #323431;
  }
}
@media (max-width: 1100px) {
  #footer .footer-black .copyright {
    display: block;
  }
  #footer .footer-black .copyright-links {
    margin-left: 0 !important;
    margin-top: 5px;
  }
  #footer ul.footer-columns > li.latestnews {
    display: none;
  }
  #footer ul.footer-columns > li.logo {
    width: 34%;
    margin-right: 8%;
  }
  #footer ul.footer-columns > li.sitemap {
    width: 15%;
  }
  #footer ul.footer-columns > li.visitus {
    width: 38%;
    float: right;
  }
  #footer ul.footer-columns > li.getintouch {
    display: none;
  }
  #footer ul.footer-columns > li .contact-info {
    display: block !important;
  }
}
@media (max-width: 800px) {
  #footer ul.footer-columns > li.sitemap {
    display: none;
  }
  #footer ul.footer-columns > li.logo {
    width: 37%;
    text-align: right;
  }
  #footer ul.footer-columns > li.visitus {
    width: 50%;
  }
}
@media (max-width: 700px) {
  #footer {
    padding-top: 50px;
  }
  #footer p {
    color: white;
  }
  #footer ul.column-six {
    display: none;
  }
  #footer .footer-desktop {
    display: none;
  }
  #footer .footer-black .inner {
    width: 90%;
    padding: 0;
    margin: 0 auto;
  }
  #footer .footer-black .iaapa {
    display: none;
  }

  .footer-mobile {
    display: block;
    width: 90%;
    margin: 0 auto 50px auto;
    text-align: center;
  }
  .footer-mobile .logo {
    width: 30%;
    display: inline-block;
    height: 120px;
    overflow: hidden;
    background: url("../img/footer_logo_x2.png") no-repeat;
    background-size: contain;
    margin: 0 10%;
  }
  .footer-mobile .information {
    width: 40%;
    line-height: 22px;
    text-align: left;
    display: inline-block;
  }
  .footer-mobile li.spacer {
    margin-top: 16px;
  }
}
@media (max-width: 500px) {
  .footer-mobile {
    width: 100% important;
    /*
    .information {
      width: 100%;
      margin: 10% 10% 0 10%;
    }
    */
  }
  .footer-mobile .logo {
    width: 23%;
    background-position: center center;
    margin: 0 10% 0 0%;
  }
  .footer-mobile .lbl {
    display: none;
  }

  .copyright-agency {
    display: none;
  }
}
.contact-header {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.contact-header__img {
  height: 588px;
  background-image: url("../img/contact/header.jpg");
}

.contactpage #colorMask, .contactpage .colorFill {
  position: absolute;
  width: 100%;
}
.contactpage .colorFillContainer {
  bottom: -75px;
  position: absolute;
  height: 100px;
  width: 100%;
}
.contactpage #colorFill {
  z-Index: 50;
  height: 100px;
  bottom: 70px;
  width: 100%;
}
.contactpage .colorFillBox {
  position: absolute;
  height: 70px;
  top: 29px;
  width: 100%;
  background-color: #7acbe4;
}
.contactpage #colorMask {
  z-Index: 51;
  height: 85px;
  bottom: -2px;
}

.mapAddress {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 228px;
  font-size: 14px;
  line-height: 1.5em;
  padding: 20px;
  background-color: #FFF;
  margin-top: -113px;
  margin-left: -10px;
}
.mapAddress:after {
  left: -30px;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
  border-right-color: #FFF;
  border-width: 15px;
  margin-top: -25px;
  z-index: 100;
}
.mapAddress .fonemailDetails {
  margin-top: 12px;
  margin-bottom: 14px;
}
.mapAddress ul li {
  color: #797979;
}

.map-pin {
  width: 87px;
  height: 124px;
  background: url("../img/contact/logo.png");
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -120px;
  margin-top: -60px;
}

.contactpage .inner {
  max-width: 960px;
}
.contactpage .loader {
  display: none;
  padding: 0px;
  background-image: url("../img/preloader.gif");
  background-repeat: no-repeat;
  background-position: center center;
  width: 30px;
  float: right;
  margin: auto;
  height: 42px;
  margin-right: -30px;
}

section.contact-locations {
  margin-top: 130px;
}
section.contact-locations .center {
  display: inline-block;
  width: 100%;
  max-width: 850px;
  margin: 55px auto 0;
  border-bottom: 1px solid #f3f3f3;
  padding-bottom: 25px;
}
section.contact-locations .center .container {
  margin: 0 auto;
  width: 100%;
}
section.contact-locations .center:last-child {
  margin-right: 0;
  border-bottom: 0;
  padding-bottom: 0px;
  margin-top: 23px;
}
section.contact-locations .center .demodernImage {
  width: 200px;
  margin-right: 50px;
}
section.contact-locations .center .demodernImage img {
  width: 100%;
}
section.contact-locations h2, section.contact-lets-talk h2 {
  font-size: 37px;
}
section.contact-lets-talk {
  margin-bottom: 0px;
}
section.contact-lets-talk .inner {
  width: 70%;
}
section.contact-lets-talk .inner .center {
  text-align: center;
  max-width: 700px;
  margin: 120px auto 0;
}
section.contact-contactform {
  text-align: left;
  height: inherit;
  background: #F7F7F5;
  padding-top: 90px;
}
section.contact-contactform .button {
  z-index: 100;
}
section.contact-contactform .inner {
  height: inherit;
  width: 70%;
  position: relative;
  max-width: 960px;
  margin-bottom: 50px;
}
section.contact-contactform .inner .form {
  position: relative;
  top: 20px;
}
section .demodernImage {
  float: left;
  margin-right: 20px;
}
section .demodernAddress {
  float: left;
  font-size: 16px;
  font-weight: 400;
  color: #606060;
  line-height: 1.5em;
  text-align: left;
  padding-top: 25px;
}
section .demodernAddress h3 {
  font-weight: 400;
  font-size: 23px;
  margin-bottom: 20px;
}
section .demodernAddress .address {
  color: #4e4e4e;
  margin-bottom: 12px;
}
section .demodernAddress ul {
  display: block;
  float: left;
  margin-right: 40px;
}
section .demodernAddress ul:last-child {
  margin-right: 0;
}
section .demodernAddress ul.address_map {
  clear: both;
  display: block;
}
section .demodernAddress ul.address_map .button {
  margin-top: 10px;
  padding: 2px 14px;
  font-size: 13px;
}
section.contact-services {
  background: #FFF;
  margin: 0 auto;
  padding-top: 150px;
  padding-bottom: 100px;
}
section.contact-services .inner {
  width: 60%;
  margin-top: 30px;
  margin-bottom: 60px;
  max-width: 1140px;
}
section.contact-services .inner h3 {
  font-size: 28px;
  font-weight: 200;
  color: #FFF;
}
section.contact-services .inner .center {
  width: 100%;
  margin: 0 auto;
}

/************************************
  CONTACT FORM INPUT
*************************************/
.contactform {
  overflow: hidden;
}
.contactform input, .contactform textarea {
  margin: 0px auto 20px auto;
  border: none;
}
.contactform input[type=submit] {
  border: 2px solid #7acbe4;
}
.contactform .colLeft {
  padding-right: 5%;
}
.contactform .colRight {
  width: 45%;
  margin-left: 5%;
}

.error {
  border-bottom: 1px solid red !important;
}

.form-details {
  width: 48%;
  position: relative;
  float: left;
}
.form-details input[type=text], .form-details input[type=email] {
  background: white;
  width: 100%;
  height: 55px;
  border-radius: 3px;
  border-bottom: none;
  /* position: relative; */
  font-family: "Open Sans", sans-serif;
  left: 0%;
  font-size: 14px;
  text-indent: 20px;
  color: #1a1c1a;
}

.contact-submit {
  float: right;
  margin-top: 0 !important;
}

#preferredKitten {
  display: none;
}

textarea {
  background: white;
  width: 100%;
  border: none;
  height: 204px;
  border-radius: 3px;
  font-size: 14px;
  font-family: "Open Sans", sans-serif;
  padding: 16px;
}

.errormsg {
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  margin-top: -15px;
  margin-left: 20px;
  color: red;
}

.contactform_thanks {
  opacity: 0;
  font-size: 16px;
  padding-bottom: 85px;
  color: #1a1c1a;
  display: none;
  text-align: center;
}
.contactform_thanks .contactform_thanks_text {
  color: #4e4e4e;
}
.contactform_thanks .fa {
  font-size: 100px;
  color: #4e4e4e;
}

/***
MEDIAQUERIES
****/
@media (max-width: 1110px) {
  section.contact-lets-talk .inner {
    width: 90%;
  }
  section.contact-contactform .inner {
    width: 90%;
  }
  section.more-info ul.triple li {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 30px;
  }
  section.more-info ul.triple li p {
    height: auto;
  }
  section.contact-locations {
    margin-top: 0;
  }
}
@media (max-width: 960px) {
  .contact-lets-talk .colLeft {
    float: none !important;
    width: 100% !important;
    padding-right: 0px !important;
  }
  .contact-lets-talk .colRight {
    margin-top: 30px;
    float: none !important;
    width: 100% !important;
    margin-left: 0%;
    padding-left: 0%;
  }

  .contact-lets-talk .inner {
    width: 80%;
  }
  .contact-lets-talk .inner .colRight {
    padding-left: 0% !important;
  }
}
@media (max-width: 790px) {
  section.contact-locations .center .demodernImage {
    width: 180px;
    margin-right: 23px;
  }
  section.contact-locations .center .demodernAddress {
    padding-top: 0;
  }
  section.contact-locations .center .demodernAddress ul {
    clear: both;
    float: none;
  }
}
@media (max-width: 780px) {
  section.contact-services {
    padding-top: 120px;
    padding-bottom: 100px;
  }
  section.contact-services .inner {
    margin-bottom: 0;
    padding-bottom: 0;
    margin-top: 0;
  }
  section.contact-services .inner h3 {
    margin-bottom: 0;
    font-size: 21px;
  }
}
@media (max-width: 750px) {
  section .address li {
    width: 100%;
  }

  .contact-lets-talk .container {
    min-width: 0px !important;
  }

  .contactform .colLeft, .contactform .colRight {
    width: 100%;
    margin-left: 0% !important;
    padding-left: 0% !important;
    padding-right: 0% !important;
  }
  .contactform textarea {
    width: 100%;
  }

  .contact-services .inner {
    width: 80%;
  }
}
@media (max-width: 600px) {
  section.contact-services {
    padding-top: 80px;
    padding-bottom: 60px;
  }
}
@media (max-width: 450px) {
  .mapAddress {
    top: 0%;
    margin-top: 100px;
    margin-left: -114px;
  }
  .mapAddress:after {
    display: none;
    bottom: -40px;
    border-top-color: #FFF;
    border-right-color: transparent;
    top: auto;
    left: 13%;
  }

  .contact-header__img {
    background-position: center -644px;
    background-size: 1440px auto;
    /* max-height: 300px; */
  }

  .map-pin {
    display: none;
  }

  .demodernImage {
    float: none !important;
  }

  .demodernAddress {
    margin-top: 20px;
  }

  section.contact-services {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  section.contact-services .inner {
    width: 80% !important;
    text-align: left !important;
    margin-bottom: 0;
    padding-bottom: 0;
    margin-top: 0;
  }
  section.contact-services .inner h3 {
    margin-bottom: 0;
    font-size: 17px;
  }
}
section {
  position: relative;
  /*
   &.get-in-touch {
      height: 360px;
      color: #fff;
      margin-top: 0;
      z-index: 1;
      .inner {
        width: 300px;
        height: inherit;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  */
}
section article.project img {
  z-index: 5;
  position: relative;
}
section.passion {
  height: 320px;
}
section.passion .inner {
  width: 60%;
  height: inherit;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
section.projectsOverview {
  height: 2950px;
  text-align: left;
  margin-top: 0;
  margin-bottom: 0;
}
section.projectsOverview #projects-d-svg {
  position: absolute;
  top: 0;
  left: 0;
}
section.projectsOverview .inner {
  height: inherit;
  position: relative;
  z-index: 1;
  width: 80%;
}
section.projectsOverview .inner .banner {
  margin: 1.5%;
}
section.projectsOverview .inner .banner .project-description-main {
  padding: 25px;
  background: white;
}
section.projectsOverview .inner .banner .project-description-main .column-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
section.projectsOverview .inner .banner .project-description-main .column-flex .column-flex__item {
  width: 460px;
}
section.projectsOverview .inner .list-of-project {
  position: relative;
}
section.projectsOverview .inner ul {
  margin-bottom: 20px;
  overflow: hidden;
}
section.projectsOverview .inner li {
  line-height: 1.5em;
  float: left;
  display: inline;
}
section.projectsOverview .inner #triple li {
  width: 30.333%;
  height: 460px;
  margin: 1.5%;
}
section.projectsOverview figure {
  position: relative;
  border-right-color: #fff;
  border-width: 20px;
  margin-top: -20px;
  z-index: 6;
}
section.projectsOverview figure:after {
  left: 15%;
  bottom: 0;
  border: solid transparent;
  content: " ";
  position: absolute;
  pointer-events: none;
  border-bottom: 20px solid white;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}
section.projectsOverview .project-description {
  padding: 20px;
  background: white;
  min-height: 200px;
}
section.projectsOverview span.subtitle {
  font-size: 18px;
}

/*
    .column-flex {
      display: flex;
      justify-content: space-between;
      .column-flex__item {
        width: 220px;
      }
    }
  }

}
*/
/**
Projects single page
**/
.projectTop {
  position: relative;
  background-repeat: none;
  background-position: top center;
  background-position: fixed;
  background-size: cover;
  top: 0px;
  left: 0px;
  background-color: #999;
  width: 100%;
  height: 400px;
}

.projectsOverview a:link, .projectsOverview a:visited {
  color: #333;
}

section {
  margin: 0;
  position: relative;
}
section.project-intro {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
section.project-intro .inner .project_container {
  padding: 5%;
}
section.project-intro .inner .share-project {
  margin: 0 auto 0 auto;
  position: relative;
  overflow: hidden;
}
section.project-intro .inner .share-project .socialLink {
  padding-top: 5%;
}
section.video .inner {
  width: 80%;
  z-index: 1;
  position: relative;
}
section.challenge {
  margin-top: -250px;
  margin-bottom: 0;
  position: relative;
}
section.challenge #challenge-svg {
  position: absolute;
  top: 0;
  left: 0;
}
section.challenge p {
  color: #807e7c;
}
section.challenge .intro {
  margin-top: 20%;
  z-index: 1;
  height: inherit;
  position: relative;
}
section.challenge .inner {
  width: 75%;
  position: relative;
  z-index: 1;
  height: inherit;
}
section.challenge .inner .column-1 {
  text-align: left;
  width: 40%;
  float: left;
}
section.challenge .inner .column-2 {
  float: right;
  text-align: left;
  width: 60%;
}
section.approach {
  padding: 10% 0;
}
section.approach .inner {
  width: 80%;
}
section.approach .inner .column-1 {
  width: 60%;
  float: left;
}
section.approach .inner .column-2 {
  text-align: right;
  float: right;
  width: 40%;
}
section.approach .inner .column-3 {
  text-align: left;
  width: 32%;
  float: left;
  position: absolute;
  top: 60%;
}
section.approach .inner .column-4 {
  float: right;
  text-align: left;
}
section.solution {
  position: relative;
  background-size: cover;
}
section.solution #solution_mockup {
  position: absolute;
  top: 0;
  left: 0;
}
section.solution .inner {
  width: 100%;
}
section.solution .inner .main-mockup {
  z-index: 1;
  position: relative;
  background-size: cover;
}
section.solution .inner .main-mockup .txt {
  width: 30%;
  padding: 5%;
  color: white;
  position: absolute;
  top: 0;
  text-align: left;
}
section.solution .container {
  background: #f7f5f2;
}
section.solution .container .simpler-isnt-easier {
  margin-bottom: 100px;
  padding-top: 10%;
}
section.solution .container .simpler-isnt-easier .inner {
  padding-top: 5%;
  width: 80%;
}
section.solution .container .simpler-isnt-easier .inner .banner {
  margin: 2.5%;
}
section.solution .container .simpler-isnt-easier .inner ul {
  margin-bottom: 20px;
  overflow: hidden;
}
section.solution .container .simpler-isnt-easier .inner li {
  line-height: 1.5em;
  float: left;
  display: inline;
}
section.solution .container .simpler-isnt-easier .inner #double li {
  width: 45%;
  height: auto;
  margin: 2.5%;
}
section.solution .container .colors {
  position: relative;
  height: 587px;
}
section.solution .container .colors #colors_svg {
  position: absolute;
  top: 0;
  left: 0;
}
section.solution .container .colors .intro {
  position: relative;
  padding-top: 100px;
}
section.solution .container .colors .inner {
  padding-top: 5%;
  width: 80%;
  z-index: 1;
  position: relative;
}
section.solution .container .colors .inner ul {
  margin-bottom: 20px;
  overflow: hidden;
}
section.solution .container .colors .inner li {
  line-height: 1.5em;
  float: left;
  display: inline;
}
section.solution .container .colors .inner #six li {
  width: 12%;
  height: auto;
  margin: 1.5%;
}
section.solution .container .pixel-perfection {
  position: relative;
  height: 1100px;
}
section.solution .container .pixel-perfection .inner {
  width: 81%;
  margin-top: 100px;
}
section.solution .container .pixel-perfection .columns {
  text-align: left;
  position: relative;
}
section.solution .container .pixel-perfection .columns .column-1 {
  width: 534px;
  height: 223px;
  position: absolute;
  left: 83px;
}
section.solution .container .pixel-perfection .columns .column-2 {
  width: 395px;
  height: 395px;
  position: absolute;
  left: 664px;
  background: #EBEBEB;
}
section.solution .container .pixel-perfection .columns .column-3 {
  width: 124px;
  height: 124px;
  position: absolute;
  top: 277px;
  background: #EBEBEB;
  left: 190px;
}
section.solution .container .pixel-perfection .columns .column-4 {
  width: 312px;
  height: 312px;
  position: absolute;
  left: 332px;
  top: 255px;
  background: #EBEBEB;
}
section.solution .container .pixel-perfection .columns .column-5 {
  width: 146px;
  height: 146px;
  float: right;
  position: absolute;
  left: 664px;
  top: 416px;
  background: #EBEBEB;
}
section.solution .container .pixel-perfection .columns .column-6 {
  width: 312px;
  height: 312px;
  position: absolute;
  top: 416px;
  left: 830px;
  background: #EBEBEB;
}
section.solution .container .pixel-perfection .columns .column-7 {
  width: 312px;
  height: 312px;
  position: absolute;
  top: 416px;
  background: #EBEBEB;
}
section.solution .container .pixel-perfection .columns .column-8 {
  width: 144px;
  height: 144px;
  position: absolute;
  top: 582px;
  left: 332px;
  background: #EBEBEB;
}
section.solution .container .pixel-perfection .columns .column-9 {
  width: 312px;
  height: 312px;
  position: absolute;
  top: 582px;
  left: 493px;
  background: #EBEBEB;
}
section.solution .container .power-of-line {
  margin: 0;
  height: 710px;
}
section.solution .container .power-of-line .inner {
  width: 90%;
}
section.solution .container .power-of-line .inner .column-1 {
  width: 60%;
  background: #EBEBEB;
  float: left;
}
section.solution .container .power-of-line .inner .column-2 {
  width: 32%;
  float: right;
  text-align: left;
  margin-top: 100px;
}
section.takeaway {
  margin: 0;
  background: url("../img/projects/bg_takeaway.png") no-repeat;
  background-size: cover;
  color: #fff;
  height: 800px;
  padding-top: 5%;
  margin-top: -100px;
}
section.takeaway .inner {
  width: 80%;
  height: inherit;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
section.takeaway .column-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
section.takeaway .column-flex .column-flex__item ul {
  font-size: 16px;
  color: #7f807f;
  line-height: 1.5em;
}
section.takeaway .column-flex .column-flex__item ul li {
  margin: 6%;
}
section.takeaway .column-flex .column-flex__item ul li:nth-child(2) {
  color: white;
}
section.making-of {
  position: relative;
  height: 1400px;
  text-align: center;
}
section.making-of .inner {
  width: 80%;
  margin-top: 100px;
}
section.making-of .columns-up {
  position: relative;
}
section.making-of .columns-up .column-1 {
  width: 478px;
  height: 478px;
  position: absolute;
  left: 0px;
  background: #EBEBEB;
}
section.making-of .columns-up .column-2 {
  width: 420px;
  height: 170px;
  position: absolute;
  top: 100px;
  left: 524px;
}
section.making-of .columns-up .column-3 {
  width: 312px;
  height: 312px;
  position: absolute;
  top: 500px;
  background: #EBEBEB;
  left: 0;
}
section.making-of .columns-up .column-4 {
  width: 144px;
  height: 144px;
  position: absolute;
  left: 332px;
  top: 500px;
  background: #EBEBEB;
}
section.making-of .columns-up .column-5 {
  width: 312px;
  height: 312px;
  float: right;
  position: absolute;
  left: 500px;
  top: 338px;
  background: #EBEBEB;
}
section.making-of .columns-up .column-6 {
  width: 144px;
  height: 144px;
  position: absolute;
  top: 338px;
  left: 830px;
  background: #EBEBEB;
}
section.making-of .columns-up .column-7 {
  width: 312px;
  height: 312px;
  position: absolute;
  top: 500px;
  left: 830px;
  background: #EBEBEB;
}
section.making-of .columns-up .column-8 {
  width: 478px;
  height: 478px;
  position: absolute;
  top: 666px;
  left: 332px;
  background: #EBEBEB;
}
section.making-of .columns-up .column-9 {
  width: 144px;
  height: 144px;
  position: absolute;
  top: 888px;
  left: 834px;
  background: #EBEBEB;
}
section.thanks-awards {
  margin-top: -100px;
  margin-bottom: 0;
  background: #f7f5f2;
  height: 400px;
  text-align: left;
}
section.thanks-awards .inner {
  width: 65%;
  height: inherit;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
section.thanks-awards .column-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
section.thanks-awards .column-flex .column-flex__item {
  width: 300px;
}
section.thanks-awards .column-flex .column-flex__item ul {
  font-size: 14px;
  color: #292929;
  line-height: 2em;
}
section.project-view {
  background: url("../img/projects/bg_project_view.png") no-repeat;
  height: 500px;
  background-size: cover;
  color: white;
  z-index: 2;
}
section.project-view .inner {
  width: 65%;
  height: inherit;
  margin: 10% auto;
}
section.project-view .column-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: left;
}
section.project-view .column-flex .column-1 {
  width: 500px;
}
section.other-project {
  margin: 0;
  height: 200px;
}
section.other-project .pager {
  border: 1px solid #ccc;
  width: 50%;
}
section.other-project .paginate_prev {
  position: absolute;
  left: 0px;
}
section.other-project .paginate_next {
  position: absolute;
  right: 0px;
}
section .projectDetail {
  position: relative;
}
section .featured-img {
  width: 500px;
  height: 400px;
  margin: 50px auto 0 auto;
}

/************************************
    VARIABLES & MIXINS
*************************************/
/************************************
    GENERAL STUFF
*************************************/
.work, .case {
  padding: 0;
  /* MAYBE PARALLEL TO GENERAL SETTINGS, CLEANUP SOMETIME... */
  /* MAYBE PARALLEL TO GENERAL SETTINGS, CLEANUP SOMETIME... */
}
.work h2, .case h2 {
  color: #4e4e4e;
  font-size: 50px;
  font-weight: 200;
  margin: 0 0 30px 0;
}
.work h2.case-title, .case h2.case-title {
  font-weight: 800;
}
.work h3, .work h5.special-headline, .case h3, .case h5.special-headline {
  color: #4e4e4e;
  font-size: 44px;
  font-weight: 200;
  margin: 0 0 30px 0;
}
.work h4, .work h5, .case h4, .case h5 {
  margin: 0;
  color: #4e4e4e;
}
.work h6, .case h6 {
  color: #4e4e4e;
  font-size: 19px;
  font-weight: 800;
  text-align: center;
  margin: 0;
}
.work p, .case p {
  margin: 0;
  line-height: 1.7;
  font-size: 16px;
  font-weight: 200;
}
.work p.intro, .case p.intro {
  font-size: 16px;
}
.work p.centered, .case p.centered {
  width: 70%;
  margin: 0 auto;
}
.work a.no-change, .case a.no-change {
  color: #4e4e4e;
  text-decoration: none;
}
.work a.no-change:hover, .work a.no-change:active, .case a.no-change:hover, .case a.no-change:active {
  color: #4e4e4e;
  text-decoration: none;
}
.work span.subtitle, .case span.subtitle {
  font-size: 29px;
  font-weight: 200;
  display: block;
  color: #4e4e4e;
}
.work img, .case img {
  width: 100%;
  height: auto;
}
.work section, .case section {
  padding: 0;
}
.work section .inner .button, .case section .inner .button {
  margin-top: 0;
}
.work .inner, .case .inner {
  margin: 0 auto;
}
.work #colormask-projects, .work .colorFill, .case #colormask-projects, .case .colorFill {
  position: absolute;
  width: 100%;
  bottom: -1px;
}
.work .colorfill-container, .case .colorfill-container {
  bottom: -69px;
  position: absolute;
  height: 80px;
  width: 100%;
}
.work #colorfill, .case #colorfill {
  z-Index: 50;
  height: 65px;
  bottom: 70px;
  width: 100%;
}
.work .colorfill-box, .case .colorfill-box {
  position: absolute;
  height: 70px;
  top: 29px;
  width: 100%;
  background-color: #7acbe4;
}
.work #colormask, .case #colormask {
  z-Index: 51;
  height: 60px;
  bottom: 0px;
}
.work .case-top-container-svg-white, .case .case-top-container-svg-white {
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-top: 7%;
  height: auto;
  overflow: hidden;
  z-index: 2;
}
.work .case-top-container-svg-white .svg-bg, .case .case-top-container-svg-white .svg-bg {
  display: inline-block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.work .case-top-container-svg-color, .case .case-top-container-svg-color {
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-top: 7%;
  height: auto;
  overflow: hidden;
  z-index: 1;
}
.work .responsive-svg, .case .responsive-svg {
  display: inline-block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.fullskewr:before {
  content: " ";
  display: block;
  position: absolute;
  top: 36px;
  bottom: 56px;
  left: 0;
  right: 0;
  -webkit-transform: skewY(2deg);
  -ms-transform: skewY(2deg);
  transform: skewY(2deg);
  z-index: -1;
  background: black;
}

.skewr-top:before {
  content: " ";
  display: block;
  position: absolute;
  width: 100%;
  height: 7%;
  left: 0;
  top: -4.5%;
  -webkit-transform: skewY(4deg);
  -ms-transform: skewY(4deg);
  transform: skewY(4deg);
  z-index: 1;
  background: #fff;
}
@media screen and (max-width: 600px) {
  .skewr-top:before {
    top: -6.5%;
  }
}

.skewr-top-reverse:before {
  -webkit-transform: skewY(-4deg);
  -ms-transform: skewY(-4deg);
  transform: skewY(-4deg);
}

.skewr-bottom:after {
  content: " ";
  display: block;
  position: absolute;
  width: 100%;
  height: 7%;
  left: 0;
  bottom: -4.5%;
  -webkit-transform: skewY(4deg);
  -ms-transform: skewY(4deg);
  transform: skewY(4deg);
  z-index: 1;
  background: #fff;
}

/* WORK OVERVIEW PAGE */
.work-content.skewr-bottom .inner.skewr-padding {
  padding-bottom: 150px;
}

/* CASES PAGE */
#case-challenge.skewr-bottom:after {
  height: 15%;
  bottom: -6.5%;
  -webkit-transform: skewY(2deg);
  -ms-transform: skewY(2deg);
  transform: skewY(2deg);
}

.case-fullpage-bg.skewr-top:before {
  height: 500px;
  top: -400px;
}

.flex-vertical-aligner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/************************************
    WORK OVERVIEW PAGE
*************************************/
.work .work-intro, .blog .work-intro {
  padding-bottom: 55px;
  padding-top: 20px;
}
@media only screen and (min-height: 650px) and (min-width: 610px) {
  .work .work-intro, .blog .work-intro {
    padding-top: 180px;
  }
}
.work .work-intro h2, .blog .work-intro h2 {
  margin-bottom: 20px;
}
.work figure.bottom-arrow, .blog figure.bottom-arrow {
  position: relative;
}
.work figure.bottom-arrow:after, .blog figure.bottom-arrow:after {
  left: 10%;
  top: auto;
  bottom: -1px;
  border: solid transparent;
  content: " ";
  position: absolute;
  pointer-events: none;
  border-bottom: 12px solid white;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  z-index: 6;
  margin-left: -6px;
  -webkit-transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0ms;
  -o-transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0ms;
  transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0ms;
}
.work .work-content, .work .blog-content, .blog .work-content, .blog .blog-content {
  text-align: left;
  margin-top: 0;
  margin-bottom: 0;
  background-color: #F7F7F5;
}
.work .work-content .inner, .work .blog-content .inner, .blog .work-content .inner, .blog .blog-content .inner {
  height: inherit;
  width: 80%;
}
.work .work-content .inner .banner, .work .blog-content .inner .banner, .blog .work-content .inner .banner, .blog .blog-content .inner .banner {
  margin: 1.5%;
}
.work .work-content .inner .banner .case-desc, .work .blog-content .inner .banner .case-desc, .blog .work-content .inner .banner .case-desc, .blog .blog-content .inner .banner .case-desc {
  padding: 0 7%;
  background: transparent;
  color: #4e4e4e;
  position: relative;
}
.work .work-content .inner .banner .case-desc h5, .work .blog-content .inner .banner .case-desc h5, .blog .work-content .inner .banner .case-desc h5, .blog .blog-content .inner .banner .case-desc h5 {
  font-size: 32px;
  line-height: 32px;
  font-weight: 200;
  margin: 0 0 3px 0;
  padding: 0;
}
.work .work-content .inner .banner .case-desc h4, .work .blog-content .inner .banner .case-desc h4, .blog .work-content .inner .banner .case-desc h4, .blog .blog-content .inner .banner .case-desc h4 {
  color: #4e4e4e;
  font-size: 35px;
  line-height: 35px;
  font-weight: 800;
  margin: 0;
  padding: 0;
}
.work .work-content .inner .banner .case-desc p, .work .blog-content .inner .banner .case-desc p, .blog .work-content .inner .banner .case-desc p, .blog .blog-content .inner .banner .case-desc p {
  font-size: 16px;
  padding: 0;
  margin: 0;
  line-height: 1.7;
  font-weight: 200;
}
.work .work-content .inner .banner .case-desc .column-case-desc-title, .work .blog-content .inner .banner .case-desc .column-case-desc-title, .blog .work-content .inner .banner .case-desc .column-case-desc-title, .blog .blog-content .inner .banner .case-desc .column-case-desc-title {
  width: 50%;
  float: left;
  padding: 50px 0;
}
.work .work-content .inner .banner .case-desc .column-case-desc-text, .work .blog-content .inner .banner .case-desc .column-case-desc-text, .blog .work-content .inner .banner .case-desc .column-case-desc-text, .blog .blog-content .inner .banner .case-desc .column-case-desc-text {
  width: 43%;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 7%;
}
.work .work-content ul.triple li, .work .blog-content ul.triple li, .blog .work-content ul.triple li, .blog .blog-content ul.triple li {
  width: 30%;
  margin: 1.5%;
}
.work .work-content ul.caselist, .work .work-content ul.list, .work .blog-content ul.caselist, .work .blog-content ul.list, .blog .work-content ul.caselist, .blog .work-content ul.list, .blog .blog-content ul.caselist, .blog .blog-content ul.list {
  margin-bottom: 20px;
  overflow: hidden;
}
.work .work-content ul.caselist li, .work .work-content ul.list li, .work .blog-content ul.caselist li, .work .blog-content ul.list li, .blog .work-content ul.caselist li, .blog .work-content ul.list li, .blog .blog-content ul.caselist li, .blog .blog-content ul.list li {
  float: left;
  display: block;
  position: relative;
}
.work .work-content ul.caselist li.hide, .work .work-content ul.list li.hide, .work .blog-content ul.caselist li.hide, .work .blog-content ul.list li.hide, .blog .work-content ul.caselist li.hide, .blog .work-content ul.list li.hide, .blog .blog-content ul.caselist li.hide, .blog .blog-content ul.list li.hide {
  display: none !important;
  opacity: 0 !important;
}
.work .work-content ul.caselist li.info-element .info-element-top, .work .work-content ul.list li.info-element .info-element-top, .work .blog-content ul.caselist li.info-element .info-element-top, .work .blog-content ul.list li.info-element .info-element-top, .blog .work-content ul.caselist li.info-element .info-element-top, .blog .work-content ul.list li.info-element .info-element-top, .blog .blog-content ul.caselist li.info-element .info-element-top, .blog .blog-content ul.list li.info-element .info-element-top {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  width: 50%;
  padding: 50%;
}
.work .work-content ul.caselist li.info-element .info-element-bottom, .work .work-content ul.list li.info-element .info-element-bottom, .work .blog-content ul.caselist li.info-element .info-element-bottom, .work .blog-content ul.list li.info-element .info-element-bottom, .blog .work-content ul.caselist li.info-element .info-element-bottom, .blog .work-content ul.list li.info-element .info-element-bottom, .blog .blog-content ul.caselist li.info-element .info-element-bottom, .blog .blog-content ul.list li.info-element .info-element-bottom {
  height: 300px;
  padding: 37px 0;
  width: 100%;
  display: block;
}
.work .work-content ul.caselist li.info-element .info-element-content, .work .work-content ul.list li.info-element .info-element-content, .work .blog-content ul.caselist li.info-element .info-element-content, .work .blog-content ul.list li.info-element .info-element-content, .blog .work-content ul.caselist li.info-element .info-element-content, .blog .work-content ul.list li.info-element .info-element-content, .blog .blog-content ul.caselist li.info-element .info-element-content, .blog .blog-content ul.list li.info-element .info-element-content {
  position: absolute;
  bottom: 300px;
  width: 92%;
  text-align: center;
  top: 0;
  bottom: 0;
  left: 4%;
  right: 0;
}
.work .work-content ul.caselist li.info-element .info-element-content h5, .work .work-content ul.list li.info-element .info-element-content h5, .work .blog-content ul.caselist li.info-element .info-element-content h5, .work .blog-content ul.list li.info-element .info-element-content h5, .blog .work-content ul.caselist li.info-element .info-element-content h5, .blog .work-content ul.list li.info-element .info-element-content h5, .blog .blog-content ul.caselist li.info-element .info-element-content h5, .blog .blog-content ul.list li.info-element .info-element-content h5 {
  font-size: 28px;
  line-height: 1.4;
}
.work .work-content ul.caselist li.info-element .info-element-content .button, .work .work-content ul.list li.info-element .info-element-content .button, .work .blog-content ul.caselist li.info-element .info-element-content .button, .work .blog-content ul.list li.info-element .info-element-content .button, .blog .work-content ul.caselist li.info-element .info-element-content .button, .blog .work-content ul.list li.info-element .info-element-content .button, .blog .blog-content ul.caselist li.info-element .info-element-content .button, .blog .blog-content ul.list li.info-element .info-element-content .button {
  margin-top: 25px;
}
.work .work-content ul.caselist li a figure, .work .work-content ul.list li a figure, .work .blog-content ul.caselist li a figure, .work .blog-content ul.list li a figure, .blog .work-content ul.caselist li a figure, .blog .work-content ul.list li a figure, .blog .blog-content ul.caselist li a figure, .blog .blog-content ul.list li a figure {
  overflow: hidden;
}
.work .work-content ul.caselist li a figure img, .work .work-content ul.list li a figure img, .work .blog-content ul.caselist li a figure img, .work .blog-content ul.list li a figure img, .blog .work-content ul.caselist li a figure img, .blog .work-content ul.list li a figure img, .blog .blog-content ul.caselist li a figure img, .blog .blog-content ul.list li a figure img {
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.840, 0.440, 1.000) 0ms;
  -o-transition: all 0.6s cubic-bezier(0.165, 0.840, 0.440, 1.000) 0ms;
  transition: all 0.6s cubic-bezier(0.165, 0.840, 0.440, 1.000) 0ms;
}
.work .work-content ul.caselist li a:hover figure img, .work .work-content ul.list li a:hover figure img, .work .blog-content ul.caselist li a:hover figure img, .work .blog-content ul.list li a:hover figure img, .blog .work-content ul.caselist li a:hover figure img, .blog .work-content ul.list li a:hover figure img, .blog .blog-content ul.caselist li a:hover figure img, .blog .blog-content ul.list li a:hover figure img {
  -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
          transform: scale(1.05);
}
.work .work-content ul.caselist img.caselist-award, .work .work-content ul.list img.caselist-award, .work .blog-content ul.caselist img.caselist-award, .work .blog-content ul.list img.caselist-award, .blog .work-content ul.caselist img.caselist-award, .blog .work-content ul.list img.caselist-award, .blog .blog-content ul.caselist img.caselist-award, .blog .blog-content ul.list img.caselist-award {
  position: absolute;
  top: 0;
  left: 0;
  width: 125px;
  height: auto;
  z-index: 99;
}
.work .work-content ul.caselist .case-top, .work .work-content ul.list .case-top, .work .blog-content ul.caselist .case-top, .work .blog-content ul.list .case-top, .blog .work-content ul.caselist .case-top, .blog .work-content ul.list .case-top, .blog .blog-content ul.caselist .case-top, .blog .blog-content ul.list .case-top {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  width: 50%;
  padding: 50%;
  background-color: #FFF;
}
.work .work-content ul.caselist figure.bottom-arrow, .work .work-content ul.list figure.bottom-arrow, .work .blog-content ul.caselist figure.bottom-arrow, .work .blog-content ul.list figure.bottom-arrow, .blog .work-content ul.caselist figure.bottom-arrow, .blog .work-content ul.list figure.bottom-arrow, .blog .blog-content ul.caselist figure.bottom-arrow, .blog .blog-content ul.list figure.bottom-arrow {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
.work .work-content ul.caselist figure.bottom-arrow:after, .work .work-content ul.list figure.bottom-arrow:after, .work .blog-content ul.caselist figure.bottom-arrow:after, .work .blog-content ul.list figure.bottom-arrow:after, .blog .work-content ul.caselist figure.bottom-arrow:after, .blog .work-content ul.list figure.bottom-arrow:after, .blog .blog-content ul.caselist figure.bottom-arrow:after, .blog .blog-content ul.list figure.bottom-arrow:after {
  border-bottom: 12px solid #F7F7F5;
}
.work .work-content ul.caselist .case-desc, .work .work-content ul.list .case-desc, .work .blog-content ul.caselist .case-desc, .work .blog-content ul.list .case-desc, .blog .work-content ul.caselist .case-desc, .blog .work-content ul.list .case-desc, .blog .blog-content ul.caselist .case-desc, .blog .blog-content ul.list .case-desc {
  padding: 37px 7%;
  background: transparent;
  overflow: hidden;
  height: 300px;
  color: #4e4e4e;
}
.work .work-content ul.caselist .case-desc h4, .work .work-content ul.list .case-desc h4, .work .blog-content ul.caselist .case-desc h4, .work .blog-content ul.list .case-desc h4, .blog .work-content ul.caselist .case-desc h4, .blog .work-content ul.list .case-desc h4, .blog .blog-content ul.caselist .case-desc h4, .blog .blog-content ul.list .case-desc h4 {
  margin-bottom: 20px;
  font-weight: bold;
}
.work .work-content ul.caselist .case-desc p, .work .work-content ul.list .case-desc p, .work .blog-content ul.caselist .case-desc p, .work .blog-content ul.list .case-desc p, .blog .work-content ul.caselist .case-desc p, .blog .work-content ul.list .case-desc p, .blog .blog-content ul.caselist .case-desc p, .blog .blog-content ul.list .case-desc p {
  font-size: 16px;
  line-height: 1.7;
  font-weight: 200;
  padding: 0;
  margin: 0;
}
.work .work-content ul.caselist.triple li.head-case, .work .blog-content ul.caselist.triple li.head-case, .blog .work-content ul.caselist.triple li.head-case, .blog .blog-content ul.caselist.triple li.head-case {
  width: 63%;
  margin: 1.5%;
}
.work .work-content ul.caselist.triple li.head-case .case-top, .work .blog-content ul.caselist.triple li.head-case .case-top, .blog .work-content ul.caselist.triple li.head-case .case-top, .blog .blog-content ul.caselist.triple li.head-case .case-top {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  width: 50%;
  padding: 20%;
  background-color: #FFF;
}
.work section.get-in-touch, .blog section.get-in-touch {
  padding-top: 0;
  padding-bottom: 100px;
}
.work section.get-in-touch .inner, .blog section.get-in-touch .inner {
  width: 40%;
  margin: 0 auto;
}
.work section.get-in-touch h3, .blog section.get-in-touch h3 {
  font-size: 36px;
}

/************************************
    Project Filter
*************************************/
.work__filter {
  margin: 0px auto;
  padding: 50px 80px;
  background: #fff;
  border-bottom: 1px solid rgba(170, 170, 170, 0.4);
  text-align: center;
}
@media only screen and (min-height: 650px) {
  .work__filter {
    padding: 50px 130px;
  }
}
@media only screen and (max-width: 510px) {
  .work__filter {
    padding: 16px 0px 0px 80px;
    text-align: left;
  }
}
@media only screen and (min-height: 650px) and (min-width: 610px) {
  .work__filter {
    padding: 50px 130px;
    display: block;
    position: fixed;
    z-index: 9;
    width: 100%;
  }
}
.work__filter-topic {
  display: inline-block;
  font-size: 15px;
  line-height: 15px;
  padding: 5px 10px;
  cursor: pointer;
  opacity: 0.4;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000) 0ms;
  -o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000) 0ms;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000) 0ms;
}
.work__filter-topic.active, .work__filter-topic:hover {
  opacity: 1;
}

/************************************
    CASE DETAIL PAGE
*************************************/
.case .case-top-container-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 650px;
  overflow: hidden;
  z-index: 1;
}
.case .case-top-container-svg .case-top-container-svg-parallax {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 650px;
  z-index: 1;
}
.case .case-top-container-svg .case-top-container-svg-parallax .case-top-container-svg-mask {
  position: absolute;
  width: 100%;
  bottom: -398px;
  left: 0;
  height: 400px;
  background-color: #FFF;
  z-index: 99;
}
.case .case-top-container {
  position: relative;
  top: 0px;
  left: 0px;
  background-color: #FFF;
  width: 100%;
  height: 650px;
  overflow: hidden;
}
.case .case-top-container .case-top {
  top: 0px;
  left: 0px;
  background-color: #FFF;
  width: 100%;
  height: 650px;
  background-repeat: none;
  background-position: center top;
  background-position: fixed;
  background-size: cover;
}
.case .case-top-container .svgout {
  bottom: -1px;
}
.case .case-intro {
  padding-top: 10px;
}
.case .case-intro .inner h6 {
  margin: 10px 0;
}
.case .case-intro .inner .share-case {
  margin: 30px auto 0 auto;
  position: relative;
  overflow: hidden;
}
.case .case-intro .inner .share-case .siteLink .link {
  margin-top: 10px;
}
.case .case-intro .inner .share-case .socialLink {
  padding-top: 30px;
}
.case .case-intro .inner .share-case .share-case-buttons {
  width: 100%;
  text-align: center;
}
.case .case-intro .inner .share-case .share-case-buttons li {
  display: inline-block;
  margin: 0 15px;
}
.case .case-intro .inner .share-case .share-case-buttons li a {
  min-width: 200px;
}
.case .case-content {
  /*
          &.no-vimeo .case-video{
              padding-bottom: 0;
          }
  */
}
.case .case-content #case-content-svg {
  position: absolute;
  top: 450px;
  left: 0;
}
.case .case-content .outer {
  z-index: 1;
  position: relative;
  width: 100%;
}
.case .case-content .inner {
  width: 80%;
  position: relative;
  z-index: 1;
}
.case .case-content .case-video {
  padding-top: 60px;
  padding-bottom: 135px;
}
.case .case-content .intro {
  width: 70%;
  margin-bottom: 50px;
}
.case .case-content .intro p {
  /*              font-size: 14px; */
}
.case .case-content .intro p.section-intro {
  /*                  font-size: 16px; */
}

/************************************
    GENERAL CASE CONTENT MODULES
*************************************/
.case-content-module {
  padding: 50px 0;
}
.case-content-module.no-spacetop {
  padding-top: 0;
}
.case-content-module.first-content-module {
  padding-top: 120px;
}
.case-content-module h5 {
  padding-bottom: 20px;
  font-size: 23px;
  font-weight: 800;
}
.case-content-module img {
  width: 100%;
  height: auto;
}
.case-content-module .text-block {
  float: left;
  width: 36%;
  text-align: left;
  margin-left: 4%;
  margin-top: 0px;
}
.case-content-module .text-block.white-bg-color {
  margin-left: 0%;
  padding: 2%;
  width: 40%;
  background-color: #FFF;
}
.case-content-module.text-img-block .img-block {
  float: right;
  text-align: left;
  width: 56%;
  margin-left: 4%;
}
.case-content-module.text-img-block .img-block img {
  width: 100%;
  height: auto;
}
.case-content-module.text-img-block.layout-text-left .text-block {
  float: left;
}
.case-content-module.text-img-block.layout-text-right .text-block {
  float: right;
}
.case-content-module.text-img-block.layout-text-center .text-block {
  float: none;
  margin: 0 auto;
}
.case-content-module.text-img-block.layout-text-center .text-block h5, .case-content-module.text-img-block.layout-text-center .text-block p {
  text-align: center;
}
.case-content-module.text-img-block.layout-image-left .text-block {
  float: right;
}
.case-content-module.text-img-block.layout-image-left .img-block {
  float: left;
}
.case-content-module.text-img-block.layout-image-bg-text-left .image-container, .case-content-module.text-img-block.layout-image-bg-text-right .image-container {
  position: relative;
}
.case-content-module.text-img-block.layout-image-bg-text-left .image-container img, .case-content-module.text-img-block.layout-image-bg-text-right .image-container img {
  width: 100%;
  height: auto;
}
.case-content-module.text-img-block.layout-image-bg-text-left .text-container, .case-content-module.text-img-block.layout-image-bg-text-right .text-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.case-content-module.text-img-block.layout-image-bg-text-right .text-block {
  float: right;
}
.case-content-module.text-img-block.layout-image-top-text-bottom .image-container {
  position: relative;
  width: 100%;
}
.case-content-module.text-img-block.layout-image-top-text-bottom .image-container img {
  display: block;
  width: 100%;
  height: auto;
}
.case-content-module.text-img-block.layout-image-top-text-bottom .text-block {
  float: none;
  margin: 0 auto;
  padding-top: 30px;
}
.case-content-module.text-img-block.layout-image-top-text-bottom .text-block h5, .case-content-module.text-img-block.layout-image-top-text-bottom .text-block p {
  text-align: center;
}
.case-content-module.isometric-header {
  padding-bottom: 0;
}
.case-content-module.isometric-header #project-isometric-bottom {
  bottom: -1px;
}
.case-content-module.isometric-header .svg-bg-container {
  position: absolute;
  bottom: -70px;
  left: 0;
  width: 100%;
  padding-top: 54%;
  height: 0;
}
.case-content-module.isometric-header .svg-bg-container .svg-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.case-content-module.isometric-header .svg-front {
  position: absolute;
  bottom: 0px;
  left: 0;
  z-index: 300;
}
.case-content-module.isometric-header .super-mockup {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  padding-top: 50%;
}
.case-content-module.isometric-header .super-mockup.dark-bg h2.case-title,
.case-content-module.isometric-header .super-mockup.dark-bg h3,
.case-content-module.isometric-header .super-mockup.dark-bg h4,
.case-content-module.isometric-header .super-mockup.dark-bg h5,
.case-content-module.isometric-header .super-mockup.dark-bg p,
.case-content-module.isometric-header .super-mockup.dark-bg span.subtitle,
.case-content-module.isometric-header .super-mockup.dark-bg span.title {
  color: #FFF;
}
.case-content-module.isometric-header .super-mockup img {
  position: absolute;
  top: 15px;
  right: 0px;
}
.case-content-module.isometric-header .text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}
@media screen and (min-width: 1025px) {
  .case-content-module.isometric-header .text-overlay {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}
.case-content-module.isometric-header .text-block {
  padding-top: 100px;
  margin-left: 0;
  width: 30%;
}
@media screen and (min-width: 1025px) {
  .case-content-module.isometric-header .text-block {
    padding-top: 0;
  }
}
.case-content-module.image-grid .banner-image {
  padding-bottom: 3.75%;
}
.case-content-module.image-grid .banner-image.last-banner-image {
  padding-bottom: 0px;
}
.case-content-module.image-grid .inner-margins {
  margin: 0 auto;
  overflow: hidden;
}
.case-content-module.image-grid .inner-margins ul.image-grid-list {
  width: 103%;
}
.case-content-module.image-grid .inner-margins ul.image-grid-list li {
  float: left;
  width: 47%;
  height: auto;
  margin: 3% 3% 0 0;
}
.case-content-module.image-grid .inner-margins ul.image-grid-list li.no-spacetop {
  margin-top: 0;
}
.case-content-module.image-grid .inner-margins.no-spacetop ul.image-grid-list li {
  margin-top: 0;
}
.case-content-module.isometric-screens .super-mockup {
  position: relative;
}
.case-content-module.colors .svg-colors {
  position: absolute;
  top: 0;
  left: 0;
}
.case-content-module.colors ul.colors-list {
  display: block;
  margin: 0 auto;
}
.case-content-module.colors ul.colors-list li {
  position: relative;
  display: inline-block;
  margin: 0.8%;
}
.case-content-module.mosaic {
  position: relative;
  height: 1100px;
  margin: 0 auto;
}
.case-content-module.mosaic .inner {
  height: inherit;
}
.case-content-module.mosaic .text-block {
  float: none;
  position: absolute;
  top: 0;
  left: 7%;
  width: 35%;
  max-width: 550px;
  padding-top: 25px;
}
.case-content-module.mosaic ul.image-collection-list {
  height: inherit;
  width: 100%;
  margin: 0 auto;
  max-width: 1140px;
  position: relative;
}
.case-content-module.mosaic ul.image-collection-list li {
  position: absolute;
  top: 0px;
  left: 0;
}
.case-content-module.mosaic ul.image-collection-list .pos-1 {
  width: 41.6%;
  top: 0%;
  left: 57.7%;
}
.case-content-module.mosaic ul.image-collection-list .pos-2 {
  width: 27.1%;
  top: 30.6%;
  left: 28.7%;
}
.case-content-module.mosaic ul.image-collection-list .pos-3 {
  width: 12.6%;
  top: 45.8%;
  left: 57.7%;
}
.case-content-module.mosaic ul.image-collection-list .pos-4 {
  width: 12.6%;
  top: 30.6%;
  left: 14.5%;
}
.case-content-module.mosaic ul.image-collection-list .pos-5 {
  width: 27.1%;
  top: 45.8%;
  left: 72.2%;
}
.case-content-module.mosaic ul.image-collection-list .pos-6 {
  width: 27.1%;
  top: 45.8%;
  left: 0;
}
.case-content-module.mosaic ul.image-collection-list .pos-7 {
  width: 12.6%;
  top: 60.8%;
  left: 28.7%;
}
.case-content-module.mosaic ul.image-collection-list .pos-8 {
  width: 27.1%;
  top: 60.8%;
  left: 43.2%;
}
.case-content-module.mosaic.layout-text-right .text-block {
  float: none;
  position: absolute;
  top: 0;
  left: 42%;
  width: 45%;
  padding-top: 25px;
}
.case-content-module.mosaic.layout-text-right ul.image-collection-list {
  height: inherit;
}
.case-content-module.mosaic.layout-text-right ul.image-collection-list li {
  position: absolute;
  top: 0%;
  left: 0%;
}
.case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-1 {
  width: 41.6%;
  top: 0%;
  left: 0%;
}
.case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-2 {
  width: 27.1%;
  top: 30.6%;
  left: 43.5%;
}
.case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-3 {
  width: 12.6%;
  top: 45.8%;
  left: 29%;
}
.case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-4 {
  width: 12.6%;
  top: 30.6%;
  left: 72.6%;
}
.case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-5 {
  width: 27.1%;
  top: 45.8%;
  left: 0%;
}
.case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-6 {
  width: 27.1%;
  top: 45.8%;
  left: 72.6%;
}
.case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-7 {
  width: 27.1%;
  top: 60.8%;
  left: 43.5%;
}
.case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-8 {
  width: 12.6%;
  top: 60.8%;
  left: 29%;
}
.case-content-module.code-showoff .code-block {
  width: 60%;
  float: left;
}
.case-content-module.code-showoff .code-block span.code-content {
  background-color: #444;
  color: #FFF;
  padding: 10%;
  text-align: left;
  font-family: monospace;
  display: block;
  width: 80%;
}
.case-content-module.code-showoff .text-block {
  width: 32%;
  float: right;
  text-align: left;
  margin-top: 100px;
}
.case-content-module.code-showoff.layout-text-left .code-block {
  float: right;
}
.case-content-module.code-showoff.layout-text-left .text-block {
  float: left;
}
.case-content-module.column-header {
  background-repeat: no-repeat;
  background-position: top center;
  background-position: fixed;
  background-size: cover;
  /*      height: 900px; */
  padding: 140px 0 160px 0;
}
.case-content-module.column-header .inner {
  height: inherit;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.case-content-module.column-header .intro {
  margin-bottom: 80px;
}
.case-content-module.column-header .column-header-list li {
  float: left;
  width: 27%;
  margin: 0 3%;
  text-align: center;
}
.case-content-module.column-header .column-header-list li img {
  width: auto;
  height: auto;
  max-width: 100%;
}
.case-content-module.column-header .column-header-list li h5 {
  padding-top: 20px;
  padding-bottom: 0;
  /* font-size: 20px; */
  font-size: 24px;
  font-weight: 200;
}
.case-content-module.column-header .column-header-list li h5 span.bold-head {
  font-weight: 800;
  font-size: 32px;
  display: block;
}
.case-content-module.column-header .column-header-list li p {
  padding-top: 20px;
  padding-bottom: 20px;
  width: 85%;
  margin: 0 auto;
  font-size: 16px;
}
.case-content-module.column-header .column-header-list li.list-fact {
  -ms-flex-item-align: start;
      align-self: flex-start;
}
.case-content-module.column-header .column-header-list li.list-quote {
  width: 33%;
  margin: 0;
  text-align: center;
  position: relative;
}
.case-content-module.column-header .column-header-list li.list-quote h4 {
  width: 100%;
  /* font-size: 24px; */
  font-size: 20px;
  font-style: italic;
  /* font-weight: 400; */
  font-weight: 200;
  line-height: 1.5;
  -webkit-font-smoothing: subpixel-antialiased;
}
.case-content-module.column-header .column-header-list li.list-quote .quote-mark-start {
  display: block;
  position: absolute;
  top: -65px;
  left: -35px;
  width: auto;
  height: auto;
}
.case-content-module.column-header .column-header-list li.list-quote .quote-mark-end {
  display: block;
  position: absolute;
  bottom: -65px;
  right: -15px;
  width: auto;
  height: auto;
}
.case-content-module.dark-bg h2.case-title,
.case-content-module.dark-bg h3,
.case-content-module.dark-bg h4,
.case-content-module.dark-bg h5,
.case-content-module.dark-bg p,
.case-content-module.dark-bg span.subtitle,
.case-content-module.dark-bg span.title {
  color: #FFF;
}
.case-content-module.beige-bg {
  background-color: #f7f5f2;
}

/************************************
    SECTION SPECIFIC
*************************************/
section#case-challenge .case-content-module {
  min-height: 1000px;
  padding: 0;
}
section#case-challenge .case-content-module .inner {
  padding: 0;
  min-height: inherit;
  background-position: center bottom;
  background-repeat: no-repeat;
}
section#case-challenge .case-content-module .text-block {
  margin-top: 100px;
}
section#case-challenge .case-fullpage-bg {
  top: 18%;
  bottom: 50px;
  left: 0;
  right: 0;
  position: absolute;
  width: 100%;
  z-index: 1;
  /*  background-position: center bottom; */
  /*  background-size: 100%; */
  background-repeat: no-repeat;
  background-position: fixed;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}
section#case-challenge .case-fullpage-bg.case-desktop-bg {
  display: block;
}
section#case-challenge .case-fullpage-bg.case-mobile-bg {
  display: none;
}
section#case-challenge .case-mobile-object {
  display: none;
  position: relative;
  width: 100%;
  height: auto;
}

section#case-challenge.no-vimeo .case-fullpage-bg {
  top: 0px;
}

section#case-approach {
  padding-top: 10px;
}

section#case-solution {
  padding-top: 0;
  background-color: #f7f5f2;
  padding-bottom: 111px;
}
section#case-solution .isometric-header {
  padding-top: 75px;
  background-color: #FFF;
  overflow: hidden;
}
@media (max-width: 800px) {
  section#case-solution .case-desktop-object {
    display: none;
  }
}
section#case-solution .assetIsoMobile {
  display: none;
  width: 100%;
  height: auto;
}
@media (max-width: 800px) {
  section#case-solution .assetIsoMobile {
    display: block;
  }
  section#case-solution .assetIsoMobile img {
    bottom: -45%;
  }
}
@media (max-width: 600px) {
  section#case-solution .assetIsoMobile img {
    bottom: -25%;
  }
}
@media (max-width: 500px) {
  section#case-solution .assetIsoMobile img {
    bottom: -15%;
    width: 100%;
  }
}

section#case-details {
  padding-top: 50px;
}

section#case-takeaway .mosaic {
  top: -120px;
}
section#case-takeaway .mosaic .text-block {
  padding-top: 150px;
}

section#case-projectview {
  height: 700px;
  background: #000 url("../img/projects/bg_project_view.png") no-repeat fixed center top;
  background-size: cover;
  z-index: 2;
}
section#case-projectview.no-mosaic-class {
  margin-top: 140px;
}
section#case-projectview .svg-projectview-top {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 300;
}
section#case-projectview .svg-projectview-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 300;
}
section#case-projectview .inner {
  height: inherit;
  width: 80%;
  margin: 0 auto;
}
section#case-projectview .block-container {
  width: 100%;
}
section#case-projectview .text-block {
  text-align: left;
  float: left;
  width: 50%;
  margin-left: 0%;
}
section#case-projectview .social-block {
  text-align: center;
  float: right;
  width: 40%;
  margin-right: 0%;
  margin-top: 69px;
}
section#case-projectview .share-case-buttons {
  width: 100%;
}
section#case-projectview .share-case-buttons li {
  float: left;
  margin-right: 15px;
}
section#case-projectview ul.social-icons li {
  width: 62px;
  height: 62px;
}
section#case-projectview ul.social-icons a {
  border: 2px #FFF solid;
  border-radius: 62px;
  width: 62px;
  height: 62px;
  line-height: 62px;
  border-color: #FFF;
}
section#case-projectview ul.social-icons a .fa {
  top: -2px;
  left: -2px;
  width: 62px;
  height: 62px;
  color: #FFF;
  font-size: 26px;
  line-height: 62px;
}
section#case-projectview ul.social-icons a:hover {
  border-color: #7acbe4;
}
section#case-projectview ul.social-icons a:hover .fa {
  color: #7acbe4;
}
section#case-projectview h2 {
  margin-top: 10px;
  margin-bottom: 20px;
}
section#case-projectview.dark-bg h2.case-title,
section#case-projectview.dark-bg h3,
section#case-projectview.dark-bg h4,
section#case-projectview.dark-bg h5,
section#case-projectview.dark-bg p,
section#case-projectview.dark-bg span.subtitle,
section#case-projectview.dark-bg span.title {
  color: #FFF;
}

section#case-awards {
  background: #FFF;
  /* $color-beige; */
  text-align: left;
}
section#case-awards.no-content {
  padding-bottom: 0;
}
section#case-awards.no-content .case-content-module {
  padding: 18px 0;
}
section#case-awards .inner {
  width: 67%;
}
section#case-awards .case-awards-list > li {
  width: 27%;
  margin: 0 3%;
  text-align: left;
  float: left;
}
section#case-awards .case-awards-textlist > li {
  font-size: 15px;
  line-height: 2.8em;
}
section#case-awards .case-awards-textlist > li span.soft {
  color: #bfbab2;
}
section#case-awards .case-awards-textlist > li a, section#case-awards .case-awards-textlist > li a:hover, section#case-awards .case-awards-textlist > li a:visited {
  text-decoration: none;
  color: #4e4e4e;
}
section#case-awards .case-awards-imagelist > li {
  float: left;
  width: 33%;
}
section#case-awards .case-awards-imagelist > li img {
  width: 75%;
  margin: 0 auto;
  height: auto;
}

section#case-related-head {
  margin: 0;
  padding: 0;
  background-color: #FFF;
  display: none;
}
section#case-related-head .case-content-module {
  padding: 0 0 30px 0;
}

section#case-related {
  margin: 0;
  padding: 0 0 75px 0;
}
section#case-related .pager {
  /*      overflow: hidden; */
  width: 50%;
  /* min-height: 420px; */
  position: relative;
  background-color: #FFF;
  /* $color-beige; */
  /*
          &.dark-bg{
              @include force-white-font;
          }
  */
}
section#case-related .case-related-separator {
  position: absolute;
  width: 1px;
  top: -85px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  height: 140px;
  z-index: 999;
  background-color: #EEE;
}
section#case-related .paginate-prev {
  float: left;
}
section#case-related .paginate-next {
  float: right;
}
section#case-related .pager-background {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-position: center center;
  background-size: cover;
  z-index: 2;
  opacity: 0;
  -webkit-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1.000) 0ms;
  -o-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1.000) 0ms;
  transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1.000) 0ms;
}
section#case-related .pager-overlay {
  position: relative;
  text-align: left;
  z-index: 10;
  margin: 60px auto;
  display: inline-block;
}
section#case-related .pager-overlay h4 {
  margin-bottom: 20px;
  font-weight: bold;
}
section#case-related .pager-overlay .arrow-icon {
  font-size: 80px;
  line-height: 80px;
  position: absolute;
  top: -14px;
  font-weight: 200;
  opacity: 1;
  /* @include gradient-text; */
  color: #4e4e4e;
  -webkit-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1.000) 0ms;
  -o-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1.000) 0ms;
  transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1.000) 0ms;
}
section#case-related .pager-overlay .arrow-icon .arrow-icon-hover {
  display: none;
  line-height: 80px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  color: #7acbe4;
  background: -webkit-linear-gradient(#7acbe4, #8ed5d6);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1.000) 0ms;
  -o-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1.000) 0ms;
  transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1.000) 0ms;
}
section#case-related .paginate-prev .pager-overlay .arrow-icon {
  left: -60px;
  right: auto;
}
section#case-related .paginate-next .pager-overlay .arrow-icon {
  left: auto;
  right: -60px;
}
section#case-related img {
  opacity: 0;
  -webkit-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1.000) 0ms;
  -o-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1.000) 0ms;
  transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1.000) 0ms;
}
section#case-related a:hover {
  /*
          .pager-overlay .arrow-icon .arrow-icon-hover{
              opacity: 0;
          }
  */
}
section#case-related a:hover img {
  opacity: 1;
}
section#case-related a:hover .pager-overlay .arrow-icon {
  color: #7acbe4;
}

/*
.lightboxVimeo{
    position: relative;
    max-width: 100%;
    display: block;
}
.lightboxVimeo::before {
        transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;

        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        -webkit-box-shadow: inset 0px 0px 105px 25px #666666;
        -moz-box-shadow: inset 0px 0px 105px 25px #666666;
        box-shadow: inset 0px 0px 105px 25px #666;
}
.lightboxVimeo:hover::before{
    -webkit-box-shadow: inset 0px 0px 105px 15px #666666;
    -moz-box-shadow: inset 0px 0px 105px 15px #666666;
    box-shadow: inset 0px 0px 105px 15px #666;
}
*/
/************************************
    MEDIAQUERIES
*************************************/
@media (min-width: 1680px) {
  .case-content-module.isometric-header .super-mockup img {
    right: 0px !important;
    width: auto;
    min-width: intrinsic;
  }
}
@media (min-width: 1024px) {
  .p-columns {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    column-gap: 30px;
    text-align: justify !important;
    padding-top: 23px;
  }
}
@media (max-width: 1420px) {
  section#case-related img {
    height: 100%;
    width: auto;
  }
}
@media (max-width: 1280px) {
  .work .work-content ul.triple li, .work .blog-content ul.triple li, .blog .work-content ul.triple li, .blog .blog-content ul.triple li {
    width: 47%;
  }

  section#case-challenge .case-content-module .inner {
    width: 90%;
    margin-right: 0;
    margin-left: 10%;
  }

  .case-content-module.mosaic {
    height: 1050px;
  }
  .case-content-module.mosaic ul.image-collection-list {
    top: 75px;
  }
  .case-content-module.mosaic ul.image-collection-list .pos-1 {
    top: 0%;
  }
  .case-content-module.mosaic ul.image-collection-list .pos-2 {
    top: 28.4%;
  }
  .case-content-module.mosaic ul.image-collection-list .pos-3 {
    top: 42.3%;
  }
  .case-content-module.mosaic ul.image-collection-list .pos-4 {
    top: 28.4%;
  }
  .case-content-module.mosaic ul.image-collection-list .pos-5 {
    top: 42.3%;
  }
  .case-content-module.mosaic ul.image-collection-list .pos-6 {
    top: 42.3%;
  }
  .case-content-module.mosaic ul.image-collection-list .pos-7 {
    top: 56.3%;
  }
  .case-content-module.mosaic ul.image-collection-list .pos-8 {
    top: 56.3%;
  }
  .case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-1 {
    top: 0%;
  }
  .case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-2 {
    top: 28.4%;
  }
  .case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-3 {
    top: 42.3%;
  }
  .case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-4 {
    top: 28.4%;
  }
  .case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-5 {
    top: 42.3%;
  }
  .case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-6 {
    top: 42.3%;
  }
  .case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-7 {
    top: 56.3%;
  }
  .case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-8 {
    top: 56.3%;
  }
}
@media (max-width: 1024px) {
  .work .work-content .inner, .work .blog-content .inner, .blog .work-content .inner, .blog .blog-content .inner {
    width: 90%;
  }

  .work-content.skewr-bottom .inner.skewr-padding {
    padding-bottom: 250px;
  }

  .work section.get-in-touch .inner, .blog section.get-in-touch .inner {
    width: 80%;
  }

  .case .case-intro {
    padding-top: 25px;
  }

  section#case-challenge {
    /*
            .case-content-module{
                .inner{
                    background-position: center 70% !important;
                    background-size: 110%;
                }
            }
    */
  }
  section#case-challenge .case-fullpage-bg {
    top: 15%;
    background-position: center center !important;
    /* WILL KILL THE PARALLAX! */
  }

  .case-content-module.mosaic {
    height: 950px;
  }
  .case-content-module.mosaic ul.image-collection-list {
    top: 200px;
  }
  .case-content-module.mosaic ul.image-collection-list .pos-1 {
    top: 0%;
  }
  .case-content-module.mosaic ul.image-collection-list .pos-2 {
    top: 24.6%;
  }
  .case-content-module.mosaic ul.image-collection-list .pos-3 {
    top: 36.8%;
  }
  .case-content-module.mosaic ul.image-collection-list .pos-4 {
    top: 24.6%;
  }
  .case-content-module.mosaic ul.image-collection-list .pos-5 {
    top: 36.8%;
  }
  .case-content-module.mosaic ul.image-collection-list .pos-6 {
    top: 36.8%;
  }
  .case-content-module.mosaic ul.image-collection-list .pos-7 {
    top: 49.3%;
  }
  .case-content-module.mosaic ul.image-collection-list .pos-8 {
    top: 49.3%;
  }
  .case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-1 {
    top: 0%;
  }
  .case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-2 {
    top: 24.6%;
  }
  .case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-3 {
    top: 36.8%;
  }
  .case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-4 {
    top: 24.6%;
  }
  .case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-5 {
    top: 36.8%;
  }
  .case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-6 {
    top: 36.8%;
  }
  .case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-7 {
    top: 49.3%;
  }
  .case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-8 {
    top: 49.3%;
  }

  #case-approach .case-content-module.text-img-block .text-block {
    float: none;
    width: 92%;
    text-align: center;
  }
  #case-approach .case-content-module.text-img-block .img-block {
    float: none;
    width: 100%;
    margin-top: 50px;
  }

  .case-content-module.isometric-header {
    padding-top: 0;
    padding-bottom: 0;
  }
  .case-content-module.isometric-header .svg-bg-container {
    bottom: -35px;
  }
  .case-content-module.isometric-header .super-mockup {
    height: 800px;
    padding-top: 0 !important;
    position: relative;
  }
  .case-content-module.isometric-header .super-mockup img {
    -webkit-transform: translate3d(0px, 0px, 0px) !important;
    top: auto;
    bottom: -25%;
    right: 0px !important;
    position: absolute;
  }
  .case-content-module.isometric-header .super-mockup .text-overlay {
    position: relative;
  }
  .case-content-module.isometric-header .super-mockup .text-overlay .inner {
    width: 70%;
  }
  .case-content-module.isometric-header .super-mockup .text-block {
    margin-top: 0;
    padding-top: 0;
    width: 100%;
    float: none;
  }
  .case-content-module.isometric-header .super-mockup .text-block h5, .case-content-module.isometric-header .super-mockup .text-block p {
    text-align: center;
    color: #4e4e4e;
  }

  section#case-related .paginate-prev .pager-overlay .arrow-icon {
    font-size: 40px;
    left: -30px;
  }
  section#case-related .paginate-next .pager-overlay .arrow-icon {
    font-size: 40px;
    right: -30px;
  }

  section#case-projectview .social-block {
    width: 50%;
  }
}
@media (min-width: 801px) {
  section#case-challenge .case-fullpage-bg.case-mobile-bg {
    background: none !important;
  }
}
@media (max-width: 800px) {
  .work h2, .case h2 {
    font-size: 40px;
  }
  .work h3, .work h5.special-headline, .case h3, .case h5.special-headline {
    font-size: 32px;
  }

  section#case-challenge .case-fullpage-bg.skewr-top:before {
    top: -450px;
  }
  section#case-challenge .case-fullpage-bg.case-desktop-bg {
    display: none;
    background: none !important;
  }
  section#case-challenge .case-fullpage-bg.case-mobile-bg {
    display: block;
    background-position: center bottom !important;
    background-size: auto;
  }
  section#case-challenge .case-content-module {
    min-height: inherit !important;
  }
  section#case-challenge .case-content-module.case-desktop-object .inner {
    background: none !important;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 70px;
  }
  section#case-challenge .case-mobile-object {
    display: block;
  }
  section#case-challenge .text-block p {
    width: 75%;
  }

  .case .case-content .case-video {
    padding-bottom: 60px;
  }

  .case .case-content .intro {
    width: 90%;
  }

  .case-content-module.mosaic,
.case-content-module.mosaic.layout-text-right {
    height: 950px;
  }
  .case-content-module.mosaic .text-block,
.case-content-module.mosaic.layout-text-right .text-block {
    float: none;
    position: relative;
    width: 86%;
    text-align: center;
    left: 0;
    right: 0;
  }
  .case-content-module.mosaic ul.image-collection-list,
.case-content-module.mosaic.layout-text-right ul.image-collection-list {
    top: 75px;
  }
  .case-content-module.mosaic ul.image-collection-list .pos-1,
.case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-1 {
    top: 0%;
  }
  .case-content-module.mosaic ul.image-collection-list .pos-2,
.case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-2 {
    top: 19.3%;
  }
  .case-content-module.mosaic ul.image-collection-list .pos-3,
.case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-3 {
    top: 28.8%;
  }
  .case-content-module.mosaic ul.image-collection-list .pos-4,
.case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-4 {
    top: 19.3%;
  }
  .case-content-module.mosaic ul.image-collection-list .pos-5,
.case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-5 {
    top: 28.8%;
  }
  .case-content-module.mosaic ul.image-collection-list .pos-6,
.case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-6 {
    top: 28.8%;
  }
  .case-content-module.mosaic ul.image-collection-list .pos-7,
.case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-7 {
    top: 38.5%;
  }
  .case-content-module.mosaic ul.image-collection-list .pos-8,
.case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-8 {
    top: 38.5%;
  }
  .case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-1,
.case-content-module.mosaic.layout-text-right.layout-text-right ul.image-collection-list .pos-1 {
    top: 0%;
  }
  .case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-2,
.case-content-module.mosaic.layout-text-right.layout-text-right ul.image-collection-list .pos-2 {
    top: 19.3%;
  }
  .case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-3,
.case-content-module.mosaic.layout-text-right.layout-text-right ul.image-collection-list .pos-3 {
    top: 28.8%;
  }
  .case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-4,
.case-content-module.mosaic.layout-text-right.layout-text-right ul.image-collection-list .pos-4 {
    top: 19.3%;
  }
  .case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-5,
.case-content-module.mosaic.layout-text-right.layout-text-right ul.image-collection-list .pos-5 {
    top: 28.8%;
  }
  .case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-6,
.case-content-module.mosaic.layout-text-right.layout-text-right ul.image-collection-list .pos-6 {
    top: 28.8%;
  }
  .case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-7,
.case-content-module.mosaic.layout-text-right.layout-text-right ul.image-collection-list .pos-7 {
    top: 38.5%;
  }
  .case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-8,
.case-content-module.mosaic.layout-text-right.layout-text-right ul.image-collection-list .pos-8 {
    top: 38.5%;
  }

  .case-content-module.image-grid .inner-margins ul.image-grid-list li {
    width: 97%;
    float: none;
  }

  .case-content-module.column-header .column-header-list li {
    float: none;
    width: 90% !important;
  }

  section#case-challenge .case-content-module .inner {
    background-position: center 75% !important;
    /* WILL KILL THE PARALLAX! */
    background-size: 120%;
    height: auto;
    margin-left: 5%;
  }
  section#case-challenge .case-content-module .text-block {
    width: 92%;
    margin-top: 50px;
    text-align: center;
  }

  .case-content-module.isometric-header .super-mockup {
    height: 675px;
  }
  .case-content-module.isometric-header .super-mockup img {
    bottom: -25%;
  }

  section#case-projectview .text-block {
    float: none;
    width: 100%;
  }
  section#case-projectview .text-block h2 {
    font-size: 32px;
  }
  section#case-projectview .social-block {
    float: none;
    width: 100%;
    text-align: left;
  }
  section#case-projectview .social-block ul {
    text-align: left;
  }
  section#case-projectview .social-block ul li {
    text-align: center;
  }

  section#case-details {
    padding-top: 0px;
  }

  section#case-related .case-related-separator {
    display: none;
  }
  section#case-related .paginate-prev {
    float: none;
  }
  section#case-related .paginate-next {
    float: none;
  }
  section#case-related .paginate-next .pager-overlay .arrow-icon {
    left: -30px;
  }
  section#case-related .pager-overlay {
    width: 70%;
    margin: 0 auto;
  }
}
@media (max-width: 750px) {
  .work .work-content .inner-banner, .work .blog-content .inner-banner, .blog .work-content .inner-banner, .blog .blog-content .inner-banner {
    width: 100%;
  }
  .work .work-content .inner-banner .banner, .work .blog-content .inner-banner .banner, .blog .work-content .inner-banner .banner, .blog .blog-content .inner-banner .banner {
    margin: 0;
    margin-bottom: 200px;
  }
  .work .work-content ul.triple li, .work .blog-content ul.triple li, .blog .work-content ul.triple li, .blog .blog-content ul.triple li {
    width: 80%;
    margin: 1.5% 10%;
  }
  .work .work-content ul.caselist, .work .blog-content ul.caselist, .blog .work-content ul.caselist, .blog .blog-content ul.caselist {
    margin-bottom: 140px;
  }

  .skewr-bottom:after {
    bottom: -5.5%;
  }
}
@media (max-width: 500px) {
  .work .inner, .case .inner {
    width: 80%;
  }
  .work h3, .work h5, .work h5.special-headline, .work p, .case h3, .case h5, .case h5.special-headline, .case p {
    text-align: left !important;
  }
  .work p.centered, .case p.centered {
    width: 100%;
    text-align: left;
  }
  .work p.section-intro, .case p.section-intro {
    text-align: left;
  }

  .work .work-content ul.triple li, .work .blog-content ul.triple li, .blog .work-content ul.triple li, .blog .blog-content ul.triple li {
    width: 100%;
    margin: 5% 0%;
  }

  .case .case-intro {
    padding-top: 45px;
  }
  .case .case-intro .inner .share-case .share-case-buttons li {
    margin: 0 auto;
  }

  .case .case-content .inner {
    width: 80%;
  }

  .case .case-content .intro {
    width: 100%;
  }

  section#case-challenge .case-fullpage-bg {
    top: 7%;
  }
  section#case-challenge .case-content-module .inner {
    background-position: center 82.5% !important;
    /* WILL KILL THE PARALLAX! */
    background-size: 130%;
  }
  section#case-challenge .case-content-module .text-block {
    margin-top: 10px !important;
    width: 100%;
    margin-left: 0;
  }
  section#case-challenge .case-content-module.case-desktop-object .inner {
    width: 80%;
  }
  section#case-challenge .text-block p {
    width: 100%;
  }

  #case-approach .case-content-module.text-img-block .text-block {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  section#case-solution {
    padding-bottom: 60px;
  }

  .case-content-module.mosaic,
.case-content-module.mosaic.layout-text-right {
    height: auto;
  }
  .case-content-module.mosaic ul.image-collection-list,
.case-content-module.mosaic.layout-text-right ul.image-collection-list {
    top: 40px;
  }
  .case-content-module.mosaic ul.image-collection-list li,
.case-content-module.mosaic.layout-text-right ul.image-collection-list li {
    position: relative;
    width: 100% !important;
    top: 0 !important;
    left: 0 !important;
    margin-bottom: 20px;
  }
  .case-content-module.mosaic ul.image-collection-list .pos-3,
.case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-3 {
    display: none;
  }
  .case-content-module.mosaic ul.image-collection-list .pos-4,
.case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-4 {
    display: none;
  }
  .case-content-module.mosaic ul.image-collection-list .pos-7,
.case-content-module.mosaic.layout-text-right ul.image-collection-list .pos-7 {
    display: none;
  }
  .case-content-module.mosaic .text-block,
.case-content-module.mosaic.layout-text-right .text-block {
    width: 100%;
    max-width: 100%;
    left: 0;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .case-content-module.isometric-header .svg-bg-container {
    bottom: 0;
  }
  .case-content-module.isometric-header .super-mockup {
    height: 600px;
  }
  .case-content-module.isometric-header .super-mockup img {
    bottom: -15%;
    max-width: 115%;
    width: 115%;
  }
  .case-content-module.isometric-header .super-mockup img.assetIsoMobile {
    width: 100%;
  }
  .case-content-module.isometric-header .super-mockup .text-overlay .inner {
    width: 80%;
  }
  .case-content-module.isometric-header .super-mockup .text-block p {
    text-align: left;
  }

  .case-content-module.code-showoff .code-block {
    width: 100%;
    float: none;
  }
  .case-content-module.code-showoff .text-block {
    width: 100%;
    float: none;
  }
  .case-content-module.code-showoff.layout-text-left .code-block {
    float: none;
  }
  .case-content-module.code-showoff.layout-text-left .text-block {
    float: none;
  }

  section#case-projectview {
    height: 550px;
  }
  section#case-projectview ul.social-icons li {
    width: 50px;
    height: 50px;
    margin: 3px;
  }
  section#case-projectview ul.social-icons a {
    border: 1px #FFF solid;
    border-radius: 50px;
    width: 50px;
    height: 50px;
    line-height: 50px;
  }
  section#case-projectview ul.social-icons a .fa {
    top: -1px;
    left: -1px;
    width: 50px;
    height: 50px;
    font-size: 22px;
    line-height: 50px;
  }
}
/**
Uses partial _socialSection.html (as used on homepage and contacts page)
**/
.socialBox {
  position: relative;
  text-align: left;
  padding-top: 50px;
  padding-bottom: 150px;
  color: #4e4e4e;
  z-index: 2000;
}
.socialBox .inner {
  margin-top: 20px;
}
.socialBox p.left {
  max-width: 100%;
}
.socialBox.contactpage {
  background-color: #F7F7F5;
  margin-bottom: 0px;
}
.socialBox .desc {
  margin: auto;
  text-align: center;
  width: 70%;
  margin-bottom: 90px;
}
.socialBox .social {
  z-index: 10;
}
.socialBox .inner {
  width: 80%;
  height: inherit;
  max-width: 1140px;
}
.socialBox .inner .centered {
  max-width: 700px;
  margin: 0 auto;
}
.socialBox .inner .blogBox {
  width: 100%;
  overflow: hidden;
  margin-bottom: 40px;
  color: #292929;
  float: left;
  /** LANDSCAPE STUFF */
  width: 42%;
  margin-left: 5%;
  /** DEFAULT STUFF*/
}
.socialBox .inner .blogBox img {
  -webkit-transition: all 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0ms;
  -o-transition: all 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0ms;
  transition: all 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0ms;
}
.socialBox .inner .blogBox:hover img {
  -webkit-transform: scale(1.06);
      -ms-transform: scale(1.06);
          transform: scale(1.06);
}
.socialBox .inner .blogBox a:link, .socialBox .inner .blogBox a:visited, .socialBox .inner .blogBox a:hover {
  color: #292929 !important;
}
.socialBox .inner .blogBox.first {
  margin-top: 100px;
}
.socialBox .inner .blogBox.second {
  float: left;
}
.socialBox .inner .blogBox.third {
  float: right;
}
.socialBox .inner .blogBox .blogBoxTxt {
  width: 100%;
  font-weight: 200;
}
.socialBox .inner .blogBox .blogBoxImg {
  width: 100%;
}
.socialBox .inner .blogBox .blogBoxImg:after {
  left: 7%;
  top: auto;
  bottom: 0;
  border: solid transparent;
  content: " ";
  position: absolute;
  pointer-events: none;
  border-bottom: 12px solid white;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  z-index: 6;
}
.socialBox .inner .blogBox .blogBoxTxt {
  background-color: transparent;
  text-align: left;
  font-weight: 200;
}
.socialBox .inner .blogBox .blogBoxTxt .container {
  padding: 30px 30px;
}
.socialBox .inner .blogBox .blogBoxTxt h4 {
  margin: 10px 0 25px 0;
  font-size: 22px;
  font-weight: bold;
  color: #4c4c4c;
}
.socialBox .inner .blogBox .blogBoxTxt .date {
  margin: 0;
  font-size: 16px;
  margin: 0px 0px 3px 0px;
  color: #4e4e4e;
}
.socialBox .inner .blogBox .blogBoxTxt .blog-desc {
  font-size: 14px;
  line-height: 1.7em;
  font-weight: 200;
}
.socialBox .inner .blogBox .blogBoxTxt .read-more {
  margin-top: 22px;
  display: block;
}
.socialBox .inner .blogBox .blogBoxImg {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.socialBox .inner .blogBox .blogBoxImg img {
  width: 100%;
  float: left;
  min-width: initial;
  height: auto;
}
.socialBox .inner .twitterBox {
  float: left;
  width: 42%;
  margin-left: 5%;
  margin-top: 30px;
  /*  clear: both;
    width: 50%;
    margin: auto;
    margin-top: 30px;
    text-align:center;*/
}
.socialBox .inner .twitterBox .twitterBoxContent {
  margin: auto;
}
.socialBox .inner .twitterBox .twitterBoxContent .twitter-icon {
  width: 100%;
  float: left;
}
.socialBox .inner .twitterBox .twitterBoxContent .twitter-text {
  width: 100%;
}
.socialBox .inner .twitterBox .twitterBoxContent .twitter-text .text {
  font-size: 21px;
  color: #4e4e4e;
  font-weight: 200;
  text-align: left;
  line-height: 35px;
}
.socialBox .inner .twitterBox .twitterBoxContent .twitter-text .fa-twitter {
  border: none;
  color: #7acbe4;
  width: auto;
  position: relative;
  display: inline;
}
.socialBox .inner .twitterBox .twitterBoxContent .twitter-text .fa-twitter a {
  color: #040404 !important;
}
.socialBox .inner .twitterBox .twitterBoxContent .twitter-text .twitterHash {
  color: #c4c4c4;
  font-weight: bold;
  left: auto;
  line-height: 22px;
  margin-left: 9px;
  display: inline;
}
.socialBox #lastfm {
  position: absolute;
  z-index: 9;
  width: 400px;
  height: 100px;
  display: block;
  text-align: left;
  bottom: 0;
  left: 30%;
  margin-left: -200px;
}
.socialBox #lastfm .text {
  position: relative;
  float: left;
  width: 70%;
  left: 2.5;
}
.socialBox #lastfm .text:before {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 20px;
  color: #8ed5d6;
  background: -webkit-linear-gradient(#8ed5d6, #7acbe4);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
.socialBox #lastfm img {
  float: right;
  height: 100%;
  width: auto;
}

.intro-video-layer {
  position: fixed;
  z-index: 2000;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 125px 40px 40px;
  display: none;
  pointer-events: none;
}
.intro-video-layer .close-button {
  cursor: pointer;
  position: absolute;
  top: 40px;
  right: 40px;
  padding: 15px;
  width: 50px;
  height: 50px;
}
.intro-video-layer .close-button .line {
  width: 24px;
  background-color: white;
  height: 3px;
  position: absolute;
  top: 22px;
  right: 13px;
}
.intro-video-layer .close-button .line.line-1 {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}
.intro-video-layer .close-button .line.line-2 {
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.intro-video-layer.open {
  display: block;
  pointer-events: all;
}
.intro-video-layer .background {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
}
.intro-video-layer iframe {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 100%;
  top: 50%;
  -webkit-transform: translate3d(0, -50%, 0);
          transform: translate3d(0, -50%, 0);
}

.we-are {
  z-index: 1300;
  background-color: #FFF;
  -webkit-transform: translate3d(0, 0, 0);
  padding-bottom: 0;
}
@media only screen and (max-width: 1000px) {
  .we-are {
    padding-top: 15px;
  }
}
.we-are .inner {
  margin-top: 30px;
  width: 80%;
  margin-bottom: 70px;
  max-width: 1440px;
}
@media only screen and (max-width: 1000px) {
  .we-are .inner {
    width: 70%;
  }
}
@media only screen and (min-width: 1001px) and (max-width: 1200px) {
  .we-are .inner {
    width: 90%;
  }
}
.we-are .inner .text-box {
  text-align: left;
  position: relative;
  pointer-events: none;
  z-index: 1;
  width: 55%;
}
@media only screen and (max-width: 1200px) {
  .we-are .inner .text-box p {
    font-size: 14px;
  }
}
@media only screen and (max-width: 600px) {
  .we-are .inner .text-box h2 {
    font-size: 26px;
  }
}
@media only screen and (max-width: 1000px) {
  .we-are .inner .text-box {
    width: 100%;
  }
}
@media only screen and (min-width: 1001px) and (max-width: 1200px) {
  .we-are .inner .text-box {
    width: 60%;
  }
}
.we-are .inner .text-box .white-box {
  background-color: white;
  padding: 25px 50px 50px 0;
}
@media only screen and (max-width: 1000px) {
  .we-are .inner .text-box .white-box {
    padding-bottom: 25px;
    padding-right: 0;
  }
}
.we-are .inner .text-box .we-re-button-container {
  margin-bottom: 50px;
  pointer-events: none;
}
.we-are .inner .text-box .we-re-button-container .button {
  pointer-events: all;
}
.we-are .inner .video-teaser-box {
  cursor: pointer;
  top: 75px;
  pointer-events: all;
  padding-bottom: 30.9375%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  width: 55%;
  right: 0;
}
@media only screen and (max-width: 1000px) {
  .we-are .inner .video-teaser-box {
    top: 0;
    position: relative;
    z-index: 2;
    width: 100%;
    padding-bottom: 56.25%;
    margin-bottom: 25px;
    text-align: center;
  }
  .we-are .inner .video-teaser-box.teaser-desktop {
    display: none;
  }
}
@media only screen and (min-width: 1001px) {
  .we-are .inner .video-teaser-box.teaser-mobile {
    display: none;
  }
}
@media only screen and (min-width: 1001px) and (max-width: 1200px) {
  .we-are .inner .video-teaser-box {
    width: 40%;
    padding-bottom: 22.5%;
  }
}
.we-are .inner .video-teaser-box .video-cta {
  position: absolute;
  width: 100%;
  top: 50%;
  -webkit-transform: translate3d(0, -50%, 0);
          transform: translate3d(0, -50%, 0);
  font-size: 16px;
  color: white;
  font-weight: 400;
}
.we-are .inner .video-teaser-box .video-cta .teaser-icon {
  display: inline-block;
  width: 68px;
  height: 68px;
  background-image: url("../img/home/video_play_icon.png");
  background-size: cover;
  background-repeat: no-repeat;
  margin-bottom: 10px;
}
@media only screen and (max-width: 1000px) {
  .we-are .inner .video-teaser-box .video-cta .teaser-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 5px;
  }
}
.we-are .button {
  margin-right: 7px;
  min-width: 170px;
  text-align: center;
}

.latest-outcome {
  z-index: 300;
  padding-bottom: 0;
  -webkit-transform: translate3d(0, 0, 0);
  padding-top: 0px;
}
.latest-outcome .inner {
  width: 80%;
  margin-bottom: 0px;
  padding-bottom: 0px;
  margin-top: 0px;
  margin-left: 15%;
  text-align: left;
}

.isTablet .homepage section {
  -webkit-transform: translate3d(0, 0, 0);
}

/**
Home
**/
.homepage #colorMask, .homepage .colorFill, .services #colorMask, .services .colorFill {
  position: absolute;
  width: 100%;
}
.homepage .colorFillContainer, .services .colorFillContainer {
  bottom: -70px;
  position: absolute;
  height: 125px;
  width: 100%;
}
.homepage #colorFill, .services #colorFill {
  z-Index: 50;
  height: 85px;
  bottom: 70px;
  width: 100%;
}
.homepage .colorFillBox, .services .colorFillBox {
  /*position:absolute;
  height:70px;
  top:29px;
  width:100%;
  background-color:#7acbe4;*/
}
.homepage #colorMask, .services #colorMask {
  z-Index: 51;
  height: 60px;
  bottom: 0px;
}

/*****
PROJECTS_THUMB PARTIAL

The projects teasers
*****/
#projects {
  z-index: 400;
  padding-top: 0px;
  -webkit-transform: translate3d(0, 0, 0);
  z-index: 1600;
  overflow: visible;
}
#projects #first figure {
  margin-top: 3px;
}
#projects .inner {
  width: 80%;
  overflow: visible;
  margin-top: 0px;
  padding-top: 50px;
  margin-bottom: -120px;
}

.teaser {
  display: block;
  width: 100%;
  clear: both;
  position: relative;
  margin-bottom: 50px;
  float: left;
  /**
  Some CSS hackability,
  Props to http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios
  **/
  /** IMAGE LEFT TEASER **/
  /** IMAGE RIGHT TEASER **/
  /* Thumbnail/Square view of Project */
}
.teaser a {
  overflow: hidden;
  display: block;
  height: 100%;
  width: 100%;
  position: relative;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
}
.teaser figure {
  margin: 0;
  width: 70%;
  overflow: hidden;
  position: relative;
  max-height: 470px;
  max-width: 900px;
}
.teaser figure .award {
  position: absolute;
  top: 0;
  left: 0;
  width: 156px;
  height: auto;
  z-index: 99;
}
.teaser img {
  width: auto\9 ;
  height: auto;
  max-width: 100%;
  width: 100%;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}
.teaser .teaser-details {
  position: relative;
  -ms-flex-item-align: center;
      align-self: center;
  text-align: left;
  padding-top: 6%;
  width: 25%;
}
.teaser .teaser-details .container, .teaser .teaser-details p {
  margin-top: 20px;
  font-size: 16px;
}
.teaser .teaser-details h3 {
  font-size: 20px;
  margin: 0px 0px 3px 0px;
  color: #4e4e4e;
}
.teaser .teaser-details h5 {
  font-size: 36px;
  margin: 0px;
  font-weight: 800;
}
.teaser .teaser-details h5 a, .teaser .teaser-details h5 a:link, .teaser .teaser-details h5 a:visited {
  color: #222 !important;
}
.teaser.left figure {
  float: left;
  margin: 2% 0% 0 0;
  position: relative;
}
.teaser.left figure img {
  float: right;
}
.teaser.left figure:after {
  right: -1px;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
  border-right-color: #fff;
  border-width: 20px;
  margin-top: -20px;
  z-index: 100;
}
.teaser.left .teaser-details {
  position: relative;
  -ms-flex-item-align: center;
      align-self: center;
  text-align: left;
  padding-top: 6%;
  width: 25%;
  float: left;
  margin-left: 25px;
}
.teaser.right figure {
  float: right;
  margin: 2% 0 0 0%;
  right: 0;
}
.teaser.right figure img {
  float: left;
}
.teaser.right figure:after {
  left: -1px;
  top: 30%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
  border-left-color: #fff;
  border-width: 20px;
  margin-top: -20px;
  z-index: 100;
}
.teaser.right figure.award:after {
  top: 200px;
}
.teaser.right .teaser-details {
  text-align: right;
  padding-top: 3%;
  width: 26%;
  float: right;
  margin-right: 25px;
}
.teaser.landscape figure a:after {
  padding-top: 55.5%;
  display: block;
  content: "";
}
.teaser.square {
  width: 70%;
}
.teaser.square figure {
  width: 60%;
  max-width: 470px;
}
.teaser.square figure a:after {
  display: block;
  content: "";
}
.teaser.square figure a {
  max-width: 500px;
}
.teaser.square.left {
  float: left;
  margin-left: 10%;
}
.teaser.square.left figure a {
  float: right;
}
.teaser.square.right {
  float: right;
  margin-right: 10%;
}
.teaser.square.right figure a {
  float: left;
}
.teaser.square .teaser-details {
  width: 35%;
}

.moreInfoProjects {
  margin-top: 70px;
  margin-bottom: 110px;
}
.moreInfoProjects p {
  margin: 0px;
  padding: 0px;
}

/** OUR CORE **/
.our-core {
  width: 100%;
  background-color: #151515;
  color: #f7f7f5;
  text-align: center;
  padding-top: 45px;
  height: auto;
  min-height: 720px;
  overflow: visible;
}
.our-core .inner {
  width: 77%;
  z-index: 1600;
  margin-top: 150px;
  margin-bottom: 140px;
  max-width: 1100px;
}
.our-core .inner p {
  max-width: 700px;
  margin: auto;
}
.our-core .inner h2, .our-core .inner p {
  color: #f7f7f5;
}
.our-core .inner h3 {
  color: #f7f7f5;
  font-size: 16px;
  margin: 0px;
}
.our-core .inner h5 {
  margin-bottom: 16px;
}
.our-core .inner .our_core--inner ul.triple li {
  position: relative;
  float: left;
  width: 33%;
  padding: 15px 3%;
}
.our-core .mountainbg {
  right: 0px;
  left: auto;
  position: absolute;
  bottom: 50px;
}
.our-core .mountain1, .our-core .mountain2 {
  position: absolute;
  top: auto;
}
.our-core .mountain1 {
  bottom: -20px;
  left: 0px;
  z-index: 1100;
  width: 100%;
}
.our-core .mountain2 {
  right: 0px;
  bottom: 50px;
  z-index: 1050;
  left: auto;
  max-width: 1250px;
}
.our-core .bottom-left {
  z-index: 1500;
}
.our-core .button {
  margin-top: 50px !important;
}

.our-work {
  z-index: 1500;
  width: 100%;
  position: relative;
  margin-bottom: 0;
  text-align: center;
  padding-bottom: 0px;
  background: #FFF;
}
.our-work h2 {
  margin-bottom: 50px;
}
.our-work .inner {
  z-index: 1;
  position: relative;
  max-width: 1140px;
  margin-bottom: 200px;
}
.our-work .inner .clients {
  width: 100%;
}
.our-work .inner .button {
  margin-top: 80px;
}
.our-work .inner ul {
  display: block;
}
.our-work .inner li {
  position: relative;
  display: inline-block;
  margin: 0% 3%;
  width: 11%;
  height: auto;
  overflow: hidden;
}

/**
Awwards
**/
.awardType, .awardName, .awardProject {
  width: 250px;
  display: inline-block;
}

/**
START PAGE
**/
.start-page {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}

@media (min-width: 1000px) {
  .we-are .inner {
    margin-bottom: 100px;
  }
}
@media (min-width: 1400px) {
  .we-are .inner {
    margin-top: 60px;
    margin-bottom: 200px;
  }
}
@media (min-width: 1600px) {
  .we-are .inner {
    margin-bottom: 250px;
  }
}
/******
MEDIAQUERIES
*******/
@media (max-width: 1200px) {
  #projects .inner {
    width: 90%;
  }

  .teaser {
    margin-bottom: 20px;
  }
}
@media (max-width: 1000px) {
  .our-work li {
    width: 18% !important;
  }

  /*}

  @media (max-width: 900px) {*/
  .teaser-details .desc p {
    font-size: 14px;
  }

  .socialBox .desc {
    width: 100%;
  }
  .socialBox .twitterBox {
    width: 90% !important;
  }

  #projects .inner {
    width: 70%;
    margin-bottom: -40px !important;
  }
  #projects .inner article {
    margin-bottom: 4%;
    overflow: hidden;
  }
  #projects .inner article.right .teaser-details {
    text-align: left;
  }
  #projects .inner article figure {
    width: 100%;
    float: none;
    margin: 0px !important;
  }
  #projects .inner article figure:after {
    left: 7%;
    top: auto;
    bottom: 0;
    border: solid transparent;
    content: " ";
    position: absolute;
    pointer-events: none;
    border-bottom: 12px solid white;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    z-index: 6;
  }
  #projects .inner article figure .award {
    width: 115px;
  }
  #projects .inner .teaser-details {
    width: 100%;
    float: none;
    padding: 7%;
    background: #fff;
    margin-left: 0px !important;
  }
  #projects .inner .teaser-details .read-more {
    margin-top: 10px;
  }
  #projects .teaser.square {
    width: 100%;
    background-color: #FFF;
    max-width: none;
    margin-left: 0% !important;
    float: none;
  }
  #projects .teaser.square figure {
    width: 100%;
    max-width: none;
    float: none;
  }
  #projects .teaser.square figure:after {
    left: 7%;
    top: auto;
    bottom: 0;
    border: solid transparent;
    content: " ";
    position: absolute;
    pointer-events: none;
    border-bottom: 12px solid white;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    z-index: 6;
  }
  #projects .teaser.square figure a {
    max-width: none;
  }
  #projects .teaser.square .teaser-details {
    width: 100%;
    float: none;
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  #projects .teaser.square figure a {
    float: left;
  }

  .socialBox {
    max-height: auto !important;
  }
  .socialBox img:after {
    left: 7%;
    top: auto;
    bottom: 0;
    border: solid transparent;
    content: " ";
    position: absolute;
    pointer-events: none;
    border-bottom: 12px solid white;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    z-index: 6;
  }

  .socialBox .inner {
    width: 90% !important;
  }

  .socialBox .blogBoxTxt, .socialBox .blogBoxImg {
    width: 100% !important;
  }
}
@media (max-width: 640px) {
  #projects .inner {
    width: 80%;
  }

  .ourwork .inner {
    width: 80%;
  }

  .our-work .inner li {
    width: 26% !important;
  }

  .homepage .colorFillContainer, .services .colorFillContainer {
    bottom: -70px;
    height: 40px;
  }
  .homepage #colorFill, .services #colorFill {
    height: 100px;
    bottom: 70px;
  }
  .homepage .colorFillBox, .services .colorFillBox {
    height: 70px;
    top: 29px;
  }
  .homepage #colorMask, .services #colorMask {
    height: 35px;
  }

  .job-description h1 {
    text-align: left;
  }

  .our-core .inner .our_core--inner ul.triple li {
    width: 100%;
  }

  p.left {
    max-width: 90% !important;
  }

  .socialBox .inner .blogBox {
    margin-left: 0px !important;
    width: 100% !important;
    max-height: none !important;
  }
}
@media (max-width: 420px) {
  /*.js-clients > li:not(:first-child) {
    display: none !important;
  }*/
  #projects .inner {
    width: 80%;
  }

  .we-are {
    text-align: left !important;
  }
  .we-are .inner {
    margin-bottom: 0px;
  }

  .moreInfoProjects {
    text-align: left !important;
  }

  .our-core .inner {
    text-align: left !important;
    width: 80% !important;
  }
  .our-core .inner li {
    padding: 0px;
  }

  .our-work {
    text-align: left !important;
  }
  .our-work .intro {
    width: 100% !important;
    text-align: left;
  }

  .socialBox {
    text-align: left !important;
  }
  .socialBox .inner {
    width: 80% !important;
  }
  .socialBox .desc {
    text-align: left !important;
  }
}
@media all and (max-width: 740px) and (min-width: 500px) {
  /* .js-clients > li:nth-child(n+7) {
  display: none;
  }*/
}
/* mailchimp integration */
.mc_section_inner h2 {
  font-size: 36px !important;
  font-weight: 800 !important;
  margin-top: 0 !important;
  margin-bottom: 30px !important;
  color: #222;
}
.mc_section_inner #mc_embed_signup {
  padding: 60px;
}
.mc_section_inner #mc_embed_signup .mc-field-group label {
  font-weight: 300;
  font-size: 16px;
  text-align: center;
}
.mc_section_inner #mc_embed_signup .button {
  height: 45px;
  border-radius: 3px;
  margin: auto;
  display: inherit;
  background-color: #7acbe4 !important;
  border: 2px solid #7acbe4 !important;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  cursor: pointer;
}
.mc_section_inner #mc_embed_signup .button:hover {
  background-color: white !important;
  color: #7acbe4 !important;
}
.mc_section_inner #mc_embed_signup .mc-field-group input {
  font-weight: 300;
  font-size: 16px;
  text-align: center;
}

@media screen and (max-width: 800px) {
  .videoContainerAbout .video {
    display: none;
  }
}

@media screen and (min-width: 1271px) {
  .aboutpage .header__media {
    height: 700px !important;
  }
}
@media screen and (max-width: 1270px) {
  .aboutpage .header__media {
    height: 510px !important;
  }
}
@media screen and (max-width: 900px) {
  .aboutpage .header__media {
    height: 450px !important;
  }
}
.aboutpage .header__media section.start {
  padding-top: 0px;
  margin-top: 0px;
  position: absolute;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2;
  top: 0;
  height: 100%;
  /* -webkit-column-count: 2;
   -moz-column-count: 2;
   column-count: 2;
   -webkit-column-gap: 40px;
   -moz-column-gap: 40px;
   column-gap: 40px;
   */
}
.aboutpage .header__media section.start .inner {
  margin-bottom: 120px;
  margin-top: 250px;
  max-width: 1200px;
}
@media screen and (max-width: 1270px) {
  .aboutpage .header__media section.start .inner {
    margin-top: 15%;
  }
}
@media screen and (max-width: 900px) {
  .aboutpage .header__media section.start .inner {
    margin-top: 11%;
  }
}
.aboutpage .header__media section.start .inner h2, .aboutpage .header__media section.start .inner p {
  color: #FFFFFF;
}
.aboutpage .header__media section.start .inner h2 {
  font-size: 46px;
}
@media screen and (max-width: 800px) {
  .aboutpage .nomobile {
    display: none !important;
  }
}
.aboutpage .formobile {
  margin: 0;
  display: none;
}
@media screen and (max-width: 800px) {
  .aboutpage .formobile {
    display: block !important;
  }
}
.aboutpage .inner {
  margin: auto;
}
.aboutpage #colorMask, .aboutpage .colorFill {
  position: absolute;
  width: 100%;
}
.aboutpage .colorFillContainer {
  bottom: -75px;
  position: absolute;
  height: 100px;
  width: 100%;
}
.aboutpage #colorFill {
  z-Index: 50;
  height: 100px;
  bottom: 70px;
  width: 100%;
}
.aboutpage .colorFillBox {
  position: absolute;
  height: 70px;
  top: 29px;
  width: 100%;
  background-color: #7acbe4;
}
.aboutpage #colorMask {
  z-Index: 51;
  height: 85px;
  bottom: -2px;
}

.videoContainerAbout {
  position: relative;
  padding-top: 56.2%;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: inherit;
}

.logobrushed {
  position: fixed;
}

/*
.svg-diagonal {
  height: 40px;
}
*/
section {
  position: relative;
}
section.pool-creatives {
  background-color: #000;
  text-align: left;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
section.pool-creatives .inner {
  width: 70%;
  margin-top: 110px;
  margin-bottom: 70px;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
section.pool-creatives .colLeft {
  float: left;
  width: 50%;
  padding-right: 10%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
section.pool-creatives .colRight {
  max-width: 550px;
}
section.pool-creatives p {
  margin-top: 0px;
  padding-top: 0px;
}
section.pool-creatives h2 {
  width: 270px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: auto !important;
}
section.pool-creatives .centered {
  color: #fff;
}
section.pool-creatives .centered p {
  color: #fff;
}
section.about-demodern {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-bottom: 100px;
  margin-bottom: 0;
  text-align: left;
}
section.about-demodern .inner {
  width: 70%;
  margin-top: 60px;
  margin-bottom: 60px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
section.about-demodern .colLeft {
  padding-right: 5%;
}
section.about-demodern .colRight {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
section.about-demodern ul {
  width: 80%;
  margin: auto;
}
section.about-demodern li {
  display: inline-block;
  width: 33%;
  float: left;
}
section.multicultural {
  height: auto;
  padding-bottom: 200px;
  padding-top: 70px;
  text-align: left;
  /* .img3{
     width: 27%;
     margin-top: 20px;
     position: relative;
     margin-left: 11%;
     img{
       max-width: 250px;
       width:100%;
       height: auto;
     }
   }*/
}
section.multicultural h3 {
  font-size: 36px;
  margin-top: 20px;
}
section.multicultural .colLeft {
  padding-right: 0px;
}
section.multicultural .inner {
  height: inherit;
  width: 70%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
section.multicultural .img1 {
  width: 70%;
  top: 0%;
  left: 0%;
}
section.multicultural .img1 img {
  height: auto;
  width: 100%;
  max-width: 400px;
}
section.multicultural .img2 {
  width: 50%;
  margin-top: 20px;
  position: relative;
  float: right;
  margin-right: 18%;
}
section.multicultural .img2 img {
  height: auto;
  width: 100%;
  max-width: 300px;
}
section.our-capabilities h5 {
  font-size: 24px;
  text-align: left;
  margin-bottom: 16px;
}
section.our-capabilities .inner {
  margin-top: 40px;
  margin-bottom: 40px;
  max-width: 1200px;
}
section.our-capabilities .inner .intro {
  width: 60%;
}
section.our-capabilities .inner ul.triple > li {
  position: relative;
  display: inline-block;
  margin: 0.5% 2.5% 0.5% 7%;
  width: 20%;
  vertical-align: top;
}
section.our-capabilities .inner ul.triple > li ul {
  list-style-type: circle;
  text-align: left;
  line-height: 1.7em;
  font-size: 16px;
  font-weight: 200;
  color: #4e4e4e;
}
section.our-capabilities .inner ul.triple > li ul li {
  position: relative;
}
section.our-capabilities .inner ul.triple > li ul li:before {
  content: "·";
  font-size: 30px;
  vertical-align: middle;
  color: #4e4e4e;
  margin-right: 5px;
  position: absolute;
  left: -13px;
  top: -1px;
}
section.our-capabilities {
  padding-bottom: 150px;
  padding-top: 100px;
}
section.our-capabilities .inner h4 {
  margin-bottom: 16px;
}
section.our-capabilities .inner p {
  margin: 0;
}
section.our-capabilities .inner ul.triple li {
  position: relative;
  margin: 1%;
  width: 31%;
}
section.our-capabilities .inner ul.triple li p {
  width: 80%;
  margin: auto;
}
section.our-capabilities .inner ul {
  overflow: hidden;
}
section.we-work {
  padding-bottom: 150px;
}
section.we-work .inner {
  width: 77%;
  max-width: 1440px;
}
section.we-work .inner h4 {
  font-size: 24px;
  margin-bottom: 16px;
}
section.we-work .inner p {
  max-width: 700px;
  margin: auto;
  margin-bottom: 30px;
}
section.we-work .inner img {
  min-height: 150px;
  -webkit-transform: scale(0.8);
      -ms-transform: scale(0.8);
          transform: scale(0.8);
}
section.we-work .inner ul.triple li {
  position: relative;
  float: left;
  margin: 1%;
  width: 31%;
}
section.we-work .inner ul.triple li p {
  width: 80%;
  margin: auto;
}
section.we-work .inner ul {
  margin-bottom: 20px;
  overflow: hidden;
}
section.join-us {
  margin-top: 0;
  margin-bottom: 0;
  z-index: 1;
}
section.join-us p {
  margin: 0;
}
section.join-us .inner {
  width: 50%;
}
section.join-us .inner .red p {
  color: #e46c6e;
}
section.managers {
  background: #F7F7F5;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
section.managers h2 {
  margin-top: 30px;
}
section.managers .inner {
  width: 70%;
  z-index: 1;
  position: relative;
  margin-top: 20px;
  margin-bottom: 50px;
  overflow: hidden;
  padding-bottom: 30px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
section.managers .inner .colLeft {
  text-align: left;
  padding-right: 10%;
}
section.managers .inner .wilson {
  float: left;
  margin-top: 30px;
  width: 25%;
  margin-left: -20px;
}
section.managers .inner .guys {
  width: 80%;
}
section.come-on-letstalk .inner {
  width: 65%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 70px;
  margin-bottom: 120px;
}
section.come-on-letstalk .inner h2 {
  margin-bottom: 0px;
  font-size: 28px;
}
section.come-on-letstalk .inner .headline {
  display: block;
}

/***** MEDIAQUERIES *****/
@media only screen and (max-width: 1500px) {
  .aboutpage .colorFillContainer {
    bottom: -70px;
    height: 40px;
  }
  .aboutpage #colorFill {
    height: 100px;
    bottom: 70px;
  }
  .aboutpage .colorFillBox {
    height: 70px;
    top: 29px;
  }
  .aboutpage #colorMask {
    height: 35px;
  }
}
/***
 ABOUT
 ***/
@media only screen and (max-width: 1000px) {
  .aboutpage .colLeft {
    float: none !important;
    width: 80% !important;
  }
  .aboutpage .colRight {
    float: none !important;
    width: 80% !important;
  }
  .aboutpage .about-demodern .colLeft {
    float: none !important;
    width: 80% !important;
  }
  .aboutpage .about-demodern .colRight {
    float: none !important;
    width: 80% !important;
  }
  .aboutpage .about-demodern .waypoints {
    width: 100%;
  }
  .aboutpage .about-demodern li {
    width: 50%;
  }
  .aboutpage .multicultural .content {
    float: none !important;
    width: 80% !important;
  }
  .aboutpage .multicultural img {
    float: none !important;
    width: 80% !important;
  }
  .aboutpage .not-only-work .inner {
    width: 83%;
  }
  .aboutpage .pool-creatives img {
    height: 100%;
    width: auto;
  }
  .aboutpage .pool-creatives h2 {
    width: 100%;
  }
  .aboutpage .our-capabilities .inner {
    margin-top: 70px;
  }
  .aboutpage .our-capabilities h5 {
    text-align: center;
    margin-bottom: 10px;
  }
  .aboutpage .our-capabilities .inner ul.triple li {
    text-align: center;
  }
  .aboutpage .our-capabilities .inner ul.triple li li:first-child:before {
    content: "";
  }
  .aboutpage .our-capabilities .inner ul.triple li li:before {
    content: ", ";
    font-size: 16px;
    vertical-align: middle;
    color: #4e4e4e;
    margin-right: 2px;
    margin-left: -3px;
    position: relative;
    left: auto;
    top: auto;
  }
  .aboutpage .join-us img {
    height: 100%;
    width: auto;
  }
  .aboutpage .join-us .inner {
    width: 90%;
  }
  .aboutpage .managers {
    text-align: left;
  }
  .aboutpage .managers .inner {
    display: block;
  }
  .aboutpage .managers .inner .guys {
    width: 100%;
  }
  .aboutpage .managers .colLeft {
    float: none !important;
    width: 100% !important;
    position: relative !important;
    margin-bottom: 20px;
    padding-right: 0%;
  }
  .aboutpage .managers .colRight {
    left: 0% !important;
    width: 100% !important;
    position: relative !important;
  }
}
@media (max-width: 800px) {
  .aboutpage section {
    display: block !important;
  }
  .aboutpage section .inner {
    display: block !important;
  }
  .aboutpage section .colLeft, .aboutpage section .colRight {
    float: none !important;
    width: auto !important;
    width: 100% !important;
  }
  .aboutpage .pool-creatives img {
    display: none;
  }
  .aboutpage .pool-creatives .colRight {
    margin-top: 20px;
  }
  .aboutpage .multicultural {
    display: block !important;
  }
  .aboutpage .multicultural .inner {
    display: block !important;
  }
  .aboutpage .multicultural .colLeft, .aboutpage .multicultural .colRight {
    float: none !important;
    width: auto !important;
  }
  .aboutpage .multicultural .img1 {
    width: 100%;
  }
  .aboutpage .multicultural .img1 img {
    width: 100%;
  }
  .aboutpage .multicultural .img2, .aboutpage .multicultural .img3 {
    display: none;
  }
  .aboutpage .we-work .inner ul.triple li {
    width: 100% !important;
  }
  .aboutpage .our-capabilities {
    height: auto;
    background-image: none;
    display: block !important;
  }
  .aboutpage .our-capabilities .inner .triple li {
    margin: 1%;
    width: 80%;
    float: none;
  }
  .aboutpage .our-capabilities .inner .triple li p {
    width: 100%;
  }
  .aboutpage .our-capabilities .inner .intro {
    width: 90% !important;
    display: block !important;
  }
  .aboutpage .our-capabilities .colLeft, .aboutpage .our-capabilities .colRight {
    float: none !important;
    width: auto !important;
  }
  .aboutpage .we-work {
    padding-bottom: 0px !important;
  }
  .aboutpage .we-work li {
    margin-bottom: 100px !important;
  }
  .aboutpage .we-work-strategy .inner .our-strategy {
    height: auto;
    width: auto;
    left: -15px;
  }
  .aboutpage .we-work-graph .inner ul.triple li {
    width: auto;
  }
  .aboutpage .we-work-graph .inner img {
    margin-top: 30px;
    margin-bottom: 0;
    background-size: 32%;
    width: 112px;
    height: initial;
    min-height: inherit;
  }
  .aboutpage .about-demodern .colLeft {
    width: 100% !important;
  }
  .aboutpage .about-demodern li {
    width: 33% !important;
  }
  .aboutpage .join-us .inner {
    width: 85%;
  }
  .aboutpage .managers .inner {
    margin-bottom: 0;
    margin-top: 0;
  }
  .aboutpage .managers .inner .colLeft {
    text-align: left;
  }
  .aboutpage .come-on-letstalk .inner {
    width: 80%;
  }
}
@media (max-width: 500px) {
  .inner {
    width: 80% !important;
  }

  .inner ul.triple li {
    text-align: left;
  }

  .aboutpage .intro {
    width: 100% !important;
  }
  .aboutpage .start {
    text-align: left !important;
  }
  .aboutpage .start .inner {
    width: 80% !important;
  }
  .aboutpage .start .centered {
    text-align: left !important;
    width: 100% !important;
  }
  .aboutpage .pool-creatives .inner {
    width: 80% !important;
  }
  .aboutpage .multicultural {
    padding-bottom: 80px;
  }
  .aboutpage .about-demodern {
    padding-bottom: 40px;
  }
  .aboutpage .about-demodern .inner {
    width: 80% !important;
  }
  .aboutpage .about-demodern .inner .colRight {
    width: 100% !important;
  }
  .aboutpage .our-capabilities {
    text-align: left !important;
  }
  .aboutpage .our-capabilities .inner {
    width: 100% !important;
  }
  .aboutpage .our-capabilities .inner .intro {
    width: 80% !important;
  }
  .aboutpage .our-capabilities .intro {
    text-align: left !important;
  }
  .aboutpage .our-capabilities h2, .aboutpage .our-capabilities h5, .aboutpage .our-capabilities ul, .aboutpage .our-capabilities li, .aboutpage .our-capabilities p {
    text-align: left !important;
  }
  .aboutpage .our-capabilities ul {
    width: 100% !important;
    font-size: 14px !important;
    text-align: center !important;
  }
  .aboutpage .our-capabilities ul li, .aboutpage .our-capabilities ul p {
    text-align: center !important;
  }
  .aboutpage .aboutPage .about-demodern .colRight {
    width: 100% !important;
  }
  .aboutpage .we-work {
    text-align: left !important;
  }
  .aboutpage .we-work li {
    margin-bottom: 0px !important;
  }
  .aboutpage .we-work .inner .triple li {
    margin: 1%;
    width: 80%;
    float: none;
  }
  .aboutpage .managers .inner {
    width: 80% !important;
  }
  .aboutpage .come-on-letstalk {
    text-align: left !important;
  }
  .aboutpage .come-on-letstalk .inner {
    text-align: left !important;
  }
}
body.jobspage h4.jobTitle {
  text-align: left;
}
body.jobspage section.jobslist ul li {
  border-bottom: 0px;
  font-size: 10px;
}
body.jobspage section.jobslist ul li {
  font-size: 12px;
}
body.jobspage section.jobslist ul li a .job-title {
  font-size: 14px;
  font-weight: 200;
}
body.jobspage section.jobslist ul li a .gender {
  font-size: 12px;
}
body.jobspage .jobtitle {
  float: left;
}
body.jobspage h4.jobTitle {
  padding-bottom: 20px;
  border-bottom: 1px solid #999;
}
body.jobspage .joblist i {
  margin-top: 7px;
  color: #999;
}
body.jobspage .pdfdownload {
  float: right;
}
body.jobspage .jobslist .inner {
  width: 70%;
}
body.jobspage .jobscolumns {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
  -webkit-column-gap: 40px;
  /* Chrome, Safari, Opera */
  -moz-column-gap: 40px;
  /* Firefox */
  column-gap: 40px;
}
@media (max-width: 500px) {
  body.jobspage .jobscolumns {
    -webkit-column-count: 1;
       -moz-column-count: 1;
            column-count: 1;
  }
}
body.jobspage .inner {
  width: 70%;
  max-width: 960px;
}
body.jobspage h1 .gender {
  display: none;
}
body.jobspage .downloadPDF {
  float: right;
  font-size: 12px;
  line-height: 40px;
}
body.jobspage .header__media {
  height: auto;
}
body.jobspage #colorMask, body.jobspage .colorFill {
  position: absolute;
  width: 100%;
}
body.jobspage .colorFillContainer {
  bottom: -75px;
  position: absolute;
  height: 100px;
  width: 100%;
}
body.jobspage #colorFill {
  z-Index: 50;
  height: 100px;
  bottom: 70px;
  width: 100%;
}
body.jobspage .colorFillBox {
  position: absolute;
  height: 70px;
  top: 29px;
  width: 100%;
  background-color: #7acbe4;
}
body.jobspage #colorMask {
  z-Index: 51;
  height: 85px;
  bottom: 0px;
}
body.jobspage .get-in-touch h3 {
  font-size: 28px;
}

section {
  /* List of jobs*/
  /* 3  icons */
}
section.start {
  margin-bottom: 0px;
  padding-bottom: 0px;
}
section.jobslist {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0px;
}
section.jobslist h2 {
  text-align: left;
}
section.jobslist.whiteBg {
  background: #fff !important;
}
section.jobslist .inner {
  width: 75%;
  height: inherit;
  position: relative;
  z-index: 1;
}
section.jobslist .joblist {
  text-align: left;
  margin-top: 42px;
  margin-bottom: 54px;
}
section.jobslist ul {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  display: inline-block;
  padding-bottom: 1px;
}
section.jobslist ul li {
  list-style-type: none;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  border-bottom: 1px solid #d3d3d3;
  padding-right: 15px;
  /* &:after {
     content: "";
     width: 15px;
     height: 20px;
     background: url("../img/jobs/joblist_arrow.png") no-repeat;
     position: absolute;
     top: 40%;
     right: 0;
   }*/
}
section.jobslist ul li a {
  margin: 2.5% 2.5% 2.5% 0;
  display: block;
  color: #4e4e4e;
  font-size: 20px;
  text-decoration: none;
}
section.jobslist ul li a .job-title {
  font-weight: bold;
  font-size: 24px;
}
section.jobslist ul li a .downloadPDF {
  font-size: 13px;
}
section.jobslist ul li a:hover {
  color: #7acbe4;
}
section.jobslist .center .button {
  margin-top: 0;
  margin-bottom: 15px;
}
section.job-look {
  margin-top: 0;
  margin-bottom: 0;
}
section.job-look .inner {
  width: 77%;
  max-width: 1440px;
}
section.job-look .inner .how-to-look {
  position: relative;
}
section.job-look .inner .how-to-look .images {
  height: 200px;
}
section.job-look .inner .how-to-look .images img {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
section.job-look .inner .how-to-look .description {
  width: 80%;
  margin: auto;
}
section.job-look .inner ul {
  overflow: hidden;
}
section.job-look .inner li {
  line-height: 1.5em;
  float: left;
  display: inline;
}
section.job-look .inner #triple li {
  position: relative;
  float: left;
  margin: 1%;
  width: 31%;
}
section.needtoknow .inner {
  margin-top: 50px;
  width: 80%;
  margin-bottom: 70px;
  overflow: hidden;
}
section.needtoknow .job-columnLeft1 {
  float: left;
  width: 50%;
}
section.needtoknow .job-columnRight1 {
  float: right;
  width: 50%;
}
section.needtoknow .column-1 {
  width: 41.6666666667%;
  margin: 28px 0 0 0;
  float: left;
}
section.needtoknow .column-2 {
  width: 46%;
  margin: 0 5% 0 5%;
  float: right;
  text-align: left;
}
section.needtoknow .column-3 {
  width: 27.3684210526%;
  float: left;
  margin: 50px 0 0 20px;
}
section.needtoknow .column-4 {
  width: 12.7192982456%;
  float: left;
  margin: 50px 0 0 20px;
}
section.needtoknow .column-5 {
  width: 46%;
  margin: 30px 5% 40px 5%;
  float: right;
  text-align: left;
}
section.job-description {
  color: #4e4e4e;
  z-index: 1;
  background: #f7f7f5;
  padding-bottom: 0;
}
section.job-description .inner {
  width: 650px;
  height: inherit;
}
section.job-description .inner article {
  text-align: left;
  border-bottom: 1px solid #e6e5e5;
  padding-bottom: 50px;
}
section.job-description .inner article ul {
  line-height: 2;
  margin-left: 20px;
}
section.job-description .inner article li {
  list-style-type: disc;
  font-size: 16px;
  font-weight: 200;
}
section.job-description .inner h1 {
  margin-bottom: 50px;
}
section.job-description .inner span.title {
  font-weight: bold;
  font-size: 26px;
  margin-bottom: 40px;
  display: block;
}
section.get-job {
  color: #fff;
  background: #f7f7f5;
  margin-top: 0;
  z-index: 1;
  padding: 0 0 100px 0;
}
section.get-job .inner {
  margin: 0 auto;
  width: 90%;
}
section.get-job .button {
  margin-top: 0 !important;
}

@media (max-width: 1174px) {
  section.needtoknow .column-4 {
    display: none;
  }
  section.needtoknow .column-3 {
    width: 41.6666666667%;
    margin-left: 0;
    margin-top: 7%;
  }
  section.needtoknow .column-5 {
    margin-top: 0;
  }
}
@media (max-width: 980px) {
  section.job-look .inner li {
    width: 100% !important;
  }

  section.needtoknow .column-5 {
    width: 95%;
  }
  section.needtoknow .column-4 {
    width: 20%;
    display: block;
    margin: 30px 0 0 7.3%;
  }
}
@media (max-width: 850px) {
  section.needtoknow .column-4 {
    display: none;
  }
}
@media (max-width: 750px) {
  section.job-description .inner {
    width: 80%;
  }

  section.jobslist ul li {
    padding-bottom: 15px;
    padding-top: 15px;
  }
}
@media (max-width: 700px) {
  section.needtoknow .column-1 {
    width: 100%;
  }
  section.needtoknow .column-2 {
    width: 100%;
    margin: 0;
  }
  section.needtoknow .column-3 {
    width: 48%;
  }
  section.needtoknow .column-4 {
    display: block;
    width: 48%;
    margin-top: 7%;
    margin-left: 4%;
  }
  section.needtoknow .column-5 {
    margin: 0;
    width: 100%;
  }
}
@media (max-width: 500px) {
  .jobList .colorFillContainer {
    bottom: -70px !important;
    height: 40px !important;
  }
  .jobList #colorFill {
    height: 100px !important;
    bottom: 70px !important;
  }
  .jobList .colorFillBox {
    height: 70px !important;
    top: 29px !important;
  }
  .jobList #colorMask {
    height: 35px !important;
  }

  section.jobslist .inner {
    margin-bottom: 90px;
  }
  section.jobslist .inner .job-title {
    font-weight: bold;
    font-size: 20px;
  }
  section.jobslist .inner .gender, section.jobslist .inner .downloadPDF {
    display: none;
  }

  section.needtoknow .inner {
    overflow: hidden;
  }

  section.job-look .inner .how-to-look .images {
    height: 110px;
  }
  section.job-look .inner .how-to-look .images img {
    width: 30%;
  }

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

  .job-description article li {
    font-size: 14px !important;
  }

  .job-look {
    text-align: left;
  }
  .job-look .images {
    display: none;
  }
}
.appear:not(.no-appear) {
  opacity: 0;
}
.appear.no-fade {
  opacity: 1;
}
.appear:not(.no-transition) {
  -webkit-transition: opacity 1s ease-in-out, -webkit-transform 1s ease-in-out;
  transition: opacity 1s ease-in-out, -webkit-transform 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out, transform 1s ease-in-out;
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
  transition: opacity 1s ease-in-out, transform 1s ease-in-out, -webkit-transform 1s ease-in-out;
}
.appear.appear-slow {
  -webkit-transition-duration: 2.5s;
       -o-transition-duration: 2.5s;
          transition-duration: 2.5s;
}
.appear.appear-translate-up {
  -webkit-transform: translate3d(0, 90px, 0);
          transform: translate3d(0, 90px, 0);
}
.appear.appear-translate-up.appear-wide {
  -webkit-transform: translate3d(0, 200px, 0);
          transform: translate3d(0, 200px, 0);
}
.appear.appear-translate-up.appear-short {
  -webkit-transform: translate3d(0, 35px, 0);
          transform: translate3d(0, 35px, 0);
}
.appear.appear-translate-down {
  -webkit-transform: translate3d(0, -90px, 0);
          transform: translate3d(0, -90px, 0);
}
.appear.appear-translate-down.appear-wide {
  -webkit-transform: translate3d(0, -200px, 0);
          transform: translate3d(0, -200px, 0);
}
.appear.appear-translate-down.appear-short {
  -webkit-transform: translate3d(0, -35px, 0);
          transform: translate3d(0, -35px, 0);
}
.appear.appear-translate-right {
  -webkit-transform: translate3d(-90px, 0, 0);
          transform: translate3d(-90px, 0, 0);
}
.appear.appear-translate-right.appear-wide {
  -webkit-transform: translate3d(-200px, 0, 0);
          transform: translate3d(-200px, 0, 0);
}
.appear.appear-translate-right.appear-short {
  -webkit-transform: translate3d(-35px, 0, 0);
          transform: translate3d(-35px, 0, 0);
}
.appear.appear-translate-left {
  -webkit-transform: translate3d(90px, 0, 0);
          transform: translate3d(90px, 0, 0);
}
.appear.appear-translate-left.appear-wide {
  -webkit-transform: translate3d(200px, 0, 0);
          transform: translate3d(200px, 0, 0);
}
.appear.appear-translate-left.appear-short {
  -webkit-transform: translate3d(35px, 0, 0);
          transform: translate3d(35px, 0, 0);
}
.appear.appear-rotate-up {
  -webkit-transform: rotate3d(1, 0, 0, 45deg);
          transform: rotate3d(1, 0, 0, 45deg);
  -webkit-transform-origin: 50% -200px;
      -ms-transform-origin: 50% -200px;
          transform-origin: 50% -200px;
}
.appear.appear-rotate-up.appear-wide {
  -webkit-transform: rotate3d(1, 0, 0, 90deg);
          transform: rotate3d(1, 0, 0, 90deg);
  -webkit-transform-origin: 50% -200px;
      -ms-transform-origin: 50% -200px;
          transform-origin: 50% -200px;
}
.appear.appear-rotate-up.appear-short {
  -webkit-transform: rotate3d(1, 0, 0, 10deg);
          transform: rotate3d(1, 0, 0, 10deg);
  -webkit-transform-origin: 50% -200px;
      -ms-transform-origin: 50% -200px;
          transform-origin: 50% -200px;
}
.appear.appear-rotate-down {
  -webkit-transform: rotate3d(1, 0, 0, -45deg);
          transform: rotate3d(1, 0, 0, -45deg);
  -webkit-transform-origin: 50% -200px;
      -ms-transform-origin: 50% -200px;
          transform-origin: 50% -200px;
}
.appear.appear-rotate-down.appear-wide {
  -webkit-transform: rotate3d(1, 0, 0, -90deg);
          transform: rotate3d(1, 0, 0, -90deg);
  -webkit-transform-origin: 50% -200px;
      -ms-transform-origin: 50% -200px;
          transform-origin: 50% -200px;
}
.appear.appear-rotate-down.appear-short {
  -webkit-transform: rotate3d(1, 0, 0, -10deg);
          transform: rotate3d(1, 0, 0, -10deg);
  -webkit-transform-origin: 50% -200px;
      -ms-transform-origin: 50% -200px;
          transform-origin: 50% -200px;
}
.appear.appear-rotate-right {
  -webkit-transform: rotate3d(0, 1, 0, -45deg);
          transform: rotate3d(0, 1, 0, -45deg);
  -webkit-transform-origin: 50% -200px;
      -ms-transform-origin: 50% -200px;
          transform-origin: 50% -200px;
}
.appear.appear-rotate-right.appear-wide {
  -webkit-transform: rotate3d(0, 1, 0, -90deg);
          transform: rotate3d(0, 1, 0, -90deg);
  -webkit-transform-origin: 50% -200px;
      -ms-transform-origin: 50% -200px;
          transform-origin: 50% -200px;
}
.appear.appear-rotate-right.appear-short {
  -webkit-transform: rotate3d(0, 1, 0, -10deg);
          transform: rotate3d(0, 1, 0, -10deg);
  -webkit-transform-origin: 50% -200px;
      -ms-transform-origin: 50% -200px;
          transform-origin: 50% -200px;
}
.appear.appear-rotate-left {
  -webkit-transform: rotate3d(0, 1, 0, 45deg);
          transform: rotate3d(0, 1, 0, 45deg);
  -webkit-transform-origin: 50% -200px;
      -ms-transform-origin: 50% -200px;
          transform-origin: 50% -200px;
}
.appear.appear-rotate-left.appear-wide {
  -webkit-transform: rotate3d(0, 1, 0, 90deg);
          transform: rotate3d(0, 1, 0, 90deg);
  -webkit-transform-origin: 50% -200px;
      -ms-transform-origin: 50% -200px;
          transform-origin: 50% -200px;
}
.appear.appear-rotate-left.appear-short {
  -webkit-transform: rotate3d(0, 1, 0, 10deg);
          transform: rotate3d(0, 1, 0, 10deg);
  -webkit-transform-origin: 50% -200px;
      -ms-transform-origin: 50% -200px;
          transform-origin: 50% -200px;
}
.appear.in {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0deg) !important;
          transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0deg) !important;
}
.appear.delay-1 {
  -webkit-transition-delay: 0.1s;
       -o-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
.appear.delay-2 {
  -webkit-transition-delay: 0.2s;
       -o-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.appear.delay-3 {
  -webkit-transition-delay: 0.3s;
       -o-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.appear.delay-4 {
  -webkit-transition-delay: 0.4s;
       -o-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.appear.delay-5 {
  -webkit-transition-delay: 0.5s;
       -o-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.appear.delay-6 {
  -webkit-transition-delay: 0.6s;
       -o-transition-delay: 0.6s;
          transition-delay: 0.6s;
}
.appear.delay-7 {
  -webkit-transition-delay: 0.7s;
       -o-transition-delay: 0.7s;
          transition-delay: 0.7s;
}
.appear.delay-8 {
  -webkit-transition-delay: 0.8s;
       -o-transition-delay: 0.8s;
          transition-delay: 0.8s;
}
.appear.delay-9 {
  -webkit-transition-delay: 0.9s;
       -o-transition-delay: 0.9s;
          transition-delay: 0.9s;
}
.appear.delay-10 {
  -webkit-transition-delay: 1s;
       -o-transition-delay: 1s;
          transition-delay: 1s;
}
.appear.delay-11 {
  -webkit-transition-delay: 1.1s;
       -o-transition-delay: 1.1s;
          transition-delay: 1.1s;
}
.appear.delay-12 {
  -webkit-transition-delay: 1.2s;
       -o-transition-delay: 1.2s;
          transition-delay: 1.2s;
}
.appear.delay-13 {
  -webkit-transition-delay: 1.3s;
       -o-transition-delay: 1.3s;
          transition-delay: 1.3s;
}
.appear.delay-14 {
  -webkit-transition-delay: 1.4s;
       -o-transition-delay: 1.4s;
          transition-delay: 1.4s;
}
.appear.delay-15 {
  -webkit-transition-delay: 1.5s;
       -o-transition-delay: 1.5s;
          transition-delay: 1.5s;
}
.appear.delay-16 {
  -webkit-transition-delay: 1.6s;
       -o-transition-delay: 1.6s;
          transition-delay: 1.6s;
}
.appear.delay-17 {
  -webkit-transition-delay: 1.7s;
       -o-transition-delay: 1.7s;
          transition-delay: 1.7s;
}
.appear.delay-18 {
  -webkit-transition-delay: 1.8s;
       -o-transition-delay: 1.8s;
          transition-delay: 1.8s;
}
.appear.delay-19 {
  -webkit-transition-delay: 1.9s;
       -o-transition-delay: 1.9s;
          transition-delay: 1.9s;
}
.appear.delay-20 {
  -webkit-transition-delay: 2s;
       -o-transition-delay: 2s;
          transition-delay: 2s;
}

.header.service h1, .header.service h3, .header.service h4, .header.service h5, section.service h1, section.service h3, section.service h4, section.service h5 {
  font-weight: bold;
  letter-spacing: -0.04em;
  color: #222;
}
.header.service h1, section.service h1 {
  font-size: 56px;
  line-height: 1.1em;
  margin-bottom: 0.5em;
}
@media only screen and (max-width: 1000px) {
  .header.service h1, section.service h1 {
    font-size: 42px;
  }
}
.header.service h2, section.service h2 {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.8em;
  padding: 0 10%;
  position: relative;
  font-weight: 300;
}
.header.service h2:before, section.service h2:before {
  content: "";
  position: absolute;
  background-color: #7acbe4;
  width: 10%;
  left: -5%;
  height: 2px;
  top: 40%;
}
@media only screen and (max-width: 1200px) {
  .header.service h2, section.service h2 {
    padding: 0 25%;
  }
  .header.service h2:before, section.service h2:before {
    left: 10%;
  }
}
@media only screen and (max-width: 600px) {
  .header.service h2, section.service h2 {
    padding-right: 10%;
  }
}
.header.service h3, section.service h3 {
  font-size: 50px;
}
@media only screen and (max-width: 1000px) {
  .header.service h3, section.service h3 {
    font-size: 35px;
  }
}
.header.service h4, section.service h4 {
  font-size: 32px;
  margin-bottom: 16px;
}
.header.service h5, section.service h5 {
  font-size: 17px;
  margin: 0 0 14px 0;
}
.header.service p, section.service p {
  font-size: 16px;
  word-wrap: break-word;
}

section {
  background-color: white;
}
section.grey {
  background-color: #f8f8f8;
}
section.dark {
  background-color: black;
}
section.dark h1, section.dark h2, section.dark h3, section.dark h4, section.dark h5, section.dark h6, section.dark span, section.dark p, section.dark ul, section.dark li {
  color: white;
}
section.service {
  z-index: 1300;
  text-align: left;
  padding-left: 8.3333%;
  padding-right: 8.3333%;
  -webkit-backface-visibility: hidden;
}
@media only screen and (max-width: 1200px) {
  section.service {
    padding-left: 0;
    padding-right: 0;
  }
}
@media only screen and (max-width: 1000px) {
  section.service .inner {
    width: 100% !important;
  }
}
section.service .text-image-box .text-box, section.service .text-image-box .image-box {
  float: left;
  position: relative;
}
section.service .text-image-box .text-box .text-background {
  position: absolute;
  top: -80px;
  bottom: -80px;
  left: -22.5%;
  right: 50%;
  background-color: #f1f1f1;
  z-index: -1;
}
@media only screen and (max-width: 600px) {
  section.service .text-image-box .text-box .text-background {
    display: none;
    top: -20px;
    bottom: -20px;
    left: -6%;
    right: -6%;
  }
}
@media only screen and (min-width: 601px) {
  section.service .text-image-box.even .text-box, section.service .text-image-box.even .image-box {
    float: right;
  }
  section.service .text-image-box.even .text-box .text-background {
    right: -15%;
    left: 40%;
  }
}
@media only screen and (min-width: 601px) and (max-width: 600px) {
  section.service .text-image-box.even .text-box .text-background {
    left: -5%;
    right: -5%;
    display: block;
  }
}
section.service .button {
  background-color: #7acbe4;
}
section.service .button--inverted--white {
  background-color: transparent;
}

@media only screen and (max-width: 600px) {
  section.service-usecases {
    padding-bottom: 15px;
  }
}
section.service-usecases .service-usecase {
  margin: 30px 0 100px;
  display: inline-block;
}
@media only screen and (max-width: 600px) {
  section.service-usecases .service-usecase {
    margin: 5px 0;
  }
  section.service-usecases .service-usecase:first-of-type .service-usecase-text {
    margin-top: 30px;
  }
}
section.service-usecases .service-usecase .service-usecase-text {
  width: 35%;
  margin: 120px 10% 0;
}
@media only screen and (min-width: 601px) and (max-width: 1000px) {
  section.service-usecases .service-usecase .service-usecase-text {
    width: 45%;
    margin: 120px 5% 0 10%;
  }
}
@media only screen and (max-width: 600px) {
  section.service-usecases .service-usecase .service-usecase-text {
    width: 80%;
    margin-top: 60px;
  }
}
section.service-usecases .service-usecase .service-usecase-text ul {
  line-height: 2;
  margin-left: 20px;
}
section.service-usecases .service-usecase .service-usecase-text li {
  list-style-type: disc;
  font-size: 16px;
  font-weight: 200;
  color: #4e4e4e;
}
section.service-usecases .service-usecase .service-usecase-illustration {
  width: 45%;
  padding-top: 45%;
  margin-top: 45px;
  image-rendering: -moz-crisp-edges;
  /* Firefox */
  image-rendering: -o-crisp-edges;
  /* Opera */
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}
@media only screen and (min-width: 601px) and (max-width: 1000px) {
  section.service-usecases .service-usecase .service-usecase-illustration {
    width: 30%;
    margin-top: 105px;
  }
}
@media only screen and (max-width: 600px) {
  section.service-usecases .service-usecase .service-usecase-illustration {
    display: none;
  }
}
section.service-usecases .service-usecase .service-usecase-illustration .illustration-layer {
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transition: opacity 0.5s cubic-bezier(0.86, 0.02, 0.76, 0.9), -webkit-transform 1s cubic-bezier(0.245, 0, 0.09, 1);
  transition: opacity 0.5s cubic-bezier(0.86, 0.02, 0.76, 0.9), -webkit-transform 1s cubic-bezier(0.245, 0, 0.09, 1);
  -o-transition: transform 1s cubic-bezier(0.245, 0, 0.09, 1), opacity 0.5s cubic-bezier(0.86, 0.02, 0.76, 0.9);
  transition: transform 1s cubic-bezier(0.245, 0, 0.09, 1), opacity 0.5s cubic-bezier(0.86, 0.02, 0.76, 0.9);
  transition: transform 1s cubic-bezier(0.245, 0, 0.09, 1), opacity 0.5s cubic-bezier(0.86, 0.02, 0.76, 0.9), -webkit-transform 1s cubic-bezier(0.245, 0, 0.09, 1);
}
section.service-usecases .service-usecase .service-usecase-illustration:not(.in) .illustration-layer {
  -webkit-transition: all 0.5s cubic-bezier(0.245, 0, 0.45, 1), -webkit-transform 1s cubic-bezier(0.86, 0.02, 0.76, 0.9);
  transition: all 0.5s cubic-bezier(0.245, 0, 0.45, 1), -webkit-transform 1s cubic-bezier(0.86, 0.02, 0.76, 0.9);
  -o-transition: transform 1s cubic-bezier(0.86, 0.02, 0.76, 0.9), all 0.5s cubic-bezier(0.245, 0, 0.45, 1);
  transition: transform 1s cubic-bezier(0.86, 0.02, 0.76, 0.9), all 0.5s cubic-bezier(0.245, 0, 0.45, 1);
  transition: transform 1s cubic-bezier(0.86, 0.02, 0.76, 0.9), all 0.5s cubic-bezier(0.245, 0, 0.45, 1), -webkit-transform 1s cubic-bezier(0.86, 0.02, 0.76, 0.9);
  opacity: 0;
}
section.service-usecases .service-usecase .service-usecase-illustration:not(.in) .illustration-layer.top {
  -webkit-transform: translate3d(0, -25%, 0);
          transform: translate3d(0, -25%, 0);
}
section.service-usecases .service-usecase .service-usecase-illustration:not(.in) .illustration-layer.bottom {
  -webkit-transform: translate3d(50%, 25%, 0);
          transform: translate3d(50%, 25%, 0);
}
section.service-usecases .service-usecase:nth-of-type(even) .service-usecase-illustration:not(.in) .illustration-layer.bottom {
  -webkit-transform: translate3d(-50%, 25%, 0);
          transform: translate3d(-50%, 25%, 0);
}

@media only screen and (max-width: 600px) {
  section.service-benefits {
    padding-bottom: 0;
  }
}
section.service-benefits .service-benefit {
  display: inline-block;
  position: relative;
  margin-bottom: 125px;
}
@media only screen and (max-width: 600px) {
  section.service-benefits .service-benefit {
    margin: 5px 0;
  }
}
section.service-benefits .service-benefit:first-of-type {
  margin-top: 70px;
}
section.service-benefits .service-benefit:last-of-type {
  margin-bottom: 140px;
}
@media only screen and (max-width: 600px) {
  section.service-benefits .service-benefit:last-of-type {
    margin-bottom: 20px;
  }
}
section.service-benefits .service-benefit .service-benefit-text {
  width: 45%;
  margin: 125px 10% 0 20%;
}
@media only screen and (min-width: 601px) and (max-width: 1000px) {
  section.service-benefits .service-benefit .service-benefit-text {
    width: 45%;
    margin: 120px 5% 0 10%;
  }
}
@media only screen and (max-width: 600px) {
  section.service-benefits .service-benefit .service-benefit-text {
    width: 80%;
    margin-left: 10%;
    margin-top: 60px;
  }
}
@media only screen and (max-width: 600px) {
  section.service-benefits .service-benefit:first-of-type {
    margin-top: 0px;
  }
  section.service-benefits .service-benefit:first-of-type .service-benefit-text {
    margin-top: 30px;
  }
}
section.service-benefits .service-benefit .service-benefit-icon {
  width: 25%;
  padding-top: 30%;
  position: relative;
  margin-top: 80px;
}
@media only screen and (min-width: 601px) and (max-width: 1000px) {
  section.service-benefits .service-benefit .service-benefit-icon {
    width: 30%;
    margin-top: 105px;
  }
}
@media only screen and (max-width: 600px) {
  section.service-benefits .service-benefit .service-benefit-icon {
    display: none;
  }
}
@media only screen and (min-width: 1601px) {
  section.service-benefits .service-benefit .service-benefit-icon {
    margin-top: 0px;
  }
}
section.service-benefits .service-benefit .service-benefit-icon svg {
  display: block;
  position: absolute;
  top: 50%;
  right: -50%;
  bottom: -50%;
  left: 50%;
  width: 50%;
  height: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
}
section.service-benefits .service-benefit .service-benefit-icon svg path, section.service-benefits .service-benefit .service-benefit-icon svg polygon, section.service-benefits .service-benefit .service-benefit-icon svg rect, section.service-benefits .service-benefit .service-benefit-icon svg polyline, section.service-benefits .service-benefit .service-benefit-icon svg circle {
  display: block;
  stroke-dasharray: 500;
  stroke-dashoffset: -500;
  fill: none;
  stroke: #7acbe4;
  stroke-width: 24px;
  stroke-linecap: square;
}
@media only screen and (min-width: 601px) {
  section.service-benefits .service-benefit.even .service-benefit-text {
    margin-left: 0;
    margin-right: 10%;
  }
  section.service-benefits .service-benefit.even .service-benefit-icon {
    margin-right: 10%;
  }
}

@media only screen and (max-width: 600px) {
  section.service-related-cases {
    padding-bottom: 90px;
  }
}
@media only screen and (max-width: 600px) {
  section.service-related-cases .service-related-case:first-of-type .service-related-case-text {
    margin-top: 0;
  }
}
section.service-related-cases .service-related-case .service-related-case-text {
  width: 40%;
  margin: 40px 10% 40px;
  z-index: 1;
}
@media only screen and (min-width: 601px) and (max-width: 1000px) {
  section.service-related-cases .service-related-case .service-related-case-text {
    width: 45%;
    margin: 120px 5% 0 10%;
  }
}
@media only screen and (max-width: 600px) {
  section.service-related-cases .service-related-case .service-related-case-text {
    width: 80%;
    margin-bottom: 0;
  }
}
@media only screen and (min-width: 1001px) and (max-width: 1200px) {
  section.service-related-cases .service-related-case .service-related-case-text {
    width: 30%;
    margin-right: 10%;
  }
}
section.service-related-cases .service-related-case .service-related-case-image {
  margin: 70px 0 40px 0;
  width: 40%;
  padding-top: 30%;
  background-position: 50% 50%;
  background-size: cover;
}
@media only screen and (min-width: 601px) and (max-width: 1000px) {
  section.service-related-cases .service-related-case .service-related-case-image {
    width: 30%;
    margin-top: 105px;
  }
}
@media only screen and (max-width: 600px) {
  section.service-related-cases .service-related-case .service-related-case-image {
    display: none;
  }
}
@media only screen and (min-width: 1201px) and (max-width: 1600px) {
  section.service-related-cases .service-related-case .service-related-case-image {
    padding-top: 25%;
  }
}
@media only screen and (min-width: 1601px) {
  section.service-related-cases .service-related-case .service-related-case-image {
    padding-top: 15%;
  }
}
@media only screen and (min-width: 1201px) {
  section.service-related-cases .service-related-case.even .service-related-case-image {
    margin-left: 5%;
  }
  section.service-related-cases .service-related-case.even .service-related-case-text {
    margin-right: 0;
  }
}

@media only screen and (max-width: 1000px) {
  section.service-key-features {
    padding-bottom: 0;
  }
}
section.service-key-features .intro-text, section.service-key-features .feature-container {
  margin: 55px 20% 0;
}
@media only screen and (max-width: 1200px) {
  section.service-key-features .intro-text, section.service-key-features .feature-container {
    width: 80%;
    margin: 5% 10%;
  }
}
section.service-key-features .intro-text {
  border-bottom: 1px solid #e6e6e6;
  padding-bottom: 70px;
}
@media only screen and (max-width: 1000px) {
  section.service-key-features .intro-text {
    padding-bottom: 30px;
  }
}
@media only screen and (max-width: 600px) {
  section.service-key-features .intro-text {
    margin-top: 65px;
  }
}
@media only screen and (max-width: 1000px) {
  section.service-key-features .feature-container {
    margin-top: 10%;
  }
}
section.service-key-features .feature-container .feature-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-left: -50px;
}
section.service-key-features .feature-container .feature-list .feature {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 33.3%;
          flex: 0 0 33.3%;
  padding-left: 50px;
  margin-bottom: 35px;
}
@media only screen and (min-width: 601px) and (max-width: 1000px) {
  section.service-key-features .feature-container .feature-list .feature {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
  }
}
@media only screen and (max-width: 600px) {
  section.service-key-features .feature-container .feature-list .feature {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
  }
}

@media only screen and (max-width: 1000px) {
  section.service-contact {
    padding-bottom: 0;
  }
}
section.service-contact .intro-text, section.service-contact form {
  margin: 55px 20% 0;
}
@media only screen and (max-width: 1000px) {
  section.service-contact .intro-text, section.service-contact form {
    width: 80%;
    margin: 5% 10%;
  }
}
@media only screen and (max-width: 600px) {
  section.service-contact .intro-text {
    margin-top: 65px;
  }
}
section.service-contact form {
  margin-bottom: 70px;
  margin-top: 25px;
}
section.service-contact form input[type=text], section.service-contact form input[type=email] {
  display: block;
  width: 45%;
  border: none;
  border-bottom: 1px solid #dfdfdf;
  padding: 14px 0;
  margin: 30px 0;
  background: none;
}
section.service-contact form input[type=text]:nth-of-type(odd), section.service-contact form input[type=email]:nth-of-type(odd) {
  float: left;
}
section.service-contact form input[type=text]:nth-of-type(even), section.service-contact form input[type=email]:nth-of-type(even) {
  float: right;
}
@media only screen and (max-width: 600px) {
  section.service-contact form input[type=text], section.service-contact form input[type=email] {
    width: 100%;
  }
}
section.service-contact form textarea {
  margin: 45px 0 10px;
  resize: none;
  height: auto;
  border: 1px solid #dfdfdf;
}
section.service-contact form input, section.service-contact form textarea {
  -webkit-transition: border-color 0.35s;
  -o-transition: border-color 0.35s;
  transition: border-color 0.35s;
}
section.service-contact form input::-webkit-input-placeholder, section.service-contact form textarea::-webkit-input-placeholder {
  text-transform: uppercase;
}
section.service-contact form input::-moz-placeholder, section.service-contact form textarea::-moz-placeholder {
  text-transform: uppercase;
}
section.service-contact form input::-ms-input-placeholder, section.service-contact form textarea::-ms-input-placeholder {
  text-transform: uppercase;
}
section.service-contact form input::placeholder, section.service-contact form textarea::placeholder {
  text-transform: uppercase;
}
section.service-contact form input:focus, section.service-contact form textarea:focus {
  border-color: #7acbe4;
}
section.service-contact form .button {
  float: right;
  margin-bottom: 75px;
}
section.service-contact form .message {
  clear: both;
  font-weight: bold;
  height: 0;
  -webkit-transition: height 0.5s, margin 0.5s;
  -o-transition: height 0.5s, margin 0.5s;
  transition: height 0.5s, margin 0.5s;
  overflow: hidden;
}
section.service-contact form .message.m-fail, section.service-contact form .message.m-missing {
  color: #ed5364;
}
section.service-contact form .message.m-success {
  color: #7acbe4;
}
section.service-contact form .message.show {
  margin: 25px 0;
  height: auto;
}
section.service-contact form.highlightRequired input.required:not(:focus), section.service-contact form.highlightRequired textarea.required:not(:focus) {
  border-color: #ed5364;
}
section.service-contact form.postSuccess {
  pointer-events: none;
}
section.service-contact form.postSuccess input, section.service-contact form.postSuccess textarea {
  opacity: 0.5;
}
section.service-contact form.postSuccess .button {
  background-color: #dfdfdf;
  border: none;
}

section.service-more-services {
  background-size: cover;
}
@media only screen and (max-width: 1000px) {
  section.service-more-services {
    padding-bottom: 0;
  }
}
section.service-more-services .intro-text, section.service-more-services .service-grid-container {
  margin: 55px 20% 0;
}
@media only screen and (max-width: 1200px) {
  section.service-more-services .intro-text, section.service-more-services .service-grid-container {
    width: 80%;
    margin: 5% 10%;
  }
}
@media only screen and (max-width: 600px) {
  section.service-more-services .intro-text {
    margin-top: 65px;
  }
}
section.service-more-services .service-grid-container {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
section.service-more-services .service-grid-container .service {
  display: block;
  width: 33.3%;
  float: left;
  padding-right: 35px;
  margin-bottom: 55px;
}
section.service-more-services .service-grid-container .service:last-child {
  margin-right: auto;
}
@media only screen and (min-width: 601px) and (max-width: 1000px) {
  section.service-more-services .service-grid-container .service {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
  }
}
@media only screen and (max-width: 600px) {
  section.service-more-services .service-grid-container .service {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
  }
}

.services .header .intro-content {
  z-index: 10;
  position: absolute;
  left: 8.3333%;
  right: 40%;
  margin: 0 0 0 8.3333%;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.services .header .intro-content h1, .services .header .intro-content p {
  color: white;
}
@media only screen and (max-width: 1000px) {
  .services .header .intro-content {
    right: 8.3333%;
    margin-top: 10px;
  }
  .services .header .intro-content p {
    display: none;
  }
}
@media only screen and (max-width: 1000px) {
  .services .header .triangle-container.desktop {
    display: none;
  }
}
@media only screen and (min-width: 1001px) {
  .services .header .triangle-container.mobile {
    display: none;
  }
}
.services .header-content-mobile {
  text-align: left;
  padding: 30px 10%;
}
@media only screen and (min-width: 1001px) {
  .services .header-content-mobile {
    display: none;
  }
}

section.service-teasers .services-teaser {
  display: inline-block;
  width: 100%;
}
section.service-teasers .services-teaser .service-teaser-text, section.service-teasers .services-teaser .service-teaser-video {
  float: left;
}
section.service-teasers .services-teaser .service-teaser-text {
  position: relative;
  z-index: 1;
  width: 40%;
}
@media only screen and (min-width: 1001px) {
  section.service-teasers .services-teaser .service-teaser-text {
    -webkit-transform: translate3d(75px, 0, 0);
            transform: translate3d(75px, 0, 0);
  }
}
section.service-teasers .services-teaser .service-teaser-text .parallax-box {
  background-color: white;
  padding: 0 50px 40px 6.8%;
}
@media only screen and (min-width: 1001px) and (max-width: 1200px) {
  section.service-teasers .services-teaser .service-teaser-text h3 {
    font-size: 30px;
  }
}
@media only screen and (min-width: 601px) and (max-width: 1000px) {
  section.service-teasers .services-teaser .service-teaser-text {
    width: 50%;
  }
  section.service-teasers .services-teaser .service-teaser-text h3 {
    font-size: 24px;
  }
  section.service-teasers .services-teaser .service-teaser-text .parallax-box {
    padding-left: 40px;
  }
}
@media only screen and (max-width: 600px) {
  section.service-teasers .services-teaser .service-teaser-text {
    width: 100%;
  }
}
section.service-teasers .services-teaser .service-teaser-video {
  margin-top: 50px;
  margin-bottom: 90px;
  width: 60%;
  position: relative;
}
@media only screen and (min-width: 1001px) {
  section.service-teasers .services-teaser .service-teaser-video {
    -webkit-transform: translate3d(-25px, 0, 0);
            transform: translate3d(-25px, 0, 0);
  }
}
section.service-teasers .services-teaser .service-teaser-video video {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  -o-transition: transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
}
@media only screen and (min-width: 601px) and (max-width: 1000px) {
  section.service-teasers .services-teaser .service-teaser-video {
    width: 40%;
    margin-top: 0;
    margin-bottom: 0;
  }
  section.service-teasers .services-teaser .service-teaser-video .videoContainer {
    /*video {
      width: 140%;
      height: auto;
      bottom: auto;
    }*/
  }
}
@media only screen and (max-width: 600px) {
  section.service-teasers .services-teaser .service-teaser-video {
    display: none;
  }
}
section.service-teasers .services-teaser:nth-of-type(even) .service-teaser-text, section.service-teasers .services-teaser:nth-of-type(even) .service-teaser-video {
  float: right;
}
@media only screen and (min-width: 1001px) {
  section.service-teasers .services-teaser:nth-of-type(even) .service-teaser-text {
    -webkit-transform: translate3d(-75px, 0, 0);
            transform: translate3d(-75px, 0, 0);
  }
  section.service-teasers .services-teaser:nth-of-type(even) .service-teaser-video {
    -webkit-transform: translate3d(25px, 0, 0);
            transform: translate3d(25px, 0, 0);
  }
}
@media only screen and (min-width: 601px) and (max-width: 1000px) {
  section.service-teasers .services-teaser {
    margin: 40px 0;
  }
}
@media only screen and (min-width: 1001px) and (max-width: 1200px) {
  section.service-teasers .services-teaser {
    margin: 20px 0;
  }
}

@media only screen and (max-width: 1000px) {
  section.service-cta {
    padding-bottom: 0;
  }
}
section.service-cta .intro-text {
  text-align: center;
  margin: 100px 20% 0;
}
@media only screen and (max-width: 1000px) {
  section.service-cta .intro-text {
    width: 80%;
    margin: 65px 10% 5%;
    text-align: inherit;
  }
}

.md-linebreak {
  display: block;
}
@media only screen and (max-width: 1000px) {
  .md-linebreak {
    display: none;
  }
}

/************************************
	BLOG OVERVIEW & SEARCH
*************************************/
body.blog, body.search {
  /* &:before{
     content: ' ';
     display: block;
     background-image: url('../img/blog/blogHeader.jpg');
     background-repeat: repeat;
     height:8px;
     position:absolute;
     left:0px;
     top:0px;
     width:100%;
     z-index:1000;
   }*/
  /** SIDEBAR **/
}
body.blog main, body.search main {
  font-size: 16px;
  line-height: 1.7em;
  font-weight: 200;
}
body.blog .js-video, body.search .js-video {
  height: 0;
  padding-top: 25px;
  padding-bottom: 67.5%;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}
body.blog .js-video.widescreen, body.search .js-video.widescreen {
  padding-bottom: 56.34%;
}
body.blog .js-video.vimeo, body.search .js-video.vimeo {
  padding-top: 0;
}
body.blog .js-video embed, body.blog .js-video iframe, body.blog .js-video object, body.blog .js-video video, body.search .js-video embed, body.search .js-video iframe, body.search .js-video object, body.search .js-video video {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}
body.blog .blogHeaderImage, body.search .blogHeaderImage {
  width: 112% !important;
  margin-left: -6%;
  margin-top: -6%;
}
body.blog .default, body.search .default {
  max-width: 700px;
  height: auto;
  width: 100%;
}
body.blog .edgeToEdge, body.search .edgeToEdge {
  width: 120% !important;
  margin-left: -10%;
}
body.blog .sliderContainer, body.search .sliderContainer {
  width: 100%;
  position: relative;
  height: 500px;
}
body.blog .sliderContainer .next, body.search .sliderContainer .next {
  position: absolute;
  right: -10px;
  z-index: 100;
  height: 100%;
}
body.blog .sliderContainer .next i, body.search .sliderContainer .next i {
  margin-left: 50%;
}
body.blog .sliderContainer .prev, body.search .sliderContainer .prev {
  position: absolute;
  height: 100%;
  left: -20px;
  z-index: 100;
}
body.blog .sliderContainer .next:hover i, body.blog .sliderContainer .prev:hover i, body.search .sliderContainer .next:hover i, body.search .sliderContainer .prev:hover i {
  color: #7acbe4;
}
body.blog .sliderContainer .next i, body.blog .sliderContainer .prev i, body.search .sliderContainer .next i, body.search .sliderContainer .prev i {
  top: 48%;
  display: block;
  width: 20px;
  position: relative;
}
body.blog .slider a, body.search .slider a {
  width: 100% !important;
  overflow: hidden;
  margin: 0px !important;
  padding: 0px !important;
  left: 150%;
  display: block;
  position: absolute;
  top: 0px;
}
body.blog .slider img, body.search .slider img {
  width: 100%;
  height: auto;
}
body.blog .blogHeader, body.search .blogHeader {
  width: 100%;
}
body.blog .blogHeader img, body.search .blogHeader img {
  margin: auto;
  max-width: 1012px;
  width: 90%;
  display: block;
}
body.blog .inner, body.search .inner {
  overflow: hidden;
  max-width: 1148px;
}
body.blog .blog-main, body.search .blog-main {
  float: left;
  width: 67%;
}
body.blog #js-sidebar, body.search #js-sidebar {
  float: left;
  width: 30%;
  height: 0px;
  padding: 0px;
}
body.blog #sidebar, body.search #sidebar {
  float: left;
  width: 30%;
  margin-left: 3%;
  /* Litte sidebar blog article teaser*/
}
body.blog #sidebar .allposts, body.search #sidebar .allposts {
  margin-bottom: 20px;
  background-color: #FFF;
  text-align: left;
  padding: 0px;
  margin-top: 20px;
  border-bottom: 5px solid #000;
}
body.blog #sidebar .allposts a, body.search #sidebar .allposts a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 15px 20px;
}
body.blog #sidebar .allposts:hover, body.search #sidebar .allposts:hover {
  border-bottom: 5px solid #7acbe4;
  color: #7acbe4;
}
body.blog #sidebar .twitterBox, body.search #sidebar .twitterBox {
  margin: 20px auto;
  width: 100%;
  background-color: #FFF;
  text-align: left;
}
body.blog #sidebar .twitterBox a, body.search #sidebar .twitterBox a {
  padding: 20px;
  position: relative;
  display: block;
}
body.blog #sidebar .twitterBox .twitter-icon, body.search #sidebar .twitterBox .twitter-icon {
  width: 100%;
  text-align: left;
}
body.blog #sidebar .twitterBox .twitter-text, body.search #sidebar .twitterBox .twitter-text {
  width: 100%;
}
body.blog #sidebar .twitterBox .twitter-text .text, body.search #sidebar .twitterBox .twitter-text .text {
  font-style: italic;
  font-size: 14px;
  color: #040404;
  font-weight: 200;
}
body.blog #sidebar .twitterBox .twFooter, body.search #sidebar .twitterBox .twFooter {
  margin-top: 15px;
  border-top: 1px solid #ebebeb;
  padding-top: 15px;
  padding-bottom: 15px;
}
body.blog #sidebar .twitterBox .twFooter .twitterHash, body.search #sidebar .twitterBox .twFooter .twitterHash {
  float: left;
  color: #040404;
  font-weight: 400;
  left: auto;
}
body.blog #sidebar .twitterBox .twFooter .fa-twitter, body.search #sidebar .twitterBox .twFooter .fa-twitter {
  float: right;
  border: none;
  color: #040404;
  width: auto;
  position: relative;
  font-size: 1.8em;
}
body.blog #sidebar .twitterBox .twFooter .fa-twitter a, body.search #sidebar .twitterBox .twFooter .fa-twitter a {
  color: #040404 !important;
}
body.blog #sidebar .article-desc, body.search #sidebar .article-desc {
  padding: 20.5px 7% 0px 7%;
}
body.blog #sidebar h4, body.search #sidebar h4 {
  font-size: 16px !important;
}
body.blog #sidebar .subtitle, body.search #sidebar .subtitle {
  font-size: 14px;
}
body.blog .loader, body.blog .moreloader, body.search .loader, body.search .moreloader {
  display: none;
  padding: 0px;
  background-image: url("../img/preloader.gif");
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  margin: auto;
  height: 16px;
  opacity: 0;
}
body.blog .loadMore, body.search .loadMore {
  text-align: center;
  /*padding: 10px;
  position: relative;
  width: 100px;
  display: block;
  text-align: center;
  font-size:1.7em;
  cursor:pointer;*/
}
body.blog .date, body.search .date {
  font-size: 12px;
  font-weight: 200;
  margin-bottom: 20px;
  margin-top: 40px;
}

body.article:before {
  background-image: none !important;
}
body.article h2 {
  font-size: 18px;
}

.blog #resultsTitle, .search #resultsTitle {
  text-align: left;
  padding: 0px;
  margin: 0px;
}
.blog .blog-article a:link, .blog .blog-article a:visited, .search .blog-article a:link, .search .blog-article a:visited {
  color: #7acbe4;
  font-weight: 600;
}
.blog .blog-article a:hover, .search .blog-article a:hover {
  text-decoration: underline;
}
.blog h1, .search h1 {
  font-size: 34px;
  line-height: 44px;
  font-weight: 800;
}
.blog p, .search p {
  font-size: 14px;
  font-weight: 400;
}
.blog figure, .search figure {
  position: relative !important;
  overflow: hidden;
}
.blog section, .search section {
  padding-top: 0px;
}
.blog .results, .search .results {
  margin: 1.5%;
}
.blog .lightbox, .search .lightbox {
  overflow: hidden;
}
.blog .lightboxItem, .search .lightboxItem {
  width: 32% !important;
  float: left;
  margin-right: 1%;
}
.blog .thumbnail, .search .thumbnail {
  float: left;
  margin-bottom: 10px;
}
.blog #realSpace, .blog #container_wrapper, .search #realSpace, .search #container_wrapper {
  background-color: #F7F7F5;
}
.blog .searchForm, .search .searchForm {
  width: 100%;
}
.blog .searchForm .searchContainer, .search .searchForm .searchContainer {
  position: relative;
}
.blog .searchForm input[type=text].searchField, .search .searchForm input[type=text].searchField {
  width: 100%;
  padding: 14px;
  font-size: 14px;
  color: #666;
  border: 0px;
  background-color: #FFFFFF;
  font-family: "Open Sans", sans-serif;
  outline: 0;
  border-radius: 2px;
  font-weight: 200;
  text-indent: 30px;
}
.blog .searchForm button[type=submit].search, .search .searchForm button[type=submit].search {
  border-color: transparent;
  background: none;
  background-color: transparent;
  color: #4c4c4c;
  font-size: 1.1em;
  position: absolute;
  top: 0px;
  left: 0px;
  line-height: 2.3em;
  text-indent: 5px;
}
.blog .header img, .search .header img {
  display: block;
}
.blog .tags, .search .tags {
  clear: both;
  overflow: hidden;
  clear: both;
}
.blog .tags ul, .search .tags ul {
  margin-left: 1.5%;
  width: 100%;
  float: left;
}
.blog .tags li, .search .tags li {
  float: left;
  display: block;
  border-radius: 2px;
  margin-right: 8px;
  margin-bottom: 8px;
  background-color: #FFFFFF;
  -webkit-transition: color 0.2s ease-out;
  -o-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out;
}
.blog .tags li.active, .search .tags li.active {
  background-color: #77d0d1;
  color: #000;
}
.blog .tags li.active a, .blog .tags li.active a:link, .blog .tags li.active a:visited, .search .tags li.active a, .search .tags li.active a:link, .search .tags li.active a:visited {
  color: #000;
}
.blog .tags li a, .blog .tags li a:link, .blog .tags li a:visited, .search .tags li a, .search .tags li a:link, .search .tags li a:visited {
  text-decoration: none;
  color: #666;
  display: block;
  height: 100%;
  width: 100%;
  padding: 2px 10px;
  font-size: 12px;
}
.blog .tags li a:hover, .search .tags li a:hover {
  color: #7acbe4;
}
.blog .tags-entry, .search .tags-entry {
  float: right;
}
.blog .tags-entry li, .search .tags-entry li {
  float: left;
  display: block;
  border-radius: 2px;
  margin-left: 8px;
  border: 1px solid #dbdbdb;
  -webkit-transition: border 0.2s ease-out;
  -o-transition: border 0.2s ease-out;
  transition: border 0.2s ease-out;
}
.blog .tags-entry li:hover, .search .tags-entry li:hover {
  background-color: transparent;
  border: 1px solid #99e6e7;
  color: #99e6e7;
}
.blog .tags-entry li:hover a, .blog .tags-entry li:hover a:hover, .search .tags-entry li:hover a, .search .tags-entry li:hover a:hover {
  -webkit-transition: color 0.2s ease-out;
  -o-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out;
  color: #99e6e7;
}
.blog .tags-entry li a, .blog .tags-entry li a:link, .blog .tags-entry li a:visited, .search .tags-entry li a, .search .tags-entry li a:link, .search .tags-entry li a:visited {
  text-decoration: none;
  color: #dbdbdb;
  display: block;
  height: 100%;
  width: 100%;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: bold;
}
.blog .tags-entry li a:hover, .search .tags-entry li a:hover {
  font-weight: bold;
}

.blog {
  /************************************
       BLOG ARTICLE
  *************************************/
}
.blog .inner {
  width: 80%;
  margin-top: 40px;
}
.blog.article .blog-content {
  background-color: #FFF;
  padding-bottom: 5px;
}
.blog .socialShare {
  float: right;
  font-size: 1px;
  margin-right: 35px;
  /* This gets Facebook to fall into place */
  /* Set an optional width for your button wrappers */
  /* Adjust the widths individually if you like */
}
.blog .socialShare iframe, .blog .socialShare .social > span {
  vertical-align: middle;
}
.blog .socialShare span {
  display: inline-block;
  width: 110px;
}
.blog .socialShare .google {
  width: 75px;
}
.blog .socialLink {
  float: left;
  margin-left: 35px;
}
.blog .socialLink h5 {
  line-height: 40px;
  font-size: 15px;
  float: left;
  margin-right: 5px;
  padding-bottom: 0px;
}
.blog .socialLink .social-icons {
  float: left;
  font-size: 1em;
}
.blog .socialLink .social-icons li {
  margin-right: 0px;
  width: 33px;
  height: 33px;
}
.blog .socialLink .social-icons a {
  width: 30px;
  height: 30px;
  line-height: 30px;
}
.blog .socialLink .social-icons a .fa {
  font-size: 15px;
  height: 30px;
  width: 30px;
  line-height: 30px;
}
.blog h3, .blog h4, .blog h5, .blog h6 {
  padding: 0px;
  margin: 20px 0px;
  padding: 0px;
  font-size: 23px;
  font-weight: 400;
}
.blog h5 {
  padding-bottom: 20px;
  font-size: 23px;
  font-weight: 800;
}
.blog .blog figure:after {
  bottom: -2px;
}
.blog .inner {
  height: inherit;
  width: 90%;
}
.blog .banner {
  margin-bottom: 20px;
}
.blog .banner img {
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.840, 0.440, 1.000) 0ms;
  -o-transition: all 0.6s cubic-bezier(0.165, 0.840, 0.440, 1.000) 0ms;
  transition: all 0.6s cubic-bezier(0.165, 0.840, 0.440, 1.000) 0ms;
}
.blog .banner figure:after {
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.840, 0.440, 1.000) 0ms;
  -o-transition: all 0.6s cubic-bezier(0.165, 0.840, 0.440, 1.000) 0ms;
  transition: all 0.6s cubic-bezier(0.165, 0.840, 0.440, 1.000) 0ms;
}
.blog .banner a:hover figure img {
  -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
          transform: scale(1.05);
}
.blog .banner .article-desc {
  padding: 32px 7%;
  background: white;
  color: #4e4e4e;
  text-align: left;
}
.blog .banner .article-desc h5 {
  font-size: 32px;
  font-weight: 200;
}
.blog .banner .article-desc h4 {
  color: #4e4e4e;
  font-size: 30px;
  font-weight: 800;
  margin: 0;
  padding: 0;
  margin-bottom: 20px;
  line-height: 1.2;
}
.blog .banner .article-desc p {
  font-size: 14px;
  padding: 0;
  margin: 0;
}
.blog .banner .article-desc .column-article-desc-title {
  width: 50%;
  float: left;
}
.blog .banner .article-desc .column-article-desc-text {
  width: 50%;
  float: right;
}
.blog .page-number {
  margin-top: 50px;
  text-align: center;
}
.blog a.page-number {
  font-size: 13px;
  color: #4e4e4e;
  text-decoration: none;
  font-weight: bold;
  margin: 1%;
}
.blog a.next {
  margin-left: 4%;
}
.blog a.prev {
  margin-right: 4%;
}
.blog .current {
  font-size: 13px;
  color: #429c9c;
  margin: 1%;
  font-weight: bold;
}
.blog article figure:after {
  border-right-color: white;
}
.blog .socialLink {
  text-align: center;
}
.blog section {
  position: relative;
}
.blog section.blog-article {
  text-align: left;
}
.blog section.blog-article .content {
  padding: 40px;
}
.blog section.blog-article .intro {
  width: 55%;
  margin: 50px auto;
  max-width: 800px;
}
.blog section.blog-article .inner {
  width: 70%;
  text-align: justify;
}
.blog section.blog-article .inner .date {
  color: #8f8f8f;
  font-size: 12px;
  text-align: left;
  border-bottom: #dddddd 1px dotted;
  height: 58px;
  line-height: 45px;
}
.blog section.blog-article .comments .inner {
  border-top: #dddddd 1px dotted;
}
.blog section .article-footer {
  border-top: 1px solid #d1d1cf;
  margin-top: 50px;
}
.blog section .article-footer .pager {
  width: 50%;
}
.blog section .article-footer .pager h5 {
  font-size: 14px;
  margin-top: 0px;
  padding-bottom: 0px;
  overflow: hidden;
}
.blog section .article-footer .pager .date {
  font-size: 12px;
  margin-top: 13px;
  line-height: 15px;
  display: block;
  margin-bottom: 0px;
}
.blog section .article-footer .fa {
  height: 50px;
  line-height: 25px;
}
.blog section .article-footer .paginate-prev {
  text-align: left;
  float: left;
}
.blog section .article-footer .paginate-prev .fa {
  float: left;
  margin: 20px 15px 0 40px;
}
.blog section .article-footer .paginate-next {
  text-align: right;
  float: right;
}
.blog section .article-footer .paginate-next .fa {
  float: right;
  margin: 20px 40px 0 15px;
}
/* MEDIA QUERIES */
@media (max-width: 840px) {
  .blog .blog-main, .search .blog-main {
    width: 100% !important;
    float: none;
  }
  .blog #js-sidebar, .search #js-sidebar {
    display: none;
  }
  .blog #sidebar, .search #sidebar {
    display: none;
    width: 100% !important;
    margin-left: 0% !important;
    float: none;
  }
  .blog .inner, .search .inner {
    width: 95% !important;
    max-width: auto !important;
  }
}
@media (max-width: 600px) {
  .socialLink {
    float: none !important;
    overflow: hidden;
  }

  .socialShare {
    float: none !important;
    margin-top: 10px;
    margin-left: 40px;
  }
}
html {
  overflow-y: scroll;
  background-color: #000;
  scroll-behavior: smooth;
}

/*
  Projects
*/
.project {
  float: left;
  margin: 0 0 20px 0;
}
.project .img:hover {
  background-size: 125% 125%;
}
.project h3 {
  font-size: 30px;
  font-weight: 500;
  margin-top: 0;
}
.project a {
  background-position: center center;
  background-size: 100% 100%;
  display: block;
  height: 100%;
  width: 100%;
}

/*Breadcrumb*/
.crumbs {
  font-size: 12px;
  margin-left: 0px;
}

/* Icons */
.fa:hover {
  color: #7acbe4;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.fa-inverse {
  color: #4e4e4e;
}

.fa-white {
  width: 100%;
  color: white;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -20px;
  font-size: 45px;
}

.fa-box {
  border-radius: 5px;
  width: 145px;
  height: 145px;
}
.fa-box a {
  height: 100%;
  width: 100%;
  display: block;
}

.fa-stack {
  border-radius: 50px;
  border: #4e4e4e 1px dotted;
  margin: 3px;
}

.js-loading-animation {
  pointer-events: none;
}

:focus, :hover, :active, :visited {
  outline: none !important;
}

::-moz-focus-inner {
  border: 0 !important;
}

/* GENERAL STYLES FOR ALL PAGES */
section {
  width: 100%;
  padding: 50px 0;
  overflow: hidden;
  text-align: center;
  position: relative;
}

.stuck {
  position: fixed;
}

@-webkit-keyframes loop {
  from {
    background-position: left 0;
  }
  to {
    background-position: left -138px;
  }
}
@keyframes loop {
  from {
    background-position: left 0;
  }
  to {
    background-position: left -138px;
  }
}
p a:link, p a:visited {
  color: #7acbe4;
  font-weight: 600;
}
p a:hover {
  text-decoration: underline;
}

h2.left {
  text-align: left;
  font-size: 36px;
  margin-bottom: 0px;
}

p.left {
  text-align: left;
  max-width: 30%;
  font-size: 1.2em;
  margin: none;
}

.colLeft {
  float: left;
  width: 50%;
  padding-right: 10%;
}

.colRight {
  float: left;
  width: 50%;
}

.col3 {
  width: 640;
}

.col4 {
  width: 640;
}

.col5 {
  width: 640;
}

.inner {
  z-Index: 2;
  position: relative;
  max-width: 1440px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.centered {
  width: 70%;
  margin: 0 auto;
  text-align: center;
  display: block;
  text-align: center;
  color: #4e4e4e;
  font-size: 16px;
  line-height: 1.5em;
  font-weight: 200;
}

p.intro {
  font-size: 18px;
}

p.centered {
  width: 70%;
  margin: 0 auto;
}

section.managers a.no-change {
  color: #4e4e4e;
  text-decoration: none;
}
section.managers a.no-change:hover, section.managers a.no-change:active {
  color: #4e4e4e;
  text-decoration: none;
}

.lbl {
  margin-right: 10px;
}

h2 {
  font-size: 36px;
  font-weight: 800;
  margin-top: 0;
  margin-bottom: 30px;
  color: #222;
}
h2.case-title {
  font-weight: 800;
}

h3 {
  color: #4e4e4e;
  font-weight: 300;
  font-size: 44px;
  margin: 0 0 30px 0;
}

h4 {
  font-size: 24px;
  font-weight: 300;
}

h5 {
  font-size: 21px;
  font-weight: 300;
}

.subtitle {
  font-size: 20px;
}

.red {
  color: #e46c6e;
}

.blue {
  color: #7acbe4;
}

.green {
  color: #8ed5d6;
}

.white {
  color: white;
}

.bold {
  font-weight: 600;
}

.italic {
  font-style: italic;
}

.uppercase {
  text-transform: uppercase;
}

.social {
  line-height: 50px;
  color: #4e4e4e;
  text-align: center;
}

.intro {
  margin: 0 auto;
  width: 60%;
  text-align: center;
}

.resp-img {
  width: auto \9 ;
  height: auto;
  max-width: 100%;
  min-width: 100%;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

.headerImgCentered, .contact-header__img {
  background-position: center center;
  background-size: cover;
  width: 100%;
}

.forceDark {
  background-color: #000000;
}
.forceDark .bgImage {
  opacity: 0.3;
}

.dark p {
  color: #FFF;
}

/*** DEFAULT PAGE **/
body.meta h2, body.meta h3, body.meta h4, body.meta h5, body.meta h6 {
  font-size: 20px;
  margin-top: 50px;
}
body.meta section {
  text-align: left;
  height: 100%;
}
body.meta p, body.meta article {
  font-size: 16px;
}

.defaultPage h1 {
  margin-bottom: 20px;
}
.defaultPage .inner {
  max-width: 900px;
  width: 80%;
  height: 100%;
}
.defaultPage .inner p {
  font-size: 16px;
  text-align: left;
}

/** SOCIAL ICONS **/
ul.social-icons {
  text-align: center;
}
ul.social-icons li {
  display: inline-block;
  margin: 5px;
  width: 55px;
  height: 55px;
}
ul.social-icons a {
  display: block;
  border-radius: 55px;
  border: 1px #4b4b4b solid;
  width: 55px;
  height: 55px;
  overflow: hidden;
  line-height: 55px;
  -webkit-transition: all 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0ms;
  -o-transition: all 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0ms;
  transition: all 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0ms;
  border-color: #4b4b4b;
  position: relative;
}
ul.social-icons a .fa {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 55px;
  height: 55px;
  font-size: 24px;
  line-height: 55px;
  color: #4b4b4b;
  overflow: hidden;
  z-index: 10;
  -webkit-transition: all 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0ms;
  -o-transition: all 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0ms;
  transition: all 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0ms;
}
ul.social-icons a .fa:after {
  content: "";
  display: table;
  background-color: #7acbe4;
  position: absolute;
  height: 100%;
  border-radius: 55px;
  width: 100%;
  top: 0px;
  z-index: -1;
  -webkit-transition: all 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0ms;
  -o-transition: all 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0ms;
  transition: all 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0ms;
  -webkit-transform: scale(0.4);
      -ms-transform: scale(0.4);
          transform: scale(0.4);
  opacity: 0;
}
ul.social-icons a:hover {
  border-color: #7acbe4;
  /*:after{
    transform: scale(1);
    opacity:1;
  }*/
}
ul.social-icons a:hover .fa {
  color: #FFF;
  background-color: #7acbe4;
}
/* HEADER STYLE */
.header__media {
  position: relative;
  top: 0px;
  left: 0px;
  background-color: #999;
  width: 100%;
  height: 650px;
  overflow: hidden;
}
.header__media .top {
  top: 0px;
  left: 0px;
  background-color: #999;
  width: 100%;
  height: 650px;
  background-repeat: none;
  background-position: center top;
  background-position: fixed;
  background-size: cover;
}

.no-js button {
  color: #fff !important;
}

section .inner .button {
  margin-top: 28px;
}

.button {
  padding: 10px 30px;
  display: inline-block;
  border-radius: 2px;
  text-decoration: none;
  color: #fff;
  font-size: 14px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  border: none;
  /*-webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;*/
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
  outline: none;
  position: relative;
  border: 2px solid #7acbe4;
  -webkit-transition: color 0.3s ease-out;
  -o-transition: color 0.3s ease-out;
  transition: color 0.3s ease-out;
  -webkit-transition: background-color 0.3s ease-out;
  -o-transition: background-color 0.3s ease-out;
  transition: background-color 0.3s ease-out;
}
.button:link, .button:visited {
  color: #FFF;
}
.button:hover, .button:disabled {
  color: #7acbe4;
  background-color: transparent !important;
  text-decoration: none;
}
.button.button--green {
  background-color: #8ed5d6;
}
.button.button--red {
  background-color: #e46c6e;
}
.button.button--blue {
  background-color: #7acbe4;
}
.button.button--dark {
  background-color: transparent;
  border: 2px solid white;
}
.button.button--grey {
  background-color: #d0d0d0;
  border: 2px solid #d0d0d0;
}
.button.button--inverted {
  color: #7acbe4;
  background-color: transparent;
}
.button.button--inverted:hover {
  color: #FFF !important;
  background-color: #7acbe4 !important;
}
.button.button--inverted--white {
  color: white;
  border-color: white;
}
.button.button--inverted--white:hover {
  color: #7acbe4;
  border-color: #7acbe4;
}

.button--linkedin {
  background-color: #8393bb;
}

.button--facebook {
  background-color: #39587f;
}

.button--vimeo {
  background-color: #8ac6d5;
}

.button--twitter {
  background-color: #47bdf4;
}

.fb-bg {
  background: #39587f;
  /* Old browsers */
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #39587f 0%, #39587c 50%, #335378 51%, #335378 100%);
  /* Opera 11.10+ */
  /* IE10+ */
  background: -o-linear-gradient(315deg, #39587f 0%, #39587c 50%, #335378 51%, #335378 100%);
  background: linear-gradient(135deg, #39587f 0%, #39587c 50%, #335378 51%, #335378 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#39587f", endColorstr="#335378", GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}

.linkedin-bg {
  background: #8393bb;
  /* Old browsers */
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #8393bb 0%, #8393bb 50%, #7e8fb8 51%, #7e8fb8 100%);
  /* Opera 11.10+ */
  /* IE10+ */
  background: -o-linear-gradient(315deg, #8393bb 0%, #8393bb 50%, #7e8fb8 51%, #7e8fb8 100%);
  background: linear-gradient(135deg, #8393bb 0%, #8393bb 50%, #7e8fb8 51%, #7e8fb8 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#8393bb", endColorstr="#7e8fb8", GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}

.vimeo-bg {
  background: #8ac6d5;
  /* Old browsers */
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #8ac6d5 0%, #8ac6d5 50%, #80c1d1 51%, #80c1d1 100%);
  /* Opera 11.10+ */
  /* IE10+ */
  background: -o-linear-gradient(315deg, #8ac6d5 0%, #8ac6d5 50%, #80c1d1 51%, #80c1d1 100%);
  background: linear-gradient(135deg, #8ac6d5 0%, #8ac6d5 50%, #80c1d1 51%, #80c1d1 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#8ac6d5", endColorstr="#80c1d1", GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}

.twitter-bg {
  background: #47bdf4;
  /* Old browsers */
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #47bdf4 0%, #47bdf4 50%, #3cb9f3 51%, #3cb9f3 100%);
  /* Opera 11.10+ */
  /* IE10+ */
  background: -o-linear-gradient(315deg, #47bdf4 0%, #47bdf4 50%, #3cb9f3 51%, #3cb9f3 100%);
  background: linear-gradient(135deg, #47bdf4 0%, #47bdf4 50%, #3cb9f3 51%, #3cb9f3 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#47bdf4", endColorstr="#3cb9f3", GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}

#content article p {
  margin: auto;
}

.flex-it {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}
.flex-it section {
  width: 500px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
#container_wrapper, #container_loader {
  background-color: #FFF;
}

.fullScreen {
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  height: auto;
  overflow: hidden;
}

#header_container {
  display: none;
  height: 0px;
}

.culture #header_container {
  width: 100%;
  background: transparent url("https://demodern.com/assets/projects/culture.jpg") no-repeat bottom left;
  background-size: 100%;
  position: fixed;
  z-index: 50;
  height: 200px;
  display: block;
}
.culture nav.fixed {
  top: 100px !important;
}

/*

.particle{
  position:absolute;
}




.svg_lines{
  width:100%;
  height:100%;
  position:absolute;
  top:0px;
  pointer-events:none;
}

.svg_gradientShape{
  width:100%;
  position:absolute;
  top:0px;
  pointer-events:none;
}

.lines{
  position:relative;
}

.particle-1 {
  width: 22px;
  height: 22px;
  background: transparent url("../img/particles/particle1.png") no-repeat;
  position: absolute;
}

.particle-2 {
  width: 18px;
  height: 18px;
  background: transparent url("../img/particles/particle2.png") no-repeat;
  position: absolute;
}

.particle-3 {
  width: 30px;
  height: 30px;
  background: transparent url("../img/particles/particle3.png") no-repeat;
  position: absolute;
}

.particle-4 {
  width: 19px;
  height: 19px;
  background: transparent url("../img/particles/particle4.png") no-repeat;
  position: absolute;
}

.particle-5 {
  width: 33px;
  height: 33px;
  background: transparent url("../img/particles/particle5.png") no-repeat;
  position: absolute;
}

.particle-6 {
  width: 9px;
  height: 9px;
  background: transparent url("../img/particles/particle6.png") no-repeat;
  position: absolute;
}

#transition_header{
  display:none;
  position: fixed;
  top: 0px;
  height: 50%;
  width: 100%;
  z-index: 101;

  .bg{
    background-color: #FFF;
    position: absolute;
    width:100%;
    top: 0px;
    bottom: 200px;
  }
  .svg-container{
    bottom: -200px;
  }
}


#transition_footer{
  display:none;
  background-position: top center;
  height:50%;
  position: fixed;
  bottom:0px;
  width:100%;
  z-index:100;

  .bg{
    background-color: #FFF;
    position: absolute;
    width:100%;
    top: 100px;
    bottom: 0px;
  }
  .svg-container{
    top: -375px;
  }
}

.svg-container {
  position: absolute;
  left:50%;
  margin-left:-800px;
  width: 1600px;
  height: auto;
}

#spaceNav {
//  -webkit-clip-path: polygon(0px 208px, 1146px 207px, 147px 1412px);
}


#realSpace {
  //clip-path: circle(100px, 100px, 50px);
  //clip-path: url(#clipPath);
 // -webkit-clip-path: polygon(0px 0px, .5px 207px, 1147px 1141.2px);
 // clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px);

}

/*<clipPath id="hexagonal-mask">

<polygon points="130,0 0,160 0,485 270,645 560,485 560,160" />

</clipPath>*/
#garbageCollector {
  display: none;
}

.game-container {
  width: 100%;
  height: 650px;
  padding-bottom: 0px;
  text-align: center;
  position: relative;
  background: white url("../img/game_placeholder.jpg") no-repeat center bottom;
}

#ff {
  overflow: visible;
}

#gameSpacer {
  height: 100px;
  background-color: transparent;
}

#gameCanvas {
  margin-top: -100px;
}

#gameWebGl {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 100px;
  opacity: 0;
  background-size: cover;
}

#gameHeader {
  position: relative;
  margin-top: 0px;
  z-index: 1000;
  opacity: 0;
}
#gameHeader .pressspace {
  width: 80%;
  text-align: center;
  display: block;
  font-weight: 300;
  font-size: 16px;
  margin-bottom: 40px;
  max-width: 920px;
  margin: auto;
  margin-bottom: 28px;
  line-height: 1.7em;
}

#countdown {
  position: absolute;
  width: 100%;
  top: 0;
  height: auto;
  font-size: 40px;
}

#scoreText {
  position: absolute;
  width: 100%;
  height: 10%;
  top: 0;
  margin: auto;
  display: none;
}

#score {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 5%;
  margin: auto;
  font-size: 40px;
  display: none;
}

#lastScoreText {
  position: absolute;
  width: 130px;
  height: 30px;
  left: 54px;
  top: 5px;
  font-size: 16px;
  font-weight: 300;
  text-align: left;
  display: none;
}

#mute-btn {
  position: absolute;
  right: 37px;
  width: 30px;
  top: 4px;
  text-align: left;
  display: none;
  z-index: 301;
}

#controls {
  position: absolute;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  top: 55px;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
  display: none;
}
#controls p {
  text-align: center;
  display: block;
  font-weight: 300;
  font-size: 36px;
  line-height: 1.7em;
}
#controls .arrowWrapper {
  position: relative;
  width: 44%;
  height: 45%;
  z-index: 301;
  margin: 0 auto;
  top: -29px;
}
#controls .arrowWrapper p {
  font-size: 16px;
}

.arrows {
  width: 42px;
  height: 42px;
  padding-top: 6px;
  border: 2px solid #e5e5e5;
  border-radius: 10px;
  text-align: center;
  background-color: #fff;
}

.arrowLeft {
  float: left;
  padding-right: 3px;
}

.arrowRight {
  float: right;
  padding-left: 3px;
}

.standardStyle {
  font-family: "Open Sans", sans-serif;
  font-weight: 200;
  font-size: 25px;
  color: #000000;
  text-align: center;
  display: block;
  z-index: 301;
  color: #4e4e4e;
}

.lightboxContainer {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
  top: 0px;
  left: 0px;
}
.lightboxContainer li {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 150%;
  text-align: center;
  white-space: nowrap;
}
.lightboxContainer li .helper {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.lightboxContainer li img {
  vertical-align: middle;
  max-width: 80%;
  max-height: 80%;
}
.lightboxContainer .prev:hover i, .lightboxContainer .next:hover i {
  color: #7acbe4;
  opacity: 1;
}
.lightboxContainer .prev i, .lightboxContainer .next i {
  color: #999;
  opacity: 0.8;
  position: absolute;
  top: 50%;
  width: 50px;
  margin-top: -42px;
}
.lightboxContainer .prev {
  position: absolute;
  left: 0px;
  width: 10%;
  height: 100%;
  z-index: 10;
  cursor: pointer;
}
.lightboxContainer .prev i {
  left: -50px;
  opacity: 0;
}
.lightboxContainer .next {
  position: absolute;
  right: 0px;
  width: 10%;
  height: 100%;
  z-index: 10;
  cursor: pointer;
  text-align: right;
}
.lightboxContainer .next i {
  right: -50px;
  left: inherit;
}
@media (max-width: 1023px) {
  .lightboxContainer li img {
    max-width: 75%;
    max-height: 75%;
  }
}
@media (max-width: 767px) {
  .lightboxContainer li img {
    max-width: 90%;
    max-height: 90%;
  }
  .lightboxContainer .prev i, .lightboxContainer .next i {
    top: 90%;
  }
}

.aspect-ratio {
  position: absolute;
  width: 70%;
  /* 90%; */
  height: 0;
  padding-bottom: 39.375%;
  /* 51%; --> WIDTH * 9 / 16 = PADDING-BOTTOM FOR 16/9-VIDEOS */
  left: 15%;
  top: 15%;
}

.aspect-ratio iframe, .aspect-ratio-mobile iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.aspect-ratio-mobile {
  position: relative;
  width: 90%;
  height: 0;
  padding-bottom: 51%;
  left: 5%;
  top: 0%;
}

/** Moved this into a noscript tag so it doesnt flash for a millisecond on JS browsers... **/
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
/* Tomorrow Comment */
.hljs-comment,
.hljs-title {
  color: #8e908c;
}

/* Tomorrow Red */
.hljs-variable,
.hljs-attribute,
.hljs-tag,
.hljs-regexp,
.ruby .hljs-constant,
.xml .hljs-tag .hljs-title,
.xml .hljs-pi,
.xml .hljs-doctype,
.html .hljs-doctype,
.css .hljs-id,
.css .hljs-class,
.css .hljs-pseudo {
  color: #c82829;
}

/* Tomorrow Orange */
.hljs-number,
.hljs-preprocessor,
.hljs-pragma,
.hljs-built_in,
.hljs-literal,
.hljs-params,
.hljs-constant {
  color: #f5871f;
}

/* Tomorrow Yellow */
.ruby .hljs-class .hljs-title,
.css .hljs-rules .hljs-attribute {
  color: #eab700;
}

/* Tomorrow Green */
.hljs-string,
.hljs-value,
.hljs-inheritance,
.hljs-header,
.ruby .hljs-symbol,
.xml .hljs-cdata {
  color: #718c00;
}

/* Tomorrow Aqua */
.css .hljs-hexcolor {
  color: #3e999f;
}

/* Tomorrow Blue */
.hljs-function,
.python .hljs-decorator,
.python .hljs-title,
.ruby .hljs-function .hljs-title,
.ruby .hljs-title .hljs-keyword,
.perl .hljs-sub,
.javascript .hljs-title,
.coffeescript .hljs-title {
  color: #4271ae;
}

/* Tomorrow Purple */
.hljs-keyword,
.javascript .hljs-function {
  color: #8959a8;
}

.hljs {
  display: block;
  overflow-x: auto;
  background: white;
  color: #4d4d4c;
  padding: 0.5em;
  -webkit-text-size-adjust: none;
}

.coffeescript .javascript,
.javascript .xml,
.tex .hljs-formula,
.xml .javascript,
.xml .vbscript,
.xml .css,
.xml .hljs-cdata {
  opacity: 0.5;
}

/* for high resolution display */
@media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-resolution: 192dpi) {
  .subpixel-fix-white {
    outline: #FFF 1px solid !important;
  }

  .subpixel-fix-beige {
    outline: #f7f5f2 1px solid !important;
  }

  .subpixel-fix-medium {
    outline: #FBFAF9 1px solid !important;
  }
}
/* 1.25 dpr */
@media (-webkit-min-device-pixel-ratio: 1.25), (-o-min-device-pixel-ratio: 5/4), (min-resolution: 120dpi) {
  /* Retina-specific stuff here */
  .subpixel-fix-white {
    outline: #FFF 1px solid !important;
  }

  .subpixel-fix-beige {
    outline: #f7f5f2 1px solid !important;
  }

  .subpixel-fix-medium {
    outline: #FBFAF9 1px solid !important;
  }
}
/* 1.3 dpr */
@media (-webkit-min-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 13/10), (min-resolution: 124.8dpi) {
  /* Retina-specific stuff here */
  .subpixel-fix-white {
    outline: #FFF 1px solid !important;
  }

  .subpixel-fix-beige {
    outline: #f7f5f2 1px solid !important;
  }

  .subpixel-fix-medium {
    outline: #FBFAF9 1px solid !important;
  }
}
/* 1.5 dpr */
@media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 144dpi) {
  /* Retina-specific stuff here */
  .subpixel-fix-white {
    outline: #FFF 1px solid !important;
  }

  .subpixel-fix-beige {
    outline: #f7f5f2 1px solid !important;
  }

  .subpixel-fix-medium {
    outline: #FBFAF9 1px solid !important;
  }
}
/** SOME NAV SPECIFICS MEDIA QUERIES CAN BE FOUND IN THE NAVIGATION SCSS **/
/**************************************************


TABLETS


***************************************************/
@media only screen and (max-width: 1024px) {
  .inner {
    width: 90%;
  }

  p {
    font-size: 16px;
  }

  /**HOME **/
  input[type=checkbox], input[type=radio] {
    display: none;
  }

  #footer ul {
    width: 135%;
  }

  #footer ul.column-six li.latestnews {
    display: none;
  }

  #footer #nav_meta ul {
    margin-left: 10px;
  }

  #footer #nav_meta ul li {
    margin-left: 9px;
  }
}
/**************************************************


SMARTPHONES


***************************************************/
@media (max-width: 420px) {
  .inner {
    width: 90%;
  }

  .centered {
    width: 90%;
  }

  /****
  HOME
  ****/
  /**********
  About
  **********/
  /**********
  Index
  **********/
  .our-core .bgImage {
    display: none;
  }

  #slider-nav .bx-pager {
    text-align: center;
    font-size: 0.85em;
    font-family: Arial;
    font-weight: bold;
    /* color: #666; */
  }

  #slider-nav .bx-pager-item {
    display: inline-block;
  }

  #slider-nav .bx-pager-item a {
    background: #666;
    text-indent: -9999px;
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    outline: 0;
    border-radius: 5px;
  }

  .project {
    display: block;
  }

  /*
  section article.project img {
    z-index: 0;
    opacity: 0.8;
  }*/
  input[type=checkbox], input[type=radio] {
    display: block;
  }

  .not-only-work {
    margin-top: 0px;
  }
  .not-only-work .inner {
    margin-top: 0px;
  }

  #projects {
    padding-bottom: 50px;
  }

  .homepage .teaser-details .teaser.square .teaser-details .container {
    display: none;
  }

  section.job-look .inner #double li {
    width: 100%;
    /* height: 437px; */
    margin: 0%;
  }

  /**********
  blog
  **********/
  .blog .inner {
    width: 100%;
  }

  .main-nav li a {
    font-size: 25px;
  }
}
#isTablet, #isMobile {
  display: none;
}

@media only screen and (max-width: 700px) {
  .footersvg {
    display: none;
  }
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  /* Styles */
  #isMobile {
    display: block;
  }
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width: 321px) {
  /* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width: 320px) {
  /* Styles */
  #isMobile {
    display: block;
  }
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  /* Styles */
  #isTablet {
    display: block;
  }
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  /* Styles */
  #isTablet {
    display: block;
  }
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  /* Styles */
  #isTablet {
    display: block;
  }
}
/* Desktops and laptops ----------- */
@media only screen and (min-width: 1224px) {
  /* Styles */
}
/* Large screens ----------- */
@media only screen and (min-width: 1824px) {
  /* Styles */
}
#oldBrowser {
  text-align: center;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 30px;
  background-color: #333;
  border-bottom: 1px solid #000;
  color: #999;
  line-height: 30px;
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  z-index: 1000;
}

/*.oldie #canvas_container_mask {
  background: transparent url(https://demodern.com/assets/_img/worldmap.png) no-repeat top left;
}*/
.landingPage #intro,
.landingPage #maskFx,
.landingPage .headerContainer {
  display: none;
}
.landingPage .case-intro {
  padding-bottom: 50px;
}
.landingPage .share-case {
  display: none;
}
.landingPage #case-awards,
.landingPage #case-related {
  display: none;
}
.landingPage #case-projectview .share-case-buttons,
.landingPage #case-projectview .social-block,
.landingPage #case-projectview .svg-projectview-bottom {
  display: none;
}
.landingPage #case-projectview {
  height: 600px;
}
.landingPage #case-projectview .text-block {
  margin-top: 70px;
}
.landingPage #footer .footer-desktop,
.landingPage #footer .footer-mobile,
.landingPage #footer .footer-black {
  display: none;
}