article { box-sizing: border-box; }
article > img {vertical-align: middle;}
.mySlides { display: none; }

/* Slideshow container */
.slideshow-container { width: 100%; height: 800px; position: relative; margin: auto; overflow: hidden; }

@media (max-width: 1024px) {
  .slideshow-container { height: 700px; }
}

@media (max-width: 480px) {
  .slideshow-container { height: 500px; }
}

.mySlides > img { width: 100%; height: 100%; object-fit: cover; }

/* Caption text */
.text { color: #fff; font-size: 3em; position: relative; top: -400px; width: 100%; text-align: center; font-family: ONE-Mobile-POP;}

@font-face {
  font-family: 'ONE-Mobile-POP';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-POP.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@media (max-width: 768px) {
  .text { font-size: 2.5em;}
}

@media (max-width: 480px) {
  .text { font-size: 1.8em;}
}

/* The dots/bullets/indicators */
.dot_wrap { width: 100%; text-align: center; position: absolute; top: 720px; }
.dot { width: 15px; height: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; }

.active { background-color: #717171; }

/* Fading animation */
.fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; }

@-webkit-keyframes fade {
  from { opacity: .4; } 
  to { opacity: 1; }
}

@keyframes fade {
  from { opacity: .4; } 
  to { opacity: 1; }
}

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