.services-main-list{

}
.services-main-list .services-main-item{
	position: relative;
	z-index: 1;
	min-height: 350px;
	-webkit-box-flex: 1;
	-ms-flex: 1 1 495px;
	flex: 1 1 495px;
	/*background-color: #ffffff;*/
	background-color: #1f1c58;
	/*border: 1px solid #f4f4f9;*/
	border: 1px solid #332d73;
	-moz-transition: all 0.2s ease-in;
	-webkit-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}
.services-main-list .services-main-item:nth-child(4n-2), .services-main-list .services-main-item:nth-child(4n-1){
	background-image: url('images/pattern-blue.png');
}

.services-main-list .services-main-item .wrap{
	position: absolute;
	z-index: 2;
	top: -0.5%;
	left: -0.5%;
	width: 101%;
	height: 101%;
	background-color: transparent;
	-moz-transition: all 0.2s ease-in;
	-webkit-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
	padding: 50px;
	overflow: hidden;
}

.services-main-list .services-main-item .image{
    position: absolute;
    text-align: center;
    width: 360px;
    height: 130px;
    top: 50%;
    left: 50%;
	transform: translate(-50%, -50%);
}

.services-main-list .services-main-item .image svg{
	margin-bottom: 20px;
}





.services-main-list .services-main-item .image path{
	fill: #eb5b3f;
}
.services-main-list .services-main-item h3 a{
    width: 100%;
    font-weight: bold;
    font-size: 110%;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    /*color: #332d73;*/
    color: white;
	-webkit-text-decoration-color: transparent;
	text-decoration-color: transparent;
	-moz-transition: all 0.2s ease-in;
	-webkit-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}


.services-main-list .services-main-item .subservices-list{
	position: absolute;
	top: 100%;
	opacity: 0;
}

.services-main-list .services-main-item .subservices-list li{
	padding-left: 25px;
}
.services-main-list .services-main-item .subservices-list li:before{
	content: '\25B8';
	color: #EB5B3F;
	position: absolute;
    left: -5px;
}
.services-main-list .services-main-item .subservices-list li a{
	-webkit-text-decoration-color: transparent;
	text-decoration-color: transparent;
	text-decoration-thickness: 0.14em;
	color: #ffffff;
	font-size: 70%;
	text-transform: uppercase;
	letter-spacing: 0.1em;

}
.services-main-list .services-main-item .subservices-list li a:hover{
	-webkit-text-decoration-color: #EB5B3F;
	text-decoration-color: #EB5B3F;
}
@keyframes services-title{
	from{
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		opacity: 0;
	}
	to{
		top: 0%;
		left: 0;
		transform: translate(0%, 0%);
		opacity: 1;
	}
}
@keyframes services-subtitles{
	from{
		top: 100%;
		opacity: 0;
	}
	to{
		top: 42%;
		opacity: 1;
	}
}
@media screen and (max-width: 1086px){
	.services-main-list .services-main-item{
		background-image: none!important;
	}
	.services-main-list .services-main-item:nth-child(2n){
		background-image: url('images/pattern-blue.png')!important;
	}
}

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

	.services-main-list .services-main-item:hover{
		z-index: 2;
	}

	.services-main-list .services-main-item:hover .wrap{
		/*background-color: #1f1c58;*/
		background-color: white;
	}

	.services-main-list .services-main-item:hover .image{
		animation-delay: 0s;
		animation-duration: 0.4s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		animation-name: services-title;
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
		text-align: left;
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
		padding: 50px;
		height: -webkit-fit-content;
		height: -moz-fit-content;
		height: fit-content;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		opacity: 0;
		width: 100%;
	}

	.services-main-list .services-main-item:hover .image svg{
		margin-right: 20px;
		margin-bottom: 0;
	}

	.services-main-list .services-main-item:hover h3 a{
		color: #332d73;
		/*display: inline-block;*/
		font-size: 110%;
	}

	.services-main-list .services-main-item:hover h3 a:hover{
		-webkit-text-decoration-color: #EB5B3F;
		text-decoration-color: #EB5B3F;
	}

	.services-main-list .services-main-item:hover .subservices-list{
		animation-delay: 0s;
		animation-duration: 0.4s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		animation-name: services-subtitles;
		padding: 0 4% 3% 3%;
		margin-left: 15px;
	}

	.services-main-list .services-main-item:hover .subservices-list li {

	}

	.services-main-list .services-main-item:hover .subservices-list li a {
		color: black;
	}
}