body {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}


.container {
	flex: 1;
	display: flex;
	flex-direction: column;
}


a:focus,
button:focus,
input[type=button]:focus,
input:focus,
textarea:focus,
audio:focus {
	outline: none !important;
	box-shadow: none !important;
}


.spacer {
	flex: 1;
}


.hide {
	display: none;
}


li {
	list-style-type: none;
}

.staff {
	margin: 0;
	padding: 0;
}


.carousel-copyright {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 1px;
	padding-bottom: 1px;
	
	background-color: rgba(255,255,255,0.5);
	
	font-size: 0.7em;
	text-align: right;
}


.card .row.flex .card-body {
	display: flex;
	flex-direction: row;
}

.card .row.flex .card-body .icon {
	margin-top: auto;
	margin-bottom: auto;
	margin-right: 20px;
}

.flex-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	align-items: flex-start;
	align-content: flex-start;
}
.flex-row.space-between {
	justify-content: space-between;
}
.flex-row div,
.flex-row button {
	margin-top: auto;
	margin-bottom: auto;
	
}
.flex-col {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	align-items: flex-start;
	align-content: flex-start;
}
.flex-col.space-between {
	justify-content: space-between;
}
.flexing {
	flex: 1;
}


#webrtc-loading-spinner {
	margin-left: 10px;
}

.disclaimer {
	font-size: 0.7em;
}


header {
	display: flex;
	vertical-align: middle;
}

header .logo {
	background-image: url('/assets/logo/rayon_e-logo.png');
	background-repeat: no-repeat;
	background-position: left top;
	background-size: contain;
	
	width: 256px;
	height: 90px;
	
	margin-left: 50px;
	margin-top: 80px;
	margin-bottom: 40px;
}

header .name {
	margin-right: 50px;
	margin-top: 114px;
	margin-bottom: auto;
	
	font-size: 1.9em;
	text-align: right;
}

header .name.short {
	display: none;
	margin-left: 2px;
	text-align: left;
}





nav {
	font-family: 'Press Start 2P';
	font-weight: 300;
	margin-bottom: 30px;
}
.navbar-nav {
	margin-left: 28px;
	margin-right: 28px;
}
.navbar-nav li {
	padding-left: 30px;
	padding-right: 30px;
}
.navbar-nav li:first-child {
	padding-left: 0;
}
.navbar-nav li:last-child {
	padding-right: 0;
}
.navbar-toggler {
	margin-left: 33px;
	margin-right: 33px;
}




footer {
	vertical-align: middle;
	
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
}
footer .content {
	display: flex;
	flex-direction: row;
	vertical-align: middle;
}

footer .copyright {
	margin-top: auto;
	margin-bottom: auto;
	
	font-size: 0.7em;
}

footer ul {
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
}
footer ul li {
	text-align: right;
}
footer a {
	color: #535557 !important;
}

#footer-menu {
	margin-top: auto;
	margin-bottom: auto;
}

#footer-menu a {
	padding-left: 30px;
}

#mobile-footer-toggle {
	display: none;
}



#toast-container {
	position: fixed;
	right: 0;
	top: 0;
	padding: 10px;
}

#alert-container {
	position: fixed;
	right: 0;
	top: 0;
	padding: 5px;
	width: 100%;
}



input[type="range"][orient="horizontal"] {
	width: 100%;
	padding: 0 0;
}
input[type="range"][orient="vertical"] {
	writing-mode: bt-lr; /* IE */
	-webkit-appearance: slider-vertical; /* WebKit */
	width: 18px;
	height: 175px;
	padding: 0 0;
	margin-left: auto;
	margin-right: auto;
}

.form-group.vslider {
	width: 40px;
	text-align: center;
}
.form-group.vslider label {
	text-align: center;
}

.form-group.hslider {
	height: 30px;
}
.form-group.hslider label {
	padding: 0 0;
	margin: 0 0;
}


.hnumber {
	margin-top: 0 !important;
	margin-bottom: 3px !important;
	margin-right: 3px;
}




.bw-1 {
	width: 8.33%;
}
.bw-2 {
	width: 16.66%;
}
.bw-3 {
	width: 25%;
}
.bw-4 {
	width: 33.33%;
}
.bw-5 {
	width: 41.66%;
}
.bw-6 {
	width: 50%;
}
.bw-7 {
	width: 58.33%;
}
.bw-8 {
	width: 66.66%;
}
.bw-9 {
	width: 75%;
}
.bw-10 {
	width: 83.33%;
}
.bw-11 {
	width: 91.66%;
}
.bw-12 {
	width: 100%;
}



.fw-10px {
	width: 10px;
}
.fw-20px {
	width: 20px;
}
.fw-30px {
	width: 30px;
}
.fw-40px {
	width: 40px;
}
.fw-50px {
	width: 50px;
}
.fw-60px {
	width: 60px;
}
.fw-70px {
	width: 70px;
}
.fw-80px {
	width: 80px;
}
.fw-90px {
	width: 90px;
}
.fw-100px {
	width: 100px;
}
.fw-110px {
	width: 110px;
}
.fw-120px {
	width: 120px;
}
.fw-130px {
	width: 130px;
}
.fw-140px {
	width: 140px;
}
.fw-150px {
	width: 150px;
}
.fw-160px {
	width: 160px;
}
.fw-170px {
	width: 170px;
}
.fw-180px {
	width: 180px;
}
.fw-190px {
	width: 190px;
}
.fw-200px {
	width: 200px;
}



.vspace-1px {
	height: 1px;
}
.vspace-5px {
	height: 5px;
}
.vspace-10px {
	height: 10px;
}
.vspace-20px {
	height: 20px;
}
.vspace-40px {
	height: 40px;
}
.vspace-80px {
	height: 80px;
}



.mtspace-5px {
	margin-top: 5px;
}
.mtspace-10px {
	margin-top: 10px;
}
.mtspace-20px {
	margin-top: 20px;
}
.mtspace-40px {
	margin-top: 40px;
}
.mtspace-80px {
	margin-top: 80px;
}




@media only screen and (max-width: 575.98px) {
	.card .row.flex .card-body {
		display: block;
	}
	.card .row.flex .card-body .icon {
		margin-bottom: 5px;
	}
	
	
	header .name {
		display: none;
	}
	header .name.short {
		display: block;
	}
	
	header .spacer {
		display: none;
	}
	
	
	#footer-menu {
		display: none;
	}
	#mobile-footer-toggle {
		display: block;
	}
	
	audio,
	.audioplayer {
		min-width: 100%;
		width: 100%;
	}
	
	.toast,
	.toast-body {
		width: 100%;
		background-color: red;
	}
	
	
	.bw-1 {
		width: 100%;
	}
	.bw-2 {
		width: 100%;
	}
	.bw-3 {
		width: 100%;
	}
	.bw-4 {
		width: 100%;
	}
	.bw-5 {
		width: 100%;
	}
	.bw-6 {
		width: 100%;
	}
	.bw-7 {
		width: 100%;
	}
	.bw-8 {
		width: 100%;
	}
	.bw-9 {
		width: 100%;
	}
	.bw-10 {
		width: 100%;
	}
	.bw-11 {
		width: 100%;
	}
	.bw-12 {
		width: 100%;
	}
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
	audio,
	.audioplayer {
		min-width: 320px;
		width: 320px;
	}
	
	.toast,
	.toast-body {
		width: 100%;
		background-color: red;
	}
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
	audio,
	.audioplayer {
		min-width: 320px;
		width: 320px;
	}
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
	
}
@media only screen and (min-width: 1200px) {
	
}