<!DOCTYPE html>
<html lang="en">
<head>
  
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
  <link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
  <link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet">
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
 <style>
  body {
    font: 400 15px/1.8 Lato, sans-serif;
    color: white;
    overflow-x: hidden;
    background-color: #fff;
    padding-top: 0px;
  }
  h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

h2 {
    color: white;
    font-weight: 600;
    font-size: 48px;
    font-family: 微軟正黑體;
}

h4 {
  color: black;
  font-size: 15x;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 2;
}

h5 {
  color: #626262;
  font-size: 14px;
  font-weight: 500;
}

a {
  letter-spacing: 2px;
  text-decoration: none;
}

ul {
  letter-spacing: 1px;
}

li {
  color: #626262;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: capitalize;
}

p {
  font-size: 14px;
  font-weight: 300;

}

.container {
    padding-left: -15px;
  padding-right: -15px;
  }
 
  .btn {
  border: 1px solid #fff;
  border-radius: 50px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 15px 40px;
  text-transform: uppercase;
  -moz-transition: all 0.5s ease-in-out 0s;
  -ms-transition: all 0.5s ease-in-out 0s;
  -o-transition: all 0.5s ease-in-out 0s;
  -webkit-transition: all 0.5s ease-in-out 0s;
  transition: all 0.5s ease-in-out 0s;
}

  .btn:hover, .btn:focus {
    border: 1px solid #333;
    background-color: #fff;
    color: #000;
  }

.col-md-10 {
    width: 106%;
    margin-top: -105px;
}
.col-md-offset-1 {
    margin-left: -3%;
}

  @media (max-width: 992px){
.col-md-offset-1 {
    margin-left: 0%;
}}
@media (max-width: 992px){
.col-md-10 {
    width: 100%;
    margin-top: -100px;
}
}
.bgw{
background-color: rgba(255, 255, 255, 0.0);
 }

 @media (max-width: 992px) {
 .col-md-10{
  padding-right: 0px;
  padding-left: 0px;
 }

 .container-fluid {
    padding-right: 0px;
    padding-left: 0px;
}
}

/*--------------------------------------------------------------
# intro Section
--------------------------------------------------------------*/
#intro {
  width: 100%;
  height: 100vh;
  background:linear-gradient(
    rgba(0,0,0,0.3),
    rgba(0,0,0,0.3)
  ),
   url(/userUpload/images/10512106/welcome.jpg);
   background-attachment: fixed; 
   background-repeat:no-repeat;
   background-position: center top; 
  background-size: cover;
  position: relative;
  margin-top: 40px;
}

@media (min-width: 1025px) {
  #intro {
    background-attachment: fixed;
  }
}

#intro .intro-container {
  position: absolute;
  bottom: 0;
  top: 80%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

#intro h1 {
  margin: 0 0 10px 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
  font-family:  "微軟正黑體";
  color: #71c55d;
}

@media (max-width: 768px) {
  #intro h1 {
    font-size: 28px;
    line-height: 36px;
  }
}

#intro h2 {
  color: #777;
  margin-bottom: 30px;
  font-size: 20px;
  font-family: "微軟正黑體";
  font-weight: 300;
}

@media (max-width: 768px) {
  #intro h2 {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 30px;
  }
}

#intro img {
  max-width: 95%;
  margin-bottom: 30px;
}

#intro .btn-get-started {
  font-family: "微軟正黑體";
  text-transform: uppercase;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 11px 36px;
  border-radius: 50px;
  transition: 0.5s;
  margin-bottom: 30px;
  border: 2px solid #71c55d;
  color: white;
  text-decoration: none;
}

#intro .btn-get-started:hover {
  background: darkorange;
  color: #fff;
}

#intro .btns a {
  color: #555;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  margin: 4px 20px;
  text-decoration: none;
  transition: 0.3s;
}

@media (max-width: 575px) {
  #intro .btns a {
    margin: 4px 8px;
  }
}

#intro .btns a:hover {
  color: #71c55d;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
  .navbar {
    font-family: Montserrat, sans-serif;
    margin-bottom: 0;
    background-color: brown;
    border: 0;
    font-size: 14px !important;
    font-family: "微軟正黑體";
    letter-spacing: 5px;

  }
  .navbar li a, .navbar .navbar-brand { 
    color: #d5d5d5 !important;
  }
  .navbar-nav li a:hover {
    color: #fff !important;
  }
.navbar-nav li.active a {
    color: lightgreen !important;
    background-color: brown !important;
}
  .navbar-default .navbar-toggle {
    border-color: transparent;
  }

  footer {
    background-color: brown;
    color: #f5f5f5;
    
  }
  footer a {
    color: #f5f5f5;
  }
  footer a:hover {
    text-decoration: none;
  }  
  .form-control {
    border-radius: 0;
  }
  textarea {
    resize: none;
  }
/* About Us Section
--------------------------------*/
#about{
  background: linear-gradient(
    rgba(0,0,0,0.5),
    rgba(0,0,0,0.5)
  ),
  url(/userUpload/images/10512106/guavatree.jpg);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-attachment: fixed;
  background-size: cover;
  width: 100%;
  height: 100vh;
}

@media (max-width: 992px) {

#about {
height: 100%;}
}


#about img {
  max-width: 100%;
}

#about .about-content {
  padding-top: 100px;
}

#about .about-content  p{
  color: white;
  font-family: "微軟正黑體";
  font-size: 25px;
  font-weight: 100;
  letter-spacing: 2px;
  margin-bottom: 20px;
  text-transform: capitalize;
}

  .separator {
  color: #ddd;
  font-family: "微軟正黑體";
  font-size: 25px;
  font-weight: 300;
  margin-bottom: 30px;
  text-transform: capitalize;
}

/* Contact Section
--------------------------------*/
#contact {

width: 100%;
height: 100vh;
background: linear-gradient(
  rgba(0,0,0,0.3),
  rgba(0,0,0,0.3)
),
url(/userUpload/images/10512106/contact.jpg);
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed;
background-size: cover;
z-index: -5;
}

@media (max-width: 992px) {

  #contact {
height: 100%;}
}
 

#contact .info {
color: #222;
}

#contact .info i {
font-size: 40px;
color: white;
float: left;
}


#contact .info p {
padding: 0 0 13px 60px;
margin-bottom: 20px;
line-height: 27px;
font-size: 25px;
font-family: 微軟正黑體;
color: #ddd;
}


#contact .info .email p {
padding-top: 5px;
}

#contact .social-links {
padding-bottom: 50px;
text-align: center;
}

#contact .social-links a {
font-size: 18px;
display: inline-block;
background: blue;
color: #fff;
line-height: 1;
padding: 8px 0 8px 0;
border-radius: 50%;
text-align: center;
width: 36px;
height: 36px;
transition: 0.3s;
}

#contact .social-links a:hover {
background: rgb(85, 161, 212);
color: #fff;
}

.iframe-rwd {
position: relative;
padding-bottom: 65.25%;
padding-top: 30px;
height: 0;
overflow: hidden;

      }
      
.iframe-rwd iframe {
      position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-top: 50px;
      }

      /* product Section
--------------------------------*/
#product {
  display: inline-block;
  height: 100%;
  width: 100%;
  background-color: rgb(216, 179, 76);
}


#product .product-block {
  background: #fff none repeat scroll 0 0;
  padding: 30px 20px;
  margin: 30px 20px;
  transition: all 0.5s ease-in-out 0s;
}

#product .product-block:hover {
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.5);
  transition: all 0.5s ease-in-out 0s;
}

#product .product-block h4 {
  margin-bottom: 20px;
}

/* environment Section
--------------------------------*/

#environment {
  width: 100%;
  height: 100vh;
  font-family: "微軟正黑體";
  background: linear-gradient(
    rgba(0,0,0,0.3),
    rgba(0,0,0,0.3)
  ),
  url(/userUpload/images/10512106/environment.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  background-attachment: fixed;
  background-size: cover;
  
}

@media (max-width: 992px) {

#environment {
height: 100%;}
}
.owl-dot.active > span {
  height: 10px !important;
  width: 10px !important;
}

.owl-theme .owl-dots .owl-dot span {
  height: 10px !important;
  width: 10px !important;
}

.owl-item img {
  cursor: pointer;
}

.owl-stage-outer {
  margin-bottom: 30px;
}

.owl-theme .owl-nav {
  display: none;
  margin-top: 10px;
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
  background: #71c55d;
}

.owl-theme .owl-dots .owl-dot span {
  background: #ddd;
}

.img-fluid {
  height: 100%;
  margin-bottom: 30px;
  width: 100%;
}

/************button***************/
button{
  color:black;
  border: 1px solid #338023;
  font-size: 25px;
  border-radius: 4px;
  transition: .6s;
  overflow: hidden;
}
button:focus{
  outline: none;

}

button::before{
  content: '';
  display: block;
  position: absolute;
  background: rgba(255,255, 255, 0.5);
  width: 30px;
  height: 100%;
  left: 0;
  top: 0;
  opacity: .5s;
  filter:blur(45px);
  text-decoration: none;
  
}

button::after{
  content: '';
  display: block;
  position: absolute;
  background: rgba(255, 255, 255, .2);
  width:30px;
  height: 100%;
  left:30px;
  top:0;
  opacity: 0;
  filter: blur(45px);
  text-decoration: none;
 
}

button:hover{
  background:#338033;
  cursor: pointer;
  text-decoration: none;
  
}

button:hover:before{
  transform: translateX(300px) skewX(-15deg);
  opacity:.6 ;
  transition: .7s;
  text-decoration: none;
}

/*************************************/
.col-md-12{
  padding-right: 0px;
  padding-left: 0px;
}
.row {
    margin-right: 0px;
    margin-left: 0px;
}

  </style>
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="http://www.lohasplus.com.tw/index.php?Act=925">芳林芭樂</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#myPage">回首頁</a></li>
        <li><a href="#about">關於我們</a></li>
        <li><a href="#product">產品介紹</a></li>
        <li><a href="#environment">芳林生態</a></li>
        <li><a href="#contact">聯絡我們</a></li>
      </ul>
    </div>
  </div>
</nav>

  <!--==========================
    intro Section
  ============================-->
  <section id="intro" class="wow fadeIn">
      <div class="intro-container">
         
        <a href="#about" class="btn-get-started scrollto">點我向下</a>
      </div>
    </section><!-- #hero -->



<!--==========================
    About Us Section
  ============================-->
<div id="about" class="container text-center">
    <br> <br> <br>
    <h2 data-aos="zoom-in">WELCOME</h2>
    <div class="about-content">
  <p class="separator" data-aos="zoom-in">

    一生懸命，自慢的芭樂—芳林<br>

    芳林․芭樂莊園所生產的芭樂，以對土地較友善的種植方式，<br>
    
    嚴謹的管理及記錄生產過程，並讓它以最自然的方式自然生長，<br>
    
    讓它擁有該有的原始風味，就像種給自己家人吃一樣，<br>
    
    希望您也可以透過芳林，安心與健康的食用，這就是芳林給您最好的祝福。<br>
     
</p>
</div>
<br> <br> <br>
</div>

<!--==========================
  product Section
  ============================-->

  <section id="product" class="padd-section text-center wow fadeInUp">
      <br> <br> <br>
    <div class="container">
      <div class="section-title text-center">
        <h2>芭樂展現浪漫原味</h2>
        <br>
        <p class="separator">“我的芭樂自然熟成，八、九分熟最好吃！”</p>
      </div>
    </div>
    <br>
    <div class="container">
      <div class="row">

        <div class="col-md-6 col-lg-4" data-aos="fade-right">
          <div class="product-block">
            <img src="/userUpload/images/10512106/guava1.png" alt="img" class="img-fluid" >
            <h4>芭樂</h4>
            <button type="button"><a href="http://www.lohasplus.com.tw/index.php?Act=925&SK=979&MK=925&PK=935">read more</a></button>
          </div>
        </div>

        <div class="col-md-6 col-lg-4" data-aos="zoom-in">
          <div class="product-block">
            <img src="/userUpload/images/10512106/guava2.png" alt="img" class="img-fluid" >
            <h4>禮盒</h4>
            <button type="button"><a href="http://www.lohasplus.com.tw/index.php?Act=925&SK=978&MK=925&PK=935">read more</a></button>
          </div>
        </div>

        <div class="col-md-6 col-lg-4" data-aos="fade-left">
          <div class="product-block">
            <img src="/userUpload/images/10512106/guava3.png" alt="img" class="img-fluid" >
            <h4>超大禮盒</h4>
            <button type="button"><a href="http://www.lohasplus.com.tw/index.php?Act=925&SK=981&MK=925&PK=935">read more</a></button>
          </div>
        </div>
      </div>
    </div>

    <br> <br> <br>
  </section>

  <!--==========================
   environment Section
  ============================-->
  <section id="environment" class="padd-section text-center wow fadeInUp">
      <br> <br> <br>
    <div class="container">
      <div class="section-title text-center">
        <h2>芳林生態</h2>
        <br>
        <p class="separator"> 大地的滋潤，讓芭樂香甜美味</p>
      </div>
    </div>
    <br>
    <div class="container">
      <div class="owl-carousel owl-theme">

        <div><img src="/userUpload/images/10512106/%E8%8D%89%E7%94%9F%E6%A0%BD%E5%9F%B9.png" alt="img"></div>
        <div><img src="/userUpload/images/10512106/%E9%99%A4%E8%8D%89%E5%B0%8F%E9%B4%A8.png" alt="img"></div>
        <div><img src="/userUpload/images/10512106/%E8%8A%AD%E6%A8%82%E5%9C%922.png" alt="img"></div>
        <div><img src="/userUpload/images/10512106/%E5%B2%A1%E5%B1%B1%E8%B6%85%E5%B3%B0%E5%AF%BA.png" alt="img"></div>

      </div>
    </div>
    <br> <br> <br> <br>
  </section>
  

<!--==========================
    Contact Section
  ============================-->
  <section id="contact" class="padd-section wow fadeInUp">
    <br>   <br>   <br>
    <div class="container">
      <div class="section-title text-center">
        <h2>聯絡我們</h2>
        <br>
        <p class="separator">聯絡資訊</p>
        <br> <br>
      </div>
    </div>

    <div class="container">
      <div class="row justify-content-center">

        <div class="col-lg-6 col-md-4" data-aos="zoom-in">

          <div class="info">
              <div>
                  <i class="fa fa-user" ></i>
                  <p>鄭宗林</p>
                </div>

                <div>
                    <i class="fa fa-mobile" ></i>
                    <p>0910-326-822</p>
                  </div>
                  <div>
                      <i class="fab fa-line"></i>
                      <p>kenny335a</p>
                    </div>

            <div>
              <i class="fa fa-map-marker"> </i>
              <p>820高雄市岡山區嘉峰路600巷高鐵 橋下</p>
            </div>

            <div class="email">
              <i class="fa fa-envelope"></i>
              <p>kenny335a@
                  yahoo.com.tw</p>
            </div>

            <div>
              <i class="fa fa-phone"></i>
              <p>07-371-2376</p>
            </div>
            <div>
                <i class="fa fa-car"></i>
                <p>可前往岡山火車站轉乘計程車($200)或由農場主人接送</p>
              </div>


          </div>

         

          <div class="social-links">
            <a href="#" class="twitter"><i class="fab fa-twitter"></i></a>&nbsp;&nbsp;
            <a href="#" class="facebook"><i class="fab fa-facebook-f"></i></a>&nbsp;&nbsp;
            <a href="#" class="instagram"><i class="fab fa-instagram"></i></a>&nbsp;&nbsp;
            <a href="#" class="google-plus"><i class="fab fa-google-plus-g"></i></a>&nbsp;&nbsp;
            <a href="#" class="linkedin"><i class="fab fa-linkedin-in"></i></a>
          </div>

        </div>

        <div class="col-lg-6 col-md-8">
          <div class="iframe-rwd">
            <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d7354.3677329882885!2d120.316526!3d22.832686!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x51e50555d5e38def!2z6Iqz5p6X6Iqt5qiC5p6c5ZyS!5e0!3m2!1szh-TW!2stw!4v1554895992005!5m2!1szh-TW!2stw" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
          </div>
          </div>
      </div>
    </div>
  
  </section><!-- #contact -->

<!-- Footer -->
<footer class="text-center">
  <a class="up-arrow" href="#myPage" data-toggle="tooltip" title="TO TOP">
    <span class="glyphicon glyphicon-chevron-up"></span>
  </a><br> 
</footer>

<script>
$(document).ready(function(){
  // Initialize Tooltip
  $('[data-toggle="tooltip"]').tooltip(); 
  
  // Add smooth scrolling to all links in navbar + footer link
  $(".navbar a, footer a[href='#myPage']").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {

      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 900, function(){
   
        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
})
</script>

<!-- JavaScript Libraries -->


<script src="https://briancherne.github.io/jquery-hoverIntent/jquery.hoverIntent.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/superfish/1.7.10/js/superfish.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script>
/**
 * Modules in this bundle
 * @license
 *
 * modal-video:
 *   license: appleple
 *   author: appleple
 *   homepage: http://developer.a-blogcms.jp
 *   version: 2.4.1
 *
 * custom-event-polyfill:
 *   license: MIT (http://opensource.org/licenses/MIT)
 *   maintainers: krambuhl <evan.krambuhl@gmail.com>
 *   contributors: Frank Panetta, Mikhail Reenko <reenko@yandex.ru>, Joscha Feth <joscha@feth.com>
 *   homepage: https://github.com/krambuhl/custom-event-polyfill#readme
 *   version: 0.3.0
 *
 * es6-object-assign:
 *   license: MIT (http://opensource.org/licenses/MIT)
 *   author: Rubén Norte <rubennorte@gmail.com>
 *   homepage: https://github.com/rubennorte/es6-object-assign
 *   version: 1.1.0
 *
 * This header is generated by licensify (https://github.com/twada/licensify)
 */
 (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.ModalVideo = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
// Polyfill for creating CustomEvents on IE9/10/11

// code pulled from:
// https://github.com/d4tocchini/customevent-polyfill
// https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent#Polyfill

try {
    var ce = new window.CustomEvent('test');
    ce.preventDefault();
    if (ce.defaultPrevented !== true) {
        // IE has problems with .preventDefault() on custom events
        // http://stackoverflow.com/questions/23349191
        throw new Error('Could not prevent default');
    }
} catch(e) {
  var CustomEvent = function(event, params) {
    var evt, origPrevent;
    params = params || {
      bubbles: false,
      cancelable: false,
      detail: undefined
    };

    evt = document.createEvent("CustomEvent");
    evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
    origPrevent = evt.preventDefault;
    evt.preventDefault = function () {
      origPrevent.call(this);
      try {
        Object.defineProperty(this, 'defaultPrevented', {
          get: function () {
            return true;
          }
        });
      } catch(e) {
        this.defaultPrevented = true;
      }
    };
    return evt;
  };

  CustomEvent.prototype = window.Event.prototype;
  window.CustomEvent = CustomEvent; // expose definition to window
}

},{}],2:[function(require,module,exports){
/**
 * Code refactored from Mozilla Developer Network:
 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
 */

'use strict';

function assign(target, firstSource) {
  if (target === undefined || target === null) {
    throw new TypeError('Cannot convert first argument to object');
  }

  var to = Object(target);
  for (var i = 1; i < arguments.length; i++) {
    var nextSource = arguments[i];
    if (nextSource === undefined || nextSource === null) {
      continue;
    }

    var keysArray = Object.keys(Object(nextSource));
    for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
      var nextKey = keysArray[nextIndex];
      var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
      if (desc !== undefined && desc.enumerable) {
        to[nextKey] = nextSource[nextKey];
      }
    }
  }
  return to;
}

function polyfill() {
  if (!Object.assign) {
    Object.defineProperty(Object, 'assign', {
      enumerable: false,
      configurable: true,
      writable: true,
      value: assign
    });
  }
}

module.exports = {
  assign: assign,
  polyfill: polyfill
};

},{}],3:[function(require,module,exports){
'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

require('custom-event-polyfill');

var _util = require('../lib/util');

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var assign = require('es6-object-assign').assign;

var defaults = {
  channel: 'youtube',
  facebook: {},
  youtube: {
    autoplay: 1,
    cc_load_policy: 1,
    color: null,
    controls: 1,
    disablekb: 0,
    enablejsapi: 0,
    end: null,
    fs: 1,
    h1: null,
    iv_load_policy: 1,
    list: null,
    listType: null,
    loop: 0,
    modestbranding: null,
    origin: null,
    playlist: null,
    playsinline: null,
    rel: 0,
    showinfo: 1,
    start: 0,
    wmode: 'transparent',
    theme: 'dark',
    nocookie: false
  },
  ratio: '16:9',
  vimeo: {
    api: false,
    autopause: true,
    autoplay: true,
    byline: true,
    callback: null,
    color: null,
    height: null,
    loop: false,
    maxheight: null,
    maxwidth: null,
    player_id: null,
    portrait: true,
    title: true,
    width: null,
    xhtml: false
  },
  allowFullScreen: true,
  animationSpeed: 300,
  classNames: {
    modalVideo: 'modal-video',
    modalVideoClose: 'modal-video-close',
    modalVideoBody: 'modal-video-body',
    modalVideoInner: 'modal-video-inner',
    modalVideoIframeWrap: 'modal-video-movie-wrap',
    modalVideoCloseBtn: 'modal-video-close-btn'
  },
  aria: {
    openMessage: 'You just openned the modal video',
    dismissBtnMessage: 'Close the modal by clicking here'
  }
};

var ModalVideo = function () {
  function ModalVideo(ele, option) {
    var _this = this;

    _classCallCheck(this, ModalVideo);

    var opt = assign({}, defaults, option);
    var selectors = typeof ele === 'string' ? document.querySelectorAll(ele) : ele;
    var body = document.querySelector('body');
    var classNames = opt.classNames;
    var speed = opt.animationSpeed;
    [].forEach.call(selectors, function (selector) {
      selector.addEventListener('click', function (event) {
        if (selector.tagName === 'A') {
          event.preventDefault();
        }
        var videoId = selector.dataset.videoId;
        var channel = selector.dataset.channel || opt.channel;
        var id = (0, _util.getUniqId)();
        var videoUrl = selector.dataset.videoUrl || _this.getVideoUrl(opt, channel, videoId);
        var html = _this.getHtml(opt, videoUrl, id);
        (0, _util.append)(body, html);
        var modal = document.getElementById(id);
        var btn = modal.querySelector('.js-modal-video-dismiss-btn');
        modal.focus();
        modal.addEventListener('click', function () {
          (0, _util.addClass)(modal, classNames.modalVideoClose);
          setTimeout(function () {
            (0, _util.remove)(modal);
            selector.focus();
          }, speed);
        });
        modal.addEventListener('keydown', function (e) {
          if (e.which === 9) {
            e.preventDefault();
            if (document.activeElement === modal) {
              btn.focus();
            } else {
              modal.setAttribute('aria-label', '');
              modal.focus();
            }
          }
        });
        btn.addEventListener('click', function () {
          (0, _util.triggerEvent)(modal, 'click');
        });
      });
    });
  }

  _createClass(ModalVideo, [{
    key: 'getPadding',
    value: function getPadding(ratio) {
      var arr = ratio.split(':');
      var width = Number(arr[0]);
      var height = Number(arr[1]);
      var padding = height * 100 / width;
      return padding + '%';
    }
  }, {
    key: 'getQueryString',
    value: function getQueryString(obj) {
      var url = '';
      Object.keys(obj).forEach(function (key) {
        url += key + '=' + obj[key] + '&';
      });
      return url.substr(0, url.length - 1);
    }
  }, {
    key: 'getVideoUrl',
    value: function getVideoUrl(opt, channel, videoId) {
      if (channel === 'youtube') {
        return this.getYoutubeUrl(opt.youtube, videoId);
      } else if (channel === 'vimeo') {
        return this.getVimeoUrl(opt.vimeo, videoId);
      } else if (channel === 'facebook') {
        return this.getFacebookUrl(opt.facebook, videoId);
      }
      return '';
    }
  }, {
    key: 'getVimeoUrl',
    value: function getVimeoUrl(vimeo, videoId) {
      var query = this.getQueryString(vimeo);
      return '//player.vimeo.com/video/' + videoId + '?' + query;
    }
  }, {
    key: 'getYoutubeUrl',
    value: function getYoutubeUrl(youtube, videoId) {
      var query = this.getQueryString(youtube);
      if (youtube.nocookie === true) {
        return '//www.youtube-nocookie.com/embed/' + videoId + '?' + query;
      }

      return '//www.youtube.com/embed/' + videoId + '?' + query;
    }
  }, {
    key: 'getFacebookUrl',
    value: function getFacebookUrl(facebook, videoId) {
      return '//www.facebook.com/v2.10/plugins/video.php?href=https://www.facebook.com/facebook/videos/' + videoId + '&' + this.getQueryString(facebook);
    }
  }, {
    key: 'getHtml',
    value: function getHtml(opt, videoUrl, id) {
      var padding = this.getPadding(opt.ratio);
      var classNames = opt.classNames;
      return '\n      <div class="' + classNames.modalVideo + '" tabindex="-1" role="dialog" aria-label="' + opt.aria.openMessage + '" id="' + id + '">\n        <div class="' + classNames.modalVideoBody + '">\n          <div class="' + classNames.modalVideoInner + '">\n            <div class="' + classNames.modalVideoIframeWrap + '" style="padding-bottom:' + padding + '">\n              <button class="' + classNames.modalVideoCloseBtn + ' js-modal-video-dismiss-btn" aria-label="' + opt.aria.dismissBtnMessage + '"></button>\n              <iframe width=\'460\' height=\'230\' src="' + videoUrl + '" frameborder=\'0\' allowfullscreen=' + opt.allowFullScreen + ' tabindex="-1"/>\n            </div>\n          </div>\n        </div>\n      </div>\n    ';
    }
  }]);

  return ModalVideo;
}();

exports.default = ModalVideo;
module.exports = exports['default'];

},{"../lib/util":5,"custom-event-polyfill":1,"es6-object-assign":2}],4:[function(require,module,exports){
'use strict';

module.exports = require('./core/');

},{"./core/":3}],5:[function(require,module,exports){
'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
var append = exports.append = function append(element, string) {
  var div = document.createElement('div');
  div.innerHTML = string;
  while (div.children.length > 0) {
    element.appendChild(div.children[0]);
  }
};

var getUniqId = exports.getUniqId = function getUniqId() {
  return (Date.now().toString(36) + Math.random().toString(36).substr(2, 5)).toUpperCase();
};

var remove = exports.remove = function remove(element) {
  if (element && element.parentNode) {
    element.parentNode.removeChild(element);
  }
};

var addClass = exports.addClass = function addClass(element, className) {
  if (element.classList) {
    element.classList.add(className);
  } else {
    element.className += ' ' + className;
  }
};

var triggerEvent = exports.triggerEvent = function triggerEvent(el, eventName, options) {
  var event = void 0;
  if (window.CustomEvent) {
    event = new CustomEvent(eventName, { cancelable: true });
  } else {
    event = document.createEvent('CustomEvent');
    event.initCustomEvent(eventName, false, false, options);
  }
  el.dispatchEvent(event);
};

},{}]},{},[4])(4)
});

</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<!-- Contact Form JavaScript File -->
<script>
    jQuery(document).ready(function($) {
  "use strict";

  //Contact
  $('form.contactForm').submit(function() {
    var f = $(this).find('.form-group'),
      ferror = false,
      emailExp = /^[^\s()<>@,;:\/]+@\w[\w\.-]+\.[a-z]{2,}$/i;

    f.children('input').each(function() { // run all inputs

      var i = $(this); // current input
      var rule = i.attr('data-rule');

      if (rule !== undefined) {
        var ierror = false; // error flag for current input
        var pos = rule.indexOf(':', 0);
        if (pos >= 0) {
          var exp = rule.substr(pos + 1, rule.length);
          rule = rule.substr(0, pos);
        } else {
          rule = rule.substr(pos + 1, rule.length);
        }

        switch (rule) {
          case 'required':
            if (i.val() === '') {
              ferror = ierror = true;
            }
            break;

          case 'minlen':
            if (i.val().length < parseInt(exp)) {
              ferror = ierror = true;
            }
            break;

          case 'email':
            if (!emailExp.test(i.val())) {
              ferror = ierror = true;
            }
            break;

          case 'checked':
            if (! i.is(':checked')) {
              ferror = ierror = true;
            }
            break;

          case 'regexp':
            exp = new RegExp(exp);
            if (!exp.test(i.val())) {
              ferror = ierror = true;
            }
            break;
        }
        i.next('.validation').html((ierror ? (i.attr('data-msg') !== undefined ? i.attr('data-msg') : 'wrong Input') : '')).show('blind');
      }
    });
    f.children('textarea').each(function() { // run all inputs

      var i = $(this); // current input
      var rule = i.attr('data-rule');

      if (rule !== undefined) {
        var ierror = false; // error flag for current input
        var pos = rule.indexOf(':', 0);
        if (pos >= 0) {
          var exp = rule.substr(pos + 1, rule.length);
          rule = rule.substr(0, pos);
        } else {
          rule = rule.substr(pos + 1, rule.length);
        }

        switch (rule) {
          case 'required':
            if (i.val() === '') {
              ferror = ierror = true;
            }
            break;

          case 'minlen':
            if (i.val().length < parseInt(exp)) {
              ferror = ierror = true;
            }
            break;
        }
        i.next('.validation').html((ierror ? (i.attr('data-msg') != undefined ? i.attr('data-msg') : 'wrong Input') : '')).show('blind');
      }
    });
    if (ferror) return false;
    else var str = $(this).serialize();
    var action = $(this).attr('action');
    if( ! action ) {
      action = 'contactform/contactform.php';
    }
    $.ajax({
      type: "POST",
      url: action,
      data: str,
      success: function(msg) {
        // alert(msg);
        if (msg == 'OK') {
          $("#sendmessage").addClass("show");
          $("#errormessage").removeClass("show");
          $('.contactForm').find("input, textarea").val("");
        } else {
          $("#sendmessage").removeClass("show");
          $("#errormessage").addClass("show");
          $('#errormessage').html(msg);
        }

      }
    });
    return false;
  });

});
  
  
</script>

<!-- Template Main Javascript File -->
<script>
jQuery(document).ready(function( $ ) {

$(window).scroll(function () {
  var height = $(window).height();
  var scroll = $(window).scrollTop();
  if (scroll) {
    $(".header-hide").addClass("scroll-header");
  } else {
    $(".header-hide").removeClass("scroll-header");
  }

});

// Back to top button
$(window).scroll(function() {
  if ($(this).scrollTop() > 100) {
    $('.back-to-top').fadeIn('slow');
  } else {
    $('.back-to-top').fadeOut('slow');
  }
});
$('.back-to-top').click(function(){
  $('html, body').animate({scrollTop : 0},1500, 'easeInOutExpo');
  return false;
});

// Initiate the wowjs animation library
new WOW().init();

// Initiate superfish on nav menu
$('.nav-menu').superfish({
  animation: {
    opacity: 'show'
  },
  speed: 400
});

// Mobile Navigation
if ($('#nav-menu-container').length) {
  var $mobile_nav = $('#nav-menu-container').clone().prop({
    id: 'mobile-nav'
  });
  $mobile_nav.find('> ul').attr({
    'class': '',
    'id': ''
  });
  $('body').append($mobile_nav);
  $('body').prepend('<button type="button" id="mobile-nav-toggle"><i class="fa fa-bars"></i></button>');
  $('body').append('<div id="mobile-body-overly"></div>');
  $('#mobile-nav').find('.menu-has-children').prepend('<i class="fa fa-chevron-down"></i>');

  $(document).on('click', '.menu-has-children i', function(e) {
    $(this).next().toggleClass('menu-item-active');
    $(this).nextAll('ul').eq(0).slideToggle();
    $(this).toggleClass("fa-chevron-up fa-chevron-down");
  });

  $(document).on('click', '#mobile-nav-toggle', function(e) {
    $('body').toggleClass('mobile-nav-active');
    $('#mobile-nav-toggle i').toggleClass('fa-times fa-bars');
    $('#mobile-body-overly').toggle();
  });

  $(document).click(function(e) {
    var container = $("#mobile-nav, #mobile-nav-toggle");
    if (!container.is(e.target) && container.has(e.target).length === 0) {
      if ($('body').hasClass('mobile-nav-active')) {
        $('body').removeClass('mobile-nav-active');
        $('#mobile-nav-toggle i').toggleClass('fa-times fa-bars');
        $('#mobile-body-overly').fadeOut();
      }
    }
  });
} else if ($("#mobile-nav, #mobile-nav-toggle").length) {
  $("#mobile-nav, #mobile-nav-toggle").hide();
}

// Smooth scroll for the menu and links with .scrollto classes
$('.nav-menu a, #mobile-nav a, .scrollto').on('click', function() {
  if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
    var target = $(this.hash);
    if (target.length) {
      var top_space = 0;

      if ($('#header').length) {
        top_space = $('#header').outerHeight();

        if( ! $('#header').hasClass('header-fixed') ) {
          top_space = top_space - 20;
        }
      }

      $('html, body').animate({
        scrollTop: target.offset().top - top_space
      }, 1500, 'easeInOutExpo');

      if ($(this).parents('.nav-menu').length) {
        $('.nav-menu .menu-active').removeClass('menu-active');
        $(this).closest('li').addClass('menu-active');
      }

      if ($('body').hasClass('mobile-nav-active')) {
        $('body').removeClass('mobile-nav-active');
        $('#mobile-nav-toggle i').toggleClass('fa-times fa-bars');
        $('#mobile-body-overly').fadeOut();
      }
      return false;
    }
  }
});

// Modal video
new ModalVideo('.js-modal-btn', {channel: 'youtube'});

// Init Owl Carousel
$('.owl-carousel').owlCarousel({
  items: 4,
  autoplay: true,
  loop: true,
  margin: 30,
  dots: true,
  responsiveClass: true,
  responsive: {

    320: { items: 1},
    480: { items: 2},
    600: { items: 2},
    767: { items: 3},
    768: { items: 3},
    992: { items: 4}
  }
});

// custom code

});

</script>
<script>
        AOS.init({
  duration: 1000,
})
      </script>

</html>
