/* 3d */

#reel-container {
  box-sizing: content-box;
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56%;
  margin: 0 0 7px 0;
}

#reel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.container {
  max-width: 1328px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
.img-holder {
  flex-grow: 1;
  margin: .5rem;
  overflow: hidden;
}

.img-holder img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition-duration: 500ms;
}

.img-holder img:hover {
  transform: translateY(-4px);
}


.img-holder2 {
  flex-grow:1;
  margin: .3rem;
  overflow: hidden;
}

.img-holder2 img {
  display: block;
  min-width: 100%;
  height: 51rem;
  object-fit: cover;
  transition-duration: 500ms;
}

.img-holder2 img:hover {
  transform: scale(1.02);
}

.img-holder3 {
  flex-grow:1;
  margin: .3rem;
  overflow: hidden;
}

.img-holder3 img {
  display: block;
  min-width: 100%;
  height: 80rem;
  object-fit: cover;
  transition-duration: 500ms;
}

.img-holder3 img:hover {
  transform: scale(1.02);
}


.img-holder4 {
  flex-grow:1;
  margin: .3rem;
  overflow: hidden;
}

.img-holder4 img {
  display: block;
  min-width: 100%;
  height: 42rem;
  object-fit: cover;
  transition-duration: 500ms;
}

.img-holder4 img:hover {
  transform: translateX(-700px) scale(2.5);
}


.img-holder5 {
  flex-grow: 1;
  margin: .5rem;
  overflow: hidden;
}

.img-holder5 img {
  display: block;
  min-width: 100%;
  height: 5rem;
  object-fit: cover;
  transition-duration: 500ms;
}

.img-holder5 img:hover {
  transform: translateX(10px);
}

.img-holder6 {
  flex-grow: 1;
  margin: .5rem;
  overflow: hidden;
}

.img-holder6 img {
  display: block;
  min-width: 100%;
  height: 45rem;
  object-fit: cover;
  transition-duration: 500ms;
}

.img-holder6 img:hover {
  transform: scale(1.08);
}

.img-holder7 {
  flex-grow:1;
  margin: .3rem;
  overflow: hidden;
}

.img-holder7 img {
  display: block;
  min-width: 100%;
  height: 80rem;
  object-fit: cover;
  transition-duration: 800ms;
}

.img-holder7 img:hover {
  transform: translateX(-150px);
}

.img-holder8 {
  flex-grow: 1;
  margin: .3rem;
  overflow: hidden;
}

.img-holder8 img {
  display: block;
  min-width: 100%;
  height: 38rem;
  object-fit: cover;
  transition-duration: 200ms;
}

.img-holder8 img:hover {
  transform: scale(1.15);
}


xmp {
  color: white;
  opacity: 50%;
  transition-duration: 200ms;
}
xmp:hover{
  opacity: 100%;
  transition-duration: 200ms;
}

.depliant{
  height: 300px;
  transition-duration: 1000ms;
  overflow: scroll;
}
.depliant:hover{
  height: 500px;
}

.info {
  font-size: 2.5em;
  margin: 2em 0 2em 0;
  padding: 8px;
  color: #eee;
}

.info2 {
  font-size: 1.5em;
  margin: 2em 0 2em 0;
  padding: 2px;
  color: #969696;
}

.small {
  font-family: monospace;
  font-size: 0.7em;
  color: var(--text-color);
}

.smallcontent {
  font-size: 1.5em;
  padding: 20px;
  color: #eee;
  text-align: left;
}


.little {
  font-size: 0.5em;
}

.littlecontent {
  font-size: 1.5em;
  padding: 20px;
  color: #eee;
  text-align: left;
}

@media screen and (max-width: 400px) {
  .none{
    display: none;
  }
  .img-holder6 img {
    display: block;
    min-width: 100%;
    height: 20rem;
    object-fit: cover;
    transition-duration: 500ms;
  }
}




@media screen and (max-width: 1280px) {
  .img-holder5 img {
    display: block;
    min-width: 100%;
    height: 8rem;
    object-fit: cover;
    transition-duration: 500ms;
  }
}
#gameopen{
  display: none;
}
@media screen and (min-height: 2040px) and (min-width: 1530px) and (max-height: 2052px) and (max-width: 1542px) {
  #gameopen{
    display: block;
  }
}