@import url('https://cdnjs.cloudflare.com/ajax/libs/weather-icons/1.3.2/css/weather-icons.min.css');

.wrapper {
	width: 480px;
	margin: 0 auto;
}
.searchbar,
.button {
	height: 45px;
	margin: 1em 0 4em;
	padding: 0;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	color: white;
	border: none;
}
.searchbar {
	float: left;
	width: 380px;
	border-bottom: solid thin white;
	color: #E8E8E8;
	color: rgba(255, 255, 255, 0.7);
}

.button {
	float: right;
	width: 100px;
}
.panel {
	width: 100%;
	display: inline-block;
}
.weather {
	width: 100%;
	margin-top: 20px;
	display: inline-block;
        box-sizing: border-box;
}
.city {
	text-align: left;
	border-bottom: solid thin white;
	text-transform: uppercase;
	color: #E8E8E8;
	color: rgba(255, 255, 255, 0.7);
}
.group {
	width: 165px;
	margin-bottom: 20px;
	text-align: right;
	float: right;
	clear: both;
}
.temp {
	font-size: 4.5em;
	font-weight: 300;
	line-height: 0.75;
}
.celsius,
.fahrenheit,
.divider {
	font-size: 1.75rem;
	vertical-align: super;
}
.divider {
	margin: 0 0.05em;
}
.forecast {
	display: table;
	text-transform: uppercase;
	width: 100%;
}
.block {
	display: table-cell;
	padding: 1.5em 0 0 0;
	text-align: center;
}
.high {
	font-weight: 300;
	margin: 0.25em 0;
}

.secondary {opacity: 0.7;}
.transparent {background: transparent;}
.hot {background: #FF5722;}
.warm {background: #FF6F00;}
.cool {background: #2196F3;}
.cold {background: #3F51B5;}
.color404 {background: #161616;}
.button-hot {background: #BF360C;}
.button-warm {background: #B34E00;}
.button-cool {background: #0D47A1;}
.button-cold {background: #1A237E;}
.button404 {background: black;}

@media screen and (max-width: 767px){
    .wrapper{
        width: 100%;
        max-width: 480px;
    }
    .wrapper .group.secondary{
        width: 100%
    }
    .wrapper .temperature{
        width: 100%;
        float: left;
    }
}