/* Following line is to fix an issue with font boosting on Android */
html * {max-height:1000000px;}

@font-face {
font-family: 'Montserrat Extrabold';
src: url('montserrat-extrabold.eot');
src: url('montserrat-extrabold.eot?#iefix') format('embedded-opentype'),
	 url('montserrat-extrabold.woff2') format('woff2'),
	 url('montserrat-extrabold.woff') format('woff'),
	 url('montserrat-extrabold.ttf') format('truetype'),
	 url('montserrat-extrabold.svg#montserratextra_bold') format('svg');
font-weight: normal;
font-style: normal;
}


/* LOADING */
html {
    -webkit-transition: background-color 1s;
    transition: background-color 1s;
}
html, body {
    min-height: 100%;
}
html.loading {
    background: #333 url('../img/loading.gif') fixed no-repeat 50% 50%;
    
	/* Ensures that the transition only runs in one direction */
    -webkit-transition: background-color 0;
    transition: background-color 0;
}
body {
    -webkit-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;
}
html.loading body {
    /* Make the contents of the body opaque during loading */
    opacity: 0;

    /* Ensures that the transition only runs in one direction */
    -webkit-transition: opacity 0;
    transition: opacity 0;
}


/* MAIN ELEMENTS */

body {
color: #000;
/*background-color: #fc4c02;*/
font-family: 'Open Sans', sans-serif;
font-size: 14pt;
font-weight: 300;
text-size-adjust: 100%;
-webkit-text-size-adjust:100%
}

a {
color: #fc4c02;
text-decoration: underline;
}

a:hover {
text-decoration: none;
}

sup {
vertical-align: super;
font-size: 0.6em;	
}

img {
-ms-interpolation-mode: bicubic; /* MS IE image scaling issue */
}


/* MASTHEAD */
#alert {
background-color: #000;
color: #fff;
padding: 10px;
font-size: 10pt;
border-bottom: 3px double #fc4c02;
line-height: 1.33em;
display: none;
}

#masthead {
color: #fff;
background-color: #fc4c02;
width: 100%;
padding: 20px 0 30px;
border-bottom: 3px double #fff; 
}

#masthead a, #masthead a:hover {
color: #fff;
text-decoration: none;
}

#masthead img {
display: block;
width: 80px;
height: 80px;
margin: 0 auto;
}

#masthead h1 {
font-family: 'Montserrat Extrabold', sans-serif;
text-transform: uppercase;
text-align: center;
font-size: 28pt;
margin-top: 10px;
font-weight: normal;
}

#masthead h1 span {
display: inline-block;
background: #d00;
font-size: 11pt;
padding: 4px;
border-radius: 5px;
vertical-align: top;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}

#masthead h2 {
font-size: 16pt;
text-align: center;
font-weight: 300;
line-height: 1.33em;
margin-top: 10px;
}


/* DONATION */
#donation {
margin: -103px 0 80px;
padding: 10px;
text-align: center;
background-color: #efefef;
border-top: 3px double #fc4c02;
border-bottom: 3px double #fff;	
}

#donation p.headline {
font-family: 'Montserrat Extrabold', sans-serif;
text-transform: uppercase;
font-size: 11pt;
color: #555;
}

#donation p.copy {
font-size: 9pt;
}

#donation form {
margin-top: 10px;
}


/* TOOLBAR */
#toolbar {
background: #eee;
padding: 5px 0;
text-align: center;
margin: -33px 0 30px;
border-top: 3px double #fc4c02;
}

#toolbar img#profile_medium {
display: inline-block;
border-radius: 31px;
margin: 0;
}

#toolbar p {
font-size: 11pt;
}


/* MAIN */

#main {
/*background-color: #fff;*/
width: 100%;
padding: 30px 0;
}

#main.home {
padding: 100px 0 30px;
}

#main h1, #main h2 {
font-family: 'Montserrat Extrabold', sans-serif;
text-transform: uppercase;
text-align: center;
font-size: 20pt;
margin-bottom: 10px;
font-weight: normal;
}

#main h1.fake_paragraph {
font-family: 'Open Sans', sans-serif;
text-transform: none;
font-weight: 300;
font-size: 14pt;
line-height: 1.33em;
}

#main p {
text-align: center;
line-height: 1.33em;
}

#main .line {
display: block;
width: 200px;
height: 5px;
background-color: #ddd;
margin: 50px auto 20px;
}

#main #join {
height: 300px;
width: 100%;
display: block;
background: url('../img/chain-background.jpg') no-repeat center center;
margin: -100px 0 50px;
padding-top: 140px;
border-bottom: 8px solid #fc4c02;
background-size: cover;
}

#main  #join h2, #main #join p {
	color: #fff;
}

#main a#connect_button {
background: url('../img/connect.png') no-repeat;
background-size: 100%;
width: 342px;
height: 63px;
display: block;
margin: 20px auto 80px;
}

#main a#connect_button:hover {
margin-top: 22px;
margin-bottom: 78px;
}

#main a#connect_button span {
display: none;
}

#main a#connect_button_2016 {
background: url('../img/connect-2016.png') no-repeat;
background-size: 100%;
width: 300px;
height: 75px;
display: block;
margin: 20px auto 80px;
}

#main a#connect_button_2016:hover {
margin-top: 22px;
margin-bottom: 78px;
}

#main a#connect_button_2016 span {
display: none;
}

#main img#profile {
display: block;
border-radius: 62px;
margin: 0 auto 10px;
}

#main.home img#profile {
margin-top: -60px;
}

#main p.headline {
font-weight: 700;
}

#main .menu_separator {
display: block;
width: 200px;
height: 50px;
margin: 40px auto 0px;
}

#main h2.tool_categories {
margin-bottom: -15px;
}


/* MENU */

#main .menu {
width: 560px;
margin: 30px auto;
display: block;
text-align: center;
padding: 20px;
border-radius: 20px;
color: #fff;
text-decoration: none;
clear: both;
background-color: #000;
height: 90px;
}

#main span.menu {
background-color: #efefef;
color: #444;
box-shadow: 1px 1px 5px #888;
}

#main a.menu:hover {
background-color: #fc4c02;
}

#main .menu h3 {
text-transform: uppercase;
font-family: 'Montserrat Extrabold', sans-serif;
margin: 10px 0;
font-size: 18pt;
}

#main .menu h3 span.beta {
background: #d00;
font-size: 8pt;
vertical-align: top;
padding: 2px;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
border-radius: 4px;
color: #fff;
}

#main a.menu:hover h3 span.beta {
background: #fff;
color: #fc4c02;
}

#main .menu p {
font-size: 11pt;
}

#main #logout {
text-align: center;
display: block;
width: 150px;
margin: 20px auto 30px;
}

#main #hp_badges, #main #hp_distance_elevation_badges {
width: 620px;
margin: 20px auto 10px;
text-align: center;
}

#main #hp_badges a, #main #hp_distance_elevation_badges a {
text-decoration: none;
}

#main #hp_badges a img {
width: 80px;
height: 80px;
margin: 2px 2px 5px;
}

#main #hp_distance_elevation_badges a {
display: inline-block;
font-size: 10pt;
color: #000;
width: 132px;
}

#main #hp_distance_elevation_badges a img {
width: 100px;
height: 100px;
margin: 2px 5px;
}


/* ICONS */

.icon {
display: block;
font-family: 'Montserrat Extrabold', sans-serif;
font-size: 50px;
width: 80px;
margin: 0 auto 15px;
padding: 15px 0;
color: #fff;
border: 5px solid #fff;
text-align: center;
box-shadow: 0px 0px 8px rgba(0,0,0,0.8);
}

#main .menu .icon {
float: left;
margin-bottom: 20px;
}

#kom-lister.icon {
background-color: #c2087a;
}

#kom-ranking.icon {
background-color: #1760ab;
}

#unfollower.icon {
background-color: #bf1426;
}

#fancounter.icon {
background-color: #2da734;
}

#distance-ranking.icon {
background-color: #ccb204;
}

#alltime_report.icon {
background-color: #00c6d1;
}

#ytd_report.icon {
background-color: #335511;
}

#elevation-ranking.icon {
background-color: #aa3355;
}

#popularity-ranking.icon {
background-color: #aa7811;
}

#clash.icon {
background-color: #ff0000;
}

#kom-profiler.icon {
background-color: #fecd12;
}

#watts-per-kilogram.icon {
background-color: #382596;
}

#watts-per-kilogram-ranking.icon {
background-color: #34bc60;
}

#fanbase-analysis.icon {
background-color: #ff9c23;
}

img.crown {
display: block;
width: 95px;
height: 61px;
margin: 0 auto 20px;
}



/* UNFOLLOWER ITEMS */
.item {
width: 600px;
margin: 20px auto;
clear: both;
}

.item img.profile {
display: block;
float: left;
border-radius: 31px;
margin-right: 10px;
}

.item .right {
float: right;
width: 520px;
margin: 5px 0 20px;
}

.item p {
text-align: left !important;
max-width: 380px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

.item p.name a {
text-decoration: none;
font-family: 'Montserrat Extrabold', sans-serif;
text-transform: uppercase;
}

.item p.name a:hover {
text-decoration: underline;
}

.item p.location {
font-size: 11pt;
}

.item .button {
width: 110px;
float: right;
margin-top: -45px;
font-size: 10pt;
padding: 10px;
}

.item .button span {
font-size: 14pt;
}


/* TOTALS */

#totals {
width: 600px;
margin: 0 auto;
padding: 20px 0;
background-color: #666;
color: #fff;
clear: both;
border-radius: 15px;
text-align: center;
}

#totals h3 {
font-family: 'Montserrat Extrabold', sans-serif;
text-transform: uppercase;
margin-bottom: 10px;
font-size: 18pt;
}


/* INFOGRAPHIC */

#infographic {
margin: 30px 0 0;
}

#infographic img.crown {
margin: 0 auto -10px;
}

#infographic img.separator {
display: block;
width: 127px;
height: 35px;
margin: 10px auto;
}

#infographic img.triangle {
display: block;
width: 56px;
height: 48px;
margin: 10px auto;
}

#infographic div {
margin: 20px 0;
}

#infographic p {
font-size: 24pt;
font-weight: 400;
line-height: 1em;
}

#infographic p.small {
font-size: 14pt;
margin-top: 5px;
line-height: 1.33em;
}

#infographic p.big {
font-family: 'Montserrat Extrabold', sans-serif;
font-size: 90pt;
line-height: 1em;
}

#infographic p.big.date, #infographic p.big.not_so_big {
font-size: 46pt;
}

#infographic p.big span.firstline {
margin-bottom: -30px;
display: block;
line-height: 1.33em;
}

#infographic p.big span.unit, #infographic p.aka {
font-family: 'Montserrat Extrabold', sans-serif;
font-size: 38pt;
display: block;
line-height: 1em;
margin-top: -8px;
}

#infographic .clock {
width: 720px;
margin: 0 auto -10px;
}

#infographic .clock p.big {
float: left;
width: 180px;
margin: 10px 0;
}

#infographic .clock p.big span.unit {
margin-top: -10px;
font-size: 22pt;
}

#infographic p.kom_list {
margin: 10px 0;
font-size: 18pt;
font-weight: 700;
}

#infographic p.kom_list strong {
font-family: 'Montserrat Extrabold', sans-serif;
display: block;
margin: 50px 0 20px;
font-size: 60pt;
font-weight: normal;
}

#infographic span.category {
font-family: 'Montserrat Extrabold', sans-serif;
background: #d00;
color: #fff;
border-radius: 20px;
width: 40px;
height: 30px;
display: inline-block;
padding: 10px 0 0;
font-size: 18pt;
font-weight: 400;
}

#infographic #rider_profile {
width: 250px;
height: 250px;
margin: 10px auto 0;
display: block;
border-radius: 135px;
border: 10px solid #FC4C02;
}

/* SHARE */

#share {
width: 600px;
margin: 0 auto;
text-align: center;
padding: 20px;
}

#share img.small_triangles {
margin: -20px 0 10px;
}
	
#share h3 {
margin-bottom: 10px;
font-size: 24pt;
font-weight: 400;
}

#share a {
margin: 10px;
text-decoration: none;
}

#share a:hover {
opacity: 0.6;
}

#share a img {
border-radius: 25px;
}

#share a img#share_whatsapp {
border-radius: 0;
}


/* CERTIFICATE BANNER */
a#certificate_banner {
background-color: #ffffff;
display: block;
width: 580px;
padding: 10px;
margin: 30px auto;
color: #000;
text-decoration: none;
border: 2px dashed #fc4c02;
border-radius: 10px;
}

a#certificate_banner:hover {
color: #fc4c02;
border: 2px solid #fc4c02;
}

a#certificate_banner img {
border: none;
float: right;
width: 178px;
height: 154px;
margin-left: 10px;
}

a#certificate_banner h4 {
font-family: 'Montserrat Extrabold', sans-serif;
text-transform: uppercase;
margin: 10px;
}

a#certificate_banner p {
font-size: 12pt;
text-align: left;
margin-left: 10px;
margin-bottom: 10px;
}


/* KOM RANKING MENU */
#kom_ranking_submenu {
border-bottom: 1px solid #ddd;
}

#kom_ranking_submenu h3.submenu_head {
margin: 30px 0;
text-align: center;
}

#kom_ranking_submenu .submenu_item {
width: 100%;
margin: 0;
border-top: 1px solid #ddd;
clear: both;
padding: 15px 0;
}

#kom_ranking_submenu .submenu_item .submenu_container {
width: 600px;
display: block;
margin: 0 auto;
}

#kom_ranking_submenu .submenu_item .submenu_container div {
float: right;
width: 460px;
padding-top: 10px;
}

#kom_ranking_submenu .submenu_item .submenu_container div h2 {
text-align: left;
font-size: 16pt;
}

#kom_ranking_submenu .submenu_item .submenu_container div p {
text-align: left;
font-size: 11pt;
margin-top: 10px;
}

/* RANKINGS */
#content_selector {
background: #222;
padding: 10px 0;
text-align: center;
font-family: 'Montserrat Extrabold', sans-serif;
font-size: 12pt;
text-transform: uppercase;
margin: 30px 0 0;
border-bottom: 1px solid #222;
min-width: 620px;
}

#category_selector {
background: #ccc url('../img/menu-arrow-1.png') no-repeat top center;
background-size: 20px 8px;
padding: 10px 0;
text-align: center;
font-weight: 700;
font-size: 10pt;
margin: 0;
border-bottom: 1px solid #ccc;
min-width: 620px;
}

#filter_selector {
background: #efefef url('../img/menu-arrow-2.png') no-repeat top center;
background-size: 20px 8px;
text-align: center;
font-size: 10pt;
padding: 10px;
margin: 0;
min-width: 620px;
}

#filter_selector.nocategory {
background: #efefef url('../img/menu-arrow-1.png') no-repeat top center;
background-size: 20px 8px;
}

#filter_selector.standalone {
background: #efefef !important;
margin: 30px 0 0;
border-top: 1px solid #ddd;
}

#filter_selector ul li, #content_selector ul li, #category_selector ul li {
display: inline-block;
margin: 0 8px;
}

#content_selector ul li a {
color: #888;
text-decoration: none;	
}

#filter_selector ul li a, #category_selector ul li a {
color: #555;
text-decoration: none;
}

#filter_selector ul li a:hover, #content_selector ul li a:hover, #category_selector ul li a:hover {
text-decoration: underline;
}

#filter_selector ul li a.current, #content_selector ul li a.current, #category_selector ul li a.current {
color: #fc4c02;
cursor: default;
}

#filter_selector ul li a.current:hover, #content_selector ul li a.current:hover, #category_selector il li a.current:hover {
text-decoration: none;
}

.ranking_badge {
width: 120px;
height: 120px;
margin: 0 auto 15px;
display: block;
}

a#lead_banner {
display: block;
width: 480px;
margin: 30px auto 0;
background-color: #fff;
text-align: center;
padding: 20px;
border-radius: 20px;
color: #fc4c02;
text-decoration: none;
clear: both;
border: 2px dotted #fc4c02;
}

a#lead_banner:hover {
background-color: #fc4c02;
color: #fff;
border: 2px solid #fc4c02;
}

a#lead_banner h3 {
text-transform: uppercase;
font-family: 'Montserrat Extrabold', sans-serif;
margin: 0 0 10px;
font-size: 16pt;
}

a#lead_banner p {
font-size: 12pt;
}

#ranking {
margin: 0 0 30px;
border-bottom: 1px solid #ddd;
}

#ranking .ranking_item {
width: 100%;
min-width: 620px;
margin: 0;
padding: 15px 0;
border-top: 1px solid #ddd;
text-align: center;
}

#ranking .ranking_item .position {
font-size: 18pt;
font-family: 'Montserrat Extrabold', sans-serif;
width: 85px;
text-align: center;
color: #fc4c02;
display: inline-block;
line-height: 60px;
vertical-align: top;
}

#ranking .ranking_item a {
text-decoration: none;	
}

#ranking .ranking_item img.profile {
width: 60px;
height: 60px;
border-radius: 30px;
display: inline-block;
margin: 0 10px;
}

#ranking .ranking_item .name {
font-size: 14pt;
width: 360px;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
display: inline-block;
line-height: 60px;
vertical-align: top;
white-space: nowrap;
}

#ranking .ranking_item img.small_arrow {
width: 14px;
height: 16px;
margin: 22px 5px;
}

#ranking .ranking_item .koms {
font-size: 16pt;
line-height: 60px;
vertical-align: top;
white-space: nowrap;
font-family: 'Montserrat Extrabold', sans-serif;
display: inline-block;
width: 125px;
text-align: left;
}

#ranking .ranking_item .meters, #ranking .ranking_item .followers {
text-align: center;
font-size: 14pt;
vertical-align: top;
white-space: nowrap;
font-family: 'Montserrat Extrabold', sans-serif;
display: inline-block;
width: 125px;
margin-top: 10px;
}

#ranking .ranking_item .meters span, #ranking .ranking_item .followers span {
font-size: 10pt;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
}

#ranking .ranking_item.highlight {
background-color: #fc4c02;
}

#ranking .ranking_item.highlight .position, #ranking .ranking_item.highlight .name, #ranking .ranking_item.highlight .koms, #ranking .ranking_item.highlight .meters, #ranking .ranking_item.highlight .meters a, #ranking .ranking_item.highlight .followers  {
color: #fff;
}

#ranking_report #ranking_report_intro {
font-family: 'Montserrat Extrabold', sans-serif;
margin-top: 20px;
font-size: 16pt;
}

#ranking_report #ranking_report_intro strong {
color: #fc4c02;
}

#ranking_report #ranking_report_position {
font-family: 'Montserrat Extrabold', sans-serif;
font-size: 70pt;
background-color: #fc4c02;
line-height: 60pt;
width: 500px;
margin: 10px auto;
color: #fff;
border-radius: 20px;
border: 3px double #fff;
}

#ranking_report #ranking_report_position span {
margin-bottom: 8px;
display: block;
}

#ranking_report #ranking_report_position.not_ranked {
font-size: 40pt;
padding-bottom: 0;
background-color: #d00;
margin-bottom: -10px;
}

#ranking_report #ranking_report_count {
font-family: 'Montserrat Extrabold', sans-serif;
color: #fc4c02;
font-size: 30pt;
margin-top: -10px;
}

#ranking_report #ranking_report_note {
font-size: 10pt;
margin: 10px 0 20px;
}

#ranking_report #circles {
text-align: center;
width: 500px;
margin: 0 auto;
}

#ranking_report #circles div {
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #fc4c02;
border-radius: 11px;
background-color: #fff;
margin: 0 3px;
}

#ranking_report #circles div.full {
background-color: #fc4c02;
}


/* CLASH */
#search_by_id {
margin: 20px auto;
padding: 20px;
background-color: #eee;
width: 580px;
border-radius: 20px;
}

#search_by_id h3 {
text-align: center;
font-family: 'Montserrat Extrabold', sans-serif;
font-weight: 400;
text-transform: uppercase;
margin: 20px 0 10px;
font-size: 16pt;	
}

#clash_results {
width: 620px;
margin: 30px auto;
}

#clash_results .left, #clash_results .right {
width: 250px;
font-family: 'Montserrat Extrabold', sans-serif;
font-size: 20pt;
padding: 30px 0;
}

#clash_results .left {
border-radius: 20px 0 0 20px;
}

#clash_results .right {
border-radius: 0 20px 20px 0;
}

#clash_results .middle {
width: 100px;
color: #fff;
background-color: #000;
font-size: 12pt;
}

#clash_results .first_row .middle {
border-radius: 20px 20px 0 0;
font-family: 'Montserrat Extrabold', sans-serif;
font-size: 20pt;
}

#clash_results .first_row .name {
font-family: 'Montserrat Extrabold', sans-serif;
font-size: 14pt;
max-width: 240px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin: 0 auto;
}

#clash_results .first_row .location {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-size: 10pt;
}

#clash_results td {
vertical-align: middle;
text-align: center;
}

#clash_results .first_row img {
display: block;
margin: 10px auto;
border-radius: 62px;
width: 124px;
height: 124px;
}

#clash_results .kom_factor .left, #clash_results .kom_factor .right {
background-color: #fc4c02;
font-size: 40pt;
padding: 20px 0 16px;
color: #fff;
}

#clash_results .last_update td {
padding: 5px;
}

#clash_results .last_update .left,  #clash_results .last_update .right {
font-size: 10pt;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}

#clash_results .last_update .middle {
border-radius: 0 0 20px 20px;
padding-bottom: 12px;
}

#kom_radar_comparison {
text-align: center;
padding-top: 20px;
width: 620px;
margin: -20px auto 0px;
}

#kom_radar_comparison h3 {
text-align: center;
font-family: 'Montserrat Extrabold', sans-serif;
text-transform: uppercase;
margin: 20px 0 10px;
font-size: 18pt;
}

#kom_radar_comparison canvas {
margin-left: 5px;
margin-top: 10px;
}

#kom_factor_note {
width: 580px;
padding: 20px;
margin: 10px auto 30px;
background-color: #ededed;
border-radius: 20px;
}

#kom_factor_note h3 {
text-align: center;
font-family: 'Montserrat Extrabold', sans-serif;
font-weight: 400;
text-transform: uppercase;
margin: 20px 0 10px;
font-size: 16pt;
}

#kom_factor_note p {
text-align: center;
font-size: 10pt;
}


/* KOM LISTER */
#lister_container {
margin: 0 0 30px;
border-bottom: 1px solid #ddd;
}

#lister_container .lister_item {
width: 100%;
min-width: 620px;
margin: 0;
padding: 20px 0;
border-top: 1px solid #ddd;
text-align: center;
}

#lister_container .lister_item .lister_item_container {
width: 600px;
display: block;
margin: 0 auto;
}

#lister_container .lister_item .lister_item_container .category {
width: 50px;
height: 35px;
border-radius: 25px;
display: inline-block;
padding-top: 15px;
font-size: 20px;
float: left;
color: #fff;
}

.category_D1, .category_D2 {
background: #222;
}

.category_FM, .category_TT1, .category_TT2 {
background: #0a0;
}

.category_SP {
background: #00b;
}

.category_MC {
background: #da0;
}

.category_WL {
background: #f50;
}

.category_HC, .category_C1, .category_C2, .category_C3, .category_C4 {
background: #b00;
}

#lister_container .lister_item .lister_item_container .segment_name {
width: 530px;
display: block;
float: right;
text-align: left;
font-weight: 700;
font-family: 'Montserrat Extrabold';
text-transform: uppercase;
font-size: 12pt;
margin-top: 7px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

#lister_container .lister_item .lister_item_container .segment_location {
width: 530px;
display: block;
float: right;
text-align: left;
font-size: 10pt;
color: #555;
margin-top: 5px;
}

#lister_container .lister_item .lister_item_container .data {
clear: both;
padding-top: 5px;
}

#lister_container .lister_item .lister_item_container .data span {
width: 176px;
margin: 0;
display: inline-block;
text-align: left;
font-size: 8pt;
margin: 10px 0 10px;
padding-left: 20px;
line-height: 16px;
}

#lister_container .lister_item .lister_item_container .data span.distance {
background: url('../img/icon-distance.png') no-repeat center left;
background-size: 16px 16px;
}

#lister_container .lister_item .lister_item_container .data span.grade {
background: url('../img/icon-grade.png') no-repeat center left;
background-size: 16px 16px;
}

#lister_container .lister_item .lister_item_container .data span.elevation {
background: url('../img/icon-elevation.png') no-repeat center left;
background-size: 16px 16px;
}

#lister_container .lister_item .lister_item_container .data span.date {
background: url('../img/icon-date.png') no-repeat center left;
background-size: 16px 16px;
}

#lister_container .lister_item .lister_item_container .data span.time {
background: url('../img/icon-time.png') no-repeat center left;
background-size: 16px 16px;
}

#lister_container .lister_item .lister_item_container .data span.speed {
background: url('../img/icon-speed.png') no-repeat center left;
background-size: 16px 16px;
}

#lister_container .lister_item .lister_item_container .data span.heartrate {
background: url('../img/icon-heart.png') no-repeat center left;
background-size: 16px 16px;
}

#lister_container .lister_item .lister_item_container .data span.power {
background: url('../img/icon-power.png') no-repeat center left;
background-size: 16px 16px;
}

#lister_container .lister_item .lister_item_container .data span.vam {
background: url('../img/icon-vam.png') no-repeat center left;
background-size: 16px 16px;
}

#lister_container .lister_item .lister_item_container .links {
text-align: left;
font-size: 9pt;
margin-top: 12px;
border-top: 1px dotted #ddd;
padding-top: 18px;
padding-left: 3px;
}

#lister_container .lister_item .lister_item_container .links .strava {
background: url(../img/strava-icon-h40.png) no-repeat center left;
padding-left: 20px;
background-size: 16px 20px;
margin-right: 33px;
}

#lister_container .lister_item .lister_item_container .links .veloviewer {
background: url(../img/veloviewer-icon-h40.png) no-repeat center left;
padding-left: 23px;
background-size: 20px 20px;
}

#lister_totals {
margin-top: 30px;
padding: 20px 0;
background-color: #efefef;
border-top: 1px solid #ddd;
}

#lister_totals div {
width: 600px;
margin: 0 auto;
}	

#lister_totals span {
display: inline-block;
width: 196px;
font-size: 8pt;
margin: 1px 0;
}

#lister_totals #lister_totals_head {
font-family: 'Montserrat Extrabold', sans-serif;
text-transform: uppercase;
font-size: 12pt;
vertical-align: middle;
padding-left: 3px;
width: 193px;
}

#lister_totals #lister_totals_export {
font-size: 9pt;
}

#lister_totals span span {
width: 30px;
height: 22px;
border-radius: 15px;
text-align: center;
color: #fff;
font-size: 10pt;
padding-top: 8px;
}


/* WATTS PER KILOGRAM */
#watts_per_kilogram_note {
width: 580px;
padding: 20px;
margin: 10px auto 30px;
background-color: #ededed;
border-radius: 20px;
}

#watts_per_kilogram_note h3 {
text-align: center;
font-family: 'Montserrat Extrabold', sans-serif;
font-weight: 400;
text-transform: uppercase;
margin: 20px 0 10px;
font-size: 16pt;
}

#watts_per_kilogram_note p {
text-align: center;
font-size: 10pt;
}

#single_ride_form {
background-color: #fc4c02;
color: #fff;
padding: 15px 0;
margin: -10px 0 20px;
border-top: 3px double #fff;
border-bottom: 3px double #fff;
}

#single_ride_form h3 {
text-align: center;
font-family: 'Montserrat Extrabold', sans-serif;
}

#single_ride_form p {
font-size: 10pt;
margin: 10px 0;
}

#single_ride_form p.tip {
font-size: 8pt;
margin-bottom: 0;
}

#single_ride_watt_report {
width: 584px;
margin: 0 auto;
border: 8px solid #000;
border-radius: 20px;
}

#single_ride_watt_report .report_head {
font-family: 'Montserrat Extrabold', sans-serif;
font-size: 16pt;
padding: 5px 0;
text-transform: uppercase;
background-color: #000;
color: #fff;
border-bottom: 8px solid #000;
margin-bottom: -1px;
}

#single_ride_watt_report .report_data {
font-size: 11pt;
padding: 5px;
border-top: 1px solid #ddd;
}

#single_ride_watt_report .report_data strong {
font-family: 'Montserrat Extrabold', sans-serif;
font-weight: normal;
}

#single_ride_watt_report .report_data.relative_power {
background-color: #fc4c02;
color: #fff;
border-radius: 0 0 10px 10px;
}

#single_ride_watt_report_triangles {
display: block;
margin: 20px auto;
}

#single_ride_watt_report_result {
font-family: 'Montserrat Extrabold', sans-serif;
font-size: 28pt;
line-height: 1.1em !important;
}

/* CHARTS */
#charts {
width: 620px;
margin: 0 auto;
}

#charts h3 {
border-top: 1px solid #ccc;
margin: 30px 0 10px;
padding-top: 30px;
text-align: center;
font-family: 'Montserrat Extrabold', sans-serif;
text-transform: uppercase;
}

#charts p {
margin-bottom: 20px;
font-size: 12pt;
}


/* ADV */
#bottom_adv_container {
background: #fff;
text-align: center;
width: 100%;
padding-bottom: 30px;
}

#bottom_adv_container .desktop_ad {
display: block;
}

#bottom_adv_container .desktop_ad .adsbygoogle {
display:inline-block;
width:728px;
height:90px
}

#bottom_adv_container .mobile_ad {
display: none;
}

/* ABOUT */

#about {
background-color: #ddd;
padding: 30px 0 40px;
position: relative;
margin-top: -1px;
-webkit-filter: drop-shadow(rgba(0, 0, 0, 0.5) 0px -1px 1px);
}

#about:before {
content: "";
display: block;
position: absolute;
top: -10px;
width: 100%;
height: 10px;
background:
linear-gradient(
  45deg, transparent 33.333%,
  #ddd 33.333%, #ddd 66.667%,
  transparent 66.667%
),
linear-gradient(
  -45deg, transparent 33.333%,
  #ddd 33.333%, #ddd 66.667%,
  transparent 66.667%
);
background-size: 20px 40px;
}

#about h3 {
font-family: 'Montserrat Extrabold', sans-serif;
text-align: center;
font-size: 18pt;
margin-bottom: 10px;
text-transform: uppercase;
}

#about p {
max-width: 600px;
margin: 0 auto;
text-align: justify;
font-size: 10pt;
line-height: 1.5em;
}


/* FOOTER */

#footer {
background-color: #000;
color: #fff;
border-bottom: 3px double #fc4c02;
padding: 30px 0 0; 
text-align: center;
position: relative;
-webkit-filter: drop-shadow(rgba(0, 0, 0, 0.5) 0px -1px 1px);
}

#footer:before {
content: "";
display: block;
position: absolute;
top: -10px;
width: 100%;
height: 10px;
background:
linear-gradient(
  45deg, transparent 33.333%,
  #000 33.333%, #000 66.667%,
  transparent 66.667%
),
linear-gradient(
  -45deg, transparent 33.333%,
  #000 33.333%, #000 66.667%,
  transparent 66.667%
);
background-size: 20px 40px;
}

#footer #footer_container {
display: block;
margin: 0 auto;
width: 630px;
}

#footer #poweredby {
width: 220px;
float: left;
}

#footer #followme {
width: 320px;
float: right;
}

#footer h3 {
font-family: 'Montserrat Extrabold', sans-serif;
text-transform: uppercase;
text-align: center;
font-size: 18pt;
margin-bottom: 10px;
font-weight: normal;
}

#footer a.badge:hover  {
opacity: 0.6;
}

#footer a.badge img {
border-radius: 15px;
margin: 0 10px 30px;
}


/* COPYRIGHT LINE */

#copyright {
color: #fff;
text-align: center;
font-size: 10pt;
padding: 10px 0;
}

#copyright a {
color: #fff;
text-decoration: underline;
}

#copyright a:hover {
color: #000;
text-decoration: none;
}

#copyright p {
float: right;
margin-right: 20px;
margin-top: 18px;
}

#copyright #powered_by_strava img {
float: left;
margin-left: 10px;
width: 116px;
height: 50px;
}


/* GENERIC CLASSES */
.hidden {
display: none;
}

.red {
color: #d00 !important;
}

.green {
color: #0d0 !important;
}

.orange {
color: #fc4c02 !important;
}

.small {
font-size: 10pt;
}

.center {
text-align: center !important;
}

.odd {
background-color: #f6f6f6 !important;
}

.bold {
font-weight: 700;	
}

.margin_top_10 {
margin-top: 10px !important;
}

.margin_top_20 {
margin-top: 20px !important;
}

.margin_top_30 {
margin-top: 30px !important;
}

.margin_bottom_0 {
margin-bottom: 0 !important;
}

.margin_bottom_10 {
margin-bottom: 10px !important;
}

.margin_bottom_20 {
margin-bottom: 20px !important;
}

.margin_bottom_30 {
margin-bottom: 30px !important;
}

.margin_bottom_40 {
margin-bottom: 40px !important;
}

.margin_top_-10px {
margin-top: -10px !important;
}

.margin_top_-20px {
margin-top: -20px !important;
}

.margin_bottom_-20px {
margin-bottom: -20px !important;
}

.padding_bottom_0 {
padding-bottom: 0 !important;
}

.alert_green {
color: #fff;
font-size: 10pt;
font-weight: 400;
margin: 30px auto;
background-color: #4d5;
width: 600px;
padding: 10px 0;
border-radius: 10px;
}

.alert_yellow {
color: #fff;
font-size: 10pt;
font-weight: 400;
margin: 30px auto;
background-color: #ec0;
width: 600px;
padding: 10px 0;
border-radius: 10px;
}

.clearer {
display: block;
clear: both;
height: 1px;
}

.button {
display: block;
padding: 15px;
font-family: 'Montserrat Extrabold', sans-serif;
color: #fff;
background-color: #000;
border-radius: 15px;
text-transform: uppercase;
width: 300px;
margin: 30px auto;
text-align: center;
text-decoration: none;
font-size: 14pt;
border: none;
line-height: 1;
-webkit-appearance: none;
cursor: pointer;
}

.button:hover {
background-color: #fc4c02;
}

input.button {
width: 330px;
padding: 15px 0;
}

.button.no_hover:hover {
background-color: #000;
text-decoration: underline;
}

.button.wider {
width: 350px;
}

.id_input {
width: 300px;
font-size: 30pt;
margin: 0 auto;
display: block;
border-radius: 10px;
border: 1px solid #ddd;
text-align: center;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
color: #ccc;
letter-spacing: 0.2em;
}

.id_input.smaller {
font-size: 24pt;
}

.email_input {
width: 400px;
font-size: 16pt;
margin: 10px auto;
display: block;
border-radius: 10px;
border: 1px solid #ddd;
text-align: center;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
color: #ccc;
letter-spacing: 0.2em;
line-height: 30pt;
}

.centered_img {
margin: 10px auto;
display: block;
border-radius: 10px;
box-shadow: 1px 1px 10px #666;
width: 500px;
}

.meter { 
height: 12px;
position: relative;
background: #ddd;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 6px;
box-shadow: inset 0 3px 2px #bbb;
width: 250px;
margin: 5px auto 0 !important;
}

.meter span {
display: block;
height: 100%;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
box-shadow: inset 0 2px 9px  rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4); 
position: relative;
overflow: hidden;
}

.meter.green span {
background-color: rgb(43,194,83);
background-image: linear-gradient(center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69%);
}

.meter.yellow span {
background-color: #f1f165;
background-image: linear-gradient(to bottom, #f1f165, #f3bd0a);
}

.meter.red span {
background-color: #f0a3a3;
background-image: linear-gradient(to bottom, #f0a3a3, #f42323);
}

.meter.full span {
border-radius: 6px;
}

.meter_level_detail {
font-size: 12pt;
margin-top: 5px;
}


/* RESPONSIVE OVERRIDES */

@media only screen and (max-width: 1280px) {
#main #join {
height: 250px;
padding-top: 80px;
}
}

@media only screen and (max-width: 1024px) {
#infographic p {
font-size: 20pt;
}

#infographic p.big {
font-size: 60pt;
}

#infographic p.big.date, #infographic p.big.not_so_big {
font-size: 30pt;
}

#infographic p.big span.firstline {
margin-bottom: -12px;
line-height: 1.33em;
}

#infographic p.big span.unit, #infographic p.aka {
margin-top: -8px;
}

#infographic .clock {
width: 580px;
}

#infographic .clock p.big {
width: 145px;
}

#ranking .ranking_item .name {
width: 285px !important;
}

#bottom_adv_container .mobile_ad .adsbygoogle {
display:inline-block;
width:468px;
height:60px
}

#bottom_adv_container .desktop_ad {
display: none;
}

#bottom_adv_container .mobile_ad {
display: block;
}

#footer #footer_container {
width: 100%;
}

#footer #poweredby {
width: 100%;
float: none;
}

#footer #followme {
width: 100%;
float: none;
}
}


/* BROWSER SPECIFIC */
input[type='number'] {
    -moz-appearance: textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}