

  

  <header class="header-1" id="header">

      <div class="vd_top-menu-wrapper">

        <div class="container ">

          <div class="vd_top-nav vd_nav-width  ">

          <div class="vd_panel-header">

          	<div class="logo">

            	<a href="index.html"><img alt="logo" src="img/logo.png"></a>

            </div>

            <!-- logo -->

            <div class="vd_panel-menu  hidden-sm hidden-xs" data-intro="<strong>Minimize Left Navigation</strong><br/>Toggle navigation size to medium or small size. You can set both button or one button only. See full option at documentation." data-step=1>

            		                	<span class="nav-medium-button menu" data-toggle="tooltip" data-placement="bottom" data-original-title="Medium Nav Toggle" data-action="nav-left-medium">

	                    <i class="fa fa-bars"></i>

                    </span>

                                		                    

                	<span class="nav-small-button menu" data-toggle="tooltip" data-placement="bottom" data-original-title="Small Nav Toggle" data-action="nav-left-small">

	                    <i class="fa fa-ellipsis-v"></i>

                    </span> 

                                       

            </div>

            <div class="vd_panel-menu left-pos visible-sm visible-xs">

                                 

                        <span class="menu" data-action="toggle-navbar-left">

                            <i class="fa fa-ellipsis-v"></i>

                        </span>  

                            

                              

            </div>

            <div class="vd_panel-menu visible-sm visible-xs">

                	<span class="menu visible-xs" data-action="submenu">

	                    <i class="fa fa-bars"></i>

                    </span>        

                          

                        <span class="menu visible-sm visible-xs" data-action="toggle-navbar-right">

                            <i class="fa fa-comments"></i>

                        </span>                   

                   	 

            </div>                                     

            <!-- vd_panel-menu -->

          </div>

          <!-- vd_panel-header -->

            

          </div>    

          <div class="vd_container">

          	<div class="row">

            	<div class="col-sm-5 col-xs-12">

            		

<div class="vd_menu-search">

  <form id="search-box" method="post" action="#">

    <input type="text" name="search" class="vd_menu-search-text width-60" placeholder="Search">

    <div class="vd_menu-search-category"> <span data-action="click-trigger"> <span class="separator"></span> <span class="text">Category</span> <span class="icon"> <i class="fa fa-caret-down"></i></span> </span>

      <div class="vd_mega-menu-content width-xs-2 center-xs-2 right-sm" data-action="click-target">

        <div class="child-menu">

          <div class="content-list content-menu content">

            <ul class="list-wrapper">

              <li>

                <label>

                  <input type="checkbox" value="all-files">

                  <span>All Files</span></label>

              </li>

              <li>

                <label>

                  <input type="checkbox" value="photos">

                  <span>Photos</span></label>

              </li>

              <li>

                <label>

                  <input type="checkbox" value="illustrations">

                  <span>Illustrations</span></label>

              </li>

              <li>

                <label>

                  <input type="checkbox" value="video">

                  <span>Video</span></label>

              </li>

              <li>

                <label>

                  <input type="checkbox" value="audio">

                  <span>Audio</span></label>

              </li>

              <li>

                <label>

                  <input type="checkbox" value="flash">

                  <span>Flash</span></label>

              </li>

            </ul>

          </div>

        </div>

      </div>

    </div>

    <span class="vd_menu-search-submit"><i class="fa fa-search"></i> </span>

  </form>

</div>

                </div>

                <div class="col-sm-7 col-xs-12">

              		<div class="vd_mega-menu-wrapper">

                    	<div class="vd_mega-menu pull-right">

            				<ul class="mega-ul">

    <li id="top-menu-1" class="one-icon mega-li"> 

      <a href="index.html" class="mega-link" data-action="click-trigger">

    	<span class="mega-icon"><i class="fa fa-users"></i></span> 

		<span class="badge vd_bg-red">1</span>        

      </a>

      <div class="vd_mega-menu-content width-xs-3 width-sm-4 width-md-5 right-xs left-sm" data-action="click-target">

        <div class="child-menu">  

           <div class="title"> 

           	   Friend Requests

               <div class="vd_panel-menu">

                     <span data-original-title="Find User" data-toggle="tooltip" data-placement="bottom" class="menu">

                        <i class="fa fa-search"></i>

                    </span>                 

                     <span data-original-title="Message Setting" data-toggle="tooltip" data-placement="bottom" class="menu">

                        <i class="fa fa-cog"></i>

                    </span>                                                                              

                </div>

           </div>                 

		   <div class="content-grid column-xs-2 column-sm-3 height-xs-4">	

           <div data-rel="scroll">

               <ul class="list-wrapper">

                    <li> <a href="#"> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar.jpg"></div> 

                         </a>

                        <div class="menu-text"> Gabriella Montagna

                            <div class="menu-info">

                                <div class="menu-date">San Diego</div>                                                                         

                                <div class="menu-action">

                                    <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Approve" data-toggle="tooltip" data-placement="bottom">

                                        <i class="fa fa-check"></i>

                                    </span> 

                                    <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Reject" data-toggle="tooltip" data-placement="bottom">

                                        <i class="fa fa-times"></i>

                                    </span>                                                                                                                   

                                </div>                                

                            </div>

                        </div> 

                     </li>

                    <li class="warning"> 

                    		<a href="#"> 

                    			<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-2.jpg"></div>  

                            </a>                            

                            <div class="menu-text">  Jonathan Fuzzy

                            	<div class="menu-info">

                                    <div class="menu-date">Seattle</div>                                                                         

                                    <div class="menu-action">

                                        <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Approve" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-check"></i>

                                        </span> 

                                        <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Reject" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-times"></i>

                                        </span>                                                                            

                                    </div>                                

                            	</div>                            

                            </div> 

                     </li>    

                    <li> <a href="#"> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-3.jpg"></div> 

                         </a>    

                        <div class="menu-text">  Sakura Hinata

                            <div class="menu-info">

                                <div class="menu-date">Hawaii</div>                                                                         

                                <div class="menu-action">

                                    <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Approve" data-toggle="tooltip" data-placement="bottom">

                                        <i class="fa fa-check"></i>

                                    </span> 

                                    <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Reject" data-toggle="tooltip" data-placement="bottom">

                                        <i class="fa fa-times"></i>

                                    </span>                                                                             

                                </div>                                

                            </div>                                                     

                        </div> 

                    </li>                                     

                    <li> <a href="#"> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-4.jpg"></div> 

                         </a>    

                        <div class="menu-text">  Rikudou Sennin

                            <div class="menu-info">

                                <div class="menu-date">Las Vegas</div>                                                                         

                                <div class="menu-action">

                                    <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Approve" data-toggle="tooltip" data-placement="bottom">

                                        <i class="fa fa-check"></i>

                                    </span> 

                                    <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Reject" data-toggle="tooltip" data-placement="bottom">

                                        <i class="fa fa-times"></i>

                                    </span>                                                                              

                                </div>                                

                            </div>                                                        

                        </div> 

                    </li> 

                    <li> <a href="#"> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-5.jpg"></div>  

                         </a>   

                        <div class="menu-text">  Kim Kardiosun

                            <div class="menu-info">

                                <div class="menu-date">New York</div>                                                                         

                                <div class="menu-action">

                                    <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Approve" data-toggle="tooltip" data-placement="bottom">

                                        <i class="fa fa-check"></i>

                                    </span> 

                                    <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Reject" data-toggle="tooltip" data-placement="bottom">

                                        <i class="fa fa-times"></i>

                                    </span>                                                                              

                                </div>                                

                            </div>                                                          

                        </div> 

                     </li>

                    <li> <a href="#"> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-6.jpg"></div>

                         </a>    

                        <div class="menu-text">   Brad Pita

                            <div class="menu-info">

                                <div class="menu-date">Seattle</div>                                                                         

                                <div class="menu-action">

                                    <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Approve" data-toggle="tooltip" data-placement="bottom">

                                        <i class="fa fa-check"></i>

                                    </span> 

                                    <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Reject" data-toggle="tooltip" data-placement="bottom">

                                        <i class="fa fa-times"></i>

                                    </span>                                                                              

                                </div>                                

                            </div>                             

                        </div> 

                    </li>                                     

                    <li> <a href="#"> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-7.jpg"></div> 

                         </a>   

                        <div class="menu-text">  Celline Dior

                            <div class="menu-info">

                                <div class="menu-date">Los Angeles</div>                                                                         

                                <div class="menu-action">

                                    <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Approve" data-toggle="tooltip" data-placement="bottom">

                                        <i class="fa fa-check"></i>

                                    </span> 

                                    <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Reject" data-toggle="tooltip" data-placement="bottom">

                                        <i class="fa fa-times"></i>

                                    </span>                                                                             

                                </div>                                

                            </div>                              

                        </div> 

                    </li> 

                    <li> <a href="#"> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-8.jpg"></div>

                         </a>    

                        <div class="menu-text">  Goerge Bruno Marz

                            <div class="menu-info">

                                <div class="menu-date">Las Vegas</div>                                                                         

                                <div class="menu-action">

                                    <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Approve" data-toggle="tooltip" data-placement="bottom">

                                        <i class="fa fa-check"></i>

                                    </span> 

                                    <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Reject" data-toggle="tooltip" data-placement="bottom">

                                        <i class="fa fa-times"></i>

                                    </span>                                                                              

                                </div>                                

                            </div>                              

                        </div> 

                    </li>                                                                                

                    

               </ul>

               </div>

               <div class="closing text-center" style="">

               		<a href="#">See All Requests <i class="fa fa-angle-double-right"></i></a>

               </div>                                                                       

           </div>                              

        </div> <!-- child-menu -->                      

      </div>   <!-- vd_mega-menu-content --> 

    </li>

    <li id="top-menu-2" class="one-icon mega-li"> 

      <a href="index.html" class="mega-link" data-action="click-trigger">

    	<span class="mega-icon"><i class="fa fa-envelope"></i></span> 

		<span class="badge vd_bg-red">10</span>        

      </a>

      <div class="vd_mega-menu-content width-xs-3 width-sm-4 width-md-5 width-lg-4 right-xs left-sm" data-action="click-target">

        <div class="child-menu">  

           <div class="title"> 

           	   Messages

               <div class="vd_panel-menu">

                     <span data-original-title="Message Setting" data-toggle="tooltip" data-placement="bottom" class="menu">

                        <i class="fa fa-cog"></i>

                    </span>                                                                              

                </div>

           </div>                 

		   <div class="content-list content-image">

           	   <div  data-rel="scroll">	

               <ul class="list-wrapper pd-lr-10">

                    <li> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar.jpg"></div> 

                            <div class="menu-text"> Do you play or follow any sports?

                            	<div class="menu-info">

                                    <span class="menu-date">12 Minutes Ago </span>                                                                         

                                    <span class="menu-action">

                                        <span class="menu-action-icon" data-original-title="Mark as Unread" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-eye"></i>

                                        </span>                                                                            

                                    </span>                                

                            	</div>

                            </div> 

                    </li>

                    <li class="warning"> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-2.jpg"></div>  

                            <div class="menu-text">  Good job mate !

                            	<div class="menu-info">

                                    <span class="menu-date">1 Hour 20 Minutes Ago </span>                                                                         

                                    <span class="menu-action">

                                        <span class="menu-action-icon" data-original-title="Mark as Read" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-eye-slash"></i>

                                        </span>                                                                            

                                    </span>                                

                            	</div>                            

                            </div> 

                     </li>    

                    <li> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-3.jpg"></div> 

                            <div class="menu-text">  Just calm down babe, everything will work out.

                            	<div class="menu-info">

                                    <span class="menu-date">12 Days Ago</span>                                                                         

                                    <span class="menu-action">

                                        <span class="menu-action-icon" data-original-title="Mark as Unread" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-eye"></i>

                                        </span>                                                                            

                                    </span>                                

                            	</div>                                                     

                            </div> 

                    </li>                                     

                    <li>

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-4.jpg"></div> 

                            <div class="menu-text">  Euuh so gross....

                            	<div class="menu-info">

                                    <span class="menu-date">19 Days Ago</span>                                                                         

                                    <span class="menu-action">

                                        <span class="menu-action-icon" data-original-title="Mark as Unread" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-eye"></i>

                                        </span>                                                                            

                                    </span>                                

                            	</div>                                                        

                            </div> 

                    </li> 

                    <li> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-5.jpg"></div>  

                            <div class="menu-text">  That's the way.. I like it :D

                            	<div class="menu-info">

                                    <span class="menu-date">20 Days Ago</span>                                                                         

                                    <span class="menu-action">

                                        <span class="menu-action-icon" data-original-title="Mark as Unread" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-eye"></i>

                                        </span>                                                                            

                                    </span>                                

                            	</div>                                                          

                            </div> 

                     </li>

                    <li> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-6.jpg"></div> 

                            <div class="menu-text">  Oooh don't be shy ;P

                            	<div class="menu-info">

                                    <span class="menu-date">21 Days Ago</span>                                                                         

                                    <span class="menu-action">

                                        <span class="menu-action-icon" data-original-title="Mark as Unread" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-eye"></i>

                                        </span>                                                                            

                                    </span>                                

                            	</div>                             

                            </div> 

                     </li>                                     

                    <li> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-7.jpg"></div> 

                            <div class="menu-text">  Hello, please call my number..

                            	<div class="menu-info">

                                    <span class="menu-date">24 Days Ago</span>                                                                         

                                    <span class="menu-action">

                                        <span class="menu-action-icon" data-original-title="Mark as Unread" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-eye"></i>

                                        </span>                                                                            

                                    </span>                                

                            	</div>                              

                            </div> 

                    </li> 

                    <li> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-8.jpg"></div> 

                            <div class="menu-text">  Don't go anywhere, i will be coming soon

                            	<div class="menu-info">

                                    <span class="menu-date">1 Month 2 days Ago</span>                                                                         

                                    <span class="menu-action">

                                        <span class="menu-action-icon" data-original-title="Mark as Unread" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-eye"></i>

                                        </span>                                                                            

                                    </span>                                

                            	</div>                              

                            </div> 

                     </li>                                                                                

                    

               </ul>

               </div>

               <div class="closing text-center" style="">

               		<a href="#">See All Notifications <i class="fa fa-angle-double-right"></i></a>

               </div>                                                                       

           </div>                              

        </div> <!-- child-menu -->                      

      </div>   <!-- vd_mega-menu-content --> 

    </li>  

    <li id="top-menu-3"  class="one-icon mega-li"> 

      <a href="index.html" class="mega-link" data-action="click-trigger">

    	<span class="mega-icon"><i class="fa fa-globe"></i></span> 

		<span class="badge vd_bg-red">51</span>        

      </a>

      <div class="vd_mega-menu-content  width-xs-3 width-sm-4  center-xs-3 left-sm" data-action="click-target">

        <div class="child-menu">  

           <div class="title"> 

           		Notifications 

               <div class="vd_panel-menu">

                     <span data-original-title="Notification Setting" data-toggle="tooltip" data-placement="bottom" class="menu">

                        <i class="fa fa-cog"></i>

                    </span>                   

<!--                     <span class="text-menu" data-original-title="Settings" data-toggle="tooltip" data-placement="bottom">

                        Settings

                    </span> -->                                                              

                </div>

           </div>                 

		   <div class="content-list">	

           	   <div  data-rel="scroll">	

               <ul  class="list-wrapper pd-lr-10">

                    <li> <a href="#"> 

                    		<div class="menu-icon vd_yellow"><i class="fa fa-suitcase"></i></div> 

                            <div class="menu-text"> Someone has give you a surprise 

                            	<div class="menu-info"><span class="menu-date">12 Minutes Ago</span></div>

                            </div> 

                    </a> </li>

                    <li> <a href="#"> 

                    		<div class="menu-icon vd_blue"><i class=" fa fa-user"></i></div> 

                            <div class="menu-text">  Change your user profile details

                            	<div class="menu-info"><span class="menu-date">1 Hour 20 Minutes Ago</span></div>

                            </div> 

                    </a> </li>    

                    <li> <a href="#"> 

                    		<div class="menu-icon vd_red"><i class=" fa fa-cogs"></i></div> 

                            <div class="menu-text">  Your setting is updated

                            	<div class="menu-info"><span class="menu-date">12 Days Ago</span></div>                            

                            </div> 

                    </a> </li>                                     

                    <li> <a href="#"> 

                    		<div class="menu-icon vd_green"><i class=" fa fa-book"></i></div> 

                            <div class="menu-text">  Added new article

                            	<div class="menu-info"><span class="menu-date">19 Days Ago</span></div>                              

                            </div> 

                    </a> </li> 

                    <li> <a href="#"> 

                    		<div class="menu-icon vd_green"><img alt="example image" src="img/avatar/avatar.jpg"></div> 

                            <div class="menu-text">  Change Profile Pic

                            	<div class="menu-info"><span class="menu-date">20 Days Ago</span></div>                              

                            </div> 

                    </a> </li>

                    <li> <a href="#"> 

                    		<div class="menu-icon vd_red"><i class=" fa fa-cogs"></i></div> 

                            <div class="menu-text">  Your setting is updated

                            	<div class="menu-info"><span class="menu-date">12 Days Ago</span></div>                            

                            </div> 

                    </a> </li>                                     

                    <li> <a href="#"> 

                    		<div class="menu-icon vd_green"><i class=" fa fa-book"></i></div> 

                            <div class="menu-text">  Added new article

                            	<div class="menu-info"><span class="menu-date">19 Days Ago</span></div>                              

                            </div> 

                    </a> </li> 

                    <li> <a href="#"> 

                    		<div class="menu-icon vd_green"><img alt="example image" src="img/avatar/avatar.jpg"></div> 

                            <div class="menu-text">  Change Profile Pic

                            	<div class="menu-info"><span class="menu-date">20 Days Ago</span></div>                              

                            </div> 

                    </a> </li>                                                                                

                    

               </ul>

               </div>

               <div class="closing text-center" style="">

               		<a href="#">See All Notifications <i class="fa fa-angle-double-right"></i></a>

               </div>                                                                       

           </div>                              

        </div> <!-- child-menu -->                      

      </div>   <!-- vd_mega-menu-content -->         

    </li>  

     

    <li id="top-menu-profile" class="profile mega-li"> 

        <a href="#" class="mega-link"  data-action="click-trigger"> 

            <span  class="mega-image">

                <img src="img/avatar/avatar.jpg" alt="example image" />               

            </span>

            <span class="mega-name">

                Caroline <i class="fa fa-caret-down fa-fw"></i> 

            </span>

        </a> 

      <div class="vd_mega-menu-content  width-xs-2  left-xs left-sm" data-action="click-target">

        <div class="child-menu"> 

        	<div class="content-list content-menu">

                <ul class="list-wrapper pd-lr-10">

                    <li> <a href="#"> <div class="menu-icon"><i class=" fa fa-user"></i></div> <div class="menu-text">Edit Profile</div> </a> </li>

                    <li> <a href="#"> <div class="menu-icon"><i class=" fa fa-trophy"></i></div> <div class="menu-text">My Achievements</div> </a> </li>

                    <li> <a href="#"> <div class="menu-icon"><i class=" fa fa-envelope"></i></div> <div class="menu-text">Messages</div><div class="menu-badge"><div class="badge vd_bg-red">10</div></div> </a>  </li>

                    <li> <a href="#"> <div class="menu-icon"><i class=" fa fa-tasks

"></i></div> <div class="menu-text"> Tasks</div><div class="menu-badge"><div class="badge vd_bg-red">5</div></div> </a> </li> 

                    <li class="line"></li>                

                    <li> <a href="#"> <div class="menu-icon"><i class=" fa fa-lock

"></i></div> <div class="menu-text">Privacy</div> </a> </li>

                    <li> <a href="#"> <div class="menu-icon"><i class=" fa fa-cogs"></i></div> <div class="menu-text">Settings</div> </a> </li>

                    <li> <a href="#"> <div class="menu-icon"><i class="  fa fa-key"></i></div> <div class="menu-text">Lock</div> </a> </li>

                    <li> <a href="#"> <div class="menu-icon"><i class=" fa fa-sign-out"></i></div>  <div class="menu-text">Sign Out</div> </a> </li>

                    <li class="line"></li>                

                    <li> <a href="#"> <div class="menu-icon"><i class=" fa fa-question-circle"></i></div> <div class="menu-text">Help</div> </a> </li>

                    <li> <a href="#"> <div class="menu-icon"><i class=" glyphicon glyphicon-bullhorn"></i></div> <div class="menu-text">Report a Problem</div> </a> </li>              

                </ul>

            </div> 

        </div> 

      </div>     

  

    </li>               

       

    <li id="top-menu-settings" class="one-big-icon hidden-xs hidden-sm mega-li" data-intro="<strong>Toggle Right Navigation </strong><br/>On smaller device such as tablet or phone you can click on the middle content to close the right or left navigation." data-step=2 data-position="left"> 

    	<a href="#" class="mega-link"  data-action="toggle-navbar-right"> 

           <span class="mega-icon">

                <i class="fa fa-comments"></i> 

            </span> 

<!--            <span  class="mega-image">

                <img src="img/avatar/avatar.jpg" alt="example image" />               

            </span> -->           

			<span class="badge vd_bg-red">8</span>               

        </a>              

       

    </li>

	</ul>

<!-- Head menu search form ends -->                         

                        </div>

                    </div>

                </div>



            </div>

          </div>

        </div>

        <!-- container --> 

      </div>

      <!-- vd_primary-menu-wrapper --> 



  </header>

  <!-- Header Ends --> 

<div class="content">

  <div class="container">

    <div class="vd_navbar vd_nav-width vd_navbar-tabs-menu vd_navbar-left  ">

	<div class="navbar-tabs-menu clearfix">

			<span class="expand-menu" data-action="expand-navbar-tabs-menu">

            	<span class="menu-icon menu-icon-left">

            		<i class="fa fa-ellipsis-h"></i>

                    <span class="badge vd_bg-red">

                        20

                    </span>                    

                </span>

            	<span class="menu-icon menu-icon-right">

            		<i class="fa fa-ellipsis-h"></i>

                    <span class="badge vd_bg-red">

                        20

                    </span>                    

                </span>                

            </span>

            <div class="menu-container">

            	<div class="vd_mega-menu-wrapper">

                	<div class="vd_mega-menu"  data-intro="<strong>Tabs Menu</strong><br/>Can be placed for dropdown menu, tabs, or user profile. Responsive for medium and small size navigation." data-step=3>

        				<ul class="mega-ul">

    <li id="home" class="one-icon mega-li"> 

      <a class="mega-link  vd_bg-blue" href="javascript:void(0);"  data-action="click-trigger">

            <span class="mega-icon">

                <i class="fa fa-cloud"></i>

            </span>

            <span class="badge vd_bg-red">

                10

            </span>

      </a>

      <div class="vd_mega-menu-content width-xs-3 width-sm-5 width-md-6   right-xs " data-action="click-target">

        <div class="child-menu">  

           <div class="title"> 

           	   Server Status

               <div class="vd_panel-menu">

                     <span data-original-title="Find Server" data-toggle="tooltip" data-placement="bottom" class="menu">

                        <i class="fa fa-search"></i>

                    </span>                 

                     <span data-original-title="Message Setting" data-toggle="tooltip" data-placement="bottom" class="menu">

                        <i class="fa fa-cog"></i>

                    </span>                                                                              

                </div>

           </div>                 

		   <div class="content-grid column-md-3 column-sm-2 column-xs-1 height-xs-auto height-sm-4">	

           <div data-rel="scroll">

               <ul class="list-wrapper">

                    <li><a>

           		            <div class="menu-icon">

                				<i class="fa fa-cloud"></i>

           				    </div>

                            <div class="menu-text"> Venmond.com

                            	<div class="menu-info">

                                    <span class="menu-date vd_bg-green badge">Online</span>

                                    <div class="menu-status  text-left">

                                    	<span class="text">Disk Usage</span>

                                        <span class="value pull-right vd_black">4.35/140 GB</span>

                                    </div>

                                    <div class="menu-info">

                                        <div class="progress">

                                            <div style="width:15%" class="progress-bar progress-bar-info"> 

                                            </div>

                                        </div>                                                   

                                    </div>                                     

                                    <div class="menu-status  text-left">

                                    	<span class="text">BW Usage</span>

                                        <span class="value pull-right vd_black">1600/2500 GB</span>

                                    </div>

                                    <div class="menu-info">

                                        <div class="progress">

                                            <div style="width:65%" class="progress-bar  progress-bar-warning"> 

                                            </div>

                                        </div>                                                   

                                    </div>                                                                                                               

                                    <span class="menu-action">

                                        <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Reboot Server" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-refresh"></i>

                                        </span> 

                                        <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Stop Server" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-stop"></i>

                                        </span>

                                    </span>                                

                            	</div>

                            </div> 

                    </a></li>

                    <li> <a>

           		            <div class="menu-icon">

                				<i class="fa fa-cloud"></i>

           				    </div>

                            <div class="menu-text"> Venmond.com

                            	<div class="menu-info">

                                    <span class="menu-date vd_bg-grey badge">Offline</span>

                                    <div class="menu-status  text-left">

                                    	<span class="text">Disk Usage</span>

                                        <span class="value pull-right vd_black">4.35/140 GB</span>

                                    </div>

                                    <div class="menu-info">

                                        <div class="progress">

                                            <div style="width:15%" class="progress-bar progress-bar-info"> 

                                            </div>

                                        </div>                                                   

                                    </div>                                     

                                    <div class="menu-status  text-left">

                                    	<span class="text">BW Usage</span>

                                        <span class="value pull-right vd_black">1600/2500 GB</span>

                                    </div>

                                    <div class="menu-info">

                                        <div class="progress">

                                            <div style="width:65%" class="progress-bar  progress-bar-warning"> 

                                            </div>

                                        </div>                                                   

                                    </div>                                                                                                               

                                    <span class="menu-action">

                                        <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Reboot Server" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-refresh"></i>

                                        </span> 

                                        <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Stop Server" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-stop"></i>

                                        </span>

                                    </span>                                

                            	</div>

                            </div> 

                    </a></li>

                    <li> <a>

           		            <div class="menu-icon">

                				<i class="fa fa-cloud"></i>

           				    </div>

                            <div class="menu-text"> Venmond.com

                            	<div class="menu-info">

                                    <span class="menu-date vd_bg-grey badge">Offline</span>

                                    <div class="menu-status  text-left">

                                    	<span class="text">Disk Usage</span>

                                        <span class="value pull-right vd_black">4.35/140 GB</span>

                                    </div>

                                    <div class="menu-info">

                                        <div class="progress">

                                            <div style="width:15%" class="progress-bar progress-bar-info"> 

                                            </div>

                                        </div>                                                   

                                    </div>                                     

                                    <div class="menu-status  text-left">

                                    	<span class="text">BW Usage</span>

                                        <span class="value pull-right vd_black">1600/2500 GB</span>

                                    </div>

                                    <div class="menu-info">

                                        <div class="progress">

                                            <div style="width:65%" class="progress-bar  progress-bar-warning"> 

                                            </div>

                                        </div>                                                   

                                    </div>                                                                                                               

                                    <span class="menu-action">

                                        <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Reboot Server" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-refresh"></i>

                                        </span> 

                                        <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Stop Server" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-stop"></i>

                                        </span>

                                    </span>                                

                            	</div>

                            </div> 

                    </a></li>

                    <li><a> 

           		            <div class="menu-icon">

                				<i class="fa fa-cloud"></i>

           				    </div>

                            <div class="menu-text"> Venmond.com

                            	<div class="menu-info">

                                    <span class="menu-date vd_bg-grey badge">Offline</span>

                                    <div class="menu-status  text-left">

                                    	<span class="text">Disk Usage</span>

                                        <span class="value pull-right vd_black">4.35/140 GB</span>

                                    </div>

                                    <div class="menu-info">

                                        <div class="progress">

                                            <div style="width:15%" class="progress-bar progress-bar-info"> 

                                            </div>

                                        </div>                                                   

                                    </div>                                     

                                    <div class="menu-status  text-left">

                                    	<span class="text">BW Usage</span>

                                        <span class="value pull-right vd_black">1600/2500 GB</span>

                                    </div>

                                    <div class="menu-info">

                                        <div class="progress">

                                            <div style="width:65%" class="progress-bar  progress-bar-warning"> 

                                            </div>

                                        </div>                                                   

                                    </div>                                                                                                               

                                    <span class="menu-action">

                                        <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Reboot Server" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-refresh"></i>

                                        </span> 

                                        <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Stop Server" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-stop"></i>

                                        </span>

                                    </span>                                

                            	</div>

                            </div> 

                    </a></li>                                                                                                                         

                    

               </ul>

               </div> <!-- data-rel="scroll" -->

               <div class="closing text-center" style="">

               		<a href="#">See All Requests <i class="fa fa-angle-double-right"></i></a>

               </div>                                                                       

           </div>                              

        </div> <!-- child-menu -->                      

      </div>   <!-- vd_mega-menu-content --> 

    </li>

    <li id="tabs-menu-tasks" class="one-icon mega-li"> 

        <a class="mega-link  vd_bg-green" href="javascript:void(0);"   data-action="click-trigger">

            <span class="mega-icon">

                <i class="fa fa-tasks"></i>

            </span>

            <span class="badge vd_bg-red">

                8

            </span>

        </a>

      <div class="vd_mega-menu-content width-xs-3 width-sm-4 width-md-5 right-xs" data-action="click-target">

        <div class="child-menu">  

           <div class="title"> 

           	   You have 8 pending tasks

               <div class="vd_panel-menu">

                     <span data-original-title="Task Setting" data-toggle="tooltip" data-placement="bottom" class="menu">

                        <i class="fa fa-cog"></i>

                    </span>                                                                              

                </div>

           </div>                 

		   <div class="content-list content-image">	

           <div data-rel="scroll">

               <ul class="list-wrapper pd-lr-10">

                    <li> <a href="#"> 

                    		<div class="menu-icon vd_blue"><i class="fa fa-bolt"></i></div> 

                            <div class="menu-text"> Electricity Problem

                            	<div class="menu-info">

                                    <div class="progress progress-sm">

                                        <div style="width:85%" class="progress-bar progress-bar-info"> 

                                        	85%

                                        </div>

                                    </div>                                                                                                    

                            	</div>

                            </div> 

                    </a> </li>

                    <li> <a href="#"> 

                    		<div class="menu-icon vd_yellow"><i class="fa fa-code"></i></div>  

                            <div class="menu-text">  Finish coding jquery plugin

                            	<div class="menu-info">

                                    <div class="progress progress-sm">

                                        <div style="width:20%" class="progress-bar progress-bar-danger"> 

                                        	20%

                                        </div>

                                    </div>                                                                                                    

                            	</div>                           

                            </div> 

                    </a> </li>    

                    <li> <a> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-3.jpg"></div> 

                            <div class="menu-text"> Client: Zoe Project

                            	<div class="menu-info">

                                    <span class="menu-date">Make a call</span>                                                                         

                                    <span class="menu-action">

                                        <span class="menu-action-icon" data-original-title="Call" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-phone"></i>

                                        </span>                                                                            

                                    </span>                                

                            	</div>                                                     

                            </div> 

                    </a> </li>                                     

                    <li> <a href="#"> 

                    		<div class="menu-icon"><i class=" fa fa-magic"></i></div>  

                            <div class="menu-text">  Final error check on new templates

                            	<div class="menu-info">

                                    <div class="progress progress-sm">

                                        <div style="width:95%" class="progress-bar progress-bar-success"> 

                                        	95%

                                        </div>

                                    </div>                                                                                                    

                            	</div>                           

                            </div> 

                    </a> </li> 

                    <li> <a href="#"> 

                    		<div class="menu-icon vd_green"><i class=" fa fa-camera"></i></div>  

                            <div class="menu-text">  Update product image

                            	<div class="menu-info">

                                    <div class="progress progress-sm">

                                        <div style="width:50%" class="progress-bar progress-bar-warning"> 

                                        	50%

                                        </div>

                                    </div>                                                                                                    

                            	</div>                           

                            </div> 

                    </a> </li>

                    <li> <a href="#"> 

                    		<div class="menu-icon vd_blue"><i class="fa fa-bolt"></i></div> 

                            <div class="menu-text"> Electricity Problem

                            	<div class="menu-info">

                                    <div class="progress progress-sm">

                                        <div style="width:85%" class="progress-bar progress-bar-info"> 

                                        	85%

                                        </div>

                                    </div>                                                                                                    

                            	</div>

                            </div> 

                    </a> </li>

                    <li> <a href="#"> 

                    		<div class="menu-icon vd_yellow"><i class=" fa fa-code"></i></div>  

                            <div class="menu-text">  Finish coding jquery plugin

                            	<div class="menu-info">

                                    <div class="progress progress-sm">

                                        <div style="width:20%" class="progress-bar progress-bar-danger"> 

                                        	20%

                                        </div>

                                    </div>                                                                                                    

                            	</div>                           

                            </div> 

                    </a> </li>    

                    <li> <a> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-3.jpg"></div> 

                            <div class="menu-text"> Client: Zoe Project

                            	<div class="menu-info">

                                    <span class="menu-date">Make a call</span>                                                                         

                                    <span class="menu-action">

                                        <span class="menu-action-icon" data-original-title="Call" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-phone"></i>

                                        </span>                                                                            

                                    </span>                                

                            	</div>                                                     

                            </div> 

                    </a> </li>                                     

                                                                                                                       

                    

               </ul>

               </div>

               <div class="closing text-center" style="">

               		<a href="#">See All Tasks <i class="fa fa-angle-double-right"></i></a>

               </div>                                                                       

           </div>                              

        </div> <!-- child-menu -->                      

      </div>   <!-- vd_mega-menu-content --> 

    </li>  

    <li id="test-2" class="one-icon mega-li"> 

        <a class="mega-link vd_bg-yellow " href="javascript:void(0);" data-action="click-trigger">

            <span class="mega-icon">

                <i class="fa fa-pencil"></i>

            </span>

        </a>     

         <div class="vd_mega-menu-content width-xs-3 width-sm-4 width-md-5 center-xs-3 right-sm pd-0" data-action="click-target">

            <div class="child-menu">  



                	<textarea class="no-bd" rows="3" placeholder="What are you doing?" ></textarea>

                    <div class="vd_textarea-menu vd_bg-yellow vd_bd-yellow" >

                    	<ul class="nav nav-pills ">

                        <li class="one-icon">

                            <a data-toggle="tab-post" href="javascript:void(0);">

                                <span class="menu-icon">

                                    <i class="fa fa-user fa-fw"></i>

                                </span>

                            </a>

                        </li>

                        <li class="one-icon">

                            <a data-toggle="tab-post" href="javascript:void(0);">

                                <span class="menu-icon">

                                    <i class="fa fa-camera fa-fw"></i>

                                </span>

                            </a>

                        </li>   

                        <li class="one-icon">

                            <a data-toggle="tab-post" href="javascript:void(0);">

                                <span class="menu-icon">

                                    <i class="fa fa-smile-o fa-fw"></i>

                                </span>

                            </a>

                        </li>  

                        <li class="pull-right">

                            <a data-toggle="tab-post" href="javascript:void(0);" style="border-left:1px solid rgba(255,255,255,.3)">

                                <span class="menu-icon">

                                    <i class="fa fa-check fa-fw"></i>

                                </span>                             

                                <span class="menu-text">

                                	Post

                                </span>                              

                            </a>

                        </li>  

                                                                    

                        </ul>



                </div>

                                          

            </div> <!-- child-menu -->                      

          </div>   <!-- vd_mega-menu-content -->                               

         

    </li>  

    <li id="test" class="one-icon mega-li"> 

        <a class="mega-link vd_bg-red" href="javascript:void(0);" data-action="click-trigger">

            <span class="mega-icon">

                <i class="fa fa-plus"></i>

            </span>

        </a>

        <div class="vd_mega-menu-content  width-xs-2  center-xs-2" data-action="click-target" >

                <div class="child-menu"> 

                    <div class="content-list content-menu">

                        <ul class="list-wrapper pd-lr-10">

                            <li> <a href="#"> <span class="menu-icon"><i class=" fa fa-user"></i></span> <span class="menu-text">Write Article</span> </a> </li>

                            <li> <a href="#"> <span class="menu-icon"><i class=" fa fa-trophy"></i></span> <span class="menu-text">Write News</span> </a> </li>

                            <li> <a href="#"> <span class="menu-icon"><i class=" fa fa-flask"></i></span> <span class="menu-text">Add Product</span> </a>  </li>

                                       

                        </ul>

                    </div> 

                </div> 

           </div>   <!-- vd_mega-menu-content  -->      

    </li>      

</ul>                        	

                    </div>                

                </div>

            </div>                                                   

    </div>

