.flushImages {
    max-width: 100%;
    height: auto;
}

.force-centralize {
    align-items: center;
    display: flex;
    flex-direction: column;
}

.activeitem {
    color: #7386D5 !important;
    background: #fff !important;
}

:focus {
    outline: none;
    outline: 0
}

ul,
li {
    list-style: square inside url("sqpurple.gif");
    margin: 0;
    padding: 0;
    font-size: 22px;
    color: #1a2b44;
    text-align: justify
}

a.go-top {
    position: fixed;
    top: auto;
    right: 15px;
    bottom: 15px;
    left: auto;
    opacity: 0;
    cursor: pointer;
    text-decoration: none;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    z-index: 9999
}

a.go-top.show {
    opacity: .3
}

a.go-top.show:hover {
    opacity: .5
}

a.go-top svg {
    width: 16px;
    height: 23px
}

/*! * Bootstrap v3.3.2 (http://getbootstrap.com) * Copyright 2011-2015 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */
/*! * Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=89b84319e8f2e10a5015) * Config saved to config.json and https://gist.github.com/89b84319e8f2e10a5015 */
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline
}

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

[hidden],
template {
    display: none
}

a {
    background-color: transparent
}

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

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

b,
strong {
    font-weight: bold
}

dfn {
    font-style: italic
}

h1 {
    font-size: 2em;
    margin: 0.67em 0
}

mark {
    background: #ff0;
    color: #000
}

small {
    font-size: 80%
}

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

sup {
    top: -0.5em
}

sub {
    bottom: -0.25em
}

img {
    border: 0
}

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

figure {
    margin: 1em 40px
}

hr {
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 0
}

pre {
    overflow: auto
}

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

button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0
}

button {
    overflow: visible
}

button,
select {
    text-transform: none
}

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

button[disabled],
html input[disabled] {
    cursor: default
}

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

input {
    line-height: normal
}

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

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto
}

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

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em
}

legend {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto
}

optgroup {
    font-weight: bold
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    color: #16364f;
    border: 1px solid black;
    width: 100%
}

td,
th {
    padding: 0 color:#16364f;
    border: 1px solid black
}

/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
@media print {

    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        text-shadow: none !important
    }

    a,
    a:visited {
        text-decoration: underline
    }

    a[href]:after {
        content: " (" attr(href) ")"
    }

    abbr[title]:after {
        content: " (" attr(title) ")"
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: ""
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid
    }

    thead {
        display: table-header-group
    }

    tr,
    img {
        page-break-inside: avoid
    }

    img {
        max-width: 100% !important
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3
    }

    h2,
    h3 {
        page-break-after: avoid
    }

    select {
        background: #fff !important
    }

    .navbar {
        display: none
    }

    .btn>.caret,
    .dropup>.btn>.caret {
        border-top-color: #000 !important
    }

    .label {
        border: 1px solid #000
    }

    .table {
        border-collapse: collapse !important
    }

    .table td,
    .table th {
        background-color: #fff !important
    }

    .table-bordered th,
    .table-bordered td {
        border: 1px solid #ddd !important
    }
}

@font-face {
    font-family: 'Glyphicons Halflings';
    src: url("../fonts/glyphicons-halflings-regular.eot");
    src: url("../fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/glyphicons-halflings-regular.woff2") format("woff2"), url("../fonts/glyphicons-halflings-regular.woff") format("woff"), url("../fonts/glyphicons-halflings-regular.ttf") format("truetype"), url("../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg")
}

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.glyphicon-asterisk:before {
    content: "\2a"
}

.glyphicon-plus:before {
    content: "\2b"
}

.glyphicon-euro:before,
.glyphicon-eur:before {
    content: "\20ac"
}

.glyphicon-minus:before {
    content: "\2212"
}

.glyphicon-cloud:before {
    content: "\2601"
}

.glyphicon-envelope:before {
    content: "\2709"
}

.glyphicon-pencil:before {
    content: "\270f"
}

.glyphicon-glass:before {
    content: "\e001"
}

.glyphicon-music:before {
    content: "\e002"
}

.glyphicon-search:before {
    content: "\e003"
}

.glyphicon-heart:before {
    content: "\e005"
}

.glyphicon-star:before {
    content: "\e006"
}

.glyphicon-star-empty:before {
    content: "\e007"
}

.glyphicon-user:before {
    content: "\e008"
}

.glyphicon-film:before {
    content: "\e009"
}

.glyphicon-th-large:before {
    content: "\e010"
}

.glyphicon-th:before {
    content: "\e011"
}

.glyphicon-th-list:before {
    content: "\e012"
}

.glyphicon-ok:before {
    content: "\e013"
}

.glyphicon-remove:before {
    content: "\e014"
}

.glyphicon-zoom-in:before {
    content: "\e015"
}

.glyphicon-zoom-out:before {
    content: "\e016"
}

.glyphicon-off:before {
    content: "\e017"
}

.glyphicon-signal:before {
    content: "\e018"
}

.glyphicon-cog:before {
    content: "\e019"
}

.glyphicon-trash:before {
    content: "\e020"
}

.glyphicon-home:before {
    content: "\e021"
}

.glyphicon-file:before {
    content: "\e022"
}

.glyphicon-time:before {
    content: "\e023"
}

.glyphicon-road:before {
    content: "\e024"
}

.glyphicon-download-alt:before {
    content: "\e025"
}

.glyphicon-download:before {
    content: "\e026"
}

.glyphicon-upload:before {
    content: "\e027"
}

.glyphicon-inbox:before {
    content: "\e028"
}

.glyphicon-play-circle:before {
    content: "\e029"
}

.glyphicon-repeat:before {
    content: "\e030"
}

.glyphicon-refresh:before {
    content: "\e031"
}

.glyphicon-list-alt:before {
    content: "\e032"
}

.glyphicon-lock:before {
    content: "\e033"
}

.glyphicon-flag:before {
    content: "\e034"
}

.glyphicon-headphones:before {
    content: "\e035"
}

.glyphicon-volume-off:before {
    content: "\e036"
}

.glyphicon-volume-down:before {
    content: "\e037"
}

.glyphicon-volume-up:before {
    content: "\e038"
}

.glyphicon-qrcode:before {
    content: "\e039"
}

.glyphicon-barcode:before {
    content: "\e040"
}

.glyphicon-tag:before {
    content: "\e041"
}

.glyphicon-tags:before {
    content: "\e042"
}

.glyphicon-book:before {
    content: "\e043"
}

.glyphicon-bookmark:before {
    content: "\e044"
}

.glyphicon-print:before {
    content: "\e045"
}

.glyphicon-camera:before {
    content: "\e046"
}

.glyphicon-font:before {
    content: "\e047"
}

.glyphicon-bold:before {
    content: "\e048"
}

.glyphicon-italic:before {
    content: "\e049"
}

.glyphicon-text-height:before {
    content: "\e050"
}

.glyphicon-text-width:before {
    content: "\e051"
}

.glyphicon-align-left:before {
    content: "\e052"
}

.glyphicon-align-center:before {
    content: "\e053"
}

.glyphicon-align-right:before {
    content: "\e054"
}

.glyphicon-align-justify:before {
    content: "\e055"
}

.glyphicon-list:before {
    content: "\e056"
}

.glyphicon-indent-left:before {
    content: "\e057"
}

.glyphicon-indent-right:before {
    content: "\e058"
}

.glyphicon-facetime-video:before {
    content: "\e059"
}

.glyphicon-picture:before {
    content: "\e060"
}

.glyphicon-map-marker:before {
    content: "\e062"
}

.glyphicon-adjust:before {
    content: "\e063"
}

.glyphicon-tint:before {
    content: "\e064"
}

.glyphicon-edit:before {
    content: "\e065"
}

.glyphicon-share:before {
    content: "\e066"
}

.glyphicon-check:before {
    content: "\e067"
}

.glyphicon-move:before {
    content: "\e068"
}

.glyphicon-step-backward:before {
    content: "\e069"
}

.glyphicon-fast-backward:before {
    content: "\e070"
}

.glyphicon-backward:before {
    content: "\e071"
}

.glyphicon-play:before {
    content: "\e072"
}

.glyphicon-pause:before {
    content: "\e073"
}

.glyphicon-stop:before {
    content: "\e074"
}

.glyphicon-forward:before {
    content: "\e075"
}

.glyphicon-fast-forward:before {
    content: "\e076"
}

.glyphicon-step-forward:before {
    content: "\e077"
}

.glyphicon-eject:before {
    content: "\e078"
}

.glyphicon-chevron-left:before {
    content: "\e079"
}

.glyphicon-chevron-right:before {
    content: "\e080"
}

.glyphicon-plus-sign:before {
    content: "\e081"
}

.glyphicon-minus-sign:before {
    content: "\e082"
}

.glyphicon-remove-sign:before {
    content: "\e083"
}

.glyphicon-ok-sign:before {
    content: "\e084"
}

.glyphicon-question-sign:before {
    content: "\e085"
}

.glyphicon-info-sign:before {
    content: "\e086"
}

.glyphicon-screenshot:before {
    content: "\e087"
}

.glyphicon-remove-circle:before {
    content: "\e088"
}

.glyphicon-ok-circle:before {
    content: "\e089"
}

.glyphicon-ban-circle:before {
    content: "\e090"
}

.glyphicon-arrow-left:before {
    content: "\e091"
}

.glyphicon-arrow-right:before {
    content: "\e092"
}

.glyphicon-arrow-up:before {
    content: "\e093"
}

.glyphicon-arrow-down:before {
    content: "\e094"
}

.glyphicon-share-alt:before {
    content: "\e095"
}

.glyphicon-resize-full:before {
    content: "\e096"
}

.glyphicon-resize-small:before {
    content: "\e097"
}

.glyphicon-exclamation-sign:before {
    content: "\e101"
}

.glyphicon-gift:before {
    content: "\e102"
}

.glyphicon-leaf:before {
    content: "\e103"
}

.glyphicon-fire:before {
    content: "\e104"
}

.glyphicon-eye-open:before {
    content: "\e105"
}

.glyphicon-eye-close:before {
    content: "\e106"
}

.glyphicon-warning-sign:before {
    content: "\e107"
}

.glyphicon-plane:before {
    content: "\e108"
}

.glyphicon-calendar:before {
    content: "\e109"
}

.glyphicon-random:before {
    content: "\e110"
}

.glyphicon-comment:before {
    content: "\e111"
}

.glyphicon-magnet:before {
    content: "\e112"
}

.glyphicon-chevron-up:before {
    content: "\e113"
}

.glyphicon-chevron-down:before {
    content: "\e114"
}

.glyphicon-retweet:before {
    content: "\e115"
}

.glyphicon-shopping-cart:before {
    content: "\e116"
}

.glyphicon-folder-close:before {
    content: "\e117"
}

.glyphicon-folder-open:before {
    content: "\e118"
}

.glyphicon-resize-vertical:before {
    content: "\e119"
}

.glyphicon-resize-horizontal:before {
    content: "\e120"
}

.glyphicon-hdd:before {
    content: "\e121"
}

.glyphicon-bullhorn:before {
    content: "\e122"
}

.glyphicon-bell:before {
    content: "\e123"
}

.glyphicon-certificate:before {
    content: "\e124"
}

.glyphicon-thumbs-up:before {
    content: "\e125"
}

.glyphicon-thumbs-down:before {
    content: "\e126"
}

.glyphicon-hand-right:before {
    content: "\e127"
}

.glyphicon-hand-left:before {
    content: "\e128"
}

.glyphicon-hand-up:before {
    content: "\e129"
}

.glyphicon-hand-down:before {
    content: "\e130"
}

.glyphicon-circle-arrow-right:before {
    content: "\e131"
}

.glyphicon-circle-arrow-left:before {
    content: "\e132"
}

.glyphicon-circle-arrow-up:before {
    content: "\e133"
}

.glyphicon-circle-arrow-down:before {
    content: "\e134"
}

.glyphicon-globe:before {
    content: "\e135"
}

.glyphicon-wrench:before {
    content: "\e136"
}

.glyphicon-tasks:before {
    content: "\e137"
}

.glyphicon-filter:before {
    content: "\e138"
}

.glyphicon-briefcase:before {
    content: "\e139"
}

.glyphicon-fullscreen:before {
    content: "\e140"
}

.glyphicon-dashboard:before {
    content: "\e141"
}

.glyphicon-paperclip:before {
    content: "\e142"
}

.glyphicon-heart-empty:before {
    content: "\e143"
}

.glyphicon-link:before {
    content: "\e144"
}

.glyphicon-phone:before {
    content: "\e145"
}

.glyphicon-pushpin:before {
    content: "\e146"
}

.glyphicon-usd:before {
    content: "\e148"
}

.glyphicon-gbp:before {
    content: "\e149"
}

.glyphicon-sort:before {
    content: "\e150"
}

.glyphicon-sort-by-alphabet:before {
    content: "\e151"
}

.glyphicon-sort-by-alphabet-alt:before {
    content: "\e152"
}

.glyphicon-sort-by-order:before {
    content: "\e153"
}

.glyphicon-sort-by-order-alt:before {
    content: "\e154"
}

.glyphicon-sort-by-attributes:before {
    content: "\e155"
}

.glyphicon-sort-by-attributes-alt:before {
    content: "\e156"
}

.glyphicon-unchecked:before {
    content: "\e157"
}

.glyphicon-expand:before {
    content: "\e158"
}

.glyphicon-collapse-down:before {
    content: "\e159"
}

.glyphicon-collapse-up:before {
    content: "\e160"
}

.glyphicon-log-in:before {
    content: "\e161"
}

.glyphicon-flash:before {
    content: "\e162"
}

.glyphicon-log-out:before {
    content: "\e163"
}

.glyphicon-new-window:before {
    content: "\e164"
}

.glyphicon-record:before {
    content: "\e165"
}

.glyphicon-save:before {
    content: "\e166"
}

.glyphicon-open:before {
    content: "\e167"
}

.glyphicon-saved:before {
    content: "\e168"
}

.glyphicon-import:before {
    content: "\e169"
}

.glyphicon-export:before {
    content: "\e170"
}

.glyphicon-send:before {
    content: "\e171"
}

.glyphicon-floppy-disk:before {
    content: "\e172"
}

.glyphicon-floppy-saved:before {
    content: "\e173"
}

.glyphicon-floppy-remove:before {
    content: "\e174"
}

.glyphicon-floppy-save:before {
    content: "\e175"
}

.glyphicon-floppy-open:before {
    content: "\e176"
}

.glyphicon-credit-card:before {
    content: "\e177"
}

.glyphicon-transfer:before {
    content: "\e178"
}

.glyphicon-cutlery:before {
    content: "\e179"
}

.glyphicon-header:before {
    content: "\e180"
}

.glyphicon-compressed:before {
    content: "\e181"
}

.glyphicon-earphone:before {
    content: "\e182"
}

.glyphicon-phone-alt:before {
    content: "\e183"
}

.glyphicon-tower:before {
    content: "\e184"
}

.glyphicon-stats:before {
    content: "\e185"
}

.glyphicon-sd-video:before {
    content: "\e186"
}

.glyphicon-hd-video:before {
    content: "\e187"
}

.glyphicon-subtitles:before {
    content: "\e188"
}

.glyphicon-sound-stereo:before {
    content: "\e189"
}

.glyphicon-sound-dolby:before {
    content: "\e190"
}

.glyphicon-sound-5-1:before {
    content: "\e191"
}

.glyphicon-sound-6-1:before {
    content: "\e192"
}

.glyphicon-sound-7-1:before {
    content: "\e193"
}

.glyphicon-copyright-mark:before {
    content: "\e194"
}

.glyphicon-registration-mark:before {
    content: "\e195"
}

.glyphicon-cloud-download:before {
    content: "\e197"
}

.glyphicon-cloud-upload:before {
    content: "\e198"
}

.glyphicon-tree-conifer:before {
    content: "\e199"
}

.glyphicon-tree-deciduous:before {
    content: "\e200"
}

.glyphicon-cd:before {
    content: "\e201"
}

.glyphicon-save-file:before {
    content: "\e202"
}

.glyphicon-open-file:before {
    content: "\e203"
}

.glyphicon-level-up:before {
    content: "\e204"
}

.glyphicon-copy:before {
    content: "\e205"
}

.glyphicon-paste:before {
    content: "\e206"
}

.glyphicon-alert:before {
    content: "\e209"
}

.glyphicon-equalizer:before {
    content: "\e210"
}

.glyphicon-king:before {
    content: "\e211"
}

.glyphicon-queen:before {
    content: "\e212"
}

.glyphicon-pawn:before {
    content: "\e213"
}

.glyphicon-bishop:before {
    content: "\e214"
}

.glyphicon-knight:before {
    content: "\e215"
}

.glyphicon-baby-formula:before {
    content: "\e216"
}

.glyphicon-tent:before {
    content: "\26fa"
}

.glyphicon-blackboard:before {
    content: "\e218"
}

.glyphicon-bed:before {
    content: "\e219"
}

.glyphicon-apple:before {
    content: "\f8ff"
}

.glyphicon-erase:before {
    content: "\e221"
}

.glyphicon-hourglass:before {
    content: "\231b"
}

.glyphicon-lamp:before {
    content: "\e223"
}

.glyphicon-duplicate:before {
    content: "\e224"
}

.glyphicon-piggy-bank:before {
    content: "\e225"
}

.glyphicon-scissors:before {
    content: "\e226"
}

.glyphicon-bitcoin:before {
    content: "\e227"
}

.glyphicon-yen:before {
    content: "\00a5"
}

.glyphicon-ruble:before {
    content: "\20bd"
}

.glyphicon-scale:before {
    content: "\e230"
}

.glyphicon-ice-lolly:before {
    content: "\e231"
}

.glyphicon-ice-lolly-tasted:before {
    content: "\e232"
}

.glyphicon-education:before {
    content: "\e233"
}

.glyphicon-option-horizontal:before {
    content: "\e234"
}

.glyphicon-option-vertical:before {
    content: "\e235"
}

.glyphicon-menu-hamburger:before {
    content: "\e236"
}

.glyphicon-modal-window:before {
    content: "\e237"
}

.glyphicon-oil:before {
    content: "\e238"
}

.glyphicon-grain:before {
    content: "\e239"
}

.glyphicon-sunglasses:before {
    content: "\e240"
}

.glyphicon-text-size:before {
    content: "\e241"
}

.glyphicon-text-color:before {
    content: "\e242"
}

.glyphicon-text-background:before {
    content: "\e243"
}

.glyphicon-object-align-top:before {
    content: "\e244"
}

.glyphicon-object-align-bottom:before {
    content: "\e245"
}

.glyphicon-object-align-horizontal:before {
    content: "\e246"
}

.glyphicon-object-align-left:before {
    content: "\e247"
}

.glyphicon-object-align-vertical:before {
    content: "\e248"
}

.glyphicon-object-align-right:before {
    content: "\e249"
}

.glyphicon-triangle-right:before {
    content: "\e250"
}

.glyphicon-triangle-left:before {
    content: "\e251"
}

.glyphicon-triangle-bottom:before {
    content: "\e252"
}

.glyphicon-triangle-top:before {
    content: "\e253"
}

.glyphicon-console:before {
    content: "\e254"
}

.glyphicon-superscript:before {
    content: "\e255"
}

.glyphicon-subscript:before {
    content: "\e256"
}

.glyphicon-menu-left:before {
    content: "\e257"
}

.glyphicon-menu-right:before {
    content: "\e258"
}

.glyphicon-menu-down:before {
    content: "\e259"
}

.glyphicon-menu-up:before {
    content: "\e260"
}

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

*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

html {
    font-size: 10px;
    -webkit-tap-highlight-color: transparent
}

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff
}

input,
button,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit
}

a {
    color: #337ab7;
    text-decoration: none
}

a:hover,
a:focus {
    color: #23527c;
    text-decoration: underline
}

a:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px
}

figure {
    margin: 0
}

img {
    vertical-align: middle
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto
}

.img-rounded {
    border-radius: 6px
}

.img-thumbnail {
    padding: 4px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    display: inline-block;
    max-width: 100%;
    height: auto
}

.img-circle {
    border-radius: 50%
}

hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto
}

code,
kbd,
pre,
samp {
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace
}

code {
    padding: 2px 4px;
    font-size: 90%;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px
}

kbd {
    padding: 2px 4px;
    font-size: 90%;
    color: #fff;
    background-color: #333;
    border-radius: 3px;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25)
}

kbd kbd {
    padding: 0;
    font-size: 100%;
    font-weight: bold;
    -webkit-box-shadow: none;
    box-shadow: none
}

pre {
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.42857143;
    word-break: break-all;
    word-wrap: break-word;
    color: #333;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px
}

pre code {
    padding: 0;
    font-size: inherit;
    color: inherit;
    white-space: pre-wrap;
    background-color: transparent;
    border-radius: 0
}

.pre-scrollable {
    max-height: 340px;
    overflow-y: scroll
}

.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px
}

@media (min-width: 768px) {
    .container {
        width: 750px
    }
}

@media (min-width: 992px) {
    .container {
        width: 970px
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1600px
    }
}

.container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px
}

.row {
    margin-left: -15px;
    margin-right: -15px
}

.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px
}

.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12 {
    float: left
}

.col-xs-12 {
    width: 100%
}

.col-xs-11 {
    width: 91.66666667%
}

.col-xs-10 {
    width: 83.33333333%
}

.col-xs-9 {
    width: 75%
}

.col-xs-8 {
    width: 66.66666667%
}

.col-xs-7 {
    width: 58.33333333%
}

.col-xs-6 {
    width: 50%
}

.col-xs-5 {
    width: 41.66666667%
}

.col-xs-4 {
    width: 33.33333333%
}

.col-xs-3 {
    width: 25%
}

.col-xs-2 {
    width: 16.66666667%
}

.col-xs-1 {
    width: 8.33333333%
}

.col-xs-pull-12 {
    right: 100%
}

.col-xs-pull-11 {
    right: 91.66666667%
}

.col-xs-pull-10 {
    right: 83.33333333%
}

.col-xs-pull-9 {
    right: 75%
}

.col-xs-pull-8 {
    right: 66.66666667%
}

.col-xs-pull-7 {
    right: 58.33333333%
}

.col-xs-pull-6 {
    right: 50%
}

.col-xs-pull-5 {
    right: 41.66666667%
}

.col-xs-pull-4 {
    right: 33.33333333%
}

.col-xs-pull-3 {
    right: 25%
}

.col-xs-pull-2 {
    right: 16.66666667%
}

.col-xs-pull-1 {
    right: 8.33333333%
}

.col-xs-pull-0 {
    right: auto
}

.col-xs-push-12 {
    left: 100%
}

.col-xs-push-11 {
    left: 91.66666667%
}

.col-xs-push-10 {
    left: 83.33333333%
}

.col-xs-push-9 {
    left: 75%
}

.col-xs-push-8 {
    left: 66.66666667%
}

.col-xs-push-7 {
    left: 58.33333333%
}

.col-xs-push-6 {
    left: 50%
}

.col-xs-push-5 {
    left: 41.66666667%
}

.col-xs-push-4 {
    left: 33.33333333%
}

.col-xs-push-3 {
    left: 25%
}

.col-xs-push-2 {
    left: 16.66666667%
}

.col-xs-push-1 {
    left: 8.33333333%
}

.col-xs-push-0 {
    left: auto
}

.col-xs-offset-12 {
    margin-left: 100%
}

.col-xs-offset-11 {
    margin-left: 91.66666667%
}

.col-xs-offset-10 {
    margin-left: 83.33333333%
}

.col-xs-offset-9 {
    margin-left: 75%
}

.col-xs-offset-8 {
    margin-left: 66.66666667%
}

.col-xs-offset-7 {
    margin-left: 58.33333333%
}

.col-xs-offset-6 {
    margin-left: 50%
}

.col-xs-offset-5 {
    margin-left: 41.66666667%
}

.col-xs-offset-4 {
    margin-left: 33.33333333%
}

.col-xs-offset-3 {
    margin-left: 25%
}

.col-xs-offset-2 {
    margin-left: 16.66666667%
}

.col-xs-offset-1 {
    margin-left: 8.33333333%
}

.col-xs-offset-0 {
    margin-left: 0
}

@media (min-width: 768px) {

    .col-sm-1,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12 {
        float: left
    }

    .col-sm-12 {
        width: 100%
    }

    .col-sm-11 {
        width: 91.66666667%
    }

    .col-sm-10 {
        width: 83.33333333%
    }

    .col-sm-9 {
        width: 75%
    }

    .col-sm-8 {
        width: 66.66666667%
    }

    .col-sm-7 {
        width: 58.33333333%
    }

    .col-sm-6 {
        width: 50%
    }

    .col-sm-5 {
        width: 41.66666667%
    }

    .col-sm-4 {
        width: 33.33333333%
    }

    .col-sm-3 {
        width: 25%
    }

    .col-sm-2 {
        width: 16.66666667%
    }

    .col-sm-1 {
        width: 8.33333333%
    }

    .col-sm-pull-12 {
        right: 100%
    }

    .col-sm-pull-11 {
        right: 91.66666667%
    }

    .col-sm-pull-10 {
        right: 83.33333333%
    }

    .col-sm-pull-9 {
        right: 75%
    }

    .col-sm-pull-8 {
        right: 66.66666667%
    }

    .col-sm-pull-7 {
        right: 58.33333333%
    }

    .col-sm-pull-6 {
        right: 50%
    }

    .col-sm-pull-5 {
        right: 41.66666667%
    }

    .col-sm-pull-4 {
        right: 33.33333333%
    }

    .col-sm-pull-3 {
        right: 25%
    }

    .col-sm-pull-2 {
        right: 16.66666667%
    }

    .col-sm-pull-1 {
        right: 8.33333333%
    }

    .col-sm-pull-0 {
        right: auto
    }

    .col-sm-push-12 {
        left: 100%
    }

    .col-sm-push-11 {
        left: 91.66666667%
    }

    .col-sm-push-10 {
        left: 83.33333333%
    }

    .col-sm-push-9 {
        left: 75%
    }

    .col-sm-push-8 {
        left: 66.66666667%
    }

    .col-sm-push-7 {
        left: 58.33333333%
    }

    .col-sm-push-6 {
        left: 50%
    }

    .col-sm-push-5 {
        left: 41.66666667%
    }

    .col-sm-push-4 {
        left: 33.33333333%
    }

    .col-sm-push-3 {
        left: 25%
    }

    .col-sm-push-2 {
        left: 16.66666667%
    }

    .col-sm-push-1 {
        left: 8.33333333%
    }

    .col-sm-push-0 {
        left: auto
    }

    .col-sm-offset-12 {
        margin-left: 100%
    }

    .col-sm-offset-11 {
        margin-left: 91.66666667%
    }

    .col-sm-offset-10 {
        margin-left: 83.33333333%
    }

    .col-sm-offset-9 {
        margin-left: 75%
    }

    .col-sm-offset-8 {
        margin-left: 66.66666667%
    }

    .col-sm-offset-7 {
        margin-left: 58.33333333%
    }

    .col-sm-offset-6 {
        margin-left: 50%
    }

    .col-sm-offset-5 {
        margin-left: 41.66666667%
    }

    .col-sm-offset-4 {
        margin-left: 33.33333333%
    }

    .col-sm-offset-3 {
        margin-left: 25%
    }

    .col-sm-offset-2 {
        margin-left: 16.66666667%
    }

    .col-sm-offset-1 {
        margin-left: 8.33333333%
    }

    .col-sm-offset-0 {
        margin-left: 0
    }
}

@media (min-width: 992px) {

    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-10,
    .col-md-11,
    .col-md-12 {
        float: left
    }

    .col-md-12 {
        width: 100%
    }

    .col-md-11 {
        width: 91.66666667%
    }

    .col-md-10 {
        width: 83.33333333%
    }

    .col-md-9 {
        width: 75%
    }

    .col-md-8 {
        width: 66.66666667%
    }

    .col-md-7 {
        width: 58.33333333%
    }

    .col-md-6 {
        width: 50%
    }

    .col-md-5 {
        width: 41.66666667%
    }

    .col-md-4 {
        width: 33.33333333%
    }

    .col-md-3 {
        width: 25%
    }

    .col-md-2 {
        width: 16.66666667%
    }

    .col-md-1 {
        width: 8.33333333%
    }

    .col-md-pull-12 {
        right: 100%
    }

    .col-md-pull-11 {
        right: 91.66666667%
    }

    .col-md-pull-10 {
        right: 83.33333333%
    }

    .col-md-pull-9 {
        right: 75%
    }

    .col-md-pull-8 {
        right: 66.66666667%
    }

    .col-md-pull-7 {
        right: 58.33333333%
    }

    .col-md-pull-6 {
        right: 50%
    }

    .col-md-pull-5 {
        right: 41.66666667%
    }

    .col-md-pull-4 {
        right: 33.33333333%
    }

    .col-md-pull-3 {
        right: 25%
    }

    .col-md-pull-2 {
        right: 16.66666667%
    }

    .col-md-pull-1 {
        right: 8.33333333%
    }

    .col-md-pull-0 {
        right: auto
    }

    .col-md-push-12 {
        left: 100%
    }

    .col-md-push-11 {
        left: 91.66666667%
    }

    .col-md-push-10 {
        left: 83.33333333%
    }

    .col-md-push-9 {
        left: 75%
    }

    .col-md-push-8 {
        left: 66.66666667%
    }

    .col-md-push-7 {
        left: 58.33333333%
    }

    .col-md-push-6 {
        left: 50%
    }

    .col-md-push-5 {
        left: 41.66666667%
    }

    .col-md-push-4 {
        left: 33.33333333%
    }

    .col-md-push-3 {
        left: 25%
    }

    .col-md-push-2 {
        left: 16.66666667%
    }

    .col-md-push-1 {
        left: 8.33333333%
    }

    .col-md-push-0 {
        left: auto
    }

    .col-md-offset-12 {
        margin-left: 100%
    }

    .col-md-offset-11 {
        margin-left: 91.66666667%
    }

    .col-md-offset-10 {
        margin-left: 83.33333333%
    }

    .col-md-offset-9 {
        margin-left: 75%
    }

    .col-md-offset-8 {
        margin-left: 66.66666667%
    }

    .col-md-offset-7 {
        margin-left: 58.33333333%
    }

    .col-md-offset-6 {
        margin-left: 50%
    }

    .col-md-offset-5 {
        margin-left: 41.66666667%
    }

    .col-md-offset-4 {
        margin-left: 33.33333333%
    }

    .col-md-offset-3 {
        margin-left: 25%
    }

    .col-md-offset-2 {
        margin-left: 16.66666667%
    }

    .col-md-offset-1 {
        margin-left: 8.33333333%
    }

    .col-md-offset-0 {
        margin-left: 0
    }
}

@media (min-width: 1200px) {

    .col-lg-1,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12 {
        float: left
    }

    .col-lg-12 {
        width: 100%
    }

    .col-lg-11 {
        width: 91.66666667%
    }

    .col-lg-10 {
        width: 83.33333333%
    }

    .col-lg-9 {
        width: 75%
    }

    .col-lg-8 {
        width: 66.66666667%
    }

    .col-lg-7 {
        width: 58.33333333%
    }

    .col-lg-6 {
        width: 50%
    }

    .col-lg-5 {
        width: 41.66666667%
    }

    .col-lg-4 {
        width: 33.33333333%
    }

    .col-lg-3 {
        width: 25%
    }

    .col-lg-2 {
        width: 16.66666667%
    }

    .col-lg-1 {
        width: 8.33333333%
    }

    .col-lg-pull-12 {
        right: 100%
    }

    .col-lg-pull-11 {
        right: 91.66666667%
    }

    .col-lg-pull-10 {
        right: 83.33333333%
    }

    .col-lg-pull-9 {
        right: 75%
    }

    .col-lg-pull-8 {
        right: 66.66666667%
    }

    .col-lg-pull-7 {
        right: 58.33333333%
    }

    .col-lg-pull-6 {
        right: 50%
    }

    .col-lg-pull-5 {
        right: 41.66666667%
    }

    .col-lg-pull-4 {
        right: 33.33333333%
    }

    .col-lg-pull-3 {
        right: 25%
    }

    .col-lg-pull-2 {
        right: 16.66666667%
    }

    .col-lg-pull-1 {
        right: 8.33333333%
    }

    .col-lg-pull-0 {
        right: auto
    }

    .col-lg-push-12 {
        left: 100%
    }

    .col-lg-push-11 {
        left: 91.66666667%
    }

    .col-lg-push-10 {
        left: 83.33333333%
    }

    .col-lg-push-9 {
        left: 75%
    }

    .col-lg-push-8 {
        left: 66.66666667%
    }

    .col-lg-push-7 {
        left: 58.33333333%
    }

    .col-lg-push-6 {
        left: 50%
    }

    .col-lg-push-5 {
        left: 41.66666667%
    }

    .col-lg-push-4 {
        left: 33.33333333%
    }

    .col-lg-push-3 {
        left: 25%
    }

    .col-lg-push-2 {
        left: 16.66666667%
    }

    .col-lg-push-1 {
        left: 8.33333333%
    }

    .col-lg-push-0 {
        left: auto
    }

    .col-lg-offset-12 {
        margin-left: 100%
    }

    .col-lg-offset-11 {
        margin-left: 91.66666667%
    }

    .col-lg-offset-10 {
        margin-left: 83.33333333%
    }

    .col-lg-offset-9 {
        margin-left: 75%
    }

    .col-lg-offset-8 {
        margin-left: 66.66666667%
    }

    .col-lg-offset-7 {
        margin-left: 58.33333333%
    }

    .col-lg-offset-6 {
        margin-left: 50%
    }

    .col-lg-offset-5 {
        margin-left: 41.66666667%
    }

    .col-lg-offset-4 {
        margin-left: 33.33333333%
    }

    .col-lg-offset-3 {
        margin-left: 25%
    }

    .col-lg-offset-2 {
        margin-left: 16.66666667%
    }

    .col-lg-offset-1 {
        margin-left: 8.33333333%
    }

    .col-lg-offset-0 {
        margin-left: 0
    }
}

.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear
}

.fade.in {
    opacity: 1
}

.collapse {
    display: none;
    visibility: hidden
}

.collapse.in {
    display: block;
    visibility: visible
}

tr.collapse.in {
    display: table-row
}

tbody.collapse.in {
    display: table-row-group
}

.collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition-property: height, visibility;
    -o-transition-property: height, visibility;
    transition-property: height, visibility;
    -webkit-transition-duration: .35s;
    -o-transition-duration: .35s;
    transition-duration: .35s;
    -webkit-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    transition-timing-function: ease
}

.embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden
}

.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    border: 0
}

.embed-responsive.embed-responsive-16by9 {
    padding-bottom: 56.25%
}

.embed-responsive.embed-responsive-4by3 {
    padding-bottom: 75%
}

.close {
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .2;
    filter: alpha(opacity=20)
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: .5;
    filter: alpha(opacity=50)
}

button.close {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none
}

.modal-open {
    overflow: hidden
}

.modal {
    display: none;
    overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    -webkit-overflow-scrolling: touch;
    outline: 0
}

.modal.fade .modal-dialog {
    -webkit-transform: translate(0, -25%);
    -ms-transform: translate(0, -25%);
    -o-transform: translate(0, -25%);
    transform: translate(0, -25%);
    -webkit-transition: -webkit-transform 0.3s ease-out;
    -o-transition: -o-transform 0.3s ease-out;
    transition: transform 0.3s ease-out
}

.modal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0)
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px
}

.modal-content {
    position: relative;
    background-color: #fff;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    outline: 0
}

.modal-backdrop {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    background-color: #000
}

.modal-backdrop.fade {
    opacity: 0;
    filter: alpha(opacity=0)
}

.modal-backdrop.in {
    opacity: .5;
    filter: alpha(opacity=50)
}

.modal-header {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
    min-height: 16.42857143px
}

.modal-header .close {
    margin-top: -2px
}

.modal-title {
    margin: 0;
    line-height: 1.42857143
}

.modal-body {
    position: relative;
    padding: 15px
}

.modal-footer {
    padding: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5
}

.modal-footer .btn+.btn {
    margin-left: 5px;
    margin-bottom: 0
}

.modal-footer .btn-group .btn+.btn {
    margin-left: -1px
}

.modal-footer .btn-block+.btn-block {
    margin-left: 0
}

.modal-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll
}

@media (min-width: 768px) {
    .modal-dialog {
        width: 600px;
        margin: 30px auto
    }

    .modal-content {
        -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5)
    }

    .modal-sm {
        width: 300px
    }
}

@media (min-width: 992px) {
    .modal-lg {
        width: 900px
    }
}

.clearfix:before,
.clearfix:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after,
.modal-footer:before,
.modal-footer:after {
    content: " ";
    display: table
}

.clearfix:after,
.container:after,
.container-fluid:after,
.row:after,
.modal-footer:after {
    clear: both
}

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.pull-right {
    float: right !important
}

.pull-left {
    float: left !important
}

.hide {
    display: none !important
}

.show {
    display: block !important
}

.invisible {
    visibility: hidden
}

.text-hide {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0
}

.hidden {
    display: none !important;
    visibility: hidden !important
}

.affix {
    position: fixed
}

@-ms-viewport {
    width: device-width
}

.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
    display: none !important
}

.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
    display: none !important
}

@media (max-width: 767px) {
    .visible-xs {
        display: block !important
    }

    table.visible-xs {
        display: table
    }

    tr.visible-xs {
        display: table-row !important
    }

    th.visible-xs,
    td.visible-xs {
        display: table-cell !important
    }
}

@media (max-width: 767px) {
    .visible-xs-block {
        display: block !important
    }
}

@media (max-width: 767px) {
    .visible-xs-inline {
        display: inline !important
    }
}

@media (max-width: 767px) {
    .visible-xs-inline-block {
        display: inline-block !important
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .visible-sm {
        display: block !important
    }

    table.visible-sm {
        display: table
    }

    tr.visible-sm {
        display: table-row !important
    }

    th.visible-sm,
    td.visible-sm {
        display: table-cell !important
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .visible-sm-block {
        display: block !important
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .visible-sm-inline {
        display: inline !important
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .visible-sm-inline-block {
        display: inline-block !important
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .visible-md {
        display: block !important
    }

    table.visible-md {
        display: table
    }

    tr.visible-md {
        display: table-row !important
    }

    th.visible-md,
    td.visible-md {
        display: table-cell !important
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .visible-md-block {
        display: block !important
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .visible-md-inline {
        display: inline !important
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .visible-md-inline-block {
        display: inline-block !important
    }
}

@media (min-width: 1200px) {
    .visible-lg {
        display: block !important
    }

    table.visible-lg {
        display: table
    }

    tr.visible-lg {
        display: table-row !important
    }

    th.visible-lg,
    td.visible-lg {
        display: table-cell !important
    }
}

@media (min-width: 1200px) {
    .visible-lg-block {
        display: block !important
    }
}

@media (min-width: 1200px) {
    .visible-lg-inline {
        display: inline !important
    }
}

@media (min-width: 1200px) {
    .visible-lg-inline-block {
        display: inline-block !important
    }
}

@media (max-width: 767px) {
    .hidden-xs {
        display: none !important
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .hidden-sm {
        display: none !important
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .hidden-md {
        display: none !important
    }
}

@media (min-width: 1200px) {
    .hidden-lg {
        display: none !important
    }
}

.visible-print {
    display: none !important
}

@media print {
    .visible-print {
        display: block !important
    }

    table.visible-print {
        display: table
    }

    tr.visible-print {
        display: table-row !important
    }

    th.visible-print,
    td.visible-print {
        display: table-cell !important
    }
}

.visible-print-block {
    display: none !important
}

@media print {
    .visible-print-block {
        display: block !important
    }
}

.visible-print-inline {
    display: none !important
}

@media print {
    .visible-print-inline {
        display: inline !important
    }
}

.visible-print-inline-block {
    display: none !important
}

@media print {
    .visible-print-inline-block {
        display: inline-block !important
    }
}

@media print {
    .hidden-print {
        display: none !important
    }
}

/*! Animate.css - http://daneden.me/animate Licensed under the MIT license - http://opensource.org/licenses/MIT Copyright (c) 2014 Daniel Eden */
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s
}

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

    100% {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
}

@-webkit-keyframes fadeInUpHex {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }

    40% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }

    70% {
        -webkit-transform: scale(1, 1.3);
        transform: scale(1, 1.3)
    }

    100% {
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInUpHex {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }

    40% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }

    70% {
        -webkit-transform: scale(1, 1.3);
        transform: scale(1, 1.3)
    }

    100% {
        -webkit-transform: none;
        transform: none
    }
}

.fadeInUpHex {
    -webkit-animation-name: fadeInUpHex;
    animation-name: fadeInUpHex
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown
}

@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3)
    }

    50% {
        opacity: 1
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3)
    }

    50% {
        opacity: 1
    }
}

.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft
}

@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown
}

@keyframes wobble {
    from {
        transform: none
    }

    35% {
        transform: translate3d(8px, 0, 0) rotate3d(0, 0, 1, 3deg)
    }

    70% {
        transform: translate3d(-7px, 0, 0) rotate3d(0, 0, 1, -3deg)
    }

    to {
        transform: none
    }
}

.wobble {
    animation-name: wobble
}

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0
}

.slick-list:focus {
    outline: none
}

.slick-list.dragging {
    cursor: pointer
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block
}

.slick-track:before,
.slick-track:after {
    display: table;
    content: ''
}

.slick-track:after {
    clear: both
}

.slick-loading .slick-track {
    visibility: hidden
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px
}

[dir='rtl'] .slick-slide {
    float: right
}

.slick-slide img {
    display: block
}

.slick-slide.slick-loading img {
    display: none
}

.slick-slide.dragging img {
    pointer-events: none
}

.slick-initialized .slick-slide {
    display: block
}

.slick-loading .slick-slide {
    visibility: hidden
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent
}

.slick-arrow.slick-hidden {
    display: none
}

.slick-loading .slick-list {
    background: #fff url("../assets/ajax-loader-e7b44c86b050fca766a96ddac2d0932af0126da6f2305280342d909168dcce6b.gif") center center no-repeat
}

@font-face {
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;
    src: url("../assets/fonts/slick-06d80cf01250132fd1068701108453feee68854b750d22c344ffc0de395e1dcb.eot");
    src: url("../assets/fonts/slick-06d80cf01250132fd1068701108453feee68854b750d22c344ffc0de395e1dcb.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/slick-26726bac4060abb1226e6ceebc1336e84930fe7a7af1b3895a109d067f5b5dcc.woff") format("woff"), url("../assets/fonts/slick-37bc99cfdbbc046193a26396787374d00e7b10d3a758a36045c07bd8886360d2.ttf") format("truetype"), url("../assets/fonts/slick-12459f221a0b787bf1eaebf2e4c48fca2bd9f8493f71256c3043e7a0c7e932f6.svg#slick") format("svg")
}

.slick-prev,
.slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
    color: transparent;
    outline: none;
    background: transparent
}

.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
    opacity: 1
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
    opacity: .25
}

.slick-prev:before,
.slick-next:before {
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;
    opacity: .75;
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.slick-prev {
    left: -25px
}

[dir='rtl'] .slick-prev {
    right: -25px;
    left: auto
}

.slick-prev:before {
    content: '←'
}

[dir='rtl'] .slick-prev:before {
    content: '→'
}

.slick-next {
    right: -25px
}

[dir='rtl'] .slick-next {
    right: auto;
    left: -25px
}

.slick-next:before {
    content: '→'
}

[dir='rtl'] .slick-next:before {
    content: '←'
}

.slick-dotted.slick-slider {
    margin-bottom: 30px
}

.slick-dots {
    position: absolute;
    bottom: -25px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center
}

.slick-dots li {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer
}

.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent
}

.slick-dots li button:hover,
.slick-dots li button:focus {
    outline: none
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
    opacity: 1
}

.slick-dots li button:before {
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '•';
    text-align: center;
    opacity: .25;
    color: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.slick-dots li.slick-active button:before {
    opacity: .75;
    color: black
}

@-webkit-keyframes bounceLike {
    0% {
        transform: scale(1, 1)
    }

    30% {
        transform: scale(1.6, 1.6)
    }

    50% {
        transform: scale(1.1, 1.1)
    }

    60% {
        transform: scale(1.2, 1.2)
    }

    70% {
        transform: scale(1, 1)
    }

    100% {
        transform: scale(1, 1)
    }
}

@keyframes bounceLike {
    0% {
        transform: scale(1, 1)
    }

    30% {
        transform: scale(1.6, 1.6)
    }

    50% {
        transform: scale(1.1, 1.1)
    }

    60% {
        transform: scale(1.2, 1.2)
    }

    70% {
        transform: scale(1, 1)
    }

    100% {
        transform: scale(1, 1)
    }
}

@-webkit-keyframes spinner {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes spinner {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@-ms-keyframes beforeAfter {
    0% {
        width: 0
    }

    100% {
        width: 50%
    }
}

@-o-keyframes beforeAfter {
    0% {
        width: 0
    }

    100% {
        width: 50%
    }
}

@-moz-keyframes beforeAfter {
    0% {
        width: 0
    }

    100% {
        width: 50%
    }
}

@-webkit-keyframes beforeAfter {
    0% {
        width: 0
    }

    100% {
        width: 50%
    }
}

@keyframes beforeAfter {
    0% {
        width: 0
    }

    100% {
        width: 50%
    }
}

@-webkit-keyframes love {
    100% {
        background-position: -9636px
    }
}

@keyframes love {
    100% {
        background-position: -9636px
    }
}

#page {
    min-height: 100%;
    height: 100%;
    opacity: 1;
    -webkit-transform: translate(0);
    -webkit-transition: all 200ms ease-in-out 0
}

#transition-wrapper {
    position: fixed;
    bottom: -2000px;
    left: -2000px;
    right: -2000px;
    -webkit-pointer-events: none;
    pointer-events: none
}

#transition-color {
    width: 4000px;
    height: 4000px;
    margin: 0 auto -2px auto;
    border-radius: 50%;
    -webkit-transform: translate3d(0, 0, 0) scale3d(0.001, 0.001, 1);
    transform: translate3d(0, 0, 0) scale3d(0.001, 0.001, 1);
    -webkit-perspective: 1000px;
    perspective: 1000px;
    -webkit-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out
}

body.transitioning #transition-color {
    -webkit-transition: all 700ms ease-in-out 250ms;
    transition: all 700ms ease-in-out 250ms;
    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
}

#careers #careersGridWrapper {
    width: 100%;
    position: relative;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transform: none;
    transform: none
}

#careers #careersGridWrapper>.container {
    width: 100%;
    max-width: 1280px;
    border-top: 1px solid #EDF0F5;
    border-left: 1px solid #EDF0F5;
    background-color: #fff
}

#careers #hero .tagline h1 {
    margin-bottom: 10px
}

#careers #hero .tagline p {
    font-size: 26px;
    font-weight: 300;
    color: #B1EDFF;
    line-height: 1.2;
    margin: 0
}

#careers #heroBackground {
    height: calc(100% + 317px)
}

#careers #careerGrid {
    padding: 0
}

#careers #careerGrid .grid-item {
    height: 317px;
    border-right: 1px solid #EDF0F5;
    border-bottom: 1px solid #EDF0F5
}

#careers #careerGrid .grid-item span.intern {
    position: absolute;
    top: 40px;
    left: 40px;
    font-size: 13px;
    font-weight: 500;
    color: #B7C2C9;
    line-height: 1;
    margin: 0;
    letter-spacing: 1px;
    text-transform: uppercase
}

#careers #careerGrid .grid-item h2 {
    position: absolute;
    top: 218px;
    left: 40px;
    font-size: 20px;
    font-weight: 600;
    color: #16364F;
    line-height: 30px;
    margin: 0;
    width: 220px
}

#careers #careerGrid .grid-item .view {
    display: block;
    position: absolute;
    padding: 0 40px 0 30px;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75px;
    line-height: 85px;
    font-weight: 400;
    font-size: 16px;
    color: #00B5EC;
    z-index: 999;
    transition: all .2s ease-in
}

#careers #careerGrid .grid-item .view svg {
    position: relative;
    top: 3px;
    left: 10px
}

#careers #careerGrid .grid-item .view svg polygon.st0 {
    fill: #00B5EC;
    stroke: #00B5EC;
    transition: all .2s ease-in
}

#careers #careerGrid .grid-item .view:after {
    height: 0;
    width: 100%;
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
    top: auto;
    left: 0;
    bottom: 0;
    right: 0;
    height: 0;
    width: 100%;
    background-color: #fff200;
    transition: all .2s ease-in-out
}

#careers #careerGrid .grid-item img {
    position: absolute;
    top: 110px;
    left: 40px;
    margin: 0;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

#careers #careerGrid .grid-item img.top_o {
    top: 75px
}

#careers #careerGrid .grid-item img.hon {
    display: inline
}

#careers #careerGrid .grid-item img.hover {
    display: none
}

#careers #careerGrid .grid-item:hover .view {
    color: #000
}

#careers #careerGrid .grid-item:hover .view svg polygon.st0 {
    fill: #000000;
    stroke: #000000
}

#careers #careerGrid .grid-item:hover .view:after {
    height: 65px
}

#careers #careerGrid .grid-item:hover img.hon {
    display: none
}

#careers #careerGrid .grid-item:hover img.hover {
    display: inline
}

#careers #careerGrid .grid-item-large h2 {
    top: 115px;
    left: 40px;
    font-size: 34px;
    line-height: 42px
}

#careers #careerGrid .grid-item-large img {
    position: absolute;
    top: 90px;
    right: 90px;
    left: auto;
    margin: 0
}

@media screen and (max-width: 991px) {
    #careers #careerGrid .grid-item span.intern {
        top: 40px;
        left: 100px
    }

    #careers #careerGrid .grid-item h2 {
        top: 218px;
        left: 100px
    }

    #careers #careerGrid .grid-item img {
        top: 110px;
        left: 100px
    }

    #careers #careerGrid .grid-item img.top_o {
        top: 75px
    }

    #careers #careerGrid .grid-item-large h2 {
        top: 115px;
        left: 100px
    }

    #careers #careerGrid .grid-item-large img {
        top: 90px;
        right: 150px;
        left: auto
    }
}

@media screen and (max-width: 767px) {
    #careers #careerGrid .grid-item span.intern {
        left: 40px
    }

    #careers #careerGrid .grid-item h2 {
        top: 115px;
        font-size: 26px;
        left: 40px;
        line-height: 38px
    }

    #careers #careerGrid .grid-item img {
        position: absolute;
        top: 90px;
        right: 90px;
        left: auto;
        margin: 0
    }
}

@media screen and (max-width: 500px) {
    #careers #careerGrid .grid-item h2 {
        font-size: 26px;
        line-height: 30px;
        width: 150px
    }

    #careers #careerGrid .grid-item img {
        right: 40px;
        left: auto
    }
}

.floating-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    padding: 0;
    z-index: 99998;
    transform: translate3d(0, 0, 0);
    transition: all 0.5s ease
}

.floating-nav.is-hidden {
    transform: translate3d(0, -110px, 0)
}

.floating-nav__inner {
    height: 75px;
    width: 100%;
    padding: 0 0;
    background: #fff;
    box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.2)
}

.is-hidden .floating-nav__inner {
    box-shadow: 0 0 0 0 transparent
}

.floating-nav__inner .menuheroright ul li a {
    color: #00b5ec
}

.floating-nav__logo {
    position: absolute;
    left: 30px;
    top: 20px;
    z-index: 999999999;
    cursor: pointer;
    transition: all 0.3s ease
}

@media (min-width: 1280px) {
    .floating-nav__logo {
        top: 20px;
        left: 50%;
        margin-left: -610px
    }
}

.floating-nav__logo a {
    display: inline-block;
    transition: all .3s ease
}

.floating-nav__logo a img,
.floating-nav__logo a svg {
    width: 28px;
    height: 35px;
    max-height: 35px;
    position: relative;
    top: 0;
    vertical-align: middle
}

.floating-nav__logo a #H,
.floating-nav__logo a #D,
.floating-nav__logo a #i {
    fill: white !important
}

.floating-nav__logo a #two {
    transition: all .3s ease
}

.floating-nav__logo a:hover #two {
    fill: white
}

.floating-nav__mobile-nav {
    display: inline-block;
    float: right;
    line-height: 90px;
    position: relative;
    top: 6px
}

@media screen and (min-width: 1025px) {
    .floating-nav__mobile-nav {
        display: none
    }
}

.floating-nav__mobile-nav button {
    width: 40px;
    height: 30px;
    background: transparent;
    border: 0;
    outline: 0
}

.floating-nav__mobile-nav button.is-active .icon::before {
    transform: translate3d(0, 0, 0) rotate(45deg)
}

.floating-nav__mobile-nav button.is-active .icon::after {
    transform: translate3d(0, 0, 0) rotate(-45deg)
}

.floating-nav__mobile-nav ul {
    display: none;
    position: absolute;
    top: 70px;
    right: 0;
    bottom: auto;
    left: auto;
    background: white;
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2);
    padding: 15px;
    line-height: 2;
    width: 160px;
    text-align: right
}

.floating-nav__mobile-nav ul.is-open {
    display: block
}

.floating-nav__mobile-nav ul li a {
    display: inline-block;
    padding: 0;
    font-family: "franklin-gothic-urw", sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #000000;
    letter-spacing: 0;
    text-decoration: none;
    position: relative
}

.floating-nav .trigger {
    width: 31px;
    height: 15px;
    position: absolute;
    top: 29px;
    right: 30px;
    bottom: auto;
    left: auto;
    z-index: 999999999;
    cursor: pointer;
    transition: all 0.3s ease-in-out
}

@media (min-width: 992px) {
    .floating-nav .trigger {
        width: 35px
    }
}

@media (min-width: 1280px) {
    .floating-nav .trigger {
        right: 50%;
        margin-right: -600px
    }
}

.floating-nav .trigger span {
    display: block;
    width: 100%;
    height: 1px;
    background: #00b5ec;
    margin: 0 0 6px 0;
    transition: all .2s ease-in-out;
    position: absolute
}

.floating-nav .trigger span:first-child {
    top: 0;
    left: 0
}

.floating-nav .trigger span:nth-child(2) {
    top: 7px;
    left: 0
}

.floating-nav .trigger span:last-child {
    top: 14px;
    left: 0
}

.floating-nav .trigger.on {
    top: 19px;
    z-index: 999999999;
    position: fixed;
    background-color: #00b5ec;
    height: 35px;
    border-radius: 50%
}

@media (min-width: 1280px) {
    .floating-nav .trigger.on {
        top: 19px
    }
}

.floating-nav .trigger.on span {
    background-color: #fff
}

.floating-nav .trigger.on span:first-child {
    transform: rotate(45deg);
    width: 20px;
    left: 8px;
    top: 17px
}

.floating-nav .trigger.on span:nth-child(2) {
    transform: rotate(-45deg);
    width: 20px;
    left: 8px;
    top: 17px
}

.floating-nav .trigger.on span:last-child {
    transform: rotate(45deg);
    width: 20px;
    left: 8px;
    top: 17px
}

.floating-nav .trigger.social {
    background-color: #fff
}

.floating-nav .trigger.social span:first-child {
    background-color: #00b5ec
}

.floating-nav .trigger.social span:nth-child(2) {
    background-color: #00b5ec
}

.floating-nav .trigger.social span:last-child {
    background-color: #00b5ec
}

.container-trigger {
    display: none
}

.trigger {
    width: 31px;
    height: 15px;
    position: absolute;
    top: 29px;
    right: 30px;
    bottom: auto;
    left: auto;
    z-index: 99999999;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    -webkit-backface-visibility: hidden
}

@media (min-width: 992px) {
    .trigger {
        width: 35px
    }
}

@media (min-width: 1280px) {
    .trigger {
        right: 50%;
        margin-right: -600px
    }
}

.trigger span {
    display: block;
    width: 100%;
    height: 1px;
    background: #fff;
    margin: 0 0 6px 0;
    transition: all .2s ease-in-out;
    position: absolute
}

.trigger span:first-child {
    top: 0;
    left: 0
}

.trigger span:nth-child(2) {
    top: 7px;
    left: 0
}

.trigger span:last-child {
    top: 14px;
    left: 0
}

.trigger.is-mov-pos {
    transform: translate3d(0, -100px, 0);
    position: fixed;
    z-index: -99
}

.trigger.is-mov {
    position: fixed;
    z-index: 99999999;
    transform: translate3d(0, 0, 0)
}

.trigger.is-mov span {
    background: #FF2851
}

.trigger.on {
    top: 19px;
    z-index: 999999999;
    position: fixed;
    background-color: #00b5ec;
    height: 35px;
    border-radius: 50%;
    width: 35px
}

@media (min-width: 992px) {
    .trigger.on {
        position: fixed
    }
}

.trigger.on span:first-child {
    transform: rotate(45deg);
    width: 20px;
    left: 8px;
    top: 17px
}

.trigger.on span:nth-child(2) {
    transform: rotate(-45deg);
    width: 20px;
    left: 8px;
    top: 17px
}

.trigger.on span:last-child {
    transform: rotate(45deg);
    width: 20px;
    left: 8px;
    top: 17px
}

.trigger.social {
    background-color: #fff
}

.trigger.social span:first-child {
    background-color: #00b5ec
}

.trigger.social span:nth-child(2) {
    background-color: #00b5ec
}

.trigger.social span:last-child {
    background-color: #00b5ec
}

.trigger.dissapear {
    top: 10px;
    opacity: 0
}

.trigger-b {
    width: 31px;
    height: 15px;
    position: absolute;
    top: 29px;
    right: 30px;
    bottom: auto;
    left: auto;
    z-index: 999999999;
    cursor: pointer;
    transition: all 0.3s ease-in-out
}

@media (min-width: 992px) {
    .trigger-b {
        width: 35px;
        top: 29px
    }
}

@media (min-width: 1280px) {
    .trigger-b {
        right: 50%;
        margin-right: -600px;
        top: 29px
    }
}

.trigger-b span {
    display: block;
    width: 100%;
    height: 1px;
    background: #00b5ec;
    margin: 0 0 6px 0;
    transition: all .2s ease-in-out;
    position: absolute
}

.trigger-b span:first-child {
    top: 0;
    left: 0
}

.trigger-b span:nth-child(2) {
    top: 7px;
    left: 0
}

.trigger-b span:last-child {
    top: 14px;
    left: 0
}

.trigger-b.on {
    top: 20px;
    z-index: 999999999;
    position: fixed;
    background-color: #00b5ec;
    height: 35px;
    border-radius: 50%
}

@media (min-width: 1280px) {
    .trigger-b.on {
        top: 20px
    }
}

.trigger-b.on span {
    background-color: #fff
}

.trigger-b.on span:first-child {
    transform: rotate(45deg);
    width: 20px;
    left: 8px;
    top: 17px
}

.trigger-b.on span:nth-child(2) {
    transform: rotate(-45deg);
    width: 20px;
    left: 8px;
    top: 17px
}

.trigger-b.on span:last-child {
    transform: rotate(45deg);
    width: 20px;
    left: 8px;
    top: 17px
}

.trigger-b.social {
    background-color: #fff
}

.trigger-b.social span:first-child {
    background-color: #00b5ec
}

.trigger-b.social span:nth-child(2) {
    background-color: #00b5ec
}

.trigger-b.social span:last-child {
    background-color: #00b5ec
}

.menu {
    background: #fff;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    z-index: 99999;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    transition: background-color 0.5s ease
}

@media (max-width: 1025px) {
    .menu {
        height: 100vh;
        overflow-y: scroll
    }
}

.menu .menuwrapper {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    height: 0
}

.menu #logoblue {
    position: absolute;
    top: 20px;
    right: 0;
    bottom: 0;
    left: 30px;
    max-height: 35px;
    width: 28px;
    transition: all 0.5s ease;
    opacity: 1
}

@media (min-width: 1280px) {
    .menu #logoblue {
        left: 50%;
        margin-left: -610px;
        width: 28px
    }
}

.menu #logowhite {
    opacity: 0;
    position: absolute;
    top: 35px;
    right: 0;
    bottom: 0;
    left: 30px;
    max-height: 35px;
    transition: all 0.5s ease
}

@media (min-width: 1280px) {
    .menu #logowhite {
        top: 35px;
        left: 50%;
        margin-left: -610px
    }
}

.menu .socialbig {
    display: block
}

@media (max-width: 992px) {
    .menu .socialbig {
        display: none
    }
}

.menu h5 {
    font-family: "franklin-gothic-urw", sans-serif;
    font-weight: 100;
    color: #9B9B9B;
    font-size: 14px;
    line-height: 14px;
    margin-top: 155px;
    margin-bottom: 30px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-left: 5px;
    transition: all 0.5s ease
}

.menu h5.social {
    margin-left: 15px
}

.menu h5.links {
    margin-left: -50px
}

.menu h5 .dash {
    width: 19px;
    height: 1px;
    background-color: #9B9B9B;
    display: inline-block;
    vertical-align: middle;
    transition: all 0.5s ease
}

.menu h5 .text {
    display: inline-block;
    margin-left: 5px
}

.menu .social-links {
    position: relative;
    float: left
}

.menu .social-links>a {
    display: inline-block;
    padding: 40px 28px 0 0;
    transition: opacity 150ms ease-in-out
}

.menu .social-links>a>img {
    max-height: 30px
}

.menu .social-links>a:first-child {
    padding-left: 17px
}

.menu .social-links>a:last-child {
    padding-right: 0
}

.menu .social-links>a:hover {
    opacity: .5
}

.menu ul {
    list-style-type: none;
    padding: 0;
    text-align: left;
    position: absolute;
    top: 170px;
    right: auto;
    bottom: auto;
    margin: 90px 0 0 0
}

@media (max-width: 1025px) {
    .menu ul {
        top: 0;
        position: relative;
        float: left;
        width: 100%;
        margin-left: 0
    }
}

.menu ul li {
    position: relative
}

.menu ul li a {
    text-align: left;
    font-family: 'Heebo', sans-serif;
    font-weight: 100;
    font-size: 48px;
    line-height: 65px;
    color: #353535;
    text-decoration: none;
    transition: all 0.5s ease
}

.menu ul li a:hover {
    text-decoration: none;
    color: #353535
}

@media (max-width: 1025px) {
    .menu ul li a {
        font-size: 35px;
        line-height: 50px
    }
}

.menu ul.social {
    margin: 100px 0 0 15px
}

.menu ul.social li a {
    font-family: "franklin-gothic-urw", sans-serif;
    font-weight: 100;
    font-size: 30px;
    line-height: 30px;
    display: block;
    height: 60px
}

.menu ul.social li a:hover {
    opacity: 1 !important
}

.menu ul.links {
    margin: 140px 0 0 0
}

@media (min-width: 992px) {
    .menu ul.links {
        margin: 48px 0 0 0
    }
}

.menu ul.links li {
    margin-top: 20px;
    margin-left: 13px
}

@media (min-width: 992px) {
    .menu ul.links li {
        margin-top: 20px;
        margin-left: -50px
    }
}

.menu ul.links li a {
    font-family: "franklin-gothic-urw", sans-serif;
    font-weight: 100;
    font-size: 47px;
    line-height: 50px;
    width: 101%;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 51%, #FFF100 50%);
    background-position: -0% 0;
    background-size: 200% auto;
    transition: background-position 0.2s ease-out
}

@media (min-width: 992px) {
    .menu ul.links li a {
        font-size: 73px;
        line-height: 77px
    }
}

.menu ul.links li a.fi {
    padding-right: 4px
}

.menu ul.links li a.se {
    padding-right: 10px
}

.menu ul.links li a.th {
    padding-right: 8px
}

@media (min-width: 992px) {
    .menu ul.links li a:hover {
        background-position: -97.99% 0
    }
}

.menu ul.contact {
    margin: 30px 0 0 13px
}

@media (min-width: 992px) {
    .menu ul.contact {
        margin: 78px 0 0 0
    }
}

.menu ul.contact li {
    margin-top: 20px
}

.menu ul.contact li a {
    font-family: "franklin-gothic-urw", sans-serif;
    font-weight: 100;
    font-size: 20px;
    line-height: 20px;
    width: 101%;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 51%, #FFF100 50%);
    background-position: -0% 0;
    background-size: 200% auto;
    transition: background-position 0.2s ease-out;
    padding-right: 4px
}

.menu ul.contact li a.fi {
    padding-right: 6px
}

.menu ul.contact li a.se {
    padding-right: 6px
}

.menu ul.contact li a:hover {
    background-position: -97.99% 0
}

.menu.twitter {
    background-color: #55ACEE
}

.menu.twitter #logoblue {
    opacity: 0
}

.menu.twitter #logowhite {
    opacity: 1
}

.menu.twitter h5 {
    color: #fff !important
}

.menu.twitter h5 .dash {
    background-color: #fff !important
}

.menu.twitter ul li a {
    color: #fff !important
}

.menu.twitter ul.social li a {
    opacity: 0.3
}

.menu.facebook {
    background-color: #3B5998
}

.menu.facebook #logoblue {
    opacity: 0
}

.menu.facebook #logowhite {
    opacity: 1
}

.menu.facebook h5 {
    color: #fff !important
}

.menu.facebook h5 .dash {
    background-color: #fff !important
}

.menu.facebook ul li a {
    color: #fff !important
}

.menu.facebook ul.social li a {
    opacity: 0.3
}

.menu.dribbble {
    background-color: #EA4C89
}

.menu.dribbble #logoblue {
    opacity: 0
}

.menu.dribbble #logowhite {
    opacity: 1
}

.menu.dribbble h5 {
    color: #fff !important
}

.menu.dribbble h5 .dash {
    background-color: #fff !important
}

.menu.dribbble ul li a {
    color: #fff !important
}

.menu.dribbble ul.social li a {
    opacity: 0.3
}

.menu.instagram {
    background-color: #7F60A9
}

.menu.instagram #logoblue {
    opacity: 0
}

.menu.instagram #logowhite {
    opacity: 1
}

.menu.instagram h5 {
    color: #fff !important
}

.menu.instagram h5 .dash {
    background-color: #fff !important
}

.menu.instagram ul li a {
    color: #fff !important
}

.menu.instagram ul.social li a {
    opacity: 0.3
}

.menu.vimeo {
    background-color: #162221
}

.menu.vimeo #logoblue {
    opacity: 0
}

.menu.vimeo #logowhite {
    opacity: 1
}

.menu.vimeo h5 {
    color: #fff !important
}

.menu.vimeo h5 .dash {
    background-color: #fff !important
}

.menu.vimeo ul li a {
    color: #fff !important
}

.menu.vimeo ul.social li a {
    opacity: 0.3
}

html,
body {
    height: 100%;
    min-height: 100%
}

body {
    overflow-x: hidden;
    overflow-y: scroll;
    font-family: "franklin-gothic-urw", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative
}

body.nooverflow {
    overflow-y: hidden;
    position: fixed;
    width: 100%
}

body #heroBackground {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100%);
    background-color: #00b5ec;
    transition: all .2s ease-in-out
}

body .preloader {
    content: '';
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 99999
}

body .preloader .bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: 0;
    height: 3px;
    -webkit-transition: width 0.7s cubic-bezier(0, 0.52, 1, 0.28) 0.3s;
    transition: width 0.7s cubic-bezier(0, 0.52, 1, 0.28) 0.3s
}

body .preloader .bar:after {
    content: '';
    position: absolute;
    display: block;
    width: 3px;
    height: 3px;
    top: 0;
    left: auto;
    right: 0;
    bottom: 0
}

body#index {
    background: white
}

body#index .preloader {
    background: #00b5ec
}

body#index .preloader .bar {
    background: #fff200
}

body#index .preloader .bar:after {
    box-shadow: 0 0 4px #fff200, 0 0 4px #fff200, 0 0 4px #fff200
}

body[id*="case-study-page"] #page {
    max-width: initial !important;
    overflow-x: hidden;
    overflow-y: hidden;
    height: auto
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "franklin-gothic-urw", sans-serif
}

.container {
    max-width: 1280px
}

#page {
    max-width: 1280px;
    margin: 0 auto
}

#heroWrapper {
    min-height: 100%;
    padding-left: 0;
    padding-right: 0;
    position: absolute;
    top: 0;
    width: 100%;
    height: calc(100vh + 30px);
    background: rgba(0, 181, 236, 0.5);
    background: -moz-linear-gradient(top, #00b5ec 50%, rgba(125, 185, 232, 0.8) 100%);
    background: -webkit-linear-gradient(top, #00b5ec 50%, rgba(125, 185, 232, 0.8) 100%);
    background: linear-gradient(to bottom, #00b5ec 50%, rgba(125, 185, 232, 0.8) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00b5ec', endColorstr='#cc7db9e8', GradientType=0);
    z-index: 100;
    transition: opacity 1s, z-index 2s
}

#heroWrapper .overlay {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    opacity: 0;
    transition: opacity .2s ease-in-out
}

#heroWrapper .overlay.animate {
    opacity: 1
}

#heroWrapper .overlay>span {
    position: relative;
    top: 50%;
    display: block;
    -webkit-transform: translate3d(0, -50%, 0) scale(0.1, 0.1);
    transform: translate3d(0, -50%, 0) scale(0.1, 0.1);
    color: white;
    font-size: 52px;
    font-weight: 300;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

#heroWrapper .overlay>span.animate-scale {
    -webkit-transform: translate3d(0, -50%, 0) scale(1, 1);
    transform: translate3d(0, -50%, 0) scale(1, 1)
}

#heroWrapper h1 {
    width: 100%;
    text-align: center;
    margin: auto;
    padding: 0 10%;
    transition: all 0.5s
}

#heroWrapper h2 {
    width: 100%;
    text-align: center;
    margin: auto;
    padding: 0 10%;
    transition: all 0.5s
}

#heroWrapper.header-out {
    opacity: 0;
    z-index: 1
}

#heroWrapper.header-out-transition {
    transition: opacity .3s, z-index 0.01s
}

#hero {
    background: transparent;
    min-height: 100%;
    padding: 70px 0 85px
}

#hero>.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0;
    opacity: 1;
    transition: all 1s ease-in-out
}

#hero .top-links {
    position: relative;
    z-index: 999
}

#hero .overlays-wrapper {
    opacity: 1;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: all .2s ease-in-out;
    background-color: transparent;
    z-index: -10;
    pointer-events: none
}

#hero .overlays-wrapper.show {
    display: block
}

#hero .logo a>img {
    max-height: 35px;
    margin-top: 9px
}

@media (min-width: 992px) {
    #hero .logo a>img {
        margin-top: 0
    }
}

#hero .social {
    text-align: right;
    overflow: hidden
}

#hero .social>a {
    display: inline-block;
    padding: 0 15px
}

#hero .social>a>img {
    max-height: 31px
}

#hero .social>a:last-child {
    padding-right: 0
}

#hero .tagline {
    position: absolute;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    padding-left: 0;
    transition: all 0.5s
}

@media screen and (max-width: 991px) {
    #hero .tagline {
        top: 45%
    }
}

#hero .tagline div {
    padding-left: 0;
    padding-right: 0
}

#hero .tagline h1 {
    font-size: 62px;
    font-weight: 300;
    color: white;
    line-height: 1.2;
    margin-bottom: 74px
}

@media screen and (max-width: 991px) {
    #hero .tagline h1 {
        margin: 0 0 30px 0 !important;
        font-size: 42px
    }
}

#hero .tagline h2 {
    font-size: 28px;
    font-weight: 300;
    color: #b1edff
}

#hero .tagline h2 a {
    color: white;
    font-weight: 500;
    text-decoration: none;
    -webkit-transition: color 0.2s ease-in-out, transform 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: color 0.1s ease-in-out, transform 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    display: inline-block;
    margin-left: 7px
}

#hero .tagline h2 a svg {
    display: inline-block;
    position: relative;
    top: 8px;
    left: 6px;
    width: 27px;
    height: 27px
}

@media (min-width: 992px) {
    #hero .tagline h2 a svg {
        width: 32px;
        height: 32px
    }
}

#hero .tagline h2 a svg path,
#hero .tagline h2 a svg polygon {
    -webkit-transition: fill .1s ease-in-out;
    transition: fill .1s ease-in-out
}

#hero .tagline h2 a:hover {
    color: #16364f
}

#hero .tagline h2 a:hover svg path,
#hero .tagline h2 a:hover svg polygon {
    fill: #16364f
}

#hero .tagline h2 a:active {
    -webkit-transform: scale(0.9, 0.9);
    transform: scale(0.9, 0.9)
}

#hero .down {
    text-align: center;
    position: absolute;
    top: auto;
    right: auto;
    bottom: 85px;
    left: 15px;
    width: 100%
}

#hero .down span.arrow {
    display: inline-block;
    width: 51px;
    height: 47px;
    position: relative;
    cursor: pointer;
    text-align: center;
    line-height: 45px;
    -webkit-transition: transform .1s ease-in-out;
    transition: transform .1s ease-in-out;
    -webkit-animation: action 1s infinite alternate;
    animation: action 1s infinite alternate
}

#hero .down span.arrow img {
    max-width: 32px
}

@media (min-width: 992px) {
    #hero .down span.arrow img {
        max-width: 40px
    }
}

#hero .down span.arrow img.mobile {
    display: none
}

@media (max-width: 992px) {
    #hero .down span.arrow img.mobile {
        display: block
    }
}

#hero .down span.arrow img.desktop {
    display: block
}

@media (max-width: 992px) {
    #hero .down span.arrow img.desktop {
        display: none
    }
}

#hero .down span.arrow:hover {
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1)
}

@-webkit-keyframes action {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(-10px)
    }
}

@keyframes action {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(-10px)
    }
}

#heroWrapper.header-out #hero .tagline {
    transform: translate3d(0, -62%, 0)
}

#heroWrapper.header-out .logocases,
#heroWrapper.header-out .menuheroright {
    top: 0px;
    opacity: 0
}

#gridWrapper {
    width: 100%;
    position: relative;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transform: none;
    transform: none;
    z-index: 10
}

#gridWrapper>.container {
    width: 100%;
    max-width: 1280px
}

#gridWrapper:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    height: 480px;
    background: #00b5ec;
    transition: background-color .2s ease-in-out
}

#gridWrapper.twitter:before {
    background-color: #55acee
}

#gridWrapper.facebook:before {
    background-color: #3b5998
}

#gridWrapper.dribbble:before {
    background-color: #ea4c89
}

#gridWrapper.instagram:before {
    background-color: #8d6851
}

#gridWrapper.vimeo:before {
    background-color: #162221
}

#gridWrapper.header-out {
    position: relative;
    height: auto
}

.grid {
    padding: 0;
    overflow: hidden;
    transition: all .3s ease-in-out, height .5s ease-in-out;
    position: relative;
    z-index: 9999;
    -webkit-backface-visibility: hidden
}

.grid .dribbble,
.grid .vimeo,
.grid .twitter,
.grid .instagram,
.grid .facebook,
.grid .case-study,
.grid .image {
    height: 240px;
    float: left;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
    background-size: cover
}

.grid .grid-sizer,
.grid .dribbble,
.grid .vimeo,
.grid .twitter,
.grid .instagram,
.grid .facebook,
.grid .image {
    width: 25%
}

.grid .dribbble,
.grid .vimeo,
.grid .instagram,
.grid .image {
    overflow: hidden
}

.grid .dribbble>img,
.grid .vimeo>img,
.grid .instagram>img,
.grid .image>img {
    height: 105%;
    width: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    z-index: 1
}

.grid .dribbble {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.grid .dribbble[data-animated-version]>span {
    width: 100%;
    height: 100%;
    display: block;
    background-color: transparent;
    transition: background-color .3s ease
}

.grid .dribbble[data-animated-version]:hover>span {
    background-color: rgba(0, 0, 0, 0.3)
}

.grid .dribbble[data-animated-version].loaded:hover>span {
    background-color: transparent
}

.grid .dribbble[data-animated-version].loaded:hover::before {
    content: none
}

.grid .dribbble[data-animated-version]:hover::before {
    content: '';
    display: block;
    position: absolute;
    width: 48px;
    height: 48px;
    top: 50%;
    left: 50%;
    margin-top: -24px;
    margin-left: -24px;
    color: white;
    line-height: 48px;
    background: transparent url(/assets/ring-0e2179a99d520b287dd589392af6c977dfebe4364125daa809fc9646b6aaa15e.svg) no-repeat center center;
    background-size: auto auto;
    z-index: 9999
}

.grid .dribbble>img {
    display: none;
    height: auto;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    z-index: 1
}

.grid .dribbble:hover>img {
    display: block
}

.grid .image {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center
}

.grid a.image {
    background-size: cover;
    text-decoration: none
}

.grid a.image>span {
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    opacity: 0;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.grid a.image:hover>span {
    opacity: 1
}

.grid .dribbble {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center
}

.grid .dribbble>span {
    position: relative;
    z-index: 2
}

.grid .instagram>a,
.grid .vimeo>a {
    position: relative;
    z-index: 2
}

.grid .image {
    position: relative
}

.grid .vimeo {
    position: relative
}

.grid .vimeo>img {
    height: 106%;
    top: 0;
    -webkit-transform: translate3d(-50%, -3%, 0);
    transform: translate3d(-50%, -3%, 0)
}

.grid .vimeo a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none
}

.grid .vimeo a>span {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.grid .vimeo a>span:before {
    content: 'Watch on Vimeo';
    display: block;
    height: 55px;
    width: 55px;
    border-radius: 27.5px;
    border: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    z-index: 9999;
    line-height: 55px;
    overflow: hidden;
    text-decoration: none;
    color: white;
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    padding-right: 25px;
    text-align: right;
    -webkit-transform: translate3d(-27.5px, -27.5px, 0);
    transform: translate3d(-27.5px, -27.5px, 0);
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.grid .vimeo a svg {
    position: absolute;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    margin-top: -27.5px;
    margin-left: -27.5px;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.grid .vimeo a svg circle.st0 {
    stroke-width: 1.25px;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.grid .vimeo a svg polygon.st0 {
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.grid .vimeo a:hover>span {
    opacity: 1
}

.grid .vimeo a:hover>span:before {
    width: 200px;
    -webkit-transform: translate3d(-50%, -27.5px, 0);
    transform: translate3d(-50%, -27.5px, 0)
}

.grid .vimeo a:hover svg {
    -webkit-transform: scale(0.7, 0.7) translate3d(-105px, 0, 0);
    transform: scale(0.7, 0.7) translate3d(-105px, 0, 0)
}

.grid .vimeo a:hover svg polygon.st1 {
    fill: black !important;
    position: relative;
    z-index: 999
}

.grid .vimeo a:hover svg circle.st0 {
    fill: white !important
}

.grid .instagram {
    background-color: #fafafa;
    position: relative;
    overflow: hidden
}

.grid .instagram a {
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%
}

.grid .instagram span.icon {
    display: block;
    text-align: center;
    width: 100%;
    height: 100%;
    background-color: rgba(141, 104, 81, 0.7);
    opacity: 1;
    transition: all .2s ease-in-out
}

.grid .instagram span.icon img {
    position: relative;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    width: 36px;
    height: 36px;
    opacity: 1;
    transition: all .2s ease-in-out
}

.grid .instagram span.shadow {
    background: url(data:image/svg+xml;
 base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjkwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjcyIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC44Ii8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.72) 90%, rgba(0, 0, 0, 0.8) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(90%, rgba(0, 0, 0, 0.72)), color-stop(100%, rgba(0, 0, 0, 0.8)));
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.72) 90%, rgba(0, 0, 0, 0.8) 100%);
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.72) 90%, rgba(0, 0, 0, 0.8) 100%);
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.72) 90%, rgba(0, 0, 0, 0.8) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.72) 90%, rgba(0, 0, 0, 0.8) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#cc000000', GradientType=0);
    display: block;
    text-align: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: all .3s ease-in-out
}

.grid .instagram span.shadow span.hashtags {
    display: block;
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    font-size: 14px;
    color: white;
    text-align: left;
    padding: 25px 30px
}

.grid .instagram:hover span.icon {
    opacity: 0
}

.grid .instagram:hover span.icon img {
    opacity: 0;
    top: 0
}

.grid .instagram:hover span.shadow {
    opacity: 1
}

.grid .dribbble {
    background-color: #fafafa;
    position: relative;
    overflow: hidden;
    text-decoration: none
}

.grid .dribbble a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none
}

.grid .dribbble a:hover {
    text-decoration: none
}

.grid .dribbble>.shot-content-wrapper {
    display: block;
    width: 100%;
    height: 100%;
    transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    background: #ea4c89;
    transform: translate3d(0, 100%, 0);
    position: relative
}

.grid .dribbble>.shot-content-wrapper .shot-content {
    text-align: center;
    display: block;
    width: 100%;
    position: absolute;
    top: 50%;
    right: auto;
    bottom: auto;
    left: 0;
    transform: translate3d(0, -50%, 0)
}

.grid .dribbble>.shot-content-wrapper .shot-content img {
    margin-bottom: 15px;
    width: 50px;
    height: auto
}

.grid .dribbble>.shot-content-wrapper .shot-content .text {
    text-transform: uppercase;
    color: #ffffff;
    text-align: center;
    letter-spacing: 2px;
    font-weight: 500;
    font-size: 20px;
    display: block
}

.grid .dribbble:hover>.shot-content-wrapper {
    transform: translate3d(0, 0, 0)
}

@-webkit-keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        -webkit-transform: translateY(0)
    }

    40% {
        -webkit-transform: translateY(-30px)
    }

    60% {
        -webkit-transform: translateY(-20px)
    }
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0)
    }

    40% {
        transform: translateY(-30px)
    }

    60% {
        transform: translateY(-20px)
    }
}

.grid .dribbble:hover>.shot-content-wrapper .shot-content img {
    animation-name: bounce;
    animation-duration: 1.25s;
    animation-delay: .3s
}

.grid .dribbble[data-animated-version*=".gif"]>.shot-content-wrapper {
    display: none
}

.grid .dribbble[data-animated-version*=".gif"]:hover>.shot-content-wrapper {
    display: none
}

.grid .dribbble .facts {
    background-color: #ea4c89;
    display: block;
    width: 100%;
    height: 100%;
    transition: background-color .2s ease-in-out
}

.grid .dribbble .facts .wrapper {
    display: block;
    position: relative;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    opacity: 1;
    transition: all .2s ease-in-out
}

.grid .dribbble .facts .wrapper img {
    width: 26px;
    height: 26px;
    display: block;
    margin: 0 auto 5px auto
}

.grid .dribbble .facts .wrapper h2 {
    font-size: 52px;
    font-weight: 300;
    color: white;
    text-align: center;
    margin: 0;
    letter-spacing: -1px
}

.grid .dribbble .facts .wrapper h2:after {
    display: block;
    content: 'followers';
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 5.5px;
    margin: 5px 0px 0px;
    position: relative;
    left: 5px
}

.grid .dribbble .facts .follow-us {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    bottom: auto;
    right: auto;
    text-transform: uppercase;
    color: #ea4c89;
    text-align: center;
    letter-spacing: 2px;
    font-weight: 500;
    font-size: 16px;
    transition: top .2s ease-in-out
}

.grid .dribbble .facts .follow-us>.text {
    display: block;
    position: relative;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0)
}

.grid .dribbble .facts:hover {
    background-color: white
}

.grid .dribbble .facts:hover .wrapper {
    top: -100%;
    opacity: 0
}

.grid .dribbble .facts:hover .follow-us {
    top: 0
}

.grid .twitter {
    background-color: #55acee;
    overflow: hidden;
    position: relative
}

.grid .twitter a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none
}

.grid .twitter a:hover {
    text-decoration: none
}

.grid .twitter .follow-us {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 2;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease-in-out
}

.grid .twitter .follow-us .wrapper {
    display: block;
    position: relative;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0)
}

.grid .twitter .follow-us .wrapper svg {
    margin-bottom: 50%;
    transition: all .35s ease-in-out
}

.grid .twitter .follow-us .wrapper svg path {
    fill: #55acee
}

.grid .twitter .follow-us .wrapper h1 {
    color: #55acee;
    text-align: center;
    letter-spacing: 2px;
    font-weight: 500;
    text-transform: uppercase;
    margin: 50% 0 0 0;
    font-size: 16px;
    transition: all .35s ease-in-out
}

.grid .twitter .tweet {
    display: block;
    text-align: center;
    position: relative;
    top: 12%;
    padding: 0 30px;
    z-index: 1
}

.grid .twitter .tweet svg {
    width: 26px;
    height: 26px;
    transition: all .25s ease-in-out
}

.grid .twitter .tweet svg path {
    fill: transparent;
    stroke: white;
    stroke-width: 1px;
    transition: all .2s ease-in-out
}

.grid .twitter .tweet h1 {
    font-weight: 300;
    font-size: 16px;
    color: white;
    margin: 20px 0 30px 0;
    line-height: 1.1
}

.grid .twitter .tweet h2 {
    font-size: 13px;
    line-height: 18px;
    height: 18px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    letter-spacing: 1px
}

.grid .twitter:hover .tweet svg {
    width: 325%;
    height: 325%;
    -webkit-transform: translate3d(-30%, -50%, 0);
    transform: translate3d(-30%, -50%, 0)
}

.grid .twitter:hover .tweet svg path {
    fill: #ffffff
}

.grid .twitter:hover .follow-us {
    opacity: 1
}

.grid .twitter:hover .follow-us svg {
    margin-bottom: 0
}

.grid .twitter:hover .follow-us h1 {
    margin-top: 20px
}

.grid .facebook {
    background-color: #3b5998;
    position: relative;
    overflow: hidden
}

.grid .facebook a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none
}

.grid .facebook .like-us {
    display: block;
    width: 100%;
    height: 100%;
    background-color: white;
    text-align: center
}

.grid .facebook .like-us .wrapper {
    display: block;
    position: relative;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0)
}

.grid .facebook .like-us .wrapper img {
    width: 32px;
    height: 32px
}

.grid .facebook .like-us .wrapper h1 {
    font-weight: 500;
    margin: 20px 0 0 0;
    font-size: 16px;
    color: #2e2e2e;
    text-transform: uppercase;
    letter-spacing: 2px
}

.grid .facebook .facts {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: #3b5998;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    transition: all .2s ease-in-out
}

.grid .facebook .facts .wrapper {
    display: block;
    position: relative;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    opacity: 1;
    transition: all .2s ease-in-out
}

.grid .facebook .facts .wrapper img {
    width: 26px;
    height: 26px;
    display: block;
    margin: 0 auto 20px auto;
    margin: 0 auto 5px auto
}

.grid .facebook .facts .wrapper h2 {
    font-size: 52px;
    font-weight: 300;
    color: white;
    text-align: center;
    margin: 0;
    letter-spacing: -1px
}

.grid .facebook .facts .wrapper h2:after {
    display: block;
    content: 'likes';
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 5.5px;
    margin: 5px 0px 0px;
    position: relative;
    left: 5px
}

.grid .facebook:hover .like-us .wrapper img {
    transition: all .1s ease-in-out;
    -webkit-animation: bounceLike .6s forwards .2s;
    animation: bounceLike .6s forwards .2s
}

.grid .facebook:hover .facts {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.grid .case-study {
    width: 50%;
    background-color: gray;
    text-align: center
}

.grid .case-study .new-ribbon {
    width: 150px;
    background: #fff200;
    color: #162221;
    height: 22px;
    transform: rotate(45deg);
    top: 12px;
    right: -50px;
    bottom: auto;
    left: auto;
    display: block;
    margin: 0;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 22px
}

.grid .case-study.vertical {
    height: 480px;
    width: 25%
}

.grid .case-study a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none
}

.grid .case-study .wrapper h1 .toi-project,
.grid .case-study .wrapper .dh1 .toi-project {
    font-size: 14px;
    position: relative;
    top: -2px
}

.grid .case-study .wrapper h1 .toi-project .dash,
.grid .case-study .wrapper .dh1 .toi-project .dash {
    font-weight: 600;
    font-size: 12px;
    display: inline-block;
    margin: 0 8px;
    position: relative;
    top: -1px
}

.grid .case-study .wrapper h1 .toi-project>svg,
.grid .case-study .wrapper .dh1 .toi-project>svg {
    display: inline-block;
    width: 36px;
    height: 23px;
    margin: 0 0 0 2px;
    position: relative;
    top: 5px
}

.grid #case-study-block-genee {
    background-color: white;
    text-align: left
}

.grid #case-study-block-genee a {
    position: relative;
    overflow: hidden
}

.grid #case-study-block-genee .wrapper {
    float: left;
    width: 50%;
    padding: 0 50px 0 40px;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-70%);
    transform: translateY(-70%)
}

.grid #case-study-block-genee h2 {
    font-weight: 500;
    font-size: 13px;
    color: #36a840;
    text-transform: uppercase;
    padding-bottom: 16px;
    display: inline-block;
    margin: 0
}

.grid #case-study-block-genee h1,
.grid #case-study-block-genee .dh1 {
    font-weight: 300;
    font-size: 24px;
    color: #2c4871;
    margin: 0 0 18px 0
}

.grid #case-study-block-genee h1 .toi-project,
.grid #case-study-block-genee .dh1 .toi-project {
    color: #284a7a
}

.grid #case-study-block-genee h1 .toi-project .dash,
.grid #case-study-block-genee .dh1 .toi-project .dash {
    color: #22b14c
}

.grid #case-study-block-genee h1 .toi-project>svg path.custom-fill,
.grid #case-study-block-genee .dh1 .toi-project>svg path.custom-fill {
    fill: #284a7a
}

.grid #case-study-block-genee p {
    margin: 0;
    font-size: 16px;
    font-weight: 300;
    color: #648694;
    line-height: 1.2
}

.grid #case-study-block-genee .app {
    display: block;
    float: right;
    width: 400px;
    max-width: 50%;
    height: 100%;
    background: transparent;
    text-align: right
}

.grid #case-study-block-genee .app>img {
    width: auto;
    height: 100%;
    padding-right: 60px;
    position: relative;
    top: 60%;
    transform: translate3d(-50px, -50%, 0)
}

@media screen and (max-width: 480px) {
    .grid #case-study-block-genee .app>img {
        transform: translate3d(-30%, -50%, 0)
    }
}

.grid #case-study-block-genee .view {
    display: block;
    position: absolute;
    padding: 0 50px 0 40px;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75px;
    line-height: 85px;
    font-weight: 300;
    font-size: 16px;
    color: #39ad43;
    z-index: 999;
    transition: all .2s ease-in-out
}

.grid #case-study-block-genee .view:after {
    content: '';
    display: inline-block;
    position: absolute;
    z-index: -1;
    left: 40px;
    top: 23px;
    width: 158px;
    right: auto;
    background-color: white;
    transition: all .2s ease-in-out;
    height: 40px !important;
    bottom: auto;
    transform: scaleX(0);
    transform-origin: 0% 50%;
    background-color: #39ad43
}

.grid #case-study-block-genee .view svg {
    position: relative;
    top: 3px;
    left: 10px
}

.grid #case-study-block-genee .view svg polygon.st0 {
    fill: #39ad43;
    stroke: #39ad43;
    transition: all .2s ease-in
}

.grid #case-study-block-genee:hover .view {
    color: white;
    padding: 0 50px 0 55px
}

.grid #case-study-block-genee:hover .view svg polygon.st0 {
    fill: white;
    stroke: white
}

.grid #case-study-block-genee:hover .view:after {
    height: 65px;
    transform: scale(1)
}

.grid #case-study-block-metacenter {
    background: #237a87 url(/assets/case-studies/metacenter/metacenter-block-new-6741dfaf9cdccdf5fa9f272eda615ac2604b62d9f2909312c57cbbdec2bdc19e.png) no-repeat;
    background-size: auto 90%;
    text-align: left;
    background-position: calc(50% + 235px) calc(50% + 8px)
}

@media screen and (max-width: 480px) {
    .grid #case-study-block-metacenter {
        background: #237a87 url(/assets/case-studies/metacenter/metacenter-block-mobile-6ed072946842ead4f9757716308700f279592840b5c4700e269892c5304dfefb.png) no-repeat center 10%;
        background-size: auto 40%
    }
}

.grid #case-study-block-metacenter a {
    position: relative;
    overflow: hidden
}

.grid #case-study-block-metacenter .wrapper {
    float: left;
    width: 50%;
    padding: 0 50px 0 40px;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-70%);
    transform: translateY(-70%)
}

.grid #case-study-block-metacenter h2 {
    font-weight: 500;
    font-size: 13px;
    color: white;
    text-transform: uppercase;
    padding-bottom: 29px;
    display: inline-block;
    margin: 0
}

.grid #case-study-block-metacenter h1,
.grid #case-study-block-metacenter .dh1 {
    font-weight: 300;
    font-size: 24px;
    color: white;
    margin: 0 0 5px 0
}

.grid #case-study-block-metacenter p {
    margin: 0;
    font-size: 16px;
    font-weight: 300;
    color: white;
    line-height: 1.2
}

.grid #case-study-block-metacenter .app {
    display: block;
    float: right;
    width: 400px;
    max-width: 50%;
    height: 100%;
    background: transparent;
    text-align: right
}

.grid #case-study-block-metacenter .app>img {
    width: auto;
    height: 85%;
    padding-right: 15px;
    position: relative;
    top: 60%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0)
}

.grid #case-study-block-metacenter .view {
    display: block;
    position: absolute;
    padding: 0 50px 0 40px;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75px;
    line-height: 85px;
    font-weight: 300;
    font-size: 16px;
    color: white;
    z-index: 999;
    transition: all .2s ease-in-out
}

@media screen and (max-width: 480px) {
    .grid #case-study-block-metacenter .view {
        text-align: left
    }
}

.grid #case-study-block-metacenter .view:after {
    content: '';
    display: inline-block;
    position: absolute;
    z-index: -1;
    left: 40px;
    top: 23px;
    width: 158px;
    right: auto;
    background-color: white;
    transition: all .2s ease-in-out;
    height: 40px !important;
    bottom: auto;
    transform: scaleX(0);
    transform-origin: 0% 50%
}

.grid #case-study-block-metacenter .view svg {
    position: relative;
    top: 3px;
    left: 10px
}

.grid #case-study-block-metacenter .view svg polygon.st0 {
    fill: white;
    stroke: white;
    transition: all .2s ease-in
}

.grid #case-study-block-metacenter:hover .view {
    color: #237a87;
    padding: 0 50px 0 55px
}

.grid #case-study-block-metacenter:hover .view svg polygon.st0 {
    fill: #237a87;
    stroke: #237a87
}

.grid #case-study-block-metacenter:hover .view:after {
    height: 65px;
    transform: scaleX(1)
}

.grid #case-study-block-samsung_dev_conference {
    background: #085bba url(/assets/case-studies/samsung_dev_conference/ux-background-39bb42bb76748981dc55783eefb36a5893ec81c846eecff3669e33f65e3045f3.svg) no-repeat center top/150% auto;
    text-align: left
}

@media screen and (max-width: 480px) {
    .grid #case-study-block-samsung_dev_conference {
        background-size: auto 100%
    }
}

.grid #case-study-block-samsung_dev_conference a {
    position: relative;
    overflow: hidden
}

.grid #case-study-block-samsung_dev_conference .wrapper {
    float: left;
    width: 60%;
    padding: 0 50px 0 40px;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-70%);
    transform: translateY(-70%)
}

@media screen and (max-width: 480px) {
    .grid #case-study-block-samsung_dev_conference .wrapper {
        top: 60px !important;
        -webkit-transform: none !important;
        transform: none !important
    }
}

.grid #case-study-block-samsung_dev_conference h2 {
    font-weight: 500;
    font-size: 13px;
    color: white;
    text-transform: uppercase;
    padding-bottom: 16px;
    display: inline-block;
    margin: 0
}

.grid #case-study-block-samsung_dev_conference h1,
.grid #case-study-block-samsung_dev_conference .dh1 {
    font-weight: 300;
    font-size: 24px;
    color: white;
    margin: 0 0 18px 0
}

.grid #case-study-block-samsung_dev_conference p {
    margin: 0;
    font-size: 16px;
    font-weight: 300;
    color: white;
    line-height: 1.2
}

.grid #case-study-block-samsung_dev_conference img {
    position: absolute;
    top: auto;
    right: -10%;
    bottom: 0;
    left: auto;
    width: 55%
}

@media screen and (max-width: 480px) {
    .grid #case-study-block-samsung_dev_conference img {
        right: auto;
        left: 50%;
        width: 100%;
        transform: translate3d(-50%, 0, 0)
    }
}

.grid #case-study-block-samsung_dev_conference .view {
    display: block;
    position: absolute;
    padding: 0 50px 0 40px;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75px;
    line-height: 85px;
    font-weight: 300;
    font-size: 16px;
    color: white;
    z-index: 999;
    transition: all .2s ease-in-out
}

@media screen and (max-width: 480px) {
    .grid #case-study-block-samsung_dev_conference .view {
        top: 190px;
        text-align: left
    }
}

.grid #case-study-block-samsung_dev_conference .view::after {
    content: '';
    display: inline-block;
    position: absolute;
    z-index: -1;
    left: 40px;
    top: 23px;
    width: 158px;
    right: auto;
    background-color: white;
    transition: all .2s ease-in-out;
    height: 40px !important;
    bottom: auto;
    transform: scaleX(0);
    transform-origin: 0% 50%
}

.grid #case-study-block-samsung_dev_conference .view svg {
    position: relative;
    top: 3px;
    left: 10px
}

.grid #case-study-block-samsung_dev_conference .view svg polygon.st0 {
    fill: white;
    stroke: white;
    transition: all .2s ease-in
}

.grid #case-study-block-samsung_dev_conference:hover .view {
    color: #085bba;
    padding: 0 50px 0 55px
}

.grid #case-study-block-samsung_dev_conference:hover .view svg polygon.st0 {
    fill: #085bba;
    stroke: #085bba
}

.grid #case-study-block-samsung_dev_conference:hover .view::after {
    transform: scaleX(1)
}

.grid #case-study-block-cluey {
    background: #A1AEFC;
    text-align: left
}

.grid #case-study-block-cluey a {
    position: relative;
    overflow: hidden
}

.grid #case-study-block-cluey .wrapper {
    float: left;
    width: 60%;
    padding: 0 50px 0 40px;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-70%);
    transform: translateY(-70%)
}

@media screen and (max-width: 480px) {
    .grid #case-study-block-cluey .wrapper {
        top: 60px !important;
        -webkit-transform: none !important;
        transform: none !important
    }
}

.grid #case-study-block-cluey h2 {
    font-weight: 500;
    font-size: 13px;
    color: rgba(21, 39, 55, 0.6);
    text-transform: uppercase;
    padding-bottom: 16px;
    display: inline-block;
    margin: 0
}

.grid #case-study-block-cluey h1,
.grid #case-study-block-cluey .dh1 {
    font-weight: 300;
    font-size: 24px;
    color: #152737;
    margin: 0 0 18px 0
}

.grid #case-study-block-cluey p {
    margin: 0;
    font-size: 16px;
    font-weight: 300;
    color: #152737;
    line-height: 1.2
}

.grid #case-study-block-cluey img {
    position: absolute;
    top: auto;
    right: -10%;
    bottom: 0;
    left: auto;
    width: 50%
}

@media screen and (max-width: 480px) {
    .grid #case-study-block-cluey img {
        right: auto;
        left: 50%;
        width: 70%;
        transform: translate3d(-50%, 0, 0)
    }
}

.grid #case-study-block-cluey .view {
    display: block;
    position: absolute;
    padding: 0 50px 0 40px;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75px;
    line-height: 85px;
    font-weight: 300;
    font-size: 16px;
    color: #152737;
    z-index: 999;
    transition: all .2s ease-in-out
}

@media screen and (max-width: 480px) {
    .grid #case-study-block-cluey .view {
        top: 190px;
        text-align: left
    }
}

.grid #case-study-block-cluey .view:after {
    content: '';
    display: inline-block;
    position: absolute;
    z-index: -1;
    left: 40px;
    top: 23px;
    width: 158px;
    right: auto;
    transition: all .2s ease-in-out;
    height: 40px !important;
    bottom: auto;
    transform: scaleX(0);
    transform-origin: 0% 50%;
    background-color: #152737
}

.grid #case-study-block-cluey .view svg {
    position: relative;
    top: 3px;
    left: 10px
}

.grid #case-study-block-cluey .view svg polygon.st0 {
    fill: #152737;
    stroke: #152737;
    transition: all .2s ease-in
}

.grid #case-study-block-cluey:hover .view {
    color: white;
    padding: 0 50px 0 55px
}

.grid #case-study-block-cluey:hover .view svg polygon.st0 {
    fill: white;
    stroke: white
}

.grid #case-study-block-cluey:hover .view:after {
    height: 65px;
    transform: scaleX(1)
}

.grid #case-study-block-kibow {
    background: #D3FF00;
    text-align: left
}

.grid #case-study-block-kibow a {
    position: relative;
    overflow: hidden
}

.grid #case-study-block-kibow .wrapper {
    float: left;
    width: 50%;
    padding: 0 50px 0 40px;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-70%);
    transform: translateY(-70%)
}

@media screen and (max-width: 480px) {
    .grid #case-study-block-kibow .wrapper {
        top: 60px !important;
        -webkit-transform: none !important;
        transform: none !important
    }
}

.grid #case-study-block-kibow h2 {
    font-weight: 500;
    font-size: 13px;
    color: rgba(7, 22, 47, 0.85);
    text-transform: uppercase;
    padding-bottom: 16px;
    display: inline-block;
    margin: 0
}

.grid #case-study-block-kibow h1,
.grid #case-study-block-kibow .dh1 {
    font-weight: 300;
    font-size: 24px;
    color: #07162f;
    margin: 0 0 18px 0
}

.grid #case-study-block-kibow p {
    margin: 0;
    font-size: 16px;
    font-weight: 300;
    color: #07162f;
    line-height: 1.2
}

.grid #case-study-block-kibow img {
    position: absolute;
    top: auto;
    right: 20%;
    bottom: -230px;
    left: auto;
    width: 440px;
    transform: translate3d(35%, 0, 0)
}

@media screen and (max-width: 1024px) {
    .grid #case-study-block-kibow img {
        bottom: -120px;
        left: auto;
        width: 340px;
        transform: translate3d(50%, 0, 0)
    }
}

@media screen and (max-width: 768px) {
    .grid #case-study-block-kibow img {
        width: 260px
    }
}

@media screen and (max-width: 480px) {
    .grid #case-study-block-kibow img {
        right: auto;
        left: 50%;
        width: 100%;
        transform: translate3d(-50%, 0, 0);
        bottom: -70px
    }
}

.grid #case-study-block-kibow .view {
    display: block;
    position: absolute;
    padding: 0 50px 0 40px;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75px;
    line-height: 85px;
    font-weight: 300;
    font-size: 16px;
    color: #07162f;
    z-index: 999;
    transition: all .2s ease-in-out
}

@media screen and (max-width: 480px) {
    .grid #case-study-block-kibow .view {
        top: 190px;
        text-align: left
    }
}

.grid #case-study-block-kibow .view:after {
    content: '';
    display: inline-block;
    position: absolute;
    z-index: -1;
    left: 40px;
    top: 23px;
    width: 158px;
    right: auto;
    background-color: #07162f;
    transition: all .2s ease-in-out;
    height: 40px !important;
    bottom: auto;
    transform: scaleX(0);
    transform-origin: 0% 50%
}

.grid #case-study-block-kibow .view svg {
    position: relative;
    top: 3px;
    left: 10px
}

.grid #case-study-block-kibow .view svg polygon.st0 {
    fill: #07162f;
    stroke: #07162f;
    transition: all .2s ease-in
}

.grid #case-study-block-kibow:hover .view {
    color: white;
    padding: 0 50px 0 55px
}

.grid #case-study-block-kibow:hover .view svg polygon.st0 {
    fill: white;
    stroke: white
}

.grid #case-study-block-kibow:hover .view:after {
    height: 65px;
    transform: scaleX(1)
}

.grid #case-study-block-messi {
    background: black;
    background-size: 100% auto;
    text-align: center
}

.grid #case-study-block-messi a {
    position: relative;
    overflow: hidden
}

.grid #case-study-block-messi .wrapper {
    width: 100%;
    padding: 0;
    position: relative;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    padding: 20px 0
}

.grid #case-study-block-messi h2 {
    font-weight: 500;
    font-size: 13px;
    color: white;
    text-transform: uppercase;
    padding-bottom: 16px;
    display: inline-block;
    margin: 0 0 10px 0
}

.grid #case-study-block-messi h1 {
    font-weight: 300;
    font-size: 24px;
    color: white;
    margin: 0 0 18px 0
}

.grid #case-study-block-messi p {
    margin: 0;
    font-size: 16px;
    font-weight: 300;
    color: white;
    line-height: 1.2;
    padding-left: 40px;
    padding-right: 40px
}

.grid #case-study-block-messi .view {
    display: block;
    position: absolute;
    padding: 0 50px 0 40px;
    top: auto;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 65px;
    line-height: 65px;
    font-weight: 300;
    font-size: 16px;
    color: white;
    z-index: 999;
    transition: all .2s ease-in-out
}

.grid #case-study-block-messi .view:after {
    content: '';
    display: inline-block;
    position: absolute;
    z-index: -1;
    left: 85px;
    top: 13px;
    width: 158px;
    right: auto;
    background-color: white;
    transition: all .2s ease-in-out;
    height: 40px !important;
    bottom: auto;
    transform: scaleX(0);
    transform-origin: 0% 50%
}

.grid #case-study-block-messi .view svg {
    position: relative;
    top: 3px;
    left: 10px
}

.grid #case-study-block-messi .view svg polygon.st0 {
    fill: white;
    stroke: white;
    transition: all .2s ease-in
}

.grid #case-study-block-messi img.thumbnail-messi {
    position: absolute;
    top: auto;
    right: 0;
    bottom: 55px;
    left: 0;
    width: 100%
}

.grid #case-study-block-messi:hover .view {
    color: black;
    padding: 0 50px 0 55px
}

.grid #case-study-block-messi:hover .view svg polygon.st0 {
    fill: black;
    stroke: black
}

.grid #case-study-block-messi:hover .view:after {
    height: 65px;
    transform: scaleX(1)
}

.grid #case-study-block-tag {
    background-color: #443e63;
    position: relative
}

.grid #case-study-block-tag .wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%
}

.grid #case-study-block-tag a {
    padding: 0 60px
}

.grid #case-study-block-tag h2 {
    font-weight: 500;
    font-size: 13px;
    color: white;
    text-transform: uppercase;
    padding-bottom: 10px;
    display: inline-block;
    margin: 0 0 10px 0
}

.grid #case-study-block-tag h1,
.grid #case-study-block-tag .dh1 {
    font-weight: 300;
    font-size: 24px;
    color: white;
    margin: 0 0 22px 0;
    line-height: 1
}

.grid #case-study-block-tag h1 .toi-project,
.grid #case-study-block-tag .dh1 .toi-project {
    color: #8f87b1;
    top: -4px
}

.grid #case-study-block-tag h1 .toi-project .dash,
.grid #case-study-block-tag .dh1 .toi-project .dash {
    color: #8f87b1
}

.grid #case-study-block-tag h1 .toi-project>svg,
.grid #case-study-block-tag .dh1 .toi-project>svg {
    top: 7px
}

.grid #case-study-block-tag h1 .toi-project>svg path:not(.custom-fill),
.grid #case-study-block-tag .dh1 .toi-project>svg path:not(.custom-fill) {
    fill: rgba(255, 255, 255, 0)
}

.grid #case-study-block-tag h1 .toi-project>svg path.custom-fill,
.grid #case-study-block-tag .dh1 .toi-project>svg path.custom-fill {
    fill: #8f87b1
}

.grid #case-study-block-tag p {
    margin: 0;
    font-size: 16px;
    font-weight: 300;
    color: #9993c1;
    line-height: 1.2;
    padding: 0 30px
}

.grid #case-study-block-tag .wrapper>img {
    display: inline-block;
    height: 200px;
    margin: 20px 0
}

.grid #case-study-block-tag .view {
    display: block;
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 65px;
    line-height: 65px;
    font-weight: 300;
    font-size: 16px;
    color: white;
    z-index: 999;
    transition: all .2s ease-in-out
}

.grid #case-study-block-tag .view svg polygon.st0 {
    fill: white
}

.grid #case-study-block-tag .view:after {
    content: '';
    display: inline-block;
    position: absolute;
    z-index: -1;
    left: 85px;
    top: 13px;
    width: 158px;
    right: auto;
    background-color: white;
    transition: all .2s ease-in-out;
    height: 40px !important;
    bottom: auto;
    transform: scaleX(0);
    transform-origin: 0% 50%
}

.grid #case-study-block-tag .view svg {
    position: relative;
    top: 3px;
    left: 10px
}

.grid #case-study-block-tag .view svg polygon.st0 {
    transition: all .2s ease-in
}

.grid #case-study-block-tag:hover .view {
    color: #443e63;
    padding: 0 50px 0 55px
}

.grid #case-study-block-tag:hover .view svg polygon.st0 {
    fill: #443e63;
    stroke: #443e63
}

.grid #case-study-block-tag:hover .view:after {
    height: 65px;
    transform: scaleX(1)
}

.grid #case-study-block-espn {
    background: #f4371b url(/assets/case-studies/espn/espn-grid-b9d6a11a142d3ec5cc10357e0d09cdadf55ede48d10567f8431c64398ff8759a.png) no-repeat right bottom;
    background-size: 50% auto;
    text-align: left
}

.grid #case-study-block-espn a {
    position: relative;
    overflow: hidden
}

.grid #case-study-block-espn .wrapper {
    float: left;
    width: 50%;
    padding: 0 40px 0 30px;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-70%);
    transform: translateY(-70%)
}

.grid #case-study-block-espn h2 {
    font-weight: 400;
    font-size: 13px;
    color: white;
    text-transform: uppercase;
    padding-bottom: 5px;
    margin-bottom: 15px;
    display: inline-block;
    margin: 0 0 10px 0
}

.grid #case-study-block-espn h1 {
    font-weight: 400;
    font-size: 24px;
    color: white;
    margin: 0 0 15px 0;
    line-height: 1
}

.grid #case-study-block-espn p {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    color: white;
    line-height: 1.2
}

.grid #case-study-block-espn .app {
    display: block;
    float: right;
    width: 400px;
    max-width: 50%;
    height: 100%;
    background: transparent;
    text-align: right
}

.grid #case-study-block-espn .app>img {
    width: auto;
    height: 85%;
    padding-right: 15px;
    position: relative;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0)
}

.grid #case-study-block-espn .view {
    display: block;
    position: absolute;
    padding: 0 40px 0 30px;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75px;
    line-height: 85px;
    font-weight: 400;
    font-size: 16px;
    color: white;
    z-index: 999;
    transition: all .2s ease-in-out
}

.grid #case-study-block-espn .view:after {
    content: '';
    display: inline-block;
    position: absolute;
    z-index: -1;
    left: 40px;
    top: 23px;
    width: 158px;
    right: auto;
    background-color: white;
    transition: all .2s ease-in-out;
    height: 40px !important;
    bottom: auto;
    transform: scaleX(0);
    transform-origin: 0% 50%
}

.grid #case-study-block-espn .view svg {
    position: relative;
    top: 3px;
    left: 10px
}

.grid #case-study-block-espn .view svg polygon.st0 {
    fill: white;
    stroke: white;
    transition: all .2s ease-in
}

.grid #case-study-block-espn:hover .view {
    color: #f4371b;
    padding: 0 50px 0 55px
}

.grid #case-study-block-espn:hover .view svg polygon.st0 {
    fill: #f4371b;
    stroke: #f4371b
}

.grid #case-study-block-espn:hover .view:after {
    height: 65px;
    transform: scaleX(1)
}

.grid #case-study-block-espnjo {
    background: #1b63b4 url(/assets/case-studies/espnjo/espnjo-grid-1bd0697ded95bab2899df7453c8af5bc475257e5df1a289046ca0f178257beb5.png) no-repeat right 43px;
    background-size: 50% auto;
    text-align: left
}

.grid #case-study-block-espnjo a {
    position: relative;
    overflow: hidden
}

.grid #case-study-block-espnjo .wrapper {
    float: left;
    width: 52%;
    padding: 0 40px 0 30px;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-70%);
    transform: translateY(-70%)
}

.grid #case-study-block-espnjo h2 {
    font-weight: 400;
    font-size: 13px;
    color: #76afef;
    text-transform: uppercase;
    padding-bottom: 5px;
    margin-bottom: 15px;
    display: inline-block;
    margin: 0 0 10px 0
}

.grid #case-study-block-espnjo h1 {
    font-weight: 400;
    font-size: 24px;
    color: white;
    margin: 0 0 15px 0;
    line-height: 1
}

.grid #case-study-block-espnjo p {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    color: white;
    line-height: 1.2
}

.grid #case-study-block-espnjo .app {
    display: block;
    float: right;
    width: 400px;
    max-width: 50%;
    height: 100%;
    background: transparent;
    text-align: right
}

.grid #case-study-block-espnjo .app>img {
    width: auto;
    height: 85%;
    padding-right: 15px;
    position: relative;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0)
}

.grid #case-study-block-espnjo .view {
    display: block;
    position: absolute;
    padding: 0 40px 0 30px;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75px;
    line-height: 85px;
    font-weight: 400;
    font-size: 16px;
    color: white;
    z-index: 999;
    transition: all .2s ease-in-out
}

.grid #case-study-block-espnjo .view:after {
    content: '';
    display: inline-block;
    position: absolute;
    z-index: -1;
    left: 40px;
    top: 23px;
    width: 158px;
    right: auto;
    background-color: white;
    transition: all .2s ease-in-out;
    height: 40px !important;
    bottom: auto;
    transform: scaleX(0);
    transform-origin: 0% 50%
}

.grid #case-study-block-espnjo .view svg {
    position: relative;
    top: 3px;
    left: 10px
}

.grid #case-study-block-espnjo .view svg polygon.st0 {
    fill: white;
    stroke: white;
    transition: all .2s ease-in
}

.grid #case-study-block-espnjo:hover .view {
    color: #1b63b4;
    padding: 0 50px 0 55px
}

.grid #case-study-block-espnjo:hover .view svg polygon.st0 {
    fill: #1b63b4;
    stroke: #1b63b4
}

.grid #case-study-block-espnjo:hover .view:after {
    height: 65px;
    transform: scaleX(1)
}

.grid #case-study-block-djlist {
    background: #fff url(/assets/case-studies/djlist/djlist-grid-4f4db3f022e184a3b9b2ad38568b0eb8a32ddafbe5607a3a0aac8990d1f20e21.png) no-repeat 95% center;
    background-size: 42% auto;
    text-align: left
}

.grid #case-study-block-djlist a {
    position: relative;
    overflow: hidden
}

.grid #case-study-block-djlist .wrapper {
    float: left;
    width: 50%;
    padding: 0 50px 0 40px;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-62%);
    transform: translateY(-62%)
}

.grid #case-study-block-djlist h2 {
    font-weight: 500;
    font-size: 13px;
    color: #36a840;
    text-transform: uppercase;
    padding-bottom: 10px;
    display: inline-block;
    margin: 0
}

.grid #case-study-block-djlist h1,
.grid #case-study-block-djlist .dh1 {
    font-weight: 300;
    font-size: 24px;
    color: #2c4871;
    margin: 0 0 15px 0;
    line-height: 1
}

.grid #case-study-block-djlist h1 .toi-project,
.grid #case-study-block-djlist .dh1 .toi-project {
    color: #284a7a
}

.grid #case-study-block-djlist h1 .toi-project .dash,
.grid #case-study-block-djlist .dh1 .toi-project .dash {
    color: #22b14c
}

.grid #case-study-block-djlist p {
    margin: 20px 0 0;
    font-size: 16px;
    font-weight: 300;
    color: #648694;
    line-height: 1.2
}

.grid #case-study-block-djlist .view {
    display: block;
    position: absolute;
    padding: 0 50px 0 40px;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75px;
    line-height: 85px;
    font-weight: 300;
    font-size: 16px;
    color: #64008A;
    z-index: 999;
    transition: all .2s ease-in-out
}

.grid #case-study-block-djlist .view:after {
    content: '';
    display: inline-block;
    position: absolute;
    z-index: -1;
    left: 40px;
    top: 23px;
    width: 158px;
    right: auto;
    background-color: white;
    transition: all .2s ease-in-out;
    height: 40px !important;
    bottom: auto;
    transform: scaleX(0);
    transform-origin: 0% 50%;
    background-color: #64008A
}

.grid #case-study-block-djlist .view svg {
    position: relative;
    top: 3px;
    left: 10px
}

.grid #case-study-block-djlist .view svg polygon.st0 {
    fill: #64008A;
    stroke: #64008A;
    transition: all .2s ease-in
}

.grid #case-study-block-djlist:hover .view {
    color: white;
    padding: 0 50px 0 55px
}

.grid #case-study-block-djlist:hover .view svg polygon.st0 {
    fill: white;
    stroke: white
}

.grid #case-study-block-djlist:hover .view:after {
    height: 65px;
    transform: scale(1)
}

.grid #case-study-block-red_bull_records {
    background-image: url(/assets/case-studies/red_bull_records/rbr-grid-bg-53e16c26c552097e64bab7dc62f86019ca15b37d3b141be0d4f0542d6decd60a.png), url(/assets/case-studies/red_bull_records/grid-thumb-4bc281620be20ce59b50c106a1ce50188e1af1a8fcd73a06e20d540f1e0c0bcf.png);
    background-repeat: no-repeat, no-repeat;
    background-position: right top, right bottom;
    background-size: 162px 175px, 354px 222px;
    text-align: left
}

.grid #case-study-block-red_bull_records a {
    position: relative;
    overflow: hidden
}

.grid #case-study-block-red_bull_records .wrapper {
    float: left;
    width: 65%;
    padding: 0 50px 0 40px;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-62%);
    transform: translateY(-62%)
}

.grid #case-study-block-red_bull_records h2 {
    font-weight: 500;
    font-size: 13px;
    color: #EC98B1;
    text-transform: uppercase;
    padding-bottom: 10px;
    display: inline-block;
    margin: 0
}

.grid #case-study-block-red_bull_records h1,
.grid #case-study-block-red_bull_records .dh1 {
    font-weight: 300;
    font-size: 24px;
    color: white;
    margin: 0 0 15px 0;
    line-height: 1
}

.grid #case-study-block-red_bull_records h1 .toi-project,
.grid #case-study-block-red_bull_records .dh1 .toi-project {
    color: white
}

.grid #case-study-block-red_bull_records h1 .toi-project .custom-fill,
.grid #case-study-block-red_bull_records .dh1 .toi-project .custom-fill {
    fill: white !important
}

.grid #case-study-block-red_bull_records h1 .toi-project .dash,
.grid #case-study-block-red_bull_records .dh1 .toi-project .dash {
    color: rgba(255, 255, 255, 0.5)
}

.grid #case-study-block-red_bull_records p {
    margin: 20px 0 0;
    font-size: 16px;
    font-weight: 300;
    color: white;
    line-height: 1.2;
    max-width: 235px
}

.grid #case-study-block-red_bull_records .view {
    display: block;
    position: absolute;
    padding: 0 50px 0 40px;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75px;
    line-height: 85px;
    font-weight: 300;
    font-size: 16px;
    color: white;
    z-index: 999;
    transition: all .2s ease-in-out
}

.grid #case-study-block-red_bull_records .view:after {
    content: '';
    display: inline-block;
    position: absolute;
    z-index: -1;
    left: 40px;
    top: 23px;
    width: 158px;
    right: auto;
    background-color: white;
    transition: all .2s ease-in-out;
    height: 40px !important;
    bottom: auto;
    transform: scaleX(0);
    transform-origin: 0% 50%
}

.grid #case-study-block-red_bull_records .view svg {
    position: relative;
    top: 3px;
    left: 10px
}

.grid #case-study-block-red_bull_records .view svg polygon.st0 {
    fill: white;
    stroke: white;
    transition: all .2s ease-in
}

.grid #case-study-block-red_bull_records:hover .view {
    color: #CD003B;
    padding: 0 50px 0 55px
}

.grid #case-study-block-red_bull_records:hover .view svg polygon.st0 {
    fill: #CD003B;
    stroke: #CD003B
}

.grid #case-study-block-red_bull_records:hover .view:after {
    height: 65px;
    transform: scaleX(1)
}

.grid #case-study-block-li5 {
    background: #ED1A3D url(/assets/case-studies/li5/grid-2d8fb2f6b42036972b4484878b6fc32bb6e615e3e1e35cfd2f840bd436a077e5.png) no-repeat center bottom/contain;
    position: relative
}

.grid #case-study-block-li5 a {
    padding: 0 26px
}

.grid #case-study-block-li5 h2 {
    font-weight: 500;
    font-size: 13px;
    color: white;
    text-transform: uppercase;
    padding-bottom: 14px;
    display: inline-block;
    margin: 22px 0 18px
}

.grid #case-study-block-li5 h1 {
    font-weight: 300;
    font-size: 24px;
    color: white;
    margin: 0 0 22px 0;
    line-height: 1
}

.grid #case-study-block-li5 p {
    margin: 0 0 60px;
    font-size: 16px;
    font-weight: 300;
    color: white;
    line-height: 1.2;
    padding: 0
}

@media screen and (max-width: 1024px) {
    .grid #case-study-block-li5 p {
        margin-bottom: 60px !important
    }
}

@media screen and (max-width: 480px) {
    .grid #case-study-block-li5 p {
        margin-bottom: 100px !important
    }
}

@media screen and (max-width: 375px) {
    .grid #case-study-block-li5 p {
        margin-bottom: 60px !important
    }
}

.grid #case-study-block-li5 .wrapper>img {
    display: inline-block;
    height: 200px;
    margin: 20px 0
}

.grid #case-study-block-li5 .thumbnail-tn {
    max-width: 100%
}

.grid #case-study-block-li5 .view {
    display: block;
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 65px;
    line-height: 65px;
    font-weight: 300;
    font-size: 16px;
    color: white;
    z-index: 999;
    transition: all .2s ease-in-out
}

.grid #case-study-block-li5 .view svg polygon.st0 {
    fill: white
}

.grid #case-study-block-li5 .view:after {
    content: '';
    display: inline-block;
    position: absolute;
    z-index: -1;
    left: 85px;
    top: 13px;
    width: 158px;
    right: auto;
    background-color: white;
    transition: all .2s ease-in-out;
    height: 40px !important;
    bottom: auto;
    transform: scaleX(0);
    transform-origin: 0% 50%
}

.grid #case-study-block-li5 .view svg {
    position: relative;
    top: 3px;
    left: 10px
}

.grid #case-study-block-li5 .view svg polygon.st0 {
    transition: all .2s ease-in
}

.grid #case-study-block-li5:hover .view {
    color: #03C8DE;
    padding: 0 50px 0 55px
}

.grid #case-study-block-li5:hover .view svg polygon.st0 {
    fill: #03C8DE;
    stroke: #03C8DE
}

.grid #case-study-block-li5:hover .view:after {
    height: 65px;
    transform: scale(1)
}

.grid #case-study-block-polyvibe {
    background: #6718b2 url(/assets/case-studies/polyvibe/grid-e088acfaa084ddfdc26877b2db6e0be8688bf4a6c66f59852704c90efbc453b4.png) no-repeat center bottom/contain;
    position: relative;
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 60%;
    text-align: left
}

@media screen and (max-width: 1024px) {
    .grid #case-study-block-polyvibe {
        background: #6718b2 url(/assets/case-studies/polyvibe/grid-e088acfaa084ddfdc26877b2db6e0be8688bf4a6c66f59852704c90efbc453b4.png) no-repeat center bottom/contain;
        position: relative;
        background-repeat: no-repeat;
        background-position: center 40px;
        background-size: 360px auto;
        text-align: left
    }
}

.grid #case-study-block-polyvibe a {
    padding: 0 26px 0 40px
}

.grid #case-study-block-polyvibe h2 {
    font-weight: 500;
    font-size: 13px;
    color: white;
    text-transform: uppercase;
    padding-bottom: 14px;
    display: inline-block;
    margin: 22px 0 18px
}

.grid #case-study-block-polyvibe h1 {
    font-weight: 300;
    font-size: 24px;
    color: white;
    margin: 0 0 22px 0;
    line-height: 1
}

.grid #case-study-block-polyvibe p {
    margin: 0 0 60px;
    font-size: 16px;
    font-weight: 300;
    color: white;
    line-height: 1.2;
    padding: 0;
    max-width: 250px
}

@media screen and (max-width: 1024px) {
    .grid #case-study-block-polyvibe p {
        margin-bottom: 60px !important
    }
}

@media screen and (max-width: 480px) {
    .grid #case-study-block-polyvibe p {
        margin-bottom: 100px !important
    }
}

@media screen and (max-width: 375px) {
    .grid #case-study-block-polyvibe p {
        margin-bottom: 60px !important
    }
}

.grid #case-study-block-polyvibe .wrapper>img {
    display: inline-block;
    height: 200px;
    margin: 20px 0
}

.grid #case-study-block-polyvibe .view {
    display: block;
    position: absolute;
    padding: 0 50px 0 40px;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75px;
    line-height: 85px;
    font-weight: 300;
    font-size: 16px;
    color: white;
    z-index: 999;
    transition: all .2s ease-in-out
}

.grid #case-study-block-polyvibe .view:after {
    content: '';
    display: inline-block;
    position: absolute;
    z-index: -1;
    left: 40px;
    top: 23px;
    width: 158px;
    right: auto;
    background-color: white;
    transition: all .2s ease-in-out;
    height: 40px !important;
    bottom: auto;
    transform: scaleX(0);
    transform-origin: 0% 50%
}

.grid #case-study-block-polyvibe .view svg {
    position: relative;
    top: 3px;
    left: 10px
}

.grid #case-study-block-polyvibe .view svg polygon.st0 {
    fill: white;
    stroke: white;
    transition: all .2s ease-in
}

.grid #case-study-block-polyvibe:hover .view {
    color: #6A18B7;
    padding: 0 50px 0 55px
}

.grid #case-study-block-polyvibe:hover .view svg polygon.st0 {
    fill: #6A18B7;
    stroke: #6A18B7
}

.grid #case-study-block-polyvibe:hover .view:after {
    height: 65px;
    transform: scale(1)
}

.grid #case-study-block-tn {
    background-color: #118BEF;
    position: relative
}

.grid #case-study-block-tn a {
    padding: 0 26px
}

.grid #case-study-block-tn h2 {
    font-weight: 500;
    font-size: 13px;
    color: white;
    text-transform: uppercase;
    padding-bottom: 14px;
    display: inline-block;
    margin: 22px 0
}

.grid #case-study-block-tn h1 {
    font-weight: 300;
    font-size: 24px;
    color: white;
    margin: 0 0 22px 0;
    line-height: 1
}

.grid #case-study-block-tn p {
    margin: 0 0 60px;
    font-size: 16px;
    font-weight: 300;
    color: white;
    line-height: 1.2;
    padding: 0
}

@media screen and (max-width: 1024px) {
    .grid #case-study-block-tn p {
        margin-bottom: 60px !important
    }
}

@media screen and (max-width: 480px) {
    .grid #case-study-block-tn p {
        margin-bottom: 100px !important
    }
}

@media screen and (max-width: 375px) {
    .grid #case-study-block-tn p {
        margin-bottom: 60px !important
    }
}

.grid #case-study-block-tn .wrapper>img {
    display: inline-block;
    height: 200px;
    margin: 20px 0
}

.grid #case-study-block-tn .thumbnail-tn {
    max-width: 100%
}

.grid #case-study-block-tn .view {
    display: block;
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 65px;
    line-height: 65px;
    font-weight: 300;
    font-size: 16px;
    color: white;
    z-index: 999;
    transition: all .2s ease-in-out
}

.grid #case-study-block-tn .view svg polygon.st0 {
    fill: white
}

.grid #case-study-block-tn .view:after {
    content: '';
    display: inline-block;
    position: absolute;
    z-index: -1;
    left: 85px;
    top: 13px;
    width: 158px;
    right: auto;
    background-color: white;
    transition: all .2s ease-in-out;
    height: 40px !important;
    bottom: auto;
    transform: scaleX(0);
    transform-origin: 0% 50%
}

.grid #case-study-block-tn .view svg {
    position: relative;
    top: 3px;
    left: 10px
}

.grid #case-study-block-tn .view svg polygon.st0 {
    transition: all .2s ease-in
}

.grid #case-study-block-tn:hover .view {
    color: #118BEF;
    padding: 0 50px 0 55px
}

.grid #case-study-block-tn:hover .view svg polygon.st0 {
    fill: #118BEF;
    stroke: #118BEF
}

.grid #case-study-block-tn:hover .view:after {
    height: 65px;
    transform: scale(1)
}

.grid #case-study-block-tigo {
    background: #1f2a57 url(/assets/case-studies/tigo/tigo_bkg-768a269fa41566ad70c1ac117af4dfca8de8c82bcf8ec3d57703ac26833bfefc.jpg) no-repeat center bottom/cover;
    position: relative
}

.grid #case-study-block-tigo a {
    padding: 0 26px
}

.grid #case-study-block-tigo h2 {
    font-weight: 500;
    font-size: 13px;
    color: white;
    text-transform: uppercase;
    padding-bottom: 14px;
    margin: 22px 0 28px;
    text-align: center
}

.grid #case-study-block-tigo .line {
    width: 80px;
    height: 1px;
    background-color: white;
    position: absolute;
    top: 77px;
    left: 50%;
    margin-left: -40px;
    opacity: 0.4
}

.grid #case-study-block-tigo h1 {
    font-weight: 300;
    font-size: 24px;
    color: white;
    margin: 0 0 22px 0;
    line-height: 1;
    text-align: center
}

.grid #case-study-block-tigo p {
    margin: 0 0 0px;
    font-size: 16px;
    font-weight: 300;
    color: white;
    line-height: 1.2;
    padding: 0;
    text-align: center
}

@media screen and (max-width: 1024px) {
    .grid #case-study-block-tigo p {
        margin-bottom: 60px !important
    }
}

@media screen and (max-width: 480px) {
    .grid #case-study-block-tigo p {
        margin-bottom: 100px !important
    }
}

@media screen and (max-width: 375px) {
    .grid #case-study-block-tigo p {
        margin-bottom: 60px !important
    }
}

.grid #case-study-block-tigo img {
    display: inline-block;
    height: 323px;
    margin: 0px 0;
    position: absolute;
    bottom: 0;
    left: 0
}

@media screen and (max-width: 1024px) {
    .grid #case-study-block-tigo img {
        width: 100%;
        height: auto
    }
}

.grid #case-study-block-tigo .view {
    display: block;
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 65px;
    line-height: 65px;
    font-weight: 300;
    font-size: 16px;
    color: white;
    z-index: 999;
    transition: all .2s ease-in-out;
    text-align: center;
    padding-left: 26px
}

.grid #case-study-block-tigo .view svg polygon.st0 {
    fill: white
}

.grid #case-study-block-tigo .view:after {
    content: '';
    display: inline-block;
    position: absolute;
    z-index: -1;
    left: 85px;
    top: 13px;
    width: 158px;
    right: auto;
    background-color: white;
    transition: all .2s ease-in-out;
    height: 40px !important;
    bottom: auto;
    transform: scaleX(0);
    transform-origin: 0% 50%
}

.grid #case-study-block-tigo .view svg {
    position: relative;
    top: 3px;
    left: 10px
}

.grid #case-study-block-tigo .view svg polygon.st0 {
    transition: all .2s ease-in
}

.grid #case-study-block-tigo:hover .view {
    color: #03C8DE;
    padding: 0 50px 0 55px
}

.grid #case-study-block-tigo:hover .view svg polygon.st0 {
    fill: #03C8DE;
    stroke: #03C8DE
}

.grid #case-study-block-tigo:hover .view:after {
    height: 65px;
    transform: scale(1)
}

.grid #case-study-block-wellbin {
    background-color: #23BDC7;
    background-image: url(/assets/case-studies/wellbin/grid-631e1ca34a5fcb9baabb57f74567d1caaa6b322e797e80434c2f84eb2da17f08.png), url(/assets/case-studies/wellbin/grid2-586542147f7fa8fd160a5e34c0e7c72cfd666e08fd7192628d559e31d0ba779e.png);
    background-repeat: no-repeat, no-repeat;
    background-position: 300px 45px, right 20px;
    background-size: 225px 161px, 235px 182px;
    text-align: left
}

.grid #case-study-block-wellbin a {
    position: relative;
    overflow: hidden
}

.grid #case-study-block-wellbin .wrapper {
    float: left;
    width: 50%;
    padding: 0 50px 0 40px;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-62%);
    transform: translateY(-62%)
}

@media screen and (max-width: 480px) {
    .grid #case-study-block-wellbin .wrapper {
        padding: 0 50px 0 50px
    }
}

.grid #case-study-block-wellbin h2 {
    font-weight: 500;
    font-size: 13px;
    color: #ffffff;
    text-transform: uppercase;
    padding-bottom: 10px;
    display: inline-block;
    margin: 0;
    width: 250px
}

@media screen and (max-width: 480px) {
    .grid #case-study-block-wellbin h2 {
        text-align: center;
        width: 100%
    }
}

.grid #case-study-block-wellbin h1,
.grid #case-study-block-wellbin .dh1 {
    font-weight: 300;
    font-size: 24px;
    color: #ffffff;
    margin: 10px 0 5px 0;
    line-height: 1
}

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

    .grid #case-study-block-wellbin h1,
    .grid #case-study-block-wellbin .dh1 {
        text-align: center
    }
}

.grid #case-study-block-wellbin h1 .toi-project,
.grid #case-study-block-wellbin .dh1 .toi-project {
    color: #ffffff
}

.grid #case-study-block-wellbin p {
    margin: 20px 0 0;
    font-size: 16px;
    font-weight: 300;
    color: #ffffff;
    line-height: 1.2
}

.grid #case-study-block-wellbin .view {
    display: block;
    position: absolute;
    padding: 0 50px 0 40px;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75px;
    line-height: 85px;
    font-weight: 300;
    font-size: 16px;
    color: #2B4955;
    z-index: 999;
    transition: all .2s ease-in-out
}

.grid #case-study-block-wellbin .view:after {
    content: '';
    display: inline-block;
    position: absolute;
    z-index: -1;
    left: 40px;
    top: 23px;
    width: 158px;
    right: auto;
    background-color: white;
    transition: all .2s ease-in-out;
    height: 40px !important;
    bottom: auto;
    transform: scaleX(0);
    transform-origin: 0% 50%
}

.grid #case-study-block-wellbin .view svg {
    position: relative;
    top: 3px;
    left: 10px
}

.grid #case-study-block-wellbin .view svg polygon.st0 {
    fill: #2B4955;
    stroke: #2B4955;
    transition: all .2s ease-in
}

.grid #case-study-block-wellbin:hover .view {
    color: #2B4955;
    padding: 0 50px 0 55px
}

.grid #case-study-block-wellbin:hover .view svg polygon.st0 {
    fill: #2B4955;
    stroke: #2B4955
}

.grid #case-study-block-wellbin:hover .view:after {
    height: 65px;
    transform: scale(1)
}

.load-more {
    text-align: center;
    background: #fff200;
    transition: background .2s ease-in
}

.load-more #load-more {
    width: 100%;
    display: inline-block;
    padding-top: 85px;
    padding-bottom: 85px;
    cursor: pointer;
    color: black;
    font-weight: 300;
    font-size: 34px;
    -webkit-transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out
}

.load-more .plus {
    cursor: pointer;
    color: black;
    font-weight: 300;
    font-size: 34px;
    width: 62px;
    height: 62px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -3px;
    margin-right: 20px;
    border: 1px solid #000000;
    border-radius: 50%;
    -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
    transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1)
}

.load-more .plus .plusplus {
    position: absolute;
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    width: 21px;
    height: 21px;
    margin-top: -10px;
    margin-left: -10px;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out
}

.load-more .plus .plusplus::before,
.load-more .plus .plusplus::after {
    content: '';
    display: block;
    position: absolute;
    background: black;
    -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
    transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1)
}

.load-more .plus .plusplus::before {
    top: 10px;
    left: 0;
    width: 21px;
    height: 1px
}

.load-more .plus .plusplus::after {
    top: 0;
    left: 10px;
    width: 1px;
    height: 21px
}

.load-more:hover .plus {
    border-width: 31px
}

.load-more:hover .plus .plusplus::before,
.load-more:hover .plus .plusplus::after {
    background: #fff200
}

.load-more:active .plus {
    -webkit-transform: scale(0.9, 0.9);
    transform: scale(0.9, 0.9)
}

#load-more-row {
    overflow: hidden;
    height: 224px;
    transition: all .4s ease-in-out;
    z-index: 999999999
}

#load-more-row.done {
    height: 15px;
    opacity: 1
}

#load-more-row.done span {
    cursor: default !important
}

#footer {
    background-color: white;
    padding-top: 90px;
    padding-bottom: 72px;
    padding-left: 30px;
    padding-right: 30px
}

#footer .copyright {
    position: absolute;
    top: 14px;
    right: 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: rgba(22, 54, 79, 0.3)
}

#footer>.row {
    max-width: 1280px;
    margin: 0 auto
}

#footer h1 {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    color: #b7c2c9;
    margin: 0 0 35px 0;
    letter-spacing: 1px;
    line-height: 16px
}

#footer .about,
#footer .contact {
    padding-left: 15px;
    padding-right: 15px
}

#footer .about {
    position: relative;
    padding-bottom: 32px;
    padding-left: 0
}

#footer .about p {
    font-weight: 300;
    font-size: 22px;
    line-height: 28px;
    color: #16364f;
    line-height: 1.6;
    padding-right: 90px;
    text-align: left;
    margin: 0 0 20px 0
}

#footer .about .social-links {
    position: absolute;
    top: auto;
    right: 15px;
    bottom: 0;
    left: 15px
}

#footer .about .social-links>a {
    display: inline-block;
    padding: 0 30px 0 0;
    transition: opacity 150ms ease-in-out
}

#footer .about .social-links>a>img {
    max-height: 31px
}

#footer .about .social-links>a:last-child {
    padding-right: 0
}

#footer .about .social-links>a:hover {
    opacity: .5
}

#footer .contact {
    padding-left: 0
}

#footer .contact p {
    font-weight: 300;
    font-size: 32px;
    line-height: 38px;
    color: #16364f;
    line-height: 1.2;
    margin: 0;
    letter-spacing: .5px
}

#footer .contact p strong {
    font-weight: 600
}

#footer .contact a {
    line-height: 34px;
    display: inline-block;
    margin-top: 36px;
    font-size: 28px;
    color: #32bbdb;
    font-weight: 300;
    text-decoration: none;
    -webkit-transition: color 0.2s ease-in-out, transform 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: color 0.1s ease-in-out, transform 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
    top: -5px
}

#footer .contact a strong {
    font-weight: 400
}

#footer .contact a svg {
    position: relative;
    top: 8px;
    left: 6px;
    display: inline-block
}

#footer .contact a svg path,
#footer .contact a svg polygon {
    fill: #00b5ec;
    -webkit-transition: fill .1s ease-in-out;
    transition: fill .1s ease-in-out
}

#footer .contact a:hover {
    color: #16364f
}

#footer .contact a:hover svg path,
#footer .contact a:hover svg polygon {
    fill: #16364f
}

#footer .contact a:active {
    -webkit-transform: scale(0.9, 0.9);
    transform: scale(0.9, 0.9)
}

#footer .separator {
    padding-left: 0;
    padding-right: 0
}

#footer .separator hr {
    margin: 79px 0 22px 0;
    border-color: rgba(255, 255, 255, 0.025);
    border-width: 2px
}

#footer .bottom-left {
    padding-left: 15px;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: rgba(22, 54, 79, 0.3)
}

#footer .bottom-right {
    padding-left: 30px;
    padding-right: 30px;
    font-weight: 400;
    font-size: 13px;
    color: #00b5ec;
    text-align: right
}

#footer .bottom-right a {
    color: #00b5ec;
    text-decoration: none;
    transition: all .3s ease-in-out;
    display: inline-block;
    margin-right: 42px;
    line-height: 16px;
    -webkit-transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

#footer .bottom-right a:last-child {
    margin-right: 0 !important
}

#footer .bottom-right a svg {
    max-width: 18px;
    margin-right: 6px;
    vertical-align: top
}

#footer .bottom-right a svg path {
    -webkit-transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

#footer .bottom-right a:hover {
    color: #16364f
}

#footer .bottom-right a:hover.twitter svg path,
#footer .bottom-right a:hover.facebook svg path,
#footer .bottom-right a:hover.instagram svg path,
#footer .bottom-right a:hover.vimeo svg path {
    stroke: #16364f
}

#footer .bottom-right a:hover.dribbble svg path {
    fill: #16364f
}

#footer .bottom-right a:active {
    -webkit-transform: scale(0.9, 0.9);
    transform: scale(0.9, 0.9)
}

@media screen and (min-width: 1600px) {
    #heroWrapper .overlay>span {
        top: calc(50% - 300px)
    }
}

@media screen and (max-width: 1600px) {
    .container {
        width: 100%;
        max-width: 100%
    }

    #gridWrapper {
        padding-left: 0;
        padding-right: 0
    }

    #gridWrapper:before {
        display: none
    }

    .grid .dribbble,
    .grid .vimeo,
    .grid .twitter,
    .grid .instagram,
    .grid .facebook,
    .grid .case-study,
    .grid .image {
        height: 240px
    }

    .grid .grid-sizer,
    .grid .dribbble,
    .grid .vimeo,
    .grid .twitter,
    .grid .instagram,
    .grid .facebook,
    .grid .image {
        width: 25%
    }

    .grid .case-study {
        width: 50%
    }

    .grid .case-study.vertical {
        height: 480px;
        width: 25%
    }
}

@media screen and (max-width: 1440px) {
    .preloader {
        overflow: hidden
    }

    #page,
    .preloader {
        margin: 0 auto
    }

    #gridWrapper {
        max-width: 1281px;
        margin: 0 auto
    }
}

@media screen and (max-width: 1366px) {
    .grid .case-study.tag .wrapper {
        transform: translate3d(-50%, -50%, 0)
    }

    .grid .case-study.tag h2 {
        margin-bottom: 18px;
        font-size: 12px
    }

    .grid .case-study.tag h1 {
        font-size: 24px;
        margin-bottom: 18px
    }

    .grid .case-study.tag p {
        font-size: 18px
    }

    .grid .case-study.tag img.app {
        margin-top: 20px
    }

    .grid .case-study.genee h2 {
        margin-bottom: 6px;
        font-size: 12px
    }

    .grid .case-study.genee h1 {
        font-size: 24px;
        margin-bottom: 18px
    }

    .grid .case-study.genee p {
        font-size: 18px
    }

    #footer {
        padding-bottom: 45px
    }

    #footer .about p {
        font-size: 22px
    }

    #footer .about .social-links {
        margin-top: 32px
    }

    #footer .contact p {
        font-size: 30px
    }

    .related-case-studies .left-case-study .content {
        padding-left: 30px !important
    }

    .more-case-studies {
        font-size: 28px !important
    }

    a.go-top {
        bottom: 27px !important
    }
}

@media screen and (max-width: 1280px) {
    #hero {
        padding-top: 40px;
        padding-bottom: 40px
    }

    #hero .down {
        bottom: 40px
    }

    .cs-head {
        padding-top: 27px !important
    }

    #heroBackground {
        display: none !important
    }

    .related-case-studies .tradeagrape .content,
    .related-case-studies .djlist .content,
    .related-case-studies .messi .content,
    .related-case-studies .espn .content,
    .related-case-studies .espnjo .content,
    .related-case-studies .red-bull .content,
    .related-case-studies .genee .content,
    .related-case-studies .wellbin .content,
    .related-case-studies .tn .content,
    .related-case-studies .li5 .content,
    .related-case-studies .tigo .content {
        min-height: 510px !important
    }
}

@media screen and (max-width: 1200px) {

    #page,
    .preloader {
        width: 100%;
        margin: 0 auto
    }

    .grid .dribbble,
    .grid .vimeo,
    .grid .twitter,
    .grid .instagram,
    .grid .facebook,
    .grid .case-study,
    .grid .image {
        height: 215px
    }

    .grid .case-study.vertical {
        height: 430px
    }

    #footer .contact {
        padding-left: 15px
    }

    #footer .contact a {
        margin-top: 0
    }
}

@media screen and (max-width: 1140px) {
    .grid .twitter span.tweet h1 {
        font-weight: 300;
        font-size: 16px;
        color: white;
        margin: 10px 0 15px 0
    }

    .grid .case-study.genee .wrapper,
    .grid .case-study.tag .wrapper {
        top: 47.5%
    }

    .grid .case-study.genee .wrapper>img,
    .grid .case-study.tag .wrapper>img {
        margin: 25px 0
    }

    .grid .case-study.genee h1,
    .grid .case-study.tag h1 {
        font-size: 20px;
        margin-bottom: 14px
    }

    .grid .case-study.genee p,
    .grid .case-study.tag p {
        font-size: 16px
    }

    #footer .about p {
        padding-right: 0 !important
    }

    #caseStudyContent .about-project tr {
        display: table-cell
    }

    #caseStudyContent .about-project tr td {
        display: block;
        width: 100% !important
    }

    #caseStudyContent .about-project tr td:first-child {
        text-align: center;
        margin-bottom: 15px
    }

    .related-case-studies .left-case-study,
    .related-case-studies .right-case-study {
        width: 100% !important
    }

    .related-case-studies .left-case-study .content,
    .related-case-studies .right-case-study .content {
        max-width: initial !important
    }

    .related-case-studies .left-case-study .content h2,
    .related-case-studies .left-case-study .content h1,
    .related-case-studies .left-case-study .content p,
    .related-case-studies .left-case-study .content a,
    .related-case-studies .right-case-study .content h2,
    .related-case-studies .right-case-study .content h1,
    .related-case-studies .right-case-study .content p,
    .related-case-studies .right-case-study .content a {
        width: 100% !important
    }

    .related-case-studies .korefusion img.shot,
    .related-case-studies .genee img.shot,
    .related-case-studies .tradeagrape img.shot,
    .related-case-studies .messi img.shot {
        width: 40% !important
    }
}

@media screen and (max-width: 1024px) {

    #page,
    .preloader {
        max-width: 100%;
        margin: 0 auto
    }

    .grid .grid-sizer,
    .grid .dribbble,
    .grid .vimeo,
    .grid .twitter,
    .grid .instagram,
    .grid .facebook,
    .grid .case-study,
    .grid .image {
        width: 50%;
        height: 372px
    }

    .grid .twitter span.tweet h1 {
        padding-left: 100px;
        padding-right: 100px
    }

    .grid .case-study h2 {
        font-size: 18px !important
    }

    .grid .case-study h1 {
        font-size: 33px !important
    }

    .grid .case-study p {
        font-size: 20px !important
    }

    .grid .case-study .view {
        font-size: 18px !important
    }

    .grid .case-study.horizontal p {
        width: 70% !important
    }

    .grid .case-study.vertical p {
        width: 70% !important;
        margin: 0 auto !important
    }

    .grid .case-study.messi {
        padding-top: 40px !important
    }

    .grid .case-study.genee h2 {
        margin-top: 35px;
        margin-bottom: 0
    }

    .grid .case-study.horizontal {
        width: 100%
    }

    .grid .case-study.vertical {
        width: 50%;
        height: 744px
    }

    #footer .bottom-right {
        padding-left: 0 !important;
        text-align: right !important
    }

    #footer .bottom-right a {
        max-width: 16px;
        max-height: 16px;
        overflow: hidden;
        margin-right: 28px !important
    }

    a.go-top {
        display: none !important
    }

    .related-case-studies .left-case-study .content,
    .related-case-studies .right-case-study .content {
        min-height: 350px !important
    }

    .related-case-studies .left-case-study .content h1,
    .related-case-studies .right-case-study .content h1 {
        margin-top: 20px !important
    }

    .related-case-studies .left-case-study .content p,
    .related-case-studies .right-case-study .content p {
        margin-top: 10px !important
    }

    .related-case-studies .left-case-study .content a,
    .related-case-studies .right-case-study .content a {
        margin-top: 40px !important;
        margin-bottom: 35px !important
    }

    .related-case-studies .korefusion img.shot,
    .related-case-studies .tradeagrape img.shot,
    .related-case-studies .messi img.shot {
        width: 35% !important
    }

    .related-case-studies .genee img.shot {
        width: 30% !important
    }

    #caseStudyContent .about-project table td:last-child p {
        max-width: 100% !important
    }
}

@media screen and (max-width: 991px) {
    #footer .about {
        padding-bottom: 0
    }

    #footer .about .social-links {
        display: none
    }

    #footer .contact {
        margin-top: 50px;
        margin-bottom: 75px
    }

    #footer .copyright {
        display: none
    }

    #footer .bottom-right {
        padding-right: 15px
    }

    .grid .case-study h2 {
        font-size: 13px !important
    }

    .grid .case-study h1 {
        font-size: 24px !important
    }

    .grid .case-study p {
        font-size: 16px !important
    }

    .grid .case-study .view {
        font-size: 16px !important
    }

    .grid .case-study.horizontal p {
        width: 100% !important
    }

    .grid .case-study.vertical p {
        width: 100% !important;
        margin: 0 auto !important
    }

    .grid .case-study.messi .wrapper {
        padding-top: 20px !important
    }

    .grid .twitter span.tweet h1 {
        padding-left: 0;
        padding-right: 0
    }

    #case-study-block-red_bull_records {
        background-position: right top, 75% bottom !important;
        background-size: 162px 175px, 50% auto !important
    }
}

@media screen and (max-width: 768px) {
    #hero .tagline h1 {
        font-size: 32px;
        line-height: 38px
    }

    #hero .tagline h2 {
        font-size: 19px;
        line-height: 23px
    }

    #hero .down {
        bottom: 70px
    }

    .grid .dribbble,
    .grid .vimeo,
    .grid .twitter,
    .grid .instagram,
    .grid .facebook,
    .grid .case-study,
    .grid .image {
        height: 290px
    }

    .grid .grid-sizer,
    .grid .dribbble,
    .grid .vimeo,
    .grid .twitter,
    .grid .instagram,
    .grid .facebook,
    .grid .image {
        width: 50%
    }

    .grid .case-study {
        width: 100%
    }

    .grid .case-study.vertical {
        width: 50%;
        height: 580px
    }

    #footer .about {
        margin-bottom: 50px
    }

    #footer .bottom-right a {
        margin-right: 30px
    }

    .cs-hero .cs-head {
        padding-top: 40px !important
    }

    .cs-hero .cs-head .logo a {
        height: 45px;
        line-height: 45px;
        padding-left: 0
    }

    .cs-hero .cs-head .links a {
        height: 45px;
        line-height: 45px
    }

    .cs-hero a.see-more-case-study {
        bottom: 20px !important
    }

    .cs-hero .title-subtitle-stores h1,
    .cs-hero .title-subtitle-stores .dh1 {
        font-size: 64px !important;
        margin-bottom: 10px !important
    }

    .cs-hero .title-subtitle-stores h1 .toi-project,
    .cs-hero .title-subtitle-stores .dh1 .toi-project {
        display: none
    }

    .cs-hero .title-subtitle-stores h2 {
        font-size: 24px !important;
        margin-bottom: 20px !important
    }

    .cs-hero .title-subtitle-stores .stores {
        font-size: 18px
    }

    .more-case-studies {
        font-size: 24px !important
    }

    .more-case-studies strong {
        display: block
    }

    body#error-404 .wrapper {
        max-width: 320px
    }

    body#error-404 .wrapper h1 {
        font-size: 100px !important
    }

    body#error-404 .wrapper h2 {
        font-size: 24px !important
    }

    body#error-404 .wrapper a.homepage-link {
        line-height: 24px;
        font-size: 20px
    }

    body#error-404 .wrapper a.homepage-link svg {
        height: 28px;
        width: 28px
    }

    #case-study-block-red_bull_records {
        background-position: right top, right bottom !important
    }
}

@media screen and (max-width: 640px) {
    #hero {
        padding-top: 30px
    }

    #hero .tagline h1 {
        font-size: 32px;
        line-height: 38px;
        margin-bottom: 48px
    }

    #hero .tagline h2 {
        font-size: 19px;
        line-height: 23px
    }

    #hero .down {
        bottom: 30px
    }

    .cs-hero .title-subtitle-stores {
        padding-left: 30px
    }

    .related-case-studies .korefusion img.shot,
    .related-case-studies .tradeagrape img.shot,
    .related-case-studies .messi img.shot {
        width: 50% !important
    }

    .related-case-studies .genee img.shot {
        width: 45% !important
    }

    body#error-404 a.logo {
        top: 15px
    }

    body#error-404 .wrapper h1 {
        margin-bottom: 0
    }
}

@media screen and (max-width: 480px) {
    #hero .social>a {
        padding: 0 10px
    }

    #hero .tagline h1 {
        font-size: 32px;
        line-height: 38px;
        margin-bottom: 10px
    }

    #hero .tagline h2 {
        font-size: 19px;
        line-height: 23px
    }

    .grid .dribbble,
    .grid .vimeo,
    .grid .twitter,
    .grid .instagram,
    .grid .facebook,
    .grid .case-study,
    .grid .image {
        height: 310px
    }

    .grid .grid-sizer,
    .grid .dribbble,
    .grid .vimeo,
    .grid .twitter,
    .grid .instagram,
    .grid .facebook,
    .grid .image {
        width: 100%
    }

    .grid .case-study {
        width: 100%;
        height: 620px
    }

    .grid .case-study.vertical {
        width: 100%;
        height: 620px
    }

    .grid .case-study.horizontal .wrapper {
        width: 100% !important;
        height: 40%;
        top: auto !important;
        left: 0px;
        bottom: 0px;
        right: auto;
        position: absolute !important
    }

    .grid .case-study.horizontal .view {
        width: 100% !important;
        text-align: center
    }

    .grid .case-study.horizontal .app {
        height: 60% !important;
        width: 100% !important;
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: auto;
        max-width: none !important;
        text-align: center !important
    }

    .grid .case-study#case-study-block-genee .wrapper {
        top: 65px !important;
        bottom: auto
    }

    .grid .case-study#case-study-block-genee .app {
        top: auto;
        bottom: 65px
    }

    .grid .case-study#case-study-block-genee .view {
        color: white
    }

    .grid .case-study#case-study-block-genee .view:after {
        height: 65px
    }

    .grid .case-study#case-study-block-genee .view svg polygon.st0 {
        fill: white;
        stroke: white
    }

    .grid .case-study#case-study-block-tag .view {
        color: #443e63
    }

    .grid .case-study#case-study-block-tag .view:after {
        height: 65px
    }

    .grid .case-study#case-study-block-tag .view svg polygon.st0 {
        fill: #443e63;
        stroke: #443e63
    }

    .grid .case-study#case-study-block-djlist {
        background-size: 240px auto;
        background-position: center 5%
    }

    .grid .case-study#case-study-block-djlist .view {
        color: white
    }

    .grid .case-study#case-study-block-djlist .view:after {
        height: 65px
    }

    .grid .case-study#case-study-block-djlist .view svg polygon.st0 {
        fill: white;
        stroke: white
    }

    .grid .case-study#case-study-block-messi .view {
        color: black
    }

    .grid .case-study#case-study-block-messi .view:after {
        height: 65px
    }

    .grid .case-study#case-study-block-messi .view svg polygon.st0 {
        fill: black;
        stroke: black
    }

    .grid .case-study#case-study-block-espn {
        background-size: 110% auto;
        background-position: 100% 65%
    }

    .grid .case-study#case-study-block-espn .wrapper {
        height: 50%;
        top: 30px !important;
        -webkit-transform: none !important;
        transform: none !important
    }

    .grid .case-study#case-study-block-espn .view {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        color: #f4371b
    }

    .grid .case-study#case-study-block-espn .view:after {
        height: 65px
    }

    .grid .case-study#case-study-block-espn .view svg polygon.st0 {
        fill: #f4371b;
        stroke: #f4371b
    }

    .grid .case-study#case-study-block-wellbin {
        background-position: center 90px;
        background-size: 225px 161px, 100% 206px
    }

    .grid .case-study.horizontal[id*=case-study-block] .wrapper {
        -webkit-transform: translateY(-35px) !important;
        transform: translateY(-35px) !important;
        padding-left: 25px;
        padding-right: 25px
    }

    .grid .case-study#case-study-block-red_bull_records {
        background-size: 162px 175px, 320px auto !important;
        background-position: right top, 38% bottom !important;
        background-position: right top, 38% calc(100% - 65px) !important
    }

    .grid .case-study#case-study-block-red_bull_records .wrapper {
        -webkit-transform: translateY(-100%) !important;
        transform: translateY(-100%) !important
    }

    .grid .case-study#case-study-block-red_bull_records .view {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        color: #CD003B
    }

    .grid .case-study#case-study-block-red_bull_records .view:after {
        height: 65px
    }

    .grid .case-study#case-study-block-red_bull_records .view svg polygon.st0 {
        fill: #CD003B;
        stroke: #CD003B
    }

    #load-more-row {
        height: 198px
    }

    .load-more {
        padding-top: 0;
        padding-bottom: 0
    }

    .load-more #load-more {
        font-size: 24px;
        padding-top: 65px;
        padding-bottom: 65px
    }

    .load-more #load-more .plus {
        font-size: 24px;
        -webkit-transform: scale(0.75, 0.75);
        margin-top: -16px;
        top: 7px;
        margin-right: 5px
    }

    #footer {
        padding-bottom: 75px
    }

    #footer h1 {
        margin-bottom: 25px
    }

    #footer .about {
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 50px
    }

    #footer .about p {
        padding-right: 0
    }

    #footer .contact {
        padding-left: 0
    }

    #footer .contact p {
        display: inline
    }

    #footer .contact a {
        margin-left: 0
    }

    .bottom-left {
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    .bottom-right {
        padding-right: 0 !important;
        padding-left: 0 !important;
        text-align: right !important
    }

    .bottom-right a {
        max-width: 18px;
        max-height: 18px;
        overflow: hidden;
        margin-right: 28px !important
    }

    .cs-hero .cs-head .links a {
        font-size: 16px !important
    }

    .cs-hero .title-subtitle-stores h2 {
        margin-bottom: 35px !important
    }

    .cs-hero .title-subtitle-stores .stores a {
        display: block !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        margin-bottom: 15px
    }

    .related-case-studies .left-case-study,
    .related-case-studies .right-case-study {
        width: 100% !important
    }

    .related-case-studies .left-case-study .content,
    .related-case-studies .right-case-study .content {
        padding-left: 15px !important;
        max-width: initial !important
    }

    .related-case-studies .left-case-study .content h2,
    .related-case-studies .left-case-study .content h1,
    .related-case-studies .left-case-study .content p,
    .related-case-studies .left-case-study .content a,
    .related-case-studies .right-case-study .content h2,
    .related-case-studies .right-case-study .content h1,
    .related-case-studies .right-case-study .content p,
    .related-case-studies .right-case-study .content a {
        position: static !important;
        width: 100% !important;
        max-width: initial !important
    }

    .related-case-studies .left-case-study .content img.shot,
    .related-case-studies .right-case-study .content img.shot {
        display: block !important;
        position: static !important;
        float: right;
        width: auto !important
    }

    .related-case-studies .left-case-study .content img.shot:before,
    .related-case-studies .right-case-study .content img.shot:before {
        content: '';
        width: 100%;
        display: block;
        float: none;
        clear: both
    }

    .related-case-studies .korefusion img.shot.shot.shot,
    .related-case-studies .tradeagrape img.shot.shot.shot,
    .related-case-studies .messi img.shot.shot.shot {
        width: 70% !important
    }

    .related-case-studies .genee img.shot.shot.shot {
        width: 65% !important;
        margin: 0 auto !important;
        float: none !important;
        position: relative !important;
        left: -7.5px
    }

    .related-case-studies .espn img.shot.shot.shot {
        width: 100% !important;
        height: auto !important;
        -webkit-transform: none;
        transform: none;
        margin-top: 15px;
        margin-bottom: 15px
    }

    .related-case-studies .djlist img.shot.shot.shot {
        width: 100% !important;
        right: 0 !important;
        -webkit-transform: none;
        transform: none
    }

    #caseStudyContent .about-project {
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    #caseStudyContent .about-project p {
        font-size: 22px !important;
        line-height: 28px !important
    }

    .footer-case-study {
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    a.go-top {
        right: 50% !important;
        bottom: 15px !important;
        margin-right: -8px
    }
}

@media screen and (max-width: 414px) {
    #hero .social>a {
        padding: 0 7px
    }

    #footer h1 {
        margin-bottom: 15px
    }

    #footer .about p {
        font-size: 18px
    }

    #footer .contact p {
        font-size: 20px
    }

    #footer .contact a {
        font-size: 20px
    }

    #footer .contact a svg {
        height: 22px;
        width: 22px;
        top: 6px;
        left: 4px
    }

    #footer .separator hr {
        margin: 25px 0 10px 0
    }

    .cs-head .links {
        padding-left: 0 !important
    }

    .cs-head .links a {
        margin: 0 10px !important
    }

    .cs-head .links a:first-child {
        display: none;
        margin-left: 0 !important
    }

    .cs-head .links a.contact {
        padding: 0 10px !important;
        margin-right: 0 !important
    }

    .about-project {
        padding-top: 60px !important;
        padding-bottom: 60px !important
    }

    .more-case-studies {
        font-size: 20px !important
    }
}

@media screen and (max-width: 375px) {

    .grid .dribbble,
    .grid .vimeo,
    .grid .twitter,
    .grid .instagram,
    .grid .facebook,
    .grid .case-study,
    .grid .image {
        height: 282px
    }

    .grid .dribbble,
    .grid .vimeo,
    .grid .twitter,
    .grid .instagram,
    .grid .facebook,
    .grid .image {
        width: 100%
    }

    .grid .case-study {
        width: 100%;
        height: 564px
    }

    .grid .case-study.vertical {
        width: 100%;
        height: 564px
    }

    #hero .tagline>.col-xs-12 {
        padding-left: 0
    }

    #hero .tagline h1 {
        font-size: 32px;
        line-height: 38px
    }

    #hero .tagline h2 {
        font-size: 19px;
        line-height: 23px
    }

    #hero .tagline h2 a img {
        max-width: 24px
    }

    #hero .logo {
        max-width: 20%
    }

    #hero .social {
        max-width: 80%;
        padding-left: 0;
        padding-right: 0
    }

    #hero .social>a {
        padding: 0 6px;
        line-height: 35px
    }

    #hero .social>a img {
        max-height: 24px;
        vertical-align: middle
    }

    #footer .contact p {
        display: block
    }

    #footer .contact p strong {
        display: block
    }

    #footer .contact a {
        display: block;
        margin-left: 0
    }

    #footer .bottom-right,
    #footer .bottom-left {
        width: 100%;
        text-align: center !important
    }

    #footer .bottom-left {
        margin-bottom: 20px
    }

    #footer .bottom-right a:last-child {
        margin-right: 0 !important
    }
}

@media screen and (max-width: 320px) {
    #hero .tagline {
        max-width: 305px
    }

    #hero .tagline h1 {
        font-size: 32px;
        line-height: 38px;
        padding-right: 0
    }

    #hero .tagline h2 {
        font-size: 19px;
        line-height: 23px
    }

    .grid .dribbble,
    .grid .vimeo,
    .grid .twitter,
    .grid .instagram,
    .grid .facebook,
    .grid .case-study,
    .grid .image {
        height: 240px
    }

    .grid .case-study {
        height: 480px
    }

    .grid .case-study.vertical {
        height: 480px
    }

    .grid .case-study.genee .wrapper {
        height: 100%;
        width: 100%;
        -webkit-transform: none;
        transform: none;
        float: right;
        padding-top: 240px;
        position: static;
        top: auto
    }

    .grid .case-study.genee .wrapper h2 {
        margin-top: 20px
    }

    .grid .case-study.genee .view {
        width: 100%;
        float: right
    }

    .grid .case-study.genee .app {
        height: 50%;
        width: 100%;
        max-width: 100%;
        float: left;
        margin-top: -480px
    }

    .cs-hero .cs-head .links a {
        font-size: 14px !important
    }

    .cs-hero .title-subtitle-stores h1 {
        font-size: 38px !important
    }

    .cs-hero .title-subtitle-stores h2 {
        font-size: 18px !important
    }

    .more-case-studies {
        font-size: 18px !important
    }
}

@media screen and (max-height: 320px) {
    .cs-hero .cs-head {
        padding-top: 20px !important
    }

    .cs-hero .title-subtitle-stores h1 {
        font-size: 54px !important
    }

    .cs-hero .title-subtitle-stores h2 {
        font-size: 20px !important
    }

    .cs-hero .title-subtitle-stores .stores {
        font-size: 16px !important
    }

    .cs-hero a.see-more-case-study {
        bottom: 0 !important
    }
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 4) {
    #hero .down {
        bottom: 130px
    }
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) {
    #hero .down {
        bottom: 160px
    }
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (-webkit-device-pixel-ratio: 3) {
    #hero .down {
        bottom: 160px
    }
}

@media only screen and (min-device-width: 370px) and (max-device-height: 815px) and (-webkit-device-pixel-ratio: 3) {
    #hero .down {
        bottom: 170px
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    #hero .down {
        bottom: 130px
    }
}

@media only screen and (max-device-height: 380px) and (orientation: landscape) {
    #hero .down {
        bottom: 50px
    }
}

@media only screen and (max-device-height: 415px) and (orientation: landscape) {
    #hero .down {
        bottom: 50px
    }
}

ul#items li#case-study-block-test {
    background: green
}

ul#items li#case-study-block-test a {
    color: white
}

body#case-study-page-test {
    color: white;
    background: green
}

body#case-study-page-test .preloader {
    background: green
}

body#case-study-page-test .preloader .bar {
    background: #fff200
}

body#case-study-page-test .preloader .bar:after {
    box-shadow: 0 0 4px #fff200, 0 0 4px #fff200, 0 0 4px #fff200
}

body#case-study-page-test h1 {
    margin: 0
}

ul#items li#case-study-block-djlist {
    background: #64008a
}

ul#items li#case-study-block-djlist a {
    color: white
}

body#case-study-page-djlist {
    color: white;
    background: #f1f1f1
}

body#case-study-page-djlist #page {
    background: #64008a
}

body#case-study-page-djlist #page .preloader {
    background: #64008a
}

body#case-study-page-djlist #page .preloader .bar {
    background: white
}

body#case-study-page-djlist #page .preloader .bar:after {
    box-shadow: 0 0 4px white, 0 0 4px white, 0 0 4px white
}

body#case-study-page-djlist .cs-head a {
    text-decoration: none;
    color: white
}

body#case-study-page-djlist .cs-head .links a.contact {
    border-color: white
}

body#case-study-page-djlist .cs-head .links a.contact:hover {
    color: #64008a
}

body#case-study-page-djlist .title-subtitle-stores h1 {
    color: white
}

body#case-study-page-djlist .title-subtitle-stores h2 {
    color: rgba(255, 255, 255, 0.5)
}

body#case-study-page-djlist .title-subtitle-stores .stores a {
    text-decoration: none;
    color: white
}

body#case-study-page-djlist a.see-more-case-study svg path {
    stroke: #64008a;
    fill: #64008a
}

body#case-study-page-djlist #caseStudyContent {
    background: white;
    padding-left: 0;
    padding-right: 0
}

body#case-study-page-djlist #caseStudyContent .about-project table td:first-child,
body#case-study-page-djlist #caseStudyContent .about-project tr td:first-child {
    color: #152737
}

body#case-study-page-djlist #caseStudyContent .about-project table td:last-child p,
body#case-study-page-djlist #caseStudyContent .about-project tr td:last-child p {
    color: #1a2b44
}

body#case-study-page-djlist #caseStudyContent .about-project a {
    color: #64008a;
    text-decoration: none
}

body#case-study-page-djlist #caseStudyContent .consistency {
    height: 800px;
    width: 100%;
    padding-top: 200px;
    position: relative;
    margin: 0 0 400px 0;
    background: #944cb8;
    background: -moz-linear-gradient(top, #944cb8 0%, #2dcaa2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #944cb8), color-stop(100%, #2dcaa2));
    background: -webkit-linear-gradient(top, #944cb8 0%, #2dcaa2 100%);
    background: -o-linear-gradient(top, #944cb8 0%, #2dcaa2 100%);
    background: -ms-linear-gradient(top, #944cb8 0%, #2dcaa2 100%);
    background: linear-gradient(to bottom, #944cb8 0%, #2dcaa2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#944cb8', endColorstr='#2dcaa2', GradientType=0)
}

body#case-study-page-djlist #caseStudyContent .consistency h1 {
    font-size: 38px;
    font-weight: 300;
    color: white;
    letter-spacing: 8px;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 80px 0 !important;
    line-height: 46px
}

body#case-study-page-djlist #caseStudyContent .consistency h2 {
    color: #dcfff9;
    font-size: 22px;
    font-weight: 300;
    line-height: 28px;
    margin: 0 auto 190px auto;
    max-width: 830px;
    text-align: center
}

body#case-study-page-djlist #caseStudyContent .consistency img.waves,
body#case-study-page-djlist #caseStudyContent .consistency img.showcase {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 50%;
    right: auto;
    max-width: 100%
}

body#case-study-page-djlist #caseStudyContent .onboarding {
    width: 100%;
    background: #64008a;
    padding-top: 160px;
    text-align: center
}

body#case-study-page-djlist #caseStudyContent .onboarding>.container {
    overflow-x: hidden
}

body#case-study-page-djlist #caseStudyContent .onboarding h1 {
    text-align: center;
    color: white;
    font-size: 38px;
    font-weight: 300;
    letter-spacing: 8px;
    text-transform: uppercase;
    line-height: 46px
}

body#case-study-page-djlist #caseStudyContent .onboarding h2 {
    text-align: center;
    margin: 90px auto 160px auto;
    color: #e6c4f3;
    font-size: 22px;
    font-weight: 300;
    line-height: 28px;
    max-width: 570px
}

body#case-study-page-djlist #caseStudyContent .onboarding .steps {
    position: relative
}

body#case-study-page-djlist #caseStudyContent .onboarding .steps:after {
    content: '';
    display: block;
    width: 200%;
    height: 1px;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    bottom: auto;
    background: #782d95;
    z-index: 2;
    margin-left: -50%
}

body#case-study-page-djlist #caseStudyContent .onboarding .step1,
body#case-study-page-djlist #caseStudyContent .onboarding .step2,
body#case-study-page-djlist #caseStudyContent .onboarding .step3 {
    padding: 0 30px;
    text-align: center;
    position: relative
}

body#case-study-page-djlist #caseStudyContent .onboarding .step1:after,
body#case-study-page-djlist #caseStudyContent .onboarding .step2:after,
body#case-study-page-djlist #caseStudyContent .onboarding .step3:after {
    content: '';
    display: block;
    position: absolute;
    top: 53px;
    left: 50%;
    margin-left: -8px;
    width: 16px;
    height: 16px;
    border: 1px solid #aa68c3;
    border-radius: 8px;
    background: white;
    -webkit-box-shadow: inset 0 0 0 3px #64008a;
    box-shadow: inset 0 0 0 3px #64008a;
    z-index: 3
}

body#case-study-page-djlist #caseStudyContent .onboarding .step1>img,
body#case-study-page-djlist #caseStudyContent .onboarding .step2>img,
body#case-study-page-djlist #caseStudyContent .onboarding .step3>img {
    max-width: 100%
}

body#case-study-page-djlist #caseStudyContent .onboarding .step1 p,
body#case-study-page-djlist #caseStudyContent .onboarding .step2 p,
body#case-study-page-djlist #caseStudyContent .onboarding .step3 p {
    color: #e8c3f7;
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    padding: 0 0 40px 0;
    margin: 0 0 55px 0
}

body#case-study-page-djlist #caseStudyContent .onboarding .step1 p strong,
body#case-study-page-djlist #caseStudyContent .onboarding .step2 p strong,
body#case-study-page-djlist #caseStudyContent .onboarding .step3 p strong {
    color: white;
    font-size: 14px;
    font-weight: 500;
    padding-right: 10px
}

body#case-study-page-djlist #caseStudyContent .onboarding img.laptop {
    position: relative;
    top: 120px
}

body#case-study-page-djlist #caseStudyContent .event-details {
    padding-top: 140px;
    padding-bottom: 70px;
    text-align: center;
    text-transform: uppercase;
    color: #a4afad;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2.73px
}

body#case-study-page-djlist #caseStudyContent .event-details>img {
    display: block;
    margin: 0 auto 15px auto
}

body#case-study-page-djlist #caseStudyContent .iphone-app {
    height: 1200px;
    width: 100%;
    background: #22ca9e url(/assets/case-studies/djlist/iphoneApp-10eb8c6b1d6f5929717ed90b8d105331c28ecdde6e3a73ad18086f2f210b329d.png) no-repeat center top;
    background-size: cover;
    padding-top: 80px;
    text-align: center
}

body#case-study-page-djlist #caseStudyContent .iphone-app h1 {
    text-align: center;
    color: white;
    font-size: 38px;
    font-weight: 300;
    letter-spacing: 8px;
    text-transform: uppercase
}

body#case-study-page-djlist #caseStudyContent .iphone-app h2 {
    text-align: center;
    margin: 50px auto 160px auto;
    color: #9cffe5;
    font-size: 22px;
    font-weight: 300;
    line-height: 28px;
    max-width: 570px
}

body#case-study-page-djlist #caseStudyContent img.full-width-web {
    width: 100%
}

body#case-study-page-djlist .more-case-studies {
    background: white;
    color: #98999d
}

body#case-study-page-djlist .more-case-studies strong {
    color: black
}

@media screen and (max-width: 1024px) {
    body#case-study-page-djlist .onboarding img.laptop {
        max-width: 90%
    }

    body#case-study-page-djlist .iphone-app {
        padding-top: 80px !important
    }
}

@media screen and (max-width: 768px) {
    body#case-study-page-djlist #caseStudyContent .about-project tr td:last-child p {
        font-size: 16px !important;
        line-height: 23px !important;
        text-align: center
    }

    body#case-study-page-djlist .consistency {
        height: 700px !important;
        margin-bottom: 300px !important
    }

    body#case-study-page-djlist .consistency h1 {
        font-size: 32px !important;
        letter-spacing: 4px !important
    }

    body#case-study-page-djlist .onboarding {
        padding-top: 80px !important
    }

    body#case-study-page-djlist .onboarding h1 {
        font-size: 32px !important;
        letter-spacing: 4px !important
    }

    body#case-study-page-djlist .onboarding h2 {
        padding-left: 15px;
        padding-right: 15px;
        margin: 50px auto 80px auto !important
    }

    body#case-study-page-djlist .onboarding img.laptop {
        position: static !important;
        top: auto;
        margin-top: 20px;
        margin-bottom: -120px
    }

    body#case-study-page-djlist .iphone-app h1 {
        font-size: 32px !important;
        letter-spacing: 4px !important
    }

    body#case-study-page-djlist .iphone-app h2 {
        padding-left: 15px;
        padding-right: 15px;
        margin: 50px auto 80px auto !important
    }
}

@media screen and (max-width: 640px) {
    body#case-study-page-djlist .consistency {
        padding-top: 100px !important;
        height: 600px !important;
        margin-bottom: 200px !important
    }

    body#case-study-page-djlist .onboarding .steps:after {
        display: none !important
    }

    body#case-study-page-djlist .onboarding .steps .step1 p,
    body#case-study-page-djlist .onboarding .steps .step2 p,
    body#case-study-page-djlist .onboarding .steps .step3 p {
        padding-bottom: 30px !important;
        margin-bottom: 30px !important
    }

    body#case-study-page-djlist .onboarding .steps .step1:after,
    body#case-study-page-djlist .onboarding .steps .step2:after,
    body#case-study-page-djlist .onboarding .steps .step3:after {
        top: 45px !important
    }
}

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

    body#case-study-page-djlist .onboarding h1,
    body#case-study-page-djlist .onboarding h2,
    body#case-study-page-djlist .iphone-app h1,
    body#case-study-page-djlist .iphone-app h2 {
        padding-left: 15px;
        padding-right: 15px
    }
}

@media screen and (max-width: 320px) {
    body#case-study-page-djlist .consistency {
        height: 700px !important;
        margin-bottom: 150px !important
    }

    body#case-study-page-djlist .iphone-app {
        height: 1000px !important
    }
}

ul#items li#case-study-block-tag {
    background: #443e63
}

ul#items li#case-study-block-tag a {
    color: white
}

body#case-study-page-tag {
    color: white;
    background: #f1f1f1
}

body#case-study-page-tag #page {
    background: #443e63
}

body#case-study-page-tag #page .preloader {
    background: #443e63
}

body#case-study-page-tag #page .preloader .bar {
    background: white
}

body#case-study-page-tag #page .preloader .bar:after {
    box-shadow: 0 0 4px white, 0 0 4px white, 0 0 4px white
}

body#case-study-page-tag .cs-head a {
    text-decoration: none;
    color: white
}

body#case-study-page-tag .cs-head .links a.contact {
    border-color: white
}

body#case-study-page-tag .cs-head .links a.contact:hover {
    color: #443e63
}

body#case-study-page-tag .title-subtitle-stores h1 {
    color: white
}

body#case-study-page-tag .title-subtitle-stores h2 {
    color: rgba(255, 255, 255, 0.5)
}

body#case-study-page-tag .title-subtitle-stores .stores a {
    text-decoration: none;
    color: white
}

body#case-study-page-tag a.see-more-case-study svg path {
    stroke: #443e63;
    fill: #443e63
}

body#case-study-page-tag #caseStudyContent {
    background: white;
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
    overflow-y: auto
}

body#case-study-page-tag #caseStudyContent .about-project table td:first-child,
body#case-study-page-tag #caseStudyContent .about-project tr td:first-child {
    color: #152737
}

body#case-study-page-tag #caseStudyContent .about-project table td:last-child p,
body#case-study-page-tag #caseStudyContent .about-project tr td:last-child p {
    color: #1a2b44
}

body#case-study-page-tag #caseStudyContent .about-project a {
    color: #443e63;
    text-decoration: none
}

body#case-study-page-tag #caseStudyContent .functionality {
    background: #111111;
    height: 570px
}

body#case-study-page-tag #caseStudyContent .functionality .image-left {
    height: 100%;
    background: transparent url(/assets/case-studies/tag/sketch@2x-b90f369b4310127ffe5c2466dcf91cbdf4e359dee953a1ecff762b4bf4dfc9bf.png) no-repeat center center;
    background-size: 100% auto;
    background-size: cover
}

body#case-study-page-tag #caseStudyContent .functionality .text-right {
    height: 100%
}

body#case-study-page-tag #caseStudyContent .functionality .text-right .content {
    position: relative;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    width: 100%;
    max-width: 615px;
    margin: 0;
    padding-left: 95px;
    padding-right: 95px
}

body#case-study-page-tag #caseStudyContent .functionality .text-right .content h1 {
    color: white;
    font-weight: 300;
    margin-top: 0;
    font-size: 42px;
    color: #FFFFFF;
    line-height: 51px
}

body#case-study-page-tag #caseStudyContent .functionality .text-right .content p {
    font-weight: 300;
    font-size: 22px;
    color: #757C84;
    line-height: 28px
}

body#case-study-page-tag .going-digital {
    min-height: 1140px;
    background: white;
    position: relative
}

body#case-study-page-tag .going-digital>.row {
    max-width: 1280px;
    margin: 0 auto
}

body#case-study-page-tag .going-digital img.app4 {
    max-width: 601px;
    position: absolute;
    top: 210px;
    right: -230px;
    bottom: auto;
    left: auto
}

body#case-study-page-tag .going-digital img.app3 {
    position: absolute;
    max-width: 610px;
    top: 320px;
    right: 23px;
    bottom: auto;
    left: auto
}

body#case-study-page-tag .going-digital img.app2 {
    position: absolute;
    max-width: 610px;
    top: 429px;
    right: 266px;
    bottom: auto;
    left: auto
}

body#case-study-page-tag .going-digital img.app1 {
    position: absolute;
    max-width: 610px;
    top: 545px;
    right: 505px;
    bottom: auto;
    left: auto
}

body#case-study-page-tag .going-digital img.app7 {
    position: absolute;
    max-width: 601px;
    top: 547px;
    right: -374px;
    bottom: auto;
    left: auto
}

body#case-study-page-tag .going-digital img.app6 {
    position: absolute;
    max-width: 601px;
    top: 660px;
    right: -135px;
    bottom: auto;
    left: auto
}

body#case-study-page-tag .going-digital img.app5 {
    position: absolute;
    max-width: 601px;
    top: 785px;
    right: 130px;
    bottom: auto;
    left: auto
}

body#case-study-page-tag .going-digital .text {
    padding-left: 30px
}

body#case-study-page-tag .going-digital .text h1 {
    color: #152737;
    font-weight: 300;
    margin-top: 100px;
    max-width: 490px;
    font-size: 38px;
    line-height: 46px
}

body#case-study-page-tag .going-digital .text p {
    font-size: 26px;
    font-weight: 400;
    color: rgba(21, 39, 55, 0.5);
    max-width: 490px;
    line-height: 29px
}

body#case-study-page-tag .aesthetics {
    background: #f7f9f9
}

body#case-study-page-tag .aesthetics .intro h1 {
    margin: 100px auto 50px auto;
    width: 100%;
    max-width: 690px;
    font-weight: 300;
    text-align: center;
    font-size: 38px;
    color: #152737;
    line-height: 46px
}

body#case-study-page-tag .aesthetics .intro p {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 70px;
    width: 100%;
    max-width: 690px;
    font-weight: 400;
    font-size: 26px;
    color: #8D9DAA;
    line-height: 39px
}

body#case-study-page-tag .aesthetics .typography h2,
body#case-study-page-tag .aesthetics .color-palette h2,
body#case-study-page-tag .aesthetics .interface-elements h2 {
    font-size: 11px;
    font-weight: 600;
    color: #87A2A2;
    letter-spacing: 5px;
    text-transform: uppercase;
    margin: 0 0 40px 0;
    line-height: 12px
}

body#case-study-page-tag .aesthetics .typography p.showcase {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    color: #5b47c1;
    max-width: 345px
}

body#case-study-page-tag .aesthetics .typography p.showcase span {
    display: block;
    line-height: 1.6
}

body#case-study-page-tag .aesthetics .typography p.showcase span.uppercase {
    text-transform: uppercase
}

body#case-study-page-tag .aesthetics .typography p.showcase span.lowercase {
    text-transform: lowercase
}

body#case-study-page-tag .aesthetics .typography p.name {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 12px;
    color: #505f7a;
    font-weight: 600;
    line-height: 36px;
    max-width: 320px
}

body#case-study-page-tag .aesthetics .typography p.description {
    font-size: 12px;
    color: #8D9DAA;
    font-weight: 500;
    max-width: 320px;
    line-height: 15px
}

body#case-study-page-tag .aesthetics .color-palette .colors {
    max-width: 320px;
    padding-top: 40px;
    padding-bottom: 90px
}

body#case-study-page-tag .aesthetics .color-palette .colors span {
    width: 25%;
    height: 85px;
    line-height: 85px;
    text-transform: uppercase;
    color: white;
    font-weight: 600;
    font-size: 12px;
    text-align: center;
    display: block;
    float: left
}

body#case-study-page-tag .aesthetics .color-palette .colors span:nth-child(1) {
    background: #7f3359;
    position: relative
}

body#case-study-page-tag .aesthetics .color-palette .colors span:nth-child(1):before {
    content: '';
    display: block;
    background: transparent url(/assets/case-studies/tag/pin-aaf959fa392e773a0d9ba7691f7976e27bfa712b440f0694bc881a5bdd0a314f.svg) no-repeat center center;
    position: absolute;
    top: -40px;
    left: -4px;
    width: 10px;
    height: 40px
}

body#case-study-page-tag .aesthetics .color-palette .colors span:nth-child(1):after {
    content: 'Option 1';
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 1px;
    color: #505F6C;
    position: absolute;
    top: -38px;
    left: 15px;
    line-height: 7px;
    font-weight: 400;
    width: 54px
}

body#case-study-page-tag .aesthetics .color-palette .colors span:nth-child(2) {
    background: #c65a4c
}

body#case-study-page-tag .aesthetics .color-palette .colors span:nth-child(3) {
    background: #2ba06d
}

body#case-study-page-tag .aesthetics .color-palette .colors span:nth-child(4) {
    background: #d5dce1
}

body#case-study-page-tag .aesthetics .color-palette .colors span:nth-child(5) {
    background: #5cbeb6
}

body#case-study-page-tag .aesthetics .color-palette .colors span:nth-child(6) {
    background: #ff8b39
}

body#case-study-page-tag .aesthetics .color-palette .colors span:nth-child(7) {
    background: #91196b
}

body#case-study-page-tag .aesthetics .color-palette .colors span:nth-child(8) {
    background: #afc1cf;
    position: relative
}

body#case-study-page-tag .aesthetics .color-palette .colors span:nth-child(8):before {
    content: '';
    display: block;
    background: transparent url(/assets/case-studies/tag/pin-aaf959fa392e773a0d9ba7691f7976e27bfa712b440f0694bc881a5bdd0a314f.svg) no-repeat center center;
    position: absolute;
    top: auto;
    bottom: -40px;
    left: auto;
    right: -4px;
    width: 10px;
    height: 40px;
    -webkit-transform: scale(1, -1);
    transform: scale(1, -1)
}

body#case-study-page-tag .aesthetics .color-palette .colors span:nth-child(8):after {
    content: 'Option 2';
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 1px;
    color: #505F6C;
    position: absolute;
    top: auto;
    bottom: -40px;
    left: auto;
    right: 15px;
    line-height: 7px;
    font-weight: 400;
    width: 54px
}

body#case-study-page-tag .aesthetics .color-palette .colors span:nth-child(n+5) {
    margin-top: 3px
}

body#case-study-page-tag .aesthetics .interface-elements .separator {
    padding-bottom: 10px;
    border-bottom: 2px dashed rgba(209, 214, 216, 0.5);
    max-width: 295px
}

body#case-study-page-tag .aesthetics .interface-elements span {
    display: block;
    width: 100%;
    max-width: 350px;
    position: relative;
    left: 0
}

body#case-study-page-tag .aesthetics .interface-elements span.option-1:before {
    content: '';
    display: block;
    background: transparent url(/assets/case-studies/tag/pin-aaf959fa392e773a0d9ba7691f7976e27bfa712b440f0694bc881a5bdd0a314f.svg) no-repeat center center;
    position: absolute;
    top: 50%;
    bottom: auto;
    left: auto;
    right: -20px;
    width: 10px;
    height: 40px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    margin-top: -20px
}

body#case-study-page-tag .aesthetics .interface-elements span.option-1:after {
    content: 'Option 1';
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 1px;
    color: #6c5f6c;
    position: absolute;
    top: 50%;
    bottom: auto;
    left: auto;
    right: -90px;
    line-height: 1;
    margin-top: -4px
}

body#case-study-page-tag .aesthetics .interface-elements span.option-2:before {
    content: '';
    display: block;
    background: transparent url(/assets/case-studies/tag/pin-aaf959fa392e773a0d9ba7691f7976e27bfa712b440f0694bc881a5bdd0a314f.svg) no-repeat center center;
    position: absolute;
    top: 50%;
    bottom: auto;
    left: auto;
    right: -20px;
    width: 10px;
    height: 40px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    margin-top: -12px
}

body#case-study-page-tag .aesthetics .interface-elements span.option-2:after {
    content: 'Option 2';
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 1px;
    color: #6c5f6c;
    position: absolute;
    top: 50%;
    bottom: auto;
    left: auto;
    right: -90px;
    line-height: 1;
    margin-top: 4px
}

body#case-study-page-tag .aesthetics .interface-elements span img {
    width: 100%
}

body#case-study-page-tag .iconography-ui {
    background: #f7f9f9
}

body#case-study-page-tag .iconography-ui>.container {
    max-width: 1300px;
    margin: 0
}

body#case-study-page-tag .iconography-ui .title h1 {
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    color: #3b374f;
    margin-bottom: 40px;
    letter-spacing: 2px;
    line-height: 18px
}

body#case-study-page-tag .iconography-ui .iconography .icons {
    max-width: 440px;
    overflow: hidden
}

body#case-study-page-tag .iconography-ui .iconography .icons>div {
    padding-left: 0;
    padding-right: 0
}

body#case-study-page-tag .iconography-ui .iconography .icon {
    text-align: center;
    line-height: 100px;
    height: 100px;
    border-bottom: 1px solid rgba(209, 214, 216, 0.5)
}

body#case-study-page-tag .iconography-ui .iconography .icon img {
    width: 100%
}

body#case-study-page-tag .iconography-ui .iconography .icon:nth-child(1) img {
    max-width: 58px
}

body#case-study-page-tag .iconography-ui .iconography .icon:nth-child(2) img {
    max-width: 47px
}

body#case-study-page-tag .iconography-ui .iconography .icon:nth-child(3) img {
    max-width: 49px
}

body#case-study-page-tag .iconography-ui .iconography .icon:nth-child(4) img {
    max-width: 61px
}

body#case-study-page-tag .iconography-ui .iconography .text {
    color: #5c5177;
    line-height: 40px;
    height: 40px;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    padding-left: 15px;
    padding-right: 15px
}

body#case-study-page-tag .iconography-ui .ui {
    padding-bottom: 90px
}

body#case-study-page-tag .iconography-ui .ui .retina {
    text-align: center;
    padding-top: 40px;
    position: relative
}

body#case-study-page-tag .iconography-ui .ui .retina:before {
    content: '';
    display: block;
    background: transparent url(/assets/case-studies/tag/pin-aaf959fa392e773a0d9ba7691f7976e27bfa712b440f0694bc881a5bdd0a314f.svg) no-repeat center center;
    position: absolute;
    top: 4px;
    bottom: auto;
    left: 40px;
    right: auto;
    width: 10px;
    height: 40px
}

body#case-study-page-tag .iconography-ui .ui .retina:after {
    content: '@2X for Retina Displays';
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 1px;
    color: #6c5f6c;
    position: absolute;
    top: 9px;
    bottom: auto;
    left: 65px;
    right: auto;
    line-height: 1;
    margin-top: -4px
}

body#case-study-page-tag .iconography-ui .ui .retina img {
    width: 100%;
    max-width: 658px
}

body#case-study-page-tag .iconography-ui .ui .non-retina {
    text-align: center;
    position: relative
}

body#case-study-page-tag .iconography-ui .ui .non-retina:before {
    content: '';
    display: block;
    background: transparent url(/assets/case-studies/tag/pin-aaf959fa392e773a0d9ba7691f7976e27bfa712b440f0694bc881a5bdd0a314f.svg) no-repeat center center;
    position: absolute;
    top: auto;
    bottom: -28px;
    left: auto;
    right: 75px;
    width: 10px;
    height: 40px;
    -webkit-transform: scale(1, -1);
    transform: scale(1, -1)
}

body#case-study-page-tag .iconography-ui .ui .non-retina:after {
    content: '@1x for non-retina displays';
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 1px;
    color: #6c5f6c;
    position: absolute;
    top: auto;
    bottom: -28px;
    left: auto;
    right: -105px;
    line-height: 1
}

body#case-study-page-tag .iconography-ui .ui .non-retina img {
    width: 100%;
    max-width: 347px
}

body#case-study-page-tag .iconography-ui .ui .non-retina-text p {
    max-width: 250px;
    margin: 5px 0 0 0;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.4);
    font-weight: 600
}

body#case-study-page-tag .iconography-ui .newsfeed-image {
    text-align: center;
    margin-bottom: 50px
}

body#case-study-page-tag .iconography-ui .newsfeed-image img {
    width: 100%;
    max-width: 527px
}

body#case-study-page-tag .iconography-ui .newsfeed-text {
    margin-bottom: 50px
}

body#case-study-page-tag .iconography-ui .newsfeed-text p {
    font-size: 22px;
    font-weight: 400;
    color: #92a1ad;
    line-height: 29px;
    max-width: 580px;
    margin-top: 70px
}

body#case-study-page-tag .iconography-ui .newsfeed-text p span {
    color: #152737
}

body#case-study-page-tag .iconography-ui .app-screens {
    padding-top: 25px;
    padding-bottom: 25px
}

body#case-study-page-tag .iconography-ui .app-screens .first,
body#case-study-page-tag .iconography-ui .app-screens .second,
body#case-study-page-tag .iconography-ui .app-screens .third {
    padding-top: 25px;
    padding-bottom: 25px;
    text-align: center
}

body#case-study-page-tag .iconography-ui .app-screens .first img,
body#case-study-page-tag .iconography-ui .app-screens .second img,
body#case-study-page-tag .iconography-ui .app-screens .third img {
    width: 100%;
    max-width: 220px
}

body#case-study-page-tag .designing-the-brand {
    background: white
}

body#case-study-page-tag .designing-the-brand h1 {
    margin: 50px 0 0 0;
    font-weight: 300;
    text-align: center;
    font-size: 38px;
    color: #152737;
    line-height: 46px
}

body#case-study-page-tag .designing-the-brand p {
    width: 100%;
    max-width: 710px;
    margin: 50px auto 0 auto;
    line-height: 29px;
    font-weight: 400;
    font-size: 26px;
    color: #6D828B;
    line-height: 29px
}

body#case-study-page-tag .designing-the-brand h2 {
    font-weight: 300;
    text-align: center;
    margin: 80px 0 50px 0;
    color: #754dc8;
    font-size: 34px;
    line-height: 48px
}

body#case-study-page-tag .designing-the-brand .profile {
    text-align: center
}

body#case-study-page-tag .designing-the-brand .profile img {
    max-width: 73px
}

body#case-study-page-tag .designing-the-brand .profile p.name {
    font-weight: 400;
    margin: 15px 0 0 0;
    max-width: none;
    font-size: 18px;
    color: #1A2B44;
    line-height: 22px
}

body#case-study-page-tag .designing-the-brand .profile p.position {
    font-size: 14px;
    font-weight: 400;
    color: #5F7985;
    margin: 0;
    max-width: none;
    line-height: 17px
}

body#case-study-page-tag .logos-options {
    padding-top: 100px
}

body#case-study-page-tag .logos-options .option-1,
body#case-study-page-tag .logos-options .option-2,
body#case-study-page-tag .logos-options .option-3 {
    height: 500px;
    text-align: center
}

body#case-study-page-tag .logos-options .option-1 .image,
body#case-study-page-tag .logos-options .option-2 .image,
body#case-study-page-tag .logos-options .option-3 .image {
    height: 220px;
    line-height: 220px;
    margin-bottom: 150px
}

body#case-study-page-tag .logos-options .option-1 .logo,
body#case-study-page-tag .logos-options .option-2 .logo,
body#case-study-page-tag .logos-options .option-3 .logo {
    position: relative;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0)
}

body#case-study-page-tag .logos-options .option-1 p,
body#case-study-page-tag .logos-options .option-2 p,
body#case-study-page-tag .logos-options .option-3 p {
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    color: #3b374f;
    letter-spacing: 1px
}

body#case-study-page-tag .logos-options .option-1 {
    background: #edebf9
}

body#case-study-page-tag .logos-options .option-1 img {
    max-width: 242px
}

body#case-study-page-tag .logos-options .option-2 {
    background: #e4e1f1
}

body#case-study-page-tag .logos-options .option-2 img {
    max-width: 146px
}

body#case-study-page-tag .logos-options .option-3 {
    background: #dad6ea
}

body#case-study-page-tag .logos-options .option-3 img {
    max-width: 146px
}

body#case-study-page-tag .more-case-studies {
    background: white;
    color: #98999d
}

body#case-study-page-tag .more-case-studies strong {
    color: black
}

body#case-study-page-tag .the-icon {
    background: white
}

body#case-study-page-tag .the-icon h1 {
    margin: 50px 0 0 0;
    font-weight: 400;
    color: black;
    text-align: center;
    font-size: 38px;
    line-height: 45px
}

body#case-study-page-tag .the-icon p {
    width: 100%;
    max-width: 850px;
    margin: 50px auto 30px auto;
    font-weight: 300;
    text-align: center;
    font-size: 22px;
    color: #6D828B;
    line-height: 28px
}

body#case-study-page-tag .the-icon .left {
    text-align: left;
    padding-top: 25px;
    padding-left: 0
}

body#case-study-page-tag .the-icon .left p {
    text-align: right;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    color: black;
    letter-spacing: 1px;
    max-width: 654px;
    margin-left: 0;
    margin-right: 0
}

body#case-study-page-tag .the-icon .left img {
    width: 100%;
    max-width: 654px
}

body#case-study-page-tag .the-icon .right img {
    width: 100%;
    max-width: 775px
}

body#case-study-page-tag .try {
    padding-top: 75px;
    padding-bottom: 50px;
    text-align: center;
    background: #443e63
}

body#case-study-page-tag .try h1 {
    margin-top: 0;
    letter-spacing: -1px;
    font-weight: 300;
    font-size: 38px;
    line-height: 46px;
    color: white
}

body#case-study-page-tag .try img {
    width: 100%;
    max-width: 396px
}

body#case-study-page-tag .try iframe {
    border: 0;
    border: none
}

@media screen and (max-width: 1024px) {
    body#case-study-page-tag #caseStudyContent .try h1.go-ahead {
        display: none !important
    }

    body#case-study-page-tag #caseStudyContent .try h1.trading-wines {
        display: block !important
    }

    body#case-study-page-tag #caseStudyContent .try iframe {
        display: none !important
    }

    body#case-study-page-tag #caseStudyContent .try span.prototype {
        display: block !important
    }

    body#case-study-page-tag #caseStudyContent .functionality .text-right .content {
        padding-left: 45px;
        padding-right: 45px
    }
}

@media screen and (max-width: 992px) {
    body#case-study-page-tag .typography h2 {
        text-align: center
    }

    body#case-study-page-tag .typography p.showcase,
    body#case-study-page-tag .typography p.name,
    body#case-study-page-tag .typography p.description {
        margin-left: auto;
        margin-right: auto
    }

    body#case-study-page-tag .color-palette h2 {
        text-align: center
    }

    body#case-study-page-tag .color-palette .colors {
        margin-left: auto;
        margin-right: auto
    }

    body#case-study-page-tag .interface-elements h2 {
        text-align: center
    }

    body#case-study-page-tag .interface-elements span.option-1,
    body#case-study-page-tag .interface-elements span.option-2,
    body#case-study-page-tag .interface-elements .separator {
        margin-left: auto;
        margin-right: auto
    }

    body#case-study-page-tag .iconography-ui .title {
        text-align: center
    }

    body#case-study-page-tag .iconography-ui .iconography .icons {
        max-width: none;
        margin-bottom: 50px
    }

    body#case-study-page-tag .iconography-ui .ui .retina {
        max-width: 658px;
        margin-left: auto;
        margin-right: auto;
        float: none;
        clear: both
    }

    body#case-study-page-tag .iconography-ui .ui .non-retina,
    body#case-study-page-tag .iconography-ui .ui .non-retina-text {
        max-width: 347px;
        margin-left: auto;
        margin-right: auto;
        float: none;
        clear: both
    }

    body#case-study-page-tag .iconography-ui .ui .non-retina:after,
    body#case-study-page-tag .iconography-ui .ui .non-retina-text:after {
        right: -130px
    }

    body#case-study-page-tag .iconography-ui .ui .non-retina-text {
        margin-top: 50px;
        text-align: center
    }

    body#case-study-page-tag .iconography-ui .ui .non-retina-text p {
        max-width: none
    }

    body#case-study-page-tag .iconography-ui .newsfeed-text p {
        margin-top: 30px
    }

    body#case-study-page-tag .the-icon .left p {
        max-width: 100%;
        text-align: center
    }

    body#case-study-page-tag .the-icon .left img {
        display: none !important
    }

    body#case-study-page-tag .the-icon .left img.hide {
        margin: 0 auto 45px auto;
        display: block !important;
        width: 100% !important;
        max-width: 204px !important
    }

    body#case-study-page-tag .the-icon .right {
        text-align: center
    }

    body#case-study-page-tag .functionality .text-right .content {
        padding-left: 15px !important;
        padding-right: 15px !important
    }

    body#case-study-page-tag .going-digital {
        min-height: 992px
    }

    body#case-study-page-tag .going-digital img.app4,
    body#case-study-page-tag .going-digital img.app3,
    body#case-study-page-tag .going-digital img.app2,
    body#case-study-page-tag .going-digital img.app1,
    body#case-study-page-tag .going-digital img.app7,
    body#case-study-page-tag .going-digital img.app6,
    body#case-study-page-tag .going-digital img.app5 {
        -webkit-transform: scale(0.5, 0.5) !important;
        transform: scale(0.5, 0.5) !important
    }

    body#case-study-page-tag .going-digital img.app4 {
        top: 310px;
        right: -230px
    }

    body#case-study-page-tag .going-digital img.app3 {
        top: 370px;
        right: -105px
    }

    body#case-study-page-tag .going-digital img.app2 {
        top: 435px;
        right: 25px
    }

    body#case-study-page-tag .going-digital img.app1 {
        top: 500px;
        right: 155px
    }

    body#case-study-page-tag .going-digital img.app7 {
        top: 490px;
        right: -295px
    }

    body#case-study-page-tag .going-digital img.app6 {
        top: 560px;
        right: -170px
    }

    body#case-study-page-tag .going-digital img.app5 {
        top: 630px;
        right: -35px
    }
}

@media screen and (max-width: 768px) {
    body#case-study-page-tag #caseStudyContent .about-project tr td:last-child p {
        font-size: 16px !important;
        line-height: 23px !important;
        text-align: center
    }

    body#case-study-page-tag .functionality {
        height: 1140px !important
    }

    body#case-study-page-tag .functionality .image-left,
    body#case-study-page-tag .functionality .text-right {
        height: 50% !important
    }

    body#case-study-page-tag .iconography-ui .newsfeed-text p {
        margin-left: auto;
        margin-right: auto
    }

    body#case-study-page-tag .designing-the-brand h2 {
        padding-left: 15px;
        padding-right: 15px
    }
}

@media screen and (max-width: 640px) {
    body#case-study-page-tag .going-digital {
        min-height: 1200px
    }

    body#case-study-page-tag .going-digital img.app4 {
        top: 510px;
        right: -230px
    }

    body#case-study-page-tag .going-digital img.app3 {
        top: 570px;
        right: -105px
    }

    body#case-study-page-tag .going-digital img.app2 {
        top: 635px;
        right: 25px
    }

    body#case-study-page-tag .going-digital img.app1 {
        top: 700px;
        right: 155px
    }

    body#case-study-page-tag .going-digital img.app7 {
        top: 690px;
        right: -295px
    }

    body#case-study-page-tag .going-digital img.app6 {
        top: 760px;
        right: -170px
    }

    body#case-study-page-tag .going-digital img.app5 {
        top: 830px;
        right: -35px
    }

    body#case-study-page-tag .aesthetics .typography {
        margin-bottom: 30px
    }
}

.twentytwenty-horizontal .twentytwenty-handle:before,
.twentytwenty-horizontal .twentytwenty-handle:after,
.twentytwenty-vertical .twentytwenty-handle:before,
.twentytwenty-vertical .twentytwenty-handle:after {
    content: " ";
    display: block;
    background: white;
    position: absolute;
    z-index: 30;
    -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
    -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
    box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5)
}

.twentytwenty-horizontal .twentytwenty-handle:before,
.twentytwenty-horizontal .twentytwenty-handle:after {
    width: 3px;
    height: 9999px;
    left: 50%;
    margin-left: -1.5px
}

.twentytwenty-vertical .twentytwenty-handle:before,
.twentytwenty-vertical .twentytwenty-handle:after {
    width: 9999px;
    height: 3px;
    top: 50%;
    margin-top: -1.5px
}

.twentytwenty-before-label,
.twentytwenty-after-label,
.twentytwenty-overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%
}

.twentytwenty-before-label,
.twentytwenty-after-label,
.twentytwenty-overlay {
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    transition-duration: 0.5s
}

.twentytwenty-before-label,
.twentytwenty-after-label {
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    transition-property: opacity
}

.twentytwenty-before-label:before,
.twentytwenty-after-label:before {
    color: white;
    font-size: 13px;
    letter-spacing: 0.1em
}

.twentytwenty-before-label:before,
.twentytwenty-after-label:before {
    position: absolute;
    background: rgba(255, 255, 255, 0.2);
    line-height: 38px;
    padding: 0 20px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px
}

.twentytwenty-horizontal .twentytwenty-before-label:before,
.twentytwenty-horizontal .twentytwenty-after-label:before {
    top: 50%;
    margin-top: -19px
}

.twentytwenty-vertical .twentytwenty-before-label:before,
.twentytwenty-vertical .twentytwenty-after-label:before {
    left: 50%;
    margin-left: -45px;
    text-align: center;
    width: 90px
}

.twentytwenty-left-arrow,
.twentytwenty-right-arrow,
.twentytwenty-up-arrow,
.twentytwenty-down-arrow {
    width: 0;
    height: 0;
    border: 6px inset transparent;
    position: absolute
}

.twentytwenty-left-arrow,
.twentytwenty-right-arrow {
    top: 50%;
    margin-top: -6px
}

.twentytwenty-up-arrow,
.twentytwenty-down-arrow {
    left: 50%;
    margin-left: -6px
}

.twentytwenty-container {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    z-index: 0;
    overflow: hidden;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none
}

.twentytwenty-container img {
    max-width: 100%;
    position: absolute;
    top: 0;
    display: block
}

.twentytwenty-container.active .twentytwenty-overlay,
.twentytwenty-container.active :hover.twentytwenty-overlay {
    background: transparent
}

.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label,
.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label,
.twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-before-label,
.twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-after-label {
    opacity: 0
}

.twentytwenty-container * {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box
}

.twentytwenty-before-label {
    opacity: 0
}

.twentytwenty-before-label:before {
    content: "Before"
}

.twentytwenty-after-label {
    opacity: 0
}

.twentytwenty-after-label:before {
    content: "After"
}

.twentytwenty-horizontal .twentytwenty-before-label:before {
    left: 10px
}

.twentytwenty-horizontal .twentytwenty-after-label:before {
    right: 10px
}

.twentytwenty-vertical .twentytwenty-before-label:before {
    top: 10px
}

.twentytwenty-vertical .twentytwenty-after-label:before {
    bottom: 10px
}

.twentytwenty-overlay {
    -webkit-transition-property: background;
    -moz-transition-property: background;
    transition-property: background;
    background: transparent;
    z-index: 25
}

.twentytwenty-overlay:hover {
    background: rgba(0, 0, 0, 0.5)
}

.twentytwenty-overlay:hover .twentytwenty-after-label {
    opacity: 1
}

.twentytwenty-overlay:hover .twentytwenty-before-label {
    opacity: 1
}

.twentytwenty-before {
    z-index: 20
}

.twentytwenty-after {
    z-index: 10
}

.twentytwenty-handle {
    height: 38px;
    width: 38px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -22px;
    margin-top: -22px;
    border: 3px solid white;
    -webkit-border-radius: 1000px;
    -moz-border-radius: 1000px;
    border-radius: 1000px;
    -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
    -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
    box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
    z-index: 40;
    cursor: pointer
}

.twentytwenty-horizontal .twentytwenty-handle:before {
    bottom: 50%;
    margin-bottom: 22px;
    -webkit-box-shadow: 0 3px 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5);
    -moz-box-shadow: 0 3px 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5);
    box-shadow: 0 3px 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5)
}

.twentytwenty-horizontal .twentytwenty-handle:after {
    top: 50%;
    margin-top: 22px;
    -webkit-box-shadow: 0 -3px 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5);
    -moz-box-shadow: 0 -3px 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5);
    box-shadow: 0 -3px 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5)
}

.twentytwenty-vertical .twentytwenty-handle:before {
    left: 50%;
    margin-left: 22px;
    -webkit-box-shadow: 3px 0 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5);
    -moz-box-shadow: 3px 0 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5);
    box-shadow: 3px 0 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5)
}

.twentytwenty-vertical .twentytwenty-handle:after {
    right: 50%;
    margin-right: 22px;
    -webkit-box-shadow: -3px 0 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5);
    -moz-box-shadow: -3px 0 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5);
    box-shadow: -3px 0 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5)
}

.twentytwenty-left-arrow {
    border-right: 6px solid white;
    left: 50%;
    margin-left: -17px
}

.twentytwenty-right-arrow {
    border-left: 6px solid white;
    right: 50%;
    margin-right: -17px
}

.twentytwenty-up-arrow {
    border-bottom: 6px solid white;
    top: 50%;
    margin-top: -17px
}

.twentytwenty-down-arrow {
    border-top: 6px solid white;
    bottom: 50%;
    margin-bottom: -17px
}

ul#items li#case-study-block-genee {
    background: #39ad43
}

ul#items li#case-study-block-genee a {
    color: white
}

body#case-study-page-genee {
    color: white;
    background: #39ad43
}

body#case-study-page-genee .preloader {
    background: #39ad43
}

body#case-study-page-genee .preloader .bar {
    background: white
}

body#case-study-page-genee .preloader .bar:after {
    box-shadow: 0 0 4px white, 0 0 4px white, 0 0 4px white
}

body#case-study-page-genee .cs-head a {
    text-decoration: none;
    color: white
}

body#case-study-page-genee .cs-head .links a.contact {
    border-color: white
}

body#case-study-page-genee .cs-head .links a.contact:hover {
    color: #39ad43
}

body#case-study-page-genee .title-subtitle-stores h1 {
    color: white
}

body#case-study-page-genee .title-subtitle-stores h2 {
    color: rgba(255, 255, 255, 0.5)
}

body#case-study-page-genee .title-subtitle-stores .stores a {
    text-decoration: none;
    color: white
}

body#case-study-page-genee a.see-more-case-study svg path {
    stroke: #39ad43;
    fill: #39ad43
}

body#case-study-page-genee #caseStudyContent {
    background: white;
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
    overflow-y: auto
}

body#case-study-page-genee #caseStudyContent .about-project table td:first-child,
body#case-study-page-genee #caseStudyContent .about-project tr td:first-child {
    color: #152737
}

body#case-study-page-genee #caseStudyContent .about-project table td:last-child p,
body#case-study-page-genee #caseStudyContent .about-project tr td:last-child p {
    color: #1a2b44
}

body#case-study-page-genee #caseStudyContent .about-project a {
    color: #39ad43;
    text-decoration: none
}

body#case-study-page-genee #caseStudyContent .ok-delightful {
    height: 536px;
    width: 100%;
    position: relative;
    margin: 0 0 350px 0;
    padding-top: 145px;
    background: #39ad43
}

body#case-study-page-genee #caseStudyContent .ok-delightful h1 {
    text-transform: uppercase;
    text-align: center;
    font-size: 38px;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 300;
    line-height: 46px;
    margin: 0 0 85px 0;
    letter-spacing: 8px;
    position: relative;
    left: 10px
}

body#case-study-page-genee #caseStudyContent .ok-delightful h1 strong {
    font-size: 42px;
    color: white;
    font-weight: 300;
    position: relative;
    left: -10px
}

body#case-study-page-genee #caseStudyContent .ok-delightful h2 {
    text-transform: uppercase;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    line-height: 14px;
    margin: 0;
    padding-bottom: 30px;
    letter-spacing: 3px;
    position: relative;
    left: 8px
}

body#case-study-page-genee #caseStudyContent .ok-delightful h2:after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    right: auto;
    bottom: 0;
    background: rgba(0, 0, 0, 0.25);
    width: 1px;
    margin-left: -8.5px
}

body#case-study-page-genee #caseStudyContent .ok-delightful h2 span {
    padding: 0 15px
}

body#case-study-page-genee #caseStudyContent .ok-delightful h2 span:first-child {
    color: rgba(255, 255, 255, 0.5)
}

body#case-study-page-genee #caseStudyContent .ok-delightful h2 span:last-child {
    color: white;
    position: relative;
    left: 4px
}

body#case-study-page-genee #caseStudyContent .ok-delightful .before-after {
    width: 320px;
    height: 568px !important;
    background: transparent url(/assets/case-studies/genee/home-slidetocancel@2x-d178e505785ba3fa839fa3165e274b20366e15c7d95c14b83d88b795befac0d0.png) no-repeat left top;
    background-size: 100% auto;
    position: absolute;
    top: auto;
    bottom: -340px;
    left: 50%;
    right: auto;
    max-width: 100%;
    margin-left: -160px
}

body#case-study-page-genee #caseStudyContent .ok-delightful .before-after img.slide,
body#case-study-page-genee #caseStudyContent .ok-delightful .before-after img.new {
    width: 100%;
    height: auto
}

body#case-study-page-genee #caseStudyContent .ok-delightful .twentytwenty-handle {
    width: 43px;
    height: 43px;
    background: transparent url(/assets/case-studies/genee/Slider@2x-b94361c3ea52188c308d7c7c9f9e1df5f185c96ef70e06eb513842e9c232442e.png) no-repeat center center;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-size: 100% auto;
    overflow: visible;
    -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25)
}

body#case-study-page-genee #caseStudyContent .ok-delightful .twentytwenty-handle>span {
    display: none
}

body#case-study-page-genee #caseStudyContent .ok-delightful .twentytwenty-overlay {
    display: none !important;
    opacity: 0 !important
}

body#case-study-page-genee #caseStudyContent .ok-delightful .twentytwenty-horizontal .twentytwenty-handle:before,
body#case-study-page-genee #caseStudyContent .ok-delightful .twentytwenty-horizontal .twentytwenty-handle:after,
body#case-study-page-genee #caseStudyContent .ok-delightful .twentytwenty-vertical .twentytwenty-handle:before,
body#case-study-page-genee #caseStudyContent .ok-delightful .twentytwenty-vertical .twentytwenty-handle:after {
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 1px;
    border: 0;
    background: rgba(0, 0, 0, 0.15);
    margin-left: 0
}

body#case-study-page-genee #caseStudyContent .coffee {
    height: 490px;
    width: 100%;
    position: relative;
    padding: 150px 0 0 0
}

body#case-study-page-genee #caseStudyContent .coffee p {
    text-align: center;
    color: black;
    font-size: 52px;
    font-weight: 300;
    line-height: 62px;
    margin: 0;
    padding-bottom: 0px;
    letter-spacing: 2px;
    position: relative
}

body#case-study-page-genee #caseStudyContent .coffee p span {
    border-bottom: 1px dashed #39ad43;
    color: #39ad43;
    text-decoration: none
}

body#case-study-page-genee #caseStudyContent .coffee p span:hover {
    border-bottom: 1px solid #39ad43;
    text-decoration: none
}

body#case-study-page-genee #caseStudyContent .coffee img.schedule-button {
    display: inline-block;
    position: absolute;
    width: 150px;
    height: 150px;
    top: auto;
    bottom: 0;
    left: 50%;
    right: auto;
    max-width: 100%;
    margin-left: -75px;
    -webkit-animation-duration: .5s;
    animation-duration: .5s
}

body#case-study-page-genee #caseStudyContent .coffee img.schedule-button path,
body#case-study-page-genee #caseStudyContent .coffee img.schedule-button polygon {
    -webkit-transition: fill .1s ease-in-out;
    transition: fill .1s ease-in-out
}

body#case-study-page-genee #caseStudyContent .mapping {
    height: 1230px;
    width: 100%;
    position: relative;
    padding: 0px 0 0 0;
    margin: 100px 0 0 0;
    background: #fff url(/assets/case-studies/genee/IMG_4066@2x-50c1d7c0a528b239b670d4d3d835fa5638927c67fd7f389883218ffd08b40e24.png) no-repeat center top;
    background-size: cover;
    position: relative;
    overflow: hidden
}

body#case-study-page-genee #caseStudyContent .mapping .circle1 {
    background-color: #3fab49;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    position: absolute;
    top: 220px;
    right: 50px
}

body#case-study-page-genee #caseStudyContent .mapping .circle1 p {
    text-align: center;
    color: #fff;
    font-size: 35px;
    font-weight: 400;
    line-height: 520px;
    margin: 0;
    padding-bottom: 0px;
    letter-spacing: 0px;
    position: relative
}

body#case-study-page-genee #caseStudyContent .mapping .circle2 {
    background-color: #396eab;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    top: 80px;
    right: 40px
}

body#case-study-page-genee #caseStudyContent .mapping .circle3 {
    background-color: #b04b3f;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    top: 125px;
    right: 115px
}

body#case-study-page-genee #caseStudyContent .mapping .circle4 {
    background-color: #cc8f55;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    top: 200px;
    right: -20px
}

body#case-study-page-genee #caseStudyContent .mapping .circle5 {
    background-color: #dacb67;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    top: 200px;
    right: 65px
}

body#case-study-page-genee #caseStudyContent .mapping .circle6 {
    background-color: #88d497;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    top: 250px;
    right: 0px
}

body#case-study-page-genee #caseStudyContent .mapping .circle7 {
    background-color: #2ca0ab;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    top: 460px;
    right: -30px
}

body#case-study-page-genee #caseStudyContent .proposing {
    height: 500px;
    width: 100%;
    position: relative;
    padding: 150px 0 0 0
}

body#case-study-page-genee #caseStudyContent .proposing h2 {
    text-align: center;
    color: #39ad43;
    font-size: 38px;
    font-weight: 400;
    line-height: 46px;
    margin: 0 0 40px 0;
    padding-bottom: 0px;
    letter-spacing: 8px;
    position: relative
}

body#case-study-page-genee #caseStudyContent .proposing p {
    text-align: left;
    color: #5A6478;
    font-size: 22px;
    font-weight: 400;
    line-height: 28px;
    margin: 0 auto;
    padding-bottom: 0px;
    letter-spacing: 0px;
    position: relative;
    width: 60%
}

body#case-study-page-genee #caseStudyContent .wireframes {
    width: 100%;
    position: relative;
    padding: 50px 0 0 0;
    background-color: #e5e9ea
}

body#case-study-page-genee #caseStudyContent .wireframes h2 {
    text-align: center;
    color: #292a2a;
    font-size: 28px;
    font-weight: 400;
    line-height: 38px;
    margin: 0px 0px 40px;
    padding-bottom: 0px;
    letter-spacing: 6px;
    position: relative
}

body#case-study-page-genee #caseStudyContent .wireframes h3 {
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    line-height: 25px;
    margin: 0px auto 30px auto;
    letter-spacing: 0px;
    color: #a4a8a7;
    padding-bottom: 30px;
    position: relative;
    width: 100%;
    max-width: 250px;
    border-bottom: 1px solid #dbe1e2
}

body#case-study-page-genee #caseStudyContent .wireframes .wireframe-step {
    background: #3FAB49;
    position: relative;
    min-height: 284px
}

body#case-study-page-genee #caseStudyContent .wireframes .wireframe-step:last-child {
    background: transparent
}

body#case-study-page-genee #caseStudyContent .wireframes .wireframe-step.dark {
    background: #31933A
}

body#case-study-page-genee #caseStudyContent .wireframes .wireframe-step.breath-top>p {
    top: 80px;
    bottom: 0
}

body#case-study-page-genee #caseStudyContent .wireframes .wireframe-step.breath-top:before {
    content: '';
    display: block;
    width: 100%;
    height: 75px;
    background: #e5e9ea;
    position: absolute;
    top: 0;
    left: 0;
    bottom: auto;
    right: auto
}

body#case-study-page-genee #caseStudyContent .wireframes .wireframe-step.breath-bottom>p {
    top: 0;
    bottom: 80px
}

body#case-study-page-genee #caseStudyContent .wireframes .wireframe-step.breath-bottom:after {
    content: '';
    display: block;
    width: 100%;
    height: 75px;
    background: #e5e9ea;
    position: absolute;
    top: auto;
    left: 0;
    bottom: 0;
    right: auto
}

body#case-study-page-genee #caseStudyContent .wireframes .wireframe-step p {
    position: absolute;
    width: 100%;
    max-width: 60%;
    letter-spacing: 0;
    line-height: 18px;
    font-size: 14px
}

body#case-study-page-genee #caseStudyContent .wireframes .wireframe-step p span.number {
    width: 55px;
    height: 55px;
    border-radius: 27.5px;
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    position: absolute;
    top: 50%;
    bottom: auto;
    margin-top: -30px;
    color: #39ad43;
    text-align: center;
    line-height: 55px;
    font-size: 26px;
    background: white;
    z-index: 3
}

body#case-study-page-genee #caseStudyContent .wireframes .wireframe-step p span.text {
    font-weight: 400;
    font-size: 13px;
    color: #CBF3CF;
    line-height: 16px;
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
    position: absolute;
    top: 50%;
    left: 50%
}

body#case-study-page-genee #caseStudyContent .wireframes .wireframe-step p span.title {
    text-align: left;
    color: white;
    display: block;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    line-height: 14px;
    letter-spacing: 3px;
    margin-bottom: 10px
}

body#case-study-page-genee #caseStudyContent .wireframes .wireframe-step p.on-right {
    left: auto;
    right: 15px;
    padding-left: 10px
}

body#case-study-page-genee #caseStudyContent .wireframes .wireframe-step p.on-right span.number {
    left: 0;
    right: auto;
    margin-left: -43px
}

body#case-study-page-genee #caseStudyContent .wireframes .wireframe-step p.on-left {
    left: 15px;
    right: auto
}

body#case-study-page-genee #caseStudyContent .wireframes .wireframe-step p.on-left span.number {
    left: auto;
    right: 0;
    margin-right: -43px
}

body#case-study-page-genee #caseStudyContent .wireframes .wireframe-step>img {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    max-width: 160px
}

body#case-study-page-genee #caseStudyContent .wireframes .wireframe-step>img.on-right {
    left: auto;
    right: 0
}

body#case-study-page-genee #caseStudyContent .wireframes .wireframe-step>img.on-left {
    left: 0;
    right: auto
}

body#case-study-page-genee #caseStudyContent .identify-brand {
    padding: 150px 0
}

body#case-study-page-genee #caseStudyContent .identify-brand .title {
    background: #39ad43;
    padding: 30px 15px;
    position: relative;
    min-height: 450px
}

body#case-study-page-genee #caseStudyContent .identify-brand .title>div {
    position: absolute;
    top: 50%;
    right: 80px;
    bottom: auto;
    left: 90px;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    text-align: left;
    color: white;
    text-transform: uppercase;
    font-size: 38px;
    font-weight: 400;
    line-height: 54px;
    letter-spacing: 8px
}

body#case-study-page-genee #caseStudyContent .identify-brand .visual-style-1>img {
    max-width: 100%;
    position: relative;
    top: -35px
}

body#case-study-page-genee #caseStudyContent .identify-brand .visual-style-2,
body#case-study-page-genee #caseStudyContent .identify-brand .visual-style-3 {
    padding: 0
}

body#case-study-page-genee #caseStudyContent .identify-brand .visual-style-2>img,
body#case-study-page-genee #caseStudyContent .identify-brand .visual-style-3>img {
    max-width: 100%
}

body#case-study-page-genee #caseStudyContent .colors {
    height: 266px;
    width: 100%;
    position: relative;
    padding: 0px 0 0 0;
    overflow: hidden
}

body#case-study-page-genee #caseStudyContent .colors p {
    text-align: center;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    line-height: 266px;
    margin: 0 auto;
    padding-bottom: 0px;
    letter-spacing: 0px;
    position: relative
}

body#case-study-page-genee #caseStudyContent .colors .col1 {
    background-color: #33953C
}

body#case-study-page-genee #caseStudyContent .colors .col2 {
    background-color: #60C2A3
}

body#case-study-page-genee #caseStudyContent .colors .col3 {
    background-color: #C4E4DA
}

body#case-study-page-genee #caseStudyContent .colors .col4 {
    background-color: #D64C49
}

body#case-study-page-genee #caseStudyContent .colors .col5 {
    background-color: #2D3337
}

body#case-study-page-genee #caseStudyContent .colors .col6 {
    background-color: #E3E9E7
}

body#case-study-page-genee #caseStudyContent .smartcalendar {
    height: 760px;
    width: 100%;
    position: relative;
    padding: 0px 0 0 0;
    overflow: hidden
}

body#case-study-page-genee #caseStudyContent .smartcalendar p {
    text-align: center;
    color: #1a2b44;
    font-size: 28px;
    font-weight: 400;
    line-height: 38px;
    margin: 0;
    padding-bottom: 0px;
    letter-spacing: 2px;
    position: relative
}

body#case-study-page-genee #caseStudyContent .smartcalendar .col1 {
    background-color: #2d3337;
    height: 760px;
    padding-top: 80px;
    padding-bottom: 80px
}

body#case-study-page-genee #caseStudyContent .smartcalendar .col1>.container {
    width: 100%
}

body#case-study-page-genee #caseStudyContent .smartcalendar .col1 .scheduled-list {
    max-width: 640px
}

body#case-study-page-genee #caseStudyContent .smartcalendar .col1 h1 {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 1px;
    margin-bottom: 25px
}

body#case-study-page-genee #caseStudyContent .smartcalendar .col1 .appointment {
    width: 100%;
    overflow: hidden;
    margin-top: -1px;
    padding-bottom: 25px
}

body#case-study-page-genee #caseStudyContent .smartcalendar .col1 .appointment:last-child .time-type .type:after {
    display: none
}

body#case-study-page-genee #caseStudyContent .smartcalendar .col1 .appointment .time-type {
    width: 30%;
    float: left
}

body#case-study-page-genee #caseStudyContent .smartcalendar .col1 .appointment .time-type .time {
    width: 50%;
    float: left;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.1;
    color: white
}

body#case-study-page-genee #caseStudyContent .smartcalendar .col1 .appointment .time-type .time span {
    display: block;
    position: relative
}

body#case-study-page-genee #caseStudyContent .smartcalendar .col1 .appointment .time-type .time span.am:after,
body#case-study-page-genee #caseStudyContent .smartcalendar .col1 .appointment .time-type .time span.pm:after {
    display: block;
    position: absolute;
    content: "AM";
    top: auto;
    right: -2px;
    bottom: 3px;
    left: auto;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1;
    font-weight: 400
}

body#case-study-page-genee #caseStudyContent .smartcalendar .col1 .appointment .time-type .time span.pm:after {
    content: "PM"
}

body#case-study-page-genee #caseStudyContent .smartcalendar .col1 .appointment .time-type .type {
    width: 50%;
    float: right;
    text-align: center;
    position: relative
}

body#case-study-page-genee #caseStudyContent .smartcalendar .col1 .appointment .time-type .type:after {
    position: absolute;
    content: '';
    width: 1px;
    height: 25px;
    top: 100%;
    left: 50%;
    margin-left: -1px;
    background: rgba(255, 255, 255, 0.2)
}

body#case-study-page-genee #caseStudyContent .smartcalendar .col1 .appointment .time-type .type>img {
    width: 65%;
    max-width: 100%
}

body#case-study-page-genee #caseStudyContent .smartcalendar .col1 .appointment .description {
    width: 70%;
    float: right;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.1
}

body#case-study-page-genee #caseStudyContent .smartcalendar .col1 .appointment .description span {
    display: block;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.5);
    vertical-align: bottom;
    padding-top: 2px
}

body#case-study-page-genee #caseStudyContent .smartcalendar .col1 .appointment .description span>img {
    max-width: 24px;
    vertical-align: top;
    position: relative;
    left: -2px;
    top: -3px
}

body#case-study-page-genee #caseStudyContent .smartcalendar .col2 {
    background-color: #24292d
}

body#case-study-page-genee #caseStudyContent .smartcalendar .col2,
body#case-study-page-genee #caseStudyContent .smartcalendar .col2>.container,
body#case-study-page-genee #caseStudyContent .smartcalendar .col2>.container>.row,
body#case-study-page-genee #caseStudyContent .smartcalendar .col2>.container>.row>div {
    min-height: 760px
}

body#case-study-page-genee #caseStudyContent .smartcalendar .col2 h1 {
    position: absolute;
    top: 50%;
    width: 100%;
    padding: 0 80px;
    -webkit-transform: translate3d(0px, -50%, 0px);
    transform: translate3d(0px, -50%, 0px);
    text-align: left;
    color: #FFF;
    text-transform: uppercase;
    font-size: 34px;
    font-weight: 400;
    line-height: 52px;
    letter-spacing: 2px;
    max-width: 640px
}

body#case-study-page-genee #caseStudyContent .giveitatry {
    background-color: #39ad43;
    width: 100%;
    position: relative;
    padding: 125px 0 0 0;
    overflow: hidden
}

body#case-study-page-genee #caseStudyContent .giveitatry .title-subtitle-stores {
    position: static;
    -webkit-transform: none;
    transform: none
}

body#case-study-page-genee #caseStudyContent .giveitatry p {
    text-align: center;
    color: #1a2b44;
    font-size: 28px;
    font-weight: 400;
    line-height: 38px;
    margin: 0;
    padding-bottom: 0px;
    letter-spacing: 2px;
    position: relative
}

body#case-study-page-genee #caseStudyContent .giveitatry h2 {
    color: #fff
}

body#case-study-page-genee #caseStudyContent .giveitatry span.phone-container {
    display: block;
    max-width: 420px;
    margin: 45px auto 0;
    position: relative;
    left: -15px
}

body#case-study-page-genee #caseStudyContent .giveitatry span.phone-container iframe {
    border: 0;
    border: none
}

body#case-study-page-genee #caseStudyContent .giveitatry img.phone {
    position: relative;
    margin: 75px auto 0;
    width: 338px;
    left: -15px
}

body#case-study-page-genee .more-case-studies {
    background: white;
    color: #98999d
}

body#case-study-page-genee .more-case-studies strong {
    color: black
}

@media screen and (max-width: 1024px) {
    body#case-study-page-genee #caseStudyContent .identify-brand .title>div {
        text-align: center
    }

    body#case-study-page-genee #caseStudyContent .identify-brand .visual-style-1 {
        padding-top: 75px
    }

    body#case-study-page-genee #caseStudyContent .proposing h2 {
        left: 8px
    }

    body#case-study-page-genee #caseStudyContent .proposing p {
        text-align: center
    }

    body#case-study-page-genee #caseStudyContent .wireframes .wireframe-step p {
        width: 150px
    }

    body#case-study-page-genee #caseStudyContent .identify-brand .visual-style-1 {
        padding-top: 60px
    }

    body#case-study-page-genee #caseStudyContent .giveitatry span.phone-container {
        display: none
    }

    body#case-study-page-genee #caseStudyContent .giveitatry img.phone {
        display: block !important
    }
}

@media screen and (max-width: 768px) {
    body#case-study-page-genee #caseStudyContent .about-project tr td:last-child p {
        font-size: 16px !important;
        line-height: 23px !important;
        text-align: center
    }

    body#case-study-page-genee #caseStudyContent .giveitatry {
        position: static
    }

    body#case-study-page-genee #caseStudyContent .smartcalendar .col2,
    body#case-study-page-genee #caseStudyContent .smartcalendar .col2>.container,
    body#case-study-page-genee #caseStudyContent .smartcalendar .col2>.container>.row,
    body#case-study-page-genee #caseStudyContent .smartcalendar .col2>.container>.row>div {
        min-height: 0
    }

    body#case-study-page-genee #caseStudyContent .smartcalendar .col2 h1 {
        -webkit-transform: none;
        transform: none;
        position: static;
        padding: 45px 15px;
        text-align: center
    }

    body#case-study-page-genee #caseStudyContent .title-subtitle-stores {
        position: static;
        -webkit-transform: none;
        transform: none
    }

    body#case-study-page-genee #caseStudyContent .colors div[class^="col"] {
        padding-left: 0;
        padding-right: 0
    }

    body#case-study-page-genee #caseStudyContent .colors p {
        line-height: 133px
    }
}

@media screen and (max-width: 640px) {
    body#case-study-page-genee #caseStudyContent .coffee p {
        font-size: 32px;
        line-height: 36px
    }

    body#case-study-page-genee #caseStudyContent .mapping {
        height: 580px
    }

    body#case-study-page-genee #caseStudyContent .mapping .circle1 {
        height: auto;
        padding-top: 80px;
        padding-bottom: 80px
    }

    body#case-study-page-genee #caseStudyContent .mapping .circle1 p {
        line-height: 1
    }

    body#case-study-page-genee #caseStudyContent .proposing {
        padding-top: 80px;
        padding-bottom: 80px
    }

    body#case-study-page-genee #caseStudyContent .proposing p {
        text-align: center
    }

    body#case-study-page-genee #caseStudyContent .wireframes .wireframe-step p {
        width: 160px
    }

    body#case-study-page-genee #caseStudyContent .wireframes .wireframe-step p.on-left .text {
        padding-left: 0;
        padding-right: 45px
    }

    body#case-study-page-genee #caseStudyContent .wireframes .wireframe-step p.on-left .number {
        left: auto !important;
        right: 0 !important;
        margin-right: -50px !important;
        top: -15px
    }

    body#case-study-page-genee #caseStudyContent .wireframes .wireframe-step p.on-right .number {
        left: 0 !important;
        right: auto !important;
        margin-left: -50px !important;
        bottom: -43px !important;
        top: auto !important
    }

    body#case-study-page-genee #caseStudyContent .wireframes .wireframe-step:nth-child(3) p.on-right .number {
        left: 0 !important;
        right: auto !important;
        margin-left: -50px !important;
        bottom: auto !important;
        top: -15px !important
    }

    body#case-study-page-genee #caseStudyContent .identify-brand .title {
        min-height: 340px
    }

    body#case-study-page-genee #caseStudyContent .identify-brand .title>div {
        left: 0;
        right: 0;
        width: 100%;
        font-size: 32px;
        line-height: 36px
    }

    body#case-study-page-genee #caseStudyContent .identify-brand .visual-style-2>img,
    body#case-study-page-genee #caseStudyContent .identify-brand .visual-style-3>img {
        display: block;
        max-width: 90%;
        margin: 0 auto
    }

    body#case-study-page-genee #caseStudyContent .giveitatry .content {
        position: relative;
        left: 15px
    }
}

@media screen and (max-width: 480px) {
    body#case-study-page-genee #caseStudyContent .mapping .circle1 {
        position: relative;
        width: 100%;
        right: auto;
        top: auto;
        border-radius: 0
    }

    body#case-study-page-genee #caseStudyContent .mapping .circle2 {
        top: 300px
    }

    body#case-study-page-genee #caseStudyContent .mapping .circle3 {
        top: 350px
    }

    body#case-study-page-genee #caseStudyContent .mapping .circle4 {
        top: 400px
    }

    body#case-study-page-genee #caseStudyContent .mapping .circle5 {
        top: 400px
    }

    body#case-study-page-genee #caseStudyContent .mapping .circle6 {
        top: 450px
    }

    body#case-study-page-genee #caseStudyContent .mapping .circle7 {
        top: 460px
    }

    body#case-study-page-genee #caseStudyContent .proposing p {
        width: 100%
    }

    body#case-study-page-genee #caseStudyContent .wireframes h3 {
        width: 100%
    }
}

@media screen and (max-width: 320px) {
    body#case-study-page-genee #caseStudyContent .wireframes .wireframe-step p.on-left .number {
        left: auto !important;
        right: 0 !important;
        margin-right: -15px !important;
        top: -15px
    }

    body#case-study-page-genee #caseStudyContent .wireframes .wireframe-step p.on-right .number {
        left: 0 !important;
        right: auto !important;
        margin-left: -15px !important;
        bottom: -43px !important;
        top: auto !important
    }

    body#case-study-page-genee #caseStudyContent .wireframes .wireframe-step:nth-child(3) p.on-right .number {
        left: 0 !important;
        right: auto !important;
        margin-left: -15px !important;
        bottom: auto !important;
        top: -15px !important
    }
}

ul#items li#case-study-block-messi {
    background: black
}

ul#items li#case-study-block-messi a {
    color: white
}

body#case-study-page-messi {
    color: white;
    background: black
}

body#case-study-page-messi .preloader {
    background: black
}

body#case-study-page-messi .preloader .bar {
    background: white
}

body#case-study-page-messi .preloader .bar:after {
    box-shadow: 0 0 4px white, 0 0 4px white, 0 0 4px white
}

body#case-study-page-messi .cs-head a {
    text-decoration: none;
    color: white
}

body#case-study-page-messi .cs-head .links a.contact {
    border-color: white
}

body#case-study-page-messi .cs-head .links a.contact:hover {
    color: black
}

body#case-study-page-messi .title-subtitle-stores h1 {
    color: white
}

body#case-study-page-messi .title-subtitle-stores h2 {
    color: rgba(255, 255, 255, 0.5)
}

body#case-study-page-messi .title-subtitle-stores .stores a {
    text-decoration: none;
    color: white
}

body#case-study-page-messi a.see-more-case-study svg path {
    stroke: #000;
    fill: #000
}

body#case-study-page-messi #caseStudyContent {
    background: white;
    padding-left: 0;
    padding-right: 0
}

body#case-study-page-messi #caseStudyContent .about-project a {
    color: #E35534;
    text-decoration: none
}

body#case-study-page-messi #caseStudyContent .about-project a:hover {
    text-decoration: none
}

body#case-study-page-messi #caseStudyContent .about-project table td:first-child,
body#case-study-page-messi #caseStudyContent .about-project tr td:first-child {
    color: #152737
}

body#case-study-page-messi #caseStudyContent .about-project table td:last-child p,
body#case-study-page-messi #caseStudyContent .about-project tr td:last-child p {
    color: #1a2b44
}

body#case-study-page-messi #caseStudyContent .fb-app-contest {
    background: #000 url(/assets/case-studies/messi/fb-app-contest-bg-8ac5352cca9d4aeb8ad459a18aaeae0cac93e893eae1e38ec2d5b9b73fe315dc.jpg) no-repeat center bottom;
    background-size: 100% auto;
    background-size: cover;
    padding-top: 100px
}

body#case-study-page-messi #caseStudyContent .fb-app-contest h1 {
    text-transform: uppercase;
    text-align: center;
    color: #E35534;
    font-weight: 300;
    margin: 0 0 50px 0;
    font-size: 38px;
    letter-spacing: 8px;
    line-height: 46px
}

body#case-study-page-messi #caseStudyContent .fb-app-contest p {
    max-width: 800px;
    text-align: center;
    font-size: 22px;
    color: white;
    line-height: 36px;
    margin: 0 auto 85px auto;
    font-weight: 300
}

body#case-study-page-messi #caseStudyContent .fb-app-contest img.book-facebook {
    max-width: 785px;
    width: 50%;
    display: block;
    margin: 0 auto 85px auto
}

body#case-study-page-messi #caseStudyContent .first-description {
    background: #000 url(/assets/case-studies/messi/messi-783136974b8a989aeb78baae3afdf282f7fb3777597e06266ed3ca366ab57557.jpg) no-repeat left top;
    background-size: 100% auto;
    background-size: cover;
    overflow: hidden
}

body#case-study-page-messi #caseStudyContent .first-description>.container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto
}

body#case-study-page-messi #caseStudyContent .first-description p {
    padding-top: 55px;
    padding-bottom: 365px;
    font-size: 24px;
    color: white;
    line-height: 36px;
    max-width: 630px;
    color: white;
    font-weight: 300
}

body#case-study-page-messi .digital-version {
    background: #66AED8;
    padding-top: 125px;
    padding-bottom: 100px
}

body#case-study-page-messi .digital-version .phone-showcase {
    text-align: center
}

body#case-study-page-messi .digital-version .phone-showcase img {
    width: 100%;
    max-width: 413px
}

body#case-study-page-messi .digital-version .text h1 {
    margin-top: 75px;
    font-size: 38px;
    color: black;
    line-height: 46px;
    font-weight: 300;
    text-transform: uppercase
}

body#case-study-page-messi .digital-version .text p {
    font-size: 24px;
    color: white;
    line-height: 36px;
    font-weight: 300
}

body#case-study-page-messi .digital-version .text p:not(last-child) {
    margin-bottom: 30px
}

body#case-study-page-messi .codes-visitors {
    background: -moz-linear-gradient(left, #000 0%, rgba(255, 255, 255, 0.2) 50%, #000 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #000), color-stop(50%, rgba(255, 255, 255, 0.2)), color-stop(100%, #000));
    background: -webkit-linear-gradient(left, #000 0%, rgba(255, 255, 255, 0.2) 50%, #000 100%);
    background: -o-linear-gradient(left, #000 0%, rgba(255, 255, 255, 0.2) 50%, #000 100%);
    background: -ms-linear-gradient(left, #000 0%, rgba(255, 255, 255, 0.2) 50%, #000 100%);
    background: linear-gradient(to right, #000 0%, rgba(255, 255, 255, 0.2) 50%, #000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000', GradientType=1);
    position: relative;
    overflow: hidden
}

body#case-study-page-messi .codes-visitors .codes {
    background: transparent url(/assets/case-studies/messi/escudos1-08b5013eb165ca68e0e42d47500963b044b64e6d5e2eeb555f2044eac3fceb46.png) no-repeat center center;
    background-size: auto 80%;
    padding-top: 300px;
    padding-bottom: 180px
}

body#case-study-page-messi .codes-visitors .codes>.row {
    max-width: 1280px;
    margin: 0 auto
}

body#case-study-page-messi .codes-visitors .codes .text h1 {
    font-size: 38px;
    color: #E35534;
    line-height: 46px;
    font-weight: 300;
    text-transform: uppercase;
    margin: 0 0 45px 0
}

body#case-study-page-messi .codes-visitors .codes .text p {
    font-size: 24px;
    color: white;
    line-height: 36px;
    font-weight: 300
}

body#case-study-page-messi .codes-visitors img.hand {
    width: 50%;
    max-width: 461px;
    position: absolute;
    top: 150px;
    right: -10px;
    bottom: auto;
    left: auto
}

body#case-study-page-messi .codes-visitors .web>.row {
    max-width: 1280px;
    margin: 0 auto;
    padding-bottom: 150px
}

body#case-study-page-messi .codes-visitors .web .text h1 {
    font-size: 38px;
    color: #E35534;
    line-height: 46px;
    font-weight: 300;
    text-transform: uppercase;
    margin: 140px 0 45px 0
}

body#case-study-page-messi .codes-visitors .web .text p {
    font-size: 24px;
    color: white;
    line-height: 36px;
    font-weight: 300
}

body#case-study-page-messi .codes-visitors .web .web-image img {
    width: 100%
}

body#case-study-page-messi .case-study-video {
    background: transparent url(/assets/case-studies/messi/case-study-bg-de7350078631cdfd8e28c4e2c7d9ecbcb9a59f6652aea65ca50ffb40c78ea9e1.png) no-repeat center top;
    background-size: 100% auto;
    float: left;
    width: 100%;
    position: relative;
    z-index: 99;
    padding-top: 50px
}

body#case-study-page-messi .case-study-video h1 {
    font-size: 38px;
    color: #E35534;
    line-height: 46px;
    font-weight: 300;
    text-transform: uppercase;
    margin: 90px 0 60px 0;
    text-align: center
}

body#case-study-page-messi .case-study-video .video {
    width: 800px;
    height: 488px;
    margin: 0 auto 80px auto;
    padding: 25px 35px;
    background: transparent url(/assets/case-studies/messi/video-border-eb8c4326dc2e74899e3db23e57e11475288fabb369a96e4a4849064152218649.png) no-repeat center center;
    background-size: 100% 100%
}

body#case-study-page-messi .case-study-video .video iframe {
    border: 0;
    border: none;
    width: 734px;
    height: 435px
}

body#case-study-page-messi .more-case-studies {
    background: white;
    color: #98999d
}

body#case-study-page-messi .more-case-studies strong {
    color: black
}

@media screen and (max-width: 1140px) {
    body#case-study-page-messi #caseStudyContent .first-description img.diagonal-cut {
        top: -45px
    }

    body#case-study-page-messi .visitors-covers .text h1 {
        margin-top: 185px;
        margin-bottom: 185px
    }
}

@media screen and (max-width: 1024px) {
    body#case-study-page-messi .digital-version .text p {
        font-size: 20px;
        line-height: 30px
    }

    body#case-study-page-messi .codes-visitors .web .text h1 {
        margin: 60px 0 45px 0
    }
}

@media screen and (max-width: 768px) {
    body#case-study-page-messi #caseStudyContent .about-project tr td:last-child p {
        font-size: 16px !important;
        line-height: 23px !important;
        text-align: center
    }

    body#case-study-page-messi #caseStudyContent .first-description img.diagonal-cut {
        top: -25px
    }

    body#case-study-page-messi #caseStudyContent .first-description p {
        padding-top: 0
    }

    body#case-study-page-messi .visitors-covers .text h1 {
        max-width: 100%;
        width: 100%
    }

    body#case-study-page-messi .codes-visitors img.hand {
        z-index: -1
    }

    body#case-study-page-messi .case-study-video .video {
        width: 480px;
        height: 318px
    }

    body#case-study-page-messi .case-study-video .video iframe {
        width: 414px;
        height: 268px
    }
}

@media screen and (max-width: 480px) {
    body#case-study-page-messi #caseStudyContent .fb-app-contest img.book-facebook {
        width: 80%
    }

    body#case-study-page-messi #caseStudyContent .first-description p {
        padding-bottom: 0;
        text-shadow: 0 0 2px black
    }

    body#case-study-page-messi #caseStudyContent .first-description img.diagonal-cut {
        top: 0
    }

    body#case-study-page-messi .case-study-video .video {
        width: 320px;
        height: 200px
    }

    body#case-study-page-messi .case-study-video .video iframe {
        width: 250px;
        height: 150px
    }
}

ul#items li#case-study-block-espn {
    background: #F13929
}

ul#items li#case-study-block-espn a {
    color: white
}

body#case-study-page-espn {
    color: white;
    background: #F13929
}

body#case-study-page-espn .preloader {
    background: #F13929
}

body#case-study-page-espn .preloader .bar {
    background: white
}

body#case-study-page-espn .preloader .bar:after {
    box-shadow: 0 0 4px white, 0 0 4px white, 0 0 4px white
}

body#case-study-page-espn .cs-head a {
    text-decoration: none;
    color: white
}

body#case-study-page-espn .cs-head .links a.contact {
    border-color: white
}

body#case-study-page-espn .cs-head .links a.contact:hover {
    color: #F13929
}

body#case-study-page-espn .title-subtitle-stores h1 {
    color: white
}

body#case-study-page-espn .title-subtitle-stores h2 {
    color: rgba(0, 0, 0, 0.25)
}

body#case-study-page-espn .title-subtitle-stores .stores a {
    text-decoration: none;
    color: white
}

body#case-study-page-espn a.see-more-case-study svg path {
    stroke: #F13929;
    fill: #F13929
}

body#case-study-page-espn #caseStudyContent {
    background: white;
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
    overflow-y: auto
}

body#case-study-page-espn #caseStudyContent .about-project table td:first-child,
body#case-study-page-espn #caseStudyContent .about-project tr td:first-child {
    color: #152737
}

body#case-study-page-espn #caseStudyContent .about-project table td:last-child p,
body#case-study-page-espn #caseStudyContent .about-project tr td:last-child p {
    color: #1a2b44
}

body#case-study-page-espn #caseStudyContent .graphic-package {
    background: transparent url(/assets/case-studies/espn/graphic-package-bg-7d75ab7d5bbeba3d9df2ba42bb7b5207029789876390a58da6bc7b42f6750dea.jpg) no-repeat center center;
    background-size: 100% auto;
    background-size: cover
}

body#case-study-page-espn #caseStudyContent .graphic-package .container {
    padding: 350px 30px;
    text-align: center
}

body#case-study-page-espn #caseStudyContent .graphic-package .container img {
    width: 100%;
    max-width: 546px;
    position: relative;
    left: 50px
}

body#case-study-page-espn #caseStudyContent .kickoffnormal {
    padding: 350px 15px;
    background: #1C1D1F url(/assets/case-studies/espn/pattern-top-43117089ab69ecc5ea6a25c6a55a6d3d3a066c14d2cc0529978d0ca22bfdbd0c.png) no-repeat center top;
    background-size: 100% auto;
    position: relative
}

body#case-study-page-espn #caseStudyContent .kickoffnormal img.image {
    width: 50%;
    max-width: 831px;
    position: absolute;
    top: 250px;
    right: 0;
    bottom: auto;
    left: auto
}

body#case-study-page-espn #caseStudyContent .kickoffnormal .text h2 {
    font-size: 18px;
    color: #E35534;
    letter-spacing: 3px;
    line-height: 21px;
    text-transform: uppercase;
    font-weight: 500;
    margin: 0 0 15px 0
}

body#case-study-page-espn #caseStudyContent .kickoffnormal .text h1 {
    font-weight: 300;
    font-size: 52px;
    color: white;
    line-height: 62px;
    margin: 0 0 45px 0;
    text-transform: capitalize
}

body#case-study-page-espn #caseStudyContent .kickoffnormal .text p {
    font-weight: 300;
    font-size: 24px;
    color: #7B7D84;
    line-height: 30px
}

body#case-study-page-espn #caseStudyContent .broadcast {
    padding: 250px 15px;
    background: #212224 url(/assets/case-studies/espn/la-bg-bce930bea028908a43873d28ce7af781b630df6150f48baecbfd41d757a67de0.jpg) no-repeat center center;
    background-size: 100% auto;
    background-size: cover
}

body#case-study-page-espn #caseStudyContent .broadcast .content {
    background: #18191B;
    padding: 90px 15px 135px 150px;
    margin-right: -15px;
    position: relative
}

body#case-study-page-espn #caseStudyContent .broadcast .content .flags-divider {
    display: inline-block;
    margin-bottom: 90px;
    max-width: 805px
}

body#case-study-page-espn #caseStudyContent .broadcast .content h2 {
    font-size: 18px;
    color: #E35534;
    letter-spacing: 3px;
    line-height: 21px;
    text-transform: uppercase;
    font-weight: 500;
    margin: 0 0 15px 0
}

body#case-study-page-espn #caseStudyContent .broadcast .content h1 {
    font-weight: 300;
    font-size: 52px;
    color: white;
    line-height: 62px;
    margin: 0 0 45px 0;
    text-transform: capitalize
}

body#case-study-page-espn #caseStudyContent .broadcast .content p {
    font-weight: 300;
    font-size: 24px;
    color: #7B7D84;
    line-height: 30px;
    max-width: 450px
}

body#case-study-page-espn #caseStudyContent .broadcast .content img.la-map {
    position: absolute;
    width: 638px;
    height: auto;
    top: 50%;
    right: auto;
    bottom: auto;
    left: -560px
}

body#case-study-page-espn #caseStudyContent .on-screen {
    padding: 90px 15px 500px 15px;
    background: #18191A;
    position: relative
}

body#case-study-page-espn #caseStudyContent .on-screen .text {
    text-align: center
}

body#case-study-page-espn #caseStudyContent .on-screen .text h2 {
    font-size: 18px;
    color: #E35534;
    letter-spacing: 3px;
    line-height: 21px;
    text-transform: uppercase;
    font-weight: 500;
    margin: 0 0 15px 0
}

body#case-study-page-espn #caseStudyContent .on-screen .text h1 {
    font-weight: 300;
    font-size: 52px;
    color: white;
    line-height: 62px;
    margin: 0 0 45px 0;
    text-transform: capitalize
}

body#case-study-page-espn #caseStudyContent .on-screen .text p {
    font-weight: 300;
    font-size: 24px;
    color: #7B7D84;
    line-height: 30px;
    max-width: 740px;
    margin: 0 auto 90px auto
}

body#case-study-page-espn #caseStudyContent .on-screen .visual-elements {
    text-align: center
}

body#case-study-page-espn #caseStudyContent .on-screen .visual-elements h3 {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.25);
    letter-spacing: 2px;
    line-height: 17px;
    text-transform: uppercase;
    font-weight: 500;
    margin: 0 0 30px 0;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: inline-block
}

body#case-study-page-espn #caseStudyContent .on-screen .visual-elements img.architecture {
    display: block;
    width: 100%;
    max-width: 714px;
    margin: 0 auto 150px auto
}

body#case-study-page-espn #caseStudyContent .on-screen .visual-elements img.visual-layer {
    display: block;
    width: 100%;
    max-width: 617px;
    margin: 0 auto 90px auto
}

body#case-study-page-espn #caseStudyContent .on-screen img.lower-thirds {
    position: absolute;
    width: 90%;
    max-width: 1100px;
    top: auto;
    right: auto;
    bottom: -200px;
    left: 50%;
    z-index: 9
}

body#case-study-page-espn #caseStudyContent .transitionsnormal {
    padding: 295px 15px 250px 15px;
    background: #f03929 url(/assets/case-studies/espn/transition-bg-12c3a20c8612ca2d8a9acb263c0847ca87ee9bd3c1bb8d5fcfcf9e9f0f091acf.jpg) no-repeat center right;
    background-size: auto 100%;
    position: relative
}

body#case-study-page-espn #caseStudyContent .transitionsnormal>.container {
    max-width: 1000px
}

body#case-study-page-espn #caseStudyContent .transitionsnormal .content h2 {
    font-size: 18px;
    color: rgba(0, 0, 0, 0.25);
    letter-spacing: 3px;
    line-height: 21px;
    text-transform: uppercase;
    font-weight: 500;
    margin: 0 0 15px 0
}

body#case-study-page-espn #caseStudyContent .transitionsnormal .content h1 {
    font-weight: 300;
    font-size: 52px;
    color: white;
    line-height: 62px;
    margin: 0 0 45px 0;
    text-transform: capitalize
}

body#case-study-page-espn #caseStudyContent .transitionsnormal .content p {
    font-weight: 300;
    font-size: 24px;
    color: white;
    line-height: 30px;
    max-width: 460px;
    margin-bottom: 60px
}

body#case-study-page-espn #caseStudyContent .transitionsnormal .content img.transition-layers {
    max-width: 312px
}

body#case-study-page-espn #caseStudyContent img.semifinals,
body#case-study-page-espn #caseStudyContent img.live-soccer {
    width: 100%
}

body#case-study-page-espn #caseStudyContent .live-soccer-wrapper {
    position: relative
}

body#case-study-page-espn #caseStudyContent .live-soccer-wrapper h1 {
    margin: 0;
    padding: 25px 35px 28px 35px;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    font-weight: 400;
    font-size: 32px;
    color: white;
    line-height: 38px;
    background: #E35534;
    text-transform: uppercase;
    -webkit-transform: translate3d(-50%, 50%, 0);
    transform: translate3d(-50%, 50%, 0)
}

body#case-study-page-espn #caseStudyContent .ball-head-campaing {
    background: #E35534 url(/assets/case-studies/espn/ball-head-bg-0c91503c4f25956839e7550d148761bac7ab950c42279f24e36c1be7fd9762c3.jpg) no-repeat center center;
    background-size: 100% auto;
    background-size: cover;
    padding: 250px 15px;
    text-align: center
}

body#case-study-page-espn #caseStudyContent .ball-head-campaing h1 {
    font-weight: 500;
    font-size: 38px;
    color: white;
    line-height: 46px;
    margin: 0 0 45px 0
}

body#case-study-page-espn #caseStudyContent .ball-head-campaing p {
    font-weight: 300;
    font-size: 24px;
    color: white;
    line-height: 32px;
    max-width: 768px;
    margin: 0 auto
}

body#case-study-page-espn #caseStudyContent .banners-tv-spot {
    background: #E35534
}

body#case-study-page-espn #caseStudyContent .banners-tv-spot div[class^="col-"] {
    height: 250px;
    position: relative
}

body#case-study-page-espn #caseStudyContent .banners-tv-spot h1 {
    text-transform: uppercase;
    font-weight: 400;
    font-size: 26px;
    color: white;
    letter-spacing: 3px;
    line-height: 32px;
    text-align: center;
    position: absolute;
    top: 50%;
    right: 0;
    bottom: auto;
    left: 0;
    margin: 0;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0)
}

body#case-study-page-espn #caseStudyContent .banners-tv-spot .images {
    background: transparent url(/assets/case-studies/espn/banners-tv-spot-15b92405717decb6bb2dac1bc418704fd368a54c5d2c06212a513927dc05014f.png) no-repeat center center;
    background-size: 100% auto;
    background-size: cover
}

body#case-study-page-espn #caseStudyContent .award-promaxbda {
    padding: 90px 15px 150px 15px;
    background: #0a0b0f
}

body#case-study-page-espn #caseStudyContent .award-promaxbda .title h1 {
    font-weight: 300;
    font-size: 38px;
    color: white;
    line-height: 46px;
    text-align: center;
    margin: 0 0 150px 0
}

body#case-study-page-espn #caseStudyContent .award-promaxbda .title h1 strong {
    font-weight: 500
}

body#case-study-page-espn #caseStudyContent .award-promaxbda .award-image {
    text-align: center
}

body#case-study-page-espn #caseStudyContent .award-promaxbda .award-image img {
    width: 100%;
    max-width: 184px
}

body#case-study-page-espn #caseStudyContent .award-promaxbda .award-image h2 {
    font-weight: 300;
    font-size: 28px;
    color: white;
    letter-spacing: 2px;
    line-height: 34px;
    margin: 30px 0 0 0
}

body#case-study-page-espn #caseStudyContent .award-promaxbda .award-image h2 span {
    color: #967242
}

body#case-study-page-espn .more-case-studies {
    border-top: 1px solid #967242;
    background: #0A0B0F;
    color: rgba(255, 255, 255, 0.75)
}

body#case-study-page-espn .more-case-studies strong {
    color: white
}

@media screen and (max-width: 1140px) {
    body#case-study-page-espn #caseStudyContent .transitionsnormal {
        padding: 195px 15px 150px 15px
    }
}

@media screen and (max-width: 1024px) {
    body#case-study-page-espn #caseStudyContent .kickoffnormal {
        padding-top: 150px;
        padding-bottom: 100px
    }

    body#case-study-page-espn #caseStudyContent .kickoffnormal img.image {
        top: 175px
    }

    body#case-study-page-espn #caseStudyContent .broadcast {
        padding-top: 100px;
        padding-bottom: 100px
    }

    body#case-study-page-espn #caseStudyContent .on-screen {
        padding-bottom: 350px
    }
}

@media screen and (max-width: 768px) {
    body#case-study-page-espn #caseStudyContent .about-project tr td:last-child p {
        font-size: 16px !important;
        line-height: 23px !important;
        text-align: center
    }

    body#case-study-page-espn #caseStudyContent .kickoffnormal {
        padding-top: 150px;
        padding-bottom: 50px
    }

    body#case-study-page-espn #caseStudyContent .kickoffnormal img.image {
        position: relative;
        width: 100%;
        top: auto;
        right: -15px;
        bottom: auto;
        left: auto
    }

    body#case-study-page-espn #caseStudyContent .broadcast .content img.la-map {
        position: relative;
        width: 638px;
        height: auto;
        top: auto;
        right: auto;
        bottom: auto;
        left: -150px;
        -webkit-transform: none;
        transform: none
    }

    body#case-study-page-espn #caseStudyContent .transitionsnormal {
        background: #f03929
    }

    body#case-study-page-espn #caseStudyContent .transitionsnormal .content {
        text-align: center
    }

    body#case-study-page-espn #caseStudyContent .transitionsnormal .content p {
        margin-left: auto;
        margin-right: auto
    }

    body#case-study-page-espn #caseStudyContent .ball-head-campaing {
        padding-top: 150px;
        padding-bottom: 150px
    }

    body#case-study-page-espn .live-soccer-wrapper h1 {
        font-size: 18px !important;
        line-height: 28px !important;
        padding: 10px 15px !important;
        min-width: 300px !important;
        text-align: center;
        font-weight: 500 !important
    }
}

@media screen and (max-width: 640px) {
    body#case-study-page-espn #caseStudyContent .graphic-package .container img {
        left: 0
    }

    body#case-study-page-espn #caseStudyContent .broadcast .content {
        padding-left: 45px
    }

    body#case-study-page-espn #caseStudyContent .broadcast .content img.la-map {
        width: 480px;
        left: -50px
    }

    body#case-study-page-espn #caseStudyContent .on-screen {
        padding-bottom: 150px
    }
}

@media screen and (max-width: 480px) {
    body#case-study-page-espn #caseStudyContent .broadcast .content {
        padding-left: 45px
    }

    body#case-study-page-espn #caseStudyContent .broadcast .content img.la-map {
        width: 320px;
        left: -30px
    }

    body#case-study-page-espn #caseStudyContent .graphic-package .container {
        padding-top: 220px;
        padding-bottom: 220px
    }

    body#case-study-page-espn #caseStudyContent .broadcast {
        padding-top: 70px;
        padding-bottom: 70px
    }

    body#case-study-page-espn #caseStudyContent .broadcast .content {
        padding-top: 60px;
        padding-bottom: 85px
    }

    body#case-study-page-espn #caseStudyContent .broadcast .content img.la-map {
        width: 100%
    }

    body#case-study-page-espn #caseStudyContent .broadcast .content .flags-divider {
        margin-bottom: 60px
    }
}

ul#items li#case-study-block-espnjo {
    background: #1b63b4
}

ul#items li#case-study-block-espnjo a {
    color: white
}

body#case-study-page-espnjo {
    color: white;
    background: #1b63b4
}

body#case-study-page-espnjo .preloader {
    background: #1b63b4
}

body#case-study-page-espnjo .preloader .bar {
    background: white
}

body#case-study-page-espnjo .preloader .bar:after {
    box-shadow: 0 0 4px white, 0 0 4px white, 0 0 4px white
}

body#case-study-page-espnjo .cs-head a {
    text-decoration: none;
    color: white
}

body#case-study-page-espnjo .cs-head .links a.contact {
    border-color: white
}

body#case-study-page-espnjo .cs-head .links a.contact:hover {
    color: #1b63b4
}

body#case-study-page-espnjo .title-subtitle-stores h1 {
    color: white
}

body#case-study-page-espnjo .title-subtitle-stores h2 {
    color: #76afef
}

body#case-study-page-espnjo .title-subtitle-stores .stores a {
    text-decoration: none;
    color: white
}

body#case-study-page-espnjo a.see-more-case-study svg path {
    stroke: #1b63b4;
    fill: #1b63b4
}

body#case-study-page-espnjo #caseStudyContent {
    background: white;
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
    overflow-y: auto
}

body#case-study-page-espnjo #caseStudyContent .about-project table td:first-child,
body#case-study-page-espnjo #caseStudyContent .about-project tr td:first-child {
    color: #152737
}

body#case-study-page-espnjo #caseStudyContent .about-project table td:last-child p,
body#case-study-page-espnjo #caseStudyContent .about-project tr td:last-child p {
    color: #1a2b44
}

body#case-study-page-espnjo #caseStudyContent .official-broadcaster {
    background: transparent url(/assets/case-studies/espnjo/official-broadcaster-bg-02799c5c7c895a2da307a87a8eb1ca6af960c4f5616ccb67c6cc0c260f183243.jpg) no-repeat center top;
    background-size: cover;
    position: relative;
    z-index: 100
}

body#case-study-page-espnjo #caseStudyContent .official-broadcaster .container {
    position: absolute;
    left: 0;
    top: 35%
}

body#case-study-page-espnjo #caseStudyContent .official-broadcaster .container img {
    margin: 0;
    width: 94vw;
    position: relative;
    left: -20px
}

body#case-study-page-espnjo #caseStudyContent .kickoff {
    padding: 200px 15px 0px;
    background: #1C1D1F url(/assets/case-studies/espnjo/kickoff-bg-f68a13b21f18b10f3e55b3ee727309cb32e6591cebdb6e525d7c64cfcc4b17ba.jpg) no-repeat center top;
    position: relative;
    background-size: cover
}

body#case-study-page-espnjo #caseStudyContent .kickoff img.image {
    width: 37vw;
    max-width: 685px;
    position: absolute;
    top: 0px;
    right: 0;
    bottom: auto;
    left: auto
}

body#case-study-page-espnjo #caseStudyContent .kickoff img.image2 {
    width: 35vw;
    max-width: 753px;
    position: absolute;
    top: 50%;
    right: auto;
    bottom: 0;
    left: -14px
}

body#case-study-page-espnjo #caseStudyContent .kickoff .text h2 {
    font-size: 18px;
    color: #76afef;
    letter-spacing: 3px;
    line-height: 21px;
    text-transform: uppercase;
    font-weight: 500;
    margin: 0 0 15px 0
}

body#case-study-page-espnjo #caseStudyContent .kickoff .text h1 {
    font-weight: 300;
    font-size: 52px;
    color: white;
    line-height: 62px;
    margin: 0 0 45px 0;
    text-transform: capitalize
}

body#case-study-page-espnjo #caseStudyContent .kickoff .text p {
    font-weight: 300;
    font-size: 24px;
    color: white;
    line-height: 30px
}

body#case-study-page-espnjo #caseStudyContent .natacion {
    padding: 405px 15px;
    background: #212224 url(/assets/case-studies/espnjo/natacion-bg-0ce9389198423622546366f7ec39c1fe7d1906b4b7f464accf0dc90f5e4db765.jpg) no-repeat center center;
    background-size: 100% auto;
    background-size: cover
}

body#case-study-page-espnjo #caseStudyContent .on-screen {
    padding: 90px 15px 800px 15px;
    background: #0f4c91;
    position: relative
}

body#case-study-page-espnjo #caseStudyContent .on-screen .text {
    text-align: center
}

body#case-study-page-espnjo #caseStudyContent .on-screen .text h2 {
    font-size: 18px;
    color: #6fadef;
    letter-spacing: 3px;
    line-height: 21px;
    text-transform: uppercase;
    font-weight: 500;
    margin: 0 0 15px 0
}

body#case-study-page-espnjo #caseStudyContent .on-screen .text h1 {
    font-weight: 300;
    font-size: 52px;
    color: white;
    line-height: 62px;
    margin: 0 0 45px 0;
    text-transform: capitalize
}

body#case-study-page-espnjo #caseStudyContent .on-screen .text p {
    font-weight: 300;
    font-size: 24px;
    color: white;
    line-height: 30px;
    max-width: 740px;
    margin: 0 auto 90px auto
}

body#case-study-page-espnjo #caseStudyContent .on-screen .visual-elements {
    text-align: center
}

body#case-study-page-espnjo #caseStudyContent .on-screen .visual-elements h3 {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.25);
    letter-spacing: 2px;
    line-height: 17px;
    text-transform: uppercase;
    font-weight: 500;
    margin: 0 0 30px 0;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: inline-block
}

body#case-study-page-espnjo #caseStudyContent .on-screen .visual-elements img.architecture {
    display: block;
    width: 100%;
    max-width: 714px;
    margin: 0 auto 150px auto
}

body#case-study-page-espnjo #caseStudyContent .on-screen .visual-elements img.visual-layer {
    display: block;
    width: 100%;
    max-width: 1115px;
    margin: 0 auto 90px auto
}

body#case-study-page-espnjo #caseStudyContent .on-screen img.image {
    width: 54vw;
    max-width: 809px;
    position: absolute;
    top: 730px;
    right: auto;
    bottom: auto;
    left: 0
}

body#case-study-page-espnjo #caseStudyContent .on-screen img.lower-thirds {
    position: absolute;
    width: 90%;
    max-width: 1100px;
    top: auto;
    right: auto;
    bottom: 80px;
    left: 50%;
    z-index: 9
}

body#case-study-page-espnjo #caseStudyContent .on-screen .tv {
    width: 975px;
    height: 295px;
    position: absolute;
    bottom: 80px;
    left: 50%;
    -webkit-transform: translate3d(-45%, 0, 0);
    transform: translate3d(-45%, 0, 0);
    z-index: 10;
    overflow: hidden
}

body#case-study-page-espnjo #caseStudyContent .on-screen .tv .circle {
    background: url(/assets/case-studies/espnjo/lt-circle-7bd3bfbb07a0bc9ac8f7a4fe13360fe2d293b1f38689f5e7b6d7c5350e007301.png) center top no-repeat;
    width: 318px;
    height: 295px;
    position: absolute;
    top: 0;
    right: 0;
    display: none
}

body#case-study-page-espnjo #caseStudyContent .on-screen .tv .green {
    background: url(/assets/case-studies/espnjo/lt-green-7c66ffeb21790fa02daac4b3dbb8ae195e327b78141c58d8a34aeebe96ca0ffa.png) center top no-repeat;
    width: 871px;
    height: 136px;
    position: absolute;
    top: 77px;
    left: 0px;
    left: 975px;
    opacity: 0
}

body#case-study-page-espnjo #caseStudyContent .on-screen .tv .white {
    background: url(/assets/case-studies/espnjo/lt-white-6db124469fc57104fe3711ba1b9915b8cda5974b27884ad345823c73ebff56b2.png) center top no-repeat;
    width: 234px;
    height: 130px;
    position: absolute;
    top: 79px;
    left: 37px;
    left: 200px;
    opacity: 0
}

body#case-study-page-espnjo #caseStudyContent .on-screen .tv .blue {
    background: url(/assets/case-studies/espnjo/lt-blue-0ecd18270b74dae9955218306f0b8be511a241d2200fd0ce6e327c6a6bd020b5.png) center top no-repeat;
    width: 670px;
    height: 131px;
    position: absolute;
    top: 79px;
    left: 198px;
    left: 350px;
    opacity: 0
}

body#case-study-page-espnjo #caseStudyContent .on-screen .tv .text1 {
    background: url(/assets/case-studies/espnjo/lt-text1-5253936fa5986f602c12bfeaae1a08530232dffda0cf1d3c94274d380b5997ad.png) center top no-repeat;
    width: 513px;
    height: 53px;
    position: absolute;
    top: 101px;
    top: 130px;
    left: 305px;
    opacity: 0
}

body#case-study-page-espnjo #caseStudyContent .on-screen .tv .text2 {
    background: url(/assets/case-studies/espnjo/lt-text2-3b88bdf8eb915ce66dadfa43b781f4db39e9349280dc41ddfd97aa17ec9efbb3.png) center top no-repeat;
    width: 509px;
    height: 21px;
    position: absolute;
    top: 179px;
    top: 190px;
    left: 305px;
    opacity: 0
}

body#case-study-page-espnjo #caseStudyContent .transitions {
    padding: 80px 15px 80px 15px;
    background: #0f4c91 url(/assets/case-studies/espnjo/transition-bg-7db60de57997641ffc21b5952156be15d44748ab1b99ca5e6b1924da6a097d20.jpg) no-repeat center right;
    background-size: auto 100%;
    position: relative
}

body#case-study-page-espnjo #caseStudyContent .transitions>.container {
    max-width: 1000px
}

body#case-study-page-espnjo #caseStudyContent .transitions .content h2 {
    font-size: 18px;
    color: #6fadef;
    letter-spacing: 3px;
    line-height: 21px;
    text-transform: uppercase;
    font-weight: 500;
    margin: 0 0 15px 0
}

body#case-study-page-espnjo #caseStudyContent .transitions .content h1 {
    font-weight: 300;
    font-size: 52px;
    color: white;
    line-height: 62px;
    margin: 0 0 45px 0;
    text-transform: capitalize
}

body#case-study-page-espnjo #caseStudyContent .transitions .content p {
    font-weight: 300;
    font-size: 24px;
    color: white;
    line-height: 30px;
    max-width: 460px;
    margin-bottom: 60px
}

body#case-study-page-espnjo #caseStudyContent .transitions .content img.transition-layers {
    max-width: 312px
}

body#case-study-page-espnjo #caseStudyContent img.semifinals {
    width: 100%
}

body#case-study-page-espnjo .more-case-studies {
    background: white;
    color: #bfc0c2
}

body#case-study-page-espnjo .more-case-studies strong {
    color: #252525
}

@media screen and (max-width: 1140px) {
    body#case-study-page-espnjo #caseStudyContent .transitions {
        padding: 100px 15px 0px 15px
    }
}

@media screen and (max-width: 1024px) {
    body#case-study-page-espnjo #caseStudyContent .kickoff {
        padding-top: 120px;
        height: 700px !important
    }

    body#case-study-page-espnjo #caseStudyContent .kickoff img.image2 {
        width: 25vw;
        top: 66%
    }

    body#case-study-page-espnjo #caseStudyContent .transitions {
        padding: 15px 15px 0px 15px
    }

    body#case-study-page-espnjo #caseStudyContent .broadcast {
        padding-top: 100px;
        padding-bottom: 100px
    }

    body#case-study-page-espnjo #caseStudyContent .on-screen {
        padding-bottom: 550px
    }
}

@media screen and (max-width: 900px) {
    body#case-study-page-espnjo #caseStudyContent .on-screen .tv {
        display: none !important
    }
}

@media screen and (max-width: 768px) {
    body#case-study-page-espnjo #caseStudyContent .about-project tr td:last-child p {
        font-size: 16px !important;
        line-height: 23px !important;
        text-align: center
    }

    body#case-study-page-espnjo #caseStudyContent .kickoff {
        padding-top: 150px;
        padding-bottom: 50px
    }

    body#case-study-page-espnjo #caseStudyContent .kickoff img.image,
    body#case-study-page-espnjo #caseStudyContent .kickoff img.image2 {
        display: none
    }

    body#case-study-page-espnjo #caseStudyContent .transitions {
        background: #0f4c91
    }

    body#case-study-page-espnjo #caseStudyContent .transitions .content {
        text-align: center
    }

    body#case-study-page-espnjo #caseStudyContent .transitions .content p {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px
    }
}

@media screen and (max-width: 640px) {
    body#case-study-page-espnjo #caseStudyContent .kickoff {
        padding-top: 50px
    }

    body#case-study-page-espnjo #caseStudyContent .on-screen {
        padding-bottom: 400px
    }

    body#case-study-page-espnjo #caseStudyContent .transitions {
        height: 350px !important
    }
}

#case-study-block-red_bull_records {
    background: #CD003B
}

#case-study-block-red_bull_records a {
    color: white
}

body#case-study-page-red_bull_records {
    color: white;
    background: #CD003B
}

body#case-study-page-red_bull_records .preloader {
    background: #CD003B
}

body#case-study-page-red_bull_records .preloader .bar {
    background: white
}

body#case-study-page-red_bull_records .preloader .bar:after {
    box-shadow: 0 0 4px white, 0 0 4px white, 0 0 4px white
}

body#case-study-page-red_bull_records #page {
    -webkit-transform: none !important;
    transform: none !important
}

body#case-study-page-red_bull_records .cs-head a {
    text-decoration: none;
    color: white
}

body#case-study-page-red_bull_records .cs-head .links a.contact {
    border-color: white
}

body#case-study-page-red_bull_records .cs-head .links a.contact:hover {
    color: black
}

body#case-study-page-red_bull_records .title-subtitle-stores h1 {
    color: white
}

body#case-study-page-red_bull_records .title-subtitle-stores h2 {
    color: #ea99b1
}

body#case-study-page-red_bull_records .title-subtitle-stores .stores a {
    text-decoration: none;
    color: white
}

body#case-study-page-red_bull_records a.see-more-case-study svg path {
    stroke: #000;
    fill: #000
}

body#case-study-page-red_bull_records #caseStudyContent {
    background: white;
    padding-left: 0;
    padding-right: 0
}

body#case-study-page-red_bull_records #caseStudyContent .about-project a {
    color: #E35534;
    text-decoration: none
}

body#case-study-page-red_bull_records #caseStudyContent .about-project a:hover {
    text-decoration: none
}

body#case-study-page-red_bull_records #caseStudyContent .about-project table td:first-child,
body#case-study-page-red_bull_records #caseStudyContent .about-project tr td:first-child {
    color: #152737
}

body#case-study-page-red_bull_records #caseStudyContent .about-project table td:last-child p,
body#case-study-page-red_bull_records #caseStudyContent .about-project tr td:last-child p {
    color: #1a2b44
}

body#case-study-page-red_bull_records #caseStudyContent .not-typical {
    background: transparent url(/assets/case-studies/red_bull_records/not-typical-bg-e6a068c2a0962bacb4d75433eb992c526eeccc25bb454347c393c53fb291cd6e.jpg) no-repeat center center;
    background-size: 100% auto;
    background-size: cover
}

body#case-study-page-red_bull_records #caseStudyContent .not-typical .container {
    padding: 350px 30px;
    text-align: center
}

body#case-study-page-red_bull_records #caseStudyContent .not-typical .container img {
    width: 100%;
    max-width: 200px;
    position: relative;
    margin-left: -100px;
    left: 50px
}

body#case-study-page-red_bull_records #caseStudyContent .not-typical .container h2 {
    text-transform: uppercase;
    text-align: center;
    font-size: 38px;
    color: white;
    font-weight: 300;
    line-height: 54px;
    margin: 50px auto 20px auto;
    letter-spacing: 8px;
    position: relative;
    width: 900px
}

body#case-study-page-red_bull_records #caseStudyContent .not-typical .container p {
    text-align: center;
    font-size: 24px;
    color: white;
    font-weight: 300;
    line-height: 41px;
    margin: 0 auto 20px auto;
    position: relative;
    width: 900px
}

body#case-study-page-red_bull_records #caseStudyContent .uxresearch {
    padding: 350px 15px 300px;
    background: #E8EAEF;
    position: relative
}

body#case-study-page-red_bull_records #caseStudyContent .uxresearch img.image {
    width: 50%;
    max-width: 589px;
    position: absolute;
    top: 150px;
    right: -120%;
    bottom: auto;
    left: auto;
    -webkit-transition: all 1s ease;
    transition: all 1s ease
}

body#case-study-page-red_bull_records #caseStudyContent .uxresearch img.image.imageshow {
    right: 0
}

body#case-study-page-red_bull_records #caseStudyContent .uxresearch .text h2 {
    font-size: 38px;
    color: #000;
    letter-spacing: 8px;
    line-height: 46px;
    text-transform: uppercase;
    font-weight: 400;
    margin: 0 0 75px 15px
}

body#case-study-page-red_bull_records #caseStudyContent .uxresearch .text p {
    font-weight: 400;
    font-size: 18px;
    color: #98A3A7;
    line-height: 26px;
    width: 318px;
    margin: 35px 0 60px 15px
}

body#case-study-page-red_bull_records #caseStudyContent .uxresearch .text .lines {
    margin-left: 15px
}

body#case-study-page-red_bull_records #caseStudyContent .uxresearch .text .lines .line {
    float: left;
    width: 15px;
    height: 16px;
    margin-right: 16px;
    position: relative
}

body#case-study-page-red_bull_records #caseStudyContent .uxresearch .text .lines .line::before {
    content: '';
    display: block;
    background-color: #AAB1BE;
    position: absolute;
    top: 7px;
    right: 0;
    bottom: 7px;
    left: 0
}

body#case-study-page-red_bull_records #caseStudyContent .uxresearch .text .lines .line.color::before {
    background-color: #CD003B
}

body#case-study-page-red_bull_records #caseStudyContent .uxresearch .text .lines .line:hover {
    cursor: pointer
}

body#case-study-page-red_bull_records #caseStudyContent .unconventional {
    background: #000
}

body#case-study-page-red_bull_records #caseStudyContent .unconventional .container {
    padding: 0px 30px 270px;
    text-align: center
}

body#case-study-page-red_bull_records #caseStudyContent .unconventional .container h2 {
    text-transform: uppercase;
    text-align: center;
    font-size: 32px;
    color: #CD003B;
    font-weight: 300;
    line-height: 38px;
    margin: 305px auto 0 auto;
    letter-spacing: 7px;
    position: relative;
    width: 900px
}

body#case-study-page-red_bull_records #caseStudyContent .unconventional .container p {
    text-align: center;
    font-size: 22px;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 300;
    line-height: 28px;
    margin: 60px auto 135px auto;
    position: relative;
    width: 900px
}

body#case-study-page-red_bull_records #caseStudyContent .unconventional .player-wrapper {
    position: relative;
    text-align: center;
    height: 90px;
    line-height: 90px;
    width: 100%;
    padding-top: 20px
}

body#case-study-page-red_bull_records #caseStudyContent .unconventional .player-wrapper .scrollmagic-pin-spacer {
    min-width: 48px !important;
    min-height: 48px !important
}

body#case-study-page-red_bull_records #caseStudyContent .unconventional .player-wrapper .player-bg {
    position: absolute;
    width: 100%;
    max-width: 1040px;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    top: 50%;
    left: 50%;
    display: block;
    z-index: 1
}

body#case-study-page-red_bull_records #caseStudyContent .unconventional .player-wrapper .player-bg.mobile {
    display: none;
    width: 282px;
    height: 89px;
    max-width: 100%
}

body#case-study-page-red_bull_records #caseStudyContent .unconventional .player-wrapper .play-button-wrapper {
    display: block;
    position: relative;
    z-index: 11;
    width: 100%;
    height: 48px;
    margin: 0 auto;
    text-align: center
}

body#case-study-page-red_bull_records #caseStudyContent .unconventional .player-wrapper #play-button {
    display: block;
    margin: 0 auto !important;
    height: 100% !important;
    width: auto !important
}

body#case-study-page-red_bull_records #caseStudyContent .fifty {
    background: #000
}

body#case-study-page-red_bull_records #caseStudyContent .fifty .container {
    padding: 0px 30px;
    text-align: center
}

body#case-study-page-red_bull_records #caseStudyContent .fifty .container h2 {
    text-transform: uppercase;
    text-align: center;
    font-size: 32px;
    color: #CD003B;
    font-weight: 300;
    line-height: 38px;
    margin: 0 auto;
    letter-spacing: 7px;
    position: relative;
    width: 900px;
    z-index: 10
}

body#case-study-page-red_bull_records #caseStudyContent .fifty .container p {
    text-align: center;
    font-size: 22px;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 300;
    line-height: 28px;
    margin: 30px auto 135px auto;
    position: relative;
    width: 900px;
    z-index: 10
}

body#case-study-page-red_bull_records #caseStudyContent .fifty .container svg {
    width: 1600px;
    max-width: 1600px;
    position: relative;
    left: 50%;
    display: block;
    margin: -455px 0 0 -800px;
    z-index: 0
}

body#case-study-page-red_bull_records #caseStudyContent .wireframe {
    background: #000
}

body#case-study-page-red_bull_records #caseStudyContent .wireframe .container-fluid {
    padding: 0px 30px;
    text-align: center
}

body#case-study-page-red_bull_records #caseStudyContent .wireframe .container-fluid h2 {
    text-transform: uppercase;
    text-align: center;
    font-size: 32px;
    color: #CD003B;
    font-weight: 300;
    line-height: 38px;
    margin: 200px auto 0 auto;
    letter-spacing: 7px;
    position: relative;
    width: 100%;
    max-width: 900px
}

body#case-study-page-red_bull_records #caseStudyContent .wireframe .container-fluid p {
    text-align: center;
    font-size: 22px;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 300;
    line-height: 28px;
    margin: 30px auto 66px auto;
    position: relative;
    width: 100%;
    max-width: 900px
}

body#case-study-page-red_bull_records #caseStudyContent .wireframe .container-fluid .wireframes-comp {
    margin: 0 auto;
    position: relative
}

body#case-study-page-red_bull_records #caseStudyContent .wireframe .container-fluid .wireframes-comp img {
    width: 1598px;
    max-width: 100%;
    display: block;
    margin: 0 auto;
    position: relative;
    z-index: 2
}

body#case-study-page-red_bull_records #caseStudyContent .wireframe .container-fluid .wireframes-comp #wireframeStroke {
    position: absolute;
    top: 3px;
    right: auto;
    bottom: auto;
    left: 50%;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    max-width: 100%;
    height: auto;
    z-index: 1
}

body#case-study-page-red_bull_records #caseStudyContent .visual-design .text h2 {
    color: #152737;
    font-weight: 100;
    margin: 184px 0 0 30px;
    font-size: 38px;
    letter-spacing: 8px;
    line-height: 50px;
    width: 300px;
    text-transform: uppercase
}

body#case-study-page-red_bull_records #caseStudyContent .visual-design .text p {
    color: #8D9DAA;
    font-weight: 100;
    margin: 30px 0 0 30px;
    font-size: 18px;
    line-height: 27px;
    width: 300px
}

body#case-study-page-red_bull_records #caseStudyContent .visual-design .color-square {
    height: 330px
}

body#case-study-page-red_bull_records #caseStudyContent .visual-design .color-square p {
    line-height: 330px;
    color: #fff;
    font-size: 18px;
    text-align: center
}

body#case-study-page-red_bull_records #caseStudyContent .release {
    padding: 230px 0;
    background: #DCDFE5
}

body#case-study-page-red_bull_records #caseStudyContent .release .container {
    padding: 0px 30px;
    text-align: center
}

body#case-study-page-red_bull_records #caseStudyContent .release .container img {
    width: 100%;
    max-width: 1000px;
    position: relative;
    margin-left: -500px;
    left: 50%;
    display: block
}

body#case-study-page-red_bull_records #caseStudyContent .typography {
    background: #0C2044
}

body#case-study-page-red_bull_records #caseStudyContent .typography img {
    margin: 190px 0 190px 30px
}

body#case-study-page-red_bull_records #caseStudyContent .typography h2 {
    font-weight: 100;
    font-size: 32px;
    line-height: 38px;
    margin: 170px 0 0 100px;
    color: #fff
}

body#case-study-page-red_bull_records #caseStudyContent .typography p {
    font-weight: 100;
    font-size: 18px;
    line-height: 27px;
    margin: 50px 0 0 100px;
    color: #8D9DAA;
    width: 270px
}

body#case-study-page-red_bull_records #caseStudyContent .uianimation {
    background-color: #CD003B
}

body#case-study-page-red_bull_records #caseStudyContent .uianimation img.imageui {
    width: 520px;
    top: 180px;
    left: 30px;
    position: absolute;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    opacity: 0
}

body#case-study-page-red_bull_records #caseStudyContent .uianimation img.imageui.imageui1 {
    top: 85px
}

body#case-study-page-red_bull_records #caseStudyContent .uianimation img.imageui.imageshow {
    opacity: 1
}

body#case-study-page-red_bull_records #caseStudyContent .uianimation h2 {
    font-weight: 100;
    font-size: 38px;
    line-height: 54px;
    margin: 300px 0 0 30px;
    color: #fff;
    text-transform: uppercase
}

body#case-study-page-red_bull_records #caseStudyContent .uianimation p {
    font-weight: 100;
    font-size: 24px;
    line-height: 36px;
    margin: 50px 0 0 30px;
    color: #fff;
    width: 375px
}

body#case-study-page-red_bull_records #caseStudyContent .uianimation .linesui {
    margin: 50px 0 300px 30px
}

body#case-study-page-red_bull_records #caseStudyContent .uianimation .linesui .lineui {
    float: left;
    width: 15px;
    height: 16px;
    margin-right: 16px;
    position: relative
}

body#case-study-page-red_bull_records #caseStudyContent .uianimation .linesui .lineui::before {
    content: '';
    display: block;
    background-color: #FFFFFF;
    position: absolute;
    top: 7px;
    right: 0;
    bottom: 7px;
    left: 0
}

body#case-study-page-red_bull_records #caseStudyContent .uianimation .linesui .lineui.color::before {
    background-color: #1F1F1F
}

body#case-study-page-red_bull_records #caseStudyContent .uianimation .linesui .lineui:hover {
    cursor: pointer
}

body#case-study-page-red_bull_records #caseStudyContent .checkout {
    background-color: #000
}

body#case-study-page-red_bull_records #caseStudyContent .checkout img.image {
    width: 519px;
    margin: 150px 0 0 30px
}

body#case-study-page-red_bull_records #caseStudyContent .checkout h2 {
    font-weight: 100;
    font-size: 38px;
    line-height: 60px;
    margin: 322px 0 0 30px;
    letter-spacing: 8px;
    color: #CD003B;
    text-transform: uppercase;
    width: 350px
}

body#case-study-page-red_bull_records #caseStudyContent .checkout a {
    font-weight: 100;
    font-size: 22px;
    line-height: 26px;
    margin: 50px 0 0 30px;
    color: #fff;
    width: 350px;
    display: block
}

body#case-study-page-red_bull_records #caseStudyContent .checkout a svg {
    position: relative;
    top: 3px;
    left: 10px
}

body#case-study-page-red_bull_records #caseStudyContent .checkout a svg polygon.st0 {
    fill: #fff;
    stroke: #fff;
    transition: all .2s ease-in
}

body#case-study-page-red_bull_records #caseStudyContent .checkout a:hover {
    text-decoration: none
}

body#case-study-page-red_bull_records #caseStudyContent .checkout a:hover img {
    margin-left: 30px
}

body#case-study-page-red_bull_records #caseStudyContent .more-case-studies {
    background: white;
    color: #98999d
}

body#case-study-page-red_bull_records #caseStudyContent .more-case-studies strong {
    color: black
}

@media screen and (max-width: 1024px) {
    body#case-study-page-red_bull_records .cs-hero .title-subtitle-stores h1 {
        font-size: 55px !important
    }

    body#case-study-page-red_bull_records #caseStudyContent .not-typical .container {
        padding: 250px 30px
    }

    body#case-study-page-red_bull_records #caseStudyContent .not-typical .container h2 {
        margin: 50px auto 20px auto;
        width: 80%;
        font-size: 34px;
        line-height: 50px
    }

    body#case-study-page-red_bull_records #caseStudyContent .not-typical .container p {
        margin: 0 auto 20px auto;
        width: 80%
    }

    body#case-study-page-red_bull_records #caseStudyContent .uxresearch {
        padding: 150px 15px 350px
    }

    body#case-study-page-red_bull_records #caseStudyContent .uxresearch img.image {
        top: 50px;
        bottom: 0
    }

    body#case-study-page-red_bull_records #caseStudyContent .unconventional .container {
        padding-bottom: 200px
    }

    body#case-study-page-red_bull_records #caseStudyContent .unconventional .container h2 {
        margin: 205px auto 0 auto;
        width: 80%;
        font-size: 20px
    }

    body#case-study-page-red_bull_records #caseStudyContent .unconventional .container p {
        margin: 60px auto 135px auto;
        width: 80%
    }

    body#case-study-page-red_bull_records #caseStudyContent .fifty .container h2 {
        margin: 0 auto;
        width: 80%;
        font-size: 25px
    }

    body#case-study-page-red_bull_records #caseStudyContent .fifty .container p {
        margin: 30px auto 135px auto;
        width: 80%
    }

    body#case-study-page-red_bull_records #caseStudyContent .fifty .container img {
        width: 95%;
        left: 0;
        margin: 0 auto
    }

    body#case-study-page-red_bull_records #caseStudyContent .wireframe .container-fluid h2 {
        margin: 200px auto 0 auto;
        width: 80%;
        font-size: 25px
    }

    body#case-study-page-red_bull_records #caseStudyContent .wireframe .container-fluid p {
        margin: 30px auto 66px auto;
        width: 80%
    }

    body#case-study-page-red_bull_records #caseStudyContent .wireframe .container-fluid img {
        width: 95%;
        left: 0;
        margin: 0 auto
    }

    body#case-study-page-red_bull_records #caseStudyContent .visual-design .text h2 {
        margin: 100px auto 0;
        font-size: 38px;
        letter-spacing: 8px;
        line-height: 50px;
        width: 80%;
        text-align: center
    }

    body#case-study-page-red_bull_records #caseStudyContent .visual-design .text p {
        margin: 30px auto 100px;
        font-size: 18px;
        line-height: 27px;
        width: 80%;
        text-align: center
    }

    body#case-study-page-red_bull_records #caseStudyContent .release {
        padding: 200px 0
    }

    body#case-study-page-red_bull_records #caseStudyContent .release .container img {
        width: 90%;
        margin: 0 auto;
        left: auto
    }

    body#case-study-page-red_bull_records #caseStudyContent .typography img {
        margin: 140px auto 140px auto;
        width: 80%;
        display: block
    }

    body#case-study-page-red_bull_records #caseStudyContent .typography h2 {
        margin: 0 auto 0;
        width: 80%
    }

    body#case-study-page-red_bull_records #caseStudyContent .typography p {
        margin: 50px auto 100px;
        width: 80%
    }

    body#case-study-page-red_bull_records #caseStudyContent .uianimation img.imageui {
        width: 50%;
        margin: 50px 0 0 -24%;
        display: block;
        left: 50%;
        top: 0
    }

    body#case-study-page-red_bull_records #caseStudyContent .uianimation img.imageui.imageui1 {
        top: 0px
    }

    body#case-study-page-red_bull_records #caseStudyContent .uianimation .imagesui {
        height: 800px
    }

    body#case-study-page-red_bull_records #caseStudyContent .uianimation h2 {
        margin: 150px auto 0;
        width: 80%
    }

    body#case-study-page-red_bull_records #caseStudyContent .uianimation p {
        width: 80%;
        margin: 50px auto 0
    }

    body#case-study-page-red_bull_records #caseStudyContent .uianimation .linesui {
        margin: 50px auto 50px auto;
        width: 80%
    }

    body#case-study-page-red_bull_records #caseStudyContent .checkout img.image {
        width: 90%;
        margin: 100px auto 0;
        display: block
    }

    body#case-study-page-red_bull_records #caseStudyContent .checkout h2 {
        margin: 100px auto 0;
        width: 80%;
        font-size: 33px;
        line-height: 52px
    }

    body#case-study-page-red_bull_records #caseStudyContent .checkout a {
        margin: 50px auto 0;
        width: 80%
    }

    body#case-study-page-red_bull_records #caseStudyContent .checkout a img {
        margin-left: 20px;
        -webkit-transition: all 0.2s ease;
        transition: all 0.2s ease
    }
}

@media screen and (max-width: 768px) {
    body#case-study-page-red_bull_records .cs-hero .title-subtitle-stores h1 {
        font-size: 45px !important
    }

    body#case-study-page-red_bull_records #caseStudyContent .about-project tr td:last-child p {
        font-size: 16px !important;
        line-height: 23px !important;
        text-align: center
    }

    body#case-study-page-red_bull_records #caseStudyContent .uxresearch {
        padding: 50px 15px 800px
    }

    body#case-study-page-red_bull_records #caseStudyContent .uxresearch img.image {
        width: 70%;
        top: 500px;
        bottom: 0
    }

    body#case-study-page-red_bull_records #caseStudyContent .uianimation img.imageui {
        width: 70%;
        margin-left: -35%
    }

    body#case-study-page-red_bull_records #caseStudyContent .uianimation img.imageui.imageui2,
    body#case-study-page-red_bull_records #caseStudyContent .uianimation img.imageui.imageui3 {
        top: 50px
    }

    body#case-study-page-red_bull_records #caseStudyContent .uianimation .imagesui {
        height: 700px
    }

    body#case-study-page-red_bull_records #caseStudyContent .unconventional .player-wrapper .player-bg {
        display: none
    }

    body#case-study-page-red_bull_records #caseStudyContent .unconventional .player-wrapper .player-bg.mobile {
        display: block !important
    }

    body#case-study-page-red_bull_records #caseStudyContent .wireframe .container-fluid h2 {
        margin-top: 80px !important
    }
}

@media screen and (max-width: 640px) {
    body#case-study-page-red_bull_records #caseStudyContent .uxresearch {
        padding: 50px 15px 600px
    }

    body#case-study-page-red_bull_records #caseStudyContent .uianimation .imagesui {
        height: 550px
    }
}

ul#items li#case-study-block-tn {
    background: #118bef
}

ul#items li#case-study-block-tn a {
    color: white
}

body#case-study-page-tn {
    color: white;
    background: #118bef
}

body#case-study-page-tn .preloader {
    background: #118bef
}

body#case-study-page-tn .preloader .bar {
    background: white
}

body#case-study-page-tn .preloader .bar:after {
    box-shadow: 0 0 4px white, 0 0 4px white, 0 0 4px white
}

body#case-study-page-tn .cs-head a {
    text-decoration: none;
    color: white
}

body#case-study-page-tn .cs-head .links a.contact {
    border-color: white
}

body#case-study-page-tn .cs-head .links a.contact:hover {
    color: #118bef
}

body#case-study-page-tn .title-subtitle-stores h1 {
    color: white
}

body#case-study-page-tn .title-subtitle-stores h2 {
    color: #8ED1EF
}

body#case-study-page-tn .title-subtitle-stores .stores a {
    text-decoration: none;
    color: white
}

body#case-study-page-tn a.see-more-case-study svg path {
    stroke: #118bef;
    fill: #118bef
}

body#case-study-page-tn .parallax-mirror {
    z-index: 999 !important
}

body#case-study-page-tn #caseStudyContent {
    background: white;
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
    overflow-y: auto
}

body#case-study-page-tn #caseStudyContent .about-project table td:first-child,
body#case-study-page-tn #caseStudyContent .about-project tr td:first-child {
    color: #152737
}

body#case-study-page-tn #caseStudyContent .about-project table td:last-child p,
body#case-study-page-tn #caseStudyContent .about-project tr td:last-child p {
    color: #1a2b44
}

body#case-study-page-tn #caseStudyContent .intro-project {
    background: transparent url(/assets/case-studies/tn/intro-bg-cb401d0adc3920f84317647dba3bb8ff8ae5bf166537561f9fb7fd6d1f792cb1.jpg) no-repeat center center/cover;
    padding-top: 530px;
    padding-bottom: 140px
}

body#case-study-page-tn #caseStudyContent .intro-project>.container {
    max-width: 1280px
}

body#case-study-page-tn #caseStudyContent .intro-project .intro-text {
    max-width: 374px;
    width: 100%
}

body#case-study-page-tn #caseStudyContent .concept {
    background: #262930 url(/assets/case-studies/tn/pattern-bg-7a4a842af780c0a43a8ba6bea35ce59f0034ffec10db1c6e0c630d9c172ea79b.png) repeat center center;
    padding-top: 150px;
    position: relative
}

body#case-study-page-tn #caseStudyContent .concept .fade {
    background: -moz-linear-gradient(top, #262930 0%, rgba(38, 41, 48, 0) 100%);
    background: -webkit-linear-gradient(top, #262930 0%, rgba(38, 41, 48, 0) 100%);
    background: linear-gradient(to bottom, #262930 0%, rgba(38, 41, 48, 0) 100%);
    width: 100%;
    height: 30%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    z-index: 1
}

body#case-study-page-tn #caseStudyContent .concept .bottom {
    width: 100%;
    height: 720px;
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    background: transparent;
    z-index: 1;
    overflow: hidden
}

body#case-study-page-tn #caseStudyContent .concept .bottom svg {
    position: relative;
    top: 4px;
    min-width: 1470px
}

body#case-study-page-tn #caseStudyContent .concept>.container {
    max-width: 1280px
}

body#case-study-page-tn #caseStudyContent .concept h2 {
    margin: 0 0 15px;
    opacity: 0.4;
    font-weight: 400;
    font-size: 18px;
    color: #CACDD5;
    letter-spacing: 4px;
    text-transform: uppercase;
    position: relative;
    z-index: 2
}

body#case-study-page-tn #caseStudyContent .concept h1 {
    margin: 0 0 20px;
    font-weight: 300;
    font-size: 52px;
    color: white;
    position: relative;
    z-index: 2
}

body#case-study-page-tn #caseStudyContent .concept p {
    opacity: 0.4;
    font-weight: 400;
    font-size: 18px;
    color: #CACDD5;
    line-height: 1.6;
    margin: 0;
    max-width: 396px;
    position: relative;
    z-index: 2
}

body#case-study-page-tn #caseStudyContent .concept .compo {
    float: right;
    margin-top: -125px;
    margin-bottom: 350px;
    position: relative;
    z-index: 2
}

body#case-study-page-tn #caseStudyContent .branding {
    position: relative;
    z-index: 3
}

body#case-study-page-tn #caseStudyContent .branding>.container {
    max-width: 1280px;
    margin-top: -280px
}

body#case-study-page-tn #caseStudyContent .branding .color-wheel {
    max-width: 100%
}

body#case-study-page-tn #caseStudyContent .branding .typography h2 {
    opacity: 0.5;
    font-weight: 400;
    font-size: 18px;
    color: #333742;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin: 120px 0 20px
}

body#case-study-page-tn #caseStudyContent .branding .typography .typography-example {
    max-width: 352px;
    width: 100%
}

body#case-study-page-tn #caseStudyContent .iconography {
    position: relative;
    padding-bottom: 550px
}

body#case-study-page-tn #caseStudyContent .iconography>.container {
    max-width: 1280px
}

body#case-study-page-tn #caseStudyContent .iconography h2 {
    opacity: 0.5;
    font-weight: 400;
    font-size: 18px;
    color: #333742;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin: 180px 0 70px
}

body#case-study-page-tn #caseStudyContent .iconography .icon-set {
    position: relative;
    z-index: 2
}

body#case-study-page-tn #caseStudyContent .iconography .icon-set .icon-set-image {
    max-width: 422px;
    width: 100%
}

body#case-study-page-tn #caseStudyContent .iconography .icon-big {
    position: relative;
    z-index: 2
}

body#case-study-page-tn #caseStudyContent .iconography .icon-big .icon-big-image {
    max-width: 338px;
    width: 100%;
    background: white;
    border-radius: 50%
}

body#case-study-page-tn #caseStudyContent .iconography .icon-big .icon-big-wrapper {
    margin-top: 130px;
    position: relative;
    display: inline-block;
    box-shadow: inset 0 0 0 1px white;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 50%
}

body#case-study-page-tn #caseStudyContent .iconography .icon-big .icons-animation {
    position: absolute;
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    max-width: 100%;
    border-radius: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0)
}

body#case-study-page-tn #caseStudyContent .iconography .bottom {
    width: 100%;
    height: 720px;
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    background: transparent;
    z-index: 1;
    overflow: hidden;
    transition: all .3s ease
}

body#case-study-page-tn #caseStudyContent .iconography .bottom svg {
    position: relative;
    top: 4px;
    min-width: 1470px
}

body#case-study-page-tn #caseStudyContent .iconography .bottom svg polyline {
    transition: all .3s ease
}

body#case-study-page-tn #caseStudyContent .videograph {
    background: #118bef;
    transition: all .3s ease
}

body#case-study-page-tn #caseStudyContent .videograph>.container {
    max-width: 1280px
}

body#case-study-page-tn #caseStudyContent .videograph .slider {
    text-align: center;
    margin-top: -280px;
    margin-bottom: 75px
}

body#case-study-page-tn #caseStudyContent .videograph .slider .slider-images {
    position: relative;
    z-index: 3;
    display: inline-block;
    margin-bottom: 60px
}

body#case-study-page-tn #caseStudyContent .videograph .slider .slider-images .placer,
body#case-study-page-tn #caseStudyContent .videograph .slider .slider-images .slide {
    max-width: 100%
}

body#case-study-page-tn #caseStudyContent .videograph .slider .slider-images .slide {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
    transition: all .3s ease
}

body#case-study-page-tn #caseStudyContent .videograph .slider .slider-images .slide.active {
    opacity: 1;
    transition-delay: .3s;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

body#case-study-page-tn #caseStudyContent .videograph .slider .slider-text {
    text-align: center
}

body#case-study-page-tn #caseStudyContent .videograph .slider .slider-text .slide {
    display: none
}

body#case-study-page-tn #caseStudyContent .videograph .slider .slider-text .slide.active {
    display: block
}

body#case-study-page-tn #caseStudyContent .videograph .slider .slider-text h2 {
    font-weight: 300;
    font-size: 52px;
    color: white;
    margin: 10px 0 20px
}

body#case-study-page-tn #caseStudyContent .videograph .slider .slider-text p {
    font-weight: 400;
    font-size: 18px;
    color: white;
    line-height: 1.6;
    margin: 0 auto 30px;
    max-width: 600px
}

body#case-study-page-tn #caseStudyContent .videograph .slider .slider-bullets button {
    height: 16px;
    width: 16px;
    position: relative;
    cursor: pointer;
    border: 0;
    border-radius: 0;
    outline: 0;
    padding: 0;
    margin: 0 7px;
    background: transparent
}

body#case-study-page-tn #caseStudyContent .videograph .slider .slider-bullets button::after {
    content: '';
    display: block;
    height: 2px;
    width: 100%;
    margin-top: 2px;
    background: white;
    opacity: .3;
    transition: all .3s ease
}

body#case-study-page-tn #caseStudyContent .videograph .slider .slider-bullets button.active::after {
    opacity: 1
}

body#case-study-page-tn #caseStudyContent .videograph .colors-animation {
    height: 30px;
    width: 100%;
    position: relative
}

body#case-study-page-tn #caseStudyContent .videograph .colors-animation>div {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    transition: all .7s ease
}

body#case-study-page-tn #caseStudyContent .videograph .colors-animation.animated .yellow {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

body#case-study-page-tn #caseStudyContent .videograph .colors-animation.animated .dark-yellow {
    -webkit-transform: translate3d(-14.2857142857%, 0, 0);
    transform: translate3d(-14.2857142857%, 0, 0)
}

body#case-study-page-tn #caseStudyContent .videograph .colors-animation.animated .red {
    -webkit-transform: translate3d(-28.5714285714%, 0, 0);
    transform: translate3d(-28.5714285714%, 0, 0)
}

body#case-study-page-tn #caseStudyContent .videograph .colors-animation.animated .dark-red {
    -webkit-transform: translate3d(-42.8571428571%, 0, 0);
    transform: translate3d(-42.8571428571%, 0, 0)
}

body#case-study-page-tn #caseStudyContent .videograph .colors-animation.animated .blue {
    -webkit-transform: translate3d(-57.1428571428%, 0, 0);
    transform: translate3d(-57.1428571428%, 0, 0)
}

body#case-study-page-tn #caseStudyContent .videograph .colors-animation.animated .dark-blue {
    -webkit-transform: translate3d(-71.4285714285%, 0, 0);
    transform: translate3d(-71.4285714285%, 0, 0)
}

body#case-study-page-tn #caseStudyContent .videograph .colors-animation.animated .black {
    -webkit-transform: translate3d(-85.7142857142%, 0, 0);
    transform: translate3d(-85.7142857142%, 0, 0)
}

body#case-study-page-tn #caseStudyContent .videograph .colors-animation .yellow {
    background: #FFF033;
    transition-delay: 0s !important
}

body#case-study-page-tn #caseStudyContent .videograph .colors-animation .dark-yellow {
    background: #F7CF11;
    transition-delay: .3s !important
}

body#case-study-page-tn #caseStudyContent .videograph .colors-animation .red {
    background: #FF244A;
    transition-delay: .6s !important
}

body#case-study-page-tn #caseStudyContent .videograph .colors-animation .dark-red {
    background: #D71A3A;
    transition-delay: 1s !important
}

body#case-study-page-tn #caseStudyContent .videograph .colors-animation .blue {
    background: #118bef;
    transition-delay: 1.5s !important
}

body#case-study-page-tn #caseStudyContent .videograph .colors-animation .dark-blue {
    background: #0679EC;
    transition-delay: 1.8s !important
}

body#case-study-page-tn #caseStudyContent .videograph .colors-animation .black {
    background: #262930;
    transition-delay: 2s !important
}

body#case-study-page-tn #caseStudyContent .weather {
    padding-top: 130px;
    background: #262930
}

body#case-study-page-tn #caseStudyContent .weather>.container {
    max-width: 1280px
}

body#case-study-page-tn #caseStudyContent .weather .weather-text {
    text-align: center
}

body#case-study-page-tn #caseStudyContent .weather .weather-text h1 {
    font-weight: 300;
    font-size: 52px;
    color: white;
    margin: 0 0 30px
}

body#case-study-page-tn #caseStudyContent .weather .weather-text p {
    opacity: 0.4;
    font-weight: 400;
    font-size: 18px;
    color: white;
    line-height: 1.6;
    max-width: 660px;
    margin: 0 auto
}

body#case-study-page-tn #caseStudyContent .weather .badges {
    height: 1028px;
    background: transparent url(/assets/case-studies/tn/badges-1b07075d4d1cc00fdda91fb7469e0f2208f71d7e87e9d5649f09768362405847.png) no-repeat center center/auto 100%;
    margin-bottom: 150px
}

body#case-study-page-tn #caseStudyContent .weather .gradient .left {
    width: 15%;
    height: 10px;
    float: left;
    background: #EC7B20
}

body#case-study-page-tn #caseStudyContent .weather .gradient .right {
    width: 15%;
    height: 10px;
    float: left;
    background: #1160E4
}

body#case-study-page-tn #caseStudyContent .weather .gradient .middle {
    float: left;
    width: 70%;
    height: 10px;
    background: -moz-linear-gradient(90deg, #ec7b20 0%, #bc2755 30%, #4a33e3 65%, #1161e4 100%);
    background: -webkit-linear-gradient(90deg, #ec7b20 0%, #bc2755 30%, #4a33e3 65%, #1161e4 100%);
    background: linear-gradient(90deg, #ec7b20 0%, #bc2755 30%, #4a33e3 65%, #1161e4 100%)
}

body#case-study-page-tn #caseStudyContent .weather .gradient .lines {
    max-width: 1280px;
    margin: 0 auto;
    position: relative
}

body#case-study-page-tn #caseStudyContent .weather .gradient .lines .long {
    height: 46px;
    width: 1px;
    background: rgba(255, 255, 255, 0.15);
    position: absolute;
    top: -46px;
    right: auto;
    bottom: auto
}

body#case-study-page-tn #caseStudyContent .weather .gradient .lines .long:nth-child(1) {
    left: 0
}

body#case-study-page-tn #caseStudyContent .weather .gradient .lines .long:nth-child(2) {
    left: 33.333%
}

body#case-study-page-tn #caseStudyContent .weather .gradient .lines .long:nth-child(3) {
    left: 66.666%
}

body#case-study-page-tn #caseStudyContent .weather .gradient .lines .long:nth-child(4) {
    left: 100%
}

body#case-study-page-tn #caseStudyContent .weather .gradient .lines .long::after {
    content: attr(data-tooltip);
    position: absolute;
    top: -40px;
    right: auto;
    bottom: auto;
    left: 0;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    font-weight: 400;
    font-size: 16px;
    text-transform: uppercase;
    color: white;
    opacity: .3;
    letter-spacing: 3.5px
}

body#case-study-page-tn #caseStudyContent .weather .gradient .lines-short {
    max-width: 1280px;
    margin: 0 auto;
    position: relative
}

body#case-study-page-tn #caseStudyContent .weather .gradient .lines-short .short {
    position: absolute;
    top: -20px;
    right: auto;
    bottom: auto;
    height: 20px;
    width: 1px;
    background: rgba(255, 255, 255, 0.15)
}

body#case-study-page-tn #caseStudyContent .weather .gradient .lines-short .short:nth-child(1) {
    left: 8.333%
}

body#case-study-page-tn #caseStudyContent .weather .gradient .lines-short .short:nth-child(2) {
    left: 16.666%
}

body#case-study-page-tn #caseStudyContent .weather .gradient .lines-short .short:nth-child(3) {
    left: 25%
}

body#case-study-page-tn #caseStudyContent .weather .gradient .lines-short .short:nth-child(4) {
    left: 41.666%
}

body#case-study-page-tn #caseStudyContent .weather .gradient .lines-short .short:nth-child(5) {
    left: 50%
}

body#case-study-page-tn #caseStudyContent .weather .gradient .lines-short .short:nth-child(6) {
    left: 58.333%
}

body#case-study-page-tn #caseStudyContent .weather .gradient .lines-short .short:nth-child(7) {
    left: 75%
}

body#case-study-page-tn #caseStudyContent .weather .gradient .lines-short .short:nth-child(8) {
    left: 83.333%
}

body#case-study-page-tn #caseStudyContent .weather .gradient .lines-short .short:nth-child(9) {
    left: 91.666%
}

body#case-study-page-tn #caseStudyContent .onscreen-art {
    padding-top: 170px;
    padding-bottom: 200px;
    background: #000 url(/assets/case-studies/tn/onscreen-art-bg-659aea1c8252672f71cb96119edd44dee2f3b5da9182321ba427c2b0d6a198d8.jpg) no-repeat center center/cover;
    text-align: center
}

body#case-study-page-tn #caseStudyContent .onscreen-art h2 {
    opacity: 0.5;
    font-weight: 400;
    font-size: 18px;
    text-transform: uppercase;
    color: white;
    letter-spacing: 4px;
    margin: 0 0 20px
}

body#case-study-page-tn #caseStudyContent .onscreen-art h1 {
    font-weight: 400;
    font-size: 52px;
    color: white;
    margin: 0 0 25px
}

body#case-study-page-tn #caseStudyContent .onscreen-art p {
    font-weight: 400;
    font-size: 18px;
    color: #CACDD5;
    line-height: 1.6;
    margin: 0 auto 100px;
    max-width: 640px
}

body#case-study-page-tn #caseStudyContent .onscreen-art .onscreen-slider .slide {
    max-width: 1040px;
    width: 100%;
    display: block;
    cursor: pointer;
    border-radius: 2px;
    transition: all .5s ease
}

body#case-study-page-tn #caseStudyContent .onscreen-art .onscreen-slider .slick-slide {
    margin: 0 35px;
    background: black;
    border-radius: 2px;
    box-shadow: 0 15px 60px rgba(0, 0, 0, 0.25)
}

body#case-study-page-tn #caseStudyContent .onscreen-art .onscreen-slider .slick-slide .slide {
    opacity: .35
}

body#case-study-page-tn #caseStudyContent .onscreen-art .onscreen-slider .slick-slide.slick-center .slide {
    opacity: 1
}

body#case-study-page-tn #caseStudyContent .outro-image {
    width: 100%;
    height: 350px;
    height: 75vh;
    background: #000 url(/assets/case-studies/tn/outro-36df0b8c6a7451b3e867d16da566e54fe61cdb2c7f912cafc11951f7377f5c40.jpg) no-repeat center center/cover;
    background-attachment: fixed
}

body#case-study-page-tn .more-case-studies {
    background: white;
    color: #bfc0c2
}

body#case-study-page-tn .more-case-studies strong {
    color: #252525
}

@media screen and (min-width: 1441px) {
    body#case-study-page-tn #caseStudyContent .concept .bottom {
        height: 50vw !important;
        box-shadow: inset 0 -10px 0 white
    }

    body#case-study-page-tn #caseStudyContent .iconography .bottom {
        height: 50vw !important;
        box-shadow: inset 0 -10px 0 currentColor
    }
}

@media screen and (max-width: 1140px) {
    body#case-study-page-tn #caseStudyContent .intro-project {
        padding-top: 350px;
        padding-bottom: 80px
    }

    body#case-study-page-tn #caseStudyContent .concept .compo {
        max-width: 100%
    }
}

@media screen and (max-width: 1024px) {
    body#case-study-page-tn #caseStudyContent .concept .compo {
        margin-top: 50px
    }

    body#case-study-page-tn #caseStudyContent .onscreen-art .onscreen-slider .slick-slide .slide {
        width: 100%
    }
}

@media screen and (max-width: 900px) {
    body#case-study-page-tn #caseStudyContent .intro-project {
        padding-top: 250px;
        padding-bottom: 80px
    }

    body#case-study-page-tn #caseStudyContent .iconography,
    body#case-study-page-tn #caseStudyContent .typography,
    body#case-study-page-tn #caseStudyContent .color-palette {
        text-align: center
    }
}

@media screen and (max-width: 768px) {
    body#case-study-page-tn #caseStudyContent .about-project tr td:last-child p {
        font-size: 16px !important;
        line-height: 23px !important;
        text-align: center
    }
}

@media screen and (max-width: 480px) {
    body#case-study-page-tn #caseStudyContent .intro-project {
        padding-top: 80px;
        padding-bottom: 30px
    }
}

#case-study-block-wellbin {
    background: #2B4955
}

#case-study-block-wellbin a {
    color: white
}

body#case-study-page-wellbin {
    color: white;
    background: #2B4955
}

body#case-study-page-wellbin .preloader {
    background: #2B4955
}

body#case-study-page-wellbin .preloader .bar {
    background: white
}

body#case-study-page-wellbin .preloader .bar:after {
    box-shadow: 0 0 4px white, 0 0 4px white, 0 0 4px white
}

body#case-study-page-wellbin #page {
    -webkit-transform: none !important;
    transform: none !important
}

body#case-study-page-wellbin .cs-head a {
    text-decoration: none;
    color: white
}

body#case-study-page-wellbin .cs-head .links a.contact {
    border-color: white
}

body#case-study-page-wellbin .cs-head .links a.contact:hover {
    color: black
}

body#case-study-page-wellbin .title-subtitle-stores h1 {
    color: white
}

body#case-study-page-wellbin .title-subtitle-stores h2 {
    color: rgba(255, 255, 255, 0.5)
}

body#case-study-page-wellbin .title-subtitle-stores .stores a {
    text-decoration: none;
    color: white
}

body#case-study-page-wellbin a.see-more-case-study svg path {
    stroke: #000;
    fill: #000
}

body#case-study-page-wellbin #caseStudyContent {
    background: white;
    padding-left: 0;
    padding-right: 0
}

body#case-study-page-wellbin #caseStudyContent .about-project a {
    color: #E35534;
    text-decoration: none
}

body#case-study-page-wellbin #caseStudyContent .about-project a:hover {
    text-decoration: none
}

body#case-study-page-wellbin #caseStudyContent .about-project table td:first-child,
body#case-study-page-wellbin #caseStudyContent .about-project tr td:first-child {
    color: #152737
}

body#case-study-page-wellbin #caseStudyContent .about-project table td:last-child p,
body#case-study-page-wellbin #caseStudyContent .about-project tr td:last-child p {
    color: #1a2b44
}

body#case-study-page-wellbin #caseStudyContent .intro-project {
    position: relative;
    z-index: 3;
    background-color: #23BDC7;
    height: 800px;
    padding-top: 390px;
    padding-bottom: 0
}

body#case-study-page-wellbin #caseStudyContent .intro-project>.container {
    max-width: 1280px;
    margin-top: -280px
}

body#case-study-page-wellbin #caseStudyContent .intro-project .cama {
    position: absolute;
    max-width: 100%;
    width: 455px;
    height: 358px;
    top: 220px;
    left: 25px
}

body#case-study-page-wellbin #caseStudyContent .intro-project .globos {
    position: absolute;
    max-width: 100%;
    width: 222px;
    height: 295px;
    top: 0;
    left: 200px
}

body#case-study-page-wellbin #caseStudyContent .intro-project .cama-m {
    display: none
}

body#case-study-page-wellbin #caseStudyContent .intro-project .logo {
    width: 567px;
    height: auto;
    margin-top: 0;
    margin-left: -30px
}

body#case-study-page-wellbin #caseStudyContent .intro-project .logo2 {
    width: 567px;
    height: auto;
    margin-top: 0;
    margin-left: -30px;
    display: none;
    position: absolute;
    left: 15px
}

body#case-study-page-wellbin #caseStudyContent .intro-project .logom {
    display: none
}

body#case-study-page-wellbin #caseStudyContent .plan {
    position: relative;
    z-index: 3;
    background-color: #E6634F
}

body#case-study-page-wellbin #caseStudyContent .plan h3 {
    margin: 120px auto 90px auto;
    width: 100%;
    text-align: center;
    font-size: 52px;
    line-height: 62px;
    font-weight: 100
}

body#case-study-page-wellbin #caseStudyContent .plan .circle {
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.1);
    margin: 0 auto
}

body#case-study-page-wellbin #caseStudyContent .plan .circle .brainstorming-img {
    margin: 44px 0 0 47px
}

body#case-study-page-wellbin #caseStudyContent .plan .circle .script-img {
    margin: 56px 0 0 57px
}

body#case-study-page-wellbin #caseStudyContent .plan .circle .moodboard-img {
    margin: 56px 0 0 54px
}

body#case-study-page-wellbin #caseStudyContent .plan .circle .storyboard-img {
    margin: 54px 0 0 49px
}

body#case-study-page-wellbin #caseStudyContent .plan .circle .voiceover-img {
    margin: 58px 0 0 58px
}

body#case-study-page-wellbin #caseStudyContent .plan .circle .illustration-img {
    margin: 49px 0 0 63px
}

body#case-study-page-wellbin #caseStudyContent .plan .circle .animation-img {
    margin: 65px 0 0 42px
}

body#case-study-page-wellbin #caseStudyContent .plan .circle .recording-img {
    margin: 47px 0 0 59px
}

body#case-study-page-wellbin #caseStudyContent .plan p {
    margin: 30px auto 50px auto;
    width: 100%;
    text-align: center;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 4px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5)
}

body#case-study-page-wellbin #caseStudyContent .plan .end {
    margin-bottom: 50px
}

body#case-study-page-wellbin #caseStudyContent .illustration {
    position: relative;
    z-index: 3;
    background-color: #404040
}

body#case-study-page-wellbin #caseStudyContent .illustration img {
    margin: auto;
    display: block
}

body#case-study-page-wellbin #caseStudyContent .illustration h3 {
    margin: 150px auto 0 auto;
    width: 100%;
    text-align: center;
    font-size: 52px;
    line-height: 62px;
    font-weight: 100
}

body#case-study-page-wellbin #caseStudyContent .illustration p {
    margin: 20px auto 50px auto;
    width: 60%;
    text-align: center;
    font-size: 18px;
    line-height: 27px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.4)
}

body#case-study-page-wellbin #caseStudyContent .illustration h4 {
    margin: 20px auto 120px auto;
    width: 100%;
    text-align: center;
    font-size: 18px;
    line-height: 22px;
    font-weight: 100;
    letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.5)
}

body#case-study-page-wellbin #caseStudyContent .illustration .timeline img {
    width: 1040px;
    height: 302px
}

body#case-study-page-wellbin #caseStudyContent .illustration .dots {
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 56px 0 36px 0
}

body#case-study-page-wellbin #caseStudyContent .illustration .dots img {
    width: 960px;
    height: 10px;
    margin: -3px auto 0
}

body#case-study-page-wellbin #caseStudyContent .illustration .coche {
    height: 290px;
    margin-bottom: 100px
}

body#case-study-page-wellbin #caseStudyContent .illustration .coche img {
    width: 400px;
    height: 228px
}

body#case-study-page-wellbin #caseStudyContent .illustration .coche p {
    bottom: 0;
    position: absolute;
    margin: 0 auto;
    width: 100%;
    letter-spacing: 4px
}

body#case-study-page-wellbin #caseStudyContent .illustration .hospital {
    height: 290px;
    margin-bottom: 100px
}

body#case-study-page-wellbin #caseStudyContent .illustration .hospital img {
    width: 399px;
    height: 177px
}

body#case-study-page-wellbin #caseStudyContent .illustration .hospital p {
    bottom: 0;
    position: absolute;
    margin: 0 auto;
    width: 100%;
    letter-spacing: 4px
}

body#case-study-page-wellbin #caseStudyContent .illustration .hospital2 {
    height: 335px;
    margin-bottom: 100px
}

body#case-study-page-wellbin #caseStudyContent .illustration .hospital2 img {
    width: 392px;
    height: 273px
}

body#case-study-page-wellbin #caseStudyContent .illustration .hospital2 p {
    bottom: 0;
    position: absolute;
    margin: 0 auto;
    width: 100%;
    letter-spacing: 4px
}

body#case-study-page-wellbin #caseStudyContent .illustration .hospital3 {
    height: 335px;
    margin-bottom: 100px
}

body#case-study-page-wellbin #caseStudyContent .illustration .hospital3 img {
    width: 445px;
    height: 251px
}

body#case-study-page-wellbin #caseStudyContent .illustration .hospital3 p {
    bottom: 0;
    position: absolute;
    margin: 0 auto;
    width: 100%;
    letter-spacing: 4px
}

body#case-study-page-wellbin #caseStudyContent .illustration .palm {
    height: 410px;
    margin-bottom: 100px
}

body#case-study-page-wellbin #caseStudyContent .illustration .palm img {
    width: 391px;
    height: 348px
}

body#case-study-page-wellbin #caseStudyContent .illustration .palm p {
    bottom: 0;
    position: absolute;
    margin: 0 auto;
    width: 100%;
    letter-spacing: 4px
}

body#case-study-page-wellbin #caseStudyContent .illustration .machine {
    height: 410px;
    margin-bottom: 100px
}

body#case-study-page-wellbin #caseStudyContent .illustration .machine img {
    width: 391px;
    height: 256px
}

body#case-study-page-wellbin #caseStudyContent .illustration .machine p {
    bottom: 0;
    position: absolute;
    margin: 0 auto;
    width: 100%;
    letter-spacing: 4px
}

body#case-study-page-wellbin #caseStudyContent .illustration .futbol {
    padding: 0;
    position: relative;
    display: block
}

body#case-study-page-wellbin #caseStudyContent .illustration .futbol img {
    width: 1440px;
    height: 482px
}

body#case-study-page-wellbin #caseStudyContent .illustration .futbol img.anim {
    position: absolute;
    width: 380px;
    height: auto;
    top: 38px;
    left: 36%
}

body#case-study-page-wellbin #caseStudyContent .illustration .futbol-m {
    display: none
}

body#case-study-page-wellbin #caseStudyContent .script {
    position: relative;
    z-index: 3;
    background: #E6FEFE url(/assets/case-studies/wellbin/fondo-8a22be534119389ce18310aeaf874b7168bfad2c9a8d9ba526dec52d8b391a34.png) no-repeat center 710px;
    background-size: contain
}

body#case-study-page-wellbin #caseStudyContent .script img {
    margin: auto;
    display: block
}

body#case-study-page-wellbin #caseStudyContent .script h3 {
    margin: 150px auto 0 auto;
    width: 100%;
    text-align: center;
    font-size: 52px;
    line-height: 62px;
    font-weight: 100;
    color: #000000
}

body#case-study-page-wellbin #caseStudyContent .script p {
    margin: 20px auto 110px auto;
    width: 60%;
    text-align: center;
    font-size: 18px;
    line-height: 27px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.4)
}

body#case-study-page-wellbin #caseStudyContent .script .banderin img {
    width: 1234px;
    height: 170px
}

body#case-study-page-wellbin #caseStudyContent .script .script1 img,
body#case-study-page-wellbin #caseStudyContent .script .script2 img {
    width: 340px;
    height: 227px
}

body#case-study-page-wellbin #caseStudyContent .script .script3 img {
    width: 341px;
    height: 227px
}

body#case-study-page-wellbin #caseStudyContent .script .pibe {
    padding: 0;
    margin: 200px 0 450px 0;
    display: block
}

body#case-study-page-wellbin #caseStudyContent .script .pibe img {
    position: absolute;
    left: 45%;
    width: 285px;
    height: auto;
    margin: 0
}

body#case-study-page-wellbin #caseStudyContent .script img.moscas {
    position: absolute;
    left: 0;
    width: 556px;
    height: 321px;
    margin: 0;
    top: 1080px
}

body#case-study-page-wellbin #caseStudyContent .script .pibe-m {
    display: none
}

body#case-study-page-wellbin #caseStudyContent .approach {
    position: relative;
    z-index: 3;
    background-color: #0E2932
}

body#case-study-page-wellbin #caseStudyContent .approach h3 {
    margin: 150px auto 0 auto;
    width: 100%;
    text-align: center;
    font-size: 52px;
    line-height: 62px;
    font-weight: 100
}

body#case-study-page-wellbin #caseStudyContent .approach p {
    margin: 20px auto 150px auto;
    width: 60%;
    text-align: center;
    font-size: 18px;
    line-height: 27px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.4)
}

body#case-study-page-wellbin #caseStudyContent .approach .stagewrap {
    position: relative;
    height: 1192px
}

body#case-study-page-wellbin #caseStudyContent .approach .stagewrap .stage {
    position: absolute
}

body#case-study-page-wellbin #caseStudyContent .approach .stagewrap .stage.bg {
    top: 0px;
    left: 83px
}

body#case-study-page-wellbin #caseStudyContent .approach .stagewrap .stage.bg img {
    width: 1091px;
    height: 1150px
}

body#case-study-page-wellbin #caseStudyContent .approach .stagewrap .stage.piso {
    top: 600px;
    left: -50px
}

body#case-study-page-wellbin #caseStudyContent .approach .stagewrap .stage.piso img {
    width: 1245px;
    height: 515px
}

body#case-study-page-wellbin #caseStudyContent .approach .stagewrap .stage.env {
    top: 246px;
    left: 171px;
    transition: all .7s ease-in
}

body#case-study-page-wellbin #caseStudyContent .approach .stagewrap .stage.env.final_position {
    top: 286px;
    left: 60px
}

body#case-study-page-wellbin #caseStudyContent .approach .stagewrap .stage.env img {
    width: 998px;
    height: 736px
}

body#case-study-page-wellbin #caseStudyContent .approach .stagewrap .stage.camera {
    top: 975px;
    left: 150px
}

body#case-study-page-wellbin #caseStudyContent .approach .stagewrap .stage.camera img {
    width: 230px;
    height: 202px
}

body#case-study-page-wellbin #caseStudyContent .approach .stagewrap .stage.ninos {
    top: 473px;
    left: 329px;
    transition: all .5s ease-in
}

body#case-study-page-wellbin #caseStudyContent .approach .stagewrap .stage.ninos.final_position {
    top: 690px;
    left: 30px
}

body#case-study-page-wellbin #caseStudyContent .approach .stagewrap .stage.ninos img {
    width: 856px;
    height: 441px
}

body#case-study-page-wellbin #caseStudyContent .approach .stagewrap .stage.elements {
    top: 578px;
    left: 274px;
    transition: all .6s ease-in
}

body#case-study-page-wellbin #caseStudyContent .approach .stagewrap .stage.elements.final_position {
    top: 724px;
    left: 5px
}

body#case-study-page-wellbin #caseStudyContent .approach .stagewrap .stage.elements img {
    width: 726px;
    height: 235px
}

body#case-study-page-wellbin #caseStudyContent .approach .stagewrap-mobile {
    display: none
}

body#case-study-page-wellbin #caseStudyContent .approach .camilla {
    display: block
}

body#case-study-page-wellbin #caseStudyContent .approach .camilla img {
    width: 804px;
    height: 372px;
    display: block;
    margin: 450px auto 0
}

body#case-study-page-wellbin #caseStudyContent .approach .camilla .llanto {
    position: absolute;
    width: 288px;
    height: 466px;
    left: 50%;
    margin-left: -144px;
    top: -287px
}

body#case-study-page-wellbin #caseStudyContent .approach .camilla-mobile {
    display: none
}

body#case-study-page-wellbin #caseStudyContent .video {
    position: relative;
    z-index: 3;
    background: #23BDC7 url(/assets/case-studies/wellbin/video-bkg-7572d3de13060b242b201b1779e5cf3c3f16dbf529ea2f93a35ce0f4ce086a16.png) no-repeat center 244px;
    background-size: contain
}

body#case-study-page-wellbin #caseStudyContent .video .logo {
    margin: 150px auto 0 auto;
    width: 100%;
    text-align: center
}

body#case-study-page-wellbin #caseStudyContent .video .logo img {
    width: 350px;
    margin: 0 auto
}

body#case-study-page-wellbin #caseStudyContent .video h3 {
    margin: 40px auto 0 auto;
    width: 100%;
    text-align: center;
    font-size: 18px;
    line-height: 22px;
    font-weight: 100;
    letter-spacing: 4px
}

body#case-study-page-wellbin #caseStudyContent .video .video-vimeo {
    margin: 40px auto 170px auto;
    width: 953px;
    height: 536px;
    text-align: center;
    box-shadow: rgba(43, 73, 85, 0.2) 30px 30px 0 0
}

body#case-study-page-wellbin #caseStudyContent .video .video-vimeo iframe {
    border: 0;
    border: none
}

body#case-study-page-wellbin #caseStudyContent .more-case-studies {
    background: white;
    color: #98999d
}

body#case-study-page-wellbin #caseStudyContent .more-case-studies strong {
    color: black
}

@media screen and (max-width: 992px) {
    body#case-study-page-wellbin .cs-hero .title-subtitle-stores h1 {
        font-size: 55px !important
    }

    body#case-study-page-wellbin #caseStudyContent .about-project table td:last-child p,
    body#case-study-page-wellbin #caseStudyContent .about-project tr td:last-child p {
        color: #1a2b44;
        width: 80%;
        margin: 0 auto;
        float: none
    }

    body#case-study-page-wellbin #caseStudyContent .intro-project {
        height: auto
    }

    body#case-study-page-wellbin #caseStudyContent .intro-project .cama {
        display: none
    }

    body#case-study-page-wellbin #caseStudyContent .intro-project .globos {
        display: none
    }

    body#case-study-page-wellbin #caseStudyContent .intro-project .cama-m {
        display: block;
        position: relative;
        margin: auto;
        width: 65%
    }

    body#case-study-page-wellbin #caseStudyContent .intro-project .logo,
    body#case-study-page-wellbin #caseStudyContent .intro-project .logo2 {
        display: none
    }

    body#case-study-page-wellbin #caseStudyContent .intro-project .logom {
        margin: 100px auto;
        display: block;
        width: 80%
    }

    body#case-study-page-wellbin #caseStudyContent .illustration .timeline img {
        width: 75%;
        height: auto
    }

    body#case-study-page-wellbin #caseStudyContent .illustration .dots {
        width: 100%;
        height: 1px;
        background-color: rgba(255, 255, 255, 0.2);
        margin: 56px 0 36px 0
    }

    body#case-study-page-wellbin #caseStudyContent .illustration .dots img {
        width: 75%;
        height: auto
    }

    body#case-study-page-wellbin #caseStudyContent .illustration .futbol {
        display: none
    }

    body#case-study-page-wellbin #caseStudyContent .illustration .futbol img {
        width: 100%;
        height: auto
    }

    body#case-study-page-wellbin #caseStudyContent .illustration .futbol-m {
        display: block
    }

    body#case-study-page-wellbin #caseStudyContent .illustration .futbol-m img {
        width: 100%;
        height: auto
    }

    body#case-study-page-wellbin #caseStudyContent .script .banderin img {
        width: 100%;
        height: auto
    }

    body#case-study-page-wellbin #caseStudyContent .script .script1,
    body#case-study-page-wellbin #caseStudyContent .script .script2 {
        margin-bottom: 50px
    }

    body#case-study-page-wellbin #caseStudyContent .script .script1 img,
    body#case-study-page-wellbin #caseStudyContent .script .script2 img {
        width: 340px;
        height: 227px
    }

    body#case-study-page-wellbin #caseStudyContent .script .script3 img {
        width: 341px;
        height: 227px
    }

    body#case-study-page-wellbin #caseStudyContent .script .pibe {
        display: none
    }

    body#case-study-page-wellbin #caseStudyContent .script img.moscas {
        display: none
    }

    body#case-study-page-wellbin #caseStudyContent .script .pibe-m {
        display: block;
        margin: 100px auto;
        padding: 0 30px 0 0
    }

    body#case-study-page-wellbin #caseStudyContent .script .pibe-m img {
        width: 100%;
        height: auto
    }

    body#case-study-page-wellbin #caseStudyContent .approach .stagewrap {
        display: none
    }

    body#case-study-page-wellbin #caseStudyContent .approach .stagewrap-mobile {
        display: block
    }

    body#case-study-page-wellbin #caseStudyContent .approach .stagewrap-mobile img {
        width: 640px;
        height: auto;
        display: block;
        margin: 0 auto
    }

    body#case-study-page-wellbin #caseStudyContent .approach .camilla {
        display: none
    }

    body#case-study-page-wellbin #caseStudyContent .approach .camilla-mobile {
        display: block
    }

    body#case-study-page-wellbin #caseStudyContent .approach .camilla-mobile img {
        width: 80%;
        height: auto;
        display: block;
        margin: 100px auto 0
    }

    body#case-study-page-wellbin #caseStudyContent .video {
        background-image: none
    }

    body#case-study-page-wellbin #caseStudyContent .video .video-vimeo {
        margin: 40px auto 170px auto;
        width: 522px;
        height: 300px;
        text-align: center;
        box-shadow: rgba(43, 73, 85, 0.2) 30px 30px 0 0
    }

    body#case-study-page-wellbin #caseStudyContent .video .video-vimeo iframe {
        width: 522px;
        height: 300px
    }
}

@media screen and (max-width: 768px) {
    body#case-study-page-wellbin #caseStudyContent .about-project tr td:last-child p {
        font-size: 16px !important;
        line-height: 23px !important;
        text-align: center
    }
}

@media screen and (max-width: 640px) {
    body#case-study-page-wellbin #caseStudyContent .intro-project {
        height: auto
    }

    body#case-study-page-wellbin #caseStudyContent .intro-project .cama {
        display: none
    }

    body#case-study-page-wellbin #caseStudyContent .intro-project .globos {
        display: none
    }

    body#case-study-page-wellbin #caseStudyContent .intro-project .cama-m {
        display: block;
        position: relative;
        width: 70%
    }

    body#case-study-page-wellbin #caseStudyContent .intro-project .logo {
        width: 65%;
        height: auto
    }

    body#case-study-page-wellbin #caseStudyContent .illustration .coche {
        height: auto
    }

    body#case-study-page-wellbin #caseStudyContent .illustration .coche img {
        width: 65%;
        height: auto
    }

    body#case-study-page-wellbin #caseStudyContent .illustration .coche p {
        bottom: auto;
        position: relative;
        margin: 30px auto 0;
        width: 100%;
        display: block
    }

    body#case-study-page-wellbin #caseStudyContent .illustration .hospital {
        height: auto
    }

    body#case-study-page-wellbin #caseStudyContent .illustration .hospital img {
        width: 65%;
        height: auto
    }

    body#case-study-page-wellbin #caseStudyContent .illustration .hospital p {
        bottom: auto;
        position: relative;
        margin: 30px auto 0;
        width: 100%;
        display: block
    }

    body#case-study-page-wellbin #caseStudyContent .illustration .hospital2 {
        height: auto
    }

    body#case-study-page-wellbin #caseStudyContent .illustration .hospital2 img {
        width: 65%;
        height: auto
    }

    body#case-study-page-wellbin #caseStudyContent .illustration .hospital2 p {
        bottom: auto;
        position: relative;
        margin: 30px auto 0;
        width: 100%;
        display: block
    }

    body#case-study-page-wellbin #caseStudyContent .illustration .hospital3 {
        height: auto
    }

    body#case-study-page-wellbin #caseStudyContent .illustration .hospital3 img {
        width: 65%;
        height: auto
    }

    body#case-study-page-wellbin #caseStudyContent .illustration .hospital3 p {
        bottom: auto;
        position: relative;
        margin: 30px auto 0;
        width: 100%;
        display: block
    }

    body#case-study-page-wellbin #caseStudyContent .illustration .palm {
        height: auto
    }

    body#case-study-page-wellbin #caseStudyContent .illustration .palm img {
        width: 65%;
        height: auto
    }

    body#case-study-page-wellbin #caseStudyContent .illustration .palm p {
        bottom: auto;
        position: relative;
        margin: 30px auto 0;
        width: 100%;
        display: block
    }

    body#case-study-page-wellbin #caseStudyContent .illustration .machine {
        height: auto
    }

    body#case-study-page-wellbin #caseStudyContent .illustration .machine img {
        width: 65%;
        height: auto
    }

    body#case-study-page-wellbin #caseStudyContent .illustration .machine p {
        bottom: auto;
        position: relative;
        margin: 30px auto 0;
        width: 100%;
        display: block
    }

    body#case-study-page-wellbin #caseStudyContent .script .script1 img,
    body#case-study-page-wellbin #caseStudyContent .script .script2 img {
        width: 80%;
        height: auto;
        margin: 0 auto
    }

    body#case-study-page-wellbin #caseStudyContent .script .script3 img {
        width: 80%;
        height: auto;
        margin: 0 auto
    }

    body#case-study-page-wellbin #caseStudyContent .approach .stagewrap-mobile {
        display: block
    }

    body#case-study-page-wellbin #caseStudyContent .approach .stagewrap-mobile img {
        width: 65%;
        height: auto
    }

    body#case-study-page-wellbin #caseStudyContent .approach .camilla-mobile {
        display: block
    }

    body#case-study-page-wellbin #caseStudyContent .approach .camilla-mobile img {
        width: 70%;
        height: auto;
        display: block;
        margin: 100px auto 0
    }

    body#case-study-page-wellbin #caseStudyContent .video {
        background-position: 0 70px
    }

    body#case-study-page-wellbin #caseStudyContent .video .logo img {
        width: 80%
    }

    body#case-study-page-wellbin #caseStudyContent .video .video-vimeo {
        margin: 40px auto 170px auto;
        width: 293px;
        height: 173px;
        text-align: center;
        box-shadow: rgba(43, 73, 85, 0.2) 30px 30px 0 0
    }

    body#case-study-page-wellbin #caseStudyContent .video .video-vimeo iframe {
        width: 293px;
        height: 173px
    }
}

ul#items li#case-study-block-li5 {
    background: #ED1A3D
}

ul#items li#case-study-block-li5 a {
    color: white
}

body#case-study-page-li5 {
    color: white;
    background: #ED1A3D
}

body#case-study-page-li5 .preloader {
    background: #ED1A3D
}

body#case-study-page-li5 .preloader .bar {
    background: white
}

body#case-study-page-li5 .preloader .bar:after {
    box-shadow: 0 0 4px white, 0 0 4px white, 0 0 4px white
}

body#case-study-page-li5 .cs-head a {
    text-decoration: none;
    color: white
}

body#case-study-page-li5 .cs-head .links a.contact {
    border-color: white
}

body#case-study-page-li5 .cs-head .links a.contact:hover {
    color: #ED1A3D
}

body#case-study-page-li5 .title-subtitle-stores h1 {
    color: white
}

body#case-study-page-li5 .title-subtitle-stores h2 {
    color: #F7EC39
}

body#case-study-page-li5 .title-subtitle-stores .stores a {
    text-decoration: none;
    color: white
}

body#case-study-page-li5 a.see-more-case-study svg path {
    stroke: #ED1A3D;
    fill: #ED1A3D
}

body#case-study-page-li5 .parallax-mirror {
    z-index: 999 !important
}

body#case-study-page-li5 #caseStudyContent {
    background: white;
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
    overflow-y: auto
}

body#case-study-page-li5 #caseStudyContent .about-project-wrapper {
    background: #F7EC39
}

body#case-study-page-li5 #caseStudyContent .about-project {
    background: #F7EC39;
    padding-left: 15px;
    padding-right: 15px
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .about-project {
        padding-left: 0;
        padding-right: 0;
        padding-top: 60px;
        padding-bottom: 60px
    }
}

body#case-study-page-li5 #caseStudyContent .about-project table td:first-child,
body#case-study-page-li5 #caseStudyContent .about-project tr td:first-child {
    color: black
}

body#case-study-page-li5 #caseStudyContent .about-project table td:last-child p,
body#case-study-page-li5 #caseStudyContent .about-project tr td:last-child p {
    color: black
}

body#case-study-page-li5 #caseStudyContent .branding {
    background: #333742;
    padding-top: 100px;
    position: relative
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .branding {
        padding-top: 60px
    }
}

body#case-study-page-li5 #caseStudyContent .branding>.container {
    max-width: 1280px
}

body#case-study-page-li5 #caseStudyContent .branding h2 {
    margin: 0 0 10px;
    opacity: 0.4;
    font-weight: 400;
    font-size: 18px;
    color: white;
    letter-spacing: 4px;
    text-transform: uppercase
}

body#case-study-page-li5 #caseStudyContent .branding h1 {
    font-weight: 300;
    font-size: 52px;
    color: white;
    line-height: 1.2;
    margin: 0 0 20px
}

@media screen and (min-width: 480px) and (max-width: 737px) {
    body#case-study-page-li5 #caseStudyContent .branding h1 br {
        display: none
    }
}

body#case-study-page-li5 #caseStudyContent .branding p {
    margin: 0;
    max-width: 396px;
    font-weight: 400;
    font-size: 18px;
    color: white;
    line-height: 1.5
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .branding p {
        max-width: 100%
    }
}

body#case-study-page-li5 #caseStudyContent .branding .excerpt {
    padding-bottom: 100px
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .branding .excerpt {
        padding-bottom: 60px;
        padding-left: 30px;
        padding-right: 30px
    }
}

body#case-study-page-li5 #caseStudyContent .branding .mockup .marquee {
    margin: 5px auto 0;
    padding: 75px 0 0;
    max-width: 462px;
    height: 412px;
    text-align: center;
    background: transparent url(/assets/case-studies/li5/iphone-carousel-d81cb07b5cbd75b4353dd2582989bf109c5dc24740b0b45eea0b45dd0bbf085c.svg) no-repeat center bottom/contain;
    line-height: 337px;
    position: relative
}

@media screen and (max-width: 480px) {
    body#case-study-page-li5 #caseStudyContent .branding .mockup .marquee {
        padding: 75px 12px 0 22px;
        max-width: 362px
    }
}

body#case-study-page-li5 #caseStudyContent .branding .mockup .marquee::before {
    content: '';
    position: absolute;
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    width: 50px;
    z-index: 2;
    background: -moz-linear-gradient(left, #333742 0%, rgba(51, 55, 66, 0) 100%);
    background: -webkit-linear-gradient(left, #333742 0%, rgba(51, 55, 66, 0) 100%);
    background: linear-gradient(to right, #333742 0%, rgba(51, 55, 66, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333742', endColorstr='#00333742', GradientType=1)
}

@media screen and (max-width: 480px) {
    body#case-study-page-li5 #caseStudyContent .branding .mockup .marquee::before {
        display: none
    }
}

body#case-study-page-li5 #caseStudyContent .branding .mockup .marquee::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 50px;
    z-index: 2;
    background: -moz-linear-gradient(left, rgba(51, 55, 66, 0) 0%, #333742 100%);
    background: -webkit-linear-gradient(left, rgba(51, 55, 66, 0) 0%, #333742 100%);
    background: linear-gradient(to right, rgba(51, 55, 66, 0) 0%, #333742 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00333742', endColorstr='#333742', GradientType=1)
}

@media screen and (max-width: 480px) {
    body#case-study-page-li5 #caseStudyContent .branding .mockup .marquee::after {
        display: none
    }
}

body#case-study-page-li5 #caseStudyContent .branding .mockup .marquee .slide {
    margin: 0 25px;
    transition-timing-function: linear
}

body#case-study-page-li5 #caseStudyContent .branding .mockup .marquee .slide.slick-current svg path {
    fill: #F7EC39
}

body#case-study-page-li5 #caseStudyContent .branding .mockup .marquee .slide.word-easy svg,
body#case-study-page-li5 #caseStudyContent .branding .mockup .marquee .slide.word-popular svg,
body#case-study-page-li5 #caseStudyContent .branding .mockup .marquee .slide.word-simple svg {
    position: relative;
    top: 5px
}

body#case-study-page-li5 #caseStudyContent .branding .mockup .marquee .slide svg {
    max-width: 280px;
    display: inline-block;
    vertical-align: middle
}

body#case-study-page-li5 #caseStudyContent .branding .mockup .marquee .slide svg path {
    transition: all .3s ease
}

body#case-study-page-li5 #caseStudyContent .liquid-concept {
    background: #ED1A3D;
    padding-top: 150px
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .liquid-concept {
        padding-top: 60px;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0
    }
}

body#case-study-page-li5 #caseStudyContent .liquid-concept .container {
    max-width: 1070px;
    padding-bottom: 100px
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .liquid-concept .container {
        padding-bottom: 60px
    }
}

body#case-study-page-li5 #caseStudyContent .liquid-concept .title {
    text-align: center
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .liquid-concept .title {
        text-align: left
    }
}

body#case-study-page-li5 #caseStudyContent .liquid-concept .title h2 {
    margin: 0 0 10px;
    font-weight: 400;
    font-size: 18px;
    color: white;
    letter-spacing: 4px;
    text-transform: uppercase
}

body#case-study-page-li5 #caseStudyContent .liquid-concept .title h1 {
    font-weight: 300;
    font-size: 52px;
    color: white;
    line-height: 1.2;
    margin: 0 0 100px
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .liquid-concept .title h1 {
        margin-bottom: 20px
    }
}

body#case-study-page-li5 #caseStudyContent .liquid-concept p {
    margin: 0;
    font-weight: 400;
    font-size: 18px;
    max-width: 286px;
    color: white;
    line-height: 1.5
}

@media screen and (max-width: 992px) {
    body#case-study-page-li5 #caseStudyContent .liquid-concept p {
        margin-left: auto;
        margin-right: auto;
        text-align: center
    }
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .liquid-concept p {
        text-align: left;
        max-width: 100%;
        line-height: 1.33
    }
}

body#case-study-page-li5 #caseStudyContent .liquid-concept .liquid-logo {
    display: block;
    margin: 0 auto;
    max-width: 100%
}

@media screen and (max-width: 992px) {
    body#case-study-page-li5 #caseStudyContent .liquid-concept .liquid-logo {
        margin-top: 50px;
        margin-bottom: 50px
    }
}

body#case-study-page-li5 #caseStudyContent .liquid-concept .bowl .top-liquids {
    width: 100%;
    position: relative
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .liquid-concept .bowl .top-liquids {
        width: 110%;
        width: calc(100% + 10px);
        left: -5px
    }
}

body#case-study-page-li5 #caseStudyContent .liquid-concept .bowl .top-liquids .liquid {
    width: 100%;
    background: #ED1A3D;
    position: relative
}

body#case-study-page-li5 #caseStudyContent .liquid-concept .bowl .top-liquids .liquid-absolute {
    width: 100%;
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    left: 50%;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0)
}

body#case-study-page-li5 #caseStudyContent .liquid-concept .bowl .top-liquids .liquid-absolute.front {
    border-bottom: 3px solid #03C8DE;
    box-shadow: inset 0 -2px 0 2px #03C8DE
}

body#case-study-page-li5 #caseStudyContent .liquid-concept .bowl .top-liquids .liquid.customLiquidFade,
body#case-study-page-li5 #caseStudyContent .liquid-concept .bowl .top-liquids .liquid-absolute.customLiquidFade {
    transition: all .5s ease;
    bottom: -50px;
    opacity: 0
}

body#case-study-page-li5 #caseStudyContent .liquid-concept .bowl .top-liquids .liquid.customLiquidFade.animated,
body#case-study-page-li5 #caseStudyContent .liquid-concept .bowl .top-liquids .liquid-absolute.customLiquidFade.animated {
    bottom: 0;
    opacity: 1
}

body#case-study-page-li5 #caseStudyContent .liquid-concept .bowl .bottom-bowl {
    padding-top: 170px;
    padding-bottom: 228px;
    position: relative;
    overflow: hidden;
    min-height: 50vw;
    background: white
}

@media screen and (min-width: 1441px) and (max-width: 2560px) {
    body#case-study-page-li5 #caseStudyContent .liquid-concept .bowl .bottom-bowl {
        min-height: 37vw
    }
}

@media screen and (max-width: 768px) {
    body#case-study-page-li5 #caseStudyContent .liquid-concept .bowl .bottom-bowl {
        padding-top: 70px;
        padding-bottom: 128px
    }
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .liquid-concept .bowl .bottom-bowl {
        padding-bottom: 60px;
        min-height: auto !important
    }
}

body#case-study-page-li5 #caseStudyContent .liquid-concept .bowl .bottom-bowl::after {
    content: '';
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    left: 50%;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    background: #03C8DE;
    border-radius: 50%;
    width: 105vw;
    height: 105vw
}

@media screen and (max-width: 768px) {
    body#case-study-page-li5 #caseStudyContent .liquid-concept .bowl .bottom-bowl::after {
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        left: 0;
        -webkit-transform: none;
        transform: none
    }
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .liquid-concept .bowl .bottom-bowl::after {
        border-radius: 0
    }
}

body#case-study-page-li5 #caseStudyContent .liquid-concept .bowl .bottom-bowl p {
    text-align: center;
    -webkit-transform: none;
    transform: none;
    margin: 0 auto;
    z-index: 2;
    position: relative;
    max-width: 845px;
    font-size: 33px;
    color: white;
    line-height: 1.33;
    font-weight: 400
}

@media screen and (max-width: 992px) {
    body#case-study-page-li5 #caseStudyContent .liquid-concept .bowl .bottom-bowl p {
        font-size: 22px
    }
}

@media screen and (max-width: 768px) {
    body#case-study-page-li5 #caseStudyContent .liquid-concept .bowl .bottom-bowl p {
        max-width: 280px;
        font-size: 18px
    }
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .liquid-concept .bowl .bottom-bowl p {
        max-width: 100%;
        padding-left: 30px;
        padding-right: 30px;
        text-align: left
    }
}

body#case-study-page-li5 #caseStudyContent .logo-icon {
    background: white;
    padding-top: 130px;
    padding-bottom: 220px;
    text-align: center
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .logo-icon {
        padding-top: 60px;
        padding-bottom: 60px
    }
}

body#case-study-page-li5 #caseStudyContent .logo-icon .container {
    max-width: 1080px
}

body#case-study-page-li5 #caseStudyContent .logo-icon h2 {
    margin: 0 0 10px;
    opacity: 0.5;
    font-weight: 400;
    font-size: 18px;
    color: #333742;
    letter-spacing: 4px;
    text-transform: uppercase
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .logo-icon h2 {
        text-align: left;
        padding-left: 15px;
        padding-right: 15px
    }
}

body#case-study-page-li5 #caseStudyContent .logo-icon h1 {
    font-weight: 300;
    font-size: 52px;
    color: #333742;
    line-height: 1.2;
    margin: 0 0 60px
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .logo-icon h1 {
        text-align: left;
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 20px
    }
}

body#case-study-page-li5 #caseStudyContent .logo-icon p {
    margin: 0 auto 100px;
    max-width: 845px;
    font-size: 33px;
    color: #333742;
    line-height: 1.33;
    font-weight: 300
}

@media screen and (max-width: 640px) {
    body#case-study-page-li5 #caseStudyContent .logo-icon p {
        font-size: 24px
    }
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .logo-icon p {
        text-align: left;
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 20px !important;
        font-size: 18px
    }
}

body#case-study-page-li5 #caseStudyContent .logo-icon .logos-app-icon {
    margin-left: -30px;
    margin-right: -30px
}

body#case-study-page-li5 #caseStudyContent .logo-icon .logos-app-icon [class*="col-"] {
    padding-left: 30px;
    padding-right: 30px
}

body#case-study-page-li5 #caseStudyContent .logo-icon .logos-app-icon [class*="col-"] .logo {
    width: 100%;
    border-radius: 6px;
    background: white;
    box-shadow: 0 2px 22px 0 rgba(0, 0, 0, 0.075)
}

@media screen and (max-width: 992px) {
    body#case-study-page-li5 #caseStudyContent .logo-icon .logos-app-icon [class*="col-"] .logo {
        max-width: 112px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 40px
    }
}

body#case-study-page-li5 #caseStudyContent .logo-icon .logos-app-icon [class*="col-"] .logo.mt {
    margin-top: 60px
}

@media screen and (max-width: 992px) {
    body#case-study-page-li5 #caseStudyContent .logo-icon .logos-app-icon [class*="col-"] .logo.mt {
        margin-top: 40px
    }
}

@media screen and (max-width: 992px) {
    body#case-study-page-li5 #caseStudyContent .logo-icon .logos-app-icon .excerpt {
        text-align: center;
        margin-bottom: 60px
    }
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .logo-icon .logos-app-icon .excerpt {
        margin-bottom: 30px
    }

    body#case-study-page-li5 #caseStudyContent .logo-icon .logos-app-icon .excerpt p {
        padding-left: 30px;
        padding-right: 30px;
        text-align: left !important;
        line-height: 1.33 !important
    }
}

body#case-study-page-li5 #caseStudyContent .logo-icon .logos-app-icon .excerpt p {
    font-weight: 400;
    font-size: 18px;
    color: #333742;
    line-height: 1.5;
    text-align: left;
    margin-top: 100px;
    margin-bottom: 125px;
    margin-left: 0;
    max-width: 510px
}

@media screen and (max-width: 992px) {
    body#case-study-page-li5 #caseStudyContent .logo-icon .logos-app-icon .excerpt p {
        margin-left: auto;
        margin-right: auto;
        text-align: center
    }
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .logo-icon .logos-app-icon .excerpt p {
        margin-top: 60px;
        margin-bottom: 60px !important;
        max-width: 100%
    }
}

body#case-study-page-li5 #caseStudyContent .logo-icon .logos-app-icon .excerpt img {
    display: block;
    margin: 0
}

@media screen and (max-width: 992px) {
    body#case-study-page-li5 #caseStudyContent .logo-icon .logos-app-icon .excerpt img {
        margin-left: auto;
        margin-right: auto
    }
}

body#case-study-page-li5 #caseStudyContent .style-elements {
    background: white;
    padding-bottom: 100px;
    text-align: center
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .style-elements {
        text-align: left;
        margin-top: 60px;
        padding-bottom: 0
    }
}

body#case-study-page-li5 #caseStudyContent .style-elements .container {
    max-width: 1080px
}

body#case-study-page-li5 #caseStudyContent .style-elements h2 {
    margin: 0 0 10px;
    opacity: 0.5;
    font-weight: 400;
    font-size: 18px;
    color: #333742;
    letter-spacing: 4px;
    text-transform: uppercase
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .style-elements h2 {
        padding-left: 15px;
        padding-right: 15px
    }
}

body#case-study-page-li5 #caseStudyContent .style-elements h1 {
    font-weight: 300;
    font-size: 52px;
    color: #333742;
    line-height: 1.2;
    margin: 0 0 100px
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .style-elements h1 {
        margin-bottom: 60px;
        padding-left: 15px;
        padding-right: 15px
    }
}

body#case-study-page-li5 #caseStudyContent .style-elements .elements {
    margin-left: -30px;
    margin-right: -30px
}

body#case-study-page-li5 #caseStudyContent .style-elements .elements [class*="col-"] {
    padding-left: 30px;
    padding-right: 30px
}

body#case-study-page-li5 #caseStudyContent .style-elements .elements .inner {
    padding: 25px 35px 75px;
    margin: 0 0 60px;
    background: white;
    box-shadow: 0 2px 22px 0 rgba(0, 0, 0, 0.075);
    border-radius: 6px
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .style-elements .elements .inner {
        padding-bottom: 60px
    }
}

body#case-study-page-li5 #caseStudyContent .style-elements .elements .inner.no-padding {
    padding: 25px 0 75px
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .style-elements .elements .inner.no-padding {
        padding: 25px 0 60px
    }
}

body#case-study-page-li5 #caseStudyContent .style-elements .elements .inner.no-padding h3 {
    padding: 0 35px
}

body#case-study-page-li5 #caseStudyContent .style-elements .elements .inner.no-padding img.full-width {
    width: 100%
}

body#case-study-page-li5 #caseStudyContent .style-elements .elements .inner img {
    max-width: 100%
}

body#case-study-page-li5 #caseStudyContent .style-elements .elements .inner h3 {
    opacity: 0.5;
    font-weight: 400;
    font-size: 14px;
    color: #333742;
    letter-spacing: 3px;
    margin: 0 0 50px;
    text-transform: uppercase;
    text-align: left
}

body#case-study-page-li5 #caseStudyContent .style-elements .elements .inner p {
    font-weight: 400;
    font-size: 20px;
    color: #333742;
    line-height: 1.5;
    padding: 0 42px;
    margin: 105px 0 0;
    text-align: left
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .style-elements .elements .inner p {
        margin-top: 60px;
        text-align: left;
        padding-left: 0;
        padding-right: 0;
        line-height: 1.33 !important
    }

    body#case-study-page-li5 #caseStudyContent .style-elements .elements .inner p.no-top-margin {
        margin-top: 0
    }
}

body#case-study-page-li5 #caseStudyContent .wireframes {
    background: #333742 url(/assets/case-studies/li5/wireframes-board-605384e0a4c75cf90bbda3e5d658afd522155fb5401317489afedef8e629e093.jpg) no-repeat center center/cover;
    position: relative;
    padding-top: 130px;
    padding-bottom: 190px
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .wireframes {
        padding-top: 60px
    }
}

body#case-study-page-li5 #caseStudyContent .wireframes .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(237, 26, 61, 0.65)
}

body#case-study-page-li5 #caseStudyContent .wireframes .container {
    max-width: 1110px
}

body#case-study-page-li5 #caseStudyContent .wireframes .container.larger {
    max-width: 1280px
}

body#case-study-page-li5 #caseStudyContent .wireframes h2 {
    opacity: 0.5;
    font-weight: 500;
    font-size: 18px;
    color: white;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin: 0 0 15px
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .wireframes h2 {
        margin-bottom: 10px;
        padding-left: 15px;
        padding-right: 15px
    }
}

body#case-study-page-li5 #caseStudyContent .wireframes h1 {
    font-weight: 100;
    font-size: 52px;
    color: white;
    margin: 0 0 15px
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .wireframes h1 {
        margin-bottom: 20px;
        padding-left: 15px;
        padding-right: 15px
    }
}

body#case-study-page-li5 #caseStudyContent .wireframes p {
    font-weight: 400;
    font-size: 18px;
    max-width: 510px;
    color: white;
    line-height: 1.5;
    margin: 0 0 120px
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .wireframes p {
        margin-bottom: 60px;
        padding-left: 15px;
        padding-right: 15px;
        line-height: 1.33;
        max-width: 100%
    }
}

body#case-study-page-li5 #caseStudyContent .visual-design {
    background: #333742
}

body#case-study-page-li5 #caseStudyContent .visual-design .container {
    max-width: 992px
}

body#case-study-page-li5 #caseStudyContent .visual-design .container.larger {
    max-width: 1340px
}

body#case-study-page-li5 #caseStudyContent .visual-design .container.larger [class*="col-"] {
    padding-left: 30px;
    padding-right: 30px
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .visual-design .container.larger [class*="col-"]:last-child img {
        margin-bottom: 0
    }
}

body#case-study-page-li5 #caseStudyContent .visual-design .wireframe-images {
    margin-top: -190px
}

body#case-study-page-li5 #caseStudyContent .visual-design .wireframe-image {
    border-radius: 6px;
    box-shadow: 0 2px 22px 0 rgba(0, 0, 0, 0.075), 0 2px 22px 0 rgba(0, 0, 0, 0.075);
    width: 100%;
    max-width: 398px;
    display: block;
    margin: 0 auto 130px
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .visual-design .wireframe-image {
        margin-bottom: 60px
    }
}

body#case-study-page-li5 #caseStudyContent .visual-design h2 {
    opacity: 0.5;
    font-weight: 400;
    font-size: 18px;
    color: white;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin: 0 0 15px;
    text-align: center
}

@media screen and (max-width: 480px) {
    body#case-study-page-li5 #caseStudyContent .visual-design h2 {
        margin-top: 60px
    }
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .visual-design h2 {
        text-align: left;
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 10px
    }
}

@media screen and (min-width: 480px) and (max-width: 737px) {
    body#case-study-page-li5 #caseStudyContent .visual-design h2 {
        margin-top: 60px
    }
}

body#case-study-page-li5 #caseStudyContent .visual-design h1 {
    font-weight: 300;
    font-size: 52px;
    color: white;
    margin: 0 0 60px;
    text-align: center
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .visual-design h1 {
        text-align: left;
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 20px
    }
}

body#case-study-page-li5 #caseStudyContent .visual-design p {
    font-weight: 300;
    font-size: 33px;
    color: white;
    line-height: 1.333;
    text-align: center;
    margin: 0 0 130px
}

@media screen and (max-width: 640px) {
    body#case-study-page-li5 #caseStudyContent .visual-design p {
        font-size: 24px
    }
}

@media screen and (max-width: 480px) {
    body#case-study-page-li5 #caseStudyContent .visual-design p {
        margin-bottom: 60px
    }
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .visual-design p {
        text-align: left;
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 0;
        font-size: 18px;
        line-height: 1.33
    }
}

body#case-study-page-li5 #caseStudyContent .ui-slider {
    width: 362px;
    height: 750px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 130px;
    padding: 75px 12px 88px 23px;
    text-align: center;
    background: transparent url(/assets/case-studies/li5/ui/iphone-mockup-16ed6d93b6417bb4651e5f28226eed4e596f0896d1d176b163c9f8237405887b.svg) no-repeat center center/100% 100%
}

@media screen and (max-width: 480px) {
    body#case-study-page-li5 #caseStudyContent .ui-slider {
        -webkit-transform: scale(0.8) translateX(-14px);
        transform: scale(0.8) translateX(-14px);
        margin-bottom: 60px
    }
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .ui-slider {
        margin-bottom: 0
    }
}

@media screen and (min-width: 480px) and (max-width: 737px) {
    body#case-study-page-li5 #caseStudyContent .ui-slider {
        margin-top: 60px;
        margin-bottom: 60px
    }
}

body#case-study-page-li5 #caseStudyContent .ui-slider .slick-list,
body#case-study-page-li5 #caseStudyContent .ui-slider .slick-track,
body#case-study-page-li5 #caseStudyContent .ui-slider .slick-slide {
    height: 100%
}

body#case-study-page-li5 #caseStudyContent .ui-slider .slick-prev,
body#case-study-page-li5 #caseStudyContent .ui-slider .slick-next {
    width: 40px;
    height: 40px;
    opacity: 1;
    transition: opacity .3s ease
}

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

    body#case-study-page-li5 #caseStudyContent .ui-slider .slick-prev,
    body#case-study-page-li5 #caseStudyContent .ui-slider .slick-next {
        display: none !important
    }
}

body#case-study-page-li5 #caseStudyContent .ui-slider .slick-prev:hover,
body#case-study-page-li5 #caseStudyContent .ui-slider .slick-prev:focus,
body#case-study-page-li5 #caseStudyContent .ui-slider .slick-next:hover,
body#case-study-page-li5 #caseStudyContent .ui-slider .slick-next:focus {
    opacity: 1
}

body#case-study-page-li5 #caseStudyContent .ui-slider .slick-prev.slick-disabled,
body#case-study-page-li5 #caseStudyContent .ui-slider .slick-next.slick-disabled {
    pointer-events: none;
    opacity: 0
}

body#case-study-page-li5 #caseStudyContent .ui-slider .slick-prev::before,
body#case-study-page-li5 #caseStudyContent .ui-slider .slick-next::before {
    color: transparent;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1
}

body#case-study-page-li5 #caseStudyContent .ui-slider .slick-prev::before:hover,
body#case-study-page-li5 #caseStudyContent .ui-slider .slick-prev::before:focus,
body#case-study-page-li5 #caseStudyContent .ui-slider .slick-next::before:hover,
body#case-study-page-li5 #caseStudyContent .ui-slider .slick-next::before:focus {
    opacity: 1
}

body#case-study-page-li5 #caseStudyContent .ui-slider .slick-prev {
    left: -75px
}

body#case-study-page-li5 #caseStudyContent .ui-slider .slick-prev::before {
    background: transparent url(/assets/case-studies/li5/go-left-bf7970e7901a594d5f92f680fe95fefb0f74ced49dcc9cb1a7f9a38c593c8fe7.svg) no-repeat center center/contain
}

body#case-study-page-li5 #caseStudyContent .ui-slider .slick-next {
    right: -75px
}

body#case-study-page-li5 #caseStudyContent .ui-slider .slick-next::before {
    background: transparent url(/assets/case-studies/li5/go-right-f67bd99b8a6de20e80b761bbd0e09d8c0893f34b84094af06111568b25205559.svg) no-repeat center center/contain
}

body#case-study-page-li5 #caseStudyContent .ui-slider .ui-demo {
    width: 100%;
    height: 100%;
    display: block
}

body#case-study-page-li5 #caseStudyContent .ui-slider .slick-dots {
    display: block;
    position: static;
    margin-top: 180px;
    margin-bottom: 160px
}

body#case-study-page-li5 #caseStudyContent .ui-slider .slick-dots li {
    margin-left: 10px;
    margin-right: 10px
}

body#case-study-page-li5 #caseStudyContent .ui-slider .slick-dots li button {
    text-indent: 9999px;
    overflow: hidden;
    border-radius: 50%;
    background: #52555F;
    transition: all .3s ease
}

body#case-study-page-li5 #caseStudyContent .ui-slider .slick-dots li.slick-active button {
    background: #F7EC39
}

body#case-study-page-li5 #caseStudyContent .motion-ui {
    background: #03C8DE;
    padding-top: 200px;
    padding-bottom: 150px
}

@media screen and (max-width: 480px) {
    body#case-study-page-li5 #caseStudyContent .motion-ui {
        padding-top: 100px;
        padding-bottom: 50px
    }
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .motion-ui {
        padding-top: 60px;
        padding-bottom: 0
    }
}

body#case-study-page-li5 #caseStudyContent .motion-ui .container {
    max-width: 1080px
}

body#case-study-page-li5 #caseStudyContent .motion-ui .love-animation {
    width: 132px;
    height: 107px;
    display: block;
    background: transparent url(/assets/case-studies/li5/love-animation-8a62df91faf9f23bec4bee29edff9ec704bf0b41514254980baaa3d92c114b24.png) no-repeat 0px center/auto 107px;
    -webkit-animation: love 3s steps(73) infinite;
    animation: love 3s steps(73) infinite;
    position: relative;
    left: -24px
}

@media screen and (max-width: 992px) {
    body#case-study-page-li5 #caseStudyContent .motion-ui .love-animation {
        margin-left: auto;
        margin-right: auto;
        left: 0
    }
}

@media screen and (max-width: 992px) {
    body#case-study-page-li5 #caseStudyContent .motion-ui .info {
        text-align: center
    }
}

body#case-study-page-li5 #caseStudyContent .motion-ui h2 {
    margin: 85px 0 15px;
    opacity: 0.5;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 18px;
    color: white;
    letter-spacing: 4px
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .motion-ui h2 {
        margin-top: 60px;
        text-align: left;
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 10px
    }
}

body#case-study-page-li5 #caseStudyContent .motion-ui h1 {
    font-weight: 300;
    font-size: 52px;
    color: white;
    margin: 0 0 15px
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .motion-ui h1 {
        text-align: left;
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 20px
    }
}

body#case-study-page-li5 #caseStudyContent .motion-ui p {
    font-weight: 400;
    max-width: 398px;
    font-size: 18px;
    color: white;
    line-height: 1.5
}

@media screen and (max-width: 992px) {
    body#case-study-page-li5 #caseStudyContent .motion-ui p {
        margin-left: auto;
        margin-right: auto
    }
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .motion-ui p {
        text-align: left;
        padding-left: 15px;
        padding-right: 15px;
        line-height: 1.33;
        max-width: 100%
    }
}

body#case-study-page-li5 #caseStudyContent .motion-ui .ui {
    width: 362px;
    height: 750px;
    float: right;
    padding: 75px 11px 90px 22px;
    margin-top: -50px;
    text-align: center;
    background: transparent url(/assets/case-studies/li5/ui/iphone-mockup-2-4a22f0ceca60c31844e95dc94fcb21d5601d57a53f0aefb64cc6953215fb9209.svg) no-repeat center center/100% 100%
}

@media screen and (max-width: 992px) {
    body#case-study-page-li5 #caseStudyContent .motion-ui .ui {
        margin-top: 50px;
        float: none;
        margin-left: auto;
        margin-right: auto
    }
}

@media screen and (max-width: 480px) {
    body#case-study-page-li5 #caseStudyContent .motion-ui .ui {
        -webkit-transform: scale(0.8) translateX(-14px);
        transform: scale(0.8) translateX(-14px);
        margin-top: 0
    }
}

@media screen and (min-width: 480px) and (max-width: 737px) {
    body#case-study-page-li5 #caseStudyContent .motion-ui .ui {
        margin-bottom: 60px
    }
}

body#case-study-page-li5 #caseStudyContent .motion-ui .ui .ui-demo {
    width: 100%;
    height: 100%;
    display: block
}

body#case-study-page-li5 #caseStudyContent .motion-gifs {
    background: #f7ec39;
    padding-top: 100px;
    padding-bottom: 58px
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .motion-gifs {
        padding-top: 25px;
        padding-bottom: 20px
    }
}

body#case-study-page-li5 #caseStudyContent .motion-gifs>.container {
    max-width: 918px
}

body#case-study-page-li5 #caseStudyContent .motion-gifs .animations {
    text-align: center
}

@media screen and (max-width: 992px) {
    body#case-study-page-li5 #caseStudyContent .motion-gifs .animations {
        padding-top: 50px;
        padding-bottom: 0
    }
}

body#case-study-page-li5 #caseStudyContent .motion-gifs .animations img {
    display: block;
    margin: 0 auto 42px;
    width: 100%;
    max-width: 398px;
    border-radius: 6px
}

body#case-study-page-li5 #caseStudyContent .motion-gifs .see-you {
    text-align: center
}

@media screen and (max-width: 992px) {
    body#case-study-page-li5 #caseStudyContent .motion-gifs .see-you {
        padding-top: 50px;
        padding-bottom: 50px
    }
}

@media screen and (max-width: 736px) {
    body#case-study-page-li5 #caseStudyContent .motion-gifs .see-you {
        padding-top: 0
    }
}

body#case-study-page-li5 #caseStudyContent .motion-gifs .see-you img {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 436px;
    border-radius: 6px
}

body#case-study-page-li5 .more-case-studies {
    background: white;
    color: #bfc0c2
}

body#case-study-page-li5 .more-case-studies strong {
    color: #252525
}

@media screen and (min-width: 1441px) {
    body#case-study-page-li5 #caseStudyContent .concept .bottom {
        height: 50vw !important;
        box-shadow: inset 0 -10px 0 white
    }

    body#case-study-page-li5 #caseStudyContent .iconography .bottom {
        height: 50vw !important;
        box-shadow: inset 0 -10px 0 currentColor
    }
}

@media screen and (max-width: 1140px) {
    body#case-study-page-li5 #caseStudyContent .intro-project {
        padding-top: 350px;
        padding-bottom: 80px
    }

    body#case-study-page-li5 #caseStudyContent .concept .compo {
        max-width: 100%
    }
}

@media screen and (max-width: 1024px) {
    body#case-study-page-li5 #caseStudyContent .concept .compo {
        margin-top: 50px
    }

    body#case-study-page-li5 #caseStudyContent .onscreen-art .onscreen-slider .slick-slide .slide {
        width: 100%
    }
}

@media screen and (max-width: 900px) {
    body#case-study-page-li5 #caseStudyContent .intro-project {
        padding-top: 250px;
        padding-bottom: 80px
    }

    body#case-study-page-li5 #caseStudyContent .iconography,
    body#case-study-page-li5 #caseStudyContent .typography,
    body#case-study-page-li5 #caseStudyContent .color-palette {
        text-align: center
    }
}

@media screen and (max-width: 768px) {
    body#case-study-page-li5 #caseStudyContent .about-project tr td:last-child p {
        font-size: 16px !important;
        line-height: 23px !important;
        text-align: center
    }
}

@media screen and (max-width: 480px) {
    body#case-study-page-li5 #caseStudyContent .intro-project {
        padding-top: 80px;
        padding-bottom: 30px
    }
}

ul#items li#case-study-block-polyvibe {
    background: #7428B7
}

ul#items li#case-study-block-polyvibe a {
    color: white
}

body#case-study-page-polyvibe {
    color: white;
    background: #7428B7
}

body#case-study-page-polyvibe .preloader {
    background: #7428B7
}

body#case-study-page-polyvibe .preloader .bar {
    background: white
}

body#case-study-page-polyvibe .preloader .bar:after {
    box-shadow: 0 0 4px white, 0 0 4px white, 0 0 4px white
}

body#case-study-page-polyvibe .cs-head a {
    text-decoration: none;
    color: #C17BFF
}

body#case-study-page-polyvibe .cs-head .links a.contact {
    border-color: #C17BFF
}

body#case-study-page-polyvibe .cs-head .links a.contact:hover {
    color: white
}

body#case-study-page-polyvibe .title-subtitle-stores h1 {
    color: white
}

body#case-study-page-polyvibe .title-subtitle-stores h2 {
    color: #C17BFF
}

body#case-study-page-polyvibe .title-subtitle-stores .stores a {
    text-decoration: none;
    color: white
}

body#case-study-page-polyvibe .more-case-studies {
    background-color: white;
    color: #98999D
}

body#case-study-page-polyvibe .more-case-studies strong {
    color: #162B31
}

body#case-study-page-polyvibe a.see-more-case-study svg path {
    stroke: #7428B7;
    fill: #7428B7
}

body#case-study-page-polyvibe #caseStudyContent {
    background: white;
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
    overflow-y: auto
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent {
        overflow-y: hidden
    }
}

body#case-study-page-polyvibe #caseStudyContent .about-project-wrapper {
    background: white
}

body#case-study-page-polyvibe #caseStudyContent .about-project {
    padding: 100px 30px;
    padding-left: 15px;
    padding-right: 15px
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .about-project {
        padding-left: 0;
        padding-right: 0;
        padding-top: 60px;
        padding-bottom: 60px
    }
}

body#case-study-page-polyvibe #caseStudyContent .about-project table td:first-child,
body#case-study-page-polyvibe #caseStudyContent .about-project tr td:first-child {
    color: #1A2B44
}

body#case-study-page-polyvibe #caseStudyContent .about-project table td:last-child p,
body#case-study-page-polyvibe #caseStudyContent .about-project tr td:last-child p {
    color: #1A2B44
}

@media screen and (max-width: 736px) {

    body#case-study-page-polyvibe #caseStudyContent .about-project table td:first-child,
    body#case-study-page-polyvibe #caseStudyContent .about-project tr td:first-child {
        font-size: 20px;
        line-height: 24px;
        text-align: center
    }

    body#case-study-page-polyvibe #caseStudyContent .about-project table td:last-child p,
    body#case-study-page-polyvibe #caseStudyContent .about-project tr td:last-child p {
        font-size: 16px !important;
        line-height: 23px !important;
        text-align: center
    }
}

body#case-study-page-polyvibe #caseStudyContent .branding {
    background: #fff url(/assets/case-studies/polyvibe/polygradient-723136cb7d6ba7d3d58974c3cd8a8ff02551e7f83115e8563b4c9375315e0d84.png) no-repeat center top;
    background-size: contain
}

@media screen and (min-width: 1890px) {
    body#case-study-page-polyvibe #caseStudyContent .branding {
        background: #fff url(/assets/case-studies/polyvibe/polygradient-723136cb7d6ba7d3d58974c3cd8a8ff02551e7f83115e8563b4c9375315e0d84.png) no-repeat center -140px;
        background-size: contain
    }
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .branding {
        background: #fff url(/assets/case-studies/polyvibe/polygradient-723136cb7d6ba7d3d58974c3cd8a8ff02551e7f83115e8563b4c9375315e0d84.png) no-repeat center top;
        background-size: 250%
    }
}

body#case-study-page-polyvibe #caseStudyContent .branding .excerpt h2 {
    font-size: 38px;
    line-height: 46px;
    letter-spacing: 8px;
    text-transform: uppercase;
    text-align: center;
    color: white;
    font-weight: 400;
    margin: 180px auto 70px;
    width: 80%
}

@media screen and (max-width: 1280px) {
    body#case-study-page-polyvibe #caseStudyContent .branding .excerpt h2 {
        margin: 180px auto 30px
    }
}

@media screen and (min-width: 1890px) {
    body#case-study-page-polyvibe #caseStudyContent .branding .excerpt h2 {
        margin: 160px auto 70px
    }
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .branding .excerpt h2 {
        margin: 60px auto 30px;
        font-size: 24px;
        line-height: 29px;
        width: 90%
    }
}

body#case-study-page-polyvibe #caseStudyContent .branding .excerpt p {
    margin: 0 auto 200px;
    font-size: 22px;
    line-height: 36px;
    text-align: center;
    font-weight: 200;
    width: 80%
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .branding .excerpt p {
        font-size: 18px;
        line-height: 26px
    }
}

body#case-study-page-polyvibe #caseStudyContent .branding .icon-design img {
    width: 1075px;
    height: 396px;
    display: block;
    margin: 85px auto 50px
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .branding .icon-design img {
        width: 130%;
        height: auto;
        margin: 0 -15% 50px
    }
}

body#case-study-page-polyvibe #caseStudyContent .branding .color {
    margin: 90px auto 50px
}

body#case-study-page-polyvibe #caseStudyContent .branding .color h5 {
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #1F1F1F;
    font-weight: 400;
    margin: 0 0 0
}

@media screen and (min-width: 1400px) and (max-width: 1500px) {
    body#case-study-page-polyvibe #caseStudyContent .branding .color h5 {
        margin: 0 20px 0 40px
    }
}

@media screen and (min-width: 1500px) and (max-width: 1600px) {
    body#case-study-page-polyvibe #caseStudyContent .branding .color h5 {
        margin: 0 20px 0 100px
    }
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .branding .color h5 {
        margin: 0 20px 0 30px
    }
}

body#case-study-page-polyvibe #caseStudyContent .branding .color p {
    color: #98A3A7;
    font-size: 24px;
    line-height: 36px;
    font-weight: 200;
    margin: 30px 0 0
}

@media screen and (min-width: 1400px) and (max-width: 1500px) {
    body#case-study-page-polyvibe #caseStudyContent .branding .color p {
        margin: 30px 20px 0 40px
    }
}

@media screen and (min-width: 1500px) and (max-width: 1600px) {
    body#case-study-page-polyvibe #caseStudyContent .branding .color p {
        margin: 30px 20px 0 100px
    }
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .branding .color p {
        margin: 30px 20px 0 30px;
        font-size: 18px;
        line-height: 28px
    }
}

body#case-study-page-polyvibe #caseStudyContent .branding .color img {
    width: 380px;
    height: 291px;
    display: block;
    margin: 0
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .branding .color img {
        width: 90%;
        height: auto;
        margin: 50px auto 20px
    }
}

body#case-study-page-polyvibe #caseStudyContent .branding .geometric-grid {
    margin: 90px auto
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .branding .geometric-grid {
        margin: 20px auto 0;
        padding: 0
    }
}

body#case-study-page-polyvibe #caseStudyContent .branding .geometric-grid .grid-container {
    width: 1075px;
    height: 454px;
    border-radius: 3px;
    background-color: #E8EAEF;
    margin: 0 auto;
    position: relative
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .branding .geometric-grid .grid-container {
        width: 377px;
        height: 283px
    }
}

body#case-study-page-polyvibe #caseStudyContent .branding .geometric-grid .grid-container .gridimg {
    position: absolute;
    top: 80px;
    left: 50%;
    margin-left: -416px;
    width: 833px
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .branding .geometric-grid .grid-container .gridimg {
        width: 360px;
        margin-left: -180px;
        top: 20px
    }
}

@media screen and (max-width: 370px) {
    body#case-study-page-polyvibe #caseStudyContent .branding .geometric-grid .grid-container .gridimg {
        width: 350px;
        margin-left: -183px;
        top: 20px
    }
}

body#case-study-page-polyvibe #caseStudyContent .branding .geometric-grid .grid-container .logoimg {
    position: absolute;
    top: 117px;
    left: 50%;
    margin-left: -365px
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .branding .geometric-grid .grid-container .logoimg {
        width: 360px;
        margin-left: -180px;
        top: 105px
    }
}

@media screen and (max-width: 370px) {
    body#case-study-page-polyvibe #caseStudyContent .branding .geometric-grid .grid-container .logoimg {
        width: 340px;
        margin-left: -178px;
        top: 105px
    }
}

body#case-study-page-polyvibe #caseStudyContent .branding .geometric-grid .grid-container h2 {
    position: absolute;
    bottom: 58px;
    left: 50%;
    margin-left: -50px;
    font-size: 14px;
    line-height: 17px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #747475;
    font-weight: 500
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .branding .geometric-grid .grid-container h2 {
        bottom: 30px;
        width: 122px;
        text-align: center;
        margin-left: -61px
    }
}

body#case-study-page-polyvibe #caseStudyContent .visual-elements {
    background-color: #B335D5
}

body#case-study-page-polyvibe #caseStudyContent .visual-elements .ve {
    margin-bottom: 50px
}

body#case-study-page-polyvibe #caseStudyContent .visual-elements .ve h2 {
    font-size: 14px;
    line-height: 17px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: white;
    font-weight: 400;
    margin: 240px 0 0 0
}

@media screen and (min-width: 1400px) and (max-width: 1600px) {
    body#case-study-page-polyvibe #caseStudyContent .visual-elements .ve h2 {
        margin: 240px 0px 0 100px
    }
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .visual-elements .ve h2 {
        margin: 250px 0 0 30px
    }
}

body#case-study-page-polyvibe #caseStudyContent .visual-elements .ve p {
    color: white;
    font-size: 24px;
    line-height: 36px;
    font-weight: 200;
    width: 70%;
    margin: 30px 0 0 0
}

@media screen and (min-width: 1400px) and (max-width: 1600px) {
    body#case-study-page-polyvibe #caseStudyContent .visual-elements .ve p {
        margin: 30px 0px 0 100px
    }
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .visual-elements .ve p {
        font-size: 18px;
        line-height: 28px;
        margin: 10px 0 0 30px
    }
}

body#case-study-page-polyvibe #caseStudyContent .visual-elements .ve img {
    width: 650px;
    height: 570px;
    display: block;
    margin: 0;
    position: absolute;
    right: -60px;
    top: 80px
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .visual-elements .ve img {
        width: 80%;
        height: auto;
        top: 35px
    }
}

body#case-study-page-polyvibe #caseStudyContent .visual-elements .emojis h2 {
    font-size: 14px;
    line-height: 17px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: white;
    font-weight: 400;
    margin: 240px 0 0 0;
    text-align: right;
    width: 70%
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .visual-elements .emojis h2 {
        width: 85%
    }
}

body#case-study-page-polyvibe #caseStudyContent .visual-elements .emojis p {
    color: white;
    font-size: 24px;
    line-height: 36px;
    font-weight: 200;
    width: 70%;
    text-align: right;
    margin-bottom: 240px
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .visual-elements .emojis p {
        font-size: 18px;
        width: 85%;
        line-height: 28px;
        margin-bottom: 70px
    }
}

body#case-study-page-polyvibe #caseStudyContent .visual-elements .emojis img {
    width: 910px;
    height: 675px;
    display: block;
    margin: 0;
    position: absolute;
    left: -200px;
    bottom: 0
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .visual-elements .emojis img {
        width: 80%;
        height: auto;
        left: -50px;
        bottom: 230px
    }
}

body#case-study-page-polyvibe #caseStudyContent .user-experience {
    background-color: #E8EAEF
}

@media screen and (min-width: 1350px) {
    body#case-study-page-polyvibe #caseStudyContent .user-experience .container {
        max-width: 1330px
    }
}

body#case-study-page-polyvibe #caseStudyContent .user-experience .container .modal {
    position: sticky
}

body#case-study-page-polyvibe #caseStudyContent .user-experience h2 {
    font-size: 38px;
    line-height: 46px;
    letter-spacing: 8px;
    text-transform: uppercase;
    color: #7428B7;
    font-weight: 500;
    margin: 125px auto 0;
    text-align: center
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .user-experience h2 {
        font-size: 24px;
        line-height: 29px;
        margin: 80px auto 0
    }
}

body#case-study-page-polyvibe #caseStudyContent .user-experience p {
    color: #98A3A7;
    font-size: 18px;
    line-height: 27px;
    font-weight: 200;
    width: 540px;
    text-align: center;
    margin: 30px auto 50px
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .user-experience p {
        width: 100%;
        margin: 30px auto 0px
    }
}

body#case-study-page-polyvibe #caseStudyContent .user-experience img.user-screens {
    display: block;
    margin: -200px auto 100px;
    z-index: -10;
    width: 100%;
    height: auto
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .user-experience img.user-screens {
        margin: 0px -18% 50px;
        width: 136%
    }
}

body#case-study-page-polyvibe #caseStudyContent .user-experience img.user-video {
    margin: 0
}

body#case-study-page-polyvibe #caseStudyContent .user-experience .video-container {
    background-color: white;
    box-shadow: 0 20px 60px rgba(152, 163, 167, 0.3);
    border-radius: 8px;
    margin: 0 auto 60px;
    width: 850px
}

body#case-study-page-polyvibe #caseStudyContent .user-experience .video-container h5 {
    color: #1F1F1F;
    font-size: 14px;
    line-height: 17px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 500;
    text-align: left;
    margin: 80px 0 0 90px
}

body#case-study-page-polyvibe #caseStudyContent .user-experience .video-container p {
    color: #98A3A7;
    font-size: 32px;
    line-height: 41px;
    letter-spacing: 0px;
    font-weight: 200;
    text-align: left;
    margin: 15px 0 0 90px;
    width: 70%
}

body#case-study-page-polyvibe #caseStudyContent .user-experience .video-container img {
    width: 285px;
    height: 190px;
    margin: 60px 55px 60px 55px
}

body#case-study-page-polyvibe #caseStudyContent .user-interface {
    background-color: #FF3C6E;
    position: relative;
    height: 1900px
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .user-interface {
        height: 2000px
    }
}

body#case-study-page-polyvibe #caseStudyContent .user-interface .spacer {
    height: 300px;
    background: #E8EAEF url(/assets/case-studies/polyvibe/interface-bkg-ee80dc2f5eb629fd248377e17afb715494f11ac95c2408c97263fe70317316dd.png) no-repeat center top;
    background-size: cover;
    width: 100%
}

@media screen and (min-width: 1800px) {
    body#case-study-page-polyvibe #caseStudyContent .user-interface .spacer {
        height: 400px
    }
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .user-interface .spacer {
        height: 0
    }
}

body#case-study-page-polyvibe #caseStudyContent .user-interface .spacer p {
    margin: 0;
    padding: 0
}

body#case-study-page-polyvibe #caseStudyContent .user-interface h2 {
    color: white;
    font-size: 38px;
    line-height: 46px;
    letter-spacing: 8px;
    text-transform: uppercase;
    font-weight: 100;
    text-align: center;
    margin: 20px auto 0
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .user-interface h2 {
        margin: 40px auto 0
    }
}

body#case-study-page-polyvibe #caseStudyContent .user-interface p {
    color: white;
    font-size: 18px;
    line-height: 27px;
    letter-spacing: 0px;
    font-weight: 200;
    text-align: center;
    margin: 40px auto;
    width: 50%
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .user-interface p {
        width: 80%
    }
}

body#case-study-page-polyvibe #caseStudyContent .user-interface .imgs {
    position: relative
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .user-interface .imgs {
        margin-top: 80px
    }
}

body#case-study-page-polyvibe #caseStudyContent .user-interface .imgs img {
    position: absolute
}

body#case-study-page-polyvibe #caseStudyContent .user-interface .imgs img.two {
    top: 54px;
    right: -347px;
    width: 560px;
    height: 407px
}

body#case-study-page-polyvibe #caseStudyContent .user-interface .imgs img.three {
    top: -30px;
    left: 0;
    width: 276px;
    height: 224px
}

body#case-study-page-polyvibe #caseStudyContent .user-interface .imgs img.four {
    top: 50px;
    left: 88px;
    width: 565px;
    height: 418px
}

body#case-study-page-polyvibe #caseStudyContent .user-interface .imgs img.five {
    top: 360px;
    left: 667px;
    width: 559px;
    height: 408px
}

body#case-study-page-polyvibe #caseStudyContent .user-interface .imgs img.six {
    top: 518px;
    right: -253px;
    width: 565px;
    height: 408px
}

body#case-study-page-polyvibe #caseStudyContent .user-interface .imgs img.seven {
    top: 334px;
    left: -381px;
    width: 666px;
    height: 486px
}

body#case-study-page-polyvibe #caseStudyContent .user-interface .imgs img.eight {
    top: 532px;
    left: -49px;
    width: 573px;
    height: 424px
}

body#case-study-page-polyvibe #caseStudyContent .user-interface .imgs img.nine {
    top: 637px;
    left: 221px;
    width: 691px;
    height: 589px
}

body#case-study-page-polyvibe #caseStudyContent .user-interface .imgs img.ten {
    top: 888px;
    left: 760px;
    width: 341px;
    height: 250px
}

body#case-study-page-polyvibe #caseStudyContent .user-interface .imgs img.eleven {
    top: 833px;
    left: -413px;
    width: 540px;
    height: 408px
}

body#case-study-page-polyvibe #caseStudyContent .user-interface .imgs img.twelve {
    top: 184px;
    left: 325px;
    width: 639px;
    height: 477px
}

body#case-study-page-polyvibe #caseStudyContent .user-interface .imgs img.thirteen {
    top: -95px;
    right: -74px;
    width: 560px;
    height: 407px
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .user-interface .imgs img.thirteen {
        top: 1100px
    }
}

body#case-study-page-polyvibe #caseStudyContent .motion-ui {
    background-color: #1F1F20
}

body#case-study-page-polyvibe #caseStudyContent .motion-ui .sliderwrapper .slider-poly {
    width: 259px;
    height: 465px;
    position: absolute;
    top: 113px;
    left: 257px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 130px;
    text-align: center;
    z-index: -5
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .motion-ui .sliderwrapper .slider-poly {
        margin-bottom: 0
    }
}

@media screen and (min-width: 480px) and (max-width: 737px) {
    body#case-study-page-polyvibe #caseStudyContent .motion-ui .sliderwrapper .slider-poly {
        margin-top: 60px;
        margin-bottom: 60px
    }
}

@media screen and (min-width: 1200px) {
    body#case-study-page-polyvibe #caseStudyContent .motion-ui .sliderwrapper .slider-poly {
        left: 97px
    }
}

@media screen and (min-width: 1400px) {
    body#case-study-page-polyvibe #caseStudyContent .motion-ui .sliderwrapper .slider-poly {
        left: 165px
    }
}

@media screen and (min-width: 1500px) {
    body#case-study-page-polyvibe #caseStudyContent .motion-ui .sliderwrapper .slider-poly {
        left: 255px
    }
}

@media screen and (min-width: 1600px) {
    body#case-study-page-polyvibe #caseStudyContent .motion-ui .sliderwrapper .slider-poly {
        left: 50%;
        margin-left: -218px
    }
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .motion-ui .sliderwrapper .slider-poly {
        left: 60px;
        top: 453px;
        z-index: 2
    }
}

@media screen and (max-width: 370px) {
    body#case-study-page-polyvibe #caseStudyContent .motion-ui .sliderwrapper .slider-poly {
        left: 50px;
        top: 453px;
        z-index: 2
    }
}

body#case-study-page-polyvibe #caseStudyContent .motion-ui .sliderwrapper .slider-poly .slick-list,
body#case-study-page-polyvibe #caseStudyContent .motion-ui .sliderwrapper .slider-poly .slick-track,
body#case-study-page-polyvibe #caseStudyContent .motion-ui .sliderwrapper .slider-poly .slick-slide {
    height: 100%
}

body#case-study-page-polyvibe #caseStudyContent .motion-ui .sliderwrapper .slider-poly .ui-demo {
    width: 100%;
    height: 100%;
    display: block
}

body#case-study-page-polyvibe #caseStudyContent .motion-ui .sliderwrapper .slider-poly .slick-dots {
    display: block;
    position: absolute;
    top: 333px;
    left: 357px;
    margin-top: 0px;
    margin-bottom: 0px
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .motion-ui .sliderwrapper .slider-poly .slick-dots {
        top: 600px;
        left: 0px
    }
}

body#case-study-page-polyvibe #caseStudyContent .motion-ui .sliderwrapper .slider-poly .slick-dots li {
    margin-left: 10px;
    margin-right: 10px;
    width: 15px;
    height: 2px
}

body#case-study-page-polyvibe #caseStudyContent .motion-ui .sliderwrapper .slider-poly .slick-dots li button {
    width: 15px;
    height: 2px;
    padding: 0;
    margin: 0 7px;
    text-indent: 9999px;
    overflow: hidden;
    background: #68686E;
    transition: all .3s ease
}

body#case-study-page-polyvibe #caseStudyContent .motion-ui .sliderwrapper .slider-poly .slick-dots li.slick-active button {
    background: white
}

body#case-study-page-polyvibe #caseStudyContent .motion-ui .sliderwrapper .slider-poly img {
    width: 261px;
    height: 465px
}

body#case-study-page-polyvibe #caseStudyContent .motion-ui .sliderwrapper img {
    width: 424px;
    height: 728px;
    position: absolute;
    top: 0px;
    left: 175px;
    margin-left: auto;
    margin-right: auto;
    z-index: -10
}

@media screen and (min-width: 1200px) {
    body#case-study-page-polyvibe #caseStudyContent .motion-ui .sliderwrapper img {
        left: 17px
    }
}

@media screen and (min-width: 1400px) {
    body#case-study-page-polyvibe #caseStudyContent .motion-ui .sliderwrapper img {
        left: 85px
    }
}

@media screen and (min-width: 1500px) {
    body#case-study-page-polyvibe #caseStudyContent .motion-ui .sliderwrapper img {
        left: 175px
    }
}

@media screen and (min-width: 1600px) {
    body#case-study-page-polyvibe #caseStudyContent .motion-ui .sliderwrapper img {
        left: 50%;
        margin-left: -300px
    }
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .motion-ui .sliderwrapper img {
        left: -20px;
        top: 350px;
        z-index: 1
    }
}

@media screen and (max-width: 370px) {
    body#case-study-page-polyvibe #caseStudyContent .motion-ui .sliderwrapper img {
        left: -30px;
        top: 350px;
        z-index: 1
    }
}

body#case-study-page-polyvibe #caseStudyContent .motion-ui .info {
    background: url(/assets/case-studies/polyvibe/motion-face-bafa0db7fe47954c7335aa5c67338115dc0b2cffd27924df873187dbfdbcb955.svg) no-repeat center 107px;
    height: 800px
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .motion-ui .info {
        background: url(/assets/case-studies/polyvibe/motion-face-bafa0db7fe47954c7335aa5c67338115dc0b2cffd27924df873187dbfdbcb955.svg) no-repeat center 40px;
        background-size: 100%;
        height: 1150px
    }
}

body#case-study-page-polyvibe #caseStudyContent .motion-ui .info h2 {
    color: white;
    font-size: 38px;
    line-height: 46px;
    letter-spacing: 8px;
    font-weight: 500;
    text-transform: uppercase;
    margin: 240px 0 40px -100px
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .motion-ui .info h2 {
        margin: 120px auto 0;
        text-align: center
    }
}

body#case-study-page-polyvibe #caseStudyContent .motion-ui .info p {
    color: white;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0px;
    font-weight: 200;
    width: 540px;
    margin: 0px 0 0px -100px
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .motion-ui .info p {
        margin: 30px auto 0;
        text-align: center;
        width: 90%
    }
}

body#case-study-page-polyvibe #caseStudyContent .illustrations {
    background-color: #F7D14E
}

body#case-study-page-polyvibe #caseStudyContent .illustrations .info {
    height: 800px
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .illustrations .info {
        display: none
    }
}

body#case-study-page-polyvibe #caseStudyContent .illustrations .info h2 {
    color: white;
    font-size: 38px;
    line-height: 46px;
    letter-spacing: 8px;
    font-weight: 500;
    text-transform: uppercase;
    margin: 209px 0 40px 150px
}

@media screen and (min-width: 1400px) {
    body#case-study-page-polyvibe #caseStudyContent .illustrations .info h2 {
        margin: 209px 0 40px 225px
    }
}

@media screen and (min-width: 1600px) {
    body#case-study-page-polyvibe #caseStudyContent .illustrations .info h2 {
        margin: 209px 0 40px 70px
    }
}

@media screen and (min-width: 1800px) {
    body#case-study-page-polyvibe #caseStudyContent .illustrations .info h2 {
        margin: 209px 0 40px 70px
    }
}

body#case-study-page-polyvibe #caseStudyContent .illustrations .info p {
    color: white;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0px;
    font-weight: 200;
    width: 391px;
    margin: 0px 0 0px 150px
}

@media screen and (min-width: 1400px) {
    body#case-study-page-polyvibe #caseStudyContent .illustrations .info p {
        margin: 0px 0 0px 225px
    }
}

@media screen and (min-width: 1600px) {
    body#case-study-page-polyvibe #caseStudyContent .illustrations .info p {
        margin: 0px 0 0px 70px
    }
}

@media screen and (min-width: 1800px) {
    body#case-study-page-polyvibe #caseStudyContent .illustrations .info p {
        margin: 0px 0 0px 70px
    }
}

body#case-study-page-polyvibe #caseStudyContent .illustrations .infosmall {
    height: 200px
}

@media screen and (min-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .illustrations .infosmall {
        display: none
    }
}

body#case-study-page-polyvibe #caseStudyContent .illustrations .infosmall h2 {
    color: white;
    font-size: 30px;
    line-height: 35px;
    letter-spacing: 8px;
    font-weight: 500;
    text-align: center;
    text-transform: uppercase;
    margin: 0 auto
}

body#case-study-page-polyvibe #caseStudyContent .illustrations .infosmall p {
    color: white;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0px;
    text-align: center;
    font-weight: 200;
    width: 90%;
    margin: 20px auto 0
}

body#case-study-page-polyvibe #caseStudyContent .illustrations .sliderwrapper .slider-illus {
    width: 1126px;
    height: 77px;
    position: absolute;
    top: 475px;
    left: -446px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 130px;
    text-align: center
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .illustrations .sliderwrapper .slider-illus {
        left: -410px
    }
}

@media screen and (max-width: 370px) {
    body#case-study-page-polyvibe #caseStudyContent .illustrations .sliderwrapper .slider-illus {
        left: -420px
    }
}

body#case-study-page-polyvibe #caseStudyContent .illustrations .sliderwrapper .slider-illus::before {
    content: '';
    position: absolute;
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    width: 120px;
    z-index: 2;
    background: -moz-linear-gradient(left, #f7d14e 0%, rgba(247, 209, 77, 0) 100%);
    background: -webkit-linear-gradient(left, #f7d14e 0%, rgba(247, 209, 77, 0) 100%);
    background: linear-gradient(to right, #f7d14e 0%, rgba(247, 209, 77, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7d14e', endColorstr='#00f7d14d', GradientType=1)
}

body#case-study-page-polyvibe #caseStudyContent .illustrations .sliderwrapper .slider-illus::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 120px;
    z-index: 2;
    background: -moz-linear-gradient(left, rgba(247, 209, 77, 0) 0%, #f7d14e 100%);
    background: -webkit-linear-gradient(left, rgba(247, 209, 77, 0) 0%, #f7d14e 100%);
    background: linear-gradient(to right, rgba(247, 209, 77, 0) 0%, #f7d14e 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00f7d14d', endColorstr='#f7d14e', GradientType=1)
}

@media screen and (max-width: 480px) {
    body#case-study-page-polyvibe #caseStudyContent .illustrations .sliderwrapper .slider-illus {
        -webkit-transform: scale(0.8) translateX(-21px);
        transform: scale(0.8) translateX(-21px);
        margin-bottom: 60px
    }
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .illustrations .sliderwrapper .slider-illus {
        margin-bottom: 0
    }
}

@media screen and (min-width: 480px) and (max-width: 737px) {
    body#case-study-page-polyvibe #caseStudyContent .illustrations .sliderwrapper .slider-illus {
        margin-top: 60px;
        margin-bottom: 60px
    }
}

@media screen and (max-width: 370px) {
    body#case-study-page-polyvibe #caseStudyContent .illustrations .sliderwrapper .slider-illus {
        -webkit-transform: scale(0.8) translateX(-6px);
        transform: scale(0.8) translateX(-6px);
        margin-bottom: 60px
    }
}

body#case-study-page-polyvibe #caseStudyContent .illustrations .sliderwrapper .slider-illus .slick-list,
body#case-study-page-polyvibe #caseStudyContent .illustrations .sliderwrapper .slider-illus .slick-track,
body#case-study-page-polyvibe #caseStudyContent .illustrations .sliderwrapper .slider-illus .slick-slide {
    height: 100%
}

body#case-study-page-polyvibe #caseStudyContent .illustrations .sliderwrapper .slider-illus .ui-demo {
    width: 74px;
    height: 74px;
    display: block
}

body#case-study-page-polyvibe #caseStudyContent .illustrations .sliderwrapper .slider-illus .slide {
    width: 74px;
    height: 74px
}

body#case-study-page-polyvibe #caseStudyContent .illustrations .sliderwrapper .slider-illus .slide img {
    width: 74px;
    height: 74px;
    display: block
}

body#case-study-page-polyvibe #caseStudyContent .illustrations .sliderwrapper .slider-illus .slick-dots {
    display: block;
    position: absolute;
    top: 333px;
    left: 357px;
    margin-top: 0px;
    margin-bottom: 0px
}

body#case-study-page-polyvibe #caseStudyContent .illustrations .sliderwrapper .slider-illus .slick-dots li {
    margin-left: 10px;
    margin-right: 10px;
    width: 15px;
    height: 2px
}

body#case-study-page-polyvibe #caseStudyContent .illustrations .sliderwrapper .slider-illus .slick-dots li button {
    width: 15px;
    height: 2px;
    padding: 0;
    margin: 0 7px;
    text-indent: 9999px;
    overflow: hidden;
    background: #68686E;
    transition: all .3s ease
}

body#case-study-page-polyvibe #caseStudyContent .illustrations .sliderwrapper .slider-illus .slick-dots li.slick-active button {
    background: white
}

body#case-study-page-polyvibe #caseStudyContent .illustrations .sliderwrapper .slider-illus img {
    width: 261px;
    height: 465px
}

body#case-study-page-polyvibe #caseStudyContent .illustrations .sliderwrapper img {
    width: 590px;
    height: 823px;
    margin-top: 0px
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .illustrations .sliderwrapper img {
        margin-left: -35%
    }
}

@media screen and (max-width: 370px) {
    body#case-study-page-polyvibe #caseStudyContent .illustrations .sliderwrapper img {
        margin-left: -40%
    }
}

body#case-study-page-polyvibe #caseStudyContent .illustrations .sliderwrapper img.controls {
    width: 413px;
    height: 164px;
    position: absolute;
    bottom: 190px;
    left: 105px
}

@media screen and (max-width: 370px) {
    body#case-study-page-polyvibe #caseStudyContent .illustrations .sliderwrapper img.controls {
        margin-left: -37%
    }
}

body#case-study-page-polyvibe #caseStudyContent .try {
    background: #F1F1F3 url(/assets/case-studies/polyvibe/try-bkg-eaf1ab7a760eceb8b195ff89f568c7a7e902ade35f65014895a8482e2073071a.png) no-repeat center bottom;
    background-size: contain
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .try {
        background: #F1F1F3 url(/assets/case-studies/polyvibe/try-bkg-eaf1ab7a760eceb8b195ff89f568c7a7e902ade35f65014895a8482e2073071a.png) no-repeat center bottom;
        height: 550px
    }
}

body#case-study-page-polyvibe #caseStudyContent .try .image .iphone {
    width: 380px;
    height: 524px;
    display: block;
    margin: 146px auto 0
}

@media screen and (min-width: 1400px) {
    body#case-study-page-polyvibe #caseStudyContent .try .image .iphone {
        margin: 146px 0 0 8%
    }
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .try .image .iphone {
        margin: 30px 0 0;
        position: absolute;
        right: 0
    }
}

body#case-study-page-polyvibe #caseStudyContent .try .info h2 {
    color: #0C2044;
    font-size: 48px;
    line-height: 48px;
    letter-spacing: 0px;
    font-weight: 200;
    margin: 240px 0 40px
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .try .info h2 {
        margin: 130px 0 40px;
        font-size: 30px;
        line-height: 36px
    }
}

body#case-study-page-polyvibe #caseStudyContent .try .info .badge {
    width: 201px;
    height: 58px
}

@media screen and (max-width: 736px) {
    body#case-study-page-polyvibe #caseStudyContent .try .info .badge {
        width: 150px;
        height: auto
    }
}

.modalindi {
    opacity: 0;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    height: 0;
    overflow: auto;
    background-color: black;
    background-color: rgba(0, 0, 0, 0.4);
    transition: 0.5s opacity ease
}

.modalindi .modalindi-content {
    background-color: #000;
    margin: 100px auto;
    padding: 20px;
    border: 1px solid #888;
    width: 55%
}

.modalindi .modalindi-content .closeMicro {
    color: #6A676C;
    float: right;
    font-size: 28px;
    font-weight: bold
}

.modalindi .modalindi-content .closeMicro:hover,
.modalindi .modalindi-content .closeMicro:focus {
    color: black;
    text-decoration: none;
    cursor: pointer
}

ul#items li#case-study-block-metacenter {
    background:
}

ul#items li#case-study-block-metacenter a {
    color: white
}

body#case-study-page-metacenter {
    color: white;
    background: #237a87
}

body#case-study-page-metacenter .preloader {
    background: #237a87
}

body#case-study-page-metacenter .preloader .bar {
    background: white
}

body#case-study-page-metacenter .preloader .bar:after {
    box-shadow: 0 0 4px white, 0 0 4px white, 0 0 4px white
}

body#case-study-page-metacenter #page {
    transform: none !important
}

body#case-study-page-metacenter .cs-head a {
    text-decoration: none;
    color: white
}

body#case-study-page-metacenter .cs-head .links a.contact {
    border-color: white
}

body#case-study-page-metacenter .cs-head .links a.contact:hover {
    color: white
}

body#case-study-page-metacenter .title-subtitle-stores h1 {
    color: white
}

body#case-study-page-metacenter .title-subtitle-stores h2 {
    color: white
}

body#case-study-page-metacenter .title-subtitle-stores .stores a {
    text-decoration: none;
    color: white
}

body#case-study-page-metacenter .more-case-studies {
    background-color: white;
    color: #98999D
}

body#case-study-page-metacenter .more-case-studies strong {
    color: #162B31
}

body#case-study-page-metacenter a.see-more-case-study svg path {
    stroke: #237a87;
    fill: #237a87
}

body#case-study-page-metacenter #caseStudyContent {
    background: white;
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
    overflow-y: auto
}

@media screen and (max-width: 736px) {
    body#case-study-page-metacenter #caseStudyContent {
        overflow-y: hidden
    }
}

body#case-study-page-metacenter #caseStudyContent .about-project-wrapper {
    background: white
}

body#case-study-page-metacenter #caseStudyContent .about-project {
    padding: 100px 30px;
    padding-left: 15px;
    padding-right: 15px
}

@media screen and (max-width: 736px) {
    body#case-study-page-metacenter #caseStudyContent .about-project {
        padding-left: 0;
        padding-right: 0;
        padding-top: 60px;
        padding-bottom: 60px
    }
}

body#case-study-page-metacenter #caseStudyContent .about-project table td:first-child,
body#case-study-page-metacenter #caseStudyContent .about-project tr td:first-child {
    color: #1A2B44
}

body#case-study-page-metacenter #caseStudyContent .about-project table td:last-child p,
body#case-study-page-metacenter #caseStudyContent .about-project tr td:last-child p {
    color: #1A2B44
}

@media screen and (max-width: 736px) {

    body#case-study-page-metacenter #caseStudyContent .about-project table td:first-child,
    body#case-study-page-metacenter #caseStudyContent .about-project tr td:first-child {
        font-size: 20px;
        line-height: 24px;
        text-align: center
    }

    body#case-study-page-metacenter #caseStudyContent .about-project table td:last-child p,
    body#case-study-page-metacenter #caseStudyContent .about-project tr td:last-child p {
        font-size: 16px !important;
        line-height: 23px !important;
        text-align: center
    }
}

body#case-study-page-metacenter #caseStudyContent .revamp {
    background: #1c8cac;
    padding-top: 120px;
    padding-bottom: 90px;
    text-align: center;
    position: relative
}

@media screen and (max-width: 992px) {
    body#case-study-page-metacenter #caseStudyContent .revamp {
        padding-top: 90px
    }
}

body#case-study-page-metacenter #caseStudyContent .revamp .white-stripe {
    width: 100vw;
    height: 60vh;
    max-height: 465px;
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    background: white;
    z-index: 2
}

@media screen and (max-width: 768px) {
    body#case-study-page-metacenter #caseStudyContent .revamp .white-stripe {
        height: 50vh
    }
}

body#case-study-page-metacenter #caseStudyContent .revamp h2 {
    color: white;
    font-weight: normal;
    font-size: 32px;
    letter-spacing: 6px;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 15px;
    position: relative;
    z-index: 3
}

body#case-study-page-metacenter #caseStudyContent .revamp p {
    color: white;
    font-weight: 300;
    font-size: 26px;
    line-height: 1.4;
    max-width: 620px;
    margin: 0 auto 50px
}

@media screen and (max-width: 992px) {
    body#case-study-page-metacenter #caseStudyContent .revamp p {
        font-size: 22px
    }
}

body#case-study-page-metacenter #caseStudyContent .revamp .before-after-window {
    position: relative;
    z-index: 3
}

@media screen and (max-width: 767px) {
    body#case-study-page-metacenter #caseStudyContent .revamp .before-after-window .topbar {
        display: none
    }
}

body#case-study-page-metacenter #caseStudyContent .revamp .before-after-window .topbar img {
    border-radius: 6px 6px 0 0;
    overflow: hidden;
    max-width: 100%;
    height: auto
}

body#case-study-page-metacenter #caseStudyContent .revamp .before-after-window .images {
    position: relative;
    box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.15)
}

body#case-study-page-metacenter #caseStudyContent .revamp .before-after-window .images .sizer img {
    opacity: 0;
    visibility: hidden;
    width: 100%;
    height: auto
}

body#case-study-page-metacenter #caseStudyContent .revamp .before-after-window .images .before,
body#case-study-page-metacenter #caseStudyContent .revamp .before-after-window .images .after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0
}

body#case-study-page-metacenter #caseStudyContent .revamp .before-after-window .images .before img,
body#case-study-page-metacenter #caseStudyContent .revamp .before-after-window .images .after img {
    width: 100%;
    height: auto;
    opacity: 0;
    visibility: hidden
}

body#case-study-page-metacenter #caseStudyContent .revamp .before-after-window .images .before {
    z-index: 4;
    background: #fff url(/assets/case-studies/metacenter/demo-old-dad2e53d4248e9567ddc079d6ae8b90618e1434750cc9ea2bc4446267e214a88.png) no-repeat left top/auto 100%
}

body#case-study-page-metacenter #caseStudyContent .revamp .before-after-window .images .after {
    z-index: 5
}

body#case-study-page-metacenter #caseStudyContent .revamp .before-after-window .images .after .mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    background: #fff url(/assets/case-studies/metacenter/demo-new-d46b1aba067c1b9b72b3c969c1269f438439bb0ee39bf063e28a61b06f992623.png) no-repeat right top/auto 100%
}

body#case-study-page-metacenter #caseStudyContent .revamp .before-after-window .handle {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin: 45px 0
}

body#case-study-page-metacenter #caseStudyContent .revamp .before-after-window .handle .labels {
    font-weight: normal;
    color: #30c7f3;
    font-size: 16px;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 2px 0
}

body#case-study-page-metacenter #caseStudyContent .revamp .before-after-window .handle .handle-control {
    width: 100%;
    margin: 0 20px;
    position: relative;
    z-index: 5
}

body#case-study-page-metacenter #caseStudyContent .revamp .before-after-window .handle .handle-control .filled-value {
    position: absolute;
    top: 50%;
    right: 0;
    bottom: auto;
    left: auto;
    height: 2px;
    background: #30c7f3;
    transform: translate3d(0, -50%, 0);
    pointer-events: none
}

body#case-study-page-metacenter #caseStudyContent .revamp .before-after-window .handle .handle-control input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent
}

body#case-study-page-metacenter #caseStudyContent .revamp .before-after-window .handle .handle-control input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none
}

body#case-study-page-metacenter #caseStudyContent .revamp .before-after-window .handle .handle-control input[type=range]:focus {
    outline: none
}

body#case-study-page-metacenter #caseStudyContent .revamp .before-after-window .handle .handle-control input[type=range]::-ms-track {
    width: 100%;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent
}

body#case-study-page-metacenter #caseStudyContent .revamp .before-after-window .handle .handle-control input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 1px solid #30c7f3;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background: #30c7f3;
    cursor: pointer;
    margin-top: -10.5px;
    box-shadow: none
}

body#case-study-page-metacenter #caseStudyContent .revamp .before-after-window .handle .handle-control input[type=range]::-moz-range-thumb {
    box-shadow: none;
    border: 1px solid #30c7f3;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background: #30c7f3;
    cursor: pointer
}

body#case-study-page-metacenter #caseStudyContent .revamp .before-after-window .handle .handle-control input[type=range]::-ms-thumb {
    box-shadow: none;
    border: 1px solid #30c7f3;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background: #30c7f3;
    cursor: pointer
}

body#case-study-page-metacenter #caseStudyContent .revamp .before-after-window .handle .handle-control input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    box-shadow: none;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 0;
    border: 0
}

body#case-study-page-metacenter #caseStudyContent .revamp .before-after-window .handle .handle-control input[type=range]:focus::-webkit-slider-runnable-track {
    background-color: rgba(0, 0, 0, 0.2)
}

body#case-study-page-metacenter #caseStudyContent .revamp .before-after-window .handle .handle-control input[type=range]::-moz-range-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    box-shadow: none;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0;
    border: 0
}

body#case-study-page-metacenter #caseStudyContent .revamp .before-after-window .handle .handle-control input[type=range]::-ms-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    border-width: 24px 0;
    color: transparent
}

body#case-study-page-metacenter #caseStudyContent .revamp .before-after-window .handle .handle-control input[type=range]::-ms-fill-lower {
    background: rgba(0, 0, 0, 0.2);
    border: 0;
    border-radius: 0;
    box-shadow: none
}

body#case-study-page-metacenter #caseStudyContent .revamp .before-after-window .handle .handle-control input[type=range]:focus::-ms-fill-lower {
    background: rgba(0, 0, 0, 0.2)
}

body#case-study-page-metacenter #caseStudyContent .revamp .before-after-window .handle .handle-control input[type=range]::-ms-fill-upper {
    background: rgba(0, 0, 0, 0.2);
    border: 0;
    border-radius: 0;
    box-shadow: none
}

body#case-study-page-metacenter #caseStudyContent .revamp .before-after-window .handle .handle-control input[type=range]:focus::-ms-fill-upper {
    background: rgba(0, 0, 0, 0.2)
}

body#case-study-page-metacenter #caseStudyContent .overview {
    position: relative
}

body#case-study-page-metacenter #caseStudyContent .overview .blue-stripe {
    width: 100vw;
    height: 60vh;
    max-height: 400px;
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    background: #1c8cac;
    z-index: 2
}

@media screen and (max-width: 768px) {
    body#case-study-page-metacenter #caseStudyContent .overview .blue-stripe {
        height: 30vh
    }
}

body#case-study-page-metacenter #caseStudyContent .overview .excerpt {
    text-align: center
}

body#case-study-page-metacenter #caseStudyContent .overview h2 {
    margin-top: 0;
    margin-bottom: 40px;
    color: #485461;
    font-weight: normal;
    font-size: 32px;
    letter-spacing: 7px;
    text-transform: uppercase
}

body#case-study-page-metacenter #caseStudyContent .overview p {
    color: #485461;
    font-weight: 300;
    font-size: 26px;
    line-height: 1.4
}

@media screen and (max-width: 992px) {
    body#case-study-page-metacenter #caseStudyContent .overview p {
        font-size: 22px
    }
}

body#case-study-page-metacenter #caseStudyContent .overview-image {
    text-align: center;
    position: relative;
    z-index: 5;
    margin-top: 45px
}

body#case-study-page-metacenter #caseStudyContent .overview-image-inner {
    background: white;
    padding: 30px;
    box-shadow: 0 10px 60px -10px rgba(72, 84, 97, 0.3);
    border-radius: 12px
}

body#case-study-page-metacenter #caseStudyContent .overview-image-inner svg {
    width: 100%;
    height: auto
}

body#case-study-page-metacenter #caseStudyContent .overview-image img {
    max-width: 100% !important;
    height: auto !important
}

body#case-study-page-metacenter #caseStudyContent .characteristics {
    background: #1c8cac;
    padding-top: 60px;
    padding-bottom: 120px;
    text-align: center
}

@media screen and (max-width: 992px) {
    body#case-study-page-metacenter #caseStudyContent .characteristics {
        padding-bottom: 60px
    }
}

body#case-study-page-metacenter #caseStudyContent .characteristics h2 {
    color: white;
    font-weight: normal;
    font-size: 32px;
    letter-spacing: 6px;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 15px
}

body#case-study-page-metacenter #caseStudyContent .characteristics-item {
    display: flex;
    flex-direction: row;
    margin-top: 15px;
    margin-bottom: 15px;
    text-align: left;
    align-content: flex-start;
    align-items: center
}

body#case-study-page-metacenter #caseStudyContent .characteristics-item-image {
    margin-right: 30px;
    display: flex;
    width: 72px;
    height: 62px
}

body#case-study-page-metacenter #caseStudyContent .characteristics-item-image img {
    max-width: 100%;
    height: auto;
    margin: auto
}

body#case-study-page-metacenter #caseStudyContent .characteristics-item p {
    width: 100%;
    color: white;
    font-weight: 300;
    font-size: 18px;
    line-height: 1.333;
    margin: 0 20px 0 15px
}

@media screen and (max-width: 1024px) {
    body#case-study-page-metacenter #caseStudyContent .characteristics-item p {
        margin: 0
    }
}

body#case-study-page-metacenter #caseStudyContent .personas {
    padding-top: 25px;
    padding-bottom: 25px;
    text-align: center
}

@media screen and (max-width: 992px) {
    body#case-study-page-metacenter #caseStudyContent .personas {
        padding-top: 90px;
        padding-bottom: 60px
    }
}

body#case-study-page-metacenter #caseStudyContent .personas .excerpt h2 {
    color: #212121;
    font-weight: normal;
    font-size: 32px;
    letter-spacing: 6px;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 15px;
    position: relative;
    z-index: 3
}

body#case-study-page-metacenter #caseStudyContent .personas .excerpt h2::before {
    content: '';
    width: 88px;
    height: 8px;
    background: #30c7f3;
    position: absolute;
    top: -16px;
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translate3d(-50%, 0, 0)
}

body#case-study-page-metacenter #caseStudyContent .personas .excerpt p {
    color: #1a2b44;
    font-weight: 300;
    font-size: 22px;
    line-height: 1.4;
    margin: 0 auto 50px
}

@media screen and (max-width: 992px) {
    body#case-study-page-metacenter #caseStudyContent .personas .excerpt p {
        font-size: 22px
    }
}

body#case-study-page-metacenter #caseStudyContent .personas-card {
    margin-top: 30px;
    margin-bottom: 30px
}

body#case-study-page-metacenter #caseStudyContent .personas-card-inner {
    box-shadow: 0 10px 60px -10px rgba(72, 84, 97, 0.3);
    border-radius: 6px;
    background-color: white;
    padding: 45px;
    text-align: left
}

@media screen and (max-width: 1024px) {
    body#case-study-page-metacenter #caseStudyContent .personas-card-inner {
        padding: 15px
    }
}

body#case-study-page-metacenter #caseStudyContent .personas-card-inner h2 {
    color: #152737;
    font-weight: 700;
    font-size: 28px;
    margin: 0 0 15px;
    text-transform: capitalize
}

body#case-study-page-metacenter #caseStudyContent .personas-card-inner p {
    color: #1a2b44;
    font-weight: 300;
    font-size: 22px;
    line-height: 1.4;
    margin: 0 0 15px
}

body#case-study-page-metacenter #caseStudyContent .personas-card-inner a {
    color: #30c7f3;
    font-weight: normal;
    font-size: 20px;
    line-height: 1.2;
    text-decoration: none
}

@media screen and (max-width: 992px) {
    body#case-study-page-metacenter #caseStudyContent .personas-card-inner a {
        display: inline-block;
        margin-bottom: 15px
    }
}

body#case-study-page-metacenter #caseStudyContent .personas-card-inner a img {
    display: inline-block;
    margin-right: 10px;
    position: relative;
    top: -1px
}

body#case-study-page-metacenter #caseStudyContent .personas-card-inner a span {
    border-bottom: 1px solid currentColor
}

body#case-study-page-metacenter #caseStudyContent .personas-card-inner a:hover {
    text-decoration: none;
    opacity: .8
}

body#case-study-page-metacenter #caseStudyContent .personas-card-inner .label {
    color: white;
    font-weight: 600;
    font-size: 16px;
    padding: 8px;
    background: #1c8cac;
    border-radius: 8px;
    margin-right: 10px;
    margin-bottom: 12px;
    display: inline-block
}

body#case-study-page-metacenter #caseStudyContent .moodboard {
    padding-top: 0;
    padding-bottom: 120px;
    text-align: center
}

@media screen and (max-width: 992px) {
    body#case-study-page-metacenter #caseStudyContent .moodboard {
        padding-bottom: 0
    }
}

body#case-study-page-metacenter #caseStudyContent .moodboard .excerpt h2 {
    color: #212121;
    font-weight: normal;
    font-size: 32px;
    letter-spacing: 6px;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 15px;
    position: relative;
    z-index: 3
}

body#case-study-page-metacenter #caseStudyContent .moodboard .excerpt h2::before {
    content: '';
    width: 88px;
    height: 8px;
    background: #30c7f3;
    position: absolute;
    top: -16px;
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translate3d(-50%, 0, 0)
}

body#case-study-page-metacenter #caseStudyContent .moodboard .excerpt p {
    color: #1a2b44;
    font-weight: 300;
    font-size: 26px;
    line-height: 1.4;
    margin: 0 auto 50px
}

@media screen and (max-width: 992px) {
    body#case-study-page-metacenter #caseStudyContent .moodboard .excerpt p {
        font-size: 22px
    }
}

body#case-study-page-metacenter #caseStudyContent .moodboard-slider {
    overflow: visible
}

body#case-study-page-metacenter #caseStudyContent .moodboard-slider .slick-list {
    overflow: visible
}

body#case-study-page-metacenter #caseStudyContent .moodboard-slider .slide {
    padding-left: 30px;
    padding-right: 30px
}

@media screen and (max-width: 767px) {
    body#case-study-page-metacenter #caseStudyContent .moodboard-slider .slide {
        padding-left: 15px;
        padding-right: 15px
    }
}

body#case-study-page-metacenter #caseStudyContent .moodboard-slider .slide img {
    max-width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 0 50px -10px rgba(72, 84, 97, 0.6);
    overflow: hidden
}

body#case-study-page-metacenter #caseStudyContent .team {
    padding-top: 120px;
    padding-bottom: 120px;
    text-align: left;
    position: relative
}

@media screen and (max-width: 992px) {
    body#case-study-page-metacenter #caseStudyContent .team {
        padding-top: 60px;
        padding-bottom: 60px
    }
}

body#case-study-page-metacenter #caseStudyContent .team .dots-map {
    position: absolute;
    top: 0;
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translate3d(-50%, 0, 0)
}

@media screen and (max-width: 992px) {
    body#case-study-page-metacenter #caseStudyContent .team .dots-map {
        position: static;
        top: auto;
        left: auto;
        transform: none;
        margin-top: 30px;
        margin-bottom: 30px
    }
}

body#case-study-page-metacenter #caseStudyContent .team .dots-map svg {
    width: auto !important;
    height: 1060px !important
}

@media screen and (max-width: 992px) {
    body#case-study-page-metacenter #caseStudyContent .team .dots-map svg {
        width: 80% !important;
        max-width: 640px;
        margin: 0 auto;
        height: auto !important;
        display: block
    }
}

body#case-study-page-metacenter #caseStudyContent .team .excerpt {
    margin-top: 220px
}

@media screen and (max-width: 992px) {
    body#case-study-page-metacenter #caseStudyContent .team .excerpt {
        text-align: center;
        margin-top: 30px
    }
}

body#case-study-page-metacenter #caseStudyContent .team .excerpt h2 {
    color: #212121;
    font-weight: normal;
    font-size: 32px;
    letter-spacing: 6px;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 30px;
    position: relative;
    z-index: 3
}

body#case-study-page-metacenter #caseStudyContent .team .excerpt h2::before {
    content: '';
    width: 88px;
    height: 8px;
    background: #30c7f3;
    position: absolute;
    top: -16px;
    right: auto;
    bottom: auto;
    left: 0
}

@media screen and (max-width: 992px) {
    body#case-study-page-metacenter #caseStudyContent .team .excerpt h2::before {
        left: 50%;
        transform: translate3d(-50%, 0, 0)
    }
}

body#case-study-page-metacenter #caseStudyContent .team .excerpt p {
    color: #1a2b44;
    font-weight: 300;
    font-size: 18px;
    line-height: 1.4;
    margin: 0 auto 30px
}

body#case-study-page-metacenter #caseStudyContent .team .excerpt p:last-of-type {
    margin-bottom: 0
}

body#case-study-page-metacenter #caseStudyContent .team-cards-slider {
    margin-top: 45px;
    box-shadow: 0 2px 50px 10px rgba(72, 84, 97, 0.15);
    border-radius: 6px
}

body#case-study-page-metacenter #caseStudyContent .team-cards-slider .slide {
    border-radius: 6px;
    overflow: hidden
}

body#case-study-page-metacenter #caseStudyContent .team-cards-slider .slide img {
    width: 100%;
    height: auto
}

body#case-study-page-metacenter #caseStudyContent .team-cards-slider .slick-dots {
    margin-bottom: -20px
}

body#case-study-page-metacenter #caseStudyContent .team-cards-slider .slick-dots li {
    margin-left: 2px;
    margin-right: 2px
}

body#case-study-page-metacenter #caseStudyContent .team-cards-slider .slick-dots li button::before {
    font-size: 10px;
    color: rgba(0, 0, 0, 0.6)
}

body#case-study-page-metacenter #caseStudyContent .team-cards-slider .slick-dots li button:hover::before {
    color: rgba(48, 199, 243, 0.5)
}

body#case-study-page-metacenter #caseStudyContent .team-cards-slider .slick-dots li.slick-active button::before {
    color: #30c7f3
}

body#case-study-page-metacenter #caseStudyContent .team-cards-slider .slick-dots li.slick-active button:hover::before {
    color: #30c7f3
}

body#case-study-page-metacenter #caseStudyContent .outcome {
    padding-top: 60px;
    padding-bottom: 120px;
    text-align: center;
    background-color: #f6faff
}

@media screen and (max-width: 992px) {
    body#case-study-page-metacenter #caseStudyContent .outcome {
        padding-bottom: 60px
    }
}

body#case-study-page-metacenter #caseStudyContent .outcome-title img {
    width: calc(110vw);
    height: auto;
    position: relative;
    left: 50%;
    transform: translate3d(-50%, 0, 0)
}

body#case-study-page-metacenter #caseStudyContent .outcome .excerpt {
    margin-top: 120px;
    text-align: center
}

body#case-study-page-metacenter #caseStudyContent .outcome .excerpt h2 {
    color: #212121;
    font-weight: normal;
    font-size: 32px;
    letter-spacing: 6px;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 15px;
    position: relative;
    z-index: 3
}

body#case-study-page-metacenter #caseStudyContent .outcome .excerpt h2::before {
    content: '';
    width: 88px;
    height: 8px;
    background: #30c7f3;
    position: absolute;
    top: -16px;
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translate3d(-50%, 0, 0)
}

body#case-study-page-metacenter #caseStudyContent .outcome .excerpt p {
    color: #1a2b44;
    font-weight: 300;
    font-size: 26px;
    line-height: 1.4;
    margin: 0 auto 50px
}

@media screen and (max-width: 992px) {
    body#case-study-page-metacenter #caseStudyContent .outcome .excerpt p {
        font-size: 22px
    }
}

body#case-study-page-metacenter #caseStudyContent .outcome .icons-measurements {
    padding: 40px 30px;
    box-shadow: 0 10px 60px -10px rgba(72, 84, 97, 0.3);
    border-radius: 12px;
    background-color: #f6faff;
    overflow: hidden
}

body#case-study-page-metacenter #caseStudyContent .outcome .icons-measurements img {
    width: 100%;
    height: auto
}

body#case-study-page-metacenter #caseStudyContent .outcome .spacing {
    height: 432px;
    width: 100%;
    position: relative;
    overflow: visible;
    margin-top: 70px
}

@media screen and (max-width: 992px) {
    body#case-study-page-metacenter #caseStudyContent .outcome .spacing {
        margin-bottom: 30px
    }
}

@media screen and (max-width: 767px) {
    body#case-study-page-metacenter #caseStudyContent .outcome .spacing {
        height: 290px
    }
}

body#case-study-page-metacenter #caseStudyContent .outcome .spacing img {
    height: 100%;
    width: auto;
    position: absolute;
    top: 0;
    right: 100px;
    bottom: auto;
    left: auto
}

body#case-study-page-metacenter #caseStudyContent .outcome .card {
    padding: 30px;
    box-shadow: 0 10px 60px -10px rgba(72, 84, 97, 0.3);
    border-radius: 12px;
    background-color: #f6faff;
    overflow: hidden;
    text-align: left
}

@media screen and (max-width: 1140px) {
    body#case-study-page-metacenter #caseStudyContent .outcome .card {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important
    }
}

body#case-study-page-metacenter #caseStudyContent .outcome .card.has-top-line {
    margin-top: 210px;
    position: relative;
    overflow: visible
}

@media screen and (max-width: 992px) {
    body#case-study-page-metacenter #caseStudyContent .outcome .card.has-top-line {
        margin-top: 120px
    }
}

body#case-study-page-metacenter #caseStudyContent .outcome .card.has-top-line::before {
    content: '';
    width: 2px;
    height: 170px;
    background: #979797;
    position: absolute;
    top: -195px;
    right: auto;
    bottom: auto;
    left: 50%;
    margin-left: -1px
}

@media screen and (max-width: 992px) {
    body#case-study-page-metacenter #caseStudyContent .outcome .card.has-top-line::before {
        display: inline-block;
        height: 60px;
        top: -90px
    }
}

body#case-study-page-metacenter #caseStudyContent .outcome .card h3 {
    color: #1c8cac;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 24px;
    margin-top: 0;
    margin-bottom: 10px
}

body#case-study-page-metacenter #caseStudyContent .outcome .card p {
    color: #212121;
    font-weight: normal;
    font-size: 16px;
    letter-spacing: .5px;
    line-height: 1.4;
    margin: 0
}

body#case-study-page-metacenter #caseStudyContent .outcome .heights-detail {
    margin-top: 45px;
    margin-bottom: 45px
}

body#case-study-page-metacenter #caseStudyContent .outcome .heights-detail img {
    width: 100%;
    height: auto
}

@media screen and (max-width: 992px) {
    body#case-study-page-metacenter #caseStudyContent .outcome .color-palette {
        margin-top: 30px
    }
}

body#case-study-page-metacenter #caseStudyContent .outcome .color-palette img {
    width: 100%;
    height: auto
}

body#case-study-page-metacenter #caseStudyContent .outcome .icon-cards .slick-prev.slick-arrow {
    display: none
}

body#case-study-page-metacenter #caseStudyContent .outcome .icon-cards .slick-next.slick-arrow {
    color: transparent;
    background: transparent url(/assets/case-studies/metacenter/slide-arrow-ce09ce522cf852588e76988903565e4343e24aa9d2f9a3b452b690f0324bac89.svg) no-repeat center center/auto auto;
    width: 40px;
    height: 40px;
    right: -50px;
    margin-top: -15px
}

@media screen and (max-width: 1140px) {
    body#case-study-page-metacenter #caseStudyContent .outcome .icon-cards .slick-next.slick-arrow {
        display: none
    }
}

body#case-study-page-metacenter #caseStudyContent .outcome .icon-cards .slick-next.slick-arrow::before,
body#case-study-page-metacenter #caseStudyContent .outcome .icon-cards .slick-next.slick-arrow::after {
    display: none
}

body#case-study-page-metacenter #caseStudyContent .outcome .icon-cards .card {
    margin-top: 20px;
    margin-bottom: 15px;
    padding: 35px 30px;
    text-align: center;
    box-shadow: 0 2px 6px 1px rgba(153, 170, 187, 0.5);
    border-radius: 4px;
    background-color: #ffffff
}

body#case-study-page-metacenter #caseStudyContent .outcome .icon-cards .card img {
    display: block;
    margin: 0 auto
}

body#case-study-page-metacenter #caseStudyContent .outcome .icon-cards .labels {
    text-align: left
}

@media screen and (max-width: 1024px) {
    body#case-study-page-metacenter #caseStudyContent .outcome .icon-cards .labels {
        margin-bottom: 30px
    }
}

body#case-study-page-metacenter #caseStudyContent .outcome .icon-cards .labels strong,
body#case-study-page-metacenter #caseStudyContent .outcome .icon-cards .labels em {
    display: block;
    line-height: 1.6
}

body#case-study-page-metacenter #caseStudyContent .outcome .icon-cards .labels strong {
    color: #485461;
    font-size: 14px;
    font-weight: 600
}

body#case-study-page-metacenter #caseStudyContent .outcome .icon-cards .labels em {
    color: #485461;
    font-weight: 300;
    font-size: 12px;
    letter-spacing: .5px
}

body#case-study-page-metacenter #caseStudyContent .video {
    padding-top: 30px;
    padding-bottom: 90px;
    background-color: #f6faff
}

@media screen and (max-width: 767px) {
    body#case-study-page-metacenter #caseStudyContent .video {
        padding-top: 0
    }
}

body#case-study-page-metacenter #caseStudyContent .video video {
    width: 100%;
    height: auto;
    overflow: hidden;
    box-shadow: 0 0 60px -10px rgba(72, 84, 97, 0.3);
    border-radius: 6px;
    background-color: white
}

body#case-study-page-metacenter #caseStudyContent .dataflow {
    padding-top: 120px;
    padding-bottom: 60px;
    text-align: center
}

@media screen and (max-width: 992px) {
    body#case-study-page-metacenter #caseStudyContent .dataflow {
        padding-bottom: 30px
    }
}

body#case-study-page-metacenter #caseStudyContent .dataflow .excerpt {
    margin-bottom: 30px
}

body#case-study-page-metacenter #caseStudyContent .dataflow h2 {
    color: #212121;
    font-weight: normal;
    font-size: 32px;
    letter-spacing: 6px;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 15px;
    position: relative;
    z-index: 3
}

body#case-study-page-metacenter #caseStudyContent .dataflow h2::before {
    content: '';
    width: 88px;
    height: 8px;
    background: #30c7f3;
    position: absolute;
    top: -16px;
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translate3d(-50%, 0, 0)
}

body#case-study-page-metacenter #caseStudyContent .dataflow p {
    color: #1a2b44;
    font-weight: 300;
    font-size: 26px;
    line-height: 1.4;
    margin: 0 auto 50px
}

@media screen and (max-width: 992px) {
    body#case-study-page-metacenter #caseStudyContent .dataflow p {
        font-size: 22px
    }
}

body#case-study-page-metacenter #caseStudyContent .dataflow-graph-image img {
    width: 100%;
    height: auto
}

body#case-study-page-metacenter #caseStudyContent .conclusion {
    padding-top: 120px;
    padding-bottom: 120px;
    text-align: center;
    background-color: #f6faff
}

@media screen and (max-width: 992px) {
    body#case-study-page-metacenter #caseStudyContent .conclusion {
        padding-bottom: 60px;
        padding-bottom: 60px
    }
}

body#case-study-page-metacenter #caseStudyContent .conclusion .excerpt {
    margin-bottom: 30px
}

body#case-study-page-metacenter #caseStudyContent .conclusion h2 {
    color: #212121;
    font-weight: normal;
    font-size: 32px;
    letter-spacing: 6px;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 15px;
    position: relative;
    z-index: 3
}

body#case-study-page-metacenter #caseStudyContent .conclusion h2::before {
    content: '';
    width: 88px;
    height: 8px;
    background: #30c7f3;
    position: absolute;
    top: -16px;
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translate3d(-50%, 0, 0)
}

body#case-study-page-metacenter #caseStudyContent .conclusion p {
    color: #1a2b44;
    font-weight: 300;
    font-size: 26px;
    line-height: 1.4;
    margin: 0 auto 50px
}

@media screen and (max-width: 992px) {
    body#case-study-page-metacenter #caseStudyContent .conclusion p {
        font-size: 22px
    }
}

body#case-study-page-metacenter #caseStudyContent .conclusion .before-after-window {
    position: relative;
    z-index: 3
}

@media screen and (max-width: 767px) {
    body#case-study-page-metacenter #caseStudyContent .conclusion .before-after-window .topbar {
        display: none
    }
}

body#case-study-page-metacenter #caseStudyContent .conclusion .before-after-window .topbar img {
    border-radius: 6px 6px 0 0;
    overflow: hidden;
    max-width: 100%;
    height: auto
}

body#case-study-page-metacenter #caseStudyContent .conclusion .before-after-window .images {
    position: relative;
    box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.15)
}

body#case-study-page-metacenter #caseStudyContent .conclusion .before-after-window .images .sizer img {
    opacity: 0;
    visibility: hidden;
    width: 100%;
    height: auto
}

body#case-study-page-metacenter #caseStudyContent .conclusion .before-after-window .images .before,
body#case-study-page-metacenter #caseStudyContent .conclusion .before-after-window .images .after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0
}

body#case-study-page-metacenter #caseStudyContent .conclusion .before-after-window .images .before img,
body#case-study-page-metacenter #caseStudyContent .conclusion .before-after-window .images .after img {
    width: 100%;
    height: auto;
    opacity: 0;
    visibility: hidden
}

body#case-study-page-metacenter #caseStudyContent .conclusion .before-after-window .images .before {
    z-index: 4;
    background: #fff url(/assets/case-studies/metacenter/conclusion-old-386f0bf84225dda08eea760ca36e7af6f32ab52dbd8906349071deef5659885b.png) no-repeat left top/auto 100%
}

body#case-study-page-metacenter #caseStudyContent .conclusion .before-after-window .images .after {
    z-index: 5
}

body#case-study-page-metacenter #caseStudyContent .conclusion .before-after-window .images .after .mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    background: #fff url(/assets/case-studies/metacenter/conclusion-new-175bbcc8d945aafadbef99a7c71c041cddaa7e5c2132e8cad3df96b8a837fe27.png) no-repeat right top/auto 100%
}

body#case-study-page-metacenter #caseStudyContent .conclusion .before-after-window .handle {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin: 45px 0
}

body#case-study-page-metacenter #caseStudyContent .conclusion .before-after-window .handle .labels {
    font-weight: normal;
    color: #30c7f3;
    font-size: 16px;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 2px 0
}

body#case-study-page-metacenter #caseStudyContent .conclusion .before-after-window .handle .handle-control {
    width: 100%;
    margin: 0 20px;
    position: relative;
    z-index: 5
}

body#case-study-page-metacenter #caseStudyContent .conclusion .before-after-window .handle .handle-control .filled-value {
    position: absolute;
    top: 50%;
    right: 0;
    bottom: auto;
    left: auto;
    height: 2px;
    background: #30c7f3;
    transform: translate3d(0, -50%, 0);
    pointer-events: none
}

body#case-study-page-metacenter #caseStudyContent .conclusion .before-after-window .handle .handle-control input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent
}

body#case-study-page-metacenter #caseStudyContent .conclusion .before-after-window .handle .handle-control input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none
}

body#case-study-page-metacenter #caseStudyContent .conclusion .before-after-window .handle .handle-control input[type=range]:focus {
    outline: none
}

body#case-study-page-metacenter #caseStudyContent .conclusion .before-after-window .handle .handle-control input[type=range]::-ms-track {
    width: 100%;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent
}

body#case-study-page-metacenter #caseStudyContent .conclusion .before-after-window .handle .handle-control input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 1px solid #30c7f3;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background: #30c7f3;
    cursor: pointer;
    margin-top: -10.5px;
    box-shadow: none
}

body#case-study-page-metacenter #caseStudyContent .conclusion .before-after-window .handle .handle-control input[type=range]::-moz-range-thumb {
    box-shadow: none;
    border: 1px solid #30c7f3;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background: #30c7f3;
    cursor: pointer
}

body#case-study-page-metacenter #caseStudyContent .conclusion .before-after-window .handle .handle-control input[type=range]::-ms-thumb {
    box-shadow: none;
    border: 1px solid #30c7f3;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background: #30c7f3;
    cursor: pointer
}

body#case-study-page-metacenter #caseStudyContent .conclusion .before-after-window .handle .handle-control input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    box-shadow: none;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 0;
    border: 0
}

body#case-study-page-metacenter #caseStudyContent .conclusion .before-after-window .handle .handle-control input[type=range]:focus::-webkit-slider-runnable-track {
    background-color: rgba(0, 0, 0, 0.2)
}

body#case-study-page-metacenter #caseStudyContent .conclusion .before-after-window .handle .handle-control input[type=range]::-moz-range-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    box-shadow: none;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0;
    border: 0
}

body#case-study-page-metacenter #caseStudyContent .conclusion .before-after-window .handle .handle-control input[type=range]::-ms-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    border-width: 24px 0;
    color: transparent
}

body#case-study-page-metacenter #caseStudyContent .conclusion .before-after-window .handle .handle-control input[type=range]::-ms-fill-lower {
    background: rgba(0, 0, 0, 0.2);
    border: 0;
    border-radius: 0;
    box-shadow: none
}

body#case-study-page-metacenter #caseStudyContent .conclusion .before-after-window .handle .handle-control input[type=range]:focus::-ms-fill-lower {
    background: rgba(0, 0, 0, 0.2)
}

body#case-study-page-metacenter #caseStudyContent .conclusion .before-after-window .handle .handle-control input[type=range]::-ms-fill-upper {
    background: rgba(0, 0, 0, 0.2);
    border: 0;
    border-radius: 0;
    box-shadow: none
}

body#case-study-page-metacenter #caseStudyContent .conclusion .before-after-window .handle .handle-control input[type=range]:focus::-ms-fill-upper {
    background: rgba(0, 0, 0, 0.2)
}

body#case-study-page-metacenter #caseStudyContent .conclusion .ui-elements {
    margin-top: 60px;
    margin-bottom: 0
}

body#case-study-page-metacenter #caseStudyContent .conclusion .ui-elements img {
    width: 1768px;
    position: relative;
    left: 65%;
    transform: translate3d(-50%, 0, 0)
}

@media screen and (max-width: 767px) {
    body#case-study-page-metacenter #caseStudyContent .conclusion .ui-elements img {
        width: calc(150vw)
    }
}

.modalindi {
    opacity: 0;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    height: 0;
    overflow: auto;
    background-color: black;
    background-color: rgba(0, 0, 0, 0.4);
    transition: 0.5s opacity ease
}

.modalindi .modalindi-content {
    background-color: #000;
    margin: 100px auto;
    padding: 20px;
    border: 1px solid #888;
    width: 55%
}

.modalindi .modalindi-content .closeMicro {
    color: #6A676C;
    float: right;
    font-size: 28px;
    font-weight: bold
}

.modalindi .modalindi-content .closeMicro:hover,
.modalindi .modalindi-content .closeMicro:focus {
    color: black;
    text-decoration: none;
    cursor: pointer
}

[transform="matrix(1,0,0,1,92.25,92.25)"] path,
[transform="matrix(1,0,0,1,107.533,39.984)"] path {
    filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.15))
}

ul#items li#case-study-block-samsung_dev_conference {
    background: #085bba
}

ul#items li#case-study-block-samsung_dev_conference a {
    color: white
}

body#case-study-page-samsung_dev_conference {
    color: white;
    background: #085bba
}

body#case-study-page-samsung_dev_conference .preloader {
    background: #085bba
}

body#case-study-page-samsung_dev_conference .preloader .bar {
    background: white
}

body#case-study-page-samsung_dev_conference .preloader .bar:after {
    box-shadow: 0 0 4px white, 0 0 4px white, 0 0 4px white
}

body#case-study-page-samsung_dev_conference .cs-head a {
    text-decoration: none;
    color: white
}

body#case-study-page-samsung_dev_conference .cs-head .links a.contact {
    border-color: white
}

body#case-study-page-samsung_dev_conference .cs-head .links a.contact:hover {
    color: white
}

body#case-study-page-samsung_dev_conference .title-subtitle-stores h1 {
    color: white
}

body#case-study-page-samsung_dev_conference .title-subtitle-stores h2 {
    color: #6c9cd0
}

body#case-study-page-samsung_dev_conference .title-subtitle-stores .stores a {
    text-decoration: none;
    color: white
}

body#case-study-page-samsung_dev_conference .more-case-studies {
    background-color: #F7F7F7;
    color: #98999D
}

body#case-study-page-samsung_dev_conference .more-case-studies strong {
    color: #162B31
}

body#case-study-page-samsung_dev_conference a.see-more-case-study svg path {
    stroke: #085bba;
    fill: #085bba
}

body#case-study-page-samsung_dev_conference #caseStudyContent {
    background: white;
    padding-left: 0;
    padding-right: 0;
    overflow: hidden
}

@media screen and (max-width: 736px) {
    body#case-study-page-samsung_dev_conference #caseStudyContent {
        overflow-y: hidden
    }
}

body#case-study-page-samsung_dev_conference #caseStudyContent .about-project-wrapper {
    background: white
}

body#case-study-page-samsung_dev_conference #caseStudyContent .about-project {
    padding: 100px 30px;
    padding-left: 15px;
    padding-right: 15px
}

@media screen and (max-width: 736px) {
    body#case-study-page-samsung_dev_conference #caseStudyContent .about-project {
        padding-left: 0;
        padding-right: 0;
        padding-top: 60px;
        padding-bottom: 60px
    }
}

body#case-study-page-samsung_dev_conference #caseStudyContent .about-project table td:first-child,
body#case-study-page-samsung_dev_conference #caseStudyContent .about-project tr td:first-child {
    color: #1A2B44
}

body#case-study-page-samsung_dev_conference #caseStudyContent .about-project table td:last-child p,
body#case-study-page-samsung_dev_conference #caseStudyContent .about-project tr td:last-child p {
    color: #8b8d9e
}

@media screen and (max-width: 736px) {

    body#case-study-page-samsung_dev_conference #caseStudyContent .about-project table td:first-child,
    body#case-study-page-samsung_dev_conference #caseStudyContent .about-project tr td:first-child {
        font-size: 20px;
        line-height: 24px;
        text-align: center
    }

    body#case-study-page-samsung_dev_conference #caseStudyContent .about-project table td:last-child p,
    body#case-study-page-samsung_dev_conference #caseStudyContent .about-project tr td:last-child p {
        font-size: 16px !important;
        line-height: 23px !important;
        text-align: center
    }
}

body#case-study-page-samsung_dev_conference #caseStudyContent .drop-shadow {
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.25))
}

body#case-study-page-samsung_dev_conference #caseStudyContent .drop-shadow-child img {
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.25))
}

body#case-study-page-samsung_dev_conference #caseStudyContent .user-experience {
    padding-top: 90px;
    padding-bottom: 190px;
    background: transparent url(/assets/case-studies/samsung_dev_conference/ux-background-39bb42bb76748981dc55783eefb36a5893ec81c846eecff3669e33f65e3045f3.svg) no-repeat center center/100% auto
}

@media screen and (min-width: 1440px) {
    body#case-study-page-samsung_dev_conference #caseStudyContent .user-experience {
        padding-top: 160px;
        padding-bottom: 300px
    }
}

@media screen and (max-width: 1024px) {
    body#case-study-page-samsung_dev_conference #caseStudyContent .user-experience {
        background-size: auto 580px
    }
}

body#case-study-page-samsung_dev_conference #caseStudyContent .user-experience .excerpt {
    text-align: center
}

body#case-study-page-samsung_dev_conference #caseStudyContent .user-experience .excerpt h2 {
    color: white;
    font-weight: normal;
    font-size: 48px;
    letter-spacing: 1px;
    margin: 0 auto 30px
}

body#case-study-page-samsung_dev_conference #caseStudyContent .user-experience .excerpt p {
    color: white;
    font-weight: 300;
    font-size: 22px;
    line-height: 1.6;
    margin-bottom: 0
}

body#case-study-page-samsung_dev_conference #caseStudyContent .b-w-wireframes {
    position: relative
}

body#case-study-page-samsung_dev_conference #caseStudyContent .b-w-wireframes-image {
    position: relative;
    z-index: 2
}

body#case-study-page-samsung_dev_conference #caseStudyContent .b-w-wireframes-image img {
    width: 100%;
    height: auto
}

body#case-study-page-samsung_dev_conference #caseStudyContent .b-w-wireframes-divider img {
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    transform: translate3d(0, 50%, 0);
    z-index: 3
}

body#case-study-page-samsung_dev_conference #caseStudyContent .research {
    padding-top: 160px;
    padding-bottom: 60px
}

@media screen and (max-width: 768px) {
    body#case-study-page-samsung_dev_conference #caseStudyContent .research {
        padding-top: 30px;
        padding-bottom: 0
    }
}

body#case-study-page-samsung_dev_conference #caseStudyContent .research .excerpt {
    text-align: center
}

body#case-study-page-samsung_dev_conference #caseStudyContent .research .excerpt h2 {
    color: #42444e;
    font-weight: 300;
    font-size: 32px;
    letter-spacing: 1.33px
}

body#case-study-page-samsung_dev_conference #caseStudyContent .research-card {
    padding: 30px;
    margin-top: 40px;
    margin-bottom: 40px;
    box-shadow: 0 37px 72px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    background-color: white
}

body#case-study-page-samsung_dev_conference #caseStudyContent .research-card .icon {
    width: 70px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    margin: 0 auto 20px;
    background: rgba(7, 93, 187, 0.17);
    border-radius: 50%;
    position: relative;
    overflow: hidden
}

body#case-study-page-samsung_dev_conference #caseStudyContent .research-card .icon img {
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    display: inline-block
}

body#case-study-page-samsung_dev_conference #caseStudyContent .research-card h3 {
    color: #085bba;
    font-weight: normal;
    font-size: 24px;
    margin-top: 0;
    margin-bottom: 30px
}

body#case-study-page-samsung_dev_conference #caseStudyContent .research-card p {
    color: #8b8d9e;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.75;
    margin-bottom: 0
}

body#case-study-page-samsung_dev_conference #caseStudyContent .storyboard {
    padding-top: 60px
}

body#case-study-page-samsung_dev_conference #caseStudyContent .storyboard .excerpt {
    text-align: center
}

body#case-study-page-samsung_dev_conference #caseStudyContent .storyboard .excerpt h2 {
    color: #42444e;
    font-weight: 300;
    font-size: 32px;
    letter-spacing: 1.33px
}

body#case-study-page-samsung_dev_conference #caseStudyContent .storyboard-video {
    box-shadow: 0 48px 77px rgba(0, 0, 0, 0.25)
}

body#case-study-page-samsung_dev_conference #caseStudyContent .storyboard-video img,
body#case-study-page-samsung_dev_conference #caseStudyContent .storyboard-video video {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto
}

body#case-study-page-samsung_dev_conference #caseStudyContent .storyboard-background {
    padding-top: 60px;
    padding-bottom: 190px;
    background: transparent url(/assets/case-studies/samsung_dev_conference/minigraphics-501a7b11232223c035ebc507f05f8d4fafcf50ba652e814db10c1ee0fd681872.png) no-repeat center center/auto 100%
}

body#case-study-page-samsung_dev_conference #caseStudyContent .user-interface {
    padding-top: 90px;
    padding-bottom: 90px;
    margin-top: 45px;
    background: transparent url(/assets/case-studies/samsung_dev_conference/user-interface-header-8e33d635faaffb6fb5ea7342b97562443859f39ba2d7987173c6593f07911538.svg) no-repeat center top/100% auto
}

@media screen and (max-width: 1140px) {
    body#case-study-page-samsung_dev_conference #caseStudyContent .user-interface {
        background-size: auto 768px
    }
}

@media screen and (max-width: 768px) {
    body#case-study-page-samsung_dev_conference #caseStudyContent .user-interface {
        padding-top: 30px;
        padding-bottom: 0
    }
}

body#case-study-page-samsung_dev_conference #caseStudyContent .user-interface .excerpt {
    text-align: center;
    position: relative;
    z-index: 3;
    margin-bottom: 260px
}

@media screen and (min-width: 1440px) {
    body#case-study-page-samsung_dev_conference #caseStudyContent .user-interface .excerpt {
        margin-bottom: 420px
    }
}

@media screen and (max-width: 768px) {
    body#case-study-page-samsung_dev_conference #caseStudyContent .user-interface .excerpt {
        margin-bottom: 200px
    }
}

body#case-study-page-samsung_dev_conference #caseStudyContent .user-interface .excerpt h2 {
    color: white;
    font-weight: normal;
    font-size: 48px;
    letter-spacing: 1px;
    margin: 0 auto 30px
}

body#case-study-page-samsung_dev_conference #caseStudyContent .user-interface .excerpt p {
    color: white;
    font-weight: 300;
    font-size: 22px;
    line-height: 1.6;
    margin-bottom: 0
}

body#case-study-page-samsung_dev_conference #caseStudyContent .user-interface .ui-element-group {
    margin-bottom: 30px
}

body#case-study-page-samsung_dev_conference #caseStudyContent .user-interface .ui-element-group h3 {
    color: #42444e;
    font-weight: normal;
    font-size: 24px;
    letter-spacing: 1px;
    margin: 0 auto 20px
}

body#case-study-page-samsung_dev_conference #caseStudyContent .user-interface .ui-element-group h3.has-big-padding {
    padding: 0 25px
}

body#case-study-page-samsung_dev_conference #caseStudyContent .user-interface .ui-element-group h3.has-padding {
    padding: 0 15px
}

body#case-study-page-samsung_dev_conference #caseStudyContent .user-interface .ui-element-group h3.has-small-padding {
    padding: 0 10px
}

body#case-study-page-samsung_dev_conference #caseStudyContent .user-interface .ui-element-group h3.has-minimum-padding {
    padding: 0 5px
}

body#case-study-page-samsung_dev_conference #caseStudyContent .user-interface .ui-element-group img {
    width: 100%;
    height: auto
}

body#case-study-page-samsung_dev_conference #caseStudyContent .ui-elements {
    padding-top: 0;
    padding-bottom: 60px
}

body#case-study-page-samsung_dev_conference #caseStudyContent .ui-elements .excerpt {
    text-align: center;
    margin-bottom: 120px
}

@media screen and (max-width: 768px) {
    body#case-study-page-samsung_dev_conference #caseStudyContent .ui-elements .excerpt {
        margin-bottom: 30px
    }
}

body#case-study-page-samsung_dev_conference #caseStudyContent .ui-elements .excerpt h2 {
    color: #42444e;
    font-weight: normal;
    font-size: 48px;
    letter-spacing: 1px;
    margin: 0 auto 30px
}

body#case-study-page-samsung_dev_conference #caseStudyContent .ui-elements .excerpt p {
    color: #8b8d9e;
    font-weight: 300;
    font-size: 22px;
    line-height: 1.6;
    margin-bottom: 0
}

body#case-study-page-samsung_dev_conference #caseStudyContent .ui-elements-images h3 {
    color: #42444e;
    font-weight: 300;
    font-size: 40px;
    letter-spacing: 1px;
    padding-left: 94px
}

body#case-study-page-samsung_dev_conference #caseStudyContent .ui-elements-images img {
    width: 100%;
    height: auto;
    margin-top: -115px
}

@media screen and (max-width: 768px) {
    body#case-study-page-samsung_dev_conference #caseStudyContent .ui-elements-images img {
        margin-top: 0
    }
}

body#case-study-page-samsung_dev_conference #caseStudyContent .global-cards {
    padding-top: 220px;
    padding-bottom: 180px;
    background: transparent url(/assets/case-studies/samsung_dev_conference/cards-bg-513b0be955126032c042d614efb088086b80b50875a3d053e55db86860563ef7.png) no-repeat center top/100% auto
}

@media screen and (min-width: 1440px) {
    body#case-study-page-samsung_dev_conference #caseStudyContent .global-cards {
        background-size: 100% 100%
    }
}

@media screen and (max-width: 1140px) {
    body#case-study-page-samsung_dev_conference #caseStudyContent .global-cards {
        background-size: 100% 100%
    }
}

body#case-study-page-samsung_dev_conference #caseStudyContent .global-cards .excerpt {
    text-align: left;
    margin-bottom: 30px
}

body#case-study-page-samsung_dev_conference #caseStudyContent .global-cards .excerpt h2 {
    color: white;
    font-weight: normal;
    font-size: 48px;
    letter-spacing: 1px;
    margin: 0 auto 30px
}

@media screen and (max-width: 768px) {
    body#case-study-page-samsung_dev_conference #caseStudyContent .global-cards .excerpt h2 {
        text-align: center
    }
}

body#case-study-page-samsung_dev_conference #caseStudyContent .global-cards-image img {
    position: relative;
    left: 50%;
    width: 125vw;
    transform: translate3d(-50%, 0, 0)
}

body#case-study-page-samsung_dev_conference #caseStudyContent .global-cards-image-vertical {
    margin-top: 60px;
    margin-bottom: 60px
}

body#case-study-page-samsung_dev_conference #caseStudyContent .global-cards-image-vertical .slick-list {
    overflow: visible
}

body#case-study-page-samsung_dev_conference #caseStudyContent .global-cards-image-vertical .slick-slide {
    padding: 0 15px
}

body#case-study-page-samsung_dev_conference #caseStudyContent .global-cards-image-vertical img {
    max-width: 100%;
    max-height: 460px;
    margin: 0 auto;
    width: auto;
    display: block
}

body#case-study-page-samsung_dev_conference #caseStudyContent .global-cards-image-countdown {
    text-align: center;
    margin-bottom: 140px
}

body#case-study-page-samsung_dev_conference #caseStudyContent .global-cards-image-countdown img {
    width: 100%;
    max-width: 440px;
    height: auto
}

body#case-study-page-samsung_dev_conference #caseStudyContent .global-sliders {
    padding-bottom: 300px;
    background: transparent url(/assets/case-studies/samsung_dev_conference/sliders-bg-793989bfa32cbed9f71cc8b6749c64696c25ff1caf8698ae22dbd24b0d2c4a61.png) no-repeat -65px calc(50% + 20px)/auto 918px
}

@media screen and (max-width: 640px) {
    body#case-study-page-samsung_dev_conference #caseStudyContent .global-sliders {
        background: transparent;
        padding-bottom: 160px
    }
}

body#case-study-page-samsung_dev_conference #caseStudyContent .global-sliders .excerpt {
    text-align: left;
    margin-bottom: 30px
}

body#case-study-page-samsung_dev_conference #caseStudyContent .global-sliders .excerpt h2 {
    color: black;
    font-weight: normal;
    font-size: 48px;
    letter-spacing: 1px;
    margin: 0 auto 60px
}

@media screen and (max-width: 768px) {
    body#case-study-page-samsung_dev_conference #caseStudyContent .global-sliders .excerpt h2 {
        margin-bottom: 30px
    }
}

@media screen and (max-width: 768px) {
    body#case-study-page-samsung_dev_conference #caseStudyContent .global-sliders .excerpt h2 {
        text-align: center
    }
}

body#case-study-page-samsung_dev_conference #caseStudyContent .global-sliders-image img {
    width: 100%;
    height: auto
}

body#case-study-page-samsung_dev_conference #caseStudyContent .program {
    margin-top: -160px;
    padding-bottom: 90px
}

@media screen and (max-width: 768px) {
    body#case-study-page-samsung_dev_conference #caseStudyContent .program {
        margin-top: -100px
    }
}

body#case-study-page-samsung_dev_conference #caseStudyContent .program .excerpt {
    text-align: left;
    margin-bottom: 30px
}

body#case-study-page-samsung_dev_conference #caseStudyContent .program .excerpt h2 {
    color: black;
    font-weight: normal;
    font-size: 48px;
    letter-spacing: 1px;
    margin: 0 auto 30px
}

@media screen and (max-width: 768px) {
    body#case-study-page-samsung_dev_conference #caseStudyContent .program .excerpt h2 {
        text-align: center
    }
}

@media screen and (max-width: 768px) {
    body#case-study-page-samsung_dev_conference #caseStudyContent .program-image {
        padding-left: 30px;
        padding-right: 30px
    }
}

body#case-study-page-samsung_dev_conference #caseStudyContent .program-image img {
    width: 100%;
    height: auto
}

body#case-study-page-samsung_dev_conference #caseStudyContent .final-version {
    padding-top: 90px;
    padding-bottom: 90px;
    background: linear-gradient(to bottom, #1428A0 0%, #0882AA 100%)
}

body#case-study-page-samsung_dev_conference #caseStudyContent .final-version .excerpt {
    text-align: center;
    margin-bottom: 60px
}

@media screen and (max-width: 768px) {
    body#case-study-page-samsung_dev_conference #caseStudyContent .final-version .excerpt {
        padding-left: 30px;
        padding-right: 30px;
        margin-bottom: 60px
    }
}

body#case-study-page-samsung_dev_conference #caseStudyContent .final-version .excerpt h2 {
    color: white;
    font-weight: normal;
    font-size: 48px;
    letter-spacing: 1px;
    margin: 0 auto 30px
}

body#case-study-page-samsung_dev_conference #caseStudyContent .final-version .excerpt p {
    color: white;
    font-weight: 300;
    font-size: 22px;
    line-height: 1.6;
    margin-bottom: 0
}

body#case-study-page-samsung_dev_conference #caseStudyContent .final-version-tabs {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
    z-index: 3
}

body#case-study-page-samsung_dev_conference #caseStudyContent .final-version-tabs button {
    width: 100%;
    max-width: 190px;
    flex: 1 1 auto;
    padding: 20px;
    color: white;
    font-size: 18px;
    font-weight: 300;
    border: 0;
    background: transparent;
    border-radius: 3px;
    margin: 0 15px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%);
    transition: all .3s ease-in-out
}

body#case-study-page-samsung_dev_conference #caseStudyContent .final-version-tabs button::after {
    content: '';
    height: 3px;
    width: 100%;
    display: block;
    margin-top: 10px;
    background: white;
    transition: all .3s ease-in-out;
    opacity: 0
}

body#case-study-page-samsung_dev_conference #caseStudyContent .final-version-tabs button span {
    font-size: 28px;
    font-weight: 400;
    display: block;
    margin-bottom: 10px;
    line-height: 1
}

body#case-study-page-samsung_dev_conference #caseStudyContent .final-version-tabs button.active {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%)
}

body#case-study-page-samsung_dev_conference #caseStudyContent .final-version-tabs button.active::after {
    opacity: 1
}

body#case-study-page-samsung_dev_conference #caseStudyContent .final-version-panels .panel {
    padding-top: 30px
}

body#case-study-page-samsung_dev_conference #caseStudyContent .final-version-panels .panel img {
    width: 100%;
    height: auto
}

.modalindi {
    opacity: 0;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    height: 0;
    overflow: auto;
    background-color: black;
    background-color: rgba(0, 0, 0, 0.4);
    transition: 0.5s opacity ease
}

.modalindi .modalindi-content {
    background-color: #000;
    margin: 100px auto;
    padding: 20px;
    border: 1px solid #888;
    width: 55%
}

.modalindi .modalindi-content .closeMicro {
    color: #6A676C;
    float: right;
    font-size: 28px;
    font-weight: bold
}

.modalindi .modalindi-content .closeMicro:hover,
.modalindi .modalindi-content .closeMicro:focus {
    color: black;
    text-decoration: none;
    cursor: pointer
}

ul#items li#case-study-block-cluey {
    background: #38d6c5
}

ul#items li#case-study-block-cluey a {
    color: white
}

body#case-study-page-cluey {
    color: white;
    background: #38d6c5
}

body#case-study-page-cluey .preloader {
    background: #38d6c5
}

body#case-study-page-cluey .preloader .bar {
    background: white
}

body#case-study-page-cluey .preloader .bar:after {
    box-shadow: 0 0 4px white, 0 0 4px white, 0 0 4px white
}

body#case-study-page-cluey .cs-head a {
    text-decoration: none;
    color: white
}

body#case-study-page-cluey .cs-head .links a.contact {
    border-color: white
}

body#case-study-page-cluey .cs-head .links a.contact:hover {
    color: white
}

body#case-study-page-cluey .title-subtitle-stores h1 {
    color: white
}

body#case-study-page-cluey .title-subtitle-stores h2 {
    color: white
}

body#case-study-page-cluey .title-subtitle-stores .stores a {
    text-decoration: none;
    color: white
}

body#case-study-page-cluey .more-case-studies {
    background-color: white;
    color: #98999D
}

body#case-study-page-cluey .more-case-studies strong {
    color: #162B31
}

body#case-study-page-cluey a.see-more-case-study svg path {
    stroke: #38d6c5;
    fill: #38d6c5
}

body#case-study-page-cluey #caseStudyContent {
    background: white;
    padding-left: 0;
    padding-right: 0;
    overflow: hidden
}

@media screen and (max-width: 736px) {
    body#case-study-page-cluey #caseStudyContent {
        overflow-y: hidden
    }
}

body#case-study-page-cluey #caseStudyContent .about-project-wrapper {
    background: white;
    background-color: rgba(250, 173, 1, 0.15)
}

body#case-study-page-cluey #caseStudyContent .about-project {
    padding: 150px 30px;
    padding-left: 15px;
    padding-right: 15px
}

@media screen and (max-width: 736px) {
    body#case-study-page-cluey #caseStudyContent .about-project {
        padding-left: 0;
        padding-right: 0;
        padding-top: 60px;
        padding-bottom: 60px
    }
}

body#case-study-page-cluey #caseStudyContent .about-project table td:first-child,
body#case-study-page-cluey #caseStudyContent .about-project tr td:first-child {
    color: #1A2B44
}

body#case-study-page-cluey #caseStudyContent .about-project table td:last-child p,
body#case-study-page-cluey #caseStudyContent .about-project tr td:last-child p {
    color: #1A2B44
}

@media screen and (max-width: 736px) {

    body#case-study-page-cluey #caseStudyContent .about-project table td:first-child,
    body#case-study-page-cluey #caseStudyContent .about-project tr td:first-child {
        font-size: 28px;
        line-height: 24px;
        text-align: center
    }

    body#case-study-page-cluey #caseStudyContent .about-project table td:last-child p,
    body#case-study-page-cluey #caseStudyContent .about-project tr td:last-child p {
        font-size: 16px !important;
        line-height: 23px !important;
        text-align: center
    }
}

body#case-study-page-cluey #caseStudyContent .branding {
    padding-top: 260px;
    padding-bottom: 260px;
    background: #fff url(/assets/case-studies/cluey/post-its-feeaee07b358264c70cf5d02a33c7c87f7d4a4d540087f0e2f9ef01f1604ba02.png) no-repeat center center;
    background-size: 1649px auto
}

@media screen and (max-width: 1024px) {
    body#case-study-page-cluey #caseStudyContent .branding {
        padding-top: 30px;
        padding-bottom: 30px
    }
}

body#case-study-page-cluey #caseStudyContent .branding .excerpt {
    text-align: center;
    max-width: 365px;
    margin-left: auto;
    margin-right: auto
}

body#case-study-page-cluey #caseStudyContent .branding h2 {
    margin-top: 0;
    color: #152737;
    font-weight: normal;
    font-size: 42px
}

@media screen and (max-width: 768px) {
    body#case-study-page-cluey #caseStudyContent .branding h2 {
        font-size: 38px
    }
}

body#case-study-page-cluey #caseStudyContent .branding p {
    color: #757c84;
    font-weight: normal;
    font-size: 22px;
    line-height: 1.25;
    margin-bottom: 0
}

body#case-study-page-cluey #caseStudyContent .image-3d {
    width: 100%;
    display: block
}

body#case-study-page-cluey #caseStudyContent .logo {
    padding-top: 160px;
    padding-bottom: 160px
}

@media screen and (max-width: 1024px) {
    body#case-study-page-cluey #caseStudyContent .logo {
        padding-top: 30px;
        padding-bottom: 30px
    }
}

body#case-study-page-cluey #caseStudyContent .boarding-pass {
    padding-top: 60px;
    padding-bottom: 290px;
    background: #fff url(/assets/case-studies/cluey/boarding-pass-image-cbd2bf19d1deecd70e2db8f45618e2af87d142230ec97a5c263d892aecd053bf.png) no-repeat;
    background-position: calc(100% + 15px) center;
    background-size: 700px auto
}

@media screen and (max-width: 1024px) {
    body#case-study-page-cluey #caseStudyContent .boarding-pass {
        padding-top: 30px;
        padding-bottom: 30px
    }
}

@media screen and (max-width: 991px) {
    body#case-study-page-cluey #caseStudyContent .boarding-pass {
        background-image: none
    }
}

@media screen and (min-width: 1280px) and (max-width: 1440px) {
    body#case-study-page-cluey #caseStudyContent .boarding-pass .excerpt {
        max-width: 320px
    }
}

body#case-study-page-cluey #caseStudyContent .boarding-pass h2 {
    margin-top: 0;
    color: #152737;
    font-weight: normal;
    font-size: 42px;
    line-height: 1
}

@media screen and (max-width: 768px) {
    body#case-study-page-cluey #caseStudyContent .boarding-pass h2 {
        text-align: center;
        font-size: 38px
    }
}

body#case-study-page-cluey #caseStudyContent .boarding-pass p {
    color: #757c84;
    font-weight: normal;
    font-size: 22px;
    line-height: 1.25;
    margin-bottom: 0
}

@media screen and (max-width: 768px) {
    body#case-study-page-cluey #caseStudyContent .boarding-pass p {
        text-align: center
    }
}

body#case-study-page-cluey #caseStudyContent .boarding-pass .boarding-pass-img {
    margin-top: 30px;
    position: relative;
    left: 60px
}

body#case-study-page-cluey #caseStudyContent .colors .colors-image {
    width: 90%;
    margin-top: -220px;
    z-index: 3;
    position: relative
}

@media screen and (max-width: 1024px) {
    body#case-study-page-cluey #caseStudyContent .colors .colors-image {
        margin-top: 30px
    }
}

body#case-study-page-cluey #caseStudyContent .illustration {
    padding-top: 120px;
    padding-bottom: 30px;
    background: #faad01;
    text-align: center;
    margin-top: -90px;
    position: relative;
    z-index: 2
}

body#case-study-page-cluey #caseStudyContent .illustration .polaroids {
    position: absolute;
    top: 100%;
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translate(-50%, -50%)
}

@media screen and (max-width: 991px) {
    body#case-study-page-cluey #caseStudyContent .illustration .polaroids {
        display: none
    }
}

@media screen and (max-width: 1024px) {
    body#case-study-page-cluey #caseStudyContent .illustration {
        margin-top: -30px;
        padding-top: 60px;
        padding-bottom: 30px
    }
}

body#case-study-page-cluey #caseStudyContent .illustration h2 {
    margin-top: 0;
    color: white;
    font-weight: normal;
    font-size: 42px;
    margin-bottom: 15px;
    line-height: 1
}

@media screen and (max-width: 768px) {
    body#case-study-page-cluey #caseStudyContent .illustration h2 {
        font-size: 38px
    }
}

body#case-study-page-cluey #caseStudyContent .illustration p {
    color: white;
    font-weight: normal;
    font-size: 22px;
    line-height: 1.25;
    margin-bottom: 0;
    max-width: 768px;
    margin-left: auto;
    margin-right: auto
}

body#case-study-page-cluey #caseStudyContent .illustration .animated-svg {
    margin-top: 30px;
    transform: translate(0, 65%);
    max-width: calc(100% - 30px);
    text-align: center
}

@media screen and (min-width: 1024px) {
    body#case-study-page-cluey #caseStudyContent .illustration .animated-svg {
        max-height: 200px
    }
}

@media screen and (max-width: 991px) {
    body#case-study-page-cluey #caseStudyContent .illustration .animated-svg {
        transform: none
    }
}

body#case-study-page-cluey #caseStudyContent .illustration .animated-svg svg {
    width: 90%;
    height: auto;
    max-width: 440px
}

body#case-study-page-cluey #caseStudyContent .heroes {
    padding-top: 320px;
    padding-bottom: 60px
}

@media screen and (max-width: 991px) {
    body#case-study-page-cluey #caseStudyContent .heroes {
        padding-top: 30px;
        padding-bottom: 30px
    }
}

body#case-study-page-cluey #caseStudyContent .heroes .hero-carousel {
    position: relative
}

body#case-study-page-cluey #caseStudyContent .heroes .hero-carousel::before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 54.5762711864%
}

body#case-study-page-cluey #caseStudyContent .heroes .hero-carousel>.content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    border-radius: 4px
}

body#case-study-page-cluey #caseStudyContent .heroes .hero-carousel-indicators {
    text-align: center;
    margin-top: 15px
}

body#case-study-page-cluey #caseStudyContent .heroes .hero-carousel-indicator {
    height: 10px;
    width: 50px;
    margin: 15px 7.5px;
    position: relative;
    cursor: pointer;
    font-size: 0;
    color: transparent;
    opacity: .35;
    border: 0;
    background: 0
}

body#case-study-page-cluey #caseStudyContent .heroes .hero-carousel-indicator.is-active {
    opacity: 1
}

body#case-study-page-cluey #caseStudyContent .heroes .hero-carousel-indicator::before {
    content: '';
    height: 2px;
    width: 100%;
    position: absolute;
    top: 50%;
    right: auto;
    bottom: auto;
    left: 0;
    margin-top: -1px;
    background: #faad01
}

body#case-study-page-cluey #caseStudyContent .elements {
    padding-top: 60px;
    padding-bottom: 60px;
    background: white
}

@media screen and (max-width: 1024px) {
    body#case-study-page-cluey #caseStudyContent .elements {
        padding-top: 30px;
        padding-bottom: 30px
    }
}

body#case-study-page-cluey #caseStudyContent .elements .questionaire {
    margin-top: 15px
}

body#case-study-page-cluey #caseStudyContent .elements h2 {
    margin-top: 0;
    color: #152737;
    font-weight: normal;
    font-size: 42px;
    line-height: 1
}

@media screen and (max-width: 768px) {
    body#case-study-page-cluey #caseStudyContent .elements h2 {
        text-align: center;
        font-size: 38px
    }
}

body#case-study-page-cluey #caseStudyContent .elements p {
    color: #757c84;
    font-weight: normal;
    font-size: 22px;
    line-height: 1.25;
    margin-bottom: 0
}

@media screen and (max-width: 768px) {
    body#case-study-page-cluey #caseStudyContent .elements p {
        text-align: center
    }
}

body#case-study-page-cluey #caseStudyContent .desktop-phone {
    padding-top: 60px;
    padding-bottom: 60px;
    text-align: center
}

@media screen and (max-width: 1024px) {
    body#case-study-page-cluey #caseStudyContent .desktop-phone {
        padding-top: 30px
    }
}

body#case-study-page-cluey #caseStudyContent .conclussion {
    padding-top: 90px;
    padding-bottom: 60px;
    background: #faad01;
    text-align: center;
    position: relative
}

@media screen and (max-width: 1024px) {
    body#case-study-page-cluey #caseStudyContent .conclussion {
        padding-top: 60px;
        padding-bottom: 30px
    }
}

body#case-study-page-cluey #caseStudyContent .conclussion .beach-separator {
    position: absolute;
    top: 0;
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translate(-50%, -50%)
}

body#case-study-page-cluey #caseStudyContent .conclussion h2 {
    margin-top: 0;
    color: white;
    font-weight: normal;
    font-size: 42px;
    line-height: 1
}

@media screen and (max-width: 768px) {
    body#case-study-page-cluey #caseStudyContent .conclussion h2 {
        font-size: 38px
    }
}

body#case-study-page-cluey #caseStudyContent .conclussion p {
    color: white;
    font-weight: normal;
    font-size: 22px;
    line-height: 1.25;
    margin-bottom: 0
}

@media screen and (max-width: 1024px) {
    body#case-study-page-cluey #caseStudyContent .conclussion p {
        margin-bottom: 15px
    }
}

.modalindi {
    opacity: 0;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    height: 0;
    overflow: auto;
    background-color: black;
    background-color: rgba(0, 0, 0, 0.4);
    transition: 0.5s opacity ease
}

.modalindi .modalindi-content {
    background-color: #000;
    margin: 100px auto;
    padding: 20px;
    border: 1px solid #888;
    width: 55%
}

.modalindi .modalindi-content .closeMicro {
    color: #6A676C;
    float: right;
    font-size: 28px;
    font-weight: bold
}

.modalindi .modalindi-content .closeMicro:hover,
.modalindi .modalindi-content .closeMicro:focus {
    color: black;
    text-decoration: none;
    cursor: pointer
}

ul#items li#case-study-block-tigo {
    background: #2F3F8F
}

ul#items li#case-study-block-tigo a {
    color: white
}

body#case-study-page-tigo {
    color: white;
    background: #2F3F8F
}

body#case-study-page-tigo .preloader {
    background: #2F3F8F
}

body#case-study-page-tigo .preloader .bar {
    background: white
}

body#case-study-page-tigo .preloader .bar:after {
    box-shadow: 0 0 4px white, 0 0 4px white, 0 0 4px white
}

body#case-study-page-tigo .cs-head a {
    text-decoration: none;
    color: white
}

body#case-study-page-tigo .cs-head .links a.contact {
    border-color: white
}

body#case-study-page-tigo .cs-head .links a.contact:hover {
    color: #2F3F8F
}

body#case-study-page-tigo .title-subtitle-stores h1 {
    color: white
}

body#case-study-page-tigo .title-subtitle-stores h2 {
    color: #838EC5
}

body#case-study-page-tigo .title-subtitle-stores .stores a {
    text-decoration: none;
    color: white
}

body#case-study-page-tigo a.see-more-case-study svg path {
    stroke: #2F3F8F;
    fill: #2F3F8F
}

body#case-study-page-tigo #caseStudyContent {
    background: white;
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
    overflow-y: auto
}

body#case-study-page-tigo #caseStudyContent .about-project table td:first-child,
body#case-study-page-tigo #caseStudyContent .about-project tr td:first-child {
    color: #2F3F8F
}

body#case-study-page-tigo #caseStudyContent .about-project table td:last-child p,
body#case-study-page-tigo #caseStudyContent .about-project tr td:last-child p {
    color: #2F3F8F
}

@media screen and (max-width: 800px) {

    body#case-study-page-tigo #caseStudyContent .about-project table td:last-child p,
    body#case-study-page-tigo #caseStudyContent .about-project tr td:last-child p {
        width: 80%;
        margin: 30px auto 0;
        float: none;
        text-align: center
    }
}

body#case-study-page-tigo #caseStudyContent .intro-project {
    background: transparent url(/assets/case-studies/tigo/intro-05340201ff40cf4869bff5e0fc31413c381697b0ee04ca42a95a92bebedf6533.png) no-repeat center center/cover;
    height: 300px;
    position: relative;
    z-index: 10
}

@media screen and (min-width: 800px) {
    body#case-study-page-tigo #caseStudyContent .intro-project {
        height: 944px
    }
}

@media screen and (min-width: 1750px) {
    body#case-study-page-tigo #caseStudyContent .intro-project {
        height: 1180px
    }
}

@media screen and (min-width: 2300px) {
    body#case-study-page-tigo #caseStudyContent .intro-project {
        height: 1492px
    }
}

body#case-study-page-tigo #caseStudyContent .intro-project>.container {
    max-width: 1280px
}

body#case-study-page-tigo #caseStudyContent .logoredesign {
    position: relative;
    z-index: 3;
    margin-top: -118px;
    background: #2F3F8F url(/assets/case-studies/tigo/redesign-bkg-d5c200d0f5674f8a78b9786ed787f0d8c70a33c58097997f56aecb1d119207ef.jpg) no-repeat top center/cover
}

@media screen and (min-width: 1440px) {
    body#case-study-page-tigo #caseStudyContent .logoredesign {
        background: url(/assets/case-studies/tigo/redesign-stripe-bkg-f263504582278e3721c24d418b80343b797f86c943a997433f45935d387640ae.jpg) repeat-x top center/contain, url(/assets/case-studies/tigo/redesign-bkg-d5c200d0f5674f8a78b9786ed787f0d8c70a33c58097997f56aecb1d119207ef.jpg) no-repeat top center/contain
    }
}

body#case-study-page-tigo #caseStudyContent .logoredesign img {
    margin: auto;
    display: block
}

body#case-study-page-tigo #caseStudyContent .logoredesign h3 {
    margin: 20px auto 0;
    width: 80%;
    text-align: left;
    font-size: 36px;
    line-height: 38px;
    font-weight: 100;
    color: #fff
}

@media screen and (min-width: 800px) {
    body#case-study-page-tigo #caseStudyContent .logoredesign h3 {
        width: 100%;
        text-align: center;
        font-size: 52px;
        line-height: 62px
    }
}

body#case-study-page-tigo #caseStudyContent .logoredesign p {
    margin: 45px auto 50px auto;
    width: 80%;
    text-align: left;
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    color: #CACDD6
}

@media screen and (min-width: 800px) {
    body#case-study-page-tigo #caseStudyContent .logoredesign p {
        width: 60%;
        text-align: center;
        font-size: 18px;
        line-height: 28px
    }
}

body#case-study-page-tigo #caseStudyContent .logoredesign h4 {
    margin: 120px auto 0px auto;
    width: 80%;
    text-align: left;
    font-size: 16px;
    line-height: 26px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #E1A837
}

@media screen and (min-width: 800px) {
    body#case-study-page-tigo #caseStudyContent .logoredesign h4 {
        width: 100%;
        text-align: center;
        font-size: 18px;
        line-height: 22px
    }
}

body#case-study-page-tigo #caseStudyContent .logoredesign .logos-lines {
    margin-top: 20px
}

@media screen and (min-width: 800px) {
    body#case-study-page-tigo #caseStudyContent .logoredesign .logos-lines {
        margin-top: 120px
    }
}

body#case-study-page-tigo #caseStudyContent .logoredesign .logos-lines img {
    width: 726px;
    height: 269px
}

@media screen and (max-width: 750px) {
    body#case-study-page-tigo #caseStudyContent .logoredesign .logos-lines img {
        width: 80%;
        height: auto
    }
}

body#case-study-page-tigo #caseStudyContent .logoredesign .logos {
    margin-top: 30px;
    margin-bottom: 50px
}

@media screen and (min-width: 800px) {
    body#case-study-page-tigo #caseStudyContent .logoredesign .logos {
        margin-top: 100px;
        margin-bottom: 180px
    }
}

body#case-study-page-tigo #caseStudyContent .logoredesign .logos img {
    width: 757px;
    height: 299px
}

@media screen and (max-width: 750px) {
    body#case-study-page-tigo #caseStudyContent .logoredesign .logos img {
        width: 80%;
        height: auto
    }
}

body#case-study-page-tigo #caseStudyContent .concept-top {
    position: relative;
    z-index: 3;
    background: #202020
}

body#case-study-page-tigo #caseStudyContent .concept-top h3 {
    margin: 20px auto 0;
    width: 80%;
    text-align: left;
    font-size: 36px;
    line-height: 42px;
    font-weight: 100;
    color: #fff
}

@media screen and (min-width: 800px) {
    body#case-study-page-tigo #caseStudyContent .concept-top h3 {
        width: 100%;
        text-align: center;
        font-size: 52px;
        line-height: 62px
    }
}

body#case-study-page-tigo #caseStudyContent .concept-top p {
    margin: 45px auto 50px;
    width: 80%;
    text-align: left;
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    color: #CACDD6
}

@media screen and (min-width: 800px) {
    body#case-study-page-tigo #caseStudyContent .concept-top p {
        width: 60%;
        text-align: center;
        font-size: 18px;
        line-height: 28px
    }
}

body#case-study-page-tigo #caseStudyContent .concept-top h4 {
    margin: 40px auto 0px;
    width: 80%;
    text-align: left;
    font-size: 16px;
    line-height: 20px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #E1A837
}

@media screen and (min-width: 800px) {
    body#case-study-page-tigo #caseStudyContent .concept-top h4 {
        margin: 120px auto 0px;
        width: 100%;
        text-align: center;
        font-size: 18px;
        line-height: 22px
    }
}

body#case-study-page-tigo #caseStudyContent .concept-slide {
    position: relative;
    z-index: 3;
    background: #202020
}

body#case-study-page-tigo #caseStudyContent .concept-slide .slider1 {
    width: 66%;
    margin-left: auto;
    margin-right: auto
}

@media screen and (min-width: 800px) {
    body#case-study-page-tigo #caseStudyContent .concept-slide .slider1 {
        width: 700px
    }
}

body#case-study-page-tigo #caseStudyContent .concept-slide .slider1 .slide {
    opacity: 0.5;
    transition: all 0.3s ease
}

body#case-study-page-tigo #caseStudyContent .concept-slide .slider1 .slide img {
    width: 700px
}

body#case-study-page-tigo #caseStudyContent .concept-slide .slider1 .slide.slick-current {
    opacity: 1
}

body#case-study-page-tigo #caseStudyContent .concept-slide .slider1 .slick-prev-custom {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    left: -40px;
    display: block;
    width: 31px;
    height: 31px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
    transition: opacity .2s ease;
    opacity: 0.6
}

@media screen and (min-width: 800px) {
    body#case-study-page-tigo #caseStudyContent .concept-slide .slider1 .slick-prev-custom {
        left: -100px;
        width: 62px;
        height: 62px
    }
}

body#case-study-page-tigo #caseStudyContent .concept-slide .slider1 .slick-prev-custom img {
    width: 31px;
    height: 31px
}

@media screen and (min-width: 800px) {
    body#case-study-page-tigo #caseStudyContent .concept-slide .slider1 .slick-prev-custom img {
        width: 62px;
        height: 62px
    }
}

body#case-study-page-tigo #caseStudyContent .concept-slide .slider1 .slick-prev-custom:hover {
    opacity: 1
}

body#case-study-page-tigo #caseStudyContent .concept-slide .slider1 .slick-next-custom {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    right: -40px;
    display: block;
    width: 31px;
    height: 31px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
    transition: opacity .2s ease;
    opacity: 0.6
}

@media screen and (min-width: 800px) {
    body#case-study-page-tigo #caseStudyContent .concept-slide .slider1 .slick-next-custom {
        right: -101px;
        width: 62px;
        height: 62px
    }
}

body#case-study-page-tigo #caseStudyContent .concept-slide .slider1 .slick-next-custom img {
    width: 31px;
    height: 31px
}

@media screen and (min-width: 800px) {
    body#case-study-page-tigo #caseStudyContent .concept-slide .slider1 .slick-next-custom img {
        width: 62px;
        height: 62px
    }
}

body#case-study-page-tigo #caseStudyContent .concept-slide .slider1 .slick-next-custom:hover {
    opacity: 1
}

body#case-study-page-tigo #caseStudyContent .concept-slide .no-padding {
    padding-left: 0;
    padding-right: 0
}

body#case-study-page-tigo #caseStudyContent .concept {
    position: relative;
    z-index: 3;
    background: #202020 url(/assets/case-studies/tigo/big_bg-4f612a3ff739e24bfac307bafa4812c7bc03b1b620651d236202de25da4c9eb6.png) no-repeat bottom center/contain
}

body#case-study-page-tigo #caseStudyContent .concept h3 {
    margin: 20px auto 0;
    width: 80%;
    text-align: left;
    font-size: 52px;
    line-height: 62px;
    font-weight: 100;
    color: #fff
}

@media screen and (min-width: 800px) {
    body#case-study-page-tigo #caseStudyContent .concept h3 {
        width: 100%;
        text-align: center
    }
}

body#case-study-page-tigo #caseStudyContent .concept p {
    margin: 45px auto 50px auto;
    width: 80%;
    text-align: left;
    font-size: 18px;
    line-height: 28px;
    font-weight: 400;
    color: #CACDD6
}

@media screen and (min-width: 800px) {
    body#case-study-page-tigo #caseStudyContent .concept p {
        width: 60%;
        text-align: center
    }
}

body#case-study-page-tigo #caseStudyContent .concept h4 {
    margin: 120px auto 0px auto;
    width: 80%;
    text-align: left;
    font-size: 18px;
    line-height: 22px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #E1A837
}

@media screen and (min-width: 800px) {
    body#case-study-page-tigo #caseStudyContent .concept h4 {
        width: 100%;
        text-align: center
    }
}

body#case-study-page-tigo #caseStudyContent .concept p.left {
    margin: 45px auto 50px auto;
    width: 80%;
    text-align: left;
    font-size: 18px;
    line-height: 28px;
    font-weight: 400;
    color: #CACDD6
}

@media screen and (min-width: 800px) {
    body#case-study-page-tigo #caseStudyContent .concept p.left {
        width: 60%;
        text-align: center
    }
}

body#case-study-page-tigo #caseStudyContent .concept h4.left {
    margin: 55px auto 0px auto;
    display: block;
    width: 80%;
    text-align: left;
    font-size: 18px;
    line-height: 22px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #E1A837
}

@media screen and (min-width: 800px) {
    body#case-study-page-tigo #caseStudyContent .concept h4.left {
        width: 60%;
        text-align: center
    }
}

body#case-study-page-tigo #caseStudyContent .concept img.hex1 {
    width: 100px;
    height: auto;
    display: block;
    position: absolute;
    left: 0;
    z-index: 10;
    top: 500px
}

@media screen and (min-width: 750px) {
    body#case-study-page-tigo #caseStudyContent .concept img.hex1 {
        width: 429px;
        height: 472px;
        top: 630px
    }
}

body#case-study-page-tigo #caseStudyContent .concept img.onscreen {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    z-index: 1
}

@media screen and (min-width: 750px) {
    body#case-study-page-tigo #caseStudyContent .concept img.onscreen {
        height: 528px;
        width: 831px
    }
}

body#case-study-page-tigo #caseStudyContent .concept img.hex2 {
    width: 100px;
    height: auto;
    display: block;
    position: absolute;
    right: 0;
    z-index: 10;
    top: 500px
}

@media screen and (min-width: 750px) {
    body#case-study-page-tigo #caseStudyContent .concept img.hex2 {
        width: 407px;
        height: 567px;
        top: 0
    }
}

body#case-study-page-tigo #caseStudyContent .concept .headline1 img {
    width: 100%;
    height: auto;
    display: block;
    margin: 30px auto 0
}

@media screen and (min-width: 750px) {
    body#case-study-page-tigo #caseStudyContent .concept .headline1 img {
        width: 1073px;
        height: 143px;
        margin: 300px auto 0
    }
}

body#case-study-page-tigo #caseStudyContent .concept .headline2 img {
    width: 100%;
    height: auto;
    display: block;
    margin: 10px auto 30px
}

@media screen and (min-width: 750px) {
    body#case-study-page-tigo #caseStudyContent .concept .headline2 img {
        width: 1179px;
        height: 256px;
        margin: 100px auto 100px
    }
}

body#case-study-page-tigo #caseStudyContent .concept h5 {
    margin: 60px auto 50px auto;
    display: block;
    width: 60%;
    text-align: center;
    font-size: 25px;
    line-height: 25px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 5px;
    color: #fff
}

@media screen and (min-width: 750px) {
    body#case-study-page-tigo #caseStudyContent .concept h5 {
        margin: 50px auto 100px auto
    }
}

body#case-study-page-tigo #caseStudyContent .concept .standings img {
    width: 130%;
    height: auto;
    display: block;
    margin: 0 auto 0
}

@media screen and (min-width: 750px) {
    body#case-study-page-tigo #caseStudyContent .concept .standings img {
        width: 1162px;
        height: 1236px
    }
}

body#case-study-page-tigo #caseStudyContent .concept .next-game img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 100px
}

@media screen and (min-width: 750px) {
    body#case-study-page-tigo #caseStudyContent .concept .next-game img {
        width: 695px;
        height: 489px
    }
}

body#case-study-page-tigo #caseStudyContent .analistas {
    position: relative;
    z-index: 3;
    overflow: hidden;
    background: url(/assets/case-studies/tigo/big_bg_bottom-e310bffd07e476c890e5cee272df00e0585c9c6c632fc96a58882514e24c91d6.png) no-repeat top, url(/assets/case-studies/tigo/bkg-pattern-32ac66981eb660f7407a73b7fe5c46c0e306460b8fdbad218dc5b8310da325a1.png) repeat top center
}

@media screen and (min-width: 800px) {
    body#case-study-page-tigo #caseStudyContent .analistas {
        background: url(/assets/case-studies/tigo/big_bg_bottom-e310bffd07e476c890e5cee272df00e0585c9c6c632fc96a58882514e24c91d6.png) no-repeat top center/contain, url(/assets/case-studies/tigo/bkg-pattern-32ac66981eb660f7407a73b7fe5c46c0e306460b8fdbad218dc5b8310da325a1.png) repeat top center
    }
}

body#case-study-page-tigo #caseStudyContent .analistas h3 {
    margin: 35px auto 0 auto;
    width: 80%;
    text-align: left;
    font-size: 36px;
    line-height: 42px;
    font-weight: 100;
    color: #29B25B
}

@media screen and (min-width: 800px) {
    body#case-study-page-tigo #caseStudyContent .analistas h3 {
        width: 100%;
        text-align: center;
        font-size: 52px;
        line-height: 62px
    }
}

body#case-study-page-tigo #caseStudyContent .analistas p {
    margin: 45px auto 50px auto;
    width: 80%;
    text-align: left;
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    color: #2F3F8F
}

@media screen and (min-width: 800px) {
    body#case-study-page-tigo #caseStudyContent .analistas p {
        width: 60%;
        text-align: center;
        font-size: 18px;
        line-height: 28px
    }
}

body#case-study-page-tigo #caseStudyContent .analistas h4 {
    margin: 220px auto 0px auto;
    width: 80%;
    text-align: left;
    font-size: 16px;
    line-height: 22px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #4A4A4A
}

@media screen and (min-width: 800px) {
    body#case-study-page-tigo #caseStudyContent .analistas h4 {
        width: 100%;
        text-align: center;
        font-size: 18px;
        line-height: 22px;
        margin: 320px auto 0px auto
    }
}

body#case-study-page-tigo #caseStudyContent .analistas p.left {
    margin: 45px auto 50px auto;
    width: 80%;
    text-align: left;
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    color: #4E4D4A
}

@media screen and (min-width: 800px) {
    body#case-study-page-tigo #caseStudyContent .analistas p.left {
        width: 55%;
        text-align: center;
        font-size: 18px;
        line-height: 28px
    }
}

body#case-study-page-tigo #caseStudyContent .analistas h4.left {
    margin: 120px auto 0px auto;
    display: block;
    width: 80%;
    text-align: left;
    font-size: 18px;
    line-height: 22px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #29B25B
}

@media screen and (min-width: 800px) {
    body#case-study-page-tigo #caseStudyContent .analistas h4.left {
        width: 55%;
        text-align: center;
        font-size: 20px;
        line-height: 24px
    }
}

body#case-study-page-tigo #caseStudyContent .analistas .ui-slider {
    width: 100%;
    height: 557px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 130px;
    padding: 75px 12px 88px 23px;
    text-align: center
}

body#case-study-page-tigo #caseStudyContent .analistas .analistasimg img {
    width: 100%;
    height: auto;
    display: block;
    margin: 30px auto 0
}

@media screen and (min-width: 750px) {
    body#case-study-page-tigo #caseStudyContent .analistas .analistasimg img {
        width: 694px;
        height: 463px;
        margin: 130px auto 0
    }
}

body#case-study-page-tigo #caseStudyContent .analistas .analistasimg img.leftt,
body#case-study-page-tigo #caseStudyContent .analistas .analistasimg img.rightt {
    position: absolute
}

body#case-study-page-tigo #caseStudyContent .analistas .analistasimg img.leftt {
    position: absolute;
    top: -250px;
    left: 0px;
    width: 189px;
    height: 687px;
    display: none
}

@media screen and (min-width: 750px) {
    body#case-study-page-tigo #caseStudyContent .analistas .analistasimg img.leftt {
        display: block
    }
}

body#case-study-page-tigo #caseStudyContent .analistas .analistasimg img.rightt {
    position: absolute;
    top: -450px;
    right: 0px;
    width: 191px;
    height: 776px;
    display: none
}

@media screen and (min-width: 750px) {
    body#case-study-page-tigo #caseStudyContent .analistas .analistasimg img.rightt {
        display: block
    }
}

body#case-study-page-tigo #caseStudyContent .analistas .headline1 img {
    width: 100%;
    height: auto;
    display: block;
    margin: 50px auto 0
}

@media screen and (min-width: 750px) {
    body#case-study-page-tigo #caseStudyContent .analistas .headline1 img {
        width: 1040px;
        height: 143px;
        margin: 300px auto 0
    }
}

body#case-study-page-tigo #caseStudyContent .analistas .headline2 img {
    width: 100%;
    height: auto;
    display: block;
    margin: 30px auto 50px
}

@media screen and (min-width: 750px) {
    body#case-study-page-tigo #caseStudyContent .analistas .headline2 img {
        width: 1079px;
        height: 182px;
        margin: 100px auto 300px
    }
}

body#case-study-page-tigo #caseStudyContent .analistas .bottomline img {
    width: 100%;
    height: auto;
    position: absolute;
    bottom: -3px
}

@media screen and (min-width: 600px) {
    body#case-study-page-tigo #caseStudyContent .analistas .bottomline img {
        bottom: -5px
    }
}

@media screen and (min-width: 800px) {
    body#case-study-page-tigo #caseStudyContent .analistas .bottomline img {
        bottom: -7px
    }
}

@media screen and (min-width: 1000px) {
    body#case-study-page-tigo #caseStudyContent .analistas .bottomline img {
        bottom: -9px
    }
}

@media screen and (min-width: 1300px) {
    body#case-study-page-tigo #caseStudyContent .analistas .bottomline img {
        bottom: -11px
    }
}

@media screen and (min-width: 1500px) {
    body#case-study-page-tigo #caseStudyContent .analistas .bottomline img {
        bottom: -13px
    }
}

@media screen and (min-width: 1700px) {
    body#case-study-page-tigo #caseStudyContent .analistas .bottomline img {
        bottom: -14px
    }
}

@media screen and (min-width: 1900px) {
    body#case-study-page-tigo #caseStudyContent .analistas .bottomline img {
        bottom: -16px
    }
}

@media screen and (min-width: 2100px) {
    body#case-study-page-tigo #caseStudyContent .analistas .bottomline img {
        bottom: -18px
    }
}

body#case-study-page-tigo #caseStudyContent .analistas .slider2 {
    width: 66%;
    margin-left: auto;
    margin-right: auto
}

@media screen and (min-width: 800px) {
    body#case-study-page-tigo #caseStudyContent .analistas .slider2 {
        width: 700px
    }
}

body#case-study-page-tigo #caseStudyContent .analistas .slider2 .slide {
    opacity: 0.5;
    transition: all 0.3s ease
}

body#case-study-page-tigo #caseStudyContent .analistas .slider2 .slide img {
    width: 700px
}

body#case-study-page-tigo #caseStudyContent .analistas .slider2 .slide.slick-current {
    opacity: 1
}

body#case-study-page-tigo #caseStudyContent .analistas .slider2 .slick-prev-custom {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    left: -40px;
    display: block;
    width: 31px;
    height: 31px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
    transition: opacity .2s ease;
    opacity: 0.6
}

@media screen and (min-width: 800px) {
    body#case-study-page-tigo #caseStudyContent .analistas .slider2 .slick-prev-custom {
        left: -100px;
        width: 62px;
        height: 62px
    }
}

body#case-study-page-tigo #caseStudyContent .analistas .slider2 .slick-prev-custom img {
    width: 31px;
    height: 31px
}

@media screen and (min-width: 800px) {
    body#case-study-page-tigo #caseStudyContent .analistas .slider2 .slick-prev-custom img {
        width: 62px;
        height: 62px
    }
}

body#case-study-page-tigo #caseStudyContent .analistas .slider2 .slick-prev-custom:hover {
    opacity: 1
}

body#case-study-page-tigo #caseStudyContent .analistas .slider2 .slick-next-custom {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    right: -40px;
    display: block;
    width: 31px;
    height: 31px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
    transition: opacity .2s ease;
    opacity: 0.6
}

@media screen and (min-width: 800px) {
    body#case-study-page-tigo #caseStudyContent .analistas .slider2 .slick-next-custom {
        right: -101px;
        width: 62px;
        height: 62px
    }
}

body#case-study-page-tigo #caseStudyContent .analistas .slider2 .slick-next-custom img {
    width: 31px;
    height: 31px
}

@media screen and (min-width: 800px) {
    body#case-study-page-tigo #caseStudyContent .analistas .slider2 .slick-next-custom img {
        width: 62px;
        height: 62px
    }
}

body#case-study-page-tigo #caseStudyContent .analistas .slider2 .slick-next-custom:hover {
    opacity: 1
}

body#case-study-page-tigo #caseStudyContent .analistas .no-padding {
    padding-left: 0;
    padding-right: 0;
    width: 100%
}

@media screen and (min-width: 1200px) {
    body#case-study-page-tigo #caseStudyContent .analistas .container-analistas {
        width: 100%;
        max-width: 100%
    }
}

@media screen and (max-width: 768px) {
    body#case-study-page-tigo #caseStudyContent .about-project tr td:last-child p {
        font-size: 16px !important;
        line-height: 23px !important;
        text-align: center
    }
}

ul#items li#case-study-block-kibow {
    background: #07162f
}

ul#items li#case-study-block-kibow a {
    color: white
}

body#case-study-page-kibow {
    color: white;
    background: #07162f
}

body#case-study-page-kibow .preloader {
    background: #07162f
}

body#case-study-page-kibow .preloader .bar {
    background: white
}

body#case-study-page-kibow .preloader .bar:after {
    box-shadow: 0 0 4px white, 0 0 4px white, 0 0 4px white
}

body#case-study-page-kibow .cs-head a {
    text-decoration: none;
    color: white
}

body#case-study-page-kibow .cs-head .links a.contact {
    border-color: white
}

body#case-study-page-kibow .cs-head .links a.contact:hover {
    color: white
}

body#case-study-page-kibow .title-subtitle-stores h1 {
    color: white
}

body#case-study-page-kibow .title-subtitle-stores h2 {
    color: white
}

body#case-study-page-kibow .title-subtitle-stores .stores a {
    text-decoration: none;
    color: white
}

body#case-study-page-kibow .more-case-studies {
    background-color: white;
    color: #98999D
}

body#case-study-page-kibow .more-case-studies strong {
    color: #162B31
}

body#case-study-page-kibow a.see-more-case-study svg path {
    stroke: #07162f;
    fill: #07162f
}

body#case-study-page-kibow #caseStudyContent {
    background: white;
    padding-left: 0;
    padding-right: 0;
    overflow: hidden
}

@media screen and (max-width: 736px) {
    body#case-study-page-kibow #caseStudyContent {
        overflow-y: hidden
    }
}

body#case-study-page-kibow #caseStudyContent .about-project-wrapper {
    background: white
}

body#case-study-page-kibow #caseStudyContent .about-project {
    padding: 150px 30px;
    padding-left: 15px;
    padding-right: 15px
}

@media screen and (max-width: 736px) {
    body#case-study-page-kibow #caseStudyContent .about-project {
        padding-left: 0;
        padding-right: 0;
        padding-top: 60px;
        padding-bottom: 60px
    }
}

body#case-study-page-kibow #caseStudyContent .about-project table td:first-child,
body#case-study-page-kibow #caseStudyContent .about-project tr td:first-child {
    color: #1A2B44
}

body#case-study-page-kibow #caseStudyContent .about-project table td:last-child p,
body#case-study-page-kibow #caseStudyContent .about-project tr td:last-child p {
    color: #1A2B44
}

@media screen and (max-width: 736px) {

    body#case-study-page-kibow #caseStudyContent .about-project table td:first-child,
    body#case-study-page-kibow #caseStudyContent .about-project tr td:first-child {
        font-size: 20px;
        line-height: 24px;
        text-align: center
    }

    body#case-study-page-kibow #caseStudyContent .about-project table td:last-child p,
    body#case-study-page-kibow #caseStudyContent .about-project tr td:last-child p {
        font-size: 16px !important;
        line-height: 23px !important;
        text-align: center
    }
}

body#case-study-page-kibow #caseStudyContent .cs-label {
    color: #667590;
    font-weight: normal;
    font-size: 12px;
    text-transform: uppercase;
    position: relative
}

body#case-study-page-kibow #caseStudyContent .cs-label::before,
body#case-study-page-kibow #caseStudyContent .cs-label::after {
    content: '';
    position: absolute;
    left: 50%;
    right: auto;
    margin-left: -1px;
    background: #d3ff00;
    width: 2px
}

body#case-study-page-kibow #caseStudyContent .understanding {
    background: #d3ff00 url(/assets/case-studies/kibow/ux-research-new-edc1b6f8588b1992e8418037efdfb8b1b459b1e721e95b12c4a352b739a94b50.png) no-repeat left center;
    background-size: auto 100%;
    padding-top: 90px;
    padding-bottom: 90px
}

@media screen and (max-width: 1280px) {
    body#case-study-page-kibow #caseStudyContent .understanding {
        background-position: -50% center
    }
}

@media screen and (max-width: 1024px) {
    body#case-study-page-kibow #caseStudyContent .understanding {
        padding-top: 30px;
        padding-bottom: 30px;
        background-position: -120% center
    }
}

@media screen and (max-width: 767px) {
    body#case-study-page-kibow #caseStudyContent .understanding {
        background-image: none
    }
}

body#case-study-page-kibow #caseStudyContent .understanding h2 {
    color: #07162f;
    font-size: 42px;
    font-weight: normal;
    margin-top: 0;
    line-height: 1
}

@media screen and (max-width: 1024px) {
    body#case-study-page-kibow #caseStudyContent .understanding h2 {
        text-align: center
    }
}

body#case-study-page-kibow #caseStudyContent .understanding p {
    color: #757c84;
    font-size: 22px;
    margin-bottom: 10px
}

@media screen and (max-width: 1024px) {
    body#case-study-page-kibow #caseStudyContent .understanding p {
        text-align: center
    }
}

body#case-study-page-kibow #caseStudyContent .shaping {
    background: #fff url(/assets/case-studies/kibow/flow-44413fff077189318c00dbb17de0264e7e4e4804707d61cc1a4ef52268e84631.png) no-repeat;
    background-position: calc(50% + 434px) 200px;
    background-size: auto 472px;
    padding-top: 90px;
    padding-bottom: 225px
}

@media screen and (max-width: 1024px) {
    body#case-study-page-kibow #caseStudyContent .shaping {
        padding-top: 30px;
        padding-bottom: 30px
    }
}

@media screen and (max-width: 991px) {
    body#case-study-page-kibow #caseStudyContent .shaping {
        background-image: none
    }
}

body#case-study-page-kibow #caseStudyContent .shaping h2 {
    color: #07162f;
    font-size: 42px;
    font-weight: normal;
    margin-top: 0;
    line-height: 1
}

@media screen and (max-width: 1024px) {
    body#case-study-page-kibow #caseStudyContent .shaping h2 {
        text-align: center
    }
}

body#case-study-page-kibow #caseStudyContent .shaping p {
    color: #757c84;
    font-size: 22px;
    margin-bottom: 10px
}

@media screen and (max-width: 1024px) {
    body#case-study-page-kibow #caseStudyContent .shaping p {
        text-align: center
    }
}

@media screen and (max-width: 991px) {
    body#case-study-page-kibow #caseStudyContent .shaping .flow {
        text-align: center
    }
}

body#case-study-page-kibow #caseStudyContent .shaping .flow-label {
    display: inline-block;
    margin-top: 15px
}

@media screen and (max-width: 991px) {
    body#case-study-page-kibow #caseStudyContent .shaping .flow-label {
        margin-bottom: 30px
    }
}

body#case-study-page-kibow #caseStudyContent .shaping .flow-label::after {
    height: 24px;
    top: auto;
    bottom: 0;
    transform: translate3d(0, 30px, 0)
}

body#case-study-page-kibow #caseStudyContent .wireframes {
    padding-top: 90px;
    padding-bottom: 90px;
    text-align: center
}

body#case-study-page-kibow #caseStudyContent .wireframes .wireframes-label::before {
    height: 60px;
    top: 0;
    bottom: auto;
    transform: translate3d(0, -75px, 0)
}

body#case-study-page-kibow #caseStudyContent .wireframes .wireframes-label::after {
    height: 60px;
    top: auto;
    bottom: 0;
    transform: translate3d(0, 70px, 0)
}

body#case-study-page-kibow #caseStudyContent .wireframes-comp {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 90px
}

@media screen and (max-width: 1024px) {
    body#case-study-page-kibow #caseStudyContent .wireframes-comp {
        margin-top: 30px;
        margin-bottom: 30px
    }
}

body#case-study-page-kibow #caseStudyContent .visual-design {
    background: #d3ff00;
    padding-top: 90px;
    padding-bottom: 0;
    text-align: center
}

@media screen and (max-width: 1024px) {
    body#case-study-page-kibow #caseStudyContent .visual-design {
        padding-top: 30px;
        padding-bottom: 30px
    }
}

body#case-study-page-kibow #caseStudyContent .visual-design h2 {
    color: #07162f;
    font-size: 42px;
    font-weight: normal;
    margin-top: 0;
    line-height: 1
}

body#case-study-page-kibow #caseStudyContent .visual-design p {
    color: #757c84;
    font-size: 22px;
    margin-bottom: 30px
}

body#case-study-page-kibow #caseStudyContent .visual-design .phone-mockup {
    text-align: center;
    position: relative;
    z-index: 3
}

@media screen and (max-width: 1024px) {
    body#case-study-page-kibow #caseStudyContent .visual-design .phone-mockup {
        left: 10px
    }
}

body#case-study-page-kibow #caseStudyContent .visual-design .phone-mockup:first-of-type,
body#case-study-page-kibow #caseStudyContent .visual-design .phone-mockup:last-of-type {
    margin-top: 90px
}

@media screen and (max-width: 1024px) {

    body#case-study-page-kibow #caseStudyContent .visual-design .phone-mockup:first-of-type,
    body#case-study-page-kibow #caseStudyContent .visual-design .phone-mockup:last-of-type {
        margin-top: 0
    }
}

body#case-study-page-kibow #caseStudyContent .crafting {
    background: #fff url(/assets/case-studies/kibow/shield-8ed74b9a02e2adf14f2d27c7cf32255a15ab7117936dcad81db3078a375fa478.svg) no-repeat;
    background-position: left 200% bottom 1310%;
    background-size: auto 1586px;
    padding-top: 0;
    padding-bottom: 120px
}

@media screen and (max-width: 1024px) {
    body#case-study-page-kibow #caseStudyContent .crafting {
        padding-top: 30px;
        padding-bottom: 30px
    }
}

body#case-study-page-kibow #caseStudyContent .crafting .excerpt {
    border-left: 2px solid #d3ff00;
    padding-top: 60px;
    padding-bottom: 60px;
    padding-left: 120px;
    position: relative;
    z-index: 3
}

@media screen and (max-width: 1024px) {
    body#case-study-page-kibow #caseStudyContent .crafting .excerpt {
        padding-top: 30px;
        padding-bottom: 30px;
        padding-left: 15px;
        border-left: 0;
        text-align: center
    }
}

body#case-study-page-kibow #caseStudyContent .crafting h2 {
    color: #07162f;
    font-size: 42px;
    font-weight: normal;
    margin-top: 0;
    line-height: 1
}

@media screen and (max-width: 1024px) {
    body#case-study-page-kibow #caseStudyContent .crafting h2 {
        text-align: center
    }
}

body#case-study-page-kibow #caseStudyContent .crafting p {
    color: #757c84;
    font-size: 22px;
    margin-bottom: 30px
}

@media screen and (max-width: 1024px) {
    body#case-study-page-kibow #caseStudyContent .crafting p {
        text-align: center;
        margin-bottom: 0
    }
}

body#case-study-page-kibow #caseStudyContent .crafting-screenshot {
    height: 1188px;
    background: transparent url(/assets/case-studies/kibow/design-system-0d6ee283bde2818aad75e60dabd07a9e169d0df498357a31e23daf26431a3e2c.png) no-repeat;
    background-position: center center;
    background-size: auto 100%;
    margin-top: -245px;
    position: relative;
    z-index: 2
}

@media screen and (max-width: 991px) {
    body#case-study-page-kibow #caseStudyContent .crafting-screenshot {
        background-image: none;
        height: auto
    }
}

body#case-study-page-kibow #caseStudyContent .crafting-screenshot .flow-mobile {
    max-width: 250%;
    height: auto;
    left: 50%;
    position: relative;
    transform: translate3d(-50%, 0, 0)
}

body#case-study-page-kibow #caseStudyContent .site-screenshot {
    background: #fff url(/assets/case-studies/kibow/shield-8ed74b9a02e2adf14f2d27c7cf32255a15ab7117936dcad81db3078a375fa478.svg) no-repeat;
    background-position: right 130% top 160%;
    background-size: auto 1586px;
    padding-top: 290px;
    padding-bottom: 60px;
    text-align: center;
    margin-top: -220px
}

body#case-study-page-kibow #caseStudyContent .site-screenshot .gif {
    box-shadow: 0 0 30px 30px white
}

body#case-study-page-kibow #caseStudyContent .details {
    background: #d3ff00;
    padding-top: 90px;
    padding-bottom: 90px
}

@media screen and (max-width: 1024px) {
    body#case-study-page-kibow #caseStudyContent .details {
        padding-top: 30px;
        padding-bottom: 30px
    }
}

body#case-study-page-kibow #caseStudyContent .details h2 {
    color: #07162f;
    font-size: 42px;
    font-weight: normal;
    margin-top: 0;
    line-height: 1
}

@media screen and (max-width: 1024px) {
    body#case-study-page-kibow #caseStudyContent .details h2 {
        text-align: center
    }
}

body#case-study-page-kibow #caseStudyContent .details p {
    color: #757c84;
    font-size: 22px;
    margin-bottom: 0
}

@media screen and (max-width: 1024px) {
    body#case-study-page-kibow #caseStudyContent .details p {
        margin-bottom: 30px;
        text-align: center
    }
}

body#case-study-page-kibow #caseStudyContent .details .phone-frame {
    width: 465px;
    position: absolute;
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 3
}

@media screen and (max-width: 991px) {
    body#case-study-page-kibow #caseStudyContent .details .phone-frame {
        position: relative;
        top: auto;
        left: 5px;
        transform: none;
        margin-left: auto;
        margin-right: auto;
        width: 352px
    }
}

body#case-study-page-kibow #caseStudyContent .details .phone-frame-wrapper {
    position: relative
}

body#case-study-page-kibow #caseStudyContent .details .phone-frame-wrapper h2,
body#case-study-page-kibow #caseStudyContent .details .phone-frame-wrapper p {
    opacity: 0;
    visibility: hidden
}

@media screen and (min-width: 1024px) {

    body#case-study-page-kibow #caseStudyContent .details .phone-frame-wrapper h2,
    body#case-study-page-kibow #caseStudyContent .details .phone-frame-wrapper p {
        max-width: 338px
    }
}

@media screen and (max-width: 991px) {

    body#case-study-page-kibow #caseStudyContent .details .phone-frame-wrapper h2,
    body#case-study-page-kibow #caseStudyContent .details .phone-frame-wrapper p {
        display: none
    }
}

body#case-study-page-kibow #caseStudyContent .details .phone-frame-inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding-top: 147px;
    padding-right: 64px;
    padding-left: 41px;
    padding-bottom: 127px
}

@media screen and (max-width: 991px) {
    body#case-study-page-kibow #caseStudyContent .details .phone-frame-inner {
        padding-top: 112px;
        padding-right: 48px;
        padding-left: 30px;
        padding-bottom: 96px
    }
}

body#case-study-page-kibow #caseStudyContent .details .phone-frame-carousel {
    overflow: hidden;
    width: 100%;
    height: 100%
}

body#case-study-page-kibow #caseStudyContent .details .phone-indicators {
    text-align: left;
    padding-top: 90px;
    padding-bottom: 90px
}

@media screen and (max-width: 1024px) {
    body#case-study-page-kibow #caseStudyContent .details .phone-indicators {
        padding-top: 30px;
        padding-bottom: 30px;
        text-align: center
    }
}

@media screen and (max-width: 991px) {
    body#case-study-page-kibow #caseStudyContent .details .phone-indicators {
        text-align: center
    }
}

@media screen and (max-width: 768px) {
    body#case-study-page-kibow #caseStudyContent .details .phone-indicators {
        position: relative;
        left: 15px
    }
}

@media screen and (max-width: 1024px) {
    body#case-study-page-kibow #caseStudyContent .details .phone-indicators br {
        display: none
    }
}

body#case-study-page-kibow #caseStudyContent .details .phone-indicators .phone-indicator {
    color: #07162f;
    font-weight: normal;
    font-size: 18px;
    border: 0;
    border-left: 2px solid white;
    padding-left: 30px;
    background: transparent;
    text-align: left;
    transition: border-left .3s ease
}

@media screen and (max-width: 991px) {
    body#case-study-page-kibow #caseStudyContent .details .phone-indicators .phone-indicator {
        width: 140px
    }
}

@media screen and (max-width: 768px) {
    body#case-study-page-kibow #caseStudyContent .details .phone-indicators .phone-indicator {
        width: 105px;
        padding-left: 15px;
        font-size: 16px
    }
}

body#case-study-page-kibow #caseStudyContent .details .phone-indicators .phone-indicator:not(:last-of-type) {
    margin-bottom: 15px
}

body#case-study-page-kibow #caseStudyContent .details .phone-indicators .phone-indicator.is-active {
    border-left-color: #07162f
}

body#case-study-page-kibow #caseStudyContent .expanding {
    background: #fff url(/assets/case-studies/kibow/shield-8ed74b9a02e2adf14f2d27c7cf32255a15ab7117936dcad81db3078a375fa478.svg) no-repeat;
    background-position: bottom -455% right -10%;
    background-size: auto 1586px;
    padding-top: 220px;
    padding-bottom: 90px;
    text-align: center
}

@media screen and (max-width: 1024px) {
    body#case-study-page-kibow #caseStudyContent .expanding {
        padding-top: 30px;
        padding-bottom: 30px
    }
}

body#case-study-page-kibow #caseStudyContent .expanding h2 {
    color: #07162f;
    font-size: 42px;
    font-weight: normal;
    margin-top: 0;
    line-height: 1
}

body#case-study-page-kibow #caseStudyContent .expanding p {
    color: #07162f;
    font-size: 22px;
    margin-bottom: 0
}

@media screen and (max-width: 1024px) {
    body#case-study-page-kibow #caseStudyContent .expanding p {
        margin-bottom: 30px
    }
}

body#case-study-page-kibow #caseStudyContent .expanding .posts {
    margin-top: 90px
}

@media screen and (max-width: 1024px) {
    body#case-study-page-kibow #caseStudyContent .expanding .posts {
        margin-top: 30px
    }
}

body#case-study-page-kibow #caseStudyContent .conclussion {
    background: #07162f;
    padding-top: 90px;
    padding-bottom: 90px;
    text-align: center
}

@media screen and (max-width: 1024px) {
    body#case-study-page-kibow #caseStudyContent .conclussion {
        padding-top: 30px;
        padding-bottom: 30px
    }
}

body#case-study-page-kibow #caseStudyContent .conclussion h2 {
    color: white;
    font-size: 42px;
    font-weight: normal;
    margin-top: 0
}

body#case-study-page-kibow #caseStudyContent .conclussion p {
    color: #757c84;
    font-size: 22px;
    margin-bottom: 0
}

@media screen and (max-width: 991px) {
    body#case-study-page-kibow #caseStudyContent .conclussion p {
        margin-bottom: 15px
    }
}

.modalindi {
    opacity: 0;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    height: 0;
    overflow: auto;
    background-color: black;
    background-color: rgba(0, 0, 0, 0.4);
    transition: 0.5s opacity ease
}

.modalindi .modalindi-content {
    background-color: #000;
    margin: 100px auto;
    padding: 20px;
    border: 1px solid #888;
    width: 55%
}

.modalindi .modalindi-content .closeMicro {
    color: #6A676C;
    float: right;
    font-size: 28px;
    font-weight: bold
}

.modalindi .modalindi-content .closeMicro:hover,
.modalindi .modalindi-content .closeMicro:focus {
    color: black;
    text-decoration: none;
    cursor: pointer
}

@media (max-width: 992px) {
    .cases-container {
        overflow: hidden
    }
}

.cases-container .element {
    height: 480px;
    background-color: black;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-decoration: none
}

.cases-container .element h3 {
    font-family: "franklin-gothic-urw", sans-serif;
    color: #fff;
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 1px;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
    text-decoration: none;
    max-width: 1280px;
    padding: 0 30px;
    margin: 30px auto 0;
    width: 100%
}

@media (min-width: 500px) {
    .cases-container .element h3 {
        font-size: 12px;
        line-height: 12px
    }
}

.cases-container .element h3>span {
    display: inline-block;
    transition: all 500ms ease
}

.cases-container .element h2 {
    font-family: "franklin-gothic-urw", sans-serif;
    color: #fff;
    font-size: 30px;
    line-height: 50px;
    font-weight: 300;
    font-style: normal;
    text-decoration: none;
    max-width: 1280px;
    padding: 0 30px;
    margin: 10px auto 15px;
    width: 100%
}

@media (min-width: 500px) {
    .cases-container .element h2 {
        font-size: 50px;
        line-height: 50px
    }
}

@media screen and (max-width: 480px) {
    .cases-container .element h2 {
        line-height: 1.2
    }
}

.cases-container .element h2>span {
    display: inline-block;
    transition: all 300ms ease
}

.cases-container .element .arrow-case {
    cursor: pointer;
    text-decoration: none;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto 30px;
    padding: 0 30px
}

.cases-container .element .arrow-case>span {
    display: inline-block;
    transition: all 300ms ease
}

.cases-container .element .arrow-case svg {
    width: 30px;
    opacity: 1
}

.cases-container .element .arrow-case .arrow-case-head {
    transition: all 300ms ease;
    stroke-dashoffset: 0px
}

@media (min-width: 992px) {
    .cases-container .element .arrow-case .arrow-case-head {
        stroke-dasharray: 400px;
        stroke-dashoffset: 400px
    }
}

.cases-container .element .arrow-case .arrow-case-body {
    transition: all 300ms ease;
    stroke-dashoffset: 0px
}

@media (min-width: 992px) {
    .cases-container .element .arrow-case .arrow-case-body {
        stroke-dasharray: 423px;
        stroke-dashoffset: -423px
    }
}

.cases-container .element:hover {
    cursor: pointer
}

.cases-container .element:hover h3>span,
.cases-container .element:hover h2>span {
    transform: translate3d(15px, 0, 0)
}

.cases-container .element:hover .arrow-case>span {
    transform: translate3d(15px, 0, 0)
}

.cases-container .element:hover .arrow-case .arrow-case-head {
    stroke-dashoffset: 0
}

.cases-container .element:hover .arrow-case .arrow-case-body {
    stroke-dashoffset: 0
}

.cases-container .element.samsung-dev-conference {
    background: url(/assets/case-studies/listing/sdc-dff90f5e2ad6a1040e2a7e653fb3dc89110f99dedc878e768eeb4927bd7ebd7b.jpg) no-repeat center top;
    height: 651px;
    background-size: cover;
    justify-content: flex-end
}

@media screen and (max-width: 992px) {
    .cases-container .element.samsung-dev-conference {
        justify-content: flex-start;
        padding-top: 90px
    }
}

.cases-container .element.samsung-dev-conference img {
    width: 840px;
    max-width: 160%;
    height: auto;
    position: absolute;
    left: -35%;
    margin-left: 0;
    bottom: 0;
    transform: translate3d(0, 0, 0)
}

@media screen and (min-width: 512px) {
    .cases-container .element.samsung-dev-conference img {
        width: 520px;
        max-width: 100%;
        left: 50%;
        transform: translate3d(-50%, 0, 0)
    }
}

@media screen and (min-width: 992px) {
    .cases-container .element.samsung-dev-conference img {
        width: 520px;
        max-width: none;
        margin-left: 80px;
        transform: translate3d(0, 0, 0)
    }
}

@media (min-width: 1200px) {
    .cases-container .element.samsung-dev-conference img {
        width: 860px;
        margin-left: -130px
    }
}

.cases-container .element.samsung-dev-conference:hover {
    cursor: pointer
}

.cases-container .element.samsung-dev-conference:hover .arrow-case .arrow-case-head {
    stroke-dashoffset: 0
}

.cases-container .element.samsung-dev-conference:hover .arrow-case .arrow-case-body {
    stroke-dashoffset: 0
}

.cases-container .element.red-bull {
    background: url(/assets/case-studies/listing/redbull-bkg-58baa4d67e13cd50857a327a1ef677b4c9498eeedce3b197d7b8154b8a23942f.jpg) no-repeat center top;
    height: 480px;
    background-size: cover;
    justify-content: flex-end
}

@media screen and (max-width: 992px) {
    .cases-container .element.red-bull {
        justify-content: flex-start;
        padding-top: 30px
    }
}

@media screen and (max-width: 480px) {
    .cases-container .element.red-bull {
        height: 338px
    }
}

@media (min-width: 992px) {
    .cases-container .element.red-bull {
        background-size: auto
    }
}

@media (min-width: 1410px) {
    .cases-container .element.red-bull {
        background-size: cover
    }
}

.cases-container .element.red-bull img {
    height: auto;
    position: absolute;
    bottom: 0;
    width: 340px;
    left: 50%;
    margin-left: 0;
    transform: translate3d(-50%, 0, 0)
}

@media (min-width: 992px) {
    .cases-container .element.red-bull img {
        width: 620px;
        margin-left: -75px;
        left: 50%;
        margin-left: -135px;
        transform: translate3d(0, 0, 0)
    }
}

@media screen and (max-width: 480px) {
    .cases-container .element.red-bull img {
        width: 250px;
        margin-left: -15px
    }
}

.cases-container .element.red-bull:hover {
    cursor: pointer
}

.cases-container .element.red-bull:hover .arrow-case .arrow-case-head {
    stroke-dashoffset: 0
}

.cases-container .element.red-bull:hover .arrow-case .arrow-case-body {
    stroke-dashoffset: 0
}

.cases-container .element.kibow {
    background-color: #D3FF00;
    height: 338px;
    padding: 0;
    justify-content: flex-end
}

@media screen and (max-width: 992px) {
    .cases-container .element.kibow {
        justify-content: flex-start
    }
}

.cases-container .element.kibow h3,
.cases-container .element.kibow h2,
.cases-container .element.kibow .arrow-case {
    width: 100%;
    max-width: 640px;
    margin-right: auto;
    margin-left: 0
}

@media screen and (max-width: 992px) {

    .cases-container .element.kibow h3,
    .cases-container .element.kibow h2,
    .cases-container .element.kibow .arrow-case {
        margin-left: auto;
        max-width: 400px
    }
}

@media (min-width: 992px) {
    .cases-container .element.kibow {
        height: 485px
    }
}

.cases-container .element.kibow img {
    width: 320px;
    height: auto;
    position: absolute;
    left: 50%;
    margin-left: 0;
    transform: translate3d(-50%, 0, 0);
    bottom: -225px;
    display: block
}

@media (min-width: 992px) {
    .cases-container .element.kibow img {
        margin-left: 60px !important;
        bottom: 0;
        margin-left: -140px;
        transform: translate3d(0, 0, 0)
    }
}

@media (min-width: 1201px) {
    .cases-container .element.kibow img {
        margin-left: -75px !important;
        bottom: 0;
        margin-left: -140px;
        transform: translate3d(0, 0, 0)
    }
}

@media (min-width: 1300px) {
    .cases-container .element.kibow img {
        margin-left: -15px !important
    }
}

.cases-container .element.kibow h3 {
    color: rgba(21, 39, 55, 0.6)
}

.cases-container .element.kibow h2 {
    color: #152737
}

.cases-container .element.genee {
    background-color: #fff;
    height: 338px;
    padding: 0;
    justify-content: flex-end
}

@media screen and (max-width: 480px) {
    .cases-container .element.genee {
        justify-content: flex-start
    }
}

.cases-container .element.genee h3,
.cases-container .element.genee h2,
.cases-container .element.genee .arrow-case {
    width: 100%;
    max-width: 640px;
    margin-right: auto;
    margin-left: 0
}

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

    .cases-container .element.genee h3,
    .cases-container .element.genee h2,
    .cases-container .element.genee .arrow-case {
        margin-left: auto;
        max-width: 400px
    }
}

@media (min-width: 992px) {
    .cases-container .element.genee {
        height: 485px
    }
}

.cases-container .element.genee img {
    width: 409px;
    height: 373px;
    position: absolute;
    left: 50%;
    margin-left: -140px;
    bottom: -130px;
    display: none
}

@media (min-width: 992px) {
    .cases-container .element.genee img {
        margin-left: -75px;
        bottom: 0;
        display: block
    }
}

@media (min-width: 1300px) {
    .cases-container .element.genee img {
        margin-left: 10px
    }
}

@media (min-width: 1800px) {
    .cases-container .element.genee img {
        left: 37%
    }
}

.cases-container .element.genee img.mob {
    display: block;
    width: 349px;
    height: 231px;
    right: 0;
    left: auto;
    bottom: 0
}

@media (min-width: 992px) {
    .cases-container .element.genee img.mob {
        display: none
    }
}

.cases-container .element.genee h3 {
    color: #234B7B
}

.cases-container .element.genee h2 {
    color: #33953C
}

.cases-container .element.metacenter {
    height: 338px;
    background: #237a87;
    justify-content: flex-end;
    padding: 0
}

@media screen and (max-width: 992px) {
    .cases-container .element.metacenter {
        justify-content: flex-start
    }
}

@media (min-width: 992px) {
    .cases-container .element.metacenter {
        background-size: auto;
        height: 485px
    }
}

@media (min-width: 1410px) {
    .cases-container .element.metacenter {
        background-size: cover
    }
}

.cases-container .element.metacenter h3,
.cases-container .element.metacenter h2,
.cases-container .element.metacenter .arrow-case {
    width: 100%;
    max-width: 640px;
    margin-right: 0;
    margin-left: auto
}

@media screen and (max-width: 992px) {

    .cases-container .element.metacenter h3,
    .cases-container .element.metacenter h2,
    .cases-container .element.metacenter .arrow-case {
        margin-right: auto;
        max-width: 400px
    }
}

.cases-container .element.metacenter img {
    position: absolute;
    width: 290px;
    top: auto;
    right: auto;
    bottom: -75px;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    margin-left: 0;
    display: block
}

@media screen and (min-width: 640px) {
    .cases-container .element.metacenter img {
        margin-left: -30px
    }
}

@media (min-width: 992px) {
    .cases-container .element.metacenter img {
        width: 290px;
        top: 25%;
        right: auto;
        bottom: auto;
        left: 50%;
        transform: translate3d(-50%, -30%, 0);
        margin-left: 0
    }
}

@media (min-width: 1214px) {
    .cases-container .element.metacenter img {
        width: 440px;
        top: auto;
        right: -22%;
        bottom: 50%;
        left: auto;
        transform: translate3d(0, 50%, 0)
    }
}

@media (min-width: 1800px) {
    .cases-container .element.metacenter img {
        right: -15%
    }
}

.cases-container .element.cluey {
    height: 338px;
    background: #A1AEFC;
    justify-content: flex-end;
    padding: 0
}

@media screen and (max-width: 992px) {
    .cases-container .element.cluey {
        justify-content: flex-start
    }
}

@media (min-width: 992px) {
    .cases-container .element.cluey {
        background-size: auto;
        height: 485px
    }
}

@media (min-width: 1410px) {
    .cases-container .element.cluey {
        background-size: cover
    }
}

.cases-container .element.cluey h3,
.cases-container .element.cluey h2,
.cases-container .element.cluey .arrow-case {
    width: 100%;
    max-width: 640px;
    margin-right: auto;
    margin-left: 0
}

@media screen and (max-width: 992px) {

    .cases-container .element.cluey h3,
    .cases-container .element.cluey h2,
    .cases-container .element.cluey .arrow-case {
        margin-left: auto;
        max-width: 400px
    }
}

.cases-container .element.cluey img {
    position: absolute;
    width: 180px;
    top: auto;
    right: auto;
    bottom: 15px;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    margin-left: 0;
    display: block
}

@media screen and (min-width: 640px) {
    .cases-container .element.cluey img {
        margin-left: -30px
    }
}

@media (min-width: 992px) {
    .cases-container .element.cluey img {
        width: 290px;
        top: 25%;
        right: auto;
        bottom: auto;
        left: 50%;
        transform: translate3d(-50%, -30%, 0);
        margin-left: 0
    }
}

@media (min-width: 1214px) {
    .cases-container .element.cluey img {
        width: 440px;
        top: auto;
        right: -10%;
        bottom: 50%;
        left: auto;
        transform: translate3d(0, 50%, 0)
    }
}

@media (min-width: 1800px) {
    .cases-container .element.cluey img {
        right: 16%
    }
}

.cases-container .element.cluey h3 {
    color: rgba(21, 39, 55, 0.6)
}

.cases-container .element.cluey h2 {
    color: #152737
}

.cases-container .element.polyvibe {
    height: 338px;
    background: #6718b2;
    overflow: hidden;
    padding: 0
}

@media (min-width: 992px) {
    .cases-container .element.polyvibe {
        background-size: auto;
        height: 970px
    }
}

@media (min-width: 1410px) {
    .cases-container .element.polyvibe {
        background-size: cover
    }
}

.cases-container .element.polyvibe h3 {
    margin-top: 60px
}

@media screen and (max-width: 992px) {
    .cases-container .element.polyvibe h3 {
        margin-top: 30px
    }
}

.cases-container .element.polyvibe h3,
.cases-container .element.polyvibe h2,
.cases-container .element.polyvibe .arrow-case {
    width: 100%;
    max-width: 640px;
    margin-right: 0;
    margin-left: auto;
    position: relative;
    z-index: 2
}

@media screen and (max-width: 992px) {

    .cases-container .element.polyvibe h3,
    .cases-container .element.polyvibe h2,
    .cases-container .element.polyvibe .arrow-case {
        margin-right: auto;
        max-width: 400px
    }
}

.cases-container .element.polyvibe img {
    width: auto;
    height: 250px;
    position: absolute;
    bottom: -30px;
    right: 50%;
    transform: translate3d(50%, 0, 0)
}

@media (min-width: 992px) {
    .cases-container .element.polyvibe img {
        bottom: 10%;
        width: 820px;
        height: auto
    }
}

.cases-container .element.tigo {
    height: 338px;
    background: url(/assets/case-studies/listing/tigo-bkg-5471d2e414b37ce4088dc6a0df18811304e21b7d0f27e501f454c33b9e65f3de.jpg) no-repeat center top;
    background-size: cover;
    padding: 0;
    justify-content: flex-end
}

@media screen and (max-width: 992px) {
    .cases-container .element.tigo {
        justify-content: flex-start
    }
}

.cases-container .element.tigo h3,
.cases-container .element.tigo h2,
.cases-container .element.tigo .arrow-case {
    width: 100%;
    max-width: 640px;
    margin-right: 0;
    margin-left: auto
}

@media screen and (max-width: 992px) {

    .cases-container .element.tigo h3,
    .cases-container .element.tigo h2,
    .cases-container .element.tigo .arrow-case {
        margin-right: auto;
        max-width: 400px
    }
}

@media (min-width: 992px) {
    .cases-container .element.tigo {
        background-size: auto;
        height: 485px
    }
}

@media (min-width: 1410px) {
    .cases-container .element.tigo {
        background-size: cover
    }
}

.cases-container .element.tigo img {
    height: 270px;
    width: auto;
    position: absolute;
    bottom: 0px;
    right: 0
}

@media (min-width: 992px) {
    .cases-container .element.tigo img {
        width: 376px;
        height: 402px
    }
}

.cases-container .element.tigo img.second {
    display: none;
    width: 274px;
    height: 188px;
    position: absolute;
    top: 0px;
    left: 0
}

@media (min-width: 992px) {
    .cases-container .element.tigo img.second {
        display: block
    }
}

.cases-container .element.espn {
    background: url(/assets/case-studies/listing/espn-bkg-6efa4917c9f303417076c351716e20de9d1553aff053378c559aa5bb2b079298.jpg) no-repeat center top;
    height: 338px;
    background-size: cover;
    padding: 0;
    justify-content: flex-end
}

@media screen and (max-width: 992px) {
    .cases-container .element.espn {
        justify-content: flex-start
    }
}

.cases-container .element.espn h3,
.cases-container .element.espn h2,
.cases-container .element.espn .arrow-case {
    width: 100%;
    max-width: 640px;
    margin-right: auto;
    margin-left: 0
}

@media screen and (max-width: 992px) {

    .cases-container .element.espn h3,
    .cases-container .element.espn h2,
    .cases-container .element.espn .arrow-case {
        margin-left: auto;
        max-width: 400px
    }
}

@media (min-width: 992px) {
    .cases-container .element.espn {
        background-size: auto;
        height: 485px
    }
}

@media (min-width: 1410px) {
    .cases-container .element.espn {
        background-size: cover
    }
}

.cases-container .element.li5 {
    height: 550px;
    background-color: #ED1A3D
}

@media screen and (max-width: 480px) {
    .cases-container .element.li5 {
        height: 338px
    }
}

.cases-container .element.li5 h3 {
    margin-top: 60px
}

@media screen and (max-width: 480px) {
    .cases-container .element.li5 h3 {
        margin-top: 30px
    }
}

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

    .cases-container .element.li5 h3,
    .cases-container .element.li5 h2,
    .cases-container .element.li5 .arrow-case {
        margin-right: auto;
        margin-left: auto;
        max-width: 400px
    }
}

.cases-container .element.li5 img.img1 {
    width: 332px;
    height: 481px;
    position: absolute;
    left: 50%;
    margin-left: 0px;
    bottom: -80px
}

@media (min-width: 992px) {
    .cases-container .element.li5 img.img1 {
        bottom: 0
    }
}

@media screen and (max-width: 480px) {
    .cases-container .element.li5 img.img1 {
        width: 230px;
        height: auto;
        margin-left: 30px
    }
}

.cases-container .element.li5 img.img2 {
    width: 1000px;
    height: auto;
    position: absolute;
    left: 0;
    margin-left: 0;
    bottom: 0
}

@media (min-width: 992px) {
    .cases-container .element.li5 img.img2 {
        width: 100%
    }
}

.cases-container .element.espnfc {
    height: 700px;
    background: url(/assets/case-studies/listing/espnfc-bkg-20285aff2bd1719ba27c078f7b1a03ba4ecb1636f7c79b9f545906ff89d5a5f6.jpg) no-repeat center top;
    background-size: cover;
    padding: 0
}

@media (min-width: 992px) {
    .cases-container .element.espnfc {
        background-size: auto;
        height: 971px
    }
}

@media (min-width: 1410px) {
    .cases-container .element.espnfc {
        background-size: cover
    }
}

@media screen and (max-width: 480px) {
    .cases-container .element.espnfc {
        height: 338px
    }
}

.cases-container .element.espnfc h3 {
    margin-top: 60px
}

@media screen and (max-width: 992px) {
    .cases-container .element.espnfc h3 {
        margin-top: 30px
    }
}

.cases-container .element.espnfc h3,
.cases-container .element.espnfc h2,
.cases-container .element.espnfc .arrow-case {
    width: 100%;
    max-width: 640px;
    margin-right: 0;
    margin-left: auto
}

@media screen and (max-width: 992px) {

    .cases-container .element.espnfc h3,
    .cases-container .element.espnfc h2,
    .cases-container .element.espnfc .arrow-case {
        margin-right: auto;
        max-width: 400px
    }
}

.cases-container .element.espnfc img {
    width: 686px;
    height: 778px;
    position: absolute;
    left: 0%;
    margin-left: 0px;
    bottom: -92px
}

@media screen and (max-width: 480px) {
    .cases-container .element.espnfc img {
        width: 320px;
        height: auto
    }
}

.cases-container .element.tag {
    height: 338px;
    background: url(/assets/case-studies/listing/tag-bkg-ae3ab4a456cd3e76401f793c3dd93261a82dd3edc9e95ae4e88e1ad55f1fc953.jpg) no-repeat center top;
    background-size: cover;
    padding: 0;
    justify-content: flex-end
}

@media screen and (max-width: 992px) {
    .cases-container .element.tag {
        justify-content: flex-start
    }
}

@media (min-width: 992px) {
    .cases-container .element.tag {
        background-size: auto;
        height: 485px
    }
}

@media (min-width: 1410px) {
    .cases-container .element.tag {
        background-size: cover
    }
}

.cases-container .element.tag img {
    width: 338px;
    height: 397px;
    position: absolute;
    margin-left: 0px;
    bottom: -155px;
    left: 50%;
    margin-left: -70px
}

@media (min-width: 992px) {
    .cases-container .element.tag img {
        margin-left: 0px;
        bottom: 0px
    }
}

.cases-container .element.tag h3,
.cases-container .element.tag h2,
.cases-container .element.tag .arrow-case {
    width: 100%;
    max-width: 640px;
    margin-right: auto;
    margin-left: 0
}

@media screen and (max-width: 992px) {

    .cases-container .element.tag h3,
    .cases-container .element.tag h2,
    .cases-container .element.tag .arrow-case {
        margin-left: auto;
        max-width: 400px
    }
}

.cases-container .element.wellbin {
    height: 338px;
    background: url(/assets/case-studies/listing/wellbin-bkg-3b912415e5efc26f2f86a3c9a0e8c1de672b94c445bfe3148e631c64c4336a02.jpg) no-repeat center top;
    background-size: cover;
    padding: 0;
    justify-content: flex-end
}

@media screen and (max-width: 992px) {
    .cases-container .element.wellbin {
        justify-content: flex-start
    }
}

@media (min-width: 992px) {
    .cases-container .element.wellbin {
        background-size: auto;
        height: 486px
    }
}

@media (min-width: 1410px) {
    .cases-container .element.wellbin {
        background-size: cover
    }
}

.cases-container .element.wellbin img {
    width: 169px;
    height: 218px;
    position: absolute;
    bottom: 0px;
    left: 50%;
    margin-left: -70px
}

@media (min-width: 992px) {
    .cases-container .element.wellbin img {
        margin-left: 0px;
        width: 337px;
        height: 435px
    }
}

.cases-container .element.wellbin h3,
.cases-container .element.wellbin h2,
.cases-container .element.wellbin .arrow-case {
    width: 100%;
    max-width: 640px;
    margin-right: auto;
    margin-left: 0
}

@media screen and (max-width: 992px) {

    .cases-container .element.wellbin h3,
    .cases-container .element.wellbin h2,
    .cases-container .element.wellbin .arrow-case {
        margin-left: auto;
        max-width: 400px
    }
}

.cases-container .element.tnrebrand {
    height: 550px;
    background: url(/assets/case-studies/listing/tn-bkg-mobile-6a81850ae29da8891e6316a31c6bedccbca4e198e98dd090f8ab7315e0741749.jpg) no-repeat center top;
    background-size: cover;
    justify-content: flex-end
}

@media screen and (max-width: 992px) {
    .cases-container .element.tnrebrand {
        justify-content: flex-start
    }
}

@media screen and (max-width: 480px) {
    .cases-container .element.tnrebrand {
        height: 338px;
        background-position: center 25%
    }
}

@media (min-width: 992px) {
    .cases-container .element.tnrebrand {
        background-size: auto;
        background: url(/assets/case-studies/listing/tn-bkg-4a977adc133e259f75f79710a2d69ccee8e7780959a65b1d81ec0fe7c9698496.jpg) no-repeat center top
    }
}

@media (min-width: 1410px) {
    .cases-container .element.tnrebrand {
        background-size: cover
    }
}

.cases-container .element.tnrebrand img {
    width: 758px;
    height: 494px;
    position: absolute;
    left: 50%;
    margin-left: -75px;
    bottom: 0
}

@media screen and (max-width: 992px) {

    .cases-container .element.tnrebrand h3,
    .cases-container .element.tnrebrand h2,
    .cases-container .element.tnrebrand .arrow-case {
        margin-right: auto;
        margin-left: auto;
        max-width: 400px
    }
}

.cases-container .element.djlist {
    height: 338px;
    background: url(/assets/case-studies/listing/djlist-bkg-d576e2e2be43d92ec514e2ce9d23696613ac2a0434cdd185289ee5726d6e469f.jpg) no-repeat center top;
    background-size: cover;
    padding: 0;
    justify-content: flex-end
}

@media screen and (max-width: 992px) {
    .cases-container .element.djlist {
        justify-content: flex-start
    }
}

@media (min-width: 992px) {
    .cases-container .element.djlist {
        background-size: auto;
        height: 485px
    }
}

@media (min-width: 1410px) {
    .cases-container .element.djlist {
        background-size: cover
    }
}

.cases-container .element.djlist img {
    width: 350px;
    height: 362px;
    position: absolute;
    right: -10px;
    margin-left: 0px;
    bottom: -79px
}

@media (min-width: 992px) {
    .cases-container .element.djlist img {
        width: 412px;
        height: 416px;
        bottom: 0px
    }
}

.cases-container .element.djlist h3,
.cases-container .element.djlist h2,
.cases-container .element.djlist .arrow-case {
    width: 100%;
    max-width: 640px;
    margin-right: 0;
    margin-left: auto
}

@media screen and (max-width: 992px) {

    .cases-container .element.djlist h3,
    .cases-container .element.djlist h2,
    .cases-container .element.djlist .arrow-case {
        margin-right: auto;
        max-width: 400px
    }
}

.cases-container .element.messi {
    height: 338px;
    background: #000 url(/assets/case-studies/listing/messi-bkg-fd40933735419b204837f83f0f09b9fd15f382ecdd6f44ec99314500a346b3fb.jpg) no-repeat center 62px;
    background-size: cover;
    padding: 0;
    justify-content: flex-end
}

@media screen and (max-width: 992px) {
    .cases-container .element.messi {
        justify-content: flex-start
    }
}

@media (min-width: 992px) {
    .cases-container .element.messi {
        background-size: auto;
        height: 485px;
        background: url(/assets/case-studies/listing/messi-bkg-fd40933735419b204837f83f0f09b9fd15f382ecdd6f44ec99314500a346b3fb.jpg) no-repeat center top
    }
}

@media (min-width: 1410px) {
    .cases-container .element.messi {
        background-size: cover
    }
}

.cases-container .element.messi img {
    width: 316px;
    height: 402px;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -176px
}

@media (min-width: 992px) {
    .cases-container .element.messi img {
        margin-left: 0px;
        bottom: 0
    }
}

@media (min-width: 1300px) {
    .cases-container .element.messi img {
        margin-left: 10px
    }
}

.cases-container .element.messi img h3,
.cases-container .element.messi img h2,
.cases-container .element.messi img .arrow-case {
    width: 100%;
    max-width: 640px;
    margin-right: auto;
    margin-left: 0
}

@media screen and (max-width: 992px) {

    .cases-container .element.messi img h3,
    .cases-container .element.messi img h2,
    .cases-container .element.messi img .arrow-case {
        margin-left: auto;
        max-width: 400px
    }
}

.cases-container .element .fadeInDown2 {
    -webkit-animation-name: fadeInDownExt;
    animation-name: fadeInDownExt
}

@-webkit-keyframes fadeInDownExt {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px)
    }

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

@keyframes fadeInDownExt {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        transform: translateY(-20px)
    }

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

.logocases {
    position: absolute;
    left: 30px;
    top: 20px;
    z-index: 99999;
    width: 28px;
    height: 35px;
    display: none;
    transition: all 0.5s;
    opacity: 1
}

@media (min-width: 1280px) {
    .logocases {
        left: 50%;
        margin-left: -610px
    }
}

.logocases a {
    line-height: 35px;
    height: 35px
}

.logocases a>img {
    max-height: 80px;
    width: 70px;
    border-radius: 50%
}

@media screen and (max-width: 450px) {
    .logocases a>img {
        max-height: 40px;
        width: 35px
    }
}

.reactions-options-all {
    padding-top: 30px
}

.menuheroright {
    display: none;
    position: absolute;
    z-index: 99999;
    width: 415px;
    height: 35px;
    top: 22px;
    left: 50%;
    margin-left: 20px;
    transition: all 0.5s;
    opacity: 1
}

@media (min-width: 1230px) {
    .menuheroright {
        left: 50%;
        margin-left: 120px
    }
}

@media (max-width: 1000px) {
    .menuheroright {
        display: none !important
    }
}

.menuheroright ul {
    list-style: none
}

.menuheroright ul li {
    float: left;
    margin: 0 5px;
    list-style: none
}

.menuheroright ul li a {
    color: #ffffff;
    font-family: "franklin-gothic-urw", sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 29px;
    transition: all 0.3s
}

.menuheroright.light ul li a {
    color: #DBF5FD
}

.menuheroright.dark ul li a {
    color: #00b5ec
}

.menuheroright ul li a:hover {
    text-decoration: none;
    color: #16364f
}

.container.cs-hero {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    height: 100vh
}

.cs-head {
    padding-top: 57px
}

.cs-head .logo a {
    line-height: 60px;
    height: 60px;
    padding-left: 15px
}

.cs-head .logo a>img {
    max-height: 35px
}

.cs-head .links {
    text-align: right
}

.cs-head .links a {
    line-height: 60px;
    height: 60px;
    display: inline-block;
    margin: 0 22px;
    font-size: 20px;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.cs-head .links a:hover {
    opacity: .5
}

.cs-head .links a.contact {
    border-width: 1px;
    border-style: solid;
    border-radius: 12px;
    padding: 0 22px
}

.cs-head .links a.contact:hover {
    opacity: 1;
    background: white;
    color: #64008a
}

.title-subtitle-stores {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0)
}

.title-subtitle-stores h1,
.title-subtitle-stores .dh1 {
    font-size: 82px;
    font-weight: 300;
    margin: 0 0 30px 0
}

.title-subtitle-stores h1 .toi-project,
.title-subtitle-stores .dh1 .toi-project {
    font-size: 20px;
    font-weight: normal;
    color: white
}

.title-subtitle-stores h1 .toi-project .dash,
.title-subtitle-stores .dh1 .toi-project .dash {
    display: inline-block;
    margin: 0 30px;
    position: relative;
    top: -3px
}

.title-subtitle-stores h1 .toi-project svg,
.title-subtitle-stores .dh1 .toi-project svg {
    width: 92px;
    height: 62px;
    margin: 0 0 0 5px;
    position: relative;
    top: 5px
}

.title-subtitle-stores h1 .toi-project svg path,
.title-subtitle-stores .dh1 .toi-project svg path {
    fill: white
}

.title-subtitle-stores h2 {
    font-size: 34px;
    font-weight: 300;
    margin: 0 0 70px 0
}

.title-subtitle-stores .stores {
    font-size: 22px;
    font-weight: 300
}

.title-subtitle-stores .stores a {
    height: 30px;
    line-height: 30px;
    padding: 0 45px;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.title-subtitle-stores .stores a:hover,
.title-subtitle-stores .stores a:active {
    opacity: .5
}

.title-subtitle-stores .stores a:first-child {
    padding-left: 0
}

.title-subtitle-stores .stores a:last-child {
    padding-right: 0
}

.title-subtitle-stores .stores a.apple svg:first-child {
    top: -5px;
    margin: 0 15px 0 0
}

.title-subtitle-stores .stores a.website svg:first-child {
    top: -3px;
    margin: 0 10px 0 0
}

.title-subtitle-stores .stores a.vimeo svg:first-child {
    top: -2px;
    margin: 0 10px 0 0
}

.title-subtitle-stores .stores a.google-play img:first-child {
    width: 32px;
    top: -2px;
    margin: 0 15px 0 0;
    position: relative;
    vertical-align: middle
}

.title-subtitle-stores .stores a svg {
    position: relative;
    vertical-align: middle
}

.title-subtitle-stores .stores a svg:last-child {
    top: -1px;
    margin-left: 10px
}

a.see-more-case-study {
    display: inline-block;
    position: absolute;
    top: auto;
    left: 50%;
    right: auto;
    bottom: 55px;
    margin-left: -30px;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    background: white;
    box-shadow: 0 17px 50px 0 rgba(0, 0, 0, 0.12), 0 12px 15px 0 rgba(0, 0, 0, 0.14);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transition: box-shadow .1s ease-in-out, transform .1s ease-in-out;
    transition: box-shadow .1s ease-in-out, transform .1s ease-in-out
}

a.see-more-case-study:hover {
    box-shadow: 0 17px 50px 0 rgba(0, 0, 0, 0.12), 0 12px 15px 0 rgba(0, 0, 0, 0.14);
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1)
}

a.see-more-case-study svg {
    width: 17px !important;
    height: 9px !important;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -3px;
    margin-left: -9px
}

a.see-more-case-study svg path {
    stroke-width: 4px
}

#caseStudyContent .about-project {
    padding: 150px 30px
}

#caseStudyContent .about-project table,
#caseStudyContent .about-project tr {
    width: 100%;
    max-width: 1230px;
    margin: 0 auto
}

#caseStudyContent .about-project table td,
#caseStudyContent .about-project tr td {
    vertical-align: middle
}

#caseStudyContent .about-project table td:first-child,
#caseStudyContent .about-project tr td:first-child {
    width: 25%;
    font-size: 28px;
    font-weight: 400;
    line-height: 33px
}

#caseStudyContent .about-project table td:last-child,
#caseStudyContent .about-project tr td:last-child {
    width: 75%;
    overflow: hidden
}

#caseStudyContent .about-project table td:last-child p,
#caseStudyContent .about-project tr td:last-child p {
    margin: 0;
    font-size: 26px;
    font-weight: 300;
    line-height: 38px;
    max-width: 800px;
    float: right
}

.more-case-studies {
    text-align: center;
    font-weight: 300;
    font-size: 38px;
    padding-top: 0;
    padding-bottom: 30px
}

.more-case-studies strong {
    display: inline-block;
    margin-top: 45px;
    font-weight: 300
}

.reactions-container {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1120px;
    background: white;
    box-shadow: 0 2px 36px 0 rgba(0, 0, 0, 0.1);
    padding: 50px 30px;
    margin: 0 auto;
    margin-top: -50px;
    border-radius: 20px
}

.reactions-container.is-selected button:not(.is-active) img {
    filter: grayscale(100%);
    opacity: .5
}

.reactions-container h2 {
    color: #2A2A2A;
    font-weight: 400;
    font-size: 38px;
    line-height: 46px;
    margin-bottom: 30px;
    margin-top: 0;
    font-family: "franklin-gothic-urw", sans-serif
}

.reactions-container h2.thank-title {
    margin-bottom: 0;
    margin-top: 30px
}

.reactions-container .reactions-options-2 h2,
.reactions-container .reactions-options-3 h2 {
    display: inline-block;
    font-weight: normal;
    font-size: 36px
}

.reactions-container .reactions-options-2 .second-title,
.reactions-container .reactions-options-3 .second-title {
    color: #98999D;
    margin-left: 20px
}

.reactions-container .reactions-options-2 .input-container,
.reactions-container .reactions-options-3 .input-container {
    border-bottom: 1px solid #98999D;
    width: 90%;
    display: flex
}

.reactions-container .reactions-options-2 .input-container input,
.reactions-container .reactions-options-3 .input-container input {
    border: transparent;
    width: 100%;
    margin-bottom: 10px
}

.reactions-container .reactions-options-2 .input-container button,
.reactions-container .reactions-options-3 .input-container button {
    background-color: transparent;
    outline: 0;
    border: transparent
}

.reactions-container .reactions-options-2 .input-container button svg path,
.reactions-container .reactions-options-3 .input-container button svg path {
    fill: #98999D;
    stroke: #98999D
}

.reactions-container .emoji-btn {
    background: white;
    box-shadow: 0 2px 11px 0 rgba(0, 0, 0, 0.13);
    outline: 0;
    border: transparent;
    height: 130px;
    width: 130px;
    border-radius: 50%;
    margin-bottom: 25px;
    transition: all .1s ease-in-out
}

@media (max-width: 414px) {
    .reactions-container .emoji-btn {
        width: 80px;
        height: 80px
    }

    .reactions-container .emoji-btn img {
        width: 40px
    }
}

.reactions-container .emoji-btn:active,
.reactions-container .emoji-btn:focus {
    outline: 0;
    border: 0
}

.reactions-container .emoji-btn.is-active {
    box-shadow: 0 5px 45px 0 rgba(0, 0, 0, 0.13);
    transform: scale(1.1)
}

.reactions-container h3 {
    color: #7F8082;
    font-size: 24px;
    line-height: 29px;
    margin-top: 0;
    font-family: "franklin-gothic-urw", sans-serif;
    font-weight: 400
}

.footer-case-study {
    background: white;
    padding-left: 0;
    padding-right: 0
}

.reactions-container .btn-option {
    font-family: "franklin-gothic-urw", sans-serif;
    border-radius: 25px;
    height: 37px;
    width: 211px;
    display: inline-block;
    border: 1px solid #7ECDEE;
    line-height: 20px;
    text-transform: uppercase;
    font-size: 16px;
    color: #7ECDEE;
    box-shadow: none;
    margin: 15px 15px;
    background-color: white;
    font-weight: 500;
    transition: all .1s ease-in-out
}

.reactions-container .btn-option:hover,
.reactions-container .btn-option.is-selected {
    background: #7ECDEE;
    color: white
}

.reactions-container .btn-option:focus,
.reactions-container .btn-option:active {
    outline: 0
}

.reactions-container .choose-title h2 {
    margin-bottom: 0 !important
}

.reactions-container .choose-title {
    margin-bottom: 15px
}

#confetti-canvas {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.related-case-studies .left-case-study>.content {
    float: right !important
}

.related-case-studies .right-case-study>.content {
    float: left !important
}

.related-case-studies .left-case-study,
.related-case-studies .right-case-study {
    overflow: hidden;
    padding: 0;
    float: left
}

.related-case-studies .left-case-study .content,
.related-case-studies .right-case-study .content {
    width: 100%;
    min-height: 485px;
    max-width: 650px;
    padding: 0;
    position: relative
}

.related-case-studies .left-case-study .content img.shot,
.related-case-studies .right-case-study .content img.shot {
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 1
}

.related-case-studies .left-case-study .content h2,
.related-case-studies .left-case-study .content h1,
.related-case-studies .left-case-study .content p,
.related-case-studies .left-case-study .content a,
.related-case-studies .right-case-study .content h2,
.related-case-studies .right-case-study .content h1,
.related-case-studies .right-case-study .content p,
.related-case-studies .right-case-study .content a {
    position: relative;
    z-index: 2
}

.related-case-studies .left-case-study .content h2,
.related-case-studies .right-case-study .content h2 {
    color: white;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    margin: 50px 0 0 0;
    text-transform: uppercase;
    line-height: 1.8
}

@media screen and (min-width: 1140px) {

    .related-case-studies .left-case-study .content h2,
    .related-case-studies .right-case-study .content h2 {
        max-width: 280px
    }
}

.related-case-studies .left-case-study .content h1,
.related-case-studies .right-case-study .content h1 {
    color: white;
    font-size: 36px;
    font-weight: 300;
    margin: 90px 0 0 0
}

.related-case-studies .left-case-study .content p,
.related-case-studies .right-case-study .content p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    margin: 15px 0 0 0
}

.related-case-studies .left-case-study .content a,
.related-case-studies .right-case-study .content a {
    display: block;
    color: white;
    font-size: 16px;
    font-weight: 400;
    margin: 90px 0 50px 0;
    text-decoration: none;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    padding: 0
}

.related-case-studies .left-case-study .content a:hover,
.related-case-studies .left-case-study .content a:active,
.related-case-studies .right-case-study .content a:hover,
.related-case-studies .right-case-study .content a:active {
    padding: 0 15px
}

.related-case-studies .left-case-study .content a:hover::before,
.related-case-studies .left-case-study .content a:active::before,
.related-case-studies .right-case-study .content a:hover::before,
.related-case-studies .right-case-study .content a:active::before {
    transform: translate(0, -50%) scaleX(1)
}

.related-case-studies .left-case-study .content a::before,
.related-case-studies .right-case-study .content a::before {
    content: '';
    display: block;
    position: absolute;
    height: 40px;
    top: 50%;
    right: auto;
    bottom: 0;
    left: 0;
    transform: translate(0, -50%) scaleX(0);
    transform-origin: 0 50%;
    width: 158px;
    background: white;
    z-index: -1;
    transition: all .2s ease-in-out
}

.related-case-studies .left-case-study .content a svg,
.related-case-studies .right-case-study .content a svg {
    width: 11px;
    height: 16px;
    position: relative;
    top: 3px;
    left: 10px
}

.related-case-studies .left-case-study .content a svg path,
.related-case-studies .right-case-study .content a svg path {
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.related-case-studies .right-case-study {
    float: right
}

.related-case-studies .right-case-study .content {
    padding-left: 30px
}

.related-case-studies .korefusion {
    background-color: #a21732
}

.related-case-studies .korefusion img.shot {
    width: 60%
}

.related-case-studies .korefusion h2,
.related-case-studies .korefusion h1,
.related-case-studies .korefusion p,
.related-case-studies .korefusion a {
    max-width: 50%
}

.related-case-studies .tradeagrape {
    background-color: #443e63
}

.related-case-studies .tradeagrape img.shot {
    width: 60%
}

@media screen and (max-width: 480px) {
    .related-case-studies .tradeagrape img.shot {
        float: none !important;
        margin: 0 auto
    }
}

.related-case-studies .tradeagrape h2 {
    max-width: 70%
}

.related-case-studies .tradeagrape h1,
.related-case-studies .tradeagrape a {
    max-width: 50%
}

.related-case-studies .tradeagrape a:hover {
    color: #443e63
}

.related-case-studies .tradeagrape a:hover svg path {
    fill: #443e63;
    stroke: #443e63
}

.related-case-studies .tradeagrape p {
    max-width: 45%
}

.related-case-studies .messi {
    background: #000000;
    background: -moz-linear-gradient(-45deg, #000 0%, #1b1a1b 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #000), color-stop(100%, #1b1a1b));
    background: -webkit-linear-gradient(-45deg, #000 0%, #1b1a1b 100%);
    background: -o-linear-gradient(-45deg, #000 0%, #1b1a1b 100%);
    background: -ms-linear-gradient(-45deg, #000 0%, #1b1a1b 100%);
    background: linear-gradient(135deg, #000 0%, #1b1a1b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#1b1a1b', GradientType=1)
}

.related-case-studies .messi img.shot {
    width: 60%;
    right: 15px !important
}

.related-case-studies .messi h2 {
    max-width: 70%
}

.related-case-studies .messi h1,
.related-case-studies .messi a {
    max-width: 50%
}

.related-case-studies .messi p {
    max-width: 40%
}

.related-case-studies .messi a:hover {
    color: black
}

.related-case-studies .messi a:hover svg path {
    fill: black;
    stroke: black
}

.related-case-studies .tn {
    background: #118BEF url(/assets/case-studies/tn/link-7587865fe6251bd3bb956416d4c6dcab82cd370bf69dca3510de95a11c37e951.png) no-repeat 94% 62%/50% auto
}

@media screen and (min-width: 1141px) and (max-width: 1280px) {
    .related-case-studies .tn {
        min-height: 510px
    }
}

@media screen and (max-width: 992px) {
    .related-case-studies .tn {
        background-position: 100% 85%
    }
}

@media screen and (max-width: 768px) {
    .related-case-studies .tn {
        background-position: 100% 70%
    }
}

@media screen and (max-width: 480px) {
    .related-case-studies .tn {
        background-position: 50% 95%;
        background-size: 280px auto
    }
}

.related-case-studies .tn h2 {
    max-width: 70%
}

.related-case-studies .tn h1,
.related-case-studies .tn a {
    max-width: 50%
}

.related-case-studies .tn p {
    max-width: 45%
}

.related-case-studies .tn a:hover {
    color: #118BEF
}

.related-case-studies .tn a:hover svg path {
    fill: #118BEF;
    stroke: #118BEF
}

@media screen and (max-width: 480px) {
    .related-case-studies .tn .content a {
        margin-bottom: 260px !important
    }
}

.related-case-studies .li5 {
    background: #ED1A3D url(/assets/case-studies/li5/link-1a8913e66ee8146e1e3dc22507721c9325860900d30b413d3be27294d5f05922.png) no-repeat 80% bottom/255px auto
}

@media screen and (min-width: 1141px) and (max-width: 1280px) {
    .related-case-studies .li5 {
        min-height: 510px
    }
}

@media screen and (max-width: 1140px) {
    .related-case-studies .li5 {
        background-position: 89% bottom !important
    }
}

@media screen and (max-width: 1024px) {
    .related-case-studies .li5 {
        background-size: auto 90%;
        background-position: 91% 0
    }
}

@media screen and (max-width: 992px) {
    .related-case-studies .li5 {
        background-position: 92% bottom !important;
        background-size: auto 80%
    }
}

@media screen and (max-width: 640px) {
    .related-case-studies .li5 {
        background-position: 88% bottom !important;
        background-size: auto 88%
    }
}

@media screen and (max-width: 480px) {
    .related-case-studies .li5 {
        background-size: 225px auto;
        background-position: center bottom !important;
        padding-bottom: 330px
    }
}

.related-case-studies .li5 h2 {
    max-width: 70%
}

.related-case-studies .li5 h1,
.related-case-studies .li5 a {
    max-width: 50%
}

.related-case-studies .li5 a:hover {
    color: #ee423d
}

.related-case-studies .li5 a:hover svg path {
    fill: #ee423d;
    stroke: #ee423d
}

.related-case-studies .li5 p {
    max-width: 40%;
    width: 200px
}

.related-case-studies .samsung-dev-conference {
    background: url(/assets/case-studies/listing/sdc-dff90f5e2ad6a1040e2a7e653fb3dc89110f99dedc878e768eeb4927bd7ebd7b.jpg) no-repeat center center/cover;
    position: relative
}

@media screen and (min-width: 1141px) and (max-width: 1280px) {
    .related-case-studies .samsung-dev-conference {
        min-height: 510px
    }
}

@media screen and (max-width: 480px) {
    .related-case-studies .samsung-dev-conference {
        min-height: 580px
    }
}

@media screen and (max-width: 480px) {
    .related-case-studies .samsung-dev-conference .content {
        min-height: 580px !important
    }
}

@media screen and (max-width: 480px) {
    .related-case-studies .samsung-dev-conference .content a {
        margin-top: 15px !important
    }
}

.related-case-studies .samsung-dev-conference img {
    position: absolute;
    width: 480px;
    top: auto;
    right: auto;
    left: 75%;
    bottom: 0;
    transform: translate3d(-15%, 0, 0);
    z-index: 0
}

@media screen and (max-width: 1440px) {
    .related-case-studies .samsung-dev-conference img {
        transform: translate3d(-30%, 0, 0);
        bottom: -30px
    }
}

@media screen and (max-width: 480px) {
    .related-case-studies .samsung-dev-conference img {
        left: 50%;
        transform: translate3d(-50%, 0, 0)
    }
}

.related-case-studies .samsung-dev-conference h2 {
    max-width: 70%
}

.related-case-studies .samsung-dev-conference h1,
.related-case-studies .samsung-dev-conference a {
    max-width: 380px;
    z-index: 1
}

.related-case-studies .samsung-dev-conference a:hover {
    color: #085bba
}

.related-case-studies .samsung-dev-conference a:hover svg path {
    fill: #085bba;
    stroke: #085bba
}

.related-case-studies .samsung-dev-conference p {
    width: 100%;
    max-width: 50%;
    z-index: 1
}

.related-case-studies .polyvibe {
    background: #6718b2 url(/assets/case-studies/polyvibe/grid-e088acfaa084ddfdc26877b2db6e0be8688bf4a6c66f59852704c90efbc453b4.png) no-repeat 80% 130px/400px auto
}

@media screen and (min-width: 1141px) and (max-width: 1280px) {
    .related-case-studies .polyvibe {
        min-height: 510px
    }
}

@media screen and (max-width: 1140px) {
    .related-case-studies .polyvibe {
        background-position: 89% bottom !important
    }
}

@media screen and (max-width: 1024px) {
    .related-case-studies .polyvibe {
        background-size: auto 90%;
        background-position: 91% 0
    }
}

@media screen and (max-width: 992px) {
    .related-case-studies .polyvibe {
        background-position: 92% bottom !important;
        background-size: auto 80%
    }
}

@media screen and (max-width: 640px) {
    .related-case-studies .polyvibe {
        background-position: 88% bottom !important;
        background-size: auto 88%
    }
}

@media screen and (max-width: 480px) {
    .related-case-studies .polyvibe {
        background-position: center bottom !important;
        padding-bottom: 330px
    }
}

.related-case-studies .polyvibe h2 {
    max-width: 70%
}

.related-case-studies .polyvibe h1,
.related-case-studies .polyvibe a {
    max-width: 50%
}

.related-case-studies .polyvibe p {
    max-width: 40%;
    width: 200px
}

.related-case-studies .polyvibe a:hover {
    color: #6718b2
}

.related-case-studies .polyvibe a:hover svg path {
    fill: #6718b2;
    stroke: #6718b2
}

.related-case-studies .espn {
    background-color: #F4371B
}

.related-case-studies .espn img.shot {
    height: 65%;
    bottom: 50% !important;
    -webkit-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0)
}

.related-case-studies .espn h2 {
    max-width: 70%
}

.related-case-studies .espn h1,
.related-case-studies .espn a {
    max-width: 50%
}

.related-case-studies .espn p {
    max-width: 40%
}

.related-case-studies .espn a:hover {
    color: #f24028
}

.related-case-studies .espn a:hover svg path {
    fill: #f24028;
    stroke: #f24028
}

.related-case-studies .tigo {
    background: #2F3F8F url(/assets/case-studies/tigo/bg_link-ef4537aad3090aa5a5b5bbf4a73aed757e39e1e3acebb43cb8c0aa80c40bd972.jpg) no-repeat center top/cover
}

.related-case-studies .tigo img.shot {
    height: 235px;
    width: 236px;
    position: relative;
    float: left;
    z-index: 1;
    margin: 0 0 50px 30px
}

@media screen and (min-width: 992px) {
    .related-case-studies .tigo img.shot {
        margin: 0;
        position: absolute;
        top: auto;
        right: 120px;
        left: auto;
        bottom: 145px !important
    }
}

@media screen and (min-width: 1400px) {
    .related-case-studies .tigo img.shot {
        right: auto;
        left: 250px
    }
}

.related-case-studies .tigo img.shot1 {
    position: absolute;
    right: 0 !important;
    height: 100%;
    width: 415px;
    bottom: 0 !important;
    position: absolute;
    top: auto;
    left: auto;
    z-index: 1;
    display: none
}

@media screen and (min-width: 992px) {
    .related-case-studies .tigo img.shot1 {
        display: block
    }
}

.related-case-studies .tigo h2 {
    max-width: 70%
}

.related-case-studies .tigo h1,
.related-case-studies .tigo a {
    max-width: 50%
}

.related-case-studies .tigo p {
    max-width: 40%
}

.related-case-studies .tigo a:hover {
    color: #03C8DE
}

.related-case-studies .tigo a:hover svg path {
    fill: #03C8DE;
    stroke: #03C8DE
}

.related-case-studies .tigo.left-case-study img.shot {
    height: 235px;
    width: 236px;
    position: relative;
    float: left;
    z-index: 1;
    margin: 0 0 50px 30px
}

@media screen and (min-width: 992px) {
    .related-case-studies .tigo.left-case-study img.shot {
        margin: 0;
        position: absolute;
        top: auto;
        right: 120px;
        left: auto;
        bottom: 145px !important
    }
}

@media screen and (min-width: 1400px) {
    .related-case-studies .tigo.left-case-study img.shot {
        right: 120px
    }
}

.related-case-studies .tigo.left-case-study img.shot1 {
    position: absolute;
    right: 0 !important;
    height: 100%;
    width: 415px;
    bottom: 0 !important;
    position: absolute;
    top: auto;
    left: auto;
    z-index: 1;
    display: none
}

@media screen and (min-width: 992px) {
    .related-case-studies .tigo.left-case-study img.shot1 {
        display: block
    }
}

.related-case-studies .tigo.right-case-study img.shot {
    height: 235px;
    width: 236px;
    position: relative;
    float: left;
    z-index: 1;
    margin: 0 0 50px 30px
}

@media screen and (min-width: 992px) {
    .related-case-studies .tigo.right-case-study img.shot {
        margin: 0;
        position: absolute;
        top: auto;
        right: 120px;
        left: auto;
        bottom: 145px !important
    }
}

@media screen and (min-width: 1400px) {
    .related-case-studies .tigo.right-case-study img.shot {
        right: auto;
        left: 300px
    }
}

.related-case-studies .tigo.right-case-study img.shot1 {
    position: absolute;
    right: 0 !important;
    height: 100%;
    width: 415px;
    bottom: 0 !important;
    position: absolute;
    top: auto;
    left: auto;
    z-index: 1;
    display: none
}

@media screen and (min-width: 992px) {
    .related-case-studies .tigo.right-case-study img.shot1 {
        display: block
    }
}

.related-case-studies .cluey {
    background: #A1AEFC;
    background-image: url(/assets/case-studies/listing/cluey-a5a6ff5b3927a033a6b9b90858b9f6ce46b9d8dd29cb5a0ba65a6e6bb54e535d.png);
    background-repeat: no-repeat;
    background-position: center 88%;
    background-size: 275px auto
}

@media screen and (min-width: 768px) {
    .related-case-studies .cluey {
        background-position: 95% center;
        background-size: 45% auto
    }
}

.related-case-studies .cluey .content {
    margin-bottom: 240px
}

@media screen and (min-width: 992px) and (max-width: 1280px) {
    .related-case-studies .cluey .content {
        min-height: 510px
    }
}

@media screen and (min-width: 768px) {
    .related-case-studies .cluey .content {
        margin-bottom: 0
    }
}

.related-case-studies .cluey .content h2 {
    color: rgba(21, 39, 55, 0.6)
}

.related-case-studies .cluey .content h1 {
    color: #152737
}

.related-case-studies .cluey .content p {
    color: #152737
}

@media screen and (min-width: 768px) {
    .related-case-studies .cluey .content p {
        max-width: 290px
    }
}

.related-case-studies .cluey .content a {
    color: #152737;
    margin-top: 25px !important;
    position: static !important
}

@media screen and (min-width: 768px) {
    .related-case-studies .cluey .content a {
        margin-top: 90px !important;
        position: absolute !important
    }
}

@media screen and (min-width: 1140px) and (max-width: 1280px) {
    .related-case-studies .cluey .content a {
        margin-bottom: 75px
    }
}

.related-case-studies .cluey .content a svg path {
    fill: #152737;
    stroke: #152737
}

.related-case-studies .cluey .content a::before {
    background: #152737
}

.related-case-studies .cluey .content a:hover {
    color: white
}

.related-case-studies .cluey .content a:hover svg path {
    fill: white;
    stroke: white
}

.related-case-studies .metacenter {
    background: #237a87;
    background-image: url(/assets/case-studies/metacenter/metacenter-block-mobile-new-45a2ed79783973fad928c494c2170fc3affd9155ae5713be36e261e6c47694c8.png);
    background-repeat: no-repeat;
    background-position: center 88%;
    background-size: 275px auto
}

@media screen and (min-width: 769px) and (max-width: 1140px) {
    .related-case-studies .metacenter {
        background-size: 40% auto !important
    }
}

@media screen and (min-width: 768px) {
    .related-case-studies .metacenter {
        background-image: url(/assets/case-studies/metacenter/metacenter-block-mobile-new-45a2ed79783973fad928c494c2170fc3affd9155ae5713be36e261e6c47694c8.png);
        background-repeat: no-repeat;
        background-position: calc(50% + 280px) center;
        background-size: 75% auto
    }
}

@media screen and (max-width: 480px) {
    .related-case-studies .metacenter {
        background-position: center 92%
    }
}

.related-case-studies .metacenter .content {
    margin-bottom: 240px
}

@media screen and (max-width: 1280px) {
    .related-case-studies .metacenter .content {
        min-height: 510px;
        padding-right: 15px
    }
}

@media screen and (min-width: 768px) {
    .related-case-studies .metacenter .content {
        margin-bottom: 0
    }
}

@media screen and (min-width: 768px) {
    .related-case-studies .metacenter .content p {
        max-width: 290px
    }
}

.related-case-studies .metacenter .content a {
    margin-top: 25px !important;
    position: static !important
}

@media screen and (min-width: 768px) {
    .related-case-studies .metacenter .content a {
        margin-top: 90px !important;
        position: absolute !important
    }

    .related-case-studies .metacenter .content a:hover {
        color: #237a87
    }

    .related-case-studies .metacenter .content a:hover svg path {
        fill: #237a87;
        stroke: #237a87
    }
}

.related-case-studies .espnjo {
    background-color: #1b63b4;
    background-image: url(/assets/case-studies/espnjo/shadow-43e5e131a6da39cdb6aa9dc83e9fed41850a2f77e487f30933f89484304e43bb.png);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: cover
}

.related-case-studies .espnjo img.shot {
    height: 100%;
    width: 292px;
    height: 452px
}

.related-case-studies .espnjo h2 {
    max-width: 70%
}

.related-case-studies .espnjo h1,
.related-case-studies .espnjo a {
    max-width: 50%
}

.related-case-studies .espnjo p {
    max-width: 40%
}

.related-case-studies .espnjo a:hover {
    color: #1b63b4
}

.related-case-studies .espnjo a:hover svg path {
    fill: #1b63b4;
    stroke: #1b63b4
}

.related-case-studies .espnjo.left-case-study img.shot {
    position: relative;
    float: left;
    z-index: 1
}

@media screen and (min-width: 992px) {
    .related-case-studies .espnjo.left-case-study img.shot {
        position: absolute;
        right: 30px;
        left: auto;
        bottom: 0 !important
    }
}

@media screen and (min-width: 1400px) {
    .related-case-studies .espnjo.left-case-study img.shot {
        right: 30px
    }
}

.related-case-studies .espnjo.right-case-study img.shot {
    position: relative;
    float: left;
    z-index: 1
}

@media screen and (min-width: 992px) {
    .related-case-studies .espnjo.right-case-study img.shot {
        position: absolute;
        right: 30px;
        left: auto;
        bottom: 0 !important
    }
}

@media screen and (min-width: 1400px) {
    .related-case-studies .espnjo.right-case-study img.shot {
        right: auto;
        left: 300px
    }
}

.related-case-studies .red-bull {
    background-color: #CD003B;
    background-image: url(/assets/case-studies/red_bull_records/rbr-grid-bg-53e16c26c552097e64bab7dc62f86019ca15b37d3b141be0d4f0542d6decd60a.png);
    background-repeat: no-repeat, no-repeat;
    background-position: right top, right bottom;
    background-size: 162px 175px, 354px 222px;
    text-align: left
}

.related-case-studies .red-bull img.shot {
    width: 60%;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.related-case-studies .red-bull h2 {
    max-width: 70%
}

.related-case-studies .red-bull h1,
.related-case-studies .red-bull a {
    max-width: 50%
}

.related-case-studies .red-bull a:hover {
    color: #CD003B
}

.related-case-studies .red-bull a:hover svg path {
    fill: #CD003B;
    stroke: #CD003B
}

.related-case-studies .red-bull p {
    max-width: 40%
}

.related-case-studies .kibow {
    background-color: #D3FF00;
    position: relative
}

@media screen and (max-width: 480px) {
    .related-case-studies .kibow {
        min-height: 680px !important
    }
}

.related-case-studies .kibow img {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    left: 75%;
    width: 300px;
    transform: translate3d(-45%, 0, 0)
}

@media screen and (max-width: 992px) {
    .related-case-studies .kibow img {
        width: 220px;
        transform: translate3d(-15%, 0, 0)
    }
}

@media screen and (max-width: 480px) {
    .related-case-studies .kibow img {
        width: 300px;
        left: 50%;
        transform: translate3d(-50%, 0, 0)
    }
}

@media screen and (max-width: 1280px) {
    .related-case-studies .kibow .content {
        min-height: 510px !important
    }
}

@media screen and (max-width: 480px) {
    .related-case-studies .kibow .content {
        min-height: 680px !important
    }
}

.related-case-studies .kibow .content h2 {
    max-width: 70%;
    color: rgba(21, 39, 55, 0.6)
}

.related-case-studies .kibow .content h1,
.related-case-studies .kibow .content p,
.related-case-studies .kibow .content a {
    max-width: 50%;
    color: #152737
}

.related-case-studies .kibow .content a path {
    fill: #152737;
    stroke: #152737
}

.related-case-studies .genee {
    background-color: #36a840
}

.related-case-studies .genee img.shot {
    width: 70%;
    -webkit-transform: translate3d(22.5%, 0, 0);
    transform: translate3d(22.5%, 0, 0)
}

.related-case-studies .genee h2 {
    max-width: 70%
}

.related-case-studies .genee h1,
.related-case-studies .genee p,
.related-case-studies .genee a {
    max-width: 50%
}

.related-case-studies .genee a:hover {
    color: #39ad43
}

.related-case-studies .genee a:hover svg path {
    fill: #39ad43;
    stroke: #39ad43
}

.related-case-studies .genee.left-case-study img.shot {
    -webkit-transform: translate3d(15%, 0, 0);
    transform: translate3d(15%, 0, 0)
}

.related-case-studies .djlist {
    background-image: url(/assets/case-studies/djlist/bottom-suggestion-waves-60be989919f3a961304d46d985f15bd56eab0d74e70cb5231b01a7f80739cc23.png);
    background-size: 100% auto;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #620087
}

.related-case-studies .djlist img.shot {
    height: 95%
}

.related-case-studies .djlist h2 {
    max-width: 70%
}

.related-case-studies .djlist h1,
.related-case-studies .djlist p,
.related-case-studies .djlist a {
    max-width: 50%
}

.related-case-studies .djlist a:hover {
    color: #64008A
}

.related-case-studies .djlist a:hover svg path {
    fill: #64008A;
    stroke: #64008A
}

.related-case-studies .djlist h2 {
    color: #2CCBA2
}

.related-case-studies .wellbin {
    background-image: url(/assets/case-studies/wellbin/Fondo@1x-5c3230cd058f60683ba018865e47a5b7fa85a4e27da526c96ca4d5bbf9b4a601.png);
    background-size: 500px 155px;
    background-position: 150% 40%;
    background-repeat: no-repeat;
    background-color: #23BDC7
}

@media screen and (max-width: 480px) {
    .related-case-studies .wellbin {
        background-position: center bottom !important;
        padding-bottom: 130px
    }
}

@media screen and (min-width: 1400px) {
    .related-case-studies .wellbin {
        background-image: url(/assets/case-studies/wellbin/Fondo@1x-5c3230cd058f60683ba018865e47a5b7fa85a4e27da526c96ca4d5bbf9b4a601.png);
        background-size: 500px 155px;
        background-position: 80% 40%;
        background-repeat: no-repeat;
        background-color: #23BDC7
    }
}

.related-case-studies .wellbin img.shot {
    height: 95%
}

.related-case-studies .wellbin h2 {
    max-width: 70%
}

.related-case-studies .wellbin h1,
.related-case-studies .wellbin p,
.related-case-studies .wellbin a {
    max-width: 50%
}

.related-case-studies .wellbin h2 {
    color: #ffffff
}

.related-case-studies .wellbin a:hover {
    color: #2B4955
}

.related-case-studies .wellbin a:hover svg path {
    fill: #2B4955;
    stroke: #2B4955
}

.related-case-studies .wellbin p {
    color: #ffffff;
    opacity: 0.7
}

@media screen and (max-width: 480px) {
    .related-case-studies .wellbin .content a {
        margin-bottom: 60px !important
    }
}

.related-case-studies .wellbin.left-case-study img.shot {
    position: relative;
    float: left;
    z-index: 1
}

@media screen and (min-width: 992px) {
    .related-case-studies .wellbin.left-case-study img.shot {
        position: absolute;
        top: auto;
        right: -45%;
        left: auto;
        bottom: 80px !important
    }
}

@media screen and (min-width: 1400px) {
    .related-case-studies .wellbin.left-case-study img.shot {
        right: -35%
    }
}

.related-case-studies .wellbin.left-case-study img.shot1 {
    position: absolute;
    right: -80px !important;
    height: 80%;
    width: 531px;
    bottom: 50px !important;
    position: absolute;
    top: auto;
    left: auto;
    z-index: 1;
    display: block
}

@media screen and (max-width: 480px) {
    .related-case-studies .wellbin.left-case-study img.shot1 {
        height: 44%
    }
}

.related-case-studies .wellbin.right-case-study img.shot {
    position: relative;
    float: left;
    z-index: 1
}

@media screen and (min-width: 992px) {
    .related-case-studies .wellbin.right-case-study img.shot {
        position: absolute;
        top: auto;
        right: -45%;
        left: auto;
        bottom: 80px !important
    }
}

@media screen and (min-width: 1400px) {
    .related-case-studies .wellbin.right-case-study img.shot {
        right: auto;
        left: 250px;
        right: auto
    }
}

.related-case-studies .wellbin.right-case-study img.shot1 {
    position: absolute;
    right: -80px !important;
    height: 80%;
    width: 531px;
    bottom: 50px !important;
    position: absolute;
    top: auto;
    left: auto;
    z-index: 1;
    display: block
}

@media screen and (max-width: 480px) {
    .related-case-studies .wellbin.right-case-study img.shot1 {
        height: 44%
    }
}

@media screen and (min-width: 1300px) {
    .related-case-studies .wellbin.right-case-study img.shot1 {
        left: 160px;
        right: auto
    }
}

#contact_form {
    margin-top: 45px;
    font-size: 16px;
    position: relative
}

#contact_form .g-recaptcha {
    opacity: 0;
    height: 0;
    transition: all 300ms ease-in-out
}

#contact_form .g-recaptcha.vis {
    opacity: 1;
    height: 100px
}

#contact_form .verification-field {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden
}

#contact_form .confirmation {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -9999;
    width: 100%;
    height: 100%;
    font-size: 28px;
    line-height: normal;
    background: #F8F9F9;
    transition: opacity 200ms ease-in-out
}

#contact_form .confirmation img {
    display: block;
    width: 64px;
    margin: 0 auto 30px auto
}

#contact_form .confirmation span {
    color: #B7C2C9;
    padding: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    width: 76%;
    transform: translate(-50%, -40%);
    opacity: 0;
    transition: all 300ms ease-in-out
}

#contact_form.sent .confirmation {
    top: 0;
    opacity: 1;
    z-index: 999
}

#contact_form.sent .confirmation span {
    opacity: 1;
    transform: translate(-50%, -50%)
}

#contact_form .spinner {
    position: absolute;
    width: 48px;
    height: 48px;
    top: 50%;
    left: 50%;
    margin-top: -24px;
    margin-left: -24px;
    background: transparent url(/assets/ring2-4ea6919e0c6eeeb098069cbda0757a0fa5a05d5794f9cebb017d05558b5b87fc.svg) no-repeat center center;
    background-size: auto auto;
    z-index: 9999;
    display: none
}

#contact_form.loading .spinner {
    display: block
}

#contact_form.loading .field {
    opacity: .5;
    pointer-events: none
}

#contact_form.loading button,
#contact_form.loading button:hover,
#contact_form.loading button:active {
    color: #16364f;
    transform: scale(1);
    cursor: progress
}

#contact_form.loading button svg path,
#contact_form.loading button svg polygon,
#contact_form.loading button:hover svg path,
#contact_form.loading button:hover svg polygon,
#contact_form.loading button:active svg path,
#contact_form.loading button:active svg polygon {
    fill: #16364f
}

#contact_form input[type=text],
input[type=password],
#contact_form textarea,
#contact_form label {
    font-size: 22px;
    line-height: normal
}

#contact_form input[type=text],
input[type=password],
#contact_form textarea {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    border-bottom: 1px solid #DBE1EC;
    margin: 0;
    padding: 12px 0;
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    resize: none;
    transition: all 200ms ease-in-out;
    color: #16364f
}

#contact_form textarea {
    min-height: 104px;
    padding-right: 50px
}

#contact_form button {
    background: transparent;
    appearance: none;
    border: 0;
    line-height: 34px;
    display: inline-block;
    margin: 0;
    padding: 0;
    font-size: 28px;
    color: #32bbdb;
    font-weight: 300;
    text-decoration: none;
    -webkit-transition: color 0.2s ease-in-out, transform 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: color 0.1s ease-in-out, transform 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

#contact_form button strong {
    font-weight: 400
}

#contact_form button svg {
    position: relative;
    top: 8px;
    left: 6px;
    display: inline-block
}

#contact_form button svg path,
#contact_form button svg polygon {
    fill: #00b5ec;
    -webkit-transition: fill .1s ease-in-out;
    transition: fill .1s ease-in-out
}

#contact_form button:hover,
#contact_form button:focus {
    color: #16364f
}

#contact_form button:hover svg path,
#contact_form button:hover svg polygon,
#contact_form button:focus svg path,
#contact_form button:focus svg polygon {
    fill: #16364f
}

#contact_form button:active {
    -webkit-transform: scale(0.9, 0.9);
    transform: scale(0.9, 0.9)
}

#contact_form button:disabled {
    color: rgba(22, 54, 79, 0.3)
}

#contact_form button:disabled svg path,
#contact_form button:disabled svg polygon {
    fill: rgba(22, 54, 79, 0.3)
}

#contact_form button:disabled:hover {
    color: rgba(22, 54, 79, 0.3)
}

#contact_form button:disabled:hover svg path,
#contact_form button:disabled:hover svg polygon {
    fill: rgba(22, 54, 79, 0.3)
}

#contact_form .actions {
    position: relative
}

#contact_form .field {
    margin-bottom: 35px;
    position: relative
}

#contact_form .field:before,
#contact_form .field:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 32px;
    width: 32px;
    height: 32px;
    opacity: 0;
    right: 30px;
    transition: all 150ms ease-in-out
}

#contact_form .field:after {
    background-image: url(/assets/WrongIcon-42238dbfac71905f3fcf692b14c6f2296dfbeee246ae733af3fa02422f33e554.svg)
}

#contact_form .field:before {
    background-image: url(/assets/CheckIcon-1063c613ff1ae1adbe3f52b5a6bcd062be4222c31cc50379520cb181ac7935cf.svg)
}

#contact_form .field label {
    position: absolute;
    top: 12px;
    left: 0;
    transition: all 200ms ease-in-out;
    color: #b7c2c9
}

#contact_form .field.focus input[type=text],
#contact_form .field.focus textarea {
    color: #1FBDF0
}

#contact_form .field.focus input[type=text],
#contact_form .field.focus textarea {
    border-color: #1FBDF0
}

#contact_form .field.focus label,
#contact_form .field.dirty label {
    top: -10px;
    font-size: 15px
}

#contact_form .field.dirty:before {
    right: 15px;
    opacity: 1
}

#contact_form .field.error input[type=text],
#contact_form .field.error textarea {
    color: #F63500
}

#contact_form .field.error:after {
    right: 15px;
    opacity: 1
}

.form-group,
.form-control {
    color: black;
}