.ipsupply-banner .slideshow-container .previous-btn { position: absolute; height: 550px; background-color: black; color: white; opacity: .3; z-index: 101; width: 70px; } .ipsupply-banner .slideshow-container .next-btn { position: absolute; height: 550px; background-color: red; z-index: 101; background-color: black; color: white; opacity: .3; right: 0; width: 70px; } .ipsupply-banner .slideshow-container .previous-btn img, .ipsupply-banner .slideshow-container .next-btn img { margin-top: 220px; } .ipsupply-banner .slideshow-container .next-btn:hover, .ipsupply-banner .slideshow-container .previous-btn:hover{ opacity: .8; } .ipsupply-banner .dots { text-align: center; margin-top: 20px; } .ipsupply-banner .dot { height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .ipsupply-banner .active { background-color: #717171; } /* Fading animation */ .ipsupply-banner .fade { animation-name: rotate; animation-duration: 2.5s; } @keyframes rotate { from { transform: rotateY(3.142rad) scale(.1); } to { transform:rotatY(0rad) scale(1); } } /* On smaller screens, decrease text size */ @media only screen and (max-width: 300px) { .text {font-size: 11px} }