/* Services Panel */
.services-panel {
	padding: 8.888em 0 28.055em;
	position: relative;
	z-index: 1;
}

.services-panel:before {
	position: absolute;
	top: -.01em;
	left: 0;
	width: 100%;
	height: 72.555em;
	background-size: cover;
	background-position: 50% 50%;
	background-image: url(/images/services-panel-bg.png);
	z-index: -1;
	content: '';
}
/* End Services Panel */

/* Left Side */
.services-panel .left-side {
	width: 46.388em;
	padding-top: 3.611em;
}

.services-panel .left-side .content-style h4 {
	font-size: 3.333em;
	color: #FFFFFF; /* $white */
}

.services-panel .left-side .content-style p {
	color: #FFFFFF; /* $white */
}

.services-panel .left-side .btn-con {
	padding-top: 1.222em;
}
/* End Left Side */

/* Right Side */
.services-panel .right-side {
	width: 41.555em;
}

.services-panel .right-side ul li {
	width: 20.222em;
	height: 17.222em;
	background-color: #083A81; /* $dark */
	position: relative;
	border: 5px solid #FFFFFF; /* $white */
	margin-bottom: 1.111em;
	box-shadow: -6px 18px 30px 0px rgba(0, 0, 0, 0.2);
	transition: .8s ease 0s;
}

.services-panel .right-side ul li:hover {
	background-color: #353335; /* $text */
	border: 10px solid #FFFFFF; /* $white */
}

.services-panel .right-side ul li a {
	display: block;
	width: 100%;
	height: 100%;
}

.services-panel .right-side ul li img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	transition: .8s ease 0s;
}

.services-panel .right-side ul li strong {
	position: absolute;
	right: 0;
	font-size: 1.667em;
	color: #FFFFFF; /* $white */
	text-transform: uppercase;
	line-height: 1;
	text-align: right;
	bottom: -.166em;
}
/* End Right Side */

/* 1440px Responsive */
@media screen and (max-width:1440px) {
	.services-panel .left-side {
		width: 42.388em;
	}

	.services-panel:before {
		top: -.6em;
	}
}
/* End 1440px Responsive */

/* 1200px Responsive */
@media screen and (max-width:1200px) {
	.services-panel .left-side {
		width: 36.388em;
	}

	.services-panel .right-side ul li {
		width: 48%;
	}

	.services-panel:before {
		top: -.5em;
		background-position: 31% 50%;
	}
}
/* End 1200px Responsive */

/* 1000px Responsive */
@media screen and (max-width:1000px) {
	.services-panel .left-side {
		width: 100%;
	}

	.services-panel .left-side .content-style h4 {
		font-size: 2.780em;
	}

	.services-panel .full {
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.services-panel .right-side {
		padding-top: 3em;
		width: 100%;
	}

	.services-panel .right-side ul li {
		width: 24%;
		height: 10.222em;
	}

	.services-panel .right-side ul li strong {
		font-size: 1.333em;
	}

	.services-panel:before {
		height: 46.277em;
		background-image: url(/images/services-panel-bg-tablet.png);
		background-position: 50% 50%;
	}

	.services-panel {
		padding: 0em 0 13em;
	}
}
/* End 1000px Responsive */

/* 800px Responsive */
@media screen and (max-width:800px) {
	.services-panel .right-side {
		display: none;
	}

	.services-panel {
		text-align: center;
		padding: 0 0 23em;
	}

	.services-panel .left-side .content-style h4 {
		font-size: 2.512em;
	}
}
/* End 800px Responsive */

/* 550px Responsive */
@media screen and (max-width:550px) {
	.services-panel:before {
		height: 45.818em;
		background-image: url(/images/services-panel-bg-mobile.png);
		top: 0;
	}

	.services-panel .left-side .content-style h4 {
		font-size: 1.958em;
	}

	.services-panel .left-side .content-style p {
		font-size: 1.027em;
	}

	.services-panel {
		padding-top: 2.692em;
		padding-bottom: 25.258em;
	}

	.services-panel .left-side {
		padding-top: 0;
	}

	.services-panel .left-side .btn-con {
		padding-top: .930em;
	}
}
/* End 550px Responsive */