.top-image {
	/* 	height: 550px; */
	height: 350px;
	display: grid;
}

.top-image > * {
	grid-area: 1/1/-1/-1;
}

.top-image .overlay {
	background-color: #000;
	opacity: 0.3;
}

.top-image .inner-content {
	display: flex;
	height: 100%;
	justify-content: center;
	z-index: 15;
}

.top-image .inner-content .title {
	align-self: center;
	font-size: 6.250em;
	color: #fff;
	color: var(--white, #fff);
	font-weight: bold;
	text-align: center;
}

/* Categories List - In Parent Categories Page */
.content-wrapper {
	width: 1421px;
	/* 	margin: 100px auto; */
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

.content-wrapper .posts-list {
	/* 	margin: 100px 0; */
}

.content-wrapper .posts-list .course-description {
	text-align: center;
	font-size: var(--font20px);
	margin: -30px 0 40px;
}

.content-wrapper .posts-list:empty {
	display: none;
}

.categories-list ul.container {
	width: 1020px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 40px;
}

.categories-list ul li a .image {
	height: 244px;
	display: flex;
	justify-content: center;
}

.categories-list ul li a .image .hover {
	display: none;
}

.categories-list ul li a .image:hover .hover {
	display: grid;
	width: 100%;
}

.categories-list ul li a .image:hover .hover > * {
	grid-area: 1/-1;
}

.categories-list ul li a .image:hover .hover .background {
	background-color: #000;
	opacity: 0.1;
}

.categories-list ul li a .image:hover .hover .title {
	align-self: center;
	text-align: center;
	color: #fff;
	font-weight: bold;
	font-size: 1.250em;
}

.categories-list ul li a .inner-wrapper {
	padding-top: 23px;
	text-align: center;
	font-size: 1.250em;
}

.categories-list ul li a .inner-wrapper .name {
	font-weight: bold;
}

/* Categories List - In Parent Categories Page - End */

/* Posts List - Inside Category End Page */

.posts-list ul.container {
	width: 1055px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-gap: 40px;
}

.posts-list ul.container li {
	position: relative;
	display: block;
}

.posts-list ul.container li .course-label {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 10;
	border-radius: 4px;
	padding: 5px;
	font-size: var(--font15px);
	color: white;
}

.posts-list ul.container li .course-completed {
	background-color: var(--green);
}

.posts-list ul.container li .course-label + .course-completed {
	top: 45px;
}

.posts-list ul li a .cat-img,
.posts-list ul li a .cat-img img{
	height: 255px;
	width: 100%;
	object-fit: cover;
}

.posts-list ul li a .image-wrapper,
.posts-list ul li a .image-wrapper .overlay-wrapper,
.posts-list ul li a .image-wrapper .static-content {
	display: grid;
}

.posts-list ul li a .image-wrapper > *,
.posts-list ul li a .image-wrapper .overlay-wrapper > *,
.posts-list ul li a .image-wrapper .static-content > * {
	grid-area: 1/1/2/2;
}

.posts-list ul li a .static-content .overlay {
	height: 100%;
	background-color: #000;
	opacity: 0.3;
}

.posts-list ul li a .image-wrapper .static-content .play-button {
	position: relative;
	z-index: 1;
	height: 55px;
	width: 55px;
	align-self: center;
	justify-self: center;
	transition: all .3s ease-in-out;
}

.posts-list ul li a:hover .image-wrapper .static-content .play-button {
	opacity: 0;
}

.posts-list ul li a .image-wrapper .static-content .title-wrapper {
	position: relative;
	z-index: 1;
	justify-self: flex-start;
	color: #fff;
	align-self: flex-end;
	margin: 0 18px 15px 0;
	border-right: 10px solid #c0ea6a;
	border-right: 10px solid var(--green, #c0ea6a);
}

.posts-list ul li a .image-wrapper .static-content .title-wrapper .title {
	font-size: 1.25em;
}

.posts-list ul li a .image-wrapper .static-content .title-wrapper .subtitle {
	font-size: 1.063em;
}

.posts-list ul li a .image-wrapper .static-content .title-wrapper .title,
.posts-list ul li a .image-wrapper .static-content .title-wrapper .subtitle,
.posts-list ul li a .image-wrapper .static-content .title-wrapper .number-of-lessons
{
	padding-right: 14px;
}

.posts-list ul li a .image-wrapper .hover-content {
	position: relative;
	z-index: 1;
	opacity: 0;
	display: grid;
	transition: all .3s ease-in-out;
}

.posts-list ul li a:hover .image-wrapper .hover-content {
	opacity: 1;
}

.posts-list ul li a .image-wrapper .hover-content .centered-hover {
	grid-area: 1/1/2/2;
	align-self: center;
	justify-self: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.posts-list ul li a .image-wrapper .hover-content .title {
	font-size: 1.250em;
	text-align: center;
	color: var(--green);
	font-weight: bold;
	padding-bottom: 50px;
}

.posts-list ul li a .image-wrapper .hover-content .icons {
	display: flex;
	align-items: center;
	color: white;
}

.posts-list ul li a .image-wrapper .hover-content .icons img {
	border-radius: 100%;
	margin-left: 5px;
}

button.favorites-button {
	border: none;
	background: #ededed;
	border-radius: 100%;
	width: 30px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 5px auto 0;
	position: absolute;
	top: 8px;
	right: 8px;
}

button.favorites-button.button-disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

button.favorites-button .icon-bookmark {
	color: red;
}

button.favorites-button:hover {
	cursor: pointer;
}

.login-container a {
	font-weight: bold;
}

.posts-list .pagination {
	text-align: center;
	padding-top: 115px;
}

.posts-list .pagination .page-numbers {
	padding: 2px 6px;
	background-color: #acacac;
	color: #fff;
	color: var(--white, #fff);
	border-radius: 3px;
}

.posts-list .pagination .page-numbers.current {
	background-color: var(--green, #c0ea6a);
	background-color: #c0ea6a;
}

.posts-list .pagination .page-numbers.next,
.posts-list .pagination .page-numbers.prev {
	background-color: unset;
	color: #000;
	color: var(--black, #000);
	padding: unset;
}

.posts-list .pagination .page-numbers .prev-button {
	height: 10px;
	width: 10px;
	border-right: 2px solid;
	border-bottom: 2px solid;
	display: inline-block;
	transform: rotate(-45deg);
}

.posts-list .pagination .page-numbers .next-button {
	height: 10px;
	width: 10px;
	border-left: 2px solid;
	border-bottom: 2px solid;
	display: inline-block;
	transform: rotate(45deg);
}

/* Posts List - Inside Category End Page - End */

/* aside CSS */
.content-wrapper aside {
	padding: 0 31px 0 97px;
	background-color: #f1f1f1;
	box-shadow: -5px 0 5px -5px rgba(0,0,0,0.25), 5px 0 5px -5px rgba(0,0,0,0.25);
}

aside .container {
	width: 197px;
}

aside .container.have-content {
	border-top: 9px solid #c0ea6a;
	border-top: 9px solid var(--green, #c0ea6a);
	margin-top: 100px;
}

aside .container .categories-list .title {
	padding-top: 19px;
	font-size: 1.250em;
	font-weight: bold;
}

aside .container .categories-list ul li {
	font-size: 1.125em;
}

aside .container .categories-list ul li {
	padding-top: 23px;
}

aside .container .categories-list ul li.active {
	color: #acacac;
	font-weight: bold;
}

aside .container .line {
	border: 1px solid #e0e0e0;
	margin: 30px 0;
}

aside .container .type-list .title,
aside .container .sort-list .title {
	font-size: 1.250em;
	font-weight: bold;
}

aside .container .type-list ul li {
	font-size: 1.125em;
}

aside .container .type-list ul li {
	padding-top: 23px;
}


.after-list-text{
	max-width: 100%;
	width: 100%;
	padding: 0 25px;
	margin: -10px auto 30px;
	font-size: var(--font17px);
	line-height: 1.5;
}

.after-list-text li{
	list-style:auto;
	margin:0 20px 0 0;
}

.after-list-text a{
	text-decoration: underline;
	color: #81d742;
}

/* aside CSS - End */

@media (max-width: 1450px) {
	.content-wrapper {
		width: 100%;
	}

	.posts-list ul.container {
		width: 90%;
	}

	.content-wrapper aside {
		padding: 0 31px;
	}

	.content-wrapper .posts-list {
		width: 100%;
	}
}

@media (max-width: 1200px) {
	.posts-list ul.container {
		grid-gap: 10px;
	}
}

@media (max-width: 1100px) {
	.posts-list ul li a .cat-img,
	.posts-list ul li a .cat-img img{
		height: 195px;
	}
}

@media (max-width: 1023px) {
	.posts-list ul.container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.content-wrapper .posts-list .course-description{
		margin: 0px 0 20px;
	}
}

@media (max-width: 950px) {
	.top-image {
		height: 390px;
	}
}

@media (max-width: 800px) {
	.content-wrapper aside {
		padding: 0 5px;
	}
}

@media (max-width: 700px) {
	.top-image .inner-content .title {
		font-size: 3rem;
	}
}

@media (max-width: 650px) {
	.posts-list ul.container {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
}

@media (max-width: 500px) {
	.content-wrapper {
		flex-direction: column;
	}

	aside .container.have-content,
	.content-wrapper .posts-list {
		margin-top: 10px;
	}

	.content-wrapper aside {
		padding: 10px 0px;
	}

	.content-wrapper aside .container > * {
		padding: 0 15px;
	}

	.content-wrapper aside .container .categories-list ul,
	.content-wrapper aside .container .sort-list .type-list ul {
		display: none;
	}

	.content-wrapper aside .container .categories-list > .title,
	.content-wrapper aside .container .sort-list > .title {
		display: flex;
		justify-content: space-between;
	}

	.content-wrapper aside .container .categories-list > .title:after,
	.content-wrapper aside .container .sort-list > .title:after {
		content: "\f078";
		font-family: 'icomoon';
	}

	.content-wrapper aside .container .categories-list > .title.open:after,
	.content-wrapper aside .container .sort-list > .title.open:after {
		content: "\f077";
	}

	aside .container {
		margin-top: 100px;
		width: 100%;
	}

	.content-wrapper .posts-list:empty,
	aside .container:empty{
		display:none;
	}
}