<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
   <meta name="description" content="Bootstrap Admin App + jQuery">
   <meta name="keywords" content="app, responsive, jquery, bootstrap, dashboard, admin">
   <title>Angle - Bootstrap Admin Template</title>
   <!-- =============== VENDOR STYLES ===============-->
   <!-- FONT AWESOME-->
   <link rel="stylesheet" href="../vendor/fontawesome/css/font-awesome.min.css">
   <!-- SIMPLE LINE ICONS-->
   <link rel="stylesheet" href="../vendor/simple-line-icons/css/simple-line-icons.css">
   <!-- ANIMATE.CSS-->
   <link rel="stylesheet" href="../vendor/animate.css/animate.min.css">
   <!-- WHIRL (spinners)-->
   <link rel="stylesheet" href="../vendor/whirl/dist/whirl.css">
   <!-- =============== PAGE VENDOR STYLES ===============-->
   <!-- WEATHER ICONS-->
   <link rel="stylesheet" href="../vendor/weather-icons/css/weather-icons.min.css">
   <link rel="stylesheet" href="../vendor/weather-icons/css/weather-icons-wind.min.css">
   <!-- =============== BOOTSTRAP STYLES ===============-->
   <link rel="stylesheet" href="css/bootstrap.css" id="bscss">
   <!-- =============== APP STYLES ===============-->
   <link rel="stylesheet" href="css/app.css" id="maincss">
</head>

<body>
   <div class="wrapper">
      <!-- top navbar-->
      <header class="topnavbar-wrapper">
         <!-- START Top Navbar-->
         <nav role="navigation" class="navbar topnavbar">
            <!-- START navbar header-->
            <div class="navbar-header">
               <a href="#/" class="navbar-brand">
                  <div class="brand-logo">
                     <img src="img/logo.png" alt="App Logo" class="img-responsive">
                  </div>
                  <div class="brand-logo-collapsed">
                     <img src="img/logo-single.png" alt="App Logo" class="img-responsive">
                  </div>
               </a>
            </div>
            <!-- END navbar header-->
            <!-- START Nav wrapper-->
            <div class="nav-wrapper">
               <!-- START Left navbar-->
               <ul class="nav navbar-nav">
                  <li>
                     <!-- Button used to collapse the left sidebar. Only visible on tablet and desktops-->
                     <a href="#" data-trigger-resize="" data-toggle-state="aside-collapsed" class="hidden-xs">
                        <em class="fa fa-navicon"></em>
                     </a>
                     <!-- Button to show/hide the sidebar on mobile. Visible on mobile only.-->
                     <a href="#" data-toggle-state="aside-toggled" data-no-persist="true" class="visible-xs sidebar-toggle">
                        <em class="fa fa-navicon"></em>
                     </a>
                  </li>
                  <!-- START User avatar toggle-->
                  <li>
                     <!-- Button used to collapse the left sidebar. Only visible on tablet and desktops-->
                     <a id="user-block-toggle" href="#user-block" data-toggle="collapse">
                        <em class="icon-user"></em>
                     </a>
                  </li>
                  <!-- END User avatar toggle-->
                  <!-- START lock screen-->
                  <li>
                     <a href="lock.html" title="Lock screen">
                        <em class="icon-lock"></em>
                     </a>
                  </li>
                  <!-- END lock screen-->
               </ul>
               <!-- END Left navbar-->
               <!-- START Right Navbar-->
               <ul class="nav navbar-nav navbar-right">
                  <!-- Search icon-->
                  <li>
                     <a href="#" data-search-open="">
                        <em class="icon-magnifier"></em>
                     </a>
                  </li>
                  <!-- Fullscreen (only desktops)-->
                  <li class="visible-lg">
                     <a href="#" data-toggle-fullscreen="">
                        <em class="fa fa-expand"></em>
                     </a>
                  </li>
                  <!-- START Alert menu-->
                  <li class="dropdown dropdown-list">
                     <a href="#" data-toggle="dropdown">
                        <em class="icon-bell"></em>
                        <div class="label label-danger">11</div>
                     </a>
                     <!-- START Dropdown menu-->
                     <ul class="dropdown-menu animated flipInX">
                        <li>
                           <!-- START list group-->
                           <div class="list-group">
                              <!-- list item-->
                              <a href="#" class="list-group-item">
                                 <div class="media-box">
                                    <div class="pull-left">
                                       <em class="fa fa-twitter fa-2x text-info"></em>
                                    </div>
                                    <div class="media-box-body clearfix">
                                       <p class="m0">New followers</p>
                                       <p class="m0 text-muted">
                                          <small>1 new follower</small>
                                       </p>
                                    </div>
                                 </div>
                              </a>
                              <!-- list item-->
                              <a href="#" class="list-group-item">
                                 <div class="media-box">
                                    <div class="pull-left">
                                       <em class="fa fa-envelope fa-2x text-warning"></em>
                                    </div>
                                    <div class="media-box-body clearfix">
                                       <p class="m0">New e-mails</p>
                                       <p class="m0 text-muted">
                                          <small>You have 10 new emails</small>
                                       </p>
                                    </div>
                                 </div>
                              </a>
                              <!-- list item-->
                              <a href="#" class="list-group-item">
                                 <div class="media-box">
                                    <div class="pull-left">
                                       <em class="fa fa-tasks fa-2x text-success"></em>
                                    </div>
                                    <div class="media-box-body clearfix">
                                       <p class="m0">Pending Tasks</p>
                                       <p class="m0 text-muted">
                                          <small>11 pending task</small>
                                       </p>
                                    </div>
                                 </div>
                              </a>
                              <!-- last list item-->
                              <a href="#" class="list-group-item">
                                 <small>More notifications</small>
                                 <span class="label label-danger pull-right">14</span>
                              </a>
                           </div>
                           <!-- END list group-->
                        </li>
                     </ul>
                     <!-- END Dropdown menu-->
                  </li>
                  <!-- END Alert menu-->
                  <!-- START Offsidebar button-->
                  <li>
                     <a href="#" data-toggle-state="offsidebar-open" data-no-persist="true">
                        <em class="icon-notebook"></em>
                     </a>
                  </li>
                  <!-- END Offsidebar menu-->
               </ul>
               <!-- END Right Navbar-->
            </div>
            <!-- END Nav wrapper-->
            <!-- START Search form-->
            <form role="search" action="search.html" class="navbar-form">
               <div class="form-group has-feedback">
                  <input type="text" placeholder="Type and hit enter ..." class="form-control">
                  <div data-search-dismiss="" class="fa fa-times form-control-feedback"></div>
               </div>
               <button type="submit" class="hidden btn btn-default">Submit</button>
            </form>
            <!-- END Search form-->
         </nav>
         <!-- END Top Navbar-->
      </header>
      <!-- sidebar-->
      <aside class="aside">
         <!-- START Sidebar (left)-->
         <div class="aside-inner">
            <nav data-sidebar-anyclick-close="" class="sidebar">
               <!-- START sidebar nav-->
               <ul class="nav">
                  <!-- START user info-->
                  <li class="has-user-block">
                     <div id="user-block" class="collapse">
                        <div class="item user-block">
                           <!-- User picture-->
                           <div class="user-block-picture">
                              <div class="user-block-status">
                                 <img src="img/user/02.jpg" alt="Avatar" width="60" height="60" class="img-thumbnail img-circle">
                                 <div class="circle circle-success circle-lg"></div>
                              </div>
                           </div>
                           <!-- Name and Job-->
                           <div class="user-block-info">
                              <span class="user-block-name">Hello, Mike</span>
                              <span class="user-block-role">Designer</span>
                           </div>
                        </div>
                     </div>
                  </li>
                  <!-- END user info-->
                  <!-- Iterates over all sidebar items-->
                  <li class="nav-heading ">
                     <span data-localize="sidebar.heading.HEADER">Main Navigation</span>
                  </li>
                  <li class=" ">
                     <a href="#dashboard" title="Dashboard" data-toggle="collapse">
                        <div class="pull-right label label-info">3</div>
                        <em class="icon-speedometer"></em>
                        <span data-localize="sidebar.nav.DASHBOARD">Dashboard</span>
                     </a>
                     <ul id="dashboard" class="nav sidebar-subnav collapse">
                        <li class="sidebar-subnav-header">Dashboard</li>
                        <li class=" ">
                           <a href="dashboard.html" title="Dashboard v1">
                              <span>Dashboard v1</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="dashboard_v2.html" title="Dashboard v2">
                              <span>Dashboard v2</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="dashboard_v3.html" title="Dashboard v3">
                              <span>Dashboard v3</span>
                           </a>
                        </li>
                     </ul>
                  </li>
                  <li class=" ">
                     <a href="widgets.html" title="Widgets">
                        <div class="pull-right label label-success">30</div>
                        <em class="icon-grid"></em>
                        <span data-localize="sidebar.nav.WIDGETS">Widgets</span>
                     </a>
                  </li>
                  <li class=" ">
                     <a href="#layout" title="Layouts" data-toggle="collapse">
                        <em class="icon-layers"></em>
                        <span>Layouts</span>
                     </a>
                     <ul id="layout" class="nav sidebar-subnav collapse">
                        <li class="sidebar-subnav-header">Layouts</li>
                        <li class=" ">
                           <a href="dashboard_h.html" title="Horizontal">
                              <span>Horizontal</span>
                           </a>
                        </li>
                     </ul>
                  </li>
                  <li class="nav-heading ">
                     <span data-localize="sidebar.heading.COMPONENTS">Components</span>
                  </li>
                  <li class=" ">
                     <a href="#elements" title="Elements" data-toggle="collapse">
                        <em class="icon-chemistry"></em>
                        <span data-localize="sidebar.nav.element.ELEMENTS">Elements</span>
                     </a>
                     <ul id="elements" class="nav sidebar-subnav collapse">
                        <li class="sidebar-subnav-header">Elements</li>
                        <li class=" ">
                           <a href="buttons.html" title="Buttons">
                              <span data-localize="sidebar.nav.element.BUTTON">Buttons</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="notifications.html" title="Notifications">
                              <span data-localize="sidebar.nav.element.NOTIFICATION">Notifications</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="sweetalert.html" title="Sweet Alert">
                              <span>Sweet Alert</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="tour.html" title="Tour">
                              <span>Tour</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="carousel.html" title="Carousel">
                              <span data-localize="sidebar.nav.element.INTERACTION">Carousel</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="spinners.html" title="Spinners">
                              <span data-localize="sidebar.nav.element.SPINNER">Spinners</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="animations.html" title="Animations">
                              <span data-localize="sidebar.nav.element.ANIMATION">Animations</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="dropdown-animations.html" title="Dropdown">
                              <span data-localize="sidebar.nav.element.DROPDOWN">Dropdown</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="nestable.html" title="Nestable">
                              <span>Nestable</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="sortable.html" title="Sortable">
                              <span>Sortable</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="panels.html" title="Panels">
                              <span data-localize="sidebar.nav.element.PANEL">Panels</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="portlets.html" title="Portlets">
                              <span data-localize="sidebar.nav.element.PORTLET">Portlets</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="grid.html" title="Grid">
                              <span data-localize="sidebar.nav.element.GRID">Grid</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="grid-masonry.html" title="Grid Masonry">
                              <span data-localize="sidebar.nav.element.GRID_MASONRY">Grid Masonry</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="typo.html" title="Typography">
                              <span data-localize="sidebar.nav.element.TYPO">Typography</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="icons-font.html" title="Font Icons">
                              <div class="pull-right label label-success">+400</div>
                              <span data-localize="sidebar.nav.element.FONT_ICON">Font Icons</span>
                           </a>
                        </li>
                        <li class=" active">
                           <a href="icons-weather.html" title="Weather Icons">
                              <div class="pull-right label label-success">+100</div>
                              <span data-localize="sidebar.nav.element.WEATHER_ICON">Weather Icons</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="colors.html" title="Colors">
                              <span data-localize="sidebar.nav.element.COLOR">Colors</span>
                           </a>
                        </li>
                     </ul>
                  </li>
                  <li class=" ">
                     <a href="#forms" title="Forms" data-toggle="collapse">
                        <em class="icon-note"></em>
                        <span data-localize="sidebar.nav.form.FORM">Forms</span>
                     </a>
                     <ul id="forms" class="nav sidebar-subnav collapse">
                        <li class="sidebar-subnav-header">Forms</li>
                        <li class=" ">
                           <a href="form-standard.html" title="Standard">
                              <span data-localize="sidebar.nav.form.STANDARD">Standard</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="form-extended.html" title="Extended">
                              <span data-localize="sidebar.nav.form.EXTENDED">Extended</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="form-validation.html" title="Validation">
                              <span data-localize="sidebar.nav.form.VALIDATION">Validation</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="form-wizard.html" title="Wizard">
                              <span>Wizard</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="form-upload.html" title="Upload">
                              <span>Upload</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="form-xeditable.html" title="xEditable">
                              <span>xEditable</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="form-imagecrop.html" title="Cropper">
                              <span>Cropper</span>
                           </a>
                        </li>
                     </ul>
                  </li>
                  <li class=" ">
                     <a href="#charts" title="Charts" data-toggle="collapse">
                        <em class="icon-graph"></em>
                        <span data-localize="sidebar.nav.chart.CHART">Charts</span>
                     </a>
                     <ul id="charts" class="nav sidebar-subnav collapse">
                        <li class="sidebar-subnav-header">Charts</li>
                        <li class=" ">
                           <a href="chart-flot.html" title="Flot">
                              <span data-localize="sidebar.nav.chart.FLOT">Flot</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="chart-radial.html" title="Radial">
                              <span data-localize="sidebar.nav.chart.RADIAL">Radial</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="chart-js.html" title="Chart JS">
                              <span>Chart JS</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="chart-rickshaw.html" title="Rickshaw">
                              <span>Rickshaw</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="chart-morris.html" title="MorrisJS">
                              <span>MorrisJS</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="chart-chartist.html" title="Chartist">
                              <span>Chartist</span>
                           </a>
                        </li>
                     </ul>
                  </li>
                  <li class=" ">
                     <a href="#tables" title="Tables" data-toggle="collapse">
                        <em class="icon-grid"></em>
                        <span data-localize="sidebar.nav.table.TABLE">Tables</span>
                     </a>
                     <ul id="tables" class="nav sidebar-subnav collapse">
                        <li class="sidebar-subnav-header">Tables</li>
                        <li class=" ">
                           <a href="table-standard.html" title="Standard">
                              <span data-localize="sidebar.nav.table.STANDARD">Standard</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="table-extended.html" title="Extended">
                              <span data-localize="sidebar.nav.table.EXTENDED">Extended</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="table-datatable.html" title="DataTables">
                              <span data-localize="sidebar.nav.table.DATATABLE">DataTables</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="table-jqgrid.html" title="jqGrid">
                              <span>jqGrid</span>
                           </a>
                        </li>
                     </ul>
                  </li>
                  <li class=" ">
                     <a href="#maps" title="Maps" data-toggle="collapse">
                        <em class="icon-map"></em>
                        <span data-localize="sidebar.nav.map.MAP">Maps</span>
                     </a>
                     <ul id="maps" class="nav sidebar-subnav collapse">
                        <li class="sidebar-subnav-header">Maps</li>
                        <li class=" ">
                           <a href="maps-google.html" title="Google Maps">
                              <span data-localize="sidebar.nav.map.GOOGLE">Google Maps</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="maps-vector.html" title="Vector Maps">
                              <span data-localize="sidebar.nav.map.VECTOR">Vector Maps</span>
                           </a>
                        </li>
                     </ul>
                  </li>
                  <li class="nav-heading ">
                     <span data-localize="sidebar.heading.MORE">More</span>
                  </li>
                  <li class=" ">
                     <a href="#pages" title="Pages" data-toggle="collapse">
                        <em class="icon-doc"></em>
                        <span data-localize="sidebar.nav.pages.PAGES">Pages</span>
                     </a>
                     <ul id="pages" class="nav sidebar-subnav collapse">
                        <li class="sidebar-subnav-header">Pages</li>
                        <li class=" ">
                           <a href="login.html" title="Login">
                              <span data-localize="sidebar.nav.pages.LOGIN">Login</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="register.html" title="Sign up">
                              <span data-localize="sidebar.nav.pages.REGISTER">Sign up</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="recover.html" title="Recover Password">
                              <span data-localize="sidebar.nav.pages.RECOVER">Recover Password</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="lock.html" title="Lock">
                              <span data-localize="sidebar.nav.pages.LOCK">Lock</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="template.html" title="Starter Template">
                              <span data-localize="sidebar.nav.pages.STARTER">Starter Template</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="404.html" title="404">
                              <span>404</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="500.html" title="500">
                              <span>500</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="maintenance.html" title="Maintenance">
                              <span>Maintenance</span>
                           </a>
                        </li>
                     </ul>
                  </li>
                  <li class=" ">
                     <a href="#extras" title="Extras" data-toggle="collapse">
                        <em class="icon-cup"></em>
                        <span data-localize="sidebar.nav.extra.EXTRA">Extras</span>
                     </a>
                     <ul id="extras" class="nav sidebar-subnav collapse">
                        <li class="sidebar-subnav-header">Extras</li>
                        <li class=" ">
                           <a href="#blog" title="Blog" data-toggle="collapse">
                              <em class="fa fa-angle-right"></em>
                              <span>Blog</span>
                           </a>
                           <ul id="blog" class="nav sidebar-subnav collapse">
                              <li class="sidebar-subnav-header">Blog</li>
                              <li class=" ">
                                 <a href="blog.html" title="List">
                                    <span>List</span>
                                 </a>
                              </li>
                              <li class=" ">
                                 <a href="blog-post.html" title="Post">
                                    <span>Post</span>
                                 </a>
                              </li>
                              <li class=" ">
                                 <a href="blog-articles.html" title="Articles">
                                    <span>Articles</span>
                                 </a>
                              </li>
                              <li class=" ">
                                 <a href="blog-article-view.html" title="Article View">
                                    <span>Article View</span>
                                 </a>
                              </li>
                           </ul>
                        </li>
                        <li class=" ">
                           <a href="#ecommerce" title="eCommerce" data-toggle="collapse">
                              <em class="fa fa-angle-right"></em>
                              <span>eCommerce</span>
                           </a>
                           <ul id="ecommerce" class="nav sidebar-subnav collapse">
                              <li class="sidebar-subnav-header">eCommerce</li>
                              <li class=" ">
                                 <a href="ecommerce-orders.html" title="Orders">
                                    <div class="pull-right label label-info">10</div>
                                    <span>Orders</span>
                                 </a>
                              </li>
                              <li class=" ">
                                 <a href="ecommerce-order-view.html" title="Order View">
                                    <span>Order View</span>
                                 </a>
                              </li>
                              <li class=" ">
                                 <a href="ecommerce-products.html" title="Products">
                                    <span>Products</span>
                                 </a>
                              </li>
                              <li class=" ">
                                 <a href="ecommerce-product-view.html" title="Product View">
                                    <span>Product View</span>
                                 </a>
                              </li>
                              <li class=" ">
                                 <a href="ecommerce-checkout.html" title="Checkout">
                                    <span>Checkout</span>
                                 </a>
                              </li>
                           </ul>
                        </li>
                        <li class=" ">
                           <a href="#forum" title="Forum" data-toggle="collapse">
                              <em class="fa fa-angle-right"></em>
                              <span>Forum</span>
                           </a>
                           <ul id="forum" class="nav sidebar-subnav collapse">
                              <li class="sidebar-subnav-header">Forum</li>
                              <li class=" ">
                                 <a href="forum-categories.html" title="Categories">
                                    <span>Categories</span>
                                 </a>
                              </li>
                              <li class=" ">
                                 <a href="forum-topics.html" title="Topics">
                                    <span>Topics</span>
                                 </a>
                              </li>
                              <li class=" ">
                                 <a href="forum-discussion.html" title="Discussion">
                                    <span>Discussion</span>
                                 </a>
                              </li>
                           </ul>
                        </li>
                        <li class=" ">
                           <a href="contacts.html" title="Contacts">
                              <span>Contacts</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="contact-details.html" title="Contact details">
                              <span>Contact details</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="projects.html" title="Projects">
                              <span>Projects</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="project-details.html" title="Projects details">
                              <span>Projects details</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="team-viewer.html" title="Team viewer">
                              <span>Team viewer</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="social-board.html" title="Social board">
                              <span>Social board</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="vote-links.html" title="Vote links">
                              <span>Vote links</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="bug-tracker.html" title="Bug tracker">
                              <span>Bug tracker</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="faq.html" title="FAQ">
                              <span>FAQ</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="help-center.html" title="Help Center">
                              <span>Help Center</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="followers.html" title="Followers">
                              <span>Followers</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="settings.html" title="Settings">
                              <span>Settings</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="plans.html" title="Plans">
                              <span>Plans</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="file-manager.html" title="File manager">
                              <span>File manager</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="mailbox.html" title="Mailbox">
                              <span data-localize="sidebar.nav.extra.MAILBOX">Mailbox</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="timeline.html" title="Timeline">
                              <span data-localize="sidebar.nav.extra.TIMELINE">Timeline</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="calendar.html" title="Calendar">
                              <span data-localize="sidebar.nav.extra.CALENDAR">Calendar</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="invoice.html" title="Invoice">
                              <span data-localize="sidebar.nav.extra.INVOICE">Invoice</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="search.html" title="Search">
                              <span data-localize="sidebar.nav.extra.SEARCH">Search</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="todo.html" title="Todo List">
                              <span data-localize="sidebar.nav.extra.TODO">Todo List</span>
                           </a>
                        </li>
                        <li class=" ">
                           <a href="profile.html" title="Profile">
                              <span data-localize="sidebar.nav.extra.PROFILE">Profile</span>
                           </a>
                        </li>
                     </ul>
                  </li>
                  <li class=" ">
                     <a href="#multilevel" title="Multilevel" data-toggle="collapse">
                        <em class="fa fa-folder-open-o"></em>
                        <span>Multilevel</span>
                     </a>
                     <ul id="multilevel" class="nav sidebar-subnav collapse">
                        <li class="sidebar-subnav-header">Multilevel</li>
                        <li class=" ">
                           <a href="#level1" title="Level 1" data-toggle="collapse">
                              <span>Level 1</span>
                           </a>
                           <ul id="level1" class="nav sidebar-subnav collapse">
                              <li class="sidebar-subnav-header">Level 1</li>
                              <li class=" ">
                                 <a href="multilevel-1.html" title="Level1 Item">
                                    <span>Level1 Item</span>
                                 </a>
                              </li>
                              <li class=" ">
                                 <a href="#level2" title="Level 2" data-toggle="collapse">
                                    <span>Level 2</span>
                                 </a>
                                 <ul id="level2" class="nav sidebar-subnav collapse">
                                    <li class="sidebar-subnav-header">Level 2</li>
                                    <li class=" ">
                                       <a href="#level3" title="Level 3" data-toggle="collapse">
                                          <span>Level 3</span>
                                       </a>
                                       <ul id="level3" class="nav sidebar-subnav collapse">
                                          <li class="sidebar-subnav-header">Level 3</li>
                                          <li class=" ">
                                             <a href="multilevel-3.html" title="Level3 Item">
                                                <span>Level3 Item</span>
                                             </a>
                                          </li>
                                       </ul>
                                    </li>
                                 </ul>
                              </li>
                           </ul>
                        </li>
                     </ul>
                  </li>
                  <li class=" ">
                     <a href="documentation.html" title="Documentation">
                        <em class="icon-graduation"></em>
                        <span data-localize="sidebar.nav.DOCUMENTATION">Documentation</span>
                     </a>
                  </li>
               </ul>
               <!-- END sidebar nav-->
            </nav>
         </div>
         <!-- END Sidebar (left)-->
      </aside>
      <!-- offsidebar-->
      <aside class="offsidebar hide">
         <!-- START Off Sidebar (right)-->
         <nav>
            <div role="tabpanel">
               <!-- Nav tabs-->
               <ul role="tablist" class="nav nav-tabs nav-justified">
                  <li role="presentation" class="active">
                     <a href="#app-settings" aria-controls="app-settings" role="tab" data-toggle="tab">
                        <em class="icon-equalizer fa-lg"></em>
                     </a>
                  </li>
                  <li role="presentation">
                     <a href="#app-chat" aria-controls="app-chat" role="tab" data-toggle="tab">
                        <em class="icon-user fa-lg"></em>
                     </a>
                  </li>
               </ul>
               <!-- Tab panes-->
               <div class="tab-content">
                  <div id="app-settings" role="tabpanel" class="tab-pane fade in active">
                     <h3 class="text-center text-thin">Settings</h3>
                     <div class="p">
                        <h4 class="text-muted text-thin">Themes</h4>
                        <div class="table-grid mb">
                           <div class="col mb">
                              <div class="setting-color">
                                 <label data-load-css="css/theme-a.css">
                                    <input type="radio" name="setting-theme" checked="checked">
                                    <span class="icon-check"></span>
                                    <span class="split">
                                       <span class="color bg-info"></span>
                                       <span class="color bg-info-light"></span>
                                    </span>
                                    <span class="color bg-white"></span>
                                 </label>
                              </div>
                           </div>
                           <div class="col mb">
                              <div class="setting-color">
                                 <label data-load-css="css/theme-b.css">
                                    <input type="radio" name="setting-theme">
                                    <span class="icon-check"></span>
                                    <span class="split">
                                       <span class="color bg-green"></span>
                                       <span class="color bg-green-light"></span>
                                    </span>
                                    <span class="color bg-white"></span>
                                 </label>
                              </div>
                           </div>
                           <div class="col mb">
                              <div class="setting-color">
                                 <label data-load-css="css/theme-c.css">
                                    <input type="radio" name="setting-theme">
                                    <span class="icon-check"></span>
                                    <span class="split">
                                       <span class="color bg-purple"></span>
                                       <span class="color bg-purple-light"></span>
                                    </span>
                                    <span class="color bg-white"></span>
                                 </label>
                              </div>
                           </div>
                           <div class="col mb">
                              <div class="setting-color">
                                 <label data-load-css="css/theme-d.css">
                                    <input type="radio" name="setting-theme">
                                    <span class="icon-check"></span>
                                    <span class="split">
                                       <span class="color bg-danger"></span>
                                       <span class="color bg-danger-light"></span>
                                    </span>
                                    <span class="color bg-white"></span>
                                 </label>
                              </div>
                           </div>
                        </div>
                        <div class="table-grid mb">
                           <div class="col mb">
                              <div class="setting-color">
                                 <label data-load-css="css/theme-e.css">
                                    <input type="radio" name="setting-theme">
                                    <span class="icon-check"></span>
                                    <span class="split">
                                       <span class="color bg-info-dark"></span>
                                       <span class="color bg-info"></span>
                                    </span>
                                    <span class="color bg-gray-dark"></span>
                                 </label>
                              </div>
                           </div>
                           <div class="col mb">
                              <div class="setting-color">
                                 <label data-load-css="css/theme-f.css">
                                    <input type="radio" name="setting-theme">
                                    <span class="icon-check"></span>
                                    <span class="split">
                                       <span class="color bg-green-dark"></span>
                                       <span class="color bg-green"></span>
                                    </span>
                                    <span class="color bg-gray-dark"></span>
                                 </label>
                              </div>
                           </div>
                           <div class="col mb">
                              <div class="setting-color">
                                 <label data-load-css="css/theme-g.css">
                                    <input type="radio" name="setting-theme">
                                    <span class="icon-check"></span>
                                    <span class="split">
                                       <span class="color bg-purple-dark"></span>
                                       <span class="color bg-purple"></span>
                                    </span>
                                    <span class="color bg-gray-dark"></span>
                                 </label>
                              </div>
                           </div>
                           <div class="col mb">
                              <div class="setting-color">
                                 <label data-load-css="css/theme-h.css">
                                    <input type="radio" name="setting-theme">
                                    <span class="icon-check"></span>
                                    <span class="split">
                                       <span class="color bg-danger-dark"></span>
                                       <span class="color bg-danger"></span>
                                    </span>
                                    <span class="color bg-gray-dark"></span>
                                 </label>
                              </div>
                           </div>
                        </div>
                     </div>
                     <div class="p">
                        <h4 class="text-muted text-thin">Layout</h4>
                        <div class="clearfix">
                           <p class="pull-left">Fixed</p>
                           <div class="pull-right">
                              <label class="switch">
                                 <input id="chk-fixed" type="checkbox" data-toggle-state="layout-fixed">
                                 <span></span>
                              </label>
                           </div>
                        </div>
                        <div class="clearfix">
                           <p class="pull-left">Boxed</p>
                           <div class="pull-right">
                              <label class="switch">
                                 <input id="chk-boxed" type="checkbox" data-toggle-state="layout-boxed">
                                 <span></span>
                              </label>
                           </div>
                        </div>
                        <div class="clearfix">
                           <p class="pull-left">RTL</p>
                           <div class="pull-right">
                              <label class="switch">
                                 <input id="chk-rtl" type="checkbox">
                                 <span></span>
                              </label>
                           </div>
                        </div>
                     </div>
                     <div class="p">
                        <h4 class="text-muted text-thin">Aside</h4>
                        <div class="clearfix">
                           <p class="pull-left">Collapsed</p>
                           <div class="pull-right">
                              <label class="switch">
                                 <input id="chk-collapsed" type="checkbox" data-toggle-state="aside-collapsed">
                                 <span></span>
                              </label>
                           </div>
                        </div>
                        <div class="clearfix">
                           <p class="pull-left">Collapsed Text</p>
                           <div class="pull-right">
                              <label class="switch">
                                 <input id="chk-collapsed-text" type="checkbox" data-toggle-state="aside-collapsed-text">
                                 <span></span>
                              </label>
                           </div>
                        </div>
                        <div class="clearfix">
                           <p class="pull-left">Float</p>
                           <div class="pull-right">
                              <label class="switch">
                                 <input id="chk-float" type="checkbox" data-toggle-state="aside-float">
                                 <span></span>
                              </label>
                           </div>
                        </div>
                        <div class="clearfix">
                           <p class="pull-left">Hover</p>
                           <div class="pull-right">
                              <label class="switch">
                                 <input id="chk-hover" type="checkbox" data-toggle-state="aside-hover">
                                 <span></span>
                              </label>
                           </div>
                        </div>
                        <div class="clearfix">
                           <p class="pull-left">Show Scrollbar</p>
                           <div class="pull-right">
                              <label class="switch">
                                 <input id="chk-hover" type="checkbox" data-toggle-state="show-scrollbar" data-target=".sidebar">
                                 <span></span>
                              </label>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div id="app-chat" role="tabpanel" class="tab-pane fade">
                     <h3 class="text-center text-thin">Connections</h3>
                     <ul class="nav">
                        <!-- START list title-->
                        <li class="p">
                           <small class="text-muted">ONLINE</small>
                        </li>
                        <!-- END list title-->
                        <li>
                           <!-- START User status-->
                           <a href="#" class="media-box p mt0">
                              <span class="pull-right">
                                 <span class="circle circle-success circle-lg"></span>
                              </span>
                              <span class="pull-left">
                                 <!-- Contact avatar-->
                                 <img src="img/user/05.jpg" alt="Image" class="media-box-object img-circle thumb48">
                              </span>
                              <!-- Contact info-->
                              <span class="media-box-body">
                                 <span class="media-box-heading">
                                    <strong>Juan Sims</strong>
                                    <br>
                                    <small class="text-muted">Designeer</small>
                                 </span>
                              </span>
                           </a>
                           <!-- END User status-->
                           <!-- START User status-->
                           <a href="#" class="media-box p mt0">
                              <span class="pull-right">
                                 <span class="circle circle-success circle-lg"></span>
                              </span>
                              <span class="pull-left">
                                 <!-- Contact avatar-->
                                 <img src="img/user/06.jpg" alt="Image" class="media-box-object img-circle thumb48">
                              </span>
                              <!-- Contact info-->
                              <span class="media-box-body">
                                 <span class="media-box-heading">
                                    <strong>Maureen Jenkins</strong>
                                    <br>
                                    <small class="text-muted">Designeer</small>
                                 </span>
                              </span>
                           </a>
                           <!-- END User status-->
                           <!-- START User status-->
                           <a href="#" class="media-box p mt0">
                              <span class="pull-right">
                                 <span class="circle circle-danger circle-lg"></span>
                              </span>
                              <span class="pull-left">
                                 <!-- Contact avatar-->
                                 <img src="img/user/07.jpg" alt="Image" class="media-box-object img-circle thumb48">
                              </span>
                              <!-- Contact info-->
                              <span class="media-box-body">
                                 <span class="media-box-heading">
                                    <strong>Billie Dunn</strong>
                                    <br>
                                    <small class="text-muted">Designeer</small>
                                 </span>
                              </span>
                           </a>
                           <!-- END User status-->
                           <!-- START User status-->
                           <a href="#" class="media-box p mt0">
                              <span class="pull-right">
                                 <span class="circle circle-warning circle-lg"></span>
                              </span>
                              <span class="pull-left">
                                 <!-- Contact avatar-->
                                 <img src="img/user/08.jpg" alt="Image" class="media-box-object img-circle thumb48">
                              </span>
                              <!-- Contact info-->
                              <span class="media-box-body">
                                 <span class="media-box-heading">
                                    <strong>Tomothy Roberts</strong>
                                    <br>
                                    <small class="text-muted">Designer</small>
                                 </span>
                              </span>
                           </a>
                           <!-- END User status-->
                        </li>
                        <!-- START list title-->
                        <li class="p">
                           <small class="text-muted">OFFLINE</small>
                        </li>
                        <!-- END list title-->
                        <li>
                           <!-- START User status-->
                           <a href="#" class="media-box p mt0">
                              <span class="pull-right">
                                 <span class="circle circle-lg"></span>
                              </span>
                              <span class="pull-left">
                                 <!-- Contact avatar-->
                                 <img src="img/user/09.jpg" alt="Image" class="media-box-object img-circle thumb48">
                              </span>
                              <!-- Contact info-->
                              <span class="media-box-body">
                                 <span class="media-box-heading">
                                    <strong>Lawrence Robinson</strong>
                                    <br>
                                    <small class="text-muted">Developer</small>
                                 </span>
                              </span>
                           </a>
                           <!-- END User status-->
                           <!-- START User status-->
                           <a href="#" class="media-box p mt0">
                              <span class="pull-right">
                                 <span class="circle circle-lg"></span>
                              </span>
                              <span class="pull-left">
                                 <!-- Contact avatar-->
                                 <img src="img/user/10.jpg" alt="Image" class="media-box-object img-circle thumb48">
                              </span>
                              <!-- Contact info-->
                              <span class="media-box-body">
                                 <span class="media-box-heading">
                                    <strong>Tyrone Owens</strong>
                                    <br>
                                    <small class="text-muted">Designer</small>
                                 </span>
                              </span>
                           </a>
                           <!-- END User status-->
                        </li>
                        <li>
                           <div class="p-lg text-center">
                              <!-- Optional link to list more users-->
                              <a href="#" title="See more contacts" class="btn btn-purple btn-sm">
                                 <strong>Load more..</strong>
                              </a>
                           </div>
                        </li>
                     </ul>
                     <!-- Extra items-->
                     <div class="p">
                        <p>
                           <small class="text-muted">Tasks completion</small>
                        </p>
                        <div class="progress progress-xs m0">
                           <div role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" class="progress-bar progress-bar-success progress-80">
                              <span class="sr-only">80% Complete</span>
                           </div>
                        </div>
                     </div>
                     <div class="p">
                        <p>
                           <small class="text-muted">Upload quota</small>
                        </p>
                        <div class="progress progress-xs m0">
                           <div role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" class="progress-bar progress-bar-warning progress-40">
                              <span class="sr-only">40% Complete</span>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </nav>
         <!-- END Off Sidebar (right)-->
      </aside>
      <!-- Main section-->
      <section>
         <!-- Page content-->
         <div class="content-wrapper">
            <h3>Weather Icons
               <small>Static and animated weather themed icons, ready to be dropped right into your project.</small>
            </h3>
            <div class="row">
               <div class="col-sm-12">
                  <h4 class="page-header mt0">Skycons</h4>
                  <div class="row">
                     <div class="col-xs-3">
                        <div data-skycon="clear-day" data-color="#888" data-width="60" data-height="60" class="center-block"></div>
                        <p><code>clear-day</code>
                        </p>
                     </div>
                     <div class="col-xs-3">
                        <div data-skycon="clear-night" data-color="#888" data-width="60" data-height="60" class="center-block"></div>
                        <p><code>clear-night</code>
                        </p>
                     </div>
                     <div class="col-xs-3">
                        <div data-skycon="partly-cloudy-day" data-color="#888" data-width="60" data-height="60" class="center-block"></div>
                        <p><code>partly-cloudy-day</code>
                        </p>
                     </div>
                     <div class="col-xs-3">
                        <div data-skycon="partly-cloudy-night" data-color="#888" data-width="60" data-height="60" class="center-block"></div>
                        <p><code>partly-cloudy-night</code>
                        </p>
                     </div>
                     <div class="col-xs-3">
                        <div data-skycon="cloudy" data-color="#888" data-width="60" data-height="60" class="center-block"></div>
                        <p><code>cloudy</code>
                        </p>
                     </div>
                     <div class="col-xs-3">
                        <div data-skycon="rain" data-color="#888" data-width="60" data-height="60" class="center-block"></div>
                        <p><code>rain</code>
                        </p>
                     </div>
                     <div class="col-xs-3">
                        <div data-skycon="sleet" data-color="#888" data-width="60" data-height="60" class="center-block"></div>
                        <p><code>sleet</code>
                        </p>
                     </div>
                     <div class="col-xs-3">
                        <div data-skycon="snow" data-color="#888" data-width="60" data-height="60" class="center-block"></div>
                        <p><code>snow</code>
                        </p>
                     </div>
                     <div class="col-xs-3">
                        <div data-skycon="wind" data-color="#888" data-width="60" data-height="60" class="center-block"></div>
                        <p><code>wind</code>
                        </p>
                     </div>
                     <div class="col-xs-3">
                        <div data-skycon="fog" data-color="#888" data-width="60" data-height="60" class="center-block"></div>
                        <p><code>fog</code>
                        </p>
                     </div>
                  </div>
               </div>
            </div>
            <div class="row">
               <div class="col-sm-12">
                  <p class="lead mt-lg">Daytime</p>
                  <div class="row">
                     <div class="col-lg-4">
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-day-sunny"></i>
                           </div>
                           <div class="col-xs-11">.wi.wi-day-sunny</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-day-cloudy"></i>
                           </div>
                           <div class="col-xs-11">.wi.wi-day-cloudy</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-day-cloudy-gusts"></i>
                           </div>
                           <div class="col-xs-11">.wi.wi-day-cloudy-gusts</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-day-cloudy-windy"></i>
                           </div>
                           <div class="col-xs-11">.wi.wi-day-cloudy-windy</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-day-fog"></i>
                           </div>
                           <div class="col-xs-11">.wi.wi-day-fog</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-day-hail"></i>
                           </div>
                           <div class="col-xs-11">.wi.wi-day-hail</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-day-haze"></i>
                           </div>
                           <div class="col-xs-11">.wi-day-haze</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-day-lightning"></i>
                           </div>
                           <div class="col-xs-11">.wi-day-lightning</div>
                        </div>
                     </div>
                     <div class="col-lg-4">
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-day-rain"></i>
                           </div>
                           <div class="col-xs-11">.wi-day-rain</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-day-rain-mix"></i>
                           </div>
                           <div class="col-xs-11">.wi-day-rain-mix</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-day-rain-wind"></i>
                           </div>
                           <div class="col-xs-11">.wi-day-rain-wind</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-day-showers"></i>
                           </div>
                           <div class="col-xs-11">.wi-day-showers</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-day-sleet"></i>
                           </div>
                           <div class="col-xs-11">.wi-day-sleet</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-day-sleet-storm"></i>
                           </div>
                           <div class="col-xs-11">.wi-day-sleet-storm</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-day-snow"></i>
                           </div>
                           <div class="col-xs-11">.wi-day-snow</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-day-snow-thunderstorm"></i>
                           </div>
                           <div class="col-xs-11">.wi-day-snow-thunderstorm</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-day-snow-wind"></i>
                           </div>
                           <div class="col-xs-11">.wi-day-snow-wind</div>
                        </div>
                     </div>
                     <div class="col-lg-4">
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-day-sprinkle"></i>
                           </div>
                           <div class="col-xs-11">.wi-day-sprinkle</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-day-storm-showers"></i>
                           </div>
                           <div class="col-xs-11">.wi-day-storm-showers</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-day-sunny-overcast"></i>
                           </div>
                           <div class="col-xs-11">.wi-day-sunny-overcast</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-day-thunderstorm"></i>
                           </div>
                           <div class="col-xs-11">.wi-day-thunderstorm</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-day-windy"></i>
                           </div>
                           <div class="col-xs-11">.wi-day-windy</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-solar-eclipse"></i>
                           </div>
                           <div class="col-xs-11">.wi-solar-eclipse</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-hot"></i>
                           </div>
                           <div class="col-xs-11">.wi-hot</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-day-cloudy-high"></i>
                           </div>
                           <div class="col-xs-11">.wi-day-cloudy-high</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-day-light-wind"></i>
                           </div>
                           <div class="col-xs-11">.wi-day-light-wind</div>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="col-sm-12">
                  <p class="lead mt-lg">Nighttime</p>
                  <div class="row">
                     <div class="col-lg-4">
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-clear"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-clear</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-alt-cloudy"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-alt-cloudy</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-alt-cloudy-gusts"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-alt-cloudy-gusts</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-alt-cloudy-windy"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-alt-cloudy-windy</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-alt-hail"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-alt-hail</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-alt-lightning"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-alt-lightning</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-alt-rain"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-alt-rain</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-alt-rain-mix"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-alt-rain-mix</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-alt-rain-wind"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-alt-rain-wind</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-alt-showers"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-alt-showers</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-alt-sleet"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-alt-sleet</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-alt-sleet-storm"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-alt-sleet-storm</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-alt-snow"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-alt-snow</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-alt-snow-thunderstorm"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-alt-snow-thunderstorm</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-alt-snow-wind"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-alt-snow-wind</div>
                        </div>
                     </div>
                     <div class="col-lg-4">
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-alt-sprinkle"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-alt-sprinkle</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-alt-storm-showers"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-alt-storm-showers</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-alt-thunderstorm"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-alt-thunderstorm</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-cloudy"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-cloudy</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-cloudy-gusts"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-cloudy-gusts</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-cloudy-windy"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-cloudy-windy</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-fog"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-fog</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-hail"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-hail</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-lightning"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-lightning</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-partly-cloudy"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-partly-cloudy</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-rain"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-rain</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-rain-mix"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-rain-mix</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-rain-wind"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-rain-wind</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-showers"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-showers</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-sleet"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-sleet</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-sleet-storm"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-sleet-storm</div>
                        </div>
                     </div>
                     <div class="col-lg-4">
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-snow"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-snow</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-snow-thunderstorm"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-snow-thunderstorm</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-snow-wind"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-snow-wind</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-sprinkle"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-sprinkle</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-storm-showers"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-storm-showers</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-thunderstorm"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-thunderstorm</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-lunar-eclipse"></i>
                           </div>
                           <div class="col-xs-11">.wi-lunar-eclipse</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-stars"></i>
                           </div>
                           <div class="col-xs-11">.wi-stars</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-storm-showers"></i>
                           </div>
                           <div class="col-xs-11">.wi-storm-showers</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-thunderstorm"></i>
                           </div>
                           <div class="col-xs-11">.wi-thunderstorm</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-alt-cloudy-high"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-alt-cloudy-high</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-cloudy-high"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-cloudy-high</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-night-alt-partly-cloudy"></i>
                           </div>
                           <div class="col-xs-11">.wi-night-alt-partly-cloudy</div>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="col-sm-12">
                  <p class="lead mt-lg">Neutral</p>
                  <div class="row">
                     <div class="col-lg-4">
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-cloud"></i>
                           </div>
                           <div class="col-xs-11">.wi-cloud</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-cloudy"></i>
                           </div>
                           <div class="col-xs-11">.wi-cloudy</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-cloudy-gusts"></i>
                           </div>
                           <div class="col-xs-11">.wi-cloudy-gusts</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-cloudy-windy"></i>
                           </div>
                           <div class="col-xs-11">.wi-cloudy-windy</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-fog"></i>
                           </div>
                           <div class="col-xs-11">.wi-fog</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-hail"></i>
                           </div>
                           <div class="col-xs-11">.wi-hail</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-rain"></i>
                           </div>
                           <div class="col-xs-11">.wi-rain</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-rain-mix"></i>
                           </div>
                           <div class="col-xs-11">.wi-rain-mix</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-rain-wind"></i>
                           </div>
                           <div class="col-xs-11">.wi-rain-wind</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-showers"></i>
                           </div>
                           <div class="col-xs-11">.wi-showers</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-sleet"></i>
                           </div>
                           <div class="col-xs-11">.wi-sleet</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-snow"></i>
                           </div>
                           <div class="col-xs-11">.wi-snow</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-sprinkle"></i>
                           </div>
                           <div class="col-xs-11">.wi-sprinkle</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-storm-showers"></i>
                           </div>
                           <div class="col-xs-11">.wi-storm-showers</div>
                        </div>
                     </div>
                     <div class="col-lg-4">
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-thunderstorm"></i>
                           </div>
                           <div class="col-xs-11">.wi-thunderstorm</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-snow-wind"></i>
                           </div>
                           <div class="col-xs-11">.wi-snow-wind</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-snow"></i>
                           </div>
                           <div class="col-xs-11">.wi-snow</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-smog"></i>
                           </div>
                           <div class="col-xs-11">.wi-smog</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-smoke"></i>
                           </div>
                           <div class="col-xs-11">.wi-smoke</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-lightning"></i>
                           </div>
                           <div class="col-xs-11">.wi-lightning</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-raindrops"></i>
                           </div>
                           <div class="col-xs-11">.wi-raindrops</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-raindrop"></i>
                           </div>
                           <div class="col-xs-11">.wi-raindrop</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-dust"></i>
                           </div>
                           <div class="col-xs-11">.wi-dust</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-snowflake-cold"></i>
                           </div>
                           <div class="col-xs-11">.wi-snowflake-cold</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-windy"></i>
                           </div>
                           <div class="col-xs-11">.wi-windy</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-strong-wind"></i>
                           </div>
                           <div class="col-xs-11">.wi-strong-wind</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-sandstorm"></i>
                           </div>
                           <div class="col-xs-11">.wi-sandstorm</div>
                        </div>
                     </div>
                     <div class="col-lg-4">
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-earthquake"></i>
                           </div>
                           <div class="col-xs-11">.wi-earthquake</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-fire"></i>
                           </div>
                           <div class="col-xs-11">.wi-fire</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-flood"></i>
                           </div>
                           <div class="col-xs-11">.wi-flood</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-meteor"></i>
                           </div>
                           <div class="col-xs-11">.wi-meteor</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-tsunami"></i>
                           </div>
                           <div class="col-xs-11">.wi-tsunami</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-volcano"></i>
                           </div>
                           <div class="col-xs-11">.wi-volcano</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-hurricane"></i>
                           </div>
                           <div class="col-xs-11">.wi-hurricane</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-tornado"></i>
                           </div>
                           <div class="col-xs-11">.wi-tornado</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-small-craft-advisory"></i>
                           </div>
                           <div class="col-xs-11">.wi-small-craft-advisory</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-gale-warning"></i>
                           </div>
                           <div class="col-xs-11">.wi-gale-warning</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-storm-warning"></i>
                           </div>
                           <div class="col-xs-11">.wi-storm-warning</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-hurricane-warning"></i>
                           </div>
                           <div class="col-xs-11">.wi-hurricane-warning</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind-direction"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind-direction</div>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="col-sm-12">
                  <p class="lead mt-lg">Miscellaneous</p>
                  <div class="row">
                     <div class="col-lg-4">
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-alien"></i>
                           </div>
                           <div class="col-xs-11">.wi-alien</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-celsius"></i>
                           </div>
                           <div class="col-xs-11">.wi-celsius</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-fahrenheit"></i>
                           </div>
                           <div class="col-xs-11">.wi-fahrenheit</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-degrees"></i>
                           </div>
                           <div class="col-xs-11">.wi-degrees</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-thermometer"></i>
                           </div>
                           <div class="col-xs-11">.wi-thermometer</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-thermometer-exterior"></i>
                           </div>
                           <div class="col-xs-11">.wi-thermometer-exterior</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-thermometer-internal"></i>
                           </div>
                           <div class="col-xs-11">.wi-thermometer-internal</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-cloud-down"></i>
                           </div>
                           <div class="col-xs-11">.wi-cloud-down</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-cloud-up"></i>
                           </div>
                           <div class="col-xs-11">.wi-cloud-up</div>
                        </div>
                     </div>
                     <div class="col-lg-4">
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-cloud-refresh"></i>
                           </div>
                           <div class="col-xs-11">.wi-cloud-refresh</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-horizon"></i>
                           </div>
                           <div class="col-xs-11">.wi-horizon</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-horizon-alt"></i>
                           </div>
                           <div class="col-xs-11">.wi-horizon-alt</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-sunrise"></i>
                           </div>
                           <div class="col-xs-11">.wi-sunrise</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-sunset"></i>
                           </div>
                           <div class="col-xs-11">.wi-sunset</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moonrise"></i>
                           </div>
                           <div class="col-xs-11">.wi-moonrise</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moonset"></i>
                           </div>
                           <div class="col-xs-11">.wi-moonset</div>
                        </div>
                     </div>
                     <div class="col-lg-4">
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-refresh"></i>
                           </div>
                           <div class="col-xs-11">.wi-refresh</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-refresh-alt"></i>
                           </div>
                           <div class="col-xs-11">.wi-refresh-alt</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-umbrella"></i>
                           </div>
                           <div class="col-xs-11">.wi-umbrella</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-barometer"></i>
                           </div>
                           <div class="col-xs-11">.wi-barometer</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-humidity"></i>
                           </div>
                           <div class="col-xs-11">.wi-humidity</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-na"></i>
                           </div>
                           <div class="col-xs-11">.wi-na</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-train"></i>
                           </div>
                           <div class="col-xs-11">.wi-train</div>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="col-sm-12">
                  <p class="lead mt-lg">Moon Phases</p>
                  <div class="row">
                     <div class="col-lg-4">
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-new"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-new</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-waxing-crescent-1"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-waxing-crescent-1</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-waxing-crescent-2"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-waxing-crescent-2</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-waxing-crescent-3"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-waxing-crescent-3</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-waxing-crescent-4"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-waxing-crescent-4</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-waxing-crescent-5"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-waxing-crescent-5</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-waxing-crescent-6"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-waxing-crescent-6</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-first-quarter"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-first-quarter</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-waxing-gibbous-1"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-waxing-gibbous-1</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-waxing-gibbous-2"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-waxing-gibbous-2</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-waxing-gibbous-3"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-waxing-gibbous-3</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-waxing-gibbous-4"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-waxing-gibbous-4</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-waxing-gibbous-5"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-waxing-gibbous-5</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-waxing-gibbous-6"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-waxing-gibbous-6</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-full"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-full</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-waning-gibbous-1"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-waning-gibbous-1</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-waning-gibbous-2"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-waning-gibbous-2</div>
                        </div>
                     </div>
                     <div class="col-lg-4">
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-waning-gibbous-3"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-waning-gibbous-3</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-waning-gibbous-4"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-waning-gibbous-4</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-waning-gibbous-5"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-waning-gibbous-5</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-waning-gibbous-6"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-waning-gibbous-6</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-third-quarter"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-third-quarter</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-waning-crescent-1"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-waning-crescent-1</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-waning-crescent-2"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-waning-crescent-2</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-waning-crescent-3"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-waning-crescent-3</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-waning-crescent-4"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-waning-crescent-4</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-waning-crescent-5"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-waning-crescent-5</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-waning-crescent-6"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-waning-crescent-6</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-alt-new"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-alt-new</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-alt-waxing-crescent-1"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-alt-waxing-crescent-1</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-alt-waxing-crescent-2"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-alt-waxing-crescent-2</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-alt-waxing-crescent-3"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-alt-waxing-crescent-3</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-alt-waxing-crescent-4"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-alt-waxing-crescent-4</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-alt-waxing-crescent-5"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-alt-waxing-crescent-5</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-alt-waxing-crescent-6"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-alt-waxing-crescent-6</div>
                        </div>
                     </div>
                     <div class="col-lg-4">
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-alt-first-quarter"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-alt-first-quarter</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-alt-waxing-gibbous-1"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-alt-waxing-gibbous-1</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-alt-waxing-gibbous-2"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-alt-waxing-gibbous-2</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-alt-waxing-gibbous-3"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-alt-waxing-gibbous-3</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-alt-waxing-gibbous-4"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-alt-waxing-gibbous-4</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-alt-waxing-gibbous-5"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-alt-waxing-gibbous-5</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-alt-waxing-gibbous-6"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-alt-waxing-gibbous-6</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-alt-full"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-alt-full</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-alt-waning-gibbous-1"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-alt-waning-gibbous-1</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-alt-waning-gibbous-2"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-alt-waning-gibbous-2</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-alt-waning-gibbous-3"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-alt-waning-gibbous-3</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-alt-waning-gibbous-4"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-alt-waning-gibbous-4</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-alt-waning-gibbous-5"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-alt-waning-gibbous-5</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-alt-waning-gibbous-6"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-alt-waning-gibbous-6</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-alt-third-quarter"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-alt-third-quarter</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-alt-waning-crescent-1"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-alt-waning-crescent-1</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-alt-waning-crescent-2"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-alt-waning-crescent-2</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-alt-waning-crescent-3"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-alt-waning-crescent-3</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-alt-waning-crescent-4"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-alt-waning-crescent-4</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-alt-waning-crescent-5"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-alt-waning-crescent-5</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-moon-alt-waning-crescent-6"></i>
                           </div>
                           <div class="col-xs-11">.wi-moon-alt-waning-crescent-6</div>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="col-sm-12">
                  <p class="lead mt-lg">Time</p>
                  <div class="row">
                     <div class="col-lg-4">
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-time-1"></i>
                           </div>
                           <div class="col-xs-11">.wi-time-1</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-time-2"></i>
                           </div>
                           <div class="col-xs-11">.wi-time-2</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-time-3"></i>
                           </div>
                           <div class="col-xs-11">.wi-time-3</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-time-4"></i>
                           </div>
                           <div class="col-xs-11">.wi-time-4</div>
                        </div>
                     </div>
                     <div class="col-lg-4">
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-time-5"></i>
                           </div>
                           <div class="col-xs-11">.wi-time-5</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-time-6"></i>
                           </div>
                           <div class="col-xs-11">.wi-time-6</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-time-7"></i>
                           </div>
                           <div class="col-xs-11">.wi-time-7</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-time-8"></i>
                           </div>
                           <div class="col-xs-11">.wi-time-8</div>
                        </div>
                     </div>
                     <div class="col-lg-4">
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-time-9"></i>
                           </div>
                           <div class="col-xs-11">.wi-time-9</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-time-10"></i>
                           </div>
                           <div class="col-xs-11">.wi-time-10</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-time-11"></i>
                           </div>
                           <div class="col-xs-11">.wi-time-11</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-time-12"></i>
                           </div>
                           <div class="col-xs-11">.wi-time-12</div>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="col-sm-12">
                  <p class="lead mt-lg">Directional Arrows</p>
                  <div class="row">
                     <div class="col-lg-4">
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-direction-up"></i>
                           </div>
                           <div class="col-xs-11">.wi-direction-up</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-direction-up-right"></i>
                           </div>
                           <div class="col-xs-11">.wi-direction-up-right</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-direction-right"></i>
                           </div>
                           <div class="col-xs-11">.wi-direction-right</div>
                        </div>
                     </div>
                     <div class="col-lg-4">
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-direction-down-right"></i>
                           </div>
                           <div class="col-xs-11">.wi-direction-down-right</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-direction-down"></i>
                           </div>
                           <div class="col-xs-11">.wi-direction-down</div>
                        </div>
                     </div>
                     <div class="col-lg-4">
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-direction-down-left"></i>
                           </div>
                           <div class="col-xs-11">.wi-direction-down-left</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-direction-left"></i>
                           </div>
                           <div class="col-xs-11">.wi-direction-left</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-direction-up-left"></i>
                           </div>
                           <div class="col-xs-11">.wi-direction-up-left</div>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="col-sm-12">
                  <p class="lead mt-lg">Wind Degree Examples</p>
                  <div class="row">
                     <div class="col-lg-4">
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind towards-0-deg"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.towards-0-deg</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind towards-23-deg"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.towards-23-deg</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind towards-45-deg"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.towards-45-deg</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind towards-68-deg"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.towards-68-deg</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind towards-90-deg"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.towards-90-deg</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind towards-113-deg"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.towards-113-deg</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind towards-135-deg"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.towards-135-deg</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind towards-158-deg"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.towards-158-deg</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind towards-180-deg"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.towards-180-deg</div>
                        </div>
                     </div>
                     <div class="col-lg-4">
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind towards-203-deg"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.towards-203-deg</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind towards-225-deg"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.towards-225-deg</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind towards-248-deg"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.towards-248-deg</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind towards-270-deg"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.towards-270-deg</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind towards-293-deg"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.towards-293-deg</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind towards-313-deg"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.towards-313-deg</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind towards-336-deg"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.towards-336-deg</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind from-180-deg"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.from-180-deg</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind from-203-deg"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.from-203-deg</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind from-225-deg"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.from-225-deg</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind from-248-deg"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.from-248-deg</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind from-270-deg"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.from-270-deg</div>
                        </div>
                     </div>
                     <div class="col-lg-4">
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind from-293-deg"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.from-293-deg</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind from-313-deg"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.from-313-deg</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind from-336-deg"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.from-336-deg</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind from-0-deg"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.from-0-deg</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind from-23-deg"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.from-23-deg</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind from-45-deg"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.from-45-deg</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind from-68-deg"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.from-68-deg</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind from-90-deg"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.from-90-deg</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind from-113-deg"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.from-113-deg</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind from-135-deg"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.from-135-deg</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind from-158-deg"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.from-158-deg</div>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="col-sm-12">
                  <p class="lead mt-lg">Wind Cardinal Examples</p>
                  <div class="row">
                     <div class="col-lg-4">
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind wi-towards-n"></i>
                           </div>
                           <div class="col-xs-11">.wi-towards-n</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind wi-towards-nne"></i>
                           </div>
                           <div class="col-xs-11">.wi-towards-nne</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind wi-towards-ne"></i>
                           </div>
                           <div class="col-xs-11">.wi-towards-ne</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind wi-towards-ene"></i>
                           </div>
                           <div class="col-xs-11">.wi-towards-ene</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind wi-towards-e"></i>
                           </div>
                           <div class="col-xs-11">.wi-towards-e</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind wi-towards-ese"></i>
                           </div>
                           <div class="col-xs-11">.wi-towards-ese</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind wi-towards-se"></i>
                           </div>
                           <div class="col-xs-11">.wi-towards-se</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind wi-towards-sse"></i>
                           </div>
                           <div class="col-xs-11">.wi-towards-sse</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind wi-towards-s"></i>
                           </div>
                           <div class="col-xs-11">.wi-towards-s</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind wi-towards-ssw"></i>
                           </div>
                           <div class="col-xs-11">.wi-towards-ssw</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind wi-towards-sw"></i>
                           </div>
                           <div class="col-xs-11">.wi-towards-sw</div>
                        </div>
                     </div>
                     <div class="col-lg-4">
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind wi-towards-wsw"></i>
                           </div>
                           <div class="col-xs-11">.wi-towards-wsw</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind wi-towards-w"></i>
                           </div>
                           <div class="col-xs-11">.wi-towards-w</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind wi-towards-wnw"></i>
                           </div>
                           <div class="col-xs-11">.wi-towards-wnw</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind wi-towards-nw"></i>
                           </div>
                           <div class="col-xs-11">.wi-towards-nw</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind wi-towards-nnw"></i>
                           </div>
                           <div class="col-xs-11">.wi-towards-nnw</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind wi-from-n"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.wi-from-n</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind wi-from-nne"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.wi-from-nne</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind wi-from-ne"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.wi-from-ne</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind wi-from-ene"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.wi-from-ene</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind wi-from-e"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.wi-from-e</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind wi-from-ese"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.wi-from-ese</div>
                        </div>
                     </div>
                     <div class="col-lg-4">
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind wi-from-se"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.wi-from-se</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind wi-from-sse"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.wi-from-sse</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind wi-from-s"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.wi-from-s</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind wi-from-ssw"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.wi-from-ssw</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind wi-from-sw"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.wi-from-sw</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind wi-from-wsw"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.wi-from-wsw</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind wi-from-w"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.wi-from-w</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind wi-from-wnw"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.wi-from-wnw</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind wi-from-nw"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.wi-from-nw</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind wi-from-nnw"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind.wi-from-nnw</div>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="col-sm-12">
                  <p class="lead mt-lg">Beaufort Wind Scale</p>
                  <div class="row">
                     <div class="col-lg-4">
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind-beaufort-0"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind-beaufort-0</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind-beaufort-1"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind-beaufort-1</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind-beaufort-2"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind-beaufort-2</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind-beaufort-3"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind-beaufort-3</div>
                        </div>
                     </div>
                     <div class="col-lg-4">
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind-beaufort-4"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind-beaufort-4</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind-beaufort-5"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind-beaufort-5</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind-beaufort-6"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind-beaufort-6</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind-beaufort-7"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind-beaufort-7</div>
                        </div>
                     </div>
                     <div class="col-lg-4">
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind-beaufort-8"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind-beaufort-8</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind-beaufort-9"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind-beaufort-9</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind-beaufort-10"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind-beaufort-10</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind-beaufort-11"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind-beaufort-11</div>
                        </div>
                        <div class="row">
                           <div class="col-xs-1 text-md"><i class="wi wi-wind-beaufort-12"></i>
                           </div>
                           <div class="col-xs-11">.wi-wind-beaufort-12</div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </section>
      <!-- Page footer-->
      <footer>
         <span>&copy; 2016 - Angle</span>
      </footer>
   </div>
   <!-- =============== VENDOR SCRIPTS ===============-->
   <!-- MODERNIZR-->
   <script src="../vendor/modernizr/modernizr.custom.js"></script>
   <!-- MATCHMEDIA POLYFILL-->
   <script src="../vendor/matchMedia/matchMedia.js"></script>
   <!-- JQUERY-->
   <script src="../vendor/jquery/dist/jquery.js"></script>
   <!-- BOOTSTRAP-->
   <script src="../vendor/bootstrap/dist/js/bootstrap.js"></script>
   <!-- STORAGE API-->
   <script src="../vendor/jQuery-Storage-API/jquery.storageapi.js"></script>
   <!-- JQUERY EASING-->
   <script src="../vendor/jquery.easing/js/jquery.easing.js"></script>
   <!-- ANIMO-->
   <script src="../vendor/animo.js/animo.js"></script>
   <!-- SLIMSCROLL-->
   <script src="../vendor/slimScroll/jquery.slimscroll.min.js"></script>
   <!-- SCREENFULL-->
   <script src="../vendor/screenfull/dist/screenfull.js"></script>
   <!-- LOCALIZE-->
   <script src="../vendor/jquery-localize-i18n/dist/jquery.localize.js"></script>
   <!-- RTL demo-->
   <script src="js/demo/demo-rtl.js"></script>
   <!-- =============== PAGE VENDOR SCRIPTS ===============-->
   <!-- SKYCONS-->
   <script src="../vendor/skycons/skycons.js"></script>
   <!-- =============== APP SCRIPTS ===============-->
   <script src="js/app.js"></script>
</body>

</html>