/* 05.21. Icon Box */
.header {
	.icon-box {
		display: block;
		transition: $primary-transition;
		width: 100%;

		@media (min-width: $screen-md-min) {
			display: inline-block;
			margin-right: 20px;
			padding-left: 20px;
			padding-top: 6px;
			border-left: 1px solid rgba(250, 250, 250, .1);
			border-bottom: 0;
			width: auto;
		}

		@media (min-width: $screen-lg-min) {
			margin-right: 30px;
			padding-left: 30px;
		}

		.fa {
			margin-right: 3px;
			transition: $primary-transition;
			color: $primary-color;
			font-size: 16px;
		}

		&__title {
			margin-top: 6px;
			margin-bottom: 0;
			display: inline-block;
			color: #c7cedb;
			transition: $primary-transition;
			font-size: 14px;
			font-family: $secondary-font;
			font-weight: normal;
		}

		&__subtitle {
			display: block;
			color: #ffffff;
			font-size: 16px;
			font-weight: bold;
		}

		&:hover {
			text-decoration: none;
		}
	}

	.widget-icon-box {
		&:first-of-type {
			.icon-box {
				margin-left: 0;
				padding-left: 0;
				border-left: 0;
			}
		}
	}
}

.content-area {
	.icon-box {
		display: block;

		.fa {
			color: $primary-color;
			font-size: 28px;
			display: inline-block;
			width: 30px;
		}

		&__title {
			font-weight: normal;
			font-size: 24px;
			margin-top: 5px;
			margin-bottom: 16px;
			margin-left: 28px;
			display: inline-block;
		}

		&__subtitle {
			display: block;
			margin-left: 60px;
			color: $text-color;
			font-family: $secondary-font;
		}

		&:hover {
			text-decoration: none;
		}
	}

	.icon-box-small {
		.fa {
			float: right;
			font-size: 45px;
			color: #d2d2d2;
			width: auto;
		}

		.icon-box {
			position: relative;
			padding: 0 15px 30px;

			@media (min-width: $screen-md-min) {
				padding: 27.5px 15px;
			}

			&::after {
				position: absolute;
				content: '';
				bottom: 0;
				left: 0;
				right: 0;
				background-color: rgba(0, 0, 0, .05);
				height: 1px;

				@media (min-width: $screen-md-min) {
					width: 1px;
					height: auto;
					left: inherit;
					right: -15px;
					top: 0;
				}
			}

			&__title {
				font-weight: bold;
				font-size: 14px;
				margin-left: 0;
				color: $text-color;
				margin-bottom: 3px;
			}

			&__subtitle {
				margin-left: 0;
				margin-top: -2px;
				margin-right: 60px;
			}
		}

		.panel-grid-cell {
			&:first-of-type {
				.icon-box {
					padding-top: 27.5px;

					@media (min-width: $screen-md-min) {
						padding-left: 0;
					}
				}
			}

			&:last-of-type {
				.icon-box {
					@media (min-width: $screen-md-min) {
						padding-right: 0;
					}

					&::after {
						display: none;
					}
				}
			}
		}
	}
}