/*
Theme Name: qBit.Solutions Curved 
Theme URI: qbit.solutions
Author: qBit Team
Author URI: qbit.solutions
Description: qBit Solution
Version: 1.0.108
Text Domain: 
*/

/* 
 * ---------------------------------------------------------------------------------------------------------------------
 *	RESET CSS
 *----------------------------------------------------------------------------------------------------------------------
*/

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;
}
/* 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: 'Avenir', sans-serif;
	font-weight: 300;
	background-color: #fafcfd;
	-webkit-font-smoothing: antialiased;
	overflow-y: scroll;
}
body * {
	box-sizing: border-box;
}
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;
}
/* 
 * ---------------------------------------------------------------------------------------------------------------------
 *	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 
{
	--main-blue: #048DBA;
	--main-yellow: #ffe722;
	--main-dark: #35373d;
}

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


.wrapper
{
	width: 80%;
	position: relative;
	display: block;
	margin: auto;
	max-width: 1500px;
}

.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(--main-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: #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(--main-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%;}
	}

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

.navBar
{
	width: 80%;
	position: absolute;
	top: 60px;
	opacity: 1;
	left: 10%;
	z-index: 10;
}

	.navBar #logo
	{
		display: inline-block;
		vertical-align: middle;
		height: 60px;
	} 

	.navBar #menu
	{
		display: inline-block;
		vertical-align: middle;
		position: relative;
		float: right;
		top: 5px;
	}

		.navBar #menu #menuWrap
		{
			width: 100%;
			height: 100vh;
			position: fixed;
			top: 0;
			right: 0;
			background: var(--main-blue);
			-webkit-transition: all 0.3s ease-in-out;
			   -moz-transition: all 0.3s ease-in-out;
			    -ms-transition: all 0.3s ease-in-out;
			     -o-transition: all 0.3s ease-in-out;
			        transition: all 0.3s ease-in-out;
			visibility: hidden;
			opacity: 0;
		} 

		.navBar #menu #menuNav 
		{
			width: 100%;
			position: absolute;
			top: 50%;
			-webkit-transform: translateY(-50%);
			   -moz-transform: translateY(-50%);
			    -ms-transform: translateY(-50%);
			     -o-transform: translateY(-50%);
			        transform: translateY(-50%);			
		}

		.navBar #menu #menuWrap.open
		{
			right: 0;
			visibility: visible;
			opacity: 1;
			-webkit-transition: all 0.3s ease-in-out;
			   -moz-transition: all 0.3s ease-in-out;
			    -ms-transition: all 0.3s ease-in-out;
			     -o-transition: all 0.3s ease-in-out;
			        transition: all 0.3s ease-in-out;
		}


			.navBar #menu #menuNav li
			{
				width: 100%;
				text-align: center;
				display: block;
				height: 10vh;
				line-height: 5vh;
				padding: 3vh 0;
				opacity: 0;
				-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;
			} 

				.navBar #menu #menuNav li a
				{
					display: inline-block;
					text-transform: uppercase;
					font-size: 24px;
					color: rgba(255, 255, 255, .8);
					font-weight: 600;
					letter-spacing: 1px;
					-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;
				}

				.navBar #menu #menuNav li.open
				{
					opacity: 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;
				}

				.navBar #menu #menuNav li a:hover
				{
					color: rgba(255, 255, 255, 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;
				}

header
{
	width: 100%;
	position: relative;
	background-color: var(--main-blue);
  	clip-path: polygon(0 0, 100% 0, 100% 40%, 0 100%);
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 40%, 0 100%);
	-moz-clip-path: polygon(0 0, 100% 0, 100% 40%, 0 100%);
	-o-clip-path: polygon(0 0, 100% 0, 100% 40%, 0 100%);
	-ms-clip-path: polygon(0 0, 100% 0, 100% 40%, 0 100%);
  	z-index: 1;
  	overflow: hidden;
}

	.header-background
	{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
		-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
		filter: grayscale(100%);
		text-align: right;
	}
	.header-background img
	{
		position: absolute;
		top: 0;
		right: 0;
		min-height: 100%;
		width: 100%;
	}

	header #headerText
	{
		position: relative;
		margin-top: 35vh;
	}

		header #headerText h2
		{
			font-weight: 600;
			color: var(--main-yellow);
			font-size: 48px;
			letter-spacing: 2px;
			line-height: 72px;
			margin-bottom: 40px;
		}

		header #headerText #line
		{
			width: 140px;
			height: 1px;
			background-color: var(--main-yellow);
			position: relative;
			left: -40px;
			top: 0px;
		}

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

		header #headerText > a
		{
			display: inline-block;
			font-weight: 600;
			color: #fff;
			font-size: 18px;
			letter-spacing: 1px;
			margin-bottom: 360px;
		}
		
		header #headerText > a:before
		{
			background: var(--main-yellow);
		}

		header #headerText #socialIcons
		{
			position: absolute;
			top: -90px;
			right: 25px;
		}

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

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

			}

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

#about 
{
	font-size: 0;
	z-index: 3;
	margin-top: -200px;
}

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

	#about .main-title
	{
		position: relative;
	    left: -40%;
	    z-index: -15;
	} 
		.main-title
		{
			font-size: 200px;
			font-weight: 600;
			color: #eef2fd;
		}

	#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: 530px;
			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(--main-yellow);
				z-index: -1;
			}

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

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

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

		#about #aboutPhotos #instagramFollow
		{
			position: absolute;
			margin-top: -40px;
			left: -35px;
			bottom: -65px;
			display: inline-block;
			z-index: -1;
			background: #fff;
			box-shadow: 0px 30px 40px rgba(0, 0, 0, 0.15)
		}

			#about #aboutPhotos #instagramFollow a
			{
				padding: 35px 100px 25px 35px;
				display: block;
				font-weight: 300;
				color: var(--main-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;
		text-align: right;
		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: 420px;
			width: 90%;
			position: relative;
			top: 50px;
			display: inline-block;
			font-weight: 300;
			font-size: 18px;
			line-height: 40px;
			text-align: justify;
			/* text-align-last: right; */
		} 


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

#services
{
	z-index: 1;
	width: 100%;
	margin-top: -270px;
	background-color: #171528;
	background-image: url(images/services.png);
	background-size: auto 100%;
	background-position: left;
	clip-path: polygon(0% 0, 100% 40%, 100% 60%, 0% 100%);
	-webkit-clip-path: polygon(0% 0, 100% 40%, 100% 60%, 0% 100%);
	-moz-clip-path: polygon(0% 0, 100% 40%, 100% 60%, 0% 100%);
	-o-clip-path: polygon(0% 0, 100% 40%, 100% 60%, 0% 100%);
	-ms-clip-path: polygon(0% 0, 100% 40%, 100% 60%, 0% 100%);
	padding: 400px 0 0;
}

	#services .main-title
	{
		margin-top: 50px;
		font-size: 140px;
		font-weight: 600;
		color: rgba(255, 255, 255, .15);
	}

	#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(--main-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 #features
	{
		width: 100%;
		display: block;
		padding: 70px 0 450px;
		padding-top: 60px;
		font-size: 0;
	}

		#services #features #box 
		{
			width: 50%;
			padding: 0 40px;
			box-sizing: border-box;
			display: block;
			position: relative;
			text-align: left;
		}

		#services #features #box:nth-child(odd)
		{
			margin-left: 50%;
		} 

			#services #features #box #icon
			{
				position: relative;
				display: inline-block;
				vertical-align: top;
				margin-right: 60px;
			}

				#services #features #box #icon:before
				{
					content: "";
					position: absolute;
					top: -50%;
    				left: -18px;
					width: 80px;
					height: 80px;
					border-radius: 100%;
					/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#533ae8+0,533ae8+15,1f1461+100&0+0,0+16,1+100 */
					background: -moz-linear-gradient(45deg, rgba(255, 255, 255, .0) 0%, rgba(255, 255, 255, .0) 15%, rgba(255, 255, 255, 0) 16%, rgba(255, 255, 255, 0.2) 100%); /* FF3.6-15 */
					background: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .0) 0%,rgba(255, 255, 255, .0) 15%,rgba(255, 255, 255, 0) 16%,rgba(255, 255, 255, 0.2) 100%); /* Chrome10-25,Safari5.1-6 */
					background: linear-gradient(45deg, rgba(255, 255, 255, .0) 0%,rgba(255, 255, 255, .0) 15%,rgba(255, 255, 255, 0) 16%,rgba(255, 255, 255, 0.2) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00533ae8', endColorstr='#1f1461',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
					opacity: 0.4;
					z-index: -1;
				}

			#services #features #box #text
			{
				width: calc(100% - 123px);
				display: inline-block;
				vertical-align: top;
				text-align: left;
			}

				#services #features #box #text h2
				{
					font-weight: 600;
					font-size: 18px;
					color: var(--main-yellow);
					letter-spacing: 1px;
					margin-bottom: 40px;
				}

				#services #features #box #text p
				{
					width: 350px;
					font-weight: 300;
					font-size: 16px;
					line-height: 24px;
					color: rgba(255, 255, 255, 0.8);
					letter-spacing: 0.5px;
				}


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

#work
{
	padding: 120px 0;
	margin-top: -490px;
	font-size: 0;
	overflow: hidden;
}

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



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

#join-our-team
{
	padding: 120px 0;
	margin-top: -490px;
	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: right;
		font-size: 120px;
		margin-bottom: 40px;
	}

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

	#join-our-team .item
	{
		/* padding: 0 15%; */
		padding: 0;
	}

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

			#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(--main-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(--main-dark);
				margin-bottom: 65px;
				text-align: justify;
			}



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

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

	#contact .wrapper
	{
		width: 80%;
	}
	
	#contact .main-title
	{
		font-size: 120px;	
		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 5%; */
	}

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

		#contact .rightSide p
		{
			width: 100%;
			max-width: 540px;
			line-height: 36px;
			font-weight: 300;
			color: var(--main-dark);
			font-size: 18px;
			text-align: left;
			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(--main-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(--main-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(--main-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(--main-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(--main-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(--main-dark);
			text-align: center;
		}



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

.jobs .wrapper
{
}

.header-background
{
	z-index: 0;
}
.header-page
{
	width: 100%;
	position: relative;
	overflow: hidden;
	background: var(--main-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(--main-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(--main-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(--main-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(--main-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(--main-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(--main-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(--main-yellow);
				font-weight: 600;
				border: 1px dashed var(--main-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.big_file
			{
				color: #e65757;
				font-weight: 600;
				border: 1px dashed #e65757;
			}
			.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(--main-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(--main-yellow);
			    box-sizing: border-box;
			    resize: none;
			    overflow: hidden;
			}

			.jobs .wpcf7-form .col-12 .wpcf7-submit:disabled
			{
				opacity: 0.3;
				cursor: not-allowed;
			}
			
			.jobs .wpcf7-form .col-12 .wpcf7-submit:hover:disabled
			{
				cursor: not-allowed;
			}
			
			.jobs .wpcf7-form .col-12 .wpcf7-submit
			{
				background: var(--main-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: #036f92;
				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: 20px 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;
			}

.grecaptcha-badge
{
	opacity: 0;
}

/* 
 * ---------------------------------------------------------------------------------------------------------------------
 *	Outstaffing Page
 *----------------------------------------------------------------------------------------------------------------------
*/

.navBar--wrapper
{
	position: absolute;
	left: 50%;
	max-width: 1500px;
	transform: translateX(-50%) !important;
}

.outstaffing {

}

.section-padding
{
	padding-top: 100px;
	padding-bottom: 100px;
}

.outstaffing section.horizontal
{
	display: flex;
	flex-direction: row;
}

.outstaffing section.vertical
{
	display: flex;
	flex-direction: column;
}

.outstaffing--wrapper
{
	max-width: 1500px;
	margin: 0 auto;
	width: 80%;
}

.outstaffing .outstaffing__hero {
	padding-top: 200px;
	padding-bottom: 100px;
	z-index: 1;
}

.outstaffing .outstaffing__hero > .wrapper
{
	position: unset;
}

	.outstaffing__hero .os__content
	{
		display: flex;
		flex-direction: column;
	}

	.outstaffing__hero .os__content--shortened
	{
		display: flex;
		flex-direction: column;
		max-width: 380px;
		width: 100%;
	}

		.outstaffing__hero .os__content--shortened .os__title
		{
			font-family: sofia-pro, sans-serif;
			font-size: 70px;
			font-weight: 900;
			color: var(--main-dark);
		}

			.outstaffing__hero .os__content--shortened .os__title span
			{
				position: relative;
			}

			.outstaffing__hero .os__content--shortened .os__title span:before
			{
				position: absolute;
				content: '';
				width: calc(100% + 10px);
				height: 40%;
				background-color: var(--main-yellow);
				bottom: 5px;
				left: -10px;
				z-index: -1;
			}

		.outstaffing__hero .os__content--shortened hr
		{
			margin: 30px 0 40px 0;
			width: 140px;
			height: 2px;
			background-color: var(--main-yellow);
			border: none;
		}

		.outstaffing__hero .os__content--shortened .os__text
		{
			font-family: sofia-pro, sans-serif;
			font-size: 18px;
			font-weight: 400;
			line-height: 32px;
			color: var(--main-dark);
		}

		.outstaffing__hero .os__content .email
		{
			position: relative;
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 30px;
			padding-left: 30px;
			width: 65%;
			height: 75px;
			background-color: white;
			box-shadow: 0px 10px 30px rgba(0,0,0,0.16);
		}

			.outstaffing__hero .os__content .email input
			{
				width: 100%;
				border: 0;
				outline: none;

				font-family: sofia-pro, sans-serif;
				font-size: 22px;
				font-weight: 400;
			}

			.outstaffing__hero .os__content .email button
			{
				position: absolute;
				right: 20px;
				width: 48px;
				height: 48px;
				background-color: var(--main-yellow);
				
				border: none;
				border-radius: 100%;
				outline: none;
				
				font-size: 18px;
			}

	.outstaffing__hero .os__image
	{
		position: absolute;
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		padding: 90px;
		padding-right: 0;
		top: 0;
		right: 0;
		width: 50vw;
		height: 1000px;
		z-index: -1;
		overflow: hidden;
	}

	.outstaffing__hero .os__image:before
	{
		position: absolute;
		content: '';
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: rgba(53, 59, 76, .9);
		z-index: 0;
	}

		.outstaffing__hero .os__image img
		{
			position: absolute;
			display: block;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			object-fit: cover;
			z-index: -1;
		}

		.outstaffing__hero .os__image h2
		{
			position: relative;

			font-family: futura-pt-bold, sans-serif;
			font-size: 190px;
			font-weight: 700;
			font-style: normal;
			line-height: 166px;
			text-transform: uppercase;

			color: rgba(255, 255, 255, .1);
			z-index: 1;
		}

/* Why Outstaffing */
section.s_why-outstaffing
{
	background-color: var(--main-yellow);
}

section .section__name
{
	position: relative;
	display: flex;
	align-items: center;
	margin-bottom: 15px;
	font-family: sofia-pro, sans-serif;
	font-size: 24px;
	font-weight: 900;
	text-transform: uppercase;
	color: var(--main-blue);
}

section .section__name:before
{
	position: absolute;
	content: '';
	display: block;
	margin-top: 1px;
	width: 50px;
	height: 3px;
	left: -65px;
	background-color: var(--main-blue);
}

section .section__name.yellow
{
	color: var(--main-yellow);
}

section .section__name.yellow:before
{
	background-color: var(--main-yellow);
}

section .section__title
{
	margin-bottom: 40px;
	max-width: 470px;

	font-family: sofia-pro, sans-serif;
	font-size: 60px;
	font-weight: 900;
	line-height: 65px;
	color: var(--main-dark);
}

section .section__title.white
{
	color: white;
}

section.vertical .section__title
{
	max-width: unset;
}

ul.checkmark-list
{
	list-style: none;
}

	ul.checkmark-list li
	{
		display: flex;
		flex-direction: row;
		margin-bottom: 30px;
		max-width: 460px;
		width: 100%;
	}

	ul.checkmark-list li:last-child
	{
		margin-bottom: 0;
	}

		ul.checkmark-list li .icon
		{
			margin-top: 10px;
			margin-right: 30px;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 40px;
			height: 40px;
			background-color: rgba(4, 140, 186, 0.1);
			border-radius: 100%;

			font-size: 18px;
			color: var(--main-blue);
		}

		ul.checkmark-list li p
		{
			font-family: sofia-pro, sans-serif;
			font-size: 18px;
			font-weight: 400;
			line-height: 30px;
			flex: 1;
		}

/* Why Outstaffing */

.why-outstaffing
{
	position: relative;
}

	.why-outstaffing .icon-graphic
	{
		position: absolute;
		right: 0;
		bottom: -5px;
		max-width: 650px;
	}

		.why-outstaffing .icon-graphic img
		{
			width: 100%;
		}

/* Why Us */

.s_why-us
{
	background-color: white;
}

.why-us
{
	position: relative;
	display: flex;
    flex-direction: column;
	align-items: flex-end;
	width: 100%;
}

	.why-us .icon-graphic
	{
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
	}

	.why-us .icon-graphic:before
	{
		position: absolute;
		content: '';
		background-image: url('/wp-content/themes/qbit_v1/images/cable.svg');
		background-repeat: repeat-x;
		background-position-y: bottom;
		background-position-x: right;
		width: 50vw;
		height: 50px;
		left: calc(-50vw + 24px);
		bottom: 4px;
	}

		.why-us ul.checkmark-list li
		{
			max-width: 570px;
		}



/* Services - Technologies */
section.s_services
{
	background-color: #32394A;
}

	.outstaffing section.s_services .services
	{
		padding-bottom: calc(100px - 65px);
	}

	section.s_services .section__title
	{
		margin-bottom: 0;
	}

	section.s_services .os_title
	{
		margin-bottom: 65px;
	}

.os_technologies
{
	display: grid;
    grid-template-columns: repeat(2, 480px);
    grid-gap: 65px;
	justify-content: space-between;
	margin-bottom: 65px;
}

.technology-tree
{
	display: flex;
	flex-direction: row;
	font-family: sofia-pro, sans-serif;

	max-width: 450px;
	cursor: default;
}

.technology-tree:not(:last-child)
{
	margin-right: 30px;
}

	.technology-tree .icon
	{
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 30px;
		width: 90px;
		height: 90px;
		
		font-family: inherit;
		color: var(--main-blue);
	}

		.technology-tree .icon span
		{
			margin-top: -4px;
			font-size: 30px;
			font-weight: 900;
			transition: all .3s ease-in-out;
		}

		.technology-tree:hover .icon span
		{
			color: var(--main-yellow);
		}

		.technology-tree .icon svg
		{
			position: absolute;
			width: 100%;
			height: 100%;
			transform: rotateZ(0deg);
			transition: all .3s ease-in-out;
		}

		.technology-tree .icon svg .technology-circle
		{
			fill: var(--main-blue);
			transition: all .3s ease-in-out;
		}

		.technology-tree:hover .icon svg .technology-circle
		{
			fill: var(--main-yellow);
		}

		.technology-tree.selected .icon svg .technology-circle
		{
			fill: var(--main-yellow);
		}

		.technology-tree:hover .icon svg
		{
			transform: rotateZ(360deg);
		}

		.technology-tree:nth-child(3n + 1) .icon svg
		{
			transform: rotateZ(270deg);
		}

		.technology-tree:nth-child(3n + 1):hover .icon svg
		{
			transform: rotateZ(630deg);
		}

	.technology-tree .technology__content
	{
		display: flex;
		flex-direction: column;
		flex: 1;

		font-family: sofia-pro, sans-serif;
	}

		.technology-tree .technology__content h4
		{
			margin-bottom: 30px;
			font-family: inherit;
			font-size: 24px;
			font-weight: bold;
			line-height: 24px;
			color: var(--main-blue);
			transition: all .3s ease-in-out;
		}

		.technology-tree:hover .technology__content h4
		{
			color: var(--main-yellow);
		}

		.technology-tree .technology__content p
		{
			margin-bottom: 20px;
			font-family: inherit;
			font-size: 16px;
			font-weight: 400;
			line-height: 24px;
			color: white;
		}

		.technology-tree .technology__content .tree-technologies
		{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
		}

			.technology-tree .technology__content .tree-technologies .technology
			{
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 2px;
				margin-bottom: 2px;
				width: 50px;
				height: 50px;
				background-color: rgba(255, 255, 255, .05);
			}

				.technology-tree .technology__content .tree-technologies .technology i
				{
					font-size: 25px;
					color: white;
					transition: all .2s ease-in-out;
				}

				/* .technology-tree.selected .technology__content .tree-technologies .technology.favorite i
				{
					color: var(--main-yellow);
				} */

				.technology-tree:hover .technology__content .tree-technologies .technology.favorite i
				{
					color: var(--main-yellow);
				}


/* Contact */

section.s_contact
{
	background-image: url("/wp-content/themes/qbit_v1/images/outstaffing-footer-image.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-color: #F0F1F2;

	padding-bottom: 80px;
}

section.s_contact .os_title .section__title
{
	margin-bottom: 100px;
}

.outstaffing-contact form
{
	display: flex;
	flex-direction: column;
    margin: 0 auto;
	max-width: 1050px;
}

	.outstaffing-contact form .form-item
	{
		margin-bottom: 40px;
		display: flex;
		flex-direction: column;
	}

	.outstaffing-contact form .form-item.horizontal
	{
		flex-direction: row;
	}

		.outstaffing-contact form .form-item label
		{
			margin-bottom: 15px;
			flex: 1;

			font-family: sofia-pro, sans-serif;
			font-size: 20px;
			font-weight: 500;
			color: #677A84;
			pointer-events: none;
		}

		.outstaffing-contact form .form-item input
		{
			padding-left: 20px;
			height: 65px;

			font-family: sofia-pro, sans-serif;
			font-size: 18px;
			font-weight: 400;
			color: #677A84;

			outline: none;
		}

		.outstaffing-contact form .form-item .input-wrapper
		{
			position: relative;
			overflow: hidden;
		}
			
			.outstaffing-contact form .form-item .input-wrapper input
			{
				width: 100%;
			}

			.outstaffing-contact form .form-item .input-wrapper:focus-within span,
			.outstaffing-contact form .form-item .input-wrapper:focus-within label,
			.outstaffing-contact form .form-item .input-wrapper input:not([value=""]) ~ span,
			.outstaffing-contact form .form-item .input-wrapper input:not([value=""]) ~ label
			{
				left: 0%;
				transform: translateY(-50%) translateX(-100%);
			}
			
			.outstaffing-contact form .form-item .input-wrapper span,
			.outstaffing-contact form .form-item .input-wrapper label
			{
				position: absolute;
				top: 50%;
				left: 20px;
				pointer-events: none;
				transform: translateY(-50%);
				transition: all .2s ease-in-out;

				font-family: sofia-pro, sans-serif;
				font-size: 18px;
				font-weight: 400;
				color: #677A84;
			}

		.outstaffing-contact form .form-item select
		{
			font-family: sofia-pro, sans-serif;
			font-size: 18px;
			font-weight: 400;
			color: #677A84;
			outline: none;
		}

		.outstaffing-contact form .form-item textarea
		{
			padding: 20px;
			font-family: sofia-pro, sans-serif;
			font-size: 18px;
			font-weight: 400;
			color: #677A84;
			outline: none;
			border: 1px solid #ddd;
		}

		.outstaffing-contact form .ss-main .ss-single-selected
		{
			padding: 10px 20px;
			width: 100%;
			height: 65px;
			border-radius: 0;

			font-family: sofia-pro, sans-serif;
			font-size: 18px;
			font-weight: 400;
			color: var(--main-blue);
		}

			.outstaffing-contact form .ss-content .ss-list .ss-option
			{
				display: flex;
				align-items: center;
				padding: 10px 20px;
				width: 100%;
				height: 65px;
				border-radius: 0;

				font-family: sofia-pro, sans-serif;
				font-size: 18px;
				font-weight: 400;
				color: var(--main-dark);
			}

			.outstaffing-contact form .ss-content .ss-list .ss-option.ss-highlighted, .ss-content .ss-list .ss-option:hover
			{
				background: #f5f5f5 !important;
			}

	.outstaffing-contact form .dropdowns
	{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

		.outstaffing-contact form .dropdowns .form-item
		{
			max-width: 270px;
			width: 100%;
		}

		.outstaffing-contact form .dropdowns .form-item:nth-child(2)
		{
			margin-left: 30px;
			margin-right: 30px;
		}

		
body.page-outstaffing
{
	position: relative;
}

/* .page-outstaffing #copyright
{
	position: absolute;
	bottom: 0;
} */


.btn-wicon
{
	position: relative;
	display: flex;
	align-items: center;
	padding: 20px;
	padding-right: 100px;
	height: 75px;
	border: none;
	background-color: white;

	font-family: sofia-pro, sans-serif;
	font-size: 20px;
	font-weight: 600;

	overflow: hidden;
	outline: none;
	cursor: pointer;
}

	.btn-wicon .icon
	{
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		right: 20px;
		width: 48px;
		height: 48px;
		background-color: var(--main-blue);
		
		border: none;
		border-radius: 100%;
		
		font-size: 18px;
		color: white;

		overflow: hidden;
		transition: all .3s ease-in-out;
	}

	.btn-wicon:hover .icon
	{
		background-color: var(--main-yellow);
	}

		.btn-wicon .icon i:before
		{
			display: block;
			animation: fadeNChangeOut 0.3s;
			animation-fill-mode: forwards;
		}

		.btn-wicon:hover .icon 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(--main-dark);
	}

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

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

	50% {
		transform: scale(0);
	}

	65% {
		content: '\f061';
		color: white;
	}

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

@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);
	}
}

body.nav-is-open .navBar
{
	position: fixed;
	left: 10%;
	transform: unset !important;
}

body.nav-is-open #menuWrap
{
	top: 0;
	right: unset;
	left: 0;
	width: 100vw;
	height: 100vh;
}

@media only screen and (max-width: 2120px)
{
	.outstaffing__hero .os__image h2
	{
		font-size: 160px;
		line-height: 140px;
	}
}

@media only screen and (max-width: 1840px)
{
	.outstaffing__hero .os__image h2
	{
		font-size: 140px;
		line-height: 120px;
	}
}

@media only screen and (max-width: 1460px)
{
	.outstaffing__hero .os__content .email
	{
		width: 380px;
	}

	.outstaffing__hero .os__image
	{
		height: 100%;
	}

	.outstaffing__hero .os__image h2
	{
		font-size: 100px;
		line-height: 90px;
	}
}

@media only screen and (max-width: 1350px)
{
	.why-outstaffing .icon-graphic
	{
		right: -80px;
	}
}

@media only screen and (max-width: 1300px)
{
	.os_technologies
	{
		grid-template-columns: repeat(1, 480px);
		justify-content: center;
	}

	.why-outstaffing
	{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 0;
	}

	.why-outstaffing .icon-graphic
	{
		position: relative;
		right: 0;
	}

	.why-outstaffing .icon-graphic
	{
		max-width: 500px;
	}

	.why-us
	{
		flex-direction: column-reverse;
		align-items: center;
	}

	.why-us .icon-graphic
	{
		margin-top: 40px;
		position: relative;
		top: unset;
		left: unset;
		transform: unset;
	}

	.why-us ul.checkmark-list li
	{
		max-width: 470px;
	}

}

@media only screen and (max-width: 1200px)
{
	.os_technologies
	{
		flex-direction: column;
		align-items: center;
	}
}

@media only screen and (max-width: 1120px)
{
	.outstaffing__hero .os__image h2
	{
		font-size: 90px;
    	line-height: 85px;
	}
}

@media only screen and (max-width: 1000px)
{
	.outstaffing__hero .os__image
	{
		display: none;
	}

	.outstaffing__hero .os__content .email
	{
		width: 100%;
	}

	.outstaffing__hero .os__content--shortened
	{
		max-width: unset;
	}

	.page-outstaffing .hamburger:not(.is-active) .hamburger-inner,
	.page-outstaffing .hamburger:not(.is-active) .hamburger-inner::before,
	.page-outstaffing .hamburger:not(.is-active) .hamburger-inner::after
	{
		background-color: var(--main-dark) !important;
	}
}

@media only screen and (max-width: 850px)
{
	section .section__name
	{
		font-size: 20px;
	}

	section .section__title
	{
		font-size: 40px;
		line-height: 45px;
	}

	ul.checkmark-list li p
	{
		font-size: 16px;
	}

	section.s_contact .os_title .section__title
	{
		margin-bottom: 50px;
	}
}

@media only screen and (max-width: 750px)
{
	.why-us
	{
		padding-bottom: 50px;
	}
}

@media only screen and (max-width: 650px)
{
	.outstaffing-contact form .dropdowns
	{
		flex-direction: column-reverse;
	}
	
	.outstaffing-contact form .dropdowns .form-item,
	.outstaffing-contact form .dropdowns .form-item:nth-child(2)
	{
		margin-left: unset;
		margin-right: unset;
		width: 100%;
		max-width: unset;
	}
}

@media only screen and (max-width: 600px)
{
	.os_technologies
	{
		grid-template-columns: repeat(1, 1fr);
	}
}

@media only screen and (max-width: 550px)
{
	.why-us .icon-graphic
	{
		max-width: 360px;
	}
	
	.why-us .icon-graphic img
	{
		width: 100%;
	}
	
	.why-us .icon-graphic:before
	{
		background-size: 620px;
		bottom: 2px;
	}
	
	.technology-tree
	{
		flex-direction: column;
		align-items: center;
	}
	
	.technology-tree:not(:last-child)
	{
		margin-right: 0;
	}
	
	.technology-tree .icon
	{
		margin: 0;
		margin-bottom: 30px;
	}
	
	.technology-tree .technology__content{
		justify-content: center;
		align-items: center;
	}
	
	.technology-tree .technology__content h4,
	.technology-tree .technology__content p
	{
		text-align: center;
	}
	
	.technology-tree .technology__content .tree-technologies
	{
		justify-content: center;
		align-items: center;
	}
}

@media only screen and (max-width: 425px)
{
	.outstaffing__hero .os__content--shortened .os__title
	{
		font-size: 50px;
	}

	.outstaffing__hero .os__content--shortened .os__text
	{
		font-size: 14px;
		line-height: 26px;
	}

	.outstaffing__hero .os__content .email
	{
		height: 65px;
	}

	.outstaffing__hero .os__content .email input
	{
		font-size: 14px;
	}

	.why-us .icon-graphic:before
	{
		bottom: 1px;
	}

	ul.checkmark-list li p
	{
		font-size: 14px;
	}

	ul.checkmark-list li .icon
	{
		margin-right: 10px;
		width: 30px;
		height: 30px;
		font-size: 14px;
	}

	.outstaffing-contact form .form-item label
	{
		font-size: 16px;
	}

	.outstaffing-contact form .form-item .input-wrapper span,
	.outstaffing-contact form .form-item .input-wrapper label
	{
		font-size: 16px;
	}

	.outstaffing-contact form .form-item input
	{
		font-size: 16px;
	}

	.btn-wicon
	{
		font-size: 16px;
	}
}

@media only screen and (max-width: 350px)
{
	.why-us .icon-graphic:before
	{
		bottom: 0px;
	}
}