body {
    font-family: 'Montserrat', sans-serif;
    color: #FFFFFF;
    background-color: #000;
}

.carousel {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
padding: 90px 0;
text-align: center;
background-color: #000;
transform: translate(-50%, -50%);
}

.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}

.carousel-inner > .item {
position: relative;
display: none;
animation: 0.5s ease-in-out;
}

.carousel-inner > .active,
.carousel-inner > .next {
display: block;
}

.carousel-inner > .next {
position: absolute;
top: 0;
width: 100%;
}

.carousel-inner > .to-left {
animation-name: left;
}

.carousel-inner > .from-right {
animation-name: right;
}

.carousel-inner > .to-right {
animation-name: right;
animation-direction: reverse;
}

.carousel-inner > .from-left {
animation-name: left;
animation-direction: reverse;
}

.container {
margin: 0 auto;
}

img {
    padding: 10px 20px;
    margin: 30px 90px;
    max-height: 60%;
    max-width: 60%;
}

.author {
margin: 0;
opacity: 0.5;
}

.carousel-control {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 15%;
cursor: pointer;
}

.carousel-control.right {
right: 0;
left: auto;
}

.carousel-control > .arrow {
position: absolute;
top: 50%;
display: inline-block;
width: 30px;
height: 30px;
background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyNiAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+QXJyb3c8L3RpdGxlPjxwYXRoIGQ9Ik0yNS42IDEwLjk3NGwtOC41MyA4LjYyYTEuMzYgMS4zNiAwIDAgMS0xLjkzNS4wMDMgMS4zODcgMS4zODcgMCAwIDEtLjAwMi0xLjk1bDYuMjAxLTYuMjY4SDEuMzY4QTEuMzc0IDEuMzc0IDAgMCAxIDAgMTBjMC0uNzYyLjYxMy0xLjM4IDEuMzY4LTEuMzhoMTkuOTY2bC02LjItNi4yNjdhMS4zODcgMS4zODcgMCAwIDEgLjAwMS0xLjk1IDEuMzYgMS4zNiAwIDAgMSAxLjkzNi4wMDJsOC41MyA4LjYyMWMuNTMyLjUzOC41MzIgMS40MSAwIDEuOTQ4IiBmaWxsPSIjRkZGRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=") center center no-repeat;
background-size: 26px 20px;
opacity: 0.6;
transform: translateY(-50%);
}

.carousel-control > .arrow:hover {
opacity: 0.8;
}

.carousel-control > .arrow.left {
transform: translateY(-50%) rotate(180deg);
}

.carousel-control > .arrow.right {
right: 50%;
}

.carousel-indicators {
position: absolute;
bottom: 20px;
left: 50%;
padding-left: 0;
margin: 0;
list-style: none;
transform: translateX(-50%);
}

.carousel-indicators li {
display: inline-block;
width: 10px;
height: 10px;
cursor: pointer;
border: 1px solid #FFFFFF;
border-radius: 10px;
}

.carousel-indicators li.active {
background-color: #FFFFFF;
}

@media (min-width: 992px) {
.container {
    width: 970px;
}
}

@media (min-width: 1200px) {
.container {
    width: 1170px;
}
}

@keyframes left {
from {
    left: 0;
}
to {
    left: -100%;
}
}

@keyframes right {
from {
    left: 100%;
}
to {
    left: 0;
}
}