* {
	box-sizing: border-box
}

.mySlides {
	display: none;
}

.slideshow-container {
	width: auto;
	position: relative;
	background:#404040;

}
/* Next & previous buttons */
.home-prev, .home-next {
	cursor: pointer;
	position: absolute;
	top: 40%;
	width: auto;
	margin:0.2em;
	padding: 0.2em;
	font-weight: bold;
	font-size: 3em;
	transition: 0.6s ease;
    text-shadow:0px 0px 10px var(--monoFront);
    color:var(--monoBack);
    z-index:51;
}
.home-next {
    right:0;
}
.home-prev:hover,
.home-next:hover {
    text-shadow:0px 0px 10px var(--baseColourInvert);
    color:var(--baseColour);
}


/* The dots/bullets/indicators */
.dot {
	cursor: pointer;
	height: 1em;
	width: 1em;
	margin: 0 0.1em;
	background-color: var(--monoBack);
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
}
.active, .dot:hover {
	background-color: var(--baseColour);
}
/* Fading animation */
.slideshow-fade {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 4s;
	animation-name: fade;
	animation-duration: 4s;
}
.slideshow-dotcontainer {
    position:relative;
    top:-5vh;
    text-align:center;
    display:block;
    margin:auto;
}

.slideshow-dot {
   box-shadow:0px 0px 10px 1px var(--monoFront);
    border:solid 0.1em var(--monoBack);
}
@-webkit-keyframes fade {
  from {opacity: .25} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .25} 
  to {opacity: 1}
}

.slideshow-dotcontainer {
    z-index:100;
}

.pics {
    height:100vh;
    background-attachment:scroll !important;
    background-size:cover !important;
    background-position:center !important;
}