@import url('https://fonts.googleapis.com/css?family=Roboto:400,300,100');
@import url('https://cdnjs.cloudflare.com/ajax/libs/weather-icons/1.3.2/css/weather-icons.min.css');


.cold {
    background: #3F51B5;
}
h1,
h2,
h3,
h4 {
	color: white;
    font-family: 'Roboto';
    
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.025em;
	margin: 0; padding: 0;
}
a {
	color: white;
	opacity: 0.54;
	text-decoration: none;
}
a:hover,
.active {opacity: 1;}

.wrapper {
	width: 480px;
    margin: 0 auto;
    
}
.searchbar,
.button {
	height: 45px;
	margin: 1em 0 4em;
	padding: 0;
	font: 400 1rem 'Roboto';
	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);
}

.searchbar::-webkit-input-placeholder {color: white; opacity: 0.35;}
.searchbar::-moz-placeholder {color: white; opacity: 0.35;}
.searchbar:-ms-input-placeholder {color: white; opacity: 0.35;}
.searchbar:-moz-placeholder {color: white; opacity: 0.35;}

.button:focus,
.searchbar:focus {outline: none; color: white;}
.searchbar:focus::-webkit-input-placeholder {color: white; opacity: 0.7;}
.searchbar:focus::-moz-placeholder {color: white; opacity: 0.7;}
.searchbar:focus:-ms-input-placeholder {color: white; opacity: 0.7;}
.searchbar:focus:-moz-placeholder {color: white; opacity: 0.7;}

.button {
	float: right;
	width: 100px;
}
.panel {
	width: 100%;
	display: inline-block;
}
.weather {
	width: 100%;
	margin-top: 20px;
	display: inline-block;
}
.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;}