/*********************************************
SIMPLE WEATHER STYLE
*********************************************/
@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i&subset=latin-ext');
@font-face {
	font-family: 'weather';
	src: url(../fonts/simple-weather.3.1.0/artill_clean_icons-webfont.eot);
	src: url(../fonts/simple-weather.3.1.0/artill_clean_icons-webfont.eot?#iefix) format('embedded-opentype'), url(../fonts/simple-weather.3.1.0/artill_clean_icons-webfont.woff) format('woff'), url(../fonts/simple-weather.3.1.0/artill_clean_icons-webfont.ttf) format('truetype'), url(../fonts/simple-weather.3.1.0/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg) format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
    font-family:'Weather Icons';
    src: url('../fonts/simple-weather.3.1.0/Weather Icons Regular.eot');
	src: url('../fonts/simple-weather.3.1.0/Weather Icons Regular.eot?#iefix') format('embedded-opentype'),
		url('../fonts/simple-weather.3.1.0/Weather Icons Regular.woff2') format('woff2'),
		url('../fonts/simple-weather.3.1.0/Weather Icons Regular.woff') format('woff'),
		url('../fonts/simple-weather.3.1.0/Weather Icons Regular.svg#Weather Icons Regular') format('svg');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-00A0;
}
@font-face {
  font-family: 'weathericons';
  src: url('../fonts/simple-weather.3.1.0/weathericons-regular-webfont.eot');
  src: url('../fonts/simple-weather.3.1.0/weathericons-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/simple-weather.3.1.0/weathericons-regular-webfont.woff2') format('woff2'), url('../fonts/simple-weather.3.1.0/weathericons-regular-webfont.woff') format('woff'), url('../fonts/simple-weather.3.1.0/weathericons-regular-webfont.ttf') format('truetype'), url('../fonts/simple-weather.3.1.0/weathericons-regular-webfont.svg#weather_iconsregular') format('svg');
  font-weight: normal;
  font-style: normal;
  
}
.wi {
  display: inline-block;
  font-family: 'weathericons';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 1em;
}
.wi-celsius:before {
  content: "\f03c";
}
#weatherModal .wi-celsius:before{
	font-weight:bold;	
}
#weatherModal sup {
    top: -0.1em;
}

.weatherDetails a:before {
	content: "\f10c";
	font-family: fontawesome;
	font-size: inherit;
	font-style: normal;
	font-weight: normal;
	color: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 0;
	display: inline-block;
	margin-right: 0.5em;
}

.weatherCont {
	display: inline-block;
	position: relative; /* background-color: #a3745b;*/
	padding: 1.5em 0em 0.5em 0.1em;
}
#weatherModal h1, .modal h1, .modal .weatherLink, .weatherLink, #weather .weatherContainer, #weatherModal h2 {
	display: none;
}
#weather {
	display: inline-block;
	cursor: pointer;
	text-align: left;
	border: none;
	background: none;
}
#weather {
	display: inline-block;
	margin-bottom: 0;
}
#weather h1, #weather h2 {
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	color: rgb(255,255,255);
	display: inline-block;
	text-transform: uppercase;
	margin-bottom: 0;
}
#weather h1 sup{  


}

#weather h1 {
	/*margin-left: 0.5em;*/
	font-size: 1.7em;
}
#weather h2 {
	margin-left: 0.5em;
	font-size: 0.938em;
}
#weather .weatherLink {
	margin-top: -0.2em;
	margin-bottom: 0;
}
#weather .weatherLink > a {
	font: normal 700 0.750em 'Lato', sans-serif;
	color: rgb(255,255,255);
}
#weather .weatherLink > a:visited {
	color: rgb(255,255,255);
}
#weather .weatherLink > a:hover {
	color: rgb(168,200,185);
}
#weather > a {
	margin-left: 0.1em;
}
#weather i, #weatherModal i {
	font-family: weather;
	font-size: 2.7em;
	font-weight: normal;
	font-style: normal;
	color: rgb(222,190,64);
	line-height: 0;
	text-transform: none;
	display: inline-block;
}
.weatherCont i {
	position: relative;
	top: 4px;
	left: -5px;
}
#headerWeather .weatherContainer .weatherIcon i {
	position: relative;
	top: 6px;
	left: -6px;
}
#weatherModal i {
	color: #109add;
}
#weatherModal {
	text-align: center;
	margin-bottom: 0;
}
#weatherModal h1, #weatherModal h3 {
	margin-bottom: 0.5em;
}
#weatherModal h1 > i {
	display: block;
	line-height: 0.7;
}
.weatherIcon, .weatherCondition, .weatherUpdate {
	font: normal 700 0.8em 'Lato', sans-serif;
	color: rgb(37,37,37);
	text-transform: uppercase;
}
.weatherIcon {
	font-size: 2em;
	color: #109add;
	margin-top: 0.2em;
	margin-bottom: 0.5em;
}
.weatherCondition {
	margin-bottom: 0;
}
.weatherUpdate {
	margin-bottom: 2em;
}
#weatherModal .weatherDays {
	float: left;
	width: 20%;
	padding: 1em;
	margin-bottom: 0;
	border-right: 1px dotted rgb(153,153,153);
}
#weatherModal .weatherDays + .weatherDays + .weatherDays + .weatherDays + .weatherDays {
	border-right: none;
}
#weatherModal .weatherDays + .weatherDays + .weatherDays + .weatherDays + .weatherDays + .weatherDays {
	display: none;
}
#weatherModal .weatherDays > i {
	line-height: 0.7;
	display: block;
}
#weatherModal .day {
	font: normal 600 0.7em 'Lato', sans-serif;
	color: #06162f;
	text-transform: uppercase;
	display: block;
	margin: 0.5em 0 0.2em;
}
#weatherModal .highLow {
	display: block;
}
#weatherModal .lowW {
	font-size: 0.8em;
	color: #1b4f68;
}
.weatherDetails {
	margin-top: 1.5em;
	margin-bottom: 0;
	text-align: center;
}
.weatherDetails a {
	font: normal 0.7em 'Lato', sans-serif;
	color: rgb(1,138,182);
	display: inline-block;
}
.weatherDetails a:visited {
	color: rgb(70,70,70);
}
.weatherDetails a:hover {
	color: rgb(70,70,70);
}
.weatherDetails a:before {
	content: "\f08e";
}
sup {
	top: 0;
}
.icon-0:before {
	content: ":";
}
.icon-1:before {
	content: "p";
}
.icon-2:before {
	content: "S";
}
.icon-3:before {
	content: "Q";
}
.icon-4:before {
	content: "S";
}
.icon-5:before {
	content: "W";
}
.icon-6:before {
	content: "W";
}
.icon-7:before {
	content: "W";
}
.icon-8:before {
	content: "W";
}
.icon-9:before {
	content: "I";
}
.icon-10:before {
	content: "W";
}
.icon-11:before {
	content: "I";
}
.icon-12:before {
	content: "I";
}
.icon-13:before {
	content: "I";
}
.icon-14:before {
	content: "I";
}
.icon-15:before {
	content: "W";
}
.icon-16:before {
	content: "I";
}
.icon-17:before {
	content: "W";
}
.icon-18:before {
	content: "U";
}
.icon-19:before {
	content: "Z";
}
.icon-20:before {
	content: "Z";
}
.icon-21:before {
	content: "Z";
}
.icon-22:before {
	content: "Z";
}
.icon-23:before {
	content: "Z";
}
.icon-24:before {
	content: "E";
}
.icon-25:before {
	content: "E";
}
.icon-26:before {
	content: "3";
}
.icon-27:before {
	content: "a";
}
.icon-28:before {
	content: "A";
}
.icon-29:before {
	content: "a";
}
.icon-30:before {
	content: "A";
}
.icon-31:before {
	content: "6";
}
.icon-32:before {
	content: "1";
}
.icon-33:before {
	content: "6";
}
.icon-34:before {
	content: "1";
}
.icon-35:before {
	content: "W";
}
.icon-36:before {
	content: "1";
}
.icon-37:before {
	content: "S";
}
.icon-38:before {
	content: "S";
}
.icon-39:before {
	content: "S";
}
.icon-40:before {
	content: "M";
}
.icon-41:before {
	content: "W";
}
.icon-42:before {
	content: "I";
}
.icon-43:before {
	content: "W";
}
.icon-44:before {
	content: "a";
}
.icon-45:before {
	content: "S";
}
.icon-46:before {
	content: "U";
}
.icon-47:before {
	content: "S";
}


/*********************************************************
MEDIA QUERY
*********************************************************/
@media only screen and (max-width:500px) {
	#weather i, #weatherModal i{
		font-size:2.5em;
	}
#weatherModal .weatherDays {
	width: 33.33%;
	margin-bottom: 1.2em;
}
/*.weatherCondition,
	.weatherUpdate{
		font-size:0.9em;
	}*/
	
#weatherModal .weatherDays + .weatherDays + .weatherDays {
	border-right: none;
}
#weatherModal .weatherDays + .weatherDays + .weatherDays + .weatherDays, #weatherModal .weatherDays + .weatherDays + .weatherDays + .weatherDays + .weatherDays {
	border-right: 1px dotted rgb(153,153,153);
}
}
 @media only screen and (max-width:283px) {
#weatherModal .weatherDays {
	width: 33.33%;
	margin-bottom: 1.2em;
}
#weatherModal .weatherDays + .weatherDays + .weatherDays {
	border-right: none;
}
#weatherModal .weatherDays + .weatherDays + .weatherDays + .weatherDays, #weatherModal .weatherDays + .weatherDays + .weatherDays + .weatherDays + .weatherDays {
	border-right: 1px dotted rgb(153,153,153);
}
}