<!-- ========== HEADER ========== -->
<header id="header" class="header left-aligned-navbar header-bg-transparent header-white-nav-links-xl header-abs-top"
data-hs-header-options='{
"fixMoment": 1000,
"fixEffect": "slide"
}'>
<div class="header-section pt-3d">
<div id="logoAndNav" class="container-fluid px-md-5">
<!-- Nav -->
<nav class="js-mega-menu navbar navbar-expand-xl py-0 position-static justify-content-start align-items-center align-items-xl-start">
<!-- Responsive Toggle Button -->
<button type="button" class="navbar-toggler btn btn-icon btn-sm rounded-circle mr-2"
aria-label="Toggle navigation"
aria-expanded="false"
aria-controls="navBar"
data-toggle="collapse"
data-target="#navBar">
<span class="navbar-toggler-default">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M17.4,6.2H0.6C0.3,6.2,0,5.9,0,5.5V4.1c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,5.9,17.7,6.2,17.4,6.2z M17.4,14.1H0.6c-0.3,0-0.6-0.3-0.6-0.7V12c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,13.7,17.7,14.1,17.4,14.1z"/>
</svg>
</span>
<span class="navbar-toggler-toggled">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
</svg>
</span>
</button>
<!-- End Responsive Toggle Button -->
<!-- Unfold (Sidebar) -->
<div class="hs-unfold d-none d-xl-block">
<a class="js-hs-unfold-invoker mt-3 d-block mr-4" href="javascript:;"
data-hs-unfold-options='{
"target": "#sidebarContent",
"type": "css-animation",
"animationIn": "fadeInLeft",
"animationOut": "fadeOutLeft",
"hasOverlay": "rgba(55, 125, 255, 0.1)",
"smartPositionOff": true
}'><svg xmlns="http://www.w3.org/2000/svg" width="16" height="13" style="fill: #97979f;"><path d="M0 13L0 11.4 16 11.4 16 13 0 13ZM0 5.7L16 5.7 16 7.3 0 7.3 0 5.7ZM0 0L16 0 16 1.6 0 1.6 0 0Z"></path></svg>
</a>
</div>
<!-- End Unfold (Sidebar) -->
<!-- Logo -->
<a class="navbar-brand w-auto mr-xl-5 mr-wd-8 py-0" href="../home/index.html" aria-label="Vodi">
<svg version="1.1" width="103" height="40px" style="fill: #fff;">
<g>
<path class="vodi-svg0" d="M72.8,12.7c0-2.7,0-1.8,0-4.4c0-0.9,0-1.8,0-2.8C73,3,74.7,1.4,77,1.4c2.3,0,4.1,1.8,4.2,4.2c0,1,0,2.1,0,3.1
c0,6.5,0,9.4,0,15.9c0,4.7-1.7,8.8-5.6,11.5c-4.5,3.1-9.3,3.5-14.1,0.9c-4.7-2.5-7.1-6.7-7-12.1c0.1-7.8,6.3-13.6,14.1-13.2
c0.7,0,1.4,0.2,2.1,0.3C71.3,12.2,72,12.4,72.8,12.7z M67.8,19.8c-2.9,0-5.2,2.2-5.2,5c0,2.9,2.3,5.3,5.2,5.3
c2.8,0,5.2-2.4,5.2-5.2C73,22.2,70.6,19.8,67.8,19.8z
M39.9,38.6c-7.3,0-13.3-6.1-13.3-13.5c0-7.5,5.9-13.4,13.4-13.4c7.5,0,13.4,6,13.4,13.5
C53.4,32.6,47.4,38.6,39.9,38.6z M39.9,30.6c3.2,0,5.6-2.3,5.6-5.6c0-3.2-2.3-5.5-5.5-5.5c-3.2,0-5.6,2.2-5.6,5.4
C34.4,28.2,36.7,30.6,39.9,30.6z
M14.6,27c0.6-1.4,1.1-2.6,1.6-3.8c1.2-2.9,2.5-5.8,3.7-8.8c0.7-1.7,2-2.8,4-2.7c3,0,4.9,2.6,3.8,5.4
c-0.5,1.3-1.2,2.6-1.8,3.9c-2.4,5-4.9,10-7.3,15c-0.8,1.6-2,2.6-3.9,2.6c-2,0-3.3-0.8-4.2-2.6c-2.7-5.6-5.3-11.1-8-16.7
c-0.3-0.7-0.6-1.3-0.9-2c-0.8-1.8-0.3-3.7,1.1-4.8c1.5-1.2,4-1.3,5.3,0c0.7,0.6,1.2,1.5,1.6,2.3C11.3,18.8,12.9,22.7,14.6,27z
M90.9,25.1c0,3.1,0,6.2,0,9.4c0,1.9-1.2,3.4-2.9,4c-1.7,0.5-3.5,0-4.5-1.6c-0.5-0.8-0.8-1.8-0.8-2.6
c-0.1-6.1-0.1-11.3,0-17.5c0-2.2,1.5-3.9,3.5-4.2c2.1-0.3,4.1,0.9,4.7,2.9c0.1,0.5,0.2,1.1,0.2,1.6C90.9,20,90.9,22.1,90.9,25.1
C90.9,25.1,90.9,25.1,90.9,25.1z
M90.2,4.7L86,2.3c-1.3-0.8-3,0.2-3,1.7v4.8c0,1.5,1.7,2.5,3,1.7l4.2-2.4C91.5,7.4,91.5,5.5,90.2,4.7z"></path>
</g>
</svg>
</a>
<!-- End Logo -->
<!-- End Responsive Toggle Button -->
<div class="flex-grow-1 order-1 order-xl-0 w-100 w-xl-auto">
<form class="d-none d-xl-block">
<label class="sr-only" for="searchproduct">Search</label>
<div class="input-group">
<input type="email" class="search-form-control form-control py-2 pl-4 min-width-250 rounded-pill shadow-none border-0" name="email" id="searchproduct-item" placeholder="Search..." aria-label="Search..." aria-describedby="searchProduct1" required="">
<div class="input-group-append position-absolute top-0 bottom-0 right-0 z-index-4">
<button class="d-flex py-2 px-3 border-0 bg-transparent align-items-center" type="button" id="searchProduct1">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
<path d="M7 0C11-0.1 13.4 2.1 14.6 4.9 15.5 7.1 14.9 9.8 13.9 11.4 13.7 11.7 13.6 12 13.3 12.2 13.4 12.5 14.2 13.1 14.4 13.4 15.4 14.3 16.3 15.2 17.2 16.1 17.5 16.4 18.2 16.9 18 17.5 17.9 17.6 17.9 17.7 17.8 17.8 17.2 18.3 16.7 17.8 16.4 17.4 15.4 16.4 14.3 15.4 13.3 14.3 13 14.1 12.8 13.8 12.5 13.6 12.4 13.5 12.3 13.3 12.2 13.3 12 13.4 11.5 13.8 11.3 14 10.7 14.4 9.9 14.6 9.2 14.8 8.9 14.9 8.6 14.9 8.3 14.9 8 15 7.4 15.1 7.1 15 6.3 14.8 5.6 14.8 4.9 14.5 2.7 13.6 1.1 12.1 0.4 9.7 0 8.7-0.2 7.1 0.2 6 0.3 5.3 0.5 4.6 0.9 4 1.8 2.4 3 1.3 4.7 0.5 5.2 0.3 5.7 0.2 6.3 0.1 6.5 0 6.8 0.1 7 0ZM7.3 1.5C7.1 1.6 6.8 1.5 6.7 1.5 6.2 1.6 5.8 1.7 5.4 1.9 3.7 2.5 2.6 3.7 1.9 5.4 1.7 5.8 1.7 6.2 1.6 6.6 1.4 7.4 1.6 8.5 1.8 9.1 2.4 11.1 3.5 12.3 5.3 13 5.9 13.3 6.6 13.5 7.5 13.5 7.7 13.5 7.9 13.5 8.1 13.5 8.6 13.4 9.1 13.3 9.6 13.1 11.2 12.5 12.4 11.4 13.1 9.8 13.6 8.5 13.6 6.6 13.1 5.3 12.2 3.1 10.4 1.5 7.3 1.5Z"></path>
</svg>
</button>
</div>
</div>
</form>
<!-- Navigation -->
<div id="navBar" class="collapse navbar-collapse">
<div class="navbar-body header-abs-top-inner">
<ul class="navbar-nav bg-white-d-lg py-2 px-3 p-xl-0">
<!-- Home -->
<li class="hs-has-mega-menu navbar-nav-item">
<a id="homeMegaMenu" class="hs-mega-menu-invoker py-xl-3 nav-link nav-link-toggle font-secondary" href="javascript:;" aria-haspopup="true" aria-expanded="false">Home</a>
<!-- Home - Mega Menu -->
<div class="hs-mega-menu dropdown-menu w-100" aria-labelledby="homeMegaMenu">
<div class="container px-4 px-md-5 space-1">
<div class="row row-cols-xl-5 text-md-center">
<div class="col-md-6 col-lg-3 col-xl border-right border-w-lg-d-0">
<a href="../home/index.html" class="h-g1-primary d-block mb-4">
<img class="d-none d-md-block img-fluid mb-3 rounded-sm shadow-2" src="../../assets/img/260x260/img1.jpg" alt="Image Description">
<div class="h-g1-primary font-size-13 font-weight-bold">Home v1</div>
</a>
</div>
<div class="col-md-6 col-lg-3 col-xl border-right border-w-lg-d-0">
<a href="../home/home-v2.html" class="h-g1-primary d-block mb-4">
<img class="d-none d-md-block img-fluid mb-3 rounded-sm shadow-2" src="../../assets/img/260x260/img2.jpg" alt="Image Description">
<div class="h-g1-primary font-size-13 font-weight-bold">Home v2</div>
</a>
</div>
<div class="col-md-6 col-lg-3 col-xl border-right border-w-lg-d-0">
<a href="../home/home-v3.html" class="h-g1-primary d-block mb-4">
<img class="d-none d-md-block img-fluid mb-3 rounded-sm shadow-2" src="../../assets/img/260x260/img3.jpg" alt="Image Description">
<div class="h-g1-primary font-size-13 font-weight-bold">Home v3</div>
</a>
</div>
<div class="col-md-6 col-lg-3 col-xl border-right border-w-lg-d-0">
<a href="../home/home-v4.html" class="h-g1-primary d-block mb-4">
<img class="d-none d-md-block img-fluid mb-3 rounded-sm shadow-2" src="../../assets/img/260x260/img4.jpg" alt="Image Description">
<div class="h-g1-primary font-size-13 font-weight-bold">Home v4</div>
</a>
</div>
<div class="col-md-6 col-lg-3 col-xl">
<a href="../home/home-v5.html" class="h-g1-primary d-block mb-4">
<img class="d-none d-md-block img-fluid mb-3 rounded-sm shadow-2" src="../../assets/img/260x260/img5.jpg" alt="Image Description">
<div class="h-g1-primary font-size-13 font-weight-bold">Home v5</div>
</a>
</div>
<div class="col-md-6 col-lg-3 col-xl border-right border-w-lg-d-0">
<a href="../home/home-v6.html" class="h-g1-primary d-block mb-4">
<img class="d-none d-md-block img-fluid mb-3 rounded-sm shadow-2" src="../../assets/img/260x260/img6.jpg" alt="Image Description">
<div class="h-g1-primary font-size-13 font-weight-bold">
Vodi Prime
<div>Home v6 ( Light )</div>
</div>
</a>
</div>
<div class="col-md-6 col-lg-3 col-xl border-right border-w-lg-d-0">
<a href="../home/home-v7.html" class="h-g1-primary d-block mb-4">
<img class="d-none d-md-block img-fluid mb-3 rounded-sm shadow-2" src="../../assets/img/260x260/img7.jpg" alt="Image Description">
<div class="h-g1-primary font-size-13 font-weight-bold">
Vodi Prime
<div>Home v7 ( Dark )</div>
</div>
</a>
</div>
<div class="col-md-6 col-lg-3 col-xl border-right border-w-lg-d-0">
<a href="../home/home-v8.html" class="h-g1-primary d-block mb-4">
<img class="d-none d-md-block img-fluid mb-3 rounded-sm shadow-2" src="../../assets/img/260x260/img8.jpg" alt="Image Description">
<div class="h-g1-primary font-size-13 font-weight-bold">
Vodi Stream
<div>Home v8</div>
</div>
</a>
</div>
<div class="col-md-6 col-lg-3 col-xl border-right border-w-lg-d-0">
<a href="../home/home-v9.html" class="h-g1-primary d-block mb-4">
<img class="d-none d-md-block img-fluid mb-3 rounded-sm shadow-2" src="../../assets/img/260x260/img9.jpg" alt="Image Description">
<div class="h-g1-primary font-size-13 font-weight-bold">
Vodi Tube
<div>Home v9 ( Light )</div>
</div>
</a>
</div>
<div class="col-md-6 col-lg-3 col-xl">
<a href="../home/home-v10.html" class="h-g1-primary d-block mb-4">
<img class="d-none d-md-block img-fluid mb-3 rounded-sm shadow-2" src="../../assets/img/260x260/img10.jpg" alt="Image Description">
<div class="h-g1-primary font-size-13 font-weight-bold">
Vodi Tube
<div>Home v10 ( Dark )</div>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- End Home - Mega Menu -->
</li>
<!-- End Home -->
<!-- Pages -->
<li class="hs-has-sub-menu navbar-nav-item">
<a id="pagesMegaMenu" class="hs-mega-menu-invoker py-xl-3 nav-link nav-link-toggle font-secondary" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-labelledby="pagesSubMenu">Pages</a>
<!-- Pages - Submenu -->
<div id="pagesSubMenu" class="hs-sub-menu dropdown-menu mega-menu-sub-menu-lg" aria-labelledby="pagesMegaMenu">
<div class="px-4 px-md-6 pt-md-2 pb-4">
<div class="row row-cols-md-3 font-size-14">
<div class="col-md">
<div class="font-weight-bold line-height-xl">Archive Pages</div>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../archive/movies.html">Movies</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../archive/tv-shows.html">TV Shows</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../archive/videos.html">Videos</a>
<div class="font-weight-bold line-height-xl">Single Movies</div>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../single-movies/single-movies-v1.html">Movie v1</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../single-movies/single-movies-v2.html">Movie v2</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../single-movies/single-movies-v3.html">Movie v3</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../single-movies/single-movies-v4.html">Movie v4</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../single-movies/single-movies-v5.html">Movie v5</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../single-movies/single-movies-v6.html">Movie v6</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../single-movies/single-movies-v7.html">Movie v7</a>
</div>
<div class="col-md">
<div class="font-weight-bold line-height-xl">Single Videos</div>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../single-video/single-video-v1.html">Video v1</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../single-video/single-video-v2.html">Video v2</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../single-video/single-video-v3.html">Video v3</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../single-video/single-video-v4.html">Video v4</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../single-video/single-video-v5.html">Video v5</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../single-video/single-video-v6.html">Video v6</a>
<div class="font-weight-bold line-height-xl">Other Pages</div>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../other/landing-v1.html">Landing v1</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../other/landing-v2.html">Landing v2</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../other/coming-soon.html">Coming Soon</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../single-tv-show/single-tv-show.html">Single TV Show</a>
</div>
<div class="col-md">
<div class="font-weight-bold line-height-xl">Single Episodes</div>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../single-episodes/single-episodes-v1.html">Episode v1</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../single-episodes/single-episodes-v2.html">Episode v2</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../single-episodes/single-episodes-v3.html">Episode v3</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../single-episodes/single-episodes-v4.html">Episode v4</a>
<div class="font-weight-bold line-height-xl">Blog Pages</div>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../blog/blog.html">Blog</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../blog/blog-single.html">Single Blog</a>
<div class="font-weight-bold line-height-xl">Static Pages</div>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../static/contact.html">Contact Us</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../static/404.html">404</a>
</div>
</div>
</div>
</div>
<!-- End Submenu -->
</li>
<!-- End Pages -->
<!-- Movies -->
<li class="hs-has-mega-menu navbar-nav-item">
<a id="moviesMegaMenu" class="hs-mega-menu-invoker py-xl-3 nav-link nav-link-toggle font-secondary" href="javascript:;" aria-haspopup="true" aria-expanded="false">Movies</a>
<!-- Movies - Mega Menu -->
<div class="hs-mega-menu dropdown-menu w-100" aria-labelledby="moviesMegaMenu">
<div class="mega-menu-body">
<div class="container px-lg-5">
<div class="row row-cols-md-3 mx-lg-n5">
<div class="col-md px-lg-5 mb-4 mb-md-0 border-right">
<div class="font-size-14 text-dark font-weight-bold mb-3">
Movie of the Day
</div>
<div class="row mx-n2 product">
<div class="col-auto">
<div class="product-image mb-2">
<a href="../single-movies/single-movies-v1.html" class="d-inline-block position-relative stretched-link">
<img class="img-fluid" src="../../assets/img/174x260/img1.jpg" alt="Image Description">
</a>
</div>
</div>
<div class="col">
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1 mb-2d"><a href="../single-movies/single-movies-v1.html">The Big Sick</a></div>
<p class="text-gray-7100 font-size-13 line-clamp-5">Pakistan-born comedian Kumail Nanjiani and grad student Emily Gardner fall in love but struggle as their cultures clash. When Emily contracts a mysterious illness.</p>
<div class="d-flex">
<a href="../single-movies/single-movies-v1.html" class="font-size-14 font-secondary font-weight-bold mr-4">Watch Now</a>
<a href="../single-movies/single-movies-v1.html" class="font-size-14 font-secondary font-weight-bold h-g1-primary">+ Playlist</a>
</div>
</div>
</div>
</div>
<div class="col-md px-lg-5 mb-4 mb-md-0 border-right">
<div class="font-size-14 text-dark font-weight-bold mb-3">
Movies Genre
</div>
<ul class="column-count-2 v2 list-unstyled mb-0">
<li class="py-1">
<a class="h-b-primary py-1 font-size-14" href="../single-movies/single-movies-v2.html">Action</a>
</li>
<li class="py-1">
<a class="h-b-primary py-1 font-size-14" href="../single-movies/single-movies-v2.html">Adventure</a>
</li>
<li class="py-1">
<a class="h-b-primary py-1 font-size-14" href="../single-movies/single-movies-v2.html">Animation</a>
</li>
<li class="py-1">
<a class="h-b-primary py-1 font-size-14" href="../single-movies/single-movies-v2.html">Comedy</a>
</li>
<li class="py-1">
<a class="h-b-primary py-1 font-size-14" href="../single-movies/single-movies-v2.html">Crime</a>
</li>
<li class="py-1">
<a class="h-b-primary py-1 font-size-14" href="../single-movies/single-movies-v2.html">Drama</a>
</li>
<li class="py-1">
<a class="h-b-primary py-1 font-size-14" href="../single-movies/single-movies-v2.html">Fantacy</a>
</li>
<li class="py-1">
<a class="h-b-primary py-1 font-size-14" href="../single-movies/single-movies-v2.html">Horror</a>
</li>
<li class="py-1">
<a class="h-b-primary py-1 font-size-14" href="../single-movies/single-movies-v2.html">Mystrey</a>
</li>
<li class="py-1">
<a class="h-b-primary py-1 font-size-14" href="../single-movies/single-movies-v2.html">Romance</a>
</li>
<li class="py-1">
<a class="h-b-primary py-1 font-size-14" href="../single-movies/single-movies-v2.html">Adventure</a>
</li>
<li class="py-1">
<a class="h-b-primary py-1 font-size-14" href="../single-movies/single-movies-v2.html">Animation</a>
</li>
<li class="py-1">
<a class="h-b-primary py-1 font-size-14" href="../single-movies/single-movies-v2.html">Comedy</a>
</li>
<li class="py-1">
<a class="h-b-primary py-1 font-size-14" href="../single-movies/single-movies-v2.html">Crime</a>
</li>
<li class="py-1">
<a class="h-b-primary py-1 font-size-14" href="../single-movies/single-movies-v2.html">Drama</a>
</li>
</ul>
</div>
<div class="col-md px-lg-5 mb-4 mb-md-0 dark">
<div class="font-size-14 text-dark font-weight-bold mb-3">
Movie Trailer
</div>
<div class="product position-relative mb-3">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../../assets/img/480x270/img2.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pl-4 pr-3 pb-2">
<div class="product-title font-size-15 font-weight-bold text-lh-1">
<a href="../single-movies/single-movies-v3.html">Sensational Points That Will Impress Yous</a>
</div>
<div>
<span class="font-size-12 text-gray-1300">28 views</span>
<span class="product-comment font-size-12 text-gray-1300">1 year ago</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Movies - Mega Menu -->
</li>
<!-- End Movies -->
<!-- TV Shows -->
<li class="hs-has-mega-menu navbar-nav-item">
<a id="tvshowsMegaMenu" class="hs-mega-menu-invoker py-xl-3 nav-link nav-link-toggle font-secondary" href="javascript:;" aria-haspopup="true" aria-expanded="false">TV Shows</a>
<!-- TV Shows - Mega Menu -->
<div class="hs-mega-menu dropdown-menu w-100" aria-labelledby="tvshowsMegaMenu">
<div class="mega-menu-body">
<div class="container px-lg-5">
<div class="row mx-lg-n5">
<div class="col-auto px-lg-5 border-right">
<div class="min-w-224">
<ul class="list-unstyled mb-0">
<li class="py-1">
<a class="h-b-primary font-weight-bold font-size-14" href="../single-episodes/single-episodes-v1.html">Trending TV Shows</a>
</li>
<li class="py-1">
<a class="h-b-primary font-weight-bold font-size-14" href="../single-episodes/single-episodes-v1.html">Popular Now</a>
</li>
<li class="py-1">
<a class="h-b-primary font-weight-bold font-size-14" href="../single-episodes/single-episodes-v1.html">New This Month</a>
</li>
<li class="py-1">
<a class="h-b-primary font-weight-bold font-size-14" href="../single-episodes/single-episodes-v1.html">Vodi Exclusives</a>
</li>
<li class="py-1">
<a class="h-b-primary font-weight-bold font-size-14" href="../single-episodes/single-episodes-v1.html">Just for Kids</a>
</li>
<li class="py-1">
<a class="h-b-primary font-weight-bold font-size-14" href="../single-episodes/single-episodes-v1.html">Featured Shows</a>
</li>
<li class="py-1">
<a class="h-b-primary font-weight-bold font-size-14" href="../single-episodes/single-episodes-v1.html">TV Show Genres</a>
</li>
<li class="py-1">
<a class="h-b-primary font-weight-bold font-size-14" href="../single-episodes/single-episodes-v1.html">TV Series: Drama</a>
</li>
<li class="py-1">
<a class="h-b-primary font-weight-bold font-size-14" href="../single-episodes/single-episodes-v1.html">TV Series: Comedy</a>
</li>
</ul>
</div>
</div>
<div class="col px-lg-5">
<div class="font-size-14 text-dark font-weight-bold mb-3">
Picked for You: Madras Themes
</div>
<div class="row row-cols-md-3 row-cols-xl-5 mx-n2">
<div class="col-md px-2">
<div class="product mb-4 mb-md-0">
<div class="product-image mb-1">
<a class="d-block position-relative stretched-link" href="../single-episodes/single-episodes-v2.html">
<img class="img-fluid w-100" src="../../assets/img/206x117/img1.jpg" alt="Image-Description">
</a>
</div>
<a class="d-inline-block" href="../single-episodes/single-episodes-v2.html">
<span class="text-gray-1300 font-size-12">S01E02</span>
<h6 class="mb-0">15 Million Merit</h6>
</a>
</div>
</div>
<div class="col-md px-2">
<div class="product mb-4 mb-md-0">
<div class="product-image mb-1">
<a class="d-block position-relative stretched-link" href="../single-episodes/single-episodes-v3.html">
<img class="img-fluid w-100" src="../../assets/img/206x117/img2.jpg" alt="Image-Description">
</a>
</div>
<a class="d-inline-block" href="../single-episodes/single-episodes-v3.html">
<span class="text-gray-1300 font-size-12">S01E02</span>
<h6 class="mb-0">2020-4-5</h6>
</a>
</div>
</div>
<div class="col-md px-2">
<div class="product mb-4 mb-md-0">
<div class="product-image mb-1">
<a class="d-block position-relative stretched-link" href="../single-episodes/single-episodes-v4.html">
<img class="img-fluid w-100" src="../../assets/img/206x117/img3.jpg" alt="Image-Description">
</a>
</div>
<a class="d-inline-block" href="../single-episodes/single-episodes-v4.html">
<span class="text-gray-1300 font-size-12">S04E0</span>
<h6 class="mb-0">A Good Treason</h6>
</a>
</div>
</div>
<div class="col-md px-2">
<div class="product mb-4 mb-md-0">
<div class="product-image mb-1">
<a class="d-block position-relative stretched-link" href="../single-episodes/single-episodes-v1.html">
<img class="img-fluid w-100" src="../../assets/img/206x117/img4.jpg" alt="Image-Description">
</a>
</div>
<a class="d-inline-block" href="../single-episodes/single-episodes-v1.html">
<span class="text-gray-1300 font-size-12">S02E05</span>
<h6 class="mb-0">A Harday's Night</h6>
</a>
</div>
</div>
<div class="col-md px-2">
<div class="product mb-0">
<div class="product-image mb-1">
<a class="d-block position-relative stretched-link" href="../single-episodes/single-episodes-v2.html">
<img class="img-fluid w-100" src="../../assets/img/206x117/img5.jpg" alt="Image-Description">
</a>
</div>
<a class="d-inline-block" href="../single-episodes/single-episodes-v2.html">
<span class="text-gray-1300 font-size-12">S02E05</span>
<h6 class="mb-0">A Hen in the Wolf House</h6>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End TV Shows - Mega Menu -->
</li>
<!-- End TV Shows -->
<!-- Blog -->
<li class="hs-has-sub-menu navbar-nav-item">
<a id="blogMegaMenu" class="hs-mega-menu-invoker py-xl-3 nav-link nav-link-toggle font-secondary" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-labelledby="blogSubMenu">Blog</a>
<!-- Blog - Submenu -->
<div id="blogSubMenu" class="hs-sub-menu dropdown-menu" aria-labelledby="blogMegaMenu" style="min-width: 230px;">
<a class="dropdown-item" href="../blog/blog.html">Blog</a>
<a class="dropdown-item" href="../blog/blog-single.html">Blog Single</a>
</div>
<!-- End Submenu -->
</li>
<!-- End Blog -->
<!-- Docs -->
<li class="hs-has-sub-menu navbar-nav-item">
<a id="docsMegaMenu" class="hs-mega-menu-invoker py-xl-3 nav-link nav-link-toggle font-secondary" href="javascript:;" aria-haspopup="true" aria-expanded="false">Docs</a>
<!-- Docs - Submenu -->
<div class="hs-sub-menu dropdown-menu mega-menu-sub-menu-md" aria-labelledby="docsMegaMenu">
<!-- Promo Item -->
<div class="navbar-promo-item">
<a class="navbar-promo-link" href="../../documentation/index.html">
<div class="media align-items-center">
<i class="fas fa-book font-size-34 mr-2d"></i>
<div class="media-body">
<span class="navbar-promo-title">
Documentation
<span class="badge badge-primary badge-pill ml-1">v1.0</span>
</span>
<small class="navbar-promo-text">Development guides</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="navbar-promo-item">
<a class="navbar-promo-link" href="../../snippets/index.html">
<div class="media align-items-center">
<i class="fas fa-cut font-size-34 mr-2d"></i>
<div class="media-body">
<span class="navbar-promo-title">Snippets</span>
<small class="navbar-promo-text">Start building</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
</div>
<!-- End Docs - Submenu -->
</li>
<!-- End Docs -->
</ul>
</div>
</div>
<!-- End Navigation -->
</div>
<div class="d-flex align-items-center ml-auto ml-xl-0">
<div class="d-inline-flex ml-md-5">
<ul class="d-flex list-unstyled mb-0 align-items-center">
<li class="col d-xl-none position-static px-2">
<!-- Search -->
<div class="hs-unfold mr-2 position-static">
<a class="js-hs-unfold-invoker btn btn-icon btn-ghost-secondary" href="javascript:;"
data-hs-unfold-options='{
"target": "#searchClassic",
"type": "css-animation",
"animationIn": "slideInUp"
}'>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" style="fill: #ffffff;">
<path d="M7 0C11-0.1 13.4 2.1 14.6 4.9 15.5 7.1 14.9 9.8 13.9 11.4 13.7 11.7 13.6 12 13.3 12.2 13.4 12.5 14.2 13.1 14.4 13.4 15.4 14.3 16.3 15.2 17.2 16.1 17.5 16.4 18.2 16.9 18 17.5 17.9 17.6 17.9 17.7 17.8 17.8 17.2 18.3 16.7 17.8 16.4 17.4 15.4 16.4 14.3 15.4 13.3 14.3 13 14.1 12.8 13.8 12.5 13.6 12.4 13.5 12.3 13.3 12.2 13.3 12 13.4 11.5 13.8 11.3 14 10.7 14.4 9.9 14.6 9.2 14.8 8.9 14.9 8.6 14.9 8.3 14.9 8 15 7.4 15.1 7.1 15 6.3 14.8 5.6 14.8 4.9 14.5 2.7 13.6 1.1 12.1 0.4 9.7 0 8.7-0.2 7.1 0.2 6 0.3 5.3 0.5 4.6 0.9 4 1.8 2.4 3 1.3 4.7 0.5 5.2 0.3 5.7 0.2 6.3 0.1 6.5 0 6.8 0.1 7 0ZM7.3 1.5C7.1 1.6 6.8 1.5 6.7 1.5 6.2 1.6 5.8 1.7 5.4 1.9 3.7 2.5 2.6 3.7 1.9 5.4 1.7 5.8 1.7 6.2 1.6 6.6 1.4 7.4 1.6 8.5 1.8 9.1 2.4 11.1 3.5 12.3 5.3 13 5.9 13.3 6.6 13.5 7.5 13.5 7.7 13.5 7.9 13.5 8.1 13.5 8.6 13.4 9.1 13.3 9.6 13.1 11.2 12.5 12.4 11.4 13.1 9.8 13.6 8.5 13.6 6.6 13.1 5.3 12.2 3.1 10.4 1.5 7.3 1.5Z"></path>
</svg>
</a>
<div id="searchClassic" class="hs-unfold-content dropdown-menu w-100 border-0 rounded-0 px-3 mt-0 right-0 left-0 mt-n2">
<form class="input-group input-group-sm input-group-merge">
<input type="text" class="form-control search-form-control rounded-pill" placeholder="Search..." aria-label="Search...">
<div class="input-group-append">
<button type="button" class="btn">
<i class="fas fa-search"></i>
</button>
</div>
</form>
</div>
</div>
<!-- End Search -->
</li>
<li class="col pl-0 d-none d-xl-block">
<a href="#" class="d-flex" data-toggle="tooltip" data-placement="top" title="" data-original-title="Uplode">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="18" style="fill: #ffffff;">
<path d="M15.2 16.2C15.2 15.6 15.2 15 15.2 14.4 17.7 14.4 21.1 14.8 22.2 13.3 22.5 12.9 22.8 12.5 23 12 23.8 9.7 22.1 7.8 20.6 7.3 20 7.1 19.4 7.2 18.7 7.2 18.6 6.4 18.3 5.7 17.9 5.1 16.9 3.3 16 2.6 13.8 2 13.2 1.8 12.2 1.7 11.5 1.9 11.1 2 10.6 2.1 10.2 2.2 9.3 2.6 8.6 3.1 8 3.7 7.7 4 7.5 4.6 7.1 4.7 6.8 4.5 6 4.5 5.7 4.6 5 4.9 4.6 5.3 4.5 6.1 4.5 6.5 4.5 6.8 4.6 7.2 3 7.6 1.2 9.5 1.9 11.8 2.1 12.4 2.4 12.9 2.8 13.3 3.9 14.8 7.2 14.4 9.8 14.4 9.8 15 9.8 15.6 9.8 16.2 8 16.2 5.1 16.4 3.8 16 2.3 15.5 1.3 14.5 0.6 13.2 0.2 12.3-0.2 10.7 0.2 9.4 0.4 8.6 1.1 7.5 1.7 7 2 6.8 2.6 6.5 2.7 6 2.8 5.8 2.8 5.2 2.9 4.9 3.3 4.1 3.9 3.4 4.7 3 5 2.9 5.3 2.8 5.7 2.7 6 2.6 6.5 2.8 6.6 2.7 7 2.4 7.4 2 7.7 1.6 8.5 1.1 9.4 0.6 10.4 0.3 11.7-0.2 13.6 0 14.8 0.4 17.4 1.3 19 2.9 20 5.5 22.4 5.5 24.2 7.4 24.8 9.3 25.3 10.7 24.8 12.6 24.3 13.5 23.6 14.6 22.5 15.5 21.2 16 19.9 16.4 17 16.2 15.2 16.2ZM13.4 10.8C13.4 13.2 13.4 15.6 13.4 18 12.8 18 12.2 18 11.6 18 11.6 15.6 11.6 13.2 11.6 10.8 10.7 10.8 9.8 10.8 9 10.8 9 10.8 9 10.7 9 10.7 9.8 9.8 10.7 9 11.5 8.1 11.8 7.9 12.1 7.3 12.6 7.2 13.4 8.1 14.2 8.9 15.1 9.8 15.4 10.1 15.9 10.4 16 10.8 15.2 10.8 14.3 10.8 13.4 10.8Z">
</path>
</svg>
<span class="ml-2 text-white">Upload</span>
</a>
</li>
<li class="col pr-xl-0 px-2 px-sm-3">
<!-- Unfold (Dropdown) -->
<div class="hs-unfold">
<a class="js-hs-unfold-invoker dropdown-nav-link dropdown-toggle py-2 position-relative d-flex align-items-center text-white" href="javascript:;"
data-hs-unfold-options='{
"target": "#basicDropdownHover",
"type": "css-animation",
"event": "hover"
}'>
<svg width="32px" height="32px">
<image x="0px" y="0px" width="32px" height="32px" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAACB1BMVEW7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu3t7eys7KztLO4uLi6u7q0tbSxsrG2t7awsrC7vLu8vLy1trW8vby1tbWysrK6urq3uLe5urm9vr24ubitrq2wsbCsrazV1dXs7Oz29vb39/fw8PDe3t6vsK/v7+/////5+vnLy8urrKuxsbHGx8aur67k5OT4+Pizs7P9/f3R0tGurq7Oz87j4+OsrqzU1NTo6OiusK7+/v7k5eT4+fjGyMa7u7v6+vrMzMyrq6u+vr7Ky8ri4uLt7e3u7u7m5+bT1NOwsLC+v77Q0NDe397f39/T09O/v7/FxsX5+fn09PS9vb37+/v09fTNzs3g4ODh4uHX2Nf8/PzY2djIyMjIycjU1dTl5uXx8fHm5ubV1tVi3+TsAAAAUnRSTlMADleWxOHwxphZESftmiuDiBvN0iAq8TAW9xzX340dI5ymCPj9VV+lydDl5/P05srRnqdjCvr+EKCqipTd5Pb7IfI31NmLkAQvojIVn+PLoWIYYNJBTgAAAAFiS0dEca8HXOIAAAAHdElNRQfjBQECDwMxTbKCAAACG0lEQVQ4y21T90PTQBQ+RKpY3FisExcuEHEvFPdeXLikJLnakjbVgjESSEutqIiKIo66R90L/SNtbzTp+H66e9/37r17A4ACqqZUT63xeGqmTa+dAcrhra7rhEIXQl2iFPDMnFXKz0bdoqzIBIosdqM5RfTceYKKZRdwUJhf7/AL6iD35lAU6Gvg/ELfJe4eCgd62FGT/IuYYDGkPI5E9RASYiK9anAJyw8yFx1evhLv7buKYwoJqMCleX4ZUskVG+iaSXC936ICFS3PCRoHyItKUOw1OQZtYsMDKwBYuUqgEaxEgTeTQxFiE1dXgTWdlFdxyhGYN9LM2gQaJVoB46aLN4ctWg19LVjH/nDrtltwJ42IFa4HG8JUMFLpBTm8ETSHeA53K+SAmkELE8jWqMPfY7/ICzYFWHfcdbhv40KIVok3Z+RBH6XHHj7ivYWbQZvOL+N6+vHEk6fPnoejCh8dfQuo5SHkjB158fLV6zdvg3aGj4e6FWzbTkqtida74SQN8T4xGBM0UuodOwHYlW+WZosT7jok1HROgfXduW7WI1HRoviDWYT4eEzLtdubH4g98GOmZ8wsQVY2NLiXjtQ+Q/pkliE+ZLTzod/fb1bA5wMdfKwbDn4p57/6DzmL0XH42/diOvXjiLdot47+TLgkqdFfx46XLOeJtpbffyaT2Wxy8u8//8lTFfb7dNOZ1rMeX/u58xcuOtb/keQ/CDzeyUsAAAAASUVORK5CYII=">
</image>
</svg>
</a>
<div id="basicDropdownHover" class="hs-unfold-content dropdown-menu my-account-dropdown">
<!-- Modal Trigger -->
<a class="dropdown-item" href="javascript:;" data-toggle="modal" data-target="#loginModal">Sign in</a>
<a class="dropdown-item" href="javascript:;" data-toggle="modal" data-target="#loginModal">Register</a>
<!-- End Modal Trigger -->
</div>
</div>
<!-- End Unfold (Dropdown) -->
</li>
</ul>
</div>
</div>
</nav>
<!-- End Nav -->
</div>
</div>
</header>
<!-- ========== END HEADER ========== -->
<!-- ========== SECONDARY CONTENTS ========== -->
<!-- Login Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<button type="button" class="close position-absolute top-0 right-0 z-index-2 mt-3 mr-3" data-dismiss="modal" aria-label="Close">
<svg aria-hidden="true" class="mb-0" width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
</svg>
</button>
<!-- Body -->
<div class="modal-body">
<form class="js-validate">
<!-- Login -->
<div id="login">
<!-- Title -->
<div class="text-center mb-7">
<h3 class="mb-0">Sign In to Vodi</h3>
<p>Login to manage your account.</p>
</div>
<!-- End Title -->
<!-- Input Group -->
<div class="js-form-message mb-4">
<label class="input-label">Email</label>
<div class="input-group input-group-sm mb-2">
<input type="email" class="form-control" name="email" id="signinEmail" placeholder="Email" aria-label="Email" required
data-msg="Please enter a valid email address.">
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="js-form-message mb-3">
<label class="input-label">Password</label>
<div class="input-group input-group-sm mb-2">
<input type="password" class="form-control" name="password" id="signinPassword" placeholder="Password" aria-label="Password" required
data-msg="Your password is invalid. Please try again.">
</div>
</div>
<!-- End Input Group -->
<div class="d-flex justify-content-end mb-4">
<a class="js-animation-link small link-underline" href="javascript:;"
data-hs-show-animation-options='{
"targetSelector": "#forgotPassword",
"groupName": "idForm"
}'>Forgot Password?
</a>
</div>
<div class="mb-3">
<button type="submit" class="btn btn-sm btn-primary btn-block">Sign In</button>
</div>
<div class="text-center mb-3">
<span class="divider divider-xs divider-text">OR</span>
</div>
<a class="btn btn-sm btn-ghost-secondary btn-block mb-2" href="#">
<span class="d-flex justify-content-center align-items-center">
<i class="fab fa-google mr-2"></i>
Sign In with Google
</span>
</a>
<div class="text-center">
<span class="small text-muted">Do not have an account?</span>
<a class="js-animation-link small font-weight-bold" href="javascript:;"
data-hs-show-animation-options='{
"targetSelector": "#signup",
"groupName": "idForm"
}'>Sign Up
</a>
</div>
</div>
<!-- Signup -->
<div id="signup" style="display: none; opacity: 0;">
<!-- Title -->
<div class="text-center mb-7">
<h3 class="mb-0">Create your account</h3>
<p>Fill out the form to get started.</p>
</div>
<!-- End Title -->
<!-- Input Group -->
<div class="js-form-message mb-4">
<label class="input-label">Email</label>
<div class="input-group input-group-sm mb-2">
<input type="email" class="form-control" name="email" id="signupEmail" placeholder="Email" aria-label="Email" required
data-msg="Please enter a valid email address.">
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="js-form-message mb-4">
<label class="input-label">Password</label>
<div class="input-group input-group-sm mb-2">
<input type="password" class="form-control" name="password" id="signupPassword" placeholder="Password" aria-label="Password" required
data-msg="Your password is invalid. Please try again.">
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="js-form-message mb-4">
<label class="input-label">Confirm Password</label>
<div class="input-group input-group-sm mb-2">
<input type="password" class="form-control" name="confirmPassword" id="signupConfirmPassword" placeholder="Confirm Password" aria-label="Confirm Password" required
data-msg="Password does not match the confirm password.">
</div>
</div>
<!-- End Input Group -->
<div class="mb-3">
<button type="submit" class="btn btn-sm btn-primary btn-block">Sign Up</button>
</div>
<div class="text-center mb-3">
<span class="divider divider-xs divider-text">OR</span>
</div>
<a class="btn btn-sm btn-ghost-secondary btn-block mb-2" href="#">
<span class="d-flex justify-content-center align-items-center">
<i class="fab fa-google mr-2"></i>
Sign Up with Google
</span>
</a>
<div class="text-center">
<span class="small text-muted">Already have an account?</span>
<a class="js-animation-link small font-weight-bold" href="javascript:;"
data-hs-show-animation-options='{
"targetSelector": "#login",
"groupName": "idForm"
}'>Sign In
</a>
</div>
</div>
<!-- End Signup -->
<!-- Forgot Password -->
<div id="forgotPassword" style="display: none; opacity: 0;">
<!-- Title -->
<div class="text-center mb-7">
<h3 class="mb-0">Recover password</h3>
<p>Instructions will be sent to you.</p>
</div>
<!-- End Title -->
<!-- Input Group -->
<div class="js-form-message">
<label class="sr-only" for="recoverEmail">Your email</label>
<div class="input-group input-group-sm mb-2">
<input type="email" class="form-control" name="email" id="recoverEmail" placeholder="Your email" aria-label="Your email" required
data-msg="Please enter a valid email address.">
</div>
</div>
<!-- End Input Group -->
<div class="mb-3">
<button type="submit" class="btn btn-sm btn-primary btn-block">Recover Password</button>
</div>
<div class="text-center mb-4">
<span class="small text-muted">Remember your password?</span>
<a class="js-animation-link small font-weight-bold" href="javascript:;"
data-hs-show-animation-options='{
"targetSelector": "#login",
"groupName": "idForm"
}'>Login
</a>
</div>
</div>
<!-- End Forgot Password -->
</form>
</div>
<!-- End Body -->
</div>
</div>
</div>
<!-- End Login Modal -->
<!-- Sidebar Navigation -->
<aside id="sidebarContent" class="hs-unfold-content sidebar sidebar-left off-canvas-menu">
<div class="sidebar-scroller">
<div class="sidebar-container">
<div class="sidebar-footer-offset" style="padding-bottom: 7rem;">
<!-- Toggle Button -->
<div class="d-flex justify-content-end align-items-center py-2 px-4 border-bottom">
<!-- Logo -->
<a class="navbar-brand mr-auto" href="../home/index.html" aria-label="Vodi">
<svg version="1.1" width="103" height="40px">
<linearGradient id="vodi-gr" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0" style="stop-color:#2A4999"></stop>
<stop offset="1" style="stop-color:#2C9CD4"></stop>
</linearGradient>
<g class="vodi-gr">
<path class="vodi-svg0" d="M72.8,12.7c0-2.7,0-1.8,0-4.4c0-0.9,0-1.8,0-2.8C73,3,74.7,1.4,77,1.4c2.3,0,4.1,1.8,4.2,4.2c0,1,0,2.1,0,3.1
c0,6.5,0,9.4,0,15.9c0,4.7-1.7,8.8-5.6,11.5c-4.5,3.1-9.3,3.5-14.1,0.9c-4.7-2.5-7.1-6.7-7-12.1c0.1-7.8,6.3-13.6,14.1-13.2
c0.7,0,1.4,0.2,2.1,0.3C71.3,12.2,72,12.4,72.8,12.7z M67.8,19.8c-2.9,0-5.2,2.2-5.2,5c0,2.9,2.3,5.3,5.2,5.3
c2.8,0,5.2-2.4,5.2-5.2C73,22.2,70.6,19.8,67.8,19.8z
M39.9,38.6c-7.3,0-13.3-6.1-13.3-13.5c0-7.5,5.9-13.4,13.4-13.4c7.5,0,13.4,6,13.4,13.5
C53.4,32.6,47.4,38.6,39.9,38.6z M39.9,30.6c3.2,0,5.6-2.3,5.6-5.6c0-3.2-2.3-5.5-5.5-5.5c-3.2,0-5.6,2.2-5.6,5.4
C34.4,28.2,36.7,30.6,39.9,30.6z
M14.6,27c0.6-1.4,1.1-2.6,1.6-3.8c1.2-2.9,2.5-5.8,3.7-8.8c0.7-1.7,2-2.8,4-2.7c3,0,4.9,2.6,3.8,5.4
c-0.5,1.3-1.2,2.6-1.8,3.9c-2.4,5-4.9,10-7.3,15c-0.8,1.6-2,2.6-3.9,2.6c-2,0-3.3-0.8-4.2-2.6c-2.7-5.6-5.3-11.1-8-16.7
c-0.3-0.7-0.6-1.3-0.9-2c-0.8-1.8-0.3-3.7,1.1-4.8c1.5-1.2,4-1.3,5.3,0c0.7,0.6,1.2,1.5,1.6,2.3C11.3,18.8,12.9,22.7,14.6,27z
M90.9,25.1c0,3.1,0,6.2,0,9.4c0,1.9-1.2,3.4-2.9,4c-1.7,0.5-3.5,0-4.5-1.6c-0.5-0.8-0.8-1.8-0.8-2.6
c-0.1-6.1-0.1-11.3,0-17.5c0-2.2,1.5-3.9,3.5-4.2c2.1-0.3,4.1,0.9,4.7,2.9c0.1,0.5,0.2,1.1,0.2,1.6C90.9,20,90.9,22.1,90.9,25.1
C90.9,25.1,90.9,25.1,90.9,25.1z
M90.2,4.7L86,2.3c-1.3-0.8-3,0.2-3,1.7v4.8c0,1.5,1.7,2.5,3,1.7l4.2-2.4C91.5,7.4,91.5,5.5,90.2,4.7z"></path>
</g>
</svg>
</a>
<!-- End Logo -->
<div class="hs-unfold">
<a class="js-hs-unfold-invoker btn btn-icon btn-xs btn-soft-secondary" href="javascript:;"
data-hs-unfold-options='{
"target": "#sidebarContent",
"type": "css-animation",
"animationIn": "fadeInLeft",
"animationOut": "fadeOutLeft",
"hasOverlay": "rgba(55, 125, 255, 0.1)",
"smartPositionOff": true
}'>
<svg width="10" height="10" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
</svg>
</a>
</div>
</div>
<!-- End Toggle Button -->
<!-- Content -->
<div class="scrollbar sidebar-body">
<div class="sidebar-content py-4">
<!-- Sidebar Navbar -->
<div class="">
<div id="sidebarNavExample3" class="collapse show navbar-collapse">
<!-- Nav Link -->
<div class="sidebar-body_inner">
<div class="position-relative">
<a class="dropdown-nav-link dropdown-toggle dropdown-toggle-collapse" href="javascript:;" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="sidebarNav1Collapse" data-target="#sidebarNav1Collapse">
Home
</a>
<div id="sidebarNav1Collapse" class="collapse" data-parent="#sidebarNavExample3">
<div id="sidebarNav1" class="navbar-nav align-items-start flex-column">
<a class="dropdown-item" href="../home/index.html">Home v1</a>
<a class="dropdown-item" href="../home/home-v2.html">Home v2</a>
<a class="dropdown-item" href="../home/home-v3.html">Home v3</a>
<a class="dropdown-item" href="../home/home-v4.html">Home v4</a>
<a class="dropdown-item" href="../home/home-v5.html">Home v5</a>
<a class="dropdown-item" href="../home/home-v6.html">Home v6 - Vodi Prime (Light)</a>
<a class="dropdown-item" href="../home/home-v7.html">Home v7 - Vodi Prime (Dark)</a>
<a class="dropdown-item" href="../home/home-v8.html">Home v8 - Vodi Stream</a>
<a class="dropdown-item" href="../home/home-v9.html">Home v9 - Vodi Tube (Light)</a>
<a class="dropdown-item" href="../home/home-v10.html">Home v10 - Vodi Tube (Dark)</a>
</div>
</div>
</div>
<div class="position-relative">
<a class="dropdown-nav-link dropdown-toggle dropdown-toggle-collapse" href="javascript:;" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="sidebarNav2Collapse" data-target="#sidebarNav2Collapse">
Archive Pages
</a>
<div id="sidebarNav2Collapse" class="collapse" data-parent="#sidebarNavExample3">
<div id="sidebarNav2" class="navbar-nav align-items-start flex-column">
<a class="dropdown-item" href="../archive/movies.html">Movies</a>
<a class="dropdown-item" href="../archive/tv-shows.html">TV Shows</a>
<a class="dropdown-item" href="../archive/videos.html">Videos</a>
</div>
</div>
</div>
<div class="position-relative">
<a class="dropdown-nav-link dropdown-toggle dropdown-toggle-collapse" href="javascript:;" data-target="#sidebarNav2One" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="sidebarNav2One">
Single Movies
</a>
<div id="sidebarNav2One" class="navbar-nav flex-column collapse" data-parent="#sidebarNav2">
<a class="dropdown-item" href="../single-movies/single-movies-v1.html">Movie v1</a>
<a class="dropdown-item" href="../single-movies/single-movies-v2.html">Movie v2</a>
<a class="dropdown-item" href="../single-movies/single-movies-v3.html">Movie v3</a>
<a class="dropdown-item" href="../single-movies/single-movies-v4.html">Movie v4</a>
<a class="dropdown-item" href="../single-movies/single-movies-v5.html">Movie v5</a>
<a class="dropdown-item" href="../single-movies/single-movies-v6.html">Movie v6</a>
<a class="dropdown-item" href="../single-movies/single-movies-v7.html">Movie v7</a>
</div>
</div>
<div class="position-relative">
<a class="dropdown-nav-link dropdown-toggle dropdown-toggle-collapse" href="javascript:;" data-target="#sidebarNav2Two" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="sidebarNav2Two">
Single Videos
</a>
<div id="sidebarNav2Two" class="navbar-nav flex-column collapse" data-parent="#sidebarNav2">
<a class="dropdown-item" href="../single-video/single-video-v1.html">Video v1</a>
<a class="dropdown-item" href="../single-video/single-video-v2.html">Video v2</a>
<a class="dropdown-item" href="../single-video/single-video-v3.html">Video v3</a>
<a class="dropdown-item" href="../single-video/single-video-v4.html">Video v4</a>
<a class="dropdown-item" href="../single-video/single-video-v5.html">Video v5</a>
<a class="dropdown-item" href="../single-video/single-video-v6.html">Video v6</a>
</div>
</div>
<div class="position-relative">
<a class="dropdown-nav-link dropdown-toggle dropdown-toggle-collapse" href="javascript:;" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="sidebarNav3Collapse" data-target="#sidebarNav3Collapse">
Single Episodes
</a>
<div id="sidebarNav3Collapse" class="collapse" data-parent="#sidebarNavExample3">
<div id="sidebarNav3" class="navbar-nav align-items-start flex-column">
<a class="dropdown-item" href="../single-episodes/single-episodes-v1.html">Episode v1</a>
<a class="dropdown-item" href="../single-episodes/single-episodes-v2.html">Episode v2</a>
<a class="dropdown-item" href="../single-episodes/single-episodes-v3.html">Episode v3</a>
<a class="dropdown-item" href="../single-episodes/single-episodes-v4.html">Episode v4</a>
</div>
</div>
</div>
<div class="position-relative">
<a class="dropdown-nav-link dropdown-toggle dropdown-toggle-collapse" href="javascript:;" data-target="#sidebarNav3One" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="sidebarNav3One">
Other Pages
</a>
<div id="sidebarNav3One" class="navbar-nav flex-column collapse" data-parent="#sidebarNav3">
<a class="dropdown-item" href="../other/landing-v1.html">Landing v1</a>
<a class="dropdown-item" href="../other/landing-v2.html">Landing v2</a>
<a class="dropdown-item" href="../other/coming-soon.html">Coming Soon</a>
<a class="dropdown-item" href="../single-tv-show/single-tv-show.html">Single TV Show</a>
</div>
</div>
<div class="position-relative">
<a class="dropdown-nav-link dropdown-toggle dropdown-toggle-collapse" href="javascript:;" data-target="#sidebarNav3Two" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="sidebarNav3Two">
Blog Pages
</a>
<div id="sidebarNav3Two" class="navbar-nav flex-column collapse" data-parent="#sidebarNav3">
<a class="dropdown-item" href="../blog/blog.html">Blog</a>
<a class="dropdown-item" href="../blog/blog-single.html">Single Blog</a>
</div>
</div>
<div class="position-relative">
<a class="dropdown-nav-link dropdown-toggle dropdown-toggle-collapse" href="javascript:;" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="sidebarNav4Collapse" data-target="#sidebarNav4Collapse">
Static Pages
</a>
<div id="sidebarNav4Collapse" class="collapse" data-parent="#sidebarNavExample3">
<div id="sidebarNav4" class="navbar-nav align-items-start flex-column">
<a class="dropdown-item" href="../static/contact.html">Contact Us</a>
<a class="dropdown-item" href="../static/404.html">404</a>
</div>
</div>
</div>
<div class="position-relative">
<a class="dropdown-nav-link dropdown-toggle dropdown-toggle-collapse" href="javascript:;" data-target="#sidebarNav4One" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="sidebarNav4One">
Docs
</a>
<div id="sidebarNav4One" class="navbar-nav flex-column collapse" data-parent="#sidebarNav4">
<a class="dropdown-item" href="../../documentation/index.html">Documentation</a>
<a class="dropdown-item" href="../../snippets/index.html">Snippets</a>
</div>
</div>
<!-- End Nav Link -->
</div>
</div>
</div>
<!-- End Sidebar Navbar -->
</div>
</div>
<!-- End Content -->
</div>
</div>
</div>
</aside>
<!-- End Sidebar Navigation -->
<!-- ========== END SECONDARY CONTENTS ========== -->
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="../../assets/vendor/font-awesome/css/all.min.css">
<link rel="stylesheet" href="../../assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/hs-unfold/dist/hs-unfold.min.js"></script>
<script src="../../assets/vendor/hs-header/dist/hs-header.min.js"></script>
<script src="../../assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('ready', function () {
// initialization of HSMegaMenu component
var megaMenu = new HSMegaMenu($('.js-mega-menu')).init();
});
$(document).on('ready', function () {
// initialization of header
var header = new HSHeader($('#header')).init();
// initialization of unfold
var unfold = new HSUnfold('.js-hs-unfold-invoker').init();
});
</script>