/*
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: rgb(255, 235, 235);
}
*/
/* Container styling for centering the content */
.karusellinContainer {
    display:block;
    flex-direction: column;
    justify-content:center; /*flex-end; /* center;*/
    align-items: center;
  /*  margin: 200px;  /* omaxyz auto*/
	margin-left: auto;
  margin-right: auto;
    width: 110%;
    max-width:220px; /* omaxyz 800px; */
    height: 200px;   /*omaxyz 600px */
}

/* Main heading styling */
.main-heading {
    padding: 2rem 0;
    text-align: center;
}



/* Slideshow styling */
.slideshow {
    height: 100%;
    overflow: hidden;
    position: relative;
}

/* Wrapper for the slideshow images */
.slideshow-wrapper {
    display: flex;
    width: 300%; /* 3 images -> 300% width */
    height: 100%;
    position: relative; /*relative; /* Ensure keyframes 'left' works */
    left:0;
  /*  animation: slideshow 20s infinite;*/
}

.slideshow-wrapper2 {
    display: flex;
    width: 200%; /* 2 images -> 200% width */
    height: 100%;
    position: relative; /*relative; /* Ensure keyframes 'left' works */
    left:0;
  /*  animation: slideshow 20s infinite;*/
}

.slideshow-wrapper1 {
    display: flex;
    width: 100%; /* 1 images -> 100% width */
    height: 100%;
    position: relative; /*relative; /* Ensure keyframes 'left' works */
    left:0;
  /*  animation: slideshow 20s infinite;*/
}

.slide {
    width: 100%;
    height: 100%;
}

.slide-img {
    width: 220px; /*omaxyz 100%; */
    height: 200px;  /*omaxyz 100% */
    object-fit:cover;
}

/* Keyframe animations */
@keyframes slideshow {
    0%, 10% { left: 0; }        
    15%, 25% { left: -100%; }
    30%, 40% { left: -200%; }
    45%, 55% { left: -300%; }
    60%, 70% { left: -200%; }
    75%, 85% { left: -100%; }
    90%, 100% { left: 0; }
}



/* Carousel control buttons */
.slide-btn {
    background-color:#fff;/* #bbb;*/
    border-radius: 50%;
    border: .2rem solid #000; /* #d38800;*/
    width: 1.2rem;
    height: 1.2rem;
    cursor: pointer;
    position: absolute;
    bottom: 3%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 70;
}

/*Position each button individually */
.slide-btn-1 { left: 45%; }
.slide-btn-2 { left: 55%; }
.slide-btn-3 { left: 65%; }
/*.slide-btn-4 { left: 60%; }*/

* Position each button individually */
/*
.slide-btn-1 { left: 25%; }
.slide-btn-2 { left: 40%; }
.slide-btn-3 { left: 60%; }
.slide-btn-4 { left: 80%; }*/

/* Stop animation when focused on buttons */
.slide-btn-1:focus ~ .slideshow-wrapper { animation: none; left: 0; }
.slide-btn-2:focus ~ .slideshow-wrapper { animation: none; left: -100%; }
.slide-btn-3:focus ~ .slideshow-wrapper { animation: none; left: -200%; }
/*.slide-btn-4:focus ~ .slideshow-wrapper { animation: none; left: -300%; }*/

/* Stop animation when focused on buttons */
.slide-btn-1:focus ~ .slideshow-wrapper2 { animation: none; left: 0; }
.slide-btn-2:focus ~ .slideshow-wrapper2 { animation: none; left: -100%; }
.slide-btn-3:focus ~ .slideshow-wrapper2 { animation: none; left: -200%; }
/*.slide-btn-4:focus ~ .slideshow-wrapper2 { animation: none; left: -300%; }*/


/* Button focus styling */
.slide-btn:focus {
    background-color: #FF4500; /*#308d46;*/
}