<!DOCTYPE html>
<!--[if IE]><![endif]-->
<!--[if IE 8 ]><html dir="{{ direction }}" lang="{{ lang }}" class="ie8"><![endif]-->
<!--[if IE 9 ]><html dir="{{ direction }}" lang="{{ lang }}" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html dir="{{ direction }}" lang="{{ lang }}">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{ title }}</title>
<base href="{{ base }}" />
{% if description %}
<meta name="description" content="{{ description }}" />
{% endif %}
{% if keywords %}
<meta name="keywords" content="{{ keywords }}" />
{% endif %}
<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>

<script src="catalog/view/javascript/jquery/jquery-ui.min.js" type="text/javascript"></script>
<script src="catalog/view/javascript/opentheme/ocquickview/ocquickview.js" type="text/javascript"></script>
<link href="catalog/view/theme/tt_belly4/stylesheet/opentheme/ocquickview/css/ocquickview.css" rel="stylesheet" type="text/css" />
<link href="catalog/view/theme/tt_belly4/stylesheet/opentheme/countdown/jquery.countdown.css" rel="stylesheet" type="text/css" />
<script src="catalog/view/javascript/jquery/owl-carousel/js/owl.carousel.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/jquery/owl-carousel/css/owl.carousel.min.css" rel="stylesheet" />
<link href="catalog/view/javascript/jquery/owl-carousel/css/owl.theme.green.min.css" rel="stylesheet" />
<script src="catalog/view/javascript/jquery/elevatezoom/jquery.elevatezoom.js" type="text/javascript"></script>
<script src="catalog/view/javascript/opentheme/countdown/jquery.plugin.min.js" type="text/javascript"></script>
<script src="catalog/view/javascript/opentheme/countdown/jquery.countdown.min.js" type="text/javascript"></script>
<script src="catalog/view/javascript/ocmegamenu/menu.js" type="text/javascript"></script>
<link href="catalog/view/theme/tt_belly4/stylesheet/opentheme/countdown/jquery.countdown.css" rel="stylesheet" />
<link href="catalog/view/theme/tt_belly4/stylesheet/opentheme/ocmegamenu/menu.css" rel="stylesheet" />
<link href="catalog/view/theme/tt_belly4/stylesheet/opentheme/css/animate.css" rel="stylesheet" />
<link href="catalog/view/theme/tt_belly4/stylesheet/opentheme/layoutproducts/layoutproducts.css" rel="stylesheet" />
<link href="catalog/view/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
<script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="catalog/view/javascript/material-design-iconic-font/css/material-design-iconic-font.min.css" rel="stylesheet" type="text/css" />
<link href="catalog/view/javascript/ionicons/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=Rubik:300,400,500,700,900" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=Ubuntu:300,300i,400,400i,500,500i,700,700i" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=Anton" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=Prata" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=Shadows+Into+Light" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=Arvo:400,700" rel="stylesheet" type="text/css" />
<link href="catalog/view/theme/tt_belly4/stylesheet/stylesheet.css" rel="stylesheet">
{% for style in styles %}
<link href="{{ style.href }}" type="text/css" rel="{{ style.rel }}" media="{{ style.media }}" />
{% endfor %}
{% for script in scripts %}
<script src="{{ script }}" type="text/javascript"></script>
{% endfor %}
<script src="catalog/view/javascript/common.js" type="text/javascript"></script>
{% for link in links %}
<link href="{{ link.href }}" rel="{{ link.rel }}" />
{% endfor %}
{% for analytic in analytics %}
{{ analytic }}
{% endfor %}
{% if theme_option_status[store_id] %}
  <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script>
  <script>
    WebFont.load({
      google: {
        {% if header_tag[store_id].font_family == header_tag[store_id].font_family %}
		families: ['{{ header_tag[store_id].font_family ? header_tag[store_id].font_family }}']
		{% else %}
		families: ['{{ header_tag[store_id].font_family ? header_tag[store_id].font_family }}', '{{ body_css[store_id].font_family ? body_css[store_id].font_family }}']
		{% endif %}
      }
    });
  </script>
  <style>
    {% if a_tag %}
    {{ a_tag[store_id].color ? 'a { color: #' ~ a_tag[store_id].color ~ '; }' : '' }}
    {{ a_tag[store_id].hover_color ? 'a:hover { color: #' ~ a_tag[store_id].hover_color ~ '; }' : '' }}
    {% endif %}

    {% if header_tag %}
    h1, h2, h3, h4, h5, h6 {
    {{ header_tag[store_id].color ? 'color: #' ~ header_tag[store_id].color ~ ';' : '' }}
    {{ header_tag[store_id].font_family ? 'font-family: ' ~ header_tag[store_id].font_family ~ ';' : '' }}
    {{ header_tag[store_id].font_weight ? 'font-weight: ' ~ header_tag[store_id].font_weight ~ ';' : ''}}
    }
    {{ header_tag[store_id].h1.font_size ? 'h1 { font-size: ' ~ header_tag[store_id].h1.font_size ~ '; }' : '' }}
    {{ header_tag[store_id].h2.font_size ? 'h2 { font-size: ' ~ header_tag[store_id].h2.font_size ~ '; }' : '' }}
    {{ header_tag[store_id].h3.font_size ? 'h3 { font-size: ' ~ header_tag[store_id].h3.font_size ~ '; }' : '' }}
    {{ header_tag[store_id].h4.font_size ? 'h4 { font-size: ' ~ header_tag[store_id].h4.font_size ~ '; }' : '' }}
    {{ header_tag[store_id].h5.font_size ? 'h5 { font-size: ' ~ header_tag[store_id].h5.font_size ~ '; }' : '' }}
    {{ header_tag[store_id].h6.font_size ? 'h6 { font-size: ' ~ header_tag[store_id].h6.font_size ~ '; }' : '' }}
    {% endif %}

    {% if body_css %}
    body {
    {{ body_css[store_id].color ? 'color: #' ~ body_css[store_id].color ~ ';' : '' }}
    {{ body_css[store_id].font_family ? 'font-family: ' ~ body_css[store_id].font_family ~ ';' : '' }}
    {{ body_css[store_id].font_size ? 'font-size: ' ~ body_css[store_id].font_size ~ ';' : '' }}
    {{ body_css[store_id].font_weight ? 'font-weight: ' ~ body_css[store_id].font_weight ~ ';' : '' }}
    {{ body_css[store_id].line_height ? 'line-height: ' ~ body_css[store_id].line_height ~ ';' : '' }}
    }
    {% endif %}
  </style>
{% endif %}
</head>
<body class="{{ class }} home1 group1">
<div class="wrapper">
<header>
	<div class="container">
		<div class="row">
			<div class="col-lg-3 col-md-3 col-sm-3 col-sms-12">
				<div class="logo-container">
					<div id="logo">
					  {% if logo %}
						<a href="{{ home }}"><img src="{{ logo }}" title="{{ name }}" alt="{{ name }}" class="img-responsive" /></a>
					  {% else %}
						<h1><a href="{{ home }}">{{ name }}</a></h1>
					  {% endif %}
					</div>
				</div>
			</div>
			<div class="col-lg-9 col-md-9 col-sm-9 col-sms-12">
				<div class="box-top">
					<div class="cart-container">{{ cart }}</div>
					<div class="header-link">
						<div class="header-content">
							<div class="icon-link"></div>
							<div class="box-content">
								<div class="language-currency">
									<div class="header-currency">
										{{ currency }}
									</div>
									<div class="header-laguage">
										{{ language }}
									</div>
								</div>
								<div id="top-links">
									<label>{{ text_account }}<i class="zmdi zmdi-chevron-down zmdi-hc-fw"></i></label>
									<ul class="list-inline">
										<li class="dropdown">
											{% if use_ajax_login %}
												<ul class="dropdown-menu ul-account">
											{% else %}
												<ul class="dropdown-menu">
											{% endif %}
												{% if logged %}
												<li><a href="{{ account }}">{{ text_account }}</a></li>
												<li><a href="{{ order }}">{{ text_order }}</a></li>
												<li>
													{% if use_ajax_login %}
														<a id="a-logout-link" href="{{ logout }}">{{ text_logout }}</a>
													{% else %}
														<a href="{{ logout }}">{{ text_logout }}</a>
													{% endif %}
												</li>
												{% else %}
												<li>
													{% if use_ajax_login %}
														<a id="a-register-link" href="{{ register }}">{{ text_register }}</a>
													{% else %}
														<a href="{{ register }}">{{ text_register }}</a> 
													{% endif %}
												</li>
												<li>
													{% if use_ajax_login %}
														<a id="a-login-link" href="{{ login }}">{{ text_login }}</a>
													{% else %}
														<a href="{{ login }}">{{ text_login }}</a> 
													{% endif %}
												</li>
												{% endif %}
												<li><a href="{{ wishlist }}" id="wishlist-total" title="{{ text_wishlist }}"><span>{{ text_wishlist }}</span></a></li>
												<li><a href="{{ shopping_cart }}" title="{{ text_shopping_cart }}"><span>{{ text_shopping_cart }}</span></a></li>
												<li><a href="{{ checkout }}" title="{{ text_checkout }}"><span>{{ text_checkout }}</span></a></li>
											</ul>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<div class="search-containers">{{ search }}</div>
				</div>
				{% if block1 %}
					{{ block1 }}
				{% endif %}
			</div>
		</div>
	</div>
</header>
<script type="text/javascript">
$( ".banner-center .col" ).click(function() {
	$( this ).toggleClass( "active" );
});
$(document).ready(function(){
	$(window).scroll(function () {
		if ($(this).scrollTop() > 47) {
		$('header').addClass("fix-nav");
		} else {
		$('header').removeClass("fix-nav");
		}
	});
	$(function dropDown()
	{
		elementClick = '.header-link .icon-link,.search-containers .icon-search,#cart .dropdown-cart,.banner-center .banner-title1';
		elementSlide =  '.dropdown-menu,.search-content,.box-content,.banner-center .banner-content1';
		activeClass = 'active';

		$(elementClick).on('click', function(e){
		e.stopPropagation();
		var subUl = $(this).next(elementSlide);
		if(subUl.is(':hidden'))
		{
		subUl.slideDown();
		$(this).addClass(activeClass);
		}
		else
		{
		subUl.slideUp();
		$(this).removeClass(activeClass);
		}
		$(elementClick).not(this).next(elementSlide).slideUp();
		$(elementClick).not(this).removeClass(activeClass);
		e.preventDefault();
		});

		$(elementSlide).on('click', function(e){
		e.stopPropagation();
		});

		$(document).on('click', function(e){
		e.stopPropagation();
		var elementHide = $(elementClick).next(elementSlide);
		$(elementHide).slideUp();
		$(elementClick).removeClass('active');
		});
		
	});
});
</script>