@charset "utf-8";
@import url(../fonts/yekan.css);


html {
	overflow-x : hidden !important;
	overflow-y : scroll !important;
	height     : 100%;
	font-family: yekan, sans-serif;
}

body {
	margin     : 0;
	padding    : 0;
	font-weight: 400;
	font-size  : 12px;
	background : #f2f4f8;
	height     : 100%;
	text-align : center;
}

@-o-viewport {
	width: device-width;
}

@-ms-viewport {
	width: device-width;
}

@viewport {
	width: device-width;
}

.rtl-a {
	margin-right: 26px;
	margin-top  : 3px;
}

/*--------------Typography--------------------------------------*/
h1 {
	font-size     : 4.46666666667em;
	text-transform: uppercase;
	line-height   : 1.17em;
}

h2 {
	font-size: 3.2em;
}

h3 {
	font-size: 1em;
}

h4 {
	font-size: 0.9em;
}

h5 {
	font-size: 0.8em;
}

h6 {
	font-size: 0.6em;
}

p {
	text-align    : left;
	font-size     : 11px;
	line-height   : 24px;
	padding-bottom: 10px;
	font-weight   : 500;
	color         : #5e646a;
}

blockquote {
	float      : left;
	padding    : 10px 20px 0;
	margin     : 0 0 20px;
	font-size  : 17.5px;
	border-left: 15px solid #eee;
	position   : relative;
	background : #fff;
}

blockquote:before {
	font-family: Font Awesome\ 5 Pro;
	content    : "\f10e";
	position   : absolute;
	top        : 5px;
	left       : 10px;
	color      : #ccc;
	z-index    : -1;
	opacity    : 0.7;
	font-size  : 44px;
}

blockquote p {
	font-style: italic;
}

/* ---------Page preload--------------------------------------*/
.main-loader-wrap {
	position  : fixed;
	top       : 0;
	left      : 0;
	right     : 0;
	bottom    : 0;
	z-index   : 50;
	background: #fff;
	transform : translate3d(0, 0, 0);
	overflow  : hidden;
}

.loader-dec {
	position : absolute;
	top      : 50%;
	left     : 50%;
	width    : 250px;
	height   : 350px;
	z-index  : 1;
	margin   : -175px 0 0 -125px;
	animation: target2 4.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
}

.loader-dec:before,
.loader-dec:after {
	content   : '';
	position  : absolute;
	background: #eee;
}

.loader-dec:before {
	width : 1px;
	height: 100%;
	left  : 50%;
	top   : 0;
}

.loader-dec:after {
	width : 100%;
	height: 1px;
	left  : 0;
	top   : 50%;
}

@keyframes target2 {
	0% {
		margin: -175px 0 0 -125px;
	}

	20% {
		margin: -225px 0 0 -115px;
	}

	40% {
		margin: -185px 0 0 -15px;
	}

	60% {
		margin: -125px 0 0 -215px;
	}

	100% {
		margin: -175px 0 0 -125px;
	}
}

.page-load {
	position : fixed;
	top      : 80px;
	left     : 280px;
	right    : 0;
	bottom   : 0;
	z-index  : 50;
	transform: translate3d(0, 0, 0);
	display  : none;
}

.ir-font {
	font-family: 'yekan';
	font-weight: normal;
	font-style : normal;
}

.loader-spin {
	position  : absolute;
	top       : 50%;
	left      : 50%;
	width     : 70px;
	height    : 70px;
	margin    : -35px 0 0 -35px;
	z-index   : 10;
	transform : scale(0);
	transition: all 500ms cubic-bezier(.19, 1, .22, 1) 0ms;
}

.visspin,
.main-loader-wrap .loader-spin {
	transform: scale(1.0);
}

.main-loader-wrap .loader-spin.novisspin {
	transform: scale(0);
}

.loader-spin:before {
	content      : '';
	position     : absolute;
	left         : 50%;
	top          : 50%;
	width        : 8px;
	height       : 8px;
	margin       : -4px 0 0 -4px;
	border-radius: 50%;
	z-index      : 2;
}

.loader-spin:after {
	content      : '';
	position     : absolute;
	left         : 50%;
	top          : 50%;
	width        : 42px;
	height       : 42px;
	margin       : -21px 0 0 -21px;
	border       : 1px solid #eee;
	border-radius: 50%;
	z-index      : 1;
	background   : #f9f9f9;
}

.loader-spin span {
	position           : absolute;
	top                : 50%;
	left               : 50%;
	width              : 50px;
	height             : 50px;
	margin             : -25px 0 0 -25px;
	border-radius      : 50%;
	border             : 8px solid #ccc;
	box-sizing         : border-box;
	border-top-color   : transparent;
	border-bottom-color: transparent;
	animation          : rotate 1s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
	z-index            : 2;
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.pl-row {
	float   : left;
	width   : 20%;
	overflow: hidden;
	height  : 20%;
	position: relative;
	z-index : 1;
}

.pl-row span {
	position     : absolute;
	left         : 0;
	right        : 0;
	top          : 0;
	bottom       : 0;
	opacity      : 0;
	border-bottom: 1px solid #eee;
	border-left  : 1px solid #eee;
	background   : #fff;
	transform    : scale(0.3);
}

.pl-row span:before {
	content : '';
	position: absolute;
	top     : 0;
	left    : 0;
	right   : 0;
	bottom  : 0;
}

/* ------Cursor------------------------------------------------------------ */
.element {
	position      : fixed;
	left          : 0;
	top           : 0;
	width         : 30px;
	height        : 30px;
	pointer-events: none;
	z-index       : 10000;
}

.element-item {
	position      : fixed;
	transform     : translate(-50%, -50%) scale(1.0);
	width         : 30px;
	height        : 30px;
	border-radius : 50%;
	pointer-events: none;
	opacity       : 1;
	box-sizing    : border-box;
	border        : 1px solid #000;
}

.element-item:before {
	content      : '';
	position     : absolute;
	top          : 50%;
	left         : 50%;
	width        : 6px;
	height       : 6px;
	margin       : -3px 0 0 -3px;
	background   : #000;
	border-radius: 100%;
	z-index      : -1;
	transform    : scale(1.0);
	transition   : all 500ms cubic-bezier(.19, 1, .22, 1) 0ms;
}

.element-item.white_blur {
	border-color: #ccc;
}

.element-item.elem_hover:before {
	opacity  : 0.2;
	transform: scale(6.5);
}

.element-item.elem_hover {
	border-color: transparent;
}

.element-item:after {
	font-family: Font Awesome\ 5 Pro;
	content    : "";
	position   : absolute;
	font-size  : 7px;
	left       : 50%;
	color      : #fff;
	top        : 50%;
	width      : 14px;
	height     : 14px;
	font-weight: 100;
	line-height: 14px;
	margin     : -7px 0 0 -7px;
	opacity    : 0;
	transition : all 500ms cubic-bezier(.19, 1, .22, 1) 0ms;
	transform  : scale(0);
}

.element-item.slider_hover:before {
	transform : scale(8.8);
	background: #000;
}

.element-item.close-icon:before {
	transform : scale(8.8);
	background: #000;
}

.element-item.slider_hover {
	border-color: transparent;
	width       : 60px;
	height      : 60px;
}

.element-item.slider_hover:after {
	transform  : scale(1.0);
	opacity    : 1;
	content    : "\f07e";
	font-size  : 13px !important;
	font-weight: 100;
}

.element-item.slider_linknext:after {
	content    : "Next";
	text-indent: -8px
}

.element-item.close-icon:after {
	transform  : scale(1.5);
	opacity    : 1;
	content    : "\f00d";
	color      : #000;
	line-height: 16px;
}

/* ---------Content Styles--------------------------------------*/
#main {
	height  : 100%;
	width   : 100%;
	position: absolute;
	top     : 0;
	left    : 0;
	z-index : 2;
}

#wrapper {
	vertical-align: top;
	position      : absolute;
	top           : 0;
	left          : 0;
	right         : 0;
	bottom        : 0;
	z-index       : 2;
}

.content-holder {
	position      : absolute;
	top           : 0;
	left          : 0;
	right         : 0;
	bottom        : 0;
	padding       : 90px 0 0 280px;
	z-index       : 2;
	vertical-align: top;
}

.content-holder.fl-con-wrap {
	padding: 0;
}

.container {
	max-width: 1024px;
	width    : 92%;
	margin   : 0 auto;
	position : relative;
	z-index  : 5;
}

.container.fl-container {
	float: left;
}

.container.small-container {
	max-width: 824px;
}

.content {
	width   : 100%;
	position: relative;
	z-index : 4;
	float   : left;
}

.home-content {
	padding: 24px 30px;
}

.fl-wrap {
	float   : left;
	width   : 100%;
	position: relative;
}

.no-bg {
	background: none !important;
}

.full-height {
	height: 100%;
}

.bg {
	position             : absolute;
	top                  : 0;
	left                 : 0;
	width                : 100%;
	height               : 100%;
	background-size      : cover;
	background-attachment: scroll;
	background-position  : center;
	background-repeat    : repeat;
	background-origin    : content-box;
}

.respimg {
	width : 100%;
	height: auto;
}

.overlay {
	position  : absolute;
	top       : 0;
	left      : 0;
	width     : 100%;
	height    : 100%;
	background: #000;
	opacity   : 0.2;
	z-index   : 2;
}

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

.media-wrap {
	margin: 30px 0 50px;
}

.progress-bar-wrap {
	position: fixed;
	top     : 0;
	left    : 0;
	right   : 0;
	height  : 2px;
	z-index : 123;
}

.progress-bar {
	position  : relative;
	height    : 100%;
	width     : 0%;
	z-index   : 2;
	top       : 0;
	transition: all .2s ease-in-out;
}

/*------   Header  ------------------------------------------------------*/
header.main-header {
	position    : fixed;
	left        : 0;
	height      : 80px;
	background  : #fff;
	z-index     : 51;
	right       : 0;
	top         : 0;
	box-shadow  : 0px 1px 15px 1px rgba(113, 106, 202, 0.1);
	padding     : 0 50px;
	padding-left: 280px;
}

header.main-header:before {
	content   : '';
	position  : absolute;
	width     : 380px;
	height    : 1px;
	top       : 50%;
	background: #eee;
	right     : 20px;
	z-index   : -2;
}

header.main-header:after {
	content      : '';
	position     : absolute;
	top          : 50%;
	width        : 8px;
	height       : 8px;
	border-radius: 100%;
	margin-top   : -4px;
	right        : 400px;
	z-index      : -1;
}

.logo-holder {
	position: absolute;
	top     : 0;
	left    : 0;
	width   : 280px;
	height  : 80px;
}

.logo-holder img {
	margin-top: 18px;
	width     : auto;
	height    : 110px;
	position  : relative;
	left      : -10px;
}

.breadcrumb-wrap {
	float       : left;
	position    : relative;
	padding-left: 36px;
	top         : 30px;
}

.breadcrumb-wrap:after {
	content   : '';
	position  : absolute;
	top       : 50%;
	left      : 0px;
	width     : 1px;
	height    : 40px;
	margin-top: -20px;
	z-index   : 1;
}

.breadcrumb-wrap:before {
	content   : '';
	position  : absolute;
	top       : 50%;
	left      : 60px;
	width     : 150px;
	height    : 30px;
	margin-top: -15px;
	background: #f2f4f8;
	z-index   : 1;
}

.breadcrumb-wrap span {
	float         : left;
	font-weight   : 700;
	font-size     : 10px;
	color         : #666;
	text-transform: uppercase;
	margin-right  : 20px;
	position      : relative;
	z-index       : 2;
}

.nav-button-wrap {
	float       : right;
	position    : relative;
	margin-right: 90px;
	top         : 34px;
	cursor      : pointer;
	display     : none;
}

.nav-button {
	float   : right;
	width   : 26px;
	height  : 26px;
	position: relative;
}

.nav-button span {
	float        : left;
	width        : 100%;
	height       : 2px;
	background   : #666;
	margin-bottom: 4px;
	border-radius: 2px;
	display      : none;
}

.nav-button-wrap:before {
	font-family: Font Awesome\ 5 Pro;
	content    : "\f00d";
	position   : absolute;
	color      : #000;
	font-size  : 24px;
	top        : -6px;
	left       : 6px;
	font-weight: 100;
	display    : block;
}

.nav-button-wrap.vis-menbut:before {
	display: none;
}

.nav-button-wrap.vis-menbut span {
	display: block;
}

.nav-overlay {
	position  : fixed;
	top       : 80px;
	left      : 0;
	right     : 0;
	bottom    : 0;
	z-index   : 49;
	background: rgba(0, 0, 0, 0.4);
	display   : none;
}

/*------   Navigation ------------------------------------------------------*/
.nav-holder-wrap {
	position   : fixed;
	top        : 80px;
	left       : 0;
	width      : 280px;
	bottom     : 0;
	z-index    : 50;
	background : #fff;
	overflow   : auto;
	padding-top: 50px;
	box-sizing : border-box;
}

.nav-holder-wrap:before {
	content   : '';
	position  : fixed;
	bottom    : 0;
	left      : 0;
	width     : 150px;
	height    : 80px;
	background: #f2f4f8;
	z-index   : 1;
}

.nv-widget {
	margin-bottom: 20px;
}

.nav-title {
	padding       : 0 20px;
	color         : #666;
	font-weight   : 700;
	font-size     : 11px;
	text-transform: uppercase;
	text-align    : left;
	margin        : 10px 0 15px;
	position      : relative;
	z-index       : 2;
}

.nav-holder {
	position: relative;
	z-index : 2;
}

.nav-holder li {
	position     : relative;
	float        : left;
	width        : 100%;
	padding      : 18px 20px 18px 60px;
	background   : rgba(255, 255, 255, 0.11);
	border-bottom: 1px solid #eee;
	cursor       : pointer;
}

.nav-holder li:before {
	content   : '';
	position  : absolute;
	top       : 0;
	right     : 0;
	width     : 5px;
	height    : 0;
	z-index   : 2;
	transition: all 200ms linear;
}

.nav-holder li ul li:before {
	display: none;
}

.nav-holder li:hover:before {
	height: 100%;
}

.nav-holder li:first-child {
	border-top: 1px solid #eee;
}

.nav-holder li:hover {
	background: none;
}

.nav-holder li i {
	position : absolute;
	top      : 20px;
	right    : 20px;
	color    : #999;
	font-size: 14px;
}

.nav-holder li span.nav-dec {
	position  : absolute;
	top       : 24px;
	right     : 20px;
	background: #ccc;
	height    : 2px;
	width     : 6px;
	z-index   : 4;
}

.nav-holder li span.nav-dec:before {
	content    : '';
	position   : absolute;
	left       : 50%;
	width      : 2px;
	height     : 6px;
	top        : 50%;
	margin-top : -3px;
	margin-left: -1px;
	background : #ccc;
}

.nav-holder nav ul li ul,
.nav-holder nav ul li ul li ul {
	display: none;
	float  : left;
	width  : 100%;
}

.nav-holder nav ul li>ul.visul {
	display: block;
}

.nav-holder li ul {
	float   : left;
	width   : 100%;
	position: relative;
	top     : 8px
}

.nav-holder li ul li {
	padding   : 10px 20px 10px 0;
	background: none;
	border    : none !important;
}

.txt-right {
	text-align: right !important;
}

.nav-holder li a {
	float         : right;
	color         : #666;
	font-size     : 12pt;
	text-transform: uppercase;
}

.nav-contacts,
.nav-social {
	padding   : 0 20px;
	margin-top: 20px;
	z-index   : 2;
}

.nav-social {
	margin-top: 10px;
}

.nav-contacts li {
	margin-bottom: 15px;
	float        : left;
	width        : 100%;
}

.nav-contacts li i {
	font-size   : 12px;
	margin-right: 10px;
	color       : #986BE7;
	font-weight : 700;
}

.nav-contacts li a,
.nav-contacts li i {
	float: left;
}

.nav-contacts li a {
	color         : #666;
	font-weight   : 700;
	font-size     : 10px;
	text-transform: uppercase;
	text-align    : left;
}

.nav-social li {
	float       : left;
	margin-right: 4px;
}

.nav-social:before {
	content   : '';
	position  : absolute;
	bottom    : -30px;
	left      : 20px;
	right     : 20px;
	height    : 1px;
	background: #eee;
}

.nav-social li a {
	width        : 36px;
	height       : 36px;
	line-height  : 36px;
	float        : left;
	color        : #000;
	font-size    : 11px;
	border-radius: 2px;
	transition   : all 200ms linear;
}

.nav-social li a:hover {
	border-radius: 100%;
}

.ps-container>.ps-scrollbar-y-rail>.ps-scrollbar-y {
	border-radius: 2px;
	width        : 4px;
}

/*------  footer ------------------------------------------------------*/
.main-footer {
	padding-left: 30px;
}

.footer-wrap:before {
	content    : '';
	position   : absolute;
	bottom     : 0;
	right      : 0;
	width      : 70%;
	height     : 50%;
	background : #f9f9f9;
	border-top : 1px solid #eee;
	border-left: 1px solid #eee;
}

.footer-inner {
	float        : left;
	max-width    : 1164px;
	padding      : 80px 0 40px 70px;
	width        : 100%;
	background   : #fff;
	position     : relative;
	border       : 1px solid #eee;
	z-index      : 10;
	box-sizing   : border-box;
	margin-bottom: 60px;
	overflow     : hidden;
}

.footer-inner:before {
	content   : '';
	position  : absolute;
	top       : 0;
	width     : 50%;
	right     : 0;
	height    : 70%;
	background: url(../images/pattern2.png) repeat;
	opacity   : 0.7;
}

.footer-inner h3 {
	float         : left;
	width         : 100%;
	text-align    : left;
	font-size     : 20px;
	font-weight   : 700;
	padding-bottom: 30px;
}

.footer-inner p {
	font-weight: 700;
	font-size  : 12px;
}

#subscribe {
	float     : left;
	width     : 100%;
	margin-top: 20px;
}

#subscribe .enteremail {
	background-color: #f1f1f1;
	font-size       : 12px;
	height          : 55px;
	padding         : 0 20px;
	width           : 70%;
	border          : none;
	box-sizing      : border-box;
	border-left     : 6px solid #292929;
	font-family     : 'Poppins', sans-serif;
}

.shadow-box {
	box-shadow: 0px 5px 10px 2px rgba(88, 103, 221, 0.19);
}

#subscribe-button {
	width         : 30%;
	height        : 55px;
	float         : right;
	color         : #000;
	font-weight   : 700;
	border        : none;
	font-size     : 11px;
	text-transform: uppercase;
	cursor        : pointer;
	position      : relative;
	z-index       : 10;
	border-radius : 0 4px 4px 0;
	font-family   : 'Poppins', sans-serif;
}

.subscribe-message {
	float      : left;
	width      : 100%;
	margin-top : 20px;
	font-weight: 600;
	font-size  : 12px;
	text-align : left;
}

.subscribe-message i {
	margin-right: 10px;
}

.policy-box {
	margin-top    : 50px;
	border-top    : 1px solid #eee;
	padding-top   : 40px;
	text-align    : left;
	font-size     : 10px;
	font-weight   : 700;
	color         : #666;
	text-transform: uppercase;
}

.to-top {
	position: absolute;
	right   : 25px;
	bottom  : 25px;
	z-index : 20;
}

.to-top i {
	position          : relative;
	z-index           : 2;
	color             : #fff;
	width             : 50px;
	height            : 50px;
	line-height       : 50px;
	box-sizing        : border-box;
	font-size         : 12px;
	border-radius     : 100%;
	cursor            : pointer;
	background        : #292929;
	box-shadow        : 0px 5px 10px 2px rgba(88, 103, 221, 0.19);
	-webkit-transition: all 200ms linear;
	transition        : all 200ms linear;
}

.to-top i:hover {
	box-shadow: 0px 0 0 0 rgba(88, 103, 221, 0.19);
}

.to-top span {
	position  : absolute;
	top       : 50%;
	left      : -120px;
	background: #f9f9f9;
	border    : 1px solid #eee;

	width         : 140px;
	height        : 40px;
	margin-top    : -14px;
	color         : #666;
	line-height   : 40px;
	border-radius : 6px;
	z-index       : -1;
	text-transform: uppercase;
	font-size     : 9px;
	font-weight   : 700;
}

.circle-bg {
	position     : fixed;
	width        : 650px;
	height       : 650px;
	border-radius: 100%;
	border       : 1px solid #e2e2e2;
	right        : -325px;
	top          : 0;
	bottom: 0;
	margin: auto;
	background   : #f9f9f9;
	z-index      : -1;
}

.big-circle {
	position     : absolute;
	width        : 650px;
	height       : 650px;
	border-radius: 100%;
	right        : 0;
	top          : 0;
	z-index      : 1;
	animation    : spin2 9000ms ease-in-out infinite;
}

.big-circle:before {
	content      : '';
	position     : absolute;
	top          : 20%;
	left         : 60px;
	width        : 10px;
	height       : 10px;
	border-radius: 100%;
	background   : #666;
}

.middle-circle {
	position     : absolute;
	width        : 450px;
	height       : 450px;
	top          : 50%;
	left         : 50%;
	margin-top   : -225px;
	margin-left  : -225px;
	border-radius: 100%;
	border       : 1px dotted #ccc;
	background   : #eee;
	animation    : spin 7000ms ease-in-out infinite;
}

@keyframes spin2 {
	75% {
		transform: rotate(-0deg);
	}

	100% {
		transform: rotate(-720deg);
	}
}

@keyframes spin {
	75% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(359deg);
	}
}

.middle-circle:before {
	content      : '';
	position     : absolute;
	top          : 50%;
	left         : -5px;
	width        : 10px;
	height       : 10px;
	border-radius: 100%;
}

.small-circle {
	position     : absolute;
	top          : 50%;
	left         : 50%;
	width        : 70px;
	height       : 70px;
	margin-top   : -35px;
	margin-left  : -35px;
	z-index      : 5;
	border-radius: 100%;
	animation    : pulse 4.1s infinite ease-in-out;
}

.small-circle:before {
	content    : '';
	position   : absolute;
	top        : 50%;
	left       : 50%;
	width      : 20px;
	height     : 2px;
	background : #666;
	margin-left: -10px;
	margin-top : -1px;
}

.footer-decor {
	position  : absolute;
	left      : 50%;
	right     : 50px;
	background: #e2e2e2;
	height    : 1px;
	z-index   : 1;
	bottom    : 110px;
}

.footer-decor:before {
	content      : '';
	position     : absolute;
	width        : 10px;
	height       : 10px;
	right        : 0;
	top          : 50%;
	margin-top   : -5px;
	border-radius: 100%;
}

/* --------- section --------------------------------------*/
.column-content {
	float    : left;
	max-width: 1224px;
	width    : 92%;
	position : relative;
	padding  : 10px 30px 10px;
}

section {
	float   : left;
	width   : 100%;
	position: relative;
	z-index : 2;
	overflow: hidden;
}

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

.section-title h2 {
	float         : right;
	width         : 100%;
	text-align    : right;
	font-size     : 30px;
	text-transform: uppercase;
	font-weight   : 700;
	font-family: 'yekan-fat';
}

.section-title h4 {
	float        : right;
	max-width    : 450px;
	line-height  : 20px;
	text-align   : left;
	color        : #777;
	font-weight  : 600;
	padding      : 10px 0 20px;
	border-bottom: 1px solid #eee;
	position     : relative;
	font-size    : 9.5pt;
}

section.parallax-section {
	padding : 110px 0 70px;
	overflow: hidden;
}

section.parallax-section .bg {
	height: 150%;
	top   : -25%;
}

section.parallax-section .overlay {
	opacity: 0.4;
}

.wrap-inner {
	margin    : 30px 0;
	background: #fff;
	padding   : 80px 50px;
	overflow  : hidden;
}

.sm-mar-w {
	margin-top: 0;
}

.scroll-nav-wrap {
	float        : left;
	position     : relative;
	margin-bottom: 20px;
	background   : #fff;
	width        : 100%;
	box-shadow   : 0px 5px 10px 2px rgba(88, 103, 221, 0.11);
}

.scroll-nav ul {
	float     : left;
	width     : 100%;
	position  : relative;
	box-sizing: border-box;
	border    : 1px solid #eee;
}

.scroll-nav ul li {
	float      : left;
	border-left: 1px solid #eee;
	padding    : 20px 30px;
	box-sizing : border-box;
}

.scroll-nav ul li:last-child {
	border-right: 1px solid #eee;
}

.scroll-nav ul li a {
	text-align    : left;
	font-size     : 10px;
	font-weight   : 700;
	text-transform: uppercase;
	color         : #999;
	position      : relative;
	padding-left  : 40px;
}

.scroll-nav ul li a:before,
.scroll-nav ul li a:after {
	content   : '';
	position  : absolute;
	left      : 0;
	width     : 16px;
	height    : 4px;
	top       : 50%;
	margin-top: -2px;
	background: #e2e2e2;
}

.scroll-nav ul li a:after {
	width     : 0;
	z-index   : 2;
	transition: all 200ms linear;
}

.scroll-nav ul li a.act-link:after {
	width: 16px;
}

/*------ Button  ------------------------------------------------*/
.btn {
	float         : left;
	color         : #000;
	margin-right  : 10px;
	text-align    : center;
	width         : auto;
	letter-spacing: normal;
	position      : relative;
	font-size     : 14px;
	box-shadow    : 3px 4px 5px 0 rgba(0, 0, 0, .1);
	margin-top    : 30px;
	border-radius : 2px;
	max-width     : 100%;
	overflow      : hidden;
	font-weight   : 700;
	outline       : none;
	padding       : 13px 16px;
	display       : inline-block;
}

.btn i {
	font-size : 14px;
	background: #414146;
	padding   : 14px 20px;
	position  : absolute;
	top       : -12px;
	left      : 0;
	transition: all 200ms linear;
}

.btn.hide-icon span {
	padding       : 0 33px;
	transition    : all 200ms linear;
	font-size     : 12pt;
	text-transform: uppercase;
	color         : #fff;
}

.btn.hide-icon i {
	padding    : 12px 20px 11px;
	left       : -60px;
	height     : 100%;
	line-height: 20px;
	display    : inline-block;
	position   : absolute;
	color      : #fff;
	top        : 0;
}

.btn.hide-icon:hover i {
	left: 0;
}

.btn.hide-icon:hover span {
	padding-left : 59px;
	padding-right: 11px;
}

/*------ Home -------------------------------------------------*/
.hero-content {
	z-index   : 50;
	overflow  : hidden;
	background: #fff;
}

.hero-wrap {
	position: absolute;
	top     : 30%;
	left    : 0;
	width   : 100%;
	z-index : 20;
}

.hero-wrap h2,
.hero-wrap h2 a {
	color: #fff;
}

.hero-wrap p {
	color      : #fff;
	font-size  : 12px;
	font-weight: 500;
}

.swiper-slide .overlay,
.hero-content .overlay,
.fs-gallery-wrap .overlay {
	opacity: 0.5;
}

.hero-wrap h2 {
	font-size     : 40px;
	line-height   : 54px;
	text-transform: uppercase;
	letter-spacing: -2px;
	font-weight   : bold;
	padding-bottom: 10px;
}

.hero-item {
	padding: 20px 30px;
}

.hero-item h3 {
	padding-bottom: 5px;
	color         : #fff;
	text-transform: uppercase;
	font-weight   : 700;
	font-size     : 12px;
	position      : relative;
}

.hero-item h3:before {
	content : '';
	position: absolute;
	left    : 50%;
	width   : 40px;
	height  : 2px;
	top     : -20px;
	margin  : 0 0 0 -20px;
}

.hero-item p {
	text-align: center;
}

.hero-item .btn {
	float  : none;
	display: inline-block;
}

.hero-dec {
	width        : 150px;
	height       : 1px;
	display      : inline-block;
	background   : rgba(255, 255, 255, 0.41);
	position     : relative;
	margin-bottom: 20px;
}

.hero-dec:before {
	content      : '';
	position     : absolute;
	top          : 50%;
	left         : 50%;
	width        : 8px;
	height       : 8px;
	border-radius: 100%;
	margin       : -4px 0 0 -4px;
}

.hero-carousel .swiper-slide {
	overflow: hidden;
}

.hero-carousel .swiper-slide .bg {
	width    : 130%;
	left     : -15%;
	transform: translateZ(0);
}

.grid-carousel-title {
	position        : absolute;
	top             : 45%;
	left            : 0;
	right           : 0;
	z-index         : 3;
	opacity         : 0.6;
	padding         : 0 50px;
	transform       : scale(0.6);
	transition      : all 0.3s linear;
	transition-delay: 1.0s;
}

.hero-carousel .swiper-slide-active .grid-carousel-title {
	opacity  : 1;
	transform: scale(1.0);
}

.grid-carousel-title h3 {
	font-size     : 30px;
	font-weight   : 800;
	color         : #fff;
	position      : relative;
	text-transform: uppercase;
}

.grid-carousel-title h3 a {
	color: #fff;
}

.grid-carousel-title h4 {
	font-weight: 500;
	padding-top: 4px;
	color      : #fff;
	position   : relative;
}

.grid-carousel-title h3 a:hover {
	color: rgba(255, 255, 255, 0.7)
}

.grid-carousel-title h3:before {
	content : '';
	position: absolute;
	left    : 50%;
	width   : 40px;
	height  : 1px;
	top     : -25px;
	margin  : 0 0 0 -20px;
}

.grid-carousel-title .btn {
	float  : none;
	display: inline-block;
}

.swiper-container-horizontal>.swiper-pagination-bullets {
	bottom: 30px;
}

.carousle-item-dec {
	position        : absolute;
	left            : 60px;
	top             : 46px;
	height          : 1px;
	right           : 99%;
	background      : rgba(255, 255, 255, 0.3);
	z-index         : 20;
	transition      : all 0.3s linear;
	transition-delay: 1.0s;
}

.carousle-item-dec:before {
	content         : '';
	position        : absolute;
	left            : 0;
	width           : 8px;
	height          : 8px;
	top             : -4px;
	z-index         : 2;
	border-radius   : 50%;
	opacity         : 0;
	transition      : all 0.3s linear;
	transition-delay: 1.0s;
}

.hero-carousel .swiper-slide-active .carousle-item-dec {
	right: 110px;
}

.hero-carousel .swiper-slide-active .carousle-item-dec:before {
	opacity: 1
}

.carousle-item-number {
	position        : absolute;
	right           : 40px;
	top             : 0;
	color           : #fff;
	font-size       : 13px;
	z-index         : 10;
	opacity         : 0;
	font-weight     : 600;
	transition      : all 0.3s linear;
	transition-delay: 1.0s;
}

.hero-carousel .swiper-slide-active .carousle-item-number {
	opacity: 1;
	top    : 38px;
}

.slider-progress-bar {
	position: absolute;
	bottom  : 20px;
	right   : 30px;
	z-index : 20;
}

.play-pause_slider {
	position     : absolute;
	right        : 60px;
	width        : 40px;
	height       : 40px;
	line-height  : 40px;
	background   : rgba(0, 0, 0, 0.7);
	bottom       : 28px;
	cursor       : pointer;
	z-index      : 10;
	color        : #fff;
	font-size    : 10px;
	border-radius: 2px;
}

.progress-indicator svg {
	position : relative;
	top      : -5px;
	height   : 50px;
	transform: rotate(-90deg);
	width    : 50px;
	z-index  : 20;
}

.progress-bar__background {
	fill        : none;
	stroke      : rgba(255, 255, 255, 0.4);
	stroke-width: 1.0;
}

.progress-bar__progress {
	fill             : none;
	stroke           : #fff;
	stroke-dasharray : 100 100;
	stroke-dashoffset: 100;
	stroke-linecap   : round;
	stroke-width     : 1.8;
}

.circ {
	transform : scale(1.0) rotate(-90deg);
	transition: transform .3s ease;
	z-index   : 3;
	position  : relative;
}

.circ circle {
	stroke-dasharray: 440px;
}

.circ1 {
	stroke-dashoffset: 440px;
}

.slider-progress-bar.act-slider .circ1 {
	stroke-dashoffset: 220px;
	transition       : linear 6s stroke-dashoffset;
}

.hero-dec_top,
.hero-dec_bottom {
	position   : absolute;
	left       : 50px;
	width      : 80px;
	height     : 80px;
	border-left: 1px solid rgba(255, 255, 255, 0.5);
	z-index    : 10;
}

.hero-dec_top_right,
.hero-dec_bottom_right {
	position    : absolute;
	right       : 50px;
	width       : 80px;
	height      : 80px;
	border-right: 1px solid rgba(255, 255, 255, 0.5);
	z-index     : 10;
}

.hero-dec_top,
.hero-dec_top_right {
	top       : 40px;
	border-top: 1px solid rgba(255, 255, 255, 0.5);
}

.hero-dec_bottom,
.hero-dec_bottom_right {
	bottom       : 40px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.hero_promo-wrap {
	position: absolute;
	bottom  : 30px;
	right   : 0;
	width   : 230px;
	z-index : 20;
	height  : 50px;
}

.hero_promo-title {
	float      : left;
	color      : #fff;
	position   : relative;
	margin-left: 30px;
	font-weight: 600;
	top        : 20px;
	text-align : left;
}

.hp_popup {
	float        : left;
	width        : 50px;
	height       : 50px;
	line-height  : 50px;
	box-shadow   : 0px 0px 0px 7px rgba(255, 255, 255, 0.2);
	border-radius: 100%;
	background   : rgba(255, 255, 255, 0.5);
	color        : #000;
	z-index      : 20;
	font-size    : 10px;
	transition   : all 0.2s ease-in-out;
	cursor       : pointer;
}

.hp_popup:hover {
	box-shadow: 0px 0px 0px 17px rgba(255, 255, 255, 0.2);
}

/*------ about ------------------------------------------------*/
.about-image img {
	box-shadow   : 0px 0px 20px -10px rgb(255 255 255 / 10%);
	position     : relative;
	z-index      : 2;
	border-radius: 8px
}

.about-image:before {
	content   : '';
	position  : absolute;
	top       : 50%;
	left      : -50px;
	right     : -100px;
	height    : 100px;
	margin-top: -50px;
	z-index   : -1;
	opacity   : 0.2;
}

.about-text {
	text-align: left;
}

.about-text h1 {
	float         : left;
	width         : 100%;
	text-align    : left;
	font-size     : 25px;
	font-weight   : 700;
	padding-bottom: 10px;
	color: #fff;
	direction: rtl;
}

.about-text h4 {
	color         : #999;
	font-size     : 10pt;
	padding-bottom: 20px;
}

.about-text p {
	font-size      : 15px;
	color          : #666;
	font-weight    : 300;
	text-align     : justify;
	text-align-last: right;
	direction      : rtl;
}

.about-text .btn {
	float: left;
}

.line-dec {
	height    : 1px;
	background: #eee;
	margin-top: 20px;
}

.line-dec:before {
	content : '';
	position: absolute;
	left    : 0;
	top     : 0;
	height  : 1px;
	width   : 60px;
}

.triangle-dec {
	position: absolute;
	right   : -50px;
	top     : 30px;
	z-index : 20;
}

.triangle-dec span {
	position  : absolute;
	right     : 0;
	top       : 0;
	width     : 120px;
	height    : 120px;
	transform : rotate(25deg);
	border-top: 6px solid #000;
}

.triangle-dec span:before {
	content      : '';
	position     : absolute;
	left         : 17px;
	top          : -45px;
	width        : 80px;
	height       : 80px;
	transform    : rotate(45deg);
	border-right : 6px solid #000;
	border-bottom: 6px solid #000;
}

.ab_cirle-dec {
	position     : absolute;
	width        : 50px;
	height       : 50px;
	border       : 10px solid #666;
	bottom       : -10px;
	left         : -30px;
	border-radius: 50%;
}

/*------ slider  ------------------------------------------------*/
.pers-fucts {
	margin-top: 30px;
}

.inline-facts {
	float     : left;
	width     : 100%;
	background: #fff;
	position  : relative;
	padding   : 30px 40px 30px 110px;
	box-shadow: 0px 6px 6px -4px rgba(0, 0, 0, 0.7);
	overflow  : hidden;
}

.inline-facts:before {
	content      : '';
	position     : absolute;
	width        : 80px;
	height       : 80px;
	right        : -40px;
	top          : -40px;
	border-radius: 50%;
	background   : #f9f9f9;
	border       : 1px solid #eee;
}

.inline-facts i {
	position     : absolute;
	left         : 30px;
	width        : 50px;
	height       : 50px;
	border-radius: 4px;
	line-height  : 50px;
	color        : #000;
	top          : 50%;
	margin-top   : -25px;
	font-size    : 18px;
	font-weight  : 500;
	box-shadow   : 0px 0px 0px 7px #eee;
}

.milestone-counter {
	float         : left;
	text-align    : left;
	font-size     : 34px;
	font-weight   : 700;
	text-transform: uppercase;
	color         : #000;
}

.inline-facts h6 {
	float         : left;
	text-align    : left;
	font-size     : 10px;
	letter-spacing: 1px;
	font-weight   : 600;
	color         : #666;
	width         : 100%;
	text-transform: uppercase;
	top           : -2px;
	position      : relative;
}

.dec-counter {
	position      : absolute;
	z-index       : 1;
	bottom        : 0px;
	right         : 10px;
	text-align    : right;
	font-size     : 70px;
	font-weight   : 700;
	text-transform: uppercase;
	color         : #000;
	opacity       : 0.05;
}

/* --------- Skills --------------------------------------*/
.skill-name {
	position      : absolute;
	top           : 40%;
	text-transform: uppercase;
	font-size     : 44px;
	font-weight   : 900;
	letter-spacing: 4px;
	opacity       : 0.3;
}

.skillbar-box {
	float        : left;
	width        : 100%;
	position     : relative;
	margin-bottom: 50px;
}

.skillbar-bg {
	position     : relative;
	display      : block;
	float        : left;
	width        : 100%;
	height       : 8px;
	overflow     : hidden;
	background   : #eee;
	border-radius: 6px;
}

.custom-skillbar-title span {
	float         : left;
	font-size     : 12px;
	margin-top    : 12px;
	padding-bottom: 6px;
	font-style    : italic;
}

.custom-skillbar {
	height: 8px;
	width : 0px;
}

.skill-bar-percent {
	float         : right;
	font-size     : 14px;
	font-weight   : 700;
	margin-top    : 13px;
	padding-bottom: 6px;
}

/* --------- team --------------------------------------*/
.team-box {
	overflow     : hidden;
	border       : 1px solid #eee;
	border-radius: 4px;
	background   : #fff;
}

.team-info {
	margin-top: 15px;
	padding   : 0 15px;
}

.team-info h3 {
	float         : left;
	color         : #999;
	width         : 100%;
	font-weight   : 700;
	font-size     : 13px;
	text-align    : left;
	padding-bottom: 2px;
}

.team-info h4 {
	float         : left;
	color         : #666;
	width         : 100%;
	font-weight   : 700;
	font-size     : 9px;
	text-transform: uppercase;
	text-align    : left;
	padding-bottom: 10px;
}

.team-info p {
	font-size  : 11px;
	font-weight: 500;
	color      : #666;
}

.team-image {
	margin-bottom: 20px;
}

.team-image a {
	position: relative;
	display : block;
}

.team-image a:after {
	content   : '';
	position  : absolute;
	left      : 0;
	right     : 0;
	bottom    : 0;
	top       : 0;
	background: #000;
	opacity   : 0;
	z-index   : 2;
	transition: all 200ms linear;
}

.team-image a:hover:after {
	opacity: 0.5;
}

.team-image a:before {
	font-family  : Font Awesome\ 5 Pro;
	content      : "\f067";
	position     : absolute;
	width        : 40px;
	height       : 40px;
	line-height  : 40px;
	top          : 50%;
	left         : 50%;
	margin       : -20px 0 0 -20px;
	border-radius: 50%;
	font-size    : 11px;
	font-weight  : 800;
	opacity      : 0;
	transition   : all 200ms linear;
	z-index      : 5;
	box-shadow   : 0px 0px 0px 7px rgb(255 255 255 / 30%);
}

.team-image a:hover:before {
	opacity: 1;
}

.team-image img {
	width : 100%;
	height: auto;
}

.team-social-wrap {
	border-top: 1px solid #eee;
	padding   : 0 50px 0 0;
}

.team-social {
	float: left;
	width: 100%;
}

.team-social li {
	float: left;
}

.team-social li a {
	width       : 40px;
	height      : 40px;
	line-height : 40px;
	border-right: 1px solid #eee;
	float       : left;
	transition  : all 200ms linear;
	background  : #f9f9f9;
}

.team-social li a:hover {
	background: #fff;
}

.team-link {
	position     : absolute;
	width        : 40px;
	height       : 40px;
	line-height  : 40px;
	right        : 30px;
	bottom       : -20px;
	z-index      : 2;
	border-radius: 100%;
	font-size    : 9px;
	transition   : all 200ms linear;
}

.team-link:before {
	content      : '';
	position     : absolute;
	width        : 30px;
	height       : 30px;
	border-radius: 100%;
	background   : #fff;
	left         : 50%;
	top          : 50%;
	margin-left  : -15px;
	margin-top   : -15px;
	z-index      : -1;
}

.team-link:hover {
	transform: rotate(360deg);
}

.team-single-social:before {
	content   : '';
	position  : absolute;
	top       : 50%;
	left      : 0;
	right     : -100px;
	height    : 1px;
	background: #eee;
}

.team-single-social:after {
	content      : '';
	position     : absolute;
	top          : 50%;
	right        : -100px;
	height       : 8px;
	width        : 8px;
	border-radius: 100%;
	z-index      : 2;
	margin-top   : -4px;
}

.team-single-social {
	float   : left;
	position: relative;
}

.team-single-social li {
	float       : left;
	position    : relative;
	z-index     : 2;
	margin-right: 4px;
}

.team-single-social li a {
	width        : 36px;
	height       : 36px;
	line-height  : 36px;
	float        : left;
	color        : #000;
	background   : #fff;
	border-radius: 2px;
	border       : 1px solid #eee;
	font-size    : 11px;
}

.team-single-social li a:hover {
	animation: pulse 2.1s infinite ease-in-out;
}

/* ---------Resume  --------------------------------------*/
.custom-inner-holder {
	float        : left;
	width        : 100%;
	padding-right: 40px;
	border-right : 1px solid #eee;
}

.custom-inner-holder .row>* {
	float: right;
}

.custom-inner {
	float        : left;
	width        : 100%;
	position     : relative;
	margin-bottom: 50px;
}

.custom-inner:last-child {
	margin-bottom: 0;
}

.resum-header h3 {
	float         : right;
	padding-bottom: 5px;
	font-weight   : 600;
	font-size     : 15px;
	text-align    : left;
}

.resum-header {
	float        : left;
	width        : 100%;
	position     : relative;
	padding      : 30px 80px 30px 10px;
	background   : #f9f9f9;
	border       : 1px solid #eee;
	border-radius: 5px;
}

.resum-header:before {
	font-family  : Font Awesome\ 5 Pro;
	content      : "\f067";
	position     : absolute;
	top          : 50%;
	right        : -46px;
	width        : 10px;
	height       : 10px;
	margin-top   : -5px;
	border-radius: 100%;
	z-index      : 2;
}

.resum-header:after {
	content      : "";
	position     : absolute;
	top          : 50%;
	right        : -62px;
	width        : 30px;
	height       : 30px;
	margin-top   : -20px;
	border-radius: 100%;
	background   : #fff;
	border       : 6px solid;
	z-index      : 1;
}

.resum-header span {
	font-size     : 11px;
	font-weight   : 600;
	text-transform: uppercase;
	width         : 100%;
	color         : #666;
	text-align    : right;
	float         : left;
	line-height   : 16px;
}

.resum-header i {
	width              : 46px;
	height             : 46px;
	line-height        : 46px;
	position           : absolute;
	border-radius      : 2px;
	top                : 28px;
	font-size          : 16px;
	right              : 13px;
	-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(250, 250, 250, 0.2)));
	color              : #000;
}

.custom-inner-content {
	padding   : 35px 30px 45px;
	background: #f9f9f9;
	border    : 1px solid #eee;
	direction : rtl;
}

.custom-inner-content:before {
	content      : '';
	position     : absolute;
	right        : -20px;
	top          : 40px;
	width        : 6px;
	height       : 6px;
	border-radius: 50%;
}

.custom-inner-content h4 {
	float         : left;
	width         : 100%;
	padding-bottom: 10px;
	font-weight   : bold;
	text-transform: uppercase;
	text-align    : left;
	font-size     : 16px;
}

.custom-inner-content p {
	color      : #666;
	font-size  : 11px;
	font-weight: 300;
}

.custom-inner-content ul {
	float     : left;
	width     : 100%;
	padding   : 12px 13px 10px 0;
	border    : 1px solid #eee;
	background: #fff;
}

.custom-inner-content ul li {
	float         : left;
	width         : 100%;
	padding       : 1px 20px 1px 0;
	text-align    : right;
	text-transform: uppercase;
	font-size     : 11pt;
	color         : #666;
	position      : relative;
}

.custom-inner-content ul li:before {
	content      : '';
	position     : absolute;
	right        : 0;
	top          : 50%;
	width        : 6px;
	margin       : -3px 0 0 0;
	height       : 6px;
	border-radius: 50%;
}

.cus-inner-head-link {
	float      : left;
	margin-top : 20px;
	padding    : 8px 26px;
	font-weight: 500;
	transition : all 200ms linear;
}

.cus-inner-head-link:hover {
	background: #292929;
}

.custom-inner .btn {
	margin-top: 20px;
}

.ci-num {
	float      : left;
	margin-top : 20px;
	position   : relative;
	width      : 100%;
	margin-left: -10px;
}

.ci-num span {
	position      : absolute;
	left          : 0;
	opacity       : 0.1;
	text-transform: uppercase;
	font-weight   : 900;
	font-size     : 64px;
	transform     : rotate(-90deg);
	color         : #666;
}

.single-media {
	margin-bottom: 50px;
}

.box-item {
	overflow: hidden;
}

.box-item.vis-det:before {
	content   : '';
	position  : absolute;
	z-index   : 10;
	top       : 15px;
	left      : 15px;
	right     : 15px;
	bottom    : 15px;
	background: rgba(0, 0, 0, 0.51);
	opacity   : 0;
	visibility: hidden;
}

.box-item.vis-det a.image-popup,
.box-item.vis-det a.popgal {
	position     : absolute;
	top          : -30%;
	left         : 50%;
	width        : 50px;
	height       : 50px;
	line-height  : 50px;
	margin-left  : -20px;
	margin-top   : -20px;
	border-radius: 100%;
	z-index      : 11;
	color        : #000;
	cursor       : pointer;
	background   : rgba(255, 255, 255, 0.41);
}

.box-item.vis-det a.image-popup i,
.box-item.vis-det a.popgal i {
	z-index : 2;
	position: relative;
}

.box-item.vis-det a.image-popup:after,
.box-item.vis-det a.popgal:after {
	content      : '';
	position     : absolute;
	width        : 38px;
	height       : 38px;
	left         : 50%;
	top          : 50%;
	margin-top   : -19px;
	margin-left  : -19px;
	z-index      : 1;
	border-radius: 100%;
}

.box-item.vis-det:hover:before {
	opacity   : 1;
	visibility: visible;
}

.box-item.vis-det a.image-popup:hover,
.box-item.vis-det a.popgal:hover {
	color: #000;
}

.box-item.vis-det:hover a.image-popup,
.box-item.vis-det:hover a.popgal {
	top: 50%;
}

.box-item.vis-det a.image-popup,
.box-item.vis-det:before,
.grid-det h3:before,
.hd-box-wrap h2:before,
.box-item.vis-det a.popgal {
	transition: all 300ms linear;
}

/*------  services ------------------------------------------------*/
.serv-wrap {
	margin-top: 50px;
}

.sl-tabs {
	float   : left;
	width   : 100%;
	position: relative;
}

.sl-tabs li {
	color   : #000;
	float   : left;
	width   : 100%;
	cursor  : pointer;
	position: relative;
}

.sl-tabs li:after {
	content   : '';
	position  : absolute;
	right     : -26px;
	width     : 0;
	height    : 1px;
	background: #ccc;
	top       : 50%;
	margin-top: -4px;
}

.tb-item {
	float        : left;
	width        : 100%;
	padding      : 30px 10px 30px 90px;
	background   : #fff;
	border-bottom: 1px solid #eee;
	margin-bottom: 10px;
	position     : relative;
}

.sl-tabs li i {
	position     : absolute;
	top          : 14px;
	left         : 20px;
	font-size    : 15px;
	width        : 50px;
	height       : 50px;
	line-height  : 50px;
	border       : 1px solid #e2e2e2;
	border-radius: 2px;
	background   : #f3f3f3
}

.sl-tabs li i,
.tb-item,
.det-box h3 a,
.det-box-link,
.sl-tabs li:after {
	transition: all .3s ease-in-out;
}

.sl-tabs li h3 {
	font-weight: 600;
	color      : #292929;
	font-size  : 12px;
	text-align : left;
}

.tab-content h3 {
	font-weight: 600;
	color      : #000;
	font-size  : 14px;
	margin     : 20px 0 10px;
	background : #f9f9f9;
	border     : 1px solid #eee;
	padding    : 10px 40px 10px 20px;
	text-align : left;
	float      : left;
}

.tab-content h3 span {
	color       : #999;
	font-size   : 11px;
	margin-right: 6px;
}

.tab-content {
	display      : none;
	float        : left;
	width        : 100%;
	position     : relative;
	border       : 1px solid #eee;
	padding      : 50px;
	background   : #fff;
	border-radius: 4px;
}

.tab-content p {
	font-size: 11px;
	color    : #666;
}

.tab-content.current {
	display: inherit;
}

.sl-tabs li.current i {
	background   : #fff;
	border-color : #fff;
	border-radius: 50%;
	box-shadow   : 0px 0px 0px 7px rgb(255 255 255 / 30%);
}

.sl-tabs li.current:after {
	width: 20px;
}

.sl-tabs li:before {
	font-family: Font Awesome\ 5 Pro;
	content    : "\f0da";
	position   : absolute;
	opacity    : 0;
	right      : 15px;
	width      : 20px;
	height     : 20px;
	line-height: 20px;
	top        : 50%;
	margin     : -15px 0 0 0;
	z-index    : 10;
	font-weight: 800;
	font-size  : 13px;
	color      : #ccc;
}

.sl-tabs li.current:before,
.sl-tabs li:hover:before {
	opacity: 1;
}

.sl-tabs li.current:before {
	color: #000;
}

.price {
	float        : left;
	text-align   : left;
	margin-top   : 20px;
	font-weight  : 600;
	color        : #000;
	position     : relative;
	font-size    : 12px;
	padding      : 12px 25px;
	border-radius: 2px;
	box-shadow   : 3px 4px 5px 0 rgb(0 0 0 / 10%);
}

.serv-text {
	padding   : 30px 30px 20px;
	background: #f9f9f9;
	border    : 1px solid #eee;
	z-index   : 10;
	margin-top: 10px;
}

.serv-dec {
	float     : left;
	margin-top: 30px;
	width     : 100%;
	position  : relative;
	height    : 1px;
	background: #eee;
}

.serv-dec.port-dec {
	margin-top   : 0;
	margin-bottom: 40px;
}

.serv-dec:before,
.section-title h4:before {
	content      : '';
	position     : absolute;
	right        : 0;
	width        : 6px;
	height       : 6px;
	top          : 50%;
	margin-top   : -3px;
	border-radius: 100%;
}

.section-title h4:before {
	top: 100%;
}

.dec-list {
	float   : left;
	width   : 100%;
	padding : 10px 30px 10px 20px;
	position: relative;
}

.dec-list:before {
	content   : '';
	position  : absolute;
	top       : -5px;
	left      : 4px;
	bottom    : -5px;
	width     : 1px;
	background: #eee;
}

.dec-list li:before {
	content      : '';
	position     : absolute;
	left         : -21px;
	width        : 8px;
	height       : 8px;
	border-radius: 100%;
	top          : 50%;
	margin-top   : -5px;
}

.dec-list li {
	float      : left;
	width      : 100%;
	padding    : 15px 20px;
	text-align : left;
	position   : relative;
	background : #f9f9f9;
	border     : 1px solid #eee;
	margin     : 4px 0;
	font-size  : 11px;
	font-weight: 700;
}

.sec-dec {
	position  : absolute;
	right     : 0;
	top       : 0;
	width     : 30%;
	height    : 120px;
	background: #f9f9f9;
	border    : 1px solid #eee;
}

.sec-dec:before {
	content   : '';
	position  : absolute;
	right     : 0;
	width     : 70%;
	top       : 50%;
	height    : 1px;
	background: #eee;
	z-index   : 1;
}

.sec-dec:after {
	content : '';
	position: absolute;
	right   : calc(70% - 60px);
	width   : 60px;
	top     : 50%;
	height  : 1px;
	z-index : 2;
}

/*------ Skills ------------------------------------------------*/
.piechart-holder {
	padding : 25px 0;
	position: relative;
}

.piechart-holder h4 {
	font-size    : 11px;
	color        : #292929;
	font-weight  : 500;
	padding      : 13px 30px;
	background   : #f9f9f9;
	border       : 1px solid #eee;
	border-radius: 2px;
	position     : absolute;
	left         : 140px;
	top          : 50%;
	margin-top   : -20px;
	box-shadow   : 0px 1px 15px 1px rgba(113, 106, 202, 0.1);
}

.piechart:before {
	content   : '';
	position  : absolute;
	top       : 50%;
	left      : 0;
	right     : 0;
	height    : 1px;
	background: #eee;
}

.chart {
	position     : relative;
	float        : left;
	width        : 150px;
	height       : 150px;
	border-radius: 100%;
	margin       : 20px 0;
	text-align   : center;
	background   : #fff;
}

.chart canvas {
	position: absolute;
	top     : 0;
	left    : 0;
}

.piechart {
	position: relative;
}

.percent {
	display    : inline-block;
	font-size  : 12px;
	color      : #000;
	line-height: 150px;
	z-index    : 2;
	font-weight: 600;
}

.percent:after {
	content    : '%';
	margin-left: 0.1em;
	font-size  : 12px;
}

.angular {
	margin-top: 100px;
}

.angular .chart {
	margin-top: 0;
}

/*------ order ------------------------------------------------*/
.order-wrap {
	padding   : 30px 40px;
	margin-top: 30px;
	overflow  : hidden;
	position  : relative;
}

.order-wrap .row {
	position: relative;
	z-index : 5;
}

.order-wrap.single-wrap {
	margin: 20px 0 20px;
}

.order-wrap:before {
	font-family: Font Awesome\ 5 Pro;
	content    : "\f0e0";
	position   : absolute;
	color      : #eee;
	top        : -30px;
	font-size  : 50px;
	right      : 20%;
	opacity    : 0.46;
	transform  : scale(5.2) rotate(45deg);
	transition : all 300ms linear;
}

.order-wrap:hover:before {
	transform: scale(3.2) rotate(25deg);
}

.order-wrap:after {
	content      : "";
	position     : absolute;
	top          : -100px;
	left         : -50px;
	width        : 250px;
	height       : 250px;
	background   : rgba(255, 255, 255, 0.15);
	border-radius: 50%;
	transition   : all 300ms linear;
	z-index      : 1;
	transform    : scale(1.0)
}

.order-wrap:hover:after {
	transform: scale(1.5);
}

.order-wrap h4 {
	font-size  : 18px;
	text-align : left;
	color      : #000;
	font-weight: 600;
	position   : relative;
	top        : 10px;
	z-index    : 5;
}

.order-wrap a.ord-link {
	float        : right;
	color        : #fff;
	font-size    : 11px;
	font-weight  : 600;
	padding      : 15px 30px;
	background   : #292929;
	border-radius: 2px;
	position     : relative;
}

.order-wrap a.ord-link:hover {
	color: rgba(255, 255, 255, 0.51);
}

/*------ Clients------------------------------------------------*/
.clients-header {
	padding: 75px 0 0 30px;
}

.clients-header h2 {
	float         : left;
	width         : 100%;
	text-align    : left;
	font-size     : 20px;
	font-weight   : 700;
	color         : #000;
	padding-bottom: 20px;
	line-height   : 30px;
	position      : relative;
	text-transform: uppercase;
	border-bottom : 1px solid #e2e2e2;
}

.clients-header h2:before {
	content   : '';
	position  : absolute;
	width     : 50px;
	height    : 4px;
	background: #999;
	left      : 0;
	bottom    : -2px;
}

.client-control {
	margin-top: 30px;
}

.client-control .swiper-button-next,
.client-control .swiper-button-prev {
	float        : left;
	width        : 40px;
	height       : 40px;
	border-radius: 100%;
	position     : relative;
	cursor       : pointer;
	left         : auto;
	margin-top   : 2px;
}

.client-control .swiper-button-next {
	margin-left: 20px;
}

.client-control .swiper-button-next i,
.client-control .swiper-button-prev i,
.testilider .swiper-button i {
	background   : #fff;
	width        : 30px;
	height       : 30px;
	position     : absolute;
	top          : 50%;
	left         : 50%;
	margin-top   : -15px;
	margin-left  : -15px;
	border-radius: 100%;
	line-height  : 30px;
	font-weight  : 900;
	transition   : all 200ms linear;
}

.client-control .swiper-button-next i:hover,
.client-control .swiper-button-prev i:hover {
	color: #fff;
}

.client-item {
	background   : #fff;
	margin-bottom: 70px;
	transition   : all 500ms linear;
	box-shadow   : 0px 1px 15px 1px rgba(113, 106, 202, 0.1);
}

.client-item:hover .client-img {
	background: #f9f9f9;
}

.client-item:hover {
	box-shadow: 0px 1px 25px 1px rgba(113, 106, 202, 0.3);
}

.client-img {
	padding: 20px 50px;
}

.client-text {
	padding   : 35px 20px 30px 20px;
	border-top: 1px solid #eee;
}

.client-text p {
	font-size: 11px;
	color    : #999;
}

.client-text h4 {
	font-weight   : 700;
	text-align    : left;
	float         : left;
	width         : 100%;
	font-size     : 16px;
	padding-bottom: 6px;
}

.client-item img {
	width : 100%;
	height: auto;
}

.client-link {
	position     : absolute;
	bottom       : -20px;
	right        : 20px;
	padding      : 10px 60px 10px 30px;
	font-weight  : 600;
	font-size    : 11px;
	border-radius: 2px;
}

.client-link i {
	position     : absolute;
	width        : 28px;
	height       : 28px;
	right        : 4px;
	border-radius: 100%;
	background   : #fff;
	font-size    : 10px;
	top          : 50%;
	margin-top   : -14px;
	line-height  : 28px;
	z-index      : 5;
}

.client-link:hover i {
	animation: pulse 2.1s infinite ease-in-out;
}

.swiper-pagination.client-pagin {
	bottom: 0;
}

.swiper-pagination.client-pagin:before {
	content   : '';
	position  : absolute;
	top       : 50%;
	left      : 40%;
	right     : 0;
	height    : 1px;
	background: #e2e2e2;
}

.swiper-pagination.client-pagin:after {
	content : '';
	position: absolute;
	top     : 50%;
	right   : 0;
	width   : 50px;
	height  : 1px;
	z-index : 2;
}

.swiper-pagination.client-pagin span {
	float: left;
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.fs-slider-wrap_paginatio>.swiper-pagination-bullets .swiper-pagination-bullet {
	background: #fff;
	opacity   : 1;
	margin    : 0 6px;
}

.fs-slider-wrap_pagination {
	position: absolute;
	left    : 0;
	bottom  : 20px;
	z-index : 20;
	width   : 100%;
}

.fs-slider-wrap_pagination .swiper-pagination-bullet {
	background: #fff;
	opacity   : 1;
	margin    : 0 5px;
}

.testi-header img {
	width        : 65px;
	height       : 65px;
	border-radius: 50%;
	position     : relative;
	z-index      : 1;
	float        : left;
}

.testi-header {
	margin-bottom: 10px;
}

.testi-item {
	padding-bottom: 40px;
}

.testi-text {
	padding      : 30px 30px;
	background   : #f9f9f9;
	border-radius: 4px;
	overflow     : hidden;
	border       : 1px solid #eee;
}

.testi-text:before {
	font-family: Font Awesome\ 5 Pro;
	content    : "\f10e";
	position   : absolute;
	color      : #eee;
	top        : -10px;
	font-size  : 30px;
	right      : 20%;
	opacity    : 0.46;
	transform  : scale(5.2) rotate(45deg);
	transition : all 300ms linear;
}

.testi-text p {
	color      : #666;
	font-weight: 500;
}

.testi-link {
	position      : absolute;
	bottom        : 20px;
	right         : 30px;
	padding       : 13px 24px;
	border-radius : 2px;
	text-transform: uppercase;
	font-size     : 9px;
	font-weight   : 700;
	color         : #000;
	z-index       : 10;
	box-shadow    : 0px 1px 15px 1px rgba(113, 106, 202, 0.3);
}

.testi-header h3 {
	position      : absolute;
	left          : 80px;
	z-index       : 2;
	padding       : 15px 30px;
	background    : #f9f9f9;
	border        : 1px solid #eee;
	border-radius : 2px;
	top           : 10px;
	text-transform: uppercase;
	font-size     : 10px;
	font-weight   : 700;
	color         : #666;
}

.testi-num {
	position        : absolute;
	right           : 0;
	top             : 12px;
	font-weight     : 600;
	width           : 40px;
	height          : 40px;
	line-height     : 40px;
	background      : #f9f9f9;
	border          : 1px solid #eee;
	font-size       : 11px;
	transition      : all 300ms linear;
	transition-delay: 300ms;
	opacity         : 0;
	transform       : scale(0);
}

.testilider .swiper-slide-active .testi-num {
	opacity  : 1;
	transform: scale(1.0);
}

.pattern-bg {
	position  : absolute;
	bottom    : 24px;
	width     : 45%;
	left      : 10px;
	height    : 290px;
	background: url(../images/pattern2.png) repeat;
	opacity   : 0.7;
}

.pattern-bg.right-pos {
	left : inherit;
	right: 10px;
}

.testilider {
	padding-bottom: 20px;
}

.testilider .swiper-pagination {
	position      : absolute;
	width         : 90px;
	bottom        : -10px;
	left          : 0;
	z-index       : 10;
	padding       : 12px 0;
	border-radius : 2px;
	text-transform: uppercase;
	font-size     : 10px;
	color         : #000;
	font-weight   : 600;
	box-shadow    : 0px 1px 15px 1px rgb(113 106 202 / 30%);
}

.testilider .swiper-button {
	position     : absolute;
	top          : 30px;
	width        : 40px;
	height       : 40px;
	border-radius: 100%;
	cursor       : pointer;
	z-index      : 20;
	right        : 0;
	left         : auto;
}

.testilider .swiper-button.swiper-button-prev {
	right: 50px;
}

.testilider:before {
	content   : '';
	position  : absolute;
	top       : 30px;
	right     : 120px;
	width     : 80px;
	height    : 1px;
	background: #eee;
}

/*------ Video ------------------------------------------------*/
.promo-video-text,
.parallax-section .section-title h2 {
	float         : left;
	font-weight   : 700;
	color         : #fff;
	font-size     : 32px;
	text-transform: uppercase;
	text-align    : left;
	padding-bottom: 10px;
	line-height   : 40px;
	border-bottom : 1px solid rgba(255, 255, 255, 0.3);
	width         : 100%;
	position      : relative;
}

.parallax-section .section-title h2:before {
	content : '';
	position: absolute;
	bottom  : -2px;
	right   : 0;
	width   : 50px;
	height  : 4px;
}

.parallax-section .section-title h2 span {
	opacity: 1;
}

.promo-video p,
.parallax-section .section-title p {
	float     : left;
	max-width : 500px;
	text-align: left;
	color     : #fff;
	margin-top: 30px;
	position  : relative;
	font-size : 12px;
}

.pvlin {
	float        : right;
	width        : 60px;
	height       : 60px;
	line-height  : 60px;
	border-radius: 100%;
	color        : #fff;
	margin-top   : 30px;
	box-shadow   : 0px 0px 0px 7px rgb(255 255 255 / 30%);
	transition   : all 200ms linear;
	position     : relative;
	z-index      : 20;
	top          : -60px;
	cursor       : pointer;
}

.pvlin:hover {
	box-shadow: 0px 0px 0px 12px rgb(255 255 255 / 20%);
	color     : #000;
}

section.parallax-section.video-section {
	padding: 110px 0;
}

section.parallax-section.video-section .overlay {
	opacity: 0.4;
}

.media-container {
	position: absolute;
	top     : 0;
	left    : 0;
	width   : 100%;
	height  : 100%;
	overflow: hidden;
	z-index : -1;
}

.hero-content .media-container {
	height: 110%;
}

.video-mask {
	position: absolute;
	top     : 0;
	left    : 0;
	width   : 100%;
	height  : 100%;
	z-index : 1;
}

.mob-bg {
	display: none;
}

.video-holder {
	position: absolute;
	width   : 100%;
	height  : 100% !important;
	display : block;
	overflow: hidden !important;
	top     : 0;
	left    : 0;
	padding : 0 !important;
}

.video-holder iframe {
	position: absolute;
	top     : -75px;
	left    : 50%;
	width   : 100%;
	height  : 100%;
	display : block;
	overflow: hidden;
}

.background-youtube,
.background-vimeo {
	bottom  : 0;
	left    : 0;
	overflow: hidden;
	position: absolute;
	right   : 0;
	top     : 0;
}

.video-container {
	position   : absolute;
	top        : 50%;
	left       : 50%;
	transform  : translate(-50%, -50%);
	line-height: 0;
	z-index    : -1;
}

.video-container video {
	width: 100%;
}

.resp-video {
	position      : relative;
	padding-bottom: 56.25%;
	padding-top   : 30px;
	height        : 0;
	overflow      : hidden;
	margin-bottom : 20px;
}

.resp-video iframe,
.resp-video object,
.resp-video embed {
	position: absolute;
	top     : 0;
	left    : 0;
	width   : 100%;
	height  : 100%;
}

.blog-media video {
	width : 100%;
	height: auto;
}

/*------ Porfolio  ------------------------------------------------*/
.portfolio-wrap .swiper-container,
.center-carousel .swiper-container,
.fs-gallery-wrap .swiper-container,
.portfolio-wrap .swiper-container {
	width : 100%;
	height: 100%;
	margin: 0 auto;
}

.portfolio-wrap .swiper-slide,
.center-carousel .swiper-slide,
.fs-gallery-wrap .swiper-slide,
.portfolio-wrap .swiper-slide {
	background             : #fff;
	position               : relative;
	width                  : auto;
	display                : -webkit-box;
	display                : -ms-flexbox;
	display                : -webkit-flex;
	display                : flex;
	-webkit-box-pack       : center;
	-ms-flex-pack          : center;
	-webkit-justify-content: center;
	justify-content        : center;
	-webkit-box-align      : center;
	-ms-flex-align         : center;
	-webkit-align-items    : center;
	align-items            : center;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
	opacity       : 1;
	cursor        : pointer;
	pointer-events: auto;
}

.portfolio-wrap .homecarousel {
	height: 100%;
}

.portfolio-wrap .swiper-slide {
	overflow: hidden;
}

.portfolio-wrap .homecarousel.hompad .swiper-container,
.portfolio-wrap.hompad .swiper-container {
	padding-right: 40px;
}

.portfolio-wrap .swiper-slide img {
	width   : auto;
	height  : 100%;
	position: relative;
	z-index : 1;
}

.portfolio-wrap {
	float   : left;
	width   : 100%;
	height  : 100%;
	position: relative;
	overflow: hidden;
}

.portfolio-wrap .swiper-container {
	padding: 70px 0 80px 30px;
}

.sw-button {
	position     : absolute;
	z-index      : 10;
	top          : 50%;
	width        : 40px;
	height       : 40px;
	line-height  : 40px;
	margin-top   : -20px;
	color        : #000;
	border-radius: 100%;
	cursor       : pointer;
	font-size    : 12px;
	box-shadow   : 0px 0px 0px 6px rgb(255 255 255 / 40%);
}

.sw-button i {
	transition: all 600ms linear;
}

.portfolio-wrap .sw-button:hover i {

	transform: rotateX(360deg);
}

.portfolio-wrap .sw-button i,
.slider-zoom i {
	position: relative;
	z-index : 2;
}

.sw-button.swiper-button-prev {
	left: 40px;
}

.sw-button.swiper-button-next {
	right: 30px;
}

.swiper-container-horizontal>.swiper-scrollbar {
	width        : 95%;
	left         : 30px;
	right        : 30px;
	bottom       : 44px;
	height       : 6px;
	background   : #fff;
	z-index      : 2;
	border-radius: 0;
}

.portfolio-wrap .swiper-scrollbar-drag {
	height       : 6px;
	width        : 100%;
	position     : relative;
	background   : #fff;
	border-radius: 0;
	left         : 0;
	top          : 0;
}

.portfolio-wrap .carousel-counter {
	position   : absolute;
	z-index    : 13;
	top        : 15px;
	width      : 100px;
	height     : 40px;
	line-height: 40px;
	left       : 30px !important;
	background : #fff;
	font-weight: 700;
	font-size  : 10px;
	color      : #000;
	box-shadow : 0px 5px 10px 2px rgb(88 103 221 / 19%);
}

.slider-zoom {
	position   : absolute;
	top        : -130px;
	right      : 0;
	width      : 46px;
	height     : 46px;
	line-height: 46px;
	color      : #000;
	z-index    : 20;
	opacity    : 0;
	transition : all 300ms linear;
	cursor     : pointer;
	font-weight: 600;
}

.portfolio-wrap .swiper-slide:hover .slider-zoom,
.home-slider .swiper-slide:hover .slider-zoom {
	top    : 0;
	opacity: 1;
}

.gallery-items {
	float   : left;
	width   : 100%;
	position: relative;
}

.grid-item-holder {
	float   : left;
	width   : 100%;
	height  : auto;
	position: relative;
	overflow: hidden;
}

.spad .gallery-item {
	padding: 6px;
}

.hid-port-info .grid-item-holder {
	overflow: hidden;
}

.grid-big-pad .grid-item-holder {
	padding: 40px;
}

.grid-small-pad .grid-item-holder {
	padding: 10px 20px 10px 0;
}

.gallery-item,
.grid-sizer {
	width   : 33.3%;
	position: relative;
	float   : left;
	overflow: hidden;
}

.gallery-item-second,
.grid-sizer-second {
	width: 66.6%;
}

.four-column .gallery-item {
	width: 25%;
}

.four-column .gallery-item.gallery-item-second,
.tw-colomns .gallery-item {
	width: 50%;
}

.fs-content {
	padding: 30px 30px;
}

.sb-portfolio {
	width: calc(100% - 250px)
}

.fixed-filter {
	width     : 220px;
	position  : absolute;
	right     : -250px;
	top       : 0;
	background: #fff;
	box-shadow: 0px 1px 15px 1px rgba(113, 106, 202, 0.1);
	overflow  : hidden;
}

.fixed-filter .filter-header {
	float         : left;
	width         : 100%;
	padding       : 20px 0 18px;
	border-bottom : 1px solid #eee;
	border-top    : 1px solid #eee;
	text-align    : left;
	font-size     : 11px;
	font-weight   : 700;
	text-transform: uppercase;
	color         : #000;
	padding-left  : 24px;
	background    : #f9f9f9
}

.fixed-filter .filter-header i {
	font-size    : 14px;
	padding-right: 20px;
	color        : #666;
}

.fixed-filter .gallery-filters a {
	float         : left;
	width         : 100%;
	padding       : 16px 0 16px 60px;
	border-bottom : 1px solid #eee;
	text-align    : left;
	font-size     : 10px;
	font-weight   : 700;
	text-transform: uppercase;
	color         : #999;
	position      : relative;
}

.fixed-filter .gallery-filters a:before,
.fixed-filter .gallery-filters a:after,
.inline-filter .gallery-filters a:after,
.inline-filter .gallery-filters a:before {
	content   : '';
	position  : absolute;
	left      : 20px;
	width     : 16px;
	height    : 4px;
	top       : 50%;
	margin-top: -2px;
	background: #e2e2e2;
}

.fixed-filter .gallery-filters a:after,
.inline-filter .gallery-filters a:after {
	width     : 0;
	z-index   : 2;
	transition: all 200ms linear;
}

.fixed-filter .gallery-filters a.gallery-filter-active:after,
.inline-filter .gallery-filters a.gallery-filter-active:after {
	width: 16px;
}

.fixed-filter .folio-counter {
	float   : left;
	width   : 100%;
	padding : 16px 15px 16px 60px;
	overflow: hidden;
}

.fixed-filter .folio-counter span,
.inline-filter .folio-counter span {
	float     : left;
	width     : 10px;
	height    : 1px;
	background: #000;
	position  : relative;
	top       : 8px;
	margin    : 0 10px;
}

.fixed-filter .folio-counter div,
.inline-filter .folio-counter div {
	float         : left;
	text-transform: uppercase;
	font-size     : 11px;
	color         : #000;
	font-weight   : 700;
}

.fixed-filter .folio-counter i,
.inline-filter .folio-counter i {
	position : absolute;
	right    : -20px;
	bottom   : -20px;
	font-size: 60px;
	color    : #fff;
	opacity  : 0.2;
}

.inline-filter .folio-counter i {
	right : -14px;
	bottom: -14px;
}

.inline-filter {
	float        : left;
	position     : relative;
	width        : 100%;
	padding-left : 6px;
	margin-bottom: 20px;
}

.inline-filter .filter-header {
	float         : left;
	padding       : 16px 20px;
	background    : #fff;
	border-right  : 1px solid #eee;
	text-align    : left;
	font-size     : 10px;
	font-weight   : 700;
	text-transform: uppercase;
	color         : #666;
}

.inline-filter .filter-header i {
	padding-right: 20px;
	color        : #999;
	font-size    : 16px;
}

.inline-filter a {
	float         : left;
	position      : relative;
	padding       : 19px 20px 19px 70px;
	background    : #fff;
	border-right  : 1px solid #eee;
	text-align    : left;
	font-size     : 9px;
	font-weight   : 700;
	text-transform: uppercase;
	color         : #666;
}

.inline-filter .folio-counter {
	float      : left;
	padding    : 0 40px;
	height     : 50px;
	line-height: 50px;
	overflow   : hidden;
	position   : relative;
}

.filter-wrap.inline-filter.boxed-filter {
	width     : 100%;
	background: #fff;
	margin    : 30px 0 30px;
}

.filter-wrap.inline-filter.boxed-filter.fix-box {
	box-shadow: 0px 5px 10px 2px rgba(88, 103, 221, 0.11);
	padding   : 0;
	margin    : 30px 0 0;
}

.filter-wrap.inline-filter.boxed-filter .folio-counter {
	float: right;
}

.gallery-item img,
.grid-sizer img {
	width   : 100%;
	height  : auto;
	position: relative;
	z-index : 1;
}

.inline-filter .folio-counter span {
	top: 24px;
}

.grid-det {
	padding   : 18px 18px 30px;
	border    : 1px solid #eee;
	border-top: none;
	box-sizing: border-box;
	overflow  : hidden;
	background: #fff;
}

.gallery-items.hid-port-info .grid-det {
	position  : absolute;
	bottom    : -90px;
	left      : 0;
	right     : 0;
	z-index   : 20;
	background: #fff;
	padding   : 0 18px 0;
	height    : 80px;
	border    : none;
	transition: all 150ms linear;
}

.gallery-items.hid-port-info .grid-item-holder:hover .grid-det {
	bottom: 0;
}

.gallery-items.hid-port-info .box-item:before {
	right : 0;
	bottom: 70px;
	left  : 0;
	top   : 0;
}

.gallery-items.hid-port-info .box-item a {
	margin     : 0;
	left       : 100%;
	margin-left: -80px;
	top        : -60px;
}

.gallery-items.hid-port-info .grid-item-holder:hover .box-item a {
	top: 30px;
}

.grid-det:before {
	content   : '';
	position  : absolute;
	top       : 50%;
	right     : 20px;
	left      : 60%;
	height    : 1px;
	background: #eee;
}

.grid-det:after {
	content   : '';
	position  : absolute;
	top       : 50%;
	right     : 20px;
	width     : 50px;
	height    : 4px;
	margin-top: -2px;
	transition: all 200ms linear;
}

.grid-det:hover:after {
	right: 40%;
}

.grid-item-holder:hover .grid-det {
	box-shadow: 0 0 29px -9px #ccc;
}

.grid-det h3 {
	font-weight: 700;
	font-size  : 15px;
	float      : left;
	width      : 100%;
	position   : relative;
	padding    : 10px 0 2px;
	z-index    : 2;
	text-align : left;
}

.gallery-items.hid-port-info .grid-det h3 {
	font-size : 14px;
	margin-top: 10px;
}

.grid-det h3 a:hover {
	color: #666;
}

.grid-det span {
	font-weight   : 600;
	color         : #999;
	float         : left;
	position      : relative;
	z-index       : 2;
	text-align    : left;
	width         : 100%;
	letter-spacing: 1px;
	font-size     : 10px;
}

.text-title {
	float      : left;
	width      : 100%;
	padding    : 20px 0;
	font-size  : 18px;
	font-weight: 600;
	text-align : left;
	position   : relative;
}

.mr-topt {
	margin-top: 30px;
}

.text-title span {
	color: #999;
}

.project-detail-wrap p {
	font-size  : 11.5px;
	font-weight: 500;
	color      : #666;
}

.project-detail-wrap blockquote p {
	font-size  : 12px;
	font-weight: 500;
}

.page-nav {
	float     : left;
	width     : 100%;
	position  : relative;
	margin-top: 50px;
}

.page-nav:before {
	content   : '';
	position  : absolute;
	left      : 0;
	bottom    : 0;
	width     : 100%;
	height    : 1px;
	background: #eee;
}

.page-nav a.ppn,
.page-nav a.npn {
	padding      : 13px 36px;
	color        : #000;
	border-radius: 2px;
	position     : relative;
	font-weight  : 600;
	box-shadow   : 0px 5px 10px 2px rgba(88, 103, 221, 0.19);
	font-size    : 11px;
}

.page-nav a:hover {
	box-shadow: 0px 5px 10px 2px rgba(88, 103, 221, 0);
	color     : #fff;
}

.page-nav a.ppn {
	float: left;
}

.page-nav a.npn {
	float: right;
}

.appn {
	position   : absolute;
	bottom     : -22px;
	left       : 50%;
	margin-left: -75px;
	width      : 150px;
	z-index    : 5;
}

.appn i {
	width        : 30px;
	height       : 30px;
	border-radius: 100%;
	position     : absolute;
	bottom       : -24px;
	line-height  : 32px;
	left         : 50%;
	margin-left  : -15px;
	background   : #fff;
	z-index      : 2;
	font-size    : 9px;
	transition   : all 0.2s ease-in-out;
}

.appn:hover i {
	bottom: -39px;
	color : #000;
}

.appn:hover:after {
	bottom: -44px;
}

.appn:after {
	content      : '';
	position     : absolute;
	width        : 40px;
	height       : 40px;
	left         : 50%;
	bottom       : -29px;
	margin       : 0 0 0 -20px;
	background   : #fff;
	border-radius: 100%;
	z-index      : 1;
	transition   : all 0.2s ease-in-out;
}

.appn span {
	float         : left;
	width         : 100%;
	z-index       : 2;
	background    : #fff;
	padding       : 15px 0;
	border        : 1px solid #eee;
	border-radius : 4px;
	font-size     : 10px;
	font-weight   : 700;
	text-transform: uppercase;
	transition    : all 0.1s ease-in-out;
}

.tooltip,
.page-nav a {
	transition: all 0.3s ease-in-out;
}

.tooltip {
	width         : 200px;
	height        : auto;
	line-height   : 20px;
	padding       : 10px;
	color         : #000;
	text-align    : center;
	text-indent   : 0px;
	position      : absolute;
	background    : #fff;
	border        : 1px solid #eee;
	bottom        : 0;
	opacity       : 0;
	margin-bottom : 20px;
	visibility    : hidden;
	pointer-events: none;
	z-index       : 6;
	box-shadow    : 0px 1px 15px 1px rgba(113, 106, 202, 0.1);
}

.tooltip h5 {
	font-size  : 12px;
	margin-top : 12px;
	padding    : 5px 0;
	position   : relative;
	display    : inline-table;
	font-weight: 600;
}

.page-nav a:hover .tooltip {
	visibility: visible;
	opacity   : 1;
	bottom    : 100%;
}

.page-nav a.npn .tooltip {
	right: 0;
}

.page-nav a.ppn .tooltip {
	left: 0;
}

.show-info {
	position: absolute;
	bottom  : 50px;
	left    : 50px;
	width   : 80%;
	z-index : 15;
}

.show-info span {
	font-size  : 11px;
	color      : #fff;
	cursor     : pointer;
	float      : left;
	font-weight: 600;
	padding    : 10px 22px;
	background : rgba(0, 0, 0, 0.7);
}

.show-info span i {
	padding-right: 10px;
}

.tooltip-info {
	height        : auto;
	line-height   : 20px;
	padding       : 10px 20px;
	font-size     : 11px;
	color         : #fff;
	text-align    : center;
	text-indent   : 0px;
	position      : absolute;
	background    : rgba(0, 0, 0, 0.7);
	bottom        : 0;
	opacity       : 0;
	left          : 0;
	margin-bottom : 30px;
	visibility    : hidden;
	pointer-events: none;
	z-index       : 16;
	transition    : all 200ms linear;
}

.tooltip-info p {
	font-size: 12px;
	color    : #fff;
}

.tooltip-info h5 {
	font-size     : 11px;
	margin-top    : 12px;
	padding       : 5px 0;
	position      : relative;
	text-transform: uppercase;
	text-align    : left;
	font-weight   : 700;
}

.show-info:hover .tooltip-info {
	visibility: visible;
	opacity   : 1;
	bottom    : 20px;
}

.image-slider {
	float   : left;
	position: relative;
}

.image-slider img {
	width : 100%;
	height: auto;
}

.image-slider .swiper-pagination {
	bottom     : 20px;
	font-weight: 700;
	color      : #292929;
	font-size  : 10px;
}

.image-slider .swiper-button-prev,
.image-slider .swiper-button-next,
.home-slider .swiper-button-prev,
.home-slider .swiper-button-next {
	position     : absolute;
	top          : 50%;
	width        : 40px;
	height       : 40px;
	line-height  : 40px;
	border-radius: 50%;
	margin-top   : -20px;
	color        : #000;
	z-index      : 20;
	cursor       : pointer;
	box-shadow   : 0px 0px 0px 6px rgb(255 255 255 / 40%);
}

.image-slider .swiper-button-prev {
	left: 14px;
}

.image-slider .swiper-button-next {
	right: 14px;
}

.home-slider .swiper-button-prev {
	left: 34px;
}

.home-slider .swiper-button-next {
	right: 34px;
}

.fs-slider-item {
	overflow: hidden;
}

/* ------blog------------------------------------------------------------ */
.post,
.pagination {
	float   : left;
	width   : 100%;
	position: relative;
}

.post p {
	padding-bottom: 20px;
	text-align    : left;
	position      : relative;
	font-weight   : 500;
	color         : #5e646a;
}

.post {
	margin-bottom: 20px;
	border       : 1px solid #eee;
	border-radius: 4px;
	overflow     : hidden;
	background   : #f9f9f9;
}

.post .single-media {
	margin-bottom: 30px;
}

.post .btn {
	margin-top: 10px;
}

.post-item {
	padding: 0 20px 40px 20px;
	z-index: 2;
}

.single-post:after {
	content   : '';
	position  : absolute;
	left      : 20px;
	right     : 50%;
	height    : 1px;
	bottom    : 50px;
	background: #ddd;
}

.display-posts p {
	line-height: 25px;
}

.post h4 {
	font-size     : 18px;
	font-weight   : 700;
	color         : #666;
	text-align    : left;
	padding-bottom: 10px;
}

.post h4 a:hover {
	color: #666;
}

.post-media {
	float   : left;
	width   : 100%;
	position: relative;
	margin  : 0 0 20px 0;
}

.post-opt {
	padding-top: 16px;
	float      : right;
}

.post-opt.single_post-opt {
	float        : left;
	padding-top  : 0;
	margin-bottom: 20px;
	width        : 100%;
}

.post-opt li,
.cat-item li {
	float: left;
}

.post-opt li {
	margin-right: 20px;
}

.post-opt li span,
.post-opt li a {
	color      : #666;
	font-weight: 600;
	font-size  : 11px;
}

.post-opt li i {
	padding-right: 6px;
	font-weight  : bold;
}

.mas-posts article ul.post-meta li {
	margin-bottom: 6px;
}

.post-tags {
	float   : right;
	position: relative;
	top     : 14px;
}

.post-tags.single-tags {
	top       : 0;
	float     : left;
	margin-top: 30px;
}

.post-tags li,
.tagcloud li {
	margin-left: 4px;
	float      : left;
}

.post-tags {
	position: relative;
}

.post-tags li a,
.tagcloud li a {
	float        : left;
	font-size    : 11px;
	border-radius: 2px;
	padding      : 12px 18px;
	background   : #fff;
	border       : 1px solid #eee;
	margin-bottom: 3px;
	color        : #666;
	transition   : all 300ms linear;
	font-weight  : 600;
}

.post-tags li a:hover,
.tagcloud li a:hover {
	background: #292929;
}

.pagination {
	margin        : 0 0 18px;
	text-align    : center;
	vertical-align: middle;
	border        : 1px solid rgba(0, 0, 0, .07);
	border-radius : 4px;
	float         : left;
	width         : 100%;
	background    : #fff;
}

.pagination a {
	float       : left;
	width       : 60px;
	height      : 60px;
	line-height : 60px;
	position    : relative;
	font-size   : 11px;
	color       : #666;
	font-weight : 600;
	border-right: 1px solid rgba(0, 0, 0, .07);
	transition  : all 200ms linear;
}

.pagination a i {
	font-size: 13px;
}

.pagination a.current-page,
.pagination a:hover {
	color: #292929;
}

.searh-inner {
	max-width: 350px;
	position : relative;
	display  : block;
}

.searh-holder {
	margin: 10px 0 40px;
}

.search {
	border            : none;
	border            : 1px solid #eee;
	float             : left;
	background        : #f9f9f9;
	border-radius     : 3px;
	position          : relative;
	outline           : none;
	padding           : 0px 0px 0px 10px;
	width             : 100%;
	height            : 40px;
	color             : #292929;
	-webkit-appearance: none;
}

.search-submit {
	border    : none;
	outline   : none;
	cursor    : pointer;
	background: none;
	position  : absolute;
	top       : 0;
	right     : 0;
	width     : 28%;
	height    : 40px;
}

.cat-item {
	padding-bottom: 8px;
	margin-bottom : 15px;
}

.cat-item a {
	font-weight: 400;
	font-size  : 12px;
	transition : all 200ms linear;
}

#comments {
	text-align : left;
	padding-top: 10px;
	float      : left;
	width      : 100%;
}

#comments-title,
#reply-title {
	border-bottom : 1px solid #eee;
	padding-bottom: 20px;
	font-size     : 16px;
	text-transform: uppercase;
	font-weight   : 700;
	color         : #000;
}

.comment {
	float: left;
}

.comment-text {
	margin-top   : 20px;
	padding      : 20px 30px;
	border-radius: 4px;
	border       : 1px solid #eee;
	background   : #f9f9f9;
}

.comment-body {
	position   : relative;
	margin-left: 70px;
	padding-top: 30px;
}

.comment-author {
	position: absolute;
	top     : 30px;
	left    : -66px;
}

.comment-author img {
	border-radius: 100%;
}

.comment .children {
	margin-left: 70px;
}

.fn {
	display    : block;
	font-size  : 14px;
	font-weight: 600;
}

.comment-meta,
.comment-meta a {
	font-weight   : 600;
	font-size     : 11px;
	color         : #666;
	padding-bottom: 10px;
}

#respond {
	margin-top: 40px;
}

#reply-title {
	padding-bottom: 30px;
	margin-bottom : 5px;
}

.comment-notes {
	margin-top: 10px;
	color     : #a4a4a3;
}

.control-group label,
.control-group .controls {
	display: inline-block;
}

.control-group label {
	margin     : 10px 0 0 10px;
	font-weight: 600;
}

.control-group .controls input {
	margin-top     : 15px;
	outline        : none;
	height         : 45px;
	background     : #f9f9f9;
	padding-left   : 15px;
	color          : #a4a4a3;
	text-decoration: none;
	border         : 1px solid #eee;
	border-radius  : 2px;
}

.control-group .controls textarea {
	margin-top     : 15px;
	outline        : none;
	height         : 180px;
	max-width      : 600px;
	width          : 100%;
	background     : #f9f9f9;
	padding-left   : 15px;
	padding-top    : 15px;
	color          : #a4a4a3;
	resize         : vertical;
	text-decoration: none;
	border         : 1px solid #eee;
	border-radius  : 3px;
}

.controls button {
	margin-top    : 30px;
	padding       : 16px 24px;
	border-radius : 2px;
	font-size     : 10px;
	font-weight   : 700;
	text-transform: uppercase;
}

.post-author {
	float: left;
	width: 100%;
}

.post-author-wrap {
	float       : left;
	width       : 100%;
	position    : relative;
	padding-left: 100px;
}

.post-author-wrap h3 {
	float         : left;
	width         : 100%;
	text-align    : left;
	color         : #000;
	font-size     : 16px;
	font-weight   : 600;
	text-transform: uppercase;
	margin-top    : 8px;
}

.post-author-wrap p {
	color      : #000;
	font-weight: 500;
	line-height: 20px;
	padding    : 8px 0;
	float      : left;
	width      : 100%;
}

.post-author-wrap span {
	float      : left;
	text-align : left;
	color      : #666;
	width      : 100%;
	font-weight: 600;
}

.post-author-img {
	width   : 80px;
	height  : 80px;
	position: absolute;
	top     : 5px;
	left    : 0;
	overflow: hidden;
	z-index : 2;
}

.post-author-img img {
	width        : 80px;
	height       : 80px;
	border-radius: 100%;
	float        : left;
}

.post-author-wrap ul {
	list-style: none;
	margin-top: 20px;
	position  : relative;
	float     : left;
}

.post-author-wrap ul:before {
	content   : '';
	position  : absolute;
	top       : 50%;
	left      : 0;
	right     : -100px;
	height    : 1px;
	background: #eee;
	z-index   : -1;
}

.post-author-wrap ul:after {
	content      : '';
	position     : absolute;
	width        : 8px;
	height       : 8px;
	right        : -100px;
	top          : 50%;
	margin-top   : -4px;
	border-radius: 100%;
}

.post-author-wrap ul li {
	float       : left;
	margin-right: 8px;
}

.post-author-wrap li a {
	float        : left;
	width        : 36px;
	height       : 36px;
	line-height  : 36px;
	border-radius: 2px;
	border       : 1px solid #eee;
	color        : #666;
	background   : #f9f9f9;
}

.post-container .wrap-inner {
	padding: 50px 30px 30px;
}

.widget-sidebar {
	float   : left;
	position: relative;
	width   : 100%;
}

.ws_column {
	padding   : 35px 30px 15px;
	background: #fff;
}

.widget-sidebar h3 {
	float         : left;
	width         : 100%;
	font-weight   : 600;
	font-size     : 16px;
	text-align    : left;
	padding-bottom: 14px;
	border-bottom : 1px solid #ddd;
	position      : relative !important;
	margin-bottom : 10px;
}

.widget-sidebar.ws_column h3 {
	border-color: #eee;
}

.widget-sidebar h3:before {
	content : '';
	position: absolute;
	bottom  : -1px;
	left    : 0;
	width   : 30px;
	height  : 3px;
}

.widget-inner {
	float   : left;
	width   : 100%;
	position: relative;
	margin  : 8px 0 25px;
}

.search {
	border            : none;
	float             : left;
	background        : #eee;
	border-radius     : none;
	position          : relative;
	outline           : none;
	padding           : 0px 0px 0px 20px;
	width             : 100%;
	height            : 50px;
	color             : #000;
	-webkit-appearance: none;
}

.search::-webkit-input-placeholder,
.search::-webkit-input-placeholder {
	color      : #999;
	font-weight: 500;
	font-size  : 12px;
	position   : relative;
	font-family: 'Poppins', sans-serif;
}

.search-submit {
	border: none;

	outline   : none;
	cursor    : pointer;
	position  : absolute;
	top       : 0;
	right     : 0;
	width     : 70px;
	height    : 50px;
	background: #292929;
	font-size : 11px;
}

.search-submit:hover i {
	opacity: 0.5;
}

.widget-posts li {
	padding   : 12px 0;
	text-align: left;
}

.widget-posts-img {
	float: left;
	width: 30%;
}

.widget-comments-img img {
	border-radius: 100%;
}

.widget-posts-descr {
	float   : left;
	width   : 70%;
	position: relative;
	padding : 10px 0 0 15px;
}

.widget-posts-descr:before,
.widget-posts-descr:after {
	content   : '';
	position  : absolute;
	bottom    : -14px;
	left      : 15px;
	right     : 0;
	height    : 1px;
	background: #eee;
	z-index   : 1;
}

.widget-posts-descr:after {
	left   : auto;
	width  : 30px;
	z-index: 2;
}

.widget-posts-descr a {
	font-size  : 12px;
	font-weight: 600;
	color      : #000;
}

.widget-posts-descr a:hover {
	color: #666;
}

.widget-posts-date {
	float         : left;
	width         : 100%;
	margin-top    : 7px;
	color         : #444;
	font-size     : 10px;
	text-transform: uppercase;
	font-weight   : 600;
}

.widget-posts-date i {
	margin-right: 6px;
}

.widget-inner .post-tags {
	top: 0;
}

.widget-inner .post-tags li a,
.widget-inner .tagcloud li a {
	background : #292929;
	color      : #fff;
	border     : none;
	font-weight: 600;
}

.cat-wid,
.fix-bar {
	float   : left;
	width   : 100%;
	position: relative;
}

.cat-wid li {
	float        : left;
	width        : 100%;
	text-align   : left;
	margin-bottom: 6px;
	color        : #292929;
}

.cat-wid li a {
	color      : #999;
	font-size  : 12px;
	padding    : 4px 20px 0 0;
	font-weight: 500;
	float      : left;
	background : #fff;
	position   : relative;
	z-index    : 2;
}

.cat-item {
	padding-bottom: 8px;
	margin-bottom : 15px;
	position      : relative;
}

.cat-item a:hover {
	color: #000;
}

.cat-item:before {
	content   : '';
	position  : absolute;
	top       : 50%;
	left      : 0;
	right     : 50px;
	z-index   : 1;
	border-top: 1px dotted #ccc;
}

.cat-item a {
	font-weight: 400;
	font-size  : 12px;
}

.cat-item span {
	float        : right;
	width        : 26px;
	height       : 26px;
	line-height  : 26px;
	background   : #333;
	border-radius: 2px;
	text-align   : center;
	font-size    : 10px;
}

.widget-inner .btn-nav {
	margin-bottom: 0;
}

.bl-nav {
	margin-top: 20px;
}

/*------ share------------------------------------------------*/
.share-button {
	float         : right;
	position      : relative;
	padding       : 0 38px;
	border-radius : 2px;
	height        : 45px;
	line-height   : 45px;
	top           : 16px;
	color         : #292929;
	box-shadow    : 0px 5px 10px 2px rgba(88, 103, 221, 0.19);
	font-size     : 10px;
	text-transform: uppercase;
	font-weight   : 600;
	cursor        : pointer;
	transition    : all 200ms linear;
	overflow      : hidden;
}

.share-button:hover {
	box-shadow: 0px 0px 0px 0px rgba(88, 103, 221, 0.19);
}

.share-button:before {
	font-family: Font Awesome\ 5 Pro;
	content    : "\f00d";
	position   : absolute;
	left       : 0;
	right      : 0;
	top        : 100%;
	height     : 45px;
	line-height: 45px;
	transition : all .3s ease-in-out;
	background : #333;
	color      : #fff;
	z-index    : 10;
}

.share-button.uncl-share:before {
	top: 0;
}

.share-button i {
	padding-right: 10px;
}

.share-wrapper {
	position  : fixed;
	top       : 80px;
	right     : 46px;
	z-index   : 10;
	background: #fff;
	padding   : 10px;
	box-shadow: 0px 1px 15px 1px rgb(113 106 202 / 10%);
	display   : none;
}

.share-container {
	position: relative;
	float   : left;
	width   : 100%;
}

.share-icon {
	height     : 44px;
	width      : 44px;
	margin     : 1px;
	float      : left;
	position   : relative;
	font-size  : 12px;
	line-height: 44px;
	color      : #000;
	opacity    : 0;
}

.share-icon:hover {
	background: #eee;
}

.share-icon:before {
	font-family: Font Awesome\ 5 Brands;
}

.share-icon-digg:before {
	content: "\f1a6";
}

.share-icon-foursquare:before {
	content: "\f180";
}

.share-icon-rss:before {
	content: "\f09e";
}

.share-icon-facebook:before {
	content: "\f39e";
}

.share-icon-twitter:before {
	content: "\f099";
}

.share-icon-tumblr:before {
	content: "\f173";
}

.share-icon-linkedin:before {
	content: "\f0e1";
}

.share-icon-pinterest:before {
	content: "\f231";
}

.share-icon-stumbleupon:before {
	content: "\f1a4";
}

/*------  contact------------------------------------------------------*/
.map-box {
	height  : 360px;
	overflow: hidden;
}

.map-container.mc_big,
#map-single {
	position: absolute;
	top     : 0;
	left    : 0;
	width   : 100%;
	height  : 100%;
	z-index : 1;
}

#contact-form {
	float    : left;
	max-width: 600px;
}

.input-wrap {
	float        : left;
	width        : 100%;
	border       : 1px solid #eee;
	border-left  : none;
	position     : relative;
	padding-left : 70px;
	margin-bottom: 12px;
	background   : #f9f9f9;
	border-radius: 2px;
}

.input-wrap i {
	position   : absolute;
	width      : 70px;
	height     : 50px;
	top        : 0;
	left       : 0;
	line-height: 50px;
	color      : #000;
	font-size  : 14px;
	font-weight: 900;
}

#contact-form input[type="text"],
#contact-form textarea {
	color             : #666;
	font-weight       : 600;
	font-size         : 11px;
	height            : 50px;
	width             : 100%;
	padding-left      : 10px;
	background        : none;
	border            : none;
	border            : 0;
	border-radius     : 0;
	position          : relative;
	-webkit-appearance: none;
	font-family       : 'Poppins', sans-serif;
}

#contact-form input[type=text]:focus,
#contact-form textarea:focus,
input[type=email]:focus {
	background: #fff;
	box-shadow: 0px 10px 14px 0px rgba(12, 0, 46, 0.06);
}

#contact-form textarea {
	height    : 170px;
	resize    : none;
	background: #f9f9f9;
	border    : 1px solid #eee;
	padding   : 30px 20px;
}

#submit,
.controls button {
	border            : none;
	outline           : none;
	cursor            : pointer;
	-webkit-appearance: none;
	font-family       : 'Poppins', sans-serif;
}

.error_message {
	text-align    : left;
	margin-bottom : 30px;
	font-size     : 12px;
	color         : #000;
	font-weight   : 700;
	text-transform: uppercase;
}

#success_page h3 {
	text-align    : left;
	font-size     : 13px;
	font-weight   : 700;
	text-transform: uppercase;
}

#success_page p {
	color     : #000;
	margin-top: 10px;
}

#message fieldset {
	border: none;
	color : #000;
}

.contact-detail {
	background: #fff;
	padding   : 30px 5px 30px 90px;
	box-shadow: 0px 6px 6px -4px rgba(0, 0, 0, 0.2);
	overflow  : hidden;
	transition: all 0.4s ease-in-out;
}

.contact-detail:hover {
	box-shadow: 0px 6px 6px -4px rgba(0, 0, 0, 0.5);
}

.contact-detail i {
	position     : absolute;
	left         : 20px;
	top          : 30px;
	width        : 50px;
	height       : 50px;
	line-height  : 50px;
	border-radius: 2px;
	font-size    : 16px;
	font-weight  : 600;
	box-shadow   : 0 15px 5px rgb(0 0 0 / 8%);
	transition   : all .3s ease-in-out;
	z-index      : 2;
}

.contact-detail-wrap {
	margin: 30px 0;
}

.contact-detail h3 {
	text-align    : left;
	font-size     : 15px;
	color         : #000;
	font-weight   : 600;
	padding-bottom: 5px;
}

.contact-detail ul li {
	float        : left;
	width        : 100%;
	position     : relative;
	text-align   : left;
	margin-bottom: 6px;
}

.contact-detail ul li a {
	color         : #666;
	font-size     : 11px;
	text-transform: uppercase;
	font-weight   : 600;
}

.card-item_num {
	position     : absolute;
	right        : 0;
	top          : 0;
	width        : 40px;
	height       : 40px;
	line-height  : 40px;
	font-size    : 10px;
	font-weight  : 600;
	background   : #f9f9f9;
	border-left  : 1px solid #eee;
	border-bottom: 1px solid #eee;
}

.error-wrap {
	top     : 50%;
	z-index : 20;
	position: absolute;
	left    : 0;
	right   : 0;
}

.error-wrap:before {
	content : '';
	position: absolute;
	bottom  : 72px;
	left    : 50%;
	height  : 2px;
	width   : 40px;
	margin  : 0 0 0 -20px;
}

.error-wrap h2 {
	font-size  : 184px;
	color      : #fff;
	font-weight: 900;
	line-height: 185px;
}

.error-wrap .btn {
	float     : none;
	display   : inline-block;
	margin-top: 10px;
}

.error-wrap p {
	color         : rgba(255, 255, 255, 0.91);
	font-size     : 10px;
	text-align    : center;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom : 20px;
}

.psn_button {
	position      : fixed;
	bottom        : 0;
	left          : 0;
	color         : #000;
	text-transform: uppercase;
	font-size     : 10px;
	letter-spacing: 2px;
	font-weight   : 700;
	display       : none;
	height        : 60px;
	line-height   : 60px;
	width         : 100%;
	z-index       : 100;
	cursor        : pointer;
}

.psn_button i {
	font-size  : 14px;
	margin     : 0 10px 0 0;
	font-weight: 900;
	position   : relative;
	top        : 1px;
}

.mob-filter_btn {
	display: none;
}

/*------  Responsive ------------------------------------------------------*/
@media only screen and (max-width: 1258px) {
	.scroll-nav ul li {
		padding: 20px 20px;
	}

	.piechart-holder h4 {
		float     : left;
		width     : 100%;
		position  : relative;
		left      : 20px;
		top       : 0;
		margin-top: 0;
		box-shadow: 0px 1px 15px 1px rgba(113, 106, 202, 0.1);
		text-align: left;
	}

	.chart,
	.piechart {
		margin-bottom: 20px;
	}

	.sb-portfolio {
		width: 100%;
	}

	.sb-portfolio .gallery-item {
		width: 50%;
	}

	.fixed-filter {
		width        : 100%;
		float        : left;
		position     : relative !important;
		margin-bottom: 20px;
		right        : 0;
	}

	.fixed-filter .gallery-filters {
		display: none;
	}

	.fixed-filter .filter-header {
		cursor    : pointer;
		background: #fff;
	}

	.fixed-filter .filter-header:before {
		font-family: Font Awesome\ 5 Pro;
		content    : "\f0d7";
		position   : absolute;
		right      : 30px;
		top        : 22px;
		color      : #aaa;
		font-size  : 14px;
	}

	.column-content {
		width  : 100%;
		padding: 10px 0 0 30px;
	}

	.wrap-inner {
		padding: 80px 20px;
	}

	.inline-filter .folio-counter {
		width: 100%;
	}

	.inline-filter {
		background  : #fff;
		padding-left: 0;
	}
}

@media only screen and (max-width: 1068px) {
	.nav-button-wrap {
		display: block;
	}

	.nav-holder-wrap {
		left: -280px;
	}

	.content-holder {
		padding: 0;
	}

	#wrapper {
		top: 80px;
	}

	.column-content {
		padding: 0;
	}

	.main-footer {
		padding-left: 0;
	}

	.footer-inner {
		padding: 80px 70px 40px 70px;
	}

	.contact-link,
	.piechart:before,
	header.main-header:before,
	header.main-header:after,
	.nav-holder-wrap:before,
	.footer-decor,
	.element,
	.gfm {
		display: none;
	}

	.share-container {
		left: 0;
	}

	.wrap-inner {
		padding: 80px 10px;
	}

	.home-content {
		padding: 0;
	}

	.scroll-nav-wrap {
		margin-bottom: 0;
	}

	.contact-detail,
	.about-image,
	.team-box {
		margin-bottom: 20px;
	}

	.scroll-nav-wrap {
		left    : 0;
		bottom  : 0;
		top     : auto !important;
		z-index : 150;
		position: fixed;
	}

	.footer-inner {
		z-index: 1;
	}

	.share-button {
		padding    : 0;
		top        : 50%;
		right      : 10px;
		position   : absolute;
		width      : 100px;
		height     : 40px;
		line-height: 40px;
		margin-top : -20px;
	}

	.share-button:before {
		height     : 60px;
		line-height: 60px;
	}

	.logo-holder {
		left : 20px;
		width: auto;
	}

	.page-load {
		left: 0;
	}

	.mob-fs {
		height: 400px;
	}

	.filter-wrap.inline-filter .gallery-filters a {
		width        : 100%;
		margin-bottom: 0;
		border-bottom: 1px solid #eee;
	}

	.filter-wrap.inline-filter.boxed-filter .folio-counter {
		float: left;
	}

	.mob-filter_btn {
		float         : left;
		width         : 100%;
		padding       : 20px 0 18px;
		border-bottom : 1px solid #eee;
		border-top    : 1px solid #eee;
		text-align    : left;
		font-size     : 11px;
		font-weight   : 700;
		text-transform: uppercase;
		color         : #000;
		padding-left  : 24px;
		background    : #fff;
		display       : block;
		cursor        : pointer;
	}

	.mob-filter_btn:before {
		font-family: Font Awesome\ 5 Pro;
		content    : "\f0d7";
		position   : absolute;
		right      : 30px;
		top        : 22px;
		color      : #aaa;
		font-size  : 14px;
	}

	.mob-filter_btn i {
		font-size    : 14px;
		padding-right: 20px;
		color        : #666;
	}
}

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

	.about-image,
	.inline-facts,
	.team-box,
	.resum-header,
	.price,
	.client-control {
		margin-bottom: 30px;
	}

	.inline-facts {
		box-shadow: 0px 6px 6px -4px rgba(0, 0, 0, 0.2);
	}

	.breadcrumb-wrap,
	header.main-header:before,
	header.main-header:after,
	.share-container:before,
	.slider-progress-bar,
	.hero-dec_top,
	.hero-dec_bottom,
	.show-info {
		display: none;
	}

	header.main-header {
		padding-left: 0;
	}

	.scroll-nav-wrap {
		display: none;
		bottom : 60px
	}

	.psn_button {
		display: block;
	}

	.scroll-nav ul li {
		width        : 100%;
		border-left  : none;
		border-bottom: 1px solid #eee;
	}

	.scroll-nav ul li a {
		float: left;
	}

	.piechart-holder h4 {
		margin-bottom: 20px;
	}

	.team-link {
		bottom: 10px;
	}

	.gallery-item {
		width: 50%;
	}

	.dec-list {
		margin-top: 20px;
	}

	.footer-inner {
		padding: 80px 20px 40px 20px;
	}

	.hero-wrap h2 {
		font-size  : 36px;
		line-height: 38px;
	}

	.error-wrap h2 {
		font-size  : 84px;
		line-height: 85px;
	}

	.contact-detail {
		padding   : 30px 10px 30px 70px;
		box-shadow: 0px 6px 6px -4px rgba(0, 0, 0, 0.1);
	}

	.contact-detail i {
		left: 10px;
	}

	.pvlin {
		float     : left;
		top       : 0;
		margin-top: 30px;
	}

	.piechart {
		float: left;
		width: 100%;
	}

	.piechart-holder h4 {
		width   : auto;
		position: relative;
		left    : 20px;
		top     : 70px;
	}

	.post-container .wrap-inner {
		padding: 30px 20px 20px;
	}

	.mob_bottom,
	.home-slider .swiper-button-prev.mob_bottom,
	.home-slider .swiper-button-next.mob_bottom {
		top       : auto;
		margin-top: 0;
		bottom    : 20px;
	}

	.hero_promo-wrap {
		right       : 50%;
		margin-right: -115px;
	}

	.header-info ul,
	.column-filter {
		background: #fff;
	}
}

@media only screen and (max-width: 540px) {
	.gallery-item {
		width: 100% !important;
	}

	.to-top {
		position  : relative;
		float     : left;
		right     : 0;
		bottom    : 0;
		margin-top: 30px
	}

	.to-top span {
		left: 30px;
	}

	.single-post:after,
	.portfolio-wrap .carousel-counter,
	.appn i,
	.appn:after {
		display: none;
	}

	.logo-holder {
		left: 10px;
	}

	header.main-header {
		padding: 0 20px;
	}

	.twitter-widget-wrap {
		width: 250px;
		right: -90px;
	}

	.interact a {
		margin-bottom: 10px;
	}

	.order-wrap a.ord-link {
		float     : left;
		margin-top: 30px;
	}

	.post-tags {
		float: left;
		top  : 20px;
	}

	.comment .children {
		margin-left: 10px;
	}

	.tab-content {
		padding: 30px 20px;
	}

	.nav-button-wrap {
		margin-right: 110px;
	}

	.logo-holder img {
		margin-top: -11px;
		height: 98px;
		left: -2px;
	}

	.post-author-wrap {

		padding-left: 70px;
	}

	.post-author-img {
		width : 50px;
		height: 50px;
	}

	.post-author-img img {
		width : 50px;
		height: 50px;
	}

	.comment-body {
		margin-left: 0;
	}

	.fn,
	.comment-meta {
		padding-left: 60px;
	}

	.comment-author {
		left: 0;
	}

	.hero-wrap {
		top: 20%;
	}

	.home-slider .hero-wrap h2,
	.hero-wrap h2 {
		font-size  : 30px;
		line-height: 34px;
	}

	.hero-item .btn {
		margin-top: 10px;
	}

	.hero-dec {
		margin-bottom: 10px;
	}

	.portfolio-wrap .swiper-container {
		padding: 10px 0 20px 10px;
	}

	.mob-fs {
		height: 300px;
	}

	.swiper-container-horizontal>.swiper-scrollbar {
		bottom: 6px;
		left  : 10px;
	}

	.portfolio-wrap .sw-button.swiper-button-next {
		right: 10px;
	}

	.portfolio-wrap .sw-button.swiper-button-prev {
		left: 10px;
	}

	.appn {
		bottom: -62px;
	}

	.fs-content {
		padding: 15px;
	}
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	.bg {
		background-attachment  : scroll !important;
		-webkit-background-size: cover;
		background-position    : center;
	}
}

.custom-inner-content {
	border-radius: 5px;
}