@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');

	html {font-size:75%;}
	body{padding:0;margin:0;color:#002E70;}

	@font-face {
		font-family: 'ArialMT';
		src: url('fonts/Arial-Reg/ArialMT.eot');
		src: local('ArialMT'),url('fonts/Arial-Reg/ArialMT.eot?#iefix') format('embedded-opentype'),url('fonts/Arial-Reg/ArialMT.woff') format('woff'),url('fonts/Arial-Reg/ArialMT.ttf') format('truetype');
		font-weight: normal;
		font-style: normal
	}

	@font-face {
		font-family: 'ArialMTBold';
		src: url('fonts/Arial-Bold/Arial-BoldMT.eot');
		src: local('Arial-BoldMT'),url('fonts/Arial-Bold/Arial-BoldMT.eot?#iefix') format('embedded-opentype'),url('fonts/Arial-Bold/Arial-BoldMT.woff') format('woff'),url('fonts/Arial-Bold/Arial-BoldMT.ttf') format('truetype');
		font-weight: normal;
		font-style: normal
	}

	#content {
		width:100%; 
		height:350px;
		font-family:'Montserrat', sans-serif;
		font-size:18px;
		position:relative;
		overflow:hidden;
	}

	.light #content {
		background-color:#FFFFFF;
		color: #002E70;
	}
	.dark #content {
		color:#FFFFFF;
		background-color: #002E70;
	}

	/* nav panel { */
	div#nav {
		float:left;
		width:25%;
		background-color:#fff;
		
	}
	#nav > div {
		white-space: nowrap;
		border-bottom: 1px solid white;
		padding-left:17px;
	}
	#nav > div.nav:hover, .pollen #pollen, .weather #weather, .airquality #airquality {
		background-color:#eee;
	
	}
	.nav span {
		text-decoration:none;
		color: #002E70;
		line-height:58px;
		display:block;
		position: relative;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	.dark .nav span {color: #FFF;}
	.nav {
		font-weight:normal;
		font-size:17px;
		height:58px;
	}
	#src a {
		position:absolute;
		bottom:0;
		font-size:13px;
		color: #002E70;
		text-decoration:none;
		line-height: 38px;
		height: 38px;
		display:block;
	}
	.dark #src a {color: #FFF;}
	#loc {
		padding:10px 0;
	}
	#loc_city {
		font-size:24px;
		line-height: 28.8px;
		white-space:normal;
	}
	#loc_zip {
		font-size:40px;
		line-height:48px;
	}
	/* } END NAV */
	
	/* Forecast Panel { */
	.data {
		display:none;
	}
	.weather #weatherdata, .pollen #pollendata, .airquality #aqdata{
		display: block !important;
		margin-top:69px;
	}

	div.forecast {
		float:right;
		width:75%;
	}

	.light div.forecast {
		background-color: #FFFFFF;
	}
	.dark div.forecast {
		background-color: #002E70;
	}

	.forecast > .data > div.days {
		float:left;
		width:32%;
		padding-left:7px;
		height:215px;
		margin-top: -69px;
		padding-top:69px;
		position:relative;
	}
	.title {
		height:69px;
		position:absolute;
		top:0;
	}
	.title h1 {
		font-size:20px;
		line-height:24px;
		margin:0;
		padding:10px 15px;
		font-weight:normal;
		position: relative;
		white-space: nowrap;
	}
    .area {
	    position:absolute;
		left:50%;
		margin-left:-150px; /*half of the canvas size*/
		text-align:center;
	}
	canvas {
		margin-top:30px; 
		display:inline-block

	}
	.label{
		font-family:'Montserrat', sans-serif;
		font-size: 14px;    
		font-weight:bold;
		position: absolute;    
		top: 45%;
		width:100%;
		text-align:center;
	}
	.index {
    		font-size: 20px;    
		font-weight:bold;
		position: absolute;    
		top:0px;
		width:100%;
		text-align:center;
	}
	.day{
		position:relative;
		text-align:center;
		font-size:14px;
	}
	#day0 .day {font-weight: bold;}
	.scale {
		position:absolute;
		font-size:13px;
		font-weight:bold;
		top:150px;
		left:-40px;
		margin-left:50%;
	}
	.scale > span {
		padding-left:35px;
	}
	/* weather { */
	.weather div.data {
		width:100% ;
	}
	.weather .data > div {
		float:left;
	}
	.weather .data img {
		display:block;
	}
	#description {
		padding-left:75px;
		padding-top:65px;
	}
	#cond {
		line-height: 22px;
	}
	#temps {
		color:#828487;
		font-size:13px;
		line-height:18px;
	}
	#ctemp {
		font-size:46px;
		font-family: arial;
		line-height:46px;
		padding-top:15px;
	}
	#ctemp > sup {
		font-size:22px;
	}
	/* } */

	/* Air Quality {*/
	.airquality .scale, .airquality .index {
		display:none;
	}
	/* } */

	
/* smart phones { */
@media	
	only screen and (-webkit-min-device-pixel-ratio : 2) and (max-width:767px),
	only screen and (min-resolution: 2dppx) and (max-width:767px),
	only screen and (max-width: 640px) {
		#content {
			height: 100% !important;
		}
		#content, #nav, .forecast, .forecast > .data > div, .area {
			width: 100% !important;
		}
		.forecast {
			height:100% !important;
		}
		.weather #weatherdata, .pollen #pollendata, .airquality #aqdata{
			margin:0;
		}
		#content > div {
			float:none;
		}
		#nav > div {
			width:100%;
		}
		#loc {
			float:none;
			border:none !important;
			position:relative;
		}
		#loc_city {
			font-size:7vw;
		}
		#loc_zip {
			font-size:14vw;
			line-height:14vw !important;
			padding-top:0px;
		}
		.nav {
			font-size:4.5vw;
		}
		#src, #src a {
			position:relative;
		}
		.forecast > .data > div.days {
			float:none;
			border-left:none;
			border-top:7px solid white;
			padding:20px 0;
			margin:0;
		}
		.title{position:relative;}
		h1 {
			font-size:6vw !important;
			padding-left: 17px !important;
			text-align:left;
			position:relative;
			white-space: normal !important;
		}
		.data > div.days {
			height:auto !important;
		}
		.area{
			position:relative;
			margin:0;
			left:0;
		}
		canvas {
			width:100% !important;
			height:100% !important;
			margin-left:0px;
			margin-top: 6vw !important;
		}
		.label, .day {
			font-size:3rem;
			line-height:3rem;
			font-size:4vw;
			line-height:5vw;
		}
		.scale, .index {
			font-size:2rem;
			line-height:2rem;
			font-size:4vw;
			line-height:4vw;
		}
		.scale {
			top: 75% !important;
			text-align:center;
			width:100%;
			left:0;
			margin-left:0px;
		}
		.scale > span {
			padding-left:16vw !important;
		}
		.index {
			top: 1.5vw;

		}
		.weather .data > div{
			float:none;
			text-align:center;
			padding-top:0 !important;
			padding-left:0 !important;
			padding-right:0 !important;
		}
		.weather .data img {
			display: inline !important;
		}

	}
/* } */


@media	
	only screen and (-webkit-min-device-pixel-ratio : 2) and (max-width:2048px) and (min-width: 768px),	
	only screen and (min-resolution: 2dppx) and (max-width:2048px) and (min-width: 768px),
	only screen and (max-resolution: 1.9dppx) and (max-width: 1024px) and (min-width: 641px) 
	{
		#content, .data, .title  {
			width:100% !important;
		}
	}