/* codeDESIGN - custom_code_services_grid.css */
@charset "utf-8";

/* CUSTOM CODE SERVICES GRID */
div.custom_code_services_grid [class^="col-"],
div.custom_code_services_grid [class*=" col-"] {
	padding-left: 0px;
	padding-right: 0px;
}

div.custom_code_services_grid {
	margin: 80px 0px;
}

div.custom_code_services_grid div.services_grid {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 40px;
	position: relative;
	width: 100%;
}

div.custom_code_services_grid div.service_item {
	display: block;
	position: relative;
	width: calc((100% / 4) - (40px * 3 / 4));
	background: var(--ci_color_blue);
	-moz-transition: all 0.3s ease 0s;
	-webkit-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
}
div.custom_code_services_grid div.service_item:hover {
	background: var(--ci_color_blue_hover);
}
/*
@media only screen and (max-width : 1199px) {
	div.custom_code_services_grid div.service_item {
		width: calc((100% / 4) - (40px * 3 / 4));
	}
}
*/
@media only screen and (max-width : 991px) {
	div.custom_code_services_grid div.service_item {
		width: calc((100% / 3) - (40px * 2 / 3));
	}
}
@media only screen and (max-width : 768px) {
	div.custom_code_services_grid div.service_item {
		width: calc((100% / 2) - (40px * 1 / 2));
	}
}

div.custom_code_services_grid div.service_icon a,
div.custom_code_services_grid div.service_icon a:link,
div.custom_code_services_grid div.service_icon a:visited {
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	padding: 20px;
	color: var(--ci_color_white);
}

div.custom_code_services_grid div.service_icon {
	display: block;
	position: relative;
	padding-bottom: calc(100% - 72px);
}
div.custom_code_services_grid div.service_icon i[class^="fa-"] {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 120px;
	line-height: 120px;
	font-weight: 600;
}
@media only screen and (max-width : 1199px) {
	div.custom_code_services_grid div.service_icon i[class^="fa-"] {
		font-size: 75px;
		line-height: 75px;
	}
}
@media only screen and (max-width : 768px) {
	div.custom_code_services_grid div.service_icon i[class^="fa-"] {
		font-size: 6vb;
		line-height: 6vb;
	}
}
@media only screen and (max-width : 768px) {
	div.custom_code_services_grid div.service_icon i[class^="fa-"] {
		font-size: 6vb;
		line-height: 6vb;
	}
}

div.custom_code_services_grid div.service_title {
	display: block;
	position: relative;
	text-align: center;
}

div.custom_code_services_grid div.service_title a,
div.custom_code_services_grid div.service_title a:link,
div.custom_code_services_grid div.service_title a:visited {
	display: inline-block;
	position: relative;
	width: 100%;
	height: 100%;
	padding: 0px 20px 20px 20px;
	color: var(--ci_color_white);
	text-decoration: none;
}

/*
div.custom_code_services_grid h2 {
	padding-left: 90px;
}
div.custom_code_services_grid h2::before {
	content: '';
	background: url('/a_media/logo/halblogo.svg');
	background-position: center center;
	background-size: contain;
	display: block;
	position: absolute;
	height: 80px;
	width: 80px;
	left: -8px;
	top: -34px;
}
@media only screen and (max-width : 991px) {
	div.custom_code_services_grid h2 {
		padding-left: 70px;
	}
	div.custom_code_services_grid h2::before {
		height: 60px;
		width: 60px;
		left: -6px;
		top: -34px;
	}
}
*/