/*
  	Flaticon icon font: Flaticon
  	Creation date: 17/11/2020 17:04
  	*/

	@font-face {
		font-family: "Flaticon";
		src: url("../fonts/Flaticon.eot");
		src: url("../fonts/Flaticon.eot?#iefix") format("embedded-opentype"),
			url("../fonts/Flaticon.woff2") format("woff2"),
			url("../fonts/Flaticon.woff") format("woff"),
			url("../fonts/Flaticon.ttf") format("truetype"),
			url("../fonts/Flaticon.svg#Flaticon") format("svg");
		font-weight: normal;
		font-style: normal;
	}

	@media screen and (-webkit-min-device-pixel-ratio:0) {
		@font-face {
			font-family: "Flaticon";
			src: url("./Flaticon.svg#Flaticon") format("svg");
		}
	}

	[class^="flaticon-"]:before,
	[class*=" flaticon-"]:before,
	[class^="flaticon-"]:after,
	[class*=" flaticon-"]:after {
		font-family: Flaticon;
		font-style: normal;
	}

	.flaticon-car-repair:before {
		content: "\f100";
	}

	.flaticon-automobile:before {
		content: "\f101";
	}

	.flaticon-maintenance:before {
		content: "\f102";
	}

	.flaticon-qrcode-read:before {
		content: "\f464";
	}

	.flaticon-vehicle:before {
		content: "\f103";
	}

	.flaticon-car:before {
		content: "\f104";
	}

	.flaticon-mechanical:before {
		content: "\f105";
	}

	.flaticon-maintenance-1:before {
		content: "\f106";
	}

	.flaticon-maintenance-2:before {
		content: "\f107";
	}

	.flaticon-quotation:before {
		content: "\f108";
	}

	.flaticon-search:before {
		content: "\f109";
	}

	.flaticon-lifter:before {
		content: "\f10a";
	}

	.flaticon-car-service:before {
		content: "\f10b";
	}

	.flaticon-screwdriver:before {
		content: "\f10c";
	}

	.custom-icon-box {
		position: relative;
		width: 100%;
		/* Width of your images */
		height: 100px;
		/* Height of your images */
		display: flex;
		justify-content: center;
		margin-bottom: -10px;
	}

	.custom-icon-box img {
		position: absolute;
		height: 80px;
		object-fit: cover;
		transition: opacity 1s ease-in-out;
		padding-left: 20px;
		/* padding-right: 70px; */
	}

	div.custom-inner {
		.custom-icon-box img {
			width: 80px;
		}
	}

	.fade-in {
		opacity: 0;
	}

	.fade-out {
		opacity: 1;
	}

	/* Animation */
	@keyframes fadeOutIn {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes fadeInOut {

		0% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	div.custom-inner:hover,
	div.single-item:hover {
		.custom-icon-box .fade-out {
			animation: fadeInOut 1s normal forwards;
		}

		.custom-icon-box .fade-in {
			animation: fadeOutIn 1s normal forwards;
		}
	}