html,
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  border: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

}

*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

#app {
  width: 100vw;
  height: 100vh;
  /* background: #212121; */

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;

  background-image: url("/wp-content/plugins/competition-winner-announcement/images/slot_machine_background/1.jpg"), linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));
  background-blend-mode: overlay;
}

.slot-machine-section {
  max-height: 100%;
  
}

.doors {
  display: flex;
}

.door {
  /* background-image: linear-gradient(
    rgba(0, 0, 0, 0.25),
    rgba(255, 255, 255, 0),
    rgba(0, 0, 0, 0.25)), url("/wp-content/plugins/competition-winner-announcement/images/slot_machine_background/2.jpg") ;
  background-size:cover; */

  box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.4) inset;

  width: 250px;
  height: 400px;
  overflow: hidden;

  border-radius: 1ex;
  margin: 1ch;

  border: #ffffff solid 7px;
}

.boxes {
  transform: translateY(0);
  transition: transform 1s ease-in-out;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 7rem;
  /* background-image: linear-gradient(
    rgba(0, 0, 0, 0.25),
    rgba(255, 255, 255, 0),
    rgba(0, 0, 0, 0.25)
  );
  background-size: 10% 100%; */
}

.buttons {
  margin: 4rem 0 2rem 0;
}

button {
  cursor: pointer;

  width: 200px;
  height: 50px;

  font-size: 1.2rem;
  text-transform: uppercase;

  margin: 0 0.2rem 0 0.2rem;

  border: none;
  border-radius: 5px !important;
  background-color: #6a83e0;
  color: white;
  font-weight: 600;
  text-transform: uppercase !important;
}

button:hover {
  background-color: #5a71c7;
}

.info {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
}

.logo-section {
  display: flex;
  justify-content: center;
}

.logo-section img {
  width: 200px;
  margin-bottom: 70px;
}

.image-container img {
  height: 100px;
  padding: 10px;
}

/* Infinite Sliding Carousel Start */

.slider {
  /* background: white; */
  /* box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125); */
  height: 100px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 90%;
  margin-top: 50px;
  margin-bottom: 0;
}

.slider::before,
.slider::after {
  /* background: linear-gradient(
    to right,
    rgb(33 33 33) 0%,
    rgba(255, 255, 255, 0) 100%
  ); */
  content: "";
  height: 100px;
  position: absolute;
  width: 250px;
  z-index: 2;
}

.slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}

.slider::before {
  left: 0;
  top: 0;
}

.slide-track {
  animation: scroll 45s linear infinite;
  display: flex;
  width: calc(1400px * 14);
}

.slide {
  height: 100px;
  width: 200px;
  margin: 2px;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-1400px * 7));
  }
}

/* Infinite Sliding Carousel End */

.door-1,
.door-3 {
  background-color: #ff8300;
}

.door-2 {
  background-color: #e0c769;
}

.button-logos {
  height: 100px;
  margin:30px;
}

.buttons_logos{
  display: flex;
  justify-content: center;
  align-items: center;
}