@font-face {
	font-family:'MeteoconsRegular';
	src: url('../fonts/font-face/meteocons-webfont.eot');
	src: url('../fonts/font-face/meteocons-webfont.eot?#iefix') format('embedded-opentype'),
		url('../fonts/font-face/meteocons-webfont.woff') format('woff'),
		url('../fonts/font-face/meteocons-webfont.ttf') format('truetype'),
		url('../fonts/font-face/meteocons-webfont.svg#MeteoconsRegular') format('svg');
	font-weight:normal;
	font-style:normal;
}
[data-icon]:before {
	font-family: 'MeteoconsRegular';
	content: attr(data-icon);
	font-size: 20px;
	position: relative;
	top: 4px;
}


body {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-family: 'Roboto', Arial, sans-serif;
	font-style: normal;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	font-size:  12px;
	color: #999;
	background-color: transparent;
	margin: 0;
}
* {
	margin: 0;
	box-sizing: border-box;
}


.widget { color:#fff; background-color:#9a8c7f; padding-top:1px; overflow:hidden; position:relative; }
.round-corners { border-radius:8px; }
.widget h2 { text-align:center; margin:8px 6px; line-height:20px; font-size:20px; }

.title { clear:both; line-height:15px; margin-bottom:4px; text-align:center; }

.pollution { text-align:center; font-size:9px; }
.pollution p { letter-spacing:0.6px; font-size:8px; }

/* hide elements for JS to show */
.report h3,
.report.tomorrow .hide-me-wrapper,
.weather-box,
p.message { display:none; }
p.message.persistent { display:block; }
.has-weather .weather-box { display:block; }

.chevron-right { position:relative; }
.chevron-right:after {
	content:'';
	display:block;
	position: absolute;
	top: calc(50% - 5px);
	right: 2px;
	background-image:url(../img/ui/chevron-right.svg);
	width:10px;
	height:10px;
	background-repeat:no-repeat;
	background-size: 100% 100%;
	opacity:0.5;
}
.chevron-right:hover:after { opacity:0.9; }





.dark-strip { background-color:rgba(0,0,0,0.2); padding:5px; width: 100%; overflow:hidden; }

.routing-wrap { position:relative; height:25px; }
.routing-ui { max-width:650px; margin:0 auto; }
.routing-ui .title { text-align:left; position:absolute; left:0px; width: 70px; padding:0; margin:1px 0 0 0; line-height:13px; }
.routing-ui input { margin:0; border:0; border-radius: 5px; padding: 6px 5px; box-sizing:border-box; }
.routing-ui input[type=input] { height:25px; }
.routing-ui input { width:calc(50% - 2px); display: inline; margin-left: 4px; float:left; }
.screen-2 .routing-ui input { margin-left:0; margin-right:4px; }
.routing-ui input:last-child { margin-right: -20px; }
.routing-ui .button {
	border-radius:5px;
	border:2px solid #fff6;
	background:#0003;
	padding:2px 5px 3px;
	width:calc(50% - 4px);
	float:left;
	cursor:pointer;
	line-height:16px;
}
.routing-ui .button:hover { border:2px solid #fffc; }

.walking-before:before {
	content:'';
	display: inline-block;
	background-image:url(../img/ui/walking.svg);
	width:10px;
	height:17px;
	background-repeat:no-repeat;
	background-size: 100% 100%;
	opacity:0.5;
	position: relative;
	top: 2px;
	/*margin-right: 5px;*/
}
.cycling-before:before {
	content:'';
	display: inline-block;
	background-image:url(../img/ui/cycling.svg);
	width:23px;
	height:14px;
	background-repeat:no-repeat;
	background-size: 100% 100%;
	opacity:0.5;
	position: relative;
	top: 1px;
	/*margin-right: 5px;*/
}
.walking-cycling-before:before {
	content:'';
	display: inline-block;
	background-image:url(../img/ui/walking-cycling.svg);
	width:34px;
	height:16px;
	background-repeat:no-repeat;
	background-size: 100% 100%;
	opacity:0.5;
	position: relative;
	top: 0px;
	margin-right: 5px;
	margin-bottom: -3px;
}
.mail-before:before {
	content:'';
	display: inline-block;
	background-image:url(../img/ui/mail.svg);
	width:14px;
	height:17px;
	background-repeat:no-repeat;
	background-size: 100% 100%;
	opacity:0.5;
	position: relative;
	top: 4px;
	margin-right: 5px;
}
.walking-before:hover:before,
.cycling-before:hover:before,
.walking-cycling-before:hover:before,
.mail-before:hover:before { opacity:0.9; }

label.walking-before,
label.cycling-before { font-size: 0; }
label.walking-before:before { top: 2px; height:18px; }
label.cycling-before:before { top: 4px; }

.button.walking-before { padding-left:19px; }
.button.walking-before:before {
	position: absolute;
	top: calc(50% - 8px);
	left: 5px;
	width:10px;
	height:14px;
}

.routing-ui { position:relative; }
.routing-ui .geo-detect-from { position:absolute; width:20px; height:20px; padding-top:7px; text-align:center; opacity:0.5; }
.routing-ui .geo-detect-from:hover { opacity:1; cursor:pointer; }
.screen-1 .geo-detect-from { right:4px; top:0; }
.screen-2 .routing-ui .geo-detect-from { left:calc(35% - 24px); top:0; }

.screen-1,
.screen-2 { overflow: hidden; }
.screen-1 .routing-wrap { margin: 0 auto; }
.screen-2 .routing-ui input { width:calc(35% - 2px); padding-right:20px; }
.travel-mode-wrap { width:calc(30% - 3px); margin-right:-5px; float:left; }
.screen-1 .routing-wrap { max-width:400px; }

.routing-wrap-sm,
.routing-wrap-md { display:none; }
@media (min-width:300px) {
	.routing-wrap-xs { display:none; }
	.routing-wrap-sm { display:block; }
	/* .routing-ui .button { letter-spacing:-1; color:#fff0; white-space: nowrap; } */
}
@media (min-width:370px) {
	.routing-wrap-sm { display:none; }
	.routing-wrap-md { display:block; }
	.routing-ui input { width:calc(25% - 2px); display: inline; float:left; }
	.screen-1 .geo-detect-from { right:calc(25% + 4px); }
}
@media (min-width:550px) {
	.routing-ui .button,
	.routing-ui input { width:calc(33% - 2px); }
	.screen-1 .geo-detect-from { right:calc(33% + 8px); }
}

.travel-mode-wrap { border:1px solid rgba(255,255,255,0.6); border-radius:5px; height:25px; overflow:hidden; }
.travel-mode-wrap input { display:none; }
.travel-mode-wrap input:checked + label { background-color:rgba(255,255,255,0.2); }
.travel-mode-wrap label { width:50%; float:left; line-height:24px; text-align:center; }

.screen-2 { position:relative; overflow:hidden; }
.round-corners .screen-2 { border-radius:8px; }
.screen-2 h2 { margin-left:16px; margin-right:16px; }

.chevron { position:absolute; top:10px; left:5px; opacity:0.5; height:25px; width:25px; min-width:10%; }
.chevron:hover { opacity:0.9; cursor:pointer; }
@media (min-width:300px) {
	.chevron { left:10px; }
	.screen-2 h2 { margin-left:21px; margin-right:21px; }
}

.map { height:250px; position:relative; }
@media (min-width:300px) { .map { height:300px; } }
@media (min-width:500px) { .map { height:350px; } }
@media (min-width:700px) { .map { height:400px; } }



.messages p:first-child { border-top:1px solid rgba(255,255,255,0.2); margin-top:-1px; }
.messages p { padding:6px 10px; border-bottom:1px solid rgba(255,255,255,0.2); }
.messages a,
.messages p { color:#fff; text-decoration:none; }
.messages a { display:block; margin:-6px -10px; padding:6px 20px 6px 10px; }
/* .messages a:after { content:" \2192"; color:rgba(255,255,255,0.5); font-size:15px; line-height:2px; position:relative; top:0.7px; } symbols: http://www.ascii-code.com/html-symbol.php */
.messages a:after { right:5px; }
.messages a:hover { background-color:rgba(0,0,0,0.2); text-decoration:none; }

.foot { padding:6px 10px 6px; text-align:center; }
.foot .bid { max-height: 34px; max-width: calc(100% - 130px); }
.foot .logos { margin-top:10px; }
.foot .logos img { vertical-align:middle; }
.foot .logos .crp { float:left; width:85px; margin-top:5px; margin-left:-4px; margin-right:15px; }
.foot .logos .icl { width:82px; margin-top:1px; }
.foot .logos .mol { float:right; margin-top:3px; margin-right:-2px; }
@media (max-width:305px) {
	.foot .logos .crp { width:75px; }
	.foot .logos .icl { width:70px; }
	.foot .logos .mol { width:85px; }
}
@media (max-width:270px) {
	.foot .logos .crp { width:63px; margin-right:10px; }
	.foot .logos .icl { width:52px; margin-top:4px; }
	.foot .logos .mol { width:65px; margin-top:5px; }
}
@media (max-width:205px) {
	.foot .logos { display:none; }
}
/*.mol p { opacity:.9; text-transform:uppercase; font-size:8px; margin:2px 0 1px; letter-spacing:0.6px; }
.mol img { width:140px; padding-top:5px; display:block; margin-left:auto; margin-right:auto; max-width:100%; }*/
.clearfix:after {
	content: " "; /* Older browser do not support empty content */
	visibility: hidden;
	display: block;
	height: 0;
	clear: both;
}


.clearfix:before,
.clearfix:after { clear:both; display:table; content:" "; }



/* Switch between widget and routing */
.screen-1 { position:relative; transition:left .5s; }
.screen-2 { transition:left .5s; position:absolute; top:0; left:100%; height:100%; width:100%; }

body.show-screen-1 .screen-1 { left:0; }
body.show-screen-1 .screen-2 { left:100%; }

body.show-screen-2 .screen-1 { left:-100%; }
body.show-screen-2 .screen-2 { left:0; }


.routing-map {position: relative;}

/* //////////////////// Opacity slider */
/* #opacity-slider-container { position:absolute; margin-left:-200px; margin-top:0!important; top:auto!important; bottom:40px;
	-webkit-user-select:none;
}
#opacity-slider-bar { position:absolute; top:0px; left:22px; overflow:hidden; background-color:yellow; width:160px; height:20px; font-size:0.9em; }
#opacity-slider-handle { position:absolute; top:0px; left:0px; overflow:hidden; background-color:red; width:12px; height:20px; cursor:pointer; }

#opacity-slider-container #less { left:0px; }
#opacity-slider-container #more { left:184px; } */
/* ///////////////// option to have POI in Google style:    #map-show-markers, */
/* #from-to,
#opacity-slider-bar,
#opacity-slider-handle,
#opacity-slider-container .increment { z-index:5; color:#777; line-height:17px; border-radius:2px; background-color:#fff; border:1px solid #999; cursor:pointer;
	-webkit-box-shadow:rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px;
			box-shadow:rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px;
}
#opacity-slider-container .increment { margin:0px; position:absolute; top:0px; width:19px; height:20px; text-align:center; padding:3px; font-size:18px; line-height:12px; }
#opacity-slider-bar { cursor:default; text-align:center; font-size:10px; }
#opacity-slider-handle { margin:-1px 0 0 -1px; cursor:ew-resize!important; }

#opacity-slider-container .increment { padding:7px 0 0 0; font-size:14px; height:13px; line-height:6px; } */




/* AQI graphic (element can be an anchor itself, and can also sit within a anchor) */

.aqi-box {
	display: inline-block;
	background: #fff;
	border-radius: 100px;
	height: 36px;
	padding: 4px 15px 0 37px;
	position: relative;
	text-decoration: none;
	width: 120px;
}

.aqi-box h5,
.aqi-box p {
	color: #aaa;
	font-size: 11px;
	font-weight: normal;
	text-transform: uppercase;
	margin: 0;
	line-height: 13px;
}

.aqi-box p {
	color: #aaa;
	font-size: 14px;
}

.aqi-box:before,
.aqi-box:after {
	display: block;
	content: ' ';
	width: 22px;
	height: 22px;
	position: absolute;
	top: 5px;
	left: 5px;
	border-radius: 100%;
}

.aqi-box:before {
	border: 2px solid #ddd;
}

.aqi-box:after {
	background-color: #ddd;
	width: 18px;
	height: 18px;
	position: absolute;
	top: 9px;
	left: 9px;
}

/* forecast colours */

.aqi-box.aqi-none p {
	color: #aaa;
}

.aqi-box.aqi-none:before {
	border-color: #aaa;
}

.aqi-box.aqi-none:after {
	background-color: #aaa;
}

.aqi-box.aqi-low p {
	color: #288500;
}

.aqi-box.aqi-low:before {
	border-color: #288500;
}

.aqi-box.aqi-low:after {
	background-color: #288500;
}

.aqi-box.aqi-moderate p {
	color: #f05f00;
}

.aqi-box.aqi-moderate:before {
	border-color: #f05f00;
}

.aqi-box.aqi-moderate:after {
	background-color: #f05f00;
}

.aqi-box.aqi-high p {
	color: #d80000;
}

.aqi-box.aqi-high:before {
	border-color: #d80000;
}

.aqi-box.aqi-high:after {
	background-color: #d80000;
}

.aqi-box.aqi-very-high p {
	color: #000;
}

.aqi-box.aqi-very-high:before {
	border-color: #000;
}

.aqi-box.aqi-very-high:after {
	background-color: #000;
}

a.aqi-box,
a.aqi-box:hover {
	border: none;
}

.reports { text-align:center; margin:4px 0; }
@media (min-width:400px) {
	/* .reports { width:200px; float:right; text-align:right; padding-right:5px; } */
	.chevron.link-screen-1 { top:19px; }
	.widget h2 { margin:12px 6px; line-height:23px; font-size:23px; }
}
.pollution-alerts { text-align:center; margin:5px 0 10px; }
.pollution-alerts a { padding:4px 14px 6px 0; color:#fff; cursor:pointer; font-size:13.5px; }
.pollution-alerts a:hover { color:#fff; }
.pollution-alerts a:before,
.pollution-alerts a:after { opacity:1; }

.report { display:inline-block; margin:2px; text-align:left; }
.has-weather { padding-right:80px; position:relative; }
.has-weather .aqi-box { border-radius:100px 0 0 100px; padding-right:8px; }
.weather-box { text-align:center; width:80px; background:#fff6; color:#fff; position:absolute; top:0; right:0; height:36px; border-radius: 0 100px 100px 0; }
.weather-box * { text-decoration:none; }
.weather-box .temperature { line-height:36px; margin:0 2px; }


/* * {outline:1px solid red;} */