/* Googlefont Poppins CDN Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
html, body { width: 100%; height: 100%; }
* { margin: 0; padding: 0; box-sizing: border-box; }

.tinyslide {
width: 100%;
height: 400px; 
position: relative; 
overflow: hidden; 
}
.tinyslide .navigator { 
position: absolute; 
bottom: 4px; 
left: 50%; 
-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; 
width: 12px; 
height: 12px; 
border: 1px solid #3E0304; 
border-radius: 100%; 
-webkit-transition: all 500ms linear; 
transition: all 500ms linear; 
}
.tinyslide .navigator ul li span { 
display: none; 
}
.tinyslide .navigator ul li:hover { 
background: #3E0304; 
}
.tinyslide .navigator ul li.active { 
background: #3E0304; 
-webkit-transform: scale(1); 
-ms-transform: scale(1); 
transform: scale(1); 
}

.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: 100%;   
}
.tinyslide figure figcaption { 
position: absolute; 
font-size: 4vw; 
color: white; 
bottom: 1.5em;
background:rgba(0,0,0,0.3);
text-shadow:0px 5px 0px #000; 
text-align:center;
width:100%; 
z-index: 2; 
opacity: 0; 
text-shadow:4px 4px 2px #000; 
font-family: 'Poppins', sans-serif;
}

.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); } }

@media (max-width:1024px) {
.tinyslide {
height: 300px; 
}
}

@media (max-width:800px) {
.tinyslide {
height: 280px; 
}
}

@media (max-width:600px) {
.tinyslide {
height: 250px; 
}
}
@media (max-width:480px) {
.tinyslide {
height: 220px; 
}
}

@media (max-width:384px) {
.tinyslide {
height: 180px; 
}
}
@media (max-width:375px) {
.tinyslide {
height: 150px; 
}
}