/**
 * Master stylesheet for cffc.se
 *
 * License:
 *      All rights reserved.
 *
 * Authors:
 *      Reimund Trost <reimund@code7.se>
 *      Johannes Martinsson <johannes@antiklimax.com>
 */
 /*
 *
 * Site upgraded from year 2024 by Kevin Pham <hello@kevinpham.se> CFFC 23/24
 *
 */

/* Main Styles {{{ */

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,300italic,400italic);

html {height: 100%;	overflow-x: hidden;
 }

.aspbild{
	max-width: 500px;
}
#photocontainer {
	display: flex;
	flex-direction: row;
	gap: 10px;
	justify-content: center;
}

body {
	background-color: #fff;
	margin: 0;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 10pt;
	height: 100%;
	line-height: 1.3em;
	  width: 100vw;
  height: 100vh;
  position: relative;
  background: white;
	text-align: center; /* Needed for ie6 */
}
#slideshow {
	width: 1200px;
    overflow: hidden;
}

.container {
	width: 3600px; /* 1200 x 3 */
    position: relative;
    animation: slide 20s linear infinite;
}

.container section {
	    width: 1200px;
    height: 400px;
    float: left;
}

@keyframes slide {
    0% { left: 0; }
    16.67% { left: 0; }
    33.33% { left: -1200px; }
    50% { left: -1200px; }
    66.67% { left: -2400px; }
    83.33% { left: -2400px; }
	85% { left: 0;}
    100% { left: 0; }
}

.container:hover {
    animation-play-state: paused;
}

@media (max-width: 768px) {
    .container {
        width: 100%; /* Full width */
    }

    .container section {
        width: 100%; /* Full width */
        float: none; /* Remove floating */
    }
}

div { text-align: left; /* Needed for ie6 */ }
h1 { margin-bottom: 0; }

h2 {
	/* margin: 0.8em 0 0.2em 0; */
	padding: 0;
	line-height: 0;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-weight: 300;
	text-decoration: none;
	font-size: 200%;
	color: #858585;
}

p {
	margin: 0 0 1.4em 0;
	padding: 0;
}

a:hover, a:link, a:active { color: #0093d8; }
a:visited { color: #858585; }

em {
	font-weight: bold;
	font-style: normal;
}

hr {
	border: 0;
	border-top: 1px solid #cacaca;
	height: 0px;
	width: 1230px;
	background-color: transparent;
	clear: both;
	display: block;
}

hr.vertical {
	width: 0px;
	height: 100%;
	border-left: 1px solid #cacaca;
	display: inline;
}

address { font-style: normal; }
img { border: 0; }
ul,ol { list-style-type: none; }
.text-box ul { list-style-type: disc; }
.text-box ol { list-style-type: decimal; }
.text-box li+li { margin-top: .5em; }
/* }}} End Main Styles */

/* Header and Footer {{{ */
#header {
	background: rgba(0, 0, 0, .5);
    height: 60px;
    margin: 0 auto;
    position: fixed;
    top: 0 !important;
    width: 100vw;
    z-index: 9998 !important;
	display: flex;
	align-items: center;
	justify-content: center;
}

@keyframes firework {
  0% { transform: translate(var(--x), var(--initialY)); width: var(--initialSize); opacity: 1; }
  50% { width: 0.5vmin; opacity: 1; }
  100% { width: var(--finalSize); opacity: 0; }
}

/* @keyframes fireworkPseudo {
  0% { transform: translate(-50%, -50%); width: var(--initialSize); opacity: 1; }
  50% { width: 0.5vmin; opacity: 1; }
  100% { width: var(--finalSize); opacity: 0; }
}
 */
.firework,
.firework::before,
.firework::after
{
  --initialSize: 0.5vmin;
  --finalSize: 45vmin;
  --particleSize: 0.2vmin;
  --color1: yellow;
  --color2: khaki;
  --color3: white;
  --color4: lime;
  --color5: gold;
  --color6: mediumseagreen;
  --y: -30vmin;
  --x: -50%;
  --initialY: 60vmin;
  content: "";
  animation: firework 2s infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, var(--y));
  width: var(--initialSize);
  aspect-ratio: 1;
  background: 
    /*
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 0% 0%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 100% 0%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 100% 100%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 0% 100%,
    */
    
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 50% 0%,
    radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 50%,
    radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 50% 100%,
    radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 0% 50%,
    
    /* bottom right */
    radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 80% 90%,
    radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 95% 90%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 90% 70%,
    radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 60%,
    radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 55% 80%,
    radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 70% 77%,
    
    /* bottom left */
    radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 22% 90%,
    radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 45% 90%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 70%,
    radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 10% 60%,
    radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 31% 80%,
    radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 28% 77%,
    radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 13% 72%,
    
    /* top left */
    radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 80% 10%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 95% 14%,
    radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 90% 23%,
    radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 100% 43%,
    radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 85% 27%,
    radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 77% 37%,
    radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 60% 7%,
    
    /* top right */
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 22% 14%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 45% 20%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 34%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 10% 29%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 31% 37%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 28% 7%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 13% 42%
    ;
  background-size: var(--initialSize) var(--initialSize);
  background-repeat: no-repeat;
}

.firework::before {
  --x: -50%;
  --y: -50%;
  --initialY: -50%;
/*   transform: translate(-20vmin, -2vmin) rotate(40deg) scale(1.3) rotateY(40deg); */
  transform: translate(-50%, -50%) rotate(40deg) scale(1.3) rotateY(40deg);
/*   animation: fireworkPseudo 2s infinite; */
}

.firework::after {
  --x: -50%;
  --y: -50%;
  --initialY: -50%;
/*   transform: translate(44vmin, -50%) rotate(170deg) scale(1.15) rotateY(-30deg); */
  transform: translate(-50%, -50%) rotate(170deg) scale(1.15) rotateY(-30deg);
/*   animation: fireworkPseudo 2s infinite; */
}

.firework:nth-child(2) {
  --x: 30vmin;
}

.firework:nth-child(2),
.firework:nth-child(2)::before,
.firework:nth-child(2)::after {
  --color1: pink;
  --color2: violet;
  --color3: fuchsia;
  --color4: orchid;
  --color5: plum;
  --color6: lavender;  
  --finalSize: 40vmin;
  left: 30%;
  top: 60%;
  animation-delay: -0.25s;
}

.firework:nth-child(3) {
  --x: -30vmin;
  --y: -50vmin;
}

.firework:nth-child(3),
.firework:nth-child(3)::before,
.firework:nth-child(3)::after {
  --color1: cyan;
  --color2: lightcyan;
  --color3: lightblue;
  --color4: PaleTurquoise;
  --color5: SkyBlue;
  --color6: lavender;
  --finalSize: 35vmin;
  left: 70%;
  top: 60%;
  animation-delay: -0.4s;
}

#header h1 {
	padding: 0;
	text-align: left;
	padding-left: 5px;
}

#header h1 a#top {
	font-weight: 300;
	text-decoration: none;
	font-size: 150%;
	color: #858585 !important;
		padding-left: 5px;
}

#header p {
	color: #858585 !important;
	font-weight: 300;
	font-style: italic;
	margin: .5em 0 0 .125em;
	font-size: 125%;
		padding-left: 10px;

}

#header p a {
	text-decoration: none !important;
		padding-left: 10px;

}

#main-container {
	padding: 0;
	width: 100%;
}

#footer {
	margin: 16px auto 0 auto;
	width: 100%;
	clear: both;
	font-size: 0.8em;
	text-align: center;
}

#footer a{
	text-decoration: none;
	color: black;
    transition: all .45s cubic-bezier(0.25, 1, 0.33, 1);
}
#footer a:visited{
	    color: black;
}
#footer a:hover{
    color:#0093d8 /*todo*/
}
#footerSocial {
    list-style: none;
    text-align: center;
    width: 100%;
    float: none;
    padding: 0px;
    margin: 0px;
	font-size: 12px;
}
#footerSocial li{
        display: inline;
		padding: 5px;
}
#footerSocial li a{
    font-size: 16px;    border-radius: 50%;
    border: 2px solid #000;
    position: relative;
    transition: all .45s cubic-bezier(0.25, 1, 0.33, 1);    height: 40px;
    width: 40px;    vertical-align: middle;
    line-height: 40px;
    text-align: center;
	vertical-align: middle;
    position: relative;
}
#footerSocial li a:hover{
	border: 2px solid #0093d8;
    color: #0093d8;
    transition: all .45s cubic-bezier(0.25, 1, 0.33, 1);
}

#footer span {
	padding: 1.3em 0 0 8em;
	color: #999;
}
/* }}} End Header and Footer */

/* Bread crumbs {{{ */
ul.crumbs {
	margin: 1em 0 0 0;
	padding: 0;
	font-size: 0.8em;
}

ul.crumbs li {
	display: inline;
	margin: 0 0 0 0.3em;
}

ul.crumbs li.first {
	margin: 0 0 0 0;
}
/* }}} End Bread Crumbs */

/* Utility Classes {{{ */
.clear {
	clear: both;
	display: block;
	padding: 0 !important;
	margin: 0 !important;
	height: 0 !important;
	width: 0 !important;
}

.about-bottom {
	clear: both;
	display: block;
	padding: 0;
}
.hidden { display: none; }
.left { float: left; }
/* }}} End Utility Classes */

/* Menus {{{ */
ul.menu {
	list-style-type: none;
	margin: 0;
}

ul.menu li {
	display: inline;
	float: left;
	margin: 0;
	padding: 0;
	font-weight: bold;

}

ul.menu li a.current {
	font-weight: bold;
}

ul.menu li a {
	color: white;
	display: block;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 15px;
	padding: 0.4em 0.9em;
	transition: all .45s cubic-bezier(.25,1,.33,1);
}

ul.menu li a:hover {
	color: #0093d8
}

ul.menu li a.current:hover {
	color: #666;
}

ul.menu li#headersocialm {
	  padding: 0 10px;
    position: absolute;
    right: 1.5vw;
		display: flex;
	flex-direction: row;
	vertical-align: middle;
	top: 15px;
}

#header ul.menu {
    align-items: center;
    display: flex;
    height: 60px;
    justify-content: center;
    margin: 0;
    padding-left: 0;
}

#header ul.menu li{
    display: flex;
	padding: 0px; 10px !important;
}

.logo {
	background: url(../gfx/CFFC_logo.svg) no-repeat;
    background-size: contain;
    height: 50px !important;
    position: relative;
    width: 90px !important;
	align-self: center;
}

ul.menu li#headersocialm a.headersociali{
    background: hsla(0, 0%, 67%, .3);
    border-radius: 50%;
    height: 30px;
    margin: 0 5px;
	padding: 0px;
    transition: all .45s cubic-bezier(.25,1,.33,1);
    width: 30px;
}

ul.menu li#headersocialm a.headersociali:hover{
    background: #0093d8;
}

li#headersocialm a i {
    color: #fff;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    width: 30px
}

#header ul.menu li {
	margin: 0px;
	padding: 0px 10px;
}


#header ul.menu li a {
	padding: 0px;
}

#header ul.menu li a.last {
	padding-right: 0;
	width: 80px;
}

#header ul.menu li a.current {
	text-decoration: 2px underline;
    text-underline-offset: 5px;
}

#header ul.menu li a.current:hover { color: #0093d8 !important; cursor: pointer;}


#header ul.menu li a.first { padding-left: 0; }
#footer ul.menu { float: left; }
#footer ul.menu li a { margin: 0 3em 0 0; }
#footer ul.menu li a.last { margin: 0; }
#footer ul.menu li a.current { color: #000; }
/* }}} End Menus */

/* Frontpage {{{ */

img.front {
	width: 100%;
	height: auto;
	overflow: hidden;
	background: black;
}

#label {
	position: relative;
	top: -90px;
	left: -30px;
	float: right;
	margin-bottom: -50px;
}


/* About Box {{{ */
div.about {
	background: transparent url(../gfx/about.png) no-repeat top left;
	clear: both;
	float: left;
	margin: 16px 0 0 0;
	padding: 0;
	width: 602px;
}

div.about-bottom {
	background: transparent url(../gfx/about.png) no-repeat bottom left;
	height: 11px;
	padding: 10px 0;
}

div.about div.black, div.about div.grey {
	display: inline;
	float: left;
	width: 49%;
	padding: 0;
	margin: 0;
}

div.about div.black {
	color: #bbb;
	font-size: 0.8em;
}

div.about div.black p { margin: 10px 30px 0 30px; }
div.about div.black h2 { margin: 30px 30px 20px 30px; }
div.about div.grey { font-size: 1.1em; }
div.about div.grey p { margin: 70px 20px 30px 30px; }
div.black-corner { background: transparent url(../gfx/corner-bottom-left-black.png) no-repeat bottom left; }
div.grey-corner { background: transparent url(../gfx/corner-bottom-right-grey.png) no-repeat bottom right; }

/* }}} End About Box */

/* Recent {{{ */
ul.recent {
	margin: 16px 0 0 0;
	padding: 0 0 0 20px;
	float: left;
	width: 270px;
}

ul.recent li { font-size: 0.74em; }

ul.recent li a {
	background: transparent url(../gfx/bullet.png) no-repeat;
	padding: 0.55em 0 0.55em 24px;
	border-bottom: 1px solid #d1d1d1;
	text-decoration: none;
	display: block;
	color: #939393;
}

ul.recent li a strong {
	font-weight: bold;
	font-size: 1.2em;
	color: #000;
}

ul.recent li a:visited strong { color: #858585; }
ul.recent li a:hover { background: #E6F3FA url(../gfx/bullet.png) no-repeat; }

ul.recent li.last a {
	border: 0;
	width: auto;
	float: right;
	background: none;
	text-decoration: underline;
}

ul.recent li.last a:hover { color: #0093d8; }

#hidden-album, .hidden-text { display: none; }
/* }}} End Recent */
/* }}} End Frontpage */

/* Albums {{{ */
ul.albums {
	padding: 0;
	margin: 0;
		display: flex;
	flex-direction: row;
	justify-content: center;
	  flex-wrap: wrap;

}

ul.albums li {
	padding: 0;
	z-index: 1;
	min-width: 250px;
    width: 25%;
	overflow: hidden;
	box-sizing: border-box;
	max-height: 300px;
}

ul.albums li img {
	background: #eee;
    height: 300px;
    object-fit: cover;
    overflow: clip;
    width: 100%;
	transition: transform 1s cubic-bezier(0,1,.5,1), 
                opacity 1s cubic-bezier(0,1,.5,1), 
                -webkit-transform 1s cubic-bezier(0,1,.5,1),
                filter 1s cubic-bezier(0,1,.5,1); /* Add transition for filter */
}

ul.albums li a img {
	background: #eee;
    height: 300px;
    object-fit: cover;
    overflow: clip;
    width: 100%;
	transition: transform 1s cubic-bezier(0,1,.5,1), 
                opacity 1s cubic-bezier(0,1,.5,1), 
                -webkit-transform 1s cubic-bezier(0,1,.5,1),
                filter 1s cubic-bezier(0,1,.5,1); /* Add transition for filter */
}

.album-container {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}
.album-label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    background: rgba(0, 0, 0, 0.6);
    gap: 5px; /* Adds space between h2 and h3 */
    transition: transform 1s cubic-bezier(0,1,.5,1), opacity 1s cubic-bezier(0,1,.5,1);
}

.album-label:hover {
    opacity: 0;
}

.album-label h2 {
    font-weight: bolder;
    margin: 0;
    padding: 5px 0;
    line-height: 1.2;
    font-size: 2vw; /* Responsive font size */
    transition: all .2s ease;
	color: white;
}

.album-label h3 {
    color: #2d9ed3;
    font-weight: bolder;
    margin: 0;
    padding: 5px 0;
    line-height: 1.2;
    font-size: 1vw; /* Responsive font size */
    transition: all .2s ease;
}




ul.albums li a {
	display: block;
	text-decoration: none;
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	overflow:hidden;
	position: relative;
}

/*
ul.albums li a.album-label {
	display: block;
	width: 255px;
	height: 30px;
	color: #949494;
	padding: 0;
	text-align: right;
	text-decoration: none;
	font-size: 1.0em;
	position: relative;
	bottom: 34px;
	right: 0;
	z-index: 10;
}
*/




ul.albums li a:hover strong { color: #0093d8; }

ul.albums li a strong {
	color: #fff;
	font-weight: bold;
}

ul.fp-albums {
}

ul.fp-albums li {
	/*border-radius: 5px;*/
}

/* }}} End Albums */

/* Photos {{{ */
ul.photos{
	display: flex;
	flex-wrap:wrap;
	padding-left: 0px;
	gap: 5px;
	justify-content: center;
}

div.photos {
    align-content: center;
    padding-top: 10px;
    width: 100%;
}

.photo-container {
    display: flex; /* Align columns next to each other */
    justify-content: center; /* Center the columns in the container */
    gap: 10px; /* Gap between columns */
    margin: auto;
    width: 99%;
}

.photo-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.photo-column img {
    max-height: 100%;
    max-width: 100%;
    object-fit: cover;
}

.photo-item {
    opacity: 0; /* Initially hidden */
    transform: translateY(30px); /* Start position: 30px down */
    transition: transform 0.5s ease, opacity 0.5s ease; /* Smooth transition for sliding and fading */
}

.photo-item.visible {
    opacity: 1; /* Fade in when visible */
    transform: translateY(0); /* Slide up to original position */
}


/* }}} End Photos */

/* Photo {{{ */
h2.album {
	padding-left: 0.5em;
	padding: 6px 0 10px 0.5em;
	text-align: center;
}

h2.album a {
	text-decoration: none !important;
}

#photo {
	width: 1000px;
	padding: 0;
	text-align: center;
	display: flex;
	justify-content: center;
	flex-direction: row;
}

div.info {
	background: #f8f7ec url(/gfx/exif.png) no-repeat bottom left;
	color: #5a594e;
	width: 200px;
	padding: 0 0 14px 0;
	margin: 10px 0 0 0;
}

#info-panels {
	width: 200px;
	text-align: center;
}

div.info dl, div.info .contact {
	font-size: 0.8em;
	padding: 1em;
	margin: 0;
}

div.info > dl, div.info > .contact {
	background: url(/gfx/exif.png) no-repeat top left;
	padding-bottom: 0;
}

div.info dl dt {
	font-weight: bold;
	margin: 0.7em 0 0 0;
}

div.info dl.extra { padding-top: 0; }
div.info dl dd { margin: 0 0 0 0.3em; }

#navigation-photos {
	padding: 0;
}

#navigation-photos a img {
	width: 200px;
	height: 100px;
}

#navigation-photos a.prev {
	display: none;
}
/* }}} End Photo */

/* Member {{{ */
div.members {
	justify-content: center;
	display: flex;
	flex-wrap: wrap;
	max-width: 1200px;
	margin: 0 auto;
}

div.member {
	color: #444;
	width: 195px;
	padding: 7px;
	margin: 12px 6px;
	float: left;
	text-align: center;
	position: relative; /* Necessary to position the overlay correctly */
}
.member-image-container {
    position: relative;
    display: inline-block; /* Ensures container only takes up space needed by the image */
	    overflow: hidden;

}

.member-image-container img {
    width: 100%; /* Responsive image */
    height: auto; /* Maintain aspect ratio */
	    object-fit: cover; /* Ensures the image covers the container while maintaining aspect ratio */
    display: block; /* Removes bottom whitespace */
	border-radius: 15px;
}
.member-image-container .overlay {
	opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Puts overlay above the image */
	padding-top: 0px;
	    overflow: hidden;
	border-radius: 15px;
    transition: opacity 0.5s ease, -webkit-transform 1s ease;
    transition: opacity 0.5s ease, transform 1s ease;
    transition: opacity 0.5s ease, transform 1s ease, -webkit-transform 1s ease;
	    color: #fff;
    text-shadow: -1px 1px 2px #000, 1px 2px 6px #000, 1px -1px 0 #000, -1px -1px 0 #000;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: middle;
	gap: 5px;
	text-decoration: none;
}
.member-image-container .overlay a:visited {
	    color: #0093d8;
}

.member-image-container:hover .overlay {
    opacity: 1; /* Show overlay on hover */
}

div.member div {
	text-align: center;
}

div.member div h4 {
	text-align: center;
	margin: 0;
	padding: 0;
}

div.member div em {
	font-weight: normal;
	font-style: oblique;
}
div.member .member-info a:visited{
	color: #0093d8;
}

div.member div span.email { display: none; }

div.member img {
	object-fit: cover;
}

.committe{
	display: flex;
	flex-direction: row;
	justify-content: center;
	padding-top: 20px;
}

.committe .images{
	margin: 0px;
}

.textmember{
	display: flex;
	justify-content:center;
	flex-direction:column;
	text-align: center !important;
	width: 100% !important;
}


/* }}} End Member */

/* Everything Else {{{ */
div.text-box {
	font-size: 1em;
	width: 533px;
	text-align: left;
	float: left;
	padding-left: 1em;
	margin: 0 50px 0 0;
}

h2 img { padding: 0; }

div.gallery-thumb {
	margin: 16px 16px 0 0;
	padding: 0;
	z-index: 1;
	float: left;
	height: 192px;
}

div.gallery-thumb img {
	width: 289px;
	height: 192px;
}

div.gallery-thumb a { text-decoration: none; }

div.gallery-thumb a span {
	color: #949494;
	text-align: right;
	text-decoration: none;
	font-size: 1.0em;

	display: block;
	width: 261px;
	height: 30px;
	position: relative;
	bottom: 30px;
	right: 0;
	z-index: 10;
}

div.gallery-thumb a:hover strong { color: #0093d8; }

div.gallery-thumb a strong {
	color: #fff;
	font-weight: bold;
}

.tool-tip {
	background: transparent url(/gfx/transparent.png);
	color: #222;
	padding: 0.4em 1em 0.2em 1em;
	font-size: 0.8em;
	font-weight: bold;
	max-width: 30em;
}

.tool-title { font-weight: bold; }
div.contact, img.contact { float: left; }

#contactcontainer{
	display: flex;
	flex-direction: row;
	justify-content: center;
	 position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center horizontally and vertically */
	gap: 10px;
	
}
#contactcontainer2{
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
}

.gruppbild{
	background: url("../gfx/gruppbild24.PNG");
    background-size: cover; /* Makes the background image responsive */
    background-position: center;
    background-repeat: no-repeat;
	 filter: grayscale(1) brightness(70%);
   mix-blend-mode: multiply;
    position: relative;
    min-height: 50vh; /* Height based on viewport; adjust as needed */
    height: 100vh; /* Full viewport height for responsive scaling */
    z-index: -1; /* Ensure this layer is behind the contact container */
}

div.contact {
	width: 400px;
	background: rgba(0,0,0,0.6);
	color: white;
	padding: 10px 20px;
	border-radius: 5px;
	font-size: 1.1vw;
	line-height: 1.5vw;
	margin: 0px;
	    max-width: 600px; /* Added max-width to prevent text from clustering */

}
div.contact h2{
	color: white;
}

img.contact {
	margin: 32px 0 4px 0;
	width: 630px;
}


#contact-box dl dt, #ordf-box dl dt {
	font-weight: bold;
	float: left;
	clear: both;
	line-height: 1.6em;
	margin-right: 0.5em;
}

#contact-box dl dd, #ordf-box dl dd { line-height: 1.6em; }
#address-box { width: 278px; }
#contact-box { width: 224px; }

#ordf-box {
	width: 380px;
	margin-right: 0;
}

#ordf-box em, #contact-box em {
	font-weight: normal;
	font-style: italic;
}

div.images {
	float: left;
	width: 327px;
	margin: 3em 0 0 0;
}

div.images img {
	margin: 0 0 1em 0;
}

a.banner img {
	margin: 16px 0 0 0;
}
.rows{
	padding-top: 60px;
}
.black{
	background: black;
}
#video-container {
    position: relative; 
    width: 100%;
    overflow: hidden; /* Prevents overflow of video */
    height: 100vh; /* Make the container fill the viewport height */
	    background-color: black; /* Black background for the video element */

}

#video-container video {
    width: 100%; /* Default full width for large screens */
    height: auto; /* Keeps aspect ratio */
	max-width: none;
    position: absolute;
    top: 50%; /* Vertically center */
    left: 50%; /* Horizontally center */
    transform: translate(-50%, -50%); /* Ensure perfect centering */
	    background-color: black; /* Black background for the video element */

}



#video-overlay{
	position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4);
}

#overlay-text {
    position: absolute; 
    top: 40%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    color: white; 
    font-weight: bold;
    text-align: center; /* Center the text horizontally */
    width: 80%; /* Ensure the content fits smaller screens */
}

#overlay-text h1 {
    font-size: 5vw; /* Responsive font size */
    font-weight: bold; 
    line-height: 1.2; /* Adjust line height */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    margin: 0; /* Remove default margins */
}

#overlay-text h2 {
    font-size: 3.5vw; /* Responsive font size */
    line-height: 1.4; /* Adjust line height for readability */
    font-weight: bold; 
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    margin: 10px 0 0 0; /* Add spacing between h1 and h2 */
}

.gallery-button {
    display: inline-block;
    margin-top: 30px;
    padding: 14px 45px;
    font-size: 1vw; /* Responsive font size */
    font-weight: bold;
    color: white !important;
    border: white 2px solid;
    text-decoration: none;
    border-radius: 2px;
	    transition: all .45s cubic-bezier(.25,1,.33,1);

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.button-link {
    padding: 10px 20px;
    color: white;
    text-decoration: none;
    margin: 0 5px;
    cursor: pointer;
    transition: all .45s cubic-bezier(.25,1,.33,1);
	font-weight: 700;
	font-size: 15px;
}

.button-link:visited, .button-link:link {
	color: white !important;
}

.button-link.active {
    color: #2d9ed3 !important;
    text-decoration: 2px underline;
    text-underline-offset: 3px;
}

.button-link:hover {
	color: #0093d8 !important;	
}

.content-selection {
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 40px;
}

.rows.black.selected {
    border: 2px solid #2d9ed3; /* Example style for Photos selection */
    padding: 10px;
}

.rows.black.videos-selected {
    border: 2px solid #f27a54; /* Example style for Videos selection */
    padding: 10px;
}
.error404 {
    background: url(../gfx/error404.png) no-repeat center center;
    width: 100%;
    height: 1200px;
	top:-60px;
    position: relative; /* Parent container for absolute positioning */
    background-size: cover;
}

.error404text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Shift by 50% of element's width and height */
    z-index: 100;
    width: 80%; /* Responsive width, adjust as needed */
    text-align: center;
    color: white;
    font-size: 4em;
	line-height: 1em;
	text-shadow: -1px 1px 2px #000, 1px 2px 6px #000, 1px -1px 0 #000, -1px -1px 0 #000;
}
#errorhomebtn {
    background: rgba(0, 0, 0, .5);
    border: 2px solid #fff;
    border-radius: 7px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin-bottom: 100px;
    margin-top: 40px;
    padding: 18px 20px;
    width: 130px;
	font-size: 0.5em;
	color: white;
	transition: all .45s cubic-bezier(.25,1,.33,1);
	text-decoration: none !important;
}

#errorhomebtn:hover {
    background: #0093d8;
}

#errorhomebtn p {
    font-weight: 700;
    margin: 0;
    padding-right: 5px
}

#errorhomebtn i,#errorhomebtn p {
    color: #fff;
    font-size: 18px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle
}

#errorhomebtn i {
    height: 20px;
    position: relative;
    width: 20px
}

#scrolltop i {
    font-size: 16px;
    height: 29px;
    left: 0;
    line-height: 29px;
    position: relative;
    text-align: center;
    top: 0;
    width: 29px;
    z-index: 10;
}
#scrolltop:hover {
    background-color: rgb(45, 158, 211, .8);
	transition: all .45s cubic-bezier(0.25, 1, 0.33, 1);
}
#scrolltop {
    position: fixed; /* Fixed position */
    right: 10px; /* Position it to the right */
    bottom: 10px; /* Position it at the bottom */
    z-index: 1000; /* Above other content */
    cursor: pointer; /* Pointer on hover */
    background-color: rgba(0, 0, 0, 0.5); /* Optional: Add a background */
    color: white; /* Optional: Text color */
    border-radius: 5px; /* Optional: Rounded corners */
    transform: translateY(150%); /* Start hidden by sliding down */
    transition: transform 0.3s ease; /* Smooth transition for sliding */
}

/* Show button when it should be visible */
#scrolltop.visible {
    transform: translateY(0); /* Slide up to show */
}
.partners {
    overflow: hidden; /* Hide overflow to only show one row */
    width: 100%; /* Set the desired width */
    position: relative;
    height: 200px;
    background: black;
}

.carousel {
    margin: 0 auto;
    padding: 10px 0;
    max-width: 90%;
    overflow: hidden;
    display: flex;
    height: 200px;
    position: relative;
    flex: 0 0 100%;
    box-sizing: border-box;
}

/* Feathered edges */
.carousel::before,
.carousel::after {
    content: '';
    position: absolute;
    top: 0;
    width: 90px; /* Adjust width for feathering effect */
    height: 100%;
    background: linear-gradient(to right, black, rgba(0, 0, 0, 0));
    z-index: 1; /* Place above carousel content */
}

.carousel::after {
    right: 0;
    background: linear-gradient(to left, black, rgba(0, 0, 0, 0));
}

.group {
    display: flex;
    gap: 20px;
    padding-right: 20px;
    will-change: transform; /* We should be nice to the browser - let it know what we're going to animate. */
    animation: scrolling 50s linear infinite;
}

.carousel:hover .group {
    animation-play-state: paused;
}

.card {
    width: 150px;
    color: white;
    border-radius: 24px;
    box-shadow: rgba(0, 0, 0, 10%) 5px 5px 20px 0;
    padding: 10px;
    font-size: xx-large;
    justify-content: center;
    align-items: center;
    height: 150px;
	filter: brightness(50%);
}
.card:hover {
	filter: brightness(100%);
}


@keyframes scrolling {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}


#map{
    height: 300px;
}

.dot {
    fill: #2d9ed3;
    fill-opacity: 1;
    stroke: none;
}

.pulse{
    fill: #2d9ed3;
    fill-opacity: 0;
    stroke: none;
    transform-origin: 50% 50%;
    transform-box: fill-box;
    animation: markerAnimation cubic-bezier(0,.55,.55,1) 2s;
    animation-fill-mode: forwards;
    animation-delay: 0.78s;
    animation-iteration-count: infinite;
	    border-radius: 50%;

}

.pulse2{
    fill: #2d9ed3;
    fill-opacity: 0;
    stroke: none;
    transform-origin: 50% 50%;
    transform-box: fill-box;
    animation: markerAnimation cubic-bezier(0,.55,.55,1) 2s;
    animation-fill-mode: forwards;
    animation-delay: 1s;
    animation-iteration-count: infinite;
}

@keyframes markerAnimation {
    0% {
        fill-opacity: 0;
        transform: scale(0.00);
    }
    1% {
        fill-opacity: 0.25;
    }
    20% {
        fill-opacity: 0.25;
    }
    60% {
        transform: scale(1);
        fill-opacity: 0;
    }
}

.fp-info-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-left: 10%; /* Adds space from the left edge */
    height: 100vh;
		overflow: hidden;
}

.fp-info {
    background: url("../gfx/info.jpg") no-repeat center center;
    width: 100%;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    filter: brightness(70%);
    z-index: -1; /* Keep this background behind other content */
}

.fp-info-join {
    color: white;
    font-size: 1.5vw !important;
    line-height: 1.5vw !important;
    max-width: 50%; /* Limit width for readability */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    padding: 0px !important;
	margin: 0px;
	overflow: hidden;
}

/* Button styling */
.fp-contact {
    display: inline-block;
    margin-top: 20px;
    padding: 14px 45px;
    font-size: 1vw;
    font-weight: bold;
    color: white !important;
    border: 2px solid white;
    text-decoration: none;
    border-radius: 2px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	transition: all .45s cubic-bezier(.25,1,.33,1);
}

.fp-contact:hover{
	background: #0093d8;
	border: 2px solid #0093d8;
}



@media only screen and (max-width: 1500px) {
    #video-container video {
        width: auto;
        height: 100vh; /* Full height for small devices */
        max-width: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* Center the video */
    }
	
	    #overlay-text {
        top: 45%; /* Adjust position further on mobile screens */
        width: 95%; /* Take more width to avoid text merging */
    }

    #overlay-text h1 {
        font-size: 6vw; /* Further increase font size */
    }

    #overlay-text h2 {
        font-size: 4vw;
        line-height: 1.2; /* Tighter line height */
    }

    .gallery-button {
        font-size: 2vw !important;
        padding: 10px 25px;
    }
		.button-link {
		font-size: 10px !important;
	}
		.error404text {
		top: 40% !important; /* Center vertically */
		left: 50%; /* Center horizontally */
		transform: translate(-50%, -50%); /* Shift by 50% of element's width and height */
		font-size: 4em;
	}
}

/* Media query for smaller screens (mobile) */
@media only screen and (max-width: 1024px) {
    #video-container video {
        width: auto; /* Let width adjust automatically */
        height: 100vh; /* Full height of the viewport */
        max-width: none; /* Prevent max-width from restricting the height */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* Center the video */
    }
	    #overlay-text {
        width: 90%; /* Increase width on smaller screens */
        top: 40%; /* Adjust top position */
    }

    #overlay-text h1 {
        font-size: 8vw; /* Larger font for smaller screens */
    }

    #overlay-text h2 {
        font-size: 6vw;
        line-height: 1.3; /* Adjust line-height for clarity */
    }

    .gallery-button {
        font-size: 3vw !important;
        padding: 12px 35px;
    }

	.button-link {
		font-size: 10px;
	}
		.error404text {
		top: 25% !important; /* Center vertically */
		left: 50%; /* Center horizontally */
		transform: translate(-50%, -50%); /* Shift by 50% of element's width and height */
		font-size: 4em;
	}
		.contact{
		font-size: 1.8vw !important;
			line-height: 2.2vw !important;
		padding: 10px 20px 0px 20px !important;
	}
		#contactcontainer{
		flex-direction: column;
		top: 47%;
		gap: 7px;
	}

}

@media only screen and (max-width: 480px) {
    #video-container video {
        width: auto;
        height: 100vh; /* Full height for small devices */
        max-width: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* Center the video */
    }
	
	    #overlay-text {
        top: 45%; /* Adjust position further on mobile screens */
        width: 95%; /* Take more width to avoid text merging */
    }

    #overlay-text h1 {
        font-size: 10vw; /* Further increase font size */
    }

    #overlay-text h2 {
        font-size: 8vw;
        line-height: 1.2; /* Tighter line height */
    }

    .gallery-button {
        font-size: 4vw !important;
        padding: 10px 25px;
    }
		.button-link {
		font-size: 10px !important;
	}
	.error404text {
		top: 20% !important; /* Center vertically */
		left: 50%; /* Center horizontally */
		transform: translate(-50%, -50%); /* Shift by 50% of element's width and height */
		font-size: 4em;
	}
	    .album-label h2 {
        font-size: 4vw;
			color:white;
    }

    .album-label h3 {
        font-size: 3vw;
    }
	#contactcontainer{
		flex-direction: column;
		top: 47%;
		gap: 7px;
	}
	#contactcontainer2{
		flex-direction: column;
		gap: 5px;
	}
	.fp-info-container {
    align-items: center !important;
    justify-content: center !important;
    padding-left: 0px !important; /* Adds space from the left edge */
    height: 100vh;
		overflow: hidden;
}
	
	.fp-info-join {
		font-size: 5vw !important;
		line-height: 6vw !important;
		max-width: 90%; /* Limit width for readability */
		padding: 10px !important;
		font-weight: bolder;
		margin: 0px;
		overflow: hidden;
	}

	/* Button styling */
	.fp-contact {
		margin-top: 30px;
		font-size: 3vw !important;
	}
	.videoWrapper video {
    max-width: 90% !important; /* Limit video width to 70% of the wrapper */
    max-height: 90% !important; /* Limit video height to 70% of the wrapper */
	}
}
#album-content {
    opacity: 1;
    transition: opacity 0.5s ease; /* Change opacity over 0.5 seconds */
}

.album-hidden {
    opacity: 0; /* Make the content invisible */
}


.album-video-summary{
     display:block;
    position: relative;
    width:90%;
    margin:0 auto;
    padding:20px 0 20px 0;
    text-align:center;
}
.album-video-link{
    cursor:pointer;
}

.album-video-link:hover{
    background-color:#000;
}


.album-video-overlay {
    display: none; /* Hidden by default */
    position: fixed; /* To cover the entire viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000; /* Ensure it is on top of other elements */
}
.video-overlay-bg {
    position: absolute; /* Position it over the video */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    z-index: -1; /* Ensure it is on top */
}


.main-vid-box {
    display: none;
    position: fixed; /* To cover the entire viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    z-index: 1000; /* Ensure it is on top of other elements */
}


.videoWrapper {
    position: relative; /* Position relative for overlay purposes */
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center-align button under the video */
	justify-content: center;
	vertical-align: middle;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.album-video-close {
    margin-top: 10px; /* Space between the video and close button */
    cursor: pointer;
    color: white;
    font-size: 24px;
    background: rgba(0, 0, 0, 0.8); /* Optional: background for visibility */
    padding: 10px 20px; /* Padding for better click area */
    border-radius: 5px; /* Optional: rounded corners */
    z-index: 1000; /* Ensure it's above other elements */
	transition: all .45s cubic-bezier(0.25, 1, 0.33, 1);
}

.album-video-close:hover {
    background: #0093d8;
}

.videoWrapper video {
    max-width: 50%; /* Limit video width to 70% of the wrapper */
    max-height: 50%; /* Limit video height to 70% of the wrapper */
    width: auto; /* Maintain aspect ratio */
    height: auto; /* Maintain aspect ratio */
	z-index: 2;
}


/* }}} End Everything Else */