@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Kaushan+Script&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
--pagewidthMed: 960px;
--pagewidthMax: 1160px;
}
html {
  scroll-behavior: smooth;
}
body {
	margin: 0;
	padding: 0;
	text-align: center;
	font-family: 'Montserrat','Quicksand','Trebuchet MS';
	font-size: 100%;
	background:#274149;
	color:#d9d9d9;
}
 *, 
*:before, 
*:after {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
} 
/*body::before, body::after, body:hover, body *::before, body *::after, body *:hover {
    cursor: url('img/cursor1small.png') 15 15, auto !important;
}*/

h2 {
	font-family: "Jost", sans-serif;
	font-optical-sizing: auto;
	font-weight: bold;
	font-style: normal;
	text-shadow: 0 0 40px black, 2px 2px 5px #444;
	font-size:4rem;
	margin:0;
	user-select:none;
	z-index:99;
	
		position: absolute;
      top: 50%;
      left: 50%;
      margin-right: -50%;
      transform: translate(-50%, -50%);
}
h3 {
	font-family: "Jost", sans-serif;
	font-optical-sizing: auto;
	font-weight: bold;
	font-style: normal;
	text-shadow: 0 0 40px black, 2px 2px 5px #444;
	font-size:4rem;
	margin:0;
}
a {
	color:#ddf;
}
.kaushan-script-regular {
  font-family: "Kaushan Script", cursive;
  font-weight: 400;
  font-style: normal;
}
.container {
	text-align:center;
}
.header {
	position:absolute;
	width:100%;
	height:100px;
	max-width:1440px;
	margin: 0 auto;
    left: 0;
    right: 0;
}
.content {
	padding-top:100px;
}
.page-content {
	text-align:left;
}
.page-content p {
	line-height: 1.5rem;
}
.page-content .photo {
	background-size: cover;
	width:100%;
	min-height: 150px;
}
.page-content .youtube {
	padding: 1rem 0;
}
.box {
	position:relative;
	transition: all .2s ease-out;
	overflow:hidden;
}
.banner {
	position: relative;
}
.nav {
	display:none;
}
.box:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.grid .box:active, .nav a:active {
	transform: scale(0.95);
}
.box a h2 {
	color:white;
}
.box1 {
	background:#000 url(/img/banner-desktop-bank-squo.jpg);
	background-size:cover;
	background-position: bottom center;
	height:80vh;
}
.name {
	width:100%;
	text-align:center;
	opacity:.8;
	margin:0 auto;
	position:absolute;
	z-index:888;
	/* for img cursor1.png:
	height: 50px;
    width: auto;
    margin: 15px 0;*/
}
.name img {
	width:260px;
	filter: drop-shadow(3px 3px 3px #222);
}

.banner-text {
	position: absolute;
    bottom: 10px;
    left: 20px;
    font-size: 4rem;
	text-align: left;
}
.box .bg-img {
	width: 100%;
    height: 100%;
	position:absolute;
	transition: all .2s ease-out;
}
.box:hover .bg-img {
	opacity:.6;
	transform: scale(1.02);
}
.box2 {
	background-color:#1c1a59;
}
.box2 .bg-img {
	background:#591a1a url(/img/releaseparty-balcony.png);
	background-size:cover;
	background-position: center;
}
.box3 {
	background-color:#972a2a;
}
.box3 .bg-img {
	background:#22610e url(/img/mando.jpg);
	background-size:cover;
	background-position: left;
}

.box4 {
	margin:0 auto -100px;
	height:auto;
	display:block;
	padding: 15px;
}
.box5 {
	background-color:#9c6449;
}
.box5 .bg-img {
	background:#22610e url(/img/jasper-gitaar-jong.jpg);
	background-size:cover;
	background-position: center;
}
.box6 {
	background-color:#22610e;
}
.box6 .bg-img {
	background:#22610e url(/img/Loetje5.jpg);
	background-size:cover;
	background-position: center;
}
.footer {
	min-height:120px;
	padding:10px;
	text-align:right;
}

.footer a {
	display: inline-block;
}
.footer svg {
	height:80px;
	width:80px;
	fill:white;
	padding-left:30px;
	margin-top:20px;
}
.footer svg:hover {
	fill:#aaa;
}
.nav li {
	list-style:none;
	padding:0 25px;
	display:inline;
}
.nav a {
	font-family: "Jost", sans-serif;
	font-optical-sizing: auto;
	font-weight: bold;
	font-style: normal;
	text-shadow: 0 0 40px black, 2px 2px 5px #444;
	font-size:120%;
	color:#fff;
	display:flex;
	text-decoration:none;
	text-transform:uppercase;
	transition: all .2s ease-out;
}

@media (min-width: 992px) {
	.name {
		width:100%;
		position: absolute;
		top:0;
        
	}
	.name img {
		width:260px;
	}
	.header {
		width:1100px;
	}
	.nav {
		display:block;
		position: relative;
		top:0;
        width: 100%;
		z-index:955;
	}
	.homepage .nav {
		position: absolute;
	}
	.nav ul {
		border:0px solid yellow;
		display:flex;
		justify-content: space-between;
		flex-direction: row;
		margin-top: 25px;
		padding:0;
	}
	.nav li {
		/*flex-grow: 1;*/
		text-align: center;
		display: inline;
	}
	.nav .home {
		display: none;
	}
	.nav a:hover {
		opacity:.7;
	}
	.nav .dummy {
		opacity:0;
	}
	.banner .banner-text {
		font-size: 5rem;
        max-width: 40%;
        position: absolute;
        bottom: 200px;
        left: 50px;
	}
	.box1 {
		background:#000 url(/img/banner-desktop-bank-squo.jpg);
		background-size:cover;
		background-position: bottom center;
		height:100vh;
	}
	.box4 {
		width:900px;
		max-width:1440px;
		height:auto;
		display:block;
		padding:15px 0;
	}
	.content {
		width:900px;
		max-width:1440px;
		margin:0 auto;
	}
	.grid {
		display:grid;
		grid-template-columns: 1fr 1fr;
	}
	.footer {
		width:900px;
		margin:0 auto;	
	}
}
@media (max-width: 991px) {
	.name {
		display:block;
	}
	.nav {
		border:0px solid yellow;
		display: block;
        position: fixed;
        top: 0;
        right: -240px;
        width: 240px;
        height: 100%;
        background: #1e3036;
        z-index: 999;
        text-align: left;
        transition: all 0.4s cubic-bezier(0, 0.4, 0, 0.97);
        -webkit-transition: all 0.4s cubic-bezier(0, 0.4, 0, 0.97);
        -moz-transition: all 0.4s cubic-bezier(0, 0.4, 0, 0.97);
	}
	body.mobile-menu-visible .nav {
		right:0;
		box-shadow: 0 0 10px black;
	}
	.nav.visible {
		right: 0;
        overflow-y: auto;
        box-shadow: 0 0 7px #555;
	}
	.nav .dummy {
	display:none;
	}
	.overlay {
		margin: 0;
		padding: 0;
		background: black;
		backdrop-filter: blur(10px);
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: -1;
		opacity: 0;
		transition: opacity 0.4s cubic-bezier(0, 0.4, 0, 0.97);
		-webkit-transition: opacity 0.4s cubic-bezier(0, 0.4, 0, 0.97);
		-moz-transition: opacity 0.4s cubic-bezier(0, 0.4, 0, 0.97);
	}
	body.mobile-menu-visible {
		overflow-y: hidden;
		position: fixed;
		width: 100%;
	}
	body.mobile-menu-visible .overlay {
		opacity: .2;
		z-index: 2;
	}
	.mobile-topbar {
		border:0px solid green;
		width:100%;
		height:80px;
		position:relative;
	}
	.burger {
		background:url(/img/Hamburger_icon_white.png);
		background-size:cover;
		position:absolute;
		right:20px;
		top:20px;
		width:40px;
		height:40px;
        z-index: 999999;
	}
	.mobile-topbar .lillogo {
		background:url(/img/2024_07_11_0nj_Kleki.png);
		background-size:cover;
		position:absolute;
		left:0;
		width:100px;
		height:100%;
	}
	.page-content {
		padding:0 1rem;
	}
}