@charset "utf-8";
/*--- 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; }
#sealife{
  animation: rotate 400s linear infinite; transform-box: fill-box;transform-origin: center;
}
#sealife2{
  animation: rotateback 500s linear infinite; transform-box: fill-box;transform-origin: center;
}
@keyframes rotate{
  to{ transform: rotate(360deg); }
}
@keyframes rotateback{
  to{ transform: rotate(-360deg); }
}
.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; }
.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:200px; 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:180px; position:absolute; top:10px; left:10px; background-repeat: no-repeat; background-position: center; }
.streamElement_ImageOuter, .streamElement_CommentOuter { max-height:200px; height:200px; min-height:200px; 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 { overflow:auto; height:100%; }
.streamElement_Comment span:before { content:'\f10d'; color:#dda; font-size:2rem; margin-right:5px; }
.streamElement_Comment span:after { content:'\f10e'; color:#dda; font-size:2rem; margin:7px 0 0 5px; }
.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; }
.storyul > li { position:absolute; left:0; right:0; bottom:0; top:-20px; opacity:0; z-index:1; }
.timeline { min-height:200px; }
.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; }
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='1000km'] { background: #ffff00; }
.routeToggleDiv > div[data-l='600km'] { background: #ff9933; }
.routeToggleDiv > div[data-l='800km'] { background: #3333ff; }
.routeToggleDiv > div[data-l='450km'] { background: #cc33ff; }
.routeToggleDiv > div[data-l='300km'] { background: #ff6666; }
.routeToggleDiv > div[data-l='100km'] { background: #00ff00; }

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_300km li[data-l='300km'] { display:none; }
.hide_450km li[data-l='450km'] { display:none; }
.hide_500km li[data-l='800km'] { display:none; }
.hide_600km li[data-l='600km'] { display:none; }
.hide_1000km li[data-l='1000km'] { 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;}
.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 #fc4; width:50px; height:50px; background-size:cover; box-shadow:0px 0px 21px #888; background-position:center;}
.mad svg { margin:-6px; }
.markeryellow .mad  { border:4px solid #ffff00;}
.markerorange .mad  { border:4px solid #ff9933; }
.markerblue .mad { border:4px solid #3333ff; }
.markerpurple .mad  { border:4px solid #cc33ff; }
.markerpink .mad  { border:4px solid #ff6666; }
.markergreen .mad  { border:4px solid #00ff00; }

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

.markeryellow .svgring { stroke:#ffff00; }
.markerorange .svgring { stroke:#ff9933; }
.markerblue .svgring { stroke:#3333ff; }
.markerpurple .svgring { stroke:#cc33ff; }
.markerpink .svgring { stroke:#ff6666; }
.markergreen .svgring { stroke:#00ff00; }

.svgFAR { 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%);}
#ocean1, #ocean2, #ocean3, #ocean4 { fill:#fff; opacity:0.2; }
.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;}

.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;  }
.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:#888; font-size:1.4rem; line-height:1.8rem; padding:10px; }

.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 {
  border: none;
  box-shadow: none !important;
  font-size: 1rem !important;
  font-weight: normal !important;
  line-height: 14px !important;
  background: none !important;
  color: #333 !important;
  top: 3px;
  left: 23px !important;
  width: 36px;
  text-align: center;
}
.distanceMarker:before  {display:none !important; }
.leaflet-tooltip-right::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; 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;}
.clearsearch:before { content:'\f1f8'; display: block; font-size: 20px; color: #888; line-height: 38px; text-align: center;}
.showfavs { width:40px; cursor:pointer; }
.showfavs:before { content:'\f06e'; display: block; font-size: 20px; color: #888; line-height: 38px; text-align: center;}
.showfavs.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; background:#fff; scrollbar-width: none;}

.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; }
#unitchoice_km:checked + label + .mileagetable .bigNumber:before { content:attr(data-m);}
#unitchoice_km:checked + label + .mileagetable .bigNumber:after { content:"mi"; }

.completedroute:after { content:attr(data-d); position:absolute; bottom:2px; right: 17px; }
.resultOuter { transition:all 0.3s; }
.resultOuter:hover { background:#eee; }

.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:#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; }
.leaflet-top { top: 150px !important; }

.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:'results refreshing..'; padding:20px 10px; font-size:1.4rem;}
.milesWrapper { overflow:auto; }
.adventureWrapper { padding:20px 20px 40px 20px; }
.progressHeadline { font-size:3rem; line-height:3.2rem; font-family:bebas neue; margin-top:20px; color:#4cf;}
.timeline:empty:before { content:'no story updates posted so far'; }

.vecInPageEmbed {
  width:100%;
}

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='1000km']:before { background-image: url("https://storage.googleapis.com/ub_event_images/yellowbackpack.png");}
li[data-l='600km']:before { background-image: url("https://storage.googleapis.com/ub_event_images/orangebackpack.png");}
li[data-l='800km']:before { background-image: url("https://storage.googleapis.com/ub_event_images/bluebackpack.png");}
li[data-l='450km']:before { background-image: url("https://storage.googleapis.com/ub_event_images/purplebackpack.png");}
li[data-l='300km']:before { background-image: url("https://storage.googleapis.com/ub_event_images/pinkbackpack.png");}
li[data-l='100km']:before { background-image: url("https://storage.googleapis.com/ub_event_images/greenbackpack.png");}

.progressTL[data-goal='1000000'] .progressParis { background-image: url("https://storage.googleapis.com/ub_event_images/yellowbackpack.png");}
.progressTL[data-goal='600000'] .progressParis { background-image: url("https://storage.googleapis.com/ub_event_images/orangebackpack.png");}
.progressTL[data-goal='800000'] .progressParis { background-image: url("https://storage.googleapis.com/ub_event_images/bluebackpack.png");}
.progressTL[data-goal='450000'] .progressParis { background-image: url("https://storage.googleapis.com/ub_event_images/purplebackpack.png");}
.progressTL[data-goal='300000'] .progressParis { background-image: url("https://storage.googleapis.com/ub_event_images/pinkbackpack.png");}
.progressTL[data-goal='100000'] .progressParis { background-image: url("https://storage.googleapis.com/ub_event_images/greenbackpack.png");}

.hasav:before { display:none; }
.ro_mav { min-width:50px; max-width:50px; width: 50px; height:50px; position:absolute; left:5px; top:5px; border-radius:100%; background-position:center; }

.hasAvatar:before { background:none !important; }
li[data-l='1000km'].hasav .ro_mav { border:3px solid #ffff00; }
li[data-l='600km'].hasav .ro_mav { border:3px solid #ff9933; }
li[data-l='800km'].hasav .ro_mav { border:3px solid #3333ff; }
li[data-l='450km'].hasav .ro_mav { border:3px solid #cc33ff; }
li[data-l='300km'].hasav .ro_mav { border:3px solid #ff6666; }
li[data-l='100km'].hasav .ro_mav { border:3px solid #00ff00; }
li.completedroute[data-l='1000km'] { background-color:#ffff00; color:#888;  }
li.completedroute[data-l='600km'] { background-color:#ff9933; color:#888;  }
li.completedroute[data-l='800km'] { background-color:#3333ff; color:#fff;  }
li.completedroute[data-l='450km'] { background-color:#cc33ff; color:#fff;  }
li.completedroute[data-l='300km'] { background-color:#ff6666; color:#888;  }
li.completedroute[data-l='100km'] { background-color:#00ff00; color:#fff;  }

#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) 55px 55px no-repeat center; display: block; content:''; }

.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 #ddd; -webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between; color:#888; padding:5px 45px 5px 60px; background:#f8f8f8; min-height:60px; }
.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;}

.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:-78px; width:167px; height:117px; position:absolute; top:-108px; background:url(); }
.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% - 156px);   height: 4px; border-radius: 10px; position: absolute; bottom: 8px; left: 78px;  }
.progressTL[data-goal='1000000'] { background-color:#ffff00; }
.progressTL[data-goal='600000'] { background-color:#ff9933; }
.progressTL[data-goal='800000'] { background-color:#3333ff; }
.progressTL[data-goal='450000'] { background-color:#cc33ff; }
.progressTL[data-goal='300000'] { background-color:#ff6666; }
.progressTL[data-goal='100000'] { background-color:#00ff00; }

.progressHalfway { z-index:10; width:76px; height:75px; position:absolute; bottom:-5px; margin-left:-38px; left:50%; background-image:url(); }

.progressFinish { left:100%; z-index:10; width:98px; height:73px; position:absolute; bottom:-5px; margin-left:-49px; background-image:url(); }
.complete { margin-top:20px; }

.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; }
	.mileagetable { background:rgb(255,255,255,0.8); }
	.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 { grid-template-columns: 1fr; }
}

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