/* LAYOUT */
html { width:100%; height:100%; overflow:hidden; background:#2A3642; }
body { font:11px Lato, sans-serif; background:#F0F0F0; overflow:hidden; position:fixed; bottom:0; top:0; left:0; right:0 }
article { position:relative }

/* TEXT */
p { margin:20px; text-align:left; color:#717373 }
a { color:#29C7CA; text-decoration:none }

/* NAVIGATION */
#mainMenu { background:#2A3642; z-index:10; text-align:center }
#mainMenu ul { font-size:0 }
#mainMenu ul li a { 
	display:block;
	text-align:center;
	text-decoration:none;
}
#mainMenu ul li a .svg-icon { height:20px; fill:#C2CAD4 }
#mainMenu ul li a span { color:#C2CAD4; display:block; font-size:9px; margin-top:5px }
#mainMenu ul li a:hover * { fill:#FFFFFF; color:#FFFFFF }
#mainMenu ul li a.selected * { fill:#29C7CA; color:#29C7CA }
h1 span { display:none }

/* WINDOWS */
a.hideWindow, a.hideSection { position:absolute; right:0; top:0; text-decoration:none; color:#666; font-weight:300; font-size:25px; padding:10px 15px 0 }
#modalWindow { display:none; overflow:auto; background:#FFFFFF }
#calculator { display:none; text-align:center; background:#FFFFFF }


/* MODELS */
#models ul li img { display:block; height:50px; margin:0 auto }
#models ul li p { text-align:center; margin:5px 0 }
#models ul li p span {
	display:inline-block;
	font-size:9px;
	color:transparent;
	border:1px solid transparent;
	max-width:90%;
	border-radius:100px;
	padding:2px 5px;
	text-overflow:ellipsis;
	white-space: nowrap;
	overflow: hidden
}
#models ul li:hover p span { border-color:#BBB; color:#BBB }
#models ul li input:checked + p span { color:#FFFFFF; background:#29C7CA; border:1px solid #29C7CA }
input[type=radio] { display:none }

#parameters { font-size:0; border-top:1px solid #E8E8E8; border-bottom:1px solid #E8E8E8; }
#parameters label { display:inline-block; position:relative; vertical-align:top }
#parameters input[type=number] {
	-webkit-appearance: none;
	border:0;
	background:transparent;
	padding:20px 10px 7px;
	font-size:12px;
	font-weight:100;
	position:relative;
	z-index:1;
	color:#212323;
	height:46px;
	box-sizing:border-box;
}
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; display:none }
#parameters input[type=number]:placeholder-shown { color:#505152; font-size:11px; padding:22px 10px 7px }
#parameters label input[type=number] + span {
	position:absolute;
	top:0;
	left:0;
	text-align:left;
	right:0;
	bottom:0;
	height:46px;
	padding:9px 10px;
	line-height:30px;
	box-sizing:border-box;
	color:transparent;
	text-transform:uppercase;
	font-size:8px;
	font-weight:400;
	transition:all .3s ease;
	border-right:1px solid #E8E8E8;
}
#parameters label input[type=number]:valid + span { color:#909192; line-height:10px }
#parameters label input[type=number]:focus + span { background:#FAFAFA }
#parameters label input[type=number]:focus:valid + span { color:#29C7CA }
#parameters input[type="checkbox"] { display:none }
#parameters input[type="checkbox"] + span {
	font-size:9px;
	display:inline-block;
	background:#E8E8E8;
	line-height:46px;
	height:46px;
	padding:0 10px;
	text-transform:uppercase;
	color:#2A3642;
	cursor:pointer;
	box-sizing:border-box
}
#parameters input[type="checkbox"] + span .svg-icon { height:16px; fill:#2A3642; vertical-align:middle; margin-top:-3px }
#parameters input[type="checkbox"] + span:hover .svg-icon { fill:#29C7CA }
#parameters input[type="checkbox"]:checked + span { background:#29C7CA; color:#FFFFFF }
#parameters input[type="checkbox"]:checked + span .svg-icon { fill:#FFFFFF }

#info { padding:30px 10px }
#info img.avatar { width:160px; margin:0 auto }
#info h2 { font-size:13px; margin:5px; font-weight:300; color:#999999 }
	#compareButton { display:inline-block; margin:0 auto }
	#ICEinfo { display:none }
	.specs { margin:15px 15px 20px }
	.specs li { font-size:12px; font-weight:300; text-align:left; display:inline-block; margin:5px 7px }
	.specs li em { font-size:1.2em; font-style:normal }
	.specs li .svg-icon { height:10px; width:10px; fill:#29C7CA; margin-right:2px; display:inline-block }
	.specs li span { display:block; font-size:0.8em; color:#999 }

a.button { font-size:11px; padding:5px 10px; border:1px solid #29C7CA; color:#29C7CA; text-decoration:none; border-radius:3px }
a.button:hover { background:#29C7CA; color:#FFFFFF }

#stats { display:none; text-align:center }
h3 { font-weight:300; text-align:left; color:#999999; padding:30px 30px 10px }

#indicators li { color:#29C7CA; display:inline-block; font-size:12px }
#indicators li small { font-size:8px; text-transform:uppercase; color:#666; line-height:1.5em; display:block }

#benefits { margin:20px auto; text-align:center; font-size:11px; }
#benefits li { display:inline-block; max-width:90px; padding-left:27px; text-align:left; margin:10px 5px; vertical-align:top }
#benefits li img { height:24px; margin-left:-27px; float:left }

ul.barGraph {
	list-style:none;
	text-align:left;
	padding-bottom:8px;
	border-bottom:1px solid #BBBBBB;
	position:relative;
}
aside.scaleLabel { display:inline-block; padding:2px 0; position:absolute; bottom:0; right:0; color:#999999; font-size:9px }

ul.barGraph > li { padding:10px 0; position:relative; text-align:left; margin-bottom:1px }
ul.barGraph > li > p {
	text-align:center;
	position:absolute;
	top:0;
	left:0;
	text-align:center;
	font-size:9px;
	color:#666666;
	vertical-align:top;
	margin:10px 0
}
ul.barGraph > li > p > .svg-icon { height:15px; display:block; margin:0px auto; fill:#666666; vertical-align:top }
ul.barGraph > li > ul { position:relative; font-size:0; }
ul.barGraph > li > ul > li {
	position:relative;
	display:inline-block;
	color:transparent;
	width:0;
	margin-right:1px;
	line-height:25px;
}
ul.barGraph li.Assegurança { background:#29C7CA }
ul.barGraph li.Manteniment { background:#00A9A9 }
ul.barGraph li.Bateria { background:#4DD7D7 }
ul.barGraph li.Taxes { background:#05BDBD }
ul.barGraph li.Energia, ul.barGraph li.Combustible { background:#7BE5E5 }
ul.barGraph li.Adquisició { background:#29C7CA }
ul.barGraph li.engega { background:transparent !important; line-height:21px !important; border:2px dashed #999999; box-sizing:border-box  }

ul.barGraph span.tooltip {
	display:none;
	background:#353942;
	text-align:center;
	color:#fff; 
	padding:5px 10px;
	border-radius:2px;
	position:absolute;
	top:0%;
	left:50%;
	-webkit-transform: translate(-50%,-110%);
			transform: translate(-50%,-110%);
	font-size:10px;
	line-height:10px;
	font-weight:300;
	white-space:nowrap;
	z-index:10;
}
ul.barGraph span.tooltip:after {
    content:'';
    display:block;
    width:0;
    height:0;
    position:absolute;
    border-top: 4px solid #353942;
    border-bottom: 4px solid transparent;
    border-right:4px solid transparent;
    border-left:4px solid transparent;
    left:50%;
    bottom:-7px;
    margin-left:-4px
}
ul.barGraph li:hover > span.tooltip, ul.barGraph p:hover > span.tooltip {display:block}
ul.barGraph span > .svg-icon { display:block; width:16px; height:16px; margin:5px auto; fill:#FFFFFF}
ul.barGraph span > big { display:block; line-height:18px; font-size:12px }


#modalWindow section { padding:20px }
p.center { text-align:center; margin:10px 0 5px }
ul.smallLogos { text-align:center}
ul.smallLogos li { display:inline-block; font-size:7px; text-align:center; margin:0 10px 10px; vertical-align:top }
ul.smallLogos li img { height:30px; display:block; margin:5px auto }


/* MAP */
#map { position:fixed; top:0; left:0; width:100%; height:100% }

div.infoWindow { margin:20px 5px 15px; max-width:200px; font-size:12px }
div.infoWindow h4 { font-size:13px; font-weight:500; text-align:left; margin:15px 0 }
div.infoWindow ul { margin:10px auto; font-size:12px; text-align:left; width:130px }
div.infoWindow ul li { margin:2px 0 }
div.infoWindow ul li img { height:10px; margin-right:5px }
div.infoWindow ul li span { font-size:9px; text-transform:uppercase; color:#888888; margin-right:15px }
#brands { text-align:center; width:auto; margin:20px 0 10px }
#brands li { display:inline-block; margin:0 3px }
#brands li img { height:30px }

.wavedot { height:150px; width:150px }
.dot {
	width: 6px;
	height: 6px;
	background:#29C7CA;
	border-radius: 30px;
	position: absolute;
	left:50%;
	top:50%;
	margin:-3px 0 0 -3px;
	animation: animationExplode linear 3s;
	animation-fill-mode:forwards;
	animation-iteration-count: infinite;
}
.radius, .radius2 {
	width: 100%;
	height: 100%;
	background:rgba(41,199,202,0.8);
	border-radius: 100%;
	opacity:0;
	position: absolute;
	animation: animationWave cubic-bezier(0,.54,.53,1) 3s;
	animation-fill-mode:forwards;
	animation-iteration-count: infinite;
	animation-delay:1s;	
}
.radius2 { animation-delay:1.2s !important }

@keyframes animationExplode {
	0% { transform:scale(0); opacity:0 }
	5% { transform:scale(2) }
	10% { transform:scale(0.90); opacity:1 }
	11% { transform:scale(1.50) }
	12% { transform: scale(1.00) }
	28% { background:#29C7CA }
	29% { background:#FFFFFF }
	31% { background:#29C7CA }
	39% { background:#FFFFFF }
	41% { background:#29C7CA }
	95% { opacity:1; }
	100% { opacity:0 }
}
@keyframes animationWave {
	0% { opacity:0; transform:scale(0.00) }
	1% { opacity:1 }
	10% {opacity:0.6 }
	100% { transform:scale(1); opacity:0}
}