One Hat Cyber Team

Edit File: post.css

.post-media {
	position: relative;
	display: inline-block;
}

.post-classic .post-meta {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.post-classic .post-img {
	transition: all 0.2s ease-in-out;
}

.post-classic .post-img:hover {
	opacity: .8;
}

.post-classic * + .post-content {
	margin-top: 0.9375rem;
}

.post-classic * + .post-meta {
	margin-top: 0.4375rem;
}

.post-classic * + .post-text {
	margin-top: 0.375rem;
}

* + .post-classic {
	margin-top: 2.5rem;
}

.post-classic-boxed .post-content {
	padding: 1.25rem 0.9375rem;
	background-color: #F1EBEE;
	border: 1px solid #cfcfcf;
}

@media (min-width: 992px) {
	* + .post-classic {
		margin-top: 3.125rem;
	}
}

@media (min-width: 1200px) {
	.post-classic * + .post-content {
		margin-top: 1.875rem;
	}
	.post-classic * + .post-meta {
		margin-top: 0.875rem;
	}
	.post-classic * + .post-text {
		margin-top: 0.75rem;
	}
	.post-classic-boxed .post-content {
		padding: 2.1875rem 2.5rem 2.25rem 2.875rem;
	}
	* + .post-classic {
		margin-top: 4.4375rem;
	}
}

.post-shadow {
	max-width: 370px;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 0 10px 20px rgba(39, 43, 55, 0.15);
}

.post-shadow .post-media {
	width: 100%;
	background-color: #272b37;
}

.post-shadow .post-media > img {
	width: 100%;
	transition: all 0.2s ease-in-out;
}

.post-shadow .post-hover-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 5.25rem;
	height: 5.25rem;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 0.75rem;
	text-transform: uppercase;
	color: #fff;
	background-color: #F2B449;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	transition: all 0.2s ease-in-out;
}

.post-shadow .post-hover-btn::before {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc( 100% + 14px);
	height: calc( 100% + 14px);
	content: '';
	border-radius: inherit;
	border: 1px solid #F2B449;
	transform: translate(-50%, -50%);
}

.post-shadow .post-content {
	padding: 1.25rem 0.9375rem;
}

.post-shadow .post-tag {
	display: inline-block;
	padding: 0.125rem 0.625rem 0rem;
	color: #F2B449;
	background-color: rgba(242, 180, 73, 0.2);
	transition: all 0.2s ease-in-out;
	min-width: 120px;
	text-align: center;
}

.post-shadow .post-tag:hover {
	color: #fff;
	background-color: #F2B449;
}

.post-shadow .post-title {
	padding-bottom: 28px;
}

.post-shadow .post-title::after {
	width: 51px;
	height: 1px;
	background-color: #cfcfcf;
}

.post-shadow .post-date {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.post-shadow * + .post-title {
	margin-top: 0.5rem;
}

.post-shadow * + .post-date {
	margin-top: 0.9375rem;
}

.owl-carousel-shadow .owl-stage-outer {
	margin: 0 -30px;
	padding: 0 30px 30px;
}

.owl-carousel-shadow .owl-item:not(.active) .post-shadow {
	box-shadow: none;
}

.desktop .post-shadow .post-hover-btn {
	opacity: 0;
}

.desktop .post-shadow .post-media:hover > img {
	opacity: .8;
}

.desktop .post-shadow .post-media:hover .post-hover-btn {
	opacity: 1;
}

@media (min-width: 992px) {
	.post-shadow {
		box-shadow: 0px 20px 30px rgba(39, 43, 55, 0.25);
	}
	.post-shadow .post-content {
		padding: 2.1875rem 2.5rem 2.1875rem 1.875rem;
	}
	.post-shadow * + .post-title {
		margin-top: 0.875rem;
	}
	.post-shadow * + .post-date {
		margin-top: 1.25rem;
	}
	.owl-carousel-shadow .owl-stage-outer {
		padding-bottom: 50px;
	}
}

.post-small {
	display: flex;
	margin-left: -16px;
}

.post-small > * {
	margin-left: 16px;
}

.post-small .post-img-link {
	flex-shrink: 0;
	max-width: 20%;
	transition: all 0.2s ease-in-out;
}

.post-small .post-img-link:hover {
	opacity: .8;
}

.post-small .post-body {
	margin-top: -0.25rem;
}

.post-small .post-date {
	color: #F2B449;
}

.post-small * + .post-date {
	margin-top: 0.25rem;
}

* + .post-small {
	margin-top: 1.5625rem;
}

@media (min-width: 992px) {
	.post-small .post-img-link {
		max-width: 50%;
	}
}

.post-line .post-tags {
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #cfcfcf;
}

.post-line .post-media {
	position: relative;
	display: block;
}

.post-line .post-media > img {
	width: 100%;
}

.post-line .post-media::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: '';
	background-image: linear-gradient(180deg, rgba(47, 51, 64, 0) 0%, rgba(47, 51, 64, 0.34) 100%);
	transition: all 0.2s ease-in-out;
}

.post-line .post-hover-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.6875rem;
	color: #fff;
	transform: translate(-50%, -50%);
	transition: all 0.2s ease-in-out;
}

.post-line .post-date {
	color: #8d8d8d;
}

.post-line * + .thumbnail-progress {
	margin-top: 18px;
}

.post-line .thumbnail-progress-ready {
	color: #F2B449;
}

.post-line * + .post-media {
	margin-top: 0.9375rem;
}

.post-line * + .post-content {
	margin-top: 1.125rem;
}

.post-line * + .post-date {
	margin-top: 0.4375rem;
}

* + .post-line {
	margin-top: 2.5rem;
}

.post-line-hover {
	position: relative;
	padding-bottom: 1.5625rem;
	border-bottom: 1px solid #cfcfcf;
}

.post-line-hover::before {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 0;
	content: '';
	background-color: #F2B449;
	transition: all 0.2s ease-in-out;
}

.post-line-hover:hover::before {
	height: 4px;
}

.desktop .post-line .post-media::before {
	opacity: 0;
}

.desktop .post-line .post-hover-btn {
	transform: translate(-50%, -50%) scale(0);
}

.desktop .post-line .post-media:hover .post-hover-btn {
	transform: translate(-50%, -50%) scale(1);
}

.desktop .post-line .post-media:hover::before {
	opacity: 1;
}

@media (min-width: 992px) {
	.post-line .post-media {
		display: block;
	}
	.post-line .post-media > img {
		width: 100%;
	}
	.post-line .post-tags {
		padding-bottom: 0.875rem;
	}
	.post-line * + .post-media {
		margin-top: 1.875rem;
	}
	.post-line * + .post-content {
		margin-top: 1.375rem;
	}
	.post-line * + .post-date {
		margin-top: 0.8125rem;
	}
	.post-line-hover {
		position: relative;
		padding-bottom: 3.1875rem;
	}
}

.post-minimal .post-meta {
	font-size: 0.6975rem;
	font-weight: 700;
	text-transform: uppercase;
}

.post-minimal * + .post-meta {
	margin-top: 0.4375rem;
}

.post-minimal + .post-minimal {
	margin-top: 0.9375rem;
}

@media (min-width: 992px) {
	.post-minimal + .post-minimal {
		margin-top: 1.5rem;
	}
}