html { overflow-x:visible; }

body {
  font-size: 18px;
  overflow-x: hidden;
  font-family: 'SourceSansPro-Light';
}

.swal2-popup .swal2-styled:focus {
    box-shadow: none;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    z-index: 99;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 20px;
    color: #fff;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

:lang(en) body,
:lang(ms) body, { font-family: 'SourceSansPro-Light'; }

:lang(zh) body, { font-family: 'DFSong1B-GB'; }

.required-field { color: red; }

a:active,
a:focus { text-decoration: none; }

button:focus,
.ant-radio-button-wrapper .ant-radio-button-wrapper-checked {outline:0;}

#carousel-desktop { display: block; }
#carousel-mobile { display: none; }

ol.progtrckr {
  list-style-type: none;
  padding: 0;
  text-align: center;
  margin-bottom: 5rem;
}

ol.progtrckr li {
  display: inline-block;
  text-align: center;
  line-height: 4.5rem;
  cursor: pointer;
  margin: 0 -5px;
}

ol.progtrckr li:last-child { display: none; }

ol.progtrckr li span {
  padding: 0 1.5rem;
}

@media (max-width: 650px) {
  .progtrckr li span {
    display: none;
  }
}
.progtrckr em {
  display: none;
  font-weight: 700;
  padding-left: 1rem;
}

@media (max-width: 650px) {
  .progtrckr em {
    display: inline;
  }
}

ol.progtrckr li.progtrckr-todo {
  color: silver;
  border-bottom: 1px solid silver;
}

ol.progtrckr li.progtrckr-doing {
  color: black;
  border-bottom: 1px solid #e02e3c;
}

ol.progtrckr li.progtrckr-done {
  color: black;
  border-bottom: 1px solid #e02e3c;
}

ol.progtrckr li:after {
  content: "\00a0\00a0";
}

ol.progtrckr li:before {
  position: relative;
  bottom: -3.7rem;
  float: left;
  left: 50%;
}

ol.progtrckr li.progtrckr-todo:before {
  content: "\F111";
  color: silver;
  background-color: white;
  width: 23px;
  line-height: 24px;
  border-radius: 23px;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
}

ol.progtrckr li.progtrckr-todo:hover:before {
  color: silver;
}

ol.progtrckr li.progtrckr-doing:before {
  content: "\f040";
  color: #e02e3c;
  background-color: #ffffff;
  width: 23px;
  line-height: 26px;
  border-radius: 23px;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
}

ol.progtrckr li.progtrckr-doing:hover:before {
  color: #ff4500;
}

ol.progtrckr li.progtrckr-done:before {
  content: "\f00c";
  color: white;
  background-color: #e02e3c;
  width: 23px;
  line-height: 23px;
  border-radius: 23px;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
}

ol.progtrckr li.progtrckr-done:hover:before {
  color: #333;
}

ol.progtrckr li.progtrckr-done:hover:before {
    color: #fff;
}

.full-container {
  min-height: calc(100vh - 355px);
}

#topmenu { background-color: #2B292A; }

#topbar { height: 50px; }

#menu { background-color: #171717; }

#logo {
  background-color: #fff;
  padding-left: 250px !important;
  height: 100px;
}

#logo img {
    position: relative;
    margin-top: 10px;
    left: 32px;
}

#wasport-logo {
  position: relative;
  margin-top: 15px;
}

#logo + div {
  width: 100%;
  display: block;
  text-align: right;
}

#navbar { height: 80px; }

#homebanner {
  /*min-width: 1920px;
  height: 528px;*/
  width: 100%;
  height: 54vh;
  background-color: #0C1011;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("/img/wasport_homebanner.jpg");
  background-repeat: no-repeat;
}

/*
SCROLL TO TOP
*/
#scroll {
  z-index: 1;
  position:fixed;
  right: 35px;
  bottom: 35px;
  cursor:pointer;
  width:50px;
  height:50px;
  /*background-color:#df2e3c;*/
  text-indent:-9999px;
  -webkit-border-radius:60px;
  -moz-border-radius:60px;
  border-radius:60px;
  background: #fcc117; /* Old browsers */
  background: -moz-linear-gradient(left, #fcc117 0%, #f7953e 24%, #f36f39 48%, #ec1e47 68%, #9e1d26 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #fcc117 0%,#f7953e 24%,#f36f39 48%,#ec1e47 68%,#9e1d26 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #fcc117 0%,#f7953e 24%,#f36f39 48%,#ec1e47 68%,#9e1d26 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcc117', endColorstr='#9e1d26',GradientType=1 ); /* IE6-9 */
}

#scroll span {
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-8px;
  margin-top:-12px;
  height:0;
  width:0;
  border:8px solid transparent;
  border-bottom-color:#ffffff;
}

#scroll:hover {
  background-color: #2b292a;
  opacity:1;filter:"alpha(opacity=100)";
  -ms-filter:"alpha(opacity=100)";
}

/*NAV*/
#navbar,
#navbar-mobile { font-family: 'SourceSansPro-Regular'; }

#navbar-mobile { display: none; }

#navbar a:hover,
#navbar a:active,
#navbar a:focus { text-decoration: none; }

#menu { color: #fff; }

.dropdown-menu {
  width: 350px;
  left: -100px !important;
}

.sign-in:active {
  color: inherit;
  text-decoration: none;
  background-color: inherit;
}

.locale { text-transform: uppercase; }

.loggedIn .dropdown-menu { left: -20px !important; }

.loginFb { background-color: #3B5998; }

#create-account-btn {
  background: none;
  border: 1px solid #fff;
  border-radius: 25px;
  color: #fff;
  font-size: 13px;
  padding: 3px 10px;
  cursor: pointer;
}

/*
FOOTER
*/
footer {
  background-color: #505050;
  color: #fff;
  font-family: 'SourceSansPro-Regular';
  padding-top: 50px;
}

#footer-logo { width: 45%; }

.footer-social {
  margin: 3rem 0;
  display: block;
}

.footer-social-mobile { display: none; }

footer h5 {
  font-size: 20px;
  font-weight: normal;
  color:#fff;
}

#footer-title-hr {
  display: block;
  height: 3px;
  border: 0;
  border-top: 3px solid #fff;
  margin: 0 0 1rem 0;
  padding: 0;
  width: 5rem;
}

#copyright {
  padding-bottom: 1rem;
  margin-bottom: 0;
}

footer a,
footer a:hover { color: #fff; }

footer a:hover { text-decoration: none; }

#footer-hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #fff;
  margin: 1em 0;
  padding: 0;
}

footer p { font-size: 15px; }

/*
BANNER
*/
#banner img { width: 100%; }

/*
CAROUSEL
*/
#carousel .item{
  cursor:grab;
  cursor:-webkit-grab;
}

#carousel .item img {
  display: block;
  width: 100%;
  height: auto;
}

/* Styling Pagination*/
.owl-theme .owl-controls .owl-page span{
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
  width: 100px;
  height: 5px;
  margin-left: 2px;
  margin-right: 2px;
  background: #ccc;
  border:none;
}

.owl-theme .owl-controls { margin-top: -63px; }

/*
REGISTER
SUCCESS
*/
.register-success-box {
  padding-top: 8rem;
  margin: 0 auto;
  text-align: center;
}

#click-login-btn {
  width: 250px;
  height: 70px;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-weight: 500;
  color: #fff;
  background-color: #e02e3c;
  border: none;
  border-radius: 45px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
  cursor: pointer;
  outline: none;
}

/*
HOME
*/
h2 { font-family: 'SourceSansPro-Semibold'; }

#home-signup-section {
  font-family: 'SourceSansPro-Regular';
  background-color: #e02e3c;
  height: 15vh;
  color: #fff;
}

#home-signup-section .row { padding: 66px 0;}

#home-signup-section p { padding: 5px 0; }

#home-signup-btn {
  border: 2px solid #fff;
  border-radius: 25px;
  background-color: #fff;
  color: #000;
  float: right;
  padding: 5px 45px;
}

.bg-gray { background-color: #EAEBEB; }

.howitworks {
  position: relative;
  margin-top: 3rem;
}

.howitworks-desktop { display: block; }

.howitworks-mobile { display: none; }

.howitworks h3 {
  font-weight: bold;
  font-family: 'SourceSansPro-Regular';
}

.howitworks h2,
.howitoperate h2,
.related-cooperation h2 {
  margin-bottom: 25px;
}

.howitworks h3:before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;
  vertical-align: middle;
}

.howitworks .one:before { background: url("/img/flag1.png") no-repeat; }

.howitworks .two:before { background: url("/img/flag2.png") no-repeat; }

.howitworks .three:before { background: url("/img/flag3.png") no-repeat; }

.howitworks .four:before { background: url("/img/flag4.png") no-repeat; }

.line {
  width: 100%;
  border-bottom: dotted 2px red;
  position: absolute;
  top: 105px;
}

.howitworks p { padding: 15px 0; }

.home-race h2 { text-align: center; }

.wbtn {
  border-radius: 25px;
  padding: 5px 30px;
  font-size: 18px;
  text-transform: uppercase;
  font-family: 'SourceSansPro-Regular';
  letter-spacing: 2px;
}

.home-join-desktop { display: block; }
.home-join-mobile { display: none; }

.ql-editor {
  min-height: 500px;
  overflow: auto;
}

.admin-navbar {
  background-color: #212d33;
  border-color: #666 !important;
  border-width: 0 0 .1px 0 !important;
}

.dashboard-grid {
  display: -ms-grid;
  display: grid;
  grid-template-columns: 1fr 8fr;
}

.sidebar {
  min-height: 100vh;
  background-color: #505050;
}

.sidebar li {
  list-style: none;
  padding: 10px;
}

.sidebar li:hover { background: #29383f; }

.sidebar li.active {
  position: relative;
  background: #1b252a;
}

.sidebar .children > li { padding-left: 25px; }

.sidebar .children li.active { background: #27353c; }

.sidebar li.active + div > li:after {
  content: "\25C4";
  color: #fff;
  position: absolute;
  top: 5px;
  right: -2px;
  font-size: 25px;
  font-weight: bold;
}

.sidebar a {
  color: #fff;
  display: block;
  font-size: 16px;
  padding-left: 10px;
  font-family: 'SourceSansPro-Light';
}

.sidebar a:hover {
  text-decoration: none;
  color: #fff;
}

.sidebar i {
  font-size: 25px !important;
  padding: 0 5px;
}

#index-displayrace-desktop { display: block; }
#index-displayrace-mobile { display: none; }

/*
RACE LIST
*/
.raceslisting a:hover { text-decoration: none; }

.raceslisting h2 {
  text-align: center;
  margin: 20px 0;
}

.race-box {
  padding: 0;
  margin-bottom: 3rem;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.raceslisting .race-img {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 200px;
  /*height: 270px;*/
}

.raceslisting img {
  /*position: absolute; for banner*/
  position: relative;
  margin: auto;
  /*min-height: 100%;
  min-width: 100%;
  left: -100%;
  right: -100%;
  top: -100%;
  bottom: -100%;
  width: 335px;
  height: 255px;*/
  width: 100%;
  height: auto;
  /*height: 100%; for banner */
  top: 0;
  left: 0;
}

.raceslisting-date,
.race-caption h5 {
  font-family: 'SourceSansPro-Semibold';
  text-align: left;
}

.raceslisting .raceslisting-date {
  color: #df2e3c;
  font-size: 14px;
}

.raceslisting .race-caption h5 {
  color: #000;
  height: 50px;
}

.raceslisting .race-caption { padding: 20px 25px; }

.raceslisting .pagination {
  justify-content: center;
}

/*
RACE DETAILS
*/
.displayrace {
  margin-top: 40px;
  margin-bottom: 10rem;
}

.displayrace img { max-width: 100%; }

#countdown-timer,
#countdown-closed,
#engrave-timer{ font-family: 'SourceSansPro-Semibold'; }

#countdown-timer li,
#countdown-closed li,
#engrave-timer li {
  display: inline-block;
  font-size: 18px;
  list-style-type: none;
  padding: 1rem 8px;
}

#countdown-timer li span,
#countdown-closed li span,
#engrave-timer li span {
  font-size: 18px;
}

#countdown-closed,
#countdown-timer,
#engrave-timer { display: none; }

.race-details { text-align: left; }

.displayrace h2,
.displayrace h3,
.displayrace h5,
.displayrace h6 { font-family: 'SourceSansPro-Semibold'; }

.displayrace h2 {
  font-weight: bold;
  text-transform: uppercase;
}

.displayrace h4 {
  font-family: 'SourceSansPro-Light';
}

.displayrace h5 {
  color: #df2e3c;
  margin-bottom: 2rem;
  font-size: 17px;
}

.displayrace h6 {
  font-weight: bold;
  font-size: 18px;
  margin-top: 1.5rem;
}

.details-block p {
  color: #000;
}

.details-block a {
  color: #df2e3c;
}

.accordion {
	background: none;
  color: #444;
  cursor: pointer;
  padding: 5px 0;
  border: none;
  text-align: left;
  outline: none;
  transition: 0.4s;
}

.accordion:focus {outline:0;}

.accordion:after {
  content: '\f0da';
  font-family: FontAwesome;
  color: #df2e3c;
  float: left;
  margin-left: 5px;
}

.displayrace .active:after {
  content: "\f0d7";
  font-family: FontAwesome;
  color: #df2e3c;
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.awards-block { margin-bottom: 5rem; }

.register-box {
  display: block;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  width: 315px;
  float: right;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding: 1.5rem;
  text-align: left;
}

.register-box-mobile,
.finisher-mobile { display: none; }

.register-box h3 { color: #df2e3c; }

.race-register-btn { transition: 0.3s; }

.race-register-btn,
.register-btn-disabled {
  text-align: center;
  display: block;
  border: none;
  color: #fff;
  background-color: #e93537;
  width: 100%;
  padding: .5rem;
  border-radius: 5px;
  font-family: 'SourceSansPro-Semibold';
  height: 40px;
  font-size: 16px;
}

.race-register-btn a,
.race-register-btn:hover {
  color: #fff;
  text-decoration: none;
  font-family: 'SourceSansPro-Semibold';
  border-radius: 25px;
}

#countdown-line { visibility: visible; }
#countdown-br { display: none; }

/*
REGISTER RACE
*/
#registerrace { padding-top: 5rem; }

#registerrace .ant-btn-primary,
#registerrace .ant-btn:focus,
#registerrace .ant-btn:hover,
#registerrace .ant-btn:active {
  color: #fff;
  border-color: #e02e3c;
  background: #e02e3c;
}

#registerrace #next-button,
#registerrace #prev-button { display: none; }

#register-race-next,
#register-race-payment { float: right; }

#register-race-next,
#register-race-prev {
  width: 85px;
  margin-top: 1rem;
  height: 40px;
}

#register-race-payment {
  width: 120px;
  margin-top: 1rem;
  height: 40px;
}

.buttonload {
  background-color: #E02E3C;
  border: none;
  color: white;
  border-radius: 4px;
}

/* Add a right margin to each icon */
.fa {
  margin-left: 4px;
  margin-right: 8px;
}

ol.progtrckr li.progtrckr-done:before:hover {
  color: #fff;
}

#registerrace svg:not(:root),
#registerrace .anticon-close-circle:before, .anticon-cross-circle:before,
#registerrace .anticon-calendar:before,
#registerrace .anticon-check-circle:before { display: none; }

#registerrace .ant-steps-item-process .ant-steps-item-icon { background: #e02e3c; }

#registerrace .ant-steps-item-process .ant-steps-item-icon,
#registerrace .ant-steps-item-finish .ant-steps-item-icon { border-color: #e02e3c; }

#registerrace .anticon-check:before { color: #e02e3c; }

#registerrace .ant-steps-item-finish>.ant-steps-item-content>.ant-steps-item-title:after { background-color: #e02e3c; }

.footer-buttons { display: none; }

/*
OFFLINE EVENTS
*/
.offline {
  width: 45%;
  margin: 0 auto;
}

#offline-select { float: right; }

.offline .ant-list { margin-top: 1rem; }

.offline .ant-list-item-meta-title>a { color:  #e02e3c; }

#offline-date-block { text-align: center; }

#offline-date-block #first { padding-left: 4px; }

#offline-date-block #second {
  font-size: 1rem;
  font-weight: normal;
  color: rgba(0,0,0,.45);
}

.offline-details #banner {
  max-height: 750px;
  width: 100%;
}

.offline-details .details { margin: 3rem 0; }

.offline-details .details a { color: #e02e3c; }

.offline-details h3 { font-weight: bold; }

.offline-details table th { width: 120px; }

.offline-details .details-gallery img { width: 100%; }

/*
ABOUT US
*/
#aboutus h4,
#aboutus p {
  width: 60%;
  margin: 0 auto 3rem auto;
}

/*
GUIDE
*/
.guide-steps p {
  width: 45%;
  margin: 0 auto 1rem auto;
}

.guide-steps img {
  margin-bottom: 2rem;
}

.guide img {
  width: 100%;
  margin: 0 auto 3rem auto;
}

.guide .img-vertical img {
  width: auto;
}

.guide-index a,
.guide a {
  color: #E02E3C;
}

.guide-index a:hover,
.guide a:hover {
  text-decoration: none;
}

.guide-index ol li {
  text-align: left;
  margin-bottom: 1rem;
}

.guide-index-2 ul li {
  text-align: left;
  margin-bottom: 1rem;
}

.guide-index-2 ol li {
  margin-bottom: 0;
}

.guide p {
   text-align: left;
}

/*
HOW IT WORKS
*/
#howitworks,
#howitoperate {
  margin: 5rem 0;
  text-align: center;
}

#howitworks img { margin-bottom: 1rem; }

#howitworks h3,
#howitoperate h3 { font-family: 'SourceSansPro-Semibold'; }

/*
RELATED COOPERATION
*/
.related-desc { margin-bottom: 3.5rem; }

.related h5 { font-weight: bold; }

/*
CONTACT US
*/
#contactus { padding-top: 3.5rem; }

#contactus h2,
#contactus p { text-align: center; }

#contactform-en,
#contactform-ms,
#contactform-zh {
  margin: 3rem auto 0 auto;
  width: 50%;
}

.contactus-radio {
  width: 48%;
  padding-left: 3.5rem;
}

/*
USER DASHBOARD
*/
.userdash h3 { font-family: 'SourceSansPro-Semibold'; }

.user-profile-block,
.user-strava-block,
.user-medal,
.user-history,
.user-current,
.user-others {
  width: 80%;
  margin: 0 auto 3.5rem auto;
}

.userprofile-name {
  font-family: 'SourceSansPro-Semibold';
  font-size: 25px;
}

.userprofile-motto,
.userprofile-id { font-size: 15px; }

.userprofile-motto { color: #df2e3c; }

.userprofile-id { color: #000; }

.user-edit { margin-top: 10px; }

.user-medal .row,
.user-current .row {
  font-family: 'SourceSansPro-Semibold';
  margin-top: 2.5rem;
}

.user-strava-block #border-right { border-right: 1px solid #e7eced; }

.user-strava-block h6 {
  font-family: 'SourceSansPro-Semibold';
  font-size: 20px;
  margin-top: 10px;
}

.user-strava-block span { font-size: 15px; }

.userdash #view-all { float: right; }

.userdash #view-all a {
  color: #df2e3c;
  font-family: 'SourceSansPro-Semibold';
}

.userdash #view-all a:focus { text-decoration: none; }

#user-medal-frame {
  background-color: #5e6265;
  border: solid 3vmin #393838;
  border-bottom-color: #282726;
  border-left-color: #393838;
  border-radius: 2px;
  border-right-color: #393838;
  border-top-color: #282726;
  box-shadow: 0 0 5px 0 rgba(0,0,0,.25) inset, 0 5px 10px 5px rgba(0,0,0,.25);
  box-sizing: border-box;
  display: inline-block;
  margin: 25px auto;
  width: 100%;
  padding: 4vmin;
  position: relative;
  text-align: center;
  background-size:contain;
  height: 350%;
}

#medal-msg {
  font-size: 15px;
  font-family: 'SourceSansPro-Light';
  color: #fff;
}

#user-medal-frame img { width: 100%; }

#user-medal-frame .ant-btn {
  background-color: transparent;
  height: 200px;
  border: none;
}

#user-medal-frame .ant-btn:active,
#user-medal-frame .ant-btn:focus,
#user-medal-frame .ant-btn:hover,
#user-medal-frame .ant-btn .ant-click-animating-node, [ant-click-animating-without-extra-node]:after,
#user-medal-frame [ant-click-animating-without-extra-node]:after {
  border: none;
  background-color: transparent;
}

#user-medal-frame .row { margin-top: 0; }

#dash-medal-modal { text-align: center; }

#btn-view-race-info {
  font-family: 'SourceSansPro-Semibold';
  background-color: red;
  color: #fff;
  border-radius: 5px;
  padding: 10px 10px;
  margin-top: 1rem;
  transition: 0.3s;
}

#btn-view-race-info:hover { border-radius: 25px; }

#dash-medal-img { max-width: 250px; }

#dash-medal-modal h3 { margin-bottom: 2rem; }

#user-history { margin: 6rem auto 9rem auto; }

#user-history-none { margin: 5rem 0 9rem 0; }

.user-medal #modal-img { width: 60%; }

body.modal-open { overflow: visible; }

#user-history-joined {
  margin-top: 1rem;
  padding: 2rem;
}

#user-history-joined img {
  max-width: 100%;
  max-height: 100%;
}

.current-listing img {
  position: absolute;
  margin: auto;
  width: 100%;
  height: 95%;
  top: 0;
  left: 0;
}

.current-listing .race-img {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 180px;
}

.current-listing .race-caption h5 {
  color: #000;
  height: 50px;
  font-size: 17px;
}

.current-listing .raceslisting-date {
  color: #df2e3c;
  font-size: 13px;
}

.current-listing .race-caption { padding: 5px 25px 20px 25px; }

#joined-medal { width: 100%; }

#user-history-header { margin-bottom: 2rem; }

.user-history-joined {
  border: 1px solid #DFE3E8;
  margin: 1.5rem 0;
}

.user-history-joined-content { padding: 2rem; }

.user-history-joined hr { margin: 1rem 0 1.5rem 0; }

#progress-race-end { float: right; }

#progress-race-start,
#progress-race-end { font-size: 15px; }

.user-history-joined h4 {
  font-size: 1.5rem;
  height: 3rem;
}

.submission-info { font-size: 15px; }

#joined-race-footer .col-sm-4 {
  float: none;
  text-align: center;
}

#joined-race-footer .ant-btn {
  line-height: 2.5;
  height: 55px;
  padding: 0;
}

#joined-race-footer img { margin-bottom: -8px; }

#joined-race-footer span { font-size: 12px; }

#joined-race-footer .ant-btn:active,
#joined-race-footer .ant-btn:focus,
#joined-race-footer .ant-btn:hover,
#joined-race-footer .ant-btn,
#joined-race-footer .ant-click-animating-node, [ant-click-animating-without-extra-node]:after {
  border: none;
  background-color: transparent;
}

#joined-race-footer [ant-click-animating-without-extra-node]:after { border-color: #fff; }

#race-bib-canvas {
  max-width: 100%;
  height: auto;
}

#btn-download-canvas {
    background-color: red;
    color: #fff;
    border-radius: 5px;
    padding: 5px 10px;
    float: right;
}

.user-others { margin-top: 3rem; }

.user-others a { color: #505050; }
.user-others a:hover { color: #E02E3C; }

.tabs [class^="tab"] label,
.tabs [class*=" tab"] label { font-family: 'SourceSansPro-Semibold'; }

/*
JOINED RACES
*/
#joined-current h4,
#joined-past h4 {
  font-size: 1.3rem;
  height: 3rem;
}

#joined-current p,
#joined-past p { font-size: 15px; }

.joineddash {
  width: 50%;
  margin: 0 auto;
}

.submission-info-row { margin-top: 8px; }

/*
SUBMISSION
*/
#strava-form-change { color: red; }

#submission-form .ant-form-item-required:before { float: left; }

#submission-form .ant-form-item-control { width: 445px; }

#route-uploader {
  border: 1px dashed #ccc;
  background: #f2f2f2;
}

#submission-history-table {
  width: 100%;
  text-align: center;
}

#submission-history-table tr:nth-child(even){ background-color: #ddd; }

#submission-history-table tr th { width: 33%; }

#delete-btn {
  border: none;
  color: #fff;
  background-color: #e93537;
  border-radius: 5px;
  font-size: 12px;
  font-family: 'SourceSansPro-Semibold';
  transition: 0.3s;
}

#delete-btn:hover {
  color: #fff;
  text-decoration: none;
  font-family: 'SourceSansPro-Semibold';
  border-radius: 25px;
}

/*
MEDALS
*/
.medaldash {
  width: 45%;
  margin: 0 auto;
}

.medaldash #user-medal-frame {
  height: 100%;
  padding: 0 4vmin;
}

.medaldash #user-medal-frame img {
  margin: 2.5rem 0;
}

.medaldash #modal-img { width: 60%; }

.medaldash #medal-msg {
  display: block;
  padding-bottom: 2rem;
}

/*
ORDERS
*/
.orders-block {
  width: 50%;
  margin: 0 auto;
}

#orders-hr {
  border-bottom: 1px solid #ddd;
  margin: 2.5rem 0 3rem 0px;
}

.orders-block p {
  font-size: 15px;
}

.orders-info,
.orders-subheading,
.orders-desc,
.ant-timeline-item-content {
  font-family: 'SourceSansPro-Regular';
}

#parcel-btn {
  background: none;
  border: none;
  color: #e02e3c;
}

#parcel-btn:hover {
  cursor: pointer;
  text-decoration: underline;
}

/*
RANK
*/
.rank-table { margin-top: 1rem; }

/*
PAYMENT
*/
#paymentfailure,
#paymentsuccess { padding-top: 8rem; }


/*
RESPONSIVE
*/
@media screen and (max-width: 1680px) {
  .medaldash,
  .joineddash { width: 55%; }
  #carousel-desktop .owl-item .item img { width: 102%; }
}

@media screen and (max-width: 1440px) {
  #home-signup-section { height: 18vh; }

  .raceslisting .race-img { height: 200px; }

  .current-listing .race-img { height: 170px; }

  .medaldash,
  .joineddash,
  .offline { width: 60%; }
}

@media screen and (max-width: 1366px) {
  .medaldash,
  .joineddash,
  .offline { width: 65%; }
}

@media screen and (max-width: 1024px) {
  #navbar { display: none !important;}

  #navbar-mobile,
  #navbar-mobile-logo { display: block; }

  #navbar-logo { display: none; }

  .navbar-brand img {
    position: absolute;
    z-index: 1;
  }

  #topbar .dropdown-item { color: #000; }

  .navbar-header { width: 100%; }

  .navbar { background: #505050; }

  .navbar li a { color:#fff; }

  .navbar li { text-align: center; }

  .navbar-toggle {
    background: none;
    border: 0;
    vertical-align: middle;
    float: right;
    padding-top: 6px;
  }

  .bar {
    width: 30px;
    height: 3px;
    background-color: #fff;
    margin: 6px 0;
  }

  .owl-theme .owl-controls { margin-top: -27px; }

  #carousel-desktop { display: none; }
  #carousel-mobile { display: block; }
  #carousel-mobile #carouselm img { width: 100%; }

  #homebanner { height: 22vh; }

  #home-signup-section { height: 12vh; }

  #home-signup-section .row { padding: 22px 0; }

  .howitworks-desktop { display: none; }

  .howitworks-mobile { display: block; }

  .howitworks h3 { font-size: 1.15rem; }

  #howitworks { margin: 2rem 0; }

  #index-displayrace-desktop { display: none; }
  #index-displayrace-mobile { display: block; }

  .raceslisting .race-img { height: 160px; }

  .raceslisting .race-caption {
    padding: 15px 25px 20px 25px;
  }

  .raceslisting .race-caption h5 {
    height: 30px;
    font-size: 15px;
  }

  .raceslisting .raceslisting-date { font-size: 12px; }

  .register-box { width: 280px; }

  .user-profile-block, .user-strava-block,
  .user-medal, .user-history,
  .user-current, .user-others { width: 100%; }

  .medaldash,
  .joineddash,
  .offline { width: 85%; }
}

@media screen and (max-width: 800px) {
  #countdown-timer,
  #engrave-timer { margin-top: 1rem; }
  #countdown-timer li,
  #engrave-timer li { padding: 0px 8px; }
}

@media screen and (max-width: 768px) {
  #footer-logo { width: 60%; }

  .footer-social { margin: 3rem 0 1rem 0; }

  .footer-social img { width: 15%; }

  #footer-content p { margin-bottom: 0; }

  #footer-title-hr { margin: 0 0 10px 0; }

  #footer-br { display: none; }

  #logo img { left: 0; }

  #homebanner { height: 21vh; }

  .owl-theme .owl-controls .owl-page span {
    width: 45px;
    height: 3px;
  }

  .home-join-desktop { display: none; }

  .home-join-mobile { display: block; }

  #home-signup-section .row { padding: 30px 0; }

  .wbtn {
    margin: 0 auto 50px auto;
    float: none;
    display:block;
    width: 12rem;
  }

  #aboutus h4,
  #aboutus p {
    width: 85%;
    margin: 0 auto 2.5rem auto;
  }

  #raceslisting-datebr { display: none; }

  .guide-steps p { width: 75%; }

  #howitworks p { margin-bottom: 3.5rem; }

  .raceslisting .race-img { height: 120px; }

  .raceslisting .race-caption h5 {
    height: 25px;
    font-size: 12.5px;
  }

  .raceslisting .raceslisting-date { font-size: 10px; }

  .displayrace h2 { font-size: 22px; }

  .displayrace h5 { font-size: 15px; }

  #countdown-timer,
  #engrave-timer { padding: 0; }

  #countdown-timer li,
  #countdown-timer li span,
  #countdown-closed li span,
  #engrave-timer li,
  #engrave-timer li span { font-size: 17px; }

  .register-box {
    width: 230px;
    padding: 1rem;
  }

  .register-box h3 { font-size: 20px; }

  #contactform-en,
  #contactform-ms,
  #contactform-zh { width: 100%; }

  #user-profile-right { padding-left: 3.5rem; }

  .user-history-joined h4 {
    font-size: 1.2rem;
    height: 2.5rem;
  }

  .user-history-joined p { font-size: 13.5px; }

  .submission-info { font-size: 12px; }

  .current-listing .race-img { height: 135px; }

  .current-listing .race-caption h5 { font-size: 13.5px; }

  .current-listing .race-caption h5 { height: 35px; }

  .current-listing .raceslisting-date { font-size: 10px; }

  .user-others a { margin: 1rem 0; }

  .medaldash,
  .joineddash,
  .offline { width: 100%; }

  canvas { width: 100%; }

  .ant-modal { width: 85% !important; }

  .register-box { display: none; }

  .register-box-mobile {
    display: block;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    width: 100%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    padding: 1.5rem;
    text-align: left;
    background: #fff;
    margin-bottom: 3rem;
    z-index: 1;
  }

  .finisher-mobile { display: block; }

  .offline-details #banner {
    max-height: unset;
    width: 100% !important;
  }
}

@media screen and (max-width: 414px) {
  #btmbar { height: 60px; }

  #topbar img {
    padding-top: 20px;
    width: 85px;
  }

  .navbar-toggle { margin-top: -10px; }

  #footer-logo { width: 35%; }

  #footer-logo {
    float: none;
    display: block;
    margin: 0 auto;
  }

  .footer-social { display: none; }

  .footer-social-mobile {
    display: block;
    margin-top: 2rem;
  }

  .footer-social-mobile img { width: 7%; }

  footer h5 { margin-top: 1.5rem; }

  #homebanner { height: 15.5vh; }

  #home-signup-section { height: 20vh; }

  #home-signup-section .row {
    padding: 20px 0;
    text-align: center;
  }

  #home-signup-btn {
    float: none;
    margin: 0 auto;
    display: block;
    padding: 5px 20px;
  }

  #aboutus h4,
  #aboutus p {
    width: 100%;
    margin: 0 auto 1.8rem auto;
  }

  .guide-steps p { width: 100%; }

  .howitworks h2,
  .howitoperate h2,
  .related-cooperation h2 { padding-top: 0; }

  .p-5 { padding: 1rem !important; }

  .raceslisting .race-img { height: 200px; }

  .raceslisting .race-caption h5 {
    height: 35px;
    font-size: 15px;
  }

  .raceslisting .raceslisting-date { font-size: 12px; }

  #countdown-line { display: none; }
  #countdown-br { display: block; }

  .user-strava-block #border-right { border: none; }

  #user-profile-left { width: 40%; }

  #user-profile-right {
    padding-left: 1rem;
    width: 60%;
  }

  .userdash h3 { font-size: 22px; }

  #dash-title-left { width: 60%; }
  #dash-title-right { width: 40%; }

  .user-strava-block .col-md-4 { width: 33.33%; }

  .user-strava-block img { width: 50px; }

  .user-strava-block h6 {
    font-size: 16px;
    margin-top: 5px;
  }

  .user-strava-block span { font-size: 13px; }

  #user-strava-en,
  #user-strava-ms,
  #user-strava-zh { margin-top: 3rem; }

  #user-medal-frame .col-md-4 { width: 33.33%; }

  #user-medal-frame .ant-btn {
    height: 70px;
    padding: 0;
  }

  #medal-msg { font-size: 12px; }

  #joined-race-footer .col-sm-4 { width: 33.33%; }
  #joined-race-footer .col-sm-3 { width: 25%; }

  .user-history-joined-content { padding: 1.5rem; }

  .user-history-joined,
  .user-current .col-sm-12 .col-md-4 { margin-bottom: 3rem; }

  .current-listing .race-img { height: 210px; }

  .user-others .col-sm-12 { margin: 1rem 0; }

  .userprofile-name { font-size: 22px; }

  .userprofile-motto, .userprofile-id { font-size: 14px; }

  #joined-current h4, #joined-past h4 { font-size: 1.1rem; }

  #joined-current p, #joined-past p { font-size: 14px; }

  .tabs [class^="tab"] label,
  .tabs [class*=" tab"] label { font-size: 1.1rem !important; }

  .ant-modal { width: 95% !important; }
  #submission-form .ant-form-item-control { width: 325px; }
  #submission-form #route-uploader {
    margin: 10px 0 !important;
    width: 325px !important;
    height: 325px !important;
    line-height: 325px !important;
  }
}

@media screen and (max-width: 375px) {
  #homebanner { height: 13vh; }

  #home-signup-section { height: 20%; }

  #user-profile-right { padding-left: 2rem; }

  .raceslisting .race-img { height: 200px; }

  .current-listing .race-img { height: 185px; }

  .userdash h3,
  .userdash #view-all a { font-size: 18px; }

  .userprofile-name { font-size: 20px; }

  .userprofile-motto, .userprofile-id { font-size: 13px; }

  #submission-form .ant-form-item-control { width: 300px; }
  #submission-form #route-uploader {
    width: 300px !important;
    height: 300px !important;
    line-height: 300px !important;
  }
}

@media screen and (max-width: 320px) {
  #topbar { font-size: 10px; }

  #navbar-mobile-logo { display: none; }

  #navbar-logo {
    display: block;
    width: 75px;
    top: 3px;
  }

  .navbar-toggle { margin-top: -15px; }

  #homebanner { height: 15.5vh; }

  #home-signup-section { height: 25vh; }

  .raceslisting .race-img { height: 150px; }

  .current-listing .race-img { height: 155px; }

  .user-history-joined h4 {
    font-size: 15px;
    height: 2rem;
  }

  .user-strava-block h6 { font-size: 14.5px; }

  .user-strava-block span { font-size: 11.5px; }

  .user-strava-block img { width: 40px; }

  .userdash h3,
  .userdash #view-all a { font-size: 16px; }

  .ant-avatar {
    width: 80px !important;
    height: 80px !important;
    line-height: 80px !important;
    font-size: 40px !important;
  }

  #user-profile-right { padding-left: 0; }

  .user-history-joined p { font-size: 11.5px; }

  .submission-info { font-size: 10px; }

  #progress-race-start, #progress-race-end { font-size: 11px; }

  #progress-race-end { padding-top: 10px; }

  #joined-race-footer img { width: 35px; }

  #joined-race-footer span { font-size: 10px; }

  #joined-race-footer .col-sm-4 { width: 30%; }

  #joined-current h4, #joined-past h4 {
    font-size: 1rem;
    height: 2rem;
  }
}