:root {
	--bbpblue : #00597d;
 	--bbpblue2 : #00a4ff;
 	--bbpblue3 : #003449;
	--bgcolor : white;
	--step-0: clamp(1rem, calc(0.875rem + 1vw), 1.5rem);
}

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	src: url('fonts/Montserrat-VariableFont_wght.ttf') format("truetype");
	font-display: swap;
}

html,body {
 overflow:auto;
  margin:0;
}

body {
    background-size : 100% auto;
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	text-align: justify;
    text-justify: inter-word;
    color : black;
    font-size: var(--step-0);
    background-image : url('../images/bg.jpg');
}

header {
     position: fixed;
     top: 0;
     width: 100%;
     padding: 10px 0;
     z-index: 1000;
     background-size : 100% auto;
     border-bottom : 5px solid var(--bbpblue3);
     background-color : var(--bbpblue);
     color : white;
     margin-bottom : 2px;
 }
 
.cookieWarn {
	height: 10vh;
	background-color: gray;
	text-align: center;
	color: white;
	position : absolute;
	top : 0;
	z-index : 99999;
	width : 100%;
	display : none;
}

.gdprCookie {
	border-radius: 5px;
	border: 2px solid black;
	color: white;
	background-color: #aaa;
	margin-left: 0.5vw;
}
 
 #footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  font-size: 1rem;
  text-align: center;
  padding: 0.75rem 1rem;
  z-index: 1000;
  border-top : 5px solid var(--bbpblue3);
  background-color : var(--bbpblue);
  color : white;
}

 nav ul {
     list-style: none;
     margin: 0;
     padding: 0;
     display: flex;
     justify-content: center;
 }
 
 nav ul li {
     margin: 0 0px;
     padding-right : 2vw;
     padding-left: 2vw;

     
 }
 
 nav ul li a {
     color: black;
     text-decoration: none;
     font-weight: 400;
     text-decoration: none;
     white-space : nowrap;
     color : white;
     border-radius : 5px;
     padding : 4px;
}

nav ul li a:hover {
    background-color: var(--bbpblue2);
    text-decoration: none;
 }
 
section {
     padding : 10vh 2px 20vh 2px;
}
 
#logoSurround {
 	width : 100%;
 	background-color : var(--bbpblue);
 	text-align : center;
 }

#logo {
 	width  : 90vw;
 	margin-left : auto;
 	margin-right : auto;
}
 
 h1, h2 {
     text-align: center;
     color : var(--bbpblue3);
 }




 .content {
     margin: 0 auto;
     text-align: center;
     line-height : 1.6em;
}

.textContent {
	background-color : white;
	width : 80%;
	padding : 2em;
	padding-top : 5vh;
	padding-bottom : 10vh;
	border-radius : 10px;
	margin-left : auto;
	margin-right : auto;
}
 
 img {
     max-width: 100%;
     height: auto;
 }


.gallery {
    margin: 0 auto;
    max-width : 100%;
}

#gallery-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;	
}

.galleryItemDiv {
	display : inline-block;
}

#gallery-container a:hover {
	 background-color: transparent;
}

.gallery img {
    margin: 10px;
    border: 2px solid #ddd;
    border-radius: 4px;
    width: 20vw;
    object-fit: cover;
    transition: transform 0.2s;
}

.lb-nav {
	position : absolute!important;
	top : 0!important;
	width : 100%!important;
	z-index : 99999!important;
	max-height : 50px!important;
}


.lb-next {
	width : 40px!important;
}

.gallery img:hover {
    transform: scale(1.05);
    border-color: #777;
}



.lb-download {
    position: relative;
    top: -10px;
    right: 90px;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 14px;
    z-index: 99;
    border : 1px solid white;
}

.lb-download:hover {
    background-color: rgba(255, 255, 255, 0.8);
}


.biogThumb {
	max-height : 15vh;
}

hr {
	border: none;
	border-top: 1px dotted var(--bblue);
}


.title {
	font-size : 18pt;
}


#tabs-lala {
	background-size : cover;
	background-repeat : repeat-y;
	text-align : center;
	padding-top : 18pt;
	color : white;
	
}

#cover {
	margin-left : auto;
	margin-right : auto;
	height : 250px;
	border : 1px solid white;
}


.download {
	font-size : 10pt;
	color : #f0deba;
}


.download a:hover  {
	color : white;
}


.downloadLink {
	color : white;
}

#address {
	display : inline-block;
}

#privacy {
	padding-left : 10vh;
	display : inline-block;
}

#phones {
	display : inline-block;
	padding-left : 10vh;
}

.testimonial {
  position: relative;
  max-width: 50ch;
  margin: 4rem auto 10rem auto;
  font: 1.125rem/1.5;
}

.testimonial blockquote {
  position: relative;
  padding: 2rem 2.5rem;
  background: var(--card-bg, #fafafa);
  border-radius: 0.5rem;
}

.testimonial::before,
.testimonial::after {
  position: absolute;
  font-family: Georgia, "Times New Roman", serif; 
  font-size: 8rem;        
  line-height: 0;          
  color: gray;
  z-index: -1;              /* sit behind the text */
}

.testimonial::before {
  content: "“";             /* U+201C LEFT DOUBLE QUOTATION MARK */
  top: -1.5rem;
  left: -0.5rem;
}

.testimonial::after {
  content: "”";             /* U+201D RIGHT DOUBLE QUOTATION MARK */
  bottom: -5.5rem;
  right: -0.5rem;
}

a {
     color: black;
     text-decoration: none;
     font-weight: 400;
     text-decoration: none;
     white-space : nowrap;
     color : white;
     border-radius : 5px;
     padding : 4px;
}

a:hover {
    background-color: var(--bbpblue2);
    text-decoration: none;
 }
 
#nick {
	margin-left : 0%;
}

#nickImage {
		border-radius: 50%;
}

#nickName {
	font-size : 0.8em;
	font-weight : 400;
	font-style : italic;
}

#map {
	height : 50vh;
}

gmp-map {
     height: 100%;
   }

@media only screen and (max-width: 600px) {
	#coverDiv {
		width : 80%;
		display : block;
		margin-left : auto;
		margin-right : auto;
	}
	
	#tracks {
		width : 95%;
		display : block;
	
		margin-left : auto;
		margin-right : auto;
	}
		
	audio {
		max-width : 80%;
		margin-left : auto;
		margin-right : auto;
	}
	
	.gallery img {
	    margin: 5px;
	    border: 2px solid #ddd;
	    border-radius: 4px;
		width : 40vw;
	    object-fit: cover;
	    transition: transform 0.2s;
	}
	
	
	nav ul li a {
	    padding: 2px 5px;
	    border-radius: 5px;
	    text-decoration: none;
	    font-size: 12px;
	    white-space : nowrap;
	}


	section {
	     padding : 10vh 2px 5vh 2px;
	}
	
	.cookieWarn {
		min-height: 10vh;
		background-color: gray;
		text-align: center;
		color: white;
		position: fixed;
		z-index: 999999;
		top : 7vh;
		font-size : 0.9em;
	}
	
	.gdprCookie {
		border-radius: 5px;
		border: 2px solid black;
		color: white;
		background-color: #aaa;
		margin-left: 0.5vw;
	}
	
	#footer {
	 font-size : 0.7em;
	 height : 7vh;
	 padding : 0;
	 }

	#address {
		display : block;
		padding-left :0;
	}
	
	#privacy {
		display : block;
		padding-left :0;
	}
	
	#phones {
		display : block;
		padding-left :0;
	}
	

}