/*

@Author: Themezinho
@URL: http://www.themezinho.net
 
This file contains the styling for the actual theme, this
is the file you need to edit to change the look of the
theme.


// Table of contents //

	01.	GOOGLE FONTS
	02.	BODY
	03.	CUSTOM CLASSES
	04. FORM ELEMENTS
	05.	SECTIONS
	06.	HTML TAGS
	07.	LINKS
	08.	MODAL
	09.	PAGINATION
	10. PRELOADER
	11.	TRANSITION OVERLAY
	12.	SANDWICH BUTTON
	13.	SCROLL DOWN
	14.	NAVIGATION MENU
	15.	HEADER
	16.	SOCIAL MEDIA
	17.	NAVBAR
	18.	SLIDER
	19.	PAGE HEADER
	20.	VIDEO BG
	21.	WORKS
	22.	FEATURES CONTENT
	23.	LISTING CONTENT
	24.	FULL MEDIA CONTENT
	25.	INTRODUCTION
	26. OUR TEAM
	27.	NEWS
	28.	SAY HELLO
	29.	LOGOS
	30.	FOOTER
	31.	RESPONSIVE TABLET FIXES
	32. REPSONSIVE MOBILE FIXES



*/


/* GOOGLE FONTS */

@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
* {
    outline: none !important;
}

body {
    font-size: 16px;
    background: #131313;
    font-family: 'Oswald', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    height: 100%;
    overflow: hidden;
}

html {
    height: 100%;
}


/* HTML ELEMENTS */

img {
    max-width: 100%;
}

b {
    font-weight: 600;
}

strong {
    font-weight: 800;
}


/* CUSTOM CLASSES */

@media (min-width: 1200px) {
    .container {
        max-width: 1240px;
    }
}

.header-spacing {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
}

.overflow {
    overflow: hidden;
}


/* FORM ELEMENTS */

input[type="text"] {
    height: 58px;
    line-height: 54px;
    display: inline-block;
    border: 2px solid #eee;
    padding: 0 20px;
}

textarea {
    height: 158px;
    line-height: 54px;
    display: inline-block;
    border: 2px solid #eee;
    padding: 20px;
}

label {
    display: block;
    font-weight: 600;
}

button[type="submit"] {
    height: 58px;
    display: inline-block;
    padding: 0 40px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    background: #000;
    color: #fff;
    border: none;
}


/* SECTIONS */

main {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    z-index: 5;
    background: #171819;
}


/* LINKS */

a {
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -ms-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
    color: #000;
}

a:hover {
    text-decoration: underline;
}


/* GLITCH ANIMZ */

@keyframes noise-anim {
    0% {
        clip: rect(61px, 9999px, 101px, 0);
    }
    5% {
        clip: rect(7px, 9999px, 65px, 0);
    }
    10% {
        clip: rect(118px, 9999px, 116px, 0);
    }
    15% {
        clip: rect(71px, 9999px, 128px, 0);
    }
    20% {
        clip: rect(30px, 9999px, 12px, 0);
    }
    25% {
        clip: rect(43px, 9999px, 105px, 0);
    }
    30% {
        clip: rect(1px, 9999px, 101px, 0);
    }
    35% {
        clip: rect(36px, 9999px, 48px, 0);
    }
    40% {
        clip: rect(125px, 9999px, 56px, 0);
    }
    45% {
        clip: rect(45px, 9999px, 57px, 0);
    }
    50% {
        clip: rect(30px, 9999px, 3px, 0);
    }
    55% {
        clip: rect(35px, 9999px, 35px, 0);
    }
    60% {
        clip: rect(96px, 9999px, 97px, 0);
    }
    65% {
        clip: rect(51px, 9999px, 56px, 0);
    }
    70% {
        clip: rect(81px, 9999px, 29px, 0);
    }
    75% {
        clip: rect(127px, 9999px, 100px, 0);
    }
    80% {
        clip: rect(81px, 9999px, 36px, 0);
    }
    85% {
        clip: rect(99px, 9999px, 1px, 0);
    }
    90% {
        clip: rect(89px, 9999px, 53px, 0);
    }
    95% {
        clip: rect(109px, 9999px, 64px, 0);
    }
    100% {
        clip: rect(5px, 9999px, 117px, 0);
    }
}

@keyframes noise-anim-2 {
    0% {
        clip: rect(48px, 9999px, 57px, 0);
    }
    5% {
        clip: rect(107px, 9999px, 17px, 0);
    }
    10% {
        clip: rect(41px, 9999px, 37px, 0);
    }
    15% {
        clip: rect(79px, 9999px, 128px, 0);
    }
    20% {
        clip: rect(101px, 9999px, 108px, 0);
    }
    25% {
        clip: rect(71px, 9999px, 89px, 0);
    }
    30% {
        clip: rect(43px, 9999px, 37px, 0);
    }
    35% {
        clip: rect(118px, 9999px, 80px, 0);
    }
    40% {
        clip: rect(95px, 9999px, 2px, 0);
    }
    45% {
        clip: rect(120px, 9999px, 69px, 0);
    }
    50% {
        clip: rect(81px, 9999px, 101px, 0);
    }
    55% {
        clip: rect(17px, 9999px, 106px, 0);
    }
    60% {
        clip: rect(23px, 9999px, 117px, 0);
    }
    65% {
        clip: rect(24px, 9999px, 5px, 0);
    }
    70% {
        clip: rect(37px, 9999px, 64px, 0);
    }
    75% {
        clip: rect(19px, 9999px, 129px, 0);
    }
    80% {
        clip: rect(83px, 9999px, 48px, 0);
    }
    85% {
        clip: rect(9px, 9999px, 10px, 0);
    }
    90% {
        clip: rect(66px, 9999px, 127px, 0);
    }
    95% {
        clip: rect(12px, 9999px, 51px, 0);
    }
    100% {
        clip: rect(81px, 9999px, 114px, 0);
    }
}


/* DOTS MENU */

.dots-menu {
    float: right;
    position: relative;
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
}

.dots-menu .pix {
    position: absolute;
    width: 4px;
    height: 4px;
    background-color: #fff;
    border-radius: 100%;
    transition: 0.2s ease-in-out;
}

.dots-menu .pix:nth-of-type(1) {
    transform: translate(0px, 0px);
}

.dots-menu .pix:nth-of-type(2) {
    transform: translate(8px, 0px);
}

.dots-menu .pix:nth-of-type(3) {
    transform: translate(16px, 0px);
}

.dots-menu .pix:nth-of-type(4) {
    transform: translate(0px, 8px);
}

.dots-menu .pix:nth-of-type(5) {
    transform: translate(8px, 8px);
}

.dots-menu .pix:nth-of-type(6) {
    transform: translate(16px, 8px);
}

.dots-menu .pix:nth-of-type(7) {
    transform: translate(0px, 16px);
}

.dots-menu .pix:nth-of-type(8) {
    transform: translate(8px, 16px);
}

.dots-menu .pix:nth-of-type(9) {
    transform: translate(16px, 16px);
}

.dots-menu:hover .pix {
    background-color: #33a16e;
}

.dots-menu:hover .pix:nth-of-type(1) {
    transform: translate(-4px, -4px);
}

.dots-menu:hover .pix:nth-of-type(3) {
    transform: translate(20px, -4px);
}

.dots-menu:hover .pix:nth-of-type(7) {
    transform: translate(-4px, 20px);
}

.dots-menu:hover .pix:nth-of-type(9) {
    transform: translate(20px, 20px);
}

.dots-menu.active .pix:nth-of-type(1) {
    transform: translate(0, 0);
}

.dots-menu.active .pix:nth-of-type(2) {
    transform: translate(4px, 4px);
}

.dots-menu.active .pix:nth-of-type(3) {
    transform: translate(16px, 0);
}

.dots-menu.active .pix:nth-of-type(4) {
    transform: translate(4px, 12px);
}

.dots-menu.active .pix:nth-of-type(6) {
    transform: translate(12px, 4px);
}

.dots-menu.active .pix:nth-of-type(7) {
    transform: translate(0, 16px);
}

.dots-menu.active .pix:nth-of-type(8) {
    transform: translate(12px, 12px);
}

.dots-menu.active .pix:nth-of-type(9) {
    transform: translate(16px, 16px);
}

.dots-menu.active:hover .pix:nth-of-type(1) {
    transform: translate(-4px, -4px);
}

.dots-menu.active:hover .pix:nth-of-type(2) {
    transform: translate(2px, 2px);
}

.dots-menu.active:hover .pix:nth-of-type(3) {
    transform: translate(20px, -4px);
}

.dots-menu.active:hover .pix:nth-of-type(4) {
    transform: translate(2px, 14px);
}

.dots-menu.active:hover .pix:nth-of-type(6) {
    transform: translate(14px, 2px);
}

.dots-menu.active:hover .pix:nth-of-type(7) {
    transform: translate(-4px, 20px);
}

.dots-menu.active:hover .pix:nth-of-type(8) {
    transform: translate(14px, 14px);
}

.dots-menu.active:hover .pix:nth-of-type(9) {
    transform: translate(20px, 20px);
}


/* MODAL */

.modal .modal-dialog {
    width: 600px;
    max-width: 100%;
    margin: 0 auto;
}

.modal .modal-dialog .modal-content {
    width: 100%;
    height: 300px;
    margin-top: 30%;
    border-radius: 0;
    border: none;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
    position: relative;
}

.modal .modal-dialog .modal-content .close {
    width: 50px;
    height: 50px;
    line-height: 50px;
    background: #33a16e;
    color: #fff;
    position: absolute;
    right: 0;
    top: 0;
    opacity: 1;
    text-align: center;
    font-size: 13px;
}

.modal #map {
    width: 100%;
    height: 300px;
    float: left;
}


/* PAGINATION */

.pagination {
    width: 100%;
    height: 40px;
    display: block;
    float: left;
    text-align: center;
    margin: 0;
}

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

.pagination li.page-item a.page-link {
    height: 40px;
    line-height: 36px;
    border: 2px solid #000;
    float: left;
    border-radius: 0 !important;
    font-size: 12px;
    color: #000;
    font-weight: 600;
    padding: 0 20px;
}


/* PRELOADER */

.preloader {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 13;
    background: #33a16e;
    -webkit-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    -moz-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    -o-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    /* custom */
    -webkit-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    -moz-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    -o-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    /* custom */
}

.preloader .inner {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url(../images/preloader.gif) center no-repeat #000;
    background-size: 80px 80px;
    -webkit-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    -moz-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    -o-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    /* custom */
    -webkit-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    -moz-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    -o-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    /* custom */
}

.preloader .holder {
    width: 100%;
    height: 26px;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: 50px;
    text-align: center;
}

.preloader .typewriter {
    height: 26px;
    line-height: 26px;
    display: inline-block;
    color: #fff;
}

.preloader .typewriter #typewriter-text {
    float: left;
    font-size: 12px;
    margin-left: 5px;
    margin-top: -2px;
    margin-right: 3px;
}

.preloader .typewriter #typewriter-suffix {
    width: 2px;
    height: 16px;
    display: inline-block;
    background: #33a16e;
    text-indent: -1000px;
    overflow: hidden;
}

.preloader .loader {
    width: 100%;
    height: 3px;
    border: none;
    border-radius: none;
    position: absolute;
    top: 0;
    left: 0;
}

.preloader .loader:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    z-index: 3;
    position: absolute;
    top: 0;
    left: 0;
}

.preloader .trackbar {
    width: 100%;
    height: 100%;
    border-radius: 0;
    color: #fff;
    text-align: center;
    position: relative;
    background: #808080;
    opacity: 0.99;
}

.preloader .loadbar {
    width: 0%;
    height: 100%;
    background: #33a16e;
    box-shadow: 0px 0px 10px #33a16e;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    animation: flicker 5s infinite;
    overflow: hidden;
}


/* PAGE LOADED */

.page-loaded {
    overflow: inherit;
}

.page-loaded .preloader {
    left: 100%;
    transition-delay: 0.5s;
}

.page-loaded .preloader .inner {
    left: 100%;
}

.page-loaded .navbar {
    transform: translateY(0);
}

.page-loaded .header {
    margin: 0;
}

.page-loaded .header .slider {
    transform: scale(1);
    opacity: 1;
}

.page-loaded .header .slider .gallery-thumbs {
    transform: translateX(0);
    opacity: 1;
}


/* TRANSITION OVERLAY */

.transition-overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 13;
    visibility: hidden;
}

.transition-overlay .black-layer {
    width: 100%;
    height: 100%;
    position: absolute;
    left: -100%;
    top: 0;
    z-index: 3;
    background: #000;
    -webkit-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    -moz-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    -o-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    /* custom */
    -webkit-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    -moz-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    -o-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    /* custom */
}

.transition-overlay .green-layer {
    width: 100%;
    height: 100%;
    position: absolute;
    left: -100%;
    top: 0;
    z-index: 2;
    background: #33a16e;
    -webkit-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    -moz-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    -o-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    /* custom */
    -webkit-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    -moz-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    -o-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    /* custom */
}

.transition-overlay.open {
    visibility: visible;
}

.transition-overlay.open .green-layer {
    left: 0;
    transition-delay: 0s;
}

.transition-overlay.open .black-layer {
    left: 0;
    transition-delay: 0.4s;
}


/* SANDWICH BUTTON */

.sandwich-btn {
    width: 46px;
    height: 46px;
    float: right;
    position: relative;
    cursor: pointer;
    border-radius: 50%;
}

.sandwich-btn span {
    display: block;
    height: 2px;
    width: 18px;
    background: rgb(135 151 173);
    opacity: 1;
    position: absolute;
    right: 8px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.sandwich-btn span:nth-child(1) {
    top: 12px;
}

.sandwich-btn span:nth-child(2) {
    top: 20px;
}

.sandwich-btn.open span:nth-child(1) {
    top: 16px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
}

.sandwich-btn.open span:nth-child(2) {
    top: 16px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
}


/* NAVIGATION MENU */

.navigation-menu {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 8;
    visibility: hidden;
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -ms-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.navigation-menu .black-layer {
    width: 100%;
    height: 100%;
    position: absolute;
    left: -100%;
    top: 0;
    z-index: 3;
    background: #000;
    -webkit-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    -moz-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    -o-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    /* custom */
    -webkit-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    -moz-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    -o-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    /* custom */
}

.navigation-menu .green-layer {
    width: 100%;
    height: 100%;
    position: absolute;
    left: -100%;
    top: 0;
    z-index: 2;
    background: #33a16e;
    -webkit-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    -moz-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    -o-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    /* custom */
    -webkit-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    -moz-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    -o-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    /* custom */
}

.navigation-menu .inner {
    color: #fff;
    position: relative;
    z-index: 4;
    text-align: center;
    -webkit-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    -moz-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    -o-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    /* custom */
    -webkit-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    -moz-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    -o-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    /* custom */
    opacity: 0;
    transform: scale(1.1);
}

.navigation-menu .inner ul {
    display: block;
    margin: 0;
    padding: 0;
}

.navigation-menu .inner ul li {
    display: block;
    margin: 0;
    padding: 0;
    position: relative;
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -ms-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.navigation-menu .inner ul li:hover ul {
    opacity: 1;
    visibility: visible;
}

.navigation-menu .inner ul li:hover ul li ul {
    opacity: 0;
    visibility: hidden;
}

.navigation-menu .inner ul li ul {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: row;
    background: rgba(0, 0, 0, 0.95);
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -ms-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
    transition-delay: 0s !important;
}

.navigation-menu .inner ul li ul li {
    margin: 0 20px;
    padding: 0;
    list-style: none;
    position: static;
}

.navigation-menu .inner ul li ul li ul {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 0;
    opacity: 0;
    visibility: hidden;
    background: rgba(0, 0, 0, 0.95);
    transform: translateX(-50%);
}

.navigation-menu .inner ul li ul li ul li a {
    font-size: 18px;
}

.navigation-menu .inner ul li ul li:hover ul {
    opacity: 1;
    visibility: visible;
    z-index: 5;
}

.navigation-menu .inner ul li ul li a {
    float: left;
    font-size: 18px;
}

.navigation-menu .inner ul li ul li a:before {
    display: none;
}

.navigation-menu .inner ul li ul li a:hover {
    color: #33a16e;
}

.navigation-menu .inner ul li a {
    font-size: 35px;
    font-weight: 800;
    color: #fff;
    position: relative;
}

.navigation-menu .inner ul li a:before {
    content: "";
    width: 0;
    height: 10px;
    position: absolute;
    left: 0;
    bottom: 7px;
    background: #33a16e;
    z-index: -1;
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -ms-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.navigation-menu .inner ul li a:hover {
    text-decoration: none;
}

.navigation-menu .inner ul li a:hover:before {
    width: 100%;
}

.navigation-menu .inner address {
    margin-top: 50px;
    font-size: 18px;
    /* font-family: 'Fjalla One', sans-serif; */
}

.navigation-menu.open {
    visibility: visible;
}

.navigation-menu.open .green-layer {
    left: 0;
    transition-delay: 0s;
}

.navigation-menu.open .black-layer {
    left: 0;
    transition-delay: 0.4s;
}

.navigation-menu.open .inner {
    opacity: 1;
    transition-delay: 0.5s;
    transform: scale(1);
}


/* HEADER */

.header {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    position: fixed;
    left: 0;
    top: 0;
}


/* SOCIAL MEDIA */

.social-media {
    width: 38px;
    position: absolute;
    z-index: 7;
    right: 60px;
    top: 38%;
    text-align: center;
    margin: 0;
    padding: 0;
}

.social-media li {
    width: 100%;
    float: left;
    display: block;
    padding: 0;
    list-style: none;
}

.social-media li a {
    width: 100%;
    float: left;
    color: #fff;
    font-size: 13px;
    margin: 10px 0;
}

.social-media li a:hover {
    color: #33a16e;
}


/* SCROLL DOWN */

.scroll-down {
    width: 1px;
    height: 90px;
    position: absolute;
    right: 63px;
    bottom: 30px;
    z-index: 2;
}

.scroll-down b {
    width: 100px;
    font-size: 10px;
    font-weight: 600;
    color: rgb(0 0 0 / 38%);
    transform-origin: left;
    margin-left: -15px;
    margin-top: 0;
    transform: rotate(90deg);
    float: left;
}

.scroll-down span {
    display: block;
    position: relative;
    padding-top: 79px;
    text-align: center;
}

.scroll-down span::before {
    -webkit-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
    -moz-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
    -o-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
    animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
}

.scroll-down span::before {
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -0.5px;
    width: 1px;
    height: 90px;
    background: rgb(0 0 0 / 38%);
    content: "";
}


/* NAVBAR */

.navbar {
    width: 100%;
    height: 130px;
    display: flex;
    flex-wrap: wrap;
    padding: 20px 60px;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 11;
    transform: translateY(-100%);
    -webkit-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    -moz-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    -o-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    /* custom */
    -webkit-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    -moz-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    -o-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    /* custom */
    transition-delay: 0.8s;
}

.navbar.hide {
    transform: translateY(-100%);
}

.navbar .logo {
    margin-left: 0;
    margin-right: 30px;
}

.navbar .logo img {
    height: 115px;
}

.navbar .email-us {
    margin-left: 0;
    margin-right: auto;
    color: #fff;
    font-size: 14px;
}

.navbar .email-us a {
    color: #808080;
    text-decoration: underline;
}

.navbar .email-us a:hover {
    color: #fff;
}

.navbar .email-us a span {
    color: #fff;
    text-decoration: underline;
}

.navbar .languages {
    margin-right: 50px;
    /* font-family: 'Fjalla One', sans-serif; */
}

.navbar .languages a {
    float: left;
    margin-left: 10px;
    color: #808080;
    font-size: 14px;
    color: #808080;
}

.navbar .languages a:hover {
    color: #33a16e;
    text-decoration: none;
}

.navbar .languages a.active {
    color: #fff;
}

.navbar .sandwich-nav {
    margin-right: 0;
}

.navbar .sandwich-nav b {
    font-size: 14px;
    line-height: 38px;
    color: rgb(135 151 173);
    font-weight: 400;
    /* font-family: 'Fjalla One', sans-serif; */
}

.navbar .sandwich-nav .circle {
    width: 38px;
    height: 38px;
    float: right;
    border: 2px solid rgb(135 151 173);
    border-radius: 50%;
    margin-left: 10px;
    position: relative;
    cursor: pointer;
}

.navbar .sandwich-nav .circle.open {
    border-color: #fff;
    background: #fff;
}

.navbar .sandwich-nav .circle.open span {
    background: #000;
}


/* SLIDER */

.header {
    margin: 0;
}

.header .slider {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transform: scale(1.4);
    -webkit-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    -moz-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    -o-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    /* custom */
    -webkit-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    -moz-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    -o-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    /* custom */
    transition-delay: 0.6s;
    opacity: 0;
}

.header .slider:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url(../images/lines.png);
    z-index: 1;
}

.header .gallery-top {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    background: #000;
}

.header .gallery-top .swiper-wrapper {
    opacity: 0.6;
}

.header .gallery-top .swiper-wrapper .slide-inner {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header .gallery-thumbs {
    height: 60%;
    position: absolute;
    left: 60px;
    top: 20%;
    z-index: 2;
    overflow: hidden;
    transform: translateX(-100px);
    opacity: 0;
    -webkit-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    -moz-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    -o-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
    /* custom */
    -webkit-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    -moz-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    -o-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
    /* custom */
    transition-delay: 0.8s;
}

.header .gallery-thumbs .swiper-slide {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 55px;
    color: #808080;
    font-weight: 700;
    text-transform: uppercase;
}

.header .gallery-thumbs .swiper-slide.swiper-slide-active {
    color: #fff;
}

.header .gallery-thumbs .swiper-slide.swiper-slide-active a {
    display: block;
}

.header .gallery-thumbs .swiper-slide a {
    font-size: 14px;
    display: none;
    float: right;
    color: #33a16e;
    font-weight: 600;
    margin-bottom: 0;
    margin-top: -10px;
}

.header .gallery-thumbs .swiper-slide a:hover {
    text-decoration: none;
}

.header .gallery-thumbs .swiper-slide a:hover .plus {
    color: #000;
    background: #fff;
}

.header .gallery-thumbs .swiper-slide a .plus {
    width: 30px;
    height: 30px;
    display: inline-block;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    margin-left: 6px;
    text-align: center;
    line-height: 27px;
    color: #fff;
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -ms-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.header .swiper-pagination {
    width: auto;
    position: absolute;
    left: 60px;
    bottom: 30px;
    color: #fff;
    z-index: 99;
}

.header .swiper-pagination span:first-child {
    font-size: 56px;
    height: 50px;
    line-height: 50px;
    float: left;
    overflow: hidden;
    padding-top: 3px;
    font-weight: 600;
}

.header .swiper-pagination span:last-child {
    font-size: 14px;
}

.header .swiper-pagination span:before {
    content: "0";
}


/* PARTICLES MASK */

.particles-mask {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/pattern-bg2.png) center no-repeat #131313;
    background-size: auto 100% !important;
    padding: 0 100px;
}

.particles-mask .inner {
    width: 100%;
}

.particles-mask .inner .masker {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.particles-mask .inner .masker h1 {
    display: inline-block;
    margin-bottom: 15px;
    font-size: 8vw;
    padding: 1px !important;
    margin: 100px 0;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    position: relative;
}

.particles-mask .inner .masker h1:before {
    content: attr(data-text);
    position: absolute;
    left: -2px;
    text-shadow: 1px 0 blue;
    top: 0;
    color: white;
    overflow: hidden;
    clip: rect(0, 900px, 0, 0);
    animation: noise-anim-2 3s infinite linear alternate-reverse;
}

.particles-mask .inner .masker h1:after {
    content: attr(data-text);
    position: absolute;
    left: 2px;
    text-shadow: -1px 0 red;
    top: 0;
    color: white;
    overflow: hidden;
    clip: rect(0, xw00px, 0, 0);
    animation: noise-anim 2s infinite linear alternate-reverse;
}

.particles-mask .inner h5 {
    color: #fff;
    font-weight: 300;
    font-size: 20px;
    padding: 0 30%;
    line-height: 30px;
    margin-bottom: 40px;
}

.particles-mask .inner a {
    height: 58px;
    line-height: 56px;
    display: inline-block;
    border: 1px solid #fff;
    color: #fff;
    padding: 0 45px;
    font-size: 12px;
    font-weight: 600;
}

.particles-mask .inner a:hover {
    background: #33a16e;
    color: #fff;
    border-color: #33a16e;
    text-decoration: none;
}

.particles-mask #particles-js {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    mix-blend-mode: darken;
}


/* MOTION BLUR */

.motion-blur {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    left: 0;
    top: 0;
}

.motion-blur canvas {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.motion-blur .inner {
    display: inline-block;
    position: relative;
    z-index: 2;
    text-align: center;
}

.motion-blur .inner h1 {
    font-size: 10vw;
    font-weight: 800;
    color: #fff;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #fff;
    line-height: 1;
    margin-bottom: 20px;
}

.motion-blur .inner h5 {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 40px;
}

.motion-blur .inner a {
    width: 48px;
    height: 48px;
    line-height: 46px;
    display: inline-block;
    text-align: center;
    color: #fff;
    border-radius: 50%;
    font-size: 24px;
    font-weight: 300;
    border: 2px solid #fff;
}

.motion-blur .inner a:hover {
    background: #fff;
    color: #000;
    text-decoration: none;
}


/* ANIMATION BG*/

.animation-bg {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    left: 0;
    top: 0;
    background: url(../images/anim-hero.gif) center no-repeat #131313;
}

.animation-bg .inner {
    display: inline-block;
    position: relative;
    z-index: 2;
    text-align: center;
}

.animation-bg .inner img {
    display: inline-block;
    width: 650px;
    max-width: 100%;
}


/* VIDEO HERO */

.video-hero {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    left: 0;
    top: 0;
}

.video-hero .inner {
    display: inline-block;
    position: relative;
    z-index: 2;
    text-align: center;
}

.video-hero .inner h1 {
    font-size: 10vw;
    font-weight: 800;
    color: #fff;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #fff;
    line-height: 1;
    margin-bottom: 20px;
}

.video-hero .inner h5 {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 40px;
}

.video-hero a {
    height: 58px;
    line-height: 56px;
    display: inline-block;
    border: 1px solid #fff;
    color: #fff;
    padding: 0 45px;
    font-size: 12px;
    font-weight: 600;
}

.video-hero a:hover {
    background: #33a16e;
    color: #fff;
    border-color: #33a16e;
    text-decoration: none;
}


/* KINETIC SLIDER */

.kinetic-slider {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.kinetic-slider canvas {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.slider-controls {
    display: flex;
    position: absolute;
    left: 60px;
    bottom: 0;
    z-index: 1;
    padding: 20px 0;
    color: #fff;
}

.slider-controls .main-nav {
    display: inline-block;
    cursor: pointer;
    /* font-family: 'Fjalla One', sans-serif; */
}

.slider-controls .prev {
    margin-right: 15px;
}


/* PAGE HEADER */

.page-header {
    width: 100%;
    height: 600px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    position: relative;
    background: #000;
    position: fixed;
    left: 0;
    top: 0;
}

.page-header:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url(../images/lines.png);
    z-index: 1;
}

.page-header .inner {
    width: 100%;
    padding: 0 60px;
    margin-top: 39px;
    position: relative;
    z-index: 3;
}

.page-header .inner h2 {
    font-size: 4em;
    font-weight: 800;
    line-height: 1;
    color: #274f77;
    position: relative;
}

.page-header .inner h2:before {
    content: attr(data-text);
    position: absolute;
    left: -2px;
    text-shadow: 1px 0 blue;
    top: 0;
    color: #232a34;
    overflow: hidden;
    clip: rect(0, 900px, 0, 0);
    animation: noise-anim-2 3s infinite linear alternate-reverse;
}

.page-header .inner h2:after {
    content: attr(data-text);
    position: absolute;
    left: 2px;
    text-shadow: -1px 0 red;
    top: 0;
    color: #8594aa;
    overflow: hidden;
    clip: rect(0, xw00px, 0, 0);
    animation: noise-anim 2s infinite linear alternate-reverse;
}

.page-header .inner p {
    font-size: 26px;
    line-height: 40px;
    color: #fff;
    font-weight: 300;
    margin-bottom: 0;
    padding-right: 40%;
}

.page-header-spacing {
    width: 100%;
    height: 600px;
    display: flex;
    flex-wrap: nowrap;
}


/* VIDEO BG */

.video-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    background: #000;
}

.video-bg video {
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    padding: 10px 0 10px 0;
    opacity: 0.4;
}


/* WORKS */

.works {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-top: 150px;
    padding-bottom: 50px;
}

.works.two-cols ul li {
    width: 50%;
}

.works.four-cols ul li {
    width: 25%;
}

.works.four-cols ul li figure figcaption {
    padding: 20px;
}

.works.four-cols ul li figure figcaption h3 {
    font-size: 20px;
    margin-left: -30px;
}

.works.four-cols ul li figure figcaption small {
    margin-bottom: 20px;
}

.works ul {
    width: 100%;
    float: left;
    margin: 0;
    padding: 0;
}

.works ul li {
    width: 33.33333%;
    float: left;
    margin: 0;
    margin-bottom: 30px;
    padding: 0 3%;
    list-style: none;
}


/* 
.works ul li:nth-child(2n+2) {
  margin-top: 20px;
} */


/* .works ul li:nth-child(3n+3) {
  margin-top: 20px;
} */

.works ul li figure {
    position: relative;
    width: 100%;
    height: 100%;
    float: left;
    margin: 0;
    transform-style: preserve-3d;
}

.works ul li figure * {
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -ms-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.works ul li figure:hover {
    margin: 0;
}

.works ul li figure:hover .thumb {
    box-shadow: 4px 21px 44px -13px rgba(0, 0, 0, 0.75);
}

.works ul li figure:hover figcaption {
    text-shadow: 2px 10px 10px rgba(0, 0, 0, 0.35);
}

.works ul li figure:hover figcaption a {
    opacity: 1;
}

.works ul li figure:hover figcaption .brand {
    opacity: 1;
}

.works ul li figure .thumb {
    width: 100%;
}

.works ul li figure figcaption {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0 30px;
    padding-bottom: 50px;
    transform: translateZ(20px);
}

.works ul li figure figcaption .brand {
    height: 30px;
    margin-bottom: 40px;
    opacity: 0;
}

.works ul li figure figcaption h3 {
    font-weight: 800;
    color: #fff;
    margin-left: -30px;
}

.works ul li figure figcaption small {
    font-size: 10px;
    color: #fff;
    display: block;
    margin-bottom: 50px;
    font-weight: 600;
}

.works ul li figure figcaption a {
    display: inline-block;
    color: #fff;
    font-size: 12px;
    /* font-family: 'Fjalla One', sans-serif; */
    border-bottom: 2px solid #fff;
    padding-bottom: 2px;
    opacity: 0;
}

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


/* WORKS FILTER */

.filter-bar {
    width: 100%;
    float: left;
    margin-bottom: 60px;
}

.filter-bar .works-filter {
    float: left;
    line-height: 20px;
    margin: 0;
    padding: 0;
}

.filter-bar .works-filter li {
    float: left;
    margin: 0;
    margin-right: 10px;
    padding: 0;
    list-style: none;
    opacity: 0;
    transform: translateY(10px);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -ms-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.filter-bar .works-filter li:nth-child(1) {
    transition-delay: 0s;
}

.filter-bar .works-filter li:nth-child(2) {
    transition-delay: 0.05s;
}

.filter-bar .works-filter li:nth-child(3) {
    transition-delay: 0.10s;
}

.filter-bar .works-filter li:nth-child(4) {
    transition-delay: 0.15s;
}

.filter-bar .works-filter li:nth-child(5) {
    transition-delay: 0.20s;
}

.filter-bar .works-filter li:nth-child(6) {
    transition-delay: 0.25s;
}

.filter-bar .works-filter li:nth-child(7) {
    transition-delay: 0.30s;
}

.filter-bar .works-filter li:nth-child(8) {
    transition-delay: 0.35s;
}

.filter-bar .works-filter li:nth-child(9) {
    transition-delay: 0.40s;
}

.filter-bar .works-filter li a {
    float: left;
    font-size: 13px;
    color: #fff;
    /* font-family: 'Fjalla One', sans-serif; */
    border-bottom: 2px solid transparent;
    padding: 0 2px;
    padding-bottom: 2px;
}

.filter-bar .works-filter li a.current {
    color: #33a16e;
    border-bottom: 2px solid #33a16e;
}

.filter-bar .works-filter li a:hover {
    color: #33a16e;
    text-decoration: none;
}

.filter-bar .works-filter.active li {
    opacity: 1;
    transform: translateY(0);
}

.filter-btn {
    float: right;
}

.filter-btn span {
    float: right;
    line-height: 22px;
    font-weight: 600;
    font-size: 13px;
    margin-right: 20px;
    color: #fff;
}


/* CASE DETAIL */

.case-details {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background: #fff;
}

.case-details figure {
    width: 100%;
    float: left;
    margin-bottom: 30px;
}

.case-details figure img {
    width: 100%;
    float: left;
}

.case-details h3 {
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 20px;
    margin-top: 10px;
}

.case-details h3 span {
    color: #284f77;
}

#case-section-1 {
    margin: 20px 0;
}

.case-details h6 {
    font-weight: 300;
    font-size: 24px;
    line-height: 34px;
    padding-right: 40%;
    margin-bottom: 20px;
}

.case-details p {
    color: #808080;
    font-size: 15px;
    margin: 10px 0;
}

.case-details p:last-child {
    margin-bottom: 60px;
}

.case-details .case-navbar {
    width: 100%;
    float: left;
    margin-bottom: 0;
    background: #fff;
    padding: 0;
    text-align: center;
    z-index: 2;
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top: 0;
}

.case-details .case-navbar ul {
    width: 100%;
    float: left;
    padding: 30px 0;
    margin: 0;
}

.case-details .case-navbar ul li {
    display: inline-block;
    margin: 0 30px;
    padding: 0;
    list-style: none;
}

.case-details .case-navbar ul li a {
    font-weight: 600;
}

.case-details .case-navbar ul li a:hover {
    color: #33a16e;
    text-decoration: none;
}


/* FEATURES CONTENT */

.features-content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-top: 150px;
    padding-bottom: 80px;
    background: #fff;
}

.features-content h2 {
    font-size: 50px;
    font-weight: 800;
    margin-bottom: 40px;
    margin-top: -10px;
}

.features-content h6 {
    font-size: 17px;
    font-weight: 300;
    line-height: 30px;
    color: #808080;
    padding-right: 20%;
}

.features-content h5 {
    font-size: 20px;
    font-weight: 300;
    color: #808080;
    margin-top: -20px;
    margin-bottom: 80px;
}

.features-content img {
    height: 55px;
    /* margin-bottom: 20px; */
}

.features-content h4 {
    font-weight: 800;
    font-size: 15px;
    margin-bottom: 20px;
}

.features-content p {
    font-size: 14px;
    color: #808080;
    line-height: 22px;
}

.features-content ul {
    width: 100%;
    float: left;
    margin: 0;
    margin-top: -13px;
    margin-bottom: 70px;
    padding: 0;
}

.features-content ul li {
    width: 100%;
    float: left;
    margin: 0;
    padding: 5px 0;
    list-style: none;
    font-size: 14px;
    color: #808080;
}

.features-content a {
    font-size: 12px;
    color: #33a16e;
    display: inline-block;
    font-weight: 600;
    margin-bottom: 70px;
    position: relative;
}

.features-content a:before {
    content: "";
    width: 0;
    height: 2px;
    background: #33a16e;
    position: absolute;
    left: 0;
    bottom: 0;
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -ms-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.features-content a:hover {
    text-decoration: none;
}

.features-content a:hover:before {
    width: 100%;
}


/* LISTING CONTENT */

.listing-content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 150px 0;
    color: #fff;
}

.listing-content h3 {
    /* font-family: 'Fjalla One', sans-serif; */
}

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

.listing-content ul li {
    width: 100%;
    margin: 0;
    padding: 10px 0;
    list-style: none;
    font-size: 13px;
}


/* FULL MEDIA CONTENT */

.full-media-content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background-size: cover !important;
    position: relative;
}

.full-media-content .video-bg video {
    opacity: 1;
}

.full-media-content .sides {
    flex: 1;
    padding: 150px 0;
    position: relative;
}

.full-media-content .sides figure {
    width: 50%;
    position: relative;
    z-index: 2;
    float: right;
    margin-bottom: 0;
    margin-right: -40px;
    border: 10px solid #fff;
}

.full-media-content .sides figure img {
    width: 100%;
    height: 100%;
}

.full-media-content .inner-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
}

.full-media-content .inner-content .inner {
    max-width: 700px;
    padding: 0 100px;
}

.full-media-content .inner-content h5 {
    /* font-family: 'Fjalla One', sans-serif; */
    font-size: 20px;
    line-height: 1;
    text-transform: uppercase;
}

.full-media-content .inner-content h2 {
    font-weight: 800;
    font-size: 60px;
    margin-bottom: 40px;
}

.full-media-content .inner-content p {
    color: #fff;
    margin-bottom: 40px;
    font-weight: 300;
}

.full-media-content .inner-content a {
    height: 58px;
    line-height: 54px;
    display: inline-block;
    border: 2px solid #fff;
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    padding: 0 50px;
}

.full-media-content .inner-content a:hover {
    background: #fff;
    color: #000;
    text-decoration: none;
}


/* INTRODCUTION */

.introduction {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 150px 0;
    background: #fff;
}

.introduction h2 {
    font-weight: 800;
    margin-bottom: 30px;
}

.introduction h6 {
    font-weight: 600;
    margin-bottom: 10px;
}

.introduction h4 {
    font-weight: 300;
    margin-bottom: 30px;
    margin-top: 5px;
    line-height: 34px;
}

.introduction p {
    display: block;
    color: #808080;
    line-height: 26px;
}

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

.introduction p span {
    position: relative;
    display: inline-block;
}

.introduction p span:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 3px;
    width: 100%;
    height: 5px;
    mix-blend-mode: hard-light;
    background: #33a16e;
}


/* OUR TEAM */

.our-team {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-top: 150px;
    background: #f3f3f3;
}

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

.our-team figure {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    position: relative;
    margin: 0;
    overflow: hidden;
}

.our-team figure img {
    width: 100%;
    float: left;
    filter: grayscale(1);
    mix-blend-mode: multiply;
}

.our-team figure figcaption {
    width: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 20px;
    opacity: 0;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}

.our-team figure figcaption h4 {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0;
}

.our-team figure figcaption small {
    font-size: 12px;
    color: #fff;
}

.our-team figure:hover {
    background: url(../images/team-splash.png) center no-repeat;
    background-size: cover;
}

.our-team figure:hover img {
    transform: translateY(20px);
}

.our-team figure:hover figcaption {
    opacity: 1;
}


/* NEWS */

.news {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 150px 0;
    background: #fff;
}

.news .post {
    width: 100%;
    float: left;
    margin-bottom: 60px;
}

.news .post.post-single {
    margin-bottom: 0;
}

.news .post.post-single .post-content .post-title {
    font-size: 60px;
    line-height: 70px;
}

.news .post.post-single p:last-child {
    margin-bottom: 0;
}

.news .post .post-image {
    width: 100%;
    float: left;
    margin-bottom: 30px;
}

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

.news .post .post-content {
    width: 100%;
    float: left;
    padding: 0 50px;
}

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

.news .post .post-content .social-share li {
    float: left;
    margin-right: 5px;
    padding: 0;
    list-style: none;
    text-align: center;
}

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

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

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

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

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

.news .post .post-content .social-share li a {
    width: 44px;
    height: 44px;
    line-height: 44px;
    float: left;
    background: #33a16e;
    color: #fff;
    border: none;
    border-radius: 0;
}

.news .post .post-content .author {
    width: 100%;
    float: left;
    margin-bottom: 30px;
}

.news .post .post-content .author img {
    height: 40px;
    float: left;
    margin-right: 15px;
    border-radius: 50%;
}

.news .post .post-content .author span {
    float: left;
    line-height: 40px;
    font-size: 13px;
    color: #808080;
}

.news .post .post-content .author span b {
    font-weight: 600;
}

.news .post .post-content .post-categories {
    width: 100%;
    float: left;
    font-size: 13px;
    margin: 0;
    padding: 0;
    margin-bottom: 10px;
}

.news .post .post-content .post-categories li {
    float: left;
    margin: 0;
    margin-right: 7px;
    padding: 0;
    list-style: none;
}

.news .post .post-content .post-categories li a {
    float: left;
    color: #808080;
    text-decoration: underline;
}

.news .post .post-content .post-categories li a:hover {
    color: #33a16e;
}

.news .post .post-content .post-title {
    display: block;
    font-weight: 800;
    font-size: 40px;
    line-height: 50px;
    margin-bottom: 20px;
}

.news .post .post-content h5 {
    font-weight: 600;
    color: #33a16e;
    margin-bottom: 15px;
}

.news .post .post-content .post-date {
    display: block;
    margin-bottom: 20px;
    color: green;
    font-weight: 600;
}

.news .post .post-content p {
    display: block;
    margin-bottom: 20px;
    color: #808080;
    line-height: 27px;
}

.news .post .post-content blockquote {
    width: 100%;
    display: block;
    background: #33a16e;
    padding: 20px;
    color: #fff;
}

.news .post .post-content blockquote p {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: 30px;
}

.news .post .post-content blockquote h5 {
    color: #fff;
    font-weight: 400;
    /* font-family: 'Fjalla One', sans-serif; */
    margin: 0;
    text-transform: uppercase;
    opacity: 0.7;
}

.news .post .post-content ul {
    width: 100%;
    display: block;
    margin-bottom: 20px;
    padding-left: 20px;
}

.news .post .post-content ul li {
    color: #808080;
    margin: 0;
    padding: 4px 0;
}

.news .post .post-content .post-link {
    font-size: 15px;
    color: #33a16e;
    display: inline-block;
    /* font-family: 'Fjalla One', sans-serif; */
    font-weight: 400;
    margin-bottom: 70px;
    position: relative;
    padding-bottom: 3px;
}

.news .post .post-content .post-link:before {
    content: "";
    width: 100%;
    height: 2px;
    background: #33a16e;
    position: absolute;
    left: 0;
    bottom: 0;
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -ms-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.news .post .post-content .post-link:hover {
    text-decoration: none;
}

.news .post .post-content .post-link:hover:before {
    width: 0;
}


/* SAY HELLO */

.say-hello {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 150px 0;
    background: #fff;
}

.say-hello h3 {
    font-size: 50px;
    font-weight: 800;
    margin-bottom: 40px;
}

.say-hello .contact-box {
    width: 100%;
    float: left;
    margin-bottom: 30px;
}

.say-hello .contact-box span {
    display: block;
    color: #808080;
    font-size: 13px;
    font-weight: 600;
}

.say-hello .contact-box a {
    display: inline-block;
    color: #000;
}

.say-hello .map-link {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 40px;
    text-decoration: underline;
    color: #33a16e;
}

.say-hello .alert {
    width: 100%;
    float: left;
    border-radius: 0;
    border: none;
    padding: 30px 20px;
}

.say-hello .alert-danger {
    background: red;
    color: #fff;
}

.say-hello .alert-success {
    background: green;
    color: #fff;
}

.say-hello form {
    width: 100%;
    padding-right: 40%;
}

.say-hello form input[type="text"] {
    width: 100%;
    float: left;
}

.say-hello form textarea {
    width: 100%;
    float: left;
}

.say-hello form label {
    font-size: 13px;
    color: #808080;
}

.say-hello #success,
.say-hello #error {
    display: none;
}

.say-hello #success,
.say-hello #error {
    float: left;
}

.say-hello #contact label.error {
    width: 100%;
    float: left;
    color: #f50c1a;
    margin-top: 10px;
}

.say-hello #contact input.error {
    width: 100%;
    border: 2px solid #f50c1a;
}

.say-hello #contact textarea.error {
    width: 100%;
    border: 2px solid #f50c1a;
}


/* LOGOS */

.logos {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background: #fff;
}

.client {
    background: #c8c8c8;
    padding: 19px 0px;
}

.client-2 {
    background: #c8c8c8;
    padding: 19px 0px;
}

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

.logos ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin: 0;
    padding: 0;
}

.logos ul li {
    width: 20%;
    margin: 10px 0;
    padding: 0;
    list-style: none;
    text-align: center;
    position: relative;
}

.logos ul li:hover img {
    opacity: 0;
    transform: scale(1.1);
}

.logos ul li:hover h6 {
    opacity: 1;
    margin-top: -10px;
}

.logos ul li figure {
    margin: 0 24px;
    display: flex !important;
    justify-content: center !important;
}

.logos ul li figure img {
    height: 65px;
    width: 55%;
}

.logos ul li figure h6 {
    width: 100%;
    height: 20px;
    line-height: 20px;
    position: absolute;
    top: 50%;
    margin-top: 0;
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
}


/* FOOTER */

.footer {
    width: 100%;
    display: flex;
    color: #fff;
    background: url(../images/anim-hero.gif) center no-repeat #131313;
    text-align: center;
    padding-top: 150px;
    padding-bottom: 50px;
    position: relative;
}

.footer img {
    height: 55px;
    display: inline-block;
    margin-bottom: 20px;
}

.footer h2 {
    font-size: 60px;
    font-weight: 700;
    margin-bottom: 30px;
}

.footer h5 {
    /* font-family: 'Fjalla One', sans-serif; */
    text-transform: uppercase;
    margin-bottom: 50px;
    color: #808080;
}

.footer ul {
    display: inline-block;
    margin-bottom: 20px;
    padding: 0;
}

.footer ul li {
    float: left;
    margin: 0 10px;
    padding: 0;
    list-style: none;
}

.footer ul li a {
    font-size: 12px;
    color: #fff;
}

.footer ul li a:hover {
    color: #33a16e;
}

.footer span {
    display: block;
    font-size: 11px;
    color: #989898;
}


/* RESPONSIVE TABLET FIXES */

@media only screen and (max-width: 991px),
only screen and (max-device-width: 991px) {
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="submit"],
    textarea {
        border-radius: 0 !important;
        box-shadow: none !important;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }
    .header .gallery-thumbs {
        height: 60%;
        top: 20%;
    }
    .header .gallery-thumbs .swiper-slide {
        font-size: 70px;
    }
    .works ul li {
        width: 50%;
    }
    .works.four-cols ul li {
        width: 33.33333%;
    }
    .features-content h6 {
        margin-bottom: 50px;
        margin-top: -30px;
    }
    .full-media-content {
        flex-direction: column;
    }
    .full-media-content .sides figure {
        float: none;
        margin: 0 auto;
    }
    .full-media-content .inner-content {
        flex: none;
    }
    .page-header .inner h2 {
        font-size: 5em;
    }
    .page-header .inner p {
        padding-right: 20%;
    }
    .say-hello form {
        padding-right: 0;
        width: auto;
    }
    .say-hello form .form-group:last-child {
        margin-bottom: 0;
    }
}


/* RESPONSIVE MOBILE FIXES */

@media only screen and (max-width: 767px),
only screen and (max-device-width: 767px) {
    .hide-mobile {
        display: none;
    }
    .navbar {
        padding: 20px 30px;
    }
    .navbar .email-us {
        display: none;
    }
    .navigation-menu .inner ul li a {
        font-size: 40px;
    }
    .navigation-menu .inner ul li ul li {
        margin: 0 15px;
    }
    .navigation-menu .inner address {
        font-size: 16px;
    }
    .header .swiper-pagination {
        left: 30px;
    }
    .header .gallery-thumbs {
        left: 30px;
        height: 30%;
        top: 35%;
    }
    .header .gallery-thumbs .swiper-slide {
        font-size: 50px;
    }
    .header .gallery-thumbs .swiper-slide a {
        margin-top: 0;
    }
    .particles-mask {
        padding: 0 30px;
    }
    /* .particles-mask .inner .masker h1 {
    font-size: 15vw;
  } */
    .particles-mask .inner h5 {
        padding: 0;
    }
    .video-hero .inner h1 {
        font-size: 15vw;
    }
    .motion-blur .inner h1 {
        font-size: 14vw;
    }
    .page-header .inner {
        padding: 0 30px;
    }
    .page-header .inner h2 {
        font-size: 3em;
    }
    .page-header .inner p {
        font-size: 22px;
        line-height: 34px;
        padding-right: 0;
    }
    .introduction {
        padding: 80px 0;
    }
    .listing-content {
        padding: 80px 0;
    }
    .listing-content .mobile-spacing {
        margin-bottom: 50px;
    }
    .social-media {
        display: none;
    }
    .scroll-down {
        display: none;
    }
    .our-team {
        padding-top: 80px;
    }
    .works {
        padding-top: 80px;
        padding-bottom: 0;
    }
    .works ul li {
        width: 100%;
        margin-top: 0 !important;
        margin-bottom: 80px;
        padding: 0 12%;
    }
    .works ul li figure figcaption {
        padding-bottom: 30px;
    }
    .works.two-cols ul li {
        width: 100%;
    }
    .works.four-cols ul li {
        width: 100%;
    }
    .works.four-cols ul li figure figcaption {
        padding-bottom: 30px;
    }
    .features-content {
        text-align: center;
        padding-top: 80px;
        padding-bottom: 10px;
    }
    .features-content h2 {
        font-size: 40px;
    }
    .features-content h6 {
        padding-right: 0;
    }
    .full-media-content .sides {
        padding: 80px 0;
    }
    .full-media-content .sides figure {
        width: 70%;
        position: static;
        margin: 0 auto;
    }
    .full-media-content .inner-content .inner {
        max-width: 100%;
        padding: 0 30px;
    }
    .full-media-content .inner-content h2 {
        font-size: 44px;
    }
    .news {
        padding: 80px 0;
    }
    .news .post {
        margin-bottom: 10px;
    }
    .news .post .post-content {
        padding: 0;
    }
    .news .post .post-content .post-title {
        font-size: 30px;
        line-height: 40px;
    }
    .news .post.post-single .post-content .post-title {
        font-size: 36px;
        line-height: 46px;
    }
    .logos {
        padding: 30px 0;
    }
    .logos ul li {
        width: 33.33333%;
        margin: 25px auto;
    }
    .filter-bar {
        text-align: center;
    }
    .filter-bar .works-filter {
        width: 100%;
        float: left;
        margin-top: 20px;
        padding: 0 20px;
    }
    .filter-bar .works-filter li {
        float: none;
        display: inline-block;
        margin: 0 10px;
    }
    .filter-btn {
        float: none;
        margin: 0 auto;
        display: inline-block;
    }
    .case-details .case-navbar ul li {
        margin: 0 12px;
    }
    .case-details h3 {
        font-size: 60px;
    }
    .case-details h6 {
        padding-right: 0;
    }
    .say-hello {
        padding: 80px 0;
    }
    .say-hello h3 {
        font-size: 38px;
    }
    .footer {
        padding-top: 80px;
    }
    .footer h2 {
        font-size: 40px;
    }
}


/*# sourceMappingURL=style.css.map */

.address-container {
    display: flex;
    justify-content: space-evenly;
}

.inner {
    margin-top: 25px;
}

.about-container {
    background-color: #000;
    color: #d5d5d5;
}

.content p {
    color: #888787;
    padding: 20px 0;
}

.content .heading {
    color: #274e75;
    font-weight: 600;
}


/* custom Button */

.btn {
    padding: 0.5em 1.3em;
    background: none;
    border: 2px solid #fff;
    font-size: 15px;
    color: #d5d5d5;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
    border-radius: 12px;
    background-color: transparent;
    font-weight: bolder;
    box-shadow: 0 2px 0 2px #000;
}

.btn:before {
    content: "";
    position: absolute;
    width: 100px;
    height: 120%;
    background-color: #FFA559;
    top: 50%;
    transform: skewX(30deg) translate(-150%, -50%);
    transition: all 0.5s;
}

.btn:hover {
    /* background-color: #4cc9f0; */
    color: #fff;
    box-shadow: 0 2px 0 2px #102131;
}

.btn:hover::before {
    transform: skewX(30deg) translate(150%, -50%);
    transition-delay: 0.1s;
}

.btn:active {
    transform: scale(0.9);
}

.image-container img {
    animation: 10s up-down ease-in-out infinite;
    transition: transform 30ms ease;
}

@keyframes up-down {
    0% {
        transform: translateX(0px);
    }
    50% {
        transform: translateX(20px);
    }
    100% {
        transform: translateX(0px);
    }
}

.works .heading {
    /* text-align: center; */
    color: white;
    width: 100%;
    text-transform: capitalize;
    margin: 20px 0;
}

.about-container .heading {
    font-size: 50px;
}

.works .heading p {
    color: #888787;
}

.proces-container h3 {
    font-weight: 600;
}


/* Timeline  */

#timeline ul {
    list-style: none;
    margin-top: 50px;
}


/* Central Line */

#timeline ul li {
    position: relative;
    width: 0;
    border-left: 6px dotted var(--primary-color);
    margin: 0 auto;
}


/* Dots */

#timeline ul li:before {
    content: "";
    position: absolute;
    top: 0;
    left: -11px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fafafa;
    transition: background 1s ease-in-out;
}


/* Year */

#timeline ul h3 {
    /* font-family: "Montserrat"; */
    font-weight: 300;
    font-size: 1.5rem;
    text-align: center;
    margin: 30px 0 10px;
}


/* Boxes &  Bottom Text */

#timeline ul li>div {
    width: 350px;
    margin-bottom: 5px;
    text-align: center;
    position: relative;
    opacity: 0;
    visibility: hidden;
    transition: all 1s ease-in-out;
}

#timeline ul li>div p {
    padding-top: 20px;
}

#timeline ul li:nth-child(2n+0)>div {
    margin-left: 70px;
    transform: translateX(60px);
}

#timeline ul li:nth-child(4n+0)>div {
    margin-left: -414px;
    transform: translateX(-60px);
}

#timeline ul li>div>div {
    position: relative;
    top: -14px;
    background: var(--secondary-color);
    width: 350px;
    padding: 5px 10px;
}


/* Top boxes arrows */

#timeline ul li>div:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    border-style: solid;
}

#timeline ul li:nth-child(2n+0)>div:before {
    left: -15px;
    border-width: 8px 16px 8px 0;
    border-color: transparent var(--secondary-color) transparent transparent;
}

#timeline ul li:nth-child(4n+0)>div:before {
    transform: translateX(365px);
    border-width: 8px 0 8px 16px;
    border-color: transparent transparent transparent var(--secondary-color);
}


/* Show Boxes */

#timeline ul li.show>div {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

#timeline ul li.show:before {
    background: var(--secondary-color);
}

@media (max-width: 900px) {
    #timeline ul li>div,
    #timeline ul li>div>div {
        width: 200px;
    }
    #timeline ul li:nth-child(4n+0)>div {
        margin-left: -264px;
    }
    #timeline ul li:nth-child(4n+0)>div:before {
        transform: translateX(215px);
    }
}

@media (max-width: 600px) {
    .main-header h1 {
        font-size: 2rem;
    }
    #timeline ul li {
        margin: 0 50px;
    }
    #timeline ul li>div,
    #timeline ul li>div>div {
        width: calc(100vw - 170px);
    }
    #timeline ul h3 {
        text-align: unset;
        padding-left: 30px;
    }
    #timeline ul li:nth-child(4n+0)>div {
        margin-left: 70px;
        transform: translateX(60px);
    }
    #timeline ul li:nth-child(4n+0)>div:before {
        transform: translateX(0);
        border-width: 8px 16px 8px 0;
        border-color: transparent var(--secondary-color) transparent transparent;
    }
    #timeline ul li.show>div {
        transform: none;
    }
}

.sides .inner h3 {
    font-weight: 600;
}

.swiper-slide h4,
.inner-content h3 {
    color: white;
}

#case-section-3 h2 {
    color: white;
}

.service-heading {
    text-align: center;
    margin: 0 0 50px 0 !important;
}

.service-heading h3 {
    color: rgb(255, 255, 255);
    margin: 10px 0;
}

.service-heading h4 {
    color: rgb(218, 218, 218);
    margin: 10px 0;
}

.service-section {
    background: #171819;
}

.service-section h2 {
    color: white;
}

.service-section h3 {
    color: white !important;
    font-weight: 800 !important;
}

.list i {
    color: #9c9c9c !important;
}

.list li {
    list-style-type: numeric !important;
}


/* Service Card */

.service-card {
    width: 90%;
    height: 254px;
    transition: all 0.2s;
    position: relative;
    cursor: pointer;
}

.card-inner {
    width: inherit;
    height: inherit;
    background: rgba(255, 255, 255, .05);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(10px);
    border-radius: 8px;
}

.service-card:hover .service-image img {
    transform: scale(1.04);
}

.service-circle {
    width: 100px;
    height: 100px;
    background: radial-gradient(#b0e633, #53ef7d);
    border-radius: 50%;
    position: absolute;
    animation: move-up6 2s ease-in infinite alternate-reverse;
}

.service-circle:nth-child(1) {
    top: -25px;
    left: -25px;
}

.service-circle:nth-child(2) {
    bottom: -25px;
    right: -25px;
    animation-name: move-down1;
}

@keyframes move-up6 {
    to {
        transform: translateY(-10px);
    }
}

@keyframes move-down1 {
    to {
        transform: translateY(10px);
    }
}

.service-image {
    padding: 15px 0;
}

.inner-content {
    display: flex;
    justify-content: center;
    margin: 10px 0;
}

.card-inner {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.footer h2 {
    color: white !important;
}


/* Index Slider */

.slider__navi {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    z-index: 999;
}

.slider__navi a {
    display: block;
    height: 6px;
    width: 20px;
    margin: 20px 0;
    text-indent: -9999px;
    box-shadow: none;
    border: none;
    background: rgba(0, 0, 0, 0.2);
}

.slider__navi a.active {
    background: rgba(255, 255, 255, 1);
}

body {
    position: relative;
    font-size: 100%;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    min-height: 100vh;
}

.flex__container {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    -o-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    -ms-justify-content: flex-start;
    -o-justify-content: flex-start;
    justify-content: flex-start;
    height: 100vh;
    width: 100%;
    z-index: 1;
}

.flex__container.flex--active.website {
    z-index: 2;
    background-image: radial-gradient( circle at 70% 56%, #e2e2e2 9%, #e28a1d 50%);
}

.flex__container.flex--active.seo {
    z-index: 2;
    background-image: radial-gradient( circle at 72% 56%, #e2e2e2 -16%, #7d28a6 76%);
}

.flex__container.flex--active.sem {
    z-index: 2;
    background-image: radial-gradient( circle at 76% 56%, #ffffff -16%, #41b61d 76%);
}

.flex__container.flex--active.Application {
    z-index: 2;
    background-image: radial-gradient( circle at 72% 56%, #e2e2e2 -16%, #50a8f2 76%);
}

.flex__container.flex--active.ecom {
    z-index: 2;
    background-image: radial-gradient( circle at 72% 56%, #e2e2e2 -16%, #f4b91f 76%);
}

.flex__container.flex--active.ecom {
    z-index: 2;
    background-image: radial-gradient( circle at 72% 56%, #e2e2e2 -16%, #0c8984 76%);
}

.website .text--big {
    background: -webkit-linear-gradient(to right, #000000, #404858);
    background: -o-linear-gradient(to right, #000000, #404858);
    background: -moz-linear-gradient(to right, #000000, #404858);
    background: linear-gradient(to right, #000000, #404858);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.seo .text--big {
    background: -webkit-linear-gradient(to right, #000000, #404858);
    background: -o-linear-gradient(to right, #000000, #404858);
    background: -moz-linear-gradient(to right, #000000, #404858);
    background: linear-gradient(to right, #000000, #404858);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sem .text--big {
    background: -webkit-linear-gradient(to right, #000000, #404858);
    background: -o-linear-gradient(to right, #000000, #404858);
    background: -moz-linear-gradient(to right, #000000, #404858);
    background: linear-gradient(to right, #353f54, #353f54);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.Application .text--big {
    background: -webkit-linear-gradient(to right, #000000, #404858);
    background: -o-linear-gradient(to right, #000000, #404858);
    background: -moz-linear-gradient(to right, #000000, #404858);
    background: linear-gradient(to right, #000000, #404858);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ecom .text--big {
    background: -webkit-linear-gradient(to right, #000000, #404858);
    background: -o-linear-gradient(to right, #000000, #404858);
    background: -moz-linear-gradient(to right, #000000, #404858);
    background: linear-gradient(to right, #000000, #404858);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text--sub {
    font-size: 12px;
    letter-spacing: 0.5rem;
    text-transform: uppercase;
    margin-bottom: 40px;
}

.text--big {
    font-family: 'Oswald', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-size: 67px;
    font-weight: 800;
    /* line-height: 50px; */
    margin-left: -8px;
}

.text--normal {
    font-size: 18px;
    color: rgb(0 0 0 / 80%);
    /* line-height: 22px; */
    /* margin-top: 25px; */
    padding: 0 70px 0 10px;
    font-weight: 900;
}

.text__background .text--big {
    text-transform: uppercase !important;
}

.text__background {
    font-family: 'Poppins', sans-serif;
    position: absolute;
    left: 72px;
    bottom: 10px;
    color: rgb(0 0 0 / 14%);
    font-size: 60px;
    font-weight: 800;
    line-height: 75px
}

.flex__item {
    height: 100vh;
    color: #fff;
    transition: transform 0.1s linear;
}

.flex__item--left {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    width: 65%;
    transform-origin: left bottom;
    transition: transform 0.1s linear 0.4s;
    opacity: 0;
    position: relative;
    overflow: hidden;
}

.flex__item--right {
    width: 35%;
    transform-origin: right center;
    transition: transform 0.1s linear 0s;
    opacity: 0;
}

.flex--preStart .flex__item--left,
.flex--preStart .flex__item--right,
.flex--active .flex__item--left,
.flex--active .flex__item--right {
    opacity: 1;
}


/* Piplup */


/* 
.flex--piplup .flex__item--left {
    background: #ba68c8;
}

.flex--piplup .flex__item--right {
    background: #d3eaef;
} */


/* Pikachu */

.flex--pikachu .flex__item--left {
    /* background: #018673; */
}

.flex--pikachu .flex__item--right {
    /* background: #e7e7e7; */
}


/* Blaziken */


/* .flex--blaziken .flex__item--left {
    background: #418dd9;
}

.flex--blaziken .flex__item--right {
    background: #ffebcd;
} */


/* Dialga */


/* .flex--dialga .flex__item--left {
    background: #6965f8;
}

.flex--dialga .flex__item--right {
    background: #80c5ff;
} */


/* Zekrom */


/* .flex--zekrom .flex__item--left {
    background: #7b96a1;
}

.flex--zekrom .flex__item--right {
    background: #a7bcbb;
} */

.flex__content {
    margin-left: 80px;
    width: 80%;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: transform 0.2s linear 0.2s, opacity 0.1s linear 0.2s;
}

.slider__img {
    position: absolute;
    bottom: 25%;
    right: 15%;
    max-height: 24vw;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity 0.43s 0.6s, transform 0.4s 0.65s cubic-bezier(0, 0.88, 0.4, 0.93);
    filter: drop-shadow(1px 13px 3px #737372);
}


/* Animate-START point */

.flex__container.animate--start .flex__content {
    transform: translate3d(0, -200%, 0);
    opacity: 0;
}

.flex__container.animate--start .slider__img {
    transform: translate3d(-200px, 0, 0);
    opacity: 0;
}


/* Animate-END point */

.flex__container.animate--end .flex__item--left {
    transform: scaleY(0);
}

.flex__container.animate--end .flex__item--right {
    transform: scaleX(0);
}

.flex__container.animate--end .flex__content {
    transform: translate3d(0, 200%, 0);
    opacity: 0;
}

.flex__container.animate--end .slider__img {
    transform: translate3d(200px, 0, 0);
    opacity: 0;
}

.text--big:before {
    content: "";
    position: absolute;
    width: 100px;
    height: 8%;
    background-color: #8b97b0;
    top: 8%;
    transform: skewX(30deg) translate(-200%, -50%);
    transition: all 0.5s;
    z-index: -1;
}

.text--big:hover::before {
    transform: skewX(30deg) translate(0%, -50%);
    transition-delay: 0.1s;
}

.slider {
    width: 50%;
    margin: 100px auto;
}

.slick-slide {
    margin: 0px 20px;
}

.slick-slide img {
    width: 100%;
}

.slick-prev:before,
.slick-next:before {
    color: black;
}

.portfoliol>li {
    display: flex !important;
    justify-content: center !important;
}

@media (min-width: 375px) AND (max-width: 700px) {
    .flex__content {
        margin-left: 30px;
    }
    .text--big {
        font-size: 26px;
        line-height: 29px;
    }
    .slider__img {
        max-height: 30vw;
    }
    .text__background {
        left: 25px;
        font-size: 41px;
        line-height: 39px;
    }
}

.fa-facebook {
    color: #4267B2 !important;
}

.fa-twitter {
    color: #1DA1F2 !important;
}

.fa-linkedin {
    color: #0e76a8 !important;
}

.fa-youtube-play {
    color: #FF0000;
}