.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

}



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: #ff0;

    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: "icomoon";

    font-display: auto;

    src: url("../assets/icons/icomoon.eot?#iefix") format("eot"), url("../assets/icons/icomoon.woff") format("woff"), url("../assets/icons/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: "Microsoft YaHei", "微软雅黑";

    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 #facc16;

    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: #facc16;

    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: #facc16

}



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: #facc16;

    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: 57% !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: 0!important;

    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: #facc16;

    font-size: 300px;

    font-family: PingFang-SC-Bold;

    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: #facc16;

    -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: #facc16

}



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: #facc16;

    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: #facc16;

    background-color: #facc16;

    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 #facc16;

    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: #facc16;

    -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 #facc16;

    border-left: 1px solid #facc16;

    -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: #facc16;

    -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: #fef5d0

}



.fade-lines .l-header:before {

    background-color: #fef5d0

}



.fade-lines .l-horizontal {

    border-color: #fef5d0

}



.fade-lines .l-horizontal:after,

.fade-lines .l-horizontal span {

    background-color: #fef5d0

}



.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: 250px;

    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: #fef5d0;

    -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: #facc16;

    -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: #facc16;

    -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: #fef5d0;

        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: 20px;

    line-height: 1.2;

    margin: 0 0 35px;

    color: #666;

}



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

    .section-title {

        font-size: 20px

    }

}



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

    .section-title {

        font-size: 20px;

        margin-bottom: 30px

    }

}



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

    .section-title {

        font-size: 20px

    }

}



@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: #facc16;

    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 #facc16;

    -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: 20px;

    font-weight: 600;

    color: #333;

    line-height: 1;

    border: 2px solid #333;

    border-radius: 40px;

    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: #facc16

}



.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: 24px 0 23px;

    }

}



.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: #facc16;

    border: 2px solid #facc16

}



.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: #facc16;

    border: 2px solid #facc16

}



.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: 10vh;

    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: 0;

    z-index: 1100;
	
	background-color: #fffffff!important;

    -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: 120px;

    -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.99);

    -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: #fef5d0;

    -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: 110px;

    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: 65px;

        font-weight: bold;

    }

    .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: 46px

    }

    .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

}



@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: 100%;
    transition: all 2300ms ease 1000ms;
    -webkit-transition: all 2300ms ease 1000ms;
    -moz-transition: all 2300ms ease 1000ms;
    -ms-transition: all 2300ms ease 1000ms;
    -o-transition: all 2300ms ease 1000ms;
}



.info-buttons-wrapper.show {

    /* width: 100% */

}



.info-buttons-wrapper .container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 60px auto;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-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: 120px;

    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: 25px;

    -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: #facc16

    }

    .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: #facc16;

        box-shadow: inset 0 0 12px 2px #f8b309;

        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 #f8b309;

    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: #facc16

    }

    .header-icons .hi-wrapper {

        right: 0;

        top: auto;

        bottom: 70px

    }

    .header-icons .hi-content {

        max-width: 320px;

        width: 100%;

        float: none;

        background-color: #facc16;

        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: #facc16;

    border: 2px solid #facc16;

    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: #facc16 !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: static;

    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: #facc16

}



.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: #facc16

}



.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: #facc16;

    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: #facc16;

    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: #facc16;

    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: 70px;

    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: 920px;

    position: relative;

    display: none

}



.pop-up-wrapper .form-container .popart-fill-btn,

.form-holder .popart-fill-btn {

    background-color: #facc16;

    border-color: #facc16

}



.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: #facc16;

    background-color: #facc16

}



.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: #facc16;

    background-color: #facc16;

    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: 30px 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;

    text-align: center;

}



.main-navigation li {

    /*float: left;*/

    margin-left: 77px;

    position: relative;

    display: inline-block;

}



.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: #facc16

}



@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: 77px

    }

}



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

    .main-navigation li {

        margin-left: 77px

    }

}



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

    .main-navigation {

        padding-top: 35px;

        padding-bottom: 35px

    }

    .main-navigation li {

        margin-left: 77px

    }

}



.sticky-header .main-navigation {

    padding: 36px 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;

        bottom: 0;

        top: auto;

    }

    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

}



.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: #facc16; */

    background: url(../images/home/bg.jpg) no-repeat right;

    background-size: cover;

    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;

    width: 280px;

    padding: 40px 40px 70px;

    background-color: #facc16;

    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: #facc16;

    border-right-color: #facc16;

    -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: #facc16;

    border-left-color: #facc16;

    -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%, #facc16 100%);

    background: radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.56) 40%, #facc16 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: #facc16

}



.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: #facc16

}



.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: #facc16;

    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: #facc16;

    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: #facc16;

    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: #facc16;

    border-color: #facc16;

    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: #facc16;

    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;

    font-family: PingFang-SC-Bold;

}



@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 #facc16;

    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: #facc16

}



.ss-nav.last-item::after {

    background: #facc16

}



.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 #facc16;

    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 #facc16;

    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: #facc16

}



.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: #facc16;

    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 #facc16;

    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 #facc16;

    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: #facc16;

    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: #facc16;

    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: 15px;

    -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(40%);

    width: calc(40%);

    position: absolute;

    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: -180px;

    -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 {

    	margin-top: 100PX;

        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: 55px;

        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: 75%;

    position: relative

}



.home-webdevelopment ul {

    list-style: none;

    margin: 80px 0 -50px 280px;

    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

}



.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(40%);

    width: calc(40%);

    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

}



.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: #facc16;

    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: 40%

}



.home-seo .section-content img {

    margin-top: 110px;

    display: block

}



.home-seo .draggable-btn {

    position: absolute;

    left: 25.5%;

    bottom: -80px;

    -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;

    overflow: hidden

}



.home-blog .custom-arrows {

    position: absolute;

    left: 23%;

    top: 376px

}



.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: 54%;
    opacity: 0;
    -webkit-transition: all 350ms ease;
    transition: all 350ms ease;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}



@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: #facc16;

    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: #facc16;

    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: #facc16

}



.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: #facc16;

    border-left-color: #facc16;

    -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 #facc16;

    border-bottom: 2px solid #facc16;

    -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: #fef5d0

    }

    .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: #fef5d0;

    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: #facc16;

    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: #facc16

}



.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: #fef5d0

}



.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 #facc16;

    border-bottom: 2px solid #facc16;

    -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: #facc16;

    border-left-color: #facc16;

    -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: #facc16;

    -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: #facc16;

    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, #facc16e0 50%, transparent 50%);

    background: linear-gradient(to left, #facc16e0 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 #f8b309

}



.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: #facc16;

    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: #facc16;

    -webkit-transform: translateX(-101%);

    -ms-transform: translateX(-101%);

    transform: translateX(-101%)

}



#dropper.show {

    border-color: #facc16;

    -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: #facc16;

        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: #facc16;

        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: #facc16;

    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: #facc16;

    display: inline-block

}



.company-col a:after {

    content: '';

    width: 0;

    height: 1px;

    background-color: #facc16;

    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: #fef5d0;

    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

    }

}



.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: #fef5d0

}



.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: #facc16;

    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: #facc16;

    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: #facc16;

    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: #facc16;

    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: #facc16;

    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: #facc16;

        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: #f8b309;

    border: 2px solid #f8b309

}



.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: #facc16;

    -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: #facc16;

    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: #facc16;

    border: 2px solid #facc16;

    color: #fff;

    margin: 30px 0 15px

}



.awards-box .yellow:before {

    background-color: #fff

}



.awards-box .yellow:after {

    color: #fff

}



.awards-box .year {

    color: #facc16

}



.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: #facc16;

    border: 2px solid #facc16;

    color: #fff;

    margin: 30px 0 15px

}



.partners-box .yellow:before {

    background-color: #fff

}



.partners-box .yellow:after {

    color: #fff

}



.partners-box .year {

    color: #facc16

}



.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: #facc16;

    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: #facc16;

    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 */



}





.mytel {

    margin-top: 20px;

    font-size: 18px;

    color: #fff;

}

.myemail {

    font-style: normal;

}

.banner_img img{

    transform: scale(1)!important;

}

.future {

    font-size: 50px;

    font-family:PingFang-SC-Bold;

}

.mycontact {

    text-align: center!important;

    color: #fff;

}

.mycontact span {

    display: inline-block;

    margin: 0 20px;

    font-size: 16px;

}

.my_title {

    font-size: 42px;

    font-family: PingFang-SC-Bold;

}

.site-footer .copyright {

    font-size: 16px;

    font-family: PingFang-SC-Bold;

}

.myphoto {

    display: inline-block;

    position: absolute;

    right: 0;

    top: 0;

}

.page-banner.home-banner .banner-object {

    position: absolute;

    left: 0;

    top: 100px;

    width: 100%;

    max-width: 100%!important;

}

.page-banner.home-banner .banner-object .slick-slider {

    width: 100%;

}

.page-banner.home-banner .banner-object img {

        -webkit-transform: scale(1)!important;

        -ms-transform: scale(1)!important;

        transform: scale(1)!important;

        max-width: 100% !important;

        width: 100%;

}

.main-navigation {

    margin-right: 0!important;

}

.pingfang {

    font-family: PingFang-SC-Bold !important;

}

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

 .page-banner {

    padding-top: 137px;

}

}

@media (max-width:1000px) {

   .site-footer .copyright,

   .mycontact span {

       font-size: 14px;

   }

   .myphoto {

       position: static;

   }

   .header-icons,

   .main-navigation .sub-menu-btn::before {

       display: none;

   }

   .main-navigation li {

       width: 100%;

   }

   .mycontact span {

       display: block;

       margin: 10px 0;

   }

}