body {
  color: var(--fontcol);
  background: var(--bgcol);
  background-image: none;
  font-family: var(--fontfam);
  background-image: var(--bggrad);
}

.shadedarea {
  background-color: var(--altbgcol);
  color: var(--altfontcol);
  border-radius: 0px;
  border: 3px solid var(--altbordercol);
  box-shadow:var(--altshadow);

}
.shadedarea2{
  background-color: rgba(255,255,255,0.5);
  color: var(--altfontcol);
  border-radius: 0px;
  border: 3px solid var(--altbordercol);
  box-shadow:var(--altshadow);

}

.fill {
      overflow-x: hidden;
}


input[type="submit"],
input[type="reset"]  {

  background-color: var(--buttoncol);
  color: var(--buttonfont);
  border-radius: 0px;
  border: 3px solid var(--buttonbordercol);
  cursor: pointer;
  font-family: var(--fontfam);
    box-shadow:var(--buttonshadow);
    font-weight: 900;
}


.logoimg {
  position: relative !IMPORTANT;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  max-width: 500px;
  display: block;
  max-height: unset !important;
  padding-right: 0px !important;

}
.checkarea2 {

  text-align: left;
}

/*info pop over*/
.tooltip-container {
  position: relative;
  display: inline-block;
  color: #ffffff;
  cursor: help;
font-size: 30px;
  margin-right: -30px;
  width: 30px;
}

/* The actual pop-up box (hidden by default) */
.tooltip-box {
  visibility: hidden;
  opacity: 0;
  width: 200px;
  background-color: #333333;
  color: #ffffff;
  text-align: center;
  border-radius: 4px;
  padding: 8px;
  font-size: 12px;
  font-weight: normal;
  line-height: 1.4;
  
  /* Absolute placement above the icon */
  position: absolute;
  z-index: 10;
  bottom: 125%; 
  /* Smooth fade-in animation */
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
  left: -200px;
}

/* CSS Triangle pointer at the bottom of the box */
.tooltip-box::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333333 transparent transparent transparent;
}

/* Reveal tooltip on icon hover OR keyboard focus (Accessibility) */
.tooltip-container:hover .tooltip-box,
.tooltip-container:focus .tooltip-box {
  visibility: visible;
  opacity: 1;
}
/*end info pop*/

.logoarea {
  height:15dvh;
  max-height: 150px;
}

.logo {
    height: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index: 0;
    content: var(--logo);
    width: auto;

}
.toparea {

  min-height: 80dvh;
background: #2A7B9B;
background: linear-gradient(rgba(185, 18, 26, 1) 45% , rgba(0, 100, 255, 1) 55% );
}

.scalable-image {

position: absolute;
  top: 30vh;
max-width: 1080px;
  width: 80%;
  transform: translatex(-50%) scale(var(--scale, 1));
  transition: transform 0.1s ease-out;
  will-change: transform;
    }

.bottomarea {
background-color: var(--bgcol);
}
.strap {
width: 80%;
  max-width: 600px;
  position: absolute;
  top: 15%;
  margin-left: auto;
  margin-right: auto;
  left: 50%;
  transform: translateX(-50%);

}

.bgimage {
width: 90%;
  max-width: 1080px;
  margin-top: 15vh;
  
display:block;
margin-left: auto;
  margin-right: auto;

}
.para {
display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  padding-bottom: 20px;
  width: 80%;
  max-width: 450px;
}

.toptextarea {
padding: 20px 0px;
  width:90%;
  max-width: 900px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.blacktext {

  color:black;
}

.footerimg {
    max-width: 450px;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index: 0;
    content: var(--footer);
    
display: inline-block;


}

.leftbotimg {
    max-width: 33%;
    height: auto;
    display: block;
    margin-left: 0;
    z-index: 0;
    content: var(--footer1);
display: inline-block;
float: left;
  object-fit: contain;
  object-position: bottom;
}
.rightbotimg {
    max-width: 33%;
    height: auto;
    display: block;
    margin-right: 0 ;
    z-index: 0;
    content: var(--footer2);
    
display: inline-block;
float: right;
  object-fit: contain;
  object-position: bottom;
}

.pagefooterimg {
    max-width: 450px;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index: 0;
    content: var(--pagefooter);
    margin-top: -1px;
    width:90%;
}
.formfooter {

height:fit-content;
width: 95%;
max-width: 500px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
.footerimgarea {
width: 100vw;
}

.pagefooter {

  background-color: var(--footerbgcol);
  
  color: var(--footerfontcol);
height:auto;

}
.footercontainer {

  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}


.btn {
  background-color: var(--buttoncol);
  color: var(--buttonfont);
  border: 1px solid var(--buttonbordercol);
  cursor: pointer;
}

.link {
  color: var(--linkcol);
  text-decoration: none;
}

.shadedarea {
margin-top: 0px !important;
margin-bottom: 30px;
}


/* present anim*/


.present {
  height: 200px;
  left: 0;
  margin: 0 auto;
  perspective: 600px;
  position: relative;
  right: 0;
/*   top: 50%;
  transform: translateY(-50%); */
  margin-top: 90px;
  margin-bottom: 80px;
  width: 200px;
}

.name {
  font-size: 2em;
  font-weight: 100;
  position: absolute;
  text-align: center;
  top: 44%;
  transform: translate3d(0, -50%, 0) rotateY(0) rotateX(0);
  transition: transform 2.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  width: 100%;
}

.instruction {
  bottom: -70px;
  left: 0;
  opacity: 1;
  position: absolute;
  text-align: center;
  transition: opacity 0.5s;
  width: 100%;
  color: var(--footerfontcol);
}

.rotate-container {
  -webkit-animation: present-rotate 30s infinite linear;
          animation: present-rotate 30s infinite linear;
  height: 100%;
  transform: rotateY(170deg);
  transform-style: preserve-3d;
}

@-webkit-keyframes present-rotate {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(360deg);
  }
}

@keyframes present-rotate {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.bottom,
.front,
.left,
.back,
.right {
  background-color: #51348d;
  border: 2px solid rgba(0, 0, 0, 0.6);
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
}

.bottom {
  transform: translateY(50%) rotateX(90deg);
}

.front,
.left,
.back,
.right {
  transition: transform 0.5s;
  transform-origin: bottom;
  transform-style: preserve-3d;
}

.front:after,
.left:after,
.back:after,
.right:after,
.lid-top:after,
.lid-front:after,
.lid-left:after,
.lid-back:after,
.lid-right:after {
  background: linear-gradient(45deg, #d4af37 5%, #debc5b 10%, #e7c97c 30%, #efd69d 50%, #e7c97c 70%, #debc5b 80%, #d4af37 95%);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  content: "";
  height: 100%;
  left: calc(50% - 10px);
  position: absolute;
  transform: translateZ(0.1px);
  width: 20px;
}

.lid-top:before {
  background: linear-gradient(45deg, #d4af37 5%, #debc5b 10%, #e7c97c 30%, #efd69d 50%, #e7c97c 70%, #debc5b 80%, #d4af37 95%);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  content: "";
  height: 20px;
  left: 0;
  position: absolute;
  top: calc(50% - 10px);
  transform: translateZ(0.1px);
  width: 100%;
}

.left {
  transform: translateX(-50%) rotateY(-90deg);
}

.back {
  transform: translateZ(-100px) rotateY(180deg) rotateX(0);
}

.right {
  transform: translateX(50%) rotateY(90deg);
}

.front {
  transform: translateZ(100px);
}

.lid {
  -webkit-animation: lid-animation 3.5s 1s infinite;
          animation: lid-animation 3.5s 1s infinite;
  transform: translate3d(0, 0, 0);
  transform-style: preserve-3d;
  transition: transform 0.5s;
}

@-webkit-keyframes lid-animation {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0);
  }
  5% {
    transform: translate3d(0, -10px, -5px) rotateX(5deg);
  }
  10% {
    transform: translate3d(0, -10px, 5px) rotateX(-5deg);
  }
  15% {
    transform: translate3d(0, -10px, -5px) rotateX(5deg);
  }
  20% {
    transform: translate3d(0, -10px, 5px) rotateX(-5deg);
  }
  25% {
    transform: translate3d(0, -10px, -5px) rotateX(5deg);
  }
  30% {
    transform: translate3d(0, 0, 0) rotateX(0);
  }
}

@keyframes lid-animation {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0);
  }
  5% {
    transform: translate3d(0, -10px, -5px) rotateX(5deg);
  }
  10% {
    transform: translate3d(0, -10px, 5px) rotateX(-5deg);
  }
  15% {
    transform: translate3d(0, -10px, -5px) rotateX(5deg);
  }
  20% {
    transform: translate3d(0, -10px, 5px) rotateX(-5deg);
  }
  25% {
    transform: translate3d(0, -10px, -5px) rotateX(5deg);
  }
  30% {
    transform: translate3d(0, 0, 0) rotateX(0);
  }
}
.lid-top,
.lid-left,
.lid-back,
.lid-right,
.lid-front {
  background-color: #51348d;
  border: 4px solid rgba(0, 0, 0, 0.4);
  left: -5px;
  opacity: 1;
  position: absolute;
  top: 0;
  width: 210px;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
}

.lid-top {
  height: 210px;
  top: -5px;
  transform: translateY(-50%) rotateX(90deg);
  transform-style: preserve-3d;
}

.lid-left,
.lid-back,
.lid-right,
.lid-front {
  height: 40px;
  top: -5px;
  transform-style: preserve-3d;
}

.lid-left {
  transform: translateX(-50%) rotateY(-90deg);
}

.lid-back {
  transform: translateZ(-105px) rotateY(180deg);
}

.lid-right {
  transform: translateX(50%) rotateY(90deg);
}

.lid-front {
  transform: translateZ(105px);
}

.present:hover .lid {
  -webkit-animation: none;
          animation: none;
  transform: translate3d(0, -40px, -10px) rotateX(10deg);
}

.present.open .name {
  transform: translate3d(0, -50%, 10px) rotateY(1080deg) rotateX(10deg);
}
.present.open .instruction {
  opacity: 0;
}
.present.open .left {
  transform: translateX(-50%) rotateY(-90deg) rotateX(-90deg);
}
.present.open .back {
  transform: translateZ(-100px) rotateY(180deg) rotateX(-90deg);
}
.present.open .right {
  transform: translateX(50%) rotateY(90deg) rotateX(-90deg);
}
.present.open .front {
  transform: translateZ(100px) rotateX(-90deg);
}
.present.open .lid {
  -webkit-animation: none;
          animation: none;
  transform: translate3d(0, -120px, -120px) rotateX(50deg);
}
/*present anim*/
/* scratchcard*/

img{border:0;vertical-align:middle;}
.hide{
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 1s, opacity 1s linear;
  }
#title{font-size:18px;text-align:center;}
.box, .content{width:400px;height:360px;}
.box img{max-width:400px;max-height: 360px;}
.box{position:relative;overflow:hidden;margin:0 auto;}
.content{position: relative;overflow:hidden;text-align:center;background:rgba(0, 0, 0, 0.0);}
.mask{position:absolute;top:0;left:0;width:400px;height:360px;cursor: pointer;background-attachment: fixed;}
/*end scratchcard*/

/*spnner*/

.popover2{
  pointer-events: none;
    display: flex;
  justify-content: center;
  align-items: center;
  opacity:0;
  width: 100%;
  height: 100dvh;
  position: absolute;
  top: 0 ;
background-color: rgba(0,0,0, 0.6);
  
animation: fade 3s linear;


}

@keyframes fade{
    0% { 
      opacity:1;
      transform:scale(1); 
    } 

        90% { 
  opacity:1;
      transform:scale(1); 

    } 
    100% { 
  opacity:0;
      transform:scale(0); 
    } 

}



.spinner {
      width: 50%;
    max-width: 300px;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index: 0;
    content: var(--spinner);
animation: spin 1s ease-in-out infinite;

}

@-moz-keyframes spin { 
    100% { -moz-transform: rotate(720deg); } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(720deg); } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(720deg); 
        transform:rotate(720deg); 
    } 
}

/*end spinner*/





/* ===== FAQ modal window ===== */
.center {
  text-align: center;
}

.modal-window {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  color: #ffffff;
}

.modal-window:target {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.modal-window>div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.5em;
  padding-top: 20px;
  background-color: var(--altbgcol);
  border: #ffffff 5px solid;
  border-radius: 15px;
  height: 95%;
  width: 90%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
}

/* fill the modal box vertically instead of the fixed height from site.css */
.modal-window .termsx {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

.modal-close {
  color: #fff;
  line-height: 18px;
  font-size: 120%;
  position: absolute;
  right: 0;
  text-align: center;
  top: 12px;
  width: 40px;
  text-decoration: none;
  display: flow-root;
}

.modal-close:hover {
  color: grey;
}

/* Links inside the modal body. Content links generated from the Word source
   carry no class, so without this they fall back to the browser default
   (#0000EE, and purple once visited) - roughly 2:1 against this campaign's
   modal ground, effectively unreadable. Uses the campaign's own --linkcol;
   the underline is what marks them as links, since the surrounding body
   text is already the same colour. */
.modal-window .termsx a,
.modal-window .termsx a:visited {
  color: var(--linkcol, #ffffff);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.modal-window .termsx a:hover,
.modal-window .termsx a:focus-visible {
  color: var(--linkcol, #ffffff);
  text-decoration-thickness: 2px;
}

.modal-window .termsx a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Numbered steps converted from a Word list. Word sets a 0.5in indent with a
   0.25in hanging indent on this list level, so the number sits out to the
   left and wrapped lines align under the text, not under the number. Set in
   em so it scales with the modal's type. The bullet list in the same modal
   is deliberately not indented - it carries no indent in the source. */
.modal-window .termsx .numstep {
  margin-left: 3em;
  text-indent: -1.5em;
}

/* Word uses a tab stop so the text of the first line starts at the same
   0.5in as the wrapped lines, with only the number hanging back. A
   fixed-width number box reproduces that: without it the first line's text
   begins wherever "1. " happens to end, leaving wrapped lines looking
   further indented than the line above. */
.modal-window .termsx .numstep .num {
  display: inline-block;
  width: 1.5em;
  text-indent: 0;
}