/*--------------------------------
	Containers
-------------------------------*/
body	{ margin: 0; padding: 0; }
header	{ display: flex; min-height: 120px; background-size: contain; justify-content: space-between; }
main	{ max-width: 1200px; margin: 30px auto; padding: 10px; min-height: 36vh; border-radius: 3px; }
aside	{ float: right; width: 140px; }
h1	{ font-size: 1.5em; }
h2	{ font-size: 1.3em; }

/*--------------------------------
	Header
-------------------------------*/
header > div:first-child	{ text-align: center; padding: 10px; }
header > div:nth-child(2)	{ align-self: flex-end; }
header h1			{ margin: 48px 0 0 40px; }
header > div:first-child a	{ text-decoration: none;  }

/*--------------------------------
	Category navigation:
-------------------------------*/

/* Main navigation */
nav			{ font-weight: bold; margin-bottom: 30px; }
nav ul, nav li		{ list-style: none; margin: 0; padding: 0; }
nav > ul		{ max-width: 1200px; margin: 0; display: inline-block; }
nav li			{ display: inline-block; }
nav a			{ display: block; line-height: 40px; padding: 0 10px; text-decoration: none; font-weight: bold; outline: none; transition: 0.3s color; }
nav > ul > li > a	{ line-height: 50px; padding: 0 14px; }

/* Sub navigation */
nav > ul ul		{
	position: absolute; border-radius: 0 0 5px 5px; margin-left: -4px; min-width: 150px; z-index: 1;
	max-height: 0; opacity: 0; overflow-y: auto; z-index: 2;
	transition: max-height 0.3s linear 0s, opacity 0.2s linear 0s; overflow: hidden;
}

nav > ul ul > li	{ display: block; }

nav svg,
nav svg path		{ width: 28px; height: 28px; transition: 0.3s fill; }

#mmenu_bars		{ display: none; padding: 0 12px 0 0;  }
#mmenu_bars > svg	{ vertical-align: middle; margin-top: -6px; }

#iconnav a		{ padding: 0 12px; }
#iconnav svg 		{  margin: 0; padding: 0; vertical-align: middle; }

#webshop_cart span	{
	padding: 2px 3px; vertical-align: super;
	font-size: 0.8em; font-weight: bolder;
	border-radius: 3px; cursor: pointer;
}

#nav			{ transition: max-height 1s; } 

#search_form		{ margin: 40px 0 20px 0; text-align: center }
#search_form input[type="search"]	{
	width: 160px; padding: 6px 4px; margin-right: 10px;
	border-radius: 0; border-width: 0 0 1px 0;
	font-size: 1.1em;  background-color: #fff;
}

/*--------------------------------
	Footer
-------------------------------*/

footer				{ padding: 30px 0; }
footer > div			{ display: flex; max-width: 1200px; margin: 0 auto; padding: 10px; }
footer > div > div:first-child	{ width: 33%; }
footer > div > div:nth-child(2)	{ width: 66%; padding-top: 40px; }
footer h1			{ clear: both; }
footer a			{ text-decoration: none; font-weight: bold; padding-bottom: 4px; }
footer a:hover			{ border-width: 0 0 1px 0; border-style: solid;  margin-bottom: 0px; }
footer a[href^="tel:"]		{ font-weight: normal; }
footer > div > div:first-child h1 { font-size: 1.3em; }



footer #nav, footer #nav ul,
footer .cat, footer .cat ul	{ list-style: none; margin: 0; padding: 0; }
footer #nav, footer .cat	{ margin-bottom: 40px; }
footer #nav > li,
footer .cat > li		{ display: inline-block; width: 198px; vertical-align: top; margin: 8px 10px; }
footer #nav a,
footer .cat a			{  line-height: 30px; }
footer #nav ul a,
footer .cat ul a		{ font-weight: normal; } 


#footer_end			{ margin: 14px 0; padding: 0 10px; text-align: center; }
#footer_end a			{ text-decoration: none; }
#footer_end a:hover		{ text-decoration: underline; }

/*--------------------------------
	Responsive
-------------------------------*/

@media all and (max-width: 1100px) {
	footer > div				{ flex-flow: column; }
	footer > div > div:first-child,
		footer > div > div:nth-child(2) { display: block; width: 100%; }

}

/*--------------------------------
	Mobile menu
-------------------------------*/
@media all and (max-width: 800px) {

	header				{ flex-flow: column; height: auto; }

	header > div:nth-child(2)	{ width: auto; margin: 0; align-self: auto; }
	nav				{ display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0 0 4px 0; }
	#iconnav a			{ padding: 0 6px; }

	header #nav			{ max-height: 0; overflow: hidden; display: block; width: 100%; order: 3; }
	#mmenu_bars			{ display: inline-block; }
	#nav li				{ display: block; }

	nav > ul ul			{ position: static; opacity: 1; margin-left: 10px; }
	nav svg				{ width: 36px; height: 36px; }
}

@media not all and (max-width: 800px) {
	nav > ul > li:hover > ul	{
		max-height: 80vh; opacity: 0.98;
		overflow: visible; z-index: 3;
		transition: opacity 0.6s ease-out 0s;
	}
}