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" 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:15, 15 August 2017

<!DOCTYPE html>