//	=================
//    	Imports
//	=================

@import '../base/color_variables';   	// Color Variables
@import '../base/fonticons';   			// Fonticons Variables
@import '../base/urls';   				// URLS Variables
@import '../base/utilities_variables';  // Utilities Variables

.icon-list {
	&:before {
		content: none;
	}
	li {
		width: 24%;
		padding: $p-10;
		margin-right: $m-0;
		vertical-align: $v-align-baseline;
		text-align: $align-center;
		height: 130px;
		display: inline-block;
		list-style: none;
	}
}
.pos-rel {
	margin-bottom: $m-20;
	font-size: $fs-20;
}
h4 {
	color: $color_56;
	font-weight: 600;
	margin: $m-0;
	padding: 16px 15px;
	font-size: 1.3rem;
}
.d-menu {
	top: 30px;
}
.example {
	ul.icon-list {
		li {
			span {
				border: $b-width-1 $solid $color_6;
				padding: $p-20 $p-0 $p-0 $p-0;
				border-radius: $br-10;
				width: 65px;
				height: 65px;
				transition: .3s;
				font-size: 22px;
				color: $additional-color-6;
				box-shadow: $shadow-4;
				&:hover {
					border: $b-width-1 $solid $color_6;
					color: $color_57;
					&+p {
						color: $color_57;
					}
				}
			}
			p {
				font-size: $fs-15;
				margin: $m-10 $m-0 $m-0 $m-0;
				transition: .3s;
				font-family: $font_family_2;
			}
		}
	}
}
@media (max-width: 768px) {
	.icon-list {
		li {
			width: 48%;
			padding: 4px;
			height: 110px;
		}
	}
	.example {
		ul.icon-list {
			li {
				span {
					width: 50px;
					height: 60px;
				}
				p {
					font-size: 14px;
				}
			}
		}
	}
}