
.single-lp_course {

	.main-content-area,
	.sidebar-area {
		padding-top: $container-pt;
		padding-bottom: $container-pb;
		@include media-breakpoint-down(md) {
			padding-top: $container-pt/2;
			padding-bottom: $container-pb/2;
		}
	}
	.entry-content {
		.course-thumbnail {
			margin-bottom: 40px;
			position: relative;
			@include media-breakpoint-down(sm) {
				margin-bottom: 30px;
			}
			.intro-video-button {
				z-index: 11;
				position: absolute;
				top: 50%;
				left: 50%;
				background: rgba(255, 255, 255, 0.8);
				width: 60px;
				height: 60px;
				border-radius: 100%;
				-webkit-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
				box-shadow: 0 0 1px 15px rgba(60,201,81,.4), 0 0 1px 30px rgba(60,201,81,.1), 0 0 1px 45px rgba(60,201,81,.1);
				@include transition(all 0.4s ease);
				&:before {
					content: '';
					position: absolute;
					top: 50%;
					left: 50%;
					display: block;
					width: 0;
					height: 0;
					border-top: 10px solid transparent;
					border-right: 10px solid transparent;
					border-bottom: 10px solid transparent;
					border-left: 10px solid #666;
					-webkit-transform: translate(-15%, -50%);
					transform: translate(-15%, -50%);
					@include transition(all 0.4s ease);
				}
			}
			&:hover .intro-video-button {
				background: rgba(255, 51, 51, 0.9);
				width: 80px;
				height: 80px;
				box-shadow: 1px 1px 20px rgba(0, 0, 0, .3);
				&:before {
					border-left: 10px solid #fff;
				}
			}
		}



		.course-entry-meta {
			margin-bottom: 45px;
			@include media-breakpoint-down(sm) {
				margin-bottom: 30px;
			}
			.entry-meta {
				.each-meta {
					padding-right: 20px;
					padding-left: 20px;
					border-right: 1px solid rgba(155, 155, 155, 0.3);
					label {
						color: #999;
						font-size: 0.85rem;
						margin-bottom: 0;
						font-weight: 400;
						text-transform: uppercase;
					}
					span {
						display: block;
						color: #555;
						font-size: 0.85rem;
						font-weight: $font-weight-bold;
						&.cat-link {
							a {
								color: #1e1e1e;
								font-size: 13px;
							}
						}
					}


					.author {
						img {
							display: inline-block;
							border-radius: 50%;
							margin-right: 16px;
							width: 50px;
						}
						.author-details {
							display: inline-block;
						}
					}


					.rating {
						line-height: 18px;
						.star {
							display: inline-block;
							letter-spacing: -0.5px;
							i {
								font-size: 14px;
								margin-right: 0;
								color: #f1c40f;
							}
						}
					}
					.lp-course-buttons {
						margin-bottom: 0;
					}

					&:last-child {
						border-right: 0;
					}
					&:first-child {
						padding-left: 0;
					}
					@include media-breakpoint-down(md) {
						&.item-author, &.entry-count-students {
							display: none;
						}
						&:nth-child(3) {
							padding-left: 0;
						}
					}
					@include media-breakpoint-down(sm) {
						&.entry-categoy, &.item-review {
							display: none;
						}
						&.button-box {
							padding-left: 0;
							padding-right: 0;
						}
					}
				}
			}
		}
	}


	.learn-press-nav-tabs {
		margin: 0;
		border: 0;
		.course-nav {
			width: 25%;
			border: 1px solid #eee;
			background: #f8f8f8;
			border-right: 0;
			color: #212121;
			font-weight: 600;
			text-align: center;
			@include media-breakpoint-down(sm) {
				width: 50%;
			}
			a {
				display: block;
				color: #333;
			}
			&.active {
				position: relative;
				background: #fff;
				color: #17a2b8;
				a {
					display: block;
					color: #17a2b8;
				}
				&:before {
					content: '';
					position: absolute;
					left: 0;
					right: 3px;
					top: 0;
					height: 2px;
					z-index: 10;
					width: 100%;
					background: #17a2b8;
				}
			}
			&:last-child a {
				border-right: 1px solid #eee;
			}
			&:after {
				display: none;
			}
		}
	}

	#learn-press-course-tabs {
		margin-bottom: 0;
	}
	.course-tab-panel {
		border: 1px solid #eee;
		border-top: 0;
		padding: 30px;
	}
	.course-tab-panel-curriculum {
		padding: 1px 0 0;
	}


	// dropdown courses
	.course-curriculum {
		.curriculum-heading {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-right: 25px;
			margin-left: 25px;
			border-bottom: 1px solid rgba(124, 124, 124, .2);
			padding-top: 28px;
			padding-bottom: 25px;

			.search {
				display: none;
			}
			.title {
				padding-right: 15px;

				.course-curriculum-title {
					color: #292929;
					text-transform: uppercase;
				}
			}
		}

		.curriculum-sections {
			.section {
				&:last-child {
					.section-heading {
						border-bottom: none;
					}
				}

				.section-heading {
					cursor: pointer;
					position: relative;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 0;
					margin-left: 25px;
					margin-right: 25px;
					border-bottom: 1px solid rgba(124, 124, 124, .2);
					padding-top: 24px;
					padding-bottom: 21px;
					padding-left: 25px;
					font-size: 1rem;
					line-height: 1.7;
					color: #444;

					&::before {
						content: '\f067';
						font-family: FontAwesome;
						font-size: 0.8rem;
						color: #17a2b8;
						line-height: 1;
						position: absolute;
						top: 30px;
						left: 0;
					}
					.meta {
						color: #666;
						font-weight: 400;
					}
				}

				&.active-accordion {
					.section-heading {
						&:before {
							content: "\f068";
						}
					}
				}

				.section-content {
					background-color: #f9f9f9;
					border-top: 1px solid rgba(155, 155, 155, .2);
					border-bottom: 1px solid rgba(155, 155, 155, .2);
					transform: translateY(-1px);
					margin-bottom: 0;

					.course-item {
						display: flex;
						flex-wrap: wrap;
						align-items: center;
						background-color: transparent;
						padding-left: 28px;
						padding-top: 23px;
						margin-right: 25px;
						padding-bottom: 21px;
						border-bottom: 1px solid rgba(155, 155, 155, .2);

						&:last-child {
							border-bottom: none;
						}

						.meta-rank {
							width: 28px;

							.rank {
								font-weight: 400;
								font-size: 0.9rem;
								line-height: 1.75;
								color: #292929;
							}
						}

						.course-format-icon {
							width: 25px;
							font-size: 0.9rem;
							color: #17a2b8;
						}

						.section-item-link {
							width: calc(100% - 28px - 25px);
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-size: 0.9rem;
							line-height: 1.75;

							@include media-breakpoint-down(sm) {
								width: 100%;
								display: block;
							}

							.item-name {
								font-weight: 400;
								color: #292929;
								padding-left: 0;
								padding-top: 0;
								padding-bottom: 0;
								padding-right: 15px;
								transition: all .2s;
								@include media-breakpoint-down(sm) {
									padding-right: 0;
								}
							}

							.course-item-meta {
								font-weight: 300;
								color: #383838;
								transition: all .2s;
								padding-top: 0;
								padding-bottom: 0;
								display: flex;
								align-items: center;
								.duration {
									background-color: #555;
									margin-right: 5px;
									height: auto;
									padding: 3px 8px;
									font-size: 13px;
									line-height: 1.2;
									@include media-breakpoint-down(sm) {
										margin: 0;
									}
								}
								.final-quiz {
									margin-left: 15px;
								}
								.courses-time {
									width: 130px;
									text-align: right;
								}
								.lp-label-preview,
								.count-questions {
									background-color: transparent;
									color: #f8b944;
									padding: 0;
									font-size: 0.9rem;
								}
								.item-has-status {
									display: inline-block;
									vertical-align: top;
									margin-right: 5px;
									line-height: 28px;
									&.item-status-completed, &.item-status-passed {
										&:before {
											content: "\f00c";
											font-size: 0.9rem;
											font-family: FontAwesome;
										}
									}
									&.item-status-failed {
										&:before {
											content: "\f05c";
											font-size: 0.9rem;
											color: #ff0000;
											font-family: FontAwesome;
										}
									}
								}
							}

							&:hover {
								.item-name,
								.course-item-meta {
									color: #17a2b8;
								}
							}
							&:before  {
								display: none;
							}
						}
					}
				}

				&.active-dropdown {
					.section-heading {
						border-color: transparent;

						&::before {
							content: '\f068';
						}
					}
				}
				&:last-child {
					.section-content {
						border-bottom: none;
					}
				}
			}
		}


		.courses-lessons {
			white-space: nowrap;
		}
	}
	
	.tm-course-author {
		margin-bottom: 0;
		@include media-breakpoint-down(sm) {
			float: none;
			margin-bottom: 0;
		}

		.author-avatar {
			margin-bottom: 30px;
			float: left;
			img {
				border-radius: 5px;
			}
			@include media-breakpoint-down(sm) {
				float: none;
				margin-bottom: 10px;
			}
		}

		.author-bio {
			.name {
				font-size: $h5-font-size;
				font-family: $heading-font;
				font-weight: $headings-font-weight-h4-h6;
				line-height: $headings-line-height;
				color: $headings-color;
				margin-top: 0;

				&:hover {
					color: #333;
				}
			}

			.job-position {
				font-size: 0.85rem;
				color: #999;
				margin-top: 0;
			}
		}

		.author-description {
		}
	}


	.reviews {
		border: none;
		border-radius: 0;
		padding: 0;
		margin-bottom: 0;
		background-color: transparent;
		display: flex;
		margin-top: 25px;
		margin-left: 15px;
		margin-bottom: 10px;
		@include media-breakpoint-down(sm) {
			display: block;
			margin: 0;
		}
		.average-rating {
			border-radius: 5px;
			margin-right: 40px;
			text-align: center;
			width: 200px;
			display: block;
			height: 190px;
			border: 3px solid #eee;
			@include media-breakpoint-down(sm) {
				width: 100%;
				margin-bottom: 30px;
			}
			.number-rate {
				padding-bottom: 5px;
				font-size: 75px;
				font-weight: 700;
				padding-top: 30px;
				margin-bottom: -6px;
				display: block;
				line-height: 70px;
				color: #333;
			}
			.star {
				letter-spacing: -2.5px;
				line-height: 20px;
				padding: 6px 0 0;
				i {
					color: #ffa600;
				}
			}

			.review-stars-rated {
				width: 75px;
				position: relative;
				display: inline-block;
				.review-stars {
					&.empty {
						color: #ffa600;
						width: 75px;
						font-size: 16px;
						height: 20px;
						font-family: FontAwesome;
						&:before {
							content: '\f006\f006\f006\f006\f006';
							line-height: 1;
							vertical-align: top;
						}
						&:after {
							clear: both;
							content: '';
							display: block;
						}
					}
				}
			}

			.review-number {
				font-size: 16px;
				font-weight: 400;
				color: #2b3339;
				text-transform: capitalize;
			}
		}

		.detailed_rating {
			flex-grow: 1;
			margin: -4px 0 0;
			display: block;
			.course-rate {
				margin-top: 0;
				margin-bottom: 15px;
				display: flex;
				align-items: center;
				@include media-breakpoint-down(sm) {
					&:last-child {
						margin-bottom: 0;
					}
				}
				.number-star {
					display: block;
					float: left;
					min-width: 50px;
					margin-right: 5px;
				}
				.review-bar {
					background-color: #eee;
					-webkit-border-radius: 3px;
					-moz-border-radius: 3px;
					border-radius: 3px;
					overflow: hidden;
					width: calc(100% - 150px);
					height: 15px;
					margin-right: 15px;
					@include media-breakpoint-down(sm) {
						width: calc(100% - 60px);
					}
					.rating {
						background:#ffa600;
						height: 15px;
					}
				}
				.percent {
					font-weight: $headings-font-weight-h4-h6;
					color: $headings-color;
				}
			}
		}
	}
}
