@extends('layouts.app')
@section('content')
    <div class="content-heading">
        <div>
            Weather Icons
            <small>Static and animated weather themed icons, ready to be dropped right into your project.</small>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <p class="lead mt-3">Daytime</p>
            <div class="row">
                <div class="col-lg-4">
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-day-sunny"></i></div>
                        <div class="col-10">.wi.wi-day-sunny</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-day-cloudy"></i></div>
                        <div class="col-10">.wi.wi-day-cloudy</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-day-cloudy-gusts"></i></div>
                        <div class="col-10">.wi.wi-day-cloudy-gusts</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-day-cloudy-windy"></i></div>
                        <div class="col-10">.wi.wi-day-cloudy-windy</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-day-fog"></i></div>
                        <div class="col-10">.wi.wi-day-fog</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-day-hail"></i></div>
                        <div class="col-10">.wi.wi-day-hail</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-day-haze"></i></div>
                        <div class="col-10">.wi-day-haze</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-day-lightning"></i></div>
                        <div class="col-10">.wi-day-lightning</div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-day-rain"></i></div>
                        <div class="col-10">.wi-day-rain</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-day-rain-mix"></i></div>
                        <div class="col-10">.wi-day-rain-mix</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-day-rain-wind"></i></div>
                        <div class="col-10">.wi-day-rain-wind</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-day-showers"></i></div>
                        <div class="col-10">.wi-day-showers</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-day-sleet"></i></div>
                        <div class="col-10">.wi-day-sleet</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-day-sleet-storm"></i></div>
                        <div class="col-10">.wi-day-sleet-storm</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-day-snow"></i></div>
                        <div class="col-10">.wi-day-snow</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-day-snow-thunderstorm"></i></div>
                        <div class="col-10">.wi-day-snow-thunderstorm</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-day-snow-wind"></i></div>
                        <div class="col-10">.wi-day-snow-wind</div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-day-sprinkle"></i></div>
                        <div class="col-10">.wi-day-sprinkle</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-day-storm-showers"></i></div>
                        <div class="col-10">.wi-day-storm-showers</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-day-sunny-overcast"></i></div>
                        <div class="col-10">.wi-day-sunny-overcast</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-day-thunderstorm"></i></div>
                        <div class="col-10">.wi-day-thunderstorm</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-day-windy"></i></div>
                        <div class="col-10">.wi-day-windy</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-solar-eclipse"></i></div>
                        <div class="col-10">.wi-solar-eclipse</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-hot"></i></div>
                        <div class="col-10">.wi-hot</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-day-cloudy-high"></i></div>
                        <div class="col-10">.wi-day-cloudy-high</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-day-light-wind"></i></div>
                        <div class="col-10">.wi-day-light-wind</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-12">
            <p class="lead mt-3">Nighttime</p>
            <div class="row">
                <div class="col-lg-4">
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-clear"></i></div>
                        <div class="col-10">.wi-night-clear</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-alt-cloudy"></i></div>
                        <div class="col-10">.wi-night-alt-cloudy</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-alt-cloudy-gusts"></i></div>
                        <div class="col-10">.wi-night-alt-cloudy-gusts</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-alt-cloudy-windy"></i></div>
                        <div class="col-10">.wi-night-alt-cloudy-windy</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-alt-hail"></i></div>
                        <div class="col-10">.wi-night-alt-hail</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-alt-lightning"></i></div>
                        <div class="col-10">.wi-night-alt-lightning</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-alt-rain"></i></div>
                        <div class="col-10">.wi-night-alt-rain</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-alt-rain-mix"></i></div>
                        <div class="col-10">.wi-night-alt-rain-mix</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-alt-rain-wind"></i></div>
                        <div class="col-10">.wi-night-alt-rain-wind</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-alt-showers"></i></div>
                        <div class="col-10">.wi-night-alt-showers</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-alt-sleet"></i></div>
                        <div class="col-10">.wi-night-alt-sleet</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-alt-sleet-storm"></i></div>
                        <div class="col-10">.wi-night-alt-sleet-storm</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-alt-snow"></i></div>
                        <div class="col-10">.wi-night-alt-snow</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-alt-snow-thunderstorm"></i></div>
                        <div class="col-10">.wi-night-alt-snow-thunderstorm</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-alt-snow-wind"></i></div>
                        <div class="col-10">.wi-night-alt-snow-wind</div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-alt-sprinkle"></i></div>
                        <div class="col-10">.wi-night-alt-sprinkle</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-alt-storm-showers"></i></div>
                        <div class="col-10">.wi-night-alt-storm-showers</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-alt-thunderstorm"></i></div>
                        <div class="col-10">.wi-night-alt-thunderstorm</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-cloudy"></i></div>
                        <div class="col-10">.wi-night-cloudy</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-cloudy-gusts"></i></div>
                        <div class="col-10">.wi-night-cloudy-gusts</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-cloudy-windy"></i></div>
                        <div class="col-10">.wi-night-cloudy-windy</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-fog"></i></div>
                        <div class="col-10">.wi-night-fog</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-hail"></i></div>
                        <div class="col-10">.wi-night-hail</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-lightning"></i></div>
                        <div class="col-10">.wi-night-lightning</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-partly-cloudy"></i></div>
                        <div class="col-10">.wi-night-partly-cloudy</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-rain"></i></div>
                        <div class="col-10">.wi-night-rain</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-rain-mix"></i></div>
                        <div class="col-10">.wi-night-rain-mix</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-rain-wind"></i></div>
                        <div class="col-10">.wi-night-rain-wind</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-showers"></i></div>
                        <div class="col-10">.wi-night-showers</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-sleet"></i></div>
                        <div class="col-10">.wi-night-sleet</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-sleet-storm"></i></div>
                        <div class="col-10">.wi-night-sleet-storm</div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-snow"></i></div>
                        <div class="col-10">.wi-night-snow</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-snow-thunderstorm"></i></div>
                        <div class="col-10">.wi-night-snow-thunderstorm</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-snow-wind"></i></div>
                        <div class="col-10">.wi-night-snow-wind</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-sprinkle"></i></div>
                        <div class="col-10">.wi-night-sprinkle</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-storm-showers"></i></div>
                        <div class="col-10">.wi-night-storm-showers</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-thunderstorm"></i></div>
                        <div class="col-10">.wi-night-thunderstorm</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-lunar-eclipse"></i></div>
                        <div class="col-10">.wi-lunar-eclipse</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-stars"></i></div>
                        <div class="col-10">.wi-stars</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-storm-showers"></i></div>
                        <div class="col-10">.wi-storm-showers</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-thunderstorm"></i></div>
                        <div class="col-10">.wi-thunderstorm</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-alt-cloudy-high"></i></div>
                        <div class="col-10">.wi-night-alt-cloudy-high</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-cloudy-high"></i></div>
                        <div class="col-10">.wi-night-cloudy-high</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-night-alt-partly-cloudy"></i></div>
                        <div class="col-10">.wi-night-alt-partly-cloudy</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-12">
            <p class="lead mt-3">Neutral</p>
            <div class="row">
                <div class="col-lg-4">
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-cloud"></i></div>
                        <div class="col-10">.wi-cloud</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-cloudy"></i></div>
                        <div class="col-10">.wi-cloudy</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-cloudy-gusts"></i></div>
                        <div class="col-10">.wi-cloudy-gusts</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-cloudy-windy"></i></div>
                        <div class="col-10">.wi-cloudy-windy</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-fog"></i></div>
                        <div class="col-10">.wi-fog</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-hail"></i></div>
                        <div class="col-10">.wi-hail</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-rain"></i></div>
                        <div class="col-10">.wi-rain</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-rain-mix"></i></div>
                        <div class="col-10">.wi-rain-mix</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-rain-wind"></i></div>
                        <div class="col-10">.wi-rain-wind</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-showers"></i></div>
                        <div class="col-10">.wi-showers</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-sleet"></i></div>
                        <div class="col-10">.wi-sleet</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-snow"></i></div>
                        <div class="col-10">.wi-snow</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-sprinkle"></i></div>
                        <div class="col-10">.wi-sprinkle</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-storm-showers"></i></div>
                        <div class="col-10">.wi-storm-showers</div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-thunderstorm"></i></div>
                        <div class="col-10">.wi-thunderstorm</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-snow-wind"></i></div>
                        <div class="col-10">.wi-snow-wind</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-snow"></i></div>
                        <div class="col-10">.wi-snow</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-smog"></i></div>
                        <div class="col-10">.wi-smog</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-smoke"></i></div>
                        <div class="col-10">.wi-smoke</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-lightning"></i></div>
                        <div class="col-10">.wi-lightning</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-raindrops"></i></div>
                        <div class="col-10">.wi-raindrops</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-raindrop"></i></div>
                        <div class="col-10">.wi-raindrop</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-dust"></i></div>
                        <div class="col-10">.wi-dust</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-snowflake-cold"></i></div>
                        <div class="col-10">.wi-snowflake-cold</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-windy"></i></div>
                        <div class="col-10">.wi-windy</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-strong-wind"></i></div>
                        <div class="col-10">.wi-strong-wind</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-sandstorm"></i></div>
                        <div class="col-10">.wi-sandstorm</div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-earthquake"></i></div>
                        <div class="col-10">.wi-earthquake</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-fire"></i></div>
                        <div class="col-10">.wi-fire</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-flood"></i></div>
                        <div class="col-10">.wi-flood</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-meteor"></i></div>
                        <div class="col-10">.wi-meteor</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-tsunami"></i></div>
                        <div class="col-10">.wi-tsunami</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-volcano"></i></div>
                        <div class="col-10">.wi-volcano</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-hurricane"></i></div>
                        <div class="col-10">.wi-hurricane</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-tornado"></i></div>
                        <div class="col-10">.wi-tornado</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-small-craft-advisory"></i></div>
                        <div class="col-10">.wi-small-craft-advisory</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-gale-warning"></i></div>
                        <div class="col-10">.wi-gale-warning</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-storm-warning"></i></div>
                        <div class="col-10">.wi-storm-warning</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-hurricane-warning"></i></div>
                        <div class="col-10">.wi-hurricane-warning</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind-direction"></i></div>
                        <div class="col-10">.wi-wind-direction</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-12">
            <p class="lead mt-3">Miscellaneous</p>
            <div class="row">
                <div class="col-lg-4">
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-alien"></i></div>
                        <div class="col-10">.wi-alien</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-celsius"></i></div>
                        <div class="col-10">.wi-celsius</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-fahrenheit"></i></div>
                        <div class="col-10">.wi-fahrenheit</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-degrees"></i></div>
                        <div class="col-10">.wi-degrees</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-thermometer"></i></div>
                        <div class="col-10">.wi-thermometer</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-thermometer-exterior"></i></div>
                        <div class="col-10">.wi-thermometer-exterior</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-thermometer-internal"></i></div>
                        <div class="col-10">.wi-thermometer-internal</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-cloud-down"></i></div>
                        <div class="col-10">.wi-cloud-down</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-cloud-up"></i></div>
                        <div class="col-10">.wi-cloud-up</div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-cloud-refresh"></i></div>
                        <div class="col-10">.wi-cloud-refresh</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-horizon"></i></div>
                        <div class="col-10">.wi-horizon</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-horizon-alt"></i></div>
                        <div class="col-10">.wi-horizon-alt</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-sunrise"></i></div>
                        <div class="col-10">.wi-sunrise</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-sunset"></i></div>
                        <div class="col-10">.wi-sunset</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moonrise"></i></div>
                        <div class="col-10">.wi-moonrise</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moonset"></i></div>
                        <div class="col-10">.wi-moonset</div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-refresh"></i></div>
                        <div class="col-10">.wi-refresh</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-refresh-alt"></i></div>
                        <div class="col-10">.wi-refresh-alt</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-umbrella"></i></div>
                        <div class="col-10">.wi-umbrella</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-barometer"></i></div>
                        <div class="col-10">.wi-barometer</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-humidity"></i></div>
                        <div class="col-10">.wi-humidity</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-na"></i></div>
                        <div class="col-10">.wi-na</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-train"></i></div>
                        <div class="col-10">.wi-train</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-12">
            <p class="lead mt-3">Moon Phases</p>
            <div class="row">
                <div class="col-lg-4">
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-new"></i></div>
                        <div class="col-10">.wi-moon-new</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-waxing-crescent-1"></i></div>
                        <div class="col-10">.wi-moon-waxing-crescent-1</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-waxing-crescent-2"></i></div>
                        <div class="col-10">.wi-moon-waxing-crescent-2</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-waxing-crescent-3"></i></div>
                        <div class="col-10">.wi-moon-waxing-crescent-3</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-waxing-crescent-4"></i></div>
                        <div class="col-10">.wi-moon-waxing-crescent-4</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-waxing-crescent-5"></i></div>
                        <div class="col-10">.wi-moon-waxing-crescent-5</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-waxing-crescent-6"></i></div>
                        <div class="col-10">.wi-moon-waxing-crescent-6</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-first-quarter"></i></div>
                        <div class="col-10">.wi-moon-first-quarter</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-waxing-gibbous-1"></i></div>
                        <div class="col-10">.wi-moon-waxing-gibbous-1</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-waxing-gibbous-2"></i></div>
                        <div class="col-10">.wi-moon-waxing-gibbous-2</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-waxing-gibbous-3"></i></div>
                        <div class="col-10">.wi-moon-waxing-gibbous-3</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-waxing-gibbous-4"></i></div>
                        <div class="col-10">.wi-moon-waxing-gibbous-4</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-waxing-gibbous-5"></i></div>
                        <div class="col-10">.wi-moon-waxing-gibbous-5</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-waxing-gibbous-6"></i></div>
                        <div class="col-10">.wi-moon-waxing-gibbous-6</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-full"></i></div>
                        <div class="col-10">.wi-moon-full</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-waning-gibbous-1"></i></div>
                        <div class="col-10">.wi-moon-waning-gibbous-1</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-waning-gibbous-2"></i></div>
                        <div class="col-10">.wi-moon-waning-gibbous-2</div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-waning-gibbous-3"></i></div>
                        <div class="col-10">.wi-moon-waning-gibbous-3</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-waning-gibbous-4"></i></div>
                        <div class="col-10">.wi-moon-waning-gibbous-4</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-waning-gibbous-5"></i></div>
                        <div class="col-10">.wi-moon-waning-gibbous-5</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-waning-gibbous-6"></i></div>
                        <div class="col-10">.wi-moon-waning-gibbous-6</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-third-quarter"></i></div>
                        <div class="col-10">.wi-moon-third-quarter</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-waning-crescent-1"></i></div>
                        <div class="col-10">.wi-moon-waning-crescent-1</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-waning-crescent-2"></i></div>
                        <div class="col-10">.wi-moon-waning-crescent-2</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-waning-crescent-3"></i></div>
                        <div class="col-10">.wi-moon-waning-crescent-3</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-waning-crescent-4"></i></div>
                        <div class="col-10">.wi-moon-waning-crescent-4</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-waning-crescent-5"></i></div>
                        <div class="col-10">.wi-moon-waning-crescent-5</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-waning-crescent-6"></i></div>
                        <div class="col-10">.wi-moon-waning-crescent-6</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-alt-new"></i></div>
                        <div class="col-10">.wi-moon-alt-new</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-alt-waxing-crescent-1"></i></div>
                        <div class="col-10">.wi-moon-alt-waxing-crescent-1</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-alt-waxing-crescent-2"></i></div>
                        <div class="col-10">.wi-moon-alt-waxing-crescent-2</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-alt-waxing-crescent-3"></i></div>
                        <div class="col-10">.wi-moon-alt-waxing-crescent-3</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-alt-waxing-crescent-4"></i></div>
                        <div class="col-10">.wi-moon-alt-waxing-crescent-4</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-alt-waxing-crescent-5"></i></div>
                        <div class="col-10">.wi-moon-alt-waxing-crescent-5</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-alt-waxing-crescent-6"></i></div>
                        <div class="col-10">.wi-moon-alt-waxing-crescent-6</div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-alt-first-quarter"></i></div>
                        <div class="col-10">.wi-moon-alt-first-quarter</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-alt-waxing-gibbous-1"></i></div>
                        <div class="col-10">.wi-moon-alt-waxing-gibbous-1</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-alt-waxing-gibbous-2"></i></div>
                        <div class="col-10">.wi-moon-alt-waxing-gibbous-2</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-alt-waxing-gibbous-3"></i></div>
                        <div class="col-10">.wi-moon-alt-waxing-gibbous-3</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-alt-waxing-gibbous-4"></i></div>
                        <div class="col-10">.wi-moon-alt-waxing-gibbous-4</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-alt-waxing-gibbous-5"></i></div>
                        <div class="col-10">.wi-moon-alt-waxing-gibbous-5</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-alt-waxing-gibbous-6"></i></div>
                        <div class="col-10">.wi-moon-alt-waxing-gibbous-6</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-alt-full"></i></div>
                        <div class="col-10">.wi-moon-alt-full</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-alt-waning-gibbous-1"></i></div>
                        <div class="col-10">.wi-moon-alt-waning-gibbous-1</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-alt-waning-gibbous-2"></i></div>
                        <div class="col-10">.wi-moon-alt-waning-gibbous-2</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-alt-waning-gibbous-3"></i></div>
                        <div class="col-10">.wi-moon-alt-waning-gibbous-3</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-alt-waning-gibbous-4"></i></div>
                        <div class="col-10">.wi-moon-alt-waning-gibbous-4</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-alt-waning-gibbous-5"></i></div>
                        <div class="col-10">.wi-moon-alt-waning-gibbous-5</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-alt-waning-gibbous-6"></i></div>
                        <div class="col-10">.wi-moon-alt-waning-gibbous-6</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-alt-third-quarter"></i></div>
                        <div class="col-10">.wi-moon-alt-third-quarter</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-alt-waning-crescent-1"></i></div>
                        <div class="col-10">.wi-moon-alt-waning-crescent-1</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-alt-waning-crescent-2"></i></div>
                        <div class="col-10">.wi-moon-alt-waning-crescent-2</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-alt-waning-crescent-3"></i></div>
                        <div class="col-10">.wi-moon-alt-waning-crescent-3</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-alt-waning-crescent-4"></i></div>
                        <div class="col-10">.wi-moon-alt-waning-crescent-4</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-alt-waning-crescent-5"></i></div>
                        <div class="col-10">.wi-moon-alt-waning-crescent-5</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-moon-alt-waning-crescent-6"></i></div>
                        <div class="col-10">.wi-moon-alt-waning-crescent-6</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-12">
            <p class="lead mt-3">Time</p>
            <div class="row">
                <div class="col-lg-4">
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-time-1"></i></div>
                        <div class="col-10">.wi-time-1</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-time-2"></i></div>
                        <div class="col-10">.wi-time-2</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-time-3"></i></div>
                        <div class="col-10">.wi-time-3</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-time-4"></i></div>
                        <div class="col-10">.wi-time-4</div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-time-5"></i></div>
                        <div class="col-10">.wi-time-5</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-time-6"></i></div>
                        <div class="col-10">.wi-time-6</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-time-7"></i></div>
                        <div class="col-10">.wi-time-7</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-time-8"></i></div>
                        <div class="col-10">.wi-time-8</div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-time-9"></i></div>
                        <div class="col-10">.wi-time-9</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-time-10"></i></div>
                        <div class="col-10">.wi-time-10</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-time-11"></i></div>
                        <div class="col-10">.wi-time-11</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-time-12"></i></div>
                        <div class="col-10">.wi-time-12</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-12">
            <p class="lead mt-3">Directional Arrows</p>
            <div class="row">
                <div class="col-lg-4">
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-direction-up"></i></div>
                        <div class="col-10">.wi-direction-up</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-direction-up-right"></i></div>
                        <div class="col-10">.wi-direction-up-right</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-direction-right"></i></div>
                        <div class="col-10">.wi-direction-right</div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-direction-down-right"></i></div>
                        <div class="col-10">.wi-direction-down-right</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-direction-down"></i></div>
                        <div class="col-10">.wi-direction-down</div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-direction-down-left"></i></div>
                        <div class="col-10">.wi-direction-down-left</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-direction-left"></i></div>
                        <div class="col-10">.wi-direction-left</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-direction-up-left"></i></div>
                        <div class="col-10">.wi-direction-up-left</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-12">
            <p class="lead mt-3">Wind Degree Examples</p>
            <div class="row">
                <div class="col-lg-4">
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind towards-0-deg"></i></div>
                        <div class="col-10">.wi-wind.towards-0-deg</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind towards-23-deg"></i></div>
                        <div class="col-10">.wi-wind.towards-23-deg</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind towards-45-deg"></i></div>
                        <div class="col-10">.wi-wind.towards-45-deg</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind towards-68-deg"></i></div>
                        <div class="col-10">.wi-wind.towards-68-deg</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind towards-90-deg"></i></div>
                        <div class="col-10">.wi-wind.towards-90-deg</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind towards-113-deg"></i></div>
                        <div class="col-10">.wi-wind.towards-113-deg</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind towards-135-deg"></i></div>
                        <div class="col-10">.wi-wind.towards-135-deg</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind towards-158-deg"></i></div>
                        <div class="col-10">.wi-wind.towards-158-deg</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind towards-180-deg"></i></div>
                        <div class="col-10">.wi-wind.towards-180-deg</div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind towards-203-deg"></i></div>
                        <div class="col-10">.wi-wind.towards-203-deg</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind towards-225-deg"></i></div>
                        <div class="col-10">.wi-wind.towards-225-deg</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind towards-248-deg"></i></div>
                        <div class="col-10">.wi-wind.towards-248-deg</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind towards-270-deg"></i></div>
                        <div class="col-10">.wi-wind.towards-270-deg</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind towards-293-deg"></i></div>
                        <div class="col-10">.wi-wind.towards-293-deg</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind towards-313-deg"></i></div>
                        <div class="col-10">.wi-wind.towards-313-deg</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind towards-336-deg"></i></div>
                        <div class="col-10">.wi-wind.towards-336-deg</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind from-180-deg"></i></div>
                        <div class="col-10">.wi-wind.from-180-deg</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind from-203-deg"></i></div>
                        <div class="col-10">.wi-wind.from-203-deg</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind from-225-deg"></i></div>
                        <div class="col-10">.wi-wind.from-225-deg</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind from-248-deg"></i></div>
                        <div class="col-10">.wi-wind.from-248-deg</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind from-270-deg"></i></div>
                        <div class="col-10">.wi-wind.from-270-deg</div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind from-293-deg"></i></div>
                        <div class="col-10">.wi-wind.from-293-deg</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind from-313-deg"></i></div>
                        <div class="col-10">.wi-wind.from-313-deg</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind from-336-deg"></i></div>
                        <div class="col-10">.wi-wind.from-336-deg</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind from-0-deg"></i></div>
                        <div class="col-10">.wi-wind.from-0-deg</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind from-23-deg"></i></div>
                        <div class="col-10">.wi-wind.from-23-deg</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind from-45-deg"></i></div>
                        <div class="col-10">.wi-wind.from-45-deg</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind from-68-deg"></i></div>
                        <div class="col-10">.wi-wind.from-68-deg</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind from-90-deg"></i></div>
                        <div class="col-10">.wi-wind.from-90-deg</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind from-113-deg"></i></div>
                        <div class="col-10">.wi-wind.from-113-deg</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind from-135-deg"></i></div>
                        <div class="col-10">.wi-wind.from-135-deg</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind from-158-deg"></i></div>
                        <div class="col-10">.wi-wind.from-158-deg</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-12">
            <p class="lead mt-3">Wind Cardinal Examples</p>
            <div class="row">
                <div class="col-lg-4">
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind wi-towards-n"></i></div>
                        <div class="col-10">.wi-towards-n</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind wi-towards-nne"></i></div>
                        <div class="col-10">.wi-towards-nne</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind wi-towards-ne"></i></div>
                        <div class="col-10">.wi-towards-ne</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind wi-towards-ene"></i></div>
                        <div class="col-10">.wi-towards-ene</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind wi-towards-e"></i></div>
                        <div class="col-10">.wi-towards-e</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind wi-towards-ese"></i></div>
                        <div class="col-10">.wi-towards-ese</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind wi-towards-se"></i></div>
                        <div class="col-10">.wi-towards-se</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind wi-towards-sse"></i></div>
                        <div class="col-10">.wi-towards-sse</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind wi-towards-s"></i></div>
                        <div class="col-10">.wi-towards-s</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind wi-towards-ssw"></i></div>
                        <div class="col-10">.wi-towards-ssw</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind wi-towards-sw"></i></div>
                        <div class="col-10">.wi-towards-sw</div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind wi-towards-wsw"></i></div>
                        <div class="col-10">.wi-towards-wsw</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind wi-towards-w"></i></div>
                        <div class="col-10">.wi-towards-w</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind wi-towards-wnw"></i></div>
                        <div class="col-10">.wi-towards-wnw</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind wi-towards-nw"></i></div>
                        <div class="col-10">.wi-towards-nw</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind wi-towards-nnw"></i></div>
                        <div class="col-10">.wi-towards-nnw</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind wi-from-n"></i></div>
                        <div class="col-10">.wi-wind.wi-from-n</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind wi-from-nne"></i></div>
                        <div class="col-10">.wi-wind.wi-from-nne</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind wi-from-ne"></i></div>
                        <div class="col-10">.wi-wind.wi-from-ne</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind wi-from-ene"></i></div>
                        <div class="col-10">.wi-wind.wi-from-ene</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind wi-from-e"></i></div>
                        <div class="col-10">.wi-wind.wi-from-e</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind wi-from-ese"></i></div>
                        <div class="col-10">.wi-wind.wi-from-ese</div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind wi-from-se"></i></div>
                        <div class="col-10">.wi-wind.wi-from-se</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind wi-from-sse"></i></div>
                        <div class="col-10">.wi-wind.wi-from-sse</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind wi-from-s"></i></div>
                        <div class="col-10">.wi-wind.wi-from-s</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind wi-from-ssw"></i></div>
                        <div class="col-10">.wi-wind.wi-from-ssw</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind wi-from-sw"></i></div>
                        <div class="col-10">.wi-wind.wi-from-sw</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind wi-from-wsw"></i></div>
                        <div class="col-10">.wi-wind.wi-from-wsw</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind wi-from-w"></i></div>
                        <div class="col-10">.wi-wind.wi-from-w</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind wi-from-wnw"></i></div>
                        <div class="col-10">.wi-wind.wi-from-wnw</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind wi-from-nw"></i></div>
                        <div class="col-10">.wi-wind.wi-from-nw</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind wi-from-nnw"></i></div>
                        <div class="col-10">.wi-wind.wi-from-nnw</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-12">
            <p class="lead mt-3">Beaufort Wind Scale</p>
            <div class="row">
                <div class="col-lg-4">
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind-beaufort-0"></i></div>
                        <div class="col-10">.wi-wind-beaufort-0</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind-beaufort-1"></i></div>
                        <div class="col-10">.wi-wind-beaufort-1</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind-beaufort-2"></i></div>
                        <div class="col-10">.wi-wind-beaufort-2</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind-beaufort-3"></i></div>
                        <div class="col-10">.wi-wind-beaufort-3</div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind-beaufort-4"></i></div>
                        <div class="col-10">.wi-wind-beaufort-4</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind-beaufort-5"></i></div>
                        <div class="col-10">.wi-wind-beaufort-5</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind-beaufort-6"></i></div>
                        <div class="col-10">.wi-wind-beaufort-6</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind-beaufort-7"></i></div>
                        <div class="col-10">.wi-wind-beaufort-7</div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind-beaufort-8"></i></div>
                        <div class="col-10">.wi-wind-beaufort-8</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind-beaufort-9"></i></div>
                        <div class="col-10">.wi-wind-beaufort-9</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind-beaufort-10"></i></div>
                        <div class="col-10">.wi-wind-beaufort-10</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind-beaufort-11"></i></div>
                        <div class="col-10">.wi-wind-beaufort-11</div>
                    </div>
                    <div class="row">
                        <div class="col-2 text-md"><i class="wi wi-wind-beaufort-12"></i></div>
                        <div class="col-10">.wi-wind-beaufort-12</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('styles')@endsection
@section('scripts')@endsection
