Difference between revisions of "Team:Tianjin"

Line 12: Line 12:
 
<link rel="stylesheet" type="text/css" href="https://2017.igem.org/Team:Tianjin/Resources/CSS:begining?action=raw&ctype=text/css" />
 
<link rel="stylesheet" type="text/css" href="https://2017.igem.org/Team:Tianjin/Resources/CSS:begining?action=raw&ctype=text/css" />
 
    
 
    
−
    <link rel="stylesheet" type="text/css" href="https://2017.igem.org/Team:Tianjin/Resources/CSS:main?action=raw&ctype=text/css">
+
 
 
     <link rel="canonical" href="">
 
     <link rel="canonical" href="">
 
     <script>
 
     <script>
Line 73: Line 73:
 
}
 
}
  
 +
.wrapper,.row,body.page--home #loading #landing-container #about-us
 +
{
 +
    *zoom: 1
 +
}
 +
 +
.wrapper:before,.row:before,body.page--home #loading #landing-container #about-us:before,.wrapper:after,.row:after,body.page--home #loading #landing-container #about-us:after
 +
{
 +
    content: " ";
 +
    display: table
 +
}
 +
 +
.wrapper:after,.row:after,body.page--home #loading #landing-container #about-us:after
 +
{
 +
    clear: both
 +
}
 +
/*!
 +
Animate.css - http://daneden.me/animate
 +
Licensed under the MIT license - http://opensource.org/licenses/MIT
 +
Copyright (c) 2014 Daniel Eden*/
 +
.animated
 +
{
 +
    -webkit-animation-duration: 1s;
 +
    animation-duration: 1s;
 +
    -webkit-animation-fill-mode: both;
 +
    animation-fill-mode: both
 +
}
 +
 +
.animated.infinite
 +
{
 +
    -webkit-animation-iteration-count: infinite;
 +
    animation-iteration-count: infinite
 +
}
 +
 +
.animated.hinge
 +
{
 +
    -webkit-animation-duration: 2s;
 +
    animation-duration: 2s
 +
}
 +
 +
@-webkit-keyframes bounce
 +
{
 +
    0%,20%,53%,80%,100%
 +
    {
 +
        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%
 +
    {
 +
        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%
 +
    {
 +
        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%
 +
    {
 +
        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%
 +
    {
 +
        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%
 +
    {
 +
        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)
 +
    }
 +
}
 +
 +
.bounce
 +
{
 +
    -webkit-animation-name: bounce;
 +
    animation-name: bounce;
 +
    -webkit-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);
 +
        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)
 +
    }
 +
}
 +
 +
.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);
 +
        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)
 +
    }
 +
}
 +
 +
.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);
 +
        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)
 +
    }
 +
}
 +
 +
.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);
 +
        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)
 +
    }
 +
}
 +
 +
.swing
 +
{
 +
    -webkit-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);
 +
        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)
 +
    }
 +
}
 +
 +
.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;
 +
        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
 +
    }
 +
}
 +
 +
.wobble
 +
{
 +
    -webkit-animation-name: wobble;
 +
    animation-name: wobble
 +
}
 +
 +
@-webkit-keyframes bounceIn
 +
{
 +
    0%,20%,40%,60%,80%,100%
 +
    {
 +
        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%
 +
    {
 +
        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)
 +
    }
 +
}
 +
 +
.bounceIn
 +
{
 +
    -webkit-animation-name: bounceIn;
 +
    animation-name: bounceIn;
 +
    -webkit-animation-duration: .75s;
 +
    animation-duration: .75s
 +
}
 +
 +
@-webkit-keyframes bounceInDown
 +
{
 +
    0%,60%,75%,90%,100%
 +
    {
 +
        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%
 +
    {
 +
        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
 +
    }
 +
}
 +
 +
.bounceInDown
 +
{
 +
    -webkit-animation-name: bounceInDown;
 +
    animation-name: bounceInDown
 +
}
 +
 +
@-webkit-keyframes bounceInLeft
 +
{
 +
    0%,60%,75%,90%,100%
 +
    {
 +
        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%
 +
    {
 +
        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
 +
    }
 +
}
 +
 +
.bounceInLeft
 +
{
 +
    -webkit-animation-name: bounceInLeft;
 +
    animation-name: bounceInLeft
 +
}
 +
 +
@-webkit-keyframes bounceInRight
 +
{
 +
    0%,60%,75%,90%,100%
 +
    {
 +
        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%
 +
    {
 +
        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
 +
    }
 +
}
 +
 +
.bounceInRight
 +
{
 +
    -webkit-animation-name: bounceInRight;
 +
    animation-name: bounceInRight
 +
}
 +
 +
@-webkit-keyframes bounceInUp
 +
{
 +
    0%,60%,75%,90%,100%
 +
    {
 +
        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%
 +
    {
 +
        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)
 +
    }
 +
}
 +
 +
.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);
 +
        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)
 +
    }
 +
}
 +
 +
.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);
 +
        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)
 +
    }
 +
}
 +
 +
.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);
 +
        transform: translate3d(20px, 0, 0)
 +
    }
 +
 +
    100%
 +
    {
 +
        opacity: 0;
 +
        -webkit-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);
 +
        transform: translate3d(-20px, 0, 0)
 +
    }
 +
 +
    100%
 +
    {
 +
        opacity: 0;
 +
        -webkit-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);
 +
        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)
 +
    }
 +
}
 +
 +
.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);
 +
        transform: translate3d(0, -100%, 0)
 +
    }
 +
 +
    100%
 +
    {
 +
        opacity: 1;
 +
        -webkit-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);
 +
        transform: translate3d(0, -2000px, 0)
 +
    }
 +
 +
    100%
 +
    {
 +
        opacity: 1;
 +
        -webkit-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);
 +
        transform: translate3d(-100%, 0, 0)
 +
    }
 +
 +
    100%
 +
    {
 +
        opacity: 1;
 +
        -webkit-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);
 +
        transform: translate3d(-2000px, 0, 0)
 +
    }
 +
 +
    100%
 +
    {
 +
        opacity: 1;
 +
        -webkit-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);
 +
        transform: translate3d(100%, 0, 0)
 +
    }
 +
 +
    100%
 +
    {
 +
        opacity: 1;
 +
        -webkit-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);
 +
        transform: translate3d(2000px, 0, 0)
 +
    }
 +
 +
    100%
 +
    {
 +
        opacity: 1;
 +
        -webkit-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);
 +
        transform: translate3d(0, 100%, 0)
 +
    }
 +
 +
    100%
 +
    {
 +
        opacity: 1;
 +
        -webkit-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);
 +
        transform: translate3d(0, 2000px, 0)
 +
    }
 +
 +
    100%
 +
    {
 +
        opacity: 1;
 +
        -webkit-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);
 +
        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);
 +
        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);
 +
        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);
 +
        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);
 +
        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);
 +
        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);
 +
        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);
 +
        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);
 +
        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
 +
    }
 +
}
 +
 +
.animated.flip
 +
{
 +
    -webkit-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);
 +
        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);
 +
        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);
 +
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
 +
        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);
 +
        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)
 +
    }
 +
}
 +
 +
.flipInX
 +
{
 +
    -webkit-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);
 +
        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);
 +
        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);
 +
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
 +
        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);
 +
        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)
 +
    }
 +
}
 +
 +
.flipInY
 +
{
 +
    -webkit-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);
 +
        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
 +
    }
 +
}
 +
 +
.flipOutX
 +
{
 +
    -webkit-animation-name: flipOutX;
 +
    animation-name: flipOutX;
 +
    -webkit-animation-duration: .75s;
 +
    animation-duration: .75s;
 +
    -webkit-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);
 +
        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
 +
    }
 +
}
 +
 +
.flipOutY
 +
{
 +
    -webkit-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);
 +
        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
 +
    }
 +
}
 +
 +
.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);
 +
        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;
 +
        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
 +
    }
 +
}
 +
 +
.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;
 +
        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
 +
    }
 +
}
 +
 +
.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;
 +
        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
 +
    }
 +
}
 +
 +
.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;
 +
        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
 +
    }
 +
}
 +
 +
.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;
 +
        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
 +
    }
 +
}
 +
 +
.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;
 +
        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
 +
    }
 +
}
 +
 +
.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: rotate3d(0, 0, 1, 45deg);
 +
        transform: rotate3d(0, 0, 1, 45deg);
 +
        opacity: 0
 +
    }
 +
}
 +
 +
@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: rotate3d(0, 0, 1, 45deg);
 +
        transform: rotate3d(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;
 +
        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
 +
    }
 +
}
 +
 +
.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;
 +
        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
 +
    }
 +
}
 +
 +
.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;
 +
        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
 +
    }
 +
}
 +
 +
.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;
 +
        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
 +
    }
 +
}
 +
 +
.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);
 +
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)
 +
    }
 +
 +
    100%
 +
    {
 +
        opacity: 1;
 +
        -webkit-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);
 +
        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);
 +
        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);
 +
        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)
 +
    }
 +
}
 +
 +
.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);
 +
        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)
 +
    }
 +
}
 +
 +
.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);
 +
        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)
 +
    }
 +
}
 +
 +
.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);
 +
        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)
 +
    }
 +
}
 +
 +
.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);
 +
        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);
 +
        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)
 +
    }
 +
}
 +
 +
.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);
 +
        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
 +
    }
 +
}
 +
 +
.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);
 +
        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
 +
    }
 +
}
 +
 +
.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);
 +
        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)
 +
    }
 +
}
 +
 +
.zoomOutUp
 +
{
 +
    -webkit-animation-name: zoomOutUp;
 +
    animation-name: zoomOutUp
 +
}
 +
 +
@-webkit-keyframes cw
 +
{
 +
    0%
 +
    {
 +
        -webkit-transform: rotate(0deg);
 +
        transform: rotate(0deg)
 +
    }
 +
 +
    100%
 +
    {
 +
        -webkit-transform: rotate(360deg);
 +
        transform: rotate(360deg)
 +
    }
 +
}
 +
 +
@keyframes cw
 +
{
 +
    0%
 +
    {
 +
        -webkit-transform: rotate(0deg);
 +
        transform: rotate(0deg)
 +
    }
 +
 +
    100%
 +
    {
 +
        -webkit-transform: rotate(360deg);
 +
        transform: rotate(360deg)
 +
    }
 +
}
 +
 +
@-webkit-keyframes ccw
 +
{
 +
    0%
 +
    {
 +
        -webkit-transform: rotate(0deg);
 +
        transform: rotate(0deg)
 +
    }
 +
 +
    100%
 +
    {
 +
        -webkit-transform: rotate(-360deg);
 +
        transform: rotate(-360deg)
 +
    }
 +
}
 +
 +
@keyframes ccw
 +
{
 +
    0%
 +
    {
 +
        -webkit-transform: rotate(0deg);
 +
        transform: rotate(0deg)
 +
    }
 +
 +
    100%
 +
    {
 +
        -webkit-transform: rotate(-360deg);
 +
        transform: rotate(-360deg)
 +
    }
 +
}
 +
 +
@-webkit-keyframes scan
 +
{
 +
    0%
 +
    {
 +
        top: 10px
 +
    }
 +
 +
    50%
 +
    {
 +
        top: 190px
 +
    }
 +
 +
    100%
 +
    {
 +
        top: 10px
 +
    }
 +
}
 +
 +
@keyframes scan
 +
{
 +
    0%
 +
    {
 +
        top: 10px
 +
    }
 +
 +
    50%
 +
    {
 +
        top: 190px
 +
    }
 +
 +
    100%
 +
    {
 +
        top: 10px
 +
    }
 +
}
 +
 +
@-webkit-keyframes spinner-rotate-outer
 +
{
 +
    0%
 +
    {
 +
        -webkit-transform: rotateZ(0deg);
 +
        transform: rotateZ(0deg)
 +
    }
 +
 +
    100%
 +
    {
 +
        -webkit-transform: rotateZ(360deg);
 +
        transform: rotateZ(360deg)
 +
    }
 +
}
 +
 +
@keyframes spinner-rotate-outer
 +
{
 +
    0%
 +
    {
 +
        -webkit-transform: rotateZ(0deg);
 +
        transform: rotateZ(0deg)
 +
    }
 +
 +
    100%
 +
    {
 +
        -webkit-transform: rotateZ(360deg);
 +
        transform: rotateZ(360deg)
 +
    }
 +
}
 +
 +
@-webkit-keyframes spinner-rotate-inner
 +
{
 +
    0%
 +
    {
 +
        -webkit-transform: rotateZ(60deg);
 +
        transform: rotateZ(60deg)
 +
    }
 +
 +
    100%
 +
    {
 +
        -webkit-transform: rotateZ(420deg);
 +
        transform: rotateZ(420deg)
 +
    }
 +
}
 +
 +
@keyframes spinner-rotate-inner
 +
{
 +
    0%
 +
    {
 +
        -webkit-transform: rotateZ(60deg);
 +
        transform: rotateZ(60deg)
 +
    }
 +
 +
    100%
 +
    {
 +
        -webkit-transform: rotateZ(420deg);
 +
        transform: rotateZ(420deg)
 +
    }
 +
}
 +
 +
@-webkit-keyframes spinner-rotate-single-1
 +
{
 +
    0%
 +
    {
 +
        -webkit-transform: rotateZ(56deg);
 +
        transform: rotateZ(56deg)
 +
    }
 +
 +
    20%
 +
    {
 +
        -webkit-transform: rotateZ(-132deg);
 +
        transform: rotateZ(-132deg)
 +
    }
 +
 +
    40%
 +
    {
 +
        -webkit-transform: rotateZ(-250deg);
 +
        transform: rotateZ(-250deg)
 +
    }
 +
 +
    60%
 +
    {
 +
        -webkit-transform: rotateZ(40deg);
 +
        transform: rotateZ(40deg)
 +
    }
 +
 +
    70%
 +
    {
 +
        -webkit-transform: rotateZ(-80deg);
 +
        transform: rotateZ(-80deg)
 +
    }
 +
 +
    100%
 +
    {
 +
        -webkit-transform: rotateZ(56deg);
 +
        transform: rotateZ(56deg)
 +
    }
 +
}
 +
 +
@keyframes spinner-rotate-single-1
 +
{
 +
    0%
 +
    {
 +
        -webkit-transform: rotateZ(56deg);
 +
        transform: rotateZ(56deg)
 +
    }
 +
 +
    20%
 +
    {
 +
        -webkit-transform: rotateZ(-132deg);
 +
        transform: rotateZ(-132deg)
 +
    }
 +
 +
    40%
 +
    {
 +
        -webkit-transform: rotateZ(-250deg);
 +
        transform: rotateZ(-250deg)
 +
    }
 +
 +
    60%
 +
    {
 +
        -webkit-transform: rotateZ(40deg);
 +
        transform: rotateZ(40deg)
 +
    }
 +
 +
    70%
 +
    {
 +
        -webkit-transform: rotateZ(-80deg);
 +
        transform: rotateZ(-80deg)
 +
    }
 +
 +
    100%
 +
    {
 +
        -webkit-transform: rotateZ(56deg);
 +
        transform: rotateZ(56deg)
 +
    }
 +
}
 +
 +
@-webkit-keyframes spinner-rotate-single-2
 +
{
 +
    0%
 +
    {
 +
        -webkit-transform: rotateZ(-24deg);
 +
        transform: rotateZ(-24deg)
 +
    }
 +
 +
    10%
 +
    {
 +
        -webkit-transform: rotateZ(142deg);
 +
        transform: rotateZ(142deg)
 +
    }
 +
 +
    20%
 +
    {
 +
        -webkit-transform: rotateZ(-87deg);
 +
        transform: rotateZ(-87deg)
 +
    }
 +
 +
    30%
 +
    {
 +
        -webkit-transform: rotateZ(-345deg);
 +
        transform: rotateZ(-345deg)
 +
    }
 +
 +
    40%
 +
    {
 +
        -webkit-transform: rotateZ(86deg);
 +
        transform: rotateZ(86deg)
 +
    }
 +
 +
    50%
 +
    {
 +
        -webkit-transform: rotateZ(175deg);
 +
        transform: rotateZ(175deg)
 +
    }
 +
 +
    60%
 +
    {
 +
        -webkit-transform: rotateZ(-245deg);
 +
        transform: rotateZ(-245deg)
 +
    }
 +
 +
    70%
 +
    {
 +
        -webkit-transform: rotateZ(4deg);
 +
        transform: rotateZ(4deg)
 +
    }
 +
 +
    80%
 +
    {
 +
        -webkit-transform: rotateZ(-132deg);
 +
        transform: rotateZ(-132deg)
 +
    }
 +
 +
    90%
 +
    {
 +
        -webkit-transform: rotateZ(345deg);
 +
        transform: rotateZ(345deg)
 +
    }
 +
 +
    100%
 +
    {
 +
        -webkit-transform: rotateZ(-24deg);
 +
        transform: rotateZ(-24deg)
 +
    }
 +
}
 +
 +
@keyframes spinner-rotate-single-2
 +
{
 +
    0%
 +
    {
 +
        -webkit-transform: rotateZ(-24deg);
 +
        transform: rotateZ(-24deg)
 +
    }
 +
 +
    10%
 +
    {
 +
        -webkit-transform: rotateZ(142deg);
 +
        transform: rotateZ(142deg)
 +
    }
 +
 +
    20%
 +
    {
 +
        -webkit-transform: rotateZ(-87deg);
 +
        transform: rotateZ(-87deg)
 +
    }
 +
 +
    30%
 +
    {
 +
        -webkit-transform: rotateZ(-345deg);
 +
        transform: rotateZ(-345deg)
 +
    }
 +
 +
    40%
 +
    {
 +
        -webkit-transform: rotateZ(86deg);
 +
        transform: rotateZ(86deg)
 +
    }
 +
 +
    50%
 +
    {
 +
        -webkit-transform: rotateZ(175deg);
 +
        transform: rotateZ(175deg)
 +
    }
 +
 +
    60%
 +
    {
 +
        -webkit-transform: rotateZ(-245deg);
 +
        transform: rotateZ(-245deg)
 +
    }
 +
 +
    70%
 +
    {
 +
        -webkit-transform: rotateZ(4deg);
 +
        transform: rotateZ(4deg)
 +
    }
 +
 +
    80%
 +
    {
 +
        -webkit-transform: rotateZ(-132deg);
 +
        transform: rotateZ(-132deg)
 +
    }
 +
 +
    90%
 +
    {
 +
        -webkit-transform: rotateZ(345deg);
 +
        transform: rotateZ(345deg)
 +
    }
 +
 +
    100%
 +
    {
 +
        -webkit-transform: rotateZ(-24deg);
 +
        transform: rotateZ(-24deg)
 +
    }
 +
}
 +
 +
@-webkit-keyframes rotates
 +
{
 +
    0%
 +
    {
 +
        -webkit-transform: rotate(0deg);
 +
        transform: rotate(0deg)
 +
    }
 +
 +
    100%
 +
    {
 +
        -webkit-transform: rotate(720deg);
 +
        transform: rotate(720deg)
 +
    }
 +
}
 +
 +
@keyframes rotates
 +
{
 +
    0%
 +
    {
 +
        -webkit-transform: rotate(0deg);
 +
        transform: rotate(0deg)
 +
    }
 +
 +
    100%
 +
    {
 +
        -webkit-transform: rotate(720deg);
 +
        transform: rotate(720deg)
 +
    }
 +
}
 +
 +
@-webkit-keyframes rotatesInvers
 +
{
 +
    0%
 +
    {
 +
        -webkit-transform: rotate(0deg);
 +
        transform: rotate(0deg)
 +
    }
 +
 +
    100%
 +
    {
 +
        -webkit-transform: rotate(-720deg);
 +
        transform: rotate(-720deg)
 +
    }
 +
}
 +
 +
@keyframes rotatesInvers
 +
{
 +
    0%
 +
    {
 +
        -webkit-transform: rotate(0deg);
 +
        transform: rotate(0deg)
 +
    }
 +
 +
    100%
 +
    {
 +
        -webkit-transform: rotate(-720deg);
 +
        transform: rotate(-720deg)
 +
    }
 +
}
 +
 +
@-webkit-keyframes roll
 +
{
 +
    0%
 +
    {
 +
        stroke-dashoffset: 0
 +
    }
 +
 +
    100%
 +
    {
 +
        stroke-dashoffset: 150
 +
    }
 +
}
 +
 +
@keyframes roll
 +
{
 +
    0%
 +
    {
 +
        stroke-dashoffset: 0
 +
    }
 +
 +
    100%
 +
    {
 +
        stroke-dashoffset: 150
 +
    }
 +
}
 +
 +
@-webkit-keyframes iconBgColor
 +
{
 +
    0%
 +
    {
 +
        background-color: transparent
 +
    }
 +
 +
    5%
 +
    {
 +
        background-color: #004a7c
 +
    }
 +
 +
    15%
 +
    {
 +
        background-color: #004a7c
 +
    }
 +
 +
    20%
 +
    {
 +
        background-color: transparent
 +
    }
 +
}
 +
 +
@keyframes iconBgColor
 +
{
 +
    0%
 +
    {
 +
        background-color: transparent
 +
    }
 +
 +
    5%
 +
    {
 +
        background-color: #004a7c
 +
    }
 +
 +
    15%
 +
    {
 +
        background-color: #004a7c
 +
    }
 +
 +
    20%
 +
    {
 +
        background-color: transparent
 +
    }
 +
}
 +
 +
@-webkit-keyframes iconColor
 +
{
 +
    0%
 +
    {
 +
        color: #004a7c
 +
    }
 +
 +
    5%
 +
    {
 +
        color: #fff
 +
    }
 +
 +
    15%
 +
    {
 +
        color: #fff
 +
    }
 +
 +
    20%
 +
    {
 +
        color: #004a7c
 +
    }
 +
}
 +
 +
@keyframes iconColor
 +
{
 +
    0%
 +
    {
 +
        color: #004a7c
 +
    }
 +
 +
    5%
 +
    {
 +
        color: #fff
 +
    }
 +
 +
    15%
 +
    {
 +
        color: #fff
 +
    }
 +
 +
    20%
 +
    {
 +
        color: #004a7c
 +
    }
 +
}
 +
 +
@-webkit-keyframes svgColor
 +
{
 +
    0%
 +
    {
 +
        fill: #004a7c
 +
    }
 +
 +
    25%
 +
    {
 +
        fill: #39898D
 +
    }
 +
 +
    50%
 +
    {
 +
        fill: #004a7c
 +
    }
 +
 +
    75%
 +
    {
 +
        fill: #39898D
 +
    }
 +
 +
    100%
 +
    {
 +
        fill: #004a7c
 +
    }
 +
}
 +
 +
@keyframes svgColor
 +
{
 +
    0%
 +
    {
 +
        fill: #004a7c
 +
    }
 +
 +
    25%
 +
    {
 +
        fill: #39898D
 +
    }
 +
 +
    50%
 +
    {
 +
        fill: #004a7c
 +
    }
 +
 +
    75%
 +
    {
 +
        fill: #39898D
 +
    }
 +
 +
    100%
 +
    {
 +
        fill: #004a7c
 +
    }
 +
}
 +
 +
@keyframes pulse
 +
{
 +
    0%
 +
    {
 +
        -webkit-transform: scale(0.1);
 +
        transform: scale(0.1);
 +
        opacity: 0
 +
    }
 +
 +
    1%
 +
    {
 +
        -webkit-transform: scale(0.1);
 +
        transform: scale(0.1);
 +
        opacity: .7
 +
    }
 +
 +
    50%
 +
    {
 +
        -webkit-transform: scale(1.5);
 +
        transform: scale(1.5);
 +
        opacity: 0
 +
    }
 +
 +
    100%
 +
    {
 +
        -webkit-transform: scale(1.5);
 +
        transform: scale(1.5);
 +
        opacity: 0
 +
    }
 +
}
 +
 +
@keyframes fadeIn
 +
{
 +
    0%
 +
    {
 +
        opacity: 0
 +
    }
 +
 +
    100%
 +
    {
 +
        opacity: 1
 +
    }
 +
}
 +
 +
@-webkit-keyframes comeDown
 +
{
 +
    0%
 +
    {
 +
        opacity: 0
 +
    }
 +
 +
    100%
 +
    {
 +
        opacity: 1;
 +
        -webkit-transform: translateY(0);
 +
        transform: translateY(0)
 +
    }
 +
}
 +
 +
@keyframes comeDown
 +
{
 +
    0%
 +
    {
 +
        opacity: 0
 +
    }
 +
 +
    100%
 +
    {
 +
        opacity: 1;
 +
        -webkit-transform: translateY(0);
 +
        transform: translateY(0)
 +
    }
 +
}
 +
 +
@keyframes fadeInRight
 +
{
 +
    100%
 +
    {
 +
        opacity: 1;
 +
        -webkit-transform: translateX(0);
 +
        transform: translateX(0)
 +
    }
 +
}
 +
 +
@-webkit-keyframes fadeInRightWide
 +
{
 +
    0%
 +
    {
 +
        opacity: 0;
 +
        -webkit-transform: translate3d(100%, 0, 0);
 +
        transform: translate3d(100%, 0, 0)
 +
    }
 +
 +
    100%
 +
    {
 +
        opacity: 1;
 +
        -webkit-transform: none;
 +
        transform: none
 +
    }
 +
}
 +
 +
@keyframes fadeInRightWide
 +
{
 +
    0%
 +
    {
 +
        opacity: 0;
 +
        -webkit-transform: translate3d(100%, 0, 0);
 +
        transform: translate3d(100%, 0, 0)
 +
    }
 +
 +
    100%
 +
    {
 +
        opacity: 1;
 +
        -webkit-transform: none;
 +
        transform: none
 +
    }
 +
}
 +
 +
@keyframes fadeInUp
 +
{
 +
    0%
 +
    {
 +
        opacity: 0;
 +
        -webkit-transform: translate3d(0, 100%, 0);
 +
        transform: translate3d(0, 100%, 0)
 +
    }
 +
 +
    100%
 +
    {
 +
        opacity: 1;
 +
        -webkit-transform: none;
 +
        transform: none
 +
    }
 +
}
 +
 +
@keyframes bounceIn
 +
{
 +
    0%,20%,40%,60%,80%,100%
 +
    {
 +
        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)
 +
    }
 +
}
 +
 +
.bounceIn
 +
{
 +
    -webkit-animation-name: bounceIn;
 +
    animation-name: bounceIn;
 +
    -webkit-animation-duration: .75s;
 +
    animation-duration: .75s
 +
}
 +
 +
@keyframes bounceInLeft
 +
{
 +
    0%,60%,75%,90%,100%
 +
    {
 +
        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
 +
    }
 +
}
 +
 +
.bounceInLeft
 +
{
 +
    -webkit-animation-name: bounceInLeft;
 +
    animation-name: bounceInLeft
 +
}
 +
 +
@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)
 +
    }
 +
}
 +
 +
.bounceOut
 +
{
 +
    -webkit-animation-name: bounceOut;
 +
    animation-name: bounceOut;
 +
    -webkit-animation-duration: .75s;
 +
    animation-duration: .75s
 +
}
 +
 +
.animated
 +
{
 +
    -webkit-animation-duration: 1s;
 +
    animation-duration: 1s;
 +
    -webkit-animation-fill-mode: both;
 +
    animation-fill-mode: both
 +
}
 +
 +
.grey.lighten-5
 +
{
 +
    background-color: #fafafa !important
 +
}
 +
 +
.grey.lighten-4
 +
{
 +
    background-color: #f5f5f5 !important
 +
}
 +
 +
.grey.lighten-3
 +
{
 +
    background-color: #eee !important
 +
}
 +
 +
.grey.lighten-2
 +
{
 +
    background-color: #e0e0e0 !important
 +
}
 +
 +
.grey.lighten-1
 +
{
 +
    background-color: #bdbdbd !important
 +
}
 +
 +
.grey
 +
{
 +
    background-color: #9e9e9e !important
 +
}
 +
 +
.grey.darken-1
 +
{
 +
    background-color: #757575 !important
 +
}
 +
 +
.grey.darken-2
 +
{
 +
    background-color: #616161 !important
 +
}
 +
 +
.grey.darken-3
 +
{
 +
    background-color: #424242 !important
 +
}
 +
 +
.grey.darken-4
 +
{
 +
    background-color: #212121 !important
 +
}
 +
 +
.background-dark
 +
{
 +
    background-color: #1A262F;
 +
    color: #fff
 +
}
 +
 +
html.lt-ie10 #loading,html.lt-ie10 .page-border
 +
{
 +
    display: none
 +
}
 +
 +
html.lt-ie10 body
 +
{
 +
    text-align: center;
 +
    background: #1A262F
 +
}
 +
 +
html.lt-ie10 body.loading>*
 +
{
 +
    display: block !important
 +
}
 +
 +
html.lt-ie10 #content
 +
{
 +
    position: absolute;
 +
    top: 50%;
 +
    left: 0;
 +
    right: 0;
 +
    height: 300px;
 +
    margin-top: -150px
 +
}
 +
 +
html.lt-ie10 body h1,html.lt-ie10 body h2,html.lt-ie10 body h3
 +
{
 +
    color: #fff
 +
}
 +
 +
html.lt-ie10 body h1
 +
{
 +
    color: #004a7c;
 +
    font-size: 72px
 +
}
 +
 +
html.lt-ie10 body h2
 +
{
 +
    font-size: 28px;
 +
    margin-top: 65px
 +
}
 +
 +
html.lt-ie10 body h2 a
 +
{
 +
    color: #39898D
 +
}
 +
 +
html.lt-ie10 body h2 a:hover,html.lt-ie10 body h2 a:focus
 +
{
 +
    text-decoration: none
 +
}
 +
 +
html.lt-ie10 .icon-list
 +
{
 +
    margin: 0 auto;
 +
    margin-top: 35px;
 +
    width: 355px;
 +
    text-align: center
 +
}
 +
 +
html.lt-ie10 .icon-list li
 +
{
 +
    display: inline;
 +
    float: left;
 +
    margin: 0 8px
 +
}
 +
 +
html.lt-ie10 .icon-list li a
 +
{
 +
    color: #fff;
 +
    display: block;
 +
    float: left;
 +
    width: 55px
 +
}
 +
 +
html.lt-ie10 .icon-list li a span.icon
 +
{
 +
    font-size: 50px;
 +
    display: block;
 +
    margin-bottom: 10px
 +
}
 +
 +
html.lt-ie10 .icon-list li a span.icon-label
 +
{
 +
    font-size: 14px
 +
}
 +
 +
html.lt-ie10 .icon-list li a:hover,html.lt-ie10 .icon-list li a:focus
 +
{
 +
    color: #004a7c
 +
}
 +
 +
@media (min-width: 1025px)
 +
{
 +
    .hide-desktop
 +
    {
 +
        display: none !important
 +
    }
 +
}
 +
 +
@media (max-width: 1024px) and (min-width: 721px)
 +
{
 +
    .hide-tablet
 +
    {
 +
        display: none !important
 +
    }
 +
}
 +
 +
@media (max-width: 720px)
 +
{
 +
    .hide-mobile
 +
    {
 +
        display: none !important
 +
    }
 +
}[class^="shadow-"]
 +
{
 +
    border: 1px solid rgba(0,0,0,0.06)
 +
}
 +
 +
.shadow-1dp
 +
{
 +
    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.04)
 +
}
 +
 +
.shadow-2dp
 +
{
 +
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.04)
 +
}
 +
 +
.shadow-3dp
 +
{
 +
    box-shadow: 0 3px 4px 0 rgba(0,0,0,0.04)
 +
}
 +
 +
.shadow-4dp
 +
{
 +
    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.04)
 +
}
 +
 +
.shadow-6dp
 +
{
 +
    box-shadow: 0 6px 10px 0 rgba(0,0,0,0.04)
 +
}
 +
 +
.shadow-8dp
 +
{
 +
    box-shadow: 0 8px 10px 1px rgba(0,0,0,0.04)
 +
}
 +
 +
.shadow-16dp
 +
{
 +
    box-shadow: 0 16px 24px 2px rgba(0,0,0,0.04)
 +
}
 +
 +
a
 +
{
 +
    transition: all,0.4s,ease
 +
}
 +
 +
#site-navigation
 +
{
 +
    transition: all 0.2s ease-in-out
 +
}
 +
 +
#site-navigation
 +
{
 +
    transition: all 0.2s ease-in-out
 +
}
 +
 +
#site-navigation>ul>li
 +
{
 +
    transition: all 0.2s ease-in-out
 +
}
 +
 +
body.page--home #home-navigation>a
 +
{
 +
    opacity: 0;
 +
    transition: all 0.2s ease-in-out
 +
}
 +
 +
body.page--home #home-navigation>a:first-child
 +
{
 +
    -webkit-animation: fadeIn 120ms ease-in-out 240ms forwards;
 +
    animation: fadeIn 120ms ease-in-out 240ms forwards
 +
}
 +
 +
body.page--home #home-navigation>a:nth-child(2)
 +
{
 +
    -webkit-animation: fadeIn 120ms ease-in-out 480ms forwards;
 +
    animation: fadeIn 120ms ease-in-out 480ms forwards
 +
}
 +
 +
body.page--home #home-navigation>a:nth-child(3)
 +
{
 +
    -webkit-animation: fadeIn 120ms ease-in-out 720ms forwards;
 +
    animation: fadeIn 120ms ease-in-out 720ms forwards
 +
}
 +
 +
body.page--home #home-navigation>a:nth-child(4)
 +
{
 +
    -webkit-animation: fadeIn 120ms ease-in-out 960ms forwards;
 +
    animation: fadeIn 120ms ease-in-out 960ms forwards
 +
}
 +
 +
body.page--home #home-navigation>a:nth-child(5)
 +
{
 +
    -webkit-animation: fadeIn 120ms ease-in-out 1200ms forwards;
 +
    animation: fadeIn 120ms ease-in-out 1200ms forwards
 +
}
 +
 +
body.page--home #home-portfolio-list--wrapper
 +
{
 +
    opacity: 0;
 +
    -webkit-animation: fadeInRightWide 800ms ease-in-out 1200ms forwards;
 +
    animation: fadeInRightWide 800ms ease-in-out 1200ms forwards
 +
}
 +
 +
body.page--home .main-content #about-us
 +
{
 +
    opacity: 0;
 +
    -webkit-animation: fadeIn 1200ms ease-in 960ms forwards;
 +
    animation: fadeIn 1200ms ease-in 960ms forwards
 +
}
 +
 +
.gear-canvas .gear.normal
 +
{
 +
    opacity: 0;
 +
    -webkit-animation: fadeIn 360ms ease-in 2000ms forwards;
 +
    animation: fadeIn 360ms ease-in 2000ms forwards
 +
}
 +
 +
.gear-canvas .gear.normal .gear-inner
 +
{
 +
    -webkit-animation: cw 8s linear 3.5s infinite;
 +
    animation: cw 8s linear 3.5s infinite
 +
}
 +
 +
.gear-canvas .gear.large
 +
{
 +
    opacity: 0;
 +
    -webkit-animation: fadeIn 360ms ease-in 1000ms forwards;
 +
    animation: fadeIn 360ms ease-in 1000ms forwards
 +
}
 +
 +
.gear-canvas .gear.large .gear-inner
 +
{
 +
    -webkit-animation: ccw 8s linear 3.5s infinite;
 +
    animation: ccw 8s linear 3.5s infinite
 +
}
 +
 +
.gear-canvas .gear.middle
 +
{
 +
    opacity: 0;
 +
    -webkit-animation: fadeIn 360ms ease-in 1500ms forwards;
 +
    animation: fadeIn 360ms ease-in 1500ms forwards
 +
}
 +
 +
.gear-canvas .gear.middle .gear-inner
 +
{
 +
    -webkit-animation: cw 8s linear 3.5s infinite;
 +
    animation: cw 8s linear 3.5s infinite
 +
}
 +
 +
.gear-canvas .gear.small
 +
{
 +
    opacity: 0;
 +
    -webkit-animation: fadeIn 360ms ease-in 2500ms forwards;
 +
    animation: fadeIn 360ms ease-in 2500ms forwards
 +
}
 +
 +
.gear-canvas .gear.small .gear-inner
 +
{
 +
    -webkit-animation: ccw 8s linear 3.5s infinite;
 +
    animation: ccw 8s linear 3.5s infinite
 +
}
 +
 +
.gear-canvas .gear.center
 +
{
 +
    opacity: 0;
 +
    -webkit-animation: fadeIn 360ms ease-in 500ms forwards;
 +
    animation: fadeIn 360ms ease-in 500ms forwards
 +
}
 +
 +
.gear-canvas .gear.center .gear-inner
 +
{
 +
    -webkit-animation: cw 8s linear 3.5s infinite;
 +
    animation: cw 8s linear 3.5s infinite
 +
}
 +
 +
.gear-canvas .gear-area-c
 +
{
 +
    opacity: 0;
 +
    -webkit-animation: fadeIn 360ms ease-in 2500ms forwards;
 +
    animation: fadeIn 360ms ease-in 2500ms forwards
 +
}
 +
 +
.gear-canvas .gear-area-c .one .gear-inner
 +
{
 +
    -webkit-animation: cw 8s linear 3.5s infinite;
 +
    animation: cw 8s linear 3.5s infinite
 +
}
 +
 +
.gear-canvas .gear-area-c .two .gear-inner
 +
{
 +
    -webkit-animation: ccw 8s linear 3.5s infinite;
 +
    animation: ccw 8s linear 3.5s infinite
 +
}
 +
 +
.gear-canvas .gear-area-c .three .gear-inner
 +
{
 +
    -webkit-animation: cw 8s linear 3.5s infinite;
 +
    animation: cw 8s linear 3.5s infinite
 +
}
 +
 +
.gear-canvas .gear-area-c .four
 +
{
 +
    -webkit-transform: rotate(-30deg);
 +
    transform: rotate(-30deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .four .gear-inner
 +
{
 +
    -webkit-animation: ccw 8s linear 3.5s infinite;
 +
    animation: ccw 8s linear 3.5s infinite
 +
}
 +
 +
.gear-canvas .brain #laser
 +
{
 +
    -webkit-animation: scan 3.5s linear infinite;
 +
    animation: scan 3.5s linear infinite
 +
}
 +
 +
.gear-canvas .chain-wapper
 +
{
 +
    opacity: 0;
 +
    -webkit-animation: fadeIn 360ms ease-in 3000ms forwards;
 +
    animation: fadeIn 360ms ease-in 3000ms forwards
 +
}
 +
 +
.gear-canvas .chain-wapper svg
 +
{
 +
    -webkit-animation: roll 4s linear 3.5s infinite;
 +
    animation: roll 4s linear 3.5s infinite
 +
}
 +
 +
#services-graphic .area-typo.left .typo-block,#services-graphic .area-typo.right .typo-block
 +
{
 +
    opacity: 0;
 +
    -webkit-animation: fadeInRight 500ms ease-in 1.2s forwards;
 +
    animation: fadeInRight 500ms ease-in 1.2s forwards
 +
}
 +
 +
#services-graphic .area-typo.left .typo-block .typo-line,#services-graphic .area-typo.right .typo-block .typo-line
 +
{
 +
    transition: all 0.7s ease 0s
 +
}
 +
 +
#services-graphic .area-graphic a.icon
 +
{
 +
    opacity: 0
 +
}
 +
 +
#services-graphic .area-graphic .area-icon.left .top
 +
{
 +
    -webkit-animation: fadeIn 500ms ease 1s forwards, iconBgColor 16s ease 2s infinite;
 +
    animation: fadeIn 500ms ease 1s forwards, iconBgColor 16s ease 2s infinite
 +
}
 +
 +
#services-graphic .area-graphic .area-icon.left .top span
 +
{
 +
    -webkit-animation: iconColor 16s ease 2s infinite;
 +
    animation: iconColor 16s ease 2s infinite
 +
}
 +
 +
#services-graphic .area-graphic .area-icon.right .top
 +
{
 +
    -webkit-animation: fadeIn 500ms ease 1s forwards, iconBgColor 16s ease 6s infinite;
 +
    animation: fadeIn 500ms ease 1s forwards, iconBgColor 16s ease 6s infinite
 +
}
 +
 +
#services-graphic .area-graphic .area-icon.right .top span
 +
{
 +
    -webkit-animation: iconColor 16s ease 6s infinite;
 +
    animation: iconColor 16s ease 6s infinite
 +
}
 +
 +
#services-graphic .area-graphic .area-icon.right .bottom
 +
{
 +
    -webkit-animation: fadeIn 500ms ease 1s forwards, iconBgColor 16s ease 10s infinite;
 +
    animation: fadeIn 500ms ease 1s forwards, iconBgColor 16s ease 10s infinite
 +
}
 +
 +
#services-graphic .area-graphic .area-icon.right .bottom span
 +
{
 +
    -webkit-animation: iconColor 16s ease 10s infinite;
 +
    animation: iconColor 16s ease 10s infinite
 +
}
 +
 +
#services-graphic .area-graphic .area-icon.left .bottom
 +
{
 +
    -webkit-animation: fadeIn 500ms ease 1s forwards, iconBgColor 16s ease 14s infinite;
 +
    animation: fadeIn 500ms ease 1s forwards, iconBgColor 16s ease 14s infinite
 +
}
 +
 +
#services-graphic .area-graphic .area-icon.left .bottom span
 +
{
 +
    -webkit-animation: iconColor 16s ease 14s infinite;
 +
    animation: iconColor 16s ease 14s infinite
 +
}
 +
 +
#process-canvas .process-block.step-1,#process-canvas .process-block.step-2,#process-canvas .process-block.step-3
 +
{
 +
    opacity: 0;
 +
    -webkit-transform: translateY(-50px);
 +
    transform: translateY(-50px);
 +
    -webkit-animation: comeDown 800ms 1.2s ease forwards;
 +
    animation: comeDown 800ms 1.2s ease forwards
 +
}
 +
 +
#process-canvas .process-block.step-4,#process-canvas .process-block.step-5,#process-canvas .process-block.step-6
 +
{
 +
    opacity: 0;
 +
    -webkit-transform: translateY(50px);
 +
    transform: translateY(50px);
 +
    -webkit-animation: comeDown 800ms 2s ease forwards;
 +
    animation: comeDown 800ms 2s ease forwards
 +
}
 +
 +
#full-portfolio-list--wrapper
 +
{
 +
    opacity: 0;
 +
    -webkit-animation: fadeInRightWide 800ms ease-in-out 240ms forwards;
 +
    animation: fadeInRightWide 800ms ease-in-out 240ms forwards
 +
}
 +
 +
#contact-preface h2
 +
{
 +
    opacity: 0;
 +
    -webkit-transform: translateY(-50px);
 +
    transform: translateY(-50px);
 +
    -webkit-animation: comeDown 350ms 500ms ease forwards;
 +
    animation: comeDown 350ms 500ms ease forwards
 +
}
 +
 +
#contact-preface p
 +
{
 +
    opacity: 0;
 +
    -webkit-transform: translateY(-50px);
 +
    transform: translateY(-50px);
 +
    -webkit-animation: comeDown 350ms 850ms ease forwards;
 +
    animation: comeDown 350ms 850ms ease forwards
 +
}
 +
 +
#contact-form .form-group
 +
{
 +
    opacity: 0;
 +
    transition: all 0.2s ease-in-out
 +
}
 +
 +
#contact-form .form-group:first-child
 +
{
 +
    -webkit-animation: fadeIn 240ms ease-in-out 1200ms forwards;
 +
    animation: fadeIn 240ms ease-in-out 1200ms forwards
 +
}
 +
 +
#contact-form .form-group:nth-child(2)
 +
{
 +
    -webkit-animation: fadeIn 240ms ease-in-out 1680ms forwards;
 +
    animation: fadeIn 240ms ease-in-out 1680ms forwards
 +
}
 +
 +
#contact-form .form-group:nth-child(3)
 +
{
 +
    -webkit-animation: fadeIn 240ms ease-in-out 1920ms forwards;
 +
    animation: fadeIn 240ms ease-in-out 1920ms forwards
 +
}
 +
 +
#contact-form .form-group:nth-child(4)
 +
{
 +
    -webkit-animation: fadeIn 240ms ease-in-out 2160ms forwards;
 +
    animation: fadeIn 240ms ease-in-out 2160ms forwards
 +
}
 +
 +
#contact-form .form-group:nth-child(5)
 +
{
 +
    -webkit-animation: fadeIn 240ms ease-in-out 2400ms forwards;
 +
    animation: fadeIn 240ms ease-in-out 2400ms forwards
 +
}
 +
 +
nav.page-navi a
 +
{
 +
    opacity: 0;
 +
    -webkit-animation: fadeIn 500ms ease-in 1.5s forwards;
 +
    animation: fadeIn 500ms ease-in 1.5s forwards
 +
}
 +
 +
.typo-display-1
 +
{
 +
    font-size: 96px
 +
}
 +
 +
.typo-display-1.large
 +
{
 +
    font-size: 120px
 +
}
 +
 +
.typo-display-1.small
 +
{
 +
    font-size: 81.6px
 +
}
 +
 +
.typo-display-2
 +
{
 +
    font-size: 56px
 +
}
 +
 +
.typo-display-2.large
 +
{
 +
    font-size: 70px
 +
}
 +
 +
.typo-display-2.small
 +
{
 +
    font-size: 47.6px
 +
}
 +
 +
.typo-display-3
 +
{
 +
    font-size: 32px
 +
}
 +
 +
.typo-display-3.large
 +
{
 +
    font-size: 40px
 +
}
 +
 +
.typo-display-3.small
 +
{
 +
    font-size: 27.2px
 +
}
 +
 +
.typo-display-4
 +
{
 +
    font-size: 28px
 +
}
 +
 +
.typo-display-4.large
 +
{
 +
    font-size: 35px
 +
}
 +
 +
.typo-display-4.small
 +
{
 +
    font-size: 23.8px
 +
}
 +
 +
.typo-headline
 +
{
 +
    font-size: 22px
 +
}
 +
 +
.typo-headline.large
 +
{
 +
    font-size: 27.5px
 +
}
 +
 +
.typo-headline.small
 +
{
 +
    font-size: 18.7px
 +
}
 +
 +
.typo-title
 +
{
 +
    font-size: 20px
 +
}
 +
 +
.typo-title.large
 +
{
 +
    font-size: 25px
 +
}
 +
 +
.typo-title.small
 +
{
 +
    font-size: 17px
 +
}
 +
 +
.typo-subhead
 +
{
 +
    font-size: 16px
 +
}
 +
 +
.typo-subhead.large
 +
{
 +
    font-size: 20px
 +
}
 +
 +
.typo-subhead.small
 +
{
 +
    font-size: 13.6px
 +
}
 +
 +
.typo-body-2
 +
{
 +
    font-size: 14px
 +
}
 +
 +
.typo-body-2.large
 +
{
 +
    font-size: 17.5px
 +
}
 +
 +
.typo-body-2.small
 +
{
 +
    font-size: 11.9px
 +
}
 +
 +
.typo-body-1
 +
{
 +
    font-size: 14px
 +
}
 +
 +
.typo-body-1.large
 +
{
 +
    font-size: 17.5px
 +
}
 +
 +
.typo-body-1.small
 +
{
 +
    font-size: 11.9px
 +
}
 +
 +
.typo-caption
 +
{
 +
    font-size: 12px
 +
}
 +
 +
.typo-caption.large
 +
{
 +
    font-size: 15px
 +
}
 +
 +
.typo-caption.small
 +
{
 +
    font-size: 10.2px
 +
}
 +
 +
.typo-blockquote
 +
{
 +
    font-size: 18px
 +
}
 +
 +
.typo-blockquote.large
 +
{
 +
    font-size: 22.5px
 +
}
 +
 +
.typo-blockquote.small
 +
{
 +
    font-size: 15.3px
 +
}
 +
 +
.typo-menu
 +
{
 +
    font-size: 10px
 +
}
 +
 +
.typo-menu.large
 +
{
 +
    font-size: 12.5px
 +
}
 +
 +
.typo-menu.small
 +
{
 +
    font-size: 8.5px
 +
}
 +
 +
.typo-button
 +
{
 +
    font-size: 12px
 +
}
 +
 +
.typo-button.large
 +
{
 +
    font-size: 15px
 +
}
 +
 +
.typo-button.small
 +
{
 +
    font-size: 10.2px
 +
}
 +
 +
body
 +
{
 +
    font-size: 14px
 +
}
 +
 +
h1
 +
{
 +
    font-family: "sofia-pro",sans-serif;
 +
    text-transform: uppercase;
 +
    font-size: 56px;
 +
    font-weight: 700;
 +
    line-height: 1em;
 +
    letter-spacing: 2.8px;
 +
    margin-top: 24px;
 +
    margin-bottom: 24px
 +
}
 +
 +
h1.large
 +
{
 +
    font-size: 70px
 +
}
 +
 +
h2
 +
{
 +
    font-family: "sofia-pro",sans-serif;
 +
    text-transform: uppercase;
 +
    font-size: 32px;
 +
    font-weight: 700;
 +
    line-height: 48px;
 +
    letter-spacing: 0.64px;
 +
    margin-top: 24px;
 +
    margin-bottom: 24px
 +
}
 +
 +
h2.large
 +
{
 +
    font-size: 40px
 +
}
 +
 +
h3
 +
{
 +
    font-family: "sofia-pro",sans-serif;
 +
    text-transform: uppercase;
 +
    font-size: 28px;
 +
    font-weight: 700;
 +
    line-height: 40px;
 +
    margin-top: 24px;
 +
    margin-bottom: 24px
 +
}
 +
 +
h3.large
 +
{
 +
    font-size: 35px
 +
}
 +
 +
h4
 +
{
 +
    font-family: "sofia-pro",sans-serif;
 +
    font-size: 22px;
 +
    font-weight: 600;
 +
    line-height: 32px;
 +
    letter-spacing: 0.22px;
 +
    margin-top: 24px;
 +
    margin-bottom: 16px
 +
}
 +
 +
h4.large
 +
{
 +
    font-size: 27.5px
 +
}
 +
 +
h5
 +
{
 +
    font-family: "sofia-pro",sans-serif;
 +
    font-size: 20px;
 +
    font-weight: 500;
 +
    line-height: 28px;
 +
    letter-spacing: 0.2px;
 +
    margin-top: 24px;
 +
    margin-bottom: 16px
 +
}
 +
 +
h5.large
 +
{
 +
    font-size: 25px
 +
}
 +
 +
h6
 +
{
 +
    font-family: "sofia-pro",sans-serif;
 +
    font-size: 16px;
 +
    font-weight: 600;
 +
    line-height: 24px;
 +
    letter-spacing: 0.16px;
 +
    margin-top: 24px;
 +
    margin-bottom: 16px
 +
}
 +
 +
h6.large
 +
{
 +
    font-size: 20px
 +
}
 +
 +
p
 +
{
 +
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
 +
    font-size: 14px;
 +
    font-weight: 400;
 +
    line-height: 1.5;
 +
    letter-spacing: 0;
 +
    margin-bottom: 16px
 +
}
 +
 +
ul,ol,dl
 +
{
 +
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
 +
    font-size: 14px;
 +
    font-weight: 400;
 +
    line-height: 1.5;
 +
    letter-spacing: 0
 +
}
 +
 +
blockquote
 +
{
 +
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
 +
    position: relative;
 +
    font-size: 18px;
 +
    font-weight: 300;
 +
    font-style: italic;
 +
    line-height: 1.35;
 +
    letter-spacing: 0.08em
 +
}
 +
 +
blockquote:before
 +
{
 +
    position: absolute;
 +
    left: -0.5em;
 +
    content: '“'
 +
}
 +
 +
blockquote:after
 +
{
 +
    content: '”';
 +
    margin-left: -0.05em
 +
}
 +
 +
address
 +
{
 +
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
 +
    font-size: 14px;
 +
    font-weight: 400;
 +
    line-height: 1.5;
 +
    letter-spacing: 0;
 +
    font-style: normal
 +
}
 +
 +
.typo-display-1
 +
{
 +
    font-family: "sofia-pro",sans-serif;
 +
    text-transform: uppercase;
 +
    font-size: 96px;
 +
    font-weight: 400;
 +
    line-height: 1
 +
}
 +
 +
.typo-display-2
 +
{
 +
    font-family: "sofia-pro",sans-serif;
 +
    text-transform: uppercase;
 +
    font-size: 56px;
 +
    font-weight: 700;
 +
    line-height: 1em;
 +
    letter-spacing: 2.8px
 +
}
 +
 +
.typo-display-3
 +
{
 +
    font-family: "sofia-pro",sans-serif;
 +
    text-transform: uppercase;
 +
    font-size: 32px;
 +
    font-weight: 700;
 +
    line-height: 48px;
 +
    letter-spacing: 0.64px
 +
}
 +
 +
.typo-display-4
 +
{
 +
    font-family: "sofia-pro",sans-serif;
 +
    text-transform: uppercase;
 +
    font-size: 28px;
 +
    font-weight: 700;
 +
    line-height: 40px
 +
}
 +
 +
.typo-headline
 +
{
 +
    font-family: "sofia-pro",sans-serif;
 +
    font-size: 22px;
 +
    font-weight: 600;
 +
    line-height: 32px;
 +
    letter-spacing: 0.22px
 +
}
 +
 +
.typo-title
 +
{
 +
    font-family: "sofia-pro",sans-serif;
 +
    font-size: 20px;
 +
    font-weight: 500;
 +
    line-height: 28px;
 +
    letter-spacing: 0.2px
 +
}
 +
 +
.typo-subhead
 +
{
 +
    font-family: "sofia-pro",sans-serif;
 +
    font-size: 16px;
 +
    font-weight: 600;
 +
    line-height: 24px;
 +
    letter-spacing: 0.16px
 +
}
 +
 +
.typo-body-2
 +
{
 +
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
 +
    font-size: 14px;
 +
    font-weight: 500;
 +
    line-height: 1.4;
 +
    letter-spacing: 0
 +
}
 +
 +
.typo-body-1
 +
{
 +
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
 +
    font-size: 14px;
 +
    font-weight: 400;
 +
    line-height: 1.5;
 +
    letter-spacing: 0
 +
}
 +
 +
.typo-caption
 +
{
 +
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
 +
    font-size: 12px;
 +
    font-weight: 400;
 +
    line-height: 1;
 +
    letter-spacing: 0
 +
}
 +
 +
.typo-menu
 +
{
 +
    font-family: "sofia-pro",sans-serif;
 +
    font-size: 10px;
 +
    font-weight: 600;
 +
    line-height: 1em;
 +
    letter-spacing: 0.1em;
 +
    text-transform: uppercase
 +
}
 +
 +
.typo-menu.small
 +
{
 +
    font-size: 13px
 +
}
 +
 +
.typo-button
 +
{
 +
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
 +
    font-size: 12px;
 +
    font-weight: 500;
 +
    text-transform: uppercase;
 +
    line-height: 1em;
 +
    letter-spacing: .28em;
 +
    letter-spacing: 0.28px
 +
}
 +
 +
.small
 +
{
 +
    font-size: 85%
 +
}
 +
 +
@font-face
 +
{
 +
    font-family:'4eblabs';
 +
src:url("../fonts/4eblabs.eot");
 +
src:url("../fonts/4eblabs.eot") format("embedded-opentype"),url("../fonts/4eblabs.ttf") format("truetype"),url("../fonts/4eblabs.woff") format("woff"),url("../fonts/4eblabs.svg") format("svg");
 +
font-weight:normal;
 +
font-style:normal
 +
}
 +
[class^="icon-"],[class*=" icon-"]
 +
{
 +
    font-family: '4eblabs';
 +
    speak: none;
 +
    font-style: normal;
 +
    font-weight: normal;
 +
    font-variant: normal;
 +
    text-transform: none;
 +
    line-height: 1;
 +
    -webkit-font-smoothing: antialiased;
 +
    -moz-osx-font-smoothing: grayscale
 +
}
 +
 +
.icon-behance:before
 +
{
 +
    content: "\e800"
 +
}
 +
 +
.icon-calendar:before
 +
{
 +
    content: "\e617"
 +
}
 +
 +
.icon-stats:before
 +
{
 +
    content: "\e618"
 +
}
 +
 +
.icon-chrome:before
 +
{
 +
    content: "\e61a"
 +
}
 +
 +
.icon-firefox:before
 +
{
 +
    content: "\e61b"
 +
}
 +
 +
.icon-ie:before
 +
{
 +
    content: "\e61c"
 +
}
 +
 +
.icon-opera:before
 +
{
 +
    content: "\e61d"
 +
}
 +
 +
.icon-safari:before
 +
{
 +
    content: "\e61e"
 +
}
 +
 +
.icon-codepen:before
 +
{
 +
    content: "\e619"
 +
}
 +
 +
.icon-reorder:before
 +
{
 +
    content: "\e071"
 +
}
 +
 +
.icon-remove-circle:before
 +
{
 +
    content: "\e074"
 +
}
 +
 +
.icon-long-arrow-right:before
 +
{
 +
    content: "\e0ad"
 +
}
 +
 +
.icon-long-arrow-left:before
 +
{
 +
    content: "\e0ae"
 +
}
 +
 +
.icon-circle-arrow-right:before
 +
{
 +
    content: "\e138"
 +
}
 +
 +
.icon-circle-arrow-left:before
 +
{
 +
    content: "\e139"
 +
}
 +
 +
.icon-chevron-right:before
 +
{
 +
    content: "\e13c"
 +
}
 +
 +
.icon-chevron-left:before
 +
{
 +
    content: "\e13d"
 +
}
 +
 +
.icon-line-arrow-right:before
 +
{
 +
    content: "\e166"
 +
}
 +
 +
.icon-line-arrow-left:before
 +
{
 +
    content: "\e167"
 +
}
 +
 +
.icon-angle-right:before
 +
{
 +
    content: "\e16d"
 +
}
 +
 +
.icon-angle-left:before
 +
{
 +
    content: "\e16e"
 +
}
 +
 +
.icon-menu:before
 +
{
 +
    content: "\e607"
 +
}
 +
 +
.icon-gmail:before
 +
{
 +
    content: "\e60a"
 +
}
 +
 +
.icon-arrow-left:before
 +
{
 +
    content: "\e600"
 +
}
 +
 +
.icon-arrow-right:before
 +
{
 +
    content: "\e601"
 +
}
 +
 +
.icon-chart:before
 +
{
 +
    content: "\e602"
 +
}
 +
 +
.icon-check:before
 +
{
 +
    content: "\e603"
 +
}
 +
 +
.icon-css3:before
 +
{
 +
    content: "\e604"
 +
}
 +
 +
.icon-disk:before
 +
{
 +
    content: "\e605"
 +
}
 +
 +
.icon-dropbox:before
 +
{
 +
    content: "\e606"
 +
}
 +
 +
.icon-flowchart:before
 +
{
 +
    content: "\e608"
 +
}
 +
 +
.icon-git:before
 +
{
 +
    content: "\e609"
 +
}
 +
 +
.icon-grunt:before
 +
{
 +
    content: "\e60b"
 +
}
 +
 +
.icon-html5:before
 +
{
 +
    content: "\e60c"
 +
}
 +
 +
.icon-illustrator:before
 +
{
 +
    content: "\e60d"
 +
}
 +
 +
.icon-javascript:before
 +
{
 +
    content: "\e60e"
 +
}
 +
 +
.icon-modernizr:before
 +
{
 +
    content: "\e60f"
 +
}
 +
 +
.icon-mysql:before
 +
{
 +
    content: "\e610"
 +
}
 +
 +
.icon-omnigraffle:before
 +
{
 +
    content: "\e611"
 +
}
 +
 +
.icon-photoshop:before
 +
{
 +
    content: "\e612"
 +
}
 +
 +
.icon-php:before
 +
{
 +
    content: "\e613"
 +
}
 +
 +
.icon-sketch:before
 +
{
 +
    content: "\e614"
 +
}
 +
 +
.icon-skype:before
 +
{
 +
    content: "\e615"
 +
}
 +
 +
.icon-wordpress:before
 +
{
 +
    content: "\e616"
 +
}
 +
 +
.icon-mobile:before
 +
{
 +
    content: "\e000"
 +
}
 +
 +
.icon-search:before
 +
{
 +
    content: "\e007"
 +
}
 +
 +
.icon-browser:before
 +
{
 +
    content: "\e00c"
 +
}
 +
 +
.icon-expand:before
 +
{
 +
    content: "\e01a"
 +
}
 +
 +
.icon-lightbulb:before
 +
{
 +
    content: "\e030"
 +
}
 +
 +
.icon-pencil:before
 +
{
 +
    content: "\e032"
 +
}
 +
 +
.icon-tools:before
 +
{
 +
    content: "\e033"
 +
}
 +
 +
.icon-tools-2:before
 +
{
 +
    content: "\e034"
 +
}
 +
 +
.icon-paintbrush:before
 +
{
 +
    content: "\e036"
 +
}
 +
 +
.icon-heart:before
 +
{
 +
    content: "\e04a"
 +
}
 +
 +
.icon-upload:before
 +
{
 +
    content: "\e04c"
 +
}
 +
 +
.icon-facebook:before
 +
{
 +
    content: "\e05d"
 +
}
 +
 +
.icon-twitter:before
 +
{
 +
    content: "\e05e"
 +
}
 +
 +
.icon-googleplus:before
 +
{
 +
    content: "\e05f"
 +
}
 +
 +
.icon-tumblr:before
 +
{
 +
    content: "\e061"
 +
}
 +
 +
.icon-linkedin:before
 +
{
 +
    content: "\e062"
 +
}
 +
 +
.icon-dribbble:before
 +
{
 +
    content: "\e063"
 +
}
 +
 +
.text-capitalize
 +
{
 +
    text-transform: capitalize !important
 +
}
 +
 +
.text-uppercase
 +
{
 +
    text-transform: uppercase !important
 +
}
 +
 +
.text-lowercase
 +
{
 +
    text-transform: lowercase !important
 +
}
 +
 +
.text-center
 +
{
 +
    text-align: center !important
 +
}
 +
 +
.text-left
 +
{
 +
    text-align: left !important
 +
}
 +
 +
.text-right
 +
{
 +
    text-align: right !important
 +
}
 +
 +
.text-color-contrast-primary
 +
{
 +
    color: rgba(0,0,0,0.87)
 +
}
 +
 +
 +
.text-color-contrast-secondary
 +
{
 +
    color: rgba(0,0,0,0.54)
 +
}
 +
 +
.text-color-contrast-hint
 +
{
 +
    color: rgba(0,0,0,0.38)
 +
}
 +
 +
.text-color-contrast-primary-alt
 +
{
 +
    color: #fff
 +
}
 +
 +
.text-color-contrast-secondary-alt
 +
{
 +
    color: rgba(255,255,255,0.7)
 +
}
 +
 +
.text-color-contrast-hint-alt
 +
{
 +
    color: rgba(255,255,255,0.5)
 +
}
 +
 +
.font-family-title
 +
{
 +
    font-family: "sofia-pro",sans-serif
 +
}
 +
 +
.font-family-body
 +
{
 +
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif
 +
}
 +
 +
.font-ultra-thin
 +
{
 +
    font-weight: 100 !important
 +
}
 +
 +
.font-thin
 +
{
 +
    font-weight: 200 !important
 +
}
 +
 +
.font-light
 +
{
 +
    font-weight: 300 !important
 +
}
 +
 +
.font-regular
 +
{
 +
    font-weight: 400 !important
 +
}
 +
 +
.font-medium
 +
{
 +
    font-weight: 500 !important
 +
}
 +
 +
.font-semi-bold
 +
{
 +
    font-weight: 600 !important
 +
}
 +
 +
.font-bold
 +
{
 +
    font-weight: 700 !important
 +
}
 +
 +
.font-black
 +
{
 +
    font-weight: 900 !important
 +
}
 +
 +
.font-icons
 +
{
 +
    font-weight: normal;
 +
    font-style: normal;
 +
    font-size: 24px;
 +
    line-height: 1;
 +
    letter-spacing: normal;
 +
    text-transform: none;
 +
    display: inline-block;
 +
    word-wrap: normal;
 +
    font-feature-settings: 'liga';
 +
    -webkit-font-feature-settings: 'liga';
 +
    -webkit-font-smoothing: antialiased
 +
}
 +
 +
*,*:before,*:after
 +
{
 +
    box-sizing: border-box
 +
}
 +
 +
body,h1,h2,h3,h4,h5,h6,p,blockquote,pre,hr,dl,dd,ol,ul,figure
 +
{
 +
    margin: 0;
 +
    padding: 0
 +
}
 +
 +
body
 +
{
 +
    font: 400 16px/1.5 -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
 +
    color: rgba(0,0,0,0.87);
 +
    background-color: #f2f2f2;
 +
    -webkit-text-size-adjust: 100%;
 +
    -webkit-font-feature-settings: "kern" 1;
 +
    -o-font-feature-settings: "kern" 1;
 +
    font-feature-settings: "kern" 1;
 +
    -webkit-font-kerning: normal;
 +
    font-kerning: normal
 +
}
 +
 +
h1,h2,h3,h4,h5,h6,p,blockquote,pre,ul,ol,dl,figure
 +
{
 +
    margin-bottom: 12px
 +
}
 +
 +
img
 +
{
 +
    max-width: 100%;
 +
    vertical-align: middle;
 +
    border: 0
 +
}
 +
 +
img.full-width
 +
{
 +
    width: 100% !important
 +
}
 +
 +
figure>img
 +
{
 +
    display: block
 +
}
 +
 +
figcaption
 +
{
 +
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
 +
    font-size: 12px;
 +
    font-weight: 400;
 +
    line-height: 1;
 +
    letter-spacing: 0
 +
}
 +
 +
ul,ol
 +
{
 +
    list-style: none
 +
}
 +
 +
li>ul,li>ol
 +
{
 +
    margin-bottom: 0
 +
}
 +
 +
a
 +
{
 +
    color: rgba(0,0,0,0.87);
 +
    text-decoration: none
 +
}
 +
 +
a:hover,a:focus
 +
{
 +
    color: #004a7c
 +
}
 +
 +
::-moz-selection
 +
{
 +
    background: #004a7c;
 +
    color: #fff
 +
}
 +
 +
::selection
 +
{
 +
    background: #004a7c;
 +
    color: #fff
 +
}
 +
 +
blockquote
 +
{
 +
    color: #828282;
 +
    border-left: 4px solid #e8e8e8;
 +
    padding-left: 12px
 +
}
 +
 +
blockquote>:last-child
 +
{
 +
    margin-bottom: 0
 +
}
 +
 +
pre,code
 +
{
 +
    font-size: 15px;
 +
    border: 1px solid #e8e8e8;
 +
    border-radius: 3px;
 +
    background-color: #eef
 +
}
 +
 +
code
 +
{
 +
    padding: 1px 5px
 +
}
 +
 +
pre
 +
{
 +
    padding: 8px 12px;
 +
    overflow-x: auto
 +
}
 +
 +
pre>code
 +
{
 +
    border: 0;
 +
    padding-right: 0;
 +
    padding-left: 0
 +
}
 +
 +
.wrapper
 +
{
 +
    max-width: 960px;
 +
    margin-right: auto;
 +
    margin-left: auto
 +
}
 +
 +
@media-query (max-width: 1024px)
 +
{
 +
    .wrapper
 +
    {
 +
        max-width: calc(960px - (24px));
 +
        padding-right: 12px;
 +
        padding-left: 12px
 +
    }
 +
}
 +
 +
@media (max-width: 960px)
 +
{
 +
    .wrapper
 +
    {
 +
        padding-left: 24px;
 +
        padding-right: 24px
 +
    }
 +
}
 +
 +
.wrapper:after,.row:after,body.page--home #loading #landing-container #about-us:after
 +
{
 +
    content: "";
 +
    display: table;
 +
    clear: both
 +
}
 +
 +
.icon>svg
 +
{
 +
    display: inline-block;
 +
    vertical-align: middle
 +
}
 +
 +
.icon>svg path
 +
{
 +
    fill: #828282
 +
}
 +
 +
.line-drawing
 +
{
 +
    transition: opacity 0.5s
 +
}
 +
 +
.line-drawing path
 +
{
 +
    fill: none
 +
}
 +
 +
path.line-round
 +
{
 +
    stroke-linecap: round
 +
}
 +
 +
path.stroke-medium
 +
{
 +
    stroke-width: 1
 +
}
 +
 +
path.stroke-thin
 +
{
 +
    stroke-width: 1
 +
}
 +
 +
symbol g
 +
{
 +
    fill: #f2f2f2
 +
}
 +
 +
::-webkit-scrollbar
 +
{
 +
    display: none
 +
}
 +
 +
*
 +
{
 +
    -ms-overflow-style: none
 +
}
 +
 +
.circle
 +
{
 +
    border-radius: 100%
 +
}
 +
 +
.show
 +
{
 +
    opacity: 1
 +
}
 +
 +
.hide
 +
{
 +
    opacity: 0
 +
}
 +
 +
.pull-left
 +
{
 +
    float: left
 +
}
 +
 +
.pull-right
 +
{
 +
    float: right
 +
}
 +
 +
.button
 +
{
 +
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
 +
    font-size: 12px;
 +
    font-weight: 500;
 +
    text-transform: uppercase;
 +
    line-height: 1em;
 +
    letter-spacing: .28em;
 +
    letter-spacing: 0.28px;
 +
    height: 36px;
 +
    display: inline-block;
 +
    text-align: center;
 +
    line-height: 36px;
 +
    background-color: #004a7c;
 +
    color: #fff !important;
 +
    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.54);
 +
    padding-left: 1rem;
 +
    padding-right: 1rem
 +
}
 +
 +
.button.fixed
 +
{
 +
    width: 96px
 +
}
 +
 +
.button.extend
 +
{
 +
    width: 100%
 +
}
 +
 +
.button:hover
 +
{
 +
    background-color: #39898D;
 +
    transition: all 0.3ms ease-in-out;
 +
    -webkit-transition: all 0.3ms ease-in-out
 +
}
 +
 +
.button.secondary
 +
{
 +
    background-color: #39898D
 +
}
 +
 +
.button.secondary:hover,.button.secondary:focus
 +
{
 +
    background-color: #004a7c
 +
}
 +
 +
.button.dark
 +
{
 +
    background-color: #1A262F
 +
}
 +
 +
.button.dark:hover,.button.dark:focus
 +
{
 +
    background-color: #004a7c
 +
}
 +
 +
.rippleEffect
 +
{
 +
    -webkit-animation: rippleDrop 1s linear;
 +
    animation: rippleDrop 1s linear
 +
}
 +
 +
@-webkit-keyframes rippleDrop
 +
{
 +
    100%
 +
    {
 +
        -webkit-transform: scale(500);
 +
        transform: scale(500)
 +
    }
 +
}
 +
 +
@keyframes rippleDrop
 +
{
 +
    100%
 +
    {
 +
        -webkit-transform: scale(500);
 +
        transform: scale(500)
 +
    }
 +
}
 +
 +
.portfolio--4ocal-web-ui-kit
 +
{
 +
    background: #F7CAC9
 +
}
 +
 +
.page--4ocal-web-ui-kit .page-border
 +
{
 +
    border-color: #F7CAC9
 +
}
 +
 +
.page--4ocal-web-ui-kit .page-border .portfolio-nav-panel
 +
{
 +
    background: #F7CAC9
 +
}
 +
 +
.page--4ocal-web-ui-kit .page-border .portfolio--classic .article-title
 +
{
 +
    color: #F7CAC9
 +
}
 +
 +
.portfolio--4eeder-web-ui-kit
 +
{
 +
    background: #034F84
 +
}
 +
 +
.page--4eeder-web-ui-kit .page-border
 +
{
 +
    border-color: #034F84
 +
}
 +
 +
.page--4eeder-web-ui-kit .page-border .portfolio-nav-panel
 +
{
 +
    background: #034F84
 +
}
 +
 +
.page--4eeder-web-ui-kit .page-border .portfolio--classic .article-title
 +
{
 +
    color: #034F84
 +
}
 +
 +
.portfolio--4boutique-ecommerce-ui-kit
 +
{
 +
    background: #C8A985
 +
}
 +
 +
.page--4boutique-ecommerce-ui-kit .page-border
 +
{
 +
    border-color: #C8A985
 +
}
 +
 +
.page--4boutique-ecommerce-ui-kit .page-border .portfolio-nav-panel
 +
{
 +
    background: #C8A985
 +
}
 +
 +
.page--4boutique-ecommerce-ui-kit .page-border .portfolio--classic .article-title
 +
{
 +
    color: #C8A985
 +
}
 +
 +
.portfolio--baobaofaner-website
 +
{
 +
    background: #FF66A4
 +
}
 +
 +
.page--baobaofaner-website .page-border
 +
{
 +
    border-color: #FF66A4
 +
}
 +
 +
.page--baobaofaner-website .page-border .portfolio-nav-panel
 +
{
 +
    background: #FF66A4
 +
}
 +
 +
.page--baobaofaner-website .page-border .portfolio--classic .article-title
 +
{
 +
    color: #FF66A4
 +
}
 +
 +
.portfolio--kjnational-website
 +
{
 +
    background: #4F7390
 +
}
 +
 +
.page--kjnational-website .page-border
 +
{
 +
    border-color: #4F7390
 +
}
 +
 +
.page--kjnational-website .page-border .portfolio-nav-panel
 +
{
 +
    background: #4F7390
 +
}
 +
 +
.page--kjnational-website .page-border .portfolio--classic .article-title
 +
{
 +
    color: #4F7390
 +
}
 +
 +
.portfolio--the12volt-ecommerce-website
 +
{
 +
    background: #d80c18
 +
}
 +
 +
.page--the12volt-ecommerce-website .page-border
 +
{
 +
    border-color: #d80c18
 +
}
 +
 +
.page--the12volt-ecommerce-website .page-border .portfolio-nav-panel
 +
{
 +
    background: #d80c18
 +
}
 +
 +
.page--the12volt-ecommerce-website .page-border .portfolio--classic .article-title
 +
{
 +
    color: #d80c18
 +
}
 +
 +
.portfolio--akoralanecove-website
 +
{
 +
    background: #98af38
 +
}
 +
 +
.page--akoralanecove-website .page-border
 +
 +
{
 +
    border-color: #98af38
 +
}
 +
 +
.page--akoralanecove-website .page-border .portfolio-nav-panel
 +
{
 +
    background: #98af38
 +
}
 +
 +
.page--akoralanecove-website .page-border .portfolio--classic .article-title
 +
{
 +
    color: #98af38
 +
}
 +
 +
.portfolio--4ebstudio-website
 +
{
 +
    background: #004a7c
 +
}
 +
 +
.page--4ebstudio-website .page-border
 +
{
 +
    border-color: #004a7c
 +
}
 +
 +
.page--4ebstudio-website .page-border .portfolio-nav-panel
 +
{
 +
    background: #004a7c
 +
}
 +
 +
.page--4ebstudio-website .page-border .portfolio--classic .article-title
 +
{
 +
    color: #004a7c
 +
}
 +
 +
.portfolio--htcmc-website
 +
{
 +
    background: #35bc7a
 +
}
 +
 +
.page--htcmc-website .page-border
 +
{
 +
    border-color: #35bc7a
 +
}
 +
 +
.page--htcmc-website .page-border .portfolio-nav-panel
 +
{
 +
    background: #35bc7a
 +
}
 +
 +
.page--htcmc-website .page-border .portfolio--classic .article-title
 +
{
 +
    color: #35bc7a
 +
}
 +
 +
.portfolio--4wow-template
 +
{
 +
    background: #fc0
 +
}
 +
 +
.page--4wow-template .page-border
 +
{
 +
    border-color: #fc0
 +
}
 +
 +
.page--4wow-template .page-border .portfolio-nav-panel
 +
{
 +
    background: #fc0
 +
}
 +
 +
.page--4wow-template .page-border .portfolio--classic .article-title
 +
{
 +
    color: #fc0
 +
}
 +
 +
.portfolio--myaushop-ecommerce-website
 +
{
 +
    background: #afd9f5
 +
}
 +
 +
.page--myaushop-ecommerce-website .page-border
 +
{
 +
    border-color: #afd9f5
 +
}
 +
 +
.page--myaushop-ecommerce-website .page-border .portfolio-nav-panel
 +
{
 +
    background: #afd9f5
 +
}
 +
 +
.page--myaushop-ecommerce-website .page-border .portfolio--classic .article-title
 +
{
 +
    color: #afd9f5
 +
}
 +
 +
.portfolio--4boutique-ecommerce-ui-kit
 +
{
 +
    background-image: linear-gradient(219deg, #C8A985, #F0E3CC)
 +
}
 +
 +
.page--4boutique-ecommerce-ui-kit .page-border
 +
{
 +
    border-image-source: radial-gradient(circle at 17% 100%, #C8A985, #F0E3CC 33%, #F0E3CC 67%, #C8A985);
 +
    border-image-slice: 1
 +
}
 +
 +
.portfolio--applemusic-gui
 +
{
 +
    background-image: radial-gradient(circle at 17% 100%, #e751be, #eb719d 33%, #9c62ea 67%, #4e54e6)
 +
}
 +
 +
.portfolio--4wow-template
 +
{
 +
    background-image: linear-gradient(219deg, #73E0B8, #fc0)
 +
}
 +
 +
.page--4wow-template .page-border
 +
{
 +
    border-image-source: linear-gradient(to left, #73e0b8, #73e0b8 50%, #fc0 50%, #fc0);
 +
    border-image-slice: 1
 +
}
 +
 +
.price-table
 +
{
 +
    border: 1px solid rgba(255,255,255,0.12);
 +
    padding: 48px 24px;
 +
    height: 100%;
 +
    display: -webkit-box;
 +
    display: -ms-flexbox;
 +
    display: flex;
 +
    -webkit-box-orient: vertical;
 +
    -webkit-box-direction: normal;
 +
    -ms-flex-flow: column;
 +
    flex-flow: column
 +
}
 +
 +
.price-table.recommend
 +
{
 +
    border: 2px solid #004a7c
 +
}
 +
 +
.price-table .price-table--header
 +
{
 +
    text-align: center
 +
}
 +
 +
.price-table .price
 +
{
 +
    margin-top: 32px;
 +
    margin-bottom: 32px;
 +
    text-align: center
 +
}
 +
 +
.price-table .price *
 +
{
 +
    line-height: 1em;
 +
    margin: 0 !important
 +
}
 +
 +
.price-table .price .price--number
 +
{
 +
    font-weight: 200;
 +
    letter-spacing: 0
 +
}
 +
 +
.price-table .price .price--caption
 +
{
 +
    font-family: "sofia-pro",sans-serif;
 +
    font-size: 10px;
 +
    font-weight: 600;
 +
    line-height: 1em;
 +
    letter-spacing: 0.1em;
 +
    text-transform: uppercase;
 +
    color: rgba(255,255,255,0.7)
 +
}
 +
 +
.price-table .price .price--caption.small
 +
{
 +
    font-size: 13px
 +
}
 +
 +
.price-table ul>li
 +
{
 +
    line-height: 1.7em;
 +
    font-weight: 300;
 +
    letter-spacing: 0.05em;
 +
    padding-left: 1em;
 +
    position: relative
 +
}
 +
 +
.price-table ul>li:before
 +
{
 +
    content: "\00b7";
 +
    position: absolute;
 +
    left: 0
 +
}
 +
 +
.price-table footer.portfolio-table--footer
 +
{
 +
    text-align: center;
 +
    margin-top: 1rem
 +
}
 +
 +
.price-table footer.portfolio-table--footer .label
 +
{
 +
    font-size: 10px;
 +
    text-transform: uppercase;
 +
    color: #39898D;
 +
    border: 1px solid #39898D;
 +
    padding: 2px 4px
 +
}
 +
 +
.price-table footer.portfolio-table--footer .market-links
 +
{
 +
    display: -webkit-box;
 +
    display: -ms-flexbox;
 +
    display: flex;
 +
    -webkit-box-orient: horizontal;
 +
    -webkit-box-direction: normal;
 +
    -ms-flex-flow: row;
 +
    flex-flow: row;
 +
    -webkit-box-align: center;
 +
    -ms-flex-align: center;
 +
    align-items: center;
 +
    -ms-flex-pack: distribute;
 +
    justify-content: space-around;
 +
    margin-top: 1rem
 +
}
 +
 +
.price-table footer.portfolio-table--footer .market-links img
 +
{
 +
    width: 100px
 +
}
 +
 +
.scroll-bar
 +
{
 +
    width: 360px;
 +
    margin-left: 24px;
 +
    margin-top: 60px;
 +
    margin-bottom: 24px;
 +
    position: relative;
 +
    border-bottom: 1px dotted #c5c5c5
 +
}
 +
 +
@media (max-width: 480px)
 +
{
 +
    .scroll-bar
 +
    {
 +
        width: 240px
 +
    }
 +
}
 +
 +
.ui-slider-handle
 +
{
 +
    position: absolute;
 +
    top: -12px;
 +
    bottom: -12px;
 +
    left: 24px;
 +
    width: 24px;
 +
    height: 24px;
 +
    border-radius: 50px;
 +
    background: #39898D;
 +
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5);
 +
    cursor: move;
 +
    outline: none;
 +
    display: -webkit-box;
 +
    display: -ms-flexbox;
 +
    display: flex;
 +
    -webkit-box-orient: horizontal;
 +
    -webkit-box-direction: normal;
 +
    -ms-flex-flow: row;
 +
    flex-flow: row;
 +
    -webkit-box-align: center;
 +
    -ms-flex-align: center;
 +
    align-items: center;
 +
    vertical-align: middle
 +
}
 +
 +
.ui-slider-handle:first-of-type
 +
{
 +
    display: none
 +
}
 +
 +
.ui-slider-handle:before
 +
{
 +
    content: "\2039";
 +
    width: 50%;
 +
    text-align: right;
 +
    color: white;
 +
    margin-top: -2px
 +
}
 +
 +
.ui-slider-handle:after
 +
{
 +
    content: "\203A";
 +
    width: 50%;
 +
    text-align: left;
 +
    color: white;
 +
    margin-top: -2px
 +
}
 +
 +
.ui-slider-range
 +
{
 +
    height: 1px;
 +
    margin-bottom: -1px;
 +
    background: rgba(0,0,0,0.87)
 +
}
 +
 +
.slides input
 +
{
 +
    display: none
 +
}
 +
 +
.slides #overflow
 +
{
 +
    overflow: hidden
 +
}
 +
 +
.slides figure img
 +
{
 +
    width: 100%
 +
}
 +
 +
.slides #slides .inner
 +
{
 +
    width: 800%;
 +
    line-height: 0
 +
}
 +
 +
.slides #slides figure
 +
{
 +
    width: 12.5%;
 +
    float: left;
 +
    margin: 0
 +
}
 +
 +
.slides #slide1:checked ~ #slides .inner
 +
{
 +
    margin-left: 0%
 +
}
 +
 +
.slides #slide2:checked ~ #slides .inner
 +
{
 +
    margin-left: -100%
 +
}
 +
 +
.slides #slide3:checked ~ #slides .inner
 +
{
 +
    margin-left: -200%
 +
}
 +
 +
.slides #slide4:checked ~ #slides .inner
 +
{
 +
    margin-left: -300%
 +
}
 +
 +
.slides #slide5:checked ~ #slides .inner
 +
{
 +
    margin-left: -400%
 +
}
 +
 +
.slides #slide6:checked ~ #slides .inner
 +
{
 +
    margin-left: -500%
 +
}
 +
 +
.slides #slide7:checked ~ #slides .inner
 +
{
 +
    margin-left: -600%
 +
}
 +
 +
.slides #slide8:checked ~ #slides .inner
 +
{
 +
    margin-left: -700%
 +
}
 +
 +
.slides #controls
 +
{
 +
    margin: -30% 0 0 0;
 +
    width: 100%;
 +
    height: 50px
 +
}
 +
 +
.slides #controls label
 +
{
 +
    display: none;
 +
    width: 50px;
 +
    height: 50px;
 +
    opacity: 0.3
 +
}
 +
 +
.slides #active
 +
{
 +
    margin: 28% 0 0;
 +
    text-align: center
 +
}
 +
 +
@media (max-width: 480px)
 +
{
 +
    .slides #active
 +
    {
 +
        margin: 10% 0 0
 +
    }
 +
}
 +
 +
.slides #active label
 +
{
 +
    border-radius: 5px;
 +
    display: inline-block;
 +
    width: 10px;
 +
    height: 10px;
 +
    background: #999999;
 +
    margin-left: 4px;
 +
    margin-right: 4px
 +
}
 +
 +
.slides #active label:hover
 +
{
 +
    background: #ccc;
 +
    border-color: #777 !important;
 +
    cursor: pointer
 +
}
 +
 +
.slides #controls label:hover
 +
{
 +
    opacity: 0.8;
 +
    cursor: pointer
 +
}
 +
 +
.slides #slide1:checked ~ #controls label:nth-child(2)
 +
{
 +
    background: url("../images/arrow-next.png") no-repeat center;
 +
    float: right;
 +
    margin: 0;
 +
    display: block
 +
}
 +
 +
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)
 +
{
 +
    .slides #slide1:checked ~ #controls label:nth-child(2)
 +
    {
 +
        background: url("../images/arrow-next@2x.png") no-repeat center;
 +
        background-size: 26px 47px
 +
    }
 +
}
 +
 +
.slides #slide2:checked ~ #controls label:nth-child(3)
 +
{
 +
    background: url("../images/arrow-next.png") no-repeat center;
 +
    float: right;
 +
    margin: 0;
 +
    display: block
 +
}
 +
 +
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)
 +
{
 +
    .slides #slide2:checked ~ #controls label:nth-child(3)
 +
    {
 +
        background: url("../images/arrow-next@2x.png") no-repeat center;
 +
        background-size: 26px 47px
 +
    }
 +
}
 +
 +
.slides #slide3:checked ~ #controls label:nth-child(4)
 +
{
 +
    background: url("../images/arrow-next.png") no-repeat center;
 +
    float: right;
 +
    margin: 0;
 +
    display: block
 +
}
 +
 +
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)
 +
{
 +
    .slides #slide3:checked ~ #controls label:nth-child(4)
 +
    {
 +
        background: url("../images/arrow-next@2x.png") no-repeat center;
 +
        background-size: 26px 47px
 +
    }
 +
}
 +
 +
.slides #slide4:checked ~ #controls label:nth-child(5)
 +
{
 +
    background: url("../images/arrow-next.png") no-repeat center;
 +
    float: right;
 +
    margin: 0;
 +
    display: block
 +
}
 +
 +
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)
 +
{
 +
    .slides #slide4:checked ~ #controls label:nth-child(5)
 +
    {
 +
        background: url("../images/arrow-next@2x.png") no-repeat center;
 +
        background-size: 26px 47px
 +
    }
 +
}
 +
 +
.slides #slide5:checked ~ #controls label:nth-child(6)
 +
{
 +
    background: url("../images/arrow-next.png") no-repeat center;
 +
    float: right;
 +
    margin: 0;
 +
    display: block
 +
}
 +
 +
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)
 +
{
 +
    .slides #slide5:checked ~ #controls label:nth-child(6)
 +
    {
 +
        background: url("../images/arrow-next@2x.png") no-repeat center;
 +
        background-size: 26px 47px
 +
    }
 +
}
 +
 +
.slides #slide6:checked ~ #controls label:nth-child(7)
 +
{
 +
    background: url("../images/arrow-next.png") no-repeat center;
 +
    float: right;
 +
    margin: 0;
 +
    display: block
 +
}
 +
 +
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)
 +
{
 +
    .slides #slide6:checked ~ #controls label:nth-child(7)
 +
    {
 +
        background: url("../images/arrow-next@2x.png") no-repeat center;
 +
        background-size: 26px 47px
 +
    }
 +
}
 +
 +
.slides #slide7:checked ~ #controls label:nth-child(8)
 +
{
 +
    background: url("../images/arrow-next.png") no-repeat center;
 +
    float: right;
 +
    margin: 0;
 +
    display: block
 +
}
 +
 +
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)
 +
{
 +
    .slides #slide7:checked ~ #controls label:nth-child(8)
 +
    {
 +
        background: url("../images/arrow-next@2x.png") no-repeat center;
 +
        background-size: 26px 47px
 +
    }
 +
}
 +
 +
.slides #slide8:checked ~ #controls label:nth-child(9)
 +
{
 +
    background: url("../images/arrow-next.png") no-repeat center;
 +
    float: right;
 +
    margin: 0;
 +
    display: block
 +
}
 +
 +
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)
 +
{
 +
    .slides #slide8:checked ~ #controls label:nth-child(9)
 +
    {
 +
        background: url("../images/arrow-next@2x.png") no-repeat center;
 +
        background-size: 26px 47px
 +
    }
 +
}
 +
 +
.slides #slide8:checked ~ #controls label:nth-child(1)
 +
{
 +
    background: url("../images/arrow-next.png") no-repeat center;
 +
    float: right;
 +
    margin: 0;
 +
    display: block
 +
}
 +
 +
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)
 +
{
 +
    .slides #slide8:checked ~ #controls label:nth-child(1)
 +
    {
 +
        background: url("../images/arrow-next@2x.png") no-repeat center;
 +
        background-size: 26px 47px
 +
    }
 +
}
 +
 +
.slides #slide1:checked ~ #controls label:nth-child(8)
 +
{
 +
    background: url("../images/arrow-prev.png") no-repeat center;
 +
    float: left;
 +
    margin: 0;
 +
    display: block
 +
}
 +
 +
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)
 +
{
 +
    .slides #slide1:checked ~ #controls label:nth-child(8)
 +
    {
 +
        background: url("../images/arrow-prev@2x.png") no-repeat center;
 +
        background-size: 26px 47px
 +
    }
 +
}
 +
 +
.slides #slide2:checked ~ #controls label:nth-child(1)
 +
{
 +
    background: url("../images/arrow-prev.png") no-repeat center;
 +
    float: left;
 +
    margin: 0;
 +
    display: block
 +
}
 +
 +
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)
 +
{
 +
    .slides #slide2:checked ~ #controls label:nth-child(1)
 +
    {
 +
        background: url("../images/arrow-prev@2x.png") no-repeat center;
 +
        background-size: 26px 47px
 +
    }
 +
}
 +
 +
.slides #slide3:checked ~ #controls label:nth-child(2)
 +
{
 +
    background: url("../images/arrow-prev.png") no-repeat center;
 +
    float: left;
 +
    margin: 0;
 +
    display: block
 +
}
 +
 +
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)
 +
{
 +
    .slides #slide3:checked ~ #controls label:nth-child(2)
 +
    {
 +
        background: url("../images/arrow-prev@2x.png") no-repeat center;
 +
        background-size: 26px 47px
 +
    }
 +
}
 +
 +
.slides #slide4:checked ~ #controls label:nth-child(3)
 +
{
 +
    background: url("../images/arrow-prev.png") no-repeat center;
 +
    float: left;
 +
    margin: 0;
 +
    display: block
 +
}
 +
 +
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)
 +
{
 +
    .slides #slide4:checked ~ #controls label:nth-child(3)
 +
    {
 +
        background: url("../images/arrow-prev@2x.png") no-repeat center;
 +
        background-size: 26px 47px
 +
    }
 +
}
 +
 +
.slides #slide5:checked ~ #controls label:nth-child(4)
 +
{
 +
    background: url("../images/arrow-prev.png") no-repeat center;
 +
    float: left;
 +
    margin: 0;
 +
    display: block
 +
}
 +
 +
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)
 +
{
 +
    .slides #slide5:checked ~ #controls label:nth-child(4)
 +
    {
 +
        background: url("../images/arrow-prev@2x.png") no-repeat center;
 +
        background-size: 26px 47px
 +
    }
 +
}
 +
 +
.slides #slide6:checked ~ #controls label:nth-child(5)
 +
{
 +
    background: url("../images/arrow-prev.png") no-repeat center;
 +
    float: left;
 +
    margin: 0;
 +
    display: block
 +
}
 +
 +
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)
 +
{
 +
    .slides #slide6:checked ~ #controls label:nth-child(5)
 +
    {
 +
        background: url("../images/arrow-prev@2x.png") no-repeat center;
 +
        background-size: 26px 47px
 +
    }
 +
}
 +
 +
.slides #slide7:checked ~ #controls label:nth-child(6)
 +
{
 +
    background: url("../images/arrow-prev.png") no-repeat center;
 +
    float: left;
 +
    margin: 0;
 +
    display: block
 +
}
 +
 +
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)
 +
{
 +
    .slides #slide7:checked ~ #controls label:nth-child(6)
 +
    {
 +
        background: url("../images/arrow-prev@2x.png") no-repeat center;
 +
        background-size: 26px 47px
 +
    }
 +
}
 +
 +
.slides #slide8:checked ~ #controls label:nth-child(7)
 +
{
 +
    background: url("../images/arrow-prev.png") no-repeat center;
 +
    float: left;
 +
    margin: 0;
 +
    display: block
 +
}
 +
 +
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)
 +
{
 +
    .slides #slide8:checked ~ #controls label:nth-child(7)
 +
    {
 +
        background: url("../images/arrow-prev@2x.png") no-repeat center;
 +
        background-size: 26px 47px
 +
    }
 +
}
 +
 +
.slides #slide1:checked ~ #active label:nth-child(1)
 +
{
 +
    background: #004a7c
 +
}
 +
 +
.slides #slide2:checked ~ #active label:nth-child(2)
 +
{
 +
    background: #004a7c
 +
}
 +
 +
.slides #slide3:checked ~ #active label:nth-child(3)
 +
{
 +
    background: #004a7c
 +
}
 +
 +
.slides #slide4:checked ~ #active label:nth-child(4)
 +
{
 +
    background: #004a7c
 +
}
 +
 +
.slides #slide5:checked ~ #active label:nth-child(5)
 +
{
 +
    background: #004a7c
 +
}
 +
 +
.slides #slide6:checked ~ #active label:nth-child(6)
 +
{
 +
    background: #004a7c
 +
}
 +
 +
.slides #slide7:checked ~ #active label:nth-child(7)
 +
{
 +
    background: #004a7c
 +
}
 +
 +
.slides #slide8:checked ~ #active label:nth-child(8)
 +
{
 +
    background: #004a7c
 +
}
 +
 +
.slides #slides
 +
{
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
    box-sizing: border-box
 +
}
 +
 +
.slides #slides .inner
 +
{
 +
    -webkit-transform: translateZ(0);
 +
    transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
 +
    transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1)
 +
}
 +
 +
.slides #slider
 +
{
 +
    -webkit-transform: translateZ(0);
 +
    transition: all 0.5s ease-out
 +
}
 +
 +
.slides #controls label
 +
{
 +
    -webkit-transform: translateZ(0);
 +
    transition: opacity 0.2s ease-out
 +
}
 +
 +
.slides #controls,.slides #slides,.slides #active,.slides #active label
 +
{
 +
    -webkit-transform: translateZ(0);
 +
    transition: all 0.5s ease-out
 +
}
 +
 +
.slides-v
 +
{
 +
    display: -webkit-box;
 +
    display: -ms-flexbox;
 +
    display: flex;
 +
    -webkit-box-align: center;
 +
    -ms-flex-align: center;
 +
    align-items: center
 +
}
 +
 +
.slides-v input
 +
{
 +
    display: none
 +
}
 +
 +
.slides-v #slides,.slides-v #overflow
 +
{
 +
    overflow: visible;
 +
    width: calc(50vw - 0.5rem);
 +
    height: 33.33vw
 +
}
 +
 +
.slides-v figure img
 +
{
 +
    width: 100%;
 +
    height: 100%
 +
}
 +
 +
.slides-v #slides .inner
 +
{
 +
    width: calc(50vw - 0.5rem);
 +
    height: 800%;
 +
    line-height: 0
 +
}
 +
 +
.slides-v #slides figure
 +
{
 +
    width: calc(50vw - 0.5rem);
 +
    height: 33.33vw;
 +
    float: left;
 +
    margin: 0
 +
}
 +
 +
.slides-v #slide1:checked ~ #slides .inner
 +
{
 +
    margin-top: 0vw
 +
}
 +
 +
.slides-v #slide2:checked ~ #slides .inner
 +
{
 +
    margin-top: -33.33vw
 +
}
 +
 +
.slides-v #slide3:checked ~ #slides .inner
 +
{
 +
    margin-top: -66.66vw
 +
}
 +
 +
.slides-v #slide4:checked ~ #slides .inner
 +
{
 +
    margin-top: -99.99vw
 +
}
 +
 +
.slides-v #slide5:checked ~ #slides .inner
 +
{
 +
    margin-top: -133.32vw
 +
}
 +
 +
.slides-v #slide6:checked ~ #slides .inner
 +
{
 +
    margin-top: -166.65vw
 +
}
 +
 +
.slides-v #slide7:checked ~ #slides .inner
 +
{
 +
    margin-top: -199.98vw
 +
}
 +
 +
.slides-v #slide8:checked ~ #slides .inner
 +
{
 +
    margin-top: -233.31vw
 +
}
 +
 +
.slides-v #controls
 +
{
 +
    width: 100%;
 +
    margin: 0;
 +
    position: absolute;
 +
    z-index: 50;
 +
    -webkit-transform: rotate(90deg);
 +
    transform: rotate(90deg);
 +
    display: -webkit-box;
 +
    display: -ms-flexbox;
 +
    display: flex;
 +
    -webkit-box-align: center;
 +
    -ms-flex-align: center;
 +
    align-items: center;
 +
    -webkit-box-pack: center;
 +
    -ms-flex-pack: center;
 +
    justify-content: center
 +
}
 +
 +
.slides-v #controls .controls-container
 +
{
 +
    width: 33.33vw
 +
}
 +
 +
@media not all and (min-resolution: 0.001dpcm)
 +
{
 +
@    supports (-webkit-appearance: none)
 +
    {
 +
        .slides-v #controls
 +
{
 +
left: 0;
 +
        top: calc(50% - 30px)
 +
    }
 +
}
 +
}
 +
 +
@media screen and (min-width: 0\0)
 +
{
 +
    .slides-v #controls
 +
    {
 +
        left: 0;
 +
        top: calc(50% - 30px)
 +
    }
 +
}
 +
 +
.slides-v #controls label
 +
{
 +
    display: none;
 +
    width: 60px;
 +
    height: 60px;
 +
    opacity: 0.3
 +
}
 +
 +
.slides-v #active
 +
{
 +
    margin: 28% 0 0;
 +
    text-align: center;
 +
    height: 60px
 +
}
 +
 +
@media (max-width: 480px)
 +
{
 +
    .slides-v #active
 +
    {
 +
        margin: 10% 0 0
 +
    }
 +
}
 +
 +
.slides-v #active label
 +
{
 +
    border-radius: 5px;
 +
    display: inline-block;
 +
    width: 10px;
 +
    height: 10px;
 +
    background: #999999;
 +
    margin-left: 4px;
 +
    margin-right: 4px
 +
}
 +
 +
.slides-v #active label:hover
 +
{
 +
    background: #ccc;
 +
    border-color: #777 !important;
 +
    cursor: pointer
 +
}
 +
 +
.slides-v #controls label:hover
 +
{
 +
    opacity: 0.8;
 +
    cursor: pointer
 +
}
 +
 +
.slides-v #slide1:checked ~ #controls label:nth-child(2)
 +
{
 +
    background: url("../images/arrow-next.png") no-repeat center;
 +
    float: right;
 +
    margin: 0;
 +
    display: block
 +
}
 +
 +
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)
 +
{
 +
    .slides-v #slide1:checked ~ #controls label:nth-child(2)
 +
    {
 +
        background: url("../images/arrow-next@2x.png") no-repeat center;
 +
        background-size: 30px 60px
 +
    }
 +
}
 +
 +
.slides-v #slide2:checked ~ #controls label:nth-child(3)
 +
{
 +
    background: url("../images/arrow-next.png") no-repeat center;
 +
    float: right;
 +
    margin: 0;
 +
    display: block
 +
}
 +
 +
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)
 +
{
 +
    .slides-v #slide2:checked ~ #controls label:nth-child(3)
 +
    {
 +
        background: url("../images/arrow-next@2x.png") no-repeat center;
 +
        background-size: 30px 60px
 +
    }
 +
}
 +
 +
.slides-v #slide3:checked ~ #controls label:nth-child(4)
 +
{
 +
    background: url("../images/arrow-next.png") no-repeat center;
 +
    float: right;
 +
    margin: 0;
 +
    display: block
 +
}
 +
 +
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)
 +
{
 +
    .slides-v #slide3:checked ~ #controls label:nth-child(4)
 +
    {
 +
        background: url("../images/arrow-next@2x.png") no-repeat center;
 +
        background-size: 30px 60px
 +
    }
 +
}
 +
 +
.slides-v #slide4:checked ~ #controls label:nth-child(5)
 +
{
 +
    background: url("../images/arrow-next.png") no-repeat center;
 +
    float: right;
 +
    margin: 0;
 +
    display: block
 +
}
 +
 +
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)
 +
{
 +
    .slides-v #slide4:checked ~ #controls label:nth-child(5)
 +
    {
 +
        background: url("../images/arrow-next@2x.png") no-repeat center;
 +
        background-size: 30px 60px
 +
    }
 +
}
 +
 +
.slides-v #slide5:checked ~ #controls label:nth-child(6)
 +
{
 +
    background: url("../images/arrow-next.png") no-repeat center;
 +
    float: right;
 +
    margin: 0;
 +
    display: block
 +
}
 +
 +
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)
 +
{
 +
    .slides-v #slide5:checked ~ #controls label:nth-child(6)
 +
    {
 +
        background: url("../images/arrow-next@2x.png") no-repeat center;
 +
        background-size: 30px 60px
 +
    }
 +
}
 +
 +
.slides-v #slide6:checked ~ #controls label:nth-child(7)
 +
{
 +
    background: url("../images/arrow-next.png") no-repeat center;
 +
    float: right;
 +
    margin: 0;
 +
    display: block
 +
}
 +
 +
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)
 +
{
 +
    .slides-v #slide6:checked ~ #controls label:nth-child(7)
 +
    {
 +
        background: url("../images/arrow-next@2x.png") no-repeat center;
 +
        background-size: 30px 60px
 +
    }
 +
}
 +
 +
.slides-v #slide7:checked ~ #controls label:nth-child(8)
 +
{
 +
    background: url("../images/arrow-next.png") no-repeat center;
 +
    float: right;
 +
    margin: 0;
 +
    display: block
 +
}
 +
 +
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)
 +
{
 +
    .slides-v #slide7:checked ~ #controls label:nth-child(8)
 +
    {
 +
        background: url("../images/arrow-next@2x.png") no-repeat center;
 +
        background-size: 30px 60px
 +
    }
 +
}
 +
 +
.slides-v #slide8:checked ~ #controls label:nth-child(9)
 +
{
 +
    background: url("../images/arrow-next.png") no-repeat center;
 +
    float: right;
 +
    margin: 0;
 +
    display: block
 +
}
 +
 +
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)
 +
{
 +
    .slides-v #slide8:checked ~ #controls label:nth-child(9)
 +
    {
 +
        background: url("../images/arrow-next@2x.png") no-repeat center;
 +
        background-size: 30px 60px
 +
    }
 +
}
 +
 +
.slides-v #slide8:checked ~ #controls label:nth-child(1)
 +
{
 +
    background: url("../images/arrow-next.png") no-repeat center;
 +
    float: right;
 +
    margin: 0;
 +
    display: block
 +
}
 +
 +
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)
 +
{
 +
    .slides-v #slide8:checked ~ #controls label:nth-child(1)
 +
    {
 +
        background: url("../images/arrow-next@2x.png") no-repeat center;
 +
        background-size: 30px 60px
 +
    }
 +
}
 +
 +
.slides-v #slide1:checked ~ #controls label:nth-child(8)
 +
{
 +
    background: url("../images/arrow-prev.png") no-repeat center;
 +
    float: left;
 +
    margin: 0;
 +
    display: block
 +
}
 +
 +
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)
 +
{
 +
    .slides-v #slide1:checked ~ #controls label:nth-child(8)
 +
    {
 +
        background: url("../images/arrow-prev@2x.png") no-repeat center;
 +
        background-size: 30px 60px
 +
    }
 +
}
 +
 +
.slides-v #slide2:checked ~ #controls label:nth-child(1)
 +
{
 +
    background: url("../images/arrow-prev.png") no-repeat center;
 +
    float: left;
 +
    margin: 0;
 +
    display: block
 +
}
 +
 +
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)
 +
{
 +
    .slides-v #slide2:checked ~ #controls label:nth-child(1)
 +
    {
 +
        background: url("../images/arrow-prev@2x.png") no-repeat center;
 +
        background-size: 30px 60px
 +
    }
 +
}
 +
 +
.slides-v #slide3:checked ~ #controls label:nth-child(2)
 +
{
 +
    background: url("../images/arrow-prev.png") no-repeat center;
 +
    float: left;
 +
    margin: 0;
 +
    display: block
 +
}
 +
 +
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)
 +
{
 +
    .slides-v #slide3:checked ~ #controls label:nth-child(2)
 +
    {
 +
        background: url("../images/arrow-prev@2x.png") no-repeat center;
 +
        background-size: 30px 60px
 +
    }
 +
}
 +
 +
.slides-v #slide4:checked ~ #controls label:nth-child(3)
 +
{
 +
    background: url("../images/arrow-prev.png") no-repeat center;
 +
    float: left;
 +
    margin: 0;
 +
    display: block
 +
}
 +
 +
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)
 +
{
 +
    .slides-v #slide4:checked ~ #controls label:nth-child(3)
 +
    {
 +
        background: url("../images/arrow-prev@2x.png") no-repeat center;
 +
        background-size: 30px 60px
 +
    }
 +
}
 +
 +
.slides-v #slide5:checked ~ #controls label:nth-child(4)
 +
{
 +
    background: url("../images/arrow-prev.png") no-repeat center;
 +
    float: left;
 +
    margin: 0;
 +
    display: block
 +
}
 +
 +
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)
 +
{
 +
    .slides-v #slide5:checked ~ #controls label:nth-child(4)
 +
    {
 +
        background: url("../images/arrow-prev@2x.png") no-repeat center;
 +
        background-size: 30px 60px
 +
    }
 +
}
 +
 +
.slides-v #slide6:checked ~ #controls label:nth-child(5)
 +
{
 +
    background: url("../images/arrow-prev.png") no-repeat center;
 +
    float: left;
 +
    margin: 0;
 +
    display: block
 +
}
 +
 +
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)
 +
{
 +
    .slides-v #slide6:checked ~ #controls label:nth-child(5)
 +
    {
 +
        background: url("../images/arrow-prev@2x.png") no-repeat center;
 +
        background-size: 30px 60px
 +
    }
 +
}
 +
 +
.slides-v #slide7:checked ~ #controls label:nth-child(6)
 +
{
 +
    background: url("../images/arrow-prev.png") no-repeat center;
 +
    float: left;
 +
    margin: 0;
 +
    display: block
 +
}
 +
 +
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)
 +
{
 +
    .slides-v #slide7:checked ~ #controls label:nth-child(6)
 +
    {
 +
        background: url("../images/arrow-prev@2x.png") no-repeat center;
 +
        background-size: 30px 60px
 +
    }
 +
}
 +
 +
.slides-v #slide8:checked ~ #controls label:nth-child(7)
 +
{
 +
    background: url("../images/arrow-prev.png") no-repeat center;
 +
    float: left;
 +
    margin: 0;
 +
    display: block
 +
}
 +
 +
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)
 +
{
 +
    .slides-v #slide8:checked ~ #controls label:nth-child(7)
 +
    {
 +
        background: url("../images/arrow-prev@2x.png") no-repeat center;
 +
        background-size: 30px 60px
 +
    }
 +
}
 +
 +
.slides-v #slide1:checked ~ #active label:nth-child(1)
 +
{
 +
    background: #004a7c
 +
}
 +
 +
.slides-v #slide2:checked ~ #active label:nth-child(2)
 +
{
 +
    background: #004a7c
 +
}
 +
 +
.slides-v #slide3:checked ~ #active label:nth-child(3)
 +
{
 +
    background: #004a7c
 +
}
 +
 +
.slides-v #slide4:checked ~ #active label:nth-child(4)
 +
{
 +
    background: #004a7c
 +
}
 +
 +
.slides-v #slide5:checked ~ #active label:nth-child(5)
 +
{
 +
    background: #004a7c
 +
}
 +
 +
.slides-v #slide6:checked ~ #active label:nth-child(6)
 +
{
 +
    background: #004a7c
 +
}
 +
 +
.slides-v #slide7:checked ~ #active label:nth-child(7)
 +
{
 +
    background: #004a7c
 +
}
 +
 +
.slides-v #slide8:checked ~ #active label:nth-child(8)
 +
{
 +
    background: #004a7c
 +
}
 +
 +
.slides-v #slides
 +
{
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
    box-sizing: border-box
 +
}
 +
 +
.slides-v #slides .inner
 +
{
 +
    -webkit-transform: translateZ(0);
 +
    transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
 +
    transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1)
 +
}
 +
 +
.slides-v #slider
 +
{
 +
    -webkit-transform: translateZ(0);
 +
    transition: all 0.5s ease-out
 +
}
 +
 +
.slides-v #controls label
 +
{
 +
    -webkit-transform: translateZ(0);
 +
    transition: opacity 0.2s ease-out
 +
}
 +
 +
@media (max-width: 480px)
 +
{
 +
    .slides-v #controls
 +
    {
 +
        display: none
 +
    }
 +
}
 +
 +
.slides-v #slides,.slides-v #active,.slides-v #active label
 +
{
 +
    -webkit-transform: translateZ(0);
 +
    transition: all 0.5s ease-out
 +
}
 +
 +
#gallery
 +
{
 +
    margin-top: 60px;
 +
    margin-bottom: 100px
 +
}
 +
 +
#gallery #overflow
 +
{
 +
    width: 690px
 +
}
 +
 +
#portfolio-slider
 +
{
 +
    height: calc(100vh - 1rem);
 +
    margin: 0;
 +
    position: relative
 +
}
 +
 +
#portfolio-slider .overlay
 +
{
 +
    position: absolute;
 +
    z-index: 50;
 +
    display: -webkit-box;
 +
    display: -ms-flexbox;
 +
    display: flex;
 +
    -webkit-box-orient: vertical;
 +
    -webkit-box-direction: normal;
 +
    -ms-flex-flow: column;
 +
    flex-flow: column;
 +
    -webkit-box-align: center;
 +
    -ms-flex-align: center;
 +
    align-items: center;
 +
    -webkit-box-pack: center;
 +
    -ms-flex-pack: center;
 +
    justify-content: center
 +
}
 +
 +
@media (max-width: 1024px)
 +
{
 +
    #portfolio-slider .overlay
 +
    {
 +
        display: none
 +
    }
 +
}
 +
 +
#portfolio-slider .overlay .overlay-layers
 +
{
 +
    width: 50vw;
 +
    height: 100vw
 +
}
 +
 +
#portfolio-slider .overlay .overlay-layer
 +
{
 +
    width: 100%;
 +
    height: 33.33vw
 +
}
 +
 +
#portfolio-slider .overlay .overlay-layer.overlay-layer--top
 +
{
 +
    background-image: linear-gradient(-180deg, #F2F2F2 78%, rgba(242,242,242,0.75) 100%)
 +
}
 +
 +
#portfolio-slider .overlay .overlay-layer.overlay-layer--bottom
 +
{
 +
    background-image: linear-gradient(0deg, #F2F2F2 77%, rgba(242,242,242,0.75) 100%)
 +
}
 +
 +
@media not all and (min-resolution: 0.001dpcm)
 +
{
 +
@    supports (-webkit-appearance: none)
 +
    {
 +
        #portfolio-slider .overlay
 +
{
 +
height: calc(100vh - 1rem)
 +
    }
 +
 +
    #portfolio-slider .overlay .overlay-layers
 +
    {
 +
        display: -webkit-box;
 +
        display: -ms-flexbox;
 +
        display: flex;
 +
        -webkit-box-orient: vertical;
 +
        -webkit-box-direction: normal;
 +
        -ms-flex-flow: column;
 +
        flex-flow: column;
 +
        -webkit-box-align: center;
 +
        -ms-flex-align: center;
 +
        align-items: center;
 +
        -webkit-box-pack: center;
 +
        -ms-flex-pack: center;
 +
        justify-content: center
 +
    }
 +
}
 +
}
 +
 +
@media screen and (min-width: 0\0)
 +
{
 +
    #portfolio-slider .overlay
 +
    {
 +
        height: calc(100vh - 1rem);
 +
        top: 0;
 +
        -webkit-box-orient: horizontal;
 +
        -webkit-box-direction: normal;
 +
        -ms-flex-flow: row;
 +
        flex-flow: row
 +
    }
 +
 +
    #portfolio-slider .overlay .overlay-layers
 +
    {
 +
        display: -webkit-box;
 +
        display: -ms-flexbox;
 +
        display: flex;
 +
        -webkit-box-orient: vertical;
 +
        -webkit-box-direction: normal;
 +
        -ms-flex-flow: column;
 +
        flex-flow: column;
 +
        -webkit-box-align: center;
 +
        -ms-flex-align: center;
 +
        align-items: center;
 +
        -webkit-box-pack: center;
 +
        -ms-flex-pack: center;
 +
        justify-content: center
 +
    }
 +
}
 +
 +
#portfolio-slider.slides .overlay
 +
{
 +
    display: none
 +
}
 +
 +
#awwwards
 +
{
 +
    position: absolute;
 +
    top: 64px;
 +
    width: 90px;
 +
    height: 135px;
 +
    text-indent: -666em;
 +
    overflow: hidden;
 +
    z-index: 999;
 +
    transition: all 1s ease
 +
}
 +
 +
#awwwards.top
 +
{
 +
    top: 20px
 +
}
 +
 +
#awwwards.left
 +
{
 +
    left: 0
 +
}
 +
 +
#awwwards.right
 +
{
 +
    right: 0
 +
}
 +
 +
#awwwards a
 +
{
 +
    position: absolute;
 +
    top: 0;
 +
    left: 0;
 +
    display: block;
 +
    width: 90px;
 +
    height: 135px;
 +
    background-repeat: no-repeat;
 +
    background-size: 90px 135px
 +
}
 +
 +
#awwwards.nominee.green.left a
 +
{
 +
    background-image: url(../images/awwwards_nominee_green_left.png)
 +
}
 +
 +
#awwwards.nominee.green.right a
 +
{
 +
    background-image: url(../images/awwwards_nominee_green_right.png)
 +
}
 +
 +
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3 / 2), only screen and (min-device-pixel-ratio: 1.5)
 +
{
 +
    #awwwards.nominee.green.left a
 +
    {
 +
        background-image: url(../images/awwwards_nominee_green_left@2x.png)
 +
    }
 +
 +
    #awwwards.nominee.green.right a
 +
    {
 +
        background-image: url(../images/awwwards_nominee_green_right@2x.png)
 +
    }
 +
}
 +
 +
.row
 +
{
 +
    display: -webkit-box;
 +
    display: -ms-flexbox;
 +
    display: flex;
 +
    -webkit-box-orient: horizontal;
 +
    -webkit-box-direction: normal;
 +
    -ms-flex-flow: row;
 +
    flex-flow: row;
 +
    -ms-flex-direction: row;
 +
    flex-direction: row;
 +
    margin-left: -12px;
 +
    margin-right: -12px
 +
}
 +
 +
@media (max-width: 600px)
 +
{
 +
    .row
 +
    {
 +
        margin-left: -8px;
 +
        margin-right: -8px
 +
    }
 +
}
 +
 +
.row.align-top
 +
{
 +
    -webkit-box-align: start;
 +
    -ms-flex-align: start;
 +
    align-items: flex-start
 +
}
 +
 +
.row.align-bottom
 +
{
 +
    -webkit-box-align: end;
 +
    -ms-flex-align: end;
 +
    align-items: flex-end
 +
}
 +
 +
.row.align-middle
 +
{
 +
    -webkit-box-align: center;
 +
    -ms-flex-align: center;
 +
    align-items: center
 +
}
 +
 +
.row.align-baseline
 +
{
 +
    -webkit-box-align: baseline;
 +
    -ms-flex-align: baseline;
 +
    align-items: baseline
 +
}
 +
 +
.row.align-stretch
 +
{
 +
    -webkit-box-align: stretch;
 +
    -ms-flex-align: stretch;
 +
    align-items: stretch
 +
}
 +
 +
.row.align-left
 +
{
 +
    -webkit-box-pack: start;
 +
    -ms-flex-pack: start;
 +
    justify-content: flex-start
 +
}
 +
 +
.row.align-right
 +
{
 +
    -webkit-box-pack: end;
 +
    -ms-flex-pack: end;
 +
    justify-content: flex-end
 +
}
 +
 +
.row.align-center
 +
{
 +
    -webkit-box-pack: center;
 +
    -ms-flex-pack: center;
 +
    justify-content: center
 +
}
 +
 +
.row.align-space-between
 +
{
 +
    -webkit-box-pack: justify;
 +
    -ms-flex-pack: justify;
 +
    justify-content: space-between
 +
}
 +
 +
.row.space-around
 +
{
 +
    -ms-flex-pack: distribute;
 +
    justify-content: space-around
 +
}
 +
 +
.row+.row
 +
{
 +
    margin-top: 24px
 +
}
 +
 +
.row [class^="col-"],.row .cols
 +
{
 +
    box-sizing: border-box;
 +
    padding-left: 12px;
 +
    padding-right: 12px
 +
}
 +
 +
@media (max-width: 600px)
 +
{
 +
    .row [class^="col-"],.row .cols
 +
    {
 +
        padding-left: 8px;
 +
        padding-right: 8px
 +
    }
 +
}
 +
 +
.row.layout-dir-column
 +
{
 +
    -webkit-box-orient: vertical;
 +
    -webkit-box-direction: normal;
 +
    -ms-flex-flow: column;
 +
    flex-flow: column;
 +
    -ms-flex-direction: column;
 +
    flex-direction: column
 +
}
 +
 +
.row.layout-dir-column [class^="col-"],.row.layout-dir-column .cols
 +
{
 +
    padding-top: 12px;
 +
    padding-bottom: 12px;
 +
    -webkit-box-flex: 0;
 +
    -ms-flex: 0 0 auto;
 +
    flex: 0 0 auto
 +
}
 +
 +
@media (max-width: 600px)
 +
{
 +
    .row.layout-dir-column [class^="col-"],.row.layout-dir-column .cols
 +
    {
 +
        padding-top: 8px;
 +
        padding-bottom: 8px
 +
    }
 +
}
 +
 +
.row.layout-dir-column [class^="col-"]:first-of-type,.row.layout-dir-column .cols:first-of-type
 +
{
 +
    padding-top: 0
 +
}
 +
 +
.row.wrap
 +
{
 +
    -ms-flex-wrap: wrap;
 +
    flex-wrap: wrap
 +
}
 +
 +
.row.wrap [class^="col-"]
 +
{
 +
    margin-bottom: 24px
 +
}
 +
 +
.row.large
 +
{
 +
    margin-left: -24px;
 +
    margin-right: -24px
 +
}
 +
 +
.row.large [class^="col-"],.row.large .cols
 +
{
 +
    padding-left: 24px;
 +
    padding-right: 24px
 +
}
 +
 +
@media (max-width: 600px)
 +
{
 +
    .row.large [class^="col-"],.row.large .cols
 +
    {
 +
        padding-left: 8px;
 +
        padding-right: 8px
 +
    }
 +
}
 +
 +
.row.large.wrap [class^="col-"]
 +
{
 +
    margin-bottom: 48px
 +
}
 +
 +
.col-1
 +
{
 +
    width: 8.3333333333%
 +
}
 +
 +
@media not all and (min-resolution: 0.001dpcm)
 +
{
 +
@    supports (-webkit-appearance: none)
 +
    {
 +
        .col-1
 +
{
 +
width: 8.2333333333%
 +
    }
 +
}
 +
}
 +
 +
.col-2
 +
{
 +
    width: 16.6666666667%
 +
}
 +
 +
@media not all and (min-resolution: 0.001dpcm)
 +
{
 +
@    supports (-webkit-appearance: none)
 +
    {
 +
        .col-2
 +
{
 +
width: 16.5666666667%
 +
    }
 +
}
 +
}
 +
 +
.col-3
 +
{
 +
    width: 25%
 +
}
 +
 +
@media not all and (min-resolution: 0.001dpcm)
 +
{
 +
@    supports (-webkit-appearance: none)
 +
    {
 +
        .col-3
 +
{
 +
width: 24.9%
 +
    }
 +
}
 +
}
 +
 +
.col-4
 +
{
 +
    width: 33.3333333333%
 +
}
 +
 +
@media not all and (min-resolution: 0.001dpcm)
 +
{
 +
@    supports (-webkit-appearance: none)
 +
    {
 +
        .col-4
 +
{
 +
width: 33.2333333333%
 +
    }
 +
}
 +
}
 +
 +
.col-5
 +
{
 +
    width: 41.6666666667%
 +
}
 +
 +
@media not all and (min-resolution: 0.001dpcm)
 +
{
 +
@    supports (-webkit-appearance: none)
 +
    {
 +
        .col-5
 +
{
 +
width: 41.5666666667%
 +
    }
 +
}
 +
}
 +
 +
.col-6
 +
{
 +
    width: 50%
 +
}
 +
 +
@media not all and (min-resolution: 0.001dpcm)
 +
{
 +
@    supports (-webkit-appearance: none)
 +
    {
 +
        .col-6
 +
{
 +
width: 49.9%
 +
    }
 +
}
 +
}
 +
 +
.col-7
 +
{
 +
    width: 58.3333333333%
 +
}
 +
 +
@media not all and (min-resolution: 0.001dpcm)
 +
{
 +
@    supports (-webkit-appearance: none)
 +
    {
 +
        .col-7
 +
{
 +
width: 58.2333333333%
 +
    }
 +
}
 +
}
 +
 +
.col-8
 +
{
 +
    width: 66.6666666667%
 +
}
 +
 +
@media not all and (min-resolution: 0.001dpcm)
 +
{
 +
@    supports (-webkit-appearance: none)
 +
    {
 +
        .col-8
 +
{
 +
width: 66.5666666667%
 +
    }
 +
}
 +
}
 +
 +
.col-9
 +
{
 +
    width: 75%
 +
}
 +
 +
@media not all and (min-resolution: 0.001dpcm)
 +
{
 +
@    supports (-webkit-appearance: none)
 +
    {
 +
        .col-9
 +
{
 +
width: 74.9%
 +
    }
 +
}
 +
}
 +
 +
.col-10
 +
{
 +
    width: 83.3333333333%
 +
}
 +
 +
@media not all and (min-resolution: 0.001dpcm)
 +
{
 +
@    supports (-webkit-appearance: none)
 +
    {
 +
        .col-10
 +
{
 +
width: 83.2333333333%
 +
    }
 +
}
 +
}
 +
 +
.col-11
 +
{
 +
    width: 91.6666666667%
 +
}
 +
 +
@media not all and (min-resolution: 0.001dpcm)
 +
{
 +
@    supports (-webkit-appearance: none)
 +
    {
 +
        .col-11
 +
{
 +
width: 91.5666666667%
 +
    }
 +
}
 +
}
 +
 +
.col-12
 +
{
 +
    width: 100%
 +
}
 +
 +
@media not all and (min-resolution: 0.001dpcm)
 +
{
 +
@    supports (-webkit-appearance: none)
 +
    {
 +
        .col-12
 +
{
 +
width: 99.9%
 +
    }
 +
}
 +
}
 +
 +
#site-navigation
 +
{
 +
    position: fixed;
 +
    top: 50%;
 +
    left: 2rem
 +
}
 +
 +
@media (min-width: 1025px)
 +
{
 +
    #site-navigation
 +
    {
 +
        -webkit-transform-origin: top left;
 +
        transform-origin: top left;
 +
        -webkit-transform: rotate(-90deg) translateX(-50%);
 +
        transform: rotate(-90deg) translateX(-50%);
 +
        z-index: 50
 +
    }
 +
}
 +
 +
@media (max-width: 1024px)
 +
{
 +
    #site-navigation
 +
    {
 +
        top: 0px;
 +
        left: 0px;
 +
        width: 100vw;
 +
        height: 100vh;
 +
        background-color: #004a7c;
 +
        z-index: 50;
 +
        padding-top: 120px;
 +
        transition: all 0.25s ease-in-out;
 +
        display: none
 +
    }
 +
}
 +
 +
@media (max-width: 1024px)
 +
{
 +
    #site-navigation ul
 +
    {
 +
        list-style: none;
 +
        margin-left: 0;
 +
        margin-bottom: 30px;
 +
        width: 480px;
 +
        margin: 0 auto
 +
    }
 +
}
 +
 +
@media (max-width: 600px)
 +
{
 +
    #site-navigation ul
 +
    {
 +
        width: 135px;
 +
        margin: 0 auto
 +
    }
 +
}
 +
 +
@media (min-width: 1025px)
 +
{
 +
    #site-navigation ul li
 +
    {
 +
        display: inline-block
 +
    }
 +
}
 +
 +
#site-navigation ul li a
 +
{
 +
    font-family: "sofia-pro",sans-serif;
 +
    font-size: 10px;
 +
    font-weight: 600;
 +
    line-height: 1em;
 +
    letter-spacing: 0.1em;
 +
    text-transform: uppercase;
 +
    color: rgba(0,0,0,0.54);
 +
    padding: 0 8px
 +
}
 +
 +
#site-navigation ul li a.small
 +
{
 +
    font-size: 13px
 +
}
 +
 +
@media (max-width: 1024px)
 +
{
 +
    #site-navigation ul li a
 +
    {
 +
        color: #ffffff;
 +
        font-size: 32px;
 +
        line-height: 2
 +
    }
 +
}
 +
 +
@media (max-width: 480px)
 +
{
 +
    #site-navigation ul li a
 +
    {
 +
        font-size: 22px
 +
    }
 +
}
 +
 +
#site-navigation ul li a:hover,#site-navigation ul li a:focus
 +
{
 +
    color: rgba(0,0,0,0.87)
 +
}
 +
 +
@media (max-width: 1024px)
 +
{
 +
    #site-navigation ul li a:hover,#site-navigation ul li a:focus
 +
    {
 +
        color: #39898D;
 +
        -webkit-animation: all 300ms ease-in-out;
 +
        animation: all 300ms ease-in-out
 +
    }
 +
}
 +
 +
#site-navigation ul li.active a
 +
{
 +
    color: #39898D;
 +
    position: relative
 +
}
 +
 +
#site-navigation ul li.active a:after
 +
{
 +
    position: absolute;
 +
    top: 50%;
 +
    right: 6px;
 +
    bottom: 50%;
 +
    left: 6px;
 +
    content: "";
 +
    border-bottom: 1px solid #39898D
 +
}
 +
 +
.page-border
 +
{
 +
    position: fixed;
 +
    top: 0;
 +
    right: 0;
 +
    bottom: 0;
 +
    left: 0;
 +
    width: 100vw;
 +
    height: 100vh;
 +
    border: 8px solid #004a7c;
 +
    z-index: 9
 +
}
 +
 +
.page-container
 +
{
 +
    position: absolute;
 +
    top: 0;
 +
    right: 0;
 +
    bottom: 0;
 +
    left: 0;
 +
    overflow-y: scroll
 +
}
 +
 +
#site-header
 +
{
 +
    position: fixed;
 +
    z-index: 50;
 +
    top: 2rem;
 +
    right: 2rem;
 +
    left: 2rem
 +
}
 +
 +
#site-header #logo
 +
{
 +
    margin-top: 6px
 +
}
 +
 +
#site-header #back a
 +
{
 +
    display: -webkit-box;
 +
    display: -ms-flexbox;
 +
    display: flex;
 +
    -webkit-box-orient: horizontal;
 +
    -webkit-box-direction: normal;
 +
    -ms-flex-flow: row;
 +
    flex-flow: row;
 +
    -webkit-box-align: center;
 +
    -ms-flex-align: center;
 +
    align-items: center;
 +
    font-family: "sofia-pro",sans-serif;
 +
    font-size: 12px;
 +
    font-weight: 600;
 +
    line-height: 1em;
 +
    text-transform: uppercase;
 +
    letter-spacing: 2px;
 +
    margin: 0
 +
}
 +
 +
#site-header #back a .hint
 +
{
 +
    font-size: 10px;
 +
    font-weight: 300;
 +
    letter-spacing: 6.4px
 +
}
 +
 +
#site-header #back a .arrow,#site-header #back a .arrow:before,#site-header #back a .arrow:after
 +
{
 +
    cursor: pointer;
 +
    height: 1px;
 +
    width: 18px;
 +
    display: block;
 +
    content: '';
 +
    transition: all 0.25s ease-in-out;
 +
    margin-right: 8px;
 +
    background-color: rgba(0,0,0,0.87)
 +
}
 +
 +
@media (max-width: 600px)
 +
{
 +
    #site-header #back a .arrow,#site-header #back a .arrow:before,#site-header #back a .arrow:after
 +
    {
 +
        width: 21px;
 +
        height: 2px
 +
    }
 +
}
 +
 +
#site-header #back a .arrow
 +
{
 +
    background: transparent;
 +
    position: relative
 +
}
 +
 +
#site-header #back a .arrow:before
 +
{
 +
    -webkit-transform: rotate(45deg);
 +
    transform: rotate(45deg);
 +
    position: absolute
 +
}
 +
 +
#site-header #back a .arrow:after
 +
{
 +
    -webkit-transform: rotate(-45deg);
 +
    transform: rotate(-45deg);
 +
    position: absolute
 +
}
 +
 +
#site-header #back a:hover .arrow:before,#site-header #back a:hover .arrow:after
 +
{
 +
    background-color: #004a7c
 +
}
 +
 +
@media (max-width: 1024px)
 +
{
 +
    #site-header #language-switch
 +
    {
 +
        display: none
 +
    }
 +
 +
    #site-header #nav-toggle
 +
    {
 +
        position: absolute;
 +
        top: 0;
 +
        right: 0;
 +
        cursor: pointer;
 +
        padding: 10px 22px 10px 0px
 +
    }
 +
 +
    #site-header #nav-toggle #menu-icon,#site-header #nav-toggle #menu-icon:before,#site-header #nav-toggle #menu-icon:after
 +
    {
 +
        cursor: pointer;
 +
        height: 2px;
 +
        width: 22px;
 +
        background: #000;
 +
        position: absolute;
 +
        display: block;
 +
        content: '';
 +
        z-index: 50;
 +
        transition: all 0.25s ease-in-out
 +
    }
 +
 +
    #site-header #nav-toggle #menu-icon:before
 +
    {
 +
        top: -7px
 +
    }
 +
 +
    #site-header #nav-toggle #menu-icon:after
 +
    {
 +
        bottom: -7px
 +
    }
 +
 +
    #site-header #nav-toggle #menu-icon.active
 +
    {
 +
        background: transparent
 +
    }
 +
 +
    #site-header #nav-toggle #menu-icon.active:before
 +
    {
 +
        -webkit-transform: rotate(45deg);
 +
        transform: rotate(45deg);
 +
        background-color: #ffffff;
 +
        top: 0
 +
    }
 +
 +
    #site-header #nav-toggle #menu-icon.active:after
 +
    {
 +
        -webkit-transform: rotate(-45deg);
 +
        transform: rotate(-45deg);
 +
        background-color: #ffffff;
 +
        bottom: 0
 +
    }
 +
}
 +
 +
@media (max-width: 600px)
 +
{
 +
    #site-header #nav-toggle
 +
    {
 +
        top: 24px;
 +
        right: 24px
 +
    }
 +
 +
    #site-header #back
 +
    {
 +
        position: absolute;
 +
        right: 8px;
 +
        top: 20px
 +
    }
 +
 +
    #site-header #back .prev-page
 +
    {
 +
        display: none
 +
    }
 +
}
 +
 +
#main-content
 +
{
 +
    width: calc(100vw - 16px);
 +
    display: -webkit-box;
 +
    display: -ms-flexbox;
 +
    display: flex;
 +
    -webkit-box-align: center;
 +
    -ms-flex-align: center;
 +
    align-items: center;
 +
    -webkit-box-pack: center;
 +
    -ms-flex-pack: center;
 +
    justify-content: center;
 +
    -webkit-box-orient: horizontal;
 +
    -webkit-box-direction: normal;
 +
    -ms-flex-flow: row;
 +
    flex-flow: row
 +
}
 +
 +
@media (max-width: 600px)
 +
{
 +
    #main-content
 +
    {
 +
        overflow-x: hidden
 +
    }
 +
}
 +
 +
#main-content article
 +
{
 +
    display: -webkit-box;
 +
    display: -ms-flexbox;
 +
    display: flex
 +
}
 +
 +
.layout--work #main-content
 +
{
 +
    position: relative;
 +
    height: auto
 +
}
 +
 +
@media (min-width: 601px)
 +
{
 +
    .layout--page #main-content,.layout--default #main-content
 +
    {
 +
        height: calc(100vh - 16px)
 +
    }
 +
}
 +
 +
#site-footer
 +
{
 +
    z-index: 50;
 +
    font-family: "sofia-pro",sans-serif;
 +
    font-size: 12px;
 +
    color: rgba(0,0,0,0.38)
 +
}
 +
 +
@media (min-width: 601px)
 +
{
 +
    #site-footer
 +
    {
 +
        position: absolute;
 +
        top: auto;
 +
        right: 2rem;
 +
        bottom: 1rem;
 +
        left: 2rem
 +
    }
 +
}
 +
 +
@media (max-width: 600px)
 +
{
 +
    #site-footer
 +
    {
 +
        text-align: center;
 +
        display: -webkit-box;
 +
        display: -ms-flexbox;
 +
        display: flex;
 +
        -webkit-box-orient: vertical;
 +
        -webkit-box-direction: normal;
 +
        -ms-flex-flow: column;
 +
        flex-flow: column;
 +
        -webkit-box-align: center;
 +
        -ms-flex-align: center;
 +
        align-items: center
 +
    }
 +
}
 +
 +
#site-footer #social-links a
 +
{
 +
    color: rgba(0,0,0,0.38);
 +
    padding-right: 8px
 +
}
 +
 +
#site-footer #social-links a:hover,#site-footer #social-links a:focus
 +
{
 +
    color: rgba(0,0,0,0.54)
 +
}
 +
 +
#site-footer #social-links a:not(:first-child):before
 +
{
 +
    content: "\2022";
 +
    margin-right: 8px
 +
}
 +
 +
@media (max-width: 600px)
 +
{
 +
    .layout--page:not(.page--works) #site-header
 +
    {
 +
        top: 8px;
 +
        right: 8px;
 +
        left: 8px;
 +
        padding: 16px
 +
    }
 +
 +
    .layout--page:not(.page--works) #site-header:not(.modal)
 +
    {
 +
        background-color: #f2f2f2
 +
    }
 +
 +
    .layout--page:not(.page--works) #main-content
 +
    {
 +
        -webkit-box-orient: vertical;
 +
        -webkit-box-direction: normal;
 +
        -ms-flex-flow: column;
 +
        flex-flow: column;
 +
        padding-top: 64px
 +
    }
 +
 +
    .layout--page:not(.page--works) #site-footer
 +
    {
 +
        margin: 2rem auto
 +
    }
 +
 +
    .layout--page:not(.page--works).page--about article
 +
    {
 +
        margin-right: 2rem;
 +
        height: calc(100vh - 12rem);
 +
        -webkit-box-align: center;
 +
        -ms-flex-align: center;
 +
        align-items: center
 +
    }
 +
}
 +
 +
@media (max-width: 600px)
 +
{
 +
    .layout--work #site-header
 +
    {
 +
        top: 8px;
 +
        right: 8px;
 +
        left: 8px;
 +
        padding: 16px
 +
    }
 +
}
 +
 +
.page--works #main-content,.page--home #main-content
 +
{
 +
    height: calc(100vh - 16px)
 +
}
 +
 +
@media (max-width: 600px)
 +
{
 +
    .page--works #site-header,.page--home #site-header
 +
    {
 +
        top: 8px !important;
 +
        right: 8px !important;
 +
        left: 8px !important;
 +
        padding: 16px !important
 +
    }
 +
 +
    .page--works #site-footer,.page--home #site-footer
 +
    {
 +
        position: absolute;
 +
        top: auto;
 +
        right: 0;
 +
        bottom: 1rem;
 +
        left: 0
 +
    }
 +
}
 +
 +
.layout-space-1
 +
{
 +
    height: 1rem
 +
}
 +
 +
.layout-space-2
 +
{
 +
    height: 2rem
 +
}
 +
 +
.layout-space-3
 +
{
 +
    height: 3rem
 +
}
 +
 +
.layout-space-4
 +
{
 +
    height: 4rem
 +
}
 +
 +
.layout-space-5
 +
{
 +
    height: 5rem
 +
}
 +
 +
.layout-space-6
 +
{
 +
    height: 6rem
 +
}
 +
 +
nav.page-navi a
 +
{
 +
    position: absolute;
 +
    top: 50%;
 +
    -webkit-transform: translateY(-50%);
 +
    transform: translateY(-50%);
 +
    right: 40px;
 +
    z-index: 50;
 +
    font-family: "sofia-pro",sans-serif;
 +
    font-size: 12px;
 +
    font-weight: 600;
 +
    line-height: 1em;
 +
    text-transform: uppercase;
 +
    letter-spacing: 2px;
 +
    margin: 0;
 +
    display: -webkit-box;
 +
    display: -ms-flexbox;
 +
    display: flex;
 +
    -webkit-box-align: center;
 +
    -ms-flex-align: center;
 +
    align-items: center
 +
}
 +
 +
nav.page-navi a .hint
 +
{
 +
    font-size: 10px;
 +
    font-weight: 300;
 +
    letter-spacing: 6.4px
 +
}
 +
 +
nav.page-navi a .arrow
 +
{
 +
    display: inline-block;
 +
    width: 80px;
 +
    height: 1px;
 +
    background: rgba(0,0,0,0.87);
 +
    position: relative;
 +
    vertical-align: middle;
 +
    margin-left: 8px
 +
}
 +
 +
nav.page-navi a .arrow:after,nav.page-navi a .arrow:before
 +
{
 +
    content: "";
 +
    position: absolute;
 +
    top: 0;
 +
    right: 0;
 +
    width: 8px;
 +
    height: 1px;
 +
    background: rgba(0,0,0,0.87);
 +
    -webkit-transform-origin: top right;
 +
    transform-origin: top right
 +
}
 +
 +
nav.page-navi a .arrow:before
 +
{
 +
    -webkit-transform: rotate(40deg);
 +
    transform: rotate(40deg)
 +
}
 +
 +
nav.page-navi a .arrow:after
 +
{
 +
    -webkit-transform: rotate(-40deg);
 +
    transform: rotate(-40deg)
 +
}
 +
 +
nav.page-navi a:hover .next-page,nav.page-navi a:focus .next-page
 +
{
 +
    -webkit-transform: translateX(100%);
 +
    transform: translateX(100%);
 +
    transition: -webkit-transform 0.3s;
 +
    transition: transform 0.3s;
 +
    transition: transform 0.3s, -webkit-transform 0.3s;
 +
    padding-left: 8px
 +
}
 +
 +
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
 +
{
 +
    nav.page-navi a:hover .next-page,nav.page-navi a:focus .next-page
 +
    {
 +
        -webkit-transform: translateX(110%);
 +
        transform: translateX(110%);
 +
        transition: none;
 +
        padding-left: 0
 +
    }
 +
}
 +
 +
nav.page-navi a:hover .arrow,nav.page-navi a:focus .arrow
 +
{
 +
    transition-delay: 0.1s;
 +
    -webkit-transform: translateX(-100%);
 +
    transform: translateX(-100%);
 +
    transition: -webkit-transform 0.3s;
 +
    transition: transform 0.3s;
 +
    transition: transform 0.3s, -webkit-transform 0.3s;
 +
    margin-left: 0
 +
}
 +
 +
nav.page-navi a:hover .arrow,nav.page-navi a:hover .arrow:before,nav.page-navi a:hover .arrow:after,nav.page-navi a:focus .arrow,nav.page-navi a:focus .arrow:before,nav.page-navi a:focus .arrow:after
 +
{
 +
    background-color: #004a7c
 +
}
 +
 +
@media (max-width: 1024px)
 +
{
 +
    .page-navi
 +
    {
 +
        display: none
 +
    }
 +
}
 +
 +
.gear-canvas--wrapper
 +
{
 +
    width: 850px;
 +
    height: 600px;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
    position: relative
 +
}
 +
 +
.gear-canvas .gear.normal
 +
{
 +
    position: absolute;
 +
    height: 80px;
 +
    width: 80px;
 +
    border-radius: 40px
 +
}
 +
 +
.gear-canvas .gear.normal .gear-inner
 +
{
 +
    position: relative;
 +
    height: 100%;
 +
    width: 100%;
 +
    background: #B5B5B5;
 +
    border-radius: 50%;
 +
    border: 1px solid white(0.1)
 +
}
 +
 +
.gear-canvas .gear.normal .gear-inner .bar
 +
{
 +
    background: #B5B5B5;
 +
    height: 12px;
 +
    width: 96px;
 +
    position: absolute;
 +
    left: 50%;
 +
    margin-left: -48px;
 +
    top: 50%;
 +
    margin-top: -6px;
 +
    border-radius: 2px;
 +
    border-left: 1px solid white(0.1);
 +
    border-right: 1px solid white(0.1)
 +
}
 +
 +
.gear-canvas .gear.normal .gear-inner .bar:nth-child(2)
 +
{
 +
    -webkit-transform: rotate(60deg);
 +
    transform: rotate(60deg)
 +
}
 +
 +
.gear-canvas .gear.normal .gear-inner .bar:nth-child(3)
 +
{
 +
    -webkit-transform: rotate(120deg);
 +
    transform: rotate(120deg)
 +
}
 +
 +
.gear-canvas .gear.normal .gear-inner .bar:nth-child(4)
 +
{
 +
    -webkit-transform: rotate(90deg);
 +
    transform: rotate(90deg)
 +
}
 +
 +
.gear-canvas .gear.normal .gear-inner .bar:nth-child(5)
 +
{
 +
    -webkit-transform: rotate(30deg);
 +
    transform: rotate(30deg)
 +
}
 +
 +
.gear-canvas .gear.normal .gear-inner .bar:nth-child(6)
 +
{
 +
    -webkit-transform: rotate(150deg);
 +
    transform: rotate(150deg)
 +
}
 +
 +
.gear-canvas .gear.normal .gear-inner .bar:nth-child(7)
 +
{
 +
    -webkit-transform: rotate(45deg);
 +
    transform: rotate(45deg)
 +
}
 +
 +
.gear-canvas .gear.normal .gear-inner .bar:nth-child(8)
 +
{
 +
    -webkit-transform: rotate(135deg);
 +
    transform: rotate(135deg)
 +
}
 +
 +
.gear-canvas .gear.normal .gear-inner .bar:nth-child(9)
 +
{
 +
    -webkit-transform: rotate(105deg);
 +
    transform: rotate(105deg)
 +
}
 +
 +
.gear-canvas .gear.normal .gear-inner .bar:nth-child(10)
 +
{
 +
    -webkit-transform: rotate(15deg);
 +
    transform: rotate(15deg)
 +
}
 +
 +
.gear-canvas .gear.normal .gear-inner .bar:nth-child(11)
 +
{
 +
    -webkit-transform: rotate(165deg);
 +
    transform: rotate(165deg)
 +
}
 +
 +
.gear-canvas .gear.normal .gear-inner .bar:nth-child(12)
 +
{
 +
    -webkit-transform: rotate(75deg);
 +
    transform: rotate(75deg)
 +
}
 +
 +
.gear-canvas .gear.normal .gear-text
 +
{
 +
    position: absolute;
 +
    top: 0;
 +
    right: 0;
 +
    bottom: 0;
 +
    left: 0;
 +
    text-align: center;
 +
    z-index: 999;
 +
    padding-left: 16px;
 +
    padding-right: 16px
 +
}
 +
 +
.gear-canvas .gear.normal .gear-text h6
 +
{
 +
    font-weight: 500;
 +
    line-height: 80px
 +
}
 +
 +
.gear-canvas .gear.normal:after
 +
{
 +
    content: "";
 +
    position: absolute;
 +
    height: 64px;
 +
    width: 64px;
 +
    border-radius: 50%;
 +
    background-color: #f2f2f2;
 +
    top: 50%;
 +
    left: 50%;
 +
    margin-left: -32px;
 +
    margin-top: -32px;
 +
    z-index: 3
 +
}
 +
 +
.gear-canvas .gear.x-large
 +
{
 +
    position: absolute;
 +
    height: 296px;
 +
    width: 296px;
 +
    border-radius: 148px
 +
}
 +
 +
.gear-canvas .gear.x-large .gear-inner
 +
{
 +
    position: relative;
 +
    height: 100%;
 +
    width: 100%;
 +
    background: #979797;
 +
    border-radius: 50%;
 +
    border: 1px solid white(0.1)
 +
}
 +
 +
.gear-canvas .gear.x-large .gear-inner .bar
 +
{
 +
    background: #979797;
 +
    height: 20px;
 +
    width: 332px;
 +
    position: absolute;
 +
    left: 50%;
 +
    margin-left: -166px;
 +
    top: 50%;
 +
    margin-top: -10px;
 +
    border-radius: 2px;
 +
    border-left: 1px solid white(0.1);
 +
    border-right: 1px solid white(0.1)
 +
}
 +
 +
.gear-canvas .gear.x-large .gear-inner .bar:nth-child(2)
 +
{
 +
    -webkit-transform: rotate(60deg);
 +
    transform: rotate(60deg)
 +
}
 +
 +
.gear-canvas .gear.x-large .gear-inner .bar:nth-child(3)
 +
{
 +
    -webkit-transform: rotate(120deg);
 +
    transform: rotate(120deg)
 +
}
 +
 +
.gear-canvas .gear.x-large .gear-inner .bar:nth-child(4)
 +
{
 +
    -webkit-transform: rotate(90deg);
 +
    transform: rotate(90deg)
 +
}
 +
 +
.gear-canvas .gear.x-large .gear-inner .bar:nth-child(5)
 +
{
 +
    -webkit-transform: rotate(30deg);
 +
    transform: rotate(30deg)
 +
}
 +
 +
.gear-canvas .gear.x-large .gear-inner .bar:nth-child(6)
 +
{
 +
    -webkit-transform: rotate(150deg);
 +
    transform: rotate(150deg)
 +
}
 +
 +
.gear-canvas .gear.x-large .gear-inner .bar:nth-child(7)
 +
{
 +
    -webkit-transform: rotate(45deg);
 +
    transform: rotate(45deg)
 +
}
 +
 +
.gear-canvas .gear.x-large .gear-inner .bar:nth-child(8)
 +
{
 +
    -webkit-transform: rotate(135deg);
 +
    transform: rotate(135deg)
 +
}
 +
 +
.gear-canvas .gear.x-large .gear-inner .bar:nth-child(9)
 +
{
 +
    -webkit-transform: rotate(105deg);
 +
    transform: rotate(105deg)
 +
}
 +
 +
.gear-canvas .gear.x-large .gear-inner .bar:nth-child(10)
 +
{
 +
    -webkit-transform: rotate(15deg);
 +
    transform: rotate(15deg)
 +
}
 +
 +
.gear-canvas .gear.x-large .gear-inner .bar:nth-child(11)
 +
{
 +
    -webkit-transform: rotate(165deg);
 +
    transform: rotate(165deg)
 +
}
 +
 +
.gear-canvas .gear.x-large .gear-inner .bar:nth-child(12)
 +
{
 +
    -webkit-transform: rotate(75deg);
 +
    transform: rotate(75deg)
 +
}
 +
 +
.gear-canvas .gear.x-large .gear-text
 +
{
 +
    position: absolute;
 +
    top: 0;
 +
    right: 0;
 +
    bottom: 0;
 +
    left: 0;
 +
    text-align: center;
 +
    z-index: 999;
 +
    padding-left: 36px;
 +
    padding-right: 36px
 +
}
 +
 +
.gear-canvas .gear.x-large .gear-text h6
 +
{
 +
    font-weight: 500;
 +
    line-height: 296px
 +
}
 +
 +
.gear-canvas .gear.x-large:after
 +
{
 +
    content: "";
 +
    position: absolute;
 +
    height: 260px;
 +
    width: 260px;
 +
    border-radius: 50%;
 +
    background-color: #f2f2f2;
 +
    top: 50%;
 +
    left: 50%;
 +
    margin-left: -130px;
 +
    margin-top: -130px;
 +
    z-index: 3
 +
}
 +
 +
.gear-canvas .gear.large
 +
{
 +
    position: absolute;
 +
    height: 135px;
 +
    width: 135px;
 +
    border-radius: 67.5px
 +
}
 +
 +
.gear-canvas .gear.large .gear-inner
 +
{
 +
    position: relative;
 +
    height: 100%;
 +
    width: 100%;
 +
    background: #004a7c;
 +
    border-radius: 50%;
 +
    border: 1px solid white(0.1)
 +
}
 +
 +
.gear-canvas .gear.large .gear-inner .bar
 +
{
 +
    background: #004a7c;
 +
    height: 16px;
 +
    width: 159px;
 +
    position: absolute;
 +
    left: 50%;
 +
    margin-left: -79.5px;
 +
    top: 50%;
 +
    margin-top: -8px;
 +
    border-radius: 2px;
 +
    border-left: 1px solid white(0.1);
 +
    border-right: 1px solid white(0.1)
 +
}
 +
 +
.gear-canvas .gear.large .gear-inner .bar:nth-child(2)
 +
{
 +
    -webkit-transform: rotate(60deg);
 +
    transform: rotate(60deg)
 +
}
 +
 +
.gear-canvas .gear.large .gear-inner .bar:nth-child(3)
 +
{
 +
    -webkit-transform: rotate(120deg);
 +
    transform: rotate(120deg)
 +
}
 +
 +
.gear-canvas .gear.large .gear-inner .bar:nth-child(4)
 +
{
 +
    -webkit-transform: rotate(90deg);
 +
    transform: rotate(90deg)
 +
}
 +
 +
.gear-canvas .gear.large .gear-inner .bar:nth-child(5)
 +
{
 +
    -webkit-transform: rotate(30deg);
 +
    transform: rotate(30deg)
 +
}
 +
 +
.gear-canvas .gear.large .gear-inner .bar:nth-child(6)
 +
{
 +
    -webkit-transform: rotate(150deg);
 +
    transform: rotate(150deg)
 +
}
 +
 +
.gear-canvas .gear.large .gear-inner .bar:nth-child(7)
 +
{
 +
    -webkit-transform: rotate(45deg);
 +
    transform: rotate(45deg)
 +
}
 +
 +
.gear-canvas .gear.large .gear-inner .bar:nth-child(8)
 +
{
 +
    -webkit-transform: rotate(135deg);
 +
    transform: rotate(135deg)
 +
}
 +
 +
.gear-canvas .gear.large .gear-inner .bar:nth-child(9)
 +
{
 +
    -webkit-transform: rotate(105deg);
 +
    transform: rotate(105deg)
 +
}
 +
 +
.gear-canvas .gear.large .gear-inner .bar:nth-child(10)
 +
{
 +
    -webkit-transform: rotate(15deg);
 +
    transform: rotate(15deg)
 +
}
 +
 +
.gear-canvas .gear.large .gear-inner .bar:nth-child(11)
 +
{
 +
    -webkit-transform: rotate(165deg);
 +
    transform: rotate(165deg)
 +
}
 +
 +
.gear-canvas .gear.large .gear-inner .bar:nth-child(12)
 +
{
 +
    -webkit-transform: rotate(75deg);
 +
    transform: rotate(75deg)
 +
}
 +
 +
.gear-canvas .gear.large .gear-text
 +
{
 +
    position: absolute;
 +
    top: 0;
 +
    right: 0;
 +
    bottom: 0;
 +
    left: 0;
 +
    text-align: center;
 +
    z-index: 999;
 +
    padding-left: 35px;
 +
    padding-right: 35px
 +
}
 +
 +
.gear-canvas .gear.large .gear-text h6
 +
{
 +
    font-weight: 500;
 +
    line-height: 135px
 +
}
 +
 +
.gear-canvas .gear.large:after
 +
{
 +
    content: "";
 +
    position: absolute;
 +
    height: 100px;
 +
    width: 100px;
 +
    border-radius: 50%;
 +
    background-color: #f2f2f2;
 +
    top: 50%;
 +
    left: 50%;
 +
    margin-left: -50px;
 +
    margin-top: -50px;
 +
    z-index: 3
 +
}
 +
 +
.gear-canvas .gear.middle
 +
{
 +
    position: absolute;
 +
    height: 100px;
 +
    width: 100px;
 +
    border-radius: 50px
 +
}
 +
 +
.gear-canvas .gear.middle .gear-inner
 +
{
 +
    position: relative;
 +
    height: 100%;
 +
    width: 100%;
 +
    background: #4a4a4a;
 +
    border-radius: 50%;
 +
    border: 1px solid white(0.1)
 +
}
 +
 +
.gear-canvas .gear.middle .gear-inner .bar
 +
{
 +
    background: #4a4a4a;
 +
    height: 12px;
 +
    width: 116px;
 +
    position: absolute;
 +
    left: 50%;
 +
    margin-left: -58px;
 +
    top: 50%;
 +
    margin-top: -6px;
 +
    border-radius: 2px;
 +
    border-left: 1px solid white(0.1);
 +
    border-right: 1px solid white(0.1)
 +
}
 +
 +
.gear-canvas .gear.middle .gear-inner .bar:nth-child(2)
 +
{
 +
    -webkit-transform: rotate(60deg);
 +
    transform: rotate(60deg)
 +
}
 +
 +
.gear-canvas .gear.middle .gear-inner .bar:nth-child(3)
 +
{
 +
    -webkit-transform: rotate(120deg);
 +
    transform: rotate(120deg)
 +
}
 +
 +
.gear-canvas .gear.middle .gear-inner .bar:nth-child(4)
 +
{
 +
    -webkit-transform: rotate(90deg);
 +
    transform: rotate(90deg)
 +
}
 +
 +
.gear-canvas .gear.middle .gear-inner .bar:nth-child(5)
 +
{
 +
    -webkit-transform: rotate(30deg);
 +
    transform: rotate(30deg)
 +
}
 +
 +
.gear-canvas .gear.middle .gear-inner .bar:nth-child(6)
 +
{
 +
    -webkit-transform: rotate(150deg);
 +
    transform: rotate(150deg)
 +
}
 +
 +
.gear-canvas .gear.middle .gear-inner .bar:nth-child(7)
 +
{
 +
    -webkit-transform: rotate(45deg);
 +
    transform: rotate(45deg)
 +
}
 +
 +
.gear-canvas .gear.middle .gear-inner .bar:nth-child(8)
 +
{
 +
    -webkit-transform: rotate(135deg);
 +
    transform: rotate(135deg)
 +
}
 +
 +
.gear-canvas .gear.middle .gear-inner .bar:nth-child(9)
 +
{
 +
    -webkit-transform: rotate(105deg);
 +
    transform: rotate(105deg)
 +
}
 +
 +
.gear-canvas .gear.middle .gear-inner .bar:nth-child(10)
 +
{
 +
    -webkit-transform: rotate(15deg);
 +
    transform: rotate(15deg)
 +
}
 +
 +
.gear-canvas .gear.middle .gear-inner .bar:nth-child(11)
 +
{
 +
    -webkit-transform: rotate(165deg);
 +
    transform: rotate(165deg)
 +
}
 +
 +
.gear-canvas .gear.middle .gear-inner .bar:nth-child(12)
 +
{
 +
    -webkit-transform: rotate(75deg);
 +
    transform: rotate(75deg)
 +
}
 +
 +
.gear-canvas .gear.middle .gear-text
 +
{
 +
    position: absolute;
 +
    top: 0;
 +
    right: 0;
 +
    bottom: 0;
 +
    left: 0;
 +
    text-align: center;
 +
    z-index: 999;
 +
    padding-left: 24px;
 +
    padding-right: 24px
 +
}
 +
 +
.gear-canvas .gear.middle .gear-text h6
 +
{
 +
    font-weight: 500;
 +
    line-height: 100px
 +
}
 +
 +
.gear-canvas .gear.middle:after
 +
{
 +
    content: "";
 +
    position: absolute;
 +
    height: 76px;
 +
    width: 76px;
 +
    border-radius: 50%;
 +
    background-color: #f2f2f2;
 +
    top: 50%;
 +
    left: 50%;
 +
    margin-left: -38px;
 +
    margin-top: -38px;
 +
    z-index: 3
 +
}
 +
 +
.gear-canvas .gear.small
 +
{
 +
    position: absolute;
 +
    height: 60px;
 +
    width: 60px;
 +
    border-radius: 30px
 +
}
 +
 +
.gear-canvas .gear.small .gear-inner
 +
{
 +
    position: relative;
 +
    height: 100%;
 +
    width: 100%;
 +
    background: #D8D8D8;
 +
    border-radius: 50%;
 +
    border: 1px solid white(0.1)
 +
}
 +
 +
.gear-canvas .gear.small .gear-inner .bar
 +
{
 +
    background: #D8D8D8;
 +
    height: 10px;
 +
    width: 72px;
 +
    position: absolute;
 +
    left: 50%;
 +
    margin-left: -36px;
 +
    top: 50%;
 +
    margin-top: -5px;
 +
    border-radius: 2px;
 +
    border-left: 1px solid white(0.1);
 +
    border-right: 1px solid white(0.1)
 +
}
 +
 +
.gear-canvas .gear.small .gear-inner .bar:nth-child(2)
 +
{
 +
    -webkit-transform: rotate(60deg);
 +
    transform: rotate(60deg)
 +
}
 +
 +
.gear-canvas .gear.small .gear-inner .bar:nth-child(3)
 +
{
 +
    -webkit-transform: rotate(120deg);
 +
    transform: rotate(120deg)
 +
}
 +
 +
.gear-canvas .gear.small .gear-inner .bar:nth-child(4)
 +
{
 +
    -webkit-transform: rotate(90deg);
 +
    transform: rotate(90deg)
 +
}
 +
 +
.gear-canvas .gear.small .gear-inner .bar:nth-child(5)
 +
{
 +
    -webkit-transform: rotate(30deg);
 +
    transform: rotate(30deg)
 +
}
 +
 +
.gear-canvas .gear.small .gear-inner .bar:nth-child(6)
 +
{
 +
    -webkit-transform: rotate(150deg);
 +
    transform: rotate(150deg)
 +
}
 +
 +
.gear-canvas .gear.small .gear-inner .bar:nth-child(7)
 +
{
 +
    -webkit-transform: rotate(45deg);
 +
    transform: rotate(45deg)
 +
}
 +
 +
.gear-canvas .gear.small .gear-inner .bar:nth-child(8)
 +
{
 +
    -webkit-transform: rotate(135deg);
 +
    transform: rotate(135deg)
 +
}
 +
 +
.gear-canvas .gear.small .gear-inner .bar:nth-child(9)
 +
{
 +
    -webkit-transform: rotate(105deg);
 +
    transform: rotate(105deg)
 +
}
 +
 +
.gear-canvas .gear.small .gear-inner .bar:nth-child(10)
 +
{
 +
    -webkit-transform: rotate(15deg);
 +
    transform: rotate(15deg)
 +
}
 +
 +
.gear-canvas .gear.small .gear-inner .bar:nth-child(11)
 +
{
 +
    -webkit-transform: rotate(165deg);
 +
    transform: rotate(165deg)
 +
}
 +
 +
.gear-canvas .gear.small .gear-inner .bar:nth-child(12)
 +
{
 +
    -webkit-transform: rotate(75deg);
 +
    transform: rotate(75deg)
 +
}
 +
 +
.gear-canvas .gear.small .gear-text
 +
{
 +
    position: absolute;
 +
    top: 0;
 +
    right: 0;
 +
    bottom: 0;
 +
    left: 0;
 +
    text-align: center;
 +
    z-index: 999;
 +
    padding-left: 12px;
 +
    padding-right: 12px
 +
}
 +
 +
.gear-canvas .gear.small .gear-text h6
 +
{
 +
    font-weight: 500;
 +
    line-height: 60px
 +
}
 +
 +
.gear-canvas .gear.small:after
 +
{
 +
    content: "";
 +
    position: absolute;
 +
    height: 48px;
 +
    width: 48px;
 +
    border-radius: 50%;
 +
    background-color: #f2f2f2;
 +
    top: 50%;
 +
    left: 50%;
 +
    margin-left: -24px;
 +
    margin-top: -24px;
 +
    z-index: 3
 +
}
 +
 +
.gear-canvas .gear.center
 +
{
 +
    top: calc(50% - 148px - 12px);
 +
    left: calc(50% - 148px);
 +
    z-index: 99
 +
}
 +
 +
.gear-canvas .gear-area
 +
{
 +
    position: absolute;
 +
    top: 50%;
 +
    right: 50%;
 +
    bottom: 50%;
 +
    left: 50%
 +
}
 +
 +
.gear-canvas .gear-area-a
 +
{
 +
    left: 0;
 +
    top: 0
 +
}
 +
 +
.gear-canvas .gear-area-a .large
 +
{
 +
    left: 195px;
 +
    top: 60px
 +
}
 +
 +
.gear-canvas .gear-area-a .middle
 +
{
 +
    left: 330px;
 +
    top: 30px
 +
}
 +
 +
.gear-canvas .gear-area-a .normal
 +
{
 +
    left: 180px;
 +
    top: 195px
 +
}
 +
 +
.gear-canvas .gear-area-a .small
 +
{
 +
    left: 438px;
 +
    top: 60px
 +
}
 +
 +
.gear-canvas .gear-area-b
 +
{
 +
    left: 0;
 +
    bottom: 0
 +
}
 +
 +
.gear-canvas .gear-area-b .large
 +
{
 +
    left: 168px;
 +
    bottom: 110px
 +
}
 +
 +
.gear-canvas .gear-area-b .middle
 +
{
 +
    left: 300px;
 +
    bottom: 75px
 +
}
 +
 +
.gear-canvas .gear-area-b .normal
 +
{
 +
    left: 230px;
 +
    bottom: 25px
 +
}
 +
 +
.gear-canvas .gear-area-b .small
 +
{
 +
    left: 132px;
 +
    top: 15px
 +
}
 +
 +
.gear-canvas .gear-area-c
 +
{
 +
    top: 0;
 +
    right: 0
 +
}
 +
 +
.gear-canvas .gear-area-c .one
 +
{
 +
    position: absolute;
 +
    height: 90px;
 +
    width: 90px;
 +
    border-radius: 45px;
 +
    top: 55px;
 +
    right: 90px
 +
}
 +
 +
.gear-canvas .gear-area-c .one .gear-inner
 +
{
 +
    position: relative;
 +
    height: 100%;
 +
    width: 100%;
 +
    background: #004a7c;
 +
    border-radius: 50%;
 +
    border: 1px solid white(0.1)
 +
}
 +
 +
.gear-canvas .gear-area-c .one .gear-inner .bar
 +
{
 +
    background: #004a7c;
 +
    height: 6px;
 +
    width: 102px;
 +
    position: absolute;
 +
    left: 50%;
 +
    margin-left: -51px;
 +
    top: 50%;
 +
    margin-top: -3px;
 +
    border-radius: 2px;
 +
    border-left: 1px solid white(0.1);
 +
    border-right: 1px solid white(0.1)
 +
}
 +
 +
.gear-canvas .gear-area-c .one .gear-inner .bar:nth-child(2)
 +
{
 +
    -webkit-transform: rotate(60deg);
 +
    transform: rotate(60deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .one .gear-inner .bar:nth-child(3)
 +
{
 +
    -webkit-transform: rotate(120deg);
 +
    transform: rotate(120deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .one .gear-inner .bar:nth-child(4)
 +
{
 +
    -webkit-transform: rotate(90deg);
 +
    transform: rotate(90deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .one .gear-inner .bar:nth-child(5)
 +
{
 +
    -webkit-transform: rotate(30deg);
 +
    transform: rotate(30deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .one .gear-inner .bar:nth-child(6)
 +
{
 +
    -webkit-transform: rotate(150deg);
 +
    transform: rotate(150deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .one .gear-inner .bar:nth-child(7)
 +
{
 +
    -webkit-transform: rotate(45deg);
 +
    transform: rotate(45deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .one .gear-inner .bar:nth-child(8)
 +
{
 +
    -webkit-transform: rotate(135deg);
 +
    transform: rotate(135deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .one .gear-inner .bar:nth-child(9)
 +
{
 +
    -webkit-transform: rotate(105deg);
 +
    transform: rotate(105deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .one .gear-inner .bar:nth-child(10)
 +
{
 +
    -webkit-transform: rotate(15deg);
 +
    transform: rotate(15deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .one .gear-inner .bar:nth-child(11)
 +
{
 +
    -webkit-transform: rotate(165deg);
 +
    transform: rotate(165deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .one .gear-inner .bar:nth-child(12)
 +
{
 +
    -webkit-transform: rotate(75deg);
 +
    transform: rotate(75deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .one .gear-text
 +
{
 +
    position: absolute;
 +
    top: 0;
 +
    right: 0;
 +
    bottom: 0;
 +
    left: 0;
 +
    text-align: center;
 +
    z-index: 999;
 +
    padding-left: 12px;
 +
    padding-right: 12px
 +
}
 +
 +
.gear-canvas .gear-area-c .one .gear-text h6
 +
{
 +
    font-weight: 500;
 +
    line-height: 90px
 +
}
 +
 +
.gear-canvas .gear-area-c .one:after
 +
{
 +
    content: "";
 +
    position: absolute;
 +
    height: 78px;
 +
 +
    width: 78px;
 +
    border-radius: 50%;
 +
    background-color: #f2f2f2;
 +
    top: 50%;
 +
    left: 50%;
 +
    margin-left: -39px;
 +
    margin-top: -39px;
 +
    z-index: 3
 +
}
 +
 +
.gear-canvas .gear-area-c .two
 +
{
 +
    position: absolute;
 +
    height: 75px;
 +
    width: 75px;
 +
    border-radius: 37.5px;
 +
    top: 140px;
 +
    right: 60px
 +
}
 +
 +
.gear-canvas .gear-area-c .two .gear-inner
 +
{
 +
    position: relative;
 +
    height: 100%;
 +
    width: 100%;
 +
    background: #4A4A4A;
 +
    border-radius: 50%;
 +
    border: 1px solid white(0.1)
 +
}
 +
 +
.gear-canvas .gear-area-c .two .gear-inner .bar
 +
{
 +
    background: #4A4A4A;
 +
    height: 6px;
 +
    width: 87px;
 +
    position: absolute;
 +
    left: 50%;
 +
    margin-left: -43.5px;
 +
    top: 50%;
 +
    margin-top: -3px;
 +
    border-radius: 2px;
 +
    border-left: 1px solid white(0.1);
 +
    border-right: 1px solid white(0.1)
 +
}
 +
 +
.gear-canvas .gear-area-c .two .gear-inner .bar:nth-child(2)
 +
{
 +
    -webkit-transform: rotate(60deg);
 +
    transform: rotate(60deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .two .gear-inner .bar:nth-child(3)
 +
{
 +
    -webkit-transform: rotate(120deg);
 +
    transform: rotate(120deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .two .gear-inner .bar:nth-child(4)
 +
{
 +
    -webkit-transform: rotate(90deg);
 +
    transform: rotate(90deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .two .gear-inner .bar:nth-child(5)
 +
{
 +
    -webkit-transform: rotate(30deg);
 +
    transform: rotate(30deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .two .gear-inner .bar:nth-child(6)
 +
{
 +
    -webkit-transform: rotate(150deg);
 +
    transform: rotate(150deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .two .gear-inner .bar:nth-child(7)
 +
{
 +
    -webkit-transform: rotate(45deg);
 +
    transform: rotate(45deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .two .gear-inner .bar:nth-child(8)
 +
{
 +
    -webkit-transform: rotate(135deg);
 +
    transform: rotate(135deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .two .gear-inner .bar:nth-child(9)
 +
{
 +
    -webkit-transform: rotate(105deg);
 +
    transform: rotate(105deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .two .gear-inner .bar:nth-child(10)
 +
{
 +
    -webkit-transform: rotate(15deg);
 +
    transform: rotate(15deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .two .gear-inner .bar:nth-child(11)
 +
{
 +
    -webkit-transform: rotate(165deg);
 +
    transform: rotate(165deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .two .gear-inner .bar:nth-child(12)
 +
{
 +
    -webkit-transform: rotate(75deg);
 +
    transform: rotate(75deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .two .gear-text
 +
{
 +
    position: absolute;
 +
    top: 0;
 +
    right: 0;
 +
    bottom: 0;
 +
    left: 0;
 +
    text-align: center;
 +
    z-index: 999;
 +
    padding-left: 12px;
 +
    padding-right: 12px
 +
}
 +
 +
.gear-canvas .gear-area-c .two .gear-text h6
 +
{
 +
    font-weight: 500;
 +
    line-height: 75px
 +
}
 +
 +
.gear-canvas .gear-area-c .two:after
 +
{
 +
    content: "";
 +
    position: absolute;
 +
    height: 63px;
 +
    width: 63px;
 +
    border-radius: 50%;
 +
    background-color: #f2f2f2;
 +
    top: 50%;
 +
    left: 50%;
 +
    margin-left: -31.5px;
 +
    margin-top: -31.5px;
 +
    z-index: 3
 +
}
 +
 +
.gear-canvas .gear-area-c .three
 +
{
 +
    position: absolute;
 +
    height: 65px;
 +
    width: 65px;
 +
    border-radius: 32.5px;
 +
    top: 82px;
 +
    right: 18px
 +
}
 +
 +
.gear-canvas .gear-area-c .three .gear-inner
 +
{
 +
    position: relative;
 +
    height: 100%;
 +
    width: 100%;
 +
    background: #B5B5B5;
 +
    border-radius: 50%;
 +
    border: 1px solid white(0.1)
 +
}
 +
 +
.gear-canvas .gear-area-c .three .gear-inner .bar
 +
{
 +
    background: #B5B5B5;
 +
    height: 8px;
 +
    width: 77px;
 +
    position: absolute;
 +
    left: 50%;
 +
    margin-left: -38.5px;
 +
    top: 50%;
 +
    margin-top: -4px;
 +
    border-radius: 2px;
 +
    border-left: 1px solid white(0.1);
 +
    border-right: 1px solid white(0.1)
 +
}
 +
 +
.gear-canvas .gear-area-c .three .gear-inner .bar:nth-child(2)
 +
{
 +
    -webkit-transform: rotate(60deg);
 +
    transform: rotate(60deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .three .gear-inner .bar:nth-child(3)
 +
{
 +
    -webkit-transform: rotate(120deg);
 +
    transform: rotate(120deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .three .gear-inner .bar:nth-child(4)
 +
{
 +
    -webkit-transform: rotate(90deg);
 +
    transform: rotate(90deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .three .gear-inner .bar:nth-child(5)
 +
{
 +
    -webkit-transform: rotate(30deg);
 +
    transform: rotate(30deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .three .gear-inner .bar:nth-child(6)
 +
{
 +
    -webkit-transform: rotate(150deg);
 +
    transform: rotate(150deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .three .gear-inner .bar:nth-child(7)
 +
{
 +
    -webkit-transform: rotate(45deg);
 +
    transform: rotate(45deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .three .gear-inner .bar:nth-child(8)
 +
{
 +
    -webkit-transform: rotate(135deg);
 +
    transform: rotate(135deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .three .gear-inner .bar:nth-child(9)
 +
{
 +
    -webkit-transform: rotate(105deg);
 +
    transform: rotate(105deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .three .gear-inner .bar:nth-child(10)
 +
{
 +
    -webkit-transform: rotate(15deg);
 +
    transform: rotate(15deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .three .gear-inner .bar:nth-child(11)
 +
{
 +
    -webkit-transform: rotate(165deg);
 +
    transform: rotate(165deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .three .gear-inner .bar:nth-child(12)
 +
{
 +
    -webkit-transform: rotate(75deg);
 +
    transform: rotate(75deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .three .gear-text
 +
{
 +
    position: absolute;
 +
    top: 0;
 +
    right: 0;
 +
    bottom: 0;
 +
    left: 0;
 +
    text-align: center;
 +
    z-index: 999;
 +
    padding-left: 12px;
 +
    padding-right: 12px
 +
}
 +
 +
.gear-canvas .gear-area-c .three .gear-text h6
 +
{
 +
    font-weight: 500;
 +
    line-height: 65px
 +
}
 +
 +
.gear-canvas .gear-area-c .three:after
 +
{
 +
    content: "";
 +
    position: absolute;
 +
    height: 53px;
 +
    width: 53px;
 +
    border-radius: 50%;
 +
    background-color: #f2f2f2;
 +
    top: 50%;
 +
    left: 50%;
 +
    margin-left: -26.5px;
 +
    margin-top: -26.5px;
 +
    z-index: 3
 +
}
 +
 +
.gear-canvas .gear-area-c .four
 +
{
 +
    position: absolute;
 +
    height: 50px;
 +
    width: 50px;
 +
    border-radius: 25px;
 +
    top: 12px;
 +
    right: 155px
 +
}
 +
 +
.gear-canvas .gear-area-c .four .gear-inner
 +
{
 +
    position: relative;
 +
    height: 100%;
 +
    width: 100%;
 +
    background: #D8D8D8;
 +
    border-radius: 50%;
 +
    border: 1px solid white(0.1)
 +
}
 +
 +
.gear-canvas .gear-area-c .four .gear-inner .bar
 +
{
 +
    background: #D8D8D8;
 +
    height: 6px;
 +
    width: 62px;
 +
    position: absolute;
 +
    left: 50%;
 +
    margin-left: -31px;
 +
    top: 50%;
 +
    margin-top: -3px;
 +
    border-radius: 2px;
 +
    border-left: 1px solid white(0.1);
 +
    border-right: 1px solid white(0.1)
 +
}
 +
 +
.gear-canvas .gear-area-c .four .gear-inner .bar:nth-child(2)
 +
{
 +
    -webkit-transform: rotate(60deg);
 +
    transform: rotate(60deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .four .gear-inner .bar:nth-child(3)
 +
{
 +
    -webkit-transform: rotate(120deg);
 +
    transform: rotate(120deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .four .gear-inner .bar:nth-child(4)
 +
{
 +
    -webkit-transform: rotate(90deg);
 +
    transform: rotate(90deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .four .gear-inner .bar:nth-child(5)
 +
{
 +
    -webkit-transform: rotate(30deg);
 +
    transform: rotate(30deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .four .gear-inner .bar:nth-child(6)
 +
{
 +
    -webkit-transform: rotate(150deg);
 +
    transform: rotate(150deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .four .gear-inner .bar:nth-child(7)
 +
{
 +
    -webkit-transform: rotate(45deg);
 +
    transform: rotate(45deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .four .gear-inner .bar:nth-child(8)
 +
{
 +
    -webkit-transform: rotate(135deg);
 +
    transform: rotate(135deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .four .gear-inner .bar:nth-child(9)
 +
{
 +
    -webkit-transform: rotate(105deg);
 +
    transform: rotate(105deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .four .gear-inner .bar:nth-child(10)
 +
{
 +
    -webkit-transform: rotate(15deg);
 +
    transform: rotate(15deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .four .gear-inner .bar:nth-child(11)
 +
{
 +
    -webkit-transform: rotate(165deg);
 +
    transform: rotate(165deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .four .gear-inner .bar:nth-child(12)
 +
{
 +
    -webkit-transform: rotate(75deg);
 +
    transform: rotate(75deg)
 +
}
 +
 +
.gear-canvas .gear-area-c .four .gear-text
 +
{
 +
    position: absolute;
 +
    top: 0;
 +
    right: 0;
 +
    bottom: 0;
 +
    left: 0;
 +
    text-align: center;
 +
    z-index: 999;
 +
    padding-left: 12px;
 +
    padding-right: 12px
 +
}
 +
 +
.gear-canvas .gear-area-c .four .gear-text h6
 +
{
 +
    font-weight: 500;
 +
    line-height: 50px
 +
}
 +
 +
.gear-canvas .gear-area-c .four:after
 +
{
 +
    content: "";
 +
    position: absolute;
 +
    height: 38px;
 +
    width: 38px;
 +
    border-radius: 50%;
 +
    background-color: #f2f2f2;
 +
    top: 50%;
 +
    left: 50%;
 +
    margin-left: -19px;
 +
    margin-top: -19px;
 +
    z-index: 3
 +
}
 +
 +
.gear-canvas .gear-area-c .four:after
 +
{
 +
    background-color: #D8D8D8;
 +
    border: 1px solid #fff
 +
}
 +
 +
.gear-canvas .gear-area-c .four .gear-text
 +
{
 +
    padding: 0;
 +
    top: -1.3em;
 +
    left: -70px;
 +
    right: auto;
 +
    bottom: auto;
 +
    width: 12em
 +
}
 +
 +
.gear-canvas .gear-area-c .four h6
 +
{
 +
    line-height: 1em !important;
 +
    height: 1em;
 +
    font-size: 10px;
 +
    text-transform: uppercase;
 +
    letter-spacing: 0.05em
 +
}
 +
 +
.gear-canvas .gear-area-d
 +
{
 +
    right: 0;
 +
    bottom: 0
 +
}
 +
 +
.gear-canvas .gear-area-d .large
 +
{
 +
    left: 120px;
 +
    top: 55px
 +
}
 +
 +
.gear-canvas .gear-area-d .normal
 +
{
 +
    left: 195px;
 +
    top: -30px
 +
}
 +
 +
.gear-canvas .gear-area-d .small
 +
{
 +
    left: 250px;
 +
    top: 40px
 +
}
 +
 +
.gear-canvas .brain
 +
{
 +
    position: absolute;
 +
    top: 0;
 +
    right: 0;
 +
    bottom: 0;
 +
    left: 0;
 +
    width: 215px;
 +
    height: 215px;
 +
    left: calc(50% - 107.5px);
 +
    top: calc(50% - 107.5px - 12px);
 +
    text-align: center;
 +
    background: url("../images/brain.png") no-repeat center center;
 +
    z-index: 999
 +
}
 +
 +
.gear-canvas .brain #laser
 +
{
 +
    position: absolute;
 +
    top: 0;
 +
    right: 20px;
 +
    bottom: 0;
 +
    left: 20px;
 +
    height: 2px;
 +
    background-color: #308cbe;
 +
    box-shadow: 0 0 50px 3px #308cbe
 +
}
 +
 +
.gear-canvas .chain-wapper
 +
{
 +
    position: absolute;
 +
    top: 58px;
 +
    right: auto;
 +
    bottom: auto;
 +
    left: 285px;
 +
    z-index: 100;
 +
    stroke-width: 3px;
 +
    stroke: #333
 +
}
 +
 +
body.page--contact article
 +
{
 +
    width: 100%
 +
}
 +
 +
@media (max-width: 840px)
 +
{
 +
    body.page--contact article
 +
    {
 +
        -webkit-box-orient: vertical;
 +
        -webkit-box-direction: normal;
 +
        -ms-flex-flow: column;
 +
        flex-flow: column;
 +
        -webkit-box-align: center;
 +
        -ms-flex-align: center;
 +
        align-items: center
 +
    }
 +
}
 +
 +
@media (min-width: 841px)
 +
{
 +
    body.page--contact .contact-wrapper
 +
    {
 +
        width: 50%
 +
    }
 +
 +
    body.page--contact .contact-wrapper:nth-of-type(1)
 +
    {
 +
        padding-right: 60px
 +
    }
 +
 +
    body.page--contact .contact-wrapper:nth-of-type(2)
 +
    {
 +
        padding-left: 48px
 +
    }
 +
}
 +
 +
@media (max-width: 840px)
 +
{
 +
    body.page--contact .contact-wrapper
 +
    {
 +
        width: 75%
 +
    }
 +
 +
    body.page--contact .contact-wrapper:nth-of-type(1)
 +
    {
 +
        margin-bottom: 5rem
 +
    }
 +
}
 +
 +
@media (max-width: 600px)
 +
{
 +
    body.page--contact .contact-wrapper:nth-of-type(1)
 +
    {
 +
        margin-top: 3rem;
 +
        margin-bottom: 3rem
 +
    }
 +
}
 +
 +
@media (min-width: 841px)
 +
{
 +
    body.page--contact #contact-preface
 +
    {
 +
        width: 80%;
 +
        max-width: 360px;
 +
        float: right
 +
    }
 +
}
 +
 +
body.page--contact #contact-preface a
 +
{
 +
    color: #004a7c
 +
}
 +
 +
body.page--contact #contact-preface a:hover,body.page--contact #contact-preface a:focus
 +
{
 +
    color: #39898D
 +
}
 +
 +
@media (min-width: 841px)
 +
{
 +
    body.page--contact #contact-form
 +
    {
 +
        width: 80%;
 +
        max-width: 480px
 +
    }
 +
}
 +
 +
body.page--contact #contact-form .form-group
 +
{
 +
    position: relative;
 +
    margin-bottom: 1em
 +
}
 +
 +
body.page--contact #contact-form .form-group .form-control
 +
{
 +
    height: 28px;
 +
    display: block;
 +
    width: 100%;
 +
    padding: 0.1em 0em 1px 0em;
 +
    border: none;
 +
    border-bottom: 1px solid rgba(0,0,0,0.12);
 +
    border-radius: 0px;
 +
    outline: none;
 +
    margin: 0px;
 +
    background: none
 +
}
 +
 +
body.page--contact #contact-form .form-group.submit
 +
{
 +
    margin-bottom: 0.5em
 +
}
 +
 +
body.page--contact #contact-form .form-group::-webkit-input-placeholder,body.page--contact #contact-form .form-group:-moz-placeholder,body.page--contact #contact-form .form-group::-moz-placeholder,body.page--contact #contact-form .form-group:-ms-input-placeholder
 +
{
 +
    color: transparent
 +
}
 +
 +
body.page--contact #contact-form .form-group input,body.page--contact #contact-form .form-group textarea,body.page--contact #contact-form .form-group label
 +
{
 +
    text-transform: uppercase;
 +
    box-shadow: none;
 +
    -webkit-box-shadow: none
 +
}
 +
 +
body.page--contact #contact-form .form-group input:focus,body.page--contact #contact-form .form-group textarea:focus
 +
{
 +
    box-shadow: none;
 +
    -webkit-box-shadow: none;
 +
    border-color: #39898D
 +
}
 +
 +
body.page--contact #contact-form .form-group textarea.form-control
 +
{
 +
    padding: 0.1em 0em 5px 0em;
 +
    height: 120px
 +
}
 +
 +
body.page--contact #contact-form .form-group .button
 +
{
 +
    border: 0;
 +
    padding: 0;
 +
    cursor: pointer
 +
}
 +
 +
body.page--home #loading
 +
{
 +
    background: #1A262F;
 +
    width: 100vw;
 +
    height: 100vh;
 +
    position: relative;
 +
    z-index: 99
 +
}
 +
 +
body.page--home #loading #logo-svg
 +
{
 +
    position: absolute;
 +
    top: 50%;
 +
    -webkit-transform: translateY(-50%);
 +
    transform: translateY(-50%);
 +
    left: calc(50vw - 103px)
 +
}
 +
 +
body.page--home #loading #logo-svg svg
 +
{
 +
    fill: #004a7c
 +
}
 +
 +
body.page--home #loading #logo-svg.loading
 +
{
 +
    fill: none
 +
}
 +
 +
body.page--home #loading #logo-svg.loading svg path,body.page--home #loading #logo-svg.loading svg polygon
 +
{
 +
    -webkit-animation: svgColor linear 3.5s infinite;
 +
    animation: svgColor linear 3.5s infinite
 +
}
 +
 +
body.page--home #loading #landing-container
 +
{
 +
    width: 100vw;
 +
    height: 100vh;
 +
    display: -webkit-box;
 +
    display: -ms-flexbox;
 +
    display: flex;
 +
    -webkit-box-orient: vertical;
 +
    -webkit-box-direction: normal;
 +
    -ms-flex-direction: column;
 +
    flex-direction: column;
 +
    -webkit-box-align: center;
 +
    -ms-flex-align: center;
 +
    align-items: center
 +
}
 +
 +
body.page--home #loading #landing-container #mbp-wrapper
 +
{
 +
    width: 100vw;
 +
    height: 100vh
 +
}
 +
 +
body.page--home #loading #landing-container #mbp-drawing
 +
{
 +
    position: absolute;
 +
    top: auto;
 +
    right: auto;
 +
    bottom: auto;
 +
    left: auto;
 +
    top: calc(50% - 205px);
 +
    left: calc(50% - 399px)
 +
}
 +
 +
body.page--home #loading #landing-container #mbp-drawing svg
 +
{
 +
    pointer-events: none;
 +
    height: 410px
 +
}
 +
 +
body.page--home #loading #landing-container #mbp-drawing .drawings
 +
{
 +
    max-height: 600px
 +
}
 +
 +
body.page--home #loading #landing-container #mbp-drawing .line-drawing path
 +
{
 +
    stroke: white;
 +
    stroke-width: 2
 +
}
 +
 +
body.page--home #loading #landing-container #about-us
 +
{
 +
    font-family: "sofia-pro",sans-serif;
 +
    width: 526px;
 +
    height: 250px;
 +
    position: absolute;
 +
    top: calc(50% - 139px);
 +
    right: calc(50% - 268px);
 +
    bottom: calc(50% - 139px);
 +
    left: calc(50% - 268px);
 +
    padding: 0 0 0 20px;
 +
    display: -webkit-box;
 +
    display: -ms-flexbox;
 +
    display: flex;
 +
    -webkit-box-align: center;
 +
    -ms-flex-align: center;
 +
    align-items: center
 +
}
 +
 +
body.page--home #loading #landing-container #about-us .our-core
 +
{
 +
    width: 50%;
 +
    height: 250px;
 +
    float: left;
 +
    position: relative
 +
}
 +
 +
body.page--home #loading #landing-container #about-us .our-core .circle
 +
{
 +
    opacity: .75;
 +
    filter: alpha(opacity=75);
 +
    text-align: center;
 +
    color: #fff;
 +
    text-transform: uppercase;
 +
    font-size: 20px;
 +
    letter-spacing: 0.4px
 +
}
 +
 +
body.page--home #loading #landing-container #about-us .our-core #circle-1,body.page--home #loading #landing-container #about-us .our-core #circle-4
 +
{
 +
    width: 155px;
 +
    height: 155px;
 +
    line-height: 155px;
 +
    background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
 +
}
 +
 +
body.page--home #loading #landing-container #about-us .our-core #circle-2,body.page--home #loading #landing-container #about-us .our-core #circle-3
 +
{
 +
    width: 130px;
 +
    height: 130px;
 +
    line-height: 130px;
 +
    background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
 +
}
 +
 +
body.page--home #loading #landing-container #about-us .our-core #circle-1
 +
{
 +
    position: absolute;
 +
    top: 0;
 +
    right: auto;
 +
    bottom: auto;
 +
    left: 0;
 +
    z-index: 10
 +
}
 +
 +
body.page--home #loading #landing-container #about-us .our-core #circle-2
 +
{
 +
    position: absolute;
 +
    top: 0;
 +
    right: 0;
 +
    bottom: auto;
 +
    left: auto;
 +
    z-index: 8
 +
}
 +
 +
body.page--home #loading #landing-container #about-us .our-core #circle-3
 +
{
 +
    position: absolute;
 +
    top: auto;
 +
    right: auto;
 +
    bottom: 0;
 +
    left: 0;
 +
    z-index: 7
 +
}
 +
 +
body.page--home #loading #landing-container #about-us .our-core #circle-4
 +
{
 +
    position: absolute;
 +
    top: auto;
 +
    right: 0;
 +
    bottom: 0;
 +
    left: auto;
 +
    z-index: 9
 +
}
 +
 +
body.page--home #loading #landing-container #about-us .our-slogan
 +
{
 +
    width: 50%;
 +
    float: right;
 +
    position: relative;
 +
    overflow: hidden
 +
}
 +
 +
body.page--home #loading #landing-container #about-us .our-slogan h1
 +
{
 +
    margin-left: 25px;
 +
    color: #fff;
 +
    font-size: 46px;
 +
    color: #FFFFFF;
 +
    letter-spacing: 0.24px;
 +
    line-height: 46px;
 +
    font-weight: 600
 +
}
 +
 +
body.page--home #loading #landing-container #enter-link
 +
{
 +
    cursor: pointer;
 +
    color: white;
 +
    display: -webkit-box;
 +
    display: -ms-flexbox;
 +
    display: flex;
 +
    -webkit-box-align: center;
 +
    -ms-flex-align: center;
 +
    align-items: center;
 +
    position: fixed;
 +
    left: calc(50% - 60px)
 +
}
 +
 +
body.page--home #loading #landing-container #enter-link .enter-link--text
 +
{
 +
    font-size: 16px;
 +
    color: rgba(255,255,255,0.87);
 +
    letter-spacing: 2.67px
 +
}
 +
 +
body.page--home #loading #landing-container #enter-link .enter-link--arrow
 +
{
 +
    display: inline-block;
 +
    width: 60px;
 +
    height: 1px;
 +
    background: white;
 +
    position: relative;
 +
    vertical-align: middle;
 +
    margin-left: 8px
 +
}
 +
 +
body.page--home #loading #landing-container #enter-link .enter-link--arrow:after,body.page--home #loading #landing-container #enter-link .enter-link--arrow:before
 +
{
 +
    content: "";
 +
    position: absolute;
 +
    top: 0;
 +
    right: 0;
 +
    width: 8px;
 +
    height: 1px;
 +
    background: white;
 +
    -webkit-transform-origin: top right;
 +
    transform-origin: top right
 +
}
 +
 +
body.page--home #loading #landing-container #enter-link .enter-link--arrow:before
 +
{
 +
    -webkit-transform: rotate(40deg);
 +
    transform: rotate(40deg)
 +
}
 +
 +
body.page--home #loading #landing-container #enter-link .enter-link--arrow:after
 +
{
 +
    -webkit-transform: rotate(-40deg);
 +
    transform: rotate(-40deg)
 +
}
 +
 +
body.page--home #loading #landing-container #enter-link:hover .enter-link--text,body.page--home #loading #landing-container #enter-link:focus .enter-link--text
 +
{
 +
    -webkit-transform: translateX(100%);
 +
    transform: translateX(100%);
 +
    transition: opacity 0.3s, -webkit-transform 0.3s;
 +
    transition: opacity 0.3s, transform 0.3s;
 +
    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
 +
    padding-left: 8px
 +
}
 +
 +
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
 +
{
 +
    body.page--home #loading #landing-container #enter-link:hover .enter-link--text,body.page--home #loading #landing-container #enter-link:focus .enter-link--text
 +
    {
 +
        -webkit-transform: translateX(110%);
 +
        transform: translateX(110%);
 +
        transition: none;
 +
        padding-left: 0
 +
    }
 +
}
 +
 +
body.page--home #loading #landing-container #enter-link:hover .enter-link--arrow,body.page--home #loading #landing-container #enter-link:focus .enter-link--arrow
 +
{
 +
    transition-delay: 0.1s;
 +
    -webkit-transform: translateX(-100%);
 +
    transform: translateX(-100%);
 +
    transition: opacity 0.3s, -webkit-transform 0.3s;
 +
    transition: opacity 0.3s, transform 0.3s;
 +
    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
 +
    margin-left: 0
 +
}
 +
 +
body.page--home .page-container #home-navigation--wrapper
 +
{
 +
    -ms-flex-item-align: center;
 +
    -ms-grid-row-align: center;
 +
    align-self: center
 +
}
 +
 +
@media (min-width: 601px)
 +
{
 +
    body.page--home .page-container #home-navigation--wrapper
 +
    {
 +
        width: 50%
 +
    }
 +
}
 +
 +
body.page--home .page-container #home-navigation--wrapper #home-navigation
 +
{
 +
    width: 170px;
 +
    margin-left: auto;
 +
    margin-right: auto
 +
}
 +
 +
body.page--home .page-container #home-navigation--wrapper #home-navigation a
 +
{
 +
    display: block;
 +
    margin-bottom: 24px
 +
}
 +
 +
body.page--home .page-container #home-navigation--wrapper #home-navigation h3
 +
{
 +
    margin: 0;
 +
    line-height: 1em;
 +
    font-weight: 700
 +
}
 +
 +
body.page--home .page-container #home-navigation--wrapper #home-navigation span
 +
{
 +
    font-family: "sofia-pro",sans-serif;
 +
    font-size: 10px;
 +
    font-weight: 600;
 +
    line-height: 1em;
 +
    letter-spacing: 0.1em;
 +
    text-transform: uppercase;
 +
    display: block;
 +
    margin-top: 2px
 +
}
 +
 +
body.page--home .page-container #home-navigation--wrapper #home-navigation span.small
 +
{
 +
    font-size: 13px
 +
}
 +
 +
@media (min-width: 601px)
 +
{
 +
    body.page--home .page-container #home-portfolio-list--wrapper
 +
    {
 +
        width: 50%
 +
    }
 +
 +
    body.page--home .page-container #home-portfolio-list--wrapper .portfolio-list
 +
    {
 +
        width: 1728px
 +
    }
 +
}
 +
 +
@media (max-width: 600px)
 +
{
 +
    body.page--home .page-container #home-portfolio-list--wrapper
 +
    {
 +
        display: none
 +
    }
 +
}
 +
 +
@media (min-width: 841px)
 +
{
 +
    #services-graphic
 +
    {
 +
        width: 940px;
 +
        height: 492px;
 +
        position: absolute;
 +
        top: calc(50% - 246px);
 +
        bottom: calc(50% - 246px);
 +
        left: calc(50% - 470px);
 +
        right: calc(50% - 470px)
 +
    }
 +
 +
    #services-graphic .area-typo.left,#services-graphic .area-typo.right
 +
    {
 +
        width: 230px;
 +
        float: left
 +
    }
 +
 +
    #services-graphic .area-typo.left .typo-block,#services-graphic .area-typo.right .typo-block
 +
    {
 +
        position: relative;
 +
        text-transform: uppercase
 +
    }
 +
 +
    #services-graphic .area-typo.left .typo-block.top,#services-graphic .area-typo.right .typo-block.top
 +
    {
 +
        padding-bottom: 78px
 +
    }
 +
 +
    #services-graphic .area-typo.left .typo-block.bottom,#services-graphic .area-typo.right .typo-block.bottom
 +
    {
 +
        margin-top: 78px
 +
    }
 +
 +
    #services-graphic .area-typo.left .typo-block:before,#services-graphic .area-typo.right .typo-block:before
 +
    {
 +
        border-bottom: 1px solid #979797;
 +
        border-left: 1px solid #979797;
 +
        border-top: 1px solid #979797;
 +
        content: "";
 +
        height: 150px;
 +
        left: -21px;
 +
        position: absolute;
 +
        top: 10px;
 +
        width: 14px
 +
    }
 +
 +
    #services-graphic .area-typo.left .typo-block .typo-line,#services-graphic .area-typo.right .typo-block .typo-line
 +
    {
 +
        border-top: 1px dashed #979797;
 +
        -webkit-transform: scale(1) !important;
 +
        transform: scale(1) !important;
 +
        width: 38px;
 +
        position: absolute;
 +
        top: 85px
 +
    }
 +
 +
    #services-graphic .area-typo.left .typo-block h4,#services-graphic .area-typo.right .typo-block h4
 +
    {
 +
        line-height: 1em;
 +
        margin-top: 0;
 +
        margin-bottom: 1em;
 +
        color: #004a7c
 +
    }
 +
 +
    #services-graphic .area-typo.left .typo-block ul li,#services-graphic .area-typo.right .typo-block ul li
 +
    {
 +
        font-size: 12px;
 +
        line-height: 1.5em
 +
    }
 +
 +
    #services-graphic .area-typo.left
 +
    {
 +
        text-align: right
 +
    }
 +
 +
    #services-graphic .area-typo.left .typo-block
 +
    {
 +
        -webkit-transform: translateX(20px);
 +
        transform: translateX(20px)
 +
    }
 +
 +
    #services-graphic .area-typo.left .typo-block:before
 +
    {
 +
        border-left: none;
 +
        border-right: 1px solid #918f8e;
 +
        left: auto;
 +
        right: -21px
 +
    }
 +
 +
    #services-graphic .area-typo.left .typo-line
 +
    {
 +
        left: auto;
 +
        right: -60px
 +
    }
 +
 +
    #services-graphic .area-typo.right
 +
    {
 +
        float: right
 +
    }
 +
 +
    #services-graphic .area-typo.right .typo-block
 +
    {
 +
        -webkit-transform: translateX(-20px);
 +
        transform: translateX(-20px)
 +
    }
 +
 +
    #services-graphic .area-typo.right .typo-block:before
 +
    {
 +
        border-right: none;
 +
        border-left: 1px solid #918f8e;
 +
        left: -21px;
 +
        right: auto
 +
    }
 +
 +
    #services-graphic .area-typo.right .typo-line
 +
    {
 +
        left: -60px;
 +
        right: auto
 +
    }
 +
 +
    #services-graphic .area-graphic
 +
    {
 +
        width: 480px;
 +
        float: left;
 +
        padding-left: 62px;
 +
        padding-right: 62px
 +
    }
 +
 +
    #services-graphic .area-graphic .area-icon
 +
    {
 +
        position: relative
 +
    }
 +
 +
    #services-graphic .area-graphic a.icon
 +
    {
 +
        width: 45px;
 +
        height: 45px;
 +
        line-height: 45px;
 +
        text-align: center;
 +
        display: block;
 +
        border: 1px solid #979797
 +
    }
 +
 +
    #services-graphic .area-graphic a.icon.top
 +
    {
 +
        margin-top: 62px
 +
    }
 +
 +
    #services-graphic .area-graphic a.icon.bottom
 +
    {
 +
        margin-top: 280px
 +
    }
 +
 +
    #services-graphic .area-graphic a.icon:after
 +
    {
 +
        border-top: 1px dashed #979797;
 +
        content: "";
 +
        position: absolute;
 +
        width: 125px
 +
    }
 +
 +
    #services-graphic .area-graphic a.icon span
 +
    {
 +
        font-size: 25px;
 +
        color: #004a7c;
 +
        display: block;
 +
        margin-top: 9px
 +
    }
 +
 +
    #services-graphic .area-graphic a.icon:hover,#services-graphic .area-graphic a.icon:focus
 +
    {
 +
        background-color: #004a7c;
 +
        border-color: #004a7c
 +
    }
 +
 +
    #services-graphic .area-graphic a.icon:hover span,#services-graphic .area-graphic a.icon:focus span
 +
    {
 +
        color: #fff
 +
    }
 +
 +
    #services-graphic .area-graphic .area-icon.left
 +
    {
 +
        float: left
 +
    }
 +
 +
    #services-graphic .area-graphic .area-icon.left .top:after
 +
    {
 +
        left: 26px;
 +
        top: 145px;
 +
        -webkit-transform: rotate(45deg);
 +
        transform: rotate(45deg)
 +
    }
 +
 +
    #services-graphic .area-graphic .area-icon.left .bottom:after
 +
    {
 +
        left: 26px;
 +
        top: 350px;
 +
        -webkit-transform: rotate(-45deg);
 +
        transform: rotate(-45deg)
 +
    }
 +
 +
    #services-graphic .area-graphic .area-icon.right
 +
    {
 +
        float: right
 +
    }
 +
 +
    #services-graphic .area-graphic .area-icon.right .top:after
 +
    {
 +
        right: 26px;
 +
        top: 145px;
 +
        -webkit-transform: rotate(-45deg);
 +
        transform: rotate(-45deg)
 +
    }
 +
 +
    #services-graphic .area-graphic .area-icon.right .bottom:after
 +
    {
 +
        right: 26px;
 +
        top: 350px;
 +
        -webkit-transform: rotate(45deg);
 +
        transform: rotate(45deg)
 +
    }
 +
 +
    #services-graphic .area.area-animate-graphic
 +
    {
 +
        width: 322px;
 +
        height: 312px;
 +
        float: left;
 +
        margin-left: -28px;
 +
        margin-right: -28px;
 +
        margin-top: 90px;
 +
        position: relative
 +
    }
 +
 +
    #services-graphic .area.area-animate-graphic .line-drawing path
 +
    {
 +
        stroke: #979797;
 +
        stroke-width: 1
 +
    }
 +
 +
    #services-graphic .area.area-animate-graphic .spinner-circle
 +
    {
 +
        opacity: 0;
 +
        position: absolute;
 +
        top: 0;
 +
        right: 0;
 +
        bottom: 0;
 +
        left: 0;
 +
        top: calc(50% - 27px);
 +
        left: calc(50% - 30px)
 +
    }
 +
 +
    #services-graphic .area.area-animate-graphic .spinner-circle,#services-graphic .area.area-animate-graphic .spinner-circle:before,#services-graphic .area.area-animate-graphic .spinner-circle:after
 +
    {
 +
        position: absolute;
 +
        background-color: transparent;
 +
        border-radius: 50%;
 +
        border-style: solid
 +
    }
 +
 +
    #services-graphic .area.area-animate-graphic .spinner-circle
 +
    {
 +
        width: 60px;
 +
        height: 60px;
 +
        border-width: 6px;
 +
        border-color: #004a7c transparent #004a7c transparent;
 +
        opacity: .7;
 +
        -webkit-animation: spinner-rotate-outer 2s ease-in-out infinite;
 +
        animation: spinner-rotate-outer 2s ease-in-out infinite
 +
    }
 +
 +
    #services-graphic .area.area-animate-graphic .spinner-circle:before
 +
    {
 +
        content: '';
 +
        position: absolute;
 +
        width: 25px;
 +
        height: 25px;
 +
        border-width: 6px;
 +
        border-color: rgba(255,255,250,0.5);
 +
        background-color: #004a7c;
 +
        top: 12px;
 +
        left: 12px;
 +
        opacity: .9;
 +
        -webkit-animation: spinner-rotate-inner 3s linear infinite;
 +
        animation: spinner-rotate-inner 3s linear infinite
 +
    }
 +
 +
    #services-graphic .area.area-animate-graphic .spinner-circle:after
 +
    {
 +
        content: '';
 +
        width: 0;
 +
        height: 0;
 +
        border-width: 27px;
 +
        top: -3px;
 +
        left: -3px;
 +
        opacity: .6;
 +
        -webkit-animation: spinner-rotate-single-2 7s 0s ease-in-out infinite;
 +
        animation: spinner-rotate-single-2 7s 0s ease-in-out infinite;
 +
        border-color: transparent transparent transparent #004a7c;
 +
        box-shadow: 2px 0 2px #004a7c
 +
    }
 +
}
 +
 +
@media (max-width: 960px) and (min-width: 841px)
 +
{
 +
    #services-graphic .typo-context h4
 +
    {
 +
        font-size: 16px
 +
    }
 +
}
 +
 +
@media (max-width: 840px)
 +
{
 +
    #services-graphic
 +
    {
 +
        width: 100vw;
 +
        display: -webkit-box;
 +
        display: -ms-flexbox;
 +
        display: flex;
 +
        -webkit-box-orient: horizontal;
 +
        -webkit-box-direction: normal;
 +
        -ms-flex-flow: row;
 +
        flex-flow: row;
 +
        -webkit-box-align: center;
 +
        -ms-flex-align: center;
 +
        align-items: center
 +
    }
 +
 +
    #services-graphic .area
 +
    {
 +
        width: 50%;
 +
        padding-left: 8%;
 +
        padding-right: 8%
 +
    }
 +
 +
    #services-graphic .area .typo-block
 +
    {
 +
        margin-bottom: 2rem
 +
    }
 +
 +
    #services-graphic .area .typo-block h4
 +
    {
 +
        color: #004a7c
 +
    }
 +
 +
    #services-graphic .area-graphic
 +
    {
 +
        display: none
 +
    }
 +
}
 +
 +
@media (max-width: 600px)
 +
{
 +
    #services-graphic
 +
    {
 +
        width: 100vw;
 +
        display: -webkit-box;
 +
        display: -ms-flexbox;
 +
        display: flex;
 +
        -webkit-box-orient: vertical;
 +
        -webkit-box-direction: normal;
 +
        -ms-flex-flow: column;
 +
        flex-flow: column;
 +
        -webkit-box-align: center;
 +
        -ms-flex-align: center;
 +
        align-items: center
 +
    }
 +
 +
    #services-graphic .area
 +
    {
 +
        width: 100%;
 +
        display: -webkit-box;
 +
        display: -ms-flexbox;
 +
        display: flex;
 +
        -webkit-box-orient: vertical;
 +
        -webkit-box-direction: normal;
 +
        -ms-flex-flow: column;
 +
        flex-flow: column;
 +
        -webkit-box-align: center;
 +
        -ms-flex-align: center;
 +
        align-items: center
 +
    }
 +
 +
    #services-graphic .area .typo-block
 +
    {
 +
        width: 200px;
 +
        margin-top: 1rem;
 +
        margin-bottom: 1rem
 +
    }
 +
 +
    #services-graphic .area .typo-block h4
 +
    {
 +
        color: #004a7c
 +
    }
 +
 +
    #services-graphic .area-graphic
 +
    {
 +
        display: none
 +
    }
 +
}
 +
 +
#process-canvas
 +
{
 +
    max-width: 960px;
 +
    display: -webkit-box;
 +
    display: -ms-flexbox;
 +
    display: flex;
 +
    -ms-flex-wrap: wrap;
 +
    flex-wrap: wrap
 +
}
 +
 +
@media (min-width: 841px)
 +
{
 +
    #process-canvas
 +
    {
 +
        margin-left: auto;
 +
        margin-right: auto
 +
    }
 +
}
 +
 +
@media (max-width: 840px)
 +
{
 +
    #process-canvas
 +
    {
 +
        margin-left: 2rem;
 +
        margin-right: 2rem
 +
    }
 +
}
 +
 +
@media (max-width: 480px)
 +
{
 +
    #process-canvas
 +
    {
 +
        display: -webkit-box;
 +
        display: -ms-flexbox;
 +
        display: flex;
 +
        -webkit-box-orient: vertical;
 +
        -webkit-box-direction: normal;
 +
        -ms-flex-flow: column;
 +
        flex-flow: column;
 +
        -webkit-box-align: center;
 +
        -ms-flex-align: center;
 +
        align-items: center
 +
    }
 +
}
 +
 +
@media (min-width: 841px)
 +
{
 +
    #process-canvas .process-block
 +
    {
 +
        width: 33.3333%;
 +
        margin-top: 56px;
 +
        margin-bottom: 56px
 +
    }
 +
}
 +
 +
#process-canvas .process-block .process-step
 +
{
 +
    height: 50px
 +
}
 +
 +
#process-canvas .process-block .process-step .process-step-icon
 +
{
 +
    float: left;
 +
    width: 50px;
 +
    height: 50px;
 +
    line-height: 50px;
 +
    border: 1px solid #979797;
 +
    text-align: center;
 +
    margin-right: 12px;
 +
    position: relative
 +
}
 +
 +
#process-canvas .process-block .process-step .process-step-icon span
 +
{
 +
    color: #004a7c;
 +
    font-size: 1.8em;
 +
    line-height: 50px
 +
}
 +
 +
#process-canvas .process-block .process-step .process-step-icon:after
 +
{
 +
    border-right: 1px dashed #979797;
 +
    content: "";
 +
    position: absolute;
 +
    top: 50px;
 +
    right: auto;
 +
    bottom: auto;
 +
    left: 25px;
 +
    height: 112px
 +
}
 +
 +
#process-canvas .process-block .process-step .process-step-title
 +
{
 +
    color: #004a7c;
 +
    height: 50px;
 +
    line-height: 50px
 +
}
 +
 +
#process-canvas .process-block .process-step-list
 +
{
 +
    padding-left: 61px
 +
}
 +
 +
#process-canvas .process-block .dev-icon-list
 +
{
 +
    padding-left: 61px;
 +
    margin-top: 15px;
 +
    position: relative
 +
}
 +
 +
#process-canvas .process-block .dev-icon-list:before
 +
{
 +
    border-top: 1px dashed #979797;
 +
    content: "";
 +
    position: absolute;
 +
    top: 15px;
 +
    right: auto;
 +
    bottom: auto;
 +
    left: 26px;
 +
    width: 35px
 +
}
 +
 +
#process-canvas .process-block .dev-icon-list .hexagon
 +
{
 +
    width: 28px;
 +
    height: 16px;
 +
    background: #c5c5c5;
 +
    position: relative;
 +
    display: block;
 +
    text-align: center;
 +
    float: left;
 +
    margin: 8px 2px
 +
}
 +
 +
#process-canvas .process-block .dev-icon-list .hexagon:before
 +
{
 +
    content: "";
 +
    position: absolute;
 +
    top: -8px;
 +
    left: 0;
 +
    width: 0;
 +
    height: 0;
 +
    border-left: 14px solid transparent;
 +
    border-right: 14px solid transparent;
 +
    border-bottom: 8px solid #c5c5c5
 +
}
 +
 +
#process-canvas .process-block .dev-icon-list .hexagon:after
 +
{
 +
    content: "";
 +
    position: absolute;
 +
    bottom: -8px;
 +
    left: 0;
 +
    width: 0;
 +
    height: 0;
 +
    border-left: 14px solid transparent;
 +
    border-right: 14px solid transparent;
 +
    border-top: 8px solid #c5c5c5
 +
}
 +
 +
#process-canvas .process-block .dev-icon-list .hexagon .icon
 +
{
 +
    color: #f2f2f2;
 +
    font-size: 1.1em;
 +
    display: block
 +
}
 +
 +
@media (max-width: 840px)
 +
{
 +
    #process-canvas .process-block
 +
    {
 +
        width: 33.3333%;
 +
        padding-left: 8px;
 +
        padding-right: 8px;
 +
        margin-top: 2rem;
 +
        margin-bottom: 2rem
 +
    }
 +
 +
    #process-canvas .process-block .process-step-icon,#process-canvas .process-block .dev-icon-list
 +
    {
 +
        display: none
 +
    }
 +
 +
    #process-canvas .process-block .process-step-title
 +
    {
 +
        font-size: 18px
 +
    }
 +
 +
    #process-canvas .process-block .process-step-list
 +
    {
 +
        padding-left: 0
 +
    }
 +
}
 +
 +
@media (max-width: 600px)
 +
{
 +
    #process-canvas .process-block
 +
    {
 +
        width: 50%;
 +
        margin-top: 1rem;
 +
        margin-bottom: 1rem
 +
    }
 +
}
 +
 +
@media (max-width: 480px)
 +
{
 +
    #process-canvas .process-block
 +
    {
 +
        width: 200px;
 +
        padding: 0;
 +
        margin-top: 8px;
 +
        margin-bottom: 8px
 +
    }
 +
}
 +
 +
.portfolio-list--outline
 +
{
 +
    border-left: 1px solid rgba(0,0,0,0.12);
 +
    overflow: hidden
 +
}
 +
 +
.portfolio-list
 +
{
 +
    display: -webkit-box;
 +
    display: -ms-flexbox;
 +
    display: flex;
 +
    -webkit-box-orient: horizontal;
 +
    -webkit-box-direction: normal;
 +
    -ms-flex-flow: row;
 +
    flex-flow: row
 +
}
 +
 +
.portfolio-list .portfolio-item
 +
{
 +
    width: 1728px;
 +
    padding-left: 24px;
 +
    padding-right: 24px
 +
}
 +
 +
@media (min-width: 481px)
 +
{
 +
    .portfolio-list .portfolio-item
 +
    {
 +
        border-right: 1px solid rgba(0,0,0,0.12)
 +
    }
 +
}
 +
 +
.portfolio-list .portfolio-item .portfolio-item--number
 +
{
 +
    display: block;
 +
    width: 100%;
 +
    font-family: "sofia-pro",sans-serif;
 +
    font-weight: 300;
 +
    line-height: 1em;
 +
    letter-spacing: -0.05em;
 +
    color: rgba(0,0,0,0.12)
 +
}
 +
 +
@media (min-width: 481px)
 +
{
 +
    .portfolio-list .portfolio-item .portfolio-item--number
 +
    {
 +
        font-size: 56px;
 +
        margin-bottom: 48px
 +
    }
 +
}
 +
 +
@media (max-width: 480px)
 +
{
 +
    .portfolio-list .portfolio-item .portfolio-item--number
 +
    {
 +
        font-size: 18px;
 +
        margin-bottom: 16px
 +
    }
 +
}
 +
 +
.portfolio-list .portfolio-item figure
 +
{
 +
    margin-bottom: 0
 +
}
 +
 +
.portfolio-list .portfolio-item picture
 +
{
 +
    display: block;
 +
    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.04);
 +
    border: 1px solid rgba(0,0,0,0.06);
 +
    padding: 8px;
 +
    background-color: #fff
 +
}
 +
 +
.portfolio-list .portfolio-item figcaption
 +
{
 +
    text-transform: uppercase;
 +
    font-weight: 600;
 +
    letter-spacing: 2px;
 +
    margin-top: 1rem
 +
}
 +
 +
.portfolio-list .portfolio-item figcaption span
 +
{
 +
    display: block;
 +
    width: 100%
 +
}
 +
 +
.portfolio-list .portfolio-item figcaption span.portfolio-category
 +
{
 +
    font-size: 10px;
 +
    font-weight: 300;
 +
    letter-spacing: 3.5px
 +
}
 +
 +
.portfolio-list .portfolio-item a:hover picture,.portfolio-list .portfolio-item a:focus picture
 +
{
 +
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.24);
 +
    -webkit-transform: translateY(-1rem);
 +
    transform: translateY(-1rem);
 +
    transition: all 0.3s ease-in-out
 +
}
 +
 +
.portfolio-list .portfolio-item a:hover .portfolio-item--number,.portfolio-list .portfolio-item a:focus .portfolio-item--number
 +
{
 +
    -webkit-transform: translateX(37.5%);
 +
    transform: translateX(37.5%);
 +
    transition: all 0.3s ease-in-out
 +
}
 +
 +
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
 +
{
 +
    .portfolio-list .portfolio-item a
 +
    {
 +
        display: block;
 +
        width: 100%
 +
    }
 +
 +
    .portfolio-list .portfolio-item img
 +
    {
 +
        width: 100%
 +
    }
 +
}
 +
 +
#full-portfolio-list--wrapper
 +
{
 +
    width: 100%;
 +
    overflow: hidden;
 +
    margin-left: 200px
 +
}
 +
 +
@media (max-width: 1024px)
 +
{
 +
    #full-portfolio-list--wrapper
 +
    {
 +
        margin-left: 0
 +
    }
 +
}
 +
 +
#full-portfolio-list--wrapper #full-portfolio-list
 +
{
 +
    width: 8064px
 +
}
 +
 +
@media (min-width: 481px)
 +
{
 +
    #full-portfolio-list--wrapper #full-portfolio-list .portfolio-item
 +
    {
 +
        width: 336px;
 +
        border-right: 1px solid rgba(0,0,0,0.12);
 +
        padding-left: 48px;
 +
        padding-right: 48px
 +
    }
 +
}
 +
 +
@media (max-width: 480px)
 +
{
 +
    #full-portfolio-list--wrapper #full-portfolio-list .portfolio-item
 +
    {
 +
        padding-left: 16px;
 +
        padding-right: 16px
 +
    }
 +
}
 +
 +
#full-portfolio-list--wrapper .scroll-bar
 +
{
 +
    margin-left: auto;
 +
    margin-right: auto
 +
}
 +
 +
.portfolio
 +
{
 +
    width: 100vw;
 +
    -webkit-box-orient: vertical;
 +
    -webkit-box-direction: normal;
 +
    -ms-flex-flow: column;
 +
    flex-flow: column;
 +
    overflow: visible
 +
}
 +
 +
.portfolio h1,.portfolio h2,.portfolio h3,.portfolio h4,.portfolio h5,.portfolio h6
 +
{
 +
    text-transform: capitalize;
 +
    margin-bottom: 1rem
 +
}
 +
 +
.portfolio section
 +
{
 +
    padding-top: 120px;
 +
    padding-bottom: 120px
 +
}
 +
 +
.portfolio section.small
 +
{
 +
    padding-top: 64px;
 +
    padding-bottom: 64px
 +
}
 +
 +
.portfolio section.sub-section
 +
{
 +
    padding-top: 64px;
 +
    padding-bottom: 64px
 +
}
 +
 +
@media (max-width: 480px)
 +
{
 +
    .portfolio section.sub-section
 +
    {
 +
        padding-top: 16px;
 +
        padding-bottom: 16px
 +
    }
 +
}
 +
 +
@media (max-width: 840px)
 +
{
 +
    .portfolio section
 +
    {
 +
        padding-top: 32px;
 +
        padding-bottom: 32px
 +
    }
 +
}
 +
 +
.portfolio .portfolio-header
 +
{
 +
    padding-top: 185px
 +
}
 +
 +
.portfolio .portfolio-header--classic
 +
{
 +
    text-align: right
 +
}
 +
 +
.portfolio .portfolio-header--classic .article-title,.portfolio .portfolio-header--classic .article-brief
 +
{
 +
    line-height: 1;
 +
    margin: 0
 +
}
 +
 +
.portfolio .portfolio-header--classic .article-brief
 +
{
 +
    font-weight: 300;
 +
    color: rgba(0,0,0,0.38);
 +
    margin-bottom: 0
 +
}
 +
 +
.portfolio .portfolio-header--classic .portfolio-label
 +
{
 +
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
 +
    font-size: 12px;
 +
    font-weight: 400;
 +
    line-height: 1;
 +
    letter-spacing: 0
 +
}
 +
 +
.portfolio .portfolio-header--classic .article-meta
 +
{
 +
    color: rgba(0,0,0,0.54)
 +
}
 +
 +
.portfolio h3.portfolio-title,.portfolio h3.portfolio-brief
 +
{
 +
    letter-spacing: 0.2em;
 +
    font-weight: 300
 +
}
 +
 +
.portfolio h1.portfolio-brief
 +
{
 +
    letter-spacing: 0.05em;
 +
    line-height: 70px
 +
}
 +
 +
.portfolio img:not(:last-of-type)
 +
{
 +
    margin-bottom: 64px
 +
}
 +
 +
.portfolio .tools img
 +
{
 +
    margin-bottom: 0;
 +
    margin-left: 8px;
 +
    margin-right: 8px
 +
}
 +
 +
.portfolio .data *
 +
{
 +
    line-height: 1em;
 +
    margin: 0
 +
}
 +
 +
.portfolio .portfolio-navigation
 +
{
 +
    display: -webkit-box;
 +
    display: -ms-flexbox;
 +
    display: flex;
 +
    -webkit-box-orient: horizontal;
 +
    -webkit-box-direction: normal;
 +
    -ms-flex-flow: row;
 +
    flex-flow: row;
 +
    -webkit-box-align: center;
 +
    -ms-flex-align: center;
 +
    align-items: center;
 +
    -webkit-box-pack: justify;
 +
    -ms-flex-pack: justify;
 +
    justify-content: space-between;
 +
    margin-top: 64px;
 +
    margin-bottom: 64px
 +
}
 +
 +
.portfolio .portfolio-navigation a
 +
{
 +
    display: -webkit-box;
 +
    display: -ms-flexbox;
 +
    display: flex;
 +
    -webkit-box-orient: horizontal;
 +
    -webkit-box-direction: normal;
 +
    -ms-flex-flow: row;
 +
    flex-flow: row;
 +
    -webkit-box-align: center;
 +
    -ms-flex-align: center;
 +
    align-items: center;
 +
    font-family: "sofia-pro",sans-serif;
 +
    font-size: 32px;
 +
    font-weight: 600;
 +
    line-height: 1em;
 +
    letter-spacing: 2px
 +
}
 +
 +
.portfolio .portfolio-navigation a .hint
 +
{
 +
    font-size: 10px;
 +
    font-weight: 300;
 +
    letter-spacing: 6.4px;
 +
    text-transform: uppercase;
 +
    display: block;
 +
    height: 1rem
 +
}
 +
 +
.portfolio .portfolio-navigation a .potfolio-title
 +
{
 +
    margin: 0
 +
}
 +
 +
.portfolio .portfolio-navigation .arrow
 +
{
 +
    display: inline-block;
 +
    width: 60px;
 +
    height: 1px;
 +
    position: relative;
 +
    vertical-align: middle;
 +
    background-color: rgba(0,0,0,0.87)
 +
}
 +
 +
.portfolio .portfolio-navigation .arrow:after,.portfolio .portfolio-navigation .arrow:before
 +
{
 +
    content: "";
 +
    position: absolute;
 +
    top: 0;
 +
    width: 8px;
 +
    height: 1px;
 +
    background-color: rgba(0,0,0,0.87)
 +
}
 +
 +
.portfolio .portfolio-navigation .arrow.left
 +
{
 +
    margin-right: 8px
 +
}
 +
 +
.portfolio .portfolio-navigation .arrow.left:after,.portfolio .portfolio-navigation .arrow.left:before
 +
{
 +
    left: 0;
 +
    -webkit-transform-origin: top left;
 +
    transform-origin: top left
 +
}
 +
 +
.portfolio .portfolio-navigation .arrow.right
 +
{
 +
    margin-left: 8px
 +
}
 +
 +
.portfolio .portfolio-navigation .arrow.right:after,.portfolio .portfolio-navigation .arrow.right:before
 +
{
 +
    right: 0;
 +
    -webkit-transform-origin: top right;
 +
    transform-origin: top right
 +
}
 +
 +
.portfolio .portfolio-navigation .arrow:before
 +
{
 +
    -webkit-transform: rotate(40deg);
 +
    transform: rotate(40deg)
 +
}
 +
 +
.portfolio .portfolio-navigation .arrow:after
 +
{
 +
    -webkit-transform: rotate(-40deg);
 +
    transform: rotate(-40deg)
 +
}
 +
 +
.portfolio .portfolio-navigation .prev:hover .arrow,.portfolio .portfolio-navigation .prev:hover .arrow:after,.portfolio .portfolio-navigation .prev:hover .arrow:before,.portfolio .portfolio-navigation .prev:focus .arrow,.portfolio .portfolio-navigation .prev:focus .arrow:after,.portfolio .portfolio-navigation .prev:focus .arrow:before,.portfolio .portfolio-navigation .next:hover .arrow,.portfolio .portfolio-navigation .next:hover .arrow:after,.portfolio .portfolio-navigation .next:hover .arrow:before,.portfolio .portfolio-navigation .next:focus .arrow,.portfolio .portfolio-navigation .next:focus .arrow:after,.portfolio .portfolio-navigation .next:focus .arrow:before
 +
{
 +
    background: #004a7c
 +
}
 +
 +
.portfolio .portfolio-navigation .prev:hover .arrow.left,.portfolio .portfolio-navigation .prev:focus .arrow.left,.portfolio .portfolio-navigation .next:hover .arrow.left,.portfolio .portfolio-navigation .next:focus .arrow.left
 +
{
 +
    transition-delay: 0.1s;
 +
    width: 16px;
 +
    transition: all 0.3s ease-in-out;
 +
    background: #004a7c
 +
}
 +
 +
.portfolio .portfolio-navigation .next
 +
{
 +
    text-align: right
 +
}
 +
 +
.portfolio .portfolio-navigation .next:hover .arrow.right,.portfolio .portfolio-navigation .next:focus .arrow.right
 +
{
 +
    transition-delay: 0.1s;
 +
    width: 16px;
 +
    transition: all 0.3s ease-in-out
 +
}
 +
 +
@media (max-width: 480px)
 +
{
 +
    .portfolio #pricing .row
 +
    {
 +
        -webkit-box-orient: vertical;
 +
        -webkit-box-direction: normal;
 +
        -ms-flex-flow: column;
 +
        flex-flow: column
 +
    }
 +
 +
    .portfolio #pricing .row [class^="col-"]
 +
    {
 +
        width: 100%;
 +
        margin-bottom: 1rem
 +
    }
 +
}
 +
 +
.portfolio-nav-panel
 +
{
 +
    display: none;
 +
    position: fixed;
 +
    right: 24px;
 +
    top: 50%;
 +
    -webkit-transform: translateY(-50%);
 +
    transform: translateY(-50%);
 +
    background: rgba(203,51,102,0.87);
 +
    color: white;
 +
    padding: 1rem 12px 4px 12px;
 +
    display: -webkit-box;
 +
    display: -ms-flexbox;
 +
    display: flex;
 +
    -webkit-box-orient: horizontal;
 +
    -webkit-box-direction: normal;
 +
    -ms-flex-flow: row;
 +
    flex-flow: row;
 +
    -webkit-box-align: center;
 +
    -ms-flex-align: center;
 +
    align-items: center;
 +
    z-index: 50;
 +
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.5)
 +
}
 +
 +
@media (max-width: 600px)
 +
{
 +
    .portfolio-nav-panel
 +
    {
 +
        right: 8px
 +
    }
 +
}
 +
 +
#portfolio-nav-toggle
 +
{
 +
    display: -webkit-box;
 +
    display: -ms-flexbox;
 +
    display: flex;
 +
    -webkit-box-orient: vertical;
 +
    -webkit-box-direction: normal;
 +
    -ms-flex-flow: column;
 +
    flex-flow: column;
 +
    -webkit-box-align: center;
 +
    -ms-flex-align: center;
 +
    align-items: center;
 +
    cursor: pointer
 +
}
 +
 +
#portfolio-nav-toggle .hint
 +
{
 +
    font-family: "sofia-pro",sans-serif;
 +
    font-size: 10px;
 +
    font-weight: 600;
 +
    line-height: 1em;
 +
    letter-spacing: 0.1em;
 +
    text-transform: uppercase;
 +
    margin-top: 16px
 +
}
 +
 +
#portfolio-nav-toggle .hint.small
 +
{
 +
    font-size: 13px
 +
}
 +
 +
#portfolio-nav-toggle #menu-icon
 +
{
 +
    height: 8px
 +
}
 +
 +
#portfolio-nav-toggle #menu-icon span,#portfolio-nav-toggle #menu-icon span:before,#portfolio-nav-toggle #menu-icon span:after
 +
{
 +
    height: 2px;
 +
    width: 21px;
 +
    background: #fff;
 +
    display: block;
 +
    content: '';
 +
    z-index: 50;
 +
    transition: all 0.25s ease-in-out
 +
}
 +
 +
#portfolio-nav-toggle #menu-icon span
 +
{
 +
    position: relative
 +
}
 +
 +
#portfolio-nav-toggle #menu-icon span:before
 +
{
 +
    top: -7px;
 +
    position: absolute
 +
}
 +
 +
#portfolio-nav-toggle #menu-icon span:after
 +
{
 +
    bottom: -7px;
 +
    position: absolute
 +
}
 +
 +
#portfolio-nav-toggle #menu-icon span.active
 +
{
 +
    background: transparent
 +
}
 +
 +
#portfolio-nav-toggle #menu-icon span.active:before
 +
{
 +
    -webkit-transform: rotate(45deg);
 +
    transform: rotate(45deg);
 +
    background-color: #ffffff;
 +
    top: 0
 +
}
 +
 +
#portfolio-nav-toggle #menu-icon span.active:after
 +
{
 +
    -webkit-transform: rotate(-45deg);
 +
    transform: rotate(-45deg);
 +
    background-color: #ffffff;
 +
    bottom: 0
 +
}
 +
 +
.portfolio-nav
 +
{
 +
    display: -webkit-box;
 +
    display: -ms-flexbox;
 +
    display: flex;
 +
    -webkit-box-orient: vertical;
 +
    -webkit-box-direction: normal;
 +
    -ms-flex-flow: column;
 +
    flex-flow: column;
 +
    font-size: 10px;
 +
    color: white;
 +
    margin-right: 1rem;
 +
    margin-bottom: 8px;
 +
    padding-left: 0.5em
 +
}
 +
 +
.portfolio-nav a
 +
{
 +
    font-family: "sofia-pro",sans-serif;
 +
    font-size: 10px;
 +
    font-weight: 600;
 +
    line-height: 1em;
 +
    letter-spacing: 0.1em;
 +
    text-transform: uppercase;
 +
    font-weight: 300;
 +
    color: white;
 +
    line-height: 2em;
 +
    position: relative
 +
}
 +
 +
.portfolio-nav a.small
 +
{
 +
    font-size: 13px
 +
}
 +
 +
.portfolio-nav a.active:before,.portfolio-nav a:hover:before,.portfolio-nav a:focus:before
 +
{
 +
    content: "#";
 +
    position: absolute;
 +
    left: -1em
 +
}
 +
 +
.portfolio--classic section
 +
{
 +
    padding: 0
 +
}
 +
 +
.portfolio--classic .article-content
 +
{
 +
    width: calc(100vw - 1rem)
 +
}
 +
 +
@media (min-width: 1025px)
 +
{
 +
    .portfolio--classic .article-content
 +
    {
 +
        height: calc(100vh - 1rem)
 +
    }
 +
}
 +
 +
.portfolio--classic .article-content .article-content-fix
 +
{
 +
    display: -webkit-box;
 +
    display: -ms-flexbox;
 +
    display: flex;
 +
    -webkit-box-align: center;
 +
    -ms-flex-align: center;
 +
    align-items: center
 +
}
 +
 +
@media (min-width: 1025px)
 +
{
 +
    .portfolio--classic .article-content .article-content-fix
 +
    {
 +
        width: 200vw;
 +
        height: calc(100vh - 1rem)
 +
    }
 +
}
 +
 +
@media (max-width: 1024px)
 +
{
 +
    .portfolio--classic .article-content .article-content-fix
 +
    {
 +
        -webkit-box-orient: vertical;
 +
        -webkit-box-direction: normal;
 +
        -ms-flex-flow: column;
 +
        flex-flow: column;
 +
        height: auto
 +
    }
 +
}
 +
 +
.portfolio--classic .work-showcase
 +
{
 +
    height: calc(100vh - 1rem);
 +
    overflow: hidden
 +
}
 +
 +
@media (min-width: 1025px)
 +
{
 +
    .portfolio--classic .work-showcase
 +
    {
 +
        width: calc(50vw - 0.5rem)
 +
    }
 +
}
 +
 +
@media (max-width: 1024px)
 +
{
 +
    .portfolio--classic .work-showcase
 +
    {
 +
        height: 66.66vw
 +
    }
 +
}
 +
 +
.portfolio--classic .work-detail
 +
{
 +
    color: rgba(0,0,0,0.54);
 +
    position: relative;
 +
    overflow: visible;
 +
    padding: 24px !important;
 +
    background: #FFFFFF;
 +
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2)
 +
}
 +
 +
@media (min-width: 1025px)
 +
{
 +
    .portfolio--classic .work-detail
 +
    {
 +
        width: 30vw;
 +
        height: 33.33vw
 +
    }
 +
}
 +
 +
@media (max-width: 1024px)
 +
{
 +
    .portfolio--classic .work-detail
 +
    {
 +
        width: 100%;
 +
        padding-left: 10% !important;
 +
        padding-right: 10% !important
 +
    }
 +
}
 +
 +
.portfolio--classic .work-detail .work-detail-nav
 +
{
 +
    margin-bottom: 20px
 +
}
 +
 +
.portfolio--classic .work-detail .work-detail-nav>li
 +
{
 +
    display: inline;
 +
    margin-right: 1em
 +
}
 +
 +
.portfolio--classic .work-detail .work-detail-nav>li a.active
 +
{
 +
    text-decoration: none;
 +
    padding-bottom: 3px
 +
}
 +
 +
.portfolio--classic .work-detail .content-wrapper
 +
{
 +
    padding-right: 20px;
 +
    overflow-y: scroll
 +
}
 +
 +
@media (min-width: 1025px)
 +
{
 +
    .portfolio--classic .work-detail .content-wrapper
 +
    {
 +
        height: calc(33.33vw - 140px)
 +
    }
 +
}
 +
 +
.portfolio--classic .work-detail .content-wrapper ul
 +
{
 +
    padding-left: 20px;
 +
    list-style: disc;
 +
    margin-bottom: 1.5em
 +
}
 +
 +
.portfolio--classic .work-detail .content-wrapper p
 +
{
 +
    margin-top: 0;
 +
    margin-bottom: 1em
 +
}
 +
 +
@media (min-width: 1025px)
 +
{
 +
    .portfolio--classic .portfolio-header
 +
    {
 +
        height: 33.33vw;
 +
        padding: 0
 +
    }
 +
 +
    .portfolio--classic .portfolio-header .article-title
 +
    {
 +
        white-space: nowrap;
 +
        -webkit-transform: rotate(90deg);
 +
        transform: rotate(90deg);
 +
        -webkit-transform-origin: 0 0;
 +
        transform-origin: 0 0;
 +
        margin: 0;
 +
        margin-left: 52px;
 +
        line-height: 1
 +
    }
 +
}
 +
 +
@media (max-width: 1024px)
 +
{
 +
    .portfolio--classic .portfolio-header
 +
    {
 +
        padding-top: 80px;
 +
        padding-bottom: 32px;
 +
        text-align: center
 +
    }
 +
 +
    .portfolio--classic .portfolio-header .article-meta
 +
    {
 +
        font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
 +
        font-size: 12px;
 +
        font-weight: 400;
 +
        line-height: 1;
 +
        letter-spacing: 0;
 +
        color: rgba(0,0,0,0.38)
 +
    }
 +
 +
    .portfolio--classic .portfolio-header .article-meta .label
 +
    {
 +
        padding-left: 4px;
 +
        padding-right: 4px
 +
    }
 +
}
 +
 +
.portfolio--classic .portfolio-footer
 +
{
 +
    display: -webkit-box;
 +
    display: -ms-flexbox;
 +
    display: flex;
 +
    -webkit-box-align: center;
 +
    -ms-flex-align: center;
 +
    align-items: center
 +
}
 +
 +
@media (min-width: 1025px)
 +
{
 +
    .portfolio--classic .portfolio-footer
 +
    {
 +
        position: absolute;
 +
        z-index: 50;
 +
        width: 100vw;
 +
        bottom: 6vh
 +
    }
 +
}
 +
 +
@media (max-width: 1024px)
 +
{
 +
    .portfolio--classic .portfolio-footer
 +
    {
 +
        margin-top: 24px;
 +
        margin-bottom: 24px
 +
    }
 +
}
 +
 +
.portfolio--classic .portfolio-footer .wrapper
 +
{
 +
    width: 960px
 +
}
 +
 +
.portfolio--classic .portfolio-footer .portfolio-navigation
 +
{
 +
    margin: 0
 +
}
 +
 +
@media (max-width: 640px)
 +
{
 +
    .portfolio-brief
 +
    {
 +
        font-size: 31px;
 +
        line-height: 1.5 !important
 +
    }
 +
}
 +
 +
.price-table--body
 +
{
 +
    min-height: 420px
 +
}
 +
 +
.page--4ocal-web-ui-kit .color-primary
 +
{
 +
    color: #92A8D1
 +
}
 +
 +
.page--4ocal-web-ui-kit .bg-color-primary
 +
{
 +
    background: #92A8D1
 +
}
 +
 +
.page--4ocal-web-ui-kit .color-secondary
 +
{
 +
    color: #F7CAC9
 +
}
 +
 +
.page--4ocal-web-ui-kit .bg-color-secondary
 +
{
 +
    background: #F7CAC9
 +
}
 +
 +
.page--4ocal-web-ui-kit .color-success
 +
{
 +
    color: #79C753
 +
}
 +
 +
.page--4ocal-web-ui-kit .bg-color-success
 +
{
 +
    background: #79C753
 +
}
 +
 +
.page--4ocal-web-ui-kit .color-warning
 +
{
 +
    color: #FAE03C
 +
}
 +
 +
.page--4ocal-web-ui-kit .bg-color-warning
 +
{
 +
    background: #FAE03C
 +
}
 +
 +
.page--4ocal-web-ui-kit .color-alert
 +
{
 +
    color: #DD4132
 +
}
 +
 +
.page--4ocal-web-ui-kit .bg-color-alert
 +
{
 +
    background: #DD4132
 +
}
 +
 +
.page--4ocal-web-ui-kit .page-border
 +
{
 +
    border-color: white
 +
}
 +
 +
.page--4ocal-web-ui-kit .page-container
 +
{
 +
    background: #F7CAC9;
 +
    z-index: -2
 +
}
 +
 +
.page--4ocal-web-ui-kit .main:after
 +
{
 +
    content: "";
 +
    width: 50%;
 +
    position: absolute;
 +
    top: 0;
 +
    right: 0;
 +
    bottom: 0;
 +
    background: #92A8D1;
 +
    z-index: -1
 +
}
 +
 +
.page--4ocal-web-ui-kit .portfolio-header
 +
{
 +
    width: 100%;
 +
    padding-top: 120px;
 +
    padding-bottom: 120px
 +
}
 +
 +
@media (max-width: 840px) and (min-width: 481px)
 +
{
 +
    .page--4ocal-web-ui-kit .portfolio-header h1
 +
    {
 +
        font-size: 56px
 +
    }
 +
 +
    .page--4ocal-web-ui-kit .portfolio-header h5
 +
    {
 +
        font-size: 18px
 +
    }
 +
}
 +
 +
@media (max-width: 480px) and (max-width: 361px)
 +
{
 +
    .page--4ocal-web-ui-kit .portfolio-header h1
 +
    {
 +
        font-size: 32px
 +
    }
 +
 +
    .page--4ocal-web-ui-kit .portfolio-header h5
 +
    {
 +
        font-size: 10px
 +
    }
 +
 +
    .page--4ocal-web-ui-kit .portfolio-header .portfolio-title
 +
    {
 +
        text-align: center
 +
    }
 +
 +
    .page--4ocal-web-ui-kit .portfolio-header .portfolio-brief
 +
    {
 +
        font-size: 24px;
 +
        line-height: 1.4
 +
    }
 +
 +
    .page--4ocal-web-ui-kit .portfolio-header .layout-space-4
 +
    {
 +
        height: 2rem
 +
    }
 +
}
 +
 +
@media (max-width: 360px)
 +
{
 +
    .page--4ocal-web-ui-kit .portfolio-header
 +
    {
 +
        padding-bottom: 60px
 +
    }
 +
 +
    .page--4ocal-web-ui-kit .portfolio-header h1
 +
    {
 +
        font-size: 28px
 +
    }
 +
 +
    .page--4ocal-web-ui-kit .portfolio-header h5
 +
    {
 +
        font-size: 8px
 +
    }
 +
 +
    .page--4ocal-web-ui-kit .portfolio-header .color-primary
 +
    {
 +
        width: 60%
 +
    }
 +
 +
    .page--4ocal-web-ui-kit .portfolio-header .portfolio-title
 +
    {
 +
        text-align: center
 +
    }
 +
 +
    .page--4ocal-web-ui-kit .portfolio-header .portfolio-title img
 +
    {
 +
        width: 80%
 +
    }
 +
 +
    .page--4ocal-web-ui-kit .portfolio-header .portfolio-brief
 +
    {
 +
        font-size: 18px;
 +
        line-height: 1.4
 +
    }
 +
}
 +
 +
.page--4ocal-web-ui-kit .portfolio-details
 +
{
 +
    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.04);
 +
    background-color: #f2f2f2
 +
}
 +
 +
@media (min-width: 1281px)
 +
{
 +
    .page--4ocal-web-ui-kit .portfolio-details
 +
    {
 +
        margin-left: 80px;
 +
        margin-right: 80px
 +
    }
 +
}
 +
 +
@media (min-width: 1025px) and (max-width: 1280px)
 +
{
 +
    .page--4ocal-web-ui-kit .portfolio-details
 +
    {
 +
        margin-left: 48px;
 +
        margin-right: 48px
 +
    }
 +
}
 +
 +
.page--4ocal-web-ui-kit .section-title.combo
 +
{
 +
    margin-bottom: 80px
 +
}
 +
 +
@media (max-width: 600px)
 +
{
 +
    .page--4ocal-web-ui-kit .section-title.combo
 +
    {
 +
        margin-bottom: 48px
 +
    }
 +
}
 +
 +
.page--4ocal-web-ui-kit .section-title.combo h1,.page--4ocal-web-ui-kit .section-title.combo h3
 +
{
 +
    margin: 0;
 +
    font-weight: 400
 +
}
 +
 +
.page--4ocal-web-ui-kit .section-title.combo h1
 +
{
 +
    text-align: center;
 +
    color: rgba(0,0,0,0.12)
 +
}
 +
 +
@media (max-width: 840px) and (min-width: 601px)
 +
{
 +
    .page--4ocal-web-ui-kit .section-title.combo h1
 +
    {
 +
        font-size: 56px
 +
    }
 +
}
 +
 +
@media (max-width: 600px) and (min-width: 361px)
 +
{
 +
    .page--4ocal-web-ui-kit .section-title.combo h1
 +
    {
 +
        font-size: 42px
 +
    }
 +
}
 +
 +
@media (max-width: 360px)
 +
{
 +
    .page--4ocal-web-ui-kit .section-title.combo h1
 +
    {
 +
        font-size: 36px
 +
    }
 +
}
 +
 +
.page--4ocal-web-ui-kit .section-title.combo h3
 +
{
 +
    margin-top: -0.8em
 +
}
 +
 +
@media (max-width: 840px) and (min-width: 601px)
 +
{
 +
    .page--4ocal-web-ui-kit .section-title.combo h3
 +
    {
 +
        font-size: 28px;
 +
        margin-top: -1em
 +
    }
 +
}
 +
 +
@media (max-width: 600px) and (min-width: 481px)
 +
{
 +
    .page--4ocal-web-ui-kit .section-title.combo h3
 +
    {
 +
        font-size: 24px;
 +
        margin-top: -1.2em
 +
    }
 +
}
 +
 +
@media (max-width: 480px)
 +
{
 +
    .page--4ocal-web-ui-kit .section-title.combo h3
 +
    {
 +
        font-size: 18px;
 +
        margin-top: -1.2em
 +
    }
 +
}
 +
 +
@media (max-width: 360px)
 +
{
 +
    .page--4ocal-web-ui-kit .section-title.combo .cols
 +
    {
 +
        width: 100vw;
 +
        text-align: center
 +
    }
 +
 +
    .page--4ocal-web-ui-kit .section-title.combo .col-3
 +
    {
 +
        width: 0
 +
    }
 +
}
 +
 +
.page--4ocal-web-ui-kit .sub-section-title
 +
{
 +
    text-align: center;
 +
    color: #F7CAC9
 +
}
 +
 +
.page--4ocal-web-ui-kit .sub-section-title .components-title
 +
{
 +
    margin-bottom: -0.5rem
 +
}
 +
 +
@media (max-width: 360px)
 +
{
 +
    .page--4ocal-web-ui-kit .sub-section-title .components-title
 +
    {
 +
        margin-bottom: -0.2em
 +
    }
 +
}
 +
 +
@media (max-width: 600px) and (min-width: 481px)
 +
{
 +
    .page--4ocal-web-ui-kit .sub-section-title h1
 +
    {
 +
        font-size: 56px
 +
    }
 +
}
 +
 +
@media (max-width: 480px) and (min-width: 361px)
 +
{
 +
    .page--4ocal-web-ui-kit .sub-section-title h1
 +
    {
 +
        font-size: 38px
 +
    }
 +
}
 +
 +
@media (max-width: 360px)
 +
{
 +
    .page--4ocal-web-ui-kit .sub-section-title h1
 +
    {
 +
        font-size: 28px
 +
    }
 +
}
 +
 +
.page--4ocal-web-ui-kit .color
 +
{
 +
    text-align: center
 +
}
 +
 +
.page--4ocal-web-ui-kit .color-1
 +
{
 +
    z-index: 50
 +
}
 +
 +
.page--4ocal-web-ui-kit .color-2
 +
{
 +
    margin-left: -48px;
 +
    z-index: 9
 +
}
 +
 +
@media (max-width: 480px)
 +
{
 +
    .page--4ocal-web-ui-kit .color-2
 +
    {
 +
        margin-left: -24px
 +
    }
 +
}
 +
 +
.page--4ocal-web-ui-kit .color .circle
 +
{
 +
    width: 200px;
 +
    height: 200px;
 +
    border-radius: 50%;
 +
    margin-bottom: 1rem
 +
}
 +
 +
@media (max-width: 600px) and (min-width: 481px)
 +
{
 +
    .page--4ocal-web-ui-kit .color .circle
 +
    {
 +
        width: 150px;
 +
        height: 150px
 +
    }
 +
}
 +
 +
@media (max-width: 480px) and (min-width: 361px)
 +
{
 +
    .page--4ocal-web-ui-kit .color .circle
 +
    {
 +
        width: 100px;
 +
        height: 100px;
 +
        margin-bottom: 0.5rem
 +
    }
 +
}
 +
 +
@media (max-width: 360px)
 +
{
 +
    .page--4ocal-web-ui-kit .color .circle
 +
    {
 +
        width: 80px;
 +
        height: 80px
 +
    }
 +
}
 +
 +
.page--4ocal-web-ui-kit .color .circle.small
 +
{
 +
    width: 100px;
 +
    height: 100px
 +
}
 +
 +
@media (max-width: 600px) and (min-width: 481px)
 +
{
 +
    .page--4ocal-web-ui-kit .color .circle.small
 +
    {
 +
        width: 70px;
 +
        height: 70px
 +
    }
 +
}
 +
 +
@media (max-width: 480px) and (min-width: 361px)
 +
{
 +
    .page--4ocal-web-ui-kit .color .circle.small
 +
    {
 +
        width: 40px;
 +
        height: 40px
 +
    }
 +
}
 +
 +
@media (max-width: 360px)
 +
{
 +
    .page--4ocal-web-ui-kit .color .circle.small
 +
    {
 +
        width: 30px;
 +
        height: 30px
 +
    }
 +
}
 +
 +
.page--4ocal-web-ui-kit .color-1 .circle,.page--4ocal-web-ui-kit .color-2 .circle
 +
{
 +
    opacity: 0.8
 +
}
 +
 +
.page--4ocal-web-ui-kit .color .color-name
 +
{
 +
    font-weight: 400;
 +
    margin: 0
 +
}
 +
 +
@media (max-width: 600px) and (min-width: 481px)
 +
{
 +
    .page--4ocal-web-ui-kit .color .color-name
 +
    {
 +
        font-size: 18px
 +
    }
 +
}
 +
 +
@media (max-width: 480px) and (min-width: 361px)
 +
{
 +
    .page--4ocal-web-ui-kit .color .color-name
 +
    {
 +
        font-size: 16px
 +
    }
 +
}
 +
 +
@media (max-width: 360px)
 +
{
 +
    .page--4ocal-web-ui-kit .color .color-name
 +
    {
 +
        display: none
 +
    }
 +
}
 +
 +
.page--4ocal-web-ui-kit .color .color-value
 +
{
 +
    font-weight: 400;
 +
    color: rgba(0,0,0,0.54);
 +
    letter-spacing: 0.1em
 +
}
 +
 +
@media (max-width: 600px) and (min-width: 481px)
 +
 +
{
 +
    .page--4ocal-web-ui-kit .color .color-value
 +
    {
 +
        font-size: 14px
 +
    }
 +
}
 +
 +
@media (max-width: 480px) and (min-width: 361px)
 +
{
 +
    .page--4ocal-web-ui-kit .color .color-value
 +
    {
 +
        font-size: 10px
 +
    }
 +
}
 +
 +
@media (max-width: 360px)
 +
{
 +
    .page--4ocal-web-ui-kit .color .color-value
 +
    {
 +
        display: none
 +
    }
 +
}
 +
 +
.page--4ocal-web-ui-kit .accent-color
 +
{
 +
    height: 100%
 +
}
 +
 +
.page--4ocal-web-ui-kit .price-table--body
 +
{
 +
    min-height: 510px
 +
}
 +
 +
.page--4eeder-web-ui-kit .page-border
 +
{
 +
    border-color: white
 +
}
 +
 +
.page--4eeder-web-ui-kit .hero--content--mobile
 +
{
 +
    margin: 0;
 +
    padding: 0
 +
}
 +
 +
.page--4eeder-web-ui-kit .hero--content
 +
{
 +
    background: #034F84;
 +
    color: white;
 +
    padding: 0;
 +
    height: 715px;
 +
    position: relative
 +
}
 +
 +
.page--4eeder-web-ui-kit .hero--content .portfolio-header
 +
{
 +
    position: absolute;
 +
    top: calc(50% + 10px);
 +
    -webkit-transform: translateY(-50%);
 +
    transform: translateY(-50%);
 +
    right: 50%;
 +
    padding-top: 0;
 +
    padding-left: 20px;
 +
    padding-right: 20px;
 +
    text-align: center;
 +
    background: #034F84;
 +
    z-index: 50
 +
}
 +
 +
.page--4eeder-web-ui-kit .hero--content .portfolio-title,.page--4eeder-web-ui-kit .hero--content .portfolio-brief
 +
{
 +
    margin: 0;
 +
    font-weight: 400;
 +
    letter-spacing: 0;
 +
    line-height: 1em
 +
}
 +
 +
.page--4eeder-web-ui-kit .hero--content .button
 +
{
 +
    background: #B18F6A;
 +
    box-shadow: none;
 +
    border-radius: 2px;
 +
    margin-top: 2rem
 +
}
 +
 +
.page--4eeder-web-ui-kit .hero--content .deco--line
 +
{
 +
    position: absolute;
 +
    top: 50%;
 +
    -webkit-transform: translateY(-50%);
 +
    transform: translateY(-50%);
 +
    left: 0;
 +
    width: 100%;
 +
    height: 1px;
 +
    background: white;
 +
    z-index: 9
 +
}
 +
 +
.page--4eeder-web-ui-kit .hero--content .portfolio-logo
 +
{
 +
    position: absolute;
 +
    top: 50%;
 +
    -webkit-transform: translateY(-50%);
 +
    transform: translateY(-50%);
 +
    left: calc(50% + 540px);
 +
    padding: 20px;
 +
    background: #034F84;
 +
    z-index: 999
 +
}
 +
 +
@media (max-width: 1280px)
 +
{
 +
    .page--4eeder-web-ui-kit .hero--content .portfolio-logo
 +
    {
 +
        display: none
 +
    }
 +
}
 +
 +
.page--4eeder-web-ui-kit .hero--content .hero--images
 +
{
 +
    height: 715px;
 +
    overflow: hidden;
 +
    position: relative;
 +
    z-index: 99
 +
}
 +
 +
.page--4eeder-web-ui-kit .hero--content .hero--images .col--left
 +
{
 +
    text-align: left;
 +
    height: 715px;
 +
    display: -webkit-box;
 +
    display: -ms-flexbox;
 +
    display: flex;
 +
    -webkit-box-align: start;
 +
    -ms-flex-align: start;
 +
    align-items: flex-start;
 +
    -webkit-box-orient: vertical;
 +
    -webkit-box-direction: normal;
 +
    -ms-flex-flow: column;
 +
    flex-flow: column;
 +
    -webkit-box-pack: justify;
 +
    -ms-flex-pack: justify;
 +
    justify-content: space-between
 +
}
 +
 +
.page--4eeder-web-ui-kit .hero--content .hero--images .col--right
 +
{
 +
    text-align: right
 +
}
 +
 +
.page--4eeder-web-ui-kit .hero--content .hero--images img:not(:last-of-type)
 +
{
 +
    margin-bottom: 24px
 +
}
 +
 +
.page--4eeder-web-ui-kit .hero--content .hero--images .hero--image-1
 +
{
 +
    margin-top: -120px
 +
}
 +
 +
.page--4eeder-web-ui-kit .hero--content .hero--images .hero--image-2
 +
{
 +
    margin-bottom: -120px
 +
}
 +
 +
.page--4eeder-web-ui-kit #intro
 +
{
 +
    background: #034F84;
 +
    color: white;
 +
    text-align: center;
 +
    font-size: 20px;
 +
    font-weight: 300;
 +
    letter-spacing: 0.067em
 +
}
 +
 +
@media (max-width: 640px)
 +
{
 +
    .page--4eeder-web-ui-kit #intro
 +
    {
 +
        font-size: 16px
 +
    }
 +
}
 +
 +
.page--4eeder-web-ui-kit #intro .button
 +
{
 +
    margin-top: 32px;
 +
    margin-bottom: 24px
 +
}
 +
 +
.page--4eeder-web-ui-kit .section-title
 +
{
 +
    text-align: center;
 +
    margin-bottom: 64px
 +
}
 +
 +
.page--4eeder-web-ui-kit .section-title h1
 +
{
 +
    font-weight: 200;
 +
    margin-bottom: 64px
 +
}
 +
 +
@media (max-width: 640px)
 +
{
 +
    .page--4eeder-web-ui-kit .section-title h1
 +
    {
 +
        font-size: 32px
 +
    }
 +
}
 +
 +
.page--4eeder-web-ui-kit #styles img:not(:last-of-type)
 +
{
 +
    margin-bottom: 120px
 +
}
 +
 +
@media (max-width: 640px)
 +
{
 +
    .page--4eeder-web-ui-kit #styles img:not(:last-of-type)
 +
    {
 +
        margin-bottom: 60px
 +
    }
 +
}
 +
 +
.page--4eeder-web-ui-kit .sub-section
 +
{
 +
    padding-top: 64px
 +
}
 +
 +
.page--4eeder-web-ui-kit .price-table
 +
{
 +
    -webkit-box-align: center;
 +
    -ms-flex-align: center;
 +
    align-items: center
 +
}
 +
 +
.page--4eeder-web-ui-kit .price-table--body
 +
{
 +
    min-height: auto !important;
 +
    display: -webkit-box;
 +
    display: -ms-flexbox;
 +
    display: flex;
 +
    -webkit-box-pack: center;
 +
    -ms-flex-pack: center;
 +
    justify-content: center
 +
}
 +
 +
.page--applemusic-gui
 +
{
 +
    background-color: #fff
 +
}
 +
 +
.page--applemusic-gui .page-border
 +
{
 +
    border-style: solid;
 +
    border-width: 8px;
 +
    border-image-source: radial-gradient(circle at 25% 100%, #e751be, #eb719d 34%, #9c62ea 67%, #4e54e6);
 +
    border-image-slice: 1
 +
}
 +
 +
.page--applemusic-gui h1,.page--applemusic-gui h2
 +
{
 +
    font-family: "myriad-pro","Helvetica Neue","Helvetica","Arial",sans-serif !important
 +
}
 +
 +
.page--applemusic-gui p
 +
{
 +
    font-size: 1rem
 +
}
 +
 +
.page--applemusic-gui .container
 +
{
 +
    margin: 0 auto;
 +
    padding-top: 120px;
 +
    padding-bottom: 120px;
 +
    text-align: center
 +
}
 +
 +
@media (min-width: 961px)
 +
{
 +
    .page--applemusic-gui .container
 +
    {
 +
        width: 960px
 +
    }
 +
}
 +
 +
@media (max-width: 960px)
 +
{
 +
    .page--applemusic-gui .container
 +
    {
 +
        width: 100%;
 +
        padding-left: 24px;
 +
        padding-right: 24px
 +
    }
 +
}
 +
 +
@media (max-width: 480px)
 +
{
 +
    .page--applemusic-gui .container
 +
    {
 +
        padding: 3rem 1rem
 +
    }
 +
}
 +
 +
.page--applemusic-gui .button
 +
{
 +
    font-size: 15.75px;
 +
    line-height: 1.9375;
 +
    font-weight: 300;
 +
    letter-spacing: 0em;
 +
    background-color: #0070c9;
 +
    background: linear-gradient(#42a1ec, #0070c9);
 +
    border-color: #07c;
 +
    border-width: 1px;
 +
    border-style: solid;
 +
    border-radius: 4px;
 +
    color: #fff;
 +
    cursor: pointer;
 +
    display: inline-block;
 +
    min-width: 30px;
 +
    padding-left: 15px;
 +
    padding-right: 15px;
 +
    padding-top: 1px;
 +
    text-align: center;
 +
    white-space: nowrap;
 +
    text-decoration: none;
 +
    margin-top: 40px;
 +
    text-transform: capitalize
 +
}
 +
 +
.page--applemusic-gui .button:hover,.page--applemusic-gui .button:focus
 +
{
 +
    background-color: #147bcd;
 +
    background: linear-gradient(#51a9ee, #147bcd);
 +
    border-color: #1482d0;
 +
    text-decoration: none
 +
}
 +
 +
.page--applemusic-gui section
 +
{
 +
    padding: 0
 +
}
 +
 +
.page--applemusic-gui section h1,.page--applemusic-gui section h2
 +
{
 +
    margin-left: auto;
 +
    margin-right: auto
 +
}
 +
 +
.page--applemusic-gui section h2
 +
{
 +
    font-size: 48px;
 +
    line-height: 1;
 +
    font-weight: 300;
 +
    letter-spacing: 0em;
 +
    margin-top: 16px
 +
}
 +
 +
@media (min-width: 961px)
 +
{
 +
    .page--applemusic-gui section h2
 +
    {
 +
        width: 640px
 +
    }
 +
}
 +
 +
@media (max-width: 600px)
 +
{
 +
    .page--applemusic-gui section h2
 +
    {
 +
        font-size: 36px
 +
    }
 +
}
 +
 +
@media (max-width: 480px)
 +
{
 +
    .page--applemusic-gui section h2
 +
    {
 +
        font-size: 28px
 +
    }
 +
}
 +
 +
.page--applemusic-gui section p
 +
{
 +
    margin-left: auto;
 +
    margin-right: auto
 +
}
 +
 +
@media (min-width: 961px)
 +
{
 +
    .page--applemusic-gui section p
 +
    {
 +
        width: 640px
 +
    }
 +
}
 +
 +
.page--applemusic-gui section p.update
 +
{
 +
    font-size: 15.75px;
 +
    color: #999;
 +
    margin-top: 8px
 +
}
 +
 +
.page--applemusic-gui section#section-hero
 +
{
 +
    background-color: #fafafa
 +
}
 +
 +
.page--applemusic-gui section#section-hero .container
 +
{
 +
    padding-top: 120px
 +
}
 +
 +
.page--applemusic-gui section#section-hero h1
 +
{
 +
    font-size: 64px;
 +
    line-height: 1.0625;
 +
    letter-spacing: -0.02em;
 +
    font-weight: 300
 +
}
 +
 +
@media (min-width: 961px)
 +
{
 +
    .page--applemusic-gui section#section-hero h1
 +
    {
 +
        width: 864px
 +
    }
 +
}
 +
 +
@media (max-width: 600px)
 +
{
 +
    .page--applemusic-gui section#section-hero h1
 +
    {
 +
        font-size: 48px
 +
    }
 +
}
 +
 +
@media (max-width: 480px)
 +
{
 +
    .page--applemusic-gui section#section-hero h1
 +
    {
 +
        font-size: 32px
 +
 +
    }
 +
}
 +
 +
.page--applemusic-gui section#section-hero h1 .subhead
 +
{
 +
    display: block;
 +
    color: #888888
 +
}
 +
 +
.page--applemusic-gui section#desclaimer
 +
{
 +
    height: 600px;
 +
    background: url("../images/sketch_screen_02.jpg") no-repeat top center;
 +
    color: #fff
 +
}
 +
 +
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)
 +
{
 +
    .page--applemusic-gui section#desclaimer
 +
    {
 +
        background: url("../images/sketch_screen_02@2x.jpg") no-repeat top center;
 +
        background-size: auto 600px
 +
    }
 +
}
 +
 +
.page--applemusic-gui section#desclaimer .container
 +
{
 +
    padding-top: 170px
 +
}
 +
 +
.page--applemusic-gui section#desclaimer .social-share
 +
{
 +
    margin-top: 60px
 +
}
 +
 +
.page--applemusic-gui section#desclaimer .social-share>a
 +
{
 +
    color: #fff;
 +
    font-size: 15.75px
 +
}
 +
 +
.page--applemusic-gui section#desclaimer .social-share>a .social-icon
 +
{
 +
    width: 18px;
 +
    height: 18px
 +
}
 +
 +
.page--applemusic-gui section#desclaimer .social-share>a span
 +
{
 +
    vertical-align: top;
 +
    line-height: 20px;
 +
    margin-left: 4px
 +
}
 +
 +
.page--applemusic-gui section#desclaimer .social-share>a.facebook-share-button
 +
{
 +
    margin-right: 18px
 +
}
 +
 +
.page--applemusic-gui figure.hero-image
 +
{
 +
    width: 930px;
 +
    height: 532px;
 +
    background: url("../images/apple_music_image.jpg") no-repeat center;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
    position: relative;
 +
    margin-top: 120px
 +
}
 +
 +
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)
 +
{
 +
    .page--applemusic-gui figure.hero-image
 +
    {
 +
        background: url("../images/apple_music_image@2x.jpg") no-repeat center;
 +
        background-size: 930px 532px
 +
    }
 +
}
 +
 +
@media (max-width: 960px)
 +
{
 +
    .page--applemusic-gui figure.hero-image
 +
    {
 +
        background-size: contain;
 +
        width: 100%
 +
    }
 +
}
 +
 +
@media (max-width: 600px)
 +
{
 +
    .page--applemusic-gui figure.hero-image
 +
    {
 +
        height: 350px;
 +
        margin-top: 64px
 +
    }
 +
}
 +
 +
@media (max-width: 480px)
 +
{
 +
    .page--applemusic-gui figure.hero-image
 +
    {
 +
        height: 280px
 +
    }
 +
}
 +
 +
@media (max-width: 360px)
 +
{
 +
    .page--applemusic-gui figure.hero-image
 +
    {
 +
        height: 210px;
 +
        margin-top: 48px
 +
    }
 +
}
 +
 +
.page--applemusic-gui figure.apple-music-logo
 +
{
 +
    width: 138px;
 +
    height: 35px;
 +
    background: url("../images/apple_music_logo.png") no-repeat center;
 +
    margin-left: auto;
 +
    margin-right: auto
 +
}
 +
 +
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)
 +
{
 +
    .page--applemusic-gui figure.apple-music-logo
 +
    {
 +
        background: url("../images/apple_music_logo@2x.png") no-repeat center;
 +
        background-size: 138px 35px
 +
    }
 +
}
 +
 +
.page--applemusic-gui figure.sketch-preview
 +
{
 +
    width: 980px;
 +
    height: 620px;
 +
    background: url("../images/sketch_screen_01.jpg") no-repeat center;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
    position: relative;
 +
    margin-top: 60px;
 +
    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.04)
 +
}
 +
 +
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)
 +
{
 +
    .page--applemusic-gui figure.sketch-preview
 +
    {
 +
        background: url("../images/sketch_screen_01@2x.jpg") no-repeat center;
 +
        background-size: 980px 620px
 +
    }
 +
}
 +
 +
@media (max-width: 960px)
 +
{
 +
    .page--applemusic-gui figure.sketch-preview
 +
    {
 +
        background-size: contain;
 +
        width: 100%
 +
    }
 +
}
 +
 +
@media (max-width: 840px)
 +
{
 +
    .page--applemusic-gui figure.sketch-preview
 +
    {
 +
        height: 485px
 +
    }
 +
}
 +
 +
@media (max-width: 600px)
 +
{
 +
    .page--applemusic-gui figure.sketch-preview
 +
    {
 +
        height: 336px;
 +
        margin-top: 64px
 +
    }
 +
}
 +
 +
@media (max-width: 480px)
 +
{
 +
    .page--applemusic-gui figure.sketch-preview
 +
    {
 +
        height: 280px
 +
    }
 +
}
 +
 +
@media (max-width: 360px)
 +
{
 +
    .page--applemusic-gui figure.sketch-preview
 +
    {
 +
        height: 210px;
 +
        margin-top: 48px
 +
    }
 +
}
 +
 +
.page--applemusic-gui #slides
 +
{
 +
    width: 930px;
 +
    height: 532px;
 +
    padding: 39px 121px 62px 119px;
 +
    background: url("../images/macbook_mockup.jpg") no-repeat center
 +
}
 +
 +
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)
 +
{
 +
    .page--applemusic-gui #slides
 +
    {
 +
        background: url("../images/macbook_mockup@2x.jpg") no-repeat center;
 +
        background-size: 930px 532px
 +
    }
 +
}
 +
 +
@media (max-width: 960px)
 +
{
 +
    .page--applemusic-gui #slides
 +
    {
 +
        width: 744px;
 +
        height: 425.6px;
 +
        padding: 31px 96px 34px 94px;
 +
        background: url("../images/macbook_mockup.jpg") no-repeat center
 +
    }
 +
}
 +
 +
@media screen and (max-width: 960px) and (-webkit-min-device-pixel-ratio: 2), screen and (max-width: 960px) and (min--moz-device-pixel-ratio: 2), screen and (max-width: 960px) and (-moz-min-device-pixel-ratio: 2), screen and (max-width: 960px) and (min-device-pixel-ratio: 2), screen and (max-width: 960px) and (min-resolution: 192dpi), screen and (max-width: 960px) and (min-resolution: 2dppx)
 +
{
 +
    .page--applemusic-gui #slides
 +
    {
 +
        background: url("../images/macbook_mockup@2x.jpg") no-repeat center;
 +
        background-size: 744px 425.6px
 +
    }
 +
}
 +
 +
@media (max-width: 960px)
 +
{
 +
    .page--applemusic-gui #slides #overflow,.page--applemusic-gui #slides img
 +
    {
 +
        width: 553px
 +
    }
 +
}
 +
 +
@media (max-width: 840px)
 +
{
 +
    .page--applemusic-gui #slides
 +
    {
 +
        width: 558px;
 +
        height: 319.2px;
 +
        padding: 24px 73px 26px 71px;
 +
        background: url("../images/macbook_mockup.jpg") no-repeat center
 +
    }
 +
}
 +
 +
@media screen and (max-width: 840px) and (-webkit-min-device-pixel-ratio: 2), screen and (max-width: 840px) and (min--moz-device-pixel-ratio: 2), screen and (max-width: 840px) and (-moz-min-device-pixel-ratio: 2), screen and (max-width: 840px) and (min-device-pixel-ratio: 2), screen and (max-width: 840px) and (min-resolution: 192dpi), screen and (max-width: 840px) and (min-resolution: 2dppx)
 +
{
 +
    .page--applemusic-gui #slides
 +
    {
 +
        background: url("../images/macbook_mockup@2x.jpg") no-repeat center;
 +
        background-size: 558px 319.2px
 +
    }
 +
}
 +
 +
@media (max-width: 840px)
 +
{
 +
    .page--applemusic-gui #slides #overflow,.page--applemusic-gui #slides img
 +
    {
 +
        width: 414px
 +
    }
 +
}
 +
 +
@media (max-width: 600px)
 +
{
 +
    .page--applemusic-gui #slides
 +
    {
 +
        width: 418.5px;
 +
        height: 239.4px;
 +
        padding: 17px 54px 18px 53px;
 +
        background: url("../images/macbook_mockup.jpg") no-repeat center
 +
    }
 +
}
 +
 +
@media screen and (max-width: 600px) and (-webkit-min-device-pixel-ratio: 2), screen and (max-width: 600px) and (min--moz-device-pixel-ratio: 2), screen and (max-width: 600px) and (-moz-min-device-pixel-ratio: 2), screen and (max-width: 600px) and (min-device-pixel-ratio: 2), screen and (max-width: 600px) and (min-resolution: 192dpi), screen and (max-width: 600px) and (min-resolution: 2dppx)
 +
{
 +
    .page--applemusic-gui #slides
 +
    {
 +
        background: url("../images/macbook_mockup@2x.jpg") no-repeat center;
 +
        background-size: 418.5px 239.4px
 +
    }
 +
}
 +
 +
@media (max-width: 600px)
 +
{
 +
    .page--applemusic-gui #slides #overflow,.page--applemusic-gui #slides img
 +
    {
 +
        width: 310.5px
 +
    }
 +
}
 +
 +
@media (max-width: 480px)
 +
{
 +
    .page--applemusic-gui #slides
 +
    {
 +
        width: 353.4px;
 +
        height: 202.16px;
 +
        padding: 15px 46px 16px 45px;
 +
        background: url("../images/macbook_mockup.jpg") no-repeat center
 +
    }
 +
}
 +
 +
@media screen and (max-width: 480px) and (-webkit-min-device-pixel-ratio: 2), screen and (max-width: 480px) and (min--moz-device-pixel-ratio: 2), screen and (max-width: 480px) and (-moz-min-device-pixel-ratio: 2), screen and (max-width: 480px) and (min-device-pixel-ratio: 2), screen and (max-width: 480px) and (min-resolution: 192dpi), screen and (max-width: 480px) and (min-resolution: 2dppx)
 +
{
 +
    .page--applemusic-gui #slides
 +
    {
 +
        background: url("../images/macbook_mockup@2x.jpg") no-repeat center;
 +
        background-size: 353.4px 202.16px
 +
    }
 +
}
 +
 +
@media (max-width: 480px)
 +
{
 +
    .page--applemusic-gui #slides #overflow,.page--applemusic-gui #slides img
 +
    {
 +
        width: 262.2px
 +
    }
 +
}
 +
 +
@media (max-width: 360px)
 +
{
 +
    .page--applemusic-gui #slides
 +
    {
 +
        width: 279px;
 +
        height: 159.6px;
 +
        padding: 12px 36px 13px 35px;
 +
        background: url("../images/macbook_mockup.jpg") no-repeat center
 +
    }
 +
}
 +
 +
@media screen and (max-width: 360px) and (-webkit-min-device-pixel-ratio: 2), screen and (max-width: 360px) and (min--moz-device-pixel-ratio: 2), screen and (max-width: 360px) and (-moz-min-device-pixel-ratio: 2), screen and (max-width: 360px) and (min-device-pixel-ratio: 2), screen and (max-width: 360px) and (min-resolution: 192dpi), screen and (max-width: 360px) and (min-resolution: 2dppx)
 +
{
 +
    .page--applemusic-gui #slides
 +
    {
 +
        background: url("../images/macbook_mockup@2x.jpg") no-repeat center;
 +
        background-size: 279px 159.6px
 +
    }
 +
}
 +
 +
@media (max-width: 360px)
 +
{
 +
    .page--applemusic-gui #slides #overflow,.page--applemusic-gui #slides img
 +
    {
 +
        width: 207px
 +
    }
 +
}
  
 
</style>
 
</style>

Revision as of 08:13, 15 August 2017

<!DOCTYPE html>