#all_slides{
padding: 0px;
margin: 0px;
list-style-type: none;
}
a.homepageAnchor:hover {
background-color: grey;
color: white;
}
.slide{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
-webkit-transition: opacity 5s;
-moz-transition: opacity 5s;
-o-transition: opacity 5s;
transition: opacity 5s;
}
.active{
opacity: 1;
z-index: 2;
}
.controls{
display: none;
}
.slide{
font-size: 40px;
padding: 40px;
box-sizing: border-box;
background: #333;
color: #fff;
background-size: cover;
}
.slide:nth-of-type(1){
background-image: url('Images/main-banner.jpg');
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
.slide:nth-of-type(2){
background-image: url('Images/zamek-1.jpg');
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat
}
.slide:nth-of-type(3){
background-image: url('Images/main-banner.jpg');
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat
}
.slide:nth-of-type(4){
background-image: url('Images/zamek-1.jpg');
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat
}
.controls{
display: inline-block;
position: relative;
top: 1rem;
right: .5rem;
border: none;
outline: none;
font-size: 20px;
cursor: pointer;
border: 2px solid #fff;
border-radius: 1.5rem;
background: gold;
width: 3rem;
height: 3rem;
margin-left: .5rem;
}
.controls:hover,
.controls:focus{
background: #eee;
color: #333;
}
.buttons{
position: absolute;
right: .5rem;
top: 0px;
z-index: 10;
font-size: 0px;
}
.fancy{
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: 0;
left: -2rem;
width: 7rem;
height: 2rem;
background: gold;
color: #000;
z-index: 3;
transform: rotate(-45deg);
border-radius: 1rem;
}