[#if FORECAST#]
<style>
  @import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
  @import url(https://cdnjs.cloudflare.com/ajax/libs/weather-icons/1.3.2/css/weather-icons.min.css);
  /* Vars */
  /* Grid System */
  .fc-widget-1a * {
    box-sizing: border-box;
  }
  .fc-widget-1a {
    max-width: 300px;
    position: relative;
    padding: 0 15;
    min-width: 280px;
  }
  .fc-widget-1a:before, .fc-widget-1:after {
    content: "";
    display: table;
  }
  .fc-widget-1a:after {
    clear: both;
  }
  .fc-widget-1a .row:before, .fc-widget-1 .row:after {
    content: "";
    display: table;
  }
  .fc-widget-1a .row:after {
    clear: both;
  }
  .fc-widget-1a .columns {
    float: left;
    display: block;
    margin-bottom: 0px;
    vertical-align: top;
    padding: 0;
  }
  .fc-widget-1a .columns.sm-days {
    width: 14.28%;
    opacity: 0;
  }
  /* Main Styles */
  .fc-widget-1a {
    color: #fff;
    font-family: "Lato", "Arial", sans-serif;
    font-size: 1.5rem;
    line-height: 1.6;
    transition: all 0.5s;
  }
  .fc-widget-1a {
    background: rgba(64, 165, 188, 0.8);
    border-radius: 0.5rem;
    box-shadow: inset 0 1.5px 4px rgba(255, 255, 255, 0.25), inset 0 1.5px 6px rgba(255, 255, 255, 0.25);
    min-height: 140px;
	max-height: 150px;
	overflow: hidden;
  }
  /* Header Section */
  .fc-widget-1a header {
    font-size: 2rem;
    font-weight: 300;
    padding: 0.3rem;
    text-align: center;
    overflow: hidden;
  }
  .fc-widget-1a header h2 {
    font-size: 1rem;
	width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0px;
    margin-bottom: 0px;
  }
  
  .fc-widget-1a header h2a {
    font-size: 1.5rem;
	margin-left: 15px;
    font-weight: 300;
  }
  
  .fc-widget-1a .current-city-day {
    font-size: 1rem;
    display: block;
  }
  .fc-widget-1a sup {
    position: relative;
    top: -1em;
    font-size: 50%;
  }
  .fc-widget-1a .current-city-weather {
    font-size: 4rem;
  }
  /* Week Days Section */
  .fc-widget-1a .week-days {
    font-weight: 700;
    text-align: center;
  }
  .fc-widget-1a .day {
    background: #55a0b3;
    border: 1px solid #86bdc9;
  }
  .fc-widget-1a .sm-days {
    border-right: 1px solid #86bdc9;
    cursor: pointer;
  }
  .fc-widget-1a .sm-days:last-child {
    border: none;
  }
  .fc-widget-1a .day-weather-icon,
  .fc-widget-1a .day-weather-info {
    margin: 1rem 0;
	font-size: 1.5rem;
  }

  .fc-widget-1a .day-weather-info h2{
    margin: 0;
	font-size: 1.2rem;
  }
  .day-weather-icon {
    font-size: 2.5rem;
  }
  /* Media Queries */
  @media (max-width: 720px) {
    .fc-widget-1a {
      font-size: 12px;
    }
  }
  @media (max-width: 520px) {

    .fc-widget-1a .columns {
      float: left;
      margin-left: 0;
      margin-top: 1rem;
    }
   .fc-widget-1a .columns:nth-child(odd) {
      margin-left: 0;
    }
    .fc-widget-1a .columns.sm-four,
    .fc-widget-1a .columns.sm-days {
      width: 100%;
    }
    .fc-widget-1a .day {
      padding: 1arem;
    }
    .fc-widget-1a .current-city-day {
      font-size: 2rem;
    }
  }
  /* Keyframes */
  @keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translate3d(0, 100%, 0);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  .fc-widget-1a .fadeInUp {
    animation-name: fadeInUp;
    animation-duration: 1s;
    animation-fill-mode: both;
  }
  @keyframes fadeIn {
    0% {
      transform: scale(0.8);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
  .fc-widget-1a .fadeIn,
  .fc-widget-1a .columns.sm-days {
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-fill-mode: both;
  }
  .fc-widget-1a .sm-days:nth-child(1) {
    animation-delay: 0.2s;
  }
  .fc-widget-1a .sm-days:nth-child(2) {
    animation-delay: 0.4s;
  }
  .fc-widget-1a .sm-days:nth-child(3) {
    animation-delay: 0.6s;
  }
  .fc-widget-1a .sm-days:nth-child(4) {
    animation-delay: 0.8s;
  }
  .fc-widget-1a .sm-days:nth-child(5) {
    animation-delay: 1s;
  }
  .fc-widget-1a .sm-days:nth-child(6) {
    animation-delay: 1.2s;
  }
  .fc-widget-1a .sm-days:nth-child(7) {
    animation-delay: 1.4s;
  }


</style>


<section class="fc-widget-1a">
  <!-- Current Weather Details //-->
  <header>
    <div class="row">
      <div class="sm-four columns current-city-name">
        <h2a>[#W_NAME#]</h2a>
      </div>
    </div>
  </header>
  <!--// End Current Weather Details -->

  <!-- Days //-->
  <section class="week-days">

    <div class="row">
[#begin FORECAST#]
      <div class="sm-days columns">
        <div class="day">
          [#WEEK_DAY#]
        </div>
        <div class="day-weather-icon">
          <i class="wi
[#if ICON="01d"#]wi-day-sunny[#endif#]
[#if ICON="01n"#]wi-night-clear[#endif#]
[#if ICON="02d"#]wi-day-cloudy[#endif#]
[#if ICON="02n"#]wi-night-alt-cloudy[#endif#]
[#if ICON="03d"#]wi-cloud[#endif#]
[#if ICON="03n"#]wi-cloud[#endif#]
[#if ICON="04d"#]wi-cloudy[#endif#]
[#if ICON="04n"#]wi-cloudy[#endif#]
[#if ICON="09d"#]wi-rain[#endif#]
[#if ICON="09n"#]wi-rain[#endif#]
[#if ICON="10d"#]wi-day-rain[#endif#]
[#if ICON="10n"#]wi-night-alt-rain[#endif#]
[#if ICON="11d"#]wi-day-thunderstorm[#endif#]
[#if ICON="11n"#]wi-night-alt-thunderstorm[#endif#]
[#if ICON="13d"#]wi-day-snow[#endif#]
[#if ICON="13n"#]wi-night-alt-snow[#endif#]
[#if ICON="50d"#]wi-day-fog[#endif#]
[#if ICON="50n"#]wi-night-fog[#endif#]
"></i>
        </div>
        <div class="day-weather-info">
          <h2>%[#OBJ#].temperature%<sup>o</sup>C</h2>
        </div>
      </div>

[#end FORECAST#]
</div>
  </section>
  <!--// End Days -->
</section>
[#endif FORECAST#]