/* Colours
Primary: #012169
Secondary: #00C2FF
Accent: #d11515
Headings: Roboto
Body: Inter

Primary header
White content areas
Cyan buttons
Red highlights for points, rankings and "Top Scorer"
Large Roboto headlines
Story Script on "coming up" panels
Inter everywhere else */

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Story+Script&display=swap');
html,body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,a,em,img,strong,b,u,i,ol,ul,li,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,footer,header,menu,nav,output,section{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
html{height:100%}
body{display:flex;flex-direction:column;min-height:100vh;background-color:#fff;color:#393939;line-height:1;}
body,input,textarea,select{font-family:'Inter',sans-serif;font-size:1em;line-height:1.75em;color:#393939}
h1,h2,h3,h4,h5,h6{font-family:'Roboto',sans-serif;font-weight:700;color:#012169}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:inherit;text-decoration:none}
a{color:#012169;text-decoration:none;font-weight:700}
b,strong{font-weight:700}
.highlight{color:#d11515;font-weight:500}
em{font-style:italic}
hr{border-width:3px 0 0;border-top-color:#00C2FF;height:15px}
p{margin:0 0 .8em}
p.headline{font-size:1.2em;color:#012169;font-weight: 500}

#header{position:fixed;background:#012169;font-family:"Roboto",sans-serif;color:#fff;cursor:default;height:4.1em;width:100%;line-height:4em;text-align:right;z-index:604}
#header > #logo{display:inline-block;height:inherit;left:1.75em;line-height:inherit;margin:0;padding:0;position:absolute;top:.25em}
#header > #logo a{font-size:1.8em;color:#fff;font-weight:500;text-decoration:none}
#logo h1{display:inline-block;font-size:1.4em;font-weight:800;text-transform:uppercase;color:#fff}
#logo a{display:block;text-decoration:none}
#logo img{margin:0 .5em 0 0}
#logo img.logo{height:36px}
#header .login{float:right;display:flex;justify-content:center;align-items:center;margin:1em 1em 1em 0;width:80px;height:40px;background:#fff;color:#012169;font-family:'Open Sans',sans-serif;border-radius:20px}
.reg, .logout{display:none}
@media screen and (max-width: 650px) {
#header .login{display:none}
.reg, .logout{display:block}
}
@media screen and (max-width: 480px) {
#header{min-width:320px}
#header > #logo{left:.75em}
#header > #logo a{font-size:1.4em}
}
.hidden{display:none !important}

/* Wrapper */
#wrapper{flex:1;margin:6.8em auto 0;width:100%;position:relative}
/*#wrapper a{color:#007aba}
#wrapper strong,#wrapper b{font-weight:600}
#wrapper h1,#wrapper h2,#wrapper h3,#wrapper h4,#wrapper h5,#wrapper h6{color:#007aba;text-align:left;margin-bottom:0}
#wrapper hr{border-bottom-color:rgba(0,0,0,0.15)}
#wrapper input[type="submit"],#wrapper input[type="reset"],#wrapper input[type="button"],#wrapper .button{background-color:#3b6785;color:#fff!important;font-family:'Castoro Titling',serif}
#wrapper input[type="submit"]:hover,#wrapper input[type="reset"]:hover,#wrapper input[type="button"]:hover,#wrapper .button:hover{background-color:#d1e1e3;color:#3b6785!important}
#wrapper input[type="submit"]:active,#wrapper input[type="reset"]:active,#wrapper input[type="button"]:active,#wrapper .button:active{background-color:#3b6785}
#wrapper header p{color:#bfbfbf}
@media screen and (max-width: 1040px) {
#wrapper{margin:7.1em 0 0}
}*/

/* Banner */
#banner{position:relative;height:calc(80vh - 6.8em)}
.swapimages{position:absolute;width:100%;height:100%;object-fit:cover}
#banner .inner{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);z-index:2;width:80%;max-width:900px;border-radius:10px;border:1px #fff solid}
#banner h1{font-size:3.5em;margin:.5em 0 .75em;color:#fff;font-weight:400;text-align:center;letter-spacing:3px;font-family:"Roboto",sans-serif}
#banner h2{font-size:1.55em;margin:0 2em 1em;color:#FFF;font-weight:400;text-align:center;font-family:"Inter",sans-serif}
#banner .botright{position:absolute;bottom:.6em;right:20px;width:305px;color:#FFF;text-align:right}
@media screen and (min-width: 1300px) {
.swapimages{object-fit:contain}
#banner .botright{right:calc(((100vw - 1300px)/2) + 85px)}
}
@media screen and (max-width: 1040px) {
#banner{height:calc(80vh - 7.1em)}
}
@media screen and (max-width: 980px) {
#banner h1{margin-bottom:.5em}
}
@media screen and (max-width: 767px) {
#banner h1{font-size:2.5em;margin-bottom:.5em;padding-bottom:0}
#banner h2{font-size:1.25em;margin:0 .2em 1em}
}
@media screen and (max-width: 600px) {
.units{display:none}
}
@media screen and (max-width: 480px) {
#banner .inner{width:95%}
#banner h1{font-size:1.75em}
.no-mob{display:none}
}

/* Main */
.flex{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:stretch}
.flex .col1{width:260px}
.flex .col2{width:calc(100% - 260px)}

.main-container{background:#fff;flex:2;width:calc(100%)}
.maintext{padding:1.5em}
.maintext h1{margin:0 0 .6em;font-size:1.6em;text-transform:uppercase}
.maintext h2{margin:.2em 0 .5em;font-size:1.6em}
.maintext h3{font-size:1.4em}

.table{margin:1em 0;border:4px solid #012169}
.table_head{padding:.3em .6em;background:#d11515;color:#fff;font-family:'Roboto',sans-serif;font-weight:800;text-transform:uppercase;font-style:italic}
.table_head h3, .table_head h4{display:inline-block;color:#f8f8f8}
.table_foot{padding:0 .6em;background:#d11515;color:#fff;font-family:'Roboto',sans-serif;font-weight:400;border-top:2px solid #012169}
.row{border-top:2px solid #012169}
.col{display:inline-block;text-align:center;vertical-align:text-top}
.lb1{width:calc((96% - 30px) * .1)}
.lb2,.lb3{width:calc((96% - 30px) * .33)}
.lb4{width:calc((96% - 30px) * .12)}
.lb5{width:calc((96% - 30px) * .1)}
.lb6{width:30px}

table.arrows{width:280px;border:0;margin-left:1em}
table.arrows td{background-color:#d11515;text-align:center;padding:0;border:0;color:#fff;cursor:default}
table.arrows td a img,table.arrows td img{margin-top:.2em;background-image:url(../images/arrows_sprite.png)}
td a img.first{background-position:0 0;width:18px;height:13px;margin-right:8px}
td a img.previous{background-position:-18px 0;width:14px;height:13px}
td a img.next{background-position:-32px 0;width:14px;height:13px}
td a img.last{background-position:-46px 0;width:18px;height:13px;margin-left:8px}
td img.firstno{background-position:-64px 0;width:18px;height:13px;margin-right:8px}
td img.previousno{background-position:-82px 0;width:14px;height:13px}
td img.nextno{background-position:-96px 0;width:14px;height:13px}
td img.lastno{background-position:-110px 0;width:18px;height:13px;margin-left:8px}

.a_wrapper{display:flex;flex-direction:column;margin-top:1.8em}
.advert{width:auto;margin:0 14px 1em 0}
.advert img{display:block;margin:auto}
.your_advert_1{position:relative}
.your_advert_2{display:none}

.newsfeed{margin-bottom:1em;padding:.6em;border:2px solid #00C2FF;border-radius:10px}
.newsfeed h3{font-style:italic}
#more, #less{text-align:right;padding:0 .6em;text-decoration:none}
.none{display:none}
.inline-block{display:inline-block}
input.morenews{background-color: #fff;border:0;color:#00C2FF;font-weight:700}

.varfeed{margin-bottom:1em;padding:2.6em;background:#00C2FF;color:#FFF;border-radius:10px;text-align:center}
.varfeed h1{font-family:"Story Script","Roboto",sans-serif;font-size:2em;margin-bottom:0}
.varfeed h2{font-family:"Story Script","Roboto",sans-serif}
.varfeed li{list-style: inside url('/images/bike_bullet.png')}

@media screen and (max-width: 1024px) {
.flex .col2{width:100%}
.flex .col1{margin:unset;width:unset}
.col1{margin:0 auto !important}
.advert{margin: 16px 14px 0 0}
.flex .col1 .image,.flex .col2 .image{max-width:60%;margin:0 auto 2em}
.a_wrapper{flex-direction:row;margin-top:0}
.your_advert_1{display:none}
.your_advert_2{display:block;margin:12px 0}
}

@media (max-width: 767px) {
.login{font-size:.8em;margin-top:-1.8em}
}

@media screen and (max-width: 600px) {
.lb1{width:calc((100% - 40px) * .1)}
.lb2{width:calc((100% - 40px) * .4)}
.lb3{display:none}
.lb4{width:calc((100% - 40px) * .2)}
.lb5{width:calc((100% - 40px) * .2)}
.lb6{width:40px}
.a_wrapper{flex-direction:column;margin:0 0 16px}
.advert{margin:0 auto 24px}
.your_advert_1{display:block}
.your_advert_2{display:none}
}

@media screen and (max-width: 520px) {
.flex{border:0;margin-top:.5em}
.flex .col1 .image,.flex .col2 .image{max-width:85%}
.maintext{padding:1em}
}

/* Footer */
#footer{flex-shrink:0;background:#012169;padding:1.5em 0;font-family:'Inter',sans-serif;text-align:center;color:#fff}
#footer a{color:#fff}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #C8102E;
  color:#fff;
  margin: auto;
  padding: 20px;
  border-radius:4px;
  width: 80%;
  max-width:400px;
}

/* The Close Button */
.close {
  /*color: #aaaaaa;*/
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}