/* 
*----------------------------------------------------------------------------------------------------------------------
*	OutStaffing CSS
*----------------------------------------------------------------------------------------------------------------------
*/

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


html
{
	text-rendering: antialiased;
}

.page-outstaffing
{
	width: 100%;
	height: 100vh;
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	color: var(--dark );
	background: #fff;
	overflow-x: hidden;
}

@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?time=2');
	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; }


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

p
{
	font-size: 16px;
	line-height: 30px;
	color: var(--dark);
}

body {
  background: #fff;
}

/* .float-shapes 
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 100;
}  

.float-shapes i 
{
    transition: 300ms all;
    position: absolute;
    font-size: 10px;
    color: red;
    animation: 30s floatUp ease-in infinite;
    top: 0%;
}
.float-shapes i:before {
  display: inline-block;
}
.float-shapes i:nth-child(odd):before {
  animation: 40s slowRotate linear;
}
.float-shapes i:nth-child(even):before {
  animation: 30s slowRotate linear;
  animation-direction: reverse;
}
 */
/* @keyframes floatUp {
	0% { top: -20%; top: calc(100% + 2em); }
	100% { top: 110%; top: -2em; }
}

@keyframes slowRotate {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(359deg); }
} */


.page-outstaffing h1,
.page-outstaffing h2,
.page-outstaffing h3,
.page-outstaffing h4,
.page-outstaffing h5,
.page-outstaffing h6
{
	font-family: 'Gilroy', sans-serif;
}

.page-outstaffing h1
{
	font-size: 65px;
	line-height: 65px;
	font-weight: 900;
}

.page-outstaffing h2
{
	font-size: 65px;
	line-height: 65px;
	font-weight: 900;
}

.page-outstaffing h3
{
	font-size: 50px;
	line-height: 60px;
	font-weight: 900;
}

input 
{
	-webkit-appearance: none;
	   -moz-appearance: none;
			appearance: none;
}


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

/*
nav
{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30px 10%;
	position: absolute;
	z-index: 100;
}

	nav .menu .ham
	{
		width: 35px;
		height: 15px;
		position: relative;
		z-index: 10;
		cursor: pointer;
	}
		
		nav .menu .ham:hover span:first-child
		{
			width: 35px;
		}

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

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

		nav .menu .ham span
		{
			width: 20px;
			height: 3px;
			display: block;
			background: #fff;
			position: absolute;
			top: 0;
			left: 0;
			-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: 10px;
			width: 35px;
		}

	nav #main-menu
	{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 0;
		visibility: hidden;
		opacity: 0;
		background: var(--blue);
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		z-index: 9;
		-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 #main-menu.active
	{
		visibility: visible;
		opacity: 1;
		height: 100vh;
	}

	nav #main-menu li
	{
		padding: 10px 0;
	}

		nav #main-menu li a
		{
			display: block;
		    text-transform: uppercase;
		    font-size: 24px;
		    color: rgba(255, 255, 255, .8);
		    font-weight: 600;
		    letter-spacing: 1px;
			color: #fff;
			padding: 20px 0;
			text-transform: uppercase;
		}
*/

.ots-header
{
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

/*.ots-header:after
{
	position: absolute;
	content: '';
	width: 100%;
	height: 0;
	bottom: -100px;
	left: 0;
	z-index: -1;
	background: var(--yellow);
}

.ots-header.active:after
{
	height: 200px;
	-webkit-transition: all .5s cubic-bezier(.47,1.64,.41,.8);
	   -moz-transition: all .5s cubic-bezier(.47,1.64,.41,.8);
	    -ms-transition: all .5s cubic-bezier(.47,1.64,.41,.8);
	     -o-transition: all .5s cubic-bezier(.47,1.64,.41,.8);
	        transition: all .5s cubic-bezier(.47,1.64,.41,.8);
	transition-delay: .5s;
}*/


	.ots-header .header--left
	{
		width: 50%;
		padding: 0 20px 0 10%;
		z-index: 6;
	}
		
		.ots-header .header--left h1
		{
			position: relative;
			opacity: 0;
			top: -20px;
			color: var(--dark);
			letter-spacing: 1px;
			-webkit-transition: all 1s cubic-bezier(.77,0,.175,1);
			   -moz-transition: all 1s cubic-bezier(.77,0,.175,1);
			    -ms-transition: all 1s cubic-bezier(.77,0,.175,1);
			     -o-transition: all 1s cubic-bezier(.77,0,.175,1);
			        transition: all 1s cubic-bezier(.77,0,.175,1);
			transition-property: top, opacity;
		}

			.ots-header.active .header--left h1 
			{
				top: 0;
				opacity: 1;
			}

			.ots-header.active .header--left h1 span
			{
				color: var(--blue);
			}

			@keyframes slide-in {
			  	from {
			  		top: 0;
			  		opacity: 0;
			 	}
			 	to {
			  		top: 0;
			  		opacity: 1;
			 	}
			}


		.ots-header .header--left p
		{
			position: relative;
			/*max-width: 600px;*/
			width: 100%;
			font-size: 18px;
			line-height: 36px;
			left: -20px;
			opacity: 0;
		}

		.ots-header.active .header--left p
		{
			left: 0;
			opacity: 1;
			-webkit-transition: all 1s cubic-bezier(.77,0,.175,1);
			   -moz-transition: all 1s cubic-bezier(.77,0,.175,1);
			    -ms-transition: all 1s cubic-bezier(.77,0,.175,1);
			     -o-transition: all 1s cubic-bezier(.77,0,.175,1);
			        transition: all 1s cubic-bezier(.77,0,.175,1);
			transition-property: left, opacity;
		}

		.ots-header .header--left .input
		{
			width: 100%;
			position: relative;
			z-index: 1;
			bottom: -20px;
			opacity: 0;
		}

		.ots-header.active .header--left .input
		{
			bottom: 0;
			opacity: 1;
			-webkit-transition: all 1s cubic-bezier(.77,0,.175,1);
			   -moz-transition: all 1s cubic-bezier(.77,0,.175,1);
			    -ms-transition: all 1s cubic-bezier(.77,0,.175,1);
			     -o-transition: all 1s cubic-bezier(.77,0,.175,1);
			        transition: all 1s cubic-bezier(.77,0,.175,1);
		}

		.ots-header .header--left .input:before
		{
			content: "";
			position: absolute;
			left:165px;
			top: 55px;
			width: 183px;
			height: 183px;
			background: url('../images/outstaffing/dark-dots.svg');
		}

			.ots-header .header--left .input a
			{
				position: absolute;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 50px;
				height: 50px;
				background: var(--yellow);
				color: var(--dark);
				font-size: 20px;
				border-radius: 100%;
				right: calc(-30% + 20px);
				top: 12.5px;
				-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);
			}
			
			.ots-header.active .header--left .input a:hover
			{
				-webkit-transform: rotate(360deg);
				   -moz-transform: rotate(360deg);
				    -ms-transform: rotate(360deg);
				     -o-transform: rotate(360deg);
				        transform: rotate(360deg);
			}

			.ots-header .header--left .input input
			{
				width: 130%;
				height: 75px;
				position: absolute;
				background: #fff;
				color: var(--blue);
				padding: 0 20px;
				font-size: 18px;
				font-family: 'Poppins', sans-serif;
				font-weight: 600;
				border: none;
				outline: none;
				box-shadow: 0 10px 30px 0px rgba(0, 0, 0, .1);
			}

				.ots-header .header--left .input input::placeholder
				{
					font-weight: 400;
				}


	.ots-header .header--right
	{
		width: 50%;
		position: relative;
		height: 100%;
		z-index: 1;
	}

		.ots-header .header--right .image-wrap
		{
			position: absolute;
			display: flex;
			align-items: center;
			top: -20px;
			width: 780px;
			height: 780px;
			border-radius: 100%;
			overflow: hidden;
			-webkit-transition: all 0.8s cubic-bezier(.77,0,.175,1);
			   -moz-transition: all 0.8s cubic-bezier(.77,0,.175,1);
			    -ms-transition: all 0.8s cubic-bezier(.77,0,.175,1);
			     -o-transition: all 0.8s cubic-bezier(.77,0,.175,1);
			        transition: all 0.8s cubic-bezier(.77,0,.175,1);
			box-shadow: 0 40px 80px 0 rgba(0, 0, 0, 0.15);
			-webkit-transform: scale(0.9);
			   -moz-transform: scale(0.9);
			    -ms-transform: scale(0.9);
			     -o-transform: scale(0.9);
			        transform: scale(0.9);
			opacity: 0;
		}

		.ots-header.active .header--right .image-wrap
		{
			opacity: 1;
			-webkit-transform: scale(1);
			   -moz-transform: scale(1);
			    -ms-transform: scale(1);
			     -o-transform: scale(1);
			        transform: scale(1);
			transition-delay: 0.5s;
		}
		
			.ots-header.active .header--right .image-wrap .rewrap
			{
				position: absolute;
				height: 100%;
				display: flex;
				top: 0;
				right: 0;
				justify-content: center;
				align-items: center;
				background: #042552;
			}

			.ots-header .header--right .image-wrap img
			{
				min-width: 100%;
				min-height: 100%;
				object-fit: cover;
				-webkit-transform: scale(1);
				   -moz-transform: scale(1);
				    -ms-transform: scale(1);
				     -o-transform: scale(1);
				        transform: scale(1);
				-webkit-transition: all 0.25s linear;
				   -moz-transition: all 0.25s linear;
				    -ms-transition: all 0.25s linear;
				     -o-transition: all 0.25s linear;
				        transition: all 0.25s linear;
				opacity: 0.4;
			}

.ots-title
{
	display: flex;
	align-items: center;
}


	.ots-title h2
	{
		opacity: 1;
		color: var(--dark);
		text-align: right;
		font-size: 66px;
		line-height: 66px;
		position: relative;
		letter-spacing: 1px;
	}

/* 	.ots-title h1.splitting,
	.ots-title h3.splitting
	{
		opacity: 1;
	}

	.ots-title h1.splitting .char,
	.ots-title h3.splitting .char
	{
		position: relative;
		animation: slide-in 0.5s cubic-bezier(.77,0,.175,1) both;
		animation-delay: calc(50ms * var(--char-index));
	} */

	.ots-title .line
	{
		width: 5px;
		background: var(--red);
		height: 115px;
		opacity: 1;
		margin: 0 20px;
		-webkit-transition: all 1s cubic-bezier(.77,0,.175,1);
		   -moz-transition: all 1s cubic-bezier(.77,0,.175,1);
		    -ms-transition: all 1s cubic-bezier(.77,0,.175,1);
		     -o-transition: all 1s cubic-bezier(.77,0,.175,1);
		        transition: all 1s cubic-bezier(.77,0,.175,1);
	}

	.ots-title span
	{
		color: var(--blue);
		text-transform: uppercase;
		font-size: 24px;
		line-height: 40px;
		font-weight: 900;
	}



/************************************************************
    What is Outstaffing?
*************************************************************/

.what-is-outstaffing
{
	padding: 170px 0;
}

	.what-is-outstaffing .content
	{
		margin-top: 100px;
		position: relative;
	}

		.what-is-outstaffing .content .left--side,
		.what-is-outstaffing .content .right--side
		{
			display: flex;
			width: 100%;
			height: 100%;
			position: relative;
			flex: 0 0 auto
		}
		
			.what-is-outstaffing .content p
			{
				position: relative;
				font-size: 16px;
				line-height: 30px;
				color: var(--dark);
				top: -20px;
				opacity: 0;
				-webkit-transition: all 1s cubic-bezier(.77,0,.175,1);
				   -moz-transition: all 1s cubic-bezier(.77,0,.175,1);
				    -ms-transition: all 1s cubic-bezier(.77,0,.175,1);
				     -o-transition: all 1s cubic-bezier(.77,0,.175,1);
				        transition: all 1s cubic-bezier(.77,0,.175,1);
				transition-property: top, opacity;
			}

			.what-is-outstaffing.active .content p
			{
				top: 0;
				opacity: 1;
				padding-left: 50px;
			}

		.what-is-outstaffing .content .left--side:before
		{
			content: "";
			position: absolute;
			top: 160px;
			right: 200px;
			width: 0%;
			height: 100%;
			background: var(--yellow);
			z-index: -2;
			-webkit-transition: all 1s cubic-bezier(.77,0,.175,1);
			   -moz-transition: all 1s cubic-bezier(.77,0,.175,1);
			    -ms-transition: all 1s cubic-bezier(.77,0,.175,1);
			     -o-transition: all 1s cubic-bezier(.77,0,.175,1);
			        transition: all 1s cubic-bezier(.77,0,.175,1);
		}

		.what-is-outstaffing.active .content .left--side:before
		{
			width: 100%;
			transition-delay: 1s;
		}

				.what-is-outstaffing .content .image-wrap
				{
					width: 100%;
					height: 100%;
					position: relative;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.what-is-outstaffing .content .image-wrap .rewrap
				{
					width: 100%;
					max-height: 100%;
					position: relative;
					display: flex;
					justify-content: center;
					align-items: center;
					box-shadow: 0 40px 80px 0 rgba(0, 0, 0, 0.15);
					overflow: hidden;
				}

				/* .what-is-outstaffing .content .image-wrap:after
				{
					content: "";
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					right: 0;
					background: #fff;
					-webkit-transition: width 1s cubic-bezier(.77,0,.175,1);
					   -moz-transition: width 1s cubic-bezier(.77,0,.175,1);
					    -ms-transition: width 1s cubic-bezier(.77,0,.175,1);
					     -o-transition: width 1s cubic-bezier(.77,0,.175,1);
					        transition: width 1s cubic-bezier(.77,0,.175,1);
				}

				.what-is-outstaffing.active .content .image-wrap:after
				{
					width: 0;
				} */

				.what-is-outstaffing.active .content .image-wrap:before
				{
					content: "";
					position: absolute;
					left: -50px;
					bottom: -100px;
					width: 183px;
					height: 183px;
					z-index: -1;
					background: url('../images/outstaffing/dark-dots.svg');
				}

					.what-is-outstaffing .content .image-wrap img
					{
						width: 100%;
						object-fit: cover;
						-webkit-transform: scale(1.2);
						   -moz-transform: scale(1.2);
						    -ms-transform: scale(1.2);
						     -o-transform: scale(1.2);
						        transform: scale(1.2);
						-webkit-transition: all 0.25s linear;
						   -moz-transition: all 0.25s linear;
						    -ms-transition: all 0.25s linear;
						     -o-transition: all 0.25s linear;
						        transition: all 0.25s linear;
					}


/************************************************************
    How does it work?
*************************************************************/

.how-work
{
	padding: 170px 0 80px;
}

	.ots--subtitle
	{
		position: relative;
		font-size: 18px;
		line-height: 36px;
		max-width: 980px;
		width: 100%;
		top: -20px;
		opacity: 0;
		-webkit-transition: all 1s cubic-bezier(.77,0,.175,1);
		   -moz-transition: all 1s cubic-bezier(.77,0,.175,1);
		    -ms-transition: all 1s cubic-bezier(.77,0,.175,1);
		     -o-transition: all 1s cubic-bezier(.77,0,.175,1);
		        transition: all 1s cubic-bezier(.77,0,.175,1);
	}

	.active .ots-title:after
	{
		content: "";
		position: absolute;
		right: 0;
		top: 20;
		width: 183px;
		height: 183px;
		z-index: -1;
		background: url('../images/outstaffing/dark-dots.svg');
	}

	.active .ots--subtitle
	{
		top: 0;
		opacity: 1;
	}


	.how-work .work-steps
	{
		position: relative;
		margin-top: 70px;
		z-index: 7;
	}

	.how-work .work-steps:before
	{
		content: "";
		background: var(--yellow);
		width: 100%;
		height: 95%;
		position: absolute;
		top: 10%;
		left: 0;
		z-index: -1;
				clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%);
	    -webkit-clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%);
	       -moz-clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%);
	         -o-clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%);
	        -ms-clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%);
	}

		.how-work .work-steps .steps > div
		{
			position: relative;
			top: 0;
			-webkit-transition: all .5s linear;
			   -moz-transition: all .5s linear;
			    -ms-transition: all .5s linear;
			     -o-transition: all .5s linear;
			        transition: all .5s linear;
		}

		.how-work .work-steps .steps > div:first-child
		{
			top: 100px;
		}

		.how-work .work-steps .steps > div:nth-child(1):before
		{
			content: "";
			position: absolute;
			width: 193px;
			height: 119px;
			bottom: -80px;
			right: -100px;
			background: url('../images/outstaffing/arrow.svg');
			opacity: 0.1;
		}

		.how-work .work-steps .steps > div:nth-child(3):after
		{
			content: "";
			position: absolute;
			width: 193px;
			height: 119px;
			top: -150px;
			left: -50px;
			transform: scaleY(-1) rotate(-15deg);
			background: url('../images/outstaffing/arrow.svg');
			opacity: 0.1;
		}
		
		.how-work .work-steps .steps > div:nth-child(2):before
		{
			content: "";
			position: absolute;
		    right: -90px;
			bottom: -130px;
			width: 183px;
			height: 183px;
			z-index: -1;
			background: url('../images/outstaffing/dark-dots.svg');
		}

		.how-work .work-steps .steps > div:last-child
		{
			top: 80px;
		}

		.how-work .work-steps .steps .box
		{
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			padding: 40px 25px;
			box-shadow: 0 20px 80px 0 rgba(0, 0, 0, .15);
			border: 1px solid #EEEEEE;
			background: #fff;
		}

			.how-work .work-steps .steps .box .box-header
			{
				position: relative;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 0 0 15px;
				border-bottom: 3px solid #eee;
			}

				.how-work .work-steps .steps .box .box-header h3
				{
					font-size: 28px;
					color: var(--dark);
					line-height: 30px;
					font-weight: 900;
					padding-right: 80px;
				}

				.how-work .work-steps .steps .box .box-header span
				{
					position: absolute;
					bottom: 7px;
					right: 0;
					color: #eee;
					font-family: Gilroy;
					font-size: 110px;
					font-weight: 900;
					line-height: 60px;
				}

			.how-work .work-steps .steps .box .box-content
			{
				padding: 20px 0 0;	
				font-size: 16px;
				color: #555;
			}

				.how-work .work-steps .steps .box .box-content p
				{
					font-weight: 600;
				}

				.how-work .work-steps .steps .box .box-content ul li
				{
					position: relative;
					line-height: 24px;
					margin-top: 25px;
					font-weight: 400;
					padding-left: 45px;
				}

				.how-work .work-steps .steps .box .box-content ul li:before
				{
					content: '\f00c';
					width: 30px;
					height: 30px;
					position: absolute;
					top: 5px;
					left: 0;
					display: flex;
					justify-content: center;
					align-items: center;
					font-family: 'Font Awesome 5 Pro';
				    font-weight: 900;
					font-size: 12px;
					color: #fff;
					background: var(--blue);
					box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .1);
					border-radius: 100%;
				}

	.how-work .work-steps-content
	{
		padding-top: 200px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		z-index: 14;
	}
	
	.how-work .work-steps .float-shapes
	{
		z-index: 0;
	}

		.how-work .work-steps-content .left--side
		{
			padding: 0;
			z-index: 1;
			width: 70%;
		}

		.how-work .work-steps-content .right--side
		{
			width: 70%;
			z-index: 1;
		}

			.how-work .work-steps-content .left--side p
			{
				font-size: 16px;
				color: var(--dark);
				line-height: 36px;
				display: inline-block;
				vertical-align: top;
				width: 45%;
			}

			.how-work .work-steps-content .left--side p:first-child
			{
				margin-right: 9%;
			}

		.how-work .work-steps-content .steps-slider
		{
			width: 100%;
			display: block;
			position: relative;
			z-index: 5;
			margin: 100px 0 0;
			padding: 50px 0 0;
		}

		.how-work .work-steps-content .steps-slider .owl-stage-outer
		{
			cursor: url('../images/outstaffing/cursor.svg?time=2'), auto;
		}


			.how-work .work-steps-content .steps-slider .slider__slide
			{
				position: relative;
				outline: none;
				display: inline-block;
				opacity: .7;
				-webkit-transition: all 1s cubic-bezier(.77,0,.175,1);
				   -moz-transition: all 1s cubic-bezier(.77,0,.175,1);
				    -ms-transition: all 1s cubic-bezier(.77,0,.175,1);
				     -o-transition: all 1s cubic-bezier(.77,0,.175,1);
				        transition: all 1s cubic-bezier(.77,0,.175,1);
			}

			
			.how-work .work-steps-content .steps-slider .active.center .slider__slide
			{
				opacity: 1;
			}
				
				.how-work .work-steps-content .steps-slider .active.center .slider__slide .box
				{
					background: #fff;
					box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .1);
					-webkit-transition: all .6s cubic-bezier(.77,0,.175,1);
				   	   -moz-transition: all .6s cubic-bezier(.77,0,.175,1);
					    -ms-transition: all .6s cubic-bezier(.77,0,.175,1);
					     -o-transition: all .6s cubic-bezier(.77,0,.175,1);
					        transition: all .6s cubic-bezier(.77,0,.175,1);
				}
.magnet {
  transition: transform .3s ease;
}
.magnet {
  display: inline-block;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: all .5s ease;
}
.magnet-mouse-active {
  background-color: #000000;
}
				.how-work .work-steps-content .steps-slider .slider__slide .box
				{
					width: 100%;
					padding: 30px;
					font-size: 16px;
					line-height: 30px;
					color: var(--dark);
					display: inline-block;
					overflow: hidden;
					-webkit-transition: all .6s cubic-bezier(.77,0,.175,1);
				   	   -moz-transition: all .6s cubic-bezier(.77,0,.175,1);
					    -ms-transition: all .6s cubic-bezier(.77,0,.175,1);
					     -o-transition: all .6s cubic-bezier(.77,0,.175,1);
					        transition: all .6s cubic-bezier(.77,0,.175,1);
				}

					.how-work .work-steps-content .steps-slider .slider__slide .box span
					{
						padding: 10px;
						width: 50px;
						height: 50px;
						display: flex;
						justify-content: center;
						align-items: center;
						font-weight: 900;
						font-size: 20px;
						line-height: 20px;
						color: #fff;
						margin-bottom: 10px;
						border-radius: 50%;
						position: relative;
						z-index: 2;
					}

					.how-work .work-steps-content .steps-slider .center .slider__slide .box span::before
					{
						content: "";
						width: 50px;
						height: 50px;
						border: 2px solid white;
						border-radius: 50%;
						position: absolute;
						opacity: 0;
						transition: opacity .2s ease-out;
					}

						.how-work .work-steps-content .steps-slider .center .slider__slide .box:hover span::before
						{
							opacity: 1;
						}


					.how-work .work-steps-content .steps-slider .center .slider__slide .box span::after
					{
						content: "";
						width: 10px;
						height: 10px;
						display: block;
						background-color: inherit;
						transition: transform .3s ease;
						border-radius: 50%;
						position: absolute;
						z-index: -1;
					}

						.how-work .work-steps-content .steps-slider .center .slider__slide .box:hover span::after
						{
							transform: scale(90);
						}

					.how-work .work-steps-content .steps-slider .center .slider__slide .box p 
					{
						transition: color .2s ease-out;
						transition-delay: .1s;
						position: relative;
						z-index: 2;
					}

						.how-work .work-steps-content .steps-slider .center .slider__slide .box:hover p
						{
							transition-delay: 0s;
							color: white;
						} 

					.steps-slider .slider__slide .box span.blue { background: var(--blue); }
					.steps-slider .slider__slide .box span.orange { background: #EA751C; }
					.steps-slider .slider__slide .box span.red { background: var(--red); }
					.steps-slider .slider__slide .box span.canary { background: #3A41B0; }
					.steps-slider .slider__slide .box span.dark { background: var(--dark); }
					.steps-slider .slider__slide .box span.green { background: #28D0A4; }
						
					.owl-carousel .owl-stage
					{
						padding: 50px 0;
					}

					.steps-slider .owl-nav
					{
						position: absolute;
						top: 0px;
						left: 0;
						width: 100%;
						font-size: 25px;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						z-index: 1;
					}

					.steps-slider .owl-dot
					{
						width: 210px;
						position: absolute;
						top: 0;
						left: 0;
						font-size: 25px;
						font-weight: 900;
						display: flex;
						justify-content: center;
						align-items: center;
						z-index: 0;
						opacity: 0;
						color: rgba(0, 0, 0, .4);
						outline: none;
						-webkit-transition: all .3s ease;
						   -moz-transition: all .3s ease;
						    -ms-transition: all .3s ease;
						     -o-transition: all .3s ease;
						        transition: all .3s ease;
					}
						
						.steps-slider .owl-dot button
						{
							width: unset;
							outline: none;
							position: relative;
							opacity: 0;
							top: -10px;
							margin-right: 10px;
							width: 30px;
						}
					
						.steps-slider .owl-dot.active 
						{
							opacity: 1;
						}

						.steps-slider .owl-dot.active button
						{
							top: 0;
							opacity: 1;
							color: var(--blue);	
						}
						
						.steps-slider .owl-nav button
						{
							outline: none;
							box-shadow: none;
							padding: 10px;
							display: flex;
							opacity: .4;
							-webkit-transition: all .3s ease;
							   -moz-transition: all .3s ease;
							    -ms-transition: all .3s ease;
							     -o-transition: all .3s ease;
							        transition: all .3s ease;
						}

						.owl-carousel .owl-nav button.disabled:hover
						{
							opacity: .4;
						}
						.owl-carousel .owl-nav button:hover
						{
							opacity: .6;
						}
						.owl-carousel .owl-nav button.owl-prev
						{
							margin-right: 170px !important;
						}


/************************************************************
    Why to choose outstaffing
*************************************************************/

.benefits
{
	padding: 150px 0 0;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}
	.benefits .float-shapes
	{
		z-index: -1;
		display: none;
	}

	.benefits .benefits__slider
	{
		position: relative;
		display: block;
		margin: 50px 0 0;
		z-index: 10;
	}

		.benefits .owl-carousel.owl-drag .owl-item .item
		{
			padding: 0 10%;
		}

			.benefits .benefits__slide .left--side
			{
				text-align: center;
			}

				.benefits .benefits__slide .left--side img
				{
					height: 250px;
				}

				.benefits .benefits__slide .left--side img,
				.benefits .benefits__slide .right--side h3,
				.benefits .benefits__slide .right--side p
				{
					position: relative;

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

				.benefits .benefits__slide.active .left--side img,
				.benefits .benefits__slide.active .right--side h3,
				.benefits .benefits__slide.active .right--side p
				{
					opacity: 1;
				}


		.benefits .benefits__slide .left--side
		{
			position: relative;
			top: -20px;
			opacity: 0;
			-webkit-transition: all .6s cubic-bezier(.77,0,.175,1);
		   	   -moz-transition: all .6s cubic-bezier(.77,0,.175,1);
			    -ms-transition: all .6s cubic-bezier(.77,0,.175,1);
			     -o-transition: all .6s cubic-bezier(.77,0,.175,1);
			        transition: all .6s cubic-bezier(.77,0,.175,1);
		}

		.benefits.active .benefits__slide .left--side
		{
			top: 0;
			opacity: 1;
		}

		.benefits .benefits__slide.active .right--side h3,
		.benefits .benefits__slide.active .right--side p
		{	
			position: relative;
			opacity: 0;
			top: -20px;
			-webkit-transition: all .6s cubic-bezier(.77,0,.175,1);
		   	   -moz-transition: all .6s cubic-bezier(.77,0,.175,1);
			    -ms-transition: all .6s cubic-bezier(.77,0,.175,1);
			     -o-transition: all .6s cubic-bezier(.77,0,.175,1);
			        transition: all .6s cubic-bezier(.77,0,.175,1);
		}

		.benefits .benefits__slide.active .right--side p
		{
			top: 20px;
		}

		.benefits.active .benefits__slide.active .right--side h3,
		.benefits.active .benefits__slide.active .right--side p
		{
			opacity: 1;
			top: 0;
		}


	.benefits .owl-dots
	{
		display: flex;
		align-items: stretch;
		width: 100%;
		position: relative;
		-webkit-transition: all 1s cubic-bezier(.77,0,.175,1);
	   	   -moz-transition: all 1s cubic-bezier(.77,0,.175,1);
		    -ms-transition: all 1s cubic-bezier(.77,0,.175,1);
		     -o-transition: all 1s cubic-bezier(.77,0,.175,1);
		        transition: all 1s cubic-bezier(.77,0,.175,1);
	}

		.benefits .owl-dots
		{
			overflow-y: auto;
		}

		.benefits .owl-dot
		{
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			width: 100%;
			text-align: center;
			padding: 25px 0;
			min-width: 200px;
		}

			.benefits .owl-dot button
			{
				z-index: 1;
				background: none;
				outline: none;
				border: none;
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				cursor: pointer;
			}

			.benefits .owl-dot button img,
			.benefits .owl-dot button p
			{
				z-index: -1;
			}

		.benefits .owl-dot.active
		{
			background: var(--blue);
			-webkit-transition: all .4s cubic-bezier(.77,0,.175,1);
		   	   -moz-transition: all .4s cubic-bezier(.77,0,.175,1);
			    -ms-transition: all .4s cubic-bezier(.77,0,.175,1);
			     -o-transition: all .4s cubic-bezier(.77,0,.175,1);
			        transition: all .4s cubic-bezier(.77,0,.175,1);
		}

				.benefits .owl-dot img
				{
					opacity: 0.15;
					-webkit-transition: all .4s cubic-bezier(.77,0,.175,1);
				   	   -moz-transition: all .4s cubic-bezier(.77,0,.175,1);
					    -ms-transition: all .4s cubic-bezier(.77,0,.175,1);
					     -o-transition: all .4s cubic-bezier(.77,0,.175,1);
					        transition: all .4s cubic-bezier(.77,0,.175,1);
				}

				.benefits .owl-dot p
				{
					font-size: 18px;
					font-weight: 700;
					color: var(--light);
					margin-top: 5px;
					-webkit-transition: all .4s cubic-bezier(.77,0,.175,1);
				   	   -moz-transition: all .4s cubic-bezier(.77,0,.175,1);
					    -ms-transition: all .4s cubic-bezier(.77,0,.175,1);
					     -o-transition: all .4s cubic-bezier(.77,0,.175,1);
					        transition: all .4s cubic-bezier(.77,0,.175,1);
				}

				.benefits .owl-dot.active img
				{
					opacity: 1;
					filter: invert(1);
				}

				.benefits .owl-dot.active:hover img
				{
					opacity: 1;
				}

				.benefits .owl-dot:hover img
				{
					color: var(--blue);
				}

				.benefits .owl-dot.active p
				{
					color: #fff;
				}




/************************************************************
    Easy Team Growth
*************************************************************/

.team
{
	background: var(--dark);
	padding: 150px 0 150px;
}

	.team .ots-title:after
	{
		background: url('../images/outstaffing/light-dots.svg?time=1');
		z-index: 5;
	}

	.team .ots--subtitle
	{
		color: #fff;
	}

	.team .ots-title h2
	{
		color: #fff;
	}

	.team .features
	{
		position: relative;
		color: #fff;
		margin: 0 -80px;
	}

		.team .features .col-xs-12
		{
			padding: 0 80px;
		}

		.team .features .feature
		{
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin-top: 150px;
			position: relative;
			/* top: 20px; */
			/* opacity: 0; */
			-webkit-transition: all .6s ease;
			   -moz-transition: all .6s ease;
			    -ms-transition: all .6s ease;
			     -o-transition: all .6s ease;
			        transition: all .6s ease;
		}

		/* .team .features .feature.active
		{
			top: 0;
			opacity: 1;
		} */

		.team .features .a .feature { transition-delay: 0.1s }
		.team .features .b .feature { transition-delay: 0.2s }
		.team .features .c .feature { transition-delay: 0.3s }
		.team .features .d .feature { transition-delay: 0.1s }
		.team .features .e .feature { transition-delay: 0.2s }
		.team .features .f .feature { transition-delay: 0.3s }

		.team .features .a .feature:after
		{
			content: "";
		    position: absolute;
		    right: -40px;
		    bottom: -150%;
		    width: 183px;
		    height: 183px;
		    z-index: -1;
		    background: url('../images/outstaffing/light-dots.svg?time=1');
		    z-index: 5;
		}

			.team .features .feature .feature--header
			{
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

				.team .features .feature .feature--header span
				{
					width: 65px;
				}
					
					.team .features .feature .feature--header span img
					{
						max-width: 100%;
					}

				.team .features .feature .feature--header h3
				{
					font-size: 24px;
					font-weight: 900;
					line-height: 30px;
					width: 100%;
					padding-left: 25px;
				}

			.team .features .feature .feature--content
			{
				width: 100%;
				margin-top: 20px;
				font-size: 16px;
				color: #fff;
			}


.facts
{
	padding: 150px 0;
}

	.facts .all-facts
	{
		margin-top: 100px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

		.facts.active .all-facts .fact
		{
			top: 0;
			opacity: 1;
		}
		
		.facts .all-facts .line
		{
			width: 1px;
			height: 40px;
			background: #ddd;
		}

		.facts .all-facts .fact
		{
			/* width: 20%; */
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			position: relative;
			top: 30px;
			opacity: 0;
			text-align: right;
			padding: 0 30px 0 20px;
			-webkit-transition: all 1s cubic-bezier(.47,1.64,.41,.8);
			   -moz-transition: all 1s cubic-bezier(.47,1.64,.41,.8);
			    -ms-transition: all 1s cubic-bezier(.47,1.64,.41,.8);
			     -o-transition: all 1s cubic-bezier(.47,1.64,.41,.8);
			        transition: all 1s cubic-bezier(.47,1.64,.41,.8);
			transition-property: opacity, top;
		}

		.facts .all-facts .fact:nth-child(1) { transition-delay: 0.1s; }
		.facts .all-facts .fact:nth-child(2) { transition-delay: 0.2s; }
		.facts .all-facts .fact:nth-child(3) { transition-delay: 0.3s; }
		.facts .all-facts .fact:nth-child(4) { transition-delay: 0.4s; }
		.facts .all-facts .fact:nth-child(5) { transition-delay: 0.5s; }

			.facts .all-facts .fact p
			{
				font-size: 14px;
				text-transform: uppercase;
				font-weight: 600;
				color: var(--light);
				margin: 0;
				line-height: 14px;
			}

			.facts .all-facts .fact h3
			{
				font-size: 40px;
				font-weight: 900;
				color: var(--blue);
				margin: 5px 0;
				line-height: 40px;
			}

			.facts .all-facts .fact:first-child h3
			{
				border-left: 0;
			}

			.facts .all-facts .fact span
			{
				display: block;
				width: 25px;
				height: 3px;
				background: var(--red);
				margin: 0 0 10px auto;
			}

.facts-content
{
	padding: 0 0 50px;
}

	.facts-content .fact-content
	{
		padding: 100px 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
		.facts-content .fact-content .left--side,
		.facts-content .fact-content .right--side
		{
			width: 47.5%;
		}

		.facts-content .fact-content .left--side
		{
			text-align: left;
		}
		.facts-content .fact-content .left--side.image
		{
			text-align: left;
		}


		.facts-content .fact-content .right--side.image
		{
			text-align: right;
		}

		.facts-content .fact-content h3
		{
			font-size: 60px;
			line-height: 70px;
			font-weight: 900;
			letter-spacing: 1px;
			color: var(--dark);
			margin-bottom: 40px;
		}

		.facts-content .fact-content p
		{
			font-size: 16px;
			line-height: 30px;
			color: var(--light);
		}

		.facts-content .fact-content .img-wrap,
		.facts-content .fact-content .rewrap
		{
			max-width: 500px;
			max-height: 450px;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			position: relative;
			/*box-shadow: 0 40px 80px 0 rgba(0, 0, 0, 0.15);*/
		}

		.facts-content .fact-content .img-wrap
		{
			box-shadow: 4px 20px 47px 0 rgba(0,0,0,0.1);
			transition-property: box-shadow;
			transition-duration: .3s;
			transition-timing-function: ease-out;
		}

		.facts-content .fact-content .img-wrap:hover
		{
			/*box-shadow: 0 14px 42px 0 rgba(0,0,0,.2);*/
			box-shadow: 4px 20px 20px 0 rgba(0,0,0,0.17);
		}

		.facts-content .fact-content .rewrap
		{
			overflow: hidden;
		}

		.facts-content .fact-content .img-wrap:before
		{
			content: "";
			width: 100%;
			height: 110%;
			position: absolute;
			background: url('../images/outstaffing/mini-dots.svg');
			background-size: 100%;
			background-repeat: no-repeat;
			z-index: -1;
			top: -5%;
		}

		.facts-content .fact-content .right--side .img-wrap:before
		{
    		left: -50px;
		}
		.facts-content .fact-content .left--side .img-wrap:before
		{
    		right: -50px;
		}


		.facts-content .rewrap:hover img 
		{
			/*transform: scale(1.1) !important;*/
			transform: scale(1.15,1.15)  !important;
			transition: transform 10s cubic-bezier(.19,1,.22,1) !important;
		}

		/* .facts-content .fact-content .img-wrap .rewrap img
		{
			content: "";
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			right: 0;
			background: #fff;
			-webkit-transition: width .8s cubic-bezier(.77,0,.175,1);
			   -moz-transition: width .8s cubic-bezier(.77,0,.175,1);
			    -ms-transition: width .8s cubic-bezier(.77,0,.175,1);
			     -o-transition: width .8s cubic-bezier(.77,0,.175,1);
			        transition: width .8s cubic-bezier(.77,0,.175,1);
		}
		
		.facts-content .fact-content.active .img-wrap .rewrap:after
		{
			width: 0;
		} */

			.facts-content .fact-content .img-wrap img
			{
				width: 100%;
				height: 100%;
				object-fit: cover;
				-webkit-transform: scale(1.2);
				   -moz-transform: scale(1.2);
				    -ms-transform: scale(1.2);
				     -o-transform: scale(1.2);
				        transform: scale(1.2);
				-webkit-transition: transform .8s cubic-bezier(.77,0,.175,1);
				   -moz-transition: transform .8s cubic-bezier(.77,0,.175,1);
				    -ms-transition: transform .8s cubic-bezier(.77,0,.175,1);
				     -o-transition: transform .8s cubic-bezier(.77,0,.175,1);
				        transition: transform .8s cubic-bezier(.77,0,.175,1);
			}

			.facts-content .fact-content.active .img-wrap img
			{
				-webkit-transform: scale(1.02);
				   -moz-transform: scale(1.02);
				    -ms-transform: scale(1.02);
				     -o-transform: scale(1.02);
				        transform: scale(1.02);
			}

	
		
/************************************************************
    Technologies we use
*************************************************************/

.technologies
{
	padding: 150px 0;
	background: var(--dark);
}

	.technologies .ots-title h2
	{
		color: #fff;
	}

	.technologies .ots-title:after
	{
		background: url('../images/outstaffing/light-dots.svg?time=1');
		z-index: 5;
	}

		
	.technologies .all-tech
	{
		position: relative;
		margin: 0 -40px;
		z-index: 100;
	}

		.technologies .all-tech > div
		{
			padding: 0 40px;
		}

		.technologies .all-tech .tech
		{
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			margin-top: 100px;
		}
		
			.technologies .all-tech .tech .icon
			{
				width: 65px;
			}

				.technologies .all-tech .tech .icon img
				{
					max-width: 100%;
				}

			.technologies .all-tech .tech .tech-content
			{
				width: 100%;
				padding-left: 20px;
				display: flex;
				flex-direction: column;
			}

				.technologies .all-tech .tech .tech-content h3
				{
					font-size: 24px;
					font-weight: 900;
					color: var(--yellow);
					line-height: 30px;
					margin-bottom: 10px;
				}

				.technologies .all-tech .tech .tech-content p
				{
					color: #fff;
					font-size: 16px;
					line-height: 30px;
					margin-bottom: 20px;
				}

				.technologies .all-tech .tech .tech-content ul
				{
					display: block;
					vertical-align: middle;
					font-size: 0;
				}	

					.technologies .all-tech .tech .tech-content ul li:after
					{
						content: attr(data-tooltip);
						position: absolute;
						top: -35px;
						border-radius: 20px;
						padding: 8px 15px;
						white-space: nowrap;
						background: var(--blue);
						color: #fff;
						font-size: 12px;
						font-weight: 500;
					}
					
					.technologies .all-tech .tech .tech-content ul li:before
					{
						content: "";
						width: 0px;
						height: 0px;
						top: -8px;
						position: absolute;
						border: solid transparent;
						border-width: 8px 6px;
						border-top-color: var(--blue);
					}

					.technologies .all-tech .tech .tech-content ul li:after,
					.technologies .all-tech .tech .tech-content ul li:before
					{
						opacity: 0;
						visibility: hidden;
						left: 50%;
						transform: translate(-50%, -30px);
						transition: all .3s ease;
					}			

					.technologies .all-tech .tech .tech-content ul li:hover:after,
					.technologies .all-tech .tech .tech-content ul li:hover:before
					{
						visibility: visible;
						opacity: 1;
						transform: translate(-50%, 0);
					}

		
					.technologies .all-tech .tech .tech-content ul li
					{
						display: inline-flex;
						justify-content: center;
						align-items: center;
						width: 60px;
						height: 60px;
						background: rgba(255, 255, 255, .05);
						margin: 0 3px 3px 0;
						position: relative;
						-webkit-transition: all .3s ease;
						   -moz-transition: all .3s ease;
						    -ms-transition: all .3s ease;
						     -o-transition: all .3s ease;
						        transition: all .3s ease;
					}

						.technologies .all-tech .tech .tech-content ul li:hover
						{
							background: rgba(255, 255, 255, .15);
						}

						.technologies .all-tech .tech .tech-content ul li img
						{
							max-width: 40px;
							height: 30px;
						}


		
		
/************************************************************
    Contact
*************************************************************/

.contact 
{
	padding: 150px 0;
}

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

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

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


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

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

			.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: -100px;
				max-width: unset;
				width: 100%;
				font-weight: 500;
				line-height: 30px;
				margin: 0 auto;
			}

			div.wpcf7-validation-errors

			{
				background: var(--red);
			}

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

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

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

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

			.contact .contact-form .input-row input[type='text'],
			.contact .contact-form .input-row input[type='email'],
			.contact .contact-form .input-row .cs-placeholder,
			.contact .contact-form .input-row select,
			.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: 'Poppins', sans-serif;
				font-weight: 600;
			}

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

			.contact .contact-form .input-row.file
			{
				display: inline-block;
			}

			.contact .contact-form .input-row.file label
			{
				padding: 20px;
				border: 1px dashed #ddd;
				font-size: 18px;
				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;
			}
			.contact .contact-form .input-row.file:hover label
			{
				border-color: var(--blue);
				color: var(--blue);
			}

			.contact .contact-form .input-row.file:hover label i
			{
				color: var(--blue);
			}
			.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;
			}

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

			.contact .contact-form .input-row .cs-select > span::after
			{
				content: '\f107';
				color: #ccc;
				font-family: 'Font Awesome 5 Pro';
				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;
			}

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

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

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

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

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

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

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

			.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: var(--dark);
				font-size: 20px;
				font-family: 'Poppins', sans-serif;
				font-weight: 600;
				cursor: pointer;
				-webkit-transition: all .5s ease;
				   -moz-transition: all .5s ease;
				    -ms-transition: all .5s ease;
				     -o-transition: all .5s ease;
				        transition: all .5s ease;
			}

				.contact .contact-form .input-row button i:before
				{
					display: block;
				    animation: fadeNChangeOut 0.5s;
				    animation-fill-mode: forwards;
				}
				.contact .contact-form .input-row button:hover i:before
				{
					animation: fadeNChange 0.5s;
					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);
						}
					}


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

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

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

				.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;
				}
					
				.contact .contact-form .file i
				{
					color: var(--dark);
					margin-right: 10px;
				}

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



/************************************************************
    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;
	}

	.float-shapes .blured
	{
		filter: blur(3px);
	}

	.float-shapes .blured2
	{
		filter: blur(2px);
	}

	.float-shapes .blured5
	{
		filter: blur(5px);
		opacity: 0.7;
	}

	.ots-header .float-shapes i:first-child { top: 10vh; left: 4%; animation: 10s floatUp1 infinite; }
	.ots-header .float-shapes i:nth-child(2) { top: 15vh; left: 40%; animation: 20s dRotation infinite; }
	.ots-header .float-shapes i:nth-child(3) { top: 5vh; left: 90%; animation: 9s floatUp3 infinite; font-size: 30px; }
	.ots-header .float-shapes i:nth-child(4) { bottom: 10vh; left: 5%; animation: 17s floatUp4 infinite;  font-size: 33px; }
	.ots-header .float-shapes i:nth-child(5) { bottom: 15vh; left: 50%; animation: 10s floatUp2 infinite; }
	.ots-header .float-shapes i:nth-child(6) { bottom: 15vh; left: 92%; animation: 20s bRotation infinite; font-size: 33px; }
	.ots-header .float-shapes i:nth-child(7) { bottom: -5vh; left: 40%; animation: 15s floatUp4 infinite; }
	.ots-header .float-shapes i:nth-child(8) { bottom: -15vh; left: 80%; animation: 13s floatUp1 infinite; }
	.ots-header .float-shapes i:nth-child(9) { bottom: 50%; left: 7%; animation: 20s bRotation infinite; font-size: 43px; }
	.ots-header .float-shapes i:nth-child(10) { bottom: 65%; left: 45%; animation: 14s 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 dRotation infinite; }
	#sec3 .work-steps .float-shapes i:nth-child(1) { top: 70%; left: 85%; animation: 10s bRotation infinite; }
	#sec3 .work-steps .float-shapes i:nth-child(2) { top: 75%; left: 2%; animation: 15s dRotation infinite; font-size: 43px; }
	#sec3 .work-steps .float-shapes i:nth-child(3) { top: 95%; left: 92%; animation: 10s floatUp4 infinite; font-size: 20px; }
	#sec3 .work-steps .float-shapes i:nth-child(4) { top: 95%; left: 7%; animation: 10s floatUp1 infinite; font-size: 25px; }
	#sec3 .work-steps .float-shapes i:nth-child(5) { top: 99%; left: 50%; animation: 15s floatUp3 infinite; font-size: 25px; }

	#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 dRotation
	{
		0% { transform: translate(10px, 30px) rotate(0deg); }
		50% { transform: translate(40px, 5px) rotate(180deg); }
		100% { transform: translate(10px, 30px) rotate(360deg); }
	}

	@keyframes bRotation
	{
		0% { transform: translate(10px, -30px) rotate(0deg); }
		50% { transform: translate(40px, -5px) rotate(180deg); }
		100% { transform: translate(10px, -30px) rotate(360deg); }
	}

/************************************************************
    Responsive Big Resolution
*************************************************************/
	@media only screen and (min-width: 2000px)
	{
		.ots-header .header--left .input input
		{
			font-size: 20px;
		}

		.ots--subtitle
		{
			font-size: 24px;
			line-height: 48px;
		}

		.page-outstaffing .wrapper
		{
			width: 70%;
			max-width: unset;
		}

		nav
		{
			padding: 30px 15% 30px 15%;
		}
			

	/* --------- Header --------- */
		
		.ots-header.active:after
		{
			height: 300px;
		}

		.ots-header .header--left
		{
			padding: 0 20px 0 15%;
		}

		.ots-header .header--right
		{
			display: flex;
			align-items: center;
			z-index: 1;
		}

			.ots-header.active .header--left h1
			{
				font-size: 100px;
				line-height: 100px;
			}

			.ots-header.active .header--left p
			{
				font-size: 24px;
				line-height: 45px;
				max-width: 900px;
			}

		.ots-header .header--right .image-wrap
		{
			width: 1150px;
			height: 1150px;
			right: -50px;
			top: unset;
		}

			.ots-header.active .header--right .image-wrap .rewrap
			{
				width: 100%;
				height: 100%;
			}

				.ots-header.active .header--right .image-wrap .rewrap img
				{
					width: 100%;
					min-height: 100%;
					object-fit: cover;
				}



	/* --------- What is Outstaffing --------- */

		.what-is-outstaffing .content p
		{
			font-size: 22px;
			line-height: 42px;
		}


	/* --------- How does it work --------- */

	.how-work .work-steps .steps .box
	{
		width: 80%;
		margin: 0 10%;
	}

		.how-work .work-steps .steps .box .box-header h3
		{
			font-size: 30px;
			line-height: 34px;
		}


		.how-work .work-steps .steps .box .box-content p
		{
			font-size: 20px;
			line-height: 40px;
		}
		
		.how-work .work-steps .steps .box .box-content ul li
		{
			font-size: 20px;
			line-height: 40px;
		}

		.how-work .work-steps-content .left--side
		{

		}

			.how-work .work-steps-content .left--side p
			{
				font-size: 22px;
				line-height: 42px;
			}

			.how-work .work-steps-content .steps-slider .slider__slide .box p
			{
				font-size: 22px;
				line-height: 42px;
			}

		.how-work .work-steps-content .right--side
		{
			width: 70%;
		}

		.steps-slider .owl-dot button
		{
			width: 60px;
		}
		.steps-slider .owl-carousel .owl-nav button.owl-prev
		{
			margin-right: 220px;
		}
		.steps-slider .owl-dot
		{
			width: 270px;
		}
		.steps-slider .owl-nav,
		.steps-slider .owl-dot
		{
			font-size: 36px;
		}

	/* --------- Why to choose outstaffing --------- */

		.benefits .benefits__slide .right--side p
		{
			font-size: 22px;
			line-height: 42px;
		}

		.benefits .benefits__slider--options
		{
			max-width: 70%;
			margin: 0 auto;
		}



	/* --------- Easy Team Growth --------- */
		
		.team .features .feature .feature--header span
		{
			width: 85px;
		}

		.team .features .feature .feature--header h3
		{
			font-size: 30px;
			line-height: 40px;
		}

		.team .features .feature .feature--content
		{
			font-size: 22px;
			line-height: 42px;
		}


	/* --------- Why choose us? --------- */
		.facts .all-facts .fact p
		{
			font-size: 20px;
			line-height: 18px;
		}

		.facts .all-facts .fact h3
		{
			font-size: 60px;
			line-height: 60px;
		}
		
		.facts-content .fact-content .img-wrap, .facts-content .fact-content .rewrap
		{
			max-width: 700px;
			max-height: 650px;
		}

		.facts-content .fact-content .right--side .img-wrap:before
		{
			top: unset;
		}

		.facts-content .fact-content p
		{
			font-size: 22px;
			line-height: 42px;
		}

	/* --------- Technologies we use --------- */

		.technologies .all-tech .tech .icon
		{
			width: 85px;
		}

		.technologies .all-tech .tech .tech-content h3
		{
			font-size: 30px;
			line-height: 40px;
		}

		.technologies .all-tech .tech .tech-content p
		{
			font-size: 22px;
			line-height: 42px;
		}

	/* --------- Let's work together --------- */

		.contact .contact-form .input-row span
		{
			font-size: 22px;
		}

		.contact .contact-form .input-row button
		{
			font-size: 22px;
		}

		.contact .contact-form .input-row.file label
		{
			font-size: 22px;
		}

	/* --------- Footer --------- */

		.footer .mb-3 p, .footer ul li
		{
			font-size: 18px;
		}

}

	@media only screen and (min-width: 1800px)
	{
		.benefits .owl-carousel .owl-stage
		{
			padding: 15vh 0;
		}
		.owl-carousel .owl-nav button.owl-prev
		{
			margin-right: 220px !important;
		}
	}

	@media only screen and (min-width: 1800px) and (max-width: 2100px)
	{
		.ots-header .header--right
		{
			display: flex;
			justify-content: center;
			align-items: center;
		}
	
			.ots-header.active .header--left p
			{
				max-width: 700px;
			}

			.ots-header .header--left h1
			{
				font-size: 100px;
				line-height: 100px;
			}

			.ots-header .header--right .image-wrap
			{
				top: unset;
				width: 1000px;
				height: 1000px;
			}
	}

	@media only screen and (min-width: 2100px) and (max-width: 2900px)
	{
		.ots-header .header--right .image-wrap
		{
			width: 1300px;
			height: 1300px;
		}
	}
	@media only screen and (min-width: 2900px)
	{
		.team .features
		{
			margin: 0 -150px;
		}

		.team .features .col-xs-12
		{
			padding: 0 150px;
		}

		.ots-header.active .header--left h1
		{
			font-size: 140px;
			line-height: 140px;
		}

		.ots-header.active .header--left p
		{
			max-width: unset;
			font-size: 28px;
			line-height: 50px;
		}

		.ots-header .header--left .input input
		{
			height: 100px;
			font-size: 28px;
		}

		.ots-header .header--left .input a
		{
			width: 80px;
			height: 80px;
			top: 10px;
		}

		.ots-header .header--right .image-wrap
		{
			width: 1600px;
			height: 1600px;
		}

		.ots-title h1
		{
			font-size: 90px;
			line-height: 90px;
		}
		.ots-title h3
		{
			font-size: 30px;
		}
	
		.what-is-outstaffing
		{
			padding: 250px 0;
		}
		.what-is-outstaffing.active .content p
		{
			font-size: 28px;
			line-height: 55px;
		}

		.ots--subtitle
		{
			max-width: 1400px;
			font-size: 30px;
			line-height: 50px;
		}
		.how-work .work-steps-content .right--side
		{
			width: 70%;
		}
		.how-work .work-steps .steps .box .box-header h3
		{
			font-size: 36px;
			line-height: 50px;			
		}
		.how-work .work-steps .steps .box .box-content
		{
			padding: 40px 0 0;
		}
		.how-work .work-steps .steps .box .box-content ul li:before
		{
			width: 50px;
			height: 50px;
			font-size: 20px;
		}

		.how-work .work-steps .steps .box .box-content ul li
		{
			padding-left: 65px;
		}

		.how-work .work-steps .steps .box .box-content ul li,
		.how-work .work-steps .steps .box .box-content p
		{
			font-size: 26px;
			line-height: 50px;
		}


		.how-work .work-steps-content .left--side p
		{
			font-size: 28px;
			line-height: 55px;
		}
	
		.how-work .work-steps-content .steps-slider .slider__slide .box span
		{
			width: 70px;
			height: 70px;
			font-size: 26px;
		}

		.how-work .work-steps-content .steps-slider .slider__slide .box p
		{
			font-size: 28px;
			line-height: 55px;
		}

		.steps-slider .slick-arrow
		{
			font-size: 30px;
			top: 4px;
		}
		
		.steps-slider .slick-arrow.slick-next
		{
			left: 125px;
			z-index: 1;
		}

		.steps-slider .slick-dots:after
		{
			font-size: 30px;
			width: 80px;
			left: 40px;
			z-index: 0;
		}
		.steps-slider .slick-dots li button
		{
			font-size: 30px;
		}
		
		.benefits .benefits__slider
		{
			margin: 200px 0 0;
		}

		.benefits .benefits__slide .right--side h3
		{
			font-size: 80px;
			line-height: 80px;
		}

		.benefits .benefits__slide .right--side p
		{
			font-size: 28px;
			line-height: 55px;
		}

		.benefits .benefits__slider--options .option a p
		{
			font-size: 20px;
		}
	
		.team
		{
			padding: 250px 0;
		}

		.team .features .feature
		{
			margin-top: 300px;
		}

		.team .features .feature .feature--header h3
		{
			font-size: 40px;
			line-height: 50px;
		}
		.team .features .feature .feature--content
		{
			font-size: 28px;
			line-height: 55px;
		}

		.facts
		{
			padding: 250px 0 150px;
		}

		.facts .all-facts .fact p
		{
			font-size: 26px;
		}

		.facts .all-facts .fact h3 
		{
		    font-size: 80px;
		    line-height: 80px;
		}

		.facts-content .fact-content h2
		{
			font-size: 100px;
			line-height: 110px;
		}

		.facts-content .fact-content p
		{
			font-size: 28px;
			line-height: 55px;
		}

		.facts-content .fact-content .img-wrap, .facts-content .fact-content .rewrap
		{
			max-width: 1000px;
			max-height: 900px;
		}

		.facts-content
		{
			padding: 0 0 200px;
		}

		.technologies .all-tech .tech .tech-content h3
		{
			font-size: 40px;
			line-height: 50px;
		}
		.technologies .all-tech .tech .tech-content p
		{
			font-size: 28px;
			line-height: 55px;
		}
		.technologies .all-tech .tech .tech-content ul li
		{
			width: 80px;
			height: 80px;

		}
		.technologies .all-tech .tech .tech-content ul li img
		{
			max-width: 50px;
			height: 50px;
		}

		.technologies .all-tech .tech
		{
			margin-top: 150px;
		}
		.technologies,
		.contact
		{
			padding: 250px 0;
		}

		.contact .contact-form .input-row span
		{
			font-size: 28px;
			line-height: 50px;
		}

		.contact .contact-form .input-row input[type='text'], .contact .contact-form .input-row input[type='email'], .contact .contact-form .input-row .cs-placeholder, .contact .contact-form .input-row select, .contact .contact-form .input-row textarea
		{
			font-size: 26px;
			padding: 0 30px;
			height: 100px;
		}

		.contact .contact-form .input-row.file label
		{
			padding: 40px;
			font-size: 26px;
		}
		.contact .contact-form .input-row button
		{
			font-size: 28px;
			padding: 30px 50px;
		}
	}

	@media only screen and (min-width: 3200px)
	{
		.ots-header .header--right .image-wrap
		{
			width: 1600px;
			height: 1600px;
		}
	}

	@media only screen and (min-width: 3600px)
	{
		.benefits .owl-dot img
		{
			height: 90px;
			margin-bottom: 40px;
		}
		.benefits .owl-dot
		{
			padding: 50px 0;
		}
		.benefits .owl-dot p
		{
			font-size: 40px;
		}
		.benefits .owl-carousel .owl-stage
		{	
			padding: 150px 0;
		}
		.technologies .all-tech .tech .tech-content ul li:after
		{
			font-size: 24px;
			padding: 15px 20px;
			top: -50px;
		}
		.how-work .work-steps-content .left--side
		{
			padding: 100px 0;
		}
		.owl-carousel .owl-nav button.owl-prev
		{
			margin-right: 220px !important;
		}
		.ots-header .header--right .image-wrap
		{
			width: 2300px !important;
			height: 2300px !important;
			right: -300px !important;
		}

		.float-shapes
		{
			font-size: 50px;
		}

		nav img {
		    width: 370px;
		}

		.ots-title h1
		{
			font-size: 140px;
			line-height: 140px;
		}

		.ots-title .line
		{
			width: 5px;
			height: 120px;
			margin: 0 60px;
		}

		.ots-title h3
		{
			font-size: 60px;
		}

		.ots-header.active .header--left h1
		{
			font-size: 200px;
			line-height: 200px;
		}

		.ots-header .header--right .image-wrap
		{
			width: 1950px;
			height: 1950px;
		}

		.ots-header.active .header--left p
		{
			font-size: 46px;
			line-height: 80px;
		}

		.ots-header .header--left .input input
		{
			height: 150px;
			font-size: 40px;
			padding: 0 60px;
			max-width: 2000px;
		}

		.ots-header .header--left .input a
		{
			width: 110px;
			height: 110px;
			top: 20px;
			font-size: 40px;
			right: calc(-30% + 60px);
		}

		.how-work .work-steps-content .steps-slider .slider__slide .box
		{
			padding: 50px;
		}
		.what-is-outstaffing.active .content p,
		.how-work .work-steps-content .left--side p
		{
			font-size: 36px;
			line-height: 80px;
		}

		.ots--subtitle
		{
			font-size: 40px;
			line-height: 90px;
		}

		.how-work .ots--subtitle
		{
			margin-top: 100px;
		}
	
		.how-work .work-steps
		{
			margin-top: 150px;
		}
			
		.how-work .work-steps .steps .box .box-header h3
		{
			font-size: 55px;
			line-height: 70px;
			padding-right: 140px;
		}

		.how-work .work-steps .steps .box .box-header span
		{
			font-size: 180px;
			line-height: 160px;
		}

		.how-work .work-steps .steps .box .box-content ul li, .how-work .work-steps .steps .box .box-content p
		{
			font-size: 36px;
			line-height: 60px;
		}

		.how-work .work-steps .steps .box .box-content ul li:before
		{
			width: 70px;
			height: 70px;
			font-size: 25px;
		}

		.how-work .work-steps .steps .box .box-content ul li
		{
			padding-left: 90px;
		}


		.how-work .work-steps-content .steps-slider .slider__slide .box span
		{
			width: 90px;
			height: 90px;
			font-size: 30px;
		}

		.how-work .work-steps-content .steps-slider .slider__slide .box p
		{
			font-size: 36px;
			line-height: 70px;
		}

		.steps-slider .slick-arrow
		{
			font-size: 50px;
			top: 1px;
		}
		
		.steps-slider .slick-arrow.slick-next
		{
			left: 172px;
			z-index: 1;
		}

		.steps-slider .slick-dots:after
		{
			font-size: 45px;
			width: 80px;
			left: 60px;
			z-index: 0;
			top: 7px;
		}
		.steps-slider .slick-dots li button
		{
			font-size: 45px;
			left: 10px
		}

		.how-work .work-steps-content .steps-slider .slick-list
		{
			padding: 100px 0;
		}

		.what-is-outstaffing,
		.team
		{
			padding: 300px 0;
		}
		.facts
		{
			padding: 400px 0 250px;
		}
		.how-work
		{
			padding: 400px 0 220px;
		}

		.technologies .all-tech .tech
		{
			margin-top: 250px;
		}
		

		.benefits .benefits__slide .left--side img
		{
			height: 350px;
		}

		.benefits .benefits__slide .right--side h3
		{
			font-size: 120px;
			line-height: 150px;
		}

		.benefits .benefits__slide .right--side p
		{
			font-size: 36px;
			line-height: 80px;
		}
		.benefits .benefits__slider--options
		{
			max-width: 100%;
		}

		.benefits .benefits__slider--options .option
		{
			padding: 55px 0;
		}

		.benefits .benefits__slider--options .option a img
		{
			height: 100px;
		}

		.benefits .benefits__slider--options .option a p
		{
			font-size: 30px;
			margin-top: 20px;
		}

		.team .features .feature .feature--header h3
		{
			font-size: 60px;
			line-height: 90px;
		}

		.team .features .feature .feature--header span 
		{
			width: 200px;
		}
		.team .features .feature .feature--header span img
		{
			width: 100%;
			max-width: unset;
		}

		.team .features .feature .feature--content
		{
			font-size: 36px;
			line-height: 80px;
			margin-top: 40px;
		}

		.facts .ots--subtitle
		{
			margin-top: 100px;
		}

		.facts .all-facts .fact p
		{
			font-size: 36px;
			line-height: 40px;
		}
		.facts .all-facts .fact h3
		{
			font-size: 110px;
			line-height: 110px;
		}

		.facts .all-facts .fact span
		{
			width: 100px;
			height: 6px;
			margin: 10px 0 20px auto;
		}

		.facts-content .fact-content h2
		{
			font-size: 130px;
			line-height: 180px;
		}

		.facts-content .fact-content p
		{
			font-size: 36px;
			line-height: 80px;
		}
		
		.technologies .all-tech .tech .tech-content h3
		{
			font-size: 60px;
			line-height: 80px;
		}

		.technologies .all-tech .tech .tech-content p
		{
			font-size: 36px;
			line-height: 80px;
		}
		.technologies .all-tech .tech .tech-content ul li
		{
			width: 120px;
			height: 120px;

		}
		.technologies .all-tech .tech .icon
		{
			width: 180px;
		}
	
		.technologies .all-tech .tech .tech-content
		{
			padding-left: 40px;
		}

		.technologies .all-tech .tech .icon img
		{
			width: 100%;
			max-width: unset;
		}
		.technologies .all-tech .tech .tech-content ul li img
		{
			max-width: 50px;
			height: 50px;
		}

		.technologies .all-tech .tech
		{
			margin-top: 150px;
		}
		.technologies,
		.contact
		{
			padding: 250px 0;
		}

	}

/************************************************************
    Responsive Small Resolution
*************************************************************/		

	@media only screen and (max-width: 900px)
	{
		.page-outstaffing .wrapper
		{
			width: 90%;
		}
	}

	@media only screen and (max-width: 700px)
	{
		.ots-title h1
		{
			font-size: 40px;
			line-height: 40px;
		}
		.ots-title .line
		{
			height: 40px;
		}
		.ots-title h3
		{
			font-size: 18px;
		}
	}

	@media only screen and (max-width: 500px)
	{
		.ots-title br
		{
			display: none;
		}

		.ots-title
		{
			flex-direction: column-reverse;
			align-items: flex-start;
		}
		.ots-title h1
		{
			text-align: left;
		}
		.ots-title .line
		{
			width: 80px;
			height: 2px;
			margin: 0 0 10px
		}
	}
	




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

	@media only screen and (max-width: 1350px)
	{
		
		.ots-header .header--right 
		{
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.ots-header .header--right .image-wrap
		{
			width: 600px;
			height: 600px;
			top: unset;
		}
	}

	@media only screen and (max-width: 980px)
	{
		.ots-header .header--left
		{
			width: 70%;
		}
		.ots-header .header--right
		{
			width: 30%;
		}

		.ots-header .header--left .input input
		{
			width: 100%;
		}
	}

	@media only screen and (max-width: 980px)
	{
		.ots-header .header--right
		{
			display: none;
		}

		.ots-header .header--left
		{
			width: 100%;
		}
	}

	@media only screen and (max-width: 900px)
	{
		.ots-header .header--left
		{
			padding: 0;
			width: 90%;
			margin: 0 auto;
		}

		.ots-header .header--left .input a
		{
			right: 20px;
		}
	}

	@media only screen and (max-width: 700px)
	{
		.ots-header .header--left h1
		{
			font-size: 60px;
			line-height: 60px;
		}

		.ots-header .header--left p
		{
			font-size: 18px;
			line-height: 30px;
		}
	}



		



/* --------- What is Outstaffing --------- */

	@media only screen and (max-width: 768px)
	{
		.what-is-outstaffing .content
		{
			margin-top: 50px;
		}

		.what-is-outstaffing.active .content > div:last-child
		{
			margin-top: 50px;
		}
		
		.what-is-outstaffing.active .content p
		{
			padding-left: 0;
		}

		.what-is-outstaffing .content .left--side:before
		{
			height: 85%;
		}

		.what-is-outstaffing
		{
			padding: 170px 0 50px;
		}
	}




/* --------- How does it work --------- */
	@media only screen and (max-width: 1200px)
	{
		.how-work .work-steps .steps .box .box-header h3
		{
			font-size: 18px;
			line-height: 24px;
			padding-right: 40px;
		}
		.how-work .work-steps .steps .box .box-header span
		{
			font-size: 60px;
		}
		.how-work .work-steps .steps .box .box-content ul li:before
		{
			display: none;
		}
		.how-work .work-steps .steps .box .box-content ul li
		{
			padding-left: 0;
		}
	}

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

		.how-work .work-steps-content .steps-slider .owl-item.active .slider__slide
		{
			opacity: 1;
		}
		.how-work .work-steps-content .steps-slider .owl-item.active .slider__slide .box
		{
			opacity: 1;
		}
	}

	@media only screen and (max-width: 768px)
	{
		.how-work .work-steps .steps > div:first-child,
		.how-work .work-steps .steps > div:nth-child(2),
		.how-work .work-steps .steps > div:last-child
		{
			top: 0;
		}
		.how-work .work-steps .steps > div:nth-child(2),
		.how-work .work-steps .steps > div:last-child
		{
			margin-top: 20px;
		}
		.how-work .work-steps .steps .box .box-content ul li:before
		{
			display: flex;
		}
		.how-work .work-steps .steps .box .box-content ul li
		{
			padding-left: 45px;
		}
		
		.how-work .work-steps .steps > div:first-child:after,
		.how-work .work-steps .steps > div:nth-child(2):after
		{
		    width: 120px;
		    height: 80px;
		    bottom: -40px;
		    right: 100px;
		    transform: scaleY(-1) rotate(-65deg);
			background-size: 100% 100%;
			z-index: 1;
			top: unset;
		}

		.how-work .work-steps .steps > div:nth-child(2):after
		{
			bottom: -70px;
    		right: 60px;
		}

		.how-work .work-steps
		{
			margin-top: 40px;
		}

		.how-work .work-steps-content .steps-slider .owl-item .slider__slide
		{
			opacity: 0;
			transition: all 0.1s ease;
		}
		.how-work .work-steps-content .steps-slider .owl-item.active .slider__slide
		{
			opacity: 1;
		}
		.steps-slider .owl-item.active .box
		{
			background: #fff;
			opacity: 1;
			transition: all 0.1s ease;
		}
	}
	
	@media only screen and (max-width: 768px)
	{
		.how-work
		{
			padding: 100px 0 50px;
		}

		.how-work .work-steps:before
		{
			height: 90%;
		}

		.how-work .work-steps-content
		{
			flex-direction: column;
			padding-top: 30px;
		}
		
			.how-work .work-steps-content .left--side,
			.how-work .work-steps-content .right--side
			{
				padding: 0;
				width: 90%;
				margin: 0 auto;
			}

			.how-work .work-steps-content .right--side
			{
				margin-top: 20px;
			}

			.how-work .work-steps-content .steps-slider .slick-list
			{
				padding: 30px 0;
			}
			.how-work .work-steps-content .steps-slider .slider__slide .box
			{
				margin: 0 30px 0 0;
			}
	}

	@media only screen and (max-width: 500px)
	{
		.how-work .work-steps .steps > div:nth-child(3):after,
		.how-work .work-steps .steps > div:nth-child(1):before
		{
			display: none;
		}
	}



/* --------- Why to choose outstaffing --------- */
	
	@media only screen and (max-width: 768px)
	{
		.benefits
		{
			padding: 20px 0 0;
		}
		.benefits .benefits__slide
		{
		}
		.benefits .benefits__slide.active
		{
			display: flex;
		}

		.benefits .benefits__slide.active .left--side 
		{
			width: 130px;
			margin-bottom: 20px;
		}

		.benefits .benefits__slide.active .right--side 
		{
			width: 100%;
		}

		.benefits .benefits__slide .left--side img
		{
			height: 150px;
			margin-bottom: 50px;
		}

		.benefits .benefits__slide .right--side h3
		{
			font-size: 30px;
			line-height: 40px;
			margin-bottom: 0;
		}
		.benefits .benefits__slide.active .right--side p
		{
			margin-top: 20px !important;
		}

		.benefits .benefits__slider
		{
			margin: 80px 0 0;
		}
			
		.benefits .benefits__slider--options 
		{
			overflow-y: scroll;
		}
		.benefits .benefits__slider--options .option
		{
			min-width: 190px;
		}
	
		.benefits .benefits__slider--options .option a p
		{
			font-size: 14px;
			line-height: 18px;
		}
		.benefits .benefits__slider--options .option a
		{
			padding: 5px 10px;
		}
	}

/* --------- Easy Team Growth --------- */

	@media only screen and (max-width: 940px)
	{
		.team .features
		{
			margin-right: -1rem;
			margin-left: -1rem;
		}
		.team .features .col-xs-12
		{
			padding: 0 1rem;
		}
	}


/* --------- Why choose us? --------- */
	@media only screen and (max-width: 768px)
	{
		.facts
		{
			padding: 100px 0 0;
		}

		.facts .all-facts
		{
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-gap: 50px 0;
			margin: 100px auto 0;
		}
		
			.facts .all-facts .fact
			{
				display: inline-flex;
				width: 100%;
				font-size: 0;
				padding: 0 10px 0 10px;
			}

		.facts-content 
		{
			padding: 0 0 50px;
		}
		.facts-content .fact-content
		{
			flex-direction: column;
			padding: 50px 0;
		}
		
		.facts-content .fact-content:nth-child(even)
		{
			flex-direction: column-reverse;
		}

			.facts-content .fact-content:nth-child(even) .left--side
			{
				text-align: center;
				margin-top: 30px;
			}

			.facts-content .fact-content .left--side,
			.facts-content .fact-content .right--side
			{
				width: 100%;
			}

			.facts-content .fact-content .right--side.image
			{
				text-align: center;
				margin-top: 30px;
			}

			.facts-content .fact-content .right--side .img-wrap:before,
			.facts-content .fact-content .left--side .img-wrap:before
			{
				width: 100%;
				height: 100%;
				background-repeat: none;
				left: 50%;
				top: unset;
				bottom: -80px;
				-webkit-transform: translateX(-50%);
				   -moz-transform: translateX(-50%);
				    -ms-transform: translateX(-50%);
				     -o-transform: translateX(-50%);
				        transform: translateX(-50%);
			}
	}

	@media only screen and (max-width: 600px)
	{
		.facts .all-facts .line
		{
			display: none;
		}
		.facts .all-facts
		{
			grid-template-columns: 1fr 1fr;
		}
		.facts .all-facts .fact
		{
			text-align: left;
		}
		.facts .all-facts .fact span
		{
			margin: 0 auto 10px 0;
		}
		.facts .all-facts .fact p
		{
			line-height: 18px;
		}
	}

	@media only screen and (max-width: 600px)
	{
		.facts-content .fact-content h2
		{
			font-size: 40px;
			line-height: 50px;
		}
	}


/* --------- Technologies we use --------- */

	@media only screen and (max-width: 940px)
	{
		.technologies .all-tech
		{
			margin-right: -1rem;
			margin-left: -1rem;
		}
		.technologies .all-tech > div
		{
			padding: 0 1rem;
		}
	}

	@media only screen and (max-width: 768px)
	{
		.technologies
		{
			padding: 100px 0;
		}

		.technologies .all-tech .tech .tech-content ul
		{
			grid-template-columns: 1fr 1fr 1fr 1fr;
		}
	}


/* --------- Let's work together --------- */
		
	@media only screen and (max-width: 768px)
	{
		.contact .contact-form .input-row
		{
			margin-top: 30px;
		}

		.contact .contact-form .row:last-child div
		{
			text-align: center;
		}
	}


		
/* --------- Floating Shapes --------- */
	@media only screen and (max-width: 768px)
	{
		.ots-header .float-shapes i:nth-child(3),
		.ots-header .float-shapes i:nth-child(6),
		#sec3 .float-shapes i:nth-child(2),
		#sec5 .float-shapes i:nth-child(2),
		#sec7 .float-shapes i:nth-child(3),
		#sec7 .float-shapes i:nth-child(5),
		#sec8 .float-shapes i:nth-child(3),
		#sec8 .float-shapes i:nth-child(5),
		#sec2 .float-shapes i:nth-child(2)
		{
			display: none;
		}

		.team .features .a .feature:after
		{
			right: 0;
		}

		.how-work .work-steps-content .steps-slider
		{
			margin: 50px 0 0;
		}
	}





		
/* --------- Menu --------- */
	@media only screen and (max-width: 1000px)
	{
		nav
		{
			padding: 30px 5%;
		}
		nav .menu .ham span
		{
			background: var(--blue);
		}
		nav #main-menu li a
		{
			font-size: 20px;
		}

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


	.grecaptcha-badge
	{
		opacity: 0 !important;
	}


	.grecaptcha-badge.active
	{
		opacity: 1 !important;
	}