/*
Theme Name: The Perception
Author: 10oz
Author URI: https://10oz.org/
Description: The Perception
Version: 1.0

*/

* { -webkit-tap-highlight-color: rgba(0,0,0,0); }
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, sub, sup, var,
b, u, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, menu, nav, section {
    display: block;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
* {
    outline: none;
    box-sizing:border-box;
}

.clear {
    clear:both;
}

a, a::before, a::after {
    -webkit-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
}

.tb {
    display: table;
    width: 100%;
    height: 100%;
}
.td {
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: middle;
}

.btn {
    display: block;
    width: 120px;
    padding: 10px;
    margin: 0 auto;
    font-family: 'robotoregular';
    font-size: 11px;
    line-height: 11px;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    border: 1px solid #fff;
}
.btn:hover {
    background: #049b87;
    border-color: #049b87;
}

.btn.disabled {
    opacity: .3;
    cursor: default;
    pointer-events: none;
}


/**/

html, body {
    height: 100%;
}

body {
    position: relative;
    font-family: 'robotolight', arial, sans-serif;
    font-size: 18px;
    line-height: 1;
    color: #222;
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

.container {
    padding: 36px;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
}

.wrapper {
    height: 100%;
    min-height: 500px;
    position: relative;
    overflow-y: scroll;
    color: #fff;
    overflow: hidden;
    background: #999;
}

.animated-bg,
.animated-bg2 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
}

.animated-bg2 {
    z-index: 999999;
    -webkit-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
.ready .animated-bg2 {
    opacity: 0;
    visibility: hidden;
    -webkit-transition-delay: .2s;
    -ms-transition-delay: .2s;
    transition-delay: .2s;
}

.content {
    height: 100%;
    max-width: 838px;
    margin-left: 265px;
    margin-right: 60px;
    position: relative;
}

.text {
    padding-top: 120px;
    padding-top: 14.5vh;
    position: relative;
    z-index: 1;
}

h1 {
    font-family: 'robotobold';
    font-size: 106px;
    letter-spacing: -3.5px;
    text-transform: uppercase;
    text-indent: -5px;
    color: #f1f2f2;
}

.subtitle {
    margin-bottom: 40px;
    font-family: 'robotobold';
    font-size: 26px;
    letter-spacing: -1px;
}
.subtitle span {
    font-size: 15px;
    letter-spacing: 0;
}

p {
    margin-bottom: 25px;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 1px;
    /*text-align: justify;*/
}

.mobile-only {
    display: none;
}

.hidden {
    display: none;
}





/* intro */

#intro {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
}
#intro::after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
}

body.ready #intro {
    -webkit-transition: all .7s ease;
    -ms-transition: all .7s ease;
    transition: all .7s ease;
    opacity: 0;
    visibility: hidden;
}

.q1 {
    background: #bdbec0;
    background: -moz-linear-gradient(-35deg, #bdbec0 0%, #26c9d2 100%);
    background: -webkit-linear-gradient(-35deg, #bdbec0 0%,#26c9d2 100%);
    background: linear-gradient(125deg, #bdbec0 0%,#26c9d2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bdbec0', endColorstr='#26c9d2',GradientType=1 );
}

.q2 {
    background: #f7c39b;
    background: -moz-linear-gradient(-35deg, #f7c39b 0%, #f05c2c 100%);
    background: -webkit-linear-gradient(-35deg, #f7c39b 0%,#f05c2c 100%);
    background: linear-gradient(125deg, #f7c39b 0%,#f05c2c 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7c39b', endColorstr='#f05c2c',GradientType=1 );
}

.q3 {
    background: #ed008c;
    background: -moz-linear-gradient(-35deg, #ed008c 0%, #32c7d0 100%);
    background: -webkit-linear-gradient(-35deg, #ed008c 0%,#32c7d0 100%);
    background: linear-gradient(125deg, #ed008c 0%,#32c7d0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed008c', endColorstr='#32c7d0',GradientType=1 );
}

#intro .quote {
    display: none;
    max-width: 890px;
    padding: 0 20px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    font-family: 'robotobold';
    font-size: 33px;
    line-height: 48px;
    color: #000;
    color: rgba(0,0,0,.2);
}

#intro.q1 .quote1 {
    display: block;
}
#intro.q2 .quote2 {
    display: block;
}
#intro.q3 .quote3 {
    display: block;
}

.intro-counter {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 0;
    font-family: 'robotolight';
    font-size: 70vh;
    line-height: 100vh;
    letter-spacing: -4vh;
    text-align: center;
    color: #9AE1E5;
    opacity: .3;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.intro-main {
    -webkit-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.complete .intro-main {
    opacity: 0;
    visibility: hidden;
}

.intro-close {
    width: 80px;
    height: 80px;
    position: absolute;
    top: 50px;
    right: 50px;
    top: 3.5vw;
    right: 3.5vw;
    z-index: 9;
    background: url(/wp-content/themes/perception/images/intro-close-btn.png) center no-repeat;
}
.intro-close:hover {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.intro-tagline {
    position: absolute;
    bottom: 120px;
    right: 200px;
    bottom: 9vw;
    right: 15vw;
}

.tagline-box {
    padding-top: 25px;
    overflow: hidden;
    position: relative;
}
.tagline-box span {
    display: block;
    padding-right: 35px;
    opacity: 0;
    font-family: 'robotobold';
    font-size: 20px;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
    -webkit-transform: translateX(500px);
    -ms-transform: translateX(500px);
    transform: translateX(500px);
    -webkit-transition: all .5s ease .5s;
    -ms-transition: all .5s ease .5s;
    transition: all .5s ease .5s;
}
.complete .tagline-box span {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

.intro-tagline .tree {
    top: 0;
    right: -15px;
}



/* animated logo */

.logo-container {
    width: 260px;
    height: 105px;
    position: absolute;
    top: 36px;
    left: 36px;
    z-index: 99;
    cursor: pointer;
}

.logo-holder {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

.logo {
    display: block;
    width: 182px;
    position: absolute;
    top: 47px;
    left: 60px;
    z-index: 9;
    -webkit-transition: all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1.5s;
    -ms-transition: all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1.5s;
    transition: all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1.5s;
}
.logo img {
    display: block;
    max-width: 100%;
    height: auto;
}

.logo-gem {
    position: absolute;
    top: -11px;
    left: 0;
    -webkit-transform: translateY(-150px);
    -ms-transform: translateY(-150px);
    transform: translateY(-150px);
    -webkit-transition: all .3s ease 1.2s;
    -ms-transition: all .3s ease 1.2s;
    transition: all .3s ease 1.2s;
}
.logo-gem img {
    display: block;
    max-width: 38px;
    position: absolute;
    top: 0;
    left: 0;
}
.logo-gem .gem2, .logo-gem .gem3 {
    opacity: 0;
}

.logo-gem .gem2 {
    -webkit-transition: all .7s linear .5s;
    -ms-transition: all .7s linear .5s;
    transition: all .7s linear .5s;
}
.logo-gem .gem3 {
    -webkit-transition: all 1s linear 1s;
    -ms-transition: all 1s linear 1s;
    transition: all 1s linear 1s;
}

.logo-tagline {
    position: absolute;
    top: 28px;
    left: 20px;
    padding-left: 35px;
    opacity: 0;
    overflow: hidden;
    font-family: 'robotobold';
    font-size: 14px;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    text-indent: -500px;
    color: #fff;
    -webkit-transition: all .3s ease .8s;
    -ms-transition: all .3s ease .8s;
    transition: all .3s ease .8s;
}

.logo-container:hover .logo {
    -webkit-transform: translateX(-250px);
    -ms-transform: translateX(-250px);
    transform: translateX(-250px);
    -webkit-transition: all .4s ease;
    -ms-transition: all .4s ease;
    transition: all .4s ease;
}

.logo-container:hover .logo-gem {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: all .3s ease .5s;
    -ms-transition: all .3s ease .5s;
    transition: all .3s ease .5s;
}

.logo-container:hover .logo-gem .gem2,
.logo-container:hover .logo-gem .gem3 {
    opacity: 1;
}

.logo-container:hover .logo-tagline {
    opacity: 1;
    text-indent: 0;
}


.overlay {
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
    z-index: -1;
    visibility: hidden;
    opacity: 0;
    background: rgba(0,0,0,.95);
    -webkit-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
    -webkit-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
}
.overlay.opened {
    visibility: visible;
    opacity: 1;
    z-index: 999;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}


/* MAIN NAV */

.btn-menu {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 9;
    margin: 0;
    padding: 0;
    width: 57px;
    height: 50px;
}
.btn-menu i {
    display: block;
    width: 28px;
    position: absolute;
    bottom: 8px;
    left: 0;
    height: 4px;
    background: #fff;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
}
.btn-menu i::before,
.btn-menu i::after {
    position: absolute;
    display: block;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    content: "";
    -webkit-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
}
.btn-menu i::before {
    top: -8px;
}
.btn-menu i::after {
    bottom: -8px;
}
.btn-menu.opened {
    opacity: 0;
}
.btn-menu:hover i,
.btn-menu:hover i::before,
.btn-menu:hover i::after {
    background: #26cad3;
}

.nav {
    text-align: center;
    text-transform: uppercase;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.nav ul {
    font-family: 'robotobold';
    font-size: 46px;
    line-height: 56px;
    letter-spacing: -1px;
}

.nav ul li {
    margin-bottom: 5px;
    opacity: 0;
}
.nav.opened ul li {
    -webkit-transform: translate(-10px,-30px);
    -ms-transform: translate(-10px,-30px);
    transform: translate(-10px,-30px);
    -webkit-transition: all .9s ease;
    -ms-transition: all .9s ease;
    transition: all .9s ease;
}
.nav ul li.animate {
    opacity: 1;
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);
}

.nav ul a {
    text-decoration: none;
    color: #a7a9ac;
}
.nav ul a:hover {
    color: #26cad3;
}
.nav ul span {
    padding: 0 35px;
    position: relative;
}

.nav ul .current_page_item a {
    color: #414042;
}
.nav ul .current_page_item span::after {
    content: "";
    display: block;
    height: 7px;
    position: absolute;
    top: 52%;
    left: 0;
    right: 0;
    background: #26cad3;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.socialize {
    margin-top: 8%;
    opacity: 0;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);
}
.nav.opened .socialize {
    opacity: 1;
    -webkit-transition: all .8s ease 1s;
    -ms-transition: all .8s ease 1s;
    transition: all .8s ease 1s;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}

.soc-title {
    margin-bottom: 20px;
    font-size: 21px;
    text-transform: uppercase;
    color: #808285;
}
.socialize a {
    display: inline-block;
    margin: 0 12px;
    position: relative;
    text-decoration: none;
}
.socialize a img {
    display: block;
}
.socialize a img:nth-child(2) {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
}
.socialize a:hover img:nth-child(2) {
    opacity: 1;
}


.btn-close {
    display: block;
    width: 80px;
    height: 70px;
    position: absolute;
    top: 0;
    right: 0;
}
.btn-close::before {
    display: block;
    content: "";
    width: 30px;
    height: 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    background: #a7a9ac;
    -webkit-transform: translate(-50%,-50%) rotate(45deg);
    -ms-transform: translate(-50%,-50%) rotate(45deg);
    transform: translate(-50%,-50%) rotate(45deg);
    -webkit-transition: all .3s linear;
    -ms-transition: all .3s linear;
    transition: all .3s linear;
}
.btn-close::after {
    display: block;
    content: "";
    width: 30px;
    height: 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    background: #a7a9ac;
    -webkit-transform: translate(-50%,-50%) rotate(-45deg);
    -ms-transform: translate(-50%,-50%) rotate(-45deg);
    transform: translate(-50%,-50%) rotate(-45deg);
    -webkit-transition: all .3s linear;
    -ms-transition: all .3s linear;
    transition: all .3s linear;
}

.btn-close:hover::before,
.btn-close:hover::after {
    background: #26cad3;
}



/* prev next nav */

.page-nav {
    position: absolute;
    left: 102px;
    top: 50%;
    z-index: 99;
    -webkit-transform: translateY(-60%);
    -ms-transform: translateY(-60%);
    transform: translateY(-60%);
}

.current-page {
    margin: 3px 0;
    font-family: 'helveticaneuemedium';
    font-size: 68px;
    color: #26cad3;
}
.current-page::before {
    content: "/";
}

.btn-up, .btn-down {
    display: block;
    padding: 13px 0;
    text-align: center;
    font-size: 0;
    line-height: 0;
    position: relative;
}
.btn-up::after {
    display: inline-block;
    content: "";
    width: 0;
    height: 0;
    border-left: 6px solid transparent !important;
    border-right: 6px solid transparent !important;
    border-bottom: 8px solid #fff;
}
.btn-down::after {
    display: inline-block;
    content: "";
    width: 0;
    height: 0;
    border-left: 6px solid transparent !important;
    border-right: 6px solid transparent !important;
    border-top: 8px solid #fff;
}
.btn-up:hover::after,
.btn-down:hover::after {
    border-color: #26cad3;
}

.page-nav .disabled {
    opacity: .15;
    cursor: default;
    pointer-events: none;
}






/* FRONT PAGE */

#front .wrapper, #front .animated-bg2 {
    background: rgb(180,180,179);
    background: -moz-linear-gradient(-55deg, #bdbec0 0%, #3fc2cb 100%);
    background: -webkit-linear-gradient(-55deg, #bdbec0 0%, #3fc2cb 100%);
    background: linear-gradient(125deg, #bdbec0 0%, #3fc2cb 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bdbec0', endColorstr='#3fc2cb',GradientType=1 );
}

#front h1 {
    margin-bottom: 60px;
}

/* TREES */
.trees {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
}
.trees, .trees * {
    pointer-events: none;
}

.tree {
    width: 50px;
    height: 94px;
    position: absolute;
}
.tree img {
    display: block;
    max-width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
}

.tree i {
    display: block;
    width: 120px;
    height: 100px;
    position: absolute;
    top: 90%;
    left: 40%;
    font-size: 0;
    background: url(/wp-content/themes/perception/images/tree-shadow.png) 0 0 no-repeat;
    background-size: contain;
    -webkit-transition: all .5s linear;
    -ms-transition: all .5s linear;
    transition: all .5s linear;
    -webkit-transform-origin: 5px 3px;
    -ms-transform-origin: 5px 3px;
    transform-origin: 5px 3px;
}

.tree-md {
    width: 44px;
    height: 82px;
}
.tree-md i {
    width: 105px;
}

.tree-md2 {
    width: 40px;
    height: 75px;
}
.tree-md2 i {
    width: 100px;
}

.tree-sm {
    width: 32px;
    height: 60px;
}
.tree-sm i {
    width: 70px;
}

.tree-sm2 {
    width: 26px;
    height: 49px;
}
.tree-sm2 i {
    width: 64px;
}

.tree_1 { left: .5%; top: 11%; }
.tree_2 { left: 22%; top: .3%; }
.tree_3 { left: 40.3%; top: 5.2%; }
.tree_4 { left: 90%; top: 12%; }
.tree_5 { left: 50.5%; top: 66.2%; }
.tree_6 { left: 64%; top: 9%; }
.tree_7 { left: 13.5%; top: 60%; }
.tree_8 { left: 88%; top: 40%; }
.tree_9 { left: 8.5%; top: 76%; }
.tree_10 { left: 38%; top: 77%; }
.tree_11 { left: 75%; top: 77%; }
.tree_12 { left: 79%; top: 74.5%; }


/* PLANET */

.planet {
    display: block;
    width: 300px;
    height: 300px;
    position: absolute;
    right: -20px;
    bottom: 30px;
    z-index: 9;
    -webkit-transition: all 3s ease;
    -ms-transition: all 3s ease;
    transition: all 3s ease;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
}
.loaded .planet {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
.planet:hover {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

.planet img {
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    pointer-events: none;
}

.planet-globe {
    -webkit-animation: cwRotation 60s linear infinite;
    animation: cwRotation 60s linear infinite;
}
.clouds-back {
    -webkit-animation: cwRotation 120s linear infinite;
    animation: cwRotation 120s linear infinite;
}
.clouds-side {
    -webkit-animation: cwRotation 70s linear infinite;
    animation: cwRotation 70s linear infinite;
}
.clouds-top {
    -webkit-animation: ccwRotation 170s linear infinite;
    animation: ccwRotation 170s linear infinite;
}

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

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

body.unload .planet {
    opacity: 0;
    -webkit-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    -webkit-transform: scale(.5);
    -ms-transform: scale(.5);
    transform: scale(.5);
}


/* EAGLE */

.eagle {
    width: 120px;
    height: 120px;
    position: absolute;
    top: 10%;
    left: -120px;
    z-index: 9;
    background: url(/wp-content/themes/perception/images/eagle.png) center 0 no-repeat;
    background-size: contain;
    pointer-events: none;
}
body.ready .eagle {
    -webkit-animation: eagleFly 10s linear;
    animation: eagleFly 10s linear;
}

.eagle-shadow {
    width: 52px;
    height: 50px;
    position: absolute;
    top: 20%;
    left: -120px;
    z-index: 0;
    background: url(/wp-content/themes/perception/images/eagle-shadow.png) center 0 no-repeat;
    background-size: contain;
    pointer-events: none;
}
body.ready .eagle-shadow {
    -webkit-animation: eagleShadowFly 10.3s linear;
    animation: eagleShadowFly 10.3s linear;
}

@-webkit-keyframes eagleFly {
    0%{ -webkit-transform: translate(0,0); }
    100%{ -webkit-transform: translate(120vw,53vh) scale(1.5) rotate(-10deg); }
}
@keyframes eagleFly {
    0%{ transform: translate(0,0); }
    100%{ transform: translate(120vw,53vh) scale(1.5) rotate(-10deg); }
}

@-webkit-keyframes eagleShadowFly {
    0%{ -webkit-transform: translate(0,0); }
    60%{ opacity: 1; }
    100%{ -webkit-transform: translate(120vw,80vh) scale(.8); opacity: 0; }
}
@keyframes eagleShadowFly {
    0%{ transform: translate(0,0); }
    60%{ opacity: 1; }
    100%{ transform: translate(120vw,80vh) scale(.8); opacity: 0; }
}



/* THE WORK */

#work .wrapper, #work .animated-bg2 {
    background: rgb(217,12,123);
    background: -moz-linear-gradient(-35deg, #ed0088 0%, #be7ea8 45%, #42c0ca 100%);
    background: -webkit-linear-gradient(-35deg, #ed0088 0%, #be7ea8 45%, #42c0ca 100%);
    background: linear-gradient(125deg, #ed0088 0%, #be7ea8 45%, #42c0ca 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed0088', endColorstr='#42c0ca',GradientType=1 );
}

#work  h1 {
    margin-bottom: 70px;
}

/* work video */
.work-video {
    margin-top: 40px;
    font-family: 'robotobold';
    font-size: 12px;
    letter-spacing: .75px;
    text-align: center;
}

.work-video .btn {
    display: inline-block;
    margin: 0 10px 15px;
}

/* video popup */
.video-popup {
    font-size: 0;
    text-align: center;
    z-index: 0;
}
.video-popup.opened {
    z-index: 9999;
}

.video-holder {
    display: inline-block;
    width: 90%;
    max-width: 900px;
    padding: 8px;
    opacity: 0;
    background: #909493;
    -webkit-transition: opacity 1s ease .3s;
    -ms-transition: opacity 1s ease .3s;
    transition: opacity 1s ease .3s;
}
.video-popup.opened .video-holder {
    opacity: 1;
}

.video-popup p {
    padding: 22px 25vw 0;
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
    color: #808285;
}

/* work popup */
.work-popup {
    text-align: center;
}

.work-holder {
    margin: 0 auto;
    position: absolute;
    top: 70px;
    bottom: 50px;
    left: 77px;
    right: 77px;
    background: #fff;
}

.work-slider, .work-slide {
    width: 100%;
    height: 100%;
}

.slide-inner {
    height: 100%;
    padding: 25px 25px 55px;
    position: relative;
    overflow: scroll;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

.work-title {
    margin-bottom: 20px;
    font-size: 20px;
    line-height: 1.2;
    text-transform: uppercase;
    color: #414042;
}

.work-img img {
    max-width: 100%;
    margin: 0 auto;
}

.btn-visit {
    display: block;
    padding-left: 35px;
    padding-top: 19px;
    position: absolute;
    right: 27px;
    bottom: 20px;
    opacity: 0;
    font-size: 9px;
    line-height: 9px;
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    color: #231f20;
    background: url(/wp-content/themes/perception/images/btn-visit.png) 0 0 no-repeat;
}
.btn-visit:hover {
    text-decoration: underline;
    color: #000;
}
.cycle-slide-active .btn-visit {
    opacity: 1;
    -webkit-transition: all 1s linear .5s;
    -ms-transition: all 1s linear .5s;
    transition: all 1s linear .5s;
}

.work-slider-nav {
    position: absolute;
    width: 100%;
    bottom: -22px;
    z-index: 100;
}
.btn-work-prev, .btn-work-next {
    display: inline-block;
    width: 75px;
    height: 42px;
    margin: 0 2px;
    background: #58585a center no-repeat;
}
.btn-work-prev {
    background-image: url(/wp-content/themes/perception/images/btn-prev.png);
}
.btn-work-prev:hover {
    background-position: -5px 0;
}
.btn-work-next {
    background-image: url(/wp-content/themes/perception/images/btn-next.png);
}
.btn-work-next:hover {
    background-position: 5px 0;
}

/* clients */
.clients {
    margin-top: 55px;
    text-align: center;
    opacity: 0;
    -webkit-transition: all 2s ease;
    -ms-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);
}
.loaded .clients {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}

.clients img {
    max-width: 100%;
    margin: 0 auto;
    opacity: .35;
}

.work-clouds img {
    position: absolute;
    pointer-events: none;
}
.work-cloud1 {
    top: 7%;
    left: 70%;
    -webkit-animation: workCloud1 65s ease infinite;
    animation: workCloud1 65s ease infinite;
}
.work-cloud2 {
    top: 20%;
    left: 78%;
    -webkit-animation: workCloud2 95s ease infinite;
    animation: workCloud2 95s ease infinite;
}
.work-cloud3 {
    top: 25%;
    left: 65%;
    -webkit-animation: workCloud3 40s ease infinite;
    animation: workCloud3 40s ease infinite;
}

@-webkit-keyframes workCloud1 {
    0%{ -webkit-transform: translate(0,0); }
    50%{ -webkit-transform: translate(-230px,0); }
    100%{ -webkit-transform: translate(0,0); }
}
@keyframes workCloud1 {
    0%{ transform: translate(0,0); }
    50%{ transform: translate(-230px,0); }
    100%{ transform: translate(0,0); }
}

@-webkit-keyframes workCloud2 {
    0%{ -webkit-transform: translate(0,0); }
    50%{ -webkit-transform: translate(-130px,0); }
    100%{ -webkit-transform: translate(0,0); }
}
@keyframes workCloud2 {
    0%{ transform: translate(0,0); }
    50%{ transform: translate(-130px,0); }
    100%{ transform: translate(0,0); }
}

@-webkit-keyframes workCloud3 {
    0%{ -webkit-transform: translate(0,0); }
    50%{ -webkit-transform: translate(-50px,0); }
    100%{ -webkit-transform: translate(0,0); }
}
@keyframes workCloud3 {
    0%{ transform: translate(0,0); }
    50%{ transform: translate(-50px,0); }
    100%{ transform: translate(0,0); }
}


#work h1 span {
    display: inline-block;
    position: relative;
}
.bird {
    position: absolute;
    top: -41px;
    right: -28px;
    pointer-events: none;
    -webkit-animation: bird 20s ease infinite;
    animation: bird 20s ease infinite;
}

@-webkit-keyframes bird {
    0%{ -webkit-transform: translate(0,0); }
    10%{ -webkit-transform: translate(0,0); }
    11%{ -webkit-transform: translate(-39px,0); }
    25%{ -webkit-transform: translate(-39px,0); }
    26%{ -webkit-transform: translate(-106px,0); }
    35%{ -webkit-transform: translate(-106px,0); }
    36% { -webkit-transform: translate(-170px,0) scaleX(-1); }
    56% { -webkit-transform: translate(-170px,0) scaleX(-1); }
    57% { -webkit-transform: translate(-120px,0) scaleX(-1); }
    58% { -webkit-transform: translate(-56px,0) scaleX(-1); }
    99% { -webkit-transform: translate(-56px,0) scaleX(-1); }
    100%{ -webkit-transform: translate(0,0); }
}
@keyframes bird {
    0%{ transform: translate(0,0); }
    10%{ transform: translate(0,0); }
    11%{ transform: translate(-39px,0); }
    25%{ transform: translate(-39px,0); }
    26%{ transform: translate(-106px,0); }
    35%{ transform: translate(-106px,0); }
    36% { transform: translate(-170px,0) scaleX(-1); }
    56% { transform: translate(-170px,0) scaleX(-1); }
    57% { transform: translate(-120px,0) scaleX(-1); }
    58% { transform: translate(-56px,0) scaleX(-1); }
    99% { transform: translate(-56px,0) scaleX(-1); }
    100%{ transform: translate(0,0); }
}


.island {
    width: 240px;
    height: 130px;
    position: absolute;
    left: 35px;
    bottom: 23px;
    pointer-events: none;
    -webkit-transition: all 2s ease;
    -ms-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
}
.island img {
    display: block;
    position: absolute;
}

.loaded .island {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.island-land {
    left: 0;
    bottom: 0;
}
.island-clouds-back {
    left: 55px;
    top: 25px;
    -webkit-animation: cloudBack 65s ease infinite;
    animation: cloudBack 65s ease infinite;
}
.island-clouds-back2 {
    right: 30px;
    top: 55px;
    -webkit-animation: cloudBack2 25s ease infinite;
    animation: cloudBack2 25s ease infinite;
}
.island-cloud-front {
    left: 150px;
    top: 25px;
    -webkit-animation: cloudFront 95s ease infinite;
    animation: cloudFront 95s ease infinite;
}
.island-cloud-front2 {
    left: 10px;
    top: 50px;
    -webkit-animation: cloudFront2 35s ease infinite;
    animation: cloudFront2 35s ease infinite;
}
.island-cloud-top {
    left: 85px;
    top: 0;
    -webkit-animation: cloudTop 45s ease infinite;
    animation: cloudTop 45s ease infinite;
}

@-webkit-keyframes cloudFront {
    0%{ -webkit-transform: translate(0,0); }
    50%{ -webkit-transform: translate(-130px,0); }
    100%{ -webkit-transform: translate(0,0); }
}
@keyframes cloudFront {
    0%{ transform: translate(0,0); }
    50%{ transform: translate(-130px,0); }
    100%{ transform: translate(0,0); }
}

@-webkit-keyframes cloudFront2 {
    0%{ -webkit-transform: translate(0,0); }
    50%{ -webkit-transform: translate(30px,0); }
    100%{ -webkit-transform: translate(0,0); }
}
@keyframes cloudFront2 {
    0%{ transform: translate(0,0); }
    50%{ transform: translate(30px,0); }
    100%{ transform: translate(0,0); }
}

@-webkit-keyframes cloudTop {
    0%{ -webkit-transform: translate(0,0); }
    50%{ -webkit-transform: translate(20px,0); }
    100%{ -webkit-transform: translate(0,0); }
}
@keyframes cloudTop {
    0%{ transform: translate(0,0); }
    50%{ transform: translate(20px,0); }
    100%{ transform: translate(0,0); }
}

@-webkit-keyframes cloudBack {
    0%{ -webkit-transform: translate(0,0); }
    50%{ -webkit-transform: translate(80px,0); }
    100%{ -webkit-transform: translate(0,0); }
}
@keyframes cloudBack {
    0%{ transform: translate(0,0); }
    50%{ transform: translate(80px,0); }
    100%{ transform: translate(0,0); }
}

@-webkit-keyframes cloudBack2 {
    0%{ -webkit-transform: translate(0,0); }
    50%{ -webkit-transform: translate(-20px,0); }
    100%{ -webkit-transform: translate(0,0); }
}
@keyframes cloudBack2 {
    0%{ transform: translate(0,0); }
    50%{ transform: translate(-20px,0); }
    100%{ transform: translate(0,0); }
}

body.unload .island {
    opacity: 0;
    -webkit-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    -webkit-transform: scale(.5);
    -ms-transform: scale(.5);
    transform: scale(.5);
}

.btn-prev, .btn-next {
    display: block;
    padding: 30px;
    position: absolute;
    top: 50%;
    z-index: 999;
    text-align: center;
    font-size: 0;
    line-height: 0;
}
.btn-prev {
    left: 37px;
}
.btn-next {
    right: 30px;
}
.btn-prev::after {
    display: inline-block;
    content: "";
    width: 0;
    height: 0;
    border-top: 8px solid transparent !important;
    border-bottom: 8px solid transparent !important;
    border-right: 12px solid #26cad3;
}
.btn-next::after {
    display: inline-block;
    content: "";
    width: 0;
    height: 0;
    border-top: 8px solid transparent !important;
    border-bottom: 8px solid transparent !important;
    border-left: 12px solid #26cad3;
}
.btn-prev:hover::after,
.btn-next:hover::after {
    border-color: #fff;
}


/* WHO WE ARE */

#whoweare .wrapper, #whoweare .animated-bg2 {
    background: #c79c75;
    background: -moz-linear-gradient(-35deg, #f7c3a1 0%, #c79c75 40%, #c79c75 45%, #f05b39 100%);
    background: -webkit-linear-gradient(-35deg, #f7c3a1 0%, #c79c75 40%, #c79c75 45%, #f05b39 100%);
    background: linear-gradient(125deg, #f7c3a1 0%, #c79c75 40%, #c79c75 45%, #f05b39 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7c3a1', endColorstr='#f05b39',GradientType=1 );
}

#whoweare h1 {
    margin-bottom: 5px;
}

#whoweare .subtitle {
    font-family: 'robotolight';
}

#whoweare .subtitle strong {
    font-family: 'robotomedium';
    font-size: 17px;
    line-height: 20px;
    letter-spacing: -.6px;
    font-weight: normal;
}

#whoweare .eagle {
    top: 17%;
    left: auto;
    right: -120px;
    pointer-events: none;
}
#whoweare.ready .eagle {
    -webkit-animation: whoweareEagle 10s linear;
    animation: whoweareEagle 10s linear;
}
#whoweare .eagle-shadow {
    width: 52px;
    height: 50px;
    top: 25%;
    left: auto;
    right: -120px;

}
#whoweare.ready .eagle-shadow {
    -webkit-animation: whoweareEagleShadow 10.3s linear;
    animation: whoweareEagleShadow 10.3s linear;
}

@-webkit-keyframes whoweareEagle {
    0%{ -webkit-transform: translate(0,0) scale(-1,1) rotate(0) }
    100%{ -webkit-transform: translate(-120vw,53vh) scale(-1.5, 1.5) rotate(-10deg); }
}
@keyframes whoweareEagle {
    0%{ transform: translate(0,0) scale(-1,1) rotate(0) }
    100%{ transform: translate(-120vw,53vh) scale(-1.5, 1.5) rotate(-10deg); }
}

@-webkit-keyframes whoweareEagleShadow {
    0%{ -webkit-transform: translate(0,0) scale(-1,1); }
    60%{ opacity: 1; }
    100%{ -webkit-transform: translate(-120vw,80vh) scale(-.8,.8); opacity: 0; }
}
@keyframes whoweareEagleShadow {
    0%{ transform: translate(0,0) scale(-1,1); }
    60%{ opacity: 1; }
    100%{ transform: translate(-120vw,80vh) scale(-.8,.8); opacity: 0; }
}


.whale-box {
    width: 229px;
    height: 163px;
    position: absolute;
    right: 10%;
    bottom: -170px;
    pointer-events: none;
}
.whale {
    width: 229px;
    height: 400px;
    position: absolute;
    top: -200px;
    left: 0;
    background: url(/wp-content/themes/perception/images/whale.png) center 0 no-repeat;
    -webkit-transform-origin: 40% 90%;
    -ms-transform-origin: 40% 90%;
    transform-origin: 40% 90%;
    -webkit-animation: whaleAnimation 8s ease-out infinite;
    animation: whaleAnimation 8s ease-out infinite;
}
.whale-shadow {
    width: 80%;
    height: 400px;
    position: absolute;
    top: -180px;
    left: -160px;
    background: url(/wp-content/themes/perception/images/whale-shadow.png) 0 0 no-repeat;
    background-size: contain;
    -webkit-transform-origin: 40% 90%;
    -ms-transform-origin: 40% 90%;
    transform-origin: 40% 90%;
    -webkit-animation: whaleShadowAnimation 8s ease-out infinite;
    animation: whaleShadowAnimation 8s ease-out infinite;
}

@-webkit-keyframes whaleAnimation {
    0%,40%{ -webkit-transform: translate(0,0) rotate(90deg) }
    100%{ -webkit-transform: translate(-200px,0) rotate(-90deg); }
}
@keyframes whaleAnimation {
    0%,40%{ transform: translate(0,0) rotate(90deg) }
    100%{ transform: translate(-200px,0) rotate(-90deg); }
}

@-webkit-keyframes whaleShadowAnimation {
    0%,40%{ -webkit-transform: translate(0,0) rotate(90deg); opacity:.5; }
    100%{ -webkit-transform: translate(-50px,10px) rotate(-90deg); opacity:1.5; }
}
@keyframes whaleShadowAnimation {
    0%,40%{ transform: translate(0,0) rotate(90deg); opacity:.5; }
    100%{ transform: translate(-50px,10px) rotate(-90deg); opacity:1.5; }
}



/* WHAT WE DO */

#whatwedo .wrapper, #whatwedo .animated-bg2 {
    background: #71a98f;
    background: -moz-linear-gradient(-35deg, #ccdbd0 0%, #64aa89 42%, #045195 100%);
    background: -webkit-linear-gradient(-35deg, #ccdbd0 0%, #64aa89 42%, #045195 100%);
    background: linear-gradient(125deg, #ccdbd0 0%, #64aa89 42%, #045195 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccdbd0', endColorstr='#045195',GradientType=1 );
}

#whatwedo h1 {
    margin-bottom: 5px;
}


.services-list {
    margin-top: 10px;
    text-align: center;
}

.isles li {
    float: left;
    width: 120px;
    margin-right: 43px;
}

.isles li a {
    display: block;
    position: relative;
    text-decoration: none;
}

.isles li img {
    display: block;
    max-width: 110%;
    margin-left: -5px;
}

.isles li span {
    display: block;
    padding: 10px;
    margin: 0 auto;
    position: relative;
    font-family: 'robotomedium';
    font-size: 11px;
    line-height: 11px;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    border: 1px solid #fff;
    -webkit-transition: all .2s ease;
    -ms-transition: all .2s ease;
    transition: all .2s ease;
}

.isles li:hover a span,
.isles li.active a span {
    color: #91bba9;
    background: #049b87;
    border-color: #049b87;
}


.services-list > .isles {
    opacity: 0;
    -webkit-transition: all 2s ease;
    -ms-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-transform: translateY(50px);
    -ms-transform: translateY(50px);
    transform: translateY(50px);
}
.loaded .services-list > .isles {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}


.isle-box {
    width: 126px;
    margin: 0 auto;
    position: relative;
    pointer-events: none;
}

.serv-1 .isle-box,
.serv-3 .isle-box {
    -webkit-animation: flyingIsland1 10s ease infinite;
    animation: flyingIsland1 10s ease infinite;
}
.serv-2 .isle-box,
.serv-4 .isle-box {
    -webkit-animation: flyingIsland2 10s ease infinite;
    animation: flyingIsland2 10s ease infinite;
}

@-webkit-keyframes flyingIsland1 {
    0%,100%{ -webkit-transform: translateY(0); }
    40%{ -webkit-transform: translateY(5px); }
}
@keyframes flyingIsland1 {
    0%,100%{ transform: translateY(0); }
    40%{ transform: translateY(5px); }
}

@-webkit-keyframes flyingIsland2 {
    0%,100%{ -webkit-transform: translateY(0); }
    40%{ -webkit-transform: translateY(-5px); }
}
@keyframes flyingIsland2 {
    0%,100%{ transform: translateY(0); }
    40%{ transform: translateY(-5px); }
}

/* 1 */

.isle1 {
    position: relative;
    z-index: 1;
}

.isle1-tree {
    position: absolute;
    top: 40px;
    left: 10px;
    z-index: 2;
    -webkit-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-animation: skewTree 7s ease infinite;
    animation: skewTree 7s ease infinite;
}

@-webkit-keyframes skewTree {
    0%,100%{ -webkit-transform: skewX(7deg); }
    40%{ -webkit-transform: skewX(-5deg); }
}
@keyframes skewTree {
    0%,100%{ transform: skewX(7deg); }
    40%{ transform: skewX(-5deg); }
}

.isle1-eagle {
    width: 16px;
    position: absolute;
    top: 14px;
    left: 0px;
    -webkit-animation: isleEagle 20s ease-in-out infinite;
    animation: isleEagle 20s ease-in-out infinite;
}

@-webkit-keyframes isleEagle {
    0%,100%{ -webkit-transform: translate(0,0) scale(1) rotate(0); z-index: 2; }
    49% { z-index: 2; }
    50%{ transform: -webkit-translate(100px,20px) scale(.4) rotate(-180deg); z-index: 0; }
    90% { -webkit-transform: scale(.8); }
    99%{ z-index: 0; }
    100%{ -webkit-transform: translate(0,0) scale(1) rotate(-360deg); z-index: 0; }
}
@keyframes isleEagle {
    0%,100%{ transform: translate(0,0) scale(1) rotate(0); z-index: 2; }
    49% { z-index: 2; }
    50%{ transform: translate(100px,20px) scale(.4) rotate(-180deg); z-index: 0; }
    90% { transform: scale(.8); }
    99%{ z-index: 0; }
    100%{ transform: translate(0,0) scale(1) rotate(-360deg); z-index: 0; }
}

/* 2 */

.isle2-boat {
    position: absolute;
    top: 22px;
    left: 70px;
    -webkit-transform-origin: 50% 90%;
    -ms-transform-origin: 50% 90%;
    transform-origin: 50% 90%;
    -webkit-animation: boat 30s ease infinite;
    animation: boat 30s ease infinite;
}

@-webkit-keyframes boat {
    0%,100%{ -webkit-transform: translate(0,0) scaleX(1); }
    48%{ -webkit-transform: translate(-50px,3px) scaleX(1); }
    50%{ -webkit-transform: translate(-50px,3px) scaleX(-1); }
    98%{ -webkit-transform: translate(0,0) scaleX(-1); }
}
@keyframes boat {
    0%,100%{ transform: translate(0,0) scaleX(1); }
    48%{ transform: translate(-50px,3px) scaleX(1); }
    50%{ transform: translate(-50px,3px) scaleX(-1); }
    98%{ transform: translate(0,0) scaleX(-1); }
}

.isle2-fish-top {
    position: absolute;
    top: 77px;
    left: 80px;
    -webkit-animation: fishTop 10s ease infinite;
    animation: fishTop 10s ease infinite;
}
.isle2-fishes-bottom {
    position: absolute;
    top: 72px;
    left: 20px;
    -webkit-animation: fishesBottom 8s ease infinite;
    animation: fishesBottom 8s ease infinite;
}

@-webkit-keyframes fishTop {
    0%,100%{ -webkit-transform: translate(0,0) scaleX(1); }
    48%{ -webkit-transform: translate(-30px,5px) scaleX(1); }
    50%{ -webkit-transform: translate(-30px,5px) scaleX(-1); }
    98%{ -webkit-transform: translate(0,0) scaleX(-1); }
}
@keyframes fishTop {
    0%,100%{ transform: translate(0,0) scaleX(1); }
    48%{ transform: translate(-30px,5px) scaleX(1); }
    50%{ transform: translate(-30px,5px) scaleX(-1); }
    98%{ transform: translate(0,0) scaleX(-1); }
}

@-webkit-keyframes fishesBottom {
    0%,100%{ -webkit-transform: translate(0,0) scaleX(-1); }
    48%{ -webkit-transform: translate(30px,10px) scaleX(-1); }
    50%{ -webkit-transform: translate(30px,10px) scaleX(1); }
    98%{ -webkit-transform: translate(0,0) scaleX(1); }
}
@keyframes fishesBottom {
    0%,100%{ transform: translate(0,0) scaleX(-1); }
    48%{ transform: translate(30px,10px) scaleX(-1); }
    50%{ transform: translate(30px,10px) scaleX(1); }
    98%{ transform: translate(0,0) scaleX(1); }
}

/* 3 */

.isle3-lava {
    position: absolute;
    top: 38px;
    left: 54px;
    -webkit-animation: lava 5s ease infinite;
    animation: lava 5s ease infinite;
}

@-webkit-keyframes lava {
    0%,100%{ opacity: .1; }
    35%,60%{ opacity: 1; }
    50%{ opacity: .7; }
}
@keyframes lava {
    0%,100%{ opacity: .1; }
    35%,60%{ opacity: 1; }
    50%{ opacity: .7; }
}

.isle3-smoke1 {
    position: absolute;
    top: 25px;
    left: 56px;
    -webkit-animation: smoke1 10s ease-out infinite;
    animation: smoke1 10s ease-out infinite;
}

.isle3-smoke2 {
    position: absolute;
    top: 25px;
    left: 56px;
    -webkit-animation: smoke2 15s ease-out infinite;
    animation: smoke2 15s ease-out infinite;
}

@-webkit-keyframes smoke1 {
    0%{ -webkit-transform: translate(0,0) scale(1); opacity: 0; }
    5%, 60%{ opacity: 1; }
    100%{ -webkit-transform: translate(-50px,-10px) scale(1.5); opacity: 0; }
}
@keyframes smoke1 {
    0%{ transform: translate(0,0) scale(1); opacity: 0; }
    5%, 60%{ opacity: 1; }
    100%{ transform: translate(-50px,-10px) scale(1.5); opacity: 0; }
}

@-webkit-keyframes smoke2 {
    0%,38%{ -webkit-transform: translate(0,0) scale(1); opacity: 0; }
    40%{ opacity: 1; }
    100%{ -webkit-transform: translate(-45px,-15px) scale(1.5); opacity: 0; }
}
@keyframes smoke2 {
    0%,38%{ transform: translate(0,0) scale(1); opacity: 0; }
    40%{ opacity: 1; }
    100%{ transform: translate(-45px,-15px) scale(1.5); opacity: 0; }
}

/* 4 */

.isle4-mill1 {
    position: absolute;
    top: 3px;
    left: 14px;
    -webkit-transform-origin: 49% 53%;
    -ms-transform-origin: 49% 53%;
    transform-origin: 49% 53%;
    -webkit-animation: mill1 15s linear infinite;
    animation: mill1 15s linear infinite;
}
.isle4-mill2 {
    position: absolute;
    top: 1px;
    left: 63px;
    -webkit-transform-origin: 50% 53%;
    -ms-transform-origin: 50% 53%;
    transform-origin: 50% 53%;
    -webkit-animation: mill2 5s linear infinite;
    animation: mill2 5s linear infinite;
}
.isle4-mill3 {
    position: absolute;
    top: 5px;
    left: 76px;
    -webkit-transform-origin: 50% 53%;
    -ms-transform-origin: 50% 53%;
    transform-origin: 50% 53%;
    -webkit-animation: mill3 45s linear infinite;
    animation: mill3 45s linear infinite;
}

@-webkit-keyframes mill1 {
    0% { -webkit-transform: rotate(0) scale(.85); }
    100%{ -webkit-transform: rotate(359deg) scale(.85); }
}
@keyframes mill1 {
    0% { transform: rotate(0) scale(.85); }
    100%{ transform: rotate(359deg) scale(.85); }
}

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

@-webkit-keyframes mill3 {
    0% { -webkit-transform: rotate(0) scale(.7); }
    100%{ -webkit-transform: rotate(359deg) scale(.7); }
}
@keyframes mill3 {
    0% { transform: rotate(0) scale(.7); }
    100%{ transform: rotate(359deg) scale(.7); }
}

.isle4-crown {
    position: absolute;
    top: 25px;
    left: 92px;
    -webkit-transform-origin: 50% 90%;
    -ms-transform-origin: 50% 90%;
    transform-origin: 50% 90%;
    -webkit-animation: skewTree 5s ease infinite;
    animation: skewTree 5s ease infinite;
}
.isle4-crown2 {
    position: absolute;
    top: 37px;
    left: 12px;
    -webkit-transform-origin: 50% 90%;
    -ms-transform-origin: 50% 90%;
    transform-origin: 50% 90%;
    -webkit-animation: skewTree 5s ease infinite;
    animation: skewTree 5s ease infinite;
}


.serv-tabs {
    height: 200px;
    margin-top: 60px;
    position: relative;
}

.serv-tabs .tab {
    visibility: hidden;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}
.serv-tabs .tab.active {
    visibility: visible;
    opacity: 1;
}

.serv-tabs .tab::after {
    display: block;
    content: "";
    height: 0;
    clear: both;
}

.tab-inner {
    height: 160px;
    height: 20vh;
    max-height: 250px;
    overflow: hidden;
}

.tab h2 {
    width: 170px;
    height: 45px;
    margin-left: -50px;
    font-size: 28px;
    line-height: 24px;
    text-transform: uppercase;
    text-align: right;
    -webkit-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}
.tab.active h2 {
    margin-left: 0;
}
.tab h2::before {
    content: "/";
}

.tab-left {
    float: left;
    width: 170px;
    padding-top: 3px;
    font-size: 12px;
    line-height: 14px;
    text-align: right;
    text-transform: uppercase;
}
.tab-left ul li {
    margin-bottom: 10px;
}
.tab-left ul li:last-child {
    margin: 0;
}

.tab-right {
    height: 100%;
    margin: 0 15px 0 220px;
    letter-spacing: .5px;
    text-align: left;
}
.tab-right p {
    letter-spacing: .5px;
    text-align: left;
}
.tab-right p:last-child {
    margin-bottom: 0;
}

.mCSB_scrollTools {
    margin-top: 5px;
}

.mCSB_draggerContainer {
    overflow: hidden;
}

.mCSB_scrollTools .mCSB_draggerRail {
    width: 12px;
    background: #14477a;
    border-radius: 0;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    width: 6px;
    background: #25cbd3;
    border-radius: 0;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar::before {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    top: -3px;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-bottom: 3px solid #25cbd3;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar::after {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 3px solid #25cbd3;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar::before,
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar::after {
    -webkit-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar::before,
.mCSB_scrollTools .mCSB_dragger_onDrag .mCSB_dragger_bar::before {
    border-bottom: 3px solid #fff;
}
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar::after,
.mCSB_scrollTools .mCSB_dragger_onDrag .mCSB_dragger_bar::after {
    border-top: 3px solid #fff;
}


/* CONTACT US */

#contact .wrapper, #contact .animated-bg2 {
    background: #6d6e70;
    background: -moz-linear-gradient(-35deg, #3a3a3b 0%, #606162 45%, #968d86 70%, #f3c1a0 100%);
    background: -webkit-linear-gradient(-35deg, #3a3a3b 0%, #606162 45%, #968d86 70%, #f3c1a0 100%);
    background: linear-gradient(125deg, #3a3a3b 0%, #606162 45%, #968d86 70%, #f3c1a0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a3a3b', endColorstr='#f3c1a0',GradientType=1 );
}

#contact .text {
    padding-top: 18vh;
}

#contact h1 {
    margin-bottom: 0px;
    font-size: 50px;
    line-height: 60px;
    letter-spacing: -2px;
    text-indent: -2px;
}
#contact p {
    letter-spacing: .75px;
}

.contact-form {
    max-width: 650px;
    margin-top: 40px;
    position: relative;
}

.lfield {
    float: left;
    width: 50%;
    padding-right: 25px;
    clear: left;
}

.rfield {
    float: right;
    width: 50%;
    padding-left: 25px;
}

.ffield {
    float: none;
    width: 100%;
    padding-top: 10px;
}

.contact-form input[type='text'],
.contact-form input[type='email'],
.contact-form textarea {
    display: block;
    width: 100%;
    height: 40px;
    padding: 0 0 3px;
    margin-bottom: 22px;
    font-family: 'robotoregular', arial, sans-serif;
    font-size: 24px;
    line-height: 44px;
    color: #fff;
    background: rgba(255,255,255,.2);
    background: none;
    border: none;
    border-bottom: 1px solid #fff;
    border-radius: 0;
    -webkit-appearance: none;
}
.contact-form textarea {
    height: 28px;
    max-height: 110px;
    margin-top: 14px;
    resize: none;
    font-size: 12px;
    line-height: 1.4;
}

.contact-form input[name='website'] {
    height: 0 !important;
    padding: 0;
    margin: 0;
    visibility: hidden;
    font-size: 0;
}

.contact-form .err {
    border-color: #f00 !important;
}

.contact-form ::-webkit-input-placeholder {
    color: #fff;
}
.contact-form ::-moz-placeholder {
    color: #fff;
    opacity: 1;
}
.contact-form :-ms-input-placeholder {
    color: #fff;
}
.contact-form :-moz-placeholder {
    color: #fff;
    opacity: 1;
}
.contact-form :placeholder {
    color: #fff;
}

.contact-form input::-webkit-input-placeholder {
    font-size: 12px;
    line-height: 52px;
}
.contact-form input::-moz-placeholder {
    font-size: 12px;
    line-height: 52px;
}
.contact-form input:-ms-input-placeholder {
    font-size: 12px;
    line-height: 52px;
}
.contact-form input:-moz-placeholder {
    font-size: 12px;
    line-height: 52px;
}
.contact-form input:placeholder {
    font-size: 12px;
    line-height: 52px;
}

.contact-form .btn-submit {
    width: 198px;
    margin: 28px 0;
    font-family: 'robotobold';
    font-size: 12px;
    background-color: transparent;
}
.contact-form .btn-submit:hover {
background-color: #049b87;
}

.contact-form .btn-disabled {
    opacity: .3;
    pointer-events: none;
    cursor: default;
}

.after-submit {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}

.contact-animation {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 85px;
    z-index: 0;
    pointer-events: none;
}

.contact-animation img {
    position: absolute;
}

.contact-cloud1 {
    top: 16%;
    left: 60%;
    -webkit-animation: contactCloud1 195s ease infinite;
    animation: contactCloud1 195s ease infinite;
}
.contact-cloud2 {
    top: 52%;
    left: 83%;
    -webkit-animation: contactCloud2 185s ease infinite;
    animation: contactCloud2 185s ease infinite;
}
.contact-cloud3 {
    width: 38px;
    top: 38%;
    left: 50%;
    opacity: .8;
    -webkit-animation: contactCloud3 200s ease infinite;
    animation: contactCloud3 200s ease infinite;
}

@-webkit-keyframes contactCloud1 {
    0%{ -webkit-transform: translate(0,0); }
    50%{ -webkit-transform: translate(-430px,0); }
    100%{ -webkit-transform: translate(0,0); }
}
@keyframes contactCloud1 {
    0%{ transform: translate(0,0); }
    50%{ transform: translate(-430px,0); }
    100%{ transform: translate(0,0); }
}

@-webkit-keyframes contactCloud2 {
    0%{ -webkit-transform: translate(0,0); }
    50%{ -webkit-transform: translate(-330px,0); }
    100%{ -webkit-transform: translate(0,0); }
}
@keyframes contactCloud2 {
    0%{ transform: translate(0,0); }
    50%{ transform: translate(-330px,0); }
    100%{ transform: translate(0,0); }
}

@-webkit-keyframes contactCloud3 {
    0%{ -webkit-transform: translate(0,0); }
    50%{ -webkit-transform: translate(300px,0); }
    100%{ -webkit-transform: translate(0,0); }
}
@keyframes contactCloud3 {
    0%{ transform: translate(0,0); }
    50%{ transform: translate(300px,0); }
    100%{ transform: translate(0,0); }
}

.contact-lscape {
    width: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
    pointer-events: none;
    -webkit-transform: translate(50px,12px);
    -moz-transform: translate(50px,12px);
    -ms-transform: translate(50px,12px);
    transform: translate(50px,12px);
    -webkit-transition: all 15s ease-out;
    -moz-transition: all 15s ease-out;
    -ms-transition: all 15s ease-out;
    transition: all 15s ease-out;
}
.contact-lscape.slide-in {
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);
}


.contact-lscape img {
    display: block;
    max-width: 100%;
    height: auto;
    position: absolute;
    right: 0;
    bottom: 0;
}

.lscape-trees {
    margin-bottom: -3px;
    -webkit-transform-origin: 50% 60%;
    -ms-transform-origin: 50% 60%;
    transform-origin: 50% 60%;
    -webkit-animation: lscapeTrees 5s ease infinite;
    animation: lscapeTrees 5s ease infinite;
}

@-webkit-keyframes lscapeTrees {
    0%,80%,100%{ -webkit-transform: skewX(2deg); }
    40%{ -webkit-transform: skewX(-2deg); }
}
@keyframes lscapeTrees {
    0%,80%,100%{ transform: skewX(2deg); }
    40%{ transform: skewX(-2deg); }
}

.contact-lscape .lscape-grl {
    right: 183px;
    bottom: 14px;
}

.contact-lscape .lscape-balloon1 {
    right: 160px;
    bottom: 120px;
    -webkit-animation: lscapeBalloon1 60s ease infinite;
    animation: lscapeBalloon1 60s ease infinite;
}

.contact-lscape .lscape-balloon2 {
    right: 22px;
    bottom: 210px;
    -webkit-animation: lscapeBalloon2 40s ease infinite;
    animation: lscapeBalloon2 40s ease infinite;
}

.contact-lscape .lscape-fish {
    right: -50px;
    bottom: 110px;
    -webkit-animation: lscapeFish 30s ease infinite;
    animation: lscapeFish 30s ease infinite;
}

@-webkit-keyframes lscapeBalloon1 {
    0%,96%,100%{ -webkit-transform: translateY(0); }
    30%,35%{ -webkit-transform: translateY(-170px); }
}
@keyframes lscapeBalloon1 {
    0%,96%,100%{ transform: translateY(0); }
    30%,35%{ transform: translateY(-170px); }
}

@-webkit-keyframes lscapeBalloon2 {
    0%,96%,100%{ -webkit-transform: translateY(0); }
    30%,35%{ -webkit-transform: translateY(50px); }
}
@keyframes lscapeBalloon2 {
    0%,96%,100%{ transform: translateY(0); }
    30%,35%{ transform: translateY(50px); }
}

@-webkit-keyframes lscapeFish {
    0%,100%{ -webkit-transform: translateX(0) scaleX(1); }
    49% { -webkit-transform: translateX(-170px) scaleX(1);}
    50%{ -webkit-transform: translateX(-170px) scaleX(-1); }
    99%{ -webkit-transform: translateX(0) scaleX(-1); }
}
@keyframes lscapeFish {
    0%,100%{ transform: translateX(0) scaleX(1); }
    49% { transform: translateX(-170px) scaleX(1);}
    50%{ transform: translateX(-170px) scaleX(-1); }
    99%{ transform: translateX(0) scaleX(-1); }
}


.footer {
    padding: 8px 30px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    color: #fff;
    background: #3a3a3b url(/wp-content/themes/perception/images/logo-footer.png) center no-repeat;
}

.footer-left {
    float: left;
}

.footer .tagline {
    margin: 0;
    font-family: 'robotobold';
    font-size: 14px;
    line-height: 45px;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
}

.footer .copy {
    font-size: 11px;
    line-height: 12px;
    text-transform: uppercase;
}

.footer-right {
    float: right;
    text-align: right;
}

.footer-socialize {
    padding: 10px 0 5px;
}
.footer-socialize span {
    display: inline-block;
    margin-right: -5px;
    font-size: 14px;
    text-transform: uppercase;
}
.footer-socialize li {
    display: inline-block;
    margin-left: 18px;
    vertical-align: middle;
}
.footer-socialize a {
    display: block;
    text-decoration: none;
    position: relative;
}
.footer-socialize a img {
    display: block;
    width: auto;
    max-height: 28px;
}

.footer-socialize a img:nth-child(2) {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
}
.footer-socialize a:hover img:nth-child(2) {
    opacity: 1;
}

.footer-contact {
    font-size: 12px;
    line-height: 14px;
}
.footer-contact a {
    text-decoration: none;
    color: #26cad3;
}
.footer-contact a:hover {
    text-decoration: underline;
}
.footer-contact span {
    font-size: 90%;
}




/* FEELING LUCKY */

#game .wrapper, #game .animated-bg2 {
    background: #94989b;
    background: -moz-linear-gradient(-35deg, #4e4057 0%, #94989b 50%, #9ac8dd 100%);
    background: -webkit-linear-gradient(-35deg, #4e4057 0%, #94989b 50%, #9ac8dd 100%);
    background: linear-gradient(125deg, #4e4057 0%, #94989b 50%, #9ac8dd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e4057', endColorstr='#9ac8dd',GradientType=1 );
}

#game .content .screen1 .text {
    padding-top: 24vh;
}
#game .content .screen2 .text {
    padding: 0;
}

#game h1 {
    margin-bottom: 10px;
    font-size: 98px;
    line-height: 100px;
    letter-spacing: -2.5px;
}
#game p {
    font-size: 16px;
    line-height: 28px;
}

.btn-start {
    margin-top: 140px;
}

.dog-box {
    position: absolute;
    bottom: -10px;
    right: -320px;
    pointer-events: none;
    -webkit-transition: all 10s linear .5s;
    -ms-transition: all 10s linear .5s;
    transition: all 10s linear .5s;
}
.dog-box.dog-run {
    -webkit-transform: translateX(-150vw);
    -ms-transform: translateX(-150vw);
    transform: translateX(-150vw);
}
.dog-box img {
    display: block;
    max-width: 100%;
    -webkit-animation: jumpingDog .5s linear infinite;
    animation: jumpingDog .5s linear infinite;
}

@-webkit-keyframes jumpingDog {
    0%,100%{ -webkit-transform: translateY(0) scaleX(1); }
    50% { -webkit-transform: translateY(10px) scaleX(1);}
}
@keyframes jumpingDog {
    0%,100%{ transform: translateY(0) scaleX(1); }
    50% { transform: translateY(10px) scaleX(1);}
}

.gamescreen {
    width: 100%;
    height: 0;
    max-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
}
.gamescreen.active {
    height: 100%;
    visibility: visible;
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

/* screen 1 */
.screen1 .text {
    float: left;
}

.progress {
    max-width: 480px;
    margin: 40px auto 0;
    overflow: hidden;
}

.progress-label {
    margin-bottom: 5px;
    font-size: 10px;
    float: left;
}
.label-finish {
    float: right;
}

.progress-bar {
    height: 12px;
    clear: both;
    overflow: hidden;
    background: #506a84;
}
.progress-bar a {
    display: block;
    width: 0;
    height: 100%;
    position: relative;
    background: #2db8c3;
}
.progress-bar a::after {
    display: block;
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: -12px;
    right: -12px;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 12px solid #2db8c3;
}

/* screen 2 */
.screen2 .text {
    text-align: center;
}

.qestion-no {
    margin-bottom: 30px;
    font-size: 36px;
    line-height: 40px;
    color: rgba(255,255,255,.18);
}
.qestion-no span {
    color: #fff;
}

.option {
    display: inline-block;
    position: relative;
    font-family: 'robotobold';
    font-size: 76px;
    line-height: 80px;
    letter-spacing: -2px;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
}
.option:hover {
    color: #2db8c3;
}

.has-selected .option {
    color: rgba(255,255,255,.18);
    cursor: default;
    pointer-events: none;
}
.has-selected .option.selected {
    color: #fff;
}

.option.correct::after {
    display: block;
    content: "";
    width: 75px;
    height: 100%;
    position: absolute;
    top: 4px;
    right: -75px;
    background: url(/wp-content/themes/perception/images/correct.png) right center no-repeat;
}
.option.wrong::after {
    display: block;
    content: "";
    width: 75px;
    height: 100%;
    position: absolute;
    top: 4px;
    right: -75px;
    background: url(/wp-content/themes/perception/images/wrong.png) right center no-repeat;
}

.vs {
    font-size: 42px;
    line-height: 60px;
    color: rgba(255,255,255,.18);
}

.next-step {
    margin-top: 20px;
    font-size: 21px;
}
.next-step strong {
    font-family: 'robotobold';
    font-weight: normal;
}
.next-step.hidden {
    visibility: hidden;
}

.btn-next-step {
    margin-top: 35px;
}

/* screen 3 */
.screen3 {
    padding-left: 38px;
}

.screen3 h2 {
    font-family: 'robotobold';
    font-size: 44px;
    letter-spacing: -1px;
    text-transform: uppercase;
}
.screen3 p {
    font-size: 21px;
    line-height: 28px;
}

.screen3 ul {
    margin-left: -38px;
    margin-bottom: 35px;
}

.screen3 ul li {
    padding-left: 38px;
    margin-bottom: 8px;
    font-family: 'robotobold';
    font-size: 24px;
    line-height: 28px;
    color: #fff;
    color: rgba(255,255,255,.18);
    background: url(/wp-content/themes/perception/images/wrong.png) 0 3px no-repeat;
    background-size: 28px auto;
}
.screen3 ul li.correct {
    background-image: url(/wp-content/themes/perception/images/correct.png);
}
.screen3 ul li span {
    display: inline-block;
    width: 22px;
    font-size: 16px;
    color: #fff;
}
.screen3 ul li strong {
    font-weight: normal;
    color: #fff;
}
.screen3 ul li em {
    font-family: 'robotolight';
}

.screen3 .btn {
    display: inline-block;
    margin-right: 26px;
}


.share-box {
    max-width: 480px;
    margin: 0 auto;
}
.share-box h3 {
    font-family: 'robotobold';
    font-size: 44px;
    line-height: 52px;
    letter-spacing: -1px;
    text-transform: uppercase;
}
.share-box p {
    font-size: 22px;
    line-height: 28px;
}

.share-box ul li {
    float: left;
    margin: 0 16px 16px 0;
}

.share-box ul a {
    display: block;
    width: 52px;
    height: 52px;
    background: url(/wp-content/themes/perception/images/share-sprite.png) 0 0 no-repeat;
    border: 1px solid #404041;
}
.share-box ul a.fb:hover {
    background-position: 0 -50px;
}
.share-box ul a.tw {
    background-position: -50px 0;
}
.share-box ul a.tw:hover {
    background-position: -50px -50px;
}
.share-box ul a.pn {
    background-position: -100px 0;
}
.share-box ul a.pn:hover {
    background-position: -100px -50px;
}
.share-box ul a.li {
    background-position: -150px 0;
}
.share-box ul a.li:hover {
    background-position: -150px -50px;
}
.share-box ul a.email {
    background-position: -200px -1px;
}
.share-box ul a.email:hover {
    background-position: -200px -51px;
}




@media screen and (min-width: 768px) {

    .content-scroll {
        width: 100%;
        max-height: 100%;
        padding-bottom: 40px;
        position: absolute;
        top: 0;
        left: 0;
        /*overflow: hidden;*/
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        /*border-right: 3px solid transparent;*/
    }

    .content-scroll::-webkit-scrollbar{
        width:0px;
    }
    .content-scroll::-webkit-scrollbar-track-piece{
        background-coor:transparent;
    }

    #game .content-scroll {
        height: 100%;
    }
    #contact .content-scroll  {
        /*padding-bottom: 130px;*/
    }

}


/*

 MOBILE styles

 */

@media screen and (max-width: 767px) {

    body {
        font-size: 14px;
    }

    .container {
        min-height: 657px;
        padding: 50px 17px 17px;
        position: relative;
        overflow: hidden;
    }
    .container::after {
        display: block;
        content: "";
        height: 17px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999999;
        background: #fff;
    }

    .content {
        padding: 47px 29px 70px;
        margin: 0;
    }

    .wrapper {
        min-height: 590px;
    }

    .text {
        padding: 0;
    }

    h1 {
        font-size: 60px;
        line-height: .85;
        letter-spacing: -2.5px;
        text-transform: uppercase;
        text-indent: 0;
        text-align: center;
        color: #f3f3f4;
    }

    .subtitle {
        margin-bottom: 20px;
        font-size: 18px;
        letter-spacing: -.5px;
        text-align: center;
    }
    .subtitle span {
        font-size: 11px;
    }

    p {
        margin-bottom: 22px;
        font-size: 12px;
        line-height: 1.92;
        letter-spacing: .45px;
        text-align: left;
    }

    .desktop-only {
        display: none !important;
    }
    .mobile-only {
        display: block;
    }

    .btn:hover {
        color: inherit;
        background: inherit;
        border-color: inherit;
    }


    /* intro */

    #intro .quote {
        padding: 0 25px;
        position: static;
        font-size: 20px;
        line-height: 26px;
        color: rgba(255,255,255,.5);
    }

    #intro .quote br {
        display: none;
    }

    .intro-counter {
        position: static;
        font-size: 58vw;
        line-height: 60vw;
        letter-spacing: -3.3vw;
        text-indent: -4.5vw;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }

    .intro-close {
        top: 1vw;
        right: 1vw;
    }

    .intro-tagline {
        bottom: 10vh;
        right: 20vw;
    }

    .tagline-box span {
        padding: 0 20px;
        position: fixed;
        top: 47%;
        left: 0;
        right: 0;
        font-size: 18px;
        line-height: 1.5;
        text-align: center;
        white-space: normal;
        -webkit-transform: translateY(50px);
        -ms-transform: translateY(50px);
        transform: translateY(50px);
        -webkit-transition: all .7s ease 1s;
        -ms-transition: all .7s ease 1s;
        transition: all .7s ease 1s;
    }
    .complete .tagline-box span {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }



    /* NAV */
    .mobile-bar {
        height: 50px;
        padding: 12px 0 0;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999999;
        background: #fff;
    }

    .btn-menu {
        top: 0;
        right: auto;
        left: 0;
        width: 50px;
        height: 40px;
        opacity: 1 !important;
    }
    .btn-menu i {
        width: 24px;
        bottom: 15px;
        left: 17px;
        height: 3px;
        background: #404041 !important;
    }
    .btn-menu i::before,
    .btn-menu i::after {
        background: #404041 !important;
    }
    .btn-menu i::before {
        top: -8px;
    }
    .btn-menu i::after {
        bottom: -8px;
    }

    .mobile-logo {
        display: block;
        width: 140px;
        margin: 0 auto;
    }
    .mobile-logo img {
        display: block;
        margin: 0 auto;
    }

    .overlay {
        top: 4px;
        left: 4px;
        right: 4px;
        bottom: 4px;
    }

    .nav .tb, .nav .td {
        display: block;
    }

    .nav {
        padding-top: 128px;
    }
    .nav ul {
        font-size: 34px;
        line-height: 1.1;
        letter-spacing: -2px;
    }
    .nav ul span {
        padding: 0 22px;
    }
    .nav ul .active span::after {
        height: 5px;
    }

    .socialize {
        margin: 0;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 46px;
    }

    .soc-title {
        margin-bottom: 18px;
        font-size: 18px;
        letter-spacing: -.5px;
    }
    .socialize a {
        margin: 0 10px;
    }
    .socialize a img {
        height: 32px;
    }


    .btn-close {
        width: 50px;
        height: 52px;
    }
    .btn-close::before, .btn-close::after {
        width: 24px;
    }


    /* prev next nav */

    .page-nav {
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        z-index: 99;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    .current-page, .btn-up {
        display: none;
    }

    .btn-down {
        padding: 17px;
        margin: 0 auto;
    }

    .btn-down::after {
        border-left: 12px solid transparent !important;
        border-right: 12px solid transparent !important;
        border-top: 16px solid #fff;
        -webkit-animation: bouncingArrow 1.2s linear infinite;
        animation: bouncingArrow 1.2s linear infinite;
    }

    @-webkit-keyframes bouncingArrow {
        0%{ -webkit-transform: translateY(-5px) scale(1); opacity: 1; }
        100%{ -webkit-transform: translateY(12px) scale(.7); opacity: 0; }
    }
    @keyframes bouncingArrow {
        0%{ transform: translateY(-5px) scale(1); opacity: 1; }
        100%{ transform: translateY(12px) scale(.7); opacity: 0; }
    }

    .hide-nav .content {
        padding-bottom: 30px;
    }
    .hide-nav .page-nav {
        display: none;
    }



    /* FRONT PAGE */

    #front h1 {
        margin-bottom: 32px;
    }

    /* TREES */

    .tree {
        display: none;
    }
    .tree_1 { display: block; left: 8%; top: 76%; }
    .tree_2 { display: block; left: 27%; top: 80.8%; }
    .tree_3 { display: block; left: 82%; top: 9%; }
    .tree_4 { display: block; left: 86%; top: 35%;
        -webkit-transform: scale(.75);
        -ms-transform: scale(.75);
        transform: scale(.75);
    }

    /* PLANET */

    .loaded .planet {
        right: -90px;
        bottom: -25px;
        -webkit-transform: scale(.61);
        -ms-transform: scale(.61);
        transform: scale(.61);
    }
    .planet:hover {
        -webkit-transform: scale(.75);
        -ms-transform: scale(.75);
        transform: scale(.75);
    }

    /* EAGLE */

    .eagle {
        top: 20%;
    }
    body.ready .eagle {
        -webkit-animation: eagleFly 8s linear;
        animation: eagleFly 8s linear;
    }

    .eagle-shadow {
        width: 63px;
        top: 30%;
        left: -120px;
    }
    body.ready .eagle-shadow {
        -webkit-animation: eagleShadowFly 8.3s linear;
        animation: eagleShadowFly 8.3s linear;
    }

    @-webkit-keyframes eagleFly {
        0%{ -webkit-transform: translate(0,0); }
        100%{ -webkit-transform: translate(150vw,53vh) scale(1.5) rotate(-10deg); }
    }
    @keyframes eagleFly {
        0%{ transform: translate(0,0); }
        100%{ transform: translate(150vw,53vh) scale(1.5) rotate(-10deg); }
    }

    @-webkit-keyframes eagleShadowFly {
        0%{ -webkit-transform: translate(0,0); }
        60%{ opacity: 1; }
        100%{ -webkit-transform: translate(140vw,70vh) scale(.8); opacity: 0; }
    }
    @keyframes eagleShadowFly {
        0%{ transform: translate(0,0); }
        60%{ opacity: 1; }
        100%{ transform: translate(140vw,70vh) scale(.8); opacity: 0; }
    }




    /* THE WORK */

    #work  h1 {
        margin-bottom: 30px;
    }

    /* work video */
    .work-video {
        margin-top: 30px;
        font-size: 9px;
        line-height: 1;
        letter-spacing: 0;
    }

    .work-video > div {
        margin: 0 -10px;
    }

    .btn-play, .btn-view {
        width: 125px;
        padding: 12px;
        margin: 0 7px 15px;
        margin-bottom: 11px;
        letter-spacing: 1.5px;
        border-width: 2px;
    }

    /* video popup */
    .video-holder {
        width: 90%;
        padding: 4px;
    }



    /* work popup */
    .work-holder {
        top: 55px;
        bottom: 100px;
        left: 25px;
        right: 25px;
    }

    .slide-inner {
        padding: 15px 10px;
    }

    .work-title {
        margin-bottom: 12px;
        font-size: 16px;
    }

    .btn-visit {
        right: 10px;
        bottom: 10px;
        font-size: 10px;
        line-height: 1;
        text-decoration: none !important;
        color: #000 !important;
    }

    .work-slider-nav {
        bottom: -52px;
    }
    .btn-work-prev, .btn-work-next {
        background-position: 0 0 !important;
    }


    /* clients */
    .clients {
        margin: 48px -5px 0;
    }
    .clients img {
        display: block;
        max-width: 100%;
        opacity: .45;
    }
    .clients ul {
        display: none
    }

    .work-cloud1 {
        width: 55px;
        top: 5%;
        left: 15%;
        -webkit-animation: workCloud2 55s ease infinite;
        animation: workCloud2 55s ease infinite;
    }
    .work-cloud2 {
        width: 26px;
        top: 11%;
        left: 86%;
    }

    @-webkit-keyframes workCloud2 {
        0%{ -webkit-transform: translate(0,0); }
        50%{ -webkit-transform: translate(-90px,0); }
        100%{ -webkit-transform: translate(0,0); }
    }
    @keyframes workCloud2 {
        0%{ transform: translate(0,0); }
        50%{ transform: translate(-90px,0); }
        100%{ transform: translate(0,0); }
    }

    .bird {
        top: -44px;
        right: -5px;
    }

    @-webkit-keyframes bird {
        0%{ -webkit-transform: translate(0,0) scale(.75); }
        10%{ -webkit-transform: translate(0,0) scale(.75); }
        11%{ -webkit-transform: translate(-22px,0) scale(.75); }
        25%{ -webkit-transform: translate(-22px,0) scale(.75); }
        26%{ -webkit-transform: translate(-35px,0) scale(.75); }
        35%{ -webkit-transform: translate(-35px,0) scale(.75); }
        36% { -webkit-transform: translate(-75px,0) scale(-.75, .75); }
        56% { -webkit-transform: translate(-75px,0) scale(-.75, .75); }
        57% { -webkit-transform: translate(-40px,0) scale(-.75, .75); }
        58% { -webkit-transform: translate(-20px,0) scale(-.75, .75); }
        99% { -webkit-transform: translate(-20px,0) scale(-.75, .75); }
        100%{ -webkit-transform: translate(0,0) scale(.75); }
    }
    @keyframes bird {
        0%{ transform: translate(0,0) scale(.75); }
        10%{ transform: translate(0,0) scale(.75); }
        11%{ transform: translate(-22px,0) scale(.75); }
        25%{ transform: translate(-22px,0) scale(.75); }
        26%{ transform: translate(-35px,0) scale(.75); }
        35%{ transform: translate(-35px,0) scale(.75); }
        36% { transform: translate(-75px,0) scale(-.75, .75); }
        56% { transform: translate(-75px,0) scale(-.75, .75); }
        57% { transform: translate(-40px,0) scale(-.75, .75); }
        58% { transform: translate(-20px,0) scale(-.75, .75); }
        99% { transform: translate(-20px,0) scale(-.75, .75); }
        100%{ transform: translate(0,0) scale(.75); }
    }



    /* WHO WE ARE */

    #whoweare .container {
        min-height: 852px;
    }

    #whoweare .content {
        padding-bottom: 65px;
    }

    #whoweare h1 {
        margin-bottom: 32px;
    }

    #whoweare .subtitle {
        margin-bottom: 23px;
    }
    #whoweare .subtitle strong {
        display: block;
        margin-top: 10px;
        font-size: 16px;
        line-height: 18px;
        letter-spacing: -.5px;
    }


    #whoweare .eagle {
        width: 140px;
        top: 18%;
        left: auto;
        right: -140px;
    }
    #whoweare.ready .eagle {
        -webkit-animation: whoweareEagle 7s linear;
        animation: whoweareEagle 7s linear;
    }
    #whoweare .eagle-shadow {
        width: 68px;
        height: 68px;
        top: 28%;
        left: auto;
        right: -120px;
    }
    #whoweare.ready .eagle-shadow {
        -webkit-animation: whoweareEagleShadow 7.3s linear;
        animation: whoweareEagleShadow 7.3s linear;
    }

    @-webkit-keyframes whoweareEagle {
        0%{ -webkit-transform: translate(0,0) scale(-1,1) rotate(0) }
        100%{ -webkit-transform: translate(-150vw,45vh) scale(-1,1) rotate(-10deg); }
    }
    @keyframes whoweareEagle {
        0%{ transform: translate(0,0) scale(-1,1) rotate(0) }
        100%{ transform: translate(-150vw,45vh) scale(-1,1) rotate(-10deg); }
    }

    @-webkit-keyframes whoweareEagleShadow {
        0%{ -webkit-transform: translate(0,0) scale(-1,1); }
        60%{ opacity: 1; }
        100%{ -webkit-transform: translate(-150vw,60vh) scale(-.7,.7); opacity: 0; }
    }
    @keyframes whoweareEagleShadow {
        0%{ transform: translate(0,0) scale(-1,1); }
        60%{ opacity: 1; }
        100%{ transform: translate(-150vw,60vh) scale(-.7,.7); opacity: 0; }
    }

    .whale-box {
        right: 0;
        bottom: -145px;
        z-index: 9;
        transform: scale(.9);
    }

    .whale-shadow {
        top: -230px;
        left: -130px;
    }




    /* WHAT WE DO */

    #whatwedo h1 {
        margin-bottom: 18px;
    }

    .services-list {
        -webkit-transition: all .5s ease;
        -ms-transition: all .5s ease;
        transition: all .5s ease;
    }
    .services-list.selected {
        margin-top: -45px;
    }

    .isles {
        height: 94px;
        margin: 0;
        position: relative;
    }
    .isles li {
        width: 50%;
        padding: 0 12px;
        margin: 0 0 33px;
        -webkit-transition: all .5s ease;
        -ms-transition: all .5s ease;
        transition: all .5s ease;
    }
    .services-list > .isles li span,
    .services-list > .isles li.active span {
        display: inline-block;
        width: 110px;
        padding: 9px 30px;
        font-size: 10px;
        line-height: 10px;
        color: #fff !important;
        background: none !important;
        border: 1px solid !important;
    }

    .services-list > .isles .serv-3,
    .services-list > .isles .serv-4 {
        margin-bottom: 0;
    }

    .services-list > .isles .serv-1 .isle-box,
    .services-list > .isles .serv-3 .isle-box {
        margin-left: -5px;
    }
    .services-list > .isles .serv-1 span,
    .services-list > .isles .serv-3 span {
        margin-left: -8px;
    }

    .services-list > .isles .serv-4 .isle-box {
        margin-left: 8px;
    }
    .services-list > .isles .serv-2 span,
    .services-list > .isles .serv-4 span {
        margin-right: -18px;
    }

    .services-list.selected > .isles li {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
    }
    .services-list.selected > .isles li.active {
        display: block;
    }
    .services-list.selected > .isles li span {
        display: none;
    }


    .serv-tabs {
        display: none;
        max-width: 205px;
        min-height: 210px;
        margin: 0 auto;
        position: relative;
        -webkit-transition: all 1s ease;
        -ms-transition: all 1s ease;
        transition: all 1s ease;
    }
    .services-list.selected .serv-tabs {
        display: block;
        margin-top: 0;
    }

    .serv-tabs .tab {
        visibility: hidden;
        width: 100%;
        height: 100%;
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        -webkit-transition: all .5s ease;
        -ms-transition: all .5s ease;
        transition: all .5s ease;
    }
    .serv-tabs .tab.active {
        visibility: visible;
        opacity: 1;
    }

    .serv-tabs .tab::after {
        display: block;
        content: "";
        height: 0;
        clear: both;
    }

    .tab-inner {
        height: 100%;
    }

    .tab h2 {
        width: 100%;
        height: 40px;
        margin-left: -50px;
        font-size: 28px;
        line-height: 22px;
        text-transform: uppercase;
        text-align: right;
    }

    .tab-left {
        float: none;
        width: 100%;
        padding: 0;
        font-size: 12px;
        line-height: 12px;
        letter-spacing: -.25px;
    }
    .tab-left ul li {
        margin-bottom: 11px;
    }
    .tab-left ul li:last-child {
        margin: 0;
    }

    .tab-right {
        display: none;
    }


    .mob-isles {
        display: none;
        max-width: 264px;
        height: 108px;
        margin: 0 auto;
        clear: both;
        overflow: hidden;
    }
    .services-list.selected .mob-isles {
        display: block;
    }

    .mob-isles .isles li {
        width: 33.3%;
        padding: 0;
        margin-bottom: 30px;
        -webkit-transition: all .5s ease;
        -ms-transition: all .5s ease;
        transition: all .5s ease;
    }
    .mob-isles .isles li.active {
        width: 0;
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
    }

    .mob-isles .isles li a {
        display: block;
        width: 50px;
        height: 80px;
        margin: 0 auto;
        position: relative;
    }
    .mob-isles .isles li span {
        display: inline;
        width: auto;
        padding: 0;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        font-size: 10px;
        text-align: center;
        color: #004E9A !important;
        background: none !important;
        border: none;
    }

    .mob-isles .isles .isle-box {
        -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scale(.47);
        -ms-transform: scale(.47);
        transform: scale(.47);
        -webkit-animation: none;
        animation: none;
    }

    .mob-isles .isles .serv-4 .isle-box {
        margin-left: -4px;
    }


    .prev-next {
        display: none;
        margin-left: -6px;
        clear: both;
        text-align: center;
    }
    .services-list.selected .prev-next {
        display: block;
    }

    .prev-next .btn {
        display: inline-block;
        width: 110px;
        padding: 9px;
        margin: 0 14px;
        font-size: 10px;
        line-height: 10px;
        letter-spacing: -.25px;
    }



    /* FEELING LUCKY */

    .gamescreen {
        display: none;
        height: auto;
        position: relative;
        z-index: 0;
    }
    .gamescreen.active {
        display: block;
        z-index: 1;
    }

    #game .content .screen1 .text,
    #game .content .screen2 .text,
    #game .content .screen3 .text {
        padding-top: 0;
    }

    #game h1 {
        margin-left: -12px;
        margin-bottom: 32px;
        font-size: 62px;
        line-height: .82;
        letter-spacing: -1.5px;
    }
    #game p {
        font-size: 16px;
        line-height: 28px;
        letter-spacing: 0;
    }
    #game .screen1 .btn-start + p {
        letter-spacing: -1.2px;
        margin-left: -5px;
    }

    #game .screen1 p {
        margin-left: -12px;
        font-size: 30px;
        line-height: 36px;
        letter-spacing: -1.2px;
        text-transform: lowercase;
        text-align: center;
        text-indent: -5px;
    }

    .btn-start {
        width: 144px;
        padding: 12px;
        margin: 70px auto 60px;
        font-size: 12px;
        border-width: 2px;
    }

    .dog-box {
        width: 50%;
        max-width: 220px;
        right: -55vw;
    }
    .dog-box img {
        display: block;
        position: relative;
    }
    .dog-box.dog-run {
        -webkit-transform: translateX(-200vw);
        -ms-transform: translateX(-200vw);
        transform: translateX(-200vw);
    }

    /* screen 1 */
    .screen1 .text {
        float: none;
        text-align: center;
    }

    .progress-label {
        margin-bottom: 4px;
        font-size: 11px;
        letter-spacing: -.5px;
    }

    .progress-bar {
        height: 16px;
    }
    .progress-bar a::after {
        top: -16px;
        right: -16px;
        border-top: 16px solid transparent;
        border-bottom: 16px solid transparent;
        border-left: 16px solid #2db8c3;
    }

    /* screen 2 */
    .screen2 {
        padding: 20px 24px 0;
    }

    .screen2 .tb, .screen2 .td {
        display: block;
    }

    .qestion-no {
        margin-bottom: 42px;
        font-size: 40px;
        line-height: .8;
    }

    .option {
        display: inline;
        font-size: 50px;
        line-height: 46px;
        letter-spacing: -2px;
    }

    .option.correct::after,
    .option.wrong::after {
        display: none;
    }

    .option span {
        position: relative;
    }
    .option.correct span::after {
        display: block;
        content: "";
        width: 40px;
        height: 40px;
        position: absolute;
        top: 15px;
        right: -46px;
        background: url(/wp-content/themes/perception/images/correct.png) right center no-repeat;
        background-size: contain;
    }
    .option.wrong span::after {
        display: block;
        content: "";
        width: 40px;
        height: 40px;
        position: absolute;
        top: 18px;
        right: -46px;
        background: url(/wp-content/themes/perception/images/wrong.png) right center no-repeat;
        background-size: contain;
    }

    .vs {
        padding-top: 8px;
        font-size: 24px;
        line-height: 32px;
    }

    .next-step {
        margin: 40px -25px 0;
        font-size: 14px;
        line-height: 16px;
    }

    .btn-next-step {
        width: 144px;
        padding: 12px;
        margin-top: 45px;
        font-size: 12px;
        border-width: 2px;
        -webkit-transform: translateX(-5px);
        -ms-transform: translateX(-5px);
        transform: translateX(-5px);
    }

    .progress {
        max-width: inherit;
        margin: 34px -30px -10px;
    }

    /* screen 3 */
    .screen3 {
        padding: 0;
    }

    .screen3 .tb, .screen3 .td {
        display: block;
    }

    #game .content .screen3 .text {
        padding-top: 6px;
    }

    #game .screen3 h2 {
        margin-left: -7px;
        margin-bottom: 5px;
        font-size: 40px;
        text-align: center;
    }
    #game .screen3 p {
        font-size: 16px;
        line-height: 18px;
        text-align: center;
    }

    .screen3 ul {
        max-width: 320px;
        margin: 55px -9px 60px;
    }

    .screen3 ul li {
        padding-left: 20px;
        margin-bottom: 15.5px;
        font-size: 11px;
        line-height: 1.3;
        background-position: 1px 1px;
        background-size: 16px auto;
    }
    .screen3 ul li span {
        width: 15px;
        font-size: 10px;
    }

    .screen3 .game-btns {
        margin-left: -5px;
        text-align: center;
    }
    .screen3 .btn {
        width: 110px;
        padding: 9px;
        margin: 0 14px;
        font-size: 10px;
        line-height: 10px;
        letter-spacing: -.25px;
    }


    .share-popup {
        padding-left: 35px;
    }

    .share-box {
        max-width: 284px;
        margin: 0 auto;
        margin-top: -70px;
    }
    .share-box h3 {
        font-size: 34px;
        line-height: 32px;
        letter-spacing: -1.5px;
    }
    .share-box p {
        font-size: 16px;
        line-height: 22px;
        letter-spacing: -.25px;
    }

    .share-box ul li {
        margin: 0 10px 10px 0;
    }

    .share-box ul a {
        width: 42px;
        height: 42px;
        background-position: 0 -1px;
        background-size: auto 78px;
        border: 2px solid #fff;
    }
    .share-box ul a.fb:hover {
        background-position: 0 -40px;
    }
    .share-box ul a.tw {
        background-position: -40px -1px;
    }
    .share-box ul a.tw:hover {
        background-position: -40px -40px;
    }
    .share-box ul a.pn {
        background-position: -78px -1px;
    }
    .share-box ul a.pn:hover {
        background-position: -78px -40px;
    }
    .share-box ul a.li {
        background-position: -118px -1px;
    }
    .share-box ul a.li:hover {
        background-position: -118px -40px;
    }
    .share-box ul a.email {
        background-position: -158px -1px;
    }
    .share-box ul a.email:hover {
        background-position: -158px -40px;
    }



    /* CONTACT US */

    #contact .content {
        padding: 47px 23px 88px;
    }
    #contact .text {
        padding: 0;
    }

    #contact h1 {
        margin-bottom: 3px;
        font-size: 44px;
        line-height: 48px;
        letter-spacing: -.8px;
        text-indent: -7px;
    }
    #contact p {
        margin-left: 5px;
        font-size: 16px;
        line-height: 20px;
        text-align: center;
    }

    .contact-form {
        padding: 0 47px 0 35px;
        margin-top: 20px;
    }

    .lfield, .rfield, .ffield {
        float: none;
        width: 100%;
        padding: 0;
    }

    .contact-form input[type='text'],
    .contact-form input[type='email'],
    .contact-form textarea {
        height: 26px;
        padding: 0;
        margin-bottom: 14px;
        font-size: 18px;
        line-height: 24px;
    }
    .contact-form textarea {
        height: 24px;
        max-height: 250px;
        padding: 0 0 3px;
        margin-top: 0;
        /*font-size: 9px;*/
        font-size: 14px;
        line-height: 1.4;
    }

    .contact-form input::-webkit-input-placeholder {
        font-size: 9px;
        line-height: 34px;
    }
    .contact-form input::-moz-placeholder {
        font-size: 9px;
        line-height: 34px;
    }
    .contact-form input:-ms-input-placeholder {
        font-size: 9px;
        line-height: 34px;
    }
    .contact-form input:-moz-placeholder {
        font-size: 9px;
        line-height: 34px;
    }
    .contact-form input:placeholder {
        font-size: 9px;
        line-height: 34px;
    }

    .contact-form textarea::-webkit-input-placeholder {
        font-size: 9px;
        line-height: 32px;
    }
    .contact-form textarea::-moz-placeholder {
        font-size: 9px;
        line-height: 32px;
    }
    .contact-form textarea:-ms-input-placeholder {
        font-size: 9px;
        line-height: 32px;
    }
    .contact-form textarea:-moz-placeholder {
        font-size: 9px;
        line-height: 32px;
    }
    .contact-form textarea:placeholder {
        font-size: 9px;
        line-height: 32px;
    }

    .contact-form .btn-submit {
        width: 144px;
        padding: 12px;
        margin: 28px 0 0;
        font-family: 'robotobold';
        font-size: 14px;
        letter-spacing: -.25px;
        border-width: 2px;
    }

    .contact-animation {
        bottom: 112px;
    }

    .contact-lscape {
        width: 106%;
        -webkit-transform: translate(15px,50px);
        -moz-transform: translate(15px,50px);
        -ms-transform: translate(15px,50px);
        transform: translate(15px,50px);
        -webkit-transition: all 15s ease-out;
        -moz-transition: all 15s ease-out;
        -ms-transition: all 15s ease-out;
        transition: all 15s ease-out;
    }

    .contact-cloud1 {
        width: 50px;
        top: 14px;
        left: 25%;
    }
    .contact-cloud2 {
        width: 20px;
        top: 75.5%;
        left: 59%;
    }
    .contact-cloud3 {
        width: 28px;
        top: 78.5%;
        left: 81%;
    }

    .contact-lscape .lscape-grl {
        width: 4.5vw;
        right: 29%;
        bottom: 10px;
    }

    .contact-lscape .lscape-balloon1 {
        width: 18px;
        right: 88px;
        bottom: 105px;
    }
    .contact-lscape .lscape-balloon2 {
        width: 13px;
        right: 14px;
        bottom: 145px;
    }

    .contact-lscape .lscape-fish {
        width: 24px;
        bottom: 57px;
    }


    .footer {
        width: 100%;
        padding: 15px 30px 5px;
        position: relative;
        text-align: center;
        color: #d1d3d4;
        background: #3a3a3b;
    }

    .footer .socialize {
        padding-bottom: 7px;
        position: static;
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }

    .footer .soc-title {
        margin-bottom: 5px;
        font-size: 14px;
        letter-spacing: -.5px;
    }

    .footer .socialize a {
        margin: 0 11px;
    }
    .footer .socialize a img {
        height: 32px;
    }

    .footer .tagline {
        font-size: 12px;
        line-height: 20px;
        letter-spacing: -.35px;
        text-indent: 10px;
    }

    .footer .copy {
        margin-top: 5px;
        margin-left: 3px;
        font-size: 9px;
        line-height: 1;
        text-transform: uppercase;
        color: #6d6e71;
    }

}

span.wpcf7-not-valid-tip {
    font-size: .7em;
}