:root{
	--nav-height: 60px;
	--nav-logo-height: 120px;
	--content-max-width: 1366px;/*1024px;*/
	--card-gap: 2em;
	--card-per-row: 3;
	--card-width: (var(--content-max-width) - var(--card-gap) * (var(--card-per-row) - 1)) / var(--card-per-row);
	--card-emphasis-per-row: 4;
	--card-emphasis-width: (100% - var(--card-gap) * (var(--card-emphasis-per-row) - 1)) / var(--card-emphasis-per-row);
	
	--bar-font-color: #bfbfbf;
	--rog-red: #e30017;
	
	--tile-rog-dark: url('rog-tile-space-small-white.png');
	--tile-rog-light: url('rog-tile-space-small-black.png');
	--tile-rog: var(--tile-rog-light);

	--background-color: #ffffff;
	--font-color: #202020;
	--title-font-color: #000000;
	--background-color-decimal: 255,255,255;
	--section-fade-low: 0.9;
	--section-fade-high: 0.99;
	
	--dark-mode-background-color: #202020;
	--dark-mode-font-color: #bfbfbf;
	--dark-mode-title-font-color: #ffffff;
	--dark-section-fade-low: 0.95;
	--dark-section-fade-high: 0.995;

	--dark-mode-background-color-decimal: 32,32,32;

}
@font-face {
	font-family: 'ROGFonts-Regular';
	src: url('/rog/ROGFonts-Regular.otf') format('opentype');
}
@font-face {
	font-family: 'RobotoCondensed-Regular';
	src: url('/rog/RobotoCondensed-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'TradeGothicLTPro-Bold';
	src: url('../TradeGothicLTPro-Bold.ttf') format('truetype');
}
html {
	height: 100%;
	font-family: RobotoCondensed-Regular;
}
body {
	font-size: 14px;
	margin: 0;
	background-color: var(--dark-mode-background-color);
	color: var(--dark-mode-font-color);
}
h1,h2,h3,h4,h5,h6{margin:0;}
button {
	cursor: pointer;
	background: transparent;
    color: inherit;
    border: 1px solid var(--font-color);
    padding: 0.25em 0.5em;
    border-radius: 1em;
    font-weight: bold;
    box-shadow: 0 0 1px 1px rgba(128,128,128,1);
}
button:hover{color:var(--rog-red);}
a {
	display: inline-block;
	color: inherit;
	text-decoration: none;
	transition: all .2s ease;
}
a:hover {
	color: var(--rog-red) !important;
}
a:hover svg{transition:all .2s ease;fill:var(--rog-red);}
.small{font-size:12px;}
.svg-text {
	width: 1.5em;
	height: 1.5em;
	display: inline-block;
	fill: var(--bar-font-color);
	vertical-align: middle;
	transition: all .2s ease;
}
.svg-text + *{vertical-align:middle;}
.extIcon {
	display: inline-block;
	vertical-align: middle;
	line-height: 1em;
	/*font-size: 16px;*/
	width: 1em;
	height: 1em;
	color: var(--font-color);
	border: 1px solid var(--font-color);
	border-radius: 1em 0 1em 1em;
	margin: 0 4px;
	display: none;
}
.label-image-ExtLink {
	color: #ffffff;
	position: absolute;
	top: 0;
	right: 0;
	width: 2em;
	height: 2em;
	text-align: center;
	line-height: 2em;
	z-index: 2;
}
.label-image-ExtLink::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	border-top: 1.5em solid var(--rog-red);
	border-right: 1.5em solid var(--rog-red);
	border-bottom: 1.5em solid transparent;
	border-left: 1.5em solid transparent;
	z-index: -1;
}

[data-overlay]{cursor:pointer;}
.player-wrapper {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000000;
	z-index: 99999;
}
.player-wrapper.show {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
}
.player {
	flex-grow: 2;
}
.player-close {
	font-size: 3em;
	display: inline-block;
	padding: 1% 0.5em;
	text-align: right;
	cursor: pointer;
}

.rog-header {
	position: fixed;
	z-index: 999;
	top: 0;
	width: 100%;
	background-color: #000000;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	flex-direction: row;
}
.rog-header nav {
	width: var(--content-max-width);
	max-width: var(--content-max-width);
	height: var(--nav-height);
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	line-height: 1em;
}
.rog-header a{display:block;}
.rog-header .rog-nav-menu-toggle {
	display: none;
	position: absolute;
	top: 50%;
	left: calc(var(--nav-toggle-spacing) / 2);
	transform: translate(0, -50%);
	color: #ffffff;
	line-height: calc(var(--nav-height) - var(--nav-toggle-spacing) - 4px);
	font-size: 24px;
    width: calc(var(--nav-height) - var(--nav-toggle-spacing));
	height: calc(var(--nav-height) - var(--nav-toggle-spacing));
    text-align: center;
	cursor: pointer;
}
.rog-header .rog-nav-menu-toggle .toggle-icon {
	content: "";
	display: inline-block;
	position: relative;
    width: 20px;
    height: 2px;
    background: #ffffff;
    transform: translate(0, calc(50% - 7px));
}
.rog-header .rog-nav-menu-toggle .toggle-icon::before {
	content: "";
	display: inline-block;
	position: absolute;
	left: 0;
    width: 20px;
    height: 2px;
    background: #ffffff;
    transform: translate(0, -7px);
}
.rog-header .rog-nav-menu-toggle .toggle-icon::after {
	content: "";
	display: inline-block;
	position: absolute;
	left: 0;
    width: 20px;
    height: 2px;
    background: #ffffff;
    transform: translate(0, 7px);
}
/*.rog-header .logo {
	content: "";*/
	/*transform: translate(0, 25%);*/
	/*width: var(--nav-logo-height);*/
	/*height: var(--nav-logo-height);*/
	/*min-width: var(--nav-logo-height);*/
	/*min-height: var(--nav-logo-height);*/
	/*height: var(--nav-height);
	width: 200px;
	background: url('ROG_TT_logo.png') no-repeat;
	background-origin: content-box;
	background-attachment: local;
	background-position: center;
	background-size: cover;
}*/
.rog-header .logo {
	max-height: 100%;
}
.rog-header .logo img {
	width: 200px;
}
.rog-header .rog-nav-menu {
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}
.rog-header .rog-nav-menu .rog-menu-close {
	display: none;
	height: var(--nav-height);
}
.rog-header .rog-nav-menu .rog-menu-close #rogNavMenuClose {
	display: inline-block;
	font-size: 18px;
	padding: 0.5em;
	cursor: pointer;
}
.rog-header .rog-nav-menu .rog-menu-item {
	line-height: var(--nav-height);
	margin: 0 5px;
	color: #ffffff;
	cursor: pointer;
	transition: color .2s;
}
.rog-header .rog-nav-menu .rog-menu-item:hover {
	color: var(--rog-red);
}
.rog-header .rog-nav-menu .rog-menu-item.rog-dropdown {
	position: relative;
}
.rog-header .rog-nav-menu .rog-menu-item.rog-dropdown .rog-dropdown-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: -2em;
	padding: 4em;
	background: #f5f5f5;
	color: #000000;
	box-shadow: 0 2px 6px 0px rgba(0,0,0,0.25);
	cursor: default;
}
.rog-header .rog-nav-menu .rog-menu-item.rog-dropdown:hover .rog-dropdown-menu {
	display: flex;
	flex-direction: row;
    flex-wrap: nowrap;
	align-items: flex-start;
}
.rog-header .rog-nav-menu .rog-menu-item.rog-dropdown .rog-dropdown-menu .rog-col {
	min-width: 200px;
	display:flex;
	flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
	gap: 1em;
}
.rog-header .rog-nav-menu .rog-menu-item.rog-dropdown .rog-dropdown-menu a {
	line-height: 1.2em;
	color: #000000;
}



.rog-page {
	margin-top: var(--nav-height);
}

.rog-page .rog-gallery{}
.rog-page .rog-gallery img{display:block;max-width:100%;width:100%;}

.rog-section.dark {
	--background-color: var(--dark-mode-background-color);
	--font-color: var(--dark-mode-font-color);
	--title-font-color: var(--dark-mode-title-font-color);
	--tile-rog: var(--tile-rog-dark);
	--background-color-decimal: var(--dark-mode-background-color-decimal);
	--section-fade-low: var(--dark-section-fade-low);
	--section-fade-high: var(--dark-section-fade-high);
}
.rog-section {
	background-image:
		linear-gradient(
			90deg,
			rgba(var(--background-color-decimal),var(--section-fade-low)) 0%,
			rgba(var(--background-color-decimal),var(--section-fade-high)) 15%,
			rgba(var(--background-color-decimal),var(--section-fade-high)) 85%,
			rgba(var(--background-color-decimal),var(--section-fade-low)) 100%
		),
		var(--tile-rog);
	background-color: var(--background-color);
	color: var(--font-color);
}

.rog-section .rog-section-content {
	max-width: var(--content-max-width);
	margin: 0 auto;
	padding: 5em;
	display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
	gap: 3em;
}
.rog-section .rog-section-content header {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
    justify-content: flex-start;
	gap: 1em;
}
.rog-section .rog-section-content header h1{
	font-family: ROGFonts-Regular;
	font-size: 2em;
	color: var(--title-font-color);
	margin-top: -0.25em;
}

.rog-section .rog-section-content .rog-section-filters {
	/*border: 1px solid #666;*/
	border-radius: 1em;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: center;
	justify-content: flex-start;
	align-items: center;
	gap: 1em;
	padding: 0.5em 1em;
	flex-grow: 2;
}
.rog-section .rog-section-content .rog-section-filters .filter.disabled{display:none;}
.rog-section .rog-section-content .rog-section-filters .filter label {
	padding: 0.5em 0.75em;
    background-color: rgba(0,0,0,0.25);
	/*border-radius: 1em;*/
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: flex-start;
	align-items: center;
	gap: 0.5em;
	cursor: pointer;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.rog-section .rog-section-content .rog-section-filters .filter input[type=checkbox] {
	display: none;
}
.rog-section .rog-section-content .rog-section-filters .filter .checkbox-alt {
	display: inline-block;
	width: 1.2em;
	height: 1.2em;
	line-height: 1.2em;
	text-align: center;
	border: 1px solid #666;
	background-color: rgba(0,0,0,0.25);
	color: transparent;
}
.rog-section .rog-section-content .rog-section-filters .filter input[type=checkbox]:checked + .checkbox-alt {
	background-color: var(--rog-red);
}


.rog-page .collection {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	gap: 2em;
}
.rog-page .collection .card {
	width: calc(var(--card-width));
	/* padding: 2em; */
	/* border: 1px solid #ccc; */
}
.rog-page .collection .card.filtered {
	display: none;
}
.rog-page .collection .card .card-content {
	display: flex;
	height: 100%;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-between;
	gap: 1em;
}
.rog-page .collection .card .card-content article {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 1em;
	color: var(--font-color);
}
.rog-page .collection .card .card-content article .card-thumbnail {
	background: #000000;
	position: relative;
	text-align: center;
	overflow: hidden;
	width: 100%;
	height: calc(var(--card-width) / 16 * 9);
	display: flex;
	flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
	border-radius: 1em;
}
.rog-page .collection .card .card-content article a.card-thumbnail:hover img,
.rog-page .collection .card .card-content article i.card-thumbnail:hover img
{transition:all .2s ease;transform:scale(1.125);}
.rog-page .collection .card .card-content article .card-thumbnail .thumbnail-overlay {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.75);
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-end;
    align-items: flex-start;
	font-size: 18px;
	text-align: left;
	color: #ffffff;
	z-index: 1;
}
.rog-page .collection .card .card-content article .card-thumbnail:hover .thumbnail-overlay {display:flex;}
.rog-page .collection .card .card-content article .card-thumbnail .thumbnail-overlay .description {padding:14px;}

.rog-page .collection .card .card-content article .title {
	display: inline-block;
	vertical-align: middle;
	/*font-size: 1.5em;*/
	line-height: 1em;
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
	color: var(--title-font-color);
}
.rog-page .collection .card .card-content article .title span {
	display: inline-block;
	line-height: 1em;
	vertical-align: middle;
}
.rog-page .collection .card .card-content article .title.rog-striped{font-size:16px !important;}
.rog-page .collection .card .card-content article .title.rog-striped::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	border-top: 0;
	border-left: 10px solid var(--rog-red);
	border-bottom: 14px solid var(--rog-red);
	border-right: 10px solid transparent;
	/*margin-right: 3px;*/
}
.rog-page .collection .card .card-content article .title.rog-striped::after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	border-bottom: 0;
	border-left: 10px solid transparent;
	border-top: 14px solid var(--rog-red);
	border-right: 10px solid var(--rog-red);
	/*margin-left: 3px;*/
}
.rog-page .collection .card .card-content article .title.rog-striped span {
	text-transform: uppercase;
	color: var(--rog-red);
	margin-top: 1px;
}
.rog-page .collection .card .card-content footer {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
    align-items: flex-start;
	gap: 0.5em;
}

.rog-page #EmphasisArea {
	padding: 5em;
}
.rog-page .collection.emphasisList {
	border-bottom: 1px solid var(--font-color);
	max-width: var(--content-max-width);
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 3em;
}
.rog-page .collection.emphasisList .card.emphasis {
	width: calc(var(--card-emphasis-width) - 3em / 4);
}
.rog-page .collection.emphasisList .card.emphasis .card-content {
	height: unset;
	min-height: calc((var(--card-emphasis-width) - 3em / 4) / 9 * 16);
}
.rog-page .collection.emphasisList .card.emphasis .card-content .title {color:var(--dark-mode-title-font-color);}
.rog-page .collection.emphasisList .card.emphasis article .card-thumbnail {
	height: calc((var(--card-emphasis-width) - 3em / 4) / 9 * 16);
}

@media (max-width: 816px) {
	.rog-section .rog-section-content{padding:3em;}
	.rog-section .rog-section-content header {
		flex-direction: column;
		gap: 2em;
	}
	.rog-page .collection:not(.emphasisList) .card{width:unset;font-size:1.5em;}
	.rog-page .collection:not(.emphasisList) .card .card-content article .title {font-size:1.5em;}
	.rog-page .collection:not(.emphasisList) .card .card-content article .title.rog-stripe {font-size:0.75em !important;}
	.rog-page .collection:not(.emphasisList) .card .card-content article .title.rog-striped::after{display:none;}
	.rog-page .collection:not(.emphasisList) {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
	}
	.rog-page .collection:not(.emphasisList) .card .card-content article .card-thumbnail{flex-direction:column;height:unset;max-height:calc(var(--card-width) / 4 * 3 * 2);}
	.rog-page .collection.emphasisList{flex-wrap:wrap;}
	.rog-page .collection.emphasisList .card.emphasis{width:calc(50% - 1.5em);}
	.rog-page .collection.emphasisList .card.emphasis .card-content article .card-thumbnail{height:calc((50% - 1em) / 9 * 16);}
}



.rog-footer {
	font-size: 16px;
	background-color: #161616;
	color: var(--bar-font-color);
	padding: 3em 4em;
	display: flex;
	justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
}
.rog-footer > footer {
	width: var(--content-max-width);
}
.rog-footer .rog-footer-content {
	display: flex;
	flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
	padding: 2em 0;
}
.rog-footer .rog-footer-content:not(:last-child){border-bottom:1px solid #333;}
.rog-footer .rog-footer-content .rog-footer-col {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 1.5em;
}
.rog-footer .rog-footer-content .rog-footer-col > *{display:inline-block;line-height:1em;}

.asus-link{margin-right:1.5em;}
.asus-link:hover svg path{transition:all .2s ease;fill:var(--bar-font-color);}
.asus-link{margin-top:3px;}

@media (max-width: 1023px) {	
	.rog-footer .rog-footer-content{flex-direction:column;gap:2em;}
	.rog-footer .rog-footer-content .rog-footer-col:not(.fixed-flex){flex-direction:column;text-align:center;}
}