.introduction {
	$background-color: lighten($gray-lightest, 5%);

	@include clearfix;
	background-color: $background-color;
	margin-top: 15px;
	padding: 2px ($grid-gutter-width / 2) 0;
	position: relative;
	transition: background-color 1s;

	&:hover {
		background-color: darken($background-color, 2%);
	}
}

.introduction h3 {
	color: $blue;
	margin: 5px 0 6px;
}

.calendar-introduction {
	margin-top: 60px;
}

// sass-lint:disable no-ids
.calendar-introduction + #maincontent > .container {
	padding-top: 0;
}
// sass-lint:enable no-ids

.js-introduction-close-btn {
	@include td-pos(right, 13px);
	font-size: large;
	position: absolute;
	top: 13px;
}

.introduction-show-btn,
.introduction-hide-btn {
	@include btn-sm;
	@include td-margin(left, 10px);

	&::after {
		font-family: FontAwesome;
	}
}

.introduction-show-btn::after {
	content: '\f107';
}

.introduction-hide-btn::after {
	content: '\f106';
}

.introduction-content {
	border-top: 1px solid $gray-lighter;
	margin-top: 5px;
	padding: 12px ($grid-gutter-width / 2);
}

.introduction-steps {
	@include list-unstyled;
	font-size: medium;
	text-align: center;
}

.introduction-steps > li {
	@include td-make-xs-column(6);
	@include td-make-sm-column(4);
	@include td-make-md-column(2);
	margin-bottom: 15px;

	@media (max-width: $screen-xxs) {
		@include td-make-xs-column(12);
		padding-bottom: 20px;
		text-align: center;
	}

	&:nth-child(2),
	&:nth-child(4) {
		@media (max-width: $screen-sm) {
			padding-bottom: 15px;
		}
	}
}

.introduction-steps > li > h2 {
	margin-bottom: 8px;
	margin-top: 0;
	text-align: center;

	&::after {
		@include opacity(.5);
		@include td-pos(right, 0);
		color: lighten($gray-light, 15%);
		content: '';
		font-family: FontAwesome;
		font-size: 16px;
		position: absolute;
		top: 6px;

		@media (max-width: $screen-xxs) {
			@include td-pos(right, 47%);
			bottom: -15px;
			content: '';
		}
	}
}

.introduction-steps > li:nth-of-type(2) > h2::after,
.introduction-steps > li:nth-of-type(4) > h2::after {
	@media (max-width: $screen-sm) {
		content: '';
	}
}

.introduction-steps > li:nth-of-type(3) > h2::after {
	@media (max-width: $screen-md) and (min-width: $screen-sm) {
		content: '';
	}
}

.introduction-steps > li:last-of-type > h2::after {
	content: '';
}

.rtl {
	.introduction-steps > li > h2::after {
		content: '\f060';
		right: auto;
	}

	.introduction-steps > li:nth-of-type(2) > h2::after,
	.introduction-steps > li:nth-of-type(4) > h2::after {
		@media (max-width: $screen-sm) {
			content: '';
		}
	}

	.introduction-steps > li:nth-of-type(3) > h2::after {
		@media (max-width: $screen-md) and (min-width: $screen-sm) {
			content: '';
		}
	}
}

.introduction-steps > li > h2 > .fa {
	@include opacity(.6);
	color: $blue;
}
