@charset "utf-8";
/*--- 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;}
}

@keyframes roundtime {
  to {
    /* More performant than animating `width` */
    transform: scaleX(0);
  }
}

.timerBarInner { height: 10px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #7ac; transform: scaleX(100%); animation: roundtime 300s linear infinite; }
.timerBarOuter { height:10px; width:100%; background:#fff; margin-bottom:1px; }
.timerBarOuter:before { content:'refresh in..'; position:absolute; left:2px; color:#333; top: -1px; font-size: 1rem; z-index: 99;}
.odometer { display:inline-block; font-size:5rem; color:#fff;}
.okm:after { content:'mi'; position: relative; top: 4px; font-size: 3rem;}
.opc:after { content:'%'; position: relative; top: 4px; font-size: 3rem;}

.resultli { -webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between; }

.yahmarker { animation: fadeIn infinite alternate ease 2s; }
.sideBarMap { height:100%; }
.ac_virtualeventcontainer { height:100%; margin-bottom:20px; box-shadow: 0 1px 10px #ccc; }
.twdc_eventstreamdiv { display:none !important; }
.bgwoffset { display:none !important; }
.TWDCmapContainer { height:100%; }

.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; }

.kperday { color:#333; text-shadow:0 1px 2px #fff; width:100%; position:absolute; left:10px; bottom:10px; opacity:0.5; font-size:7rem; pointer-events: none; z-index:1000;}
.kperday:before { content:'Distance needed to reach your goal:\00a0'attr(data-remain); font-size:2rem; position:absolute; left:0; top:-1rem;  }
.dlnodeod { font-size: inherit !important; color: inherit !important; }

.livestreamheader > div { -webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;  }

.mountainMarkers { overflow:hidden; position:absolute; top:0; left:0; right:0; bottom:0; z-index:100; min-width:640px;}
.ac_virtualeventcontainer .map16x9 { cursor:auto !important; padding-bottom:56.25%;}
.yahmkr { z-index:2000; position:absolute; width:7.3%; height:2.06%; background-size:cover; background-image:url(https://www.ultrabritain.com/StravaAPI/Strava-ActionChallenge/ac_virtual/img/youarehere.png); }
.kiliScores { -webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0; overflow:hidden; min-width:320px; }
.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:26px; height:26px; text-align:center; margin-right:10px; min-width:26px; max-width:26px;  }

.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; }

.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;}
.actDate, .actSource, .actDel { width:100px; min-width:100px; max-width:100px; padding:0 5px;}
.actheader { background:#ccc; color:#fff; }
.actLI { border-bottom:1px dotted #dda; }
.actLI:last-child { border-bottom:none; }
.uploadBox { color:#888; font-size:1.4rem; line-height:2.8rem; padding:10px; background:rgb(255,255,255,0.9); box-shadow:0 1px 2px #bbb; min-height:170px; }
.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;}

.leaflet-tooltip-right::before, .leaflet-tooltip-top:before { display:none !important;}
.leaflet-tooltip-left::before { display:none !important;}

.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:#f4f4f4; width:100%; padding:5px 5px 5px 50px; position:absolute; top:0; left:0;}
.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; }
.clearsearch:before { content:'\f1f8'; display: block; font-size: 20px; color: #888; line-height: 38px; text-align: center;}

.mileagetable { position:absolute; z-index:10; left:0; top:68px; width:100%; bottom:0; overflow:auto; background:#fff; scrollbar-width: none;}

.bigNumber[data-co]{ font-size:16px; }
.completedroute:after { content:attr(data-l); position:absolute; bottom:2px; right:0; width:60px; text-align:center; }

#unitchoice_km + label { position:absolute; color:#fff; top:48px; margin:0; padding:0 5px; text-align:center; height:20px; left:0; width:100%; background:#dda; }
#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; }

.resultOuter { transition:all 0.3s; }
.resultOuter[data-fam='Y'] .resultName:after { content:'\f0c0'; margin-left:20px; display:inline;  font-size:12px; color:#bb8; }
.resultOuter[data-fam='Y'] { background:#eee !important; }
.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; position:absolute; top:0; left:0; 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; }
.TWDCleafletMapContainer:before { content:''; background:url(https://storage.googleapis.com/ub_event_images/5tgz127lmn_oxSaoLB58g); overflow:hidden; opacity:0.8; position:absolute; top:0; left:0; right:0; bottom:0; background-size:cover; background-position:center bottom;}
.socksspan { background-image:url(https://storage.googleapis.com/ub_event_images/5tgz127lmn_EfJoAr4gY3); background-repeat:no-repeat; background-size:contain; width: 56vw; height: 56vw; max-height:714px; max-width:714px; float:left; }

.csquare:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.odometer-inside { display:inline; }
.twdc_odometer {background: rgb(226,131,14);
background: linear-gradient(90deg, rgba(226,131,14,1) 0%, rgba(226,177,14,1) 100%);
padding: 10px; color: #fff; font-size: 3rem; margin-bottom: 1px;
font-family: Montserrat, arial, sans-serif;}

.odopanel { position:absolute; top:0; right:0; bottom:0; width:auto; }
.odopanel:before { content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:#eee; opacity:0.2; }
.sockoverlay1, .sockoverlay2 { position:absolute; transition:all 0.3s;}
.sockoverlay1 {
    position: absolute;
    bottom: 0; left:0; top:100%;
    background: url(https://storage.googleapis.com/ub_event_images/5tgz127lmn_hsW469rnNC);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom center;
    width:100%;
}
.sockoverlay2 {
    position: absolute;
    bottom: 0; left: 0; top: 100%;
    background: url(https://storage.googleapis.com/ub_event_images/5tgz127lmn_L2zPCA8YG0);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom center;
    width:100%;
}

.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; }
.mileagetable:empty:before { content:'results refreshing..'; padding:20px 10px; font-size:1.4rem;}

.warning { margin-top:0 !important; font-size:12px; padding: 2px 5px; display: inline; text-transform: uppercase; color:#f40; ; border-radius: 3px; }
.bigNumber:before { content:attr(data-km); font-size:34px; line-height:34px; text-align:right;}
.bigNumber:after { content:"km"; font-size:18px; line-height:50px; text-align:right;}
#unitchoice_km:checked + label + .mileagetable .bigNumber:before { content:attr(data-m); font-size:34px; line-height:50px; text-align:right;}
#unitchoice_km:checked + label + .mileagetable .bigNumber:after { content:"mi"; font-size:18px; line-height:50px; text-align:right;}


.warning:before { color:#f40; content:'\f071'; margin-right:10px; z-index:10;}
.mileagetable li { border-bottom:1px dotted #ddd; -webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between; color:#888; padding:5px 10px 5px 10px; background:#f8f8f8;}
.resultName { text-align:left;}
.mileagetable li:last-child { border-bottom:none; }

.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; font-family: Montserrat; color:#888; font-weight:bold; }
.event_progress .fx1 { text-align:center; }
.livestreamheader { overflow:hidden;z-index:3000; padding:10px; }

@media only screen and (max-width: 1000px) {
  .twdc_odometer { font-size: 2.4rem;}
  .odometer { font-size:3rem; }
}

@media only screen and (max-width: 800px) {
	.event_progress { font-size: 1.2rem; line-height: 1.4rem; }
	.twdc_uganda_location { font-size:2rem; line-height: 2.1rem;}
	.kiliScores { position:absolute; top:0; left:0; bottom: calc(100% - 30px); width:320px; z-index:2000; }

	.showtabs { bottom : 0 !important;}

	.bigNumber:before { font-size:2.6rem !important; }
	.mileagetable { background:rgb(255,255,255,0.8); top:98px; }
  #unitchoice_km + label { top:78px; }
	.namesearch  { top:30px; }
	.kiliScores #twdc_ac_showtable + label { width:100%; display:block; }
	#twdc_ac_showtable ~ ul { opacity:0; }
	#twdc_ac_showtable ~ .namesearch { opacity:0; }
  .kperday { font-size:5rem; }
  .livestreamheader { -webkit-box-orient:vertical !important; -webkit-box-direction:normal !important; -ms-flex-direction:column !important; flex-direction:column !important; }
  .event_progress { width:100% !important; padding:10px 0 !important; }
    .twdc_odometer { font-size: 2rem;}
    .odometer { font-size:3rem; }
}

@media only screen and (max-width: 479px) {
	.event_progress { font-size: 1.4rem; line-height: 1.6rem; }
	.twdc_uganda_location { font-size:1.4rem; line-height: 1.6rem;}
	.viewperformance.stuck-fixed { width:100% !important; }
	.onmapcopy { padding:0 !important; }
  .livestreamheader > div { width:100%; float:none; }
  .map16x9 { padding-bottom:100% !important; }
  .kperday { font-size:4rem; }
  .socksspan { width: 100vw !important; height: 100vw !important;}
  .twdc_odometer { font-size: 2rem;}
  .odometer { font-size:3rem; }

}