@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;700&family=Roboto+Condensed:wght@700&display=swap');

:root {
	--shelters: #ecd743;
	--motors: #72b194;
	--shop: #fc8662;
	--club: #cdc5c4;
	--gray: gray;
}

html, body {
	width: 100%;
	min-width: 100%;
	height: 100%;
	min-height: 100%;
	background-color: #edf1f5;
	position: relative;
	font-family: 'Raleway';
	font-weight: 300;
	font-variant-numeric: lining-nums;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
}

#splash-wrapper {
	width: 100%;
	min-width: 100%;
	height: 100%;
	min-height: 100%;
	position: absolute;
	left: 0;
	right: 0;
	top: -100%;
	background-color: #112129;
	z-index: 0;
}

#splash-wrapper.active {
	top: 0 !important;
}

#splash-wrapper .splash {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	opacity: 0;
}

#splash-wrapper.shelters #splash-shelters, #splash-wrapper.motors #splash-motors, #splash-wrapper.shop #splash-shop, #splash-wrapper.club #splash-club {
	opacity: 0.25 !important;
}

#splash-shelters {
	background-image: url('../img/splash-shelters.jpg');
}

#splash-motors {
	background-image: url('../img/splash-motors.jpg');
}

#splash-shop {
	background-image: url('../img/splash-shop.jpg');
}

#splash-club {
	background-image: url('../img/splash-club.jpg');
}

#logo-wrapper {
	width: 100%;
	max-width: 470px;
	height: 85px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	overflow: hidden;
}

#logo-wrapper.active #bunkl-group-logo {
	left: 0;
	filter: invert(1) brightness(150%);
	-webkit-filter: invert(100%) brightness(150%);
}

#logo-wrapper::after {
	content: '';
	display: block;
	height: 0;
	width: 4px;
	position: absolute;
	top: 50%;
	left: calc(50% - 2px);
	-webkit-border-radius: 2px;
	border-radius: 2px;
}

#logo-wrapper.active::after {
	height: 100%;
	top: 0;
}

#logo-wrapper.division-shelters::after {
	background-color: var(--shelters);
}

#logo-wrapper.division-motors::after {
	background-color: var(--motors);
}

#logo-wrapper.division-shop::after {
	background-color: var(--shop);
}

#logo-wrapper.division-club::after {
	background-color: var(--club);
}

#logo-wrapper.active #division-name {
	right: 0;
	opacity: 1;
}

#bunkl-group-logo {
	display: block;
	width: calc(50% - 10px);
	max-width: 240px;
	height: auto;
	position: relative;
	left: calc(25%);
}

body, #logo-wrapper::after, #bunkl-group-logo, #division-name, #our-divisions, .division-website, #splash-wrapper, .splash, .title-decoration::after {
	transition: all 400ms ease-out;
}

h1 em {
	font-style: normal !important;
	font-size: 10px !important;
	position: relative;
}


#division-name {
	width: calc(50% - 10px);
	height: 100%;
	position: absolute;
	right: 20px;
	top: 0;
	background-image: url('../img/bunkl-division-names.png');
	background-repeat: no-repeat;
	background-size: 100%;
	opacity: 0;
}

.division-shelters #division-name {
	background-position: right top;
}

.division-motors #division-name {
	background-position: right 33%;
}

.division-shop #division-name {
	background-position: right 66%;
}

.division-club #division-name {
	background-position: right bottom;
}

.division-website {
	transform: scale(0.9);
}

.division-website.active {
	transform: scale(1);
}

.division-website.downscale {
	transform: scale(0.85);
	filter: blur(5px);
}

.title-decoration {
	position: relative;
}

.title-decoration::after {
	content: '';
	display: block;
	float: none;
	clear: both;
	position: relative;
	top: 10px;
	width: 40px;
	height: 4px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	background-color: var(--gray);
}

.card:hover .title-decoration::after {
	width: 80px;
}

.title-decoration.shelters::after {
	background-color: var(--shelters);
}

.title-decoration.motors::after {
	background-color: var(--motors);
}

.title-decoration.shop::after {
	background-color: var(--shop);
}

.title-decoration.club::after {
	background-color: var(--club);
}

img.division-poster {
	margin-top: -60px; 
}

.card {
	-webkit-border-radius: 20px;
	border-radius: 20px;
}

.card.shadow-lg {
	box-shadow: 0 1rem 3rem rgba(0, 0, 0, 1) !important;
}

#bunkl-committee {
	background: url('../img/suit-jacket-pin.jpg') no-repeat left center;
	background-size: 120%;
}

#honorary-committee img.rounded {
	-webkit-border-radius: 50% !important;
	border-radius: 50% !important;
}

#bunkl-committee-introduction {
	max-width: 600px;
}

figcaption small {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

@media screen and (max-width: 768px) {
	#pre-header {
		position: -webkit-sticky;
		position: sticky;
		z-index: 1000;
	}
	
	header {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 999;
		background-color: #112129;
	}
	
/*
	#main-content {
		height: auto;
		max-height: calc(100vh - 130px);
		overflow: auto;
	}
*/

	#logo-wrapper {
		transform: scale(0.75);
		height: calc(85px * .75);
	}

	img.division-poster {
		margin-top: 20px; 
 }
 
/*
 footer {
	 position: absolute;
	 width: 100%;
	 left: 0;
	 right: 0;
	 bottom: 0;
	 font-size: 8px;
 }
*/
}