body{
  height: 100vh;
  width: 100vw;
}

.ol-container{
  display: inline-block;
  height: 1080px;
  width: 1920px;
  background-color: transparent;
  transition: background-color 0.3s 1s;
  transform-origin: left top;
}


/*background-color: rgb(29, 65, 94);*/

.loading-screen{
  display: inline-block;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgb(29, 65, 94);
  transform: translate(0, 0);
  color: #f0f0f0;
  z-index: 100;
}
/*Loading screen hidden if the page loaded through a forced update (on the fly)*/
.update-forced{
  display: none !important;
}
.overlay-loaded.loading-screen{
  background-color: rgb(52, 107, 73);
  transform: translate(0, 100vh);
  transition: background-color 0.3s, transform 0.3s 1s;
}
.overlay-error.loading-screen{
  background-color: rgb(184, 63, 63);
  transition: background-color 0.3s;
}

.loading-screen div{
  display: inline-block;
  height: auto;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 0;

  transform: translate(0%, -50%);
}
.loading-screen p{
  text-align: center;
}
.loading-text{
  font-size: 22px;
}
.status-container{
  font-size: 16px;
}


.ad-container{
  display: grid;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;

  grid-template-columns: 100%;
  grid-template-rows: 100%;
  grid-template-areas: 
  "parent";

  opacity: 1;
  transition: opacity 0.3s;
}
.ad-container > *{
  display: grid;
  height: auto;
  width: auto;
  max-height: 100%;
  max-width: 100%;
  grid-area: parent;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.3s;
}
.top_left{ align-items: start; justify-items:  start}
.top_center{ align-items: start; justify-items:  center}
.top_right{ align-items: start; justify-items:  end}
.bottom_left{ align-items: end; justify-items:  start}
.bottom_center{ align-items: end; justify-items:  center}
.bottom_right{ align-items: end; justify-items:  end}
/*.top_left > img, .top_left > video{
  top: 0;
  left: 0;
}
.top_center > img, .top_center > video{
  top: 0;
  left: 50%;
  transform: translate(-50%, 0%);
}
.top_right > img, .top_right > video{
  top: 0;
  right: 0;
}
.bottom_left > img, .bottom_left > video{
  bottom: 0;
  left: 0;
}
.bottom_center > img, .bottom_center > video{
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0%);
}
.bottom_right > img, .bottom_right > video{
  bottom: 0;
  right: 0;
}*/




/*Spinwheel*/
.spinwheel-container{
  --height: 1080px;
  --width: calc(var(--height) * 1.33);
  display: grid;
  height: var(--height);
  width: var(--width);
  /*background-color: red;*/
  align-items: center;
  justify-items: center;
  align-content: center;

  grid-template-columns: 100%;
  grid-template-rows: 100%;
  grid-template-areas: 
  "parent";
  opacity: 0;

  font-size: calc(calc(var(--height) / 1080) * var(--font-size-equivalent));

  /*Adjustable variables (for Interactions Framework integrations)*/
  /*Should be declared inside the  ":root" class in the "customStyles" property of a spinwheel action*/
  --delay-before-showing-preview: 0s;
  --preview-animation-duration: 3.5s;
  --items-roll-animation-delay: 0s;
  --delay-before-showing-prize: 0s;
  --font-size-equivalent: 22px;
}
.spinwheel-container *{ font-size: calc(calc(var(--height) / 1080) * var(--font-size-equivalent)); }
/*After the prize is shown we wait 4 seconds diplaying it and then we hide the spinwheel*/
/*.spinwheel-show-prize{
  animation-name: fade-out-carrousel;
  animation-duration: 0.3s;
  animation-delay: 4s;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}*/
/*if the parent position container is being shown then we also show the spinwheel*/
.fade-in .spinwheel-container{
  opacity: 1;
}
.spinwheel-permanent-elements-container{
  position: relative;
  z-index: -1;
}
.spinwheel-preview-container{
  opacity: 0;
}
.spinwheel-carrousel-container, .spinwheel-preview-container, .spinwheel-permanent-elements-container{
  grid-area: parent;
  display: grid;
  height: var(--height);
  width: var(--width);
  align-items: center;
  justify-items: center;
  align-content: center;

  grid-template-columns: 100%;
  grid-template-rows: 100%;
  grid-template-areas: 
  "parent";
}
.spinwheel-container:not(.show-spinwheel-preview) .spinwheel-preview-container,
.spinwheel-container:not(.show-spinwheel-carrousel) .spinwheel-carrousel-container,
.spinwheel-container:not(.spinwheel-item-details) .spinwheel-show-prize{
  display: none;
}
.spinwheel-show-prize .spinwheel-carrousel-container{
  animation-name: fade-out-carrousel;
  animation-duration: 0.3s;
  animation-delay: var(--delay-before-showing-prize);
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}
.spinwheel-background, .spinwheel-foreground{
  grid-area: parent;
  display: grid;
  width: var(--width);
  height: var(--width);
  align-content: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  overflow: visible;
}
.fade-in.show-spinwheel-preview .spinwheel-preview-container{
  animation-name: fade-up-in-and-fade-up-out;
  animation-duration: var(--preview-animation-duration);
  animation-delay: var(--delay-before-showing-preview);
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
}
.fade-in.show-spinwheel-carrousel .spinwheel-carrousel-container .carrousel{
  animation-name: show-spinwheel-carrousel;
  animation-duration: 0.3s;
  animation-delay: var(--items-roll-animation-delay);
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
}
.spinwheel-background{
  /*background-color: blue;*/
  filter: blur(4px);
  /*-webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 60%, rgba(0,0,0,0.7514356084230567) 65.658%, rgba(0,0,0,0) 70.71%);
  mask-image: radial-gradient(circle, rgba(0,0,0,1) 60%, rgba(0,0,0,0.7514356084230567) 65.658%, rgba(0,0,0,0) 70.71%);*/
  -webkit-mask-image: radial-gradient(circle,rgba(0,0,0,0) 35.35%, rgba(0,0,0,1) 35.35%, rgba(0,0,0,1) 60%, rgba(0,0,0,0.3) 65%, rgba(0,0,0,0) 70.71%);
  mask-image: radial-gradient(circle,rgba(0,0,0,0) 35.35%, rgba(0,0,0,1) 35.35%, rgba(0,0,0,1) 60%, rgba(0,0,0,0.3) 65%, rgba(0,0,0,0) 70.71%);
}
.spinwheel-foreground{
  /*background-color: pink;*/
  background-color: rgba(0,0,0,0.2);
  -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 35.35%, rgba(0,0,0,0) 35.35%);
  mask-image: radial-gradient(circle, rgba(0,0,0,1) 35.35%, rgba(0,0,0,0) 35.35%);
  position: relative;
}
.spinwheel-items-container{
  display: grid;
  --item-colum-width: calc(var(--width) * 0.25);
  grid-auto-columns: var(--item-colum-width);
  grid-auto-rows: max-content;
  grid-auto-flow: column;
  align-items: center;
  justify-items: center;
  column-gap: calc(var(--width) * calc(1/72));
  overflow: visible;

  --items-roll-animation-duration: 8s;
  animation: none;
  animation-duration: var(--items-roll-animation-duration);
  animation-delay: var(--items-roll-animation-delay);
  animation-fill-mode: both;
  /*animation-timing-function: cubic-bezier(0, 0, 0.2, 1);*/
  animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
}
.fade-in.show-spinwheel-carrousel .spinwheel-items-container{
  animation-name: spinwheel-items-roll;
  /*--animation-translate-1-x: calc(var(--width)*0.375);*/
  --skip-n-items: 10;
  --rolled-items: calc(34 - var(--skip-n-items));
  --translate-x-start-skip-n-items: translate(calc(calc(var(--width)*0.375) - calc(var(--width)*calc(calc(19*var(--skip-n-items))/72))), 0px);
  --animation-translate-1-x: calc(calc(var(--width)*0.375) - calc(var(--width)*calc(calc(19*var(--skip-n-items))/72)));
  --animation-translate-1-y: 0%;
  --animation-translate-2-x: calc(-100% + calc(var(--width) * 1.15));
  --animation-translate-2-y: 0%;
}
.spinwheel-item{
  display: grid;
  background-image: url("../img/p250-inferno-model.png");
  background-size: contain;
  background-position: center center;
  --item-color: rgb(64, 93, 225);
  --background-color: rgb(51, 74, 180, 0.8);/*The item color rgb values multiplied by 0.8*/
  box-shadow: inset 0 calc(var(--height) * -0.012) var(--item-color);
  border: calc(var(--height) * 0.001) solid rgba(0,0,0,0.5);
  border-radius: calc(var(--height) * 0.004);
  box-sizing: border-box;
}
.fade-in.show-spinwheel-carrousel .spinwheel-item{
  animation-name: none;
  animation-delay: var(--items-roll-animation-delay);
  animation-duration: calc(var(--items-roll-animation-duration) / var(--rolled-items));
  animation-iteration-count: calc(var(--rolled-items) + 1);
  animation-fill-mode: both;
}
.spinwheel-item img{
  display: inline-block;
  height: 100%;
  width: 100%;
  object-fit: contain;
  object-position: center center;
}
.spinwheel-background .spinwheel-item{
  width: calc(var(--item-colum-width) * 0.95); /*equivalent to 95%*/
  height: calc(var(--item-colum-width) * 0.653125); /*equivalent to doing a height: auto; + aspect-ratio: 32 / 22;*/
  background: linear-gradient(0deg, var(--background-color) 5%, rgba(111,111,111,0.7) 40%);
}
.spinwheel-foreground .spinwheel-item{
  width: var(--item-colum-width);/* equivalent to 100% */
  height: calc(var(--item-colum-width) * 0.75); /*equivalent to doing a height: auto; + aspect-ratio: 36 / 27;*/
  background: linear-gradient(0deg, var(--background-color) 5%, rgba(111,111,111,0.8) 40%);
}
.spinwheel-selection-line{
  grid-area: parent;
  width: calc(var(--height) * 0.004);
  height: calc(var(--width)*0.187);
  background-color: rgb(255, 255, 0, 0.7);
  box-shadow: 0px 0px calc(var(--height) * 0.004) rgba(0,0,0,0.5);

  justify-self: center;
  align-self: center;
  position: relative;
  z-index: 3;

  opacity: 0;
  transition: opacity 0.3s linear 1s;
}
.fade-in .spinwheel-selection-line{
  opacity: 1;
}
.spinwheel-header, .spinwheel-footer{
  grid-area: parent;
  display: grid;
  width: 100%;
  height: auto;
  grid-template-columns: 100%;
  grid-template-rows: auto;
  grid-auto-flow: row;
  align-content: start;
  align-self: start;
  justify-items: center;
  margin: calc(var(--height) * 0.0416) 0px;
  opacity: 0;
}
.fade-in.show-spinwheel-carrousel .spinwheel-header, .fade-in.show-spinwheel-carrousel .spinwheel-footer{
  animation-name: show-spinwheel-header;
  animation-delay: var(--items-roll-animation-delay);
  animation-duration: 0.3s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.spinwheel-footer{
  align-self: end;
  align-content: end;
}
.spinwheel-header p, .spinwheel-footer  p{
  width: max-content;
  text-align: center;
  color: #CBCBCB;
  --outline-color: rgba(0,0,0,0.9);
  text-shadow: 0px 0px 10px rgba(0,0,0,0.5), 1px 0px var(--outline-color), -1px 0px var(--outline-color), 0px 1px var(--outline-color), 0px -1px var(--outline-color);
  overflow: visible;
}
.spinwheel-header .title, .spinwheel-footer .title{
  font-family: 'Rajdhani', sans-serif;
  --font-size-equivalent: 54;
  font-size: calc(calc(var(--height) / 1080) * var(--font-size-equivalent));
  font-weight: 600;
}
.spinwheel-header .subtitle, .spinwheel-footer .subtitle{
  font-family: 'Public Sans', sans-serif;
  --font-size-equivalent: 24;
  font-size: calc(calc(var(--height) / 1080) * var(--font-size-equivalent));
  padding-top: 0px;
  font-weight: 400;
}


.spinwheel-item-details{
  display: none;
  grid-area: parent;
  height: 100%;
  width: 100%;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  grid-template-areas: 
  "parent";
  opacity: 0;
  align-items: center;
  justify-items: center;
  --animation-name: fade-in-and-out;
  --animation-direction: alternate;
}
.spinwheel-show-prize .spinwheel-item-details{
  grid-area: parent;
  display: grid;
  height: 100%;
  width: 100%;
  animation-name: var(--animation-name);
  animation-direction: var(--animation-direction);
  animation-duration: 7s;
  animation-delay: var(--delay-before-showing-prize);
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}
.detailed-item-color-line{
  margin-top: calc(var(--height) * 0.008);
  height: calc(var(--height) * 0.009);
  width: calc(100% - calc(var(--height) * 0.01));
  background-color: var(--item-color);
  box-shadow: 0px 0px calc(var(--height) * 0.005) rgba(0,0,0,0.4);
  border-radius:  calc(var(--height) * 0.0045);
  justify-self: center;
}
.item-details-img{
  grid-area: parent;
  display: grid;
  box-sizing: border-box;
  /*No longer in use to support older viewports
  aspect-ratio: 1 / 1;
  */
  width: calc(var(--width) / 2);
  max-width: calc(var(--width) / 2);
  height: calc(var(--width) / 2);
  border-radius: 50%;
  background-color: rgba(0,0,0,0.2);
  align-items: center;
  justify-items: center;
  overflow: visible;
}
.item-details-img img{
  display: inline-block;
  height: 100%;
  width: 100%;
  object-fit: contain;
}

@keyframes spinwheel-items-roll{
  from {transform: translate(var(--animation-translate-1-x), var(--animation-translate-1-y));}
  to {transform: translate(var(--animation-translate-2-x), var(--animation-translate-2-y));}
}
@keyframes show-spinwheel-header{
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1)
  }
}
@keyframes show-spinwheel-carrousel{
  from {
    opacity: 0.5;
    transform: scale(1, 0);
  }
  to {
    opacity: 1;
    transform: scale(1, 1);
  }
}
@keyframes fade-out-carrousel{
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.2);
  }
}
@keyframes fade-in-and-out{
  0%, 100% {
    opacity: 0;
    transform: scale(1.2);
  }
  7%, 93% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fade-up-in-and-fade-up-out{
  0% {
    opacity: 0;
    transform: translate(0%, 10%);
  }
  7%, 90% {
    opacity: 1;
    transform: translate(0%, 0%);
  }
  97%, 100% {
    opacity: 0;
    transform: translate(0%, -10%);
  }
}
@keyframes fade-up-in{
  0% {
    opacity: 0;
    transform: translate(0%, 10%);
  }
  100% {
    opacity: 1;
    transform: translate(0%, 0%);
  }
}






/*Aspect ratio message*/
.aspect-ratio-message{
  display: grid;
  height: 100vh;
  width: 100vw;
  align-content: center;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #ff0000;
  color: #ffffff;
  text-align: center;
  z-index: 9999;
}
.aspect-ratio-message p{
  text-align: center;
}
.aspect-ratio-message p:nth-child(1){
  font-size: 32px;
  font-weight: 600;
}
.aspect-ratio-message p:nth-child(2){
  font-size: 28px;
  font-weight: 500;
}