<!DOCTYPE html>
<html lang="zxx">
   <head>
      <meta charset="utf-8">
      <title>First Leadership Academy | Contact Us</title>
      <meta name="description" content="">
      <meta http-equiv="x-ua-compatible" content="ie=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="shortcut icon" type="image/x-icon" href="images/fav.png">
      <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
      <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
      <link rel="stylesheet" type="text/css" href="css/animate.css">
      <link rel="stylesheet" type="text/css" href="css/owl.carousel.css">
      <link rel="stylesheet" type="text/css" href="css/slick.css">
      <link rel="stylesheet" type="text/css" href="css/magnific-popup.css">
      <link rel="stylesheet" type="text/css" href="css/off-canvas.css">
      <link rel="stylesheet" type="text/css" href="fonts/flaticon.css">
      <link rel="stylesheet" type="text/css" href="fonts/fonts2/flaticon.css">
      <link rel="stylesheet" type="text/css" href="css/rsmenu-main.css">
      <link rel="stylesheet" type="text/css" href="css/rsmenu-transitions.css">
      <link rel="stylesheet" type="text/css" href="style.css">
      <link rel="stylesheet" type="text/css" href="css/responsive.css">
      <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->
      <style>
         #calendar {
   width: 100%;   
}

#calendar a {
   color: #8e352e;
   text-decoration: none;
}

#calendar ul {
   list-style: none;
   padding: 0;
   margin: 0;
   width: 100%;
   display: flex;
}

#calendar li {
   display: block;
   float: left;
   width:14.342%;
   padding: 5px;
   box-sizing:border-box;
   border: 1px solid #ccc;
   margin-right: -1px;
   margin-bottom: -1px;
}

#calendar ul.weekdays {
   display: flex;
   height: 40px;
   background: #0c514e;
}

#calendar ul.weekdays li {
   text-align: center;
   text-transform: uppercase;
   line-height: 20px;
   border: none !important;
   padding: 10px 6px;
   color: #fff;
   font-size: 13px;
}

#calendar .days li {
   height: 180px;
}

#calendar .days li:hover {
   background: #d3d3d3;
}

#calendar .date {
   text-align: center;
    margin-bottom: 5px;
    padding: 6px;
    background: #0c514e;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    float: right;
}

#calendar .event {
   clear: both;
   display: block;
   font-size: 13px;
   border-radius: 4px;
   padding: 5px;
   margin-top: 40px;
   margin-bottom: 5px;
   line-height: 14px;
   background: #e4f2f2;
   border: 1px solid #b5dbdc;
   color: #009aaf;
   text-decoration: none;
}

#calendar .event-desc {
   color: #666;
   margin: 3px 0 7px 0;
   text-decoration: none;  
}

#calendar .other-month {
   background: #f5f5f5;
   color: #666;
}

/* ============================
            Mobile Responsiveness
   ============================*/


@media(max-width: 768px) {

   #calendar .weekdays, #calendar .other-month {
      display: none;
   }

   #calendar li {
      height: auto !important;
      border: 1px solid #ededed;
      width: 100%;
      padding: 10px;
      margin-bottom: -1px;
   }

   #calendar .date {
      float: none;
   }
}
.post-location a i {
    color: #DBDBDB;
}
.month_shedule {
    text-align: center;
}
      </style>
   </head>
   <body class="home1">
      <?php include('include/header.php');?>
      <!-- Breadcrumbs Start -->
      <div class="rs-breadcrumbs bg7 breadcrumbs-overlay">
         <div class="breadcrumbs-inner">
            <div class="container">
               <div class="row">
                  <div class="col-md-12 text-center">
                     <h1 class="page-title">
                        <small>Calendar</small><br>
                        Programmes Calendar
                     </h1>
                     <ul>
                        <li>
                           <a class="active" href="index.php">Home</a>
                        </li>
                        <li>Calendar</li>
                     </ul>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- Breadcrumbs End -->
      <div class=" sec-spacer">
         <div class="container">
            <div id="calendar-wrap">
         <div class="month_shedule">
            <h1>June 2020</h1>
         </div>
         <div id="calendar">
            <ul class="weekdays">
               <li>Sunday</li>
               <li>Monday</li>
               <li>Tuesday</li>
               <li>Wednesday</li>
               <li>Thursday</li>
               <li>Friday</li>
               <li>Saturday</li>
            </ul>

            <!-- Days from previous month -->

            <ul class="days">
               <li class="day other-month">
                  <div class="date">27</div>                   
               </li>
               <li class="day other-month">
                  <div class="date">28</div>
                  <div class="event">
                     <div class="event-desc">
                        Management Skills & Techniques
                     </div>
                     <div class="event-time">
                        1:00pm to 3:00pm
                     </div>
                     <div class="post-location"><a href="#"><i class="fa fa-map-marker"></i> ABUJA</a></div>
                  </div>                  
               </li>
               <li class="day other-month">
                  <div class="date">29</div>                   
               </li>
               <li class="day other-month">
                  <div class="date">30</div>                   
               </li>
               <li class="day other-month">
                  <div class="date">31</div>                   
               </li>

               <!-- Days in current month -->

               <li class="day">
                  <div class="date">1</div>                 
               </li>
               <li class="day">
                  <div class="date">2</div>
                  <div class="event">
                     <div class="event-desc">
                        Human Resource Management
                     </div>
                     <div class="event-time">
                        2:00pm to 5:00pm
                     </div>
                     <div class="post-location"><a href="#"><i class="fa fa-map-marker"></i> ABUJA</a></div>
                  </div>                  
               </li>
            </ul>

               <!-- Row #2 -->

            <ul class="days">
               <li class="day">
                  <div class="date">3</div>                 
               </li>
               <li class="day">
                  <div class="date">4</div>                 
               </li>
               <li class="day">
                  <div class="date">5</div>                 
               </li>
               <li class="day">
                  <div class="date">6</div>                 
               </li>
               <li class="day">
                  <div class="date">7</div>
                  <div class="event">
                     <div class="event-desc">
                        Human Resource Management
                     </div>
                     <div class="event-time">
                        6:00pm to 8:30pm
                     </div>
                     <div class="post-location"><a href="#"><i class="fa fa-map-marker"></i> ABUJA</a></div>
                  </div>                  
               </li>
               <li class="day">
                  <div class="date">8</div>                 
               </li>
               <li class="day">
                  <div class="date">9</div>                 
               </li>
            </ul>

               <!-- Row #3 -->

            <ul class="days">
               <li class="day">
                  <div class="date">10</div>                   
               </li>
               <li class="day">
                  <div class="date">11</div>                   
               </li>
               <li class="day">
                  <div class="date">12</div>                   
               </li>
               <li class="day">
                  <div class="date">13</div>                   
               </li>
               <li class="day">
                  <div class="date">14</div><div class="event">
                     <div class="event-desc">
                        Board Meeting
                     </div>
                     <div class="event-time">
                        1:00pm to 3:00pm
                     </div>
                  </div>                  
               </li>
               <li class="day">
                  <div class="date">15</div>                   
               </li>
               <li class="day">
                  <div class="date">16</div>                   
               </li>
            </ul>

               <!-- Row #4 -->

            <ul class="days">
               <li class="day">
                  <div class="date">17</div>                   
               </li>
               <li class="day">
                  <div class="date">18</div>                   
               </li>
               <li class="day">
                  <div class="date">19</div>                   
               </li>
               <li class="day">
                  <div class="date">20</div>                   
               </li>
               <li class="day">
                  <div class="date">21</div>                   
               </li>
               <li class="day">
                  <div class="date">22</div>
                  <div class="event">
                     <div class="event-desc">
                        Conference call
                     </div>
                     <div class="event-time">
                        9:00am to 12:00pm
                     </div>
                  </div>                  
               </li>
               <li class="day">
                  <div class="date">23</div>                   
               </li>
            </ul>

                  <!-- Row #5 -->

            <ul class="days">
               <li class="day">
                  <div class="date">24</div>                   
               </li>
               <li class="day">
                  <div class="date">25</div>
                  <div class="event">
                     <div class="event-desc">
                        Conference Call
                     </div>
                     <div class="event-time">
                        1:00pm to 3:00pm
                     </div>
                  </div>                  
               </li>
               <li class="day">
                  <div class="date">26</div>                   
               </li>
               <li class="day">
                  <div class="date">27</div>                   
               </li>
               <li class="day">
                  <div class="date">28</div>                   
               </li>
               <li class="day">
                  <div class="date">29</div>                   
               </li>
               <li class="day">
                  <div class="date">30</div>                   
               </li>
            </ul>

            <!-- Row #6 -->

            <ul class="days">
               <li class="day">
                  <div class="date">31</div>                   
               </li>
               <li class="day other-month">
                  <div class="date">1</div> <!-- Next Month -->                  
               </li>
               <li class="day other-month">
                  <div class="date">2</div>                 
               </li>
               <li class="day other-month">
                  <div class="date">3</div>                 
               </li>
               <li class="day other-month">
                  <div class="date">4</div>                 
               </li>
               <li class="day other-month">
                  <div class="date">5</div>                 
               </li>
               <li class="day other-month">
                  <div class="date">6</div>                 
               </li>
            </ul>

         </div><!-- /. calendar -->
      </div><!-- /. wrap -->
         </div>
      </div>
      <?php include('include/footer.php');?>
      <!-- modernizr js -->
      <script src="js/modernizr-2.8.3.min.js"></script>
      <script src="js/jquery.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
      <script src="js/owl.carousel.min.js"></script>
      <script src="js/slick.min.js"></script>
      <script src="js/isotope.pkgd.min.js"></script>
      <script src="js/imagesloaded.pkgd.min.js"></script>
      <script src="js/wow.min.js"></script>
      <script src="js/waypoints.min.js"></script>
      <script src="js/jquery.counterup.min.js"></script>
      <script src="js/jquery.magnific-popup.min.js"></script>
      <script src="js/rsmenu-main.js"></script>
      <script src="js/plugins.js"></script>
      <script src="js/main.js"></script>
   </body>
</html>