.pattern-background::after {
	content: '';
	display: block;
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: -30;
	background-image: url(../image/pattern.svg);
	background-position: center center;
	-webkit-mask-image: radial-gradient(ellipse at center, hsla(var(--black),0) 0%,hsla(var(--black),0.4) 100%);
	pointer-events: none;
}

/* **************************************************
HEADER
************************************************** */
.page-header {
	display: flex;
	flex-flow: row-reverse wrap;
	justify-content: flex-start;
	position: relative;
	width: 100%;
	box-sizing: border-box;
	height: 4rem;
	background: hsla(var(--main-header),var(--bg-opacity));
	box-shadow: 0px 0px 6px 0px hsla(var(--black),0.2);
	z-index: 30;
	transition: box-shadow 0.3s, background 0.3s;
}
.header-logo {
	position: absolute;
	top: 0px;
	left: 0.5rem;
	box-sizing: border-box;
	width: 4rem;
	height: 4rem;
	padding: 0.5rem;
	margin-left: 1rem;
}
.header-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.header-user-info {
	position: absolute;
	top: 0px;
	left: 4.5rem;
	box-sizing: border-box;
	width: 14rem;
	height: 4rem;
	padding: 0.5rem;
	float: left;
	transition: width 0.3s;
}
.header-user-name {
	display: block;
	overflow: hidden;
	font-weight: bold;
	font-size: 1.4rem;
	line-height: 2.6rem;
	color: hsla(var(--main),var(--text-opacity));
	white-space: nowrap;
	-webkit-mask-image: linear-gradient(to right, hsla(var(--black),1) 0%,hsla(var(--black),1) 80%,hsla(var(--black),0) 100%);
}
.header-user-name:hover {
	color: hsla(var(--main),var(--text-opacity-full));
}
.header-user-metric {
	position: absolute;
	bottom: 0.5rem;
	width: 10rem;
	height: 0.5rem;
	background: hsla(var(--alt-front),var(--bg-opacity-min));
	opacity: 1;
	transition: opacity 0.3s;
}
.header-user-metric span {
	display: block;
	width: 80%;
	height: 100%;
	background: hsla(var(--main-highlight),var(--bg-opacity-quarter));
}
.header-user-metric::before {
	content: ' ';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	box-sizing: border-box;
	border: 1px solid transparent;
	border-color: var(--border-color-min);
	pointer-events: none;
	z-index: 20;
}
.header-nav {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-end;
}
.header-nav li {
	display: none;
}
.header-nav li:nth-child(-n+3) {
	display: inline-block;
}
.header-nav li a {
	height: 1.2rem;
	line-height: 1.2rem;
    padding: 1.4rem 0.5rem;
}
.header-buttons {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-end;
	margin: 0px 0.5rem;
	margin-right: 1.5rem;
}
.header-button {
	position: relative;
	display: block;
	width: 2rem;
	height: 2rem;
	margin: 1rem 0px;
	margin-right: 0.5rem;
	font-size: 1rem;
	cursor: pointer;
	color: hsla(var(--main),var(--text-opacity-full));
	opacity: 0.6;
	transition: opacity 0.3s, color 0.3s;
	overflow: hidden;
}
.header-button:hover {
	opacity: 1;
}
.header-button.counter::after {
	content: attr(data-count);
	display: block;
	position: absolute;
	background: hsla(var(--main-highlight),var(--bg-opacity-full));
	font-size: 0.6rem;
	line-height: 0.6rem;
	font-weight: bold;
	color: hsla(var(--alt),var(--text-opacity-full));
	padding: 0.2rem;
	border-radius: 0.5rem;
	min-width: 1rem;
	box-sizing: border-box;
	text-align: center;
	bottom: 0;
	right: 0;
	transform: scale(0.8);
	transition: transform 0.3s, opacity 0.3s;
	pointer-events: none;
}
.header-button.counter:hover::after {
	transform: scale(1);
	opacity: 0.6;
}
.header-button span {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 2rem;
	text-align: center;
}
.header-button span::before {
	font-family: 'Font Awesome';
}
.header-button-search span::before {
	content: '\f002';
}
.header-button-notification span::before {
	content: '\f0f3';
}
.header-button-settings span::before {
	content: '\f013';
}
.header-button-logout span::before {
	content: '\f2f5';
}
.header-button-cart span::before {
	content: '\f07a';
}
.header-button-menu {
	max-width: 0px;
	margin-right: 0px;
	pointer-events: none;
	transition: margin-right 0.3s, max-width 0.3s;
}
.header-button-menu span {
	width: 2rem;
	height: 2rem;
}
.header-button-menu span::before {
	
}
.burger span {
	display: block;
	position: relative;
	width: 1.6rem;
	height: 0.2rem;
	margin: 0px 0.2rem;
	margin-top: 0.9rem;
	background: hsla(var(--main),var(--bg-opacity-full));
	backface-visibility: hidden;
	opacity: 1;
	transition: background 0.3s, opacity 0.3s;
}
.burger span::before, 
.burger span::after {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 0.2rem;
	background: hsla(var(--main),var(--bg-opacity-full));
	transform-origin: left;
	transition: top 0.3s, transform 0.3s, margin-top 0.3s, margin-left 0.3s;
}
.burger span::before {
	top: -0.5rem;
} 
.burger span::after {
	top: 0.5rem;
}
.switch-guide-menu:checked ~ .header-buttons .burger span {
	background: transparent;
}
.switch-guide-menu:checked ~ .header-buttons .burger span::before {
	top: -0.6rem;
	transform: rotate(45deg);
	margin-left: 0.2rem;
	margin-top: 0.02rem;
}
.switch-guide-menu:checked ~ .header-buttons .burger span::after {
	top: 0.55rem;
	transform: rotate(-45deg);
	margin-top: 0.02rem;
	margin-left: 0.2rem;
}
/*.header-menu {
	position: fixed;
	width: 12rem;
	height: calc(100vh - 4rem);
	top: 4rem;
	right: 0px;
	z-index: 40;
	background: hsla(var(--alt-front),var(--bg-opacity-half));
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	box-shadow: 0px 0px 6px 0px hsla(var(--black),0.2);
}
.header-menu .header-nav {
	display: block;
}
.header-menu .header-nav li a {
	display: block;
	padding: 0.5rem 1rem;
}
.header-menu .header-nav li a::after {
	opacity: 0;
}*/
.header-guide {
	position: absolute;
	box-sizing: border-box;
	width: 16rem;
	top: 4rem;
	right: 0px;
	background: hsla(var(--alt-front),var(--bg-opacity-half));
	z-index: 30;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	box-shadow: 0px 0px 6px 0px hsla(var(--black),0.2);
}
.header-settings {
	
}
.header-notification, 
.header-settings {
	max-height: 0px;
	overflow-y: scroll;
	transition: max-height 0.6s;
}
.switch-guide-notification:checked ~ .header-buttons .header-button-notification, 
.switch-guide-search:checked ~ .header-buttons .header-button-search, 
.switch-guide-settings:checked ~ .header-buttons .header-button-settings {
	color: hsla(var(--main-highlight),var(--text-opacity-full));
}
.switch-guide-notification:checked ~ .header-notification, 
.switch-guide-settings:checked ~ .header-settings {
	max-height: 50vh;
}
.header-notification-list, 
.header-settings-list {
	display: block;
	box-sizing: border-box;
	padding: 0px 0.5rem;
	list-style-type: none;
	font-size: 0.7rem;
}
.header-notification-list li, 
.header-settings-list li {
	position: relative;
	display: block;
	box-sizing: border-box;
	padding: 0.5rem 0px;
	border-bottom: 1px solid transparent;
	border-color: var(--border-color-min);
	min-height: 1rem;
	user-select: none;
	background: linear-gradient(to left, hsla(var(--black),0) 0%, hsla(var(--black),0) 50%, hsla(var(--black),0) 100%);
	transition: background 0.3s;
}
.header-notification-list li::after, 
.header-settings-list li::after {
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: linear-gradient(to left, hsla(var(--black),0) 0%, hsla(var(--black),0.4) 50%, hsla(var(--black),0) 100%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
	z-index: 20;
}
.header-notification-list li:hover::after, 
.header-settings-list li:hover::after {
	opacity: 1;
}
.header-notification-list li a, 
.header-notification-list li span, 
.header-settings-list li a, 
.header-settings-list li span {
	position: relative;
	color: hsla(var(--main),var(--text-opacity));
	z-index: 30;
}
.header-notification-list li a:hover, 
.header-settings-list li a:hover {
	color: hsla(var(--main-highlight),var(--text-opacity-full));
}
.header-notification-list li.notification-icon {
	padding-left: 2rem;
}
.header-notification-list li::before {
	font-family: 'Font Awesome';
	display: block;
	text-align: center;
	width: 1.5rem;
	height: 1rem;
	font-size: 1rem;
	line-height: 1rem;
	margin-right: 0.5rem;
	position: absolute;
	left: 0px;
	z-index: 30;
}
.notification-message::before {
	content: '\f0e0';
}
.notification-warning::before {
	content: '\f071';
}
.notification-calendar::before {
	content: '\f073';
}
.notification-trophy::before {
	content: '\f091';
}
.notification-birthday::before {
	content: '\f1fd';
}
.header-search {
	width: 100%;
	background: hsla(var(--main-front),var(--bg-opacity));
	transition: max-height 0.6s;
	max-height: 0px;
	overflow: hidden;
}
.switch-guide-search:checked ~ .header-search {
	max-height: 4rem;
}
.header-search-wrapper {
	padding: 1rem;
	box-sizing: border-box;
}
.header-search-wrapper ::-webkit-input-placeholder {
	color: hsla(var(--alt),var(--text-opacity-half));
}
.header-search-wrapper :-moz-placeholder {
	color: hsla(var(--alt),var(--text-opacity-half));
	opacity: 1;
}
.header-search-wrapper ::-moz-placeholder {
	color: hsla(var(--alt),var(--text-opacity-half));
	opacity: 1;
}
.header-search-wrapper :-ms-input-placeholder {
	color: hsla(var(--alt),var(--text-opacity-half));
}
.header-search-wrapper ::-ms-input-placeholder {
	color: hsla(var(--alt),var(--text-opacity-half));
}
.header-search-wrapper :placeholder-shown {
	color: hsla(var(--alt),var(--text-opacity-half));
}

.header-search-wrapper button[type='submit'], 
.header-search-wrapper input[type='text'] {
	border: none;
	box-shadow: none;
	background: transparent;
	color: hsla(var(--alt),var(--text-opacity-half));
	transition: color 0.3s;
	padding: 0px;
}
.header-search-wrapper input[type='text']:hover, 
.header-search-wrapper input[type='text']:focus {
	color: hsla(var(--alt),var(--text-opacity-full));
}
.header-search-wrapper button[type='submit']:hover, 
.header-search-wrapper button[type='submit']:focus {
	color: hsla(var(--main-highlight),var(--text-opacity-full));
}
.header-search-wrapper input[type='text'] {
	width: calc(100% - 2rem);
	float: left;
	font-size: 1.2rem;
}
.header-search-wrapper button[type='submit'] {
	font-family: 'Font Awesome';
	width: 2rem;
	height: 2rem;
	font-size: 1.6rem;
	float: left;
}
.header-search-wrapper button[type='submit']::before {
	content: '\f061';
}
.page-header-alt {
	height: 3.2rem;
	box-shadow: none;
	background: transparent;
}
.page-header-alt .nav-item a {
	padding: 1rem 0.5rem;
	text-box: cap alphabetic;
	font-size: var(--h4-font-size);
	/*letter-spacing: var(--title-spacing);*/
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
}
.page-header-alt .nav-item a::before {
	border-bottom-width: 0.1rem;
	border-color: hsla(var(--main-highlight),0);
}
.page-header-alt .nav-item.active a::before,
.page-header-alt .nav-item a:hover::before {
	border-bottom-width: 0.1rem;
	border-color: hsla(var(--main-highlight),var(--text-opacity-full));
}
.page-header-alt .header-button {
	margin: 0;
	height: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
}
.page-header-alt .header-button span {
	height: auto;
}
.page-header-alt .header-guide {
	top: 3.2rem;
}
.page-header-alt .header-logo {
	width: 30%;
	min-width: 4rem;
	height: 100%;
}
.page-header-alt .header-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left center;
}
.page-header-alt .burger span {
	margin: 0px 0.2rem;
	margin-top: 0;
	height: 0.2rem;
}
/*
.page-header-alt .burger span {
	display: block;
	position: relative;
	width: 1.6rem;
	height: 0.2rem;
	margin: 0px 0.2rem;
	margin-top: 0.9rem;
	background: hsla(var(--main),var(--bg-opacity-full));
	backface-visibility: hidden;
	opacity: 1;
	transition: background 0.3s, opacity 0.3s;
}
.page-header-alt .burger span::before, 
.page-header-alt .burger span::after {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 0.2rem;
	background: hsla(var(--main),var(--bg-opacity-full));
	transform-origin: left;
	transition: top 0.3s, transform 0.3s, margin-top 0.3s, margin-left 0.3s;
}
.page-header-alt .burger span::before {
	top: -0.5rem;
} 
.page-header-alt .burger span::after {
	top: 0.5rem;
}*/

/* **************************************************
PAGE
************************************************** */

.page-footer {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: flex-start;
	align-self: flex-end;
	width: 100%;
	box-sizing: border-box;
	font-size: var(--small-font-size);
	background: hsla(var(--alt-front),var(--bg-opacity));
	color: hsla(var(--main),var(--text-opacity));
	border-top: 0.1rem solid transparent;
    border-color: hsla(var(--main-highlight),var(--border-opacity));
}
.footer-column {
	display: flex;
	flex-flow: row wrap;
	box-sizing: border-box;
	width: calc(100% / 3);
	padding: 1rem;
}
.footer-logo {
	height: 5rem;
	margin-bottom: 0.5rem;
	margin-right: 1rem;
	object-fit: contain;
	position: relative;
}
.footer-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left top;
}
.footer-info {
	opacity: 0.6;
}
.footer-list {
	list-style-type: none;
	line-height: 1rem;
}
.footer-list a {
	color: hsla(var(--main),var(--text-opacity-half));
}
.footer-list a:hover {
	color: hsla(var(--main-highlight),var(--text-opacity-full));
}
.page-body {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	padding-top: 1rem;
	min-height: calc(100vh - 10rem);
}
.page-body-archive {
	padding-top: 0;
}
.page-body-content {
	width: 100%;
}
.page-body-multimedia {
	
}
.page-body-video {
	box-sizing: border-box;
	padding: 0px 1rem;
}
.page-body-video .page-media {
	margin-bottom: 0.5rem;
	box-shadow: 0px 0px 6px 0px hsla(var(--black),0.2);
}
.page-body-generic {
}
.page-parallax-pattern{
	background-attachment: fixed;
	background-repeat: repeat;
	background-size: 25%;
}
.body-bg {
	background-attachment: fixed;
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: cover;
}
.page-parallax {
	position: relative;
	width: 100%;
	min-height: calc(70vh - 4rem);
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 2;
}
.page-parallax .parallax-footer {
	width: 100%;
	object-fit: contain;
    position: absolute;
	bottom: 0;
	z-index: 5;
	opacity: 0.5;
}
.page-parallax::after {
	content: '';
	display: block;
	width: 100%;
	height: 50%;
	position: absolute;
	left: 0px;
	bottom: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);;
}
.page-parallax.alt::after {
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);;
}
.page-parallax-section {
	position: relative;
	background: hsla(var(--alt),var(--bg-opacity-full));
	min-height: 1rem;
	color: hsla(var(--main),var(--text-opacity-full));
}
.page-parallax-border {
	display: flex;
	flex-flow: column wrap;
	position: absolute;
	width: 100%;
	left: 0;
	overflow: hidden;
	pointer-events: none;
}
.page-parallax-border img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.page-parallax-border-top {
	justify-content: flex-end;
	bottom: calc(100% - 2px);
}
.page-parallax-border-bottom {
	justify-content: flex-start;
	top: calc(100% - 2px);
}
.page-parallax-border-bottom img {
	transform: scale(-1,-1);
}
.page-parallax-hero{
}
.page-parallax-diagonal{
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom;
	min-height: 62vw;
}
.page-parallax-space {
	width: 100%;
	padding: 5rem 0px;
	z-index: 2;
	position: relative;
}
.page-parallax-dark {
	background: hsla(var(--alt),var(--bg-opacity-full));
	color: hsla(var(--main),var(--text-opacity-full));
}
.page-parallax-dark-bg {
	color: hsla(var(--main),var(--text-opacity-full));
}
.promo-title {
	font-family: var(--alt-font);
	text-transform: uppercase;
	color: hsla(var(--main),var(--text-opacity-full));
	font-size: 2.2rem;
	text-shadow: 0.15rem 0.15rem 0 hsla(var(--alt),0.4);
	width: 100%;
	padding: 0.6rem 1rem;
	box-sizing: border-box;
}
.promo-title.center {
	text-align: center;
}
.promo-subtitle {
	font-family: var(--title-font);
	letter-spacing: var(--title-spacing);
	text-transform: uppercase;
	display: block;
	padding: 0.6rem 1rem;
}
.promo-text-1 {
	font-size: 1.2rem;
	padding: 0.6rem 2rem;
}
.promo-text-2 {
	font-size: 1.6rem;
}
.promo-text-3 {
	font-size: 2rem;
}
.promo-text {
	width: 70%;
	display: block;
	padding: 0.6rem 1rem;
	box-sizing: border-box;
}
.promo-img {
	width: 50%;
	display: block;
	padding: 0.6rem 1rem;
	box-sizing: border-box;
}
.promo-img-full {
	width: 100%;
}
.promo-muted {
	font-size: 0.6rem;
	opacity: 0.6;
}
.promo-text-highlight {
	color: hsla(var(--main-highlight),var(--text-opacity-full));
	text-shadow: 2px 0 hsla(var(--alt),1), -2px 0 hsla(var(--alt),1), 0 2px hsla(var(--alt),1), 0 -2px hsla(var(--alt),0), 1px 1px hsla(var(--alt),1), -1px -1px hsla(var(--alt),1), 1px -1px hsla(var(--alt),1), -1px 1px hsla(var(--alt),1);
}
.promo-text-detail {
	color: hsla(var(--main-highlight),var(--text-opacity-full));
	font-size: 0.8rem;
}
.promo-button-wrapper {
	padding: 0.6rem 1rem;
}
.promo-block {
	background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
	border-radius: var(--alt-corner);
}
.promo-block-alt {
	background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
	border-radius: var(--alt-corner);
	color: hsla(var(--main),var(--text-opacity-full));
}
.promo-text-bg {
}
.promo-link {
	color: hsla(var(--main-highlight),var(--text-opacity));
}
.promo-link:hover {
	color: hsla(var(--main-highlight),var(--text-opacity-full));
}
.promo-content {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
	position: relative;
	z-index: 99;
	box-sizing: border-box;
}
.promo-content-wrapper {
	width: 60%;
	min-height: 1rem;
	position: relative;
	box-sizing: border-box;
}
.promo-top-wrapper {
	width: 100%;
}
.promo-top-wrapper .slideshow {
	width: 60%;
	margin: 0px auto;
}
.promo-image-wrapper {
	width: 40%;
	box-sizing: border-box;
}
.promo-image-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.promo-logo {
	align-self: flex-start;
}
.promo-intro {
	/*padding-left: 2rem;*/
	padding-top: 1.5rem;
}
.page-hero-logo {
	position: absolute;
	height: 90%;
	width: 100%;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
}
.hero-logo-wrapper {
	width: 80%;
	max-width: 30rem;
	min-width: 20rem;
	z-index: 10;
}
.hero-logo-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.page-column {
	grid-column: span 6;
}
.page-limit {
	box-sizing: border-box;
	width: 100%;
	max-width: 60rem;
	padding: 0px 1rem;
	margin: 0px auto;
}
.page-full {
}
.no-hero {
	padding-top: 1rem;
}
.page-hero, 
.page-limited-hero {
	margin-bottom: 1rem;
	box-shadow: 0px 0px 6px 0px hsla(var(--black),0.2);
	position: relative;
}
.page-limited-hero {
	background: hsla(var(--alt-front),var(--bg-opacity-min));
}
.hero-wrapper {
	width: 75%;
	height: 100%;
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
	z-index: 10;
}
.hero-wrapper > img, 
.hero-wrapper > a, 
.hero-wrapper > video,
.hero-wrapper > iframe, 
.hero-wrapper > figure {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0px;
	left: 0px;
}
.hero-wrapper > figure img, 
.hero-wrapper > a img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hero-wrapper.ultrawide {
	width: 100%;
}
.background-media {
	opacity: 0.8;
	filter:blur(3px);
}
.page-hero .slideshow-caption div {
	width: 100%;
	max-width: 60rem;
	margin: 0px auto;
}
.page-featured {
	
}
.page-media::before {
	display: block;
	content: '';
	position: absolute;
	box-sizing: border-box;
	pointer-events: none;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	border-bottom: 1px solid transparent;
	border-color: var(--border-color-min);
	z-index: 20;
}
.page-main {
	grid-column: span 8;
	box-sizing: border-box;
}
.page-sidebar {
	grid-column: span 4;
	box-sizing: border-box;
	display: grid;
	grid-column-gap: 1rem;
	grid-template-columns: repeat(2, 1fr);
	justify-content: start;
	align-content: start;
}
.page-sidebar > div {
	grid-column: span 2;
}
.page-listing > div, 
.page-listing > article {
	margin-bottom: 1rem;
}
.page-article {
	font-size: 0.8rem;
	line-height: 1.2rem;
	margin-bottom: 0.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid transparent;
	border-color: var(--border-color-min);
	color: hsla(var(--main),var(--text-opacity-full));
	/*white-space: pre-line;*/
	list-style-position: inside;
}
/*.page-article span {
	font-size: 1rem;
	color: hsla(var(--alt),var(--bg-opacity));
}*/
.page-article p {
	margin-bottom: 1rem;
}
.page-article ul {
	padding-left: 1rem;
	margin-bottom: 1rem;
}
.article-box {
	margin-top: 0.5rem;
	padding: 0.5rem;
	border-radius: var(--corner);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	background: hsla(var(--main),0.7);
}
.page-title {
	display: block;
	font-family: var(--title-font);
	font-size: var(--h1-font-size);
	line-height: var(--h1-line-height);
	letter-spacing: var(--title-spacing);
	margin-bottom: 0.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid transparent;
	border-color: var(--border-color-min);
}
.page-info {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	padding-bottom: 0.5rem;
	margin-bottom: 0.5rem;
	border-bottom: 1px solid transparent;
	border-color: var(--border-color-min);
	font-size: 0.6rem;
	text-transform: uppercase;
}
.page-info span {
	display: inline-block;
	margin-left: 1rem;

}
.page-info .page-headline {
	margin: 0px;
}
.page-interaction {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	margin-bottom: 0.5rem;
	border-bottom: 1px solid transparent;
	border-color: var(--border-color-min);
}
.page-taxonomy {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	margin-bottom: 0.5rem;
	border-bottom: 1px solid transparent;
	border-color: var(--border-color-min);
	list-style-type: none;
	font-size: 0.6rem;
	line-height: 1rem;
	text-transform: lowercase;
}
.page-taxonomy li {
	display: inline-block;
	padding: 0px 0.3rem;
	background: var(--bg-min);
	box-sizing: border-box;
	margin-right: 0.5rem;
	border-left: 0.3rem solid transparent;
	border-color: var(--border-color-idle);
	color: hsla(var(--main),var(--text-opacity-half));
	margin-bottom: 0.5rem;
	transition: background 0.3s, border-color 0.3s;
	user-select: none;
	border-top-right-radius: var(--corner);
	border-bottom-right-radius: var(--corner);
}
.page-taxonomy li:hover {
	background: var(--bg-idle);
	border-color: var(--border-color-hover);
}
.page-taxonomy li a {
	color: hsla(var(--main),var(--text-opacity-half));
}
.page-taxonomy li a:hover {
	color: hsla(var(--main),var(--text-opacity-full));
}
.page-comments {
	
}
.page-chat .comment-list {
	height: calc(100vh - 12rem);
	overflow-y: scroll;
}
.page-hub {
	display: flex;
	flex-flow: row wrap;
	/*flex-direction: row;*/
	justify-content: flex-start;
	height: calc(100vh - 4rem);
	position: relative;
	box-sizing: border-box;
}
.hub-fade {
	position: absolute;
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	background: hsla(var(--main-front),var(--bg-opacity-quarter));
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	transition: opacity 0.3s;
	z-index: 0;
	pointer-events: none;
	opacity: 0;
}
.page-hub-main {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 70%;
	height: 100%;
	overflow: hidden;
	overflow-y: scroll;
	transition: width 0.3s;
}
.page-hub-aside {
	/*position: relative;*/
	position: absolute;
	top: 0px;
	right: 0px;
	display: block;
	box-sizing: border-box;
	width: 30%;
	height: 100%;
	background: hsla(var(--alt-front),var(--bg-opacity-quarter));
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	overflow: hidden;
	overflow-y: scroll;
	padding-left: 1rem;
	transition: width 0.3s;
	z-index: 25;
}
.hub-container {
	box-sizing: border-box;
	width: 100%;
	padding: 1rem;
	padding-bottom: 0px;
	transition: opacity 0.2s;
}
.page-hub-aside .hub-container {
	width: calc(30vw - 2rem);
}
.slideshow-hub {
	grid-column: span 12;
	margin-bottom: 1rem;
}
.page-hub-main .card-hub, 
.page-hub-main .card-medium, 
.page-hub-main .banner-wrapper {
	grid-column: span 6;
	margin-bottom: 1rem;
}
.page-hub-main .banner-wrapper-full {
	grid-column: span 12;
	margin-bottom: 1rem;
}
.page-hub-aside .card-hub, 
.page-hub-aside .card-medium {
	margin-bottom: 1rem;
}
.card-option {
	grid-column: span 4;
	background: hsla(var(--main-highlight),var(--bg-opacity-min));
	transition: background 0.3s, color 0.3s;
}
.card-option:hover {
	background: hsla(var(--main-highlight),var(--bg-opacity));
}
.card-option .card-body {
	position: relative;
	padding-top: 0;
}
.card-option a.card-body {
	color: hsla(var(--main),var(--text-opacity-half));
	transition: color 0.3s;
}
.card-option a.card-body .card-title {
	color: hsla(var(--main),var(--text-opacity));
	transition: color 0.3s;
}
.card-option:hover a.card-body, 
.card-option:hover a.card-body .card-title{
	color: hsla(var(--main),var(--text-opacity-full));
}
.card-option a.card-body.card-flex {
	height: 100%;
	display: flex;
	flex-flow: row wrap;
	/*justify-content: space-between;*/
}
.card-extra {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 1rem;
	padding-top: 0;
	font-family: var(--title-font);
	letter-spacing: var(--title-spacing);
	align-self: flex-end;
}
.hub-aside-control {
	display: block;
	position: sticky;
	float: left;
	width: 2rem;
	height: 1.6rem;
	top: 1rem;
	left: 0px;
	cursor: pointer;
	user-select: none;
	z-index: 26;
	margin-left: -1rem;
	transform: translate(-1rem, 0);
}
.hub-aside-control span {
	display: block;
	width: 100%;
	height: 1.6rem;
	opacity: 0.6;
	transition: transform 0.6s, opacity 0.3s;
}
.hub-aside-control:hover span {
	opacity: 1;
}


.hub-aside-control span::before {
	font-family: 'Font Awesome';
	display: block;
	content: '\f054';
	font-size: 1.2rem;
	line-height: 1.6rem;
	width: 100%;
	height: 1.6rem;
	text-align: center;
}
.hub-aside-switch:checked ~ .page-hub-aside {
	width: 2rem;
	overflow-y: hidden;
}
.hub-aside-switch:checked ~ .page-hub-main {
	width: calc(100% - 2rem);
}
.hub-aside-switch:checked ~ .page-hub-aside .hub-aside-control span {
	transform: rotateY(180deg);
}
.hub-aside-switch:checked ~ .page-hub-aside .hub-container {
	pointer-events: none;
	opacity: 0;
	transition: width 0.1s linear 0.3s, opacity 0.3s;
}
.page-grid {
	box-sizing: border-box;
	display: grid;
	grid-column-gap: 1rem;
	grid-template-columns: repeat(12, 1fr);
	justify-content: start;
	align-content: start;
}
.page-grid-option {
	grid-gap: 1rem 1rem;
	/*align-items: start;*/
}
.page-grid-info {
	grid-column: span 12;
}
.page-alt {
	color: hsla(var(--main),var(--text-opacity));
	background: hsla(var(--alt-front),var(--bg-opacity-half));
}
/* **************************************************
COUNTER
************************************************** */

.counter-simple, 
.counter-button {
	display: inline-block;
	height: 2rem;
	margin-right: 1rem;
	margin-bottom: 0.5rem;
	font-size: 0.8rem;
	line-height: 2rem;
	color: hsla(var(--main),var(--text-opacity-half));
}
.counter-simple::before, 
.counter-button label {
	font-family: 'Font Awesome';
	display: block;
	content: '';
	font-size: 1rem;
	width: 2rem;
	height: 2rem;
	text-align: center;
	float: left;
}
.counter-button label {
	cursor: pointer;
	transition: opacity 0.3s, color 0.3s, transform 0.3s;
	color: hsla(var(--main),var(--text-opacity-full));
	opacity: 0.6;
}
.counter-button label:hover {
	opacity: 1;
}
.counter-button .hidden-input:checked + label {
	color: hsla(var(--main-highlight),var(--text-opacity-full));
}
.counter-button label:active {
	transform: scale(1.2,1.2);
}
.counter-simple span , 
.counter-button span {
	display: block;
	float: left;
	height: 2rem;
}
.counter-likes label::before {
	content: '\f164';
}
.counter-views::before {
	content: '\f06e';
}
.counter-comments::before {
	content: '\f27a';
}

/* **************************************************
ASSETS GROUP
************************************************** */

.page-assets {
	display: block;
	list-style-type: none;
}
.page-assets li {
	display: block;
	box-sizing: border-box;
	margin-bottom: 0.5rem;
}
.assets-group {
	display: block;
	list-style-type: none;
	box-shadow: 0px 0px 6px 0px hsla(var(--black),0);
	border-radius: var(--corner);
	transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s, color 0.3s;
	border: 1px solid transparent;
	border-color: var(--border-color-idle);
}
.assets-group:hover {
	box-shadow: 0px 3px 6px 0px hsla(var(--black),0.2);
	transform: translate3d(0px, -1px, 10px);
	border-color: var(--border-color-hover);
}
.assets-group label {
	position: relative;
	display: block;
	box-sizing: border-box;
	padding: 0.3rem 2rem;
	font-size: 0.8rem;
	line-height: 1.2rem;
	font-weight: bold;
	text-transform: uppercase;
	user-select: none;
	color: hsla(var(--main),var(--text-opacity));
	background: var(--bg-min);
	transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s, color 0.3s;
	cursor: pointer;
	border-radius: var(--corner);
}
.assets-group label:hover {
	color: hsla(var(--main),var(--text-opacity-full));
	background: var(--bg-idle);
}
.assets-group label::after {
	font-family: 'Font Awesome';
	display: block;
	content: '\f078';
	font-size: 1rem;
	line-height: 1.1rem;
	width: 1rem;
	height: 1rem;
	text-align: center;
	position: absolute;
	right: 0.5rem;
	top: 0.3rem;
	transition: transform 0.3s;
}
.assets-group .assets-wrapper-switch:checked + .assets-attachments::after {
	transform: rotateX(180deg);
}
.assets-wrapper {
	position: relative;
	box-sizing: border-box;
	background-clip: border-box;
	border-top: none;
	overflow: hidden;
	max-height: 0px;
	transition: max-height 0.6s, border-color 0.3s;
}
.assets-group .assets-wrapper-switch:checked ~ .assets-wrapper {
	max-height: 10rem;
	border-color: var(--border-color-idle);
}
.assets-items {
	width: 100%;
	height: 10rem;
	box-sizing: border-box;
	display: block;
	list-style-type: none;
	overflow-y: scroll;
}
.assets-items li {
	display: block;
}
.assets-items li a {
	display: block;
	box-sizing: border-box;
	padding: 0.3rem 0.5rem;
	font-size: 0.8rem;
	line-height: 1rem;
	line-height: auto;
	color: hsla(var(--main),var(--text-opacity-half));
	background: transparent;
	transition: background 0.3s;
}
.assets-items li a:hover {
	color: hsla(var(--main-highlight),var(--text-opacity));
	background: var(--bg-min);
}
.assets-attachments::before {
	font-family: 'Font Awesome';
	display: block;
	content: '\f0c6';
	font-size: 1rem;
	line-height: 1.2rem;
	width: 1rem;
	height: 1.2rem;
	text-align: center;
	position: absolute;
	left: 0.5rem;
	top: 0.3rem;
}
.assets-items li a::before {
	font-family: 'Font Awesome';
	display: block;
	font-size: 0.8rem;
	line-height: 1rem;
	width: 1rem;
	height: 1rem;
	text-align: center;
	float: left;
	margin-right: 0.3rem;
}
/*.assets-items li a::before {
	content: '\f15b';
}*/
.assets-questions {
	position: relative;
	display: block;
	box-sizing: border-box;
	padding: 0.3rem 2rem;
	font-size: 0.6rem;
	line-height: 1rem;
	text-transform: uppercase;
	border: 1px solid transparent;
	border-color: var(--border-color-idle);
	user-select: none;
	color: hsla(var(--main),var(--text-opacity));
	transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s, color 0.3s;
	cursor: pointer;
	background: hsla(var(--main-highlight),var(--bg-opacity-min));
	border-radius: var(--corner);
}
.assets-questions:hover {
	border-color: var(--border-color-hover);
	background: hsla(var(--main-highlight),var(--bg-opacity-quarter));
	color: hsla(var(--main),var(--text-opacity-full));
	box-shadow: 0px 3px 6px 0px hsla(var(--black),0.2);
	transform: translate3d(0px, -1px, 10px);
}
.assets-questions strong {
	font-size: 0.8rem;
}
.assets-questions::before {
	font-family: 'Font Awesome';
    display: block;
    content: '\f46d';
    font-size: 1rem;
    line-height: 1.2rem;
    width: 1rem;
    height: 1.2rem;
    text-align: center;
    position: absolute;
    left: 0.5rem;
    top: 50%;
	transform: translate(0, -50%);
}

/* **************************************************
FILE EXTENSIONS
************************************************** */

.ext-dir::before {
	content: '\f07b';
}
.ext-file::before {
	content: '\f15b';
}
.ext-ppt::before {
	content: '\f1c4';
}
.ext-doc::before {
	content: '\f1c2';
}
.ext-xls::before {
	content: '\f1c3';
}
.ext-txt::before {
	content: '\f15c';
}
.ext-mp3::before {
	content: '\f1c7';
}
.ext-pdf::before {
	content: '\f1c1';
}
.ext-bmp::before {
	content: '\f1c5';
}
.ext-mp4::before {
	content: '\f1c8';
}
.ext-zip::before {
	content: '\f1c6';
}

/* **************************************************
FOLDER COLLAPSE
************************************************** */

.folder {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
}
.folder-wrapper {
	display: block;
	width: 100%;
		min-height: 20rem;
	list-style-type: none;
	transition: width 0.6s;
	padding-top: 1px;
}
.folder-item {
	display: block;
	box-sizing: border-box;
	margin-bottom: 0.5rem;
}
.folder-item-body {
	display: block;
	position: relative;
	box-sizing: border-box;
	padding: 0.5rem;
	padding-right: 2.5rem;
	border: 1px solid transparent;
	border-color: var(--border-color-idle);
	color: hsla(var(--main),var(--text-opacity-quarter));
	transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s, color 0.3s, background 0.3s;
	box-shadow: 0px 0px 6px 0px hsla(var(--black),0);
	cursor: pointer;
	user-select: none;
	min-height: 3.3rem;
	background: var(--bg-min);
	border-radius: var(--corner);
}
.folder-item-body:hover {
	border-color: var(--border-color-hover);
	color: hsla(var(--main),var(--text-opacity-full));
	box-shadow: 0px 3px 6px 0px hsla(var(--black),0.2);
	background: var(--bg-idle);
	transform: translate3d(0px, -1px, 10px);
}
.folder-item-body::after {
	display: block;
	width: 2rem;
	height: 2rem;
	font-size: 1rem;
	line-height: 2rem;
	position: absolute;
	text-align: center;
	top: 0.4rem;
	right: 0.3rem;
	font-family: 'Font Awesome';
	transition: transform 0.3s;
}
.folder-item-body.folder-icon {
	padding: 0.5rem 2.5rem;
}
.folder-icon::before {
	display: block;
	width: 2rem;
	height: 2rem;
	font-size: 1.4rem;
	line-height: 2rem;
	position: absolute;
	text-align: center;
	top: 0.4rem;
	left: 0.3rem;
	font-family: 'Font Awesome';
}
a.folder-item-body[download]::after {
	content: '\f381';
	opacity: 0.4;
}
label.folder-item-body::after {
	content: '\f078';
}
.folder-item-switch:checked + label.folder-item-body {
	border-color: var(--border-color-idle);
	color: hsla(var(--main),var(--text-opacity));
	box-shadow: 0px 3px 6px 0px hsla(var(--black),0.1);
}
.folder-item-switch:checked + label.folder-item-body:hover {
	border-color: var(--border-color-hover);
	color: hsla(var(--main),var(--text-opacity));
}
.folder-item-switch:checked + label.folder-item-body::before {
	content: '\f07c';
}
.folder-item-switch:checked + label.folder-item-body::after {
	transform: rotateX(180deg);
}
label.folder-item-body {
	border-top-width: 0.3rem;
}
label.folder-item-body::before {
	top: 0.2rem;
}
.folder-item-title {
	display: block;
	font-weight: bold;
	font-size: 0.8rem;
	line-height: 1rem;
}
.folder-item-info {
	display: block;
	font-size: 0.6rem;
	line-height: 1rem;
	/*min-height: 1rem;*/
}
.folder-item-wrapper {
	display: block;
	box-sizing: border-box;
	padding-left: 2rem;
	padding-right: 0.5rem;
	overflow: hidden;
	overflow-y: scroll;
	max-height: 0px;
	padding-top: 0px;
	opacity: 0;
	transition: max-height 0.6s, padding-top 0.3s, opacity 0.3s;
}
.folder-item-wrapper .folder-item:last-child {
	margin-bottom: 0px;
}
.folder-item-switch:checked + label.folder-item-body + .folder-item-wrapper {
	max-height: 20rem;
	padding-top: 0.5rem;
	opacity: 1;
}
.folder-taxonomy {
	display: block;
	box-sizing: border-box;
	width: 0px;
	overflow: hidden;
	opacity: 0;
	padding-top: 1px;
	transition: width 0.6s, opacity 0.3s;
}
.folder-taxonomy-wrapper {
	display: block;
	box-sizing: border-box;
	width: 9rem;
	height: 100%;
	list-style-type: none;
	margin-left: 1rem;
	padding-left: 1rem;
	border-left: 1px solid transparent;
	border-left-color: var(--border-color-min);
}
.folder-taxonomy li {
	display: block;
}
.folder-taxonomy li label, 
.folder-taxonomy li a {
	display: block;
	position: relative;
	box-sizing: border-box;
	padding: 0.5rem;
	border: 1px solid transparent;
	border-left-width: 0.3rem;
	border-color: var(--border-color-idle);
	color: hsla(var(--main),var(--text-opacity-quarter));
	background: var(--bg-min);
	transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s, color 0.3s, background 0.3s;
	box-shadow: 0px 0px 6px 0px hsla(var(--black),0);
	cursor: pointer;
	user-select: none;
	font-size: 0.6rem;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
	border-radius: var(--corner);
}
.folder-taxonomy li label.active, 
.folder-taxonomy li a.active {
	border-color: var(--border-color-hover);
	color: hsla(var(--main),var(--text-opacity));
}
.folder-taxonomy li label:hover, 
.folder-taxonomy li a:hover {
	border-color: var(--border-color-hover);
	color: hsla(var(--main),var(--text-opacity));
	box-shadow: 0px 3px 6px 0px hsla(var(--black),0.2);
	transform: translate3d(0px, -1px, 10px);
	background: var(--bg-idle);
}
.folder-taxonomy li label.active:hover, 
.folder-taxonomy li a.active:hover {
	border-color: var(--border-color-hover);
	color: hsla(var(--main),var(--text-opacity));
}
.folder-search {
	width: 100%;
}
.folder-search-wrapper {
	display: block;
	overflow: hidden;
	max-height: 0px;
	padding-top: 1px;
	opacity: 0;
	transition: max-height 0.6s, opacity 0.3s;
}
.folder-search-form-group {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
}
.folder-search-form-group .form-bracket {
	width: 100%;
}
input.folder-search-input {
	display: inline-block;
	width: calc(100% - 2rem);
	height: 2rem;
	border-right: none;
	background: hsla(var(--alt-front),var(--bg-opacity-min));
}
button.folder-search-submit {
	display: inline-block;
	width: 2rem;
	height: 2rem;
	font-family: 'Font Awesome';
	font-size: 1rem;
	text-align: center;
	padding: 0px;
}
button.folder-search-submit::before {
	content: '\f002';
}
.folder-filters {
	width: 100%;
}
.folder-filters-wrapper {
	display: block;
	overflow: hidden;
	overflow-y: scroll;
	max-height: 0px;
	opacity: 0;
	transition: max-height 0.6s, opacity 0.3s;
}
.folder-filters-taxonomy h3 {
	font-size: 0.8rem;
	text-transform: uppercase;
}
.folder-filters-taxonomy ul {
	margin-bottom: 1rem;
}
.folder-filters-taxonomy .nav-sm li a {
    padding: 0.5rem 1rem;
}
.folder-control {
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-end;
}
.folder-control label {
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	padding: 0.3rem 0.5rem;
	padding-left: 1.5rem;
	border: 1px solid transparent;
	border-color: var(--border-color-idle);
	background: var(--bg-min);
	color: hsla(var(--main),var(--text-opacity-quarter));
	transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s, color 0.3s, background 0.3s;
	box-shadow: 0px 0px 6px 0px hsla(var(--black),0);
	cursor: pointer;
	user-select: none;
	font-size: 0.6rem;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 1rem;
	margin-left: 0.5rem;
	border-radius: var(--corner);
}
.folder-control label::before {
	display: block;
	width: 1rem;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	font-family: 'Font Awesome';
	text-align: center;
	padding: 0.5rem 0.3rem;
	box-sizing: border-box;
}
.folder-control label:hover {
	border-color: var(--border-color-hover);
	color: hsla(var(--main),var(--text-opacity));
	box-shadow: 0px 3px 6px 0px hsla(var(--black),0.2);
	transform: translate3d(0px, -1px, 10px);
	background: var(--bg-idle);
}
.folder-control-search::before {
	content: '\f002';
}
.folder-control-filters::before {
	content: '\f0b0';
}
.folder-control-filters-order::before {
	content: '\f160';
}
.folder-control-extend::before {
	content: '\f15b';
}
.folder-control-extend-period::before {
	content: '\f133';
}
.folder-search-switch:checked ~ .folder-control .folder-control-search, 
.folder-filters-switch:checked ~ .folder-control .folder-control-filters, 
.folder-extend-switch:checked ~ .folder-control .folder-control-extend {
	border-color: var(--border-color-idle);
	color: hsla(var(--main),var(--text-opacity));
}
.folder-search-switch:checked ~ .folder-control .folder-control-search:hover, 
.folder-filters-switch:checked ~ .folder-control .folder-control-filters:hover, 
.folder-extend-switch:checked ~ .folder-control .folder-control-extend:hover {
	border-color: var(--border-color-hover);
	color: hsla(var(--main),var(--text-opacity));
}
.folder-search-switch:checked ~ .folder-search .folder-search-wrapper, 
.folder-filters-switch:checked ~ .folder-filters .folder-filters-wrapper {
	max-height: 10rem;
	opacity: 1;
}
.folder-extend-switch:checked ~ .folder-wrapper {
	width: calc(100% - 10rem);
}
.folder-extend-switch:checked ~ .folder-taxonomy {
	width: 10rem;
	opacity: 1;
}

/* **************************************************
TABLE
************************************************** */
.table-wrapper {
	overflow: scroll;
	max-height: 20rem;
}
table {
	border-spacing: 0px;
	border-collapse: collapse;
	font-size: 0.8rem;
}
table.table-fixed {
	table-layout: fixed;
	min-width: 100%;
}
table[align='center'] {
	margin: 0px auto;
}
table col:hover {
	background: hsla(var(--main-front),var(--bg-opacity-half));
}
tbody {
	
}
tr {
}
td, th {
	position: relative;
	background-clip: padding-box;
	box-sizing: border-box;
	padding: 0.3rem 0.5rem;
	background: hsla(var(--main-front),var(--bg-opacity-min));
	border-bottom: 0.3rem solid transparent;
	transition: background 0.3s, color 0.3s;
	font-weight: normal;
	text-align: left;
}
th {
	background: hsla(var(--alt-front),var(--bg-opacity-min));
}
tr:hover td {
	background: hsla(var(--main-highlight),var(--bg-opacity-min));
	color: hsla(var(--main),var(--text-opacity-full));
}
tr:hover th {
	background: hsla(var(--main-highlight),var(--bg-opacity-min));
	color: hsla(var(--main),var(--text-opacity-full));
}
td::after, 
th::after {
	content: '';
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: calc(100% + 0.3rem);
	box-sizing: border-box;
	border-right: 1px solid transparent;
	border-color: hsla(var(--main),var(--text-opacity-min));
	user-select: none;
	pointer-events: none;
}
td:last-child::after, 
th:last-child::after {
	border-color: transparent;
}
tr:last-child td::after, 
tr:last-child th::after {
	height: 100%;
}
th[scope='col'] {
	
}
th[scope='row'] {
	
}

/* **************************************************
TABLE ICONS
************************************************** */

/*.header-button-search span::before {
	content: '\f002';
}
*/
.th-icon, 
.td-icon {
	display: inline-block;
	height: 1.4rem;
	line-height: 1.4rem;
	font-size: 0.6rem;
	position: relative;
	padding-left: 1.4rem;
	text-transform: uppercase;
	float: left;
	box-sizing: border-box;
}
.th-icon-only, 
.td-icon-only {
	display: inline-block;
	height: 1.4rem;
	line-height: 1.4rem;
	font-size: 0.6rem;
	position: relative;
	padding-left: 1.4rem;
	text-transform: uppercase;
	width: 1.4rem;
	overflow: hidden;
	color: transparent;
	user-select: none;
	float: left;
	box-sizing: border-box;
}
.td-hidden {
	display: none;
}
.th-icon::before, 
.td-icon::before, 
.th-icon-only::before, 
.td-icon-only::before {
	content: '';
	display: inline-block;
	position: absolute;
	left: 0px;
	top: 0px;
	font-size: 1rem;
	width: 1.4rem;
	height: 1.4rem;
	line-height: 1.4rem;
	font-family: 'Font Awesome';
	color: hsla(var(--main),var(--text-opacity-full));
	user-select: none;
}
.td-icon::before, 
.td-icon-only::before {
	cursor: pointer;
	opacity: 0.6;
	transition: color 0.3s;
	color: hsla(var(--main),var(--text-opacity-half));
}
.td-icon:hover::before, 
.td-icon-only:hover::before {
	color: hsla(var(--main-highlight),var(--text-opacity-full));
}
.col-l {
	max-width: 12rem;
}
.col-m {
	max-width: 8rem;
}
.col-s {
	max-width: 4rem;
}
.col-xs {
	max-width: 2rem;
}
.table-checkbox {
	display: block;
	position: absolute;
	width: 100%;
	height: 1rem;
	top: 50%;
	left: 0px;
	transform: translate(0, -50%);
	padding: 0px 0.5rem;
	box-sizing: border-box;
	font-size: 1rem;
	line-height: 1rem;
	font-family: 'Font Awesome';
	user-select: none;
	cursor: pointer;
}
.table-checkbox::before {
	content: '\f0c8';
	color: hsla(var(--main),var(--text-opacity-quarter));
	transition: color 0.3s;
}
.table-row:checked + .table-checkbox::before {
	content: '\f14a';
	color: hsla(var(--main-highlight),var(--text-opacity));
}
.table-row:checked ~ th, 
.table-row:checked ~ td {
	
}
/* **************************************************
TILEROW
************************************************** */
.tilerow-wrapper {
	display: grid;
	grid-column-gap: 0.5rem;
	grid-template-columns: repeat(12, 1fr);
	list-style-type: none;
}
.tilerow-item {
	display: block;
	width: 100%;
	grid-column: span 2;
	margin-bottom: 1rem;
	position: relative;
}
.tilerow-figure {
	display: block;
	width: 100%;
}
.tilerow-followlist .tilerow-wrapper {
	width: 100%;
	box-sizing: border-box;
    display: flex;
    flex-direction: row;
	align-content: stretch;
}
.page-startup-column .tilerow-followlist .tilerow-wrapper {
	flex-wrap: wrap;
}
.tilerow-followlist .tilerow-item {
	flex-grow: 1;
}
.page-startup-column .tilerow-followlist .tilerow-item {
	flex-basis: calc(100%/6 - 2.5rem/6);
}
.tilerow-item.item-latest a::after {
	content: '\f067';
	display: block;
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	height: 2rem;
	font-family: 'Font Awesome';
	user-select: none;
	font-size: 1.4rem;
	line-height: 2rem;
	text-align: center;
	color: hsla(var(--main-highlight),var(--text-opacity));
	transform: translate(0, -50%);
}
/* **************************************************
PAGE STARTUP
************************************************** */
.page-startup {
	
}
.page-startup-outer {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	box-sizing: border-box;
	align-items: flex-start;
}
.page-startup-header {
	display: block;
	width: 100%;
}
.page-startup-navigation {
	display: block;
	width: 3rem;
	margin-right: 1rem;
	box-sizing: border-box;
	padding-top: 2.1rem;
	position: sticky;
	top: 4rem;
}
.startup-navigation-wrapper {
	display: flex;
	flex-flow: column wrap;
	justify-content: flex-start;
	align-content: flex-start;
	box-sizing: border-box;
	list-style-type: none;
}
.startup-navigation-item {
	display: block;
	width: 100%;
	margin-bottom: 0.5rem;
	background: var(--bg-min);
}
.startup-navigation-item::before, 
.startup-navigation-item:hover::before{
	box-shadow: none;
}
.startup-navigation-figure {
	display: block;
	cursor: pointer;
	transition: opacity 0.3s, color 0.3s;
	opacity: 0.4;
	border-radius: var(--corner);
}
.startup-navigation-figure:hover {
	opacity: 1;
}
.startup-navigation-figure span::after {
	content: attr(data-char);
	font-family: 'Font Awesome';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	text-align: center;
	line-height: 3rem;
	font-size: 1.6rem;
	box-sizing: border-box;
	border: 1px solid transparent;
	border-color: var(--border-color-hover);
	transition: border 0.3s;
	border-radius: var(--corner);
}
.startup-navigation-figure img {
	opacity: 0.6;
	transition: opacity 0.3s;
}
.startup-navigation-figure:hover img {
	opacity: 1;
}
.page-startup-inner-wrapper {
	width: calc(100% - 4rem);
	display: block;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}
.page-startup-inner {
	width: 100%;
	box-sizing: border-box;
    display: flex;
    flex-direction: row;
}
.page-startup-wrapper {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: flex-start;
	box-sizing: border-box;
	/*overflow: hidden;*/
}
.page-startup-wrapper-list {
	flex-flow: column wrap;
	justify-content: flex-start;
	align-items: flex-start;
}
.page-startup-wrapper .general-title {
	width: 100%;
}
.page-startup-row {
	display: block;
	box-sizing: border-box;
	width: 100%;
}
.page-startup-column {
	display: block;
	box-sizing: border-box;
	width: calc(50% - 0.5rem);
}
.page-startup-column .slideshow {
	margin-bottom: 1rem;
}
.page-startup-column-flex {
	display: flex;
	flex-flow: column wrap;
	justify-content: flex-start;
	align-content: flex-start;
	box-sizing: border-box;
}
.page-startup-grid {
	width: 100%;
	flex-grow: 1;
}

.page-startup-grid-wrapper {
	width: 100%;
	display: grid;
	grid-column-gap: 0.5rem;
	grid-template-columns: repeat(12, 1fr);
	list-style-type: none;
}
.page-startup-grid-item {
	display: block;
	width: 100%;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	grid-column: span 4;
	margin-bottom: 0.5rem;
	padding-bottom: 142.5%;
}
/*.page-startup-grid-item::after {
	content: ' ';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	box-sizing: border-box;
	border-top: 0.3rem solid transparent;
	border-color: hsla(var(--main-highlight),var(--border-opacity-half));
	pointer-events: none;
	z-index: 10;
}*/
.page-startup-grid-item > img, 
.page-startup-grid-item > a {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0px;
	left: 0px;
}
.page-startup-grid-item > a img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.page-startup-grid-caption {
	position: absolute;
	left: 0px;
	bottom: 0px;
	box-sizing: border-box;
	width: 100%;
	padding: 0.5rem;
	padding-top: 2rem;
	background: linear-gradient(to top, hsla(var(--black),0.8) 0%, hsla(var(--black),0) 100%);
}
.page-startup-grid-item a {
	color: hsla(var(--main),var(--text-opacity-half));
	font-size: 0.6rem;
}
.page-startup-grid-caption h5 {
	font-size: 0.7rem;
	color: hsla(var(--main),var(--text-opacity));
	transition: color 0.3s;
	text-transform: uppercase;
	font-weight: normal;
}
.page-startup-grid-item a:hover {
	color: hsla(var(--main),var(--text-opacity));
}
.page-startup-grid-item a:hover h5 {
	color: hsla(var(--main),var(--text-opacity-full));
}
.page-startup-slider {
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	/*align-items: flex-start;*/
	box-sizing: border-box;
	position: relative;
}
.page-startup-slider-button {
	display: block;
	width: 2rem;
	height: calc(100% - 0.5rem);
	cursor: pointer;
	position: relative;
	transition: opacity 0.3s;
	background: var(--bg-min);
}
.page-startup-slider-button span {
	display: block;
	width: 2rem;
	height: 2rem;
	line-height: 2rem;
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	font-family: 'Font Awesome';
	user-select: none;
	text-align: center;
	font-size: 1rem;
	transition: opacity 0.3s;
	opacity: 0.4;
}
.page-startup-slider-button:hover span {
	opacity: 1;
}
.slider-button-next span::before {
	content: '\f054';
}
.slider-button-prev span::before {
	content: '\f053';
}
.page-startup-slider-wrapper {
	width: calc(100% - 5rem);
	overflow: hidden;
	padding-top: 1px;
}
.page-startup-slider-wrapper .page-startup-grid {
	width: calc(200% + 0.5rem);
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	box-sizing: border-box;
	position: relative;
	transition: margin-left 0.6s;
}
.page-startup-slider-wrapper .page-startup-grid-wrapper {
	width: calc(50% - 0.25rem);
	/*width: calc(200% + 0.5rem);
	grid-auto-flow: column;
	grid-template-rows: repeat(2, 1fr);*/
}
.page-startup-slider-wrapper .page-startup-grid-item {
	grid-column: span 2;
}
.startup-slider-switch:checked ~ .page-startup-slider-wrapper .page-startup-grid {
	margin-left: calc(-100% - 0.5rem);
}
.startup-slider-switch ~ .slider-button-prev, 
.startup-slider-switch:checked ~ .slider-button-next {
	opacity: 0.4;
	pointer-events: none;
}
.startup-slider-switch:checked ~ .slider-button-prev {
	opacity: 1;
	pointer-events: all;
}
.page-startup-inner .page-startup-wrapper {
	min-width: 100%;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s;
	margin-bottom: 1rem;
	order: 2;
}

.startup-wrapper-switch-1:checked ~ .page-startup-inner-wrapper .page-startup-inner .page-startup-wrapper-1, 
.startup-wrapper-switch-2:checked ~ .page-startup-inner-wrapper .page-startup-inner .page-startup-wrapper-2, 
.startup-wrapper-switch-3:checked ~ .page-startup-inner-wrapper .page-startup-inner .page-startup-wrapper-3, 
.startup-wrapper-switch-4:checked ~ .page-startup-inner-wrapper .page-startup-inner .page-startup-wrapper-4, 
.startup-wrapper-switch-5:checked ~ .page-startup-inner-wrapper .page-startup-inner .page-startup-wrapper-5, 
.startup-wrapper-switch-6:checked ~ .page-startup-inner-wrapper .page-startup-inner .page-startup-wrapper-6 {
	opacity: 1;
	pointer-events: all;
	order: 1;
}
.startup-wrapper-switch-1:checked ~ .page-startup-navigation label[for='startup-wrapper-switch-1'], 
.startup-wrapper-switch-2:checked ~ .page-startup-navigation label[for='startup-wrapper-switch-2'], 
.startup-wrapper-switch-3:checked ~ .page-startup-navigation label[for='startup-wrapper-switch-3'], 
.startup-wrapper-switch-4:checked ~ .page-startup-navigation label[for='startup-wrapper-switch-4'], 
.startup-wrapper-switch-5:checked ~ .page-startup-navigation label[for='startup-wrapper-switch-5'], 
.startup-wrapper-switch-6:checked ~ .page-startup-navigation label[for='startup-wrapper-switch-6'] {
	opacity: 0.8;
	color: hsla(var(--main-highlight),var(--text-opacity));
}
.startup-wrapper-switch-1:checked ~ .page-startup-navigation label[for='startup-wrapper-switch-1'] span::after, 
.startup-wrapper-switch-2:checked ~ .page-startup-navigation label[for='startup-wrapper-switch-2'] span::after, 
.startup-wrapper-switch-3:checked ~ .page-startup-navigation label[for='startup-wrapper-switch-3'] span::after,
.startup-wrapper-switch-4:checked ~ .page-startup-navigation label[for='startup-wrapper-switch-4'] span::after, 
.startup-wrapper-switch-5:checked ~ .page-startup-navigation label[for='startup-wrapper-switch-5'] span::after, 
.startup-wrapper-switch-6:checked ~ .page-startup-navigation label[for='startup-wrapper-switch-6'] span::after {
	border: 1px solid hsla(var(--main-highlight),var(--border-opacity-half));
}


/* **************************************************
FADE HERO
************************************************** */
.fade-hero {
	position: absolute;
	-webkit-mask-image: linear-gradient(to bottom, hsla(var(--black),1) 50%,hsla(var(--black),0) 100%);
}
.fade-hero + div {
	transition: padding-top 0.3s;
	padding-top: calc(42.2% - 6rem);
}

/* **************************************************
NF CARD
************************************************** */
.nf-card {
	display: block;
	position: relative;
	box-shadow: 0px 3px 6px 0px hsla(var(--black),0.1);
	border-radius: var(--corner);
	overflow: hidden;
	margin-bottom: 1rem;
	border: 1px solid transparent;
	border-color: var(--border-color-idle);
	transition: box-shadow 0.3s, transform 0.3s, color 0.3s, border-color 0.3s;
}
.nf-card:hover {
	border-color: var(--border-color-hover);
	transform: translate3d(0px, -1px, 10px);
}
.nf-card.nf-denied {
	opacity: 0.5;
}
.nf-card-main {
	position: relative;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-content: flex-start;
	background: var(--bg-min);
	color: hsla(var(--main),var(--text-opacity-half));
	background-clip: border-box;
	border: none;
	font-family: var(--title-font);
	letter-spacing: var(--title-spacing);
	font-size: var(--h4-font-size);
	transition: box-shadow 0.3s, color 0.3s, border-color 0.3s, background 0.3s;
}
.nf-card-main:hover {
	background: hsla(var(--main-front),var(--bg-opacity-min));
}
.nf-card-column {
	box-sizing: border-box;
	width: 50%;
	padding: 0.5rem 1rem;
	padding-right: 2rem;
}
.nf-card-subtitle {
	font-size: var(--h2-font-size);
	margin-bottom: 0.2rem;
}
.nf-card-subtitle-data {
	margin-bottom: 0.4rem;	
}
.nf-card-subtitle-status {
	position: relative;
	box-sizing: border-box;
	background: hsla(var(--alt),var(--bg-opacity-quarter));
	color: hsla(var(--main),var(--text-opacity-half));
	display: block;
	border-radius: 0.7rem;
	line-height: 1rem;
	margin-bottom: 0.2rem;
	padding: 0.2rem;
	padding-left: 1.4rem;
	border: 1px solid transparent;
	border-color: var(--border-color-idle);
}
.nf-pending .nf-card-subtitle-status {
	background: hsla(var(--yellow),var(--bg-opacity-quarter));
}
.nf-automatic .nf-card-subtitle-status {
	background: hsla(var(--main-highligh),var(--bg-opacity-quarter));
}
.nf-denied .nf-card-subtitle-status {
	background: hsla(var(--red),var(--bg-opacity-quarter));
}
.nf-verified .nf-card-subtitle-status {
	background: hsla(var(--green),var(--bg-opacity-quarter));
}
.nf-card-subtitle-status::before {
	content: '';
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-content: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 1.2rem;
	height: 100%;
	font-family: var(--icon-font);
	text-align: center;
	line-height: var(--plain-line-height);
	font-size: var(--plain-font-size);
	padding: 0 0.1rem;
}
.nf-pending .nf-card-subtitle-status::before {
	content: '\f06a';
}
.nf-automatic .nf-card-subtitle-status::before {
	content: '\f058';
}
.nf-denied .nf-card-subtitle-status::before {
	content: '\f057';
}
.nf-verified .nf-card-subtitle-status::before {
	content: '\f058';
}
.nf-pending .nf-card-subtitle-status::after {
	content: 'Verificação Pendente';
}
.nf-automatic .nf-card-subtitle-status::after {
	content: 'Verificado Automaticamente';

}
.nf-denied .nf-card-subtitle-status::after {
	content: 'Não Qualificado';
}
.nf-verified .nf-card-subtitle-status::after {
	content: 'Verificado Manualmente';
}

.nf-card-subtitle-highlight {
	font-size: var(--h1-font-size);
	color: hsla(var(--green),var(--text-opacity-half));
	font-weight: bold;
}
.nf-denied .nf-card-subtitle-highlight {
	color: hsla(var(--red),var(--text-opacity-half));
	text-decoration: line-through;
}
.nf-card-switch-label {
	position: absolute;
	bottom: 0.5rem;
	right: 1rem;
	width: 1.4rem;
	height: 1.4rem;
	font-size: var(--h2-font-size);
	font-family: var(--icon-font);
	transition: transform 0.2s;
	cursor: pointer;
}
.nf-card-switch-label::before {
	content: '\f078';
}
.nf-card-info {
	max-height: 0px;
	transition: max-height 0.5s;
}
.nf-card-switch:checked + .nf-card-main .nf-card-switch-label {
	transform: rotateX(180deg)
}
.nf-card-switch:checked ~ .nf-card-info {
	max-height: 100vh;
}

.nf-card-info-inner {
	background: hsla(var(--alt),var(--bg-opacity-min));
	color: hsla(var(--main),var(--text-opacity-half));
	padding: 0.5rem 1rem;
	padding-right: 2rem;
	font-size: var(--plain-font-size);
}
.p-icon::before {
	content: '';
	display: inline-block;
	width: 1.5rem;
	height: 100%;
	font-family: var(--icon-font);
}
.p-icon-nf::before {
	content: '\f570';
}
.p-icon-luck::before {
	content: '\f3ff';
	font-size: var(--h3-font-size);
}
/* **************************************************
FAQ CARD
************************************************** */
.faq-card {
	display: block;
	position: relative;
	box-shadow: 0px 3px 6px 0px hsla(var(--black),0.1);
	border-radius: var(--corner);
	overflow: hidden;
	margin-bottom: 1rem;
	border: 1px solid transparent;
	border-color: var(--border-color-idle);
	transition: box-shadow 0.3s, transform 0.3s, color 0.3s, border-color 0.3s;
}
.faq-card:hover {
	border-color: var(--border-color-hover);
	transform: translate3d(0px, -1px, 10px);
}
.faq-card-main {
	position: relative;
	display: block;
	background: var(--bg-min);
	color: hsla(var(--main),var(--text-opacity-half));
	background-clip: border-box;
	border: none;
	font-family: var(--title-font);
	letter-spacing: var(--title-spacing);
	font-size: var(--h4-font-size);
	transition: box-shadow 0.3s, color 0.3s, border-color 0.3s, background 0.3s;
}
.faq-card-main:hover {
	background: hsla(var(--main-front),var(--bg-opacity-min));
}
.faq-card-switch-label {
	position: relative;
	display: block;
	font-size: var(--h2-font-size);
	padding: 1rem;
	padding-right: 2rem;
	cursor: pointer;
}
.faq-card-switch-label::after {
	content: '\f078';
	position: absolute;
	top: 50%;
	right: 1rem;
	width: 1.4rem;
	height: 1.4rem;
	font-size: var(--h2-font-size);
	font-family: var(--icon-font);
	transform: translateY(-50%);
	transform-origin: center;
	transition: transform 0.2s;
	
}
.faq-card-info {
	max-height: 0px;
	transition: max-height 0.5s;
}
.faq-card-switch:checked + .faq-card-main .faq-card-switch-label::after {
	transform: translateY(-50%) rotateX(180deg)
}
.faq-card-switch:checked ~ .faq-card-info {
	max-height: 100vh;
}
.faq-card-info-inner {
	background: hsla(var(--alt),var(--bg-opacity-min));
	color: hsla(var(--main),var(--text-opacity-half));
	padding: 0.5rem 1rem;
	padding-right: 2rem;
	font-size: var(--plain-font-size);
}
/* **************************************************
REACTIONS
************************************************** */
.reaction-outer {
	width: 2rem;
	height: 2rem;
	position: relative;
}
.reaction-wrapper {
	position: absolute;
	width: 600%;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-content: flex-start;
	list-style-type: none;
	padding: 0.2rem;
	top: calc(-100% + 0.1rem);
	left: 0;
	background: hsla(var(--alt-front),var(--bg-opacity-half));
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s;
	border-radius: 2rem;
}
.reaction-wrapper:hover, 
.reaction-inner:hover + .reaction-wrapper, 
.reaction-inner:active + .reaction-wrapper {
	pointer-events: all;
	opacity: 1;
}
.reaction-wrapper li {
	display: block;
	width: calc(100% / 8);
}
.reaction-button, 
.reaction-inner {
	display: block;
	position: relative;
	width: 100%;
	padding-bottom: 100%;
	z-index: 20;
	transition: transform 0.3s;
	/*background: rgba(255,0,0,0.1);*/
}
.reaction-button:active, 
.reaction-inner:active {
	transform: scale(1.2,1.2);
}
.reaction-button:hover {
	transform: scale(1.4,1.4);
}
.reaction-button::before, 
.reaction-inner::before {
	content: '';
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: 800% 100%;
	background-image:url(../image/reactions.svg);
	background-position: 100% top;
	z-index: 20;
	pointer-events: none;
	transform-origin: center center;
}
.reaction-button::after, 
.reaction-inner::after {
	content: '';
	display: block;
	position: absolute;
	top: 10%;
	left: 10%;
	width: 80%;
	height: 80%;
	border-radius: 100%;
	background: hsla(var(--alt-front),var(--bg-opacity-min));
	z-index: 19;
	cursor: pointer;
	transition: background 0.3s;
}
.reaction-wrapper:hover .reaction-inner::after {
	pointer-events: all;
	cursor: pointer;
}
.reaction-button::before, 
.reaction-inner:before {
	animation-duration: 1s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-timing-function: ease;
	transition: transform 0.3s opacity 0.3s;
}
.reaction-inner:before {
	opacity: 0.6;
}
.reaction-switch:checked ~ .reaction-outer .reaction-inner::before {
	opacity: 1;
}
.reaction-ouch::before, 
.reaction-switch-ouch:checked ~ .reaction-outer .reaction-inner::before {
	background-position: 0 top;
}
.reaction-haha::before, 
.reaction-switch-haha:checked ~ .reaction-outer .reaction-inner::before {
	background-position: 14.3% top;
}
.reaction-wut::before, 
.reaction-switch-wut:checked ~ .reaction-outer .reaction-inner::before {
	background-position: 28.9% top;
}
.reaction-love::before, 
.reaction-switch-love:checked ~ .reaction-outer .reaction-inner::before {
	background-position: 42.8% top;
}
.reaction-sad::before, 
.reaction-switch-sad:checked ~ .reaction-outer .reaction-inner::before {
	background-position: 57.1% top;
}
.reaction-grr::before, 
.reaction-switch-grr:checked ~ .reaction-outer .reaction-inner::before {
	background-position: 71.6% top;
}
.reaction-wow::before, 
.reaction-switch-wow:checked ~ .reaction-outer .reaction-inner::before {
	background-position: 85.7% top;
}
.reaction-like::before, 
.reaction-switch-like:checked ~ .reaction-outer .reaction-inner::before {
	background-position: 100% top;
}
.reaction-ouch:hover::before, 
.reaction-switch-ouch:checked ~ .reaction-outer .reaction-inner:hover::before {
	animation-name: reaction-animation-ouch;
}
.reaction-haha:hover::before, 
.reaction-switch-haha:checked ~ .reaction-outer .reaction-inner:hover::before {
	animation-name: reaction-animation-haha;
}
.reaction-wut:hover::before, 
.reaction-switch-wut:checked ~ .reaction-outer .reaction-inner:hover::before {
	animation-name: reaction-animation-wut;
}
.reaction-love:hover::before, 
.reaction-switch-love:checked ~ .reaction-outer .reaction-inner:hover::before {
	animation-name: reaction-animation-love;
}
.reaction-sad:hover::before, 
.reaction-switch-sad:checked ~ .reaction-outer .reaction-inner:hover::before {
	animation-name: reaction-animation-sad;
}
.reaction-grr:hover::before, 
.reaction-switch-grr:checked ~ .reaction-outer .reaction-inner:hover::before {
	animation-name: reaction-animation-grr;
}
.reaction-wow:hover::before, 
.reaction-switch-wow:checked ~ .reaction-outer .reaction-inner:hover::before {
	animation-name: reaction-animation-wow;
}
.reaction-like:hover::before, 
.reaction-switch-like:checked ~ .reaction-outer .reaction-inner:hover::before {
	animation-name: reaction-animation-like;
}
.reaction-ouch::after, 
.reaction-switch-ouch:checked ~ .reaction-outer .reaction-inner::after {
	background: linear-gradient(to bottom, rgba(230,139,82,1) 0%, rgba(251,201,50,1) 100%);
}
.reaction-haha::after, 
.reaction-switch-haha:checked ~ .reaction-outer .reaction-inner::after {
	background: linear-gradient(to bottom, rgba(251,201,50,1) 0%, rgba(251,201,50,1) 100%);
}
.reaction-wut::after, 
.reaction-switch-wut:checked ~ .reaction-outer .reaction-inner::after {
	background: linear-gradient(to bottom, rgba(117,212,243,1) 0%, rgba(251,201,50,1) 100%);
}
.reaction-love::after, 
.reaction-switch-love:checked ~ .reaction-outer .reaction-inner::after {
	background: linear-gradient(to bottom, rgba(243,117,203,1) 0%, rgba(251,201,50,1) 100%);
}
.reaction-sad::after, 
.reaction-switch-sad:checked ~ .reaction-outer .reaction-inner::after {
	background: linear-gradient(to bottom, rgba(251,201,50,1) 0%, rgba(251,201,50,1) 100%);
}
.reaction-grr::after, 
.reaction-switch-grr:checked ~ .reaction-outer .reaction-inner::after {
	background: linear-gradient(to bottom, rgba(218,73,9,1) 0%, rgba(251,201,50,1) 100%);
}
.reaction-wow::after, 
.reaction-switch-wow:checked ~ .reaction-outer .reaction-inner::after {
	background: linear-gradient(to bottom, rgba(251,201,50,1) 0%, rgba(251,201,50,1) 100%);
}
.reaction-like::after, 
.reaction-switch-like:checked ~ .reaction-outer .reaction-inner::after {
	background: hsla(var(--main-highlight),var(--bg-opacity));
}
@keyframes reaction-animation-ouch {
	0%   {
		transform: skew(-4deg, -4deg) translate(10%, 0) scale(0.9, 1);
	}
	50%   {
		transform: skew(0deg, 0deg) translate(0, 0) scale(1, 1);
	}
	100% {
		transform: skew(4deg, 4deg) translate(-10%, 0) scale(0.9, 1);
	}
}
@keyframes reaction-animation-grr {
	0%   {
		transform: skew(0deg, 4deg) translate(0, 10%) scale(1, 0.9);
	}
	50%   {
		transform: skew(0deg, 0deg) translate(0, 0) scale(1, 1);
	}
	100% {
		transform: skew(0deg, -4deg) translate(0, 10%) scale(1, 0.9);
	}
}
@keyframes reaction-animation-wow {
	0%   {
		transform: scale(1.1, 1.1);
	}
	50%   {
		transform: scale(1.1, 0.6);
	}
	100% {
		transform: scale(1, 1);
	}
}
@keyframes reaction-animation-sad {
	0%  {
		transform: skew(0deg, 0deg) translate(0, 0) scale(1, 1);
	}
	100% {
		transform: skew(4deg, 4deg) translate(-10%, 10%) scale(1, 0.6);
	}
}
@keyframes reaction-animation-love {
	0%   {
		transform: translate(0, 4%) scale(1.1, 1);
	}
	50% {
		transform: translate(0, 0) scale(1, 0.8);
	}
	100% {
		transform: translate(0, -6%) scale(1, 1);
	}
}
@keyframes reaction-animation-wut {
	0%   {
		transform: skew(-4deg, -4deg) translate(10%, -4%) scale(0.9, 1);
	}
	50%   {
		transform: skew(0deg, 0deg) translate(0, 0) scale(1, 1);
	}
	100% {
		transform: skew(4deg, 4deg) translate(-10%, -4%) scale(0.9, 1);
	}
}
@keyframes reaction-animation-haha {
	0%   {
		transform: skew(-4deg, -4deg) translate(10%, -4%) scale(0.9, 1);
	}
	50%   {
		transform: skew(0deg, 0deg) translate(0, -10%) scale(1, 0.8);
	}
	100% {
		transform: skew(4deg, 4deg) translate(-10%, -4%) scale(0.9, 1);
	}
}
@keyframes reaction-animation-like {
	0%   {
		transform: scale(1, 1) rotate(0deg);
	}
	50%   {
		transform: scale(1.1, 1.1) rotate(-20deg);
	}
	100% {
		transform: scale(1, 1) rotate(10deg);
	}
}

/* **************************************************
BENTO
************************************************** */
.page-bento {
	width: 100%;
	padding-top: 1rem;
	box-sizing: border-box;
	min-height: calc(100vh - 10rem );
	background-repeat: no-repeat;
	background-size: 40%;
	background-position: bottom right;
}
.bento-wrapper {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	/*align-items: flex-start;
	align-content: flex-start;*/
	box-sizing: border-box;
	padding: 0 1rem;
	margin-bottom: 1rem;
}
.bento-wrapper-compact {
	flex-flow: row wrap;
}
.bento-wrapper-compact.bento-wrapper-compact-reverse {
	flex-flow: row-reverse wrap;
}
.bento-row {
	width: 100%;
	min-width: 100%;
	box-sizing: border-box;
	margin-bottom: 1rem;
}
.bento-column-sm {
	width: 100%;
	max-width: calc(((100% - 5rem) / 6) * 2 + 2rem);
	display: grid;
	grid-gap: 1rem 1rem;
	grid-template-columns: repeat(2, 1fr);
	align-items: start;
	align-content: start;
	box-sizing: border-box;
	overflow: hidden;
	padding: 0.1rem 0;
	transition: width 1s, opacity 0.3s;
}
.bento-wrapper-compact .bento-column-sm {
	max-width: calc((100% / 100) * 64.6);
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-end;
}
.bento-column-sm:has(+ .bento-column-lg){
	justify-content: flex-end;
}
.bento-column-lg {
	width: calc(((100% - 5rem) / 6) * 4 + 3rem);
	display: grid;
	grid-gap: 1rem 1rem;
	grid-template-columns: repeat(12, 1fr);
	align-items: start;
	align-content: start;
	box-sizing: border-box;
	overflow: hidden;
	padding: 0.1rem 0;
	transition: opacity 0.3s;
}
.bento-wrapper-compact .bento-column-lg {
	width: calc((100% / 100) * 35.4);
}
.bento-card {
	display: block;
	position: relative;
	background: hsla(var(--main),var(--bg-opacity-min));
	cursor: pointer;
	border: none;
	border-radius: var(--corner);
	grid-column: span 3;
	overflow: hidden;
	list-style-position: inside;
}
.bento-card.frame-hover {
	user-select: text;
}
.bento-extra-card {
	grid-column: span 12;
	box-sizing: border-box;
	padding: 0.5rem;
	display: block;
	position: relative;
	background: hsla(var(--main),var(--bg-opacity-min));
	border: none;
	border-radius: var(--corner);
	overflow: hidden;
}
.bento-card .slideshow-selector-wrapper {
	position: absolute;
	top: 0.5rem;
	right: 1rem;
	z-index: 1;
}
.bento-wrapper-compact .bento-card {
	width: 100%;
	grid-column: span 6;
}
.bento-card-full {
	display: block;
	position: relative;
	/*background: hsla(var(--main),var(--bg-opacity-min));*/
	border: none;
	border-radius: var(--corner);
	grid-column: span 12;
	box-sizing: border-box;
	/*padding: 0.5rem;*/
	overflow: hidden;
}
a.bento-card-full {
	cursor: pointer;
}
.bento-card-icon {
	display: block;
	position: absolute;
	top: 46%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50%;
	height: 50%;
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0.8;
	transition: transform 0.3s, opacity 0.3s;
	pointer-events: none;
}
.bento-card-tileset {
	background-image: url(../image/icon-tileset.svg);
	background-size: 400%;
}
.bento-card-icon-01 {
	background-position: 0 0;
}
.bento-card-icon-02 {
	background-position: 33.3% 0;
}
.bento-card-icon-03 {
	background-position: 66.6% 0;
}
.bento-card-icon-04 {
	background-position: 100% 0;
}
.bento-card-icon-05 {
	background-position: 0 33.3%;
}
.bento-card-icon-06 {
	background-position: 33.3% 33.3%;
}
.bento-card-icon-07 {
	background-position: 66.6% 33.3%;
}
.bento-card-icon-08 {
	background-position: 100% 33.3%;
}
.bento-card-icon-09 {
	background-position: 0 66.6%;
}
.bento-card-icon-10 {
	background-position: 33.3% 66.6%;
}
.bento-card-icon-11 {
	background-position: 66.6% 66.6%;
}
.bento-card-icon-12 {
	background-position: 100% 66.6%;
}
.bento-card:hover .bento-card-icon {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1.1);
}
.bento-card-title {
	display: flex;
	flex-flow: column wrap;
	align-items: center;
	justify-content: flex-end;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%,0);
	width: 100%;
	height: 100%;
	text-align: center;
	z-index: 2;
	font-size: var(--plain-font-size);
	line-height: var(--plain-line-height);
	font-family: var(--title-font);
	letter-spacing: var(--title-spacing);
	box-sizing: border-box;
	padding: 0.5rem 0.3rem;
	user-select: none;
}
a .bento-card-title {
	color: hsla(var(--main),var(--text-opacity));
}
a:hover .bento-card-title {
	color: hsla(var(--main),var(--text-opacity-full));
}
.bento-card-extended {
	max-width: calc(100% - 1rem);
	width: calc(((100vw - 7rem - 17px) / 6) * 2 + 1rem);
	grid-column: span 2;
	cursor: auto;
}
.bento-column-lg .bento-card-extended {
	grid-column: span 12;
	max-width: 100%;
}
.bento-row .bento-card-extended {
	max-width: 100%;
}
.bento-card-extended .aspect-ratio-square {
	padding-bottom: calc((100% - 1rem) /2);
}
.bento-column-lg .bento-card-extended .aspect-ratio {
	padding-bottom: calc(50% - 0.5rem);
}
/*.bento-row .bento-card-extended .aspect-ratio {
	padding-bottom: 0;
}*/
.bento-card-featured-content {
	position: absolute;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 0.5rem;
	text-transform: uppercase;
	font-size: var(--plain-font-size);
	line-height: var(--plain-line-height);
	font-family: var(--title-font);
	letter-spacing: var(--title-spacing);
	user-select: none;
	color: hsla(var(--main),var(--text-opacity));
}
.bento-row .bento-card-featured-content {
	position: relative;
}
.bento-card-featured-content hr,
.bento-card-content hr{
	margin: 0.5rem 0;
	border: 1px solid transparent;
	border-color: hsla(var(--main),var(--border-opacity-min));
}
.bento-card-featured-title {
	font-family: var(--title-font);
	letter-spacing: var(--title-spacing);
	display: block;
	font-size: var(--h3-font-size);
	line-height: var(--h3-line-height);
	color: hsla(var(--main),var(--text-opacity-full));
	text-transform: uppercase;
}
.bento-card-featured-subtitle {
	color: hsla(var(--main-highlight),var(--text-opacity));
}
.bento-card-featured-score {
	font-size: var(--h3-font-size);
	line-height: var(--h3-line-height);
	color: hsla(var(--main-highlight),var(--text-opacity-full));
}
.bento-card-featured-sublink {
	font-size: var(--small-font-size);
	line-height: var(--small-line-height);
	color: hsla(var(--gray),var(--text-opacity-quarter));
}
.bento-card-content {
	padding: 0.5rem 1rem 1rem 1rem;
	min-height: 50vh;
}
.bento-card-debugger {
	padding: 0.5rem;
	font-size: var(--small-font-size);
	line-height: var(--small-line-height);
	background: hsla(var(--dark),var(--bg-opacity-min));
	color: hsla(var(--main-highlight),var(--text-opacity-quarter));
}
.bento-menu-wrapper {
	font-family: var(--title-font);
	letter-spacing: var(--title-spacing);
	font-size: var(--plain-font-size);
	line-height: var(--plain-line-height);
}
.bento-menu-sm {
	width: 100%;
	max-width: calc(((100% - 5rem) / 6) * 2 + 2rem);
	height: 1.2rem;
	box-sizing: border-box;
	margin-bottom: 0.5rem;
	overflow: hidden;
	transition: width 1s;
}
.bento-menu-lg + .bento-menu-sm {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
}
.bento-wrapper-compact .bento-menu-sm {
	max-width: calc(((100% / 100) * 35.4) + 1rem);
	margin: 0;
	transition: none;
}
.bento-menu-sm .bento-menu-inner {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
	width: calc(100% - 1rem);
	background: linear-gradient(to right, hsla(var(--alt),0) 0%,hsla(var(--alt),0.2) 100%);
	border-radius: var(--corner);
	box-sizing: border-box;
	padding: 0 0.5rem;
}
.bento-wrapper-compact .bento-menu-sm .bento-menu-inner {
	height: 100%;
	background: hsla(var(--alt),var(--bg-opacity-min));
	border-radius: var(--corner);
}
.bento-menu-lg {
	width: calc(((100% - 5rem) / 6) * 4 + 3rem);
	height: 1.2rem;
	margin-bottom: 0.5rem;
	overflow: hidden;
	transition: width 1s;
}
.bento-wrapper-compact .bento-menu-lg {
	width: calc(((100% / 100) * 64.6) - 1rem);
	margin: 0;
	transition: none;
}
.bento-menu-lg .bento-menu-inner {
	background: hsla(var(--alt),var(--bg-opacity-min));
	display: flex;
	height: 100%;
	flex-flow: row nowrap;
	justify-content: space-between;
	border-radius: var(--corner);
	padding: 0 0.5rem;
	box-sizing: border-box;
}
.bento-menu-breadcrumb {
	display: flex;
	flex-flow: row nowrap;
	color: hsla(var(--main),var(--text-opacity-quarter));
}
.bento-menu-breadcrumb .breadcrumb-item a {
	color: hsla(var(--main),var(--text-opacity-quarter));
}
.bento-menu-breadcrumb .breadcrumb-item a:hover {
	color: hsla(var(--main),var(--text-opacity));
}
.bento-menu-breadcrumb .breadcrumb-item.active {
	color: hsla(var(--main),var(--text-opacity));
}
.bento-menu-info {
	color: hsla(var(--main),var(--text-opacity));
}.bento-menu-info span {
	display: inline-block;
	margin-left: 0.5rem;
	color: hsla(var(--main-highlight),var(--text-opacity));
}
.bento-menu-switch {
	display: inline-block;
	width: 1.2rem;
	text-align: center;
	box-sizing: border-box;
	border-radius: var(--corner);
	cursor: pointer;
	color:  hsla(var(--main),var(--text-opacity-quarter));
	transition: color 0.3s, transform 0.3s;
}
.bento-menu-switch:hover {
	color: hsla(var(--main),var(--text-opacity));
}
.bento-menu-switch::before {
	font-family: var(--icon-font);
	content: '\f054';
}
.switch-bento:checked ~ .bento-wrapper .bento-menu-sm {
	width: 2.2rem;
}
.switch-bento:checked ~ .bento-wrapper .bento-menu-sm .bento-menu-inner {
	width: calc(100% - 1rem);
}
.switch-bento:checked ~ .bento-wrapper .bento-menu-lg {
	width: calc((((100% - 5rem) / 6) * 4 + 3rem) - 2.2rem);
}
.switch-bento:checked ~ .bento-wrapper .bento-column-sm {
	width: 0;
	padding-right: 0;
	opacity: 0;
	pointer-events: none;
}
.switch-bento:checked ~ .bento-wrapper .bento-menu-sm .bento-menu-switch {
	transform: rotateY(180deg);
}
.switch-bento:checked ~ .bento-wrapper .bento-column-lg {
}
/* **************************************************
BENTO TABLE
************************************************** */
.bento-table {
	width: 100%;
	border-radius: var(--corner);
	overflow: hidden;
	overflow-x: scroll;
}
.bento-table table {
	border-spacing: 0px;
	border-collapse: collapse;
	font-size: 1rem;
	table-layout: fixed;
	min-width: 100%;
}
.bento-table td, 
.bento-table th {
	position: relative;
	background-clip: padding-box;
	box-sizing: border-box;
	padding: 0.5rem 1rem;
	background: hsla(var(--main-front),var(--bg-opacity-min));
	border-bottom: 1px solid transparent;
	transition: background 0.3s, color 0.3s;
	font-weight: normal;
	text-align: left;
}
.bento-table th {
	background: hsla(var(--alt-front),var(--bg-opacity-half));
	color: hsla(var(--main-highlight),var(--text-opacity));
}
.bento-table td::after, 
.bento-table th::after {
	display: none;
}
.bento-action-wrapper {
	margin-bottom: 1rem;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
}
.bento-action-wrapper.space-between {
	justify-content: space-between;
}
.bento-info-wrapper {
	font-size: 0.8rem;
	margin-bottom: 1rem;
}
.bento-table-actions {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
	align-items: center;
	height: 100%;
}
.bento-table-inactive {
	opacity: 0.4;
}
/* **************************************************
BUTTON ICONS
************************************************** */
a.user-link {
	color: hsla(var(--main),var(--text-opacity));
}
a.user-link:hover {
	color: hsla(var(--main-highlight),var(--text-opacity));
}
.btn-new-user::before {
	font-family: 'Font Awesome';
	content: '\f234';
	margin-right: 0.5rem;
}
.btn-save::before {
	font-family: 'Font Awesome';
	content: '\f0c7';
	margin-right: 0.5rem;
}
.btn-trash::before {
	font-family: 'Font Awesome';
	content: '\f2ed';
	margin-right: 0.5rem;
}
.icon-edit-user{
	opacity: 0.46;
}
.icon-edit-user::before {
	font-family: 'Font Awesome';
	content: '\f044';
	margin-left: 0.5rem;
}
.icon-check-user {
	color: hsla(var(--green),var(--text-opacity));
	font-size: 0.6rem;
}
.icon-check-user::before {
	font-family: 'Font Awesome';
	content: '\f00c';
}
.btn-update-values {
	margin-left: 0.5rem;
	padding: 0.4rem !important;
}
.btn-update-values::before {
	font-family: 'Font Awesome';
	content: '\e4a3';
	margin-right: 0.5rem;
}
.slash {
	display: inline-block;
	opacity: 0.4;
	margin: 0 0.5rem;
}
/* **************************************************
CHECKPOINT-BADGE
************************************************** */
.cp-badge {
	display: inline-block;
	padding: 0.3rem 0.5rem 0.3rem 1rem;
	clip-path: polygon(0 0, 100% 0%, 100% 100%, 20% 100%);
	color: hsla(var(--main),var(--text-opacity));
	font-size: var(--plain-font-size);
	text-shadow: 1px 1px 2px hsla(var(--alt-front),0.4), 0.1rem 0.1rem 0.2rem hsla(var(--alt-front),0.4);
	border-top-right-radius: var(--corner);
	border-bottom-right-radius: var(--corner);
	letter-spacing: var(--double-spacing);
	font-family: var(--title-font);
}
.cp-badge.cp-badge-lg {
	font-size: var(--h1-font-size);
	padding: 0.6rem 1rem 0.6rem 2rem;
}
.cp-badge-bronze {
	/*c5b29d 9f8978 fce8cf 847265 a79485 8d7f76*/
	background: linear-gradient(65deg, rgba(197,178,157,1) 0%, rgba(159,137,120,1) 10%, rgba(252,232,207,1) 40%, rgba(132,114,101,1) 70%, rgba(167,148,133,1) 90%, rgba(141,127,118,1) 100%);
}
.cp-badge-silver {
	/*636466 cdcdcf b4bdc4 b6b4b5 f6f6f6 7d7e82*/
	background: linear-gradient(65deg, rgba(99,100,102,1) 0%, rgba(205,205,207,1) 10%, rgba(180,189,196,1) 40%, rgba(182,180,181,1) 70%, rgba(246,246,246,1) 90%, rgba(125,126,130,1) 100%);
}
.cp-badge-gold {
	/*a75317 d99f30 ad691b fee893 d2913d de7d29*/
	background: linear-gradient(65deg, rgba(167,83,23,1) 0%, rgba(217,159,48,1) 10%, rgba(173,105,27,1) 40%, rgba(254,232,147,1) 70%, rgba(210,145,61,1) 90%, rgba(222,125,41,1) 100%);
}
.cp-badge-platinum {
	/*adaeb5 9a9ca0 d1f7f0 c0b5c8 d5d9ea 8d8295*/
	background: linear-gradient(65deg, rgba(173,174,181,1) 0%, rgba(154,156,160,1) 10%, rgba(209,247,240,1) 40%, rgba(192,181,200,1) 70%, rgba(213,217,234,1) 90%, rgba(141,130,149,1) 100%);
}
.bento-card-featured-content:has(.full-badge) p {
	position: relative;
	z-index: 10;
}
.bento-card-featured-content:has(.full-badge-bronze){
	background: linear-gradient(65deg, rgba(197,178,157,0) 0%, rgba(197,178,157,0) 40%, rgba(197,178,157,0.2) 50%, rgba(159,137,120,0.4) 60%, rgba(252,232,207,0.6) 70%, rgba(132,114,101,0.8) 80%, rgba(167,148,133,1) 90%, rgba(141,127,118,1) 100%);
}
.bento-card-featured-content:has(.full-badge-silver){
	background: linear-gradient(65deg, rgba(99,100,102,0) 0%, rgba(99,100,102,0) 40%, rgba(99,100,102,0.2) 50%, rgba(205,205,207,0.4) 60%, rgba(180,189,196,0.6) 70%, rgba(182,180,181,0.8) 80%, rgba(246,246,246,1) 90%, rgba(125,126,130,1) 100%);
}
.bento-card-featured-content:has(.full-badge-gold){
	background: linear-gradient(65deg, rgba(167,83,23,0) 0%, rgba(167,83,23,0) 40%, rgba(167,83,23,0.2) 50%, rgba(217,159,48,0.4) 60%, rgba(173,105,27,0.6) 70%, rgba(254,232,147,0.8) 80%, rgba(210,145,61,1) 90%, rgba(222,125,41,1) 100%);
}
.bento-card-featured-content:has(.full-badge-platinum){
	background: linear-gradient(65deg, rgba(173,174,181,0) 0%, rgba(173,174,181,0) 40%, rgba(173,174,181,0.2) 50%, rgba(154,156,160,0.4) 60%, rgba(209,247,240,0.6) 70%, rgba(192,181,200,0.8) 80%, rgba(213,217,234,1) 90%, rgba(141,130,149,1) 100%);
}
.full-badge {
	position: absolute;
	display: block;
	top: 0;
	right: 0.5rem;
	font-size: 5rem;
	line-height: 5rem;
	font-family: var(--title-font);
	pointer-events: none;
	user-select: none;
	/*color: hsla(var(--main),var(--text-opacity));*/
	color: transparent;
	-webkit-text-stroke: 1px hsla(var(--main),var(--text-opacity));
	opacity: 0.5;
}
/* **************************************************
PAGE-LOGIN
************************************************** */

.page-login {
	width: 100%;
	min-height: 100vh;
	position: relative;
	display: block;
	box-sizing: border-box;
	padding: 2rem;
}
.page-login.page-register {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-content: flex-start;
}
.login-card {
	display: block;
	position: relative;
	width: 100%;
	max-width: 30%;
	min-width: 400px;
	box-sizing: border-box;
	border-radius: var(--corner);
	overflow: hidden;
	/*background: hsla(var(--main-body),var(--bg-opacity-full));*/
	background: linear-gradient(to bottom,  hsl(var(--white)) 0%,hsl(var(--main-body)) 100%);
	box-shadow: var(--drop-shadow-hover);
}
.register-card {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
	position: relative;
	width: 100%;
	max-width: 80%;
	min-width: 400px;
	box-sizing: border-box;
	border-radius: var(--corner);
	overflow: hidden;
	background: hsla(var(--main-body),var(--bg-opacity-full));
	box-shadow: var(--drop-shadow-hover);
}
.register-content {
	width: 100%;
	padding: 1rem;
	box-sizing: border-box;
	text-align: center;
}
.login-card-logo {
	position: relative;
}
.login-card-logo-wrapper {
	position: absolute;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 1rem;
}
.login-card-logo-bg {
	background: hsla(var(--alt),var(--bg-opacity-full));
}
.login-card-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.register-card .login-card-logo {
	padding: 0;
}
.register-card .login-card-logo-wrapper {
	position: relative;
	height: 5rem;
}
.login-card-alert {
	width: 100%;
	display: block;
	padding: 0 1rem;
	box-sizing: border-box;
	margin-bottom: 1rem;
}
.login-card-alert .alert {
	margin-bottom: 0;
}
.login-card-form {
	width: 100%;
	display: block;
	padding: 1rem;
	box-sizing: border-box;
}
.login-card-footer {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-self: flex-end;
	align-items: flex-start;
	width: 100%;
	padding: 1rem;
	box-sizing: border-box;
	font-size: var(--small-font-size);
	background: hsla(var(--alt-front),var(--bg-opacity));
	border-top: 0.1rem solid transparent;
    border-color: hsla(var(--main-highlight),var(--text-opacity));
	color: hsla(var(--main),var(--text-opacity));
}
.card-footer-info {
	opacity: 0.6;
}
.login-card-footer a {
	display: inline-block;
	color: hsla(var(--main),var(--text-opacity-quarter));
}
.login-card-footer a:hover {
	color: hsla(var(--main-highlight),var(--text-opacity));
}
.login-card-footer p {
	display: inline-block;
	padding: 0.1rem 0;
}
.page-login .form-group:first-child {
	margin-bottom: 0;
}
.page-login .login-links {
	width: 100%;
	display: block;
	box-sizing: border-box;
	padding: 0 1rem;
	font-size: var(--plain-font-size);
	margin-bottom: 1rem;
}
.page-login .login-links .btn {
	margin-bottom: 0.5rem;
}
.page-login .login-links ul li {
	list-style-type: none;
}
.page-login .action-links {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
.page-login .action-links a {
	color: hsla(var(--main),var(--text-opacity-half));
}
.page-login .action-links a:hover {
	color: hsla(var(--main),var(--text-opacity-full));
}
.login-background {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -1;
}
.login-background img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.type-form {
	display: flex;
	flex-flow: column wrap;
	align-items: center;
}
.type-form .page-title {
	text-align: center;
}
.type-form .btn-type {
	margin-bottom: 1rem;
}
/* **************************************************
LEADERBOARDS TABLE
************************************************** */
.page-leaderboards {
	box-sizing: border-box;
}
.leaderboards-table {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	background:  hsla(var(--main),var(--bg-opacity-min));
	font-family: var(--title-font);
	letter-spacing: var(--title-spacing);
	font-size: 1.2rem;
	overflow: hidden;
	border-radius: var(--corner);
	margin-bottom: 1rem;
}
.leaderboards-table-entry, 
.leaderboards-table-header {
	position: relative;
	display: flex;
	width: 100%;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: flex-start;
	transition: background 0.3s, color 0.3s;
}
.leaderboards-table-header {
	background: hsla(var(--alt),var(--bg-opacity-full));
	color: hsla(var(--main),var(--text-opacity-full));
}
.leaderboards-table-entry::after {
	position: absolute;
	bottom: 0;
	left: 0.5rem;
	content: '';
	width: calc(100% - 1rem);
	border-bottom: 1px solid transparent;
	border-color: hsla(var(--main),var(--text-opacity-min));
	pointer-events: none;
}
.leaderboards-table-entry:last-child::after {
	border-bottom: none;
}
.leaderboards-table-entry:hover {
	background: hsla(var(--main-highlight),var(--bg-opacity-full));
}
.leaderboards-table-position {
	box-sizing: border-box;
	padding: 0.5rem;
	text-align: right;
	width: 4rem;
}
.leaderboards-table-user {
	box-sizing: border-box;
	padding: 0.5rem;
	width: calc(100% - 10rem);
	white-space: nowrap;
	overflow: hidden;
}
.leaderboards-table-score {
	box-sizing: border-box;
	padding: 0.5rem;
	width: 6rem;
}

/* **************************************************
CALENDAR
************************************************** */
.calendar {
	position: relative;
	width: 100%;
	margin-bottom: 1rem;
	/*max-width: 70vh;*/
}
.calendar-aspect-ratio {
	position: relative;
	padding-bottom: 100%;
}
.calendar-table {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: calc((100% / 7)/2);
	left: 0px;
}
.calendar-header {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	width: 100%;
	height: calc((100% / 7)/2);
	position: absolute;
	box-sizing: border-box;
	padding: 0.2rem;
	margin-bottom: 0.5rem;
}
.calendar-header-select {
	font-family: var(--title-font);
	box-shadow: none;
	min-height: auto;
	line-height: 1.2rem;
	font-size: 1.2rem;
	padding: 0 0.8rem;
	border: none;
	margin-right: 0.2rem;
	background: none;
}
.calendar-header-select:hover,
.calendar-header-select:focus {
	box-shadow: none;
}
.calendar-header-select option {
	font-family: var(--title-font);
}
.calendar-navi-btn {
	padding: 0 0.8rem;
}
.calendar-navi-btn-icon {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	font-family: var(--icon-font); 
	font-size: 1rem;
	line-height: 1rem;
}
.calendar-weekdays {
	display: block;
	width: 100%;
	height: calc((100% / 7)/2);
}
.calendar-weekdays tr {
	display: flex;
	flex-flow: row nowrap;
	width: 100%;
	height: 100%;
}
.calendar-weekdays tr th {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 0;
	background: none;
	border: none;
}
.calendar-weekday-title {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	cursor: pointer;
	background: hsla(var(--alt), var(--bg-opacity-min));
	width: calc(100% - 0.4rem);
	height: calc(100% - 0.4rem);
	border-radius: var(--corner);
	user-select: none;
	font-family: var(--title-font);
	font-size: 1rem;
	color: hsla(var(--main),var(--text-opacity-quarter));
}
.calendar-days {
	display: flex;
	flex-flow: column nowrap;
	width: 100%;
	height: calc((100% / 7) * 6);
}
.calendar-days tr {
	display: flex;
	flex-flow: row nowrap;
	width: 100%;
	height: calc(100% / 6);
}
.calendar-days tr td {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 100%;
	height: 100%;
	padding: 0;
	background: none;
	border: none;
}
.calendar-table th {
	background: none;
}
.calendar-table tr:hover td {
	background: none;
}
.calendar-table tr:hover th {
	background: none;
}
.calendar-table td::after, 
.calendar-table th::after {
	display: none;
}
.calendar-day-label {
	display: flex;
	flex-flow: column nowrap;
	position: relative;
	box-sizing: border-box;
	cursor: pointer;
	background: hsla(var(--main), var(--bg-opacity-min));
	width: calc(100% - 0.4rem);
	max-width: 100%;
	height: calc(100% - 0.4rem);
	border-radius: var(--corner);
	overflow: hidden;
	transition: box-shadow 0.3s, transform 0.3s, color 0.3s, border-color 0.3s, background 0.3s;
	user-select: none;
	box-shadow: var(--drop-shadow-idle);
	color: hsla(var(--main),var(--text-opacity-half));
}
.calendar-day-label:hover {
	box-shadow: var(--drop-shadow-hover);
	transform: translate3d(0px, -1px, 10px);
	color: hsla(var(--main),var(--text-opacity-full));
	border-color: var(--border-color-hover);
	background: var(--bg-hover);
}
.calendar-day {
	display: flex;
	justify-content: center;
	align-items: center;
	border-bottom: 1px solid transparent;
	border-color: hsla(var(--main), var(--border-opacity-min));
	user-select: none;
}
.calendar-day-events {
	display: flex;
	flex-flow: column nowrap;
	overflow-x: scroll;
	position: absolute;
	bottom: 0;
	width: 100%;
	height: calc(100% - 1.2rem);
	box-sizing: border-box;
}
.calendar-day-event {
	width: fit-content;
	font-size: var(--small-font-size);
	white-space: nowrap;
	margin: 0.2rem;
	padding: 0.2rem;
	background: hsla(var(--alt), var(--bg-opacity-min));
	border-radius: var(--corner);
}
.calendar-day-event.calendar-event-icon::before {
	content: "\f055";
	font-family: var(--icon-font); 
	margin: 0 0.3rem 0 0.2rem;
}
.calendar-switch:checked + .calendar-day-label {
	background: hsla(var(--main), var(--bg-opacity-min));
}
.calendar-switch:checked + .calendar-day-label .calendar-day {
	background: hsla(var(--main), 0.3);
}
.calendar-day-events-compact {
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}
.calendar-marker {
	display: inline-block;
	background: hsla(var(--main-highlight), var(--bg-opacity-half));
	padding: 0.1rem 0.4rem;
	border-radius: var(--corner);
	text-align: center;
	font-weight: bold;
	box-sizing: border-box;
	width: fit-content;
}
.event-box-title {
	font-family: var(--title-font);
	letter-spacing: var(--title-spacing);
	font-weight: bold;
	display: block;
	padding: 0.5rem 0;
	text-transform: uppercase;
}
#add-event-form,
.edit-event-form {
	background: hsla(var(--light), var(--bg-opacity-min));
	box-sizing: border-box;
	border-radius: var(--corner);
}
#add-event-form {
	padding: 1rem;
}
.calendar-inline-flex {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
}
.calendar-event-list {
	list-style-type: none;
}
.calendar-event-list li {
	background: hsla(var(--light), var(--bg-opacity-min));
	box-sizing: border-box;
	padding: 1rem;
	border-radius: var(--corner);
	margin-bottom: 0.5rem;
}
.calendar-details-title {
	font-family: var(--title-font);
	letter-spacing: var(--title-spacing);
	font-weight: bold;
	display: block;
	margin-bottom: 0.5rem;
	text-transform: uppercase;
}
.calendar-event-title {
	font-family: var(--title-font);
	letter-spacing: var(--title-spacing);
	text-transform: uppercase;
}
.calendar-event-description {
	font-family: var(--title-font);
	letter-spacing: var(--title-spacing);
	text-transform: uppercase;
}
.calendar-event-list li .edit-form {
	display: none;
}
.calendar-event-list li .calendar-details-wrapper .btn-edit::before {
	content: '';
}
.calendar-event-list li .edit-switch:checked ~ .calendar-details-wrapper .btn-edit::before {
	content: '';
}
.calendar-event-list li .edit-switch:checked ~ .edit-form {
	display: block;
}
.scheduler-upnext-wrapper li {
	display: block;
	padding-bottom: 0.5rem;
	margin-bottom: 0.5rem;
	border-bottom: 1px solid transparent;
	border-color: hsla(var(--light), var(--border-opacity-min));
	font-family: var(--title-font);
	letter-spacing: var(--title-spacing);
	text-transform: uppercase;
}
.scheduler-upnext-wrapper li:last-child {
	border: none;
	margin-bottom: 0;
	padding-bottom: 0;
}
/* **************************************************
SUBSCRIPTION
************************************************** */
.page-subscription {
	width: 100%;
	position: relative;
	display: block;
	box-sizing: border-box;
}
.subscription-wrapper {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-content: center;
	align-items: center;
	position: relative;
	min-height: calc(100vh - 4rem);
}
.subscription-wrapper-triple {
	justify-content: center;
	padding: 2rem;
}
.subscription-triple {
	width: calc(100%/3);
	transition: padding 0.3s;
}
.subscription-header-center {
	text-align: center;
}
.subscription-header {
	width: 100%;
	position: relative;
	box-sizing: border-box;
}
.subscription-column {
	position: relative;
	box-sizing: border-box;
	padding: 2rem;
}
.subscription-column:first-child {
	padding-right: 0;
}
.subscription-main {
	width: 66.6%;
}
.subscription-promo {
	margin-bottom: 1rem;
	color:  hsla(var(--main),var(--text-opacity-full));
}
.subscription-promo h2 {
	font-family: var(--title-font);
	letter-spacing: var(--title-spacing);
	text-transform: uppercase;
	font-size: 3rem;
	font-weight: bold;
}
.subscription-promo p {
	
}
.subscription-aside {
	width: 33.3%;
}
.subscription-card {
	display: block;
	position: relative;
	width: 100%;
	box-sizing: border-box;
	border-radius: var(--corner);
	color:  hsla(var(--alt),var(--text-opacity-full));
	background: hsla(var(--main-body),var(--bg-opacity-full));
	box-shadow: var(--drop-shadow-hover);
	padding: 1rem;
	font-family: var(--title-font);
	letter-spacing: var(--title-spacing);
	text-transform: uppercase;
}
.subscription-card-limit {
	width: 100%;
	max-width: 30rem;
}
.subscription-card-center {
	margin: 0 auto;
}
.subscription-card-title {
	margin-bottom: 1rem;
}
.subscription-card.featured::before {
	content: 'Recomendado';
	display: block;
	position: absolute;
	top: -1rem;
	left: 0;
	box-sizing: border-box;
	padding: 0.1rem 1rem;
	border-radius: var(--corner);
	border: 2px solid transparent;
	border-color: hsla(var(--main-highlight), var(--border-opacity-min));
	background: hsla(var(--main-highlight), var(--border-opacity-min));
	z-index: 5;
	pointer-events: none;
}
.subscription-card.featured::after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 0.2rem 1rem;
	border-radius: var(--corner);
	border: 2px solid transparent;
	border-color: hsla(var(--main-highlight), var(--border-opacity-min));
	pointer-events: none;
}
.subscription-order {
	box-sizing: border-box;
	display: block;
	margin-bottom: 1rem;
}
.subscription-pricing {
	font-size: 1.rem;
	font-weight: bold;
	/*margin-bottom: 1rem;*/
}
.subscription-pricing .pricing-main {
	font-size: 2.5rem;
}
.subscription-pricing .pricing-cents {
	font-size: 2rem;
}
.subscription-pricing-detail {
	display: block;
	margin-bottom: 1rem;
}
.subscription-detail {
	font-size: 0.6rem;
	color:  hsla(var(--gray), var(--bg-opacity-half));
}
.subscription-features {
	list-style-type: none;
	box-sizing: border-box;
	display: block;
	padding: 1rem 0;
}
.subscription-features li {
	display: block;
	box-sizing: border-box;
	padding: 0.25rem;
}
.subscription-features li::before {
	content: '\f00c';
	font-family: var(--icon-font);
	margin-right: 0.5rem;
	color:  hsla(var(--main-highlight), var(--bg-opacity-half));
}
.subscription-accordion {
	list-style-type: none;
}
.subscription-accordion li {
	position: relative;
	border: 2px solid transparent;
	border-color: hsla(var(--gray), var(--border-opacity-min));
	border-radius: var(--corner);
	margin-bottom: 1rem;
	background:  hsla(var(--main), var(--bg-opacity-half));
	overflow: hidden;
}
.subscription-accordion-label {
	position: relative;
	display: block;
	padding: 1rem;
	font-weight: bold;
	cursor: pointer;
}
.subscription-accordion-label::before {
	display: inline-block;
	width: 2rem;
	color:  hsla(var(--gray), var(--bg-opacity-half));
	font-weight: normal;
}
.subscription-accordion-label.icon-credit-card::before {
	font-family: var(--icon-font);
	content: '\f09d';
}
.subscription-accordion-label.icon-pix::before {
	font-family: 'Font Awesome Brands';
	content: '\e43a';
}

.subscription-accordion li:has(.subscription-accordion-wrapper) .subscription-accordion-label::after {
	position: absolute;
	right: 1rem;
	font-family: var(--icon-font);
	content: '\f078';
	transition: transform 0.3s;
	transform: rotateX(180deg);
}
.subscription-accordion li:has(.subscription-accordion-radio:checked) {
	border-color: hsla(var(--alt), var(--border-opacity-min));
}
.subscription-accordion li .subscription-accordion-radio:checked + .subscription-accordion-label {
	background:  hsla(var(--main-highlight), var(--bg-opacity-half));
}
.subscription-accordion li .subscription-accordion-radio:checked + .subscription-accordion-label::before {
	color:  hsla(var(--alt), var(--bg-opacity-half));
}
.subscription-accordion li .subscription-accordion-radio:checked + .subscription-accordion-label::after {
	transform: rotateX(0deg);
}
.subscription-accordion-wrapper {
	max-height: 0;
}
.subscription-accordion li .subscription-accordion-radio:checked ~ .subscription-accordion-wrapper {
	max-height: 4000px;
}
.subscription-form {
	padding: 1rem;
	box-sizing: border-box;
	text-align: left;
}
.subscription-form .select-wrapper::before,
.subscription-form .select-wrapper:hover::before {
	background: transparent;
	color:  hsla(var(--alt), var(--text-opacity-full));
	padding: 0.6rem;
}
.subscription-accordion-info {
	padding: 1rem;
	box-sizing: border-box;
}
.subscription-qrcode-wrapper {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: flex-end;
}
.subscription-qrcode-frame {
	position: relative;
	width: 100%;
	max-width: 500px;
	margin-right: 1rem;
	box-sizing: border-box;
	padding: 1rem;
	border: 2px solid transparent;
	border-color: hsla(var(--alt), var(--border-opacity-min));
	border-radius: var(--corner);
	background: hsla(var(--white), var(--bg-opacity-full));
}
.subscription-qrcode-ratio {
	position: relative;
}
.subscription-qrcode-ratio img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.subscription-qrcode-inline {
	width: 100%;
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-end;
}
.subscription-qrcode-inline .form-group {
	margin-bottom: 0;
}
.subscription-qrcode-value {
	word-break: break-all;
	margin-bottom: 1rem;
}
.subscription-qrcode-copy::before {
	display: inline-block;
	font-family: var(--icon-font);
	content: '\f0c5';
	margin-right: 0.5rem;
}
.subscription-qrcode-refresh::before {
	display: inline-block;
	font-family: var(--icon-font);
	content: '\f021';
	margin-right: 0.5rem;
}
.subscription-qrcode-timing {
	display: block;
	margin-bottom: 1rem;
}
.subscription-qrcode-timer {
	color:  hsla(var(--red), var(--text-opacity-full));
}
.subscription-title {
	font-weight: bold;
	font-size: 3rem;
	text-shadow: 1px 0.3rem 5px rgba(0,0,0,0.1);
}
.title-gold {
	background: linear-gradient(65deg, rgba(167,83,23,1) 0%, rgba(217,159,48,1) 10%, rgba(173,105,27,1) 40%, rgba(254,232,147,1) 70%, rgba(210,145,61,1) 90%, rgba(222,125,41,1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 1px rgba(167,83,23,0.5);
}
.title-silver {
	background: linear-gradient(65deg, rgba(99,100,102,1) 0%, rgba(205,205,207,1) 10%, rgba(180,189,196,1) 40%, rgba(182,180,181,1) 70%, rgba(246,246,246,1) 90%, rgba(125,126,130,1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 1px rgba(99,100,102,0.5);
}
.title-bronze {
	background: linear-gradient(65deg, rgba(197,178,157,1) 0%, rgba(159,137,120,1) 10%, rgba(252,232,207,1) 40%, rgba(132,114,101,1) 70%, rgba(167,148,133,1) 90%, rgba(141,127,118,1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 1px rgba(132,114,101,0.5);
}
.bullet-icon {
	display: flex;
	flex-flow: row nowrap;
	padding: 0.5rem 0;
}
.bullet-icon span {
	display: inline-block;
}
.bullet-icon::before {
	display: inline-block;
	min-width: 2rem;
	height: 100%;
	font-family: var(--icon-font);
	color:  hsla(var(--gray), var(--bg-opacity-half));
}
.icon-qr::before {
	content: '\e799'
}
.icon-app::before {
	content: '\f3cd'
}
.icon-mail::before {
	content: '\f658'
	
}
/* **************************************************
VIEWPORT MEDIA QUERY
************************************************** */
@media all and (min-width: 1201px) {
	
}
@media all and (max-width: 1200px) {
	.subscription-main {
		width: 60%;
	}
	.subscription-aside {
		width: 40%;
	}
	.subscription-triple {
		padding: 1rem;
	}
}
@media all and (max-width: 960px) {
	.page-startup-column {
		width: 100%;
	}
	.page-startup-wrapper {
		flex-flow: column wrap;
		justify-content: flex-start;
	}
	.page-startup-slider-wrapper .page-startup-grid-item {
		grid-column: span 3;
	}
	.fade-hero + div {
		padding-top: calc(42.2% - 4rem);
	}
	.page-startup-column .tilerow-followlist .tilerow-wrapper {
		flex-wrap: nowrap;
	}
	.page-startup-column .tilerow-followlist .tilerow-item {
		flex-basis: auto;
	}
	.bento-column-sm,
	.bento-menu-sm {
		max-width: calc(((100% - 4rem) / 5) * 2 + 2rem);
	}
	.bento-column-lg,
	.bento-menu-lg {
		width: calc(((100% - 4rem) / 5) * 3 + 2rem);
	}
	.bento-card {
		grid-column: span 4;
	}
	.bento-card-extended {
		width: 100%;
	}
	.page-header-alt .header-logo {
		max-width: 30%;
	}
	.subscription-qrcode-wrapper {
		flex-flow: row wrap;
	}
	.subscription-qrcode-frame {
		margin-right: 0;
		margin-bottom: 1rem;
	}
	.subscription-triple {
		padding: 0.5rem;
	}
}
@media all and (max-width: 840px) {
	/*medium*/
	.header-user-info {
		width: 0px;
		pointer-events: none;
	}
	.header-user-metric {
		opacity: 0;
	}
	.page-hub-main {
		width: calc(100% - 2rem);
	}
	.page-hub-aside {
		width: 2rem;
		/*position: absolute;
		top: 0px;
		right: 0px;*/
		transition: width 0.3s;
		overflow-y: hidden;
	}
	.page-hub-aside .hub-container {
		pointer-events: none;
		width: calc(60vw - 2rem);
		opacity: 0;
		transition: width 0.1s linear 0.3s, opacity 0.3s;
	}
	.hub-aside-control span {
		transform: rotateY(180deg);
	}
	.hub-aside-switch:checked ~ .page-hub-aside {
		width: 60vw;
		overflow-y: scroll;
	}
	.hub-aside-switch:checked ~ .page-hub-aside .hub-aside-control span {
		transform: rotateY(0deg);
	}
	.hub-aside-switch:checked ~ .page-hub-aside .hub-container {
		pointer-events: all;
		opacity: 1;
		transition: opacity 0.3s;
	}
	.hub-aside-switch:checked ~ .hub-fade {
		pointer-events: all;
		opacity: 1;
		z-index: 24;
	}
	.page-column {
		grid-column: span 12;
		box-sizing: border-box;
	}
	.page-column:nth-child(2) {
		padding: 1rem;
	}
	.page-body-video {
		padding: 0px;
	}
	.page-wrapper {
		padding: 0px 1rem;
	}
	.page-body-video .page-media::before {
		border-color: transparent;
		border-bottom-color: hsla(var(--main),var(--text-opacity-quarter));
	}
	td, th {
		padding: 0.1rem 0.3rem;
	}
	.tilerow-followlist .tilerow-item:nth-child(n+10):nth-child(-n+11) {
		display: none;
	}
	.subscription-wrapper-triple {
		justify-content: center;
		align-items: flex-end;
	}
	.subscription-triple {
		width: 50%;
		padding: 1rem;
	}
}
@media all and (max-width: 720px) {
	table {
		font-size: 0.7rem;
	}
	.page-startup-slider-wrapper .page-startup-grid-item {
		grid-column: span 4;
	}
	.fade-hero + div {
		padding-top: calc(42.2% - 2rem);
	}
	.tilerow-followlist .tilerow-item:nth-child(n+8):nth-child(-n+11) {
		display: none;
	}
	.bento-menu-wrapper {
		display: none;
	}
	.bento-wrapper-compact.bento-menu-wrapper {
		margin-bottom: 0;
		display: block;
	}
	.bento-wrapper-compact .bento-menu-sm {
		display: none;
	}
	.bento-wrapper-compact .bento-menu-lg {
		width: 100%;
	}
	.bento-card-extended {
		grid-column: span 12;
		max-width: 100%;
	}
	.bento-card-featured {
		/*margin-bottom: 0.8rem;*/
	}
	.bento-card-featured .bento-card-wrapper {
		padding-bottom: calc((100% - 1rem) / 4);
	}
	.bento-row {
		padding: 0;
	}
	.bento-wrapper-compact .bento-column-sm,
	.bento-wrapper-compact .bento-column-lg {
		width: 100%;
		max-width: 100%;
	}
	.bento-wrapper-compact .bento-card-featured .bento-card-wrapper {
		padding-bottom: 56.25%;
	}
	.bento-row .bento-card-featured .bento-card-wrapper {
		padding-bottom: 0;
	}
	.bento-wrapper {
		flex-flow: row wrap;
	}
	/*.bento-wrapper:first-child {*/
	.bento-wrapper {
		padding-top: 1rem;
	}
	.bento-column-sm {
		width: 100%;
		max-width: 560px;
		margin-bottom: 0.8rem;
	}
	.bento-column-lg {
		width: 100%;
		max-width: 560px;
		margin-bottom: 0.8rem;
	}
	.bento-column-lg .bento-card-extended .aspect-ratio {
		padding: 0;
	}
	.bento-column-lg .bento-card-featured-content {
		position: relative;
	}
	.bento-wrapper-compact.bento-wrapper-compact-reverse {
		flex-flow: row-reverse wrap;
	}
	/*.bento-wrapper-compact-reverse .bento-column-lg {
		align-self: flex-end;
	}
	.bento-wrapper-compact-reverse .bento-column-sm {
		align-self: flex-start;
	}*/
	.header-logo {
		margin-left: 0;
	}
	.header-buttons {
		margin-right: 0.5rem;
	}
	.page-main {
		grid-column: span 12;
	}
	.page-sidebar {
		grid-column: span 12;
	}
	.card-option {
		grid-column: span 6;
	}
	.subscription-main {
		width: 100%;
	}
	.subscription-aside {
		width: 100%;
	}
	.subscription-column:first-child {
		padding-right: 2rem;
		padding-bottom: 0;
	}
	.promo-image-wrapper {
		width: 100%;
		padding-top: 2rem;
	}
	.promo-image-wrapper img {
		max-width: 70%;
		margin: 0 15%;
	}
	.promo-content-wrapper {
		width: 100%;
	}
}
@media all and (max-width: 600px) {
	#wpadminbar {
		display: none !important;
		opacity: 0;
		pointer-events: none;
	}
	html {
		--wp-admin--admin-bar--height: 0;
		margin-top: 0 !important;
	}
	.subscription-triple {
		width: 100%;
	}
}
@media all and (max-width: 540px) {
	body:has(.page-header) {
		padding-top: 4rem;
	}
	.page-header {
		position: fixed;
		top: 0px;
		left: 0px;
		background: hsla(var(--alt-front),var(--bg-opacity-full));
		box-shadow: 0px 0px 6px 0px hsla(var(--black),0.4);
	}
	.page-header-alt .header-logo {
		max-width: 60%;
		width: 60%;
	}
	.header-button-menu {
		max-width: 2rem;
		margin-right: 0.5rem;
		pointer-events: all;
	}
	.header-nav li {
		display: block;
	}
	.header-menu {
		position: fixed;
		max-width: 0px;
		height: calc(100vh - 4rem);
		top: 4rem;
		right: 0px;
		z-index: 40;
		background: hsla(var(--alt-front),var(--bg-opacity-half));
		backdrop-filter: blur(3px);
		-webkit-backdrop-filter: blur(3px);
		box-shadow: 0px 0px 6px 0px hsla(var(--black),0.2);
		transition: max-width 0.6s;
		overflow: hidden;
		overflow-y: scroll;
	}
	.page-header-alt .header-menu {
		height: calc(100vh - 3.2rem);
		top: 3.2rem;
	}
	.switch-guide-menu:checked ~ .header-menu {
		max-width: 12rem;
	}
	.header-menu .header-nav {
		flex-flow: column nowrap;
	}
	.header-menu .header-nav li a {
		display: block;
		padding: 0.5rem 1rem;
		white-space: nowrap;
	}
	.header-menu .header-nav li a::before {
		opacity: 0;
	}
	.header-menu .header-nav li .sub-menu {
		display: inline-block;
		position: relative;
		/*top: 100%;
		right: 0px;*/
		opacity: 1;
		pointer-events: all;
		transition: opacity 0.3s;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: transparent;
	}
	.header-menu .header-nav li .sub-menu li {
		display: block;
	}
	.header-menu .header-nav li .sub-menu a {
		display: block;
		padding: 0.5rem 1rem;
		margin-left: 1rem;
		min-width: auto;
		text-align: left;
	}
	.page-hub-main .card-hub, 
	.page-hub-main .card-medium, 
	.page-hub-main .banner-wrapper {
		grid-column: span 12;
	}
	.page-hub-main .slideshow-wrapper {
		/*padding-bottom: 42.2%;*/
		padding-bottom: 56.25%;
	}
	.page-hub-aside .hub-container {
		width: calc(80vw - 2rem);
	}
	.hub-aside-switch:checked ~ .page-hub-aside {
		width: 80vw;
	}
	.page-main {
		grid-column: span 12;
	}
	.page-sidebar {
		grid-column: span 12;
	}
	.page-sidebar > div.list {
		grid-column: span 1;
	}
	.page-startup-slider-wrapper .page-startup-grid-item {
		grid-column: span 6;
	}
	.tilerow-followlist .tilerow-item:nth-child(n+6):nth-child(-n+11) {
		display: none;
	}
	.page-bento {
		padding-top: 0;
	}
	.bento-card-featured .bento-card-wrapper {
		padding-bottom: calc((100% - 1rem) / 3);
	}
	.card-option {
		grid-column: span 12;
	}
	.page-login {
	}
	.login-card {
		max-width: 100%;
	}
}
@media all and (max-width: 460px) {
	/*small*/
	.bento-card-featured .bento-card-wrapper {
		padding-bottom: calc((100% - 1rem) / 2);
	}
	.bento-card {
		grid-column: span 6;
	}
	.bento-card-extended {
		grid-column: span 12;
	}
	.page-login {
		padding: 0;
	}
	.login-card {
		max-width: 100%;
		min-width: auto;
	}
}
@media all and (min-aspect-ratio: 21/9) {
	/*max-aspect-ratio aspect-ratio*/
}