body { margin:0; padding:0; font-family: 'Exo 2', sans-serif; font-size:2em; color:#cc9900; text-align:center; font-weight:600; }
.bg {
	height:100vh;
	background: rgb(1,49,49);
	background: -moz-linear-gradient(180deg, rgba(1,49,49,1) 0%, rgba(0,87,79,1) 100%);
	background: -webkit-linear-gradient(180deg, rgba(1,49,49,1) 0%, rgba(0,87,79,1) 100%);
	background: linear-gradient(180deg, rgba(1,49,49,1) 0%, rgba(0,87,79,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#013131",endColorstr="#00574f",GradientType=1);
}
.bg .padd { padding:0 2% }

h1 { font-size:1.1em; text-transform:uppercase }
h2 { font-size:0.7em; color:#FFF; font-weight:normal }

.flapper { background:#222; display:inline-block; padding:10px; border-radius:10px }
.flapper .digit { margin-left:2px }
.flapper .digit:nth-child(4), .flapper .digit:nth-child(7) { margin-left:15px }
.flapper .digit:nth-child(4):before { content:'.'; position:absolute; font-size:1.2em; color:white; left:-0.19em; top:0px; }
.flapper .digit:nth-child(7):before { content:','; position:absolute; font-size:1.2em; color:white; left:-0.18em; top:0.01em; }

.group { display:flex; width:100%; align-items:center; justify-content:center }
.col { display:inline-block; float:none }

header { height:20vh }
section { height:70vh; display:flex; align-items:center; font-size:2.5em }
section > div { width:100% }
footer { height:10vh; font-weight:400 }

.counter big { font-size:1.3em; color:#FFF; font-weight:200 }
.white { color:#FFF }
/*.co2 { background:url(../img/co2-icon.png) 70% 33% no-repeat; background-size:50% }*/
.odometro { display:inline-block; background:url(../img/odometro.png) center bottom no-repeat; background-size:100%; max-width:90% }
.odometro { width:792px; height:401px; position:relative }
.odometro img { position:absolute; bottom:-1%; left:45%; width:10%; /*361px; */
	transform: rotate(-90deg);
    transform-origin: 50% 85%;
    transition: all 1s;
}
.s3 .odometro { width:90% }
/*.odometro canvas { width:650px }*/
.bike { border-radius:50% }
.cavalo { border-radius:50%; background:#0F0; text-align:center; overflow:hidden; max-width:400px; height:300px; margin:auto; display:flex }
.cavalo img { border-radius:0 }

.s6 img, .s7 img, .s8 img { border-radius:50%; max-width:70% }
.s6, .s7 { font-size:1.5em }
.s11 .padd > div { max-width:699px; margin:auto }
sub { font-size:0.5em; position:relative; top:-0.1em }

#graph { font-size:0.4em; font-weight:normal; color:#FFF; position:relative; width:0px; overflow:hidden }
#graph .img { position:relative }
#graph .img iframe { position:absolute; left:0; bottom:0 }
#graph .hora { background:#015049; width:100%; display:flex; text-align:center; justify-content:space-around; position:relative; top:-45px; padding:10px 0; position:relative; z-index:2 }
#graph .kwh { position:absolute; left:0; top:0; display:flex; height:84%; flex-direction:column-reverse; justify-content:space-between; font-size:0.7em; z-index:1 }
#graph .kwh div:first-child span { display:none }
.graph h2 { position:relative; top:-50px }

small { font-size:0.5em; font-weight:normal }