﻿<style>
* {box-sizing: border-box}
.mySlides {display: none}
/* Slideshow container */
.slideshow-container {max-width: 400px;position: relative;margin: auto;}
/* Next & previous buttons */
.next {cursor: pointer;position: absolute;top: 50%;width: auto;padding: 16px;margin-top: -22px;color: white;font-weight: bold;font-size: 18px;transition: 0.6s ease;border-radius: 0 3px 3px 0;}
.prev {cursor: pointer;position: absolute;top: 50%;width: auto;padding: 16px;margin-top: -22px;color: white;font-weight: bold;font-size: 18px;transition: 0.6s ease;border-radius: 0 3px 3px 0;}
/* Position the "next button" to the right */
.next {right: 0;border-radius: 3px 0 0 3px;}
/* On hover, add a black background color with a little bit see-through */
.next:hover {background-color: rgba(0,0,0,0.8);}
.prev:hover {background-color: rgba(0,0,0,0.8);}
/* Caption text */
.text {color: black;font-size: 15px;padding: 8px 12px;position: absolute;bottom: 0px;width: 100%;text-align: center;}
/* Number text (1/3 etc) */
.numbertext {color: #f2f2f2;font-size: 12px;padding: 8px 12px;position: absolute;top: 0;}
/* The dots/bullets/indicators */
.dot {cursor: pointer;height: 15px;width: 15px;margin: 0 2px;background-color: #bbb;border-radius: 50%;display: inline-block;transition: background-color 0.6s ease;font-size:10px}
.dot:hover {background-color: #717171;}
.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}
.next {font-size: 11px}
.prev {font-size: 11px}}
</style>