@import url('https://fonts.googleapis.com/css?family=Roboto:400,300,100');

body {
  -webkit-transition: background-color 500ms linear;
  -ms-transition: background-color 500ms linear;
  transition: background-color 500ms linear;
}

h1,
h2,
h3,
h4 {
	color: white;
	font-family: 'Roboto';
	font-weight: 100;
	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 0 0;
	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);
}

@media only screen and (max-width: 415px) {
  .wrapper {
  	width: 320px;
  }

  .searchbar {
    width: 180px;
  }
}

.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: auto;
  margin-right: 25px;
}
.panel {
	width: 100%;
	display: inline-block;
  opacity: 1;
  -webkit-transition: opacity 500ms linear;
  -ms-transition: opacity 500ms linear;
  transition: opacity 500ms linear;
}
.panel.hide {
  opacity: 0;
}

.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: 225px;
	margin-bottom: 20px;
	text-align: right;
	float: right;
	clear: both;
}
.temp {
	font-size: 4em;
	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;}

.main-icon {
  margin-top: 25px;
}

.current-condition {
  text-transform: capitalize;
}

.forecast .wi {
  color: #FFF;
  font-size: 2rem;
  margin: 5px 0;
}

label[for="search"] {
  float: left;
  width: 100%;
  margin-bottom: 3rem;
	color: white;
	font-family: 'Roboto';
  margin-top: 0.5rem;
  font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.025em;
	margin: 0; padding: 0;
  margin-bottom: 3rem;
}