@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Eater&display=swap');
/*--- live stream widget ---*/
svg { vertical-align:bottom; }
html { overflow-y:hidden !important;}
button { opacity: 1;
  border: 0 none;
  font-family: inherit;
  font-weight: inherit;
  background: inherit;
  padding: 5px 10px;
  text-align: center;
  cursor: pointer; }

body { height:100%; min-height: -webkit-fill-available;}
html { min-height: -webkit-fill-available; }

/*--- live stream widget ---*/
svg { vertical-align:bottom; }
.ripple {
  background-color: transparent;
  width: 1px;
  height: 1px;
  border-radius: 100%;
  position:absolute;
  left:50%;
  top:50%;
  animation: ripple 3s linear infinite;
}
.ripple::before,
.ripple::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-radius: 50%;
  animation:inherit;
  animation-delay:1s;
}
.ripple::after {
  animation-delay:2s;
}
@keyframes ripple {
  0% {
    box-shadow: 0 0 0 .7rem rgba(255,255,255, 0.2);
  }
  100% {
    box-shadow: 0 0 0 16rem rgba(255,255,255, 0);
  }
}

@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

.zombieouter { width:50px; height:50px; position:absolute; left:5px; top:5px; }
.gmob { width:130px; height:84px; display:none; }
.gmobPU { width: 42px; height: 66px; position: absolute; left: -42px; top: -50px; }
.kperday { padding-bottom:20px; color:#333; text-shadow:0 1px 2px #fff; width:100%; position:absolute; left:10px; bottom:10px; opacity:0.5; font-size:3rem; pointer-events: none; z-index:1000;}
.kperday:before { content:'Distance to go:\00a0'attr(data-remain); font-size:11.4rem; position:absolute; left:0; top:-1rem;  }
.kperday[data-ab='ahead']:after { color:#0c0; content:"..the zombies are "attr(data-bym)"km behind you"; position:absolute; left:0; bottom:0; font-size:1.4rem; }
.kperday[data-ab='behind']:after { color:#f40; content:"..you're behind by "attr(data-bym)"km"; position:absolute; left:0; bottom:0; font-size:1.4rem; }
.kperday[data-ab='level']:after { color:#333; content:"..you're exactly on pace "; position:absolute; left:0; bottom:0; font-size:1.4rem; }

.zombiesreleased .gmob { display:block; }
@keyframes zanimh1 {
  100% { background-position: 0 -1186px; }
}

.ghoul1 {
  -webkit-animation: zanim1 2s steps(15) infinite;
  animation: zanimh1 2s steps(15) infinite;
  background-size: cover;
  width: 60px; height: 78px; background-image: url("https://storage.googleapis.com/ub_event_images/zombie-1horde.png");
  position:absolute; bottom:0; left:64px;
}
.east .ghoul1 { background-image: url("https://storage.googleapis.com/ub_event_images/zombie-1hordeRev.png"); }

.ghoul2 {
  -webkit-animation: zanim2 2s steps(15) infinite;
  animation: zanimh2 2s steps(15) infinite;
  background-size: cover;
  width: 60px; height: 75px; background-image: url("https://storage.googleapis.com/ub_event_images/zombie-2horde.png");
  position:absolute; bottom:0; left:2px;
}
.east .ghoul2 { background-image: url("https://storage.googleapis.com/ub_event_images/zombie-2hordeRev.png"); }

@keyframes zanimh2 {
  100% { background-position: 0 -1092px; }
}

.ghoul3 {
  -webkit-animation: zanim3 2s steps(15) infinite;
  animation: zanimh3 2s steps(15) infinite;
  background-size: cover;
  width: 60px; height: 76px; background-image: url("https://storage.googleapis.com/ub_event_images/zombie-3horde.png");
  position:absolute; bottom:0; left:17px;
  z-index:99;
}
.east .ghoul3 { background-image: url("https://storage.googleapis.com/ub_event_images/zombie-3hordeRev.png"); }
.gmobPU .ghoul3 { left: 0px; transform: scale(0.7); transform-origin: left; }

@keyframes zanimh3 {
  100% { background-position: 0 -1116px; }
}

.ghoul4 {
  -webkit-animation: zanim4 2s steps(15) infinite;
  animation: zanimh4 2s steps(15) infinite;
  background-size: cover;
  width: 60px; height: 58px; background-image: url("https://storage.googleapis.com/ub_event_images/zombie-4horde.png");
  position:absolute; bottom:0; left:10px;
}
.east .ghoul4 { background-image: url("https://storage.googleapis.com/ub_event_images/zombie-4hordeRev.png"); }

@keyframes zanimh4 {
  100% { background-position: 0 -874px; }
}

.ghoul5 {
  -webkit-animation: zanim5 2s steps(15) infinite;
  animation: zanimh5 2s steps(15) infinite;
  background-size: cover;
  width: 60px; height: 58px; background-image: url("https://storage.googleapis.com/ub_event_images/zombie-5horde.png");
  position:absolute; bottom:0; left:36px;
}
.east .ghoul5 { background-image: url("https://storage.googleapis.com/ub_event_images/zombie-5hordeRev.png"); }

@keyframes zanimh5 {
  100% { background-position: 0 -878px; }
}

.ghoul6 {
  -webkit-animation: zanim6 2s steps(15) infinite;
  animation: zanimh6 2s steps(15) infinite;
  background-size: cover;
  width: 60px; height: 64px; background-image: url("https://storage.googleapis.com/ub_event_images/zombie-6horde.png");
  position:absolute; bottom:0; left:80px;
}
.east .ghoul6 { background-image: url("https://storage.googleapis.com/ub_event_images/zombie-6hordeRev.png"); }

@keyframes zanimh6 {
  100% { background-position: 0 -944px; }
}

.zombieav1 {
  -webkit-animation: zanim1 2s steps(15) infinite;
  animation: zanim1 2s steps(15) infinite;
  background-size: cover;
  width: 30px; height: 42px; background-image: url("https://storage.googleapis.com/ub_event_images/zombie-1s.png");
  margin-left:-15px; margin-top:-21px;
}

@keyframes zanim1 {
  100% { background-position: 0 -639px; }
}

.zombieav2 {
  -webkit-animation: zanim2 2s steps(15) infinite;
  animation: zanim2 2s steps(15) infinite;
  background-size: cover;
  width: 30px; height: 40px; background-image: url("https://storage.googleapis.com/ub_event_images/zombie-2s.png");
  margin-left:-15px; margin-top:-20px;
}
@keyframes zanim2 {
  100% { background-position: 0 -624px; }
}

.zombieav3 {
  -webkit-animation: zanim3 2s steps(15) infinite;
  animation: zanim3 2s steps(15) infinite;
  background-size: cover;
  width: 30px; height: 38px; background-image: url("https://storage.googleapis.com/ub_event_images/zombie-3s.png");
  margin-left:-15px; margin-top:-19px;
}
@keyframes zanim3 {
  100% { background-position: 0 -586px; }
}

.zombieav4 {
  -webkit-animation: zanim4 2s steps(15) infinite;
  animation: zanim4 2s steps(15) infinite;
  background-size: cover;
  width: 40px; height: 37px; background-image: url("https://storage.googleapis.com/ub_event_images/zombie-4s.png");
  margin-left:-20px; margin-top:-18px;
}
@keyframes zanim4 {
  100% { background-position: 0 -583px; }
}

.zombieav5 {
  -webkit-animation: zanim5 2s steps(15) infinite;
  animation: zanim5 2s steps(15) infinite;
  background-size: cover;
  width: 40px; height: 38px; background-image: url("https://storage.googleapis.com/ub_event_images/zombie-5s.png");
  margin-left:-20px; margin-top:-19px;
}
@keyframes zanim5 {
  100% { background-position: 0 -583px; }
}

.zombieav6 {
  -webkit-animation: zanim6 2s steps(15) infinite;
  animation: zanim6 2s steps(15) infinite;
  background-size: cover;
  width: 40px; height: 41px; background-image: url("https://storage.googleapis.com/ub_event_images/zombie-6s.png");
  margin-left:-20px; margin-top:-20px;
}
@keyframes zanim6 {
  100% { background-position: 0 -629px; }
}

.mad.iszombie { background-color:#ad7; }
.iszombie .isz { position:absolute; left:50%; top:50%; }
.zombieouter .isz { margin:0 !important; }
.zombieouter { border-radius:100%;}

[data-l="50km"] .zombieouter { background:#c77b44; }
[data-l="200km"] .zombieouter { background:#eaa144; }
[data-l="100km"] .zombieouter { background:#f4d35e; }
[data-l="330km"] .zombieouter { background:#a68b37; }

#imgplaceholder { padding:10px; }
.uplImg { width:100%; height:100%; position:relative !important;}

.foundItems { width: 60px;
  height: 30px;
  bottom: 0;
  left: 60px;
  position: absolute; }
.foundItems:before, .foundItems:after { position:absolute; top:50%; margin-top:-15px; content:''; height:28px; width:30px; background-image:url("https://storage.googleapis.com/ub_event_images/searchables.png"); background-repeat:no-repeat;}

[data-fg='Y'] .foundItems:before { left:0; background-position:-30px 0; }
[data-fp='Y'] .foundItems:after { left:30px; background-position:0px 0; }
[data-fg='N'] .foundItems:before { left:0; background-position:-30px -28px; opacity:0.3;}
[data-fp='N'] .foundItems:after { left:30px; background-position:0px -28px; opacity:0.3;}
[data-go="Y"] .foundItems { display:none; }
.resultOuter .switch { z-index:4000; position:absolute; bottom:2px; left:5px; }
.resultOuter.isme { padding-bottom:40px; }
.uploadimage { padding:0 !important; }
.uploadimage  label { margin-left:0; padding: 9px 20px 11px 20px; line-height:inherit; }
.uploadimage  label:before { content: '\f093 \Aupload photo'; }
.chosenPlayer { background: #f84;}

.container {
  position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
}

.houseshake {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

.houseshake::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  border-radius: 50%;
  animation:pulsehouse 1s;
  animation-delay:0.4s;
  width:128px; height:170px;
  background-image:url(https://storage.googleapis.com/ub_event_images/hauntedhouse.png);
}

.dtg {
  font-family: Eater, sans-serif;
  font-size: 1.8rem;
  position: absolute;
  top: 108px;
  right: -190px;
  width: 190px;
  text-align: left;
  line-height: 2rem;
  color: #f40;
}

.hhouse { width:128px; height:170px; background-image:url(https://storage.googleapis.com/ub_event_images/hauntedhouse.png); position:absolute; left:0; top:0; }

@keyframes pulsehouse {
  0%   { top:0; left:0; width:128px; height:170px; opacity:0.5; }
  100% { top:-20px; left:-20px; width:168px; height:210px; opacity:0; }
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}


.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-delay: 1s;
  }
  @-webkit-keyframes zoomInDown {
  0% {
  opacity: 0;
  -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
  transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  60% {
  opacity: 1;
  -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
  transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
  }
  @keyframes zoomInDown {
  0% {
  opacity: 0;
  -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
  transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  60% {
  opacity: 1;
  -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
  transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
  }

.sunburst{
  width:95vmin; height:95vmin; max-height: 600px; max-width: 600px; border: 10px solid #fff; border-radius:100%; background:#fc4; box-shadow:0 0 25px #222;
}
.sunburst.success { background:#fc4;}
.sunburst.failed { background:#ccc; }
.sunburst svg { transform-origin: center 50%; animation: rotate 4s infinite linear; width:100%; height:100%; }
.sunburstoverlay { position:absolute; width:100%; height:250px; top:50%; margin-top:-125px; left:0;}
.sunburstText { position:absolute; width:100%; left:0; height:150px; top:10px; }
.sunburstText:before { display:block; font-family:Eater, sans-serif; font-size: 12vmin; text-align:center; color:#000; text-shadow: 3px 5px 11px #fff;}
.sunburst.success .sunburstText:before { content:'Well done!'; }
.sunburst.failed .sunburstText:before { content:'Sorry, nothing found'; }

.foundPumpkin, .foundGravestone { width:250px; height:250px; position:absolute; top:0; }
.foundPumpkin { left:10%; background-image:url(https://storage.googleapis.com/ub_event_images/pumpkin250px.png); }
.foundGravestone { left:50%; background-image:url(https://storage.googleapis.com/ub_event_images/gravestone250px.png); }

#foundObjects { width:100%; height:50px; margin:20px 0;}
#foundObjects[data-fp='N']::before, #foundObjects[data-fg='N']::before { display:block; content:'you have yet to find either a pumpkin or a gravestone'; }
#foundObjects[data-fp='Y']:before { content:''; display:inline-block; margin-right:10px; width:60px; height:60px; background-image:url(https://storage.googleapis.com/ub_event_images/pumpkin250px.png); background-size:cover; }
#foundObjects[data-fg='Y']:after { content:''; display:inline-block; margin-right:10px; width:60px; height:60px; background-image:url(https://storage.googleapis.com/ub_event_images/gravestone250px.png); background-size:cover; }
#preview { height: calc(100% - 80px) !important; }
@keyframes rotate {
	from 	{-webkit-transform: rotate(0deg); transform: rotate(0deg);}
	to 		{-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
.fsm10 { margin:10px 0; }
.scalecathedral {
  transform-origin:49px 150px;
}

.fire {
  font-size: 10px;
  filter: blur(0.02em);
  -webkit-filter: blur(0.02em);
  margin: 0 auto 0 14px;
  position: relative;
  width: 250px;
  height: 120px;
  opacity:0.4;
}

.particle {
  animation: rise 1s ease-in infinite;
  background-image: radial-gradient(#ff5000 20%, rgba(255, 80, 0, 0) 70%);
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: 0;
  position: absolute;
  bottom: 0;
  width: 5em;
  height: 5em;
}
.particle:nth-of-type(1) {
  animation-delay: 0.1311323192s;
  left: calc((100% - 5em) * 0);
}
.particle:nth-of-type(2) {
  animation-delay: 0.8919936143s;
  left: calc((100% - 5em) * 0.02);
}
.particle:nth-of-type(3) {
  animation-delay: 0.3208736443s;
  left: calc((100% - 5em) * 0.04);
}
.particle:nth-of-type(4) {
  animation-delay: 0.3978637563s;
  left: calc((100% - 5em) * 0.06);
}
.particle:nth-of-type(5) {
  animation-delay: 0.0172109309s;
  left: calc((100% - 5em) * 0.08);
}
.particle:nth-of-type(6) {
  animation-delay: 0.6775038938s;
  left: calc((100% - 5em) * 0.1);
}
.particle:nth-of-type(7) {
  animation-delay: 0.1048452252s;
  left: calc((100% - 5em) * 0.12);
}
.particle:nth-of-type(8) {
  animation-delay: 0.069165696s;
  left: calc((100% - 5em) * 0.14);
}
.particle:nth-of-type(9) {
  animation-delay: 0.2689924382s;
  left: calc((100% - 5em) * 0.16);
}
.particle:nth-of-type(10) {
  animation-delay: 0.3716498216s;
  left: calc((100% - 5em) * 0.18);
}
.particle:nth-of-type(11) {
  animation-delay: 0.5471070165s;
  left: calc((100% - 5em) * 0.2);
}
.particle:nth-of-type(12) {
  animation-delay: 0.1101401398s;
  left: calc((100% - 5em) * 0.22);
}
.particle:nth-of-type(13) {
  animation-delay: 0.2169958034s;
  left: calc((100% - 5em) * 0.24);
}
.particle:nth-of-type(14) {
  animation-delay: 0.8898036074s;
  left: calc((100% - 5em) * 0.26);
}
.particle:nth-of-type(15) {
  animation-delay: 0.144886591s;
  left: calc((100% - 5em) * 0.28);
}
.particle:nth-of-type(16) {
  animation-delay: 0.5758456487s;
  left: calc((100% - 5em) * 0.3);
}
.particle:nth-of-type(17) {
  animation-delay: 0.6573120365s;
  left: calc((100% - 5em) * 0.32);
}
.particle:nth-of-type(18) {
  animation-delay: 0.3975117577s;
  left: calc((100% - 5em) * 0.34);
}
.particle:nth-of-type(19) {
  animation-delay: 0.7527566791s;
  left: calc((100% - 5em) * 0.36);
}
.particle:nth-of-type(20) {
  animation-delay: 0.4781457188s;
  left: calc((100% - 5em) * 0.38);
}
.particle:nth-of-type(21) {
  animation-delay: 0.2169414378s;
  left: calc((100% - 5em) * 0.4);
}
.particle:nth-of-type(22) {
  animation-delay: 0.900419507s;
  left: calc((100% - 5em) * 0.42);
}
.particle:nth-of-type(23) {
  animation-delay: 0.0316726695s;
  left: calc((100% - 5em) * 0.44);
}
.particle:nth-of-type(24) {
  animation-delay: 0.1855208951s;
  left: calc((100% - 5em) * 0.46);
}
.particle:nth-of-type(25) {
  animation-delay: 0.7859973231s;
  left: calc((100% - 5em) * 0.48);
}
.particle:nth-of-type(26) {
  animation-delay: 0.5137474437s;
  left: calc((100% - 5em) * 0.5);
}
.particle:nth-of-type(27) {
  animation-delay: 0.2443078188s;
  left: calc((100% - 5em) * 0.52);
}
.particle:nth-of-type(28) {
  animation-delay: 0.4981567832s;
  left: calc((100% - 5em) * 0.54);
}
.particle:nth-of-type(29) {
  animation-delay: 0.9142937229s;
  left: calc((100% - 5em) * 0.56);
}
.particle:nth-of-type(30) {
  animation-delay: 0.0834128144s;
  left: calc((100% - 5em) * 0.58);
}
.particle:nth-of-type(31) {
  animation-delay: 0.4421622406s;
  left: calc((100% - 5em) * 0.6);
}
.particle:nth-of-type(32) {
  animation-delay: 0.3278897166s;
  left: calc((100% - 5em) * 0.62);
}
.particle:nth-of-type(33) {
  animation-delay: 0.1235154803s;
  left: calc((100% - 5em) * 0.64);
}
.particle:nth-of-type(34) {
  animation-delay: 0.9995577632s;
  left: calc((100% - 5em) * 0.66);
}
.particle:nth-of-type(35) {
  animation-delay: 0.1291333783s;
  left: calc((100% - 5em) * 0.68);
}
.particle:nth-of-type(36) {
  animation-delay: 0.0183567357s;
  left: calc((100% - 5em) * 0.7);
}
.particle:nth-of-type(37) {
  animation-delay: 0.0832671644s;
  left: calc((100% - 5em) * 0.72);
}
.particle:nth-of-type(38) {
  animation-delay: 0.9036168579s;
  left: calc((100% - 5em) * 0.74);
}
.particle:nth-of-type(39) {
  animation-delay: 0.5550182962s;
  left: calc((100% - 5em) * 0.76);
}
.particle:nth-of-type(40) {
  animation-delay: 0.1385824804s;
  left: calc((100% - 5em) * 0.78);
}
.particle:nth-of-type(41) {
  animation-delay: 0.0739458838s;
  left: calc((100% - 5em) * 0.8);
}
.particle:nth-of-type(42) {
  animation-delay: 0.2789246825s;
  left: calc((100% - 5em) * 0.82);
}
.particle:nth-of-type(43) {
  animation-delay: 0.5962779443s;
  left: calc((100% - 5em) * 0.84);
}
.particle:nth-of-type(44) {
  animation-delay: 0.6434010848s;
  left: calc((100% - 5em) * 0.86);
}
.particle:nth-of-type(45) {
  animation-delay: 0.6165295525s;
  left: calc((100% - 5em) * 0.88);
}
.particle:nth-of-type(46) {
  animation-delay: 0.2173068258s;
  left: calc((100% - 5em) * 0.9);
}
.particle:nth-of-type(47) {
  animation-delay: 0.5605042064s;
  left: calc((100% - 5em) * 0.92);
}
.particle:nth-of-type(48) {
  animation-delay: 0.610344557s;
  left: calc((100% - 5em) * 0.94);
}
.particle:nth-of-type(49) {
  animation-delay: 0.4625680137s;
  left: calc((100% - 5em) * 0.96);
}
.particle:nth-of-type(50) {
  animation-delay: 0.7714391275s;
  left: calc((100% - 5em) * 0.98);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(0) scale(1);
  }
  25% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateY(-10em) scale(0);
  }
}

.eye {
	fill: #fff;
}

.shadow {
	-webkit-filter: blur(6px);
	filter: blur(6px);
	opacity: 0.2;
}

.bat {
	animation-direction: normal;
	animation: move 10s infinite;
	animation-timing-function: ease-in-out;
	transform-origin: 50% 50%;
}

.bat1 {
	animation-direction: normal;
	animation: move1 15s infinite;
	animation-timing-function: ease-in-out;
	transform-origin: 50% 50%;
}

.bat2 {
	animation-direction: normal;
	animation: move2 18s infinite;
	animation-timing-function: ease-in-out;
	transform-origin: 50% 50%;
}

.wing {
	transform-origin: 50% 50%;
	animation-direction: normal;
	animation: wing 0.7s infinite;
	animation-timing-function: ease-in-out;
}

.wing1 {
	transform-origin: 50% 50%;
	animation-direction: normal;
	animation: wing1 0.7s infinite;
	animation-timing-function: ease-in-out;
}

@keyframes move {
	0% {
		transform: translate(150px, 90px) rotate(10deg);
	}
	25% {
		transform: translate(-150px, 90px) rotate(-10deg);
	}
	50% {
		transform: translate(-160px, -80px) rotate(10deg);
	}
	75% {
		transform: translate(-140px, -100px) rotate(-10deg);
	}

	100% {
		transform: translate(150px, 90px) rotate(10deg);
	}
}

@keyframes move1 {
	0% {
		transform: translate(-140px, -70px) rotate(-10deg);
	}
	25% {
		transform: translate(0px, -50px) rotate(10deg);
	}
	50% {
		transform: translate(150px, 50px) rotate(-10deg);
	}
	75% {
		transform: translate(-100px, 30px) rotate(10deg);
	}
	85% {
		transform: translate(-110px, 90px) rotate(10deg);
	}

	100% {
		transform: translate(-140px, -70px) rotate(-10deg);
	}
}

@keyframes move2 {
	0% {
		transform: translate(150px, -70px) scale(1) rotate(10deg);
	}
	25% {
		transform: translate(160px, -90px) scale(0.7) rotate(-10deg);
	}
	50% {
		transform: translate(170px, -100px) scale(0.7) rotate(10deg);
	}
	75% {
		transform: translate(105px, -80px) scale(1) rotate(-10deg);
	}

	100% {
		transform: translate(150px, -70px) scale(1) rotate(10deg);
	}
}

@keyframes wing {
	0% {
		transform: translate(0px, 0px) scale(1) rotate(0deg);
	}
	50% {
		transform: translate(0px, 0px) scaleX(0.5) rotate(-25deg);
	}
	100% {
		transform: translate(0px, 0px) scale(1) rotate(0deg);
	}
}

@keyframes wing1 {
	0% {
		transform: translate(0px, 0px) scale(1) rotate(0deg);
	}
	50% {
		transform: translate(0px, 0px) scaleX(0.5) rotate(25deg);
	}
	100% {
		transform: translate(0px, 0px) scale(1) rotate(0deg);
	}
}


.twdc_eventstreamdiv { display:none !important; }
.bgwoffset { display:none !important; }
.TWDCmapContainer { height:100%; }

/*photo story*/
.twdc_bigname { color:#fff; font-size: 3rem; line-height: 5rem; text-shadow: 0 1px 2px #aaa; text-align: left; }
.deletePost { position:absolute; cursor:pointer; top:10px; z-index:2010; left:5px; text-align:center; width:26px; height:26px; background:#fff; opacity:0.9; font-size:2rem; display:block;}
.deletePost:before { display:block; content:'\f1f8'; line-height:26px; color:#888; }
.deletePost:hover { opacity:1; background:#f8f8f8; }
.streamElement { /*! margin:10px; */ padding:15px; border-radius:10px; background-color: #f8f8f8; height: 100%;}
.streamElement:hover { background-color:#eee; }
.streamElement_Image { border: 1px solid #f5f7f6; padding: 1.5rem; transition: transform 0.3s ease-in-out; border-radius: 8px; background-color: #fff; box-shadow: 0px 0.5px 0.6px hsl(0deg 0% 61% / 0.3), 0px 1.5px 1.7px -0.9px hsl(0deg 0% 61% / 0.3), 0px 3.9px 4.3px -1.8px hsl(0deg 0% 61% / 0.29), -0.1px 9.4px 10.4px -2.7px hsl(0deg 0% 61% / 0.28);
height:100%; width:300px;
}
.likeheart { left: 8px !important; bottom: -3px !important; top: initial !important; font-size:2.8rem !important;}
.likeheart:before { font-size:2.8rem !important; }
.likeheart:after { top: 0px !important; left: 30px !important; line-height: 2rem !important; font-size: 2rem !important;}
.storycalouter { max-width: 500px; margin: 0 auto; padding: 5px;}
.streamElement_Image .imgbg { background-size:contain; width:280px; height:100%; /*! position:absolute; */ /*! top:10px; */ /*! left:10px; */ background-repeat: no-repeat; background-position: center; }
.imgbg img { max-height:100%; /*! height: 100%; */}
.streamElement_ImageOuter, .streamElement_CommentOuter { height:50%; width:300px; }
.streamDivider { min-height:40px; max-height:40px; height:40px; margin:0 -20px; }
.streamElement_CommentOuter { justify-content: flex-end; padding: 0 0 20px 0; }
.streamElement_ImageOuter { justify-content: flex-start; padding:0 20px 0 0; }
.dividerTimeline { height:3px; background:#ccc; width:100%; margin-top: 18px; position: absolute;}
.timeline { overflow:auto; }
.streamElement_Comment { height:100%; }
.streamElement_Comment span { max-height:75%; overflow: auto;
  display: block;
  width: 100%;
  padding: 0 16px; }
.streamElement_Comment span:before { content:'\f10d'; color:#dda; font-size:1.4rem; margin: -2px 0 0 -16px; position:absolute; }
.streamElement_Comment span:after { content: '\f10e'; color: #dda; font-size: 1.4rem; margin: 4px 0 0 5px; position: absolute; }
.streamElement_CommentOuter:before { content:attr(data-date); font-size: 1.8rem; color: #f94;}
.deleteFromStream { color:#888; z-index:200; position: absolute; right: 10px; top: 10px; width: 24px; height: 24px; text-align: center; line-height: 24px; cursor:pointer; }
.deleteFromStream:hover { color:#f40; }
.deleteFromStream:before { content:'\f1f8'; }
.storyul { flex:1; display: flex;flex-direction: column;height: 100%;padding-bottom: 10px;}
.storyul > li { position:absolute; left:0; right:0; bottom:0; top:-20px; opacity:0; z-index:1; }
.timeline { min-height:200px; height: 100%;gap: 10px;}
.panelBoxContainer { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 40px; padding: 0 40px; margin-bottom:10px; }
.panelBox { height:100%; }
ul[data-what='timeline'] li[data-what='timeline'] { top:0; opacity:1; z-index:10; display:flex; flex-direction:column;}
ul[data-what='calendar'] li[data-what='calendar'] { top:0; opacity:1; z-index:10; }
ul[data-what='upload'] li[data-what='upload'] { top:0; opacity:1; z-index:10; }
.panels {background: #f8f8f8; padding: 10px; min-width:320px; margin: 0 auto; height:100%;}
.twdcPopUp { height:auto !important;height:90dhv !important; max-height:100dvh !important; align-items:normal !important; }
.fullHeight { left: 50%;
  top: 50%;
  transform:translate(-50% -50%); margin:40px 0 !important; height:auto !important; }
#commentbox { width:100% ; font-size:1.8rem; padding:10px !important;}
#imgselpanel {width:100%; }
#imgselpanel .previewimage { margin-bottom:20px; background:#fff; height:100%; border: 1px dashed #aaa; border-radius: 5px; }
#imgselpanel.hasImage .previewimage { border: none 0 !important; }
.hasImage { border:0 none !important; }
.hasImage .storyImgUpl_btn { display:none; }
.previewimage img { box-shadow: 0px 0.5px 0.6px hsl(0deg 0% 61% / 36%), 0px 1.7px 1.9px -0.8px hsl(0deg 0% 61% / 36%), 0px 4.3px 4.8px -1.7px hsl(0deg 0% 61% / 36%), -0.1px 10.5px 11.8px -2.5px hsl(0deg 0% 61% / 36%); max-height:100%;}
.removeImg { position:absolute; top:10px; right:10px; padding:2px 5px; cursor:pointer; z-index:100; color:#fff; background:#4cf; text-transform:uppercase; }
.removeImg:before { content:'\f1f8 \A remove image'; }
.storyImage { position:absolute; max-width:100%; max-height:100%; }
.inputfile + label::before {
  content: '\f093 \A add a photo';
}

.routeToggleDiv { height:40px; width:100%; padding:0 3px 3px 3px; background:#f0f0f0; display:flex; min-height:40px; max-height:40px; }
.routeToggleDiv > div { flex:1; border:3px solid #f0f0f0; border-top:none; cursor:pointer; transition:all 0.3s; font-size:1.2rem; text-align:center; color:#fff; font-weight:bold; }
.routeToggleDiv > div[data-l='800km'] { background: #ff2200; }
.routeToggleDiv > div[data-l='600km'] { background: #f4f; }
.routeToggleDiv > div[data-l='400km'] { background: #ffff00; }
.routeToggleDiv > div[data-l='200km'] { background: #00ff00; }
.routeToggleDiv > div[data-l='100km'] { background: #4cf; }

div.hide[data-l='1000km'], div.hide[data-l='600km'], div.hide[data-l='500km'], div.hide[data-l='450km'], div.hide[data-l='300km'], div.hide[data-l='100km'] { opacity:0.3; }
div.hide:after { content:'\f070'; }
.hide_100km li[data-l='100km'] { display:none; }
.hide_200km li[data-l='200km'] { display:none; }
.hide_400km li[data-l='400km'] { display:none; }
.hide_600km li[data-l='600km'] { display:none; }

.override li[data-l] { display:block !important; }

.ifouter { height:100%;}
.confetticanvas { position:absolute; top:0; left:0; right:0; bottom:0; pointer-events: none; z-index:2000; }
.donepu { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; font-size: 32px; }
.donepu p { background: #fff; padding: 10px; border-radius: 5px; text-transform: uppercase; color: #fc0; opacity: 0.9; }
.twdc_ugdc { padding:20px; display: inline-block; font-family:Eater; }
.livestreamheader > div { float:left; width:50%; }

.sideBarMap { box-shadow: 0 1px 2px #ddd; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%;}

.ac_virtualeventcontainer { height:100%; margin-bottom:20px; box-shadow: 0 1px 10px #ccc; }
.map16x9 { cursor:auto !important; padding-bottom:56.25%;}

.mad { border-radius:100%; border:4px solid #b47; width:50px; height:50px; background-size:cover; box-shadow:0px 0px 21px #888; background-position:center;}
.mad svg { margin:-6px; }

.svgring { fill: none;
stroke-width: 6px;
stroke: #fff;
stroke-dasharray: 300;
stroke-dashoffset: 300;
transform: rotate(270deg);
transform-origin: center;}

.svgFAR { width:100% !important; background: rgb(144,204,216); background: radial-gradient(circle, rgba(144,204,216,1) 0%, rgba(144,204,216,1) 40%, rgba(154,196,196,1) 100%);}
.svgFAR svg {
  width: 100%;
  height: auto;
  max-width: 100%; min-width: 0;
}
.svgOuter { min-width:0 !important; overflow: auto !important; scrollbar-width: none;}

.minus_btn, .plus_btn { border:2px solid #fff; z-index:999; color:#fff; cursor:pointer; position:absolute; width:30px; height:30px; background:#4cf; right:10px; }
.minus_btn { top:50px; }
.plus_btn { top:90px; }
.minus_btn:before { content:'-'; font-weight:bold;}
.plus_btn:before { content:'+'; font-weight:bold;}
.nobigger .plus_btn, .nosmaller .minus_btn { opacity:0.6; cursor:auto; box-shadow:none;}
.vecInPage { margin:0 !important; box-shadow:none !important; max-width:inherit !important;}
.kiliScores { -webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0; overflow:hidden; min-width:320px; background:#111; background:url(https://storage.googleapis.com/ub_event_images/HalloweenSBBG.jpg); background-size:100% auto; background-color:#111; background-position:0 40px; }
.kiliScores .showhidebtn { display:none; }
.addcalouter { margin-bottom:30px; }
.info { background:#f84; color:#fff; padding:5px; margin-bottom:10px;}
.info:before { content:'\f129'; left:5px; font-size:2rem; color:#f84; background:#fff; border-radius:100%; width: 2.6rem;
  height: 2.6rem;
  text-align: center;
  margin-right: 10px;
  min-width: 2.6rem;
  max-width: 2.6rem;
  line-height: 2.6rem; }
.mapContainer { width:100%; overflow:hidden; }
.canDelete { width:100%; height:100%; }
.canDelete:before { content:'\f1f8'; text-align:center; cursor:pointer; color:#888; transition:all 0.3s;}
.canDelete:hover:before { color:#c40; }
.odometer { font-size:5.4rem !important; }
.inpagemap .twdc_ugdc:before { min-width:200px !important; }
.daypicked { background:#4cf; color:#fff; }
.addactCalDay[data-day] { cursor:pointer; }
.invalidday { opacity:0.5; background:#eee; cursor:auto !important;}
.unitsSelected { color:#fff !important; }
.addActIB { margin:0 0 30px 0; }
.addactCalDay { font-family:Montserrat, arial, sans-serif; -webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0; min-height:40px; text-align:center; border-left:1px dotted #ccc; border-bottom:1px dotted #ccc; transition:all 0.3s; }
.addactCalDay:last-child { border-right:1px dotted #ccc; }
.actDistance { width:100%; font-size:2rem; padding:0 5px; min-width:100px;}
.actDate, .actSource { width:100px; min-width:100px; max-width:100px; padding:0 5px;}
.actDel { width:20px; min-width:20px; max-width:20px; padding:0 5px; }
.actheader { background:#ccc; color:#fff; }
.actLI { border-bottom:1px dotted #dda; }
.actLI:last-child { border-bottom:none; }
.uploadBox { color:#ccc; font-size:1.4rem; line-height:1.8rem; padding:10px 10px 0 10px; background: #333; background: linear-gradient(180deg, rgba(208, 97, 51, 1) 0%, rgba(17, 17, 17, 1) 44%); }

.skeleton { background-image:url(https://storage.googleapis.com/ub_event_images/skeleton.png); position:absolute; top:0px; left:0; pointer-events:none; z-index:1000; width: 247px; height: 320px;}

.onmapcopy { padding:20px; }
.viewperformance { margin:0 5px; z-index:4000; min-height:46px; text-transform: uppercase; background: #4cf; color: #fff; font-size: 2rem; }
.viewperformance.stuck-fixed { right:0%; z-index:6999;}

.distanceMarker {
  box-shadow: none !important;
  font-size: 1rem !important;
  font-weight: normal !important;
  line-height: 1.4rem !important;
  background-color: #400 !important;
  color: #fff !important;
  top: 30px;
  left: 0 !important;
  width: 30px;
  text-align: center;
  border-radius:none !important;
  padding:0 !important;
}
.distanceMarker:before  {display:none !important; }
.leaflet-tooltip-right::before { display:none !important;}
.leaflet-tooltip-left::before { display:none !important;}
.progressUnit { font-family:Eater; }
.vab.stuck-fixed { right:0%; z-index:6999; width:100% !important; left:0; padding:5px; background:#fff; box-shadow:0 1px 2px #ccc; }
.vab.stuck-fixed button { float:right;  }
.recordedActivities:empty:before { content:'no activities logged to date'; line-height:60px; margin-bottom:10px; }
.recordedActivities.loading:before { content:'retrieving your activities..'; }
.fourfourfour { color:#444; }
.namesearch { background:#111; max-height:50px; min-height:50px; height:50px; width:100%; padding:5px 5px 5px 50px;}
.namesearch:before { content:'\f002'; font-size: 20px; color: #888; display: block; position: absolute; left: 18px; line-height: 38px;}
.namesearch input { margin:0; }
.clearsearch { width:40px; cursor:pointer; visibility:visible;}
.clearsearch:before { content:'\f1f8'; display: block; font-size: 20px; color: #888; line-height: 38px; text-align: center;}
.UB-Qinput:placeholder-shown + .clearsearch { visibility: hidden ;}
.showfavs, .showimages { width:40px; cursor:pointer; }
.showfavs:before, .showimages:before { content:'\f06e'; display: block; font-size: 20px; color: #888; line-height: 38px; text-align: center;}
.showimages:before { content:'\f030'; }
.showfavs.lit:before, .showimages.lit:before { color:#4cf; }

.savedstairs { margin-right:5px; }
.newstairs { margin-left:5px; padding-left:10px; border-left:1px dotted #ccc; }
.newstairs:hover { opacity:1; }
.stairsouter { padding:10px; background:#f8f8f8; margin-bottom:10px;}

.TWDCCalSingleContainer { width:200%; }
.trLeft50 { transform: translateX(-50%); }
.trRight50 { transform: translateX(50%); }
.TWDCCalSingleContainer { width:200%; }
.TWDCcalSelOuterSingle { padding:0 !important; height:255px !important; box-shadow:0 1px 2px #ddd; background:#f8f8f8; }
.enddatefill:before, .datefill:before { content:'*pick start date*'; color:#c40; }
.enddatefill[data-date]:before { content:attr(data-date); color:#885; }
.datefill[data-dstart]:before { content:''; }
.TWDCweekday { background: #fff; border-right: 3px solid #f8f8f8;}
.TWDCrangeLit { background: #F60 !important; }
.mileagetable { z-index:10; width:100%; bottom:0; overflow:auto; scrollbar-width: none; background-color:transparent; }

.bigNumber[data-co]{ font-size:16px; }

.bigNumber:before { content:attr(data-km); font-size:3.4rem; line-height:3.6rem; }
.bigNumber:after { content:"km"; font-size:1.8rem; line-height:2.2rem; }
.mileagetable[data-units='miles'] .bigNumber:before { content:attr(data-m);}
.mileagetable[data-units='miles'] .bigNumber:after { content:"mi"; }
.mileagetable li[data-isteam="Y"] { background:#fffffe; padding-right: 0;}
.mileagetable li[data-isteam="Y"] .ro_mav:after { content: '\f0c0'; color: #bb8; top: 48px; position: absolute; left: 12px; font-size: 1.8rem; }
.resultOuter { transition:all 0.3s; }
.resultOuter:hover { background:rgba(255,255,255,0.2); color:#fff; }
.resultOuter.chosenPlayer:hover { background:rgba(255,128,64,0.4); color:#fff; }

.ro_mmeta { width:100%; margin-right:10px; }
.metadata { width:100%;}
.completedroute .metadata{ background:url() no-repeat right center; background-size:contain;}
.reachedhalf .metadata { background:url() no-repeat right center;background-size:contain; }

.showhide { opacity:0; position:absolute; right:0; top:0; width:0; height:0; }
#twdc_ac_showtable + label { margin:0; z-index:11; background:#4cf; color:#fff; width:30%; height:30px; line-height:30px; text-align:center; text-transform:uppercase; font-size:2rem;}
.kiliScores #twdc_ac_showtable + label { width:100%; display:none; }
.hidename { display:none !important; }
#twdc_ac_showtable + label:before { box-shadow:none !important; display:block; content:'show table'; }
#twdc_ac_showtable:checked + label:before { content:'hide table'; }
#twdc_ac_showtable ~ ul { /*height:calc(100% - 48px);*/ opacity:1;}

.TWDCleafletMapContainer  { position:absolute; top:0; left:0; right:0; bottom:0; }
/*.mapContainer.showrtr .rtrmapcontainer
.mapContainer.showvs .vsmapcontainer*/
.mapchoicelabel { position:absolute; left:6px; top:70px; z-index:5500;height:70px; background:url(https://storage.googleapis.com/ub_site_images/mapicon.png) no-repeat 5px 5px; width:167px !important;  }

#switchmap:not(:checked) ~ .rtrmapcontainer { z-index:10; opacity: 1;}
#switchmap:not(:checked) ~ .vsmapcontainer { z-index:5; opacity:0; }
#switchmap:checked ~ .rtrmapcontainer { z-index:5; opacity:0; }
#switchmap:checked ~ .vsmapcontainer { z-index:10; opacity: 1; }
.rtrmapcontainer, .vsmapcontainer { transition:opacity 0.5s; }
#unitchoice_km + label { color:#fff; margin:0; padding:6px 5px; text-align:center; left:0; width:100%; background:#333; }
#unitchoice_km + label:before { box-shadow:none !important; content:'SWITCH TO MILES'; display:inherit; }
#unitchoice_km:checked + label:before { box-shadow:none !important; content:'SWITCH TO KILOMETRES'; display:inherit; }
.leaflet-top { top: 150px !important; }
.leaflet-left { left:auto !important; right:10px !important;}
.compmenu_btn { font-size:2rem; position:absolute; top: -8px;
  left: -56px; cursor:pointer; }
.compmenu_btn:before { content:'\f013'; }
.setfav { position:absolute; right:5px; width:35px; height:100%; bottom:0px; z-index:4000;}
.setfav:before { font-size:2rem; position: absolute; bottom: 0; left: 7px; content:'\f06e'; color:#ccc; cursor:pointer; }
.fav .setfav:before { content:'\f06e'; color:#4cf; }
.viewImages { position:absolute; right:5px; width:35px; height:40px; top:0; z-index:4500; }
.viewImages:before { content:'\f030'; color:#4cf; cursor:pointer; font-size:2.1rem; position:absolute; top:5px; left:6px; }
.map16x9 { -webkit-box-flex:3;-ms-flex:3 1 0px;flex:3 1 0; }
#twdc_ac_showtable:checked ~ ul { /*height:calc(100% - 78px);*/ opacity:1; }
#twdc_ac_showtable:checked ~ .namesearch { opacity:1; }
/*#twdc_ac_showtable:checked ~ .mileagetable { height:calc(100% - 78px);  }*/
.mileagetable:empty:before { content:'Leaderboard will be live shortly'; padding:20px 10px; font-size:1.4rem;}
.mileagetable li[data-isteam='Y'] > .fbxai { padding-right:10px; }

.popupTitle { font-family:Eater; }
.milesWrapper { overflow:auto; }
.adventureWrapper { margin: -10px -10px 0 -10px; padding:20px 20px 40px 20px; background:url(https://storage.googleapis.com/ub_event_images/HalloweenSBBG.jpg); background-size:cover;}
.progressHeadline { font-size:3rem; line-height:3.2rem; font-family:Eater, bebas neue; margin-top:20px; color:#f40;}
.timeline:empty:before { content:'no story updates posted so far'; }
.uldivider { background-color: rgb(221, 187, 0);
  text-align: center;
  color: #fff !important;
  font-size: 2rem;
  height: 2.4rem !important;
  line-height: 4rem;
  padding: 0 !important;
  min-height: 4rem !important;
}

.rabbitMarker, .playerMarker { width:60px; height:60px; }
.rabbitMarker { opacity:0.8; }
.vecInPageEmbed {
  width:100%; 
}


.del0 { animation-delay: 0.1s !important;
	-webkit-animation-delay: 0.1s !important; }
.del1 { animation-delay: 0.2s !important;
	-webkit-animation-delay: 0.2s !important; }
.del2 { animation-delay: 0.3s !important;
	-webkit-animation-delay: 0.3s !important; }
.del3 { animation-delay: 0.4s !important;
	-webkit-animation-delay: 0.4s !important; }
.del4 { animation-delay: 0.5s !important;
	-webkit-animation-delay: 0.5s !important; }

@-moz-keyframes bounce {
  0%, 50%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  25% {
    -moz-transform: translateY(-5px);
    transform: translateY(-5px);
  }
  75% {
    -moz-transform: translateY(-3px);
    transform: translateY(-3px);
  }
}
@-webkit-keyframes bounce {
  0%, 50%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  25% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
  75% {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
  }
}
@keyframes bounce {
  0%, 50%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  25% {
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
  75% {
    -moz-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

li[data-l]:before { content:''; width:50px; height:50px; top:50%; margin-top:-25px; left:5px; position:absolute; background-position:center; background-repeat:no-repeat; background-size:contain;}

li[data-l='330km'].hasav .ro_mav { border:3px solid #0c0; }
li[data-l='200km'].hasav .ro_mav { border:3px solid #4cf; }
li[data-l='100km'].hasav .ro_mav { border:3px solid #f40; }
li[data-l='50km'].hasav .ro_mav { border:3px solid #b47; }

.progressTL { background-color:rgba(255,255,255,0.5); color:#888;  }

li.completedroute { background-color:#aaffff !important; }
.teamMembers { padding-left: 60px !important; }
.teamMembers .resultOuter { padding-left:10px !important; background: rgb(204,204,153);
    background: -moz-linear-gradient(90deg, rgba(204,204,153,1) 0%, rgba(226,226,188,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(204,204,153,1) 0%, rgba(226,226,188,1) 100%);
    background: linear-gradient(90deg, rgba(204,204,153,1) 0%, rgba(226,226,188,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccc99",endColorstr="#e2e2bc",GradientType=1); padding-right: 10px !important; color: #fff; border-left:1px solid #cc9; border-bottom: 1px dashed #bb8;
}
.resultOuter.closed ul { max-height:0; }
.teamMembers .resultOuter:first-child { border-top:1px solid #cc9; }
.teamMembers li:after { content:'\f2be\00a0\f141'; position: absolute; font-size: 1.4rem; left: -45px; color: #ccc;}
.teamMembers > li[data-l]:before { background:none; }
.teamMembers .ro_mav:after { content:'' !important; }
.teamMembers .bigNumber:before { font-size:2.6rem; }
.teamMembers .bigNumber:after, .teamMembers .bigNumber:before { line-height:inherit; }

li[data-l='330km']:before { background-image:url(https://storage.googleapis.com/ub_event_images/greenPLayingPiece.png); }
li[data-l='200km']:before { background-image:url(https://storage.googleapis.com/ub_event_images/bluePLayingPiece.png); }
li[data-l='100km']:before { background-image:url(https://storage.googleapis.com/ub_event_images/redPLayingPiece.png); }
li[data-l='50km']:before { background-image:url(https://storage.googleapis.com/ub_event_images/purplePLayingPiece.png); }
.progressMarker { position:absolute; width:50px; height:50px; margin-left:-25px; top:-50px; left:0%; transition:all 0.3s;}
.hasav:before { display:none; }
.ro_mav { position:absolute; min-width:50px; margin-right:10px; max-width:50px; width: 50px; height:50px; left:5px; top:5px; border-radius:100%; background-position:center; }
.player { transition:opacity 0.4s; }
.hasAvatar:before { background:none !important; }

#unitchoice_km:checked + label + .mileagetable .bigNumber:before { content:attr(data-m);}
#unitchoice_km:checked + label + .mileagetable .bigNumber:after { content:"mi"; }

.namePopup + .poleOuter .poleCalendar:after, canvas + .poleOuter .poleCalendar:after { opacity:0.08; }
.namePopup { background:#fff; box-shadow:0 1px 2px #ddd; padding:10px; position:absolute; z-index:999; animation: fadeIn ease 0.6s;
-webkit-animation: fadeIn ease 0.6s;
-moz-animation: fadeIn ease 0.6s;
-o-animation: fadeIn ease 0.6s;
-ms-animation: fadeIn ease 0.6s;
}
.namePopup canvas { pointer-events:none;  width:100%; opacity:0; height:300px; position:absolute; top:0; left:0; right:0; }
.userName { opacity:1; z-index:20; transition:opacity 0.3s; }
.yahmarker { pointer-events:none; animation: fadeIn ease 2s alternate infinite; }

/*.completedroute .clicktrap:before { position:absolute; width:58px; height:60px; right:0; background: url(https://www.ultrabritain.com/StravaAPI/UBVirtual/SVG/star-gold-orange-svgrepo-com.svg) center; background-size:55px; background-repeat:no-repeat; display: block; content:''; }
.isteam .completedroute .clicktrap:before { display:none; }*/
.warning { margin-top:0 !important; font-size:12px; padding: 2px 5px; display: inline; text-transform: uppercase; color:#f40; ; border-radius: 3px; }
.bigNumber { font-size:3.4rem; line-height:3.6rem; }
.warning:before { color:#f40; content:'\f071'; margin-right:10px; z-index:10;}
.mileagetable li { border-bottom:1px dotted #555; -webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between; color:#888; padding:5px 45px 5px 65px; min-height:60px; }
.distanceHeadline { font-family:eater; font-size:1.5rem; min-height:0 !important; line-height: 2.4rem; text-align: center; color: rgba(208, 97, 51, 1) !important; padding:0 !important; }

.isteam .ro_mav{ left:-50px !important; }
.resultName { text-align:left;}
.mileagetable li:last-child { border-bottom:none; }
.avatar { border-radius:100%; position:absolute; top:5px; left:5px; width:50px; height:50px; background-position:center; background-size:cover; background-repeat:no-repeat;}
.marker-cluster { z-index:4000 !important; }
.doublecontainer { display:grid; grid-template-columns : 1fr 1fr; }
.pacerButton { cursor: pointer;
  background-repeat: no-repeat;
  background-size: 30px;
  background-image: url(https://storage.googleapis.com/ub_event_images/whiterabbit.png);
  background-position: 95% 5px; }
.pacerButton[data-pacer='Y'] { background-color:#0a0; font-size:1.4rem; color:#fff; }
.pacerButton[data-pacer='N'] { background-color:#f40; font-size:1.4rem; color:#fff; background-position:5px 5px;  }
.pacerButton[data-pacer='Y']:before { content: 'PACER ON'; }
.pacerButton[data-pacer='N']:before { content: 'PACER OFF'; }


.twdc_eventLiveStream { column-count:7; margin: 10px 0; padding: 0; moz-column-gap: 10px; -webkit-column-gap: 10px; column-gap: 10px; }
.twdc_sustnImage { background:#f8f8f8; padding:10px; box-shadow:0 1px 2px #ddd; margin-bottom:5px; }
.feed_imgclicktrap { position:absolute; top:0; left:0; right:0; bottom:0; cursor:pointer; z-index:100;}
.feed_imgclicktrap:before { content:'\f004'; transition:all 0.3s; color:#F30; font-size:6rem; line-height:6rem; text-shadow: 0 1px 2px #333; transform:translateY(-50px); opacity:0; }
.curated:before { transform:translateY(0); opacity:1; }

.matchedEntrants:empty:before { content:'no-one matched'; }
.matchedEntrants { padding:10px 0;  }
.matchedEntrants li { background:#eeb; cursor:pointer; font-weight:bold; border:1px dotted #ccc; width:200px; padding:5px; margin:0 5px 5px 0;}
.matchedEntrants li:after { font-weight:normal; margin-top:10px; display:block; content:"UltraBritain ID:"attr(data-id)"\A Event Entry ID:"attr(data-reid); }
.matchedEntrants li:hover { background:#dda; color:#fff; }

@keyframes pulsebg {
  from { fill: #fff;}
  to { fill:#91c453;}
}

.event_progress { z-index:111; color:#888; font-weight:bold; }
.event_progress .fx1 { text-align:center; }
.livestreamheader { overflow:hidden;z-index:3000; background:#f8f8f8; padding:10px; }
.streamImg { max-width:100%; max-height:100%; }
.percentageBar { width:100%; height:117px; }
.percentageBarOuter { padding:0 78px; height: 120px; }
.percentageBarOuter:before { content:''; background-image: url(); opacity:0.4; position:absolute; top:0; left:0; right:0; bottom:0; }
.progressHuskies { z-index:100; left:0px; transition:all 0.3s; margin-left: -25px;
  width: 50px;
  height: 50px;
  position: absolute;
  top: -50px;
  background: url();
    background-image: url("");
    background-size: auto;
  border-radius: 100%;
  background-size: contain; }
.progressParis { z-index:100; left:0px; transition:all 0.3s; margin-left:-30px; width:60px; height:60px; position:absolute; top:-60px; background:url() no-repeat; background-size:cover; }
.progressTL { width: calc( 100% - 40px); height: 4px; border-radius: 10px; position: absolute; bottom: 8px; left:20px;  }

.previewtools { display:none !important; }
.progressHalfway, .progressFinish { background-repeat:no-repeat; background-position:center; z-index:10; width:60px; height:60px; position:absolute; bottom:4px; margin-left:-30px; background-size:cover; }
.progressHalfway { left:50%; background: url(https://storage.googleapis.com/ub_event_images/GraveyardMonument.png?);
    width: 110px; height: 119px;  background-repeat: no-repeat; margin-left:-55px; }
.progressFinish { margin-left:-36px; left:100%; background-image:url(https://storage.googleapis.com/ub_event_images/StainedGlass.png); width:72px; height:119px;}
.complete { margin-top:20px; }

.progressHalfway:after, .progressFinish:after { position:absolute; bottom: -20px; text-align: center; width: 100%;}
.progressFinish:after { content:'sanctuary'; }
.progressHalfway:after { content:'halfway'; }
.distanceMarker { margin-top:-13px !important; }
.ripple {
  background-color: transparent;
  width: 1px;
  height: 1px;
  border-radius: 100%;
  position:absolute;
  left:50%;
  top:50%;
  animation: ripple 3s linear infinite;
}
.ripple::before,
.ripple::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-radius: 50%;
  animation:inherit;
  animation-delay:1s;
}
.ripple::after {
  animation-delay:2s;
}
@keyframes ripple {
  0% {
    box-shadow: 0 0 0 .7rem rgba(255,255,255, 0.2);
  }
  100% {
    box-shadow: 0 0 0 16rem rgba(255,255,255, 0);
  }
}

@media only screen and (max-width: 800px) {
	.event_progress { font-size: 1.2rem; line-height: 1.4rem; }
	.kiliScores { max-height:30px; position:absolute; top:0; left:0; bottom:0; width:100%; z-index:2000; }
	.showtabs { bottom : 0 !important;}
	.bigNumber { font-size:2.6rem !important; }
	.kiliScores #twdc_ac_showtable + label { width:100%; display:block; }
	#twdc_ac_showtable ~ ul { opacity:0; }
	#twdc_ac_showtable ~ .namesearch { opacity:0; }
  .map16x9 { padding-bottom:100% !important; }
  .tableopen { position:fixed; top:0; left:0; bottom: 0; width:320px; z-index:6000; max-height:100vh !important; }
  .panelBoxContainer { flex: 1; display: flex; flex-direction:column; padding: 0 20px; margin-bottom:0 !important; }
  .panelBoxContainer #commentbox { max-height:50px; height:auto; }
  .panelBoxContainer .panelBox { flex:1; }
  .panelBoxContainer .panelBox:first-child { flex:2; }
  .info { font-size:1rem; margin-bottom:0;}
}

@media only screen and (max-width: 479px) {
	.event_progress { font-size: 1.4rem; line-height: 1.6rem; }
	.onmapcopy { padding:0 !important; }
  .livestreamheader > div { width:100%; }
  .livestreamheader { flex-direction:column; }
  .viewperformance { font-size: 1.2rem !important; padding: 8px !important; }
  .odometer { font-size:4rem !important;}
  .inpagemap .twdc_ugdc:before { min-width: 105px !important; top:-5px; }
}