body { margin: 0; padding: 0; }

#widget_weather { font-family: 'Source Sans Pro', sans-serif; font-size: 14px; text-transform: capitalize; text-align: center; margin: 0; padding: 0; overflow: hidden; width: 148px; }
#widget_weather .phase { width: 100%; height: auto; overflow: hidden; position: absolute; bottom: 15px; }
#widget_weather .phase#phase0.state1,
#widget_weather .phase#phase1.state2 { opacity: 1; }
#widget_weather .phase#phase0.state2,
#widget_weather .phase#phase1.state1 { opacity: 0; }

#widget_weather .phase .info { display: inline-block; }
#widget_weather .phase#phase0 .info { vertical-align: middle; }

#widget_weather .phase#phase0 .icon { margin-right: 0; }
#widget_weather .phase .icon { width: 63px; display: inline-block; vertical-align: middle; margin: 0 -4px 5px 0; }
#widget_weather .phase .icon img { width: 100%; }

#widget_weather .phase .time { text-align: left; line-height: 13px; margin: 0; padding: 0; color: #696973; font-size: 14px;}
#widget_weather .phase .time strong { font-weight: 700; }
#widget_weather .phase .temp { font-weight: bold; font-size: 25px; line-height: 28px; margin: 0; padding: 0; }
#widget_weather .phase .temp span { font-size: 18px; }
#widget_weather .phase .temp span:last-child { font-size: 20px; }

#widget_weather .phase#phase0.state1 .link, #widget_weather .phase#phase1.state2 .link {z-index: 10;}
#widget_weather .phase#phase1.state1 .link, #widget_weather .phase#phase0.state2 .link {z-index: -1;}

#widget_weather .phase .link {display: inline-block;margin: 0;position: absolute;bottom: 7px;}
#widget_weather .phase .link a { display: block; }
#widget_weather .phase .link a i { background-color: #000; color: #fff; display: block; font-size: 11px;}

#widget_weather #current-temp { display: none; }

@media only screen and (device-width: 768px) {
	#widget_weather * { transform: scale(.96); }
	#widget_weather .phase { bottom: 10px; }
	#widget_weather .phase .info {position: relative;left: 5px;}
	#widget_weather .phase .icon {transform: scale(.8);position: relative;right: 5px;}
	#widget_weather .phase .link { right: 25px; top: 10px; }
}

@media screen and (max-width: 767px) {
	#widget_weather.mobile {width: 280px; margin: 2px auto;}
	#widget_weather.mobile .phase {width: 45%;position: inherit;}
	#widget_weather.mobile .phase#phase1 .info { vertical-align: middle; }
	#widget_weather.mobile .phase .icon { width: 30px; }
	#widget_weather.mobile .phase .icon img { height: 25px; width: initial; }
	#widget_weather.mobile .phase .time { float: left; font-size: 14px; margin: 0 8px 5px 0;}
	#widget_weather.mobile .phase .temp { font-size: 17px; float: left; position: relative; bottom: 2px;}
	#widget_weather.mobile .phase#phase0 .time { line-height: 25px; }
	#widget_weather.mobile .phase .temp span { font-size: 12px; }
	#widget_weather.mobile .phase .temp span:last-child { font-size: 14px; }
	#widget_weather.mobile .phase .link {right: 17px;}

	#widget_weather.mobile .phase#phase1 .link a { display: none; }

	#widget_weather.mobile #current-temp {display: block;position: relative;margin-top: 3px;margin-left: 20px;}
	#widget_weather.mobile #current-temp .temp { width: 33%; font-size: 17px; margin: 0; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #323946; }
	#widget_weather.mobile #current-temp .temp span { font-size: 14px; }
	#widget_weather.mobile #current-temp .link {display: inline-block;display: inline-block;position: absolute;top: 4px;left: 45px;}
	#widget_weather.mobile #current-temp .link a { text-decoration: none; }
	#widget_weather.mobile #current-temp .link a i { background-color: #323946; color: #fff; display: block; font-size: 11px;}

	.inline { float:left; }
}