/* ------- place box colors here ------- */

:root {
  --boxCol: #ffd300;
  --ribbonCol: #ff0000;
}

/* --------------------- */

.exp_27 {
  position: fixed;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: -1000px;
  right: -1000px;
  margin: 0 auto;
  /* overflow: hidden; */
  z-index: 9999999;
}

.expcn_27 {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  perspective: 600px;
}

.col_27 {
  position: absolute;
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  display: none;
}

.clicker_27, .clickervid_27 {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  top: 0;
  left: -500px;
  right: -500px;
  margin: 0 auto;

  cursor: pointer;
}

/* =============================================================== */

/* =============================================================== */

.clbtn_27 {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 1%;
  right: 2%;

  background-image: url('https://dsp-media.eskimi.com/upload/rm/upload/65f996e17c46c/Lays_Gift_TO_Prod_v4/assets/assets/closeBtn.png');
  background-size: cover;

  cursor: pointer;
}

/* =============================================================== */

:root {
  --holderWidth: 320px;
  --holderHeight: 450px;
}

.giftWrapper_27 {
  position: absolute;
  width: var(--holderWidth);
  height: var(--holderHeight);
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 0;
  /* transform: translateY(-50%); */
  cursor: pointer;
  transform-origin: 50% 100%;
}

.giftcn_27 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  left: 0;
  right: 0;
  margin: 0 auto;
  width: 50%;
  height: 50%;

  perspective: var(--holderHeight);
}

.rotate_container_27 {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  transform-style: preserve-3d;
}

.bottom_27,
.front_27,
.left_27,
.back_27,
.right_27 {
  background-color: var(--boxCol);
  border: 1px solid rgba(0, 0, 0, 0.2);
  height: calc(var(--holderHeight) / 2);
  left: 0;
  position: absolute;
  top: 0;
  width: calc(var(--holderWidth) / 2);
}

.bottom_27 {
  transform: translateY(
      calc(50% + (var(--holderHeight) - var(--holderWidth)) / 2)
    )
    rotateX(90deg);
  height: calc(var(--holderWidth) / 2);
}

.front_27,
.left_27,
.back_27,
.right_27 {
  /* transition: transform .5s; */
  transform-origin: bottom;
  transform-style: preserve-3d;
}

.front_27::after,
.left_27::after,
.back_27::after,
.right_27::after,
.lid-top_27::after,
.lid-front_27::after,
.lid-left_27::after,
.lid-back_27::after,
.lid-right_27::after {
  background-color: var(--ribbonCol);
  content: "";
  height: 100%;
  left: calc(50% - 10px);
  position: absolute;
  transform: translateZ(1px);
  width: 20px;
}

.lid-top_27::before {
  background-color: var(--ribbonCol);
  content: "";
  height: 20px;
  left: 0;
  position: absolute;
  top: calc(50% - 10px);
  transform: translateZ(0.5px);
  width: 100%;
}

.left_27 {
  transform: translateX(calc(var(--holderWidth) / -4)) rotateY(-90deg);
}
.back_27 {
  transform: translateZ(calc(var(--holderWidth) / -4)) rotateY(180deg)
    rotateX(0);
}
.right_27 {
  transform: translateX(calc(var(--holderWidth) / 4)) rotateY(90deg);
}
.front_27 {
  transform: translateZ(calc(var(--holderWidth) / 4));
}

.lid-top_27,
.lid-left_27,
.lid-back_27,
.lid-right_27,
.lid-front_27 {
  background-color: var(--boxCol);
  border: 1px solid rgba(0, 0, 0, 0.2);
  left: -5px;
  opacity: 1;
  position: absolute;
  top: 0;
  width: calc(100% + 8px);

  backface-visibility: visible;
}

.lid-top_27 {
  height: calc(var(--holderWidth) / 2 + 10px);
  top: -5px;
  transform: translateY(-50%) rotateX(90deg);
  transform-style: preserve-3d;
}

.lid-left_27,
.lid-back_27,
.lid-right_27,
.lid-front_27 {
  height: 40px;
  top: -5px;
  transform-style: preserve-3d;
}

.lid-left_27 {
  transform: translateX(calc(var(--holderWidth) / -4 - 5px)) rotateY(-90deg);
}
.lid-back_27 {
  transform: translateZ(calc(var(--holderWidth) / -4 - 5px)) rotateY(180deg);
}
.lid-right_27 {
  transform: translateX(calc(var(--holderWidth) / 4 + 5px)) rotateY(90deg);
}
.lid-front_27 {
  transform: translateZ(calc(var(--holderWidth) / 4 + 5px));
}

.lid_27 {
  transform: translate3d(0, 0, 0);
  transform-style: preserve-3d;
}

/* =============================================================== */

.exp_27 {
  width: var(--holderWidth);
  height: calc(var(--holderHeight) - 130px);
}

.icon_27,
.prod_27,
.logosmall_27 {
  position: absolute;
  width: var(--holderWidth);
  height: var(--holderHeight);
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.logosmall_27 {
  background-image: url('https://dsp-media.eskimi.com/upload/rm/upload/65f996e17c46c/Lays_Gift_TO_Prod_v4/assets/assets/logosmall.png');
  transform-origin: 50% 0;
  top: -10%;
  pointer-events: none;
}

.icon_27 {
  background-image: url('https://dsp-media.eskimi.com/upload/rm/upload/65f996e17c46c/Lays_Gift_TO_Prod_v4/assets/assets/icon.png');
  transform-origin: 50% 95%;
  background-size: contain;
  background-position: 50% 100%;
}

.prod_27 {
  background-image: url('https://dsp-media.eskimi.com/upload/rm/upload/65f996e17c46c/Lays_Gift_TO_Prod_v4/assets/assets/prod.png');
  background-position: 50% 100%;
  background-repeat: no-repeat;
  transform-origin: 50% 95%;
  background-size: contain;
}

.particles_27,
.bgb_27,
.bgp_27,
.logo_27,
.copy_27,
.cta_27 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: -1000px;
  right: -1000px;
  margin: 0 auto;
  background-position: 50% 50%;
  background-size: contain;
  pointer-events: none;
  background-repeat: no-repeat;
}

.bgb_27 {
  background-image: url('https://dsp-media.eskimi.com/upload/rm/upload/65f996e17c46c/Lays_Gift_TO_Prod_v4/assets/assets/bgb.jpg');
  background-position: 50% 50%;
  background-size: cover;
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
}

.bgp_27 {
  background-image: url('https://dsp-media.eskimi.com/upload/rm/upload/65f996e17c46c/Lays_Gift_TO_Prod_v4/assets/assets/bgp.png');
  background-position: 50% 50%;
  background-size: contain;
  width: 1920px;
  height: 100%;
}

.bgcn_27 {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 0;

  overflow: hidden;
  /* border-radius: 50%; */
}

.vidsc_27{
  position: absolute;
  width: 1280px;
  height: 720px;
  top: 0;
  left: 0;
}

.vidcn_27{
  position: absolute;

  top: 45%;
  transform: translateY(-50%);

  width: 1280px;
  height: 720px;

  left: 0;
  right: 0;
  margin: 0 auto;
}

.buf_27{
  position: absolute;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
}

/* =============================================================== */

@media (pointer: coarse) {
  .logo_27 {
    background-image: url('https://dsp-media.eskimi.com/upload/rm/upload/65f996e17c46c/Lays_Gift_TO_Prod_v4/assets/assets/logo_mob.png');

  }

  .copy_27 {
    background-image: url('https://dsp-media.eskimi.com/upload/rm/upload/65f996e17c46c/Lays_Gift_TO_Prod_v4/assets/assets/copy_mob.png');
  }

  .cta_27 {
    background-image: url('https://dsp-media.eskimi.com/upload/rm/upload/65f996e17c46c/Lays_Gift_TO_Prod_v4/assets/assets/cta_mob.png');
  }



  .snd_27{
    position: absolute;
    width: 70px;
    height: 59px;
    top: 5%;

    right: 2%;
    margin: 0 auto;
    
    background-size: cover;
    background-position: 0 0;
    background-repeat: no-repeat;

    background-image: url('https://dsp-media.eskimi.com/upload/rm/upload/65f996e17c46c/Lays_Gift_TO_Prod_v4/assets/assets/snd.png');
    cursor: pointer;

    transform: scale(2);
}

}

@media (pointer: coarse) and (max-width: 450px) {
}

@media (pointer: coarse) and (min-width: 450px) {
}

@media (pointer: fine), (pointer: none) {

  .logo_27 {
    background-image: url('https://dsp-media.eskimi.com/upload/rm/upload/65f996e17c46c/Lays_Gift_TO_Prod_v4/assets/assets/logo.png');
    background-position: 50% 30%;
  }

  .copy_27 {
    background-image: url('https://dsp-media.eskimi.com/upload/rm/upload/65f996e17c46c/Lays_Gift_TO_Prod_v4/assets/assets/copy.png');
    background-position: 50% 80%;

  }

  .cta_27 {
    background-image: url('https://dsp-media.eskimi.com/upload/rm/upload/65f996e17c46c/Lays_Gift_TO_Prod_v4/assets/assets/cta.png');
    background-position: 50% 80%;
  }



  .snd_27{
    position: absolute;
    width: 70px;
    height: 59px;
    top: 10%;

    right: 2%;
    margin: 0 auto;
    
    background-size: cover;
    background-position: 0 0;
    background-repeat: no-repeat;

    background-image: url('https://dsp-media.eskimi.com/upload/rm/upload/65f996e17c46c/Lays_Gift_TO_Prod_v4/assets/assets/snd.png');
    cursor: pointer;

    transform: scale(1.7);
}

}

@media (pointer: fine) and (any-pointer: coarse) {
}