html { background-color: #000000; }
body { margin: 0px; overflow: hidden;}

button { height: 30px; width: 50px; margin: 10px; border: 0px; background-color: #195b1b; }

#container { position: absolute; width: 100%; height: 100%; display: flex; justify-content: space-evenly; align-items: center; }

.arrow { width: 100px; height: 153px; cursor: pointer; background-position: center; background-repeat: no-repeat; background-size: cover; }
.arrowcontainer { width: 100px; height: 153px; margin-left: 15px; margin-right: 15px; }

#prev { background-image: url(images/left.png); display: none; }
#prev:hover { background-image: url(images/leftt.png); }
#next { background-image: url(images/right.png); }
#next:hover { background-image: url(images/rightt.png); }

#stage { position: relative; margin-bottom: 20px; margin-left: 20px; margin-right: 20px; }

.slide { display: none; width: 100%; }

#info { display: none; background-color: rgba(0,0,0,0.7); position: absolute; top: 0px; left: 0px; }
#info img {  width: 100%; }


@media only screen and (max-width: 1700px) {
  #stage { width: 1000px; }
  .arrow { width: 80px; height: 122px; }
  .arrowcontainer { width: 80px; height: 122px; }
}

@media only screen and (max-width: 1500px) {
  #stage { width: 900px; }
  .arrow { width: 60px; height: 92px; }
  .arrowcontainer { width: 60px; height: 92px; }
}

@media only screen and (max-width: 1300px) {
  #stage { width: 800px; }
}

@media only screen and (max-width: 1200px) {
  .arrowcontainer { margin-left: 40px; margin-right: 40px; }
}