@import url(https://fonts.googleapis.com/css?family=Fjalla+One|Poppins:300,400,600,800&display=swap);

.site-navigation .inner,
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
}

body,
main {
	background: #222327
}

img,
textarea {
	max-width: 100%
}

.animated .char,
.left-side .logo,
.slider .gallery-thumbs .swiper-slide-active a,
.splitting .char,
.splitting .word {
	display: inline-block
}

a,
a:hover {
	color: #222327
}

.odometer.odometer-auto-theme,
.odometer.odometer-auto-theme .odometer-digit,
.odometer.odometer-theme-car,
.odometer.odometer-theme-car .odometer-digit,
body,
html[dir=rtl] .pagination {
	padding: 0
}

.site-navigation .inner,
.social-media .inner {
	z-index: 2;
	padding-left: 100px;
	position: relative
}

.all-cases-link span,
.blog .post .post-content .post-link,
.carousel-hero .slide-progress span,
.carousel-hero .swiper-button-next,
.carousel-hero .swiper-button-prev,
.case-study h5,
.footer h6,
.intro b,
.left-side .follow-us,
.process .odometer,
.section-title,
.slider .gallery-thumbs .swiper-slide a,
.slider .slide-progress span,
.slider .swiper-button-next,
.slider .swiper-button-prev,
.text-content-block h6,
.works ul li small {
	font-family: "Fjalla One", sans-serif
}

* {
	outline: 0 !important
}

body {
	margin: 0;
	font-family: Poppins, sans-serif;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale
}

a {
	transition: .25s ease-in-out
}

a:hover {
	text-decoration: underline
}

.overflow {
	overflow: hidden
}

@media (min-width:1300px) {
	.container {
		max-width: 1340px
	}
}

main {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	position: relative;
	overflow: hidden
}

.blog .post.single,
.blog .post:nth-child(2n),
.splitting .char,
aside,
section {
	position: relative
}

input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=text] {
	max-width: 100%;
	height: 58px;
	border: 1px solid #eee;
	padding: 0 20px
}

button[type=submit],
input[type=submit] {
	height: 58px;
	border: none;
	background: #222327;
	color: #fff;
	padding: 0 30px;
	font-weight: 600;
	font-size: 14px
}

textarea {
	height: 140px;
	border: 1px solid #eee;
	padding: 20px
}

.equalizer {
	width: 26px;
	height: 30px;
	cursor: pointer;
	position: relative
}

.equalizer span {
	background: #fff;
	width: 2px;
	height: 0;
	bottom: 0;
	left: 0;
	display: block;
	position: absolute;
	transition: height .2s linear
}

.equalizer span:first-child {
	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
}

.animated .char {
	animation: .6s cubic-bezier(.5, 0, .5, 1) both texteffect;
	animation-delay: calc(10ms * var(--char-index))
}

.odometer.odometer-auto-theme .odometer-digit .odometer-value,
.odometer.odometer-theme-car .odometer-digit .odometer-value {
	text-indent: -5px;
	text-indent: 0
}

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

.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 {
	float: left;
	position: relative;
	-webkit-transition-property: -webkit-transform;
	transition-property: transform, -webkit-transform;
	-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>* {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-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;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards
}

.all-cases,
.site-navigation,
.social-media {
	position: fixed;
	top: 0;
	right: -100%;
	background: #a5ffff;
	display: flex;
	visibility: hidden
}

.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 {
	content: "";
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transform-origin: left top;
	transform-origin: left top;
	-webkit-transform: scale(.05, 0);
	transform: scale(.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.masker-text:after {
	background-color: #a5ffff
}

.reveal-effect.animated:after {
	-webkit-animation-name: slide-bg-2;
	animation-name: slide-bg-2
}

.swiper-pagination .swiper-pagination-bullet {
	width: 12px;
	height: 12px;
	transform: scale(.4);
	background: #fff;
	opacity: 1;
	border-radius: 50%
}

.swiper-pagination .swiper-pagination-bullet-active,
.swiper-pagination .swiper-pagination-bullet:hover {
	-webkit-transition: box-shadow .3s;
	transition: box-shadow .3s;
	-webkit-transition: background-color .3s, -webkit-transform .3s;
	transition: background-color .3s, transform .3s;
	-webkit-transform: scale(1);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0);
	border: 2px solid #fff;
	background: 0 0
}

.page-header,
.slider {
	transform: scale(1.2);
	filter: blur(20px)
}

.site-navigation {
	width: 100%;
	height: 100vh;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: center;
	z-index: 9;
	opacity: 0;
	-webkit-transition: .3s cubic-bezier(0.86, 0, 0.07, 1);
	-moz-transition: .3s;
	transition: .3s cubic-bezier(0.86, 0, 0.07, 1);
	transition-duration: .5s;
	-webkit-transition-duration: .5s;
	padding-left: 120px
}

.all-cases .layer,
.site-navigation .layer,
.social-media .layer {
	width: 0;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	background: #161619;
	-webkit-transition: .3s cubic-bezier(0.86, 0, 0.07, 1);
	-moz-transition: .3s;
	transition: .3s cubic-bezier(0.86, 0, 0.07, 1) 0.3s;
	transition-duration: .5s;
	-webkit-transition-duration: .5s
}

.site-navigation .inner {
	transition: .25s ease-in-out 0.7s;
	opacity: 0
}

.site-navigation .inner ul li a,
.social-media .inner {
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-ms-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out
}

.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: inline-block;
	margin: 0 1em 0 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: .7;
	letter-spacing: .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;
	transition: .25s ease-in-out
}

.blog .post .post-content .post-categories li a:hover,
.blog .post .post-content .post-link:hover,
.blog .post .post-content .post-title a:hover,
.blog .sidebar .widget .tags li a:hover,
.site-navigation .inner ul li a:hover,
.social-media .inner ul li a:hover {
	color: #a5ffff;
	text-decoration: none
}

.all-cases.active,
.site-navigation.active,
.social-media.active {
	opacity: 1;
	visibility: visible;
	right: 0
}

.all-cases.active .layer,
.blog .sidebar .widget form,
.case-study figure img,
.case-study figure video,
.site-navigation.active .layer,
.slider .gallery-thumbs .swiper-slide a:hover:before,
.social-media.active .layer,
.team figure img,
.works ul li figure a img {
	width: 100%
}

.all-cases.active .inner,
.carousel-hero .carousel-slider .swiper-slide.swiper-slide-active .inner,
.site-navigation.active .inner,
.social-media.active .inner,
.works ul li figure:hover:before {
	opacity: 1
}

.section-title {
	margin-bottom: 30px;
	line-height: 1.4;
	font-size: 4vw;
	letter-spacing: 2px
}

.all-cases,
.social-media {
	width: 100%;
	height: 100%;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 3;
	opacity: 0;
	-webkit-transition: .3s cubic-bezier(0.86, 0, 0.07, 1);
	-moz-transition: .3s;
	transition: .3s cubic-bezier(0.86, 0, 0.07, 1);
	transition-duration: .5s;
	-webkit-transition-duration: .5s
}

.social-media .inner {
	transition: .25s ease-in-out 0.7s;
	opacity: 0;
	text-align: center;
	width: 100%
}

.all-cases .inner,
.slider .gallery-thumbs .swiper-slide a:before {
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-ms-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out
}

.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
}

.all-cases .inner {
	position: relative;
	z-index: 2;
	padding-left: 220px;
	transition: .25s ease-in-out 0.7s;
	opacity: 0;
	width: 100%
}

.all-cases-link,
.left-side {
	-webkit-transition: .3s cubic-bezier(0.86, 0, 0.07, 1);
	-moz-transition: .3s;
	position: absolute
}

.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-link {
	right: -100%;
	top: 30px;
	z-index: 5;
	transition: .3s cubic-bezier(0.86, 0, 0.07, 1) 1s;
	transition-duration: .5s;
	-webkit-transition-duration: .5s
}

.all-cases-link span {
	color: #fff;
	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: #a5ffff;
	text-decoration: none;
	color: #fff
}

.left-side {
	width: 120px;
	height: 100vh;
	display: flex;
	flex-direction: column;
	left: -100%;
	top: 0;
	z-index: 10;
	text-align: center;
	border-right: 1px solid rgba(255, 255, 255, 0.5);
	padding: 30px 0;
	transition: .3s cubic-bezier(0.86, 0, 0.07, 1) 1s;
	transition-duration: .5s;
	-webkit-transition-duration: .5s;
	opacity: 0
}

.slider,
.slider .swiper-container {
	flex-wrap: wrap;
	height: 100vh;
	display: flex
}

.left-side .logo img {
	width: 70px;
	padding-left: 3px
}

.left-side .hamburger {
	margin: 25vh auto
}

.left-side .follow-us {
	width: 100px;
	color: #fff;
	text-align: center;
	transform: rotate(-90deg);
	margin: auto;
	cursor: pointer
}

.left-side .equalizer {
	margin: auto auto 0
}

.slider {
	width: 100%;
	position: relative;
	z-index: 2;
	-webkit-transition: .3s cubic-bezier(0.86, 0, 0.07, 1);
	-moz-transition: .3s;
	transition: .3s cubic-bezier(0.86, 0, 0.07, 1) 0.8s;
	transition-duration: .5s;
	-webkit-transition-duration: .5s
}

.slider .swiper-container {
	width: 100%
}

.slider .swiper-container .swiper-slide {
	background-size: cover;
	background-position: center;
	overflow: hidden
}

.slider .swiper-container .swiper-slide video,
.video-hero .video-bg video {
	min-width: 100%;
	min-height: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	opacity: .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: .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;
	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;
	transition: .25s ease-in-out
}

.carousel-hero .carousel-slider .swiper-slide .inner,
.icon-content-block .content-block {
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-ms-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out
}

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

.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
}

.carousel-hero .swiper-button-prev,
.slider .swiper-button-prev {
	height: auto;
	position: absolute;
	left: auto;
	top: auto;
	right: 120px;
	bottom: 30px;
	color: #fff;
	background: 0 0
}

.carousel-hero .swiper-button-next,
.slider .swiper-button-next {
	height: auto;
	position: absolute;
	left: auto;
	top: auto;
	right: 40px;
	bottom: 30px;
	color: #fff;
	background: 0 0
}

.carousel-hero .slide-progress,
.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
}

.carousel-hero .slide-progress span,
.slider .slide-progress span {
	display: inline-block;
	color: #fff;
	font-size: 14px
}

.carousel-hero .slide-progress .swiper-pagination,
.slider .slide-progress .swiper-pagination {
	width: 160px;
	height: 2px;
	margin: auto 10px;
	display: inline-block;
	position: static;
	background: rgba(255, 255, 255, .3)
}

.carousel-hero .slide-progress .swiper-pagination .swiper-pagination-progressbar-fill,
.intro h6:after,
.intro-image.light:before,
.slider .slide-progress .swiper-pagination .swiper-pagination-progressbar-fill {
	background: #fff
}

.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: #222327
}

.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
}

.carousel-hero .carousel-slider .swiper-slide .inner a,
.video-hero .inner a {
	font-size: 19px;
	color: #fff;
	font-family: "Fjalla One", sans-serif;
	position: relative;
	border-bottom: 2px solid #fff;
	padding-bottom: 4px
}

.carousel-hero .carousel-slider .swiper-slide .inner a:hover,
.footer .footer-bar .creation a:hover,
.video-hero .inner a:hover {
	text-decoration: none;
	color: #a5ffff
}

.carousel-hero {
	width: 100%;
	height: 90vh;
	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
}

.intro,
.page-header {
	flex-wrap: wrap;
	width: 100%;
	display: flex
}

.carousel-hero .carousel-slider .swiper-slide.swiper-slide-active {
	box-shadow: 0 0 50px rgba(0, 0, 0, .5);
	z-index: 3
}

.carousel-hero .carousel-slider .swiper-slide.swiper-slide-active:after {
	opacity: .4
}

.carousel-hero .carousel-slider .swiper-slide:after {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: #222327;
	opacity: .7
}

.carousel-hero .carousel-slider .swiper-slide .inner {
	width: 100%;
	display: block;
	text-align: center;
	color: #fff;
	position: relative;
	z-index: 2;
	opacity: 0;
	transition: .25s ease-in-out
}

.carousel-hero .carousel-slider .swiper-slide .inner h2 {
	width: 100%;
	float: left;
	font-size: 3rem;
	line-height: 5vw;
	font-weight: 500;
	color: #fff;
	margin-bottom: 10px;
	font-family: "Fjalla One";
}

.page-header {
	height: 80vh;
	flex-direction: column;
	justify-content: center;
	background: #161619;
	position: relative;
	-webkit-transition: .3s cubic-bezier(0.86, 0, 0.07, 1);
	-moz-transition: .3s;
	transition: .3s cubic-bezier(0.86, 0, 0.07, 1) 0.8s;
	transition-duration: .5s;
	-webkit-transition-duration: .5s
}

.page-header .video-bg {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden
}

.page-header .video-bg .full {
	min-width: 100%;
	min-height: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	opacity: .5
}

.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: -.5px
}

.intro {
	padding: 100px 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;
	display: inline-block;
	margin-left: 15px;
	margin-bottom: 7px
}

.intro b {
	font-size: 120px;
	line-height: 1;
	float: left;
	font-weight: 400;
	margin-right: 20px
}

.intro h4 {
	font-weight: 600
}

.intro p {
	font-size: 20px;
	font-weight: 300;
	margin-bottom: 35px
}

.intro small {
	display: block;
	opacity: .7;
	margin-bottom: 50px
}

.footer .link,
.intro a {
	color: #fff;
	font-size: 17px;
	border-bottom: 1px solid #a5ffff;
	padding-bottom: 5px
}

.intro a:hover {
	border-color: #fff
}

.intro-image {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 100px;
	position: relative
}

.intro-image:before {
	content: "";
	width: 100%;
	height: 100px;
	background: #161619;
	position: absolute;
	left: 0;
	top: 0
}

.intro-image .office-slider {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	background: #222327;
	position: relative;
	overflow: hidden
}

.icon-content-block,
.process {
	display: flex;
	flex-wrap: wrap;
	color: #fff;
	width: 100%;
	text-align: center
}

.intro-image figure {
	width: 100%;
	display: block;
	margin: 0;
	position: relative
}

.intro-image figure img {
	width: 100%;
	opacity: .7
}

.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 {
	margin-bottom: 100px
}

.process .odometer {
	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, .1);
	padding-top: 30px;
	margin: 20px 10%;
	font-weight: 600
}

.icon-content-block {
	background: #222327;
    padding-top: 100px;
    padding-bottom: 100px;
}

.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;
	transition: .25s ease-in-out
}

.team figure ul,
.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
}

.icon-content-block .content-block.selected {
	background: #161619;
	box-shadow: 15px 15px 30px rgba(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/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: .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: .7;
	list-style: none;
	font-weight: 300
}

.blog,
.text-content-block {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding: 100px 0;
	background: #fff
}

.team,
.testimonials {
	background: #161619;
	color: #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: .1;
	display: block
}

.text-content-block h6 {
	font-size: 20px
}

.text-content-block p {
	padding-right: 20%;
	margin-bottom: 0;
	line-height: 1.5
}

.testimonials {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	margin-top: 100px;
	position: relative
}

.testimonials:before {
	content: "";
	width: 100%;
	height: 50px;
	background: #222327;
	position: absolute;
	left: 0;
	top: 0
}

.testimonials .section-title {
	margin-bottom: 30px;
}

.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
}

.team .reveal-effect.masker:after,
.testimonials .swiper-pagination-bullet {
	background: #222327
}

.testimonials .swiper-pagination-bullet:hover {
	border-color: #222327
}

.testimonials .swiper-pagination-bullet-active {
	border-color: #222327;
	background: 0 0
}

.testimonials .testimonial {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding: 100px 80px;
	background: #a5ffff;
	color: #222327
}

.team figure ul,
.team:before {
	background: #fff;
	position: absolute;
	left: 0
}

.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, .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
}

.team figure figcaption h6,
.testimonials .testimonial .reviewer h6 {
	display: block;
	font-weight: 600
}

.contact .contact-form #contact,
.contact address,
.testimonials .testimonial .reviewer small {
	display: block
}

.team,
.team figure {
	display: flex;
	position: relative
}

.team {
	width: 100%;
	flex-wrap: wrap;
	padding-top: 100px;
	padding-bottom: 100px;
	z-index: 2
}

.team figure,
.works {
	width: 100%;
	flex-wrap: wrap
}

#fab .float,
#fab ul,
.footer {
	position: fixed
}

.team:before {
	content: "";
	width: 100%;
	height: 100px;
	bottom: 0
}

.team h5 {
	font-size: 20px;
	font-weight: 300;
	line-height: 1.5
}

.team figure {
	margin-bottom: -100px
}

.team figure:hover ul {
	opacity: 1;
	visibility: visible
}

.team figure figcaption {
	display: block;
	color: #222327;
	margin-top: 20px
}

.team figure figcaption small {
	display: block;
	opacity: .5
}

.team figure ul {
	width: 80%;
	display: flex;
	margin: 10%;
	padding: 0;
	bottom: 60px;
	transition: .25s ease-in-out;
	opacity: 0;
	visibility: hidden;
	box-shadow: 0 0 20px rgba(0, 0, 0, .1)
}

.clients ul li,
.works ul li {
	width: 33.33333%;
	list-style: none
}

.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
}

.footer ul li a:hover,
.team figure ul li a:hover {
	color: #a5ffff
}

.works {
	display: flex;
	padding: 100px 0;
	background: #222327;
	color: #fff
}

.case-study,
.works ul {
	flex-wrap: wrap;
	display: flex;
	width: 100%
}

.case-study,
.clients,
.contact {
	background: #fff
}

.works ul {
	margin: -60px 0;
	padding: 0;
	position: relative;
	z-index: 2
}

.works ul li {
	display: inline-block;
	margin: 0;
	padding: 60px
}

.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;
	transition: .25s ease-in-out
}

.blog .post .post-image:before,
.works ul li figure:before {
	content: "";
	right: -25px;
	bottom: -30px;
	background: url(../images/dot-pattern.png) right/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
}

.works ul li figure:hover {
	box-shadow: 15px 15px 30px rgba(0, 0, 0, .3);
	transform: translateY(-10px)
}

.works ul li figure:before {
	width: 90%;
	height: 30%;
	position: absolute;
	z-index: -1;
	opacity: 0;
	transition: .25s ease-in-out
}

.works ul li figure a {
	width: 100%;
	background: #222327;
	display: block;
	position: relative;
	z-index: 2
}

.works ul li h3 {
	font-weight: 600;
	margin-bottom: 5px;
	font-size: 26px;
	letter-spacing: -1px
}

.works ul li small {
	display: block;
	opacity: .7
}

.case-study {
	padding: 75px 0
}

.blog .post .post-content h5,
.case-study h6,
.contact h6 {
	font-weight: 600;
	margin-top: 30px
}

.case-study h5 {
	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 .container-fluid {
	margin-top: 80px;
	padding-left: 30px;
	padding-right: 30px
}

.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 .post .post-content ul li,
.blog .sidebar .widget p,
.contact address p,
.footer .footer-bar .copyright,
html[dir=rtl] {
	margin: 0
}

.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 .post .post-content .post-categories li a,
.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 .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
}

.clients,
.clients ul {
	flex-wrap: wrap;
	display: flex
}

.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(2n) .post-image {
	order: 2
}

.blog .post:nth-child(2n) .post-image:before {
	right: auto;
	left: -25px
}

.blog .post:nth-child(2n) .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, .1)
}

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

.blog .post .post-image:before {
	width: 90%;
	height: 60%;
	position: absolute;
	z-index: 0;
	transition: .25s ease-in-out;
	opacity: .2
}

.blog .post .post-content {
	width: 55%;
	padding-left: 60px
}

.blog .post .post-content ul {
	margin-bottom: 30px;
	padding-left: 20px
}

.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: .5
}

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

.blog .post .post-content .post-title {
	font-size: 3vw;
	font-weight: 800
}

.blog .post .post-content .post-title a {
	color: #161619
}

.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-link {
	border-bottom: 2px solid #222327;
	padding-bottom: 5px
}

.clients {
	width: 100%;
	padding: 100px 0;
	box-shadow: 15px 15px 50px rgba(0, 0, 0, .3)
}

.clients ul {
	width: 100%;
	margin: 0;
	padding: 0;
	border-right: 1px solid #eee;
	border-bottom: 1px solid #eee
}

.clients ul li {
	margin: 0;
	padding: 40px;
	border-left: 1px solid #eee;
	border-top: 1px solid #eee
}

.contact {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding: 100px 0
}

.contact address a {
	text-decoration: underline
}

.contact .contact-form {
	width: 100%;
	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: .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
}

.contact .contact-form #contact .form-group input:focus+span,
.contact .contact-form #contact .form-group span.label-up,
.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 input,
.contact .contact-form #contact .form-group textarea {
	width: 100%;
	background: 0 0;
	position: relative;
	z-index: 2
}

.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 #error,
.contact .contact-form #success {
	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
}

#fab .float,
#fab ul li a {
	color: #fff;
	border-radius: 50px;
	text-align: center;
	box-shadow: 2px 2px 3px #999;
	width: 60px;
	height: 60px
}

.footer {
	width: 100%;
	left: 0;
	bottom: 0;
	z-index: -1;
	display: flex;
	flex-wrap: wrap;
	padding-top: 100px;
	color: #fff;
	background: url(../images/footer-bg.png) top center/80% auto no-repeat
}

.footer ul {
	margin: 0;
	padding: 0;
	float: right
}

.footer ul li {
	display: inline-block;
	margin-left: 10px
}

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

.footer h6 {
	font-size: 2vw;
	margin-bottom: 20px
}

.footer h2 {
	font-size: 4vw;
	font-weight: 300;
	line-height: 1.3;
	margin-bottom: 50px;
	opacity: .7
}

.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, .1);
	font-size: 13px
}

.footer .footer-bar .creation {
	margin-left: auto
}

.footer .footer-bar .creation a {
	color: #fff;
	text-decoration: underline
}

html[dir=rtl] body {
	text-align: right
}

html[dir=rtl] .site-navigation .inner {
	padding-left: 0;
	padding-right: 100px
}

html[dir=rtl] .all-cases-link span,
html[dir=rtl] .pagination .page-item {
	margin-right: 0;
	margin-left: 10px
}

html[dir=rtl] .all-cases .inner,
html[dir=rtl] .page-header .inner {
	padding-left: 120px;
	padding-right: 100px
}

html[dir=rtl] .intro .col-lg-7 {
	padding-left: 0;
	padding-right: 10%
}

html[dir=rtl] .blog .col-lg-9,
html[dir=rtl] .blog .post:nth-child(2n) .post-content {
	padding-left: 60px;
	padding-right: 0
}

html[dir=rtl] .intro h6:after {
	margin-left: 0;
	margin-right: 15px
}

html[dir=rtl] .intro b {
	float: right;
	margin-left: 20px;
	margin-right: 0
}

html[dir=rtl] .intro-image figure figcaption {
	left: auto;
	right: 0
}

html[dir=rtl] .blog .post .post-content {
	padding-left: 0;
	padding-right: 60px
}

html[dir=rtl] .blog .post .post-content .post-author img,
html[dir=rtl] .testimonials .testimonial .reviewer img {
	margin-right: 0;
	margin-left: 15px
}

html[dir=rtl] .blog .sidebar .widget {
	padding-left: 0;
	padding-right: 30px;
	border-left: none;
	border-right: 1px solid #eee
}

html[dir=rtl] .blog .sidebar .widget .title:before {
	left: auto;
	right: -31px
}

html[dir=rtl] .text-content-block h5,
html[dir=rtl] .text-content-block p {
	padding-right: 0;
	padding-left: 20%
}

html[dir=rtl] .testimonials .swiper-pagination {
	left: 0;
	right: auto;
	text-align: left
}

html[dir=rtl] .footer ul {
	float: left
}

html[dir=rtl] .footer .footer-bar .copyright {
	order: 1
}

html[dir=rtl] .footer .footer-bar .creation {
	order: 2;
	margin-right: auto;
	margin-left: 0
}

@media only screen and (max-width:991px),
only screen and (max-device-width:991px) {
	.section-title {
		font-size: 8vw;
		margin-bottom: 50px
	}

	.all-cases .inner,
	.page-header .inner {
		/*padding-left: 160px*/
	}

	.social-media .inner ul li {
		font-size: 4vw
	}

	.all-cases .inner ul li {
		font-size: 10vw
	}

	.clients,
	.intro,
	.team,
	.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
	}

	.contact,
	.text-content-block {
		padding: 60px 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,
	.testimonials .section-title {
		margin-top: 80px
	}

	.team:before,
	.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
	}

	.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
	}

	.blog {
		padding: 30px 0
	}

	.blog .col-lg-9 {
		padding-right: 15px
	}

	.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
	}
}

@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: 60px*/
	}

	.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
	}

	.site-navigation .inner ul li {
		line-height: 1
	}

	.site-navigation .inner ul li a {
		font-size: 34px
	}

	.site-navigation .inner ul li i {
		font-size: 20px;
		margin-left: 13px
	}

	.clients ul li:last-child,
	.footer h2 br,
	.icon-content-block .content-block.selected:before,
	.left-side .follow-us,
	.site-navigation .inner ul li small,
	.slide-progress {
		display: none
	}

	.site-navigation .inner ul li ul {
		margin-top: 10px
	}

	.site-navigation .inner ul li ul li a {
		font-size: 22px
	}

	.left-side {
		width: 60px;
		border-right: 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: 0 0;
		box-shadow: none
	}

	.testimonials .testimonial {
		padding: 70px 50px
	}

	.testimonials .swiper-pagination {
		bottom: 85px
	}

	.team .col {
		width: 50%;
		flex-basis: 50%;
		flex-grow: inherit
	}

	.team figure {
		display: block;
		height: auto
	}

	.team figure img {
		height: auto;
		object-fit: cover
	}

	.works ul li {
		width: 100%
	}

	.works ul li:nth-child(2n+2),
	.works ul li:nth-child(3n+3) {
		margin-top: 0
	}

	.clients ul li {
		padding: 30px 20px;
		width: 50%
	}

	.blog .post .post-image {
		width: 100%;
		margin-bottom: 40px
	}

	.blog .post .post-content {
		width: 100%;
		padding: 0 !important
	}

	.blog .post:nth-child(2n) {
		text-align: left
	}

	.blog .post:nth-child(2n) .post-image {
		order: 1
	}

	.blog .post:nth-child(2n) .post-content {
		order: 2;
		text-align: left
	}

	.blog .post .post-content .post-title,
	.footer h2 {
		font-size: 7vw
	}

	.blog .post.single .post-content .post-title {
		font-size: 8vw
	}

	.footer .footer-bar .creation {
		width: 100%;
		display: block;
		margin-top: 5px
	}
}

@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(.05, 1);
		transform: scale(.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(.05, 1);
		transform: scale(.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)
	}
}

.kenburns {
	position: absolute;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	overflow: hidden;
	margin: auto;
	left: 0 !important;
	right: 0 !important;
	top: 0 !important;
	bottom: 0 !important;
	animation: 50s linear infinite alternate kenburns
}

@keyframes kenburns {

	0%,
	100% {
		transform: scale(1.1) translate(-5%, 5%)
	}

	25%,
	75% {
		transform: scale(1) translate(0, 0)
	}

	50% {
		transform: scale(1.1) translate(5%, 5%)
	}
}

#fab .float {
	bottom: 25px;
	right: 25px;
	background-color: #76a9ea;
	z-index: 1000;
	animation: 2s ease-out bot-to-top
}

#fab ul {
	right: 25px;
	padding-bottom: 20px;
	bottom: 80px;
	z-index: 100
}

#fab ul li {
	list-style: none;
	margin-bottom: 10px
}

#fab ul li a {
	background-color: #f33;
	display: block
}

#fab ul:hover {
	visibility: visible !important;
	opacity: 1 !important
}

#fab .my-float {
	font-size: 30px;
	margin-top: 15px
}

#fab a#menu-share+ul {
	visibility: hidden
}

#fab a#menu-share:hover+ul {
	visibility: visible;
	animation: .5s scale-in
}

#fab a#menu-share i,
#fab a#menu-share img {
	animation: .5s rotate-in
}

#fab a#menu-share:hover img,
#fab a#menu-share:hover>i {
	animation: .5s rotate-out
}

@keyframes bot-to-top {
	0% {
		bottom: -40px
	}

	50% {
		bottom: 40px
	}
}

@keyframes scale-in {
	from {
		transform: scale(0);
		opacity: 0
	}

	to {
		transform: scale(1);
		opacity: 1
	}
}

@keyframes rotate-in {
	from {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

@keyframes rotate-out {
	from {
		transform: rotate(360deg)
	}

	to {
		transform: rotate(0)
	}
}

.left-side .social-links {
    display: inline-block;
}

.left-side .social-links ul {
    margin: 0;
    padding: 0;
}

.left-side .social-links ul li {
    display: block;
    margin: 10px 0;
    padding: 0;
}

.left-side .social-links ul li a {
    color: #ffffff;
    display: inline-block;
    font-size: 13px;
}

.navbar {
    width: calc(100% - 120px);
    position: absolute;
    right: 0;
    top: 0;
    z-index: 9;
    padding: 30px 40px;
}

.body-hamburger-menu .navbar .all-cases-link {
    margin-left: auto;
}

.navbar .all-cases-link {
    margin-right: 0;
    margin-left: 20px;
}

.all-cases-link {
    margin-right: 0;
    display: flex;
    align-items: center;
}

/* Slider */

.page-loaded .slider {
    filter: blur(0);
    transform: scale(1);
}

.page-loaded .slider {
	filter: blur(0);
	transform: scale(1);
}

.text-interactive {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	background-size: cover !important;
	transition: background ease 0.5s;

	.container {
		padding: 0 10%;
	}

	.interactive-text {
		display: inline-block;
		background-image: none !important;
		color: #fff;
		font-weight: 800;
		font-size: 6vw;
		margin-right: 40px;

		span {
			@include second-font;
			font-size: 18px;
			opacity: 0.7;
			text-transform: uppercase;
		}

		a {
			-webkit-text-stroke-width: 1px;
			-webkit-text-stroke-color: #fff;
			color: transparent;

			&:hover {
				text-decoration: none;
				color: #fff;
			}
		}
	}
}

/* CAROUSEL HERO */
.slider {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-wrap: wrap;
	position: relative;
	background: var(--color-dark);

	.carousel-slider {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		overflow: hidden;

		.swiper-slide {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			margin: 0;
			background-size: cover;
			background-position: center;

			.slide-video-bg {
				width: 100%;
				height: 100%;
				position: absolute;
				overflow: hidden;

				&:after {
					content: "";
					width: 100%;
					height: 100%;
					background: #000;
					position: absolute;
					left: 0;
					top: 0;
					z-index: 1;
					opacity: 0.3;
				}

				video {
					width: 100%;
					min-width: 100%;
					min-height: 100%;
					display: block;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translateX(-50%) translateY(-50%);
				}
			}

			.inner {
				width: 100%;
				display: block;
				text-align: center;
				opacity: 0;
				position: relative;
				z-index: 2;
			}

			&.swiper-slide-active {
				box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
				z-index: 3;

				.inner {
					opacity: 1;
				}

				&:after {
					opacity: 0.2;
				}
			}

			&:after {
				content: "";
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				background: var(--color-dark);
				opacity: 0.7;
			}

			h1 {
				width: 100%;
				float: left;
				font-size: 4vw;
				line-height: 5vw;
				font-weight: 800;
				color: #fff;
				margin-bottom: 10px;
			}

			a {
				font-size: 19px;
				color: #fff;
				@include second-font;
				padding-bottom: 5px;
				position: relative;
				border-bottom: 2px solid #fff;
				padding-bottom: 4px;

				&:hover {
					text-decoration: none;
					color: var(--color-main);
				}
			}
		}
	}

	.swiper-button-prev {
		height: auto;
		position: absolute;
		left: auto;
		top: auto;
		right: 120px;
		bottom: 30px;
		@include second-font;
		color: #fff;
		background: none;
	}

	.swiper-button-next {
		height: auto;
		position: absolute;
		left: auto;
		top: auto;
		right: 40px;
		bottom: 30px;
		@include second-font;
		color: #fff;
		background: none;
	}

	.slide-progress {
		width: 220px;
		display: flex;
		flex-wrap: wrap;
		position: absolute;
		left: 50%;
		bottom: 30px;
		margin-left: -110px;
		z-index: 3;
		text-align: center;

		span {
			display: inline-block;
			color: #fff;
			@include second-font;
			font-size: 14px;
		}

		.swiper-pagination {
			width: 160px;
			height: 2px;
			margin: auto 10px;
			display: inline-block;
			position: static;
			background: rgba(255, 255, 255, 0.3);

			.swiper-pagination-progressbar-fill {
				background: #fff;
			}
		}
	}
}

/* RESPONSIVE MOBILE FIXES */
@media only screen and (max-width: 767px), only screen and (max-device-width: 767px) {
	main{ margin-bottom: 0 !important;}
	br{display: none;}
	.site-navigation{padding-left: 70px; padding-top: 50px;}
	.site-navigation .inner{padding: 20px 40px;}
	.site-navigation .inner ul li{margin: 5px 0;}
	.site-navigation .inner ul li ul{padding-left: 20px;}
	.text-interactive .container{padding-left: 100px;}
	.text-interactive .interactive-text{font-size: 9vw; line-height: 1.2;}
	.text-interactive .interactive-text span{font-size: 13px;}
	.slider .swiper-container .swiper-slide{padding:0 80px; padding-left: 100px;}
	.section-title a{margin-bottom: 30px;}
	.slider .slide-progress{display: none;}
	.slider .gallery-thumbs{width: 100%; margin: 0;}
	.slider .gallery-thumbs .swiper-slide h1{ font-size: 8vw;}
	.left-side{padding-bottom: 13px;}
	/*.page-header .inner{padding-left: 100px;}*/
	.page-header .inner p{font-size: 17px; padding-right: 10%;}
	.section-title h2{font-size: 8vw;}
	.all-cases .inner{padding-left: 100px;}
	.all-cases .inner ul li{font-size: 	10vw; margin-bottom: 30px;}
	.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;}
	.team{margin-bottom: 30px; background: none;}
	.team figcaption{color: #fff; background: none;}
	.icon-content-block figure{padding: 20px 0;}
	.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-slider .swiper-pagination{ width: 100%; padding: 0 25px; left: 0; right: 0;}
	.testimonials .testimonial{padding: 70px 50px;}
	.testimonials .swiper-pagination{bottom: 85px;}
	.milestones .odometer{font-size: 10vw;}
	.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;}
	.works li:nth-child(2n+2){ margin-top: 0; padding-top: 0;}
	.works li:nth-child(3n+3){ margin-top: 0; padding-top: 0;}
	.clients figure{padding: 40px 20px;}
	.clients-spacing{ margin-left: 0 !important; margin-right: 0 !important;}
	.testimonials-flex .vc_col-sm-5{display: flex; order: 2;}
	.testimonials-flex .vc_col-sm-4{display: flex; order: 1; padding-top: 75px !important;}
	.works li{width: 100%; padding: 0 30px; margin-top: 0 !important; margin-bottom: 60px;}
	.works li:last-child{margin-bottom: 0;}
	.blog-post .post-image{width: 100%; display: block; flex:inherit; order: 1 !important;}
	.blog-post .post-content{width: 100%; display: block !important; flex:inherit !important; text-align: left !important; padding: 0 !important; order: 2 !important;}
	.blog-post .post-content .post-title{font-size: 6vw;}
	.blog-post.single-post .post-content .post-title{font-size: 8vw;}
	.wpcf7{ width: 100%; margin-left: 0; padding: 50px 30px;}
	.wpcf7 p:nth-last-child(2){ margin-bottom: 0;}
	.content-slider .content-pagination{display: none;}
	.section-title.text-center{padding: 0 15%;}
	.footer{position: static !important;}
	.footer-fixed .footer{position: static;}
	.footer .call-to-action{margin-top: 100px; margin-bottom:50px;}
	.footer .call-to-action h6{ font-size: 5vw;}
	.footer .call-to-action h2{font-size: 7vw;}
	.footer .call-to-action h2 br{display: none;}
	.footer .footer-bar .creation{ width: 100%; display: block; margin-top: 5px;}
	.footer .footer-bottom .creation{ margin-left: 0;}
	.content-section{padding: 75px 0;}
	.content-section .vc_custom_1583658801308{margin-bottom: 75px !important;}
	.content-section .vc_custom_1583659272991{margin-bottom: 25px !important;}
	.content-section .vc_custom_1583660019502{padding-left: 15px !important; padding-right: 15px !important;}
	.content-section .vc_custom_1583658620539{margin-top: 25px !important; padding-left: 5% !important; padding-right: 5% !important;}
	.content-section .vc_custom_1583657509251{padding-top: 25px !important; margin-top: 0 !important;}
	.content-section .vc_custom_1583656998152{ margin-top: 0 !important;}
	.content-section .vc_custom_1583612565543{padding-top: 75px !important;}
	.content-section .vc_custom_1583656998152 .section-title{margin-bottom: 25px;}
	.content-section .wpb_column:last-child .team{margin-bottom: 75px;}
	.content-section .vc_custom_1584008554616{padding-bottom: 75px !important;}
	.content-section .title-spacing{margin-bottom: 25px;}
	.page-loaded {
    margin-bottom: 0px !important;
}
}