html, body { width: 100%; height: 100%; } * { margin: 0; padding: 0; box-sizing: border-box; } .tinyslide { width: 100%; height: 100%;  overflow: hidden; position:relative;} .tinyslide .navigator { position: absolute; bottom: 3em; right: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .tinyslide .navigator ul { padding: 0; } .tinyslide .navigator ul li { float: left; list-style-type: none; margin: 0 1em 0 0; padding: 0;background:#000; width: 20px; height: 20px;  } .tinyslide .navigator ul li span { display: none; }  .tinyslide .navigator ul li.active { background:#fff; } .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; width: 100%; z-index: 1; } .tinyslide figure img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .tinyslide figure figcaption { position: absolute;width:100%; text-align:center; font-size: 3em; color: white; top:3.5em; right: auto; z-index: 2; opacity: 0; } .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; }
@-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); } }