.main-div {
    position: absolute;
    width: 240%;
    left: -70%;
    height: 80%;
    top: 0%;
}
.slider-div-1,.slider-div-2,.slider-div-3{
  width: 33.3333333%;
  height: 100%;
  position: relative;
  top:0;
}
.green{
  background: #DDB67D;
}
.slider-div-1{
  left:0;
}
.slider-div-2{
  left:33.333333%;
  top: -100%;
}
.slider-div-3 {
    left: 66.6666666%;
    top: -200%;
}
.slide-image3,.slide-image1,.slide-image2{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.prev-button {
    position: absolute;
    z-index: 10;
    top: 37%;
    width: 5%;
    left: 29%;
    cursor: pointer;
}
.next-button {
    position: absolute;
    z-index: 10;
    top: 37%;
    width: 5%;
    left: 66%;
    cursor: pointer;
}
.left,.right{
  opacity: 0.3;
}
.mid{
  opacity: 1;
}
.playagain, .mainmenu, .learnagain {
    width: 33.333333333%;
    height: 20%;
    top: 80%;
    position: absolute;
    font-family: comfortaa;
    font-size: 2vw;
    padding-top: 4%;
    cursor: pointer;
    color: black;
}
.playagain{
  background: #FAB455;
}
.playagain:hover{
  background: #F8901F;
  color: white;

}
 .mainmenu{
   left: 33.333333333%;
   background: #6BC399;
 }
 .mainmenu:hover{
   background: #67BC43;
   color: white;

 }
 .learnagain{
   left: 66.6666666666%;
   background: #42A4D5;
 }
 .learnagain:hover{
   background: #1475BA;
   color: white;

 }