.rotating-slider-container {
position: absolute;
width: 100%;
height: 500px;
margin: 20px 200px;
overflow: hidden;
}
.rotating-slider{
margin: 40px auto 0 auto;
position: relative;
}
.rotating-slider ul.direction-controls {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
bottom: -90px;
display: flex;
width: 100%;
justify-content: center;
}
.rotating-slider ul.direction-controls li button{
background: rgba(138, 60, 161, 0.8);
border: none;
outline: none;
color: white;
cursor: pointer;
font-size: 40px;
font-weight: bold;
height: 60px;
width: 60px;
padding-bottom: 6px;
text-align: center;
transition: background 0.35s;
}
.rotating-slider ul.direction-controls li button:hover{
background: rgba(125, 54, 146, 0.8);
}
.rotating-slider ul.direction-controls li.left-arrow button{
border-radius: 100% 0 0 100%;
}
.rotating-slider ul.direction-controls li.right-arrow button{
border-radius: 0 100% 100% 0;
}
.rotating-slider ul.slides {
border-radius: 50%;
height: 100%;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
top: 0;
left: 50%;
transform: translateX(-50%) rotate(0);
transform-origin: center center;
width: 100%;
/* text-shadow: 0 0 12px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.7); */
color: #FFF;
font-family: 'Century Gothic';
font-weight: bold;
}
.rotating-slider ul.slides .slide-inner {
/* position: absolute; */
margin-top: 15%;
bottom: 80px;
right: 190px;
}
.rotating-slider ul.slides .slide-inner div {
font-size: 36px;
text-transform: uppercase;
}
.rotating-slider ul.slides .slide-inner p {
font-size: 22px;
margin-top: 10px;
}
.rotating-slider ul.slides li{
background-color: #ecf0f1;
background-position: center;
background-size: cover;
display: block;
list-style: none;
position: absolute;
top: 0;
left: 50%;
text-align: center;
transform-origin: bottom center;
width: 100%;
box-sizing: content-box;
}
|