body{
  background-image: url();
  background-repeat: no-repeat;
  background-size: cover;
margin:0;
padding:0;
background: #000;
text-decoration: none;

}
a{text-decoration:none;
color:white;}

.slidershow{
  width: 700px;
  height: 400px;
  overflow: hidden;
}

.middle{
  position: absolute;
  top: 50%
  left:50%;
  transition: translate(-50%, -50%);
}

.navigation{
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.bar{
  width: 80px;;
  height: 10px;
  border: 2px solid #fff;
  margin: 6px;
  cursor: pointer;
transition: 0.4s;
}

.bar:hover{
  background: #fff;
}

input[name="r"]{
  position: absolute;
  visibility: hidden;
}

.slides{
  width: 500%;
  height: 100%;
  display: flex;

}

.slide{
  width: 20%;
  transition:.6s;
}

.slide img{
  width:100%;
  height:100%;
}

#r1:checked ~ .s1{
  margin-left: 0;
}
#r2:checked ~ .s1{
  margin-left: -20%;
}
#r3:checked ~ .s1{
  margin-left: -40%;
}


.h1{
  color: white;
  font-size: 400%;
  width:60%;
  font-size: 40px;
  margin: 0 auto;

font-family: ta-rb, sans-serif;
text-align:center;
position: fixed;
z-index: +2;


}



#intro{
  padding: 120px;
  position: fixed;

  top:20%;
  color: blue;
  clip-path: polygon(19% 0, 55% 0, 100% 12%, 100% 51%, 0 51%, 0 10%);
  opacity: 80%;
  z-index: +1;
  width:30%;

  height:1000px;
      font-size: 100%;
      margin: 0 auto;
      line-height: 140%;
      font-family:Courier;
  text-align: justify;
}

.ui-menu { width: 200px;
color: white;

position: fixed;
right: 1%;
top:20%;
z-index: 100;
font-family: ta-rb, sans-serif;
line-height: 20px;
}