/*
Theme Name: qbit v_2
Theme URI: qbit.solutions
Author: qBit Team
Author URI: qbit.solutions
Description: qBit Solution
Version: 0.2
Text Domain: 
*/

/* 
 * ---------------------------------------------------------------------------------------------------------------------
 *	RESET CSS
 *----------------------------------------------------------------------------------------------------------------------
*/
*
{
	box-sizing: border-box;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	background-color: #fafcfd;
	-webkit-font-smoothing: antialiased;
	overflow-y: scroll;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a {
	text-decoration: none;
}
.hidden
{
	display: none;
}

.grecaptcha-badge {
	visibility: hidden;
}

/* 
 * ---------------------------------------------------------------------------------------------------------------------
 *	Fonts
 *----------------------------------------------------------------------------------------------------------------------
*/

@font-face {
    font-family: 'Nexa Light';
    src: url(fonts/nexa_light.otf);
}

@font-face {
    font-family: 'Nexa Regular';
    src: url(fonts/nexa_regular.otf);
}

@font-face {
    font-family: 'Nexa Bold';
    src: url(fonts/nexa_bold.otf);
}

@font-face {
    font-family: 'Avenir';
    src: url(fonts/abold.otf);
    font-weight: 600;
}

@font-face {
    font-family: 'Avenir';
    src: url(fonts/ademi.otf);
    font-weight: 400;
}

@font-face {
    font-family: 'Avenir';
    src: url(fonts/aregular.otf);
    font-weight: 300;
}

/* 
 * ---------------------------------------------------------------------------------------------------------------------
 *	Variables
 *----------------------------------------------------------------------------------------------------------------------
*/


:root 
{
	--blue: #00BBD3;
	--yellow: #FFF855;
	--canary: #FDCE27;
	--orange: #FD8227;
	--green: #55D97E;
	--red: #EF7070;
	--purple: #3A41B0;
	--dark: #0C1B2E;
	--light: #647488;
}

section
{
	width: 100%;
	position: relative;
	display: block;
}


.wrapper
{
	width: 70%;
	position: relative;
	display: block;
	margin: auto;
}

.sectionTitle
{
	width: 100%;
	position: relative;
	display: block;
}	

	.sectionTitle .quote 
	{
		position: relative;
		display: inline-block;
		vertical-align: middle;
	}

		.sectionTitle .quote #firstText
		{
			position: relative;
			font-family: 'Montserrat', sans-serif;
			font-weight: 800;
			color: #fff;
			letter-spacing: 2px;
			font-size: 72px;
			line-height: 72px;
			text-transform: uppercase;
		}

		.sectionTitle .quote #middleText
		{
			position: absolute;
			top: 47px;
			left: 0;
			font-family: 'Montserrat', sans-serif;
			font-weight: 800;
			color: var(--blue);
			letter-spacing: 2px;
			font-size: 48px;
			text-transform: uppercase;
			text-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
		}

	.sectionTitle .title {
		position: absolute;
		display: inline-block;
		vertical-align: middle;
		font-family: 'Montserrat', sans-serif;
		font-weight: 800;
		font-size: 18px;
		letter-spacing: 1px;
		color: #ccc;
		text-transform: uppercase;
	}

.loader
{
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	display: block;
	background: var(--blue);
	z-index: 9999;
}


.loader
{
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	display: block;
	background: #f5f5f5;
	z-index: 9999;
}

.loader.hide
{
	opacity: 0;
	-webkit-transition: all .6s ease-in-out;
	   -moz-transition: all .6s ease-in-out;
	    -ms-transition: all .6s ease-in-out;
	     -o-transition: all .6s ease-in-out;
	        transition: all .6s ease-in-out;
}

body.hide
{
	display: none;
}

.overflow,
body.overflow
{
	width: 100%;
	overflow-y: visible;
	height: 100%;
}
body.overflow .hamburger
{
	right:10%;
	position:fixed;
}

	.loader .loading
	{
		width: 100%;
		height: 6px;
		position: relative;
		top: 0;
		animation-name: fill;
    	animation-duration: 2.8s;
    	background: var(--yellow);
	}

	.loader .yAlign
	{
		position: absolute;
		top: 50%;
		text-align: center;
		display: inline-block;
		width: 100%;
		-webkit-transform: translateY(-50%);
		   -moz-transform: translateY(-50%);
		    -ms-transform: translateY(-50%);
		     -o-transform: translateY(-50%);
		        transform: translateY(-50%);
	}


		#hiddenLogo {
			opacity: 0;
		}

		#Logo {
		  width: 300px;
		  height: 100%;
		  position: absolute;
		  top: 0; right: -25%; bottom: 0; left: -25%;
		  margin: auto;
		  display:block; 
		  fill: #aa7f3d;
		  fill: url("#MyGradient");
		  stroke: #048DBA;
		  stroke-width: 5px;
		  stroke-miterlimit: 5;
		}

		.Animate-Draw {
		  fill-opacity: 0;
		  animation-timing-function: ease-in-out;
		  animation-fill-mode: forwards;
		  animation-iteration: 1;
		  
		  animation-name: DrawLine, FadeStroke, FillIn;
		  animation-duration: 0.5s, 0.5s, 0.5s;
		  animation-delay: 0s, .8s, .8s;
		}

		#Draw-Mark {
		  stroke-dashArray: 1100;
		  stroke-dashoffset: 1100; 
		}

		#Draw-Frame { 
		  animation-delay: 0.5s, .8s, .8s;
		  animation-duration: .8s, 0.5s, 0.5s; 
		  stroke-dashArray: 1500;
		  stroke-dashoffset: 1500;
		}

		#Draw-Text { 
		  animation-delay: 0s, .8s, .8s; 
		  animation-duration: .8s, 0.5s, 0.5s; 
		  stroke-dashArray: 300;
		  stroke-dashoffset: 300;
		  //animation-duration: 4s;
		}

		@keyframes DrawLine {
		  to { stroke-dashOffset: 0; }
		}

		@keyframes FadeStroke {
		  to { stroke-opacity: 0; }
		}

		@keyframes FillIn {
		  from { fill-opacity: 0; }
		  to { fill-opacity: 1; }
		}

		.loader .yAlign img
		{
			height: 200px;
			animation: lds-heart 2.5s infinite ease-in-out;
		}

	@keyframes lds-heart {
	  0% {
	    transform: scale(0.95);
	    opacity: 0;
	  }
	  25% {
	    transform: scale(1.0);
	    opacity: 0.3;
	  }
	  50% {
	    transform: scale(0.95);
	    opacity: 0.5;
	  }
	  75% {
	    transform: scale(1);
	    opacity: 0.7;
	  }
	  100% {
	    transform: scale(0.95);
	    opacity: 1;
	  }
	}

	@keyframes fill {
	    from {width: 0;}
	    to {width: 100%;}
	}

.text-muted
{
	opacity: 0.4;
}

.text-center
{
	text-align: center;
}

.text-right
{
	text-align: right;
}

@font-face {
	font-family: 'Gilroy';
	src: url('fonts/gilroy/Gilroy-Heavy.otf');
	font-weight: 900;
}

@font-face {
	font-family: 'Gilroy';
	src: url('fonts/gilroy/Gilroy-Bold.otf');
	font-weight: 800;
}

@font-face {
	font-family: 'Gilroy';
	src: url('fonts/gilroy/Gilroy-Regular.otf');
	font-weight: 400;
}

@font-face {
	font-family: 'Gilroy';
	src: url('fonts/gilroy/Gilroy-Light.otf');
	font-weight: 300;
}


/************************************************************
    Margins
*************************************************************/


.mt-0 { margin-top: 0px; }
.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 20px; }
.mt-3 { margin-top: 30px; }
.mt-4 { margin-top: 40px; }
.mt-5 { margin-top: 50px; }
.mt-6 { margin-top: 60px; }
.mt-7 { margin-top: 70px; }
.mt-8 { margin-top: 80px; }
.mt-9 { margin-top: 90px; }
.mt-10 { margin-top: 100px; }

.mr-0 { margin-right: 0px; }
.mr-1 { margin-right: 10px; }
.mr-2 { margin-right: 20px; }
.mr-3 { margin-right: 30px; }
.mr-4 { margin-right: 40px; }
.mr-5 { margin-right: 50px; }
.mr-6 { margin-right: 60px; }
.mr-7 { margin-right: 70px; }

.mb-0 { margin-bottom: 0px; }
.mb-1 { margin-bottom: 10px; }
.mb-2 { margin-bottom: 20px; }
.mb-3 { margin-bottom: 30px; }
.mb-4 { margin-bottom: 40px; }
.mb-5 { margin-bottom: 50px; }


/************************************************************
    Shapes around the website
*************************************************************/
	.float-shapes
	{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		font-size: 25px;
		z-index: 5;
	}

	.float-shapes .arrow-up {
		width: 0; 
	  	height: 0; 
	  	border-left: 15px solid transparent;
	  	border-right: 15px solid transparent;
	  
	  	border-bottom: 18px solid;
	}

		.float-shapes .fa-caret-up
		{
			font-size: 40px;
		}

	.float-shapes i 
	{
		position: absolute;
	}

	#header .float-shapes i:first-child { top: 10vh; left: 4%; animation: 10s floatUp1 infinite; }
	#header .float-shapes i:nth-child(2) { top: 15vh; left: 40%; transform: rotate(25deg); animation: 14s floatUp4 infinite; }
	#header .float-shapes i:nth-child(3) { top: 5vh; left: 90%; animation: 9s floatUp3 infinite; }
	#header .float-shapes i:nth-child(4) { bottom: 10vh; left: 5%; animation: 10s floatUp4 infinite; }
	#header .float-shapes i:nth-child(5) { bottom: 15vh; left: 50%; animation: 10s floatUp2 infinite; }
	#header .float-shapes i:nth-child(6) { bottom: 15vh; left: 92%; animation: 14s floatUp3 infinite; }
	#header .float-shapes i:nth-child(7) { bottom: 3vh; left: 40%; animation: 15s floatUp4 infinite; }
	#header .float-shapes i:nth-child(8) { bottom: -15vh; left: 80%; animation: 13s floatUp1 infinite; }

		
	#sec2 .float-shapes i:nth-child(1) { top: 40%; left: 5%; transform: rotate(180deg); animation: 10s floatUp4 infinite; }
	#sec2 .float-shapes i:nth-child(2) { top: 60%; left: 95%; animation: 10s floatUp3 infinite; }
	#sec2 .float-shapes i:nth-child(3) { bottom: 5%; left: 25%; animation: 10s floatUp2 infinite; }
	#sec2 .float-shapes i:nth-child(4) { bottom: 0%; left: 85%; animation: 10s floatUp1 infinite; }


	#sec3 .float-shapes i:nth-child(1) { top: 20%; left: 2%; transform: rotate(180deg); animation: 10s floatUp4 infinite; }
	#sec3 .float-shapes i:nth-child(2) { top: 30%; left: 90%; animation: 10s floatUp3 infinite; }
	#sec3 .float-shapes i:nth-child(3) { top: 50%; left: 3%; animation: 10s floatUp2 infinite; }
	#sec3 .work-steps .float-shapes i:nth-child(1) { top: 65%; left: 85%; animation: 10s floatUp1 infinite; }
	#sec3 .work-steps .float-shapes i:nth-child(2) { top: 85%; left: 2%; animation: 10s floatUp4 infinite; }

	#sec4 .float-shapes { z-index: 0; }
	#sec4 .float-shapes i:nth-child(1) { top: 20%; left: 2%; transform: rotate(180deg); animation: 10s floatUp4 infinite; }
	#sec4 .float-shapes i:nth-child(2) { top: 30%; left: 90%; animation: 10s floatUp3 infinite; }
	#sec4 .float-shapes i:nth-child(3) { bottom: 25%; left: 3%; animation: 10s floatUp2 infinite; }
	#sec4 .float-shapes i:nth-child(4) { bottom: 20%; right: 5%; animation: 10s floatUp1 infinite; }

	#sec5 .float-shapes i:nth-child(1) { top: 30%; left: 2%; transform: rotate(180deg); animation: 10s floatUp3 infinite; }
	#sec5 .float-shapes i:nth-child(2) { top: 40%; left: 90%; animation: 10s floatUp2 infinite; }
	#sec5 .float-shapes i:nth-child(3) { bottom: 15%; left: 3%; animation: 10s floatUp4 infinite; }
	#sec5 .float-shapes i:nth-child(4) { bottom: 25%; right: 8%; animation: 10s floatUp1 infinite; }

	#sec7 .float-shapes i:nth-child(1) { top: 5%; left: 7%; animation: 10s floatUp1 infinite; }
	#sec7 .float-shapes i:nth-child(2) { top: 10%; left: 60%; animation: 10s floatUp3 infinite; }
	#sec7 .float-shapes i:nth-child(3) { top: 35%; left: 86%; animation: 10s floatUp4 infinite; }
	#sec7 .float-shapes i:nth-child(4) { top: 45%; left: 45%; animation: 10s floatUp1 infinite; }
	#sec7 .float-shapes i:nth-child(5) { bottom: 35%; right: 4%; animation: 10s floatUp3 infinite; }
	#sec7 .float-shapes i:nth-child(6) { bottom: 15%; left: 5%; animation: 10s floatUp4 infinite; }


	#sec8 .float-shapes i:nth-child(1) { top: 20%; left: 4%; animation: 10s floatUp1 infinite; }
	#sec8 .float-shapes i:nth-child(2) { top: 10%; left: 60%; animation: 10s floatUp3 infinite; }
	#sec8 .float-shapes i:nth-child(3) { top: 35%; left: 86%; animation: 10s floatUp4 infinite; }
	#sec8 .float-shapes i:nth-child(4) { top: 45%; left: 45%; animation: 10s floatUp1 infinite; }
	#sec8 .float-shapes i:nth-child(5) { bottom: 35%; right: 4%; animation: 10s floatUp3 infinite; }
	#sec8 .float-shapes i:nth-child(6) { bottom: 15%; left: 5%; animation: 10s floatUp4 infinite; }
	#sec8 .float-shapes {
		z-index: -1;
	}


	@keyframes floatUp1
	{
		0% { transform: translate(0px, -30px); }
		50% { transform: translate(30px, 0px); }
		100% { transform: translate(0px, -30px); }
	}

	@keyframes floatUp2
	{
		0% { transform: translate(10px, 30px); }
		50% { transform: translate(40px, 5px); }
		100% { transform: translate(10px, 30px); }
	}


	@keyframes floatUp3
	{
		0% { transform: translate(20px, 0); }
		50% { transform: translate(60px, 0px); }
		100% { transform: translate(20px, 0); }
	}

	@keyframes floatUp4
	{
		0% { transform: translate(40px, -20px); }
		50% { transform: translate(70px, -40px); }
		100% { transform: translate(40px, -20px); }
	}

	@keyframes socialFlip
	{
		0% { transform: translateY(0); opacity:1; }
		50% { transform: translateY(1rem); opacity:0; }
		51% { transform: translateY(-1rem); opacity:0; }
		100% { transform: translateY(0); opacity:1; }
	}



.float-shapes 
{ 
	position: absolute;
}

.float-shapes .purple { color: var(--purple) }
.float-shapes .yellow { color: var(--yellow) }
.float-shapes .green { color: var(--green) }
.float-shapes .red { color: var(--red) }
.float-shapes .blue { color: var(--blue) }
.float-shapes .orange { color: var(--orange) }
.float-shapes .canary { color: var(--canary) }


/* 
 * ---------------------------------------------------------------------------------------------------------------------
 *	Header
 *----------------------------------------------------------------------------------------------------------------------
*/


/************************************************************
    Header
*************************************************************/


nav
{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30px 15%;
	position: fixed;
	z-index: 1001;
	background: transparent;
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}

nav.sticky
{
	position: fixed;
}

	nav .logo 
	{
		position: relative;
		z-index: 10;
	}

	nav .logo img
	{
		opacity: 1;
		transition: all .15s ease;

	}

	nav.sticky .logo img
	{
		opacity: 0;
	}
	nav.active .logo img
	{
		opacity: 1;
		transition-delay: .05s;
		filter: brightness(0) invert(1);
	}

	nav.sticky .scroll
	{
		display: inline-flex;
		width: 80px;
		opacity: 1;
		visibility: visible;
		position: relative;
	}

	nav .scroll
	{
		opacity: 0;
		visibility: hidden;
		position: absolute;
	}

	nav .menu .ham
	{
		width: 80px;
		height: 40px;
		position: relative;
		z-index: 10;
		cursor: pointer;
	}
		
		nav .menu .ham:hover span:nth-child(2)
		{
			width: 30px;
		}

		nav .menu .ham span:nth-child(2)
		{
			top: 19px;
    		width: 25px;
		}

		nav.active .menu .ham span:first-child
		{
			width: 35px;
			top: 17px;
			-webkit-transform: rotate(45deg);
			   -moz-transform: rotate(45deg);
			    -ms-transform: rotate(45deg);
			     -o-transform: rotate(45deg);
			        transform: rotate(45deg);
		}
		nav.active .menu .ham span:nth-child(2)
		{
			opacity: 0;
		}

		nav.active .menu .ham span:last-child
		{
			top: 17px;
			width: 35px;
			-webkit-transform: rotate(-45deg);
			   -moz-transform: rotate(-45deg);
			    -ms-transform: rotate(-45deg);
			     -o-transform: rotate(-45deg);
			        transform: rotate(-45deg);
		}

		nav.sticky .menu .ham
		{
    		position: relative;
		}
			nav .menu .ham::after
			{
				content: "";
				top: 0;
				opacity: 0;
				left: 0;
				bottom: 0;
				right: 0;
				position: absolute;
				z-index: -1;
    			border-radius: 20px;
    			transform: scale(0.5);
    			transition: all .3s cubic-bezier(.77,0,.175,1);
			}
			nav.sticky .menu .ham::after
			{
				opacity: 1;
    			border-radius: 20px;
    			backdrop-filter: blur(4px);
    			background: var(--blue);
    			transform: scale(1);
			}

		nav.sticky.active .menu .ham span
		{
			background: #fff;
		}

		nav.sticky.active .menu .ham::after
		{
			background: none;
		}


		nav .menu .ham span
		{
			width: 30px;
			height: 3px;
			display: block;
			background: #fff;
			position: absolute;
			top: 12px;
			left: 25px;
			-webkit-transition: all .3s cubic-bezier(.77,0,.175,1);
			   -moz-transition: all .3s cubic-bezier(.77,0,.175,1);
			    -ms-transition: all .3s cubic-bezier(.77,0,.175,1);
			     -o-transition: all .3s cubic-bezier(.77,0,.175,1);
			        transition: all .3s cubic-bezier(.77,0,.175,1);
		}

		nav .menu .ham span:last-child
		{
			top: 26px;
			width: 30px;
		}

	nav #main-menu
	{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		visibility: hidden;
		background: var(--dark);
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		z-index: 9;
    	transition: all .75s ease;
    	transform: translateY(-100%);
	}

	nav #main-menu > li:not(#menu-footer) 
	{
		opacity:0;
		transform: translateY(-250%);
		transition: transform .75s ease .375s, opacity .75s ease;
	}

	nav.active #main-menu
	{
		visibility: visible;
		transform: translateY(0);
	}

	nav.active #main-menu > li:not(#menu-footer) 
	{
		opacity:1;
		transform: translateY(0);
	}
	
	nav #main-menu li
	{
		padding: 10px 0;
	}

		nav #main-menu > li > a
		{
			color: #FFF;
			display: block;
		    text-transform: uppercase;
		    font-size: calc(1.75rem + ((1vw - 7.67px) * 1.1544));
		    font-weight: 800;
		    letter-spacing: 3px;
			padding: 10px 0;
			text-transform: uppercase;

			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-image: linear-gradient(90deg,var(--blue) 50%,#fff 0);
			background-size: 200% 100%;
			background-position: 100%;
			transition: all .4s cubic-bezier(0,0,.23,1);
		}
			nav #main-menu li > a:hover
			{
				background-position: 0;
				color: var(--blue);
			}

		nav #main-menu #menu-footer 
		{
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			align-content: center;
			justify-content: space-between;

			left: 0;
			bottom: 0;
			position: absolute;
			padding: 0px 15%;
		} 

		nav #main-menu #menu-footer #social ul
		{
			display: flex;
		}

			nav #main-menu #menu-footer #social ul li 
			{
				padding: 30px 20px;
				font-size: 20px;
			}

				nav #main-menu #menu-footer #social ul li:first-child
				{
					padding-left: 0px;
				}

				nav #main-menu #menu-footer #social ul li a
				{
					color: white;
					display: inline-block;
					font-size: calc(1rem + ((1vw - 7.67px) * 1.1544));
				}

				nav #main-menu #menu-footer #social ul li:hover a
				{
					color: var(--yellow);
					animation: socialFlip 250ms linear 0s 1 forwards;
				}

		nav #main-menu #menu-footer #collab
		{
			color: #fff;
			font-size: 18px;

		}

			nav #main-menu #menu-footer #collab div
			{
				padding: 10px;
			}

header
{
	width: 100%;
	position: relative;
	background-color: var(--dark);
  	clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
	-moz-clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
	-o-clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
	-ms-clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
  	z-index: 1;
  	overflow: hidden;
  	height: 110vh;
}
	
	header .float-shapes
	{
		z-index: 0;
	}

	.header-page .header-background
	{
		-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
		filter: grayscale(100%);
	}

	.header-background
	{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
		opacity: 0.5;
		text-align: right;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.header-background img
	{
		min-height: 100%;
		width: 100%;
	}

	header .wrapper
	{
		display: flex;
	  	align-items: center;
	  	height: 100vh;
	  	margin-top: 30px;
	}

	header #headerText
	{
		position: relative;
		width: 100%;
		text-align: center;
	}

		header #headerText h2
		{
			font-weight: 900;
			color: #fff;
			font-size: 60px;
			font-family: 'Gilroy', sans-serif;
			letter-spacing: 2px;
			line-height: 72px;
			margin-bottom: 40px;
		}

			header #headerText h2 span
			{
				color: var(--blue);
			}

		header #headerText #line
		{
			width: 140px;
			height: 1px;
			background-color: var(--yellow);
			position: relative;
			margin: 0 auto;
		}

		header #headerText p
		{
			width: 55%;
			font-weight: 400;
			font-size: 20px;
			color: rgba(255, 255, 255, 01);
			letter-spacing: 1px;
			line-height: 36px;
			margin: 20px auto 40px auto;
		}

		header #headerText > a
		{
			display: inline-block;
			font-weight: 900;
			font-family: 'Gilroy', sans-serif;
			color: var(--yellow);
			font-size: 20px;
			letter-spacing: 1px;
		}
		
		header #headerText > a:before
		{
			background: var(--yellow);
		}

		header #headerText #socialIcons
		{
			position: absolute;
			top: 50%;
			-webkit-transform: translateY(-50%);
			   -moz-transform: translateY(-50%);
			    -ms-transform: translateY(-50%);
			     -o-transform: translateY(-50%);
			        transform: translateY(-50%);
			right: 0;
			font-size: 18px;
		}

			header #headerText #socialIcons li
			{
				display: block;
				margin: 30px 0;
			}

			header #headerText #socialIcons li a
			{
				color: #fff;

			}

			header #headerText #socialIcons li:hover a i
			{
				color: var(--yellow);
				animation: socialFlip 250ms linear 0s 1 forwards;
			}


/* 
 * ---------------------------------------------------------------------------------------------------------------------
 *	About
 *----------------------------------------------------------------------------------------------------------------------
*/

#about 
{
	font-size: 0;
	z-index: 3;
	padding: 50px 0;
}

#about .wrapper
{
	max-width: 1140px;
}

	#about .main-title
	{
		position: relative;
	    left: -30%;
	    z-index: -15;
	} 
		.main-title
		{
			font-size: 200px;
			font-weight: 900;
			color: #eef2fd;
	    	font-family: 'Gilroy', sans-serif;
		}

	#about #aboutPhotos
	{
		width: 55%;
		top: 120px;
		display: inline-block;
		vertical-align: top;
		position: relative;
		text-align: right;
	}
	#about #aboutPhotos .aboutPhotosWrap
	{
		max-width: 700px;
		display: inline-block;
		left: -10%;
		position: relative;
	}

		#about #aboutPhotos #mainPhoto img,
		#about #aboutPhotos #secondPhoto img,
		#about #aboutPhotos #thirdPhoto img
		{	
			width: 100%;
			min-height: 100%;
		}

		#about #aboutPhotos #mainPhoto
		{
			width: 100%;
			height: 430px;
			position: relative;
			display: block;
		}

			#about #aboutPhotos #mainPhoto .main-photo-wrap
			{
				width: 100%;
				height: 100%;
				position: relative;
				overflow: hidden;
			}

			#about #aboutPhotos #mainPhoto:before
			{
				content: "";
				width: calc(100% + 35px);
				height: calc(100% + 35px);
				position: absolute;
				margin-top: -35px;
				left: -35px;
				/* background-color: var(--yellow); */
				z-index: -1;
			}

		#about #aboutPhotos #secondPhoto
		{
			width: 65%;
			height: 240px;
			display: inline-block;
			vertical-align: top;
			overflow: hidden;
			background-color: var(--yellow);
			z-index: 2;
		}

		#about #aboutPhotos #thirdPhoto
		{
			width: 35%;
			height: 240px;
			display: inline-block;
			vertical-align: top;
			overflow: hidden;
			background-color: var(--yellow);
			z-index: 3;
		}

			#about #aboutPhotos #secondPhoto img,
			#about #aboutPhotos #thirdPhoto img
			{
			}

		#about #aboutPhotos #instagramFollow
		{
			position: absolute;
			margin-top: -40px;
			left: 0;
			top: 430px;
			z-index: 1;
			display: flex;
			width: 100%;
			background: #fff;
			box-shadow: 0px 30px 40px rgba(0, 0, 0, 0.15)
		}

			#about #aboutPhotos #instagramFollow a
			{
				width: 100%;
				height: 85px;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 300;
				color: var(--blue);
				font-size: 24px;
				letter-spacing: 1px;
			}
		
			#about #aboutPhotos #instagramFollow a img
			{
				display: inline-block;
				vertical-align: middle;
				margin-right: 10px;
				max-width: 100%;
				position: relative;
				top: -2px;
			}

	#about #aboutText
	{
		width: 45%;
		display: inline-block;
		vertical-align: middle;
		padding-left: 20px;
		box-sizing: border-box;
		position: relative;
		top: -70px;
	}

		#about #aboutText .sectionTitle 
		{
			text-align: right;
			margin-bottom: 130px;
		}

			#about #aboutText .sectionTitle .quote #firstText > div
			{
				background: url(images/text_image.png) no-repeat;
			   	-webkit-background-clip: text;
		  		-webkit-text-fill-color: transparent;
			}

			#about #aboutText .sectionTitle .title
			{
				position: absolute;
			    right: -175px;
    			top: 65px;
    			-webkit-transform: rotate(90deg);
				   -moz-transform: rotate(90deg);
				    -ms-transform: rotate(90deg);
				     -o-transform: rotate(90deg);
				        transform: rotate(90deg);
				opacity: 0;
			}

		#about #aboutText .sectionTitle .quote #firstText
		{
		}

		#about #aboutText .sectionTitle .quote #middleText
		{
		}

		#about #aboutText #text
		{
			max-width: 520px;
			width: 100%;
			position: relative;
			top: 50px;
			display: inline-block;
			font-weight: 300;
			font-size: 18px;
			line-height: 40px;
			text-align: left;
		} 


/* 
 * ---------------------------------------------------------------------------------------------------------------------
 *	Services
 *----------------------------------------------------------------------------------------------------------------------
*/

#services
{
	z-index: 1;
	width: 100%;
	margin-top: -150px;
	background-color: #171528;
	background-image: url('images/services-v2.png');
	background-size: cover;
	background-position: center;
	background-position-y: bottom;
	clip-path: polygon(0% 0, 100% 20%, 100% 80%, 0% 100%);
	padding: 250px 0 250px;
}

	#services .main-title
	{
		font-size: 140px;
		font-weight: 900;
		font-family: 'Gilroy', sans-serif;
		color: var(--blue);
	}

	#services .sectionTitle .quote #firstText
	{
		color: #fff;
	} 

		#services .sectionTitle .quote #firstText > div
		{
			background: url(images/service_text.png) no-repeat;
		   	-webkit-background-clip: text;
	  		-webkit-text-fill-color: transparent;
		}

	#services .sectionTitle .quote #middleText 
	{
		color: var(--yellow);
		left: 150px;
	}
	
	#services .sectionTitle .title
	{
		position: absolute;
	    left: -175px;
		top: 65px;
		-webkit-transform: rotate(-90deg);
		   -moz-transform: rotate(-90deg);
		    -ms-transform: rotate(-90deg);
		     -o-transform: rotate(-90deg);
		        transform: rotate(-90deg);
        color: #fff;
        opacity: 0;
	} 

	#services .sectionTitle .quote #firstText
	{
		left: -100px;
		opacity: 0;
	}

	#services .sectionTitle .quote #middleText
	{
		left: -100px;
		opacity: 0;
	}

	#services #expertise
	{
		width: 100%;
		display: block;
		padding: 150px 0 150px;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-gap: 150px 8%;
	}

		#services #expertise .box 
		{
			width: 100%;
			box-sizing: border-box;
			display: block;
			position: relative;
			text-align: left;
		}

			#services #expertise .box .box-title
			{
				position: relative;
				display: flex;
				flex-direction: column;
				vertical-align: top;
				align-items: center;
			}

				#services #expertise .box .box-title h2
				{
					font-weight: 600;
					font-size: 20px;
					color: rgba(255, 255, 255, .95);
					letter-spacing: 1px;
					font-family: 'Gilroy', sans-serif;
					font-weight: 800;
					margin-top: 10px;
					text-align: center;
				}

				#services #expertise .box .box-title span
				{
					width: 120px;
					height: 120px;
					display: flex;
					justify-content: center;
					align-items: center;
					/* background: rgba(255, 255, 255, .15); */
				}
				#services #expertise .box .box-title img
				{
					max-width: 120px;
					height: 120px;
					margin-bottom: 40px;
				}

				#services #expertise .box .box-text
				{
					font-weight: 400;
					width: 100%;
					height: auto;
					font-size: 15px;
					line-height: 24px;
					color: #fff;
					display: flex;
					flex-direction: column;
					position: absolute;
					top: 50%;
					left: 50%;
					-webkit-transform: translate(-50%, -50%);
					   -moz-transform: translate(-50%, -50%);
					    -ms-transform: translate(-50%, -50%);
					     -o-transform: translate(-50%, -50%);
					        transform: translate(-50%, -50%);
					padding: 20px 30px;
					background: rgba(255, 255, 255, 0.1);
					backdrop-filter: saturate(100%) blur(20px);
					box-shadow: 0px 0px 10px 3px rgb(0 0 0 / 10%);
					border-radius:4px;
					opacity: 0;
					overflow: hidden;
					visibility: hidden;
					-webkit-transition: all .3s ease;
					   -moz-transition: all .3s ease;
					    -ms-transition: all .3s ease;
					     -o-transition: all .3s ease;
					        transition: all .3s ease;
				}

				#services #expertise .box:hover .box-text
				{
					opacity: 1;
					visibility: visible;
					height: auto;
				}

					#services #expertise .box .box-text li
					{
						width: 100%;
						padding: 5px 0;
						display: flex;
					}

					#services #expertise .box .box-text li i
					{
						font-size: 24px;
						color: var(--blue);
						margin-right: 10px;
					}


/* 
 * ---------------------------------------------------------------------------------------------------------------------
 *	Work
 *----------------------------------------------------------------------------------------------------------------------
*/

#work
{
	padding: 200px 0 120px;
	margin-top: -250px;
	font-size: 0;
	z-index: 2;
}

	#work h1.main-title
	{
		text-align: right;
		text-transform: uppercase;
		font-size: 120px;
	}

	#work .drag
	{
		position: relative;
		display: block;
		text-align: center;
		margin: 50px 0;
		font-size: 24px;
		color: rgba(0, 0, 0, .5);
	}

		#work .drag i
		{
			position: absolute;
			top: 3px;
			left: 51%;
			color: #ccc;
		}

		#work .drag span:nth-child(7)
		{
			background-color: #fff;
		}
		#work .drag span
		{
			width: 6px;
			height: 6px;
			display: inline-block;
			border-radius: 100%;
			background: #ddd;
			margin: 0 5px;
		}

		#work .drag p
		{
			margin: 10px 0 0;
			font-size: 14px;
		}

	#work .carousel
	{
		font-size: 12px;
		text-align: center;
	}
	#work .carousel:hover
	{
		cursor: drag;
	}

		#work .carousel .project
		{
			display: inline-block;
			margin: 0 50px;
			outline: none;
			box-sizing: border-box;
			padding: 0 20px;
			opacity: 1;
			transition: all 0.5s cubic-bezier(0.86, 0, 0.07, 1);
			transition-delay: 0.3s;
		}

			#work .carousel .project .pr-work
			{
				display: block;
				box-sizing: border-box;
				width: 100%;
				font-size: 13px;
				font-weight: 600;
				text-transform: uppercase;
				position: relative;
				text-align: left;
				color: #fff;
				padding: 20px 30px 20px 30px;
			}

				#work .carousel .project .pr-work span
				{
					position: relative;
					padding: 10px 10px;
					display: inline-block;
					background: rgba(255, 255, 255, .2);
					margin: 0 5px;
					border-radius: 3px;
				}

				#work .carousel .project .pr-work span.tooltip:hover::before,
				#work .carousel .project .pr-work span.tooltip:hover::after
				{
					opacity: 1;
					visibility: visible;
				}

				#work .carousel .project .pr-work span.tooltip::before
				{
					content: '';
					position: absolute;
					top: 28px;
					left: 50%;
					-webkit-transform: translateX(-50%);
					   -moz-transform: translateX(-50%);
					    -ms-transform: translateX(-50%);
					     -o-transform: translateX(-50%);
					        transform: translateX(-50%);
					width: 0; 
					height: 0; 
					border-left: 7px solid transparent;
					border-right: 7px solid transparent;
					
					border-bottom: 7px solid #000;
					opacity: 0;
					visibility: hidden;
					-webkit-transition: all .4s ease;
					   -moz-transition: all .4s ease;
					    -ms-transition: all .4s ease;
					     -o-transition: all .4s ease;
					        transition: all .4s ease;
				}
				#work .carousel .project .pr-work span.tooltip::after
				{
					position: absolute;
					content: attr(data-target);
					white-space: nowrap;
					-webkit-transform: translateX(-50%);
					   -moz-transform: translateX(-50%);
					    -ms-transform: translateX(-50%);
					     -o-transform: translateX(-50%);
					        transform: translateX(-50%);
					padding: 10px 10px;
					color: #fff;
					background: #000;
					font-size: 12px;
					top: 35px;
					left: 50%;
					display: inline-block;
					z-index: 1;
					opacity: 0;
					visibility: hidden;
					-webkit-transition: all .4s ease;
					   -moz-transition: all .4s ease;
					    -ms-transition: all .4s ease;
					     -o-transition: all .4s ease;
					        transition: all .4s ease;
				}

			#work .carousel .project .pr-work:before
			{
				content: "";
				position: absolute;
				width: 100%;
				height: 240px;
				left: 0;
				top: 0;
				z-index: -1;
				transition: all 0.8s cubic-bezier(0.86, 0, 0.07, 1);
				transition-delay: 0.3s;
			}

			#work .carousel .project.eidoo .pr-work:before { background-color: #20c39f;	}
			#work .carousel .project.ekon .pr-work:before { background-color: #dbbe62;	}
			#work .carousel .project.nexex .pr-work:before { background-color: #03aeb4;	}
			#work .carousel .project.cryptonomist .pr-work:before { background-color: #53225d;	}
			#work .carousel .project.icoengine .pr-work:before { background-color: #202c6b;	}
			#work .carousel .project.poseidon .pr-work:before { background-color: #0080ff;	}
			#work .carousel .project.heimdall .pr-work:before { background-color: #ffe22b;	}
			#work .carousel .project.weather4all .pr-work:before { background-color: #0e65a4;	}
			#work .carousel .project.climedo .pr-work:before { background-color: #17a2ac;	}
			#work .carousel .project.outbit .pr-work:before { background-color: #f4c000;	}
			#work .carousel .project.agrio .pr-work:before { background-color: #8ebc58;	}

			#work .carousel .project .pr-wrap
			{
				display: block;
				position: relative;
				width: 100%;
				font-size: 0;
			}
	
				#work .carousel .project .pr-wrap .pr-mac
				{
					width: 60%;
					position: relative;
					height: 100%;
					display: inline-block;
					vertical-align: top;
					left: 0;
					transition: all 0.5s cubic-bezier(0.86, 0, 0.07, 1);
					transition-delay: 0.6s;
				}

				#work .carousel .project.slick-active .pr-wrap .pr-mac
				{
					left: 10px;
					transition: all 0.5s cubic-bezier(0.86, 0, 0.07, 1);
					transition-delay: 0.6s;
				}

					#work .carousel .project .pr-wrap .pr-mac img
					{
						max-width: 100%;
					}

				#work .carousel .project .pr-wrap .pr-info
				{
					width: 40%;
					right: 0;
					display: inline-block;
					vertical-align: top;
					z-index: 3;
					text-align: right;
				}

					#work .carousel .project .pr-wrap .pr-info h2
					{
						font-size: 60px;
						font-weight: 600;
						text-transform: uppercase;
						color: #fff;
						text-align: left;
						position: relative;
						left: -10%;
						font-weight: 900;
						font-family: 'Girloy', sans-serif;
						line-height: 60px;
						text-shadow: 0px 3px 5px rgba(0, 0, 0, .1);
						transition: all 0.5s cubic-bezier(0.86, 0, 0.07, 1);
					}

					#work .carousel .project.slick-active .pr-wrap .pr-info h2
					{
						left: -20%;
						transition: all 0.5s cubic-bezier(0.86, 0, 0.07, 1);
						transition-delay: 0.6s;
					}

					#work .carousel .project.cryptonomist .pr-wrap .pr-info h2
					{
						font-size: 40px;
					}

					#work .carousel .project .pr-wrap .pr-info a
					{
						font-size: 16px;
						font-weight: 600;
						color: #fff;
						text-transform: uppercase;
						text-align: right;
						display: block;
						margin-top: 20px;
						padding-right: 20px;
						outline: none;
					}

						#work .carousel .project .pr-wrap .pr-info a i
						{
							margin-left: 5px;
							transition: all 0.5s cubic-bezier(0.86, 0, 0.07, 1);
						}

					#work .carousel .project .pr-wrap .pr-info a:hover i
					{
						margin-left: 15px;
						transition: all 0.5s cubic-bezier(0.86, 0, 0.07, 1);
					}

					#work .carousel .project .pr-wrap .pr-info p
					{
						position: relative;
						display: inline-block;
						font-size: 14px;
						line-height: 24px;
						text-align: left;
						top: 30px;
						max-width: 360px;
						margin-right: 20px;
					}



/* 
 * ---------------------------------------------------------------------------------------------------------------------
 *	Join Our Team
 *----------------------------------------------------------------------------------------------------------------------
*/

#join-our-team
{
	padding: 0px 0 120px;
	margin-top: 0;
	background: url(images/projects_bg_4k.png) center bottom no-repeat;
	background-size: 100%;
	font-size: 0;
	overflow: hidden;
}

	#join-our-team h1.main-title
	{
		text-transform: uppercase;
		text-align: left;
		font-size: 120px;
		margin-bottom: 70px;
	}

		.button
		{
			position: relative;
			display: inline-block;
			font-size: 18px;
			font-weight: 600;
			color: var(--blue);
			text-transform: uppercase;
		}
		.button:before
		{
			content: '';
			position: absolute;
			top: 20px;
			left: 0;
			width: 0%;
			height: 3px;
			background: var(--blue);
			transition: all 0.3s ease;
		}
		.button:hover:before
		{
			width: 100%;
			transition: all 0.3s ease;
		}
		.button:focus
		{
			color: var(--blue);
		}

	#join-our-team .item
	{
		padding: 0 10%;
	}

		#join-our-team .item .image 
		{
			width: 50%;
			display: inline-block;
			vertical-align: middle;
			position: relative;
			z-index: 100;
		}

			#join-our-team .item .image img
			{
				position: relative;
				max-width: 500px;
				box-shadow: 0px 0 0px 20px rgba(0, 0, 0, .15);
			}

		#join-our-team .item .text
		{
			width: 50%;
			display: inline-block;
			vertical-align: middle;
			padding-left: 85px;
			box-sizing: border-box;
			position: relative;
		} 

			#join-our-team .item .text h2
			{
				font-size: 36px;
				font-weight: 600;
				letter-spacing: 1px;
				color: var(--blue);
				margin-bottom: 65px;
			}

			#join-our-team .item .text p
			{
				font-size: 18px;
				max-width: 500px;
				font-weight: 300;
				line-height: 36px;
				letter-spacing: 1px;
				color: var(--dark);
				margin-bottom: 65px;
				text-align: justify;
			}



/* 
 * ---------------------------------------------------------------------------------------------------------------------
 *	Contact
 *----------------------------------------------------------------------------------------------------------------------
*/

#contact 
{
	font-size: 0;
	display: block;
	padding: 100px 0 0;
}

	#contact .main-title
	{
		font-size: 100px;	
		margin-bottom: 70px;
		text-align: left;
	}

	#contact .leftSide,
	#contact .rightSide
	{
		width: 50%;
		position: relative;
		display: inline-block;
		vertical-align: top;
		box-sizing: border-box;
	}

	#contact .leftSide 
	{
		padding: 0 10%;
	}

	#contact .rightSide
	{
		padding: 0 10% 0 0;
	}

		#contact .rightSide p
		{
			width: 100%;
			max-width: 540px;
			line-height: 36px;
			font-weight: 300;
			color: var(--dark);
			font-size: 18px;
			text-align: right;
			position: relative;
			display: inline-block;
			margin-bottom: 20px;
		}

	#contact .leftSide,
	#contact .rightSide
	{
		font-size: 14px;
		position: relative;
	}
		#contact .contact-info
		{
			width: 100%;
			line-height: 24px;
			font-weight: 300;
			color: var(--dark);
			font-size: 18px;
			text-align: right;
			position: relative;
			margin-bottom: 50px;
		}
			#contact .leftSide .contact-info 
			{
				text-align: left;
			}
			#contact .contact-info span
			{
				text-indent: 100px;
				display: block;
			}
			#contact .contact-info i
			{
				font-size: 12px;
				color: #ccc;
				margin-right: 10px;
			}
			#contact .contact-info b
			{
				font-weight: 500;
			}
			#contact .contact-info li
			{
				margin: 10px 0;
			}

		#contact .rightSide div.wpcf7 
		{
			text-align: right;
			font-size: 14px;
		}

			#contact .rightSide div.wpcf7 span.your-name,
			#contact .rightSide div.wpcf7 span.your-message,
			#contact .rightSide div.wpcf7 span.your-email
			{
				position: relative;
				display: block;
				margin-bottom: 50px;
			}

			#contact .rightSide div.wpcf7 input[type=text], 
			#contact .rightSide div.wpcf7 input[type=email] 
			{
				width: 100%;
				padding: 15px 20px 10px 0;
				position: relative;
				display: block;
				border: none;
				border-bottom: 1px solid #b7bec2;
				font-weight: 400;
				background: none;
				outline: none;
				color: var(--blue);
				box-sizing: border-box;
				-webkit-appearance: none;
			    -moz-appearance: none;
			}

				#contact .rightSide div.wpcf7 input[type=text]::-webkit-input-placeholder, #contact .rightSide div.wpcf7 input[type=email]::-webkit-input-placeholder, #contact .rightSide div.wpcf7 textarea::-webkit-input-placeholder { color: #b7bec2; font-weight: 300; }
				#contact .rightSide div.wpcf7 input[type=text]::-moz-input-placeholder, #contact .rightSide div.wpcf7 input[type=email]::-moz-input-placeholder, #contact .rightSide div.wpcf7 textarea::-moz-input-placeholder { color: #b7bec2; font-weight: 300; }
				#contact .rightSide div.wpcf7 input[type=text]::-ms-input-placeholder, #contact .rightSide div.wpcf7 input[type=email]::-ms-input-placeholder, #contact .rightSide div.wpcf7 textarea::-ms-input-placeholder { color: #b7bec2; font-weight: 300; }
				#contact .rightSide div.wpcf7 input[type=text]::-o-input-placeholder, #contact .rightSide div.wpcf7 input[type=email]::-o-input-placeholder, #contact .rightSide div.wpcf7 textarea::-o-input-placeholder { color: #b7bec2; font-weight: 300; }

			#contact .rightSide div.wpcf7 select
			{
				display: none;
				-webkit-appearance: none;
			    -moz-appearance: none;
			}

			#contact .rightSide div.wpcf7 textarea
			{
			    max-width: 100%;
    			min-width: 100%;
   			    height: 45px;
				padding: 15px 20px 10px 0;
				position: relative;
				display: block;
				border: none;
				border-bottom: 1px solid #b7bec2;
				font-weight: 600;
				margin-bottom: 50px;
				line-height: 30px;
				background: none;
				outline: none;
				color: var(--blue);
				box-sizing: border-box;
			    resize: none;
			    font-family: 'Avenir', sans-serif;
			    font-weight: 300;
			    overflow: hidden;
			    -webkit-appearance: none;
			    -moz-appearance: none;
			}

			#contact .rightSide div.wpcf7 .button
			{
				background: none;
				position: relative;
				display: block;
				font-weight: 400;
				font-size: 14px;
				letter-spacing: 1px;
				outline: none;
				box-shadow: none;
				border: none;
				padding: 15px 23px;
				background: var(--blue);
				color: #fff;
				border-radius: 3px;
				box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.1);
				-webkit-transition: all .3s ease-in-out;
				   -moz-transition: all .3s ease-in-out;
				    -ms-transition: all .3s ease-in-out;
				     -o-transition: all .3s ease-in-out;
				        transition: all .3s ease-in-out;
		       -webkit-appearance: none;
			    -moz-appearance: none;
			}

			#contact .rightSide div.wpcf7 .button:hover
			{
				cursor: pointer;
				background: #0b54cc;
				-webkit-transition: all .3s ease-in-out;
				   -moz-transition: all .3s ease-in-out;
				    -ms-transition: all .3s ease-in-out;
				     -o-transition: all .3s ease-in-out;
				        transition: all .3s ease-in-out;
			}

			span.wpcf7-not-valid-tip
			{
				position: absolute;
			    top: 55px;
			    font-weight: 300;
			    color: #e65757;
			}

			div.wpcf7-validation-errors
			{
				display: none;
			}

			div.wpcf7-response-output
			{
				padding: 15px 20px !important;
			    color: #fff;
			    font-size: 14px !important;
			    display: inline-block;
			    border: none !important;
			    margin: 0 0 0 0 !important;
			    width:90%;
			    text-align:center;
			}

			div.wpcf7-validation-errors 
			{
				background: #e65757;
			}

			div.wpcf7-mail-sent-ok
			{
				background: #2ecc66;
			}

	#contact .leftSide .map
	{
		width: 100%;
		height: 400px;
		left: 0;
		top: 0;
		position: relative;
		opacity: 1;
	} 
		#contact .leftSide .map #map
		{
			width: 100%;
			height: 100%;
		}

	#copyright 
	{
		display:block;
		padding: 50px 40px;
		box-sizing: border-box;
		line-height: 30px;
	}

		#copyright .social-icons
		{
			text-align: center;
			display: block;
			margin: 0 0 15px 0;
		}

			#copyright .social-icons li
			{
				display: inline-block;
				margin: 0 5px;
			}

			#copyright .social-icons li a
			{
				color: var(--dark);
				padding: 10px;
				transition: all 0.3s ease-in-out;
			}

			#copyright .social-icons li a:hover { transition: all 0.3s ease-in-out; }
			#copyright .social-icons li a.facebook:hover { color: #4267b2; }
			#copyright .social-icons li a.twitter:hover { color: #38A1F3; }
			#copyright .social-icons li a.instagram:hover { color: #da3f66; }
			#copyright .social-icons li a.linkedin:hover { color: #0077B5; }

		#copyright p
		{
			font-weight: 300;
			font-size: 14px;
			color: var(--dark);
			text-align: center;
		}



/* 
 * ---------------------------------------------------------------------------------------------------------------------
 *	Jobs Page
 *----------------------------------------------------------------------------------------------------------------------
*/

.jobs .wrapper
{
}

.header-background
{
	z-index: 0;
}
.header-page
{
	width: 100%;
	position: relative;
	overflow: hidden;
	background: var(--blue);
	padding: 200px 0 100px;
}
	.header-page .header-background img
	{
		top: unset;
		bottom: 0;
	}

	.header-page .wrapper
	{
		text-align: center;
	}

	.title span
	{
	    font-size: 22px;
	    font-weight: 600;
	    color: #fff;
	    position: absolute;
	    top: -20px;
	    left: 0;
	}

	.title
	{
		position: relative;
		font-size: 80px;
		font-weight: 600;
		color: #fff;
		text-align: left;
		display: inline;
		text-transform: uppercase;
	}

	.subtitle,
	.subtitle a
	{
		font-size: 18px;
		text-align: center;
		color: rgba(255, 255, 255, 0.9);
		margin-top: 40px;
		font-weight: 300;
		z-index: 99;
		line-height: 30px;
		max-width: 900px;
		margin: 40px auto 0;
	}

		.subtitle span
		{
			position: relative;
			display: inline-block;
			vertical-align: top;
			top: 7px;
			margin: 0 15px;
			width: 1px;
			height: 15px;
			background: rgba(255, 255, 255, .25);
		}


/* 
 * ---------------------------------------------------------------------------------------------------------------------
 *	Jobs
 *----------------------------------------------------------------------------------------------------------------------
*/

.jobs
{
}

	.all-jobs .main-title
	{
		padding-top: 50px;
	}

	.job-wrapper
	{
		padding-left: 10%;
	}

	.jobs .main-title
	{
		color: #b2c0c7;
		text-transform: uppercase;
		font-size: 100px;
	}

	.jobs .job_listings
	{
		margin: 50px 0 !important;
	}

		.jobs .job_listings li .position h3
		{
			font-size: 20px !important;
			text-transform: uppercase;
			font-weight: 600;
			color: var(--blue);
			margin-bottom: 20px !important;
		}

		.jobs .job_listings li .company_logo
		{
			display: none;
		}

		.jobs .job_listings li .position .company
		{
			font-size: 16px;
			line-height: 30px;
		}
		.jobs .job_listings li .position .company strong
		{
			display: none;
		}

		ul.job_listings li.job_listing a div.position .company .tagline
		{
			margin-left: 0 !important;
		}

		ul.job_listings li.job_listing a div.position
		{
			padding: 0 !important;
		}

		.single_job_listing .meta .full-time
		{
			display: none;
			background-color: var(--blue) !important;
			font-size: 14px;
			padding: 10px;
			border-radius: 50px;
		}

		.single_job_listing .meta .location
		{
			display: none;
		}
		.single_job_listing .meta .location a
		{
			color: #333;
			font-weight: 400;
		}

		.jobs .single_job_listing .job-listing-meta .date-posted,
		.jobs .single_job_listing .company
		{
			display: none;
		}

	.single_job_listing .application
	{
		text-align: center;
	}

		.single_job_listing .job_description
		{
			margin: 0 0 80px !important;
		}

		.single_job_listing .application .application_button
		{
			background: var(--blue);
			padding: 18px 35px !important;
			border: none;
			border-radius: 50px;
			color: #fff;
			font-weight: 600;
			font-size: 14px !important;
			display: none !important;
		}

		.single_job_listing .application .application_details
		{
			display: none !important;
		}



/* 
 * ---------------------------------------------------------------------------------------------------------------------
 *	Jobs Single Job
 *----------------------------------------------------------------------------------------------------------------------
*/

div.job_listings
{
	margin: 0 !important;
}

.jobs.single-jobs
{
	font-size: 0px;
	background: #fff;
}

	.jobs .left-side
	{
		width: 55%;
		padding: 100px 50px 0 0;
		box-sizing: border-box;
	}

	.jobs .left-side,
	.jobs .right-side
	{
		position: relative;
		display: table-cell;
		vertical-align: top;
		font-size: 16px;
	}

		.left-side p:first-child strong
		{
			margin-top: 0;
		}

		.left-side p b
		{
			font-weight: 600;
		}

		.left-side p strong
		{
			display: block;
			font-weight: 600;
			text-transform: uppercase;
			font-size: 22px;
			margin-top: 40px;
		}

		.left-side span
		{
			font-weight: unset !important;
		}
		.left-side p
		{
			max-width: 700px;
			font-size: 17px;
			font-weight: 300;
			color: #38486d;
			line-height: 30px;
			margin-bottom: 20px;
		}

		.left-side ul 
		{
			margin-bottom: 30px;
			list-style: square;
		}

			.left-side ul li
			{
				max-width: 700px;
				font-size: 17px;
				line-height: 24px;
				font-weight: 300;
				color: #38486d;
				margin-left: 30px;
			}

	.jobs .right-side
	{
		width: 45%;
		padding: 100px;
		background: #07122b;
		box-sizing: border-box;
		overflow: hidden;
	}

		.jobs .right-side .header-background img
		{
			opacity: .5;
			top: unset;
			bottom: 0;
		}

		.jobs .right-side h2
		{
			margin-bottom: 50px;
			font-size: 20px;
			color: rgba(255, 255, 255, 1);
			font-weight: 400;
			text-transform: uppercase;
			line-height: 30px;
			text-align: center;
		}

			.jobs .right-side h2 span
			{
				color: var(--yellow);
				text-transform: uppercase;
				font-weight: 600;
			}

	.jobs .wpcf7-form
	{
		display: block;
		font-size: 0;
	}

		.jobs .wpcf7-form .col-6
		{
			width: calc(50% - 10px);
			position: relative;
			display: inline-block;
			vertical-align: middle;
			box-sizing: border-box;
			margin-bottom: 40px;
		}

		.jobs .wpcf7-form .col-6:nth-child(even)
		{
			margin-right: 10px;
		}
		.jobs .wpcf7-form .col-6:nth-child(odd)
		{
			margin-left: 10px;
		}

		.jobs .wpcf7-form .col-12
		{
			width: 100%;
			position: relative;
			display: block;
			margin-bottom: 30px;
		}
		.jobs .wpcf7-form .col-12:last-child
		{
			margin-bottom: 0 !important;
		}

			.jobs .wpcf7-form input[type='text']::-webkit-input-placeholder
			{
				color: #4d5a7b;
				font-weight: 300;
			}
			.jobs .wpcf7-form input[type='number']::-webkit-input-placeholder
			{
				color: #4d5a7b;
				font-weight: 300;
			}
			.jobs .wpcf7-form input[type='email']::-webkit-input-placeholder
			{
				color: #4d5a7b;
				font-weight: 300;
			}
			.jobs .wpcf7-form input[type='date']::-webkit-input-placeholder
			{
				color: #4d5a7b;
				font-weight: 300;
			}

			.jobs .wpcf7-form input:focus
			{
				border-bottom: 1px solid var(--yellow);
			}

			.jobs .col-12.uploader:after
			{
				display: none;
			}

			.jobs .col-6:after,
			.jobs .col-12:after
			{
				content: "";
				position: absolute;
				bottom: 0;
				left: 0;
				width: 0;
				height: 3px;
				background: var(--yellow);
				-webkit-transition: all .4s cubic-bezier(0.86, 0, 0.07, 1);
				   -moz-transition: all .4s cubic-bezier(0.86, 0, 0.07, 1);
				    -ms-transition: all .4s cubic-bezier(0.86, 0, 0.07, 1);
				     -o-transition: all .4s cubic-bezier(0.86, 0, 0.07, 1);
				        transition: all .4s cubic-bezier(0.86, 0, 0.07, 1);
			}

			.jobs .col-12.uploader.focus .upload
			{
				color: var(--yellow);
				font-weight: 600;
				border: 1px dashed var(--yellow);
				-webkit-transition: all .4s cubic-bezier(0.86, 0, 0.07, 1);
				   -moz-transition: all .4s cubic-bezier(0.86, 0, 0.07, 1);
				    -ms-transition: all .4s cubic-bezier(0.86, 0, 0.07, 1);
				     -o-transition: all .4s cubic-bezier(0.86, 0, 0.07, 1);
				        transition: all .4s cubic-bezier(0.86, 0, 0.07, 1);
			}
			.jobs .col-6.focus:after,
			.jobs .col-12.focus:after
			{
				width: 100%;
				-webkit-transition: all .4s cubic-bezier(0.86, 0, 0.07, 1);
				   -moz-transition: all .4s cubic-bezier(0.86, 0, 0.07, 1);
				    -ms-transition: all .4s cubic-bezier(0.86, 0, 0.07, 1);
				     -o-transition: all .4s cubic-bezier(0.86, 0, 0.07, 1);
				        transition: all .4s cubic-bezier(0.86, 0, 0.07, 1);
			}

			.jobs .wpcf7-form input[type='text'],
			.jobs .wpcf7-form input[type='number'],
			.jobs .wpcf7-form input[type='email'],
			.jobs .wpcf7-form input[type='date']
			{
				width: 100%;
			    padding: 15px 20px 10px 0;
			    position: relative;
			    display: block;
			    border: none;
			    border-bottom: 1px solid #344161;
			    font-weight: 400;
			    letter-spacing: 0.5px;
			    font-size: 13px;
			    font-family: 'Avenir';
			    background: none;
			    outline: none;
			    color: var(--yellow);
			    box-sizing: border-box;
				-webkit-appearance: none;
			    -moz-appearance: none;
			}

			input::-webkit-outer-spin-button,
			input::-webkit-inner-spin-button {
			    -webkit-appearance: none;
			    margin: 0;
			}

			input[type=number] {
			    -moz-appearance:textfield;
			}

			.jobs .wpcf7-form .col-12 textarea::-webkit-input-placeholder
			{
				color: #4d5a7b;
				font-weight: 300;
			}

			.jobs .wpcf7-form .col-12 textarea
			{
				max-width: 100%;
			    min-width: 100%;
			    height: 45px;
			    padding: 15px 20px 10px 0;
			    position: relative;
			    display: block;
			    border: none;
			    border-bottom: 1px solid #344161;
			    margin-bottom: 50px;
			    line-height: 30px;
			    background: none;
			    font-family: 'Avenir';
			    font-weight: 600;
			    font-size: 13px;
			    outline: none;
			    color: var(--yellow);
			    box-sizing: border-box;
			    resize: none;
			    overflow: hidden;
			}

			.jobs .wpcf7-form .col-12 .wpcf7-submit
			{
				background: var(--blue);
				padding: 18px 35px !important;
				border: none;
				color: #fff;
				width: 100%;
				text-transform: uppercase;
				font-weight: 600;
				display: inline-block;
				font-size: 18px !important;
				box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.1);
				-webkit-transition: all .3s ease-in-out;
				   -moz-transition: all .3s ease-in-out;
				    -ms-transition: all .3s ease-in-out;
				     -o-transition: all .3s ease-in-out;
				        transition: all .3s ease-in-out;
			}
			.jobs .wpcf7-form .col-12 .wpcf7-submit:hover
			{
				background: #0b54cc;
				cursor: pointer;
				-webkit-transition: all .3s ease-in-out;
				   -moz-transition: all .3s ease-in-out;
				    -ms-transition: all .3s ease-in-out;
				     -o-transition: all .3s ease-in-out;
				        transition: all .3s ease-in-out;
			}
			.jobs .wpcf7-form .col-12 .wpcf7-submit:focus
			{
				outline: none;
			}

			.jobs .wpcf7-form .col-12 input[type="file"]
			{
				width: 100%;
				height: 50px;
				opacity: 0;
				z-index: 1;
				position: relative;
			}

			.jobs .wpcf7-form .col-12 .upload
			{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 50px;
				background: none;
				border: 1px dashed #94a1c1;
				z-index: 0;
		    	font-size: 14px;
				text-align: center;
				line-height: 50px;
				color: #94a1c1;
			}

	.wpcf7-form-control-wrap
	{
		display: block;
	}

	span.wpcf7-not-valid-tip
	{
		font-size: 13px !important;
		font-weight: 300 !important;
	}

.rp4wp-related-job_listing>ul li.job_listing a, .rp4wp-related-job_listing>ul li.no_job_listings_found a, ul.job_listings li.job_listing a, ul.job_listings li.no_job_listings_found a
{
	padding: 2em 1em 2em 1em !important;
}

.offers
{
	background: #f0f5f8;
	padding: 120px 0 0;
}
	.offers .wrapper
	{
		/*max-width: 1140px;*/
	}
	.offers .main-title
	{
		color: #b2c0c7;
		text-transform: uppercase;
		font-size: 80px;
		padding: 0 0 80px 0;
	}
	#features
	{
		font-size: 0;
		perspective: 1000;
	}
		#features li
		{
			width: 33.333%;
			height: 100%;
			text-align: center;
			box-sizing: border-box;
			margin: 40px 0;
			display: inline-block;
			vertical-align: top;
			position: relative;
			 filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.15));
		}

		#features li .features_wrap
		{
			position: relative;
			width: 80%;
			max-width: 400px;
			display: block;
			margin: 0 auto; 
			background: #fff;
			padding: 35px 40px;
			box-sizing: border-box;
			z-index: 2;
			min-height: 285px;
		}

		#features li .shape-one
		{
			clip-path: polygon(15% 0%, 93% 0, 100% 100%, 0% 100%);
			-webkit-clip-path: polygon(15% 0%, 93% 0, 100% 100%, 0% 100%);
			-moz-clip-path: polygon(15% 0%, 93% 0, 100% 100%, 0% 100%);
			-o-clip-path: polygon(15% 0%, 93% 0, 100% 100%, 0% 100%);
			-ms-clip-path: polygon(15% 0%, 93% 0, 100% 100%, 0% 100%);
		}

		#features li .shape-two
		{
			clip-path: polygon(7% 100%, 85% 100%, 100% 0, 0% 0%);
			-webkit-clip-path: polygon(7% 100%, 85% 100%, 100% 0, 0% 0%);
			-moz-clip-path: polygon(7% 100%, 85% 100%, 100% 0, 0% 0%);
			-o-clip-path: polygon(7% 100%, 85% 100%, 100% 0, 0% 0%);
			-ms-clip-path: polygon(7% 100%, 85% 100%, 100% 0, 0% 0%);
		}

		#features li .shape-three
		{
			clip-path: polygon(0% 100%, 100% 100%, 93% 0, 15% 0%);
			-webkit-clip-path: polygon(0% 100%, 100% 100%, 93% 0, 15% 0%);
			-moz-clip-path: polygon(0% 100%, 100% 100%, 93% 0, 15% 0%);
			-o-clip-path: polygon(0% 100%, 100% 100%, 93% 0, 15% 0%);
			-ms-clip-path: polygon(0% 100%, 100% 100%, 93% 0, 15% 0%);
		}

		#features li .shape-four
		{
			clip-path: polygon(0 0%, 100% 0, 93% 100%, 13% 100%);
			-webkit-clip-path: polygon(0 0%, 100% 0, 93% 100%, 13% 100%);
			-moz-clip-path: polygon(0 0%, 100% 0, 93% 100%, 13% 100%);
			-o-clip-path: polygon(0 0%, 100% 0, 93% 100%, 13% 100%);
			-ms-clip-path: polygon(0 0%, 100% 0, 93% 100%, 13% 100%);
		}

		#features li .shape-five
		{
			clip-path: polygon(0% 100%, 100% 100%, 85% 0, 7% 0%);
			-webkit-clip-path: polygon(0% 100%, 100% 100%, 85% 0, 7% 0%);
			-moz-clip-path: polygon(0% 100%, 100% 100%, 85% 0, 7% 0%);
			-o-clip-path: polygon(0% 100%, 100% 100%, 85% 0, 7% 0%);
			-ms-clip-path: polygon(0% 100%, 100% 100%, 85% 0, 7% 0%);
		}

		#features li .shape-six
		{
			clip-path: polygon(15% 100%, 93% 100%, 100% 0, 0% 0%);
			-webkit-clip-path: polygon(15% 100%, 93% 100%, 100% 0, 0% 0%);
			-moz-clip-path: polygon(15% 100%, 93% 100%, 100% 0, 0% 0%);
			-o-clip-path: polygon(15% 100%, 93% 100%, 100% 0, 0% 0%);
			-ms-clip-path: polygon(15% 100%, 93% 100%, 100% 0, 0% 0%);
		}

			#features li .features_wrap img {
				width: 64px;
			}

			#features li .features_wrap h2 
			{
				font-size: 18px;
				font-weight: 600;
				color: #000;
				margin-top: 40px;
				letter-spacing: 0.5px;
				text-transform: uppercase;
			}

			#features li .features_wrap h2.blue { color: #10b9e4; } 
			#features li .features_wrap h2.green { color: #35d590; } 
			#features li .features_wrap h2.orange { color: #f0a024; } 
			#features li .features_wrap h2.orange-second { color: #f18568; } 
			#features li .features_wrap h2.purple { color: #263890; } 
			#features li .features_wrap h2.blue-second { color: #0b8edc; } 
			#features li .features_wrap h2.blue-third { color: #273a98; } 
			#features li .features_wrap h2.yellow { color: #adaa83; } 
			#features li .features_wrap h2.dark { color: #5f5f5c; } 

			#features li .features_wrap p 
			{
				max-width: 285px;
				margin: 20px auto 0;
				font-size: 14px;
				font-weight: 300;
				color: #6a7980;
				line-height: 24px;
				letter-spacing: 0.5px;
			}

/* Footer */
footer
{
	padding: 50px 0 20px;
	background: var(--dark);
}
	
	footer .logo
	{
		max-width: 130px;
	}

	footer p
	{
		font-weight: 400;
		color: #fff;
		font-size: 16px;
		line-height: 30px;
	}

	footer h3
	{
		font-size: 22px !important;
		font-weight: 700 !important;
		font-family: 'Gilroy', sans-serif;
		color: var(--blue);
		line-height: 70px !important;
	}

	footer ul
	{
		display: block;
	}
		
		footer ul li
		{
			display: flex;
			align-items: start;
			padding: 5px 30px 5px 0;
			color: #fff;
			line-height: 30px;
			font-weight: 400;
		}

		footer ul li:first-child
		{
			padding-top: 0px;
		}
		
			footer ul li span
			{
				position: relative;
				color: rgba(255, 255, 255, .3);
				font-size: 15px;
				margin-right: 10px;
				max-width: 15px;
				min-width: 15px;
			}

		footer ul li a
		{
			height: 100%;
			display: inline-flex;
			color: #fff;
			font-weight: 400;
			-webkit-transition: all .3s ease;
			   -moz-transition: all .3s ease;
			    -ms-transition: all .3s ease;
			     -o-transition: all .3s ease;
			        transition: all .3s ease;
		}

		footer ul li a:hover
		{
			color: var(--yellow);
		}

		footer #copyrights
		{
			margin-top: 40px;
			padding-top: 20px;
			border-top: 1px solid rgba(255, 255, 255, .2);
		}

		footer #copyrights ul li, 
		footer #copyrights p
		{
			font-size: 14px;
			line-height: 16px;
		}

		footer #copyrights ul
		{
			margin: 0px;
			display: flex;
		}

		footer #copyrights ul li
		{
			display: list-item;
			padding: 0px 15px;
			margin: 5px 0px;
		}

		footer #copyrights .text-muted
		{
			padding: 5px 0px;
		}

		footer #copyrights #legal ul li
		{
			border-right: 1px solid white;
		}

		footer #copyrights ul li:first-child
		{
			padding: 0px 15px 0px 0px;
		}

		footer #copyrights ul li:last-child
		{
			padding: 0px 0px 0px 15px;
		}

		footer #copyrights #legal ul li:last-child
		{
			border-right: none;
		}

		footer #copyrights #social ul li
		{
			font-size: 16px;
		}

		footer #copyrights #social ul li:hover a 
		{
			color: var(--yellow);
			animation: socialFlip 250ms linear 0s 1 forwards;
		}

		footer .row,
		footer .col-lg-3,
		footer .col-xs-4
		{
			padding: 0px;
			margin: 0px;
		}

		footer .col-xs-12 
		{
			padding-left: 0px;
		}


/* Page Contact */
.page-contact
{
	padding: 80px 0;
}

	.page-contact .address-info
	{

	}

		.page-contact h2
		{
			font-size: 24px;
			font-weight: 700;
			font-family: 'Gilroy', sans-serif;
			margin-bottom: 30px;
			color: var(--dark);
		}

		.page-contact .address-info ul
		{
			font-size: 16px;
			font-weight: 400;
			color: var(--dark);
		}

			.page-contact .address-info ul li
			{
				padding: 5px 0;
				line-height: 24px;
			}

	.page-contact #map
	{
		height: 400px;
		width: 100%;
		background: #fff;
	}

	.page-contact .contact-form:after
	{
		content: "";
    	position: absolute;
	    left: 0;
	    bottom: -183px;
	    width: 183px;
	    height: 183px;
	    z-index: -1;
	    background: url('../images/outstaffing/dark-dots.svg');
	}

	.page-contact .contact-form
	{
		position: relative;
	}

		.page-contact .contact-form .z-index > div { position: relative; }
		.page-contact .contact-form .z-index > div:first-child { z-index: 3; }
		.page-contact .contact-form .z-index > div:nth-child(2) { z-index: 2; }
		.page-contact .contact-form .z-index > div:last-child { z-index: 1; }


		.page-contact .contact-form .input-row
		{
			display: block;
			position: relative;
		}

			.page-contact .contact-form .input-row span
			{
				display: block;
				font-size: 18px;
				color: var(--light);
				margin-bottom: 10px;
			}

			.page-contact .contact-form .input-row span.wpcf7-not-valid-tip
			{
				position: absolute;
				top: unset;
				bottom: -22px;
				display: block;
				margin-bottom: 0;
				margin-top: 5px;
				color: var(--red);
				font-size: 14px !important;
				font-weight: 500 !important;
				font-family: 'Montserrat', sans-serif;
			}

			div.wpcf7-mail-sent-ok
			{
				background: var(--green);
			}

			div.wpcf7-response-output
			{
				position: absolute;
				bottom: -60px;
				max-width: unset;
				width: 100%;
				font-weight: 500;
				line-height: 30px;
				margin: 0 auto;
			}

			div.wpcf7-validation-errors

			{
				background: var(--red);
			}

			.page-contact .contact-form .input-row input::-webkit-input-placeholder, 
			.page-contact .contact-form .input-row textarea::-webkit-input-placeholder 
			{ /* Edge */
				color: #ccc;
				font-weight: 400;
			}

			.page-contact .contact-form .input-row input:-ms-input-placeholder, 
			.page-contact .contact-form .input-row textarea:-ms-input-placeholder 
			{ /* Internet Explorer 10-11 */
		  		color: #ccc;
		  		font-weight: 400;
			}

			.page-contact .contact-form .input-row input::placeholder, 
			.page-contact .contact-form .input-row textarea::placeholder 
			{
				color: #ccc;
				font-weight: 400;
			}

			.page-contact .contact-form div.cs-select
			{
				background: transparent !important;
			}

			.page-contact .contact-form .input-row input[type='text'],
			.page-contact .contact-form .input-row input[type='email'],
			.page-contact .contact-form .input-row .cs-placeholder,
			.page-contact .contact-form .input-row select,
			.page-contact .contact-form .input-row textarea
			{
				width: 100%;
				height: 65px;
				font-size: 18px;
				color: var(--blue);
				padding: 0 20px;
				outline: none;
				border: 1px solid #ddd;
				background: rgba(255, 255, 255, .5);
				font-family: 'Gilroy', sans-serif;
				font-weight: 700;
			}

			.page-contact .contact-form .input-row textarea
			{
				margin-top: 10px;
				padding: 20px;
				min-height: 200px;
				resize: none;
			}

			.page-contact .contact-form .input-row.file label
			{
				padding: 20px;
				border: 1px dashed #ddd;
				font-weight: 600;
				cursor: pointer;
				-webkit-transition: all .3s ease;
				   -moz-transition: all .3s ease;
				    -ms-transition: all .3s ease;
				     -o-transition: all .3s ease;
				        transition: all .3s ease;
			}
			.page-contact .contact-form .input-row.file:hover label
			{
				border-color: var(--blue);
				color: var(--blue);
			}

			.page-contact .contact-form .input-row.file:hover label i
			{
				color: #333;
			}
			.page-contact .contact-form .input-row.file label i
			{
				-webkit-transition: all .3s ease;
				   -moz-transition: all .3s ease;
				    -ms-transition: all .3s ease;
				     -o-transition: all .3s ease;
				        transition: all .3s ease;
			}

			.page-contact .contact-form .input-row .cs-placeholder
			{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-bottom: 0;
			}

			.page-contact .contact-form .input-row .cs-select > span::after
			{
				content: '\f107';
				color: #ccc;
				font-family: 'Font Awesome 5 Free';
				font-weight: 900;
				-webkit-transition: all .3s ease;
				   -moz-transition: all .3s ease;
				    -ms-transition: all .3s ease;
				     -o-transition: all .3s ease;
				        transition: all .3s ease;
			}

				.page-contact .contact-form .input-row .cs-options li span
				{
					margin-bottom: 0;
					border-bottom: 1px solid #ddd;
					padding: 25px 20px;
					background: #fff;
					font-weight: 700;
					font-size: 18px;
					line-height: 14px;
					font-family: 'Gilroy', sans-serif;
					-webkit-transition: all .2s ease;
					   -moz-transition: all .2s ease;
					    -ms-transition: all .2s ease;
					     -o-transition: all .2s ease;
					        transition: all .2s ease;
				}

				.page-contact .contact-form .input-row .cs-select .cs-selected span
				{
					color: var(--blue);
				}
				.page-contact .contact-form .input-row .cs-select .cs-selected span::after
				{
					content: "\f00c";
					color: var(--blue);
				}

				.page-contact .contact-form .input-row .cs-options li:hover span
				{
					background: var(--blue);
					color: #fff;
				}

				.page-contact .contact-form .input-row .cs-select .cs-selected li:hover span::after
				{
					color: #fff !important;
				}
				
				.page-contact .contact-form .input-row .cs-options li:last-child span
				{
					border-bottom: 0;
				}

					.page-contact .contact-form .input-row .cs-select .cs-options ul
					{
						height: 0;
						opacity: 0;
						background: #fff;
						color: var(--blue);
						border-bottom: 1px solid #ddd;
						border-left: 1px solid #ddd;
						border-right: 1px solid #ddd;
						-webkit-transition: all .4s ease;
						   -moz-transition: all .4s ease;
						    -ms-transition: all .4s ease;
						     -o-transition: all .4s ease;
						        transition: all .4s ease;
					}

					.page-contact .contact-form .input-row .cs-select.cs-active .cs-options ul
					{
						height: 100%;
						opacity: 1;
					}

			.page-contact .contact-form .input-row.text-right
			{
				text-align: right;
			}

			.page-contact .contact-form .input-row button
			{
				display: inline-flex;
				justify-content: center;
				align-items: center;
				position: relative;
				top: 0;
				padding: 15px 20px;
				background: var(--yellow);
				border: none;
				outline: none;
				box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .05);
				color: #000;
				font-size: 20px;
				font-family: 'Gilroy', sans-serif;
				font-weight: 700;
				cursor: pointer;
				-webkit-transition: all .3s cubic-bezier(.77,0,.175,1);
				   -moz-transition: all .3s cubic-bezier(.77,0,.175,1);
				    -ms-transition: all .3s cubic-bezier(.77,0,.175,1);
				     -o-transition: all .3s cubic-bezier(.77,0,.175,1);
				        transition: all .3s cubic-bezier(.77,0,.175,1);
			}

				.page-contact .contact-form .input-row button i:before
				{
					display: block;
				    animation: fadeNChangeOut 0.3s;
				    animation-fill-mode: forwards;
				}
				.page-contact .contact-form .input-row button:hover i:before
				{
					animation: fadeNChange 0.3s;
					animation-fill-mode: forwards;
				}

					@keyframes fadeNChange
					{
						0% {
							transform: scale(1);
						}

						50% {
							transform: scale(0);
						}

						65% {
							content: '\f1d8';
							color: var(--yellow);
						}

						100% {
							content: '\f1d8';
							color: var(--yellow);
							transform: scale(1);
						}
					}

					@keyframes fadeNChangeOut
					{
						0% {
							content: '\f1d8';
							color: var(--yellow);
							transform: scale(1);
						}

						50% {
							transform: scale(0);
						}

						65% {
							content: '\f061';
							color: var(--yellow);
						}

						100% {
							content: '\f061';
							transform: scale(1);
							color: var(--yellow);
						}
					}


					@keyframes btnwIconFlyOut
					{
						0% {
							transform: rotateZ(0deg) scale(1);
							left: 0;
						}

						10% {
							left: 0;
							transform: rotateZ(45deg) scale(1);
						}

						35% {
							left: 100%;
						}

						55% {
							transform: rotateZ(45deg) scale(0);
						}

						60% {
							left: -100%;
						}

						61% {
							transform: rotateZ(45deg) scale(1);
						}

						80% {
							left: 0;
						}

						100% {
							transform: rotateZ(0deg) scale(1);
						}
					}


			.page-contact .contact-form .input-row button:focus i,
			.page-contact .contact-form .input-row button:active i,
			.page-contact .contact-form .input-row button:visited i
			{
				animation: btnwIconFlyOut 1.5s;
				animation-fill-mode: forwards;
			}

			.page-contact .contact-form .input-row button:hover
			{
				box-shadow: 0 20px 30px 0 rgba(0, 0, 0, .1);
			}

			.page-contact .contact-form .input-row button span i
			{
				position: relative;
				transform: rotateZ(0deg) scale(1);
				-webkit-transition: all .3s cubic-bezier(.77,0,.175,1);
				   -moz-transition: all .3s cubic-bezier(.77,0,.175,1);
				    -ms-transition: all .3s cubic-bezier(.77,0,.175,1);
				     -o-transition: all .3s cubic-bezier(.77,0,.175,1);
				        transition: all .3s cubic-bezier(.77,0,.175,1);
			}

				.page-contact .contact-form .input-row button span
				{
					display: inline-flex;
					width: 50px;
					height: 50px;
					justify-content: center;
					align-items: center;
					color: var(--yellow);
					background: var(--dark);
					font-size: 20px;
					border-radius: 100%;
					margin-bottom: 0;
					margin-left: 30px;
				}
					
				.page-contact .contact-form .file i
				{
					color: #ccc;
					margin-right: 10px;
				}

				.page-contact .contact-form .file input
				{
					display: none;
				}

				div.wpcf7 
				{
					position: relative;
				}

				div.wpcf7 .ajax-loader {
					width: 24px;
					height: 24px;
					margin-left: 10px;
					position: absolute;
					bottom: 0;
					left: 50%;
					background: red;
				}

.btn {
	width: 100%;
	color: #fff;
	font-size: 18px;
	font-weight: 100;
	cursor: pointer;
	position: relative;
	margin-left: 15px;
	padding: 10px 15px;
	text-decoration: none;
	text-transform: uppercase;
}

.btn svg {
	height: 45px;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.btn rect {
	fill: none;
	stroke: #fff;
	stroke-width: 2;
	stroke-dasharray: calc(3*100%), 0;
	transition: all 0.35s linear;
}

.btn.green rect {
	stroke: green;
}

.btn:hover {
	text-shadow: -0.5px 0 #fff, 0.5px 0 #fff, 0 -0.5px #fff, 0 0.5px #fff;
}

.btn:hover rect {
	stroke-width: 5;
	stroke-dasharray: 15, calc(3*100%);
	stroke-dashoffset: calc(75%);
	transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
}


@media only screen and (min-width: 2049px) {

	nav img
	{
		width: 160px;
	}
}