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

<head>
        <!--=============== basic  ===============-->
        <meta charset="UTF-8">
        <title>Monolit   - Responsive  Architecture Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <meta name="robots" content="index, follow"/>
        <meta name="keywords" content=""/>
        <meta name="description" content=""/>
        <!--=============== css  ===============-->	
        <link type="text/css" rel="stylesheet" href="css/reset.css">
        <link type="text/css" rel="stylesheet" href="css/plugins.css">
        <link type="text/css" rel="stylesheet" href="css/style.css">
		<link type="text/css" rel="stylesheet" href="css/ionicons.min.css">
		<link type="text/css" rel="stylesheet" href="css/linearicons.css">
        <!--=============== favicons ===============-->
        <link rel="shortcut icon" href="images/favicon.ico">
		
    </head>
    <body>
	
	
	<div class="menu"> 
  <span class="close-menu icon-cross2 right-boxed"></span>
      <div class="menu-lang right-boxed">
        <a href="#" class="active">Eng</a>
        <a href="#">Fra</a>
        <a href="#">Ara</a>
      </div>
      <ul class="menu-list right-boxed">
        <li>
          <a href="./">Home</a>
        </li>
        <li>
          <a href="about">About Us</a>
        </li>
        <li>
          <a href="facility-and-products">Facility & Products</a>
        </li>
        <li>
          <a href="services">Services</a>
        </li>
        <li>
          <a href="press-media">Press Media</a>
        </li>
        <li>
          <a href="contact">Contact</a>
        </li>
      </ul>
      <div class="menu-footer right-boxed">
        <div class="social-list">
          <a href="#" class="icon ion-social-twitter"></a>
          <a href="#" class="icon ion-social-facebook"></a>
          <a href="#" class="icon ion-social-instagram"></a>
          <a href="#" class="icon ion-social-linkedin"></a>
        
        </div>
        <div class="copy">© MDPP 2019. All Rights Reseverd. Design by Laksh</div>
      </div>
    </div>
	
	
	    <section class="breadcrumbs-v5 bg-position-fixed breadcrumbs-v5-bg-img-v4">
        <div class="container">
           
        </div>
    </section>
        <!-- loader -->
        <div class="loader">
            <div id="movingBallG">
                <div class="movingBallLineG"></div>
                <div id="movingBallG_1" class="movingBallG"></div>
            </div>
        </div>
        <!-- loader end -->
        <!--================= main start ================-->
        <div id="main">
            <!--=============== header ===============-->	
            <header style="background-color:transparent;">
                <!-- header-inner  -->
                <div class="header-inner">
                    <!-- header logo -->
                    <div class="logo-holder">
                        <a href="index.html"><img src="images/logo2.png" alt=""></a>
                    </div>
                    <!-- header logo end -->
                   
                </div>
                <!-- header-inner  end -->
         
		 
		 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
		 
		<!--	                   <div class="menux navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
  <span class="menu-global menu-top"></span>
  <span class="menu-global menu-middle"></span>
  <span class="menu-global menu-bottom"></span>
</div>  -->
		 
            </header>
            <!--=============== wrapper ===============-->	
            <div id="wrapper">
                <!-- content-holder  -->
                <div class="content-holder">
                    <!-- Page title -->
                    <div class="dynamic-title">Home Slider</div>
                    <!-- Page title  end--> 
                    <!-- content  -->
                    <div class="content full-height no-bg-con">
                        <!-- Hero section   -->
                        <div class="hero-wrap">
                            <!-- hero-wrap-image-slider-holder  end -->
                            <div class="hero-wrap-image-slider-holder">
                                <div class="overlay"></div>
                                <!-- hero-wrap-image-slider  -->
                                <div class="hero-wrap-image-slider">
                                    <!-- 1  -->
                                    <div class="item">
                                        <div class="bg"  data-bg="images/slide1.png" data-top-bottom="transform: translateY(300px);" data-bottom-top="transform: translateY(-300px);"></div>
                                    </div>
                                    <!-- 1  end-->
                                    <!-- 2  -->
                                    <div class="item">
                                        <div class="bg"  data-bg="images/slide2.jpg" data-top-bottom="transform: translateY(300px);" data-bottom-top="transform: translateY(-300px);"></div>
                                    </div>
                                    <!-- 2 end -->
                                    <!-- 3  -->
                                    <div class="item">
                                        <div class="bg"  data-bg="images/slide4.jpg" data-top-bottom="transform: translateY(300px);" data-bottom-top="transform: translateY(-300px);"></div>
                                    </div>
                                    <!-- 3 end  -->
                                </div>
                                <!-- hero-wrap-image-slider  end -->
                            </div>
                            <!-- hero-wrap-image-slider-holder  end -->
                            <!-- hero-wrap-image-slider-holder  end -->
                            <div class="hero-wrap-text-slider-holder">
                                <!-- hero-wrap-image-slider  -->
                                <div class="hero-wrap-text-slider">
                                    <!-- 1  -->
                                    <div class="item">
                                        <div class="hero-wrap-item center-item">
                                            <h2> In - Vitro Micropropagation</h2>
                                            <h3>Phase 3 - Elongation</h3>
                                            <a href="#sec1" class="hero-link custom-scroll-link">START EXPLORE</a>
                                        </div>
                                    </div>
                                    <!-- 1  end-->
                                    <!-- 2  -->
                                    <div class="item">
                                        <div class="hero-wrap-item center-item" style="background: #fff;padding-top: 30px;padding-bottom: 30px;width:60%;margin:0 auto;float:none !important;">
                                            <h2>Harvesting </h2>
                                            <h3 style="letter-spacing:5px;">IPM implementation - protection of tree health &amp; high quality fruit</h3>
                                            <a href="#sec1" class="hero-link custom-scroll-link">START EXPLORE</a>
                                        </div>
                                    </div>
                                    <!-- 2 end -->
                                    <!-- 3  -->
                                    <div class="item">
                                        <div class="hero-wrap-item center-item">
                                            <h2 style="color:#fff;">  Post Distribution Follow Up </h2>
                                            <h3 style="color:#fff;letter-spacing:5px;">MDPP provides follow up consultation for purchased plantlets</h3>
                                            <a style="color: #fff;border-top: 1px solid #fff;border-bottom: 1px solid #fff;" href="#sec1" class="hero-link custom-scroll-link"> START EXPLORE</a>
                                        </div>
                                    </div>
                                    <!-- 3 end  -->
                                </div>
                                <!-- hero-wrap-text-slider  end -->
                                <!--  navigation -->
                                <div class="customNavigation fhsln">
                                    <a class="prev-slide transition"><i class="fa fa-angle-left"></i></a>
                                    <a class="next-slide transition"><i class="fa fa-angle-right"></i></a>
                                </div>
                                <!--  navigation end-->
                            </div>
                            <!-- hero-wrap-image-text-holder  end -->                          
                        </div>
                        <!-- Hero section   end -->
                    </div>
                    <!-- content end -->
                    <!-- content  -->
                    <div class="content">
                        <section id="sec1">
                            <!-- section number   -->
                            <div class="sect-subtitle right-align-dec" data-top-bottom="transform: translateY(200px);" data-bottom-top="transform: translateY(-200px);"><span>01</span></div>
                            <!-- section number  end  -->
                            <!--  container  --> 
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-4">
                                        <!-- single slider  -->
                                        <div class="parallax-box slider-box ">
                                            <div class="single-slider-holder">
                                                <div class="single-slider">
                                                    <!-- 1 -->
                                                    <div class="item">
                                                        <img src="images/service3.jpg" alt="">
                                                    </div>
                                                    <!-- 1 end-->
                                                    <!-- 2 -->
                                                    <div class="item">
                                                        <img src="images/service2.jpg" alt="">
                                                    </div>
                                                    <!-- 2 end-->
                                                    <!-- 3 -->                                     	
                                                    <div class="item">
                                                        <img src="images/service1.jpg" alt="">
                                                    </div>
                                                    <!-- 3 end  -->
                                                </div>
                                                <div class="customNavigation ssn">
                                                    <a class="prev-slide transition"><i class="fa fa-angle-left"></i></a>
                                                    <a class="next-slide transition"><i class="fa fa-angle-right"></i></a>
                                                </div>
                                            </div>
                                            <!-- single slider  end -->
                                        </div>
                                    </div>
                                    <div class="col-md-8">
                                        <!-- section title  -->
                                        <h2 class="section-title">Who We <strong> are?</strong></h2>
                                        <!-- section title  end -->
                                        <p>Marrakech Date Palm Project, founded in 2010, has been errected for the purpose to give back to the Date Palm (P. dactylifera L.) population and industry. MDPP is internationally recognized as one of the major commercial date palm mass propagation facilities. The establishment of MDPP is to fulfill the needs of the Phenicicole sector (date palm culture sector in the Kingdom of Morocco and across the globe).</p>
                                        <p>After 30 years of experience working with date palm tissue culture & operating with both the government institutions (National Institute of Agronomic Research / INRA / Morocco, United Arab Emirates University / UAEU) and the international organizations (Food & Agriculture Organization / FAO, United Nations Development Program / UNDP, United Nations Office for project Services / UNOPS), Marrakech Date Palm Project has opened its doors for business.</p>
                                        <p>This private laboratory was then established to contribute to satisfy the large demand of Morocco in propagation of date palm plant material.</p>
 									
                                        <a href="about" class="btn anim-button fl-l" style="margin-top:50px;"><span>LEARN MORE ABOUT US</span><i class="fa fa-long-arrow-right"></i></a>
                                    </div>
                                </div>
                            </div>
                            <!--  container end  -->  
                        </section>
                    </div>
                    <!-- content  end  -->        
                    <!-- content   --> 
                    <div class="content dark-bg">
                        <!-- section number   -->
                        <div class="sect-subtitle left-align-dec" data-top-bottom="transform: translateY(-200px);" data-bottom-top="transform: translateY(200px);"><span>02</span></div>
                        <!-- section number   end -->                                       
                        <!-- parallax image  -->                        
                        <div class="parallax-inner">
                            <div class="bg" data-bg="images/s111.jpg" data-top-bottom="transform: translateY(300px);" data-bottom-top="transform: translateY(-300px);"></div>
                            <div class="overlay"></div>
                        </div>
                        <!-- parallax image  end -->  
                        <section>
                            <!--  container  --> 
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-4">
                                        <h2 class="section-title">Some Interisting <strong> Facts</strong></h2>
                                    </div>
                                    <div class="col-md-8">
                                        <p>Our team takes over everything, from an idea and concept development to realization. We believe in traditions and incorporate them within our innovations. All our projects incorporate a unique artistic image and functional solutions. Client is the soul of the project. Our main goal is to achieve his/hers values and expectation.</p>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4"></div>
                                    <div class="col-md-8">
                                        <!-- facts   -->  
                                        <div class="inline-facts-holder row">
                                            <!-- 1 -->
                                            <div class="inline-facts col-md-4 ">
                                                <div class="milestone-counter">
                                                    <div class="stats animaper">
                                                        <div class="num" data-content="461" data-num="461">0</div>
                                                    </div>
                                                </div>
                                                <h6>Finished projects</h6>
                                            </div>
                                            <!-- 3 -->
                                            <div class="inline-facts col-md-4">
                                                <div class="milestone-counter">
                                                    <div class="stats animaper">
                                                        <div class="num" data-content="168" data-num="168">0</div>
                                                    </div>
                                                </div>
                                                <h6>Happy customers</h6>
                                            </div>
                                            <!-- 3 -->
                                            <div class="inline-facts col-md-4">
                                                <div class="milestone-counter">
                                                    <div class="stats animaper">
                                                        <div class="num" data-content="222" data-num="222">0</div>
                                                    </div>
                                                </div>
                                                <h6>Working hours</h6>
                                            </div>
                                        </div>
                                        <!-- facts   end --> 
                                    </div>
                                </div>
                            </div>
                            <!--  container  end --> 
                        </section>
                    </div>
                    <!-- content  end  -->        
                    <!-- content   -->         
                    <div class="content">
                        <section>
                            <!-- section number     -->
                            <div class="sect-subtitle right-align-dec" data-top-bottom="transform: translateY(200px);" data-bottom-top="transform: translateY(-200px);"><span>03</span></div>
                            <!-- section number   end -->
                            <!--  container  --> 
                            <div class="container">
                                <!--  section title -->
                                <div class="row">
                                    <div class="col-md-12">
                                        <h2 class="section-title algn-right dec-title"><span>Facilities and  <strong> Products</strong></span></h2>
                                    </div>
                                </div>
                                <!--  section title end  -->
                                <!--  Parallax items  -->
                                <!-- 1 --> 
                                <div class="row">
                                    <div class="col-md-7">
                                        <div class="parallax-item left-direction">
                                            <div class="paralax-media">
                                                <ul class="creat-list">
                                                    <li><a href="#">Facility and Products</a></li>
                                                    <li><a href="#">Production Process</a></li>
                                                   
                                                </ul>
                                                <div class="paralax-wrap">
                                                    <img src="images/a1.jpg" class="respimg" alt="">
                                                </div>
                                            </div>
                                            <div class="parallax-deck" data-top-bottom="transform: translateY(-200px);" data-bottom-top="transform: translateY(200px);">
                                                <div class="parallax-deck-item">
                                                    <h3><strong>MULTIPLE BUD FORMATION</strong><br><span style="font-size:40px;">and shoot development</span></h3>
                                                    <a href="facility-and-products" class="btn anim-button fl-l"><span>LEARN MORE</span><i class="fa fa-long-arrow-right"></i></a>																
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-5"></div>
                                </div>
                                <!-- 1 end--> 
                                <!-- 2 --> 
                                <div class="row">
                                    <div class="col-md-5"></div>
                                    <div class="col-md-7">
                                        <div class="parallax-item right-direction">
                                            <div class="paralax-media">
                                                <ul class="creat-list">
                                                    <li><a href="#">Facility and Products</a></li>
                                                    <li><a href="#">Production Process</a></li>
                                                </ul>
                                                <div class="paralax-wrap">  
                                                    <img src="images/a2.jpg" class="respimg" alt="">
                                                </div>
                                            </div>
                                            <div class="parallax-deck" data-top-bottom="transform: translateY(-200px);" data-bottom-top="transform: translateY(200px);">
                                                <div class="parallax-deck-item">
                                                    <h3><strong>Introduction</strong><br><span style="font-size:40px;">Meristematic tissue</span></h3>
                                                    <a href="facility-and-products" class="btn anim-button fl-l"><span>LEARN MORE</span><i class="fa fa-long-arrow-right"></i></a>																
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 2 end-->                                    
                                <!-- 3 --> 
                                <div class="row">
                                    <div class="col-md-7">
                                        <div class="parallax-item left-direction">
                                            <div class="paralax-media">
                                                <ul class="creat-list">
                                                  <li><a href="#">Facility and Products</a></li>
                                                    <li><a href="#">Production Process</a></li>
                                                </ul>
                                                <div class="paralax-wrap"> 
                                                    <img src="images/a3.jpg" class="respimg" alt="" style="width:400px !important;">
                                                </div>
                                            </div>
                                            <div class="parallax-deck" data-top-bottom="transform: translateY(-200px);" data-bottom-top="transform: translateY(200px);">
                                                <div class="parallax-deck-item">
                                                    <h3><strong>ELONGATION</strong><br><span style="font-size:40px;">chain of amino acids</span></h3>
                                                    <a href="facility-and-products" class="btn anim-button fl-l"><span>LEARN MORE</span><i class="fa fa-long-arrow-right"></i></a>																
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-5"></div>
                                </div>
                                <!-- 3 end-->                                     
                                <!-- custom-link-holder  --> 
                                <div class="custom-link-holder">
                                    <a href="facility-and-products" class="btn anim-button"  data-top-bottom="transform: translateY(-50px);" data-bottom-top="transform: translateY(50px);"><span>View All</span><i class="fa fa-long-arrow-right"></i></a>	
                                </div>
                                <!-- custom-link-holder  end --> 
                            </div>
                            <!--  container  end --> 
                        </section>
						
						
						

                    </div>
					
					        <!-- content  -->
                    <div class="content dark-bg" id="sec4">
                        <div class="sect-subtitle left-align-dec" data-top-bottom="transform: translateY(-200px);" data-bottom-top="transform: translateY(200px);"><span>04</span></div>
						<!-- parallax image  -->
                        <div class="parallax-inner">
                            <div class="bg" data-bg="images/bg/10.jpg" data-top-bottom="transform: translateY(300px);" data-bottom-top="transform: translateY(-300px);"></div>
                            <div class="overlay"></div>
                        </div>
						<!-- parallax image  end-->
                        <section>
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-4">
                                        <h2 class="section-title">Our<strong> Services</strong></h2>
                                    </div>
                                    <div class="col-md-8">
                                        <p>Our team takes over everything, from an idea and concept development to realization. We believe in traditions and incorporate them within our innovations. All our projects incorporate a unique artistic image and functional solutions. Client is the soul of the project. Our main goal is to illustrate his/hers values and individuality through design.</p>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4"></div>
                                    <div class="col-md-8">
                                        <!-- skills  -->
                                        <div class="piechart-holder animaper" data-skcolor="rgba(255,255,255,0.31)">
                                            <div class="row">
                                                <!-- 1  -->
                                                <div class="piechart col-md-4" >
                                                <img src="images/ser1.jpg" width="200">
                                                    <div class="clearfix"></div>
                                                    <div class="skills-description">
                                                        <h4>POST DISTRIBUTION FOLLOW UP</h4>
                                                    </div>
                                                </div>
                                                <!-- 1 end -->
                                                <!-- 2  -->
                                                <div class="piechart col-md-4">
                                                    <img src="images/ser2.jpg" width="200">
                                                    <div class="clearfix"></div>
                                                    <div class="skills-description">
                                                        <h4>CONSULTATION</h4>
                                                    </div>
                                                </div>
                                                <!-- 2 end  -->
                                                <!-- 3  -->
                                                <div class="piechart col-md-4">
                                                   <img src="images/ser3.jpg" width="200">
                                                    <div class="clearfix"></div>
                                                    <div class="skills-description">
                                                        <h4>HARDENING OFF PROGRAM</h4>
                                                    </div>
                                                </div>
                                                <!-- 3  end-->
                                            </div>
											
											<!-- custom-link-holder  --> 
                                <div class="custom-link-holderx">
                                    <a href="services" class="btnx anim-button"  data-top-bottom="transform: translateY(-50px);" data-bottom-top="transform: translateY(50px);"><span>View All</span><i class="fa fa-long-arrow-right"></i></a>	
                                </div>
                                <!-- custom-link-holder  end --> 
											
                                        </div>
                                        <!-- skills  end-->
                                    </div>
                                </div>
                            </div>
                        </section>
                    </div>
					<!-- content end-->
					
					
					<div class="content" id="sec5">
                        <section>
                            <div class="sect-subtitle right-align-dec skrollable skrollable-between" data-top-bottom="transform: translateY(200px);" data-bottom-top="transform: translateY(-200px);" style="transform: translateY(3.8623px);"><span>05</span></div>
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-12">
                                        <h2 class="section-title  dec-title"><span>Our Fantastic  <strong> Team</strong></span></h2>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <!-- team -->
                                        <ul class="team-holder">
                                            <!-- 1 -->
                                            <li>
                                                <div class="team-box skrollable skrollable-after" data-top-bottom="transform: translateY(-50px);" data-bottom-top="transform: translateY(50px);" style="transform: translateY(-50px);">
                                                    <div class="team-photo">
                                                        <div class="overlay"></div>
                                                        <ul class="team-social" style="margin-top: -15.5px; display: block;">
                                                            <li><a href="#" target="_blank" style="opacity: 0; top: 50px;"><i class="fa fa-facebook"></i></a></li>
                                                            <li><a href="#" target="_blank" style="opacity: 0; top: 50px;"><i class="fa fa-twitter"></i></a></li>
                                                            <li><a href="#" target="_blank" style="opacity: 0; top: 50px;"><i class="fa fa-linkedin"></i></a></li>
                                                    
                                                        </ul>
                                                        <img src="images/team2.jpg" alt="" class="respimg">
                                                    </div>
                                                    <div class="team-info">
                                                        <h3><a href="team-single.html">Dr. Abdelouahhab Zaïd Prof.</a></h3>
                                                        <h4>General Director</h4>
                                                    </div>
                                                </div>
                                            </li>
                                            <!-- 1 end  -->
                                            <!-- 2 -->
                                            <li>
                                                <div class="team-box skrollable skrollable-after" data-top-bottom="transform: translateY(100px);" data-bottom-top="transform: translateY(-100px);" style="transform: translateY(100px);">
                                                    <div class="team-photo">
                                                        <div class="overlay"></div>
                                                        <ul class="team-social" style="margin-top: -15.5px; display: block;">
                                                                    <li><a href="#" target="_blank" style="opacity: 0; top: 50px;"><i class="fa fa-facebook"></i></a></li>
                                                            <li><a href="#" target="_blank" style="opacity: 0; top: 50px;"><i class="fa fa-twitter"></i></a></li>
                                                            <li><a href="#" target="_blank" style="opacity: 0; top: 50px;"><i class="fa fa-linkedin"></i></a></li>
                                                        </ul>
                                                        <img src="images/team1.jpg" alt="" class="respimg">
                                                    </div>
                                                    <div class="team-info">
                                                        <h3><a href="team-single.html">Dr. Salah E. Zaïd</a></h3>
                                                        <h4>Technical & Financial Director</h4>
                                                    </div>
                                                </div>
                                            </li>
                                            <!-- 2 end  -->
                                            <!-- 3 -->
                                            <li>
                                                <div class="team-box skrollable skrollable-after" data-top-bottom="transform: translateY(-50px);" data-bottom-top="transform: translateY(50px);" style="transform: translateY(-50px);">
                                                    <div class="team-photo">
                                                        <div class="overlay"></div>
                                                        <ul class="team-social" style="margin-top: -15.5px; display: block;">
                                                                        <li><a href="#" target="_blank" style="opacity: 0; top: 50px;"><i class="fa fa-facebook"></i></a></li>
                                                            <li><a href="#" target="_blank" style="opacity: 0; top: 50px;"><i class="fa fa-twitter"></i></a></li>
                                                            <li><a href="#" target="_blank" style="opacity: 0; top: 50px;"><i class="fa fa-linkedin"></i></a></li>
                                                        </ul>
                                                        <img src="images/team3.jpg" alt="" class="respimg">
                                                    </div>
                                                    <div class="team-info">
                                                        <h3><a href="team-single.html">Ms. Limouna Zaïd</a></h3>
                                                        <h4>Administrative Director</h4>
                                                    </div>
                                                </div>
                                            </li>
                                            <!-- 3 end  -->
                                 
                                        </ul>
                                        <!-- team end  -->
                                    </div>
                                </div>
                            </div>
                        </section>
                    </div>
					
					
					
                    <!-- content end -->
                    <!-- content footer-->
                  	<?php include 'footer.html'; ?>		
                  
                    <!-- content footer end -->
                    <!-- share  -->
                    <div class="share-inner">
                        <div class="share-container  isShare"  data-share="['facebook','googleplus','twitter','linkedin']"></div>
                        <div class="close-share"></div>
                    </div>
                    <!-- share end -->
                </div>
                <!-- content-holder  end-->
            </div>
            <!-- wrapper end -->
 
        </div>
        <!-- Main end -->
        <!--=============== scripts  ===============-->
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/plugins.js"></script>
        <script type="text/javascript" src="js/scripts.js"></script>
	<script type="text/javascript" src="js/jquery.smooth-scroll.js"></script>
	<script type="text/javascript">
	
	$(document).ready(function(){
	
		/*-------------------------------------------------------------------------------
	  Menu
	-------------------------------------------------------------------------------*/



	$('.navbar-toggle').on('click',function(){
		$('body').removeClass('menu-is-closed').addClass('menu-is-opened');
	});

	$('.close-menu, .click-capture').on('click', function(){
		$('body').removeClass('menu-is-opened').addClass('menu-is-closed');
		$('.menu-list ul').slideUp(300);
	});
	
	});
		
		var Menu = {
  
  el: {
    ham: $('.menu'),
    menuTop: $('.menu-top'),
    menuMiddle: $('.menu-middle'),
    menuBottom: $('.menu-bottom')
  },
  
  init: function() {
    Menu.bindUIactions();
  },
  
  bindUIactions: function() {
    Menu.el.ham
        .on(
          'click',
        function(event) {
        Menu.activateMenu(event);
      
      }
    );
  },
  
  activateMenu: function() {
    Menu.el.menuTop.toggleClass('menu-top-click');
    Menu.el.menuMiddle.toggleClass('menu-middle-click');
    Menu.el.menuBottom.toggleClass('menu-bottom-click'); 
  }
};

Menu.init();
	
	</script>
	
						<script type="text/javascript">
					
					$(document).ready(function(){
					
					 var isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;

    if (isMobile) {
					
							 $(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    // Do something
		
	if(scroll > 10){	
		
		$('.logo-holder').css({"width":"60px","transition":"ease-in-out 0.3s"});
		$('header').css({"margin-top":"60px","transition":"ease-in-out 0.3s"});
		$('.navbar-toggle').css({"margin-top":"30px","transition":"ease-in-out 0.3s"});
		
	}
			 
	if(scroll < 10){
		
		$('.logo-holder').css({"width":"160px","transition":"ease-in-out 0.3s"});
		$('header').css({"margin-top":"0px","transition":"ease-in-out 0.3s"});
		$('.navbar-toggle').css({"margin-top":"50px","transition":"ease-in-out 0.3s"});
	}
			 
		 
			 
});

}
					
					});
					
					</script>
    </body>


</html>