@import "../../../../assets/scss/mixin";
.g5plus-icon-box {
	span.icon {
		position: relative;
	}
	span.icon > i {
		font-size: 32px;
	}
	.read-more {
		margin-top: 8px;
	}
	&.icon-round span.icon,
	&.icon-square span.icon,
	&.icon-transparent span.icon{
		display: inline-block;
		width: 65px;
		height: 65px;
		color: #fff;
		@include transition(all 0.5s);
		i {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translateX(-50%) translateY(-50%);
		}
	}

	&.icon-round span.icon {
		background-color: #444;
		@include border-radius(50%);
	}

	&.icon-transparent{
		span.icon{
			color: var(--g5-color-accent);
			border: solid 4px transparent;
			box-sizing: content-box;
			@include transition(all 0.5s);
			width: 60px;
			height: 60px;
		}
		.title{
			margin-top: 10px;
		}
		&:hover span.icon,
		span.icon:hover{
			border-color: var(--g5-color-accent);
			i{
				color: #333;
			}
		}

	}

	&:hover.icon-round span.icon,
	&.icon-round span.icon:hover{
		background-color: var(--g5-color-accent);
	}
	&.icon-square span.icon {
		background-color: var(--g5-color-accent);
		border: solid 4px var(--g5-color-accent);
		width: 60px;
		height: 60px;
		box-sizing: content-box;
	}
	&:hover.icon-square span.icon,
	&.icon-square span.icon:hover{
		color: #333;
		background-color: transparent;
	}

	&.align-center {
		text-align: center;
	}
	ul {
		padding: 0 !important;
		list-style: none;
	}
	.title {
		font-size: 16px;
		line-height: 1;
		margin-top: 20px;
		color: #222;
		font-weight: 700;
		a {
			color: #222;
		}
	}
	.desc {
		margin-top: 7px;
	}

	&.icon-small.align-left {
		.icon,
		.icon-image {
			width: 32px;
			display: inline-block;
			float: left;
		}
		i {
			color: var(--g5-color-accent);
		}
		.content {
			padding-left: 48px;
		}
	}

	&.icon-large.align-left {
		.icon,
		.icon-image {
			width: 70px;
			display: inline-block;
			float: left;
		}
		i {
			color: var(--g5-color-accent);
			font-size: 70px;
		}
		.content {
			padding-left: 100px;
		}
	}
}
@media screen and (max-width: 590px){
	.g5plus-icon-box {
		&.icon-large.align-left {
			.icon,
			.icon-image {
				width: 50px;
			}
			i {
				font-size: 50px;
			}
			.content {
				padding-left: 80px;
			}
		}
	}
}