/* Other
----------------------------------------------------------*/

/* Social Bar */

ul.social-bar {
	list-style: none;
	margin: 0;
	border-top: 1px solid $color-line-dark;
	padding: 20px 0 0 0;

	> li {
		margin-right: 20px;
		display: inline-block;

		&:last-child { 
			margin-right: 0;
		}

		a {
			font-family: $font-secondary;
			text-transform: uppercase;
			font-weight: 600;
			font-size: 11px;

			.icon {
				margin-right: 8px;
			}
		}
	}
}

/* Workflow Steps */

.workflow-steps {
	position: relative;

	.workflow-progress {
		position: absolute;
		top: 32px;
		width: 100%;
		display: block;
		height: 2px;
		background-color: $color-grey-3;
		z-index: 0;

		@media #{$screen-sm} {
			display: none;
		}

		&:after {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 0;
			background-color: $color-primary;
			content: ' ';
			@include transition(width 4s linear);
		}

		&.animated {
			visibility: visible;

			&.visible:after {
				width: 100%;
			}
		}
	}

	.step {
		.icon {
			margin-bottom: 50px;
		}
		&.animated {
			visibility: visible;

			i, h5, p {
				@include opacity(0.3);
				@include transition(all 0.2s ease-out);
			}

			&.visible {
				i, h5, p {
					@include opacity(1);
				}
			}
		}
	}
}

.bg-primary .workflow-steps {
	.workflow-progress {
		background-color: rgba($color-white, 0.2);

		&:after {
			background-color: $color-white;
		}
	}
}

/* Bordered box */

.bordered-box {
	padding: 30px;
	border: 1px solid $color-line-dark;
}
.dark .bordered-box {
	border-color: $color-line-light;
}

/* Countdown */

.countdown {
	font-size: 74px;
	font-weight: 100;
	line-height: 1;

	> span {
		margin-right: 15px;
		margin-bottom: 15px;
		display: inline-block;
	}
	
	.weeks, .days {
		position: relative;
		> span {
			position: absolute;
			bottom: -15px;
			left: 0;
			right: 0;
			text-align: center;
			font-size: 13px;
			@include opacity(0.5);
			font-family: $font-secondary;
			text-transform: uppercase;
		}
	}
}

/* Typing */

.typed-cursor {
	@include opacity(1);
	@include animation(blinking 1.5s infinite);
}

/* Close */

.close {
	text-shadow: none;
	@include opacity(0.4);

	&:hover, &:focus {
		@include opacity(0.7);
	}
}
.dark .close {
	color: $color-white;
}

/* PayPal */

.paypal-donate {
	input { display: none; }
}

/* Timetable */

.timetable {
	margin-bottom: 30px;

	h5 {
		margin-bottom: 0;
	}

	.head {
		margin-bottom: 0;
		padding-bottom: 15px;
		border-bottom: 2px solid $color-primary;
	}

	.item {
		padding: 50px 0;
		border-bottom: 2px solid $color-line-dark;
	}
}

.bg-grey .timetable {
	.item {
		border-color: $color-white;
	}
}

.dark .timetable {
	.item {
		border-color: $color-line-light;
	}
}

/* Menu List */

.list-menu {
	list-style: none;
	padding: 0;
	margin: 0;

	> li {
		margin-bottom: 20px;
		border-bottom: 1px dotted $color-line-dark;
		@include display-flex;

		.title {
			@include flex-grow(4);

			.caption {
				margin-bottom: 20px;
				display: block;
			}
		}
		.price {
			font-family: $font-secondary;
			font-size: 18px;
			text-align: right;
			@include flex-grow(1);
		}
	}
}

.dark .list-menu li {
	border-color: $color-line-light;
}

/* Affix */

.side-sticky-navigation.affix {
    top: 110px;
    width: 100%;
    max-width: 300px;
}

/* Documentation */

.shape {
	display: inline-block;
	width: 64px;
	height: 64px;

	&.rounded {
		@include border-radius(3px);
	}
}

.example-box { border: 1px solid #E1E1E8; border-top-left-radius: 4px; border-top-right-radius: 4px; margin-bottom: 20px; }
.example-box-content { padding: 20px; }
.example-box-content > *:last-child { margin-bottom: 0; }
.example-box-title { padding: 10px 20px; text-transform: uppercase; font-size: 11px; border-bottom: 1px solid #E1E1E8; background-color: #F7F8F9; color: #9b9fa1; font-weight: 500; }
.example-box + pre { margin-top: -1px !important; border-top-left-radius: 0; border-top-right-radius: 0; }
pre { tab-size: 4; }