html, body { width: 100%; height: 50%; }

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

.tinyslide { width: 100%; height: 100%; position: relative; overflow: hidden; }
.tinyslide .navigator { position: absolute; bottom: 2em; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }
.tinyslide .navigator ul { padding: 0; }
.tinyslide .navigator ul li span { display: none; }
.tinyslide .navigator ul li:hover { background: white; }
.tinyslide .navigator ul li.active { background: white; -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); }
.tinyslide aside { height: 100%; width: 100%; -webkit-transition: -webkit-transform 800ms cubic-bezier(0.365, 0.84, 0.44, 1); transition: transform 800ms cubic-bezier(0.365, 0.84, 0.44, 1); -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.tinyslide figure { height: 100%; float: left; position: relative; z-index: 1;}
.tinyslide figure img { width: 100%; height: 520px; -o-object-fit: cover; object-fit: cover; border:1px solid grey; border-radius:8px;}

@media (min-width: 100px) and (max-width: 800px) {
.tinyslide .navigator ul li { float: left; list-style-type: none; margin: 0 0.5em 0 0; padding: 0; width: 5px; height: 5px; border: 1px solid white; border-radius: 100%; -webkit-transition: all 500ms linear; transition: all 500ms linear; }
.tinyslide figure figcaption { position: absolute; font-size: 1.2em; color: white; bottom: .1em; right: 0.2em; z-index: 2; opacity: 0; text-shadow: 3px 3px #000000; text-align: right; padding-bottom:10px;}
}

@media (min-width: 801px) and (max-width: 1510px) {
.tinyslide .navigator ul li { float: left; list-style-type: none; margin: 0 0.7em 0 0; padding: 0; width: 15px; height: 15px; border: 1px solid white; border-radius: 100%; -webkit-transition: all 500ms linear; transition: all 500ms linear; }
.tinyslide figure figcaption { position: absolute; font-size: 2em; color: white; bottom: 1em; right: 0.5em; z-index: 2; opacity: 0; text-shadow: 3px 3px #000000; text-align: right; padding-bottom:10px;}
}

@media (min-width: 1511px) {
.tinyslide .navigator ul li { float: left; list-style-type: none; margin: 0 1em 0 0; padding: 0; width: 25px; height: 25px; border: 1px solid white; border-radius: 100%; -webkit-transition: all 500ms linear; transition: all 500ms linear; }
.tinyslide figure figcaption { position: absolute; font-size: 2.5em; color: white; top: .5em; right: 1em; z-index: 2; opacity: 0; text-shadow: 3px 3px #0A0A0A; text-align: right; padding-bottom:10px;}
}
/* line 79, ../sass/tinyslide.scss */
.tinyslide figure.active figcaption { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 2s; animation-duration: 2s; padding-bottom:10px;}

@-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); }
  100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } }

@keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); }
  100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } }