.nav-button,
.portfolio-section .singe-portfolio:hover .portfolio-img,
.portfolio-section .showcase:hover .showcase-img,
.showcase-section .singe-portfolio:hover .portfolio-img,
.showcase-section .showcase:hover .showcase-img,
.portfolio-item .project-info,
.portfolio-project .project-info,
#team-popup:before,
#team-popup:after {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.pop-up-wrapper .form-container .fake-checkbox span[class*="-privacy"],
.form-holder .fake-checkbox span[class*="-privacy"] {
    display: inline-block;
    vertical-align: middle
}

.page-section.content-divide>.container,
.page-section.content-divide>.container-fluid {
    display: -webkit-flex;
    display: -moz-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

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

body {
    margin: 0
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
    display: block
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline
}

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

[hidden],
template {
    display: none !important
}

a {
    background-color: transparent;
    color: #000;
}
.nav>li>a {
    color: #666666;
    font-weight: 600;
}
abbr[title] {
    border-bottom: 1px dotted
}

b,
strong {
    font-weight: bold
}

dfn {
    font-style: italic
}

h1 {
    font-size: 2em;
    margin: 0.67em 0
}

mark {
    background: #06B3BA;
    color: #000
}

small {
    font-size: 80%
}

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

sup {
    top: -0.5em
}

sub {
    bottom: -0.25em
}

img {
    border: 0
}

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

figure {
    margin: 1em 40px
}

hr {
    box-sizing: content-box;
    height: 0
}

pre {
    overflow: auto
}

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

button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0
}

button {
    overflow: visible
}

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
}

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

input {
    line-height: normal
}

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

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em
}

legend {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto
}

optgroup {
    font-weight: bold
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

td,
th {
    padding: 0
}

@font-face {
    font-family: "Playfair Display";
    src: url("../fonts/PlayfairDisplay-Regular.eot");
    src: url("../fonts/PlayfairDisplay-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/PlayfairDisplay-Regular.ttf") format("truetype");
    font-weight: 400;
    font-display: swap
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-Regular.eot");
    src: url("../fonts/Poppins-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Poppins-Regular.ttf") format("truetype");
    font-display: swap
}

@font-face {
    font-family: "PoppinsBold";
    src: url("../fonts/Poppins-Bold.eot");
    src: url("../fonts/Poppins-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Poppins-Bold.ttf") format("truetype");
    font-weight: 700;
    font-display: swap
}

@font-face {
    font-family: "Poppins-Light";
    src: url("../fonts/Poppins/Poppins-Light.eot");
    src: url("../fonts/Poppins/Poppins-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/Poppins-Light.woff") format("woff"), url("../fonts/Poppins-Light.ttf") format("truetype");
    font-display: swap
}

@font-face {
    font-family: "icomoon";
    font-display: auto;
    src: url("../fonts/icomoon.eot") format("eot"), url("../fonts/icomoon.woff") format("woff"), url("../fonts/icomoon.ttf") format("truetype")
}

.icon-arrow-up:before,
.icon-attachment:before,
.icon-behance:before,
.icon-check:before,
.icon-circle-plus:before,
.icon-contract:before,
.icon-cross:before,
.icon-dribbble:before,
.icon-drsh-back:before,
.icon-email:before,
.icon-facebook:before,
.icon-feed:before,
.icon-follow:before,
.icon-google-plus:before,
.icon-happy:before,
.icon-instagram:before,
.icon-keyboard_arrow_down:before,
.icon-keyboard_arrow_left:before,
.icon-keyboard_arrow_right:before,
.icon-linkedin:before,
.icon-mail-envelope-closed:before,
.icon-mail:before,
.icon-menu:before,
.icon-narucivanje-header-shape:before,
.icon-phone:before,
.icon-plus:before,
.icon-slider-arrow:before,
.icon-twitter:before,
.icon-write:before,
.order-norobot-field .form-field input[type="checkbox"]:checked+label .icon-cross:before {
    font-family: "icomoon";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    text-decoration: none;
    text-transform: none
}

.icon-arrow-up:before {
    content: ""
}

.icon-attachment:before {
    content: ""
}

.icon-behance:before {
    content: ""
}

.icon-check:before {
    content: ""
}

.icon-circle-plus:before {
    content: ""
}

.icon-contract:before {
    content: ""
}

.icon-cross:before {
    content: ""
}

.icon-dribbble:before {
    content: ""
}

.icon-drsh-back:before {
    content: ""
}

.icon-email:before {
    content: ""
}

.icon-facebook:before {
    content: ""
}

.icon-feed:before {
    content: ""
}

.icon-follow:before {
    content: ""
}

.icon-google-plus:before {
    content: ""
}

.icon-happy:before {
    content: ""
}

.icon-instagram:before {
    content: ""
}

.icon-keyboard_arrow_down:before {
    content: ""
}

.icon-keyboard_arrow_left:before {
    content: ""
}

.icon-keyboard_arrow_right:before {
    content: ""
}

.icon-linkedin:before {
    content: ""
}

.icon-mail-envelope-closed:before {
    content: ""
}

.icon-mail:before {
    content: ""
}

.icon-menu:before {
    content: ""
}

.icon-narucivanje-header-shape:before {
    content: ""
}

.icon-phone:before {
    content: ""
}

@media only screen and (max-width: 1500px) {
    .icon-phone {
        font-size: 14px
    }
}

.icon-plus:before {
    content: ""
}

.icon-slider-arrow:before {
    content: ""
}

.icon-twitter:before {
    content: ""
}

.icon-write:before {
    content: ""
}

body,
button,
input,
select,
textarea {
    color: #656565;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    line-height: 1.8
}

@media only screen and (max-width: 600px) {
    body,
    button,
    input,
    select,
    textarea {
        line-height: 1.6
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
    font-family: "Playfair Display", serif;
    font-weight: 400;
    color: #333;
    line-height: 1.5
}

h5 {
    font-size: 27px;
    margin-bottom: 10px
}

h5::before {
    top: 18px
}

p {
    margin-bottom: 1em;
    margin-top: 0
}

dfn,
cite,
em,
i {
    font-style: italic
}

blockquote {
    margin: 0 1.5em
}

address {
    margin: 0 0 1.5em
}

pre {
    background: #999;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1.6em
}

code,
kbd,
tt,
var {
    font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace
}

abbr,
acronym {
    cursor: help
}

mark,
ins {
    text-decoration: none
}

big {
    font-size: 125%
}

::-webkit-input-placeholder {
    color: #333
}

::-moz-placeholder {
    color: #333
}

:-ms-input-placeholder {
    color: #333
}

:-moz-placeholder {
    color: #333
}

html {
    box-sizing: border-box
}

*,
*:before,
*:after {
    box-sizing: inherit
}

body {
    background: #fff
}

blockquote,
q {
    quotes: "" ""
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: ""
}

hr {
    border: 0;
    height: 1px;
    margin-bottom: 1.5em
}

ul,
ol {
    margin: 0 0 1.5em 3em
}

ul {
    list-style: disc
}

ol {
    list-style: decimal
}

ol li:first-child {
    display: inline-block;
    margin-left: 3px
}

li>ul,
li>ol {
    margin-bottom: 0;
    margin-left: 1.5em
}

dt {
    font-weight: bold
}

dd {
    margin: 0 1.5em 1.5em
}

img {
    height: auto;
    max-width: 100%
}

figure {
    margin: 1em 0
}

table {
    margin: 0 0 1.5em;
    width: 100%
}

blockquote {
    margin-top: 30px;
    margin-bottom: 35px;
    padding: 5px 0 5px 20px;
    border-left: 4px solid #06B3BA;
    font-size: 18px;
    font-style: italic;
    line-height: 1.6
}

@media only screen and (max-width: 600px) {
    blockquote {
        font-size: 16px;
        line-height: 1.5;
        padding: 0 20px
    }
}

body {
    counter-reset: item
}

ol {
    list-style: none;
    margin-top: -15px;
    margin-left: 0
}

ol li {
    counter-increment: item;
    margin-bottom: -35px
}

ol li::before {
    content: counter(item);
    font-size: 48px;
    font-weight: bold;
    color: #06B3BA;
    position: relative;
    top: 10px;
    margin-right: 10px;
    min-width: 35px;
    display: inline-block
}

@media only screen and (max-width: 1023px) {
    ol li {
        margin-bottom: 0
    }
    ol li::before {
        top: 0;
        margin-right: 0;
        margin-bottom: -11px;
        min-width: 30px
    }
}

code {
    display: inline-table;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    width: auto;
    margin-bottom: 1em;
    padding: 20px;
    background-color: #272323;
    color: #06B3BA
}

p code {
    padding: 6px 20px 6px 20px
}

.privacy-form-link {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.org {
    margin-bottom: 70px
}

@media only screen and (max-width: 640px) {
    .org {
        margin-bottom: 50px
    }
}

.org .image-cetion {
    width: 40%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.org .text-content {
    width: 100%
}

.org.section-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background-color: #fff;
    padding: 50px 80px 50px 30px;
    box-shadow: 0px 0px 20px 0px #dedede;
    margin: 0 30px 50px !important
}

@media only screen and (max-width: 768px) {
    .org.section-content {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 50px 70px
    }
}

@media only screen and (max-width: 640px) {
    .org.section-content {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 30px 16px;
        font-size: 14px;
        text-align: center
    }
}

.org .content-intro {
    text-transform: none;
    font-family: "Poppins-Light";
    margin-bottom: 15px
}

@media only screen and (max-width: 768px) {
    .org .content-intro {
        margin-bottom: 25px
    }
}

.org .content-intro p {
    margin-bottom: 0;
    line-height: 1.5
}

.org.logo {
    margin: 0 auto
}

.org .section-title {
    margin-bottom: 20px;
    font-size: 38px
}

@media only screen and (max-width: 768px) {
    .org .section-title {
        text-align: center;
        padding: 10px 0
    }
}

@media only screen and (max-width: 640px) {
    .org .container {
        padding: 0 25px
    }
}

ol li::before {
    font-family: 'PoppinsBold'
}

.hi-title-wrapper .hi-title-inner-wrapper {
    font-family: "PoppinsBold", sans-serif;
    font-size: 31px
}

.hi-title-wrapper .hi-title-inner-wrapper:hover {
    color: #333 !important
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"]:not(.popart-btn) {
    border: 1px solid;
    border-radius: 3px;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1;
    padding: .6em 1em .4em
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
    border-radius: 3px;
    padding: 3px
}

textarea {
    width: 100%
}

.cookie-law {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    box-sizing: border-box;
    padding: 1.05556rem 2rem;
    background-color: #292929;
    color: #d8d8d8;
    font-size: 0.77778rem;
    z-index: 1099;
    -webkit-transition: 1000ms ease;
    transition: 1000ms ease
}

.cookie-law-headline {
    font-weight: 500;
    color: #e6e7f0
}

.cookie-law-link {
    border-bottom: 0.07556rem solid #7d818e;
    font-weight: 500;
    letter-spacing: 0.025em;
    color: #e6e7f0;
    -webkit-transition: color 0.3s ease-out;
    transition: color 0.3s ease-out
}

.cookie-law-button {
    display: inline-block;
    margin: 0 0.27rem;
    padding: 0.3755rem 1.1755rem;
    border-radius: 25px;
    background-color: #06B3BA;
    color: #292929;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    font-family: "PoppinsBold", sans-serif;
    -webkit-transition: background-color 0.3s ease-out;
    transition: background-color 0.3s ease-out
}

.cookie-law-button:hover,
.cookie-law-button:focus {
    background-color: #e6e7f0
}

.cookie-law-button-decline {
    background-color: #7d818e
}

@media only screen and (max-width: 1250px) {
    .cookie-law {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: start;
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-box-align: start;
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
        align-items: flex-start
    }
    .cookie-law-button {
        margin-top: 20px
    }
    .cookie-law-button:first-child {
        margin-left: 0
    }
}

@media only screen and (max-width: 1370px) {
    .pop-up-wrapper {
        top: 50px !important
    }
}

@media only screen and (max-width: 1025px) {
    .pop-up-wrapper .contact-us-wrapper {
        bottom: 70px !important
    }
}

.forms-wrapper {
    top: 30% !important
}

@media only screen and (max-width: 1370px) {
    .forms-wrapper {
        top: 50% !important
    }
}

@media only screen and (max-width: 768px) {
    .forms-wrapper {
        top: 42% !important
    }
}

@media only screen and (max-width: 568px) {
    .forms-wrapper {
        top: 0 !important;
        margin-top: 30px
    }
}

@media only screen and (max-width: 1040px) {
    .pop-up-wrapper .contact-us-wrapper:after {
        margin-top: -200vw !important
    }
}

@media only screen and (max-width: 1024px) {
    .half-width {
        width: 49% !important
    }
}

@media only screen and (max-width: 568px) {
    .half-width {
        width: 100% !important
    }
}

.order-norobot-field .order-norobot label {
    font-size: 11px !important
}

@media only screen and (max-width: 1024px) {
    .order-norobot-field .order-norobot label {
        font-size: 9px !important
    }
}

.notification-message,
#contact-form-response,
#careers-form-response,
#graphic-form-response,
#seo-form-response,
#web-form-response {
    display: none;
    width: 100%;
    margin-bottom: 0 !important;
    min-height: 50px;
    font-size: 14px !important;
    line-height: 1.5 !important;
    padding: 5px 22px !important;
    border-radius: 25px;
    letter-spacing: -0.5px;
    text-align: center;
    outline: none;
    -webkit-transition: 0.35s ease;
    transition: 0.35s ease
}

@media only screen and (max-width: 1024px) {
    .notification-message,
    #contact-form-response,
    #careers-form-response,
    #graphic-form-response,
    #seo-form-response,
    #web-form-response {
        font-size: 15px !important
    }
}

#order-form,
#careers-form {
    top: -60px !important
}

@media only screen and (max-width: 600px) {
    #order-form,
    #careers-form {
        top: -30px !important
    }
}

.pop-up-wrapper .form-container .prev-form,
.form-holder .prev-form {
    top: 0 !important
}

@media only screen and (max-width: 1024px) {
    .pop-up-wrapper .form-container .prev-form,
    .form-holder .prev-form {
        left: 0 !important
    }
}

.order-form .write-text .outer-wrapper.show {
    padding-left: 60px
}

@media only screen and (max-width: 600px) {
    .order-form .write-text .outer-wrapper.show {
        font-size: 28px;
        padding-left: 40px
    }
}

@media only screen and (max-width: 600px) {
    .language-field label {
        padding: 30px 0;
        display: inline-block
    }
}

.cookie-law.is-visible {
    visibility: visible;
    opacity: 1
}

@media only screen and (max-width: 1250px) {
    main.show section {
        -webkit-animation: fadeUp 0ms ease 0ms forwards;
        animation: fadeUp 0ms ease 0ms forwards
    }
    main section {
        opacity: 0;
        padding-top: 100px;
        -webkit-animation: fadeUp 700ms ease 2300ms forwards;
        animation: fadeUp 700ms ease 2300ms forwards
    }
}

.prevent-desktop-scrolling {
    overflow: hidden
}

blockquote {
    border-left: 4px solid #FFCE12;
    padding: 0 0 0 20px;
    margin-top: 20px
}

.preloader-svg-wrapper {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    z-index: 10101;
    background-color: rgba(255, 255, 255, 0.2);
    opacity: 0
}

body {
    position: relative;
    height: 100%;
    margin-bottom: 889px;
    background-color: #333;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch
}

@media only screen and (max-width: 1025px) {
    body {
        margin-bottom: 0
    }
}

body.blur {
    overflow-y: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

body.blur .nav-wrapper.active {
    overflow-x: scroll
}

#banner,
#main,
#newsletter-subscribe,
#mastfoot,
#site-logo {
    -webkit-transition: all 700ms cubic-bezier(0.75, 0.1, 0.25, 1);
    transition: all 700ms cubic-bezier(0.75, 0.1, 0.25, 1)
}

.blur {
    overflow: hidden;
    overflow-y: hidden
}

.blur #banner,
.blur #main,
.blur #newsletter-subscribe,
.blur #mastfoot
/* ,.blur #site-logo  */
{
    -webkit-filter: blur(3px);
    filter: blur(3px)
}

.blur .primary-nav {
    position: relative;
    overflow-y: scroll;
    height: 100%
}

.breadcrumbs {
    position: relative;
    z-index: 10;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    margin-top: 50px;
    overflow: hidden
}

@media only screen and (max-width: 1400px) {
    .breadcrumbs {
        margin-top: -15px
    }
}

@media only screen and (max-width: 1024px) {
    .breadcrumbs {
        margin-top: 150px !important
    }
}

@media only screen and (max-width: 768px) {
    .breadcrumbs {
        margin-top: 150px !important;
        line-height: 1.5;
        margin-bottom: 20px
    }
}

@media only screen and (max-width: 600px) {
    .breadcrumbs {
        margin-top: 80px !important
    }
}

@media only screen and (max-width: 500px) {
    .breadcrumbs {
        margin-bottom: 0
    }
}

.breadcrumbs * {
    display: inline-block
}

.breadcrumbs ul {
    padding: 0;
    margin: 0 0 1.5em 1rem;
    overflow: hidden
}

.breadcrumbs a {
    color: #888888
}

.breadcrumbs li:last-child a {
    color: #333
}

.breadcrumbs ul>li {
    -webkit-transform: translateY(120%);
    -ms-transform: translateY(120%);
    transform: translateY(120%);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease
}

.breadcrumbs ul>li.show {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
}

.breadcrumbs ul>li:last-child:after {
    content: none
}

.breadcrumbs .active {
    color: #333
}

.write-text .outer-wrapper {
    overflow: hidden;
    display: block
}

.write-text .outer-wrapper .inner-wrapper {
    display: block;
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: all 1300ms cubic-bezier(0.85, 0.1, 0.25, 1);
    transition: all 1300ms cubic-bezier(0.85, 0.1, 0.25, 1)
}

.write-text .outer-wrapper.show .inner-wrapper {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
}

span.bigletter {
    position: absolute;
    display: block;
    color: #06B3BA;
    font-size: 250px;
    font-family: "PoppinsBold", sans-serif;
    font-weight: bolder;
    line-height: 1
}

@media only screen and (max-width: 1649px) {
    span.bigletter {
        font-size: 240px
    }
}

@media only screen and (max-width: 1400px) {
    span.bigletter {
        font-size: 159px
    }
}

@media only screen and (max-width: 1250px) {
    span.bigletter {
        font-size: 123px
    }
}

@media only screen and (max-width: 600px) {
    span.bigletter {
        font-size: 85px
    }
}

span.bigletter.animate-bigletter {
    color: transparent;
    overflow: hidden;
    -webkit-transition: color 1ms ease 250ms;
    transition: color 1ms ease 250ms
}

span.bigletter.animate-bigletter:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #06B3BA;
    -webkit-transform: translateX(-101%);
    -ms-transform: translateX(-101%);
    transform: translateX(-101%);
    -webkit-transition: all 700ms ease-out;
    transition: all 700ms ease-out
}

span.bigletter.animate-bigletter.show {
    color: #06B3BA
}

span.bigletter.animate-bigletter.show:before {
    -webkit-transform: translateX(101%);
    -ms-transform: translateX(101%);
    transform: translateX(101%)
}

.site-main {
    margin-top: -1px;
    padding: 0 0 200px;
    position: relative;
    background-color: #fff;
    z-index: 300
}

.site-main ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.site-main ul li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px
}

.site-main ul li:first-child {
    margin-top: 10px
}

.site-main ul li:before {
    content: '';
    display: block;
    background-color: #06B3BA;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: absolute;
    top: 11px;
    left: 13px
}

.site-main ul li:last-child {
    margin-bottom: 15px
}

@media only screen and (max-width: 1649px) {
    .site-main {
        padding: 0 0 100px
    }
}

@media only screen and (max-width: 768px) {
    .site-main {
        padding: 0 0 50px
    }
}

.section-usluga ul li::before {
    top: 19px
}

.order-project .popart-btn {
    border-color: #06B3BA;
    background-color: #06B3BA;
    color: #333
}

.order-project .popart-btn:hover {
    color: #333
}

@media only screen and (max-width: 600px) {
    .order-project .popart-btn {
        padding: 15px;
        font-size: 13px;
        width: 100%
    }
}

.l-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid #06B3BA;
    z-index: -1;
    opacity: 0;
    -webkit-transition: top 500ms ease 300ms, right 500ms ease 300ms, bottom 500ms ease 300ms, left 500ms ease 300ms, opacity 500ms ease 300ms, border-color 2500ms ease;
    transition: top 500ms ease 300ms, right 500ms ease 300ms, bottom 500ms ease 300ms, left 500ms ease 300ms, opacity 500ms ease 300ms, border-color 2500ms ease
}

.l-header:before {
    content: '';
    position: absolute;
    top: 163px;
    right: -20px;
    width: 0;
    display: block;
    height: 1px;
    background-color: #06B3BA;
    -webkit-transition: width 2300ms ease 1800ms, background-color 2500ms ease;
    transition: width 2300ms ease 1800ms, background-color 2500ms ease
}

.l-header.show {
    top: 20px;
    right: 20px;
    bottom: 20px;
    left: 20px;
    opacity: 1
}

.l-header.show:before {
    width: -webkit-calc(100% + 40px);
    width: calc(100% + 40px)
}

@media only screen and (max-width: 800px) {
    .l-header.show {
        top: 0
    }
}

@media only screen and (max-width: 1250px) {
    .l-header:before {
        top: 120px
    }
}

@media only screen and (max-width: 767px) {
    .l-header {
        border-left-color: transparent;
        border-right-color: transparent
    }
    .l-header.show {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        border-bottom: transparent
    }
    .l-header:before {
        right: 0;
        background-color: transparent !important
    }
}

@media only screen and (max-width: 600px) {
    .l-header:before {
        top: 91px
    }
}

.l-horizontal {
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: -1;
    border-right: 1px solid #06B3BA;
    border-left: 1px solid #06B3BA;
    -webkit-transition: height 1000ms ease-in 800ms, border-color 2500ms ease;
    transition: height 1000ms ease-in 800ms, border-color 2500ms ease
}

@media only screen and (min-width: 768px) {
    .l-horizontal {
        left: 0;
        right: 0;
        width: 600px
    }
}

@media only screen and (min-width: 1024px) {
    .l-horizontal {
        width: 930px
    }
}

@media only screen and (min-width: 1650px) {
    .l-horizontal {
        width: 1224px
    }
}

.l-horizontal.show {
    height: 100%
}

.l-horizontal:after,
.l-horizontal span {
    position: absolute;
    top: 0;
    display: block;
    width: 1px;
    height: 100%;
    background-color: #06B3BA;
    -webkit-transition: background-color 2500ms ease;
    transition: background-color 2500ms ease
}

.l-horizontal:after {
    content: '';
    left: 0;
    right: 0;
    margin: 0 auto
}

.l-horizontal span:first-child {
    left: 25%
}

.l-horizontal span:last-child {
    right: 25%
}

.fade-lines .l-header {
    border-color: #CAFBFF
}

.fade-lines .l-header:before {
    background-color: #CAFBFF
}

.fade-lines .l-horizontal {
    border-color: #CAFBFF
}

.fade-lines .l-horizontal:after,
.fade-lines .l-horizontal span {
    background-color: #CAFBFF
}

.l-loading {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    pointer-events: none;
    -webkit-transition: height 1ms ease 1000ms;
    transition: height 1ms ease 1000ms
}

.l-loading .container-load {
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 0;
    height: 100%
}

@media only screen and (min-width: 768px) {
    .l-loading .container-load {
        width: 600px
    }
}

@media only screen and (min-width: 1024px) {
    .l-loading .container-load {
        width: 930px
    }
}

@media only screen and (min-width: 1650px) {
    .l-loading .container-load {
        width: 1224px
    }
}

.l-loading span {
    position: absolute;
    height: 100%;
    display: block;
    top: 0;
    background-color: #333;
    max-width: 0
}

.l-loading>span:first-child {
    left: 0;
    -webkit-transition: max-width 1200ms ease;
    transition: max-width 1200ms ease
}

.l-loading>span:nth-child(2) {
    -webkit-transition: max-width 1200ms ease 500ms;
    transition: max-width 1200ms ease 500ms
}

.l-loading span.inner-load {
    width: 25%
}

.l-loading span.inner-load:nth-of-type(1) {
    -webkit-transition: max-width 1200ms ease 100ms;
    transition: max-width 1200ms ease 100ms
}

.l-loading span.inner-load:nth-of-type(2) {
    left: 25%;
    -webkit-transition: max-width 1200ms ease 200ms;
    transition: max-width 1200ms ease 200ms
}

.l-loading span.inner-load:nth-of-type(3) {
    left: 50%;
    -webkit-transition: max-width 1200ms ease 300ms;
    transition: max-width 1200ms ease 300ms
}

.l-loading span.inner-load:nth-of-type(4) {
    left: 75%;
    -webkit-transition: max-width 1200ms ease 400ms;
    transition: max-width 1200ms ease 400ms
}

.l-loading.show {
    height: 100%;
    z-index: 100000001;
    -webkit-transition: height 1ms ease;
    transition: height 1ms ease
}

.l-loading.show span {
    max-width: 700px
}

.l-loading.show.hide-alt span {
    max-width: 0
}

.l-loading.show.hide-alt>span:first-child {
    left: auto;
    right: 0;
    -webkit-transition: max-width 1200ms ease 500ms;
    transition: max-width 1200ms ease 500ms
}

.l-loading.show.hide-alt>span:nth-child(2) {
    -webkit-transition: max-width 1200ms ease;
    transition: max-width 1200ms ease
}

.l-loading.show.hide-alt span.inner-load {
    right: 0;
    left: auto;
    -webkit-transition: max-width 1200ms ease 400ms;
    transition: max-width 1200ms ease 400ms
}

.l-loading.show.hide-alt span.inner-load:nth-of-type(2) {
    right: 25%;
    -webkit-transition: max-width 1200ms ease 300ms;
    transition: max-width 1200ms ease 300ms
}

.l-loading.show.hide-alt span.inner-load:nth-of-type(3) {
    right: 50%;
    -webkit-transition: max-width 1200ms ease 200ms;
    transition: max-width 1200ms ease 200ms
}

.l-loading.show.hide-alt span.inner-load:nth-of-type(4) {
    right: 75%;
    -webkit-transition: max-width 1200ms ease 100ms;
    transition: max-width 1200ms ease 100ms
}

.clear:before,
.clear:after,
.container:before,
.container:after {
    content: "";
    display: table;
    table-layout: fixed
}

.clear:after,
.container:after {
    clear: both
}

.container {
    margin: 0 auto;
    padding: 0 45px
}

@media only screen and (min-width: 768px) {
    .container {
        width: 630px;
        padding: 0 15px
    }
}

@media only screen and (min-width: 1024px) {
    .container {
        width: 960px
    }
}

@media only screen and (min-width: 1650px) {
    .container {
        width: 1254px
    }
}

.page-section {
    padding-top: 220px;
    position: relative;
    z-index: 10
}

.page-section .section-image {
    position: relative;
    overflow: hidden
}

.page-section .section-image:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    background-color: #CAFBFF;
    -webkit-transform: translateX(-101%);
    -ms-transform: translateX(-101%);
    transform: translateX(-101%);
    -webkit-transition: all 2000ms ease;
    transition: all 2000ms ease
}

.page-section .section-image img {
    display: block;
    width: auto;
    opacity: 0
}

.page-section .section-image.show:not(.plx):after {
    -webkit-transform: translateX(101%);
    -ms-transform: translateX(101%);
    transform: translateX(101%)
}

.page-section .section-image.show:not(.plx) img {
    opacity: 1;
    -webkit-transition: opacity 1ms ease 600ms;
    transition: opacity 1ms ease 600ms
}

.page-section .section-content a:not(.x-btn):not(.carrer-btn) {
    position: relative;
    font-weight: 600;
    color: #333
}

.page-section .section-content a:not(.x-btn):not(.carrer-btn)::before {
    content: '';
    position: absolute;
    bottom: -3px;
    width: 0;
    height: 1px;
    background: #06B3BA;
    -webkit-transition: width .5s;
    transition: width .5s
}

.page-section .section-content a:not(.x-btn):not(.carrer-btn):hover::before {
    width: 100%
}

.page-section.yellow-block {
    overflow: hidden
}

.page-section.yellow-block>.container {
    position: relative;
    height: 630px;
    z-index: 2
}

.page-section.yellow-block:not(.video-section)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 250px;
    width: 50%;
    height: 95%;
    background: #06B3BA;
    -webkit-transform: translateX(50%) scaleX(0);
    -ms-transform: translateX(50%) scaleX(0);
    transform: translateX(50%) scaleX(0);
    -webkit-transition: -webkit-transform 1000ms ease;
    transition: -webkit-transform 1000ms ease;
    transition: transform 1000ms ease;
    transition: transform 1000ms ease, -webkit-transform 1000ms ease
}

@media only screen and (max-width: 1024px) {
    .page-section.yellow-block:not(.video-section)::before {
        top: 210px
    }
}

.page-section.yellow-block .section-content {
    width: -webkit-calc(75% - 30px);
    width: calc(75% - 30px);
    position: absolute;
    top: 50%;
    left: 15px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.page-section.yellow-block .video-cont {
    height: 600px;
    width: 50%;
    overflow: hidden;
    position: absolute;
    top: -webkit-calc(50% + 125px);
    top: calc(50% + 125px);
    left: 50%;
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: translateY(-50%) scale(1, 1);
    -ms-transform: translateY(-50%) scale(1, 1);
    transform: translateY(-50%) scale(1, 1);
    -webkit-transition: -webkit-transform 0.7s 0.2s ease-out;
    transition: -webkit-transform 0.7s 0.2s ease-out;
    transition: transform 0.7s 0.2s ease-out;
    transition: transform 0.7s 0.2s ease-out, -webkit-transform 0.7s 0.2s ease-out
}

.page-section.yellow-block .video-cont video {
    position: relative;
    width: 100%;
    top: 50%;
    -webkit-transform: translateX(-100%) translateY(-50%);
    -ms-transform: translateX(-100%) translateY(-50%);
    transform: translateX(-100%) translateY(-50%);
    -webkit-transition: -webkit-transform ease .5s;
    transition: -webkit-transform ease .5s;
    transition: transform ease .5s;
    transition: transform ease .5s, -webkit-transform ease .5s
}

.page-section.yellow-block.show:not(.video-section)::before {
    -webkit-transform: translateX(100%) scaleX(1);
    -ms-transform: translateX(100%) scaleX(1);
    transform: translateX(100%) scaleX(1)
}

.page-section.yellow-block.show .video-cont video {
    -webkit-transform: translateX(0) translateY(-50%);
    -ms-transform: translateX(0) translateY(-50%);
    transform: translateX(0) translateY(-50%)
}

.page-section.yellow-block.yb-alt .section-content {
    left: auto;
    right: 15px
}

.page-section.yellow-block.yb-alt:before {
    left: 0
}

.page-section.yellow-block-higher>.container {
    margin-bottom: 110px
}

.page-section.content-indent .section-content {
    margin-left: 25%
}

.page-section.content-shorten .section-content {
    width: 75%
}

.page-section.content-divide>.container,
.page-section.content-divide>.container-fluid {
    position: relative;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.page-section.content-divide .section-image,
.page-section.content-divide .section-content {
    width: 50%
}

.page-section.content-divide img {
    display: block;
    margin: 0 auto
}

.page-section p:last-of-type:not(.section-subtitle) {
    margin-bottom: 0
}

.page-section.no-vacancy {
    pointer-events: none !important;
    opacity: .2
}

@media only screen and (max-width: 1250px) {
    .page-section {
        padding-top: 150px
    }
    .page-section.content-indent .section-content {
        margin-left: 0
    }
    .page-section.content-shorten .section-content {
        width: 100%
    }
    .page-section.yellow-block>.container {
        height: 100%
    }
    .page-section.yellow-block:before {
        height: 100%;
        top: -webkit-calc(50% + 75px);
        top: calc(50% + 75px)
    }
    .page-section.yellow-block.show .section-content {
        position: relative;
        width: 100%;
        left: 0;
        top: 0;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
    .page-section.yellow-block.show .video-cont {
        position: relative;
        left: 0;
        top: 0;
        max-width: 960px;
        width: auto;
        height: 100%;
        margin: 40px auto;
        padding: 0 15px 0 16px;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        margin-bottom: 0
    }
    .page-section.yellow-block.show .video-cont video {
        width: 100%;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

@media only screen and (max-width: 1023px) {
    .page-section {
        padding-top: 80px;
        padding-bottom: 30px
    }
    .page-section.content-divide>.container,
    .page-section.content-divide>.container-fluid {
        display: block
    }
    .page-section.content-divide>.container-fluid {
        padding: 0 15px
    }
    .page-section.content-divide .section-image,
    .page-section.content-divide .section-content {
        width: 100%
    }
    .page-section.content-divide .section-image {
        margin: 15px 0
    }
    .page-section.yellow-block:not(.video-section)>.container {
        height: auto
    }
    .page-section.yellow-block:not(.video-section):before {
        top: 50px;
        background-color: #CAFBFF;
        height: 95%
    }
    .page-section.yellow-block:not(.video-section) .section-content {
        width: 100%;
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
    .page-section.yellow-block:not(.video-section).yb-alt .section-content {
        left: auto;
        right: auto
    }
    .page-section.video-section.show .video-cont {
        max-width: 630px
    }
}

@media only screen and (max-width: 800px) {
    .page-section {
        padding-bottom: 60px
    }
}

@media only screen and (max-width: 600px) {
    .page-section {
        padding-top: 80px
    }
    .page-section.yellow-block:before {
        height: 90%;
        top: -webkit-calc(50% + 40px);
        top: calc(50% + 40px)
    }
}

.parallax {
    position: relative
}

.parallax.abs-pos {
    position: absolute
}

.plx {
    position: relative;
    overflow: visible !important
}

.plx::after {
    display: none !important
}

.plx .pic-overlay {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.plx .bg {
    position: relative;
    -webkit-transform: translateX(-50%) scaleX(0) !important;
    -ms-transform: translateX(-50%) scaleX(0) !important;
    transform: translateX(-50%) scaleX(0) !important;
    -webkit-transition: -webkit-transform .5s !important;
    transition: -webkit-transform .5s !important;
    transition: transform .5s !important;
    transition: transform .5s, -webkit-transform .5s !important
}

.plx .abs-pos {
    position: absolute;
    top: 0;
    left: -90px;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-transform: translateY(50px);
    -ms-transform: translateY(50px);
    transform: translateY(50px);
    -webkit-transition: opacity .5s, -webkit-transform .5s;
    transition: opacity .5s, -webkit-transform .5s;
    transition: opacity .5s, transform .5s;
    transition: opacity .5s, transform .5s, -webkit-transform .5s
}

.plx .iphone {
    top: -50px
}

.plx .stamp {
    top: 50px
}

.plx .letter {
    top: 110px
}

.plx .pen {
    top: 170px
}

.plx .envelope {
    top: 260px
}

.plx .folded-letter,
.plx .iphone {
    top: 400px
}

.plx .bcard1 {
    top: 570px
}

.plx .bcard2 {
    top: 660px
}

.plx .stamp {
    top: 800px
}

.plx.show .abs-pos {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

.plx.show .bg {
    opacity: 1;
    -webkit-transform: translateX(0) scaleX(1) !important;
    -ms-transform: translateX(0) scaleX(1) !important;
    transform: translateX(0) scaleX(1) !important
}

.plx.no-delay .abs-pos {
    -webkit-transition-delay: 0s !important;
    transition-delay: 0s !important
}

.section-title {
    font-size: 48px;
    line-height: 1.2;
    margin: 0 0 35px
}

@media only screen and (max-width: 1649px) {
    .section-title {
        font-size: 38px
    }
}

@media only screen and (max-width: 1250px) {
    .section-title {
        font-size: 28px;
        margin-bottom: 30px
    }
}

@media only screen and (max-width: 769px) {
    .section-title {
        font-size: 32px
    }
}

@media only screen and (max-width: 600px) {
    .section-title {
        font-size: 20px;
        margin-bottom: 25px
    }
}

h3.section-title {
    font-size: 45px
}

@media only screen and (max-width: 1649px) {
    h3.section-title {
        font-size: 35px
    }
}

@media only screen and (max-width: 1250px) {
    h3.section-title {
        font-size: 25px
    }
}

@media only screen and (max-width: 768px) {
    h3.section-title {
        font-size: 30px
    }
}

@media only screen and (max-width: 600px) {
    h3.section-title {
        font-size: 17px
    }
}

p.section-subtitle {
    font-size: 26px;
    font-weight: 500;
    color: #333;
    line-height: 1.3;
    margin: 0 0 25px
}

@media only screen and (max-width: 1649px) {
    p.section-subtitle {
        font-size: 20px
    }
}

@media only screen and (max-width: 1250px) {
    p.section-subtitle {
        font-size: 18px;
        margin-bottom: 20px
    }
}

.x-btn {
    width: 80px;
    height: 80px;
    display: block;
    border-radius: 50%;
    position: relative
}

.x-btn:after,
.x-btn:before {
    content: '';
    display: block;
    position: absolute
}

.x-btn:after {
    border-radius: 50%;
    background-color: #06B3BA;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-transition: all 350ms ease;
    transition: all 350ms ease
}

.x-btn:before {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    box-shadow: 4px 2px 10px rgba(0, 0, 0, 0.05);
    z-index: -1;
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 175ms ease;
    transition: all 175ms ease
}

.x-btn span {
    display: block;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid #06B3BA;
    -webkit-transition: all 350ms ease;
    transition: all 350ms ease
}

.x-btn span:before,
.x-btn span:after {
    content: '';
    display: block;
    background-color: #383838;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all 350ms ease;
    transition: all 350ms ease
}

.x-btn span:before {
    width: 43px;
    height: 2px
}

.x-btn span:after {
    width: 2px;
    height: 43px
}

.x-btn.hover-in:after,
.x-btn.drag:after {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0)
}

.x-btn.hover-in:before,
.x-btn.drag:before {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px
}

.x-btn.hover-in span,
.x-btn.drag span {
    -webkit-transform: scale(0.88);
    -ms-transform: scale(0.88);
    transform: scale(0.88)
}

.x-btn.hover-in span:before,
.x-btn.hover-in span:after,
.x-btn.drag span:before,
.x-btn.drag span:after {
    background-color: rgba(0, 0, 0, 0.2)
}

.x-btn.hover-in.hover-in-alt:before {
    top: -7px;
    right: -7px;
    bottom: -7px;
    left: -7px
}

@media only screen and (max-width: 767px) {
    .x-btn {
        width: 60px;
        height: 60px
    }
    .x-btn span {
        width: 60px;
        height: 60px
    }
    .x-btn span::after {
        height: 22px
    }
    .x-btn span::before {
        width: 22px
    }
}

.draggable-btn {
    position: relative;
    width: 80px;
    height: 160px;
    padding: 0 0 40px
}

.draggable-btn .x-btn {
    position: relative;
    top: 0;
    -webkit-transition: all 180ms ease-out;
    transition: all 180ms ease-out
}

.popart-btn {
    text-transform: uppercase;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    line-height: 1;
    border: 2px solid #333;
    border-radius: 30px;
    background-color: transparent;
    width: 220px;
    padding: 19px 0 17px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    overflow: hidden;
    outline: none;
    -webkit-transition: 350ms ease;
    transition: 350ms ease
}

@media only screen and (max-width: 600px) {
    .popart-btn {
        font-size: 13px !important;
        width: 100%
    }
}

.popart-btn:after {
    content: "\E011";
    font-family: 'icomoon';
    font-size: 24px;
    color: #333;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    opacity: 0;
    position: absolute;
    top: 50%;
    right: 20px;
    -webkit-transform: translateY(-50%) rotate(-90deg);
    -ms-transform: translateY(-50%) rotate(-90deg);
    transform: translateY(-50%) rotate(-90deg);
    -webkit-transition: all 350ms ease;
    transition: all 350ms ease
}

.popart-btn:before {
    content: '';
    display: block;
    width: 70px;
    height: 2px;
    background-color: #333;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 350ms ease;
    transition: all 350ms ease
}

.popart-btn.white-btn {
    color: #fff;
    border-color: #fff
}

.popart-btn.white-btn:after {
    color: #fff
}

.popart-btn.white-btn:before {
    background-color: #fff
}

.popart-btn:hover {
    text-indent: -20px;
    color: #06B3BA
}

.popart-btn:hover:after {
    opacity: 1;
    text-indent: 0
}

.popart-btn:hover:before {
    opacity: 1;
    width: 12px;
    left: 175px
}

@media only screen and (max-width: 1250px) {
    .popart-btn {
        font-size: 12px;
        width: 180px;
        padding: 15px 0 13px
    }
    .popart-btn:after {
        right: 10px
    }
    .popart-btn:hover:before {
        left: 144px
    }
}

@media only screen and (max-width: 1023px) {
    .popart-btn {
        font-size: 11px;
        width: 120px;
        padding: 11px 0 9px
    }
    .popart-btn:after,
    .popart-btn:before {
        content: none
    }
    .popart-btn:hover {
        text-indent: initial;
        color: initial
    }
}

@media only screen and (max-width: 1650px) {
    .popart-btn {
        padding: 14px 0 13px
    }
}

.site-main .seo-buttons {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 20px
}

.site-main .seo-buttons li.btn-seo-optimization {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 200px;
    height: 60px;
    padding: 10px;
    border: 2px solid;
    border-radius: 70px;
    text-align: center;
    line-height: 1;
    cursor: pointer;
    -webkit-transition: 0.35s ease;
    transition: 0.35s ease
}

.site-main .seo-buttons li.btn-seo-optimization:nth-child(1) {
    margin-top: 0;
    background-color: #6AD6C6;
    border-color: #43968A
}

.site-main .seo-buttons li.btn-seo-optimization:nth-child(1):hover {
    background-color: #43968A
}

.site-main .seo-buttons li.btn-seo-optimization:nth-child(2) {
    background-color: #3D87ED;
    border-color: #2A64AF
}

.site-main .seo-buttons li.btn-seo-optimization:nth-child(2):hover {
    background-color: #2A64AF
}

.site-main .seo-buttons li.btn-seo-optimization:nth-child(3) {
    background-color: #FC615D;
    border-color: #BF4E4C
}

.site-main .seo-buttons li.btn-seo-optimization:nth-child(3):hover {
    background-color: #BF4E4C
}

.site-main .seo-buttons li.btn-seo-optimization:nth-child(4) {
    background-color: #9782C5;
    border-color: #7E6EA3
}

.site-main .seo-buttons li.btn-seo-optimization:nth-child(4):hover {
    background-color: #7E6EA3
}

.site-main .seo-buttons li.btn-seo-optimization::before {
    display: none
}

.site-main .seo-buttons li.btn-seo-optimization a:not(.x-btn):not(.carrer-btn) {
    color: #fff
}

.site-main .seo-buttons li.btn-seo-optimization a:not(.x-btn):not(.carrer-btn)::before {
    display: none
}

.site-main .seo-buttons li.btn-seo-optimization a {
    width: 200px;
    height: 60px;
    padding: 0;
    border-radius: 70px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

@media only screen and (max-width: 1650px) {
    .site-main .seo-buttons {
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between
    }
    .site-main .seo-buttons li.btn-seo-optimization {
        min-width: 200px;
        width: -webkit-calc(50% - 5px);
        width: calc(50% - 5px)
    }
}

@media only screen and (max-width: 767px) {
    .site-main .seo-buttons li.btn-seo-optimization {
        width: 100%
    }
}

.seo-paket-btn {
    display: block;
    margin-top: 20px;
    padding: 10px 30px;
    cursor: pointer;
    -webkit-transition: 0.35s ease;
    transition: 0.35s ease
}

.popart-btn.popart-fill-btn:hover,
.popart-btn.popart-fill-btn:focus {
    text-indent: 0;
    color: #333;
    background-color: #06B3BA;
    border: 2px solid #06B3BA
}

.popart-btn.popart-fill-btn::after,
.popart-btn.popart-fill-btn::before {
    display: none
}

.popart-btn.selected-btn {
    text-indent: 0;
    color: #333;
    background-color: #06B3BA;
    border: 2px solid #06B3BA
}

.custom-arrows {
    display: block
}

.custom-arrows .ca {
    height: 73px;
    font-size: 50px;
    color: #333;
    display: block;
    cursor: pointer
}

.slick-slide {
    outline: none
}

.yellow-bg:before {
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: scale(0, 1);
    -ms-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transition: -webkit-transform 1.8s 0.4s ease-out;
    transition: -webkit-transform 1.8s 0.4s ease-out;
    transition: transform 1.8s 0.4s ease-out;
    transition: transform 1.8s 0.4s ease-out, -webkit-transform 1.8s 0.4s ease-out
}

.yellow-bg.show:before {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1)
}

.image-section .section-image,
.image-section .section-content {
    float: left
}

.image-section .section-image.center-col {
    width: 100%;
    margin-bottom: 40px
}

.image-section .section-image.center-col img {
    max-width: 100%;
    width: auto;
    display: block;
    margin: 0 auto
}

.image-section .section-content {
    margin-left: 0 !important;
    width: 100%
}

.image-section .section-image.center-col,
.image-section .section-content.center-col {
    width: 100%;
    text-align: center
}

.image-section .section-content.center-col {
    padding-left: 15px;
    padding-right: 15px
}

.image-section .section-image.col1 {
    width: 25%;
    padding-left: 30px;
    padding-right: 30px
}

.image-section .section-image.col2 {
    width: 50%;
    padding-left: 30px;
    padding-right: 30px
}

@media only screen and (max-width: 600px) {
    .image-section .section-image.col2 {
        width: 100%
    }
}

.image-section .section-image.col1 img,
.image-section .section-image.col2 img {
    max-width: 100%;
    width: auto;
    margin: 0 auto
}

@media only screen and (max-width: 600px) {
    .image-section .section-image.col1 img,
    .image-section .section-image.col2 img {
        max-width: 100%;
        margin-bottom: 25px
    }
}

.image-section .section-content.col11 {
    width: 75%
}

.image-section .section-content.col10 {
    width: 50%
}

@media only screen and (max-width: 600px) {
    .image-section .section-content.col10 {
        width: 100%
    }
}

#home-banner-bg {
    position: relative;
    top: -3px;
    right: 0;
    width: 94vh;
    height: 100%;
    opacity: 0;
    -webkit-transition: opacity .5s;
    transition: opacity .5s
}

@media only screen and (max-width: 1500px) {
    #home-banner-bg {
        width: 90vh
    }
}

.home-layer-banner .overlay {
    position: absolute;
    top: 0;
    left: -102px;
    width: 120%;
    height: 100%;
    max-width: unset !important;
    z-index: 999;
    opacity: 1;
    -webkit-transition: opacity .5s;
    transition: opacity .5s
}

.home-layer-banner .layer {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    opacity: 0;
    -webkit-transition: opacity .5s, left .5s, top 0.01s;
    transition: opacity .5s, left .5s, top 0.01s
}

.home-layer-banner .layer.l1 {
    left: -9.6vh;
    top: 17.5vh
}

.home-layer-banner .layer.l2 {
    left: 43.5vh;
    top: 6.6vh
}

.home-layer-banner .layer.l3 {
    left: 5vh;
    top: 12.3vh
}

.home-layer-banner .layer.l4 {
    top: 1vh;
    left: 73.5vh
}

.home-layer-banner .layer.l5 {
    top: 160px;
    top: 16.4vh;
    left: auto;
    right: 0;
    width: 110px;
    height: 141px;
    overflow: hidden
}

.home-layer-banner .layer.l5 img {
    width: 197px;
    height: 141px;
    max-width: 197px;
    max-height: 141px
}

@media only screen and (max-width: 1500px) {
    .home-layer-banner .layer.l2 {
        left: 40.1vh
    }
    .home-layer-banner .layer.l3 {
        left: 17vh;
        top: 15.3vh
    }
    .home-layer-banner .layer.l4 {
        top: 2vh;
        left: 67.5vh
    }
    .home-layer-banner .layer.l5 {
        display: none
    }
}

@media only screen and (max-width: 1400px) {
    .home-layer-banner .layer.l2 {
        left: 36.1vh
    }
}

.home-layer-banner.visible #home-banner-bg,
.home-layer-banner.visible .layer {
    opacity: 1 !important
}

.home-layer-banner.visible .overlay {
    opacity: 0
}

.image-center-padding {
    padding-top: 0 !important
}

.order-section-padding {
    padding-top: 60px !important
}

.list-icons-section .section-title {
    margin-bottom: 65px
}

.list-icons-section ul li {
    padding-left: 130px
}

@media only screen and (max-width: 600px) {
    .list-icons-section ul li {
        padding-left: 80px
    }
}

.list-icons-section ul li::before {
    display: none
}

.list-icons-section ul li span {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    top: 11px;
    left: -45px;
    width: 93px;
    height: 93px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 15px 35px 0 rgba(51, 51, 51, 0.25)
}

@media only screen and (max-width: 1025px) {
    .list-icons-section ul li span {
        left: 0
    }
}

@media only screen and (max-width: 600px) {
    .list-icons-section ul li span {
        width: 53px;
        height: 53px
    }
}

.list-icons-section ul li img {
    max-width: 60px;
    max-height: 60px
}

@media only screen and (max-width: 600px) {
    .list-icons-section ul li img {
        width: 30px;
        height: 30px;
        max-width: 40%;
        max-height: 40%
    }
}

@media only screen and (max-width: 767px) {
    .list-icons-section {
        padding-left: 0
    }
    .list-icons-section span {
        position: relative;
        margin: 0 auto
    }
}

.section-left {
    margin-left: 25%
}

@media only screen and (max-width: 1023px) {
    .section-left {
        margin-left: 0
    }
    .pop-up-wrapper.open {
        top: 0 !important
    }
}

.section-top {
    padding-top: 0
}

@media only screen and (max-width: 600px) {
    .video-section {
        padding-bottom: 0
    }
}

@media only screen and (max-width: 1250px) {
    .main-navigation {
        overflow: initial
    }
    .nav-wrapper {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    .nav-wrapper.active {
        -webkit-overflow-scrolling: touch;
        overflow-y: scroll
    }
}

#sidebar {
    top: 0 !important;
    padding-bottom: 100px !important
}

@media only screen and (max-width: 640px) {
    #sidebar {
        padding-bottom: 70px !important
    }
}

.input-trigger {
    border: 2px solid #333;
    border-radius: 25px
}

.input-trigger:hover,
.input-trigger:focus {
    border: 2px solid #333 !important;
    border-radius: 25px !important
}

.notification-message {
    line-height: 1.5 !important;
    color: #fff
}

.page-section .section-image img {
    top: 0 !important
}

.edge-banner {
    width: 100vh !important
}

@media only screen and (max-width: 1024px) {
    .half-width:nth-child(even) {
        margin-left: 10px !important
    }
}

@media only screen and (max-width: 600px) {
    .half-width:nth-child(even) {
        margin-left: 0 !important
    }
}

@media only screen and (max-width: 600px) {
    .top-sec-min {
        margin-bottom: 20px
    }
}

@media only screen and (max-width: 600px) {
    .info-buttons-wrapper .container {
        display: block !important
    }
    .page-order-banner .info-buttons-wrapper {
        height: 180px;
        margin-top: 31px;
        display: block
    }
    .popart-btn {
        width: 100% !important;
        margin: 0 auto !important;
        display: block;
        float: none;
        margin-bottom: 10px !important;
        margin-top: 15px !important;
        position: relative;
        right: 0 !important
    }
    #forms-popup .popart-btn {
        margin-bottom: 30px !important
    }
}

.slider-arrow,
.close-showcase-galllery-btn {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08)
}

@media only screen and (max-width: 600px) {
    .hi-title-inner-wrapper {
        line-height: 1 !important;
        padding-bottom: 5px
    }
}

.hi-title-inner-wrapper {
    padding-bottom: 5px
}

@media only screen and (max-width: 600px) {
    .form-btn-right {
        margin-top: 60px
    }
}

.portfolio-wrapper {
    opacity: 0
}

.breadcrumbs {
    opacity: 0
}

@media only screen and (max-width: 770px) {
    #awwwards {
        display: none
    }
}

.display-scrolling {
    -webkit-transition: left .7s, opacity .7s;
    transition: left .7s, opacity .7s;
    opacity: 0.3 !important
}

.hi-details a:hover {
    color: #fff
}

.fleft {
    float: left
}

.fright {
    float: right
}

.alignleft {
    display: inline;
    float: left;
    margin-right: 1.5em
}

.alignright {
    display: inline;
    float: right;
    margin-left: 1.5em
}

.centered {
    text-align: center
}

.color-darkgrey {
    color: #333
}

.color-white {
    color: #fff
}

.color-gray {
    color: #656565
}

.font-main {
    font-family: "Poppins", sans-serif
}

.font-serif {
    font-family: "Playfair Display", serif
}

.hide-header .site-header .site-branding {
    opacity: 0;
    -webkit-transition: opacity ease .5s, left ease .5s;
    transition: opacity ease .5s, left ease .5s
}

.site-header {
    position: fixed;
    width: 100%;
    left: 0;
    top: 20px;
    z-index: 1100;
    -webkit-transition: transform 300ms ease 2ms, top 300ms ease 2ms, background-color 1ms ease, box-shadow 1ms ease;
    -webkit-transition: top 300ms ease 2ms, background-color 1ms ease, box-shadow 1ms ease, -webkit-transform 300ms ease 2ms;
    transition: top 300ms ease 2ms, background-color 1ms ease, box-shadow 1ms ease, -webkit-transform 300ms ease 2ms;
    transition: transform 300ms ease 2ms, top 300ms ease 2ms, background-color 1ms ease, box-shadow 1ms ease;
    transition: transform 300ms ease 2ms, top 300ms ease 2ms, background-color 1ms ease, box-shadow 1ms ease, -webkit-transform 300ms ease 2ms
}

@media only screen and (max-width: 1024px) {
    .site-header {
        padding: 25px 0
    }
}

@media only screen and (max-width: 769px) {
    .site-header {
        padding: 18px 0
    }
}

@media only screen and (max-width: 420px) {
    .site-header {
        padding: 0
    }
}

.site-header .site-branding {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    opacity: 1;
    width: 250px;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 40px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.site-header .site-branding a {
    -webkit-transform-origin: 0 50%;
    -ms-transform-origin: 0 50%;
    transform-origin: 0 50%
}

.site-header .site-branding img,
.site-header .site-branding video {
    display: block;
    max-width: 279px
}

.site-header .site-branding .logo-video {
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    display: none
}

.site-header .site-branding svg {
    position: absolute;
    left: 0;
    top: 0;
    height: 120px;
    width: 120px
}

.site-header .site-branding #css-motion-path {
    -webkit-transition: 2s ease;
    transition: 2s ease;
    motion-path: path("M62.7 28.2s-3.1-.3-7.4-.3H35.9c-1.5 0-5.5 1.3-5.2 6.5.2 3.2 3.1 5.2 7.7 5.2h19.4s5.5.3 5.5 5.5c0 4.4-4.4 5.9-5.1 5.9h-6.5c-3.8 0-11.8-.2-17.5 6.8-4.3 5.3-3.4 12.9-3.2 14 .1 1.1.7 6 5.7 5.6 4.7-.3 5.3-2.6 5.4-6.9 0 0-.2-4.5 2.2-6.8 2.9-2.8 8.9-2.2 11.1-2.3 3.8-.1 20.2.2 20-17.4-.2-13.4-12.6-15.8-12.7-15.8");
    offset-path: path("M62.7 28.2s-3.1-.3-7.4-.3H35.9c-1.5 0-5.5 1.3-5.2 6.5.2 3.2 3.1 5.2 7.7 5.2h19.4s5.5.3 5.5 5.5c0 4.4-4.4 5.9-5.1 5.9h-6.5c-3.8 0-11.8-.2-17.5 6.8-4.3 5.3-3.4 12.9-3.2 14 .1 1.1.7 6 5.7 5.6 4.7-.3 5.3-2.6 5.4-6.9 0 0-.2-4.5 2.2-6.8 2.9-2.8 8.9-2.2 11.1-2.3 3.8-.1 20.2.2 20-17.4-.2-13.4-12.6-15.8-12.7-15.8")
}

.site-header::before {
    content: '';
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: -webkit-calc(100% + 50px);
    height: calc(100% + 50px);
    background: rgba(255, 255, 255, 0.96);
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s;
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s
}

@media only screen and (max-width: 1500px) {
    .site-header .site-branding img,
    .site-header .site-branding video {
        max-width: 179px
    }
    .site-header .site-branding svg {
        height: 70px !important;
        -webkit-transform: translateY(5px) translateX(-30px);
        -ms-transform: translateY(5px) translateX(-30px);
        transform: translateY(5px) translateX(-30px)
    }
}

@media only screen and (max-width: 1400px) {
    .site-header .site-branding {
        position: absolute;
        top: 50%;
        left: 2.5%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%)
    }
}

@media only screen and (max-width: 1250px) {
    .site-header {
        top: 0
    }
    .site-header .site-branding {
        position: relative;
        top: auto;
        left: -30px;
        padding: 16px 0 15px;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
    .site-header .site-branding img,
    .site-header .site-branding video {
        max-width: 150px
    }
    .site-header .site-branding svg {
        height: 90px !important
    }
}

#header-line {
    position: absolute;
    height: 1px;
    width: 0;
    background: #CAFBFF;
    -webkit-transition: width 1s;
    transition: width 1s;
    -webkit-transition-delay: 1s;
    transition-delay: 1s
}

.fade-lines #header-line {
    width: 100%
}

.sticky-header .site-header .site-branding {
    position: absolute;
    top: 50%;
    left: 40px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.sticky-header .site-header .site-branding svg {
    -webkit-transform: translateY(5px) translateX(0);
    -ms-transform: translateY(5px) translateX(0);
    transform: translateY(5px) translateX(0)
}

@media only screen and (max-width: 1440px) {
    .sticky-header .site-header .site-branding svg {
        -webkit-transform: translateY(5px) translateX(-30px);
        -ms-transform: translateY(5px) translateX(-30px);
        transform: translateY(5px) translateX(-30px)
    }
}

@media only screen and (max-width: 1400px) {
    .sticky-header .site-header .site-branding {
        position: absolute;
        top: 50%;
        left: 2.5%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%)
    }
}

@media only screen and (max-width: 1250px) {
    .sticky-header .site-header .site-branding {
        position: relative;
        top: auto;
        left: -30px;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

.slow-header .site-header {
    -webkit-transition: transform 1500ms ease 2ms, top 1500ms ease 2ms, background-color 1ms ease, box-shadow 1ms ease;
    -webkit-transition: top 1500ms ease 2ms, background-color 1ms ease, box-shadow 1ms ease, -webkit-transform 1500ms ease 2ms;
    transition: top 1500ms ease 2ms, background-color 1ms ease, box-shadow 1ms ease, -webkit-transform 1500ms ease 2ms;
    transition: transform 1500ms ease 2ms, top 1500ms ease 2ms, background-color 1ms ease, box-shadow 1ms ease;
    transition: transform 1500ms ease 2ms, top 1500ms ease 2ms, background-color 1ms ease, box-shadow 1ms ease, -webkit-transform 1500ms ease 2ms
}

.hide-header .site-header {
    -webkit-transform: translateY(-110%);
    -ms-transform: translateY(-110%);
    transform: translateY(-110%)
}

.sticky-header .site-header {
    top: 0;
    box-shadow: 0px 3px 10px -5px rgba(51, 51, 51, 0.4);
    -webkit-transition: transform 300ms ease, top 300ms ease, background-color 1ms ease 600ms, box-shadow 1ms ease 600ms;
    -webkit-transition: top 300ms ease, background-color 1ms ease 600ms, box-shadow 1ms ease 600ms, -webkit-transform 300ms ease;
    transition: top 300ms ease, background-color 1ms ease 600ms, box-shadow 1ms ease 600ms, -webkit-transform 300ms ease;
    transition: transform 300ms ease, top 300ms ease, background-color 1ms ease 600ms, box-shadow 1ms ease 600ms;
    transition: transform 300ms ease, top 300ms ease, background-color 1ms ease 600ms, box-shadow 1ms ease 600ms, -webkit-transform 300ms ease
}

.sticky-header .site-header::before {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

.sticky-header .site-header .site-branding a {
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8)
}

@media only screen and (max-width: 1250px) {
    .sticky-header .site-header .site-branding a {
        -webkit-transform: scale(0.7);
        -ms-transform: scale(0.7);
        transform: scale(0.7)
    }
}

@media only screen and (max-width: 1023px) {
    .sticky-header .site-header .site-branding {
        max-width: 47px
    }
    .sticky-header .site-header .site-branding a {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

.sep-line:before {
    top: 752px !important
}

.phone-en span {
    padding-right: 20px
}

.explorer-nav .single-portfolio-count {
    min-height: 73px;
    margin-top: 120px
}

.page-banner {
    padding-top: 160px;
    padding-bottom: 170px;
    position: relative;
    background-color: #fff;
    z-index: 100
}

@media only screen and (max-width: 1250px) {
    .page-banner {
        padding-top: 1px
    }
}

.page-banner .banner-object {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    right: 184px;
    width: auto;
    max-width: 55%;
    z-index: 10;
    top: 185px;
    margin-top: 0;
    opacity: 0;
    -webkit-transition: all 350ms ease;
    transition: all 350ms ease
}

@media only screen and (max-width: 1880px) {
    .page-banner .banner-object {
        max-width: 44%
    }
}

@media only screen and (max-width: 1650px) {
    .page-banner .banner-object {
        max-width: 100%;
        margin-top: 25px
    }
    .page-banner .banner-object.show {
        right: 15% !important
    }
}

@media only screen and (max-width: 1400px) {
    .page-banner .banner-object {
        max-width: 47%;
        margin-top: 0
    }
}

@media only screen and (max-width: 500px) {
    .page-banner .banner-object {
        padding-bottom: 150px !important
    }
}

.page-banner .banner-object.show {
    opacity: 1;
    right: 0 !important;
    -webkit-transition: all 1200ms ease 300ms;
    transition: all 1200ms ease 300ms
}

.page-banner .banner-object img,
.page-banner .banner-object video {
    display: block;
    max-width: 100%
}

@media only screen and (max-width: 1366px) {
    .page-banner .banner-object img,
    .page-banner .banner-object video {
        max-width: 80%
    }
}

@media only screen and (max-width: 1024px) {
    .page-banner .banner-object img,
    .page-banner .banner-object video {
        max-width: 100%
    }
}

@media only screen and (max-width: 767px) {
    .page-banner .banner-object img,
    .page-banner .banner-object video {
        max-width: 88%;
        margin-left: auto
    }
}

.page-banner .banner-object img {
    max-height: 100%
}

.page-banner .banner-object video {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1
}

.page-banner>.container {
    height: -webkit-calc(100vh - 348px);
    height: calc(100vh - 348px);
    position: relative;
    z-index: 20
}

.page-banner.home-banner .banner-object {
    z-index: 9
}

.page-banner.home-banner .banner-object img {
    -webkit-transform-origin: center top;
    -ms-transform-origin: center top;
    transform-origin: center top;
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9)
}

.page-banner.home-banner .banner-object img.reset-transform {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
}

@media only screen and (max-width: 1600px) {
    .page-banner.home-banner .banner-object img {
        -webkit-transform: scale(0.7);
        -ms-transform: scale(0.7);
        transform: scale(0.7)
    }
}

@media only screen and (max-width: 1500px) {
    .page-banner.home-banner .banner-object img {
        -webkit-transform: scale(0.6);
        -ms-transform: scale(0.6);
        transform: scale(0.6)
    }
}

@media only screen and (max-width: 1250px) {
    .page-banner.home-banner .banner-object img.home-banner-image {
        max-width: 800px;
        width: 85%;
        margin-left: auto
    }
}

@media only screen and (max-width: 1004px) {
    .page-banner.home-banner .banner-object img.home-banner-image {
        width: 80%
    }
}

.page-banner .banner-caption {
    position: absolute;
    top: 50%;
    left: 15px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.page-banner .banner-caption span.bigletter {
    margin-bottom: -145px;
    float: left;
    position: relative
}

@media only screen and (max-width: 600px) {
    .page-banner .banner-caption span.bigletter {
        margin-bottom: -40px
    }
}

.page-banner h1 {
    margin: 0;
    padding-left: 1rem;
    font-size: 80px;
    line-height: 1.25;
    position: relative
}

@media only screen and (max-width: 1024px) {
    .page-banner h1 {
        padding-left: 1rem
    }
}

.page-banner h2 {
    padding-left: 1rem;
    font-weight: 500;
    font-size: 26px;
    color: #333;
    margin-top: 50px;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 0.5px
}

@media only screen and (max-width: 1649px) {
    .page-banner {
        padding-bottom: 150px
    }
    .page-banner h1 {
        font-size: 55px
    }
    .page-banner h2 {
        position: relative;
        z-index: 1;
        font-size: 17px;
        margin-top: 10px
    }
    .page-banner .banner-caption span.bigletter {
        margin-bottom: -87px;
        padding-left: 0.4rem;
        font-size: 200px
    }
    .page-banner .banner-object {
        max-width: 47%
    }
}

@media only screen and (max-width: 1649px) and (max-width: 1250px) {
    .page-banner .banner-object img {
        max-width: 80%
    }
}

@media only screen and (max-width: 1649px) and (max-width: 1024px) {
    .page-banner .banner-object img {
        max-width: 100%
    }
    .page-banner .banner-object img .banner-object {
        padding: 0;
        top: 90px
    }
}

@media only screen and (max-width: 1649px) and (max-width: 768px) {
    .page-banner .banner-object img {
        top: 20px
    }
}

@media only screen and (max-width: 1250px) {
    .page-banner {
        padding-bottom: 0
    }
    .page-banner h1 {
        font-size: 45px
    }
    .page-banner h2 {
        margin-top: 20px;
        font-size: 19px
    }
    .page-banner .banner-object {
        max-width: 57%
    }
    .page-banner>.container {
        height: -webkit-calc(100vh - 262px);
        height: calc(100vh - 262px)
    }
    .page-banner .banner-object {
        position: relative;
        height: initial;
        max-width: 960px;
        width: 80%;
        padding: 0 20px;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        margin: 0 0 20px auto;
        top: 90px
    }
    .page-banner>.container {
        height: initial
    }
    .page-banner .banner-caption {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        margin: 20px 0
    }
}

@media only screen and (max-width: 1250px) and (max-width: 1024px) {
    .page-banner .banner-caption {
        margin-top: 80px
    }
}

@media only screen and (max-width: 1250px) and (max-width: 600px) {
    .page-banner .banner-caption {
        margin-top: 20px
    }
}

@media only screen and (max-width: 1250px) {
    .page-banner .banner-caption span.bigletter {
        margin-bottom: -77px
    }
    .page-banner span.bigletter {
        font-size: 120px
    }
}

@media only screen and (max-width: 767px) {
    .page-banner {
        padding-bottom: 145px;
        padding-top: 60px
    }
    .page-banner .banner-object {
        padding: 0
    }
    .page-banner h1 {
        font-size: 27.5px
    }
    .page-banner h2 {
        font-size: 18px
    }
}

@media only screen and (max-width: 501px) {
    .page-banner {
        padding-bottom: 30px
    }
    .page-banner .banner-object {
        padding-bottom: 20px !important
    }
}

@media only screen and (max-width: 767px) {
    .portfolio-wrapper {
        padding-top: 90px
    }
}

@media only screen and (max-width: 400px) {
    .portfolio-wrapper {
        padding-top: 0
    }
}

#homewebdesign {
    padding-bottom: 60px;
    /* max-width: 1200px; */
}

@media only screen and (max-width: 1500px) {
    .page-banner .banner-object {
        top: 163px
    }
}

@media only screen and (max-width: 1400px) {
    .page-banner .banner-object {
        top: 190px
    }
}

@media only screen and (max-width: 1024px) {
    .page-banner .banner-object {
        top: 140px
    }
}

@media only screen and (max-width: 770px) {
    .page-banner .banner-object {
        top: 122px
    }
}

@media only screen and (max-width: 501px) {
    .page-banner .banner-object {
        top: 20px
    }
}

@media only screen and (max-width: 1400px) {
    #banner {
        padding-bottom: 200px
    }
}

@media only screen and (max-width: 1024px) {
    #banner {
        padding-bottom: 0
    }
}

@media only screen and (max-width: 650px) {
    #banner {
        padding-bottom: 120px
    }
}

@media only screen and (max-width: 500px) {
    #banner {
        padding-bottom: 0
    }
}

.info-buttons-wrapper {
    height: 164px;
    position: relative;
    z-index: 30;
    width: 0;
    -webkit-transition: all 2300ms ease 1800ms;
    transition: all 2300ms ease 1800ms
}

.info-buttons-wrapper.show {
    width: 100%
}

.info-buttons-wrapper .container {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.info-buttons-wrapper .container button,
.info-buttons-wrapper .container a {
    opacity: 0;
    -webkit-transform: translateY(50px);
    -ms-transform: translateY(50px);
    transform: translateY(50px);
    -webkit-transition: all 350ms ease;
    transition: all 350ms ease
}

.info-buttons-wrapper .container button.show,
.info-buttons-wrapper .container a.show {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
}

.info-buttons-wrapper .container button:not(:first-child),
.info-buttons-wrapper .container a:not(:first-child) {
    margin-left: 25px
}

@media only screen and (max-width: 1250px) {
    .info-buttons-wrapper {
        height: 121px
    }
}

@media only screen and (max-width: 1040px) {
    .info-buttons-wrapper {
        height: 200px
    }
}

@media only screen and (max-width: 1023px) {
    .info-buttons-wrapper .container a:first-child {
        margin-right: 10px
    }
}

@media only screen and (max-width: 769px) {
    .info-buttons-wrapper .container {
        top: 30%
    }
}

@media only screen and (max-width: 600px) {
    .info-buttons-wrapper .container {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex
    }
    .info-buttons-wrapper .container button,
    .info-buttons-wrapper .container a {
        width: -webkit-calc(50% + 20px);
        width: calc(50% + 20px);
        padding: 15px;
        border: 1px solid #000;
        font-size: 10px
    }
    .info-buttons-wrapper .container button:first-child,
    .info-buttons-wrapper .container a:first-child {
        margin-left: -20px;
        margin-right: 0
    }
    .info-buttons-wrapper .container button:not(:first-child),
    .info-buttons-wrapper .container a:not(:first-child) {
        margin-left: 0;
        right: -20px
    }
    .info-buttons-wrapper.narucivanje-info-buttons-wrapper .container button:first-child,
    .info-buttons-wrapper.narucivanje-info-buttons-wrapper .container button:not(:first-child),
    .info-buttons-wrapper.narucivanje-info-buttons-wrapper .container a:first-child,
    .info-buttons-wrapper.narucivanje-info-buttons-wrapper .container a:not(:first-child) {
        margin-left: 0;
        right: 0
    }
}

@media only screen and (max-width: 600px) {
    .page-order-banner .info-buttons-wrapper {
        height: 180px
    }
    .page-order-banner .info-buttons-wrapper .container {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column
    }
    .page-order-banner .info-buttons-wrapper .container button,
    .page-order-banner .info-buttons-wrapper .container a {
        margin-bottom: 10px;
        width: 100%
    }
    .page-order-banner .info-buttons-wrapper .container button:not(:first-child),
    .page-order-banner .info-buttons-wrapper .container a:not(:first-child) {
        margin-left: 0
    }
}

.header-icons {
    position: absolute;
    right: 50px;
    top: 0;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none
}

.header-icons .header-icon-wrap {
    background-color: #333;
    border-radius: 50%;
    margin-right: 10px;
    -webkit-transition: 350ms ease;
    transition: 350ms ease
}

@media only screen and (max-width: 1500px) {
    .header-icons .header-icon-wrap {
        margin-right: 5px
    }
}

.header-icons .header-icon-wrap:last-child {
    margin: 0
}

@media only screen and (min-width: 1271px) {
    .header-icons .header-icon-wrap.show,
    .header-icons .header-icon-wrap:hover {
        background-color: #06B3BA
    }
    .header-icons .header-icon-wrap.show .header-icon,
    .header-icons .header-icon-wrap:hover .header-icon {
        color: #333
    }
    .header-icons .header-icon-wrap.show .hi-wrapper,
    .header-icons .header-icon-wrap:hover .hi-wrapper {
        opacity: 1;
        visibility: visible;
        -webkit-transition: 1ms ease;
        transition: 1ms ease
    }
    .header-icons .header-icon-wrap.show .hi-content,
    .header-icons .header-icon-wrap:hover .hi-content {
        background-color: #06B3BA;
        box-shadow: inset 0 0 12px 2px #06B3BA;
        width: 100%;
        -webkit-transition: width 400ms ease, background-color 00ms ease, box-shadow 400ms ease;
        transition: width 400ms ease, background-color 00ms ease, box-shadow 400ms ease
    }
    .header-icons .header-icon-wrap.show .hi-title .hi-title-inner-wrapper,
    .header-icons .header-icon-wrap:hover .hi-title .hi-title-inner-wrapper {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        -webkit-transition: all 500ms cubic-bezier(0.85, 0.1, 0.25, 1) 600ms;
        transition: all 500ms cubic-bezier(0.85, 0.1, 0.25, 1) 600ms
    }
    .header-icons .header-icon-wrap.show .hi-details,
    .header-icons .header-icon-wrap:hover .hi-details {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        -webkit-transition: 500ms ease 300ms;
        transition: 500ms ease 300ms
    }
}

.header-icons .header-icon {
    display: block;
    position: relative;
    line-height: 1;
    color: #fff;
    width: 48px;
    height: 48px;
    -webkit-transition: 350ms ease;
    transition: 350ms ease;
    cursor: pointer
}

@media only screen and (max-width: 1500px) {
    .header-icons .header-icon {
        width: 40px;
        height: 40px
    }
}

@media only screen and (max-width: 460px) {
    .header-icons .header-icon {
        width: 43px;
        height: 43px
    }
}

.header-icons .header-icon span,
.header-icons .header-icon::before {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.header-icons .header-icon.icon-email {
    font-size: 13px
}

@media only screen and (max-width: 1500px) {
    .header-icons .header-icon.icon-email {
        font-size: 12px
    }
}

.header-icons .header-icon.icon-email span {
    display: none
}

.header-icons .header-icon.icon-follow {
    font-size: 22px
}

.header-icons .header-icon.lang-info {
    font-weight: 600
}

@media only screen and (max-width: 1500px) {
    .header-icons .header-icon.lang-info {
        font-size: 15px
    }
}

.header-icons .hi-wrapper {
    width: 100%;
    position: absolute;
    top: 104px;
    right: -30px;
    padding-top: 60px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 400ms ease;
    transition: 400ms ease
}

@media only screen and (max-width: 1400px) {
    .header-icons .hi-wrapper {
        top: 75px;
        padding-top: 89px
    }
}

.header-icons .hi-content {
    border-bottom: 1px solid #06B3BA;
    height: 215px;
    width: 0;
    overflow: hidden;
    float: right;
    padding: 40px 24px 0;
    -webkit-transition: 1ms ease 400ms;
    transition: 1ms ease 400ms
}

.header-icons .hi-content ul {
    color: #333;
    list-style: none;
    padding: 20px 0 0 0;
    margin: 0
}

.header-icons .hi-content span {
    color: #333;
    cursor: pointer;
    -webkit-transition: all 350ms ease;
    transition: all 350ms ease
}

.header-icons .hi-content span:hover {
    color: #fff
}

.header-icons .hi-title {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    color: #333
}

.header-icons .hi-title .hi-title-wrapper {
    overflow: hidden;
    display: block
}

.header-icons .hi-title .hi-title-inner-wrapper {
    display: block;
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: 1ms ease 400ms;
    transition: 1ms ease 400ms
}

.header-icons .hi-details {
    opacity: 0;
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
    -webkit-transition: 1ms ease 400ms;
    transition: 1ms ease 400ms
}

.header-icons .hi-phone {
    font-size: 16px;
    line-height: 1
}

.header-icons .hi-phone li:first-child span {
    padding-bottom: 4px
}

.header-icons .hi-phone li:last-child span {
    padding-top: 4px
}

.header-icons .hi-phone a {
    margin-left: 20px
}

.header-icons .hi-phone span {
    font-weight: 500;
    display: inline-block;
    width: 90px;
    border-right: 1px solid #333;
    box-sizing: content-box
}

.header-icons .hi-lang li {
    display: inline-block;
    padding-right: 13px
}

.header-icons .hi-lang li:last-child {
    padding-right: 0;
    padding-left: 15px
}

.header-icons .hi-lang li:nth-child(2) {
    border-left: 1px solid rgba(51, 51, 51, 0.1);
    border-right: 1px solid rgba(51, 51, 51, 0.1)
}

.header-icons .hi-lang li:nth-child(2) a {
    padding-left: 15px
}

@media only screen and (max-width: 1250px) {
    .header-icons .hi-lang li {
        font-size: 14px
    }
}

.header-icons .hi-lang a {
    display: block
}

.header-icons .hi-lang span {
    display: block
}

.header-icons .hi-lang span:first-child {
    font-weight: 600
}

.header-icons .hi-lang span:last-child {
    text-transform: lowercase;
    font-weight: 300
}

.header-icons .hi-lang-o li {
    padding-right: 4px
}

.header-icons .hi-follow li {
    display: inline-block;
    font-size: 20px;
    margin-right: 7px
}

@media only screen and (max-width: 1250px) {
    .header-icons {
        position: relative;
        height: auto;
        right: auto;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        top: 50px;
        margin-bottom: 40px
    }
    .header-icons .header-icon-wrap {
        background-color: #fff;
        margin-right: 20px
    }
    .header-icons .header-icon-wrap:hover,
    .header-icons .header-icon-wrap:focus {
        background-color: #06B3BA
    }
    .header-icons .hi-wrapper {
        right: 0;
        top: auto;
        bottom: 70px
    }
    .header-icons .hi-content {
        max-width: 320px;
        width: 100%;
        float: none;
        background-color: #06B3BA;
        margin: 0 auto
    }
    .header-icons .hi-content ul {
        text-align: initial;
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        color: #333
    }
    .header-icons .hi-title .hi-title-inner-wrapper {
        color: #333;
        text-align: left
    }
    .header-icons .header-icon {
        color: #333
    }
    .header-icons .header-icon:hover+.hi-wrapper,
    .header-icons .header-icon:focus+.hi-wrapper {
        opacity: 1;
        visibility: visible
    }
    .header-icons .header-icon:hover+.hi-wrapper .hi-title .hi-title-inner-wrapper,
    .header-icons .header-icon:focus+.hi-wrapper .hi-title .hi-title-inner-wrapper {
        -webkit-transition: none;
        transition: none;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

@media only screen and (max-width: 1250px) and (max-width: 600px) {
    .header-icons .header-icon:hover+.hi-wrapper .hi-title .hi-title-inner-wrapper,
    .header-icons .header-icon:focus+.hi-wrapper .hi-title .hi-title-inner-wrapper {
        line-height: 1.5
    }
}

@media only screen and (max-width: 1250px) {
    .header-icons .header-icon:hover+.hi-wrapper .hi-content ul,
    .header-icons .header-icon:focus+.hi-wrapper .hi-content ul {
        -webkit-transition: none;
        transition: none;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

@media only screen and (max-width: 400px) {
    .header-icons .header-icon-wrap {
        margin-right: 14px
    }
}

.blog-icon {
    margin-right: 10px
}

@media only screen and (max-width: 1024px) {
    .blog-icon {
        border: none;
        background-color: #fff !important;
        color: #333 !important
    }
}

.blog-icon span {
    font-size: 12px;
    background-color: #333;
    color: #fff !important;
    border: 2px solid #333;
    border-radius: 50%;
    text-transform: uppercase;
    font-weight: 700;
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: all 350ms ease;
    transition: all 350ms ease
}

.blog-icon span:hover,
.blog-icon span:active,
.blog-icon span:focus {
    background-color: #06B3BA;
    border: 2px solid #06B3BA;
    color: #333 !important
}

@media only screen and (max-width: 1500px) {
    .blog-icon span {
        font-size: 10px
    }
}

@media only screen and (max-width: 1024px) {
    .blog-icon span {
        background-color: #fff !important;
        color: #333 !important;
        border: none
    }
    .blog-icon span:hover,
    .blog-icon span:active,
    .blog-icon span:focus {
        background-color: #06B3BA !important;
        border: none;
        color: #333 !important
    }
}

.accordion {
    overflow: hidden
}

.accordion .container {
    position: relative;
    max-height: 120px;
    -webkit-transition: 0.35s ease;
    transition: 0.35s ease
}

.accordion .x-btn {
    position: relative;
    top: 0;
    left: -webkit-calc(50% + 265px);
    left: calc(50% + 265px);
    -webkit-transition: 0s linear;
    transition: 0s linear
}

@media only screen and (max-width: 1649px) {
    .accordion .x-btn {
        left: -webkit-calc(50% + 192px);
        left: calc(50% + 192px)
    }
}

.accordion .section-content {
    overflow: hidden;
    width: 50%;
    margin-top: -75px
}

.accordion.odd .x-btn {
    left: auto
}

.accordion.odd .section-content {
    position: relative;
    left: 25%
}

.accordion.active-acc {
    overflow: visible
}

.accordion.active-acc .x-btn {
    position: -webkit-sticky;
    position: sticky;
    top: 150px;
    -webkit-transition: 0s linear;
    transition: 0s linear
}

@media only screen and (max-width: 767px) {
    .accordion.active-acc .x-btn {
        -webkit-transform: translateX(-5px);
        -ms-transform: translateX(-5px);
        transform: translateX(-5px)
    }
}

.accordion-title {
    display: block;
    font-family: "Playfair Display", serif;
    color: #333
}

@media only screen and (max-width: 767px) {
    .accordion .x-btn {
        left: 100%;
        width: 50px;
        height: 50px;
        -webkit-transform: translateX(-webkit-calc(-100% - 5px));
        -ms-transform: translateX(calc(-100% - 5px));
        transform: translateX(calc(-100% - 5px))
    }
    .accordion .x-btn span {
        width: 50px;
        height: 50px
    }
    .accordion .x-btn span::before {
        width: 22px
    }
    .accordion .x-btn span::after {
        height: 22px
    }
}

.site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding-top: 150px;
    background-color: #383838;
    text-align: center;
    color: #fff
}

.site-footer a,
.site-footer h2 {
    color: #fff
}

.site-footer a:hover {
    color: #06B3BA
}

.site-footer .footer-pretitle {
    font-size: 18px
}

.site-footer h2 {
    margin: 15px 0 25px
}

.site-footer .footer-email {
    font-size: 14px
}

@media only screen and (max-width: 1024px) {
    .site-footer .footer-email {
        font-size: 17px
    }
}

@media only screen and (max-width: 768px) {
    .site-footer .footer-email {
        font-size: 16px;
        line-height: 1.7
    }
}

@media only screen and (max-width: 600px) {
    .site-footer .footer-email {
        font-size: 15px
    }
}

.site-footer .footer-info {
    margin-top: 80px;
    padding-left: 0;
    padding-right: 0;
    font-size: 14px;
    text-align: left
}

.site-footer .footer-info>ul,
.site-footer .footer-info address {
    width: 25%;
    float: left;
    margin: 0;
    padding: 0;
    font-style: normal;
    list-style: none
}

.site-footer .footer-info ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.site-footer .footer-info li {
    margin-bottom: 5px
}

.site-footer .footer-info li:last-child {
    margin-bottom: 0
}

.site-footer .footer-info li.finfo-title {
    text-transform: uppercase;
    font-size: 18px;
    margin-bottom: 10px
}

.site-footer .footer-info a {
    color: #fff
}

.site-footer .footer-info a:hover {
    color: #06B3BA
}

.site-footer .footer-social {
    margin-top: 60px
}

.site-footer .footer-social span {
    display: inline-block;
    vertical-align: middle;
    font-size: 20px;
    margin: 0 12px;
    -webkit-transition: all 350ms ease;
    transition: all 350ms ease
}

@media only screen and (max-width: 420px) {
    .site-footer .footer-social span {
        margin: 0 8px
    }
}

.site-footer .footer-social span:hover {
    color: #06B3BA;
    cursor: pointer
}

.site-footer .copyright {
    display: block;
    font-size: 12px;
    font-weight: 300;
    margin-top: 45px;
    padding-bottom: 30px
}

.site-footer #toTop {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    cursor: pointer;
    width: 70px;
    margin: 0 auto;
    margin-bottom: 20px;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    line-height: 0.7;
    height: 70px;
    background: #06B3BA;
    border-radius: 100%;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

@media only screen and (max-width: 1500px) {
    .site-footer #toTop {
        width: 40px;
        margin-bottom: 10px;
        height: 40px
    }
}

.site-footer #toTop span {
    position: relative;
    color: #383838;
    font-size: 38px
}

@media only screen and (max-width: 1500px) {
    .site-footer #toTop span {
        font-size: 27px
    }
}

@media only screen and (max-width: 767px) {
    .site-footer #toTop span {
        font-size: 27px
    }
}

.site-footer #toTop img {
    position: relative;
    display: block;
    width: 100%;
    z-index: 3
}

.site-footer #toTop::before {
    content: '';
    position: absolute;
    border-radius: 100%;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2
}

.site-footer #toTop:hover::before {
    -webkit-animation: sonar-effect2 0.8s ease-out 75ms;
    animation: sonar-effect2 0.8s ease-out 75ms
}

@media only screen and (max-width: 1649px) {
    .site-footer {
        padding-top: 80px
    }
    .site-footer h2 {
        margin: 15px 0 5px
    }
    .site-footer .footer-info {
        margin-top: 50px
    }
    .site-footer .footer-info li {
        margin-bottom: 0
    }
    .site-footer .copyright {
        margin-top: 45px
    }
}

@media only screen and (max-width: 1250px) {
    .site-footer {
        padding-top: 50px
    }
    .site-footer h2 {
        margin: 20px 0 10px
    }
    .site-footer .footer-info {
        margin-top: 40px
    }
    .site-footer .footer-social {
        margin-top: 40px
    }
    .site-footer .copyright {
        margin-top: 40px
    }
}

@media only screen and (max-width: 1025px) {
    .site-footer {
        position: static
    }
    .site-footer .footer-info ul,
    .site-footer .footer-info address {
        width: 100%;
        margin-bottom: 30px;
        text-align: center
    }
}

@media only screen and (max-width: 600px) {
    .site-footer {
        position: relative;
        bottom: auto;
        left: auto;
        width: 100%;
        padding-left: 15px;
        padding-right: 15px
    }
    .site-footer .footer-info ul,
    .site-footer .footer-info address {
        float: none
    }
    .site-footer .footer-info li:last-child {
        margin-bottom: 5px
    }
}

@-webkit-keyframes sonar-effect {
    0% {
        opacity: 0.3
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 2px rgba(51, 51, 51, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(51, 51, 51, 0.5)
    }
    100% {
        box-shadow: 0 0 0 2px rgba(51, 51, 51, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(51, 51, 51, 0.5);
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        opacity: 0
    }
}

@keyframes sonar-effect {
    0% {
        opacity: 0.3
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 2px rgba(51, 51, 51, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(51, 51, 51, 0.5)
    }
    100% {
        box-shadow: 0 0 0 2px rgba(51, 51, 51, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(51, 51, 51, 0.5);
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        opacity: 0
    }
}

@-webkit-keyframes sonar-effect2 {
    0% {
        opacity: 0.3
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 2px rgba(250, 204, 22, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(250, 204, 22, 0.5)
    }
    100% {
        box-shadow: 0 0 0 2px rgba(250, 204, 22, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(250, 204, 22, 0.5);
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        opacity: 0
    }
}

@keyframes sonar-effect2 {
    0% {
        opacity: 0.3
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 2px rgba(250, 204, 22, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(250, 204, 22, 0.5)
    }
    100% {
        box-shadow: 0 0 0 2px rgba(250, 204, 22, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(250, 204, 22, 0.5);
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        opacity: 0
    }
}

@media only screen and (max-width: 1400px) {
    .section-title {
        font-size: 32px
    }
    .site-footer h2 {
        margin: 5px 0 5px
    }
    .site-footer .footer-pretitle {
        font-size: 15px
    }
}

@media only screen and (max-width: 1400px) and (max-width: 1024px) {
    .site-footer .footer-pretitle {
        font-size: 22px
    }
}

@media only screen and (max-width: 1400px) and (max-width: 768px) {
    .site-footer .footer-pretitle {
        font-size: 17px;
        line-height: 1.8
    }
}

@media only screen and (max-width: 1400px) and (max-width: 600px) {
    .site-footer .footer-pretitle {
        font-size: 15px
    }
}

@media only screen and (max-width: 1400px) {
    .site-footer .footer-social {
        margin-top: 35px
    }
    .site-footer .copyright {
        margin-top: 45px;
        margin-bottom: 0
    }
    .site-footer .footer-info {
        margin-top: 35px
    }
    .site-footer .footer-info ul,
    .site-footer .footer-info address {
        padding-left: 0
    }
    .site-footer .footer-info li.finfo-title {
        font-size: 15px
    }
}

@media only screen and (max-width: 1400px) and (max-width: 1024px) {
    .site-footer .footer-info li.finfo-title {
        font-size: 19px
    }
}

@media only screen and (max-width: 1400px) and (max-width: 768px) {
    .site-footer .footer-info li.finfo-title {
        font-size: 21px
    }
}

@media only screen and (max-width: 1400px) and (max-width: 600px) {
    .site-footer .footer-info li.finfo-title {
        font-size: 15px
    }
}

@media only screen and (max-width: 1400px) {
    .site-footer .footer-info a,
    .site-footer .footer-info li {
        font-size: 16px;
        line-height: 1.8
    }
}

@media only screen and (max-width: 1400px) and (max-width: 1024px) {
    .site-footer .footer-info a,
    .site-footer .footer-info li {
        font-size: 18px
    }
}

@media only screen and (max-width: 1400px) and (max-width: 600px) {
    .site-footer .footer-info a,
    .site-footer .footer-info li {
        font-size: 15px
    }
}

@media only screen and (max-width: 1024px) {
    .section-title {
        font-size: 35px
    }
}

@media only screen and (max-width: 768px) {
    font-size: 36px
}

@media only screen and (max-width: 600px) {
    .section-title {
        font-size: 23.5px
    }
}

.pop-up-wrapper {
    position: fixed;
    z-index: 10100;
    width: 0;
    height: 100%;
    right: 0;
    top: 0
}

.pop-up-wrapper .contact-us-wrapper {
    width: 70px;
    height: 70px;
    position: absolute;
    right: 50px;
    bottom: 70px;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 400ms ease;
    transition: all 400ms ease
}

@media only screen and (max-width: 1400px) {
    .pop-up-wrapper .contact-us-wrapper {
        bottom: 125px
    }
}

.pop-up-wrapper .contact-us-wrapper.show {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
}

.pop-up-wrapper .contact-us-wrapper:after {
    content: '';
    display: block;
    background-color: #333;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250vw;
    height: 250vw;
    margin-top: -125vw;
    margin-left: -125vw;
    z-index: -1;
    -webkit-transform: scale(0.005);
    -ms-transform: scale(0.005);
    transform: scale(0.005);
    -webkit-transition: transform 600ms 400ms;
    -webkit-transition: -webkit-transform 600ms 400ms;
    transition: -webkit-transform 600ms 400ms;
    transition: transform 600ms 400ms;
    transition: transform 600ms 400ms, -webkit-transform 600ms 400ms
}

@media only screen and (max-width: 1024px) {
    .pop-up-wrapper .contact-us-wrapper:after {
        width: 320vw;
        height: 320vw
    }
}

.pop-up-wrapper .contact-us-wrapper:before {
    content: '';
    display: block;
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    top: 0;
    left: 0;
    padding: 0;
    z-index: -1;
    box-shadow: 0 0 0 2px rgba(51, 51, 51, 0.1);
    opacity: 0;
    -webkit-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7)
}

.pop-up-wrapper .contact-us-wrapper:hover:before {
    -webkit-animation: sonar-effect 0.8s ease-out 75ms;
    animation: sonar-effect 0.8s ease-out 75ms
}

.pop-up-wrapper .contact-us-btn {
    line-height: 1;
    display: block;
    background-color: #292929;
    color: #fff;
    font-size: 25px;
    width: 70px;
    height: 70px;
    text-align: center;
    padding: 21px 0;
    border-radius: 50%;
    position: relative;
    -webkit-transition: transform 400ms ease, background-color 400ms ease, color 400ms ease;
    -webkit-transition: background-color 400ms ease, color 400ms ease, -webkit-transform 400ms ease;
    transition: background-color 400ms ease, color 400ms ease, -webkit-transform 400ms ease;
    transition: transform 400ms ease, background-color 400ms ease, color 400ms ease;
    transition: transform 400ms ease, background-color 400ms ease, color 400ms ease, -webkit-transform 400ms ease
}

.pop-up-wrapper .contact-us-btn:hover {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9)
}

.pop-up-wrapper.open {
    width: 100%
}

.pop-up-wrapper.open .contact-us-wrapper {
    bottom: -webkit-calc(100% - 120px);
    bottom: calc(100% - 120px)
}

.pop-up-wrapper.open .contact-us-wrapper:after {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
}

.pop-up-wrapper.open .contact-us-wrapper:hover:before {
    -webkit-animation: none;
    animation: none
}

.pop-up-wrapper.open .contact-us-btn {
    background-color: #06B3BA;
    color: #333;
    font-size: 33px;
    padding: 16px 0
}

.pop-up-wrapper.open .contact-us-btn span:before {
    content: ''
}

@media only screen and (max-width: 1650px) {
    .pop-up-wrapper .contact-us-wrapper,
    .pop-up-wrapper .contact-us-btn {
        height: 55px;
        width: 55px;
        padding: 0;
        line-height: 62px;
        font-size: 20px
    }
    .pop-up-wrapper.open .contact-us-wrapper,
    .pop-up-wrapper.open .contact-us-btn {
        padding: 0;
        line-height: 68px
    }
}

@media only screen and (max-width: 1250px) {
    .pop-up-wrapper .contact-us-wrapper {
        right: 20px;
        bottom: 1.05556rem;
        width: 40px;
        height: 40px
    }
    .pop-up-wrapper .contact-us-btn {
        width: 40px;
        height: 40px;
        padding: 0;
        font-size: 15px;
        line-height: 40px
    }
    .pop-up-wrapper.open .contact-us-btn {
        padding: 0;
        font-size: 20px;
        line-height: 46px
    }
}

@media only screen and (max-width: 1023px) {
    .pop-up-wrapper {
        -webkit-transition: background-color 1ms ease 400ms, width 400ms ease;
        transition: background-color 1ms ease 400ms, width 400ms ease
    }
    .pop-up-wrapper.open {
        background-color: #333;
        -webkit-transition: width 400ms ease 400ms;
        transition: width 400ms ease 400ms
    }
    .pop-up-wrapper.open .contact-us-wrapper {
        bottom: -webkit-calc(100% - 80px);
        bottom: calc(100% - 80px)
    }
    .pop-up-wrapper.open .contact-us-wrapper:after {
        content: none
    }
}

.forms-wrapper {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    color: #fff;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.forms-wrapper .write-text .inner-wrapper {
    -webkit-transition: all 600ms ease-in-out;
    transition: all 600ms ease-in-out
}

.forms-wrapper p {
    font-size: 18px;
    /* font-family: "Playfair Display", serif; */
    margin-bottom: 80px;
    line-height: 1.4
}

.forms-wrapper .popart-btn {
    margin-right: 30px
}

@media only screen and (max-width: 1250px) {
    .forms-wrapper p {
        font-size: 50px
    }
}

@media only screen and (max-width: 767px) {
    .forms-wrapper {
        top: 0;
        height: 100%;
        overflow-y: scroll;
        padding: 50px 10px;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

@media only screen and (max-width: 600px) {
    .forms-wrapper {
        max-width: 300px
    }
    .forms-wrapper p {
        font-size: 30px;
        margin-bottom: 30px
    }
    .forms-wrapper .popart-btn {
        margin-right: 0;
        margin-bottom: 20px;
        display: block
    }
}

.pop-up-wrapper .form-container,
.form-holder {
    max-width: 100%;
    position: relative;
    display: none
}

.pop-up-wrapper .form-container .popart-fill-btn,
.form-holder .popart-fill-btn {
    background-color: #06B3BA;
    border-color: #06B3BA
}

.pop-up-wrapper .form-container .prev-form,
.form-holder .prev-form {
    font-size: 50px;
    position: absolute;
    top: -50px;
    display: none;
    cursor: pointer
}

.pop-up-wrapper .form-container label,
.form-holder label {
    color: #959595
}

.pop-up-wrapper .form-container .fake-checkbox,
.form-holder .fake-checkbox {
    display: block;
    float: left
}

.pop-up-wrapper .form-container .fake-checkbox span[class*="-privacy"],
.form-holder .fake-checkbox span[class*="-privacy"] {
    width: 66px;
    height: 36px;
    border: 2px solid #959595;
    border-radius: 30px;
    position: relative;
    cursor: pointer;
    margin-right: 20px
}

.pop-up-wrapper .form-container .fake-checkbox span[class*="-privacy"]:before,
.form-holder .fake-checkbox span[class*="-privacy"]:before {
    position: absolute;
    left: 1px;
    top: 1px;
    border: 2px solid #959595;
    background-color: #959595;
    color: #fff;
    border-radius: 50%;
    font-size: 20px;
    padding: 3px;
    -webkit-transition: all 350ms ease;
    transition: all 350ms ease
}

.pop-up-wrapper .form-container .fake-checkbox .privacy-form-link,
.form-holder .fake-checkbox .privacy-form-link {
    display: block;
    float: right;
    height: 36px;
    line-height: 1.3
}

.pop-up-wrapper .form-container .fake-checkbox .privacy-form-link a,
.form-holder .fake-checkbox .privacy-form-link a {
    text-decoration: underline;
    -webkit-transition: 350ms ease;
    transition: 350ms ease
}

.pop-up-wrapper .form-container .fake-checkbox .privacy-form-link a:hover,
.form-holder .fake-checkbox .privacy-form-link a:hover {
    color: #959595
}

.pop-up-wrapper .form-container input[type="checkbox"]:checked+label span:before,
.form-holder input[type="checkbox"]:checked+label span:before {
    left: 31px;
    border-color: #06B3BA;
    background-color: #06B3BA
}

.pop-up-wrapper .form-container .input-wrapper,
.form-holder .input-wrapper {
    position: relative;
    margin-bottom: 40px
}

.pop-up-wrapper .form-container .input-wrapper label,
.form-holder .input-wrapper label {
    pointer-events: none;
    position: absolute;
    top: 17.5px;
    left: 25px;
    line-height: 1;
    -webkit-transition: all 350ms ease;
    transition: all 350ms ease
}

.pop-up-wrapper .form-container .input-wrapper input:hover+label,
.pop-up-wrapper .form-container .input-wrapper input:focus+label,
.pop-up-wrapper .form-container .input-wrapper input:valid+label,
.pop-up-wrapper .form-container .input-wrapper .fake-input:hover+label,
.pop-up-wrapper .form-container .input-wrapper .fake-input:focus+label,
.form-holder .input-wrapper input:hover+label,
.form-holder .input-wrapper input:focus+label,
.form-holder .input-wrapper input:valid+label,
.form-holder .input-wrapper .fake-input:hover+label,
.form-holder .input-wrapper .fake-input:focus+label {
    top: -15px;
    font-size: 12px
}

.pop-up-wrapper .form-container .input-wrapper .input-icon,
.form-holder .input-wrapper .input-icon {
    position: absolute;
    right: 30px;
    top: 17.5px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    display: block;
    font-size: 20px;
    color: #959595;
    opacity: 0;
    -webkit-transition: opacity .5s;
    transition: opacity .5s
}

.pop-up-wrapper .form-container .input-wrapper:hover .input-icon,
.form-holder .input-wrapper:hover .input-icon {
    color: #fff
}

@media only screen and (max-width: 1650px) {
    .pop-up-wrapper .form-container .input-wrapper,
    .form-holder .input-wrapper {
        margin-bottom: 30px
    }
}

.pop-up-wrapper .form-container input,
.pop-up-wrapper .form-container textarea,
.pop-up-wrapper .form-container .fake-input,
.form-holder input,
.form-holder textarea,
.form-holder .fake-input {
    display: block;
    outline: none;
    padding: 17px 40px;
    font-size: 14px;
    line-height: 1.2;
    width: 100%;
    color: #959595;
    border: 2px solid #959595;
    border-radius: 30px;
    background-color: transparent;
    -webkit-transition: all 350ms ease;
    transition: all 350ms ease
}

.pop-up-wrapper .form-container input:hover,
.pop-up-wrapper .form-container input:focus,
.pop-up-wrapper .form-container textarea:hover,
.pop-up-wrapper .form-container textarea:focus,
.pop-up-wrapper .form-container .fake-input:hover,
.pop-up-wrapper .form-container .fake-input:focus,
.form-holder input:hover,
.form-holder input:focus,
.form-holder textarea:hover,
.form-holder textarea:focus,
.form-holder .fake-input:hover,
.form-holder .fake-input:focus {
    color: #fff;
    border-color: #fff
}

.pop-up-wrapper .form-container input:hover+label,
.pop-up-wrapper .form-container input:focus+label,
.pop-up-wrapper .form-container textarea:hover+label,
.pop-up-wrapper .form-container textarea:focus+label,
.pop-up-wrapper .form-container .fake-input:hover+label,
.pop-up-wrapper .form-container .fake-input:focus+label,
.form-holder input:hover+label,
.form-holder input:focus+label,
.form-holder textarea:hover+label,
.form-holder textarea:focus+label,
.form-holder .fake-input:hover+label,
.form-holder .fake-input:focus+label {
    color: #fff
}

.pop-up-wrapper .form-container .fake-input,
.form-holder .fake-input {
    min-height: 50px
}

.pop-up-wrapper .form-container .fake-input-file,
.form-holder .fake-input-file {
    cursor: pointer
}

.pop-up-wrapper .form-container .fake-select,
.form-holder .fake-select {
    cursor: pointer;
    position: relative
}

.pop-up-wrapper .form-container .fake-select .fake-select-text,
.form-holder .fake-select .fake-select-text {
    pointer-events: none;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 40px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.pop-up-wrapper .form-container .fake-select .fake-select-text:after,
.form-holder .fake-select .fake-select-text:after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translate(-100%, -50%);
    -ms-transform: translate(-100%, -50%);
    transform: translate(-100%, -50%)
}

.pop-up-wrapper .form-container .fake-select .fake-select-text.selecting:after,
.form-holder .fake-select .fake-select-text.selecting:after {
    -webkit-transform: translate(100%, -50%);
    -ms-transform: translate(100%, -50%);
    transform: translate(100%, -50%);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease
}

.pop-up-wrapper .form-container .fake-select.selected+label,
.form-holder .fake-select.selected+label {
    top: -15px;
    font-size: 12px
}

.pop-up-wrapper .form-container .fake-select:hover,
.form-holder .fake-select:hover {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 0
}

.pop-up-wrapper .form-container .fake-select:hover .fake-options,
.form-holder .fake-select:hover .fake-options {
    border-color: #fff;
    height: 228px;
    visibility: visible;
    opacity: 1
}

.pop-up-wrapper .form-container .fake-select:hover .fake-options:before,
.form-holder .fake-select:hover .fake-options:before {
    width: -webkit-calc(100% - 80px);
    width: calc(100% - 80px)
}

.pop-up-wrapper .form-container .fake-options,
.form-holder .fake-options {
    display: block;
    position: absolute;
    background-color: rgba(51, 51, 51, 0.95);
    width: -webkit-calc(100% + 4px);
    width: calc(100% + 4px);
    left: -2px;
    top: 40px;
    padding: 0 40px;
    z-index: 10;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    border-right: 2px solid #959595;
    border-bottom: 2px solid #959595;
    border-left: 2px solid #959595;
    overflow: hidden;
    height: 0;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 250ms ease;
    transition: all 250ms ease
}

.pop-up-wrapper .form-container .fake-options .f-opt,
.form-holder .fake-options .f-opt {
    display: block;
    margin: 10px 0;
    position: relative;
    -webkit-transition: all 350ms ease;
    transition: all 350ms ease
}

.pop-up-wrapper .form-container .fake-options .f-opt:first-child,
.form-holder .fake-options .f-opt:first-child {
    margin-top: 40px
}

.pop-up-wrapper .form-container .fake-options .f-opt:last-child,
.form-holder .fake-options .f-opt:last-child {
    margin-bottom: 40px
}

.pop-up-wrapper .form-container .fake-options .f-opt:before,
.pop-up-wrapper .form-container .fake-options .f-opt:after,
.form-holder .fake-options .f-opt:before,
.form-holder .fake-options .f-opt:after {
    content: '';
    -webkit-transition: all 350ms ease;
    transition: all 350ms ease
}

.pop-up-wrapper .form-container .fake-options .f-opt:before,
.form-holder .fake-options .f-opt:before {
    content: "\E011";
    font-family: 'icomoon';
    font-size: 17px;
    color: #fff;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    opacity: 0;
    position: absolute;
    top: -2px;
    left: -5px;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

.pop-up-wrapper .form-container .fake-options .f-opt:after,
.form-holder .fake-options .f-opt:after {
    display: block;
    width: 15px;
    height: 2px;
    background-color: #fff;
    position: absolute;
    left: -25px;
    top: 6px;
    opacity: 0
}

.pop-up-wrapper .form-container .fake-options .f-opt:hover,
.form-holder .fake-options .f-opt:hover {
    padding-left: 20px
}

.pop-up-wrapper .form-container .fake-options .f-opt:hover:before,
.form-holder .fake-options .f-opt:hover:before {
    opacity: 1;
    left: 0
}

.pop-up-wrapper .form-container .fake-options .f-opt:hover:after,
.form-holder .fake-options .f-opt:hover:after {
    width: 10px;
    left: 0px;
    opacity: 1
}

.pop-up-wrapper .form-container .fake-options:before,
.form-holder .fake-options:before {
    content: '';
    display: block;
    width: 0;
    height: 1px;
    margin: 0 auto;
    background-color: #fff;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    -webkit-transition: all 350ms ease;
    transition: all 350ms ease
}

.pop-up-wrapper .form-container textarea,
.form-holder textarea {
    min-height: 200px;
    resize: none
}

.pop-up-wrapper .form-container .fake-submit,
.form-holder .fake-submit {
    border-color: #06B3BA;
    background-color: #06B3BA;
    color: #333;
    margin-right: 0;
    float: right
}

.pop-up-wrapper .form-container input[type="file"],
.pop-up-wrapper .form-container input[type="checkbox"],
.pop-up-wrapper .form-container input.select-dropdown,
.form-holder input[type="file"],
.form-holder input[type="checkbox"],
.form-holder input.select-dropdown {
    display: none
}

.pop-up-wrapper .form-container::-webkit-input-placeholder,
.form-holder::-webkit-input-placeholder {
    color: #959595
}

.pop-up-wrapper .form-container::-moz-placeholder,
.form-holder::-moz-placeholder {
    color: #959595
}

.pop-up-wrapper .form-container:-ms-input-placeholder,
.form-holder:-ms-input-placeholder {
    color: #959595
}

.pop-up-wrapper .form-container:-moz-placeholder,
.form-holder:-moz-placeholder {
    color: #959595
}

@media only screen and (max-width: 1650px) {
    .pop-up-wrapper .form-container,
    .form-holder {
        max-width: 800px
    }
    .pop-up-wrapper .form-container p,
    .form-holder p {
        font-size: 40px;
        margin-bottom: 30px
    }
    .pop-up-wrapper .form-container input,
    .pop-up-wrapper .form-container textarea,
    .pop-up-wrapper .form-container .fake-input,
    .form-holder input,
    .form-holder textarea,
    .form-holder .fake-input {
        display: block;
        outline: none;
        padding: 12px 30px;
        font-size: 14px;
        line-height: 1.2;
        width: 100%;
        color: #959595;
        border: 2px solid #959595;
        border-radius: 30px;
        background-color: transparent;
        -webkit-transition: all 350ms ease;
        transition: all 350ms ease
    }
    .pop-up-wrapper .form-container input:hover,
    .pop-up-wrapper .form-container input:focus,
    .pop-up-wrapper .form-container textarea:hover,
    .pop-up-wrapper .form-container textarea:focus,
    .pop-up-wrapper .form-container .fake-input:hover,
    .pop-up-wrapper .form-container .fake-input:focus,
    .form-holder input:hover,
    .form-holder input:focus,
    .form-holder textarea:hover,
    .form-holder textarea:focus,
    .form-holder .fake-input:hover,
    .form-holder .fake-input:focus {
        color: #fff;
        border-color: #fff
    }
    .pop-up-wrapper .form-container input:hover+label,
    .pop-up-wrapper .form-container input:focus+label,
    .pop-up-wrapper .form-container textarea:hover+label,
    .pop-up-wrapper .form-container textarea:focus+label,
    .pop-up-wrapper .form-container .fake-input:hover+label,
    .pop-up-wrapper .form-container .fake-input:focus+label,
    .form-holder input:hover+label,
    .form-holder input:focus+label,
    .form-holder textarea:hover+label,
    .form-holder textarea:focus+label,
    .form-holder .fake-input:hover+label,
    .form-holder .fake-input:focus+label {
        color: #fff
    }
}

@media only screen and (max-width: 1650px) {
    .pop-up-wrapper .form-container .prev-form,
    .form-holder .prev-form {
        top: 0;
        left: -50px;
        font-size: 40px
    }
}

@media only screen and (max-width: 600px) {
    .pop-up-wrapper .form-container p,
    .form-holder p {
        font-size: 30px
    }
}

.visible .input-wrapper .input-icon {
    opacity: 1
}

.split-inputs .input-wrapper {
    width: -webkit-calc(50% - 20px);
    width: calc(50% - 20px);
    float: left
}

.split-inputs>*:nth-child(even) {
    float: right
}

@media only screen and (max-width: 767px) {
    .split-inputs .input-wrapper {
        width: 100%;
        float: none
    }
    .split-inputs>*:nth-child(even) {
        float: none
    }
}

.fade-input {
    opacity: 0;
    -webkit-transform: translateY(50px);
    -ms-transform: translateY(50px);
    transform: translateY(50px);
    -webkit-transition: all 300ms ease-out;
    transition: all 300ms ease-out
}

.fade-input.show {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
}

a {
    color: #333;
    text-decoration: none;
    -webkit-transition: all 350ms ease;
    transition: all 350ms ease
}

a:hover,
a:focus,
a:active {
    outline: none
}

nav ul {
    list-style: none;
    margin: 0;
    padding-left: 0
}

.main-navigation {
    float: right;
    padding: 65px 0;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
    margin-right: 150px
}

@media only screen and (max-width: 1500px) {
    .main-navigation {
        margin-right: 150px
    }
}

.main-navigation>ul {
    position: relative
}

.main-navigation li {
    float: left;
    margin-left: 45px;
    position: relative
}

.main-navigation li:first-of-type {
    margin-left: 0
}

.main-navigation .nav-link-wrap {
    display: block;
    overflow: hidden;
    position: relative
}

.main-navigation .nav-link-wrap:after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: #333;
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translate(-102%, -50%);
    -ms-transform: translate(-102%, -50%);
    transform: translate(-102%, -50%);
    -webkit-transition: 300ms ease;
    transition: 300ms ease
}

@media only screen and (max-width: 1250px) {
    .main-navigation .nav-link-wrap:after {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

.main-navigation li:hover>.nav-link-wrap:after,
.main-navigation li.focus>.nav-link-wrap:after {
    -webkit-transform: translate(102%, -50%);
    -ms-transform: translate(102%, -50%);
    transform: translate(102%, -50%)
}

@media only screen and (max-width: 1250px) {
    .main-navigation li:hover>.nav-link-wrap:after,
    .main-navigation li.focus>.nav-link-wrap:after {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

.main-navigation li:hover>.nav-link-wrap a,
.main-navigation li.focus>.nav-link-wrap a {
    -webkit-transform: translateY(-27px);
    -ms-transform: translateY(-27px);
    transform: translateY(-27px)
}

@media only screen and (max-width: 1250px) {
    .main-navigation li:hover>.nav-link-wrap a,
    .main-navigation li.focus>.nav-link-wrap a {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

.main-navigation a {
    color: #333;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    display: block;
    text-decoration: none;
    position: relative;
    padding: 10px 0 8px;
    -webkit-transition: all 300ms ease-out 100ms;
    transition: all 300ms ease-out 100ms;
    -webkit-filter: blur(0px);
    filter: blur(0px)
}

.main-navigation a:after {
    content: attr(data-hover-text);
    display: block;
    position: absolute;
    top: 27px;
    left: 0;
    padding: 10px 0 12px;
    color: #06B3BA
}

@media only screen and (max-width: 1250px) {
    .main-navigation a:after {
        display: none
    }
}

@media only screen and (max-width: 1850px) {
    .main-navigation {
        margin-right: 180px
    }
}

@media only screen and (max-width: 1649px) {
    .main-navigation {
        margin-right: 150px
    }
    .main-navigation li {
        margin-left: 18px
    }
}

@media only screen and (max-width: 1550px) {
    .main-navigation li {
        margin-left: 18px
    }
}

@media only screen and (max-width: 1400px) {
    .main-navigation {
        padding-top: 35px;
        padding-bottom: 35px
    }
    .main-navigation li {
        margin-left: 18px
    }
}

.sticky-header .main-navigation {
    padding: 50px 0
}

@media only screen and (max-width: 1250px) {
    .sticky-header .main-navigation {
        padding: 30px 0
    }
}

.sub-menu-wrapper {
    height: 0;
    overflow: hidden;
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 1000px;
    text-align: center;
    -webkit-transition: 1ms ease 350ms;
    transition: 1ms ease 350ms
}

@media only screen and (max-width: 1250px) {
    .sub-menu-wrapper {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

.sub-menu-wrapper .sub-menu:before {
    content: '';
    display: block;
    width: 0;
    margin: 0 auto;
    height: 2px;
    background-color: #333;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 350ms ease;
    transition: 350ms ease
}

@media only screen and (max-width: 1250px) {
    .sub-menu-wrapper .sub-menu:before {
        display: none
    }
}

.sub-menu-wrapper ul {
    overflow: hidden
}

.sub-menu-wrapper li {
    float: none;
    display: inline-block;
    -webkit-transform: translateY(150%);
    -ms-transform: translateY(150%);
    transform: translateY(150%);
    -webkit-transition: 350ms ease;
    transition: 350ms ease
}

@media only screen and (max-width: 1250px) {
    .sub-menu-wrapper li {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

@media only screen and (min-width: 1271px) {
    li:hover .sub-menu-wrapper {
        height: auto;
        -webkit-transition: none;
        transition: none
    }
    li:hover .sub-menu-wrapper .sub-menu:before {
        width: 50px
    }
    li:hover .sub-menu-wrapper li {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
        -webkit-transition: 350ms ease 350ms;
        transition: 350ms ease 350ms;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden
    }
    .sticky-header .sub-menu-wrapper li {
        font-size: 13px;
        margin-left: 20px;
        -webkit-transform: translateY(200%);
        -ms-transform: translateY(200%);
        transform: translateY(200%)
    }
    .sticky-header li:hover .sub-menu-wrapper li {
        -webkit-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
        transform: translateY(-5px)
    }
}

@media only screen and (max-width: 1400px) {
    .main-navigation a {
        font-size: 14px
    }
    .sub-menu-wrapper {
        top: 50%
    }
}

@media only screen and (max-width: 1400px) and (max-width: 1366px) {
    .sub-menu-wrapper {
        top: 90%
    }
}

@media only screen and (max-width: 1400px) {
    .sub-menu-wrapper a {
        font-size: 12px
    }
}

@media only screen and (max-width: 1250px) {
    .nav-wrapper {
        margin: 0;
        text-align: center;
        position: fixed;
        top: 0;
        bottom: 0;
        right: -420px;
        height: 100%;
        background-color: #383838;
        width: 100%;
        max-width: 420px;
        overflow: auto;
        -webkit-transition: all 700ms cubic-bezier(0.88, -0.26, 0.13, 1.23);
        transition: all 700ms cubic-bezier(0.88, -0.26, 0.13, 1.23);
        z-index: 2000
    }
    .nav-wrapper.active {
        right: 0;
        overflow-y: scroll;
        cursor: pointer;
        -webkit-overflow-scrolling: touch
    }
    .nav-wrapper.active::after {
        right: 0
    }
    .main-navigation {
        float: none;
        padding: 0;
        margin: 170px 0 0;
        cursor: pointer
    }
    .main-navigation ul {
        position: static
    }
    .main-navigation li {
        float: none;
        margin: 0 0 5px;
        min-height: 40px
    }
    .main-navigation li:hover>.nav-link-wrap a,
    .main-navigation li.focus>.nav-link-wrap a {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
    .main-navigation a {
        display: block;
        color: #fff;
        font-size: 20px;
        font-weight: 400;
        line-height: 1;
        letter-spacing: 1px
    }
    .main-navigation a:after {
        content: '';
        display: block;
        width: 0;
        height: 1px;
        background-color: #fff;
        -webkit-transition: 350ms ease;
        transition: 350ms ease
    }
    .main-navigation a:hover:after {
        display: none
    }
    .main-navigation .nav-link-wrap {
        display: block;
        overflow: hidden;
        position: relative
    }
    .main-navigation .nav-link-wrap:after {
        content: none
    }
    .main-navigation .sub-menu-btn {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 30px;
        height: 40px;
        width: 50px;
        padding: 2px;
        line-height: 1;
        color: white;
        cursor: pointer;
        -webkit-transition: 350ms ease;
        transition: 350ms ease
    }
    .main-navigation .sub-menu-btn::before {
        font-size: 24px;
        -webkit-transition: 350ms ease;
        transition: 350ms ease
    }
    .sub-menu-wrapper {
        text-align: center;
        width: 100%;
        height: auto;
        left: auto;
        top: auto;
        position: relative;
        visibility: visible;
        -webkit-transition: none;
        transition: none;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        display: none
    }
    .sub-menu-wrapper .sub-menu ul {
        padding: 10px 0 30px
    }
    .sub-menu-wrapper .sub-menu li {
        margin-bottom: 0
    }
    .sub-menu-wrapper .sub-menu a {
        font-family: "Poppins", sans-serif;
        font-size: 16px;
        font-weight: 300
    }
    .sub-menu-wrapper li {
        display: block;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

@media only screen and (max-width: 600px) {
    .main-navigation {
        margin: 130px 0 0
    }
}

.sub-menu-btn {
    display: none
}

#scrollspy {
    /* top: 184px !important */
    top: 254px !important
}

.icon-circle-plus.open {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.nav-button-wrapper {
    position: fixed;
    right: 20px;
    top: 20px;
    width: 40px;
    z-index: 3000;
    padding: 0 0 35px;
    -webkit-transition: all 300ms ease 2ms;
    transition: all 300ms ease 2ms;
    display: none
}

@media only screen and (max-width: 1024px) {
    .nav-button-wrapper {
        top: 45px
    }
}

@media only screen and (max-width: 420px) {
    .nav-button-wrapper {
        top: 18px
    }
}

.nav-button {
    color: #333;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    padding: 20px;
    border: 2px solid #333;
    border-radius: 30px;
    display: block;
    position: relative;
    -webkit-transition: all 700ms cubic-bezier(0.75, 0.1, 0.25, 1);
    transition: all 700ms cubic-bezier(0.75, 0.1, 0.25, 1)
}

.nav-button .menu-btn {
    width: 15px;
    height: 10px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(50%, -50%);
    -ms-transform: translate(50%, -50%);
    transform: translate(50%, -50%);
    right: 50%;
    z-index: 100;
    pointer-events: none
}

.nav-button .menu-btn:after,
.nav-button .menu-btn:before,
.nav-button .menu-btn span {
    width: 100%;
    height: 2px;
    position: absolute;
    display: block;
    background-color: #333;
    -webkit-transition: background-color 700ms cubic-bezier(0.75, 0.1, 0.25, 1);
    transition: background-color 700ms cubic-bezier(0.75, 0.1, 0.25, 1)
}

.nav-button .menu-btn:after,
.nav-button .menu-btn:before {
    content: '';
    -webkit-transition: 0.3s width 0.4s ease-out, background-color 700ms cubic-bezier(0.75, 0.1, 0.25, 1);
    transition: 0.3s width 0.4s ease-out, background-color 700ms cubic-bezier(0.75, 0.1, 0.25, 1)
}

.nav-button .menu-btn:after {
    top: 0;
    left: 0
}

.nav-button .menu-btn:before {
    bottom: 0;
    right: 0
}

.nav-button .menu-btn span {
    top: 50%;
    margin-top: -1px;
    -webkit-transition: -webkit-transform 0.3s ease-out;
    transition: -webkit-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
    transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
    background-color: #fff
}

.nav-button .menu-btn span:before {
    content: '';
    background-color: #333;
    width: 100%;
    height: 2px;
    position: absolute;
    left: 0;
    -webkit-transition: background-color 700ms cubic-bezier(0.75, 0.1, 0.25, 1), -webkit-transform 0.3s ease-out;
    transition: background-color 700ms cubic-bezier(0.75, 0.1, 0.25, 1), -webkit-transform 0.3s ease-out;
    transition: transform 0.3s ease-out, background-color 700ms cubic-bezier(0.75, 0.1, 0.25, 1);
    transition: transform 0.3s ease-out, background-color 700ms cubic-bezier(0.75, 0.1, 0.25, 1), -webkit-transform 0.3s ease-out
}

.nav-button .menu-btn.open:after {
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    width: 0;
    left: 0
}

.nav-button .menu-btn.open:before {
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    width: 0;
    right: 0
}

.nav-button .menu-btn.open span {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: background-color 700ms cubic-bezier(0.75, 0.1, 0.25, 1), 0.3s -webkit-transform 0.4s ease-out;
    transition: background-color 700ms cubic-bezier(0.75, 0.1, 0.25, 1), 0.3s -webkit-transform 0.4s ease-out;
    transition: 0.3s transform 0.4s ease-out, background-color 700ms cubic-bezier(0.75, 0.1, 0.25, 1);
    transition: 0.3s transform 0.4s ease-out, background-color 700ms cubic-bezier(0.75, 0.1, 0.25, 1), 0.3s -webkit-transform 0.4s ease-out
}

.nav-button .menu-btn.open span:before {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transition: background-color 700ms cubic-bezier(0.75, 0.1, 0.25, 1), 0.3s -webkit-transform 0.4s ease-out;
    transition: background-color 700ms cubic-bezier(0.75, 0.1, 0.25, 1), 0.3s -webkit-transform 0.4s ease-out;
    transition: 0.3s transform 0.4s ease-out, background-color 700ms cubic-bezier(0.75, 0.1, 0.25, 1);
    transition: 0.3s transform 0.4s ease-out, background-color 700ms cubic-bezier(0.75, 0.1, 0.25, 1), 0.3s -webkit-transform 0.4s ease-out;
    background-color: #fff
}

.nav-button.active {
    color: #fff;
    border-color: #fff
}

@media only screen and (max-width: 1250px) {
    .nav-button-wrapper {
        display: block
    }
    .nav-button.active {
        background-color: #383838
    }
}

.slow-header .nav-button-wrapper {
    -webkit-transition: all 1500ms ease 2ms;
    transition: all 1500ms ease 2ms
}

.hide-header .nav-button-wrapper {
    -webkit-transform: translateY(-110%);
    -ms-transform: translateY(-110%);
    transform: translateY(-110%)
}

.sticky-header .nav-button-wrapper {
    top: 7px;
    padding: 31px 0;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease
}

@media only screen and (max-width: 1250px) {
    .sticky-header .nav-button-wrapper {
        top: 0
    }
}

@media only screen and (max-width: 1250px) {
    .sticky-header .nav-button-wrapper {
        padding: 20px 0
    }
}

@media only screen and (max-width: 1024px) {
    .sticky-header .nav-button-wrapper {
        top: 18px
    }
}

@media only screen and (max-width: 600px) {
    .sticky-header .nav-button-wrapper {
        top: -1px
    }
}

@media only screen and (max-width: 767px) {
    .scroll-btn {
        z-index: 99;
        margin-top: 145px !important;
        left: -23.2px !important
    }
}

@media only screen and (max-width: 560px) {
    .scroll-btn {
        bottom: -20px
    }
}

.none {
    display: none !important
}

.newsletter-section {
    background-color: #06B3BA;
    padding: 75px 0;
    text-align: center;
    position: relative;
    z-index: 40
}

.newsletter-section #mce-EMAIL {
    display: inline-block;
    width: 100%;
    max-width: 610px;
    margin-bottom: 40px;
    outline: none;
    background-color: transparent;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid #333;
    color: #333;
    text-align: center;
    font-size: 18px;
    padding: 14px;
    line-height: 1.5
}

.newsletter-section .popart-btn {
    padding: 0;
    display: block;
    margin: 0 auto;
    cursor: pointer
}

.newsletter-section .popart-btn input {
    padding: 19px 0 17px;
    background-color: transparent;
    outline: none;
    border: none;
    width: 100%;
    display: block
}

.newsletter-section .newsletter-fake-submit {
    padding: 19px 0 17px;
    text-transform: none;
    font-size: 16px;
    font-weight: 600;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease
}

.newsletter-section .newsletter-fake-submit:hover,
.newsletter-section .newsletter-fake-submit:focus {
    color: #333
}

.newsletter-section #mc_embed_signup div.mce_inline_error,
.newsletter-section #mce-success-response,
.newsletter-section #mce-error-response {
    margin: 0;
    padding: 0;
    background-color: transparent;
    font-weight: 400;
    z-index: 1;
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

@media only screen and (max-width: 1250px) {
    .newsletter-section {
        padding: 40px 0
    }
    .newsletter-section #mce-EMAIL {
        margin-bottom: 30px
    }
    .newsletter-section .popart-btn input {
        padding: 15px 0 13px
    }
}

.newsletter-message {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.65);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: 0.35s linear 0.15s;
    transition: 0.35s linear 0.15s
}

.newsletter-card {
    position: relative;
    max-width: 280px;
    padding: 40px 40px 80px;
    background-color: #06B3BA;
    border-radius: 8px;
    text-align: center;
    color: #fff;
    box-shadow: 3px 3px 9px 0 rgba(0, 0, 0, 0.3)
}

.newsletter-card-image {
    max-height: 120px
}

.newsletter-card-image path {
    fill: #fff
}

.newsletter-card-title {
    margin-top: 10px;
    margin-bottom: 20px;
    font-family: "Poppins", sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px
}

.newsletter-card-description {
    font-size: 18px;
    line-height: 1.37
}

.newsletter-card-close-button {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 0;
    background-color: #fff;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    color: #333;
    cursor: pointer;
    overflow: hidden
}

.newsletter-card-close-button>span {
    -webkit-transition: all 0.3s;
    transition: all 0.3s
}

.newsletter-card-close-button::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: 10px;
    opacity: 0;
    -webkit-transform: translate(-30%, 0);
    -ms-transform: translate(-30%, 0);
    transform: translate(-30%, 0);
    -webkit-transition: all 0.3s;
    transition: all 0.3s
}

.newsletter-card-close-button:hover>span,
.newsletter-card-close-button:focus>span {
    opacity: 0;
    -webkit-transform: translate(0, 40px);
    -ms-transform: translate(0, 40px);
    transform: translate(0, 40px)
}

.newsletter-card-close-button:hover::after,
.newsletter-card-close-button:focus::after {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    background-color: rgba(0, 0, 0, 0.03)
}

.newsletter-norobot-title {
    font-size: 32px;
    line-height: 1
}

.newsltter-norobot-id {
    margin-bottom: 30px;
    margin-top: 30px;
    font-family: "Playfair Display", serif;
    font-size: 28px;
    font-weight: 700;
    color: #333
}

.no-robot-input {
    width: 100%;
    padding: 0 10px;
    border: 2px solid #333;
    border-radius: 30px;
    font-family: "Playfair Display", serif;
    font-size: 24px;
    text-align: center;
    color: #333;
    outline: none
}

.newsletter-norobot-button {
    display: block;
    position: absolute;
    bottom: 0;
    width: 50%;
    padding: 10px 0;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    overflow: hidden
}

.newsletter-norobot-button::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: 10px;
    opacity: 0;
    -webkit-transform: translate(-30%, 0);
    -ms-transform: translate(-30%, 0);
    transform: translate(-30%, 0);
    -webkit-transition: all 0.3s;
    transition: all 0.3s
}

.newsletter-norobot-button:hover>span,
.newsletter-norobot-button:focus>span {
    opacity: 0;
    -webkit-transform: translate(0, 40px);
    -ms-transform: translate(0, 40px);
    transform: translate(0, 40px)
}

.newsletter-norobot-button:hover::after,
.newsletter-norobot-button:focus::after {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    background-color: rgba(0, 0, 0, 0.03)
}

.newsletter-norobot-check-button {
    left: 0;
    border-bottom-left-radius: 8px
}

.newsletter-norobot-close-button {
    right: 0;
    border-bottom-right-radius: 8px
}

.norobot-notification {
    display: none;
    font-size: 14px;
    color: #ff3b30
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition: background-color 5000s ease-in-out 0s;
    transition: background-color 5000s ease-in-out 0s
}

.portfolio-section,
.showcase-section {
    position: relative;
    z-index: 10;
    margin-top: 100px;
    margin-bottom: 50px
}

.portfolio-section .singe-portfolio,
.portfolio-section .showcase,
.showcase-section .singe-portfolio,
.showcase-section .showcase {
    float: left;
    overflow: hidden;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.portfolio-section .singe-portfolio:first-child,
.portfolio-section .showcase:first-child,
.showcase-section .singe-portfolio:first-child,
.showcase-section .showcase:first-child {
    max-width: 378px;
    width: -webkit-calc(25% - 5px);
    width: calc(25% - 5px);
    margin: 175px 5px 0 0
}

.portfolio-section .singe-portfolio:nth-child(2),
.portfolio-section .showcase:nth-child(2),
.showcase-section .singe-portfolio:nth-child(2),
.showcase-section .showcase:nth-child(2) {
    max-width: 648px;
    width: -webkit-calc(46% - 10px);
    width: calc(46% - 10px);
    margin: 0 5px
}

.portfolio-section .singe-portfolio:nth-child(3),
.portfolio-section .showcase:nth-child(3),
.showcase-section .singe-portfolio:nth-child(3),
.showcase-section .showcase:nth-child(3) {
    max-width: 401px;
    width: -webkit-calc(27% - 5px);
    width: calc(27% - 5px);
    max-height: 331px;
    height: 100%;
    margin-left: 5px;
    margin-top: 90px
}

.portfolio-section .singe-portfolio:nth-child(4),
.portfolio-section .showcase:nth-child(4),
.showcase-section .singe-portfolio:nth-child(4),
.showcase-section .showcase:nth-child(4) {
    max-width: 438px;
    width: -webkit-calc(31% - 10px);
    width: calc(31% - 10px);
    margin: 10px 5px 0 5px
}

.portfolio-section .singe-portfolio:last-child,
.portfolio-section .showcase:last-child,
.showcase-section .singe-portfolio:last-child,
.showcase-section .showcase:last-child {
    max-width: 650px;
    width: -webkit-calc(44% - 5px);
    width: calc(44% - 5px);
    margin: 10px 0 0 5px
}

.portfolio-section .singe-portfolio:before,
.portfolio-section .singe-portfolio:after,
.portfolio-section .showcase:before,
.portfolio-section .showcase:after,
.showcase-section .singe-portfolio:before,
.showcase-section .singe-portfolio:after,
.showcase-section .showcase:before,
.showcase-section .showcase:after {
    content: '';
    display: block;
    position: absolute;
    height: 0;
    z-index: 10
}

.portfolio-section .singe-portfolio:before,
.portfolio-section .showcase:before,
.showcase-section .singe-portfolio:before,
.showcase-section .showcase:before {
    right: 10px;
    top: 10px;
    width: 0;
    border-top: 2px solid transparent;
    border-left: 2px solid transparent
}

.portfolio-section .singe-portfolio:after,
.portfolio-section .showcase:after,
.showcase-section .singe-portfolio:after,
.showcase-section .showcase:after {
    left: 10px;
    bottom: 10px;
    width: 0;
    border-right: 2px solid transparent;
    border-bottom: 2px solid transparent
}

.portfolio-section .singe-portfolio:hover:before,
.portfolio-section .singe-portfolio:hover:after,
.portfolio-section .showcase:hover:before,
.portfolio-section .showcase:hover:after,
.showcase-section .singe-portfolio:hover:before,
.showcase-section .singe-portfolio:hover:after,
.showcase-section .showcase:hover:before,
.showcase-section .showcase:hover:after {
    width: -webkit-calc(100% - 20px);
    width: calc(100% - 20px);
    height: -webkit-calc(100% - 20px);
    height: calc(100% - 20px)
}

.portfolio-section .singe-portfolio:hover:after,
.portfolio-section .showcase:hover:after,
.showcase-section .singe-portfolio:hover:after,
.showcase-section .showcase:hover:after {
    border-bottom-color: #06B3BA;
    border-right-color: #06B3BA;
    -webkit-transition: transform 0.25s ease-out, width 0.25s ease-out, height 0.25s ease-out 0.25s;
    -webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s, -webkit-transform 0.25s ease-out;
    transition: width 0.25s ease-out, height 0.25s ease-out 0.25s, -webkit-transform 0.25s ease-out;
    transition: transform 0.25s ease-out, width 0.25s ease-out, height 0.25s ease-out 0.25s;
    transition: transform 0.25s ease-out, width 0.25s ease-out, height 0.25s ease-out 0.25s, -webkit-transform 0.25s ease-out
}

.portfolio-section .singe-portfolio:hover:before,
.portfolio-section .showcase:hover:before,
.showcase-section .singe-portfolio:hover:before,
.showcase-section .showcase:hover:before {
    border-top-color: #06B3BA;
    border-left-color: #06B3BA;
    -webkit-transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.7s;
    transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.7s
}

.portfolio-section .singe-portfolio figure,
.portfolio-section .showcase figure,
.showcase-section .singe-portfolio figure,
.showcase-section .showcase figure {
    margin: 0
}

.portfolio-section img,
.showcase-section img {
    display: block;
    margin: 0 auto;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    max-width: initial;
    -webkit-transition: -webkit-transform 1.5s cubic-bezier(0.19, 1, 0.22, 1);
    transition: -webkit-transform 1.5s cubic-bezier(0.19, 1, 0.22, 1);
    transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1);
    transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 1.5s cubic-bezier(0.19, 1, 0.22, 1);
    width: 100%
}

.portfolio-section .portfolio-img,
.portfolio-section .showcase-img,
.showcase-section .portfolio-img,
.showcase-section .showcase-img {
    -webkit-transition: -webkit-transform 10s cubic-bezier(0.19, 1, 0.22, 1);
    transition: -webkit-transform 10s cubic-bezier(0.19, 1, 0.22, 1);
    transition: transform 10s cubic-bezier(0.19, 1, 0.22, 1);
    transition: transform 10s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 10s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    z-index: 0
}

.portfolio-section .singe-portfolio:hover .portfolio-img,
.portfolio-section .showcase:hover .showcase-img,
.showcase-section .singe-portfolio:hover .portfolio-img,
.showcase-section .showcase:hover .showcase-img {
    -webkit-transform: scale(1.15, 1.15);
    -ms-transform: scale(1.15, 1.15);
    transform: scale(1.15, 1.15)
}

.portfolio-section .portfolio-img-trigger,
.portfolio-section .showcase-img-trigger,
.showcase-section .portfolio-img-trigger,
.showcase-section .showcase-img-trigger {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 11;
    cursor: pointer
}

@media only screen and (max-width: 767px) {
    .portfolio-section .portfolio-img-trigger,
    .portfolio-section .showcase-img-trigger,
    .showcase-section .portfolio-img-trigger,
    .showcase-section .showcase-img-trigger {
        pointer-events: none
    }
}

.portfolio-section .popart-btn,
.showcase-section .popart-btn {
    display: block;
    margin: 100px auto 0
}

@media only screen and (max-width: 1650px) {
    .portfolio-section .singe-portfolio:first-child,
    .portfolio-section .showcase:first-child,
    .showcase-section .singe-portfolio:first-child,
    .showcase-section .showcase:first-child {
        margin-top: 135px
    }
    .portfolio-section .singe-portfolio:nth-child(3),
    .portfolio-section .showcase:nth-child(3),
    .showcase-section .singe-portfolio:nth-child(3),
    .showcase-section .showcase:nth-child(3) {
        margin-top: 68px
    }
}

@media only screen and (max-width: 1023px) {
    .portfolio-section,
    .showcase-section {
        margin-top: 70px
    }
    .portfolio-section .singe-portfolio:first-child,
    .portfolio-section .showcase:first-child,
    .showcase-section .singe-portfolio:first-child,
    .showcase-section .showcase:first-child {
        margin-top: 85px
    }
    .portfolio-section .singe-portfolio:nth-child(3),
    .portfolio-section .showcase:nth-child(3),
    .showcase-section .singe-portfolio:nth-child(3),
    .showcase-section .showcase:nth-child(3) {
        margin-top: 43px
    }
}

@media only screen and (max-width: 767px) {
    .portfolio-section .singe-portfolio,
    .portfolio-section .showcase,
    .showcase-section .singe-portfolio,
    .showcase-section .showcase {
        float: none;
        margin: 0 auto 15px !important;
        width: 100% !important;
        max-width: 400px
    }
    .portfolio-section .singe-portfolio img,
    .portfolio-section .showcase img,
    .showcase-section .singe-portfolio img,
    .showcase-section .showcase img {
        margin: 0
    }
}

.showcase-fullimage-wrapper {
    display: none;
    opacity: 0;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(250, 204, 22, 0.56);
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.56) 40%, #06B3BA 100%);
    background: radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.56) 40%, #06B3BA 100%);
    z-index: 10101;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease
}

.showcase-fullimage {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 80vw;
    height: 80vh
}

.showcase-fullimage-image {
    display: block;
    opacity: 0;
    max-height: 80vh;
    margin: 0 auto;
    box-shadow: 0 0 5px 0 rgba(33, 33, 33, 0.5);
    -webkit-transform: scale(5);
    -ms-transform: scale(5);
    transform: scale(5);
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease
}

.open-slider {
    opacity: 1
}

.close-btn {
    position: absolute;
    right: 50px;
    top: 50px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    padding-top: 5px;
    border-radius: 50%;
    background-color: #333;
    font-size: 70px;
    font-weight: 100;
    line-height: 1;
    cursor: pointer;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    -webkit-transition: 0.4s ease;
    transition: 0.4s ease
}

.close-btn:hover,
.close-btn:focus {
    background-color: #06B3BA
}

.close-btn:hover::before,
.close-btn:focus::before {
    color: #333
}

@media only screen and (max-width: 1649px) {
    .close-btn {
        width: 50px;
        height: 50px
    }
}

@media only screen and (max-width: 767px) {
    .close-btn {
        top: 20px;
        right: 20px
    }
}

.btn-dark {
    background-color: #333;
    color: #fff
}

.slider-arrow {
    position: absolute;
    top: 50%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #333;
    font-weight: 100;
    cursor: pointer;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    -webkit-transition: 0.4s ease;
    transition: 0.4s ease
}

.slider-arrow:hover,
.slider-arrow:focus {
    background-color: #06B3BA
}

.slider-arrow:hover::before,
.slider-arrow:focus::before {
    color: #333
}

.slider-arrow::before {
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    font-size: 7px;
    padding: 0
}

@media only screen and (max-width: 1649px) {
    .slider-arrow {
        width: 50px;
        height: 50px
    }
    .slider-arrow::before {
        font-size: 4px
    }
}

@media only screen and (max-width: 1250px) {
    .slider-arrow {
        top: auto;
        bottom: 0
    }
}

.prev-arrow {
    left: 50px;
    right: auto
}

.prev-arrow::before {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

@media only screen and (max-width: 767px) {
    .prev-arrow {
        left: 20px
    }
}

.next-arrow {
    left: auto;
    right: 50px
}

@media only screen and (max-width: 767px) {
    .next-arrow {
        right: 20px
    }
}

.close-showcase-galllery-btn {
    padding: 0;
    font-size: 40px
}

@media only screen and (max-width: 1650px) {
    .close-showcase-galllery-btn {
        font-size: 25px
    }
}

.site-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 99999999999999
}

.site-preloader svg {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%) scale(1);
    -ms-transform: translateY(-50%) translateX(-50%) scale(1);
    transform: translateY(-50%) translateX(-50%) scale(1);
    width: 30px;
    height: 30px;
    padding: 2px;
    opacity: 1;
    -webkit-transition: opacity .5s, -webkit-transform .5s;
    transition: opacity .5s, -webkit-transform .5s;
    transition: transform .5s, opacity .5s;
    transition: transform .5s, opacity .5s, -webkit-transform .5s
}

.site-preloader svg path {
    fill: #fff;
    stroke: #06B3BA;
    stroke-width: 1px;
    stroke-dasharray: 0 602;
    -webkit-transition: 1s;
    transition: 1s
}

.site-preloader.active svg path {
    stroke-dasharray: 602 602
}

.site-preloader.flyout svg {
    -webkit-transform: translateY(-50%) translateX(-50%) scale(50);
    -ms-transform: translateY(-50%) translateX(-50%) scale(50);
    transform: translateY(-50%) translateX(-50%) scale(50);
    opacity: 0
}

.order-project {
    text-align: center
}

.order-project .popart-btn {
    display: block;
    margin: 70px auto 0
}

#sidebar {
    background-color: #333;
    position: absolute;
    padding: 5px;
    padding-top: 96px;
    top: -28px;
    left: 0;
    height: 100%;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: padding-top .5s, -webkit-transform .5s;
    transition: padding-top .5s, -webkit-transform .5s;
    transition: transform .5s, padding-top .5s;
    transition: transform .5s, padding-top .5s, -webkit-transform .5s;
    z-index: 999
}

#sidebar h3 {
    position: relative;
    font-size: 22px;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    color: #fff;
    -webkit-transform: translateX(-50px);
    -ms-transform: translateX(-50px);
    transform: translateX(-50px);
    opacity: 0;
    -webkit-transition: opacity .25s, -webkit-transform .25s;
    transition: opacity .25s, -webkit-transform .25s;
    transition: transform .25s, opacity .25s;
    transition: transform .25s, opacity .25s, -webkit-transform .25s;
    -webkit-transition-delay: .05s;
    transition-delay: .05s
}

#sidebar h4 {
    position: relative;
    font-size: 19px;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    color: #fff;
    -webkit-transform: translateX(-50px);
    -ms-transform: translateX(-50px);
    transform: translateX(-50px);
    opacity: 0;
    -webkit-transition: opacity .25s, -webkit-transform .25s;
    transition: opacity .25s, -webkit-transform .25s;
    transition: transform .25s, opacity .25s;
    transition: transform .25s, opacity .25s, -webkit-transform .25s
}

#sidebar ul {
    margin: 0 0 25px;
    padding: 0;
    list-style: none
}

#sidebar li {
    position: relative;
    margin: 8px 0;
    line-height: 1.4em;
    -webkit-transform: translateX(-50px);
    -ms-transform: translateX(-50px);
    transform: translateX(-50px);
    opacity: 0;
    -webkit-transition: opacity .25s, -webkit-transform .25s;
    transition: opacity .25s, -webkit-transform .25s;
    transition: transform .25s, opacity .25s;
    transition: transform .25s, opacity .25s, -webkit-transform .25s
}

#sidebar li a {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    -webkit-transition: 0.35s ease;
    transition: 0.35s ease;
    display: inline-block
}

#sidebar li a:after {
    content: '';
    height: 2px;
    width: 0;
    -webkit-transition: 0.35s 0.2s ease;
    transition: 0.35s 0.2s ease;
    background-color: #06B3BA;
    display: block;
    margin-top: -12px;
    margin-left: -10px
}

#sidebar li a:hover {
    color: #fff;
    -webkit-transform: translateX(7px);
    -ms-transform: translateX(7px);
    transform: translateX(7px)
}

#sidebar li a:hover:after {
    width: 102%
}

#sidebar.fixed-bar {
    -webkit-transition: none !important;
    transition: none !important;
    position: -webkit-sticky;
    position: sticky;
    top: 45px;
    left: 0
}

#sidebar.fixed-bar ul {
    margin: 0 0 25px;
    padding: 0;
    list-style: none
}

#sidebar.fixed-bar li {
    position: relative;
    margin: 8px 0;
    padding: 0;
    line-height: 1.4em;
    -webkit-transform: translateX(-50px);
    -ms-transform: translateX(-50px);
    transform: translateX(-50px);
    opacity: 0;
    -webkit-transition: opacity .25s, -webkit-transform .25s;
    transition: opacity .25s, -webkit-transform .25s;
    transition: transform .25s, opacity .25s;
    transition: transform .25s, opacity .25s, -webkit-transform .25s
}

#sidebar.fixed-bar li::before {
    display: none !important
}

#sidebar.fixed-bar li a {
    font-size: 14px;
    font-weight: 500;
    color: #666;
    -webkit-transition: 0.35s ease;
    transition: 0.35s ease;
    display: inline-block
}

#sidebar.fixed-bar li a:after {
    content: '';
    height: 2px;
    width: 0;
    -webkit-transition: 0.35s 0.2s ease;
    transition: 0.35s 0.2s ease;
    background-color: #06B3BA;
    display: block;
    margin-top: -12px;
    margin-left: -10px
}

#sidebar.fixed-bar li a:hover {
    color: #fff;
    -webkit-transform: translateX(7px);
    -ms-transform: translateX(7px);
    transform: translateX(7px)
}

#sidebar.fixed-bar li a:hover:after {
    width: 102%
}

#sidebar .popart-btn {
    background-color: #06B3BA;
    border-color: #06B3BA;
    width: 100%
}

#sidebar .popart-btn:hover {
    color: #333
}

#sidebar .nav-social {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 50px
}

#sidebar .nav-social a {
    width: 40px;
    height: 40px;
    background-color: #fff;
    color: #333;
    font-size: 20px;
    border-radius: 50%;
    margin-right: 5px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 0;
    -webkit-transition: opacity .25s, color .5s, background-color .5s, -webkit-transform .25s;
    transition: opacity .25s, color .5s, background-color .5s, -webkit-transform .25s;
    transition: transform .25s, opacity .25s, color .5s, background-color .5s;
    transition: transform .25s, opacity .25s, color .5s, background-color .5s, -webkit-transform .25s
}

#sidebar .nav-social a span {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

#sidebar .nav-social a:hover {
    background-color: #06B3BA;
    color: #333
}

@media only screen and (max-width: 1650px) {
    #sidebar .nav-social {
        margin-bottom: 30px
    }
    #sidebar .nav-social a {
        width: 38px;
        height: 38px;
        font-size: 17px
    }
}

@media only screen and (max-width: 1360px) {
    #sidebar .nav-social {
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center
    }
}

#sidebar #side-nav {
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95)
}

#sidebar.show {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0)
}

#sidebar.show .fixed-nav {
    position: -webkit-sticky;
    position: sticky;
    top: 45px;
    -webkit-transition: 350ms ease;
    transition: 350ms ease
}

#sidebar.show .visible-header {
    top: 150px
}

#sidebar.show h3,
#sidebar.show h4,
#sidebar.show li {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    opacity: 1
}

#sidebar.show .nav-social a {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1
}

#sidebar.show .nav-social.no-delay a {
    -webkit-transition-delay: 0s !important;
    transition-delay: 0s !important
}

#sidebar.show-white {
    background-color: #fff
}

#sidebar.show-darkgray {
    background-color: #333
}

#sidebar .active-sidebar-item a {
    color: #fff;
    -webkit-transform: translateX(7px);
    -ms-transform: translateX(7px);
    transform: translateX(7px)
}

#sidebar .active-sidebar-item a:after {
    width: 102%
}

@media only screen and (max-width: 1280px) {
    #sidebar {
        position: relative;
        text-align: center;
        width: 100%
    }
}

@media only screen and (max-width: 1280px) {
    #sidebar {
        padding-top: 5px
    }
}

.hide-header #sidebar {
    padding-top: 5px
}

@media only screen and (max-width: 767px) {
    .showcase-img {
        pointer-events: none !important
    }
}

.page-banner.home-banner .banner-caption span.bigletter {
    left: 0;
    top: -155px;
    margin-bottom: 0;
    position: absolute
}

@media only screen and (max-width: 1500px) {
    .page-banner.home-banner .banner-caption span.bigletter {
        left: 0;
        top: -74px
    }
}

@media only screen and (max-width: 1250px) {
    .page-banner.home-banner .banner-caption span.bigletter {
        left: 0;
        top: -90px
    }
}

@media only screen and (max-width: 600px) {
    .page-banner.home-banner .banner-caption span.bigletter {
        left: -8px;
        top: -69px
    }
}

@-webkit-keyframes sonar-effect-sspy {
    0% {
        opacity: 0.3
    }
    40% {
        opacity: 0.8;
        box-shadow: 0 0 0 2px rgba(250, 204, 22, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(250, 204, 22, 0.5)
    }
    100% {
        box-shadow: 0 0 0 2px rgba(250, 204, 22, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(250, 204, 22, 0.5);
        -webkit-transform: translateY(-50%) scale(1.5);
        transform: translateY(-50%) scale(1.5);
        opacity: 0
    }
}

@keyframes sonar-effect-sspy {
    0% {
        opacity: 0.3
    }
    40% {
        opacity: 0.8;
        box-shadow: 0 0 0 2px rgba(250, 204, 22, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(250, 204, 22, 0.5)
    }
    100% {
        box-shadow: 0 0 0 2px rgba(250, 204, 22, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(250, 204, 22, 0.5);
        -webkit-transform: translateY(-50%) scale(1.5);
        transform: translateY(-50%) scale(1.5);
        opacity: 0
    }
}

.ss-nav {
    position: fixed;
    top: 50%;
    left: 40px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 9999;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
    -webkit-transition: left .5s, opacity .5s;
    transition: left .5s, opacity .5s
}

.ss-nav::before,
.ss-nav::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    border: 2px solid #06B3BA;
    background: #fff;
    left: 0;
    border-radius: 100%;
    z-index: 2;
    -webkit-transition: background .5s, -webkit-transform .5s;
    transition: background .5s, -webkit-transform .5s;
    transition: background .5s, transform .5s;
    transition: background .5s, transform .5s, -webkit-transform .5s
}

.ss-nav::before {
    top: 0;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0);
    -ms-transform: translateX(-50%) translateY(-50%) scale(0);
    transform: translateX(-50%) translateY(-50%) scale(0);
    -webkit-transition-delay: .3s;
    transition-delay: .3s
}

.ss-nav::after {
    bottom: 0;
    -webkit-transform: translateX(-50%) translateY(50%) scale(0);
    -ms-transform: translateX(-50%) translateY(50%) scale(0);
    transform: translateX(-50%) translateY(50%) scale(0);
    -webkit-transition-delay: .5s;
    transition-delay: .5s
}

.ss-nav.init-pos::before {
    background: #06B3BA
}

.ss-nav.last-item::after {
    background: #06B3BA
}

.ss-nav.hidden-nav {
    left: -40px;
    opacity: 0 !important;
    pointer-events: none
}

.ss-nav .nav-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 0;
    border-right: 1px dashed #06B3BA;
    z-index: 1;
    -webkit-transition: height .5s;
    transition: height .5s
}

.ss-nav ul {
    position: absolute;
    left: -15px;
    top: 0;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around
}

.ss-nav ul li {
    position: relative;
    z-index: 99;
    display: block;
    opacity: 0;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: opacity .5s, -webkit-transform .5s;
    transition: opacity .5s, -webkit-transform .5s;
    transition: transform .5s, opacity .5s;
    transition: transform .5s, opacity .5s, -webkit-transform .5s
}

.ss-nav ul li::before {
    content: '';
    position: absolute;
    display: block;
    top: 11px;
    left: 11px;
    width: 10px;
    height: 10px;
    background: #fff;
    border: 2px solid #06B3BA;
    opacity: 0;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: background .5s, opacity .5s, -webkit-transform .5s;
    transition: background .5s, opacity .5s, -webkit-transform .5s;
    transition: background .5s, transform .5s, opacity .5s;
    transition: background .5s, transform .5s, opacity .5s, -webkit-transform .5s
}

.ss-nav ul li a {
    display: block;
    line-height: 1.1;
    text-transform: uppercase;
    position: relative;
    top: -3px;
    padding-left: 40px;
    -webkit-transition: padding-left .5s;
    transition: padding-left .5s
}

@media only screen and (max-width: 1366px) {
    .ss-nav ul li a {
        padding-left: 30px
    }
}

.ss-nav ul li a span {
    font-size: 50px;
    position: absolute;
    top: 50%;
    left: 0;
    line-height: 1;
    -webkit-transform: translateY(-69%) scaleY(1.2);
    -ms-transform: translateY(-69%) scaleY(1.2);
    transform: translateY(-69%) scaleY(1.2);
    font-family: "Playfair Display", serif;
    color: #f1f1f1;
    z-index: -1
}

.ss-nav ul li a:hover {
    padding-left: 48px
}

@media only screen and (max-width: 1366px) {
    .ss-nav ul li a:hover {
        padding-left: 40px
    }
}

.ss-nav ul li.active::before {
    background: #06B3BA
}

.ss-nav .nav li:nth-child(1),
.ss-nav .nav li::before {
    -webkit-transition-delay: .15s;
    transition-delay: .15s
}

.ss-nav .nav li:nth-child(2),
.ss-nav .nav li::before {
    -webkit-transition-delay: .3s;
    transition-delay: .3s
}

.ss-nav .nav li:nth-child(3),
.ss-nav .nav li::before {
    -webkit-transition-delay: .45s;
    transition-delay: .45s
}

.ss-nav .nav li:nth-child(4),
.ss-nav .nav li::before {
    -webkit-transition-delay: .6s;
    transition-delay: .6s
}

.ss-nav .nav li:nth-child(5),
.ss-nav .nav li::before {
    -webkit-transition-delay: .75s;
    transition-delay: .75s
}

.ss-nav.page-loaded::before {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
    -ms-transform: translateX(-50%) translateY(-50%) scale(1);
    transform: translateX(-50%) translateY(-50%) scale(1)
}

.ss-nav.page-loaded::after {
    -webkit-transform: translateX(-50%) translateY(50%) scale(1);
    -ms-transform: translateX(-50%) translateY(50%) scale(1);
    transform: translateX(-50%) translateY(50%) scale(1)
}

.ss-nav.page-loaded .nav-border {
    height: 100%
}

.ss-nav.page-loaded ul li {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0)
}

.ss-nav.page-loaded ul li::before {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.ss-nav.no-delay .nav li,
.ss-nav.no-delay .nav li::before {
    -webkit-transition-delay: 0s !important;
    transition-delay: 0s !important
}

.ss-nav #spy-top {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 20px;
    height: 20px;
    z-index: 99
}

.ss-nav #spy-bottom {
    position: absolute;
    bottom: -10px;
    left: -10px;
    width: 20px;
    height: 20px;
    z-index: 99
}

@media only screen and (max-width: 1250px) {
    .ss-nav {
        display: none
    }
}

.home-slider {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    padding-top: 0
}

.home-slider .home-slides-wrapper {
    width: 400%;
    height: 100%
}

.home-slider .home-slide {
    position: relative;
    width: 25%;
    float: left
}

.home-slider .home-slide li {
    padding-left: 0;
    margin-bottom: 100px;
    float: left;
    vertical-align: middle;
    width: 25%;
    height: 70px;
    position: relative;
    overflow: hidden
}

.home-slider .home-slide li:before {
    content: none
}

.home-slider .home-slide li:nth-child(n+5) {
    margin-bottom: 0
}

.home-slider .home-slide li:first-child {
    margin-top: 0
}

.home-slider .home-slide li img {
    display: block;
    position: absolute;
    left: 20px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.home-slider .home-slide #clientslogo li img:first-child {
    top: 50%;
    -webkit-transition: top 350ms ease-out 350ms;
    transition: top 350ms ease-out 350ms
}

.home-slider .home-slide #clientslogo li img:last-child {
    top: 150%;
    -webkit-transition: top 350ms ease-out;
    transition: top 350ms ease-out
}

.home-slider .home-slide #clientslogo li img.switch:first-child {
    top: 150%;
    -webkit-transition: top 350ms ease-out;
    transition: top 350ms ease-out
}

.home-slider .home-slide #clientslogo li img.switch:last-child {
    top: 50%;
    -webkit-transition: top 350ms ease-out 350ms;
    transition: top 350ms ease-out 350ms
}

.home-slider .home-slide #clientslogo li.active {
    margin-bottom: 10px;
    height: 180px;
    -webkit-transition: all 350ms ease;
    transition: all 350ms ease
}

.home-slider .home-slide #clientslogo li.active img:first-child,
.home-slider .home-slide #clientslogo li.active img:last-child {
    top: 20%;
    -webkit-transition: all 350ms ease;
    transition: all 350ms ease
}

.home-slider .home-slide #clientslogo li.active img:last-child {
    top: 70%
}

.home-slider .hs-about .section-image {
    position: absolute;
    right: 50px;
    top: 60px
}

.home-slider .hs-about .section-image img {
    width: 750px
}

.home-slider .hs-about .section-image.hide-alt:after {
    -webkit-transition: none;
    transition: none;
    -webkit-transform: translateX(-101%);
    -ms-transform: translateX(-101%);
    transform: translateX(-101%)
}

.home-slider .hs-about .section-image.show:before {
    opacity: .5;
    -webkit-transition: opacity 1ms ease 600ms;
    transition: opacity 1ms ease 600ms
}

.home-slider .hs-about .section-content {
    width: 75%;
    position: relative
}

.home-slider .hs-about h2.section-title {
    margin-bottom: 50px
}

.home-slider .hs-about p.section-subtitle {
    margin-bottom: 45px
}

.home-slider .hs-about .draggable-btn {
    margin-top: 60px;
    margin-left: -webkit-calc(25% - 3px);
    margin-left: calc(25% - 3px);
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%)
}

.home-slider .hs-clients>.container {
    position: relative
}

.home-slider .hs-clients h2.section-title {
    margin-bottom: 120px;
    margin-left: 25%
}

.home-slider .hs-clients .draggable-btn {
    position: absolute;
    bottom: 30px;
    right: 15px;
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%)
}

.home-slider .hs-awards h2.section-title {
    margin-bottom: 100px;
    text-align: center
}

.home-slider .hs-awards li {
    margin-bottom: 30px
}

.home-slider .hs-awards .draggable-btn {
    margin: 20px auto 0
}

.home-slider .hs-testimonials h2.section-title {
    margin-bottom: 100px;
    text-align: center
}

.home-slider .hs-testimonials .testimonials-statistics {
    width: 25%;
    float: left;
    margin-top: -15px
}

.home-slider .hs-testimonials .testimonials-statistics span {
    display: block
}

.home-slider .hs-testimonials .testimonials-statistics span span:first-child {
    font-size: 130px;
    font-family: "Playfair Display", serif;
    font-weight: 700;
    color: #06B3BA;
    line-height: 1
}

.home-slider .hs-testimonials .testimonials-statistics span span:last-child {
    margin-top: 30px;
    color: #333;
    text-transform: uppercase
}

.home-slider .hs-testimonials .testimonials-wrapper {
    width: 50%;
    margin-left: 25%;
    padding-left: 40px;
    float: left
}

.home-slider .hs-testimonials .testimonials-wrapper .single-testimonial {
    margin-bottom: 30px
}

.home-slider .hs-testimonials .testimonials-wrapper span {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 700;
    color: #333
}

@media only screen and (max-width: 1649px) {
    .home-slider .hs-about .section-content {
        width: 90%
    }
    .home-slider .hs-about .section-image img {
        width: 650px
    }
    .home-slider .hs-testimonials .testimonials-wrapper {
        width: 65%;
        margin-left: 10%;
        padding-left: 20px
    }
    .home-slider .hs-testimonials .testimonials-statistics {
        width: 20%
    }
    .home-slider .hs-testimonials .testimonials-statistics span span:first-child {
        font-size: 90px
    }
}

@media only screen and (max-width: 1400px) {
    .home-slider .hs-about .section-image img {
        width: 450px
    }
}

@media only screen and (max-width: 1250px) {
    .home-slider {
        height: auto
    }
    .home-slider .home-slides-wrapper,
    .home-slider .home-slide {
        width: 100%;
        float: none
    }
    .home-slider .home-slide {
        margin-top: 150px
    }
    .home-slider .home-slide li img {
        left: 50%;
        top: 50%;
        -webkit-transform: translateY(-50%) translateX(-50%);
        -ms-transform: translateY(-50%) translateX(-50%);
        transform: translateY(-50%) translateX(-50%);
        max-width: 80%
    }
    .home-slider .hs-about {
        margin: 0 auto;
        width: 100%;
        padding: 0;
        display: -webkit-flex;
        display: -moz-flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column
    }
    .home-slider .hs-about:after {
        content: '';
        display: table;
        clear: both
    }
    .home-slider .hs-about .container {
        padding: 0 15px;
        -webkit-box-ordinal-group: 1;
        -ms-flex-order: 1;
        -webkit-order: 1;
        order: 1
    }
    .home-slider .hs-about .section-image {
        position: relative;
        right: auto;
        top: auto;
        z-index: 10;
        max-width: 600px;
        width: 100%;
        margin: 0 auto;
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 2;
        -webkit-order: 2;
        order: 2
    }
    .home-slider .hs-about .section-image img {
        width: 100%
    }
    .home-slider .hs-about .section-content {
        width: 100%
    }
    .home-slider .hs-about .draggable-btn {
        margin: 30px auto;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
    .home-slider .hs-clients .draggable-btn {
        position: relative;
        bottom: auto;
        right: auto;
        margin: 50px auto 0;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

@media only screen and (max-width: 1023px) {
    .home-slider .hs-clients h3.section-title {
        font-size: 27.5px
    }
    .home-slider .hs-clients .draggable-btn {
        margin: 20px auto 0;
        width: 60px
    }
    .home-slider .hs-testimonials h3.section-title,
    .home-slider .hs-awards h3.section-title {
        font-size: 27.5px
    }
    .home-slider .hs-testimonials .draggable-btn,
    .home-slider .hs-awards .draggable-btn {
        margin: 0 0 0 auto
    }
}

@media only screen and (max-width: 767px) {
    .home-slider .home-slide {
        margin-top: 80px
    }
    .home-slider .home-slide h3 {
        margin-bottom: 50px
    }
    .home-slider .home-slide ul {
        max-width: 100%;
        margin: 0 auto
    }
    .home-slider .home-slide li {
        width: 100%;
        height: auto;
        margin-bottom: 50px;
        float: none;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
        justify-content: space-around;
        display: -webkit-flex;
        display: -moz-flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }
    .home-slider .home-slide li img {
        position: relative;
        left: auto;
        max-width: 100px;
        margin: 0 10px;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
    .home-slider .home-slide li img:first-child {
        top: auto
    }
    .home-slider .home-slide li img:last-child {
        top: auto
    }
    .home-slider .home-slide li:nth-child(n+5) {
        margin-bottom: 50px
    }
    .home-slider .hs-about {
        margin-top: 0
    }
    .home-slider .hs-about h2.section-title {
        margin-bottom: 30px
    }
    .home-slider .hs-about p.section-subtitle {
        margin-bottom: 25px
    }
    .home-slider .hs-about .draggable-btn {
        width: 60px
    }
    .home-slider .hs-about .section-image {
        display: none
    }
    .home-slider .hs-clients h2.section-title {
        margin: 0 0 50px
    }
    .home-slider .hs-testimonials h2.section-title {
        margin-bottom: 30px
    }
    .home-slider .hs-testimonials .testimonials-statistics {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 100%;
        margin-bottom: 50px;
        padding-left: -webkit-calc(25% - 20px);
        padding-left: calc(25% - 20px)
    }
    .home-slider .hs-testimonials .testimonials-statistics span span:first-child {
        font-size: 70px
    }
    .home-slider .hs-testimonials .testimonials-statistics span span:last-child {
        margin-top: 20px
    }
    .home-slider .hs-testimonials .testimonials-wrapper {
        width: 100%;
        margin-left: 0;
        padding-left: 0;
        float: none
    }
    .home-slider .hs-testimonials .testimonials-wrapper div:first-child {
        margin-bottom: 20px
    }
    .home-slider .hs-testimonials .testimonials-wrapper span {
        margin-top: 10px;
        font-size: 16px
    }
    .home-slider .hs-awards .clients-logo {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center
    }
}

@media only screen and (max-width: 767px) and (max-width: 501px) {
    .home-slider .hs-awards .clients-logo {
        display: block
    }
}

@media only screen and (max-width: 767px) {
    .home-slider .hs-awards .clients-logo li {
        width: 50%
    }
}

@media only screen and (max-width: 767px) and (max-width: 501px) {
    .home-slider .hs-awards .clients-logo li {
        width: 100%;
        margin-bottom: 30px
    }
}

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

@keyframes blinking {
    0% {
        opacity: 0
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

#play-btn {
    display: block;
    width: 50px;
    height: 50px;
    border: 5px solid #06B3BA;
    border-radius: 50%;
    position: absolute;
    pointer-events: none;
    z-index: 10000;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: top 200ms ease-out, left 200ms ease-out, transform 350ms ease;
    -webkit-transition: top 200ms ease-out, left 200ms ease-out, -webkit-transform 350ms ease;
    transition: top 200ms ease-out, left 200ms ease-out, -webkit-transform 350ms ease;
    transition: top 200ms ease-out, left 200ms ease-out, transform 350ms ease;
    transition: top 200ms ease-out, left 200ms ease-out, transform 350ms ease, -webkit-transform 350ms ease
}

#play-btn.show {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: top 200ms ease-out, left 200ms ease-out, transform 350ms ease 200ms;
    -webkit-transition: top 200ms ease-out, left 200ms ease-out, -webkit-transform 350ms ease 200ms;
    transition: top 200ms ease-out, left 200ms ease-out, -webkit-transform 350ms ease 200ms;
    transition: top 200ms ease-out, left 200ms ease-out, transform 350ms ease 200ms;
    transition: top 200ms ease-out, left 200ms ease-out, transform 350ms ease 200ms, -webkit-transform 350ms ease 200ms
}

#play-btn:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-left: 14px solid #06B3BA;
    border-bottom: 7px solid transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

#play-btn:before {
    content: 'Loading';
    display: block;
    color: #06B3BA;
    position: absolute;
    bottom: -30px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-animation: blinking 1s ease infinite;
    animation: blinking 1s ease infinite
}

#play-btn.active {
    position: fixed;
    background-color: #333;
    border-color: #333;
    -webkit-transform: scale(100);
    -ms-transform: scale(100);
    transform: scale(100);
    -webkit-transition: background-color 100ms ease, border-color 100ms ease, top 1ms ease, left 1ms ease, transform 800ms ease;
    -webkit-transition: background-color 100ms ease, border-color 100ms ease, top 1ms ease, left 1ms ease, -webkit-transform 800ms ease;
    transition: background-color 100ms ease, border-color 100ms ease, top 1ms ease, left 1ms ease, -webkit-transform 800ms ease;
    transition: background-color 100ms ease, border-color 100ms ease, top 1ms ease, left 1ms ease, transform 800ms ease;
    transition: background-color 100ms ease, border-color 100ms ease, top 1ms ease, left 1ms ease, transform 800ms ease, -webkit-transform 800ms ease
}

#play-btn.active:after {
    border-color: #333
}

#play-btn.hide-alt {
    display: none
}

#play-btn.img-loaded:before {
    content: none
}

.video-wrapper {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20000;
    background-color: #333
}

.video-wrapper.show {
    display: block
}

.video-wrapper.hide-alt {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease
}

.video-wrapper .fb-video {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: opacity 300ms ease;
    transition: opacity 300ms ease
}

.video-wrapper .fb-video.show {
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 2000ms ease;
    transition: opacity 2000ms ease
}

.video-wrapper #video-close {
    width: 70px;
    border-radius: 50%;
    background-color: #06B3BA;
    position: absolute;
    right: 40px;
    top: 40px;
    font-size: 33px;
    padding: 16px 0;
    text-align: center;
    line-height: 1;
    display: block;
    color: #333;
    z-index: 10;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease
}

.video-wrapper #video-close.show {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 300ms ease 2000ms;
    transition: all 300ms ease 2000ms
}

.home-webdesign {
    padding-top: 0
}

.home-webdesign>.container {
    position: relative
}

.home-webdesign>.container .bigletter {
    top: -27px;
    right: -100px;
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%)
}

.home-webdesign .section-image {
    width: 60%
}

.home-webdesign .section-image picture {
    left: 100px;
    top: 100px !important
}

.home-webdesign .section-image .pic-overlay {
    position: absolute;
    top: 150px;
    left: 0;
    padding-left: 15px
}

.home-webdesign .section-image .pic-overlay picture {
    width: auto;
    max-width: 100%;
    box-shadow: 0 0 20px -3px rgba(0, 0, 0, 0.45);
    top: 0 !important;
    left: 0
}

.home-webdesign .section-image .pic-overlay img {
    box-shadow: 0 0 20px -3px rgba(0, 0, 0, 0.45)
}

.home-webdesign .section-image.no-pseudo::after {
    display: none !important
}

.home-webdesign .section-image.show {
    padding-bottom: 200px;
    margin-bottom: -200px
}

@media only screen and (max-width: 1650px) {
    .home-webdesign .section-image.show {
        padding-bottom: 300px
    }
}

.home-webdesign .section-content {
    /* width: -webkit-calc(50% + 60px);
    width: calc(50% + 60px); */
    padding-top: 100%;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

/* .home-webdesign .draggable-btn {
    position: absolute;
    right: -webkit-calc(25% + 8px);
    right: calc(25% + 8px);
    bottom: -108px;
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%) */
}

@media only screen and (max-width: 1649px) {
    .home-webdesign .draggable-btn {
        bottom: -140px
    }
}

@media only screen and (max-width: 1250px) {
    .home-webdesign {
        padding-top: 150px
    }
    .home-webdesign>.container {
        display: -webkit-flex;
        display: -moz-flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column
    }
    .home-webdesign>.container .bigletter {
        top: -71px;
        right: auto;
        left: -52px
    }
    .home-webdesign .section-content {
        width: 100%;
        position: relative;
        top: auto;
        right: auto;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        -webkit-box-ordinal-group: 1;
        -ms-flex-order: 1;
        -webkit-order: 1;
        order: 1
    }
    .home-webdesign .section-image {
        margin: -70px auto 0;
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 2;
        -webkit-order: 2;
        order: 2
    }
    .home-webdesign .section-image.show {
        padding: 0;
        margin: 40px auto 0
    }
    .home-webdesign .section-image .pic-overlay {
        display: none
    }
    .home-webdesign .draggable-btn {
        position: relative;
        right: auto;
        bottom: auto;
        margin: 20px 0 0 auto;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 3;
        -webkit-order: 3;
        order: 3
    }
}

@media only screen and (max-width: 1250px) and (max-width: 1025px) {
    .home-webdesign .draggable-btn {
        margin: 0 auto;
        margin-top: 25px
    }
}

@media only screen and (max-width: 767px) {
    .home-webdesign {
        padding-top: 80px
    }
    .home-webdesign .section-image {
        width: 100%
    }
    .home-webdesign>.container .bigletter {
        top: -43px;
        left: 0;
        right: auto
    }
}

.home-webdesign .img-overlay img {
    top: 100px !important;
    left: 100px !important
}

.home-webdevelopment>.container {
    position: relative
}

.home-webdevelopment>.container .bigletter {
    top: -30px;
    left: -115px
}

.home-webdevelopment .draggable-btn {
    position: absolute;
    top: 180px;
    right: 15px;
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%)
}

.home-webdevelopment .section-content,
.home-webdevelopment ul {
    width: 100%;
    position: relative
}

.home-webdevelopment ul {
    list-style: none;
    margin: 75px 0 -50px 25%;
    padding: 0
}

.home-webdevelopment ul li {
    float: left;
    width: 33.33333%;
    color: #333;
    font-size: 23px;
    font-weight: 500;
    text-transform: uppercase;
    position: relative;
    padding-left: 40px;
    line-height: 1;
    margin-bottom: 50px
}

.home-webdevelopment ul li:first-child {
    margin-top: 0
}

.home-webdevelopment ul li:after {
    content: '+';
    display: block;
    line-height: 1;
    position: absolute;
    top: 50%;
    left: 15px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.home-webdevelopment ul li:before {
    content: none
}

@media only screen and (max-width: 1649px) {
    .home-webdevelopment ul li {
        font-size: 18px
    }
}

@media only screen and (max-width: 1250px) {
    .home-webdevelopment>.container .bigletter {
        top: -71px;
        left: 9px
    }
    .home-webdevelopment .section-content,
    .home-webdevelopment ul {
        width: 100%
    }
    .home-webdevelopment ul {
        margin: 40px 0 0
    }
    .home-webdevelopment ul li {
        font-size: 16px;
        margin-bottom: 25px
    }
    .home-webdevelopment ul li:nth-child(-n+6) {
        margin-bottom: 25px
    }
    .home-webdevelopment .draggable-btn {
        position: relative;
        top: auto;
        right: auto;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        margin: 0 0 0 auto
    }
}

@media only screen and (max-width: 767px) {
    .home-webdevelopment>.container .bigletter {
        top: -42px;
        left: 45px
    }
    .home-webdevelopment ul li {
        width: 100%;
        float: none;
        margin-bottom: 10px;
        font-size: 14px;
        padding-left: 14vw
    }
    .home-webdevelopment ul li::after {
        left: 9vw
    }
    .home-webdevelopment ul li:nth-child(-n+6) {
        margin-bottom: 10px
    }
}

.home-graphicdesign {
    z-index: 11;
    padding-top: 80px;
}

.home-graphicdesign>.container {
    position: relative
}

.home-graphicdesign>.container .bigletter {
    top: -27px;
    right: 15px;
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%)
}

.home-graphicdesign>.container .section-image {
    padding-top: 100px;
    margin-top: -100px;
    padding-bottom: 100px;
    margin-bottom: -100px
}

.home-graphicdesign>.container .pic-overlay {
    position: relative;
    top: -400px
}

.home-graphicdesign .section-image {
    width: 48%
}

.home-graphicdesign .section-content {
    /* width: -webkit-calc(50% + 60px);
    width: calc(50% + 60px); */
    /* position: absolute; */
    /* top: 40px;
    right: 0 */
}

.home-graphicdesign .draggable-btn {
    position: absolute;
    right: 30%;
    bottom: 0;
    -webkit-transform: translate(50%, 50%);
    -ms-transform: translate(50%, 50%);
    transform: translate(50%, 50%)
}

@media only screen and (max-width: 1649px) {
    .home-graphicdesign .draggable-btn {
        bottom: -80px
    }
}

@media only screen and (max-width: 1250px) {
    .home-graphicdesign>.container {
        display: -webkit-flex;
        display: -moz-flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column
    }
    .home-graphicdesign>.container .bigletter {
        top: -71px;
        right: auto;
        left: -37px
    }
    .home-graphicdesign .section-image {
        margin: -70px auto 0;
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 2;
        -webkit-order: 2;
        order: 2
    }
    .home-graphicdesign .section-image.show {
        padding: 0;
        margin: 40px auto 0
    }
    .home-graphicdesign .section-image .pic-overlay {
        display: none
    }
    .home-graphicdesign .section-content {
        width: 100%;
        position: relative;
        top: auto;
        right: auto;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        -webkit-box-ordinal-group: 1;
        -ms-flex-order: 1;
        -webkit-order: 1;
        order: 1
    }
    .home-graphicdesign .draggable-btn {
        position: relative;
        right: auto;
        bottom: auto;
        margin: 20px auto 0;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 3;
        -webkit-order: 3;
        order: 3;
        width: 60px
    }
}

@media only screen and (max-width: 767px) {
    .home-graphicdesign .container .bigletter {
        right: auto;
        left: 11px;
        top: -42px
    }
    .home-graphicdesign .section-image {
        width: 100%
    }
}

.home-seo {
    overflow: hidden;
    padding-bottom: 100px;
    padding-top: 80px;
}

.home-seo>.container {
    padding-bottom: 50px
}

.home-seo>.container .bigletter {
    left: 88px
}

.home-seo .svg-lines {
    position: absolute;
    width: 100%;
    max-width: 1030px;
    max-height: 539px;
    top: 0;
    right: -70px;
    margin-top: 250px;
    z-index: 99
}

.home-seo .svg-lines svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.home-seo .svg-lines svg:nth-of-type(2) {
    top: 30px;
    left: -25px;
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: .18
}

.home-seo .svg-lines svg:last-of-type {
    left: -30px
}

.home-seo .svg-lines span.icon-wrapper {
    display: block;
    width: 90px;
    padding: 10px;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 350ms ease;
    transition: all 350ms ease;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1)
}

.home-seo .svg-lines span.icon-wrapper span {
    display: block;
    background-color: #fff;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    width: 70px;
    text-align: center;
    color: #06B3BA;
    padding: 25px 0
}

.home-seo .svg-lines span.icon-wrapper.show {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.home-seo .svg-lines span.icon-wrapper.show:hover {
    -webkit-animation: zoomInOut 0.6s ease-in-out forwards;
    animation: zoomInOut 0.6s ease-in-out forwards;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.home-seo .svg-lines span.icon-wrapper.iw-facebook {
    top: 360px;
    left: 100px
}

.home-seo .svg-lines span.icon-wrapper.iw-twitter {
    top: 170px;
    left: 220px
}

.home-seo .svg-lines span.icon-wrapper.iw-seo {
    font-family: "Poppins", sans-serif !important;
    font-weight: 700;
    left: 440px;
    top: 170px;
    cursor: default
}

.home-seo .svg-lines span.icon-wrapper.iw-seo span {
    color: #767575;
    background-color: #fff;
    font-size: 25px;
    padding: 20px 0;
    line-height: 1.2
}

.home-seo .svg-lines span.icon-wrapper.iw-linkedin {
    top: 215px;
    left: 555px
}

.home-seo .svg-lines span.icon-wrapper.iw-instagram {
    left: 670px;
    top: 20px
}

.home-seo .svg-lines span.icon-wrapper.iw-google-plus {
    left: 830px;
    top: 190px
}

.home-seo>.container {
    position: relative
}

.home-seo>.container .bigletter {
    top: 70px;
    left: 16px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%)
}

.home-seo .section-content {
    position: relative;
    width: 100%
}

.home-seo .section-content img {
    margin-top: 110px;
    display: block
}

.home-seo .draggable-btn {
    position: absolute;
    left: 50%;
    bottom: 0;
    -webkit-transform: translate(-50%, 50%);
    -ms-transform: translate(-50%, 50%);
    transform: translate(-50%, 50%)
}

@media only screen and (max-width: 1500px) {
    .home-seo .svg-lines {
        max-width: 830px;
        top: 60px
    }
    .home-seo .svg-lines span.icon-wrapper.show {
        -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8)
    }
    .home-seo .svg-lines span.icon-wrapper.iw-facebook {
        top: 280px;
        left: 70px
    }
    .home-seo .svg-lines span.icon-wrapper.iw-twitter {
        top: 240px;
        left: 250px
    }
    .home-seo .svg-lines span.icon-wrapper.iw-seo {
        left: 348px;
        top: 120px
    }
    .home-seo .svg-lines span.icon-wrapper.iw-linkedin {
        top: 157px;
        left: 433px
    }
    .home-seo .svg-lines span.icon-wrapper.iw-instagram {
        left: 528px;
        top: 10px
    }
    .home-seo .svg-lines span.icon-wrapper.iw-google-plus {
        left: 660px;
        top: 150px
    }
}

@media only screen and (max-width: 1400px) {
    .home-seo .svg-lines {
        margin-top: 150px;
        max-width: 750px;
        max-height: 393px
    }
    .home-seo .svg-lines span.icon-wrapper {
        width: 64px;
        padding: 7px
    }
    .home-seo .svg-lines span.icon-wrapper span {
        width: 50px;
        padding: 15px 0
    }
    .home-seo .svg-lines span.icon-wrapper.iw-facebook {
        top: 255px;
        left: 70px
    }
    .home-seo .svg-lines span.icon-wrapper.iw-twitter {
        top: 125px;
        left: 155px
    }
    .home-seo .svg-lines span.icon-wrapper.iw-seo {
        left: 330px;
        top: 120px
    }
    .home-seo .svg-lines span.icon-wrapper.iw-seo span {
        font-size: 20px;
        padding: 13px 0
    }
    .home-seo .svg-lines span.icon-wrapper.iw-linkedin {
        top: 155px;
        left: 400px
    }
    .home-seo .svg-lines span.icon-wrapper.iw-instagram {
        left: 480px;
        top: 15px
    }
    .home-seo .svg-lines span.icon-wrapper.iw-google-plus {
        left: 600px;
        top: 140px
    }
}

@media only screen and (max-width: 1250px) {
    .home-seo {
        padding-bottom: 0;
        display: -webkit-flex;
        display: -moz-flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column
    }
    .home-seo .section-content {
        width: 100%
    }
    .home-seo>.container {
        -webkit-box-ordinal-group: 1;
        -ms-flex-order: 1;
        -webkit-order: 1;
        order: 1
    }
    .home-seo>.container .bigletter {
        top: -71px;
        left: 48px
    }
    .home-seo .svg-lines {
        height: 393px;
        margin: 70px auto 0;
        position: relative;
        right: auto;
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 2;
        -webkit-order: 2;
        order: 2
    }
    .home-seo .draggable-btn {
        position: relative;
        float: right;
        left: auto;
        bottom: auto;
        margin-top: -130px;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
    .home-seo .svg-lines {
        display: none
    }
}

@media only screen and (max-width: 767px) {
    .home-seo .section-content img {
        max-width: 230px;
        margin-top: 70px
    }
    .home-seo>.container .bigletter {
        top: -42px;
        left: 45px;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
    .home-seo .draggable-btn {
        float: none;
        margin: 20px 0 0 auto;
        height: auto
    }
}

@media only screen and (max-width: 767px) and (max-width: 1025px) {
    .home-seo .draggable-btn {
        margin: 0 auto;
        margin-top: 25px
    }
}

.home-blog {
    /* padding-top: 200px; */
    top: 0px;
    overflow: hidden
}

.home-blog .custom-arrows {
    position: absolute;
    left: 25%;
    top: 310px
}

.home-blog .custom-arrows:after {
    content: '';
    display: block;
    width: 60px;
    height: 1px;
    background-color: #ccc;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.home-blog .custom-arrows .ca {
    position: relative
}

.home-blog .custom-arrows .ca:before {
    position: relative;
    -webkit-transition: all 350ms ease;
    transition: all 350ms ease
}

.home-blog .custom-arrows .ca:after {
    content: '';
    display: block;
    width: 20px;
    height: 4px;
    background-color: #333;
    position: absolute;
    top: 50%;
    opacity: 0;
    -webkit-transition: all 350ms ease;
    transition: all 350ms ease;
    -webkit-transform: translateY(-60%);
    -ms-transform: translateY(-60%);
    transform: translateY(-60%)
}

@media only screen and (max-width: 767px) {
    .home-blog .custom-arrows .ca:after {
        width: 12px;
        top: 41%
    }
}

@media only screen and (max-width: 501px) {
    .home-blog .custom-arrows .ca:after {
        top: 36%
    }
}

.home-blog .custom-arrows .ca:first-child:after {
    right: -10px
}

.home-blog .custom-arrows .ca:last-child:after {
    left: -10px
}

.home-blog .custom-arrows .ca:hover:after {
    opacity: 1
}

.home-blog .custom-arrows .ca:hover:first-child:after {
    right: 10px
}

.home-blog .custom-arrows .ca:hover:last-child:after {
    left: 10px
}

.home-blog .blog-wrapper {
    margin-top: 60px;
    width: 100%;
    max-width: 1470px;
    float: right;
    -webkit-transform: translateX(243px);
    -ms-transform: translateX(243px);
    transform: translateX(243px)
}

.home-blog .blog-wrapper .slick-list {
    margin: 0 -30px
}

@media only screen and (max-width: 1040px) {
    .home-blog .blog-wrapper .slick-list {
        margin: 0 -10px
    }
}

.home-blog .blog-wrapper .slick-track {
    left: -30px
}

.home-blog .blog-wrapper .single-post {
    margin: 0 30px
}

@media only screen and (max-width: 1040px) {
    .home-blog .blog-wrapper .single-post {
        margin: 0 53px
    }
}

.home-blog .blog-wrapper .single-post .post-thumbnail {
    display: block;
    margin-bottom: 30px
}

.home-blog .blog-wrapper .single-post:nth-child(odd) .post-thumbnail {
    overflow: hidden;
    border-top: 20px solid transparent;
    margin-bottom: 10px
}

.home-blog .blog-wrapper .single-post:nth-child(odd) .post-thumbnail img {
    position: relative;
    top: -40px
}

.home-blog .blog-wrapper .single-post img {
    display: block
}

@media only screen and (max-width: 1023px) {
    .home-blog .blog-wrapper .single-post img {
        margin: 0 auto
    }
}

.home-blog .blog-wrapper .single-post .post-date {
    margin-bottom: 15px;
    color: #06B3BA;
    line-height: 1;
    display: block
}

.home-blog .blog-wrapper .single-post h5 {
    font-size: 30px;
    margin: 0 0 35px
}

.home-blog .blog-wrapper .single-post p {
    margin: 0
}

.home-blog .blog-wrapper+.container {
    position: relative;
    padding-top: 100px;
    clear: both
}

.home-blog .draggable-btn {
    position: relative;
    left: 50%;
    margin-bottom: 20px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%)
}

@media only screen and (max-width: 1649px) {
    .home-blog .blog-wrapper {
        max-width: 1200px
    }
}

@media only screen and (max-width: 1400px) {
    .home-blog .custom-arrows {
        left: 17%
    }
}

@media only screen and (max-width: 1250px) {
    .home-blog {
        margin-top: 110px
    }
    .home-blog .custom-arrows {
        left: 120px
    }
    .home-blog .blog-wrapper {
        max-width: 900px;
        -webkit-transform: translateX(150px);
        -ms-transform: translateX(150px);
        transform: translateX(150px)
    }
    .home-blog .blog-wrapper .single-post h5 {
        font-size: 18px;
        margin: 0 0 25px
    }
    .home-blog .blog-wrapper .single-post p {
        font-size: 14px
    }
    .home-blog .blog-wrapper+.container {
        padding-top: 30px
    }
}

@media only screen and (max-width: 1023px) {
    .home-blog {
        margin-top: 0;
        padding-top: 150px;
        text-align: center
    }
    .home-blog .custom-arrows {
        left: auto;
        top: auto;
        position: relative;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        display: -webkit-flex;
        display: -moz-flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }
    .home-blog .custom-arrows:after {
        content: none
    }
    .home-blog .blog-wrapper {
        max-width: 90%;
        margin: 50px auto 0;
        float: none;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
    .home-blog .blog-wrapper .single-post img img {
        margin: 0 auto
    }
    .home-blog .blog-wrapper .slick-track {
        left: 0
    }
    .home-blog .draggable-btn {
        left: auto;
        margin: 30px auto 0;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

@media only screen and (max-width: 767px) {
    .home-blog {
        padding-top: 0;
        padding-bottom: 80px;
        margin-bottom: -50px;
        text-align: left
    }
    .home-blog .blog-wrapper {
        max-width: 100%;
        padding: 0 45px;
        margin: 0px auto 0
    }
    .home-blog .blog-wrapper .slick-list {
        margin: 0 -10px
    }
    .home-blog .blog-wrapper .single-post {
        margin: 0 10px;
        text-align: left
    }
    .home-blog .blog-wrapper .single-post:nth-child(odd) .post-thumbnail {
        border-top: none;
        margin-bottom: 30px
    }
    .home-blog .blog-wrapper .single-post:nth-child(odd) .post-thumbnail img {
        top: 0
    }
    .home-blog .blog-wrapper+.container {
        display: none
    }
    .home-blog .custom-arrows {
        position: absolute;
        bottom: 0;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%)
    }
    .home-blog .custom-arrows .ca {
        margin: 0 30px;
        font-size: 40px
    }
}

#homeseo .container {
    padding-top: 50px
}

#homeseo .container .bigletter {
    top: -10px
}

@media only screen and (max-width: 900px) {
    .section-image {
        padding-bottom: 0 !important
    }
}

@media only screen and (max-width: 767px) {
    #homeblog .home-blog .custom-arrows .ca:after {
        top: 36%
    }
}

@media only screen and (max-width: 1025px) {
    .draggable-btn {
        margin: 0 auto !important;
        margin-top: 45px !important;
        float: none !important;
        -webkit-transform: translateX(0) !important;
        -ms-transform: translateX(0) !important;
        transform: translateX(0) !important;
        position: relative !important;
        left: 0 !important
    }
}

@media only screen and (max-width: 501px) {
    #newsletter-subscribe {
        padding: 50px 16px !important
    }
    #newsletter-subscribe h2 {
        font-size: 20px
    }
}

@media only screen and (min-width: 1400px) {
    .inner-form-btn {
        margin-bottom: 60px
    }
}

@media only screen and (max-width: 769px) {
    .inner-form-btn {
        margin-bottom: 25px
    }
}

@media only screen and (min-width: 600px) {
    .enter-forms-content {
        display: -webkit-box !important;
        display: -webkit-flex !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center
    }
    .form-title-left {
        width: 70%;
        float: left
    }
    .form-btn-right {
        width: 30%;
        float: right
    }
    .enter-forms-content {
        display: -webkit-box !important;
        display: -webkit-flex !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center
    }
    .form-title-left {
        width: 70%;
        float: left
    }
    .form-btn-right {
        width: 30%;
        float: right
    }
    .inner-form-btn {
        float: right;
        margin-right: 0 !important;
        margin: 0 auto;
        margin-bottom: 50px
    }
}

@media only screen and (max-width: 1500px) {
    .inner-form-btn {
        margin-bottom: 20px
    }
}

.undo-img {
    height: 41px;
    margin-top: 34px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

@media only screen and (max-width: 1500px) {
    .undo-img {
        margin-left: 50px;
        height: 25px;
        margin-top: 17px;
        display: block
    }
}

@media only screen and (max-width: 1400px) {
    .undo-img {
        height: 25px;
        margin-left: 0;
        margin-top: 20px
    }
}

@media only screen and (max-width: 769px) {
    .undo-img {
        height: 25px;
        margin-top: 19px;
        display: block
    }
}

@media only screen and (max-width: 600px) {
    .undo-img {
        height: 21px;
        margin-top: 11px;
        display: block
    }
}

.only-one-img {
    -webkit-transform: none !important;
    -ms-transform: none !important;
    transform: none !important;
    height: 670px !important;
    margin-top: -75px !important;
    padding-top: 30px !important;
    padding-bottom: 0 !important
}

.only-one-img img {
    -webkit-transition: none !important;
    transition: none !important;
    top: 670px !important
}

@media only screen and (max-width: 1350px) {
    .only-one-img {
        height: 348px !important;
        margin-top: 40px !important
    }
}

@media only screen and (max-width: 400px) {
    .only-one-img {
        height: 280px !important
    }
}

@media only screen and (max-width: 1350px) {
    .none-resp {
        height: 80px
    }
}

.portfolio-page {
    padding-top: 0;
    /*!
 * animate.css -http://daneden.me/animate
 * Version - 3.7.0
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2018 Daniel Eden
 */
}

@media only screen and (max-width: 1600px) {
    .portfolio-page {
        padding-bottom: 60px
    }
}

@media only screen and (max-width: 1400px) {
    .portfolio-page {
        padding-bottom: 160px
    }
}

@media only screen and (max-width: 1024px) {
    .portfolio-page {
        padding-bottom: 100px
    }
}

@media only screen and (max-width: 1023px) {
    .portfolio-page {
        padding-bottom: 0
    }
}

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

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

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

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

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

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

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

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

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

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

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

.portfolio-page .flipOutX {
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-name: flipOutX;
    animation-name: flipOutX;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important
}

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

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

.portfolio-page .flipOutY {
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipOutY;
    animation-name: flipOutY
}

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

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

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

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

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

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

@-webkit-keyframes rotateIn {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0
    }
    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

@keyframes rotateIn {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0
    }
    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

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

@-webkit-keyframes rotateInDownLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }
    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

@keyframes rotateInDownLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }
    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

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

@-webkit-keyframes rotateInDownRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
    }
    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

@keyframes rotateInDownRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
    }
    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

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

@-webkit-keyframes rotateInUpLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
    }
    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

@keyframes rotateInUpLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
    }
    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

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

@-webkit-keyframes rotateInUpRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -90deg);
        transform: rotate3d(0, 0, 1, -90deg);
        opacity: 0
    }
    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

@keyframes rotateInUpRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -90deg);
        transform: rotate3d(0, 0, 1, -90deg);
        opacity: 0
    }
    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

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

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

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

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

@-webkit-keyframes rotateOutDownLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1
    }
    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
    }
}

@keyframes rotateOutDownLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1
    }
    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

.portfolio-page .hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-name: hinge;
    animation-name: hinge
}

@-webkit-keyframes jackInTheBox {
    from {
        opacity: 0;
        -webkit-transform: scale(0.1) rotate(30deg);
        transform: scale(0.1) rotate(30deg);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom
    }
    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }
    70% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg)
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes jackInTheBox {
    from {
        opacity: 0;
        -webkit-transform: scale(0.1) rotate(30deg);
        transform: scale(0.1) rotate(30deg);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom
    }
    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }
    70% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg)
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.portfolio-page .jackInTheBox {
    -webkit-animation-name: jackInTheBox;
    animation-name: jackInTheBox
}

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

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

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

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

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

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

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

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

.portfolio-page .zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@-webkit-keyframes slideInDown {
    from {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes slideInDown {
    from {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.portfolio-page .slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown
}

@-webkit-keyframes slideInLeft {
    from {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes slideInLeft {
    from {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.portfolio-page .slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft
}

@-webkit-keyframes slideInRight {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes slideInRight {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.portfolio-page .slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight
}

@-webkit-keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.portfolio-page .slideInUp {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp
}

@-webkit-keyframes slideOutDown {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
}

@keyframes slideOutDown {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
}

.portfolio-page .slideOutDown {
    -webkit-animation-name: slideOutDown;
    animation-name: slideOutDown
}

@-webkit-keyframes slideOutLeft {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
}

@keyframes slideOutLeft {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
}

.portfolio-page .slideOutLeft {
    -webkit-animation-name: slideOutLeft;
    animation-name: slideOutLeft
}

@-webkit-keyframes slideOutRight {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
}

@keyframes slideOutRight {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
}

.portfolio-page .slideOutRight {
    -webkit-animation-name: slideOutRight;
    animation-name: slideOutRight
}

@-webkit-keyframes slideOutUp {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
}

@keyframes slideOutUp {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
}

.portfolio-page .slideOutUp {
    -webkit-animation-name: slideOutUp;
    animation-name: slideOutUp
}

.portfolio-page .animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.portfolio-page .animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.portfolio-page .animated.delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

.portfolio-page .animated.delay-2s {
    -webkit-animation-delay: 2s;
    animation-delay: 2s
}

.portfolio-page .animated.delay-3s {
    -webkit-animation-delay: 3s;
    animation-delay: 3s
}

.portfolio-page .animated.delay-4s {
    -webkit-animation-delay: 4s;
    animation-delay: 4s
}

.portfolio-page .animated.delay-5s {
    -webkit-animation-delay: 5s;
    animation-delay: 5s
}

.portfolio-page .animated.fast {
    -webkit-animation-duration: 800ms;
    animation-duration: 800ms
}

.portfolio-page .animated.faster {
    -webkit-animation-duration: 500ms;
    animation-duration: 500ms
}

.portfolio-page .animated.slow {
    -webkit-animation-duration: 2s;
    animation-duration: 2s
}

.portfolio-page .animated.slower {
    -webkit-animation-duration: 3s;
    animation-duration: 3s
}

@media (prefers-reduced-motion) {
    .portfolio-page .animated {
        -webkit-animation: unset !important;
        animation: unset !important;
        -webkit-transition: none !important;
        transition: none !important
    }
}

.portfolio-count {
    position: absolute;
    bottom: 0;
    padding-left: 1rem;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    overflow: hidden;
    height: 25px
}

.portfolio-count * {
    display: inline-block
}

.portfolio-count .portfolio-cat {
    -webkit-transform: translateY(120%);
    -ms-transform: translateY(120%);
    transform: translateY(120%);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease
}

.portfolio-count.show {
    height: initial
}

.portfolio-count.show .portfolio-cat {
    position: relative;
    overflow: hidden;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
}

.portfolio-count.show .portfolio-cat:hover:after,
.portfolio-count.show .portfolio-cat.focus:after,
.portfolio-count.show .portfolio-cat.active:after {
    -webkit-transform: translate(102%, -50%);
    -ms-transform: translate(102%, -50%);
    transform: translate(102%, -50%)
}

.portfolio-count.show .portfolio-cat:hover span,
.portfolio-count.show .portfolio-cat.focus span,
.portfolio-count.show .portfolio-cat.active span {
    -webkit-transform: translateY(-25px);
    -ms-transform: translateY(-25px);
    transform: translateY(-25px)
}

.portfolio-count.show .portfolio-cat:hover span small,
.portfolio-count.show .portfolio-cat.focus span small,
.portfolio-count.show .portfolio-cat.active span small {
    top: 21px;
    background-color: #06B3BA;
    color: #fff
}

.portfolio-count.show .portfolio-cat:after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: #333;
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translate(-102%, -50%);
    -ms-transform: translate(-102%, -50%);
    transform: translate(-102%, -50%);
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease
}

.portfolio-count .portfolio-cat span {
    position: relative;
    -webkit-transition: all 300ms ease-out 100ms;
    transition: all 300ms ease-out 100ms
}

.portfolio-count .portfolio-cat span:after {
    content: attr(data-hover-text);
    display: block;
    position: absolute;
    top: 25px;
    left: 0;
    color: #06B3BA
}

.portfolio-count span {
    margin-right: 80px;
    cursor: pointer
}

.portfolio-count span:last-child {
    margin-right: 0
}

.portfolio-count span small {
    font-size: 10px;
    position: relative;
    top: -3px;
    width: 17px;
    height: 17px;
    border-radius: 50px;
    line-height: 20px;
    text-align: center;
    -webkit-transition: all 300ms ease-out 300ms;
    transition: all 300ms ease-out 300ms
}

@media only screen and (max-width: 1250px) {
    .portfolio-count {
        position: relative;
        margin-top: 50px
    }
}

.portfolio-banner .portfolio-count-container {
    height: auto
}

.portfolio-banner .single-portfolio-count {
    position: relative;
    bottom: 0;
    padding: 0;
    height: initial;
    max-height: 0;
    -webkit-transition: padding 350ms ease 1000ms, max-height 350ms ease 1000ms;
    transition: padding 350ms ease 1000ms, max-height 350ms ease 1000ms
}

.portfolio-banner .single-portfolio-count.show {
    padding: 25px 0;
    max-height: 75px
}

@media only screen and (max-width: 1650px) {
    .portfolio-banner .single-portfolio-count.show {
        margin-bottom: 100px
    }
}

@media only screen and (max-width: 650px) {
    .portfolio-banner .single-portfolio-count.show {
        margin-bottom: 0
    }
}

@media only screen and (max-width: 1023px) {
    .portfolio-banner .portfolio-count-container {
        padding-bottom: 100px;
        background-color: transparent
    }
    .portfolio-banner .single-portfolio-count.show {
        max-height: 100%
    }
}

@media only screen and (max-width: 770px) {
    .portfolio-banner .portfolio-count-container {
        padding-bottom: 0
    }
}

.portfolio-item {
    display: block;
    position: relative;
    z-index: 10;
    float: left;
    margin-bottom: 220px;
    -webkit-animation-delay: 20s;
    animation-delay: 20s
}

.portfolio-item:nth-child(3n+1) {
    clear: both;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0)
}

.portfolio-item:nth-child(3n+1) .project-info {
    bottom: 50%;
    -webkit-transform: translate(-180px, 50%);
    -ms-transform: translate(-180px, 50%);
    transform: translate(-180px, 50%)
}

.portfolio-item:nth-child(3n+1) .project-info.animation-in {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    -webkit-transform: translate(-180px, 50%);
    -ms-transform: translate(-180px, 50%);
    transform: translate(-180px, 50%)
}

.portfolio-item:nth-child(3n+1) .project-info.animation-out {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    -webkit-transform: translate(-180px, 50%);
    -ms-transform: translate(-180px, 50%);
    transform: translate(-180px, 50%)
}

.portfolio-item:nth-child(3n+2) {
    margin-left: -1px;
    -webkit-transform: translate(50%, 130px);
    -ms-transform: translate(50%, 130px);
    transform: translate(50%, 130px)
}

.portfolio-item:nth-child(3n+2).animation-in {
    -webkit-animation: animationlusTwo 0.5s forwards;
    animation: animationlusTwo 0.5s forwards
}

.portfolio-item:nth-child(3n+2) .project-info {
    -webkit-transform: translateX(-180px);
    -ms-transform: translateX(-180px);
    transform: translateX(-180px)
}

.portfolio-item:nth-child(3n+3) {
    margin-top: 180px;
    -webkit-transform: translateX(25%);
    -ms-transform: translateX(25%);
    transform: translateX(25%)
}

.portfolio-item:nth-child(3n+3) .project-info {
    -webkit-transform: translateX(400px);
    -ms-transform: translateX(400px);
    transform: translateX(400px)
}

.portfolio-item:nth-child(3n+3) .project-info .x-btn {
    left: auto;
    right: 40px
}

.portfolio-item:hover .project-info .x-btn {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 1.2s ease;
    transition: all 1.2s ease
}

.portfolio-item:hover h4:before,
.portfolio-item:hover h4:after {
    width: 100%;
    height: 293px;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0)
}

.portfolio-item:hover h4:after {
    -webkit-transition: transform 0.25s ease-out, width 0.25s ease-out, height 0.25s ease-out 0.25s;
    -webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s, -webkit-transform 0.25s ease-out;
    transition: width 0.25s ease-out, height 0.25s ease-out 0.25s, -webkit-transform 0.25s ease-out;
    transition: transform 0.25s ease-out, width 0.25s ease-out, height 0.25s ease-out 0.25s;
    transition: transform 0.25s ease-out, width 0.25s ease-out, height 0.25s ease-out 0.25s, -webkit-transform 0.25s ease-out
}

.portfolio-item:hover h4:before {
    border-top-color: #06B3BA;
    border-left-color: #06B3BA;
    -webkit-transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.7s;
    transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.7s
}

.portfolio-item img {
    display: block;
    -webkit-transition: all 800ms cubic-bezier(0.21, 0.73, 0.62, 0.99);
    transition: all 800ms cubic-bezier(0.21, 0.73, 0.62, 0.99)
}

.portfolio-item .project-info {
    position: absolute;
    bottom: 0;
    left: 0;
    -webkit-transition: all 800ms cubic-bezier(0.21, 0.73, 0.62, 0.99);
    transition: all 800ms cubic-bezier(0.21, 0.73, 0.62, 0.99)
}

.portfolio-item .project-info .x-btn {
    position: absolute;
    top: -185px;
    left: 40px;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

.portfolio-item .project-info .x-btn:after,
.portfolio-item .project-info .x-btn:before {
    content: none
}

.portfolio-item h4 {
    font-size: 48px;
    line-height: 1;
    margin: 0;
    position: relative;
    padding: 0 60px 40px 40px
}

.portfolio-item h4:before,
.portfolio-item h4:after {
    content: '';
    display: block;
    position: absolute;
    height: 0
}

.portfolio-item h4:before {
    right: 0;
    top: -225px;
    width: 0;
    border-top: 2px solid transparent;
    border-left: 2px solid transparent
}

.portfolio-item h4:after {
    left: 0;
    bottom: 20px;
    width: 150px;
    border-right: 2px solid #06B3BA;
    border-bottom: 2px solid #06B3BA;
    -webkit-transform: translateX(40px);
    -ms-transform: translateX(40px);
    transform: translateX(40px)
}

.portfolio-item p {
    margin: 0;
    padding: 0 60px 20px 40px
}

@media only screen and (max-width: 1900px) {
    .portfolio-item:nth-child(3n+1) .project-info {
        -webkit-transform: translate(-150px, 50%);
        -ms-transform: translate(-150px, 50%);
        transform: translate(-150px, 50%)
    }
    .portfolio-item:nth-child(3n+2) {
        -webkit-transform: translate(30%, 130px);
        -ms-transform: translate(30%, 130px);
        transform: translate(30%, 130px)
    }
    .portfolio-item:nth-child(3n+2) .project-info {
        -webkit-transform: translateX(-150px);
        -ms-transform: translateX(-150px);
        transform: translateX(-150px)
    }
    .portfolio-item:nth-child(3n+3) .project-info {
        -webkit-transform: translateX(300px);
        -ms-transform: translateX(300px);
        transform: translateX(300px)
    }
}

@media only screen and (max-width: 1650px) {
    .portfolio-item {
        width: 45%
    }
    .portfolio-item:nth-child(3n+2) {
        margin-left: 10%
    }
    .portfolio-item:nth-child(3n+3) {
        margin-top: 100px
    }
    .portfolio-item h4 {
        font-size: 38px;
        padding: 0 40px 40px
    }
    .portfolio-item p {
        font-size: 14px;
        padding: 0 40px 20px
    }
    .portfolio-item:hover h4:before,
    .portfolio-item:hover h4:after {
        height: 283px
    }
}

@media only screen and (max-width: 1250px) {
    .portfolio-item {
        padding: 15px;
        margin-bottom: 0;
        width: 50%
    }
    .portfolio-item .project-thumbnail {
        overflow: hidden;
        background-color: #CAFBFF
    }
    .portfolio-item:nth-child(3n+2) {
        margin-left: 0
    }
    .portfolio-item:nth-child(3n+1) {
        clear: none;
        bottom: auto
    }
    .portfolio-item:nth-child(3n+2) {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
    .portfolio-item:nth-child(3n+3) {
        margin-top: 0;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
    .portfolio-item .project-info {
        position: relative;
        bottom: auto;
        left: auto;
        padding: 0 15px;
        margin-top: 15px;
        -webkit-transform: none !important;
        -ms-transform: none !important;
        transform: none !important
    }
    .portfolio-item h4 {
        font-size: 32px;
        padding: 0 0 20px
    }
    .portfolio-item h4:after {
        bottom: 7px;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
    .portfolio-item h4:before {
        content: none
    }
    .portfolio-item p {
        font-size: 14px;
        padding: 0 0 20px
    }
    .portfolio-item:hover h4:after {
        height: initial
    }
}

@media only screen and (max-width: 1023px) {
    .portfolio-item h4 {
        font-size: 30px;
        padding: 0 0 20px
    }
    .portfolio-item h4:after {
        bottom: 8px
    }
    .portfolio-item p {
        font-size: 12px
    }
    .portfolio-item .x-btn {
        display: none
    }
}

@media only screen and (max-width: 600px) {
    .portfolio-item {
        width: 100%;
        float: none
    }
    .portfolio-item h4 {
        font-size: 26px;
        padding: 0 0 15px
    }
}

.project-thumbnail {
    overflow: hidden;
    background-color: #CAFBFF;
    max-height: 500px
}

@media only screen and (max-width: 1400px) {
    .project-thumbnail {
        max-height: 370px;
        margin-top: 50px
    }
}

.portfolio-page {
    padding-top: 90px
}

@media only screen and (max-width: 1024px) {
    .portfolio-page {
        padding-top: 0
    }
}

@media only screen and (max-width: 320px) {
    .portfolio-page {
        padding-top: 90px
    }
}

.portfolio-count {
    position: absolute;
    bottom: 0;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    overflow: hidden;
    height: 25px
}

.portfolio-count * {
    display: inline-block
}

.portfolio-count .portfolio-cat {
    -webkit-transform: translateY(120%);
    -ms-transform: translateY(120%);
    transform: translateY(120%);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease
}

.portfolio-count.show {
    height: initial
}

.portfolio-count.show .portfolio-cat {
    position: relative;
    overflow: hidden;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
}

.portfolio-count.show .portfolio-cat:hover:after,
.portfolio-count.show .portfolio-cat.focus:after,
.portfolio-count.show .portfolio-cat.active:after {
    -webkit-transform: translate(100%, -50%);
    -ms-transform: translate(100%, -50%);
    transform: translate(100%, -50%)
}

.portfolio-count.show .portfolio-cat:hover span,
.portfolio-count.show .portfolio-cat.focus span,
.portfolio-count.show .portfolio-cat.active span {
    -webkit-transform: translateY(-25px);
    -ms-transform: translateY(-25px);
    transform: translateY(-25px)
}

.portfolio-count.show .portfolio-cat:hover span small,
.portfolio-count.show .portfolio-cat.focus span small,
.portfolio-count.show .portfolio-cat.active span small {
    top: 21px;
    background-color: #06B3BA;
    color: #fff
}

.portfolio-count.show .portfolio-cat:after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: #333;
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translate(-100%, -50%);
    -ms-transform: translate(-100%, -50%);
    transform: translate(-100%, -50%);
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease
}

.portfolio-count .portfolio-cat span {
    position: relative;
    -webkit-transition: all 300ms ease-out 100ms;
    transition: all 300ms ease-out 100ms
}

.portfolio-count .portfolio-cat span:after {
    content: attr(data-hover-text);
    display: block;
    position: absolute;
    top: 25px;
    left: 0;
    color: #06B3BA
}

.portfolio-count span {
    margin-right: 80px;
    cursor: pointer
}

.portfolio-count span:last-child {
    margin-right: 0
}

.portfolio-count span small {
    font-size: 10px;
    position: relative;
    top: -3px;
    width: 17px;
    height: 17px;
    border-radius: 50px;
    line-height: 20px;
    text-align: center;
    -webkit-transition: all 300ms ease-out 300ms;
    transition: all 300ms ease-out 300ms
}

@media only screen and (max-width: 1649px) {
    .portfolio-count span {
        margin-right: 0
    }
}

@media only screen and (max-width: 767px) {
    .portfolio-count {
        position: static;
        margin-top: 30px
    }
    .portfolio-count .portfolio-cat {
        width: 100%
    }
    .portfolio-count span {
        display: block;
        margin-top: 0;
        margin-bottom: 8px
    }
}

.portfolio-project {
    display: block;
    position: relative;
    z-index: 10;
    float: left;
    margin-bottom: 220px
}

.portfolio-project .project-thumbnail {
    overflow: hidden;
    background-color: #CAFBFF
}

.portfolio-project:nth-child(3n+1) {
    clear: both
}

.portfolio-project:nth-child(3n+1) .project-info {
    bottom: 50%;
    -webkit-transform: translate(-180px, 50%);
    -ms-transform: translate(-180px, 50%);
    transform: translate(-180px, 50%)
}

.portfolio-project:nth-child(3n+2) {
    margin-left: -1px;
    -webkit-transform: translate(50%, 130px);
    -ms-transform: translate(50%, 130px);
    transform: translate(50%, 130px)
}

.portfolio-project:nth-child(3n+2) .project-info {
    -webkit-transform: translateX(-180px);
    -ms-transform: translateX(-180px);
    transform: translateX(-180px)
}

.portfolio-project:nth-child(3n+3) {
    margin-top: 180px;
    -webkit-transform: translateX(25%);
    -ms-transform: translateX(25%);
    transform: translateX(25%)
}

.portfolio-project:nth-child(3n+3) .project-info {
    -webkit-transform: translateX(400px);
    -ms-transform: translateX(400px);
    transform: translateX(400px)
}

.portfolio-project:nth-child(3n+3) .project-info .x-btn {
    left: auto;
    right: 40px
}

.portfolio-project img {
    -webkit-transition: all 800ms cubic-bezier(0.21, 0.73, 0.62, 0.99);
    transition: all 800ms cubic-bezier(0.21, 0.73, 0.62, 0.99)
}

.portfolio-project .project-info {
    position: absolute;
    bottom: 0;
    left: 0;
    -webkit-transition: all 800ms cubic-bezier(0.21, 0.73, 0.62, 0.99);
    transition: all 800ms cubic-bezier(0.21, 0.73, 0.62, 0.99)
}

.portfolio-project .project-info .x-btn {
    position: absolute;
    top: -185px;
    left: 40px;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

.portfolio-project .project-info .x-btn:after,
.portfolio-project .project-info .x-btn:before {
    content: none
}

.portfolio-project h2 {
    font-size: 48px;
    line-height: 1.2;
    margin: 0;
    position: relative;
    padding: 0 60px 40px 40px
}

.portfolio-project h2:before,
.portfolio-project h2:after {
    content: '';
    display: block;
    position: absolute;
    height: 0
}

.portfolio-project h2:before {
    right: 0;
    top: -225px;
    width: 0;
    border-top: 2px solid transparent;
    border-left: 2px solid transparent
}

.portfolio-project h2:after {
    left: 0;
    bottom: 20px;
    width: 150px;
    border-right: 2px solid #06B3BA;
    border-bottom: 2px solid #06B3BA;
    -webkit-transform: translateX(40px);
    -ms-transform: translateX(40px);
    transform: translateX(40px)
}

.portfolio-project p {
    margin: 0;
    padding: 0 60px 20px 40px
}

.portfolio-project:hover .project-info .x-btn {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 1.2s ease;
    transition: all 1.2s ease
}

.portfolio-project:hover h2:before,
.portfolio-project:hover h2:after {
    width: 100%;
    height: 300px;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0)
}

.portfolio-project:hover h2:after {
    -webkit-transition: transform 0.25s ease-out, width 0.25s ease-out, height 0.25s ease-out 0.25s;
    -webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s, -webkit-transform 0.25s ease-out;
    transition: width 0.25s ease-out, height 0.25s ease-out 0.25s, -webkit-transform 0.25s ease-out;
    transition: transform 0.25s ease-out, width 0.25s ease-out, height 0.25s ease-out 0.25s;
    transition: transform 0.25s ease-out, width 0.25s ease-out, height 0.25s ease-out 0.25s, -webkit-transform 0.25s ease-out
}

.portfolio-project:hover h2:before {
    border-top-color: #06B3BA;
    border-left-color: #06B3BA;
    -webkit-transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.7s;
    transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.7s
}

@media only screen and (max-width: 1900px) {
    .portfolio-project:nth-child(3n+1) .project-info {
        -webkit-transform: translate(-150px, 50%);
        -ms-transform: translate(-150px, 50%);
        transform: translate(-150px, 50%)
    }
    .portfolio-project:nth-child(3n+2) {
        -webkit-transform: translate(30%, 130px);
        -ms-transform: translate(30%, 130px);
        transform: translate(30%, 130px)
    }
    .portfolio-project:nth-child(3n+2) .project-info {
        -webkit-transform: translateX(-150px);
        -ms-transform: translateX(-150px);
        transform: translateX(-150px)
    }
    .portfolio-project:nth-child(3n+3) .project-info {
        -webkit-transform: translateX(300px);
        -ms-transform: translateX(300px);
        transform: translateX(300px)
    }
}

@media only screen and (max-width: 1650px) {
    .portfolio-project:nth-child(3n+3) {
        margin-top: 100px
    }
    .portfolio-project h2 {
        font-size: 38px;
        padding: 0 40px 40px
    }
    .portfolio-project p {
        font-size: 14px;
        padding: 0 40px 20px
    }
    .portfolio-project:hover h2:before,
    .portfolio-project:hover h2:after {
        height: 290px
    }
}

@media only screen and (max-width: 1250px) {
    .portfolio-project {
        padding: 15px;
        margin-bottom: 0
    }
    .portfolio-project:nth-child(3n+1) {
        clear: none;
        bottom: auto
    }
    .portfolio-project:nth-child(3n+2) {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
    .portfolio-project:nth-child(3n+3) {
        margin-top: 0;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
    .portfolio-project .project-info {
        position: relative;
        bottom: auto;
        left: auto;
        padding: 0 15px;
        margin-top: 15px;
        -webkit-transform: none !important;
        -ms-transform: none !important;
        transform: none !important
    }
    .portfolio-project h2 {
        font-size: 32px;
        padding: 0 0 20px
    }
    .portfolio-project h2:after {
        bottom: 7px;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
    .portfolio-project h2:before {
        content: none
    }
    .portfolio-project p {
        font-size: 14px;
        padding: 0 0 20px
    }
    .portfolio-project:hover h2:after {
        height: initial
    }
}

@media only screen and (max-width: 1023px) {
    .portfolio-project h2 {
        font-size: 30px;
        padding: 0 0 20px
    }
    .portfolio-project h2:after {
        bottom: 8px
    }
    .portfolio-project p {
        font-size: 12px
    }
    .portfolio-project .x-btn {
        display: none
    }
}

@media only screen and (max-width: 600px) {
    .portfolio-project {
        width: 100%;
        float: none
    }
    .portfolio-project h2 {
        font-size: 26px;
        padding: 0 0 15px
    }
}

.project-info {
    -webkit-transform: translate(-180px, 50%) !important;
    -ms-transform: translate(-180px, 50%) !important;
    transform: translate(-180px, 50%) !important
}

.animation-in {
    -webkit-animation: animationIn 0.5s;
    animation: animationIn 0.5s;
    opacity: 1
}

.animation-out {
    -webkit-animation: animationOut 0.5s;
    animation: animationOut 0.5s;
    opacity: 0
}

@-webkit-keyframes animationIn {
    0% {
        padding-top: 80%
    }
    100% {
        padding-top: 0
    }
}

@keyframes animationIn {
    0% {
        padding-top: 80%
    }
    100% {
        padding-top: 0
    }
}

@-webkit-keyframes animationOut {
    0% {
        padding-top: 0;
        overflow: hidden
    }
    100% {
        padding-top: 80%;
        overflow: hidden
    }
}

@keyframes animationOut {
    0% {
        padding-top: 0;
        overflow: hidden
    }
    100% {
        padding-top: 80%;
        overflow: hidden
    }
}

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

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

.project-info {
    -webkit-transform: translate(-180px, 30%) !important;
    -ms-transform: translate(-180px, 30%) !important;
    transform: translate(-180px, 30%) !important
}

@keyframes animationIn {
    0% {
        padding-top: 20%
    }
    100% {
        padding-top: 0
    }
}

@keyframes animationOut {
    0% {
        padding-top: 0;
        overflow: hidden
    }
    100% {
        padding-top: 80%;
        overflow: hidden
    }
}

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

@media only screen and (max-width: 1370px) {
    .portfolio-count {
        font-size: 13px
    }
}

@media only screen and (max-width: 1024px) {
    .portfolio-project:nth-child(3n+1) .project-info {
        bottom: 0%;
        position: relative !important
    }
    .portfolio-count {
        font-size: 12px
    }
}

@media only screen and (max-width: 800px) {
    .project-thumbnail {
        margin-top: 0
    }
}

@media only screen and (max-width: 580px) {
    .project-thumbnail {
        margin-top: 0
    }
    .portfolio-project:nth-child(3n+1) .project-info {
        bottom: 0%;
        position: relative !important
    }
}

.page-banner.single-portfolio-banner>.container {
    height: -webkit-calc(100vh - 318px);
    height: calc(100vh - 318px)
}

@media only screen and (max-width: 767px) {
    .page-banner.single-portfolio-banner>.container {
        height: 390px
    }
}

@media only screen and (max-width: 767px) {
    .page-banner.single-portfolio-banner h2 {
        display: none
    }
}

.portfolio-wrapper .main-portfolio-image {
    opacity: 0;
    -webkit-transition: 1000ms ease;
    transition: 1000ms ease;
    -webkit-animation: fadeUp 1000ms ease forwards 3s;
    animation: fadeUp 1000ms ease forwards 3s
}

@media only screen and (max-width: 1650px) {
    .portfolio-wrapper {
        margin-bottom: 150px
    }
}

@media only screen and (max-width: 1400px) {
    .portfolio-wrapper {
        margin-bottom: 0
    }
}

@media only screen and (max-width: 767px) {
    .portfolio-wrapper {
        padding-top: 0 !important
    }
}

@media only screen and (max-width: 550px) {
    .portfolio-wrapper {
        padding-top: 40px !important
    }
}

.single-portfolio-slider-wrapper {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    top: -webkit-calc(50vh + 52.5px);
    top: calc(50vh + 52.5px);
    z-index: 600;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    margin-top: -105px;
    padding: 0 50px;
    -webkit-transition: 1000ms ease;
    transition: 1000ms ease
}

.single-portoflio-slider-nav {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 105px;
    max-width: 430px;
    width: auto
}

.single-portoflio-slider-nav:hover .single-portfolio-text-wrapper {
    max-width: 295px;
    -webkit-transition-delay: 0ms;
    transition-delay: 0ms
}

.single-portoflio-slider-nav:hover .single-portfolio-text-arrow span,
.single-portoflio-slider-nav:hover .single-portfolio-text-project span {
    bottom: 0;
    -webkit-transition-delay: 350ms;
    transition-delay: 350ms
}

.next-portfolio {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

.next-portfolio .single-portfolio-text-wrapper {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

.next-portfolio .single-portfolio-arrow.prev-portfolio-arrow::before {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0)
}

.next-portfolio .single-portfolio-text span {
    padding-left: 30px
}

.prev-portfolio .single-portfolio-text span {
    padding-right: 30px
}

.single-portfolio-text-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    max-width: 105px;
    width: 100%;
    background-color: #06B3BA;
    -webkit-transition: 350ms ease;
    transition: 350ms ease;
    -webkit-transition-delay: 350ms;
    transition-delay: 350ms
}

.single-portfolio-thumnail {
    width: 135px
}

.single-portfolio-arrow {
    height: 100%;
    text-align: center
}

.single-portfolio-arrow::before {
    display: block;
    width: 105px;
    font-size: 6.5px;
    line-height: 105px;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    -webkit-transition: 350ms ease;
    transition: 350ms ease
}

.single-portfolio-arrow.prev-portfolio-arrow::before {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.single-portfolio-text {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    max-width: 270px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-transition: 350ms ease;
    transition: 350ms ease
}

.single-portfolio-text-arrow,
.single-portfolio-text-project {
    line-height: 1;
    overflow: hidden
}

.single-portfolio-text-arrow span,
.single-portfolio-text-project span {
    position: relative;
    bottom: -100%;
    -webkit-transition: 350ms ease;
    transition: 350ms ease
}

.single-portfolio-text-arrow {
    height: 40px;
    margin: 0;
    font-family: "Playfair Display", serif;
    font-size: 36px
}

.single-portfolio-text-project {
    height: 16px;
    margin: 10px 0 0;
    color: #fff
}

.single-portfolio-count {
    position: relative;
    bottom: 141px;
    z-index: 301;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    padding: 25px 0;
    background-color: #06B3BA;
    border-radius: 100px
}

.single-portfolio-count .portfolio-cat {
    margin-right: 0
}

.single-portfolio-count .portfolio-cat:hover span::after {
    color: #fff
}

@media only screen and (max-width: 1650px) {
    .single-portfolio-count .portfolio-cat {
        bottom: 0 !important
    }
}

@media only screen and (max-width: 767px) {
    .single-portfolio-count .portfolio-cat {
        padding-left: 15px
    }
}

.single-portfolio-count .active-sp-count span {
    color: #fff
}

.single-portfolio-count .active-sp-count span small {
    color: #fff
}

.single-portfolio-count .active-sp-count span::after {
    color: #fff
}

.show-sp-nav {
    opacity: 1;
    visibility: visible
}

@media only screen and (max-width: 1023px) {
    .portoflio-page {
        padding-bottom: 0
    }
    .single-portfolio-slider-wrapper {
        position: relative;
        opacity: 1;
        visibility: visible;
        top: 0;
        padding: 42px 0 12px;
        margin-top: -1px;
        margin-bottom: -1px;
        background-color: #fff;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center
    }
    .portfolio-count-container {
        width: 100%;
        margin-bottom: -1px;
        padding-top: 30px;
        background-color: #fff
    }
    .single-portfolio-count {
        position: static;
        bottom: auto;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        max-width: 650px;
        margin: 0 auto 60px;
        width: 100%;
        border-radius: 25px
    }
    .portfolio-cat {
        margin: 5px 0
    }
}

@media only screen and (max-width: 768px) {
    .single-portoflio-slider-nav {
        height: 80px
    }
    .single-portfolio-thumnail {
        width: 103px
    }
    .single-portfolio-text-wrapper {
        max-width: 56px
    }
    .single-portfolio-arrow::before {
        width: 56px;
        font-size: 4.5px;
        line-height: 80px
    }
    .single-portfolio-text-arrow {
        height: 20px;
        font-size: 20px
    }
    .single-portfolio-text-project {
        height: 12px;
        font-size: 12px
    }
    .prev-portfolio .single-portfolio-text p,
    .next-portfolio .single-portfolio-text p {
        padding-right: 20px
    }
}

.mouse {
    position: absolute;
    width: 22px;
    height: 42px;
    bottom: 40px;
    left: 50%;
    margin-left: -12px;
    border-radius: 15px;
    border: 2px solid #888;
    -webkit-animation: intro 1s;
    animation: intro 1s;
    display: none;
    cursor: pointer;
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    transform: translate(-50%)
}

@media only screen and (max-width: 820px) {
    .mouse {
        bottom: 250px
    }
}

@media only screen and (max-width: 767px) {
    .mouse {
        display: none !important
    }
}

.scroll {
    width: 3px;
    height: 3px;
    margin: 6px auto;
    border-radius: 4px;
    background: #888;
    -webkit-animation: finger 1s infinite;
    animation: finger 1s infinite
}

.portfolio-project p {
    padding: 40px 60px 60px 40px;
    background: -webkit-linear-gradient(right, #06B3BAe0 50%, transparent 50%);
    background: linear-gradient(to left, #06B3BAe0 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: left bottom;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

@media only screen and (max-width: 769px) {
    .portfolio-project p {
        padding: 30px 15px 30px 15px
    }
}

.portfolio-project:hover p,
.portfolio-project:active p,
.portfolio-project:focus p {
    background-position: right bottom;
    box-shadow: inset 0 0 12px 2px #06B3BA
}

.careers-page {
    padding-top: 0
}

.careers-page .container {
    position: relative
}

.careers-page .section-title {
    margin: 0 0 15px
}

.careers-page .page-section {
    padding-top: 180px
}

.careers-page a.popart-btn {
    color: #333;
    text-decoration: none;
    margin-top: 60px
}

.careers-page p:last-of-type {
    margin-bottom: 60px
}

.careers-page .page-section:nth-of-type(even) .x-btn {
    right: 15px
}

.careers-page .page-section:nth-of-type(even) .section-content {
    margin-left: 25%;
    padding-right: 50px
}

@media only screen and (max-width: 1023px) {
    .careers-page .page-section:nth-of-type(even) .section-content {
        margin-left: 0;
        padding-right: 25%
    }
}

@media only screen and (max-width: 1023px) {
    .careers-page .section-content {
        width: 100%;
        padding-right: 25%
    }
}

.careers-page .closed p:first-of-type {
    display: -webkit-box;
    height: 58px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

.careers-page .closed p:first-of-type:after {
    content: '++++'
}

@media only screen and (max-width: 600px) {
    .careers-page .closed p:first-of-type {
        height: 48px
    }
    .careers-page a.popart-btn {
        margin-top: 30px
    }
    .careers-page .page-section:nth-of-type(even) .section-content {
        margin-left: 0
    }
}

.team-page {
    padding-top: 70px
}

.team-page .container {
    position: relative
}

@media only screen and (max-width: 1400px) {
    .team-page {
        padding-top: 0
    }
}

@media only screen and (max-width: 1025px) {
    .team-page {
        padding-bottom: 700px
    }
}

@media only screen and (max-width: 770px) {
    .team-page {
        padding-bottom: 550px
    }
}

@media only screen and (max-width: 500px) {
    .team-page {
        padding-bottom: 300px
    }
}

#dropper {
    position: fixed;
    width: 276px;
    height: 296px;
    border: 1px dashed transparent;
    top: 50%;
    right: 50px;
    overflow: hidden;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease
}

#dropper span {
    opacity: 0;
    color: #06B3BA;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease
}

#dropper:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: #06B3BA;
    -webkit-transform: translateX(-101%);
    -ms-transform: translateX(-101%);
    transform: translateX(-101%)
}

#dropper.show {
    border-color: #06B3BA;
    -webkit-transition: border-color 1ms ease 600ms, opacity 300ms ease;
    transition: border-color 1ms ease 600ms, opacity 300ms ease
}

#dropper.show span {
    opacity: 1;
    -webkit-transition: all 1ms ease 600ms;
    transition: all 1ms ease 600ms
}

#dropper.show:after {
    -webkit-transition: all 2000ms ease;
    transition: all 2000ms ease;
    -webkit-transform: translateX(101%);
    -ms-transform: translateX(101%);
    transform: translateX(101%)
}

#dropper.hide-alt {
    opacity: 0;
    visibility: hidden
}

@media only screen and (max-width: 1900px) {
    #dropper {
        right: 20px;
        width: 202px;
        height: 216px
    }
}

@media only screen and (max-width: 1440px) {
    #dropper {
        width: 132px;
        height: 146px
    }
}

@media only screen and (max-width: 1250px) {
    #dropper {
        display: none
    }
}

.team-info {
    max-width: 50%;
    margin-left: 50%;
    padding: 0 15px
}

@media only screen and (max-width: 1250px) {
    .team-info {
        max-width: 75%;
        margin-left: 25%;
        margin-bottom: 70px
    }
}

.team-wrapper {
    position: relative;
    padding-bottom: 500px
}

@media only screen and (max-width: 1650px) {
    .team-wrapper {
        padding-bottom: 250px
    }
}

@media only screen and (max-width: 1024px) {
    .team-wrapper {
        padding-bottom: 100px
    }
}

.t-first-row>div:first-child {
    top: 296px;
    left: -306px
}

.t-first-row>div:nth-child(2) {
    left: -306px
}

.t-first-row>div:nth-child(3) {
    top: 200px;
    left: 306px
}

@media only screen and (max-width: 1900px) {
    .t-first-row>div:first-child {
        left: 0
    }
    .t-first-row>div:nth-child(2) {
        left: 0
    }
}

@media only screen and (max-width: 1650px) {
    .t-first-row>div:first-child {
        top: 217px
    }
    .t-first-row>div:nth-child(3) {
        top: 150px;
        left: 232px
    }
}

@media only screen and (max-width: 1250px) {
    .t-first-row>div:first-child {
        top: 0
    }
    .t-first-row>div:nth-child(3) {
        top: 0;
        left: 0;
        margin-top: 30px
    }
}

.t-second-row>div:nth-child(2) {
    top: 260px
}

.t-second-row>div:nth-child(3) {
    top: 70px
}

.t-second-row>div:nth-child(4) {
    top: 190px
}

@media only screen and (max-width: 1250px) {
    .t-second-row>div:nth-child(2) {
        top: 0
    }
    .t-second-row>div:nth-child(3) {
        top: 0;
        margin-top: 30px
    }
    .t-second-row>div:nth-child(4) {
        top: 0;
        margin-top: 30px
    }
}

.t-third-row>div:nth-child(2) {
    top: -200px;
    left: 306px
}

.t-third-row>div:nth-child(3) {
    top: -300px;
    left: 306px
}

@media only screen and (max-width: 1650px) {
    .t-third-row>div:nth-child(2) {
        left: 232px
    }
    .t-third-row>div:nth-child(3) {
        left: 232px
    }
}

@media only screen and (max-width: 1250px) {
    .t-third-row>div:first-child {
        -webkit-transform: translateY(-webkit-calc(100% + 30px));
        -ms-transform: translateY(calc(100% + 30px));
        transform: translateY(calc(100% + 30px))
    }
    .t-third-row>div:nth-child(2) {
        left: 0;
        top: 0
    }
    .t-third-row>div:nth-child(3) {
        left: 0;
        top: 0;
        margin-top: 30px;
        -webkit-transform: translateX(100%);
        -ms-transform: translateX(100%);
        transform: translateX(100%)
    }
}

.team-mid-row {
    position: relative;
    width: 50%;
    margin: 150px 0
}

.team-mid-row p {
    font-size: 72px;
    font-family: "Playfair Display", serif;
    color: #333;
    margin: 0;
    position: relative;
    z-index: 1;
    line-height: 1.2
}

.team-mid-row.tmr-1 {
    margin-left: 25%
}

.team-mid-row.tmr-1 span {
    left: 100px;
    top: 60px
}

@media only screen and (max-width: 1250px) {
    .team-mid-row.tmr-1 span {
        left: 0;
        top: -40px
    }
}

.team-mid-row.tmr-2 {
    margin-top: 400px
}

.team-mid-row.tmr-2 span {
    left: -130px;
    top: -60px
}

@media only screen and (max-width: 1250px) {
    .team-mid-row.tmr-2 {
        margin-top: 90px;
        margin-left: 50%
    }
    .team-mid-row.tmr-2 span {
        left: 0;
        top: -40px
    }
}

@media only screen and (max-width: 1900px) {
    .team-mid-row p {
        font-size: 60px
    }
}

@media only screen and (max-width: 1650px) {
    .team-mid-row p {
        font-size: 50px
    }
}

@media only screen and (max-width: 1250px) {
    .team-mid-row {
        margin: 90px 0
    }
    .team-mid-row p {
        font-size: 30px
    }
}

.team-member-container {
    position: relative;
    z-index: 10;
    width: 25%;
    float: left;
    padding: 0 15px
}

.team-member-container.dropped {
    opacity: .5;
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-transition: all 400ms ease;
    transition: all 400ms ease
}

.team-member-container.last-moved {
    z-index: 101
}

.team-member-container.ui-draggable-dragging .team-member .write-text .outer-wrapper .inner-wrapper {
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%)
}

.team-member-container.ui-draggable-dragging .team-member .member-thumb:after {
    width: 100%
}

@media only screen and (max-width: 1250px) {
    .team-member-container {
        width: 50%;
        padding: 0 7px
    }
}

.team-member {
    position: relative;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    cursor: -webkit-grab;
    cursor: grab
}

.team-member .member-thumb {
    position: relative;
    overflow: hidden
}

.team-member .member-thumb:after {
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    display: block;
    width: 0;
    height: 100%;
    background-color: rgba(250, 204, 22, 0.5);
    -webkit-transition: all 600ms ease;
    transition: all 600ms ease
}

@supports (mix-blend-mode: multiply) {
    .team-member .member-thumb:after {
        background-color: #06B3BA;
        mix-blend-mode: multiply
    }
}

.team-member img {
    display: block
}

.team-member .member-info-wrapp {
    position: absolute;
    margin: 20px 0 0 10px
}

.team-member h3 {
    font-family: "Poppins", sans-serif;
    color: #333;
    margin: 0;
    line-height: 1.2;
    font-size: 24px;
    font-weight: 500
}

.team-member p {
    display: none
}

.team-member .write-text .outer-wrapper .inner-wrapper {
    -webkit-transition: all 600ms cubic-bezier(0.85, 0.1, 0.25, 1);
    transition: all 600ms cubic-bezier(0.85, 0.1, 0.25, 1)
}

.team-member:hover .write-text .outer-wrapper .inner-wrapper {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
}

.team-member:hover span .write-text .outer-wrapper .inner-wrapper {
    -webkit-transition: all 600ms cubic-bezier(0.85, 0.1, 0.25, 1) 200ms;
    transition: all 600ms cubic-bezier(0.85, 0.1, 0.25, 1) 200ms
}

.team-member:hover .member-thumb:after {
    width: 100%
}

@media only screen and (max-width: 1250px) {
    .team-member .member-info-wrapp {
        position: relative;
        margin: 15px 0 0 10px
    }
    .team-member img {
        width: 100%
    }
    .team-member h3 {
        font-size: 14px
    }
    .team-member .job-position {
        font-size: 12px;
        display: block;
        margin-top: 5px
    }
    .team-member .write-text .outer-wrapper .inner-wrapper {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
    .team-member .member-thumb:after {
        content: none
    }
}

@media only screen and (max-width: 1250px) {
    .team-member .job-position {
        white-space: nowrap;
        font-size: 11px
    }
}

#team-popup {
    position: fixed;
    z-index: 20000;
    width: 0;
    height: 100%;
    right: 0;
    top: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #333;
    -webkit-transition: width 1ms 300ms;
    transition: width 1ms 300ms;
    -webkit-perspective: 1000px;
    perspective: 1000px
}

#team-popup:before,
#team-popup:after {
    content: '';
    display: block
}

#team-popup:before {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    z-index: 1;
    opacity: 0;
    -webkit-transition: width 1ms 600ms, opacity 500ms ease;
    transition: width 1ms 600ms, opacity 500ms ease
}

@supports (mix-blend-mode: multiply) {
    #team-popup:before {
        background: #06B3BA;
        mix-blend-mode: multiply
    }
}

#team-popup:after {
    background-color: #333;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    width: 270vw;
    height: 270vw;
    margin-top: -125vw;
    margin-left: -125vw;
    z-index: -1;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: transform 800ms ease-in-out 300ms, opacity 300ms ease;
    -webkit-transition: opacity 300ms ease, -webkit-transform 800ms ease-in-out 300ms;
    transition: opacity 300ms ease, -webkit-transform 800ms ease-in-out 300ms;
    transition: transform 800ms ease-in-out 300ms, opacity 300ms ease;
    transition: transform 800ms ease-in-out 300ms, opacity 300ms ease, -webkit-transform 800ms ease-in-out 300ms
}

#team-popup .team-img-wrapper {
    height: 100%;
    width: 100%;
    right: -60vw;
    bottom: 0;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    -webkit-transition: 3s cubic-bezier(0.19, 1, 0.22, 1), opacity 2s linear 0.5s;
    transition: 3s cubic-bezier(0.19, 1, 0.22, 1), opacity 2s linear 0.5s
}

#team-popup img {
    position: absolute;
    max-height: 100%;
    width: initial;
    max-width: 100%;
    bottom: -70px;
    right: 170px;
    -webkit-transition: 1.5s cubic-bezier(0.19, 1, 0.22, 1);
    transition: 1.5s cubic-bezier(0.19, 1, 0.22, 1)
}

#team-popup .member-info {
    max-width: 450px;
    color: #fff;
    position: absolute;
    left: 18.5%;
    bottom: 25%;
    z-index: 1
}

#team-popup .member-info h3 {
    margin: 0 0 30px;
    font-size: 48px;
    color: #fff
}

#team-popup .member-info>span {
    font-size: 26px;
    display: block;
    margin-bottom: 20px
}

#team-popup .member-info p {
    margin: 0;
    font-size: 14px
}

#team-popup .inner-wrapper {
    opacity: 0;
    -webkit-transition: opacity 500ms ease, transform 1ms 1100ms;
    -webkit-transition: opacity 500ms ease, -webkit-transform 1ms 1100ms;
    transition: opacity 500ms ease, -webkit-transform 1ms 1100ms;
    transition: opacity 500ms ease, transform 1ms 1100ms;
    transition: opacity 500ms ease, transform 1ms 1100ms, -webkit-transform 1ms 1100ms
}

#team-popup .close-btn {
    line-height: 1;
    display: block;
    background-color: #06B3BA;
    color: #333;
    font-size: 33px;
    width: 70px;
    height: 70px;
    text-align: center;
    padding: 16px 0;
    border-radius: 50%;
    position: absolute;
    top: 50px;
    right: 50px;
    z-index: 10;
    cursor: pointer;
    -webkit-transition: all 350ms ease;
    transition: all 350ms ease;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0)
}

#team-popup.open {
    width: 100%;
    -webkit-transition: width 1ms 800ms;
    transition: width 1ms 800ms;
    background-size: cover
}

#team-popup.open:after {
    opacity: 0;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: transform 800ms ease-in-out, opacity 400ms ease 1000ms;
    -webkit-transition: opacity 400ms ease 1000ms, -webkit-transform 800ms ease-in-out;
    transition: opacity 400ms ease 1000ms, -webkit-transform 800ms ease-in-out;
    transition: transform 800ms ease-in-out, opacity 400ms ease 1000ms;
    transition: transform 800ms ease-in-out, opacity 400ms ease 1000ms, -webkit-transform 800ms ease-in-out
}

#team-popup.open:before {
    opacity: 1;
    width: 100%;
    -webkit-transition: width 800ms ease 1400ms;
    transition: width 800ms ease 1400ms
}

#team-popup.open .inner-wrapper {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
}

#team-popup.open h3 .inner-wrapper {
    -webkit-transition: transform 800ms cubic-bezier(0.85, 0.1, 0.25, 1) 2200ms;
    -webkit-transition: -webkit-transform 800ms cubic-bezier(0.85, 0.1, 0.25, 1) 2200ms;
    transition: -webkit-transform 800ms cubic-bezier(0.85, 0.1, 0.25, 1) 2200ms;
    transition: transform 800ms cubic-bezier(0.85, 0.1, 0.25, 1) 2200ms;
    transition: transform 800ms cubic-bezier(0.85, 0.1, 0.25, 1) 2200ms, -webkit-transform 800ms cubic-bezier(0.85, 0.1, 0.25, 1) 2200ms
}

#team-popup.open .job-position .inner-wrapper {
    -webkit-transition: transform 800ms cubic-bezier(0.85, 0.1, 0.25, 1) 2500ms;
    -webkit-transition: -webkit-transform 800ms cubic-bezier(0.85, 0.1, 0.25, 1) 2500ms;
    transition: -webkit-transform 800ms cubic-bezier(0.85, 0.1, 0.25, 1) 2500ms;
    transition: transform 800ms cubic-bezier(0.85, 0.1, 0.25, 1) 2500ms;
    transition: transform 800ms cubic-bezier(0.85, 0.1, 0.25, 1) 2500ms, -webkit-transform 800ms cubic-bezier(0.85, 0.1, 0.25, 1) 2500ms
}

#team-popup.open p .inner-wrapper {
    -webkit-transition: transform 800ms cubic-bezier(0.85, 0.1, 0.25, 1) 2800ms;
    -webkit-transition: -webkit-transform 800ms cubic-bezier(0.85, 0.1, 0.25, 1) 2800ms;
    transition: -webkit-transform 800ms cubic-bezier(0.85, 0.1, 0.25, 1) 2800ms;
    transition: transform 800ms cubic-bezier(0.85, 0.1, 0.25, 1) 2800ms;
    transition: transform 800ms cubic-bezier(0.85, 0.1, 0.25, 1) 2800ms, -webkit-transform 800ms cubic-bezier(0.85, 0.1, 0.25, 1) 2800ms
}

#team-popup.open .close-btn {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: transform 350ms ease 3600ms;
    -webkit-transition: -webkit-transform 350ms ease 3600ms;
    transition: -webkit-transform 350ms ease 3600ms;
    transition: transform 350ms ease 3600ms;
    transition: transform 350ms ease 3600ms, -webkit-transform 350ms ease 3600ms
}

#team-popup.open .close-btn:hover {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-transition: transform 350ms ease;
    -webkit-transition: -webkit-transform 350ms ease;
    transition: -webkit-transform 350ms ease;
    transition: transform 350ms ease;
    transition: transform 350ms ease, -webkit-transform 350ms ease
}

@media only screen and (max-width: 1649px) {
    #team-popup .member-info {
        left: 50px;
        bottom: 50px
    }
}

@media only screen and (max-width: 1250px) {
    #team-popup {
        left: 0;
        margin: 0 auto
    }
}

@media only screen and (max-width: 767px) {
    #team-popup .member-info {
        left: 0;
        top: 50px;
        bottom: auto;
        padding: 0 15px
    }
    #team-popup .member-info h3 {
        margin: 0 0 15px;
        font-size: 30px
    }
    #team-popup .member-info>span {
        font-size: 17px;
        margin-bottom: 10px
    }
    #team-popup .member-info p {
        font-size: 13px
    }
    #team-popup .close-btn {
        top: 20px;
        right: 20px
    }
    #team-popup img {
        bottom: 0;
        right: 0;
        -webkit-transform: none !important;
        -ms-transform: none !important;
        transform: none !important
    }
}

.no-background-blend-mode .team-member .member-thumb:after,
.no-background-blend-mode #team-popup.open:before {
    opacity: 0.3
}

.mix-blend-mode-no .team-member .member-thumb:after {
    background-color: transparent;
    mix-blend-mode: multiply
}

.section-head h2 {
    margin-bottom: 100px
}

@media only screen and (max-width: 1250px) {
    .section-head h2 {
        margin-bottom: 80px
    }
}

@media only screen and (max-width: 767px) {
    .section-head h2 {
        margin-bottom: 40px
    }
}

.company-addresses {
    width: 50%;
    float: right;
    margin-bottom: 120px;
    clear: both
}

@media only screen and (max-width: 1650px) {
    .company-addresses {
        margin-bottom: 90px
    }
}

@media only screen and (max-width: 1023px) {
    .company-addresses {
        margin-bottom: 60px
    }
}

@media only screen and (max-width: 767px) {
    .company-addresses {
        width: 100%;
        float: none;
        padding-left: 25%;
        margin-bottom: 20px
    }
}

.country-1 span.bigletter {
    left: -130px;
    top: -20px
}

.country-2 {
    padding-left: 50%
}

.country-2 .company-col {
    width: 100%
}

.country-2 span.bigletter {
    left: -175px;
    top: 0
}

@media only screen and (max-width: 1023px) {
    .country-2 {
        padding-left: 0
    }
    .country-2 span.bigletter {
        left: -95px;
        top: 10px
    }
}

.country-3 span.bigletter {
    left: 100%;
    top: -20px
}

h2.country {
    font-size: 26px;
    font-family: "Poppins", sans-serif;
    margin-bottom: 45px;
    z-index: 10;
    position: relative;
    font-weight: 600
}

@media only screen and (max-width: 1023px) {
    h2.country {
        margin-bottom: 35px
    }
}

@media only screen and (max-width: 767px) {
    h2.country {
        margin-bottom: 20px
    }
}

.company-col {
    width: 50%;
    float: left;
    font-size: 14px;
    padding-left: 10px;
    position: relative
}

.company-col h3 {
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    margin: 0
}

.company-col ul li {
    padding-left: 0;
    margin-bottom: 0;
    line-height: 2.2
}

.company-col ul li:before {
    content: none
}

.company-col a {
    color: #06B3BA;
    display: inline-block
}

.company-col a:after {
    content: '';
    width: 0;
    height: 1px;
    background-color: #06B3BA;
    display: block;
    -webkit-transition: all 0.35s ease-out;
    transition: all 0.35s ease-out
}

.company-col a:hover:after {
    width: 100%
}

.company-col.offset-col {
    position: absolute;
    width: -webkit-calc(50% - 606px);
    width: calc(50% - 606px);
    right: 0
}

@media only screen and (max-width: 1650px) {
    .company-col {
        float: none;
        margin-bottom: 50px
    }
    .company-col.offset-col {
        position: static;
        width: 50%
    }
}

@media only screen and (max-width: 1023px) {
    .company-col {
        width: 100%
    }
}

.maps {
    width: -webkit-calc(50% - 306px);
    width: calc(50% - 306px);
    background-color: #CAFBFF;
    overflow: hidden;
    position: absolute;
    height: 600px;
    left: 0;
    top: 0
}

.maps.fix-map {
    position: fixed;
    z-index: 99
}

.maps.bottom-map {
    position: absolute;
    top: auto;
    bottom: 0
}

@media only screen and (max-width: 1650px) {
    .maps {
        width: -webkit-calc(50% - 233px);
        width: calc(50% - 233px);
        height: 400px
    }
}

@media only screen and (max-width: 1023px) {
    .maps {
        width: -webkit-calc(50% - 149px);
        width: calc(50% - 149px)
    }
}

@media only screen and (max-width: 767px) {
    .maps {
        width: 100%;
        position: relative
    }
}

@media only screen and (max-width: 600px) {
    .maps {
        height: 200px
    }
    #scrollspy, #masthead{
        display: none;
    }
    #homewebdev{
        padding-top:2600px !important;
    }
}


.map-holder {
    left: 0;
    top: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: all 0.8s ease-out;
    transition: all 0.8s ease-out;
    background-color: #06B3BA
}

.map-holder.active {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0)
}

.company-info .company-info-holder {
    position: relative
}

.company-info .company-info-holder .section-content {
    width: 50%;
    float: right
}

@media only screen and (max-width: 767px) {
    .company-info .company-info-holder .section-content {
        width: 100%;
        float: none;
        padding-left: 25%;
        margin-left: 0
    }
}

#map-1,
#map-2,
#map-3,
#map-4 {
    width: 100%;
    height: 100%
}

@media only screen and (max-width: 1250px) {
    .company-info .company-info-holder .section-content {
        margin-left: 25%
    }
}

@media only screen and (max-width: 1023px) {
    .country-1 span.bigletter,
    .country-2 span.bigletter,
    .country-3 span.bigletter {
        left: -141px;
        top: -60px;
        text-align: center;
        width: 134px
    }
    .country-1 span.bigletter span,
    .country-2 span.bigletter span,
    .country-3 span.bigletter span {
        display: block
    }
}

@media only screen and (max-width: 767px) {
    .company-addresses {
        padding-left: 0
    }
    .company-info .company-info-holder .section-content {
        padding-left: 0;
        margin-left: 0
    }
    .company-info .company-info-holder .section-content p {
        padding-left: 10px
    }
}

.clients-page {
    padding: 60px 0 400px;
    overflow: hidden
}

.clients-page ul {
    float: left;
    font-size: 14px;
    position: relative;
    z-index: 1
}

.clients-page ul li {
    padding-left: 0
}

.clients-page ul li:before {
    content: none
}

.clients-page h2 {
    position: relative;
    font-size: 26px;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    margin: 0 0 25px;
    padding-right: 14px
}

@media only screen and (max-width: 767px) {
    .clients-page {
        padding: 60px 0 100px
    }
}

.clients-info {
    max-width: 45%;
    margin-bottom: 20px
}

.clients-info p {
    margin: 0
}

@media only screen and (max-width: 767px) {
    .clients-info {
        max-width: 100%
    }
}

.clients-row {
    position: relative;
    padding-top: 140px
}

.clients-row:nth-child(2) .bigletter {
    top: 60px;
    left: 205px
}

.clients-row:nth-child(3) .bigletter {
    top: 230px;
    right: -120px
}

@media only screen and (max-width: 1120px) {
    .clients-row:nth-child(3) .bigletter {
        top: 248px;
        right: -32px
    }
}

.clients-row:nth-child(4) .bigletter {
    top: 160px;
    left: 130px
}

.clients-row:nth-child(5) .bigletter {
    right: 206px;
    bottom: -240px
}

.clients-row:nth-child(6) .bigletter {
    top: 160px;
    right: -142px
}

@media only screen and (max-width: 1120px) {
    .clients-row:nth-child(6) .bigletter {
        right: -54px
    }
}

@media only screen and (max-width: 767px) {
    #main .clients-row:nth-child(2) .bigletter,
    #main .clients-row:nth-child(3) .bigletter,
    #main .clients-row:nth-child(4) .bigletter,
    #main .clients-row:nth-child(5) .bigletter,
    #main .clients-row:nth-child(6) .bigletter {
        top: 60px;
        left: 25%;
        right: auto;
        bottom: auto
    }
}

@media only screen and (max-width: 600px) {
    #main .clients-row:nth-child(2) .bigletter,
    #main .clients-row:nth-child(3) .bigletter,
    #main .clients-row:nth-child(4) .bigletter,
    #main .clients-row:nth-child(5) .bigletter,
    #main .clients-row:nth-child(6) .bigletter {
        top: 90px
    }
}

.clients-row-half {
    float: left;
    width: 50%
}

.clients-row-half ul {
    width: 50%
}

@media only screen and (max-width: 1023px) {
    .clients-row-half ul {
        width: 100%;
        float: none
    }
}

@media only screen and (max-width: 767px) {
    .clients-row-half {
        width: 100%;
        float: none
    }
}

.clients-row-full {
    clear: both
}

.clients-row-full ul {
    width: 25%
}

.clients-row-full ul:first-of-type {
    margin-left: 25%
}

.clients-row-full h2 {
    margin-left: 25%
}

@media only screen and (max-width: 767px) {
    .clients-row-full ul {
        width: 100%
    }
    .clients-row-full ul:first-of-type {
        margin-left: 0
    }
    .clients-row-full h2 {
        margin-left: 0
    }
}

.clients-box {
    position: relative;
    padding: 85px;
    width: 200%;
    margin-top: 140px;
    color: #333
}

.clients-box div {
    width: 50%;
    margin-top: 60px
}

.clients-box h3 {
    font-size: 48px;
    margin: 0 0 75px;
    line-height: 1.2;
    word-wrap: break-word
}

.clients-box p {
    margin-bottom: 15px
}

.clients-box span {
    font-size: 12px;
    display: block;
    font-weight: 700
}

.clients-box:before {
    content: '';
    position: absolute;
    background-color: #06B3BA;
    height: 100%;
    top: 0;
    left: 0;
    right: -100%;
    z-index: -1
}

@media only screen and (max-width: 1650px) {
    .clients-box h3 {
        font-size: 38px;
        width: 75%
    }
}

@media only screen and (max-width: 1250px) {
    .clients-box h3 {
        width: 45%
    }
}

@media only screen and (max-width: 1023px) {
    .clients-box {
        padding: 50px;
        font-size: 14px;
        margin-top: 50px
    }
    .clients-box div {
        margin-top: 20px
    }
    .clients-box h3 {
        font-size: 28px;
        margin-bottom: 0;
        width: 50%
    }
}

@media only screen and (max-width: 767px) {
    .clients-box {
        width: 100%
    }
    .clients-box h3,
    .clients-box div {
        width: 100%
    }
    .clients-box:before {
        right: 0
    }
}

@media only screen and (max-width: 600px) {
    .about-us .page-section.content-divide>.reverse-container {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse
    }
    .about-us .page-section.content-divide>.reverse-container .section-image {
        margin-left: -30px
    }
}

.about-testimonials {
    margin-top: -15px;
    width: 25%;
    -webkit-transform: translateX(305px);
    -ms-transform: translateX(305px);
    transform: translateX(305px)
}

.about-testimonials span {
    display: block
}

.about-testimonials span span:first-child {
    font-size: 130px;
    font-family: "Playfair Display", serif;
    font-weight: 700;
    color: #06B3BA;
    line-height: 1
}

.about-testimonials span span:last-child {
    margin-top: 30px;
    color: #333;
    text-transform: uppercase
}

@media only screen and (max-width: 1649px) {
    .about-testimonials {
        width: 20%;
        -webkit-transform: translateX(230px);
        -ms-transform: translateX(230px);
        transform: translateX(230px)
    }
    .about-testimonials span span:first-child {
        font-size: 90px
    }
}

@media only screen and (max-width: 1023px) {
    .about-testimonials {
        width: 100%;
        float: none;
        margin-bottom: 30px;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        display: -webkit-flex;
        display: -moz-flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

@media only screen and (max-width: 600px) {
    .about-testimonials {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-top: -80px;
        margin-bottom: 80px;
        padding-left: 25%
    }
    .about-testimonials span span:first-child {
        font-size: 70px
    }
    .about-testimonials span span:last-child {
        margin-top: 20px
    }
}

.clients-slider {
    position: relative
}

.clients-slider .head-clients {
    margin-left: 25%;
    position: relative;
    margin-bottom: 110px
}

.clients-slider .head-clients span.bigletter {
    bottom: 3px;
    left: -143px;
    z-index: -1
}

.clients-slider .clients-slide li {
    padding-left: 0;
    margin-bottom: 100px;
    float: left;
    vertical-align: middle;
    width: 16.5%;
    height: 70px;
    position: relative;
    overflow: hidden
}

.clients-slider .clients-slide li:before {
    content: none
}

.clients-slider .clients-slide li img {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.clients-slider .clients-slide #clientslogo li img:first-child {
    top: 50%;
    -webkit-transition: top 350ms ease-out 350ms;
    transition: top 350ms ease-out 350ms
}

.clients-slider .clients-slide #clientslogo li img:last-child {
    top: 150%;
    -webkit-transition: top 350ms ease-out;
    transition: top 350ms ease-out
}

.clients-slider .clients-slide #clientslogo li img.switch:first-child {
    top: 150%;
    -webkit-transition: top 350ms ease-out;
    transition: top 350ms ease-out
}

.clients-slider .clients-slide #clientslogo li img.switch:last-child {
    top: 50%;
    -webkit-transition: top 350ms ease-out 350ms;
    transition: top 350ms ease-out 350ms
}

.clients-slider .clients-slide #clientslogo li.active {
    margin-bottom: 10px;
    height: 180px;
    -webkit-transition: all 350ms ease;
    transition: all 350ms ease
}

.clients-slider .clients-slide #clientslogo li.active img:first-child,
.clients-slider .clients-slide #clientslogo li.active img:last-child {
    top: 20%;
    -webkit-transition: all 350ms ease;
    transition: all 350ms ease
}

.clients-slider .clients-slide #clientslogo li.active img:last-child {
    top: 70%
}

.clients-slider .clients-logo-onama {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-pack: center !important;
    -webkit-justify-content: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important
}

@media only screen and (max-width: 767px) {
    .clients-slider .clients-logo-onama {
        -webkit-box-pack: justify !important;
        -webkit-justify-content: space-between !important;
        -ms-flex-pack: justify !important;
        justify-content: space-between !important
    }
}

.clients-slider .clients-logo-onama li {
    width: -webkit-calc(100% / 6);
    width: calc(100% / 6)
}

@media only screen and (max-width: 1024px) {
    .clients-slider .clients-logo-onama li {
        width: 15%
    }
}

@media only screen and (max-width: 1250px) {
    .clients-slider .head-clients span.bigletter {
        left: -6px;
        bottom: 24px
    }
}

@media only screen and (max-width: 1023px) {
    .clients-slider .clients-slide li {
        width: 33%
    }
}

@media only screen and (max-width: 600px) {
    .clients-slider .head-clients {
        margin-left: 0;
        margin-bottom: 30px
    }
    .clients-slider .head-clients span.bigletter {
        left: -5px;
        top: -43px
    }
    .clients-slider .clients-slide #clientslogo {
        padding: 0 45px
    }
    .clients-slider .clients-slide #clientslogo li {
        margin-bottom: 30px
    }
    .clients-slider .clients-slide #clientslogo li img {
        max-width: 70px
    }
}

.clients-slider .draggable-btn {
    margin: 0 auto
}

.about-section-images {
    padding-top: 0
}

.about-section-images .section-image {
    width: 100%;
    padding: 0;
    margin: 0
}

.about-section-images .section-image img {
    margin: 0
}

.about-section-images .about-image {
    cursor: auto
}

.about-section-images .about-image:nth-child(3) {
    margin-top: 93px
}

@media only screen and (max-width: 1650px) {
    .about-section-images .about-image:nth-child(3) {
        margin-top: 93px
    }
}

@media only screen and (max-width: 600px) {
    .about-section-images {
        margin-top: 0
    }
    .about-section-images .about-image {
        float: none;
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px
    }
    .about-section-images .about-image:first-of-type {
        padding-right: 15px;
        padding-left: 15px
    }
}

.awards-section.clients-slider .head-clients span.bigletter {
    bottom: -52px;
    left: -143px;
    z-index: -1
}

.awards-section.clients-slider .clients-slide li {
    width: 22%
}

.awards-section.clients-slider .clients-logos-wrapper {
    position: relative
}

.awards-section.clients-slider .clients-logos-wrapper .draggable-btn {
    position: absolute;
    -webkit-transform: translate(50%, -50%);
    -ms-transform: translate(50%, -50%);
    transform: translate(50%, -50%);
    right: 0;
    top: 50%;
    padding: 0
}

@media only screen and (max-width: 1250px) {
    .awards-section.clients-slider .head-clients span.bigletter {
        left: -6px;
        bottom: -14px
    }
}

@media only screen and (max-width: 767px) {
    .awards-section.clients-slider .clients-logos-wrapper .draggable-btn {
        position: static;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

@media only screen and (max-width: 600px) {
    .awards-section.clients-slider .head-clients span.bigletter {
        left: -5px
    }
    .awards-section.clients-slider .clients-slide li {
        width: 50%;
        margin-bottom: 0
    }
    .awards-section.clients-slider .clients-slide li img {
        left: 0;
        -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        transform: translate(0, -50%);
        max-width: 50%;
        max-height: 100%;
        margin: 0 auto;
        display: block;
        position: relative
    }
    .awards-section.clients-slider .clients-slide li:first-child {
        margin-top: 0
    }
}

.clients-slider .clients-logo-onama {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

@media only screen and (max-width: 767px) {
    .awards-section.clients-slider .clients-slide li {
        width: 33%
    }
}

@media only screen and (max-width: 600px) {
    .awards-section.clients-slider .clients-slide li {
        width: 50%
    }
}

@media only screen and (max-width: 767px) {
    .awards-section .clients-logo-onama li {
        width: 100% !important;
        margin-bottom: 30px !important
    }
}

.tutorial-section ul li {
    margin-bottom: 280px;
    padding-left: 0
}

.tutorial-section ul li:first-child {
    margin-top: 0
}

.tutorial-section ul li::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 30px;
    right: 20px;
    width: 30px;
    height: 2px;
    border-radius: 0;
    background-color: #333;
    -webkit-transition: 350ms ease;
    transition: 350ms ease
}

.tutorial-section ul li::before {
    content: '';
    display: block;
    position: absolute;
    top: auto;
    left: auto;
    bottom: 16px;
    right: 34px;
    width: 2px;
    height: 30px;
    border-radius: 0;
    background-color: #333;
    -webkit-transition: 350ms ease;
    transition: 350ms ease
}

.tutorial-section ul li:hover::after,
.tutorial-section ul li:hover::before {
    background-color: #fff
}

.tutorial-section .tutorial-link-image {
    cursor: auto
}

.tutorial-section .tutorial-link-image::after,
.tutorial-section .tutorial-link-image::before {
    display: none
}

.tutorial-section .section-title {
    margin-bottom: 90px
}

.tutorial-link-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start
}

.tutorial-link {
    width: 280px;
    height: 300px;
    margin: 0 -webkit-calc((25% - 280px) / 2);
    margin: 0 calc((25% - 280px) / 2);
    background-color: #06B3BA;
    overflow: hidden
}

.tutorial-link h2 {
    width: 100%;
    height: 100%;
    margin: 0
}

.tutorial-link a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    height: 100%;
    width: 100%;
    padding: 30px;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1
}

.tutorial-link a::after {
    content: attr(data-hover-text);
    display: block;
    position: absolute;
    top: 110%;
    left: 0;
    width: 220px;
    color: #fff;
    line-height: 1.4;
    -webkit-transition: 350ms ease;
    transition: 350ms ease
}

.tutorial-link a:hover .tutorial-link-text span {
    -webkit-transform: translateY(-110%);
    -ms-transform: translateY(-110%);
    transform: translateY(-110%)
}

.tutorial-link a:hover .tutorial-link-text::after {
    top: 0
}

.tutorial-link img {
    position: absolute;
    top: 0;
    left: 0
}

.tutorial-link:nth-child(2),
.tutorial-link:nth-child(6) {
    bottom: -150px
}

.tutorial-link:nth-child(7) {
    top: -140px
}

.tutorial-link:nth-child(8) {
    bottom: -80px
}

.tutorial-link:nth-child(9) {
    top: -130px
}

.tutorial-link:nth-child(10) {
    top: -280px;
    right: -25%
}

.tutorial-link:nth-child(11) {
    bottom: -120px
}

.tutorial-link-text {
    display: block;
    position: relative;
    padding: 5px 0;
    overflow: hidden;
    font-family: "PoppinsBold", sans-serif
}

.tutorial-link-text::after {
    content: attr(data-hover-text);
    display: block;
    position: absolute;
    left: 0;
    top: 100%;
    padding: 5px 0;
    color: #fff;
    -webkit-transition: 350ms ease;
    transition: 350ms ease
}

.tutorial-link-text span {
    display: block;
    position: relative;
    left: 0;
    top: 0;
    padding: 5px 0;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: 350ms ease;
    transition: 350ms ease
}

.tutorial-list-wrapper .section-title {
    margin-bottom: 90px
}

.tutorial-list-wrapper ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap
}

.tutorial-list-wrapper ul li {
    -webkit-flex-basis: -webkit-calc(50% - 90px);
    -ms-flex-preferred-size: calc(50% - 90px);
    flex-basis: calc(50% - 90px);
    margin: 0 90px 30px 0;
    padding: 0;
    background-color: #06B3BA;
    border-radius: 80px
}

.tutorial-list-wrapper ul li:first-child {
    margin-top: 0
}

.tutorial-list-wrapper ul li:last-child {
    margin-bottom: 30px
}

.tutorial-list-wrapper ul li::before {
    display: none
}

.tutorial-list-wrapper .tutorial-list-text {
    display: block;
    position: relative;
    margin-top: 3px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    overflow: hidden;
    font-family: "PoppinsBold", sans-serif
}

.tutorial-list-wrapper .tutorial-list-text::after {
    content: attr(data-hover-text);
    display: block;
    position: absolute;
    left: 0;
    top: 100%;
    color: #fff;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    -webkit-transition: 350ms ease;
    transition: 350ms ease
}

.tutorial-list-wrapper .tutorial-list-text span {
    display: block;
    position: relative;
    left: 0;
    top: 0;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: 350ms ease;
    transition: 350ms ease
}

.tutorial-list-wrapper a {
    display: block;
    padding: 30px
}

.tutorial-list-wrapper a:hover .tutorial-list-text::after {
    top: 0
}

.tutorial-list-wrapper a:hover .tutorial-list-text span {
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%)
}

.tutorial-list-wrapper a:hover::after,
.tutorial-list-wrapper a:hover::before {
    background-color: #fff
}

.tutorial-list-wrapper a::after,
.tutorial-list-wrapper a::before {
    content: '';
    display: block;
    position: absolute;
    bottom: 50%;
    right: 20px;
    width: 30px;
    height: 2px;
    border-radius: 0;
    background-color: #333;
    -webkit-transform: translateY(50%);
    -ms-transform: translateY(50%);
    transform: translateY(50%);
    -webkit-transition: 350ms ease;
    transition: 350ms ease
}

.tutorial-list-wrapper a::before {
    right: 34px;
    width: 2px;
    height: 30px
}

@media only screen and (max-width: 1649px) {
    .tutorial-link {
        width: 200px;
        height: 210px;
        margin: 0 -webkit-calc((25% - 200px) / 2);
        margin: 0 calc((25% - 200px) / 2)
    }
    .tutorial-link a {
        font-size: 24px
    }
    .tutorial-list-wrapper a {
        padding: 20px 110px 20px 50px;
        line-height: 1.4
    }
}

@media only screen and (max-width: 1250px) {
    .tutorial-section ul li {
        margin-bottom: 30px
    }
    .tutorial-link {
        width: -webkit-calc(50% - 30px);
        width: calc(50% - 30px);
        margin: 0 15px
    }
    .tutorial-link:nth-child(2),
    .tutorial-link:nth-child(6),
    .tutorial-link:nth-child(7),
    .tutorial-link:nth-child(8),
    .tutorial-link:nth-child(9),
    .tutorial-link:nth-child(10),
    .tutorial-link:nth-child(11) {
        bottom: auto;
        top: auto;
        right: auto;
        left: auto
    }
    .tutorial-link img {
        top: -50%;
        width: 100%
    }
    .tutorial-list-wrapper ul li {
        -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        margin: 0 0 30px 0
    }
}

@media only screen and (max-width: 1023px) {
    .tutorial-link img {
        top: 0
    }
}

@media only screen and (max-width: 600px) {
    .tutorial-section ul li::after {
        bottom: 25px;
        right: 11px;
        width: 20px
    }
    .tutorial-section ul li::before {
        bottom: 16px;
        right: 20px;
        height: 20px
    }
    .tutorial-link {
        height: 140px;
        width: -webkit-calc(50% - 10px);
        width: calc(50% - 10px);
        margin: 0
    }
    .tutorial-link:nth-child(2n+2) {
        margin-left: 20px
    }
    .tutorial-link a {
        font-size: 12px;
        padding: 15px
    }
    .tutorial-list-wrapper a {
        padding: 15px 50px 15px 15px
    }
    .tutorial-list-wrapper a::after {
        right: 20px;
        width: 20px
    }
    .tutorial-list-wrapper a::before {
        right: 29px;
        height: 20px
    }
    .tutorial-list-wrapper .tutorial-list-text {
        font-size: 12px
    }
    .tutorial-list-wrapper .tutorial-list-text::after {
        font-size: 12px
    }
}

@media only screen and (max-width: 374px) {
    .tutorial-link {
        height: 105px
    }
}

.card-items {
    margin-top: 15px
}

.card-items li {
    line-height: 1.4;
    margin-bottom: 2px
}

.tutorials-single-page .container {
    position: relative
}

.tutorials-single-page .page-section.content-indent .section-content {
    position: relative;
    z-index: 1
}

.tutorials-single-page .page-section.content-indent:nth-child(odd) .section-content {
    margin-left: 0;
    width: 75%
}

.tutorials-single-page .page-section.content-indent:nth-child(odd) .dashed-circle {
    left: auto;
    right: 15px;
    border-left: 3px dashed transparent;
    border-top: 3px dashed #333
}

.dashed-circle {
    position: absolute;
    top: 78px;
    left: 15px;
    z-index: 0;
    display: block;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    border: 3px dashed #333;
    border-top: 3px dashed transparent;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.step-number {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    left: -20px;
    top: -20px;
    width: 150px;
    height: 150px;
    padding-bottom: 39px;
    background-color: #06B3BA;
    border-radius: 50%;
    font-size: 108px;
    font-family: "Playfair Display", serif;
    color: #333;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.step-number::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: -webkit-calc(100% - 13px);
    width: calc(100% - 13px);
    height: -webkit-calc(100% - 13px);
    height: calc(100% - 13px);
    display: block;
    border: 3px solid #fff;
    border-radius: 50%
}

.single-tutorial-image {
    box-shadow: -1px 0px 5px 3px #f1f1f1;
    border: 10px solid #fff
}

@media only screen and (max-width: 1650px) {
    .step-number {
        width: 110px;
        height: 110px;
        padding-bottom: 24px;
        background-color: #06B3BA;
        border-radius: 50%;
        font-size: 78px
    }
    .dashed-circle {
        top: 110px;
        left: 25px;
        width: 300px;
        height: 300px
    }
    .tutorials-single-page .page-section.content-indent:nth-child(odd) .section-content {
        padding-left: 1rem
    }
}

@media only screen and (max-width: 1250px) {
    .tutorials-single-page .page-section.content-indent:nth-child(odd) .section-content {
        width: 100%
    }
    .tutorials-single-page .page-section.content-indent:nth-child(odd) .dashed-circle {
        border: 0;
        right: auto
    }
    .single-tutorial-section .container {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse
    }
    .dashed-circle {
        position: relative;
        top: 0;
        left: 0;
        width: 150px;
        height: 150px;
        margin: 0 auto 50px;
        border: 0;
        border-radius: 0;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
    .step-number {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        left: 0;
        top: 0
    }
}

@media only screen and (max-width: 991px) {
    .dashed-circle {
        width: 115px;
        height: 115px;
        margin: 0 auto 20px
    }
    .step-number {
        width: 115px;
        height: 115px;
        padding-bottom: 20px;
        font-size: 68px
    }
}

@media only screen and (max-width: 600px) {
    .single-tutorial-section {
        padding-top: 30px
    }
    .dashed-circle {
        width: 80px;
        height: 80px
    }
    .step-number {
        width: 80px;
        height: 80px;
        padding-bottom: 10px;
        font-size: 48px
    }
}

#sidebar.wiki-sidebar .menu-item>span {
    font-size: 14px;
    font-weight: 500;
    -webkit-transition: 0.35s ease;
    transition: 0.35s ease;
    cursor: pointer
}

#sidebar.wiki-sidebar .menu-item>span:hover {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    padding-left: 7px
}

#sidebar.wiki-sidebar .menu-item>span .menu-item-state {
    position: absolute;
    right: 5px;
    top: 0;
    font-size: 24px
}

#sidebar.wiki-sidebar .submenu {
    display: none;
    padding-left: 10px
}

#sidebar.wiki-sidebar li a {
    height: 22px
}

#sidebar.wiki-sidebar .submenu-item a::before {
    content: "-";
    display: inline-block;
    margin-right: 5px
}

#sidebar.wiki-sidebar .submenu-item a:after {
    margin-top: 0
}

.wiki-section {
    width: -webkit-calc(50% + 60px);
    width: calc(50% + 60px);
    margin-left: auto
}

.wiki-content-image {
    display: block;
    max-width: 500px;
    width: 100%;
    margin: 30px auto 0
}

.site-wiki-single .section-image img {
    width: auto;
    margin: 0 auto
}

@media only screen and (max-width: 768px) {
    .wiki-section {
        width: 100%
    }
}

.content-indent ol {
    padding-bottom: 30px
}

@media only screen and (max-width: 768px) {
    .content-indent ol {
        padding-bottom: 20px
    }
}

.page-order-banner {
    overflow: hidden
}

.page-order-banner .banner-object svg {
    -webkit-transform: scale(1) translate(130px, -140px);
    -ms-transform: scale(1) translate(130px, -140px);
    transform: scale(1) translate(130px, -140px)
}

@media only screen and (max-width: 1650px) {
    .page-order-banner .banner-object img {
        -webkit-transform: translate(100px, 0);
        -ms-transform: translate(100px, 0);
        transform: translate(100px, 0)
    }
}

@media only screen and (max-width: 1250px) {
    .page-order-banner .banner-object {
        display: none
    }
}

.order-form {
    width: 75%
}

.order-form form {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap
}

.order-form .form-container,
.order-form .form-holder {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap
}

.order-form .form-container input[type="submit"],
.order-form .form-holder input[type="submit"] {
    display: block;
    color: #383838
}

@media only screen and (max-width: 991px) {
    .order-form {
        width: 100%
    }
}

.form-field {
    position: relative;
    margin-bottom: 40px;
    min-height: 50px
}

.form-field p,
.form-field label {
    font-size: 14px
}

.form-field input+label {
    position: absolute;
    left: 25px;
    top: 17.5px;
    font-size: 14px;
    line-height: 1;
    color: #383838;
    -webkit-transition: font-size 350ms ease, top 350ms ease;
    transition: font-size 350ms ease, top 350ms ease
}

.form-field input,
.form-field textarea,
.form-field select,
.form-field option {
    width: 100%;
    padding: 10px 22px;
    border: 2px solid #333;
    border-radius: 25px;
    letter-spacing: -0.5px;
    outline: none;
    -webkit-transition: 0.35s ease;
    transition: 0.35s ease
}

.form-field input {
    height: 50px;
    background-color: transparent
}

.form-field textarea {
    height: 200px
}

.form-field input[type="text"]:hover+label,
.form-field input[type="text"]:focus+label,
.form-field input[type="tel"]:hover+label,
.form-field input[type="tel"]:focus+label,
.form-field input[type="email"]:hover+label,
.form-field input[type="email"]:focus+label {
    top: -15px;
    font-size: 12px
}

.form-field input[type="checkbox"],
.form-field input[type="radio"] {
    position: absolute;
    left: 0;
    top: 25px;
    height: 5px;
    width: 5px
}

.form-field input[type="checkbox"]+label,
.form-field input[type="radio"]+label {
    left: 50px;
    cursor: pointer
}

.form-field input[type="checkbox"]+label:hover .fake-checkmark,
.form-field input[type="checkbox"]+label:focus .fake-checkmark,
.form-field input[type="radio"]+label:hover .fake-checkmark,
.form-field input[type="radio"]+label:focus .fake-checkmark {
    opacity: 0.45
}

.form-field input[type="checkbox"]:checked+label .fake-check-wrapper,
.form-field input[type="radio"]:checked+label .fake-check-wrapper {
    background-color: #06B3BA;
    border: 2px solid #06B3BA
}

.form-field input[type="checkbox"]:checked+label .fake-checkmark,
.form-field input[type="radio"]:checked+label .fake-checkmark {
    opacity: 1;
    color: #fff
}

.form-field input[type="checkbox"]:checked+label .fake-checkmark::before,
.form-field input[type="radio"]:checked+label .fake-checkmark::before {
    background-color: transparent
}

.form-field input[type="checkbox"]:checked+label:hover .fake-checkmark,
.form-field input[type="checkbox"]:checked+label:focus .fake-checkmark,
.form-field input[type="radio"]:checked+label:hover .fake-checkmark,
.form-field input[type="radio"]:checked+label:focus .fake-checkmark {
    opacity: 1
}

.form-field .fake-check-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    width: 30px;
    height: 30px;
    left: -50px;
    top: -50%;
    background-color: #fff;
    border: 2px solid #383838;
    border-radius: 50%;
    -webkit-transition: 350ms ease;
    transition: 350ms ease
}

.form-field .fake-checkmark {
    color: #383838;
    opacity: 0;
    -webkit-transition: opacity 350ms ease;
    transition: opacity 350ms ease
}

.form-field .fake-checkmark::before {
    font-size: 20px;
    margin-top: 2px;
    display: inline-block
}

@media only screen and (max-width: 1650px) {
    .form-field {
        min-height: 45px;
        margin-bottom: 30px
    }
}

@media only screen and (max-width: 460px) {
    .form-field .fake-check-wrapper {
        top: 0
    }
}

.message-field label {
    display: block;
    margin-bottom: 15px;
    font-size: 14px;
    color: #383838
}

.submit-form-field .popart-btn {
    float: right
}

.order-norobot-field {
    min-height: 50px;
    margin-bottom: 0
}

.order-norobot-field .form-field input[type="checkbox"]+label {
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.order-norobot-field .form-field input[type="checkbox"]+label:hover,
.order-norobot-field .form-field input[type="checkbox"]+label:focus {
    color: #383838;
    border-color: #383838
}

.order-norobot-field .form-field input[type="checkbox"]:checked+label .icon-cross:before {
    content: ""
}

.order-norobot-field .fake-checkbox span.icon-cross {
    border: 2px solid #333
}

.order-norobot-field .fake-checkbox span.icon-cross::before {
    left: 2px;
    top: 2px;
    border: 0;
    background-color: #333;
    color: #fff
}

@media only screen and (max-width: 1650px) {
    .order-norobot-field {
        min-height: 45px
    }
}

.form-container .order-norobot-field .form-field input[type="checkbox"]+label {
    -webkit-transition: 350ms ease;
    transition: 350ms ease
}

.form-container .order-norobot-field .form-field input[type="checkbox"]+label a {
    position: relative;
    font-weight: 700;
    color: #959595
}

.form-container .order-norobot-field .form-field input[type="checkbox"]+label a::before {
    content: '';
    position: absolute;
    bottom: -3px;
    width: 0;
    height: 1px;
    background: #fff;
    -webkit-transition: width .5s;
    transition: width .5s
}

.form-container .order-norobot-field .form-field input[type="checkbox"]+label a:hover::before,
.form-container .order-norobot-field .form-field input[type="checkbox"]+label a:focus::before {
    width: 100%
}

.form-container .order-norobot-field .form-field input[type="checkbox"]+label:hover,
.form-container .order-norobot-field .form-field input[type="checkbox"]+label:focus {
    border-color: #fff;
    color: #fff
}

.form-container .order-norobot-field .form-field input[type="checkbox"]+label:hover a,
.form-container .order-norobot-field .form-field input[type="checkbox"]+label:focus a {
    color: #fff
}

.budget-field.half-width:nth-child(even) {
    margin-left: 0
}

.budget-field.half-width label {
    font-size: 14px;
    line-height: 50px;
    color: #383838
}

.budget-field.half-width .fake-select {
    width: 180px;
    margin-left: 25px;
    padding: 10px 15px;
    min-height: 50px;
    height: 50px;
    text-align: left;
    border-color: #333;
    color: #383838
}

.budget-field.half-width .fake-select .fake-select-text {
    left: 25px
}

.budget-field.half-width .fake-select .fake-select-text::after {
    background-color: #333
}

.budget-field.half-width .fake-select:hover,
.budget-field.half-width .fake-select:focus {
    color: #383838;
    border-color: #333
}

.budget-field.half-width .fake-select:hover .fake-options,
.budget-field.half-width .fake-select:focus .fake-options {
    border-color: #333;
    background-color: #fff;
    height: 188px
}

.budget-field.half-width .fake-select:hover .fake-options::before,
.budget-field.half-width .fake-select:focus .fake-options::before {
    width: -webkit-calc(100% - 35px);
    width: calc(100% - 35px)
}

.budget-field.half-width .icon-keyboard_arrow_down {
    position: absolute;
    right: 15px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.budget-field.half-width .fake-options {
    padding: 0 25px;
    background-color: #fff
}

.budget-field.half-width .fake-options .f-opt:first-child {
    margin-top: 20px
}

.budget-field.half-width .fake-options .f-opt::before {
    color: #333
}

.budget-field.half-width .fake-options .f-opt::after {
    background-color: #333
}

.budget-field.half-width .fake-options .f-opt:hover,
.budget-field.half-width .fake-options .f-opt:focus {
    padding-left: 6px
}

.budget-field.half-width .fake-options .f-opt:hover::before,
.budget-field.half-width .fake-options .f-opt:focus::before {
    left: -12px;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

.budget-field.half-width .fake-options .f-opt:hover::after,
.budget-field.half-width .fake-options .f-opt:focus::after {
    left: -12px
}

.budget-field.half-width .fake-options::before {
    background-color: #333
}

.edit-answer-field {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap
}

.language-field input {
    width: 67px;
    margin-left: 25px;
    padding: 10px 15px
}

.favorite-websites-wrapper .form-field,
.other-favorite-websites-wrapper .form-field {
    margin-bottom: 20px
}

.add-favorite-website-field-btn {
    padding: 10px;
    min-width: 148px;
    max-width: 50%
}

.close-website-field {
    position: absolute;
    top: 0;
    right: 0;
    height: 50px;
    width: 50px;
    font-size: 28px;
    text-align: center;
    cursor: pointer
}

.service-options {
    display: none;
    padding: 0 22px 22px;
    border: 2px solid #333;
    border-top: 0;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px
}

.service-single-option {
    display: block;
    position: relative;
    width: 100%;
    height: 47px;
    margin-bottom: 0
}

.service-single-option label:hover,
.service-single-option label:focus {
    color: #383838
}

.service-trigger {
    margin-bottom: 0
}

.service-trigger input[type="checkbox"]+label {
    display: block;
    margin-bottom: 15px;
    font-size: 14px;
    color: #383838
}

.service-trigger .icon-keyboard_arrow_down {
    position: absolute;
    right: 15px;
    top: 15px
}

.service-trigger .icon-keyboard_arrow_down::before {
    font-size: 24px
}

.input-trigger-opened {
    color: #333;
    border-color: #333;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 0
}

.triger-single-options {
    position: relative;
    display: block
}

.triger-single-options:hover .input-trigger,
.triger-single-options:focus .input-trigger {
    color: #333;
    border-color: #333;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 0
}

.keywords-field label,
.browser-support-field label {
    display: block;
    margin-bottom: 15px;
    font-size: 14px;
    color: #333
}

.order-form-graphic,
.order-form-seo {
    display: none
}

.seo-site .order-form-seo {
    display: block
}

.one-third-width {
    position: relative;
    width: -webkit-calc((100% - 25px) / 3);
    width: calc((100% - 25px) / 3)
}

.one-third-width:not(:nth-child(2n+2)) {
    margin-left: 25px
}

@media only screen and (max-width: 991px) {
    .one-third-width {
        width: 100%
    }
    .one-third-width:not(:nth-child(2n+2)) {
        margin-left: 0
    }
}

.seo-form-wrapper .one-third-width {
    width: -webkit-calc(100% / 3 - 25px);
    width: calc(100% / 3 - 25px)
}

.seo-form-wrapper .one-third-width:not(:nth-child(3n+2)) {
    margin-left: -webkit-calc(75px / 2);
    margin-left: calc(75px / 2)
}

@media only screen and (max-width: 991px) {
    .seo-form-wrapper .one-third-width {
        width: 100%
    }
    .seo-form-wrapper .one-third-width:not(:nth-child(3n+2)) {
        margin-left: 0
    }
}

.two-third-width {
    position: relative;
    width: -webkit-calc((100% / 3 * 2));
    width: calc((100% / 3 * 2))
}

@media only screen and (max-width: 991px) {
    .two-third-width {
        width: 100%
    }
}

.half-width {
    position: relative;
    width: -webkit-calc(50% - 12.5px);
    width: calc(50% - 12.5px)
}

.half-width:nth-child(even) {
    margin-left: 25px
}

@media only screen and (max-width: 1024px) {
    .half-width {
        width: 100%
    }
    .half-width:nth-child(even) {
        margin-left: 0
    }
}

.full-width {
    position: relative;
    width: 100%
}

.form-field .input-has-value {
    top: -15px;
    font-size: 12px
}

.form-holder {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap
}

#form-response,
#order-form-response {
    display: none;
    width: 100%;
    min-height: 50px;
    padding: 10px 22px;
    border-radius: 25px;
    letter-spacing: -0.5px;
    text-align: center;
    outline: none;
    -webkit-transition: 0.35s ease;
    transition: 0.35s ease
}

#form-response .notification-message,
#order-form-response .notification-message {
    padding: 0;
    font-family: "Poppins", sans-serif;
    line-height: 2
}

#form-response .notification-message,
#form-response .icon-cross,
#order-form-response .notification-message,
#order-form-response .icon-cross {
    color: #fff
}

#form-response .notification-message::before,
#form-response .icon-cross::before,
#order-form-response .notification-message::before,
#order-form-response .icon-cross::before {
    position: absolute;
    right: 20px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 28px;
    font-weight: 900
}

.form-title {
    margin-bottom: 50px;
    font-family: "Poppins", sans-serif;
    font-size: 26px;
    font-weight: 500
}

.notification-field-success {
    border: 2px solid #3cd964;
    background-color: #3cd964
}

.notification-field-success .icon-check::before {
    display: block
}

.notification-field-error {
    border: 2px solid #ff3b30;
    background-color: #ff3b30
}

.notification-field-error .icon-cross::before {
    display: block
}

.order-form form .invalid-input,
.order-form form .fake-input.invalid-input {
    border: 2px solid #ff3b30
}

.order-form form .invalid-input-msg {
    display: none;
    position: absolute;
    right: 0;
    bottom: -30px;
    padding-right: 20px;
    font-size: 11px;
    font-weight: 600;
    color: #ff3b30
}

.order-form form .fake-checkbox .invalid-norobot {
    border: 2px solid #ff3b30
}

.order-form form .fake-checkbox .invalid-norobot::before {
    background-color: #ff3b30;
    border-color: #ff3b30
}

@media only screen and (max-width: 991px) {
    .has-hosting-field,
    .has-domain-field {
        height: 20px;
        width: 50%
    }
    .edit-answer-field {
        height: 50px
    }
    .edit-answer-field .half-width {
        width: 50%
    }
    .edit-text-field {
        margin-bottom: 0
    }
    .edit-text-field p {
        margin-bottom: 0
    }
}

.has-hosting-field input,
.has-domain-field input,
.edit-answer-field input {
    opacity: 0
}

.sitemap-page {
    padding: 60px 0 90px;
    overflow: hidden
}

.sitemap-page ul {
    float: left;
    font-size: 16px;
    position: relative;
    z-index: 1
}

.sitemap-page ul li {
    padding-left: 0
}

.sitemap-page ul li:before {
    content: none
}

.sitemap-page h2 {
    position: relative;
    font-size: 40px;
    font-family: "Playfair Display", serif;
    font-weight: 500;
    margin: 0 0 55px
}

.sitemap-row-wrapper {
    position: relative
}

.sitemap-row {
    position: relative;
    width: -webkit-calc(100% / 3);
    width: calc(100% / 3);
    padding: 140px 17.5px 100px 35px
}

.sitemap-row .bigletter {
    top: -18px;
    left: -5px
}

.sitemap-row li a {
    position: relative
}

.sitemap-row li a::after {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
    height: 2px;
    width: 0;
    background-color: #06B3BA;
    -webkit-transition: 0.35s ease;
    transition: 0.35s ease
}

.sitemap-row li a:hover::after,
.sitemap-row li a:focus::after {
    width: -webkit-calc(100% + 20px);
    width: calc(100% + 20px)
}

@media only screen and (max-width: 1250px) {
    .sitemap-row {
        width: 50%;
        padding: 140px 17.5px 100px 17.5px
    }
    .sitemap-row .bigletter {
        top: 34px;
        left: -10px
    }
}

@media only screen and (max-width: 767px) {
    .sitemap-page {
        padding: 60px 0 100px
    }
}

@media only screen and (max-width: 600px) {
    .sitemap-page h2 {
        font-size: 25px;
        margin: 0 0 25px
    }
    .sitemap-page ul li {
        margin-bottom: 3px
    }
    .sitemap-row {
        width: 100%;
        padding: 90px 17.5px 40px 17.5px
    }
    .sitemap-row .bigletter {
        left: -2px
    }
}

.press-section {
    margin-bottom: 200px
}

.press-section>.container .bigletter {
    top: -50px;
    right: 0;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
}

.press-section .section-image img {
    max-width: 85%
}

@media only screen and (max-width: 1024px) {
    .press-section .section-image img {
        margin: 0 auto
    }
}

.press-section .sekretarijat-image img {
    max-width: 70%
}

@media only screen and (max-width: 1024px) {
    .press-section .sekretarijat-image img {
        margin: 0 auto;
        margin-top: 30px
    }
}

.press-section .section-content {
    top: 55%
}

.press-section .draggable-btn {
    right: 50%;
    bottom: -200px
}

@media only screen and (max-width: 1025px) {
    .press-section .draggable-btn {
        bottom: -20px
    }
}

.press-section-left>.container .bigletter {
    right: auto;
    left: 0;
    top: -20px
}

.press-section-left .section-image {
    margin-left: auto;
    width: 50%
}

.press-section-left .section-image img {
    margin-left: auto
}

.press-section-left .section-content {
    right: auto;
    left: 16px
}

@media only screen and (max-width: 1250px) {
    .press-section {
        padding-top: 50px
    }
}

@media only screen and (max-width: 1025px) {
    .press-section .container>.bigletter {
        right: auto;
        left: 5px;
        top: -90px
    }
    .press-section .draggable-btn {
        right: 0;
        bottom: 0;
        left: 0;
        -webkit-transform: translateX(-16px);
        -ms-transform: translateX(-16px);
        transform: translateX(-16px);
        margin-bottom: 20px;
        margin-top: 45px;
        padding-bottom: 0;
        height: auto
    }
    .press-section .section-image.show {
        padding-bottom: 50px;
        margin-bottom: -50px;
        margin-left: 0;
        margin-top: -140px
    }
}

@media only screen and (max-width: 1025px) and (max-width: 767px) {
    .press-section .section-image.show {
        margin: 0 auto
    }
}

@media only screen and (max-width: 1025px) {
    .press-section .section-content {
        left: 16px
    }
    .press-section-left>.container .bigletter {
        right: auto;
        top: -90px
    }
}

@media only screen and (max-width: 767px) {
    .press-section {
        margin-bottom: 150px
    }
    .press-section .container>.bigletter {
        left: 20px;
        top: -60px
    }
    .press-section .draggable-btn {
        left: 0;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%)
    }
    .press-section .draggable-btn .x-btn {
        margin: 0 auto
    }
    .press-section .section-content {
        left: 0
    }
    .press-section .section-image img {
        margin: 0 auto
    }
    .press-section-left>.container .bigletter {
        top: -60px
    }
    .press-section-left .section-content {
        left: 0
    }
    .press-section-left .section-image {
        width: 75%
    }
}

@media only screen and (max-width: 500px) {
    .press-section {
        margin-bottom: 50px
    }
}

@media only screen and (max-width: 1024px) {
    .marketing-page .services-box {
        padding-top: 45px
    }
}

.marketing-page .services-box .section-content {
    position: relative;
    background-color: #06B3BA;
    padding: 40px 80px 80px 50px;
    margin-bottom: 50px;
    margin-left: initial;
    width: 48%;
    float: left
}

@media only screen and (max-width: 1366px) {
    .marketing-page .services-box .section-content {
        padding: 40px
    }
}

@media only screen and (max-width: 1024px) {
    .marketing-page .services-box .section-content {
        width: 100%;
        float: none;
        margin-bottom: 40px;
        clear: both
    }
}

@media only screen and (max-width: 768px) {
    .marketing-page .services-box .section-content {
        margin-bottom: 30px
    }
}

.marketing-page .services-box .section-content h3 {
    color: #fff;
    font-weight: 400;
    font-size: 40px;
    margin-bottom: 25px
}

@media only screen and (max-width: 768px) {
    .marketing-page .services-box .section-content h3 {
        font-size: 32px
    }
}

@media only screen and (max-width: 600px) {
    .marketing-page .services-box .section-content h3 {
        font-size: 27px;
        margin-bottom: 15px
    }
}

.marketing-page .services-box .section-content h3 a {
    color: #fff !important;
    font-weight: 400 !important
}

.marketing-page .services-box .section-content p {
    color: #333;
    font-size: 15px;
    margin-bottom: 50px
}

.marketing-page .services-box .section-content:nth-child(5n) {
    float: right
}

.marketing-page .services-box .section-content:nth-child(2n) {
    float: right;
    margin-right: 0
}

.marketing-page .services-box .section-content:nth-child(3n) {
    display: block;
    float: none;
    clear: both;
    margin: 0 auto;
    margin-bottom: 40px
}

.marketing-page .services-box .draggable-btn {
    position: absolute;
    bottom: 15px;
    right: 15px;
    height: auto;
    width: auto;
    padding: 0
}

.awards-box {
    padding: 150px 0 100px
}

@media only screen and (max-width: 1024px) {
    .awards-box {
        padding-top: 45px
    }
}

@media only screen and (max-width: 768px) {
    .awards-box {
        padding-bottom: 35px
    }
}

.awards-box .awards-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    background-color: rgba(255, 255, 255, 0.78);
    padding: 40px 30px;
    margin-bottom: 50px;
    margin-left: initial;
    width: 48%;
    float: left;
    border: 2px dashed #959595;
    min-height: 350px;
    text-align: center
}

@media only screen and (max-width: 1366px) {
    .awards-box .awards-content {
        padding: 40px
    }
}

@media only screen and (max-width: 1024px) {
    .awards-box .awards-content {
        width: 100%;
        float: none;
        margin-bottom: 40px;
        clear: both
    }
}

@media only screen and (max-width: 768px) {
    .awards-box .awards-content {
        margin-bottom: 30px;
        display: block;
        height: auto;
        overflow: hidden
    }
}

.awards-box .awards-content h3 {
    color: #333;
    font-weight: 400;
    font-size: 32px;
    margin-bottom: 10px
}

@media only screen and (max-width: 768px) {
    .awards-box .awards-content h3 {
        font-size: 32px
    }
}

@media only screen and (max-width: 600px) {
    .awards-box .awards-content h3 {
        font-size: 24px;
        margin-bottom: 5px
    }
}

.awards-box .awards-content h3 a {
    color: #333 !important;
    font-weight: 400 !important
}

.awards-box .awards-content p {
    color: #000;
    font-size: 15px;
    margin-bottom: 50px;
    line-height: 1.5;
    text-align: right;
    padding-right: 24px
}

@media only screen and (max-width: 1024px) {
    .awards-box .awards-content p {
        padding-right: 0
    }
}

@media only screen and (max-width: 768px) {
    .awards-box .awards-content p {
        margin-bottom: 30px !important;
        text-align: center
    }
}

.awards-box .awards-content:nth-child(5n) {
    float: right
}

.awards-box .awards-content:nth-child(2n) {
    float: right;
    margin-right: 0;
    margin-top: 80px
}

@media only screen and (max-width: 1024px) {
    .awards-box .awards-content:nth-child(2n) {
        margin-top: 0
    }
}

.awards-box .awards-content:nth-child(3n) {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    float: none;
    clear: both;
    margin: 0 auto;
    margin-bottom: 40px
}

@media only screen and (max-width: 768px) {
    .awards-box .awards-content:nth-child(3n) {
        display: block
    }
}

.awards-box .draggable-btn {
    position: absolute;
    bottom: 15px;
    right: 15px;
    height: auto;
    width: auto;
    padding: 0
}

.awards-box .right-awards-section {
    width: 50%;
    float: right
}

@media only screen and (max-width: 768px) {
    .awards-box .right-awards-section {
        width: 100%;
        float: none
    }
}

.awards-box .left-awards-section {
    width: 50%;
    float: left
}

@media only screen and (max-width: 768px) {
    .awards-box .left-awards-section {
        width: 100%;
        float: none
    }
}

.awards-box .popart-btn {
    padding: 16px 0 17px;
    cursor: pointer
}

@media only screen and (max-width: 1024px) {
    .awards-box .popart-btn {
        display: block;
        float: right;
        clear: both
    }
}

@media only screen and (max-width: 768px) {
    .awards-box .popart-btn {
        padding: 12px;
        margin-top: 0 !important
    }
}

.awards-box .yellow {
    background-color: #06B3BA;
    border: 2px solid #06B3BA;
    color: #fff;
    margin: 30px 0 15px
}

.awards-box .yellow:before {
    background-color: #fff
}

.awards-box .yellow:after {
    color: #fff
}

.awards-box .year {
    color: #06B3BA
}

.awards-box .branding-img {
    width: 110px
}

.awards-box .branding-name {
    display: block;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 14px;
    color: #000
}

.awards-box .awards-parallax {
    font-size: 172px;
    color: #f1f1f1;
    text-transform: uppercase;
    line-height: 1.4;
    font-weight: 600
}

.awards-box .awards-parallax-text {
    float: right
}

.partners-box {
    padding: 150px 0 100px
}

@media only screen and (max-width: 1024px) {
    .partners-box {
        padding-top: 45px
    }
}

@media only screen and (max-width: 768px) {
    .partners-box {
        padding-bottom: 35px
    }
}

.partners-box .partners-content {
    font-family: "Poppins", sans-serif;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    background-color: rgba(255, 255, 255, 0.78);
    padding: 40px 30px;
    margin-bottom: 50px;
    margin-left: initial;
    width: 45%;
    float: left;
    box-shadow: 0px 0px 20px 0px #dedede;
    min-height: 450px;
    text-align: left;
    display: block
}

@media only screen and (max-width: 1366px) {
    .partners-box .partners-content {
        padding: 40px
    }
}

@media only screen and (max-width: 1024px) {
    .partners-box .partners-content {
        width: 100%;
        float: none;
        margin-bottom: 40px;
        clear: both
    }
}

@media only screen and (max-width: 768px) {
    .partners-box .partners-content {
        margin-bottom: 30px;
        display: block;
        height: auto;
        overflow: hidden
    }
}

@media only screen and (max-width: 640px) {
    .partners-box .partners-content {
        padding: 15px
    }
}

.partners-box .partners-content h3 {
    color: #333;
    font-weight: 400;
    font-size: 35px;
    margin-bottom: 10px
}

@media only screen and (max-width: 768px) {
    .partners-box .partners-content h3 {
        font-size: 32px
    }
}

@media only screen and (max-width: 600px) {
    .partners-box .partners-content h3 {
        font-size: 24px;
        margin-bottom: 5px
    }
}

.partners-box .partners-content h3 a {
    color: #333 !important;
    font-weight: 400 !important
}

.partners-box .partners-content p {
    color: #000;
    font-size: 15px;
    margin-bottom: 50px;
    line-height: 1.5;
    text-align: left;
    padding-right: 24px;
    padding: 0;
    padding-bottom: 10px
}

@media only screen and (max-width: 1024px) {
    .partners-box .partners-content p {
        padding-right: 0
    }
}

@media only screen and (max-width: 768px) {
    .partners-box .partners-content p {
        margin-bottom: 30px !important;
        text-align: left
    }
}

@media only screen and (max-width: 640px) {
    .partners-box .partners-content p {
        font-size: 14px
    }
}

.partners-box .draggable-btn {
    position: absolute;
    bottom: 15px;
    right: 15px;
    height: auto;
    width: auto;
    padding: 0
}

.partners-box .right-partners-section {
    width: 50%;
    float: right
}

@media only screen and (max-width: 768px) {
    .partners-box .right-partners-section {
        width: 100%;
        float: none
    }
}

.partners-box .left-partners-section {
    width: 50%;
    float: left
}

@media only screen and (max-width: 768px) {
    .partners-box .left-partners-section {
        width: 100%;
        float: none
    }
}

.partners-box .popart-btn {
    padding: 16px 0 17px;
    cursor: pointer
}

@media only screen and (max-width: 1024px) {
    .partners-box .popart-btn {
        display: block;
        float: right;
        clear: both
    }
}

@media only screen and (max-width: 768px) {
    .partners-box .popart-btn {
        padding: 12px;
        margin-top: 0 !important
    }
}

.partners-box .yellow {
    background-color: #06B3BA;
    border: 2px solid #06B3BA;
    color: #fff;
    margin: 30px 0 15px
}

.partners-box .yellow:before {
    background-color: #fff
}

.partners-box .yellow:after {
    color: #fff
}

.partners-box .year {
    color: #06B3BA
}

.partners-box .branding-img {
    width: 110px
}

.partners-box .branding-name {
    display: block;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 14px;
    color: #000
}

.partners-box .awards-parallax {
    font-size: 172px;
    color: #f1f1f1;
    text-transform: uppercase;
    line-height: 1.4;
    font-weight: 600
}

.partners-box .awards-parallax-text {
    float: right
}

.thefwa {
    width: 130px
}

.bestcss {
    width: 140px
}

.csswinner {
    width: 210px
}

.awards {
    width: 195px
}

.display-section {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

@media only screen and (max-width: 768px) {
    .display-section {
        display: block
    }
}

.partners-title {
    font-size: 42px
}

@media only screen and (max-width: 768px) {
    .partners-title {
        font-size: 31px
    }
}

@media only screen and (max-width: 640px) {
    .partners-title {
        font-size: 26px
    }
}

.partners-container {
    margin-top: 81px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    padding-bottom: 10px
}

@media only screen and (max-width: 768px) {
    .partners-container {
        margin-top: 40px
    }
}

.partners-container span {
    display: block
}

.partners-container .city {
    color: #06B3BA;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 500
}

.partners-container .price {
    font-size: 16px;
    display: inline;
    text-transform: uppercase;
    font-weight: 500
}

.partners-container .valute {
    display: inline;
    color: #21d654
}

.partners-container .subtitle {
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 500;
    color: #cacaca
}

@media only screen and (max-width: 640px) {
    .partners-container .subtitle {
        font-size: 14px
    }
}

.partners-container .popart-btn {
    width: 100%;
    letter-spacing: 2px
}

.partners-container .popart-btn:hover:before {
    left: 95px
}

.partners-container .partners-logo {
    float: right;
    width: 140px
}

@media only screen and (max-width: 640px) {
    .partners-container .partners-logo {
        float: left;
        width: 100px
    }
}

.partners-bottom {
    clear: both;
    padding-top: 35px
}

@media only screen and (max-width: 640px) {
    .partners-bottom {
        padding-top: 0
    }
}

.partners-top {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

@media only screen and (max-width: 640px) {
    .partners-top {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

.partners-container-bottom {
    margin-top: 81px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-bottom: 10px
}

@media only screen and (max-width: 768px) {
    .partners-container-bottom {
        margin-top: 40px
    }
}

.partners-container-bottom .partners-content {
    width: 31%
}

@media only screen and (max-width: 1024px) {
    .partners-container-bottom .partners-content {
        width: 48%
    }
}

@media only screen and (max-width: 768px) {
    .partners-container-bottom .partners-content {
        width: 100%
    }
}

@media only screen and (max-width: 640px) {
    .partners-container-bottom .partners-content {
        padding: 15px
    }
}

@media only screen and (max-width: 768px) {
    .partners-container-bottom .partners-content p {
        text-align: left
    }
}

@media only screen and (max-width: 640px) {
    .partners-container-bottom .partners-content p {
        font-size: 14px
    }
}

.partners-container-bottom span {
    display: block
}

.partners-container-bottom .city {
    color: #06B3BA;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 500
}

.partners-container-bottom .price {
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 500;
    margin-top: 30px;
    display: block
}

.partners-container-bottom .valute {
    display: inline;
    color: #21d654
}

.partners-container-bottom .subtitle {
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 500;
    color: #cacaca
}

@media only screen and (max-width: 640px) {
    .partners-container-bottom .subtitle {
        font-size: 14px
    }
}

.partners-container-bottom .popart-btn {
    width: 100%;
    letter-spacing: 2px
}

.partners-container-bottom .partners-top {
    display: block
}

.partners-container-bottom .partners-bottom {
    padding-top: 25px
}

.partners-container-bottom .popart-btn:hover:before {
    left: 50px
}

.design-nominees {
    width: 160px
}

.cssdesignawards {
    width: 200px
}

.partners-content-add {
    background-image: url("../images/marketing/partners-img.jpg");
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    color: #fff;
    cursor: pointer
}

.partners-content-add .cta-white {
    background-color: #fff;
    -webkit-transition: 0.3s ease-out;
    transition: 0.3s ease-out
}

.partners-content-add .cta-white span {
    background-color: #fff
}

.partners-content-add h3 {
    text-align: center;
    font-size: 32px !important;
    line-height: 1.4;
    margin-bottom: 55px !important;
    text-transform: uppercase;
    font-weight: 700 !important;
    color: #3c3c3c !important
}

.partners-content-add .subtitle {
    text-transform: uppercase;
    margin-bottom: 50px !important;
    color: #fff !important;
    display: inline-block
}

.partners-content-add:hover {
    box-shadow: 0px 0px 14px 9px #dedede
}

.partners-content-add:hover .cta-white {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    pointer-events: none;
    box-shadow: 0px 0px 16px 0px #fff
}

.partners-content-add:hover span {
    background-color: #fff
}

.services-box .x-btn:hover span::before,
.services-box .x-btn:hover span::after {
    background-color: #fff
}

.site-privacy h3 {
    font-size: 32px
}

.site-privacy h5 {
    font-size: 24px
}

.error-404 {
    margin: 0;
    overflow: hidden
}

.video-background {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0
}

.video-foreground,
.video-foreground .video-error {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none
}

@media (min-aspect-ratio: 16 / 9) {
    .video-foreground {
        height: 300%;
        top: -100%
    }
}

@media (max-aspect-ratio: 16 / 9) {
    .video-foreground {
        width: 300%;
        left: -100%
    }
}

.headic {
    display: block;
    width: 50px;
    height: 50px;
    background-color: red
}

.error-content {
    position: relative;
    z-index: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100vh;
    padding: 2.5vw;
    color: #fff
}

.error-content p {
    margin: 0
}

.error-content p:nth-of-type(1) {
    font-size: 20vw;
    font-weight: 700;
    line-height: 1;
    opacity: 0.75
}

.error-content p:nth-of-type(2) {
    margin-left: 7.5vw;
    margin-top: -2.5vw;
    font-size: 5vw;
    font-family: "Playfair Display", serif;
    line-height: 1
}

.error-content .error-btn {
    margin-top: 5vw;
    margin-left: 7.5vw;
    border-color: #fff;
    background-color: #fff
}

@media only screen and (max-width: 1023px) {
    .error-content p:nth-of-type(1) {
        font-size: 35vw
    }
    .error-content p:nth-of-type(2) {
        margin-left: 13vw;
        margin-top: -2.5vw;
        font-size: 10vw
    }
    .error-content .error-btn {
        margin-left: 13vw;
        margin-top: 10vw
    }
}

.animation-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block
}

.animation-wrapper canvas {
    -webkit-clip-path: url(#letterpath);
    clip-path: url(#letterpath);
    background: #fff;
    opacity: .95
}

#letter-hover {
    position: fixed
}

#letterpath {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(5px);
    -ms-transform: translateX(5px);
    transform: translateX(5px);
    -webkit-transition: -webkit-transform .5s;
    transition: -webkit-transform .5s;
    transition: transform .5s;
    transition: transform .5s, -webkit-transform .5s;
    -webkit-clip-path: url(#mouse-circle);
    clip-path: url(#mouse-circle)
}

#letterpath.disabled {
    -webkit-transform: translateX(5px) !important;
    -ms-transform: translateX(5px) !important;
    transform: translateX(5px) !important
}

#letter-hover path {
    position: fixed;
    -webkit-transform: translateY(150%) translateX(360px);
    -ms-transform: translateY(150%) translateX(360px);
    transform: translateY(150%) translateX(360px)
}

#mouse-clip {
    position: fixed;
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    z-index: 9999
}

#mouse-clip circle {
    width: 100px;
    height: 100px;
    r: 0;
    -webkit-transition: r cubic-bezier(0.68, 1, 0.76, 1) 0.35s;
    transition: r cubic-bezier(0.68, 1, 0.76, 1) 0.35s
}

#mouse-clip.hovered circle {
    r: 50;
    -webkit-transition-duration: .75s;
    transition-duration: .75s
}

#mouse-clip.full circle {
    r: 500 !important
}

#mouse-clip.full.finish circle {
    r: 5000 !important
}

#letter-full {
    position: fixed;
    -webkit-transform: translateX(-5%) translateY(-53.5%);
    -ms-transform: translateX(-5%) translateY(-53.5%);
    transform: translateX(-5%) translateY(-53.5%)
}

#flyout,
#main-clip {
    -webkit-transform: translateX(5px);
    -ms-transform: translateX(5px);
    transform: translateX(5px);
    -webkit-transition: -webkit-transform .5s;
    transition: -webkit-transform .5s;
    transition: transform .5s;
    transition: transform .5s, -webkit-transform .5s
}

#flyout {
    fill: rgba(250, 204, 22, 0.5);
    opacity: 0;
    -webkit-transform: translateX(5px);
    -ms-transform: translateX(5px);
    transform: translateX(5px);
    -webkit-transition: opacity cubic-bezier(0.68, 1, 0.76, 1) 0.35s, -webkit-transform cubic-bezier(0.68, 1, 0.76, 1) 0.35s;
    transition: opacity cubic-bezier(0.68, 1, 0.76, 1) 0.35s, -webkit-transform cubic-bezier(0.68, 1, 0.76, 1) 0.35s;
    transition: opacity cubic-bezier(0.68, 1, 0.76, 1) 0.35s, transform cubic-bezier(0.68, 1, 0.76, 1) 0.35s;
    transition: opacity cubic-bezier(0.68, 1, 0.76, 1) 0.35s, transform cubic-bezier(0.68, 1, 0.76, 1) 0.35s, -webkit-transform cubic-bezier(0.68, 1, 0.76, 1) 0.35s
}

#flyout2 {
    fill: rgba(250, 204, 22, 0.25);
    opacity: 0;
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
    -webkit-transition: opacity cubic-bezier(0.68, 1, 0.76, 1) 0.35s, -webkit-transform cubic-bezier(0.68, 1, 0.76, 1) 0.35s;
    transition: opacity cubic-bezier(0.68, 1, 0.76, 1) 0.35s, -webkit-transform cubic-bezier(0.68, 1, 0.76, 1) 0.35s;
    transition: opacity cubic-bezier(0.68, 1, 0.76, 1) 0.35s, transform cubic-bezier(0.68, 1, 0.76, 1) 0.35s;
    transition: opacity cubic-bezier(0.68, 1, 0.76, 1) 0.35s, transform cubic-bezier(0.68, 1, 0.76, 1) 0.35s, -webkit-transform cubic-bezier(0.68, 1, 0.76, 1) 0.35s;
    -webkit-transition-delay: .15s;
    transition-delay: .15s
}

#flyout3 {
    fill: rgba(250, 204, 22, 0.1);
    opacity: 0;
    -webkit-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
    -webkit-transition: opacity cubic-bezier(0.68, 1, 0.76, 1) 0.35s, -webkit-transform cubic-bezier(0.68, 1, 0.76, 1) 0.35s;
    transition: opacity cubic-bezier(0.68, 1, 0.76, 1) 0.35s, -webkit-transform cubic-bezier(0.68, 1, 0.76, 1) 0.35s;
    transition: opacity cubic-bezier(0.68, 1, 0.76, 1) 0.35s, transform cubic-bezier(0.68, 1, 0.76, 1) 0.35s;
    transition: opacity cubic-bezier(0.68, 1, 0.76, 1) 0.35s, transform cubic-bezier(0.68, 1, 0.76, 1) 0.35s, -webkit-transform cubic-bezier(0.68, 1, 0.76, 1) 0.35s;
    -webkit-transition-delay: .3s;
    transition-delay: .3s
}

.hovered #flyout {
    opacity: 1;
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px)
}

.hovered #flyout2 {
    opacity: 1;
    -webkit-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px)
}

.hovered #flyout3 {
    opacity: 1;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px)
}

.disabled #flyout {
    opacity: 0 !important;
    -webkit-transform: translateX(5px) !important;
    -ms-transform: translateX(5px) !important;
    transform: translateX(5px) !important
}

.disabled #flyout2 {
    opacity: 0 !important;
    -webkit-transform: translateX(10px) !important;
    -ms-transform: translateX(10px) !important;
    transform: translateX(10px) !important
}

.disabled #flyout3 {
    opacity: 0 !important;
    -webkit-transform: translateX(15px) !important;
    -ms-transform: translateX(15px) !important;
    transform: translateX(15px) !important
}

.hovered #main-clip,
.big-active {
    -webkit-transform: translateX(0) !important;
    -ms-transform: translateX(0) !important;
    transform: translateX(0) !important
}

.disabled #main-clip {
    -webkit-transform: translateX(5px) !important;
    -ms-transform: translateX(5px) !important;
    transform: translateX(5px) !important
}

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

@keyframes fade-out {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@-webkit-keyframes slide-down {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        -webkit-transform: translateY(60vh);
        transform: translateY(60vh)
    }
}

@keyframes slide-down {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        -webkit-transform: translateY(60vh);
        transform: translateY(60vh)
    }
}

@-webkit-keyframes zoom-out {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    100% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
}

@keyframes zoom-out {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    100% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
}

@-webkit-keyframes zoomInOut {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    40% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
    80% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes zoomInOut {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    40% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
    80% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes fadeUp {
    to {
        padding-top: 0;
        opacity: 1
    }
}

@keyframes fadeUp {
    to {
        padding-top: 0;
        opacity: 1
    }
}

@-webkit-keyframes ani-mouse {
    0% {
        opacity: 1;
        top: 29%
    }
    15% {
        opacity: 1;
        top: 50%
    }
    50% {
        opacity: 0;
        top: 50%
    }
    100% {
        opacity: 0;
        top: 29%
    }
}

@keyframes ani-mouse {
    0% {
        opacity: 1;
        top: 29%
    }
    15% {
        opacity: 1;
        top: 50%
    }
    50% {
        opacity: 0;
        top: 50%
    }
    100% {
        opacity: 0;
        top: 29%
    }
}

.scroll-btn {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    margin-top: 45px
}

@media only screen and (max-width: 1024px) {
    .scroll-btn {
        margin-top: 250px !important
    }
}

.scroll-btn>* {
    display: inline-block;
    line-height: 18px;
    font-size: 13px;
    font-weight: normal;
    color: #ffffff;
    font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: 2px
}

.scroll-btn>*:hover,
.scroll-btn>*:focus,
.scroll-btn>*.active {
    color: #ffffff
}

.scroll-btn>*:hover,
.scroll-btn>*:focus,
.scroll-btn>*:active,
.scroll-btn>*.active {
    opacity: 0.8;
    filter: alpha(opacity=80)
}

.scroll-btn .mouse {
    position: relative;
    display: none;
    width: 25px;
    height: 45px;
    margin: 0 auto 20px;
    box-sizing: border-box;
    border: 2px solid #959595;
    border-radius: 23px
}

.scroll-btn .mouse>* {
    position: absolute;
    display: none;
    top: 29%;
    left: 50%;
    width: 5px;
    height: 5px;
    margin: -2px 0 0 -2px;
    background: #959595;
    border-radius: 50%;
    -webkit-animation: ani-mouse 2.5s linear infinite;
    animation: ani-mouse 2.5s linear infinite
}


/*# sourceMappingURL=main.css.map */

.alert-warning {
    color: #8a6d3b;
    background-color: #C4FAFD !important;
    border-color: #06B3BA !important;
}

.tab_container [id^="tab"]:checked + label {
    background: #fff;
    box-shadow: inset 0 3px #06B3BA !important;
}