body {font-family:'Montserrat', Arial; width:100vw; padding:0; margin:0; background:#111; color:#DDD; font-size:.9em}
.wrapper {
    width:100%; max-width: 800px; min-height:600px; margin:calc(50vh - 300px) auto 0; padding:0; overflow:hidden; border-radius:20px; background:#222; 
    /* box-shadow:0 0 10px yellow, 0 0 40px #ffa62a, 0 0 150px #ffdb0070, 0 0 1050px #ffdb0030; */
}

.wrapper img {width:100%;}
.wrapper > *:not(img) { padding: 0 20px}
.hidden {display:block; visibility: hidden; height:0; width:0; overflow: hidden; padding:0; margin:0}
a, a:active, a:visited {text-decoration: none; color:inherit}
.big {font-size: 1.5em;}
.bold {font-weight: 700;}
.white {color:#fff !important;}
.countdown {margin: 15px 0;}
.share > * {vertical-align: middle;}
.animateBackdrop {animation: animateBackdrop 3s linear 0s infinite alternate}

@keyframes animateBackdrop {
  from {box-shadow:0 0 10px yellow, 0 0 40px #ffa62a, 0 0 150px #ffdb0070, 0 0 1050px #ffdb0030}
  to {box-shadow:0 0 2px yellow, 0 0 10px #ffa62a, 0 0 30px #ffdb0070, 0 0 1050px #ffdb0000}
}

.icon {width:30px; height:30px; display: inline-block; background:url(../images/social_media_icons.svg); background-size: 250px; background-position: -10px -10px; border-radius: 40px; margin:0 5px; cursor: pointer; box-shadow: 0 0 0 2px #fff4;}
    .icon > * {visibility: hidden; width:0; display:block; overflow: hidden; height:0;}
    .icon.ig {background-position: -10px -10px;}
    .icon.fb {background-position: -58px -10px;}
    .icon.tel {background-position: -106px -10px;}
    .icon.wa {background-position: -154px -10px;}
    .icon.yt {background-position: -202px -10px;}
    .icon.url {background-position: -10px -58px;}

/* From Uiverse.io by elijahgummer */ 
.golden-button {
  touch-action: manipulation;
  display: inline-block;
  outline: none;
  font-family: inherit;
  font-size: 1em;
  font-weight:700;
  box-sizing: border-box;
  border: none;
  border-radius: 25em;
  height: 3.3em;
  line-height: 2.5em;
  margin-bottom:8px;
  text-transform: uppercase;
  padding: 0 3em;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(110, 80, 20, 0.4),
    inset 0 -2px 5px 1px rgba(139, 66, 8, 1),
    inset 0 -1px 1px 3px rgba(250, 227, 133, 1);
  /* background-image: linear-gradient(
    160deg,
    #a54e07,
    #b47e11,
    #fef1a2,
    #bc881b,
    #a54e07
  );
  border: 1px solid #a55d07; */
  background-image: linear-gradient(#ffffff 0%, #b47e11 50%, #bc881b 55%, #fef1a2 86%, #ffd2ad);
  border: 4px solid #7742037d /* #a55d0770 */;
  color: #000C/*rgb(120, 50, 5)*/ !important;
  text-shadow: 2px 2px 2px rgba(250, 227, 133, 1), -2px -2px 2px rgba(250, 227, 133, 1);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  background-size: 100% 100%;
  background-position: center;
}

.golden-button:focus,
.golden-button:hover {
  background-size: 150% 150%;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23),
    inset 0 -2px 5px 1px #b17d10, inset 0 -1px 1px 3px rgba(250, 227, 133, 1), 
    0 0 15px rgba(250, 227, 133, 1);
  /* border: 1px solid rgba(165, 93, 7, 0.6); */
  /* color: rgba(120, 50, 5, 0.8); */
  color:#000C !important;
  text-shadow: 2px 2px 2px rgba(250, 227, 133, 1), -2px -2px 2px rgba(250, 227, 133, 1), 0 0 6px #fff6;
  /* font-size:1.2em; */
}

.golden-button:active {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(110, 80, 20, 0.4),
    inset 0 -2px 5px 1px #b17d10, inset 0 -1px 1px 3px rgba(250, 227, 133, 1);
}

@media (max-width: 800px) {
    .wrapper {margin-left:10px; margin-right: 10px; width: calc(100vw - 20px);}
}

@media (max-height: 600px) {
    .wrapper {margin-top:10px; margin-bottom: 10px; width: calc(100vw - 20px);}
}