/**/@charset "utf-8";
* {
	margin: 0px;
	padding: 0px;
	-webkit-appearance: none;
	border-radius: 0px;
}
:root {
	--feat-color-10: rgba(255,206,31,1);
	--feat-color-08: rgba(255,206,31,0.8);
	--feat-color-06: rgba(255,206,31,0.6);
	--feat-color-04: rgba(255,206,31,0.4);
	--feat-color-02: rgba(255,206,31,0.2);
	--feat-color-01: rgba(255,206,31,0.1);
	--feat-color-00: rgba(255,206,31,0);
	
	--done-color-10: rgba(144,206,60,1);
	--done-color-08: rgba(144,206,60,0.8);
	--done-color-06: rgba(144,206,60,0.6);
	--done-color-04: rgba(144,206,60,0.4);
	--done-color-02: rgba(144,206,60,0.2);
	--done-color-01: rgba(144,206,60,0.1);
	--done-color-00: rgba(144,206,60,0);
	
	--dark-color-10: rgba(55,59,63,1);
	--dark-color-09: rgba(55,59,63,0.9);
	--dark-color-08: rgba(55,59,63,0.8);
	--dark-color-06: rgba(55,59,63,0.6);
	--dark-color-04: rgba(55,59,63,0.4);
	--dark-color-02: rgba(55,59,63,0.2);
	--dark-color-01: rgba(55,59,63,0.1);
	--dark-color-00: rgba(55,59,63,0);
	
	--warn-color-10: rgba(255,30,30,1);
	--warn-color-09: rgba(255,30,30,0.9);
	--warn-color-08: rgba(255,30,30,0.8);
	--warn-color-06: rgba(255,30,30,0.6);
	--warn-color-04: rgba(255,30,30,0.4);
	--warn-color-02: rgba(255,30,30,0.2);
	--warn-color-01: rgba(255,30,30,0.1);
	--warn-color-00: rgba(255,30,30,0);
	
	--alt-color-10: rgba(0,139,130,1);
	--alt-color-09: rgba(0,139,130,0.9);
	--alt-color-08: rgba(0,139,130,0.8);
	--alt-color-06: rgba(0,139,130,0.6);
	--alt-color-04: rgba(0,139,130,0.4);
	--alt-color-02: rgba(0,139,130,0.2);
	--alt-color-01: rgba(0,139,130,0.1);
	--alt-color-00: rgba(0,139,130,0);
	
	--txt-color-10: rgba(255,255,255,1);
	--txt-color-09: rgba(255,255,255,0.9);
	--txt-color-08: rgba(255,255,255,0.8);
	--txt-color-06: rgba(255,255,255,0.6);
	--txt-color-04: rgba(255,255,255,0.4);
	--txt-color-02: rgba(255,255,255,0.2);
	--txt-color-01: rgba(255,255,255,0.1);
	--txt-color-00: rgba(255,255,255,0);
	
	--brdr-color-10: rgba(255,255,255,1);
	--brdr-color-09: rgba(255,255,255,0.9);
	--brdr-color-08: rgba(255,255,255,0.8);
	--brdr-color-06: rgba(255,255,255,0.6);
	--brdr-color-04: rgba(255,255,255,0.4);
	--brdr-color-02: rgba(255,255,255,0.2);
	--brdr-color-01: rgba(255,255,255,0.1);
	--brdr-color-00: rgba(255,255,255,0);
	
	--header-bg-color-1: rgba(55,59,63,0.6);
	--header-bg-color-2: rgba(55,59,63,0.9);
	--footer-bg-color-1: rgba(55,59,63,0.6);
	--footer-bg-color-2: rgba(55,59,63,0.9);
}
*:focus {
	outline-color: rgb(15,88,214);
	outline: 0;
}
html, body {
	margin: 0px;
	padding: 0px;
}
iframe, 
video {
	margin: 0px;
	padding: 0px;
	border: none;
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: normal;
	src: local('Open Sans'),
		 local('OpenSans'),
		 url('type/OpenSans.woff') format('woff'),
		 url('type/OpenSans.ttf') format('truetype');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: bold;
	src: local('Open Sans Bold'),
		 local('OpenSans-Bold'),
		 url('type/OpenSans-Bold.woff') format('woff'),
		 url('type/OpenSans-Bold.ttf') format('truetype');
}
@font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: normal;
	src: local('Open Sans Italic'),
		 local('OpenSans-Italic'),
		 url('type/OpenSans-Italic.woff') format('woff'),
		 url('type/OpenSans-Italic.ttf') format('truetype');
}
@font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: bold;
	src: local('Open Sans Bold Italic'),
		 local('OpenSans-BoldItalic'),
		 url('type/OpenSans-BoldItalic.woff') format('woff'),
		 url('type/OpenSans-BoldItalic.ttf') format('truetype');
}
@font-face {
	font-family: "Font Awesome";
	font-style: normal;
	font-weight: normal;
	src: url("type/fa-solid-900.woff") format("woff"),
		 url("type/fa-solid-900.ttf") format("truetype");
}
@font-face {
	font-family: "Font Awesome Brands";
	font-style: normal;
	font-weight: normal;
	src: url("type/fa-brands-400.woff") format("woff"),
		 url("type/fa-brands-400.ttf") format("truetype");
}
html {
	font-size: calc( 16px + (24 - 16) * (100vw - 440px) / (1900 - 440) );
	min-height: 100vh;
}
.clearfix::after,
.container::after {
	display: block;
	content: " ";
	clear: both;
}
.clear {
	clear: both;
}
body {
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
	/*
	background-color: rgba(60,60,60,1);
	background-image: radial-gradient(ellipse at center, rgba(155,201,192,0.6) 0%,rgba(0,139,130,0.6) 100%);
	*/
	background-color: #123d3c;
	background-image: linear-gradient(45deg, rgba(119,99,82,0.6) 0%,rgba(93,100,89,0) 50%,rgba(66,101,96,0.6) 100%), radial-gradient(ellipse at center, rgba(190,199,200,0.6) 0%,rgba(95,95,100,0.6) 100%);
}

input, textarea, button {
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
}
a {
	text-decoration: none;
	color: rgba(255,206,31,0.6);
	color: var(--feat-color-06);
	transition: color 0.3s;
}
a:hover {
	color: rgba(255,206,31,1);
	color: var(--feat-color-10);
}
.bg-alt a {
	color: rgba(0,139,130,0.6);
	color: var(--alt-color-06);
}
.bg-alt a:hover {
	color: rgba(0,139,130,1);
	color: var(--alt-color-10);
}
ul, ol {
	list-style-type: none;
} 
::-webkit-input-placeholder {
	color: rgba(255,255,255,0.6);
	color: var(--txt-color-06);
}
:-moz-placeholder {
	color: rgba(255,255,255,0.6);
	color: var(--txt-color-06);
	opacity: 1;
}
::-moz-placeholder {
	color: rgba(255,255,255,0.6);
	color: var(--txt-color-06);
	opacity: 1;
}
:-ms-input-placeholder {
	color: rgba(255,255,255,0.6);
	color: var(--txt-color-06);
}
::-ms-input-placeholder {
	color: rgba(255,255,255,0.6);
	color: var(--txt-color-06);
}
:placeholder-shown {
	color: rgba(255,255,255,0.6);
	color: var(--txt-color-06);
}
.bg-alt ::-webkit-input-placeholder {
	color: rgba(255,255,255,0.6);
	color: var(--txt-color-06);
}
.bg-alt :-moz-placeholder {
	color: rgba(255,255,255,0.6);
	color: var(--txt-color-06);
	opacity: 1;
}
.bg-alt ::-moz-placeholder {
	color: rgba(255,255,255,0.6);
	color: var(--txt-color-06);
	opacity: 1;
}
.bg-alt :-ms-input-placeholder {
	color: rgba(255,255,255,0.6);
	color: var(--txt-color-06);
}
.bg-alt ::-ms-input-placeholder {
	color: rgba(255,255,255,0.6);
	color: var(--txt-color-06);
}
.bg-alt :placeholder-shown {
	color: rgba(255,255,255,0.6);
	color: var(--txt-color-06);
}
.input-container::after,
.input-container label::after {
	display: block;
	content: " ";
	clear: both;
}
.input-container {
	padding: 10px;
	box-sizing: border-box;
	position: relative;
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
}
.input-container.input-container-alt {
	padding: 10px 0px;
}
.input-container label {
	font-size: 0.8rem;
}
.input-container label span {
	display: inline-block;
	user-select: none;
	padding: 0px 10px;
	box-sizing: border-box;
}
.input-disabled {
	opacity: 0.4;
}
.input-disabled input, 
.input-disabled textarea {
	user-select: none;
}
.checkbox-button label,
.radio-button label {
	min-height: 2rem;
	line-height: 2rem;
	box-sizing: border-box;
	cursor: pointer;
	opacity: 0.8;
	width: 100%;
	background-color: rgba(255,255,255,0.1);
	display: block;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0);
	transition: all 0.3s;
	position: relative;
	font-size: 0.8rem;
}
.checkbox-button label::after,
.radio-button label::after {
	content: " ";
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	border: 1px solid rgba(255,255,255,1);
	border: 1px solid var(--brdr-color-10);
	box-sizing: border-box;
	z-index: 20;
	pointer-events: none;
	opacity: 0.2;
	transition: border 0.3s, opacity 0.3s;
}
.checkbox-button label::before,
.radio-button label::before {
	display: block;
	width: 2rem;
	height: 2rem;
	font-family: "Font Awesome";
	/*content: "\f00c";*/
	content: "\f111";
	line-height: 2rem;
	text-align: center;
	font-size: 0.8rem;
	opacity: 0.2;
	transition: opacity 0.3s, color 0.3s;
	float: left;
}
.checkbox-classic label,
.radio-classic label {
	display: block;
	min-height: 2rem;
	line-height: 2rem;
	font-size: 0.8rem;
	cursor: pointer;
	opacity: 0.8;
	transition: opacity 0.3s, background-color 0.3s, color 0.3s;
	float: left;
	position: relative;
	padding-left: 2rem;
	user-select: none;
}
.checkbox-classic label::before,
.radio-classic label::before {
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 2rem;
	height: 2rem;
	font-family: "Font Awesome";
	content: " ";
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
	line-height: 2rem;
	text-align: center;
	font-size: 0.8rem;
	transition: opacity 0.3s, color 0.3s, border 0.3s;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2) inset;
	background-color: rgba(255,255,255,0.05);
	float: left;
	pointer-events: none;
	opacity: 0.8;
}
.checkbox-classic label::after,
.radio-classic label::after {
	content: " ";
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 2rem;
	height: 2rem;
	border: 1px solid rgba(255,255,255,1);
	border: 1px solid var(--brdr-color-10);
	box-sizing: border-box;
	z-index: 20;
	pointer-events: none;
	opacity: 0.2;
	transition: border 0.3s, opacity 0.3s;
}
.checkbox-button label:hover::after,
.radio-button label:hover::after, 
.checkbox-classic label:hover::after,
.radio-classic label:hover::after {
	opacity: 0.6;
}
.radio-classic label::after {
	border-radius: 1rem;
}
.radio-classic label::before {
	content: "\f111";
	border-radius: 1rem;
	font-size: 0.8rem;
}
.checkbox-classic label:hover::before,
.radio-classic label:hover::before {
	opacity: 1;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4) inset;
}
.checkbox-button label:hover, 
.radio-button label:hover {
	opacity: 1;
	box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.2);
	transform: translate3d(0px, -1px, 10px);
}
.checkbox-button input[type="checkbox"]:checked ~ label, 
.radio-button input[type="radio"]:checked ~ label {
	opacity: 1;
}

.checkbox-classic input[type="checkbox"]:checked ~ label, 
.radio-classic input[type="radio"]:checked ~ label {
	opacity: 1;
}
.checkbox-button input[type="checkbox"]:checked ~ label::before,
.checkbox-classic input[type="checkbox"]:checked ~ label::before,
.radio-button input[type="radio"]:checked ~ label::before,
.radio-classic input[type="radio"]:checked ~ label::before {
	opacity: 1;
	content: "\f00c";
}
.checkbox-button input[type="checkbox"]:checked ~ label::after,
.checkbox-classic input[type="checkbox"]:checked ~ label::after,
.radio-button input[type="radio"]:checked ~ label::after,
.radio-classic input[type="radio"]:checked ~ label::after {
	opacity: 1;
}
.checkbox-alt label {
	display: block;
	min-height: 2rem;
	line-height: 2rem;
	font-size: 0.8rem;
	cursor: pointer;
	opacity: 0.8;
	transition: opacity 0.3s, background-color 0.3s, color 0.3s;
	float: left;
	position: relative;
	padding-left: calc(2rem + 10px);
	user-select: none;
}
.checkbox-alt label::before {
	display: block;
	position: absolute;
	top: 0.5rem;
	left: 0px;
	width: 2rem;
	height: 1rem;
	font-family: "Font Awesome";
	content: " ";
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
	line-height: 2rem;
	text-align: center;
	font-size: 0.8rem;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2) inset;
	transition: opacity 0.3s, color 0.3s, border 0.3s, box-shadow 0.3s;
	background-color: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,1);
	border: 1px solid var(--brdr-color-10);
	box-sizing: border-box;
	float: left;
	pointer-events: none;
	opacity: 0.4;
}
.checkbox-alt label::after {
	content: " ";
	display: block;
	position: absolute;
	top: calc(0.5rem + 4px);
	left: 4px;
	width: calc(1rem - 8px);
	height: calc(1rem - 8px);
	z-index: 20;
	pointer-events: none;
	opacity: 0.2;
	transition: opacity 0.3s, left 0.3s;
	background-color: rgba(255,255,255,1);
}
.checkbox-alt label:hover::after {
	opacity: 0.6;
}
.checkbox-alt label:hover::before {
	opacity: 0.8;
}
.checkbox-alt input[type="checkbox"]:checked ~ label {
	opacity: 0.8;
}
.checkbox-alt input[type="checkbox"]:checked ~ label::before {
	opacity: 0.8;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4) inset;
}
.checkbox-alt input[type="checkbox"]:checked ~ label::after {
	opacity: 0.8;
	left: calc(1rem + 4px);
}
.checkbox-classic label.checkbox-multiline {
	line-height: normal;
}
.radio-switch .switch-container {
	overflow: hidden;
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: space-around;
}
.radio-switch .switch-container::after {
	content: " ";
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	border: 1px solid rgba(255,255,255,1);
	border: 1px solid var(--brdr-color-10);
	box-sizing: border-box;
	z-index: 20;
	pointer-events: none;
	opacity: 0.2;
	transition: border 0.3s, opacity 0.3s;
}
.radio-switch .switch-container:hover::after {
	opacity: 0.6;
}
.radio-switch label {
	display: block;
	min-height: 2rem;
	line-height: 2rem;
	font-size: 0.8rem;
	box-sizing: border-box;
	cursor: pointer;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2) inset;
	opacity: 0.8;
	transition: opacity 0.3s, background-color 0.3s, color 0.3s, box-shadow 0.3s;
	background-color: rgba(255,255,255,0.1);
	flex: auto;
}
.radio-switch label.default {
	opacity: 1;
	background-color: rgba(0,0,0,0.1);
	background-color: var(--dark-color-01);
}
.radio-switch label span {
	width: calc(100% - 20px);
	text-align: center;	
}
.radio-switch input[type="radio"]:checked + label {
	opacity: 1;
	background-color: rgba(255,255,255,0.2);
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
}
.radio-switch label:hover {
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4) inset;
	background-color: rgba(255,255,255,0.1);
}
.text-classic label, .select-classic label {
	display: block;
	min-height: 2rem;
	font-size: 0.8rem;
	box-sizing: border-box;
	padding: 0px 10px;
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
	transition: color 0.3s;
}
.text-classic:focus-within label, .select-classic:focus-within label {
	color: rgba(255,255,255,1);
}
.text-classic input {
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	display: block;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2) inset;
	background-color: rgba(255,255,255,0.05);
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
	min-height: 2rem;
	line-height: 2rem;
	font-size: 0.8rem;
	box-sizing: border-box;
	padding: 0px 10px;
	border: 1px solid rgba(255,255,255,0.2);
	border: 1px solid var(--brdr-color-02);
	transition: color 0.3s, box-shadow 0.3s, border 0.3s;
	float: left;
	width: 100%;
}
.text-textarea label {
	padding-bottom: 10px;
}
.text-classic .textarea-container {
	display: block;
	background-color: rgba(255,255,255,0.05);
	box-sizing: border-box;
	padding: 10px;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2) inset;
	border: 1px solid rgba(255,255,255,0.2);
	border: 1px solid var(--brdr-color-02);
	transition: color 0.3s, box-shadow 0.3s, border 0.3s;
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
	float: left;
	width: 100%;
}
.text-classic .textarea-container textarea {
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	display: block;
	background-color: transparent;
	color: inherit;
	min-height: 4rem;
	line-height: auto;
	font-size: 0.8rem;
	box-sizing: border-box;
	border: none;
	transition: color 0.3s, box-shadow 0.3s;
	width: 100%;
	resize: none;
}
.text-classic input:focus, 
.text-classic .textarea-container:focus-within,
.select-classic .select-container:focus-within {
	border: 1px solid rgba(255,255,255,0.6);
	border: 1px solid var(--brdr-color-06);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4) inset;
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
}
.text-classic input:hover, 
.text-classic .textarea-container:hover,
.select-classic .select-container:hover {
	border: 1px solid rgba(255,255,255,0.6);
	border: 1px solid var(--brdr-color-06);
}
.select-classic .select-container {
	display: block;
	background-color: rgba(255,255,255,0.05);
	min-height: 2rem;
	box-sizing: border-box;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2) inset;
	border: 1px solid rgba(255,255,255,0.2);
	border: 1px solid var(--brdr-color-02);
	transition: color 0.3s, box-shadow 0.3s;
	width: 100%;
	overflow: hidden;
	position: relative;
}
.select-classic .select-container::after {
	display: block;
	content: "\f107";
	width: 2rem;
	height: 2rem;
	position: absolute;
	top: 0px;
	right: 0px;
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
	text-align: center;
	line-height: 2rem;
	font-family: "Font Awesome";
	font-size: 0.8rem;
	z-index: 1;
	opacity: 0.6;
	transition: opacity 0.3s;
}
.select-classic .select-container:focus-within::after,
.select-classic .select-container:hover::after {
	opacity: 1;
}
.select-classic .select-container select {
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	display: block;
	background-color: transparent;
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
	min-height: 2rem;
	line-height: 2rem;
	font-size: 0.8rem;
	box-sizing: border-box;
	padding: 0px 10px;
	border: none;
	transition: color 0.3s, box-shadow 0.3s, opacity 0.3s;
	float: left;
	width: calc(100% + 30px);
	position: relative;
	z-index: 3;
	cursor: pointer;
	opacity: 0.8;
}
.select-classic .select-container select:focus {
	opacity: 1;
}
.select-classic .select-container select option {
	color: rgba(0,0,0,0.8);
	color: var(--dark-color-08);
	padding: 10px;
}
.text-alt {
	padding-top: 2rem;
	position: relative;
}
.text-alt input {
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	display: block;
	background-color: transparent;
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
	min-height: 2rem;
	line-height: 2rem;
	font-size: 0.8rem;
	box-sizing: border-box;
	padding: 0px 10px;
	border: none;
	border-bottom: 1px solid rgba(255,255,255,0.2);
	border-bottom: 1px solid var(--brdr-color-02);
	transition: color 0.3s, box-shadow 0.3s;
	float: left;
	width: 100%;
}
.text-alt input + label {
	position: absolute;
	display: block;
	padding: 0px 10px;
	transition: all 0.3s;
	top: 1rem;
	font-size: 0.6rem;
	height: 1rem;
	line-height: 1rem;
	opacity: 0.8;
}
.text-alt input:placeholder-shown + label {
	height: 2rem;
	line-height: 2rem;
	font-size: 0.8rem;
	top: 2rem;
}
.text-alt input:placeholder-shown {
	border-bottom: 1px solid rgba(255,255,255,0.2);
	border-bottom: 1px solid var(--brdr-color-02);
}
.text-alt input:focus + label {
	top: 1rem;
	font-size: 0.6rem;
	height: 1rem;
	line-height: 1rem;
	opacity: 1;
}
.text-alt input:focus {
	border-bottom: 1px solid rgba(255,255,255,0.1);
	border-bottom: 1px solid var(--brdr-color-01);
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
}
.column-form {
	text-align: left;
}
.column-form label {
	font-weight: bold;
	opacity: 0.6;
}
.column-form::after {
	display: block;
	content: " ";
	clear: both;
}
.column-form .input-container {
	display: block;
	float: left;
}
.column-form .form-submit {
	margin: 0px auto;
}
.fr12 { 
	width: 100%; 
}
.fr11 { 
	width: 91.66%; 
}
.fr10 { 
	width: 83.33%; 
}
.fr9 { 
	width: 75%; 
}
.fr8 { 
	width: 66.66%; 
}
.fr7 { 
	width: 58.33%; 
}
.fr6 { 
	width: 50%; 
}
.fr5 { 
	width: 41.66%; 
}
.fr4 { 
	width: 33.33%; 
}
.fr3 { 
	width: 25%; 
}
.fr2 { 
	width: 16.66%; 
}
.fr1 { 
	width: 8.33%; 
}
.form-info {
	display: block;
	font-size: 0.8rem;
	margin-bottom: 20px;
}


input[type="range"] {
	background: transparent;
	width: 100%;
	opacity: 0.6;
	transition: opacity 0.3s;
	margin: 1rem 0px;
}
input[type="range"]:hover {
	opacity: 0.8;
}
input[type="range"]::-webkit-slider-runnable-track {
	width: 100%;
	height: 0.6rem;
	cursor: pointer;
	background: rgba(0,0,0,0.4);
	background: var(--dark-color-04);
	border: 1px solid rgba(255,255,255,0.6);
	border: 1px solid var(--brdr-color-06);
	transition: background 0.3s, border 0.3s;
	-webkit-appearance: none;
	box-sizing: border-box;
}
input[type="range"]:hover::-webkit-slider-runnable-track, 
input[type="range"]:focus::-webkit-slider-runnable-track {
	background: rgba(0,0,0,0);
	background: var(--dark-color-00);
	border: 1px solid rgba(255,255,255,6);
	border: 1px solid var(--brdr-color-06);
}
input[type="range"]::-webkit-slider-thumb {
	height: 2rem;
	width: 1rem;
	background: rgba(255,255,255,0.6);
	border: 1px solid rgba(255,255,255,1);
	border: 1px solid var(--brdr-color-10);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0);
	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;
}
input[type="range"]:hover::-webkit-slider-thumb, 
input[type="range"]:focus::-webkit-slider-thumb {
	background: rgba(255,255,255,1);
	box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.2);
	transform: translate3d(0px, -1px, 10px);
}
input[type="range"]::-moz-range-track {
	width: 100%;
	height: 0.6rem;
	cursor: pointer;
	background: rgba(0,0,0,0.4);
	background: var(--dark-color-04);
	border: 1px solid rgba(255,255,255,0.6);
	border: 1px solid var(--brdr-color-06);
	transition: background 0.3s, border 0.3s;
	box-sizing: border-box;
}
input[type="range"]:hover::-moz-range-track, 
input[type="range"]:focus::-moz-range-track {
	background: rgba(0,0,0,0);
	background: var(--dark-color-00);
	border: 1px solid rgba(255,255,255,6);
	border: 1px solid var(--brdr-color-06);
}


input[type="range"]::-moz-range-thumb {
	height: 2rem;
	width: 1rem;
	background: rgba(255,255,255,0.6);
	border: 1px solid rgba(255,255,255,1);
	border: 1px solid var(--brdr-color-10);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0);
	cursor: pointer;
	margin-top: -0.8rem;
	border-radius: 0px;
	transition: background 0.3s, box-shadow 0.3s ease-out, transform 0.3s ease-out, color 0.3s, border 0.3s;
}
input[type="range"]:hover::-moz-range-thumb, 
input[type="range"]:focus::-moz-range-thumb {
	background: rgba(255,255,255,1);
	box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.2);
	transform: translate3d(0px, -1px, 10px);
}



input[type="range"]::-ms-track {
	width: 100%;
	height: 0.6rem;
	cursor: pointer;
	background: rgba(0,0,0,0.4);
	background: var(--dark-color-04);
	border: 1px solid rgba(255,255,255,0.6);
	border: 1px solid var(--brdr-color-06);
	transition: background 0.3s, border 0.3s;
	box-sizing: border-box;
}
input[type="range"]:hover::-ms-track, 
input[type="range"]:focus::-ms-track {
	background: rgba(0,0,0,0);
	background: var(--dark-color-00);
	border: 1px solid rgba(255,255,255,6);
	border: 1px solid var(--brdr-color-06);
}


/*input[type=range]::-ms-fill-lower {
  background: #ac51b5;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #ac51b5;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}*/
input[type="range"]::-ms-thumb {
	height: 2rem;
	width: 1rem;
	background: rgba(255,255,255,0.6);
	border: 1px solid rgba(255,255,255,1);
	border: 1px solid var(--brdr-color-10);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0);
	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;
}
input[type="range"]:hover::-ms-thumb, 
input[type="range"]:focus::-ms-thumb {
	background: rgba(255,255,255,1);
	box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.2);
	transform: translate3d(0px, -1px, 10px);
}


/*input[type=range]:focus::-ms-fill-lower {
  background: #ac51b5;
}
input[type=range]:focus::-ms-fill-upper {
  background: #ac51b5;
}*/





input[type="submit"], 
input[type="button"], 
button[type="submit"], 
button[type="button"],
a.button,
label.button {
	display: block;
	background-color: rgba(255,255,255,0.1);
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
	min-height: 2rem;
	font-size: 0.8rem;
	box-sizing: border-box;
	cursor: pointer;
	padding: 0px 10px;
	/*border: none;*/
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0);
	border: 1px solid rgba(255,255,255,0.2);
	border: 1px solid var(--brdr-color-02);
	transition: box-shadow 0.3s ease-out, transform 0.3s ease-out, color 0.3s, border 0.3s;
}
input[type="submit"].alt, 
input[type="button"].alt, 
button[type="submit"].alt, 
button[type="button"].alt, 
a.button.alt, 
label.button.alt {
	background-color: rgba(0,0,0,0.4);
	background-color: var(--dark-color-04);
}
input[type="submit"]:hover, 
input[type="button"]:hover, 
button[type="submit"]:hover, 
button[type="button"]:hover, 
a.button:hover, 
label.button:hover {
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
	border: 1px solid rgba(255,255,255,0.8);
	border: 1px solid var(--brdr-color-08);
	box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.2);
	transform: translate3d(0px, -1px, 10px);
}
input[type="submit"].marked, 
input[type="button"].marked, 
button[type="submit"].marked, 
button[type="button"].marked, 
a.button.marked, 
label.button.marked {
	border-color: rgba(255,206,31,0.2);
	border-color: var(--feat-color-02);
	color: rgba(255,206,31,0.6);
	color: var(--feat-color-06);
}
input[type="submit"].marked:hover, 
input[type="button"].marked:hover, 
button[type="submit"].marked:hover, 
button[type="button"].marked:hover, 
a.button.marked:hover, 
label.button.marked:hover {
	border-color: rgba(255,206,31,0.4);
	border-color: var(--feat-color-04);
	color: rgba(255,206,31,0.8);
	color: var(--feat-color-08);
}

.login-submit input[type="submit"] {
	width: 100%;
	margin: 0px auto;
}

.input-file {
	display: block;
	position: relative;
	background-color: rgba(255,255,255,0.1);
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
	min-height: 4rem;
	font-size: 0.8rem;
	box-sizing: border-box;
	cursor: pointer;
	padding: 10px;
	padding-left: 4rem;
	/*border: none;*/
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0);
	border: 1px solid rgba(255,255,255,0.2);
	border: 1px solid var(--brdr-color-02);
	transition: box-shadow 0.3s ease-out, transform 0.3s ease-out, color 0.3s, border 0.3s;
}
.input-file:hover {
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
	border: 1px solid rgba(255,255,255,0.8);
	border: 1px solid var(--brdr-color-08);
	box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.2);
	transform: translate3d(0px, -1px, 10px);
}
.input-file::before {
	display: block;
	content: '';
	width: 4rem;
	height: 4rem;
	position: absolute;
	top: 0px;
	left: 0px;
	font-size: 2.4rem;
	line-height: 4rem;
	text-align: center;
	font-family: "Font Awesome";
	color: rgba(255,255,255,0.6);
	color: var(--txt-color-06);
}
.input-file::after {
	display: block;
	content: '';
	clear: both;
}
.input-file span {
	display: block;
	width: 100%;
}
.input-file .file-name {
	font-style: italic;
	opacity: 0.5;
	margin-top: 5px;
}
.input-file.file-image::before {
	content: '\f03e';
}
.input-file.file-image-capture::before {
	content: '\f030';
}

/* DATEPICKER */

.ui-datepicker {
	width: 14rem;
	min-height: 16rem;
	position: absolute;
	display: none;
	top: auto;
	z-index: 70 !important;
	font-size: 0.8rem;
	background-color: rgba(0,0,0,0.8);
	background-color: var(--dark-color-08);
	padding: 0.5rem;
	box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.2);
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
	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: "Font Awesome";
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
}
.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: 0.8rem;
	font-weight: bold;
	text-transform: uppercase;
}
.ui-datepicker-month {
	
}
.ui-datepicker-year {
	background: transparent;
	border: none;
	font-size: 0.8rem;
	font-weight: bold;
	height: 1.8rem;
	line-height: 1.8rem;
	color: rgba(255,206,31,0.8);
	color: var(--feat-color-08);
	position: relative;
}
.ui-datepicker-year option {
	color: rgba(0,0,0,0.8);
	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: 0.6rem;
}
.ui-datepicker-calendar th span {
	display: block;
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
	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 rgba(255,255,255,0.1);
	border: 1px solid var(--brdr-color-01);
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
	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 rgba(255,255,255,0.8);
	border: 1px solid var(--brdr-color-08);
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
}
.ui-datepicker-calendar .ui-datepicker-today a {
	border-color: rgba(255,206,31,0.2);
	border-color: var(--feat-color-02);
	color: rgba(255,206,31,0.6);
	color: var(--feat-color-06);
}
.ui-datepicker-calendar .ui-datepicker-today a:hover, 
.ui-datepicker-calendar .ui-datepicker-current-day.ui-datepicker-today a {
	border-color: rgba(255,206,31,0.4);
	border-color: var(--feat-color-04);
	color: rgba(255,206,31,0.8);
	color: var(--feat-color-08);
}
.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;
}
.datetime label {
	height: 2rem;
	width: calc(30% - 10px);
	float: left;
	margin-right: 20px;
	line-height: 2rem;
}
.datetime .datepicker {
	height: 2rem;
	width: calc(40% - 20px);
	float: left;
	margin-right: 20px;
}
.datetime .time {
	height: 2rem;
	width: calc(30% - 10px);
	float: left;
}
.disabled {
	opacity: 0.3;
}
.hidden-input {
	display: block;
	width: 0px;
	height: 0px;
	position: absolute;
	overflow: hidden;
	z-index: 1;
	visibility: hidden;
}
.wp-block-table {
	width: 100%;
	border: 1px solid rgba(255,255,255,0.4);
	border: 1px solid var(--brdr-color-04);
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
	font-size: 0.8rem;
}
.wp-block-table-lite {
	min-width: 100%;
	font-size: 11px;
	line-height: 14px;
	margin-bottom: 20px;
}
.wp-block-table, .wp-block-table th, .wp-block-table td {
	border-collapse: collapse;
	border-bottom: 1px solid rgba(255,255,255,0.4);
	border-bottom: 1px solid var(--brdr-color-04);
	text-align: left;
}
.wp-block-table th, .wp-block-table td {
	padding: 0.5rem;
}
.wp-block-table-lite th, .wp-block-table-lite td {
	padding: 10px;
}
.wp-block-table th {
	background-color: rgba(255,255,255,0.2);
	background-color: var(--brdr-color-02);
	text-transform: uppercase;
}
.wp-block-table tr {
	background-color: rgba(255,255,255,0.1);
	background-color: var(--brdr-color-01);
	transition: background-color 0.3s;
}
.wp-block-table tr:hover {
	background-color: rgba(255,255,255,0.2);
	background-color: var(--brdr-color-02);
}
.wp-block-table td {

}




.page-min-height {
	display: block;
	min-height: calc(100vh - 160px);
}
.sub-header + .page-min-height {
	min-height: calc(100vh - 201px);
}
.main-header {	
	display: block;
	width: calc(100% - 40px);
	height: 60px;
	padding: 0px 20px;
	padding-top: 20px;
	background-color: rgba(0,0,0,0.6);
	background-color: var(--header-bg-color-1);
	position: relative;
	backface-visibility: hidden;
	z-index: 60;
	transition: background-color 0.3s;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}
.menu-logo {
	display: block;
	width: 40px;
	height: 40px;
	position: absolute;
	overflow: hidden;
	/*background-image: url(img/header-logo.svg);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;*/
	opacity: 0.6;
	transition: opacity 0.3s;
}
.menu-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.menu-logo:hover {
	opacity: 0.8;
}
.header-menu-wrapper {
	float: right;
	margin-right: 40px;
	/*transition: opacity 0.3s;
	transition-delay: 0.6s;*/
}
.header-menu-wrapper .header-menu {
	display: block;
}
.header-menu-wrapper .header-menu .menu-admin {
	display: block;
	width: 40px;
	height: 40px;
	float: left;
	line-height: 40px;
	text-align: center;
	font-size: 20px;
	color: rgba(255,206,31,0.6);
}
.header-menu-wrapper .header-menu .menu-admin:hover {
	color: rgba(255,206,31,1);
}
.header-menu-wrapper .header-menu .menu-admin::before {
	content: "\f044";
	font-family: "Font Awesome";
}
.sub-header {
	display: block;
	background-color: rgba(255,206,31,0.1);
	background-color: var(--feat-color-01);
	border-bottom: 1px solid rgba(255,206,31,0.2);
	border-bottom: 1px solid var(--feat-color-02);
	padding: 10px 20px;
}
.header-menu-wrapper .header-menu ul, 
.sub-header ul {
	display: block;
	float: right;
}
.header-menu-wrapper .header-menu ul li {
	display: none;
	height: 20px;
	float: left;
	padding: 0px 20px;
}
.header-menu-wrapper .header-menu ul li:nth-child(-n+3) {
	display: block;
}
.sub-header ul li {
	height: 20px;
	float: left;
	padding: 0px 20px;
}
.header-menu-wrapper .header-menu ul li a {
	display: block;
	height: 40px;
	line-height: 40px;
	font-weight: bold;
	font-size: 16px;
	text-transform: uppercase;
	color: rgba(255,255,255,0.6);
	position: relative;
	transition: color 0.3s;
	white-space: nowrap;
	user-select: none;
}
.sub-header ul li a {
	display: block;
	height: 20px;
	line-height: 20px;
	font-weight: bold;
	font-size: 16px;
	text-transform: uppercase;
	color: rgba(255,206,31,0.6);
	color: var(--feat-color-06);
	position: relative;
	transition: color 0.3s;
	white-space: nowrap;
}
.sub-header ul li a:hover {
	color: rgba(255,206,31,0.8);
	color: var(--feat-color-08);
}
.header-menu-wrapper .header-menu ul li a:hover {
	color: rgba(255,255,255,1);
}
.header-menu-wrapper .header-menu ul li a::after {
	content: " ";
	display: block;
	position: absolute;
	width: calc(100% + 40px);
	height: 60px;
	box-sizing: border-box;
	border-bottom: 6px solid rgba(255,255,255,0);
	top: 0px;
	left: -20px;
	pointer-events: none;
	transform: scale(0.1,1);
	transition: border 0.3s, transform 0.3s;
}
.header-menu-wrapper .header-menu ul li a:hover::after {
	border-bottom: 6px solid rgba(255,255,255,0.8);
	transform: scale(1,1);
}
.admin-info {
	color: rgba(255,206,31,0.8);
	color: var(--feat-color-08);
}
.bg-alt .admin-info {
	color: rgba(0,139,130,0.8);
	color: var(--alt-color-08);
}
.post-card-info .admin-info {
	color: rgba(255,206,31,0.8);
	color: var(--feat-color-08);
}
.menu-close {
	display: none;
}
.alt-menu-wrapper {
	position: absolute;
	top: 80px;
	right: 0px;
	background-color: rgba(0,0,0,0.9);
	background-color: var(--dark-color-09);
	width: 50vw;
	overflow: hidden;
	box-sizing: border-box;
	/*padding: 10px 0px;*/
	max-height: 0px;
	/*max-height: calc(100vh - 80px);*/
	transition: max-height 0.6s, width 0.3s;
}
.push-menu-wrapper {
	display: block;
	position: relative;
	width: 100%;
	overflow: hidden;
	max-height: 0px;
	/*transition: max-height 0.6s;*/
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}
.push-menu-wrapper .push-menu {
	display: block;
	padding: 10px 0px;
	border-top: 1px solid rgba(255,255,255,0.2);
	border-top: 1px solid var(--brdr-color-02);
}
.push-menu-wrapper ul {
	display: block;
	padding: 0px 10px;
}
.push-menu-wrapper ul li {
	display: block;
	margin-bottom: 10px;
}
.push-menu-wrapper ul li:last-child {
	margin-bottom: 0px;
}
.push-menu-wrapper ul li a, 
.push-menu-wrapper ul li div {
	width: 100%;
	min-height: calc(2rem + 20px);
	background-color: rgba(255,255,255,0.1);
	display: block;
	transition: opacity 0.3s;
	position: relative;
	font-size: 0.7rem;
	opacity: 0.8;
	box-sizing: border-box;
	padding: 10px;
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
}
.push-menu-wrapper ul li .push-icon {
	padding-left: calc(2rem + 20px);
}
.push-menu-wrapper ul li .push-icon::before {
	content: " ";
	display: block;
	position: absolute;
	top: 10px;
	left: 10px;
	width: 2rem;
	height: 2rem;
	line-height: 2rem;
	font-size: 1.4rem;
	text-align: center;
	font-family: "Font Awesome";
}
.push-menu-wrapper ul li .push-icon-trophy::before {
	content: "\f091";
}
.push-menu-wrapper ul li .push-icon-warning::before {
	content: "\f071";
}
.push-menu-wrapper ul li .push-icon-warning::before {
	content: "\f071";
}
.push-menu-wrapper ul li .push-icon-mail::before {
	content: "\f0e0";
}
.push-menu-wrapper ul li .push-icon-calendar::before {
	content: "\f073";
}
.push-menu-wrapper ul li .push-icon-birthday::before {
	content: "\f1fd";
}
.push-menu-wrapper ul li .push-icon-maintence::before {
	content: "\f0ad";
}
.push-menu-wrapper ul li a:hover, 
.push-menu-wrapper ul li div:hover {
	opacity: 0.8
}
.push-menu-wrapper ul li a::after, 
.push-menu-wrapper ul li div::after {
	content: " ";
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	border: 1px solid rgba(255,255,255,1);
	border: 1px solid var(--brdr-color-10);
	box-sizing: border-box;
	z-index: 20;
	pointer-events: none;
	opacity: 0.8;
	transition: border 0.3s, opacity 0.3s;
}
.push-menu-wrapper ul li .push-warning {
	/*color: rgba(160,50,70,0.8);*/
	color: rgba(255,30,30,1);
	color: var(--warn-color-10);
}
.push-menu-wrapper ul li .push-warning::after {
	border: 1px solid rgba(255,30,30,1);
	border: 1px solid var(--warn-color-10);
}
.push-menu-wrapper ul li .push-attention {
	color: rgba(255,206,31,1);
	color: var(--feat-color-10);
}
.push-menu-wrapper ul li .push-attention::after {
	border: 1px solid rgba(255,206,31,1);
	border: 1px solid var(--feat-color-10);
}
.app-menu-wrapper {
	display: block;
	position: relative;
	width: 100%;
	overflow: hidden;
	max-height: 0px;
	/*transition: max-height 0.6s;*/
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}
.app-menu-wrapper .app-menu {
	display: block;
	padding: 10px;
	border-top: 1px solid rgba(255,255,255,0.2);
	border-top: 1px solid var(--brdr-color-02);
	box-sizing: border-box;
}
.app-menu-wrapper .app-menu ul {
	display: grid;
	grid-column-gap: 10px;
	grid-template-columns: repeat(12, 1fr);
	justify-content: start;
	align-content: start;
}
.app-menu-wrapper .app-menu ul li {
	display: block;
	width: 100%;
	grid-column: span 2;
	position: relative;
}

.app-menu-wrapper .app-menu ul li .app-menu-aspect {
	width: 100%;
	padding-bottom: 100%;
	position: relative;
	overflow: hidden;
}
.app-menu-wrapper .app-menu ul li .app-menu-aspect a {
	display: block;
	background-color: rgba(255,255,255,0.1);
	position: absolute;
	transition: all 0.3s;
	overflow: hidden;
	width: calc(100% - 2px);
	height: calc(100% - 2px);
	top: 1px;
	left: 1px;
	user-select: none;
	cursor: pointer;
	box-shadow: 0px 0px 6px 0px rgba(0,0,0,0);
}
.app-menu-wrapper .app-menu ul li .app-menu-aspect a:hover {
	box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.2);
	transform: translate3d(0px, -1px, 10px);
}
.app-menu-wrapper .app-menu ul li .app-menu-aspect a::after {
	content: " ";
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	border: 1px solid rgba(255,255,255,1);
	border: 1px solid var(--brdr-color-10);
	box-sizing: border-box;
	z-index: 20;
	pointer-events: none;
	opacity: 0.2;
	transition: border 0.3s, opacity 0.3s;
}
.app-menu-wrapper .app-menu ul li .app-menu-aspect a:hover::after {
	opacity: 0.6;
}
.app-menu-wrapper .app-menu ul li .app-menu-aspect a img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.3s;
}
#apps-opt:checked ~ #header .alt-menu-wrapper, 
#apps-opt:checked ~ #header .alt-menu-wrapper .app-menu-wrapper, 
#push-opt:checked ~ #header .alt-menu-wrapper, 
#push-opt:checked ~ #header .alt-menu-wrapper .push-menu-wrapper {
	max-height: calc(100vh - 80px);
	transition: max-height 1s;
}



.search-menu-wrapper {
	display: block;
	position: absolute;
	top: 0px;
	right: 110px;
	max-width: 40px;
	width: 100%;
	height: 40px;
	padding: 20px 0px;
	overflow: hidden;
	user-select: none;
	z-index: 70;
	transition: max-width 0.6s ease;
}
.search-menu-wrapper form {
	display: block;
	width: 100%;
	height: 40px;
	position: relative;
}
.search-menu-wrapper #search-value {
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	width: calc(100% - 40px);
	height: 40px;
	line-height: 40px;
	position: absolute;
	top: 0px;
	right: 40px;
	box-sizing: border-box;
	border: none;
	font-size: 16px;
	font-weight: bold;
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
	background: transparent;
}
.search-menu-wrapper .search-menu-btn {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 40px;
	height: 40px;
	overflow: hidden;
}
.search-menu-wrapper .search-menu-btn .search-btn, 
.search-menu-wrapper .search-menu-btn #search-submit {
	width: 40px;
	height: 40px;
	top: 0px;
	left: 0px;
	position: absolute;
	border: none;
	cursor: pointer;
	background: transparent;
}
.search-menu-wrapper .search-menu-btn .search-btn {
	display: block;
	z-index: 72;
}
.search-menu-wrapper .search-menu-btn #search-submit {
	display: none;
	z-index: 71;
}
.search-menu-wrapper .search-menu-btn::after {
	display: block;
	width: 40px;
	height: 40px;
	top: 0px;
	left: 0px;
	position: absolute;
	line-height: 40px;
	font-size: 20px;
	color: rgba(255,255,255,1);
	text-align: center;
	opacity: 0.6;
	transition: opacity 0.3s, color 0.3s;
	font-family: "Font Awesome";
	content: "\f002";
	user-select: none;
}
.search-menu-wrapper form:hover .search-menu-btn::after {
	opacity: 1;
}
.search-menu-wrapper:focus-within {
	max-width: calc(100vw - 200px);
	transition-delay: 0.3s;
}
.search-menu-wrapper:focus-within .search-menu-btn:hover::after {
	color: rgba(255,206,31,1);
	color: var(--feat-color-10);
}
.search-menu-wrapper:focus-within .search-menu-btn .search-btn {
	display: none;
}
.search-menu-wrapper:focus-within .search-menu-btn #search-submit {
	display: block;
	z-index: 73;
}

.search-menu-wrapper:focus-within ~ .header-menu-wrapper {
	opacity: 0;
	transition-delay: 0s;
}
.search-menu-wrapper ::-webkit-input-placeholder {
	color: rgba(255,255,255,0.6);
}
.search-menu-wrapper :-moz-placeholder {
	color: rgba(255,255,255,0.6);
	opacity: 1;
}
.search-menu-wrapper ::-moz-placeholder {
	color: rgba(255,255,255,0.6);
	opacity: 1;
}
.search-menu-wrapper :-ms-input-placeholder {
	color: rgba(255,255,255,0.6);
}
.search-menu-wrapper ::-ms-input-placeholder {
	color: rgba(255,255,255,0.6);
}
.search-menu-wrapper :placeholder-shown {
	color: rgba(255,255,255,0.6);
}



.main-footer {
	display: block;
	/*width: calc(100% - 20px);*/
	width: calc(100% - 160px);
	min-height: 40px;
	padding: 20px 10px 20px 150px;
	background-color: rgba(0,0,0,0.6);
	background-color: var(--footer-bg-color-1);
	position: relative;
	backface-visibility: hidden;
	/*background-image: url(img/footer-logo.svg);
	background-position: 20px 20px;
	background-repeat: no-repeat;*/
}
.footer-logo {
	display: block;
	position: absolute;
	top: 20px;
	left: 20px;
	width: 120px;
	height: 40px;
	overflow: hidden;
}
.footer-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.footer-info {
	display: block;
	float: right;
	clear: both;
	line-height: 20px;
	font-size: 12px;
	padding: 0px 10px;
	color: rgba(255,255,255,0.2);
	text-align: right;
}
.footer-menu-wrapper {
	display: block;
	float: right;
	clear: both;
	line-height: 20px;
	font-size: 12px;
	text-align: right;
}
.footer-menu {
	display: block;
}
.footer-menu ul {
}
.footer-menu ul li {
	display: inline-block;
	padding: 0px 10px;
}
.footer-menu ul li a {
	color: rgba(255,255,255,0.4);
}
.footer-menu ul li a:hover {
	color: rgba(255,255,255,0.8);
}


/*.main-container, 
.hub-container,
.contact-container*/
.container {
	width: 100%;
	max-width: 1200px;
	/*min-height: calc(100vh - 140px);*/
	margin: 0px auto;
	padding: 20px;
	box-sizing: border-box;
		/*background-color: rgba(0,0,20,0.1);*/
}
.videos-container {
	padding: 0px;
}
.grid {
	display: grid;
	grid-column-gap: 20px;
	grid-template-columns: repeat(12, 1fr);
	justify-content: start;
	align-content: start;
}
.menu-btn {
	display: none;
	width: 40px;
	height: 40px;
	cursor: pointer;
	float: left;
	position: relative;
	opacity: 0.6;
	transition: opacity 0.3s;
}
.menu-btn:hover {
	opacity: 1;
}
.menu-btn span,
.menu-btn span::before,
.menu-btn span::after {
	display: block;
	content: " ";
	width: 30px;
	height: 4px;
	background-color: rgba(255,255,255,1);
	margin-left: 5px;
	position: relative;
	margin-top: 18px;
	transition: all 0.3s;
	backface-visibility: hidden;
	transform-origin: left;
}
.menu-btn span::before {
	position: absolute;
	margin-left: 0px;
	margin-top: -10px;
}
.menu-btn span::after {
	position: absolute;
	margin-left: 0px;
	margin-top: 10px;
}
#menu-opt:checked ~ #header .menu-btn span::before {
	transform: rotate(45deg);
	/*margin-left: 4px;
	margin-top: -11px;*/
	width: 34px;
	margin-top: -12px;
	margin-left: 3px;
}
#menu-opt:checked ~ #header .menu-btn span::after {
	transform: rotate(-45deg);
	/*margin-left: 4px;*/
	width: 34px;
	margin-top: 12px;
	margin-left: 3px;
}
#menu-opt:checked ~ #header .menu-btn span {
	background-color: transparent;
}



.apps-btn {
	display: block;
	width: 40px;
	height: 40px;
	cursor: pointer;
	float: right;
	margin-left: 10px;
	position: relative;
	opacity: 0.6;
	transition: opacity 0.3s;
}
.apps-btn:hover {
	opacity: 1;
}
.apps-btn span,
.apps-btn span::before,
.apps-btn span::after {
	display: block;
	content: " ";
	width: 4px;
	height: 4px;
	background-color: rgba(255,255,255,1);
	margin-left: 18px;
	position: relative;
	margin-top: 4px;
	transition: all 0.3s;
	backface-visibility: hidden;
	transform-origin: left;
}
.apps-btn span::before,
.apps-btn span::after {
	width: 100%;
	height: 100%;
}
.apps-btn span:first-child {
	margin-top: 10px;
}
.apps-btn span::before {
	position: absolute;
	margin-left: -8px;
	margin-top: 0px;
}
.apps-btn span::after {
	position: absolute;
	margin-left: 8px;
	margin-top: 0px;
}
#apps-opt:checked ~ #header .apps-btn span:first-child {
	margin-top: 6px;
}
#apps-opt:checked ~ #header .apps-btn span {
	margin-top: 8px;
}
#apps-opt:checked ~ #header .apps-btn span::before {
	margin-left: -12px;
}
#apps-opt:checked ~ #header .apps-btn span::after {
	margin-left: 12px;
}



.push-btn {
	display: block;
	width: 40px;
	height: 40px;
	line-height: 40px;
	font-size: 20px;
	cursor: pointer;
	float: right;
	/*margin-left: 10px;*/
	color: rgba(255,255,255,1);
	text-align: center;
	position: relative;
	opacity: 0.6;
	transition: opacity 0.3s;
}
.push-btn:hover {
	opacity: 1;
}
.push-btn::before {
	font-family: "Font Awesome";
	content: "\f0f3";
}
.push-btn-count {
	width: 16px;
	height: 16px;
	line-height: 16px;
	text-align: center;
	font-size: 10px;
	display: block;
	border-radius: 8px;
	background-color: rgba(255,30,30,0.6);
	background-color: var(--warn-color-06);
	position: absolute;
	top: 0px;
	right: 0px;
	transition: opacity 0.3s;
	opacity: 0;
}


.hub-left-column, 
.trail-left-column {
		/*background-color: rgba(255,0,255,0.2);*/
	/*width: 50%;*/
	width: calc(50% - 10px);
	/*min-height: calc(100vh - 120px);*/
	float: left;
	box-sizing: border-box;
	/*padding: 10px;*/
	transition: padding 0.3s;
}
.trail-full-column {
	clear: both;
}
.trail-score {
	background-color: rgba(255,206,31,0.1);
	background-color: var(--feat-color-01);
	color: rgba(255,206,31,0.8);
	color: var(--feat-color-08);
	padding: 10px;
	margin: 0px 5px;
	margin-bottom: 40px;
	box-sizing: border-box;
	border-top: 1px solid rgba(255,206,31,0.4);
	border-top: 1px solid var(--feat-color-04);
	border-bottom: 1px solid rgba(255,206,31,0.4);
	border-bottom: 1px solid var(--feat-color-04);
	font-size: 0.8rem;
	font-weight: bold;
	line-height: 0.8rem;
	text-align: center;
}
.trail-score::before {
	font-family: "Font Awesome";
	content: "\f091";
}
.trail-score span {
	font-size: 1.6rem;
	line-height: 1.6rem;
}
.trail-top-border {
	border-top: 1px solid rgba(255,255,255,0.1);
	border-top: 1px solid var(--brdr-color-01);
	padding-top: 20px;
}
.hub-right-column,
.trail-right-column {
	width: calc(50% - 10px);
	float: right;
	box-sizing: border-box;
	transition: padding 0.3s;
}

.hub-tile-row {
	position: relative;
	width: 100%;
	padding-bottom: 25%;
	/*margin-bottom: 40px;*/
	margin: 20px 0px;
}
.hub-tile-row-alt {
	padding-bottom: 0px;
}
.trail-tile-row {
	position: relative;
	width: 100%;
	/*margin: 20px 0px;*/
	margin-bottom: 40px;
}

.hub-tile-wrapper {
	width: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	/*padding-bottom: 40px;*/
}
.hub-tile-row-alt .hub-tile-wrapper {
	position: relative;
}
.trail-tile-wrapper {
	width: 100%;
	/*position: absolute;
	top: 0px;
	left: 0px;*/
}
.hub-main-tile {
	width: 25%;
	float: left;
}
.hub-tile-selection {
	float: left;
	transition: all 0.3s;
	width: 10%;
	padding-top: 4px;
	padding-left: 5px;
	position: relative;
	z-index: 28;
	opacity: 0.6
}
.trail-tile-selection {
	float: left;
	width: 100%;
	padding-top: 0px;
	padding-left: 0px;
	z-index: 31;
	opacity: 1;
}
.hub-tile-selection::after {
	content: " ";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 21;
}
.hub-tile {
	width: 33.33%;
	float: left;
	position: relative;
	z-index: 20;
}
.hub-tile-alternative .hub-tile {
	width: 25%;
}
.trail-tiles {
	position: relative;
	width: 20%;
	margin-left: 4px;
	transition: width 0.3s, margin-left 0.3s;
}
.trail-tiles::before {
	content: " ";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 30;
}
.trail-selection-lable {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 31;
}
.trail-tile {
	width: 25%;
	float: left;
	position: relative;
	z-index: 20;
}
.trail-tile.locked {
	opacity: 0.4;
}
.hub-tile-aspect, 
.trail-degree-aspect {
	width: 100%;
	padding-bottom: 100%;
	position: relative;
	overflow: hidden;
}
.hub-tile-aspect.newtile::after {
	display: block;
	width: calc(100% - 20px);
	content: attr(data-new);
	position: absolute;
	font-size: 0.5rem;
	text-transform: uppercase;
	font-weight: bold;
	padding: 2px 4px;
	border-bottom: 1px solid rgba(255,206,31,0.6);
	color: rgba(255,206,31,0.6);
	background: linear-gradient(to bottom, rgba(255,206,31,0) 0%,rgba(255,206,31,0.2) 100%);
	margin: 6px;
	transition: opacity: 0.3;
	opacity: 0;
}
.trail-tile-aspect {
	width: 100%;
	padding-bottom: calc(56.25% + 6px);
	position: relative;
	overflow: hidden;
}
.hub-tile-content {
	display: block;
	background-color: rgba(0,0,0,0.1);
	background-color: var(--dark-color-01);
	position: absolute;
	transition: all 0.3s;
	overflow: hidden;
	width: calc(100% - 2px);
	height: calc(100% - 2px);
	top: 1px;
	left: 1px;
	user-select: none;
	cursor: pointer;
	/*z-index: 30;*/
	box-shadow: 0px 0px 6px 0px rgba(0,0,0,0);
	/*background-image: url(img/bg-texture.svg);
	background-size: cover;
	background-position: center center;*/
}
.trail-tile-content {
	display: block;
	background-color: rgba(0,0,0,0.1);
	background-color: var(--dark-color-01);
	position: absolute;
	transition: all 0.3s;
	overflow: hidden;
	user-select: none;
	cursor: pointer;
	box-shadow: 0px 0px 6px 0px rgba(0,0,0,0);
	/*width: calc(100% - 10px);
	height: calc(100% - 10px);
	top: 5px;
	left: 5px;*/
	width: calc(100% - 2px);
	height: calc(100% - 2px);
	top: 1px;
	left: 1px;
}
.trail-degree-content {
	display: block;
	border-radius: 100%;
	background-color: rgba(255,255,255,0.1);
	position: absolute;
	transition: all 0.3s;
	overflow: hidden;
	user-select: none;
	cursor: pointer;
	box-shadow: 0px 0px 6px 0px rgba(0,0,0,0);
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	top: 5px;
	left: 5px;
}
.trail-degree-content::after {
	content: " ";
	border-radius: 100%;
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border: 1px solid rgba(255,255,255,1);
	border: 1px solid var(--brdr-color-10);
	top: 0px;
	left: 0px;
	position: absolute;
	opacity: 0.2;
	background-color: rgba(255,255,255,0);
	transition: opacity 0.3s, background-color 0.3s, border 0.3s;
	z-index: 19;
	pointer-events: none;
}
.trail-degree-content img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hub-tile-content:hover, 
.trail-tile-content:hover {
	box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.2);
	transform: translate3d(0px, -1px, 10px);
}
.trail-tile-content figure {
	position: relative;
	display: block;
	width: 100%;
	height: calc(100% - 6px);
	border-bottom: 6px solid rgba(255,255,255,0.2);
	opacity: 0;
	transition: all 0.3s;
}
.trail-tile-content:hover figure {
	border-bottom: 6px solid rgba(255,255,255,0.4);
}
.trail-tile.started .trail-tile-content figure {
	border-bottom: 6px solid rgba(255,206,31,0.6);
	border-bottom: 6px solid var(--feat-color-06);
}
.trail-tile.started .trail-tile-content:hover figure {
	border-bottom: 6px solid rgba(255,206,31,0.8);
	border-bottom: 6px solid var(--feat-color-08);
}
.trail-tile.completed .trail-tile-content figure {
	border-bottom: 6px solid rgba(144,206,60,0.6);
	border-bottom: 6px solid var(--done-color-06);
}
.trail-tile.completed .trail-tile-content:hover figure {
	border-bottom: 6px solid rgba(144,206,60,0.8);
	border-bottom: 6px solid var(--done-color-08);
}
.trail-tile .trail-tile-content figure::before {
	position: absolute;
	font-size: 0.6rem;
	line-height: 1rem;
	width: 1rem;
	height: 1rem;
	display: block;
	bottom: 0px;
	right: 0px;
	text-align: center;
	opacity: 0.4;
	font-family: "Font Awesome";
	color: rgba(255,255,255,1);
}
.trail-tile.locked .trail-tile-content figure::before {
	content: "\f023";
}
.trail-tile.completed .trail-tile-content figure::before {
	content: "\f00c";
	color: rgba(144,206,60,1);
	color: var(--done-color-10);
}
.trail-tile.started .trail-tile-content figure::before {
	content: "\f3c5";
	color: rgba(255,206,31,1);
	color: var(--feat-color-10);
}
.hub-tile-content img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.3s;
}
.trail-tile-content img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.5;
	transition: opacity 0.3s;
}
a.hub-tile-content img{
	opacity: 0;
}
.hub-tile-alternative a.hub-tile-content img{
	opacity: 1;
}
.hub-tile-switch:checked ~ .hub-tile-selection {
	width: 75%;
	padding-top: 0px;
	padding-left: 0px;
	z-index: 31;
	opacity: 1;
}
.hub-tile-switch:checked ~ .hub-tile-selection img {
	opacity: 1;
}
.hub-tile-switch:checked ~ .hub-tile-selection .hub-tile .hub-tile-aspect.newtile::after {
	opacity: 1;
}
.hub-tile-switch:checked ~ .hub-tile-selection .hub-tile .hub-tile-aspect .hub-tile-content, 
label.hub-tile-content {
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	top: 5px;
	left: 5px;
	z-index: 32;
	/*background-color: rgba(255,255,255,0.1);*/
	background-color: rgba(255,255,255,0);
}
.hub-tile-alternative .hub-tile .hub-tile-aspect .hub-tile-content {
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	top: 5px;
	left: 5px;
	z-index: 32;
}
.hub-tile-switch:checked ~ .hub-tile-selection::after {
	display: none;
}
.hub-tile-switch:checked ~ .hub-tile-selection .hub-tile .hub-tile-aspect .hub-tile-content.hub-tile-color-yellow,
label.hub-tile-content.hub-tile-color-yellow {
	background-color: rgba(251,216,11,1);
}
.hub-tile-switch:checked ~ .hub-tile-selection .hub-tile .hub-tile-aspect .hub-tile-content.hub-tile-color-green,
label.hub-tile-content.hub-tile-color-green {
	background-color: rgba(130,194,64,1);
}
.hub-tile-switch:checked ~ .hub-tile-selection .hub-tile .hub-tile-aspect .hub-tile-content.hub-tile-color-orange,
label.hub-tile-content.hub-tile-color-orange {
	background-color: rgba(244,127,31,1);
}
.hub-tile-switch:checked ~ .hub-tile-selection .hub-tile .hub-tile-aspect .hub-tile-content.hub-tile-color-purple,
label.hub-tile-content.hub-tile-color-purple {
	background-color: rgba(120,41,141,1);
}
.hub-tile-switch:checked ~ .hub-tile-selection .hub-tile .hub-tile-aspect .hub-tile-content.hub-tile-color-blue,
label.hub-tile-content.hub-tile-color-blue {
	background-color: rgba(54,95,172,1);
}
.hub-tile-switch:checked ~ .hub-tile-selection .hub-tile .hub-tile-aspect .hub-tile-content.hub-tile-color-red,
label.hub-tile-content.hub-tile-color-red {
	background-color: rgba(234,35,43,1);
}
.hub-tile-content::before {
	content: attr(data-title);
	position: absolute;
	box-sizing: border-box;
	display: block;
	width: 100%;
	bottom: 0px;
	text-shadow: 1px 1px rgba(0,0,0,0.2);
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
	font-size: 0.5rem;
	/*text-transform: uppercase;*/
	overflow: hidden;
	padding: 2px 4px;
	transition: opacity 0.3s;
	user-select: none;
	z-index: 18;
	opacity: 0.6;
}
.trail-tile-content::before {
	content: attr(title);
	position: absolute;
	box-sizing: border-box;
	display: block;
	width: 100%;
	top: 0px;
	text-shadow: 1px 1px rgba(0,0,0,0.2);
	color: rgba(255,255,255,1);
	font-size: 0.7rem;
	/*text-transform: uppercase;*/
	overflow: hidden;
	padding: 4px 6px;
	transition: opacity 0.3s;
	user-select: none;
	z-index: 18;
	opacity: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
}
.hub-tile-content::after {
	content: " ";
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border: 1px solid rgba(255,255,255,1);
	border: 1px solid var(--brdr-color-10);
	top: 0px;
	left: 0px;
	position: absolute;
	opacity: 0;
	background-color: rgba(255,255,255,0);
	transition: opacity 0.3s, background-color 0.3s, border 0.3s;
	z-index: 19;
	pointer-events: none;
}
.trail-tile-content::after {
	content: " ";
	display: block;
	width: 100%;
	height: 100%;
	/*top: 5px;
	left: 5px;*/
	box-sizing: border-box;
	border: 1px solid rgba(255,255,255,1);
	border: 1px solid var(--brdr-color-10);
	top: 0px;
	left: 0px;
	position: absolute;
	opacity: 0;
	background-color: rgba(255,255,255,0);
	transition: opacity 0.3s, background-color 0.3s, border 0.3s;
	z-index: 19;
	pointer-events: none;
}
.hub-main-tile .hub-tile-content::after {
	border: 2px solid rgba(255,255,255,1);
	border: 2px solid var(--brdr-color-10);
}
.hub-main-tile .hub-tile-aspect::after {
	display: block;
	content: " ";
	position: absolute;
	top: 9px;
	right: 9px;
	width: 0.6rem;
	height: 0.6rem;
	clip-path: polygon(100% 0, 0 0, 100% 100%);
	-webkit-clip-path: polygon(100% 0, 0 0, 100% 100%);
	background-color: rgba(255,255,255,1);
	opacity: 0.2;
	transition: transform 0.3s, opacity 0.3s;
}
.hub-main-tile .hub-tile-aspect:hover::after {
	transform: translate3d(0px, -1px, 10px);
	opacity: 0.6;
}

.hub-main-tile .hub-tile-aspect .hub-tile-content {
	background-color: rgba(255,255,255,0.1);
}

.hub-tile-switch:checked ~ .hub-tile-selection .hub-tile .hub-tile-aspect .hub-tile-content::after,
.hub-tile-alternative .hub-tile .hub-tile-aspect .hub-tile-content::after,
label.hub-tile-content::after {
	opacity: 0.2;
}
.hub-tile-switch:checked ~ .hub-main-tile .hub-tile-aspect::after {
	opacity: 0.6;
} 

.hub-tile-switch ~ .hub-tile-selection .hub-tile .hub-tile-aspect .hub-tile-content::before, 
.hub-tile-switch:checked ~ .hub-main-tile .hub-tile-aspect .hub-tile-content::before {
	opacity: 0;
}
.hub-tile-switch:checked ~ .hub-tile-selection .hub-tile .hub-tile-aspect .hub-tile-content::before {
	opacity: 0.6;
}
.hub-tile-content:hover::before, 
.trail-tile-content:hover::before, 
.hub-tile-switch:checked ~ .hub-tile-selection .hub-tile .hub-tile-aspect .hub-tile-content:hover::before {
	opacity: 1;
}
.hub-tile-content:hover::after,
.trail-tile-content:hover::after,
.hub-tile-switch:checked ~ .hub-tile-selection .hub-tile .hub-tile-aspect .hub-tile-content:hover::after {
	opacity: 0.8;
	background-color: rgba(255,255,255,0.1);
}
.hub-selection-title {
	display: block;
	position: absolute;
	width: 100%;
	height: 20px;
	line-height: 20px;
	font-size: 16px;
	overflow: hidden;
	top: -20px;
	box-sizing: border-box;
	padding: 0px 5px;
	text-transform: uppercase;
	opacity: 0;
	transition: opacity 0.3s;
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
	/*font-weight: bold;*/
	font-weight: normal;
}
.hub-tile-switch:checked ~ .hub-tile-selection .hub-selection-title, 
.hub-tile-alternative .hub-selection-title {
	display: block;
	opacity: 0.8;
}
.trail-selection-title {
	display: block;
	position: relative;
	width: 100%;
	min-height: 20px;
	line-height: 20px;
	font-size: 16px;
	overflow: hidden;
	box-sizing: border-box;
	padding: 0px 5px;
	padding-right: 20px;
	text-transform: uppercase;
	opacity: 0.6;
	transition: opacity 0.3s;
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
	font-weight: normal;
	cursor: pointer;
	user-select: none;
	z-index: 32;
}
.trail-selection-title:hover {
	opacity: 0.8;
}
/*.trail-selection-title::before {
	display: block;
	width: 20px;
	height: 20px;
	top: 0px;
	right: 0px;
	position: absolute;
	text-align: center;
	font-family: "Font Awesome";
	content: "\f067";
}*/
.trail-selection-title span {
	display: block;
	box-sizing: border-box;
	padding-right: 30px;
	float: left;
	position: relative;
}
.trail-selection-title span::after {
	display: block;
	width: 20px;
	height: 20px;
	top: 0px;
	right: 5px;
	position: absolute;
	text-align: center;
	font-family: "Font Awesome";
	content: " ";
}
.locked .trail-selection-title span::after {
	content: "\f023";
	opacity: 0.4;
}
.completed .trail-selection-title span::after {
	content: "\f559";
	color: rgba(255,206,31,0.8);
	color: var(--feat-color-08);
}

.trail-tile-switch:checked ~ .trail-tiles, 
.trail-show .trail-tiles {
	width: 100%;
	margin-left: 0px;
}
.trail-tile-switch:checked ~ .trail-selection-lable, 
.trail-show .trail-selection-lable {
	display: none;
}
.trail-tile-switch:checked ~ .trail-tiles::before, 
.trail-show .trail-tiles::before {
	display: none;
}
.trail-tile-switch:checked ~ .trail-tiles .trail-tile .trail-tile-aspect .trail-tile-content, 
.trail-show .trail-tiles .trail-tile .trail-tile-aspect .trail-tile-content {
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	top: 5px;
	left: 5px;
	background-color: rgba(0,0,0,0.1);
	background-color: var(--dark-color-01);
}
.trail-tile-switch:checked ~ .trail-tiles .trail-tile .trail-tile-aspect .trail-tile-content figure, 
.trail-show .trail-tiles .trail-tile .trail-tile-aspect .trail-tile-content figure {
	opacity: 1;
}
.trail-tile-switch:checked ~ .trail-tiles .trail-tile .trail-tile-aspect .trail-tile-content::before, 
.trail-show .trail-tiles .trail-tile .trail-tile-aspect .trail-tile-content::before {
	opacity: 0.8;
}
.trail-tile-switch:checked ~ .trail-tiles .trail-tile .trail-tile-aspect .trail-tile-content::after, 
.trail-show .trail-tiles .trail-tile .trail-tile-aspect .trail-tile-content::after {
	opacity: 0.2;
}
/*.trail-tile-switch:checked ~ .trail-selection-title::before {
	content: "\f068";
}*/





.hub-user-info {
	text-align: right;
}
.trail-user-info {
	text-align: left;
	margin-bottom: 40px;
}
.hub-user-info-unity {
	display: block;
	font-size: 16px;
	min-height: 20px;
	line-height: 20px;
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
	text-transform: uppercase;
}
.trail-user-info-unity, 
.trail-degrees-title {
	position: relative;
	display: block;
	font-size: 16px;
	min-height: 20px;
	line-height: 20px;
	color: rgba(255,255,255,0.6);
	color: var(--txt-color-06);
	text-transform: uppercase;
}
.trail-degrees-title::after {
	width: 20px;
	height: 20px;
	position: absolute;
	top: 0px;
	right: 0px;
	font-family: "Font Awesome";
	content: "\f067";
}
a.trail-degrees-title:hover {
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
	opacity: 0.6;
}
.hub-user-info-title, 
.trail-user-info-title {
	color: rgba(255,206,31,0.8);
	color: var(--feat-color-08);
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1.8rem;
	line-height: 2rem;
}
.hub-user-links, 
.trail-user-links {
	font-size: 0.6rem;
	text-transform: uppercase;
}
.hub-user-links a {
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
	opacity: 0.4;
	transition: opacity 0.3s;
	display: block;
	float: right;
	clear: both;
}
.trail-user-links a {
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
	opacity: 0.4;
	transition: opacity 0.3s;
	display: block;
	float: left;
	clear: both;
}
.hub-user-links a:hover, 
.trail-user-links a:hover{
	opacity: 0.8;
}
#hub-applications::after {
	display: block;
	content: " ";
	position: relative;
	width: 100%;
	padding-bottom: 50%;
}
.hub-user-info-avatar {
	display: block;
	width: 25%;
	padding-bottom: 25%;
	float: right;
	margin-top: 20px;
	position: relative;
}
.trail-user-info-avatar {
	display: block;
	width: 25%;
	padding-bottom: 25%;
	float: left;
	margin-top: 20px;
	position: relative;
}
.hub-user-info-avatar-frame, 
.trail-user-info-avatar-frame {
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	top: 5px;
	left: 5px;
	z-index: 32;
	overflow: hidden;
	display: block;
	background-color: rgba(255,255,255,0.1);
	position: absolute;
	transition: all 0.3s;
	user-select: none;
	cursor: pointer;
	box-shadow: 0px 0px 6px 0px rgba(0,0,0,0);
}
.hub-user-info-avatar-frame:hover, 
.trail-user-info-avatar-frame:hover {
	box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.2);
	transform: translate3d(0px, -1px, 10px);
}
.hub-user-info-avatar-frame img, 
.trail-user-info-avatar-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.3s;
}
.hub-user-info-avatar-frame::after, 
.trail-user-info-avatar-frame::after {
	content: " ";
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border: 1px solid rgba(255,255,255,1);
	border: 1px solid var(--brdr-color-10);
	top: 0px;
	left: 0px;
	position: absolute;
	opacity: 0.4;
	background-color: rgba(255,255,255,0);
	transition: opacity 0.3s, background-color 0.3s, border 0.3s;
	z-index: 19;
	pointer-events: none;
}
.hub-user-info-avatar-frame:hover::after, 
.trail-user-info-avatar-frame:hover::after {
	opacity: 0.8;
}



.hub-user-info-wrapper {
	width: 75%;
	float: left;
	padding: 0px 5px;
	box-sizing: border-box;
}
.trail-user-info-wrapper {
	width: 75%;
	float: right;
	padding: 0px 5px;
	box-sizing: border-box;
}
.post-featured {
	display: block;
	grid-column: span 12;
	margin-bottom: 20px;
}
.post-listing {
	display: block;
	grid-column: span 6;
}
.post-listing.extend {
	grid-column: span 8;
}
.post-card {
	width: 100%;
	background-color: rgba(255,255,255,0.1);
	/*background-color: rgba(0,0,0,0.1);*/
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	justify-content: start;
	align-content: start;
	position: relative;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0);
	transition: box-shadow 0.3s ease-out, transform 0.3s ease-out;
}
.bg-alt .post-card {
	background-color: rgba(0,0,0,0.6);
	background-color: var(--dark-color-06);	
}
.post-card:hover {
	box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.2);
	transform: translate3d(0px, -1px, 10px);
}
.post-card::before {
	content: " ";
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	border: 1px solid rgba(255,255,255,1);
	border: 1px solid var(--brdr-color-10);
	box-sizing: border-box;
	z-index: 20;
	pointer-events: none;
	opacity: 0.2;
	transition: border 0.3s, opacity 0.3s;
}
.bg-alt .post-card::before {
	border: 1px solid rgba(255,255,255,1);
}
.post-card:hover::before {
	opacity: 0.6;
}

.post-listing .post-card {
	margin-bottom: 20px;
}
.post-card-media {
	grid-column: span 1;
	/*width: calc(50% - 10px);*/
	float: left;
	position: relative;
}
.post-card-media-ratio,
.post-card-excerpt-ratio {
	display: block;
	width: 100%;
/*	min-height: 30vmin;
	height: 100%;*/
	padding-top: 56.25%;
	position: relative;
}
.post-card-media figure,
.post-card-excerpt-content {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	overflow: hidden;
}
.post-card-excerpt-content {
	padding: 10px;
	box-sizing: border-box;
	color: rgba(255,255,255,0.6);
	color: var(--txt-color-06);
	border-bottom: 6px solid rgba(255,255,255,0.2);
}
.bg-alt .post-card-excerpt-content {
	color: rgba(255,255,255,0.6);
}
.post-card-media figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s;
	z-index: 10;
}
.post-card:hover figure img {
	transform: scale(1.05, 1.05);
}
.post-card-excerpt {
	grid-column: span 1;
	float: left;
	position: relative;
}
.post-card-excerpt a {
	transition: color 0.3s;
	color: rgba(255,255,255,0.6);
	color: var(--txt-color-06);
}
.post-card:hover .post-card-excerpt a {
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
}
.bg-alt .post-card-excerpt a {
	color: rgba(255,255,255,0.6);
}
.bg-alt .post-card:hover .post-card-excerpt a {
	color: rgba(255,255,255,1);
}
.post-card-headline {
	display: block;
	height: 1rem;
	overflow: hidden;
	line-height: 1rem;
	font-size: 0.6rem;
	padding-bottom: 5px;
	border-bottom: 1px solid rgba(255,255,255,0.2);
	border-bottom: 1px solid var(--brdr-color-02);
	text-transform: uppercase;
	margin-bottom: 5px;
	position: relative;
}
.bg-alt .post-card-headline {
	border-bottom: 1px solid rgba(255,255,255,0.2);
}
.post-card-title {
	display: block;
	overflow: hidden;
	height: calc(100% - (2rem + 20px));
	max-height: calc(100% - (2rem + 20px));
	/*line-height: 1.6rem;
	font-size: 1.2rem;*/
	line-height: 1.8rem;
	font-size: 1.4rem;
	font-weight: normal;
	margin-bottom: 10px;
	/*-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%,rgba(0,0,0,0) 100%);*/
}
.post-listing .post-card-title {
	/*line-height: 1.4rem;
	font-size: 0.8rem;*/
	/*line-height: 1.5rem;
	font-size: 1.1rem;*/
	line-height: 1.4rem;
	font-size: 1rem;
}
.post-card-info {
	display: block;
	height: 1rem;
	overflow: hidden;
	line-height: 1rem;
	font-size: 0.6rem;
	text-align: right;		
}
/*.aside {
	grid-column: span 4;
	position: relative;
	display: grid;
	grid-column-gap: 20px;
	grid-template-columns: repeat(12, 1fr);
	justify-content: start;
	align-content: start;
}*/
.aside {
	grid-column: span 4;
	position: relative;
	display: block;
}
.aside-title {
	display: block;
	height: 1rem;
	line-height: 1rem;
	font-size: 0.8rem;
	margin-bottom: 10px;
	overflow: hidden;
	box-sizing: border-box;
	padding: 0px 10px;
	text-transform: uppercase;
	color: rgba(255,255,255,0.6);
	color: var(--txt-color-06);
	/*font-weight: bold;*/
	font-weight: bold;
	position: relative;
}
a.aside-title {
	padding-right: calc(1rem + 10px);
	color: rgba(255,255,255,0.6);
	color: var(--txt-color-06);
}
.bg-alt .aside-title, .bg-alt a.aside-title {
	color: rgba(0,0,0,0.6);
	color: var(--dark-color-06);
}
a.aside-title:hover {
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
}
.bg-alt a.aside-title {
	color: rgba(0,0,0,0.8);
	color: var(--dark-color-08);
}
a.aside-title::before {
	display: block;
	width: 1rem;
	height: 1rem;
	opacity: 0.6;
	line-height: 1rem;
	font-family: "Font Awesome";
	transition: opacity 0.3s;
	content: "\f067";
	position: absolute;
	top: 0px;
	right: 10px;
}
a.aside-title:hover::before {
	opacity: 1;
}
.aside-grid-item {
	/*grid-column: span 12;*/
}
.aside-item {
	width: 100%;
	background-color: rgba(255,255,255,0.1);
	display: block;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0);
	transition: box-shadow 0.3s ease-out, transform 0.3s ease-out;
	margin-bottom: 20px;
	position: relative;
	font-size: 0.8rem;
}
.bg-alt .aside-item {
	background-color: rgba(0,0,0,0.6);
	background-color: var(--dark-color-06);
}
li.aside-item.aside-banner {
	margin: 0px;
}
.aside-item:hover {
	box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.2);
	transform: translate3d(0px, -1px, 10px);
}
.aside-item::after {
	content: " ";
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	border: 1px solid rgba(255,255,255,1);
	border: 1px solid var(--brdr-color-10);
	box-sizing: border-box;
	z-index: 20;
	pointer-events: none;
	opacity: 0.2;
	transition: border 0.3s, opacity 0.3s;
}
.bg-alt .aside-item::after {
	border: 1px solid rgba(255,255,255,1);
}
.aside-banner {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
}
.aside-banner img, 
.aside-banner a, 
.aside-banner a img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0px;
	left: 0px;
}
.list-commom, .list-ranked {
	display: block;
}
.list-commom li, .list-ranked li {
	display: block;
}
.list-commom li a, .list-ranked li a {
	display: block;
	padding: 10px;
	border: 1px solid rgba(255,255,255,0);
	border: 1px solid var(--brdr-color-00);
	box-sizing: border-box;
	transition: border 0.3s;
	color: rgba(255,255,255,0.6);
	color: var(--txt-color-06);
	position: relative;
}
.list-commom li.aside-banner a {
	position: absolute;
}
.list-commom .cat-item {
	text-transform: uppercase;
}
.list-ranked li a {
	padding: 0px;
	position: relative;
}
.list-ranked li a::after {
	content: " ";
	display: block;
	clear: both;
}
.list-commom li a::before, .list-ranked li a::before {
	content: " ";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 50%,rgba(255,255,255,0) 100%);
	opacity: 0;
	transition: opacity 0.3s;
	pointer-events: none;
}
.list-commom li a:hover, .list-ranked li a:hover {
	border: 1px solid rgba(255,255,255,0.6);
	border: 1px solid var(--brdr-color-06);
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
}
.list-commom li a:hover::before, .list-ranked li a:hover::before {
	opacity: 1;
}
.list-commom li a span.view-more {
	font-weight: bold;
	position: relative;
	display: block;
}
.list-commom li a span.view-more::before {
	display: block;
	width: 1rem;
	height: 1rem;
	opacity: 0.6;
	line-height: 1rem;
	font-family: "Font Awesome";
	transition: opacity 0.3s;
	content: "\f067";
	position: absolute;
	top: 0px;
	right: 0px;
}
.list-commom li a:hover span.view-more::before {
	opacity: 0.8;
}

.list-ranked li a span {
	display: block;
	padding: 10px;
	box-sizing: border-box;
	width: calc(100% - 2rem);
	float: right;
}
.list-ranked li a span.rank {
	position: absolute;
	top: -1px;
	left: -1px;
	/*width: 2rem;*/
	box-sizing: border-box;
	border-right: 1px solid rgba(255,255,255,0.1);
	border-right: 1px solid var(--brdr-color-01);
	width: calc(2rem + 1px);
	height: calc(100% + 2px);
	background-color: rgba(255,255,255,0.1);
	text-align: center;
	transition: background-color 0.3s;
}
.list-ranked li a:hover span.rank {
	background-color: rgba(255,255,255,0.2);
}



.week-wrapper {
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
}
.week-control-prev, .week-control-next {
	float: left;
	width: 20px;
	height: 100%;
	/*min-height: 2.4rem;*/
	min-height: calc(2.4rem + 4px);
	text-align: center;
	line-height: calc(2.4rem + 4px);
	user-select: none;
	position: relative;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.3s;
}
.week-control-prev::before {
	font-family: "Font Awesome";
	content: "\f104";
}
.week-control-next::before {
	font-family: "Font Awesome";
	content: "\f105";
}
/*.week-control-next {
	width: 20px;
}*/
.week-set {
	width: calc(100% - 40px);
	overflow: hidden;
	float: left;
}
.week-set-inline {
	width: 300%;
	margin-left: -100%;
	transition: margin-left 0.3s;
}
.week-list {
	/*width: calc(100% - 40px);*/
	width: 33.33%;
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	justify-content: start;
	align-content: start;
	position: relative;
	float: left;
}
/*.week-list:first-child {
	margin-left: -33.33%;
}*/
.week-day {
	display: block;
	width: 100%;
	user-select: none;
	position: relative;
	box-sizing: border-box;
	padding-top: 4px;
	border-bottom: 6px solid rgba(255,255,255,0);
	border-bottom: 6px solid var(--brdr-color-00);
	opacity: 0.6;
	transition: opacity 0.3s;
}




.week-day::before, .week-control-prev::after, .week-control-next::after {
	content: " ";
	display: block;
	width: 100%;
	height: calc(100% + 6px);
	position: absolute;
	top: 0px;
	left: 0px;
	background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 50%,rgba(255,255,255,0) 100%);
	opacity: 0;
	border: 1px solid rgba(255,255,255,1);
	border: 1px solid var(--brdr-color-10);
	transition: opacity 0.3s;
	pointer-events: none;
	box-sizing: border-box;
}
.week-day:hover, .week-control-prev:hover, .week-control-next:hover {
	opacity: 0.8;
}
.week-day:hover::before, .week-control-prev:hover::after, .week-control-next:hover::after, .aside-item-hover:hover::after {
	opacity: 0.8;
}


.week-day-marked {
	color: rgba(255,206,31,0.6);
	color: var(--feat-color-06);
	border-bottom: 6px solid rgba(255,206,31,0);
	border-bottom: 6px solid var(--feat-color-00);
}
.week-day-marked:hover {
	color: rgba(255,206,31,0.8);
	color: var(--feat-color-08);
}
.week-day-marked::before {
	border-color: rgba(255,206,31,1);
	border-color: var(--feat-color-10);
}



.week-day-name {
	display: block;
	width: 100%;
	font-size: 0.6rem;
	height: 1rem;
	line-height: 1rem;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
}
.week-day-number {
	display: block;
	width: 100%;
	font-size: 1rem;
	height: 1.4rem;
	line-height: 1.4rem;
	text-align: center;
	cursor: pointer;
}
.week-control-clear {
	clear: both;
}
.week-description-wrapper {
	display: none;
}
.week-description {
	max-height: 0;
	transition: max-height 0.3s;
	transition-delay: 0s;
    overflow: hidden;
}
.week-description-content {
	display: block;
	box-sizing: border-box;
	padding: 10px;
	font-size: 0.6rem;
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
}
.week-description-content li {
	display: block;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(255,255,255,0.2);
	border-bottom: 1px solid var(--brdr-color-02);
	margin-bottom: 10px;
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
	font-size: 0.6rem;
}
.week-description-content li:last-child {
	padding-bottom: 0px;
	border-bottom: none;
	margin-bottom: 0px;
}
.week-description-content li .week-description-time {
	margin-right: 10px;
	color: rgba(255,255,255,0.6);
	color: var(--txt-color-06);
}










input.week-day-1:checked ~ .week-description-wrapper .week-day-1,
input.week-day-2:checked ~ .week-description-wrapper .week-day-2,
input.week-day-3:checked ~ .week-description-wrapper .week-day-3,
input.week-day-4:checked ~ .week-description-wrapper .week-day-4,
input.week-day-5:checked ~ .week-description-wrapper .week-day-5,
input.week-day-6:checked ~ .week-description-wrapper .week-day-6,
input.week-day-7:checked ~ .week-description-wrapper .week-day-7 {
	max-height: 20rem;
	transition: max-height 0.3s;
	transition-delay: 0.3s;
}
input.week-day-1:checked ~ .week-set .week-set-inline .week-list .week-day-1,
input.week-day-2:checked ~ .week-set .week-set-inline .week-list .week-day-2,
input.week-day-3:checked ~ .week-set .week-set-inline .week-list .week-day-3,
input.week-day-4:checked ~ .week-set .week-set-inline .week-list .week-day-4,
input.week-day-5:checked ~ .week-set .week-set-inline .week-list .week-day-5,
input.week-day-6:checked ~ .week-set .week-set-inline .week-list .week-day-6,
input.week-day-7:checked ~ .week-set .week-set-inline .week-list .week-day-7 {
	opacity: 1;
}
.week-day-current {
	border-bottom: 6px solid rgba(255,255,255,0.8);
	border-bottom: 6px solid var(--brdr-color-08);
}
.week-day-current.week-day-marked {
	border-bottom: 6px solid rgba(255,206,31,0.6);
	border-bottom: 6px solid var(--feat-color-06);
}
/*.week-day-current::before {
	height: calc(100% + 10px);
}*/




.carousel-container {
	width: 100%;
	max-width: 1200px;
	margin: 0px auto;
	box-sizing: border-box;
		/*background-color: rgba(0,0,20,0.1);*/
	/* ATIVAR OVERFLOW PARA FUNCIONAR O MEDIA WIDTH */
	overflow: hidden;
	position: relative;
	clear: both;
	/*-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%,rgba(0,0,0,0) 100%);*/
	-webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 4%, rgba(0,0,0,1) 96%,rgba(0,0,0,0) 100%);
}
.carousel-container .carousel-slider {
	position: relative;
}
.carousel-container .carousel-wrapper {
	/*overflow: hidden;*/
	display: block;
	position: relative;
	white-space: nowrap;
		/*background-color: rgba(0,0,255,0.2);*/
	margin-left: 2rem;
	transition: margin 0.3s;
	width: calc(100% - 4rem);
}
.carousel-container .carousel-navi {
	content: " ";
	display: block;
	width: 2rem;
	height: calc(100% - 3rem);
	margin-top: 1.5rem;
	position: absolute;
	top: 0px;
	cursor: pointer;
	z-index: 40;
}
.carousel-container .carousel-navi.carousel-prev {
	left: 0px;
}
.carousel-container .carousel-navi.carousel-prev::after {
	display: block;
	position: absolute;
	left: 0px;
	top: calc(50% - 1rem);
	width: 100%;
	height: 2rem;
	line-height: 2rem;
	text-align: center;
	font-family: "Font Awesome";
	content: "\f104";
	font-size: 1.4rem;
	color: rgba(255,255,255,1);
	text-shadow: 1px 1px 0px rgba(0,0,0,0.6);
	opacity: 0.8;
	transition: opacity 0.3s;
	z-index: 50;
}
.carousel-container .carousel-navi.carousel-prev:hover::after {
	opacity: 1;
}
.carousel-container .carousel-navi.carousel-next {
	right: 0px;
}
.carousel-container .carousel-navi.carousel-next::after {
	display: block;
	position: absolute;
	left: 0px;
	top: calc(50% - 1rem);
	width: 100%;
	height: 2rem;
	line-height: 2rem;
	text-align: center;
	font-family: "Font Awesome";
	content: "\f105";
	font-size: 1.4rem;
	color: rgba(255,255,255,1);
	text-shadow: 1px 1px 0px rgba(0,0,0,0.6);
	opacity: 0.8;
	transition: opacity 0.3s;
	z-index: 50;
}
.carousel-container .carousel-navi.carousel-next:hover::after {
	opacity: 1;
}
.carousel-container .carousel-wrapper .carousel-tile {
	display: inline-block;
	position: relative;
	float: left;
	box-sizing: border-box;
	/*width: calc(100% / 12);*/
	width: calc((100% / 12) - (6rem / 12));
	margin: 1.68rem 0px;
	padding: 0px 3px;
		/*background-color: rgba(0,0,255,0.2);*/
	transition: width 0.3s, margin 0.3s;
}
_:-ms-lang(x), _:-webkit-full-screen, .carousel-container .carousel-wrapper .carousel-tile {
	transition: none;
}
.carousel-container .carousel-wrapper .live-stream::before {
	content: attr(data-live);
	display: block;
	position: absolute;
	background-color: rgba(255,30,30,0.4);
	background-color: var(--warn-color-04);
	z-index: 20;
	font-size: 0.5rem;
	line-height: 0.8rem;
	text-transform: uppercase;
	font-weight: bold;
	top: 10px;
	right: 3px;
	padding: 0.2rem 0.6rem;
	color: rgba(255,255,255,0.8);
}
.full-card-ratio.live-stream::after {
	content: attr(data-live);
	display: block;
	position: absolute;
	background-color: rgba(255,30,30,0.4);
	background-color: var(--warn-color-04);
	z-index: 20;
	font-size: 0.8rem;
	line-height: 1.2rem;
	text-transform: uppercase;
	font-weight: bold;
	top: 20px;
	right: 0px;
	padding: 0.2rem 0.8rem;
	animation-name: blink-warning;
	animation-duration: 0.6s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
}
.carousel-container .carousel-wrapper .carousel-tile:hover {
	width: calc(((100% / 12) - (6rem / 12)) + 6rem);
	margin: 0px;
}

.carousel-container .carousel-wrapper .carousel-tile .carousel-tile-limit {
	width: 100%;
	position: relative;
	box-shadow: 0px 0px 6px 0px rgba(0,0,0,0);
	transition: box-shadow 0.3s;
	background-color: rgba(0,0,0,0.1);
	background-color: var(--dark-color-01);
}
.carousel-container .carousel-wrapper .carousel-tile .carousel-tile-limit:hover {
	box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.2);
}
.carousel-container .carousel-wrapper .carousel-tile .carousel-tile-limit::before {
	display: block;
	content: " ";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: 15;
	box-sizing: border-box;
	border: 1px solid rgba(255,255,255,1);
	border: 1px solid var(--brdr-color-10);
	pointer-events: none;
	opacity: 0.2;
	transition: border 0.3s, opacity 0.3s;
}
.carousel-container .carousel-wrapper .carousel-tile .carousel-tile-limit:hover::before {
	opacity: 0.8;
	z-index: 16;
}
.carousel-container .carousel-wrapper .carousel-tile .carousel-tile-limit .carousel-tile-ratio {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	display: block;
	z-index: 9;
}
.carousel-container .carousel-wrapper .carousel-tile .carousel-tile-limit .carousel-tile-ratio figure {
	display: block;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	overflow: hidden;
}
.carousel-container .carousel-wrapper .carousel-tile .carousel-tile-limit .carousel-tile-ratio figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s;
	z-index: 10;
}
.carousel-container .carousel-wrapper .carousel-tile .carousel-tile-limit .carousel-tile-ratio a {
	color: rgba(255,255,255,1);
}
.carousel-container .carousel-wrapper .carousel-tile .carousel-tile-limit .carousel-tile-ratio .carousel-tile-info {
	position: absolute;
	width: 100%;
	/*height: 3.5rem;
	font-size: 0.8rem;
	line-height: 1rem;*/
	font-size: 0.7rem;
	line-height: 0.9rem;
	bottom: 0px;
	left: 0px;
	overflow: hidden;
	white-space: normal;
	color: rgba(255,255,255,1);
	/*background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);*/
	padding: 0.5rem;
	/*padding-top: 1rem;*/
	box-sizing: border-box;
	z-index: 14;
	transform-origin: center bottom;
	opacity: 0.8;
	transition: transform 0.3s, opacity 0.3s;
	/*text-shadow: 1px 1px rgba(0,0,0,0.2);*/
	background-color: rgba(0,0,0,0.8);
	background-color: var(--dark-color-08);
	backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
	/*text-rendering: optimizeLegibility;*/
	/*transform: scaleY(0.4);*/
}
/*.carousel-container .carousel-wrapper .carousel-tile .carousel-tile-limit .carousel-tile-ratio .carousel-tile-info a {
	display: block;
}*/
/*.carousel-container .carousel-wrapper .carousel-tile .carousel-tile-limit .carousel-tile-ratio .carousel-tile-info::after {
	font-family: "Font Awesome";
	content: "\f04b";
	display: block;
	width: 2rem;
	height: 2rem;
	top: 1rem;
	right: 0.5rem;
	position: absolute;
	font-size: 1.4rem;
	line-height: 2rem;
	text-align: right;
	opacity: 0;
	transition: opacity 0.3s;
}*/
.carousel-container .carousel-wrapper .carousel-tile .carousel-tile-limit:hover .carousel-tile-ratio .carousel-tile-info,
.carousel-container .carousel-wrapper .carousel-tile .carousel-tile-limit:hover .carousel-tile-ratio .carousel-tile-info::after {
	opacity: 1;
}

.thumb-admin-edit {
	min-height: 1.8rem;
	width: 1.8rem;
	text-align: center;
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 20;
	line-height: 1.8rem;
	font-size: 1rem;
}
.thumb-admin-edit::before {
	font-family: "Font Awesome";
	content: "\f044";
	opacity: 0.6;
}

.contact-list {
	/*width: 100%;*/
	width: calc(100% - 1.6rem - 20px);
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	justify-content: start;
	align-content: start;
	grid-gap: 10px;
	float: left;
}
.contact-letter {
	width: 1.6rem;
	float: right;
}
.contact-letter li a {
	width: 1.6rem;
	height: 1.6rem;
	line-height: 1.6rem;
	font-size: 1rem;
	font-weight: bold;
	text-align: center;
	margin-bottom: 10px;
	color: rgba(255,255,255,0.6);
	color: var(--txt-color-06);
}
.contact-letter li a:hover {
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
}
.contact-letter li a.generic-marked {
	color: rgba(255,206,31,0.6);
	color: var(--feat-color-06);
}
.contact-letter li a.generic-marked:hover {
	color: rgba(255,206,31,0.8);
	color: var(--feat-color-08);
}
.contact-card {
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	/*padding: 5px;
	float: left;*/
	grid-column: span 3;
}
.contact-card .contact-wrapper {
	display: block;
	width: 100%;
	height: 100%;
	padding: 10px;
	border: 1px solid rgba(255,255,255,0);
	border: 1px solid var(--brdr-color-00);
	box-sizing: border-box;
	transition: border 0.3s;
	color: rgba(255,255,255,0.6);
	color: var(--txt-color-06);
	position: relative;
	margin: 0px;
}
.contact-card .contact-wrapper a {
	color: rgba(255,255,255,0.6);
	color: var(--txt-color-06);
}
.contact-card .contact-wrapper a:hover {
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
}
.contact-card .contact-wrapper .contact-user {
	font-size: 1rem;
	line-height: 1.6rem;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(255,255,255,0.2);
	border-bottom: 1px solid var(--brdr-color-02);
	margin-bottom: 10px;
}
.contact-card .contact-wrapper .contact-user .contact-name {
	display: block;
	max-width: calc(100% - 1.6rem - 10px);
	float: left;
	text-transform: uppercase;
}
.contact-card .contact-wrapper .contact-user .contact-copy {
	display: block;
	width: 1.6rem;
	height: 1.6rem;
	font-size: 1rem;
	line-height: 1.6rem;
	text-align: center;
	float: right;
	cursor: pointer;
	transition: color 0.3s;
	color: rgba(255,255,255,0.2);
	color: var(--txt-color-02);
	overflow: hidden;
}
.contact-card .contact-wrapper .contact-user .contact-copy textarea {
	width: 1px;
	height: 1px;
	overflow: hidden;
	border: none;
	color: transparent;
	background-color: transparent;
}
.contact-card .contact-wrapper .contact-user .contact-copy textarea::selection {
	color: transparent;
	background: transparent;
}
.contact-card .contact-wrapper .contact-user .contact-copy:hover {
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
}
.contact-card .contact-wrapper .contact-user .contact-copy::before {
	font-family: "Font Awesome";
	content: "\f0c5";
}
.contact-card .contact-wrapper .contact-ico {
	font-size: 0.8rem;
	line-height: 1.4rem;
}
.contact-card .contact-wrapper .contact-ico::before {
	display: block;
	font-family: "Font Awesome";
	content: " ";
	font-size: 0.8rem;
	width: 1.4rem;
	height: 1.4rem;
	line-height: 1.4rem;
	float: left;
	color: rgba(255,255,255,0.2);
	color: var(--txt-color-02);
}
.contact-card .contact-wrapper .contact-ico::after {
	display: block;
	content: " ";
	clear: both;
}
.contact-card .contact-wrapper .contact-region::before {
	content: "\f0ac";
}
.contact-card .contact-wrapper .contact-workplace::before {
	content: "\f3c5";
}
.contact-card .contact-wrapper .contact-email::before {
	/*content: "\f1fa";*/
	content: "\f0e0";
}
.contact-card .contact-wrapper .contact-phone::before {
	/*content: "\f095";*/
	font-family: "Font Awesome Brands";
	content: "\f232";
}
.contact-phone a {
	text-decoration: none;
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
}
.contact-card .contact-wrapper .info {
	display: block;
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
}
a.contact-user-admin {
	color: rgba(255,206,31,0.6) !important;
	float: right;
	clear: both;
	font-size: 0.8rem;
	line-height: 1rem;
	width: 1.6rem;
	display: block;
	text-align: center;
}
a.contact-user-admin::before {
	content: "\f044";
    font-family: "Font Awesome";
}
.calendar-month {
	margin-bottom: 20px;
}
.calendar-month .calendar-control {
	display: block;
	width: 2rem;
	height: 2rem;
	float: left;
	line-height: 2rem;
	text-align: center;
	font-size: 1.8rem;
	cursor: pointer;
	color: rgba(255,255,255,0.2);
	color: var(--txt-color-02);
	transition: color 0.3s;
}
.calendar-month .calendar-control:hover {
	color: rgba(255,255,255,0.6);
	color: var(--txt-color-06);
}
.calendar-month .calendar-control-prev::before {
	font-family: "Font Awesome";
	content: "\f104";
}
.calendar-month .calendar-control-next::before {
	font-family: "Font Awesome";
	content: "\f105";
}
.calendar-month .calendar-month-title {
	display: block;
	float: left;
	width: calc(100% - 4rem);
	text-align: center;
	font-size: 1.4rem;
	text-transform: uppercase;
	color: rgba(255,255,255,0.6);
	color: var(--txt-color-06);
}

.calendar-list {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	justify-content: start;
	align-content: start;
	grid-gap: 10px;
	margin-bottom: 10px;
}
.calendar-list .calendar-week {
	display: block;
}
.calendar-list .calendar-week .calendar-week-wrapper {
	font-size: 1rem;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.2rem;
	min-height: 1.2rem;
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
}
.calendar-list .calendar-day {
	position: relative;
	padding-bottom: 100%;
}
.calendar-list .calendar-day-not {
	opacity: 0.6;
}
.calendar-list .calendar-day .calendar-wrapper {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	cursor: pointer;
	line-height: 100%;
	box-sizing: border-box;
	padding: 10px;
	border-bottom: 6px solid rgba(255,255,255,0);
	border-bottom: 6px solid var(--brdr-color-00);
	margin-bottom: 0px;
}
.calendar-list .calendar-day .calendar-wrapper::after {
	height: calc(100% + 6px);
}
.calendar-list .calendar-day .calendar-wrapper span {
	display: block;
	height: 1rem;
	font-size: 0.9rem;
	line-height: 1rem;
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(255,255,255,0.2);
	border-bottom: 1px solid var(--brdr-color-02);
	margin-bottom: 10px;
	transition: padding 0.3s, border 0.3s, text-align 0.3s;
}
.calendar-list .calendar-day .calendar-marked span {
	color: rgba(255,206,31,0.6);
	color: var(--feat-color-06);
	border-bottom: 1px solid rgba(255,206,31,0.2);
	border-bottom: 1px solid var(--feat-color-02);
}
.calendar-list .calendar-day .calendar-marked::after {
	/*border-color: rgba(222,196,86,1);*/
	border-color: rgba(255,206,31,1);
	border-color: var(--feat-color-10);
}
.calendar-panel {
	display: block;
	/*max-height: 0;
	transition: max-height 0.3s;
	transition-delay: 0s;
	overflow: hidden;*/
}
.calendar-panel .calendar-event-wrapper {
	display: block;
	max-height: 0;
	transition: max-height 0.3s;
	transition-delay: 0s;
	overflow: hidden;
}
.calendar-panel .calendar-event-wrapper .calendar-event {
	display: block;
	box-sizing: border-box;
	width: 100%;
	background-color: rgba(255,255,255,0.1);
	position: relative;
}
.calendar-panel .calendar-event-wrapper .calendar-event::after {
	content: " ";
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	border: 1px solid rgba(255,255,255,1);
	border: 1px solid var(--brdr-color-10);
	box-sizing: border-box;
	z-index: 20;
	pointer-events: none;
	opacity: 0.2;
	transition: border 0.3s, opacity 0.3s;
}
.calendar-panel .calendar-event-wrapper .calendar-event .calendar-event-content {
	display: block;
	padding: 10px;
	box-sizing: border-box;
}
.calendar-panel .calendar-event-wrapper .calendar-event .calendar-event-content li {
	display: block;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(255,255,255,0.2);
	border-bottom: 1px solid var(--brdr-color-02);
	margin-bottom: 10px;
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
	font-size: 0.8rem;
}
.calendar-panel .calendar-event-wrapper .calendar-event .calendar-event-content li:last-child {
	padding-bottom: 0px;
	border-bottom: none;
	margin-bottom: 0px;
}
.calendar-panel .calendar-event-wrapper .calendar-event .calendar-event-content li .calendar-event-time {
	margin-right: 10px;
	color: rgba(255,255,255,0.6);
	color: var(--txt-color-06);
}
input.calendar-1:checked ~ .calendar-panel .calendar-1, 
input.calendar-2:checked ~ .calendar-panel .calendar-2 {
	max-height: 20rem;
	transition: max-height 0.3s;
	transition-delay: 0.3s;
}
input.calendar-1:checked ~ .calendar-list .calendar-day .calendar-wrapper[for="calendar-1"]::after, 
input.calendar-2:checked ~ .calendar-list .calendar-day .calendar-wrapper[for="calendar-2"]::after {
	opacity: 0.8;
}



.frame-outer {
	display: block;
	background-color: rgba(255,255,255,0.02);
	position: relative;
	box-sizing: border-box;
}
.frame-outer::before {
	content: " ";
	display: block;
	width: 0.5rem;
	height: 0.5rem;
	position: absolute;
	top: 0px;
	left: 0px;
	border-top: 1px solid rgba(255,255,255,0.2);
	border-top: 1px solid var(--brdr-color-02);
	border-left: 1px solid rgba(255,255,255,0.2);
	border-left: 1px solid var(--brdr-color-02);
	pointer-events: none;
}
.frame-outer::after {
	content: " ";
	display: block;
	width: 0.5rem;
	height: 0.5rem;
	position: absolute;
	top: 0px;
	right: 0px;
	border-top: 1px solid rgba(255,255,255,0.2);
	border-top: 1px solid var(--brdr-color-02);
	border-right: 1px solid rgba(255,255,255,0.2);
	border-right: 1px solid var(--brdr-color-02);
	pointer-events: none;
}
.frame-inner {
	display: block;
	min-height: 2rem;
	position: relative;
	box-sizing: border-box;
}
.frame-inner::before {
	content: " ";
	display: block;
	width: 0.5rem;
	height: 0.5rem;
	position: absolute;
	bottom: 0px;
	left: 0px;
	border-bottom: 1px solid rgba(255,255,255,0.2);
	border-bottom: 1px solid var(--brdr-color-02);
	border-left: 1px solid rgba(255,255,255,0.2);
	border-left: 1px solid var(--brdr-color-02);
	pointer-events: none;
}
.frame-inner::after {
	content: " ";
	display: block;
	width: 0.5rem;
	height: 0.5rem;
	position: absolute;
	bottom: 0px;
	right: 0px;
	border-bottom: 1px solid rgba(255,255,255,0.2);
	border-bottom: 1px solid var(--brdr-color-02);
	border-right: 1px solid rgba(255,255,255,0.2);
	border-right: 1px solid var(--brdr-color-02);
	pointer-events: none;
}
.generic-nav {
	display: block;
	margin-bottom: 20px;
}
.generic-nav ul {
	display: block;
}
.generic-nav ul li {
	display: inline-block;
	float: left;
}
.generic-nav ul li a {
	display: block;
	height: 2rem;
	line-height: 2rem;
	font-weight: bold;
	font-size: 0.9rem;
	padding: 0px 10px;
	padding-bottom: 6px;
	text-transform: uppercase;
	color: rgba(255,255,255,0.6);
	color: var(--txt-color-06);
	position: relative;
	transition: color 0.3s;
}
.generic-nav ul li a:hover {
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
}
.generic-nav ul li a::after {
	content: " ";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border-bottom: 6px solid rgba(255,255,255,0);
	border-bottom: 6px solid var(--brdr-color-00);
	top: 0px;
	left: 0px;
	pointer-events: none;
	transform: scale(0.1,1);
	transition: border 0.3s, transform 0.3s;
}
.generic-nav ul li a:hover::after {
	border-bottom: 6px solid rgba(255,255,255,0.8);
	border-bottom: 6px solid var(--brdr-color-08);
	transform: scale(1,1);
}


.multi-nav {
	display: block;
	margin-bottom: 20px;
	border-bottom: 1px solid rgba(255,255,255,0.2);
	border-bottom: 1px solid var(--brdr-color-02);
	padding-bottom: 10px;
}
.multi-nav h3 {
	display: block;
	font-weight: normal;
	font-size: 0.7rem;
	padding: 0px 10px;
	margin-bottom: 10px;
	text-transform: uppercase;
	color: rgba(255,255,255,0.4);
	color: var(--txt-color-04);
}
.multi-nav ul {
	display: block;
}
.multi-nav ul li {
	display: inline-block;
	float: left;
	margin-bottom: 10px;
}
.multi-nav ul li a {
	display: block;
	height: 1rem;
	line-height: 1rem;
	font-weight: bold;
	font-size: 0.7rem;
	padding: 0px 10px;
	padding-bottom: 6px;
	text-transform: uppercase;
	color: rgba(255,255,255,0.6);
	color: var(--txt-color-06);
	position: relative;
	transition: color 0.3s;
}
.multi-nav ul li a:hover {
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
}
.multi-nav ul li a::after {
	content: " ";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border-bottom: 6px solid rgba(255,255,255,0);
	border-bottom: 6px solid var(--brdr-color-00);
	top: 0px;
	left: 0px;
	pointer-events: none;
	transform: scale(0.1,1);
	transition: border 0.3s, transform 0.3s;
}
.multi-nav ul li a:hover::after {
	border-bottom: 6px solid rgba(255,255,255,0.8);
	border-bottom: 6px solid var(--brdr-color-08);
	transform: scale(1,1);
}




.generic-wrapper {
	width: calc(100% - (6rem + 40px));
	float: left;
	padding-right: 19px;
	border-right: 1px solid rgba(255,255,255,0.2);
	border-right: 1px solid var(--brdr-color-02);
}
.generic-full-wrapper {
	width: 100%;
	clear: both;
}
.generic-panel {
	display: block;
}
.generic-child-panel {
	display: block;
	margin-left: 20px;
}
.generic-item {
	display: block;
	/*margin-bottom: 20px;*/
	/*margin-bottom: 10px;*/
	position: relative;
	box-sizing: border-box;
}
.generic-item:last-child {
	margin-bottom: 0px;
}
.generic-item-wrapper {
	min-height: 3.2rem;
	/*margin-bottom: 10px;*/
	margin-bottom: 20px;
}
.generic-item-wrapper label {
	min-height: 3.2rem;
	cursor: pointer;
	font-weight: bold;
}
.generic-item-content {
	margin-bottom: 0px;
	padding-left: 10px;
	padding-right: 2rem;
	line-height: 2rem;
	/*min-height: 2rem;*/
	min-height: 3.2rem;
	box-sizing: border-box;
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
	font-size: 0.8rem;
	background-color: rgba(255,255,255,0);
	user-select: none;
}
.generic-item-content:hover {
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
}
.generic-item-content .generic-info {
	display: block;
	min-height: 1rem;
	overflow: hidden;
	line-height: 1rem;
	/*line-height: 1rem;*/
	font-size: 0.6rem;
	opacity: 0.8;
	box-sizing: border-box;
	padding-bottom:  0.6rem;
}
.generic-item-content::before {
	display: block;
	font-family: "Font Awesome";
	width: 2rem;
	height: 2rem;
	text-align: center;
	line-height: 2rem;
	position: absolute;
	pointer-events: none;
	bottom: 0px;
	right: 0px;
	opacity: 0.6;
	transition: opacity 0.3s;
}
.generic-item-content:hover::before {
	opacity: 1;
}
a.generic-item-content {
	padding-right: 10px;
	line-height: 1rem;
	padding-top: 10px;
}
a.generic-item-content::before {
	/*display: block;
	font-family: "Font Awesome";
	width: 2rem;*/
	height: calc(3.2rem - 10px);
	line-height: calc(3.2rem - 20px);
	font-size: 1.8rem;
	position: relative;
	float: left;
	/*text-align: center;
	line-height: 2rem;
	pointer-events: none;
	bottom: 0px;
	right: 0px;
	opacity: 0.6;
	transition: opacity 0.3s;*/
}
.folder-content, 
.gallery-content {
	background-color: rgba(255,255,255,0.1);
}
.download-content::before {
	content: "\f063";
}
.more-content::before {
	content: "\f107";
}
.grid-content::before {
	content: "\f00a";
}
.folder-content::before {
	content: "\f07b";
}
.gallery-content::before {
	content: "\f302";
	font-size: 1.4rem !important;
}
.folder-content::after, 
.gallery-content::after {
	border: 2px solid rgba(255,255,255,1);
	border: 2px solid var(--brdr-color-10);
}
.generic-folder-wrapper {
	position: relative;
}
.generic-folder-wrapper::after {
	display: block;
	content: " ";
	position: absolute;
	top: 4px;
	right: 4px;
	width: 0.6rem;
	height: 0.6rem;
	clip-path: polygon(100% 0, 0 0, 100% 100%);
	-webkit-clip-path: polygon(100% 0, 0 0, 100% 100%);
	background-color: rgba(255,255,255,1);
	opacity: 0.2;
	transition: transform 0.3s, opacity 0.3s;
}
.generic-folder-wrapper:hover::after {
	transform: translate3d(0px, -1px, 10px);
	opacity: 0.6;
}
.generic-accordion {
	display: block;
	overflow: hidden;
	width: 100%;
	height: auto;
	/*margin-bottom: 20px;*/
	max-height: 0px;
	transition: max-height 1s;
	padding-top: 1px;
}
/*.generic-accordion:last-child {
	margin-bottom: 0px;
}*/
.generic-accordion-switch:checked + .generic-accordion {
	max-height: 300vh;
}
.trophy-content {
	padding-left: 3.2rem;
	padding-right: 10px;
}
.trophy-content::before {
	display: block;
	width: 3.2rem;
	height: 3.2rem;
	content: "\f091";
	font-family: "Font Awesome";
	line-height: 3.2rem;
	font-size: 1.8rem;
	right: auto;
	left: 0px;
}
.generic-marked, 
.generic-nav ul li a.generic-marked,
.multi-nav ul li a.generic-marked {
	color: rgba(255,206,31,0.6);
	color: var(--feat-color-06);
}
.generic-marked:hover, 
.generic-nav ul li a.generic-marked:hover, 
.multi-nav ul li a.generic-marked:hover {
	color: rgba(255,206,31,0.8);
	color: var(--feat-color-08);
}
.generic-marked::after {
	border-color: rgba(255,206,31,1);
	border-color: var(--feat-color-10);
}
.generic-nav ul li a.generic-marked::after, 
.multi-nav ul li a.generic-marked::after {
	border-color: rgba(255,206,31,0.4);
	border-color: var(--feat-color-04);
	transform: scale(1,1);
}




.generic-ext {
	display: block;
	width: 6rem;
	box-sizing: border-box;
	float: right;
}
.generic-ext li {
	margin-bottom: 20px;
	display: block;
}
.generic-ext li .generic-ext-item {
	margin-bottom: 0px;
	padding-left: 2rem;
	padding-right: 10px;
	font-size: 0.8rem;
	line-height: 2rem;
	min-height: 2rem;
	box-sizing: border-box;
	font-weight: bold;
	text-transform: uppercase;
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
	cursor: pointer;
	position: relative;
}
.generic-ext li .generic-ext-item::before {
	display: block;
	font-family: "Font Awesome";
	content: "\f104";
	width: 2rem;
	height: 2rem;
	text-align: center;
	line-height: 2rem;
	position: absolute;
	pointer-events: none;
	top: 0px;
	left: 0px;
	opacity: 0;
	transition: opacity 0.3s;
}
.generic-ext li .generic-ext-item:hover::before,
.generic-ext li .generic-marked::before {
	opacity: 1;
}
.generic-ext li .generic-marked {
	color: rgba(255,206,31,0.6);
	color: var(--feat-color-06);
}
.generic-ext li .generic-marked:hover {
	color: rgba(255,206,31,0.8);
	color: var(--feat-color-08);
}
.generic-ext li .generic-marked::after {
	border-color: rgba(255,206,31,1);
	border-color: var(--feat-color-10);
}

.gallery-wrapper {
	display: block;
}
.gallery-wrapper .gallery-item {
	display: block;
	width: calc(25% - 10px);
	float: left;
	min-height: 4rem;
	padding: 5px;
	transition: all 0.3s;
}
.gallery-wrapper .gallery-item .gallery-item-ratio {
	display: block;
	width: 100%;
	padding-bottom: 100%;
	position: relative;
	transition: all 0.3s;
}
.gallery-item-download {
	opacity: 0;
	width: 100%;
	height: 2rem;
	background-color: rgba(0,0,0,0.4);
	background-color: var(--dark-color-04);
	bottom: 0px;
	left: 0px;
	position: absolute;
	text-align: center;
	line-height: 2rem;
	font-size: 1rem;
	display: none;
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
	z-index: 11;
	transition: opacity 0.3s, color 0.3s, border 0.3s;
	box-sizing: border-box;
	border: 1px solid rgba(255,255,255,0.8);
	border: 1px solid var(--brdr-color-08);
}
.gallery-item-download:hover {
	opacity: 1;
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
	border: 1px solid rgba(255,255,255,1);
	border: 1px solid var(--brdr-color-10);
}
.gallery-item-download::before {
	font-family: "Font Awesome";
	content: "\f063";
}
.gallery-item-media {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	cursor: pointer;
}
.gallery-item-media figure {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.gallery-item-media figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s;
	z-index: 10;
}
.gallery-item-media:hover figure img,
.gallery-item-download:hover + .gallery-item-media figure img{
	transform: scale(1.05, 1.05);
}
.gallery-item-download:hover + .aside-item-hover::after {
	opacity: 0.8;
}
.gallery-item-media::before {
	display: block;
	/*font-family: "Font Awesome";
	content: "\f31e";*/
	content: attr(data-count);
	font-size: 0.8rem;
	font-weight: bold;
	width: 2rem;
	height: 2rem;
	text-align: center;
	line-height: 2rem;
	position: absolute;
	pointer-events: none;
	top: 0px;
	right: 0px;
	opacity: 0.8;
	transition: opacity 0.3s;
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
	z-index: 14;
}
.gallery-item-media:hover::before {
	opacity: 1;
}
input.gallery-switch:checked + .gallery-item {
	width: calc(100% - 10px);
	clear: both;
	min-height: 4rem;
	padding: 5px;
}
input.gallery-switch:not(:checked) + .gallery-item {
	opacity: 1;
}
input.gallery-switch:checked + .gallery-item .gallery-item-ratio {
	padding-bottom: 56.25%;
}
/*input.gallery-switch:checked + .gallery-item .gallery-item-media::before {
	opacity: 0;
}*/
input.gallery-switch:checked + .gallery-item .gallery-item-download {
	display: block;
	opacity: 1;
}
.download-icon-file::before {
	content: "\f15b";
}
.download-icon-video::before {
	content: "\f1c8";
}
.download-icon-audio::before {
	content: "\f1c7";
}
.download-icon-image::before {
	content: "\f1c5";
}
.download-icon-zip::before {
	content: "\f1c6";
}
.download-icon-excel::before {
	content: "\f1c3";
}
.download-icon-document::before {
	content: "\f15c";
}
.download-icon-pdf::before {
	content: "\f1c1";
}
.download-icon-powerpoint::before {
	content: "\f1c4";
}
.library-wrapper {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	justify-content: start;
	align-content: start;
}
.library-wrapper .library-item {
	display: block;
	/*width: 16.66%;*/
	width: 100%;
	grid-column: span 2;
	float: left;
	min-height: 4rem;
	padding: 5px 0px;
	transition: all 0.3s;
}
.library-wrapper .library-item .library-item-ratio {
	display: block;
	width: 71%;
	margin: 0px auto;
	padding-bottom: 100%;
	position: relative;
	transition: all 0.3s;
	margin-bottom: 10px;
}
.library-item-media {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	cursor: pointer;
	transition: transform 0.3s;
}
.library-item-media figure {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.library-item-media figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 10;
}
.library-item-ratio:hover .library-item-media {
	transform: scale(1.05, 1.05);
}
.library-wrapper .library-item .library-content {
	border-top: 6px solid rgba(255,255,255,0.2);
	border-top: 6px solid var(--brdr-color-02);
	padding: 5px;
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
	font-size: 0.6rem;
	opacity: 0.8;
	text-align: center;
	transition: opacity 0.3s;
	margin-bottom: 40px;
}
.library-wrapper .library-item .library-content .library-info {
	display: block;
	opacity: 0.6;
}
.library-item-ratio:hover + .library-content {
	opacity: 1;
}


.page-info {
	grid-column: span 12;
	height: 1rem;
	overflow: hidden;
	line-height: 1rem;
	font-size: 0.8rem;
	font-weight: bold;
	margin-bottom: 10px;
	color: rgba(255,255,255,0.6);
	color: var(--txt-color-06);
}
.bg-alt .page-info {
	color: rgba(0,0,0,0.4);
	color: var(--dark-color-04);
}
.page-info .page-headline {
	display: block;
	float: left;
}
.page-info .page-date {
	display: block;
	float: right;
}

.page-media {
	grid-column: span 12;
	margin-bottom: 20px;
}
.page-media .page-media-ratio, 
.page-article .iframe-ratio {
	display: block;
	width: 100%;
	padding-top: 56.25%;
	position: relative;
}
.page-media .page-media-ratio::before, 
.page-article .iframe-ratio::before {
	content: " ";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	border: 1px solid rgba(255,255,255,1);
	border: 1px solid var(--brdr-color-10);
	box-sizing: border-box;
	pointer-events: none;
	opacity: 0.2;
	transition: border 0.3s, opacity 0.3s;
	z-index: 20;
}
.page-media .page-media-ratio figure, 
.page-media .page-media-ratio iframe, 
.page-media .page-media-ratio video, 
.page-article .iframe-ratio iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	overflow: hidden;
	z-index: 10;
}
.page-media .page-media-ratio figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.page-content {
	grid-column: span 8;
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
	font-size: 0.9rem;
	line-height: 1.6rem;
}
.bg-alt .page-content {
	color: rgba(0,0,0,0.6);
	color: var(--dark-color-06);
}
.bg-alt .page-article {
	color: rgba(0,0,0,0.8);
	color: var(--dark-color-08);
	border-bottom: 1px solid rgba(0,0,0,0.1);
	border-bottom: 1px solid var(--dark-color-01);
}
.bg-alt .page-article a {
	color: rgba(0,139,130,0.6);
	color: var(--alt-color-06);
	word-wrap: break-word;
}
.bg-alt .page-article a:hover {
	color: rgba(0,139,130,0.8);
	color: var(--alt-color-08);
	text-decoration: underline;
}
.bg-alt .page-article .page-title {
	color: rgba(0,139,130,0.8);
	color: var(--alt-color-08);
	border-bottom: 1px solid rgba(0,0,0,0.1);
	border-bottom: 1px solid var(--dark-color-01);
	padding-bottom: 14px;
	margin-bottom: 14px;
}



.full-page-content {
	grid-column: span 12;
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
	font-size: 0.9rem;
	line-height: 1.6rem;
}
.center-page-article {
	max-width: 600px;
	margin: 0px auto;
	text-align: center;
}
.profile-picture-steps .input-file-container .file-image-capture {
	min-height: 2rem;
	padding-left: 3rem;
	display: inline-block;
}
.profile-picture-steps .input-file-container .file-image-capture::before {
	width: 3rem;
	height: 2rem;
	font-size: 1.4rem;
	line-height: calc(2rem + 10px);
}
.page-article {
	border-bottom: 1px solid rgba(255,255,255,0.1);
	border-bottom: 1px solid var(--brdr-color-01);
	padding-bottom: 14px;
	margin-bottom: 10px;
}
.page-article p {
	
}
.page-article img {
	max-width: 100%;
	border: none;
}
.page-article ul, 
.page-article ol {
	display: block;
	list-style-type: square;
	list-style-position: inside;
}
.page-title {
	border-bottom: 1px solid rgba(255,255,255,0.1);
	border-bottom: 1px solid var(--brdr-color-01);
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
	grid-column: span 12;
	padding-bottom: 10px;
	margin-bottom: 10px;
	font-size: 1.6rem;
	line-height: 2rem;
	font-weight: bold;
}

.page-interaction {
	border-bottom: 1px solid rgba(255,255,255,0.1);
	border-bottom: 1px solid var(--brdr-color-01);
	padding-bottom: 10px;
	margin-bottom: 10px;
}
.bg-alt .page-interaction {
	border-bottom: 1px solid rgba(0,0,0,0.1);
	border-bottom: 1px solid var(--dark-color-01);
	color: rgba(0,0,0,0.4);
	color: var(--dark-color-04);
}

.page-interaction .page-count-view {
	min-height: 1.6rem;
	padding-left: 1.6rem;
	padding-right: 10px;
	margin-right: 10px;
	display: block;
	float: left;
	line-height: 1.6rem;
	font-size: 0.8rem;
	font-weight: bold;
	position: relative;
	opacity: 0.8;
}
.page-interaction .page-count-view::before {
	display: block;
	width: 1.6rem;
	height: 1.6rem;
	position: absolute;
	top: 0px;
	left: 0px;
	text-align: center;
	font-family: "Font Awesome";
	content: "\f06e";
	font-weight: normal;
	opacity: 0.8;
	font-size: 1rem;
}
.page-interaction .page-count-comment {
	min-height: 1.6rem;
	padding-left: 1.6rem;
	padding-right: 10px;
	margin-right: 10px;
	display: block;
	float: left;
	line-height: 1.6rem;
	font-size: 0.8rem;
	font-weight: bold;
	position: relative;
	opacity: 0.8;
}
.page-interaction .page-count-comment::before {
	display: block;
	width: 1.6rem;
	height: 1.6rem;
	position: absolute;
	top: 0px;
	left: 0px;
	text-align: center;
	font-family: "Font Awesome";
	content: "\f27a";
	font-weight: normal;
	opacity: 0.8;
	font-size: 1rem;
}
.page-interaction .page-count-like {
	min-height: 1.6rem;
	padding-left: 1.6rem;
	padding-right: 10px;
	margin-right: 10px;
	display: block;
	float: left;
	line-height: 1.6rem;
	font-size: 0.8rem;
	font-weight: bold;
	position: relative;
	opacity: 0.8;
	cursor: pointer;
	transition: opacity 0.3s;
}
.page-like:checked + .page-count-like::before, 
.page-like:checked + .page-count-like {
	color: rgba(255,206,31,0.8) !important;
	color: var(--feat-color-08) !important;
}
.bg-alt .page-like:checked + .page-count-like::before, 
.bg-alt .page-like:checked + .page-count-like {
	color: rgba(0,139,130,0.8) !important;
	color: var(--alt-color-08) !important;
}
.page-interaction .page-count-like:hover {
	opacity: 1;
}
.page-interaction .page-count-like::before {
	display: block;
	width: 1.6rem;
	height: 1.6rem;
	position: absolute;
	top: 0px;
	left: 0px;
	text-align: center;
	font-family: "Font Awesome";
	content: "\f164";
	font-weight: normal;
	font-size: 1rem;
	opacity: 0.8;
}
.page-interaction .page-admin-edit, 
.page-interaction .stream-admin-edit,
.page-interaction .quiz-admin-edit,
.page-interaction .analytics-icon, 
.admin-interaction .page-admin-edit, 
.admin-interaction .stream-admin-edit,
.admin-interaction .quiz-admin-edit, 
.admin-interaction .analytics-icon {
	min-height: 1.6rem;
	width: 1.6rem;
	text-align: center;
	display: block;
	float: right;
	line-height: 1.6rem;
	font-size: 0.8rem;
}
.page-interaction .page-admin-edit::before, 
.admin-interaction .page-admin-edit::before {
	font-family: "Font Awesome";
	content: "\f044";
	font-size: 1rem;
	opacity: 0.8;
}
.page-interaction .stream-admin-edit::before, 
.admin-interaction .stream-admin-edit::before {
	font-family: "Font Awesome";
	content: "\f03d";
	font-size: 1rem;
	opacity: 0.8;
}
.page-interaction .quiz-admin-edit::before, 
.admin-interaction .quiz-admin-edit::before {
	font-family: "Font Awesome";
	content: "\f022";
	font-size: 1rem;
	opacity: 0.8;
}
.page-interaction .analytics-icon::before, 
.admin-interaction .analytics-icon::before {
	font-family: "Font Awesome";
	content: "\f080";
	font-size: 1rem;
	opacity: 0.8;
}
.page-tag {
	border-bottom: 1px solid rgba(255,255,255,0.1);
	border-bottom: 1px solid var(--brdr-color-01);
	margin-bottom: 10px;
}
.page-tag a {
	display: block;
	float: left;
	background-color: rgba(255,255,255,0.1);
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
	line-height: 1.2rem;
	height: 1.2rem;
	font-size: 0.6rem;
	overflow: hidden;
	padding: 0px 10px;
	border-left: 6px solid rgba(255,255,255,0.2);
	border-left: 6px solid var(--brdr-color-02);
	margin-right: 10px;
	opacity: 0.8;
	transition: opacity 0.3s, background-color 0.3s, border-left 0.3s;
	margin-bottom: 10px;
}
.page-tag a:hover {
	opacity: 1;
	background-color: rgba(255,206,31,0.1);
	background-color: var(--feat-color-01);
	border-left: 6px solid rgba(255,206,31,0.2);
	border-left: 6px solid var(--feat-color-02);
}

.page-comment {
	display: block;
	margin-bottom: 20px;
}
/*.comments-wrapper {
}
.comment-login {
	background-color: var(--color-2-l);
	height: 60px; 
	margin-bottom: 20px;
}*/
.comment-respond {
	position: relative;
	clear: both;
	margin-bottom: 20px;
	padding-top: 10px;
}
li .comment-respond {
	padding-left: calc(2rem + 10px);
}
.comment-avatar {
	width: 2rem;
	height: 2rem;
	float: left;
	background-color: rgba(255,255,255,0.1);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0);
	margin-bottom: 20px;
	position: relative;
	transition: box-shadow 0.3s;
	overflow: hidden;
	/*background-image: url(img/tileset.svg);
	background-repeat: no-repeat;
	background-position: -280px -100px;*/
}
.bg-alt .comment-avatar {
	background-color: rgba(0,0,0,0.6);
	background-color: var(--dark-color-06);
}
.comment-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.comment-avatar::after {
	content: " ";
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	border: 1px solid rgba(255,255,255,1);
	border: 1px solid var(--brdr-color-10);
	box-sizing: border-box;
	z-index: 20;
	pointer-events: none;
	opacity: 0.2;
	transition: border 0.3s, opacity 0.3s;
}
.comment-form {
	display: block;
	position: relative;
	max-height: 4rem;
}
.comment-wrap {
	width: calc(100% - (2rem + 10px));
	float: right;
	position: relative;
}
.comment-respond .comment-wrap {
	width: calc(100% - (2rem + 10px));
	float: right;
	position: relative;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2) inset;
	background-color: rgba(255,255,255,0.05);
	max-height: 4rem;
}
.comment-respond .comment-wrap::before {
	content: " ";
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	border: 1px solid rgba(255,255,255,1);
	border: 1px solid var(--brdr-color-10);
	box-sizing: border-box;
	z-index: 20;
	pointer-events: none;
	opacity: 0.2;
	transition: border 0.3s, opacity 0.3s;
}
.comment-form::after {
	content: " ";
	display: block;
	clear: both;
}
textarea.comment {
	width: calc(100% - 2rem);
	height: 4rem;
	border: none;
	box-sizing: border-box;
	padding: 10px;
	background-color: transparent;
	resize: none;
	font-size: 0.7rem;
}
.bg-alt textarea.comment {
	color: rgba(0,0,0,0.8);
	color: var(--dark-color-08);
}
a.comment-cancel,
a#cancel-comment-reply-link {
	display: block;
	width: 2rem;
	height: 2rem;
	overflow: hidden;
	position: absolute;
	right: 0px;
	top: 10px;
	color: transparent;
	text-align: center;
	line-height: 2rem;
	opacity: 0.2;
	transition: opacity 0.3s;
	cursor: pointer;
	z-index: 12;
}
a.comment-cancel::before,
a#cancel-comment-reply-link::before {
	font-family: "Font Awesome";
	content: "\f00d";
	font-size: 1rem;
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
	transition: color 0.3s;
}
a.comment-cancel:hover, 
a#cancel-comment-reply-link:hover {
	opacity: 0.8;
}
a.comment-cancel:hover::before, 
a#cancel-comment-reply-link:hover::before {
	color: rgba(255,30,30,0.6);
	color: var(--warn-color-06);
}
.comment-compose .form-submit {
	display: block;
	width: 2rem;
	height: 2rem;
	line-height: 2rem;
	overflow: hidden;
	position: absolute;
	right: 0px;
	bottom: 0px;
	font-size: 1rem;
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
	font-family: "Font Awesome";
	opacity: 0.2;
	transition: opacity 0.3s;
	text-align: center;
	z-index: 12;
}
.bg-alt .comment-compose .form-submit {
	color: rgba(0,0,0,1);
	color: var(--dark-color-10);
}
.comment-compose .form-submit::before {
	content: "\f1d8";
	border: none;
	user-select: none;
}
input.comment-submit {
	display: block;
	width: 2rem;
	height: 2rem;
	overflow: hidden;
	position: absolute;
	background-color: transparent;
	text-align: center;
	right: 0px;
	bottom: 0px;
	border: none;
	cursor: pointer;
	color: transparent;
	box-sizing: border-box;
	padding: 0px;
	z-index: 13;
}
input.comment-submit:hover {
	border: none;
	box-shadow: none;
}
.comment-compose:focus-within .comment-wrap::before, 
.comment-compose:hover .comment-wrap::before, 
.comment-compose:focus-within .form-submit, 
.comment-compose:focus-within a.comment-cancel, 
.comment-compose:hover .comment-avatar::after,  
.comment-compose:focus-within .comment-avatar::after {
	opacity: 0.6;
}
.comment-compose:focus-within .comment-avatar {
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
}
.form-submit:hover, 
a.comment-cancel:hover,
.comment-compose:focus-within .form-submit:hover, 
.comment-compose:focus-within a.comment-cancel:hover {
	opacity: 1;
}

.comment-list {
	display: block;
	width: 100%;
}
li.comment-body {
	display: block;
}
li.comment-body .comment-wrap {
	margin-bottom: 20px;
}
li.comment-body .comment-avatar {
	margin-top: 4px;
}
li.comment-body .children {
	clear: both;
	padding-left: calc(2rem + 10px);
}
li.comment-body .children li.comment-body {
	padding: 0px;
}
.comment-main {
	width: calc(100% - 2rem);
	font-size: 0.7rem;
	line-height: 1rem;
	min-height: 2rem;
	position: relative;
}
.comment-meta {
	width: 100%;
	min-height: 1rem;
}
span.comment-author {
	height: 1rem;
	font-weight: bold;
	float: left;
	margin-right: 20px;
}
time.comment-date {
	display: block;
	height: 1rem;
	float: left;
	opacity: 0.6;
}
.comment-content {
	width: 100%;
}
.comment-menu {
	display: none;
	width: 2rem;
	height: 1rem;
	position: absolute;
	top: 0px;
	right: 0px;
	line-height: 1rem;
	cursor: pointer;
	text-align: center;
}
.comment-menu::before {
	font-family: "Font Awesome";
	content: "\f141";
	font-size: 0.8rem;
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
	opacity: 0;
	transition: opacity 0.3s;
}
.bg-alt .comment-menu::before {
	color: rgba(0,0,0,1);
	color: var(--dark-color-10);
}
.comment-menu:hover::before {
	opacity: 0.8;
}
.comment-options {
	display: none;
	width: 4rem;
	position: absolute;
	background-color: rgba(0,0,0,0.6);
	background-color: var(--dark-color-06);
	right: 2rem;
	top: 0px;
	line-height: 0.8rem;
	padding: 0.2rem 0px;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
	border: 1px solid rgba(255,255,255,0.6);
	border: 1px solid var(--brdr-color-06);
	transition: border 0.3s, background-color 0.3s;
}
.comment-options:hover {
	background-color: rgba(0,0,0,0.8);
	background-color: var(--dark-color-08);
	border: 1px solid rgba(255,255,255,0.8);
	border: 1px solid var(--brdr-color-08);
}
.comment-menu:hover .comment-options, 
.comment-menu:active .comment-options {
	display: block;
}
.comment-options a, 
.comment-options span, 
.comment-options button {
	font-size: 0.5rem;
	text-align: left;
	font-weight: bold;
	text-transform: uppercase;
	display: block;
	padding: 0px 10px;
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
	opacity: 1;
}
.comment-options button {
	background: transparent;
	border: none;
	cursor: pointer;
	transition: color 0.3s;
}
.comment-options a:hover, 
.comment-options span:hover, 
.comment-options button:hover {
	color: rgba(255,206,31,1);
	color: var(--feat-color-10);
}
.comment-reply-link {
	display: block;
	width: 2rem;
	height: 1rem;
	overflow: hidden;
	position: absolute;
	bottom: 0px;
	right: 0px;
	color: transparent;
	text-align: center;
	line-height: 1rem;
	opacity: 0.2;
	transition: opacity 0.3s;
}
.comment-reply-link::before {
	font-family: "Font Awesome";
	content: "\f3e5";
	font-size: 1rem;
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
}
.bg-alt .comment-reply-link::before {
	color: rgba(0,0,0,1);
	color: var(--dark-color-10);
}
.comment-reply-link:hover {
	opacity: 1;
}
.comment-wrap:hover .comment-menu, 
.comment-wrap:focus .comment-menu, 
.comment-wrap:active .comment-menu {
	display: block;
}
.comment-wrap:hover .comment-menu::before, 
.comment-wrap:focus .comment-menu::before, 
.comment-wrap:active .comment-menu::before {
	opacity: 0.2;
}
.chat-wrapper .comment-avatar {
	display: none;
}
.chat-wrapper .comment-wrap {
	width: 100%;
}
.chat-wrapper .comment-list {
	display: block;
	overflow-y: scroll;
	height: 40vh;
}
.chat-wrapper li.comment-body .comment-wrap {
	padding: 10px 0px;
	box-sizing: border-box;
	border-bottom: 1px solid rgba(255,255,255,0.1);
	border-bottom: 1px solid var(--brdr-color-01);
	margin-bottom: 0px;
}
.chat-wrapper li.comment-body .children {
	padding-left: 0px;
}

.chat-wrapper .comment-menu {
	display: block;
	width: 2rem;
	height: 1rem;
	position: absolute;
	top: 0px;
	right: 0px;
	line-height: 1rem;
	cursor: pointer;
	text-align: center;
}
.chat-wrapper .comment-menu::before {
	content: " ";
	display: none;
}
.chat-wrapper .comment-options {
	display: block;
	width: 3rem;
	position: absolute;
	background-color: transparent;
	right: 0px;
	top: 10px;
	font-size: 0.8rem;
	text-transform: none;
	text-align: right;
	font-weight: normal;
	line-height: 1rem;
	padding: 0px;
	box-shadow: none;
	border: none;
	transition: none;
}
.chat-wrapper .comment-options:hover {
	background-color: transparent;
	border: none;
}
.chat-wrapper .comment-options a, 
.chat-wrapper .comment-options span, 
.chat-wrapper .comment-options button {
	width: 1rem;
	height: 1rem;
	user-select: none;
	display: block;
	overflow: hidden;
	box-sizing: border-box;
	color: transparent;
	position: relative;
	font-size: 0.6rem;
	opacity: 0.2;
	float: right;
}
.chat-wrapper .comment-options a:hover, 
.chat-wrapper .comment-options span:hover, 
.chat-wrapper .comment-options button:hover {
	color: transparent;
	opacity: 0.8;
}

.chat-wrapper .comment-options a::before, 
.chat-wrapper .comment-options span::before, 
.chat-wrapper .comment-options button::before {
	font-family: "Font Awesome";
	display: block;
	width: 1rem;
	height: 1rem;
	top: 0px;
	right: 0px;
	position: absolute;
	text-align: center;
	line-height: 1rem;
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
}
.chat-wrapper .comment-options .comment-block::before {
	content: "\f05e";
}
.chat-wrapper .comment-options .comment-approve::before {
	content: "\f058";
}
.chat-wrapper .comment-options .comment-edit-link::before {
	content: "\f044";
}
.chat-wrapper .comment-options .comment-delete-link::before {
	content: "\f2ed";
}
.chat-wrapper .comment-options .comment-report {
	display: none;
}
.chat-wrapper .comment-reply-link {
	display: none;
	bottom: 10px;
}

.scroll-style::-webkit-scrollbar {
	width: 6px;
	background: transparent;
}
.scroll-style::-webkit-scrollbar-track {
	border-radius: 10px;
	background: rgba(255,255,255,0);
	transition: background 0.3s;
	border: none;
}
.scroll-style::-webkit-scrollbar-track:hover {
	background: rgba(255,255,255,0.05);
}
.scroll-style::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background: rgba(255,255,255,0.1);
	transition: background 0.3s;
	border: none;
}

.scroll-style::-webkit-scrollbar-thumb:hover {
	background: rgba(255,255,255,0.4);
}

.scroll-style::-webkit-scrollbar-thumb:active {
	background: rgba(255,255,255,0.4);
}
.content-title, .content-subtitle {
	position: relative;
	margin-bottom: 20px;
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
	grid-column: span 12;
}
.bg-alt .content-title, .bg-alt .content-subtitle {
	color: rgba(0,0,0,0.6);
	color: var(--dark-color-06);
}
.content-title h1 {
	display: block;
	font-size: 2rem;
	font-weight: bold;
	float: left;
	max-width: calc(100% - 3rem);
}
.content-subtitle h2 {
	display: block;
	font-size: 1.4rem;
	font-weight: bold;
	float: left;		
}
.content-title .content-link-back {
	display: block;
	width: 3rem;
	font-size: 0.6rem;
	text-transform: uppercase;
	float: right;
	text-align: center;
	line-height: 0.6rem;
	color: rgba(255,255,255,0);
	color: var(--txt-color-00);
	transition: color 0.3s;
}
.content-title .content-link-back::after {
	display: block;
	width: 3rem;
	height: 2rem;
	line-height: 2rem;
	text-transform: none;
	font-family: "Font Awesome";
	content: "\f104";
	font-size: 1.4rem;
	text-align: center;
	color: rgba(255,255,255,0.6);
	color: var(--txt-color-06);
}
.content-title .content-link-back.to-download-filter::after {
	content: "\f0b0";
}
.content-title .content-link-back.to-download-folder::after {
	content: "\f07c";
}
.content-title .content-link-back:hover {
	color: rgba(255,255,255,0.6);
	color: var(--txt-color-06);
}
.content-title .content-link-back:hover::after {
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
}
.title-frame {
	height: 4rem;
	position: relative;
	overflow: hidden;
	/*background-image: url(img/logo-radar.svg);
	background-repeat: no-repeat;
	background-position: top left;
	background-size: contain;*/
	opacity: 0.6;
}

.pagination {
	display: block;
	padding-top: 20px;
}
.pagination li {
	display: inline-block;
}
.pagination li:first-child {
	float: left;
}
.pagination li:last-child {
	float: right;
}
.pagination li a {
	width: 100%;
	background-color: rgba(255,255,255,0.1);
	display: block;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0);
	transition: box-shadow 0.3s ease-out, transform 0.3s ease-out, color 0.3s;
	position: relative;
	font-size: 0.8rem;
	padding: 0px 10px;
	box-sizing: border-box;
	height: 2rem;
	line-height: 2rem;
	text-transform: uppercase;
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
}
.bg-alt .pagination li a {
	background-color: rgba(0,0,0,0.6);
	background-color: var(--dark-color-06);
}
.pagination li a:hover {
	box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.2);
	transform: translate3d(0px, -1px, 10px);
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
}
.pagination li a::after {
	content: " ";
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	border: 1px solid rgba(255,255,255,1);
	border: 1px solid var(--brdr-color-10);
	box-sizing: border-box;
	z-index: 20;
	pointer-events: none;
	opacity: 0.2;
	transition: border 0.3s, opacity 0.3s;
}
.pagination li a:hover::after {
	opacity: 0.6;
}

.stream-featured-container {
	overflow: hidden;
	width: 100%;
	background-color: rgba(255,255,255,0.1);
	display: block;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0);
	transition: box-shadow 0.3s ease-out, transform 0.3s ease-out;
	position: relative;
	margin-bottom: 20px;
}
.stream-featured-container:hover {
	box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.2);
	transform: translate3d(0px, -1px, 10px);
}
.stream-featured-container::after {
	content: " ";
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	border: 1px solid rgba(255,255,255,1);
	border: 1px solid var(--brdr-color-10);
	box-sizing: border-box;
	z-index: 20;
	pointer-events: none;
	opacity: 0.2;
	transition: border 0.3s, opacity 0.3s;
}
.stream-featured-container .stream-featured-slider {
	/*width: 300%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
	position: relative;
	white-space: nowrap;
	margin-left: 2rem;
	transition: margin 0.3s;*/
}
.stream-featured-container .stream-featured-slider .stream-featured-media-tile {
	/*width: calc(100% / 3);*/
}
.stream-featured-container .stream-featured-slider .stream-featured-media-ratio {
	position: relative;
	width: 100%;
	/*padding-top: 56.25%;*/
	padding-top: 42.2%;
	display: block;
	z-index: 9;
	float: left;
	transition: padding-top 0.3s;
}
.stream-featured-container .stream-featured-slider .stream-featured-media-ratio figure {
	display: block;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	overflow: hidden;
}
.stream-featured-container .stream-featured-slider .stream-featured-media-ratio figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s;
	z-index: 10;
}
.stream-featured-container .stream-featured-slider .stream-featured-media-ratio .stream-featured-info {
	display: block;
	width: 100%;
	position: absolute;
	left: 0px;
	bottom: 0px;
	padding: 20px 40px;
	box-sizing: border-box;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
	/*background-color: rgba(0,0,0,0.4);*/
	z-index: 11;
}
.stream-featured-info .stream-featured-title {
	float: left;
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
	position: relative;
}
.stream-featured-info .stream-featured-title:hover {
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
}
.stream-featured-info .stream-featured-title h4 {
	font-size: 2rem;
}
.stream-featured-info .stream-featured-title span {
	font-size: 0.8rem;
}
.stream-featured-info .stream-featured-date {
	font-size: 0.6rem;
	float: right;
	clear: both;
}
.stream-featured-container .stream-featured-progress {
	display: none;
}
.stream-subtitle {
	min-height: 1rem;
	line-height: 1rem;
	display: block;
	/*padding: 20px 40px;*/
	padding-top: 1rem;
	padding-left: calc(2rem + 4px);
	padding-right: calc(2rem + 4px);
	padding-bottom: 0.5rem;
}
.stream-subtitle h3 {
	font-weight: bold;
	font-size: 1rem;
	display: block;
	float: left;
}
.stream-subtitle h3 a {
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
}
.stream-subtitle h3 a:hover {
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
}
a.show-grid-open, 
a.show-grid-close {
	display: block;
	float: right;
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
	opacity: 0.6;
	line-height: 1rem;
	font-family: "Font Awesome";
	transition: opacity 0.3s;
}
a.show-grid-open:hover, 
a.show-grid-close:hover {
	opacity: 1;
}
a.show-grid-open::before {
	/*content: "\f00a";*/
	content: "\f067";
}
a.show-grid-close::before {
	content: "\f060";
}

a.show-trail-open {
	display: block;
	float: right;
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
	opacity: 0.6;
	font-size: 0.9rem;
	line-height: 1rem;
	font-family: "Font Awesome";
	transition: opacity 0.3s;
	margin-right: 20px;
}
a.show-trail-open:hover {
	opacity: 1;
}
a.show-trail-open::before {
	content: "\f3c5";
}

.full-card {
	width: 100%;
	position: relative;
	border-bottom: 1px solid rgba(255,255,255,0.6);
	border-bottom: 1px solid var(--brdr-color-06);
	transition: border 0.3s;
}
.full-card a {
	color: rgba(255,255,255,1);
	display: block;
}
.full-card .full-card-position {
	position: absolute;
	width: 100%;
	bottom: 0px;
	left: 0px;
	background-color: rgba(0,0,0,0.8);
	background-color: var(--dark-color-08);
	/*background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);*/
	opacity: 0.9;
	transition: opacity 0.3s;
	backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
/*.full-card .full-card-position::before {
	content: " ";
	display: block;
	position: absolute;
	width: 100%;
	box-sizing: border-box;
	top: -1px;
	border-top: 1px solid rgba(255,255,255,0.4);
	opacity: 0.6;
	transition: opacity 0.3s;
}
.full-card:hover .full-card-position::before {
	opacity: 1;
}*/
.full-card:hover {
	border-bottom: 1px solid rgba(255,255,255,0.6);
	border-bottom: 1px solid var(--brdr-color-08);
}
.full-card a:hover  .full-card-position {
	opacity: 1;
}
.full-card .full-card-limit {
	width: 100%;
	max-width: 1200px;
	margin: 0px auto;
	/*padding: 1rem 2rem;*/
	padding: 20px;
	box-sizing: border-box;
}
.full-card .full-card-ratio .full-card-headline {
	font-size: 0.8rem;
	display: block;
	float: left;
	margin-bottom: 20px;
	text-transform: uppercase;
}
.full-card .full-card-limit .full-card-info {
	font-size: 0.8rem;
	display: block;
	float: right;
	margin-bottom: 20px;
}
.full-card .full-card-limit .full-card-title {
	font-size: 1.8rem;
	display: block;
	clear: both;
	/*color: rgba(255,255,255,0.8);*/
	color: rgba(255,255,255,0.9);
}
.full-card .full-card-ratio {
	
}
.video-card .full-card-ratio::before {
	content: " ";
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	pointer-events: none;
	background-image: url(img/video-play.svg);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0.2;
	transition: opacity 0.3s;
}
.full-card:hover .full-card-ratio::before {
	opacity: 0.4;
}
.full-card .full-card-ratio figure {
	display: block;
	width: 100%;
	height: 50vw;
	min-height: 200px;
	max-height: 60vh;
	overflow: hidden;
}
.full-card .full-card-ratio figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}



.thumb-listing {
	display: grid;
	grid-column-gap: 10px;
	grid-template-columns: repeat(12, 1fr);
	justify-content: start;
	align-content: start;
	width: 100%;
	max-width: 1200px;
	margin: 0px auto;
	padding: 20px;
	box-sizing: border-box;
}
.thumb-card {
	width: 100%;
	background-color: rgba(255,255,255,0.1);
	position: relative;
	grid-column: span 3;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0);
	transition: box-shadow 0.3s ease-out, transform 0.3s ease-out, opacity 0.3s;
	margin-bottom: 20px;
	box-sizing: border-box;
	border-bottom: 6px solid rgba(255,255,255,0.2);
	border-bottom: 6px solid var(--brdr-color-02);
}
.thumb-card:hover {
	box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.2);
	transform: translate3d(0px, -1px, 10px);
	border-bottom: 6px solid rgba(255,255,255,0.6);
	border-bottom: 6px solid var(--brdr-color-06);
}
.thumb-card::before {
	content: " ";
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	/*height: 100%;*/
	height: calc(100% + 6px);
	border: 1px solid rgba(255,255,255,1);
	border: 1px solid var(--brdr-color-10);
	box-sizing: border-box;
	z-index: 20;
	pointer-events: none;
	opacity: 0.2;
	transition: border 0.3s, opacity 0.3s;
}
.thumb-card:hover::before {
	opacity: 0.6;
}
/*.course-classes .thumb-card {
	opacity: 0.6;
}
.course-classes .thumb-card:hover {
	opacity: 0.8;
}*/
.course-classes .thumb-card.subscriber {
	border-bottom: 6px solid rgba(255,206,31,0.4);
	border-bottom: 6px solid var(--feat-color-04);
}
.course-classes .thumb-card.subscriber::before  {
	border: 1px solid rgba(255,206,31,1);
	border: 1px solid var(--feat-color-10);
}
.thumb-listing .thumb-card {
	margin-bottom: 10px;
}
.thumb-card-media {
	display: block;
	width: 100%;
	/*height: 100%;*/
	position: relative;
}
.thumb-card-media-ratio {
	display: block;
	width: 100%;
	padding-top: 56.25%;
	position: relative;
}
.thumb-card-media figure {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	overflow: hidden;
}
.thumb-card-excerpt-content {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	padding: 10px;
	box-sizing: border-box;
	color: rgba(255,255,255,0.6);
	color: var(--txt-color-06);
}
.subscriber .thumb-card-excerpt-content a {
	color: rgba(255,206,31,0.6);
	color: var(--feat-color-06);
}
.thumb-card-media figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s;
	z-index: 10;
}
.thumb-card:hover figure img {
	transform: scale(1.05, 1.05);
}
.thumb-card-excerpt {
	position: relative;
}
.thumb-card-excerpt a {
	transition: color 0.3s;
	color: rgba(255,255,255,0.6);
	color: var(--txt-color-06);
}
.thumb-card:hover .thumb-card-excerpt a {
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
}
.subscriber:hover .thumb-card-excerpt-content a {
	color: rgba(255,206,31,1);
	color: var(--feat-color-10);
}
.thumb-card-headline {
	display: block;
	height: 1rem;
	overflow: hidden;
	line-height: 1rem;
	font-size: 0.6rem;
	padding-bottom: 5px;
	border-bottom: 1px solid rgba(255,255,255,0.2);
	border-bottom: 1px solid var(--brdr-color-02);
	text-transform: uppercase;
	margin-bottom: 5px;
	position: relative;
}
.thumb-card-title {
	display: block;
	overflow: hidden;
	height: calc(100% - (2rem + 20px));
	max-height: calc(100% - (2rem + 20px));
	line-height: 1.2rem;
	font-size: 0.9rem;
	font-weight: normal;
	margin-bottom: 10px;
	/*-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%,rgba(0,0,0,0) 100%);*/
}
.thumb-card-info {
	display: block;
	height: 1rem;
	overflow: hidden;
	line-height: 1rem;
	font-size: 0.6rem;
	text-align: right;		
}

.stream-container {
	/*display: block;*/
	width: 100%;
	/*min-height: calc(100vh - 140px);*/
	min-height: calc(100vh - 160px);
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: stretch;
	
	
}
.stream-video {
	position: relative;
	width: 50%;
	/*height: 100%;*/
	min-height: calc(100vh - 160px);
	/*min-height: calc(100vh - 140px);*/
	/*max-height: calc(100vh - 3.6rem - 80px);*/
	float: left;
		/*background-color: rgba(0,0,0,0.2);*/
}
.stream-video .page-interaction {
	padding: 0px 20px;
	margin: 0px;
	border: none;
}
.stream-video .stream-media-ratio {
	padding-top: 56.25%;
	position: relative;
	margin-bottom: 10px;
}
.stream-video .stream-media-ratio .stream-media {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
}
.stream-video .stream-media-ratio iframe, 
.stream-video .stream-media-ratio video, 
.stream-video .stream-media-ratio img {
	width: 100%;
	height: 100%;
}
.stream-video .stream-media-ratio img {
	object-fit: cover;
}

.stream-video-title {
	height: 2rem;
	max-height: 2rem;
	padding: 0px 20px;
	line-height: 2rem;
	font-size: 1.2rem;
	text-transform: uppercase;
	overflow: hidden;
	display: block;
}
.stream-open-button-wrapper {
	padding-top: 10px;
	margin-bottom: 10px;
}
.stream-open-button {
	width: calc(50% - 30px);
	display: none;
	background-color: rgba(255,255,255,0.1);
	float: left;
	padding: 10px;
	padding-left: calc(0.7rem + 20px);
	font-size: 0.7rem;
	line-height: 0.7rem;
	position: relative;
	margin-left: 20px;
	text-transform: uppercase;
	box-sizing: border-box;
	cursor: pointer;
	font-weight: bold;
	user-select: none;
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0);
	transition: box-shadow 0.3s ease-out, transform 0.3s ease-out, color 0.3s;
}
.awaiting-quiz {
	width: 100%;
	box-sizing: border-box;
	display: block;
	background-color: rgba(255,255,255,0.1);
	float: left;
	padding: 10px;
	text-align: center;
	font-size: 0.7rem;
	line-height: 0.9rem;
	position: relative;
	text-transform: uppercase;
	cursor: pointer;
	font-weight: bold;
	user-select: none;
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0);
	transition: box-shadow 0.3s ease-out, transform 0.3s ease-out, color 0.3s;
	margin-bottom:20px;
}
.stream-open-button::after {
	content: " ";
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	border: 1px solid rgba(255,255,255,1);
	border: 1px solid var(--brdr-color-10);
	box-sizing: border-box;
	z-index: 20;
	pointer-events: none;
	opacity: 0.2;
	transition: border 0.3s, opacity 0.3s;
}
.stream-open-button::before {
	display: block;
	width: calc(0.7rem + 20px);
	height: calc(0.7rem + 20px);
	font-family: "Font Awesome";
	transition: opacity 0.3s;
	font-weight: normal;
	top: 0px;
	left: 0px;
	position: absolute;
	text-align: center;
	font-size: calc(0.7rem + 6px);
	line-height: calc(0.7rem + 20px);
}
.stream-open-button:hover {
	color: rgba(255,206,31,1);
	color: var(--feat-color-10);
	box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.2);
	transform: translate3d(0px, -1px, 10px);
}
.stream-open-button:hover::after {
	border: 1px solid rgba(255,206,31,1);
	border: 1px solid var(--feat-color-10);
	opacity: 0.6;
}
/*.stream-open-button:hover::before {
}*/
.stream-open-downloads, 
.show-quiz-on-start {
	display: block;
}
.stream-open-quiz::before {
	content: "\f46d";
}
.stream-open-downloads::before {
	content: "\f0c6";
}
.stream-chat {
	width: 50%;
	min-height: calc(100vh - 160px);
	box-sizing: border-box;
	padding: 20px;
	padding-top: 10px;
	float: left;
}
.stream-chat .page-comment,
.stream-chat .page-comment .chat-wrapper {
	height: 100%;
	margin-bottom: 0px;
}
.stream-chat .page-comment .chat-wrapper .comment-list {
	/*height: calc(100vh - 4rem - 200px);*/
	height: calc(100vh - 4rem - 220px);
}
/*.stream-chat textarea.comment {
	font-size: 0.7rem !important;	
}*/
.login-wrapper {
	display: block;
	width: 100%;
	max-width: 460px;
	min-height: calc(100vh - 80px);
	/*background-color: rgba(255,255,255,0.1);*/
	margin: 0px auto;
	padding-top: 20px;
	box-sizing: border-box;
}
.login-wrapper-content .input-container {
	padding: 10px 2rem;
}
.site-logo-login {
	/*margin: 2rem;*/
	margin-bottom: 20px;
	padding-bottom: 30%;
	position: relative;
	overflow: hidden;
}
.site-logo-login figure {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}
.site-logo-login img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.tml .message, 
.tml .error {
	display: block;
	text-align: center;
	font-size: 0.8rem;
	margin-bottom: 10px;
}
.login-links {
	margin-top: 20px;
	padding: 20px 10px;
	/*background-color: rgba(0,0,0,0.4);*/
	text-align: center;
	font-size: 0.8rem;
	border-top: 1px solid rgba(255,255,255,0.2);
	border-top: 1px solid var(--brdr-color-02);
}
.login .message, 
.login .error,
.tml-register .message, 
.tml-register .error, 
.tml-resetpass .error {
	display: block;
	text-align: center;
	background-color: rgba(255,206,31,0.1);
	background-color: var(--feat-color-01);
	color: rgba(255,206,31,0.8);
	color: var(--feat-color-08);
	min-height: 2rem;
	line-height: 1.2rem;
	font-size: 0.8rem;
	box-sizing: border-box;
	cursor: pointer;
	padding: 10px;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0);
	border: 1px solid rgba(255,206,31,0.4);
	border: 1px solid var(--feat-color-04);
	margin: 0px 2rem ;
	margin-bottom: 20px;
}
.loading-form {
	opacity: 0.5;
}
.blocked-comment {
	color: rgba(255,206,31,1);
	color: var(--feat-color-10);
}
.chat-wrapper .blocked-comment .comment-options button::before {
	color: rgba(136,192,8,1);
}
.chat-wrapper .loading-form .comment-options button {
	display: none;
}
.register-info {
	display: block;
	text-align: center;
	font-size: 0.8rem;
}



/* PICTURE UPLOAD CROPIMAGE */
#profile-picture-file-drag {
	display: block;
	/*max-width: 320px;*/
	margin: 0px auto;
	position: relative;
	box-sizing: border-box;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3) inset;
	border: 1px solid rgba(255,255,255,0.4);
	border: 1px solid var(--brdr-color-04);
	padding: 20px;
	cursor: pointer;
	min-height: 280px;
	transition: box-shadow 0.3s, border 0.3s;
	background-color: rgba(0,0,0,0.1);
	background-color: var(--dark-color-01);
}
#profile-picture-file-drag::before {
	content: " ";
	display: block;
	width: calc(100% - 40px);
	height: calc(100% - 40px);
	position: absolute;
	border: 6px dashed rgba(255,255,255,0.2);
	box-sizing: border-box;
	top: 0px;
	left: 0px;
	margin: 20px;
	transition: width 0.3s, height 0.3s, border 0.3s, margin 0.3s;
}
#profile-picture-file-drag:hover {
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.3) inset;
	border: 1px solid rgba(255,255,255,0.6);
	border: 1px solid var(--brdr-color-06);
}
#profile-picture-file-drag:hover::before {
	border: 2px dashed rgba(255,255,255,0.1);;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	margin: 10px;
}
#profile-picture-file-drag p, #profile-picture-file-drag #profile-picture-messages {
	display: block;
	margin: 20px;
	text-align: center;
	overflow: hidden;
}
#profile-picture-file-drag #profile-picture-drag-hidden input, #profile-picture-file-drag #profile-picture-drag-hidden button {
	visibility: hidden;
}
#profile-picture-file-drag #profile-picture-drag-hidden {
	width: 0px;
	height: 0px;
	overflow: hidden;
	position: absolute;
	visibility: hidden;
}
#profile-picture-canvas-frame {
	max-width: 320px;
	max-height: 320px;
	cursor: grab;
	position: relative;
}
#profile-picture-canvas-frame::before {
	display: block;
	content: " ";
	border: 2px dashed rgba(255,255,255,0.8);
	position: absolute;
	margin: 14px;
	width: calc(100% - 32px);
	height: calc(100% - 32px);
	pointer-events: none;
}
#profile-picture-canvas-result {
	box-sizing: border-box;
	padding: 16px;
}
.profile-picture-range, 
#profile-picture-crop-submit, 
.profile-picture-canvas-limit {
	width: 320px;
	margin: 0px auto;
}
#profile-picture-step-1 {
	display: block;	
}
#profile-picture-step-2, 
#profile-picture-step-3 {
	display: none;	
}
.profile-picture-canvas-result-frame {
	width: 288px;
	height: 288px;
	position: relative;
	margin: 0px auto;
}
.profile-picture-canvas-result-frame::before, 
.profile-avatar-frame::before {
	display: block;
	content: " ";
	width: 100%;
	height: 100%;
	border: 1px solid rgba(255,255,255,1);
	border: 1px solid var(--brdr-color-10);
	opacity: 0.4;
	position: absolute;
	pointer-events: none;
	box-sizing: border-box;
	z-index: 11;
	transition: opacity 0.3s;
}
.profile-picture-canvas-result-frame:hover::before, 
.profile-avatar-frame:hover::before {
	opacity: 0.6;
}
.profile-avatar {
	width: 8rem;
	height: 8rem;
	max-width: 288px;
	max-height: 288px;
	position: relative;
	margin: 0px auto;
	margin-bottom: 10px;
}
.profile-avatar-frame {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.profile-avatar-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.profile-avatar-frame::after {
	content: attr(title);
	display: block;
	width: 100%;
	text-transform: lowercase;
	color: rgba(255,255,255,0.8);
	position: absolute;
	font-size: 0.6rem;
	line-height: 1rem;
	background-color: rgba(0,0,0,0.4);
	background-color: var(--dark-color-04);
	bottom: 0px;
	left: 0px;
	z-index: 10;
}
/* QUIZ */
.modal-quiz, 
.modal-dl {
	display: none;
	position: fixed;
	width: 100%;
	height: 100vh;
	background-color: rgba(0,0,0,0.9);
	top: 0px;
	left: 0px;
	z-index: 69;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}
.quiz-step {
	display: none;
}
.quiz-step-switch:checked + .quiz-step, 
.modal-quiz-switch:checked + .modal-quiz, 
.modal-dl-switch:checked + .modal-dl {
	display: block;
}
.quiz-header {
	border-bottom: 6px solid rgba(255,255,255,0.2);
	border-bottom: 6px solid var(--brdr-color-02);
	/*padding-top: 20px;*/
}
.modal-wrapper .quiz-header {
	border-bottom: 6px solid rgba(255,255,255,0.2);
}
.quiz-done-msg {
	font-size: 1.4rem;
	text-align: center;
	margin-bottom: 1rem;
}
.quiz-done-msg span {
	display: block;
	margin-bottom: 20px;
}
.quiz-done-msg::before {
	display: block;
	text-align: center;
	font-size: 2.6rem;
	font-family: "Font Awesome";
	width: 5rem;
	height: 5rem;
	line-height: 5rem;
	border-radius: 100%;
	border: 1px solid rgba(255,255,255,0.4);
	border: 1px solid var(--brdr-color-04);
	margin: 0px auto;
	margin-bottom: 1rem;
}
.quiz-done-success::before {
	content: "\f46c";
	border: 1px solid rgba(255,206,31,0.8);
	border: 1px solid var(--feat-color-08);
}
.quiz-done-success {
	color: rgba(255,206,31,0.8);
	color: var(--feat-color-08);
}
.quiz-done-failure::before {
	content: "\f12a";
	border: 1px solid rgba(255,30,30,0.8);
	border: 1px solid var(--warn-color-08);
	color: rgba(255,30,30,0.8);
	color: var(--warn-color-08);
}
.quiz-done-failure {
	color: rgba(255,30,30,0.8);
	color: var(--warn-color-08);
}
.quiz-confirm-txt::before {
	display: block;
	text-align: center;
	font-size: 2.6rem;
	font-family: "Font Awesome";
	width: 5rem;
	height: 5rem;
	line-height: 5rem;
	border-radius: 100%;
	border: 1px solid rgba(255,255,255,0.4);
	border: 1px solid var(--brdr-color-04);
	margin: 0px auto;
	margin-bottom: 1rem;
	content: "\f46d";
}
.quiz-answered {
	font-size: 1.1rem;
	margin-bottom: 2rem;
}
.quiz-media {
	display: block;
	width: 100%;
	padding-top: 56.25%;
	position: relative;
}
.quiz-media::after {
	content: " ";
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border: 1px solid rgba(255,255,255,1);
	border: 1px solid var(--brdr-color-10);
	top: 0px;
	left: 0px;
	position: absolute;
	opacity: 0.1;
	transition: opacity 0.3s;
	pointer-events: none;
}
.quiz-media figure {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	overflow: hidden;
}
.quiz-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.quiz-question {
	font-size: 1rem;
	margin-bottom: 20px;
}
.quiz-question::before {
	display: block;
	width: calc(2rem + 10px);
	content: attr(data-number);
	color: rgba(255,206,31,1);
	color: var(--feat-color-10);
	font-weight: bold;
	text-align: center;
	font-size: 1.6rem;
	line-height: 1.6rem;
	float: left;
	pointer-events: none;
	opacity: 0.8;
}
.modal-wrapper .quiz-question::before {
	color: rgba(255,206,31,1);
}
.quiz-question span {
	display: block;
	float: left;
	width: calc(100% - 2rem - 20px);
	margin-left: 10px;
}
.quiz-navi {
	padding-top: 20px;
}
.quiz-navi-button, 
button.quiz-navi-button { 
	width: 10rem;
	display: block;
	background-color: rgba(255,255,255,0.1);
	padding: 10px;
	font-size: 1rem;
	line-height: calc(1.4rem - 5px);
	position: relative;
	text-transform: uppercase;
	box-sizing: border-box;
	cursor: pointer;
	user-select: none;
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0);
	transition: box-shadow 0.3s ease-out, transform 0.3s ease-out, color 0.3s;
	margin-bottom: 20px;
	border: none;
	min-height: auto;
}
.modal-wrapper .quiz-navi-button, 
.modal-wrapper button.quiz-navi-button { 
	color: rgba(255,255,255,0.8);
}
.quiz-navi-button::after {
	content: " ";
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	border: 1px solid rgba(255,255,255,1);
	border: 1px solid var(--brdr-color-10);
	box-sizing: border-box;
	z-index: 20;
	pointer-events: none;
	opacity: 0.2;
	transition: border 0.3s, opacity 0.3s;
}
.modal-wrapper .quiz-navi-button::after {
	border: 1px solid rgba(255,255,255,1);
}
.quiz-navi-button::before {
	display: block;
	width: calc(2rem + 20px);
	height: calc(1.4rem + 20px);
	font-family: "Font Awesome";
	transition: opacity 0.3s;
	font-weight: normal;
	position: absolute;
	text-align: center;
	font-size: 1rem;
	line-height: calc(1.4rem + 20px);
}
.quiz-navi-prev {
	float: left;
	text-align: left;
	padding-left: calc(2rem + 20px);
}
.quiz-navi-prev::before {
	top: 0px;
	left: 0px;
	content: "\f104"
}
.quiz-navi-next,
button.quiz-navi-next {
	float: right;
	text-align: right;
	padding-right: calc(2rem + 20px);
}
.quiz-navi-next::before {
	top: 0px;
	right: 0px;
	content: "\f105"
}
.quiz-navi-done {
	clear: both;
	text-align: center;
	margin: 0px auto;
	margin-bottom: 20px;
}
.quiz-navi-button:hover,
button.quiz-navi-button:hover {
	color: rgba(255,206,31,1);
	color: var(--feat-color-10);
	box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.2);
	transform: translate3d(0px, -1px, 10px);
	border: none;
}
.modal-wrapper .quiz-navi-button:hover,
.modal-wrapper button.quiz-navi-button:hover {
	color: rgba(255,206,31,1);
}
.quiz-navi-button:hover::after {
	border: 1px solid rgba(255,206,31,1);
	border: 1px solid var(--feat-color-10);
	opacity: 0.6;
}
.modal-wrapper .quiz-navi-button:hover::after {
	border: 1px solid rgba(255,206,31,1);
}
#quiz-form-submit, 
.quiz-form-submit {
	font-weight: bold;
	color: rgba(255,206,31,1);
	color: var(--feat-color-10);
	margin: 0px auto;
	margin-bottom: 3rem;
	animation-name: blink-warning;
	animation-duration: 0.6s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
}
.no-answers {
	border-bottom: 1px solid rgba(255,30,30,0.4);
	border-bottom: 1px solid var(--warn-color-04);
	color: rgba(255,30,30,0.6);
	color: var(--warn-color-06);
	background-color: rgba(255,30,30,0.2);
	background-color: var(--warn-color-02);
	padding: 10px;
	text-transform: uppercase;
	text-align: center;
	font-size: 0.8rem;
}

.radio-quiz {
	border-bottom: 1px solid rgba(255,255,255,0.1);
	border-bottom: 1px solid var(--brdr-color-10);
}
.modal-wrapper .radio-quiz {
	border-bottom: 1px solid rgba(255,255,255,0.1);
}
.modal-wrapper .radio-quiz {
	border-bottom: 1px solid rgba(255,255,255,0.1);
}
.radio-quiz label, 
.radio-quiz .checkbox-dummy {
	display: block;
	min-height: 2rem;
	/*line-height: 2rem;*/
	font-size: 0.8rem;
	cursor: pointer;
	opacity: 0.8;
	transition: opacity 0.3s, background-color 0.3s, color 0.3s;
	float: left;
	position: relative;
	padding-left: 2rem;
	user-select: none;
}
.radio-quiz .checkbox-dummy {
	cursor: auto;
}
.radio-quiz label::before,
.radio-quiz .checkbox-dummy::before {
	display: block;
	position: absolute;
	top: calc(50% - 1rem);
	left: 0px;
	width: 2rem;
	height: 2rem;
	content: attr(data-letter);
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
	line-height: calc(2rem - 2px);
	font-weight: bold;
	text-align: center;
	font-size: 1rem;
	transition: opacity 0.3s, color 0.3s, border 0.3s, background-color 0.3s;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2) inset;
	background-color: rgba(255,255,255,0.05);
	float: left;
	pointer-events: none;
	opacity: 0.8;
	border-radius: 1rem;
}
.modal-wrapper .radio-quiz label::before,
.modal-wrapper .radio-quiz .checkbox-dummy::before {
	color: rgba(255,255,255,1);
}
.radio-quiz label::after, 
.radio-quiz .checkbox-dummy::after {
	content: " ";
	display: block;
	position: absolute;
	top: calc(50% - 1rem - 1px);
	left: 0px;
	width: 2rem;
	height: 2rem;
	border: 1px solid rgba(255,255,255,1);
	border: 1px solid var(--brdr-color-10);
	box-sizing: border-box;
	z-index: 20;
	pointer-events: none;
	opacity: 0.2;
	transition: border 0.3s, opacity 0.3s;
	border-radius: 1rem;
}
.modal-wrapper .radio-quiz label::after, 
.modal-wrapper .radio-quiz .checkbox-dummy::after {
	border: 1px solid rgba(255,255,255,1);
}
.radio-quiz .checkbox-dummy span {
	display: inline-block;
	user-select: none;
	padding: 0px 10px;
	box-sizing: border-box;
}
.radio-quiz label:hover::after {
	opacity: 0.6;
}
.radio-quiz label:hover::before {
	opacity: 1;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4) inset;
}
.quiz-correct .checkbox-dummy {
	opacity: 1;
	color: rgba(50,200,50,1);
}
.radio-quiz input[type="radio"]:checked ~ label,
.quiz-selected .checkbox-dummy {
	opacity: 1;
	color: rgba(255,206,31,1);
	color: var(--feat-color-10);
}
.quiz-correct .checkbox-dummy::before {
	opacity: 1;
	color: rgba(50,200,50,1);
	box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.2);
	background-color: rgba(0,0,0,0.2);
	background-color: var(--dark-color-02);
}
.radio-quiz input[type="radio"]:checked ~ label::before,
.quiz-selected .checkbox-dummy::before {
	opacity: 1;
	color: rgba(255,206,31,1);
	color: var(--feat-color-10);
	box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.2);
	background-color: rgba(0,0,0,0.2);
	background-color: var(--dark-color-02);
}
.modal-wrapper .radio-quiz input[type="radio"]:checked ~ label,
.modal-wrapper .quiz-selected .checkbox-dummy {
	color: rgba(255,206,31,1);
}
.modal-wrapper .quiz-correct .checkbox-dummy::before {
	background-color: rgba(0,0,0,0.2);
}
.modal-wrapper .radio-quiz input[type="radio"]:checked ~ label::before,
.modal-wrapper .quiz-selected .checkbox-dummy::before {
	color: rgba(255,206,31,1);
	background-color: rgba(0,0,0,0.2);
}
.quiz-correct .checkbox-dummy::after {
	opacity: 1;
	border: 1px solid rgba(50,200,50,1);
}
.radio-quiz input[type="radio"]:checked ~ label::after, 
.quiz-selected .checkbox-dummy::after {
	opacity: 1;
	border: 1px solid rgba(255,206,31,1);
	border: 1px solid var(--feat-color-10);
}
.modal-wrapper .radio-quiz input[type="radio"]:checked ~ label::after, 
.modal-wrapper .quiz-selected .checkbox-dummy::after {
	border: 1px solid rgba(255,206,31,1);
}
.quiz-correct .checkbox-dummy::after {
	background-color: rgba(50,200,50,0.2);
}
.quiz-correct {
	padding-right:  2rem;
	background: linear-gradient(to right, rgba(255,255,255,0.05) 0%,rgba(255,255,255,0.1) 100%);
}
.quiz-correct::before {
	content: "\f00c";
	font-family: "Font Awesome";
	display: block;
	position: absolute;
	top: calc(50% - 1rem - 1px);
	right: 0px;
	width: 2rem;
	height: 2rem;
	line-height: 2rem;
	text-align: center;
	box-sizing: border-box;
	z-index: 20;
	pointer-events: none;
	opacity: 0.6;
	transition: border 0.3s, opacity 0.3s;
	color: rgba(50,200,50,1);
}

/* ADJUSTMENTS */
.more-news {
	
}
.more-news a {
	display: block;
	padding: 10px;
	box-sizing: border-box;
	font-weight: bold;
	position: relative;
	color: rgba(255,255,255,0.6);
	color: var(--txt-color-06);
}
.bg-alt .more-news a {
	color: rgba(255,255,255,0.6);
}
.more-news a:hover {
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
}
.bg-alt .more-news a:hover {
	color: rgba(255,255,255,0.8);
}
.more-news a::before {
	display: block;
	width: 1rem;
	height: 1rem;
	opacity: 0.6;
	line-height: 1rem;
	font-family: "Font Awesome";
	transition: opacity 0.3s;
	content: "\f067";
	position: absolute;
	top: 10px;
	right: 10px;
}
.more-news a:hover::before {
	opacity: 0.8;
}
.modal {
	display: block;
	position: fixed;
	width: 100%;
	height: 100vh;
	background-color: rgba(0,0,0,0.9);
	top: 0px;
	left: 0px;
	z-index: 69;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}
/*.modal + .container {
	overflow: hidden;
	max-height: calc(100vh - 160px);
}*/
.modal-wrapper {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	max-width: 800px;
	margin: 0px auto;
	padding: 20px;
	box-sizing: border-box;
	overflow-y: auto;
	color: rgba(255,255,255,0.8);
}
.modal-wrapper .text-classic input, 
.modal-wrapper .text-classic label, 
.modal-wrapper .select-classic label, 
.modal-wrapper .input-container, 
.modal-wrapper input[type="submit"], 
.modal-wrapper input[type="button"], 
.modal-wrapper button[type="submit"], 
.modal-wrapper button[type="button"], 
.modal-wrapper a.button, 
.modal-wrapper .select-classic .select-container select, 
.modal-wrapper .select-classic .select-container::after {
	color: rgba(255,255,255,0.8);
}
.modal-wrapper .text-classic input, 
.modal-wrapper .select-classic .select-container,
.modal-wrapper input[type="submit"], 
.modal-wrapper input[type="button"], 
.modal-wrapper button[type="submit"], 
.modal-wrapper button[type="button"] {
	border: 1px solid rgba(255,255,255,0.2);
}
.modal-wrapper .text-classic input:hover, 
.modal-wrapper .select-classic .select-container:hover,
.modal-wrapper input[type="submit"]:hover, 
.modal-wrapper input[type="button"]:hover, 
.modal-wrapper button[type="submit"]:hover, 
.modal-wrapper button[type="button"]:hover, 
.modal-wrapper .text-classic input:focus, 
.modal-wrapper .select-classic .select-container:focus,
.modal-wrapper input[type="submit"]:focus, 
.modal-wrapper input[type="button"]:focus, 
.modal-wrapper button[type="submit"]:focus, 
.modal-wrapper button[type="button"]:focus {
	border: 1px solid rgba(255,255,255,0.4);
	color: rgba(255,255,255,1);
}

.modal-quiz-wrapper, 
.modal-dl-wrapper {
	height: calc(100% - 80px);
}
.modal-header {
	display: block;
	width: 100%;
	height: 80px;
	position: relative;
	max-width: 800px;
	margin: 0px auto;
	padding: 20px;
	box-sizing: border-box;
	color: rgba(255,255,255,1);
}
.modal-header-title {
	width: calc(100% - 50px);
	height: 40px;
	line-height: 40px;
	float: left;
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
}
.modal-header-close {
	display: block;
	width: 40px;
	height: 40px;
	cursor: pointer;
	float: right;
	position: relative;
	opacity: 0.6;
	transition: opacity 0.3s;
}
.modal-header-close:hover {
	opacity: 1;
}
.modal-header-close span,
.modal-header-close span::before,
.modal-header-close span::after {
	display: block;
	content: " ";
	width: 34px;
	height: 4px;
	background-color: rgba(255,255,255,1);
	margin-left: 5px;
	position: relative;
	margin-top: 18px;
	transition: all 0.3s;
	backface-visibility: hidden;
	transform-origin: left;
}
.modal-header-close span::before {
	position: absolute;
	transform: rotate(45deg);
	margin-top: -12px;
	margin-left: 3px;
}
.modal-header-close span::after {
	position: absolute;
	transform: rotate(-45deg);
	margin-top: 12px;
	margin-left: 3px;
}
.modal-header-close span {
	background-color: transparent;
}
.analytics-wrapper-label {
	font-size: 1rem;
	font-weight: bold;
	text-transform: uppercase;
	opacity: 0.6;
	transition: opacity;
	cursor: pointer;
	display: block;
	padding-bottom: 10px;
	user-select: none;
}
.analytics-wrapper-label:hover {
	opacity: 1;
}
.analytics-wrapper-label::after {
	content: "\f106";
	font-family: "Font Awesome";
	float: right;
}
.analytics-wrapper {
	overflow: hidden;
	max-height: 0px;
	margin-bottom: 10px;
	border-bottom: 1px solid rgba(255,255,255,0.2);
	border-bottom: 1px solid var(--brdr-color-02);
}
.analytics-switch:checked + .analytics-wrapper-label {
	opacity: 1;
}
.analytics-switch:checked + .analytics-wrapper-label::after {
	content: "\f107";
}
.analytics-switch:checked + .analytics-wrapper-label + .analytics-wrapper {
	max-height: 9999px;
}
.analytics-container {
	overflow-x: auto;
	padding-top: 5px;
}
.analytics-buttons {
	margin-bottom: 10px;
	float: right;
	clear: both;
}
.analytics-title {
	display: block;
}
.analytics-page-data {
	margin-bottom: 20px;
	font-size: 0.7rem;
}
.analytics-page-data strong {
	opacity: 0.6;
}
.analytics-page-data li {
	margin-bottom: 10px;
}
.page-analytics .page-title {
	padding: 20px 0px;
}
/*.analytics-export {
	float: right;
}
.analytics-export::before {
	content: "\f56d";
	font-family: "Font Awesome";
}*/
.tableexport-caption {
	margin-bottom: 10px;
}
.tableexport-caption .button-default {
	float: left;
}
.column-table-large {
	min-width: 300px;
}
.column-table-medium {
	min-width: 170px;
}


.password-change h1, 
.password-change p {
	display: block;
	margin-bottom: 10px;
	text-align: center;
}
.modal-error {
	display: block;
	text-align: center;
	background-color: rgba(255,30,30,0.1);
	background-color: var(--warn-color-01);
	color: rgba(255,30,30,0.8);
	color: var(--warn-color-08);
	min-height: 2rem;
	line-height: 2rem;
	font-size: 0.8rem;
	box-sizing: border-box;
	cursor: pointer;
	padding: 0px 10px;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0);
	border: 1px solid rgba(255,30,30,0.4);
	border: 1px solid var(--warn-color-04);
	margin-bottom: 10px;
}
.profile-errors p {
	display: block;
	text-align: center;
	background-color: rgba(255,206,31,0.1);
	background-color: var(--feat-color-01);
	color: rgba(255,206,31,0.8);
	color: var(--feat-color-08);
	min-height: 2rem;
	line-height: 2rem;
	font-size: 0.8rem;
	box-sizing: border-box;
	cursor: pointer;
	padding: 0px 10px;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0);
	border: 1px solid rgba(255,206,31,0.4);
	border: 1px solid var(--feat-color-04);
	margin-bottom: 10px;
}
.profile-errors p.error {
	display: block;
	text-align: center;
	background-color: rgba(255,30,30,0.1);
	background-color: var(--warn-color-01);
	color: rgba(255,30,30,0.8);
	color: var(--warn-color-08);
	min-height: 2rem;
	line-height: 2rem;
	font-size: 0.8rem;
	box-sizing: border-box;
	cursor: pointer;
	padding: 0px 10px;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0);
	border: 1px solid rgba(255,30,30,0.4);
	border: 1px solid var(--warn-color-04);
	margin-bottom: 10px;
}
input#first_name, 
input#last_name {
	text-transform: uppercase;
}
.browser-warning {
	display: none;
	text-align: center;
	background-color: rgba(255,30,30,0.4);
	background-color: var(--warn-color-04);
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
	min-height: 2rem;
	font-size: 0.8rem;
	box-sizing: border-box;
	cursor: pointer;
	padding: 10px;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0);
	border: 1px solid rgba(255,30,30,0.8);
	border: 1px solid var(--warn-color-08);
	animation-name: blink-warning;
	animation-duration: 0.6s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
}
.cat-color {
	position: relative;
}
.cat-color::before {
	content: " ";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	border-left: 6px solid rgba(255,255,255,0.4);
	border-left: 6px solid var(--brdr-color-04);
	pointer-events: none;
	/*opacity: 0.2;
	transition: opacity 0.3s;*/
	transition: border-color 0.3s;
}
/*.cat-color:hover::before {
	opacity: 0.6;
}*/


/* TML */
.tml-user-pass1-wrap::after,
.tml-user-pass1-wrap label::after, 
.tml-user-pass2-wrap::after,
.tml-user-pass2-wrap label::after {
	display: block;
	content: " ";
	clear: both;
}
.tml-user-pass1-wrap, 
.tml-user-pass2-wrap {
	padding: 10px;
	box-sizing: border-box;
	position: relative;
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
}
.tml-user-pass1-wrap label, 
.tml-user-pass2-wrap label {
	display: block;
	min-height: 2rem;
	font-size: 0.8rem;
	box-sizing: border-box;
	padding: 0px 10px;
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
	transition: color 0.3s;
}


.tml-user-pass1-wrap:focus-within label, 
.tml-user-pass2-wrap:focus-within label {
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
}

.tml-user-pass1-wrap label span, 
.tml-user-pass2-wrap label span {
	display: inline-block;
	user-select: none;
	padding: 0px 10px;
	box-sizing: border-box;
}
.login-wrapper-content .tml-user-pass1-wrap, 
.login-wrapper-content .tml-user-pass2-wrap {
	padding: 10px 2rem;
}

.tml-user-pass1-wrap input, 
.tml-user-pass2-wrap input {
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	display: block;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2) inset;
	background-color: rgba(255,255,255,0.05);
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
	min-height: 2rem;
	line-height: 2rem;
	font-size: 0.8rem;
	box-sizing: border-box;
	padding: 0px 10px;
	border: 1px solid rgba(255,255,255,0.2);
	border: 1px solid var(--brdr-color-02);
	transition: color 0.3s, box-shadow 0.3s, border 0.3s;
	float: left;
	width: 100%;
}
.tml-user-pass1-wrap input:focus, 
.tml-user-pass2-wrap input:focus {
	border: 1px solid rgba(255,255,255,0.6);
	border: 1px solid var(--brdr-color-06);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4) inset;
	color: rgba(255,255,255,1);
	color: var(--txt-color-10);
}
.tml-user-pass1-wrap input:hover, 
.tml-user-pass2-wrap input:hover {
	border: 1px solid rgba(255,255,255,0.6);
	border: 1px solid var(--brdr-color-06);
}
.tmlx-rules-wrap {
	font-size: 0.8rem;
}
.register-title {
	display: block;
	text-align: center;
	font-size: 1.2rem;
	text-transform: uppercase;
	margin-bottom: 20px;
}
#registerform h3,
#registercheck h3 {
	display: block;
	text-align: center;
	font-size: 0.8rem;
	text-transform: uppercase;
	margin-bottom: 20px;
}
.register-option {
	display: block;
	min-height: 2rem;
	font-size: 0.8rem;
	box-sizing: border-box;
	padding: 0px 10px;
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
	background-color: rgba(255,255,255,0.05);
	line-height: 2rem;
	border: 1px solid rgba(255,255,255,0.2);
	border: 1px solid var(--brdr-color-02);
	text-align: center;
	transition: color 0.3s, box-shadow 0.3s, border 0.3s;
	float: left;
	width: 100%;
	margin-bottom: 20px;
	cursor: pointer;
}
.register-company {
	padding: 0px;
}
.register-option .register-option-image {
	position: relative;
	width: 100%;
	padding-top: 40%;
}
.register-option .register-option-image figure {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}
.register-option .register-option-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.register-option span {
	display: block !important;
	box-sizing: border-box;
}
.register-option-title {
	font-size: 1rem !important;
	text-transform: uppercase;
	padding: 6px !important;
}
.register-step {
	display: none;
}
.radio-step-switch:checked + .register-step {
	display: block;
}
.register-back {
	padding-top: 20px;
	border-top: 1px solid rgba(255,255,255,0.2);
	border-top: 1px solid var(--brdr-color-02);
	text-align: center;
}
.register-back-button {
	display: inline-block;
	font-size: 0.6rem;
	text-transform: uppercase;
	cursor: pointer;
	color: rgba(255,206,31,0.6);
	color: var(--feat-color-06);
	transition: color 0.3s;
	font-weight: bold;
}
.register-back-button:hover {
	color: rgba(255,206,31,0.8);
	color: var(--feat-color-08);
}
.register-back-button:before {
	content: "\f060";
	margin-right: 6px;
	font-family: "Font Awesome";
}
.register-modal:checked + .modal-quiz {
	display: block;
}
.modal-register-wrapper {
	text-align: center;
}
.link-label {
	font-size: auto !important;
	cursor: pointer;
	color: rgba(255,206,31,0.6);
	color: var(--feat-color-06);
	transition: color 0.3s;
}
.link-label:hover {
	color: rgba(255,206,31,0.8);
	color: var(--feat-color-08);
}
.player-main {
	position: relative;
}
.player-wrapper {
	padding-top: 10px;
	margin-bottom: 20px;
	cursor: pointer;
}
.player-button {
	width: calc(7.2rem + 20px);
	height: 3.2rem;
	margin: 0px auto;
	clear: both;
}
.player-button-play {
	width: 3.2rem;
	height: 3.2rem;
	line-height: 3.2rem;
	border-radius: 1.6rem;
	text-align: center;
	font-family: "Font Awesome";
	font-size: 1.4rem;
	box-sizing: border-box;
	border: 1px solid rgba(255,255,255,0.8);
	border: 1px solid var(--brdr-color-08);
	margin: 0px 10px;
	float: left;
	cursor: pointer;
	opacity: 0.4;
	transition: opacity 0.3s;
}
.player-button-prev, 
.player-button-next {
	width: 2rem;
	height: 2rem;
	line-height: 2rem;
	border-radius: 1rem;
	text-align: center;
	font-family: "Font Awesome";
	font-size: 1rem;
	box-sizing: border-box;
	margin: 0.6rem 0px;
	float: left;
	cursor: pointer;
	opacity: 0.4;
	transition: opacity 0.3s;
}
.player-button-start {
	width: 2rem;
	height: 2rem;
	line-height: 2rem;
	border-radius: 1rem;
	text-align: center;
	font-family: "Font Awesome";
	font-size: 1rem;
	box-sizing: border-box;
	float: left;
	cursor: pointer;
	opacity: 0.4;
	transition: opacity 0.3s;
	margin: 0px 10px;
}
.player-button-play:hover, 
.player-button-prev:hover, 
.player-button-next:hover {
	color: rgba(255,206,31,1);
	color: var(--feat-color-10);
	border-color: rgba(255,206,31,1);
	border-color: var(--feat-color-10);
	opacity: 0.8;
}
.player-button-play::before {
	content: "\f04c";
}
.player-button-prev::before {
	content: "\f048";
}
.player-button-next::before {
	content: "\f051";
}
.player-button-play.paused {
	padding-left: 0.2rem;
}
.player-button-play.paused::before, 
.player-button-start::before {
	content: "\f04b";
}
.player-item-content {
	width: calc(100% - 2rem - 30px);
	float: left;
	margin-bottom: 10px;
}
.player-item-content .generic-info {
	display: block;
	float: right;
	line-height: 2rem;
	padding-left: 10px;
	opacity: 0.6;
}
.player-title {
	display: block;
	float: left;
	line-height: 1rem;
	padding: 0.5rem 0px;
	user-select: none;
	opacity: 0.8;
}
.player-time {
	display: block;
	float: right;
	line-height: 2rem;
	padding-left: 10px;
	opacity: 0.6;
}
.player-progress {
	clear: both;
	width: 100%;
	height: 6px;
	background-color: rgba(255,255,255,0.1);
}
.player-progress-value {
	display: block;
	float: left;
	width: 10%;
	height: 6px;
	background-color: rgba(255,206,31,1);
	background-color: var(--feat-color-10);
	opacity: 0.6;
}
.player-download {
	width: 1.6rem;
	height: 2rem;
	line-height: 2rem;
	font-size: 1rem;
	display: block;
	font-family: "Font Awesome";
	float: right;
	margin-left: 10px;
}
.player-download:before {
	content: "\f019";
}



.player-seek input[type="range"], 
.player-volume-control input[type="range"] {
	width: 100%;
	opacity: 0.6;
	transition: opacity 0.3s;
	-webkit-appearance: none;
    -moz-apperance: none;
    border-radius: 0px;
    height: 0.6rem;
	background: rgba(255,206,31,0.1);
	background: var(--feat-color-01);
	/*background: linear-gradient(to right, rgba(255,206,31,1) 0%,rgba(255,206,31,1) 30%,rgba(255,206,31,0) 30%,rgba(255,206,31,0) 100%);*/
}
.player-seek input[type="range"]:hover, 
.player-volume-control input[type="range"]:hover {
	opacity: 0.8;
}
.player-seek input[type="range"]::-webkit-slider-runnable-track, 
.player-volume-control input[type="range"]::-webkit-slider-runnable-track {
	width: 100%;
	height: 0.6rem;
	cursor: pointer;
	background: rgba(0,0,0,0.4);
	background: var(--dark-color-04);
	border: 1px solid rgba(255,255,255,0.6);
	border: 1px solid var(--brdr-color-06);
	transition: background 0.3s, border 0.3s;
	-webkit-appearance: none;
	box-sizing: border-box;
}
.player-seek input[type="range"]:hover::-webkit-slider-runnable-track, 
.player-seek input[type="range"]:focus::-webkit-slider-runnable-track, 
.player-volume-control input[type="range"]:hover::-webkit-slider-runnable-track, 
.player-volume-control input[type="range"]:focus::-webkit-slider-runnable-track {
	background: rgba(0,0,0,0);
	background: var(--dark-color-00);
	border: 1px solid rgba(255,255,255,6);
	border: 1px solid var(--brdr-color-06);
}
.player-seek input[type="range"]::-webkit-slider-thumb, 
.player-volume-control input[type="range"]::-webkit-slider-thumb {
	height: calc(0.6rem - 1px);
	width: 10px;
	background: rgba(255,255,255,0.6);
	border: none;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0);
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: 0px;
	transition: background 0.3s, box-shadow 0.3s ease-out, color 0.3s;
}
.player-seek input[type="range"]:hover::-webkit-slider-thumb, 
.player-seek input[type="range"]:focus::-webkit-slider-thumb, 
.player-volume-control input[type="range"]:hover::-webkit-slider-thumb, 
.player-volume-control input[type="range"]:focus::-webkit-slider-thumb {
	background: rgba(255,255,255,1);
	box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.2);
}
.player-seek input[type="range"]::-webkit-range-progress, 
.player-volume-control input[type="range"]::-webkit-range-progress {
	height: 0.6rem;
	background-color: rgba(255,206,31,0.6);
	background-color: var(--feat-color-06);
}
.player-seek input[type="range"]::-moz-range-track, 
.player-volume-control input[type="range"]::-moz-range-track {
	width: 100%;
	height: 0.6rem;
	cursor: pointer;
	background: rgba(0,0,0,0.4);
	background: var(--dark-color-04);
	border: 1px solid rgba(255,255,255,0.6);
	border: 1px solid var(--brdr-color-06);
	transition: background 0.3s, border 0.3s;
	box-sizing: border-box;
}
.player-seek input[type="range"]:hover::-moz-range-track, 
.player-seek input[type="range"]:focus::-moz-range-track, 
.player-volume-control input[type="range"]:hover::-moz-range-track, 
.player-volume-control input[type="range"]:focus::-moz-range-track {
	background: rgba(0,0,0,0);
	background: var(--dark-color-00);
	border: 1px solid rgba(255,255,255,6);
	border: 1px solid var(--brdr-color-06);
}
.player-seek input[type="range"]::-moz-range-thumb, 
.player-volume-control input[type="range"]::-moz-range-thumb {
	height: 0.6rem;
	width: 10px;
	background: rgba(255,255,255,0.6);
	border: none;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0);
	cursor: pointer;
	margin-top: 0px;
	border-radius: 0px;
	transition: background 0.3s, box-shadow 0.3s ease-out, color 0.3s;
}
.player-seek input[type="range"]:hover::-moz-range-thumb, 
.player-seek input[type="range"]:focus::-moz-range-thumb, 
.player-volume-control input[type="range"]:hover::-moz-range-thumb, 
.player-volume-control input[type="range"]:focus::-moz-range-thumb {
	background: rgba(255,255,255,1);
	box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.2);
}
/*.player-seek input[type="range"]::-moz-range-progress {
	height: 0.6rem;
	background-color: rgba(255,206,31,0.6);
	background-color: var(--feat-color-06);
}*/
.player-seek input[type="range"]::-ms-track, 
.player-volume-control input[type="range"]::-ms-track {
	width: 100%;
	height: 0.6rem;
	cursor: pointer;
	background: rgba(0,0,0,0.4);
	background: var(--dark-color-04);
	border: 1px solid rgba(255,255,255,0.6);
	border: 1px solid var(--brdr-color-06);
	transition: background 0.3s, border 0.3s;
	box-sizing: border-box;
}
.player-seek input[type="range"]:hover::-ms-track, 
.player-seek input[type="range"]:focus::-ms-track, 
.player-volume-control input[type="range"]:hover::-ms-track, 
.player-volume-control input[type="range"]:focus::-ms-track {
	background: rgba(0,0,0,0);
	background: var(--dark-color-00);
	border: 1px solid rgba(255,255,255,6);
	border: 1px solid var(--brdr-color-06);
}
.player-seek input[type="range"]::-ms-thumb, 
.player-volume-control input[type="range"]::-ms-thumb {
	height: 2rem;
	width: 1rem;
	background: rgba(255,255,255,0.6);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0);
	cursor: pointer;
	margin-top: 0px;
	transition: background 0.3s, box-shadow 0.3s ease-out, color 0.3s;
}
.player-seek input[type="range"]:hover::-ms-thumb, 
.player-seek input[type="range"]:focus::-ms-thumb, 
.player-volume-control input[type="range"]:hover::-ms-thumb, 
.player-volume-control input[type="range"]:focus::-ms-thumb {
	background: rgba(255,255,255,1);
	box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.2);
}
.player-volume-control input[type="range"] {
	margin: 0.5rem 0px;
}
/*.player-seek input[type="range"]::-ms-fill-lower {
	height: 0.6rem;
	background-color: rgba(255,206,31,0.6);
	background-color: var(--feat-color-06);
}*/
.playlist-title {
	display: block;
	font-size: 1.2rem;
	margin-bottom: 10px;
	text-align: center;
	opacity: 0.8;
}
.player-volume {
	display: block;
	position: absolute;
	width: calc(50% - 3.6rem - 20px);
	height: 1.6rem;
	top: 0.8rem;
	/*top: calc(2.45rem + 10px);*/
	right: 0px;
	max-width: calc(7.6rem + 6px);
}
.player-volume-icon {
	width: 1.6rem;
	height: 1.6rem;
	font-size: 1rem;
	display: block;
	float: left;
	line-height: 1.6rem;
	text-align: center;
	font-family: "Font Awesome";
	cursor: pointer;
	opacity: 0.4;
	transition: opacity 0.3s;
}
.player-volume-icon:hover {
	color: rgba(255,206,31,1);
	color: var(--feat-color-10);
	opacity: 0.8;
}
.player-volume-icon::before {
	content: "\f028";
}
.player-volume-icon.muted::before {
	content: "\f6a9";
}
.player-volume-control {
	width: calc(100% - 1.6rem - 6px);
	height: 1.6rem;
	float: right;
}
.course-locked-message {
	text-align: center;
	font-size: 1rem;
	line-height: 2rem;
}
.course-locked-message a {
	font-weight: bold;
}
.course-locked-message::before {
	content: "\f023";
	font-family: "Font Awesome";
	display: block;
	font-size: 6rem;
	line-height: 6rem;
	margin-top: 2rem;
	margin-bottom: 3rem;
	opacity: 0.6;
}



.flip-container {
	width: calc(100% - 20px);
	/*height: calc(100% - 160px);*/
	/*min-height: calc(100vh - 180px);*/
	min-height: calc(100vh - 160px);
	padding: 10px;
	position: relative;
	z-index: 40;
}
#flip-lens {
	width: 100%;
	height: 100%;
	transition: transform 0.2s;
	padding: 10px;
	box-sizing: border-box;
}
#flip-wrapper {
	/*min-width: calc(71vmin - 127.8px);
	min-height: calc(100vh - 180px);
	max-width: calc(71vh - 127.8px);
	max-height: calc(100vh - 180px);*/
	/*min-width: calc(71vmin - 99.4px);
	min-height: calc(100vh - 140px);
	max-width: calc(71vh - 99.4px);
	max-height: calc(100vh - 140px);*/
	min-width: calc(71vmin - 113.6px);
	min-height: calc(100vh - 160px);
	max-width: calc(71vh - 113.6px);
	max-height: calc(100vh - 160px);
	margin: 0px auto;
}
#flip-aspect {
	width: 100%;
	padding-bottom: 141%;
	/*height: 100%;
	padding-left: 71%;*/
	position: relative;
	overflow: hidden;
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.3);
}
.flip-page {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	transition: transform 0.5s ease-in, box-shadow 0.5s ease-in;
	transform-origin: left center;
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1), 0px 0px 20px 0px rgba(0,0,0,0.1);
	display: none;
}
.flip-page.show {
	display: block;
}
.flip-page.flipped {
	transform: rotateY(90deg);
	box-shadow: 60vmin 0px 40px 0px rgba(0,0,0,0), 30vmin 0px 60px 0px rgba(0,0,0,0.1);
}
.flip-page img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.flip-page iframe {
	width: 100%;
	height: 100%;
	object-fit: contain;
	position: relative;
	/*z-index: -999;
	user-select: none;
	pointer-events: none;*/
}
.flip-footer {
	display: block;
	width: calc(100% - 20px);
	height: 40px;
	padding: 10px;
	background-color: rgba(55,59,63,0.6);
	background-color: var(--footer-bg-color-1);
	position: relative;
	backface-visibility: hidden;
}
.flip-navi-btn {
	width: 40px;
	height: 40px;
	background-color: rgba(255,206,31,0.1);
	background-color: var(--feat-color-01);
	color: rgba(255,206,31,0.6);
	color: var(--feat-color-06);
	font-family: "Font Awesome";
	display: block;
	line-height: 38px;
	font-size: 20px;
	text-align: center;
	width: 40px;
	height: 40px;
	border-radius: 20px;
	box-sizing: border-box;
	cursor: pointer;
	border: 1px solid rgba(255,206,31,0.2);
	border: 1px solid var(--feat-color-02);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0);
	transition: background-color 0.3s, transform 0.3s ease-out, box-shadow 0.3s ease-out, color 0.3s;
}
.flip-navi-btn:hover {
	color: rgba(255,206,31,0.8);
	color: var(--feat-color-08);
	border: 1px solid rgba(255,206,31,0.4);
	border: 1px solid var(--feat-color-04);
	transform: translate3d(0px, -1px, 10px);
	box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.2);
}
.flip-navi {
	width: calc(100% - 160px);
	float: left;
	height: 40px;
}
.flip-menu {
	width: 80px;
	float: left;
	height: 40px;
}
#flip-prev {	
	float: left;
}
#flip-prev::after {
	content: "\f060";
}
#flip-next {
	float: right;
}
#flip-next::after{
	content: "\f061";
}
#flip-pg-num {
	width: calc(100% - 80px);
	height: 40px;
	text-align: center;
	margin: 0px auto;
	float: left;
	line-height: 40px;
	color: rgba(255,206,31,0.6);
	color: var(--feat-color-06);
}
.flip-btn {
	width: 40px;
	height: 40px;
	color: rgba(255,206,31,0.6);
	color: var(--feat-color-06);
	font-family: "Font Awesome";
	display: block;
	line-height: 38px;
	font-size: 20px;
	text-align: center;
	width: 40px;
	height: 40px;
	box-sizing: border-box;
	cursor: pointer;
	transition: background-color 0.3s, transform 0.3s ease-out, color 0.3s;
}
.flip-btn:hover {
	color: rgba(255,206,31,0.8);
	color: var(--feat-color-08);
	transform: translate3d(0px, -1px, 10px);
}
.flip-download {
	float: right;
}
.flip-download::after {
	content: "\f56d";
}
.flip-bookmark {
	float: left;
}
.flip-bookmark::after {
	content: "\f02e";
}
.flip-overlay {
	background-color: rgba(55,59,63,0.6);
	background-color: var(--header-bg-color-1);
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	z-index: 90;
	overflow: hidden;
	width: 160px;
	max-width: 0px;
	transition: max-width 0.5s;
}
#flip-opt:checked ~ .flip-container .flip-overlay {
	max-width: 100%;
}
#flip-opt:checked ~ .flip-footer .flip-menu .flip-bookmark {
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
}
.flip-overlay-scroll {
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	min-width: 140px;
	font-weight: bold;
	
}
.flip-overlay-scroll span {
	display: block;	
	min-width: 120px;
	margin-bottom: 10px;
}
.flip-overlay-scroll ul {
	display: block;	
	overflow-y: scroll;
	width: 100%;
	height: calc(100vh - 200px);
}
.flip-overlay-scroll ul li {
	display: block;	
	margin-bottom: 10px;
}
.flip-footer + .main-footer {
	display: none;
}
#particle-canvas { 
	position:absolute; 
	width: 100%; 
	height: 100%;
	top: 0px;
	left: 0px;
	background: transparent;
	background-repeat: no-repeat;
	background-size: cover; 
	background-position: 50% 50%; 
	filter:blur(1px);
	box-sizing: border-box;
	overflow: hidden;
	pointer-events: all;
} 
.login-particles {
	z-index: -99;
	opacity: 0.6;
}
.single-particles {
	z-index: 9;
}
.full-card-single {
	z-index: 8;
}
.full-card-single .full-card-position {

	z-index: 12;
	pointer-events: none;
}
.full-card-single .full-card-ratio {
	position: relative;
	z-index: 11;
	pointer-events: none;
}
.profile-user-aside {
	width: 25%;
	float: left;
}
.profile-user-content {
	width: 75%;
	float: left;
	box-sizing: border-box;
	padding-left: 20px;
}
.profile-user-info {
	text-align: left;
	margin-bottom: 10px;
	position: relative;
}
.profile-user-info-email {
	position: relative;
	display: block;
	font-size: 16px;
	min-height: 20px;
	line-height: 20px;
	color: rgba(255,255,255,0.6);
	color: var(--txt-color-06);
	/*text-transform: uppercase;*/
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid rgba(255,255,255,0.2);
	border-bottom: 1px solid var(--brdr-color-02);
}
.profile-degrees-title::after {
	width: 20px;
	height: 20px;
	position: absolute;
	top: 0px;
	right: 0px;
	font-family: "Font Awesome";
	content: "\f067";
}
a.profile-degrees-title:hover {
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
	opacity: 0.6;
}
.profile-user-info-title {
	color: rgba(255,206,31,0.8);
	color: var(--feat-color-08);
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1.8rem;
	line-height: 2rem;
}
.profile-user-info-avatar-limit {
	display: block;
	width: 100%;
	max-width: 340px;
	margin: 0px auto;
}
.profile-user-info-avatar {
	display: block;
	width: 100%;
	padding-bottom: 100%;
	position: relative;
}
.profile-user-info-avatar-frame {
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	top: 5px;
	left: 5px;
	z-index: 32;
	overflow: hidden;
	display: block;
	background-color: rgba(255,255,255,0.1);
	position: absolute;
	transition: all 0.3s;
	user-select: none;
	cursor: pointer;
	box-shadow: 0px 0px 6px 0px rgba(0,0,0,0);
}
.profile-user-info-avatar-frame:hover {
	box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.2);
	transform: translate3d(0px, -1px, 10px);
}
.profile-user-info-avatar-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.3s;
}
.profile-user-info-avatar-frame::after {
	content: " ";
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border: 1px solid rgba(255,255,255,1);
	border: 1px solid var(--brdr-color-10);
	top: 0px;
	left: 0px;
	position: absolute;
	opacity: 0.4;
	background-color: rgba(255,255,255,0);
	transition: opacity 0.3s, background-color 0.3s, border 0.3s;
	z-index: 19;
	pointer-events: none;
}
.profile-user-info-avatar-frame:hover::after {
	opacity: 0.8;
}
.profile-user-info-wrapper {
	width: 100%;
	/*float: left;*/
	padding: 10px;
	box-sizing: border-box;
}
.profile-user-stats {
	display: block;
}
.profile-user-stats li::before {
	width: 1rem;
	height: 0.9rem;
	display: block;
	float: left;
	/*margin-right: 5px;*/
	opacity: 0.4;
	line-height: 1rem;
	font-size: 0.7rem;
}
.profile-user-stats li::after {
	display: block;
	content: "";
	clear: both;
}
.profile-user-stats li {
	font-size: 0.7rem;
	line-height: 0.9rem;
	text-transform: uppercase;
	margin-bottom: 10px;
	opacity: 0.8;
}
.list-icon-target::before {
	content:"\f140";
	font-family: "Font Awesome";
}
.list-icon-globe::before {
	content:"\f0ac";
	font-family: "Font Awesome";
}
.list-icon-whatsapp::before {
	content:"\f232";
	font-family: "Font Awesome Brands";
}
.profile-user-menu {
	display: block;
	box-sizing: border-box;
	padding: 5px;
	margin-bottom: 20px;
	
}
.profile-user-menu ul {
	display: block;
}
.profile-user-menu ul li {
	display: block;
}
.profile-user-menu ul li a {
	display: block;
	overflow: hidden;
	padding: 5px;
	position: relative;
	box-sizing: border-box;
	text-transform: uppercase;
	font-size: 0.7rem;
}
.profile-opt-switch {
	display: block;
	position: relative;
	cursor: pointer;
	height: 12px;
	padding-top: 9px;
	background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 100%);
	transition: background 0.3s;
}
.profile-opt-switch span {
	display: block;
	position: relative;
	width: 1rem;
	height: 3px;
	background: rgba(255,255,255,0.4);
	background: var(--brdr-color-04);
	margin: 0px auto;
}
.profile-opt-switch span::before {
	content: "";
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.4);
	background: var(--brdr-color-04);
	position: absolute;
	transition: opacity 0.3s, top 0.3s;
	left: 0px;
	top: 0px;
	opacity: 0;
}
.profile-opt-switch span::after {
	content: "";
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.4);
	background: var(--brdr-color-04);
	position: absolute;
	transition: opacity 0.3s, top 0.3s;
	left: 0px;	
	top: 0px;
	opacity: 0;
}
.profile-opt-menu {
	overflow: hidden;
	max-height: 0px;
	transition: max-height 0.8s;
}
.profile-opt-switch:hover {
	background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 50%,rgba(255,255,255,0) 100%);
}
/*#profile-opt:checked ~ .profile-opt-switch {
	background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 50%,rgba(255,255,255,0) 100%);
}*/
#profile-opt:checked ~ .profile-opt-switch span::before {
	top: -6px;
	opacity: 1;
}
#profile-opt:checked ~ .profile-opt-switch span::after {
	top: 6px;
	opacity: 1;
}
#profile-opt:checked ~ .profile-opt-menu {
	max-height: 100vh;
}
.profile-extended-wrapper {
	position: relative;
	display: block;
}
.profile-extended-wrapper::before {
	content: " "; 
	position: absolute;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border: 1px solid rgba(255,255,255,0.2);
	border: 1px solid var(--brdr-color-02);	
	pointer-events: none;
}
.profile-extended-title {
	padding: 10px;
	font-size: 1rem;
	text-transform: uppercase;
	background-color: rgba(0,0,0,0.6);
	background-color: var(--header-bg-color-1);
}
.profile-extended-info {
	padding: 10px;
	font-size: 0.8rem;
	margin-bottom: 20px;
	background-color: rgba(255,255,255,0.1);
	
}

.reporting-select-container {
	display: grid;
	grid-column-gap: 20px;
	grid-template-columns: repeat(12, 1fr);
	justify-content: start;
	align-content: start;
	width: 100%;
	max-width: 1200px;
	margin: 0px auto;
	padding: 20px;
	box-sizing: border-box;
}
.reporting-card {
	width: 100%;
	position: relative;
	grid-column: span 3;
	margin-bottom: 20px;
	box-sizing: border-box;
}
.reporting-card-avatar {
	width: 100%;
	padding-bottom: 100%;
	position: relative;
}
.reporting-card-avatar a {
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	overflow: hidden;
	display: block;
	background-color: rgba(255,255,255,0.1);
	position: absolute;
	transition: all 0.3s;
	user-select: none;
	cursor: pointer;
	box-shadow: 0px 0px 6px 0px rgba(0,0,0,0);
}
.reporting-card-avatar a:hover {
	box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.2);
	transform: translate3d(0px, -1px, 10px);
}
.reporting-card-avatar a img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.3s;
}
.reporting-card-avatar a::after {
	content: " ";
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border: 1px solid rgba(255,255,255,1);
	border: 1px solid var(--brdr-color-10);
	top: 0px;
	left: 0px;
	position: absolute;
	opacity: 0.4;
	background-color: rgba(255,255,255,0);
	transition: opacity 0.3s, background-color 0.3s, border 0.3s;
	z-index: 19;
	pointer-events: none;
}
.reporting-card-avatar a:hover::after {
	opacity: 0.8;
}
.reporting-card-info {
	display: block;
	padding: 5px;
	text-align: center;
	font-weight: bold;
	font-size: 0.8rem;
	line-height: 1rem;
	color: rgba(255,255,255,0.6);
	color: var(--txt-color-06);
}
.reporting-card-info:hover, 
.reporting-card-avatar:hover + .reporting-card-info{
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
}
.reporting-title {
	grid-column: span 12;
}
.reporting-title h2 {
	display: block;
	box-sizing: border-box;
	padding: 1rem;
	text-align: center;
}
.reporting-content {
	
}
.reporting-column-left {
	width: 33.33%;
	min-height: 200px;
	float: left;
}
.reporting-column-right {
	width: 66.66%;
	min-height: 200px;
	float: left;	
}
.reporting-column-center {
	width: 66.66%;
	min-height: 200px;
	margin: 0px auto;
}
.reporting-column-right .textarea-container {
	height: 12rem;
}
.reporting-column-right .text-classic {
	width: 100%;
}
.reporting-column-right .textarea-container textarea {
	height: calc(12rem - 22px);
}
.reporting-info-avatar-limit {
	display: block;
	width: 100%;
	max-width: 50%;
	margin: 0px auto;
	float: left;
}
.reporting-info-avatar {
	display: block;
	width: 100%;
	padding-bottom: 100%;
	position: relative;
}
.reporting-info-avatar-frame {
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	top: 10px;
	left: 10px;
	z-index: 32;
	overflow: hidden;
	display: block;
	background-color: rgba(255,255,255,0.1);
	position: absolute;
	transition: all 0.3s;
	user-select: none;
	cursor: pointer;
	box-shadow: 0px 0px 6px 0px rgba(0,0,0,0);
}
.reporting-info-avatar-frame:hover {
	box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.2);
	transform: translate3d(0px, -1px, 10px);
}
.reporting-info-avatar-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.3s;
}
.reporting-info-avatar-frame::after {
	content: " ";
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border: 1px solid rgba(255,255,255,1);
	border: 1px solid var(--brdr-color-10);
	top: 0px;
	left: 0px;
	position: absolute;
	opacity: 0.4;
	background-color: rgba(255,255,255,0);
	transition: opacity 0.3s, background-color 0.3s, border 0.3s;
	z-index: 19;
	pointer-events: none;
}
.reporting-info-avatar-frame:hover::after {
	opacity: 0.8;
}
.reporting-info-target {
	font-size: 0.8rem;
	width: 50%;
	float: left;
	box-sizing: border-box;
	padding: 10px;
	overflow: hidden;
}
.reporting-username {
	font-size: 1.2rem;
	line-height: 1.4rem;
	font-weight: bold;
	text-transform: uppercase;
}
.reporting-instructions {
	display: block;
	text-align: center;
	margin-bottom: 1rem;
}
.reporting-letter-icon {
	display: block;
	text-align: center;
	font-size: 8rem;
	pointer-events: none;
	user-select: none;
	opacity: 0.4;
}
.reporting-letter-icon:before {
	content: "\f0e0";
	font-family: "Font Awesome";
}
.reporting-content .text-classic label {
	font-weight: bold;	
}
.repo-hub-item {
	width: 100%;
	position: relative;
	grid-column: span 4;
	margin-bottom: 20px;
	box-sizing: border-box;
}
.repo-hub-ratio {
	width: 100%;
	padding-bottom: 80%;
	position: relative;
}
.repo-hub-ratio a {
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	overflow: hidden;
	display: block;
	background-color: rgba(255,255,255,0.1);
	position: absolute;
	transition: all 0.3s;
	user-select: none;
	cursor: pointer;
	box-shadow: 0px 0px 6px 0px rgba(0,0,0,0);
}
.repo-hub-ratio a:hover {
	box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.2);
	transform: translate3d(0px, -1px, 10px);
}
.repo-hub-ratio a img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity 0.3s;
}
.repo-hub-ratio a::after {
	content: " ";
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border: 1px solid rgba(255,255,255,1);
	border: 1px solid var(--brdr-color-10);
	top: 0px;
	left: 0px;
	position: absolute;
	opacity: 0.4;
	background-color: rgba(255,255,255,0);
	transition: opacity 0.3s, background-color 0.3s, border 0.3s;
	z-index: 19;
	pointer-events: none;
}
.repo-hub-ratio a:hover::after {
	opacity: 0.8;
}
.repo-hub-title {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	box-sizing: border-box;
	padding: 10px;
	text-align: center;
	overflow: hidden;
	color: rgba(255,255,255,0.8);
	background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
	text-transform: uppercase;
	font-weight: bold;
}
/*.thumb-card:hover {
	box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.2);
	transform: translate3d(0px, -1px, 10px);
}
.thumb-card::before {
	content: " ";
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: calc(100% + 6px);
	border: 1px solid rgba(255,255,255,1);
	border: 1px solid var(--brdr-color-10);
	box-sizing: border-box;
	z-index: 20;
	pointer-events: none;
	opacity: 0.2;
	transition: border 0.3s, opacity 0.3s;
}
.thumb-card:hover::before {
	opacity: 0.6;
}*/

.ranking-title {
	position: relative;
	height: 12rem;
	margin-bottom: 20px;
}
.ranking-title h1 {
	display: block;
	padding: 5rem 0px;
	color: rgba(255,206,31,0.8);
	color: var(--feat-color-08);
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1.6rem;
	line-height: 2rem;
	text-align: center;
	position: relative;
}
.ranking-title h1::after {
	display: block;
	content: "\f091";
	font-family: "Font Awesome";
	position: absolute;
	font-size: 5rem;
	line-height: 6rem;
	width: 6rem;
	height: 6rem;
	text-align: center;
	left: 50%;
	transform: translateX(-50%);
	top: 3rem;
	opacity: 0.2;
	
}
.ranking-subtitle {
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
	font-size: 1rem;
	line-height: 1.2rem;
	text-align: center;
	display: block;
	margin-bottom: 20px;
}
.ranking-subtitle-top {
	color: rgba(255,255,255,0.8);
	color: var(--txt-color-08);
	font-size: 1rem;
	line-height: 1.2rem;
	text-align: center;
	display: block;
	margin-bottom: 20px;
	text-transform: uppercase;
	margin-bottom: 3rem;
}
.ranking-title::before, 
.ranking-title::after {
	display: block;
	content: "";
	width: 8rem;
	height: 8rem;
	position: absolute;
	left: 50%;
	top: 2rem;
	border: 1px solid rgba(255,206,31,0.2);
	border: 1px solid var(--feat-color-02);
	box-sizing: border-box;
	transform-origin: center center;
	animation-name: rotate-ranking;
	animation-duration: 20s;
	animation-iteration-count: infinite;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
}
.ranking-title::before {
	transform: translateX(-50%) rotate(45deg);
	animation-direction: normal;
} 
.ranking-title::after {
	transform: translateX(-50%) rotate(45deg);
	animation-direction: reverse;
}
.ranking-medal::before {
	content: "\f091";
	font-family: "Font Awesome";
}
.ranking-table {
	border: 1px solid rgba(255,206,31,0.2);
	border: 1px solid var(--feat-color-02);
	border-bottom-width: 5px;
	text-align: left;
	font-size: 0.8rem;
	text-transform: uppercase;
	margin: 0px auto;
	margin-bottom: 3rem;
	min-width: 60%;
}
.ranking-table th, .ranking-table td {
	background-color: rgba(255,206,31,0.1);
	background-color: var(--feat-color-01);
	border-bottom: 1px solid rgba(255,206,31,0.2);
	border-bottom: 1px solid var(--feat-color-02);
	padding: 0.5rem 1rem;
	position: relative;
}
.ranking-table tr {
	transition: background-color 0.3s;
}
.ranking-table tr:hover {
	background-color: rgba(255,206,31,0.1);
	background-color: var(--feat-color-01);
}
.ranking-table th {
	background-color: rgba(255,206,31,0.2);
	background-color: var(--feat-color-02);
}
.ranking-points {
	cursor: pointer;
	display: block;
}
.ranking-points-details {
	display: none;
	white-space: nowrap;
	background-color: rgba(0,0,0,0.6);
	padding: 0.5rem;
	position: absolute;
	font-size: 0.6rem;
	font-weight: bold;
	z-index: 10;
	backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
	opacity: 0;
}
.ranking-table td:hover .ranking-points + .ranking-points-details {
	display: block;
	opacity: 1;
}
.ranking-table-container {
	max-width: 100%;
	overflow-x: auto;
}
.ranking-control {
	padding: 1rem 0px;
	display: block;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1.4rem;
	line-height: 1.6rem;
	text-align: center;
	position: relative;
	border-top: 1px solid rgba(255,255,255,0.2);
	border-top: 1px solid var(--txt-color-02);
	color: rgba(255,255,255,0.4);
	color: var(--txt-color-04);
	margin-bottom: 3rem;
}
.ranking-region {
	display: block;
	color: rgba(255,206,31,0.6);
	color: var(--feat-color-06);
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1rem;
	line-height: 1.2rem;
	margin-bottom: 0.5rem;
	text-align: center;
	position: relative;
}
#company-switcher-wrapper {
	max-width: 250px;
}

.page-courses {
	
}
.page-courses .carousel-container .carousel-wrapper .carousel-tile .carousel-tile-limit .carousel-tile-ratio {
    position: relative;
    width: 100%;
    /*padding-bottom: 43.75%;*/
	padding-bottom: 23.75%;
    display: block;
    z-index: 9;
}
.page-courses .carousel-container .carousel-wrapper .carousel-tile .carousel-tile-limit .carousel-tile-ratio figure {
    display: block;
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    display: block;
}
.page-courses .carousel-container .carousel-wrapper .carousel-tile .carousel-tile-limit .carousel-tile-ratio figure img {
	display: block;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
	
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
    z-index: 10;
}
.page-courses .carousel-container .carousel-wrapper .carousel-tile .carousel-tile-limit .carousel-tile-ratio .carousel-tile-info {
    position: absolute;
    width: 100%;
    font-size: 0.65rem;
    line-height: 0.8rem;
	top: 70.5%;
    padding: 0.35rem 0.5rem;
}
.page-courses .carousel-container .carousel-wrapper .carousel-tile .carousel-tile-limit {
	background-color: rgba(0,0,0,0.6);
    background-color: var(--dark-color-06);
}
.page-courses .carousel-container .carousel-wrapper .carousel-tile .carousel-tile-limit .carousel-tile-ratio .carousel-tile-info {
    position: absolute;
    width: 100%;
    font-size: 0.65rem;
    line-height: 0.8rem;
	top: 70.5%;
    padding: 0.35rem 0.5rem;
    background-color: transparent;
}
.page-courses .carousel-container .carousel-wrapper .carousel-tile {

}

@keyframes rotate-ranking {
	from {
		transform: translateX(-50%) rotate(0deg);
	}
	to {
		transform: translateX(-50%) rotate(360deg);
	}
}


@keyframes blink-warning {
	from {
		background-color: rgba(255,30,30,0.2);
		background-color: var(--warn-color-02);
	}
	to {
		background-color: rgba(255,30,30,0.6);
		background-color: var(--warn-color-06);
	}
}
.browser-warning strong {
	text-transform: uppercase;
}
@supports (not (display: grid)) or (not (object-fit: cover)) {
	.browser-warning {
		display: block;
	}
}


@media all and (min-width: 1201px) {
	/*.carousel-container {
		max-height: 226px;
	}*/
	.carousel-container .carousel-slider {
		width: calc( ( (100% - 4rem) * 3 ) + 10rem);
	}
	.carousel-container .carousel-slider {
		margin-left: calc(-100% + 4rem);
	}
	.contact-card {
		grid-column: span 2;
	}
	/*.stream-video {
		width: 70%;
	}
	.stream-chat {
		width: 50%;
	}*/
}
@media all and (max-width: 1200px) {
	/*.carousel-container {
		max-height: 19vw;
	}*/
	.carousel-container .carousel-slider {
		width: calc( ( (100% - 4rem) * 4 ) + 10rem);
	}
	.carousel-container .carousel-slider {
		margin-left: calc(-100% + 4rem);
	}
	.contact-card {
		grid-column: span 2;
	}
}
@media all and (max-width: 840px) {
	.hub-left-column, 
	.trail-left-column {
		/*width: 40%;*/
		width: calc(40% - 10px);
	}
	.hub-right-column, 
	.trail-right-column {
		/*width: 60%;*/
		width: calc(60% - 10px);
	}
	
	.hub-user-info-avatar, 
	.trail-user-info-avatar {
		width: 38%;
		padding-bottom: 38%;
	}
	.hub-user-info-wrapper, 
	.trail-user-info-wrapper {
		width: 62%;
	}
	
	.post-listing, .post-listing.extend {
		grid-column: span 12;
	}
	.post-featured .post-card-media, .post-featured .post-card-excerpt {
		grid-column: span 2;
	}
	.post-featured .post-card-excerpt-ratio {
		padding-top: 0px;
	}
	.post-featured .post-card-media-ratio {
		padding-top: 42.2%;
	}
	.post-featured .post-card-excerpt-content {
		position: relative;
		overflow: none;
	}
	.aside {
		grid-column: span 12;
	}
	.aside-grid-item {
		grid-column: span 6;
	}
	/*.carousel-container {
		max-height: 23vw;
	}*/
	.carousel-container .carousel-slider {
		width: calc( ( (100% - 4rem) * 6 ) + 10rem);
		margin-left: calc(-100% + 4rem);
	}
	.carousel-container .carousel-wrapper .carousel-tile:hover {
		width: calc((100% / 12) - (6rem / 12));
		margin: 1.68rem 0px;
	}
	.contact-card {
		grid-column: span 3;
	}
	.library-wrapper .library-item {
		grid-column: span 3;
	}
	.page-content {
		grid-column: span 12;
	}
	.stream-featured-container .stream-featured-slider .stream-featured-media-ratio {
		padding-top: 56.25%;
	}
	.thumb-card {
		grid-column: span 4;
	}
	.stream-video {
		width: 100%;
		height: auto;
		min-height: auto;
	}
	.stream-chat {
		width: 100%;
		/*height: calc(100vh - 56.25vw - 130px - 2rem);*/
		min-height: calc(4rem + 40px);
		border: none;
	}
	.stream-chat .page-comment .chat-wrapper .comment-list {
		max-height: 50vh;
	}
	.fr12, 
	.fr11, 
	.fr10, 
	.fr9, 
	.fr8, 
	.fr7 { 
		width: 100%; 
	}
	.fr6, 
	.fr5, 
	.fr4 { 
		width: 50%; 
	}
	.fr3, 
	.fr2, 
	.fr1 { 
		width: 25%; 
	}
	.reporting-card {
		grid-column: span 4;
	}
	.repo-hub-item {
		grid-column: span 4;
	}
	.repo-hub-ratio {
		padding-bottom: 80%;
	}
	.reporting-column-left {
		width: 40%;
	}
	.reporting-column-right, 
	.reporting-column-center {
		width: 60%;
	}
}
@media all and (max-width: 660px) {
	.hub-left-column {
		width: 100%;
		float: none;
		min-height: 0px;
		margin-bottom: 40px;
		/*padding: 20px 0px;*/
		/*padding: 20px;
		padding-bottom: 0px;*/
	}
	.trail-left-column, 
	.trail-right-column {
		width: 100%;
		float: none;
		min-height: 0px;
		margin-bottom: 40px;
	}
	.hub-right-column {
		width: 100%;
		float: none;
		/*padding: 20px;*/
		/*padding: 20px 0px;*/
		min-height: 0px;
	}
	.hub-user-info, 
	.trail-user-info {
		text-align: left;
	}
	
	.post-card-media, .post-card-excerpt {
		grid-column: span 2;
	}
	
	.post-card-excerpt-ratio {
		padding-top: 0px;
	}
	.post-card-media-ratio {
		padding-top: 42.2%;
	}
	.post-card-excerpt-content {
		position: relative;
		overflow: none;
	}
	.contact-card {
		grid-column: span 3;
	}
	.calendar-list .calendar-day .calendar-wrapper span {
		padding: 0px;
		border-bottom: 1px solid rgba(255,255,255,0);
		border-bottom: 1px solid var(--brdr-color-00);
		margin-bottom: 0px;
		text-align: center;
	}
	.gallery-wrapper .gallery-item {
		width: calc(33.33% - 10px);
	}
	.library-wrapper .library-item {
		grid-column: span 4;
	}
	.header-menu-wrapper .header-menu ul li {
		display: none !important;
	}
	.header-menu-wrapper .header-menu ul li:first-child {
		display: block !important;
	}
	.full-card .full-card-limit .full-card-title {
		font-size: 1.2rem;
	}
	.thumb-card {
		grid-column: span 6;
	}
	.hub-user-info-avatar, 
	.trail-user-info-avatar {
		float: left;
		width: 25%;
		padding-bottom: 25%;
	}
	.hub-user-info-wrapper, 
	.trail-user-info-wrapper {
		float: right;
		width: 75%;
	}
	.hub-user-links a, 
	.trail-user-links a {
		float: left;
	}
	.profile-user-aside {
		width: 100%;
		float: none;
	}
	.profile-user-content {
		width: 100%;
		float: none;
		padding-left: 0px;
	}
	.reporting-card {
		grid-column: span 6;
	}
	.reporting-column-left {
		width: 70%;
		margin: 0px auto;
		float: none;
		clear: both;
	}
	.reporting-column-right, 
	.reporting-column-center {
		width: 100%;
	}
	.hub-user-info-title, 
	.trail-user-info-title {
		font-size: 1.6rem;
		line-height: 1.8rem;
	}
}
@media all and (max-width: 520px) {
	.header-menu-wrapper .header-menu ul li a {
		font-size: 14px;
		transition: font-size 0.3s;
	}
	.header-menu-wrapper .header-menu ul li {
		padding: 0px 10px;
		transition: padding 0.3s;
	}
	.trail-tile-row .trail-tile {
		width: 33.33%;
	}
	.reporting-column-left {
		width: 80%;
		margin: 0px auto;
		float: none;
		clear: both;
	}
}
@media all and (max-width: 460px) {
	.aside-grid-item {
		grid-column: span 12;
	}
	.carousel-container .carousel-slider {
		width: calc( ( (100% - 4rem) * 12 ) + 10rem);
		margin-left: calc(-100% + 4rem);
	}
	.carousel-container .carousel-wrapper .carousel-tile:hover {
		width: calc((100% / 12) - (6rem / 12));
		margin: 1.68rem 0px;
	}
	.contact-card {
		grid-column: span 6;
	}
	.gallery-wrapper .gallery-item {
		width: calc(50% - 10px);
	}
	.library-wrapper .library-item {
		grid-column: span 6;
	}
	li.comment-body .children {
		padding-left: 0px;
	}
	.menu-btn {
		display: block;
	}
	
	.page-start {
		margin-top: 80px;
	}
	.sub-header {
		margin-top: 80px;
	}
	.sub-header + .page-start {
		margin-top: 0px;
	}
	.sub-header ul {
		float: none;
		text-align: center;
	}
	.sub-header ul li {
		display: none;
		float: none;
	}
	.sub-header ul li:first-child {
		display: block;
	}
	
	.main-header {	
		position: fixed;
		top: 0px;
		left: 0px;
		background-color: rgba(0,0,0,0.9);
		background-color: var(--header-bg-color-2);
	}
	.header-menu-wrapper {
		position: absolute;
		top: 80px;
		left: 0px;
		background-color: rgba(0,0,0,0.9);
		background-color: var(--header-bg-color-2);
		height: calc(100vh - 80px);
		overflow: hidden;
		border-top: 1px solid rgba(255,255,255,0.2);
		border-top: 1px solid var(--brdr-color-02);
		box-sizing: border-box;
		padding: 10px 0px;
		max-width: 0px;
		transition: max-width 0.6s;
		backdrop-filter: blur(3px) !important;
		-webkit-backdrop-filter: blur(3px) !important;
		margin-right: 0px;
		z-index: 50;
	}
	.header-menu-wrapper .header-menu ul li {
		padding: 0px;
		height: 40px;
		float: none;
	}
	.header-menu-wrapper .header-menu ul li a::after {
		display: none;
	}
	.header-menu-wrapper .header-menu ul li a {
		padding: 0px 20px;
		font-size: 16px;
		transition: font-size 0.3s;
	}
	#menu-opt:checked ~ #header .header-menu-wrapper {
		max-width: 100vw;
	}
	.alt-menu-wrapper {
		width: 100%;
	}
	.search-menu-wrapper:focus-within ~ .header-menu-wrapper {
		opacity: 1;
	}
	li.comment-body .children {
		padding-left: 0px;
	}
	.header-menu-wrapper .header-menu ul li {
		display: block !important;
	}
	#menu-opt:checked ~ #header .menu-close {
		display: block;
		position: fixed;
		width: 100%;
		height: calc(100vh - 80px);
		top: 80px;
		left: 0px;
		z-index: 10;
	}
	.header-menu-wrapper .header-menu .menu-admin {
		display: none;
	}
	/*.carousel-container .carousel-wrapper .carousel-tile:hover {
		width: calc((100% / 12) - (6rem / 12));
		margin: 1.68rem 0px;
	}*/
	.thumb-card {
		grid-column: span 12;
	}
	.stream-container {
		/*height: calc(100vh - 140px);*/
		/*overflow: hidden;*/
	}
	.login-wrapper {
		/*margin: 100px auto 0px auto;*/
		margin: 0px auto;
		/*min-height: calc(100vh - 80px);*/
	}
	li .comment-respond {
		padding-left: 0px;
	}
	
	.fr12, 
	.fr11, 
	.fr10, 
	.fr9, 
	.fr8, 
	.fr7, 
	.fr6, 
	.fr5, 
	.fr4, 
	.fr3, 
	.fr2, 
	.fr1 { 
		width: 100%; 
	}
	.menu-logo {
		opacity: 0;
		pointer-events: none;
	}
	.main-footer {
		min-height: 60px;
		padding: 10px 10px 10px 150px;
	}
	.trail-tile-row .trail-tile {
		width: 50%;
	}
	.reporting-column-left {
		width: 100%;
	}
	.repo-hub-item {
		grid-column: span 12;
	}
	.repo-hub-ratio {
		padding-bottom: 35%;
	}
	.hub-user-info-title, 
	.trail-user-info-title {
		font-size: 1.4rem;
		line-height: 1.6rem;
	}
}
@media all and (max-width: 360px) {
}
@media all and (min-aspect-ratio: 23/12) {
	/*.stream-chat {
		width: 100%;
	}*/
	/*.stream-container {
		display: block;
		width: 100%;
		height: calc(100vh - 140px);
	}
	.stream-video {
		max-width: calc(124.6vh - 140px);
	}*/
}
@media all and (orientation: landscape) {
	/*.stream-container {
		flex-wrap: nowrap;
	}
	.stream-video {
		max-width: calc(132vh - 140px);
	}*/
	.stream-container {
		flex-wrap: nowrap;
		min-height: 340px;
	}
	.stream-video {
		max-width: 50vw;
		width: 50vw;
	}
	.stream-chat {
		max-width: 50vw;
		height: calc(100vh - 160px);
	}
	
	/*.stream-container {
		min-height: calc(100vh - 140px);
	}*/

	/*.stream-chat {
		max-width: calc(100vw - (132vh - 140px));
	}*/
}
@media all and (not hover) {
	.carousel-container .carousel-wrapper .carousel-tile:hover {
		width: calc((100% / 12) - (6rem / 12));
		margin: 1.68rem 0px;
	}
}
/*@media all and (orientation: landscape) and (max-width: 820px) {
	.stream-container {
		min-height: 340px;
	}
	.stream-video {
		max-width: 50vw;
		width: 50vw;
	}
	.stream-chat {
		max-width: 50vw;
		height: calc(100vh - 160px);
	}
}
*/

/*estilização da modal de aviso*/
.modal-info {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0.4);
	z-index: 100;
	overflow: hidden;

}
.modal-content {
	background-color: var(--dark-color-08);
	margin: 7% auto;
	margin-top: 130px;
	margin-bottom: 100%;
	padding: 20px;
	border: 1px solid #888;
	width: 80%;
	overflow: hidden;
}

.or{
	color: var(--feat-color-06);
	
}
#tempo{
	padding-bottom: 15px;
	display: none;
}
.or, .modal-content input{
	color:white;
}