.mod_basicslide * {
	box-sizing: border-box;
}

.mod_basicslide {
	font-family: Verdana, sans-serif;
    container-type: inline-size;
}

/* Slideshow container */
.mod_basicslide .basicslide-container {
  width: 100%;
  position: relative;
  margin: auto;
  overflow: hidden;
}

.mod_basicslide .info {
  padding: 1em 2em;
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: rgba(0,0,0,0.5);
}

/* Number text (1/3 etc) */
.mod_basicslide .numbertext {
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.mod_basicslide .dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.mod_basicslide .basicslide {
  position: absolute;
  width: 100%;
  height: 100%;
}

.mod_basicslide .crossfade .basicslide {
  visibility: hidden;
  opacity: 0;
}

.mod_basicslide .crossfade .basicslide.active {
  visibility: visible;
  opacity: 1;
}

.mod_basicslide .wipe .basicslide {
  left: 100%;
  visibility: visible;
}

.mod_basicslide .wipe .basicslide.active {
  left: 0;
}

.mod_basicslide .wipe .basicslide.finished {
  visibility: hidden;
  left: -100%;
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
    .mod_basicslide .text {font-size: 11px}
}