@import "/shops/fashion/design/1006/design.css"; /* Import Industry template */

/* Variables */
html {
	--color1: #fff;		/* Website background */
	--color2: #111;		/* Menu background */
	--color3: #eee;		/* Text color */
	--color4: #efab06;	/* Hover color */
	--color5: #333;		/* Used for header text and elements */
}

/* Urban theme */
#cont2 			{ height: 400px; background-image: url(/shops/fashion/cms/city-bg.jpg?v=3); }
#header2		{ max-width: 100%; background: transparent; }
#header3 {
	justify-self: end; margin: 16px 5px; padding: 10px; max-height: 28px;
	background: rgba(0, 0, 0, 0.8); border-radius: 6px;
}

/* Navigation */
nav			{ max-height: 50px; text-align: left; background: rgba(0, 0, 0, 0.8);  }
nav > ul		{ padding-left: 20px;  border-radius: 0 0 3px 3px; text-align: left; }
nav a			{ color: var(--color3); }

/* Sub navigation */
nav > ul ul		{ background: rgba(0, 0, 0, 0.8); }

/* Category navigation */
#cat ul			{ background: var(--color2); }
#cat li:hover		{ background: none; }

/* Objects */
#lang a			{ color: var(--color3); }
svg,
svg path,
nav a svg,
nav a svg path,
#lang svg,
#lang svg path		{ fill: var(--color3); }

/* Yellow city color */
main a,
nav a:hover,
#cat a:hover,
#lang a:hover		{ color: var(--color4); }
svg:hover,
svg:hover path		{ fill: var(--color4); }
nav a:hover svg,
nav a:hover svg path,
#lang a:hover svg,
#lang a:hover svg path	{ fill: var(--color4); }


/* Body container with background image */
#cont3 {
	background-image: url(/shops/fashion/cms/city-bw.jpg?v=2);
	background-repeat: no-repeat; background-position: center bottom; background-size: contain;
	padding-bottom: 800px;
}

/* Footer */
#footer1		{ background: var(--color2); }

/* Buttons */
.webshop_stylebutton, input[type=submit], input[type=button] {
	background: #efab06;
}
#cart span,
.webshop_stylebutton:hover, input[type=submit]:hover, input[type=button]:hover {
	background: #fabf30;
}

/* Responsive */
@media all and (max-width: 600px) {
	#cont2		{ height: 200px; }
	#header2 {
		grid-template-columns: 1fr 4fr;
		grid-template-areas: "logo . nav" "logo header3 header3";
	}
	#mnav {
		grid-area: nav; justify-self: end; margin: 0;
		margin: 6px; padding: 10px;
		background: rgba(0, 0, 0, 0.8); border-radius: 6px;
	}
	#header3	{ margin: 6px; }
	nav		{ max-height: 0; }
	#cont3 		{ padding-bottom: 200px; }
}