/* reset styles */

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
@import url('https://fonts.googleapis.com/css?family=Lora:,400italic,700italic');
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block
}
audio,
canvas,
video {
    display: inline-block
}
audio:not([controls]) {
    display: none;
    height: 0
}
[hidden] {
    display: none
}
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}
body {
    margin: 0
}
a:focus {
    outline: thin dotted
}
a:active,
a:hover {
    outline: 0
}
h1 {
    font-size: 2em;
    margin: .67em 0
}
abbr[title] {
    border-bottom: 1px dotted
}
b,
strong {
    font-weight: 700
}
dfn {
    font-style: italic
}
hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0
}
mark {
    background: #ff0;
    color: #000
}
code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    font-size: 1em
}
pre {
    white-space: pre-wrap
}
q {
    quotes: "\201C" "\201D" "\2018" "\2019"
}
small {
    font-size: 80%
}
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}
sup {
    top: -.5em
}
sub {
    bottom: -.25em
}
img {
    border: 0
}
svg:not(:root) {
    overflow: hidden
}
figure {
    margin: 0
}
fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: .35em .625em .75em
}
legend {
    border: 0;
    padding: 0
}
button,
input,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0
}
button,
input {
    line-height: normal
}
button,
select {
    text-transform: none
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer
}
button[disabled],
html input[disabled] {
    cursor: default
}
input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    padding: 0
}
input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0
}
textarea {
    overflow: auto;
    vertical-align: top
}
table {
    border-collapse: collapse;
    border-spacing: 0
}
.animated {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}
.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}
.animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s
}
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}
.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}
@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}
@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        -ms-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}
.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown
}
@-webkit-keyframes fadeInDownBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}
@keyframes fadeInDownBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        -ms-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}
.fadeInDownBig {
    -webkit-animation-name: fadeInDownBig;
    animation-name: fadeInDownBig
}
@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        -ms-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}
.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft
}
@-webkit-keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}
@keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        -ms-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}
.fadeInLeftBig {
    -webkit-animation-name: fadeInLeftBig;
    animation-name: fadeInLeftBig
}
@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}
@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        -ms-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}
.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight
}
@-webkit-keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}
@keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        -ms-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}
.fadeInRightBig {
    -webkit-animation-name: fadeInRightBig;
    animation-name: fadeInRightBig
}
@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        -ms-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}
.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
}
@-webkit-keyframes fadeInUpBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}
@keyframes fadeInUpBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        -ms-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}
.fadeInUpBig {
    -webkit-animation-name: fadeInUpBig;
    animation-name: fadeInUpBig
}
.pt-page-fade {
    -webkit-animation: fade .7s ease both;
    -moz-animation: fade .7s ease both;
    animation: fade .7s ease both
}
.pt-page-moveToLeftFade {
    -webkit-animation: moveToLeftFade .7s ease both;
    -moz-animation: moveToLeftFade .7s ease both;
    animation: moveToLeftFade .7s ease both
}
.pt-page-moveFromLeftFade {
    -webkit-animation: moveFromLeftFade .7s ease both;
    -moz-animation: moveFromLeftFade .7s ease both;
    animation: moveFromLeftFade .7s ease both
}
.pt-page-moveToRightFade {
    -webkit-animation: moveToRightFade .7s ease both;
    -moz-animation: moveToRightFade .7s ease both;
    animation: moveToRightFade .7s ease both
}
.pt-page-moveFromRightFade {
    -webkit-animation: moveFromRightFade .7s ease both;
    -moz-animation: moveFromRightFade .7s ease both;
    animation: moveFromRightFade .7s ease both
}
.pt-page-moveToTopFade {
    -webkit-animation: moveToTopFade .7s ease both;
    -moz-animation: moveToTopFade .7s ease both;
    animation: moveToTopFade .7s ease both
}
.pt-page-moveFromTopFade {
    -webkit-animation: moveFromTopFade .7s ease both;
    -moz-animation: moveFromTopFade .7s ease both;
    animation: moveFromTopFade .7s ease both
}
.pt-page-moveToBottomFade {
    -webkit-animation: moveToBottomFade .7s ease both;
    -moz-animation: moveToBottomFade .7s ease both;
    animation: moveToBottomFade .7s ease both
}
.pt-page-moveFromBottomFade {
    -webkit-animation: moveFromBottomFade .7s ease both;
    -moz-animation: moveFromBottomFade .7s ease both;
    animation: moveFromBottomFade .7s ease both
}
.pt-page-rotateFoldRight {
    -webkit-transform-origin: 0 50%;
    -webkit-animation: rotateFoldRight .7s both ease;
    -moz-transform-origin: 0 50%;
    -moz-animation: rotateFoldRight .7s both ease;
    transform-origin: 0 50%;
    animation: rotateFoldRight .7s both ease
}
.pt-page-rotateFoldLeft {
    -webkit-transform-origin: 100% 50%;
    -webkit-animation: rotateFoldLeft .7s both ease;
    -moz-transform-origin: 100% 50%;
    -moz-animation: rotateFoldLeft .7s both ease;
    transform-origin: 100% 50%;
    animation: rotateFoldLeft .7s both ease
}
.pt-page-rotateFoldTop {
    -webkit-transform-origin: 50% 100%;
    -webkit-animation: rotateFoldTop .7s both ease;
    -moz-transform-origin: 50% 100%;
    -moz-animation: rotateFoldTop .7s both ease;
    transform-origin: 50% 100%;
    animation: rotateFoldTop .7s both ease
}
.pt-page-rotateFoldBottom {
    -webkit-transform-origin: 50% 0;
    -webkit-animation: rotateFoldBottom .7s both ease;
    -moz-transform-origin: 50% 0;
    -moz-animation: rotateFoldBottom .7s both ease;
    transform-origin: 50% 0;
    animation: rotateFoldBottom .7s both ease
}
@-webkit-keyframes moveToLeftFade {
    to {
        opacity: .3;
        -webkit-transform: translatex(-100%)
    }
}
@-moz-keyframes moveToLeftFade {
    to {
        opacity: .3;
        -moz-transform: translatex(-100%)
    }
}
@keyframes moveToLeftFade {
    to {
        opacity: .3;
        transform: translatex(-100%)
    }
}
@-webkit-keyframes moveFromLeftFade {
    from {
        opacity: .3;
        -webkit-transform: translatex(-100%)
    }
}
@-moz-keyframes moveFromLeftFade {
    from {
        opacity: .3;
        -moz-transform: translatex(-100%)
    }
}
@keyframes moveFromLeftFade {
    from {
        opacity: .3;
        transform: translatex(-100%)
    }
}
@-webkit-keyframes moveToRightFade {
    to {
        opacity: .3;
        -webkit-transform: translatex(100%)
    }
}
@-moz-keyframes moveToRightFade {
    to {
        opacity: .3;
        -moz-transform: translatex(100%)
    }
}
@keyframes moveToRightFade {
    to {
        opacity: .3;
        transform: translatex(100%)
    }
}
@-webkit-keyframes moveFromRightFade {
    from {
        opacity: .3;
        -webkit-transform: translatex(100%)
    }
}
@-moz-keyframes moveFromRightFade {
    from {
        opacity: .3;
        -moz-transform: translatex(100%)
    }
}
@keyframes moveFromRightFade {
    from {
        opacity: .3;
        transform: translatex(100%)
    }
}
@-webkit-keyframes moveToTopFade {
    to {
        opacity: .3;
        -webkit-transform: translatey(-100%)
    }
}
@-moz-keyframes moveToTopFade {
    to {
        opacity: .3;
        -moz-transform: translatey(-100%)
    }
}
@keyframes moveToTopFade {
    to {
        opacity: .3;
        transform: translatey(-100%)
    }
}
@-webkit-keyframes moveFromTopFade {
    from {
        opacity: .3;
        -webkit-transform: translatey(-100%)
    }
}
@-moz-keyframes moveFromTopFade {
    from {
        opacity: .3;
        -moz-transform: translatey(-100%)
    }
}
@keyframes moveFromTopFade {
    from {
        opacity: .3;
        transform: translatey(-100%)
    }
}
@-webkit-keyframes moveToBottomFade {
    to {
        opacity: .3;
        -webkit-transform: translatey(100%)
    }
}
@-moz-keyframes moveToBottomFade {
    to {
        opacity: .3;
        -moz-transform: translatey(100%)
    }
}
@keyframes moveToBottomFade {
    to {
        opacity: .3;
        transform: translatey(100%)
    }
}
@-webkit-keyframes moveFromBottomFade {
    from {
        opacity: .3;
        -webkit-transform: translatey(100%)
    }
}
@-moz-keyframes moveFromBottomFade {
    from {
        opacity: .3;
        -moz-transform: translatey(100%)
    }
}
@keyframes moveFromBottomFade {
    from {
        opacity: .3;
        transform: translatey(100%)
    }
}
@-webkit-keyframes rotateFoldRight {
    to {
        opacity: 0;
        -webkit-transform: translatex(100%) rotatey(90deg)
    }
}
@-moz-keyframes rotateFoldRight {
    to {
        opacity: 0;
        -moz-transform: translatex(100%) rotatey(90deg)
    }
}
@keyframes rotateFoldRight {
    to {
        opacity: 0;
        transform: translatex(100%) rotatey(90deg)
    }
}
@-webkit-keyframes rotateFoldLeft {
    to {
        opacity: 0;
        -webkit-transform: translatex(-100%) rotatey(-90deg)
    }
}
@-moz-keyframes rotateFoldLeft {
    to {
        opacity: 0;
        -moz-transform: translatex(-100%) rotatey(-90deg)
    }
}
@keyframes rotateFoldLeft {
    to {
        opacity: 0;
        transform: translatex(-100%) rotatey(-90deg)
    }
}
@-webkit-keyframes rotateFoldTop {
    to {
        opacity: 0;
        -webkit-transform: translatey(-100%) rotatex(90deg)
    }
}
@-moz-keyframes rotateFoldTop {
    to {
        opacity: 0;
        -moz-transform: translatey(-100%) rotatex(90deg)
    }
}
@keyframes rotateFoldTop {
    to {
        opacity: 0;
        transform: translatey(-100%) rotatex(90deg)
    }
}
@-webkit-keyframes rotateFoldBottom {
    to {
        opacity: 0;
        -webkit-transform: translatey(100%) rotatex(-90deg)
    }
}
@-moz-keyframes rotateFoldBottom {
    to {
        opacity: 0;
        -moz-transform: translatey(100%) rotatex(-90deg)
    }
}
@keyframes rotateFoldBottom {
    to {
        opacity: 0;
        transform: translatey(100%) rotatex(-90deg)
    }
}
@font-face {
    font-family: 'icomoon';
    src: url('icomoon/fonts/icomoon.eot?gs9vci');
    src: url('icomoon/fonts/icomoon.eot?#iefixgs9vci') format('embedded-opentype'), url('icomoon/fonts/icomoon.woff?gs9vci') format('woff'), url('icomoon/fonts/icomoon.ttf?gs9vci') format('truetype'), url('icomoon/fonts/icomoon.svg?gs9vci#icomoon') format('svg');
    font-weight: 400;
    font-style: normal
}
[class^="icon-"],
[class*=" icon-"] {
    font-family: 'icomoon'!important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}
.icon-arrow-up-left2:before {
    content: "\e3c0"
}
.icon-lamp4:before {
    content: "\e24e"
}
.icon-envelope:before {
    content: "\e0eb"
}
.icon-direction:before {
    content: "\e0fe"
}
.icon-globe:before {
    content: "\e2c4"
}
.icon-arrow-right5:before {
    content: "\e3c3"
}
.icon-arrow-left4:before {
    content: "\e3c7"
}
.icon-palette:before {
    content: "\e021"
}
.icon-screen:before {
    content: "\e120"
}
.icon-code:before {
    content: "\e480"
}
.icon-code:link {
    content: "\e2c9"
}
.icon-arrow-up4:before {
    content: "\e3c1"
}
.icon-dribbble:before {
    content: "\e4af"
}
.icon-mobile:before {
    content: "\e125"
}
.icon-mobile2:before {
    content: "\e126"
}
.icon-arrow-up-right2:before {
    content: "\e3c2"
}
.icon-tablet:before {
    content: "\e127"
}
.icon-arrow-right5:before {
    content: "\e3c3"
}
.icon-cogs:before {
    content: "\e1e0"
}
.icon-rocket:before {
    content: "\e234"
}
.icon-file8:before {
    content: "\e086"
}
.icon-newspaper:before {
    content: "\e00c"
}
.icon-brush:before {
    content: "\e020"
}
.icon-droplet:before {
    content: "\e025"
}
.icon-droplet3:before {
    content: "\e027"
}
.icon-droplet4:before {
    content: "\e028"
}
.icon-arrow-down-right2:before {
    content: "\e3c4"
}
.icon-mic5:before {
    content: "\e06f"
}
.icon-location:before {
    content: "\e0f1"
}
.icon-pencil:before {
    content: "\e00d"
}
.icon-arrow-down4:before {
    content: "\e3c5"
}
.icon-guitar:before {
    content: "\e03f"
}
.icon-arrow-down-left2:before {
    content: "\e3c6"
}
.icon-mouse:before {
    content: "\e11a"
}
.icon-arrow-left4:before {
    content: "\e3c7"
}
.icon-linkedin:before {
    content: "\e4cf"
}
.icon-googleplus:before {
    content: "\e493"
}
.icon-plus:before {
    content: "\e376"
}
.icon-facebook:before {
    content: "\e498"
}
.icon-twitter:before {
    content: "\e49d"
}
.icon-deviantart:before {
    content: "\e4b4"
}
.icon-dribbble:before {
    content: "\e4af"
}
.icon-chrome:before {
    content: "\e4ed"
}
.icon-firefox:before {
    content: "\e4ee"
}
.icon-IE:before {
    content: "\e4ef"
}
.icon-opera:before {
    content: "\e4f0"
}
.icon-safari:before {
    content: "\e4f1"
}
.icon-IcoMoon:before {
    content: "\e4f2"
}
.icon-heart7:before {
    content: "\e30a"
}
.animated {
    -webkit-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}
@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translatex(-80px);
        transform: translatex(-80px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translatex(0);
        transform: translatex(0)
    }
}
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translatex(-80px);
        -ms-transform: translatex(-80px);
        transform: translatex(-80px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translatex(0);
        -ms-transform: translatex(0);
        transform: translatex(0)
    }
}
.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft
}
@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translatex(80px);
        transform: translatex(80px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translatex(0);
        transform: translatex(0)
    }
}
@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translatex(80px);
        -ms-transform: translatex(80px);
        transform: translatex(80px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translatex(0);
        -ms-transform: translatex(0);
        transform: translatex(0)
    }
}
.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight
}
@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translatey(80px);
        transform: translatey(80px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translatey(0);
        transform: translatey(0)
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translatey(80px);
        -ms-transform: translatey(80px);
        transform: translatey(80px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translatey(0);
        -ms-transform: translatey(0);
        transform: translatey(0)
    }
}
.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
}
@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translatey(-80px);
        transform: translatey(-80px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translatey(0);
        transform: translatey(0)
    }
}
@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translatey(-80px);
        -ms-transform: translatey(-80px);
        transform: translatey(-80px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translatey(0);
        -ms-transform: translatey(0);
        transform: translatey(0)
    }
}
.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown
}
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}
.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}
#cssda {
    position: fixed;
    top: 175px;
    width: 84px;
    height: 101px;
    text-indent: -666em;
    overflow: hidden;
    z-index: 77777;
    -webkit-transition: all 1s ease;
    transition: all 1s ease
}
#cssda a {
    position: absolute;
    color: #2fc989;
    top: 0;
    left: 0;
    display: block;
    width: 84px;
    height: 101px;
    background-repeat: no-repeat;
    background-size: 84px 101px;
    background-image: url(../images/cssda-wotd.png)
}
#awwwards {
    position: fixed;
    top: 310px;
    left: 0;
    width: 90px;
    height: 135px;
    text-indent: -666em;
    overflow: hidden;
    z-index: 77777;
    -webkit-transition: all 1s ease;
    transition: all 1s ease
}
#awwwards a {
    position: absolute;
    color: #2fc989;
    top: 0;
    left: 0;
    display: block;
    width: 90px;
    height: 135px;
    background-repeat: no-repeat;
    background-size: 90px 135px
}
#awwwards.nominee.white.left a {
    background-image: url(../images/awwwards_honorable_white_left.png)
}
@media only screen and (min-device-pixel-ratio: 1.5) {
    #awwwards.nominee.white.left a {
        background-image: url(../images/awwwards_honorable_white_left@2x.png)
    }
}
.cssa {
    position: fixed;
    top: 475px;
    left: 0;
    z-index: 99999
}
.cssa a {
    width: 60px;
    height: 40px;
    text-indent: -9999px;
    display: block;
    background: url(../images/award-cssa.png) no-repeat
}
.Italic {
    font-family: 'Lora', serif;
    font-weight: 400;
    text-transform: none;
    font-style: italic
}
.BorderBox {
    border-top: 1px solid #cacccd;
    border-right: 1px solid #cacccd;
    border-left: 1px solid #cacccd;
    border-bottom: 1px solid #cacccd
}
.BoxSizing {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}
*,
:after,
:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}
body,
html {
    width: 100%;
    height: 100%
}
body {
    font-size: 100%;
    padding: 0;
    margin: 0;
    font-family: 'Lora';
    line-height: 1.6em;
    overflow-x: hidden
}
body main.wrapper {
    opacity: 0
}
body figure {
    line-height: .1!important
}
body.page {
    margin: 0;
    padding: 0;
    background-color: #fff
}
body.page h1 {
    margin: 0;
    padding: 0
}
body.page h1 span {
    font-family: 'Lora', serif;
    display: block;
    font-style: italic;
    font-size: .225em;
    letter-spacing: .1em;
    margin-top: .5em;
    font-weight: 400;
    line-height: 1em;
    text-transform: none
}
body.page h2 {
    line-height: 1em;
    margin: 0 0 .5em 0
}
body.page h2 span {
    display: block;
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: .3em;
    letter-spacing: .1em;
    line-height: 1.3em;
    margin-top: .5em;
    line-height: 1em;
    font-weight: 400;
    text-transform: none
}
body.page p {
    line-height: 1.75em
}
body .et-wrapper {
    background: #3e4041 url(../images/bg-pattern.png) repeat 0 0;
    overflow: hidden;
    text-align: center;
    font-size: 1.15em
}
body .et-wrapper h1 {
    margin: 0;
    font-size: 5.75em
}
body .et-wrapper h1 span {
    font-family: 'Montserrat', sans-serif, sans-serif;
    font-style: normal;
    display: inline-block;
    font-size: 1em;
    letter-spacing: 0;
    margin: inherit;
    line-height: inherit;
    font-weight: inherit;
    text-transform: uppercase
}
.screen-wrap figure {
    margin-left: 0;
    margin-right: 22.5px;
    margin-bottom: 45px
}
.screen-wrap .right figure {
    margin-right: 0;
    margin-left: 22.5px
}
.page .project-top {
    position: relative;
    overflow: visible
}
.page .project-top .main-bg {
    text-align: center;
    position: absolute;
    top: 320px;
    z-index: -1;
    left: 7.5%;
    width: 85%;
    height: 100%
}
.page .project-top .main-img {
    margin-top: -3em;
    text-align: center;
    width: 100%;
    text-align: center
}
.splash-wrap {
    background: transparent url(../images/title-bg-cyan.jpg) no-repeat top right
}
.splash-wrap.vio {
    background-image: url(../images/title-bg-violet.jpg)
}
.splash-wrap.gre {
    background-image: url(../images/title-bg-green.jpg)
}
.splash-wrap.blu {
    background-image: url(../images/title-bg-blue.jpg)
}
.splash-wrap.yel {
    background-image: url(../images/title-bg-yelow.jpg)
}
.splash-wrap.ora {
    background-image: url(../images/title-bg-orange.jpg)
}
.splash-wrap.re {
    background-image: url(../images/title-bg-red.jpg)
}
.splash-wrap.pin {
    background-image: url(../images/title-bg-pink.jpg)
}
.page-top {
    background: #f2f2f2 url(../images/bg-pattern.png) repeat 0 0
}
.bg-detail {
    position: absolute;
    top: 0;
    left: 0
}
.particles-wrap {
    height: auto;
    margin: 0;
    padding: 0;
    overflow: hidden
}
.particles-wrap header {
    padding: 180px 0
}
#particles {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999px;
    display: block;
    width: 100%;
    height: 100%
}
#back-top {
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    position: fixed;
    transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -webkit-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -moz-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -o-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    color: #57595b;
    bottom: 30px;
    right: 30px;
    width: 80px;
    height: 80px;
    text-align: center;
    background-color: #f2f2f2;
    z-index: 2000;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%
}
#back-top a {
    display: block;
    transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -webkit-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -moz-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -o-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    display: inline-block;
    margin: 0;
    width: 80px;
    height: 80px;
    line-height: 1.25em;
    text-decoration: none;
    overflow: hidden
}
#back-top a:focus {
    outline: 0
}
#back-top a:hover span.icon {
    font-size: 2em!important;
    margin-top: 25px;
    color: #fff;
    transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg)
}
#back-top a:hover span.fade {
    opacity: 0
}
#back-top:hover {
    background-color: #252627
}
#back-top span {
    transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -webkit-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -moz-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -o-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    color: #57595b;
    display: block
}
#back-top span.icon {
    font-size: 1.35em;
    margin-top: 15px;
    margin-bottom: 5px
}
#map-canvas {
    width: 100%;
    height: 300px
}
a {
    transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -webkit-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -moz-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -o-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    text-decoration: none;
    color: #252627
}
a span {
    transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -webkit-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -moz-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -o-transition: all 350ms cubic-bezier(0.215, .61, .215, 1)
}
a:hover {
    text-decoration: none;
    color: #252627
}
p {
    font-style: italic
}
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #252627;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    line-height: 1.25em;
    font-family: 'Montserrat', sans-serif, sans-serif
}
h1 {
    font-size: 6.5em;
    text-align: center;
    line-height: 1em;
    letter-spacing: -.025em
}
h1 span {
    font-family: 'Lora', serif;
    font-style: italic
}
h2 {
    font-size: 4.0625em
}
h3 {
    font-size: 2.5em;
    line-height: 1em
}
h4 {
    font-size: 1.55em
}
h5 {
    font-size: 1em;
    text-transform: uppercase
}
h6 {
    font-size: .875em;
    letter-spacing: .1em
}
img {
    width: auto;
    max-width: 100%
}
ul {
    margin: 1em 0 0;
    padding: 0
}
ul li {
    margin: 0;
    padding: 0;
    list-style: none
}
ul li span {
    font-size: .875em
}
hr {
    border: 0;
    height: 1px;
    background-color: #cacccd
}
header {
    position: relative;
    width: 100%;
    text-align: center;
    padding: 60px 0 90px 0
}
canvas {
    color: rgba(255, 255, 255, .2)!important
}
.smaller {
    font-size: .5em
}
.small {
    font-size: .875em
}
.big {
    font-size: 1.5em;
    font-style: normal
}
.bigger {
    font-size: 1.75em
}
.strong {
    font-weight: 700
}
.t-caption {
    display: table-caption
}
a.strong {
    font-style: italic;
    display: inline-block
}
a.strong.cyan {
    border-color: #2fc989
}
a.strong.blue {
    border-color: #1c68e7
}
a.strong.violet {
    border-color: #a836f4
}
a.strong.red {
    border-color: #eb352a
}
a.strong.orange {
    border-color: #f88d24
}
a.strong.pink {
    border-color: #ef3ea2
}
a.strong.green {
    border-color: #80c918
}
a.strong.yellow {
    border-color: #eeb617
}
a.strong:hover {
    border-color: #fff
}
a.link {
    font-weight: 700
}
.header-line {
    position: relative
}
.header-line::before {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    background-color: #fff;
    position: absolute;
    bottom: -1.5em;
    left: 50%;
    margin-left: -20px
}
.header-line.blue::before {
    background-color: #1c68e7
}
.header-line.green::before {
    background-color: #80c918
}
.header-line.orange::before {
    background-color: #f88d24
}
.header-line.yellow::before {
    background-color: #eeb617
}
.header-line.red::before {
    background-color: #eb352a
}
.header-line.pink::before {
    background-color: #ef3ea2
}
.header-line.violet::before {
    background-color: #a836f4
}
.uppercase {
    text-transform: uppercase
}
.subline {
    font-size: 3em;
    text-transform: uppercase;
    margin-top: 0;
    color: #80c918
}
.italic {
    font-family: 'Lora', serif;
    font-style: italic
}
.text-bg {
    background-color: rgba(0, 0, 0, .1);
    padding: 0 15px
}
.tb-offset {
    padding: 150px 0
}
.tb-offset-sm {
    padding: 75px 0
}
.b-offset {
    padding-bottom: 150px
}
.b-offset-sm {
    padding-bottom: 75px
}
.t-offset {
    padding-top: 150px
}
.t-offset-sm {
    padding-top: 75px
}
.success {
    margin-top: 1em;
    background-color: #2fc989;
    font-weight: 700;
    padding: 5px
}
.color-wrap {
    position: relative;
    overflow: hidden
}
.color-wrap figure.bg img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: auto;
    min-height: 100%
}
.color-wrap .services::before {
    background-color: #fff
}
.color-wrap h1,
.color-wrap h2,
.color-wrap h3,
.color-wrap p,
.color-wrap figcaption,
.color-wrap span,
.color-wrap a,
.color-wrap ul,
.color-wrap li {
    color: #fff
}
.body-font {
    font-family: 'Lora', serif;
    font-style: italic;
    font-weight: 400
}
.grey-bg {
    background-color: #252627
}
.cyan-bg {
    background-color: #2fc989
}
.green-bg {
    background-color: #80c918
}
.blue-bg {
    background-color: #1c68e7
}
.lightest-grey-bg {
    background-color: #fafafa
}
.yellow-bg {
    background-color: #eeb617
}
.orange-bg {
    background-color: #f88d24
}
.red-bg {
    background-color: #eb352a
}
.pink-bg {
    background-color: #ef3ea2
}
.violet-bg {
    background-color: #a836f4
}
.fb-green {
    background-color: #80c918;
    color: #fff
}
.fb-blue {
    background-color: #1c68e7;
    color: #fff
}
.fb-yellow {
    background-color: #eeb617;
    color: #fff
}
.fb-orange {
    background-color: #f88d24;
    color: #fff
}
.fb-red {
    background-color: #eb352a;
    color: #fff
}
.fb-violet {
    background-color: #a836f4;
    color: #fff
}
.fb-cyan {
    background-color: #2fc989;
    color: #fff
}
.fb-pink {
    background-color: #ef3ea2;
    color: #fff
}
.grey {
    color: #252627
}
.light-grey {
    color: #96999b
}
.lightest-grey {
    color: #e5e5e6
}
.cyan {
    color: #2fc989
}
.green {
    color: #80c918
}
.blue {
    color: #1c68e7
}
.yellow {
    color: #eeb617
}
.orange {
    color: #f88d24
}
.red {
    color: #eb352a
}
.pink {
    color: #ef3ea2
}
.violet {
    color: #a836f4
}
.white {
    color: #fff
}
.left {
    float: left
}
.right {
    float: right
}
.centered {
    text-align: center
}
.lefted {
    text-align: left!important
}
.righted {
    text-align: right
}
br.clear {
    display: block;
    line-height: 0;
    margin: 0;
    padding: 0;
    font-size: 0;
    clear: both
}
.w25 {
    width: 25%
}
.w30 {
    width: 33.333%
}
.w60 {
    width: 66.666%
}
.w50 {
    width: 50%
}
.w75 {
    width: 75%
}
.w100 {
    width: 100%
}
figcaption {
    display: block;
    padding: 30px 0 22.5px;
    line-height: 1em;
    font-size: 1.15em;
    color: #252627;
    font-style: italic
}
.nominee {
    display: block;
    position: absolute;
    top: 100px;
    left: 0;
    z-index: 99999999;
    width: 61px;
    height: 101px
}
form {
    margin: 0;
    padding: 0;
    color: #fff;
    border: 0
}
form#contactform {
    transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -webkit-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -moz-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -o-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    text-align: center;
    position: relative;
    margin: 30px 0 0 0
}
form#contactform .h-button {
    background-color: #fff;
    border: 0;
    color: #252627;
    font-family: 'Montserrat', sans-serif;
    font-size: 100%;
    padding: 22px 0;
    width: 50%;
    margin-top: 30px
}
form#contactform .h-button:hover {
    margin: 30px 0 0;
    padding: 22px 0;
    letter-spacing: .7em;
    width: 100%;
    letter-spacing: .4em
}
form#contactform p {
    margin-bottom: 33px
}
form#contactform p.smaller {
    margin-bottom: 0
}
form#contactform .left {
    padding-right: 10px;
    padding-bottom: 20px
}
form#contactform .right {
    padding-left: 10px;
    padding-bottom: 20px
}
form label.error {
    display: block;
    text-align: left;
    color: #fff;
    background-color: #eb352a;
    font-size: .875em;
    padding: 0 5px
}
fieldset {
    margin: 0;
    padding: 0;
    border: 0
}
.textbox {
    transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -webkit-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -moz-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -o-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    display: block;
    outline: 0;
    border: 1px solid #fff;
    color: #fff;
    background-color: transparent;
    line-height: 2em;
    padding: 1em;
    position: relative;
    width: 100%;
    vertical-align: middle
}
.textbox.area {
    line-height: 1.5em;
    resize: none
}
.textbox:focus {
    background-color: #fff;
    color: #252627
}
::-webkit-input-placeholder {
    color: #fff
}
::-moz-placeholder {
    color: #fff
}
:-ms-input-placeholder {
    color: #fff
}
input:-moz-placeholder {
    color: #fff
}
.old-browser {
    position: absolute;
    background: #fff url(../images/old-browser.jpg) no-repeat center center;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 9999999
}
.old-browser h2 {
    position: absolute;
    top: 40%;
    font-size: 3.5em;
    width: 100%
}
.old-browser p {
    position: absolute;
    top: 45%;
    width: 100%;
    display: block
}
.wrapper.page-title,
.wrapper.page-title .m-page {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden
}
#loader {
    transition: .5s;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -o-transition: .5s;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 250px;
    height: 250px;
    border-radius: 50%;
    opacity: 1;
    z-index: 5001
}
#loader img {
    display: block;
    width: 80px;
    margin: 83px
}
#loader:before {
    transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -webkit-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -moz-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -o-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    content: "";
    position: fixed;
    top: 40px;
    left: 40px;
    right: 40px;
    bottom: 40px;
    border-radius: 50%;
    border: 4px solid transparent;
    border-top-color: #fff;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite
}
#loader:after {
    transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -webkit-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -moz-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -o-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    content: "";
    position: fixed;
    top: 60px;
    left: 60px;
    right: 60px;
    bottom: 60px;
    border-radius: 50%;
    border: 4px solid transparent;
    border-top-color: #fff;
    -webkit-animation: spin .75s linear infinite;
    animation: spin .75s linear infinite
}
@-webkit-keyframes spin {
    0% {
        transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg)
    }
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg)
    }
}
@-webkit-keyframes spinReverse {
    0% {
        transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg)
    }
    100% {
        transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg)
    }
}
@keyframes spinReverse {
    0% {
        transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg)
    }
    100% {
        transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg)
    }
}
body::before {
    transition: .8s;
    -webkit-transition: .8s;
    -moz-transition: .8s;
    -o-transition: .8s;
    content: "";
    display: block;
    position: fixed;
    top: -5px;
    width: 200%;
    height: 110%;
    /* background-color: #2fc989; */
	background-image: url('../images/deep_blue_ocean_sun.png');
    z-index: 5000;
    opacity: 1;
    left: -20%;
    overflow: hidden;
    transform: skew(-15deg, 0);
    -moz-transform: skew(-15deg, 0);
    -webkit-transform: skew(-15deg, 0);
    -o-transform: skew(-15deg, 0);
    -ms-transform: skew(-15deg, 0)
}
.loaded::before {
    transition: .9s;
    -webkit-transition: .9s;
    -moz-transition: .9s;
    -o-transition: .9s;
    -webkit-transition-delay: .2s;
    -moz-transition-delay: .2s;
    -o-transition-delay: .2s;
    -ms-transition-delay: .2s;
    transition-delay: .2s;
    opacity: 1;
    left: -220%
}
.loaded main.wrapper {
    opacity: 1;
    min-height: 100%;
    height: auto
}
.loaded #loader {
    opacity: 0;
    top: -250px
}
.no-js #loader-wrapper {
    display: none
}
.button.h-button {
    transition: .2s;
    -webkit-transition: .2s;
    -moz-transition: .2s;
    -o-transition: .2s;
    -webkit-transition-delay: .1s;
    -moz-transition-delay: .1s;
    -o-transition-delay: .1s;
    -ms-transition-delay: .1s;
    transition-delay: .1s;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    position: relative;
    text-decoration: none;
    padding: 20px 45px;
    margin: 0;
    background-color: transparent;
    border: 4px solid;
    display: inline-block;
    font-weight: 400;
    font-size: .8em!important;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .4em;
    z-index: 999
}
.button.h-button::after {
    transition: .5s;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -o-transition: .5s;
    z-index: -1;
    display: block;
    content: "";
    height: 2px;
    width: 400%;
    position: absolute;
    top: 50%;
    margin-top: -1px;
    left: -800%
}
.button.h-button span {
    z-index: -1;
    display: block;
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    overflow: hidden
}
.button.h-button span::before {
    transition: .5s;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -o-transition: .5s;
    content: "";
    display: block;
    position: absolute;
    background-color: #2fc989;
    top: -5%;
    left: -210%;
    width: 200%;
    height: 110%;
    transform: skew(-15deg, 0);
    -moz-transform: skew(-15deg, 0);
    -webkit-transform: skew(-15deg, 0);
    -o-transform: skew(-15deg, 0);
    -ms-transform: skew(-15deg, 0)
}
.button.h-button:hover {
    padding: 20px 60px;
    letter-spacing: .7em
}
.button.h-button:hover span::before {
    left: -25%
}
.button.h-button:hover::after {
    width: 120%;
    left: -10%
}
.about-item {
    overflow: visible;
    position: relative
}
.about-item .about-bg {
    position: absolute;
    display: block;
    top: 120px;
    left: 0;
    z-index: -1
}
.about-item.about-item-right .about-bg {
    top: 120px;
    left: 0;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg)
}
.service-wrap h2 {
    margin-bottom: 1.25em!important
}
.service-wrap .w50 {
    overflow: hidden;
    position: relative
}
.service-item {
    border-bottom: 1px solid #d7d9da;
    border-right: 1px solid #d7d9da;
    background-color: transparent
}
.service-item h4 {
    margin-bottom: 0
}
.left:nth-of-type(2) .service-item {
    border-right: 0
}
.left:nth-of-type(3) .service-item {
    border-bottom: 0
}
.left:nth-of-type(4) .service-item {
    border-right: 0;
    border-bottom: 0
}
.service-detail ul {
    transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -webkit-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -moz-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -o-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -webkit-transition-delay: .15s;
    -moz-transition-delay: .15s;
    -o-transition-delay: .15s;
    -ms-transition-delay: .15s;
    transition-delay: .15s;
    font-family: 'Lora', serif;
    font-size: 1.15em;
    margin: 1em 0;
    padding: 0;
    font-style: italic;
    width: 100%
}
.service-detail ul li {
    line-height: 1.75em
}
.services {
    position: relative;
    padding: 1em 0
}
.services::before {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    background-color: #2fc989;
    position: absolute;
    bottom: .5em;
    left: 0
}
.services.blue::before {
    background-color: #1c68e7
}
.services.green::before {
    background-color: #80c918
}
.services.orange::before {
    background-color: #f88d24
}
.services.yellow::before {
    background-color: #eeb617
}
.services.red::before {
    background-color: #eb352a
}
.services.pink::before {
    background-color: #ef3ea2
}
.services.violet::before {
    background-color: #a836f4
}
.services h3 {
    margin: .3em 0;
    line-height: 1.35em!important;
    float: left;
    font-size: 2.5em;
    display: block;
    line-height: 1.2em
}
.color-wrap .services::before {
    background-color: #fff
}
.right .services h4 {
    left: 30px
}
.circle-icon {
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    position: relative;
    display: block;
    border: 3px solid #80c918;
    width: 160px;
    margin: 0 auto;
    height: 160px
}
.circle-icon span {
    display: block;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 3em;
    line-height: 160px;
    color: #80c918
}
.circle-icon svg {
    display: block;
    width: 184px;
    height: 184px;
    position: absolute;
    top: -15px;
    left: -15px
}
.bio-gallery figure {
    background-color: #252627;
    overflow: hidden;
    transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -webkit-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -moz-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -o-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    display: block;
    width: 100%;
    height: 100%;
    position: relative
}
.bio-gallery figure figcaption {
    font-size: 2em;
    font-weight: 400;
    font-family: 'Lora';
    font-style: italic;
    text-transform: none;
    transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -webkit-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -moz-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -o-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    z-index: 6500;
    position: absolute;
    display: block;
    bottom: -100%;
    left: 0;
    padding: 30px;
    color: #fff
}
.bio-gallery figure img {
    transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -webkit-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -moz-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -o-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    width: 100%
}
.bio-gallery figure .animate-icon {
    z-index: 1400;
    display: block;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    left: 0;
    width: 100%;
    color: #fff;
    font-size: 12em;
    text-align: center
}
.bio-gallery figure:hover figcaption {
    bottom: 0
}
.bio-gallery figure:hover img {
    transform: scale(1.05);
    -moz-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    opacity: .5
}
@-webkit-keyframes pulsateHeart {
    0% {
        transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1)
    }
    20% {
        transform: scale(1.2, 1.2);
        -moz-transform: scale(1.2, 1.2);
        -webkit-transform: scale(1.2, 1.2);
        -o-transform: scale(1.2, 1.2);
        -ms-transform: scale(1.2, 1.2)
    }
    40% {
        transform: scale(1.1, 1.1);
        -moz-transform: scale(1.1, 1.1);
        -webkit-transform: scale(1.1, 1.1);
        -o-transform: scale(1.1, 1.1);
        -ms-transform: scale(1.1, 1.1)
    }
    55% {
        transform: scale(1.3, 1.3);
        -moz-transform: scale(1.3, 1.3);
        -webkit-transform: scale(1.3, 1.3);
        -o-transform: scale(1.3, 1.3);
        -ms-transform: scale(1.3, 1.3)
    }
    100% {
        transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1)
    }
}
@-ms-keyframes pulsateHeart {
    0% {
        transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1)
    }
    20% {
        transform: scale(1.2, 1.2);
        -moz-transform: scale(1.2, 1.2);
        -webkit-transform: scale(1.2, 1.2);
        -o-transform: scale(1.2, 1.2);
        -ms-transform: scale(1.2, 1.2)
    }
    40% {
        transform: scale(1.1, 1.1);
        -moz-transform: scale(1.1, 1.1);
        -webkit-transform: scale(1.1, 1.1);
        -o-transform: scale(1.1, 1.1);
        -ms-transform: scale(1.1, 1.1)
    }
    55% {
        transform: scale(1.3, 1.3);
        -moz-transform: scale(1.3, 1.3);
        -webkit-transform: scale(1.3, 1.3);
        -o-transform: scale(1.3, 1.3);
        -ms-transform: scale(1.3, 1.3)
    }
    100% {
        transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1)
    }
}
@-moz-keyframes pulsateHeart {
    0% {
        transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1)
    }
    20% {
        transform: scale(1.2, 1.2);
        -moz-transform: scale(1.2, 1.2);
        -webkit-transform: scale(1.2, 1.2);
        -o-transform: scale(1.2, 1.2);
        -ms-transform: scale(1.2, 1.2)
    }
    40% {
        transform: scale(1.1, 1.1);
        -moz-transform: scale(1.1, 1.1);
        -webkit-transform: scale(1.1, 1.1);
        -o-transform: scale(1.1, 1.1);
        -ms-transform: scale(1.1, 1.1)
    }
    55% {
        transform: scale(1.3, 1.3);
        -moz-transform: scale(1.3, 1.3);
        -webkit-transform: scale(1.3, 1.3);
        -o-transform: scale(1.3, 1.3);
        -ms-transform: scale(1.3, 1.3)
    }
    100% {
        transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1)
    }
}
@keyframes pulsateHeart {
    0% {
        transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1)
    }
    20% {
        transform: scale(1.2, 1.2);
        -moz-transform: scale(1.2, 1.2);
        -webkit-transform: scale(1.2, 1.2);
        -o-transform: scale(1.2, 1.2);
        -ms-transform: scale(1.2, 1.2)
    }
    40% {
        transform: scale(1.1, 1.1);
        -moz-transform: scale(1.1, 1.1);
        -webkit-transform: scale(1.1, 1.1);
        -o-transform: scale(1.1, 1.1);
        -ms-transform: scale(1.1, 1.1)
    }
    55% {
        transform: scale(1.3, 1.3);
        -moz-transform: scale(1.3, 1.3);
        -webkit-transform: scale(1.3, 1.3);
        -o-transform: scale(1.3, 1.3);
        -ms-transform: scale(1.3, 1.3)
    }
    100% {
        transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1)
    }
}
#logo {
    transition: .25s;
    -webkit-transition: .25s;
    -moz-transition: .25s;
    -o-transition: .25s;
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    display: block;
    position: fixed;
    top: 45px;
    left: 45px;
    width: 60px;
    height: 60px;
    z-index: 2000
}
#logo a {
    transition: .2s;
    -webkit-transition: .2s;
    -moz-transition: .2s;
    -o-transition: .2s;
    z-index: 2010
}
#logo a img path {
    transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -webkit-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -moz-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -o-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    margin: 0;
    padding: 0
}
#logo figure::before {
    transition: .35s;
    -webkit-transition: .35s;
    -moz-transition: .35s;
    -o-transition: .35s;
    -webkit-transition-delay: .15s;
    -moz-transition-delay: .15s;
    -o-transition-delay: .15s;
    -ms-transition-delay: .15s;
    transition-delay: .15s;
    content: "";
    position: absolute;
    top: 0;
    left: -5px;
    right: -5px;
    bottom: -10px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-right-color: #252627;
    border-left-color: #252627
}
#logo figure::after {
    transition: .35s;
    -webkit-transition: .35s;
    -moz-transition: .35s;
    -o-transition: .35s;
    content: "";
    position: absolute;
    top: 0;
    left: -5px;
    right: -5px;
    bottom: -10px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #252627;
    border-bottom-color: #252627
}
#logo:hover figure::before {
    transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg)
}
#logo:hover::after {
    transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg)
}
#nav-icon {
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    z-index: 2100;
    width: 50px;
    height: 40px;
    position: fixed;
    top: 52.5px;
    right: 45px;
    padding: 30px 0;
    transition: .5s ease-in-out;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    cursor: pointer
}
#nav-icon span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: #252627;
    opacity: 1;
    left: 0;
    transition: .2s;
    -webkit-transition: .2s;
    -moz-transition: .2s;
    -o-transition: .2s
}
#nav-icon span:nth-child(1) {
    top: 8px
}
#nav-icon span:nth-child(2),
#nav-icon span:nth-child(3) {
    top: 22px
}
#nav-icon span:nth-child(4) {
    top: 36px
}
#nav-icon.open span:nth-child(1) {
    top: 16px;
    width: 0;
    left: 50%
}
#nav-icon.open span:nth-child(2) {
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg)
}
#nav-icon.open span:nth-child(3) {
    transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg)
}
#nav-icon.open span:nth-child(4) {
    top: 18px;
    width: 0;
    left: 50%
}
#nav-icon.open span {
    background-color: #fff
}
#menu {
    height: 100%;
    background-color: none
}
.menu {
    margin: 0;
    height: 100%;
    width: 100%;
    padding: 0;
    position: relative
}
.menu li {
    transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -webkit-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -moz-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -o-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    line-height: 2em;
    font-weight: 700;
    margin: 0;
    padding: 0
}
.menu li a {
    transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -webkit-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -moz-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -o-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    background-color: transparent;
    border: 0;
    position: relative;
    padding: 0;
    color: #fff;
    text-decoration: none
}
.menu-trigger {
    transition: .5s;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -o-transition: .5s;
    z-index: 2050;
    position: fixed;
    top: -150%;
    left: 0;
    width: 100%;
    height: 100%;
    font-weight: 700;
    display: block;
    font-size: 2.25em;
    text-align: left;
    text-transform: uppercase;
    background: rgba(37, 38, 39, .97) url(../images/bg-pattern.png) repeat 0 0;
    overflow: hidden
}
.menu-trigger li {
    transition: all 300ms cubic-bezier(0.235, .625, .07, .98);
    -webkit-transition: all 300ms cubic-bezier(0.235, .625, .07, .98);
    -moz-transition: all 300ms cubic-bezier(0.235, .625, .07, .98);
    -o-transition: all 300ms cubic-bezier(0.235, .625, .07, .98);
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    text-align: center;
    width: 100%;
    opacity: 0;
    position: absolute;
    letter-spacing: .2em;
    top: -150%
}
.menu-trigger li a {
    transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -webkit-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -moz-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -o-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    z-index: 8888;
    color: #fff;
    overflow: visible;
    margin: 0;
    padding: 0
}
.menu-trigger li.menu-social {
    top: 200%;
    font-size: .4em;
    color: #6f7276;
    margin: 0;
    letter-spacing: .1em;
    font-weight: 400;
    padding: 0
}
.menu-trigger .s-1,
.menu-trigger .s-2,
.menu-trigger .s-3,
.menu-trigger .s-4,
.menu-trigger .s-5,
.menu-trigger .s-6 {
    display: inline-block;
    margin: 0;
    width: 60px;
    height: 60px;
    font-size: 2.25em;
    letter-spacing: 0
}
.menu-trigger .s-1 a,
.menu-trigger .s-2 a,
.menu-trigger .s-3 a,
.menu-trigger .s-4 a,
.menu-trigger .s-5 a,
.menu-trigger .s-6 a {
    display: block;
    line-height: 60px;
    color: rgba(255, 255, 255, .5);
    background-color: transparent
}
.menu-trigger .m-1 a:hover,
.menu-trigger .m-2 a:hover,
.menu-trigger .m-3 a:hover,
.menu-trigger .m-4 a:hover {
    letter-spacing: .4em
}
.menu-trigger .m-1 a.active,
.menu-trigger .m-2 a.active,
.menu-trigger .m-3 a.active,
.menu-trigger .m-4 a.active,
.menu-trigger .m-1 a.active:hover,
.menu-trigger .m-2 a.active:hover,
.menu-trigger .m-3 a.active:hover,
.menu-trigger .m-4 a.active:hover {
    letter-spacing: .2em
}
.menu-trigger.opened {
    -webkit-transition-delay: .15s;
    -moz-transition-delay: .15s;
    -o-transition-delay: .15s;
    -ms-transition-delay: .15s;
    transition-delay: .15s;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}
.menu-trigger.opened li {
    opacity: 1
}
.menu-trigger.opened .m-1 {
    -webkit-transition-delay: .84s;
    -moz-transition-delay: .84s;
    -o-transition-delay: .84s;
    -ms-transition-delay: .84s;
    transition-delay: .84s;
    top: 12%
}
.menu-trigger.opened .m-2 {
    -webkit-transition-delay: .78s;
    -moz-transition-delay: .78s;
    -o-transition-delay: .78s;
    -ms-transition-delay: .78s;
    transition-delay: .78s;
    top: 22%
}
.menu-trigger.opened .m-3 {
    -webkit-transition-delay: .72s;
    -moz-transition-delay: .72s;
    -o-transition-delay: .72s;
    -ms-transition-delay: .72s;
    transition-delay: .72s;
    top: 32%
}
.menu-trigger.opened .m-4 {
    -webkit-transition-delay: .66s;
    -moz-transition-delay: .66s;
    -o-transition-delay: .66s;
    -ms-transition-delay: .66s;
    transition-delay: .66s;
    top: 42%
}
.menu-trigger.opened .m-5 {
    -webkit-transition-delay: .6s;
    -moz-transition-delay: .6s;
    -o-transition-delay: .6s;
    -ms-transition-delay: .6s;
    transition-delay: .6s;
    top: 52%
}
.menu-trigger.opened a.active,
.menu-trigger.opened a:hover {
    color: #2fc989
}
.menu-trigger.opened .menu-social {
    -webkit-transition-delay: 1.1s;
    -moz-transition-delay: 1.1s;
    -o-transition-delay: 1.1s;
    -ms-transition-delay: 1.1s;
    transition-delay: 1.1s;
    top: 57%
}
.menu-trigger.opened .s-1,
.menu-trigger.opened .s-2,
.menu-trigger.opened .s-3,
.menu-trigger.opened .s-4,
.menu-trigger.opened .s-5,
.menu-trigger.opened .s-6 {
    position: static
}
.menu-trigger.opened .s-1 a,
.menu-trigger.opened .s-2 a,
.menu-trigger.opened .s-3 a,
.menu-trigger.opened .s-4 a,
.menu-trigger.opened .s-5 a,
.menu-trigger.opened .s-6 a {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -ms-transition-delay: 0s;
    transition-delay: 0s;
    color: #fff
}
.menu-trigger.opened .s-1 a:hover,
.menu-trigger.opened .s-2 a:hover,
.menu-trigger.opened .s-3 a:hover,
.menu-trigger.opened .s-4 a:hover,
.menu-trigger.opened .s-5 a:hover,
.menu-trigger.opened .s-6 a:hover {
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    background-color: #2fc989
}
.menu-trigger.opened .s-1 a::before,
.menu-trigger.opened .s-2 a::before,
.menu-trigger.opened .s-3 a::before,
.menu-trigger.opened .s-4 a::before,
.menu-trigger.opened .s-5 a::before,
.menu-trigger.opened .s-6 a::before,
.menu-trigger.opened .s-1 a::after,
.menu-trigger.opened .s-2 a::after,
.menu-trigger.opened .s-3 a::after,
.menu-trigger.opened .s-4 a::after,
.menu-trigger.opened .s-5 a::after,
.menu-trigger.opened .s-6 a::after {
    display: none!important
}
.menu-trigger.opened .s-1 span,
.menu-trigger.opened .s-2 span,
.menu-trigger.opened .s-3 span,
.menu-trigger.opened .s-4 span,
.menu-trigger.opened .s-5 span,
.menu-trigger.opened .s-6 span {
    padding: 0;
    margin: 0
}
.menu-trigger.opened .s-1.active,
.menu-trigger.opened .s-2.active,
.menu-trigger.opened .s-3.active,
.menu-trigger.opened .s-4.active,
.menu-trigger.opened .s-5.active,
.menu-trigger.opened .s-6.active,
.menu-trigger.opened .s-1:hover,
.menu-trigger.opened .s-2:hover,
.menu-trigger.opened .s-3:hover,
.menu-trigger.opened .s-4:hover,
.menu-trigger.opened .s-5:hover,
.menu-trigger.opened .s-6:hover {
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%
}
.cl-effect-3 a::before {
    z-index: -1;
    transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -webkit-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -moz-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -o-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    background-color: #2fc989;
    display: block;
    content: "";
    height: 2px;
    width: 200%;
    position: absolute;
    top: 50%;
    left: -300%;
    opacity: 0
}
.cl-effect-3 a:hover::before,
.cl-effect-3 a:focus::before,
.cl-effect-3 a.active::before {
    width: 110%;
    opacity: 1;
    left: -10%
}
.et-wrapper {
    position: relative;
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    perspective: 1200px;
    display: block;
    height: 100vh
}
.et-page {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    color: #252627
}
.et-page p {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 1.15em
}
.page-wrap {
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    max-width: 1100px;
    width: 100%;
    padding: 90px;
    margin: 0
}
.title-subhead {
    line-height: 1.75em;
    position: relative
}
.title-subhead p {
    padding: 1.5em 0 2em;
    margin: 0
}
.title-subhead .h-button {
    font-size: 70%;
    color: #252627
}
.et-page-current,
.no-js .et-page {
    visibility: visible;
    overflow: hidden;
    z-index: 20
}
.no-js body {
    overflow: auto
}
.et-page-ontop {
    z-index: 99999
}
.et-rotate {
    cursor: pointer
}
#page-1 {
    position: relative
}
#page-1 .h-button {
    border-color: #2fc989;
    color: #2fc989
}
#page-1 .h-button::after {
    background-color: #2fc989
}
#page-1 .pager li.current,
#page-1 .pager li:hover {
    border-color: #2fc989
}
#page-2 .h-button {
    border-color: #80c918;
    color: #80c918
}
#page-2 .h-button::after {
    background-color: #80c918
}
#page-2 .h-button span::before {
    background-color: #80c918
}
#page-2 .pager li.current,
#page-2 .pager li:hover {
    /* border-color: #80c918 */
}
/*
#page-3 .h-button {
    border-color: #1c68e7;
    color: #1c68e7
}
#page-3 .h-button::after {
    background-color: #fff
}
#page-3 .h-button span::before {
    background-color: #1c68e7
}
#page-3 .pager li.current,
#page-3 .pager li:hover {
    border-color: #1c68e7
}*/
#page-4 .h-button {
    border-color: #eb352a;
    color: #eb352a
}
#page-4 .h-button::after {
    background-color: #eb352a
}
#page-4 .h-button span::before {
    background-color: #eb352a
}
#page-4 .pager li.current,
#page-4 .pager li:hover {
    border-color: #eb352a
}
#page-5 .h-button {
    border-color: #f88d24;
    color: #f88d24
}
#page-5 .h-button::after {
    background-color: #f88d24
}
#page-5 .h-button span::before {
    background-color: #f88d24
}
#page-5 .pager li.current,
#page-5 .pager li:hover {
    border-color: #f88d24
}
.et-page {
    overflow: hidden
}
.et-page img.title-bg {
    z-index: -1;
    display: block;
    position: absolute;
    top: 100px;
    right: 0
}
.et-page .h-button:hover {
    color: #fff!important
}
ul.pager {
    margin: 0;
    padding: 60px 30px 30px;
    width: 100%;
    overflow: hidden
}
ul.pager li {
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -webkit-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -moz-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -o-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    display: inline-block;
    height: 25px;
    width: 25px;
    margin: 0 10px;
    z-index: 10;
    text-indent: -9999px;
    position: relative;
    border-top: 1px solid #cacccd;
    border-right: 1px solid #cacccd;
    border-left: 1px solid #cacccd;
    border-bottom: 1px solid #cacccd;
    border-color: #d7d9da;
    border-width: 4px;
    overflow: visible
}
ul.pager li.current {
    border-color: #eb352a
}
ul.pager li.current::before,
ul.pager li.clicked::before {
    display: none!important
}
.container,
.header {
    height: 100%;
    background-color: #fff
}
.header {
    position: relative;
    margin: 0 auto;
    min-height: 560px;
    width: 100%
}
.bg-img {
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}
.bg-img img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    min-width: 100%;
    min-height: 100%
}
.title {
    z-index: 1000;
    margin: 0 auto;
    padding: 0 1.25em;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translatex(-50%) translatey(-50%);
    transform: translatex(-50%) translatey(-50%)
}
.h-wrap.c-wrap .h-button {
    background: 0;
    border-color: #1c68e7;
    color: #1c68e7;
    font-family: 'Montserrat', sans-serif;
    font-size: 100%
}
.h-wrap.c-wrap .h-button:hover {
    background-color: #1c68e7;
    color: #fff
}
.btn-bottom-wrap {
    width: 100%
}
.btn-bottom {
    display: block;
    width: 100%;
    margin-top: 45px;
    text-align: center
}
button.trigger {
    position: absolute;
    bottom: 100px;
    left: 50%;
    z-index: 5000;
    display: block;
    margin-left: -.5em;
    padding: 0;
    width: 1em;
    height: 1em;
    border: 0;
    background: transparent;
    color: transparent;
    font-size: 2em;
    cursor: pointer
}
button.trigger span::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #252627;
    content: "\e3c5";
    text-transform: none;
    font-weight: 400;
    font-style: normal;
    font-variant: normal;
    font-family: 'icomoon';
    line-height: 1;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}
.container:not(.notrans) button.trigger {
    -webkit-transition: opacity .3s .5s;
    transition: opacity .3s .5s
}
.container.modify:not(.notrans) button.trigger {
    opacity: 0;
    pointer-events: none;
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}
button.trigger:focus {
    outline: 0
}
.content-big {
    max-width: 1280px;
    margin: 0 auto
}
.content-med {
    max-width: 960px;
    margin: 0 auto
}
.content {
    max-width: 820px;
    margin: 0 auto
}
.content-sm {
    max-width: 620px;
    margin: 0 auto
}
.port-more-wrap {
    background: #fff url(../images/title-bg-cyan.jpg) no-repeat top right;
    overflow: hidden;
    border-top: 1px solid #f2f2f2
}
.port-more {
    transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -webkit-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -moz-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -o-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    display: block;
    position: relative;
    overflow: hidden;
    margin-top: 50px;
    line-height: .1em
}
.port-more::after {
    transition: .45s;
    -webkit-transition: .45s;
    -moz-transition: .45s;
    -o-transition: .45s;
    display: block;
    content: "";
    width: 200%;
    height: 110%;
    position: absolute;
    top: -5%;
    left: -230%;
    background-color: #2fc989;
    opacity: .1;
    z-index: 30;
    transform: skew(-15deg, 0);
    -moz-transform: skew(-15deg, 0);
    -webkit-transform: skew(-15deg, 0);
    -o-transform: skew(-15deg, 0);
    -ms-transform: skew(-15deg, 0)
}
.port-more .figcaption {
    transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -webkit-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -moz-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -o-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -webkit-transition-delay: .15s;
    -moz-transition-delay: .15s;
    -o-transition-delay: .15s;
    -ms-transition-delay: .15s;
    transition-delay: .15s;
    z-index: 5555;
    position: absolute;
    display: block;
    width: 100%;
    text-align: center;
    top: 110%;
    left: 0;
    color: #fff;
    font-size: 2em;
    font-weight: 700
}
.port-more:hover .figcaption {
    top: 50%;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%)
}
.port-more:hover::after {
    left: -85%;
    opacity: 1
}
.grid {
    position: relative;
    margin: 0 auto;
    list-style: none;
    text-align: center;
    line-height: 0
}
.grid .grid-item {
    transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -webkit-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -moz-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -o-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    padding: 0;
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 10;
    overflow: hidden
}
.grid .grid-item::after {
    transition: .5s;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -o-transition: .5s;
    display: block;
    content: "";
    width: 200%;
    height: 110%;
    position: absolute;
    top: -5%;
    left: -230%;
    background-color: #2fc989;
    opacity: .1;
    z-index: 30;
    transform: skew(-15deg, 0);
    -moz-transform: skew(-15deg, 0);
    -webkit-transform: skew(-15deg, 0);
    -o-transform: skew(-15deg, 0);
    -ms-transform: skew(-15deg, 0)
}
.grid .grid-item.cyan::after {
    background-color: #2fc989
}
.grid .grid-item.cyan h2::after {
    background-color: #2fc989
}
.grid .grid-item.blue::after {
    background-color: #1c68e7
}
.grid .grid-item.blue h2::after {
    background-color: #1c68e7
}
.grid .grid-item.orange::after {
    background-color: #f88d24
}
.grid .grid-item.orange h2::after {
    background-color: #f88d24
}
.grid .grid-item.red::after {
    background-color: #eb352a
}
.grid .grid-item.red h2::after {
    background-color: #eb352a
}
.grid .grid-item.green::after {
    background-color: #80c918
}
.grid .grid-item.green h2::after {
    background-color: #80c918
}
.grid .grid-item.violet::after {
    background-color: #a836f4
}
.grid .grid-item.violet h2::after {
    background-color: #a836f4
}
.grid .grid-item.yellow::after {
    background-color: #eeb617
}
.grid .grid-item.yellow h2::after {
    background-color: #eeb617
}
.grid .grid-item.pink::after {
    background-color: #ef3ea2
}
.grid .grid-item.pink h2::after {
    background-color: #ef3ea2
}
.grid .grid-item:hover .figcaption h2::after {
    left: 0;
    width: 30%
}
.grid .grid-item:hover .figcaption h3 {
    transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1)
}
.grid .grid-item:hover img {
    transform: scale(1.05);
    -moz-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05)
}
.grid .grid-item.cyan:hover h2 {
    color: #2fc989
}
.grid .grid-item.blue:hover h2 {
    color: #1c68e7
}
.grid .grid-item.orange:hover h2 {
    color: #f88d24
}
.grid .grid-item.yellow:hover h2 {
    color: #eeb617
}
.grid .grid-item.red:hover h2 {
    color: #eb352a
}
.grid .grid-item.green:hover h2 {
    color: #80c918
}
.grid .grid-item.violet:hover h2 {
    color: #a836f4
}
.grid .grid-item.pink:hover h2 {
    color: #ef3ea2
}
.grid.grid-half .grid-item {
    width: 50%;
    float: left
}
.grid figure {
    transition: .35s;
    -webkit-transition: .35s;
    -moz-transition: .35s;
    -o-transition: .35s;
    width: 55%;
    position: relative;
    overflow: hidden;
    margin: 0;
    text-align: center;
    cursor: pointer;
    padding: 0
}
.grid figure img {
    transition: 2s;
    -webkit-transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    position: relative;
    min-width: 320px;
    max-width: 100%;
    opacity: 1
}
.grid .figcaption {
    transition: .35s;
    -webkit-transition: .35s;
    -moz-transition: .35s;
    -o-transition: .35s;
    line-height: 1.5em;
    position: absolute;
    width: 50%;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(10%, -50%);
    -moz-transform: translate(10%, -50%);
    -webkit-transform: translate(10%, -50%);
    -o-transform: translate(10%, -50%);
    -ms-transform: translate(10%, -50%);
    color: #252627;
    text-transform: uppercase;
    z-index: 50
}
.grid .figcaption h2 {
    transition: .35s;
    -webkit-transition: .35s;
    -moz-transition: .35s;
    -o-transition: .35s;
    margin: .3em 0;
    text-align: left;
    line-height: 1.35em!important;
    font-size: 2.85em;
    display: block;
    line-height: 1.2em
}
.grid .figcaption h2::after {
    transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -webkit-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -moz-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -o-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    content: "";
    display: block;
    position: absolute;
    top: 70%;
    left: 100%;
    height: 2px;
    width: 200%
}
.grid .figcaption h3 {
    transition: 2s;
    -webkit-transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    position: absolute;
    display: block;
    text-align: left;
    width: 100%;
    top: -100px;
    z-index: -1;
    left: -30px;
    top: -1.15em;
    font-size: 4em;
    text-transform: none;
    font-family: 'Lora', serif;
    line-height: .95em;
    font-weight: 400;
    color: rgba(37, 38, 39, .05)
}
.grid .figcaption span {
    transition: .35s;
    -webkit-transition: .35s;
    -moz-transition: .35s;
    -o-transition: .35s;
    font-size: 1.25em;
    font-family: 'Lora', serif;
    font-style: italic;
    display: block;
    line-height: 1em;
    text-transform: none;
    text-align: left
}
.grid .grid-item.grid-item-right .figcaption {
    top: 50%;
    left: 0;
    transform: translate(-10%, -55%);
    -moz-transform: translate(-10%, -55%);
    -webkit-transform: translate(-10%, -55%);
    -o-transform: translate(-10%, -55%);
    -ms-transform: translate(-10%, -55%)
}
.grid .grid-item.grid-item-right .figcaption h2,
.grid .grid-item.grid-item-right .figcaption h3,
.grid .grid-item.grid-item-right .figcaption span {
    text-align: right
}
.grid .grid-item.grid-item-right .figcaption h2::after {
    left: -200%
}
.grid .grid-item.grid-item-right:hover h2:after {
    left: 70%
}
.related-projects .rel-item {
    float: left;
    width: 50%;
    position: relative;
    overflow: hidden;
    border-right: 1px solid #e5e5e6
}
.related-projects .rel-item h4 {
    transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -webkit-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -moz-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -o-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    font-family: 'Lora', serif;
    font-weight: 400;
    text-transform: none;
    font-style: italic;
    letter-spacing: .15em
}
.related-projects .rel-item h4 span {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -ms-transition-delay: 0s;
    transition-delay: 0s;
    font-size: .75em
}
.related-projects .rel-item::after {
    z-index: -1;
    transition: .5s;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -o-transition: .5s;
    content: "";
    display: block;
    position: absolute;
    background-color: #2fc989;
    top: -5%;
    left: -200%;
    width: 150%;
    height: 110%;
    transform: skew(-15deg, 0);
    -moz-transform: skew(-15deg, 0);
    -webkit-transform: skew(-15deg, 0);
    -o-transform: skew(-15deg, 0);
    -ms-transform: skew(-15deg, 0)
}
.related-projects .rel-item:hover h4 {
    color: #fff
}
.related-projects .rel-item:hover h4 span {
    color: #fff
}
.related-projects .rel-item:hover::after {
    left: -25%
}
.related-projects .rel-item.blue:hover::after {
    background-color: #1c68e7
}
.related-projects .rel-item.green:hover::after {
    background-color: #80c918
}
.related-projects .rel-item.yellow:hover::after {
    background-color: #eeb617
}
.related-projects .rel-item.orange:hover::after {
    background-color: #f88d24
}
.related-projects .rel-item.red:hover::after {
    background-color: #eb352a
}
.related-projects .rel-item.violet:hover::after {
    background-color: #a836f4
}
.related-projects .rel-item.pink:hover::after {
    background-color: #ef3ea2
}
.related-projects h4 {
    text-align: center;
    padding: 90px 0
}
.s-button {
    transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -webkit-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -moz-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -o-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    position: relative;
    display: inline-block;
    overflow: visible;
    height: 135px;
    width: 135px;
    background-color: #d7d9da;
    color: #fff;
    margin-right: 15px;
    text-align: center
}
.s-button span {
    transition: .15s;
    -webkit-transition: .15s;
    -moz-transition: .15s;
    -o-transition: .15s;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 2em;
    display: block;
    height: 100%;
    top: 50%;
    line-height: 1em;
    margin-top: -.5em;
    width: 100%
}
.s-button:hover {
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    background-color: #252627;
    color: #fff
}
.f-contact .italic {
    margin: 1.5em 0 1em;
    font-size: 1.25em
}
.f-contact .h-wrap {
    margin-top: 2em
}
.f-contact .button.h-button {
    color: #fff;
    border-color: #fff
}
.f-contact .button.h-button::after {
    background-color: #fff
}
.f-contact .button.h-button span::before {
    background-color: #fff
}
.f-contact .button.h-button:hover {
    color: #252627;
    border-color: #fff
}
.f-contact .button.h-button:hover span::before {
    background-color: #fff
}
.sharer-about {
    position: relative;
    background-color: #f88d24;
    overflow: hidden
}
.sharer-about img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0
}
.sharer-about .s-button {
    background-color: rgba(37, 38, 39, .1)
}
.sharer-about .s-button:hover {
    background-color: #252627
}
.footer {
    background-color: #252627;
    color: #898c8f;
    letter-spacing: .05em;
    word-spacing: .1em
}
.footer p {
    margin: 0
}
.footer .footer-social {
    margin: 22.5px
}
.footer .footer-social li {
    transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -webkit-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -moz-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -o-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    display: inline-block;
    margin: 0;
    width: 60px;
    height: 60px;
    font-size: 2em;
    letter-spacing: 0
}
.footer .footer-social li a {
    transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -webkit-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -moz-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -o-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -ms-transition-delay: 0s;
    transition-delay: 0s;
    display: block;
    line-height: 60px;
    color: rgba(255, 255, 255, .5)
}
.footer .footer-social li:hover {
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    background-color: #2fc989;
    color: #fff
}
.footer .footer-social li:hover a {
    color: #fff
}
.contact {
    height: 100vh;
    padding: 0;
    background: #80c918 url(../images/contact-bg.jpg) no-repeat top left
}
.contact section.contact {
    overflow: visible
}
.contact header {
    padding-bottom: 0
}
.contact h1 span {
    color: #fff
}
.contact .footer {
    background-color: transparent
}
.c #nav-icon span {
    background-color: #fff
}
.c #logo figure::before {
    border-right-color: #fff;
    border-left-color: #fff
}
.c #logo figure::after {
    border-top-color: #fff;
    border-bottom-color: #fff
}
.m-detail-layout {
    width: 100%;
    height: 100%
}
.m-scene .scene_element {
    -webkit-animation-duration: .25s;
    animation-duration: .25s;
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}
.m-scene .scene_element--fadein {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}
.m-scene .scene_element--fadeinup {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
}
.m-scene .scene_element--fadeinupbig {
    -webkit-animation-name: fadeInUpBig;
    animation-name: fadeInUpBig
}
.m-scene .scene_element--fadeinright {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight
}
.m-scene .scene_element--delayed {
    -webkit-animation-delay: .25s;
    animation-delay: .25s
}
.m-scene.is-exiting .scene_element {
    -webkit-animation-direction: alternate-reverse;
    animation-direction: alternate-reverse
}
.m-scene.is-exiting .scene_element--delayed {
    -webkit-animation-delay: 0s;
    animation-delay: 0s
}
.m-scene.is-exiting .scene_element--noexiting {
    -webkit-animation-direction: alternate-reverse;
    animation-direction: alternate-reverse
}
@media only screen and (min-width: 1680px) {
    body.home #logo,
    body.home #nav-icon {
        margin: 0
    }
    .w50 img {
        width: 100%
    }
}
@media only screen and (max-width: 1680px) {
    .skill-desc {
        padding: 120px 90px 0 230px
    }
    .left .skill-desc {
        padding: 120px 230px 0 90px
    }
}
@media only screen and (max-width: 1366px) {
    body.home {
        font-size: 1em
    }
    .skill-desc {
        padding: 60px 60px 0 230px
    }
    .left .skill-desc {
        padding: 60px 230px 0 60px
    }
    .content-big {
        padding-left: 30px;
        padding-right: 30px
    }
    .bio-gallery img {
        opacity: .6
    }
    .related-projects .rel-item h4 {
        transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
        -webkit-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
        -moz-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
        -o-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
        letter-spacing: .2em
    }
    .related-projects .rel-item:hover h4 {
        color: #fff;
        letter-spacing: .2em
    }
}
@media only screen and (max-width: 1280px) {
    body.home {
        overflow: hidden;
        animation: none;
        -webkit-animation: none;
        -moz-animation: none;
        -ms-animation: none
    }
    header {
        padding: 30px 0 45px 0
    }
    .page .project-top .main-img {
        margin-top: -1em
    }
    .project-detail aside h3.t-caption {
        font-size: 2em
    }
    .skill-item .left.w50,
    .skill-item .right.w50 {
        float: none;
        width: 100%
    }
    .skill-item figure img {
        width: 100%
    }
    .skill-desc {
        padding: 60px
    }
    .left .skill-desc {
        padding: 60px
    }
}
@media only screen and (max-width: 1024px) {
    .t-offset {
        padding-top: 90px
    }
    .b-offset {
        padding-bottom: 90px
    }
    .tb-offset {
        padding-top: 90px;
        padding-bottom: 90px
    }
    .t-offset-sm {
        padding-top: 30px
    }
    .b-offset-sm {
        padding-bottom: 45px
    }
    .tb-offset-sm {
        padding-top: 30px;
        padding-bottom: 45px
    }
    body.home {
        margin: 0;
        padding: 0!important
    }
    body.page {
        text-align: left!important
    }
    body.page h1 {
        font-size: 5em!important
    }
    body.page h2 {
        font-size: 3em!important
    }
    body.page h2 span {
        font-size: .425em!important
    }
    #logo {
        margin: 0;
        top: 30px;
        left: 30px
    }
    #logo figure::before,
    #logo figure::after {
        border-width: 2px
    }
    #nav-icon {
        top: 45px;
        right: 30px
    }
    #loader {
        width: 215px;
        height: 215px
    }
    #loader img {
        display: block;
        width: 50px
    }
    .page-wrap {
        width: 100%;
        padding: 60px
    }
    .et-page img.title-bg {
        right: -20%
    }
    .page .project-top .main-bg {
        top: 220px
    }
    .services h3 {
        font-size: 1.75em
    }
    .grid .grid-item h2 {
        font-size: 2.25em!important
    }
    .rel-anchor {
        display: none!important
    }
    .content,
    .content-sm,
    .content-med,
    .content-big {
        padding-left: 30px;
        padding-right: 30px
    }
    #contactform .content-sm {
        padding: 0
    }
    .project-detail aside {
        text-align: left;
        padding-left: 0;
        padding-top: 15px;
        padding-right: 30px;
        padding-bottom: 0
    }
    .project-detail aside.right {
        padding-left: 30px;
        padding-right: 0
    }
    .grid.grid-half .grid-item {
        width: 100%;
        float: none
    }
    .quot-car {
        margin: 90px 120px
    }
    .border-box {
        border-bottom: 0
    }
    .border-box .w50 {
        width: 100%
    }
    .border-box .right {
        display: none
    }
    .button.h-button {
        color: #252627!important;
        padding: 20px 45px!important
    }
    .button.h-button::after {
        display: none
    }
    .button.h-button span {
        display: none
    }
    .button.h-button:hover {
        color: #252627!important;
        padding: 20px 45px!important
    }
    .f-contact .button.h-button {
        color: #fff!important
    }
    .about-item {
        padding: 0 30px
    }
    .about-item .left,
    .about-item .right {
        float: none;
        width: 100%
    }
    .about-item figure {
        display: none
    }
}
@media only screen and (max-width: 768px) {
    .t-offset {
        padding-top: 60px
    }
    .b-offset {
        padding-bottom: 60px
    }
    .tb-offset {
        padding-top: 60px;
        padding-bottom: 60px
    }
    .w50,
    .grid-item {
        width: 100%!important
    }
    figure img {
        width: 100%
    }
    .page .project-top {
        position: relative;
        overflow: visible
    }
    .left.w25 figure {
        display: none
    }
    .sharer-about {
        padding-left: 15px;
        padding-right: 15px
    }
    .sharer-about img {
        display: none
    }
    .award-badge {
        display: none!important
    }
    body {
        font-size: 87.5%!important
    }
    body.page {
        text-align: left!important
    }
    body.page h1 {
        font-size: 3em!important;
        margin-top: .75em!important;
        line-height: 1em
    }
    body.page h1 span {
        font-size: .4em!important;
        line-height: 1.3em
    }
    body.page h1+p {
        margin-top: 1.5em
    }
    body.page h2 {
        font-size: 2.25em!important
    }
    body.page h2 span {
        font-size: .4em!important
    }
    body.page .page-title h1 {
        font-size: 2.5em!important;
        line-height: .9em!important
    }
    body .page-title h1 span {
        font-size: 1em!important;
        line-height: .9em!important
    }
    body.home {
        font-size: .9em
    }
    body.home h1 {
        font-size: 2.5em
    }
    header {
        padding: 30px 0 30px 0
    }
    .w25 {
        width: 100%;
        padding-top: 0;
        padding-bottom: 30px
    }
    .w30 {
        width: 100%
    }
    aside {
        width: 100%
    }
    .w60 {
        width: 100%
    }
    .w75 {
        width: 100%
    }
    .left.w25.t-offset-sm,
    .right.w25.t-offset-sm {
        padding-top: 0
    }
    .screen-wrap figure {
        margin-right: 0
    }
    .screen-wrap .right figure {
        margin-right: 0;
        margin-left: 0
    }
    .bio-gallery .w25 {
        padding-bottom: 0
    }
    .bio-gallery figcaption {
        bottom: 0!important
    }
    .page .project-top .main-bg {
        top: 175px
    }
    .particles-wrap header {
        padding: 90px 0
    }
    .h-button {
        letter-spacing: .1em!important
    }
    .h-wrap {
        margin-top: 15px!important
    }
    .h-wrap .h-button {
        margin-bottom: 1em!important;
        font-size: 100%;
        padding: 14px 45px!important
    }
    .h-wrap .h-button:hover {
        padding: 14px 45px!important
    }
    figure.bg {
        display: none
    }
    ul.pager {
        padding: 30px
    }
    ul.pager li {
        height: 18px;
        width: 18px
    }
    ul.pager li a {
        width: 18px;
        height: 18px
    }
    ul.pager li::before {
        border: 2px solid #bdbfc1;
        height: 26px;
        width: 26px;
        top: -4px;
        left: -4px
    }
    .title-subhead {
        line-height: 1.75em;
        position: relative
    }
    .title-subhead p {
        padding: 1em 0 1.2em;
        margin: 0
    }
    .counter-wrap .counter {
        font-size: 4.5em;
        width: 95px
    }
    .counter-wrap .counter-name {
        font-size: 1.5em
    }
    .about-item {
        padding: 0
    }
    .about-item .tb-offset {
        padding: 0
    }
    .dotstyle ul {
        margin-top: 30px
    }
    #logo {
        width: 50px;
        height: 50px;
        top: 15px;
        left: 15px
    }
    #nav-icon {
        width: 30px!important;
        padding: 0!important;
        top: 25px;
        right: 15px
    }
    #nav-icon span:nth-child(1) {
        top: 0
    }
    #nav-icon span:nth-child(2),
    #nav-icon span:nth-child(3) {
        top: 10px
    }
    #nav-icon span:nth-child(4) {
        top: 20px
    }
    #nav-icon.open span:nth-child(1) {
        top: 10px;
        width: 0;
        left: 50%
    }
    #nav-icon.open span:nth-child(4) {
        top: 10px;
        width: 0;
        left: 50%
    }
    .content,
    .content-sm,
    .content-med,
    .content-big {
        padding-left: 15px!important;
        padding-right: 15px!important
    }
    #contactform .content-sm {
        padding: 30px 0 0 0!important
    }
    #contactform .textbox {
        line-height: 1.5em;
        margin-bottom: .5em
    }
    .bg-detail {
        height: auto!important
    }
    .skills .bg-detail,
    .skills .skill-img {
        display: none!important
    }
    .skills .skill-desc {
        padding: 30px
    }
    .et-page img.title-bg {
        display: none!important
    }
    .et-page .page-wrap {
        padding: 22.5px 30px 0
    }
    .btn-bottom {
        margin-top: .5em
    }
    .quot-car {
        margin: 60px 60px
    }
    .quot-car::before {
        top: 30px;
        left: -45px;
        font-size: 6em
    }
    .quot-car::after {
        right: -30px;
        bottom: -30px;
        font-size: 6em
    }
    .sharer .s-button {
        height: 60px;
        width: 60px;
        margin-right: 7.5px
    }
    .sharer .s-button span {
        font-size: 1.25em
    }
    .grid .grid-item::after {
        display: none
    }
    .grid .grid-item figure {
        width: 100%
    }
    .grid .grid-item .figcaption,
    .grid .grid-item:hover .figcaption {
        font-size: .85em!important;
        position: static;
        margin-bottom: -30px;
        margin-top: 30px;
        opacity: 1;
        width: 100%!important;
        transform: translate(0, 0)!important;
        -moz-transform: translate(0, 0)!important;
        -webkit-transform: translate(0, 0)!important;
        -o-transform: translate(0, 0)!important;
        -ms-transform: translate(0, 0)!important
    }
    .grid .grid-item .figcaption h2,
    .grid .grid-item:hover .figcaption h2,
    .grid .grid-item .figcaption span,
    .grid .grid-item:hover .figcaption span {
        text-align: center!important
    }
    .grid .grid-item .figcaption h3,
    .grid .grid-item:hover .figcaption h3 {
        text-align: center!important
    }
    .grid .grid-item .figcaption h2::after,
    .grid .grid-item:hover .figcaption h2::after {
        display: none!important
    }
    .service-item {
        border-bottom: 0!important;
        border-right: 0!important
    }
    .footer-social {
        margin: 22.5px
    }
    .footer-social li {
        width: 50px;
        height: 50px;
        font-size: 1.4em
    }
    .footer-social li a {
        line-height: 50px
    }
    #back-top {
        bottom: 10px;
        right: 10px;
        width: 40px;
        height: 40px
    }
    #back-top a {
        width: 40px;
        height: 40px;
        margin: 0;
        padding: 0
    }
    #back-top a span.icon {
        padding: 0;
        margin: 0;
        line-height: 40px!important;
        font-size: 1em!important
    }
    #back-top a:hover span.icon {
        font-size: 1em!important;
        margin-top: 0
    }
    #back-top a span.fade {
        display: none
    }
    .related-projects .rel-item {
        width: 100%;
        border: 0;
        border-bottom: 1px solid #e5e5e6
    }
    .related-projects .rel-item h4 {
        transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
        -webkit-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
        -moz-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
        -o-transition: all 350ms cubic-bezier(0.215, .61, .215, 1);
        letter-spacing: 0;
        padding: 30px 0
    }
    .related-projects .rel-item:hover h4 {
        letter-spacing: 0
    }
}
@media only screen and (max-width: 768px) {
    form {
        pading: 0;
        background-color: transparent
    }
    form#contactform {
        padding: 0!important;
        margin: 0!important;
        border: 0
    }
    form .left,
    form .right {
        margin: 0!important;
        padding: 0!important
    }
    .menu-trigger {
        font-size: 1.75em
    }
    .menu-trigger li.menu-social {
        font-size: .55em!important
    }
    .menu-trigger .cl-effect-3 a::before,
    .menu-trigger .cl-effect-3 a::after {
        display: none
    }
}
@media only screen and (max-width: 480px) {
    body {
        font-size: .825em!important
    }
    .et-page .page-wrap {
        padding: 15px 15px
    }
}
/* This beautiful CSS-File has been crafted with LESS (lesscss.org) and compiled by simpLESS (wearekiss.com/simpless) */

/* custom css */

@media only screen and (min-width: 320px) {
    .rm-1 {
		margin-left: -9px !important;
	}
	.menu .m-4, .menu .rm-2 {
		/* margin-top: 50px; */
	}
}

.pink {
	color: #f82a7c;
}
#page-1 {
	background-image: url('../images/Jb6iCpt.jpg');
}
#page-1 .pager li.current, #page-1 .pager li:hover {
    border-color: #f82a7c;
}
#page-2 {
	background-image: url('../images/triangles.png');
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.navy-blue {
	coolor: #356E89;
}
#page-2 .pager li.current, #page-2 .pager li:hover {
    border-color: #000000;
}
.purple {
	color: #cc578b;
}
#page-3 {
	background-image: url('../images/lcwbg.jpg');
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
#page-3 .h-button {
    border-color: #cc578b;
    color: #cc578b;
}
#page-3 .h-button:hover {
    border-color: #cc578b;
    color: #ffffff;
}
#page-3 .h-button {
    border-color: #cc578b;
    color: #cc578b
}
#page-3 .h-button::after {
    background-color: #cc578b
}
#page-3 .h-button span::before {
    background-color: #cc578b
}
#page-3 .pager li.current,
#page-3 .pager li:hover {
    border-color: #cc578b
}
#page-4 {
	background-image: url('../images/10815_NMSLFY.png');
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
#page-5 {
	background-image: url('../images/hello_summer.png');
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.clear {
	clear: both;
	width: 100;
	float: left;
}