@charset "UTF-8";
/* site-wide stylesheet */

/*
=== Variables ==========================================================================================================
*/

/*
=== Main page tags =====================================================================================================
*/
html {
	min-height            : 100vh;
	background-color      : var(--bs-dark);
	--svs-navbar-height   : 56px; /* Gets changed to match the actual navbar height */
	--svs-scrollbar-width : 15px; /* Gets changed to match the actual scrollbar width */
}

body {
	display          : flex;
	overflow-x       : hidden;
	flex-direction   : column;
	min-height       : 100vh;
	background-color : var(--bs-light);
}

header {
	position : sticky;
	z-index  : 1000;
	top      : 0;
	display  : flex;
}

main {
	position   : relative;
	display    : flex;
	margin-top : var(--svs-navbar-height);
}

footer {
	display : flex;
}

:target {
	scroll-margin : calc(var(--svs-navbar-height) + 1vh);
}

/*
=== Page text ==========================================================================================================
*/

h1, h2, h3, h4, h5, h6 {
	font-family    : "Titillium Web", "Helvetica Neue", "Helvetica", Arial, sans-serif;
	font-weight    : bold;
	text-rendering : optimizeLegibility;
}

p {
	font-family : "Titillium Web", "Helvetica Neue", "Helvetica", Arial, sans-serif;
}

blockquote {
	padding-right     : 1.0rem;
	padding-left      : 1.0rem;
	color             : var(--bs-gray-dark);
	border            : 0 var(--bs-border-style) var(--bs-border-color);
	border-left-width : var(--bs-border-width);
}

/*
=== Navbars ============================================================================================================
*/

#top-navbar {
	z-index          : 1000;
	top              : 0;
	width            : 100%;
	transition       : top 0.7s;
	background-color : var(--bs-dark);
}

#top-navbar .navbar-brand {
	font-family : "Titillium Web", "Helvetica Neue", "Helvetica", Arial, sans-serif;
}

#top-navbar .navbar-nav {
	font-family : "Titillium Web", "Helvetica Neue", "Helvetica", Arial, sans-serif;
}

#bottom-navbar {
	z-index          : 1000;
	bottom           : 0;
	width            : 100%;
	background-color : var(--bs-dark);
}

#bottom-navbar .navbar-text {
	font-family : Sintony, sans-serif;
	font-size   : 12px;
}

.svs-brand {
	font-size : 24px;
}

/* md and smaller */
@media (max-width : 991px) {
	.svs-brand {
		font-size : 0;
	}

	.svs-brand::after {
		font-size : 24px;
	}

	.svs-brand-svs::after {
		content : "SVS";
	}
}

/*
=== Overrides ==========================================================================================================
*/

/*
=== Bootstrap ==============================================
*/
.carousel-item img {
	overflow        : hidden;
	object-fit      : cover;
	object-position : center;
}

.collapse.show {
	visibility : visible;
}

a.btn {
	-webkit-appearance : none;
}

/*
=== Other ==================================================
 */
img {
	color            : var(--bs-white);
	background-color : var(--bs-dark);

	/* Alt text properties */
	object-position  : center;
	object-fit       : contain;
}

picture {
	display          : block;
	color            : var(--bs-white);
	background-color : var(--bs-dark);

	/* Alt text properties */
	object-position  : center;
	object-fit       : contain;
}

/*
=== Custom classes =====================================================================================================
*/
.bg-gray-300 {
	background-color : var(--bs-gray-300) !important;
}

.bg-gray-600 {
	background-color : var(--bs-gray-600) !important;
}

.content-sticky-top {
	position : sticky;
	z-index  : 202;
	top      : calc(var(--svs-navbar-height) + 0.5rem);
}

@media (max-width : 768px) {
	.content-sticky-top {
		top : 0.5rem;
	}
}

.fade-in {
	animation : fade-in 0.2s;
}

.hover-grow {
	transition : all 0.2s ease;
}

.hover-grow:is(:hover, :focus-within) {
	transform : scale(1.05);
}

.d-none-important {
	display : none !important;
}

.d-block-important {
	display : block !important;
}

@media (max-width : 768px) {
	.ratio-dynamic {
		/* Bootstrap aspect ratio that becomes 1x1 on smaller screen sizes */
		--bs-aspect-ratio : 100%;
	}
}

.img-fixed-container {
	clip-path : inset(0);
}

.img-fixed {
	position : fixed;
}

.nav-link-relative {
	/* This is used by other things, so it's here as a reminder */
}

.widget-ajax-container {
	transition : opacity 0.2s ease;
}

.tooltip-scroll-section {
	display       : block;
	overflow-y    : scroll;
	max-height    : 180px;
	padding-right : 0.5em;
	padding-left  : 0.5em;
}

.hide-last-hr hr:last-child {
	display : none;
}

.hide-last-vr > .vr:last-child {
	display : none;
}

.mb-0-last-p > p:last-child {
	margin-bottom : 0 !important;
}

.mw-0 {
	min-width : 0;
}

.sortable-ghost {
	border-color  : #86B7FE;
	border-radius : var(--bs-border-radius) !important;
	box-shadow    : 0 0 0 .25rem rgba(13, 110, 253, .25) !important;
}

.mt-svs-navbar-height {
	margin-top : var(--svs-navbar-height);
}

/* md and smaller */
@media (max-width : 991px) {
	.w-lg-100 {
		width : 100%;
	}
}

/*
=== Loaders ================================================
*/

.loader-container {
	position        : relative;
	z-index         : 101;
	display         : flex;
	align-items     : center;
	justify-content : center;
	width           : 100%;
	height          : 100%;
	cursor          : wait;
}

.loader {
	position   : relative;
	z-index    : 102;
	width      : 128px;
	height     : 128px;
	cursor     : wait;
	transition : opacity;
	background : radial-gradient(farthest-side, var(--bs-yellow) 100%, #0000) center/32px 32px no-repeat;
}

@media (prefers-reduced-motion) {
	.loader {
		animation : none;
	}
}

.loader::before {
	position   : absolute;
	width      : 128px;
	height     : 128px;
	content    : "";
	animation  : spin 1.5s infinite linear;
	background : radial-gradient(farthest-side, var(--bs-blue) 100%, #0000) left/16px 16px no-repeat;
}

.loader::after {
	position   : absolute;
	top        : 24px;
	left       : 24px;
	width      : 80px;
	height     : 80px;
	content    : "";
	animation  : spin 1.0s infinite linear;
	background : radial-gradient(farthest-side, var(--bs-dark) 100%, #0000) left/8px 8px no-repeat;
}

.loader-dark::after {
	background : radial-gradient(farthest-side, var(--bs-light) 100%, #0000) left/8px 8px no-repeat;
}

.icon-spin {
	display           : inline-block;
	-moz-animation    : spin 1s linear infinite;
	-webkit-animation : spin 1s linear infinite;
	animation         : spin 1s linear infinite;
}

.icon-xs {
	font-size : 8px;
}

.icon-sm {
	font-size : 12px;
}

.icon-lg {
	font-size : 20px;
}

/*
=== Links ==================================================
*/
.link {
	text-decoration  : none !important;
	background-color : transparent !important;
}

.link:hover {
	cursor          : pointer !important;
	text-decoration : underline !important;
}

.link-unstyled {
	text-decoration  : none !important;
	color            : #000000 !important;
	background-color : transparent !important;
}

.link-unstyled:hover {
	cursor          : pointer !important;
	text-decoration : underline !important;
	color           : #000000 !important;
}

/*
=== List items =============================================
*/

.list-item {
	transition : all 0.2s ease;
	scale      : 0.97;
}

.list-item:is(:hover, :focus-within) {
	transform : scale(1.03);
}

.list-item-image {
	position : relative;
	width    : 480px;
	height   : 270px;
}

@media (max-width : 991px) {
	.list-item-image {
		width        : 100%;
		height       : auto;
		aspect-ratio : 16 / 9;
	}
}

.list-item-body {
	width     : auto;
	min-width : 0;
	max-width : 100%;
	height    : 270px;
}

/*
=== Galleries ==============================================
*/

.gallery {
	display   : flex;
	flex-wrap : nowrap !important;
}

.card-gallery {
	overflow-x       : auto;
	flex-direction   : row;
	scroll-snap-type : x mandatory;
}

.card-gallery > button.gallery-scroll-left {
	position         : absolute;
	z-index          : 100;
	left             : 0;
	width            : 2vw;
	min-width        : 50px;
	padding-top      : 0;
	padding-bottom   : 0;
	animation        : fade-in 0.5s;
	border-radius    : var(--bs-border-radius);
	background-color : transparent;
	background-image : linear-gradient(0.75turn, rgba(var(--bs-dark-rgb), 0) 0, rgba(var(--bs-dark-rgb), 1) 100%);
}

.card-gallery > button.gallery-scroll-left:is(:hover, :focus-within) {
	background-color : var(--bs-dark);
}

.card-gallery > button.gallery-scroll-right {
	position         : absolute;
	z-index          : 100;
	right            : 0;
	width            : 2vw;
	min-width        : 50px;
	padding-top      : 0;
	padding-bottom   : 0;
	animation        : fade-in 0.5s;
	border-radius    : var(--bs-border-radius);
	background-color : transparent;
	background-image : linear-gradient(0.25turn, rgba(var(--bs-dark-rgb), 0) 0, rgba(var(--bs-dark-rgb), 1) 100%);
}

.card-gallery > button.gallery-scroll-right:is(:hover, :focus-within) {
	background-color : var(--bs-dark);
}

.card-gallery > li {
	scroll-snap-align : center;
}

/*
=== Cards ==================================================
*/

.card-gallery-card {
	transition : all 0.2s ease;
	scale      : 0.97;
}

.card-gallery-card:is(:hover, :focus-within) {
	transform : scale(1.03);
}

/*
=== Tiles ==================================================
*/

.tile-gallery-tile {
	transition : all 0.2s ease;
	scale      : 0.97;
}

.tile-gallery-tile:is(:hover, :focus-within) {
	transform : scale(1.03);
}

/*
=== Collapses ==============================================
 */

.collapse-btn-arrow::before {
	transition : rotate 0.25s;
}

.show + .collapse-btn-arrow::before {
	rotate : 180deg;
}

/*
=== Fade-outs ==============================================
*/

/*
    Clips an element and creates a gradient that gradually fades-out the bottom of the element.
    Also supports adding buttons that expand the faded out element such that the entire thing is visible.

    **IMPORTANT NOTE:
        The element needs to have .fade-out and .fade-out-<color> (see below for options)

    Expand button
	<button
		class="fade-out-control btn btn-{COLOR} w-100 fs-2 bi"
		type="button"
		title="Expand / collapse section"
		data-bs-toggle="collapse"
		data-bs-target="{ID OF SECTION TO COLLAPSE}"
	>
	</button>
 */

.fade-out {
	position : relative;
}

.fade-out > .collapse:not(.show) {
	display    : block;
	overflow   : hidden;
	max-height : 3.5em;
}

.fade-out > .collapsing {
	height     : 3.5em;
	min-height : 3.5em;
}

.fade-out-control {
	position : relative;
	z-index  : 100;
}

.fade-out-control::before {
	padding    : 1rem;
	content    : "\f279";
	transition : rotate 0.25s;
}

.fade-out-control.btn-sm::before {
	padding : 0;
}

.collapse.show + .fade-out-control::before {
	rotate : 180deg;
}

.fade-out-control::after {
	position   : absolute;
	z-index    : -1;
	bottom     : calc(100% - 4px);
	left       : -1px;
	box-sizing : border-box;
	width      : calc(100% + 2px);
	height     : 200%;
	content    : "";
	transition : opacity 0.25s, height 0.25s;
	opacity    : 1;
}

.fade-out-control.btn-sm::after {
	height : 150%;
}

:is(.collapsing, .show) + .fade-out-control::after {
	height  : 0;
	opacity : 0;
}

/* White */
.fade-out-white > .fade-out-control::after {
	background-image : linear-gradient(rgba(var(--bs-white-rgb), 0) 0%, rgba(var(--bs-white-rgb), 1) 95%);
}

/* White */
.fade-out-secondary > .fade-out-control::after {
	background-image : linear-gradient(rgba(var(--bs-secondary-rgb), 0) 0%, rgba(var(--bs-secondary-rgb), 1) 95%);
}

/* Light */
.fade-out-light > .fade-out-control::after {
	background-image : linear-gradient(rgba(var(--bs-light-rgb), 0) 0%, rgba(var(--bs-light-rgb), 1) 95%);
}

/* Dark */
.fade-out-dark > .fade-out-control::after {
	background-image : linear-gradient(rgba(var(--bs-dark-rgb), 0) 0%, rgba(var(--bs-dark-rgb), 1) 95%);
}

/*
=== Animations =========================================================================================================
*/

@keyframes fade-in {
	0% {
		opacity : 0;
	}
	100% {
		opacity : 1;
	}
}

@-moz-keyframes spin {
	100% {
		-moz-transform : rotate(360deg);
	}
}

@-webkit-keyframes spin {
	100% {
		-webkit-transform : rotate(360deg);
	}
}

@keyframes spin {
	100% {
		-webkit-transform : rotate(360deg);
		transform         : rotate(360deg);
	}
}