<!DOCTYPE html>
<html lang="en">
<head>
	<title>{{ 'Alucho Portfolio' | lang }}</title>
	<!-- Global site tag (gtag.js) - Google Analytics -->
	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-148161067-1"></script>
	<script>
		window.dataLayer = window.dataLayer || [];
		function gtag(){dataLayer.push(arguments);}
		gtag('js', new Date());
		gtag('config', 'UA-148161067-1');
	</script>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="{{ 'css/hamburger.css' | static }}">
	<link rel="stylesheet" href="{{ 'css/main.css' | static }}">
	<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
	<link rel="icon" type="image/x-icon" href="/favicon.ico">
	<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
	<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
	<link rel="manifest" href="/site.webmanifest">
	<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
	<meta name="msapplication-TileColor" content="#da532c">
	<meta name="theme-color" content="#ffffff">
	<script src="{{ 'js/eye.js' | static }}"></script>
</head>
<body id="body">
	<header id="mobile-header">
		<input id="toggle" type="checkbox">
		<label class="toggle-container" for="toggle">
			<span class="button button-toggle"></span>
		</label>
		<nav class="nav">
			<div class="itemize">
				<a class="nav-item" href="{{ '/work' | cur_lang }}" {% if work_selected %}class="selected"{% endif %}><h1>{{ 'work' | lang }}</h1></a>
				<div class="itemize">
					<a class="nav-subitem" href="{{ '/work/all' | cur_lang }}" {% if all_selected %}class="selected"{% endif %}>{{ 'all' | lang }}</a>
					<a class="nav-subitem" href="{{ '/work/poster' | cur_lang }}" {% if poster_selected %}class="selected"{% endif %}>{{ 'poster' | lang }}</a>
					<a class="nav-subitem" href="{{ '/work/illustration' | cur_lang }}" {% if illustration_selected %}class="selected"{% endif %}>{{ 'illustration' | lang }}</a>
					<a class="nav-subitem" href="{{ '/work/editorial' | cur_lang }}" {% if editorial_selected %}class="selected"{% endif %}>{{ 'editorial' | lang }}</a>
					<a class="nav-subitem" href="{{ '/work/branding' | cur_lang }}" {% if branding_selected %}class="selected"{% endif %}>{{ 'branding' | lang }}</a>
					<a class="nav-subitem" href="{{ '/work/other' | cur_lang }}" class="last{% if other_selected %} selected{% endif %}">{{ 'other' | lang }}</a>
				</div>
				<a class="nav-item" href="{{ '/news' | cur_lang }}" {% if news_selected %}class="selected"{% endif %}><h1>{{ 'news' | lang }}</h1></a>
				<a class="nav-item" href="{{ '/about-and-contact' | cur_lang }}" class="last{% if about_selected %} selected{% endif %}"><h1>{{ 'about & contact' | lang }}</h1></a>
			</div>
		</nav>
	</header>
	<header id="wide-header">
		<div class="header-box">
			<div class="lbox">
				<div id="lang-chooser" class="vbox">
					<a class="first en {% if lang == 'en' %}selected{% endif %}" hreflang="en" href="{{ 'en' | lang_url }}">en</a>
					<a class="first {% if lang == 'es' %}selected{% endif %}" hreflang="es" href="{{ 'es' | lang_url }}">es</a>
				</div>
				<div id="logo">{{ 'alucho-logo' | svg }}</div>
				<div class="vbox">
					<div id="alucho-title" class="hbox"><h1 class="header-title"><a>Alejandro Rodríguez</a></h1></div>
					<div id="designer-subtitle" class="hbox"><a>{{ 'graphic designer' | lang }}</a></div>
				</div>
			</div>
			<nav class="rbox">
					<div class="vbox">
						<div class="hbox">
							<h1 class="header-title">
								<div><a href="{{ '/work' | cur_lang }}" {% if work_selected %}class="selected"{% endif %}>{{ 'work' | lang }}</a></div> /
								<div><a href="{{ '/news' | cur_lang }}" {% if news_selected %}class="selected"{% endif %}>{{ 'news' | lang }}</a></div> /
								<div><a href="{{ '/about-and-contact' | cur_lang }}" class="last{% if about_selected %} selected{% endif %}">{{ 'about & contact' | lang }}</a></div>
							</h1>
						</div>
						<div class="hbox">
							<div class="header-subtitle">
								<div><a href="{{ '/work/all' | cur_lang }}" {% if all_selected %}class="selected"{% endif %}>{{ 'all' | lang }}</a></div> /
								<div><a href="{{ '/work/poster' | cur_lang }}" {% if poster_selected %}class="selected"{% endif %}>{{ 'poster' | lang }}</a></div> /
								<div><a href="{{ '/work/illustration' | cur_lang }}" {% if illustration_selected %}class="selected"{% endif %}>{{ 'illustration' | lang }}</a></div> /
								<div><a href="{{ '/work/editorial' | cur_lang }}" {% if editorial_selected %}class="selected"{% endif %}>{{ 'editorial' | lang }}</a></div> /
								<div><a href="{{ '/work/branding' | cur_lang }}" {% if branding_selected %}class="selected"{% endif %}>{{ 'branding' | lang }}</a></div> /
								<div><a href="{{ '/work/other' | cur_lang }}" class="last{% if other_selected %} selected{% endif %}">{{ 'other' | lang }}</a></div>
							</div>
						</div>
					</div>
			</nav>
		</div>
	</header>
	<main class="main-layout">
		<style>
		{% block style %}
		{% endblock %}
		</style>
		{% block main %}
		{% endblock %}
	</main>
	<footer>
		<div class="footer-content">
			<div class="copyright">
				<a class="first">© Alejandro Rodríguez Fornés</a> / <a>2020</a>
			</div>
			<div class="hbox social">
				<a href="https://www.facebook.com/alucho">{{ 'facebook' | svg }}</a>
				<a href="https://www.linkedin.com/alucho">{{ 'linkedin' | svg }}</a>
				<a href="https://www.instagram.com/alucho">{{ 'instagram' | svg }}</a>
			</div>
		</div>
	</footer>
	<dialog class="hidden" id="dialog-image-modal" data-work="" data-variant="">
		<div id="modal-image-container" class="vbox">
			<div class="hbox">
				<div id="img-prev">{{ 'prev' | svg }}</div>
				<div class="vbox">
					<div id="close-modal">{{ 'close' | svg }}</div>
					<img id="modal-image" alt="no image">
				</div>
				<div id="img-next">{{ 'next' | svg }}</div>
			</div>
		</div>
		<select id="image-select" class="hidden"></select>
	</dialog>
	<script src="{{ 'js/image-modal.js' | static }}"></script>
	<link rel="stylesheet" href="{{ 'css/image-modal.css' | static }}">
</body>
</html>
