body {
  background-color: #ecf0f1;
}

@font-face {
  font-family: 'MeteoconsRegular';
  src: url('../fonts/meteocons-webfont.eot');
  src: url('../fonts/meteocons-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/meteocons-webfont.woff') format('woff'),
       url('../fonts/meteocons-webfont.ttf') format('truetype'),
       url('../fonts/meteocons-webfont.svg#MeteoconsRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

i.icon {
  font-size: 100px;
  font-style: normal;
}

i.active#night {
  color: #2c3e50;
}
i.active#rain {
  color: #3498db;
}
i.active#thunder {
  color: #f1c40f;
}
i.active#wind {
  color: #bdc3c7;
}

div.icon-list {
  height: 200px;
  width: 680px;

  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

div.volume-wrapper {
  position: absolute;
  bottom: 10px;
  left: 10px;
}

div.icon-list i {
  margin-left: 50px;
}

[data-icon]:before {
  font-family: 'MeteoconsRegular';
  content: attr(data-icon);
}