/*	// Table of contents //

		02.	BODY
		03.	LINKS
		04.	HTML TAGS
		05.	SPACING
		06.	FORM ELEMENTS
		07.	CUSTOM CONTAINER
		08.	SECTIONS
		09.	CONTENT SECTION
		10.	SECTION TITLE
		11.	ODOMETER
		12.	PAGINATION
		13.	CUSTOM LINK
		14.	CUSTOM BUTTON
		15.	SANDWICH
		17.	PRE ELEMENTS
		18.	PAGE LOADED
		19.	CUSTOM CURSOR
		20.	PRELOADER
		21.	PAGE TRANSITION
		22.	SITE NAVIGATION
		23.	DISPLAY NAV
		25.	BOTTOM BAR
		26.	LEFT SIDE
		27.	RIGHT SIDE
		28.	SLIDER
		30.	VIDEO BG
		31.	PAGE HEADER
		37.	TEXT CONTENT BLOCK
		38.	AWARDS
		39.	TEAM
		40.	SERVICES
		41.	CLIENTS
		42.	WORKS
		43.	BLOG POST
		44.	BLOG SIDEBAR
		45.	CONTACT
		46.	CONTACT FORM
		48.	RESPONSIVE MEDIUM
		49.	RESPONSIVE TABLET
		50.	RESPONSIVE MOBILE

*/
/* BODY */
* {
    outline: none !important;
}

/* LINKS */
a {
    color: #0e0e0e;
}

a:hover {
    color: #0e0e0e;
    text-decoration: none;
}

a:focus {
    color: #0e0e0e;
    text-decoration: none;
}

/* HTML TAGS */
html {
    height: 100%;
}

img {
    max-width: 100%;
}

p {
    margin-bottom: 20px;
}

p:last-child {
    margin-bottom: 0;
}

.decorated {
    font-family: 'Decorated';
}

.bold {
    font-weight: 700;
}

/* SPACING */
.no-spacing {
    margin: 0 !important;
    padding: 0 !important;
}

.top-no-spacing {
    padding-top: 0 !important;
}

.top-50-spacing {
    padding-top: 50px !important;
}

/* FORM ELEMENTS */

.inline_fields {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    column-gap: 25px;
}

.inline_fields .input_field {
    flex: 1 320px;
}

.input_field {
    position: relative;
    margin: 0 0 30px;
}

input, textarea {
    position: relative;
    display: block;
    width: 100%;
    padding: 0.575rem 0;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid #000000;
    background-color: transparent;
    outline: none;
    color: var(--text-primary);
    line-height: 1.2;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: all 0.2s;
    font-size: 16px;
}

input:focus, textarea:focus {
    border-bottom: 1px solid var(--accent-color);
}

label {
    width: 100%;
    color: #9a9a9a;
    font-size: 80%;
}

label:focus-within {
    color: var(--accent-color);
}

input.wpcf7-not-valid::placeholder {
    color: #f44336;
}

.wpcf7-submit {
    border: none !important;
    padding: 0;
}

.submit_button {
    position: relative;
    max-width: 400px;
    border: 1px solid #000000;
    padding: 0.875rem;
    margin: 70px 0 0;
    background: transparent;
    -webkit-transition: all 0.4s ease-out 0s;
    -moz-transition: all 0.4s ease-out 0s;
    -ms-transition: all 0.4s ease-out 0s;
    -o-transition: all 0.4s ease-out 0s;
    transition: all 0.4s ease-out 0s;
}

.submit_button:before {
    position: absolute;
    content: '';
    left: auto;
    top: 0;
    right: 0;
    height: 101%;
    width: 0px;
    background: var(--accent-color);
    z-index: -1;
    -webkit-transition: all 0.4s ease-out 0s;
    -moz-transition: all 0.4s ease-out 0s;
    -ms-transition: all 0.4s ease-out 0s;
    -o-transition: all 0.4s ease-out 0s;
    transition: all 0.4s ease-out 0s;
}

.submit_button:hover {
    border: 1px solid var(--accent-color);
}

.submit_button:hover::before {
    width: 100%;
    left: 0;
    right: auto;
}

/* CUSTOM CONTAINER */
@media (min-width: 1170px) {
    .container {
        max-width: 1100px;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1260px;
    }
}

.container-fluid {
    padding: 0 100px;
}

/* SECTIONS */
main {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

aside {
    display: block;
}

article {
    display: block;
}

/* CONTENT SECTION */
.content-section {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 150px 0;
    overflow: hidden;
}

.smaller-content-section {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 45px 0;
}

.bg-color-dark {
    background: #0e0e0e !important;
}

.bg-color-main {
    background: #4237ef !important;
}

.bg-image-fixed {
    width: 100%;
    min-height: 450px;
    position: relative;
    background-size: cover;
    background-attachment: fixed;
}

/* BREADCRUMBS */

.breadcrumbs {
    padding-bottom: 40px;
    font-size: 14px;
    color: #9a9a9a;
}

.breadcrumbs a {
    color: #9a9a9a;
}

/* SECTION TITLE */
.section-title {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 75px;
}

.section-title .h6 {
    width: 100%;
    display: block;
    font-size: 17px;
    letter-spacing: 4px;
    margin-bottom: 10px;
}

.section-title h2 {
    width: 100%;
    display: block;
    font-size: 5rem;
    font-weight: 800;
    line-height: 1;
    margin: 0;
    letter-spacing: -2px;
    text-transform: uppercase;
    font-size: 4rem;
}

.section-title p {
    font-size: 17px;
    margin-top: 30px;
}

/* PAGE TITLE */

.after_header-title h1 {
    font-size: 5rem;
    line-height: 1;
}

@media(max-width: 769px) {
    .after_header-title h1 {
        font-size: 4rem;
        line-height: 1;
    }
}

@media(max-width: 468px) {
    .after_header-title h1 {
        font-size: 3rem;
        line-height: 1;
    }
}

/* ODOMETER */
.odometer {
    line-height: 1;
    padding: 0;
}

.odometer.odometer-auto-theme,
.odometer.odometer-theme-car {
    padding: 0 !important;
}

.odometer.odometer-auto-theme .odometer-digit {
    padding: 0 !important;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner {
    left: 0 !important;
}

.odometer.odometer-auto-theme .odometer-digit,
.odometer.odometer-theme-car .odometer-digit {
    padding: 0;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner,
.odometer.odometer-theme-car .odometer-digit .odometer-digit-inner {
    left: 0;
}

/* PAGINATION */
.pagination {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
}

.page-numbers {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 20px 0 40px;
    column-gap: 30px;
}

.page-numbers li > span, .page-numbers li > a {
    display: block;
    text-align: center;
    line-height: 1;
}

.page-numbers.current {
    position: relative;
    color: var(--accent-color);
}

.page-numbers.current:before {
    position: absolute;
    content: '';
    width: 150%;
    height: 2px;
    background: var(--accent-color);
    left: -25%;
    bottom: -5px;
}

.next, .prev {
    background: var(--accent-color);
    padding: 5px;
    border-radius: 50%;
}

.pagination .page-item {
    display: inline-block;
}

.pagination .page-item .page-link {
    height: 60px;
    line-height: 60px;
    padding: 0 40px;
    border-radius: 0 !important;
    font-size: 12px;
    font-weight: 600;
    color: #0e0e0e;
    outline: none !important;
}

.pagination .page-item .page-link:focus {
    outline: none !important;
}

/* CUSTOM LINK */
.custom-link {
    width: 100%;
    display: block;
    overflow: hidden;
}

.custom-link a {
    color: #fff;
    display: inline-block;
    position: relative;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.custom-link a:before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 100%;
    color: #fff;
}

.custom-link a:hover {
    transform: translateY(-100%);
    text-decoration: none;
}

/* CUSTOM BUTTON */
.custom-btn {
    position: relative;
    display: inline-block;
    width: 220px;
    height: 58px;
    line-height: 56px;
    text-align: center;
    background-color: transparent;
    cursor: pointer;
    text-decoration: none;
}

.custom-btn:hover {
    text-decoration: none;
}

.custom-btn:hover svg rect {
    stroke-width: 1;
    stroke-dasharray: 150, 445;
    stroke-dashoffset: 340;
}

.custom-btn svg {
    width: 220px;
    height: 58px;
    position: absolute;
    top: 0;
    left: 0;
}

.custom-btn svg rect {
    width: 218px;
    height: 56px;
    stroke-width: 1;
    stroke-dasharray: 353, 0;
    stroke-dashoffset: 0;
    -webkit-transition: all 600ms ease;
    transition: all 600ms ease;
}

.custom-btn span {
    display: inline-block;
    color: #000;
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
}

/* PRE ELEMENTS */
/* .navbar,
.bottom-bar,
.left-side,
.right-side {
    transition: all ease 0.5s;
    opacity: 0;
    transition-delay: 1.5s;
}

.slide-content .link-holder,
.page-header .container p {
    transition: all ease 0.5s;
    opacity: 0;
    transform: translateY(50px);
}

.slide-content h1,
.page-header .container h1 {
    transition: all ease 0.5s;
    opacity: 0;
    transform: translateY(-50px);
}

.slider {
    transition: all ease 1s;
    transform: scale(1.5);
    transition-delay: 0.8s;
} */

/* PAGE LOADED */
/* .page-loaded .preloader {
    height: 0;
    visibility: hidden;
}

.page-loaded .preloader span {
    width: 0;
}

.page-loaded .preloader .inner {
    visibility: hidden;
}

.page-loaded .preloader canvas {
    opacity: 0;
    animation: none;
    -webkit-animation: none;
    -moz-animation: none;
}

.page-loaded .preloader img {
    opacity: 0;
}

.page-loaded .navbar,
.page-loaded .bottom-bar,
.page-loaded .left-side,
.page-loaded .right-side {
    opacity: 1;
}

.page-loaded .slide-content .link-holder,
.page-loaded .page-header .container p {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.5s;
}

.page-loaded .slide-content h1,
.page-loaded .page-header .container h1 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.5s;
}

.page-loaded .slider {
    transform: scale(1);
} */

/* CUSTOM CURSOR */
.cursor {
    position: fixed;
    top: -30px;
    left: -30px;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: difference;
}

.cursor:before {
    content: "";
    width: 60px;
    height: 60px;
    display: inline-block;
    border-radius: 50%;
    background: white;
    transition: all ease 0.15s;
    transform: scale(0.15);
}

.cursor.light:before {
    transform: scale(1);
}

/* PRELOADER */
.preloader {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99;
    transition-delay: 2s;
    overflow: hidden;
}

.preloader span {
    width: 25%;
    height: 100%;
    position: absolute;
    right: 0%;
    top: 0;
    background: #0e0e0e;
    transition: all ease 0.7s;
    transition-delay: 0.7s;
}

.preloader span:nth-child(2) {
    right: 25%;
}

.preloader span:nth-child(3) {
    right: 50%;
}

.preloader span:nth-child(4) {
    right: 75%;
}

.preloader .inner {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.preloader .inner canvas {
    display: inline-block;
    background: none;
    border-radius: 50%;
    -webkit-animation: spin 4s linear infinite;
    -moz-animation: spin 4s linear infinite;
    animation: spin 4s linear infinite;
    position: relative;
    z-index: 1;
    transition: all ease 0.5s;
}

.preloader .inner img {
    height: 15px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: all ease 0.5s;
    transition-delay: 0.2s;
}

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}

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

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

/* DISPLAY NAV*/
.display-nav {
    overflow: hidden;
}

.display-nav .site-navigation {
    visibility: visible;
}

.display-nav .site-navigation ul li {
    opacity: 1;
    transform: skewY(0deg);
}

.display-nav .page-header .container {
    opacity: 0;
}

.display-nav .video-bg .container {
    opacity: 0;
}

.display-nav .kinetic-slider {
    opacity: 0.2;
    filter: blur(10px);
}

.display-nav .slider .swiper-slide-active .slide-content {
    opacity: 0;
}

.display-nav .sandwich {
    position: relative;
}

.display-nav .sandwich .sand span:nth-child(1) {
    width: 0;
}

.display-nav .sandwich .sand span:nth-child(2) {
    width: 0;
    left: 0;
    transition-delay: 0.15s;
}

.display-nav .sandwich:hover .sand span:nth-child(1) {
    width: 0;
}

.display-nav .sandwich:hover .sand span:nth-child(2) {
    width: 0;
    left: 10px;
}

.display-nav .sandwich .closed span:nth-child(1) {
    width: 36px;
    transform: rotate(0deg) translateX(0);
}

.display-nav .sandwich .closed span:nth-child(2) {
    width: 36px;
    transform: rotate(90deg) translateX(0);
    transition-delay: 0.15s;
}

/* BOTTOM BAR */
.bottom-bar {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    padding: 20px 100px;
    color: #fff;
    font-weight: 600;
    align-items: center;
}

.bottom-bar .sound {
    flex: 1;
    margin-left: 0;
}

.bottom-bar .sound b {
    font-weight: 600;
}

.bottom-bar .scroll-down {
    flex: 1;
    text-align: right;
    margin-left: auto;
    overflow: hidden;
    position: relative;
}

.bottom-bar .scroll-down a {
    color: #fff;
    display: inline-block;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.bottom-bar .scroll-down a:before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 100%;
    color: #fff;
}

.bottom-bar .scroll-down a:hover {
    transform: translateY(-100%);
    text-decoration: none;
}

.bottom-bar .swiper-pagination-bullets {
    flex: 1;
}

.bottom-bar .slider-controls {
    flex: 1;
    text-align: right;
}

/* PAGE HEADER */
.page-header {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    background: #4237ef;
    overflow: hidden;
}

.page-header .video-bg {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
    z-index: 1;
    opacity: 0.10;
    position: absolute;
    left: 0;
    top: 0;
}

.page-header .video-bg video {
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.page-header .container {
    text-align: center;
    transform: skewY(-4deg);
    position: relative;
    z-index: 2;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.page-header .container h1 {
    font-weight: 800;
    color: transparent;
    font-size: 17vw;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #fff;
}

.page-header .container p {
    color: #fff;
    font-size: 18px;
}

/* TEXT CONTENT BLOCK */
.col-lg-5 .text-content-block {
    padding-right: 10%;
}

.text-content-block {
    width: 100%;
    display: block;
}

.text-content-block p {
    font-size: 17px;
}

.text-content-block u {
    text-decoration: underline;
}

.text-content-block strong {
    font-weight: 600;
}

.text-content-block .custom-link a {
    font-weight: 600;
    color: #0e0e0e;
}

.text-content-block .custom-link a:before {
    color: #0e0e0e;
}

/* AWARDS */
.awards {
    width: 100%;
    display: block;
    color: #fff;
    text-align: center;
}

.awards figure {
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
}

.awards img {
    height: 40px;
}

.awards .odometer {
    font-size: 50px;
    margin-bottom: 10px;
}

.awards h4 {
    font-size: 12px;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

/* TEAM */
.team {
    margin: 15px 0;
    position: relative;
    background: #4237ef;
}

.team:hover img {
    opacity: 0.1;
}

.team:hover figcaption {
    opacity: 1;
}

.team img {
    width: 100%;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
    filter: grayscale(1);
    mix-blend-mode: lighten;
}

.team figcaption {
    width: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    padding: 30px;
    text-align: center;
    color: #fff;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
    opacity: 0;
}

.team figcaption h5 {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 5px;
}

.team figcaption small {
    width: 100%;
    display: block;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.team figcaption ul {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.team figcaption ul li {
    display: inline-block;
    margin: 0 10px;
    padding: 0;
    list-style: none;
}

.team figcaption ul li a {
    color: #fff;
    font-size: 13px;
}

.team figcaption ul li a:hover {
    text-decoration: none;
}

/* SERVICES */
.services-image {
    width: 100%;
    margin: 0;
}

.services-content {
    width: 100%;
    display: block;
    color: #fff;
}

.services-content h5 {
    font-weight: 800;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    margin-bottom: 20px;
    line-height: 1;
}

.services-content p {
    font-size: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 40px;
    padding-bottom: 40px;
}

.services-content ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

.services-content ul li {
    width: 50%;
    display: inline-block;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    font-size: 26px;
}

/* CLIENTS */
.clients {
    border: 1px solid #eee;
    margin-bottom: 0;
    padding: 50px 80px;
    margin-left: -1px;
    margin-top: -1px;
    position: relative;
}

.clients * {
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.clients:hover img {
    opacity: 0;
    transform: scale(0.9);
}

.clients:hover figcaption {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.clients img {
    width: 100%;
}

.clients figcaption {
    width: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scale(0.7);
    text-align: center;
    opacity: 0;
}

.clients figcaption a {
    display: inline-block;
    color: #0e0e0e;
}

/* WORKS */
.works {
    width: 100%;
    display: inline-block;
    margin-top: 30px;
    margin-bottom: 0;
    position: relative;
    background: #0e0e0e;
    color: #fff;
}

.works:hover img {
    opacity: 0.8;
}

.works img {
    width: 100%;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.works figcaption {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 30px;
}

.works figcaption:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    mix-blend-mode: overlay;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #131314 100%);
    background-image: -o-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #131314 100%);
    background-image: -moz-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #131314 100%);
    background-image: -webkit-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #131314 100%);
    background-image: -ms-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #131314 100%);
}

.works figcaption div {
    width: 100%;
    display: block;
    position: relative;
    z-index: 2;
}

.works figcaption div ul {
    width: 100%;
    display: block;
    margin: 0;
    padding: 0;
}

.works figcaption div ul li {
    display: inline-block;
    margin-right: 5px;
    padding: 0;
    list-style: none;
}

.works figcaption div ul li:last-child:after {
    display: none;
}

.works figcaption div ul li:after {
    content: ",";
}

.works figcaption div h5 {
    font-size: 50px;
    font-weight: 800;
    overflow: hidden;
    position: relative;
}

.works figcaption div h5 a {
    color: #fff;
    display: inline-block;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
    color: #fff;
}

.works figcaption div h5 a:before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 100%;
    color: #fff;
}

.works figcaption div h5 a:hover {
    transform: translateY(-100%);
    text-decoration: none;
}

.masonry-grid.col-lg-6:nth-child(1) .works {
    margin-top: 0;
}

.masonry-grid.col-lg-6:nth-child(2) .works {
    margin-top: 0;
}

.masonry-grid.col-lg-6:nth-child(3) {
    padding-left: 50px;
}

.masonry-grid.col-lg-6:nth-child(4) {
    padding-right: 50px;
}

.masonry-grid.col-lg-6:nth-child(5) {
    padding-left: 150px;
}

.masonry-grid.col-lg-6:nth-child(6) {
    padding-right: 150px;
}

.masonry-grid.col-lg-6:nth-child(7) {
    padding-left: 50px;
}

.masonry-grid.col-lg-6:nth-child(8) {
    padding-right: 50px;
}

.masonry-grid.col-lg-6:nth-child(9) {
    padding-left: 200px;
}

.works-content {
    width: 100%;
    display: block;
    margin-bottom: 30px;
    font-size: 17px;
}

.works-content ul {
    padding-left: 20px;
}

.works-content a {
    text-decoration: underline;
}

.works-content h6 {
    font-weight: 600;
    margin-bottom: 15px;
}

.works-slider {
    width: 100%;
    display: block;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.works-slider .swiper-slide {
    width: 70%;
}

.works-slider .swiper-slide video {
    width: 100%;
}

.works-slider .swiper-slide img {
    width: 100%;
}

/* BLOG POST */
.blog-post {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 100px;
}

.blog-post:last-child {
    margin-bottom: 50px;
}

.blog-post:nth-child(even) {
    display: flex;
    flex-wrap: wrap;
}

.blog-post:nth-child(even) .post-image {
    order: 2;
}

.blog-post:nth-child(even) .post-content {
    order: 1;
    border-left: 1px solid #eee;
    border-right: none;
}

.blog-post.post-single {
    width: 100%;
    margin-bottom: 25px;
}

.blog-post.post-single .post-image {
    width: 100%;
    flex: inherit;
    margin-bottom: 30px;
}

.blog-post.post-single .post-content {
    width: 100%;
    flex: inherit;
    display: block;
    padding: 0;
    border: none;
}

.blog-post.post-single .post-content .post-title {
    width: 100%;
    display: block;
    font-size: 56px;
    font-weight: 800;
    margin-bottom: 30px;
    letter-spacing: -1px;
    line-height: 1.3;
}

.blog-post .post-image {
    flex: 1;
    display: block;
    margin-bottom: 0;
}

.blog-post .post-image img {
    width: 100%;
}

.blog-post .post-content {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    z-index: 2;
    border: 1px solid #eee;
    padding: 30px;
}

.blog-post .post-content .post-inner {
    width: 100%;
}

.blog-post .post-content .post-date {
    width: 100%;
    display: block;
    color: #727479;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.blog-post .post-content .post-title {
    width: 100%;
    display: block;
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 30px;
    letter-spacing: -1px;
    line-height: 1.3;
}

.blog-post .post-content .post-title a {
    color: #0e0e0e;
}

.blog-post .post-content .post-title a:hover {
    color: #4237ef;
    text-decoration: none;
}

.blog-post .post-content .post-author {
    width: 100%;
    display: block;
    margin-bottom: 40px;
}

.blog-post .post-content .post-author img {
    width: 60px;
    height: 60px;
    display: inline-block;
    border-radius: 50%;
    margin-right: 10px;
}

.blog-post .post-content .post-author b {
    color: #727479;
    font-weight: 400;
}

.blog-post .post-content .post-author b a {
    color: #0e0e0e;
}

.blog-post .post-content .post-author b a:hover {
    text-decoration: none;
}

.blog-post .post-content .post-categories {
    width: 100%;
    display: block;
    margin-bottom: 30px;
    padding: 0;
}

.blog-post .post-content .post-categories li {
    display: inline-block;
    margin: 0;
    margin-right: 10px;
    padding: 0;
    list-style: none;
}

.blog-post .post-content .post-categories li a {
    color: #0e0e0e;
    font-size: 11px;
    padding-bottom: 3px;
    border-bottom: 2px solid #0e0e0e;
}

.blog-post .post-content .post-categories li a:hover {
    text-decoration: none;
    border-color: #4237ef;
}

.blog-post .post-content .social-share {
    width: 100%;
    float: left;
    padding: 0;
    margin-bottom: 40px;
    text-align: center;
}

.blog-post .post-content .social-share li {
    float: left;
    margin-right: 5px;
    margin-bottom: 5px;
    padding: 0;
    list-style: none;
}

.blog-post .post-content .social-share li.facebook a {
    background: #475993;
}

.blog-post .post-content .social-share li.twitter a {
    background: #76a9ea;
}

.blog-post .post-content .social-share li.google-plus a {
    background: #f34a38;
}

.blog-post .post-content .social-share li.linkedin a {
    background: #0077b7;
}

.blog-post .post-content .social-share li.youtube a {
    background: #f61c0d;
}

.blog-post .post-content .social-share li a {
    line-height: 44px;
    float: left;
    padding: 0 20px;
    background: #0e0e0e;
    font-weight: 600;
    color: #fff;
    border: none;
    border-radius: 0;
}

.blog-post .post-content .social-share li a:hover {
    text-decoration: none;
}

.blog-post .post-content blockquote {
    background: #4237ef;
    color: #fff;
    padding: 30px;
    margin-bottom: 25px;
}

.blog-post .post-content blockquote h5 {
    font-weight: 800;
}

.blog-post .post-content p {
    font-size: 17px;
    line-height: 1.7;
    margin-bottom: 25px;
}

.blog-post .post-content h3 {
    font-weight: 600;
}

.blog-post .post-content h4 {
    font-weight: 600;
}

.blog-post .post-content h5 {
    font-weight: 600;
}

.blog-post .post-content h6 {
    font-weight: 600;
}

.blog-post .post-content strong {
    font-weight: 600;
}

.blog-post .post-content u {
    text-decoration: none;
    border-bottom: 2px solid #0e0e0e;
}

.blog-post .post-content .custom-list {
    width: 100%;
    display: block;
    padding-left: 20px;
}

.blog-post .post-content .custom-list li {
    font-size: 17px;
}

.blog-post .post-content .image-full {
    display: block;
    height: auto;
    margin-bottom: 30px;
    margin-top: 30px;
}

.blog-post .post-content .image-full img {
    width: 100%;
}

.blog-post .post-content .post-link {
    display: inline-block;
    overflow: hidden;
}

.blog-post .post-content .post-link a {
    display: inline-block;
    position: relative;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
    font-weight: 600;
}

.blog-post .post-content .post-link a:before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 100%;
}

.blog-post .post-content .post-link a:hover {
    transform: translateY(-100%);
    text-decoration: none;
}

/* BLOG SIDEBAR */
.sidebar {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-left: 80px;
}

.sidebar .widget {
    width: 100%;
    display: block;
    margin-bottom: 50px;
    background: #fff;
    padding: 40px;
    padding-top: 0;
    border: 5px solid #0e0e0e;
    border-left: 1px solid #0e0e0e;
    border-top: 1px solid #0e0e0e;
    position: relative;
}

.sidebar .widget .categories {
    width: 100%;
    display: block;
    margin: 0;
    padding: 0;
    font-size: 16px;
}

.sidebar .widget .categories li {
    width: 100%;
    display: block;
    margin: 0;
    padding: 3px 0;
    list-style: none;
}

.sidebar .widget .categories li a {
    margin: 0;
}

.sidebar .widget .categories li a:hover {
    color: #4237ef;
    text-decoration: none;
}

.sidebar .widget .categories li span {
    float: right;
    opacity: 0.5;
}

.sidebar .widget .tags {
    width: 100%;
    display: block;
    margin: 0;
    padding: 0;
}

.sidebar .widget .tags li {
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
    padding: 0;
    list-style: none;
}

.sidebar .widget .tags li a {
    color: #fff;
    background: #4237ef;
    display: inline-block;
    font-size: 13px;
    padding: 3px 6px;
}

.sidebar .widget .tags li a:hover {
    color: #4237ef;
    background: #0e0e0e;
    text-decoration: none;
}

.sidebar .widget .side-gallery {
    display: block;
    margin-left: -1px;
    margin-right: -1px;
    padding: 0;
}

.sidebar .widget .side-gallery li {
    width: 50%;
    float: left;
    margin: 0;
    padding: 1px;
    list-style: none;
}

.sidebar .widget p {
    margin-bottom: 0;
}

.sidebar .widget form {
    margin: 0;
}

.sidebar .widget form input[type="search"] {
    width: 100%;
    margin-bottom: 10px;
}

.sidebar .widget form button[type="submit"] {
    background: #4237ef;
    color: #0e0e0e;
    font-size: 20px;
}

.sidebar .widget .title {
    width: 100%;
    display: block;
    border-bottom: 4px solid #eee;
    line-height: 1;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 30px 0;
    margin-bottom: 30px;
    color: #0e0e0e;
    position: relative;
}

/* CONTACT */
.contact-box {
    width: 100%;
    display: block;
    margin-bottom: 30px;
}

.contact-box small {
    width: 100%;
    display: block;
    margin-bottom: 5px;
    opacity: 0.5;
    font-weight: 600;
}

.contact-box a {
    color: #0e0e0e;
    text-decoration: underline;
}

.map {
    height: 380px;
    margin-left: -50px;
    margin-right: -50px;
    margin-bottom: 60px;
    margin-top: 30px;
    position: relative;
}

.map:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #4237ef;
    mix-blend-mode: color;
}

.map .map-note {
    width: 300px;
    height: calc(100% - 60px);
    position: absolute;
    left: 50px;
    top: 30px;
    z-index: 2;
    padding: 30px;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: #4237ef;
}

.map .map-note h6 {
    margin-top: auto;
    font-weight: 600;
}

.contact-image {
    width: 100%;
    margin: 0;
}

.contact-image img {
    width: 100%;
}

/* CONTACT FORM */
.contact-form {
    width: 100%;
    display: block;
    position: relative;
    z-index: 1;
    padding-right: 10%;
}

.contact-form .form-group {
    margin-bottom: 0;
}

.contact-form #contact {
    display: block;
}

.contact-form #contact .form-group {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin-bottom: 35px;
}

.contact-form #contact .form-group:last-child {
    margin-bottom: 0;
}

.contact-form #contact .form-group .checkbox {
    display: flex;
    flex-wrap: wrap;
    width: 30%;
    height: 52px;
    border: 1px solid #ccc;
    margin-right: 5%;
    align-items: center;
    padding-left: 15px;
}

.contact-form #contact .form-group .checkbox:last-child {
    margin-right: 0;
}

.contact-form #contact .form-group .checkbox input[type="checkbox"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border: 1px solid #ccc;
    display: inline-block;
    margin-right: 5px;
}

.contact-form #contact .form-group .checkbox input[type="checkbox"]:checked {
    background: #131314;
    -webkit-box-shadow: inset 0px 0px 0px 2px #fff;
    -moz-box-shadow: inset 0px 0px 0px 2px #fff;
    box-shadow: inset 0px 0px 0px 2px #fff;
}

.contact-form #contact .form-group .checkbox small {
    display: inline-block;
    margin-top: 2px;
}

.contact-form #contact .form-group .checkbox label {
    order: 3;
}

.contact-form #contact .form-group p {
    width: 100%;
    display: block;
    line-height: 1;
    margin-bottom: 15px;
}

.contact-form #contact .form-group small {
    display: block;
    font-size: 13px;
    opacity: 0.4;
}

.contact-form #contact .form-group input[type="text"] {
    width: 100%;
    background: none;
    position: relative;
    z-index: 2;
}

.contact-form #contact .form-group textarea {
    width: 100%;
    position: relative;
    z-index: 2;
}

.contact-form #contact .form-group label.error {
    color: red;
    margin-top: 5px;
    margin-bottom: 0;
    font-weight: 600;
    font-size: 13px;
}

.contact-form input.error {
    border: 1px solid red;
}

.contact-form textarea.error {
    border: 1px solid red;
}

.contact-form #success,
.contact-form #error {
    display: none;
    float: left;
    width: 100%;
    margin-top: 30px;
    font-size: 600;
    font-size: 15px;
}

.contact-form #error {
    background: red;
    color: #fff;
}

.contact-form #success {
    background: green;
    color: #fff;
}

.contact-form .alert {
    border: none;
    border-radius: 0;
    padding: 40px 30px;
}

/* RESPONSIVE MEDIUM  */
@media only screen and (max-width: 1199px),
only screen and (max-device-width: 1199px) {
    .team figcaption ul li {
        margin: 0 5px;
    }

    .services-content ul li {
        font-size: 23px;
    }

    .clients {
        padding: 40px 60px;
    }

    .masonry-grid.col-lg-6 {
        padding: 0 15px !important;
    }

    .blog-post .post-content .post-title {
        font-size: 24px;
    }

    .blog-post.post-single .post-content .post-title {
        font-size: 36px;
    }
}

/* RESPONSIVE TABLET  */
@media only screen and (max-width: 991px),
only screen and (max-device-width: 991px) {
    .cursor {
        display: none;
    }

    .col-lg-5 .text-content-block {
        padding-right: 0;
    }

    .col-lg-4:nth-child(3) .icon-content-list-block {
        margin: 30px 0;
    }

    .left-side-content {
        padding: 60px 40px;
        background: #4237ef;
    }

    .left-side-content:before {
        display: none;
    }

    .left-side-content:after {
        display: none;
    }

    .right-side-image {
        width: 100%;
        display: block;
    }

    .right-side-image figcaption {
        padding: 40px;
    }

    .col-lg-4:nth-child(3) .recent-news {
        margin: 50px 0;
    }

    .masonry-grid.col-lg-6 {
        padding: 15px !important;
    }

    .text-content-block .custom-link {
        margin-bottom: 50px;
    }

    .hide-mobile {
        display: none;
    }

    .works {
        margin: 0;
    }

    .services-image {
        margin-bottom: 100px;
    }

    .blog-post .post-image {
        width: 100%;
        flex: inherit;
    }

    .blog-post:nth-child(even) .post-image {
        order: 1;
    }

    .map {
        margin-left: 0;
        margin-right: 0;
    }

    .contact-form {
        padding-right: 0;
    }

    .contact-image {
        display: none;
    }

    .container-fluid {
        padding: 0 30px;
    }

    .content-section {
        padding: 100px 0;
    }

    .section-title {
        margin-bottom: 50px;
    }

    input,
    textarea,
    button {
        -webkit-border-radius: 0;
        border-radius: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .footer {
        padding-top: 100px;
    }
}

/* RESPONSIVE MOBILE */
@media only screen and (max-width: 767px),
only screen and (max-device-width: 767px) {
    .preloader .inner canvas {
        width: 200px;
        height: 200px;
    }

    .site-navigation ul li {
        font-size: 10vw;
    }

    .site-navigation ul li ul li {
        font-size: 15px;
    }

    .slider {
        height: 90vh;
    }

    .slider .slider-fraction {
        display: none;
    }

    .bottom-bar .swiper-pagination-bullets {
        display: none;
    }

    .page-header {
        height: 90vh;
    }

    .masonry-grid.col-lg-6 {
        padding: 0 !important;
    }

    .works {
        margin-bottom: 15px;
    }

    .works figcaption div h5 {
        font-size: 30px;
    }

    .works-slider {
        width: 100%;
        display: block;
    }

    .works-slider .swiper-slide {
        width: 100%;
    }

    .section-title h6 {
        letter-spacing: 0;
    }

    .blog-post.post-single .post-content .post-title {
        font-size: 26px;
    }

    .no-gutters .col-lg-6 {
        padding: 0 !important;
    }

    .team {
        margin-top: 0;
    }

    .clients {
        padding: 30px;
    }

    .map {
        width: 100%;
        display: block;
        height: auto;
    }

    .map .map-note {
        width: 100%;
        height: auto;
        display: block;
        position: static;
    }

    .map:after {
        display: none;
    }

    .footer .work-with-us {
        margin-bottom: 0;
    }

    .footer .work-with-us h2 {
        font-size: 10vw;
    }

    .footer .footer-bottom .footer-menu {
        margin-left: 0;
    }

    .footer .footer-bottom span {
        order: 2;
        width: 100%;
        margin-top: 10px;
    }

    .section-title h2 {
        font-size: 3rem;
    }
}

/*
* CANVAS BACKGROUND
*/

.grained-bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.7;
}

@media (pointer: fine) {
    .grained-bg {
        z-index: 1111;
    }
}

#grained-bg {
    width: 100%;
    height: 100%;
}

/*
** Reveal animation
*/
.has-animation {
    position: relative;
}

.has-animation p,
.has-animation img {
    opacity: 0;
}

.has-animation.animate-in p,
.has-animation.animate-in img {
    animation: textHidden 0.1s 1.1s forwards;
}

.has-animation.animate-in:before,
.has-animation.animate-in:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    z-index: 10;
}

.has-animation.animate-in:before {
    background-color: var(--accent-color);
}

.has-animation.animate-in:after {
    background-color: var(--ab-dark-color);
    animation-delay: 0.5s;
}

.has-animation.animation-ltr.animate-in:before {
    animation: revealLTR 1.8s ease;
    -webkit-animation: revealLTR 1.8s ease;
}

.has-animation.animation-ltr.animate-in:after {
    animation: revealLTR 1s 0.6s ease;
    -webkit-animation: revealLTR 1s 0.6s ease;
}

.has-animation.animation-rtl.animate-in:before {
    animation: revealRTL 1.8s ease;
    -webkit-animation: revealRTL 1.8s ease;
}

.has-animation.animation-rtl.animate-in:after {
    animation: revealRTL 1s 0.6s ease;
    -webkit-animation: revealRTL 1s 0.6s ease;
}

@keyframes revealRTL {
    0% {
        width: 0;
        right: 0;
    }

    65% {
        width: 100%;
        right: 0;
    }

    100% {
        width: 0;
        right: 100%;
    }
}

@keyframes revealLTR {
    0% {
        width: 0;
        left: 0;
    }

    65% {
        width: 100%;
        left: 0;
    }

    100% {
        width: 0;
        left: 100%;
    }
}

@keyframes textHidden {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/*
* FORM STYLES
*/

.term_form-content {
    position: relative;
    padding: 5rem 0;
}

.services_form {
    position: relative;
    padding: 30px;
    background: #f2f5f7;
}

.services_form-title {
    position: relative;
    padding: 10px 0 80px;
    font-size: 1.8rem;
    font-weight: 800;
    font-family: 'FixelDisplay';
}

.services_form:after {
    position: absolute;
    content: '';
    width: 50px;
    height: 50px;
    top: 95px;
    background: #ffffff;
    right: -30px;
    border-radius: 50%;
}

.services_form:before {
    position: absolute;
    content: '';
    width: 50px;
    height: 50px;
    top: 95px;
    background: #ffffff;
    left: -30px;
    border-radius: 50%;
}

.form_columns {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 0 50px;
}

.part-title {
    max-width: 400px;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
    flex: 40%;
    margin: 0 10px 20px 0;
}

.column_content {
    flex: 60%;
}

.wpcf7-checkbox,
.wpcf7-radio {
    display: block;
    margin: 10px 0 20px;
}

input[type=checkbox],
input[type=radio] {
    border: none !important;
}

.wpcf7-list-item {
    font-size: 16px;
    margin: 0;
    padding-right: 15px;
    margin-bottom: 15px;
}

.wpcf7-list-item label {
    margin-bottom: 0;
}

.wpcf7-list-item-label {
    background: transparent;
    padding: 10px;
    min-width: 140px;
    text-align: center;
    cursor: pointer;
    border: 1px solid #151615;
}

.wpcf7-list-item label span {
    display: block;
    transition: all .4s linear;
}

.wpcf7-list-item label span:hover {
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
}

input[type="checkbox"]:checked+.wpcf7-list-item-label,
input[type="radio"]:checked+.wpcf7-list-item-label {
    border: 1px solid #000;
    background: #000000;
    color: #ffffff;
}

.submit_button-wrapper {
    position: absolute;
    left: auto;
    top: auto;
    right: 10%;
    z-index: 5;
    width: 170px;
    height: 170px;
    bottom: -60px;
}

.submit_button-wrapper input {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    background-color: transparent;
    line-height: 100%;
    text-transform: uppercase;
    color: #ffffff;
}

.submit_button-decor {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    max-height: 100%;
    max-width: 100%;
    border-radius: 50%;
    background-color: var(--accent-color);
    transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -ms-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
}

.submit_button-decor:before {
    position: absolute;
    content: '';
    width: 120%;
    height: 120%;
    border: 2px solid transparent;
    top: -10%;
    left: -10%;
    border-radius: 50%;
    transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -ms-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
}

.submit_button-wrapper:hover .submit_button-decor {
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
}

.submit_button-wrapper:hover .submit_button-decor:before {
    border-color: var(--accent-color);
}

.submit_button-wrapper:hover input {
    font-size: 90%;
}

/*
* NEW FORM STYLES
*/

.pages_callback_form {
    position: relative;
    padding: 50px 0 100px;
    margin-bottom: 40px;
}

.pages_callback_form-row {
    display: flex;
    align-items: center;
    margin: 20px 0 40px;
    flex-wrap: wrap;
}

.pages_callback_form-row-column {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.pages_callback_form .form-text {
    font-size: 1.3rem;
    font-weight: 700;
    margin-right: 15px;
}

.pages_callback_form-row .form-input {
    margin: 0 15px;
}

.pages_callback_form .wpcf7-checkbox, .wpcf7-radio, .pages_callback_form .wpcf7-list-item {
    margin: 0;
    margin-bottom: 0;
}

.form-input-fullwidth {
    width: 100%;
}

.pages_callback_form .wpcf7-list-item-label {
    border-radius: 40px;
    padding: 10px 30px;
}

@media(max-width: 768px) {
    .pages_callback_form-row-column {
        flex-wrap: wrap;
    }

    .pages_callback_form-row .form-input {
        margin: 0;
    }

    .pages_callback_form .wpcf7-list-item {
        width: 100%;
        margin: 5px 0 !important;
    }
}

.submit_icon-wrapper {
    position: relative;
    height: 70px;
    padding: 50px 0 90px;
}

.submit_icon-inner {
    position: absolute;
    right: 10%;
    display: flex;
    align-items: center;
}

.submit_icon-button {
    position: relative;
    width: 250px;
    height: 70px;
    padding: 10px 130px 10px 0;
    z-index: 99;
}

.submit_icon-button input {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    text-align: left;
    color: #ffffff !important;
}

.submit_icon-decor {
    position: absolute;
    content: '';
    width: 90px;
    height: 90px;
    top: 50%;
    right: -30px;
    transform: translate(-50%, -50%);
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    border: 1px solid #ffffff;
    border-radius: 50%;
    padding: 10px;
    z-index: -1;
    transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -ms-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
}

.submit_icon-inner:hover .submit_icon-decor {
    background-color: var(--accent-color) !important;
    transform: translate(-50%, -50%) scale(1.2);
    -webkit-transform: translate(-50%, -50%) scale(1.2);
    -moz-transform: translate(-50%, -50%) scale(1.2);
    -ms-transform: translate(-50%, -50%) scale(1.2);
    -o-transform: translate(-50%, -50%) scale(1.2);
    border: 1px solid var(--accent-color);
}

.black_submit  .submit_icon-button {
    width: 210px;
}

.black_submit .submit_icon-button input {
    color: #000000 !important;
}

.black_submit .submit_icon-decor {
    border: 1px solid #000000;
}

/*
* DECORATED BUTTON WITH TEXT
*/

.callback_button {
    position: relative;
    width: 200px;
    height: 200px;
    cursor: pointer;
}

.callback_button-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 55px 0;
    line-height: 1;
    width: 140px;
    height: 140px;
    background: var(--accent-color);
    border-radius: 50%;
    color: #ffffff;
}

.callback_button svg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

svg textPath {
    font-size: 36px;
    font-family: sans-serif;
    text-transform: uppercase;
    letter-spacing: 0;
    fill: #111;
    background: #333;
}

/*
* FORM ERROS MODALS
*/

.swal-overlay {
    background-color: transparent;
    overflow: hidden;
}

.swal-modal {
    position: absolute;
    top: 20px;
    right: -100%;
    display: flex;
    align-items: center;
    padding: 15px;
    margin: 0;
    background: #f2f5f7;
    width: 0;
    max-width: 460px;
    transition: all .5s linear;
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -ms-transition: all .5s linear;
    -o-transition: all .5s linear;
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    -ms-border-radius: 0 !important;
    -o-border-radius: 0 !important;
}

.swal-red:before {
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    top: 0;
    left: 0;
    background: red;
    opacity: 0.2;
    z-index: -1;
}

.swal-overlay--show-modal .swal-modal {
    right: 0 !important;
    width: 100%;
}

.swal-icon {
    margin: 0 !important;
}

.swal-icon-success {
    transform: scale(0.8) !important;
    margin: 0 !important;
    -webkit-transform: scale(0.8) !important;
    -moz-transform: scale(0.8) !important;
    -ms-transform: scale(0.8) !important;
    -o-transform: scale(0.8) !important;
}

.swal-icon--error {
    min-width: 60px;
    min-height: 60px;
    width: 60px;
    height: 60px;
}

.swal-icon--error:first-child {
    margin-top: 20px;
}

.swal-icon--error__line {
    width: 27px;
    background-color: #f27474;
    top: 28px;
}

.swal-icon--success {
    width: 100%;
    max-width: 80px;
    height: 80px;
}

.swal-icon--success:first-child {
    margin-top: 20px;
}

.swal-green:before {
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    top: 0;
    left: 0;
    background: #a5dc85;
    opacity: 0.3;
    z-index: -1;
}

.swal-icon--success:after {
    top: -18px;
    left: 38px;
}

.swal-icon--success:before {
    top: -21px;
    left: -19px;
}

.swal-icon--success:after, .swal-icon--success:before, .swal-icon--success__hide-corners {
    background: transparent;
    background-color: transparent;
}

.swal-text {
    font-size: 14px;
    padding: 0 10px;
    text-align: left;
    max-width: 310px;
}

.swal-footer {
    display: none;
    text-align: center;
}

swal-button-container {
    width: 100%;
}

.swal-button {
    width: 100%;
    background: transparent;
    color: #000000;
    text-transform: uppercase;
}

.swal-button:not([disabled]):hover {
    background-color: transparent;
}

.swal-button:focus {
    box-shadow: none;
}

.swal-overlay--show-modal .swal-modal {
    -webkit-animation: none;
    animation: none;
    will-change: none;
}