@font-face {
    font-family: "iconvault";
    src: url("iconvault_forecastfont.eot");
    src: url("iconvault_forecastfont.eot?#iefix") format("embedded-opentype"),
    url("iconvault_forecastfont.woff") format("woff"),
    url("iconvault_forecastfont.ttf") format("truetype"),
    url("iconvault_forecastfont.svg#iconvault") format("svg");
    font-weight: normal;
    font-style: normal;
}

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

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

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

.basecloud:before  {
    font-family: 'iconvault';
    font-size:6em;
    content: '\f105';
    position:absolute;
    color:rgb(204, 204, 204);
}



/* -----windyraincloud----- */

.windyraincloud:before  {
    font-family: 'iconvault';
    font-size:6em;
    content: '\f111';
    position:absolute;
    color:rgb(204, 204, 204);
}

/* -----Windysnowcloud----- */

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

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

.basethundercloud:before  {
    font-family: 'iconvault';
    font-size:6em;
    content: '\f105';
    position:absolute;
    color:#000;

}


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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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


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

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

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

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

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

.oweather {
    width: 100%;
    text-align: right;
    max-width: 300px;
    margin: auto;
}

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

.weather-icons {
    float: left;
    display:block;
    max-width: 110px;
}

.weather-text {
    font-size: 13px;
    color: gray;
}

.weather-infos {
    padding-top: 15px;
}

/* Pour personnaliser la couleur des icons ou la taille */
.weather-icons div:before {
    /*color:your_color;*/
    font-size: 7em;
}
.weather-icons div:after {
    /*color:your_color;*/
    font-size: 7em;
}

/* Adapation application mobile */
.mobile .weather-infos {
    padding: 0;
    margin: 0;
}

.mobile .weather-infos {
    font-size: 12px;
    text-align: center;
}

.mobile p.weather-text {
    font-size: 14px;
}

.mobile .weather-icons {
    float: none;
    text-align: center;
}

.mobile .weather-icons img {
    width: 20px;
    height: 20px;
    margin: 0 auto;
}