@import url('https://fonts.googleapis.com/css?family=Fjalla+One|Poppins:300,400,600,800&display=swap');
/* GOOGLE FONTS */
/* BODY */
 * {
	 outline: none !important;
}
 body {
	 margin: 0;
	 padding: 0;
	 font-family: 'Poppins', sans-serif;
	 -webkit-font-smoothing: antialiased;
	 text-rendering: optimizeLegibility;
	 -moz-osx-font-smoothing: grayscale;
	 background: #222327;
}
/* HTML ELEMENTS */
 img {
	 max-width: 100%;
}
/* LINKS */
 a {
	 color: #222327;
	 -webkit-transition: 0.25s ease-in-out;
	 -moz-transition: 0.25s ease-in-out;
	 -ms-transition: 0.25s ease-in-out;
	 -o-transition: 0.25s ease-in-out;
	 transition: 0.25s ease-in-out;
}
 a:hover {
	 color: #222327;
	 text-decoration: initial;
}
/* CUSTOM CLASSES */
 .overflow {
	 overflow: hidden;
}
/* CUSTOM CONTAINER */
 @media (min-width: 1300px) {
	 .container {
		 max-width: 1340px;
	}
}
/* SECTIONS */
 main {
	 width: 100%;
	 display: flex;
	 flex-wrap: wrap;
	 position: relative;
	 overflow: hidden;
	 background: #222327;
}
 section {
	 position: relative;
}
 aside {
	 position: relative;
}
/* FORM ELEMENTS */
 input[type="text"] {
	 max-width: 100%;
	 height: 58px;
	 border: 1px solid #eee;
	 padding: 0 20px;
}
 input[type="email"] {
	 max-width: 100%;
	 height: 58px;
	 border: 1px solid #eee;
	 padding: 0 20px;
}
 input[type="search"] {
	 max-width: 100%;
	 height: 58px;
	 border: 1px solid #eee;
	 padding: 0 20px;
}
 input[type="password"] {
	 max-width: 100%;
	 height: 58px;
	 border: 1px solid #eee;
	 padding: 0 20px;
}
 input[type="submit"] {
	 height: 58px;
	 border: none;
	 background: #222327;
	 color: #fff;
	 padding: 0 30px;
	 font-weight: 600;
	 font-size: 14px;
}
 button[type="submit"] {
	 height: 58px;
	 border: none;
	 background: #222327;
	 color: #fff;
	 padding: 0 30px;
	 font-weight: 600;
	 font-size: 14px;
}
 textarea {
	 max-width: 100%;
	 height: 140px;
	 border: 1px solid #eee;
	 padding: 20px;
}
/* EQUALIZER */
 .equalizer {
	 width: 26px;
	 height: 30px;
	 cursor: pointer;
	 position: relative;
}

 .equalizer span {
	 background: #fff;
	 width: 2px;
	 height: 0px;
	 bottom: 0;
	 left: 0%;
	 display: block;
	 position: absolute;
	 transition: height 0.2s linear;
}
 .equalizer span:nth-child(1) {
	 margin-left: 8px;
}
 .equalizer span:nth-child(2) {
	 margin-left: 16px;
}
 .equalizer span:nth-child(4) {
	 margin-left: 24px;
}
 .equalizer.paused span {
	 height: 3px !important;
}
/* SPLITTING */
 .splitting .word, .splitting .char {
	 display: inline-block;
}
 .splitting .char {
	 position: relative;
}
 .animated .char {
	 display: inline-block;
	 animation: texteffect 0.6s cubic-bezier(0.5, 0, 0.5, 1) both;
	 animation-delay: calc(10ms * var(--char-index));
}
/* ODOMETER */
 .odometer.odometer-auto-theme, .odometer.odometer-theme-car {
	 padding: 0;
}
 .odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-car .odometer-digit {
	 padding: 0;
}
 .odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-car .odometer-digit .odometer-value {
	 text-indent: -5px;
}
 .odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-car .odometer-digit .odometer-digit-inner {
	 left: 0;
}
 .odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-car .odometer-digit .odometer-value {
	 text-indent: 0;
}
/* PAGINATION */
 .pagination {
	 width: 100%;
	 float: left;
	 margin: 50px 0;
}
 .pagination .page-item {
	 display: inline-block;
	 margin-right: 10px;
}
 .pagination .page-item .page-link {
	 font-weight: 600;
	 border-radius: 0 !important;
	 font-size: 13px;
	 color: #222327;
	 line-height: 1;
	 padding: 15px 30px;
}
/* REVEAL EFFECT */
 .reveal-effect {
	 float: left;
	 position: relative;
}
 .reveal-effect > * {
	 -webkit-animation-duration: 1s;
	 animation-duration: 1s;
	 -webkit-animation-fill-mode: forwards;
	 animation-fill-mode: forwards;
	 -webkit-animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
	 animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
	 position: relative;
}
 .reveal-effect > * {
	 -webkit-animation-fill-mode: forwards;
	 animation-fill-mode: forwards;
}
 .reveal-effect {
	 -webkit-transition-property: -webkit-transform;
	 transition-property: -webkit-transform;
	 transition-property: transform;
	 transition-property: transform, -webkit-transform;
}
 .reveal-effect {
	 -webkit-transition-duration: 1.2s;
	 transition-duration: 1.2s;
	 -webkit-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
	 transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
 .reveal-effect.animated {
	 -webkit-transform: translate(0, 0);
	 transform: translate(0, 0);
}
 .reveal-effect.animated * {
	 -webkit-animation-name: show-img-1;
	 animation-name: show-img-1;
}
 .reveal-effect:after {
	 -webkit-animation-fill-mode: forwards;
	 animation-fill-mode: forwards;
	 -webkit-animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
	 animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
 .reveal-effect:after {
	 content: "";
	 width: 100%;
	 height: 100%;
	 display: block;
	 position: absolute;
	 top: 0;
	 left: 0;
}
 .reveal-effect:after {
	 -webkit-transform-origin: left top;
	 transform-origin: left top;
	 -webkit-transform: scale(0.05, 0);
	 transform: scale(0.05, 0);
	 -webkit-animation-duration: 1s;
	 animation-duration: 1s;
	 -webkit-animation-fill-mode: forwards;
	 animation-fill-mode: forwards;
	 -webkit-animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
	 animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
 .reveal-effect.masker:after {
	 background-color: #161619;
}
 .reveal-effect.animated:after {
	 -webkit-animation-name: slide-bg-2;
	 animation-name: slide-bg-2;
}
/* SWIPER PAGINATION */
 .swiper-pagination .swiper-pagination-bullet {
	 width: 12px;
	 height: 12px;
	 transform: scale(0.4);
	 background: #fff;
	 opacity: 1;
	 border-radius: 50%;
}
 .swiper-pagination .swiper-pagination-bullet:hover {
	 -webkit-transition: box-shadow 0.3s ease;
	 transition: box-shadow 0.3s ease;
	 -webkit-transition: background-color 0.3s ease, -webkit-transform 0.3s ease;
	 transition: background-color 0.3s ease, transform 0.3s ease;
	 -webkit-transform: scale(1);
	 box-shadow: 0 0 0 2px rgba(255, 255, 255, 0);
	 border: 2px solid #fff;
	 background: none;
}
 .swiper-pagination .swiper-pagination-bullet-active {
	 -webkit-transition: box-shadow 0.3s ease;
	 transition: box-shadow 0.3s ease;
	 -webkit-transition: background-color 0.3s ease, -webkit-transform 0.3s ease;
	 transition: background-color 0.3s ease, transform 0.3s ease;
	 -webkit-transform: scale(1);
	 box-shadow: 0 0 0 2px rgba(255, 255, 255, 0);
	 border: 2px solid #fff;
	 background: none;
}
/* PRELOADER */
 .preloader {
	 width: 100%;
	 height: 100%;
	 display: flex;
	 flex-wrap: wrap;
	 align-content: center;
	 position: fixed;
	 left: 0;
	 top: 0;
	 z-index: 11;
	 background: #a6ce39;
	 text-align: center;
	 -webkit-transition: all 0.3s ease;
	 -moz-transition: all 0.3s ease;
	 transition: all 0.3s ease;
	 transition-duration: 500ms;
	 -webkit-transition-duration: 500ms;
	 transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	 -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	 overflow: hidden;
	 transition-delay: 0.6s;
}
 .preloader * {
	 -webkit-transition: all 0.3s ease;
	 -moz-transition: all 0.3s ease;
	 transition: all 0.3s ease;
	 transition-duration: 500ms;
	 -webkit-transition-duration: 500ms;
	 transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	 -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
 .preloader .layer {
	 width: 100%;
	 height: 100%;
	 position: absolute;
	 left: 0;
	 top: 0;
	 background: #1c1c1c;
	 transition-delay: 0.3s;
}
.preloader .inner {
    display: inline-block;
    text-align: center;
    position: absolute;
    z-index: 2;
    margin: 0 auto;
    top: calc(50% - 46px);
    left: calc(50% - 42px);
}
 .preloader .inner span {
	 color: #fff;
	 text-transform: uppercase;
	 font-weight: 600;
	 font-size: 13px;
}
 .preloader .inner figure {
	 display: block;
	 margin-bottom: 20px;
	 transition-delay: 0.1s;
}
 .preloader .inner figure img {
	 height: 40px;
	 transform: translateX(-7px);
}
/* PAGE LOADED */
 .page-loaded .preloader {
	 left: -100%;
}
 .page-loaded .preloader .inner figure {
	 opacity: 0;
	 transform: scale(1.5);
}
 .page-loaded .preloader .inner span {
	 transform: translateY(20px);
	 opacity: 0;
}
 .page-loaded .preloader .layer {
	 left: -100%;
}
 .page-loaded .left-side {
	 left: 0;
	 opacity: 1;
}
 .page-loaded .slider {
	 filter: blur(0);
	 transform: scale(1);
}
 .page-loaded .page-header {
	 filter: blur(0);
	 transform: scale(1);
}
 .page-loaded .all-cases-link {
	 right: 30px;
}
/* PAGE TRANSTION */
 .page-transition {
	 width: 100%;
	 height: 100%;
	 position: fixed;
	 right: -100%;
	 top: 0;
	 z-index: 13;
	 opacity: 0;
	 visibility: hidden;
	 opacity: 0;
	 visibility: hidden;
	 -webkit-transition: all 0.3s ease;
	 -moz-transition: all 0.3s ease;
	 transition: all 0.3s ease;
	 transition-duration: 500ms;
	 -webkit-transition-duration: 500ms;
	 transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	 -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	 background: #a6ce39;
}
 .page-transition .layer {
	 width: 0;
	 height: 100%;
	 position: absolute;
	 right: 0;
	 top: 0;
	 background: #1c1c1c;
	 -webkit-transition: all 0.3s ease;
	 -moz-transition: all 0.3s ease;
	 transition: all 0.3s ease;
	 transition-duration: 500ms;
	 -webkit-transition-duration: 500ms;
	 transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	 -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	 transition-delay: 0.3s;
}
 .page-transition.active {
	 opacity: 1;
	 visibility: visible;
	 right: 0;
}
 .page-transition.active .layer {
	 width: 100%;
}
/* SITE NAVIGATION */
 .site-navigation {
	 width: 100%;
	 height: 100vh;
	 display: flex;
	 flex-wrap: wrap;
	 flex-direction: column;
	 justify-content: center;
	 position: fixed;
	 right: -100%;
	 top: 0;
	 z-index: 9;
	 opacity: 0;
	 visibility: hidden;
	 -webkit-transition: all 0.3s ease;
	 -moz-transition: all 0.3s ease;
	 transition: all 0.3s ease;
	 transition-duration: 500ms;
	 -webkit-transition-duration: 500ms;
	 transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	 -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	 background: #a6ce39;
	 padding-left: 55px;
}
 .site-navigation .layer {
	 width: 0;
	 height: 100%;
	 position: absolute;
	 right: 0;
	 top: 0;
	 background: #161619;
	 -webkit-transition: all 0.3s ease;
	 -moz-transition: all 0.3s ease;
	 transition: all 0.3s ease;
	 transition-duration: 500ms;
	 -webkit-transition-duration: 500ms;
	 transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	 -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	 transition-delay: 0.3s;
}
 .site-navigation .inner {
	 position: relative;
	 z-index: 2;
	 padding-left: 100px;
	 -webkit-transition: 0.25s ease-in-out;
	 -moz-transition: 0.25s ease-in-out;
	 -ms-transition: 0.25s ease-in-out;
	 -o-transition: 0.25s ease-in-out;
	 transition: 0.25s ease-in-out;
	 transition-delay: 0.7s;
	 opacity: 0;
}
 .site-navigation .inner ul {
	 margin: 0;
	 padding: 0;
	 animation-duration: 1s;
}
 .site-navigation .inner ul li {
	 display: block;
	 margin: 5px 0;
	 padding: 5px 0;
}
 .site-navigation .inner ul li ul {
	 margin-top: 0;
	 margin-bottom: 10px;
	 display: none;
}
 .site-navigation .inner ul li ul li {
	 display: block;
	 margin: 0;
}
 .site-navigation .inner ul li ul li a {
	 font-size: 26px;
}
 .site-navigation .inner ul li i {
	 margin-left: 20px;
	 font-size: 30px;
	 color: #fff;
	 display: inline-block;
	 line-height: 1;
	 transform: translateY(-5px);
	 cursor: pointer;
}
 .site-navigation .inner ul li small {
	 width: 100%;
	 display: block;
	 color: #fff;
	 opacity: 0.7;
	 letter-spacing: 0.5px;
	 font-size: 11px;
	 text-transform: uppercase;
	 font-weight: 600;
	 transform: translateY(-15px);
}
 .site-navigation .inner ul li a {
	 font-size: 50px;
	 display: inline-block;
	 font-weight: 800;
	 color: #fff;
	 -webkit-transition: 0.25s ease-in-out;
	 -moz-transition: 0.25s ease-in-out;
	 -ms-transition: 0.25s ease-in-out;
	 -o-transition: 0.25s ease-in-out;
	 transition: 0.25s ease-in-out;
}
 .site-navigation .inner ul li a:hover {
	 color: #a6ce39;
	 text-decoration: none;
}
 .site-navigation.active {
	 opacity: 1;
	 visibility: visible;
	 right: 0;
}
 .site-navigation.active .layer {
	 width: 100%;
}
 .site-navigation.active .inner {
	 opacity: 1;
}
/* SECTION TITLES */
 .section-title {
	 font-family: 'Fjalla One', sans-serif;
	 margin-bottom: 80px;
	 line-height: 1.4;
	 font-size: 4vw;
	 letter-spacing: 2px;
}
/* SOCIAL MEDIA */
 .social-media {
	 width: 100%;
	 height: 100%;
	 display: flex;
	 flex-wrap: wrap;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	 position: fixed;
	 right: -100%;
	 top: 0;
	 z-index: 3;
	 background: #a6ce39;
	 opacity: 0;
	 visibility: hidden;
	 -webkit-transition: all 0.3s ease;
	 -moz-transition: all 0.3s ease;
	 transition: all 0.3s ease;
	 transition-duration: 500ms;
	 -webkit-transition-duration: 500ms;
	 transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	 -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
 .social-media .layer {
	 width: 0;
	 height: 100%;
	 position: absolute;
	 right: 0;
	 top: 0;
	 background: #161619;
	 -webkit-transition: all 0.3s ease;
	 -moz-transition: all 0.3s ease;
	 transition: all 0.3s ease;
	 transition-duration: 500ms;
	 -webkit-transition-duration: 500ms;
	 transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	 -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	 transition-delay: 0.3s;
}
 .social-media .inner {
	 position: relative;
	 z-index: 2;
	 padding-left: 100px;
	 -webkit-transition: 0.25s ease-in-out;
	 -moz-transition: 0.25s ease-in-out;
	 -ms-transition: 0.25s ease-in-out;
	 -o-transition: 0.25s ease-in-out;
	 transition: 0.25s ease-in-out;
	 transition-delay: 0.7s;
	 opacity: 0;
	 text-align: center;
	 width: 100%;
}
 .social-media .inner h5 {
	 font-size: 3vw;
	 font-weight: 600;
	 color: #fff;
	 margin-bottom: 50px;
}
 .social-media .inner ul {
	 display: block;
	 margin: 0;
	 padding: 0;
}
 .social-media .inner ul li {
	 font-size: 2vw;
	 display: inline-block;
	 margin: 0 40px;
	 padding: 0;
	 list-style: none;
}
 .social-media .inner ul li a {
	 color: #fff;
}
 .social-media .inner ul li a:hover {
	 color: #a6ce39;
	 text-decoration: none;
}
 .social-media.active {
	 opacity: 1;
	 visibility: visible;
	 right: 0;
}
 .social-media.active .layer {
	 width: 100%;
}
 .social-media.active .inner {
	 opacity: 1;
}
/* ALL CASES */
 .all-cases {
	 width: 100%;
	 height: 100%;
	 display: flex;
	 flex-wrap: wrap;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	 position: fixed;
	 right: -100%;
	 top: 0;
	 z-index: 3;
	 background: #a6ce39;
	 opacity: 0;
	 visibility: hidden;
	 -webkit-transition: all 0.3s ease;
	 -moz-transition: all 0.3s ease;
	 transition: all 0.3s ease;
	 transition-duration: 500ms;
	 -webkit-transition-duration: 500ms;
	 transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	 -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
 .all-cases .layer {
	 width: 0;
	 height: 100%;
	 position: absolute;
	 right: 0;
	 top: 0;
	 background: #161619;
	 -webkit-transition: all 0.3s ease;
	 -moz-transition: all 0.3s ease;
	 transition: all 0.3s ease;
	 transition-duration: 500ms;
	 -webkit-transition-duration: 500ms;
	 transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	 -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	 transition-delay: 0.3s;
}
 .all-cases .inner {
	 position: relative;
	 z-index: 2;
	 padding-left: 220px;
	 -webkit-transition: 0.25s ease-in-out;
	 -moz-transition: 0.25s ease-in-out;
	 -ms-transition: 0.25s ease-in-out;
	 -o-transition: 0.25s ease-in-out;
	 transition: 0.25s ease-in-out;
	 transition-delay: 0.7s;
	 opacity: 0;
	 width: 100%;
}
 .all-cases .inner ul {
	 display: block;
	 max-height: 500px;
	 overflow-y: scroll;
	 margin: 0;
	 padding: 0;
}
 .all-cases .inner ul li {
	 font-size: 8vw;
	 font-weight: 800;
	 margin: 0;
	 padding: 0;
	 list-style: none;
}
 .all-cases .inner ul li a {
	 -webkit-text-stroke-width: 1px;
	 -webkit-text-stroke-color: #fff;
	 color: transparent;
}
 .all-cases .inner ul li a:hover {
	 color: #fff;
	 text-decoration: none;
}
 .all-cases.active {
	 opacity: 1;
	 visibility: visible;
	 right: 0;
}
 .all-cases.active .layer {
	 width: 100%;
}
 .all-cases.active .inner {
	 opacity: 1;
}
/* ALL CASES LINK */
 .all-cases-link {
	 position: absolute;
	 right: -100%;
	 top: 30px;
	 z-index: 5;
	 -webkit-transition: all 0.3s ease;
	 -moz-transition: all 0.3s ease;
	 transition: all 0.3s ease;
	 transition-duration: 500ms;
	 -webkit-transition-duration: 500ms;
	 transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	 -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	 transition-delay: 1s;
}
 .all-cases-link span {
	 color: #fff;
	 font-family: 'Fjalla One', sans-serif;
	 margin-right: 10px;
}
 .all-cases-link b {
	 width: 40px;
	 height: 40px;
	 line-height: 44px;
	 font-size: 25px;
	 font-weight: 300;
	 display: inline-block;
	 background: #fff;
	 color: #222327;
	 text-align: center;
	 border-radius: 50%;
	 cursor: pointer;
}
 .all-cases-link b:hover {
	 background: #a6ce39;
	 text-decoration: none;
	 color: #fff;
}
/* LEFT SIDE */
 .left-side {
	 width: 120px;
	 height: 100vh;
	 display: flex;
	 flex-direction: column;
	 position: absolute;
	 top: 0;
	 z-index: 10;
	 text-align: center;
	 border-right: 1px solid rgba(255, 255, 255, 0.1);
	 padding: 30px 0;
	 -webkit-transition: all 0.3s ease;
	 -moz-transition: all 0.3s ease;
	 transition: all 0.3s ease;
	 transition-duration: 500ms;
	 -webkit-transition-duration: 500ms;
	 transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	 -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	 transition-delay: 1s;
	 opacity: 0;
}
 .left-side .logo {
	 display: inline-block;
	 margin-bottom: auto;
}
 .left-side .logo img {
	 width: 50px;
}

 .left-side .follow-us {
	 width: 100px;
	 font-family: 'Fjalla One', sans-serif;
	 color: #fff;
	 text-align: center;
	 transform: rotate(-90deg);
	 margin: auto;
	 cursor: pointer;
}
 .left-side .equalizer {
	 margin: auto;
	 margin-bottom: 0;
}
/* SLIDER */
 .slider {
	 width: 100%;
	 height: 100vh;
	 display: flex;
	 flex-wrap: wrap;
	 position: relative;
	 z-index: 2;
	 -webkit-transition: all 0.3s ease;
	 -moz-transition: all 0.3s ease;
	 transition: all 0.3s ease;
	 transition-duration: 500ms;
	 -webkit-transition-duration: 500ms;
	 transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	 -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	 transform: scale(1.2);
	 filter: blur(20px);
	 transition-delay: 0.8s;
}
 .slider .swiper-container {
	 width: 100%;
	 height: 100vh;
	 display: flex;
	 flex-wrap: wrap;
}
 .slider .swiper-container .swiper-slide {
	 background-size: cover;
	 background-position: center;
	 overflow: hidden;
}
 .slider .swiper-container .swiper-slide video {
	 min-width: 100%;
	 min-height: 100%;
	 position: absolute;
	 left: 50%;
	 top: 50%;
	 transform: translate(-50%, -50%);
	 opacity: 0.6;
}
 .slider .gallery-top {
	 height: 100%;
	 width: 100%;
	 background: #222327;
}
 .slider .gallery-thumbs {
	 width: calc(100% - 240px);
	 display: flex;
	 flex-wrap: wrap;
	 margin: 0 120px;
	 padding-bottom: 30px;
	 z-index: 9;
	 position: absolute;
	 bottom: 30%;
	 right: 0;
	 height: auto;
	 color: #fff;
}
 .slider .gallery-thumbs .swiper-slide {
	 width: 90%;
	 height: 100%;
	 opacity: 0.4;
	 text-align: center;
	 filter: blur(3px);
}
 .slider .gallery-thumbs .swiper-slide span {
	 margin-left: 50%;
	 transform: translateX(-50%);
	 float: left;
	 font-size: 3vw;
	 line-height: 5vw;
	 font-weight: 800;
}
 .slider .gallery-thumbs .swiper-slide a {
	 display: none;
	 font-size: 13px;
	 color: #fff;
	 font-family: 'Fjalla One', sans-serif;
	 padding-bottom: 5px;
	 position: relative;
}
 .slider .gallery-thumbs .swiper-slide a:before {
	 content: "";
	 width: 20px;
	 height: 2px;
	 background: #fff;
	 position: absolute;
	 left: 0;
	 bottom: 0;
	 -webkit-transition: 0.25s ease-in-out;
	 -moz-transition: 0.25s ease-in-out;
	 -ms-transition: 0.25s ease-in-out;
	 -o-transition: 0.25s ease-in-out;
	 transition: 0.25s ease-in-out;
}
 .slider .gallery-thumbs .swiper-slide a:hover {
	 text-decoration: none;
}
 .slider .gallery-thumbs .swiper-slide a:hover:before {
	 width: 100%;
}
 .slider .gallery-thumbs .swiper-slide-active {
	 width: 100%;
	 opacity: 1;
	 transform: scale(1.4);
	 filter: blur(0px);
}
 .slider .gallery-thumbs .swiper-slide-active span {
	 font-size: 4vw;
}
 .slider .gallery-thumbs .swiper-slide-active a {
	 display: inline-block;
}
 .slider .swiper-button-prev {
	 height: auto;
	 position: absolute;
	 left: auto;
	 top: auto;
	 right: 120px;
	 bottom: 30px;
	 font-family: 'Fjalla One', sans-serif;
	 color: #fff;
	 background: none;
}
 .slider .swiper-button-next {
	 height: auto;
	 position: absolute;
	 left: auto;
	 top: auto;
	 right: 40px;
	 bottom: 30px;
	 font-family: 'Fjalla One', sans-serif;
	 color: #fff;
	 background: none;
}
 .slider .slide-progress {
	 width: 220px;
	 display: flex;
	 flex-wrap: wrap;
	 position: absolute;
	 left: 50%;
	 bottom: 30px;
	 margin-left: -110px;
	 z-index: 3;
	 text-align: center;
}
 .slider .slide-progress span {
	 display: inline-block;
	 color: #fff;
	 font-family: 'Fjalla One', sans-serif;
	 font-size: 14px;
}
 .slider .slide-progress .swiper-pagination {
	 width: 160px;
	 height: 2px;
	 margin: auto 10px;
	 display: inline-block;
	 position: static;
	 background: rgba(255, 255, 255, 0.3);
}
 .slider .slide-progress .swiper-pagination .swiper-pagination-progressbar-fill {
	 background: #fff;
}
/* VIDEO HERO */
 .video-hero {
	 width: 100%;
	 height: 100vh;
	 display: flex;
	 flex-wrap: wrap;
	 align-items: center;
	 position: relative;
}
 .video-hero .video-bg {
	 width: 100%;
	 height: 100%;
	 position: absolute;
	 left: 0;
	 top: 0;
	 overflow: hidden;
	 background: linear-gradient(0deg, rgb(0 0 0) 0%, rgb(103 103 103) 100%, rgba(255,255,255,1) 100%);
}
 .video-hero .video-bg video {
	 min-width: 100%;
	 min-height: 100%;
	 position: absolute;
	 left: 50%;
	 top: 50%;
	 transform: translate(-50%, -50%);
	 opacity: 0.8;
}
 .video-hero .inner {
	 width: 100%;
	 display: block;
	 text-align: center;
	 position: relative;
	 z-index: 2;
}
 .video-hero .inner span {
	 width: 100%;
	 float: left;
	 font-size: 8vw;
	 line-height: 5vw;
	 font-weight: 800;
	 color: #fff;
	 margin-bottom: 30px;
}
 .video-hero .inner a {
	 font-size: 19px;
	 color: #fff;
	 font-family: 'Fjalla One', sans-serif;
	 padding-bottom: 5px;
	 position: relative;
	 border-bottom: 2px solid #fff;
	 padding-bottom: 4px;
}
 .video-hero .inner a:hover {
	 text-decoration: none;
	 color: #a6ce39;
}
/* CAROUSEL HERO */
 .carousel-hero {
	 width: 100%;
	 height: 100vh;
	 display: flex;
	 flex-wrap: wrap;
	 position: relative;
}
 .carousel-hero .carousel-slider {
	 width: 100%;
	 display: flex;
	 flex-wrap: wrap;
	 overflow: hidden;
}
 .carousel-hero .carousel-slider .swiper-slide {
	 display: flex;
	 flex-wrap: wrap;
	 align-items: center;
	 margin: 0;
	 background-size: cover;
	 background-position: center;
}
 .carousel-hero .carousel-slider .swiper-slide.swiper-slide-active {
	 box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
	 z-index: 3;
}
 .carousel-hero .carousel-slider .swiper-slide.swiper-slide-active .inner {
	 opacity: 1;
}
 .carousel-hero .carousel-slider .swiper-slide.swiper-slide-active:after {
	 opacity: 0.4;
}
 .carousel-hero .carousel-slider .swiper-slide:after {
	 content: "";
	 width: 100%;
	 height: 100%;
	 position: absolute;
	 left: 0;
	 top: 0;
	 background: #222327;
	 opacity: 0.7;
}
 .carousel-hero .carousel-slider .swiper-slide .inner {
	 width: 100%;
	 display: block;
	 text-align: center;
	 color: #fff;
	 position: relative;
	 z-index: 2;
	 opacity: 0;
	 -webkit-transition: 0.25s ease-in-out;
	 -moz-transition: 0.25s ease-in-out;
	 -ms-transition: 0.25s ease-in-out;
	 -o-transition: 0.25s ease-in-out;
	 transition: 0.25s ease-in-out;
}
 .carousel-hero .carousel-slider .swiper-slide .inner h2 {
	 width: 100%;
	 float: left;
	 font-size: 4vw;
	 line-height: 5vw;
	 font-weight: 800;
	 color: #fff;
	 margin-bottom: 10px;
	 text-transform: uppercase;
}
 .carousel-hero .carousel-slider .swiper-slide .inner a {
	 font-size: 19px;
	 color: #fff;
	 font-family: 'Fjalla One', sans-serif;
	 padding-bottom: 5px;
	 position: relative;
	 border-bottom: 2px solid #fff;
	 padding-bottom: 4px;
}
 .carousel-hero .carousel-slider .swiper-slide .inner a:hover {
	 text-decoration: none;
	 color: #a6ce39;
}
 .carousel-hero .swiper-button-prev {
	 height: auto;
	 position: absolute;
	 left: auto;
	 top: auto;
	 right: 120px;
	 bottom: 30px;
	 font-family: 'Fjalla One', sans-serif;
	 color: #fff;
	 background: none;
}
 .carousel-hero .swiper-button-next {
	 height: auto;
	 position: absolute;
	 left: auto;
	 top: auto;
	 right: 40px;
	 bottom: 30px;
	 font-family: 'Fjalla One', sans-serif;
	 color: #fff;
	 background: none;
}
 .carousel-hero .slide-progress {
	 width: 220px;
	 display: flex;
	 flex-wrap: wrap;
	 position: absolute;
	 left: 50%;
	 bottom: 30px;
	 margin-left: -110px;
	 z-index: 3;
	 text-align: center;
}
 .carousel-hero .slide-progress span {
	 display: inline-block;
	 color: #fff;
	 font-family: 'Fjalla One', sans-serif;
	 font-size: 14px;
}
 .carousel-hero .slide-progress .swiper-pagination {
	 width: 160px;
	 height: 2px;
	 margin: auto 10px;
	 display: inline-block;
	 position: static;
	 background: rgba(255, 255, 255, 0.3);
}
 .carousel-hero .slide-progress .swiper-pagination .swiper-pagination-progressbar-fill {
	 background: #fff;
}
/* PAGE HEADER */
 .page-header {
	 width: 100%;
	 height: 55vh;
	 display: flex;
	 flex-wrap: wrap;
	 flex-direction: column;
	 justify-content: center;
	 background: #161619;
	 position: relative;
	 -webkit-transition: all 0.3s ease;
	 -moz-transition: all 0.3s ease;
	 transition: all 0.3s ease;
	 transition-duration: 500ms;
	 -webkit-transition-duration: 500ms;
	 transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	 -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	 transform: scale(1.2);
	 filter: blur(20px);
	 transition-delay: 0.8s;
	 background-size: cover;
}
.page-header .overlay{
	position: absolute;
    background-color: #000000;
    height: 100%;
    width: 100%;
    opacity: 0.6;
}
.benbox{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 500px;
    margin-left: 50px;
    height: 100%;
	text-align: justify;
	line-height: 22px;
}
.benbox span{
	font-size: 35px;
	margin-bottom: 10px;
}
.page-header h3{
	font-size: 50px;
    color: white;
    font-weight: 600;
}
 .page-header .video-bg {
	 width: 100%;
	 height: 100%;
	 position: absolute;
	 left: 0;
	 top: 0;
	 overflow: hidden;
}
 .page-header .video-bg video {
	 min-width: 100%;
	 min-height: 100%;
	 position: absolute;
	 left: 50%;
	 top: 50%;
	 transform: translate(-50%, -50%);
	 opacity: 0.2;
}
 .page-header .inner {
	 width: 100%;
	 padding-left: 220px;
	 position: relative;
	 z-index: 2;
}
 .page-header .inner h1 {
	 color: #fff;
	 font-weight: 800;
	 font-size: 10vw;
	 letter-spacing: -3px;
}
 .page-header .inner p {
	 margin: 0;
	 color: #fff;
	 font-size: 22px;
	 font-weight: 300;
	 letter-spacing: -0.5px;
}
/* INTRO */
 .intro {
	 width: 100%;
	 display: flex;
	 flex-wrap: wrap;
	 padding: 150px 0;
	 color: #fff;
	 background: #161619;
}
 .intro .col-lg-7 {
	 padding-left: 10%;
}
 .intro h6 {
	 font-weight: 600;
	 text-transform: uppercase;
	 font-size: 19px;
}
 .intro h6:after {
	 content: "";
	 width: 70px;
	 height: 1px;
	 background: #fff;
	 display: inline-block;
	 margin-left: 15px;
	 margin-bottom: 7px;
}
 .intro b {
	 font-size: 120px;
	 line-height: 1;
	 font-family: 'Fjalla One', sans-serif;
	 float: left;
	 font-weight: 400;
	 margin-right: 20px;
}
 .intro h4 {
	 font-weight: 600;
}
 .intro p {
	 font-size: 20px;
	 font-weight: 300;
	 margin-bottom: 35px;
}

.hamburger__line {
	width: 36px;
}

 .intro small {
	 display: block;
	 opacity: 0.7;
	 margin-bottom: 50px;
}
 .intro a {
	 color: #fff;
	 font-size: 17px;
	 border-bottom: 1px solid #a6ce39;
	 padding-bottom: 5px;
}
 .intro a:hover {
	 border-color: #fff;
}
/* INTRO IMAGE */
 .intro-image {
	 width: 100%;
	 display: flex;
	 flex-wrap: wrap;
	 padding-bottom: 150px;
	 position: relative;
}
 .intro-image:before {
	 content: "";
	 width: 100%;
	 height: 100px;
	 background: #161619;
	 position: absolute;
	 left: 0;
	 top: 0;
}
 .intro-image.light:before {
	 background: #fff;
}
 .intro-image .office-slider {
	 width: 100%;
	 display: flex;
	 flex-wrap: wrap;
	 background: #222327;
	 position: relative;
	 overflow: hidden;
}
 .intro-image figure {
	 width: 100%;
	 display: block;
	 margin: 0;
	 position: relative;
}
 .intro-image figure img {
	 width: 100%;
}
 .intro-image figure figcaption {
	 position: absolute;
	 left: 0;
	 bottom: 0;
	 padding: 20px;
	 line-height: 1;
}
 .intro-image figure figcaption h6 {
	 font-size: 13px;
	 color: #fff;
	 font-weight: 600;
}
/* PROCESS */
 .process {
	 width: 100%;
	 display: flex;
	 flex-wrap: wrap;
	 margin-bottom: 150px;
	 color: #fff;
	 text-align: center;
}
 .process .odometer {
	 font-family: 'Fjalla One', sans-serif;
	 font-size: 5vw;
	 line-height: 1;
}
 .process .symbol {
	 width: 100%;
	 display: block;
	 font-size: 12px;
}
 .process small {
	 width: 80%;
	 display: block;
	 border-top: 1px solid rgba(255, 255, 255, 0.1);
	 padding-top: 30px;
	 margin: 20px 10%;
	 font-weight: 600;
}
/* ICON CONTENT BLOCK */
 .icon-content-block {
	 width: 100%;
	 display: flex;
	 flex-wrap: wrap;
	 text-align: center;
	 color: #fff;
	 background: #222327;
}
 .icon-content-block .container {
	 position: relative;
	 z-index: 2;
}
 .icon-content-block .content-block {
	 width: 100%;
	 display: block;
	 margin: 0;
	 padding: 50px 30px;
	 position: relative;
	 -webkit-transition: 0.25s ease-in-out;
	 -moz-transition: 0.25s ease-in-out;
	 -ms-transition: 0.25s ease-in-out;
	 -o-transition: 0.25s ease-in-out;
	 transition: 0.25s ease-in-out;
}
 .icon-content-block .content-block.selected {
	 background: #161619;
	 box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.3);
}
 .icon-content-block .content-block.selected:before {
	 content: "";
	 width: 50%;
	 height: 50%;
	 position: absolute;
	 right: -25px;
	 bottom: -30px;
	 z-index: -1;
	 background: url(../images/dot-pattern.png) right;
	 background-size: 10px;
}
 .icon-content-block .content-block figure {
	 width: 100%;
	 display: block;
	 margin-bottom: 40px;
}
 .icon-content-block .content-block figure img {
	 height: 75px;
}
 .icon-content-block .content-block h6 {
	 display: block;
	 font-weight: 600;
	 letter-spacing: 0.5px;
	 margin-bottom: 10px;
}
 .icon-content-block .content-block ul {
	 margin: 0;
	 padding: 0;
}
 .icon-content-block .content-block ul li {
	 padding: 3px 0;
	 opacity: 0.7;
	 list-style: none;
	 font-weight: 300;
}
/* TEXT CONTENT BLOCK */
 .text-content-block {
	 width: 100%;
	 display: flex;
	 flex-wrap: wrap;
	 padding: 150px 0;
	 background: #fff;
}
 .text-content-block .col-md-4 {
	 margin: 20px 0;
}
 .text-content-block .section-title {
	 margin-bottom: 30px;
}
 .text-content-block h5 {
	 font-size: 20px;
	 font-weight: 300;
	 line-height: 1.5;
	 padding-right: 20%;
	 margin-bottom: 70px;
}
 .text-content-block small {
	 font-size: 40px;
	 font-weight: 800;
	 margin-bottom: -20px;
	 opacity: 0.1;
	 display: block;
}
 .text-content-block h6 {
	 font-size: 20px;
	 font-family: 'Fjalla One', sans-serif;
}
 .text-content-block p {
	 padding-right: 20%;
	 margin-bottom: 0;
	 line-height: 1.5;
}
/* TESTIMONIALS */
 .testimonials {
	 width: 100%;
	 display: flex;
	 flex-wrap: wrap;
	 margin-top: 150px;
	 color: #fff;
	 background: #161619;
	 position: relative;
}
 .testimonials:before {
	 content: "";
	 width: 100%;
	 height: 50px;
	 background: #222327;
	 position: absolute;
	 left: 0;
	 top: 0;
}
 .testimonials .section-title {
	 margin-bottom: 0;
}
 .testimonials .testimonials-slider {
	 width: 80%;
	 display: flex;
	 flex-wrap: wrap;
	 overflow: hidden;
	 position: relative;
}
 .testimonials .swiper-pagination {
	 width: 100px;
	 right: 80px;
	 left: auto;
	 bottom: 115px;
	 text-align: right;
}
 .testimonials .swiper-pagination-bullet {
	 background: #222327;
}
 .testimonials .swiper-pagination-bullet:hover {
	 border-color: #222327;
}
 .testimonials .swiper-pagination-bullet-active {
	 border-color: #222327;
	 background: none;
}
 .testimonials .testimonial {
	 width: 100%;
	 display: flex;
	 flex-wrap: wrap;
	 padding: 100px 80px;
	 background: #a6ce39;
	 color: #222327;
}
 .testimonials .testimonial blockquote {
	 font-size: 21px;
	 line-height: 1.7;
	 font-weight: 300;
	 padding-bottom: 30px;
	 margin-bottom: 30px;
	 border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
 .testimonials .testimonial .reviewer {
	 width: 100%;
	 display: flex;
	 flex-wrap: wrap;
}
 .testimonials .testimonial .reviewer img {
	 width: 50px;
	 height: 50px;
	 border-radius: 50%;
	 margin-right: 15px;
	 float: left;
}
 .testimonials .testimonial .reviewer .reviewer-infos {
	 width: calc(100% - 65px);
	 float: left;
}
 .testimonials .testimonial .reviewer h6 {
	 display: block;
	 font-weight: 600;
}
 .testimonials .testimonial .reviewer small {
	 display: block;
}
/* TEAM */
 .team {
	 width: 100%;
	 display: flex;
	 flex-wrap: wrap;
	 padding-top: 150px;
	 padding-bottom: 100px;
	 color: #fff;
	 background: #161619;
	 position: relative;
	 z-index: 2;
}
 .team:before {
	 content: "";
	 width: 100%;
	 height: 100px;
	 position: absolute;
	 left: 0;
	 bottom: 0;
	 background: #fff;
}
 .team .reveal-effect.masker:after {
	 background: #222327;
}
 .team h5 {
	 font-size: 20px;
	 font-weight: 300;
	 line-height: 1.5;
}
 .team figure {
	 width: 100%;
	 display: flex;
	 flex-wrap: wrap;
	 position: relative;
	 margin-bottom: -100px;
}
 .team figure:hover ul {
	 opacity: 1;
	 visibility: visible;
}
 .team figure img {
	 width: 100%;
}
 .team figure figcaption {
	 display: block;
	 color: #222327;
	 margin-top: 20px;
}
 .team figure figcaption h6 {
	 display: block;
	 font-weight: 600;
}
 .team figure figcaption small {
	 display: block;
	 opacity: 0.5;
}
 .team figure ul {
	 width: 80%;
	 display: flex;
	 margin: 10%;
	 padding: 0;
	 background: #fff;
	 position: absolute;
	 left: 0;
	 bottom: 60px;
	 -webkit-transition: 0.25s ease-in-out;
	 -moz-transition: 0.25s ease-in-out;
	 -ms-transition: 0.25s ease-in-out;
	 -o-transition: 0.25s ease-in-out;
	 transition: 0.25s ease-in-out;
	 opacity: 0;
	 visibility: hidden;
	 box-shadow: 0 0 20px rgba(0, 0, 0, 0.10);
}
 .team figure ul li {
	 flex: 1;
	 margin: 0;
	 padding: 10px 0;
	 list-style: none;
	 text-align: center;
	 border-right: 1px solid #eee;
}
 .team figure ul li:last-child {
	 border-right: 0;
}
 .team figure ul li a {
	 color: #222327;
	 font-size: 13px;
	 padding: 5px;
}
 .team figure ul li a:hover {
	 color: #a6ce39;
}
/* WORKS */
 .works {
	 width: 100%;
	 display: flex;
	 flex-wrap: wrap;
	 padding: 150px 0;
	 background: #222327;
	 color: #fff;
}
 .works ul {
	 width: 100%;
	 display: flex;
	 flex-wrap: wrap;
	 margin: -60px 0;
	 padding: 0;
	 position: relative;
	 z-index: 2;
}
 .works ul li {
	 width: 33.33333%;
	 display: inline-block;
	 margin: 0;
	 padding: 0;
	 list-style: none;
	 padding: 60px;
}
.mobileshow{
	display:none!important;
}
 .works ul li:nth-child(2n+2) {
	 margin-top: 100px;
}
 .works ul li:nth-child(3n+3) {
	 margin-top: 40px;
}
 .works ul li figure {
	 width: 100%;
	 display: block;
	 margin-bottom: 30px;
	 position: relative;
	 z-index: 2;
	 background: #222327;
	 -webkit-transition: 0.25s ease-in-out;
	 -moz-transition: 0.25s ease-in-out;
	 -ms-transition: 0.25s ease-in-out;
	 -o-transition: 0.25s ease-in-out;
	 transition: 0.25s ease-in-out;
}
 .works ul li figure:hover {
	 box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.3);
	 transform: translateY(-10px);
}
 .works ul li figure:hover:before {
	 opacity: 1;
}
 .works ul li figure:before {
	 content: "";
	 width: 90%;
	 height: 30%;
	 position: absolute;
	 right: -25px;
	 bottom: -30px;
	 z-index: -1;
	 background: url(../images/dot-pattern.png) right;
	 background-size: 10px;
	 opacity: 0;
	 -webkit-transition: 0.25s ease-in-out;
	 -moz-transition: 0.25s ease-in-out;
	 -ms-transition: 0.25s ease-in-out;
	 -o-transition: 0.25s ease-in-out;
	 transition: 0.25s ease-in-out;
}
 .works ul li figure a {
	 width: 100%;
	 background: #222327;
	 display: block;
	 position: relative;
	 z-index: 2;
}
 .works ul li figure a img {
	 width: 100%;
}
 .works ul li h3 {
	 font-weight: 600;
	 margin-bottom: 5px;
	 font-size: 26px;
	 letter-spacing: -1px;
}
 .works ul li small {
	 display: block;
	 font-family: 'Fjalla One', sans-serif;
	 opacity: 0.7;
}
/* CASE STUDY */
 .case-study {
	 width: 100%;
	 display: flex;
	 flex-wrap: wrap;
	 padding: 150px 0;
	 background: #fff;
}
 .case-study h6 {
	 font-weight: 600;
	 margin-top: 30px;
}
 .case-study h5 {
	 font-family: 'Fjalla One', sans-serif;
	 font-size: 5vw;
	 text-align: center;
	 margin-top: 50px;
	 text-transform: uppercase;
}
 .case-study p {
	 margin-bottom: 20px;
	 line-height: 1.5;
}
 .case-study figure {
	 width: 100%;
	 display: block;
	 margin-bottom: 30px;
}
 .case-study figure img {
	 width: 100%;
}
 .case-study figure video {
	 width: 100%;
}
 .case-study .container-fluid {
	 margin-top: 80px;
	 padding-left: 30px;
	 padding-right: 30px;
}
/* BLOG */
 .blog {
	 width: 100%;
	 display: flex;
	 flex-wrap: wrap;
	 padding: 100px 0;
	 background: #fff;
}
 .blog .col-lg-9 {
	 padding-right: 60px;
}
 .blog .sidebar {
	 width: 100%;
	 float: left;
	 display: flex;
	 flex-wrap: wrap;
	 padding: 50px 0;
}
 .blog .sidebar .widget {
	 width: 100%;
	 display: block;
	 border-left: 1px solid #eee;
	 margin-bottom: 40px;
	 padding-left: 30px;
	 padding-bottom: 10px;
}
 .blog .sidebar .widget .title {
	 display: block;
	 font-weight: 800;
	 font-size: 19px;
	 padding: 15px 0;
	 position: relative;
}
 .blog .sidebar .widget .title:before {
	 content: "";
	 width: 1px;
	 height: 100%;
	 background: #222327;
	 position: absolute;
	 left: -31px;
	 top: 0;
}
 .blog .sidebar .widget p {
	 margin: 0;
}
 .blog .sidebar .widget form {
	 width: 100%;
}
 .blog .sidebar .widget form input[type="text"] {
	 width: 100%;
	 margin-bottom: 10px;
}
 .blog .sidebar .widget .categories {
	 width: 100%;
	 margin: 0;
	 padding: 0;
}
 .blog .sidebar .widget .categories li {
	 display: flex;
	 flex-wrap: wrap;
	 margin: 4px 0;
	 padding: 0;
	 list-style: none;
}
 .blog .sidebar .widget .categories li span {
	 width: 20px;
	 height: 20px;
	 line-height: 20px;
	 background: #ccc;
	 color: #fff;
	 margin-right: 15px;
	 margin-left: 0;
	 text-align: center;
	 font-size: 11px;
	 font-weight: 600;
}
 .blog .sidebar .widget .categories li a {
	 color: #222327;
	 margin-left: 0;
	 font-weight: 600;
}
 .blog .sidebar .widget .tags {
	 width: 100%;
	 display: block;
	 margin-bottom: 0;
	 padding: 0;
}
 .blog .sidebar .widget .tags li {
	 display: inline-block;
	 list-style: none;
	 margin-bottom: 5px;
}
 .blog .sidebar .widget .tags li a {
	 font-weight: 600;
	 font-size: 11px;
	 background: #222327;
	 color: #fff;
	 line-height: 1;
	 padding: 3px 6px;
}
 .blog .sidebar .widget .tags li a:hover {
	 color: #a6ce39;
	 text-decoration: none;
}
 .blog .sidebar .widget .mini-works {
	 width: 100%;
	 display: flex;
	 flex-wrap: wrap;
	 margin: 0;
	 padding: 0;
}
 .blog .sidebar .widget .mini-works li {
	 width: 33.3333%;
	 display: inline-block;
	 margin: 0;
	 padding: 4px;
	 list-style: none;
}
 .blog .post {
	 width: 100%;
	 float: left;
	 display: flex;
	 flex-wrap: wrap;
	 align-items: center;
	 margin: 50px 0;
}
 .blog .post.single {
	 position: relative;
}
 .blog .post.single .post-image {
	 width: 100%;
	 margin-bottom: 50px;
}
 .blog .post.single .post-content {
	 width: 100%;
	 padding: 0 60px;
}
 .blog .post.single .post-content .post-title {
	 font-size: 4vw;
	 line-height: 1.4;
}
 .blog .post:nth-child(even) {
	 position: relative;
}
 .blog .post:nth-child(even) .post-image {
	 order: 2;
}
 .blog .post:nth-child(even) .post-image:before {
	 right: auto;
	 left: -25px;
}
 .blog .post:nth-child(even) .post-content {
	 order: 1;
	 padding-right: 60px;
	 padding-left: 0;
	 text-align: right;
}
 .blog .post .post-image {
	 width: 45%;
	 margin: 0;
	 position: relative;
	 box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.10);
}
 .blog .post .post-image img {
	 position: relative;
	 width: 100%;
}
 .blog .post .post-image:before {
	 content: "";
	 width: 90%;
	 height: 60%;
	 position: absolute;
	 right: -25px;
	 bottom: -30px;
	 z-index: 0;
	 background: url(../images/dot-pattern.png) right;
	 background-size: 10px;
	 -webkit-transition: 0.25s ease-in-out;
	 -moz-transition: 0.25s ease-in-out;
	 -ms-transition: 0.25s ease-in-out;
	 -o-transition: 0.25s ease-in-out;
	 transition: 0.25s ease-in-out;
	 opacity: 0.2;
}
 .blog .post .post-content {
	 width: 55%;
	 padding-left: 60px;
}
 .blog .post .post-content h5 {
	 font-weight: 600;
	 margin-top: 30px;
}
 .blog .post .post-content ul {
	 margin-bottom: 30px;
	 padding-left: 20px;
}
 .blog .post .post-content ul li {
	 margin: 0;
}
 .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;
	 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 {
	 width: 44px;
	 height: 44px;
	 line-height: 44px;
	 float: left;
	 background: #222327;
	 color: #fff;
	 border: none;
	 border-radius: 0;
}
 .blog .post .post-content .image-left {
	 width: 40%;
	 float: left;
	 margin-right: 30px;
	 margin-bottom: 30px;
	 margin-top: 20px;
}
 .blog .post .post-content .image-full {
	 width: 100%;
	 display: block;
	 margin: 30px 0;
}
 .blog .post .post-content .post-date {
	 width: 100%;
	 display: block;
	 margin-bottom: 10px;
	 text-transform: uppercase;
	 opacity: 0.5;
}
 .blog .post .post-content .post-title {
	 width: 100%;
	 display: block;
	 margin-bottom: 20px;
	 font-size: 3vw;
	 font-weight: 800;
}
 .blog .post .post-content .post-title a {
	 color: #161619;
}
 .blog .post .post-content .post-title a:hover {
	 color: #a6ce39;
	 text-decoration: none;
}
 .blog .post .post-content .post-author {
	 width: 100%;
	 display: block;
	 margin-bottom: 20px;
}
 .blog .post .post-content .post-author img {
	 width: 50px;
	 height: 50px;
	 display: inline-block;
	 margin-right: 15px;
	 border-radius: 50%;
}
 .blog .post .post-content .post-author span {
	 display: inline-block;
	 color: #a7a7a7;
}
 .blog .post .post-content .post-author span a {
	 color: #222327;
	 font-size: 15px;
}
 .blog .post .post-content .post-author span a:hover {
	 color: #222327;
}
 .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;
	 list-style: none;
}
 .blog .post .post-content .post-categories li a {
	 font-weight: 600;
	 font-size: 11px;
	 background: #222327;
	 color: #fff;
	 line-height: 1;
	 padding: 3px 6px;
}
 .blog .post .post-content .post-categories li a:hover {
	 color: #a6ce39;
	 text-decoration: none;
}
 .blog .post .post-content .post-link {
	 font-family: 'Fjalla One', sans-serif;
	 border-bottom: 2px solid #222327;
	 padding-bottom: 5px;
}
 .blog .post .post-content .post-link:hover {
	 color: #a6ce39;
	 text-decoration: none;
}
/* CLIENTS */
 .clients {
	 width: 100%;
	 display: flex;
	 flex-wrap: wrap;
	 padding: 150px 0;
	 background: #fff;
	 box-shadow: 15px 15px 50px rgba(0, 0, 0, 0.3);
}
 .clients ul {
	 width: 100%;
	 display: flex;
	 flex-wrap: wrap;
	 margin: 0;
	 padding: 0;
	 border-right: 1px solid #eee;
	 border-bottom: 1px solid #eee;
}
 .clients ul li {
	 width: 33.33333%;
	 margin: 0;
	 padding: 40px;
	 list-style: none;
	 border-left: 1px solid #eee;
	 border-top: 1px solid #eee;
}
/* CONTACT */
 .contact {
	 width: 100%;
	 display: flex;
	 flex-wrap: wrap;
	 padding: 150px 0;
	 background: #fff;
}
 .contact h6 {
	 font-weight: 600;
	 margin-top: 30px;
}
 .contact address {
	 display: block;
}
 .contact address p {
	 margin: 0;
}
 .contact address a {
	 text-decoration: underline;
}
 .contact .contact-form {
	 width: 100%;
	 display: block;
}
 .contact .contact-form #contact {
	 display: block;
}
 .contact .contact-form #contact .form-group {
	 display: block;
	 position: relative;
	 margin-bottom: 35px;
}
 .contact .contact-form #contact .form-group span {
	 width: 100%;
	 line-height: 58px;
	 position: absolute;
	 left: 0;
	 top: 0;
	 padding: 0 20px;
	 z-index: 0;
	 -webkit-transition: 0.25s ease-in-out;
	 -moz-transition: 0.25s ease-in-out;
	 -ms-transition: 0.25s ease-in-out;
	 -o-transition: 0.25s ease-in-out;
	 transition: 0.25s ease-in-out;
}
 .contact .contact-form #contact .form-group span.label-up {
	 font-size: 13px;
	 line-height: 16px;
	 top: -20px;
	 font-weight: 600;
}
 .contact .contact-form #contact .form-group input[type="text"] {
	 width: 500px;
	 background: none;
	 position: relative;
	 z-index: 2;
	 border-radius: 50px;
}
 .contact .contact-form #contact .form-group input:focus + span {
	 font-size: 13px;
	 line-height: 16px;
	 top: -20px;
	 font-weight: 600;
}
 .contact .contact-form #contact .form-group textarea {
	 width: 500px;
	 background: none;
	 position: relative;
	 z-index: 2;
}
 .contact .contact-form #contact .form-group textarea:focus + span {
	 font-size: 13px;
	 line-height: 16px;
	 top: -20px;
	 font-weight: 600;
}
 .contact .contact-form #contact .form-group label.error {
	 width: 100%;
	 color: red;
	 margin-top: 5px;
	 margin-bottom: 0;
	 font-weight: 600;
	 font-size: 13px;
}
 .contact .contact-form #success, .contact .contact-form #error {
	 display: none;
	 float: left;
}
 .contact .contact-form #error {
	 background: red;
	 color: #fff;
}
 .contact .contact-form #success {
	 background: green;
	 color: #fff;
}
 .contact .contact-form .alert {
	 border: none;
	 border-radius: 0;
	 padding: 20px 30px;
}
 .contact .map {
	 width: 80%;
	 height: 400px;
	 display: block;
	 background: #222327;
}
 .contact .map iframe {
	 width: 100%;
	 height: 100%;
	 border: none;
}
/* FOOTER */
 .footer {
	 width: 100%;
	 left: 0;
	 bottom: 0;
	 z-index: -1;
	 display: flex;
	 flex-wrap: wrap;
	 padding-top: 100px;
	 color: #fff;
}
 .footer ul {
	 margin: 0;
     padding: 0;
}
 .footer ul li {
	 display: block;
}
 .footer ul li a {
	 color: #fff;
	 font-size: 14px;
}
.spacer{
    width: 100%;
    display: block;
    height: 100px;
    position: relative;
}
.footer h5{
    border-bottom: 1px solid #a6ce39;
    padding-bottom: 10px;
    display: inline-block;
    text-transform: uppercase;
}
 .footer ul li a:hover {
	 color: #a6ce39;
}
 .footer h6 {
	 font-family: 'Fjalla One', sans-serif;
	 font-size: 2vw;
	 margin-bottom: 20px;
}
 .footer h2 {
	font-size: 24px;
	 font-weight: 300;
	 line-height: 1.3;
	 margin-bottom: 50px;
	 opacity: 0.7;
}
 .footer .link {
	 color: #fff;
	 font-size: 17px;
	 border-bottom: 1px solid #a6ce39;
	 padding-bottom: 5px;
}
 .footer .link:hover {
	 border-color: #fff;
	 text-decoration: none;
}
 .footer .footer-bar {
	 width: 100%;
	 display: flex;
	 flex-wrap: wrap;
	 margin-top: 100px;
	 padding: 50px 0;
	 border-top: 1px solid rgba(255, 255, 255, 0.1);
	 font-size: 13px;
}
 .footer .footer-bar .copyright {
	 margin: 0;
}
 .footer .footer-bar .creation {
	 margin-left: auto;
}
 .footer .footer-bar .creation a {
	 color: #fff;
	 text-decoration: underline;
}
 .footer .footer-bar .creation a:hover {
	 text-decoration: none;
	 color: #a6ce39;
}
/* RESPONSIVE TABLET FIXES */
 @media only screen and (max-width: 991px), only screen and (max-device-width: 991px) {
	 .section-title {
		 font-size: 8vw;
		 margin-bottom: 50px;
	}
	 .page-header .inner {
		 padding-left: 160px;
	}
	 .all-cases .inner {
		 padding-left: 160px;
	}
	 .social-media .inner ul li {
		 font-size: 4vw;
	}
	 .all-cases .inner ul li {
		 font-size: 10vw;
	}
	 .works {
		 padding: 80px 0;
	}
	 .works ul li {
		 width: 50%;
	}
	 .slider .gallery-thumbs .swiper-slide-active span {
		 width: 100%;
		 font-size: 8vw;
		 line-height: 11vw;
	}
	 .intro .col-lg-7 {
		 padding-left: 15px;
		 margin-top: 50px;
	}
	 .text-content-block {
		 padding: 80px 0;
	}
	 .intro-image {
		 padding-bottom: 80px;
	}
	 .icon-content-block .col-lg-3:nth-child(3) {
		 margin-top: 0;
	}
	 .icon-content-block .content-block {
		 padding: 30px 20px;
	}
	 .process {
		 margin-bottom: 80px;
	}
	 .process .col-lg-3:first-child {
		 margin-bottom: 40px;
	}
	 .process .odometer {
		 font-size: 8vw;
	}
	 .testimonials {
		 margin-top: 80px;
	}
	 .testimonials:before {
		 display: none;
	}
	 .testimonials .col-lg-6:first-child {
		 order: 2;
	}
	 .testimonials .col-lg-6:last-child {
		 order: 1;
	}
	 .testimonials .testimonials-slider {
		 margin-top: 40px;
		 width: 100%;
	}
	 .testimonials .swiper-pagination {
		 bottom: 65px;
	}
	 .testimonials .testimonial {
		 padding: 50px 80px;
	}
	 .testimonials .section-title {
		 margin-top: 80px;
	}
	 .team {
		 padding: 80px 0;
	}
	 .team:before {
		 display: none;
	}
	 .team .col {
		 width: 33.33333%;
		 flex-basis: auto;
		 flex-grow: inherit;
	}
	 .team figure {
		 margin: 30px 0;
	}
	 .team figure figcaption {
		 color: #fff;
	}
	 .team h5 {
		 margin-bottom: 40px;
		 margin-top: 0;
	}
	 .intro {
		 padding: 80px 0;
	}
	 .clients {
		 padding: 80px 0;
	}
	 .blog {
		 padding: 30px 0;
	}
	 .blog .col-lg-9 {
		 padding-right: 15px;
	}
	 .contact {
		 padding: 80px 0;
	}
	 .contact .map {
		 width: 100%;
		 margin: 50px 0;
	}
	 .contact .contact-form {
		 margin-top: 30px;
	}
	 .footer h6 {
		 font-size: 26px;
	}
	 .footer ul {
		 width: 100%;
		 float: left;
		 margin-bottom: 30px;
	}
	 .footer ul li {
		 margin-left: 0;
		 margin-right: 10px;
	}
}
/* RESPONSIVE MOBILE FIXES */
 @media only screen and (max-width: 767px), only screen and (max-device-width: 767px) {
	 .section-title {
		 font-size: 9vw;
		 margin-bottom: 40px;
	}
	 .slider .gallery-thumbs {
		 width: 100%;
		 margin: 0;
	}
	 .page-header .inner {
		 padding-left: 100px;
	}
	 .page-header .inner p {
		 font-size: 17px;
		 padding-right: 10%;
	}
	 .all-cases .inner {
		 padding-left: 100px;
	}
	 .all-cases .inner ul li {
		 font-size: 13vw;
	}
	 .site-navigation .inner {
		 padding-left: 0;
		 margin-bottom: 100px;
	}
	 .site-navigation .inner ul li {
		 line-height: 1;
	}
	 .site-navigation .inner ul li a {
		font-size: 30px;
	}
	 .site-navigation .inner ul li i {
		 font-size: 20px;
		 margin-left: 13px;
	}
	 .site-navigation .inner ul li small {
		 display: none;
	}
	 .site-navigation .inner ul li ul {
		 margin-top: 10px;
	}
	 .site-navigation .inner ul li ul li a {
		font-size: 18px;
	}
	 .left-side {
		 width: 80px;
		 border-right: none;
	}
	 .left-side .follow-us {
		 display: none;
	}
	 .slide-progress {
		 display: none;
	}
	 .all-cases-link {
		 right: 15px;
	}
	 .swiper-button-next {
		 right: 20px;
	}
	 .swiper-button-prev {
		 right: 90px;
	}
	 .icon-content-block .col-lg-3:nth-child(3) {
		 margin: 50px 0;
	}
	 .icon-content-block .content-block {
		 padding: 0;
	}
	 .icon-content-block .content-block.selected {
		 background: none;
		 box-shadow: none;
	}
	 .icon-content-block .content-block.selected:before {
		 display: none;
	}
	 .testimonials .testimonial {
		 padding: 70px 50px;
	}
	 .testimonials .swiper-pagination {
		 bottom: 85px;
	}
	 .team .col {
		 width: 50%;
	}
	 .works ul li {
		 width: 100%;
	}
	 .works ul li:nth-child(2n+2) {
		 margin-top: 0;
	}
	 .works ul li:nth-child(3n+3) {
		 margin-top: 0;
	}
	 .clients ul li {
		 padding: 30px 20px;
		 width: 50%;
	}
	 .clients ul li:last-child {
		 display: none;
	}
	 .blog .post .post-image {
		 width: 100%;
		 margin-bottom: 40px;
	}
	 .blog .post .post-content {
		 width: 100%;
		 padding: 0 !important;
	}
	 .blog .post:nth-child(even) {
		 text-align: left;
	}
	 .blog .post:nth-child(even) .post-image {
		 order: 1;
	}
	 .blog .post:nth-child(even) .post-content {
		 order: 2;
		 text-align: left;
	}
	 .blog .post .post-content .post-title {
		 font-size: 6vw;
	}
	 .blog .post.single .post-content .post-title {
		 font-size: 8vw;
	}
	 .footer h2 {
		font-size: 5vw;
	}
	 .footer h2 br {
		 display: none;
	}
	 .footer .footer-bar .creation {
		 width: 100%;
		 display: block;
		 margin-top: 5px;
	}
}
/* ANIMATIONS */
 @keyframes texteffect {
	 0% {
		 transform: translateY(50%);
		 opacity: 0;
	}
	 100% {
		 transform: translateY(0);
		 opacity: 1;
	}
}
 @keyframes texteffect {
	 0% {
		 transform: translateY(50%);
		 opacity: 0;
	}
	 100% {
		 transform: translateY(0);
		 opacity: 1;
	}
}
 @-webkit-keyframes show-img-1 {
	 0%, 66.6% {
		 visibility: hidden;
	}
	 100%, 66.7% {
		 visibility: visible;
	}
}
 @keyframes show-img-1 {
	 0%, 66.6% {
		 visibility: hidden;
	}
	 100%, 66.7% {
		 visibility: visible;
	}
}
 @-webkit-keyframes slide-bg-2 {
	 33.3% {
		 -webkit-transform-origin: left top;
		 transform-origin: left top;
		 -webkit-transform: scale(0.05, 1);
		 transform: scale(0.05, 1);
	}
	 66.6% {
		 -webkit-transform-origin: left center;
		 transform-origin: left center;
		 -webkit-transform: scale(1, 1);
		 transform: scale(1, 1);
	}
	 66.7% {
		 -webkit-transform-origin: right center;
		 transform-origin: right center;
		 -webkit-transform: scale(1, 1);
		 transform: scale(1, 1);
	}
	 100% {
		 -webkit-transform-origin: right center;
		 transform-origin: right center;
		 -webkit-transform: scale(0, 1);
		 transform: scale(0, 1);
	}
}
 @keyframes slide-bg-2 {
	 33.3% {
		 -webkit-transform-origin: left top;
		 transform-origin: left top;
		 -webkit-transform: scale(0.05, 1);
		 transform: scale(0.05, 1);
	}
	 66.6% {
		 -webkit-transform-origin: left center;
		 transform-origin: left center;
		 -webkit-transform: scale(1, 1);
		 transform: scale(1, 1);
	}
	 66.7% {
		 -webkit-transform-origin: right center;
		 transform-origin: right center;
		 -webkit-transform: scale(1, 1);
		 transform: scale(1, 1);
	}
	 100% {
		 -webkit-transform-origin: right center;
		 transform-origin: right center;
		 -webkit-transform: scale(0, 1);
		 transform: scale(0, 1);
	}
}

.video-hero .inner span {
    width: 100%;
    float: left;
    font-size: 8vw;
    line-height: 6vw;
    font-weight: 800;
    color: #fff;
    margin-bottom: 30px;
    opacity: 0.6;
    z-index: 1;
  }
  
  .bottomopan{
    position: absolute;
    bottom: 0;
    right: 0;
	overflow: hidden;
	transition: all;
    transition-duration: 0.4s;
  }
  
  .bottomopan .overlay{
    width: 100%;
	background: linear-gradient(0deg, rgb(40 40 40) 0%, rgb(115 115 115 / 0%) 100%, transparent 100%);
	height: 100%;
    top: 0;
    position: absolute;
    z-index: 0;
	opacity: 0.8;
  }
  
 .box:hover .overlay{
	background: linear-gradient(0deg, rgb(0 0 0 / 0%) 0%, rgb(115 115 115 / 0%) 100%, transparent 100%);
	transition: all;
	transition-duration: 0.4s;
	transition-timing-function: ease-in-out;
 }
  
  .bottomopan .box{
    background-color: #686161;
    width: 300px;
    height: 200px;
    float: left;
    background-size: cover;
    box-shadow: -3px 4px 4px 0px rgb(12 12 12 / 38%);
    width: 13vw;
    height: 9vw;
	position: relative;
	transition: all;
    transition-duration: 0.4s;
  }
  
  .bottomopan .box .line{
    height: 1.5px;
    width: 100px;
    background: white;
    position: absolute;
    bottom: 18px;
    left: 20px;
    z-index: 2;
  }
  
  .bottomopan .box span{
    color: white;
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-size: 16px;
    z-index: 2;
  }
  .tlogo{
    z-index: 2;
    position: relative;
	top: 25px;
	width: 110px;
	float: left;
  }
  
  
  .left-side {
    display: block;
  }
  
  .all-cases-link {
    display: none;
  }
  
  .left-side .follow-us {
    width: 100px;
    font-family: "Fjalla One", sans-serif;
    color: #fff;
    text-align: center;
    transform: rotate(-90deg);
    margin: auto;
    cursor: pointer;
    position: absolute;
    bottom: 60px;
    left: 10px;
  }
  .phonepan{
    position: relative;
    float: right;
    margin-top: 30px;
    z-index: 2;
  }
  .phonepan svg{
    fill: white;
    width: 14px;
    top: 0px;
    position: relative;
  }
  .phonepan span{
    color: white;
    font-size: 18px;
    font-weight: 600;
    position: relative;
    top: 2px;
    letter-spacing: -1px;
  }
  
  .section-title {
    font-family: "Fjalla One", sans-serif;
    margin-bottom: 80px;
    line-height: 1.4;
    font-size: 2vw;
    letter-spacing: 2px;
  }

  .icon-content-block .content-block svg{
    height: 70px;
      width: 70px;
      fill: #a6ce39;
  }
  .uppercase{
    text-transform: uppercase;
}
.but{
    background: #a6ce39;
    display: inline-block;
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 100px;
    cursor: pointer;
    font-size: 14px;
    -webkit-box-shadow: 2px 10px 18px -10px rgba(0,0,0,0.29);
    -moz-box-shadow: 2px 10px 18px -10px rgba(0,0,0,0.29);
    box-shadow: 2px 10px 18px -10px rgba(0,0,0,0.29);
    transition: all;
    transition-duration: 0.4s;
}
.but:hover{
    background: #222327;
	color: white!important;
	text-decoration: none;
}

.but:hover svg{
 fill:white!important;
}

.but svg{
    width: 25px;
    margin-left: 10px;
    transition: all;
    transition-duration: 0.4s;
    margin-bottom: 1px;
}
.left-side{
 	display: none;
}
.butno{
    display: inline-block;
    cursor: pointer;
    font-size: 14px;
    -webkit-box-shadow: 2px 10px 18px -10px rgba(0,0,0,0.29);
    -moz-box-shadow: 2px 10px 18px -10px rgba(0,0,0,0.29);
    box-shadow: 2px 10px 18px -10px rgba(0,0,0,0.29);
    transition: all;
    transition-duration: 0.4s;
    color: #a6ce39!important;
    text-transform: uppercase;
    font-weight: 600;
}
.butno:hover{
    color: white!important;
}

.butno:hover svg{
 fill:white!important;
}

.butno svg{
    width: 25px;
    margin-left: 10px;
    transition: all;
    transition-duration: 0.4s;
    margin-bottom: 1px;
    fill: #a6ce39;
}
.hnav{
	width: 100%;
    height: 90px;
    position: fixed;
	z-index: 5;
	transition: .4s ease-in-out;
}

#g{
	margin-left: 130px;
}

#g a{
	float: left;
    padding-left: 40px;
    padding-right: 40px;
	line-height: 90px;
	height: 90px;
	font-weight: 600;
	position: relative;
	text-transform: uppercase;
	font-size: 13px;
	color:#fff;
	transition: .4s ease-in-out;
}

#g a:hover{
	text-decoration: none;
}

.menu__itemBorder
{
    height: 3px;
    width: 100%;
    position: relative;
    bottom: 2px;
    top: auto;
    background-color: #fff;
    transition: .4s ease-in-out;
    transform-origin: center center;
    transform: scaleX(0);
}

#g a:hover .menu__itemBorder
{
	transform: scaleX(1);
}

.isactive .menu__itemBorder
{
	transform: scaleX(1);
}

.changenav{
	backdrop-filter: blur(15px);
    background-color: rgb(255 255 255 / 67%);
}

.changenav #g a{
    color: #000;
}

.changenav .menu__itemBorder {
    background-color: #000;
}

.changenav .phonepan span {
    color: #000;
}

.changenav .phonepan svg {
    fill: #000;
}
.head{
    min-height: 500px;
	background-image: linear-gradient(90deg,#2a2a2a,#383838);
    width: 100%;
    height: 70vh;

}

.info-panel{
	height: 60vh;
    display: flex;
    align-items: center;
    color: white;
}

.info-img{
    height: caLc(70vh + 60px);
    width: 50%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    background-size: cover;
}

.info-panel h3{
	text-align: center;
	width: 100%;
	font-size: 43px;
	text-transform: uppercase;
    font-weight: 100;
}



  .bigmen{
	position: absolute;
    top: 90px;
    width: 100%;
	background: rgb(91 91 91 / 93%);
	left: 0;
	padding-top: 30px;
	padding-bottom: 20px;
	display: none;
	opacity: 0;
}

  .bigmen ul{
	list-style: none;
	margin: 0;
	padding: 0;
	margin-left:325px;
	float: left;
  }

  .bigmen a{
	color: white!important;
	float: initial!important;
	height: auto!important;
	line-height: 45px!important;
	padding-left: 0px!important;
    padding-right: 0px!important;
  }

  .bigmen a:hover{
	color: #a6ce39!important;
  }

  .bigmen ul li{
	height: auto;
	animation: fadeIn 0.2s ease-in both;
}
.bigmen ul li:nth-child(0) {
	animation-delay: 0.1s;
}
.bigmen ul li:nth-child(1) {
	animation-delay: 0.2s;
}
.bigmen ul li:nth-child(2) {
	animation-delay: 0.3s;
}
.bigmen ul li:nth-child(3) {
	animation-delay: 0.4s;
}
.bigmen ul li:nth-child(4) {
	animation-delay: 0.5s;
}
.bigmen ul li:nth-child(5) {
	animation-delay: 0.6s;
}
.bigmen ul li:nth-child(6) {
	animation-delay: 0.7s;
}
.bigmen ul li:nth-child(7) {
	animation-delay: 0.8s;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translate3d(0, -20%, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

  .arrowDown {
    transform: translateY(0);
    transition: .4s ease-in-out;
}

  .dlIcon__wrapper:hover .dlIcon__el{animation:dlIcon 1.8s linear infinite}@keyframes dlIcon{0%{transform:translateY(0);opacity:1}35%{transform:translateY(100%);opacity:1}36%{opacity:0}65%{transform:translateY(-100%);opacity:0}66%{transform:translateY(-100%);opacity:1}to{transform:translateY(0);opacity:1}}
  .arrowDown__el {
    animation: dlIcon 1.8s linear infinite;
}


.arrowDown__wrapper{
    width: 25px;
    position: absolute;
    top: 47vh;
    right: calc(50% - 12.5px);
    z-index: 1;
}

.arrowDown__wrapper span{
    position: absolute;
    width: 120px;
    text-align: center;
    left: -50px;
    font-size: 14px;
    bottom: -30px;
    letter-spacing: 2px;
}

.dooropt img{
	padding: 10px;
	width: 100%;
	padding-left: 0px;
	padding-right: 20px;
}

.dooropt span{
	width: 10%;
	float: left;
	opacity: 0.7;
	transition: .2s ease-in-out;
	cursor: crosshair;
}

.dooropt span:hover{
	opacity: 1;
}
.mb20{
	margin-bottom: 20px;
}

.colorpan .box{
	width: 80px;
    height: 80px;
    background: black;
	border-radius: 100%;
	box-shadow: 0px 6px 8px -10px black;
	overflow: hidden;
	margin: auto;
}

.colorpan .name{
	width: 100%;
    text-align: center;
	margin-top: 10px;
	font-size: 12px;
	letter-spacing: 1px;
}

.colorpan{
	width: 160px;
	text-align: center;
}

.colorpan .box span{
	width: 100%;
    height: 100%;
    float: left;
    background: linear-gradient(-25deg, rgb(73 73 73 / 15%) 0%, rgb(96 96 96 / 0%) 30%, rgba(249,249,249,0.5) 100%, rgba(255,255,255,0) 100%);
}

.frame{
	display: inline-block;
    padding: 10px;
    border: 1px solid #ececec;
    padding-top: 50px;
	padding-bottom: 30px;
	margin-top: 20px;
	position: relative;
}

.frame label{
	position: absolute;
    top: -20px;
    padding: 10px;
    background: white;
}

.waldrobemen:hover ~ .bigmen{
	display: block;
	opacity: 1;
}
.bigmen:hover{
	display: block;
	opacity: 1;
}


.fimg{
	float: left;
    width: 250px;
	margin-left: 75px;
}

.mobileshow{
	display: none;
}

@media only screen and (max-width: 767px) {
.footer {
	padding-top: 80px;
}
element.style {
    --char-index: 36;
}
.animated .char {
    display: inline-block;
    animation: texteffect 0.6s cubic-bezier(0.5, 0, 0.5, 1) both;
    animation-delay: calc(10ms * var(--char-index));
}
.splitting .char {
    position: relative;
}
.splitting .word, .splitting .char {
    display: inline-block;
}
* {
    outline: none !important;
}
*, ::after, ::before {
    box-sizing: border-box;
}
Style Attribute {
    --word-index: 6;
}
.intro p {
    font-size: 15px!important
}
	.mobileshow{
		display: block!important;
	}
	.mobilehide{
		display:none!important;
	}
	.hnav{
		display:none;
	}

	.mobilepadlr{
		padding-left: 25px;
		padding-right: 25px;
	}
	.max50{
		max-width: 50%!important;
	}

	.flet{
		padding-right: 7.5px;
	}

	.mlet{
		padding-left: 7.5px;
	}

	.rlet{
		margin-top: 15px;
		padding-right: 7.5px;
	}

	.video-hero {
		height: calc(50vh - 50px);
    margin-top: 50px;
	}
	.bottomopan {
		display: none;
	}
	.video-hero .inner span {
	    font-size: 11vw;
    line-height: 10vw;
    margin-bottom: 0;
	}
	.section-title {
		font-family: "Fjalla One", sans-serif;
		margin-bottom: 10px;
		line-height: 1.4;
		font-size: 6vw;
		letter-spacing: 1px;
	}
	.colorpan .name {
		font-size: 9px;
	}
	.dooropt img {
		padding-right:5px;
	}
	body{
		font-size: 12px;
	}
	.colorpan .box {
		width: 50px;
		height: 50px;
	}
	.worksext{
		margin-bottom: 50px;
	}
	.icon-content-block .content-block svg {
		height: 45px;
		width: 45px;
		margin-top: 40px;
	}

	.sawsvg{
		height: 60px!important;
		width: 60px!important;
	}
	.nomargbot{
		margin-bottom: 0px;
	}
	.works ul li {
		padding: 10px;
		padding-bottom: 0;
	}
	.works ul{
		margin-top: -50px;
		margin-bottom: 60px!important;
		padding: 10px;
	}
	.works{
		padding-bottom: 0;
	}
	.works ul li h3 {
		font-size: 20px;
	}	
	.butno {
		font-size: 12px;
	}
	.works ul li {
		width: 50%;
	}
	.but{
		margin-bottom: 60px;
    font-size: 12px;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
	}
	.pmatch{
		margin-top: 50px!important;
		text-align: center;
	}
	.pmatch img{
	    width: 75px!important;
    float: left!important;
	}
	.footer .footer-bar{
		margin-top: 0px;
	}
	.head .container{
		width: 100%;
		padding-right: 15px;
		padding-left: 15px;
		margin-right: auto;
		margin-left: auto;
		float: initial;
		z-index: 7;
		position: relative;
	}

	.head{
		height: 60vh;
	}

	.arrowDown__wrapper span {
		display: none;
	}
	.info-img {
		height: 60vh;
		width: 100%;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 1;
		background-size: cover;
		opacity: 0.6;
	}
	.benbox {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-left: 0px;
		height: 100%;
		text-align: justify;
	}
	.head{
		min-height: auto;
	}
	.info-panel h3 {
		font-size: 34px;
	}
	.blog {
		padding: 30px 0;
		padding-top: 60px;
	}
	
	.frame {
		display: inline-block;
		padding: 10px;
		border: 1px solid #ececec;
		padding-top: 50px;
		padding-bottom: 30px;
		margin-top: 20px;
		position: relative;
		width: 100%;
		left: 0px;
	}

	.colorpan {
		width: calc(21vw);
			height: 85px;
		text-align: center;
	}

	.spacer {
		width: 100%;
		display: block;
		height: 40px;
	}
	.left-side{
		width: 100%;
		background: #17171a;
		height: 50px;
		position: fixed;
		padding: 0;
		display: block;
	}

	.hamburger__line--01 {
		top: 13px;
		width: 26px;
	}
	.hamburger__line--02 {
		top: 22px;
	}
	.hamburger__line--03 {
		top: 31px;
		width: 30px;
	}

	.hamburger {
		margin-left: 10px;
		margin-top: 2px;
		width: 40px;
		height: 40px;
		display: block;
		position: relative;
		cursor: pointer;
		pointer-events: auto;
		-webkit-tap-highlight-color: transparent;
	}
	.w33{
		width: 33.3%!important;
	}
	.pl7{
		padding-left: 7.5px!important;
	}
	.pr7{
		padding-right: 7.5px!important;
	}
	.mlr{
		margin-left: 15px;
		margin-right: 15px;
	}
	.mmlogo{
		z-index: 2;
		position: absolute;
		top: 9px;
		width: 90px;
		left: calc(50% - 45px);
	}
	.carousel-hero .swiper-button-prev{
		display: none!important;
	}
	.carousel-hero .swiper-button-next{
		display: none!important;
	}
	.carousel-hero .carousel-slider .swiper-slide .inner h2{
		font-size: 8vw!important;
	}
	.carousel-hero .carousel-slider .swiper-slide .inner a {
		font-size: 13px;
	}
	.benbox span {
		font-size: 25px;
		margin-bottom: 10px;
		float: left;
		width: 100%;
	}
	.video-hero .video-bg video {
		height: 50vh;
	}
}