@import url('animations.css');

/* Start Vouchr Configuration - CSS Variables */

:root {
  --logo-image: url('content/logo.svg');

  /* Uncomment the line below to change the background of the header */
  /* --header-background-color: #f2f4f6; */

  /* Uncomment the lines below to add a customizable border to the media items displayed */
  /* --gift-item-border: solid 4px white; */
  /* --gift-item-border-radius: 16px; */
  /* --gift-item-box-shadow:  0 2px 4px 0 rgba(0, 0, 0, 0.26); */

  /* Uncomment the two lines below to add a customizable border to the badge icon 
    /* --badge-border: solid 4px white; */
  /* --badge-border-radius: 16px; */

  /* Start Animation Customization Variables */
  /* Uncomment the two lines for each type of animation to enable them */

  /* Slide in */
  /* --gift-item-animation-odd: slide-in-bottom-odd 1s ease-out forwards;
    --gift-item-animation-even: slide-in-bottom-even 1s ease-out forwards; */

  /* Slide in blurred */
  /* --gift-item-animation-odd: slide-in-blurred-bottom 1s ease-out forwards;
    --gift-item-animation-even: slide-in-blurred-bottom 1s ease-out forwards; */

  /* Roll in blurred */
  /* --gift-item-animation-odd: roll-in-blurred-bottom 1s ease-out forwards;
    --gift-item-animation-even: roll-in-blurred-bottom 1s ease-out forwards; */

  /* Flip in */
  /* --gift-item-animation-odd: flip-in-hor-top 1s ease-out forwards;
    --gift-item-animation-even: flip-in-hor-top 1s ease-out forwards; */

  /* Jello */
  /* --gift-item-animation-odd: jello-vertical 1.5s ease-in forwards;
    --gift-item-animation-even: jello-vertical 1.5s ease-in forwards; */

  /* Jello blurred */
  --gift-item-animation-odd: jello-vertical-blurred 1.5s ease-in forwards;
  --gift-item-animation-even: jello-vertical-blurred 1.5s ease-in forwards;

  /* End Animation Customization Variables */
}

/* End Vouchr Configuration - CSS Variables */

@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }

  .header-right {
    float: none;
  }
}

.vouchrWrapperClosed {
  width: 100%;
}

.vouchrWrapperClosed > img {
  width: 100%;
  display: block;
}

.Envelope_Container {
  position: relative;
  margin: 0% 10%;
  bottom: 3.8px;
}

.Envelope_Container svg {
  height: 195px;
}

.Envelope_Shadow {
  border-radius: 15px;
  box-shadow: 0 0px 8px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.Envelope_TopOpen {
  z-index: -2;
  width: 100%;
  position: relative;
  top: 10px;
  border-radius: 15px;
  filter: drop-shadow(0 0px 4px rgba(0, 0, 0, 0.2))
    drop-shadow(0 6px 20px rgba(0, 0, 0, 0.19));
}

.Envelope_TopClosedShadow {
  top: 4px;
  width: 100%;
  position: absolute;
  bottom: 100%;
  opacity: 1;
  z-index: 20;
}

.Envelope_InsideShadow {
  z-index: -1;
  width: 100%;
  position: absolute;
  top: -1px;
  opacity: 1;
}

.Envelope_BottomShadow {
  width: 100%;
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 19;
  opacity: 1;
  border-radius: 15px;
}

.Placeholder_Shadow {
  height: 195px;
  width: 80%;
  position: absolute;
  bottom: 0;
  z-index: -2;
}

.Envelope_Base {
  width: 100%;
  z-index: 1;
  margin-bottom: -4px;
  opacity: 1;
  border-radius: 15px;
  height: 0;
  padding-top: 75%;
  background-size: cover;
  background-position: center;
}

.Envelope_Back {
  position: absolute;
  bottom: 0;
  background-color: #d8e2e8;
  border-radius: 15px;
  z-index: 0;
  height: 195px;
  width: 80%;
}

@media (min-width: 768px) {
  .Envelope_Back,
  .Placeholder_Shadow,
  .Envelope_Container svg {
    height: 230px;
  }
}