*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {

overflow: hidden;
font-family: 'Poppins', sans-serif;
text-transform: uppercase;
height: 100vh;
max-height: 100vh;;
width: 100vw;
max-width:100vw;
background-color: black;
}

.slider {
position: relative;
height: 100vh;
}
.slider__slides {
z-index: 1;
position: relative;
height: 100%;
}
.slider__control {
z-index: 2;
position: absolute;
top: 50%;
left: 5%;
width: 60px;
height: 60px;
margin-left: -30px;
margin-top: -30px;
border-radius: 7px;
background: #ff503f;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
cursor: pointer;
}
.slider__control--right {
left: 95%;
}
.slider__control:hover {
background-color: #3B4F50;
}
.slider__control-line {
position: absolute;
left: 23px;
top: 50%;
width: 3px;
height: 14px;
-webkit-transform-origin: 50% 0;
      transform-origin: 50% 0;
-webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
}
.slider__control-line:nth-child(2) {
-webkit-transform: translateY(1px) rotate(-135deg);
      transform: translateY(1px) rotate(-135deg);
}
.slider__control--right .slider__control-line {
left: 37px;
-webkit-transform-origin: 1px 0;
      transform-origin: 1px 0;
-webkit-transform: rotate(45deg);
      transform: rotate(45deg);
}
.slider__control--right .slider__control-line:nth-child(2) {
-webkit-transform: translateY(1px) rotate(135deg);
      transform: translateY(1px) rotate(135deg);
}
.slider__control-line:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #e2e2e2;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
.slider__control:hover .slider__control-line:after {
background-color: #ff503f;
}
.slider__control.a--rotation .slider__control-line:after {
-webkit-animation: arrowLineRotation 0.49s;
      animation: arrowLineRotation 0.49s;
}
.slider__control.a--rotation .slider__control-line:nth-child(1):after {
-webkit-animation: arrowLineRotationRev 0.49s;
      animation: arrowLineRotationRev 0.49s;
}

@-webkit-keyframes arrowLineRotation {
to {
-webkit-transform: rotate(180deg);
        transform: rotate(180deg);
}
}

@keyframes arrowLineRotation {
to {
-webkit-transform: rotate(180deg);
        transform: rotate(180deg);
}
}
@-webkit-keyframes arrowLineRotationRev {
to {
-webkit-transform: rotate(-180deg);
        transform: rotate(-180deg);
}
}
@keyframes arrowLineRotationRev {
to {
-webkit-transform: rotate(-180deg);
        transform: rotate(-180deg);
}
}
.slide {
overflow: hidden;
position: absolute;
left: 50%;
top: 50%;
width: 150vw;
height: 150vh;
-webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
border-radius: 7px;
-webkit-transition: -webkit-clip-path 0s 0.44s;
transition: -webkit-clip-path 0s 0.44s;
transition: clip-path 0s 0.44s;
transition: clip-path 0s 0.44s, -webkit-clip-path 0s 0.44s;
-webkit-clip-path: circle(30px at 120vw 50%);
      clip-path: circle(30px at 120vw 50%);
}
.slide.s--prev {
-webkit-clip-path: circle(30px at 30vw 50%);
      clip-path: circle(30px at 30vw 50%);
}
.slide.s--active {
z-index: 1;
-webkit-transition: -webkit-clip-path 0.77s;
transition: -webkit-clip-path 0.77s;
transition: clip-path 0.77s;
transition: clip-path 0.77s, -webkit-clip-path 0.77s;
-webkit-clip-path: circle(200vh at 120vw 50%);
      clip-path: circle(200vh at 120vw 50);
}
.slide.s--active.s--active-prev {
-webkit-clip-path: circle(200vh at 30vw 50%);
      clip-path: circle(200vh at 30vw 50%);
}
.slide:nth-child(1) .slide__inner {
background-image: url(../images/POP.jpg);
}
.slide:nth-child(2) .slide__inner {
background-image: url(../images/yleforestier1.jpg);
}
.slide:nth-child(3) .slide__inner {
background-image: url(../images/yleforestier2.jpg);
}
.slide:nth-child(4) .slide__inner {
background-image: url(../images/yleforestier3.jpg);
}
.slide:nth-child(5) .slide__inner {
background-image: url(../images/yleforestier4.jpg);
}

.slide:nth-child(6) .slide__inner {
background-image: url(../images/yleforestier5.jpg);
}

.slide:nth-child(7) .slide__inner {
background-image: url(../images/yleforestier6.jpg);
}

.slide:nth-child(8) .slide__inner {
background-image: url(../images/yleforestier7.jpg);
}

.slide:nth-child(9) .slide__inner {
background-image: url(../images/yleforestier8.jpg);
}

.slide:nth-child(10) .slide__inner {
background-image: url(../images/yleforestier9.jpg);
}

.slide:nth-child(11) .slide__inner {
background-image: url(../images/yleforestier10.jpg);
}

.slide:nth-child(12) .slide__inner {
background-image: url(../images/yleforestier11.jpg);
}

.slide:nth-child(13) .slide__inner {
background-image: url(../images/yleforestier12.jpg);
}

.slide:nth-child(14) .slide__inner {
background-image: url(../images/yleforestier13.jpg);
}

.slide:nth-child(15) .slide__inner {
background-image: url(../images/yleforestier14.jpg);
}

.slide:nth-child(16) .slide__inner {
background-image: url(../images/yleforestier15.jpg);
}

.slide:nth-child(17) .slide__inner {
background-image: url(../images/yleforestier16.jpg);
}

.slide:nth-child(18) .slide__inner {
background-image: url(../images/yleforestier17.jpg);
}

.slide:nth-child(19) .slide__inner {
background-image: url(../images/yleforestier18.jpg);
}

.slide:nth-child(20) .slide__inner {
background-image: url(../images/yleforestier19.jpg);
}

.slide:nth-child(21) .slide__inner {
background-image: url(../images/yleforestier20.jpg);
}

.slide:nth-child(22) .slide__inner {
background-image: url(../images/yleforestier21.jpg);
}

.slide:nth-child(23) .slide__inner {
background-image: url(../images/yleforestier22.jpg);
}

.slide:nth-child(24) .slide__inner {
background-image: url(../images/yleforestier23.jpg);
}

.slide:nth-child(25) .slide__inner {
background-image: url(../images/yleforestier24.jpg);
}

.slide:nth-child(26) .slide__inner {
background-image: url(../images/yleforestier25.jpg);
}

.slide:nth-child(27) .slide__inner {
background-image: url(../images/yleforestier26.jpg);
}

.slide:nth-child(28) .slide__inner {
background-image: url(../images/yleforestier27.jpg);
}

.slide:nth-child(29) .slide__inner {
background-image: url(../images/yleforestier28.jpg);
}

.slide:nth-child(30) .slide__inner {
background-image: url(../images/yleforestier29.jpg);
}

.slide:nth-child(31) .slide__inner {
background-image: url(../images/yleforestier30.jpg);
}

.slide:nth-child(32) .slide__inner {
background-image: url(../images/yleforestier31.jpg);
}

.slide__inner {
position: absolute;
left: 50%;
top: 50%;
width: 100vw;
height: 100vh;
margin-left: -50vw;
margin-top: -50vh;
background-size: cover;
background-position: center center;
}
.slide__inner:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;

}
.slide__content {
position: absolute;
left: 5%;
top: 50%;
margin-left: -30px;
margin-top: 48px;
max-width: 480px;
color: #9CD3D8;
}
.slide__heading {
margin-top: 14.77vh;
margin-bottom: 0px;
margin-left: 15px;
font-size: 44px;
}
.slide__text {
font-size: 22px;
margin-left: 15px;
}
.slide__text a {
   text-decoration: none;

color: #ff501f;
}
section{
      border: 5px solid black;
      width: 100vw;
      height: 25vh;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: flex-start;
      position: absolute;
      bottom: -150px;
      background-color: black;
      z-index: 5;
      margin: 0;
}
section p{
      color:white;
}
section a{
      text-decoration: none;
      color:black;
}
section a strong{
      color:#ff503f;
}
blockquote{
      color:white;
      font-size:14px;
}