body > nav.sticky-header,
.pre-main-content.guide-page,
main.guide-page {
	box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.5);
}

.pre-main-content.guide-page {
	margin: 0 auto;
	padding: 0;
}

@media (min-width: 737px) {
	body,
	.pre-main-content.guide-page,
	main.guide-page {
		min-width: auto !important;
	}
}

@media (max-width: 480px) {
	.guide-page .feat-media {
		display: none;
	}
}

.guide-page .feat-media .holder {
	background-size: cover;
	background-position: center;
	max-width: 1920px;
	height: 37em;
	position: relative;
}

.guide-page .feat-media .holder.default {
	height: 12em;
}

.guide-page .feat-media .holder p.overlay-text {
	position: absolute;
	font-size: 4.4em;
	margin: 0;
	line-height: 1;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 0.2rem;
	top: calc(50% - 1em / 2);
	left: 3rem;
	color: rgb(255 255 255 / 15%);
	user-select: none;
}

.guide-page .feat-media .holder .controls {
	margin: 2.5em;
	position: absolute;
}

.guide-page .feat-media .holder .controls a,
.guide-page .feat-media .holder .controls button {
	margin-right: 0.5em;
}

main.guide-page {
	display: grid;
	align-content: start;
	margin: 0 auto;
	padding-top: 0;
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}

@media (max-width: 480px) {
	main.guide-page {
		grid-template-columns: auto;
		grid-template-areas:
			"header"
			"download"
			"description"
			"info"
			"feedback";
	}
}

@media (min-width: 481px) {
	main.guide-page {
		grid-template-columns: auto;
		grid-template-areas:
			"download"
			"header"
			"description"
			"info"
			"feedback";
	}
}

@media (min-width: 651px) and (max-width: 736px) {
	main.guide-page:not(.long-title) {
		grid-template-columns: 1fr 6em 40%;
		grid-template-areas:
			"header download download"
			"description description info"
			"related related info"
			"feedback feedback info";
		grid-column-gap: 2em;
	}
}

@media (min-width: 737px) {
	main.guide-page {
		grid-template-columns: 1fr 25em;
		grid-template-areas:
			"header download"
			"description info"
			"feedback info";
		grid-column-gap: 3em;
	}
}

.guide-page > header {
	grid-area: header;
}

.guide-page > .download {
	grid-area: download;
}

.guide-page > .desc-block {
	grid-area: description;
}

.guide-page > .info {
	grid-area: info;
}

@media (min-width: 651px) and (max-width: 736px) {
	.guide-page:not(.long-title) > .info {
		grid-row-end: span info;
	}
}

@media (min-width: 737px) {
	.guide-page > .info {
		grid-row-end: span info;
	}
}

@media (max-width: 650px) {
	.guide-page .extended-sidebar {
		display: none;
	}
}

@media (min-width: 651px) and (max-width: 736px) {
	main.guide-page.long-title .extended-sidebar {
		display: none;
	}
}

.guide-page > .feedback {
	grid-area: feedback;
}

.guide-page > header {
	min-width: 0;
	margin-top: 1.5em;
}

@media (min-width: 481px) {
	.guide-page > header {
		margin: 1em 0 0;
	}
}

@media (min-width: 651px) {
	.guide-page:not(.long-title) > header {
		margin: 1.3em 0 0;
	}
}
@media (min-width: 737px) {
	.guide-page > header {
		margin: 1.3em 0 0;
	}
}

.guide-page > .download {
	position: relative;
}

@media (min-width: 481px) and (max-width: 736px) {
	.guide-page.long-title > .download {
		width: 25em;
		margin: 1.5em 0 0;
	}
	@media (max-width: 650px) {
		.guide-page > .download {
			width: 25em;
			margin: 1.5em 0 0;
		}
	}
}

.guide-page > .desc-block {
	margin-top: 2em;
}

.guide-page section.guide-holder > header {
	margin: 0 0 0.5em;
	line-height: normal;
}

.guide-page section.guide-holder > header h3,
.guide-page section.guide-holder > header time {
	font-size: 14px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.4);
}

.guide-page section.guide-holder > header h3 {
	margin: 0;
}

.guide-page section.tags {
	margin-bottom: 2em;
}

.guide-page section.tags > ul {
	display: flex;
	flex-wrap: wrap;
	row-gap: 1em;
	column-gap: 1em;
	margin-top: 1em;
}

.guide-page section.tags li {
	margin: 0.1em 0.1em;
}

.guide-page > .info {
	display: flex;
	flex-direction: column;
}

.guide-page section.developers {
	margin-bottom: 1em;
	min-width: 0;
	color: #eee;
}

.guide-page section.developers ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.15);
	background-color: rgba(255, 255, 255, 0.03);
}

.guide-page section.developers li {
	padding: 0.8em 1em;
}

.guide-page section.developers li:hover {
	background-color: rgb(0 0 0 / 20%);
}

.guide-page .extended-sidebar {
	display: flex;
	flex-direction: column;
	align-items: center;
}

@media (max-width: 650px) {
	.guide-page .extended-sidebar {
		display: none;
	}
}
@media (min-width: 651px) and (max-width: 736px) {
	.guide-page.long-title .extended-sidebar {
		display: none;
	}
}

.guide-page .extended-sidebar > * {
	flex: none;
	max-width: 100%;
}

.guide-sb-item-list {
	width: 100%;
}

.guide-sb-item-list > ul {
	list-style: none;
	margin: 1em 0 0;
	padding: 0;
}

.guide-sb-item-list > ul > li:not(:first-of-type) {
	margin-top: 1.5em;
}

@media (max-width: 480px) {
	.guide-page > .feedback {
		margin-left: -10px;
		margin-right: -10px;
	}
}

.guide-page section.item-comments {
	padding-top: 1em;
}

.guide-page section.item-comments section.add-comment:first-child {
	margin-top: 0;
}

.guide-page .download-card {
	margin: 1em 0;
	padding: 0.8em 1.3em;
	background-color: #fcfcfc;
	color: black;
	box-shadow: 0 0 5px 0 rgba(0,0,0,0.3);
}

@media (min-width: 481px) {
	.guide-page .download-card {
		margin: 0;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}
}

.guide-page .download-card p.dl-status {
	margin: 0 0 0.5em;
	text-align: center;
	font-size: 1.1em;
}

.guide-page .download-card button.download,
.guide-page .download-card button.menu {
	font-size: 1.3em;
	font-weight: 600;
	text-shadow: none;
	margin: 0.2em 0;
	border-radius: 0.5em;
}

.guide-page .download-card button.download {
	width: 100%;
	padding-left: 0.6em;
	padding-right: 0.6em;
}

.guide-page .download-card button.menu {
	padding: 0 0.6em;
	margin-left: 0.5em;
	color: black;
}

.guide-page .download-card button.download i {
	font-size: 1em;
	vertical-align: middle;
	margin-right: 0.2em;
}

.guide-page .download-card button.menu i {
	font-size: 1.3em;
	vertical-align: middle;
	line-height: 1;
}

.guide-page .download-card ul.row-menu {
	top: calc(50% + 2em);
	right: 0;
}

.guide-page .download-card ul.row-menu:not(.active) {
	display: none;
}

.guide-page .download-card .actions button {
	align-self: center;
	font-size: 14px;
	margin: 0.5em 0 0em;
}

.guide-page .download-card .actions button:not(:first-child) {
	margin-left: 1em;
}

@media (min-width: 340px) {
	.guide-page .download-card .actions button:not(:first-child) {
		margin-left: 1.5em;
	}
}

.guide-page .download-card .actions button:disabled {
	color: rgba(0, 0, 0, 0.5);
}

.guide-page .download-card .actions button i {
	font-size: 1.15em;
	vertical-align: middle;
	margin-right: 0.2em;
}

.guide-page .download-card button.upvote.selected i,
.guide-page .download-card button.upvote:not(:disabled):hover i {
	color: #c00;
}

.guide-page .download-card button.upvote.selected span.off,
.guide-page .download-card button.upvote:not(.selected) span.on {
	display: none;
}

.guide-page .download-card button.watchlist i.on {
	color: #357ae8;
}

.guide-page .download-card button.watchlist.watched i.off,
.guide-page .download-card button.watchlist:hover i.off,
.guide-page .download-card button.watchlist:not(.watched):not(:hover) i.on {
	display: none;
}

.guide-page .download-card button.watchlist.watched span.off,
.guide-page .download-card button.watchlist:not(.watched) span.on {
	display: none;
}

.guide-page .download-card button.award:not(:disabled):hover i {
	color: #ffa417;
}

.guide-page .awardpanel.awarded div.send,
.guide-page .awardpanel:not(.awarded) div.awarded {
	display: none;
}

.guide-page .awardpanel ul {
	margin: 0 0 1em;
	padding: 0;
	list-style-type: none;
}

.guide-page .awardpanel li input {
	display: none;
}

.guide-page .awardpanel li label {
	display: block;
	border: 1px solid #ddd;
	padding: 1em;
	background-color: #fffda6;
	cursor: pointer;
}

.guide-page .awardpanel li input:checked + label {
	background-color: #9ef350;
}

.guide-page .awardpanel li input:disabled + label {
	background-color: #ccc;
	color: #888;
	cursor: not-allowed;
}

.guide-page .awardpanel button {
	width: 100%;
}

.guide-page .awardpanel p.note {
	margin: 0;
	font-size: 0.85em;
	color: #999;
	text-align: center;
}

.guide-page .awardpanel div.awarded i {
	color: #b2e000;
	font-size: 7em;
}

.guide-page .awardpanel div.awarded p {
	margin: 0.2em 1em;
}

.guide-page .awardpanel div.awarded button {
	color: #08f;
	text-decoration: underline;
}