/* Slider */
.gallery-group {
	display: flex;
	text-align: center;
	flex-direction: column;
	justify-content: center;
	flex-wrap: nowrap;
	max-width: 100%;
	margin: 5% auto 0 auto;
	padding: 0;
}
.slider-gallery h3 {
	text-align: center;
	font-size: calc( 1.95vw + 1vmin);
	letter-spacing:  0.110em;
	color: #2b2b2b; 
	font-weight: 600; 
	font-family: "Montserrat", Arial, "Helvetica Neue", Helvetica, "sans-serif"; 
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-style: normal;
	margin: 12% 0 3% 0;
	/*flex-wrap: nowrap;*/
	text-transform: uppercase;
}
/* Slideshow container */
.slide-container {
	position: relative;
	max-width: 1273px; /* responsiveness */
}

/* First element to be in block mode for responsiveness */
#slide1-first-element, #slide2-first-element, #slide3-first-element {
	display: block; /* to get the dimensions set */
	width: 100%;
	height: auto;
}

/* Other element to be in absolute position */
#slide1-element-2, #slide1-element-3, 
#slide2-element-2, #slide2-element-3, 
#slide3-element-2, #slide3-element-3 {
	position: absolute;
	width: 100%;
	height: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

/* Style images */
.slide-image {
	width: 100%;
}

/* Style text */
.slide-text {
	position: absolute;
	bottom: 10px;
	background-color: #0042b1bb;
	color: white;
	width: 100%;
	text-align: center;
	font-size: 1.5rem;
}

/* Animation settings for individual elements */
/* For more images the animations have to be adjusted */
#slide1-first-element {
	animation: fade-1 12s infinite;
 -webkit-animation: fade-1 12s infinite;;
}

#slide1-element-2 {
	animation: fade-2 12s infinite;
 -webkit-animation: fade-2 12s infinite;
}

#slide1-element-3 {
	animation: fade-3 12s infinite;
 -webkit-animation: fade-3 12s infinite;
}
#slide2-first-element {
	animation: fade-1 12s infinite;
 -webkit-animation: fade-1 12s infinite;
	animation-delay: 4s;
}

#slide2-element-2 {
	animation: fade-2 12s infinite;
 -webkit-animation: fade-2 12s infinite;
	animation-delay: 4s;
}

#slide2-element-3 {
	animation: fade-3 12s infinite;
 -webkit-animation: fade-3 12s infinite;
	animation-delay: 4s;
}
#slide3-first-element {
	animation: fade-1 12s infinite;
 -webkit-animation: fade-1 12s infinite;
	animation-delay: 8s;
}

#slide3-element-2 {
	animation: fade-2 12s infinite;
 -webkit-animation: fade-2 12s infinite;
	animation-delay: 8s;
}

#slide3-element-3 {
	animation: fade-3 12s infinite;
 -webkit-animation: fade-3 12s infinite;
	animation-delay: 8s;
}
@keyframes xfade{
 25% {
    opacity:1;
  }
  55% {
    opacity:0;
  }
  98% {
    opacity:1;
  }

/* 	33% {
		opacity: 0;
	}
	66% {
		opacity: 1;
	}
	99% {
		opacity: 0;
	}*/
}

@keyframes fade-1 {
 0% { opacity: 1; }
 33% { opacity: 0; }
 66% { opacity: 0; }
 100% { opacity: 1; }
}
@keyframes fade-2 {
 0% { opacity: 0; }
 33% { opacity: 1; }
 66% { opacity: 0; }
 100% { opacity: 0; }
}
@keyframes fade-3 {
 0% { opacity: 0; }
 33% { opacity: 0; }
 66% { opacity: 1; }
 100% { opacity: 0; }
}
/* example for a 4th slide */
@keyframes fade-4 {
 0% { opacity: 0; }
 25% { opacity: 0; }
 50% { opacity: 0; }
 75% { opacity: 1; }
 100% { opacity: 0; }
}
/* ================ slider-nav ======================*/
.slider-nav-container {
	/*display: block;*/
    width: 100%;
    
}	
.slider-nav {
    background: #101010;
    padding: 3%;
	display: block; 
	width: auto;
	height: auto;

}

.slider-nav ul {
    display: flex;
    slider-nav-flow: row wrap;
    justify-content: space-between;
    list-style: none;
    margin: 0 15%;
    padding: 0;
}

.slider-nav ul li {
    flex: 1 1 auto;
    background: #101010;
    position: relative;
    text-align: center;
    line-height: 0.75;
}

.slider-nav-cat + .slider-nav-cat {
    border-left: solid 2px white;
}
	
.slider-nav-cat a {
	color: white;
	text-decoration: none;
	font-family: "Montserrat", Arial, "Helvetica Neue", Helvetica, "sans-serif";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0.05em;
	font-size: calc( 1.90vw + 1vmin); 

}
.slider-nav-cat a:hover {
	text-decoration: underline;
	 text-underline-position: under;
}	
/* ================ slider-gallery ======================*/
div.slider-gallery {
  margin: 0;
}

/*div.slider-gallery:hover {
  border: 1px solid #777;
}*/

div.slider-gallery img {
  width: 100%;
  height: auto;
}
/*div.slider-desc {
  padding: 0;
  text-align: center;
}	*/

@media only screen and  (min-width: 640px) {
	.slider-nav-cat a {font-size:  calc( 0.20vw + 1vmin);}
	div.slider-gallery {
	width: 33.2%;
	}
	.slider-gallery h3 {
	font-size: calc( 0.15vw + 1vmin);
	margin: 5% 0 5% 0;
	}
	.gallery-group {
	flex-direction: row;
	justify-content: space-between;	
	flex-wrap: nowrap;
	margin: 5% 0 0 0;
	padding: 0;
}
}