@font-face {
  font-family: "iconvault";
  src: url("/fileadmin/wetter/wetteronline/iconvault_forecastfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}  
  
  
  

[class^="icon-"],
[class*=" icon-"] {
  font-family: 'iconvault';
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;
  font-size: 4em;

}

@media only screen and (min-width: 479px) and (max-width: 678px){
[class^="icon-"],
[class*=" icon-"] {
  font-family: 'iconvault';
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;}
}

/* -----BaseCloud----- */

  .basecloud:before  {
  font-family: 'iconvault';
  font-size:4em;
  content: '\f105';
  position:absolute;
  color:rgb(204, 204, 204);
  }
  
  .icon-basecloud:before  {
  font-family: 'iconvault';
  content: '\f105';
  position:absolute;
  color:rgb(204, 204, 204);
  -webkit-font-smoothing: auto;
  }
  
  
  
/* -----windyraincloud----- */

  .windyraincloud:before  {
  font-family: 'iconvault';
  font-size:4em;
  content: '\f111';
  position:absolute;
  color:rgb(204, 204, 204);
  }
  
  .icon-windyraincloud:before  {
  font-family: 'iconvault';
  content: '\f111';
  position:absolute;
  color:rgb(204, 204, 204);
  -webkit-font-smoothing: auto;
  }
  
/* -----Windysnowcloud----- */

  .windysnowcloud:before  {
  font-family: 'iconvault';
  font-size:4em;
  content: '\f109';
  position:absolute;
  color:rgb(204, 204, 204);
  }
  
  .icon-windysnowcloud:before  {
  font-family: 'iconvault';
  content: '\f109';
  position:absolute;
  color:rgb(204, 204, 204);
  -webkit-font-smoothing: auto;
  }

/* -----Basethundercloud----- */

  .basethundercloud:before  {
  font-family: 'iconvault';
  font-size:4em;
  content: '\f105';
  position:absolute;
  color:#000;
  }
  
  .icon-basethundercloud:before  {
  font-family: 'iconvault';
  content: '\f105';
  position:absolute;
  color:#000;
  -webkit-font-smoothing: auto;
  }


/* -----Thunder----- */

  .icon-thunder::before  {
  content: "\f114";
  position:absolute;
  color:rgb(255, 165, 0);
  }

/* -----Sunny----- */

  .icon-sunny::after {
  content: "\f101";
  color:rgb(255, 165, 0);
  position: absolute;
  }


/* -----Drizzle----- */

  .icon-drizzle::before  {
  content: "\f10a";
  color: #82b2e4;
  position: absolute;
}

/* -----Hail----- */

  .icon-hail::before {
  content: "\f10f";
  position:absolute;
  color:rgb(204, 204, 204);}

/* -----Showers----- */

  .icon-showers::before  {
  content: "\f104";
  position:absolute;
  color:#82b2e4;
}

/* -----Rainy----- */

  .icon-rainy::before {
  content: "\f107";
  position:absolute;
  color:#4681c3;
  }

/* -----Snowy----- */

  .icon-snowy::before  {
  content: "\f10b";
  position:absolute;
  color:#acd3f3;
  }

/* -----Frosty----- */

  .icon-frosty::before {
  content: "\f102";
  position:absolute;
  color:#85d8f7;
  }

/* -----Windy----- */

  .icon-windy::before  {
  content: "\f115";
  position:absolute;
  color:rgb(204, 204, 204);
  }

/* -----WindyRain----- */

  .icon-windyrain::before {
  content: "\f10e";
  position:absolute;
  color:#acd3f3;
  }

/* -----WindySnow----- */

  .icon-windysnow::before {
  content: "\f103";
  position:absolute;
  color:#acd3f3;
  }

/* -----Sleet----- */

  .icon-sleet::before  {
  content: "\f10c";
  position:absolute;
  color:#acd3f3;
  }

/* -----Moon----- */

  .icon-moon::after {
  content: "\f10d";
  color:rgb(255, 165, 0);
  position: absolute;
  }

/* -----Night----- */

  .icon-night::after {
  content: "\f100";
  position:absolute;
  color:rgb(255, 165, 0);
  }


/* -----Sun----- */

  .icon-sun::after {
  content: "\f113";
  color:rgb(255, 165, 0);
  position: absolute;
  }

/* -----Cloud----- */

  .icon-cloud::after {
  content: "\f106";
  color:rgb(204, 204, 204);
  position: absolute;
  }


/* -----Sunrise----- */

  .icon-sunrise:before  {
  content: '\f112';
  color:rgb(255, 165, 0);
  position: absolute;
  }

/* -----Sunset----- */

  .icon-sunset:before  {
  content: '\f110';
  color:#f96f23;
  position: absolute;
  }

/* -----Mist----- */

  .icon-mist:before  {
  content: '\f108';
  color:rgb(204, 204, 204);
  position: absolute;
  }