/* Table of Content
==================================================
	#Font-Face
	#Site Styles
	#Media Queries */

/* #Font-Face
================================================== */
@import url(../fonts/fonts.css);
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&display=swap');
/* #Site Styles
================================================== */

/* ### general ### */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { font-family: Open Sans, sans-serif; font-size: 12px; color: #4a4a4a; }
body { background: #fff; }
input, select, textarea { font-family: Open sans, sans-serif; font-size: 12px; color: #4a4a4a; }
img { border: 0; display: block; }
ul, li { list-style: none; }
:focus { outline: none; }

/* ### global classes ### */
.clear { clear: both; visibility: hidden; line-height: 0; height: 0; }
.center { margin: 0 auto; position: relative; max-width: 980px; }
.centered { padding-right: calc((100% - 980px) / 2); padding-left: calc((100% - 980px) / 2); }
h1,h2,h3,h4,h5,h6 { font-family: 'CircularStdBold', sans-serif; }
.button { background: linear-gradient(135deg, rgba(255,90,87,1) 0%,rgba(240,150,26,1) 100%); padding: 17px 35px; border-radius: 5px; text-transform: uppercase; font-size: 18px; color: #fff; text-decoration: none; font-weight: bold; }
.button.blue { background: linear-gradient(to right, rgba(37,118,251,1) 0%,rgba(34,208,185,1) 100%); padding: 12px 45px; font-size: 16px; }
.more { color: #4a4a4a; font-size: 15px; display: block; padding-right: 20px; background: url(../img/arrow.png) no-repeat right; text-decoration: none; font-weight: bold; }
.button:hover { box-shadow: 0px 0px 10px rgba(0,0,0,0.5); }

/* ### wrapper ### */
#wrapper { position: relative; display: block; width: 100%; min-height: 100%; overflow-x: hidden; }

/* ### main container ### */
#mainCntr { width: 100%; }

/* ### header container ### */
#headerCntr { box-shadow: 14px 16px 54px 0 rgba(133, 143, 175, 0.1); top: 0; z-index: 99; position: fixed; width: 100%; background: linear-gradient(180deg, rgba(255,255,255,1) 50%, rgba(255,255,255,0.8) 100%); padding-top: 15px; padding-bottom: 15px; overflow: hidden; }
#headerCntr .logo { float: left; }
#headerCntr .logo img { max-width: 100%; width: 128px; height: 42px; }
#headerCntr .mobileMenu { display: none; cursor: pointer; z-index: 15; float: left; width: 40px; height: 40px; position: relative; transition: 0.2s; overflow: hidden; }
#headerCntr .mobileMenu span { display: block; height: 4px; text-indent: -9999px; border-radius: 5px; background: #3064f3; position: absolute; top: 50%; right: 20%; left: 20%; transition: 0.2s; }
#headerCntr .mobileMenu span:before,
#headerCntr .mobileMenu span:after { display: block; width: 100%; height: 4px; content: ''; border-radius: 5px; background-color: #3064f3; transition-duration: 0.2s,0.2s; position: absolute; left: 0; }
#headerCntr .mobileMenu span:before { top: -7px; }
#headerCntr .mobileMenu span:after { bottom: -7px; }
#headerCntr.afterscroll { 
	padding-top: 15px;
	padding-bottom: 22px;
	box-shadow: 14px 28px 54px 0 rgba(133, 143, 175, 0.1);
	z-index: 99; 
	transition: 0.5s ease-in-out;
}

.mm-opened #headerCntr .mobileMenu span { background: none; }
.mm-opened #headerCntr .mobileMenu.is-active span:before,
.mm-opened #headerCntr .mobileMenu.is-active span:after { transition-delay: 0s, 0.2s; }
.mm-opened #headerCntr .mobileMenu span:before { top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.mm-opened #headerCntr .mobileMenu span:after { bottom: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

	/* ### menu box ### */
	.menuBox:not(.mm-menu) { float: right; margin-top: 10px; }
	.menuBox:not(.mm-menu) ul { overflow: hidden; width: auto; }
	.menuBox:not(.mm-menu) ul li { margin-left: 50px; float: left; font-size: 20px; font-weight: bold; }
	.menuBox:not(.mm-menu) ul li a { color: #000000; text-transform: uppercase; text-decoration: none; }
	.menuBox:not(.mm-menu) ul li a:hover, .menuBox:not(.mm-menu) ul li.is-active a { color: #2574fc; }

/* ### content container ### */
#contentCntr { width: 100%; padding-top: 72px;}

	/* ### banner box ### */
	.bannerBox { width: 100%; background: url(../img/bg.svg) no-repeat center bottom -2px; background-size: cover; padding-top: 130px; padding-bottom: 150px; text-align: center; margin-bottom: 70px; }
	.bannerBox h1 { font-size: 65px; color: #fff; margin-bottom: 50px; }
	.bannerBox .title { font-size: 25px; text-transform: uppercase; letter-spacing: 3px; font-weight: bold; margin-bottom: 30px; }
	.bannerBox p { font-size: 20px; color: #fff; line-height: 30px; max-width: 760px; margin: 0 auto; margin-bottom: 70px; }

	/* ### banner box ### */
	#jobs {min-height: 90vh;}
	.jobsBox { width: 100%; background-color: #fff; padding-bottom: 0px; text-align: center; margin-bottom: 120px; }
	.jobsBox h1 { display: block; color: #22d0b8; font-size: 28px; padding-top: 15px; }
	.jobsBox h1 a { color: #22d0b8; font-size: 28px; }
	.jobsBox .title { font-size: 25px; text-transform: uppercase; letter-spacing: 3px; font-weight: bold; margin-bottom: 30px; }
	.jobsBox p { font-size: 20px; color: #000; line-height: 30px; max-width: 760px; margin: 0 auto; margin-bottom: 70px; }




	/* ### exp box ### */
	.expBox { margin-bottom: 70px; background: #fff; position: relative; }
	.expBox:before { content: ''; background: url(../img/structure1.png) no-repeat; width: 314px; height: 461px; position: absolute; top: 180px; left: 0; }
	.expBox .flex { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
	.expBox .column { width: 30%; }
	.expBox .column:first-of-type { width: 40%; padding-top: 180px; padding-left: 70px; }
	.expBox .column:nth-of-type(2) { padding-top: 150px; padding-left: 20px; }
	.expBox .column:nth-of-type(3) { padding-right: 20px; }
	.expBox h2 { font-size: 36px; color: #d8d8d8; padding-bottom: 30px; background: url(../img/border.png) no-repeat left bottom; margin-bottom: 30px; line-height: 50px; }
	.expBox p { font-size: 16px; line-height: 20px; margin-bottom: 40px; }
	.expBox .block { background: #fff; box-shadow: 0px 0px 20px rgba(0,0,0,0.1); border-radius: 10px; padding: 30px; position: relative; margin-bottom: 35px; display: block; text-decoration: none; color: #4a4a4a; }
	.expBox .block p { font-size: 14px; margin-bottom: 15px; }
	.expBox .block p:last-of-type { margin-bottom: 0; }
	.expBox figure { margin-bottom: 20px; height: 80px; background-size: 80px 80px; background-position: left top; background-repeat: no-repeat; }
	.expBox figure.software { background-image: url(../img/icon3.svg); }
	.expBox .block:hover figure.software, .expBox .block.is-active figure.software { background-image: url(../img/icon3-hover.svg); }
	.expBox figure.website { background-image: url(../img/icon4.svg); }
	.expBox .block:hover figure.website, .expBox .block.is-active figure.website { background-image: url(../img/icon4-hover.svg); }
	.expBox figure.app { background-image: url(../img/icon1.svg); }
	.expBox .block:hover figure.app, .expBox .block.is-active figure.app { background-image: url(../img/icon1-hover.svg); }
	.expBox figure.development { background-image: url(../img/icon2.svg); }
	.expBox .block:hover figure.development, .expBox .block.is-active figure.development { background-image: url(../img/icon2-hover.svg); }
	.expBox .title { font-size: 16px; font-weight: bold; }
	.expBox .block:hover, .expBox .block.is-active { background: linear-gradient(135deg, rgba(121,203,249,1) 0%,rgba(67,131,219,1) 100%); }
	.expBox .block:hover:before, .expBox .block.is-active:before { content: ''; width: 107px; height: 106px; background: url(../img/structure3.png) no-repeat; position: absolute; top: 0; right: 0; }
	.expBox .block:hover p, .expBox .block.is-active p { color: #fff; font-size: 14px; }
	.expBox .hidden { display: none; }

	/* ### address box ### */
	.addressBox { padding-bottom: 200px; text-align: center; position: relative; margin-bottom: -2px; }
	.addressBox:after { content: ''; background: url(../img/bg1.svg) no-repeat center bottom; background-size: cover; position: absolute; bottom: 0; left: 0; width: 100%; height: 780px; z-index: 0; }
	.addressBox h3, .addressBox h4 { font-size: 36px; color: #4a4a4a; margin-bottom: 30px; line-height: 50px; }
	.addressBox h4 { color: #fff; }
	.addressBox address { color: #fff; font-size: 16px; line-height: 30px; font-style: normal; }
	.addressBox address a { color: #fff; text-decoration: none; }
	.addressBox address a:hover { text-decoration: underline; }
	.addressBox .text { position: relative; z-index: 1; }
	.addressBox p { font-size: 16px; line-height: 20px; margin-bottom: 50px; }
	.addressBox .map { margin: 100px auto 100px; max-width: 780px; border-radius: 5px; overflow: hidden; position: relative; }
	.addressBox #map { width: 100%; height: 435px; }
	.addressBox:before { content: ''; background: url(../img/structure2.png) no-repeat; width: 276px; height: 411px; position: absolute; top: -200px; right: 0; }


	/* ### JobsBox box ### */
	.addressBox { padding-bottom: 200px; text-align: center; position: relative; margin-bottom: -2px; }
	.addressBox:after { content: ''; background: url(../img/bg1.svg) no-repeat center bottom; background-size: cover; position: absolute; bottom: 0; left: 0; width: 100%; height: 780px; z-index: 0; }
	.addressBox h3, .addressBox h4 { font-size: 36px; color: #4a4a4a; margin-bottom: 30px; line-height: 50px; }
	.addressBox h4 { color: #fff; }
	.addressBox address { color: #fff; font-size: 16px; line-height: 30px; font-style: normal; }
	.addressBox address a { color: #fff; text-decoration: none; }
	.addressBox address a:hover { text-decoration: underline; }
	.addressBox .text { position: relative; z-index: 1; }
	.addressBox p { font-size: 16px; line-height: 20px; margin-bottom: 50px; }
	.addressBox .map { margin: 100px auto 100px; max-width: 780px; border-radius: 5px; overflow: hidden; position: relative; }
	.addressBox #map { width: 100%; height: 435px; }
	.addressBox:before { content: ''; background: url(../img/structure2.png) no-repeat; width: 276px; height: 411px; position: absolute; top: -200px; right: 0; }



	/* ### team box ### */
	.teamBox { padding-bottom: 130px; background: #f2f2fa; padding-top: 90px; overflow: hidden; position: relative; margin-bottom: -2px; }
	.teamBox h4 { font-size: 36px; color: #4a4a4a; margin-bottom: 75px; line-height: 50px; text-align: center; }
	.teamBox .text { width: 50%; padding-right: 30px; float: left; padding-top: 50px; padding-left: 90px;}
	.teamBox .text .slide { width: 100%; }
	.teamBox h5 { font-size: 28px; color: #4a4a4a; margin-bottom: 15px; line-height: 30px; }
	.teamBox h5 span { display: block; color: #22d0b8; font-size: 28px; padding-top: 15px; }
	.teamBox p { font-size: 15px; line-height: 20px; margin-bottom: 30px; }
	.teamBox .social { overflow: hidden; }
	.teamBox .social li { float: left; margin-right: 10px; }
	.teamBox .social li a { text-decoration: none; }
	.teamBox .social li a img { width: 20px; height: 20px; }

	.teamBox .holder {
		/* background: url(../img/carousel-bg.png) no-repeat left top; */
		width: 5000px;
		position: absolute;
		left: calc(50% + 65px);
		top: 120px;
	}

	.teamBox .holder .carousel {
		z-index: 10;

	}

	.teamBox .holder .carousel .slick-list.draggable {
		border-radius: 20px;
	}

	.teamBox .controls {
		overflow: hidden;
	}

	.teamBox .holder .slide {
		width: 255px!important;
		padding: 35px 30px;
		background: #fff;
		border-radius: 20px;
		min-height: 340px;
		position: relative;
		overflow: hidden;
		float: left;
		margin-right: 25px;
		cursor: pointer;
	}

	.holder .slider-nav .slide img {
		width: 300px;
		height: auto;
	}

	.teamBox .holder p { font-size: 15px; line-height: 30px; margin-bottom: 10px; min-height: 155px; }

	.teamBox .holder .slide div.team-role-skill {
		font-size: 15px; line-height: 30px; margin-bottom: 10px; min-height: 155px;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-direction: column;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}

	.teamBox h6 { font-size: 25px; margin-bottom: 20px; min-height: 55px; text-transform: uppercase; }
	.teamBox .holder .photo { object-fit: cover; display: none; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); min-width: 100%; width: auto; min-height: 100%; height: auto; border-radius: 20px; }
	.teamBox .holder .slick-current .photo { object-fit: cover; display: block; }
	.teamBox .carousel { margin-bottom: 30px; }

	.teamBox .cards {
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
	}

	.teamBox .cards .card {
		border-radius: 20px;
		position: absolute;
		margin-top: -5px;
		transition: margin  ease-out, padding ease-in-out, z-index ease-in-out;
		background: #ffffff;
	}

	.teamBox .cards .card#box1 {
		/* background: #fafafa; */
		padding: 122px 109px;

		margin-top: 35px;

		z-index: 1;
	}

	.teamBox .cards .card#box2 {
		/* background: #fcfcfc; */
		padding: 144px 109px;

		margin-left: 33px;
		margin-top: 15px;

		z-index: 2;
	}

	.teamBox .cards .card#box3 {
		/* background: #f2f2f2; */

		padding: 164px 109px;
		margin-left: 65px;

		z-index: 3;
	}

	.teamBox .cards .card#box4 {
		background: 'transparent';

		padding: '0';
		margin-left: '0';
		margin-top: '77px';

		z-index: -1;
	}

	.teamBox .previous { color: #4a4a4a; float: left; font-size: 15px; font-weight: bold; text-decoration: none; padding-left: 30px; background: url(../img/previous.jpg) no-repeat left 6px; }
	.teamBox .next { color: #4a4a4a; float: left; font-size: 15px; font-weight: bold; text-decoration: none; padding-right: 30px; background: url(../img/next.jpg) no-repeat right 6px; }
	.teamBox .controls span { float: left; padding: 0 25px; }
.labels { color: #4bd963!important; }

	/* ### footer container for jobs ### */
#footerCntrJobs { overflow: hidden; width: 100%; padding-top: 20px; padding-bottom: 30px; background: url(../img/bg-4.svg) no-repeat center top; background-size: cover; position: absolute; bottom: 0;}
#footerCntrJobs .top { text-align: center; padding-bottom: 70px; }
#footerCntrJobs .title { font-size: 35px; color: #fff; font-weight: bold; text-align: center; font-family: 'CircularStdBold', sans-serif; margin-bottom: 50px; }
#footerCntrJobs fieldset { border: none; }
#footerCntrJobs input[type=email] { width: 460px; height: 40px; line-height: 40px; border: none; border-bottom: 3px solid #74f8da; padding: 0 25px; background: #fff; font-size: 16px; margin-bottom: 30px; }
#footerCntrJobs input[type=email]::-webkit-input-placeholder { color: #9b9b9b; }
#footerCntrJobs input[type=email]::-moz-placeholder { color: #9b9b9b; }
#footerCntrJobs input[type=email]:-ms-input-placeholder { color: #9b9b9b; }
#footerCntrJobs input[type=email]::-ms-input-placeholder { color: #9b9b9b; }
#footerCntrJobs input[type=email]::placeholder { color: #9b9b9b; }
#footerCntrJobs .button { cursor: pointer; padding: 10px 55px; border: none; font-size: 16px; }
#footerCntrJobs .bottom { width: 100%; }
#footerCntrJobs .copyright { font-size: 14px; color: #fff; text-align: center; background: url(../img/lines.png) no-repeat center; margin-bottom: 35px; }
#footerCntrJobs .logo { float: left; }
#footerCntrJobs .logo img { width: 170px; height: 40px; }
#footerCntrJobs .menu { float: right; padding-top: 10px; }
#footerCntrJobs .menu li { float: left; font-size: 20px; font-family: 'CircularStdBold', sans-serif; text-transform: uppercase; margin-left: 50px; }
#footerCntrJobs .menu li a { color: #fff; text-decoration: none; }
#footerCntrJobs .social { text-align: center; padding-top: 35px; }
#footerCntrJobs .social label { display: inline-block; vertical-align: middle; font-size: 14px; color: #fff; padding-right: 25px; font-weight: bold; }
#footerCntrJobs .social ul { display: inline-block; vertical-align: middle; }
#footerCntrJobs .social li { float: left; margin-right: 6px; }
#footerCntrJobs .social li a { text-decoration: none; }
#footerCntrJobs .social li a img { width: 20px; height: 20px; }

	/* ### footer container ### */
	#footerCntr { overflow: hidden; width: 100%; padding-top: 120px; padding-bottom: 30px; background: url(../img/bg2.svg) no-repeat center top; background-size: cover; }
	#footerCntr .top { text-align: center; padding-bottom: 70px; }
	#footerCntr .title { font-size: 35px; color: #fff; font-weight: bold; text-align: center; font-family: 'CircularStdBold', sans-serif; margin-bottom: 50px; }
	#footerCntr fieldset { border: none; }
	#footerCntr input[type=email] { width: 460px; height: 40px; line-height: 40px; border: none; border-bottom: 3px solid #74f8da; padding: 0 25px; background: #fff; font-size: 16px; margin-bottom: 30px; }
	#footerCntr input[type=email]::-webkit-input-placeholder { color: #9b9b9b; }
	#footerCntr input[type=email]::-moz-placeholder { color: #9b9b9b; }
	#footerCntr input[type=email]:-ms-input-placeholder { color: #9b9b9b; }
	#footerCntr input[type=email]::-ms-input-placeholder { color: #9b9b9b; }
	#footerCntr input[type=email]::placeholder { color: #9b9b9b; }
	#footerCntr .button { cursor: pointer; padding: 10px 55px; border: none; font-size: 16px; }
	#footerCntr .bottom { width: 100%; }
	#footerCntr .copyright { font-size: 14px; color: #fff; text-align: center; background: url(../img/lines.png) no-repeat center; margin-bottom: 35px; }
	#footerCntr .logo { float: left; }
	#footerCntr .logo img { width: 110px; height: 40px; }
	#footerCntr .menu { float: right; padding-top: 10px; }
	#footerCntr .menu li { float: left; font-size: 20px; font-family: 'CircularStdBold', sans-serif; text-transform: uppercase; margin-left: 50px; }
	#footerCntr .menu li a { color: #fff; text-decoration: none; }
	#footerCntr .social { text-align: center; padding-top: 35px; }
	#footerCntr .social label { display: inline-block; vertical-align: middle; font-size: 14px; color: #fff; padding-right: 25px; font-weight: bold; }
	#footerCntr .social ul { display: inline-block; vertical-align: middle; }
	#footerCntr .social li { float: left; margin-right: 6px; }
	#footerCntr .social li a { text-decoration: none; }
	#footerCntr .social li a img { width: 20px; height: 20px; }


span.tech {
	font-weight: bold;
}
/* #Media Queries
================================================== */
@media only screen and (max-width: 980px) {
	.centered, .center { padding-left: 20px; padding-right: 20px; }
	.expBox .column:first-of-type { padding-left: 20px; }
	.expBox .column:nth-of-type(2) { padding-left: 10px; }
	.expBox .column:nth-of-type(3) { padding-right: 10px; }
	#headerCntr .afterscroll { background: linear-gradient(180deg, rgba(255,255,255,1) 50%, rgba(255,255,255,0.8) 100%) }
}

@media only screen and (max-width: 767px) {
	.menuBox:not(.mm-menu) { display: none; }
	#headerCntr .mobileMenu { display: block; float: right; }
	.bannerBox h1 { font-size: 45px; }
	.expBox .flex { display: block; }
	.expBox:before { display: none; }
	.expBox .column:first-of-type { padding: 0; width: 100%; margin-bottom: 50px; }
	.expBox .column:nth-of-type(2) { padding: 0; width: 100%; }
	.expBox .column:nth-of-type(3) { width: 100%; padding: 0; }
	.addressBox:before { display: none; }
	.addressBox .map { margin-bottom: 40px; }
	.addressBox { padding-bottom: 70px; }
	.teamBox { padding-top: 20px; }
	.teamBox .text { width: 100%; padding-right: 0; margin-bottom: 20px; }
	.teamBox { padding-bottom: 40px; }
	#footerCntr { padding-top: 50px; }
	#footerCntr input[type=email] { width: 100%; }
	#footerCntr .menu { display: none; }
	#footerCntr .logo { float: none; width: 100%; display: block; text-align: center; }
	#footerCntr .logo img { display: inline-block; }
	#footerCntr .top { padding-bottom: 30px; }
	.bannerBox { padding-top: 50px; padding-bottom: 80px; margin-bottom: 20px; }
	.teamBox .text { padding-top: 0px; float: none; }
	.teamBox .holder { position: static; width: 100%; }
	.addressBox:after { height: 580px; }
	.addressBox .map { margin-top: 50px; }
	/* mobile team slider */
	.teamBox .text {
	    padding-left: 0px;
	}
	.teamBox p {
	margin-bottom: 0px;
	}
	
	#footerCntrJobs .menu { display: none; }
	#footerCntrJobs .logo { float: none; width: 100%; display: block; text-align: center; }
	#footerCntrJobs .logo img { display: inline-block; }
	#footerCntrJobs .top { padding-bottom: 30px; }
}

@media only screen and (max-width: 479px) {
	.expBox h2 { font-size: 32px; line-height: 40px; }
	.bannerBox h1 { font-size: 35px; margin-bottom: 30px; }
	.addressBox h3, .addressBox h4 { font-size: 30px; line-height: 40px; }
	.teamBox h4 { margin-bottom: 20px; }
	.teamBox .holder { padding-left: 0; background: none; }
	#footerCntr .title { font-size: 30px; line-height: 40px; margin-bottom: 20px; }
	.teamBox .holder .slide { margin-right: 10px; }
	.addressBox #map { height: 300px; }
	#footerCntr .title { font-size: 25px; line-height: 30px; }
	.teamBox .cards {
		display: none;
	}
}