#services {
	position:relative;
	top:0px;
	left:0px;
	display:block;
}
#services .servicesbg{
	background-image:url('../img/common/bg.png');
	background-repeat: no-repeat;
	background-size:100% 100%;
	position:absolute;
	z-index:490;
	width:100%;
	height:100vh;
}
#services .servicesContent{
	position:absolute;
	left:80px;
	top:80px;
	z-index:520;
	width:95%;
	height:85%;
}
#services .servicesMidContent{
	opacity:0;
	position:absolute;
	right:60px;
	top:60px;
	width:53%;
}
#services .servicesTitle{
	font-size:36px;
	font-weight:900;
	text-align:left;
	top:-20px;
}
#services .servicesText{
	position:relative;
	font-size:20px;
	top:20px;
}
#services .showContactPopup{
	position:relative;
	font-size:18px;
	top:50px;
	width:150px;
	text-align:center;
	background-color:#fab234;
	color:#ffffff;
	border-radius:25px;
	padding:5px;
	cursor:pointer;
}
#services .showContactPopup:hover{
	background-color:#181818;
}
#services .contactPopup{
	display:none;
	background-image:url('../img/common/innerbg.png');
	background-repeat: no-repeat;
	background-size:100% 100%;
	border-radius: 25px;
	width:100%;
	max-width:50%;
	position:fixed;
	z-index:800;
	top:12%;
	left:50%;
	margin-left:-25%;
	padding:15px 35px;
	border: 3px solid #fab234;
}
#services .contactForm{
	width:100%;
}
#services .closeContactPopup{
	font-size:34px;
	position:absolute;
	right:20px;
	top:0px;
	color:#181818;
	cursor:pointer;
}
#servicesAnimation{
	overflow:hidden;
	position:absolute;
	left:0px;
	top:10px;
	border:0px;
	width:550px;
	height:550px;
}
/*==================================================================================*/
/*Disable Mobile-----------------------------------*/
.mobileServices{
	display:none;
}
/*End of Disable Mobile----------------------------*/
/*==================================================================================*/
@media only screen and (max-width: 575px) {	
	#services{
		display:none;
	}
	.mobileServices{
		display:block;
	}
	.servicesTopSpace{
		height:70px;
		position:relative;
	}
	.mobileServices .scrollContent{
		background-color:#ffffff;
		border: 3px solid #4167b0;
		margin:10px 10px;
		padding:10px;
		border-radius:25px;
		position:relative;
		z-index:700;
		padding-bottom:30px;
	}
	.mobileServices .servicesTitle{
		font-size:30px;
		font-weight:900;
		text-align:left;
	}
	.mobileServices .servicesText{
		position:relative;
		font-size:20px;
		top:20px;
	}
	.mobileServices .servicesBlocks{
		margin-top:40px;
	}
	.mobileServices .flip-box {
	  background-color: transparent;
	  width: 100%;
	  perspective: 1000px;
	  height:200px;
	  margin-bottom:10px;
	}

	.mobileServices .flip-box-inner {
	  position: relative;
	  width: 100%;
	  height: 100%;
	  text-align: center;
	  transition: transform 0.8s;
	  transform-style: preserve-3d;
	}

	.mobileServices .flip-box:hover .flip-box-inner {
	  transform: rotateX(180deg);
	}

	.mobileServices .flip-box-front, .flip-box-back {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  -webkit-backface-visibility: hidden;
	  backface-visibility: hidden;
	}

	.mobileServices .implementation .flip-box-front {
		background-color:#EA222C;
		color:#ffffff;
		text-align:center;
		border-radius:15px;
		padding:20px;
	}

	.mobileServices .implementation .flip-box-back {
		background-color:#ffffff;
		color:#EA222C;
		border: 3px solid #EA222C;
		text-align:center;
		border-radius:15px;
		padding:20px;
		transform: rotateX(180deg);
	}
	
	
	.mobileServices .migration .flip-box-front {
		background-color:#FF9C00;
		color:#ffffff;
		text-align:center;
		border-radius:15px;
		padding:20px;
	}

	.mobileServices .migration .flip-box-back {
		background-color:#ffffff;
		color:#FF9C00;
		border: 3px solid #FF9C00;
		text-align:center;
		border-radius:15px;
		padding:20px;
		transform: rotateX(180deg);
	}
	
	
	
	.mobileServices .integrations .flip-box-front {
		background-color:#76A53F;
		color:#ffffff;
		text-align:center;
		border-radius:15px;
		padding:20px;
	}

	.mobileServices .integrations .flip-box-back {
		background-color:#ffffff;
		color:#76A53F;
		border: 3px solid #76A53F;
		text-align:center;
		border-radius:15px;
		padding:20px;
		transform: rotateX(180deg);
	}
	
	
	.mobileServices .development .flip-box-front {
		background-color:#00A6AE;
		color:#ffffff;
		text-align:center;
		border-radius:15px;
		padding:20px;
	}

	.mobileServices .development .flip-box-back {
		background-color:#ffffff;
		color:#00A6AE;
		border: 3px solid #00A6AE;
		text-align:center;
		border-radius:15px;
		padding:12px;
		transform: rotateX(180deg);
	}
	
	
	
	.mobileServices .support .flip-box-front {
		background-color:#9E005D;
		color:#ffffff;
		text-align:center;
		border-radius:15px;
		padding:20px;
	}

	.mobileServices .support .flip-box-back {
		background-color:#ffffff;
		color:#9E005D;
		border: 3px solid #9E005D;
		text-align:center;
		border-radius:15px;
		padding:20px;
		transform: rotateX(180deg);
	}
	
	
	.mobileServices .consultation .flip-box-front {
		background-color:#705252;
		color:#ffffff;
		text-align:center;
		border-radius:15px;
		padding:20px;
	}

	.mobileServices .consultation .flip-box-back {
		background-color:#ffffff;
		color:#705252;
		border: 3px solid #705252;
		text-align:center;
		border-radius:15px;
		padding:20px;
		transform: rotateX(180deg);
	}
	
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
	#services{
		display:none;
	}
	.mobileServices{
		display:block;
	}
	.servicesTopSpace{
		height:70px;
		position:relative;
	}
	.mobileServices .scrollContent{
		background-color:#ffffff;
		border: 3px solid #4167b0;
		margin:10px 10px;
		padding:10px;
		border-radius:25px;
		position:relative;
		z-index:700;
	}
	.mobileServices .servicesTitle{
		font-size:30px;
		font-weight:900;
		text-align:left;
		top:-20px;
	}
	.mobileServices .servicesText{
		position:relative;
		font-size:20px;
		top:20px;
	}
	.mobileServices .servicesBlocks{
		margin-top:40px;
	}
	.mobileServices .flip-box {
	  background-color: transparent;
	  width: 100%;
	  perspective: 1000px;
	  height:120px;
	  margin-bottom:10px;
	}

	.mobileServices .flip-box-inner {
	  position: relative;
	  width: 100%;
	  height: 100%;
	  text-align: center;
	  transition: transform 0.8s;
	  transform-style: preserve-3d;
	}

	.mobileServices .flip-box:hover .flip-box-inner {
	  transform: rotateX(180deg);
	}

	.mobileServices .flip-box-front, .flip-box-back {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  -webkit-backface-visibility: hidden;
	  backface-visibility: hidden;
	}

	.mobileServices .implementation .flip-box-front {
		background-color:#EA222C;
		color:#ffffff;
		text-align:center;
		border-radius:15px;
		padding:20px;
	}

	.mobileServices .implementation .flip-box-back {
		background-color:#ffffff;
		color:#EA222C;
		border: 3px solid #EA222C;
		text-align:center;
		border-radius:15px;
		padding:20px;
		transform: rotateX(180deg);
	}
	
	
	.mobileServices .migration .flip-box-front {
		background-color:#FF9C00;
		color:#ffffff;
		text-align:center;
		border-radius:15px;
		padding:20px;
	}

	.mobileServices .migration .flip-box-back {
		background-color:#ffffff;
		color:#FF9C00;
		border: 3px solid #FF9C00;
		text-align:center;
		border-radius:15px;
		padding:20px;
		transform: rotateX(180deg);
	}
	
	
	
	.mobileServices .integrations .flip-box-front {
		background-color:#76A53F;
		color:#ffffff;
		text-align:center;
		border-radius:15px;
		padding:20px;
	}

	.mobileServices .integrations .flip-box-back {
		background-color:#ffffff;
		color:#76A53F;
		border: 3px solid #76A53F;
		text-align:center;
		border-radius:15px;
		padding:20px;
		transform: rotateX(180deg);
	}
	
	
	.mobileServices .development .flip-box-front {
		background-color:#00A6AE;
		color:#ffffff;
		text-align:center;
		border-radius:15px;
		padding:20px;
	}

	.mobileServices .development .flip-box-back {
		background-color:#ffffff;
		color:#00A6AE;
		border: 3px solid #00A6AE;
		text-align:center;
		border-radius:15px;
		padding:20px;
		transform: rotateX(180deg);
	}
	
	
	
	.mobileServices .support .flip-box-front {
		background-color:#9E005D;
		color:#ffffff;
		text-align:center;
		border-radius:15px;
		padding:20px;
	}

	.mobileServices .support .flip-box-back {
		background-color:#ffffff;
		color:#9E005D;
		border: 3px solid #9E005D;
		text-align:center;
		border-radius:15px;
		padding:20px;
		transform: rotateX(180deg);
	}
	
	
	.mobileServices .consultation .flip-box-front {
		background-color:#705252;
		color:#ffffff;
		text-align:center;
		border-radius:15px;
		padding:20px;
	}

	.mobileServices .consultation .flip-box-back {
		background-color:#ffffff;
		color:#705252;
		border: 3px solid #705252;
		text-align:center;
		border-radius:15px;
		padding:20px;
		transform: rotateX(180deg);
	}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	#services{
		display:none;
	}
	.mobileServices{
		display:block;
	}
	.servicesTopSpace{
		height:70px;
		position:relative;
	}
	.mobileServices .scrollContent{
		background-color:#ffffff;
		border: 3px solid #4167b0;
		margin:10px 10px;
		padding:10px;
		border-radius:25px;
		position:relative;
		z-index:700;
	}
	.mobileServices .servicesTitle{
		font-size:30px;
		font-weight:900;
		text-align:left;
		top:-20px;
	}
	.mobileServices .servicesText{
		position:relative;
		font-size:20px;
		top:20px;
	}
	.mobileServices .servicesBlocks{
		margin-top:40px;
	}
	.mobileServices .flip-box {
	  background-color: transparent;
	  width: 100%;
	  perspective: 1000px;
	  height:180px;
	  margin-bottom:10px;
	}

	.mobileServices .flip-box-inner {
	  position: relative;
	  width: 100%;
	  height: 100%;
	  text-align: center;
	  transition: transform 0.8s;
	  transform-style: preserve-3d;
	}

	.mobileServices .flip-box:hover .flip-box-inner {
	  transform: rotateX(180deg);
	}

	.mobileServices .flip-box-front, .flip-box-back {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  -webkit-backface-visibility: hidden;
	  backface-visibility: hidden;
	}

	.mobileServices .implementation .flip-box-front {
		background-color:#EA222C;
		color:#ffffff;
		text-align:center;
		border-radius:15px;
		padding:20px;
	}

	.mobileServices .implementation .flip-box-back {
		background-color:#ffffff;
		color:#EA222C;
		border: 3px solid #EA222C;
		text-align:center;
		border-radius:15px;
		padding:20px;
		transform: rotateX(180deg);
	}
	
	
	.mobileServices .migration .flip-box-front {
		background-color:#FF9C00;
		color:#ffffff;
		text-align:center;
		border-radius:15px;
		padding:20px;
	}

	.mobileServices .migration .flip-box-back {
		background-color:#ffffff;
		color:#FF9C00;
		border: 3px solid #FF9C00;
		text-align:center;
		border-radius:15px;
		padding:20px;
		transform: rotateX(180deg);
	}
	
	
	
	.mobileServices .integrations .flip-box-front {
		background-color:#76A53F;
		color:#ffffff;
		text-align:center;
		border-radius:15px;
		padding:20px;
	}

	.mobileServices .integrations .flip-box-back {
		background-color:#ffffff;
		color:#76A53F;
		border: 3px solid #76A53F;
		text-align:center;
		border-radius:15px;
		padding:20px;
		transform: rotateX(180deg);
	}
	
	
	.mobileServices .development .flip-box-front {
		background-color:#00A6AE;
		color:#ffffff;
		text-align:center;
		border-radius:15px;
		padding:20px;
	}

	.mobileServices .development .flip-box-back {
		background-color:#ffffff;
		color:#00A6AE;
		border: 3px solid #00A6AE;
		text-align:center;
		border-radius:15px;
		padding:20px;
		transform: rotateX(180deg);
	}
	
	
	
	.mobileServices .support .flip-box-front {
		background-color:#9E005D;
		color:#ffffff;
		text-align:center;
		border-radius:15px;
		padding:20px;
	}

	.mobileServices .support .flip-box-back {
		background-color:#ffffff;
		color:#9E005D;
		border: 3px solid #9E005D;
		text-align:center;
		border-radius:15px;
		padding:20px;
		transform: rotateX(180deg);
	}
	
	
	.mobileServices .consultation .flip-box-front {
		background-color:#705252;
		color:#ffffff;
		text-align:center;
		border-radius:15px;
		padding:20px;
	}

	.mobileServices .consultation .flip-box-back {
		background-color:#ffffff;
		color:#705252;
		border: 3px solid #705252;
		text-align:center;
		border-radius:15px;
		padding:20px;
		transform: rotateX(180deg);
	}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
	#services .servicesContent{
		position:absolute;
		left:80px;
		top:80px;
		z-index:520;
		width:95%;
		height:85%;
	}
	#services .servicesMidContent{
		opacity:0;
		position:absolute;
		right:40px;
		top:60px;
		width:45%;
	}
	#services .servicesTitle{
		font-size:30px;
		font-weight:900;
		text-align:left;
		top:-20px;
	}
	#services .servicesText{
		font-size:16px;
		top:20px;
	}
	#servicesAnimation{
		overflow:hidden;
		position:absolute;
		left:0px;
		top:0px;
		border:0px;
		width:480px;
		height:500px;
	}
	/*==================================================================================*/
}

@media only screen and (min-width: 1200px) and (max-width: 1440px) {
	#services .servicesContent{
		position:absolute;
		left:80px;
		top:80px;
		z-index:520;
		width:95%;
		height:85%;
	}
	#services .servicesMidContent{
		opacity:0;
		position:absolute;
		right:30px;
		top:60px;
		width:53%;
	}
	#services .servicesTitle{
		font-size:34px;
		font-weight:900;
		text-align:left;
		top:-20px;
	}
	#services .servicesText{
		font-size:18px;
		top:20px;
	}
	#servicesAnimation{
		overflow:hidden;
		position:absolute;
		left:-20px;
		top:20px;
		border:0px;
		width:550px;
		height:550px;
	}
	/*==================================================================================*/
}