@charset "UTF-8";
.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
}
#menu-item-6481{width:auto !important;}
#menu-item-6483{width:auto !important;}
#menu-item-6480{width:auto !important;}


#menu-item-6482{width:auto !important;}

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

@-webkit-keyframes bounce {
    0%,
    20%,
    53%,
    80%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    40%,
    43% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0)
    }
    70% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0)
    }
    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0)
    }
}

@keyframes bounce {
    0%,
    20%,
    53%,
    80%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    40%,
    43% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -30px, 0);
        -ms-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0)
    }
    70% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0);
        -ms-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0)
    }
    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        -ms-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0)
    }
}

.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom
}

@-webkit-keyframes flash {
    0%,
    50%,
    100% {
        opacity: 1
    }
    25%,
    75% {
        opacity: 0
    }
}

@keyframes flash {
    0%,
    50%,
    100% {
        opacity: 1
    }
    25%,
    75% {
        opacity: 0
    }
}

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

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05)
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@keyframes pulse {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        -ms-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05)
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

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

@-webkit-keyframes rubberBand {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1)
    }
    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1)
    }
    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1)
    }
    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1)
    }
    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1)
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@keyframes rubberBand {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        -ms-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1)
    }
    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        -ms-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1)
    }
    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        -ms-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1)
    }
    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        -ms-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1)
    }
    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        -ms-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1)
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

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

@-webkit-keyframes shake {
    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }
    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
}

@keyframes shake {
    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        -ms-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }
    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        -ms-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
}

@keyframes compass-ring {
    0% {
        -webkit-transform: scale(0.9);
        -moz-transform: scale(0.9);
        -ms-transform: scale(0.9);
        transform: scale(0.9);
        opacity: 0
    }
    35% {
        opacity: 0.05
    }
    50% {
        opacity: 0.05
    }
    100% {
        -webkit-transform: scale(1.6);
        -moz-transform: scale(1.6);
        -ms-transform: scale(1.6);
        transform: scale(1.6);
        opacity: 0
    }
}

@-webkit-keyframes compass-ring {
    0% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
        opacity: 0
    }
    35% {
        opacity: 0.05
    }
    50% {
        opacity: 0.05
    }
    100% {
        -webkit-transform: scale(1.6);
        transform: scale(1.6);
        opacity: 0
    }
}

@keyframes sessions-ring {
    0% {
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);
        opacity: 0
    }
    25% {
        opacity: 1
    }
    75% {
        opacity: 1
    }
    100% {
        -webkit-transform: scale(1.4);
        -moz-transform: scale(1.4);
        -ms-transform: scale(1.4);
        transform: scale(1.4);
        opacity: 0
    }
}

@-webkit-keyframes sessions-ring {
    0% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
        opacity: 0
    }
    25% {
        opacity: 1
    }
    75% {
        opacity: 1
    }
    100% {
        -webkit-transform: scale(1.4);
        transform: scale(1.4);
        opacity: 0
    }
}

@keyframes rotate {
    0% {
        -webkit-transform: rotate(225deg);
        -moz-transform: rotate(225deg);
        -ms-transform: rotate(225deg);
        transform: rotate(225deg)
    }
    100% {
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        -ms-transform: rotate(315deg);
        transform: rotate(315deg)
    }
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(225deg);
        transform: rotate(225deg)
    }
    100% {
        -webkit-transform: rotate(315deg);
        transform: rotate(315deg)
    }
}

@keyframes marker-ring {
    0% {
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
        opacity: 0
    }
    35% {
        opacity: 1
    }
    50% {
        opacity: 1
    }
    100% {
        -webkit-transform: scale(1.6);
        -moz-transform: scale(1.6);
        -ms-transform: scale(1.6);
        transform: scale(1.6);
        opacity: 0
    }
}

@-webkit-keyframes marker-ring {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0
    }
    35% {
        opacity: 1
    }
    50% {
        opacity: 1
    }
    100% {
        -webkit-transform: scale(1.6);
        transform: scale(1.6);
        opacity: 0
    }
}

@keyframes center-pulsate {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
    5% {
        -webkit-transform: scale(0.6);
        -moz-transform: scale(0.6);
        -ms-transform: scale(0.6);
        transform: scale(0.6);
        opacity: 0.7
    }
    15% {
        -webkit-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -ms-transform: scale(1.5);
        transform: scale(1.5);
        opacity: 1
    }
    25% {
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);
        opacity: 0.9
    }
    35% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
    45% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
    55% {
        -webkit-transform: scale(0.6);
        -moz-transform: scale(0.6);
        -ms-transform: scale(0.6);
        transform: scale(0.6);
        opacity: 0.7
    }
    65% {
        -webkit-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -ms-transform: scale(1.5);
        transform: scale(1.5);
        opacity: 1
    }
    75% {
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);
        opacity: 0.9
    }
    85% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

@-webkit-keyframes center-pulsate {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
    5% {
        -webkit-transform: scale(0.6);
        transform: scale(0.6);
        opacity: 0.7
    }
    15% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
        opacity: 1
    }
    25% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
        opacity: 0.9
    }
    35% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
    55% {
        -webkit-transform: scale(0.6);
        transform: scale(0.6);
        opacity: 0.7
    }
    65% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
        opacity: 1
    }
    75% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
        opacity: 0.9
    }
    85% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

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

@-webkit-keyframes swing {
    20% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg)
    }
    40% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg)
    }
    60% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg)
    }
    80% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg)
    }
    100% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg)
    }
}

@keyframes swing {
    20% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        -ms-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg)
    }
    40% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        -ms-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg)
    }
    60% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        -ms-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg)
    }
    80% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        -ms-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg)
    }
    100% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        -ms-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg)
    }
}

.swing {
    -webkit-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing
}

@-webkit-keyframes tada {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
    10%,
    20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg)
    }
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
    }
    40%,
    60%,
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@keyframes tada {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
    10%,
    20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
        -ms-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg)
    }
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
    }
    40%,
    60%,
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

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

@-webkit-keyframes wobble {
    0% {
        -webkit-transform: none;
        transform: none
    }
    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)
    }
    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
    }
    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)
    }
    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
    }
    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
    }
    100% {
        -webkit-transform: none;
        transform: none
    }
}

@keyframes wobble {
    0% {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        -ms-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)
    }
    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        -ms-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
    }
    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        -ms-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)
    }
    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        -ms-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
    }
    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        -ms-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
    }
    100% {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

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

@-webkit-keyframes bounceIn {
    0%,
    20%,
    40%,
    60%,
    80%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3)
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }
    40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03)
    }
    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97)
    }
    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@keyframes bounceIn {
    0%,
    20%,
    40%,
    60%,
    80%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        -ms-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3)
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        -ms-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }
    40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        -ms-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        -ms-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03)
    }
    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        -ms-transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97)
    }
    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

.bounceIn {
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
    -webkit-animation-duration: .75s;
    animation-duration: .75s
}

@-webkit-keyframes bounceInDown {
    0%,
    60%,
    75%,
    90%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0)
    }
    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }
    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0)
    }
    100% {
        -webkit-transform: none;
        transform: none
    }
}

@keyframes bounceInDown {
    0%,
    60%,
    75%,
    90%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        -ms-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        -ms-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0)
    }
    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        -ms-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }
    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        -ms-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0)
    }
    100% {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

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

@-webkit-keyframes bounceInLeft {
    0%,
    60%,
    75%,
    90%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0)
    }
    75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }
    90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0)
    }
    100% {
        -webkit-transform: none;
        transform: none
    }
}

@keyframes bounceInLeft {
    0%,
    60%,
    75%,
    90%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        -ms-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        -ms-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0)
    }
    75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        -ms-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }
    90% {
        -webkit-transform: translate3d(5px, 0, 0);
        -ms-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0)
    }
    100% {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

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

@-webkit-keyframes bounceInRight {
    0%,
    60%,
    75%,
    90%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0)
    }
    75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0)
    }
    100% {
        -webkit-transform: none;
        transform: none
    }
}

@keyframes bounceInRight {
    0%,
    60%,
    75%,
    90%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0);
        -ms-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        -ms-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0)
    }
    75% {
        -webkit-transform: translate3d(10px, 0, 0);
        -ms-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        -ms-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0)
    }
    100% {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

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

@-webkit-keyframes bounceInUp {
    0%,
    60%,
    75%,
    90%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }
    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }
    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0)
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes bounceInUp {
    0%,
    60%,
    75%,
    90%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        -ms-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        -ms-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }
    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        -ms-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }
    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        -ms-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0)
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

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

@-webkit-keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9)
    }
    50%,
    55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3)
    }
}

@keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        -ms-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9)
    }
    50%,
    55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        -ms-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        -ms-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3)
    }
}

.bounceOut {
    -webkit-animation-name: bounceOut;
    animation-name: bounceOut;
    -webkit-animation-duration: .75s;
    animation-duration: .75s
}

@-webkit-keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }
    40%,
    45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }
}

@keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0, 10px, 0);
        -ms-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }
    40%,
    45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        -ms-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        -ms-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }
}

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

@-webkit-keyframes bounceOutLeft {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
    }
}

@keyframes bounceOutLeft {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(20px, 0, 0);
        -ms-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        -ms-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
    }
}

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

@-webkit-keyframes bounceOutRight {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(-20px, 0, 0);
        transform: translate3d(-20px, 0, 0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
    }
}

@keyframes bounceOutRight {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(-20px, 0, 0);
        -ms-transform: translate3d(-20px, 0, 0);
        transform: translate3d(-20px, 0, 0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        -ms-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
    }
}

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

@-webkit-keyframes bounceOutUp {
    20% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }
    40%,
    45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }
}

@keyframes bounceOutUp {
    20% {
        -webkit-transform: translate3d(0, -10px, 0);
        -ms-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }
    40%,
    45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0);
        -ms-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        -ms-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }
}

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

@-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 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);
        -ms-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

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

@-webkit-keyframes fadeInDownBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInDownBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        -ms-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

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

@-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);
        -ms-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

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

@-webkit-keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        -ms-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

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

@-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);
        -ms-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

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

@-webkit-keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        -ms-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

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

@-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);
        -ms-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

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

@-webkit-keyframes fadeInUpBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInUpBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        -ms-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

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

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

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

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

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

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

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

@-webkit-keyframes fadeOutDownBig {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }
}

@keyframes fadeOutDownBig {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        -ms-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }
}

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

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

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

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

@-webkit-keyframes fadeOutLeftBig {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
    }
}

@keyframes fadeOutLeftBig {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        -ms-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
    }
}

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

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

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

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

@-webkit-keyframes fadeOutRightBig {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
    }
}

@keyframes fadeOutRightBig {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        -ms-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
    }
}

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

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

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

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

@-webkit-keyframes fadeOutUpBig {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }
}

@keyframes fadeOutUpBig {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        -ms-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }
}

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

@-webkit-keyframes flip {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    40% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    50% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    80% {
        -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
        transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
}

@keyframes flip {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        -ms-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    40% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        -ms-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    50% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        -ms-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    80% {
        -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
        -ms-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
        transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    100% {
        -webkit-transform: perspective(400px);
        -ms-transform: perspective(400px);
        transform: perspective(400px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
}

.animated.flip {
    -webkit-backface-visibility: visible;
    -ms-backface-visibility: visible;
    backface-visibility: visible;
    -webkit-animation-name: flip;
    animation-name: flip
}

@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in
    }
    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1
    }
    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
    }
    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

@keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in
    }
    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        -ms-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1
    }
    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        -ms-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
    }
    100% {
        -webkit-transform: perspective(400px);
        -ms-transform: perspective(400px);
        transform: perspective(400px)
    }
}

.flipInX {
    -webkit-backface-visibility: visible !important;
    -ms-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX
}

@-webkit-keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in
    }
    60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1
    }
    80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg)
    }
    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

@keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -ms-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -ms-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in
    }
    60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        -ms-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1
    }
    80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        -ms-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg)
    }
    100% {
        -webkit-transform: perspective(400px);
        -ms-transform: perspective(400px);
        transform: perspective(400px)
    }
}

.flipInY {
    -webkit-backface-visibility: visible !important;
    -ms-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
    animation-name: flipInY
}

@-webkit-keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
    30% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1
    }
    100% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0
    }
}

@keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px);
        -ms-transform: perspective(400px);
        transform: perspective(400px)
    }
    30% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1
    }
    100% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0
    }
}

.flipOutX {
    -webkit-animation-name: flipOutX;
    animation-name: flipOutX;
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
    -webkit-backface-visibility: visible !important;
    -ms-backface-visibility: visible !important;
    backface-visibility: visible !important
}

@-webkit-keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
    30% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1
    }
    100% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0
    }
}

@keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px);
        -ms-transform: perspective(400px);
        transform: perspective(400px)
    }
    30% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        -ms-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1
    }
    100% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -ms-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0
    }
}

.flipOutY {
    -webkit-backface-visibility: visible !important;
    -ms-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipOutY;
    animation-name: flipOutY;
    -webkit-animation-duration: .75s;
    animation-duration: .75s
}

@-webkit-keyframes lightSpeedIn {
    0% {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0
    }
    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1
    }
    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1
    }
    100% {
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

@keyframes lightSpeedIn {
    0% {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        -ms-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0
    }
    60% {
        -webkit-transform: skewX(20deg);
        -ms-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1
    }
    80% {
        -webkit-transform: skewX(-5deg);
        -ms-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1
    }
    100% {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        opacity: 1
    }
}

.lightSpeedIn {
    -webkit-animation-name: lightSpeedIn;
    animation-name: lightSpeedIn;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@-webkit-keyframes lightSpeedOut {
    0% {
        opacity: 1
    }
    100% {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0
    }
}

@keyframes lightSpeedOut {
    0% {
        opacity: 1
    }
    100% {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        -ms-transform: translate3d(100%, 0, 0) skewX(30deg);
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0
    }
}

.lightSpeedOut {
    -webkit-animation-name: lightSpeedOut;
    animation-name: lightSpeedOut;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
}

@-webkit-keyframes rotateIn {
    0% {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0
    }
    100% {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

@keyframes rotateIn {
    0% {
        -webkit-transform-origin: center;
        -ms-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
        -ms-transform: rotate3d(0, 0, 1, -200deg);
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0
    }
    100% {
        -webkit-transform-origin: center;
        -ms-transform-origin: center;
        transform-origin: center;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        opacity: 1
    }
}

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

@-webkit-keyframes rotateInDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }
    100% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

@keyframes rotateInDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        -ms-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }
    100% {
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        opacity: 1
    }
}

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

@-webkit-keyframes rotateInDownRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
    }
    100% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

@keyframes rotateInDownRight {
    0% {
        -webkit-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        -ms-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
    }
    100% {
        -webkit-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        opacity: 1
    }
}

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

@-webkit-keyframes rotateInUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
    }
    100% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

@keyframes rotateInUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        -ms-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
    }
    100% {
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        opacity: 1
    }
}

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

@-webkit-keyframes rotateInUpRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -90deg);
        transform: rotate3d(0, 0, 1, -90deg);
        opacity: 0
    }
    100% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

@keyframes rotateInUpRight {
    0% {
        -webkit-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -90deg);
        -ms-transform: rotate3d(0, 0, 1, -90deg);
        transform: rotate3d(0, 0, 1, -90deg);
        opacity: 0
    }
    100% {
        -webkit-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        opacity: 1
    }
}

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

@-webkit-keyframes rotateOut {
    0% {
        -webkit-transform-origin: center;
        transform-origin: center;
        opacity: 1
    }
    100% {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, 200deg);
        transform: rotate3d(0, 0, 1, 200deg);
        opacity: 0
    }
}

@keyframes rotateOut {
    0% {
        -webkit-transform-origin: center;
        -ms-transform-origin: center;
        transform-origin: center;
        opacity: 1
    }
    100% {
        -webkit-transform-origin: center;
        -ms-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, 200deg);
        -ms-transform: rotate3d(0, 0, 1, 200deg);
        transform: rotate3d(0, 0, 1, 200deg);
        opacity: 0
    }
}

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

@-webkit-keyframes rotateOutDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1
    }
    100% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(0, 0, 1, 45deg);
        transform: rotate(0, 0, 1, 45deg);
        opacity: 0
    }
}

@keyframes rotateOutDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1
    }
    100% {
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(0, 0, 1, 45deg);
        -ms-transform: rotate(0, 0, 1, 45deg);
        transform: rotate(0, 0, 1, 45deg);
        opacity: 0
    }
}

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

@-webkit-keyframes rotateOutDownRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1
    }
    100% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }
}

@keyframes rotateOutDownRight {
    0% {
        -webkit-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1
    }
    100% {
        -webkit-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        -ms-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }
}

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

@-webkit-keyframes rotateOutUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1
    }
    100% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }
}

@keyframes rotateOutUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1
    }
    100% {
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        -ms-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }
}

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

@-webkit-keyframes rotateOutUpRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1
    }
    100% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 90deg);
        transform: rotate3d(0, 0, 1, 90deg);
        opacity: 0
    }
}

@keyframes rotateOutUpRight {
    0% {
        -webkit-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1
    }
    100% {
        -webkit-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 90deg);
        -ms-transform: rotate3d(0, 0, 1, 90deg);
        transform: rotate3d(0, 0, 1, 90deg);
        opacity: 0
    }
}

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

@-webkit-keyframes hinge {
    0% {
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    20%,
    60% {
        -webkit-transform: rotate3d(0, 0, 1, 80deg);
        transform: rotate3d(0, 0, 1, 80deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    40%,
    80% {
        -webkit-transform: rotate3d(0, 0, 1, 60deg);
        transform: rotate3d(0, 0, 1, 60deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1
    }
    100% {
        -webkit-transform: translate3d(0, 700px, 0);
        transform: translate3d(0, 700px, 0);
        opacity: 0
    }
}

@keyframes hinge {
    0% {
        -webkit-transform-origin: top left;
        -ms-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    20%,
    60% {
        -webkit-transform: rotate3d(0, 0, 1, 80deg);
        -ms-transform: rotate3d(0, 0, 1, 80deg);
        transform: rotate3d(0, 0, 1, 80deg);
        -webkit-transform-origin: top left;
        -ms-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    40%,
    80% {
        -webkit-transform: rotate3d(0, 0, 1, 60deg);
        -ms-transform: rotate3d(0, 0, 1, 60deg);
        transform: rotate3d(0, 0, 1, 60deg);
        -webkit-transform-origin: top left;
        -ms-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1
    }
    100% {
        -webkit-transform: translate3d(0, 700px, 0);
        -ms-transform: translate3d(0, 700px, 0);
        transform: translate3d(0, 700px, 0);
        opacity: 0
    }
}

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

@-webkit-keyframes rollIn {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes rollIn {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
        -ms-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

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

@-webkit-keyframes rollOut {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
        transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)
    }
}

@keyframes rollOut {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
        -ms-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
        transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)
    }
}

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

@-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);
        -ms-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 zoomInDown {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1)
    }
}

@keyframes zoomInDown {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1)
    }
}

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

@-webkit-keyframes zoomInLeft {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1)
    }
}

@keyframes zoomInLeft {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
        -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
        -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1)
    }
}

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

@-webkit-keyframes zoomInRight {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1)
    }
}

@keyframes zoomInRight {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1)
    }
}

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

@-webkit-keyframes zoomInUp {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1)
    }
}

@keyframes zoomInUp {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
        -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1)
    }
}

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

@-webkit-keyframes zoomOut {
    0% {
        opacity: 1
    }
    50% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3)
    }
    100% {
        opacity: 0
    }
}

@keyframes zoomOut {
    0% {
        opacity: 1
    }
    50% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        -ms-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3)
    }
    100% {
        opacity: 0
    }
}

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

@-webkit-keyframes zoomOutDown {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1)
    }
}

@keyframes zoomOutDown {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
        -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
        -webkit-transform-origin: center bottom;
        -ms-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1)
    }
}

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

@-webkit-keyframes zoomOutLeft {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
        transform: scale(0.1) translate3d(-2000px, 0, 0);
        -webkit-transform-origin: left center;
        transform-origin: left center
    }
}

@keyframes zoomOutLeft {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
        -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
        -ms-transform: scale(0.1) translate3d(-2000px, 0, 0);
        transform: scale(0.1) translate3d(-2000px, 0, 0);
        -webkit-transform-origin: left center;
        -ms-transform-origin: left center;
        transform-origin: left center
    }
}

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

@-webkit-keyframes zoomOutRight {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
        transform: scale(0.1) translate3d(2000px, 0, 0);
        -webkit-transform-origin: right center;
        transform-origin: right center
    }
}

@keyframes zoomOutRight {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
        -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
        -ms-transform: scale(0.1) translate3d(2000px, 0, 0);
        transform: scale(0.1) translate3d(2000px, 0, 0);
        -webkit-transform-origin: right center;
        -ms-transform-origin: right center;
        transform-origin: right center
    }
}

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

@-webkit-keyframes zoomOutUp {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1)
    }
}

@keyframes zoomOutUp {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
        -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
        -webkit-transform-origin: center bottom;
        -ms-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1)
    }
}

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

.swiper-container {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    z-index: 1
}

.swiper-container-no-flexbox .swiper-slide {
    float: left
}

.swiper-container-vertical>.swiper-wrapper {
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    -ms-transition-property: -ms-transform;
    transition-property: transform;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box
}

.swiper-container-android .swiper-slide,
.swiper-wrapper {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.swiper-container-multirow>.swiper-wrapper {
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap
}

.swiper-container-free-mode>.swiper-wrapper {
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -ms-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    margin: 0 auto
}

.swiper-slide {
    -webkit-flex-shrink: 0;
    -ms-flex: 0 0 auto;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative
}

.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
    height: auto
}

.swiper-container-autoheight .swiper-wrapper {
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-transition-property: -webkit-transform, height;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    -ms-transition-property: -ms-transform;
    transition-property: transform, height
}

.swiper-container .swiper-notification {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0;
    z-index: -1000
}

.swiper-wp8-horizontal {
    -ms-touch-action: pan-y;
    touch-action: pan-y
}

.swiper-wp8-vertical {
    -ms-touch-action: pan-x;
    touch-action: pan-x
}

.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: 50%;
    width: 27px;
    height: 44px;
    margin-top: -22px;
    z-index: 10;
    cursor: pointer;
    -moz-background-size: 27px 44px;
    -webkit-background-size: 27px 44px;
    background-size: 27px 44px;
    background-position: center;
    background-repeat: no-repeat
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    opacity: .35;
    cursor: auto;
    pointer-events: none
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
    left: 10px;
    right: auto
}

.swiper-button-prev.swiper-button-black,
.swiper-container-rtl .swiper-button-next.swiper-button-black {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")
}

.swiper-button-prev.swiper-button-white,
.swiper-container-rtl .swiper-button-next.swiper-button-white {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")
}

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
    right: 10px;
    left: auto
}

.swiper-button-next.swiper-button-black,
.swiper-container-rtl .swiper-button-prev.swiper-button-black {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")
}

.swiper-button-next.swiper-button-white,
.swiper-container-rtl .swiper-button-prev.swiper-button-white {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")
}

.swiper-pagination {
    position: absolute;
    text-align: center;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    z-index: 10
}

.swiper-pagination.swiper-pagination-hidden {
    opacity: 0
}

.swiper-container-horizontal>.swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: 10px;
    left: 0;
    width: 100%
}

.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 100%;
    background: #000;
    opacity: .2
}

button.swiper-pagination-bullet {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -webkit-appearance: none;
    appearance: none
}

.swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer
}

.swiper-pagination-white .swiper-pagination-bullet {
    background: #fff
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: #007aff
}

.swiper-pagination-white .swiper-pagination-bullet-active {
    background: #fff
}

.swiper-pagination-black .swiper-pagination-bullet-active {
    background: #000
}

.swiper-container-vertical>.swiper-pagination-bullets {
    right: 10px;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    -moz-transform: translate3d(0, -50%, 0);
    -o-transform: translate(0, -50%);
    -ms-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0)
}

.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 5px 0;
    display: block
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 5px
}

.swiper-pagination-progress {
    background: rgba(0, 0, 0, 0.25);
    position: absolute
}

.swiper-pagination-progress .swiper-pagination-progressbar {
    background: #007aff;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: left top;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    transform-origin: left top
}

.swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar {
    -webkit-transform-origin: right top;
    -moz-transform-origin: right top;
    -ms-transform-origin: right top;
    -o-transform-origin: right top;
    transform-origin: right top
}

.swiper-container-horizontal>.swiper-pagination-progress {
    width: 100%;
    height: 4px;
    left: 0;
    top: 0
}

.swiper-container-vertical>.swiper-pagination-progress {
    width: 4px;
    height: 100%;
    left: 0;
    top: 0
}

.swiper-pagination-progress.swiper-pagination-white {
    background: rgba(255, 255, 255, 0.5)
}

.swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar {
    background: #fff
}

.swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar {
    background: #000
}

.swiper-container-3d {
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    -o-perspective: 1200px;
    perspective: 1200px
}

.swiper-container-3d .swiper-cube-shadow,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-wrapper {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10
}

.swiper-container-3d .swiper-slide-shadow-left {
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(transparent));
    background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), transparent);
    background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0.5), transparent);
    background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), transparent);
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), transparent)
}

.swiper-container-3d .swiper-slide-shadow-right {
    background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(transparent));
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), transparent);
    background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), transparent);
    background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), transparent);
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent)
}

.swiper-container-3d .swiper-slide-shadow-top {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(transparent));
    background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), transparent);
    background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5), transparent);
    background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), transparent);
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent)
}

.swiper-container-3d .swiper-slide-shadow-bottom {
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(transparent));
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), transparent);
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), transparent);
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), transparent);
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent)
}

.swiper-container-coverflow .swiper-wrapper,
.swiper-container-flip .swiper-wrapper {
    -ms-perspective: 1200px
}

.swiper-container-cube,
.swiper-container-flip {
    overflow: visible
}

.swiper-container-cube .swiper-slide,
.swiper-container-flip .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1
}

.swiper-container-cube .swiper-slide .swiper-slide,
.swiper-container-flip .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-active .swiper-slide-active,
.swiper-container-flip .swiper-slide-active,
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-container-cube .swiper-slide-shadow-bottom,
.swiper-container-cube .swiper-slide-shadow-left,
.swiper-container-cube .swiper-slide-shadow-right,
.swiper-container-cube .swiper-slide-shadow-top,
.swiper-container-flip .swiper-slide-shadow-bottom,
.swiper-container-flip .swiper-slide-shadow-left,
.swiper-container-flip .swiper-slide-shadow-right,
.swiper-container-flip .swiper-slide-shadow-top {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-container-cube .swiper-slide {
    visibility: hidden;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    width: 100%;
    height: 100%
}

.swiper-container-cube.swiper-container-rtl .swiper-slide {
    -webkit-transform-origin: 100% 0;
    -moz-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0
}

.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-next+.swiper-slide,
.swiper-container-cube .swiper-slide-prev {
    pointer-events: auto;
    visibility: visible
}

.swiper-container-cube .swiper-cube-shadow {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .6;
    -webkit-filter: blur(50px);
    filter: blur(50px);
    z-index: 0
}

.swiper-container-fade.swiper-container-free-mode .swiper-slide {
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -ms-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.swiper-container-fade .swiper-slide {
    pointer-events: none;
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    transition-property: opacity
}

.swiper-container-fade .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-scrollbar {
    border-radius: 10px;
    position: relative;
    -ms-touch-action: none;
    background: rgba(0, 0, 0, 0.1)
}

.swiper-container-horizontal>.swiper-scrollbar {
    position: absolute;
    left: 1%;
    bottom: 3px;
    z-index: 50;
    height: 5px;
    width: 98%
}

.swiper-container-vertical>.swiper-scrollbar {
    position: absolute;
    right: 3px;
    top: 1%;
    z-index: 50;
    width: 5px;
    height: 98%
}

.swiper-scrollbar-drag {
    height: 100%;
    width: 100%;
    position: relative;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    left: 0;
    top: 0
}

.swiper-scrollbar-cursor-drag {
    cursor: move
}

.swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    -webkit-transform-origin: 50%;
    -moz-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
    -moz-animation: swiper-preloader-spin 1s steps(12, end) infinite;
    animation: swiper-preloader-spin 1s steps(12, end) infinite
}

.swiper-lazy-preloader:after {
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-position: 50%;
    -webkit-background-size: 100%;
    background-size: 100%;
    background-repeat: no-repeat
}

.swiper-lazy-preloader-white:after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
}

@-webkit-keyframes swiper-preloader-spin {
    100% {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes swiper-preloader-spin {
    100% {
        transform: rotate(360deg)
    }
}

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0 !important;
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    -webkit-padding-start: 0;
    margin: 0;
    padding: 0;
}

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

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

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

[hidden] {
    display: none
}

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

body {
    margin: 0;
    font-size: 10px;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale
}

body,
button,
input,
select,
textarea {
    color: #000222
}

a:focus {
    outline: thin dotted
}

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

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

b,
strong {
    font-weight: bold
}

blockquote {
    margin: 1em 40px
}

dfn {
    font-style: italic
}

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

ins {
    background: #ffff99;
    color: black;
    text-decoration: none
}

mark {
    background: yellow;
    color: black;
    font-style: italic;
    font-weight: bold
}

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

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

q {
    quotes: none
}

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

small {
    font-size: 85%
}

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

sup {
    top: -0.5em
}

sub {
    bottom: -0.25em
}

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

dd {
    margin: 0
}

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

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

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

figure {
    margin: 0
}

form {
    margin: 0
}

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

label {
    cursor: pointer;
    font-size: 12px;
}

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

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

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

table button,
table input {
    *overflow: auto
}

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

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

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-decoration {
    -webkit-appearance: none
}

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

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

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

table {
    border-collapse: collapse;
    border-spacing: 0;
        font-size: 13px;
}

td {
    vertical-align: top
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0px
}

@font-face {
    font-family: "Conv_CircularStd-Book";
    src: url(/assets/CircularStd-Book-e206ab8ede6c4708f0cd846098c1ee7b.eot);
    src: local("?"), url(/assets/CircularStd-Book-aa5d8694fadf588674b731c82c5eb238.woff) format("woff"), url(/assets/CircularStd-Book-20dcb3d227760f61fda87598d89c22c5.ttf) format("truetype"), url(/assets/CircularStd-Book-0668925c98c40572487ba40b6eb73e1a.svg) format("svg");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "Conv_CircularStd-Black";
    src: url(/assets/CircularStd-Black-7f0134997f52900e84f2313d34235750.eot);
    src: local("?"), url(/assets/CircularStd-Black-a95798b6be8712280e44c707eeb84ebd.woff) format("woff"), url(/assets/CircularStd-Black-a668ec3569157af9074b3abf3ae94a8a.ttf) format("truetype"), url(/assets/CircularStd-Black-5eb5a45e89acf61e2b1d62504dd3b267.svg) format("svg");
    font-weight: normal;
    font-style: normal
}

html {
    font-size: 16px
}

html,
body,
#pages-wrapper {
    width: 100%;
    height: 100%;
}

main {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    font-family: "Conv_CircularStd-Book", Helvetica, sans-serif;
    overflow: hidden;
}

#pages-wrapper {
    position: relative;
    z-index: 1
}

.page {
    padding-top: 68px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    z-index: 1;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    overflow: hidden;
    -webkit-overflow-scrolling: touch
}

.page.active {
    overflow-x: hidden;
    overflow-y: scroll;
    position: fixed;
    background: transparent;
    z-index: 4;
}

.page .container {
    position: relative;
    width: 100%
}

.page .outer-constrain {
    max-width: 1600px;
    margin: 0 auto;
    overflow: hidden;
    position: relative
}

.page section {
    margin-top: 47px;
    /* position: relative; */
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    /* -webkit-transform: translateZ(0); */
    /* transform: translateZ(0); */
    height: fit-content !important;
}

.page section:not(.marquee) {
    z-index: 9;
    background-color: white
}

.page section.gray {
    background-color: #f5f6fa
}

.page section h2 {
    padding-top: 80px
}

.bottom {
    padding-bottom: 100px
}

.constrain {
    width: 820px;
    margin: 0 auto;
    position: relative;
    top: 141px;
    /* overflow: hidden; */
    min-height: 250px;
}

.pill {
    font-weight:bold;
    color :#0079b5;
    text-align: center;
    overflow: hidden;
    cursor: pointer;
    float: left
}

.pill a,
.pill span {
    text-decoration: none;
    text-transform: uppercase;
    line-height: 100%;
    overflow: hidden;
    display: inline-block;
    color: #22233e;
    border: 2px solid #ff1353;
    font-family: "Conv_CircularStd-Black", Helvetica, sans-serif;
    font-size: 13px;
    padding: 10px 44px;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px;
    -moz-transition: all 150ms;
    -webkit-transition: all 150ms;
    transition: all 150ms
}

.pill a:hover {
    text-decoration: none !important
}

.pill.enable-hover:hover,
.pill.mobile-active,
.pill.active {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent
}

.pill.enable-hover:hover a,
.pill.enable-hover:hover span,
.pill.mobile-active a,
.pill.mobile-active span,
.pill.active a,
.pill.active span {
    color: white;
    background-color: #ff1353
}

.pill.alt-hover-1.enable-hover:hover,
.pill.alt-hover-1.mobile-active,
.pill.alt-hover-1.active {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent
}

.pill.alt-hover-1.enable-hover:hover a,
.pill.alt-hover-1.enable-hover:hover span,
.pill.alt-hover-1.mobile-active a,
.pill.alt-hover-1.mobile-active span,
.pill.alt-hover-1.active a,
.pill.alt-hover-1.active span {
    color: #ff2d44 !important;
    background-color: white
}

.pill.alt-hover-2.enable-hover:hover,
.pill.alt-hover-2.mobile-active,
.pill.alt-hover-2.active {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent
}

.pill.alt-hover-2.enable-hover:hover a,
.pill.alt-hover-2.enable-hover:hover span,
.pill.alt-hover-2.mobile-active a,
.pill.alt-hover-2.mobile-active span,
.pill.alt-hover-2.active a,
.pill.alt-hover-2.active span {
   /* color: #00133e !important;*/
   color: #005caf !important;
   
    background-color: white
}

li .border-hover {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: transparent;
    border: 0px solid white;
    -moz-transition: border 300ms;
    -webkit-transition: border 300ms;
    transition: border 300ms;
    pointer-events: none;
    z-index: 3;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

li.enable-hover:hover,
li.mobile-active {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent
}

li.enable-hover:hover .border-hover,
li.mobile-active .border-hover {
    border-width: 10px
}

.common-pagination {
    overflow: hidden;
    *zoom: 1
}

.common-pagination li {
    cursor: pointer;
    float: left;
    width: 40px;
    height: 40px;
    border: 2px solid #ff1353;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    -moz-transition: all 150ms;
    -webkit-transition: all 150ms;
    transition: all 150ms
}

.common-pagination li.disabled {
    border-color: #e0e3eb
}

.common-pagination li.disabled>figure {
    background-position: -30px -78px
}

.common-pagination li.disabled:first-child>figure {
    background-position: -21px -78px
}

.common-pagination li>figure {
    text-indent: -119988px;
    overflow: hidden;
    text-align: left;
    text-transform: capitalize;
    background-image: url(sprites.png);
    background-repeat: no-repeat;
    background-position: -10px -78px;
    display: block;
    height: 14px;
    width: 8px;
    position: relative;
    top: 11px;
    left: 16px;
    z-index: 1
}

@media all and (-webkit-min-device-pixel-ratio: 2) {
    .common-pagination li>figure {
        background-image: url(sprites_2x.png);
        background-size: 500px 500px
    }
}

.common-pagination li a {
    text-decoration: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2
}

.common-pagination li:first-child {
    margin-right: 10px
}

.common-pagination li:first-child>figure {
    left: 13px;
    background-position: -1px -78px
}

.common-pagination li:not(.disabled).enable-hover:hover,
.common-pagination li:not(.disabled).mobile-active {
    background-color: #ff1353;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent
}

.common-pagination li:not(.disabled).enable-hover:hover>figure,
.common-pagination li:not(.disabled).mobile-active>figure {
    background-position: -50px -78px
}

.common-pagination li:not(.disabled).enable-hover:hover:first-child>figure,
.common-pagination li:not(.disabled).mobile-active:first-child>figure {
    background-position: -41px -78px
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400
}

h2 {
    padding-bottom: 64px;
    font-size: 40px
}

h2+p {
    font-family: "adobe-garamond-pro", serif;
    font-weight: 400;
    /*font-style: italic;*/
    color: #9898a6;
    padding-bottom: 80px;
    font-size: 30px
}

@-moz-document url-prefix() {
    h2+p {
        line-height: 36px
    }
}

a {
    color: #ff2261;
    text-decoration: none
}

a:hover {
    text-decoration: underline
}

a.hover-pink.enable-hover:hover,
a.hover-pink.mobile-active {
    -moz-transition: color 200ms;
    -webkit-transition: color 200ms;
    transition: color 200ms;
    color: #ff1353 !important;
    text-decoration: underline !important
}

.vertical-align {
    position: relative;
    top: 50%;
    -moz-transform: translateY(-50.1%);
    -ms-transform: translateY(-50.1%);
    -webkit-transform: translateY(-50.1%);
    transform: translateY(-50.1%)
}

.date,
.location {
    font-size: 11px;
    color: #aaaab2;
    text-transform: uppercase
}

.mobile-break {
    display: inline
}

.canvas-background {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    overflow: hidden
}

.canvas-background .canvas {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%
}

.text-effect {
    visibility: hidden
}

.particle-container {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%
}

.parallax-wrapper {
    overflow: hidden
}

.parallax-wrapper img {
    position: absolute;
    left: 50%;
    top: 0
}

.not-touch .parallax-wrapper img {
    min-height: 150%
}

.touch .parallax-wrapper img {
    height: 100%
}

.bottom-gradient {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px;
    background-image: -moz-linear-gradient(left, #31388d 0%, #753fa9 33.333%, #ff0762 66%, #f25632 100%);
    background-image: -webkit-linear-gradient(left, #31388d 0%, #753fa9 33.333%, #ff0762 66%, #f25632 100%);
    background-image: linear-gradient(to right, #31388d 0%, #753fa9 33.333%, #ff0762 66%, #f25632 100%)
}

@media (max-width: 880px) {
    .p-justify{
        text-align:justify !important;
        font-size:15px !important;
    }
    .content-grid-content ul li a{
        font-size:15px !important;
    }
    .strong-title-1{
        text-align: left;
    }
    .footer-inner-left{
        float: left;
    }
    .btn-enregistrer-submit {

    margin-bottom: 40px !important;
}
    .overview img{
        height:auto;
    }
.mobile-adress{
    padding-bottom:-20px !important;
}
    .logo-mobile{
        max-width: 100%;
height: auto;
margin-top: 0px !important;
opacity: 0.8;
        /*! position: relative; */
        margin-left: auto;
        margin-right: auto;
        /*! left: 14%; */
        display: block;
    }
    .page section {
    margin-top: 0 !important;
    }
    
        .footer-block-uiass>.block-section-1:first-child{
        
margin-top: 109px;
    }
    .footer-block {
    padding-top: 9px !important;
}
.content-grid-content {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.mobile-adress{
    margin-bottom:-35px !important;
}
    .float-left {margin-left:auto;margin-right: auto !important;width: 100% !important;}
.float-left img{
  margin-left:auto;
margin-right:auto;
width:100%;  
  height: auto;
}

    .float-right {margin-left:auto;margin-right: auto !important;width: 100% !important;}
.float-right img{
  margin-left:auto;
margin-right:auto;
width:100%;  
}


        span > .nav > li > a {

    padding-top: 7px !important;
    padding-bottom: 7px !important;
    height: auto !important;
    }
    .affix {
display:none !important;
}
    html .page {
        padding-top: 13px
    }
    html .page section h2 {
        padding-top: 22px;
        text-align: justify !important;
    }
    html .mobile-hide {
        display: block !important;
        width: 12%;
        float: right;
    }
    html h2 {
        font-size: 20px;
        padding-bottom: 23px
    }
    html h2+p {
        font-size: 18px;
        padding-bottom: 35px
    }
    html .page-pagination {
        display: none !important
    }
    html .constrain {
        padding-left: 16px;
        padding-right: 16px;
        width: 100%;
        margin-top: -48px;
    }
    html .bottom {
        padding-bottom: 42px
    }
    html .pill {
        font-size: 12px;
        width: 100%
    }
    html .pill a,
    html .pill span {
        width: 100%
    }
    html .mobile-break {
        display: block
    }
    html li.enable-hover:hover .border-hover,
    html li.mobile-active .border-hover {
        border-width: 5px
    }
}

@media (min-width: 540px) and (max-width: 880px) {
    #menu-background {

    width: 98.7% !important;
    }
    html .constrain {
        padding-left: 40px !important;
        padding-right: 40px !important
    }
}

@-webkit-keyframes svg-repeat-animation-left {
    0% {
        -moz-transform: translateX(-1%);
        -ms-transform: translateX(-1%);
        -webkit-transform: translateX(-1%);
        transform: translateX(-1%)
    }
    100% {
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }
}

@-moz-keyframes svg-repeat-animation-left {
    0% {
        -moz-transform: translateX(-1%);
        -ms-transform: translateX(-1%);
        -webkit-transform: translateX(-1%);
        transform: translateX(-1%)
    }
    100% {
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }
}

@-ms-keyframes svg-repeat-animation-left {
    0% {
        -moz-transform: translateX(-1%);
        -ms-transform: translateX(-1%);
        -webkit-transform: translateX(-1%);
        transform: translateX(-1%)
    }
    100% {
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }
}

@keyframes svg-repeat-animation-left {
    0% {
        -moz-transform: translateX(-1%);
        -ms-transform: translateX(-1%);
        -webkit-transform: translateX(-1%);
        transform: translateX(-1%)
    }
    100% {
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }
}

@-webkit-keyframes svg-repeat-animation-right {
    0% {
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
    100% {
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -webkit-transform: translateX(0%);
        transform: translateX(0%)
    }
}

@-moz-keyframes svg-repeat-animation-right {
    0% {
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
    100% {
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -webkit-transform: translateX(0%);
        transform: translateX(0%)
    }
}

@-ms-keyframes svg-repeat-animation-right {
    0% {
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
    100% {
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -webkit-transform: translateX(0%);
        transform: translateX(0%)
    }
}

@keyframes svg-repeat-animation-right {
    0% {
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
    100% {
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -webkit-transform: translateX(0%);
        transform: translateX(0%)
    }
}

.logo {
    position: relative;
    width: 199px;
}

.logo .svg-logo-gradient {
    opacity: 0;
    transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1)
}

.logo .svg-repeat-pattern-left {
    -o-animation: svg-repeat-animation-left 2s linear infinite;
    -moz-animation: svg-repeat-animation-left 2s linear infinite;
    -ms-animation: svg-repeat-animation-left 2s linear infinite;
    -webkit-animation: svg-repeat-animation-left 2s linear infinite;
    animation: svg-repeat-animation-left 2s linear infinite
}

.logo .svg-repeat-pattern-right {
    -o-animation: svg-repeat-animation-right 2s linear infinite;
    -moz-animation: svg-repeat-animation-right 2s linear infinite;
    -ms-animation: svg-repeat-animation-right 2s linear infinite;
    -webkit-animation: svg-repeat-animation-right 2s linear infinite;
    animation: svg-repeat-animation-right 2s linear infinite
}

.logo svg {
    position: relative;
    width: 20px;
    height: 100%;
    width: 163px;
    left: unset;
    display: block;
    margin-left: auto;
    margin-right: auto;
    stroke: #000222;
    overflow: visible;
    transition: stroke 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.logo .light svg {
    stroke: white
}

.logo .dark svg {
    stroke: #000222
}

.logo.transparent-menu .dark svg {
    stroke: white
}

.has-hover.logo:hover .dark svg,
.has-hover.logo:hover .light svg {
    stroke: transparent
}

.has-hover.logo:hover .dark .svg-gradient-pattern,
.has-hover.logo:hover .light .svg-gradient-pattern {
    height: 100%;
    width: 300%
}

.has-hover.logo:hover .dark .svg-logo-gradient,
.has-hover.logo:hover .light .svg-logo-gradient {
    opacity: 1
}

#preloader-overlay .logo .svg-logo-gradient {
    opacity: 1
}

.is-firefox #preloader-overlay .logo {
    background-image: url(ff-logo-fallback.jpg);
    background-size: cover
}

.is-firefox #preloader-overlay .logo svg {
    display: none
}

#splash {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 4
}

#splash .wrapper {
    display: table;
    text-align: center;
    width: 100%;
    height: 100%
}

#splash .wrapper .content {
    display: table-cell;
    vertical-align: middle
}

#splash .wrapper .content figure {
    width: 41px;
    height: 81px;
    background-image: url(logo-sprite-white.png);
    background-size: 41px 6642px;
    margin: 0 auto 35px;
    display: none
}

#splash .wrapper .content h1 {
    color: white !important;
    font-size: 40px !important;
    margin-bottom: 14px;
}

#splash .wrapper .content h1+p {
    margin-bottom: 10px
}

#splash .wrapper .content h1+p+p {
    margin-bottom: 40px;
}

#splash .wrapper .content p {
    font-family: "adobe-garamond-pro", serif;
    font-weight: 400;
    font-style: italic;
    font-size: 36px;
    color: rgba(255, 255, 255, 0.7);
    opacity: 0
}

#splash .wrapper .content .pill {
    margin: 0 auto;
    float: none;
    display: inline-block;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent
}

#splash .wrapper .content .pill a,
#splash .wrapper .content .pill span {
    color: white;
    border-color: white;
        font-weight: 900 !important;
    
}

#splash.error-page {
    background-image: -moz-linear-gradient(top left, #31388d 0%, #753fa9 33.333%, #ff0762 66%, #f25632 100%);
    background-image: -webkit-linear-gradient(top left, #31388d 0%, #753fa9 33.333%, #ff0762 66%, #f25632 100%);
    background-image: linear-gradient(to bottom right, #31388d 0%, #753fa9 33.333%, #ff0762 66%, #f25632 100%)
}

#splash.error-page .wrapper .content figure {
    width: 41px;
    height: 39px;
    background: url(logo.png) left top no-repeat;
    background-size: 41px 78px;
    text-indent: -119988px;
    overflow: hidden;
    text-align: left;
    text-transform: capitalize;
    -moz-transition: background 300ms;
    -webkit-transition: background 300ms;
    transition: background 300ms;
    display: block
}

#splash.error-page .wrapper .content figure.gradient {
    background-position: left bottom
}

#splash.error-page .wrapper .content p {
    margin-bottom: 56px
}

#splash.error-page .wrapper .content .pill {
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1
}

@media (max-width: 880px) {
 .mobile-hide:after{ 
   content: '\f0c9';
   font-family: FontAwesome;
   font-weight: normal;
   font-style: normal;
   margin:0px 0px 0px 10px;
   text-decoration:none;

   float: right;
   position: relative;
   right: 17px;
   margin-top: 10px;
   font-size: 27px;
   color: #ff0762;
} 
    .mobile-hide svg{
    width: 73px;
    height: 66px;
    margin-left: 4px;
    position: absolute;
    left: 5%;
    z-index: 999999999999999999999999999999999999999999;
    margin-top: -6px !important;
}
.lien_top{
    display: block !important;
}

    .navbar-nav {
    margin: 0px;
}
    .navbar-nav > li {
    width: 100% !important;
}
.mobile-hide ul{
    display: none;
}
    #menu-background span {
    position: absolute;
    display: block;
    top: 102% !important;
    right: 0 !important;
    width: 100%;
    background: white;
}
    .left-univ-title {
        z-index:99999999999999 !important;
        display: block !important;
        transform: initial !important;
        -webkit-transform-origin-y: initial !important;
        font-size: 92px;
        font-weight: 900;
        color: #c5c5c5;
        -moz-transform-origin: initial !important;
        left: 0 !important;
        text-transform: uppercase;
        font-size: 21px !important;
        left: initial !important;
        margin-left: auto;
        margin-right: auto;
        width: 60%;
        text-align: center;
        position: absolute !important;
        top: 37px !important;
        left: 24% !important;
        overflow: hidden;
}
    #splash .wrapper .content figure {
        margin-bottom: 20px
    }
    #splash .wrapper .content h1 {
        font-size: 24px !important;
        margin-bottom: 10px;
        margin-top: 10px;
    }
    #splash .wrapper .content h1+p {
        margin-bottom: 8px
    }
    #splash .wrapper .content h1+p+p {
        margin-bottom: 30px
    }
    #splash .wrapper .content p {
        font-size: 20px
    }
    #splash .wrapper .content .pill a,
    #splash .wrapper .content .pill span {
        width: auto
    }
    #splash.error-page .wrapper .content p {
        margin-bottom: 30px
    }
}

#menu-background {
    z-index: 999999999;
    /* overflow: hidden; */
    width: 98.7%;
    position: absolute;
    height: 84px;
    top: 0;
    display: none;
    left: 0;
    background: #ffffff;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 8px 0px;
}

#menu-background .background {
}

#menu-background .constrain {
    height: 100%
}
.dropdown-menu>li>a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
    font-size: 12px;
    padding-left: 8px;
}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
    color: #fff;
    text-decoration: none;
    background-color: #337ab7;
    outline: 0;
    font-size: 12px;
    padding-left: 8px;
}

#menu-background h1,
#menu-background span {
    line-height: 82px
}

#menu-background h1 {
    color: #000222;
    font-size: 20px;
    position: absolute;
    height: 100%;
    left: 0;
    top: 0
}

#menu-background span {
    position: absolute;
    display: block;
    top: 0;
    right: 97px;
}

#menu-background span small {
    position: relative;
    top: -1px
}

#menu-background.show {
    display: block
}

#menu-background.show .background {
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=90);
    opacity: 0.9
}

#menu-background.transparent-menu h1,
#menu-background.transparent-menu span {
    color: white
}

#menu-background.transparent-menu .background {
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0
}

#menu-button {
    position: absolute;
    top: 85px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    overflow: hidden;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    cursor: pointer;
    display: none;
    z-index: 4;
}

@media (max-width: 880px) {
    #menu-button {
        height: 29px;
        margin-left: -15px;
        width: 30px
    }
}

#menu {
    font-size: 16px;
    z-index: 3;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

#menu .canvas-background {
    background-image: -moz-linear-gradient(top left, #31388d 0%, #753fa9 33.333%, #ff0762 66%, #f25632 100%);
    background-image: -webkit-linear-gradient(top left, #31388d 0%, #753fa9 33.333%, #ff0762 66%, #f25632 100%);
    background-image: linear-gradient(to bottom right, #31388d 0%, #753fa9 35.333%, #ff0762 117%, #f25632 100%);
    background: url('001-min.jpg');
    background-size: 100% 100%;
    display: block;
    z-index: 3;
    width: 100%;
    height: 100%;
}

#menu nav {
    position: relative;
    width: 100%;
    height: 100%;
    /* padding-bottom: 5px */
}

#menu nav>ul {
    position: relative;
    width: 100.2%;
    height: 100%;
    overflow: hidden;
    *zoom: 1;
    z-index: 2
}

#menu nav>ul>li {
    width: 25%;
    height: 50%;
    float: left;
    position: relative;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border: none;
}

#menu nav>ul>li:not(.hover-disabled).enable-hover:hover,
#menu nav>ul>li.mobile-active {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    background-image: -moz-linear-gradient(top left, #31388d 0%, #753fa9 33.333%, #ff0762 66%, #f25632 100%);
    background: none !important;
}

#menu nav>ul>li:not(.hover-disabled).enable-hover:hover .background,
#menu nav>ul>li.mobile-active .background {
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    opacity: 0 !important
}

#menu nav>ul>li:not(.hover-disabled).enable-hover:hover .scroll-indicator,
#menu nav>ul>li.mobile-active .scroll-indicator {
    -moz-transition-delay: 100ms;
    -webkit-transition-delay: 100ms;
    transition-delay: 100ms;
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1
}

#menu nav>ul>li .background {
    background-color: #000222;
    -moz-transition: opacity 750ms;
    -webkit-transition: opacity 750ms;
    transition: opacity 750ms;
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    right: -1px;
    width: auto;
    height: 100%;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

#menu nav>ul>li .content-wrapper {
    position: absolute;
    left: 0;
    right: -1px;
    width: auto;
    height: 100%;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0
}

#menu nav>ul>li .content-wrapper.show .description hgroup hr {
    width: 30%
}

#menu nav>ul>li .content-wrapper.show .description hgroup+p {
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

#menu nav>ul>li .content-wrapper.show.no-delay .description hgroup hr {
    -moz-transition-delay: 0;
    -webkit-transition-delay: 0;
    transition-delay: 0
}

#menu nav>ul>li .content-wrapper.show.no-delay .description hgroup+p {
    -moz-transition-delay: 0;
    -webkit-transition-delay: 0;
    transition-delay: 0
}

#menu nav>ul>li .description {
    text-decoration: none;
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    display: block;
    padding: 70px 0;
}

#menu nav>ul>li .description hgroup {
    position: relative;
    width: 100%;
    height: 50%;
    display: table;
    margin: auto;
    width: 50%;
    /* border: 3px solid green; */
    padding: 10px;
}

#menu nav>ul>li .description hgroup .table-cell {
    display: table-cell;
    vertical-align: bottom
}

#menu nav>ul>li .description hgroup h1 {
    font-size: 32px;
    color: white;
}

#menu nav>ul>li .description hgroup hr {
    border: 0 none;
    border-top: 2px solid rgba(255, 255, 255, 0.2);
    margin: 40px auto;
    width: 0;
    -moz-transition: width 1000ms cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transition: width 1000ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: width 1000ms cubic-bezier(0.19, 1, 0.22, 1)
}

#menu nav>ul>li .description hgroup+p {
    font-family: "adobe-garamond-pro", serif;
    font-weight: 400;
    font-style: italic;
    padding: 0 20%;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.7);
    height: 50%;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -moz-transform: translateX(-15px);
    -ms-transform: translateX(-15px);
    -webkit-transform: translateX(-15px);
    transform: translateX(-15px);
    -moz-transition: all 800ms 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: all 800ms 150ms;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: all 800ms 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#menu nav>ul>li .title-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    height: 60px;
    line-height: 60px;
    z-index: 3;
    background-color: transparent
}

#menu nav>ul>li .title-bar h1 {
    color: white;
    font-size: 15px;
    opacity: 0
}

#menu nav>ul>li .nested-menu {
    overflow: hidden
}

#menu nav>ul>li .menu-items {
    position: relative;
    z-index: 2
}

#menu nav>ul>li .menu-items .sub-sections li {
    width: 100%;
    height: 200px;
    position: relative
}

#menu nav>ul>li .menu-items .sub-sections li:last-child a:after {
    display: none
}

#menu nav>ul>li .menu-items .sub-sections li .overlay,
#menu nav>ul>li .menu-items .sub-sections li .active-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    -moz-transition: opacity 400ms;
    -webkit-transition: opacity 400ms;
    transition: opacity 400ms
}

#menu nav>ul>li .menu-items .sub-sections li .overlay {
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=80);
    opacity: 0.8;
    background-image: -moz-linear-gradient(left, #753fa9 0%, #ff0762 100%);
    /* background-image: -webkit-linear-gradient(left, #753fa9 0%, #ff0762 100%); */
    /*background-image: linear-gradient(to right, #753fa9 0%, #ff0762 100%)
    background-image: linear-gradient(to right, #000222bd 0%, #000222 100%);*/
    background-image: linear-gradient(to right, #000222a6 0%, #000222b0 100%);
}

#menu nav>ul>li .menu-items .sub-sections li .active-overlay {
    background-image: -moz-linear-gradient(left, #222 0%, #000222 100%);
    background-image: -webkit-linear-gradient(left, #222 0%, #000222 100%);
    background-image: linear-gradient(to right, #222 0%, #000222 100%);
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
}

#menu nav>ul>li .menu-items .sub-sections li a {
    text-decoration: none;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    padding: 28px 30px;
    -moz-backface-visibility: hidden;
    /* -webkit-backface-visibility: hidden; */
    /* backface-visibility: hidden */
}

#menu nav>ul>li .menu-items .sub-sections li p {
    background: #b3b2b294;
    width: 100%;
    font-size: 12px;
    position: absolute;
    top: 0;
    padding: 9px 0px;
    left: 0px;
    padding-left: 20px;
    right: 30px;
    opacity: 0.8 !important;
    -moz-transition: color 300ms;
    -webkit-transition: color 300ms;
    transition: color 300ms;
}

#menu nav>ul>li .menu-items .sub-sections li.work {
    background-size: cover;
    background-position: center center;
    height: 170px !important;
}

#menu nav>ul>li .menu-items .sub-sections li.work span {
    color: #d1d1d7
}

#menu nav>ul>li .menu-items .sub-sections li.work p {
    color: white;
    background: #000222bd;
    font-weight: bold;
    -moz-transition: opacity 750ms;
    -webkit-transition: opacity 750ms;
    transition: opacity 750ms;
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
    -moz-backface-visibility: hidden;
    /* -webkit-backface-visibility: hidden; */
    /* backface-visibility: hidden; */
    -moz-transform-style: preserve-3d;
    /* -webkit-transform-style: preserve-3d; */
    /* transform-style: preserve-3d; */
}

#menu nav>ul>li .menu-items .sub-sections li.news a {
    background-color: #f5f6fa
}

#menu nav>ul>li .menu-items .sub-sections li.news a:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: -1px;
    right: 0;
    height: 2px;
    background-color: #cfd0d6
}

#menu nav>ul>li .menu-items .sub-sections li.news p {
    color: #737380
}

#menu nav>ul>li .menu-items .sub-sections li.enable-hover:hover.work .overlay {
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0
}

#menu nav>ul>li .menu-items .sub-sections li.enable-hover:hover.work .active-overlay {
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0;
}

#menu nav>ul>li .menu-items .sub-sections li.enable-hover:hover.news p {
    color: #ff1353
}

#menu nav>ul>li .scroll-indicator {
    position: absolute;
    width: 40px;
    height: 40px;
    bottom: 20px;
    left: 50%;
    margin-left: -20px;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 4;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    -moz-transition: all 400ms;
    -webkit-transition: all 400ms;
    transition: all 400ms;
    overflow: hidden;
    *zoom: 1;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -moz-transform: translateY(10px);
    -ms-transform: translateY(10px);
    -webkit-transform: translateY(10px);
    transform: translateY(10px)
}

#menu nav>ul>li .scroll-indicator .arrow-wrap {
    height: 100%;
    width: 100%;
    top: 0;
    position: absolute;
    -moz-transition: all 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
    -webkit-transition: all 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
    transition: all 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
    cursor: pointer;
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1
}

#menu nav>ul>li .scroll-indicator .arrow-wrap figure {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -5px 0 0 -7px
}

#menu nav>ul>li .scroll-indicator .arrow-wrap.up {
    left: 0
}

#menu nav>ul>li .scroll-indicator .arrow-wrap.up figure {
    background-image: url(sprites.png);
    background-repeat: no-repeat;
    background-position: 0 -227px;
    display: block;
    height: 9px;
    width: 14px
}

@media all and (-webkit-min-device-pixel-ratio: 2) {
    #menu nav>ul>li .scroll-indicator .arrow-wrap.up figure {
        background-image: url(sprites_2x.png);
        background-size: 500px 500px
    }
}

#menu nav>ul>li .scroll-indicator .arrow-wrap.down figure {
    background-image: url(sprites.png);
    background-repeat: no-repeat;
    background-position: -19px -227px;
    display: block;
    height: 9px;
    width: 14px
}

@media all and (-webkit-min-device-pixel-ratio: 2) {
    #menu nav>ul>li .scroll-indicator .arrow-wrap.down figure {
        background-image: url(sprites_2x.png);
        background-size: 500px 500px
    }
}

#menu nav>ul>li .scroll-indicator.up .arrow-wrap.down {
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    left: 100%
}

#menu nav>ul>li .scroll-indicator.both {
    width: 80px;
    margin-left: -40px
}

#menu nav>ul>li .scroll-indicator.both .arrow-wrap {
    width: 50%;
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1
}

#menu nav>ul>li .scroll-indicator.both .arrow-wrap.down {
    left: 50%
}

#menu nav>ul>li .scroll-indicator.down .arrow-wrap.up {
    left: -100%;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0
}

#menu nav>ul>li .scroll-indicator.down .arrow-wrap.down {
    left: 0
}

@media (max-width: 980px) {
    #menu nav>ul .nested-menu .menu-items .sub-sections p {
        font-size: 16px
    }
}

@media (max-width: 880px) {
    #menu-background {
        height: 60px;
    }
    #menu-button {
        top: 15px
    }
    #menu-button .scale-wrapper {
        -moz-transform: scale(0.75);
        -ms-transform: scale(0.75);
        -webkit-transform: scale(0.75);
        transform: scale(0.75)
    }
    #menu {
        font-size: 12px
    }
    #menu nav>ul {
        width: 100%;
    }
    #menu nav>ul .title-bar,
    #menu nav>ul .nested-menu,
    #menu nav>ul .scroll-indicator {
        display: none
    }
    #menu nav>ul>li {
        width: 100%;
        float: none;
        height: 25%
    }
    #menu nav>ul>li .description {
        padding: 0 10%
    }
    #menu nav>ul>li .description hgroup {
        height: 100%
    }
    #menu nav>ul>li .description hgroup .table-cell {
        vertical-align: middle
    }
    #menu nav>ul>li .description hgroup h1 {
        font-size: 18px;
    }
    #menu nav>ul>li:last-child {
        border-bottom: 0 none
    }
    #menu nav>ul>li hgroup hr,
    #menu nav>ul>li hgroup+p {
        display: none
    }
}

.page-footer {
    height: 500px;
    width: 100%;
    padding-bottom: 5px;
    background-color: #000222;
    overflow: hidden;
    width: 100%;
    position: relative;
    min-height: 330px
}

.page-footer .footer-wrapper {
    overflow: hidden;
    *zoom: 1;
    top: 10%;
    overflow: visible
}

.page-footer .footer-wrapper>div {
    float: left
}

.page-footer .info {
    width: 66%;
    position: relative;
    padding-left: 60px
}

.page-footer .info:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -20px;
    width: 41px;
    height: 39px;
    background: url(logo.png) left top no-repeat;
    background-size: 41px 78px;
    text-indent: -119988px;
    overflow: hidden;
    text-align: left;
    text-transform: capitalize;
    -moz-transition: background 300ms;
    -webkit-transition: background 300ms;
    transition: background 300ms
}

.page-footer .info:before.gradient {
    background-position: left bottom
}

.page-footer .info a {
    text-decoration: none;
    font-family: "adobe-garamond-pro", serif;
    font-weight: 400;
    font-style: italic;
    color: white;
    font-size: 20px;
    line-height: 24px
}

.page-footer .copyright {
    position: absolute;
    bottom: 30px;
    font-size: 14px;
    color: #505267;
    width: 820px;
    margin-left: -410px;
    left: 50%;
    display: block
}

.page-footer .share.desktop {
    display: block;
    width: 33.333%
}

.page-footer .share.mobile {
    display: none
}

.page-footer .share>ul {
    overflow: hidden;
    *zoom: 1;
    overflow: visible
}

.page-footer .share>ul li {
    width: 20%;
    height: 40px;
    float: left;
    position: relative;
    cursor: pointer
}

.page-footer .share>ul li .background {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -21px;
    width: 40px;
    height: 40px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -moz-transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 1
}

.page-footer .share>ul li.enable-hover:hover,
.page-footer .share>ul li.mobile-active {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent
}

.page-footer .share>ul li.enable-hover:hover .background,
.page-footer .share>ul li.mobile-active .background {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1
}

.page-footer .share>ul li a {
    position: absolute;
    text-decoration: none;
    margin: auto;
    width: 100%;
    height: 100%;
    z-index: 2
}

.page-footer .share>ul li a:after {
    top: 50%;
    left: 50%;
    position: absolute;
    content: "";
    display: block;
    margin: auto
}

.page-footer .share>ul li.dribbble .background {
    background-color: #de5184
}

.page-footer .share>ul li.dribbble a:after {
    margin: -11px 0 0 -11px;
    background-image: url(sprites.png);
    background-repeat: no-repeat;
    background-position: 0 -56px;
    display: block;
    height: 21px;
    width: 21px
}

@media all and (-webkit-min-device-pixel-ratio: 2) {
    .page-footer .share>ul li.dribbble a:after {
        background-image: url(sprites_2x.png);
        background-size: 500px 500px
    }
}

.page-footer .share>ul li.facebook .background {
    background-color: #4363a1
}

.page-footer .share>ul li.facebook a:after {
    margin: -8px 0 0 -5px;
    background-image: url(sprites.png);
    background-repeat: no-repeat;
    background-position: -21px -56px;
    display: block;
    height: 16px;
    width: 9px
}

@media all and (-webkit-min-device-pixel-ratio: 2) {
    .page-footer .share>ul li.facebook a:after {
        background-image: url(sprites_2x.png);
        background-size: 500px 500px
    }
}

.page-footer .share>ul li.twitter .background {
    background-color: #2ea3de
}

.page-footer .share>ul li.twitter a:after {
    margin: -7px 0 0 -8px;
    background-image: url(sprites.png);
    background-repeat: no-repeat;
    background-position: -30px -56px;
    display: block;
    height: 14px;
    width: 16px
}

@media all and (-webkit-min-device-pixel-ratio: 2) {
    .page-footer .share>ul li.twitter a:after {
        background-image: url(sprites_2x.png);
        background-size: 500px 500px
    }
}

.page-footer .share>ul li.instagram .background {
    background-color: #c63d99
}

.page-footer .share>ul li.instagram a:after {
    background-image: url(social-icons/instagram.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: -12px 0 0 -12px;
    width: 22px;
    height: 22px
}

.page-footer .share>ul li.medium .background {
    background-color: #00ab6c
}

.page-footer .share>ul li.medium a:after {
    background-image: url(social-icons/medium.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: -10px 0 0 -12px;
    width: 22px;
    height: 19px
}

.page-footer .form-wrapper {
    top: 23%;
    margin-top: -62px
}

.page-footer .form-wrapper h2 {
    color: white;
    padding-bottom: 23px
}

.page-footer .form-wrapper form {
    width: 100%
}

.page-footer .form-wrapper form .email {
    display: inline-block;
    float: left;
    width: calc(100% - 215px);
    height: 50px;
    border: 2px solid #505267;
    border-radius: 5px 0 0 5px;
    background-color: #000222;
    padding-left: 17px;
    font-family: "Conv_CircularStd-Book", Helvetica, sans-serif;
    font-size: 1.8em;
    color: #505267;
    -moz-transition: all 200ms;
    -webkit-transition: all 200ms;
    transition: all 200ms
}

.page-footer .form-wrapper form .email:focus {
    border-color: white;
    color: white
}

.page-footer .form-wrapper form .email:focus+.button {
    border-color: white;
    background-color: white
}

.page-footer .form-wrapper form .email:focus+.button.enable-hover:hover {
    color: #ff1353
}

.page-footer .form-wrapper form .email:focus.value-error {
    color: #ff1353
}

.page-footer .form-wrapper form .email::-webkit-input-placeholder {
    color: #505267
}

.page-footer .form-wrapper form .email:-moz-placeholder {
    color: #505267
}

.page-footer .form-wrapper form .email::-moz-placeholder {
    color: #505267
}

.page-footer .form-wrapper form .email:-ms-input-placeholder {
    color: #505267
}

.page-footer .form-wrapper form .button {
    display: inline-block;
    width: 215px;
    height: 50px;
    background-color: #505267;
    border: 2px solid #505267;
    border-left: none;
    border-radius: 0 5px 5px 0;
    font-family: "Conv_CircularStd-Black", Helvetica, sans-serif;
    color: #000222;
    line-height: 46px;
    text-align: center;
    font-size: 1.3em;
    text-transform: uppercase;
    cursor: pointer;
    -moz-transition: all 200ms;
    -webkit-transition: all 200ms;
    transition: all 200ms
}

@media (max-width: 880px) {
    .page-footer {
        min-height: 500px
    }
    .page-footer .footer-wrapper {
        top: 29px
    }
    .page-footer .info {
        width: 100%;
        padding-left: 0
    }
    .page-footer .info:before {
        right: 0;
        left: auto;
        margin-top: auto;
        top: 0;
        width: 41px;
        height: 39px;
        background: url(logo.png) left top no-repeat;
        background-size: 41px 78px;
        text-indent: -119988px;
        overflow: hidden;
        text-align: left;
        text-transform: capitalize;
        -moz-transition: background 300ms;
        -webkit-transition: background 300ms;
        transition: background 300ms;
        -moz-transform: scale(0.75, 0.75);
        -ms-transform: scale(0.75, 0.75);
        -webkit-transform: scale(0.75, 0.75);
        transform: scale(0.75, 0.75)
    }
    .page-footer .info:before.gradient {
        background-position: left bottom
    }
    .page-footer .info a {
        font-size: 16px;
        line-height: 1.1em
    }
    .page-footer .copyright {
        bottom: 40px;
        width: 100%;
        margin-left: 0;
        left: 0;
        padding: 0 16px
    }
    .page-footer .copyright .mobile-break {
        display: none
    }
    .page-footer .share.desktop {
        display: none
    }
    .page-footer .share.mobile {
        display: block;
        width: 100%;
        position: absolute;
        bottom: 90px
    }
    .page-footer .form-wrapper {
        margin-top: -52px
    }
    .page-footer .form-wrapper h2 {
        padding-bottom: 21px;
        font-size: 20px
    }
    .page-footer .form-wrapper form .email,
    .page-footer .form-wrapper form .button {
        display: block;
        width: 100%;
        float: none;
        border-radius: 5px
    }
    .page-footer .form-wrapper form .email {
        margin-bottom: 5px
    }
    .page-footer .form-wrapper form .button {
        border-left: 2px solid #505267
    }
}

@media (min-width: 540px) and (max-width: 880px) {
    .page-footer .copyright {
        padding: 0 40px !important
    }
}

.marquee {
    padding: 0px 0px 0px 0;
    background-color: transparent;
}

.marquee h1 {
    font-size: 80px;
    line-height: 101px;
    font-family: Oswald;
    margin-bottom: 0px !important;
    /*text-transform: capitalize;*/
}

.marquee .progress {
    font-family: Oswald;
    font-weight: 700;
    font-style: normal;
    font-size: 15px;
    text-transform: capitalize;
    color: #ff1353;
    display: inline-block;
    /* padding: 30px 0; */
    margin: 13px 0px;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: initial;
}

.marquee .progress:after {
    content: "";
    display: block;
    height: 2px;
    background-color: #ff1353;
    width: 100px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 1px 10px
}

.marquee p {
    font-family: Oswald !important;
    /* font-weight: 400; 
    font-style: italic;*/
    font-size: 19px;
    color: #3b3b3e;
    /* line-height: 48px; */
    text-align: justify;
}

.marquee p a {
    text-decoration: none;
    color: inherit;
    z-index: 999999999999999999999999999999999999999999;
}

@media (max-width: 880px) {
    .marquee {
        padding: 20px 0 54px;
    }
    .marquee h1 {
        font-size: 30px;
        line-height: 40px
    }
    .marquee .progress {
        font-size: 10px;
        padding: 19px 0
    }
    .marquee p {
        font-size: 22px;
        line-height: 25px
    }
}

.info-list>ul li {
    position: relative;
    width: 100%;
    cursor: pointer;
    z-index: 0
}

.info-list>ul li a {
    text-decoration: none
}

.info-list>ul li .canvas-background {
    z-index: 2;
    height: calc(100% + 2px);
    height: -webkit-calc(100% + 2px);
    height: -moz-calc(100% + 2px);
    height: -o-calc(100% + 2px);
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.info-list>ul li .canvas-background .stalker-wrap {
    opacity: 0 !important;
    -moz-transition: opacity 200ms;
    -webkit-transition: opacity 200ms;
    transition: opacity 200ms;
    -moz-transition-delay: 0;
    -webkit-transition-delay: 0;
    transition-delay: 0;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.info-list>ul li .gradient-hover {
    position: absolute;
    width: 100%;
    left: 0;
    -moz-transition: all 200ms;
    -webkit-transition: all 200ms;
    transition: all 200ms;
    background-color: red;
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    z-index: 1;
    background-image: -moz-linear-gradient(left, #ff214b 0%, #f25632 100%);
    background-image: -webkit-linear-gradient(left, #ff214b 0%, #f25632 100%);
    background-image: linear-gradient(to right, #ff214b 0%, #f25632 100%)
}

.info-list>ul li .gradient-hover.gradient-1 {
    top: 0;
    bottom: 50%;
    -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%
}

.info-list>ul li .gradient-hover.gradient-2 {
    top: 50%;
    bottom: -2px;
    -moz-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0
}

.info-list>ul li.enable-hover:hover,
.info-list>ul li.mobile-active {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    z-index: 1
}

.info-list>ul li.enable-hover:hover .gradient-hover,
.info-list>ul li.mobile-active .gradient-hover {
    -moz-transition-duration: 300ms;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1)
}

.info-list>ul li.enable-hover:hover .constrain,
.info-list>ul li.mobile-active .constrain {
    -moz-transition-duration: 300ms;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
    -moz-transition-delay: 0;
    -webkit-transition-delay: 0;
    transition-delay: 0;
    border-color: transparent !important
}

.info-list>ul li.enable-hover:hover .constrain span,
.info-list>ul li.enable-hover:hover .constrain p,
.info-list>ul li.mobile-active .constrain span,
.info-list>ul li.mobile-active .constrain p {
    -moz-transition-duration: 0;
    -webkit-transition-duration: 0;
    transition-duration: 0;
    -moz-transition-delay: 0;
    -webkit-transition-delay: 0;
    transition-delay: 0;
    color: white
}

.info-list>ul li.enable-hover:hover .canvas-background .stalker-wrap,
.info-list>ul li.mobile-active .canvas-background .stalker-wrap {
    opacity: 1 !important;
    -moz-transition-duration: 600ms;
    -webkit-transition-duration: 600ms;
    transition-duration: 600ms;
    -moz-transition-delay: 300ms;
    -webkit-transition-delay: 300ms;
    transition-delay: 300ms
}

.info-list>ul li .constrain {
    padding: 23px 0;
    font-size: 24px;
    color: #737380;
    border-top: 2px solid #e9ebf0;
    position: relative;
    z-index: 3;
    display: table !important;
    -moz-transition: border-color 100ms 100ms;
    -webkit-transition: border-color 100ms;
    -webkit-transition-delay: 100ms;
    transition: border-color 100ms 100ms
}

.info-list>ul li .constrain span {
    -moz-transition: color 100ms 100ms;
    -webkit-transition: color 100ms;
    -webkit-transition-delay: 100ms;
    transition: color 100ms 100ms
}

.info-list>ul li .constrain p {
    -moz-transition: color 100ms 100ms;
    -webkit-transition: color 100ms;
    -webkit-transition-delay: 100ms;
    transition: color 100ms 100ms
}

.info-list>ul li .constrain>* {
    display: table-cell !important;
    float: none !important;
    vertical-align: middle !important
}

.info-list>ul li:last-child .constrain {
    border-bottom: 2px solid #e9ebf0
}

.info-list .constrain>.pill {
    margin-top: 38px
}

.info-list .news-list li .date {
    width: 10%
}

.info-list .news-list li p {
    padding-left: 20px;
    width: 90%
}

@media (max-width: 880px) {
    .info-list>ul {
        padding-bottom: 20px
    }
    .info-list>ul>li .constrain {
        padding: 14px 16px;
        font-size: 16px
    }
    .info-list>ul>li h2,
    .info-list>ul>li .pill,
    .info-list>ul>li nav,
    .info-list>ul>li p {
        padding-left: 16px;
        padding-right: 16px
    }
    .info-list .constrain>.pill {
        margin-top: 20px
    }
    .info-list .news-list li .date,
    .info-list .news-list li p {
        width: 100%;
        padding-left: 0;
        display: block !important;
        text-align: left
    }
    .info-list .news-list li p {
        padding-top: 4px
    }
}

.info-grid {
    background-color: #f5f6fa
}

.info-grid>ul {
    overflow: hidden
}

.info-grid>ul>li {
    position: relative;
    width: 100%;
    max-height: 492px;
    min-height: 220px
}

.info-grid>ul>li>a {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    text-decoration: none
}

.info-grid>ul>li.enable-hover:hover,
.info-grid>ul>li.mobile-active {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent
}

.info-grid>ul>li.enable-hover:hover .gradient-background,
.info-grid>ul>li.mobile-active .gradient-background {
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1
}

.info-grid>ul>li.enable-hover:hover .wrapper h5,
.info-grid>ul>li.enable-hover:hover .wrapper h3,
.info-grid>ul>li.enable-hover:hover .wrapper p,
.info-grid>ul>li.enable-hover:hover .wrapper address,
.info-grid>ul>li.enable-hover:hover .wrapper address a,
.info-grid>ul>li.mobile-active .wrapper h5,
.info-grid>ul>li.mobile-active .wrapper h3,
.info-grid>ul>li.mobile-active .wrapper p,
.info-grid>ul>li.mobile-active .wrapper address,
.info-grid>ul>li.mobile-active .wrapper address a {
    color: white !important
}

.info-grid>ul>li.enable-hover:hover .wrapper hr,
.info-grid>ul>li.mobile-active .wrapper hr {
    background-color: white
}

.info-grid>ul>li.enable-hover:hover .wrapper .pill a,
.info-grid>ul>li.enable-hover:hover .wrapper .pill span,
.info-grid>ul>li.mobile-active .wrapper .pill a,
.info-grid>ul>li.mobile-active .wrapper .pill span {
    color: white;
    border-color: white
}

.info-grid>ul>li .gradient-background {
    background-image: -moz-linear-gradient(top left, #8d36a1 0%, #ec0a70 100%);
    background-image: -webkit-linear-gradient(top left, #8d36a1 0%, #ec0a70 100%);
    background-image: linear-gradient(to bottom right, #8d36a1 0%, #ec0a70 100%);
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    left: auto;
    content: "";
    display: block;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -moz-transition: opacity 200ms;
    -webkit-transition: opacity 200ms;
    transition: opacity 200ms;
    width: 50%;
    z-index: 1
}

.info-grid>ul>li .constrain {
    display: table;
    height: 100%;
    overflow: visible !important;
    z-index: 2;
    overflow: hidden;
    *zoom: 1
}

.info-grid>ul>li .constrain .wrapper {
    display: table-cell;
    vertical-align: middle
}

.info-grid>ul>li .constrain .wrapper .inner {
    position: relative
}

.info-grid>ul>li .constrain .wrapper h5,
.info-grid>ul>li .constrain .wrapper h3,
.info-grid>ul>li .constrain .wrapper p,
.info-grid>ul>li .constrain .wrapper hr,
.info-grid>ul>li .constrain .wrapper address,
.info-grid>ul>li .constrain .wrapper address a {
    -moz-transition: all 200ms;
    -webkit-transition: all 200ms;
    transition: all 200ms;
    -moz-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.info-grid>ul>li .constrain .wrapper h5 {
    font-size: 14px;
    color: #9898a6;
    padding-bottom: 10px
}

.info-grid>ul>li .constrain .wrapper h3 {
    font-size: 40px;
    color: black;
    padding-bottom: 6px;
    margin-top: -7px
}

.info-grid>ul>li .constrain .wrapper address {
    line-height: 25px
}

.info-grid>ul>li .constrain .wrapper .pill {
    margin-top: 20px
}

.info-grid>ul>li .constrain .wrapper a {
    text-decoration: none;
    color: #ff1353
}

.info-grid>ul>li .constrain .wrapper p,
.info-grid>ul>li .constrain .wrapper address,
.info-grid>ul>li .constrain .wrapper address a {
    font-size: 20px;
    font-family: "adobe-garamond-pro", serif;
    font-weight: 400;
    font-style: italic;
    color: #9898a6
}

.info-grid>ul>li figure {
    position: absolute;
    top: 0;
    z-index: 3;
    width: 50%;
    height: 100%
}

.info-grid>ul>li:nth-child(odd) .gradient-background {
    left: 0
}

.info-grid>ul>li:nth-child(odd) figure {
    right: 0
}

.info-grid>ul>li:nth-child(even) .gradient-background {
    right: 0
}

.info-grid>ul>li:nth-child(even) .inner {
    left: 50%;
    padding-left: 80px
}

.info-grid>ul>li:nth-child(even) figure {
    left: 0
}

@media (max-width: 539px) {
    .info-grid>ul>li {
        height: 440px !important
    }
    .info-grid>ul>li figure {
        width: 100%;
        height: 220px
    }
    .info-grid>ul>li .gradient-background {
        width: 100%
    }
    .info-grid>ul>li .constrain {
        top: 220px;
        height: 220px
    }
    .info-grid>ul>li .constrain .inner {
        left: 0;
        padding-left: 0
    }
}

@media (max-width: 880px) {
       #menu .canvas-background {
      background-size: cover; 
   } 
    .info-grid>ul>li .constrain .wrapper hr {
        height: 10px;
        margin: 7px 0
    }
    .info-grid>ul>li .constrain .wrapper h5 {
        padding-bottom: 6px
    }
    .info-grid>ul>li .constrain .wrapper h3 {
        font-size: 20px;
        margin: 0
    }
    .info-grid>ul>li .constrain .wrapper p,
    .info-grid>ul>li .constrain .wrapper address,
    .info-grid>ul>li .constrain .wrapper address a {
        font-size: 18px
    }
    .info-grid>ul>li .constrain .wrapper address {
        line-height: 22px
    }
    .info-grid>ul>li .constrain .wrapper .pill {
        margin-top: 16px
    }
}

@media (min-width: 540px) and (max-width: 880px) {
    

    .info-grid>ul>li:nth-child(even) .inner {
        padding-left: 40px
    }
    .info-grid>ul>li .constrain .wrapper .pill {
        width: 50%;
        padding-right: 40px
    }
}

#principles {
    background-color: #f5f6fa;
    padding-bottom: 80px;
    z-index: 10
}

#principles .constrain {
    overflow: visible
}

#principles .constrain>ol {
    padding-top: 30px
}

#principles .constrain>ol li {
    position: relative;
    width: 100%
}

#principles .constrain>ol li .description {
    padding-bottom: 74px;
    width: 60%
}

#principles .constrain>ol li hgroup {
    padding-bottom: 20px
}

#principles .constrain>ol li hgroup mark {
    background-color: transparent;
    font-style: normal;
    font-size: 14px;
    border: 2px solid #5e3fa8;
    color: #5e3fa8;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    text-align: center;
    line-height: 26px;
    width: 30px;
    height: 30px;
    display: inline-block;
    vertical-align: middle
}

#principles .constrain>ol li hgroup h3 {
    font-size: 24px;
    display: inline-block;
    vertical-align: middle;
    padding-left: 20px
}

#principles .constrain>ol li p {
    color: #737380;
    font-size: 14px;
    line-height: 21px;
    padding-right: 200px
}

#principles .constrain>ol li figure {
    position: absolute;
    top: -30px;
    right: 0;
    height: 100%;
    width: 40%
}

#principles .constrain>ol li figure img {
    position: absolute;
    right: 4px
}

#principles .constrain>ol li:nth-child(1) {
    z-index: 3
}

#principles .constrain>ol li:nth-child(1) figure img {
    bottom: 50%;
    margin-bottom: -277px
}

#principles .constrain>ol li:nth-child(2) {
    z-index: 2
}

#principles .constrain>ol li:nth-child(2) hgroup mark {
    color: #ff1353;
    border-color: #ff1353
}

#principles .constrain>ol li:nth-child(2) figure img {
    top: 50%;
    margin-top: -111px
}

#principles .constrain>ol li:nth-child(3) {
    z-index: 1
}

#principles .constrain>ol li:nth-child(3) hgroup mark {
    color: #f84235;
    border-color: #f84235
}

#principles .constrain>ol li:nth-child(3) figure img {
    top: 50%;
    right: 0;
    margin-top: -276px
}

@media (min-width: 881px) {
    #principles .constrain>ol li .description {
        -moz-transition: all 800ms 800ms cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transition: all 800ms 800ms;
        -webkit-transition-delay: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition: all 800ms 800ms cubic-bezier(0.215, 0.61, 0.355, 1);
        -moz-transition-property: opacity, -moz-transform;
        -webkit-transition-property: opacity, -webkit-transform;
        transition-property: opacity, transform;
        -moz-transform: translateX(-50px);
        -ms-transform: translateX(-50px);
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
        filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
        opacity: 0
    }
    #principles .constrain>ol li:nth-child(2) .description {
        -moz-transition-delay: 900ms;
        -webkit-transition-delay: 900ms;
        transition-delay: 900ms
    }
    #principles .constrain>ol li:nth-child(3) .description {
        -moz-transition-delay: 1000ms;
        -webkit-transition-delay: 1000ms;
        transition-delay: 1000ms
    }
    #principles .constrain>ol li figure img {
        -moz-transition: margin 900ms 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transition: margin 900ms 200ms;
        -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transition: margin 900ms 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
    }
    #principles.animate .constrain>ol li .description {
        filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
        opacity: 1;
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    #principles.animate .constrain>ol li:nth-child(1) figure img {
        margin-bottom: -111px
    }
    #principles.animate .constrain>ol li:nth-child(3) figure img {
        margin-top: -111px
    }
}

#photo-collage {
    width: 100%;
    height: auto;
    padding: 0
}

#photo-collage .photos-container {
    position: absolute;
    width: 100%;
    height: 100%
}

#photo-collage .photos-container div {
    float: left;
    display: inline-block;
    position: relative;
    overflow: hidden
}

#photo-collage figure {
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0
}

#photo-collage .col-1 {
    width: 25%
}

#photo-collage .col-2 {
    width: 50%
}

#photo-collage .col-4 {
    width: 100%
}

#photo-collage .row-1 {
    height: 50%
}

#photo-collage .row-2 {
    height: 100%
}

#photo-collage .collage-size img {
    width: 100%
}

#photo-collage .collage-desktop {
    display: block
}

#photo-collage .collage-mobile,
#photo-collage .collage-mobile-small {
    display: none
}

#services {
    padding-bottom: 86px
}

#services .mobile-graphic {
    display: none
}

#services .constrain>ul {
    overflow: hidden;
    *zoom: 1
}

#services .constrain>ul h3 {
    font-size: 24px;
    padding: 50px 0
}

#services .constrain>ul>li {
    width: 33.333%;
    float: left;
    position: relative
}

#services .constrain>ul>li li {
    left: 16px;
    padding-right: 60px;
    color: #737380;
    font-size: 14px;
    position: relative;
    line-height: 21px;
    margin-bottom: 10px
}

#services .constrain>ul>li li:before {
    content: "?";
    display: block;
    color: #ceced9;
    font-size: 10px;
    position: absolute;
    top: 1px;
    left: -16px
}

#services .constrain .graphics {
    position: relative;
    overflow: hidden
}

#services .constrain .graphics .gradient-background {
    background-image: -moz-linear-gradient(left, #31388d 0%, #753fa9 33.333%, #ff0762 66%, #f25632 100%);
    background-image: -webkit-linear-gradient(left, #31388d 0%, #753fa9 33.333%, #ff0762 66%, #f25632 100%);
    background-image: linear-gradient(to right, #31388d 0%, #753fa9 33.333%, #ff0762 66%, #f25632 100%);
    border-right: 1px solid white;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%
}

#services .constrain .graphics img {
    position: relative;
    z-index: 2;
    width: 100%
}

#clients {
    padding-bottom: 100px
}

#clients ul {
    overflow: hidden;
    *zoom: 1
}

#clients ul li {
    height: 160px;
    position: relative;
    width: 25%;
    float: left
}

#clients ul li figure {
    background-image: url(studio/clients-sprite.jpg);
    background-repeat: no-repeat;
    background-position: 0 0;
    display: block;
    height: 160px;
    width: 200px;
    position: absolute;
    left: 50%;
    margin-left: -100px
}

@media all and (-webkit-min-device-pixel-ratio: 2) {
    #clients ul li figure {
        background-image: url(studio/clients-sprite_2x.jpg);
        background-size: 800px 480px
    }
}

#clients ul li:nth-child(1) figure {
    background-position: 0 0
}

#clients ul li:nth-child(2) figure {
    background-position: -200px 0
}

#clients ul li:nth-child(3) figure {
    background-position: -400px 0
}

#clients ul li:nth-child(4) figure {
    background-position: -600px 0
}

#clients ul li:nth-child(5) figure {
    background-position: 0 -160px
}

#clients ul li:nth-child(6) figure {
    background-position: -200px -160px
}

#clients ul li:nth-child(7) figure {
    background-position: -400px -160px
}

#clients ul li:nth-child(8) figure {
    background-position: -600px -160px
}

#clients ul li:nth-child(9) figure {
    background-position: 0 -320px
}

#clients ul li:nth-child(10) figure {
    background-position: -200px -320px
}

#clients ul li:nth-child(11) figure {
    background-position: -400px -320px
}

#clients ul li:nth-child(12) figure {
    background-position: -600px -320px
}

#clients ul li:nth-child(13) figure {
    background-position: 0 -480px
}

#clients ul li:nth-child(14) figure {
    background-position: -200px -480px
}

#clients ul li:nth-child(15) figure {
    background-position: -400px -480px
}

#clients ul li:nth-child(16) figure {
    background-position: -600px -480px
}

#team {
    overflow: hidden;
    clear: both;
    padding-bottom: 45px
}

#team.particle-saga .team-wrapper li figure {
    background-image: none !important
}

#team.particle-saga .team-members li .wrapper {
    background-image: none !important
}

#team .constrain {
    height: 100%
}

#team .constrain .team-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2
}

#team .constrain .team-wrapper>ul {
    overflow: hidden;
    *zoom: 1
}

#team .constrain .team-wrapper>ul>li {
    padding-bottom: 50px;
    text-align: center;
    overflow: hidden;
    float: left;
    width: 33.333%
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word1 .char1,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word1 .char1,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word1 .char1 {
    -moz-transition: color 200ms 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.15s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word1 .char2,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word1 .char2,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word1 .char2 {
    -moz-transition: color 200ms 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.2s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word1 .char3,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word1 .char3,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word1 .char3 {
    -moz-transition: color 200ms 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.25s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word1 .char4,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word1 .char4,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word1 .char4 {
    -moz-transition: color 200ms 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.3s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word1 .char5,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word1 .char5,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word1 .char5 {
    -moz-transition: color 200ms 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.35s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word1 .char6,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word1 .char6,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word1 .char6 {
    -moz-transition: color 200ms 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.4s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word1 .char7,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word1 .char7,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word1 .char7 {
    -moz-transition: color 200ms 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.45s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word1 .char8,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word1 .char8,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word1 .char8 {
    -moz-transition: color 200ms 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.5s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word1 .char9,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word1 .char9,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word1 .char9 {
    -moz-transition: color 200ms 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.55s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word1 .char10,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word1 .char10,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word1 .char10 {
    -moz-transition: color 200ms 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.6s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word2 .char1,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word2 .char1,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word2 .char1 {
    -moz-transition: color 200ms 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.15s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word2 .char2,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word2 .char2,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word2 .char2 {
    -moz-transition: color 200ms 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.2s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word2 .char3,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word2 .char3,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word2 .char3 {
    -moz-transition: color 200ms 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.25s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word2 .char4,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word2 .char4,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word2 .char4 {
    -moz-transition: color 200ms 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.3s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word2 .char5,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word2 .char5,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word2 .char5 {
    -moz-transition: color 200ms 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.35s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word2 .char6,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word2 .char6,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word2 .char6 {
    -moz-transition: color 200ms 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.4s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word2 .char7,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word2 .char7,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word2 .char7 {
    -moz-transition: color 200ms 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.45s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word2 .char8,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word2 .char8,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word2 .char8 {
    -moz-transition: color 200ms 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.5s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word2 .char9,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word2 .char9,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word2 .char9 {
    -moz-transition: color 200ms 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.55s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word2 .char10,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word2 .char10,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word2 .char10 {
    -moz-transition: color 200ms 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.6s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word3 .char1,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word3 .char1,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word3 .char1 {
    -moz-transition: color 200ms 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.15s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word3 .char2,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word3 .char2,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word3 .char2 {
    -moz-transition: color 200ms 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.2s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word3 .char3,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word3 .char3,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word3 .char3 {
    -moz-transition: color 200ms 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.25s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word3 .char4,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word3 .char4,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word3 .char4 {
    -moz-transition: color 200ms 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.3s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word3 .char5,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word3 .char5,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word3 .char5 {
    -moz-transition: color 200ms 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.35s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word3 .char6,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word3 .char6,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word3 .char6 {
    -moz-transition: color 200ms 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.4s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word3 .char7,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word3 .char7,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word3 .char7 {
    -moz-transition: color 200ms 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.45s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word3 .char8,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word3 .char8,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word3 .char8 {
    -moz-transition: color 200ms 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.5s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word3 .char9,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word3 .char9,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word3 .char9 {
    -moz-transition: color 200ms 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.55s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word3 .char10,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word3 .char10,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word3 .char10 {
    -moz-transition: color 200ms 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.6s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word4 .char1,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word4 .char1,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word4 .char1 {
    -moz-transition: color 200ms 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.15s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word4 .char2,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word4 .char2,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word4 .char2 {
    -moz-transition: color 200ms 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.2s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word4 .char3,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word4 .char3,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word4 .char3 {
    -moz-transition: color 200ms 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.25s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word4 .char4,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word4 .char4,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word4 .char4 {
    -moz-transition: color 200ms 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.3s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word4 .char5,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word4 .char5,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word4 .char5 {
    -moz-transition: color 200ms 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.35s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word4 .char6,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word4 .char6,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word4 .char6 {
    -moz-transition: color 200ms 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.4s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word4 .char7,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word4 .char7,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word4 .char7 {
    -moz-transition: color 200ms 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.45s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word4 .char8,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word4 .char8,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word4 .char8 {
    -moz-transition: color 200ms 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.5s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word4 .char9,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word4 .char9,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word4 .char9 {
    -moz-transition: color 200ms 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.55s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word4 .char10,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word4 .char10,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word4 .char10 {
    -moz-transition: color 200ms 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.6s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word5 .char1,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word5 .char1,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word5 .char1 {
    -moz-transition: color 200ms 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.15s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word5 .char2,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word5 .char2,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word5 .char2 {
    -moz-transition: color 200ms 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.2s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word5 .char3,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word5 .char3,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word5 .char3 {
    -moz-transition: color 200ms 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.25s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word5 .char4,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word5 .char4,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word5 .char4 {
    -moz-transition: color 200ms 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.3s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word5 .char5,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word5 .char5,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word5 .char5 {
    -moz-transition: color 200ms 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.35s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word5 .char6,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word5 .char6,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word5 .char6 {
    -moz-transition: color 200ms 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.4s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word5 .char7,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word5 .char7,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word5 .char7 {
    -moz-transition: color 200ms 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.45s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word5 .char8,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word5 .char8,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word5 .char8 {
    -moz-transition: color 200ms 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.5s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word5 .char9,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word5 .char9,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word5 .char9 {
    -moz-transition: color 200ms 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.55s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover .text-effect .word5 .char10,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word5 .char10,
#team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word5 .char10 {
    -moz-transition: color 200ms 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 200ms 0.6s;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 200ms 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover h6.text-effect>span>span,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active h6.text-effect>span>span,
#team .constrain .team-wrapper>ul>li.hover-enabled.active h6.text-effect>span>span {
    color: #ff1353
}

#team .constrain .team-wrapper>ul>li.hover-enabled.enable-hover:hover span.text-effect>span>span,
#team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active span.text-effect>span>span,
#team .constrain .team-wrapper>ul>li.hover-enabled.active span.text-effect>span>span {
    color: #000222
}

#team .constrain .team-wrapper>ul>li figcaption {
    overflow: hidden;
    position: relative
}

#team .constrain .team-wrapper>ul>li a {
    text-decoration: none
}

#team .constrain .team-wrapper>ul>li figure {
    height: 260px;
    width: 100%;
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center center
}

#team .constrain .team-wrapper>ul>li h6.text-effect {
    font-size: 18px;
    color: #000222;
    padding-bottom: 6px
}

#team .constrain .team-wrapper>ul>li span.text-effect {
    font-family: "adobe-garamond-pro", serif;
    font-weight: 400;
    font-style: italic;
    font-size: 18px;
    color: #9898a5
}

#team .constrain .team-wrapper>ul>li .text-effect .word1 span {
    -moz-transition: color 300ms;
    -webkit-transition: color 300ms;
    transition: color 300ms
}

#team .constrain .team-wrapper>ul>li .text-effect .word2 span {
    -moz-transition: color 300ms;
    -webkit-transition: color 300ms;
    transition: color 300ms
}

#team .constrain .team-wrapper>ul>li .text-effect .word3 span {
    -moz-transition: color 300ms;
    -webkit-transition: color 300ms;
    transition: color 300ms
}

#team .constrain .team-wrapper>ul>li .text-effect .word4 span {
    -moz-transition: color 300ms;
    -webkit-transition: color 300ms;
    transition: color 300ms
}

#team .constrain .team-wrapper>ul>li .text-effect .word5 span {
    -moz-transition: color 300ms;
    -webkit-transition: color 300ms;
    transition: color 300ms
}

#team .constrain .team-detail-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2
}

#team .constrain .team-detail-wrapper nav {
    position: absolute;
    top: 100px;
    right: 0;
    overflow: hidden;
    *zoom: 1;
    z-index: 2;
    width: 100%;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -moz-transition: opacity 700ms;
    -webkit-transition: opacity 700ms;
    transition: opacity 700ms
}

#team .constrain .team-detail-wrapper nav .pill {
    margin-right: 10px
}

#team .constrain .team-detail-wrapper nav .pill a {
    padding-left: 26px;
    padding-right: 26px
}

#team .constrain .team-detail-wrapper nav ul {
    float: right
}

#team .constrain .team-detail-wrapper.active nav {
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
    -moz-transition-delay: 700ms;
    -webkit-transition-delay: 700ms;
    transition-delay: 700ms
}

#team .constrain .team-detail-wrapper .team-members {
    height: 920px;
    z-index: 1;
    position: relative
}

#team .constrain .team-detail-wrapper .team-members>li {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

#team .constrain .team-detail-wrapper .team-members>li .wrapper {
    position: relative;
    top: 50%;
    -moz-transform: translateY(-50.1%);
    -ms-transform: translateY(-50.1%);
    -webkit-transform: translateY(-50.1%);
    transform: translateY(-50.1%);
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: -1
}

#team .constrain .team-detail-wrapper h1 {
    font-size: 80px;
    padding-bottom: 8px
}

#team .constrain .team-detail-wrapper .sub {
    font-size: 20px;
    font-family: "adobe-garamond-pro", serif;
    font-weight: 400;
    font-style: italic;
    color: #9898a5
}

#team .constrain .team-detail-wrapper hr {
    width: 40px;
    height: 2px;
    border: 0 none;
    background-color: #ff1353;
    margin: 32px 0;
    text-align: left
}

#team .constrain .team-detail-wrapper h4 {
    font-size: 24px;
    padding-bottom: 6px
}

#team .constrain .team-detail-wrapper h4,
#team .constrain .team-detail-wrapper h4+span {
    color: #737380
}

#team .constrain .team-detail-wrapper h4+span {
    font-size: 14px
}

#team .constrain .team-detail-wrapper .deets {
    padding-top: 64px;
    overflow: hidden;
    *zoom: 1
}

#team .constrain .team-detail-wrapper .deets li {
    width: 50%;
    float: left
}

#team .constrain .team-detail-wrapper .deets li figure {
    width: 94px;
    height: 130px;
    float: left;
    background-size: 94px 520px
}

#team .constrain .team-detail-wrapper .deets li:nth-child(1) figure {
    background-position: 0 0
}

#team .constrain .team-detail-wrapper .deets li:nth-child(2) figure {
    background-position: 0 -130px
}

#team .constrain .team-detail-wrapper .deets li:nth-child(3) figure {
    background-position: 0 -260px
}

#team .constrain .team-detail-wrapper .deets li:nth-child(4) figure {
    background-position: 0 -390px
}

#team .constrain .team-detail-wrapper .deets li div {
    width: 77%;
    float: left;
    padding-left: 30px;
    overflow: hidden
}

#team .constrain .team-detail-wrapper .deets li div h3 {
    padding-top: 30px;
    font-size: 40px;
    color: #737380;
    height: 81px;
    opacity: 0;
    position: relative
}

#team .constrain .team-detail-wrapper .deets li div h3 .smaller {
    font-size: 12px;
    width: auto !important
}

@media (max-width: 880px) {
    #photo-collage .photos-container .left {
        width: 100%;
        display: none
    }
    #photo-collage .photos-container .right {
        width: 100%
    }
    #photo-collage .collage-desktop {
        display: none
    }
    #photo-collage .collage-mobile {
        display: block
    }
    #principles {
        padding-bottom: 7px
    }
    #principles .constrain img {
        display: none !important
    }
    #principles .constrain>ol {
        padding-top: 0
    }
    #principles .constrain>ol li>.description {
        width: 100%;
        padding-bottom: 20px
    }
    #principles .constrain>ol li hgroup {
        padding-bottom: 13px
    }
    #principles .constrain>ol li hgroup mark {
        width: 20px;
        height: 20px;
        line-height: 16px
    }
    #principles .constrain>ol li hgroup h3 {
        font-size: 16px;
        padding-left: 8px
    }
    #principles .constrain>ol li p {
        padding-right: 0
    }
    #services {
        padding-bottom: 26px
    }
    #services .constrain .graphics {
        display: none
    }
    #services .constrain>ul {
        overflow: visible
    }
    #services .constrain>ul>li {
        padding: 0 0 30px 80px;
        float: none;
        width: auto
    }
    #services .constrain>ul>li:last-child {
        padding-bottom: 0
    }
    #services .constrain>ul>li li {
        margin-bottom: 0
    }
    #services .constrain>ul>li .mobile-graphic {
        display: block;
        position: absolute;
        bottom: 25px
    }
    #services .constrain>ul>li .mobile-graphic .left-mask,
    #services .constrain>ul>li .mobile-graphic .right-mask {
        position: absolute;
        height: 100%;
        background-color: white
    }
    #services .constrain>ul>li .mobile-graphic .left-mask {
        left: 0
    }
    #services .constrain>ul>li .mobile-graphic .right-mask {
        right: 0
    }
    #services .constrain>ul>li:nth-child(1) {
        padding-top: 16px
    }
    #services .constrain>ul>li:nth-child(1) .mobile-graphic {
        top: 0;
        left: 0;
        width: 50px;
        background-image: -moz-linear-gradient(top, #31388d 0%, #753fa9 100%);
        background-image: -webkit-linear-gradient(top, #31388d 0%, #753fa9 100%);
        background-image: linear-gradient(to bottom, #31388d 0%, #753fa9 100%)
    }
    #services .constrain>ul>li:nth-child(1) .mobile-graphic figure {
        background-image: url(studio/mobile/services-graphics.png);
        background-repeat: no-repeat;
        background-position: -7px 0px;
        display: block;
        height: 73px;
        width: 50px
    }
}

@media all and (max-width: 880px) and (-webkit-min-device-pixel-ratio: 2) {
    #services .constrain>ul>li:nth-child(1) .mobile-graphic figure {
        background-image: url(studio/mobile/services-graphics_2x.png);
        background-size: 57px 463px
    }
}

@media (max-width: 880px) {
    #services .constrain>ul>li:nth-child(1) .mobile-graphic .left-mask,
    #services .constrain>ul>li:nth-child(1) .mobile-graphic .right-mask {
        top: 73px;
        width: 24px
    }
    #services .constrain>ul>li:nth-child(2) .mobile-graphic {
        top: -8px;
        left: -7px;
        width: 57px;
        background-image: -moz-linear-gradient(top, #753fa9 0%, #ff0762 100%);
        background-image: -webkit-linear-gradient(top, #753fa9 0%, #ff0762 100%);
        background-image: linear-gradient(to bottom, #753fa9 0%, #ff0762 100%)
    }
    #services .constrain>ul>li:nth-child(2) .mobile-graphic figure {
        background-image: url(studio/mobile/services-graphics.png);
        background-repeat: no-repeat;
        background-position: 0 -215px;
        display: block;
        height: 53px;
        width: 57px
    }
}

@media all and (max-width: 880px) and (-webkit-min-device-pixel-ratio: 2) {
    #services .constrain>ul>li:nth-child(2) .mobile-graphic figure {
        background-image: url(studio/mobile/services-graphics_2x.png);
        background-size: 57px 463px
    }
}

@media (max-width: 880px) {
    #services .constrain>ul>li:nth-child(2) .mobile-graphic .left-mask,
    #services .constrain>ul>li:nth-child(2) .mobile-graphic .right-mask {
        top: 53px
    }
    #services .constrain>ul>li:nth-child(2) .mobile-graphic .left-mask {
        width: 31px
    }
    #services .constrain>ul>li:nth-child(2) .mobile-graphic .right-mask {
        width: 24px
    }
    #services .constrain>ul>li:nth-child(3) .mobile-graphic {
        top: -11px;
        left: 1px;
        width: 49px;
        height: 49px;
        background-image: -moz-linear-gradient(top, #ff0762 0%, #f25632 100%);
        background-image: -webkit-linear-gradient(top, #ff0762 0%, #f25632 100%);
        background-image: linear-gradient(to bottom, #ff0762 0%, #f25632 100%)
    }
    #services .constrain>ul>li:nth-child(3) .mobile-graphic figure {
        background-image: url(studio/mobile/services-graphics.png);
        background-repeat: no-repeat;
        background-position: -8px -414px;
        display: block;
        height: 49px;
        width: 49px
    }
}

@media all and (max-width: 880px) and (-webkit-min-device-pixel-ratio: 2) {
    #services .constrain>ul>li:nth-child(3) .mobile-graphic figure {
        background-image: url(studio/mobile/services-graphics_2x.png);
        background-size: 57px 463px
    }
}

@media (max-width: 880px) {
    #services .constrain>ul h3 {
        font-size: 16px;
        padding: 0 0 20px
    }
    #clients {
        padding-bottom: 32px
    }
    #clients .constrain h2 {
        padding-bottom: 0px
    }
    #clients .constrain ul li {
        width: 50%
    }
    #team {
        padding-bottom: 6px
    }
    #team .constrain .team-wrapper {
        left: 16px;
        right: 16px
    }
    #team .constrain .team-wrapper>ul>li {
        padding-bottom: 6px;
        height: 250px;
        width: 50%
    }
    #team .constrain .team-wrapper>ul>li figure {
        height: 180px;
        margin: auto;
        max-width: 260px
    }
    #team .constrain .team-wrapper>ul>li h6.text-effect {
        font-size: 14px;
        padding-bottom: 1px;
        padding-top: 11px
    }
    #team .constrain .team-wrapper>ul>li span.text-effect {
        font-size: 14px
    }
    #team .constrain .team-detail-wrapper {
        left: 16px;
        right: 16px
    }
    #team .constrain .team-detail-wrapper nav {
        top: 27px
    }
    #team .constrain .team-detail-wrapper nav .pill {
        width: auto
    }
    #team .constrain .team-detail-wrapper .team-members {
        height: 590px
    }
    #team .constrain .team-detail-wrapper .team-members h1 {
        font-size: 30px;
        margin-top: 80px
    }
    #team .constrain .team-detail-wrapper .team-members .sub {
        font-size: 14px
    }
    #team .constrain .team-detail-wrapper .team-members hr {
        width: 30px;
        margin: 20px 0
    }
    #team .constrain .team-detail-wrapper .team-members h4 {
        font-size: 14px
    }
    #team .constrain .team-detail-wrapper .team-members .deets {
        padding-top: 20px
    }
    #team .constrain .team-detail-wrapper .team-members .deets li {
        width: 100%
    }
    #team .constrain .team-detail-wrapper .team-members .deets li figure {
        width: 54px;
        height: 75px;
        background-size: 54px 299px
    }
    #team .constrain .team-detail-wrapper .team-members .deets li:nth-child(1) figure {
        background-position: 0 0
    }
    #team .constrain .team-detail-wrapper .team-members .deets li:nth-child(2) figure {
        background-position: 0 -75px
    }
    #team .constrain .team-detail-wrapper .team-members .deets li:nth-child(3) figure {
        background-position: 0 -150px
    }
    #team .constrain .team-detail-wrapper .team-members .deets li:nth-child(4) figure {
        background-position: 0 -225px
    }
    #team .constrain .team-detail-wrapper .team-members .deets li div {
        padding-left: 20px
    }
    #team .constrain .team-detail-wrapper .team-members .deets li div h3 {
        padding-top: 10px;
        font-size: 20px;
        height: auto
    }
    #team .constrain .team-detail-wrapper .team-members .deets li div h3 .smaller {
        font-size: 10px
    }
}

@media (min-width: 540px) and (max-width: 880px) {
    #team .constrain .team-wrapper,
    #team .constrain .team-detail-wrapper {
        left: 40px;
        right: 40px
    }
}

@media (max-width: 539px) {
    #photo-collage .photos-container .left,
    #photo-collage .photos-container .right {
        width: 100%;
        height: 50%;
        display: inline-block
    }
    #photo-collage .collage-mobile {
        display: none
    }
    #photo-collage .collage-mobile-small {
        display: block;
        min-height: 400px;
        max-height: 400px
    }
}

.get-in-touch {
    height: 600px;
    width: 100%;
    max-height: 492px;
    min-height: 220px
}

.get-in-touch .canvas-background {
    background-image: -moz-linear-gradient(top left, #ff214b 0%, #f25632 100%);
    background-image: -webkit-linear-gradient(top left, #ff214b 0%, #f25632 100%);
    background-image: linear-gradient(to bottom right, #ff214b 0%, #f25632 100%)
}

.get-in-touch .constrain {
    z-index: 2;
    position: relative;
    display: table;
    height: 100%
}

.get-in-touch .constrain .inner {
    display: table-cell;
    vertical-align: middle
}

.get-in-touch .constrain h2,
.get-in-touch .constrain h2+p,
.get-in-touch .constrain .pill a {
    color: white
}

.get-in-touch .constrain h2 {
    padding: 0 0 14px 0
}

.get-in-touch .constrain h2+p {
    padding-bottom: 28px !important
}

.get-in-touch .constrain .pill a {
    border-color: white
}

@media (max-width: 880px) {
    .get-in-touch .constrain h2 {
        padding-bottom: 10px
    }
    .get-in-touch .constrain h2+p {
        padding-bottom: 22px !important
    }
}

#news .info-list {
    padding-top: 100px;
    padding-bottom: 100px
}

#news #twitter-feed {
    padding-top: 80px
}

#news #twitter-feed .constrain {
    overflow: visible
}

#news #twitter-feed h1 {
    font-size: 40px;
    position: relative;
    margin-left: 50px
}

#news #twitter-feed h1 a {
    text-decoration: none !important;
    color: inherit
}

#news #twitter-feed h1:before {
    content: "";
    background: url(news/twitter.png) center center no-repeat;
    background-size: cover;
    width: 33px;
    height: 27px;
    position: absolute;
    left: -50px;
    top: 13px
}

#news #twitter-feed ul.feed {
    margin-bottom: 38px;
    height: 269px;
    position: relative
}

#news #twitter-feed ul.feed li {
    padding: 36px 48px 0 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 48%
}

#news #twitter-feed ul.feed li span {
    font-size: 11px;
    color: #9898a6
}

#news #twitter-feed ul.feed li p {
    font-size: 24px;
    color: #737380;
    padding-top: 20px;
    overflow: hidden;
    word-wrap: break-word
}

#news #twitter-feed ul.feed li a {
    color: #9898a6
}

#news #twitter-feed ul.feed li hr {
    height: 2px;
    width: 88%;
    background-color: #e0e3eb;
    position: absolute;
    bottom: 0;
    margin: 0;
    border: 0 none
}

@media (max-width: 880px) {
    #news .info-list {
        padding-bottom: 20px
    }
    #news .info-list nav {
        padding-bottom: 40px
    }
    #news #twitter-feed {
        padding-top: 25px;
        padding-bottom: 30px
    }
    #news #twitter-feed h1 {
        font-size: 20px;
        margin-left: 33px
    }
    #news #twitter-feed h1:before {
        width: 21px;
        height: 18px;
        left: -33px;
        top: 3px
    }
    #news #twitter-feed ul.feed {
        margin-bottom: 30px;
        height: 136px
    }
    #news #twitter-feed ul.feed li {
        padding: 22px 0 0;
        width: 100%
    }
    #news #twitter-feed ul.feed li p {
        padding-top: 16px;
        font-size: 16px
    }
    #news #twitter-feed ul.feed li hr {
        width: 100%
    }
}

#contact .info-list {
    padding-bottom: 100px
}

#contact .info-list>ul li p {
    width: 55%
}

#contact .info-list>ul li span {
    font-size: 18px;
    padding-top: 5px;
    width: 45%
}

@media (max-width: 880px) {
    #contact .info-list {
        padding-bottom: 40px
    }
    #contact .info-list>ul {
        padding-bottom: 0
    }
    #contact .info-list>ul .constrain p {
        padding: 0;
        font-size: 16px;
        width: 60%
    }
    #contact .info-list>ul .constrain span {
        font-size: 14px;
        padding-top: 2px;
        width: 40%
    }
}

.article .panels {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%
}

.article .panels>div {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    display: table;
    overflow: hidden;
    *zoom: 1
}

.article .panels>div h1 {
    font-size: 20px;
    color: white
}

.article .panels>div .panel-inner {
    display: table-cell;
    vertical-align: middle
}

.article .panels>div .panel-content {
    overflow: hidden
}

.article .panels>div.left {
    left: 0;
    padding-right: 800px;
    background-color: red
}

.article .panels>div.left .panel-inner {
    border-right: 2px solid black
}

.article .panels>div.left .panel-content {
    float: right
}

.article .panels>div.right {
    right: 0;
    padding-left: 800px;
    background-color: blue
}

.article .panels>div.right .panel-inner {
    border-left: 2px solid black
}

.article .panels>div.right .panel-content {
    float: left
}

.article .full-width-image.parallax-wrapper {
    height: 600px;
    position: relative
}

.article .no-padding-bottom {
    padding-bottom: 0px !important
}

.article .no-padding-top {
    padding-top: 0px !important
}

.article .less-padding-top {
    padding-top: 35px !important
}

.article .extra-padding-top {
    padding-top: 100px
}

.article .marquee {
    padding-bottom: 0
}

.article .marquee .date,
.article .marquee .location {
    display: block;
    padding: 39px 0 36px 6px
}

.article .marquee h1 {
    padding-bottom: 38px
}

.article .marquee+section.full-width-image,
.article .marquee+section.case-study-hero {
    padding-bottom: 32px;
    margin-top: 136px
}

.article .full-width-image {
    position: relative;
    padding-top: 13px;
    max-width: 1600px;
    margin: 0 auto
}

.article .full-width-image+.copy {
    padding-top: 2px
}

.article .full-width-image img {
    width: 100%;
    height: auto;
    position: relative
}

.article .constrain .full-width-image {
    padding-bottom: 34px
}

.article .constrain .full-width-image:last-child {
    padding-bottom: 0
}

.article .constrain img {
    position: relative;
    width: 100%;
    height: auto
}

.article .copy h2 {
    font-size: 24px;
    padding: 56px 0 28px 0
}

.article .copy p {
    font-family: "Conv_CircularStd-Book", Helvetica, sans-serif;
    font-style: normal;
    font-size: 18px;
    color: #737380;
    line-height: 31px;
    padding-bottom: 25px
}

.article .copy p.first {
    padding-top: 58px
}

.article .copy p.last {
    padding-bottom: 38px
}

.article .constrain .video {
    position: relative;
    padding-bottom: 0 !important
}

.article .constrain .video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2
}

.article .constrain .video img {
    position: relative;
    z-index: 3
}

.article .constrain .video figure {
    background-image: url(sprites.png);
    background-repeat: no-repeat;
    background-position: 0 -105px;
    display: block;
    height: 80px;
    width: 80px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -40px 0 0 -40px;
    cursor: pointer;
    -moz-transition: opacity 300ms;
    -webkit-transition: opacity 300ms;
    transition: opacity 300ms;
    z-index: 4
}

@media all and (-webkit-min-device-pixel-ratio: 2) {
    .article .constrain .video figure {
        background-image: url(sprites_2x.png);
        background-size: 500px 500px
    }
}

.article .constrain .video figure.enable-hover:hover,
.article .constrain .video figure.mobile-active {
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent
}

.article .constrain .case-study-logo {
    padding-bottom: 100px
}

.article section .share-items {
    padding: 66px 0 100px;
    overflow: hidden;
    *zoom: 1
}

.article section .share-items li {
    height: 160px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    width: 33.333%;
    float: left
}

.article section .share-items li figure {
    position: absolute;
    top: 50%;
    left: 50%;
    text-indent: -119988px;
    overflow: hidden;
    text-align: left;
    text-transform: capitalize
}

.article section .share-items li.facebook {
    background-color: #46629e
}

.article section .share-items li.facebook figure {
    background-image: url(sprites.png);
    background-repeat: no-repeat;
    background-position: 0 -186px;
    display: block;
    height: 32px;
    width: 18px;
    margin: -16px 0 0 -9px
}

@media all and (-webkit-min-device-pixel-ratio: 2) {
    .article section .share-items li.facebook figure {
        background-image: url(sprites_2x.png);
        background-size: 500px 500px
    }
}

.article section .share-items li.twitter {
    background-color: #34a4dc
}

.article section .share-items li.twitter figure {
    background-image: url(sprites.png);
    background-repeat: no-repeat;
    background-position: -18px -186px;
    display: block;
    height: 28px;
    width: 34px;
    margin: -14px 0 0 -17px
}

@media all and (-webkit-min-device-pixel-ratio: 2) {
    .article section .share-items li.twitter figure {
        background-image: url(sprites_2x.png);
        background-size: 500px 500px
    }
}

.article section .share-items li.google-plus {
    background-color: #d44837
}

.article section .share-items li.google-plus figure {
    background-image: url(sprites.png);
    background-repeat: no-repeat;
    background-position: -53px -186px;
    display: block;
    height: 33px;
    width: 36px;
    margin: -17px 0 0 -18px
}

@media all and (-webkit-min-device-pixel-ratio: 2) {
    .article section .share-items li.google-plus figure {
        background-image: url(sprites_2x.png);
        background-size: 500px 500px
    }
}

@media (max-width: 880px) {
    .article .full-width-image.parallax-wrapper {
        height: auto
    }
    .article .full-width-image.parallax-wrapper img {
        width: 100% !important;
        margin-left: 0 !important;
        transform: none !important;
        left: 0
    }
    .article .less-padding-top {
        padding-top: 35px !important
    }
    .article .extra-padding-top {
        padding-top: 16px !important
    }
    .article .marquee .date,
    .article .marquee .location {
        padding: 11px 0 13px 0
    }
    .article .marquee h1 {
        padding-bottom: 10px
    }
    .article .marquee+section {
        padding-top: 26px
    }
    .article .marquee+section.full-width-image {
        margin-top: 50px;
        padding-top: 0px
    }
    .article .full-width-image {
        padding-top: 8px
    }
    .article .constrain .full-width-image {
        padding-bottom: 31px
    }
    .article .constrain .case-study-logo {
        padding-bottom: 56px
    }
    .article .alt-1 .constrain .full-width-image:last-child {
        padding-bottom: 26px
    }
    .article .copy h2 {
        font-size: 18px;
        padding: 15px 0 26px 0
    }
    .article .copy p {
        font-size: 14px;
        line-height: 21px;
        padding-bottom: 25px
    }
    .article .copy p.last {
        padding-bottom: 33px
    }
    .article section .share-items {
        padding: 25px 0 56px
    }
    .article section .share-items li {
        height: 60px
    }
    .article section .share-items li figure {
        -moz-transform: scale(0.5);
        -ms-transform: scale(0.5);
        -webkit-transform: scale(0.5);
        transform: scale(0.5)
    }
}

#preloader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 5;
    background-color: white;
    overflow: hidden;
    *zoom: 1;
    display: none
}

#preloader-overlay .wrapper {
    position: relative;
    left: 50%;
    top: 50%;
    -moz-transform: translateX(-50.1%) translateY(-50.1%);
    -ms-transform: translateX(-50.1%) translateY(-50.1%);
    -webkit-transform: translateX(-50.1%) translateY(-50.1%);
    transform: translateX(-50.1%) translateY(-50.1%);
    float: left;
    text-align: center;
    display: none
}

#preloader-overlay .wrapper figure {
    margin: 0 auto 20px
}

#preloader-overlay .wrapper h5 {
    font-size: 14px;
    color: #9898a6;
    display: none;
    white-space: nowrap
}

#career .container .marquee+section {
    margin-top: 83px
}

#career .container .career-wrapper .constrain>a {
    color: #9898a6;
    font-size: 11px;
    padding-top: 72px;
    text-decoration: none;
    padding-bottom: 5px;
    border-bottom: 1px solid black;
    -moz-transition: all 250ms;
    -webkit-transition: all 250ms;
    transition: all 250ms
}

#career .container .career-wrapper .constrain>a.enable-hover:hover,
#career .container .career-wrapper .constrain>a.mobile-active {
    border-color: transparent;
    padding-bottom: 3px;
    color: #ff1353;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent
}

#career .container .career-wrapper .constrain h1 {
    padding: 29px 0 45px 0
}

#career .container .career-wrapper .constrain h2 {
    font-size: 24px;
    padding: 54px 0 28px 0
}

#career .container .career-wrapper .constrain li,
#career .container .career-wrapper .constrain p {
    font-family: "Conv_CircularStd-Book", Helvetica, sans-serif;
    font-size: 18px;
    color: #737380;
    line-height: 31px
}

#career .container .career-wrapper .constrain p {
    font-style: normal;
    padding-bottom: 25px
}

#career .container .career-wrapper .constrain p.last {
    padding-bottom: 38px
}

#career .container .career-wrapper .constrain ul {
    padding: 0 28px 25px 0
}

#career .container .career-wrapper .constrain li {
    position: relative;
    left: 28px
}

#career .container .career-wrapper .constrain li:before {
    content: "?";
    display: block;
    color: #93939d;
    font-size: 14px;
    position: absolute;
    top: 2px;
    left: -28px
}

#career .container .career-wrapper .constrain .pill {
    padding-bottom: 93px
}

@media (max-width: 880px) {
    #career .container .marquee+section {
        margin-top: 9px
    }
    #career .container .career-wrapper .constrain h1 {
        padding: 10px 0 0 0
    }
    #career .container .career-wrapper .constrain h2 {
        font-size: 18px;
        padding: 6px 0 26px 0
    }
    #career .container .career-wrapper .constrain li,
    #career .container .career-wrapper .constrain p {
        font-size: 14px;
        line-height: 21px
    }
    #career .container .career-wrapper .constrain p.last {
        padding-bottom: 33px
    }
    #career .container .career-wrapper .constrain ul {
        padding-bottom: 17px
    }
    #career .container .career-wrapper .constrain li {
        left: 18px
    }
    #career .container .career-wrapper .constrain li:before {
        font-size: 12px;
        position: absolute;
        top: -1px;
        left: -18px
    }
    #career .container .career-wrapper .constrain .pill {
        padding-bottom: 43px
    }
}

#case-study .marquee {
    padding-top: 134px
}

#case-study .marquee+section {
    padding-bottom: 0
}

#case-study .full-width-image+.copy {
    padding-top: 0
}

#case-study .full-width-image.bottom {
    padding-bottom: 41px
}

#case-study .full-width-image.bottom-large {
    overflow: hidden;
    padding-bottom: 100px
}

#case-study .full-width-image.top-none {
    padding-top: 0
}

#case-study .copy p.bottom {
    padding-bottom: 78px
}

#case-study .copy p.top {
    padding-top: 78px
}

#case-study .copy p+h2 {
    padding-top: 1px
}

#case-study .copy h2 {
    padding-top: 88px
}

#case-study .copy h2.bottom {
    padding-bottom: 71px
}

#case-study .copy h2.top {
    padding-top: 35px
}

#case-study .video+.case-study-logo {
    margin-top: 100px
}

#case-study .video.bottom-large {
    padding-top: 0;
    padding-bottom: 100px !important
}

#case-study .video.bottom-large iframe {
    padding-top: 0;
    padding-bottom: 100px !important
}

#case-study .case-study-logo {
    position: relative;
    left: 50%;
    -moz-transform: translateX(-50.1%);
    -ms-transform: translateX(-50.1%);
    -webkit-transform: translateX(-50.1%);
    transform: translateX(-50.1%);
    max-width: 100%;
    width: auto
}

#case-study .alt-1 .constrain .full-width-image:last-child {
    padding-bottom: 100px
}

#case-study #bentley .alt-1 {
    background-color: #7a6f69
}

#case-study #bentley .alt-1 .copy h2 {
    color: white
}

#case-study #bentley .alt-1 .copy p {
    color: #aaa39f
}

#case-study #banana-republic .alt-1 {
    background-color: #f5f6fa
}

#case-study #banana-republic .case-study-logo {
    margin-top: 66px !important
}

#case-study #project-pie .alt-1 {
    background-color: #7a6f69
}

#case-study #project-pie .alt-1 .copy h2 {
    color: white
}

#case-study #project-pie .alt-1 .copy p {
    color: #aaa39f
}

#case-study #snapfish .alt-1 {
    background-color: #ebeef0
}

#case-study #snapfish .alt-1 .copy h2 {
    color: black
}

#case-study #snapfish .alt-1 .copy p {
    color: #737380
}

#case-study #snapfish .alt-2 {
    background-color: #7fcdc6
}

#case-study #snapfish .case-study-logo {
    padding-bottom: 164px
}

#case-study #snapfish .video {
    margin: 13px auto 100px;
    padding: 0
}

@media (max-width: 880px) {
    #case-study .marquee {
        padding-top: 87px
    }
    #case-study .full-width-image.bottom {
        padding-bottom: 28px
    }
    #case-study .full-width-image.bottom-large {
        padding-bottom: 60px
    }
    #case-study .copy p.bottom {
        padding-bottom: 37px
    }
    #case-study .copy p.top {
        padding-top: 37px
    }
    #case-study .copy p+h2 {
        padding-top: 0px;
        margin-top: -1px
    }
    #case-study .copy h2 {
        padding-top: 47px
    }
    #case-study .copy h2.top {
        padding-top: 30px
    }
    #case-study .copy h2.bottom {
        padding-bottom: 39px
    }
    #case-study .video+.case-study-logo {
        margin-top: 56px
    }
    #case-study .alt-1 .constrain .full-width-image:last-child {
        padding-bottom: 56px
    }
    #case-study .toc li {
        border: 2px solid #ebeef0 !important;
        font-size: 12px;
        line-height: 12px
    }
    #case-study .toc li+li {
        border-top: none !important
    }
    #case-study .toc li:nth-child(2n+3) {
        border-left: none !important
    }
    #case-study .toc li.col-1 {
        width: 50%
    }
    #case-study .toc li.col-2 {
        width: 100%
    }
    #case-study #bentley .case-study-logo {
        width: 135px;
        height: 114px
    }
    #case-study #banana-republic .case-study-logo {
        margin-top: 22px !important;
        width: 201px;
        height: 75px
    }
    #case-study #project-pie .case-study-logo {
        width: 76px;
        height: 128px
    }
    #case-study #snapfish .video {
        margin: 8px auto 60px
    }
    #case-study #snapfish .case-study-logo {
        width: 144px;
        height: 98px;
        padding-bottom: 60px
    }
}

@media (max-width: 539px) {
    #case-study .toc li:nth-child(2n+3) {
        border-left: 2px solid #ebeef0 !important
    }
    #case-study .toc li.col-1 {
        width: 100%
    }
}

#case-study.rich-case-study {
    padding-top: 0
}

#case-study.rich-case-study .marquee {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    padding: 0;
    overflow: hidden
}

#case-study.rich-case-study .marquee+section {
    padding-top: 0
}

#case-study.rich-case-study .marquee .heading {
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 2
}

#case-study.rich-case-study .marquee h1,
#case-study.rich-case-study .marquee p {
    color: white
}

#case-study.rich-case-study .marquee h1 {
    line-height: 75px;
    padding-bottom: 18px
}

#case-study.rich-case-study .marquee hr {
    width: 100%;
    border-color: rgba(255, 255, 255, 0.15);
    margin: 30px 0 0
}

#case-study.rich-case-study .marquee .view-project {
    cursor: pointer;
    display: inline-block
}

#case-study.rich-case-study .marquee .view-project span {
    color: rgba(255, 255, 255, 0.3);
    display: inline-block;
    font-family: "Conv_CircularStd-Book", Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    line-height: 69px;
    padding-left: 16px;
    margin-top: 0
}

#case-study.rich-case-study .marquee .view-project figure {
    display: inline-block;
    width: 9px;
    height: 16px;
    background-image: url(/assets/work/case-studies/view-project.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    vertical-align: middle
}

#case-study.rich-case-study .marquee.csspositionsticky {
    position: -webkit-sticky !important;
    position: -moz-sticky !important;
    position: -ms-sticky !important;
    position: -o-sticky !important;
    position: sticky !important;
    z-index: 9
}

@media (max-width: 880px) {
    #case-study.rich-case-study .heading {
        top: 0;
        margin-top: 106px
    }
    #case-study.rich-case-study .heading .constrain {
        width: 100%;
        padding: 0 20px;
        position: relative;
        text-align: center
    }
    #case-study.rich-case-study .heading h1 {
        font-size: 30px;
        line-height: 30px
    }
    #case-study.rich-case-study .heading p {
        font-size: 22px;
        line-height: 22px
    }
}

#marquee-particles {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: white
}

#marquee-particles canvas {
    display: block
}

#marquee-particles.hide {
    display: none
}

.stalker-wrap {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    left: 50%;
    top: 50%;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -moz-transition: opacity 600ms;
    -webkit-transition: opacity 600ms;
    transition: opacity 600ms
}

.stalker-wrap.active {
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1
}

.stalker-wrap .stalker {
    height: 200%;
    position: absolute;
    width: 200%;
    -moz-transition: opacity 600ms;
    -webkit-transition: opacity 600ms;
    transition: opacity 600ms;
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1
}

.stalker-wrap .stalker.hide {
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0
}

.stalker-wrap .stalker .grad {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -moz-transition: opacity 1000ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: opacity 1000ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: opacity 1000ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.stalker-wrap .stalker .grad.active {
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1
}

.accordion-enabled {
    position: absolute !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important
}

.csspositionsticky .accordion-enabled {
    position: -webkit-sticky !important;
    position: -moz-sticky !important;
    position: -ms-sticky !important;
    position: -o-sticky !important;
    position: sticky !important
}

.csspositionsticky .accordion-enabled.inactive {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important
}

#case-study #compass-hunt .marquee .constrain.small {
    z-index: 3
}

#case-study #compass-hunt .map-svg-container {
    display: none
}

#case-study #compass-hunt .alt-1 {
    background-color: #0f283b
}

#case-study #compass-hunt .alt-1 h2 {
    color: white
}

#case-study #compass-hunt .alt-1 p {
    color: white
}

#case-study #compass-hunt .alt-2 {
    background-color: #c8eae6
}

#case-study #compass-hunt .alt-2 h2 {
    color: #535356
}

#case-study #compass-hunt .alt-2 p {
    color: #737380
}

#case-study #compass-hunt .alt-2 figcaption {
    color: #9898a6
}

#case-study #compass-hunt .alt-3 {
    background-color: #212121
}

#case-study #compass-hunt .alt-3 h1 {
    color: white;
    font-size: 48px;
    text-align: center
}

#case-study #compass-hunt .alt-3 h1 span {
    font-size: 30px
}

#case-study #compass-hunt .alt-3 h2 {
    color: white
}

#case-study #compass-hunt .alt-3 h3 {
    color: #ca6825;
    font-size: 18px;
    text-align: center
}

#case-study #compass-hunt .alt-3 p {
    color: #898989
}

#case-study #compass-hunt figcaption {
    font-family: "adobe-garamond-pro", serif;
    font-weight: 400;
    font-style: italic;
    font-size: 18px;
    margin-top: 45px
}

#case-study #compass-hunt .video img {
    z-index: 1 !important
}

#case-study #compass-hunt .phone-desktop {
    width: 434px;
    height: 761px;
    background-image: url(/assets/work/case-studies/compass-hunt/iphone.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    bottom: -156px;
    right: -30px
}

#case-study #compass-hunt .phone-desktop.warm .distance p:first-child {
    opacity: 0
}

#case-study #compass-hunt .phone-desktop.warm .distance p:nth-child(2) {
    opacity: 1
}

#case-study #compass-hunt .phone-desktop.hot .distance p:nth-child(2) {
    opacity: 0
}

#case-study #compass-hunt .phone-desktop.hot .distance p:nth-child(3) {
    opacity: 1
}

#case-study #compass-hunt .phone-mobile {
    display: none
}

#case-study #compass-hunt .phone-background {
    width: 295px;
    height: 521px;
    position: absolute;
    top: 84px;
    left: 65px;
    background-color: #02a8f3;
    -moz-transition: color 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: color 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: color 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#case-study #compass-hunt .app {
    width: 100%;
    height: 100%;
    background-image: url(/assets/work/case-studies/compass-hunt/app.png);
    background-size: 100% 100%;
    background-repeat: no-repeat
}

#case-study #compass-hunt .app svg {
    width: 88px;
    height: 51px;
    position: absolute;
    top: 177px;
    left: 50%;
    margin-left: -44px;
    -moz-transform: rotate(147deg);
    -ms-transform: rotate(147deg);
    -webkit-transform: rotate(147deg);
    transform: rotate(147deg)
}

#case-study #compass-hunt .distance {
    position: absolute;
    top: 360px;
    width: 100%
}

#case-study #compass-hunt .distance p,
#case-study #compass-hunt .distance h4,
#case-study #compass-hunt .distance h6 {
    color: white;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
    text-align: center
}

#case-study #compass-hunt .distance p {
    font-size: 12px;
    line-height: 14px;
    width: 100%;
    position: absolute;
    font-family: "proxima-nova", sans-serif;
    font-weight: 700;
    font-style: normal;
    -moz-transition: opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#case-study #compass-hunt .distance p:nth-child(2),
#case-study #compass-hunt .distance p:nth-child(3) {
    opacity: 0
}

#case-study #compass-hunt .distance h4 {
    font-size: 50px;
    margin-top: 14px;
    font-family: "proxima-nova", sans-serif;
    font-weight: 100;
    font-style: normal
}

#case-study #compass-hunt .distance h6 {
    font-size: 11px;
    font-family: "proxima-nova", sans-serif;
    font-weight: 100;
    font-style: normal
}

#case-study #compass-hunt .map-outer-container {
    position: relative;
    overflow: hidden;
    width: 100%
}

#case-study #compass-hunt .map-outer-container .constrain {
    position: absolute;
    bottom: 0;
    left: 50%;
    overflow: visible;
    -moz-transform: translatex(-50%);
    -ms-transform: translatex(-50%);
    -webkit-transform: translatex(-50%);
    transform: translatex(-50%)
}

#case-study #compass-hunt .map-inner-container {
    min-width: 1440px;
    min-height: 810px;
    top: 50%;
    left: 50%;
    -moz-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    position: absolute
}

#case-study #compass-hunt .map-inner-container svg {
    min-width: 1440px;
    min-height: 810px;
    position: relative;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

#case-study #compass-hunt .map-inner-container #map-1 .color-1 {
    stroke: #143146
}

#case-study #compass-hunt .map-inner-container #map-1 .color-2 {
    stroke: #1a3a52
}

#case-study #compass-hunt .map-inner-container #map-2 .color-1 {
    stroke: #383838
}

#case-study #compass-hunt .map-inner-container #map-2 .color-2 {
    stroke: #383838
}

#case-study #compass-hunt .map-one {
    min-height: 690px
}

#case-study #compass-hunt .map-one .top-marker {
    top: 50%;
    left: 50%;
    margin-top: -3px;
    margin-left: -3px
}

#case-study #compass-hunt .map-one .prize {
    top: 50%;
    left: 50%;
    margin-top: -15px;
    margin-left: -15px
}

#case-study #compass-hunt .prize {
    background-image: url(/assets/work/case-studies/compass-hunt/prize.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    width: 30px;
    height: 30px
}

#case-study #compass-hunt .rings:before,
#case-study #compass-hunt .rings:after {
    content: "";
    display: block;
    width: 150px;
    height: 150px;
    border: 2px solid white;
    border-radius: 50%;
    position: absolute
}

#case-study #compass-hunt .rings div {
    border: 5px solid #87949d;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%
}

#case-study #compass-hunt .compass {
    width: 250px;
    height: 250px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -125px;
    margin-left: -125px
}

#case-study #compass-hunt .compass:before,
#case-study #compass-hunt .compass:after {
    top: 48px;
    left: 48px
}

#case-study #compass-hunt .compass:before {
    -o-animation: compass-ring 2.6s ease-out infinite;
    -moz-animation: compass-ring 2.6s ease-out infinite;
    -ms-animation: compass-ring 2.6s ease-out infinite;
    -webkit-animation: compass-ring 2.6s ease-out infinite;
    animation: compass-ring 2.6s ease-out infinite
}

#case-study #compass-hunt .compass:after {
    -o-animation: compass-ring 2.6s ease-out infinite;
    -moz-animation: compass-ring 2.6s ease-out infinite;
    -ms-animation: compass-ring 2.6s ease-out infinite;
    -webkit-animation: compass-ring 2.6s ease-out infinite;
    animation: compass-ring 2.6s ease-out infinite;
    -o-animation-delay: 1.3s;
    -moz-animation-delay: 1.3s;
    -ms-animation-delay: 1.3s;
    -webkit-animation-delay: 1.3s;
    animation-delay: 1.3s
}

#case-study #compass-hunt .compass div {
    width: 150px;
    height: 150px;
    margin-left: -75px;
    margin-top: -75px
}

#case-study #compass-hunt .compass svg {
    width: 176px;
    height: 102px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -51px;
    margin-left: -88px
}

#case-study #compass-hunt .marker {
    width: 6px;
    height: 6px;
    position: absolute
}

#case-study #compass-hunt .marker:before,
#case-study #compass-hunt .marker:after {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    border: 1px solid white;
    border-radius: 50%;
    position: absolute;
    opacity: 0;
    top: -10px;
    left: -10px
}

#case-study #compass-hunt .marker:before {
    -o-animation: marker-ring 2.6s ease-out infinite;
    -moz-animation: marker-ring 2.6s ease-out infinite;
    -ms-animation: marker-ring 2.6s ease-out infinite;
    -webkit-animation: marker-ring 2.6s ease-out infinite;
    animation: marker-ring 2.6s ease-out infinite
}

#case-study #compass-hunt .marker:after {
    -o-animation: marker-ring 2.6s ease-out infinite;
    -moz-animation: marker-ring 2.6s ease-out infinite;
    -ms-animation: marker-ring 2.6s ease-out infinite;
    -webkit-animation: marker-ring 2.6s ease-out infinite;
    animation: marker-ring 2.6s ease-out infinite;
    -o-animation-delay: 1.3s;
    -moz-animation-delay: 1.3s;
    -ms-animation-delay: 1.3s;
    -webkit-animation-delay: 1.3s;
    animation-delay: 1.3s
}

#case-study #compass-hunt .marker div {
    background-color: white;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -o-animation: center-pulsate 2.6s ease-out infinite;
    -moz-animation: center-pulsate 2.6s ease-out infinite;
    -ms-animation: center-pulsate 2.6s ease-out infinite;
    -webkit-animation: center-pulsate 2.6s ease-out infinite;
    animation: center-pulsate 2.6s ease-out infinite
}

#case-study #compass-hunt .marker-small {
    width: 6px;
    height: 6px;
    position: absolute;
    top: 50px;
    left: 50px
}

#case-study #compass-hunt .marker-small:before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    border: 1px solid #4d4d4d;
    border-radius: 50%;
    position: absolute;
    top: -7px;
    left: -7px
}

#case-study #compass-hunt .marker-small div {
    background-color: #4d4d4d;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

#case-study #compass-hunt .overview-icons-desktop,
#case-study #compass-hunt .overview-icons-mobile {
    margin: 152px auto
}

#case-study #compass-hunt .overview-icons-desktop svg,
#case-study #compass-hunt .overview-icons-mobile svg {
    opacity: 0
}

#case-study #compass-hunt .overview-icons-desktop.animate svg,
#case-study #compass-hunt .overview-icons-mobile.animate svg {
    opacity: 1;
    -moz-transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#case-study #compass-hunt .overview-icons-desktop {
    margin: 152px auto
}

#case-study #compass-hunt .overview-icons-mobile {
    display: none
}

#case-study #compass-hunt .overview-social-container {
    height: 250px;
    margin: 152px auto
}

#case-study #compass-hunt .overview-social-container.animate .notification {
    -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.15);
    -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.15);
    transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.15)
}

#case-study #compass-hunt .overview-social-container.animate .twitter {
    -moz-transition-delay: 0ms;
    -webkit-transition-delay: 0ms;
    transition-delay: 0ms
}

#case-study #compass-hunt .overview-social-container.animate .instagram {
    -moz-transition-delay: 800ms;
    -webkit-transition-delay: 800ms;
    transition-delay: 800ms
}

#case-study #compass-hunt .overview-social-container.animate svg {
    -moz-transition: all 800ms 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-transition: all 800ms 400ms;
    -webkit-transition-delay: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 800ms 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

#case-study #compass-hunt .notification {
    display: inline-block;
    background-color: white;
    border-radius: 2px;
    width: 350px;
    height: 100px;
    position: relative;
    margin-top: 75px;
    padding: 14px;
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0)
}

#case-study #compass-hunt .notification:before {
    content: "";
    display: block;
    position: absolute;
    background-size: 100% 100%;
    background-repeat: no-repeat
}

#case-study #compass-hunt .notification>div {
    position: relative;
    top: 50%;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

#case-study #compass-hunt .notification h5 {
    color: #333333;
    font-size: 14px;
    margin-bottom: 5px;
    font-family: "proxima-nova", sans-serif;
    font-weight: 700;
    font-style: normal
}

#case-study #compass-hunt .notification p {
    color: #333333;
    display: inline-block;
    font-size: 14px;
    font-family: "proxima-nova", sans-serif;
    font-weight: 300;
    font-style: normal
}

#case-study #compass-hunt .notification figure {
    display: inline-block;
    background-image: url(/assets/work/case-studies/compass-hunt/location-pin.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 8px;
    height: 10px;
    margin-right: 7px
}

#case-study #compass-hunt .notification.twitter {
    float: left;
    padding-left: 90px
}

#case-study #compass-hunt .notification.twitter:before {
    background-image: url(/assets/work/case-studies/compass-hunt/twitter-icon.png);
    width: 32px;
    height: 25px;
    top: 36px;
    left: 33px
}

#case-study #compass-hunt .notification.instagram {
    float: right;
    padding-left: 108px
}

#case-study #compass-hunt .notification.instagram:before {
    background-image: url(/assets/work/case-studies/compass-hunt/instagram-image.png);
    width: 76px;
    height: 77px;
    top: 14px;
    left: 14px
}

#case-study #compass-hunt .notification.instagram p {
    color: #409ad3
}

#case-study #compass-hunt .toggle {
    width: 482px;
    margin: auto;
    height: 60px;
    border: 1px solid #263c4d;
    border-radius: 2px
}

#case-study #compass-hunt .toggle li {
    border-radius: 2px;
    color: white;
    font-size: 18px;
    line-height: 60px;
    font-family: "Conv_CircularStd-Book", Helvetica, sans-serif;
    text-align: center;
    width: 50%;
    height: 100%;
    float: left;
    cursor: pointer
}

#case-study #compass-hunt .toggle .selected {
    background-color: #04a7f3;
    -moz-box-shadow: #04a7f3 0 0 0 1px;
    -webkit-box-shadow: #04a7f3 0 0 0 1px;
    box-shadow: #04a7f3 0 0 0 1px;
    cursor: default
}

#case-study #compass-hunt .browser {
    width: 100%;
    border-radius: 2px;
    overflow: hidden;
    margin: auto;
    position: relative;
    font-size: 10px
}

#case-study #compass-hunt .browser.admin .users-browser {
    display: none
}

#case-study #compass-hunt .browser.admin .admin-browser {
    display: block
}

#case-study #compass-hunt .browser>div {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

#case-study #compass-hunt .browser>div>div {
    height: 100%;
    position: absolute;
    top: 0;
    padding-top: 2.2%
}

#case-study #compass-hunt .browser>div.animate .left-panel {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -moz-transition: -moz-transform 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: -webkit-transform 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: transform 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#case-study #compass-hunt .browser>div.animate .right-panel {
    width: 76%;
    -moz-transition: width 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: width 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: width 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#case-study #compass-hunt .browser h5 {
    font-size: 1.8em;
    font-family: "proxima-nova", sans-serif;
    font-weight: 700;
    font-style: normal
}

#case-study #compass-hunt .browser p {
    font-size: 1.4em;
    font-family: "proxima-nova", sans-serif;
    font-weight: 300;
    font-style: normal
}

#case-study #compass-hunt .browser .underline {
    color: #000221;
    text-decoration: underline;
    font-family: "proxima-nova", sans-serif;
    font-weight: 300;
    font-style: normal
}

#case-study #compass-hunt .browser .users-browser {
    display: block
}

#case-study #compass-hunt .browser .admin-browser {
    display: none
}

#case-study #compass-hunt .browser .admin-browser .avatar {
    background-image: url(/assets/work/case-studies/compass-hunt/avatar-2.png)
}

#case-study #compass-hunt .browser .title-bar {
    width: 100%;
    position: absolute;
    top: 0
}

#case-study #compass-hunt .browser .left-panel {
    width: 24%;
    background-color: #01aaff;
    left: 0;
    padding-top: 29.67%;
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%)
}

#case-study #compass-hunt .browser .left-panel h4 {
    font-size: 3.6em;
    color: white;
    text-shadow: 0.02em 0.02em rgba(0, 0, 0, 0.2);
    text-align: center;
    padding-bottom: 0.27em;
    font-family: "proxima-nova", sans-serif;
    font-weight: 300;
    font-style: normal
}

#case-study #compass-hunt .browser .left-panel h5 {
    text-align: center;
    font-size: 1.4em
}

#case-study #compass-hunt .browser .right-panel {
    width: 100%;
    background-color: #eaeaea;
    overflow: hidden;
    right: 0
}

#case-study #compass-hunt .browser .browser-logo {
    background-image: url(/assets/work/case-studies/compass-hunt/browser-logo.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    width: 60.74%;
    height: 4.98%;
    top: 8.25%;
    left: 18.14%
}

#case-study #compass-hunt .browser .avatar {
    background-image: url(/assets/work/case-studies/compass-hunt/avatar-1.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    width: 25.92%;
    height: 11.5%;
    top: 38.89%;
    left: 37.03%
}

#case-study #compass-hunt .browser .timeline {
    width: 0;
    height: 100%;
    background-color: #efefef;
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 9.5%
}

#case-study #compass-hunt .browser .timeline ul {
    width: 100%;
    height: 100%
}

#case-study #compass-hunt .browser .timeline li {
    width: 100%;
    height: 21.24%;
    position: relative
}

#case-study #compass-hunt .browser .timeline li:nth-child(2) {
    height: 17.41%
}

#case-study #compass-hunt .browser .timeline li:nth-child(3) {
    height: 25.07%
}

#case-study #compass-hunt .browser .timeline li:nth-child(3) .timestamp {
    height: 65.17%
}

#case-study #compass-hunt .browser .timeline li:nth-child(3) .line {
    height: 0;
    top: 65.42%
}

#case-study #compass-hunt .browser .timeline li:nth-child(3) figure {
    background-image: url(/assets/work/case-studies/compass-hunt/prize-marker.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 21.66%;
    height: 56.55%;
    left: 50%;
    position: relative;
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

#case-study #compass-hunt .browser .timestamp {
    width: 100%;
    height: 42%;
    position: relative;
    top: 0;
    left: 0;
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0)
}

#case-study #compass-hunt .browser .timestamp .circle {
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background-color: #05a6f3;
    left: 50%;
    position: relative;
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

#case-study #compass-hunt .browser .timestamp p {
    color: #777777;
    padding: 4.5% 0 9.59%;
    text-align: center
}

#case-study #compass-hunt .browser .line {
    width: 0.2em;
    height: 0;
    background-color: #d7d7d7;
    left: 50%;
    top: 42%;
    position: absolute;
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

#case-study #compass-hunt .browser .social-updates {
    width: 100%;
    height: 100%;
    padding: 2.11% 2.11% 2.11% 18.58%
}

#case-study #compass-hunt .browser .social-updates li {
    width: 100%;
    height: 20.51%;
    padding-bottom: 3.27%
}

#case-study #compass-hunt .browser .social-updates li>div {
    display: table;
    width: 100%;
    height: 100%;
    background-color: white;
    border-radius: 2px;
    position: relative;
    padding-left: 14.64%;
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0)
}

#case-study #compass-hunt .browser .social-updates li>div:before {
    content: "";
    display: block;
    position: absolute;
    background-image: url(/assets/work/case-studies/compass-hunt/triangle.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 1.48%;
    height: 100%;
    top: 0;
    left: -1.48%
}

#case-study #compass-hunt .browser .social-updates li>div.blue {
    background-color: #01aaff;
    padding-lefT: 5.62%
}

#case-study #compass-hunt .browser .social-updates li>div.blue:before {
    background-image: url(/assets/work/case-studies/compass-hunt/triangle-blue.png)
}

#case-study #compass-hunt .browser .social-updates li>div.blue h5 {
    color: white
}

#case-study #compass-hunt .browser .social-updates li>div.blue .text-wrapper>div div {
    width: 4.43%;
    height: 31%;
    right: 5.51%;
    top: 34%
}

#case-study #compass-hunt .browser .social-updates li>div h5 {
    display: inline-block;
    color: #333333
}

#case-study #compass-hunt .browser .social-updates li>div h5 span {
    color: #01aaff
}

#case-study #compass-hunt .browser .social-updates li>div h6 {
    font-size: 1.2em;
    color: #d6d6d6;
    position: absolute;
    top: 9%;
    left: 1.47%
}

#case-study #compass-hunt .browser .social-updates li>div p {
    display: inline-block
}

#case-study #compass-hunt .browser .social-updates li>div>figure {
    width: 14.81%;
    height: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 42%;
    left: 5.62%
}

#case-study #compass-hunt .browser .social-updates li>div .twitter {
    background-image: url(/assets/work/case-studies/compass-hunt/twitter-icon.png);
    width: 3.1%;
    height: 16%
}

#case-study #compass-hunt .browser .social-updates li>div .instagram {
    background-image: url(/assets/work/case-studies/compass-hunt/instagram-icon.png);
    width: 2.51%;
    height: 17%
}

#case-study #compass-hunt .browser .social-updates li>div .facebook {
    background-image: url(/assets/work/case-studies/compass-hunt/facebook-icon.png);
    width: 2.51%;
    height: 17%
}

#case-study #compass-hunt .browser .social-updates li>div .text-wrapper {
    display: table-cell;
    vertical-align: middle
}

#case-study #compass-hunt .browser .social-updates li>div .text-wrapper>div {
    float: right;
    padding-right: 5.91%
}

#case-study #compass-hunt .browser .social-updates li>div .check-in-location {
    color: #b2b2b2;
    position: relative
}

#case-study #compass-hunt .browser .social-updates li>div .check-in-location div {
    background-image: url(/assets/work/case-studies/compass-hunt/location-pin-gray.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    width: 4%;
    height: 61%;
    left: -8%;
    top: 16%
}

#case-study #compass-hunt .browser .social-updates li>div .check-in-location p {
    color: #b2b2b2
}

#case-study #compass-hunt .browser .subheader {
    width: 100%;
    height: 19.93%;
    padding: 3.18% 5.76% 0
}

#case-study #compass-hunt .browser .subheader h4 {
    display: inline-block;
    font-size: 3em;
    color: black;
    font-family: "proxima-nova", sans-serif;
    font-weight: 300;
    font-style: normal
}

#case-study #compass-hunt .browser .subheader>div {
    display: inline-block;
    float: right;
    width: 32%;
    height: 31.2%
}

#case-study #compass-hunt .browser .subheader>div ul {
    width: 100%;
    height: 100%
}

#case-study #compass-hunt .browser .subheader>div li {
    display: inline-block;
    font-size: 1.4em;
    color: black;
    text-align: right;
    font-family: "proxima-nova", sans-serif;
    font-weight: 400;
    font-style: normal
}

#case-study #compass-hunt .browser .subheader>div li:first-child {
    color: white;
    background-color: #1596f2;
    border-radius: 2em;
    padding: 3% 10.37%;
    text-align: center
}

#case-study #compass-hunt .browser .subheader>div li:nth-child(2) {
    width: 31.78%
}

#case-study #compass-hunt .browser .subheader>div li:nth-child(3) {
    width: 29.95%
}

#case-study #compass-hunt .browser .graph {
    width: 100%;
    height: 80.06%;
    padding: 0 10.94%
}

#case-study #compass-hunt .browser .graph ul {
    width: 100%;
    height: 100%
}

#case-study #compass-hunt .browser .graph li {
    width: 25%;
    height: 100%;
    float: left;
    position: relative;
    border-right: 1px solid #dbdbdb
}

#case-study #compass-hunt .browser .graph li:first-child {
    border-left: 1px solid #dbdbdb
}

#case-study #compass-hunt .browser .graph li:first-child .bar {
    -moz-box-shadow: #0399e4 0 0 0 1px;
    -webkit-box-shadow: #0399e4 0 0 0 1px;
    box-shadow: #0399e4 0 0 0 1px
}

#case-study #compass-hunt .browser .graph li:nth-child(2) .bar {
    background-color: #01aaff;
    -moz-box-shadow: #01aaff 1px 0 0;
    -webkit-box-shadow: #01aaff 1px 0 0;
    box-shadow: #01aaff 1px 0 0
}

#case-study #compass-hunt .browser .graph li:nth-child(4) .bar {
    background-color: #c6c6c6;
    -moz-box-shadow: #c6c6c6 1px 0 0;
    -webkit-box-shadow: #c6c6c6 1px 0 0;
    box-shadow: #c6c6c6 1px 0 0
}

#case-study #compass-hunt .browser .graph .bar {
    background-color: #0399e4;
    width: 100%;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    -moz-box-shadow: #0399e4 1px 0 0;
    -webkit-box-shadow: #0399e4 1px 0 0;
    box-shadow: #0399e4 1px 0 0
}

#case-study #compass-hunt .browser .graph .bar h5,
#case-study #compass-hunt .browser .graph .bar p {
    color: white;
    text-align: center
}

#case-study #compass-hunt .browser .graph .bar h5 {
    font-family: "proxima-nova", sans-serif;
    font-weight: 700;
    font-style: normal
}

#case-study #compass-hunt .browser .graph .bar p {
    font-family: "proxima-nova", sans-serif;
    font-weight: 300;
    font-style: normal
}

#case-study #compass-hunt .browser .graph .bar div {
    position: relative;
    top: 50%;
    opacity: 0;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

#case-study #compass-hunt .browser .graph .bar-date {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0
}

#case-study #compass-hunt .browser .graph .bar-date h4,
#case-study #compass-hunt .browser .graph .bar-date h6 {
    text-align: center;
    font-family: "proxima-nova", sans-serif;
    font-weight: 300;
    font-style: normal
}

#case-study #compass-hunt .browser .graph .bar-date h4 {
    font-size: 3em;
    color: #757575
}

#case-study #compass-hunt .browser .graph .bar-date h6 {
    font-size: 1.4em;
    color: #bbbbbb;
    text-transform: uppercase;
    padding-top: 6%
}

#case-study #compass-hunt .browser .graph .bar-date.dark h4,
#case-study #compass-hunt .browser .graph .bar-date.dark h6 {
    color: black
}

#case-study #compass-hunt .browser .users-browser.animate .timeline {
    width: 21.17%;
    -moz-transition: width 250ms 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: width 250ms 150ms;
    -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: width 250ms 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#case-study #compass-hunt .browser .users-browser.animate .timeline li:nth-child(2) .timestamp {
    -moz-transition-delay: 600ms;
    -webkit-transition-delay: 600ms;
    transition-delay: 600ms
}

#case-study #compass-hunt .browser .users-browser.animate .timeline li:nth-child(2) .line {
    -moz-transition-delay: 600ms;
    -webkit-transition-delay: 600ms;
    transition-delay: 600ms
}

#case-study #compass-hunt .browser .users-browser.animate .timeline li:nth-child(3) .timestamp {
    -moz-transition-delay: 700ms;
    -webkit-transition-delay: 700ms;
    transition-delay: 700ms
}

#case-study #compass-hunt .browser .users-browser.animate .timeline li:nth-child(3) .line {
    height: 22%;
    -moz-transition-delay: 700ms;
    -webkit-transition-delay: 700ms;
    transition-delay: 700ms
}

#case-study #compass-hunt .browser .users-browser.animate .timeline li:nth-child(4) .timestamp {
    -moz-transition-delay: 800ms;
    -webkit-transition-delay: 800ms;
    transition-delay: 800ms
}

#case-study #compass-hunt .browser .users-browser.animate .timeline li:nth-child(4) .line {
    -moz-transition-delay: 800ms;
    -webkit-transition-delay: 800ms;
    transition-delay: 800ms
}

#case-study #compass-hunt .browser .users-browser.animate .timeline li:nth-child(5) .timestamp {
    -moz-transition-delay: 900ms;
    -webkit-transition-delay: 900ms;
    transition-delay: 900ms
}

#case-study #compass-hunt .browser .users-browser.animate .timestamp {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    -moz-transition: -moz-transform 400ms 500ms cubic-bezier(0.175, 0.885, 0.32, 1.15);
    -webkit-transition: -webkit-transform 400ms 500ms;
    -webkit-transition-delay: cubic-bezier(0.175, 0.885, 0.32, 1.15);
    transition: transform 400ms 500ms cubic-bezier(0.175, 0.885, 0.32, 1.15)
}

#case-study #compass-hunt .browser .users-browser.animate .line {
    height: 45.7%;
    -moz-transition: height 400ms 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transition: height 400ms 500ms;
    -webkit-transition-delay: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: height 400ms 500ms cubic-bezier(0.215, 0.61, 0.355, 1)
}

#case-study #compass-hunt .browser .users-browser.animate .social-updates li>div {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    -moz-transition: -moz-transform 400ms 500ms cubic-bezier(0.175, 0.885, 0.32, 1.15);
    -webkit-transition: -webkit-transform 400ms 500ms;
    -webkit-transition-delay: cubic-bezier(0.175, 0.885, 0.32, 1.15);
    transition: transform 400ms 500ms cubic-bezier(0.175, 0.885, 0.32, 1.15)
}

#case-study #compass-hunt .browser .users-browser.animate .social-updates li:nth-child(2)>div {
    -moz-transition-delay: 600ms;
    -webkit-transition-delay: 600ms;
    transition-delay: 600ms
}

#case-study #compass-hunt .browser .users-browser.animate .social-updates li:nth-child(3)>div {
    -moz-transition-delay: 700ms;
    -webkit-transition-delay: 700ms;
    transition-delay: 700ms
}

#case-study #compass-hunt .browser .users-browser.animate .social-updates li:nth-child(4)>div {
    -moz-transition-delay: 800ms;
    -webkit-transition-delay: 800ms;
    transition-delay: 800ms
}

#case-study #compass-hunt .browser .users-browser.animate .social-updates li:nth-child(5)>div {
    -moz-transition-delay: 900ms;
    -webkit-transition-delay: 900ms;
    transition-delay: 900ms
}

#case-study #compass-hunt .browser .admin-browser.animate .graph li:first-child .bar {
    height: 77.23%
}

#case-study #compass-hunt .browser .admin-browser.animate .graph li:nth-child(2) .bar {
    height: 53.89%;
    -moz-transition-delay: 550ms;
    -webkit-transition-delay: 550ms;
    transition-delay: 550ms
}

#case-study #compass-hunt .browser .admin-browser.animate .graph li:nth-child(2) div {
    -moz-transition-delay: 650ms;
    -webkit-transition-delay: 650ms;
    transition-delay: 650ms
}

#case-study #compass-hunt .browser .admin-browser.animate .graph li:nth-child(3) .bar {
    -moz-transition-delay: 700ms;
    -webkit-transition-delay: 700ms;
    transition-delay: 700ms
}

#case-study #compass-hunt .browser .admin-browser.animate .graph li:nth-child(3) div {
    -moz-transition-delay: 800ms;
    -webkit-transition-delay: 800ms;
    transition-delay: 800ms
}

#case-study #compass-hunt .browser .admin-browser.animate .graph li:nth-child(4) .bar {
    -moz-transition-delay: 850ms;
    -webkit-transition-delay: 850ms;
    transition-delay: 850ms
}

#case-study #compass-hunt .browser .admin-browser.animate .graph li:nth-child(4) div {
    -moz-transition-delay: 950ms;
    -webkit-transition-delay: 950ms;
    transition-delay: 950ms
}

#case-study #compass-hunt .browser .admin-browser.animate .graph .bar {
    height: 17.7%;
    -moz-transition: height 400ms 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transition: height 400ms 400ms;
    -webkit-transition-delay: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: height 400ms 400ms cubic-bezier(0.215, 0.61, 0.355, 1)
}

#case-study #compass-hunt .browser .admin-browser.animate .graph .bar div {
    opacity: 1;
    -moz-transition: opacity 250ms 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transition: opacity 250ms 500ms;
    -webkit-transition-delay: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: opacity 250ms 500ms cubic-bezier(0.215, 0.61, 0.355, 1)
}

#case-study #compass-hunt .image-border {
    border: 1px solid #bfdfdb
}

#case-study #compass-hunt .iphones-container {
    position: relative
}

#case-study #compass-hunt .iphones-container .iphone-asset {
    height: 100%;
    width: auto;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 50%;
    opacity: 0;
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

#case-study #compass-hunt .iphones-container .iphone-asset.left {
    background-image: url(/assets/work/case-studies/compass-hunt/iphones-1.png)
}

#case-study #compass-hunt .iphones-container .iphone-asset.center {
    background-image: url(/assets/work/case-studies/compass-hunt/iphones-2.png);
    opacity: 1;
    z-index: 2
}

#case-study #compass-hunt .iphones-container .iphone-asset.right {
    background-image: url(/assets/work/case-studies/compass-hunt/iphones-3.png)
}

#case-study #compass-hunt .iphones-container.animate .iphone-asset {
    -moz-transition: all 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: all 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: all 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#case-study #compass-hunt .iphones-container.animate .iphone-asset.left {
    opacity: 1;
    -moz-transform: translatex(-144%);
    -ms-transform: translatex(-144%);
    -webkit-transform: translatex(-144%);
    transform: translatex(-144%)
}

#case-study #compass-hunt .iphones-container.animate .iphone-asset.right {
    opacity: 1;
    -moz-transform: translateX(44%);
    -ms-transform: translateX(44%);
    -webkit-transform: translateX(44%);
    transform: translateX(44%)
}

#case-study #compass-hunt .caption-offset {
    margin-top: -56px
}

#case-study #compass-hunt #results li {
    width: 50%;
    height: 540px;
    float: left;
    position: relative;
    opacity: 0;
    -moz-transition: all 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: all 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: all 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#case-study #compass-hunt #results li.animate {
    opacity: 1
}

#case-study #compass-hunt #results li>div {
    width: 320px;
    height: 320px;
    top: 0;
    left: 50%;
    margin-left: -160px;
    position: relative
}

#case-study #compass-hunt #results li h3 {
    padding-top: 44px
}

#case-study #compass-hunt #results .rings:before,
#case-study #compass-hunt #results .rings:after {
    width: 236px;
    height: 236px;
    border-color: #383838;
    top: 50%;
    left: 50%;
    margin-top: -120px;
    margin-left: -120px
}

#case-study #compass-hunt #results .rings:before {
    -o-animation: sessions-ring 2.7s ease-out infinite;
    -moz-animation: sessions-ring 2.7s ease-out infinite;
    -ms-animation: sessions-ring 2.7s ease-out infinite;
    -webkit-animation: sessions-ring 2.7s ease-out infinite;
    animation: sessions-ring 2.7s ease-out infinite;
    -o-animation-delay: 0.9s;
    -moz-animation-delay: 0.9s;
    -ms-animation-delay: 0.9s;
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s
}

#case-study #compass-hunt #results .rings:after {
    -o-animation: sessions-ring 2.7s ease-out infinite;
    -moz-animation: sessions-ring 2.7s ease-out infinite;
    -ms-animation: sessions-ring 2.7s ease-out infinite;
    -webkit-animation: sessions-ring 2.7s ease-out infinite;
    animation: sessions-ring 2.7s ease-out infinite;
    -o-animation-delay: 1.8s;
    -moz-animation-delay: 1.8s;
    -ms-animation-delay: 1.8s;
    -webkit-animation-delay: 1.8s;
    animation-delay: 1.8s
}

#case-study #compass-hunt #results .rings div {
    border-color: #383838;
    border-width: 2px;
    width: 240px;
    height: 240px;
    margin-top: -120px;
    margin-left: -120px;
    -o-animation: sessions-ring 2.7s ease-out infinite;
    -moz-animation: sessions-ring 2.7s ease-out infinite;
    -ms-animation: sessions-ring 2.7s ease-out infinite;
    -webkit-animation: sessions-ring 2.7s ease-out infinite;
    animation: sessions-ring 2.7s ease-out infinite
}

#case-study #compass-hunt #results .rings svg {
    width: 85px;
    height: 56px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -28px;
    margin-left: -42px
}

#case-study #compass-hunt #results .sessions-time-container .circle {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

#case-study #compass-hunt #results .sessions-time-container .circle>div {
    width: 50%;
    height: 50%;
    position: absolute;
    left: 0;
    bottom: 0;
    overflow: hidden;
    -moz-transform-origin: right top;
    -ms-transform-origin: right top;
    -webkit-transform-origin: right top;
    transform-origin: right top
}

#case-study #compass-hunt #results .sessions-time-container .circle>div>div {
    height: 200%;
    width: 200%;
    position: absolute;
    left: 0;
    bottom: 0;
    border: solid 2px transparent;
    border-left-color: #ca6825;
    border-radius: 50%;
    -moz-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg)
}

#case-study #compass-hunt #results .sessions-time-container .circle-background {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 2px solid transparent;
    border-bottom-color: #383838;
    border-left-color: #383838;
    border-top-color: #383838;
    border-radius: 50%;
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

#case-study #compass-hunt #results .sessions-time-container svg {
    width: 59px;
    height: 57px;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%)
}

#case-study #compass-hunt #results .sessions-time-container.animate .quarter-1 div {
    -o-animation: rotate 0.25s linear forwards;
    -moz-animation: rotate 0.25s linear forwards;
    -ms-animation: rotate 0.25s linear forwards;
    -webkit-animation: rotate 0.25s linear forwards;
    animation: rotate 0.25s linear forwards
}

#case-study #compass-hunt #results .sessions-time-container.animate .quarter-2 {
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

#case-study #compass-hunt #results .sessions-time-container.animate .quarter-2 div {
    -o-animation: rotate 0.25s linear 0.25s forwards;
    -moz-animation: rotate 0.25s linear 0.25s forwards;
    -ms-animation: rotate 0.25s linear 0.25s forwards;
    -webkit-animation: rotate 0.25s linear 0.25s forwards;
    animation: rotate 0.25s linear 0.25s forwards
}

#case-study #compass-hunt #results .sessions-time-container.animate .quarter-3 {
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

#case-study #compass-hunt #results .sessions-time-container.animate .quarter-3 div {
    -o-animation: rotate 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
    -moz-animation: rotate 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
    -ms-animation: rotate 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
    -webkit-animation: rotate 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
    animation: rotate 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards
}

#case-study #compass-hunt #results .map-outer-container {
    height: 480px;
    opacity: 0;
    -moz-transition: opacity 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: opacity 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: opacity 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#case-study #compass-hunt #results .map-outer-container .total-users {
    width: 300px;
    height: 150px;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%)
}

#case-study #compass-hunt #results .map-outer-container .total-users h1 {
    font-size: 120px
}

#case-study #compass-hunt #results .map-outer-container .markers-container,
#case-study #compass-hunt #results .map-outer-container .markers-small-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

#case-study #compass-hunt #results .map-outer-container.animate {
    opacity: 1
}

#case-study #compass-hunt #results .map-outer-container.animate .marker {
    opacity: 1;
    -moz-transition: opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#case-study #compass-hunt #results .map-outer-container.animate .marker:first-child {
    -moz-transition-delay: 650ms;
    -webkit-transition-delay: 650ms;
    transition-delay: 650ms
}

#case-study #compass-hunt #results .map-outer-container.animate .marker:nth-child(2) {
    -moz-transition-delay: 280ms;
    -webkit-transition-delay: 280ms;
    transition-delay: 280ms
}

#case-study #compass-hunt #results .map-outer-container.animate .marker:nth-child(3) {
    -moz-transition-delay: 1650ms;
    -webkit-transition-delay: 1650ms;
    transition-delay: 1650ms
}

#case-study #compass-hunt #results .map-outer-container.animate .marker:nth-child(4) {
    -moz-transition-delay: 1400ms;
    -webkit-transition-delay: 1400ms;
    transition-delay: 1400ms
}

#case-study #compass-hunt #results .map-outer-container.animate .marker:nth-child(5) {
    -moz-transition-delay: 2480ms;
    -webkit-transition-delay: 2480ms;
    transition-delay: 2480ms
}

#case-study #compass-hunt #results .map-outer-container.animate .marker:nth-child(6) {
    -moz-transition-delay: 2350ms;
    -webkit-transition-delay: 2350ms;
    transition-delay: 2350ms
}

#case-study #compass-hunt #results .map-outer-container.animate .marker:nth-child(7) {
    -moz-transition-delay: 2000ms;
    -webkit-transition-delay: 2000ms;
    transition-delay: 2000ms
}

#case-study #compass-hunt #results .map-outer-container.animate .marker-small {
    opacity: 1;
    -moz-transition: opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#case-study #compass-hunt #results .marker-small {
    opacity: 0
}

#case-study #compass-hunt #results .marker-small:first-child {
    top: 50%;
    left: 15%
}

#case-study #compass-hunt #results .marker-small:nth-child(2) {
    top: 40%;
    left: 30%
}

#case-study #compass-hunt #results .marker-small:nth-child(3) {
    top: 70%;
    left: 25%
}

#case-study #compass-hunt #results .marker-small:nth-child(4) {
    top: 64%;
    left: 35%
}

#case-study #compass-hunt #results .marker-small:nth-child(5) {
    top: 70%;
    left: 70%
}

#case-study #compass-hunt #results .marker-small:nth-child(6) {
    top: 45%;
    left: 75%
}

#case-study #compass-hunt #results .marker-small:nth-child(7) {
    top: 40%;
    left: 85%
}

#case-study #compass-hunt #results .marker-small:nth-child(8) {
    top: 65%;
    left: 78%
}

#case-study #compass-hunt #results .marker-small:nth-child(9) {
    top: 40%;
    left: 60%
}

#case-study #compass-hunt #results .marker {
    opacity: 0
}

#case-study #compass-hunt #results .marker:first-child {
    top: 30%;
    left: 25%
}

#case-study #compass-hunt #results .marker:nth-child(2) {
    top: 45%;
    left: 20%
}

#case-study #compass-hunt #results .marker:nth-child(3) {
    top: 50%;
    left: 30%
}

#case-study #compass-hunt #results .marker:nth-child(4) {
    top: 65%;
    left: 75%
}

#case-study #compass-hunt #results .marker:nth-child(5) {
    top: 35%;
    left: 85%
}

#case-study #compass-hunt #results .marker:nth-child(6) {
    top: 40%;
    left: 70%
}

#case-study #compass-hunt #results .marker:nth-child(7) {
    top: 68%;
    left: 40%
}

@media (min-width: 881px) {
    #case-study #compass-hunt .top {
        padding-top: 100px
    }
    #case-study #compass-hunt .bottom {
        padding-bottom: 100px
    }
    #case-study #compass-hunt .constrain.small {
        padding: 0 20px
    }
    #case-study #compass-hunt .overview-social-container.animate.animate .notification {
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    #case-study #compass-hunt .overview-social-container.animate svg {
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }
}

@media (min-width: 1160px) {
    #case-study #compass-hunt .constrain.small {
        width: 1160px
    }
}

@media (max-width: 1160px) {
    #case-study #compass-hunt .constrain.small {
        width: 100%
    }
    #case-study #compass-hunt .heading h1 {
        font-size: 70px;
        line-height: 88px
    }
    #case-study #compass-hunt .heading p {
        font-size: 35px;
        line-height: 42px
    }
    #case-study #compass-hunt .compass {
        width: 188px;
        height: 188px;
        margin-top: -94px;
        margin-left: -94px
    }
    #case-study #compass-hunt .compass div {
        width: 114px;
        height: 114px;
        margin-left: -57px;
        margin-top: -57px
    }
    #case-study #compass-hunt .compass svg {
        width: 132px;
        height: 78px;
        margin-top: -39px;
        margin-left: -66px
    }
    #case-study #compass-hunt .rings:before,
    #case-study #compass-hunt .rings:after {
        width: 112px;
        height: 112px;
        top: 36px;
        left: 36px
    }
    #case-study #compass-hunt .notification {
        max-width: 280px;
        height: 80px;
        margin-top: 85px
    }
    #case-study #compass-hunt .notification h5,
    #case-study #compass-hunt .notification p {
        font-size: 12px
    }
    #case-study #compass-hunt .notification figure {
        width: 6px;
        height: 8px;
        margin-right: 5px
    }
    #case-study #compass-hunt .notification.twitter {
        padding-left: 72px
    }
    #case-study #compass-hunt .notification.twitter:before {
        width: 24px;
        height: 20px;
        top: 28px;
        left: 26px
    }
    #case-study #compass-hunt .notification.instagram {
        padding-left: 86px
    }
    #case-study #compass-hunt .notification.instagram:before {
        width: 60px;
        height: 60px;
        top: 11px;
        left: 11px
    }
}

@media (max-width: 980px) {
    #case-study #compass-hunt .heading {
        top: 0;
        margin-top: 106px
    }
    #case-study #compass-hunt .heading .constrain {
        width: 100%;
        padding: 0 20px;
        position: relative;
        text-align: center
    }
    #case-study #compass-hunt .heading h1 {
        font-size: 30px;
        line-height: 30px
    }
    #case-study #compass-hunt .heading p {
        font-size: 22px;
        line-height: 22px;
        color: #9898a5
    }
    #case-study #compass-hunt .phone-desktop {
        display: none
    }
    #case-study #compass-hunt .map-one {
        min-height: 530px
    }
    #case-study #compass-hunt .map-one .map-inner-container .marker,
    #case-study #compass-hunt .map-one .map-inner-container .prize {
        display: none
    }
    #case-study #compass-hunt .phone-mobile {
        display: block;
        width: 280px;
        height: 268px;
        bottom: 0;
        position: relative;
        margin: auto
    }
    #case-study #compass-hunt .phone-mobile figure {
        display: block;
        background-image: url(/assets/work/case-studies/compass-hunt/iphone-mobile.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 150px;
        height: 100%;
        margin: auto
    }
    #case-study #compass-hunt .phone-mobile .marker,
    #case-study #compass-hunt .phone-mobile .prize {
        position: absolute;
        bottom: 0;
        display: block
    }
    #case-study #compass-hunt .phone-mobile .marker {
        left: 6px;
        top: 130px
    }
    #case-study #compass-hunt .phone-mobile .prize {
        left: auto;
        right: 6px;
        top: 120px
    }
    #case-study #compass-hunt .browser {
        font-size: 8px
    }
}

@media (max-width: 880px) {
    #case-study #compass-hunt .map-one,
    #case-study #compass-hunt .marquee {
        max-height: 686px
    }
    #case-study #compass-hunt figcaption {
        font-size: 14px;
        margin-top: 18px
    }
    #case-study #compass-hunt .caption-offset {
        margin-top: -25px
    }
    #case-study #compass-hunt section div:not(.copy) .top {
        padding-top: 30px
    }
    #case-study #compass-hunt section div:not(.copy) .bottom {
        padding-bottom: 30px
    }
    #case-study #compass-hunt .alt-3 h1 {
        font-size: 24px
    }
    #case-study #compass-hunt .alt-3 h1 span {
        font-size: 12px
    }
    #case-study #compass-hunt .alt-3 h3 {
        font-size: 14px
    }
    #case-study #compass-hunt .overview-social-container {
        margin: 30px auto;
        height: 448px;
        position: relative
    }
    #case-study #compass-hunt .overview-social-container.animate .notification {
        -moz-transform: translateX(-50%) scale(1);
        -ms-transform: translateX(-50%) scale(1);
        -webkit-transform: translateX(-50%) scale(1);
        transform: translateX(-50%) scale(1)
    }
    #case-study #compass-hunt .overview-social-container.animate svg {
        -moz-transform: rotate(272deg);
        -ms-transform: rotate(272deg);
        -webkit-transform: rotate(272deg);
        transform: rotate(272deg)
    }
    #case-study #compass-hunt .compass svg {
        -moz-transform: rotate(92deg);
        -ms-transform: rotate(92deg);
        -webkit-transform: rotate(92deg);
        transform: rotate(92deg)
    }
    #case-study #compass-hunt .notification {
        display: block;
        width: 100%;
        margin-top: 0;
        float: none;
        position: absolute;
        left: 50%;
        -moz-transform: translateX(-50%) scale(0);
        -ms-transform: translateX(-50%) scale(0);
        -webkit-transform: translateX(-50%) scale(0);
        transform: translateX(-50%) scale(0)
    }
    #case-study #compass-hunt .notification.twitter {
        top: 0
    }
    #case-study #compass-hunt .notification.instagram {
        bottom: 0
    }
    #case-study #compass-hunt .toggle {
        width: 100%;
        height: 40px
    }
    #case-study #compass-hunt .toggle li {
        font-size: 14px;
        line-height: 40px
    }
    #case-study #compass-hunt .browser {
        font-size: 5px
    }
    #case-study #compass-hunt #results li {
        width: 100%;
        height: auto;
        float: none;
        padding-bottom: 28px
    }
    #case-study #compass-hunt #results li>div {
        width: 280px;
        height: 280px;
        margin-left: -140px
    }
    #case-study #compass-hunt #results li h3 {
        padding-top: 26px
    }
    #case-study #compass-hunt #results .rings:before,
    #case-study #compass-hunt #results .rings:after {
        width: 212px;
        height: 212px;
        top: 50%;
        left: 50%;
        margin-top: -108px;
        margin-left: -108px
    }
    #case-study #compass-hunt #results .rings div {
        width: 214px;
        height: 214px;
        margin-top: -107px;
        margin-left: -107px
    }
    #case-study #compass-hunt #results .rings svg {
        width: 75px;
        height: 49px;
        margin-top: -24px;
        margin-left: -37px
    }
    #case-study #compass-hunt #results .map-outer-container {
        height: 300px
    }
    #case-study #compass-hunt #results .map-outer-container .marker-small {
        width: 3px;
        height: 3px
    }
    #case-study #compass-hunt #results .map-outer-container .marker-small:before,
    #case-study #compass-hunt #results .map-outer-container .marker-small:after {
        width: 9px;
        height: 10px;
        top: -4px;
        left: -4px
    }
    #case-study #compass-hunt #results .map-outer-container .marker-small:first-child {
        display: block;
        left: 43%
    }
    #case-study #compass-hunt #results .map-outer-container .marker-small:nth-child(2) {
        display: block;
        left: 50%
    }
    #case-study #compass-hunt #results .map-outer-container .marker-small:nth-child(3) {
        display: block;
        top: 60%;
        left: 48%
    }
    #case-study #compass-hunt #results .map-outer-container .marker {
        width: 3px;
        height: 3px;
        display: none
    }
    #case-study #compass-hunt #results .map-outer-container .marker:before,
    #case-study #compass-hunt #results .map-outer-container .marker:after {
        width: 13px;
        height: 13px;
        top: -6px;
        left: -6px
    }
    #case-study #compass-hunt #results .map-outer-container .marker:first-child {
        display: block;
        top: 38%;
        left: 43%
    }
    #case-study #compass-hunt #results .map-outer-container .marker:nth-child(2) {
        display: block;
        top: 48%;
        left: 40%
    }
    #case-study #compass-hunt #results .map-outer-container .marker:nth-child(3) {
        display: block;
        top: 57%;
        left: 55%
    }
    #case-study #compass-hunt #results .map-outer-container .total-users h1 {
        font-size: 60px
    }
}

@media (max-width: 539px) {
    #case-study #compass-hunt .overview-icons-desktop {
        display: none
    }
    #case-study #compass-hunt .overview-icons-mobile {
        margin: 50px auto;
        max-width: 253px;
        width: 100%;
        display: block
    }
    #case-study #compass-hunt .browser {
        font-size: 3px
    }
}

#case-study #botched .alt-1 {
    background-color: #00b3c9
}

#case-study #botched .alt-1 h2 {
    color: white
}

#case-study #botched .alt-1 p {
    color: white
}

#case-study #botched .alt-2 h2 {
    color: black
}

#case-study #botched .alt-2 p {
    color: white
}

#case-study #botched .marquee {
    min-height: 570px
}

#case-study #botched .marquee hr {
    width: 624px
}

#case-study #botched .marquee-scene {
    width: 100%;
    height: 110%;
    min-width: 1229px;
    min-height: 1272px;
    position: absolute;
    bottom: -15%;
    left: 0;
    overflow: hidden
}

@media all and (max-height: 770px) and (min-width: 880px) {
    #case-study #botched .marquee-scene {
        width: 170%;
        height: 170%;
        min-width: 0;
        min-height: 0;
        bottom: -40%
    }
}

#case-study #botched .marquee-scene li {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0
}

#case-study #botched .marquee-scene li img {
    display: block;
    height: 100%
}

#case-study #botched .content-wrap {
    position: relative;
    z-index: 10
}

#case-study #botched .content-wrap .background {
    background-color: #f0a78d;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8
}

#case-study #botched .content-wrap .background .gradient {
    background-image: -moz-linear-gradient(top, #fff 0%, #fff 20%, #f2b49e 80%, #f0a78d 100%);
    background-image: -webkit-linear-gradient(top, #fff 0%, #fff 20%, #f2b49e 80%, #f0a78d 100%);
    background-image: linear-gradient(to bottom, #fff 0%, #fff 20%, #f2b49e 80%, #f0a78d 100%);
    width: 100%;
    height: 1361px;
    position: relative
}

#case-study #botched .content-wrap .falling-photos {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden
}

#case-study #botched .content-wrap .falling-photos div {
    width: 80px;
    height: 80px;
    background-image: url(/assets/work/case-studies/botched/photos/botched-1.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=80);
    opacity: 0.8
}

#case-study #botched .content-wrap .falling-photos div:nth-child(2) {
    background-image: url(/assets/work/case-studies/botched/photos/botched-2.jpg)
}

#case-study #botched .content-wrap .falling-photos div:nth-child(3) {
    background-image: url(/assets/work/case-studies/botched/photos/botched-3.jpg)
}

#case-study #botched .content-wrap .falling-photos div:nth-child(4) {
    background-image: url(/assets/work/case-studies/botched/photos/botched-4.jpg)
}

#case-study #botched .content-wrap .falling-photos div:nth-child(5) {
    background-image: url(/assets/work/case-studies/botched/photos/botched-5.jpg)
}

#case-study #botched .content-wrap .falling-photos div:nth-child(6) {
    background-image: url(/assets/work/case-studies/botched/photos/botched-6.jpg)
}

#case-study #botched .content-wrap .falling-photos div:nth-child(7) {
    background-image: url(/assets/work/case-studies/botched/photos/botched-7.jpg)
}

#case-study #botched .content-wrap .falling-photos div:nth-child(8) {
    background-image: url(/assets/work/case-studies/botched/photos/botched-8.jpg)
}

#case-study #botched .content-wrap .falling-photos div:nth-child(9) {
    background-image: url(/assets/work/case-studies/botched/photos/botched-9.jpg)
}

#case-study #botched .content-wrap .falling-photos div:nth-child(10) {
    background-image: url(/assets/work/case-studies/botched/photos/botched-10.jpg)
}

#case-study #botched .content-wrap .falling-photos div:nth-child(11) {
    background-image: url(/assets/work/case-studies/botched/photos/botched-11.jpg)
}

#case-study #botched .content-wrap .falling-photos div:nth-child(12) {
    background-image: url(/assets/work/case-studies/botched/photos/botched-12.jpg)
}

#case-study #botched .content-wrap .falling-photos div:nth-child(13) {
    background-image: url(/assets/work/case-studies/botched/photos/botched-13.jpg)
}

#case-study #botched .content-wrap .falling-photos div:nth-child(14) {
    background-image: url(/assets/work/case-studies/botched/photos/botched-14.jpg)
}

#case-study #botched .content-wrap .falling-photos div:nth-child(15) {
    background-image: url(/assets/work/case-studies/botched/photos/botched-15.jpg)
}

#case-study #botched .content-wrap .falling-photos div:nth-child(16) {
    background-image: url(/assets/work/case-studies/botched/photos/botched-16.jpg)
}

#case-study #botched .content-wrap .falling-photos div:nth-child(17) {
    background-image: url(/assets/work/case-studies/botched/photos/botched-17.jpg)
}

#case-study #botched .content-wrap .falling-photos div:nth-child(18) {
    background-image: url(/assets/work/case-studies/botched/photos/botched-18.jpg)
}

#case-study #botched .content-wrap .falling-photos div:nth-child(19) {
    background-image: url(/assets/work/case-studies/botched/photos/botched-19.jpg)
}

#case-study #botched .content-wrap .falling-photos div:nth-child(20) {
    background-image: url(/assets/work/case-studies/botched/photos/botched-20.jpg)
}

#case-study #botched .content-wrap .falling-photos div:nth-child(21) {
    background-image: url(/assets/work/case-studies/botched/photos/botched-21.jpg)
}

#case-study #botched .content-wrap .falling-photos div:nth-child(22) {
    background-image: url(/assets/work/case-studies/botched/photos/botched-22.jpg)
}

#case-study #botched .content-wrap .falling-photos div:nth-child(23) {
    background-image: url(/assets/work/case-studies/botched/photos/botched-23.jpg)
}

#case-study #botched .content-wrap .falling-photos div:nth-child(24) {
    background-image: url(/assets/work/case-studies/botched/photos/botched-24.jpg)
}

#case-study #botched .content-wrap .falling-photos div:nth-child(25) {
    background-image: url(/assets/work/case-studies/botched/photos/botched-25.jpg)
}

#case-study #botched .content-wrap .falling-photos div:nth-child(26) {
    background-image: url(/assets/work/case-studies/botched/photos/botched-26.jpg)
}

#case-study #botched .content-wrap .falling-photos div:nth-child(27) {
    background-image: url(/assets/work/case-studies/botched/photos/botched-27.jpg)
}

#case-study #botched .content-wrap .falling-photos div:nth-child(28) {
    background-image: url(/assets/work/case-studies/botched/photos/botched-28.jpg)
}

#case-study #botched .content-wrap .falling-photos div:nth-child(29) {
    background-image: url(/assets/work/case-studies/botched/photos/botched-29.jpg)
}

#case-study #botched .content-wrap .falling-photos div:nth-child(30) {
    background-image: url(/assets/work/case-studies/botched/photos/botched-30.jpg)
}

#case-study #botched .content-wrap section {
    background-color: transparent
}

#case-study #botched .diagram {
    width: 100%;
    max-width: 1216px;
    margin: 0 auto;
    padding: 0 20px
}

#case-study #botched .diagram.transition-in #diagram-copy #thumb,
#case-study #botched .diagram.transition-in #diagram-copy #thumb-2,
#case-study #botched .diagram.transition-in #diagram-copy #thumb-3,
#case-study #botched .diagram.transition-in #diagram-copy #thumb-4,
#case-study #botched .diagram.transition-in #diagram-copy #thumb-5,
#case-study #botched .diagram.transition-in #diagram-copy #thumb-6,
#case-study #botched .diagram.transition-in #diagram-copy #dashed-line,
#case-study #botched .diagram.transition-in #diagram-copy #dashed-line-2 {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1)
}

#case-study #botched .diagram.transition-in #diagram-copy text,
#case-study #botched .diagram.transition-in #diagram-copy .diagram-desktop-9,
#case-study #botched .diagram.transition-in #diagram-copy #dashed-line,
#case-study #botched .diagram.transition-in #diagram-copy #dashed-line-2 {
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1
}

#case-study #botched .diagram.transition-in #red-lines #diagram-desktop-twitter,
#case-study #botched .diagram.transition-in #red-lines #diagram-desktop-fb,
#case-study #botched .diagram.transition-in #red-lines #diagram-desktop-gp {
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1
}

#case-study #botched .diagram.transition-in #diagram-copy-mobile #thumb-mobile,
#case-study #botched .diagram.transition-in #diagram-copy-mobile #thumb-mobile-2,
#case-study #botched .diagram.transition-in #diagram-copy-mobile #thumb-mobile-3,
#case-study #botched .diagram.transition-in #diagram-copy-mobile #thumb-mobile-4,
#case-study #botched .diagram.transition-in #diagram-copy-mobile #thumb-mobile-5,
#case-study #botched .diagram.transition-in #diagram-copy-mobile #thumb-mobile-6,
#case-study #botched .diagram.transition-in #diagram-copy-mobile #dashed-line-mobile,
#case-study #botched .diagram.transition-in #diagram-copy-mobile #dashed-line-mobile-2 {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1)
}

#case-study #botched .diagram.transition-in #diagram-copy-mobile text,
#case-study #botched .diagram.transition-in #diagram-copy-mobile .diagram-mobile-15,
#case-study #botched .diagram.transition-in #diagram-copy-mobile #dashed-line-mobile,
#case-study #botched .diagram.transition-in #diagram-copy-mobile #dashed-line-mobile-2 {
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1
}

#case-study #botched .diagram.transition-in #red-lines-mobile #diagram-mobile-twitter,
#case-study #botched .diagram.transition-in #red-lines-mobile #diagram-mobile-fb,
#case-study #botched .diagram.transition-in #red-lines-mobile #diagram-mobile-gp {
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1
}

#case-study #botched .diagram.transition-dots #red-lines g,
#case-study #botched .diagram.transition-dots #red-lines-mobile g {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1)
}

#case-study #botched .diagram-desktop {
    width: 100%;
    position: relative
}

#case-study #botched .diagram-desktop svg {
    overflow: visible
}

#case-study #botched .diagram-desktop .cls-10,
#case-study #botched .diagram-desktop .cls-2,
#case-study #botched .diagram-desktop .cls-5,
#case-study #botched .diagram-desktop .cls-8 {
    font-family: "Conv_CircularStd-Book", Helvetica, sans-serif
}

#case-study #botched #diagram-copy {
    width: 100%
}

#case-study #botched #diagram-copy text,
#case-study #botched #diagram-copy .diagram-desktop-9 {
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -moz-transition: all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1000ms;
    -webkit-transition: all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition-delay: 1000ms;
    transition: all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1000ms
}

#case-study #botched #diagram-copy #thumb,
#case-study #botched #diagram-copy #thumb-2,
#case-study #botched #diagram-copy #thumb-3,
#case-study #botched #diagram-copy #thumb-4,
#case-study #botched #diagram-copy #thumb-5,
#case-study #botched #diagram-copy #thumb-6 {
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -moz-transition: all 700ms cubic-bezier(0.175, 0.885, 0.32, 1.15);
    -webkit-transition: all 700ms cubic-bezier(0.175, 0.885, 0.32, 1.15);
    transition: all 700ms cubic-bezier(0.175, 0.885, 0.32, 1.15)
}

#case-study #botched #diagram-copy #thumb text,
#case-study #botched #diagram-copy #thumb-2 text,
#case-study #botched #diagram-copy #thumb-3 text,
#case-study #botched #diagram-copy #thumb-4 text,
#case-study #botched #diagram-copy #thumb-5 text,
#case-study #botched #diagram-copy #thumb-6 text {
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1
}

#case-study #botched #diagram-copy #thumb-2 {
    -moz-transition-delay: 50ms;
    -webkit-transition-delay: 50ms;
    transition-delay: 50ms
}

#case-study #botched #diagram-copy #thumb-3 {
    -moz-transition-delay: 150ms;
    -webkit-transition-delay: 150ms;
    transition-delay: 150ms
}

#case-study #botched #diagram-copy #thumb-4 {
    -moz-transition-delay: 200ms;
    -webkit-transition-delay: 200ms;
    transition-delay: 200ms
}

#case-study #botched #diagram-copy #thumb-6 {
    -moz-transition-delay: 50ms;
    -webkit-transition-delay: 50ms;
    transition-delay: 50ms
}

#case-study #botched #diagram-copy #dashed-line,
#case-study #botched #diagram-copy #dashed-line-2 {
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -moz-transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1) 500ms;
    -webkit-transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition-delay: 500ms;
    transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1) 500ms
}

#case-study #botched #diagram-copy #dashed-line-2 {
    -moz-transition-delay: 600ms;
    -webkit-transition-delay: 600ms;
    transition-delay: 600ms
}

#case-study #botched #red-lines {
    width: 93.70748%;
    position: absolute;
    top: 10.7632%;
    left: 6.32245%;
    pointer-events: none
}

#case-study #botched #red-lines #diagram-desktop-twitter,
#case-study #botched #red-lines #diagram-desktop-fb,
#case-study #botched #red-lines #diagram-desktop-gp {
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -moz-transition: all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1000ms;
    -webkit-transition: all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition-delay: 1000ms;
    transition: all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1000ms
}

#case-study #botched #red-lines g {
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
    -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275)
}

#case-study #botched .diagram-mobile {
    display: none;
    width: 100%;
    position: relative
}

#case-study #botched .diagram-mobile svg {
    overflow: visible
}

#case-study #botched .diagram-mobile .diagram-mobile-1,
#case-study #botched .diagram-mobile .diagram-mobile-3,
#case-study #botched .diagram-mobile .diagram-mobile-5,
#case-study #botched .diagram-mobile .diagram-mobile-6 {
    font-family: "Conv_CircularStd-Book", Helvetica, sans-serif
}

#case-study #botched #diagram-copy-mobile {
    width: 100%
}

#case-study #botched #diagram-copy-mobile text,
#case-study #botched #diagram-copy-mobile .diagram-mobile-15 {
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -moz-transition: all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1000ms;
    -webkit-transition: all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition-delay: 1000ms;
    transition: all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1000ms
}

#case-study #botched #diagram-copy-mobile #thumb-mobile,
#case-study #botched #diagram-copy-mobile #thumb-mobile-2,
#case-study #botched #diagram-copy-mobile #thumb-mobile-3,
#case-study #botched #diagram-copy-mobile #thumb-mobile-4,
#case-study #botched #diagram-copy-mobile #thumb-mobile-5,
#case-study #botched #diagram-copy-mobile #thumb-mobile-6 {
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -moz-transition: all 700ms cubic-bezier(0.175, 0.885, 0.32, 1.15);
    -webkit-transition: all 700ms cubic-bezier(0.175, 0.885, 0.32, 1.15);
    transition: all 700ms cubic-bezier(0.175, 0.885, 0.32, 1.15)
}

#case-study #botched #diagram-copy-mobile #thumb-mobile text,
#case-study #botched #diagram-copy-mobile #thumb-mobile-2 text,
#case-study #botched #diagram-copy-mobile #thumb-mobile-3 text,
#case-study #botched #diagram-copy-mobile #thumb-mobile-4 text,
#case-study #botched #diagram-copy-mobile #thumb-mobile-5 text,
#case-study #botched #diagram-copy-mobile #thumb-mobile-6 text {
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1
}

#case-study #botched #diagram-copy-mobile #thumb-mobile-2 {
    -moz-transition-delay: 50ms;
    -webkit-transition-delay: 50ms;
    transition-delay: 50ms
}

#case-study #botched #diagram-copy-mobile #thumb-mobile-3 {
    -moz-transition-delay: 150ms;
    -webkit-transition-delay: 150ms;
    transition-delay: 150ms
}

#case-study #botched #diagram-copy-mobile #thumb-mobile-4 {
    -moz-transition-delay: 200ms;
    -webkit-transition-delay: 200ms;
    transition-delay: 200ms
}

#case-study #botched #diagram-copy-mobile #thumb-mobile-6 {
    -moz-transition-delay: 50ms;
    -webkit-transition-delay: 50ms;
    transition-delay: 50ms
}

#case-study #botched #diagram-copy-mobile #dashed-line-mobile,
#case-study #botched #diagram-copy-mobile #dashed-line-mobile-2 {
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -moz-transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1) 500ms;
    -webkit-transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition-delay: 500ms;
    transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1) 500ms
}

#case-study #botched #diagram-copy-mobile #dashed-line-mobile-2 {
    -moz-transition-delay: 600ms;
    -webkit-transition-delay: 600ms;
    transition-delay: 600ms
}

#case-study #botched #red-lines-mobile {
    width: 93.64548%;
    position: absolute;
    top: 3.91631%;
    left: 3.34448%;
    pointer-events: none
}

#case-study #botched #red-lines-mobile #diagram-mobile-twitter,
#case-study #botched #red-lines-mobile #diagram-mobile-fb,
#case-study #botched #red-lines-mobile #diagram-mobile-gp {
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -moz-transition: all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1000ms;
    -webkit-transition: all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition-delay: 1000ms;
    transition: all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1000ms
}

#case-study #botched #red-lines-mobile g {
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
    -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275)
}

#case-study #botched .facial-recognition {
    display: inline-block;
    width: 100%;
    padding: 74px 0 3px
}

#case-study #botched .face-scene {
    width: 388px;
    height: 542px;
    margin: 0 auto;
    position: relative
}

#case-study #botched .face-scene li {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    pointer-events: none
}

#case-study #botched .face-scene img {
    width: 100%;
    display: block
}

#case-study #botched .face-scene .map {
    display: block;
    pointer-events: auto;
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1
}

#case-study #botched .face-scene .head {
    display: block;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    transform: scale(0.8)
}

#case-study #botched .face-scene .eyes img,
#case-study #botched .face-scene .mouth img {
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d
}

#case-study #botched .instructions {
    margin-top: 60px;
    padding-bottom: 0;
    text-align: center;
    font-size: 14px;
    font-family: "Conv_CircularStd-Book", Helvetica, sans-serif;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    -moz-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#case-study #botched .instructions.show {
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    -moz-transition: all 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: all 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: all 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#case-study #botched .browser {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding: 13px 40px;
    position: relative
}

#case-study #botched .browser img {
    max-width: 100%
}

#case-study #botched .browser-wrap {
    display: inline-block;
    margin: auto;
    position: relative
}

#case-study #botched .progress {
    width: 100%;
    padding: 0 2.80811%;
    position: absolute;
    left: 0;
    bottom: 54.70201%
}

#case-study #botched .progress h4 {
    color: white;
    font-family: "Futura", Helvetica, Ariel, sans-serif;
    font-size: 20px;
    font-weight: 700;
    text-align: left
}

#case-study #botched .progress-bar-wrap {
    width: 100%;
    height: 0.53691%;
    padding: 0 2.80811%;
    position: absolute;
    top: 45.90604%;
    left: 0
}

#case-study #botched .progress-bar {
    width: 0;
    height: 100%;
    background-color: white
}

#case-study #botched .browser-photos {
    width: 100%;
    height: 48.05369%;
    position: absolute;
    bottom: 5.36913%;
    left: 0;
    padding: 0 2.80811%
}

#case-study #botched .browser-photos ul {
    width: 100%;
    height: 100%;
    overflow: hidden
}

#case-study #botched .browser-photos li {
    width: 9.91736%;
    height: 33.51955%;
    float: left;
    margin-right: 0.08264%;
    margin-bottom: 0.1033%;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(/assets/work/case-studies/botched/browser-photos/photo-1.jpg);
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0
}

#case-study #botched .browser-photos li:nth-child(2) {
    background-image: url(/assets/work/case-studies/botched/browser-photos/photo-2.jpg)
}

#case-study #botched .browser-photos li:nth-child(3) {
    background-image: url(/assets/work/case-studies/botched/browser-photos/photo-3.jpg)
}

#case-study #botched .browser-photos li:nth-child(4) {
    background-image: url(/assets/work/case-studies/botched/browser-photos/photo-4.jpg)
}

#case-study #botched .browser-photos li:nth-child(5) {
    background-image: url(/assets/work/case-studies/botched/browser-photos/photo-5.jpg)
}

#case-study #botched .browser-photos li:nth-child(6) {
    background-image: url(/assets/work/case-studies/botched/browser-photos/photo-6.jpg)
}

#case-study #botched .browser-photos li:nth-child(7) {
    background-image: url(/assets/work/case-studies/botched/browser-photos/photo-7.jpg)
}

#case-study #botched .browser-photos li:nth-child(8) {
    background-image: url(/assets/work/case-studies/botched/browser-photos/photo-8.jpg)
}

#case-study #botched .browser-photos li:nth-child(9) {
    background-image: url(/assets/work/case-studies/botched/browser-photos/photo-9.jpg)
}

#case-study #botched .browser-photos li:nth-child(10) {
    background-image: url(/assets/work/case-studies/botched/browser-photos/photo-10.jpg)
}

#case-study #botched .browser-photos li:nth-child(11) {
    background-image: url(/assets/work/case-studies/botched/browser-photos/photo-11.jpg)
}

#case-study #botched .browser-photos li:nth-child(12) {
    background-image: url(/assets/work/case-studies/botched/browser-photos/photo-12.jpg)
}

#case-study #botched .browser-photos li:nth-child(13) {
    background-image: url(/assets/work/case-studies/botched/browser-photos/photo-13.jpg)
}

#case-study #botched .browser-photos li:nth-child(14) {
    background-image: url(/assets/work/case-studies/botched/browser-photos/photo-14.jpg)
}

#case-study #botched .browser-photos li:nth-child(15) {
    background-image: url(/assets/work/case-studies/botched/browser-photos/photo-15.jpg)
}

#case-study #botched .browser-photos li:nth-child(16) {
    background-image: url(/assets/work/case-studies/botched/browser-photos/photo-16.jpg)
}

#case-study #botched .browser-photos li:nth-child(17) {
    background-image: url(/assets/work/case-studies/botched/browser-photos/photo-17.jpg)
}

#case-study #botched .browser-photos li:nth-child(18) {
    background-image: url(/assets/work/case-studies/botched/browser-photos/photo-18.jpg)
}

#case-study #botched .browser-photos li:nth-child(19) {
    background-image: url(/assets/work/case-studies/botched/browser-photos/photo-19.jpg)
}

#case-study #botched .browser-photos li:nth-child(20) {
    background-image: url(/assets/work/case-studies/botched/browser-photos/photo-20.jpg)
}

#case-study #botched .browser-photos li:nth-child(21) {
    background-image: url(/assets/work/case-studies/botched/browser-photos/photo-21.jpg)
}

#case-study #botched .browser-photos li:nth-child(22) {
    background-image: url(/assets/work/case-studies/botched/browser-photos/photo-22.jpg)
}

#case-study #botched .browser-photos li:nth-child(23) {
    background-image: url(/assets/work/case-studies/botched/browser-photos/photo-23.jpg)
}

#case-study #botched .browser-photos li:nth-child(24) {
    background-image: url(/assets/work/case-studies/botched/browser-photos/photo-24.jpg)
}

#case-study #botched .browser-photos li:nth-child(25) {
    background-image: url(/assets/work/case-studies/botched/browser-photos/photo-25.jpg)
}

#case-study #botched .browser-photos li:nth-child(26) {
    background-image: url(/assets/work/case-studies/botched/browser-photos/photo-26.jpg)
}

#case-study #botched .browser-photos li:nth-child(27) {
    background-image: url(/assets/work/case-studies/botched/browser-photos/photo-27.jpg)
}

#case-study #botched .browser-photos li:nth-child(28) {
    background-image: url(/assets/work/case-studies/botched/browser-photos/photo-28.jpg)
}

#case-study #botched .browser-photos li:nth-child(29) {
    background-image: url(/assets/work/case-studies/botched/browser-photos/photo-29.jpg)
}

#case-study #botched .browser-photos li:nth-child(10n+10) {
    margin-right: 0
}

#case-study #botched .browser-photos li.selected>div {
    background-color: rgba(240, 167, 141, 0.8);
    width: 100%;
    height: 100%;
    position: relative;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0
}

#case-study #botched .browser-photos li.selected>div:before {
    content: "";
    display: block;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(/assets/work/case-studies/botched/checkmark.png);
    width: 16.66667%;
    height: 16.66667%;
    position: absolute;
    bottom: 8.33333%;
    right: 8.33333%
}

#case-study #botched .continue {
    width: 99.60399%;
    height: 15.7047%;
    position: absolute;
    bottom: 5.36913%;
    left: 0.15601%;
    overflow: hidden
}

#case-study #botched .continue>div {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(/assets/work/case-studies/botched/continue-overlay.png);
    position: absolute;
    bottom: 0;
    left: 0;
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    -moz-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#case-study #botched .continue.active>div {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

#case-study #botched .botched-to-date {
    width: 100%;
    height: 720px;
    overflow: hidden;
    padding-bottom: 100px;
    box-sizing: content-box !important
}

#case-study #botched .photos-grid {
    width: 100%;
    position: absolute
}

#case-study #botched .photos-grid .photo {
    position: relative;
    float: left;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0
}

#case-study #botched .photos-grid .photo.filler figure {
    display: none
}

#case-study #botched .photos-grid .photo figure {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative
}

#case-study #botched .photos-grid .mason_filler {
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1
}

#case-study #botched .photos-grid .mason_filler figure {
    display: none
}

#case-study #botched .photos-grid .mason_filler.show {
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0
}

#case-study #botched .photos-grid .mason_filler.show figure {
    display: block
}

#case-study #botched .botched-to-date .wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

#case-study #botched .botched-to-date .wrap>div {
    width: 100%;
    height: 100%;
    display: table
}

#case-study #botched .botched-to-date .content {
    display: table-cell;
    vertical-align: middle;
    position: relative;
    text-align: center;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    -moz-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#case-study #botched .botched-to-date .content>div {
    width: 119px;
    height: 119px;
    margin: 0 auto
}

#case-study #botched .botched-to-date .content h2 {
    font-size: 18px;
    text-transform: uppercase;
    padding: 36px 0 0
}

#case-study #botched .botched-to-date .content h1 {
    color: white;
    font-size: 120px;
    line-height: 116px;
    letter-spacing: -4px
}

#case-study #botched .botched-to-date.animate .content {
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1)
}

@media (max-width: 1280px) {
    #case-study #botched .marquee-scene {
        left: -15%;
        width: 115%
    }
    #case-study #botched .progress h4 {
        font-size: 17px
    }
}

@media (max-width: 1040px) {
    #case-study #botched .progress h4 {
        font-size: 14px
    }
}

@media (max-width: 996px) {
    #case-study #botched .diagram {
        max-width: 339px
    }
    #case-study #botched .diagram-desktop {
        display: none
    }
    #case-study #botched .diagram-mobile {
        display: block
    }
}

@media (max-width: 880px) {
    #case-study #botched .marquee-scene {
        height: auto;
        min-width: 0;
        min-height: 0;
        left: 0;
        bottom: -8%
    }
    #case-study #botched .marquee-scene li {
        height: auto
    }
    #case-study #botched .marquee-scene li img {
        height: auto;
        width: 100%
    }
    #case-study #botched .face-scene {
        width: 320px;
        height: 447px
    }
    #case-study #botched .facial-recognition {
        padding: 44px 0 0
    }
    #case-study #botched .instructions {
        margin-top: 20px
    }
    #case-study #botched .map-lines>div:first-child {
        width: 120px;
        height: 332px;
        left: 40px !important;
        bottom: 7px
    }
    #case-study #botched .map-lines>div:nth-child(2) {
        width: 125px;
        height: 331px;
        right: 40px !important;
        bottom: 7px
    }
    #case-study #botched .map-lines>div svg {
        width: 100% !important;
        height: 100% !important
    }
    #case-study #botched .progress h4 {
        font-size: 10px
    }
    #case-study #botched .botched-to-date {
        height: 440px
    }
    #case-study #botched .botched-to-date .content h2 {
        font-size: 14px;
        padding-top: 16px
    }
    #case-study #botched .botched-to-date .content h1 {
        font-size: 60px;
        line-height: 60px;
        letter-spacing: -2px
    }
}

@media (max-width: 539px) {
    #case-study #botched .browser {
        padding: 0 20px
    }
    #case-study #botched .progress h4 {
        font-size: 6px
    }
}

#case-study #botched .map-lines {
    width: 100%;
    height: 100%;
    position: relative;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0
}

#case-study #botched .map-lines>div {
    width: 146px;
    height: 403px;
    position: absolute;
    bottom: 8px
}

#case-study #botched .map-lines>div:first-child {
    left: 48px
}

#case-study #botched .map-lines>div:nth-child(2) {
    right: 53px
}

#case-study #botched .map-points {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

#case-study #botched .map-points figure {
    background-color: white;
    width: 12px;
    height: 12px;
    border: 2px solid white;
    border-radius: 50%;
    position: absolute;
    top: 289px;
    left: 44px;
    overflow: hidden;
    cursor: pointer;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0
}

#case-study #botched .map-points figure:before {
    content: "";
    display: block;
    background-color: #f0a78d;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -moz-transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#case-study #botched .map-points figure.active {
    cursor: default
}

#case-study #botched .map-points figure.active:before {
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0)
}

#case-study #botched .map-points figure:nth-child(2) {
    top: 381px;
    left: 50px
}

#case-study #botched .map-points figure:nth-child(3) {
    top: 157px;
    left: 70px
}

#case-study #botched .map-points figure:nth-child(4) {
    top: 276px;
    left: 87px
}

#case-study #botched .map-points figure:nth-child(5) {
    top: 328px;
    left: 90px
}

#case-study #botched .map-points figure:nth-child(6) {
    top: 465px;
    left: 95px
}

#case-study #botched .map-points figure:nth-child(7) {
    top: 253px;
    left: 119px
}

#case-study #botched .map-points figure:nth-child(8) {
    top: 428px;
    left: 134px
}

#case-study #botched .map-points figure:nth-child(9) {
    top: 333px;
    left: 142px
}

#case-study #botched .map-points figure:nth-child(10) {
    top: 376px;
    left: 154px
}

#case-study #botched .map-points figure:nth-child(11) {
    top: 285px;
    left: 155px
}

#case-study #botched .map-points figure:nth-child(12) {
    top: 125px;
    left: 183px
}

#case-study #botched .map-points figure:nth-child(13) {
    top: 203px;
    left: 183px
}

#case-study #botched .map-points figure:nth-child(14) {
    top: 250px;
    left: 185px
}

#case-study #botched .map-points figure:nth-child(15) {
    top: 278px;
    left: 185px
}

#case-study #botched .map-points figure:nth-child(16) {
    top: 322px;
    left: 186px
}

#case-study #botched .map-points figure:nth-child(17) {
    top: 393px;
    left: 186px
}

#case-study #botched .map-points figure:nth-child(18) {
    top: 419px;
    left: 186px
}

#case-study #botched .map-points figure:nth-child(19) {
    top: 460px;
    left: 188px
}

#case-study #botched .map-points figure:nth-child(20) {
    top: 526px;
    left: 188px
}

#case-study #botched .map-points figure:nth-child(21) {
    top: 285px;
    left: 220px
}

#case-study #botched .map-points figure:nth-child(22) {
    top: 376px;
    left: 220px
}

#case-study #botched .map-points figure:nth-child(23) {
    top: 334px;
    left: 233px
}

#case-study #botched .map-points figure:nth-child(24) {
    top: 428px;
    left: 241px
}

#case-study #botched .map-points figure:nth-child(25) {
    top: 253px;
    left: 256px
}

#case-study #botched .map-points figure:nth-child(26) {
    top: 465px;
    left: 281px
}

#case-study #botched .map-points figure:nth-child(27) {
    top: 329px;
    left: 286px
}

#case-study #botched .map-points figure:nth-child(28) {
    top: 271px;
    left: 287px
}

#case-study #botched .map-points figure:nth-child(29) {
    top: 157px;
    left: 305px
}

#case-study #botched .map-points figure:nth-child(30) {
    top: 381px;
    left: 325px
}

#case-study #botched .map-points figure:nth-child(31) {
    top: 290px;
    left: 331px
}

@media (max-width: 880px) {
    #case-study #botched .map-points figure {
        top: 238px;
        left: 35px;
        width: 14px;
        height: 14px
    }
    #case-study #botched .map-points figure:nth-child(2) {
        top: 314px;
        left: 42px
    }
    #case-study #botched .map-points figure:nth-child(3) {
        top: 128px;
        left: 57px
    }
    #case-study #botched .map-points figure:nth-child(4) {
        top: 227px;
        left: 72px
    }
    #case-study #botched .map-points figure:nth-child(5) {
        top: 269px;
        left: 74px
    }
    #case-study #botched .map-points figure:nth-child(6) {
        top: 382px;
        left: 78px
    }
    #case-study #botched .map-points figure:nth-child(7) {
        top: 208px;
        left: 98px
    }
    #case-study #botched .map-points figure:nth-child(8) {
        top: 352px;
        left: 110px
    }
    #case-study #botched .map-points figure:nth-child(9) {
        top: 274px;
        left: 117px
    }
    #case-study #botched .map-points figure:nth-child(10) {
        top: 308px;
        left: 127px
    }
    #case-study #botched .map-points figure:nth-child(11) {
        top: 234px;
        left: 128px
    }
    #case-study #botched .map-points figure:nth-child(12) {
        top: 103px;
        left: 149px
    }
    #case-study #botched .map-points figure:nth-child(13) {
        top: 167px;
        left: 149px
    }
    #case-study #botched .map-points figure:nth-child(14) {
        top: 205px;
        left: 150px
    }
    #case-study #botched .map-points figure:nth-child(15) {
        top: 230px;
        left: 151px
    }
    #case-study #botched .map-points figure:nth-child(16) {
        top: 263px;
        left: 151px
    }
    #case-study #botched .map-points figure:nth-child(17) {
        top: 322px;
        left: 152px
    }
    #case-study #botched .map-points figure:nth-child(18) {
        top: 345px;
        left: 152px
    }
    #case-study #botched .map-points figure:nth-child(19) {
        top: 376px;
        left: 153px
    }
    #case-study #botched .map-points figure:nth-child(20) {
        top: 432px;
        left: 153px
    }
    #case-study #botched .map-points figure:nth-child(21) {
        top: 233px;
        left: 177px
    }
    #case-study #botched .map-points figure:nth-child(22) {
        top: 309px;
        left: 179px
    }
    #case-study #botched .map-points figure:nth-child(23) {
        top: 273px;
        left: 190px
    }
    #case-study #botched .map-points figure:nth-child(24) {
        top: 352px;
        left: 198px
    }
    #case-study #botched .map-points figure:nth-child(25) {
        top: 208px;
        left: 210px
    }
    #case-study #botched .map-points figure:nth-child(26) {
        top: 381px;
        left: 230px
    }
    #case-study #botched .map-points figure:nth-child(27) {
        top: 270px;
        left: 233px
    }
    #case-study #botched .map-points figure:nth-child(28) {
        top: 222px;
        left: 236px
    }
    #case-study #botched .map-points figure:nth-child(29) {
        top: 129px;
        left: 249px
    }
    #case-study #botched .map-points figure:nth-child(30) {
        top: 313px;
        left: 264px
    }
    #case-study #botched .map-points figure:nth-child(31) {
        top: 237px;
        left: 271px
    }
}

#case-study #falcon .marquee {
    background-color: black;
    background-repeat: no-repeat;
    background-image: url(work/case-studies/falcon/hero_image.jpg);
    background-position: top right;
    background-size: contain
}

@media only all and (-webkit-min-device-pixel-ratio: 1.3),
only all and (min--moz-device-pixel-ratio: 1.3),
only all and (-o-min-device-pixel-ratio: 1.3 / 1),
only all and (min-device-pixel-ratio: 1.3),
only all and (min-resolution: 1.3dppx) {
    #case-study #falcon .marquee {
        background-image: url(work/case-studies/falcon/hero_image@2x.jpg)
    }
}

#case-study #falcon .marquee hr {
    border-style: solid;
    margin: 30px 0 0
}

#case-study #falcon h2 {
    color: white
}

#case-study #falcon .alt-1 {
    background-color: #121214
}

#case-study #falcon .alt-2 {
    background-color: black
}

#case-study #falcon .top-section {
    border-top: 1px solid #151617
}

#case-study #falcon hr {
    max-width: 1120px;
    border: 0;
    border-bottom: 1px dashed #2a2a2c;
    margin: 40px auto;
    box-sizing: border-box
}

#case-study #falcon .figure-descriptions {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none
}

#case-study #falcon .figure-descriptions li {
    width: 100%;
    height: 100%;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    -moz-transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#case-study #falcon .figure-descriptions li.active {
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
    -moz-transition: all 0ms;
    -webkit-transition: all 0ms;
    transition: all 0ms
}

#case-study #falcon .figure-descriptions li.active span {
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -moz-transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#case-study #falcon .figure-descriptions li.active figure {
    -moz-transition: width 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 200ms, height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 400ms;
    -webkit-transition: width 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53), height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition-delay: 200ms, 400ms;
    transition: width 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 200ms, height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 400ms
}

#case-study #falcon .figure-descriptions li.active figure:after {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    -moz-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 600ms;
    -webkit-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition-delay: 600ms;
    transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 600ms
}

#case-study #falcon .figure-descriptions span {
    display: block;
    color: white;
    font-size: 12px;
    font-family: "Conv_CircularStd-Book", Helvetica, sans-serif;
    position: absolute;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -moz-transform: translateY(20px);
    -ms-transform: translateY(20px);
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    -moz-transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0ms 200ms;
    -webkit-transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0ms;
    -webkit-transition-delay: 0s, 200ms;
    transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0ms 200ms
}

#case-study #falcon .figure-descriptions figure {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    position: absolute;
    width: 0;
    height: 0;
    -moz-transition: all 0ms 200ms;
    -webkit-transition: all 0ms;
    -webkit-transition-delay: 200ms;
    transition: all 0ms 200ms
}

#case-study #falcon .figure-descriptions figure:after {
    content: "";
    display: block;
    background-color: white;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    width: 9px;
    height: 9px;
    position: absolute;
    right: -5px;
    bottom: -19px;
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
    -moz-transition: all 0ms 200ms;
    -webkit-transition: all 0ms;
    -webkit-transition-delay: 200ms;
    transition: all 0ms 200ms
}

#case-study #falcon #framework .constrain {
    z-index: 1
}

#case-study #falcon .framework-pages {
    width: 100%;
    max-width: 1440px;
    margin: -10% auto 0;
    position: relative;
    z-index: 0
}

#case-study #falcon .framework-pages .grid {
    width: 100%;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0
}

#case-study #falcon .framework-pages .pages {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 0
}

#case-study #falcon .framework-pages .pages>li {
    width: 60.76389%;
    height: 36.23919%;
    position: absolute;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -moz-transform: translateY(-20%);
    -ms-transform: translateY(-20%);
    -webkit-transform: translateY(-20%);
    transform: translateY(-20%)
}

#case-study #falcon .framework-pages .pages>li:first-child {
    top: 55%;
    left: -19%;
    z-index: 2
}

#case-study #falcon .framework-pages .pages>li:nth-child(2) {
    top: 31.77233%;
    left: 19.65278%;
    z-index: 1
}

#case-study #falcon .framework-pages .pages>li:nth-child(3) {
    top: 8.6%;
    right: -19%;
    z-index: 0
}

#case-study #falcon .framework-pages .pages>li img {
    width: 100%
}

#case-study #falcon .framework-pages .pages>li .content {
    position: absolute;
    top: 0;
    left: 0;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0
}

#case-study #falcon .framework-pages .layers {
    width: 100%;
    height: 100%;
    position: relative
}

#case-study #falcon .framework-pages .layers.show-0 li:nth-child(3),
#case-study #falcon .framework-pages .layers.show-1 li:nth-child(3) {
    top: -73%;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=30);
    opacity: 0.3
}

#case-study #falcon .framework-pages .layers.show-0 li:nth-child(2) {
    top: -59%;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=30);
    opacity: 0.3
}

#case-study #falcon .framework-pages .layers li {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -moz-transition: all 800ms cubic-bezier(0.86, 0, 0.07, 1);
    -webkit-transition: all 800ms cubic-bezier(0.86, 0, 0.07, 1);
    transition: all 800ms cubic-bezier(0.86, 0, 0.07, 1)
}

#case-study #falcon .framework-pages .layers li:nth-child(2) .bg,
#case-study #falcon .framework-pages .layers li:nth-child(3) .bg {
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0
}

#case-study #falcon .framework-pages .layers li:nth-child(2) {
    top: -14%
}

#case-study #falcon .framework-pages .layers li:nth-child(3) {
    top: -28%
}

#case-study #falcon .framework-pages .layers li .content {
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0
}

#case-study #falcon .framework-pages .layers li .hitbox {
    width: 95.60241%;
    height: 84.19994%;
    top: 8%;
    left: 2.17143%;
    position: absolute;
    pointer-events: auto;
    cursor: pointer;
    -moz-transform: rotateY(14deg) rotateX(55deg) rotate(141deg);
    -ms-transform: rotateY(14deg) rotateX(55deg) rotate(141deg);
    -webkit-transform: rotateY(14deg) rotateX(55deg) rotate(141deg);
    transform: rotateY(14deg) rotateX(55deg) rotate(141deg)
}

#case-study #falcon .framework-pages .figure-descriptions li.active figure {
    width: 20.48611%;
    height: 5.12104%
}

#case-study #falcon .framework-pages .figure-descriptions li:first-child span {
    top: 45.58865%
}

#case-study #falcon .framework-pages .figure-descriptions li:first-child figure {
    top: 46.1268%
}

#case-study #falcon .framework-pages .figure-descriptions li:nth-child(2) span {
    top: 40.58865%
}

#case-study #falcon .framework-pages .figure-descriptions li:nth-child(2) figure {
    top: 41.1268%
}

#case-study #falcon .framework-pages .figure-descriptions li:nth-child(3) span {
    top: 35.58865%
}

#case-study #falcon .framework-pages .figure-descriptions li:nth-child(3) figure {
    top: 36.1268%
}

#case-study #falcon .framework-pages .figure-descriptions li span {
    left: 11.11111%
}

#case-study #falcon .framework-pages .figure-descriptions li figure {
    left: 18.125%
}

#case-study #falcon #modules .copy h2 {
    padding-top: 0
}

#case-study #falcon #modules .module-wrap {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px
}

#case-study #falcon #modules .module-list {
    width: 100%;
    padding-bottom: 122px
}

#case-study #falcon #modules .module-list li {
    display: inline-block;
    width: 100%;
    -moz-perspective: 1500px;
    -webkit-perspective: 1500px;
    perspective: 1500px
}

#case-study #falcon #modules .module-list li.animate .wrap {
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
    -moz-transform: rotateX(0);
    -ms-transform: rotateX(0);
    -webkit-transform: rotateX(0);
    transform: rotateX(0)
}

#case-study #falcon #modules .module-list li.animate .module-title {
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

#case-study #falcon #modules .module-list li.animate hr {
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1
}

#case-study #falcon #modules .module-list li.animate .figure-descriptions li:first-child span {
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -moz-transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 900ms;
    -webkit-transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition-delay: 900ms;
    transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 900ms
}

#case-study #falcon #modules .module-list li.animate .figure-descriptions li:first-child figure {
    -moz-transition: width 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 1100ms, height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1300ms;
    -webkit-transition: width 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53), height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition-delay: 1100ms, 1300ms;
    transition: width 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 1100ms, height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1300ms
}

#case-study #falcon #modules .module-list li.animate .figure-descriptions li:first-child figure:after {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    -moz-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1500ms;
    -webkit-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition-delay: 1500ms;
    transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1500ms
}

#case-study #falcon #modules .module-list li.animate .figure-descriptions li:nth-child(2) span {
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -moz-transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1800ms;
    -webkit-transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition-delay: 1800ms;
    transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1800ms
}

#case-study #falcon #modules .module-list li.animate .figure-descriptions li:nth-child(2) figure {
    -moz-transition: width 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 2000ms, height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 2200ms;
    -webkit-transition: width 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53), height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition-delay: 2000ms, 2200ms;
    transition: width 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 2000ms, height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 2200ms
}

#case-study #falcon #modules .module-list li.animate .figure-descriptions li:nth-child(2) figure:after {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    -moz-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 2400ms;
    -webkit-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition-delay: 2400ms;
    transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 2400ms
}

#case-study #falcon #modules .module-list hr {
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -moz-transition: opacity 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 100ms;
    -webkit-transition: opacity 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-transition-delay: 100ms;
    transition: opacity 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 100ms
}

#case-study #falcon #modules .figure-descriptions li {
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1
}

#case-study #falcon #modules .figure-descriptions span {
    background-color: #121214;
    left: 0;
    padding-right: 7px;
    z-index: 1;
    max-width: 126px
}

#case-study #falcon #modules .figure-descriptions figure {
    z-index: 0;
    left: 8.92857%
}

#case-study #falcon #modules .module-1 .figure-descriptions li:first-child span {
    top: 16.58986%
}

#case-study #falcon #modules .module-1 .figure-descriptions li:first-child figure {
    top: 18.43318%
}

#case-study #falcon #modules .module-1 .figure-descriptions li:nth-child(2) span {
    top: 30.03226%
}

#case-study #falcon #modules .module-1 .figure-descriptions li:nth-child(2) figure {
    top: 33.25807%
}

#case-study #falcon #modules .module-2 .figure-descriptions span {
    top: 12.41379%
}

#case-study #falcon #modules .module-2 .figure-descriptions figure {
    top: 13.7931%
}

#case-study #falcon #modules .module-4 .figure-descriptions span {
    top: 13.95349%
}

#case-study #falcon #modules .module-4 .figure-descriptions figure {
    top: 15.50388%
}

#case-study #falcon #modules .module-1.animate .figure-descriptions li:first-child figure {
    width: 28%;
    height: 46%
}

#case-study #falcon #modules .module-1.animate .figure-descriptions li:nth-child(2) figure {
    width: 41%;
    height: 24%
}

#case-study #falcon #modules .module-2.animate .figure-descriptions figure {
    width: 48%;
    height: 27%
}

#case-study #falcon #modules .module-4.animate .figure-descriptions figure {
    width: 60%;
    height: 41%
}

#case-study #falcon #modules .active .screenshot:after {
    border-color: #714c8f
}

#case-study #falcon #modules .wrap {
    padding: 0 150px;
    position: relative;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -moz-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -moz-transition: all 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-transition: all 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    transition: all 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955)
}

#case-study #falcon #modules .screenshot {
    display: inline-block;
    width: 100%;
    position: relative
}

#case-study #falcon #modules .screenshot:after {
    content: "";
    display: block;
    border: 1px solid #2a2a2c;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    -moz-transition: border-color 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-transition: border-color 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    transition: border-color 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955)
}

#case-study #falcon #modules .screenshot img {
    width: 100%
}

#case-study #falcon #modules .module-title {
    display: inline-block;
    width: 150px;
    position: absolute;
    bottom: 0;
    left: 0;
    -moz-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -moz-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 600ms;
    -webkit-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition-delay: 600ms;
    transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 600ms
}

#case-study #falcon #modules .module-title h3,
#case-study #falcon #modules .module-title p {
    color: white;
    font-family: "Conv_CircularStd-Book", Helvetica, sans-serif
}

#case-study #falcon #modules .module-title h3 {
    font-size: 40px;
    margin-bottom: 17px
}

#case-study #falcon #modules .module-title span {
    color: #2a2a2c;
    margin-left: 7px
}

#case-study #falcon #modules .module-title p {
    font-size: 12px;
    padding: 0 15px 17px;
    position: relative
}

#case-study #falcon #modules .module-title p:after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border: 1px solid #4ba4e1;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    box-sizing: border-box;
    top: 6px;
    left: 0
}

#case-study #falcon #modules .navigator {
    width: 82px;
    position: absolute;
    top: 0;
    right: 20px;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

#case-study #falcon #modules .navigator li {
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d
}

#case-study #falcon #modules .navigator .screenshot {
    cursor: pointer
}

#case-study #falcon #modules .navigator .screenshot:before {
    content: "";
    display: block;
    background-color: #121214;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=50);
    opacity: 0.5;
    -moz-transition: opacity 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-transition: opacity 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    transition: opacity 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955)
}

#case-study #falcon #modules .navigator hr {
    margin: 5px auto
}

#case-study #falcon #modules .navigator li {
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -moz-transition: all 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-transition: all 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    transition: all 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955)
}

#case-study #falcon #modules .navigator li.active .screenshot:before,
#case-study #falcon #modules .navigator.enable-hover li:hover .screenshot:before {
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0
}

#case-study #falcon #modules .navigator.transition-in li {
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

#case-study #falcon #modules .navigator.transition-in li:nth-child(1) {
    -moz-transition-delay: 100ms;
    -webkit-transition-delay: 100ms;
    transition-delay: 100ms
}

#case-study #falcon #modules .navigator.transition-in li:nth-child(2) {
    -moz-transition-delay: 200ms;
    -webkit-transition-delay: 200ms;
    transition-delay: 200ms
}

#case-study #falcon #modules .navigator.transition-in li:nth-child(3) {
    -moz-transition-delay: 300ms;
    -webkit-transition-delay: 300ms;
    transition-delay: 300ms
}

#case-study #falcon #modules .navigator.transition-in li:nth-child(4) {
    -moz-transition-delay: 400ms;
    -webkit-transition-delay: 400ms;
    transition-delay: 400ms
}

#case-study #falcon #modules .navigator.transition-in li:nth-child(5) {
    -moz-transition-delay: 500ms;
    -webkit-transition-delay: 500ms;
    transition-delay: 500ms
}

#case-study #falcon #products {
    overflow: hidden
}

#case-study #falcon #products:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(work/case-studies/falcon/blur-bg.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0
}

#case-study #falcon #products .thumb-wrap {
    display: inline-block;
    width: 100%;
    max-width: 820px;
    margin-top: 40px
}

#case-study #falcon #products .thumb-wrap li {
    float: left;
    width: calc(16.99% - 16px);
    margin-right: 16px;
    -moz-transition: opacity 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-transition: opacity 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    transition: opacity 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=50);
    opacity: 0.5;
    cursor: pointer
}

#case-study #falcon #products .thumb-wrap li:last-child {
    margin-right: 0
}

#case-study #falcon #products .thumb-wrap li.active {
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1
}

#case-study #falcon #products .thumb-wrap li.active {
    cursor: default
}

#case-study #falcon #products .thumb-wrap.enable-hover li:hover {
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1
}

#case-study #falcon #products .thumb-wrap span {
    display: block;
    color: #737380;
    font-size: 14px;
    font-family: "adobe-garamond-pro", serif;
    font-weight: 400;
    font-style: italic;
    margin-top: 17px;
    text-align: left
}

#case-study #falcon #products .thumbnail {
    width: 100%;
    position: relative
}

#case-study #falcon #products .thumbnail:after {
    content: "";
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box
}

#case-study #falcon #products .thumbnail img {
    width: 100%
}

#case-study #falcon #products .break {
    max-width: 1120px;
    width: 100%
}

#case-study #falcon #products hr {
    margin: 113px auto 0
}

#case-study #falcon .navigation {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

#case-study #falcon .arrow {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    margin-top: -20px;
    cursor: pointer;
    -moz-transition: opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#case-study #falcon .arrow:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border: 2px solid white;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    -moz-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 100ms;
    -webkit-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition-delay: 100ms;
    transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 100ms
}

#case-study #falcon .arrow:after {
    content: "";
    display: block;
    width: 7px;
    height: 12px;
    background-image: url(work/case-studies/falcon/falcon-sprite.png);
    background-size: 49px 19px;
    position: absolute;
    top: 14px
}

@media only all and (-webkit-min-device-pixel-ratio: 1.3),
only all and (min--moz-device-pixel-ratio: 1.3),
only all and (-o-min-device-pixel-ratio: 1.3 / 1),
only all and (min-device-pixel-ratio: 1.3),
only all and (min-resolution: 1.3dppx) {
    #case-study #falcon .arrow:after {
        background-image: url(work/case-studies/falcon/falcon-sprite@2x.png)
    }
}

#case-study #falcon .arrow:not(.disabled).enable-hover:hover:before {
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2)
}

#case-study #falcon .arrow.disabled {
    cursor: default;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=10);
    opacity: 0.1
}

#case-study #falcon .arrow.prev {
    left: 0
}

#case-study #falcon .arrow.prev:after {
    background-position: -19px 0;
    left: 16px
}

#case-study #falcon .arrow.next {
    right: 0
}

#case-study #falcon .arrow.next:after {
    background-position: -28px 0;
    left: 18px
}

#case-study #falcon .tron-lines-wrap {
    display: inline-block;
    width: 100%;
    position: relative
}

#case-study #falcon .tron-lines-wrap>div {
    position: relative;
    padding-bottom: 120px
}

#case-study #falcon .tron-lines-wrap .image-wrap {
    width: 100%;
    max-width: 600px;
    margin: 0 auto 66px
}

#case-study #falcon .tron-lines-wrap .image-wrap img {
    width: 100%;
    opacity: 0
}

#case-study #falcon .tron-lines-wrap canvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none
}

#case-study #falcon .controls {
    width: 100%;
    max-width: 900px;
    height: 58px;
    padding: 0 40px;
    margin: 0 auto
}

#case-study #falcon .controls .play-button {
    float: left;
    width: 40px;
    height: 40px;
    position: relative;
    cursor: pointer
}

#case-study #falcon .controls .play-button:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border: 2px solid white;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    -moz-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 100ms;
    -webkit-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition-delay: 100ms;
    transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 100ms
}

#case-study #falcon .controls .play-button:after {
    content: "";
    display: block;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid white;
    position: absolute;
    top: 15px;
    left: 18px
}

#case-study #falcon .controls .play-button figure {
    display: none;
    background-color: white;
    width: 2px;
    height: 10px;
    position: absolute;
    top: 15px;
    left: 17px
}

#case-study #falcon .controls .play-button figure:before {
    content: "";
    display: block;
    background-color: inherit;
    width: 2px;
    height: 10px;
    position: absolute;
    top: 0;
    right: -5px
}

#case-study #falcon .controls .play-button.pause:after {
    display: none
}

#case-study #falcon .controls .play-button.pause figure {
    display: block
}

#case-study #falcon .controls .play-button.enable-hover:hover:before {
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2)
}

#case-study #falcon .progress-wrap {
    float: right;
    width: calc(100% - 60px);
    position: relative
}

#case-study #falcon .progress-wrap span {
    color: white;
    font-size: 12px;
    font-family: "Conv_CircularStd-Book", Helvetica, sans-serif
}

#case-study #falcon .progress-wrap .left {
    float: left
}

#case-study #falcon .progress-wrap .right {
    float: right
}

#case-study #falcon .progress-bar {
    display: inline-block;
    width: 100%;
    height: 40px;
    position: relative
}

#case-study #falcon .progress-bar .line {
    width: 100%;
    height: 1px;
    background-color: #2a2a2c;
    margin-top: 19px;
    position: relative
}

#case-study #falcon .progress-bar .scrubber {
    width: 25px;
    height: 25px;
    position: absolute;
    top: 7px;
    left: 0;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

#case-study #falcon .progress-bar .scrubber:before {
    content: "";
    display: block;
    width: 21px;
    height: 21px;
    background-color: black;
    border: 2px solid white;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -moz-transition: border-color 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: border-color 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: border-color 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#case-study #falcon .progress-bar .scrubber figure {
    background-color: #7d7d7d;
    width: 1px;
    height: 5px;
    position: absolute;
    top: 10px;
    left: 12px
}

#case-study #falcon .progress-bar .scrubber figure:before,
#case-study #falcon .progress-bar .scrubber figure:after {
    content: "";
    display: block;
    background-color: inherit;
    width: 1px;
    height: 5px;
    position: absolute;
    top: 0
}

#case-study #falcon .progress-bar .scrubber figure:before {
    left: -3px
}

#case-study #falcon .progress-bar .scrubber figure:after {
    right: -3px
}

#case-study #falcon #build {
    overflow: hidden
}

#case-study #falcon #build .slider .markers {
    margin-left: -28px
}

#case-study #falcon #build .slider .markers li.active {
    background-color: #fb940f
}

#case-study #falcon .computer-components {
    display: inline-block;
    width: 100%;
    padding: 54px 0 132px
}

#case-study #falcon .computer-components ul,
#case-study #falcon .computer-components .add-card {
    width: 100%
}

#case-study #falcon .computer-components .add-card:after,
#case-study #falcon .computer-components .card-type:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid #1d1d1d;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    pointer-events: none;
    -moz-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#case-study #falcon .computer-components .add-card,
#case-study #falcon .computer-components .card-type {
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    position: relative;
    cursor: pointer
}

#case-study #falcon .computer-components .add-card.enable-hover:hover:after,
#case-study #falcon .computer-components .card-type.enable-hover:hover:after {
    border-width: 2px
}

#case-study #falcon .computer-components .add-card.enable-hover:hover img,
#case-study #falcon .computer-components .card-type.enable-hover:hover img {
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2)
}

#case-study #falcon .computer-components .add-card .image-wrap {
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px
}

#case-study #falcon .computer-components .add-card .table-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding-left: 5.75%
}

#case-study #falcon .computer-components .add-card .button-area {
    height: 100%;
    display: table
}

#case-study #falcon .computer-components .add-card .text-wrap {
    display: table-cell;
    vertical-align: middle;
    position: relative;
    left: 0
}

#case-study #falcon .computer-components .add-card .text-wrap>div {
    float: right
}

#case-study #falcon .computer-components .add-card figure {
    float: left;
    width: 40px;
    height: 40px;
    background-color: #fb940e;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    position: relative;
    margin-right: 27px;
    -moz-transition: background-color 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-transition: background-color 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    transition: background-color 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955)
}

#case-study #falcon .computer-components .add-card figure:after {
    content: "";
    display: block;
    width: 19px;
    height: 19px;
    background-image: url(work/case-studies/falcon/falcon-sprite.png);
    background-size: 49px 19px;
    position: absolute;
    top: 11px;
    left: 11px
}

@media only all and (-webkit-min-device-pixel-ratio: 1.3),
only all and (min--moz-device-pixel-ratio: 1.3),
only all and (-o-min-device-pixel-ratio: 1.3 / 1),
only all and (min-device-pixel-ratio: 1.3),
only all and (min-resolution: 1.3dppx) {
    #case-study #falcon .computer-components .add-card figure:after {
        background-image: url(work/case-studies/falcon/falcon-sprite@2x.png)
    }
}

#case-study #falcon .computer-components .add-card .left {
    display: block;
    margin-bottom: 3px
}

#case-study #falcon .computer-components .add-card.enable-hover:hover figure {
    background-color: #ffac40
}

#case-study #falcon .computer-components .card-type {
    float: left;
    width: calc(33.333333333% - 12px);
    margin-right: 12px
}

#case-study #falcon .computer-components .card-type:last-child {
    margin-right: 0;
    float: right
}

#case-study #falcon .computer-components .card-type .image-wrap {
    -moz-border-radius: 2px 2px 0 0;
    -webkit-border-radius: 2px;
    border-radius: 2px 2px 0 0;
    position: relative
}

#case-study #falcon .computer-components .card-type figure {
    background-color: white;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: 4.42478%;
    right: 3.84615%;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -moz-transition: opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#case-study #falcon .computer-components .card-type figure:after {
    content: "";
    background-image: url(work/case-studies/falcon/falcon-sprite.png);
    background-size: 49px 19px;
    background-position: -37px 0;
    width: 12px;
    height: 9px;
    position: absolute;
    top: 6px;
    left: 4px
}

@media only all and (-webkit-min-device-pixel-ratio: 1.3),
only all and (min--moz-device-pixel-ratio: 1.3),
only all and (-o-min-device-pixel-ratio: 1.3 / 1),
only all and (min-device-pixel-ratio: 1.3),
only all and (min-resolution: 1.3dppx) {
    #case-study #falcon .computer-components .card-type figure:after {
        background-image: url(work/case-studies/falcon/falcon-sprite@2x.png)
    }
}

#case-study #falcon .computer-components .card-type .text-wrap {
    width: 100%;
    padding: 19px
}

#case-study #falcon .computer-components .card-type .text-wrap h4 {
    padding-bottom: 11px
}

#case-study #falcon .computer-components .card-type.active {
    cursor: default
}

#case-study #falcon .computer-components .card-type.active:after {
    border-color: #fb940e;
    border-width: 2px
}

#case-study #falcon .computer-components .card-type.active figure {
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1
}

#case-study #falcon .computer-components .image-wrap {
    width: 100%;
    overflow: hidden;
    border-bottom: 1px solid #1d1d1d
}

#case-study #falcon .computer-components .text-wrap h4 {
    color: white;
    font-size: 16px;
    line-height: 22px
}

#case-study #falcon .computer-components .text-wrap span {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px
}

#case-study #falcon .computer-components .text-wrap .left {
    color: #fb940e;
    cursor: pointer;
    -moz-transition: color 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-transition: color 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    transition: color 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955)
}

#case-study #falcon .computer-components .text-wrap .left.enable-hover:hover {
    color: #ffac40
}

#case-study #falcon .computer-components .text-wrap .right {
    color: #a5a5a5;
    float: right
}

#case-study #falcon .computer-components .text-wrap .right span {
    margin-right: 4px
}

#case-study #falcon .computer-components img {
    width: 100%;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -moz-transition: all 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 50ms;
    -webkit-transition: all 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-transition-delay: 50ms;
    transition: all 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 50ms
}

#case-study #falcon .computer-components hr {
    border-color: #1d1d1d;
    border-style: solid;
    max-width: 820px
}

#case-study #falcon .slider {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 54px 40px 120px;
    position: relative;
    text-align: center
}

#case-study #falcon .slider>div {
    width: 100%;
    height: 100%;
    position: relative
}

#case-study #falcon .slider .slides-wrap {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    position: relative
}

#case-study #falcon .slider .slides-wrap>img {
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0
}

#case-study #falcon .slider .slides-wrap .slides {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap
}

#case-study #falcon .slider .slides-wrap .slides li,
#case-study #falcon .slider .slides-wrap img {
    width: 100%
}

#case-study #falcon .slider .slides-wrap .slides li {
    display: inline-block;
    margin-right: 20px;
    margin-left: -3px;
    -moz-transition: opacity 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-transition: opacity 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    transition: opacity 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955)
}

#case-study #falcon .slider .slides-wrap .slides li:first-child {
    margin-left: 0
}

#case-study #falcon .slider .slides-wrap .slides li:last-child {
    margin-right: 0
}

#case-study #falcon .slider .slides-wrap .slides li:not(.active) {
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=20);
    opacity: 0.2
}

#case-study #falcon .slider .markers {
    display: none;
    position: absolute;
    bottom: 20px;
    left: 50%;
    margin-left: -62px
}

#case-study #falcon .slider .markers li {
    display: inline-block;
    width: 12px;
    height: 3px;
    background-color: white;
    margin-right: 8px;
    -moz-transition: background-color 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-transition: background-color 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    transition: background-color 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955)
}

#case-study #falcon .slider .markers li:last-child {
    margin-right: 0
}

#case-study #falcon .slider .markers li.active {
    background-color: #4eadec
}

#case-study #falcon .slider .navigation {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

#case-study #falcon #mobile {
    position: relative;
    z-index: 10
}

#case-study #falcon .phone-wrap {
    width: 100%;
    padding: 103px 0 172px
}

#case-study #falcon .phone {
    margin: 0 auto;
    max-width: 385px;
    position: relative
}

#case-study #falcon .phone img {
    width: 100%
}

#case-study #falcon .phone figure {
    width: 17px;
    height: 36px;
    border: 2px solid #2a2a2c;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    position: absolute;
    top: 50%;
    right: -46px
}

#case-study #falcon .phone figure:before {
    content: "";
    display: block;
    background-color: white;
    width: 3px;
    height: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    position: absolute;
    top: 5px;
    left: 5px
}

#case-study #falcon .phone figure:after {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    background-image: url(work/case-studies/falcon/falcon-sprite.png);
    background-size: 49px 19px;
    background-position: -38px -10px;
    position: absolute;
    left: 2px;
    bottom: -22px
}

@media only all and (-webkit-min-device-pixel-ratio: 1.3),
only all and (min--moz-device-pixel-ratio: 1.3),
only all and (-o-min-device-pixel-ratio: 1.3 / 1),
only all and (min-device-pixel-ratio: 1.3),
only all and (min-resolution: 1.3dppx) {
    #case-study #falcon .phone figure:after {
        background-image: url(work/case-studies/falcon/falcon-sprite@2x.png)
    }
}

#case-study #falcon .mobile-content {
    background-color: black;
    width: 81.03896%;
    height: 70.96317%;
    position: absolute;
    top: 14.73088%;
    left: 9.35065%;
    overflow: hidden
}

#case-study #falcon .mobile-content img {
    display: block
}

@media (max-width: 880px) {
    #case-study #falcon {
        padding-top: 0 !important
    }
    #case-study #falcon .marquee {
        position: relative;
        background-color: black;
        background-image: url(work/case-studies/falcon/hero_image_mobile.jpg);
        background-position: top right;
        background-size: contain
    }
}

@media only all and (max-width: 880px) and (-webkit-min-device-pixel-ratio: 1.3),
only all and (max-width: 880px) and (min--moz-device-pixel-ratio: 1.3),
only all and (max-width: 880px) and (-o-min-device-pixel-ratio: 1.3 / 1),
only all and (max-width: 880px) and (min-device-pixel-ratio: 1.3),
only all and (max-width: 880px) and (min-resolution: 1.3dppx) {
    #case-study #falcon .marquee {
        background-image: url(work/case-studies/falcon/hero_image_mobile.jpg)
    }
}

@media (max-width: 880px) {
    #case-study #falcon .marquee .heading {
        top: auto
    }
    #case-study #falcon hr {
        margin: 27px auto
    }
    #case-study #falcon .framework-pages {
        width: 150%;
        margin: -10% -25% 0
    }
    #case-study #falcon .framework-pages .layers li .hitbox {
        pointer-events: none
    }
    #case-study #falcon .framework-pages .figure-descriptions li {
        filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
        opacity: 1
    }
    #case-study #falcon .framework-pages .figure-descriptions li span {
        left: calc(16.6666666% + 40px)
    }
    #case-study #falcon .framework-pages .figure-descriptions li figure {
        left: calc(16.6666666% + 120px);
        width: 30%;
        height: 20%
    }
    #case-study #falcon .framework-pages .figure-descriptions li:first-child span {
        top: 32.5%
    }
    #case-study #falcon .framework-pages .figure-descriptions li:first-child figure {
        width: 0;
        height: 0;
        top: 33%
    }
    #case-study #falcon .framework-pages .figure-descriptions li:nth-child(2) span {
        top: 27.5%
    }
    #case-study #falcon .framework-pages .figure-descriptions li:nth-child(2) figure {
        width: 0;
        height: 0;
        top: 28%
    }
    #case-study #falcon .framework-pages .figure-descriptions li:nth-child(3) span {
        top: 22.5%
    }
    #case-study #falcon .framework-pages .figure-descriptions li:nth-child(3) figure {
        width: 0;
        height: 0;
        top: 23%
    }
    #case-study #falcon .mobile-transitions .figure-descriptions li:first-child {
        filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
        opacity: 1;
        -moz-transition: all 0ms;
        -webkit-transition: all 0ms;
        transition: all 0ms
    }
    #case-study #falcon .mobile-transitions .figure-descriptions li:first-child span {
        filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
        opacity: 1;
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -moz-transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
    }
    #case-study #falcon .mobile-transitions .figure-descriptions li:first-child figure {
        width: 5%;
        height: 25%;
        -moz-transition: width 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 200ms, height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 400ms;
        -webkit-transition: width 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53), height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transition-delay: 200ms, 400ms;
        transition: width 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 200ms, height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 400ms
    }
    #case-study #falcon .mobile-transitions .figure-descriptions li:first-child figure:after {
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
        -moz-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 600ms;
        -webkit-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transition-delay: 600ms;
        transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 600ms
    }
    #case-study #falcon .mobile-transitions .figure-descriptions li:nth-child(2) {
        filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
        opacity: 1;
        -moz-transition: all 0ms;
        -webkit-transition: all 0ms;
        transition: all 0ms
    }
    #case-study #falcon .mobile-transitions .figure-descriptions li:nth-child(2) span {
        filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
        opacity: 1;
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -moz-transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 900ms;
        -webkit-transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transition-delay: 900ms;
        transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 900ms
    }
    #case-study #falcon .mobile-transitions .figure-descriptions li:nth-child(2) figure {
        width: 8%;
        height: 26.5%;
        -moz-transition: width 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 1100ms, height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1300ms;
        -webkit-transition: width 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53), height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transition-delay: 1100ms, 1300ms;
        transition: width 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 1100ms, height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1300ms
    }
    #case-study #falcon .mobile-transitions .figure-descriptions li:nth-child(2) figure:after {
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
        -moz-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1500ms;
        -webkit-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transition-delay: 1500ms;
        transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1500ms
    }
    #case-study #falcon .mobile-transitions .figure-descriptions li:nth-child(3) {
        filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
        opacity: 1;
        -moz-transition: all 0ms;
        -webkit-transition: all 0ms;
        transition: all 0ms
    }
    #case-study #falcon .mobile-transitions .figure-descriptions li:nth-child(3) span {
        filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
        opacity: 1;
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -moz-transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1800ms;
        -webkit-transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transition-delay: 1800ms;
        transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1800ms
    }
    #case-study #falcon .mobile-transitions .figure-descriptions li:nth-child(3) figure {
        width: 11%;
        height: 20%;
        -moz-transition: width 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 2000ms, height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 2200ms;
        -webkit-transition: width 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53), height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transition-delay: 2000ms, 2200ms;
        transition: width 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 2000ms, height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 2200ms
    }
    #case-study #falcon .mobile-transitions .figure-descriptions li:nth-child(3) figure:after {
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
        -moz-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 2400ms;
        -webkit-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transition-delay: 2400ms;
        transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 2400ms
    }
    #case-study #falcon #modules .module-list {
        padding-bottom: 25px
    }
    #case-study #falcon #modules .module-list li:first-child .wrap {
        padding-bottom: 60px
    }
    #case-study #falcon #modules .wrap {
        padding: 74px 0 20px
    }
    #case-study #falcon #modules .wrap .figure-descriptions span {
        top: auto;
        bottom: 1px;
        line-height: 13px;
        font-size: 11px
    }
    #case-study #falcon #modules .wrap .figure-descriptions figure {
        border-top: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        top: auto !important;
        bottom: 7px;
        left: 0
    }
    #case-study #falcon #modules .wrap .figure-descriptions figure:after {
        bottom: auto;
        top: -19px
    }
    #case-study #falcon #modules .module-1 .wrap {
        padding: 88px 0 57px
    }
    #case-study #falcon #modules .module-1 .figure-descriptions li:first-child span {
        top: auto;
        bottom: 36px
    }
    #case-study #falcon #modules .module-1 .figure-descriptions li:first-child figure {
        bottom: 42px
    }
    #case-study #falcon #modules .module-1 .figure-descriptions li:nth-child(2) span {
        top: auto;
        bottom: 0
    }
    #case-study #falcon #modules .module-1 .figure-descriptions li:nth-child(2) figure {
        bottom: 12px
    }
    #case-study #falcon #modules .module-1.animate .figure-descriptions li:first-child figure {
        width: 52%;
        height: 19%
    }
    #case-study #falcon #modules .module-1.animate .figure-descriptions li:nth-child(2) figure {
        width: 83%;
        height: 36%
    }
    #case-study #falcon #modules .module-4.animate .figure-descriptions figure {
        width: 75%;
        height: 23%
    }
    #case-study #falcon #modules .module-title {
        top: 0;
        bottom: auto
    }
    #case-study #falcon #modules .module-title h3 {
        font-size: 30px;
        margin-top: -8px;
        margin-bottom: 11px
    }
    #case-study #falcon #modules .module-title p {
        font-size: 11px;
        line-height: 13px
    }
    #case-study #falcon #modules .navigator {
        display: none
    }
    #case-study #falcon #products .thumb-wrap li {
        width: calc(33.333333% - 11px);
        margin-right: 16px;
        margin-bottom: 20px
    }
    #case-study #falcon #products .thumb-wrap li:nth-child(3n+3) {
        margin-right: 0
    }
    #case-study #falcon #products .thumb-wrap li span {
        margin-top: 7px
    }
    #case-study #falcon #products hr {
        margin: 0 auto
    }
    #case-study #falcon .slider {
        padding: 7px 40px 0
    }
    #case-study #falcon .tron-lines-wrap>div {
        padding-bottom: 25px
    }
    #case-study #falcon .tron-lines-wrap .image-wrap {
        margin-bottom: 10px
    }
    #case-study #falcon .computer-components {
        padding: 2px 0 40px
    }
    #case-study #falcon .computer-components hr {
        margin: 20px auto
    }
    #case-study #falcon #build .slider {
        padding-bottom: 20px
    }
    #case-study #falcon .phone-wrap {
        padding: 19px 0 34px
    }
    #case-study #falcon .phone figure {
        right: -26px
    }
}

@media (max-width: 640px) {
    #case-study #falcon .slider .markers {
        display: block
    }
    #case-study #falcon .arrow {
        display: none
    }
    #case-study #falcon .framework-pages .figure-descriptions li:first-child span {
        top: 32%
    }
    #case-study #falcon .framework-pages .figure-descriptions li:nth-child(2) span {
        top: 27%
    }
    #case-study #falcon .framework-pages .figure-descriptions li:nth-child(3) span {
        top: 22%
    }
    #case-study #falcon .computer-components .text-wrap span {
        font-size: 10px;
        letter-spacing: normal;
        line-height: 100%
    }
    #case-study #falcon .computer-components .text-wrap h4 {
        font-size: 12px;
        line-height: 100%
    }
    #case-study #falcon .computer-components .text-wrap .right span {
        margin-right: 0
    }
    #case-study #falcon .computer-components .add-card .image-wrap img {
        min-height: 64px
    }
    #case-study #falcon .computer-components .add-card figure {
        width: 20px;
        height: 20px;
        margin-right: 16px
    }
    #case-study #falcon .computer-components .add-card figure:after {
        -moz-transform: scale(0.5);
        -ms-transform: scale(0.5);
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        top: 1px;
        left: 1px
    }
    #case-study #falcon .computer-components .add-card .table-wrap {
        padding-left: 20px
    }
    #case-study #falcon .computer-components .add-card .left {
        margin-bottom: 0
    }
    #case-study #falcon .computer-components .card-type .left {
        float: left
    }
    #case-study #falcon .computer-components .card-type figure {
        -moz-transform: scale(0.5);
        -ms-transform: scale(0.5);
        -webkit-transform: scale(0.5);
        transform: scale(0.5)
    }
}

@media (max-width: 539px) {
    #case-study #falcon .framework-pages .figure-descriptions li span {
        left: calc(16.6666666% + 16px)
    }
    #case-study #falcon .framework-pages .figure-descriptions li figure {
        left: calc(16.6666666% + 96px)
    }
    #case-study #falcon .framework-pages .figure-descriptions li:first-child span {
        top: 31.2%
    }
    #case-study #falcon .framework-pages .figure-descriptions li:nth-child(2) span {
        top: 26.2%
    }
    #case-study #falcon .framework-pages .figure-descriptions li:nth-child(3) span {
        top: 21.2%
    }
    #case-study #falcon #modules .module-wrap {
        padding: 0 16px
    }
    #case-study #falcon .slider {
        padding-left: 16px;
        padding-right: 16px
    }
    #case-study #falcon .controls {
        padding: 0 16px
    }
    #case-study #falcon .phone-wrap {
        padding-left: 40px;
        padding-right: 40px
    }
}

@media (max-width: 480px) {
    #case-study #falcon .computer-components .text-wrap span {
        font-size: 5px;
        letter-spacing: normal
    }
    #case-study #falcon .computer-components .text-wrap h4 {
        font-size: 7px
    }
    #case-study #falcon .computer-components .add-card .left {
        margin-bottom: 4px
    }
    #case-study #falcon .computer-components .card-type .left {
        float: left
    }
    #case-study #falcon .computer-components .card-type .text-wrap h4 {
        padding-bottom: 3px
    }
}

#case-study #microsoft section:not(.get-in-touch) .constrain {
    overflow: visible
}

#case-study #microsoft .marquee {
    background-color: #23a9f6;
    background-repeat: no-repeat;
    background-image: url(work/case-studies/microsoft/hero.jpg);
    background-position: center bottom;
    background-size: contain
}

@media only all and (-webkit-min-device-pixel-ratio: 1.3),
only all and (min--moz-device-pixel-ratio: 1.3),
only all and (-o-min-device-pixel-ratio: 1.3 / 1),
only all and (min-device-pixel-ratio: 1.3),
only all and (min-resolution: 1.3dppx) {
    #case-study #microsoft .marquee {
        background-image: url(work/case-studies/microsoft/hero@2x.jpg)
    }
}

#case-study #microsoft .marquee hr {
    width: 60%
}

@media (max-width: 880px) {
    #case-study #microsoft .marquee hr {
        width: 100%
    }
}

#case-study #microsoft .marquee .view-project span {
    color: white
}

#case-study #microsoft .marquee .heading+figure {
    display: none !important;
    background-image: url(sprites.png);
    background-repeat: no-repeat;
    background-position: 0 -105px;
    display: block;
    height: 80px;
    width: 80px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -40px 0 0 -40px;
    cursor: pointer;
    -moz-transition: opacity 300ms;
    -webkit-transition: opacity 300ms;
    transition: opacity 300ms;
    z-index: 4;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent
}

@media all and (-webkit-min-device-pixel-ratio: 2) {
    #case-study #microsoft .marquee .heading+figure {
        background-image: url(sprites_2x.png);
        background-size: 500px 500px
    }
}

#case-study #microsoft .marquee .heading+figure.enable-hover:hover,
#case-study #microsoft .marquee .heading+figure.mobile-active:active {
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7
}

#case-study #microsoft .marquee+section {
    padding-top: 0 !important
}

#case-study #microsoft .devices-wrapper {
    position: relative;
    margin-top: 66px;
    width: 100%
}

@media (max-width: 880px) {
    #case-study #microsoft .devices-wrapper {
        margin-top: 22px;
        width: 104%;
        margin-left: -2%
    }
}

#case-study #microsoft .devices-wrapper span {
    font-family: "adobe-garamond-pro", serif;
    font-weight: 400;
    font-style: italic;
    font-size: 18px;
    color: #737380;
    z-index: 1
}

@media (max-width: 880px) {
    #case-study #microsoft .devices-wrapper span {
        font-size: 14px
    }
}

#case-study #microsoft .devices-platform {
    position: absolute;
    width: 100%;
    left: 0;
    top: -21px;
    text-align: center
}

@media (max-width: 880px) {
    #case-study #microsoft .devices-platform {
        top: -14px
    }
}

#case-study #microsoft .devices-platform,
#case-study #microsoft .devices-wrapper ul li,
#case-study #microsoft .devices-wrapper svg>g>g,
#case-study #microsoft .devices-wrapper svg>g>g path {
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0
}

#case-study #microsoft .devices-platform {
    -moz-transition: all 1000ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: all 1000ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: all 1000ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#case-study #microsoft .devices-wrapper ul li,
#case-study #microsoft .devices-wrapper svg>g>g,
#case-study #microsoft .devices-wrapper svg>g>g path {
    -moz-transition: all 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: all 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: all 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#case-study #microsoft .devices-platform {
    -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px)
}

#case-study #microsoft .devices-wrapper svg>g>g path {
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px)
}

#case-study #microsoft .devices-wrapper ul li {
    -moz-transform: translateY(10px);
    -ms-transform: translateY(10px);
    -webkit-transform: translateY(10px);
    transform: translateY(10px)
}

#case-study #microsoft .animate .devices-platform,
#case-study #microsoft .animate .devices-wrapper ul li,
#case-study #microsoft .animate .devices-wrapper svg>g>g,
#case-study #microsoft .animate .devices-wrapper svg>g>g path {
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1
}

#case-study #microsoft .animate .devices-wrapper svg>g>g path,
#case-study #microsoft .animate .devices-platform,
#case-study #microsoft .animate .devices-wrapper ul li {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

#case-study #microsoft .animate .devices-wrapper ul li:nth-child(1) {
    -moz-transition-delay: 400ms;
    -webkit-transition-delay: 400ms;
    transition-delay: 400ms
}

#case-study #microsoft .animate .devices-wrapper ul li:nth-child(2) {
    -moz-transition-delay: 500ms;
    -webkit-transition-delay: 500ms;
    transition-delay: 500ms
}

#case-study #microsoft .animate .devices-wrapper ul li:nth-child(3) {
    -moz-transition-delay: 600ms;
    -webkit-transition-delay: 600ms;
    transition-delay: 600ms
}

#case-study #microsoft .animate .devices-wrapper ul li:nth-child(4) {
    -moz-transition-delay: 700ms;
    -webkit-transition-delay: 700ms;
    transition-delay: 700ms
}

#case-study #microsoft .devices-wrapper svg>g>g:nth-child(5) {
    -moz-transition-delay: 100ms;
    -webkit-transition-delay: 100ms;
    transition-delay: 100ms
}

#case-study #microsoft .devices-wrapper svg>g>g:nth-child(1) {
    -moz-transition-delay: 200ms;
    -webkit-transition-delay: 200ms;
    transition-delay: 200ms
}

#case-study #microsoft .devices-wrapper svg>g>g:nth-child(1) path {
    -moz-transition-delay: 400ms;
    -webkit-transition-delay: 400ms;
    transition-delay: 400ms
}

#case-study #microsoft .devices-wrapper svg>g>g:nth-child(2) {
    -moz-transition-delay: 300ms;
    -webkit-transition-delay: 300ms;
    transition-delay: 300ms
}

#case-study #microsoft .devices-wrapper svg>g>g:nth-child(2) path {
    -moz-transition-delay: 500ms;
    -webkit-transition-delay: 500ms;
    transition-delay: 500ms
}

#case-study #microsoft .devices-wrapper svg>g>g:nth-child(3) {
    -moz-transition-delay: 400ms;
    -webkit-transition-delay: 400ms;
    transition-delay: 400ms
}

#case-study #microsoft .devices-wrapper svg>g>g:nth-child(3) path {
    -moz-transition-delay: 600ms;
    -webkit-transition-delay: 600ms;
    transition-delay: 600ms
}

#case-study #microsoft .devices-wrapper svg>g>g:nth-child(4) {
    -moz-transition-delay: 500ms;
    -webkit-transition-delay: 500ms;
    transition-delay: 500ms
}

#case-study #microsoft .devices-wrapper svg>g>g:nth-child(4) path {
    -moz-transition-delay: 700ms;
    -webkit-transition-delay: 700ms;
    transition-delay: 700ms
}

#case-study #microsoft .devices-wrapper ul {
    width: 100%;
    overflow: hidden;
    *zoom: 1;
    margin: 34px 0 95px
}

#case-study #microsoft .devices-wrapper ul li {
    float: left;
    width: 19%;
    text-align: center
}

#case-study #microsoft .devices-wrapper ul li:not(:last-child) {
    margin-right: 8%
}

@media (max-width: 880px) {
    #case-study #microsoft .devices-wrapper ul {
        margin: 30px 0 51px
    }
}

#case-study #microsoft .devices-svg {
    width: 100%;
    height: 100%
}

#case-study #microsoft .devices-svg .cls-1,
#case-study #microsoft .devices-svg .cls-3 {
    stroke: #dbdcdd;
    stroke-width: 1px;
    stroke-dasharray: 4, 2;
    fill: none
}

#case-study #microsoft .devices-svg .cls-2 {
    fill: #23a9f6
}

#case-study #microsoft .devices-svg .cls-2,
#case-study #microsoft .devices-svg .cls-3 {
    fill-rule: evenodd
}

#case-study #microsoft #devices {
    position: relative;
    margin: 100px auto 32px;
    z-index: 2
}

#case-study #microsoft .dashed {
    margin: 0;
    border-top-style: dashed;
    margin: 0 5%
}

@media (max-width: 880px) {
    #case-study #microsoft .dashed {
        margin: 0
    }
}

#case-study #microsoft .effective-pixels-wrapper .original {
    width: 100%;
    height: auto;
    position: relative;
    cursor: move;
    background-repeat: no-repeat;
    background-image: url(work/case-studies/microsoft/effective-pixels.jpg);
    background-position: center center;
    background-size: contain
}

@media only all and (-webkit-min-device-pixel-ratio: 1.3),
only all and (min--moz-device-pixel-ratio: 1.3),
only all and (-o-min-device-pixel-ratio: 1.3 / 1),
only all and (min-device-pixel-ratio: 1.3),
only all and (min-resolution: 1.3dppx) {
    #case-study #microsoft .effective-pixels-wrapper .original {
        background-image: url(work/case-studies/microsoft/effective-pixels@2x.jpg)
    }
}

#case-study #microsoft .effective-pixels-wrapper {
    margin: 66px auto 67px
}

@media (max-width: 880px) {
    #case-study #microsoft .effective-pixels-wrapper {
        margin: 22px auto 29px
    }
}

#case-study #microsoft .magno {
    position: absolute;
    top: 0;
    left: 0;
    margin: -9.7561% 0 0 -9.7561%;
    width: 19.5122%;
    height: 31.25%;
    border-radius: 50%;
    overflow: hidden;
    pointer-events: none;
    -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
    -moz-transform: scale(0.8, 0.8);
    -ms-transform: scale(0.8, 0.8);
    -webkit-transform: scale(0.8, 0.8);
    transform: scale(0.8, 0.8)
}

#case-study #microsoft .magno:after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    border-radius: 100%;
    border-color: #676b6f;
    border-width: 2px;
    border-style: solid
}

#case-study #microsoft .magno img {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    margin: 50% 0 0 50%;
    display: block;
    width: 640.625%;
    height: 400%;
    max-width: 1025px;
    max-height: 639px
}

#case-study #microsoft blockquote {
    font-family: "adobe-garamond-pro", serif;
    font-weight: 400;
    font-style: italic;
    font-size: 18px;
    color: #737380;
    line-height: 31px;
    margin-bottom: 68px
}

@media (max-width: 880px) {
    #case-study #microsoft blockquote {
        font-size: 14px;
        line-height: 25px;
        margin-bottom: 32px
    }
}

#case-study #microsoft .responsive-cta {
    width: 100%;
    background-color: #e9f6fe;
    padding: 12px 40px;
    position: relative;
    margin-bottom: 100px;
    text-align: center;
    overflow: hidden
}

@media (max-width: 880px) {
    #case-study #microsoft .responsive-cta {
        margin-bottom: 56px
    }
}

#case-study #microsoft .responsive-cta,
#case-study #microsoft .responsive-cta a {
    color: #23a9f6
}

#case-study #microsoft .responsive-cta a {
    text-decoration: underline
}

#case-study #microsoft .responsive-cta a.enable-hover:hover,
#case-study #microsoft .responsive-cta a.mobile-active:active {
    text-decoration: none
}

#case-study #microsoft .pdf-svg {
    position: absolute;
    top: 50%;
    margin-top: -14px;
    left: 20px
}

#case-study #microsoft .pdf-svg .cls-1 {
    fill: #23a9f6;
    fill-rule: evenodd
}

#case-study #microsoft .responsive-cta span {
    font-family: "Conv_CircularStd-Book", Helvetica, sans-serif;
    font-size: 12px
}

#case-study #microsoft .microsoft-grid {
    padding-top: 80px
}

@media (max-width: 880px) {
    #case-study #microsoft .microsoft-grid {
        padding-top: 46px
    }
}

@media (max-width: 539px) {
    #case-study #microsoft .microsoft-grid {
        padding-top: 88px
    }
}

#case-study #microsoft .microsoft-grid .info {
    float: left;
    width: 40%;
    background-color: white
}

@media (max-width: 539px) {
    #case-study #microsoft .microsoft-grid .info {
        margin-top: -45px
    }
}

#case-study #microsoft .microsoft-grid .info h2 {
    padding: 0;
    margin: 0 0 7px
}

#case-study #microsoft .microsoft-grid .info span,
#case-study #microsoft .microsoft-grid .info li {
    color: #737380
}

#case-study #microsoft .microsoft-grid .info span {
    font-family: "adobe-garamond-pro", serif;
    font-weight: 400;
    font-style: italic;
    font-size: 18px
}

@media (max-width: 880px) {
    #case-study #microsoft .microsoft-grid .info span {
        font-size: 14px
    }
}

#case-study #microsoft .microsoft-grid .info ul {
    margin-top: 70px
}

@media (max-width: 880px) {
    #case-study #microsoft .microsoft-grid .info ul {
        margin-top: 10px
    }
}

#case-study #microsoft .microsoft-grid .info li {
    font-family: "Conv_CircularStd-Book", Helvetica, sans-serif;
    font-size: 14px;
    margin-bottom: 3px
}

@media (max-width: 880px) {
    #case-study #microsoft .microsoft-grid .info li {
        font-size: 12px
    }
}

#case-study #microsoft .microsoft-grid .grid {
    float: right;
    margin-top: -23px;
    width: 60%;
    overflow: hidden;
    background-color: white
}

#case-study #microsoft .microsoft-grid figure {
    height: inherit;
    text-align: center
}

@media (max-width: 880px) {
    #case-study #microsoft .microsoft-grid figure {
        width: 100%
    }
}

#case-study #microsoft .microsoft-grid figure img {
    width: 100%;
    height: auto
}

#case-study #microsoft .nav-pane-svg .cls-1,
#case-study #microsoft .nav-pane-svg .cls-2 {
    stroke: #dbdcdd
}

#case-study #microsoft .nav-pane-svg .cls-1,
#case-study #microsoft .nav-pane-svg .cls-2,
#case-study #microsoft .nav-pane-svg .cls-3 {
    stroke-width: 1px;
    fill: none
}

#case-study #microsoft .nav-pane-svg .cls-2,
#case-study #microsoft .nav-pane-svg .cls-4,
#case-study #microsoft .nav-pane-svg .cls-5 {
    fill-rule: evenodd
}

#case-study #microsoft .nav-pane-svg .cls-3 {
    stroke: #e4e4e6
}

#case-study #microsoft .nav-pane-svg .cls-4 {
    fill: #dbdcdd
}

#case-study #microsoft .nav-pane-svg .cls-5 {
    fill: #23a9f6
}

#case-study #microsoft .patterns-wrapper {
    margin-top: 66px;
    padding-bottom: 66px
}

@media (max-width: 880px) {
    #case-study #microsoft .patterns-wrapper {
        margin-top: 25px;
        padding-bottom: 25px
    }
}

#case-study #microsoft .patterns-wrapper svg {
    width: 100%;
    height: 100%
}

#case-study #microsoft .patterns-wrapper svg .cls-1:first-child {
    stroke-width: 2px
}

#case-study #microsoft .patterns-wrapper .build-animation,
#case-study #microsoft .patterns-wrapper figcaption {
    -moz-transition: all 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: all 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: all 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0
}

#case-study #microsoft .patterns-wrapper figcaption {
    -moz-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px)
}

#case-study #microsoft .animate .patterns-wrapper .build-animation,
#case-study #microsoft .animate .patterns-wrapper figcaption {
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1
}

#case-study #microsoft .animate .patterns-wrapper figcaption {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

#case-study #microsoft .patterns-wrapper ul li:nth-child(1) {
    -moz-transition-delay: 100ms;
    -webkit-transition-delay: 100ms;
    transition-delay: 100ms
}

#case-study #microsoft .patterns-wrapper ul li:nth-child(1) .build-animation:nth-child(1) {
    -moz-transition-delay: 200ms;
    -webkit-transition-delay: 200ms;
    transition-delay: 200ms
}

#case-study #microsoft .patterns-wrapper ul li:nth-child(1) .build-animation:nth-child(2) {
    -moz-transition-delay: 300ms;
    -webkit-transition-delay: 300ms;
    transition-delay: 300ms
}

#case-study #microsoft .patterns-wrapper ul li:nth-child(1) .build-animation:nth-child(3) {
    -moz-transition-delay: 400ms;
    -webkit-transition-delay: 400ms;
    transition-delay: 400ms
}

#case-study #microsoft .patterns-wrapper ul li:nth-child(1) .build-animation:nth-child(4) {
    -moz-transition-delay: 500ms;
    -webkit-transition-delay: 500ms;
    transition-delay: 500ms
}

#case-study #microsoft .patterns-wrapper ul li:nth-child(1) .build-animation:nth-child(5) {
    -moz-transition-delay: 600ms;
    -webkit-transition-delay: 600ms;
    transition-delay: 600ms
}

#case-study #microsoft .patterns-wrapper ul li:nth-child(1) .build-animation:nth-child(6) {
    -moz-transition-delay: 700ms;
    -webkit-transition-delay: 700ms;
    transition-delay: 700ms
}

#case-study #microsoft .patterns-wrapper ul li:nth-child(1) .build-animation:nth-child(7) {
    -moz-transition-delay: 800ms;
    -webkit-transition-delay: 800ms;
    transition-delay: 800ms
}

#case-study #microsoft .patterns-wrapper ul li:nth-child(1) figcaption {
    -moz-transition-delay: 600ms;
    -webkit-transition-delay: 600ms;
    transition-delay: 600ms
}

#case-study #microsoft .patterns-wrapper ul li:nth-child(2) {
    -moz-transition-delay: 200ms;
    -webkit-transition-delay: 200ms;
    transition-delay: 200ms
}

#case-study #microsoft .patterns-wrapper ul li:nth-child(2) .build-animation:nth-child(1) {
    -moz-transition-delay: 300ms;
    -webkit-transition-delay: 300ms;
    transition-delay: 300ms
}

#case-study #microsoft .patterns-wrapper ul li:nth-child(2) .build-animation:nth-child(2) {
    -moz-transition-delay: 400ms;
    -webkit-transition-delay: 400ms;
    transition-delay: 400ms
}

#case-study #microsoft .patterns-wrapper ul li:nth-child(2) .build-animation:nth-child(3) {
    -moz-transition-delay: 500ms;
    -webkit-transition-delay: 500ms;
    transition-delay: 500ms
}

#case-study #microsoft .patterns-wrapper ul li:nth-child(2) .build-animation:nth-child(4) {
    -moz-transition-delay: 600ms;
    -webkit-transition-delay: 600ms;
    transition-delay: 600ms
}

#case-study #microsoft .patterns-wrapper ul li:nth-child(2) .build-animation:nth-child(5) {
    -moz-transition-delay: 700ms;
    -webkit-transition-delay: 700ms;
    transition-delay: 700ms
}

#case-study #microsoft .patterns-wrapper ul li:nth-child(2) .build-animation:nth-child(6) {
    -moz-transition-delay: 800ms;
    -webkit-transition-delay: 800ms;
    transition-delay: 800ms
}

#case-study #microsoft .patterns-wrapper ul li:nth-child(2) figcaption {
    -moz-transition-delay: 700ms;
    -webkit-transition-delay: 700ms;
    transition-delay: 700ms
}

#case-study #microsoft .patterns-wrapper ul li:nth-child(3) {
    -moz-transition-delay: 300ms;
    -webkit-transition-delay: 300ms;
    transition-delay: 300ms
}

#case-study #microsoft .patterns-wrapper ul li:nth-child(3) .build-animation:nth-child(1) {
    -moz-transition-delay: 400ms;
    -webkit-transition-delay: 400ms;
    transition-delay: 400ms
}

#case-study #microsoft .patterns-wrapper ul li:nth-child(3) .build-animation:nth-child(2) {
    -moz-transition-delay: 500ms;
    -webkit-transition-delay: 500ms;
    transition-delay: 500ms
}

#case-study #microsoft .patterns-wrapper ul li:nth-child(3) .build-animation:nth-child(3) {
    -moz-transition-delay: 600ms;
    -webkit-transition-delay: 600ms;
    transition-delay: 600ms
}

#case-study #microsoft .patterns-wrapper ul li:nth-child(3) .build-animation:nth-child(4) {
    -moz-transition-delay: 700ms;
    -webkit-transition-delay: 700ms;
    transition-delay: 700ms
}

#case-study #microsoft .patterns-wrapper ul li:nth-child(3) .build-animation:nth-child(5) {
    -moz-transition-delay: 800ms;
    -webkit-transition-delay: 800ms;
    transition-delay: 800ms
}

#case-study #microsoft .patterns-wrapper ul li:nth-child(3) .build-animation:nth-child(6) {
    -moz-transition-delay: 900ms;
    -webkit-transition-delay: 900ms;
    transition-delay: 900ms
}

#case-study #microsoft .patterns-wrapper ul li:nth-child(3) .build-animation:nth-child(7) {
    -moz-transition-delay: 1000ms;
    -webkit-transition-delay: 1000ms;
    transition-delay: 1000ms
}

#case-study #microsoft .patterns-wrapper ul li:nth-child(3) figcaption {
    -moz-transition-delay: 800ms;
    -webkit-transition-delay: 800ms;
    transition-delay: 800ms
}

#case-study #microsoft .patterns-wrapper ul li:nth-child(4) {
    -moz-transition-delay: 400ms;
    -webkit-transition-delay: 400ms;
    transition-delay: 400ms
}

#case-study #microsoft .patterns-wrapper ul li:nth-child(4) .build-animation:nth-child(1) {
    -moz-transition-delay: 500ms;
    -webkit-transition-delay: 500ms;
    transition-delay: 500ms
}

#case-study #microsoft .patterns-wrapper ul li:nth-child(4) .build-animation:nth-child(2) {
    -moz-transition-delay: 600ms;
    -webkit-transition-delay: 600ms;
    transition-delay: 600ms
}

#case-study #microsoft .patterns-wrapper ul li:nth-child(4) .build-animation:nth-child(3) {
    -moz-transition-delay: 700ms;
    -webkit-transition-delay: 700ms;
    transition-delay: 700ms
}

#case-study #microsoft .patterns-wrapper ul li:nth-child(4) .build-animation:nth-child(4) {
    -moz-transition-delay: 800ms;
    -webkit-transition-delay: 800ms;
    transition-delay: 800ms
}

#case-study #microsoft .patterns-wrapper ul li:nth-child(4) figcaption {
    -moz-transition-delay: 900ms;
    -webkit-transition-delay: 900ms;
    transition-delay: 900ms
}

#case-study #microsoft .patterns-wrapper figcaption {
    margin-top: 13px
}

#case-study #microsoft .patterns-wrapper figcaption {
    color: #737380;
    font-family: "adobe-garamond-pro", serif;
    font-weight: 400;
    font-style: italic;
    font-size: 18px
}

@media (max-width: 880px) {
    #case-study #microsoft .patterns-wrapper figcaption {
        font-size: 14px
    }
}

#case-study #microsoft .patterns-wrapper ul {
    overflow: hidden;
    *zoom: 1
}

#case-study #microsoft .patterns-wrapper li {
    float: left;
    margin-bottom: 35px;
    width: 45%;
    max-width: 375px
}

#case-study #microsoft .patterns-wrapper li:nth-child(odd) {
    margin-right: 10%
}

#case-study #microsoft .tabs-svg .cls-1 {
    stroke: #dbdcdd;
    stroke-width: 1px;
    fill: none
}

#case-study #microsoft .tabs-svg .cls-2 {
    fill: #dbdcdd
}

#case-study #microsoft .tabs-svg .cls-2,
#case-study #microsoft .tabs-svg .cls-3 {
    fill-rule: evenodd
}

#case-study #microsoft .tabs-svg .cls-3 {
    fill: #23a9f6
}

#case-study #microsoft .pivots-svg .cls-1,
#case-study #microsoft .pivots-svg .cls-2 {
    stroke: #dbdcdd;
    stroke-width: 1px;
    fill: none
}

#case-study #microsoft .pivots-svg .cls-2 {
    fill-rule: evenodd
}

#case-study #microsoft .pivots-svg .cls-3 {
    fill: #23a9f6
}

#case-study #microsoft .pivots-svg .cls-4 {
    fill: #dbdcdd
}

#case-study #microsoft .active-canvas .cls-1 {
    stroke: #dbdcdd;
    stroke-width: 1px;
    fill: none
}

#case-study #microsoft .active-canvas .cls-2 {
    fill: #dbdcdd;
    fill-rule: evenodd
}

#case-study #microsoft .alt-1 {
    background-color: #2f2643
}

#case-study #microsoft .alt-1 h2,
#case-study #microsoft .alt-1 p {
    color: white
}

#case-study #microsoft .swiper-app-selector {
    max-width: 1120px
}

#case-study #microsoft .app-selector {
    text-align: center;
    position: relative;
    margin-top: 66px
}

@media (max-width: 880px) {
    #case-study #microsoft .app-selector {
        margin-top: 25px
    }
}

#case-study #microsoft .app-selector li {
    position: relative;
    display: inline-block;
    width: 186px
}

@media (max-width: 880px) {
    #case-study #microsoft .app-selector li {
        width: 140px
    }
}

@media (max-width: 539px) {
    #case-study #microsoft .app-selector li {
        width: 120px
    }
}

#case-study #microsoft .app-selector figure {
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    border: 1px dashed #605872;
    position: relative;
    -moz-transition: border 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: border 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: border 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    margin: 0 8px
}

#case-study #microsoft .app-selector figure img {
    position: relative;
    width: 100%;
    height: auto
}

#case-study #microsoft .app-selector figure.enable-hover:hover,
#case-study #microsoft .app-selector figure.mobile-active:active,
#case-study #microsoft .app-selector figure.active {
    background-color: white;
    border-style: solid;
    border-color: white
}

#case-study #microsoft .app-selector figure.enable-hover:hover .cls-1,
#case-study #microsoft .app-selector figure.mobile-active:active .cls-1,
#case-study #microsoft .app-selector figure.active .cls-1 {
    fill: #2f2643
}

#case-study #microsoft .app-selector figcaption {
    color: white;
    font-size: 18px;
    font-family: "adobe-garamond-pro", serif;
    font-weight: 400;
    font-style: italic;
    margin-top: 16px
}

@media (max-width: 880px) {
    #case-study #microsoft .app-selector figcaption {
        font-size: 14px
    }
}

#case-study #microsoft .app-selector figure svg {
    position: absolute;
    left: 50%;
    top: 50%
}

#case-study #microsoft .app-selector figure svg .cls-1 {
    -moz-transition: fill 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: fill 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: fill 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    fill: white;
    fill-rule: evenodd
}

#case-study #microsoft .app-selector .running-svg {
    width: 58.844px;
    height: 60px;
    margin: -30px 0 0 -29px
}

@media (max-width: 880px) {
    #case-study #microsoft .app-selector .running-svg {
        width: 44.133px;
        height: 45px;
        margin: -23px 0 0 -22px
    }
}

@media (max-width: 539px) {
    #case-study #microsoft .app-selector .running-svg {
        width: 35.3064px;
        height: 36px;
        margin: -18px 0 0 -18px
    }
}

#case-study #microsoft .app-selector .food-svg {
    width: 79.031px;
    height: 48.72px;
    margin: -24px 0 0 -40px
}

@media (max-width: 880px) {
    #case-study #microsoft .app-selector .food-svg {
        width: 59.27325px;
        height: 36.54px;
        margin: -18px 0 0 -30px
    }
}

@media (max-width: 539px) {
    #case-study #microsoft .app-selector .food-svg {
        width: 47.4186px;
        height: 29.232px;
        margin: -15px 0 0 -24px
    }
}

#case-study #microsoft .app-selector .news-svg {
    width: 49px;
    height: 70px;
    margin: -35px 0 0 -25px
}

@media (max-width: 880px) {
    #case-study #microsoft .app-selector .news-svg {
        width: 36.75px;
        height: 52.5px;
        margin: -26px 0 0 -18px
    }
}

@media (max-width: 539px) {
    #case-study #microsoft .app-selector .news-svg {
        width: 29.4px;
        height: 42px;
        margin: -21px 0 0 -15px
    }
}

#case-study #microsoft .app-selector .creation-svg {
    width: 53px;
    height: 57px;
    margin: -29px 0 0 -27px
}

@media (max-width: 880px) {
    #case-study #microsoft .app-selector .creation-svg {
        width: 39.75px;
        height: 42.75px;
        margin: -21px 0 0 -20px
    }
}

@media (max-width: 539px) {
    #case-study #microsoft .app-selector .creation-svg {
        width: 31.8px;
        height: 34.2px;
        margin: -17px 0 0 -16px
    }
}

#case-study #microsoft .app-selector .collaboration-svg {
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px
}

@media (max-width: 880px) {
    #case-study #microsoft .app-selector .collaboration-svg {
        width: 45px;
        height: 45px;
        margin: -23px 0 0 -23px
    }
}

@media (max-width: 539px) {
    #case-study #microsoft .app-selector .collaboration-svg {
        width: 36px;
        height: 36px;
        margin: -18px 0 0 -18px
    }
}

#case-study #microsoft .app-selector .finances-svg {
    width: 34.32px;
    height: 60px;
    margin: -30px 0 0 -17px
}

@media (max-width: 880px) {
    #case-study #microsoft .app-selector .finances-svg {
        width: 25.74px;
        height: 45px;
        margin: -23px 0 0 -13px
    }
}

@media (max-width: 539px) {
    #case-study #microsoft .app-selector .finances-svg {
        width: 20.592px;
        height: 36px;
        margin: -18px 0 0 -10px
    }
}

#case-study #microsoft .apps-copy li {
    display: none
}

#case-study #microsoft .apps-copy li.active {
    display: block
}

#case-study #microsoft .apps-wrapper {
    position: relative;
    width: 100%;
    margin-top: 53px;
    padding-bottom: 100px
}

@media (max-width: 880px) {
    #case-study #microsoft .apps-wrapper {
        margin-top: 14px;
        padding-bottom: 80px
    }
}

@media (max-width: 539px) {
    #case-study #microsoft .apps-wrapper {
        padding-bottom: 56px
    }
}

#case-study #microsoft .apps-container {
    position: relative;
    width: 100%
}

#case-study #microsoft .apps-container li {
    text-align: center;
    background-color: #2f2643
}

#case-study #microsoft .apps-container .app-wrap {
    position: relative;
    max-width: 1440px;
    margin: 0 auto
}

@media (max-width: 880px) {
    #case-study #microsoft .apps-container .app-wrap {
        width: 140%;
        margin-left: -20%
    }
}

#case-study #microsoft .apps-container .app-wrap img,
#case-study #microsoft .apps-container .app-wrap svg {
    position: relative;
    width: 100%;
    height: 100%
}

#case-study #microsoft .apps-container .app-wrap svg {
    z-index: 2
}

#case-study #microsoft .apps-container .app-wrap figure {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center
}

#case-study #microsoft .apps-container .app-wrap figure img {
    display: none
}

#case-study #microsoft .apps-container .app-wrap figure img.active {
    display: inline
}

#case-study #microsoft .apps-container .app-wrap+figcaption {
    position: relative;
    width: 100%;
    max-width: 820px;
    margin: 20px auto 0 auto;
    text-indent: 36px;
    color: white;
    font-size: 18px;
    font-family: "adobe-garamond-pro", serif;
    font-weight: 400;
    font-style: italic;
    text-align: left
}

@media (max-width: 880px) {
    #case-study #microsoft .apps-container .app-wrap+figcaption {
        width: 100%;
        text-align: center;
        left: 0;
        font-size: 14px;
        text-indent: 0
    }
}

#case-study #microsoft .alt-2 {
    background-color: #121214;
    padding-bottom: 100px
}

@media (max-width: 880px) {
    #case-study #microsoft .alt-2 {
        padding-bottom: 56px
    }
}

#case-study #microsoft .alt-2 h2 {
    color: white
}

#case-study #microsoft .video {
    overflow: hidden;
    margin-top: 53px
}

@media (max-width: 880px) {
    .responsive-image{
    margin-left: auto;
    display: block;
    margin-right: auto;
    height: 100%;
    width: 100%;
    }
    #case-study #microsoft .video {
        margin-top: 18px
    }
}

#case-study #microsoft .pagination {
    position: absolute;
    top: 50%;
    margin-top: -75px;
    height: 150px;
    width: 150px;
    border-radius: 75px;
    border: 1px dashed #cccccc;
    cursor: pointer;
    -moz-transition: border-color 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: border-color 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: border-color 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    clear: both;
    z-index: 2
}

@media (max-width: 1279px) {
    #case-study #microsoft .pagination {
        display: none
    }
}

#case-study #microsoft .pagination.enable-hover:hover,
#case-study #microsoft .pagination.mobile-active:active {
    border-color: black
}

#case-study #microsoft .pagination.enable-hover:hover figcaption,
#case-study #microsoft .pagination.enable-hover:hover .arrow-svg,
#case-study #microsoft .pagination.mobile-active:active figcaption,
#case-study #microsoft .pagination.mobile-active:active .arrow-svg {
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1
}

#case-study #microsoft .pagination.enable-hover:hover.pag-left figcaption,
#case-study #microsoft .pagination.mobile-active:active.pag-left figcaption {
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%)
}

#case-study #microsoft .pagination.enable-hover:hover.pag-left .arrow-svg,
#case-study #microsoft .pagination.mobile-active:active.pag-left .arrow-svg {
    margin-left: 16px
}

#case-study #microsoft .pagination.enable-hover:hover.pag-right figcaption,
#case-study #microsoft .pagination.mobile-active:active.pag-right figcaption {
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%)
}

#case-study #microsoft .pagination.enable-hover:hover.pag-right .arrow-svg,
#case-study #microsoft .pagination.mobile-active:active.pag-right .arrow-svg {
    margin-right: 16px
}

#case-study #microsoft .pagination figcaption {
    font-family: "adobe-garamond-pro", serif;
    font-weight: 400;
    font-style: italic;
    font-size: 18px;
    color: #737380;
    position: absolute;
    top: 50%;
    margin-top: -12px
}

#case-study #microsoft .pagination .arrow-svg {
    position: absolute;
    top: 50%;
    margin-top: -4px
}

#case-study #microsoft .pagination figcaption,
#case-study #microsoft .pagination .arrow-svg {
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -moz-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#case-study #microsoft .pag-left {
    left: -75px
}

#case-study #microsoft .pag-left .arrow-svg {
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
    left: 50%;
    margin-left: 32px
}

#case-study #microsoft .pag-left .pag-wrap {
    float: right
}

#case-study #microsoft .pag-left figcaption {
    right: -20px
}

#case-study #microsoft .pag-left .mobile-pag {
    right: -12px
}

#case-study #microsoft .pag-left .tablet-pag {
    right: -27px
}

#case-study #microsoft .pag-left .tablet-pag svg {
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg)
}

#case-study #microsoft .pag-left .desktop-pag {
    right: -30px
}

#case-study #microsoft .pag-left .tv-pag {
    right: -25px
}

#case-study #microsoft .pag-right {
    right: -75px
}

#case-study #microsoft .pag-right .arrow-svg {
    right: 50%;
    margin-right: 32px
}

#case-study #microsoft .pag-right .pag-wrap {
    float: left
}

#case-study #microsoft .pag-right figcaption {
    left: -20px
}

#case-study #microsoft .pag-right .mobile-pag {
    left: -12px
}

#case-study #microsoft .pag-right .tablet-pag {
    left: -27px
}

#case-study #microsoft .pag-right .desktop-pag {
    left: -30px
}

#case-study #microsoft .pag-right .tv-pag {
    left: -25px
}

#case-study #microsoft .pag-wrap {
    position: absolute;
    top: 50%;
    margin-top: -20px;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    pointer-events: none;
    -moz-transition: opacity 300ms;
    -webkit-transition: opacity 300ms;
    transition: opacity 300ms
}

#case-study #microsoft .pag-wrap svg {
    position: relative
}

#case-study #microsoft .cls-1 {
    fill: black;
    fill-rule: evenodd
}

#case-study #microsoft .cls-2 {
    fill: white
}

#case-study #microsoft .pag-wrap.active {
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
    pointer-events: auto
}

#case-study #microsoft .pagination-mobile {
    display: none;
    position: absolute;
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    height: 8px;
    z-index: 2
}

@media (max-width: 539px) {
    #case-study #microsoft .pagination-mobile {
        height: 4px
    }
}

#case-study #microsoft .pagination-mobile .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background-color: #cccccc;
    float: left;
    margin-right: 20px;
    cursor: pointer
}

@media (max-width: 539px) {
    #case-study #microsoft .pagination-mobile .swiper-pagination-bullet {
        margin-right: 10px;
        width: 4px;
        height: 4px
    }
}

#case-study #microsoft .pagination-mobile .swiper-pagination-bullet-active {
    background-color: black
}

@media (max-width: 1279px) {
    #case-study #microsoft .pagination-mobile {
        display: block
    }
}

#case-study #microsoft .pagination-mobile-grid {
    bottom: 20px
}

@media (max-width: 539px) {
    #case-study #microsoft .pagination-mobile-grid {
        bottom: 12px
    }
}

#case-study #microsoft .pagination-mobile-apps {
    bottom: 40px
}

@media (max-width: 539px) {
    #case-study #microsoft .pagination-mobile-apps {
        bottom: 35px
    }
}

#case-study #microsoft .apps-wrapper .pagination {
    border-color: #737380;
    margin-top: -166px
}

#case-study #microsoft .apps-wrapper .pagination.enable-hover:hover,
#case-study #microsoft .apps-wrapper .pagination.mobile-active:active {
    border-color: white
}

#case-study #microsoft .apps-wrapper .cls-1 {
    fill: white
}

#case-study #microsoft .apps-wrapper .cls-2 {
    fill: #2f2643
}

#case-study #microsoft .apps-wrapper figcaption {
    color: white
}

#case-study #microsoft .apps-wrapper .pagination-mobile {
    z-index: 3;
    max-width: 100%;
    text-align: center
}

#case-study #microsoft .apps-wrapper .pagination-mobile .swiper-pagination-bullet {
    background-color: #cccccc;
    display: inline-block;
    float: none
}

#case-study #microsoft .apps-wrapper .pagination-mobile .swiper-pagination-bullet-active {
    background-color: white
}

#case-study #microsoft .swiper-container {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    z-index: 1
}

#case-study #microsoft .swiper-wrapper {
    z-index: 1
}

.op {
    opacity: 0.8 !important;
}

.ib-component nav ul {
    height: 189px;
}

.div-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /*
  This doesn't work
  margin-left: -25%;
  margin-top: -25%;
  */
    width: 300px;
    height: 197px;
    padding: 20px;
    color: white;
    text-align: center;
    /* box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); */
}

.logo-chargement {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 100%;
    margin-top: 0px;
}

.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
    color: #ff2261;
    background-color: #eee;
}

section {
    margin-top: 0px;
}

section:first-of-type {
    margin-top: -41px;
}

.page-heading {
    padding: 20px 0 40px;
    text-align: center;
}

.divider {
    border-bottom: 1px solid #ccc;
}

#fake-footer {
    height: 600px;
    widith: 100%;
    background: #ccc;
}

li a {
    transition-duration: 1s;
}


/* Helpers for top position on internal page links
====================================================*/

#topPos:before,
h3:before {
    display: block;
    content: " ";
    margin-top: -80px;
    height: 80px;
    visibility: hidden;
}


/* AFFIX STYLES
====================================================*/

.panel-affix {
    min-width: 225px;
    margin-top: 152px;
    font-size: 14px;
}

.affix {
    transition-property: top;
    transition-duration: 1s, 1s;
    position: fixed;
    z-index: 9999;
    right: 28px;
}

span>.nav>li>a {/* padding-left: 20px; *//* padding-right: 20px; */padding-top: 28px;padding-bottom: 20px;height: 84px;font-weight: bold;color: #757575;text-transform: uppercase;font-size: 12px;text-align: center;}
.nav-pills>li>a {
    color:black;
    font-weight: bold;
    color: #757575;
    text-transform: uppercase;
    font-size: 11px;
}
.menu-top-page>li>a:focus, .menu-top-page>li>a:hover {
    text-decoration: none;
    color: black !important;
    border-bottom: 4px solid #ff0762;
    -webkit-transition: width 2s; /* Safari */
    transition: border 0.4s;
}

.menu-top-page>.active {
    text-decoration: none;
    /* background-color: #a7a7a7; */
    border-bottom: 1px solid #31388d;
    color: black;
}

.menu-top-page>.active>a{

color: black !important;

/*border-bottom: 5px solid #ff0762;*/
}
.overview {
    font-style: normal !important;
    font-size: 16px !important;
    color: #3b3b3e !important;
    line-height: 35px !important;
    font-family: Oswald !important;
    /* padding-bottom: 25px; */
    z-index: 338;
    text-align: justify;
}
.italic-gras {
    font-family: "adobe-garamond-pro", serif !important;
    font-weight: 400 !important;
    font-style: italic !important;
    font-size: 32px !important;
    color: #9898a6 !important;
    margin-bottom: 19px;
    line-height: 48px !important;
}
.nav-stacked>li>a:hover {
    text-decoration: none;
    color: #ff2361;
}
.panel-default>.panel-heading{
        font-weight: bold;
    color: #757575;
    text-transform: uppercase;
    font-size: 11px;
}
.overview1{
    font-style: normal !important;
    font-size: 16px !important;
    color: #737380 !important;
    line-height: 35px !important;
    padding-bottom: 25px;
    font-family: Oswald !important;
}
.overview2{
    font-style: normal !important;
    font-size: 16px !important;
    color: #737380 !important;
    line-height: 35px !important;
    padding-bottom: 25px;
    font-family: Oswald !important;
}
.block-section-1{
    background: #414141;
    color: #d2d7d3;
}
.strong-title{
    color: white;
    font-size: 30px;
    font-family: Oswald !important;
}
.p-block-section{

font-family: Oswald !important;

color: white;

padding-bottom: 15px !important;

font-size: 17px;
}
.p-color{
    color:white;
}
.h-strong{
    
    padding-bottom: 2px;
}
.content-grid-content{
    padding-top:40px;
    padding-bottom:40px;
}

.my-container::before
{
    content: " ";
    position: fixed;
    background: url('Sans-titre-2.gif');
    opacity: 0.1;
    width: 99%;
    height: 100%;
    top: 0;
    z-index: 3;
}
.menu-top-page li ul {

 /* Position absolu */

 /*width: 144px;*/ /* Largeur des sous-listes */

 left: -999em; /* Hop, on envoi loin du champ de vision */

 position: absolute;
}
.menu-top-page li:hover ul ul, .menu-top-page li.sfhover ul ul 
{
	left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}

.menu-top-page li:hover ul, .menu-top-page li li:hover ul, .menu-top-page li.sfhover ul, .menu-top-page li li.sfhover ul  
{
	left: auto; /* Repositionnement normal */
	min-height: auto; /* Corrige un bug */
	border-top: 5px solid #ff0762;
	-webkit-transition: width 2s;
	transition: border 0.4s;
	/* top: 79px; */
}
.menu-top-page li ul li
{
	/* pour ie qui ne reconnait pas "transparent" (comme précédement) */
	/* border: 1px solid #CCCCCC; */ /* on met une bordure blanche en haut de chaque élément d'une sous liste */
	font-size: 5px;
	background-color: #eeecec;
	font-weight: normal;
	text-align: left;
	color: #666666;
	height: 28px;
	line-height: 28px;
	min-width: 217px;
	width: max-content;
	padding-right: 10px;
	text-indent: 10px;
	/* float: right; */
	font-weight: bold;
}
.menu-top-page li ul li a
{

color: black;

/* font-weight: bold; */

/* text-transform: uppercase; */

font-size: 9px;
}

.menu-top-page span {
	margin-right: 20px;
    padding-left: 9px;
    padding-right: 16px;
	background: url("https://png.icons8.com/metro/540/expand-arrow.png") no-repeat scroll right center transparent;
	font-size: 14px;
	width:20px;height:20px;
}

.menu-top-page li ul li ul {
        
/* position: relative; */
        
width: 223px;
        
border-top: none !important;
        
-webkit-transition: width 2s;
        
transition: border 0.4s;
        
left:  !important;
        
right: -223px;
        
margin-top: -20px;
}

@media (max-width: 880px) {
#menu nav>ul>li {
    width: 50%;
    float: left;
    height: 25%;
}

#menu nav>ul>li:first-child{
    height:50% !important;
}
}

.table>caption+thead>tr:first-child>td, .table>caption+thead>tr:first-child>th, .table>colgroup+thead>tr:first-child>td, .table>colgroup+thead>tr:first-child>th, .table>thead:first-child>tr:first-child>td, .table>thead:first-child>tr:first-child>th {
    border-top: 0;
    font-family: Oswald;
}

.table>thead>tr>th {
    vertical-align: bottom;
    border-bottom: 2px solid #ddd;
    font-family: Oswald;
}

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd !important;
    font-family: Oswald;
}
.nav-tabs>li>a {
    margin-right: 0px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
    font-size: 12px;
    font-family: Oswald;
}
.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio] {
    position: absolute;
    margin-top: 4px \9;
    margin-left: -16px;
    margin-top: 10px;
}
.div-row {
    padding: 11px;
    font-size: 14px;
    /* line-height: 101px; */
    text-align :center;
    font-family: Oswald;
    background: #ff1555;
}


.progress-2 {
    font-family: Oswald;
    font-weight: 700;
    font-style: normal;
    font-size: 13px;
    text-transform: capitalize;
    color: #121212;
    display: inline-block;
    padding: 37px 0;
    background: transparent;
    border: none;
    box-shadow: none;
}
.multiple-pre{
    
height: 216px;
    
margin-top: 13px;
    
width: 100%;
}





.label{
    
font-family: Oswald;
    
font-size: 14px;
    
color:black;
}


.progress-3{background: #ff1555;color: white;padding: 8px;float: right;font-family: Oswald;font-weight: 700;font-style: normal;font-size: 15px;border: 0;margin-bottom: 5px;}
#wpadminbar {
    direction: ltr;
    color: #ccc;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    height: 32px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 600px;
    z-index: 10000000000000000000000;
    background: #23282d;
}
.float-right{
      float: right;
      /*margin: 14px;*/
      margin: 14px 14px 0px 14px;
      text-align: center;
      color: #fe326c;
      @charset
      "UTF-8";  .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 bounce {      0%,      20%,      53%,      80%,      100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);}      40%,      43% {
      -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      -webkit-transform: translate3d(0, -30px, 0);
      transform: translate3d(0, -30px, 0);}      70% {
      -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      -webkit-transform: translate3d(0, -15px, 0);
      transform: translate3d(0, -15px, 0);}      90% {
      -webkit-transform: translate3d(0, -4px, 0);
      transform: translate3d(0, -4px, 0);}  }    @keyframes bounce {      0%,      20%,      53%,      80%,      100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      -webkit-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);}      40%,      43% {
      -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      -webkit-transform: translate3d(0, -30px, 0);
      -ms-transform: translate3d(0, -30px, 0);
      transform: translate3d(0, -30px, 0);}      70% {
      -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      -webkit-transform: translate3d(0, -15px, 0);
      -ms-transform: translate3d(0, -15px, 0);
      transform: translate3d(0, -15px, 0);}      90% {
      -webkit-transform: translate3d(0, -4px, 0);
      -ms-transform: translate3d(0, -4px, 0);
      transform: translate3d(0, -4px, 0);}  }    .bounce {
      -webkit-animation-name: bounce;
      animation-name: bounce;
      -webkit-transform-origin: center bottom;
      -ms-transform-origin: center bottom;
      transform-origin: center bottom;}    @-webkit-keyframes flash {      0%,      50%,      100% {
      opacity: 1;}      25%,      75% {
      opacity: 0;}  }    @keyframes flash {      0%,      50%,      100% {
      opacity: 1;}      25%,      75% {
      opacity: 0;}  }    .flash {
      -webkit-animation-name: flash;
      animation-name: flash;}    @-webkit-keyframes pulse {      0% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);}      50% {
      -webkit-transform: scale3d(1.05, 1.05, 1.05);
      transform: scale3d(1.05, 1.05, 1.05);}      100% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);}  }    @keyframes pulse {      0% {
      -webkit-transform: scale3d(1, 1, 1);
      -ms-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);}      50% {
      -webkit-transform: scale3d(1.05, 1.05, 1.05);
      -ms-transform: scale3d(1.05, 1.05, 1.05);
      transform: scale3d(1.05, 1.05, 1.05);}      100% {
      -webkit-transform: scale3d(1, 1, 1);
      -ms-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);}  }    .pulse {
      -webkit-animation-name: pulse;
      animation-name: pulse;}    @-webkit-keyframes rubberBand {      0% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);}      30% {
      -webkit-transform: scale3d(1.25, 0.75, 1);
      transform: scale3d(1.25, 0.75, 1);}      40% {
      -webkit-transform: scale3d(0.75, 1.25, 1);
      transform: scale3d(0.75, 1.25, 1);}      50% {
      -webkit-transform: scale3d(1.15, 0.85, 1);
      transform: scale3d(1.15, 0.85, 1);}      65% {
      -webkit-transform: scale3d(0.95, 1.05, 1);
      transform: scale3d(0.95, 1.05, 1);}      75% {
      -webkit-transform: scale3d(1.05, 0.95, 1);
      transform: scale3d(1.05, 0.95, 1);}      100% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);}  }    @keyframes rubberBand {      0% {
      -webkit-transform: scale3d(1, 1, 1);
      -ms-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);}      30% {
      -webkit-transform: scale3d(1.25, 0.75, 1);
      -ms-transform: scale3d(1.25, 0.75, 1);
      transform: scale3d(1.25, 0.75, 1);}      40% {
      -webkit-transform: scale3d(0.75, 1.25, 1);
      -ms-transform: scale3d(0.75, 1.25, 1);
      transform: scale3d(0.75, 1.25, 1);}      50% {
      -webkit-transform: scale3d(1.15, 0.85, 1);
      -ms-transform: scale3d(1.15, 0.85, 1);
      transform: scale3d(1.15, 0.85, 1);}      65% {
      -webkit-transform: scale3d(0.95, 1.05, 1);
      -ms-transform: scale3d(0.95, 1.05, 1);
      transform: scale3d(0.95, 1.05, 1);}      75% {
      -webkit-transform: scale3d(1.05, 0.95, 1);
      -ms-transform: scale3d(1.05, 0.95, 1);
      transform: scale3d(1.05, 0.95, 1);}      100% {
      -webkit-transform: scale3d(1, 1, 1);
      -ms-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);}  }    .rubberBand {
      -webkit-animation-name: rubberBand;
      animation-name: rubberBand;}    @-webkit-keyframes shake {      0%,      100% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);}      10%,      30%,      50%,      70%,      90% {
      -webkit-transform: translate3d(-10px, 0, 0);
      transform: translate3d(-10px, 0, 0);}      20%,      40%,      60%,      80% {
      -webkit-transform: translate3d(10px, 0, 0);
      transform: translate3d(10px, 0, 0);}  }    @keyframes shake {      0%,      100% {
      -webkit-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);}      10%,      30%,      50%,      70%,      90% {
      -webkit-transform: translate3d(-10px, 0, 0);
      -ms-transform: translate3d(-10px, 0, 0);
      transform: translate3d(-10px, 0, 0);}      20%,      40%,      60%,      80% {
      -webkit-transform: translate3d(10px, 0, 0);
      -ms-transform: translate3d(10px, 0, 0);
      transform: translate3d(10px, 0, 0);}  }    @keyframes compass-ring {      0% {
      -webkit-transform: scale(0.9);
      -moz-transform: scale(0.9);
      -ms-transform: scale(0.9);
      transform: scale(0.9);
      opacity: 0;}      35% {
      opacity: 0.05;}      50% {
      opacity: 0.05;}      100% {
      -webkit-transform: scale(1.6);
      -moz-transform: scale(1.6);
      -ms-transform: scale(1.6);
      transform: scale(1.6);
      opacity: 0;}  }    @-webkit-keyframes compass-ring {      0% {
      -webkit-transform: scale(0.9);
      transform: scale(0.9);
      opacity: 0;}      35% {
      opacity: 0.05;}      50% {
      opacity: 0.05;}      100% {
      -webkit-transform: scale(1.6);
      transform: scale(1.6);
      opacity: 0;}  }    @keyframes sessions-ring {      0% {
      -webkit-transform: scale(0.8);
      -moz-transform: scale(0.8);
      -ms-transform: scale(0.8);
      transform: scale(0.8);
      opacity: 0;}      25% {
      opacity: 1;}      75% {
      opacity: 1;}      100% {
      -webkit-transform: scale(1.4);
      -moz-transform: scale(1.4);
      -ms-transform: scale(1.4);
      transform: scale(1.4);
      opacity: 0;}  }    @-webkit-keyframes sessions-ring {      0% {
      -webkit-transform: scale(0.8);
      transform: scale(0.8);
      opacity: 0;}      25% {
      opacity: 1;}      75% {
      opacity: 1;}      100% {
      -webkit-transform: scale(1.4);
      transform: scale(1.4);
      opacity: 0;}  }    @keyframes rotate {      0% {
      -webkit-transform: rotate(225deg);
      -moz-transform: rotate(225deg);
      -ms-transform: rotate(225deg);
      transform: rotate(225deg);}      100% {
      -webkit-transform: rotate(315deg);
      -moz-transform: rotate(315deg);
      -ms-transform: rotate(315deg);
      transform: rotate(315deg);}  }    @-webkit-keyframes rotate {      0% {
      -webkit-transform: rotate(225deg);
      transform: rotate(225deg);}      100% {
      -webkit-transform: rotate(315deg);
      transform: rotate(315deg);}  }    @keyframes marker-ring {      0% {
      -webkit-transform: scale(0);
      -moz-transform: scale(0);
      -ms-transform: scale(0);
      transform: scale(0);
      opacity: 0;}      35% {
      opacity: 1;}      50% {
      opacity: 1;}      100% {
      -webkit-transform: scale(1.6);
      -moz-transform: scale(1.6);
      -ms-transform: scale(1.6);
      transform: scale(1.6);
      opacity: 0;}  }    @-webkit-keyframes marker-ring {      0% {
      -webkit-transform: scale(0);
      transform: scale(0);
      opacity: 0;}      35% {
      opacity: 1;}      50% {
      opacity: 1;}      100% {
      -webkit-transform: scale(1.6);
      transform: scale(1.6);
      opacity: 0;}  }    @keyframes center-pulsate {      0% {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
      opacity: 1;}      5% {
      -webkit-transform: scale(0.6);
      -moz-transform: scale(0.6);
      -ms-transform: scale(0.6);
      transform: scale(0.6);
      opacity: 0.7;}      15% {
      -webkit-transform: scale(1.5);
      -moz-transform: scale(1.5);
      -ms-transform: scale(1.5);
      transform: scale(1.5);
      opacity: 1;}      25% {
      -webkit-transform: scale(0.8);
      -moz-transform: scale(0.8);
      -ms-transform: scale(0.8);
      transform: scale(0.8);
      opacity: 0.9;}      35% {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
      opacity: 1;}      45% {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
      opacity: 1;}      55% {
      -webkit-transform: scale(0.6);
      -moz-transform: scale(0.6);
      -ms-transform: scale(0.6);
      transform: scale(0.6);
      opacity: 0.7;}      65% {
      -webkit-transform: scale(1.5);
      -moz-transform: scale(1.5);
      -ms-transform: scale(1.5);
      transform: scale(1.5);
      opacity: 1;}      75% {
      -webkit-transform: scale(0.8);
      -moz-transform: scale(0.8);
      -ms-transform: scale(0.8);
      transform: scale(0.8);
      opacity: 0.9;}      85% {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
      opacity: 1;}      100% {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
      opacity: 1;}  }    @-webkit-keyframes center-pulsate {      0% {
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 1;}      5% {
      -webkit-transform: scale(0.6);
      transform: scale(0.6);
      opacity: 0.7;}      15% {
      -webkit-transform: scale(1.5);
      transform: scale(1.5);
      opacity: 1;}      25% {
      -webkit-transform: scale(0.8);
      transform: scale(0.8);
      opacity: 0.9;}      35% {
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 1;}      45% {
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 1;}      55% {
      -webkit-transform: scale(0.6);
      transform: scale(0.6);
      opacity: 0.7;}      65% {
      -webkit-transform: scale(1.5);
      transform: scale(1.5);
      opacity: 1;}      75% {
      -webkit-transform: scale(0.8);
      transform: scale(0.8);
      opacity: 0.9;}      85% {
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 1;}      100% {
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 1;}  }    .shake {
      -webkit-animation-name: shake;
      animation-name: shake;}    @-webkit-keyframes swing {      20% {
      -webkit-transform: rotate3d(0, 0, 1, 15deg);
      transform: rotate3d(0, 0, 1, 15deg);}      40% {
      -webkit-transform: rotate3d(0, 0, 1, -10deg);
      transform: rotate3d(0, 0, 1, -10deg);}      60% {
      -webkit-transform: rotate3d(0, 0, 1, 5deg);
      transform: rotate3d(0, 0, 1, 5deg);}      80% {
      -webkit-transform: rotate3d(0, 0, 1, -5deg);
      transform: rotate3d(0, 0, 1, -5deg);}      100% {
      -webkit-transform: rotate3d(0, 0, 1, 0deg);
      transform: rotate3d(0, 0, 1, 0deg);}  }    @keyframes swing {      20% {
      -webkit-transform: rotate3d(0, 0, 1, 15deg);
      -ms-transform: rotate3d(0, 0, 1, 15deg);
      transform: rotate3d(0, 0, 1, 15deg);}      40% {
      -webkit-transform: rotate3d(0, 0, 1, -10deg);
      -ms-transform: rotate3d(0, 0, 1, -10deg);
      transform: rotate3d(0, 0, 1, -10deg);}      60% {
      -webkit-transform: rotate3d(0, 0, 1, 5deg);
      -ms-transform: rotate3d(0, 0, 1, 5deg);
      transform: rotate3d(0, 0, 1, 5deg);}      80% {
      -webkit-transform: rotate3d(0, 0, 1, -5deg);
      -ms-transform: rotate3d(0, 0, 1, -5deg);
      transform: rotate3d(0, 0, 1, -5deg);}      100% {
      -webkit-transform: rotate3d(0, 0, 1, 0deg);
      -ms-transform: rotate3d(0, 0, 1, 0deg);
      transform: rotate3d(0, 0, 1, 0deg);}  }    .swing {
      -webkit-transform-origin: top center;
      -ms-transform-origin: top center;
      transform-origin: top center;
      -webkit-animation-name: swing;
      animation-name: swing;}    @-webkit-keyframes tada {      0% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);}      10%,      20% {
      -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
      transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);}      30%,      50%,      70%,      90% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);}      40%,      60%,      80% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);}      100% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);}  }    @keyframes tada {      0% {
      -webkit-transform: scale3d(1, 1, 1);
      -ms-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);}      10%,      20% {
      -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
      -ms-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
      transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);}      30%,      50%,      70%,      90% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
      -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);}      40%,      60%,      80% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
      -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);}      100% {
      -webkit-transform: scale3d(1, 1, 1);
      -ms-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);}  }    .tada {
      -webkit-animation-name: tada;
      animation-name: tada;}    @-webkit-keyframes wobble {      0% {
      -webkit-transform: none;
      transform: none;}      15% {
      -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
      transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);}      30% {
      -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
      transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);}      45% {
      -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
      transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);}      60% {
      -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
      transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);}      75% {
      -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
      transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);}      100% {
      -webkit-transform: none;
      transform: none;}  }    @keyframes wobble {      0% {
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;}      15% {
      -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
      -ms-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
      transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);}      30% {
      -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
      -ms-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
      transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);}      45% {
      -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
      -ms-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
      transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);}      60% {
      -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
      -ms-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
      transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);}      75% {
      -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
      -ms-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
      transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);}      100% {
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;}  }    .wobble {
      -webkit-animation-name: wobble;
      animation-name: wobble;}    @-webkit-keyframes bounceIn {      0%,      20%,      40%,      60%,      80%,      100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}      0% {
      opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
      transform: scale3d(0.3, 0.3, 0.3);}      20% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1);
      transform: scale3d(1.1, 1.1, 1.1);}      40% {
      -webkit-transform: scale3d(0.9, 0.9, 0.9);
      transform: scale3d(0.9, 0.9, 0.9);}      60% {
      opacity: 1;
      -webkit-transform: scale3d(1.03, 1.03, 1.03);
      transform: scale3d(1.03, 1.03, 1.03);}      80% {
      -webkit-transform: scale3d(0.97, 0.97, 0.97);
      transform: scale3d(0.97, 0.97, 0.97);}      100% {
      opacity: 1;
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);}  }    @keyframes bounceIn {      0%,      20%,      40%,      60%,      80%,      100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}      0% {
      opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
      -ms-transform: scale3d(0.3, 0.3, 0.3);
      transform: scale3d(0.3, 0.3, 0.3);}      20% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1);
      -ms-transform: scale3d(1.1, 1.1, 1.1);
      transform: scale3d(1.1, 1.1, 1.1);}      40% {
      -webkit-transform: scale3d(0.9, 0.9, 0.9);
      -ms-transform: scale3d(0.9, 0.9, 0.9);
      transform: scale3d(0.9, 0.9, 0.9);}      60% {
      opacity: 1;
      -webkit-transform: scale3d(1.03, 1.03, 1.03);
      -ms-transform: scale3d(1.03, 1.03, 1.03);
      transform: scale3d(1.03, 1.03, 1.03);}      80% {
      -webkit-transform: scale3d(0.97, 0.97, 0.97);
      -ms-transform: scale3d(0.97, 0.97, 0.97);
      transform: scale3d(0.97, 0.97, 0.97);}      100% {
      opacity: 1;
      -webkit-transform: scale3d(1, 1, 1);
      -ms-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);}  }    .bounceIn {
      -webkit-animation-name: bounceIn;
      animation-name: bounceIn;
      -webkit-animation-duration: .75s;
      animation-duration: .75s;}    @-webkit-keyframes bounceInDown {      0%,      60%,      75%,      90%,      100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}      0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -3000px, 0);
      transform: translate3d(0, -3000px, 0);}      60% {
      opacity: 1;
      -webkit-transform: translate3d(0, 25px, 0);
      transform: translate3d(0, 25px, 0);}      75% {
      -webkit-transform: translate3d(0, -10px, 0);
      transform: translate3d(0, -10px, 0);}      90% {
      -webkit-transform: translate3d(0, 5px, 0);
      transform: translate3d(0, 5px, 0);}      100% {
      -webkit-transform: none;
      transform: none;}  }    @keyframes bounceInDown {      0%,      60%,      75%,      90%,      100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}      0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -3000px, 0);
      -ms-transform: translate3d(0, -3000px, 0);
      transform: translate3d(0, -3000px, 0);}      60% {
      opacity: 1;
      -webkit-transform: translate3d(0, 25px, 0);
      -ms-transform: translate3d(0, 25px, 0);
      transform: translate3d(0, 25px, 0);}      75% {
      -webkit-transform: translate3d(0, -10px, 0);
      -ms-transform: translate3d(0, -10px, 0);
      transform: translate3d(0, -10px, 0);}      90% {
      -webkit-transform: translate3d(0, 5px, 0);
      -ms-transform: translate3d(0, 5px, 0);
      transform: translate3d(0, 5px, 0);}      100% {
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;}  }    .bounceInDown {
      -webkit-animation-name: bounceInDown;
      animation-name: bounceInDown;}    @-webkit-keyframes bounceInLeft {      0%,      60%,      75%,      90%,      100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}      0% {
      opacity: 0;
      -webkit-transform: translate3d(-3000px, 0, 0);
      transform: translate3d(-3000px, 0, 0);}      60% {
      opacity: 1;
      -webkit-transform: translate3d(25px, 0, 0);
      transform: translate3d(25px, 0, 0);}      75% {
      -webkit-transform: translate3d(-10px, 0, 0);
      transform: translate3d(-10px, 0, 0);}      90% {
      -webkit-transform: translate3d(5px, 0, 0);
      transform: translate3d(5px, 0, 0);}      100% {
      -webkit-transform: none;
      transform: none;}  }    @keyframes bounceInLeft {      0%,      60%,      75%,      90%,      100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}      0% {
      opacity: 0;
      -webkit-transform: translate3d(-3000px, 0, 0);
      -ms-transform: translate3d(-3000px, 0, 0);
      transform: translate3d(-3000px, 0, 0);}      60% {
      opacity: 1;
      -webkit-transform: translate3d(25px, 0, 0);
      -ms-transform: translate3d(25px, 0, 0);
      transform: translate3d(25px, 0, 0);}      75% {
      -webkit-transform: translate3d(-10px, 0, 0);
      -ms-transform: translate3d(-10px, 0, 0);
      transform: translate3d(-10px, 0, 0);}      90% {
      -webkit-transform: translate3d(5px, 0, 0);
      -ms-transform: translate3d(5px, 0, 0);
      transform: translate3d(5px, 0, 0);}      100% {
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;}  }    .bounceInLeft {
      -webkit-animation-name: bounceInLeft;
      animation-name: bounceInLeft;}    @-webkit-keyframes bounceInRight {      0%,      60%,      75%,      90%,      100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}      0% {
      opacity: 0;
      -webkit-transform: translate3d(3000px, 0, 0);
      transform: translate3d(3000px, 0, 0);}      60% {
      opacity: 1;
      -webkit-transform: translate3d(-25px, 0, 0);
      transform: translate3d(-25px, 0, 0);}      75% {
      -webkit-transform: translate3d(10px, 0, 0);
      transform: translate3d(10px, 0, 0);}      90% {
      -webkit-transform: translate3d(-5px, 0, 0);
      transform: translate3d(-5px, 0, 0);}      100% {
      -webkit-transform: none;
      transform: none;}  }    @keyframes bounceInRight {      0%,      60%,      75%,      90%,      100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}      0% {
      opacity: 0;
      -webkit-transform: translate3d(3000px, 0, 0);
      -ms-transform: translate3d(3000px, 0, 0);
      transform: translate3d(3000px, 0, 0);}      60% {
      opacity: 1;
      -webkit-transform: translate3d(-25px, 0, 0);
      -ms-transform: translate3d(-25px, 0, 0);
      transform: translate3d(-25px, 0, 0);}      75% {
      -webkit-transform: translate3d(10px, 0, 0);
      -ms-transform: translate3d(10px, 0, 0);
      transform: translate3d(10px, 0, 0);}      90% {
      -webkit-transform: translate3d(-5px, 0, 0);
      -ms-transform: translate3d(-5px, 0, 0);
      transform: translate3d(-5px, 0, 0);}      100% {
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;}  }    .bounceInRight {
      -webkit-animation-name: bounceInRight;
      animation-name: bounceInRight;}    @-webkit-keyframes bounceInUp {      0%,      60%,      75%,      90%,      100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}      0% {
      opacity: 0;
      -webkit-transform: translate3d(0, 3000px, 0);
      transform: translate3d(0, 3000px, 0);}      60% {
      opacity: 1;
      -webkit-transform: translate3d(0, -20px, 0);
      transform: translate3d(0, -20px, 0);}      75% {
      -webkit-transform: translate3d(0, 10px, 0);
      transform: translate3d(0, 10px, 0);}      90% {
      -webkit-transform: translate3d(0, -5px, 0);
      transform: translate3d(0, -5px, 0);}      100% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);}  }    @keyframes bounceInUp {      0%,      60%,      75%,      90%,      100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}      0% {
      opacity: 0;
      -webkit-transform: translate3d(0, 3000px, 0);
      -ms-transform: translate3d(0, 3000px, 0);
      transform: translate3d(0, 3000px, 0);}      60% {
      opacity: 1;
      -webkit-transform: translate3d(0, -20px, 0);
      -ms-transform: translate3d(0, -20px, 0);
      transform: translate3d(0, -20px, 0);}      75% {
      -webkit-transform: translate3d(0, 10px, 0);
      -ms-transform: translate3d(0, 10px, 0);
      transform: translate3d(0, 10px, 0);}      90% {
      -webkit-transform: translate3d(0, -5px, 0);
      -ms-transform: translate3d(0, -5px, 0);
      transform: translate3d(0, -5px, 0);}      100% {
      -webkit-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);}  }    .bounceInUp {
      -webkit-animation-name: bounceInUp;
      animation-name: bounceInUp;}    @-webkit-keyframes bounceOut {      20% {
      -webkit-transform: scale3d(0.9, 0.9, 0.9);
      transform: scale3d(0.9, 0.9, 0.9);}      50%,      55% {
      opacity: 1;
      -webkit-transform: scale3d(1.1, 1.1, 1.1);
      transform: scale3d(1.1, 1.1, 1.1);}      100% {
      opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
      transform: scale3d(0.3, 0.3, 0.3);}  }    @keyframes bounceOut {      20% {
      -webkit-transform: scale3d(0.9, 0.9, 0.9);
      -ms-transform: scale3d(0.9, 0.9, 0.9);
      transform: scale3d(0.9, 0.9, 0.9);}      50%,      55% {
      opacity: 1;
      -webkit-transform: scale3d(1.1, 1.1, 1.1);
      -ms-transform: scale3d(1.1, 1.1, 1.1);
      transform: scale3d(1.1, 1.1, 1.1);}      100% {
      opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
      -ms-transform: scale3d(0.3, 0.3, 0.3);
      transform: scale3d(0.3, 0.3, 0.3);}  }    .bounceOut {
      -webkit-animation-name: bounceOut;
      animation-name: bounceOut;
      -webkit-animation-duration: .75s;
      animation-duration: .75s;}    @-webkit-keyframes bounceOutDown {      20% {
      -webkit-transform: translate3d(0, 10px, 0);
      transform: translate3d(0, 10px, 0);}      40%,      45% {
      opacity: 1;
      -webkit-transform: translate3d(0, -20px, 0);
      transform: translate3d(0, -20px, 0);}      100% {
      opacity: 0;
      -webkit-transform: translate3d(0, 2000px, 0);
      transform: translate3d(0, 2000px, 0);}  }    @keyframes bounceOutDown {      20% {
      -webkit-transform: translate3d(0, 10px, 0);
      -ms-transform: translate3d(0, 10px, 0);
      transform: translate3d(0, 10px, 0);}      40%,      45% {
      opacity: 1;
      -webkit-transform: translate3d(0, -20px, 0);
      -ms-transform: translate3d(0, -20px, 0);
      transform: translate3d(0, -20px, 0);}      100% {
      opacity: 0;
      -webkit-transform: translate3d(0, 2000px, 0);
      -ms-transform: translate3d(0, 2000px, 0);
      transform: translate3d(0, 2000px, 0);}  }    .bounceOutDown {
      -webkit-animation-name: bounceOutDown;
      animation-name: bounceOutDown;}    @-webkit-keyframes bounceOutLeft {      20% {
      opacity: 1;
      -webkit-transform: translate3d(20px, 0, 0);
      transform: translate3d(20px, 0, 0);}      100% {
      opacity: 0;
      -webkit-transform: translate3d(-2000px, 0, 0);
      transform: translate3d(-2000px, 0, 0);}  }    @keyframes bounceOutLeft {      20% {
      opacity: 1;
      -webkit-transform: translate3d(20px, 0, 0);
      -ms-transform: translate3d(20px, 0, 0);
      transform: translate3d(20px, 0, 0);}      100% {
      opacity: 0;
      -webkit-transform: translate3d(-2000px, 0, 0);
      -ms-transform: translate3d(-2000px, 0, 0);
      transform: translate3d(-2000px, 0, 0);}  }    .bounceOutLeft {
      -webkit-animation-name: bounceOutLeft;
      animation-name: bounceOutLeft;}    @-webkit-keyframes bounceOutRight {      20% {
      opacity: 1;
      -webkit-transform: translate3d(-20px, 0, 0);
      transform: translate3d(-20px, 0, 0);}      100% {
      opacity: 0;
      -webkit-transform: translate3d(2000px, 0, 0);
      transform: translate3d(2000px, 0, 0);}  }    @keyframes bounceOutRight {      20% {
      opacity: 1;
      -webkit-transform: translate3d(-20px, 0, 0);
      -ms-transform: translate3d(-20px, 0, 0);
      transform: translate3d(-20px, 0, 0);}      100% {
      opacity: 0;
      -webkit-transform: translate3d(2000px, 0, 0);
      -ms-transform: translate3d(2000px, 0, 0);
      transform: translate3d(2000px, 0, 0);}  }    .bounceOutRight {
      -webkit-animation-name: bounceOutRight;
      animation-name: bounceOutRight;}    @-webkit-keyframes bounceOutUp {      20% {
      -webkit-transform: translate3d(0, -10px, 0);
      transform: translate3d(0, -10px, 0);}      40%,      45% {
      opacity: 1;
      -webkit-transform: translate3d(0, 20px, 0);
      transform: translate3d(0, 20px, 0);}      100% {
      opacity: 0;
      -webkit-transform: translate3d(0, -2000px, 0);
      transform: translate3d(0, -2000px, 0);}  }    @keyframes bounceOutUp {      20% {
      -webkit-transform: translate3d(0, -10px, 0);
      -ms-transform: translate3d(0, -10px, 0);
      transform: translate3d(0, -10px, 0);}      40%,      45% {
      opacity: 1;
      -webkit-transform: translate3d(0, 20px, 0);
      -ms-transform: translate3d(0, 20px, 0);
      transform: translate3d(0, 20px, 0);}      100% {
      opacity: 0;
      -webkit-transform: translate3d(0, -2000px, 0);
      -ms-transform: translate3d(0, -2000px, 0);
      transform: translate3d(0, -2000px, 0);}  }    .bounceOutUp {
      -webkit-animation-name: bounceOutUp;
      animation-name: bounceOutUp;}    @-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 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);
      -ms-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);}      100% {
      opacity: 1;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;}  }    .fadeInDown {
      -webkit-animation-name: fadeInDown;
      animation-name: fadeInDown;}    @-webkit-keyframes fadeInDownBig {      0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -2000px, 0);
      transform: translate3d(0, -2000px, 0);}      100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;}  }    @keyframes fadeInDownBig {      0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -2000px, 0);
      -ms-transform: translate3d(0, -2000px, 0);
      transform: translate3d(0, -2000px, 0);}      100% {
      opacity: 1;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;}  }    .fadeInDownBig {
      -webkit-animation-name: fadeInDownBig;
      animation-name: fadeInDownBig;}    @-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);
      -ms-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);}      100% {
      opacity: 1;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;}  }    .fadeInLeft {
      -webkit-animation-name: fadeInLeft;
      animation-name: fadeInLeft;}    @-webkit-keyframes fadeInLeftBig {      0% {
      opacity: 0;
      -webkit-transform: translate3d(-2000px, 0, 0);
      transform: translate3d(-2000px, 0, 0);}      100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;}  }    @keyframes fadeInLeftBig {      0% {
      opacity: 0;
      -webkit-transform: translate3d(-2000px, 0, 0);
      -ms-transform: translate3d(-2000px, 0, 0);
      transform: translate3d(-2000px, 0, 0);}      100% {
      opacity: 1;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;}  }    .fadeInLeftBig {
      -webkit-animation-name: fadeInLeftBig;
      animation-name: fadeInLeftBig;}    @-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);
      -ms-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0);}      100% {
      opacity: 1;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;}  }    .fadeInRight {
      -webkit-animation-name: fadeInRight;
      animation-name: fadeInRight;}    @-webkit-keyframes fadeInRightBig {      0% {
      opacity: 0;
      -webkit-transform: translate3d(2000px, 0, 0);
      transform: translate3d(2000px, 0, 0);}      100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;}  }    @keyframes fadeInRightBig {      0% {
      opacity: 0;
      -webkit-transform: translate3d(2000px, 0, 0);
      -ms-transform: translate3d(2000px, 0, 0);
      transform: translate3d(2000px, 0, 0);}      100% {
      opacity: 1;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;}  }    .fadeInRightBig {
      -webkit-animation-name: fadeInRightBig;
      animation-name: fadeInRightBig;}    @-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);
      -ms-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);}      100% {
      opacity: 1;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;}  }    .fadeInUp {
      -webkit-animation-name: fadeInUp;
      animation-name: fadeInUp;}    @-webkit-keyframes fadeInUpBig {      0% {
      opacity: 0;
      -webkit-transform: translate3d(0, 2000px, 0);
      transform: translate3d(0, 2000px, 0);}      100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;}  }    @keyframes fadeInUpBig {      0% {
      opacity: 0;
      -webkit-transform: translate3d(0, 2000px, 0);
      -ms-transform: translate3d(0, 2000px, 0);
      transform: translate3d(0, 2000px, 0);}      100% {
      opacity: 1;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;}  }    .fadeInUpBig {
      -webkit-animation-name: fadeInUpBig;
      animation-name: fadeInUpBig;}    @-webkit-keyframes fadeOut {      0% {
      opacity: 1;}      100% {
      opacity: 0;}  }    @keyframes fadeOut {      0% {
      opacity: 1;}      100% {
      opacity: 0;}  }    .fadeOut {
      -webkit-animation-name: fadeOut;
      animation-name: fadeOut;}    @-webkit-keyframes fadeOutDown {      0% {
      opacity: 1;}      100% {
      opacity: 0;
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);}  }    @keyframes fadeOutDown {      0% {
      opacity: 1;}      100% {
      opacity: 0;
      -webkit-transform: translate3d(0, 100%, 0);
      -ms-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);}  }    .fadeOutDown {
      -webkit-animation-name: fadeOutDown;
      animation-name: fadeOutDown;}    @-webkit-keyframes fadeOutDownBig {      0% {
      opacity: 1;}      100% {
      opacity: 0;
      -webkit-transform: translate3d(0, 2000px, 0);
      transform: translate3d(0, 2000px, 0);}  }    @keyframes fadeOutDownBig {      0% {
      opacity: 1;}      100% {
      opacity: 0;
      -webkit-transform: translate3d(0, 2000px, 0);
      -ms-transform: translate3d(0, 2000px, 0);
      transform: translate3d(0, 2000px, 0);}  }    .fadeOutDownBig {
      -webkit-animation-name: fadeOutDownBig;
      animation-name: fadeOutDownBig;}    @-webkit-keyframes fadeOutLeft {      0% {
      opacity: 1;}      100% {
      opacity: 0;
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);}  }    @keyframes fadeOutLeft {      0% {
      opacity: 1;}      100% {
      opacity: 0;
      -webkit-transform: translate3d(-100%, 0, 0);
      -ms-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);}  }    .fadeOutLeft {
      -webkit-animation-name: fadeOutLeft;
      animation-name: fadeOutLeft;}    @-webkit-keyframes fadeOutLeftBig {      0% {
      opacity: 1;}      100% {
      opacity: 0;
      -webkit-transform: translate3d(-2000px, 0, 0);
      transform: translate3d(-2000px, 0, 0);}  }    @keyframes fadeOutLeftBig {      0% {
      opacity: 1;}      100% {
      opacity: 0;
      -webkit-transform: translate3d(-2000px, 0, 0);
      -ms-transform: translate3d(-2000px, 0, 0);
      transform: translate3d(-2000px, 0, 0);}  }    .fadeOutLeftBig {
      -webkit-animation-name: fadeOutLeftBig;
      animation-name: fadeOutLeftBig;}    @-webkit-keyframes fadeOutRight {      0% {
      opacity: 1;}      100% {
      opacity: 0;
      -webkit-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0);}  }    @keyframes fadeOutRight {      0% {
      opacity: 1;}      100% {
      opacity: 0;
      -webkit-transform: translate3d(100%, 0, 0);
      -ms-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0);}  }    .fadeOutRight {
      -webkit-animation-name: fadeOutRight;
      animation-name: fadeOutRight;}    @-webkit-keyframes fadeOutRightBig {      0% {
      opacity: 1;}      100% {
      opacity: 0;
      -webkit-transform: translate3d(2000px, 0, 0);
      transform: translate3d(2000px, 0, 0);}  }    @keyframes fadeOutRightBig {      0% {
      opacity: 1;}      100% {
      opacity: 0;
      -webkit-transform: translate3d(2000px, 0, 0);
      -ms-transform: translate3d(2000px, 0, 0);
      transform: translate3d(2000px, 0, 0);}  }    .fadeOutRightBig {
      -webkit-animation-name: fadeOutRightBig;
      animation-name: fadeOutRightBig;}    @-webkit-keyframes fadeOutUp {      0% {
      opacity: 1;}      100% {
      opacity: 0;
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);}  }    @keyframes fadeOutUp {      0% {
      opacity: 1;}      100% {
      opacity: 0;
      -webkit-transform: translate3d(0, -100%, 0);
      -ms-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);}  }    .fadeOutUp {
      -webkit-animation-name: fadeOutUp;
      animation-name: fadeOutUp;}    @-webkit-keyframes fadeOutUpBig {      0% {
      opacity: 1;}      100% {
      opacity: 0;
      -webkit-transform: translate3d(0, -2000px, 0);
      transform: translate3d(0, -2000px, 0);}  }    @keyframes fadeOutUpBig {      0% {
      opacity: 1;}      100% {
      opacity: 0;
      -webkit-transform: translate3d(0, -2000px, 0);
      -ms-transform: translate3d(0, -2000px, 0);
      transform: translate3d(0, -2000px, 0);}  }    .fadeOutUpBig {
      -webkit-animation-name: fadeOutUpBig;
      animation-name: fadeOutUpBig;}    @-webkit-keyframes flip {      0% {
      -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
      transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;}      40% {
      -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
      transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;}      50% {
      -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
      transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;}      80% {
      -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
      transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;}      100% {
      -webkit-transform: perspective(400px);
      transform: perspective(400px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;}  }    @keyframes flip {      0% {
      -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
      -ms-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
      transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;}      40% {
      -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
      -ms-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
      transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;}      50% {
      -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
      -ms-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
      transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;}      80% {
      -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
      -ms-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
      transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;}      100% {
      -webkit-transform: perspective(400px);
      -ms-transform: perspective(400px);
      transform: perspective(400px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;}  }    .animated.flip {
      -webkit-backface-visibility: visible;
      -ms-backface-visibility: visible;
      backface-visibility: visible;
      -webkit-animation-name: flip;
      animation-name: flip;}    @-webkit-keyframes flipInX {      0% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
      transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
      -webkit-transition-timing-function: ease-in;
      transition-timing-function: ease-in;
      opacity: 0;}      40% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
      transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
      -webkit-transition-timing-function: ease-in;
      transition-timing-function: ease-in;}      60% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
      transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
      opacity: 1;}      80% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
      transform: perspective(400px) rotate3d(1, 0, 0, -5deg);}      100% {
      -webkit-transform: perspective(400px);
      transform: perspective(400px);}  }    @keyframes flipInX {      0% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
      -ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
      transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
      -webkit-transition-timing-function: ease-in;
      transition-timing-function: ease-in;
      opacity: 0;}      40% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
      -ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
      transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
      -webkit-transition-timing-function: ease-in;
      transition-timing-function: ease-in;}      60% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
      -ms-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
      transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
      opacity: 1;}      80% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
      -ms-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
      transform: perspective(400px) rotate3d(1, 0, 0, -5deg);}      100% {
      -webkit-transform: perspective(400px);
      -ms-transform: perspective(400px);
      transform: perspective(400px);}  }    .flipInX {
      -webkit-backface-visibility: visible !important;
      -ms-backface-visibility: visible !important;
      backface-visibility: visible !important;
      -webkit-animation-name: flipInX;
      animation-name: flipInX;}    @-webkit-keyframes flipInY {      0% {
      -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
      transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
      -webkit-transition-timing-function: ease-in;
      transition-timing-function: ease-in;
      opacity: 0;}      40% {
      -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
      transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
      -webkit-transition-timing-function: ease-in;
      transition-timing-function: ease-in;}      60% {
      -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
      transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
      opacity: 1;}      80% {
      -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
      transform: perspective(400px) rotate3d(0, 1, 0, -5deg);}      100% {
      -webkit-transform: perspective(400px);
      transform: perspective(400px);}  }    @keyframes flipInY {      0% {
      -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
      -ms-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
      transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
      -webkit-transition-timing-function: ease-in;
      transition-timing-function: ease-in;
      opacity: 0;}      40% {
      -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
      -ms-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
      transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
      -webkit-transition-timing-function: ease-in;
      transition-timing-function: ease-in;}      60% {
      -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
      -ms-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
      transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
      opacity: 1;}      80% {
      -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
      -ms-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
      transform: perspective(400px) rotate3d(0, 1, 0, -5deg);}      100% {
      -webkit-transform: perspective(400px);
      -ms-transform: perspective(400px);
      transform: perspective(400px);}  }    .flipInY {
      -webkit-backface-visibility: visible !important;
      -ms-backface-visibility: visible !important;
      backface-visibility: visible !important;
      -webkit-animation-name: flipInY;
      animation-name: flipInY;}    @-webkit-keyframes flipOutX {      0% {
      -webkit-transform: perspective(400px);
      transform: perspective(400px);}      30% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
      transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
      opacity: 1;}      100% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
      transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
      opacity: 0;}  }    @keyframes flipOutX {      0% {
      -webkit-transform: perspective(400px);
      -ms-transform: perspective(400px);
      transform: perspective(400px);}      30% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
      -ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
      transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
      opacity: 1;}      100% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
      -ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
      transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
      opacity: 0;}  }    .flipOutX {
      -webkit-animation-name: flipOutX;
      animation-name: flipOutX;
      -webkit-animation-duration: .75s;
      animation-duration: .75s;
      -webkit-backface-visibility: visible !important;
      -ms-backface-visibility: visible !important;
      backface-visibility: visible !important;}    @-webkit-keyframes flipOutY {      0% {
      -webkit-transform: perspective(400px);
      transform: perspective(400px);}      30% {
      -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
      transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
      opacity: 1;}      100% {
      -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
      transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
      opacity: 0;}  }    @keyframes flipOutY {      0% {
      -webkit-transform: perspective(400px);
      -ms-transform: perspective(400px);
      transform: perspective(400px);}      30% {
      -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
      -ms-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
      transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
      opacity: 1;}      100% {
      -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
      -ms-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
      transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
      opacity: 0;}  }    .flipOutY {
      -webkit-backface-visibility: visible !important;
      -ms-backface-visibility: visible !important;
      backface-visibility: visible !important;
      -webkit-animation-name: flipOutY;
      animation-name: flipOutY;
      -webkit-animation-duration: .75s;
      animation-duration: .75s;}    @-webkit-keyframes lightSpeedIn {      0% {
      -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
      transform: translate3d(100%, 0, 0) skewX(-30deg);
      opacity: 0;}      60% {
      -webkit-transform: skewX(20deg);
      transform: skewX(20deg);
      opacity: 1;}      80% {
      -webkit-transform: skewX(-5deg);
      transform: skewX(-5deg);
      opacity: 1;}      100% {
      -webkit-transform: none;
      transform: none;
      opacity: 1;}  }    @keyframes lightSpeedIn {      0% {
      -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
      -ms-transform: translate3d(100%, 0, 0) skewX(-30deg);
      transform: translate3d(100%, 0, 0) skewX(-30deg);
      opacity: 0;}      60% {
      -webkit-transform: skewX(20deg);
      -ms-transform: skewX(20deg);
      transform: skewX(20deg);
      opacity: 1;}      80% {
      -webkit-transform: skewX(-5deg);
      -ms-transform: skewX(-5deg);
      transform: skewX(-5deg);
      opacity: 1;}      100% {
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;
      opacity: 1;}  }    .lightSpeedIn {
      -webkit-animation-name: lightSpeedIn;
      animation-name: lightSpeedIn;
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;}    @-webkit-keyframes lightSpeedOut {      0% {
      opacity: 1;}      100% {
      -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
      transform: translate3d(100%, 0, 0) skewX(30deg);
      opacity: 0;}  }    @keyframes lightSpeedOut {      0% {
      opacity: 1;}      100% {
      -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
      -ms-transform: translate3d(100%, 0, 0) skewX(30deg);
      transform: translate3d(100%, 0, 0) skewX(30deg);
      opacity: 0;}  }    .lightSpeedOut {
      -webkit-animation-name: lightSpeedOut;
      animation-name: lightSpeedOut;
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;}    @-webkit-keyframes rotateIn {      0% {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: rotate3d(0, 0, 1, -200deg);
      transform: rotate3d(0, 0, 1, -200deg);
      opacity: 0;}      100% {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: none;
      transform: none;
      opacity: 1;}  }    @keyframes rotateIn {      0% {
      -webkit-transform-origin: center;
      -ms-transform-origin: center;
      transform-origin: center;
      -webkit-transform: rotate3d(0, 0, 1, -200deg);
      -ms-transform: rotate3d(0, 0, 1, -200deg);
      transform: rotate3d(0, 0, 1, -200deg);
      opacity: 0;}      100% {
      -webkit-transform-origin: center;
      -ms-transform-origin: center;
      transform-origin: center;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;
      opacity: 1;}  }    .rotateIn {
      -webkit-animation-name: rotateIn;
      animation-name: rotateIn;}    @-webkit-keyframes rotateInDownLeft {      0% {
      -webkit-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: rotate3d(0, 0, 1, -45deg);
      transform: rotate3d(0, 0, 1, -45deg);
      opacity: 0;}      100% {
      -webkit-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: none;
      transform: none;
      opacity: 1;}  }    @keyframes rotateInDownLeft {      0% {
      -webkit-transform-origin: left bottom;
      -ms-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: rotate3d(0, 0, 1, -45deg);
      -ms-transform: rotate3d(0, 0, 1, -45deg);
      transform: rotate3d(0, 0, 1, -45deg);
      opacity: 0;}      100% {
      -webkit-transform-origin: left bottom;
      -ms-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;
      opacity: 1;}  }    .rotateInDownLeft {
      -webkit-animation-name: rotateInDownLeft;
      animation-name: rotateInDownLeft;}    @-webkit-keyframes rotateInDownRight {      0% {
      -webkit-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: rotate3d(0, 0, 1, 45deg);
      transform: rotate3d(0, 0, 1, 45deg);
      opacity: 0;}      100% {
      -webkit-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: none;
      transform: none;
      opacity: 1;}  }    @keyframes rotateInDownRight {      0% {
      -webkit-transform-origin: right bottom;
      -ms-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: rotate3d(0, 0, 1, 45deg);
      -ms-transform: rotate3d(0, 0, 1, 45deg);
      transform: rotate3d(0, 0, 1, 45deg);
      opacity: 0;}      100% {
      -webkit-transform-origin: right bottom;
      -ms-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;
      opacity: 1;}  }    .rotateInDownRight {
      -webkit-animation-name: rotateInDownRight;
      animation-name: rotateInDownRight;}    @-webkit-keyframes rotateInUpLeft {      0% {
      -webkit-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: rotate3d(0, 0, 1, 45deg);
      transform: rotate3d(0, 0, 1, 45deg);
      opacity: 0;}      100% {
      -webkit-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: none;
      transform: none;
      opacity: 1;}  }    @keyframes rotateInUpLeft {      0% {
      -webkit-transform-origin: left bottom;
      -ms-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: rotate3d(0, 0, 1, 45deg);
      -ms-transform: rotate3d(0, 0, 1, 45deg);
      transform: rotate3d(0, 0, 1, 45deg);
      opacity: 0;}      100% {
      -webkit-transform-origin: left bottom;
      -ms-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;
      opacity: 1;}  }    .rotateInUpLeft {
      -webkit-animation-name: rotateInUpLeft;
      animation-name: rotateInUpLeft;}    @-webkit-keyframes rotateInUpRight {      0% {
      -webkit-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: rotate3d(0, 0, 1, -90deg);
      transform: rotate3d(0, 0, 1, -90deg);
      opacity: 0;}      100% {
      -webkit-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: none;
      transform: none;
      opacity: 1;}  }    @keyframes rotateInUpRight {      0% {
      -webkit-transform-origin: right bottom;
      -ms-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: rotate3d(0, 0, 1, -90deg);
      -ms-transform: rotate3d(0, 0, 1, -90deg);
      transform: rotate3d(0, 0, 1, -90deg);
      opacity: 0;}      100% {
      -webkit-transform-origin: right bottom;
      -ms-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;
      opacity: 1;}  }    .rotateInUpRight {
      -webkit-animation-name: rotateInUpRight;
      animation-name: rotateInUpRight;}    @-webkit-keyframes rotateOut {      0% {
      -webkit-transform-origin: center;
      transform-origin: center;
      opacity: 1;}      100% {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: rotate3d(0, 0, 1, 200deg);
      transform: rotate3d(0, 0, 1, 200deg);
      opacity: 0;}  }    @keyframes rotateOut {      0% {
      -webkit-transform-origin: center;
      -ms-transform-origin: center;
      transform-origin: center;
      opacity: 1;}      100% {
      -webkit-transform-origin: center;
      -ms-transform-origin: center;
      transform-origin: center;
      -webkit-transform: rotate3d(0, 0, 1, 200deg);
      -ms-transform: rotate3d(0, 0, 1, 200deg);
      transform: rotate3d(0, 0, 1, 200deg);
      opacity: 0;}  }    .rotateOut {
      -webkit-animation-name: rotateOut;
      animation-name: rotateOut;}    @-webkit-keyframes rotateOutDownLeft {      0% {
      -webkit-transform-origin: left bottom;
      transform-origin: left bottom;
      opacity: 1;}      100% {
      -webkit-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: rotate(0, 0, 1, 45deg);
      transform: rotate(0, 0, 1, 45deg);
      opacity: 0;}  }    @keyframes rotateOutDownLeft {      0% {
      -webkit-transform-origin: left bottom;
      -ms-transform-origin: left bottom;
      transform-origin: left bottom;
      opacity: 1;}      100% {
      -webkit-transform-origin: left bottom;
      -ms-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: rotate(0, 0, 1, 45deg);
      -ms-transform: rotate(0, 0, 1, 45deg);
      transform: rotate(0, 0, 1, 45deg);
      opacity: 0;}  }    .rotateOutDownLeft {
      -webkit-animation-name: rotateOutDownLeft;
      animation-name: rotateOutDownLeft;}    @-webkit-keyframes rotateOutDownRight {      0% {
      -webkit-transform-origin: right bottom;
      transform-origin: right bottom;
      opacity: 1;}      100% {
      -webkit-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: rotate3d(0, 0, 1, -45deg);
      transform: rotate3d(0, 0, 1, -45deg);
      opacity: 0;}  }    @keyframes rotateOutDownRight {      0% {
      -webkit-transform-origin: right bottom;
      -ms-transform-origin: right bottom;
      transform-origin: right bottom;
      opacity: 1;}      100% {
      -webkit-transform-origin: right bottom;
      -ms-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: rotate3d(0, 0, 1, -45deg);
      -ms-transform: rotate3d(0, 0, 1, -45deg);
      transform: rotate3d(0, 0, 1, -45deg);
      opacity: 0;}  }    .rotateOutDownRight {
      -webkit-animation-name: rotateOutDownRight;
      animation-name: rotateOutDownRight;}    @-webkit-keyframes rotateOutUpLeft {      0% {
      -webkit-transform-origin: left bottom;
      transform-origin: left bottom;
      opacity: 1;}      100% {
      -webkit-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: rotate3d(0, 0, 1, -45deg);
      transform: rotate3d(0, 0, 1, -45deg);
      opacity: 0;}  }    @keyframes rotateOutUpLeft {      0% {
      -webkit-transform-origin: left bottom;
      -ms-transform-origin: left bottom;
      transform-origin: left bottom;
      opacity: 1;}      100% {
      -webkit-transform-origin: left bottom;
      -ms-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: rotate3d(0, 0, 1, -45deg);
      -ms-transform: rotate3d(0, 0, 1, -45deg);
      transform: rotate3d(0, 0, 1, -45deg);
      opacity: 0;}  }    .rotateOutUpLeft {
      -webkit-animation-name: rotateOutUpLeft;
      animation-name: rotateOutUpLeft;}    @-webkit-keyframes rotateOutUpRight {      0% {
      -webkit-transform-origin: right bottom;
      transform-origin: right bottom;
      opacity: 1;}      100% {
      -webkit-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: rotate3d(0, 0, 1, 90deg);
      transform: rotate3d(0, 0, 1, 90deg);
      opacity: 0;}  }    @keyframes rotateOutUpRight {      0% {
      -webkit-transform-origin: right bottom;
      -ms-transform-origin: right bottom;
      transform-origin: right bottom;
      opacity: 1;}      100% {
      -webkit-transform-origin: right bottom;
      -ms-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: rotate3d(0, 0, 1, 90deg);
      -ms-transform: rotate3d(0, 0, 1, 90deg);
      transform: rotate3d(0, 0, 1, 90deg);
      opacity: 0;}  }    .rotateOutUpRight {
      -webkit-animation-name: rotateOutUpRight;
      animation-name: rotateOutUpRight;}    @-webkit-keyframes hinge {      0% {
      -webkit-transform-origin: top left;
      transform-origin: top left;
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;}      20%,      60% {
      -webkit-transform: rotate3d(0, 0, 1, 80deg);
      transform: rotate3d(0, 0, 1, 80deg);
      -webkit-transform-origin: top left;
      transform-origin: top left;
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;}      40%,      80% {
      -webkit-transform: rotate3d(0, 0, 1, 60deg);
      transform: rotate3d(0, 0, 1, 60deg);
      -webkit-transform-origin: top left;
      transform-origin: top left;
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
      opacity: 1;}      100% {
      -webkit-transform: translate3d(0, 700px, 0);
      transform: translate3d(0, 700px, 0);
      opacity: 0;}  }    @keyframes hinge {      0% {
      -webkit-transform-origin: top left;
      -ms-transform-origin: top left;
      transform-origin: top left;
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;}      20%,      60% {
      -webkit-transform: rotate3d(0, 0, 1, 80deg);
      -ms-transform: rotate3d(0, 0, 1, 80deg);
      transform: rotate3d(0, 0, 1, 80deg);
      -webkit-transform-origin: top left;
      -ms-transform-origin: top left;
      transform-origin: top left;
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;}      40%,      80% {
      -webkit-transform: rotate3d(0, 0, 1, 60deg);
      -ms-transform: rotate3d(0, 0, 1, 60deg);
      transform: rotate3d(0, 0, 1, 60deg);
      -webkit-transform-origin: top left;
      -ms-transform-origin: top left;
      transform-origin: top left;
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
      opacity: 1;}      100% {
      -webkit-transform: translate3d(0, 700px, 0);
      -ms-transform: translate3d(0, 700px, 0);
      transform: translate3d(0, 700px, 0);
      opacity: 0;}  }    .hinge {
      -webkit-animation-name: hinge;
      animation-name: hinge;}    @-webkit-keyframes rollIn {      0% {
      opacity: 0;
      -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
      transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);}      100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;}  }    @keyframes rollIn {      0% {
      opacity: 0;
      -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
      -ms-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
      transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);}      100% {
      opacity: 1;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;}  }    .rollIn {
      -webkit-animation-name: rollIn;
      animation-name: rollIn;}    @-webkit-keyframes rollOut {      0% {
      opacity: 1;}      100% {
      opacity: 0;
      -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
      transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);}  }    @keyframes rollOut {      0% {
      opacity: 1;}      100% {
      opacity: 0;
      -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
      -ms-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
      transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);}  }    .rollOut {
      -webkit-animation-name: rollOut;
      animation-name: rollOut;}    @-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);
      -ms-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 zoomInDown {      0% {
      opacity: 0;
      -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
      transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
      -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);}      60% {
      opacity: 1;
      -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
      transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
      -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);}  }    @keyframes zoomInDown {      0% {
      opacity: 0;
      -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
      -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
      transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
      -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);}      60% {
      opacity: 1;
      -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
      -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
      transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
      -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);}  }    .zoomInDown {
      -webkit-animation-name: zoomInDown;
      animation-name: zoomInDown;}    @-webkit-keyframes zoomInLeft {      0% {
      opacity: 0;
      -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
      transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
      -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);}      60% {
      opacity: 1;
      -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
      transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
      -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);}  }    @keyframes zoomInLeft {      0% {
      opacity: 0;
      -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
      -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
      transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
      -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);}      60% {
      opacity: 1;
      -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
      -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
      transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
      -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);}  }    .zoomInLeft {
      -webkit-animation-name: zoomInLeft;
      animation-name: zoomInLeft;}    @-webkit-keyframes zoomInRight {      0% {
      opacity: 0;
      -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
      transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
      -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);}      60% {
      opacity: 1;
      -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
      transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
      -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);}  }    @keyframes zoomInRight {      0% {
      opacity: 0;
      -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
      -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
      transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
      -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);}      60% {
      opacity: 1;
      -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
      -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
      transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
      -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);}  }    .zoomInRight {
      -webkit-animation-name: zoomInRight;
      animation-name: zoomInRight;}    @-webkit-keyframes zoomInUp {      0% {
      opacity: 0;
      -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
      transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
      -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);}      60% {
      opacity: 1;
      -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
      transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
      -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);}  }    @keyframes zoomInUp {      0% {
      opacity: 0;
      -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
      -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
      transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
      -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);}      60% {
      opacity: 1;
      -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
      -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
      transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
      -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);}  }    .zoomInUp {
      -webkit-animation-name: zoomInUp;
      animation-name: zoomInUp;}    @-webkit-keyframes zoomOut {      0% {
      opacity: 1;}      50% {
      opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
      transform: scale3d(0.3, 0.3, 0.3);}      100% {
      opacity: 0;}  }    @keyframes zoomOut {      0% {
      opacity: 1;}      50% {
      opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
      -ms-transform: scale3d(0.3, 0.3, 0.3);
      transform: scale3d(0.3, 0.3, 0.3);}      100% {
      opacity: 0;}  }    .zoomOut {
      -webkit-animation-name: zoomOut;
      animation-name: zoomOut;}    @-webkit-keyframes zoomOutDown {      40% {
      opacity: 1;
      -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
      transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
      -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);}      100% {
      opacity: 0;
      -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
      transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
      -webkit-transform-origin: center bottom;
      transform-origin: center bottom;
      -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);}  }    @keyframes zoomOutDown {      40% {
      opacity: 1;
      -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
      -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
      transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
      -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);}      100% {
      opacity: 0;
      -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
      -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
      transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
      -webkit-transform-origin: center bottom;
      -ms-transform-origin: center bottom;
      transform-origin: center bottom;
      -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);}  }    .zoomOutDown {
      -webkit-animation-name: zoomOutDown;
      animation-name: zoomOutDown;}    @-webkit-keyframes zoomOutLeft {      40% {
      opacity: 1;
      -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
      transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);}      100% {
      opacity: 0;
      -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
      transform: scale(0.1) translate3d(-2000px, 0, 0);
      -webkit-transform-origin: left center;
      transform-origin: left center;}  }    @keyframes zoomOutLeft {      40% {
      opacity: 1;
      -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
      -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
      transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);}      100% {
      opacity: 0;
      -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
      -ms-transform: scale(0.1) translate3d(-2000px, 0, 0);
      transform: scale(0.1) translate3d(-2000px, 0, 0);
      -webkit-transform-origin: left center;
      -ms-transform-origin: left center;
      transform-origin: left center;}  }    .zoomOutLeft {
      -webkit-animation-name: zoomOutLeft;
      animation-name: zoomOutLeft;}    @-webkit-keyframes zoomOutRight {      40% {
      opacity: 1;
      -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
      transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);}      100% {
      opacity: 0;
      -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
      transform: scale(0.1) translate3d(2000px, 0, 0);
      -webkit-transform-origin: right center;
      transform-origin: right center;}  }    @keyframes zoomOutRight {      40% {
      opacity: 1;
      -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
      -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
      transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);}      100% {
      opacity: 0;
      -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
      -ms-transform: scale(0.1) translate3d(2000px, 0, 0);
      transform: scale(0.1) translate3d(2000px, 0, 0);
      -webkit-transform-origin: right center;
      -ms-transform-origin: right center;
      transform-origin: right center;}  }    .zoomOutRight {
      -webkit-animation-name: zoomOutRight;
      animation-name: zoomOutRight;}    @-webkit-keyframes zoomOutUp {      40% {
      opacity: 1;
      -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
      transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
      -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);}      100% {
      opacity: 0;
      -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
      transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
      -webkit-transform-origin: center bottom;
      transform-origin: center bottom;
      -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);}  }    @keyframes zoomOutUp {      40% {
      opacity: 1;
      -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
      -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
      transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
      -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);}      100% {
      opacity: 0;
      -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
      -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
      transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
      -webkit-transform-origin: center bottom;
      -ms-transform-origin: center bottom;
      transform-origin: center bottom;
      -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);}  }    .zoomOutUp {
      -webkit-animation-name: zoomOutUp;
      animation-name: zoomOutUp;}    .swiper-container {
      margin: 0 auto;
      position: relative;
      overflow: hidden;
      z-index: 1;}    .swiper-container-no-flexbox .swiper-slide {
      float: left;}    .swiper-container-vertical>.swiper-wrapper {
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      -ms-flex-direction: column;
      -webkit-flex-direction: column;
      flex-direction: column;}    .swiper-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 1;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-transition-property: -webkit-transform;
      -moz-transition-property: -moz-transform;
      -o-transition-property: -o-transform;
      -ms-transition-property: -ms-transform;
      transition-property: transform;
      -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
      box-sizing: content-box;}    .swiper-container-android .swiper-slide,  .swiper-wrapper {
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -o-transform: translate(0, 0);
      -ms-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);}    .swiper-container-multirow>.swiper-wrapper {
      -webkit-box-lines: multiple;
      -moz-box-lines: multiple;
      -ms-flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;}    .swiper-container-free-mode>.swiper-wrapper {
      -webkit-transition-timing-function: ease-out;
      -moz-transition-timing-function: ease-out;
      -ms-transition-timing-function: ease-out;
      -o-transition-timing-function: ease-out;
      transition-timing-function: ease-out;
      margin: 0 auto;}    .swiper-slide {
      -webkit-flex-shrink: 0;
      -ms-flex: 0 0 auto;
      flex-shrink: 0;
      width: 100%;
      height: 100%;
      position: relative;}    .swiper-container-autoheight,  .swiper-container-autoheight .swiper-slide {
      height: auto;}    .swiper-container-autoheight .swiper-wrapper {
      -webkit-box-align: start;
      -ms-flex-align: start;
      -webkit-align-items: flex-start;
      align-items: flex-start;
      -webkit-transition-property: -webkit-transform, height;
      -moz-transition-property: -moz-transform;
      -o-transition-property: -o-transform;
      -ms-transition-property: -ms-transform;
      transition-property: transform, height;}    .swiper-container .swiper-notification {
      position: absolute;
      left: 0;
      top: 0;
      pointer-events: none;
      opacity: 0;
      z-index: -1000;}    .swiper-wp8-horizontal {
      -ms-touch-action: pan-y;
      touch-action: pan-y;}    .swiper-wp8-vertical {
      -ms-touch-action: pan-x;
      touch-action: pan-x;}    .swiper-button-next,  .swiper-button-prev {
      position: absolute;
      top: 50%;
      width: 27px;
      height: 44px;
      margin-top: -22px;
      z-index: 10;
      cursor: pointer;
      -moz-background-size: 27px 44px;
      -webkit-background-size: 27px 44px;
      background-size: 27px 44px;
      background-position: center;
      background-repeat: no-repeat;}    .swiper-button-next.swiper-button-disabled,  .swiper-button-prev.swiper-button-disabled {
      opacity: .35;
      cursor: auto;
      pointer-events: none;}    .swiper-button-prev,  .swiper-container-rtl .swiper-button-next {
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
      left: 10px;
      right: auto;}    .swiper-button-prev.swiper-button-black,  .swiper-container-rtl .swiper-button-next.swiper-button-black {
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");}    .swiper-button-prev.swiper-button-white,  .swiper-container-rtl .swiper-button-next.swiper-button-white {
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");}    .swiper-button-next,  .swiper-container-rtl .swiper-button-prev {
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
      right: 10px;
      left: auto;}    .swiper-button-next.swiper-button-black,  .swiper-container-rtl .swiper-button-prev.swiper-button-black {
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");}    .swiper-button-next.swiper-button-white,  .swiper-container-rtl .swiper-button-prev.swiper-button-white {
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");}    .swiper-pagination {
      position: absolute;
      text-align: center;
      -webkit-transition: .3s;
      -moz-transition: .3s;
      -o-transition: .3s;
      transition: .3s;
      -webkit-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      z-index: 10;}    .swiper-pagination.swiper-pagination-hidden {
      opacity: 0;}    .swiper-container-horizontal>.swiper-pagination-bullets,  .swiper-pagination-custom,  .swiper-pagination-fraction {
      bottom: 10px;
      left: 0;
      width: 100%;}    .swiper-pagination-bullet {
      width: 8px;
      height: 8px;
      display: inline-block;
      border-radius: 100%;
      background: #000;
      opacity: .2;}
      button.swiper-pagination-bullet {      border: none;
      margin: 0;
      padding: 0;
      box-shadow: none;
      -moz-appearance: none;
      -ms-appearance: none;
      -webkit-appearance: none;
      appearance: none;}    .swiper-pagination-clickable .swiper-pagination-bullet {
      cursor: pointer;}    .swiper-pagination-white .swiper-pagination-bullet {
      background: #fff;}    .swiper-pagination-bullet-active {
      opacity: 1;
      background: #007aff;}    .swiper-pagination-white .swiper-pagination-bullet-active {
      background: #fff;}    .swiper-pagination-black .swiper-pagination-bullet-active {
      background: #000;}    .swiper-container-vertical>.swiper-pagination-bullets {
      right: 10px;
      top: 50%;
      -webkit-transform: translate3d(0, -50%, 0);
      -moz-transform: translate3d(0, -50%, 0);
      -o-transform: translate(0, -50%);
      -ms-transform: translate3d(0, -50%, 0);
      transform: translate3d(0, -50%, 0);}    .swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
      margin: 5px 0;
      display: block;}    .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
      margin: 0 5px;}    .swiper-pagination-progress {
      background: rgba(0, 0, 0, 0.25);
      position: absolute;}    .swiper-pagination-progress .swiper-pagination-progressbar {
      background: #007aff;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      -webkit-transform: scale(0);
      -ms-transform: scale(0);
      -o-transform: scale(0);
      transform: scale(0);
      -webkit-transform-origin: left top;
      -moz-transform-origin: left top;
      -ms-transform-origin: left top;
      -o-transform-origin: left top;
      transform-origin: left top;}    .swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar {
      -webkit-transform-origin: right top;
      -moz-transform-origin: right top;
      -ms-transform-origin: right top;
      -o-transform-origin: right top;
      transform-origin: right top;}    .swiper-container-horizontal>.swiper-pagination-progress {
      width: 100%;
      height: 4px;
      left: 0;
      top: 0;}    .swiper-container-vertical>.swiper-pagination-progress {
      width: 4px;
      height: 100%;
      left: 0;
      top: 0;}    .swiper-pagination-progress.swiper-pagination-white {
      background: rgba(255, 255, 255, 0.5);}    .swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar {
      background: #fff;}    .swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar {
      background: #000;}    .swiper-container-3d {
      -webkit-perspective: 1200px;
      -moz-perspective: 1200px;
      -o-perspective: 1200px;
      perspective: 1200px;}    .swiper-container-3d .swiper-cube-shadow,  .swiper-container-3d .swiper-slide,  .swiper-container-3d .swiper-slide-shadow-bottom,  .swiper-container-3d .swiper-slide-shadow-left,  .swiper-container-3d .swiper-slide-shadow-right,  .swiper-container-3d .swiper-slide-shadow-top,  .swiper-container-3d .swiper-wrapper {
      -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
      transform-style: preserve-3d;}    .swiper-container-3d .swiper-slide-shadow-bottom,  .swiper-container-3d .swiper-slide-shadow-left,  .swiper-container-3d .swiper-slide-shadow-right,  .swiper-container-3d .swiper-slide-shadow-top {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 10;}    .swiper-container-3d .swiper-slide-shadow-left {
      background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(transparent));
      background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), transparent);
      background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0.5), transparent);
      background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), transparent);
      background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), transparent);}    .swiper-container-3d .swiper-slide-shadow-right {
      background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(transparent));
      background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), transparent);
      background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), transparent);
      background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), transparent);
      background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent);}    .swiper-container-3d .swiper-slide-shadow-top {
      background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(transparent));
      background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), transparent);
      background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5), transparent);
      background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), transparent);
      background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);}    .swiper-container-3d .swiper-slide-shadow-bottom {
      background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(transparent));
      background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), transparent);
      background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), transparent);
      background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), transparent);
      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);}    .swiper-container-coverflow .swiper-wrapper,  .swiper-container-flip .swiper-wrapper {
      -ms-perspective: 1200px;}    .swiper-container-cube,  .swiper-container-flip {
      overflow: visible;}    .swiper-container-cube .swiper-slide,  .swiper-container-flip .swiper-slide {
      pointer-events: none;
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
      backface-visibility: hidden;
      z-index: 1;}    .swiper-container-cube .swiper-slide .swiper-slide,  .swiper-container-flip .swiper-slide .swiper-slide {
      pointer-events: none;}    .swiper-container-cube .swiper-slide-active,  .swiper-container-cube .swiper-slide-active .swiper-slide-active,  .swiper-container-flip .swiper-slide-active,  .swiper-container-flip .swiper-slide-active .swiper-slide-active {
      pointer-events: auto;}    .swiper-container-cube .swiper-slide-shadow-bottom,  .swiper-container-cube .swiper-slide-shadow-left,  .swiper-container-cube .swiper-slide-shadow-right,  .swiper-container-cube .swiper-slide-shadow-top,  .swiper-container-flip .swiper-slide-shadow-bottom,  .swiper-container-flip .swiper-slide-shadow-left,  .swiper-container-flip .swiper-slide-shadow-right,  .swiper-container-flip .swiper-slide-shadow-top {
      z-index: 0;
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
      backface-visibility: hidden;}    .swiper-container-cube .swiper-slide {
      visibility: hidden;
      -webkit-transform-origin: 0 0;
      -moz-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
      transform-origin: 0 0;
      width: 100%;
      height: 100%;}    .swiper-container-cube.swiper-container-rtl .swiper-slide {
      -webkit-transform-origin: 100% 0;
      -moz-transform-origin: 100% 0;
      -ms-transform-origin: 100% 0;
      transform-origin: 100% 0;}    .swiper-container-cube .swiper-slide-active,  .swiper-container-cube .swiper-slide-next,  .swiper-container-cube .swiper-slide-next+.swiper-slide,  .swiper-container-cube .swiper-slide-prev {
      pointer-events: auto;
      visibility: visible;}    .swiper-container-cube .swiper-cube-shadow {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background: #000;
      opacity: .6;
      -webkit-filter: blur(50px);
      filter: blur(50px);
      z-index: 0;}    .swiper-container-fade.swiper-container-free-mode .swiper-slide {
      -webkit-transition-timing-function: ease-out;
      -moz-transition-timing-function: ease-out;
      -ms-transition-timing-function: ease-out;
      -o-transition-timing-function: ease-out;
      transition-timing-function: ease-out;}    .swiper-container-fade .swiper-slide {
      pointer-events: none;
      -webkit-transition-property: opacity;
      -moz-transition-property: opacity;
      -o-transition-property: opacity;
      transition-property: opacity;}    .swiper-container-fade .swiper-slide .swiper-slide {
      pointer-events: none;}    .swiper-container-fade .swiper-slide-active,  .swiper-container-fade .swiper-slide-active .swiper-slide-active {
      pointer-events: auto;}    .swiper-scrollbar {
      border-radius: 10px;
      position: relative;
      -ms-touch-action: none;
      background: rgba(0, 0, 0, 0.1);}    .swiper-container-horizontal>.swiper-scrollbar {
      position: absolute;
      left: 1%;
      bottom: 3px;
      z-index: 50;
      height: 5px;
      width: 98%;}    .swiper-container-vertical>.swiper-scrollbar {
      position: absolute;
      right: 3px;
      top: 1%;
      z-index: 50;
      width: 5px;
      height: 98%;}    .swiper-scrollbar-drag {
      height: 100%;
      width: 100%;
      position: relative;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 10px;
      left: 0;
      top: 0;}    .swiper-scrollbar-cursor-drag {
      cursor: move;}    .swiper-lazy-preloader {
      width: 42px;
      height: 42px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -21px;
      margin-top: -21px;
      z-index: 10;
      -webkit-transform-origin: 50%;
      -moz-transform-origin: 50%;
      transform-origin: 50%;
      -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
      -moz-animation: swiper-preloader-spin 1s steps(12, end) infinite;
      animation: swiper-preloader-spin 1s steps(12, end) infinite;}    .swiper-lazy-preloader:after {
      display: block;
      content: "";
      width: 100%;
      height: 100%;
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
      background-position: 50%;
      -webkit-background-size: 100%;
      background-size: 100%;
      background-repeat: no-repeat;}    .swiper-lazy-preloader-white:after {
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");}    @-webkit-keyframes swiper-preloader-spin {      100% {
      -webkit-transform: rotate(360deg);}  }    @keyframes swiper-preloader-spin {      100% {
      transform: rotate(360deg);}  }    * {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      outline: 0 !important;
      -webkit-margin-before: 0em;
      -webkit-margin-after: 0em;
      -webkit-margin-start: 0;
      -webkit-margin-end: 0;
      -webkit-padding-start: 0;
      margin: 0;
      padding: 0;  }
      article,  aside,  details,  figcaption,  figure,  footer,  header,  hgroup,  nav,  section {      display: block;}
      audio,  canvas,  video {      display: inline-block;      *
      display: inline;      *
      zoom: 1;}
      audio:not([controls]) {      display: none;}    [
      hidden] {      display: none;}
      html {      font-size: 100%;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;}
      body {      margin: 0;
      font-size: 10px;
      text-rendering: optimizeLegibility !important;
      -webkit-font-smoothing: antialiased !important;
      -moz-osx-font-smoothing: grayscale;}
      body,  button,  input,  select,  textarea {      color: #000222;}
      a:focus {      outline: thin dotted;}
      a:hover,  a:active {      outline: 0;}
      abbr[title] {      border-bottom: 1px dotted;}
      b,  strong {      font-weight: bold;}
      blockquote {      margin: 1em 40px;}
      dfn {      font-style: italic;}
      hr {      display: block;
      height: 1px;
      border: 0;
      border-top: 1px solid #cccccc;
      margin: 1em 0;
      padding: 0;}
      ins {      background: #ffff99;
      color: black;
      text-decoration: none;}
      mark {      background: yellow;
      color: black;
      font-style: italic;
      font-weight: bold;}
      pre,  code,  kbd,  samp {      font-family: monospace, monospace;
      _font-family: "courier new", monospace;
      font-size: 1em;}
      pre {      white-space: pre;
      white-space: pre-wrap;
      word-wrap: break-word;}
      q {      quotes: none;}
      q:before,  q:after {      content: "";
      content: none;}
      small {      font-size: 85%;}
      sub,  sup {      font-size: 75%;
      line-height: 0;
      position: relative;
      vertical-align: baseline;}
      sup {      top: -0.5em;}
      sub {      bottom: -0.25em;}
      ul,  ol {      margin: 0;
      padding: 0;
      list-style: none;}
      dd {      margin: 0;}
      nav ul,  nav ol {      list-style: none;
      list-style-image: none;
      margin: 0;
      padding: 0;}
      img {      border: 0;
      -ms-interpolation-mode: bicubic;
      vertical-align: middle;}
      svg:not(:root) {      overflow: hidden;}
      figure {      margin: 0;}
      form {      margin: 0;}
      fieldset {      border: 0;
      margin: 0;
      padding: 0;}
      label {      cursor: pointer;}
      legend {      border: 0;      *
      margin-left: -7px;
      padding: 0;}
      button,  input,  select,  textarea {      font-size: 100%;
      margin: 0;
      vertical-align: baseline;      *
      vertical-align: middle;}
      button,  input {      line-height: normal;      *
      overflow: visible;}
      table button,  table input {      *overflow: auto;}
      button,  input[type="button"],  input[type="reset"],  input[type="submit"] {      cursor: pointer;
      -webkit-appearance: button;}
      input[type="checkbox"],  input[type="radio"] {      box-sizing: border-box;}
      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-decoration {      -webkit-appearance: none;}
      button::-moz-focus-inner,  input::-moz-focus-inner {      border: 0;
      padding: 0;}
      textarea {      overflow: auto;
      vertical-align: top;
      resize: vertical;}
      input:invalid,  textarea:invalid {      background-color: #f0dddd;}
      table {      border-collapse: collapse;
      border-spacing: 0;
      font-size: 13px;  }
      td {      vertical-align: top;}
      h1,  h2,  h3,  h4,  h5,  h6,  p {      margin: 0px;}    @font-face {
      font-family: "Conv_CircularStd-Book";
      src: url(/assets/CircularStd-Book-e206ab8ede6c4708f0cd846098c1ee7b.eot);
      src: local("?"), url(/assets/CircularStd-Book-aa5d8694fadf588674b731c82c5eb238.woff) format("woff"), url(/assets/CircularStd-Book-20dcb3d227760f61fda87598d89c22c5.ttf) format("truetype"), url(/assets/CircularStd-Book-0668925c98c40572487ba40b6eb73e1a.svg) format("svg");
      font-weight: normal;
      font-style: normal;}    @font-face {
      font-family: "Conv_CircularStd-Black";
      src: url(/assets/CircularStd-Black-7f0134997f52900e84f2313d34235750.eot);
      src: local("?"), url(/assets/CircularStd-Black-a95798b6be8712280e44c707eeb84ebd.woff) format("woff"), url(/assets/CircularStd-Black-a668ec3569157af9074b3abf3ae94a8a.ttf) format("truetype"), url(/assets/CircularStd-Black-5eb5a45e89acf61e2b1d62504dd3b267.svg) format("svg");
      font-weight: normal;
      font-style: normal;}
      html {      font-size: 16px;}
      html,  body,  #pages-wrapper {      width: 100%;
      height: 100%;  }
      main {      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      font-family: "Conv_CircularStd-Book", Helvetica, sans-serif;
      overflow: hidden;
      min-width: 320px;}    #pages-wrapper {
      position: relative;
      z-index: 1;}    .page {
      padding-top: 68px;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      z-index: 1;
      -moz-backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -moz-transform: translateZ(0);
      -ms-transform: translateZ(0);
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      overflow: hidden;
      -webkit-overflow-scrolling: touch;}    .page.active {
      overflow-x: hidden;
      overflow-y: scroll;
      position: fixed;
      background: transparent;
      z-index: 4;  }    .page .container {
      position: relative;
      width: 100%;}    .page .outer-constrain {
      max-width: 1600px;
      margin: 0 auto;
      overflow: hidden;
      position: relative;}    .page
      section {      margin-top: 47px;
      /* position: relative; */
      -moz-backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -moz-transform: translateZ(0);
      -ms-transform: translateZ(0);
      /* -webkit-transform: translateZ(0); */
      /* transform: translateZ(0); */
      height: fit-content !important;  }    .page
      section:not(.marquee) {      z-index: 9;
      background-color: white;}    .page
      section.gray {      background-color: #f5f6fa;}    .page
      section h2 {      padding-top: 80px;}    .bottom {
      padding-bottom: 100px;}    .constrain {
      width: 820px;
      margin: 0 auto;
      position: relative;
      top: 141px;
      /* overflow: hidden; */  }    .pill {
      text-align: center;
      overflow: hidden;
      cursor: pointer;
      float: left;}    .pill
      a,  .pill span {      text-decoration: none;
      text-transform: uppercase;
      line-height: 100%;
      overflow: hidden;
      display: inline-block;
      color: #ff1353;
      border: 2px solid #ff1353;
      font-family: "Conv_CircularStd-Black", Helvetica, sans-serif;
      font-size: 13px;
      padding: 10px 44px;
      -moz-border-radius: 40px;
      -webkit-border-radius: 40px;
      border-radius: 40px;
      -moz-transition: all 150ms;
      -webkit-transition: all 150ms;
      transition: all 150ms;}    .pill
      a:hover {      text-decoration: none !important;}    .pill.enable-hover:hover,  .pill.mobile-active,  .pill.active {
      -webkit-user-select: none;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent;}    .pill.enable-hover:hover
      a,  .pill.enable-hover:hover span,  .pill.mobile-active a,  .pill.mobile-active span,  .pill.active a,  .pill.active span {      color: white;
      background-color: #ff1353;}    .pill.alt-hover-1.enable-hover:hover,  .pill.alt-hover-1.mobile-active,  .pill.alt-hover-1.active {
      -webkit-user-select: none;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent;}    .pill.alt-hover-1.enable-hover:hover
      a,  .pill.alt-hover-1.enable-hover:hover span,  .pill.alt-hover-1.mobile-active a,  .pill.alt-hover-1.mobile-active span,  .pill.alt-hover-1.active a,  .pill.alt-hover-1.active span {      color: #ff2d44 !important;
      background-color: white;}    .pill.alt-hover-2.enable-hover:hover,  .pill.alt-hover-2.mobile-active,  .pill.alt-hover-2.active {
      -webkit-user-select: none;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent;}    .pill.alt-hover-2.enable-hover:hover
      a,  .pill.alt-hover-2.enable-hover:hover span,  .pill.alt-hover-2.mobile-active a,  .pill.alt-hover-2.mobile-active span,  .pill.alt-hover-2.active a,  .pill.alt-hover-2.active span {      color: #00133e !important;
      background-color: white;}
      li .border-hover {      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background-color: transparent;
      border: 0px solid white;
      -moz-transition: border 300ms;
      -webkit-transition: border 300ms;
      transition: border 300ms;
      pointer-events: none;
      z-index: 3;
      -moz-backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;}
      li.enable-hover:hover,  li.mobile-active {      -webkit-user-select: none;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent;}
      li.enable-hover:hover .border-hover,  li.mobile-active .border-hover {      border-width: 10px;}    .common-pagination {
      overflow: hidden;      *
      zoom: 1;}    .common-pagination
      li {      cursor: pointer;
      float: left;
      width: 40px;
      height: 40px;
      border: 2px solid #ff1353;
      -moz-border-radius: 20px;
      -webkit-border-radius: 20px;
      border-radius: 20px;
      position: relative;
      overflow: hidden;
      -moz-transition: all 150ms;
      -webkit-transition: all 150ms;
      transition: all 150ms;}    .common-pagination
      li.disabled {      border-color: #e0e3eb;}    .common-pagination
      li.disabled>figure {      background-position: -30px -78px;}    .common-pagination
      li.disabled:first-child>figure {      background-position: -21px -78px;}    .common-pagination
      li>figure {      text-indent: -119988px;
      overflow: hidden;
      text-align: left;
      text-transform: capitalize;
      background-image: url(sprites.png);
      background-repeat: no-repeat;
      background-position: -10px -78px;
      display: block;
      height: 14px;
      width: 8px;
      position: relative;
      top: 11px;
      left: 16px;
      z-index: 1;}    @media all and (
      -webkit-min-device-pixel-ratio: 2) {      .common-pagination li>figure {          background-image: url(sprites_2x.png);
      background-size: 500px 500px;}  }    .common-pagination
      li a {      text-decoration: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;}    .common-pagination
      li:first-child {      margin-right: 10px;}    .common-pagination
      li:first-child>figure {      left: 13px;
      background-position: -1px -78px;}    .common-pagination
      li:not(.disabled).enable-hover:hover,  .common-pagination li:not(.disabled).mobile-active {      background-color: #ff1353;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent;}    .common-pagination
      li:not(.disabled).enable-hover:hover>figure,  .common-pagination li:not(.disabled).mobile-active>figure {      background-position: -50px -78px;}    .common-pagination
      li:not(.disabled).enable-hover:hover:first-child>figure,  .common-pagination li:not(.disabled).mobile-active:first-child>figure {      background-position: -41px -78px;}
      h1,  h2,  h3,  h4,  h5,  h6 {      font-weight: 400;}
      h2 {      padding-bottom: 64px;
      font-size: 40px;}
      h2+p {      font-family: "adobe-garamond-pro", serif;
      font-weight: 400;
      /*font-style: italic;*/
      color: #9898a6;
      padding-bottom: 80px;
      font-size: 30px;}    @-moz-document url-prefix() {      h2+p {
      line-height: 36px;}  }
      a {      color: #ff2261;
      text-decoration: none;}
      a:hover {      text-decoration: underline;}
      a.hover-pink.enable-hover:hover,  a.hover-pink.mobile-active {      -moz-transition: color 200ms;
      -webkit-transition: color 200ms;
      transition: color 200ms;
      color: #ff1353 !important;
      text-decoration: underline !important;}    .vertical-align {
      position: relative;
      top: 50%;
      -moz-transform: translateY(-50.1%);
      -ms-transform: translateY(-50.1%);
      -webkit-transform: translateY(-50.1%);
      transform: translateY(-50.1%);}    .date,  .location {
      font-size: 11px;
      color: #aaaab2;
      text-transform: uppercase;}    .mobile-break {
      display: inline;}    .canvas-background {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      z-index: 1;
      overflow: hidden;}    .canvas-background .canvas {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;}    .text-effect {
      visibility: hidden;}    .particle-container {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;}    .parallax-wrapper {
      overflow: hidden;}    .parallax-wrapper
      img {      position: absolute;
      left: 50%;
      top: 0;}    .not-touch .parallax-wrapper
      img {      min-height: 150%;}    .touch .parallax-wrapper
      img {      height: 100%;}    .bottom-gradient {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 5px;
      background-image: -moz-linear-gradient(left, #31388d 0%, #753fa9 33.333%, #ff0762 66%, #f25632 100%);
      background-image: -webkit-linear-gradient(left, #31388d 0%, #753fa9 33.333%, #ff0762 66%, #f25632 100%);
      background-image: linear-gradient(to right, #31388d 0%, #753fa9 33.333%, #ff0762 66%, #f25632 100%);}    @media (
      max-width: 880px) {      html .page {          padding-top: 13px;}      html .page section h2 {
      padding-top: 22px;}      html .mobile-hide {
      display: block !important;}      html h2 {
      font-size: 20px;
      padding-bottom: 23px;}      html h2+p {
      font-size: 18px;
      padding-bottom: 35px;}      html .page-pagination {
      display: none !important;}      html .constrain {
      padding-left: 16px;
      padding-right: 16px;
      width: 100%;}      html .bottom {
      padding-bottom: 42px;}      html .pill {
      font-size: 12px;
      width: 100%;}      html .pill a,      html .pill span {
      width: 100%;}      html .mobile-break {
      display: block;}      html li.enable-hover:hover .border-hover,      html li.mobile-active .border-hover {
      border-width: 5px;}  }    @media (
      min-width: 540px) and (max-width: 880px) {      html .constrain {          padding-left: 40px !important;
      padding-right: 40px !important;}  }    @-webkit-keyframes svg-repeat-animation-left {      0% {
      -moz-transform: translateX(-1%);
      -ms-transform: translateX(-1%);
      -webkit-transform: translateX(-1%);
      transform: translateX(-1%);}      100% {
      -moz-transform: translateX(100%);
      -ms-transform: translateX(100%);
      -webkit-transform: translateX(100%);
      transform: translateX(100%);}  }    @-moz-keyframes svg-repeat-animation-left {      0% {
      -moz-transform: translateX(-1%);
      -ms-transform: translateX(-1%);
      -webkit-transform: translateX(-1%);
      transform: translateX(-1%);}      100% {
      -moz-transform: translateX(100%);
      -ms-transform: translateX(100%);
      -webkit-transform: translateX(100%);
      transform: translateX(100%);}  }    @-ms-keyframes svg-repeat-animation-left {      0% {
      -moz-transform: translateX(-1%);
      -ms-transform: translateX(-1%);
      -webkit-transform: translateX(-1%);
      transform: translateX(-1%);}      100% {
      -moz-transform: translateX(100%);
      -ms-transform: translateX(100%);
      -webkit-transform: translateX(100%);
      transform: translateX(100%);}  }    @keyframes svg-repeat-animation-left {      0% {
      -moz-transform: translateX(-1%);
      -ms-transform: translateX(-1%);
      -webkit-transform: translateX(-1%);
      transform: translateX(-1%);}      100% {
      -moz-transform: translateX(100%);
      -ms-transform: translateX(100%);
      -webkit-transform: translateX(100%);
      transform: translateX(100%);}  }    @-webkit-keyframes svg-repeat-animation-right {      0% {
      -moz-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);}      100% {
      -moz-transform: translateX(0%);
      -ms-transform: translateX(0%);
      -webkit-transform: translateX(0%);
      transform: translateX(0%);}  }    @-moz-keyframes svg-repeat-animation-right {      0% {
      -moz-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);}      100% {
      -moz-transform: translateX(0%);
      -ms-transform: translateX(0%);
      -webkit-transform: translateX(0%);
      transform: translateX(0%);}  }    @-ms-keyframes svg-repeat-animation-right {      0% {
      -moz-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);}      100% {
      -moz-transform: translateX(0%);
      -ms-transform: translateX(0%);
      -webkit-transform: translateX(0%);
      transform: translateX(0%);}  }    @keyframes svg-repeat-animation-right {      0% {
      -moz-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);}      100% {
      -moz-transform: translateX(0%);
      -ms-transform: translateX(0%);
      -webkit-transform: translateX(0%);
      transform: translateX(0%);}  }    .logo {
      position: relative;
      width: 199px;  }    .logo .svg-logo-gradient {
      opacity: 0;
      transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1);}    .logo .svg-repeat-pattern-left {
      -o-animation: svg-repeat-animation-left 2s linear infinite;
      -moz-animation: svg-repeat-animation-left 2s linear infinite;
      -ms-animation: svg-repeat-animation-left 2s linear infinite;
      -webkit-animation: svg-repeat-animation-left 2s linear infinite;
      animation: svg-repeat-animation-left 2s linear infinite;}    .logo .svg-repeat-pattern-right {
      -o-animation: svg-repeat-animation-right 2s linear infinite;
      -moz-animation: svg-repeat-animation-right 2s linear infinite;
      -ms-animation: svg-repeat-animation-right 2s linear infinite;
      -webkit-animation: svg-repeat-animation-right 2s linear infinite;
      animation: svg-repeat-animation-right 2s linear infinite;}    .logo
      svg {      position: relative;
      width: 20px;
      height: 100%;
      width: 163px;
      left: unset;
      display: block;
      margin-left: auto;
      margin-right: auto;
      stroke: #000222;
      overflow: visible;
      transition: stroke 300ms cubic-bezier(0.215, 0.61, 0.355, 1);  }    .logo .light
      svg {      stroke: white;}    .logo .dark
      svg {      stroke: #000222;}    .logo.transparent-menu .dark
      svg {      stroke: white;}    .has-hover.logo:hover .dark
      svg,  .has-hover.logo:hover .light svg {      stroke: transparent;}    .has-hover.logo:hover .dark .svg-gradient-pattern,  .has-hover.logo:hover .light .svg-gradient-pattern {
      height: 100%;
      width: 300%;}    .has-hover.logo:hover .dark .svg-logo-gradient,  .has-hover.logo:hover .light .svg-logo-gradient {
      opacity: 1;}    #preloader-overlay .logo .svg-logo-gradient {
      opacity: 1;}    .is-firefox #preloader-overlay .logo {
      background-image: url(ff-logo-fallback.jpg);
      background-size: cover;}    .is-firefox #preloader-overlay .logo
      svg {      display: none;}    #splash {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      z-index: 4;}    #splash .wrapper {
      display: table;
      text-align: center;
      width: 100%;
      height: 100%;}    #splash .wrapper .content {
      display: table-cell;
      vertical-align: middle;}    #splash .wrapper .content
      figure {      width: 41px;
      height: 81px;
      background-image: url(logo-sprite-white.png);
      background-size: 41px 6642px;
      margin: 0 auto 35px;
      display: none;}    #splash .wrapper .content
      h1 {      color: white !important;
      font-size: 40px !important;
      margin-bottom: 14px;  }    #splash .wrapper .content
      h1+p {      margin-bottom: 10px;}    #splash .wrapper .content
      h1+p+p {      margin-bottom: 40px;  }    #splash .wrapper .content
      p {      font-family: "adobe-garamond-pro", serif;
      font-weight: 400;
      font-style: italic;
      font-size: 36px;
      color: rgba(255, 255, 255, 0.7);
      opacity: 0;}    #splash .wrapper .content .pill {
      margin: 0 auto;
      float: none;
      display: inline-block;
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent;}    #splash .wrapper .content .pill
      a,  #splash .wrapper .content .pill span {      color: white;
      border-color: white;}    #splash.error-page {
      background-image: -moz-linear-gradient(top left, #31388d 0%, #753fa9 33.333%, #ff0762 66%, #f25632 100%);
      background-image: -webkit-linear-gradient(top left, #31388d 0%, #753fa9 33.333%, #ff0762 66%, #f25632 100%);
      background-image: linear-gradient(to bottom right, #31388d 0%, #753fa9 33.333%, #ff0762 66%, #f25632 100%);}    #splash.error-page .wrapper .content
      figure {      width: 41px;
      height: 39px;
      background: url(logo.png) left top no-repeat;
      background-size: 41px 78px;
      text-indent: -119988px;
      overflow: hidden;
      text-align: left;
      text-transform: capitalize;
      -moz-transition: background 300ms;
      -webkit-transition: background 300ms;
      transition: background 300ms;
      display: block;}    #splash.error-page .wrapper .content
      figure.gradient {      background-position: left bottom;}    #splash.error-page .wrapper .content
      p {      margin-bottom: 56px;}    #splash.error-page .wrapper .content .pill {
      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;}    @media (
      max-width: 880px) {      #splash .wrapper .content figure {          margin-bottom: 20px;}      #splash .wrapper .content h1 {
      font-size: 40px;
      margin-bottom: 10px;}      #splash .wrapper .content h1+p {
      margin-bottom: 8px;}      #splash .wrapper .content h1+p+p {
      margin-bottom: 30px;}      #splash .wrapper .content p {
      font-size: 20px;}      #splash .wrapper .content .pill a,      #splash .wrapper .content .pill span {
      width: auto;}      #splash.error-page .wrapper .content p {
      margin-bottom: 30px;}  }    #menu-background {
      z-index: 999999999;
      /* overflow: hidden; */
      width: 98.7%;
      position: absolute;
      height: 84px;
      top: 0;
      display: none;
      left: 0;
      background: #ffffff;
      box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 8px 0px;  }    #menu-background .background {  }    #menu-background .constrain {
      height: 100%;}  .dropdown-menu>
      li>a {      display: block;
      padding: 3px 20px;
      clear: both;
      font-weight: 400;
      line-height: 1.42857143;
      color: #333;
      white-space: nowrap;
      font-size: 12px;
      padding-left: 8px;  }  .dropdown-menu>.active>
      a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {      color: #fff;
      text-decoration: none;
      background-color: #337ab7;
      outline: 0;
      font-size: 12px;
      padding-left: 8px;  }    #menu-background
      h1,  #menu-background span {      line-height: 82px;}    #menu-background
      h1 {      color: #000222;
      font-size: 20px;
      position: absolute;
      height: 100%;
      left: 0;
      top: 0;}    #menu-background
      span {      position: absolute;
      display: block;
      top: 0;
      right: 97px;  }    #menu-background
      span small {      position: relative;
      top: -1px;}    #menu-background.show {
      display: block;}    #menu-background.show .background {
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=90);
      opacity: 0.9;}    #menu-background.transparent-menu
      h1,  #menu-background.transparent-menu span {      color: white;}    #menu-background.transparent-menu .background {
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;}    #menu-button {
      position: absolute;
      top: 85px;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      overflow: hidden;
      -webkit-box-align: center;
      -moz-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      -webkit-box-pack: center;
      -moz-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      cursor: pointer;
      display: none;
      z-index: 4;  }    @media (
      max-width: 880px) {      #menu-button {          height: 29px;
      margin-left: -15px;
      width: 30px;}  }    #menu {
      font-size: 16px;
      z-index: 3;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;  }    #menu .canvas-background {
      background-image: -moz-linear-gradient(top left, #31388d 0%, #753fa9 33.333%, #ff0762 66%, #f25632 100%);
      background-image: -webkit-linear-gradient(top left, #31388d 0%, #753fa9 33.333%, #ff0762 66%, #f25632 100%);
      background-image: linear-gradient(to bottom right, #31388d 0%, #753fa9 35.333%, #ff0762 117%, #f25632 100%);
      z-index: 3;  }    #menu
      nav {      position: relative;
      width: 100%;
      height: 100%;
      padding-bottom: 5px;}    #menu
      nav>ul {      position: relative;
      width: 100.2%;
      height: 100%;
      overflow: hidden;      *
      zoom: 1;
      z-index: 2;}    #menu
      nav>ul>li {      width: 25%;
      height: 50%;
      float: left;
      position: relative;
      -moz-backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      border: none;  }    #menu
      nav>ul>li:not(.hover-disabled).enable-hover:hover,  #menu nav>ul>li.mobile-active {      -webkit-user-select: none;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent;
      background-image: -moz-linear-gradient(top left, #31388d 0%, #753fa9 33.333%, #ff0762 66%, #f25632 100%);
      background: none !important;  }    #menu
      nav>ul>li:not(.hover-disabled).enable-hover:hover .background,  #menu nav>ul>li.mobile-active .background {      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      opacity: 0 !important;}    #menu
      nav>ul>li:not(.hover-disabled).enable-hover:hover .scroll-indicator,  #menu nav>ul>li.mobile-active .scroll-indicator {      -moz-transition-delay: 100ms;
      -webkit-transition-delay: 100ms;
      transition-delay: 100ms;
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -webkit-transform: translateY(0);
      transform: translateY(0);
      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;}    #menu
      nav>ul>li .background {      background-color: #000222;
      -moz-transition: opacity 750ms;
      -webkit-transition: opacity 750ms;
      transition: opacity 750ms;
      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;
      position: absolute;
      top: 0;
      left: 0;
      right: -1px;
      width: auto;
      height: 100%;
      -moz-backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -moz-transform-style: preserve-3d;
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;}    #menu
      nav>ul>li .content-wrapper {      position: absolute;
      left: 0;
      right: -1px;
      width: auto;
      height: 100%;
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;}    #menu
      nav>ul>li .content-wrapper.show .description hgroup hr {      width: 30%;}    #menu
      nav>ul>li .content-wrapper.show .description hgroup+p {      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;
      -moz-transform: translateX(0);
      -ms-transform: translateX(0);
      -webkit-transform: translateX(0);
      transform: translateX(0);}    #menu
      nav>ul>li .content-wrapper.show.no-delay .description hgroup hr {      -moz-transition-delay: 0;
      -webkit-transition-delay: 0;
      transition-delay: 0;}    #menu
      nav>ul>li .content-wrapper.show.no-delay .description hgroup+p {      -moz-transition-delay: 0;
      -webkit-transition-delay: 0;
      transition-delay: 0;}    #menu
      nav>ul>li .description {      text-decoration: none;
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      display: block;
      padding: 70px 0;  }    #menu
      nav>ul>li .description hgroup {      position: relative;
      width: 100%;
      height: 50%;
      display: table;
      margin: auto;
      width: 50%;
      /* border: 3px solid green; */
      padding: 10px;  }    #menu
      nav>ul>li .description hgroup .table-cell {      display: table-cell;
      vertical-align: bottom;}    #menu
      nav>ul>li .description hgroup h1 {      font-size: 32px;
      color: white;  }    #menu
      nav>ul>li .description hgroup hr {      border: 0 none;
      border-top: 2px solid rgba(255, 255, 255, 0.2);
      margin: 40px auto;
      width: 0;
      -moz-transition: width 1000ms cubic-bezier(0.19, 1, 0.22, 1);
      -webkit-transition: width 1000ms cubic-bezier(0.19, 1, 0.22, 1);
      transition: width 1000ms cubic-bezier(0.19, 1, 0.22, 1);}    #menu
      nav>ul>li .description hgroup+p {      font-family: "adobe-garamond-pro", serif;
      font-weight: 400;
      font-style: italic;
      padding: 0 20%;
      font-size: 20px;
      color: rgba(255, 255, 255, 0.7);
      height: 50%;
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      -moz-transform: translateX(-15px);
      -ms-transform: translateX(-15px);
      -webkit-transform: translateX(-15px);
      transform: translateX(-15px);
      -moz-transition: all 800ms 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: all 800ms 150ms;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: all 800ms 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #menu
      nav>ul>li .title-bar {      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      text-align: center;
      height: 60px;
      line-height: 60px;
      z-index: 3;
      background-color: transparent;}    #menu
      nav>ul>li .title-bar h1 {      color: white;
      font-size: 15px;
      opacity: 0;}    #menu
      nav>ul>li .nested-menu {      overflow: hidden;}    #menu
      nav>ul>li .menu-items {      position: relative;
      z-index: 2;}    #menu
      nav>ul>li .menu-items .sub-sections li {      width: 100%;
      height: 200px;
      position: relative;}    #menu
      nav>ul>li .menu-items .sub-sections li:last-child a:after {      display: none;}    #menu
      nav>ul>li .menu-items .sub-sections li .overlay,  #menu nav>ul>li .menu-items .sub-sections li .active-overlay {      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      -moz-transition: opacity 400ms;
      -webkit-transition: opacity 400ms;
      transition: opacity 400ms;}    #menu
      nav>ul>li .menu-items .sub-sections li .overlay {      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=80);
      opacity: 0.8;
      background-image: -moz-linear-gradient(left, #753fa9 0%, #ff0762 100%);
      background-image: -webkit-linear-gradient(left, #753fa9 0%, #ff0762 100%);
      background-image: linear-gradient(to right, #753fa9 0%, #ff0762 100%);}    #menu
      nav>ul>li .menu-items .sub-sections li .active-overlay {      background-image: -moz-linear-gradient(left, #222 0%, #000222 100%);
      background-image: -webkit-linear-gradient(left, #222 0%, #000222 100%);
      background-image: linear-gradient(to right, #222 0%, #000222 100%);
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;}    #menu
      nav>ul>li .menu-items .sub-sections li a {      text-decoration: none;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      padding: 28px 30px;
      -moz-backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;}    #menu
      nav>ul>li .menu-items .sub-sections li p {      font-size: 18px;
      position: absolute;
      top: 64px;
      bottom: 28px;
      left: 30px;
      right: 30px;
      -moz-transition: color 300ms;
      -webkit-transition: color 300ms;
      transition: color 300ms;  }    #menu
      nav>ul>li .menu-items .sub-sections li.work {      background-size: cover;
      background-position: center center;
      height: 170px !important;  }    #menu
      nav>ul>li .menu-items .sub-sections li.work span {      color: #d1d1d7;}    #menu
      nav>ul>li .menu-items .sub-sections li.work p {      color: white;}    #menu
      nav>ul>li .menu-items .sub-sections li.news a {      background-color: #f5f6fa;}    #menu
      nav>ul>li .menu-items .sub-sections li.news a:after {      content: "";
      display: block;
      position: absolute;
      left: 0;
      bottom: -1px;
      right: 0;
      height: 2px;
      background-color: #cfd0d6;}    #menu
      nav>ul>li .menu-items .sub-sections li.news p {      color: #737380;}    #menu
      nav>ul>li .menu-items .sub-sections li.enable-hover:hover.work .overlay {      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;}    #menu
      nav>ul>li .menu-items .sub-sections li.enable-hover:hover.work .active-overlay {      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=70);
      opacity: 0.7;}    #menu
      nav>ul>li .menu-items .sub-sections li.enable-hover:hover.news p {      color: #ff1353;}    #menu
      nav>ul>li .scroll-indicator {      position: absolute;
      width: 40px;
      height: 40px;
      bottom: 20px;
      left: 50%;
      margin-left: -20px;
      background-color: rgba(0, 0, 0, 0.8);
      z-index: 4;
      -moz-border-radius: 20px;
      -webkit-border-radius: 20px;
      border-radius: 20px;
      -moz-transition: all 400ms;
      -webkit-transition: all 400ms;
      transition: all 400ms;
      overflow: hidden;      *
      zoom: 1;
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
      -webkit-transform: translateY(10px);
      transform: translateY(10px);}    #menu
      nav>ul>li .scroll-indicator .arrow-wrap {      height: 100%;
      width: 100%;
      top: 0;
      position: absolute;
      -moz-transition: all 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
      -webkit-transition: all 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
      transition: all 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
      cursor: pointer;
      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;}    #menu
      nav>ul>li .scroll-indicator .arrow-wrap figure {      position: absolute;
      top: 50%;
      left: 50%;
      margin: -5px 0 0 -7px;}    #menu
      nav>ul>li .scroll-indicator .arrow-wrap.up {      left: 0;}    #menu
      nav>ul>li .scroll-indicator .arrow-wrap.up figure {      background-image: url(sprites.png);
      background-repeat: no-repeat;
      background-position: 0 -227px;
      display: block;
      height: 9px;
      width: 14px;}    @media all and (
      -webkit-min-device-pixel-ratio: 2) {      #menu nav>ul>li .scroll-indicator .arrow-wrap.up figure {          background-image: url(sprites_2x.png);
      background-size: 500px 500px;}  }    #menu
      nav>ul>li .scroll-indicator .arrow-wrap.down figure {      background-image: url(sprites.png);
      background-repeat: no-repeat;
      background-position: -19px -227px;
      display: block;
      height: 9px;
      width: 14px;}    @media all and (
      -webkit-min-device-pixel-ratio: 2) {      #menu nav>ul>li .scroll-indicator .arrow-wrap.down figure {          background-image: url(sprites_2x.png);
      background-size: 500px 500px;}  }    #menu
      nav>ul>li .scroll-indicator.up .arrow-wrap.down {      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      left: 100%;}    #menu
      nav>ul>li .scroll-indicator.both {      width: 80px;
      margin-left: -40px;}    #menu
      nav>ul>li .scroll-indicator.both .arrow-wrap {      width: 50%;
      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;}    #menu
      nav>ul>li .scroll-indicator.both .arrow-wrap.down {      left: 50%;}    #menu
      nav>ul>li .scroll-indicator.down .arrow-wrap.up {      left: -100%;
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;}    #menu
      nav>ul>li .scroll-indicator.down .arrow-wrap.down {      left: 0;}    @media (
      max-width: 980px) {      #menu nav>ul .nested-menu .menu-items .sub-sections p {          font-size: 16px;}  }    @media (
      max-width: 880px) {      #menu-background {          height: 60px;}      #menu-button {
      top: 15px;}      #menu-button .scale-wrapper {
      -moz-transform: scale(0.75);
      -ms-transform: scale(0.75);
      -webkit-transform: scale(0.75);
      transform: scale(0.75);}      #menu {
      font-size: 12px;}      #menu nav>ul {
      width: 100%;
      border-top: 59px solid #000222;}      #menu nav>ul .title-bar,      #menu nav>ul .nested-menu,      #menu nav>ul .scroll-indicator {
      display: none;}      #menu nav>ul>li {
      width: 100%;
      float: none;
      height: 25%;}      #menu nav>ul>li .description {
      padding: 0 10%;}      #menu nav>ul>li .description hgroup {
      height: 100%;}      #menu nav>ul>li .description hgroup .table-cell {
      vertical-align: middle;}      #menu nav>ul>li .description hgroup h1 {
      font-size: 30px;}      #menu nav>ul>li:last-child {
      border-bottom: 0 none;}      #menu nav>ul>li hgroup hr,      #menu nav>ul>li hgroup+p {
      display: none;}  }    .page-footer {
      height: 500px;
      width: 100%;
      padding-bottom: 5px;
      background-color: #000222;
      overflow: hidden;
      width: 100%;
      position: relative;
      min-height: 330px;}    .page-footer .footer-wrapper {
      overflow: hidden;      *
      zoom: 1;
      top: 10%;
      overflow: visible;}    .page-footer .footer-wrapper>
      div {      float: left;}    .page-footer .info {
      width: 66%;
      position: relative;
      padding-left: 60px;}    .page-footer .info:before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      margin-top: -20px;
      width: 41px;
      height: 39px;
      background: url(logo.png) left top no-repeat;
      background-size: 41px 78px;
      text-indent: -119988px;
      overflow: hidden;
      text-align: left;
      text-transform: capitalize;
      -moz-transition: background 300ms;
      -webkit-transition: background 300ms;
      transition: background 300ms;}    .page-footer .info:before.gradient {
      background-position: left bottom;}    .page-footer .info
      a {      text-decoration: none;
      font-family: "adobe-garamond-pro", serif;
      font-weight: 400;
      font-style: italic;
      color: white;
      font-size: 20px;
      line-height: 24px;}    .page-footer .copyright {
      position: absolute;
      bottom: 30px;
      font-size: 14px;
      color: #505267;
      width: 820px;
      margin-left: -410px;
      left: 50%;
      display: block;}    .page-footer .share.desktop {
      display: block;
      width: 33.333%;}    .page-footer .share.mobile {
      display: none;}    .page-footer .share>
      ul {      overflow: hidden;      *
      zoom: 1;
      overflow: visible;}    .page-footer .share>
      ul li {      width: 20%;
      height: 40px;
      float: left;
      position: relative;
      cursor: pointer;}    .page-footer .share>
      ul li .background {      position: absolute;
      top: 0;
      left: 50%;
      margin-left: -21px;
      width: 40px;
      height: 40px;
      -moz-border-radius: 20px;
      -webkit-border-radius: 20px;
      border-radius: 20px;
      -moz-transform: scale(0);
      -ms-transform: scale(0);
      -webkit-transform: scale(0);
      transform: scale(0);
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      -moz-transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
      -webkit-transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
      transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
      z-index: 1;}    .page-footer .share>
      ul li.enable-hover:hover,  .page-footer .share>ul li.mobile-active {      -webkit-user-select: none;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent;}    .page-footer .share>
      ul li.enable-hover:hover .background,  .page-footer .share>ul li.mobile-active .background {      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -webkit-transform: scale(1);
      transform: scale(1);
      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;}    .page-footer .share>
      ul li a {      position: absolute;
      text-decoration: none;
      margin: auto;
      width: 100%;
      height: 100%;
      z-index: 2;}    .page-footer .share>
      ul li a:after {      top: 50%;
      left: 50%;
      position: absolute;
      content: "";
      display: block;
      margin: auto;}    .page-footer .share>
      ul li.dribbble .background {      background-color: #de5184;}    .page-footer .share>
      ul li.dribbble a:after {      margin: -11px 0 0 -11px;
      background-image: url(sprites.png);
      background-repeat: no-repeat;
      background-position: 0 -56px;
      display: block;
      height: 21px;
      width: 21px;}    @media all and (
      -webkit-min-device-pixel-ratio: 2) {      .page-footer .share>ul li.dribbble a:after {          background-image: url(sprites_2x.png);
      background-size: 500px 500px;}  }    .page-footer .share>
      ul li.facebook .background {      background-color: #4363a1;}    .page-footer .share>
      ul li.facebook a:after {      margin: -8px 0 0 -5px;
      background-image: url(sprites.png);
      background-repeat: no-repeat;
      background-position: -21px -56px;
      display: block;
      height: 16px;
      width: 9px;}    @media all and (
      -webkit-min-device-pixel-ratio: 2) {      .page-footer .share>ul li.facebook a:after {          background-image: url(sprites_2x.png);
      background-size: 500px 500px;}  }    .page-footer .share>
      ul li.twitter .background {      background-color: #2ea3de;}    .page-footer .share>
      ul li.twitter a:after {      margin: -7px 0 0 -8px;
      background-image: url(sprites.png);
      background-repeat: no-repeat;
      background-position: -30px -56px;
      display: block;
      height: 14px;
      width: 16px;}    @media all and (
      -webkit-min-device-pixel-ratio: 2) {      .page-footer .share>ul li.twitter a:after {          background-image: url(sprites_2x.png);
      background-size: 500px 500px;}  }    .page-footer .share>
      ul li.instagram .background {      background-color: #c63d99;}    .page-footer .share>
      ul li.instagram a:after {      background-image: url(social-icons/instagram.svg);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      margin: -12px 0 0 -12px;
      width: 22px;
      height: 22px;}    .page-footer .share>
      ul li.medium .background {      background-color: #00ab6c;}    .page-footer .share>
      ul li.medium a:after {      background-image: url(social-icons/medium.svg);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      margin: -10px 0 0 -12px;
      width: 22px;
      height: 19px;}    .page-footer .form-wrapper {
      top: 23%;
      margin-top: -62px;}    .page-footer .form-wrapper
      h2 {      color: white;
      padding-bottom: 23px;}    .page-footer .form-wrapper
      form {      width: 100%;}    .page-footer .form-wrapper
      form .email {      display: inline-block;
      float: left;
      width: calc(100% - 215px);
      height: 50px;
      border: 2px solid #505267;
      border-radius: 5px 0 0 5px;
      background-color: #000222;
      padding-left: 17px;
      font-family: "Conv_CircularStd-Book", Helvetica, sans-serif;
      font-size: 1.8em;
      color: #505267;
      -moz-transition: all 200ms;
      -webkit-transition: all 200ms;
      transition: all 200ms;}    .page-footer .form-wrapper
      form .email:focus {      border-color: white;
      color: white;}    .page-footer .form-wrapper
      form .email:focus+.button {      border-color: white;
      background-color: white;}    .page-footer .form-wrapper
      form .email:focus+.button.enable-hover:hover {      color: #ff1353;}    .page-footer .form-wrapper
      form .email:focus.value-error {      color: #ff1353;}    .page-footer .form-wrapper
      form .email::-webkit-input-placeholder {      color: #505267;}    .page-footer .form-wrapper
      form .email:-moz-placeholder {      color: #505267;}    .page-footer .form-wrapper
      form .email::-moz-placeholder {      color: #505267;}    .page-footer .form-wrapper
      form .email:-ms-input-placeholder {      color: #505267;}    .page-footer .form-wrapper
      form .button {      display: inline-block;
      width: 215px;
      height: 50px;
      background-color: #505267;
      border: 2px solid #505267;
      border-left: none;
      border-radius: 0 5px 5px 0;
      font-family: "Conv_CircularStd-Black", Helvetica, sans-serif;
      color: #000222;
      line-height: 46px;
      text-align: center;
      font-size: 1.3em;
      text-transform: uppercase;
      cursor: pointer;
      -moz-transition: all 200ms;
      -webkit-transition: all 200ms;
      transition: all 200ms;}    @media (
      max-width: 880px) {      .page-footer {          min-height: 500px;}      .page-footer .footer-wrapper {
      top: 29px;}      .page-footer .info {
      width: 100%;
      padding-left: 0;}      .page-footer .info:before {
      right: 0;
      left: auto;
      margin-top: auto;
      top: 0;
      width: 41px;
      height: 39px;
      background: url(logo.png) left top no-repeat;
      background-size: 41px 78px;
      text-indent: -119988px;
      overflow: hidden;
      text-align: left;
      text-transform: capitalize;
      -moz-transition: background 300ms;
      -webkit-transition: background 300ms;
      transition: background 300ms;
      -moz-transform: scale(0.75, 0.75);
      -ms-transform: scale(0.75, 0.75);
      -webkit-transform: scale(0.75, 0.75);
      transform: scale(0.75, 0.75);}      .page-footer .info:before.gradient {
      background-position: left bottom;}      .page-footer .info a {
      font-size: 16px;
      line-height: 1.1em;}      .page-footer .copyright {
      bottom: 40px;
      width: 100%;
      margin-left: 0;
      left: 0;
      padding: 0 16px;}      .page-footer .copyright .mobile-break {
      display: none;}      .page-footer .share.desktop {
      display: none;}      .page-footer .share.mobile {
      display: block;
      width: 100%;
      position: absolute;
      bottom: 90px;}      .page-footer .form-wrapper {
      margin-top: -52px;}      .page-footer .form-wrapper h2 {
      padding-bottom: 21px;
      font-size: 20px;}      .page-footer .form-wrapper form .email,      .page-footer .form-wrapper form .button {
      display: block;
      width: 100%;
      float: none;
      border-radius: 5px;}      .page-footer .form-wrapper form .email {
      margin-bottom: 5px;}      .page-footer .form-wrapper form .button {
      border-left: 2px solid #505267;}  }    @media (
      min-width: 540px) and (max-width: 880px) {      .page-footer .copyright {          padding: 0 40px !important;}  }    .marquee {
      padding: 0px 0px 0px 0;
      background-color: transparent;  }    .marquee
      h1 {      font-size: 80px;
      line-height: 101px;
      font-family: Oswald;
      margin-bottom: 20px !important;
      /*text-transform: capitalize;*/  }    .marquee .progress {
      font-family: Oswald;
      font-weight: 700;
      font-style: normal;
      font-size: 15px;
      text-transform: capitalize;
      color: #ff1353;
      display: inline-block;
      padding: 37px 0;
      background: transparent;
      border: none;
      box-shadow: none;  }    .marquee .progress:after {
      content: "";
      display: block;
      height: 2px;
      background-color: #ff1353;
      width: 100px;
      display: inline-block;
      vertical-align: middle;
      margin: 0 0 1px 10px;}    .marquee
      p {      font-family: Oswald !important;
      /* font-weight: 400;       font-style: italic;*/
      font-size: 19px;
      color: #3b3b3e;
      /* line-height: 48px; */
      text-align: justify;  }    .marquee
      p a {      text-decoration: none;
      color: inherit;
      z-index: 999999999999999999999999999999999999999999;  }    @media (
      max-width: 880px) {      .marquee {          padding: 89px 0 54px;}      .marquee h1 {
      font-size: 30px;
      line-height: 40px;}      .marquee .progress {
      font-size: 10px;
      padding: 19px 0;}      .marquee p {
      font-size: 22px;
      line-height: 25px;}  }    .info-list>
      ul li {      position: relative;
      width: 100%;
      cursor: pointer;
      z-index: 0;}    .info-list>
      ul li a {      text-decoration: none;}    .info-list>
      ul li .canvas-background {      z-index: 2;
      height: calc(100% + 2px);
      height: -webkit-calc(100% + 2px);
      height: -moz-calc(100% + 2px);
      height: -o-calc(100% + 2px);
      -moz-backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -moz-transform-style: preserve-3d;
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;}    .info-list>
      ul li .canvas-background .stalker-wrap {      opacity: 0 !important;
      -moz-transition: opacity 200ms;
      -webkit-transition: opacity 200ms;
      transition: opacity 200ms;
      -moz-transition-delay: 0;
      -webkit-transition-delay: 0;
      transition-delay: 0;
      -moz-backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -moz-transform-style: preserve-3d;
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;}    .info-list>
      ul li .gradient-hover {      position: absolute;
      width: 100%;
      left: 0;
      -moz-transition: all 200ms;
      -webkit-transition: all 200ms;
      transition: all 200ms;
      background-color: red;
      -moz-transform: scaleY(0);
      -ms-transform: scaleY(0);
      -webkit-transform: scaleY(0);
      transform: scaleY(0);
      z-index: 1;
      background-image: -moz-linear-gradient(left, #ff214b 0%, #f25632 100%);
      background-image: -webkit-linear-gradient(left, #ff214b 0%, #f25632 100%);
      background-image: linear-gradient(to right, #ff214b 0%, #f25632 100%);}    .info-list>
      ul li .gradient-hover.gradient-1 {      top: 0;
      bottom: 50%;
      -moz-transform-origin: 50% 100%;
      -ms-transform-origin: 50% 100%;
      -webkit-transform-origin: 50% 100%;
      transform-origin: 50% 100%;}    .info-list>
      ul li .gradient-hover.gradient-2 {      top: 50%;
      bottom: -2px;
      -moz-transform-origin: 50% 0;
      -ms-transform-origin: 50% 0;
      -webkit-transform-origin: 50% 0;
      transform-origin: 50% 0;}    .info-list>
      ul li.enable-hover:hover,  .info-list>ul li.mobile-active {      -webkit-user-select: none;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent;
      z-index: 1;}    .info-list>
      ul li.enable-hover:hover .gradient-hover,  .info-list>ul li.mobile-active .gradient-hover {      -moz-transition-duration: 300ms;
      -webkit-transition-duration: 300ms;
      transition-duration: 300ms;
      -moz-transform: scaleY(1);
      -ms-transform: scaleY(1);
      -webkit-transform: scaleY(1);
      transform: scaleY(1);}    .info-list>
      ul li.enable-hover:hover .constrain,  .info-list>ul li.mobile-active .constrain {      -moz-transition-duration: 300ms;
      -webkit-transition-duration: 300ms;
      transition-duration: 300ms;
      -moz-transition-delay: 0;
      -webkit-transition-delay: 0;
      transition-delay: 0;
      border-color: transparent !important;}    .info-list>
      ul li.enable-hover:hover .constrain span,  .info-list>ul li.enable-hover:hover .constrain p,  .info-list>ul li.mobile-active .constrain span,  .info-list>ul li.mobile-active .constrain p {      -moz-transition-duration: 0;
      -webkit-transition-duration: 0;
      transition-duration: 0;
      -moz-transition-delay: 0;
      -webkit-transition-delay: 0;
      transition-delay: 0;
      color: white;}    .info-list>
      ul li.enable-hover:hover .canvas-background .stalker-wrap,  .info-list>ul li.mobile-active .canvas-background .stalker-wrap {      opacity: 1 !important;
      -moz-transition-duration: 600ms;
      -webkit-transition-duration: 600ms;
      transition-duration: 600ms;
      -moz-transition-delay: 300ms;
      -webkit-transition-delay: 300ms;
      transition-delay: 300ms;}    .info-list>
      ul li .constrain {      padding: 23px 0;
      font-size: 24px;
      color: #737380;
      border-top: 2px solid #e9ebf0;
      position: relative;
      z-index: 3;
      display: table !important;
      -moz-transition: border-color 100ms 100ms;
      -webkit-transition: border-color 100ms;
      -webkit-transition-delay: 100ms;
      transition: border-color 100ms 100ms;}    .info-list>
      ul li .constrain span {      -moz-transition: color 100ms 100ms;
      -webkit-transition: color 100ms;
      -webkit-transition-delay: 100ms;
      transition: color 100ms 100ms;}    .info-list>
      ul li .constrain p {      -moz-transition: color 100ms 100ms;
      -webkit-transition: color 100ms;
      -webkit-transition-delay: 100ms;
      transition: color 100ms 100ms;}    .info-list>
      ul li .constrain>* {      display: table-cell !important;
      float: none !important;
      vertical-align: middle !important;}    .info-list>
      ul li:last-child .constrain {      border-bottom: 2px solid #e9ebf0;}    .info-list .constrain>.pill {
      margin-top: 38px;}    .info-list .news-list
      li .date {      width: 10%;}    .info-list .news-list
      li p {      padding-left: 20px;
      width: 90%;}    @media (
      max-width: 880px) {      .info-list>ul {          padding-bottom: 20px;}      .info-list>ul>li .constrain {
      padding: 14px 16px;
      font-size: 16px;}      .info-list>ul>li h2,      .info-list>ul>li .pill,      .info-list>ul>li nav,      .info-list>ul>li p {
      padding-left: 16px;
      padding-right: 16px;}      .info-list .constrain>.pill {
      margin-top: 20px;}      .info-list .news-list li .date,      .info-list .news-list li p {
      width: 100%;
      padding-left: 0;
      display: block !important;
      text-align: left;}      .info-list .news-list li p {
      padding-top: 4px;}  }    .info-grid {
      background-color: #f5f6fa;}    .info-grid>
      ul {      overflow: hidden;}    .info-grid>
      ul>li {      position: relative;
      width: 100%;
      max-height: 492px;
      min-height: 220px;}    .info-grid>
      ul>li>a {      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      text-decoration: none;}    .info-grid>
      ul>li.enable-hover:hover,  .info-grid>ul>li.mobile-active {      -webkit-user-select: none;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent;}    .info-grid>
      ul>li.enable-hover:hover .gradient-background,  .info-grid>ul>li.mobile-active .gradient-background {      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;}    .info-grid>
      ul>li.enable-hover:hover .wrapper h5,  .info-grid>ul>li.enable-hover:hover .wrapper h3,  .info-grid>ul>li.enable-hover:hover .wrapper p,  .info-grid>ul>li.enable-hover:hover .wrapper address,  .info-grid>ul>li.enable-hover:hover .wrapper address a,  .info-grid>ul>li.mobile-active .wrapper h5,  .info-grid>ul>li.mobile-active .wrapper h3,  .info-grid>ul>li.mobile-active .wrapper p,  .info-grid>ul>li.mobile-active .wrapper address,  .info-grid>ul>li.mobile-active .wrapper address a {      color: white !important;}    .info-grid>
      ul>li.enable-hover:hover .wrapper hr,  .info-grid>ul>li.mobile-active .wrapper hr {      background-color: white;}    .info-grid>
      ul>li.enable-hover:hover .wrapper .pill a,  .info-grid>ul>li.enable-hover:hover .wrapper .pill span,  .info-grid>ul>li.mobile-active .wrapper .pill a,  .info-grid>ul>li.mobile-active .wrapper .pill span {      color: white;
      border-color: white;}    .info-grid>
      ul>li .gradient-background {      background-image: -moz-linear-gradient(top left, #8d36a1 0%, #ec0a70 100%);
      background-image: -webkit-linear-gradient(top left, #8d36a1 0%, #ec0a70 100%);
      background-image: linear-gradient(to bottom right, #8d36a1 0%, #ec0a70 100%);
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      left: auto;
      content: "";
      display: block;
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      -moz-transition: opacity 200ms;
      -webkit-transition: opacity 200ms;
      transition: opacity 200ms;
      width: 50%;
      z-index: 1;}    .info-grid>
      ul>li .constrain {      display: table;
      height: 100%;
      overflow: visible !important;
      z-index: 2;
      overflow: hidden;      *
      zoom: 1;}    .info-grid>
      ul>li .constrain .wrapper {      display: table-cell;
      vertical-align: middle;}    .info-grid>
      ul>li .constrain .wrapper .inner {      position: relative;}    .info-grid>
      ul>li .constrain .wrapper h5,  .info-grid>ul>li .constrain .wrapper h3,  .info-grid>ul>li .constrain .wrapper p,  .info-grid>ul>li .constrain .wrapper hr,  .info-grid>ul>li .constrain .wrapper address,  .info-grid>ul>li .constrain .wrapper address a {      -moz-transition: all 200ms;
      -webkit-transition: all 200ms;
      transition: all 200ms;
      -moz-transform: translateZ(0);
      -webkit-transform: translateZ(0);
      transform: translateZ(0);}    .info-grid>
      ul>li .constrain .wrapper h5 {      font-size: 14px;
      color: #9898a6;
      padding-bottom: 10px;}    .info-grid>
      ul>li .constrain .wrapper h3 {      font-size: 40px;
      color: black;
      padding-bottom: 6px;
      margin-top: -7px;}    .info-grid>
      ul>li .constrain .wrapper address {      line-height: 25px;}    .info-grid>
      ul>li .constrain .wrapper .pill {      margin-top: 20px;}    .info-grid>
      ul>li .constrain .wrapper a {      text-decoration: none;
      color: #ff1353;}    .info-grid>
      ul>li .constrain .wrapper p,  .info-grid>ul>li .constrain .wrapper address,  .info-grid>ul>li .constrain .wrapper address a {      font-size: 20px;
      font-family: "adobe-garamond-pro", serif;
      font-weight: 400;
      font-style: italic;
      color: #9898a6;}    .info-grid>
      ul>li figure {      position: absolute;
      top: 0;
      z-index: 3;
      width: 50%;
      height: 100%;}    .info-grid>
      ul>li:nth-child(odd) .gradient-background {      left: 0;}    .info-grid>
      ul>li:nth-child(odd) figure {      right: 0;}    .info-grid>
      ul>li:nth-child(even) .gradient-background {      right: 0;}    .info-grid>
      ul>li:nth-child(even) .inner {      left: 50%;
      padding-left: 80px;}    .info-grid>
      ul>li:nth-child(even) figure {      left: 0;}    @media (
      max-width: 539px) {      .info-grid>ul>li {          height: 440px !important;}      .info-grid>ul>li figure {
      width: 100%;
      height: 220px;}      .info-grid>ul>li .gradient-background {
      width: 100%;}      .info-grid>ul>li .constrain {
      top: 220px;
      height: 220px;}      .info-grid>ul>li .constrain .inner {
      left: 0;
      padding-left: 0;}  }    @media (
      max-width: 880px) {      .info-grid>ul>li .constrain .wrapper hr {          height: 10px;
      margin: 7px 0;}      .info-grid>ul>li .constrain .wrapper h5 {
      padding-bottom: 6px;}      .info-grid>ul>li .constrain .wrapper h3 {
      font-size: 20px;
      margin: 0;}      .info-grid>ul>li .constrain .wrapper p,      .info-grid>ul>li .constrain .wrapper address,      .info-grid>ul>li .constrain .wrapper address a {
      font-size: 18px;}      .info-grid>ul>li .constrain .wrapper address {
      line-height: 22px;}      .info-grid>ul>li .constrain .wrapper .pill {
      margin-top: 16px;}  }    @media (
      min-width: 540px) and (max-width: 880px) {      .info-grid>ul>li:nth-child(even) .inner {          padding-left: 40px;}      .info-grid>ul>li .constrain .wrapper .pill {
      width: 50%;
      padding-right: 40px;}  }    #principles {
      background-color: #f5f6fa;
      padding-bottom: 80px;
      z-index: 10;}    #principles .constrain {
      overflow: visible;}    #principles .constrain>
      ol {      padding-top: 30px;}    #principles .constrain>
      ol li {      position: relative;
      width: 100%;}    #principles .constrain>
      ol li .description {      padding-bottom: 74px;
      width: 60%;}    #principles .constrain>
      ol li hgroup {      padding-bottom: 20px;}    #principles .constrain>
      ol li hgroup mark {      background-color: transparent;
      font-style: normal;
      font-size: 14px;
      border: 2px solid #5e3fa8;
      color: #5e3fa8;
      -moz-border-radius: 15px;
      -webkit-border-radius: 15px;
      border-radius: 15px;
      text-align: center;
      line-height: 26px;
      width: 30px;
      height: 30px;
      display: inline-block;
      vertical-align: middle;}    #principles .constrain>
      ol li hgroup h3 {      font-size: 24px;
      display: inline-block;
      vertical-align: middle;
      padding-left: 20px;}    #principles .constrain>
      ol li p {      color: #737380;
      font-size: 14px;
      line-height: 21px;
      padding-right: 200px;}    #principles .constrain>
      ol li figure {      position: absolute;
      top: -30px;
      right: 0;
      height: 100%;
      width: 40%;}    #principles .constrain>
      ol li figure img {      position: absolute;
      right: 4px;}    #principles .constrain>
      ol li:nth-child(1) {      z-index: 3;}    #principles .constrain>
      ol li:nth-child(1) figure img {      bottom: 50%;
      margin-bottom: -277px;}    #principles .constrain>
      ol li:nth-child(2) {      z-index: 2;}    #principles .constrain>
      ol li:nth-child(2) hgroup mark {      color: #ff1353;
      border-color: #ff1353;}    #principles .constrain>
      ol li:nth-child(2) figure img {      top: 50%;
      margin-top: -111px;}    #principles .constrain>
      ol li:nth-child(3) {      z-index: 1;}    #principles .constrain>
      ol li:nth-child(3) hgroup mark {      color: #f84235;
      border-color: #f84235;}    #principles .constrain>
      ol li:nth-child(3) figure img {      top: 50%;
      right: 0;
      margin-top: -276px;}    @media (
      min-width: 881px) {      #principles .constrain>ol li .description {          -moz-transition: all 800ms 800ms cubic-bezier(0.215, 0.61, 0.355, 1);
      -webkit-transition: all 800ms 800ms;
      -webkit-transition-delay: cubic-bezier(0.215, 0.61, 0.355, 1);
      transition: all 800ms 800ms cubic-bezier(0.215, 0.61, 0.355, 1);
      -moz-transition-property: opacity, -moz-transform;
      -webkit-transition-property: opacity, -webkit-transform;
      transition-property: opacity, transform;
      -moz-transform: translateX(-50px);
      -ms-transform: translateX(-50px);
      -webkit-transform: translateX(-50px);
      transform: translateX(-50px);
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;}      #principles .constrain>ol li:nth-child(2) .description {
      -moz-transition-delay: 900ms;
      -webkit-transition-delay: 900ms;
      transition-delay: 900ms;}      #principles .constrain>ol li:nth-child(3) .description {
      -moz-transition-delay: 1000ms;
      -webkit-transition-delay: 1000ms;
      transition-delay: 1000ms;}      #principles .constrain>ol li figure img {
      -moz-transition: margin 900ms 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: margin 900ms 200ms;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: margin 900ms 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);}      #principles.animate .constrain>ol li .description {
      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;
      -moz-transform: translateX(0);
      -ms-transform: translateX(0);
      -webkit-transform: translateX(0);
      transform: translateX(0);}      #principles.animate .constrain>ol li:nth-child(1) figure img {
      margin-bottom: -111px;}      #principles.animate .constrain>ol li:nth-child(3) figure img {
      margin-top: -111px;}  }    #photo-collage {
      width: 100%;
      height: auto;
      padding: 0;}    #photo-collage .photos-container {
      position: absolute;
      width: 100%;
      height: 100%;}    #photo-collage .photos-container
      div {      float: left;
      display: inline-block;
      position: relative;
      overflow: hidden;}    #photo-collage
      figure {      width: 100%;
      height: 100%;
      background-position: center center;
      background-size: cover;
      background-repeat: no-repeat;
      position: absolute;
      top: 0;
      left: 0;}    #photo-collage .col-1 {
      width: 25%;}    #photo-collage .col-2 {
      width: 50%;}    #photo-collage .col-4 {
      width: 100%;}    #photo-collage .row-1 {
      height: 50%;}    #photo-collage .row-2 {
      height: 100%;}    #photo-collage .collage-size
      img {      width: 100%;}    #photo-collage .collage-desktop {
      display: block;}    #photo-collage .collage-mobile,  #photo-collage .collage-mobile-small {
      display: none;}    #services {
      padding-bottom: 86px;}    #services .mobile-graphic {
      display: none;}    #services .constrain>
      ul {      overflow: hidden;      *
      zoom: 1;}    #services .constrain>
      ul h3 {      font-size: 24px;
      padding: 50px 0;}    #services .constrain>
      ul>li {      width: 33.333%;
      float: left;
      position: relative;}    #services .constrain>
      ul>li li {      left: 16px;
      padding-right: 60px;
      color: #737380;
      font-size: 14px;
      position: relative;
      line-height: 21px;
      margin-bottom: 10px;}    #services .constrain>
      ul>li li:before {      content: "?";
      display: block;
      color: #ceced9;
      font-size: 10px;
      position: absolute;
      top: 1px;
      left: -16px;}    #services .constrain .graphics {
      position: relative;
      overflow: hidden;}    #services .constrain .graphics .gradient-background {
      background-image: -moz-linear-gradient(left, #31388d 0%, #753fa9 33.333%, #ff0762 66%, #f25632 100%);
      background-image: -webkit-linear-gradient(left, #31388d 0%, #753fa9 33.333%, #ff0762 66%, #f25632 100%);
      background-image: linear-gradient(to right, #31388d 0%, #753fa9 33.333%, #ff0762 66%, #f25632 100%);
      border-right: 1px solid white;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;}    #services .constrain .graphics
      img {      position: relative;
      z-index: 2;
      width: 100%;}    #clients {
      padding-bottom: 100px;}    #clients
      ul {      overflow: hidden;      *
      zoom: 1;}    #clients
      ul li {      height: 160px;
      position: relative;
      width: 25%;
      float: left;}    #clients
      ul li figure {      background-image: url(studio/clients-sprite.jpg);
      background-repeat: no-repeat;
      background-position: 0 0;
      display: block;
      height: 160px;
      width: 200px;
      position: absolute;
      left: 50%;
      margin-left: -100px;}    @media all and (
      -webkit-min-device-pixel-ratio: 2) {      #clients ul li figure {          background-image: url(studio/clients-sprite_2x.jpg);
      background-size: 800px 480px;}  }    #clients
      ul li:nth-child(1) figure {      background-position: 0 0;}    #clients
      ul li:nth-child(2) figure {      background-position: -200px 0;}    #clients
      ul li:nth-child(3) figure {      background-position: -400px 0;}    #clients
      ul li:nth-child(4) figure {      background-position: -600px 0;}    #clients
      ul li:nth-child(5) figure {      background-position: 0 -160px;}    #clients
      ul li:nth-child(6) figure {      background-position: -200px -160px;}    #clients
      ul li:nth-child(7) figure {      background-position: -400px -160px;}    #clients
      ul li:nth-child(8) figure {      background-position: -600px -160px;}    #clients
      ul li:nth-child(9) figure {      background-position: 0 -320px;}    #clients
      ul li:nth-child(10) figure {      background-position: -200px -320px;}    #clients
      ul li:nth-child(11) figure {      background-position: -400px -320px;}    #clients
      ul li:nth-child(12) figure {      background-position: -600px -320px;}    #clients
      ul li:nth-child(13) figure {      background-position: 0 -480px;}    #clients
      ul li:nth-child(14) figure {      background-position: -200px -480px;}    #clients
      ul li:nth-child(15) figure {      background-position: -400px -480px;}    #clients
      ul li:nth-child(16) figure {      background-position: -600px -480px;}    #team {
      overflow: hidden;
      clear: both;
      padding-bottom: 45px;}    #team.particle-saga .team-wrapper
      li figure {      background-image: none !important;}    #team.particle-saga .team-members
      li .wrapper {      background-image: none !important;}    #team .constrain {
      height: 100%;}    #team .constrain .team-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 2;}    #team .constrain .team-wrapper>
      ul {      overflow: hidden;      *
      zoom: 1;}    #team .constrain .team-wrapper>
      ul>li {      padding-bottom: 50px;
      text-align: center;
      overflow: hidden;
      float: left;
      width: 33.333%;}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word1 .char1,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word1 .char1,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word1 .char1 {      -moz-transition: color 200ms 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.15s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word1 .char2,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word1 .char2,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word1 .char2 {      -moz-transition: color 200ms 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.2s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word1 .char3,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word1 .char3,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word1 .char3 {      -moz-transition: color 200ms 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.25s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word1 .char4,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word1 .char4,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word1 .char4 {      -moz-transition: color 200ms 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.3s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word1 .char5,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word1 .char5,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word1 .char5 {      -moz-transition: color 200ms 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.35s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word1 .char6,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word1 .char6,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word1 .char6 {      -moz-transition: color 200ms 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.4s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word1 .char7,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word1 .char7,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word1 .char7 {      -moz-transition: color 200ms 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.45s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word1 .char8,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word1 .char8,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word1 .char8 {      -moz-transition: color 200ms 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.5s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word1 .char9,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word1 .char9,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word1 .char9 {      -moz-transition: color 200ms 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.55s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word1 .char10,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word1 .char10,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word1 .char10 {      -moz-transition: color 200ms 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.6s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word2 .char1,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word2 .char1,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word2 .char1 {      -moz-transition: color 200ms 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.15s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word2 .char2,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word2 .char2,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word2 .char2 {      -moz-transition: color 200ms 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.2s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word2 .char3,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word2 .char3,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word2 .char3 {      -moz-transition: color 200ms 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.25s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word2 .char4,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word2 .char4,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word2 .char4 {      -moz-transition: color 200ms 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.3s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word2 .char5,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word2 .char5,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word2 .char5 {      -moz-transition: color 200ms 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.35s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word2 .char6,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word2 .char6,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word2 .char6 {      -moz-transition: color 200ms 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.4s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word2 .char7,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word2 .char7,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word2 .char7 {      -moz-transition: color 200ms 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.45s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word2 .char8,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word2 .char8,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word2 .char8 {      -moz-transition: color 200ms 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.5s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word2 .char9,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word2 .char9,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word2 .char9 {      -moz-transition: color 200ms 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.55s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word2 .char10,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word2 .char10,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word2 .char10 {      -moz-transition: color 200ms 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.6s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word3 .char1,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word3 .char1,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word3 .char1 {      -moz-transition: color 200ms 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.15s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word3 .char2,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word3 .char2,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word3 .char2 {      -moz-transition: color 200ms 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.2s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word3 .char3,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word3 .char3,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word3 .char3 {      -moz-transition: color 200ms 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.25s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word3 .char4,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word3 .char4,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word3 .char4 {      -moz-transition: color 200ms 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.3s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word3 .char5,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word3 .char5,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word3 .char5 {      -moz-transition: color 200ms 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.35s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word3 .char6,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word3 .char6,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word3 .char6 {      -moz-transition: color 200ms 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.4s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word3 .char7,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word3 .char7,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word3 .char7 {      -moz-transition: color 200ms 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.45s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word3 .char8,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word3 .char8,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word3 .char8 {      -moz-transition: color 200ms 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.5s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word3 .char9,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word3 .char9,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word3 .char9 {      -moz-transition: color 200ms 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.55s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word3 .char10,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word3 .char10,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word3 .char10 {      -moz-transition: color 200ms 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.6s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word4 .char1,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word4 .char1,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word4 .char1 {      -moz-transition: color 200ms 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.15s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word4 .char2,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word4 .char2,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word4 .char2 {      -moz-transition: color 200ms 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.2s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word4 .char3,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word4 .char3,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word4 .char3 {      -moz-transition: color 200ms 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.25s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word4 .char4,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word4 .char4,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word4 .char4 {      -moz-transition: color 200ms 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.3s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word4 .char5,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word4 .char5,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word4 .char5 {      -moz-transition: color 200ms 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.35s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word4 .char6,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word4 .char6,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word4 .char6 {      -moz-transition: color 200ms 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.4s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word4 .char7,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word4 .char7,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word4 .char7 {      -moz-transition: color 200ms 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.45s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word4 .char8,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word4 .char8,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word4 .char8 {      -moz-transition: color 200ms 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.5s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word4 .char9,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word4 .char9,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word4 .char9 {      -moz-transition: color 200ms 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.55s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word4 .char10,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word4 .char10,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word4 .char10 {      -moz-transition: color 200ms 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.6s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word5 .char1,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word5 .char1,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word5 .char1 {      -moz-transition: color 200ms 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.15s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word5 .char2,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word5 .char2,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word5 .char2 {      -moz-transition: color 200ms 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.2s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word5 .char3,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word5 .char3,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word5 .char3 {      -moz-transition: color 200ms 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.25s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word5 .char4,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word5 .char4,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word5 .char4 {      -moz-transition: color 200ms 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.3s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word5 .char5,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word5 .char5,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word5 .char5 {      -moz-transition: color 200ms 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.35s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word5 .char6,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word5 .char6,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word5 .char6 {      -moz-transition: color 200ms 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.4s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word5 .char7,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word5 .char7,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word5 .char7 {      -moz-transition: color 200ms 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.45s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word5 .char8,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word5 .char8,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word5 .char8 {      -moz-transition: color 200ms 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.5s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word5 .char9,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word5 .char9,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word5 .char9 {      -moz-transition: color 200ms 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.55s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover .text-effect .word5 .char10,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active .text-effect .word5 .char10,  #team .constrain .team-wrapper>ul>li.hover-enabled.active .text-effect .word5 .char10 {      -moz-transition: color 200ms 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 200ms 0.6s;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 200ms 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover h6.text-effect>span>span,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active h6.text-effect>span>span,  #team .constrain .team-wrapper>ul>li.hover-enabled.active h6.text-effect>span>span {      color: #ff1353;}    #team .constrain .team-wrapper>
      ul>li.hover-enabled.enable-hover:hover span.text-effect>span>span,  #team .constrain .team-wrapper>ul>li.hover-enabled.mobile-active span.text-effect>span>span,  #team .constrain .team-wrapper>ul>li.hover-enabled.active span.text-effect>span>span {      color: #000222;}    #team .constrain .team-wrapper>
      ul>li figcaption {      overflow: hidden;
      position: relative;}    #team .constrain .team-wrapper>
      ul>li a {      text-decoration: none;}    #team .constrain .team-wrapper>
      ul>li figure {      height: 260px;
      width: 100%;
      position: relative;
      overflow: hidden;
      background-repeat: no-repeat;
      background-position: center center;}    #team .constrain .team-wrapper>
      ul>li h6.text-effect {      font-size: 18px;
      color: #000222;
      padding-bottom: 6px;}    #team .constrain .team-wrapper>
      ul>li span.text-effect {      font-family: "adobe-garamond-pro", serif;
      font-weight: 400;
      font-style: italic;
      font-size: 18px;
      color: #9898a5;}    #team .constrain .team-wrapper>
      ul>li .text-effect .word1 span {      -moz-transition: color 300ms;
      -webkit-transition: color 300ms;
      transition: color 300ms;}    #team .constrain .team-wrapper>
      ul>li .text-effect .word2 span {      -moz-transition: color 300ms;
      -webkit-transition: color 300ms;
      transition: color 300ms;}    #team .constrain .team-wrapper>
      ul>li .text-effect .word3 span {      -moz-transition: color 300ms;
      -webkit-transition: color 300ms;
      transition: color 300ms;}    #team .constrain .team-wrapper>
      ul>li .text-effect .word4 span {      -moz-transition: color 300ms;
      -webkit-transition: color 300ms;
      transition: color 300ms;}    #team .constrain .team-wrapper>
      ul>li .text-effect .word5 span {      -moz-transition: color 300ms;
      -webkit-transition: color 300ms;
      transition: color 300ms;}    #team .constrain .team-detail-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 2;}    #team .constrain .team-detail-wrapper
      nav {      position: absolute;
      top: 100px;
      right: 0;
      overflow: hidden;      *
      zoom: 1;
      z-index: 2;
      width: 100%;
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      -moz-transition: opacity 700ms;
      -webkit-transition: opacity 700ms;
      transition: opacity 700ms;}    #team .constrain .team-detail-wrapper
      nav .pill {      margin-right: 10px;}    #team .constrain .team-detail-wrapper
      nav .pill a {      padding-left: 26px;
      padding-right: 26px;}    #team .constrain .team-detail-wrapper
      nav ul {      float: right;}    #team .constrain .team-detail-wrapper.active
      nav {      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;
      -moz-transition-delay: 700ms;
      -webkit-transition-delay: 700ms;
      transition-delay: 700ms;}    #team .constrain .team-detail-wrapper .team-members {
      height: 920px;
      z-index: 1;
      position: relative;}    #team .constrain .team-detail-wrapper .team-members>
      li {      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;}    #team .constrain .team-detail-wrapper .team-members>
      li .wrapper {      position: relative;
      top: 50%;
      -moz-transform: translateY(-50.1%);
      -ms-transform: translateY(-50.1%);
      -webkit-transform: translateY(-50.1%);
      transform: translateY(-50.1%);
      overflow: hidden;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      z-index: -1;}    #team .constrain .team-detail-wrapper
      h1 {      font-size: 80px;
      padding-bottom: 8px;}    #team .constrain .team-detail-wrapper .sub {
      font-size: 20px;
      font-family: "adobe-garamond-pro", serif;
      font-weight: 400;
      font-style: italic;
      color: #9898a5;}    #team .constrain .team-detail-wrapper
      hr {      width: 40px;
      height: 2px;
      border: 0 none;
      background-color: #ff1353;
      margin: 32px 0;
      text-align: left;}    #team .constrain .team-detail-wrapper
      h4 {      font-size: 24px;
      padding-bottom: 6px;}    #team .constrain .team-detail-wrapper
      h4,  #team .constrain .team-detail-wrapper h4+span {      color: #737380;}    #team .constrain .team-detail-wrapper
      h4+span {      font-size: 14px;}    #team .constrain .team-detail-wrapper .deets {
      padding-top: 64px;
      overflow: hidden;      *
      zoom: 1;}    #team .constrain .team-detail-wrapper .deets
      li {      width: 50%;
      float: left;}    #team .constrain .team-detail-wrapper .deets
      li figure {      width: 94px;
      height: 130px;
      float: left;
      background-size: 94px 520px;}    #team .constrain .team-detail-wrapper .deets
      li:nth-child(1) figure {      background-position: 0 0;}    #team .constrain .team-detail-wrapper .deets
      li:nth-child(2) figure {      background-position: 0 -130px;}    #team .constrain .team-detail-wrapper .deets
      li:nth-child(3) figure {      background-position: 0 -260px;}    #team .constrain .team-detail-wrapper .deets
      li:nth-child(4) figure {      background-position: 0 -390px;}    #team .constrain .team-detail-wrapper .deets
      li div {      width: 77%;
      float: left;
      padding-left: 30px;
      overflow: hidden;}    #team .constrain .team-detail-wrapper .deets
      li div h3 {      padding-top: 30px;
      font-size: 40px;
      color: #737380;
      height: 81px;
      opacity: 0;
      position: relative;}    #team .constrain .team-detail-wrapper .deets
      li div h3 .smaller {      font-size: 12px;
      width: auto !important;}    @media (
      max-width: 880px) {      #photo-collage .photos-container .left {          width: 100%;
      display: none;}      #photo-collage .photos-container .right {
      width: 100%;}      #photo-collage .collage-desktop {
      display: none;}      #photo-collage .collage-mobile {
      display: block;}      #principles {
      padding-bottom: 7px;}      #principles .constrain img {
      display: none !important;}      #principles .constrain>ol {
      padding-top: 0;}      #principles .constrain>ol li>.description {
      width: 100%;
      padding-bottom: 20px;}      #principles .constrain>ol li hgroup {
      padding-bottom: 13px;}      #principles .constrain>ol li hgroup mark {
      width: 20px;
      height: 20px;
      line-height: 16px;}      #principles .constrain>ol li hgroup h3 {
      font-size: 16px;
      padding-left: 8px;}      #principles .constrain>ol li p {
      padding-right: 0;}      #services {
      padding-bottom: 26px;}      #services .constrain .graphics {
      display: none;}      #services .constrain>ul {
      overflow: visible;}      #services .constrain>ul>li {
      padding: 0 0 30px 80px;
      float: none;
      width: auto;}      #services .constrain>ul>li:last-child {
      padding-bottom: 0;}      #services .constrain>ul>li li {
      margin-bottom: 0;}      #services .constrain>ul>li .mobile-graphic {
      display: block;
      position: absolute;
      bottom: 25px;}      #services .constrain>ul>li .mobile-graphic .left-mask,      #services .constrain>ul>li .mobile-graphic .right-mask {
      position: absolute;
      height: 100%;
      background-color: white;}      #services .constrain>ul>li .mobile-graphic .left-mask {
      left: 0;}      #services .constrain>ul>li .mobile-graphic .right-mask {
      right: 0;}      #services .constrain>ul>li:nth-child(1) {
      padding-top: 16px;}      #services .constrain>ul>li:nth-child(1) .mobile-graphic {
      top: 0;
      left: 0;
      width: 50px;
      background-image: -moz-linear-gradient(top, #31388d 0%, #753fa9 100%);
      background-image: -webkit-linear-gradient(top, #31388d 0%, #753fa9 100%);
      background-image: linear-gradient(to bottom, #31388d 0%, #753fa9 100%);}      #services .constrain>ul>li:nth-child(1) .mobile-graphic figure {
      background-image: url(studio/mobile/services-graphics.png);
      background-repeat: no-repeat;
      background-position: -7px 0px;
      display: block;
      height: 73px;
      width: 50px;}  }    @media all and (
      max-width: 880px) and (-webkit-min-device-pixel-ratio: 2) {      #services .constrain>ul>li:nth-child(1) .mobile-graphic figure {          background-image: url(studio/mobile/services-graphics_2x.png);
      background-size: 57px 463px;}  }    @media (
      max-width: 880px) {      #services .constrain>ul>li:nth-child(1) .mobile-graphic .left-mask,      #services .constrain>ul>li:nth-child(1) .mobile-graphic .right-mask {          top: 73px;
      width: 24px;}      #services .constrain>ul>li:nth-child(2) .mobile-graphic {
      top: -8px;
      left: -7px;
      width: 57px;
      background-image: -moz-linear-gradient(top, #753fa9 0%, #ff0762 100%);
      background-image: -webkit-linear-gradient(top, #753fa9 0%, #ff0762 100%);
      background-image: linear-gradient(to bottom, #753fa9 0%, #ff0762 100%);}      #services .constrain>ul>li:nth-child(2) .mobile-graphic figure {
      background-image: url(studio/mobile/services-graphics.png);
      background-repeat: no-repeat;
      background-position: 0 -215px;
      display: block;
      height: 53px;
      width: 57px;}  }    @media all and (
      max-width: 880px) and (-webkit-min-device-pixel-ratio: 2) {      #services .constrain>ul>li:nth-child(2) .mobile-graphic figure {          background-image: url(studio/mobile/services-graphics_2x.png);
      background-size: 57px 463px;}  }    @media (
      max-width: 880px) {      #services .constrain>ul>li:nth-child(2) .mobile-graphic .left-mask,      #services .constrain>ul>li:nth-child(2) .mobile-graphic .right-mask {          top: 53px;}      #services .constrain>ul>li:nth-child(2) .mobile-graphic .left-mask {
      width: 31px;}      #services .constrain>ul>li:nth-child(2) .mobile-graphic .right-mask {
      width: 24px;}      #services .constrain>ul>li:nth-child(3) .mobile-graphic {
      top: -11px;
      left: 1px;
      width: 49px;
      height: 49px;
      background-image: -moz-linear-gradient(top, #ff0762 0%, #f25632 100%);
      background-image: -webkit-linear-gradient(top, #ff0762 0%, #f25632 100%);
      background-image: linear-gradient(to bottom, #ff0762 0%, #f25632 100%);}      #services .constrain>ul>li:nth-child(3) .mobile-graphic figure {
      background-image: url(studio/mobile/services-graphics.png);
      background-repeat: no-repeat;
      background-position: -8px -414px;
      display: block;
      height: 49px;
      width: 49px;}  }    @media all and (
      max-width: 880px) and (-webkit-min-device-pixel-ratio: 2) {      #services .constrain>ul>li:nth-child(3) .mobile-graphic figure {          background-image: url(studio/mobile/services-graphics_2x.png);
      background-size: 57px 463px;}  }    @media (
      max-width: 880px) {      #services .constrain>ul h3 {          font-size: 16px;
      padding: 0 0 20px;}      #clients {
      padding-bottom: 32px;}      #clients .constrain h2 {
      padding-bottom: 0px;}      #clients .constrain ul li {
      width: 50%;}      #team {
      padding-bottom: 6px;}      #team .constrain .team-wrapper {
      left: 16px;
      right: 16px;}      #team .constrain .team-wrapper>ul>li {
      padding-bottom: 6px;
      height: 250px;
      width: 50%;}      #team .constrain .team-wrapper>ul>li figure {
      height: 180px;
      margin: auto;
      max-width: 260px;}      #team .constrain .team-wrapper>ul>li h6.text-effect {
      font-size: 14px;
      padding-bottom: 1px;
      padding-top: 11px;}      #team .constrain .team-wrapper>ul>li span.text-effect {
      font-size: 14px;}      #team .constrain .team-detail-wrapper {
      left: 16px;
      right: 16px;}      #team .constrain .team-detail-wrapper nav {
      top: 27px;}      #team .constrain .team-detail-wrapper nav .pill {
      width: auto;}      #team .constrain .team-detail-wrapper .team-members {
      height: 590px;}      #team .constrain .team-detail-wrapper .team-members h1 {
      font-size: 30px;
      margin-top: 80px;}      #team .constrain .team-detail-wrapper .team-members .sub {
      font-size: 14px;}      #team .constrain .team-detail-wrapper .team-members hr {
      width: 30px;
      margin: 20px 0;}      #team .constrain .team-detail-wrapper .team-members h4 {
      font-size: 14px;}      #team .constrain .team-detail-wrapper .team-members .deets {
      padding-top: 20px;}      #team .constrain .team-detail-wrapper .team-members .deets li {
      width: 100%;}      #team .constrain .team-detail-wrapper .team-members .deets li figure {
      width: 54px;
      height: 75px;
      background-size: 54px 299px;}      #team .constrain .team-detail-wrapper .team-members .deets li:nth-child(1) figure {
      background-position: 0 0;}      #team .constrain .team-detail-wrapper .team-members .deets li:nth-child(2) figure {
      background-position: 0 -75px;}      #team .constrain .team-detail-wrapper .team-members .deets li:nth-child(3) figure {
      background-position: 0 -150px;}      #team .constrain .team-detail-wrapper .team-members .deets li:nth-child(4) figure {
      background-position: 0 -225px;}      #team .constrain .team-detail-wrapper .team-members .deets li div {
      padding-left: 20px;}      #team .constrain .team-detail-wrapper .team-members .deets li div h3 {
      padding-top: 10px;
      font-size: 20px;
      height: auto;}      #team .constrain .team-detail-wrapper .team-members .deets li div h3 .smaller {
      font-size: 10px;}  }    @media (
      min-width: 540px) and (max-width: 880px) {      #team .constrain .team-wrapper,      #team .constrain .team-detail-wrapper {          left: 40px;
      right: 40px;}  }    @media (
      max-width: 539px) {      #photo-collage .photos-container .left,      #photo-collage .photos-container .right {          width: 100%;
      height: 50%;
      display: inline-block;}      #photo-collage .collage-mobile {
      display: none;}      #photo-collage .collage-mobile-small {
      display: block;
      min-height: 400px;
      max-height: 400px;}  }    .get-in-touch {
      height: 600px;
      width: 100%;
      max-height: 492px;
      min-height: 220px;}    .get-in-touch .canvas-background {
      background-image: -moz-linear-gradient(top left, #ff214b 0%, #f25632 100%);
      background-image: -webkit-linear-gradient(top left, #ff214b 0%, #f25632 100%);
      background-image: linear-gradient(to bottom right, #ff214b 0%, #f25632 100%);}    .get-in-touch .constrain {
      z-index: 2;
      position: relative;
      display: table;
      height: 100%;}    .get-in-touch .constrain .inner {
      display: table-cell;
      vertical-align: middle;}    .get-in-touch .constrain
      h2,  .get-in-touch .constrain h2+p,  .get-in-touch .constrain .pill a {      color: white;}    .get-in-touch .constrain
      h2 {      padding: 0 0 14px 0;}    .get-in-touch .constrain
      h2+p {      padding-bottom: 28px !important;}    .get-in-touch .constrain .pill
      a {      border-color: white;}    @media (
      max-width: 880px) {      .get-in-touch .constrain h2 {          padding-bottom: 10px;}      .get-in-touch .constrain h2+p {
      padding-bottom: 22px !important;}  }    #news .info-list {
      padding-top: 100px;
      padding-bottom: 100px;}    #news #twitter-feed {
      padding-top: 80px;}    #news #twitter-feed .constrain {
      overflow: visible;}    #news #twitter-feed
      h1 {      font-size: 40px;
      position: relative;
      margin-left: 50px;}    #news #twitter-feed
      h1 a {      text-decoration: none !important;
      color: inherit;}    #news #twitter-feed
      h1:before {      content: "";
      background: url(news/twitter.png) center center no-repeat;
      background-size: cover;
      width: 33px;
      height: 27px;
      position: absolute;
      left: -50px;
      top: 13px;}    #news #twitter-feed
      ul.feed {      margin-bottom: 38px;
      height: 269px;
      position: relative;}    #news #twitter-feed
      ul.feed li {      padding: 36px 48px 0 0;
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 48%;}    #news #twitter-feed
      ul.feed li span {      font-size: 11px;
      color: #9898a6;}    #news #twitter-feed
      ul.feed li p {      font-size: 24px;
      color: #737380;
      padding-top: 20px;
      overflow: hidden;
      word-wrap: break-word;}    #news #twitter-feed
      ul.feed li a {      color: #9898a6;}    #news #twitter-feed
      ul.feed li hr {      height: 2px;
      width: 88%;
      background-color: #e0e3eb;
      position: absolute;
      bottom: 0;
      margin: 0;
      border: 0 none;}    @media (
      max-width: 880px) {      #news .info-list {          padding-bottom: 20px;}      #news .info-list nav {
      padding-bottom: 40px;}      #news #twitter-feed {
      padding-top: 25px;
      padding-bottom: 30px;}      #news #twitter-feed h1 {
      font-size: 20px;
      margin-left: 33px;}      #news #twitter-feed h1:before {
      width: 21px;
      height: 18px;
      left: -33px;
      top: 3px;}      #news #twitter-feed ul.feed {
      margin-bottom: 30px;
      height: 136px;}      #news #twitter-feed ul.feed li {
      padding: 22px 0 0;
      width: 100%;}      #news #twitter-feed ul.feed li p {
      padding-top: 16px;
      font-size: 16px;}      #news #twitter-feed ul.feed li hr {
      width: 100%;}  }    #contact .info-list {
      padding-bottom: 100px;}    #contact .info-list>
      ul li p {      width: 55%;}    #contact .info-list>
      ul li span {      font-size: 18px;
      padding-top: 5px;
      width: 45%;}    @media (
      max-width: 880px) {      #contact .info-list {          padding-bottom: 40px;}      #contact .info-list>ul {
      padding-bottom: 0;}      #contact .info-list>ul .constrain p {
      padding: 0;
      font-size: 16px;
      width: 60%;}      #contact .info-list>ul .constrain span {
      font-size: 14px;
      padding-top: 2px;
      width: 40%;}  }    .article .panels {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;}    .article .panels>
      div {      width: 50%;
      height: 100%;
      position: absolute;
      top: 0;
      display: table;
      overflow: hidden;      *
      zoom: 1;}    .article .panels>
      div h1 {      font-size: 20px;
      color: white;}    .article .panels>
      div .panel-inner {      display: table-cell;
      vertical-align: middle;}    .article .panels>
      div .panel-content {      overflow: hidden;}    .article .panels>
      div.left {      left: 0;
      padding-right: 800px;
      background-color: red;}    .article .panels>
      div.left .panel-inner {      border-right: 2px solid black;}    .article .panels>
      div.left .panel-content {      float: right;}    .article .panels>
      div.right {      right: 0;
      padding-left: 800px;
      background-color: blue;}    .article .panels>
      div.right .panel-inner {      border-left: 2px solid black;}    .article .panels>
      div.right .panel-content {      float: left;}    .article .full-width-image.parallax-wrapper {
      height: 600px;
      position: relative;}    .article .no-padding-bottom {
      padding-bottom: 0px !important;}    .article .no-padding-top {
      padding-top: 0px !important;}    .article .less-padding-top {
      padding-top: 35px !important;}    .article .extra-padding-top {
      padding-top: 100px;}    .article .marquee {
      padding-bottom: 0;}    .article .marquee .date,  .article .marquee .location {
      display: block;
      padding: 39px 0 36px 6px;}    .article .marquee
      h1 {      padding-bottom: 38px;}    .article .marquee+
      section.full-width-image,  .article .marquee+section.case-study-hero {      padding-bottom: 32px;
      margin-top: 136px;}    .article .full-width-image {
      position: relative;
      padding-top: 13px;
      max-width: 1600px;
      margin: 0 auto;}    .article .full-width-image+.copy {
      padding-top: 2px;}    .article .full-width-image
      img {      width: 100%;
      height: auto;
      position: relative;}    .article .constrain .full-width-image {
      padding-bottom: 34px;}    .article .constrain .full-width-image:last-child {
      padding-bottom: 0;}    .article .constrain
      img {      position: relative;
      width: 100%;
      height: auto;}    .article .copy
      h2 {      font-size: 24px;
      padding: 56px 0 28px 0;}    .article .copy
      p {      font-family: "Conv_CircularStd-Book", Helvetica, sans-serif;
      font-style: normal;
      font-size: 18px;
      color: #737380;
      line-height: 31px;
      padding-bottom: 25px;}    .article .copy
      p.first {      padding-top: 58px;}    .article .copy
      p.last {      padding-bottom: 38px;}    .article .constrain .video {
      position: relative;
      padding-bottom: 0 !important;}    .article .constrain .video
      iframe {      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;}    .article .constrain .video
      img {      position: relative;
      z-index: 3;}    .article .constrain .video
      figure {      background-image: url(sprites.png);
      background-repeat: no-repeat;
      background-position: 0 -105px;
      display: block;
      height: 80px;
      width: 80px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -40px 0 0 -40px;
      cursor: pointer;
      -moz-transition: opacity 300ms;
      -webkit-transition: opacity 300ms;
      transition: opacity 300ms;
      z-index: 4;}    @media all and (
      -webkit-min-device-pixel-ratio: 2) {      .article .constrain .video figure {          background-image: url(sprites_2x.png);
      background-size: 500px 500px;}  }    .article .constrain .video
      figure.enable-hover:hover,  .article .constrain .video figure.mobile-active {      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=70);
      opacity: 0.7;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent;}    .article .constrain .case-study-logo {
      padding-bottom: 100px;}    .article
      section .share-items {      padding: 66px 0 100px;
      overflow: hidden;      *
      zoom: 1;}    .article
      section .share-items li {      height: 160px;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      width: 33.333%;
      float: left;}    .article
      section .share-items li figure {      position: absolute;
      top: 50%;
      left: 50%;
      text-indent: -119988px;
      overflow: hidden;
      text-align: left;
      text-transform: capitalize;}    .article
      section .share-items li.facebook {      background-color: #46629e;}    .article
      section .share-items li.facebook figure {      background-image: url(sprites.png);
      background-repeat: no-repeat;
      background-position: 0 -186px;
      display: block;
      height: 32px;
      width: 18px;
      margin: -16px 0 0 -9px;}    @media all and (
      -webkit-min-device-pixel-ratio: 2) {      .article section .share-items li.facebook figure {          background-image: url(sprites_2x.png);
      background-size: 500px 500px;}  }    .article
      section .share-items li.twitter {      background-color: #34a4dc;}    .article
      section .share-items li.twitter figure {      background-image: url(sprites.png);
      background-repeat: no-repeat;
      background-position: -18px -186px;
      display: block;
      height: 28px;
      width: 34px;
      margin: -14px 0 0 -17px;}    @media all and (
      -webkit-min-device-pixel-ratio: 2) {      .article section .share-items li.twitter figure {          background-image: url(sprites_2x.png);
      background-size: 500px 500px;}  }    .article
      section .share-items li.google-plus {      background-color: #d44837;}    .article
      section .share-items li.google-plus figure {      background-image: url(sprites.png);
      background-repeat: no-repeat;
      background-position: -53px -186px;
      display: block;
      height: 33px;
      width: 36px;
      margin: -17px 0 0 -18px;}    @media all and (
      -webkit-min-device-pixel-ratio: 2) {      .article section .share-items li.google-plus figure {          background-image: url(sprites_2x.png);
      background-size: 500px 500px;}  }    @media (
      max-width: 880px) {      .article .full-width-image.parallax-wrapper {          height: auto;}      .article .full-width-image.parallax-wrapper img {
      width: 100% !important;
      margin-left: 0 !important;
      transform: none !important;
      left: 0;}      .article .less-padding-top {
      padding-top: 35px !important;}      .article .extra-padding-top {
      padding-top: 16px !important;}      .article .marquee .date,      .article .marquee .location {
      padding: 11px 0 13px 0;}      .article .marquee h1 {
      padding-bottom: 10px;}      .article .marquee+section {
      padding-top: 26px;}      .article .marquee+section.full-width-image {
      margin-top: 50px;
      padding-top: 0px;}      .article .full-width-image {
      padding-top: 8px;}      .article .constrain .full-width-image {
      padding-bottom: 31px;}      .article .constrain .case-study-logo {
      padding-bottom: 56px;}      .article .alt-1 .constrain .full-width-image:last-child {
      padding-bottom: 26px;}      .article .copy h2 {
      font-size: 18px;
      padding: 15px 0 26px 0;}      .article .copy p {
      font-size: 14px;
      line-height: 21px;
      padding-bottom: 25px;}      .article .copy p.last {
      padding-bottom: 33px;}      .article section .share-items {
      padding: 25px 0 56px;}      .article section .share-items li {
      height: 60px;}      .article section .share-items li figure {
      -moz-transform: scale(0.5);
      -ms-transform: scale(0.5);
      -webkit-transform: scale(0.5);
      transform: scale(0.5);}  }    #preloader-overlay {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      z-index: 5;
      background-color: white;
      overflow: hidden;      *
      zoom: 1;
      display: none;}    #preloader-overlay .wrapper {
      position: relative;
      left: 50%;
      top: 50%;
      -moz-transform: translateX(-50.1%) translateY(-50.1%);
      -ms-transform: translateX(-50.1%) translateY(-50.1%);
      -webkit-transform: translateX(-50.1%) translateY(-50.1%);
      transform: translateX(-50.1%) translateY(-50.1%);
      float: left;
      text-align: center;
      display: none;}    #preloader-overlay .wrapper
      figure {      margin: 0 auto 20px;}    #preloader-overlay .wrapper
      h5 {      font-size: 14px;
      color: #9898a6;
      display: none;
      white-space: nowrap;}    #career .container .marquee+
      section {      margin-top: 83px;}    #career .container .career-wrapper .constrain>
      a {      color: #9898a6;
      font-size: 11px;
      padding-top: 72px;
      text-decoration: none;
      padding-bottom: 5px;
      border-bottom: 1px solid black;
      -moz-transition: all 250ms;
      -webkit-transition: all 250ms;
      transition: all 250ms;}    #career .container .career-wrapper .constrain>
      a.enable-hover:hover,  #career .container .career-wrapper .constrain>a.mobile-active {      border-color: transparent;
      padding-bottom: 3px;
      color: #ff1353;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent;}    #career .container .career-wrapper .constrain
      h1 {      padding: 29px 0 45px 0;}    #career .container .career-wrapper .constrain
      h2 {      font-size: 24px;
      padding: 54px 0 28px 0;}    #career .container .career-wrapper .constrain
      li,  #career .container .career-wrapper .constrain p {      font-family: "Conv_CircularStd-Book", Helvetica, sans-serif;
      font-size: 18px;
      color: #737380;
      line-height: 31px;}    #career .container .career-wrapper .constrain
      p {      font-style: normal;
      padding-bottom: 25px;}    #career .container .career-wrapper .constrain
      p.last {      padding-bottom: 38px;}    #career .container .career-wrapper .constrain
      ul {      padding: 0 28px 25px 0;}    #career .container .career-wrapper .constrain
      li {      position: relative;
      left: 28px;}    #career .container .career-wrapper .constrain
      li:before {      content: "?";
      display: block;
      color: #93939d;
      font-size: 14px;
      position: absolute;
      top: 2px;
      left: -28px;}    #career .container .career-wrapper .constrain .pill {
      padding-bottom: 93px;}    @media (
      max-width: 880px) {      #career .container .marquee+section {          margin-top: 9px;}      #career .container .career-wrapper .constrain h1 {
      padding: 10px 0 0 0;}      #career .container .career-wrapper .constrain h2 {
      font-size: 18px;
      padding: 6px 0 26px 0;}      #career .container .career-wrapper .constrain li,      #career .container .career-wrapper .constrain p {
      font-size: 14px;
      line-height: 21px;}      #career .container .career-wrapper .constrain p.last {
      padding-bottom: 33px;}      #career .container .career-wrapper .constrain ul {
      padding-bottom: 17px;}      #career .container .career-wrapper .constrain li {
      left: 18px;}      #career .container .career-wrapper .constrain li:before {
      font-size: 12px;
      position: absolute;
      top: -1px;
      left: -18px;}      #career .container .career-wrapper .constrain .pill {
      padding-bottom: 43px;}  }    #case-study .marquee {
      padding-top: 134px;}    #case-study .marquee+
      section {      padding-bottom: 0;}    #case-study .full-width-image+.copy {
      padding-top: 0;}    #case-study .full-width-image.bottom {
      padding-bottom: 41px;}    #case-study .full-width-image.bottom-large {
      overflow: hidden;
      padding-bottom: 100px;}    #case-study .full-width-image.top-none {
      padding-top: 0;}    #case-study .copy
      p.bottom {      padding-bottom: 78px;}    #case-study .copy
      p.top {      padding-top: 78px;}    #case-study .copy
      p+h2 {      padding-top: 1px;}    #case-study .copy
      h2 {      padding-top: 88px;}    #case-study .copy
      h2.bottom {      padding-bottom: 71px;}    #case-study .copy
      h2.top {      padding-top: 35px;}    #case-study .video+.case-study-logo {
      margin-top: 100px;}    #case-study .video.bottom-large {
      padding-top: 0;
      padding-bottom: 100px !important;}    #case-study .video.bottom-large
      iframe {      padding-top: 0;
      padding-bottom: 100px !important;}    #case-study .case-study-logo {
      position: relative;
      left: 50%;
      -moz-transform: translateX(-50.1%);
      -ms-transform: translateX(-50.1%);
      -webkit-transform: translateX(-50.1%);
      transform: translateX(-50.1%);
      max-width: 100%;
      width: auto;}    #case-study .alt-1 .constrain .full-width-image:last-child {
      padding-bottom: 100px;}    #case-study #bentley .alt-1 {
      background-color: #7a6f69;}    #case-study #bentley .alt-1 .copy
      h2 {      color: white;}    #case-study #bentley .alt-1 .copy
      p {      color: #aaa39f;}    #case-study #banana-republic .alt-1 {
      background-color: #f5f6fa;}    #case-study #banana-republic .case-study-logo {
      margin-top: 66px !important;}    #case-study #project-pie .alt-1 {
      background-color: #7a6f69;}    #case-study #project-pie .alt-1 .copy
      h2 {      color: white;}    #case-study #project-pie .alt-1 .copy
      p {      color: #aaa39f;}    #case-study #snapfish .alt-1 {
      background-color: #ebeef0;}    #case-study #snapfish .alt-1 .copy
      h2 {      color: black;}    #case-study #snapfish .alt-1 .copy
      p {      color: #737380;}    #case-study #snapfish .alt-2 {
      background-color: #7fcdc6;}    #case-study #snapfish .case-study-logo {
      padding-bottom: 164px;}    #case-study #snapfish .video {
      margin: 13px auto 100px;
      padding: 0;}    @media (
      max-width: 880px) {      #case-study .marquee {          padding-top: 87px;}      #case-study .full-width-image.bottom {
      padding-bottom: 28px;}      #case-study .full-width-image.bottom-large {
      padding-bottom: 60px;}      #case-study .copy p.bottom {
      padding-bottom: 37px;}      #case-study .copy p.top {
      padding-top: 37px;}      #case-study .copy p+h2 {
      padding-top: 0px;
      margin-top: -1px;}      #case-study .copy h2 {
      padding-top: 47px;}      #case-study .copy h2.top {
      padding-top: 30px;}      #case-study .copy h2.bottom {
      padding-bottom: 39px;}      #case-study .video+.case-study-logo {
      margin-top: 56px;}      #case-study .alt-1 .constrain .full-width-image:last-child {
      padding-bottom: 56px;}      #case-study .toc li {
      border: 2px solid #ebeef0 !important;
      font-size: 12px;
      line-height: 12px;}      #case-study .toc li+li {
      border-top: none !important;}      #case-study .toc li:nth-child(2n+3) {
      border-left: none !important;}      #case-study .toc li.col-1 {
      width: 50%;}      #case-study .toc li.col-2 {
      width: 100%;}      #case-study #bentley .case-study-logo {
      width: 135px;
      height: 114px;}      #case-study #banana-republic .case-study-logo {
      margin-top: 22px !important;
      width: 201px;
      height: 75px;}      #case-study #project-pie .case-study-logo {
      width: 76px;
      height: 128px;}      #case-study #snapfish .video {
      margin: 8px auto 60px;}      #case-study #snapfish .case-study-logo {
      width: 144px;
      height: 98px;
      padding-bottom: 60px;}  }    @media (
      max-width: 539px) {      #case-study .toc li:nth-child(2n+3) {          border-left: 2px solid #ebeef0 !important;}      #case-study .toc li.col-1 {
      width: 100%;}  }    #case-study.rich-case-study {
      padding-top: 0;}    #case-study.rich-case-study .marquee {
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 0;
      padding: 0;
      overflow: hidden;}    #case-study.rich-case-study .marquee+
      section {      padding-top: 0;}    #case-study.rich-case-study .marquee .heading {
      width: 100%;
      position: absolute;
      bottom: 0;
      z-index: 2;}    #case-study.rich-case-study .marquee
      h1,  #case-study.rich-case-study .marquee p {      color: white;}    #case-study.rich-case-study .marquee
      h1 {      line-height: 75px;
      padding-bottom: 18px;}    #case-study.rich-case-study .marquee
      hr {      width: 100%;
      border-color: rgba(255, 255, 255, 0.15);
      margin: 30px 0 0;}    #case-study.rich-case-study .marquee .view-project {
      cursor: pointer;
      display: inline-block;}    #case-study.rich-case-study .marquee .view-project
      span {      color: rgba(255, 255, 255, 0.3);
      display: inline-block;
      font-family: "Conv_CircularStd-Book", Helvetica, sans-serif;
      font-size: 14px;
      font-style: normal;
      line-height: 69px;
      padding-left: 16px;
      margin-top: 0;}    #case-study.rich-case-study .marquee .view-project
      figure {      display: inline-block;
      width: 9px;
      height: 16px;
      background-image: url(/assets/work/case-studies/view-project.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      vertical-align: middle;}    #case-study.rich-case-study .marquee.csspositionsticky {
      position: -webkit-sticky !important;
      position: -moz-sticky !important;
      position: -ms-sticky !important;
      position: -o-sticky !important;
      position: sticky !important;
      z-index: 9;}    @media (
      max-width: 880px) {      #case-study.rich-case-study .heading {          top: 0;
      margin-top: 106px;}      #case-study.rich-case-study .heading .constrain {
      width: 100%;
      padding: 0 20px;
      position: relative;
      text-align: center;}      #case-study.rich-case-study .heading h1 {
      font-size: 30px;
      line-height: 30px;}      #case-study.rich-case-study .heading p {
      font-size: 22px;
      line-height: 22px;}  }    #marquee-particles {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background-color: white;}    #marquee-particles
      canvas {      display: block;}    #marquee-particles.hide {
      display: none;}    .stalker-wrap {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      left: 50%;
      top: 50%;
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      -moz-transition: opacity 600ms;
      -webkit-transition: opacity 600ms;
      transition: opacity 600ms;}    .stalker-wrap.active {
      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;}    .stalker-wrap .stalker {
      height: 200%;
      position: absolute;
      width: 200%;
      -moz-transition: opacity 600ms;
      -webkit-transition: opacity 600ms;
      transition: opacity 600ms;
      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;}    .stalker-wrap .stalker.hide {
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;}    .stalker-wrap .stalker .grad {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      -moz-transition: opacity 1000ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: opacity 1000ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: opacity 1000ms cubic-bezier(0.25, 0.46, 0.45, 0.94);}    .stalker-wrap .stalker .grad.active {
      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;}    .accordion-enabled {
      position: absolute !important;
      bottom: 0 !important;
      top: auto !important;
      left: 0 !important;}    .csspositionsticky .accordion-enabled {
      position: -webkit-sticky !important;
      position: -moz-sticky !important;
      position: -ms-sticky !important;
      position: -o-sticky !important;
      position: sticky !important;}    .csspositionsticky .accordion-enabled.inactive {
      display: none !important;
      pointer-events: none !important;
      visibility: hidden !important;}    #case-study #compass-hunt .marquee .constrain.small {
      z-index: 3;}    #case-study #compass-hunt .map-svg-container {
      display: none;}    #case-study #compass-hunt .alt-1 {
      background-color: #0f283b;}    #case-study #compass-hunt .alt-1
      h2 {      color: white;}    #case-study #compass-hunt .alt-1
      p {      color: white;}    #case-study #compass-hunt .alt-2 {
      background-color: #c8eae6;}    #case-study #compass-hunt .alt-2
      h2 {      color: #535356;}    #case-study #compass-hunt .alt-2
      p {      color: #737380;}    #case-study #compass-hunt .alt-2
      figcaption {      color: #9898a6;}    #case-study #compass-hunt .alt-3 {
      background-color: #212121;}    #case-study #compass-hunt .alt-3
      h1 {      color: white;
      font-size: 48px;
      text-align: center;}    #case-study #compass-hunt .alt-3
      h1 span {      font-size: 30px;}    #case-study #compass-hunt .alt-3
      h2 {      color: white;}    #case-study #compass-hunt .alt-3
      h3 {      color: #ca6825;
      font-size: 18px;
      text-align: center;}    #case-study #compass-hunt .alt-3
      p {      color: #898989;}    #case-study #compass-hunt
      figcaption {      font-family: "adobe-garamond-pro", serif;
      font-weight: 400;
      font-style: italic;
      font-size: 18px;
      margin-top: 45px;}    #case-study #compass-hunt .video
      img {      z-index: 1 !important;}    #case-study #compass-hunt .phone-desktop {
      width: 434px;
      height: 761px;
      background-image: url(/assets/work/case-studies/compass-hunt/iphone.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      position: absolute;
      bottom: -156px;
      right: -30px;}    #case-study #compass-hunt .phone-desktop.warm .distance
      p:first-child {      opacity: 0;}    #case-study #compass-hunt .phone-desktop.warm .distance
      p:nth-child(2) {      opacity: 1;}    #case-study #compass-hunt .phone-desktop.hot .distance
      p:nth-child(2) {      opacity: 0;}    #case-study #compass-hunt .phone-desktop.hot .distance
      p:nth-child(3) {      opacity: 1;}    #case-study #compass-hunt .phone-mobile {
      display: none;}    #case-study #compass-hunt .phone-background {
      width: 295px;
      height: 521px;
      position: absolute;
      top: 84px;
      left: 65px;
      background-color: #02a8f3;
      -moz-transition: color 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: color 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: color 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #case-study #compass-hunt .app {
      width: 100%;
      height: 100%;
      background-image: url(/assets/work/case-studies/compass-hunt/app.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;}    #case-study #compass-hunt .app
      svg {      width: 88px;
      height: 51px;
      position: absolute;
      top: 177px;
      left: 50%;
      margin-left: -44px;
      -moz-transform: rotate(147deg);
      -ms-transform: rotate(147deg);
      -webkit-transform: rotate(147deg);
      transform: rotate(147deg);}    #case-study #compass-hunt .distance {
      position: absolute;
      top: 360px;
      width: 100%;}    #case-study #compass-hunt .distance
      p,  #case-study #compass-hunt .distance h4,  #case-study #compass-hunt .distance h6 {      color: white;
      text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
      text-align: center;}    #case-study #compass-hunt .distance
      p {      font-size: 12px;
      line-height: 14px;
      width: 100%;
      position: absolute;
      font-family: "proxima-nova", sans-serif;
      font-weight: 700;
      font-style: normal;
      -moz-transition: opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #case-study #compass-hunt .distance
      p:nth-child(2),  #case-study #compass-hunt .distance p:nth-child(3) {      opacity: 0;}    #case-study #compass-hunt .distance
      h4 {      font-size: 50px;
      margin-top: 14px;
      font-family: "proxima-nova", sans-serif;
      font-weight: 100;
      font-style: normal;}    #case-study #compass-hunt .distance
      h6 {      font-size: 11px;
      font-family: "proxima-nova", sans-serif;
      font-weight: 100;
      font-style: normal;}    #case-study #compass-hunt .map-outer-container {
      position: relative;
      overflow: hidden;
      width: 100%;}    #case-study #compass-hunt .map-outer-container .constrain {
      position: absolute;
      bottom: 0;
      left: 50%;
      overflow: visible;
      -moz-transform: translatex(-50%);
      -ms-transform: translatex(-50%);
      -webkit-transform: translatex(-50%);
      transform: translatex(-50%);}    #case-study #compass-hunt .map-inner-container {
      min-width: 1440px;
      min-height: 810px;
      top: 50%;
      left: 50%;
      -moz-transform: translateY(-50%) translateX(-50%);
      -ms-transform: translateY(-50%) translateX(-50%);
      -webkit-transform: translateY(-50%) translateX(-50%);
      transform: translateY(-50%) translateX(-50%);
      position: absolute;}    #case-study #compass-hunt .map-inner-container
      svg {      min-width: 1440px;
      min-height: 810px;
      position: relative;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;}    #case-study #compass-hunt .map-inner-container #map-1 .color-1 {
      stroke: #143146;}    #case-study #compass-hunt .map-inner-container #map-1 .color-2 {
      stroke: #1a3a52;}    #case-study #compass-hunt .map-inner-container #map-2 .color-1 {
      stroke: #383838;}    #case-study #compass-hunt .map-inner-container #map-2 .color-2 {
      stroke: #383838;}    #case-study #compass-hunt .map-one {
      min-height: 690px;}    #case-study #compass-hunt .map-one .top-marker {
      top: 50%;
      left: 50%;
      margin-top: -3px;
      margin-left: -3px;}    #case-study #compass-hunt .map-one .prize {
      top: 50%;
      left: 50%;
      margin-top: -15px;
      margin-left: -15px;}    #case-study #compass-hunt .prize {
      background-image: url(/assets/work/case-studies/compass-hunt/prize.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      position: absolute;
      width: 30px;
      height: 30px;}    #case-study #compass-hunt .rings:before,  #case-study #compass-hunt .rings:after {
      content: "";
      display: block;
      width: 150px;
      height: 150px;
      border: 2px solid white;
      border-radius: 50%;
      position: absolute;}    #case-study #compass-hunt .rings
      div {      border: 5px solid #87949d;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;}    #case-study #compass-hunt .compass {
      width: 250px;
      height: 250px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -125px;
      margin-left: -125px;}    #case-study #compass-hunt .compass:before,  #case-study #compass-hunt .compass:after {
      top: 48px;
      left: 48px;}    #case-study #compass-hunt .compass:before {
      -o-animation: compass-ring 2.6s ease-out infinite;
      -moz-animation: compass-ring 2.6s ease-out infinite;
      -ms-animation: compass-ring 2.6s ease-out infinite;
      -webkit-animation: compass-ring 2.6s ease-out infinite;
      animation: compass-ring 2.6s ease-out infinite;}    #case-study #compass-hunt .compass:after {
      -o-animation: compass-ring 2.6s ease-out infinite;
      -moz-animation: compass-ring 2.6s ease-out infinite;
      -ms-animation: compass-ring 2.6s ease-out infinite;
      -webkit-animation: compass-ring 2.6s ease-out infinite;
      animation: compass-ring 2.6s ease-out infinite;
      -o-animation-delay: 1.3s;
      -moz-animation-delay: 1.3s;
      -ms-animation-delay: 1.3s;
      -webkit-animation-delay: 1.3s;
      animation-delay: 1.3s;}    #case-study #compass-hunt .compass
      div {      width: 150px;
      height: 150px;
      margin-left: -75px;
      margin-top: -75px;}    #case-study #compass-hunt .compass
      svg {      width: 176px;
      height: 102px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -51px;
      margin-left: -88px;}    #case-study #compass-hunt .marker {
      width: 6px;
      height: 6px;
      position: absolute;}    #case-study #compass-hunt .marker:before,  #case-study #compass-hunt .marker:after {
      content: "";
      display: block;
      width: 24px;
      height: 24px;
      border: 1px solid white;
      border-radius: 50%;
      position: absolute;
      opacity: 0;
      top: -10px;
      left: -10px;}    #case-study #compass-hunt .marker:before {
      -o-animation: marker-ring 2.6s ease-out infinite;
      -moz-animation: marker-ring 2.6s ease-out infinite;
      -ms-animation: marker-ring 2.6s ease-out infinite;
      -webkit-animation: marker-ring 2.6s ease-out infinite;
      animation: marker-ring 2.6s ease-out infinite;}    #case-study #compass-hunt .marker:after {
      -o-animation: marker-ring 2.6s ease-out infinite;
      -moz-animation: marker-ring 2.6s ease-out infinite;
      -ms-animation: marker-ring 2.6s ease-out infinite;
      -webkit-animation: marker-ring 2.6s ease-out infinite;
      animation: marker-ring 2.6s ease-out infinite;
      -o-animation-delay: 1.3s;
      -moz-animation-delay: 1.3s;
      -ms-animation-delay: 1.3s;
      -webkit-animation-delay: 1.3s;
      animation-delay: 1.3s;}    #case-study #compass-hunt .marker
      div {      background-color: white;
      border-radius: 50%;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      -o-animation: center-pulsate 2.6s ease-out infinite;
      -moz-animation: center-pulsate 2.6s ease-out infinite;
      -ms-animation: center-pulsate 2.6s ease-out infinite;
      -webkit-animation: center-pulsate 2.6s ease-out infinite;
      animation: center-pulsate 2.6s ease-out infinite;}    #case-study #compass-hunt .marker-small {
      width: 6px;
      height: 6px;
      position: absolute;
      top: 50px;
      left: 50px;}    #case-study #compass-hunt .marker-small:before {
      content: "";
      display: block;
      width: 18px;
      height: 18px;
      border: 1px solid #4d4d4d;
      border-radius: 50%;
      position: absolute;
      top: -7px;
      left: -7px;}    #case-study #compass-hunt .marker-small
      div {      background-color: #4d4d4d;
      border-radius: 50%;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;}    #case-study #compass-hunt .overview-icons-desktop,  #case-study #compass-hunt .overview-icons-mobile {
      margin: 152px auto;}    #case-study #compass-hunt .overview-icons-desktop
      svg,  #case-study #compass-hunt .overview-icons-mobile svg {      opacity: 0;}    #case-study #compass-hunt .overview-icons-desktop.animate
      svg,  #case-study #compass-hunt .overview-icons-mobile.animate svg {      opacity: 1;
      -moz-transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #case-study #compass-hunt .overview-icons-desktop {
      margin: 152px auto;}    #case-study #compass-hunt .overview-icons-mobile {
      display: none;}    #case-study #compass-hunt .overview-social-container {
      height: 250px;
      margin: 152px auto;}    #case-study #compass-hunt .overview-social-container.animate .notification {
      -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.15);
      -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.15);
      transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.15);}    #case-study #compass-hunt .overview-social-container.animate .twitter {
      -moz-transition-delay: 0ms;
      -webkit-transition-delay: 0ms;
      transition-delay: 0ms;}    #case-study #compass-hunt .overview-social-container.animate .instagram {
      -moz-transition-delay: 800ms;
      -webkit-transition-delay: 800ms;
      transition-delay: 800ms;}    #case-study #compass-hunt .overview-social-container.animate
      svg {      -moz-transition: all 800ms 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
      -webkit-transition: all 800ms 400ms;
      -webkit-transition-delay: cubic-bezier(0.68, -0.55, 0.265, 1.55);
      transition: all 800ms 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);}    #case-study #compass-hunt .notification {
      display: inline-block;
      background-color: white;
      border-radius: 2px;
      width: 350px;
      height: 100px;
      position: relative;
      margin-top: 75px;
      padding: 14px;
      -moz-transform: scale(0);
      -ms-transform: scale(0);
      -webkit-transform: scale(0);
      transform: scale(0);}    #case-study #compass-hunt .notification:before {
      content: "";
      display: block;
      position: absolute;
      background-size: 100% 100%;
      background-repeat: no-repeat;}    #case-study #compass-hunt .notification>
      div {      position: relative;
      top: 50%;
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);}    #case-study #compass-hunt .notification
      h5 {      color: #333333;
      font-size: 14px;
      margin-bottom: 5px;
      font-family: "proxima-nova", sans-serif;
      font-weight: 700;
      font-style: normal;}    #case-study #compass-hunt .notification
      p {      color: #333333;
      display: inline-block;
      font-size: 14px;
      font-family: "proxima-nova", sans-serif;
      font-weight: 300;
      font-style: normal;}    #case-study #compass-hunt .notification
      figure {      display: inline-block;
      background-image: url(/assets/work/case-studies/compass-hunt/location-pin.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      width: 8px;
      height: 10px;
      margin-right: 7px;}    #case-study #compass-hunt .notification.twitter {
      float: left;
      padding-left: 90px;}    #case-study #compass-hunt .notification.twitter:before {
      background-image: url(/assets/work/case-studies/compass-hunt/twitter-icon.png);
      width: 32px;
      height: 25px;
      top: 36px;
      left: 33px;}    #case-study #compass-hunt .notification.instagram {
      float: right;
      padding-left: 108px;}    #case-study #compass-hunt .notification.instagram:before {
      background-image: url(/assets/work/case-studies/compass-hunt/instagram-image.png);
      width: 76px;
      height: 77px;
      top: 14px;
      left: 14px;}    #case-study #compass-hunt .notification.instagram
      p {      color: #409ad3;}    #case-study #compass-hunt .toggle {
      width: 482px;
      margin: auto;
      height: 60px;
      border: 1px solid #263c4d;
      border-radius: 2px;}    #case-study #compass-hunt .toggle
      li {      border-radius: 2px;
      color: white;
      font-size: 18px;
      line-height: 60px;
      font-family: "Conv_CircularStd-Book", Helvetica, sans-serif;
      text-align: center;
      width: 50%;
      height: 100%;
      float: left;
      cursor: pointer;}    #case-study #compass-hunt .toggle .selected {
      background-color: #04a7f3;
      -moz-box-shadow: #04a7f3 0 0 0 1px;
      -webkit-box-shadow: #04a7f3 0 0 0 1px;
      box-shadow: #04a7f3 0 0 0 1px;
      cursor: default;}    #case-study #compass-hunt .browser {
      width: 100%;
      border-radius: 2px;
      overflow: hidden;
      margin: auto;
      position: relative;
      font-size: 10px;}    #case-study #compass-hunt .browser.admin .users-browser {
      display: none;}    #case-study #compass-hunt .browser.admin .admin-browser {
      display: block;}    #case-study #compass-hunt .browser>
      div {      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;}    #case-study #compass-hunt .browser>
      div>div {      height: 100%;
      position: absolute;
      top: 0;
      padding-top: 2.2%;}    #case-study #compass-hunt .browser>
      div.animate .left-panel {      -moz-transform: translateX(0);
      -ms-transform: translateX(0);
      -webkit-transform: translateX(0);
      transform: translateX(0);
      -moz-transition: -moz-transform 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: -webkit-transform 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: transform 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #case-study #compass-hunt .browser>
      div.animate .right-panel {      width: 76%;
      -moz-transition: width 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: width 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: width 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #case-study #compass-hunt .browser
      h5 {      font-size: 1.8em;
      font-family: "proxima-nova", sans-serif;
      font-weight: 700;
      font-style: normal;}    #case-study #compass-hunt .browser
      p {      font-size: 1.4em;
      font-family: "proxima-nova", sans-serif;
      font-weight: 300;
      font-style: normal;}    #case-study #compass-hunt .browser .underline {
      color: #000221;
      text-decoration: underline;
      font-family: "proxima-nova", sans-serif;
      font-weight: 300;
      font-style: normal;}    #case-study #compass-hunt .browser .users-browser {
      display: block;}    #case-study #compass-hunt .browser .admin-browser {
      display: none;}    #case-study #compass-hunt .browser .admin-browser .avatar {
      background-image: url(/assets/work/case-studies/compass-hunt/avatar-2.png);}    #case-study #compass-hunt .browser .title-bar {
      width: 100%;
      position: absolute;
      top: 0;}    #case-study #compass-hunt .browser .left-panel {
      width: 24%;
      background-color: #01aaff;
      left: 0;
      padding-top: 29.67%;
      -moz-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);}    #case-study #compass-hunt .browser .left-panel
      h4 {      font-size: 3.6em;
      color: white;
      text-shadow: 0.02em 0.02em rgba(0, 0, 0, 0.2);
      text-align: center;
      padding-bottom: 0.27em;
      font-family: "proxima-nova", sans-serif;
      font-weight: 300;
      font-style: normal;}    #case-study #compass-hunt .browser .left-panel
      h5 {      text-align: center;
      font-size: 1.4em;}    #case-study #compass-hunt .browser .right-panel {
      width: 100%;
      background-color: #eaeaea;
      overflow: hidden;
      right: 0;}    #case-study #compass-hunt .browser .browser-logo {
      background-image: url(/assets/work/case-studies/compass-hunt/browser-logo.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      position: absolute;
      width: 60.74%;
      height: 4.98%;
      top: 8.25%;
      left: 18.14%;}    #case-study #compass-hunt .browser .avatar {
      background-image: url(/assets/work/case-studies/compass-hunt/avatar-1.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      position: absolute;
      width: 25.92%;
      height: 11.5%;
      top: 38.89%;
      left: 37.03%;}    #case-study #compass-hunt .browser .timeline {
      width: 0;
      height: 100%;
      background-color: #efefef;
      position: absolute;
      top: 0;
      left: 0;
      padding-top: 9.5%;}    #case-study #compass-hunt .browser .timeline
      ul {      width: 100%;
      height: 100%;}    #case-study #compass-hunt .browser .timeline
      li {      width: 100%;
      height: 21.24%;
      position: relative;}    #case-study #compass-hunt .browser .timeline
      li:nth-child(2) {      height: 17.41%;}    #case-study #compass-hunt .browser .timeline
      li:nth-child(3) {      height: 25.07%;}    #case-study #compass-hunt .browser .timeline
      li:nth-child(3) .timestamp {      height: 65.17%;}    #case-study #compass-hunt .browser .timeline
      li:nth-child(3) .line {      height: 0;
      top: 65.42%;}    #case-study #compass-hunt .browser .timeline
      li:nth-child(3) figure {      background-image: url(/assets/work/case-studies/compass-hunt/prize-marker.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      width: 21.66%;
      height: 56.55%;
      left: 50%;
      position: relative;
      -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);}    #case-study #compass-hunt .browser .timestamp {
      width: 100%;
      height: 42%;
      position: relative;
      top: 0;
      left: 0;
      -moz-transform: scale(0);
      -ms-transform: scale(0);
      -webkit-transform: scale(0);
      transform: scale(0);}    #case-study #compass-hunt .browser .timestamp .circle {
      width: 1em;
      height: 1em;
      border-radius: 50%;
      background-color: #05a6f3;
      left: 50%;
      position: relative;
      -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);}    #case-study #compass-hunt .browser .timestamp
      p {      color: #777777;
      padding: 4.5% 0 9.59%;
      text-align: center;}    #case-study #compass-hunt .browser .line {
      width: 0.2em;
      height: 0;
      background-color: #d7d7d7;
      left: 50%;
      top: 42%;
      position: absolute;
      -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);}    #case-study #compass-hunt .browser .social-updates {
      width: 100%;
      height: 100%;
      padding: 2.11% 2.11% 2.11% 18.58%;}    #case-study #compass-hunt .browser .social-updates
      li {      width: 100%;
      height: 20.51%;
      padding-bottom: 3.27%;}    #case-study #compass-hunt .browser .social-updates
      li>div {      display: table;
      width: 100%;
      height: 100%;
      background-color: white;
      border-radius: 2px;
      position: relative;
      padding-left: 14.64%;
      -moz-transform: scale(0);
      -ms-transform: scale(0);
      -webkit-transform: scale(0);
      transform: scale(0);}    #case-study #compass-hunt .browser .social-updates
      li>div:before {      content: "";
      display: block;
      position: absolute;
      background-image: url(/assets/work/case-studies/compass-hunt/triangle.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      width: 1.48%;
      height: 100%;
      top: 0;
      left: -1.48%;}    #case-study #compass-hunt .browser .social-updates
      li>div.blue {      background-color: #01aaff;
      padding-lefT: 5.62%;}    #case-study #compass-hunt .browser .social-updates
      li>div.blue:before {      background-image: url(/assets/work/case-studies/compass-hunt/triangle-blue.png);}    #case-study #compass-hunt .browser .social-updates
      li>div.blue h5 {      color: white;}    #case-study #compass-hunt .browser .social-updates
      li>div.blue .text-wrapper>div div {      width: 4.43%;
      height: 31%;
      right: 5.51%;
      top: 34%;}    #case-study #compass-hunt .browser .social-updates
      li>div h5 {      display: inline-block;
      color: #333333;}    #case-study #compass-hunt .browser .social-updates
      li>div h5 span {      color: #01aaff;}    #case-study #compass-hunt .browser .social-updates
      li>div h6 {      font-size: 1.2em;
      color: #d6d6d6;
      position: absolute;
      top: 9%;
      left: 1.47%;}    #case-study #compass-hunt .browser .social-updates
      li>div p {      display: inline-block;}    #case-study #compass-hunt .browser .social-updates
      li>div>figure {      width: 14.81%;
      height: 100%;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      position: absolute;
      top: 42%;
      left: 5.62%;}    #case-study #compass-hunt .browser .social-updates
      li>div .twitter {      background-image: url(/assets/work/case-studies/compass-hunt/twitter-icon.png);
      width: 3.1%;
      height: 16%;}    #case-study #compass-hunt .browser .social-updates
      li>div .instagram {      background-image: url(/assets/work/case-studies/compass-hunt/instagram-icon.png);
      width: 2.51%;
      height: 17%;}    #case-study #compass-hunt .browser .social-updates
      li>div .facebook {      background-image: url(/assets/work/case-studies/compass-hunt/facebook-icon.png);
      width: 2.51%;
      height: 17%;}    #case-study #compass-hunt .browser .social-updates
      li>div .text-wrapper {      display: table-cell;
      vertical-align: middle;}    #case-study #compass-hunt .browser .social-updates
      li>div .text-wrapper>div {      float: right;
      padding-right: 5.91%;}    #case-study #compass-hunt .browser .social-updates
      li>div .check-in-location {      color: #b2b2b2;
      position: relative;}    #case-study #compass-hunt .browser .social-updates
      li>div .check-in-location div {      background-image: url(/assets/work/case-studies/compass-hunt/location-pin-gray.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      position: absolute;
      width: 4%;
      height: 61%;
      left: -8%;
      top: 16%;}    #case-study #compass-hunt .browser .social-updates
      li>div .check-in-location p {      color: #b2b2b2;}    #case-study #compass-hunt .browser .subheader {
      width: 100%;
      height: 19.93%;
      padding: 3.18% 5.76% 0;}    #case-study #compass-hunt .browser .subheader
      h4 {      display: inline-block;
      font-size: 3em;
      color: black;
      font-family: "proxima-nova", sans-serif;
      font-weight: 300;
      font-style: normal;}    #case-study #compass-hunt .browser .subheader>
      div {      display: inline-block;
      float: right;
      width: 32%;
      height: 31.2%;}    #case-study #compass-hunt .browser .subheader>
      div ul {      width: 100%;
      height: 100%;}    #case-study #compass-hunt .browser .subheader>
      div li {      display: inline-block;
      font-size: 1.4em;
      color: black;
      text-align: right;
      font-family: "proxima-nova", sans-serif;
      font-weight: 400;
      font-style: normal;}    #case-study #compass-hunt .browser .subheader>
      div li:first-child {      color: white;
      background-color: #1596f2;
      border-radius: 2em;
      padding: 3% 10.37%;
      text-align: center;}    #case-study #compass-hunt .browser .subheader>
      div li:nth-child(2) {      width: 31.78%;}    #case-study #compass-hunt .browser .subheader>
      div li:nth-child(3) {      width: 29.95%;}    #case-study #compass-hunt .browser .graph {
      width: 100%;
      height: 80.06%;
      padding: 0 10.94%;}    #case-study #compass-hunt .browser .graph
      ul {      width: 100%;
      height: 100%;}    #case-study #compass-hunt .browser .graph
      li {      width: 25%;
      height: 100%;
      float: left;
      position: relative;
      border-right: 1px solid #dbdbdb;}    #case-study #compass-hunt .browser .graph
      li:first-child {      border-left: 1px solid #dbdbdb;}    #case-study #compass-hunt .browser .graph
      li:first-child .bar {      -moz-box-shadow: #0399e4 0 0 0 1px;
      -webkit-box-shadow: #0399e4 0 0 0 1px;
      box-shadow: #0399e4 0 0 0 1px;}    #case-study #compass-hunt .browser .graph
      li:nth-child(2) .bar {      background-color: #01aaff;
      -moz-box-shadow: #01aaff 1px 0 0;
      -webkit-box-shadow: #01aaff 1px 0 0;
      box-shadow: #01aaff 1px 0 0;}    #case-study #compass-hunt .browser .graph
      li:nth-child(4) .bar {      background-color: #c6c6c6;
      -moz-box-shadow: #c6c6c6 1px 0 0;
      -webkit-box-shadow: #c6c6c6 1px 0 0;
      box-shadow: #c6c6c6 1px 0 0;}    #case-study #compass-hunt .browser .graph .bar {
      background-color: #0399e4;
      width: 100%;
      height: 0;
      position: absolute;
      bottom: 0;
      left: 0;
      -moz-box-shadow: #0399e4 1px 0 0;
      -webkit-box-shadow: #0399e4 1px 0 0;
      box-shadow: #0399e4 1px 0 0;}    #case-study #compass-hunt .browser .graph .bar
      h5,  #case-study #compass-hunt .browser .graph .bar p {      color: white;
      text-align: center;}    #case-study #compass-hunt .browser .graph .bar
      h5 {      font-family: "proxima-nova", sans-serif;
      font-weight: 700;
      font-style: normal;}    #case-study #compass-hunt .browser .graph .bar
      p {      font-family: "proxima-nova", sans-serif;
      font-weight: 300;
      font-style: normal;}    #case-study #compass-hunt .browser .graph .bar
      div {      position: relative;
      top: 50%;
      opacity: 0;
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);}    #case-study #compass-hunt .browser .graph .bar-date {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;}    #case-study #compass-hunt .browser .graph .bar-date
      h4,  #case-study #compass-hunt .browser .graph .bar-date h6 {      text-align: center;
      font-family: "proxima-nova", sans-serif;
      font-weight: 300;
      font-style: normal;}    #case-study #compass-hunt .browser .graph .bar-date
      h4 {      font-size: 3em;
      color: #757575;}    #case-study #compass-hunt .browser .graph .bar-date
      h6 {      font-size: 1.4em;
      color: #bbbbbb;
      text-transform: uppercase;
      padding-top: 6%;}    #case-study #compass-hunt .browser .graph .bar-date.dark
      h4,  #case-study #compass-hunt .browser .graph .bar-date.dark h6 {      color: black;}    #case-study #compass-hunt .browser .users-browser.animate .timeline {
      width: 21.17%;
      -moz-transition: width 250ms 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: width 250ms 150ms;
      -webkit-transition-delay: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: width 250ms 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #case-study #compass-hunt .browser .users-browser.animate .timeline
      li:nth-child(2) .timestamp {      -moz-transition-delay: 600ms;
      -webkit-transition-delay: 600ms;
      transition-delay: 600ms;}    #case-study #compass-hunt .browser .users-browser.animate .timeline
      li:nth-child(2) .line {      -moz-transition-delay: 600ms;
      -webkit-transition-delay: 600ms;
      transition-delay: 600ms;}    #case-study #compass-hunt .browser .users-browser.animate .timeline
      li:nth-child(3) .timestamp {      -moz-transition-delay: 700ms;
      -webkit-transition-delay: 700ms;
      transition-delay: 700ms;}    #case-study #compass-hunt .browser .users-browser.animate .timeline
      li:nth-child(3) .line {      height: 22%;
      -moz-transition-delay: 700ms;
      -webkit-transition-delay: 700ms;
      transition-delay: 700ms;}    #case-study #compass-hunt .browser .users-browser.animate .timeline
      li:nth-child(4) .timestamp {      -moz-transition-delay: 800ms;
      -webkit-transition-delay: 800ms;
      transition-delay: 800ms;}    #case-study #compass-hunt .browser .users-browser.animate .timeline
      li:nth-child(4) .line {      -moz-transition-delay: 800ms;
      -webkit-transition-delay: 800ms;
      transition-delay: 800ms;}    #case-study #compass-hunt .browser .users-browser.animate .timeline
      li:nth-child(5) .timestamp {      -moz-transition-delay: 900ms;
      -webkit-transition-delay: 900ms;
      transition-delay: 900ms;}    #case-study #compass-hunt .browser .users-browser.animate .timestamp {
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -webkit-transform: scale(1);
      transform: scale(1);
      -moz-transition: -moz-transform 400ms 500ms cubic-bezier(0.175, 0.885, 0.32, 1.15);
      -webkit-transition: -webkit-transform 400ms 500ms;
      -webkit-transition-delay: cubic-bezier(0.175, 0.885, 0.32, 1.15);
      transition: transform 400ms 500ms cubic-bezier(0.175, 0.885, 0.32, 1.15);}    #case-study #compass-hunt .browser .users-browser.animate .line {
      height: 45.7%;
      -moz-transition: height 400ms 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
      -webkit-transition: height 400ms 500ms;
      -webkit-transition-delay: cubic-bezier(0.215, 0.61, 0.355, 1);
      transition: height 400ms 500ms cubic-bezier(0.215, 0.61, 0.355, 1);}    #case-study #compass-hunt .browser .users-browser.animate .social-updates
      li>div {      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -webkit-transform: scale(1);
      transform: scale(1);
      -moz-transition: -moz-transform 400ms 500ms cubic-bezier(0.175, 0.885, 0.32, 1.15);
      -webkit-transition: -webkit-transform 400ms 500ms;
      -webkit-transition-delay: cubic-bezier(0.175, 0.885, 0.32, 1.15);
      transition: transform 400ms 500ms cubic-bezier(0.175, 0.885, 0.32, 1.15);}    #case-study #compass-hunt .browser .users-browser.animate .social-updates
      li:nth-child(2)>div {      -moz-transition-delay: 600ms;
      -webkit-transition-delay: 600ms;
      transition-delay: 600ms;}    #case-study #compass-hunt .browser .users-browser.animate .social-updates
      li:nth-child(3)>div {      -moz-transition-delay: 700ms;
      -webkit-transition-delay: 700ms;
      transition-delay: 700ms;}    #case-study #compass-hunt .browser .users-browser.animate .social-updates
      li:nth-child(4)>div {      -moz-transition-delay: 800ms;
      -webkit-transition-delay: 800ms;
      transition-delay: 800ms;}    #case-study #compass-hunt .browser .users-browser.animate .social-updates
      li:nth-child(5)>div {      -moz-transition-delay: 900ms;
      -webkit-transition-delay: 900ms;
      transition-delay: 900ms;}    #case-study #compass-hunt .browser .admin-browser.animate .graph
      li:first-child .bar {      height: 77.23%;}    #case-study #compass-hunt .browser .admin-browser.animate .graph
      li:nth-child(2) .bar {      height: 53.89%;
      -moz-transition-delay: 550ms;
      -webkit-transition-delay: 550ms;
      transition-delay: 550ms;}    #case-study #compass-hunt .browser .admin-browser.animate .graph
      li:nth-child(2) div {      -moz-transition-delay: 650ms;
      -webkit-transition-delay: 650ms;
      transition-delay: 650ms;}    #case-study #compass-hunt .browser .admin-browser.animate .graph
      li:nth-child(3) .bar {      -moz-transition-delay: 700ms;
      -webkit-transition-delay: 700ms;
      transition-delay: 700ms;}    #case-study #compass-hunt .browser .admin-browser.animate .graph
      li:nth-child(3) div {      -moz-transition-delay: 800ms;
      -webkit-transition-delay: 800ms;
      transition-delay: 800ms;}    #case-study #compass-hunt .browser .admin-browser.animate .graph
      li:nth-child(4) .bar {      -moz-transition-delay: 850ms;
      -webkit-transition-delay: 850ms;
      transition-delay: 850ms;}    #case-study #compass-hunt .browser .admin-browser.animate .graph
      li:nth-child(4) div {      -moz-transition-delay: 950ms;
      -webkit-transition-delay: 950ms;
      transition-delay: 950ms;}    #case-study #compass-hunt .browser .admin-browser.animate .graph .bar {
      height: 17.7%;
      -moz-transition: height 400ms 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
      -webkit-transition: height 400ms 400ms;
      -webkit-transition-delay: cubic-bezier(0.215, 0.61, 0.355, 1);
      transition: height 400ms 400ms cubic-bezier(0.215, 0.61, 0.355, 1);}    #case-study #compass-hunt .browser .admin-browser.animate .graph .bar
      div {      opacity: 1;
      -moz-transition: opacity 250ms 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
      -webkit-transition: opacity 250ms 500ms;
      -webkit-transition-delay: cubic-bezier(0.215, 0.61, 0.355, 1);
      transition: opacity 250ms 500ms cubic-bezier(0.215, 0.61, 0.355, 1);}    #case-study #compass-hunt .image-border {
      border: 1px solid #bfdfdb;}    #case-study #compass-hunt .iphones-container {
      position: relative;}    #case-study #compass-hunt .iphones-container .iphone-asset {
      height: 100%;
      width: auto;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      position: absolute;
      top: 0;
      left: 50%;
      opacity: 0;
      -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);}    #case-study #compass-hunt .iphones-container .iphone-asset.left {
      background-image: url(/assets/work/case-studies/compass-hunt/iphones-1.png);}    #case-study #compass-hunt .iphones-container .iphone-asset.center {
      background-image: url(/assets/work/case-studies/compass-hunt/iphones-2.png);
      opacity: 1;
      z-index: 2;}    #case-study #compass-hunt .iphones-container .iphone-asset.right {
      background-image: url(/assets/work/case-studies/compass-hunt/iphones-3.png);}    #case-study #compass-hunt .iphones-container.animate .iphone-asset {
      -moz-transition: all 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: all 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: all 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #case-study #compass-hunt .iphones-container.animate .iphone-asset.left {
      opacity: 1;
      -moz-transform: translatex(-144%);
      -ms-transform: translatex(-144%);
      -webkit-transform: translatex(-144%);
      transform: translatex(-144%);}    #case-study #compass-hunt .iphones-container.animate .iphone-asset.right {
      opacity: 1;
      -moz-transform: translateX(44%);
      -ms-transform: translateX(44%);
      -webkit-transform: translateX(44%);
      transform: translateX(44%);}    #case-study #compass-hunt .caption-offset {
      margin-top: -56px;}    #case-study #compass-hunt #results
      li {      width: 50%;
      height: 540px;
      float: left;
      position: relative;
      opacity: 0;
      -moz-transition: all 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: all 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: all 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #case-study #compass-hunt #results
      li.animate {      opacity: 1;}    #case-study #compass-hunt #results
      li>div {      width: 320px;
      height: 320px;
      top: 0;
      left: 50%;
      margin-left: -160px;
      position: relative;}    #case-study #compass-hunt #results
      li h3 {      padding-top: 44px;}    #case-study #compass-hunt #results .rings:before,  #case-study #compass-hunt #results .rings:after {
      width: 236px;
      height: 236px;
      border-color: #383838;
      top: 50%;
      left: 50%;
      margin-top: -120px;
      margin-left: -120px;}    #case-study #compass-hunt #results .rings:before {
      -o-animation: sessions-ring 2.7s ease-out infinite;
      -moz-animation: sessions-ring 2.7s ease-out infinite;
      -ms-animation: sessions-ring 2.7s ease-out infinite;
      -webkit-animation: sessions-ring 2.7s ease-out infinite;
      animation: sessions-ring 2.7s ease-out infinite;
      -o-animation-delay: 0.9s;
      -moz-animation-delay: 0.9s;
      -ms-animation-delay: 0.9s;
      -webkit-animation-delay: 0.9s;
      animation-delay: 0.9s;}    #case-study #compass-hunt #results .rings:after {
      -o-animation: sessions-ring 2.7s ease-out infinite;
      -moz-animation: sessions-ring 2.7s ease-out infinite;
      -ms-animation: sessions-ring 2.7s ease-out infinite;
      -webkit-animation: sessions-ring 2.7s ease-out infinite;
      animation: sessions-ring 2.7s ease-out infinite;
      -o-animation-delay: 1.8s;
      -moz-animation-delay: 1.8s;
      -ms-animation-delay: 1.8s;
      -webkit-animation-delay: 1.8s;
      animation-delay: 1.8s;}    #case-study #compass-hunt #results .rings
      div {      border-color: #383838;
      border-width: 2px;
      width: 240px;
      height: 240px;
      margin-top: -120px;
      margin-left: -120px;
      -o-animation: sessions-ring 2.7s ease-out infinite;
      -moz-animation: sessions-ring 2.7s ease-out infinite;
      -ms-animation: sessions-ring 2.7s ease-out infinite;
      -webkit-animation: sessions-ring 2.7s ease-out infinite;
      animation: sessions-ring 2.7s ease-out infinite;}    #case-study #compass-hunt #results .rings
      svg {      width: 85px;
      height: 56px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -28px;
      margin-left: -42px;}    #case-study #compass-hunt #results .sessions-time-container .circle {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;}    #case-study #compass-hunt #results .sessions-time-container .circle>
      div {      width: 50%;
      height: 50%;
      position: absolute;
      left: 0;
      bottom: 0;
      overflow: hidden;
      -moz-transform-origin: right top;
      -ms-transform-origin: right top;
      -webkit-transform-origin: right top;
      transform-origin: right top;}    #case-study #compass-hunt #results .sessions-time-container .circle>
      div>div {      height: 200%;
      width: 200%;
      position: absolute;
      left: 0;
      bottom: 0;
      border: solid 2px transparent;
      border-left-color: #ca6825;
      border-radius: 50%;
      -moz-transform: rotate(225deg);
      -ms-transform: rotate(225deg);
      -webkit-transform: rotate(225deg);
      transform: rotate(225deg);}    #case-study #compass-hunt #results .sessions-time-container .circle-background {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      border: 2px solid transparent;
      border-bottom-color: #383838;
      border-left-color: #383838;
      border-top-color: #383838;
      border-radius: 50%;
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);}    #case-study #compass-hunt #results .sessions-time-container
      svg {      width: 59px;
      height: 57px;
      position: absolute;
      top: 50%;
      left: 50%;
      -moz-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
      -webkit-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);}    #case-study #compass-hunt #results .sessions-time-container.animate .quarter-1
      div {      -o-animation: rotate 0.25s linear forwards;
      -moz-animation: rotate 0.25s linear forwards;
      -ms-animation: rotate 0.25s linear forwards;
      -webkit-animation: rotate 0.25s linear forwards;
      animation: rotate 0.25s linear forwards;}    #case-study #compass-hunt #results .sessions-time-container.animate .quarter-2 {
      -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);}    #case-study #compass-hunt #results .sessions-time-container.animate .quarter-2
      div {      -o-animation: rotate 0.25s linear 0.25s forwards;
      -moz-animation: rotate 0.25s linear 0.25s forwards;
      -ms-animation: rotate 0.25s linear 0.25s forwards;
      -webkit-animation: rotate 0.25s linear 0.25s forwards;
      animation: rotate 0.25s linear 0.25s forwards;}    #case-study #compass-hunt #results .sessions-time-container.animate .quarter-3 {
      -moz-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);}    #case-study #compass-hunt #results .sessions-time-container.animate .quarter-3
      div {      -o-animation: rotate 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
      -moz-animation: rotate 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
      -ms-animation: rotate 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
      -webkit-animation: rotate 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
      animation: rotate 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;}    #case-study #compass-hunt #results .map-outer-container {
      height: 480px;
      opacity: 0;
      -moz-transition: opacity 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: opacity 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: opacity 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #case-study #compass-hunt #results .map-outer-container .total-users {
      width: 300px;
      height: 150px;
      position: absolute;
      top: 50%;
      left: 50%;
      -moz-transform: translateY(-50%) translateX(-50%);
      -ms-transform: translateY(-50%) translateX(-50%);
      -webkit-transform: translateY(-50%) translateX(-50%);
      transform: translateY(-50%) translateX(-50%);}    #case-study #compass-hunt #results .map-outer-container .total-users
      h1 {      font-size: 120px;}    #case-study #compass-hunt #results .map-outer-container .markers-container,  #case-study #compass-hunt #results .map-outer-container .markers-small-container {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;}    #case-study #compass-hunt #results .map-outer-container.animate {
      opacity: 1;}    #case-study #compass-hunt #results .map-outer-container.animate .marker {
      opacity: 1;
      -moz-transition: opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #case-study #compass-hunt #results .map-outer-container.animate .marker:first-child {
      -moz-transition-delay: 650ms;
      -webkit-transition-delay: 650ms;
      transition-delay: 650ms;}    #case-study #compass-hunt #results .map-outer-container.animate .marker:nth-child(2) {
      -moz-transition-delay: 280ms;
      -webkit-transition-delay: 280ms;
      transition-delay: 280ms;}    #case-study #compass-hunt #results .map-outer-container.animate .marker:nth-child(3) {
      -moz-transition-delay: 1650ms;
      -webkit-transition-delay: 1650ms;
      transition-delay: 1650ms;}    #case-study #compass-hunt #results .map-outer-container.animate .marker:nth-child(4) {
      -moz-transition-delay: 1400ms;
      -webkit-transition-delay: 1400ms;
      transition-delay: 1400ms;}    #case-study #compass-hunt #results .map-outer-container.animate .marker:nth-child(5) {
      -moz-transition-delay: 2480ms;
      -webkit-transition-delay: 2480ms;
      transition-delay: 2480ms;}    #case-study #compass-hunt #results .map-outer-container.animate .marker:nth-child(6) {
      -moz-transition-delay: 2350ms;
      -webkit-transition-delay: 2350ms;
      transition-delay: 2350ms;}    #case-study #compass-hunt #results .map-outer-container.animate .marker:nth-child(7) {
      -moz-transition-delay: 2000ms;
      -webkit-transition-delay: 2000ms;
      transition-delay: 2000ms;}    #case-study #compass-hunt #results .map-outer-container.animate .marker-small {
      opacity: 1;
      -moz-transition: opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #case-study #compass-hunt #results .marker-small {
      opacity: 0;}    #case-study #compass-hunt #results .marker-small:first-child {
      top: 50%;
      left: 15%;}    #case-study #compass-hunt #results .marker-small:nth-child(2) {
      top: 40%;
      left: 30%;}    #case-study #compass-hunt #results .marker-small:nth-child(3) {
      top: 70%;
      left: 25%;}    #case-study #compass-hunt #results .marker-small:nth-child(4) {
      top: 64%;
      left: 35%;}    #case-study #compass-hunt #results .marker-small:nth-child(5) {
      top: 70%;
      left: 70%;}    #case-study #compass-hunt #results .marker-small:nth-child(6) {
      top: 45%;
      left: 75%;}    #case-study #compass-hunt #results .marker-small:nth-child(7) {
      top: 40%;
      left: 85%;}    #case-study #compass-hunt #results .marker-small:nth-child(8) {
      top: 65%;
      left: 78%;}    #case-study #compass-hunt #results .marker-small:nth-child(9) {
      top: 40%;
      left: 60%;}    #case-study #compass-hunt #results .marker {
      opacity: 0;}    #case-study #compass-hunt #results .marker:first-child {
      top: 30%;
      left: 25%;}    #case-study #compass-hunt #results .marker:nth-child(2) {
      top: 45%;
      left: 20%;}    #case-study #compass-hunt #results .marker:nth-child(3) {
      top: 50%;
      left: 30%;}    #case-study #compass-hunt #results .marker:nth-child(4) {
      top: 65%;
      left: 75%;}    #case-study #compass-hunt #results .marker:nth-child(5) {
      top: 35%;
      left: 85%;}    #case-study #compass-hunt #results .marker:nth-child(6) {
      top: 40%;
      left: 70%;}    #case-study #compass-hunt #results .marker:nth-child(7) {
      top: 68%;
      left: 40%;}    @media (
      min-width: 881px) {      #case-study #compass-hunt .top {          padding-top: 100px;}      #case-study #compass-hunt .bottom {
      padding-bottom: 100px;}      #case-study #compass-hunt .constrain.small {
      padding: 0 20px;}      #case-study #compass-hunt .overview-social-container.animate.animate .notification {
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -webkit-transform: scale(1);
      transform: scale(1);}      #case-study #compass-hunt .overview-social-container.animate svg {
      -moz-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);}  }    @media (
      min-width: 1160px) {      #case-study #compass-hunt .constrain.small {          width: 1160px;}  }    @media (
      max-width: 1160px) {      #case-study #compass-hunt .constrain.small {          width: 100%;}      #case-study #compass-hunt .heading h1 {
      font-size: 70px;
      line-height: 88px;}      #case-study #compass-hunt .heading p {
      font-size: 35px;
      line-height: 42px;}      #case-study #compass-hunt .compass {
      width: 188px;
      height: 188px;
      margin-top: -94px;
      margin-left: -94px;}      #case-study #compass-hunt .compass div {
      width: 114px;
      height: 114px;
      margin-left: -57px;
      margin-top: -57px;}      #case-study #compass-hunt .compass svg {
      width: 132px;
      height: 78px;
      margin-top: -39px;
      margin-left: -66px;}      #case-study #compass-hunt .rings:before,      #case-study #compass-hunt .rings:after {
      width: 112px;
      height: 112px;
      top: 36px;
      left: 36px;}      #case-study #compass-hunt .notification {
      max-width: 280px;
      height: 80px;
      margin-top: 85px;}      #case-study #compass-hunt .notification h5,      #case-study #compass-hunt .notification p {
      font-size: 12px;}      #case-study #compass-hunt .notification figure {
      width: 6px;
      height: 8px;
      margin-right: 5px;}      #case-study #compass-hunt .notification.twitter {
      padding-left: 72px;}      #case-study #compass-hunt .notification.twitter:before {
      width: 24px;
      height: 20px;
      top: 28px;
      left: 26px;}      #case-study #compass-hunt .notification.instagram {
      padding-left: 86px;}      #case-study #compass-hunt .notification.instagram:before {
      width: 60px;
      height: 60px;
      top: 11px;
      left: 11px;}  }    @media (
      max-width: 980px) {      #case-study #compass-hunt .heading {          top: 0;
      margin-top: 106px;}      #case-study #compass-hunt .heading .constrain {
      width: 100%;
      padding: 0 20px;
      position: relative;
      text-align: center;}      #case-study #compass-hunt .heading h1 {
      font-size: 30px;
      line-height: 30px;}      #case-study #compass-hunt .heading p {
      font-size: 22px;
      line-height: 22px;
      color: #9898a5;}      #case-study #compass-hunt .phone-desktop {
      display: none;}      #case-study #compass-hunt .map-one {
      min-height: 530px;}      #case-study #compass-hunt .map-one .map-inner-container .marker,      #case-study #compass-hunt .map-one .map-inner-container .prize {
      display: none;}      #case-study #compass-hunt .phone-mobile {
      display: block;
      width: 280px;
      height: 268px;
      bottom: 0;
      position: relative;
      margin: auto;}      #case-study #compass-hunt .phone-mobile figure {
      display: block;
      background-image: url(/assets/work/case-studies/compass-hunt/iphone-mobile.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      width: 150px;
      height: 100%;
      margin: auto;}      #case-study #compass-hunt .phone-mobile .marker,      #case-study #compass-hunt .phone-mobile .prize {
      position: absolute;
      bottom: 0;
      display: block;}      #case-study #compass-hunt .phone-mobile .marker {
      left: 6px;
      top: 130px;}      #case-study #compass-hunt .phone-mobile .prize {
      left: auto;
      right: 6px;
      top: 120px;}      #case-study #compass-hunt .browser {
      font-size: 8px;}  }    @media (
      max-width: 880px) {      #case-study #compass-hunt .map-one,      #case-study #compass-hunt .marquee {          max-height: 686px;}      #case-study #compass-hunt figcaption {
      font-size: 14px;
      margin-top: 18px;}      #case-study #compass-hunt .caption-offset {
      margin-top: -25px;}      #case-study #compass-hunt section div:not(.copy) .top {
      padding-top: 30px;}      #case-study #compass-hunt section div:not(.copy) .bottom {
      padding-bottom: 30px;}      #case-study #compass-hunt .alt-3 h1 {
      font-size: 24px;}      #case-study #compass-hunt .alt-3 h1 span {
      font-size: 12px;}      #case-study #compass-hunt .alt-3 h3 {
      font-size: 14px;}      #case-study #compass-hunt .overview-social-container {
      margin: 30px auto;
      height: 448px;
      position: relative;}      #case-study #compass-hunt .overview-social-container.animate .notification {
      -moz-transform: translateX(-50%) scale(1);
      -ms-transform: translateX(-50%) scale(1);
      -webkit-transform: translateX(-50%) scale(1);
      transform: translateX(-50%) scale(1);}      #case-study #compass-hunt .overview-social-container.animate svg {
      -moz-transform: rotate(272deg);
      -ms-transform: rotate(272deg);
      -webkit-transform: rotate(272deg);
      transform: rotate(272deg);}      #case-study #compass-hunt .compass svg {
      -moz-transform: rotate(92deg);
      -ms-transform: rotate(92deg);
      -webkit-transform: rotate(92deg);
      transform: rotate(92deg);}      #case-study #compass-hunt .notification {
      display: block;
      width: 100%;
      margin-top: 0;
      float: none;
      position: absolute;
      left: 50%;
      -moz-transform: translateX(-50%) scale(0);
      -ms-transform: translateX(-50%) scale(0);
      -webkit-transform: translateX(-50%) scale(0);
      transform: translateX(-50%) scale(0);}      #case-study #compass-hunt .notification.twitter {
      top: 0;}      #case-study #compass-hunt .notification.instagram {
      bottom: 0;}      #case-study #compass-hunt .toggle {
      width: 100%;
      height: 40px;}      #case-study #compass-hunt .toggle li {
      font-size: 14px;
      line-height: 40px;}      #case-study #compass-hunt .browser {
      font-size: 5px;}      #case-study #compass-hunt #results li {
      width: 100%;
      height: auto;
      float: none;
      padding-bottom: 28px;}      #case-study #compass-hunt #results li>div {
      width: 280px;
      height: 280px;
      margin-left: -140px;}      #case-study #compass-hunt #results li h3 {
      padding-top: 26px;}      #case-study #compass-hunt #results .rings:before,      #case-study #compass-hunt #results .rings:after {
      width: 212px;
      height: 212px;
      top: 50%;
      left: 50%;
      margin-top: -108px;
      margin-left: -108px;}      #case-study #compass-hunt #results .rings div {
      width: 214px;
      height: 214px;
      margin-top: -107px;
      margin-left: -107px;}      #case-study #compass-hunt #results .rings svg {
      width: 75px;
      height: 49px;
      margin-top: -24px;
      margin-left: -37px;}      #case-study #compass-hunt #results .map-outer-container {
      height: 300px;}      #case-study #compass-hunt #results .map-outer-container .marker-small {
      width: 3px;
      height: 3px;}      #case-study #compass-hunt #results .map-outer-container .marker-small:before,      #case-study #compass-hunt #results .map-outer-container .marker-small:after {
      width: 9px;
      height: 10px;
      top: -4px;
      left: -4px;}      #case-study #compass-hunt #results .map-outer-container .marker-small:first-child {
      display: block;
      left: 43%;}      #case-study #compass-hunt #results .map-outer-container .marker-small:nth-child(2) {
      display: block;
      left: 50%;}      #case-study #compass-hunt #results .map-outer-container .marker-small:nth-child(3) {
      display: block;
      top: 60%;
      left: 48%;}      #case-study #compass-hunt #results .map-outer-container .marker {
      width: 3px;
      height: 3px;
      display: none;}      #case-study #compass-hunt #results .map-outer-container .marker:before,      #case-study #compass-hunt #results .map-outer-container .marker:after {
      width: 13px;
      height: 13px;
      top: -6px;
      left: -6px;}      #case-study #compass-hunt #results .map-outer-container .marker:first-child {
      display: block;
      top: 38%;
      left: 43%;}      #case-study #compass-hunt #results .map-outer-container .marker:nth-child(2) {
      display: block;
      top: 48%;
      left: 40%;}      #case-study #compass-hunt #results .map-outer-container .marker:nth-child(3) {
      display: block;
      top: 57%;
      left: 55%;}      #case-study #compass-hunt #results .map-outer-container .total-users h1 {
      font-size: 60px;}  }    @media (
      max-width: 539px) {      #case-study #compass-hunt .overview-icons-desktop {          display: none;}      #case-study #compass-hunt .overview-icons-mobile {
      margin: 50px auto;
      max-width: 253px;
      width: 100%;
      display: block;}      #case-study #compass-hunt .browser {
      font-size: 3px;}  }    #case-study #botched .alt-1 {
      background-color: #00b3c9;}    #case-study #botched .alt-1
      h2 {      color: white;}    #case-study #botched .alt-1
      p {      color: white;}    #case-study #botched .alt-2
      h2 {      color: black;}    #case-study #botched .alt-2
      p {      color: white;}    #case-study #botched .marquee {
      min-height: 570px;}    #case-study #botched .marquee
      hr {      width: 624px;}    #case-study #botched .marquee-scene {
      width: 100%;
      height: 110%;
      min-width: 1229px;
      min-height: 1272px;
      position: absolute;
      bottom: -15%;
      left: 0;
      overflow: hidden;}    @media all and (
      max-height: 770px) and (min-width: 880px) {      #case-study #botched .marquee-scene {          width: 170%;
      height: 170%;
      min-width: 0;
      min-height: 0;
      bottom: -40%;}  }    #case-study #botched .marquee-scene
      li {      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      bottom: 0;}    #case-study #botched .marquee-scene
      li img {      display: block;
      height: 100%;}    #case-study #botched .content-wrap {
      position: relative;
      z-index: 10;}    #case-study #botched .content-wrap .background {
      background-color: #f0a78d;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 8;}    #case-study #botched .content-wrap .background .gradient {
      background-image: -moz-linear-gradient(top, #fff 0%, #fff 20%, #f2b49e 80%, #f0a78d 100%);
      background-image: -webkit-linear-gradient(top, #fff 0%, #fff 20%, #f2b49e 80%, #f0a78d 100%);
      background-image: linear-gradient(to bottom, #fff 0%, #fff 20%, #f2b49e 80%, #f0a78d 100%);
      width: 100%;
      height: 1361px;
      position: relative;}    #case-study #botched .content-wrap .falling-photos {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;}    #case-study #botched .content-wrap .falling-photos
      div {      width: 80px;
      height: 80px;
      background-image: url(/assets/work/case-studies/botched/photos/botched-1.jpg);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      position: absolute;
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=80);
      opacity: 0.8;}    #case-study #botched .content-wrap .falling-photos
      div:nth-child(2) {      background-image: url(/assets/work/case-studies/botched/photos/botched-2.jpg);}    #case-study #botched .content-wrap .falling-photos
      div:nth-child(3) {      background-image: url(/assets/work/case-studies/botched/photos/botched-3.jpg);}    #case-study #botched .content-wrap .falling-photos
      div:nth-child(4) {      background-image: url(/assets/work/case-studies/botched/photos/botched-4.jpg);}    #case-study #botched .content-wrap .falling-photos
      div:nth-child(5) {      background-image: url(/assets/work/case-studies/botched/photos/botched-5.jpg);}    #case-study #botched .content-wrap .falling-photos
      div:nth-child(6) {      background-image: url(/assets/work/case-studies/botched/photos/botched-6.jpg);}    #case-study #botched .content-wrap .falling-photos
      div:nth-child(7) {      background-image: url(/assets/work/case-studies/botched/photos/botched-7.jpg);}    #case-study #botched .content-wrap .falling-photos
      div:nth-child(8) {      background-image: url(/assets/work/case-studies/botched/photos/botched-8.jpg);}    #case-study #botched .content-wrap .falling-photos
      div:nth-child(9) {      background-image: url(/assets/work/case-studies/botched/photos/botched-9.jpg);}    #case-study #botched .content-wrap .falling-photos
      div:nth-child(10) {      background-image: url(/assets/work/case-studies/botched/photos/botched-10.jpg);}    #case-study #botched .content-wrap .falling-photos
      div:nth-child(11) {      background-image: url(/assets/work/case-studies/botched/photos/botched-11.jpg);}    #case-study #botched .content-wrap .falling-photos
      div:nth-child(12) {      background-image: url(/assets/work/case-studies/botched/photos/botched-12.jpg);}    #case-study #botched .content-wrap .falling-photos
      div:nth-child(13) {      background-image: url(/assets/work/case-studies/botched/photos/botched-13.jpg);}    #case-study #botched .content-wrap .falling-photos
      div:nth-child(14) {      background-image: url(/assets/work/case-studies/botched/photos/botched-14.jpg);}    #case-study #botched .content-wrap .falling-photos
      div:nth-child(15) {      background-image: url(/assets/work/case-studies/botched/photos/botched-15.jpg);}    #case-study #botched .content-wrap .falling-photos
      div:nth-child(16) {      background-image: url(/assets/work/case-studies/botched/photos/botched-16.jpg);}    #case-study #botched .content-wrap .falling-photos
      div:nth-child(17) {      background-image: url(/assets/work/case-studies/botched/photos/botched-17.jpg);}    #case-study #botched .content-wrap .falling-photos
      div:nth-child(18) {      background-image: url(/assets/work/case-studies/botched/photos/botched-18.jpg);}    #case-study #botched .content-wrap .falling-photos
      div:nth-child(19) {      background-image: url(/assets/work/case-studies/botched/photos/botched-19.jpg);}    #case-study #botched .content-wrap .falling-photos
      div:nth-child(20) {      background-image: url(/assets/work/case-studies/botched/photos/botched-20.jpg);}    #case-study #botched .content-wrap .falling-photos
      div:nth-child(21) {      background-image: url(/assets/work/case-studies/botched/photos/botched-21.jpg);}    #case-study #botched .content-wrap .falling-photos
      div:nth-child(22) {      background-image: url(/assets/work/case-studies/botched/photos/botched-22.jpg);}    #case-study #botched .content-wrap .falling-photos
      div:nth-child(23) {      background-image: url(/assets/work/case-studies/botched/photos/botched-23.jpg);}    #case-study #botched .content-wrap .falling-photos
      div:nth-child(24) {      background-image: url(/assets/work/case-studies/botched/photos/botched-24.jpg);}    #case-study #botched .content-wrap .falling-photos
      div:nth-child(25) {      background-image: url(/assets/work/case-studies/botched/photos/botched-25.jpg);}    #case-study #botched .content-wrap .falling-photos
      div:nth-child(26) {      background-image: url(/assets/work/case-studies/botched/photos/botched-26.jpg);}    #case-study #botched .content-wrap .falling-photos
      div:nth-child(27) {      background-image: url(/assets/work/case-studies/botched/photos/botched-27.jpg);}    #case-study #botched .content-wrap .falling-photos
      div:nth-child(28) {      background-image: url(/assets/work/case-studies/botched/photos/botched-28.jpg);}    #case-study #botched .content-wrap .falling-photos
      div:nth-child(29) {      background-image: url(/assets/work/case-studies/botched/photos/botched-29.jpg);}    #case-study #botched .content-wrap .falling-photos
      div:nth-child(30) {      background-image: url(/assets/work/case-studies/botched/photos/botched-30.jpg);}    #case-study #botched .content-wrap
      section {      background-color: transparent;}    #case-study #botched .diagram {
      width: 100%;
      max-width: 1216px;
      margin: 0 auto;
      padding: 0 20px;}    #case-study #botched .diagram.transition-in #diagram-copy #thumb,  #case-study #botched .diagram.transition-in #diagram-copy #thumb-2,  #case-study #botched .diagram.transition-in #diagram-copy #thumb-3,  #case-study #botched .diagram.transition-in #diagram-copy #thumb-4,  #case-study #botched .diagram.transition-in #diagram-copy #thumb-5,  #case-study #botched .diagram.transition-in #diagram-copy #thumb-6,  #case-study #botched .diagram.transition-in #diagram-copy #dashed-line,  #case-study #botched .diagram.transition-in #diagram-copy #dashed-line-2 {
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -webkit-transform: scale(1);
      transform: scale(1);}    #case-study #botched .diagram.transition-in #diagram-copy
      text,  #case-study #botched .diagram.transition-in #diagram-copy .diagram-desktop-9,  #case-study #botched .diagram.transition-in #diagram-copy #dashed-line,  #case-study #botched .diagram.transition-in #diagram-copy #dashed-line-2 {      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;}    #case-study #botched .diagram.transition-in #red-lines #diagram-desktop-twitter,  #case-study #botched .diagram.transition-in #red-lines #diagram-desktop-fb,  #case-study #botched .diagram.transition-in #red-lines #diagram-desktop-gp {
      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;}    #case-study #botched .diagram.transition-in #diagram-copy-mobile #thumb-mobile,  #case-study #botched .diagram.transition-in #diagram-copy-mobile #thumb-mobile-2,  #case-study #botched .diagram.transition-in #diagram-copy-mobile #thumb-mobile-3,  #case-study #botched .diagram.transition-in #diagram-copy-mobile #thumb-mobile-4,  #case-study #botched .diagram.transition-in #diagram-copy-mobile #thumb-mobile-5,  #case-study #botched .diagram.transition-in #diagram-copy-mobile #thumb-mobile-6,  #case-study #botched .diagram.transition-in #diagram-copy-mobile #dashed-line-mobile,  #case-study #botched .diagram.transition-in #diagram-copy-mobile #dashed-line-mobile-2 {
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -webkit-transform: scale(1);
      transform: scale(1);}    #case-study #botched .diagram.transition-in #diagram-copy-mobile
      text,  #case-study #botched .diagram.transition-in #diagram-copy-mobile .diagram-mobile-15,  #case-study #botched .diagram.transition-in #diagram-copy-mobile #dashed-line-mobile,  #case-study #botched .diagram.transition-in #diagram-copy-mobile #dashed-line-mobile-2 {      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;}    #case-study #botched .diagram.transition-in #red-lines-mobile #diagram-mobile-twitter,  #case-study #botched .diagram.transition-in #red-lines-mobile #diagram-mobile-fb,  #case-study #botched .diagram.transition-in #red-lines-mobile #diagram-mobile-gp {
      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;}    #case-study #botched .diagram.transition-dots #red-lines
      g,  #case-study #botched .diagram.transition-dots #red-lines-mobile g {      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -webkit-transform: scale(1);
      transform: scale(1);}    #case-study #botched .diagram-desktop {
      width: 100%;
      position: relative;}    #case-study #botched .diagram-desktop
      svg {      overflow: visible;}    #case-study #botched .diagram-desktop .cls-10,  #case-study #botched .diagram-desktop .cls-2,  #case-study #botched .diagram-desktop .cls-5,  #case-study #botched .diagram-desktop .cls-8 {
      font-family: "Conv_CircularStd-Book", Helvetica, sans-serif;}    #case-study #botched #diagram-copy {
      width: 100%;}    #case-study #botched #diagram-copy
      text,  #case-study #botched #diagram-copy .diagram-desktop-9 {      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      -moz-transition: all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1000ms;
      -webkit-transition: all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition-delay: 1000ms;
      transition: all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1000ms;}    #case-study #botched #diagram-copy #thumb,  #case-study #botched #diagram-copy #thumb-2,  #case-study #botched #diagram-copy #thumb-3,  #case-study #botched #diagram-copy #thumb-4,  #case-study #botched #diagram-copy #thumb-5,  #case-study #botched #diagram-copy #thumb-6 {
      -moz-transform: scale(0);
      -ms-transform: scale(0);
      -webkit-transform: scale(0);
      transform: scale(0);
      -moz-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
      -moz-transition: all 700ms cubic-bezier(0.175, 0.885, 0.32, 1.15);
      -webkit-transition: all 700ms cubic-bezier(0.175, 0.885, 0.32, 1.15);
      transition: all 700ms cubic-bezier(0.175, 0.885, 0.32, 1.15);}    #case-study #botched #diagram-copy #thumb
      text,  #case-study #botched #diagram-copy #thumb-2 text,  #case-study #botched #diagram-copy #thumb-3 text,  #case-study #botched #diagram-copy #thumb-4 text,  #case-study #botched #diagram-copy #thumb-5 text,  #case-study #botched #diagram-copy #thumb-6 text {      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;}    #case-study #botched #diagram-copy #thumb-2 {
      -moz-transition-delay: 50ms;
      -webkit-transition-delay: 50ms;
      transition-delay: 50ms;}    #case-study #botched #diagram-copy #thumb-3 {
      -moz-transition-delay: 150ms;
      -webkit-transition-delay: 150ms;
      transition-delay: 150ms;}    #case-study #botched #diagram-copy #thumb-4 {
      -moz-transition-delay: 200ms;
      -webkit-transition-delay: 200ms;
      transition-delay: 200ms;}    #case-study #botched #diagram-copy #thumb-6 {
      -moz-transition-delay: 50ms;
      -webkit-transition-delay: 50ms;
      transition-delay: 50ms;}    #case-study #botched #diagram-copy #dashed-line,  #case-study #botched #diagram-copy #dashed-line-2 {
      -moz-transform: scale(1.2);
      -ms-transform: scale(1.2);
      -webkit-transform: scale(1.2);
      transform: scale(1.2);
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      -moz-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
      -moz-transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1) 500ms;
      -webkit-transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
      -webkit-transition-delay: 500ms;
      transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1) 500ms;}    #case-study #botched #diagram-copy #dashed-line-2 {
      -moz-transition-delay: 600ms;
      -webkit-transition-delay: 600ms;
      transition-delay: 600ms;}    #case-study #botched #red-lines {
      width: 93.70748%;
      position: absolute;
      top: 10.7632%;
      left: 6.32245%;
      pointer-events: none;}    #case-study #botched #red-lines #diagram-desktop-twitter,  #case-study #botched #red-lines #diagram-desktop-fb,  #case-study #botched #red-lines #diagram-desktop-gp {
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      -moz-transition: all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1000ms;
      -webkit-transition: all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition-delay: 1000ms;
      transition: all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1000ms;}    #case-study #botched #red-lines
      g {      -moz-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
      -moz-transform: scale(0);
      -ms-transform: scale(0);
      -webkit-transform: scale(0);
      transform: scale(0);
      -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
      -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
      transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);}    #case-study #botched .diagram-mobile {
      display: none;
      width: 100%;
      position: relative;}    #case-study #botched .diagram-mobile
      svg {      overflow: visible;}    #case-study #botched .diagram-mobile .diagram-mobile-1,  #case-study #botched .diagram-mobile .diagram-mobile-3,  #case-study #botched .diagram-mobile .diagram-mobile-5,  #case-study #botched .diagram-mobile .diagram-mobile-6 {
      font-family: "Conv_CircularStd-Book", Helvetica, sans-serif;}    #case-study #botched #diagram-copy-mobile {
      width: 100%;}    #case-study #botched #diagram-copy-mobile
      text,  #case-study #botched #diagram-copy-mobile .diagram-mobile-15 {      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      -moz-transition: all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1000ms;
      -webkit-transition: all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition-delay: 1000ms;
      transition: all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1000ms;}    #case-study #botched #diagram-copy-mobile #thumb-mobile,  #case-study #botched #diagram-copy-mobile #thumb-mobile-2,  #case-study #botched #diagram-copy-mobile #thumb-mobile-3,  #case-study #botched #diagram-copy-mobile #thumb-mobile-4,  #case-study #botched #diagram-copy-mobile #thumb-mobile-5,  #case-study #botched #diagram-copy-mobile #thumb-mobile-6 {
      -moz-transform: scale(0);
      -ms-transform: scale(0);
      -webkit-transform: scale(0);
      transform: scale(0);
      -moz-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
      -moz-transition: all 700ms cubic-bezier(0.175, 0.885, 0.32, 1.15);
      -webkit-transition: all 700ms cubic-bezier(0.175, 0.885, 0.32, 1.15);
      transition: all 700ms cubic-bezier(0.175, 0.885, 0.32, 1.15);}    #case-study #botched #diagram-copy-mobile #thumb-mobile
      text,  #case-study #botched #diagram-copy-mobile #thumb-mobile-2 text,  #case-study #botched #diagram-copy-mobile #thumb-mobile-3 text,  #case-study #botched #diagram-copy-mobile #thumb-mobile-4 text,  #case-study #botched #diagram-copy-mobile #thumb-mobile-5 text,  #case-study #botched #diagram-copy-mobile #thumb-mobile-6 text {      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;}    #case-study #botched #diagram-copy-mobile #thumb-mobile-2 {
      -moz-transition-delay: 50ms;
      -webkit-transition-delay: 50ms;
      transition-delay: 50ms;}    #case-study #botched #diagram-copy-mobile #thumb-mobile-3 {
      -moz-transition-delay: 150ms;
      -webkit-transition-delay: 150ms;
      transition-delay: 150ms;}    #case-study #botched #diagram-copy-mobile #thumb-mobile-4 {
      -moz-transition-delay: 200ms;
      -webkit-transition-delay: 200ms;
      transition-delay: 200ms;}    #case-study #botched #diagram-copy-mobile #thumb-mobile-6 {
      -moz-transition-delay: 50ms;
      -webkit-transition-delay: 50ms;
      transition-delay: 50ms;}    #case-study #botched #diagram-copy-mobile #dashed-line-mobile,  #case-study #botched #diagram-copy-mobile #dashed-line-mobile-2 {
      -moz-transform: scale(1.2);
      -ms-transform: scale(1.2);
      -webkit-transform: scale(1.2);
      transform: scale(1.2);
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      -moz-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
      -moz-transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1) 500ms;
      -webkit-transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
      -webkit-transition-delay: 500ms;
      transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1) 500ms;}    #case-study #botched #diagram-copy-mobile #dashed-line-mobile-2 {
      -moz-transition-delay: 600ms;
      -webkit-transition-delay: 600ms;
      transition-delay: 600ms;}    #case-study #botched #red-lines-mobile {
      width: 93.64548%;
      position: absolute;
      top: 3.91631%;
      left: 3.34448%;
      pointer-events: none;}    #case-study #botched #red-lines-mobile #diagram-mobile-twitter,  #case-study #botched #red-lines-mobile #diagram-mobile-fb,  #case-study #botched #red-lines-mobile #diagram-mobile-gp {
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      -moz-transition: all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1000ms;
      -webkit-transition: all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition-delay: 1000ms;
      transition: all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1000ms;}    #case-study #botched #red-lines-mobile
      g {      -moz-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
      -moz-transform: scale(0);
      -ms-transform: scale(0);
      -webkit-transform: scale(0);
      transform: scale(0);
      -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
      -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
      transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);}    #case-study #botched .facial-recognition {
      display: inline-block;
      width: 100%;
      padding: 74px 0 3px;}    #case-study #botched .face-scene {
      width: 388px;
      height: 542px;
      margin: 0 auto;
      position: relative;}    #case-study #botched .face-scene
      li {      display: none;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      pointer-events: none;}    #case-study #botched .face-scene
      img {      width: 100%;
      display: block;}    #case-study #botched .face-scene .map {
      display: block;
      pointer-events: auto;
      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;}    #case-study #botched .face-scene .head {
      display: block;
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      -moz-transform: scale(0.8);
      -ms-transform: scale(0.8);
      -webkit-transform: scale(0.8);
      transform: scale(0.8);}    #case-study #botched .face-scene .eyes
      img,  #case-study #botched .face-scene .mouth img {      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      -moz-backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -moz-transform-style: preserve-3d;
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;}    #case-study #botched .instructions {
      margin-top: 60px;
      padding-bottom: 0;
      text-align: center;
      font-size: 14px;
      font-family: "Conv_CircularStd-Book", Helvetica, sans-serif;
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      -moz-transform: scale(0.8);
      -ms-transform: scale(0.8);
      -webkit-transform: scale(0.8);
      transform: scale(0.8);
      -moz-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #case-study #botched .instructions.show {
      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -webkit-transform: scale(1);
      transform: scale(1);
      -moz-transition: all 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: all 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: all 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #case-study #botched .browser {
      width: 100%;
      margin: 0 auto;
      text-align: center;
      padding: 13px 40px;
      position: relative;}    #case-study #botched .browser
      img {      max-width: 100%;}    #case-study #botched .browser-wrap {
      display: inline-block;
      margin: auto;
      position: relative;}    #case-study #botched .progress {
      width: 100%;
      padding: 0 2.80811%;
      position: absolute;
      left: 0;
      bottom: 54.70201%;}    #case-study #botched .progress
      h4 {      color: white;
      font-family: "Futura", Helvetica, Ariel, sans-serif;
      font-size: 20px;
      font-weight: 700;
      text-align: left;}    #case-study #botched .progress-bar-wrap {
      width: 100%;
      height: 0.53691%;
      padding: 0 2.80811%;
      position: absolute;
      top: 45.90604%;
      left: 0;}    #case-study #botched .progress-bar {
      width: 0;
      height: 100%;
      background-color: white;}    #case-study #botched .browser-photos {
      width: 100%;
      height: 48.05369%;
      position: absolute;
      bottom: 5.36913%;
      left: 0;
      padding: 0 2.80811%;}    #case-study #botched .browser-photos
      ul {      width: 100%;
      height: 100%;
      overflow: hidden;}    #case-study #botched .browser-photos
      li {      width: 9.91736%;
      height: 33.51955%;
      float: left;
      margin-right: 0.08264%;
      margin-bottom: 0.1033%;
      background-repeat: no-repeat;
      background-size: cover;
      background-image: url(/assets/work/case-studies/botched/browser-photos/photo-1.jpg);
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;}    #case-study #botched .browser-photos
      li:nth-child(2) {      background-image: url(/assets/work/case-studies/botched/browser-photos/photo-2.jpg);}    #case-study #botched .browser-photos
      li:nth-child(3) {      background-image: url(/assets/work/case-studies/botched/browser-photos/photo-3.jpg);}    #case-study #botched .browser-photos
      li:nth-child(4) {      background-image: url(/assets/work/case-studies/botched/browser-photos/photo-4.jpg);}    #case-study #botched .browser-photos
      li:nth-child(5) {      background-image: url(/assets/work/case-studies/botched/browser-photos/photo-5.jpg);}    #case-study #botched .browser-photos
      li:nth-child(6) {      background-image: url(/assets/work/case-studies/botched/browser-photos/photo-6.jpg);}    #case-study #botched .browser-photos
      li:nth-child(7) {      background-image: url(/assets/work/case-studies/botched/browser-photos/photo-7.jpg);}    #case-study #botched .browser-photos
      li:nth-child(8) {      background-image: url(/assets/work/case-studies/botched/browser-photos/photo-8.jpg);}    #case-study #botched .browser-photos
      li:nth-child(9) {      background-image: url(/assets/work/case-studies/botched/browser-photos/photo-9.jpg);}    #case-study #botched .browser-photos
      li:nth-child(10) {      background-image: url(/assets/work/case-studies/botched/browser-photos/photo-10.jpg);}    #case-study #botched .browser-photos
      li:nth-child(11) {      background-image: url(/assets/work/case-studies/botched/browser-photos/photo-11.jpg);}    #case-study #botched .browser-photos
      li:nth-child(12) {      background-image: url(/assets/work/case-studies/botched/browser-photos/photo-12.jpg);}    #case-study #botched .browser-photos
      li:nth-child(13) {      background-image: url(/assets/work/case-studies/botched/browser-photos/photo-13.jpg);}    #case-study #botched .browser-photos
      li:nth-child(14) {      background-image: url(/assets/work/case-studies/botched/browser-photos/photo-14.jpg);}    #case-study #botched .browser-photos
      li:nth-child(15) {      background-image: url(/assets/work/case-studies/botched/browser-photos/photo-15.jpg);}    #case-study #botched .browser-photos
      li:nth-child(16) {      background-image: url(/assets/work/case-studies/botched/browser-photos/photo-16.jpg);}    #case-study #botched .browser-photos
      li:nth-child(17) {      background-image: url(/assets/work/case-studies/botched/browser-photos/photo-17.jpg);}    #case-study #botched .browser-photos
      li:nth-child(18) {      background-image: url(/assets/work/case-studies/botched/browser-photos/photo-18.jpg);}    #case-study #botched .browser-photos
      li:nth-child(19) {      background-image: url(/assets/work/case-studies/botched/browser-photos/photo-19.jpg);}    #case-study #botched .browser-photos
      li:nth-child(20) {      background-image: url(/assets/work/case-studies/botched/browser-photos/photo-20.jpg);}    #case-study #botched .browser-photos
      li:nth-child(21) {      background-image: url(/assets/work/case-studies/botched/browser-photos/photo-21.jpg);}    #case-study #botched .browser-photos
      li:nth-child(22) {      background-image: url(/assets/work/case-studies/botched/browser-photos/photo-22.jpg);}    #case-study #botched .browser-photos
      li:nth-child(23) {      background-image: url(/assets/work/case-studies/botched/browser-photos/photo-23.jpg);}    #case-study #botched .browser-photos
      li:nth-child(24) {      background-image: url(/assets/work/case-studies/botched/browser-photos/photo-24.jpg);}    #case-study #botched .browser-photos
      li:nth-child(25) {      background-image: url(/assets/work/case-studies/botched/browser-photos/photo-25.jpg);}    #case-study #botched .browser-photos
      li:nth-child(26) {      background-image: url(/assets/work/case-studies/botched/browser-photos/photo-26.jpg);}    #case-study #botched .browser-photos
      li:nth-child(27) {      background-image: url(/assets/work/case-studies/botched/browser-photos/photo-27.jpg);}    #case-study #botched .browser-photos
      li:nth-child(28) {      background-image: url(/assets/work/case-studies/botched/browser-photos/photo-28.jpg);}    #case-study #botched .browser-photos
      li:nth-child(29) {      background-image: url(/assets/work/case-studies/botched/browser-photos/photo-29.jpg);}    #case-study #botched .browser-photos
      li:nth-child(10n+10) {      margin-right: 0;}    #case-study #botched .browser-photos
      li.selected>div {      background-color: rgba(240, 167, 141, 0.8);
      width: 100%;
      height: 100%;
      position: relative;
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;}    #case-study #botched .browser-photos
      li.selected>div:before {      content: "";
      display: block;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-image: url(/assets/work/case-studies/botched/checkmark.png);
      width: 16.66667%;
      height: 16.66667%;
      position: absolute;
      bottom: 8.33333%;
      right: 8.33333%;}    #case-study #botched .continue {
      width: 99.60399%;
      height: 15.7047%;
      position: absolute;
      bottom: 5.36913%;
      left: 0.15601%;
      overflow: hidden;}    #case-study #botched .continue>
      div {      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-size: cover;
      background-image: url(/assets/work/case-studies/botched/continue-overlay.png);
      position: absolute;
      bottom: 0;
      left: 0;
      -moz-transform: translateY(100%);
      -ms-transform: translateY(100%);
      -webkit-transform: translateY(100%);
      transform: translateY(100%);
      -moz-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #case-study #botched .continue.active>
      div {      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -webkit-transform: translateY(0);
      transform: translateY(0);}    #case-study #botched .botched-to-date {
      width: 100%;
      height: 720px;
      overflow: hidden;
      padding-bottom: 100px;
      box-sizing: content-box !important;}    #case-study #botched .photos-grid {
      width: 100%;
      position: absolute;}    #case-study #botched .photos-grid .photo {
      position: relative;
      float: left;
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;}    #case-study #botched .photos-grid .photo.filler
      figure {      display: none;}    #case-study #botched .photos-grid .photo
      figure {      width: 100%;
      height: 100%;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      position: relative;}    #case-study #botched .photos-grid .mason_filler {
      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;}    #case-study #botched .photos-grid .mason_filler
      figure {      display: none;}    #case-study #botched .photos-grid .mason_filler.show {
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;}    #case-study #botched .photos-grid .mason_filler.show
      figure {      display: block;}    #case-study #botched .botched-to-date .wrap {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;}    #case-study #botched .botched-to-date .wrap>
      div {      width: 100%;
      height: 100%;
      display: table;}    #case-study #botched .botched-to-date .content {
      display: table-cell;
      vertical-align: middle;
      position: relative;
      text-align: center;
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      -moz-transform: scale(0.8);
      -ms-transform: scale(0.8);
      -webkit-transform: scale(0.8);
      transform: scale(0.8);
      -moz-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #case-study #botched .botched-to-date .content>
      div {      width: 119px;
      height: 119px;
      margin: 0 auto;}    #case-study #botched .botched-to-date .content
      h2 {      font-size: 18px;
      text-transform: uppercase;
      padding: 36px 0 0;}    #case-study #botched .botched-to-date .content
      h1 {      color: white;
      font-size: 120px;
      line-height: 116px;
      letter-spacing: -4px;}    #case-study #botched .botched-to-date.animate .content {
      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -webkit-transform: scale(1);
      transform: scale(1);}    @media (
      max-width: 1280px) {      #case-study #botched .marquee-scene {          left: -15%;
      width: 115%;}      #case-study #botched .progress h4 {
      font-size: 17px;}  }    @media (
      max-width: 1040px) {      #case-study #botched .progress h4 {          font-size: 14px;}  }    @media (
      max-width: 996px) {      #case-study #botched .diagram {          max-width: 339px;}      #case-study #botched .diagram-desktop {
      display: none;}      #case-study #botched .diagram-mobile {
      display: block;}  }    @media (
      max-width: 880px) {      #case-study #botched .marquee-scene {          height: auto;
      min-width: 0;
      min-height: 0;
      left: 0;
      bottom: -8%;}      #case-study #botched .marquee-scene li {
      height: auto;}      #case-study #botched .marquee-scene li img {
      height: auto;
      width: 100%;}      #case-study #botched .face-scene {
      width: 320px;
      height: 447px;}      #case-study #botched .facial-recognition {
      padding: 44px 0 0;}      #case-study #botched .instructions {
      margin-top: 20px;}      #case-study #botched .map-lines>div:first-child {
      width: 120px;
      height: 332px;
      left: 40px !important;
      bottom: 7px;}      #case-study #botched .map-lines>div:nth-child(2) {
      width: 125px;
      height: 331px;
      right: 40px !important;
      bottom: 7px;}      #case-study #botched .map-lines>div svg {
      width: 100% !important;
      height: 100% !important;}      #case-study #botched .progress h4 {
      font-size: 10px;}      #case-study #botched .botched-to-date {
      height: 440px;}      #case-study #botched .botched-to-date .content h2 {
      font-size: 14px;
      padding-top: 16px;}      #case-study #botched .botched-to-date .content h1 {
      font-size: 60px;
      line-height: 60px;
      letter-spacing: -2px;}  }    @media (
      max-width: 539px) {      #case-study #botched .browser {          padding: 0 20px;}      #case-study #botched .progress h4 {
      font-size: 6px;}  }    #case-study #botched .map-lines {
      width: 100%;
      height: 100%;
      position: relative;
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;}    #case-study #botched .map-lines>
      div {      width: 146px;
      height: 403px;
      position: absolute;
      bottom: 8px;}    #case-study #botched .map-lines>
      div:first-child {      left: 48px;}    #case-study #botched .map-lines>
      div:nth-child(2) {      right: 53px;}    #case-study #botched .map-points {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;}    #case-study #botched .map-points
      figure {      background-color: white;
      width: 12px;
      height: 12px;
      border: 2px solid white;
      border-radius: 50%;
      position: absolute;
      top: 289px;
      left: 44px;
      overflow: hidden;
      cursor: pointer;
      -moz-backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -moz-transform-style: preserve-3d;
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;}    #case-study #botched .map-points
      figure:before {      content: "";
      display: block;
      background-color: #f0a78d;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      -moz-transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #case-study #botched .map-points
      figure.active {      cursor: default;}    #case-study #botched .map-points
      figure.active:before {      -moz-transform: scale(0);
      -ms-transform: scale(0);
      -webkit-transform: scale(0);
      transform: scale(0);}    #case-study #botched .map-points
      figure:nth-child(2) {      top: 381px;
      left: 50px;}    #case-study #botched .map-points
      figure:nth-child(3) {      top: 157px;
      left: 70px;}    #case-study #botched .map-points
      figure:nth-child(4) {      top: 276px;
      left: 87px;}    #case-study #botched .map-points
      figure:nth-child(5) {      top: 328px;
      left: 90px;}    #case-study #botched .map-points
      figure:nth-child(6) {      top: 465px;
      left: 95px;}    #case-study #botched .map-points
      figure:nth-child(7) {      top: 253px;
      left: 119px;}    #case-study #botched .map-points
      figure:nth-child(8) {      top: 428px;
      left: 134px;}    #case-study #botched .map-points
      figure:nth-child(9) {      top: 333px;
      left: 142px;}    #case-study #botched .map-points
      figure:nth-child(10) {      top: 376px;
      left: 154px;}    #case-study #botched .map-points
      figure:nth-child(11) {      top: 285px;
      left: 155px;}    #case-study #botched .map-points
      figure:nth-child(12) {      top: 125px;
      left: 183px;}    #case-study #botched .map-points
      figure:nth-child(13) {      top: 203px;
      left: 183px;}    #case-study #botched .map-points
      figure:nth-child(14) {      top: 250px;
      left: 185px;}    #case-study #botched .map-points
      figure:nth-child(15) {      top: 278px;
      left: 185px;}    #case-study #botched .map-points
      figure:nth-child(16) {      top: 322px;
      left: 186px;}    #case-study #botched .map-points
      figure:nth-child(17) {      top: 393px;
      left: 186px;}    #case-study #botched .map-points
      figure:nth-child(18) {      top: 419px;
      left: 186px;}    #case-study #botched .map-points
      figure:nth-child(19) {      top: 460px;
      left: 188px;}    #case-study #botched .map-points
      figure:nth-child(20) {      top: 526px;
      left: 188px;}    #case-study #botched .map-points
      figure:nth-child(21) {      top: 285px;
      left: 220px;}    #case-study #botched .map-points
      figure:nth-child(22) {      top: 376px;
      left: 220px;}    #case-study #botched .map-points
      figure:nth-child(23) {      top: 334px;
      left: 233px;}    #case-study #botched .map-points
      figure:nth-child(24) {      top: 428px;
      left: 241px;}    #case-study #botched .map-points
      figure:nth-child(25) {      top: 253px;
      left: 256px;}    #case-study #botched .map-points
      figure:nth-child(26) {      top: 465px;
      left: 281px;}    #case-study #botched .map-points
      figure:nth-child(27) {      top: 329px;
      left: 286px;}    #case-study #botched .map-points
      figure:nth-child(28) {      top: 271px;
      left: 287px;}    #case-study #botched .map-points
      figure:nth-child(29) {      top: 157px;
      left: 305px;}    #case-study #botched .map-points
      figure:nth-child(30) {      top: 381px;
      left: 325px;}    #case-study #botched .map-points
      figure:nth-child(31) {      top: 290px;
      left: 331px;}    @media (
      max-width: 880px) {      #case-study #botched .map-points figure {          top: 238px;
      left: 35px;
      width: 14px;
      height: 14px;}      #case-study #botched .map-points figure:nth-child(2) {
      top: 314px;
      left: 42px;}      #case-study #botched .map-points figure:nth-child(3) {
      top: 128px;
      left: 57px;}      #case-study #botched .map-points figure:nth-child(4) {
      top: 227px;
      left: 72px;}      #case-study #botched .map-points figure:nth-child(5) {
      top: 269px;
      left: 74px;}      #case-study #botched .map-points figure:nth-child(6) {
      top: 382px;
      left: 78px;}      #case-study #botched .map-points figure:nth-child(7) {
      top: 208px;
      left: 98px;}      #case-study #botched .map-points figure:nth-child(8) {
      top: 352px;
      left: 110px;}      #case-study #botched .map-points figure:nth-child(9) {
      top: 274px;
      left: 117px;}      #case-study #botched .map-points figure:nth-child(10) {
      top: 308px;
      left: 127px;}      #case-study #botched .map-points figure:nth-child(11) {
      top: 234px;
      left: 128px;}      #case-study #botched .map-points figure:nth-child(12) {
      top: 103px;
      left: 149px;}      #case-study #botched .map-points figure:nth-child(13) {
      top: 167px;
      left: 149px;}      #case-study #botched .map-points figure:nth-child(14) {
      top: 205px;
      left: 150px;}      #case-study #botched .map-points figure:nth-child(15) {
      top: 230px;
      left: 151px;}      #case-study #botched .map-points figure:nth-child(16) {
      top: 263px;
      left: 151px;}      #case-study #botched .map-points figure:nth-child(17) {
      top: 322px;
      left: 152px;}      #case-study #botched .map-points figure:nth-child(18) {
      top: 345px;
      left: 152px;}      #case-study #botched .map-points figure:nth-child(19) {
      top: 376px;
      left: 153px;}      #case-study #botched .map-points figure:nth-child(20) {
      top: 432px;
      left: 153px;}      #case-study #botched .map-points figure:nth-child(21) {
      top: 233px;
      left: 177px;}      #case-study #botched .map-points figure:nth-child(22) {
      top: 309px;
      left: 179px;}      #case-study #botched .map-points figure:nth-child(23) {
      top: 273px;
      left: 190px;}      #case-study #botched .map-points figure:nth-child(24) {
      top: 352px;
      left: 198px;}      #case-study #botched .map-points figure:nth-child(25) {
      top: 208px;
      left: 210px;}      #case-study #botched .map-points figure:nth-child(26) {
      top: 381px;
      left: 230px;}      #case-study #botched .map-points figure:nth-child(27) {
      top: 270px;
      left: 233px;}      #case-study #botched .map-points figure:nth-child(28) {
      top: 222px;
      left: 236px;}      #case-study #botched .map-points figure:nth-child(29) {
      top: 129px;
      left: 249px;}      #case-study #botched .map-points figure:nth-child(30) {
      top: 313px;
      left: 264px;}      #case-study #botched .map-points figure:nth-child(31) {
      top: 237px;
      left: 271px;}  }    #case-study #falcon .marquee {
      background-color: black;
      background-repeat: no-repeat;
      background-image: url(work/case-studies/falcon/hero_image.jpg);
      background-position: top right;
      background-size: contain;}    @media only all and (
      -webkit-min-device-pixel-ratio: 1.3),  only all and (min--moz-device-pixel-ratio: 1.3),  only all and (-o-min-device-pixel-ratio: 1.3 / 1),  only all and (min-device-pixel-ratio: 1.3),  only all and (min-resolution: 1.3dppx) {      #case-study #falcon .marquee {          background-image: url(work/case-studies/falcon/hero_image@2x.jpg);}  }    #case-study #falcon .marquee
      hr {      border-style: solid;
      margin: 30px 0 0;}    #case-study #falcon
      h2 {      color: white;}    #case-study #falcon .alt-1 {
      background-color: #121214;}    #case-study #falcon .alt-2 {
      background-color: black;}    #case-study #falcon .top-section {
      border-top: 1px solid #151617;}    #case-study #falcon
      hr {      max-width: 1120px;
      border: 0;
      border-bottom: 1px dashed #2a2a2c;
      margin: 40px auto;
      box-sizing: border-box;}    #case-study #falcon .figure-descriptions {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      pointer-events: none;}    #case-study #falcon .figure-descriptions
      li {      width: 100%;
      height: 100%;
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      -moz-transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #case-study #falcon .figure-descriptions
      li.active {      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;
      -moz-transition: all 0ms;
      -webkit-transition: all 0ms;
      transition: all 0ms;}    #case-study #falcon .figure-descriptions
      li.active span {      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -webkit-transform: translateY(0);
      transform: translateY(0);
      -moz-transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #case-study #falcon .figure-descriptions
      li.active figure {      -moz-transition: width 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 200ms, height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 400ms;
      -webkit-transition: width 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53), height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition-delay: 200ms, 400ms;
      transition: width 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 200ms, height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 400ms;}    #case-study #falcon .figure-descriptions
      li.active figure:after {      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -webkit-transform: scale(1);
      transform: scale(1);
      -moz-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 600ms;
      -webkit-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition-delay: 600ms;
      transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 600ms;}    #case-study #falcon .figure-descriptions
      span {      display: block;
      color: white;
      font-size: 12px;
      font-family: "Conv_CircularStd-Book", Helvetica, sans-serif;
      position: absolute;
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      -moz-transform: translateY(20px);
      -ms-transform: translateY(20px);
      -webkit-transform: translateY(20px);
      transform: translateY(20px);
      -moz-transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0ms 200ms;
      -webkit-transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0ms;
      -webkit-transition-delay: 0s, 200ms;
      transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0ms 200ms;}    #case-study #falcon .figure-descriptions
      figure {      border-top: 1px solid rgba(255, 255, 255, 0.1);
      border-right: 1px solid rgba(255, 255, 255, 0.1);
      position: absolute;
      width: 0;
      height: 0;
      -moz-transition: all 0ms 200ms;
      -webkit-transition: all 0ms;
      -webkit-transition-delay: 200ms;
      transition: all 0ms 200ms;}    #case-study #falcon .figure-descriptions
      figure:after {      content: "";
      display: block;
      background-color: white;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      width: 9px;
      height: 9px;
      position: absolute;
      right: -5px;
      bottom: -19px;
      -moz-transform: scale(0);
      -ms-transform: scale(0);
      -webkit-transform: scale(0);
      transform: scale(0);
      -moz-transition: all 0ms 200ms;
      -webkit-transition: all 0ms;
      -webkit-transition-delay: 200ms;
      transition: all 0ms 200ms;}    #case-study #falcon #framework .constrain {
      z-index: 1;}    #case-study #falcon .framework-pages {
      width: 100%;
      max-width: 1440px;
      margin: -10% auto 0;
      position: relative;
      z-index: 0;}    #case-study #falcon .framework-pages .grid {
      width: 100%;
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;}    #case-study #falcon .framework-pages .pages {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      pointer-events: none;
      z-index: 0;}    #case-study #falcon .framework-pages .pages>
      li {      width: 60.76389%;
      height: 36.23919%;
      position: absolute;
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      -moz-transform: translateY(-20%);
      -ms-transform: translateY(-20%);
      -webkit-transform: translateY(-20%);
      transform: translateY(-20%);}    #case-study #falcon .framework-pages .pages>
      li:first-child {      top: 55%;
      left: -19%;
      z-index: 2;}    #case-study #falcon .framework-pages .pages>
      li:nth-child(2) {      top: 31.77233%;
      left: 19.65278%;
      z-index: 1;}    #case-study #falcon .framework-pages .pages>
      li:nth-child(3) {      top: 8.6%;
      right: -19%;
      z-index: 0;}    #case-study #falcon .framework-pages .pages>
      li img {      width: 100%;}    #case-study #falcon .framework-pages .pages>
      li .content {      position: absolute;
      top: 0;
      left: 0;
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;}    #case-study #falcon .framework-pages .layers {
      width: 100%;
      height: 100%;
      position: relative;}    #case-study #falcon .framework-pages .layers.show-0
      li:nth-child(3),  #case-study #falcon .framework-pages .layers.show-1 li:nth-child(3) {      top: -73%;
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=30);
      opacity: 0.3;}    #case-study #falcon .framework-pages .layers.show-0
      li:nth-child(2) {      top: -59%;
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=30);
      opacity: 0.3;}    #case-study #falcon .framework-pages .layers
      li {      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      -moz-transition: all 800ms cubic-bezier(0.86, 0, 0.07, 1);
      -webkit-transition: all 800ms cubic-bezier(0.86, 0, 0.07, 1);
      transition: all 800ms cubic-bezier(0.86, 0, 0.07, 1);}    #case-study #falcon .framework-pages .layers
      li:nth-child(2) .bg,  #case-study #falcon .framework-pages .layers li:nth-child(3) .bg {      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;}    #case-study #falcon .framework-pages .layers
      li:nth-child(2) {      top: -14%;}    #case-study #falcon .framework-pages .layers
      li:nth-child(3) {      top: -28%;}    #case-study #falcon .framework-pages .layers
      li .content {      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;}    #case-study #falcon .framework-pages .layers
      li .hitbox {      width: 95.60241%;
      height: 84.19994%;
      top: 8%;
      left: 2.17143%;
      position: absolute;
      pointer-events: auto;
      cursor: pointer;
      -moz-transform: rotateY(14deg) rotateX(55deg) rotate(141deg);
      -ms-transform: rotateY(14deg) rotateX(55deg) rotate(141deg);
      -webkit-transform: rotateY(14deg) rotateX(55deg) rotate(141deg);
      transform: rotateY(14deg) rotateX(55deg) rotate(141deg);}    #case-study #falcon .framework-pages .figure-descriptions
      li.active figure {      width: 20.48611%;
      height: 5.12104%;}    #case-study #falcon .framework-pages .figure-descriptions
      li:first-child span {      top: 45.58865%;}    #case-study #falcon .framework-pages .figure-descriptions
      li:first-child figure {      top: 46.1268%;}    #case-study #falcon .framework-pages .figure-descriptions
      li:nth-child(2) span {      top: 40.58865%;}    #case-study #falcon .framework-pages .figure-descriptions
      li:nth-child(2) figure {      top: 41.1268%;}    #case-study #falcon .framework-pages .figure-descriptions
      li:nth-child(3) span {      top: 35.58865%;}    #case-study #falcon .framework-pages .figure-descriptions
      li:nth-child(3) figure {      top: 36.1268%;}    #case-study #falcon .framework-pages .figure-descriptions
      li span {      left: 11.11111%;}    #case-study #falcon .framework-pages .figure-descriptions
      li figure {      left: 18.125%;}    #case-study #falcon #modules .copy
      h2 {      padding-top: 0;}    #case-study #falcon #modules .module-wrap {
      position: relative;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 40px;}    #case-study #falcon #modules .module-list {
      width: 100%;
      padding-bottom: 122px;}    #case-study #falcon #modules .module-list
      li {      display: inline-block;
      width: 100%;
      -moz-perspective: 1500px;
      -webkit-perspective: 1500px;
      perspective: 1500px;}    #case-study #falcon #modules .module-list
      li.animate .wrap {      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;
      -moz-transform: rotateX(0);
      -ms-transform: rotateX(0);
      -webkit-transform: rotateX(0);
      transform: rotateX(0);}    #case-study #falcon #modules .module-list
      li.animate .module-title {      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;
      -moz-transform: translateX(0);
      -ms-transform: translateX(0);
      -webkit-transform: translateX(0);
      transform: translateX(0);}    #case-study #falcon #modules .module-list
      li.animate hr {      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;}    #case-study #falcon #modules .module-list
      li.animate .figure-descriptions li:first-child span {      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -webkit-transform: translateY(0);
      transform: translateY(0);
      -moz-transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 900ms;
      -webkit-transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition-delay: 900ms;
      transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 900ms;}    #case-study #falcon #modules .module-list
      li.animate .figure-descriptions li:first-child figure {      -moz-transition: width 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 1100ms, height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1300ms;
      -webkit-transition: width 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53), height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition-delay: 1100ms, 1300ms;
      transition: width 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 1100ms, height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1300ms;}    #case-study #falcon #modules .module-list
      li.animate .figure-descriptions li:first-child figure:after {      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -webkit-transform: scale(1);
      transform: scale(1);
      -moz-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1500ms;
      -webkit-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition-delay: 1500ms;
      transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1500ms;}    #case-study #falcon #modules .module-list
      li.animate .figure-descriptions li:nth-child(2) span {      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -webkit-transform: translateY(0);
      transform: translateY(0);
      -moz-transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1800ms;
      -webkit-transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition-delay: 1800ms;
      transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1800ms;}    #case-study #falcon #modules .module-list
      li.animate .figure-descriptions li:nth-child(2) figure {      -moz-transition: width 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 2000ms, height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 2200ms;
      -webkit-transition: width 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53), height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition-delay: 2000ms, 2200ms;
      transition: width 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 2000ms, height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 2200ms;}    #case-study #falcon #modules .module-list
      li.animate .figure-descriptions li:nth-child(2) figure:after {      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -webkit-transform: scale(1);
      transform: scale(1);
      -moz-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 2400ms;
      -webkit-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition-delay: 2400ms;
      transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 2400ms;}    #case-study #falcon #modules .module-list
      hr {      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      -moz-transition: opacity 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 100ms;
      -webkit-transition: opacity 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
      -webkit-transition-delay: 100ms;
      transition: opacity 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 100ms;}    #case-study #falcon #modules .figure-descriptions
      li {      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;}    #case-study #falcon #modules .figure-descriptions
      span {      background-color: #121214;
      left: 0;
      padding-right: 7px;
      z-index: 1;
      max-width: 126px;}    #case-study #falcon #modules .figure-descriptions
      figure {      z-index: 0;
      left: 8.92857%;}    #case-study #falcon #modules .module-1 .figure-descriptions
      li:first-child span {      top: 16.58986%;}    #case-study #falcon #modules .module-1 .figure-descriptions
      li:first-child figure {      top: 18.43318%;}    #case-study #falcon #modules .module-1 .figure-descriptions
      li:nth-child(2) span {      top: 30.03226%;}    #case-study #falcon #modules .module-1 .figure-descriptions
      li:nth-child(2) figure {      top: 33.25807%;}    #case-study #falcon #modules .module-2 .figure-descriptions
      span {      top: 12.41379%;}    #case-study #falcon #modules .module-2 .figure-descriptions
      figure {      top: 13.7931%;}    #case-study #falcon #modules .module-4 .figure-descriptions
      span {      top: 13.95349%;}    #case-study #falcon #modules .module-4 .figure-descriptions
      figure {      top: 15.50388%;}    #case-study #falcon #modules .module-1.animate .figure-descriptions
      li:first-child figure {      width: 28%;
      height: 46%;}    #case-study #falcon #modules .module-1.animate .figure-descriptions
      li:nth-child(2) figure {      width: 41%;
      height: 24%;}    #case-study #falcon #modules .module-2.animate .figure-descriptions
      figure {      width: 48%;
      height: 27%;}    #case-study #falcon #modules .module-4.animate .figure-descriptions
      figure {      width: 60%;
      height: 41%;}    #case-study #falcon #modules .active .screenshot:after {
      border-color: #714c8f;}    #case-study #falcon #modules .wrap {
      padding: 0 150px;
      position: relative;
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      -moz-transform: rotateX(90deg);
      -ms-transform: rotateX(90deg);
      -webkit-transform: rotateX(90deg);
      transform: rotateX(90deg);
      -moz-transition: all 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
      -webkit-transition: all 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
      transition: all 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955);}    #case-study #falcon #modules .screenshot {
      display: inline-block;
      width: 100%;
      position: relative;}    #case-study #falcon #modules .screenshot:after {
      content: "";
      display: block;
      border: 1px solid #2a2a2c;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      box-sizing: border-box;
      -moz-transition: border-color 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
      -webkit-transition: border-color 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
      transition: border-color 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);}    #case-study #falcon #modules .screenshot
      img {      width: 100%;}    #case-study #falcon #modules .module-title {
      display: inline-block;
      width: 150px;
      position: absolute;
      bottom: 0;
      left: 0;
      -moz-transform: translateX(-30px);
      -ms-transform: translateX(-30px);
      -webkit-transform: translateX(-30px);
      transform: translateX(-30px);
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      -moz-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 600ms;
      -webkit-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition-delay: 600ms;
      transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 600ms;}    #case-study #falcon #modules .module-title
      h3,  #case-study #falcon #modules .module-title p {      color: white;
      font-family: "Conv_CircularStd-Book", Helvetica, sans-serif;}    #case-study #falcon #modules .module-title
      h3 {      font-size: 40px;
      margin-bottom: 17px;}    #case-study #falcon #modules .module-title
      span {      color: #2a2a2c;
      margin-left: 7px;}    #case-study #falcon #modules .module-title
      p {      font-size: 12px;
      padding: 0 15px 17px;
      position: relative;}    #case-study #falcon #modules .module-title
      p:after {      content: "";
      display: block;
      width: 6px;
      height: 6px;
      border: 1px solid #4ba4e1;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      position: absolute;
      box-sizing: border-box;
      top: 6px;
      left: 0;}    #case-study #falcon #modules .navigator {
      width: 82px;
      position: absolute;
      top: 0;
      right: 20px;
      -moz-backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -moz-transform-style: preserve-3d;
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
      -moz-transform: translateZ(0);
      -ms-transform: translateZ(0);
      -webkit-transform: translateZ(0);
      transform: translateZ(0);}    #case-study #falcon #modules .navigator
      li {      -moz-backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -moz-transform-style: preserve-3d;
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;}    #case-study #falcon #modules .navigator .screenshot {
      cursor: pointer;}    #case-study #falcon #modules .navigator .screenshot:before {
      content: "";
      display: block;
      background-color: #121214;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=50);
      opacity: 0.5;
      -moz-transition: opacity 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
      -webkit-transition: opacity 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
      transition: opacity 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);}    #case-study #falcon #modules .navigator
      hr {      margin: 5px auto;}    #case-study #falcon #modules .navigator
      li {      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      -moz-transform: translateX(100%);
      -ms-transform: translateX(100%);
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
      -moz-transition: all 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
      -webkit-transition: all 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
      transition: all 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);}    #case-study #falcon #modules .navigator
      li.active .screenshot:before,  #case-study #falcon #modules .navigator.enable-hover li:hover .screenshot:before {      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;}    #case-study #falcon #modules .navigator.transition-in
      li {      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;
      -moz-transform: translateX(0);
      -ms-transform: translateX(0);
      -webkit-transform: translateX(0);
      transform: translateX(0);}    #case-study #falcon #modules .navigator.transition-in
      li:nth-child(1) {      -moz-transition-delay: 100ms;
      -webkit-transition-delay: 100ms;
      transition-delay: 100ms;}    #case-study #falcon #modules .navigator.transition-in
      li:nth-child(2) {      -moz-transition-delay: 200ms;
      -webkit-transition-delay: 200ms;
      transition-delay: 200ms;}    #case-study #falcon #modules .navigator.transition-in
      li:nth-child(3) {      -moz-transition-delay: 300ms;
      -webkit-transition-delay: 300ms;
      transition-delay: 300ms;}    #case-study #falcon #modules .navigator.transition-in
      li:nth-child(4) {      -moz-transition-delay: 400ms;
      -webkit-transition-delay: 400ms;
      transition-delay: 400ms;}    #case-study #falcon #modules .navigator.transition-in
      li:nth-child(5) {      -moz-transition-delay: 500ms;
      -webkit-transition-delay: 500ms;
      transition-delay: 500ms;}    #case-study #falcon #products {
      overflow: hidden;}    #case-study #falcon #products:before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background-image: url(work/case-studies/falcon/blur-bg.jpg);
      background-repeat: no-repeat;
      background-position: top center;
      background-size: contain;
      position: absolute;
      top: 0;
      left: 0;}    #case-study #falcon #products .thumb-wrap {
      display: inline-block;
      width: 100%;
      max-width: 820px;
      margin-top: 40px;}    #case-study #falcon #products .thumb-wrap
      li {      float: left;
      width: calc(16.99% - 16px);
      margin-right: 16px;
      -moz-transition: opacity 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
      -webkit-transition: opacity 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
      transition: opacity 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=50);
      opacity: 0.5;
      cursor: pointer;}    #case-study #falcon #products .thumb-wrap
      li:last-child {      margin-right: 0;}    #case-study #falcon #products .thumb-wrap
      li.active {      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;}    #case-study #falcon #products .thumb-wrap
      li.active {      cursor: default;}    #case-study #falcon #products .thumb-wrap.enable-hover
      li:hover {      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;}    #case-study #falcon #products .thumb-wrap
      span {      display: block;
      color: #737380;
      font-size: 14px;
      font-family: "adobe-garamond-pro", serif;
      font-weight: 400;
      font-style: italic;
      margin-top: 17px;
      text-align: left;}    #case-study #falcon #products .thumbnail {
      width: 100%;
      position: relative;}    #case-study #falcon #products .thumbnail:after {
      content: "";
      display: block;
      border: 1px solid rgba(255, 255, 255, 0.1);
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      box-sizing: border-box;}    #case-study #falcon #products .thumbnail
      img {      width: 100%;}    #case-study #falcon #products .break {
      max-width: 1120px;
      width: 100%;}    #case-study #falcon #products
      hr {      margin: 113px auto 0;}    #case-study #falcon .navigation {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;}    #case-study #falcon .arrow {
      width: 40px;
      height: 40px;
      position: absolute;
      top: 50%;
      margin-top: -20px;
      cursor: pointer;
      -moz-transition: opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #case-study #falcon .arrow:before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      border: 2px solid white;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      position: absolute;
      top: 0;
      left: 0;
      box-sizing: border-box;
      -moz-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 100ms;
      -webkit-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition-delay: 100ms;
      transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 100ms;}    #case-study #falcon .arrow:after {
      content: "";
      display: block;
      width: 7px;
      height: 12px;
      background-image: url(work/case-studies/falcon/falcon-sprite.png);
      background-size: 49px 19px;
      position: absolute;
      top: 14px;}    @media only all and (
      -webkit-min-device-pixel-ratio: 1.3),  only all and (min--moz-device-pixel-ratio: 1.3),  only all and (-o-min-device-pixel-ratio: 1.3 / 1),  only all and (min-device-pixel-ratio: 1.3),  only all and (min-resolution: 1.3dppx) {      #case-study #falcon .arrow:after {          background-image: url(work/case-studies/falcon/falcon-sprite@2x.png);}  }    #case-study #falcon .arrow:not(.disabled).enable-hover:hover:before {
      -moz-transform: scale(1.2);
      -ms-transform: scale(1.2);
      -webkit-transform: scale(1.2);
      transform: scale(1.2);}    #case-study #falcon .arrow.disabled {
      cursor: default;
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=10);
      opacity: 0.1;}    #case-study #falcon .arrow.prev {
      left: 0;}    #case-study #falcon .arrow.prev:after {
      background-position: -19px 0;
      left: 16px;}    #case-study #falcon .arrow.next {
      right: 0;}    #case-study #falcon .arrow.next:after {
      background-position: -28px 0;
      left: 18px;}    #case-study #falcon .tron-lines-wrap {
      display: inline-block;
      width: 100%;
      position: relative;}    #case-study #falcon .tron-lines-wrap>
      div {      position: relative;
      padding-bottom: 120px;}    #case-study #falcon .tron-lines-wrap .image-wrap {
      width: 100%;
      max-width: 600px;
      margin: 0 auto 66px;}    #case-study #falcon .tron-lines-wrap .image-wrap
      img {      width: 100%;
      opacity: 0;}    #case-study #falcon .tron-lines-wrap
      canvas {      position: absolute;
      top: 0;
      left: 0;
      pointer-events: none;}    #case-study #falcon .controls {
      width: 100%;
      max-width: 900px;
      height: 58px;
      padding: 0 40px;
      margin: 0 auto;}    #case-study #falcon .controls .play-button {
      float: left;
      width: 40px;
      height: 40px;
      position: relative;
      cursor: pointer;}    #case-study #falcon .controls .play-button:before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      border: 2px solid white;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      position: absolute;
      top: 0;
      left: 0;
      box-sizing: border-box;
      -moz-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 100ms;
      -webkit-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition-delay: 100ms;
      transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 100ms;}    #case-study #falcon .controls .play-button:after {
      content: "";
      display: block;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-left: 5px solid white;
      position: absolute;
      top: 15px;
      left: 18px;}    #case-study #falcon .controls .play-button
      figure {      display: none;
      background-color: white;
      width: 2px;
      height: 10px;
      position: absolute;
      top: 15px;
      left: 17px;}    #case-study #falcon .controls .play-button
      figure:before {      content: "";
      display: block;
      background-color: inherit;
      width: 2px;
      height: 10px;
      position: absolute;
      top: 0;
      right: -5px;}    #case-study #falcon .controls .play-button.pause:after {
      display: none;}    #case-study #falcon .controls .play-button.pause
      figure {      display: block;}    #case-study #falcon .controls .play-button.enable-hover:hover:before {
      -moz-transform: scale(1.2);
      -ms-transform: scale(1.2);
      -webkit-transform: scale(1.2);
      transform: scale(1.2);}    #case-study #falcon .progress-wrap {
      float: right;
      width: calc(100% - 60px);
      position: relative;}    #case-study #falcon .progress-wrap
      span {      color: white;
      font-size: 12px;
      font-family: "Conv_CircularStd-Book", Helvetica, sans-serif;}    #case-study #falcon .progress-wrap .left {
      float: left;}    #case-study #falcon .progress-wrap .right {
      float: right;}    #case-study #falcon .progress-bar {
      display: inline-block;
      width: 100%;
      height: 40px;
      position: relative;}    #case-study #falcon .progress-bar .line {
      width: 100%;
      height: 1px;
      background-color: #2a2a2c;
      margin-top: 19px;
      position: relative;}    #case-study #falcon .progress-bar .scrubber {
      width: 25px;
      height: 25px;
      position: absolute;
      top: 7px;
      left: 0;
      cursor: pointer;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;}    #case-study #falcon .progress-bar .scrubber:before {
      content: "";
      display: block;
      width: 21px;
      height: 21px;
      background-color: black;
      border: 2px solid white;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      position: absolute;
      top: 2px;
      left: 2px;
      box-sizing: border-box;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -moz-transition: border-color 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: border-color 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: border-color 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #case-study #falcon .progress-bar .scrubber
      figure {      background-color: #7d7d7d;
      width: 1px;
      height: 5px;
      position: absolute;
      top: 10px;
      left: 12px;}    #case-study #falcon .progress-bar .scrubber
      figure:before,  #case-study #falcon .progress-bar .scrubber figure:after {      content: "";
      display: block;
      background-color: inherit;
      width: 1px;
      height: 5px;
      position: absolute;
      top: 0;}    #case-study #falcon .progress-bar .scrubber
      figure:before {      left: -3px;}    #case-study #falcon .progress-bar .scrubber
      figure:after {      right: -3px;}    #case-study #falcon #build {
      overflow: hidden;}    #case-study #falcon #build .slider .markers {
      margin-left: -28px;}    #case-study #falcon #build .slider .markers
      li.active {      background-color: #fb940f;}    #case-study #falcon .computer-components {
      display: inline-block;
      width: 100%;
      padding: 54px 0 132px;}    #case-study #falcon .computer-components
      ul,  #case-study #falcon .computer-components .add-card {      width: 100%;}    #case-study #falcon .computer-components .add-card:after,  #case-study #falcon .computer-components .card-type:after {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      border: 1px solid #1d1d1d;
      -moz-border-radius: 2px;
      -webkit-border-radius: 2px;
      border-radius: 2px;
      position: absolute;
      top: 0;
      left: 0;
      box-sizing: border-box;
      pointer-events: none;
      -moz-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #case-study #falcon .computer-components .add-card,  #case-study #falcon .computer-components .card-type {
      -moz-border-radius: 2px;
      -webkit-border-radius: 2px;
      border-radius: 2px;
      position: relative;
      cursor: pointer;}    #case-study #falcon .computer-components .add-card.enable-hover:hover:after,  #case-study #falcon .computer-components .card-type.enable-hover:hover:after {
      border-width: 2px;}    #case-study #falcon .computer-components .add-card.enable-hover:hover
      img,  #case-study #falcon .computer-components .card-type.enable-hover:hover img {      -moz-transform: scale(1.2);
      -ms-transform: scale(1.2);
      -webkit-transform: scale(1.2);
      transform: scale(1.2);}    #case-study #falcon .computer-components .add-card .image-wrap {
      -moz-border-radius: 2px;
      -webkit-border-radius: 2px;
      border-radius: 2px;}    #case-study #falcon .computer-components .add-card .table-wrap {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      padding-left: 5.75%;}    #case-study #falcon .computer-components .add-card .button-area {
      height: 100%;
      display: table;}    #case-study #falcon .computer-components .add-card .text-wrap {
      display: table-cell;
      vertical-align: middle;
      position: relative;
      left: 0;}    #case-study #falcon .computer-components .add-card .text-wrap>
      div {      float: right;}    #case-study #falcon .computer-components .add-card
      figure {      float: left;
      width: 40px;
      height: 40px;
      background-color: #fb940e;
      -moz-border-radius: 2px;
      -webkit-border-radius: 2px;
      border-radius: 2px;
      position: relative;
      margin-right: 27px;
      -moz-transition: background-color 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
      -webkit-transition: background-color 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
      transition: background-color 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);}    #case-study #falcon .computer-components .add-card
      figure:after {      content: "";
      display: block;
      width: 19px;
      height: 19px;
      background-image: url(work/case-studies/falcon/falcon-sprite.png);
      background-size: 49px 19px;
      position: absolute;
      top: 11px;
      left: 11px;}    @media only all and (
      -webkit-min-device-pixel-ratio: 1.3),  only all and (min--moz-device-pixel-ratio: 1.3),  only all and (-o-min-device-pixel-ratio: 1.3 / 1),  only all and (min-device-pixel-ratio: 1.3),  only all and (min-resolution: 1.3dppx) {      #case-study #falcon .computer-components .add-card figure:after {          background-image: url(work/case-studies/falcon/falcon-sprite@2x.png);}  }    #case-study #falcon .computer-components .add-card .left {
      display: block;
      margin-bottom: 3px;}    #case-study #falcon .computer-components .add-card.enable-hover:hover
      figure {      background-color: #ffac40;}    #case-study #falcon .computer-components .card-type {
      float: left;
      width: calc(33.333333333% - 12px);
      margin-right: 12px;}    #case-study #falcon .computer-components .card-type:last-child {
      margin-right: 0;
      float: right;}    #case-study #falcon .computer-components .card-type .image-wrap {
      -moz-border-radius: 2px 2px 0 0;
      -webkit-border-radius: 2px;
      border-radius: 2px 2px 0 0;
      position: relative;}    #case-study #falcon .computer-components .card-type
      figure {      background-color: white;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      position: absolute;
      bottom: 4.42478%;
      right: 3.84615%;
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      -moz-transition: opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #case-study #falcon .computer-components .card-type
      figure:after {      content: "";
      background-image: url(work/case-studies/falcon/falcon-sprite.png);
      background-size: 49px 19px;
      background-position: -37px 0;
      width: 12px;
      height: 9px;
      position: absolute;
      top: 6px;
      left: 4px;}    @media only all and (
      -webkit-min-device-pixel-ratio: 1.3),  only all and (min--moz-device-pixel-ratio: 1.3),  only all and (-o-min-device-pixel-ratio: 1.3 / 1),  only all and (min-device-pixel-ratio: 1.3),  only all and (min-resolution: 1.3dppx) {      #case-study #falcon .computer-components .card-type figure:after {          background-image: url(work/case-studies/falcon/falcon-sprite@2x.png);}  }    #case-study #falcon .computer-components .card-type .text-wrap {
      width: 100%;
      padding: 19px;}    #case-study #falcon .computer-components .card-type .text-wrap
      h4 {      padding-bottom: 11px;}    #case-study #falcon .computer-components .card-type.active {
      cursor: default;}    #case-study #falcon .computer-components .card-type.active:after {
      border-color: #fb940e;
      border-width: 2px;}    #case-study #falcon .computer-components .card-type.active
      figure {      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;}    #case-study #falcon .computer-components .image-wrap {
      width: 100%;
      overflow: hidden;
      border-bottom: 1px solid #1d1d1d;}    #case-study #falcon .computer-components .text-wrap
      h4 {      color: white;
      font-size: 16px;
      line-height: 22px;}    #case-study #falcon .computer-components .text-wrap
      span {      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 1px;}    #case-study #falcon .computer-components .text-wrap .left {
      color: #fb940e;
      cursor: pointer;
      -moz-transition: color 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
      -webkit-transition: color 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
      transition: color 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);}    #case-study #falcon .computer-components .text-wrap .left.enable-hover:hover {
      color: #ffac40;}    #case-study #falcon .computer-components .text-wrap .right {
      color: #a5a5a5;
      float: right;}    #case-study #falcon .computer-components .text-wrap .right
      span {      margin-right: 4px;}    #case-study #falcon .computer-components
      img {      width: 100%;
      -moz-transform-style: preserve-3d;
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
      -moz-transition: all 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 50ms;
      -webkit-transition: all 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
      -webkit-transition-delay: 50ms;
      transition: all 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 50ms;}    #case-study #falcon .computer-components
      hr {      border-color: #1d1d1d;
      border-style: solid;
      max-width: 820px;}    #case-study #falcon .slider {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 54px 40px 120px;
      position: relative;
      text-align: center;}    #case-study #falcon .slider>
      div {      width: 100%;
      height: 100%;
      position: relative;}    #case-study #falcon .slider .slides-wrap {
      width: 100%;
      max-width: 820px;
      margin: 0 auto;
      position: relative;}    #case-study #falcon .slider .slides-wrap>
      img {      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;}    #case-study #falcon .slider .slides-wrap .slides {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      white-space: nowrap;}    #case-study #falcon .slider .slides-wrap .slides
      li,  #case-study #falcon .slider .slides-wrap img {      width: 100%;}    #case-study #falcon .slider .slides-wrap .slides
      li {      display: inline-block;
      margin-right: 20px;
      margin-left: -3px;
      -moz-transition: opacity 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
      -webkit-transition: opacity 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
      transition: opacity 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);}    #case-study #falcon .slider .slides-wrap .slides
      li:first-child {      margin-left: 0;}    #case-study #falcon .slider .slides-wrap .slides
      li:last-child {      margin-right: 0;}    #case-study #falcon .slider .slides-wrap .slides
      li:not(.active) {      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=20);
      opacity: 0.2;}    #case-study #falcon .slider .markers {
      display: none;
      position: absolute;
      bottom: 20px;
      left: 50%;
      margin-left: -62px;}    #case-study #falcon .slider .markers
      li {      display: inline-block;
      width: 12px;
      height: 3px;
      background-color: white;
      margin-right: 8px;
      -moz-transition: background-color 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
      -webkit-transition: background-color 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
      transition: background-color 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);}    #case-study #falcon .slider .markers
      li:last-child {      margin-right: 0;}    #case-study #falcon .slider .markers
      li.active {      background-color: #4eadec;}    #case-study #falcon .slider .navigation {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;}    #case-study #falcon #mobile {
      position: relative;
      z-index: 10;}    #case-study #falcon .phone-wrap {
      width: 100%;
      padding: 103px 0 172px;}    #case-study #falcon .phone {
      margin: 0 auto;
      max-width: 385px;
      position: relative;}    #case-study #falcon .phone
      img {      width: 100%;}    #case-study #falcon .phone
      figure {      width: 17px;
      height: 36px;
      border: 2px solid #2a2a2c;
      -moz-border-radius: 7px;
      -webkit-border-radius: 7px;
      border-radius: 7px;
      position: absolute;
      top: 50%;
      right: -46px;}    #case-study #falcon .phone
      figure:before {      content: "";
      display: block;
      background-color: white;
      width: 3px;
      height: 3px;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      position: absolute;
      top: 5px;
      left: 5px;}    #case-study #falcon .phone
      figure:after {      content: "";
      display: block;
      width: 9px;
      height: 9px;
      background-image: url(work/case-studies/falcon/falcon-sprite.png);
      background-size: 49px 19px;
      background-position: -38px -10px;
      position: absolute;
      left: 2px;
      bottom: -22px;}    @media only all and (
      -webkit-min-device-pixel-ratio: 1.3),  only all and (min--moz-device-pixel-ratio: 1.3),  only all and (-o-min-device-pixel-ratio: 1.3 / 1),  only all and (min-device-pixel-ratio: 1.3),  only all and (min-resolution: 1.3dppx) {      #case-study #falcon .phone figure:after {          background-image: url(work/case-studies/falcon/falcon-sprite@2x.png);}  }    #case-study #falcon .mobile-content {
      background-color: black;
      width: 81.03896%;
      height: 70.96317%;
      position: absolute;
      top: 14.73088%;
      left: 9.35065%;
      overflow: hidden;}    #case-study #falcon .mobile-content
      img {      display: block;}    @media (
      max-width: 880px) {      #case-study #falcon {          padding-top: 0 !important;}      #case-study #falcon .marquee {
      position: relative;
      background-color: black;
      background-image: url(work/case-studies/falcon/hero_image_mobile.jpg);
      background-position: top right;
      background-size: contain;}  }    @media only all and (
      max-width: 880px) and (-webkit-min-device-pixel-ratio: 1.3),  only all and (max-width: 880px) and (min--moz-device-pixel-ratio: 1.3),  only all and (max-width: 880px) and (-o-min-device-pixel-ratio: 1.3 / 1),  only all and (max-width: 880px) and (min-device-pixel-ratio: 1.3),  only all and (max-width: 880px) and (min-resolution: 1.3dppx) {      #case-study #falcon .marquee {          background-image: url(work/case-studies/falcon/hero_image_mobile.jpg);}  }    @media (
      max-width: 880px) {      #case-study #falcon .marquee .heading {          top: auto;}      #case-study #falcon hr {
      margin: 27px auto;}      #case-study #falcon .framework-pages {
      width: 150%;
      margin: -10% -25% 0;}      #case-study #falcon .framework-pages .layers li .hitbox {
      pointer-events: none;}      #case-study #falcon .framework-pages .figure-descriptions li {
      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;}      #case-study #falcon .framework-pages .figure-descriptions li span {
      left: calc(16.6666666% + 40px);}      #case-study #falcon .framework-pages .figure-descriptions li figure {
      left: calc(16.6666666% + 120px);
      width: 30%;
      height: 20%;}      #case-study #falcon .framework-pages .figure-descriptions li:first-child span {
      top: 32.5%;}      #case-study #falcon .framework-pages .figure-descriptions li:first-child figure {
      width: 0;
      height: 0;
      top: 33%;}      #case-study #falcon .framework-pages .figure-descriptions li:nth-child(2) span {
      top: 27.5%;}      #case-study #falcon .framework-pages .figure-descriptions li:nth-child(2) figure {
      width: 0;
      height: 0;
      top: 28%;}      #case-study #falcon .framework-pages .figure-descriptions li:nth-child(3) span {
      top: 22.5%;}      #case-study #falcon .framework-pages .figure-descriptions li:nth-child(3) figure {
      width: 0;
      height: 0;
      top: 23%;}      #case-study #falcon .mobile-transitions .figure-descriptions li:first-child {
      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;
      -moz-transition: all 0ms;
      -webkit-transition: all 0ms;
      transition: all 0ms;}      #case-study #falcon .mobile-transitions .figure-descriptions li:first-child span {
      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -webkit-transform: translateY(0);
      transform: translateY(0);
      -moz-transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);}      #case-study #falcon .mobile-transitions .figure-descriptions li:first-child figure {
      width: 5%;
      height: 25%;
      -moz-transition: width 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 200ms, height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 400ms;
      -webkit-transition: width 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53), height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition-delay: 200ms, 400ms;
      transition: width 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 200ms, height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 400ms;}      #case-study #falcon .mobile-transitions .figure-descriptions li:first-child figure:after {
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -webkit-transform: scale(1);
      transform: scale(1);
      -moz-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 600ms;
      -webkit-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition-delay: 600ms;
      transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 600ms;}      #case-study #falcon .mobile-transitions .figure-descriptions li:nth-child(2) {
      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;
      -moz-transition: all 0ms;
      -webkit-transition: all 0ms;
      transition: all 0ms;}      #case-study #falcon .mobile-transitions .figure-descriptions li:nth-child(2) span {
      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -webkit-transform: translateY(0);
      transform: translateY(0);
      -moz-transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 900ms;
      -webkit-transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition-delay: 900ms;
      transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 900ms;}      #case-study #falcon .mobile-transitions .figure-descriptions li:nth-child(2) figure {
      width: 8%;
      height: 26.5%;
      -moz-transition: width 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 1100ms, height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1300ms;
      -webkit-transition: width 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53), height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition-delay: 1100ms, 1300ms;
      transition: width 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 1100ms, height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1300ms;}      #case-study #falcon .mobile-transitions .figure-descriptions li:nth-child(2) figure:after {
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -webkit-transform: scale(1);
      transform: scale(1);
      -moz-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1500ms;
      -webkit-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition-delay: 1500ms;
      transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1500ms;}      #case-study #falcon .mobile-transitions .figure-descriptions li:nth-child(3) {
      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;
      -moz-transition: all 0ms;
      -webkit-transition: all 0ms;
      transition: all 0ms;}      #case-study #falcon .mobile-transitions .figure-descriptions li:nth-child(3) span {
      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -webkit-transform: translateY(0);
      transform: translateY(0);
      -moz-transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1800ms;
      -webkit-transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition-delay: 1800ms;
      transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1800ms;}      #case-study #falcon .mobile-transitions .figure-descriptions li:nth-child(3) figure {
      width: 11%;
      height: 20%;
      -moz-transition: width 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 2000ms, height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 2200ms;
      -webkit-transition: width 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53), height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition-delay: 2000ms, 2200ms;
      transition: width 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 2000ms, height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 2200ms;}      #case-study #falcon .mobile-transitions .figure-descriptions li:nth-child(3) figure:after {
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -webkit-transform: scale(1);
      transform: scale(1);
      -moz-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 2400ms;
      -webkit-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition-delay: 2400ms;
      transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 2400ms;}      #case-study #falcon #modules .module-list {
      padding-bottom: 25px;}      #case-study #falcon #modules .module-list li:first-child .wrap {
      padding-bottom: 60px;}      #case-study #falcon #modules .wrap {
      padding: 74px 0 20px;}      #case-study #falcon #modules .wrap .figure-descriptions span {
      top: auto;
      bottom: 1px;
      line-height: 13px;
      font-size: 11px;}      #case-study #falcon #modules .wrap .figure-descriptions figure {
      border-top: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      top: auto !important;
      bottom: 7px;
      left: 0;}      #case-study #falcon #modules .wrap .figure-descriptions figure:after {
      bottom: auto;
      top: -19px;}      #case-study #falcon #modules .module-1 .wrap {
      padding: 88px 0 57px;}      #case-study #falcon #modules .module-1 .figure-descriptions li:first-child span {
      top: auto;
      bottom: 36px;}      #case-study #falcon #modules .module-1 .figure-descriptions li:first-child figure {
      bottom: 42px;}      #case-study #falcon #modules .module-1 .figure-descriptions li:nth-child(2) span {
      top: auto;
      bottom: 0;}      #case-study #falcon #modules .module-1 .figure-descriptions li:nth-child(2) figure {
      bottom: 12px;}      #case-study #falcon #modules .module-1.animate .figure-descriptions li:first-child figure {
      width: 52%;
      height: 19%;}      #case-study #falcon #modules .module-1.animate .figure-descriptions li:nth-child(2) figure {
      width: 83%;
      height: 36%;}      #case-study #falcon #modules .module-4.animate .figure-descriptions figure {
      width: 75%;
      height: 23%;}      #case-study #falcon #modules .module-title {
      top: 0;
      bottom: auto;}      #case-study #falcon #modules .module-title h3 {
      font-size: 30px;
      margin-top: -8px;
      margin-bottom: 11px;}      #case-study #falcon #modules .module-title p {
      font-size: 11px;
      line-height: 13px;}      #case-study #falcon #modules .navigator {
      display: none;}      #case-study #falcon #products .thumb-wrap li {
      width: calc(33.333333% - 11px);
      margin-right: 16px;
      margin-bottom: 20px;}      #case-study #falcon #products .thumb-wrap li:nth-child(3n+3) {
      margin-right: 0;}      #case-study #falcon #products .thumb-wrap li span {
      margin-top: 7px;}      #case-study #falcon #products hr {
      margin: 0 auto;}      #case-study #falcon .slider {
      padding: 7px 40px 0;}      #case-study #falcon .tron-lines-wrap>div {
      padding-bottom: 25px;}      #case-study #falcon .tron-lines-wrap .image-wrap {
      margin-bottom: 10px;}      #case-study #falcon .computer-components {
      padding: 2px 0 40px;}      #case-study #falcon .computer-components hr {
      margin: 20px auto;}      #case-study #falcon #build .slider {
      padding-bottom: 20px;}      #case-study #falcon .phone-wrap {
      padding: 19px 0 34px;}      #case-study #falcon .phone figure {
      right: -26px;}  }    @media (
      max-width: 640px) {      #case-study #falcon .slider .markers {          display: block;}      #case-study #falcon .arrow {
      display: none;}      #case-study #falcon .framework-pages .figure-descriptions li:first-child span {
      top: 32%;}      #case-study #falcon .framework-pages .figure-descriptions li:nth-child(2) span {
      top: 27%;}      #case-study #falcon .framework-pages .figure-descriptions li:nth-child(3) span {
      top: 22%;}      #case-study #falcon .computer-components .text-wrap span {
      font-size: 10px;
      letter-spacing: normal;
      line-height: 100%;}      #case-study #falcon .computer-components .text-wrap h4 {
      font-size: 12px;
      line-height: 100%;}      #case-study #falcon .computer-components .text-wrap .right span {
      margin-right: 0;}      #case-study #falcon .computer-components .add-card .image-wrap img {
      min-height: 64px;}      #case-study #falcon .computer-components .add-card figure {
      width: 20px;
      height: 20px;
      margin-right: 16px;}      #case-study #falcon .computer-components .add-card figure:after {
      -moz-transform: scale(0.5);
      -ms-transform: scale(0.5);
      -webkit-transform: scale(0.5);
      transform: scale(0.5);
      top: 1px;
      left: 1px;}      #case-study #falcon .computer-components .add-card .table-wrap {
      padding-left: 20px;}      #case-study #falcon .computer-components .add-card .left {
      margin-bottom: 0;}      #case-study #falcon .computer-components .card-type .left {
      float: left;}      #case-study #falcon .computer-components .card-type figure {
      -moz-transform: scale(0.5);
      -ms-transform: scale(0.5);
      -webkit-transform: scale(0.5);
      transform: scale(0.5);}  }    @media (
      max-width: 539px) {      #case-study #falcon .framework-pages .figure-descriptions li span {          left: calc(16.6666666% + 16px);}      #case-study #falcon .framework-pages .figure-descriptions li figure {
      left: calc(16.6666666% + 96px);}      #case-study #falcon .framework-pages .figure-descriptions li:first-child span {
      top: 31.2%;}      #case-study #falcon .framework-pages .figure-descriptions li:nth-child(2) span {
      top: 26.2%;}      #case-study #falcon .framework-pages .figure-descriptions li:nth-child(3) span {
      top: 21.2%;}      #case-study #falcon #modules .module-wrap {
      padding: 0 16px;}      #case-study #falcon .slider {
      padding-left: 16px;
      padding-right: 16px;}      #case-study #falcon .controls {
      padding: 0 16px;}      #case-study #falcon .phone-wrap {
      padding-left: 40px;
      padding-right: 40px;}  }    @media (
      max-width: 480px) {      #case-study #falcon .computer-components .text-wrap span {          font-size: 5px;
      letter-spacing: normal;}      #case-study #falcon .computer-components .text-wrap h4 {
      font-size: 7px;}      #case-study #falcon .computer-components .add-card .left {
      margin-bottom: 4px;}      #case-study #falcon .computer-components .card-type .left {
      float: left;}      #case-study #falcon .computer-components .card-type .text-wrap h4 {
      padding-bottom: 3px;}  }    #case-study #microsoft
      section:not(.get-in-touch) .constrain {      overflow: visible;}    #case-study #microsoft .marquee {
      background-color: #23a9f6;
      background-repeat: no-repeat;
      background-image: url(work/case-studies/microsoft/hero.jpg);
      background-position: center bottom;
      background-size: contain;}    @media only all and (
      -webkit-min-device-pixel-ratio: 1.3),  only all and (min--moz-device-pixel-ratio: 1.3),  only all and (-o-min-device-pixel-ratio: 1.3 / 1),  only all and (min-device-pixel-ratio: 1.3),  only all and (min-resolution: 1.3dppx) {      #case-study #microsoft .marquee {          background-image: url(work/case-studies/microsoft/hero@2x.jpg);}  }    #case-study #microsoft .marquee
      hr {      width: 60%;}    @media (
      max-width: 880px) {      #case-study #microsoft .marquee hr {          width: 100%;}  }    #case-study #microsoft .marquee .view-project
      span {      color: white;}    #case-study #microsoft .marquee .heading+
      figure {      display: none !important;
      background-image: url(sprites.png);
      background-repeat: no-repeat;
      background-position: 0 -105px;
      display: block;
      height: 80px;
      width: 80px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -40px 0 0 -40px;
      cursor: pointer;
      -moz-transition: opacity 300ms;
      -webkit-transition: opacity 300ms;
      transition: opacity 300ms;
      z-index: 4;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent;}    @media all and (
      -webkit-min-device-pixel-ratio: 2) {      #case-study #microsoft .marquee .heading+figure {          background-image: url(sprites_2x.png);
      background-size: 500px 500px;}  }    #case-study #microsoft .marquee .heading+
      figure.enable-hover:hover,  #case-study #microsoft .marquee .heading+figure.mobile-active:active {      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=70);
      opacity: 0.7;}    #case-study #microsoft .marquee+
      section {      padding-top: 0 !important;}    #case-study #microsoft .devices-wrapper {
      position: relative;
      margin-top: 66px;
      width: 100%;}    @media (
      max-width: 880px) {      #case-study #microsoft .devices-wrapper {          margin-top: 22px;
      width: 104%;
      margin-left: -2%;}  }    #case-study #microsoft .devices-wrapper
      span {      font-family: "adobe-garamond-pro", serif;
      font-weight: 400;
      font-style: italic;
      font-size: 18px;
      color: #737380;
      z-index: 1;}    @media (
      max-width: 880px) {      #case-study #microsoft .devices-wrapper span {          font-size: 14px;}  }    #case-study #microsoft .devices-platform {
      position: absolute;
      width: 100%;
      left: 0;
      top: -21px;
      text-align: center;}    @media (
      max-width: 880px) {      #case-study #microsoft .devices-platform {          top: -14px;}  }    #case-study #microsoft .devices-platform,  #case-study #microsoft .devices-wrapper
      ul li,  #case-study #microsoft .devices-wrapper svg>g>g,  #case-study #microsoft .devices-wrapper svg>g>g path {      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;}    #case-study #microsoft .devices-platform {
      -moz-transition: all 1000ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: all 1000ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: all 1000ms cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #case-study #microsoft .devices-wrapper
      ul li,  #case-study #microsoft .devices-wrapper svg>g>g,  #case-study #microsoft .devices-wrapper svg>g>g path {      -moz-transition: all 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: all 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: all 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #case-study #microsoft .devices-platform {
      -moz-transform: translateY(-20px);
      -ms-transform: translateY(-20px);
      -webkit-transform: translateY(-20px);
      transform: translateY(-20px);}    #case-study #microsoft .devices-wrapper
      svg>g>g path {      -moz-transform: translateY(-10px);
      -ms-transform: translateY(-10px);
      -webkit-transform: translateY(-10px);
      transform: translateY(-10px);}    #case-study #microsoft .devices-wrapper
      ul li {      -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
      -webkit-transform: translateY(10px);
      transform: translateY(10px);}    #case-study #microsoft .animate .devices-platform,  #case-study #microsoft .animate .devices-wrapper
      ul li,  #case-study #microsoft .animate .devices-wrapper svg>g>g,  #case-study #microsoft .animate .devices-wrapper svg>g>g path {      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;}    #case-study #microsoft .animate .devices-wrapper
      svg>g>g path,  #case-study #microsoft .animate .devices-platform,  #case-study #microsoft .animate .devices-wrapper ul li {      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -webkit-transform: translateY(0);
      transform: translateY(0);}    #case-study #microsoft .animate .devices-wrapper
      ul li:nth-child(1) {      -moz-transition-delay: 400ms;
      -webkit-transition-delay: 400ms;
      transition-delay: 400ms;}    #case-study #microsoft .animate .devices-wrapper
      ul li:nth-child(2) {      -moz-transition-delay: 500ms;
      -webkit-transition-delay: 500ms;
      transition-delay: 500ms;}    #case-study #microsoft .animate .devices-wrapper
      ul li:nth-child(3) {      -moz-transition-delay: 600ms;
      -webkit-transition-delay: 600ms;
      transition-delay: 600ms;}    #case-study #microsoft .animate .devices-wrapper
      ul li:nth-child(4) {      -moz-transition-delay: 700ms;
      -webkit-transition-delay: 700ms;
      transition-delay: 700ms;}    #case-study #microsoft .devices-wrapper
      svg>g>g:nth-child(5) {      -moz-transition-delay: 100ms;
      -webkit-transition-delay: 100ms;
      transition-delay: 100ms;}    #case-study #microsoft .devices-wrapper
      svg>g>g:nth-child(1) {      -moz-transition-delay: 200ms;
      -webkit-transition-delay: 200ms;
      transition-delay: 200ms;}    #case-study #microsoft .devices-wrapper
      svg>g>g:nth-child(1) path {      -moz-transition-delay: 400ms;
      -webkit-transition-delay: 400ms;
      transition-delay: 400ms;}    #case-study #microsoft .devices-wrapper
      svg>g>g:nth-child(2) {      -moz-transition-delay: 300ms;
      -webkit-transition-delay: 300ms;
      transition-delay: 300ms;}    #case-study #microsoft .devices-wrapper
      svg>g>g:nth-child(2) path {      -moz-transition-delay: 500ms;
      -webkit-transition-delay: 500ms;
      transition-delay: 500ms;}    #case-study #microsoft .devices-wrapper
      svg>g>g:nth-child(3) {      -moz-transition-delay: 400ms;
      -webkit-transition-delay: 400ms;
      transition-delay: 400ms;}    #case-study #microsoft .devices-wrapper
      svg>g>g:nth-child(3) path {      -moz-transition-delay: 600ms;
      -webkit-transition-delay: 600ms;
      transition-delay: 600ms;}    #case-study #microsoft .devices-wrapper
      svg>g>g:nth-child(4) {      -moz-transition-delay: 500ms;
      -webkit-transition-delay: 500ms;
      transition-delay: 500ms;}    #case-study #microsoft .devices-wrapper
      svg>g>g:nth-child(4) path {      -moz-transition-delay: 700ms;
      -webkit-transition-delay: 700ms;
      transition-delay: 700ms;}    #case-study #microsoft .devices-wrapper
      ul {      width: 100%;
      overflow: hidden;      *
      zoom: 1;
      margin: 34px 0 95px;}    #case-study #microsoft .devices-wrapper
      ul li {      float: left;
      width: 19%;
      text-align: center;}    #case-study #microsoft .devices-wrapper
      ul li:not(:last-child) {      margin-right: 8%;}    @media (
      max-width: 880px) {      #case-study #microsoft .devices-wrapper ul {          margin: 30px 0 51px;}  }    #case-study #microsoft .devices-svg {
      width: 100%;
      height: 100%;}    #case-study #microsoft .devices-svg .cls-1,  #case-study #microsoft .devices-svg .cls-3 {
      stroke: #dbdcdd;
      stroke-width: 1px;
      stroke-dasharray: 4, 2;
      fill: none;}    #case-study #microsoft .devices-svg .cls-2 {
      fill: #23a9f6;}    #case-study #microsoft .devices-svg .cls-2,  #case-study #microsoft .devices-svg .cls-3 {
      fill-rule: evenodd;}    #case-study #microsoft #devices {
      position: relative;
      margin: 100px auto 32px;
      z-index: 2;}    #case-study #microsoft .dashed {
      margin: 0;
      border-top-style: dashed;
      margin: 0 5%;}    @media (
      max-width: 880px) {      #case-study #microsoft .dashed {          margin: 0;}  }    #case-study #microsoft .effective-pixels-wrapper .original {
      width: 100%;
      height: auto;
      position: relative;
      cursor: move;
      background-repeat: no-repeat;
      background-image: url(work/case-studies/microsoft/effective-pixels.jpg);
      background-position: center center;
      background-size: contain;}    @media only all and (
      -webkit-min-device-pixel-ratio: 1.3),  only all and (min--moz-device-pixel-ratio: 1.3),  only all and (-o-min-device-pixel-ratio: 1.3 / 1),  only all and (min-device-pixel-ratio: 1.3),  only all and (min-resolution: 1.3dppx) {      #case-study #microsoft .effective-pixels-wrapper .original {          background-image: url(work/case-studies/microsoft/effective-pixels@2x.jpg);}  }    #case-study #microsoft .effective-pixels-wrapper {
      margin: 66px auto 67px;}    @media (
      max-width: 880px) {      #case-study #microsoft .effective-pixels-wrapper {          margin: 22px auto 29px;}  }    #case-study #microsoft .magno {
      position: absolute;
      top: 0;
      left: 0;
      margin: -9.7561% 0 0 -9.7561%;
      width: 19.5122%;
      height: 31.25%;
      border-radius: 50%;
      overflow: hidden;
      pointer-events: none;
      -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
      -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
      box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
      -moz-transform: scale(0.8, 0.8);
      -ms-transform: scale(0.8, 0.8);
      -webkit-transform: scale(0.8, 0.8);
      transform: scale(0.8, 0.8);}    #case-study #microsoft .magno:after {
      content: "";
      position: absolute;
      top: 0px;
      left: 0px;
      bottom: 0px;
      right: 0px;
      border-radius: 100%;
      border-color: #676b6f;
      border-width: 2px;
      border-style: solid;}    #case-study #microsoft .magno
      img {      pointer-events: none;
      position: absolute;
      top: 0;
      left: 0;
      margin: 50% 0 0 50%;
      display: block;
      width: 640.625%;
      height: 400%;
      max-width: 1025px;
      max-height: 639px;}    #case-study #microsoft
      blockquote {      font-family: "adobe-garamond-pro", serif;
      font-weight: 400;
      font-style: italic;
      font-size: 18px;
      color: #737380;
      line-height: 31px;
      margin-bottom: 68px;}    @media (
      max-width: 880px) {      #case-study #microsoft blockquote {          font-size: 14px;
      line-height: 25px;
      margin-bottom: 32px;}  }    #case-study #microsoft .responsive-cta {
      width: 100%;
      background-color: #e9f6fe;
      padding: 12px 40px;
      position: relative;
      margin-bottom: 100px;
      text-align: center;
      overflow: hidden;}    @media (
      max-width: 880px) {      #case-study #microsoft .responsive-cta {          margin-bottom: 56px;}  }    #case-study #microsoft .responsive-cta,  #case-study #microsoft .responsive-cta
      a {      color: #23a9f6;}    #case-study #microsoft .responsive-cta
      a {      text-decoration: underline;}    #case-study #microsoft .responsive-cta
      a.enable-hover:hover,  #case-study #microsoft .responsive-cta a.mobile-active:active {      text-decoration: none;}    #case-study #microsoft .pdf-svg {
      position: absolute;
      top: 50%;
      margin-top: -14px;
      left: 20px;}    #case-study #microsoft .pdf-svg .cls-1 {
      fill: #23a9f6;
      fill-rule: evenodd;}    #case-study #microsoft .responsive-cta
      span {      font-family: "Conv_CircularStd-Book", Helvetica, sans-serif;
      font-size: 12px;}    #case-study #microsoft .microsoft-grid {
      padding-top: 80px;}    @media (
      max-width: 880px) {      #case-study #microsoft .microsoft-grid {          padding-top: 46px;}  }    @media (
      max-width: 539px) {      #case-study #microsoft .microsoft-grid {          padding-top: 88px;}  }    #case-study #microsoft .microsoft-grid .info {
      float: left;
      width: 40%;
      background-color: white;}    @media (
      max-width: 539px) {      #case-study #microsoft .microsoft-grid .info {          margin-top: -45px;}  }    #case-study #microsoft .microsoft-grid .info
      h2 {      padding: 0;
      margin: 0 0 7px;}    #case-study #microsoft .microsoft-grid .info
      span,  #case-study #microsoft .microsoft-grid .info li {      color: #737380;}    #case-study #microsoft .microsoft-grid .info
      span {      font-family: "adobe-garamond-pro", serif;
      font-weight: 400;
      font-style: italic;
      font-size: 18px;}    @media (
      max-width: 880px) {      #case-study #microsoft .microsoft-grid .info span {          font-size: 14px;}  }    #case-study #microsoft .microsoft-grid .info
      ul {      margin-top: 70px;}    @media (
      max-width: 880px) {      #case-study #microsoft .microsoft-grid .info ul {          margin-top: 10px;}  }    #case-study #microsoft .microsoft-grid .info
      li {      font-family: "Conv_CircularStd-Book", Helvetica, sans-serif;
      font-size: 14px;
      margin-bottom: 3px;}    @media (
      max-width: 880px) {      #case-study #microsoft .microsoft-grid .info li {          font-size: 12px;}  }    #case-study #microsoft .microsoft-grid .grid {
      float: right;
      margin-top: -23px;
      width: 60%;
      overflow: hidden;
      background-color: white;}    #case-study #microsoft .microsoft-grid
      figure {      height: inherit;
      text-align: center;}    @media (
      max-width: 880px) {      #case-study #microsoft .microsoft-grid figure {          width: 100%;}  }    #case-study #microsoft .microsoft-grid
      figure img {      width: 100%;
      height: auto;}    #case-study #microsoft .nav-pane-svg .cls-1,  #case-study #microsoft .nav-pane-svg .cls-2 {
      stroke: #dbdcdd;}    #case-study #microsoft .nav-pane-svg .cls-1,  #case-study #microsoft .nav-pane-svg .cls-2,  #case-study #microsoft .nav-pane-svg .cls-3 {
      stroke-width: 1px;
      fill: none;}    #case-study #microsoft .nav-pane-svg .cls-2,  #case-study #microsoft .nav-pane-svg .cls-4,  #case-study #microsoft .nav-pane-svg .cls-5 {
      fill-rule: evenodd;}    #case-study #microsoft .nav-pane-svg .cls-3 {
      stroke: #e4e4e6;}    #case-study #microsoft .nav-pane-svg .cls-4 {
      fill: #dbdcdd;}    #case-study #microsoft .nav-pane-svg .cls-5 {
      fill: #23a9f6;}    #case-study #microsoft .patterns-wrapper {
      margin-top: 66px;
      padding-bottom: 66px;}    @media (
      max-width: 880px) {      #case-study #microsoft .patterns-wrapper {          margin-top: 25px;
      padding-bottom: 25px;}  }    #case-study #microsoft .patterns-wrapper
      svg {      width: 100%;
      height: 100%;}    #case-study #microsoft .patterns-wrapper
      svg .cls-1:first-child {      stroke-width: 2px;}    #case-study #microsoft .patterns-wrapper .build-animation,  #case-study #microsoft .patterns-wrapper
      figcaption {      -moz-transition: all 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: all 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: all 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;}    #case-study #microsoft .patterns-wrapper
      figcaption {      -moz-transform: translateX(-10px);
      -ms-transform: translateX(-10px);
      -webkit-transform: translateX(-10px);
      transform: translateX(-10px);}    #case-study #microsoft .animate .patterns-wrapper .build-animation,  #case-study #microsoft .animate .patterns-wrapper
      figcaption {      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;}    #case-study #microsoft .animate .patterns-wrapper
      figcaption {      -moz-transform: translateX(0);
      -ms-transform: translateX(0);
      -webkit-transform: translateX(0);
      transform: translateX(0);}    #case-study #microsoft .patterns-wrapper
      ul li:nth-child(1) {      -moz-transition-delay: 100ms;
      -webkit-transition-delay: 100ms;
      transition-delay: 100ms;}    #case-study #microsoft .patterns-wrapper
      ul li:nth-child(1) .build-animation:nth-child(1) {      -moz-transition-delay: 200ms;
      -webkit-transition-delay: 200ms;
      transition-delay: 200ms;}    #case-study #microsoft .patterns-wrapper
      ul li:nth-child(1) .build-animation:nth-child(2) {      -moz-transition-delay: 300ms;
      -webkit-transition-delay: 300ms;
      transition-delay: 300ms;}    #case-study #microsoft .patterns-wrapper
      ul li:nth-child(1) .build-animation:nth-child(3) {      -moz-transition-delay: 400ms;
      -webkit-transition-delay: 400ms;
      transition-delay: 400ms;}    #case-study #microsoft .patterns-wrapper
      ul li:nth-child(1) .build-animation:nth-child(4) {      -moz-transition-delay: 500ms;
      -webkit-transition-delay: 500ms;
      transition-delay: 500ms;}    #case-study #microsoft .patterns-wrapper
      ul li:nth-child(1) .build-animation:nth-child(5) {      -moz-transition-delay: 600ms;
      -webkit-transition-delay: 600ms;
      transition-delay: 600ms;}    #case-study #microsoft .patterns-wrapper
      ul li:nth-child(1) .build-animation:nth-child(6) {      -moz-transition-delay: 700ms;
      -webkit-transition-delay: 700ms;
      transition-delay: 700ms;}    #case-study #microsoft .patterns-wrapper
      ul li:nth-child(1) .build-animation:nth-child(7) {      -moz-transition-delay: 800ms;
      -webkit-transition-delay: 800ms;
      transition-delay: 800ms;}    #case-study #microsoft .patterns-wrapper
      ul li:nth-child(1) figcaption {      -moz-transition-delay: 600ms;
      -webkit-transition-delay: 600ms;
      transition-delay: 600ms;}    #case-study #microsoft .patterns-wrapper
      ul li:nth-child(2) {      -moz-transition-delay: 200ms;
      -webkit-transition-delay: 200ms;
      transition-delay: 200ms;}    #case-study #microsoft .patterns-wrapper
      ul li:nth-child(2) .build-animation:nth-child(1) {      -moz-transition-delay: 300ms;
      -webkit-transition-delay: 300ms;
      transition-delay: 300ms;}    #case-study #microsoft .patterns-wrapper
      ul li:nth-child(2) .build-animation:nth-child(2) {      -moz-transition-delay: 400ms;
      -webkit-transition-delay: 400ms;
      transition-delay: 400ms;}    #case-study #microsoft .patterns-wrapper
      ul li:nth-child(2) .build-animation:nth-child(3) {      -moz-transition-delay: 500ms;
      -webkit-transition-delay: 500ms;
      transition-delay: 500ms;}    #case-study #microsoft .patterns-wrapper
      ul li:nth-child(2) .build-animation:nth-child(4) {      -moz-transition-delay: 600ms;
      -webkit-transition-delay: 600ms;
      transition-delay: 600ms;}    #case-study #microsoft .patterns-wrapper
      ul li:nth-child(2) .build-animation:nth-child(5) {      -moz-transition-delay: 700ms;
      -webkit-transition-delay: 700ms;
      transition-delay: 700ms;}    #case-study #microsoft .patterns-wrapper
      ul li:nth-child(2) .build-animation:nth-child(6) {      -moz-transition-delay: 800ms;
      -webkit-transition-delay: 800ms;
      transition-delay: 800ms;}    #case-study #microsoft .patterns-wrapper
      ul li:nth-child(2) figcaption {      -moz-transition-delay: 700ms;
      -webkit-transition-delay: 700ms;
      transition-delay: 700ms;}    #case-study #microsoft .patterns-wrapper
      ul li:nth-child(3) {      -moz-transition-delay: 300ms;
      -webkit-transition-delay: 300ms;
      transition-delay: 300ms;}    #case-study #microsoft .patterns-wrapper
      ul li:nth-child(3) .build-animation:nth-child(1) {      -moz-transition-delay: 400ms;
      -webkit-transition-delay: 400ms;
      transition-delay: 400ms;}    #case-study #microsoft .patterns-wrapper
      ul li:nth-child(3) .build-animation:nth-child(2) {      -moz-transition-delay: 500ms;
      -webkit-transition-delay: 500ms;
      transition-delay: 500ms;}    #case-study #microsoft .patterns-wrapper
      ul li:nth-child(3) .build-animation:nth-child(3) {      -moz-transition-delay: 600ms;
      -webkit-transition-delay: 600ms;
      transition-delay: 600ms;}    #case-study #microsoft .patterns-wrapper
      ul li:nth-child(3) .build-animation:nth-child(4) {      -moz-transition-delay: 700ms;
      -webkit-transition-delay: 700ms;
      transition-delay: 700ms;}    #case-study #microsoft .patterns-wrapper
      ul li:nth-child(3) .build-animation:nth-child(5) {      -moz-transition-delay: 800ms;
      -webkit-transition-delay: 800ms;
      transition-delay: 800ms;}    #case-study #microsoft .patterns-wrapper
      ul li:nth-child(3) .build-animation:nth-child(6) {      -moz-transition-delay: 900ms;
      -webkit-transition-delay: 900ms;
      transition-delay: 900ms;}    #case-study #microsoft .patterns-wrapper
      ul li:nth-child(3) .build-animation:nth-child(7) {      -moz-transition-delay: 1000ms;
      -webkit-transition-delay: 1000ms;
      transition-delay: 1000ms;}    #case-study #microsoft .patterns-wrapper
      ul li:nth-child(3) figcaption {      -moz-transition-delay: 800ms;
      -webkit-transition-delay: 800ms;
      transition-delay: 800ms;}    #case-study #microsoft .patterns-wrapper
      ul li:nth-child(4) {      -moz-transition-delay: 400ms;
      -webkit-transition-delay: 400ms;
      transition-delay: 400ms;}    #case-study #microsoft .patterns-wrapper
      ul li:nth-child(4) .build-animation:nth-child(1) {      -moz-transition-delay: 500ms;
      -webkit-transition-delay: 500ms;
      transition-delay: 500ms;}    #case-study #microsoft .patterns-wrapper
      ul li:nth-child(4) .build-animation:nth-child(2) {      -moz-transition-delay: 600ms;
      -webkit-transition-delay: 600ms;
      transition-delay: 600ms;}    #case-study #microsoft .patterns-wrapper
      ul li:nth-child(4) .build-animation:nth-child(3) {      -moz-transition-delay: 700ms;
      -webkit-transition-delay: 700ms;
      transition-delay: 700ms;}    #case-study #microsoft .patterns-wrapper
      ul li:nth-child(4) .build-animation:nth-child(4) {      -moz-transition-delay: 800ms;
      -webkit-transition-delay: 800ms;
      transition-delay: 800ms;}    #case-study #microsoft .patterns-wrapper
      ul li:nth-child(4) figcaption {      -moz-transition-delay: 900ms;
      -webkit-transition-delay: 900ms;
      transition-delay: 900ms;}    #case-study #microsoft .patterns-wrapper
      figcaption {      margin-top: 13px;}    #case-study #microsoft .patterns-wrapper
      figcaption {      color: #737380;
      font-family: "adobe-garamond-pro", serif;
      font-weight: 400;
      font-style: italic;
      font-size: 18px;}    @media (
      max-width: 880px) {      #case-study #microsoft .patterns-wrapper figcaption {          font-size: 14px;}  }    #case-study #microsoft .patterns-wrapper
      ul {      overflow: hidden;      *
      zoom: 1;}    #case-study #microsoft .patterns-wrapper
      li {      float: left;
      margin-bottom: 35px;
      width: 45%;
      max-width: 375px;}    #case-study #microsoft .patterns-wrapper
      li:nth-child(odd) {      margin-right: 10%;}    #case-study #microsoft .tabs-svg .cls-1 {
      stroke: #dbdcdd;
      stroke-width: 1px;
      fill: none;}    #case-study #microsoft .tabs-svg .cls-2 {
      fill: #dbdcdd;}    #case-study #microsoft .tabs-svg .cls-2,  #case-study #microsoft .tabs-svg .cls-3 {
      fill-rule: evenodd;}    #case-study #microsoft .tabs-svg .cls-3 {
      fill: #23a9f6;}    #case-study #microsoft .pivots-svg .cls-1,  #case-study #microsoft .pivots-svg .cls-2 {
      stroke: #dbdcdd;
      stroke-width: 1px;
      fill: none;}    #case-study #microsoft .pivots-svg .cls-2 {
      fill-rule: evenodd;}    #case-study #microsoft .pivots-svg .cls-3 {
      fill: #23a9f6;}    #case-study #microsoft .pivots-svg .cls-4 {
      fill: #dbdcdd;}    #case-study #microsoft .active-canvas .cls-1 {
      stroke: #dbdcdd;
      stroke-width: 1px;
      fill: none;}    #case-study #microsoft .active-canvas .cls-2 {
      fill: #dbdcdd;
      fill-rule: evenodd;}    #case-study #microsoft .alt-1 {
      background-color: #2f2643;}    #case-study #microsoft .alt-1
      h2,  #case-study #microsoft .alt-1 p {      color: white;}    #case-study #microsoft .swiper-app-selector {
      max-width: 1120px;}    #case-study #microsoft .app-selector {
      text-align: center;
      position: relative;
      margin-top: 66px;}    @media (
      max-width: 880px) {      #case-study #microsoft .app-selector {          margin-top: 25px;}  }    #case-study #microsoft .app-selector
      li {      position: relative;
      display: inline-block;
      width: 186px;}    @media (
      max-width: 880px) {      #case-study #microsoft .app-selector li {          width: 140px;}  }    @media (
      max-width: 539px) {      #case-study #microsoft .app-selector li {          width: 120px;}  }    #case-study #microsoft .app-selector
      figure {      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%;
      border: 1px dashed #605872;
      position: relative;
      -moz-transition: border 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: border 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: border 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      cursor: pointer;
      margin: 0 8px;}    #case-study #microsoft .app-selector
      figure img {      position: relative;
      width: 100%;
      height: auto;}    #case-study #microsoft .app-selector
      figure.enable-hover:hover,  #case-study #microsoft .app-selector figure.mobile-active:active,  #case-study #microsoft .app-selector figure.active {      background-color: white;
      border-style: solid;
      border-color: white;}    #case-study #microsoft .app-selector
      figure.enable-hover:hover .cls-1,  #case-study #microsoft .app-selector figure.mobile-active:active .cls-1,  #case-study #microsoft .app-selector figure.active .cls-1 {      fill: #2f2643;}    #case-study #microsoft .app-selector
      figcaption {      color: white;
      font-size: 18px;
      font-family: "adobe-garamond-pro", serif;
      font-weight: 400;
      font-style: italic;
      margin-top: 16px;}    @media (
      max-width: 880px) {      #case-study #microsoft .app-selector figcaption {          font-size: 14px;}  }    #case-study #microsoft .app-selector
      figure svg {      position: absolute;
      left: 50%;
      top: 50%;}    #case-study #microsoft .app-selector
      figure svg .cls-1 {      -moz-transition: fill 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: fill 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: fill 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      fill: white;
      fill-rule: evenodd;}    #case-study #microsoft .app-selector .running-svg {
      width: 58.844px;
      height: 60px;
      margin: -30px 0 0 -29px;}    @media (
      max-width: 880px) {      #case-study #microsoft .app-selector .running-svg {          width: 44.133px;
      height: 45px;
      margin: -23px 0 0 -22px;}  }    @media (
      max-width: 539px) {      #case-study #microsoft .app-selector .running-svg {          width: 35.3064px;
      height: 36px;
      margin: -18px 0 0 -18px;}  }    #case-study #microsoft .app-selector .food-svg {
      width: 79.031px;
      height: 48.72px;
      margin: -24px 0 0 -40px;}    @media (
      max-width: 880px) {      #case-study #microsoft .app-selector .food-svg {          width: 59.27325px;
      height: 36.54px;
      margin: -18px 0 0 -30px;}  }    @media (
      max-width: 539px) {      #case-study #microsoft .app-selector .food-svg {          width: 47.4186px;
      height: 29.232px;
      margin: -15px 0 0 -24px;}  }    #case-study #microsoft .app-selector .news-svg {
      width: 49px;
      height: 70px;
      margin: -35px 0 0 -25px;}    @media (
      max-width: 880px) {      #case-study #microsoft .app-selector .news-svg {          width: 36.75px;
      height: 52.5px;
      margin: -26px 0 0 -18px;}  }    @media (
      max-width: 539px) {      #case-study #microsoft .app-selector .news-svg {          width: 29.4px;
      height: 42px;
      margin: -21px 0 0 -15px;}  }    #case-study #microsoft .app-selector .creation-svg {
      width: 53px;
      height: 57px;
      margin: -29px 0 0 -27px;}    @media (
      max-width: 880px) {      #case-study #microsoft .app-selector .creation-svg {          width: 39.75px;
      height: 42.75px;
      margin: -21px 0 0 -20px;}  }    @media (
      max-width: 539px) {      #case-study #microsoft .app-selector .creation-svg {          width: 31.8px;
      height: 34.2px;
      margin: -17px 0 0 -16px;}  }    #case-study #microsoft .app-selector .collaboration-svg {
      width: 60px;
      height: 60px;
      margin: -30px 0 0 -30px;}    @media (
      max-width: 880px) {      #case-study #microsoft .app-selector .collaboration-svg {          width: 45px;
      height: 45px;
      margin: -23px 0 0 -23px;}  }    @media (
      max-width: 539px) {      #case-study #microsoft .app-selector .collaboration-svg {          width: 36px;
      height: 36px;
      margin: -18px 0 0 -18px;}  }    #case-study #microsoft .app-selector .finances-svg {
      width: 34.32px;
      height: 60px;
      margin: -30px 0 0 -17px;}    @media (
      max-width: 880px) {      #case-study #microsoft .app-selector .finances-svg {          width: 25.74px;
      height: 45px;
      margin: -23px 0 0 -13px;}  }    @media (
      max-width: 539px) {      #case-study #microsoft .app-selector .finances-svg {          width: 20.592px;
      height: 36px;
      margin: -18px 0 0 -10px;}  }    #case-study #microsoft .apps-copy
      li {      display: none;}    #case-study #microsoft .apps-copy
      li.active {      display: block;}    #case-study #microsoft .apps-wrapper {
      position: relative;
      width: 100%;
      margin-top: 53px;
      padding-bottom: 100px;}    @media (
      max-width: 880px) {      #case-study #microsoft .apps-wrapper {          margin-top: 14px;
      padding-bottom: 80px;}  }    @media (
      max-width: 539px) {      #case-study #microsoft .apps-wrapper {          padding-bottom: 56px;}  }    #case-study #microsoft .apps-container {
      position: relative;
      width: 100%;}    #case-study #microsoft .apps-container
      li {      text-align: center;
      background-color: #2f2643;}    #case-study #microsoft .apps-container .app-wrap {
      position: relative;
      max-width: 1440px;
      margin: 0 auto;}    @media (
      max-width: 880px) {      #case-study #microsoft .apps-container .app-wrap {          width: 140%;
      margin-left: -20%;}  }    #case-study #microsoft .apps-container .app-wrap
      img,  #case-study #microsoft .apps-container .app-wrap svg {      position: relative;
      width: 100%;
      height: 100%;}    #case-study #microsoft .apps-container .app-wrap
      svg {      z-index: 2;}    #case-study #microsoft .apps-container .app-wrap
      figure {      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      width: 100%;
      text-align: center;}    #case-study #microsoft .apps-container .app-wrap
      figure img {      display: none;}    #case-study #microsoft .apps-container .app-wrap
      figure img.active {      display: inline;}    #case-study #microsoft .apps-container .app-wrap+
      figcaption {      position: relative;
      width: 100%;
      max-width: 820px;
      margin: 20px auto 0 auto;
      text-indent: 36px;
      color: white;
      font-size: 18px;
      font-family: "adobe-garamond-pro", serif;
      font-weight: 400;
      font-style: italic;
      text-align: left;}    @media (
      max-width: 880px) {      #case-study #microsoft .apps-container .app-wrap+figcaption {          width: 100%;
      text-align: center;
      left: 0;
      font-size: 14px;
      text-indent: 0;}  }    #case-study #microsoft .alt-2 {
      background-color: #121214;
      padding-bottom: 100px;}    @media (
      max-width: 880px) {      #case-study #microsoft .alt-2 {          padding-bottom: 56px;}  }    #case-study #microsoft .alt-2
      h2 {      color: white;}    #case-study #microsoft .video {
      overflow: hidden;
      margin-top: 53px;}    @media (
      max-width: 880px) {      #case-study #microsoft .video {          margin-top: 18px;}  }    #case-study #microsoft .pagination {
      position: absolute;
      top: 50%;
      margin-top: -75px;
      height: 150px;
      width: 150px;
      border-radius: 75px;
      border: 1px dashed #cccccc;
      cursor: pointer;
      -moz-transition: border-color 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: border-color 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: border-color 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      clear: both;
      z-index: 2;}    @media (
      max-width: 1279px) {      #case-study #microsoft .pagination {          display: none;}  }    #case-study #microsoft .pagination.enable-hover:hover,  #case-study #microsoft .pagination.mobile-active:active {
      border-color: black;}    #case-study #microsoft .pagination.enable-hover:hover
      figcaption,  #case-study #microsoft .pagination.enable-hover:hover .arrow-svg,  #case-study #microsoft .pagination.mobile-active:active figcaption,  #case-study #microsoft .pagination.mobile-active:active .arrow-svg {      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;}    #case-study #microsoft .pagination.enable-hover:hover.pag-left
      figcaption,  #case-study #microsoft .pagination.mobile-active:active.pag-left figcaption {      -moz-transform: translateX(100%);
      -ms-transform: translateX(100%);
      -webkit-transform: translateX(100%);
      transform: translateX(100%);}    #case-study #microsoft .pagination.enable-hover:hover.pag-left .arrow-svg,  #case-study #microsoft .pagination.mobile-active:active.pag-left .arrow-svg {
      margin-left: 16px;}    #case-study #microsoft .pagination.enable-hover:hover.pag-right
      figcaption,  #case-study #microsoft .pagination.mobile-active:active.pag-right figcaption {      -moz-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);}    #case-study #microsoft .pagination.enable-hover:hover.pag-right .arrow-svg,  #case-study #microsoft .pagination.mobile-active:active.pag-right .arrow-svg {
      margin-right: 16px;}    #case-study #microsoft .pagination
      figcaption {      font-family: "adobe-garamond-pro", serif;
      font-weight: 400;
      font-style: italic;
      font-size: 18px;
      color: #737380;
      position: absolute;
      top: 50%;
      margin-top: -12px;}    #case-study #microsoft .pagination .arrow-svg {
      position: absolute;
      top: 50%;
      margin-top: -4px;}    #case-study #microsoft .pagination
      figcaption,  #case-study #microsoft .pagination .arrow-svg {      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      -moz-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      -webkit-transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);}    #case-study #microsoft .pag-left {
      left: -75px;}    #case-study #microsoft .pag-left .arrow-svg {
      -moz-transform: rotate(-180deg);
      -ms-transform: rotate(-180deg);
      -webkit-transform: rotate(-180deg);
      transform: rotate(-180deg);
      left: 50%;
      margin-left: 32px;}    #case-study #microsoft .pag-left .pag-wrap {
      float: right;}    #case-study #microsoft .pag-left
      figcaption {      right: -20px;}    #case-study #microsoft .pag-left .mobile-pag {
      right: -12px;}    #case-study #microsoft .pag-left .tablet-pag {
      right: -27px;}    #case-study #microsoft .pag-left .tablet-pag
      svg {      -moz-transform: rotate(-180deg);
      -ms-transform: rotate(-180deg);
      -webkit-transform: rotate(-180deg);
      transform: rotate(-180deg);}    #case-study #microsoft .pag-left .desktop-pag {
      right: -30px;}    #case-study #microsoft .pag-left .tv-pag {
      right: -25px;}    #case-study #microsoft .pag-right {
      right: -75px;}    #case-study #microsoft .pag-right .arrow-svg {
      right: 50%;
      margin-right: 32px;}    #case-study #microsoft .pag-right .pag-wrap {
      float: left;}    #case-study #microsoft .pag-right
      figcaption {      left: -20px;}    #case-study #microsoft .pag-right .mobile-pag {
      left: -12px;}    #case-study #microsoft .pag-right .tablet-pag {
      left: -27px;}    #case-study #microsoft .pag-right .desktop-pag {
      left: -30px;}    #case-study #microsoft .pag-right .tv-pag {
      left: -25px;}    #case-study #microsoft .pag-wrap {
      position: absolute;
      top: 50%;
      margin-top: -20px;
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      pointer-events: none;
      -moz-transition: opacity 300ms;
      -webkit-transition: opacity 300ms;
      transition: opacity 300ms;}    #case-study #microsoft .pag-wrap
      svg {      position: relative;}    #case-study #microsoft .cls-1 {
      fill: black;
      fill-rule: evenodd;}    #case-study #microsoft .cls-2 {
      fill: white;}    #case-study #microsoft .pag-wrap.active {
      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;
      pointer-events: auto;}    #case-study #microsoft .pagination-mobile {
      display: none;
      position: absolute;
      width: 100%;
      max-width: 820px;
      margin: 0 auto;
      height: 8px;
      z-index: 2;}    @media (
      max-width: 539px) {      #case-study #microsoft .pagination-mobile {          height: 4px;}  }    #case-study #microsoft .pagination-mobile .swiper-pagination-bullet {
      width: 8px;
      height: 8px;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      border-radius: 4px;
      background-color: #cccccc;
      float: left;
      margin-right: 20px;
      cursor: pointer;}    @media (
      max-width: 539px) {      #case-study #microsoft .pagination-mobile .swiper-pagination-bullet {          margin-right: 10px;
      width: 4px;
      height: 4px;}  }    #case-study #microsoft .pagination-mobile .swiper-pagination-bullet-active {
      background-color: black;}    @media (
      max-width: 1279px) {      #case-study #microsoft .pagination-mobile {          display: block;}  }    #case-study #microsoft .pagination-mobile-grid {
      bottom: 20px;}    @media (
      max-width: 539px) {      #case-study #microsoft .pagination-mobile-grid {          bottom: 12px;}  }    #case-study #microsoft .pagination-mobile-apps {
      bottom: 40px;}    @media (
      max-width: 539px) {      #case-study #microsoft .pagination-mobile-apps {          bottom: 35px;}  }    #case-study #microsoft .apps-wrapper .pagination {
      border-color: #737380;
      margin-top: -166px;}    #case-study #microsoft .apps-wrapper .pagination.enable-hover:hover,  #case-study #microsoft .apps-wrapper .pagination.mobile-active:active {
      border-color: white;}    #case-study #microsoft .apps-wrapper .cls-1 {
      fill: white;}    #case-study #microsoft .apps-wrapper .cls-2 {
      fill: #2f2643;}    #case-study #microsoft .apps-wrapper
      figcaption {      color: white;}    #case-study #microsoft .apps-wrapper .pagination-mobile {
      z-index: 3;
      max-width: 100%;
      text-align: center;}    #case-study #microsoft .apps-wrapper .pagination-mobile .swiper-pagination-bullet {
      background-color: #cccccc;
      display: inline-block;
      float: none;}    #case-study #microsoft .apps-wrapper .pagination-mobile .swiper-pagination-bullet-active {
      background-color: white;}    #case-study #microsoft .swiper-container {
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent;
      z-index: 1;}    #case-study #microsoft .swiper-wrapper {
      z-index: 1;}    .op {
      opacity: 0.8 !important;  }    .ib-component
      nav ul {      height: 189px;  }    .div-center {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);      /*    This doesn't work    margin-left: -25%;    margin-top: -25%;    */
      width: 300px;
      height: 197px;
      padding: 20px;
      color: white;
      text-align: center;
      /* box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); */  }    .logo-chargement {
      margin-left: auto;
      margin-right: auto;
      display: block;
      width: 425px;
      margin-top: -110px;  }    .nav-pills>
      li.active>a,  .nav-pills>li.active>a:focus,  .nav-pills>li.active>a:hover {      color: #ff2261;
      background-color: #eee;  }
      section {      margin-top: 0px;  }
      section:first-of-type {      margin-top: -41px;  }    .page-heading {
      padding: 20px 0 40px;
      text-align: center;  }    .divider {
      border-bottom: 1px solid #ccc;  }    #fake-footer {
      height: 600px;
      widith: 100%;
      background: #ccc;  }
      li a {      transition-duration: 1s;  }      /* Helpers for top position on internal page links  ====================================================*/    #topPos:before,
      h3:before {      display: block;
      content: " ";
      margin-top: -80px;
      height: 80px;
      visibility: hidden;  }      /* AFFIX STYLES  ====================================================*/    .panel-affix {
      min-width: 225px;
      margin-top: 152px;
      font-size: 14px;  }    .affix {
      position: fixed;
      z-index: 9999;
      right: 28px;  }
      span>.nav>li>a {    padding-left: 20px;
      padding-right: 20px;
      padding-top: 28px;
      padding-bottom: 20px;
      height: 84px;
      font-weight: bold;
      color: #757575;
      text-transform: uppercase;
      font-size: 12px;  }  .nav-pills>
      li>a {      color:black;
      font-weight: bold;
      color: #757575;
      text-transform: uppercase;
      font-size: 11px;  }  .menu-top-page>
      li>a:focus, .menu-top-page>li>a:hover {      text-decoration: none;
      color: black !important;
      border-bottom: 4px solid #ff0762;
      -webkit-transition: width 2s; /* Safari */
      transition: border 0.4s;  }    .menu-top-page>.active {
      text-decoration: none;
      /* background-color: #a7a7a7; */
      border-bottom: 1px solid #31388d;
      color: black;  }    .menu-top-page>.active>
      a{    color: black !important;
      /*border-bottom: 5px solid #ff0762;*/  }  .overview {
      font-style: normal !important;
      font-size: 16px !important;
      color: #3b3b3e !important;
      line-height: 35px !important;
      font-family: Oswald !important;
      /* padding-bottom: 25px; */
      z-index: 338;  }  .italic-gras {
      font-family: "adobe-garamond-pro", serif !important;
      font-weight: 400 !important;
      font-style: italic !important;
      font-size: 32px !important;
      color: #9898a6 !important;
      margin-bottom: 19px;
      line-height: 48px !important;  }  .nav-stacked>
      li>a:hover {      text-decoration: none;
      color: #ff2361;  }  .panel-default>.panel-heading{
      font-weight: bold;
      color: #757575;
      text-transform: uppercase;
      font-size: 11px;  }  .overview1{
      font-style: normal !important;
      font-size: 16px !important;
      color: #737380 !important;
      line-height: 35px !important;
      padding-bottom: 25px;
      font-family: Oswald !important;  }  .overview2{
      font-style: normal !important;
      font-size: 16px !important;
      color: #737380 !important;
      line-height: 35px !important;
      padding-bottom: 25px;
      font-family: Oswald !important;  }  .block-section-1{
      background-color: #333;  }  .strong-title{
      color: white;
      font-size: 30px;
      font-family: Oswald !important;  }  .p-block-section{
      font-family: Oswald !important;
      color: white;
      padding-bottom: 15px !important;
      font-size: 17px !important;  }  .p-color{
      color:white;  }  .h-strong{
      padding-bottom: 2px;  }  .content-grid-content{
      padding-top:40px;
      padding-bottom:40px;  }    .my-container::before  {
      content: " ";
      position: fixed;
      background: url('Sans-titre-2.gif');
      opacity: 0.1;
      width: 99%;
      height: 100%;
      top: 0;
      z-index: 3;  }  .menu-top-page
      li ul {     /* Position absolu */     /*width: 144px;*/ /* Largeur des sous-listes */     left: -999em; /* Hop, on envoi loin du champ de vision */
      position: absolute;  }  .menu-top-page
      li:hover ul ul, .menu-top-page li.sfhover ul ul   {   left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */  }    .menu-top-page
      li:hover ul, .menu-top-page li li:hover ul, .menu-top-page li.sfhover ul, .menu-top-page li li.sfhover ul    {   left: auto; /* Repositionnement normal */
      min-height: auto; /* Corrige un bug */
      border-top: 5px solid #ff0762;
      -webkit-transition: width 2s;
      transition: border 0.4s;
      /* top: 79px; */  }  .menu-top-page
      li ul li  {   /* pour ie qui ne reconnait pas "transparent" (comme précédement) */   /* border: 1px solid #CCCCCC; */ /* on met une bordure blanche en haut de chaque élément d'une sous liste */   font-size: 5px;
      background-color: #eeecec;
      font-weight: normal;
      text-align: left;
      color: #666666;
      height: 28px;
      line-height: 28px;
      min-width: 217px;
      width: max-content;
      padding-right: 10px;
      text-indent: 10px;
      /* float: right; */
      font-weight: bold;  }  .menu-top-page
      li ul li a  {    color: black;
      /* font-weight: bold; */
      /* text-transform: uppercase; */
      font-size: 9px;  }    .menu-top-page
      span {   margin-right: 20px;
      padding-left: 9px;
      padding-right: 16px;
      background: url("https://png.icons8.com/metro/540/expand-arrow.png") no-repeat scroll right center transparent;
      font-size: 14px;
      width:20px;
      height:20px;  }    .menu-top-page
      li ul li ul {            /* position: relative; */            width: 223px;
      border-top: none !important;
      -webkit-transition: width 2s;
      transition: border 0.4s;
      left:  !important;
      right: -223px;
      margin-top: -20px;  }    @media (
      max-width: 880px) {  #menu nav>ul>li {      width: 50%;
      float: left;
      height: 25%;  }    #menu nav>ul>li:first-child{
      height:50% !important;  }  }    .table>
      caption+thead>tr:first-child>td, .table>caption+thead>tr:first-child>th, .table>colgroup+thead>tr:first-child>td, .table>colgroup+thead>tr:first-child>th, .table>thead:first-child>tr:first-child>td, .table>thead:first-child>tr:first-child>th {      border-top: 0;
      font-family: Oswald;  }    .table>
      thead>tr>th {      vertical-align: bottom;
      border-bottom: 2px solid #ddd;
      font-family: Oswald;  }    .table>
      tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {      padding: 8px;
      line-height: 1.42857143;
      vertical-align: top;
      border-top: 1px solid #ddd !important;
      font-family: Oswald;  }  .nav-tabs>
      li>a {      margin-right: 0px;
      line-height: 1.42857143;
      border: 1px solid transparent;
      border-radius: 4px 4px 0 0;
      font-size: 12px;
      font-family: Oswald;  }  .checkbox
      input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio] {      position: absolute;
      margin-top: 4px \9;
      margin-left: -16px;
      margin-top: 10px;  }  .div-row {
      padding: 11px;
      font-size: 12px;
      /* line-height: 101px; */
      text-align :center;
      font-family: Oswald;
      background: #ff1555;  }      .progress-2 {
      font-family: Oswald;
      font-weight: 700;
      font-style: normal;
      font-size: 11px;
      text-transform: capitalize;
      color: #121212;
      display: inline-block;
      padding: 37px 0;
      background: transparent;
      border: none;
      box-shadow: none;  }  .multiple-pre{
      height: 216px;
      margin-top: 13px;
      width: 100%;  }            .label{
      font-family: Oswald;
      font-size: 14px;
      color:black;  }      .progress-3{
      background: #ff1555;
      color: white;
      padding: 11px;
      float: right;
      font-family: Oswald;
      font-weight: 700;
      font-style: normal;
      font-size: 11px;
      border: 0;
      margin-bottom: 5px;  }  #wpadminbar {
      direction: ltr;
      color: #ccc;
      font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
      height: 32px;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      min-width: 600px;
      z-index: 10000000000000000000000;
      background: #23282d;  }  .float-right{
      float: right;
      /*margin: 14px;*/
      margin: 14px 14px 0px 14px;
      text-align: center;
      color: #fe326c;
      width: 133px;
      font-family: Oswald !important;
      margin-left: 19px;  }  .paragraph{
      color: #fe326c !important;
      font-family: Oswald !important;
      font-size: 12px !important;  }    .panel-title>.small, .panel-title>.small>
      a, .panel-title>a, .panel-title>small, .panel-title>small>a {      color: inherit;
      font-family: Oswald !important;  }  #demo1{
      display:none;  }     .cuadro_intro_hover:hover .caption{
      opacity: 1;
      transform: translateY(-150px);
      -webkit-transform:translateY(-150px);
      -moz-transform:translateY(-150px);
      -ms-transform:translateY(-150px);
      -o-transform:translateY(-150px);   }   .cuadro_intro_hover
      img{    z-index: 4;
      opacity: 0.7;
      filter: alpha(opacity=30);
      padding-left: 10px;   }   .cuadro_intro_hover .caption{
      position: absolute;
      top:150px;
      -webkit-transition:all 0.3s ease-in-out;
      -moz-transition:all 0.3s ease-in-out;
      -o-transition:all 0.3s ease-in-out;
      -ms-transition:all 0.3s ease-in-out;
      transition:all 0.3s ease-in-out;
      width: 100%;   }   .cuadro_intro_hover .blur{
      height: 300px;
      z-index: 5;
      position: absolute;
      width: 100%;   }   .cuadro_intro_hover .caption-text{
      z-index: 10;
      color: #fff;
      position: absolute;
      padding-left: 14px;
      padding-right: 14px;
      height: 300px;
      text-align: center;
      top: -47.7px;
      width: 100%;
      left: 8px;   }      .hover-p{
      font-family: Oswald !important;
      font-style: italic;
      font-size: 15px !important;
      color: white !important;
      margin-top: 44px;
      line-height: 19px !important;
      text-align: center !important;   }   .text-grid{
      /* overflow:hidden; */
      width: 16.66666667%;   }      .float-left{
      float: left;
      /*margin: 6px;*/
      margin: 0px 16px 6px 0px;
      text-align: center;
      color: #fe326c;
      width: auto;
      box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2), 0 4px 20px 0 rgba(0,0,0,0.19);
      font-family: Oswald !important;
      /*margin-left: 19px;*/  }  .table-bordered
      td {      text-align:center;  }  .table-bordered
      th {      text-align:center;  }  .total-color{
      color:black;  }  .total{
      background: #eaeaea;  }  .chart
      ul li  {            color: white;
      font-size: 13px;  }    .chart
      ul  {           margin-right : 15px !important;
      margin-left: 89px !important;
      font-family: Oswald !important;  }  .strong-title-1 {
      color: white;
      font-size: 25px;
      font-family: Oswald !important;
      font-family: Oswald !important;  }        .card-box{
      box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2), 0 4px 20px 0 rgba(0,0,0,0.19);
      text-align: center !important;
      padding-top: 10px;
      width: 31.333333333%;
      margin-left: 10px;
      margin-bottom: 10px;
      padding-bottom: 10px;  }      .btn-block-color {
      background: #ff2261;
      border-color: #ff2261;  }    .read-more-state {
      display: none;  }    .read-more-target {
      opacity: 0;
      max-height: 0;
      font-size: 0;
      transition: .25s ease;  }    .read-more-state:checked ~ .read-more-wrap .read-more-target {
      opacity: 1;
      font-size: inherit;
      max-height: 999em;  }    .read-more-state ~ .read-more-trigger:before {
      content: 'Show more';  }    .read-more-state:checked ~ .read-more-trigger:before {
      content: 'Show less';  }    .read-more-trigger {
      cursor: pointer;
      display: inline-block;
      padding: 0 .5em;
      color: #666;
      font-size: .9em;
      line-height: 2;
      border: 1px solid #ddd;
      border-radius: .25em;  }        .btn-primary.active, .btn-primary.focus, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .open>.dropdown-toggle.btn-primary {
      background: #ff2261;
      border-color: #ff2261;  }    .img-circle {
      width: 147px;
      height: 147px;  }  .collapse.in {
      display: block;
      opacity: 1 !important;
      display: block !important;  }    .footer-block{
      padding-top: 0 !important;
      padding-bottom: 20 !important;  }    .footer-block{
      padding-top: 28px !important;  }
      width: 133px;
      border: 3px solid white;
      font-family: Oswald !important;
      margin-left: 19px;
      font-size: 10.5px;
      box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2), 0 4px 20px 0 rgba(0,0,0,0.19);
      font-weight: bold;
}
.paragraph{

color: #fe326c !important;

font-family: Oswald !important;

font-size: 12px !important;
}

.panel-title>.small, .panel-title>.small>a, .panel-title>a, .panel-title>small, .panel-title>small>a {
    color: inherit;
    font-family: Oswald !important;
}
#demo1{
    display:none;
}

	.cuadro_intro_hover:hover .caption{
		opacity: 1;
		transform: translateY(-150px);
		-webkit-transform:translateY(-150px);
		-moz-transform:translateY(-150px);
		-ms-transform:translateY(-150px);
		-o-transform:translateY(-150px);
	}
	.cuadro_intro_hover img{
		z-index: 4;
		opacity: 0.7;
		filter: alpha(opacity=30);
		padding-left: 10px;
	}
	.cuadro_intro_hover .caption{
		position: absolute;
		top:150px;
		-webkit-transition:all 0.3s ease-in-out;
		-moz-transition:all 0.3s ease-in-out;
		-o-transition:all 0.3s ease-in-out;
		-ms-transition:all 0.3s ease-in-out;
		transition:all 0.3s ease-in-out;
		width: 100%;
	}
	.cuadro_intro_hover .blur{
		height: 300px;
		z-index: 5;
		position: absolute;
		width: 100%;
	}
	.cuadro_intro_hover .caption-text{
		z-index: 10;
		color: #fff;
		position: absolute;
		padding-left: 14px;
		padding-right: 14px;
		height: 300px;
		text-align: center;
		top: -47.7px;
		width: 100%;
		left: 8px;
	}
	
	.hover-p{
	    font-family: Oswald !important;
	    font-style: italic;
	    font-size: 15px !important;
	    color: white !important;
	    margin-top: 44px;
	    line-height: 19px !important;
	    text-align: center !important;
	}
	.text-grid{
	    /* overflow:hidden; */
	    width: 16.66666667%;
	}
	
	.float-left{
      border: 3px solid white;
      float: left;
      /*margin: 6px;*/
      margin: 0px 16px 6px 0px;
      text-align: center;
      color: #fe326c;
      font-size: 10.5px;
      font-weight: bold;
      width: auto;
      box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2), 0 4px 20px 0 rgba(0,0,0,0.19);
      font-family: Oswald !important;
      /*margin-left: 19px;*/
}
.table-bordered td {
    text-align:center;
}
.table-bordered th {
    text-align:center;
}
.total-color{
    color:black;
}
.total{
    background: #eaeaea;
}
.chart ul li
{
    
color: white;
    
font-size: 13px;
    
width: max-content;
width: -moz-max-content;
}

.chart ul
{
    
   margin-right : 15px !important;
   margin-left: 89px !important;
   font-family: Oswald !important;
}
.strong-title-1 {
    color: #d2d7d3;
    font-size: 25px;
    font-family: Oswald !important;
    font-family: Oswald !important;
}



.card-box{
    box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2), 0 4px 20px 0 rgba(0,0,0,0.19);
    text-align: center !important;
    padding-top: 10px;
    width: 31.333333333%;
    margin-left: 10px;
    margin-bottom: 10px;
    padding-bottom: 10px;
}


.btn-block-color {
background: #ff2261;border-color: #ff2261;
}

.read-more-state {
  display: none;
}

.read-more-target {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}

.read-more-state ~ .read-more-trigger:before {
  content: 'Show more';
}

.read-more-state:checked ~ .read-more-trigger:before {
  content: 'Show less';
}

.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  padding: 0 .5em;
  color: #666;
  font-size: .9em;
  line-height: 2;
  border: 1px solid #ddd;
  border-radius: .25em;
}



.btn-primary.active, .btn-primary.focus, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .open>.dropdown-toggle.btn-primary {
    background: #ff2261;
    border-color: #ff2261;
}

.img-circle {
    width: 147px;
    height: 147px;
}
.collapse.in {
    display: block;
    opacity: 1 !important;    display: block !important;
}

.footer-block{
    padding-top: 0 !important;
    padding-bottom: 20 !important;
}

.footer-block{
        padding-top: 28px !important;
}
.menu-second-right-menu{
        margin-left: 19px !important;
        margin-top: 3px !important;
}

.menu-second-right-menu a{
        font-size: 8.7px !important;
        font-weight: bold !important;
}

.navbar-nav>li {
    width: 122px;
}
.float-right img{
        filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

.float-left img{
        filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}
.block-size{
    font-size: 14px !important;
}
.second-class li:nth-child(2) {
        /*margin-top: -9px;*/
}
.second-class>li:nth-child(2)>a:hover {

    height: 93px;
}
.overview>.progress {
    
  margin:0 !important;  
    
}
.btn-enregistrer-submit {
    
width: 119px;
    
border-radius: 2px;
}
.current_page_item>a{
        background-color: #eee;
        text-decoration: none;
    color: black !important;
    border-bottom: 4px solid #ff0762;
    -webkit-transition: width 2s;
    transition: border 0.4s;
}

.list-social-links {
    margin-bottom: 0;
    text-align: center;
    /* width: 60%; */
}

.list-social-links li {
    display: inline-block;
    margin: 0 .125em .5em .125em;
}

.social-link {
    background-image: url('socialFooter.png');
    background-repeat: no-repeat;
    display: block;
    height: 30px;
    opacity: .8;
    overflow: hidden;
    width: 30px;
}
.social-link--twitter {
    background-position: -30px 0;
}
.social-link--instagram {
    background-position: -150px 0;
}
.social-link--facebook {
    background-position: -270px 0;
}
.social-link--youtube {
    background-position: 0 0;
}
.social-link--soundcloud {
    background-position: -60px 0;
}
.social-link--google-plus {
    background-position: -240px 0;
}
.social-link--linkedin {
    background-position: -120px 0;
}
.social-link--itunes {
    background-position: -210px 0;
}
.copyright{
    color: #d2d7d3;
    border-top: 1px solid #6f6f6f;
    padding: 8px 5px 8px 2px;
    font-size: 12px;
    font-family: Oswald;
}
.affix-left{
    opacity: 1; left: 10px;display:block
}

.left-univ-title {
    position: fixed;
    z-index: 1;
    top: 18pc;
    display: inline-block;
    transform: rotate(-90deg);
    -webkit-transform-origin-y: bottom;
    font-size: 92px;
    font-weight: 900;
    color: #c5c5c5;
    -moz-transform-origin: bottom;
    left:-43px;
    text-transform: uppercase;
}



.titre_resultat  {
    margin-top:10px; font-size:13px !important; margin-left: 100px;
}
.titre_resultat b {
    color: #ff0762;
    margin-left: -12px;
    font-size: 16px;
}
.content_resultat {
    font-size: 15px;
    font-family: Oswald !important;
    margin-left: 128px;
}
.alert {
    padding: 15px !important;
}

input[type=number] {
    -moz-appearance: textfield;
}

/* Chrome */
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button { 
	-webkit-appearance: none;
	margin:0;
}

/* Opéra*/
input::-o-inner-spin-button,
input::-o-outer-spin-button { 
	-o-appearance: none;
	margin:0
}
.row-info
{
        margin-top: 25px !important;
}

.background-image-2-page{
    background-image:url('Photo affiche2.png');
    background-size: cover;
}

.panel-group {
    margin-bottom: 5px;
}


.alert-danger {
    color: white;
    background-color: #000000;
    border-color: white;
    font-weight: bold;
    font-size: 14px;
}

.margin-left{
    margin-left:21px;
}

.navbar-nav>li:last-child {
    width: auto;
}


.lien_top{
    display:block;

    width: 99% !important;
    text-align: right !important;
    padding-right: 38px !important;
    padding-top: 4px !important;
    color: #858585 !important;
    position: absolute !important;
    top: 0 !important;
    z-index: 9999999 !important;
    background: #eeeeee !important;
    color: #858585 !important;
    margin-right: 66px !important;
    padding-bottom: 4px !important;
    text-transform: uppercase !important;
}

.lien_top:hover{
    color:#ff2261 !important;
}
#menu-background{
      top: 22px !important;
    width: 99% !important;  
}


.supsystic-table thead{
	background: #ff2261;
    color: white;
}



table.dataTable thead th, table.dataTable thead td {
    padding: 10px 18px;
    border-bottom: none;
}

.head-convovation{
	background-color: #ff2261 !important;
	border-color: white !important;
	color: white !important;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.glyphicon{

    float: right !important;
	font-size: 14px;

}
.actualite{
    background: #eee;
    padding: 10px;
    margin: -3px 13px 5px 5px;
    width: 62%;
}
.actualite .overview{
    display: initial;
    width: auto;
    height: auto;
    position: relative;
    top: 13px;
    font-size: 12px !important;
    font-weight: bold;
}
.titre-actualite{
    font-size: 20px !important;
    color: #ff0762;
    line-height: 0px !important;
    margin-top: 30px;
    padding-bottom: 22px;
    padding-left: 0;
    font-weight: bold;
}
.actualite-button{
    display: block;
    float: right;
    margin-top: 14px;
    color: white !important;
    position: relative;
    right: 0px;
    width: 60px;
}
.actualite-button:hover{
color:white;
}

.img-cshu{
    width: 500px;
    margin-top: 45px;
}
.cont{
    position: relative;
    top: 141px;
    min-height: 250px;
    width: 1170px !important;
}
.backRose{
    margin-bottom: 5px;
    font-weight: bold;
    padding: 5px;
    font-size: 12px;
    background: #286aa7;
}
.backGray{
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 10px;
    padding: 2px;
    color: white;
    background: gray;
    margin-top: 10px;
}
.ov{
    font-size: 10px !important;
    line-height: 20px !important;
    color: black !important;
}
.ovB{
    font-size: 10px !important;
    line-height: 20px !important;
    color: #002446 !important; 
}
.tableCshu tr td{
    border: 1px solid #ddd;
    padding: 5px !important;
    font-size: 10px;
}

.tableCshu thead tr td{
    font-weight:bold;
    font-size: 10px;
}
.bol{
    font-weight:bold;
}
.chke{
    margin-top: 10px;
    display: -webkit-inline-box;
    width: auto;
    background: #eee;
    padding: 5px;
    font-weight: bold;
    font-size: 9px;
    font-family: Oswald;
}
.chke2{
    margin-top: 1px;
    display: -webkit-inline-box;
    width: auto;
    padding: 5px;
    font-weight: 100;
    font-size: 9px;
    font-family: Oswald;
}
.pro-50 {
    display: -webkit-inline-box;
    width: 24.5%;
}
.inpad{
    padding: 5px;
    height: 22px;
    font-size: 10px;
    border-radius: 0;
}
.labt{
    margin-top: 0px;
    font-weight: 100;
    font-size: 10px;
    font-family: Oswald;
}
.ri-50{
    right: 50px;
    top: -15px;
    margin-bottom: -12px;
}
.flo-r{
    float:right;
}
.progress-4 {
    background: #286aa7;
    color: white;
    padding: 5px;
    float: right;
    font-family: Oswald;
    font-weight: 700;
    font-style: normal;
    font-size: 11px;
    border: 0;
    margin-bottom: 5px;
    margin-top: 10px;
    width: 95px;
}
.progress-4:hover {
    color:white;
}
.co_chambre_check{
    display:none;
}
.annuler{
    background: rgba(46, 90, 130, 0.34);
    color: black;
    padding: 5px;
    /* float: right; */
    font-family: Oswald;
    font-weight: 700;
    font-style: normal;
    font-size: 11px;
    border: 0;
    margin-bottom: 5px;
    margin-top: 5px;
    width: 95px;
}
.progress-4:focus {
  color: white;
}
.sp-thumbnails-container img{
    opacity:0.5;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;

}
.sp-thumbnails-container img:hover{
    opacity:1;

}
.Mto-2{
        margin-top: 5px;
}
.ovB6{
    font-size: 13px !important;
    line-height: 20px !important;
    color: #002446 !important; 
}
.fo-10{
        font-size: 12px !important;
        margin-left: 15px;
        margin-top: 5px;
        line-height: 32px !important;
}
.sp-thumbnail-arrow {
    width: 7px !important;
    height: 20px !important;
    cursor: pointer;
    margin-right: 9px;
    margin-left: 9px;
    top:-31px;
    display:none !important;
}
.sp-thumbnail-container {
    width: 94px !important;
    height: 62px !important;
}
/*.sp-thumbnails-container{
    width: 94px !important;
    height: 62px !important;
}*/
/*.sp-selected-thumbnail {
    border: none !important;
}*/
/*.sp-buttons{
    display:none;
}*/
.botop{
    margin-bottom: 35px !important;
    margin-top: 35px !important;
}
.botom{
    margin-bottom: 35px !important;
}
.sp-full-screen-button {
    background:black;
    position: absolute;
    top: 0px !important;
    right: 0px !important;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    -ms-transform: none !important;
    transform: none !important;
    height: 50px;
    width: 50px;
}
.sp-selected-thumbnail img{
    opacity:1 !important;
}
.sp-arrow {
    position: absolute;
    display: block;
    width: 7px !important;
    height: 20px !important;
    cursor: pointer;
    top: 15px !important;
}
.sp-bottom-thumbnails {
    margin-top: 4px;
    height: 65px;
}
.bors{
    padding: 13px 0 25px;
    border-top: 2px solid #c3c9cd;
    border-bottom: 2px solid #c3c9cd;
    margin-left: 2px;
    margin-top:5px;
}

@media (max-width: 1550px) {
.service-page {
    display:none;
}
}


@media (max-width: 1260px) {
.left-univ-title {
    display:none;
}
}