:root {
    --lightlight-rgb: 255, 255, 255;
    --light-rgb: 251, 250, 250;
	--lightmain-rgb: 238, 160, 165;
    --maincolor-rgb: 231, 65, 99;
    --darkmain-rgb: 153, 39, 79;
	--accent-rgb: 115, 158, 94;
    --dark-rgb: 42, 45, 71;
    --darkdark-rgb: 0, 0, 0;

}

/* slide galleries */
.no-js .prev, .no-js .next, .no-js .dot-container{
	display: none;
}

.slide-gallery {
	display: block;
	max-width: 80%;
	position: relative;
	margin: auto;
	/*max-height: 75vh;*/
}
.slide {
	position: relative;
	display: none;
}
.slide.active{
	display: block;
}
.slide img{
	display: block;
	max-width: 100%;
	margin: auto;
}
.slide-gallery .slide-nr{
	position: absolute;
	top: 0;
	left:0;
	padding: 10px;
	color: var(--lightlight);
	text-shadow: 2px 2px black;
}
.slide .label{
	position: absolute;
	bottom: 0;
	left:0;
	padding: 10px;
	width: 100%;
	text-align: center;
	color: var(--dark);
	/* text-shadow: -1px 1px 0 var(--dark),
				1px 1px 0 var(--dark),
				1px -1px 0 var(--dark),
				-1px -1px 0 var(--dark); */
	background-color: var(--light);
}

/* arrow buttons to the left and right */
.prev, .next {
	padding: 20px 10px;
	position: absolute;
	color: var(--darkdark);
	border: 0;
	background-color: rgba(var(--light-rgb), 0.7);
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	cursor: pointer;
}
.prev:hover, .prev:focus, .next:hover, .next:focus{
	background-color: rgba(var(--lightmain-rgb), 0.9);
}
/* Position the "next button" to the right */
.next {
	right: 0;
}

/* dot indicators/buttons below the images */
.dot-container{
	margin: auto;
}
.dot{
	margin: 2%;
	display: inline-block;
	height: calc(10px + 0.5vw);
	width: calc(10px + 0.5vw);
	border-radius: 50%;
	background-color: var(--lightmain);
}
.dot:hover{
	background-color: var(--maincolor);
}
.dot.active{
	background-color: var(--maincolor);
}

/*when we have only 1 image there is no slide-gallery functionality - but similar styling*/
.no-slide {
	display: block;
	max-width: 80%;
	position: relative;
	margin: auto;
}
.no-slide img{
	display: block;
	max-width: 100%;
	margin: auto;
}
.no-slide .label{
	position: absolute;
	bottom: 0;
	left:0;
	padding: 10px;
	width: 100%;
	text-align: center;
	color: var(--lightlight);
}