/* BASICS */
.clearfix::after,
.container::after {
	display: block;
	content: '';
	clear: both;
}
.clear {
	clear: both;
}
.backdrop-blur {
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}
.aspect-ratio {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	overflow: hidden;
	box-sizing: border-box;
}
.aspect-ratio > img, 
.aspect-ratio > a, 
.aspect-ratio > video,
.aspect-ratio > iframe, 
.aspect-ratio > figure {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0px;
	left: 0px;
}
.aspect-ratio > figure img, 
.aspect-ratio > a img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.aspect-ratio-ultrawide {
	padding-bottom: 42.2%;
}
.aspect-ratio-square {
	padding-bottom: 100%;
}
.hover-zoom img {
	transform: scale(1, 1);
	transition: transform 0.3s;
}
.hover-zoom:hover img {
	transform: scale(1.05, 1.05);
}
/* GENERAL */
.general-wrapper {
	width: 100%;
	box-sizing: border-box;
	max-width: 60rem;
	padding: 0px 1rem;
	margin: 0px auto;
}
.general-title {
	display: block;
	box-sizing: border-box;
	font-size: var(--h3-font-size);
	line-height: var(--h3-line-height);
	font-family: var(--title-font);
	letter-spacing: var(--title-spacing);
	text-transform: uppercase;
	color: hsla(var(--main),var(--text-opacity));
	border-bottom: 1px solid transparent;
	border-color: var(--border-color-min);
	margin-bottom: 0.5rem;
	font-weight: normal;
}
.general-title.subtitle {
	font-size: var(--plain-font-size);
	font-family: var(--title-font);
	letter-spacing: var(--title-spacing);
}
.slideshow .general-title {
	padding-right: 7rem;
}
/* FRAME */
.frame-border {
	position: relative;
	box-sizing: border-box;
	background-clip: border-box;
	border-radius: var(--corner);
}
.frame-border::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-idle);
	pointer-events: none;
	z-index: 20;
	border-radius: var(--corner);
}
.frame-empty::before {
	content: ' ';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	box-sizing: border-box;
	border: 0.1rem solid transparent;
	pointer-events: none;
	z-index: 20;
	transition: border-color 0.3s;
	clip-path: polygon(0% 10%, 10% 10%, 10% 0%, 90% 0%, 90% 10%, 100% 10%, 100% 90%, 90% 90%, 90% 100%, 10% 100%, 10% 90%, 0% 90%, 0% 10%, 0% 100%, 100% 100%, 100% 0%, 0% 0%);
	border-color: hsla(var(--alt),var(--border-opacity-min));
	border-radius: var(--corner);
}
.frame-empty:hover::before {
	border-color: hsla(var(--alt),0.2);
}
.frame-hover {
	transition: box-shadow 0.3s, transform 0.3s, color 0.3s;
	user-select: none;
	box-shadow: var(--drop-shadow-idle);
}
.frame-hover:hover {
	box-shadow: var(--drop-shadow-hover);
	transform: translate3d(0px, -1px, 10px);
}
.frame-hover::before {
	transition: border-color 0.3s, background 0.3s;
}
.frame-hover:hover::before {
	border-color: var(--border-color-hover);
}
.frame-shadow {
	box-shadow: var(--drop-shadow-hover);
}
.frame-outline, 
.frame-outline-hidden {
	position: relative;
	box-sizing: border-box;
	background-clip: border-box;
	border: none !important;
	transition: background 0.3s, box-shadow 0.3s, color 0.3s, transform 0.3s;
	border-radius: var(--corner);
}
.frame-outline:hover, 
.frame-outline-hidden:hover {
	box-shadow: none !important;
	transform: translate3d(0px, -1px, 10px);
}
.frame-outline::before, 
.frame-outline-hidden::before {
	border: none !important;
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transition: background 0.3s, box-shadow 0.3s;
	border-radius: var(--corner);
}
.frame-outline::before {
	 box-shadow: inset 0 0 0 1px var(--border-color-idle);
}
.frame-outline::after, 
.frame-outline-hidden::after {
	border: none !important;
    content: '';
    position: absolute;
    z-index: 3;
    pointer-events: none;
    box-shadow: 0 0 0 2px var(--border-color-null);
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	padding: 0.5rem;
	transform: translate(-50%, -50%);
	transform-origin: center;
    transition: box-shadow 0.3s, padding 0.3s;
	border-radius: var(--corner);
}
.frame-outline:hover::after, 
.frame-outline-hidden:hover::after {
	border: none;
    box-shadow: 0 0 0 2px var(--border-color-hover);
    z-index: 4;
	padding: 0.1rem;
}
.frame-outline:hover::before, 
.frame-outline-hidden:hover::before {
	border: none;
    box-shadow: inset 0 0 0 1px var(--border-color-hover);
    background: var(--bg-min);
}
.frame-outline-alt:hover::before {
	box-shadow: inset 0 0 0 1px var(--border-color-null);
}
/* ALERT */
.page-alert {
	display: none;
	position: fixed;
	width: 100%;
	top: 0px;
	left: 0px;
	pointer-events: none;
	z-index: 90;
}
.alert {
	position: relative;
	box-sizing: border-box;
	margin-bottom: 1rem;
	border-radius: var(--corner);
	color: hsla(var(--main),var(--text-opacity));
	font-size: var(--plain-font-size);
	line-height: var(--plain-line-height);
	pointer-events: all;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}
.alert-wrapper {
	box-sizing: border-box;
	padding: 1rem;
}
.alert a {
	color: hsla(var(--main),var(--text-opacity-half));
	font-weight: bold;
}
.alert a:hover {
	color: hsla(var(--main),var(--text-opacity-full));
}
.alert hr {
	margin-top: 1rem;
	margin-bottom: 1rem;
	border: 0;
	border-top: 1px solid transparent;
	border-color: var(--border-color-min);
}
.alert .close {
	float: right;
	border: none;
	background: transparent;
	width: 1rem;
	height: 1rem;
	text-align: center;
	font-size: var(--plain-font-size);
	cursor: pointer;
	color: hsla(var(--main),var(--text-opacity-quarter));
	transition: color 0.3s;
}
.alert .close:hover {
	color: hsla(var(--main),var(--text-opacity));
}
.alert .close span::before {
	font-family: var(--icon-font);
	content: '\f00d';
}
.alert-heading {
	display: block;
	font-size: var(--h3-font-size);
	line-height: var(--h3-line-height);
	color: hsla(var(--main),var(--text-opacity-full));
	font-family: var(--title-font);
	font-weight: normal;
}
.alert-primary {
	background: hsla(var(--main),var(--bg-opacity-min));
}
.alert-secondary {
	background: hsla(var(--alt),var(--bg-opacity-min));
}
.alert-success {
	background: hsla(var(--green),var(--bg-opacity-quarter));
}
.alert-danger {
	background: hsla(var(--red),var(--bg-opacity-quarter));
}
.alert-warning {
	background: hsla(var(--yellow),var(--bg-opacity-quarter));
}
.alert-info {
	background: hsla(var(--cyan),var(--bg-opacity-quarter));
}
.alert-light {
	background: hsla(var(--white),var(--bg-opacity-quarter));
}
.alert-dark {
	background: hsla(var(--black),var(--bg-opacity-quarter));
}
/* BUTTONS */
.btn {
	position: relative;
	box-sizing: border-box;
	padding: var(--form-input-padding);
	color: hsla(var(--main),var(--text-opacity-half));
	font-family: var(--title-font);
	letter-spacing: var(--title-spacing);
	text-transform: uppercase;
	font-size: var(--h4-font-size);
	line-height: var(--h1-line-height);
	/*text-box: cap alphabetic;*/
	display: inline-block;
	font-weight: normal;
	text-align: center;
	vertical-align: middle;
	background: var(--bg-idle);
	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, background 0.3s;
	user-select: none;
	cursor: pointer;
	box-shadow: var(--drop-shadow-idle);
	border-radius: var(--corner);
}
.btn: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);
}
.btn-outline {
	position: relative;
	box-sizing: border-box;
	padding: var(--form-input-padding);
	color: hsla(var(--main),var(--text-opacity-half));
	font-family: var(--title-font);
	letter-spacing: var(--title-spacing);
	text-transform: uppercase;
	font-size: var(--h4-font-size);
	line-height: var(--h1-line-height);
	display: inline-block;
	font-weight: normal;
	text-align: center;
	vertical-align: middle;
	background: hsla(var(--alt-front),0);
	border: 1px solid transparent;
	border-color: var(--border-color-idle);
	transition: box-shadow 0.3s, transform 0.3s, opacity 0.3s, background 0.3s;
	user-select: none;
	cursor: pointer;
	box-shadow: var(--drop-shadow-idle);
	opacity: 0.6;
	border-radius: var(--corner);
}
.btn-outline:hover {
	box-shadow: var(--drop-shadow-hover);
	transform: translate3d(0px, -1px, 10px);
	background: var(--bg-min);
	opacity: 1;
}
.btn-primary {
	background: var(--bg-min);
}
.btn-secondary {
	background: hsla(var(--alt-front),var(--bg-opacity-min));
}
.btn-success {
	background: hsla(var(--green),var(--bg-opacity-quarter));
}
.btn-danger {
	background: hsla(var(--red),var(--bg-opacity-quarter));
}
.btn-warning {
	background: hsla(var(--yellow),var(--bg-opacity-quarter));
}
.btn-info {
	background: hsla(var(--cyan),var(--bg-opacity-quarter));
}
.btn-light {
	background: hsla(var(--white),var(--bg-opacity-quarter));
}
.btn-dark {
	background: hsla(var(--black),var(--bg-opacity-quarter));
}
.btn-highlight {
	background: hsla(var(--main-highlight),var(--bg-opacity-quarter));
}
.btn-outline-primary {
	color: hsla(var(--main-front),var(--text-opacity));
	border-color: hsla(var(--main-front),var(--bg-opacity-quarter));
}
.btn-outline-secondary {
	color: hsla(var(--alt-front),var(--text-opacity));
	border-color: hsla(var(--alt-front),var(--bg-opacity-quarter));
}
.btn-outline-success {
	color: hsla(var(--green),var(--text-opacity-full));
	border-color: hsla(var(--green),var(--border-opacity-half));
}
.btn-outline-danger {
	color: hsla(var(--red),var(--text-opacity-full));
	border-color: hsla(var(--red),var(--border-opacity-half));
}
.btn-outline-warning {
	color: hsla(var(--yellow),var(--text-opacity-full));
	border-color: hsla(var(--yellow),var(--border-opacity-half));
}
.btn-outline-info {
	color: hsla(var(--cyan),var(--text-opacity-full));
	border-color: hsla(var(--cyan),var(--border-opacity-half));
}
.btn-outline-light {
	color: hsla(var(--white),var(--text-opacity-full));
	border-color: hsla(var(--white),var(--border-opacity-half));
}
.btn-outline-dark {
	color: hsla(var(--black),var(--text-opacity-full));
	border-color: hsla(var(--black),var(--border-opacity-half));
}
.btn-outline-highlight {
	color: hsla(var(--main-highlight),var(--text-opacity-full));
	border-color: hsla(var(--main-highlight),var(--border-opacity-half));
}
.btn-lg {
	padding: 1.2rem 2.4rem;
	font-size: var(--h4-font-size);
	line-height: var(--h4-line-height);
}
.btn-sm {
	padding: 0.3rem 0.6rem;
	font-size: var(--small-font-size);
	line-height: var(--small-line-height);
}
.btn-block {
	display: block;
	width: 100%;
}
.btn:disabled, 
.btn-outline:disabled,
.btn.disabled {
	opacity: 0.4;
	border-color: var(--border-color-idle);
	pointer-events: none;
}
.btn-loading {
	pointer-events: none;
	position: relative;
	opacity: 0.6;
	overflow: hidden;
	color: hsla(var(--main),0);
}
.btn-loading::before {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	top: 0;
	left: 0;
	content: '\f110';
	font-family: var(--icon-font);
	font-size: var(--h2-font-size);
	color: hsla(var(--main),var(--text-opacity-full));
	animation: loading-spin 2s infinite linear;
}
.form-bracket .btn {
	font-size: var(--plain-font-size);
}
.btn-icon {
	font-family: var(--icon-font);
}
@keyframes loading-spin {
	0% {
		transform: rotateZ(0deg);
	}
	100% {
		transform: rotateZ(360deg);
	}
}
/* BREADCRUMB */
.breadcrumb-wrapper {
	padding: 0.5rem 1rem;
	box-sizing: border-box;
}
.breadcrumb-absolute {
	position: absolute;
	z-index: 30;
	mix-blend-mode: difference;
}
.breadcrumb {
	display: block;
	padding: 0px;
	margin-bottom: 0.5rem;
	list-style: none;
	color: hsla(var(--main),var(--text-opacity-half));
	border-radius: 0px;
	border-bottom: 1px solid transparent;
	border-color: var(--border-color-idle);
	font-size: var(--small-font-size);
	line-height: var(--small-line-height);
	text-transform: uppercase;
}
.breadcrumb-wrapper .breadcrumb {
	margin-bottom: 0px;
}
.breadcrumb::before {
	font-family: var(--icon-font);
	content: '\f02e';
	font-size: var(--small-font-size);
}
.breadcrumb a {
	color: hsla(var(--main),var(--text-opacity-quarter));
}
.breadcrumb a:hover {
	color: hsla(var(--main),var(--text-opacity));
}
.breadcrumb-item {
	display: inline-block;
}
.breadcrumb-item::after {
	content: ' / ';
}
.breadcrumb-item:last-child::after {
	content: '';
}
/* FORMS */
input[type='text'], 
input[type='number'], 
input[type='email'], 
input[type='password'],
input[type='date'],
input[type='time'],
input[type='datetime-local'],
input[type='month'],
input[type='week'],
input[type='tel'] {
	font-family: var(--plain-font);
	display: block;
	box-shadow: var(--inner-shadow-idle);
	background: var(--bg-min);
	color: hsla(var(--main),var(--text-opacity));
	min-height: 2rem;
	line-height: var(--h1-line-height);
	font-size: var(--plain-font-size);
	box-sizing: border-box;
	padding: var(--form-input-padding);
	border: 1px solid transparent;
	border-color: var(--border-color-idle);
	transition: color 0.3s, box-shadow 0.3s, border-color 0.3s, background 0.3s;
	width: 100%;
	border-radius: var(--corner);
}
input[type='password'] {
	font-family: var(--title-font);
	letter-spacing: var(--double-spacing);
}
input::-webkit-calendar-picker-indicator {
	position: absolute;
	right: 1rem;
	width: 1.6rem;
	height: 1.6rem;
	cursor: pointer;

}
input[type='color'] {
	display: block;
	box-shadow: var(--inner-shadow-idle);
	background: var(--bg-min);
	color: hsla(var(--main),var(--text-opacity));
	box-sizing: border-box;
	border: 1px solid transparent;
	border-color: var(--border-color-idle);
	transition: color 0.3s, box-shadow 0.3s, border-color 0.3s, background 0.3s;
	border-radius: var(--corner);
	padding: 0.2rem;
	height: 3.2rem;
	width: 5rem;
	cursor: pointer;
}
input[type='color']::-webkit-color-swatch {
	border-radius: 0.3rem;
	height: 100%;
}
input[type='text']:read-only, 
input[type='number']:read-only, 
input[type='email']:read-only, 
input[type='password']:read-only,
input[type='date']:read-only,
input[type='time']:read-only,
input[type='datetime-local']:read-only,
input[type='month']:read-only,
input[type='week']:read-only,
input[type='tel']:read-only {
	opacity: 0.4;
}
input.disabled {
	opacity: 0.4;
	pointer-events: none;
}
textarea {
	font-family: var(--plain-font);
	display: block;
	box-shadow: var(--inner-shadow-idle);
	background: var(--bg-min);
	color: hsla(var(--main),var(--text-opacity));
	min-height: 2rem;
	line-height: auto;
	font-size: var(--plain-font-size);
	box-sizing: border-box;
	padding: var(--form-input-padding);
	border: 1px solid transparent;
	border-color: var(--border-color-idle);
	transition: color 0.3s, box-shadow 0.3s, border-color 0.3s, background 0.3s;
	width: 100%;
	resize: none;
	border-radius: var(--corner);
}
.textarea-wrapper {
	box-shadow: var(--inner-shadow-idle);
	background: var(--bg-min);
	min-height: 2rem;
	box-sizing: border-box;
	padding: var(--form-input-padding);
	border: 1px solid transparent;
	border-color: var(--border-color-idle);
	transition: color 0.3s, box-shadow 0.3s, border-color 0.3s, background 0.3s;
	border-radius: var(--corner);
}
.textarea-wrapper textarea {
	box-shadow: none;
	background: transparent;
	min-height: 1rem;
	padding: 0px;
	border: none;
	border-color: transparent;
	transition: none;
}
select {
	font-family: var(--plain-font);
	display: block;
	box-shadow: var(--inner-shadow-idle);
	background: var(--bg-min);
	color: hsla(var(--main),var(--text-opacity));
	min-height: 2rem;
	line-height: var(--h1-line-height);
	font-size: var(--plain-font-size);
	box-sizing: border-box;
	padding: var(--form-input-padding);
	padding-right: 1.5rem;
	border: 1px solid transparent;
	border-color: var(--border-color-idle);
	transition: color 0.3s, box-shadow 0.3s, border-color 0.3s, background 0.3s;
	width: 100%;
	cursor: pointer;
	border-radius: var(--corner);
}
option {
	font-family: var(--plain-font);
	color: hsla(var(--alt),var(--text-opacity));
}
input[type='text']:disabled, 
input[type='number']:disabled, 
input[type='email']:disabled, 
input[type='password']:disabled,
input[type='date']:disabled,
input[type='time']:disabled,
input[type='datetime-local']:disabled,
input[type='month']:disabled,
input[type='week']:disabled,
input[type='tel']:disabled,
textarea:disabled, 
select:disabled {
	opacity: 0.4;
	cursor: auto;
}
.select-wrapper {
	position: relative;
}
.select-wrapper::before {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	box-sizing: border-box;
	padding: var(--form-input-padding);
	height: 100%;
	line-height: 2rem;
	text-align: center;
	position: absolute;
	background: var(--bg-idle);
	border: 1px solid transparent;
	border-color: var(--border-color-idle);
	font-family: var(--icon-font);
	content: '\f078';
	font-size: var(--plain-font-size);
	color: hsla(var(--main),var(--text-opacity-half));
	transition: color 0.3s, background 0.3s;
	pointer-events: none;
	user-select: none;
	top: 0px;
	right: 0px;
	border-top-right-radius: var(--corner);
	border-bottom-right-radius: var(--corner);
}
.select-wrapper:hover::before {
	background: var(--bg-hover);
	color: hsla(var(--main),var(--text-opacity-full));
}
.select-inline {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
}
.select-inline .select-wrapper,
.select-inline .input-wrapper {
	flex-grow: 1;
	min-width: 5rem;
}
.select-inline .select-wrapper:not(:last-child), 
.select-inline .input-wrapper:not(:last-child){
	margin-right: 0.5rem;
}
select.hidden-input,
button.hidden-input {
	display: none;
}
input[type='text']:hover, 
input[type='text']:focus, 
.form-group:hover input[type='text'], 
input[type='number']:hover, 
input[type='number']:focus, 
.form-group:hover input[type='number'], 
input[type='email']:hover, 
input[type='email']:focus, 
.form-group:hover input[type='email'], 
input[type='password']:hover, 
input[type='password']:focus, 
.form-group:hover input[type='password'],
input[type='date']:hover, 
input[type='date']:focus, 
.form-group:hover input[type='date'],
input[type='time']:hover, 
input[type='time']:focus, 
.form-group:hover input[type='time'],
input[type='datetime-local']:hover, 
input[type='datetime-local']:focus, 
.form-group:hover input[type='datetime-local'],
input[type='month']:hover, 
input[type='month']:focus, 
.form-group:hover input[type='month'],
input[type='week']:hover, 
input[type='week']:focus, 
.form-group:hover input[type='week'],
input[type='tel']:hover, 
input[type='tel']:focus, 
.form-group:hover input[type='tel'], 
textarea:hover,
textarea:focus,
.form-group:hover textarea, 
.textarea-wrapper:hover, 
.textarea-wrapper:focus-within, 
.form-group:hover .textarea-wrapper,
select:hover, 
select:focus, 
.form-group:hover select {
	border-color: var(--border-color-hover);
	box-shadow: var(--inner-shadow-hover);
	background: var(--bg-idle);
}
.textarea-wrapper textarea:hover,
.textarea-wrapper textarea:focus,
.form-group:hover .textarea-wrapper textarea {
	border-color: transparent;
	box-shadow: none;
	background: transparent;
} 

input[type='text'].featured, 
input[type='number'].featured, 
input[type='email'].featured, 
input[type='password'].featured,
input[type='date'].featured,
input[type='time'].featured,
input[type='datetime-local'].featured,
input[type='month'].featured,
input[type='week'].featured,
input[type='tel'].featured, 
textarea.featured, 
select.featured {
	font-family: var(--title-font);
	text-transform: uppercase;
	letter-spacing: var(--title-spacing);
	font-size: var(--plain-font-size);
}
.form-bracket {
	display: flex;
	position: relative;
	flex-flow: row-reverse nowrap;
	justify-content: flex-start;
	border-radius: var(--corner);
	overflow: hidden;
	box-shadow: var(--drop-shadow-idle);	
	transition: box-shadow 0.3s, transform 0.3s;
}
.form-bracket:hover {
	box-shadow: var(--drop-shadow-hover);
	transform: translate3d(0px, -1px, 10px);
}
.form-bracket input[type='text'], 
.form-bracket input[type='number'], 
.form-bracket input[type='email'], 
.form-bracket input[type='password'],
.form-bracket input[type='date'],
.form-bracket input[type='time'],
.form-bracket input[type='datetime-local'],
.form-bracket input[type='month'],
.form-bracket input[type='week'],
.form-bracket input[type='tel'] {
	font-family: var(--title-font);
	letter-spacing: var(--title-spacing);
	font-size: var(--plain-font-size);
	line-height: var(--h1-line-height);
	display: inline-block;
	width: auto;
	border-radius: 0px;
	flex-grow: 1;
	border: 1px solid transparent;
	border-right: none;
	border-color: var(--border-color-idle);
	border-top-left-radius: var(--corner);
	border-bottom-left-radius: var(--corner);
}
.form-bracket .btn {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	border-radius: 0px;
	box-shadow: none;
}
.form-bracket .btn:hover {
	transform: none;
	box-shadow: none;
}
select::-ms-expand {
    display: none;
}
::-webkit-input-placeholder {
	color: hsla(var(--main),var(--text-opacity-quarter));
}
:-moz-placeholder {
	color: hsla(var(--main),var(--text-opacity-quarter));
	opacity: 1;
}
::-moz-placeholder {
	color: hsla(var(--main),var(--text-opacity-quarter));
	opacity: 1;
}
:-ms-input-placeholder {
	color: hsla(var(--main),var(--text-opacity-quarter));
}
::-ms-input-placeholder {
	color: hsla(var(--main),var(--text-opacity-quarter));
}
:placeholder-shown {
	color: hsla(var(--main),var(--text-opacity-quarter));
}
/* RANGE */
input[type='range'] {
	background: var(--bg-min);
	width: 100%;
	transition: opacity 0.3s, background 0.3s;
	margin: 1rem 0px;
	border-radius: var(--corner);
}
input[type='range']:hover {
	background: var(--bg-idle);
}
input[type='range']::-webkit-slider-runnable-track {
	width: 100%;
	height: 0.6rem;
	cursor: pointer;
	background: var(--bg-min);
	border: 1px solid transparent;
	border-color: var(--border-color-idle);
	transition: background 0.3s, border 0.3s;
	-webkit-appearance: none;
	box-sizing: border-box;
	border-radius: var(--corner);
}
input[type='range']:hover::-webkit-slider-runnable-track, 
input[type='range']:focus::-webkit-slider-runnable-track {
	background: hsla(var(--main-front),0);
	border-color: var(--border-color-hover);
	border-radius: var(--corner);
}
input[type='range']::-webkit-slider-thumb {
	height: 2rem;
	width: 1rem;
	background: hsla(var(--main-front),var(--bg-opacity-half));
	border: 1px solid transparent;
	border-color: var(--border-color-hover);
	box-shadow: var(--drop-shadow-idle);
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -0.8rem;
	transition: background 0.3s, box-shadow 0.3s ease-out, transform 0.3s ease-out, color 0.3s, border 0.3s;
	border-radius: var(--corner);
}
input[type='range']:hover::-webkit-slider-thumb, 
input[type='range']:focus::-webkit-slider-thumb {
	background: hsla(var(--main-front),var(--bg-opacity));
	box-shadow: var(--drop-shadow-hover);
	transform: translate3d(0px, -1px, 10px);
	border-radius: var(--corner);
}
input[type='range']::-moz-range-track {
	width: 100%;
	height: 0.6rem;
	cursor: pointer;
	background: var(--bg-min);
	border: 1px solid transparent;
	border-color: var(--border-color-idle);
	transition: background 0.3s, border 0.3s;
	box-sizing: border-box;
	border-radius: var(--corner);
}
input[type='range']:hover::-moz-range-track, 
input[type='range']:focus::-moz-range-track {
	background: hsla(var(--main-front),0);
	border-color: var(--border-color-hover);
	border-radius: var(--corner);
}
input[type='range']::-moz-range-thumb {
	height: 2rem;
	width: 1rem;
	background: hsla(var(--main-front),var(--bg-opacity-half));
	border: 1px solid transparent;
	border-color: var(--border-color-hover);
	box-shadow: var(--drop-shadow-idle);
	cursor: pointer;
	margin-top: -0.8rem;
	transition: background 0.3s, box-shadow 0.3s ease-out, transform 0.3s ease-out, color 0.3s, border 0.3s;
	border-radius: var(--corner);
}
input[type='range']:hover::-moz-range-thumb, 
input[type='range']:focus::-moz-range-thumb {
	background: hsla(var(--main-front),var(--bg-opacity));
	box-shadow: var(--drop-shadow-hover);
	transform: translate3d(0px, -1px, 10px);
	border-radius: var(--corner);
}
input[type='range']::-ms-track {
	width: 100%;
	height: 0.6rem;
	cursor: pointer;
	background: hsla(var(--white),var(--bg-opacity-min));
	border: 1px solid transparent;
	border-color: var(--border-color-idle);
	transition: background 0.3s, border 0.3s;
	box-sizing: border-box;
	border-radius: var(--corner);
}
input[type='range']:hover::-ms-track, 
input[type='range']:focus::-ms-track {
	background: hsla(var(--white),0);
	border: 1px solid transparent;
	border-color: var(--border-color-hover);
	border-radius: var(--corner);
}
input[type='range']::-ms-thumb {
	height: 2rem;
	width: 1rem;
	background: hsla(var(--white),var(--bg-opacity-half));
	border: 1px solid transparent;
	border-color: var(--border-color-hover);
	box-shadow: var(--drop-shadow-idle);
	cursor: pointer;
	margin-top: -0.8rem;
	transition: background 0.3s, box-shadow 0.3s ease-out, transform 0.3s ease-out, color 0.3s, border 0.3s;
	border-radius: var(--corner);
}
input[type='range']:hover::-ms-thumb, 
input[type='range']:focus::-ms-thumb {
	background: hsla(var(--white),var(--bg-opacity));
	box-shadow: var(--drop-shadow-hover);
	transform: translate3d(0px, -1px, 10px);
	border-radius: var(--corner);
}
input[type='text'].creditcard-mask {
	letter-spacing: 0.3em;
}
.hidden-input, 
.form-group input[type='checkbox'],
.form-group input[type='radio'],
.form-group input[type='file'] {
	display: block;
	width: 0px;
	height: 0px;
	position: absolute;
	overflow: hidden;
	opacity: 0;
	z-index: 1;
	visibility: hidden;
	pointer-events: none;
}
.form-group {
	display: block;
	box-sizing: border-box;
	position: relative;
	margin-bottom: 1rem;
}
.form-group label, 
.form-row label {
	display: block;
	font-size: var(--plain-font-size);
	line-height: var(--plain-line-height);
	padding: 0.3rem 0;
	font-family: var(--title-font);
	letter-spacing: var(--title-spacing);
	text-transform: uppercase;
}
label.required-field, 
.form-group label:has(+ .required-field){
	text-decoration: underline hsla(var(--red),var(--text-opacity-quarter));
	/*color: hsla(var(--red),var(--text-opacity-quarter));*/
}
/*label.required-field::after{
	content: '\2a';
	font-family: var(--icon-font);
	font-weight: bold;
	color: hsla(var(--red),var(--text-opacity-quarter));
}*/
.form-extra {
	margin: 1rem 0;
	padding-top: 1.5rem;
	padding-bottom: 0.5rem;
	border-top: 2px solid transparent;
	border-color: hsla(var(--gray),var(--text-opacity-full));
	color: hsla(var(--gray),var(--text-opacity-full));
}
.form-group small {
	font-size: var(--small-font-size);
}
.form-row > div {
	margin-bottom: 1rem;
}
.form-grid {
	display: grid;
	grid-column-gap: 0.5rem;
    grid-template-columns: repeat(12, 1fr);
}
.form-grid .form-group, 
.form-grid .form-group.span-1 {
	grid-column: span 12;
}
.form-grid .form-group.span-2 {
	grid-column: span 6;
}
.form-grid .form-group.span-3 {
	grid-column: span 4;
}
.form-grid .form-group.span-4 {
	grid-column: span 3;
}
label.input-checkbox, 
label.input-radio {
	display: block;
	min-height: 2rem;
	line-height: var(--plain-line-height);
	font-size: var(--plain-font-size);
	cursor: pointer;
	color: hsla(var(--main),var(--text-opacity-half));
	transition: background 0.3s, color 0.3s;
	position: relative;
	box-sizing: border-box;
	padding: 0.5rem;
	padding-left: 2.6rem;
	user-select: none;
}
label.input-checkbox::before, 
label.input-radio::before {
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 2rem;
	height: 2rem;
	font-family: var(--icon-font);
	content: '';
	color: hsla(var(--main),0);
	line-height: 2rem;
	text-align: center;
	font-size: var(--plain-font-size);
	transition: color 0.3s, border 0.3s, background 0.3s;
	box-shadow: var(--inner-shadow-idle);
	background: var(--bg-idle);
	pointer-events: none;
	user-select: none;
	border-radius: var(--corner);
}
label:hover.input-checkbox::before, 
label:hover.input-radio::before {
	background: var(--bg-hover);
}
label.input-checkbox::after, 
label.input-radio::after { 
	content: '';
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 2rem;
	height: 2rem;
	border: 1px solid transparent;
	border-color: var(--border-color-idle);
	box-sizing: border-box;
	z-index: 20;
	pointer-events: none;
	transition: border 0.3s;
	border-radius: var(--corner);
}
label.input-checkbox-alt, 
label.input-radio-alt {
	min-height: 2rem;
	line-height: 2rem;
	box-sizing: border-box;
	cursor: pointer;
	opacity: 0.8;
	width: 100%;
	background: var(--bg-idle);
	display: block;
	box-shadow: var(--inner-shadow-idle);
	transition: all 0.3s;
	position: relative;
	font-size: var(--plain-font-size);
	padding: var(--form-input-padding);
	padding-left: 2.6rem;
	user-select: none;
	border-radius: var(--corner);
}
label:hover.input-checkbox-alt, 
label:hover.input-radio-alt {
	background: var(--bg-hover);
}
label.input-checkbox-alt::before, 
label.input-radio-alt::before {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	width: 2rem;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	font-family: var(--icon-font);
	color: hsla(var(--main),0);
	content: '';
	line-height: 2rem;
	text-align: center;
	font-size: var(--plain-font-size);
	transition: color 0.3s;
	user-select: none;
	border-radius: var(--corner);
}
label.input-checkbox-alt::after, 
label.input-radio-alt::after {
	content: '';
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	border: 1px solid transparent;
	border-color: var(--border-color-idle);
	box-sizing: border-box;
	z-index: 20;
	pointer-events: none;
	transition: border 0.3s;
	border-radius: var(--corner);
}
label.input-radio::before, 
label.input-radio::after {
	border-radius: 100%;
}
label.input-checkbox::before, 
label.input-checkbox-alt::before, 
label.input-radio-alt::before {
	content: '\f00c'
}
label.input-radio::before {
	content: '\f111';
}
input[type='checkbox']:checked + label.input-checkbox::before, 
input[type='checkbox']:checked + label.input-checkbox-alt::before, 
input[type='radio']:checked + label.input-radio::before, 
input[type='radio']:checked + label.input-radio-alt::before, 
input[type='checkbox']:checked + label.input-checkbox, 
input[type='checkbox']:checked + label.input-checkbox-alt, 
input[type='radio']:checked + label.input-radio, 
input[type='radio']:checked + label.input-radio-alt {
	color: hsla(var(--main),var(--text-opacity-full));
}
input[type='checkbox']:checked + label.input-checkbox::after, 
input[type='checkbox']:checked + label.input-checkbox-alt::after, 
input[type='radio']:checked + label.input-radio::after, 
input[type='radio']:checked + label.input-radio-alt::after {
	border-color: var(--border-color-hover);
}
input[type='checkbox']:disabled + label.input-checkbox, 
input[type='checkbox']:disabled + label.input-checkbox-alt, 
input[type='radio']:disabled + label.input-radio, 
input[type='radio']:disabled + label.input-radio-alt {
	opacity: 0.4;
	cursor: auto;
}
.valid-feedback, 
.invalid-feedback {
	display: block;
	font-size: var(--small-font-size);
	padding: 0.1rem 1.2rem;
	/*border-top: 0.2rem solid transparent;*/
}
.valid-feedback {
	color: hsla(var(--green),var(--text-opacity-half));
}
.invalid-feedback {
	color: hsla(var(--red),var(--text-opacity-half));
}
label.input-file {
	display: block;
	position: relative;
	background: var(--bg-idle);
	color: hsla(var(--main),var(--text-opacity-half));
	min-height: 4rem;
	font-size: var(--plain-font-size);
	box-sizing: border-box;
	cursor: pointer;
	padding: 1rem;
	padding-left: 4rem;
	box-shadow: var(--drop-shadow-idle);
	border: 1px solid transparent;
	border-color: var(--border-color-idle);
	transition: box-shadow 0.3s ease-out, transform 0.3s ease-out, color 0.3s, border-color 0.3s, background 0.3s;
	border-radius: var(--corner);
}
label.input-file:hover {
	color: hsla(var(--main),var(--text-opacity-full));
	background: var(--bg-hover);
	border-color: var(--border-color-hover);
	box-shadow: var(--drop-shadow-hover);
	transform: translate3d(0px, -1px, 10px);
}
label.input-file::before {
	display: block;
	content: '\f574';
	width: 4rem;
	height: 4rem;
	position: absolute;
	top: 0px;
	left: 0px;
	font-size: 2.4rem;
	line-height: 4rem;
	text-align: center;
	font-family: var(--icon-font);
	color: hsla(var(--main),var(--text-opacity-half));
}
label.input-file::after {
	display: block;
	content: '';
	clear: both;
}
label.input-file span {
	display: block;
	width: 100%;
}
label.input-file .input-file-name {
	font-style: italic;
	opacity: 0.5;
	margin-top: 5px;
}
label.input-file.input-file-image::before {
	content: '\f03e';
}
label.input-file.input-file-capture::before {
	content: '\f030';
}
/* READ ONLY LABEL */
.input-read {
	font-family: var(--plain-font);
	display: block;
	box-shadow: var(--inner-shadow-idle);
	background: var(--bg-min);
	color: hsla(var(--main),var(--text-opacity));
	line-height: var(--h1-line-height);
	font-size: var(--plain-font-size);
	box-sizing: border-box;
	padding: var(--form-input-padding);
	border: 1px solid transparent;
	border-color: var(--border-color-idle);
	transition: color 0.3s, box-shadow 0.3s, border-color 0.3s;
	width: 100%;
	border-radius: var(--corner);
}
/* CARD */
.card {
	position: relative;
	display: flex;
	flex-flow: column wrap;
	justify-content: flex-start;
	align-content: flex-start;
	background: hsla(var(--alt-front),var(--bg-opacity-half));
	background-clip: border-box;
	border: none;
	border-radius: var(--corner);
	overflow: hidden;
}
.card-media {
	position: relative;
	width: 100%;
}
.card-media-video::after {
	content: '\f04b';
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-content: center;
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: none;
	top: 0;
	left: 0;
	text-align: center;
	font-family: var(--icon-font);
	font-size: 2rem;
	color: hsla(var(--main),0.5);
	background: hsla(var(--alt),var(--bg-opacity-min));
	text-shadow: 0px 0px 0.3rem hsla(var(--alt),0.1);
	transition: color 0.3s, background 0.3s, text-shadow 0.3s;
}
.card-media-video:hover::after {
	color: hsla(var(--main),var(--text-opacity-full));
	text-shadow: 0.2rem 0.2rem 0.3rem hsla(var(--alt),0.2);
	background: hsla(var(--alt),0.2);
}
.card-figure {
	display: block;
}
.card-header {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	padding: 0px;
	margin-bottom: 0px;
	background: hsla(var(--main-highlight),var(--bg-opacity-quarter));
	/*
	border-bottom: 0.2rem solid transparent;
	border-color: var(--border-color-hover);
	*/
	clear: both;
}
.card-header-content {
	display: block;
	padding: 0.3rem 0.5rem;
}
.card-header-content h4 {
	display: block;
	font-weight: normal;
	color: hsla(var(--main),var(--text-opacity-full));
	font-family: var(--title-font);
	letter-spacing: var(--title-spacing);
	font-size: var(--h2-font-size);
	line-height: var(--h2-line-height);
	text-transform: uppercase;
}
.card-header-content span {
	display: block;
	font-weight: normal;
	color: hsla(var(--main),var(--text-opacity-quarter));
	font-size: var(--plain-font-size);
	line-height: var(--plain-line-height);
}
.card-header-logo {
	position: absolute;
	top: 0px;
	left: 0px;
	display: block;
	width: 3rem;
	height: 100%;
	background: hsla(var(--black),0.2);
}
.card-header-logo + .card-header-content {
	padding-left: 3.5rem;
}
.card-body {
	display: block;
	position: relative;
	width: 100%;
	flex-grow: 1;
}
.card-headline {
	display: block;
	padding: 0.3rem 0.5rem;
	font-size: var(--small-font-size);
	line-height: var(--small-line-height);
	position: relative;
	width: 100%;
	box-sizing: border-box;
	background: hsla(var(--main-highlight),var(--bg-opacity-quarter));
	border-bottom: 0.2rem solid transparent;
	border-color: var(--border-color-hover);
	clear: both;
	font-family: var(--title-font);
	text-transform: uppercase;
	letter-spacing: var(--double-spacing);
}
.card-article {
	display: block;
	padding: 1rem;
	font-size: var(--plain-font-size);
	line-height: var(--plain-line-height);
}
.card-headline + .card-article {
	padding-bottom: 2rem;
}
.card-button {
	padding: 1rem;
	margin-bottom: 1rem;
}
.card-info {
	display: block;
	width: 100%;
	box-sizing: border-box;
	font-size: var(--small-font-size);
	line-height: var(--small-line-height);
	padding: 0.3rem 0.5rem;
	border-top: 1px solid transparent;
	border-color: var(--border-color-min);
	background: var(--bg-min);
	position: absolute;
	bottom: 0px;
	left: 0px;
}
.card hr {
	margin-left: 0.5rem;
	margin-right: 0.5rem;
	border: 0;
	border-top: 1px solid transparent;
	border-color: var(--border-color-min);
}
.card-title {
	display: block;
	font-size: var(--h4-font-size);
	line-height: var(--h4-line-height);
	font-family: var(--title-font);
	text-transform: uppercase;
	letter-spacing: var(--title-spacing);
	margin-bottom: 0.5rem;
}
.card-footer {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 0.3rem 0.5rem;
	border-top: 1px solid transparent;
	border-color: var(--border-color-min);
	background: var(--bg-min);
}
.card-center {
	text-align: center;
}
.card-full-link, 
.card-title-link, 
.list-group a {
	color: hsla(var(--main),var(--text-opacity-half));
}
.card-full-link:hover, 
.card-title-link:hover, 
.list-group a:hover {
	color: hsla(var(--main),var(--text-opacity-full));
}
.card-full-link:hover .hover-zoom img {
	transform: scale(1.05, 1.05);
}
.card-landscape {
	display: flex;
	flex-flow: row wrap;
}
.card-landscape .card-media, 
.card-landscape .card-media + .card-body {
	display: block;
	width: 50%;
}
.card-landscape .card-header,
.card-landscape .card-footer {
	width: 100%;
}
.card-landscape  .aspect-ratio {
	width: 100%;
	height: 100%;
}
.list-group {
	display: block;
	list-style-type: none;
	font-size: var(--plain-font-size);
	line-height: var(--plain-line-height);
	padding: 0.3rem 0px;
}
.list-group li, 
.list-group-item {
	display: block;
	padding: 0.6rem 1rem;
}
.list {
	position: relative;
	display: block;
	background: hsla(var(--alt-front),var(--bg-opacity-half));
	background-clip: border-box;
	border: none;
	border-radius: var(--corner);
}
.list .list-group {
	display: block;
	list-style-type: none;
	font-size: var(--plain-font-size);
	line-height: var(--plain-line-height);
	padding: 0px;
}
.list .list-group li, 
.list .list-group-item, 
.list .list-group li a {
	display: flex;
	position: relative;
	width: 100%;
	flex-direction: row;
	box-sizing: border-box;
	background-clip: border-box;
	/*flex-flow: row wrap;*/
	padding: 0px;
	transition: background 0.3s;
	border-radius: var(--corner);
}
.list .list-group li:hover {
	background: var(--bg-min);
}
.list .list-group li::before {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	box-sizing: border-box;
	border: 1px solid transparent;
	border-radius: var(--corner);
	pointer-events: none;
	z-index: 20;
}
.list .list-group li:hover::before {
	border-color: var(--border-color-hover);
}
.list .list-group li span {
	display: block;
	padding: 0.5rem;
	width: 100%;
}
.list-marker .list-group li span {
	/*border-left: 0.2rem solid transparent;*/
	border-color: var(--border-color-hover);
	transition: border-color 0.3s;
}
.list-marker .list-group li:hover span {
	border-color: var(--border-color-min);
}
.list-counter .list-group li span {
	width: auto;
	background: var(--bg-min);
}
.list-counter .list-group li:first-child span {
	border-top-left-radius: var(--corner);
}
.list-counter .list-group li:last-child span {
	border-bottom-left-radius: var(--corner);
}
.list-counter .list-group li span + span {
	width: 100%;
	background: transparent;
}
.text-muted {
	font-size: var(--small-font-size);
	line-height: var(--small-line-height);
	color: hsla(var(--main),var(--text-opacity-min));
}
.card.bg-primary .card-header, 
.card.bg-primary .card-headline {
	background: var(--bg-min);
}
.card.bg-secondary .card-header, 
.card.bg-secondary .card-headline {
	background: hsla(var(--alt-front),var(--bg-opacity-min));
}
.card.bg-success .card-header, 
.card.bg-success .card-headline {
	background: hsla(var(--green),var(--bg-opacity));
}
.card.bg-danger .card-header, 
.card.bg-danger .card-headline {
	background: hsla(var(--red),var(--bg-opacity));
}
.card.bg-warning .card-header, 
.card.bg-warning .card-headline {
	background: hsla(var(--yellow),var(--bg-opacity));
}
.card.bg-info .card-header, 
.card.bg-info .card-headline {
	background: hsla(var(--cyan),var(--bg-opacity));
}
.card.bg-light .card-header, 
.card.bg-light .card-headline {
	background: hsla(var(--white),var(--bg-opacity));
}
.card.bg-dark .card-header, 
.card.bg-dark .card-headline {
	background: hsla(var(--black),var(--bg-opacity));
}
.card-medium {
	position: relative;
	display: block;
	background: hsla(var(--alt-front),var(--bg-opacity-half));
	background-clip: border-box;
	border: none;
	border-radius: var(--corner);
	overflow: hidden;
}
.card-medium .card-body {
	position: absolute;
	width: 100%;
	bottom: 0px;
	left: 0px;
	z-index: 19;
	box-sizing: border-box;
	background: linear-gradient(to top, hsla(var(--black),var(--bg-opacity)) 0%, hsla(var(--black),0) 100%);
	padding-top: 3rem;
}
.card-medium .card-title-link {
    color: hsla(var(--main),var(--text-opacity));
}
.card-medium .card-title-link:hover {
    color: hsla(var(--main),var(--text-opacity-full));
}
/* SLIDESHOW */
.slideshow {
	display: block;
	position: relative;
}
.slideshow-inner {
	width: 300%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	display: flex;
	flex-direction: row;
	transition: margin-left 1s;
}
.slideshow-item {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.slideshow-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.slideshow-caption {
	width: 100%;
	position: absolute;
	left: 0px;
	bottom: 0px;
	box-sizing: border-box;
	background: linear-gradient(to top, hsla(var(--black),var(--bg-opacity)) 0%, hsla(var(--black),0) 100%);
	font-size: var(--plain-font-size);
	line-height: var(--plain-line-height);
	color: hsla(var(--main),var(--text-opacity-half));
	transition: color 0.3s;
	z-index: 19;
}
.slideshow-caption div {
	box-sizing: border-box;
	padding: 0.5rem;
	padding-top: 3rem;
}
a.slideshow-item:hover .slideshow-caption {
	color: hsla(var(--main),var(--text-opacity));
}
.slideshow-caption h3, 
.slideshow-caption h4, 
.slideshow-caption h5 {
	font-size: var(--h3-font-size);
	line-height: var(--h3-line-height);
	text-transform: uppercase;
	font-family: var(--title-font);
	letter-spacing: var(--title-spacing);
	color: hsla(var(--main),var(--text-opacity));
	transition: color 0.3s;
	font-weight: normal;
}
a.slideshow-item:hover .slideshow-caption h3, 
a.slideshow-item:hover .slideshow-caption h4, 
a.slideshow-item:hover .slideshow-caption h5 {
	color: hsla(var(--main),var(--text-opacity-full));
}
.general-title + .slideshow-indicators,
.general-title + .slideshow-selector-wrapper {
	position: absolute;
	top: 0.5rem;
	right: 0px;
}
.slideshow-selector-wrapper {
	display: flex;
	flex-flow: row wrap;
	list-style-type: none;
	justify-content: flex-end;
	margin-bottom: 0.5rem;
}
.slideshow-hero .slideshow-selector-wrapper {
	position: absolute;
	top: 0.5rem;
	right: 1rem;
	z-index: 20;
}
.slideshow-selector-wrapper li {
	display: block;
	position: relative;
	width: 2rem;
	height: 1rem;
	margin-left: 0.4rem;
}
.slideshow-selector-wrapper li label {
	display: block;
	width: 100%;
	height: 1rem;
	box-sizing: border-box;
	cursor: pointer;
	opacity: 0.4;
	transition: opacity 0.3s;
	padding-top: 0.4rem;
	user-select: none;
}
.slideshow-selector-wrapper li label:hover, 
.slideshow-selector-wrapper li label.active {
	opacity: 0.8;
}
.slideshow-selector-wrapper li label::before {
	display: block;
	content: '';
	width: 100%;
	height: 0.2rem;
	background: hsla(var(--main-front),var(--bg-opacity-full));
}
.slideshow-control-wrapper {
	display: block;
	position: absolute;
	top: 50%;
	width: 100%;
	height: 2rem;
	list-style-type: none;
	z-index: 20;
	pointer-events: none;
}
.slideshow-control-wrapper li {
	width: 100%;
	height: 2rem;
	display: none;
}
.slideshow-control-wrapper li label {
	display: block;
	width: 2rem;
	height: 2rem;
	font-family: var(--icon-font);
	font-size: var(--h2-font-size);
	line-height: 2rem;
	cursor: pointer;
	opacity: 0.6;
	color: hsla(var(--main),var(--text-opacity-full));
	transition: opacity 0.3s;
	pointer-events: auto;
	user-select: none;
}
.slideshow-control-wrapper li label:hover {
	opacity: 1;
}
.slideshow-control-wrapper li label::before {
	display: block;
	text-align: center;
}
.slideshow-btn-prev {
	float: left;
}
.slideshow-btn-prev::before {
	content: '\f053';
}
.slideshow-btn-next {
	float: right;
}
.slideshow-btn-next::before {
	content: '\f054';
}
.slideshow-step-1:checked ~ .slideshow-selector-wrapper .slideshow-selector-step-1 label, 
.slideshow-step-2:checked ~ .slideshow-selector-wrapper .slideshow-selector-step-2 label, 
.slideshow-step-3:checked ~ .slideshow-selector-wrapper .slideshow-selector-step-3 label {
	opacity: 0.8;
}
.slideshow-step-1:checked ~ .slideshow-control-wrapper .slideshow-control-step-1, 
.slideshow-step-2:checked ~ .slideshow-control-wrapper .slideshow-control-step-2, 
.slideshow-step-3:checked ~ .slideshow-control-wrapper .slideshow-control-step-3 {
	display: block;
}
.slideshow-step-1:checked ~ .slideshow-wrapper .slideshow-inner {
	margin-left: 0px;
}
.slideshow-step-2:checked ~ .slideshow-wrapper .slideshow-inner {
	margin-left: -100%;
}
.slideshow-step-3:checked ~ .slideshow-wrapper .slideshow-inner {
	margin-left: -200%;
}
.slideshow-hero .slideshow-wrapper {
	border-bottom: 1px solid transparent;
	border-color: var(--border-color-min);
}
.slideshow-hero .slideshow-caption div {
	padding: 1rem;
	padding-top: 3rem;
}
.slideshow-gallery {
	position: relative;
	border-radius: var(--corner);
	overflow: hidden;
}
.slideshow-gallery > .slideshow-media {
	width: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	opacity: 0;
	z-index: 5;
	transition: opacity 0.3s;
	pointer-events: none;
}
.slideshow-controls {
	width: 100%;
	height: 3rem;
	position: absolute;
	top: calc(50% - 1.5rem);
	left: 0px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	z-index: 7;
}
.slideshow-controls label {
	display: inline-block;
	width: 3rem;
	height: 3rem;
	line-height: 3rem;
	font-size: 2rem;
	text-align: center;
	font-family: var(--icon-font);
	cursor: pointer;
	color: hsla(var(--main),var(--text-opacity-full));
	opacity: 0.2;
	transition: opacity 0.3s;
	pointer-events: none;
}
.slideshow-controls label:hover {
	opacity: 0.6;
}
.slideshow-prev::before {
	content: '\f053';
}
.slideshow-next::before {
	content: '\f054';
}
.slideshow-option-switch:checked + .slideshow-media {
	opacity: 1;
	z-index: 6;
	pointer-events: all;
}
.slideshow-option-switch:checked + .slideshow-media .slideshow-controls label {
	pointer-events: all;
}
.slideshow-option-switch + .slideshow-media .slideshow-controls label.disabled,
.slideshow-option-switch:checked + .slideshow-media .slideshow-controls label.disabled {
	pointer-events: none;
	opacity: 0;
}
.slideshow-selection {
	width: 100%;
	padding-top: 56.25%;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}
.slideshow-option {
	display: block;
	width: 25%;
	cursor: pointer;
}
.slideshow-option .slideshow-media {
	position: relative;
	background: hsla(var(--main),var(--bg-opacity-full));
}
.slideshow-option .slideshow-media img {
	transition: transform 0.3s, opacity 0.3s;
}
.slideshow-option:hover .media img, 
.slideshow-option-switch[id='slideshow-option-1']:checked ~ .slideshow-selection label[for='slideshow-option-1'] .slideshow-media img, 
.slideshow-option-switch[id='slideshow-option-2']:checked ~ .slideshow-selection label[for='slideshow-option-2'] .slideshow-media img, 
.slideshow-option-switch[id='slideshow-option-3']:checked ~ .slideshow-selection label[for='slideshow-option-3'] .slideshow-media img, 
.slideshow-option-switch[id='slideshow-option-4']:checked ~ .slideshow-selection label[for='slideshow-option-4'] .slideshow-media img {
	transform: scale(1.2,1.2);
	opacity: 0.6;
}
.slideshow-highlight {
}
.slideshow-highlight .slideshow-control-wrapper li label {
	color: hsla(var(--alt),var(--text-opacity-full));
}
.slideshow-highlight .slideshow-caption {
	background: none;
	color: hsla(var(--alt),var(--text-opacity-full));
	text-align: center;
}
.slideshow-highlight .slideshow-caption .promo-text-highlight  {
	font-family: var(--title-font);
	color: hsla(var(--main-highlight),var(--text-opacity-full));
}
.slideshow-highlight .slideshow-wrapper {
	-webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 10%,rgba(0,0,0,1) 90%,rgba(0,0,0,0) 100%);
}
/* NAV */
.nav {
	list-style-type: none;
	display: flex;
	flex-flow: row wrap;
	text-transform: uppercase;
	font-size: var(--plain-font-size);
	line-height: var(--plain-line-height);
	justify-content: flex-start;
	font-family: var(--title-font);
	letter-spacing: var(--title-spacing);
}
.nav.justify-content-center {
	justify-content: center;
}
.nav.justify-content-end {
	justify-content: flex-end;
}
.nav li {
	position: relative;
}
.nav li a,
.nav li label {
	display: inline-block;
	min-height: 1rem;
	color: hsla(var(--main),var(--text-opacity-half));
	padding: 1rem;
	position: relative;
	cursor: pointer;
}
.nav li a:hover, 
.nav li.active a, 
.nav li label:hover, 
.nav li.active label {
	color: hsla(var(--main),var(--text-opacity-full));
}
.nav li a::before,
.nav li label::before {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border-bottom: 0.2rem solid transparent;
	border-color: transparent;
	top: 0px;
	left: 0px;
	pointer-events: none;
	transform: scale(0.1,1);
	transition: border-color 0.3s, transform 0.3s;
}
.nav li a:hover::before, 
.nav li label:hover::before{
	border-color: hsla(var(--main),var(--text-opacity));
	transform: scale(1,1);
}
.nav li.active a:hover::before, 
.nav li.active a::before, 
.nav li.active label:hover::before, 
.nav li.active label::before {
	border-color: hsla(var(--main),var(--text-opacity));
	transform: scale(1,1);
}
.nav li .sub-menu {
	display: inline-block;
	min-height: 1rem;
	min-width: 100%;
	color: hsla(var(--main),var(--text-opacity-half));
	position: absolute;
	top: 100%;
	right: 0px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	background: hsla(var(--alt-front),var(--bg-opacity-half));
}
.nav li .sub-menu li {
	display: block;
}
.nav li .sub-menu a {
	display: block;
	padding: 0.5rem;
	min-width: 100%;
	box-sizing: border-box;
	height: auto;
	white-space: nowrap;
	text-align: right;
}
.nav-parent > a::after {
	display: inline-block;
	font-family: var(--icon-font);
	content: '\f107';
	margin-left: 0.5rem;
}
.nav-parent:hover .sub-menu, 
.nav li .sub-menu:hover {
	opacity: 1;
	pointer-events: all;
}
.nav-lg {
	font-size: var(--h4-font-size);
	line-height: var(--h4-line-height);
}
.nav-lg li a, 
.nav-lg li label {
	min-height: 1.2rem;
	padding: 1.4rem 1rem;
}
.nav-sm {
	font-size: var(--small-font-size);
	line-height: var(--small-line-height);
}
.nav-sm li a, 
.nav-sm li label {
	min-height: 0.8rem;
	padding: 0.8rem 1rem;
}
.nav-tab {
	position: relative;
}
.nav-tab::after {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	box-sizing: border-box;
	border-bottom: 0.2rem solid transparent;
	border-color: var(--border-color-min);
	pointer-events: none;
	z-index: 0;
}
.nav-tab li a, 
.nav-tab li label {
	border-top-left-radius: var(--corner);
	border-top-right-radius: var(--corner);
	transition: background 0.3s;
	font-weight: bold;
	position: relative;
	z-index: 1;
}
.nav-tab li a:hover, 
.nav-tab li label:hover {
	background: hsla(var(--alt-front),0.05);
}
.nav-tab li.active a, 
.nav-tab li.active label {
	background: hsla(var(--alt-front),var(--bg-opacity-min));
}
.nav-stretch {
	flex-flow: row nowrap;
	 align-content: stretch;
}
.nav-stretch li {
	flex-grow: 1;
}
.nav-stretch li a, 
.nav-stretch li label {
	box-sizing: border-box;
	width: 100%;
	text-align: center;
	padding: 0.5rem;
}
/* PAGINATION */
.pagination {
	list-style-type: none;
	display: flex;
	flex-flow: row wrap;
	text-transform: uppercase;
	font-size: var(--plain-font-size);
	line-height: var(--plain-line-height);
	justify-content: flex-start;
	font-family: var(--title-font);
	letter-spacing: var(--title-spacing);
}
.pagination li {
	margin-right: 0.3rem;
}
.pagination li a,
.pagination li span.page-link {
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	background-clip: border-box;
	background: var(--bg-idle);
	transition: box-shadow 0.3s, transform 0.3s, color 0.3s, background 0.3s;
	user-select: none;
	box-shadow: var(--drop-shadow-idle);
	min-height: 1rem;
	color: hsla(var(--main),var(--text-opacity-half));
	padding: 1rem;
	border-radius: var(--corner);
}
.pagination li a::before 
.pagination li span.page-link::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-idle);
	pointer-events: none;
	z-index: 20;
	transition: border-color 0.3s, background 0.3s;
	border-radius: var(--corner);
}
.pagination li a:hover,
.pagination li span.page-link:hover {
	box-shadow: var(--drop-shadow-hover);
	transform: translate3d(0px, -1px, 10px);
	color: hsla(var(--main),var(--text-opacity-full));
	background: var(--bg-hover);
}
.pagination li a:hover::before,
.pagination li span.page-link:hover::before {
	border-color: var(--border-color-hover);
}
.pagination li.disabled a,
.pagination li.disabled span.page-link {
	opacity: 0.4;
}
.pagination li.active a::after,
.pagination li.active span.page-link::after {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	/*border-bottom: 0.2rem solid transparent;
	border-color: var(--border-color-hover);*/
	background: var(--bg-idle);
	top: 0px;
	left: 0px;
	pointer-events: none;
	border-radius: var(--corner);
}
/* TOAST */
.toast {
	position: relative;
	top: 1rem;
	left: 1rem;
	width: 16rem;
	display: block;
	background: hsla(var(--alt-front),var(--bg-opacity-half));
	box-sizing: border-box;
	background-clip: border-box;
	border: 1px solid transparent;
	border-color: var(--border-color-hover);
	z-index: 60;
	box-shadow: var(--drop-shadow-hover);
	border-radius: var(--corner);
}
.toast .toast-header {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	display: block;
	padding: 0.3rem 0.5rem;
	padding-right: 1.5rem;
	margin-bottom: 0px;
	background: hsla(var(--main-front),var(--bg-opacity-quarter));
	border-bottom: none;
	border-bottom: 0.2rem solid transparent;
	border-color: var(--border-color-hover);
	clear: both;
	font-family: var(--title-font);
	letter-spacing: var(--title-spacing);
	font-size: var(--plain-font-size);
	line-height: var(--plain-line-height);
	border-top-left-radius: var(--corner);
	border-top-right-radius: var(--corner);
}
.toast .mr-auto {
	display: block;
	float: left;
}
.toast .text-muted {
	display: block;
	float: right;
	text-align: right;
}
.toast .close {
	display: block;
	position: absolute;
	top: 0.3rem;
	right: 0px;
	width: 1rem;
	height: 1rem;
	text-align: center;
	background: transparent;
	border: none;
	cursor: pointer;
	color: hsla(var(--main),var(--text-opacity-half));
	transition: color 0.3s;
}
.toast .close:hover {
	color: hsla(var(--main),var(--text-opacity-full));
}
.toast .close::before {
	content: '\f00d';
	font-family: var(--icon-font);
}
.toast-body {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 0.5rem;
	font-size: var(--plain-font-size);
	line-height: var(--plain-line-height);
}
/* MODAL */
.modal {
	display: none;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0px;
	left: 0px;
	background: hsla(var(--alt-front),0.9);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	z-index: 100;
}
.modal-control:checked + .modal {
	display: block;
}
.modal-dialog {
	position: absolute;
	left: 0px;
	top: 50%;
	transform: translate(0, -50%);
	width: 100%;
	max-height: 100%;
	border-top: 0.4rem solid transparent;
	border-color: var(--border-color-min);
	background: var(--bg-min);
	box-sizing: border-box;
}
.modal-dialog.scrollbar {
	overflow-y: scroll;
}
.modal-wrapper {
	display: flex;
	flex-direction: row;
	/*flex-flow: row wrap;*/
}
.modal-figure {
	width: 33.33%;
	overflow: hidden;
}
.modal-figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.modal-content {
	width: 100%;
	margin: 0px auto;
	font-size: var(--plain-font-size);
	line-height: var(--plain-line-height);
}
.modal-header {
	box-sizing: border-box;
	padding: 1rem;
	text-transform: uppercase;
	background: var(--bg-min);
}
.modal-title {
	display: block;
	width: 100%;
	font-weight: normal;
	font-size: var(--h3-font-size);
	line-height: var(--h3-line-height);
}
.modal-body {
	width: 100%;
	box-sizing: border-box;
	padding: 1rem;
}
.modal-content .modal-title, 
.modal-content .modal-message {
	max-width: 1200px;
	margin: 0px auto;
}
.modal-figure + .modal-content .modal-title, 
.modal-figure + .modal-content .modal-message {
	max-width: none;
}
.modal-footer {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-end;
	background: hsla(var(--alt-front),0.2);
	box-sizing: border-box;
	padding: 0px 1rem;
	font-size: var(--small-font-size);
	line-height: var(--plain-line-height);
	text-transform: uppercase;
}
.modal-footer label {
	display: inline-block;
	line-height: var(--plain-line-height);
	cursor: pointer;
	color: hsla(var(--main),var(--text-opacity-quarter));
	transition: color 0.3s;
}
.modal-footer label:hover {
	color: hsla(var(--main),var(--text-opacity-full));
}
.modal-limit .modal-title, 
.modal-limit .modal-message {
	max-width: 40rem;
	margin: 0px auto;
	position: relative;
}
.modal-close {
	display: inline-block;
	float: right;
	width: 1.4rem;
	height: 1.4rem;
	line-height: 1.4rem;
	cursor: pointer;
	color: hsla(var(--main),var(--text-opacity-quarter));
	transition: color 0.3s;
}
.modal-close::before {
	content: '\f00d';
	font-family: var(--icon-font);
}
.modal-close:hover {
	color: hsla(var(--main),var(--text-opacity-full));
}
/* BANNERS */
.banner {
	position: relative;
	padding-bottom: 56.25%;
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;	
}
.banner-mobile {
	display: none;
}
.banner > img, 
.banner > a, 
.banner > video,
.banner > iframe, 
.banner > figure {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0px;
	left: 0px;
}
.banner > figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.banner-300x250 {
	padding-bottom: 83.3%;
}
.banner-300x600 {
	padding-bottom: 200%;
}
.banner-320x100 {
	padding-bottom: 31.25%;
}
.banner-320x50 {
	padding-bottom: 15.6%;
}
.banner-468x60 {
	padding-bottom: 12.8%;
}
.banner-728x90 {
	padding-bottom: 12.4%;
}
.banner.frame-hover {
	cursor: pointer;
}
/* HEADER ALERT */
.header-alert {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	background: hsla(var(--red),var(--bg-opacity));
	z-index: 99;
	pointer-events: none;
	opacity: 0;
	max-height: 0px;
	transition: opacity 0.3s, max-height 0.3s;
}
.header-alert.active {
	opacity: 1;
	max-height: 10rem;
}
.header-alert-limit {
	width: 100%;
	max-width: 60rem;
	box-sizing: border-box;
	padding: 0.5rem 1rem;
	margin: 0px auto;
	font-size: var(--plain-font-size);
	line-height: var(--plain-line-height);
	text-align: center;
	font-weight: bold;
	text-transform: uppercase;
}
/* POP TITLES */
.pop-title {
	position: relative;
}
.pop-title::after {
	content: attr(data-title);
	display: block;
	position: absolute;
	background: hsla(var(--alt-front),var(--bg-opacity-half));
	height: 1rem;
	line-height: var(--small-line-height);
	font-size: var(--small-font-size);
	top: -1.4rem;
	left: 50%;
	padding: 0.2rem 0.5rem;
	white-space: nowrap;
	transform: translate(-50%, 30%);
	user-select: none;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s, transform 0.3s;
}
.pop-title-left::after {
	left: 0px;
	transform: translate(0, 30%);
}
.pop-title-right::after {
	left: auto;
	right: 0px;
	transform: translate(0, 30%);
}
.pop-title:hover::after {
	transform: translate(-50%, 0);
	opacity: 1;
}
.pop-title-left:hover::after,
.pop-title-right:hover::after {
	transform: translate(0, 0);
}
/* DRAG FILE */
.drag-file {
	position: relative;
	border: 2px dashed transparent;
	border-color: hsla(var(--main),var(--text-opacity-quarter));
	border-radius: var(--corner);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	min-height: 10rem;
	box-shadow: var(--drop-shadow-idle);
	margin-bottom: 1rem;
	background: var(--bg-idle);
	transition: box-shadow 0.3s, transform 0.3s, color 0.3s, border-color 0.3s, background 0.3s;
}
.drag-file:hover {
	box-shadow: var(--drop-shadow-hover);
	transform: translate3d(0px, -1px, 10px);
	color: hsla(var(--main),var(--text-opacity-full));
	border-color: hsla(var(--main),var(--text-opacity));
	background: transparent;
}
.drag-file::before {
	content: '';
	display: block;
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	width: calc(100% - 1rem);
	height: calc(100% - 1rem);
	background: hsla(var(--white),var(--bg-opacity-half));
	transform: scale(0.6);
	opacity: 0;
	transition: transform 0.2s, opacity 0.2s, background 0.2s;
	user-select: none;
	pointer-events: none;
	z-index: 1;
}
.drag-file.error::before {
	background: hsla(var(--red),var(--bg-opacity-half));
	transform: scale(1);
	opacity: 0.5;
}
.drag-file.active {
	border: 2px solid hsla(var(--grey),var(--border-opacity-full));
}
.drag-file.active::before {
	transform: scale(1);
	opacity: 1;
}
.drag-file-title {
	display: block;
	padding: 1rem;
	box-sizing: border-box;
	font-family: var(--title-font);
	font-size: var(--h1-font-size);
	word-break: break-all;
	position: relative;
	z-index: 2;
	user-select: none;
	pointer-events: none;
}
.drag-file-title::before {
	content: '\f570';
	display: block;
	height: 100%;
	font-family: var(--icon-font);
	text-align: center;
}
.drag-file-label {
	display: inline-block;
	position: relative;
	z-index: 2;
	cursor: pointer;
	font-weight: bold;
	opacity: 0.6;
	transition: opacity 0.2s;
	user-select: none;
}
.drag-file-label:hover {
	opacity: 1;
}
.drag-file-input {
	
}
.form-step {
	display: none;
}
.form-step.active {
	display: block;
}


/* ************************************************** 
CONTENTEDITABLE
************************************************** */
[contenteditable='true'] {
	display: inline-block;
	white-space: pre-wrap;
}
[contenteditable='true']:empty:before {
	content: attr(placeholder);
	display: block;
	color: hsla(var(--main),var(--text-opacity-quarter));
}
/* **************************************************
TRIBUTE 
************************************************** */
.tribute-container {
	position: absolute;
	top: 0;
	left: 0;
	height: auto;
	max-height: 12rem;
	max-width: 14rem;
	overflow: auto;
	display: block;
	z-index: 30;
	background: hsla(var(--alt-front),var(--bg-opacity-half));
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: var(--drop-shadow-hover);
}
.tribute-container ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.tribute-container li {
	padding: 0.5rem;
	cursor: pointer;
	transition: background 0.3s, color 0.3s;
}
.tribute-container li.highlight {
	background: var(--bg-min);
	color: hsla(var(--main),var(--text-opacity-full));
}
.tribute-container li.no-match {
	cursor: default;
}
.tribute-container .menu-highlighted {
	font-weight: bold;
}
.tribute-mentions li {
	padding: 0px;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-content: flex-start;
	position: relative;
}
.tribute-mentions li::after {
	content: ' ';
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border-bottom: 1px solid transparent;
	border-color: var(--border-color-min);
	user-select: none;
	pointer-events: none;
	position: absolute;
	bottom: 0px;
	left: 0px;
	background: hsla(var(--main-front),0);
	transition: background 0.3s;
}
.tribute-mentions-avatar {
	width: 2.6rem;
	height: 2.6rem;
	object-fit: cover;
	overflow: hidden;
	opacity: 0.6;
	transition: opacity 0.3s;
}
.tribute-container li.highlight .tribute-mentions-avatar {
	opacity: 1;
}
.tribute-mentions-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.tribute-mentions-info {
	display: block;
	padding: 0.3rem 0.5rem;
	width: calc(100% - 2.6rem);
	box-sizing: border-box;
	user-select: none;
}
.tribute-mentions-name {
	display: block;
	height: 1rem;
	line-height: var(--plain-line-height);
	font-size: var(--plain-font-size);
	font-weight: bold;
	opacity: 0.8;
}
.tribute-mentions-tag {
	display: block;
	height: 1rem;
	line-height: var(--plain-line-height);
	font-size: var(--plain-font-size);
	font-weight: normal;
}
/* **************************************************
MENTION SELECTOR
************************************************** */
.mention-selector {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	max-height: 12rem;
	max-width: 12rem;
	overflow: hidden;
	display: block;
	z-index: 30;
	background: hsla(var(--alt-front),var(--bg-opacity-half));
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: var(--drop-shadow-hover);
	height: 0px;
	opacity: 0;
	pointer-events: none;
	transition: height 0.3s;
}
.mention-selector.active {
	height: 12rem;
	opacity: 1;
	pointer-events: all;
}
.mention-friendlist {
	display: block;
	list-style-type: none;
	max-width: 12rem;
	max-height: 12rem;
	overflow-y: scroll;
}
.mention-friendlist li {
	cursor: pointer;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-content: flex-start;
	position: relative;
}
.mention-friendlist li::after {
	content: ' ';
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border-bottom: 1px solid transparent;
	border-color: var(--border-color-min);
	user-select: none;
	pointer-events: none;
	position: absolute;
	bottom: 0px;
	left: 0px;
	background: hsla(var(--main-front),0);
	transition: background 0.3s;
}
.mention-friendlist li.highlight,
.mention-friendlist li:hover,
.mention-friendlist li:focus {
	background: var(--bg-min);
}
.mention-user-avatar {
	width: 2rem;
	height: 2rem;
	object-fit: cover;
	overflow: hidden;
}
.mention-user-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mention-user-info {
	display: block;
	padding: 0.3rem 0.5rem;
	width: calc(100% - 2rem);
	box-sizing: border-box;
	user-select: none;
}
.mention-user-name {
	display: block;
	height: 0.8rem;
	line-height: var(--small-line-height);
	font-size: var(--small-font-size);
	font-weight: bold;
}
.mention-user-tag {
	display: block;
	height: 0.6rem;
	line-height: var(--small-line-height);
	font-size: var(--small-font-size);
}

/* **************************************************
NEW COMPONENTS TO REVISION
************************************************** */
/* **************************************************
DATEPICKER
************************************************** */
.ui-datepicker {
	width: 14rem;
	min-height: 16rem;
	position: absolute;
	display: none;
	top: auto;
	z-index: 70 !important;
	font-size: var(--plain-font-size);
	background-color: rgba(0,0,0,var(--bg-opacity));
	background-color: var(--dark-color-08);
	padding: 0.5rem;
	box-shadow: var(--drop-shadow-hover);
	color: hsla(var(--main),var(--text-opacity-full));
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}
.ui-datepicker-header {
	display: block;
	width: 100%;
	height: 2rem;
	position: relative;
}
.ui-datepicker-prev, 
.ui-datepicker-next {
	width: 1.8rem;
	height: 1.8rem;
	line-height: 1.8rem;
	margin: 0.1rem;
	position: absolute;
	overflow: hidden;
	cursor: pointer;
	opacity: 0.5;
	user-select: none;
	transition: opacity 0.3s;
	color: transparent;
}
.ui-datepicker-prev {
	left: 0px;
	top: 0px;
}
.ui-datepicker-next {
	right: 0px;
	top: 0px;
}
.ui-datepicker-prev::before, 
.ui-datepicker-next::before {
	display: block;
	width: 1.8rem;
	height: 1.8rem;
	font-family: var(--icon-font);
	color: hsla(var(--main),var(--text-opacity-full));
}
.ui-datepicker-prev::before {
	content: "\f104";
}
.ui-datepicker-next::before {
	content: "\f105";
}
.ui-datepicker-title {
	width: calc(100% - 4.2rem);
	height: 1.8rem;
	line-height: 1.8rem;
	margin: 0.1rem auto;
	overflow: hidden;
	text-align: center;
	font-size: var(--plain-font-size);
	font-weight: bold;
	text-transform: uppercase;
}
.ui-datepicker-month {
	
}
.ui-datepicker-year {
	background: transparent;
	border: none;
	font-size: var(--plain-font-size);
	font-weight: bold;
	height: 1.8rem;
	line-height: 1.8rem;
	color: hsla(var(--main-highlight),var(--text-opacity));
	position: relative;
}
.ui-datepicker-year option {
	color: rgba(0,0,0,var(--text-opacity));
	color: var(--dark-color-08);
	padding-left: 10px;
	padding-right: 20px;
	border: none;
}
.ui-datepicker-prev:hover,
.ui-datepicker-next:hover {
	opacity: 1;
}
.ui-datepicker-calendar {
	width: 100%;
	border-spacing: 0px;
    border-collapse: collapse;
}
.ui-datepicker-calendar th {
	width: 2rem;
	font-size: var(--small-font-size);
}
.ui-datepicker-calendar th span {
	display: block;
	color: hsla(var(--main),var(--text-opacity));
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	margin: 0.1rem;
}
.ui-datepicker-calendar td a, 
.ui-datepicker-calendar td span {
	background-color: transparent;
	box-sizing: border-box;
	border: 1px solid var(--border-color-idle);
	color: hsla(var(--main),var(--text-opacity));
	transition: opacity 0.3s, border 0.3s, color 0.3s;
}
.ui-datepicker-calendar td a:hover, .ui-datepicker-calendar .ui-datepicker-current-day a {
	background-color: transparent;
	border: 1px solid var(--border-color-hover);
	color: hsla(var(--main),var(--text-opacity-full));
}
.ui-datepicker-calendar .ui-datepicker-today a {
	border-color: hsla(var(--main-highlight),var(--border-opacity-min));
	color: hsla(var(--main-highlight),var(--text-opacity-half));
}
.ui-datepicker-calendar .ui-datepicker-today a:hover, 
.ui-datepicker-calendar .ui-datepicker-current-day.ui-datepicker-today a {
	border-color: hsla(var(--main-highlight),var(--border-opacity-quarter));
	color: hsla(var(--main-highlight),var(--text-opacity));
}
.ui-datepicker-calendar td {
	width: 2rem;
	height: 2rem;
}
.ui-datepicker a, 
.ui-datepicker-calendar td span {
	text-decoration: none;
	text-align: center;
	display: block;
	line-height: 1.8rem;
	height: 1.8rem;
	margin: 0.1rem;
}
.ui-datepicker-calendar td span {
	opacity: 0.4;
}
.ui-datepicker-calendar .ui-datepicker-other-month a {
	opacity: 0.5;
}
/* **************************************************
FORM DISCLAIMER
************************************************** */
.disclaimer {
	display: block;
	font-size: var(--plain-font-size);
	padding: 1rem 0.5rem;
	text-align: center;
}

/* **************************************************
VIEWPORT MEDIA QUERY
************************************************** */
@media all and (min-width: 1201px) {
}
@media all and (max-width: 1200px) {
}
@media all and (max-width: 960px) {
	.form-grid .form-group.span-2:has(.select-inline){
		grid-column: span 12;
	}
}
@media all and (max-width: 840px) {
}
@media all and (max-width: 720px) {
}
@media all and (max-width: 540px) {
	.banner {
		display: none;
	}
	.banner-mobile {
		display: block;
	}
}
@media all and (max-width: 460px) {
	.form-grid .form-group, 
	.form-grid .form-group.span-1,
	.form-grid .form-group.span-2,
	.form-grid .form-group.span-3, 
	.form-grid .form-group.span-4 {
		grid-column: span 12;
	}
}