/*
 * Created with iconvau.lt
 */

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

.icon-night:before,
.icon-sunny:before,
.icon-frosty:before,
.icon-windysnow:before,
.icon-showers:before,
.icon-basecloud:before,
.icon-cloud:before,
.icon-rainy:before,
.icon-mist:before,
.icon-windysnowcloud:before,
.icon-drizzle:before,
.icon-snowy:before,
.icon-sleet:before,
.icon-moon:before,
.icon-windyrain:before,
.icon-hail:before,
.icon-sunset:before,
.icon-windyraincloud:before,
.icon-sunrise:before,
.icon-sun:before,
.icon-thunder:before,
.icon-windy:before {
  font-family: "iconvault";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  text-decoration: inherit;
}

.icon-night:before { content: "\f100"; }
.icon-sunny:before { content: "\f101"; }
.icon-frosty:before { content: "\f102"; }
.icon-windysnow:before { content: "\f103"; }
.icon-showers:before { content: "\f104"; }
.icon-basecloud:before { content: "\f105"; }
.icon-cloud:before { content: "\f106"; }
.icon-rainy:before { content: "\f107"; }
.icon-mist:before { content: "\f108"; }
.icon-windysnowcloud:before { content: "\f109"; }
.icon-drizzle:before { content: "\f10a"; }
.icon-snowy:before { content: "\f10b"; }
.icon-sleet:before { content: "\f10c"; }
.icon-moon:before { content: "\f10d"; }
.icon-windyrain:before { content: "\f10e"; }
.icon-hail:before { content: "\f10f"; }
.icon-sunset:before { content: "\f110"; }
.icon-windyraincloud:before { content: "\f111"; }
.icon-sunrise:before { content: "\f112"; }
.icon-sun:before { content: "\f113"; }
.icon-thunder:before { content: "\f114"; }
.icon-windy:before { content: "\f115"; }


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

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



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

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

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

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

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

.basethundercloud:before  {
  font-family: 'iconvault';
  font-size:6em;
  color:#000;

}



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

.icon-thunder::before  {
  color:rgb(255, 165, 0);
}

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

.icon-sunny::after {
  color:rgb(255, 165, 0);
}


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

.icon-drizzle::before  {
  color: #82b2e4;
}

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

.icon-hail::before {
  color:rgb(204, 204, 204);}

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

.icon-showers::before  {
  color:#82b2e4;
}

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

.icon-rainy::before {
  color:#4681c3;
}

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

.icon-snowy::before  {
  color:#acd3f3;
}

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

.icon-frosty::before {
  color:#85d8f7;
}

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

.icon-windy::before  {
  color:rgb(204, 204, 204);
}

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

.icon-windyrain::before {
  color:#acd3f3;
}

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

.icon-windysnow::before {
  color:#acd3f3;
}

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

.icon-sleet::before  {
  color:#acd3f3;
}

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

.icon-moon::after {
  color:rgb(255, 165, 0);
}

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

.icon-night::after {
  color:rgb(255, 165, 0);
}


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

.icon-sun::after {
  color:rgb(255, 165, 0);
}

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

.icon-cloud::after {
  color:rgb(204, 204, 204);
}


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

.icon-sunrise:before  {
  color:rgb(255, 165, 0);
}

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

.icon-sunset:before  {
  color:#f96f23;
}

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

.icon-mist:before  {
  color:rgb(204, 204, 204);
}


.liClimate{
  padding: 10px !important;
}

.svgClima{
  font-size: 50px;
  text-align: center;
  height:90px;
}

.cityName{
  display: block;
  font-size: 14px;
  width: 100%;
  margin-top: 10px;
}

.descClimate{
  display: block;
  font-size: 14px;
  width: 100%;
}

.infoTem{
  display: grid;
  font-size: 16px;
  width: 100%;
}

.minTem{
  float: left;
  text-align: left;
  width: 100%;
  font-size: 12px;
  margin-bottom: 10px;
}

.maxTem{
  float: right;
  text-align: left;
  width: 100%;
  font-size: 12px;

}

.contenTemp{
  width: 100%;
  text-align: center;
}

.baseC{
  margin-top: -10px;
  font-size: 60px;
  display: block
}
.subC{
  margin-top: -50px;
  display: block;
  font-size: 60px;
  height: 85px;
}

.displayBlock{
  display: block;
}

.nublado{
  margin-top: -70px;
  display: block;
  color: rgb(255, 165, 0);
  font-size: 80px;
  height: 85px;
}

.tempestade{
  margin-left: 30px;
  margin-top: -100px;
  display: block;
  font-size: 80px;
}

.colorBlack{
  color: #000;
}

.colorYellow{
  color: rgb(255, 165, 0);
  display: block;
  font-size: 80px;
}

.mt-30{
  margin-top: -30px;
}