/* CSS INDEX
------------
CSS HEADER
CSS NAV
CSS MAIN
CSS FOOTER
CSS FORMS
CSS SEARCHBOX
CSS BLOCK TOPICS
CSS SCROLL TO TOP
CSS FEATURES
CSS DIRECTORY
CSS SHOP
CSS SUBNAV
CSS GALLERY
*/

u { display: none; }
* { margin: 0; padding: 0; }
header { display: block; }
a img { border-style: none; }

html {
	height: 100%;
	}

body {
	font-family: 'Libre Franklin', sans-serif; /* https://fonts.google.com/specimen/Libre+Franklin */
	background-color: #fff;
	color: #333;
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	}

p {
	padding-top: 1em;
	line-height: 1.5;
	}

li { line-height: 1.5; }

ol, ul { margin: 0.5em 0 0.5em 1em; }

strong { font-weight: 700; }
em { font-style: italic; }

h1 {
	font-size: 200%;
	font-weight: 400;
	color: #6c3;
	}
h1 span {
	font-weight: 700;
	color: #000;
	}

.img {
	text-align: center;
	font-size: 90%;
	}
.right {
	float: right;
	margin: 0 0 0.5em 1em;
	}
.left {
	float: left;
	margin: 0 1em 0.5em 0;
	}
.full { width: 100%; }

.cleft { clear: left; }
.cright { clear: right; }
.cboth { clear: both; }
.hide { display: none; }

/*	=============================================================================
	CSS HEADER
	============================================================================= */

header {
	position: fixed; top: 0; left: 0; z-index: 10;
	width: 100vw;
	height: 10vw;
	background: url("../images/header0.jpg") 0 0 no-repeat #fff;
    background-size: 100vw;
	font-size: 1.2vw;
	transition: 0.5s;
	}
#index header { width: 100vw; height: 30vw; }
#shop header {
	width: 100vw; height: 20vw;
	transition: 0.5s;
	}

@media screen and (max-width: 600px) {
	header,
	#index header,
	#shop header {
		font-size: 12px;
		height: 330px;
		background-size: cover;
		}
	#search header, #settings header { height: 80px; }
	#search .box, #settings .box { display: none; }
	}

/*	=============================================================================
	CSS NAV
	============================================================================= */

nav ul {
	width: 95vw;
	margin: 1vw auto 0;
	list-style: none;
	display: grid;
    grid-gap: 1vw;
	grid-template-columns: repeat(3, 3fr) 5fr repeat(2, 4fr) repeat(2, 1fr);
	}
.box {
	box-sizing: border-box;
	background-color: #aaa;
	border-radius: 0.5vw;
	text-align: center;
	height: 2em;
	}
.home {
	box-sizing: border-box; 
	display: block;
	text-align: center;
	height: 2em;
	}
.box a {
	display: block;
	padding: 0.1vw 0.5vw;
	color: #fff;
	text-decoration: none;
	}
.box span { display: none; }
.directory {
	grid-column: 6;
	background-color: #fff;
	}

.directory a { color: #666; }
.comserv, .comgroup { background-color: #999; }
.about { grid-column: 7 / span 2 }
.home { background-color: transparent; }
.home img { height: 100px; width: auto; }

.search a { color: #fff; }
.search a::after{
	font-size: 1.5vw;
	font-family: 'fontawesome';
	content:"\f002";
	}

@media screen and (min-width: 600px) and (max-width: 1200px) {
	.box { height: 3.7em; }
	.directory, .search { height: 1.7em; }
	.about { padding-top: 1em; }
	.home img { height: 50px; }
	}

@media screen and (max-width: 600px) {
	nav ul {
		display: flex;
		flex-flow: row wrap;
		flex-grow: 1;
		justify-content: flex-start;
		font-size: 17px;
		}
	.box {
		height: 50px;
		width: 30vw;
		margin: 0.5em auto;
		border-radius: 8px;
		}
	.home {
		height: 64px;
		width: 100%;
		margin: 0.5em;
		flex-grow: 3;
		}
	.home img { height: 60px; }
	.about, .directory, .search { padding-top: 0.5em; }
	.search a::after,
	.settings a::after { font-size: 20px; }
	}

/*	=============================================================================
	CSS MAIN
	============================================================================= */

main {
	margin-top: 10vw;
	padding-top: 2vw;
	}
#index main { margin-top: 30vw; }
#shop main { margin-top: 0; }

aside {
	position: fixed;
	z-index: 1;
	float: left;
	width: 20vw;
	margin: 0 0 0 1vw;
	padding: 1vw;
	font-size: 90%;
	background-color: #eee;
	}
aside img { max-width: 90%; }

article { padding: 2vw; }
#settings article,
#directory article,
#feature article {
	margin-left: 24vw;
	min-height: 35vw;
	}

.searchCat {
	box-sizing: border-box;
	margin: 0 0 0.5em 2.5em;
	padding: 0.2em 0.5em 0;
	border-radius: 1em;
	background: #fff;
	height: 1.5em;
	}
.searchCat:hover { font-weight: 700; }
.searchCat input { display: none; }

@media screen and (max-width: 600px) {
	main, #index main { margin-top: 340px; }
	#directory aside, #settings aside { width: 32vw; }
	#directory article, #settings article { margin-left: 36vw; }
	.searchCat { margin-left: 0; }
	}

@media screen and (max-width: 350px) {
	.searchCat label { font-size: 12px; }
	}

@media screen and (max-width: 1200px) {
	#feature article img { max-width: 30vw; }
	}

/*	=============================================================================
	CSS FOOTER
	============================================================================= */

footer {
	position: relative; z-index: 2;
	margin-top: auto;
	height: 3vw;
	padding: 1vw;
	background-color: #eee;
	text-align: center;
	display: grid;
    grid-gap: 1vw;
    grid-template-columns: repeat(4, 1fr);
	}

#settings footer,
#directory footer,
#feature footer { margin-left: 24vw; }
	
footer a { text-decoration: none; }
footer div span { display: none; }

.tw { color: #20b8ff; }
.fb { color: #1c407c; }
.inst { color: #ef9024; }
.social::after { font-size: 3vw; }
.fb::after {
	font-family: 'Material Icons';
	content:"facebook";
	}
.inst::after {
	font-family: 'fontawesome';
	content:"\f16d";
	}
.tw::after {
	font-family: 'fontawesome';
	content:"\f099";
	}
.settings::after {
	font-family: 'fontawesome';
	content:"\f013";
	}
.social:hover {
	color: #000;
	opacity: 0.5;
	}

@media screen and (max-width: 600px) {
	footer { height: 20px; }
	.social::after { font-size: 18px; }
	}

/*	=============================================================================
	CSS FORMS
	============================================================================= */

form { margin-top: 1em; }

div.flex {
	list-style: none;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	width: 70vw;
	margin-bottom: 0.5em;
	}

article label { width: 10vw; }
article div.text { width: 50vw; }

article div.include { width: 2vw; }
article div.day { width: 10vw; }
article div.open { width: 7vw; }
article div.close { width: 5vw; }

@media screen and (max-width: 600px) {
	#settings article { min-height: 480px; }
	}

/*	=============================================================================
	CSS SEARCHBOX
	============================================================================= */

#searchbox_container {
	position: absolute; top: 13vw;
    width: 70vw;
    right: 50%;
    transform: translateX(50%);
	}

#searchbox_query {
	background-color: #fff;
	height: 2vw;
	padding: 0.5vw 0.5em 2vw 2em;
	border: 4px solid #ef9024;
	border-radius: 3vw;
	display: grid;
    grid-gap: 1vw;
    grid-template-columns: 4fr 1fr 3fr 4.3vw;
	}

#searchbox_query button {
	width: 4.3vw;
	height: 4.3vw;
	position: relative; top: -0.3vw; left: 0.5vw;
	background-color: transparent;
	border: none;
	}
#searchbox_query button:hover { cursor: pointer; }
#searchbox_query button img { width: 4vw; height: 4vw; }

.searchbox_query {
	position: relative; top: 0.5vw;
	height: 2.5vw;
	padding: 0.5vw;
	border: 1px solid #bbb;
	}
#searchbox_query div {
	padding-top: 1em;
	text-align: right;
	}

@media screen and (max-width: 1200px) {
	#searchbox_container { top: 120px; }
	}

@media screen and (max-width: 600px) {
	#searchbox_container { width: 80vw; }
	#searchbox_query {
		height: auto;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: center;
		padding: 1em;
		}
	#searchbox_query div { text-align: center; }
	.searchbox_query { height: 35px; }
	#searchbox_query button { width: 35px; height: 35px; }
	#searchbox_query button img { width: 35px; height: 35px; }
	#searchbox_query button { position: static; margin: 1em auto 0; }
	#index #searchbox_container { display: none; }
	}

/*	=============================================================================
	CSS BLOCK TOPICS
	============================================================================= */

#block_topics {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	}

.topic_link {
	width: 20vw;
	text-align: center;
	}
.topic_link img { width: 100%; }
.topic_link a { text-decoration: none; }

@media screen and (max-width: 600px) {
	#block_topics { flex-direction: column; }
	.topic_link {
		width: 80%;
		margin: 0 auto 20px;
		padding-bottom: 3px;
		background: #eee;
		}
	.topic_link img {
		width: 100%;
		height: 30px;
		object-fit: cover;
		}
	}

/*	=============================================================================
	CSS SCROLL TO TOP
	============================================================================= */
	
#top_link {
	display: none;
	position: fixed;
	bottom: 20vh;
	right: 2vw;
	z-index: 99;
	font-size: 18px;
	border: none;
	outline: none;
	background-color: #99c;
	color: #fff;
	cursor: pointer;
	padding: 15px;
	border-radius: 4px;
	}

#top_link:hover {
	background-color: #996;
	}

/*	=============================================================================
	CSS FEATURES
	============================================================================= */

#feature h1 { margin-bottom: 1em; }
#feature aside div {
	padding: 2vw;
	border: 1px solid #aaa;
	margin: 0 2vw 2em 0;
	}
#feature article img.inset {
	float: right;
	margin: 0 0 2vw 2vw;
	}

/*	=============================================================================
	CSS DIRECTORY
	============================================================================= */

.shop_list li a { text-decoration: none; }
.shop_list li span { color: #999; }
.shop_list li:nth-child(odd) { background-color: #fff5ee; }
.shop_list li:nth-child(even) { background-color: #eef5ff; }

#directory h2 {
	margin-top: 1em;
	color: #369;
	}

@media screen and (max-width: 600px) {
	.shop_list li span { display: block; }
	#dirBody { min-height: 400px; }
	}

/*	=============================================================================
	CSS SHOP
	============================================================================= */

#shop header h1 {
	position: absolute; top: 12vw;
	height: 1em;
	padding: 0.2em 1vw 0.4em;
	border-radius: 1vw;
    background-color: #fff;
    right: 50%;
    transform: translateX(50%);
	transition: 0.5s;
    }

#shop_logo {
	position: absolute; top: 14.5vw;
	height: 5.5vw;
	transition: 0.5s;
	}
#shop_logo img { height: 100%; width: auto; }

/* CSS SUBNAV */

#subnav {
	margin-top: 23vw;
	background-color: #f6f3ef;
	display: grid;
    grid-gap: 1vw;
    padding: 1vw;
    text-align: center;
    height: 2.5vw;
    width: 95%;
	}

#subnav div { position: relative; }
#subnav div div { position: absolute; top: 3vw; left: 0; }

#shop main {
	display: grid;
    grid-gap: 1em;
    grid-template-columns: 2fr 1fr;
	}
#shop aside {
	position: relative; top: 1em;
	float: none;
	width: auto;
	}

#map {
	height: 400px;
	margin-top: 2em;
	}

#map_link {
	width: 10em;
	height: 2em;
	background: #eee;
	border: 2px solid #ddd;
	border-radius: 1em;
	}
#map_link a {
	display:  block;
	text-align: center;
	padding-top: 0.3em;
	text-decoration: none;
	color: #000;
	}

.shopVal {
	position: relative; z-index: 2; 
	color: #63c;
	cursor: pointer;
	}

@media screen and (max-width: 600px) {
	#shop main {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		margin-top: 20px;
		}
	#shop article { grid-row: 1; }
	#shop aside {
		grid-row: 2;
		position: static;
		width: 95%;
		}
	#map { grid-row: 3; }
	#subnav {
		height: 30px;
		margin-top: 130px;
		}
	}

@media screen and (max-width: 440px) {
	#shop main { margin-top: 30px; }
	#shop aside { position: relative; top: 1em; }
	}

#shop_tel::before,
#shop_address::before,
#shop_email::before,
#shop_opening::before {
	font-family: 'Material Icons';
	font-size: 3vw;
	position: relative; top: 0; left: 3vw;
	}

#shop_tel::before { content:"phone"; }
#shop_address::before { content:"place"; }
#shop_email::before { content:"mail"; }
#shop_opening::before { content:"schedule"; }

#shop_tel::after,
#shop_address::after,
#shop_email::after,
#shop_opening::after {
	position: absolute; top: -3vw; left: 0;
	right: 0;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
	}

#shop_tel::after { content: attr(alt); }
#shop_address::after { content: attr(alt); }
#shop_email::after { content: attr(alt); }
#shop_opening::after { content: attr(alt); }

#shop_web::before,
#shop_facebook::before,
#shop_twitter::before,
#shop_instagram::before { font-size: 3vw; }

#shop_web::before {
	font-family: 'Material Icons';
	font-weight: 900;
	content:"language";
	}
#shop_facebook::before {
	font-family: 'Material Icons';
	content:"facebook";
	position: relative; left: 0.2vw;
	}
#shop_twitter::before {
	font-family: 'fontawesome';
	content:"\f099";
	}
#shop_instagram::before {
	font-family: 'fontawesome';
	content:"\f16d";
	}

#shop_web::after,
#shop_facebook::after,
#shop_twitter::after,
#shop_instagram::after {
	position: absolute; top: -3vw; left: 0;
	right: 0;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
	}

#shop_web::after { content: attr(alt); }
#shop_facebook::after { content: attr(alt); }
#shop_twitter::after { content: attr(alt); }
#shop_instagram::after { content: attr(alt); }

.subicon { color: #6c3; }
.subicon:hover  {
	cursor: pointer;
	color: #f90;
	}
#shop_tel:hover::after,
#shop_address:hover::after,
#shop_email:hover::after,
#shop_map:hover::after,
#shop_opening:hover::after,
#shop_info:hover::after,
#shop_web:hover::after,
#shop_facebook:hover::after,
#shop_twitter:hover::after,
.subicon:hover::after { opacity: 1; }

@media screen and (max-width: 600px) {
	#shop .box { display: none; }
	#shop .directory {
		display: block;
		cursor: pointer;
		width: 40px;
		height: 40px;
		position: absolute; right: 20px;
		}
	#shop .directory::after {
		font-size: 30px;
		color: #000;
		position: relative; top: -0.3em;
		font-family: 'Material Icons';
		content:"store";
		}
	#shop .directory a { display: none; }
	#shop header { height: 110px; }
	#shop header h1 {
		top: 80px;
		font-size: 3vw;
		}
	#shop_logo {
		top: 75px;
		height: 35px;
		}
	
	#shop_tel::before,
	#shop_address::before,
	#shop_email::before,
	#shop_map::before,
	#shop_opening::before {
		font-size: 30px;
		position: relative; top: -4px; left: 3vw;
		}
	#shop_web::before,
	#shop_facebook::before,
	#shop_twitter::before,
	#shop_instagram::before {
		font-size: 30px;
		position: relative; top: -4px; left: -2px;
		}
	#shop_tel::after,
	#shop_address::after,
	#shop_email::after,
	#shop_opening::after,
	#shop_web::after,
	#shop_facebook::after,
	#shop_twitter::after,
	#shop_instagram::after {
		top: -20px;
		font-size: 12px;
		}
	.shopVal { font-size: 13px; }
	}

/*	=============================================================================
	CSS GALLERY
	============================================================================= */

#gallery {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-evenly;
	}

#largeImage {
	position: fixed; top: 1vw; left: 0; z-index: 10;
    right: 50%;
    transform: translateX(50%);
	}
#largeImage img {
	max-height: 90vh;
    box-shadow: 4px 4px 8px grey;
	cursor: pointer;
	}

.item {
	width: 200px;
	margin: 0 4px 2em;
	background-color: #f6f3ef;
	}
.item img {
	width: 200px;
	height: auto;
	cursor: pointer;
	}

.description {
	font-family: Cormorant;
	font-weight: 600;
	color: #330;
	text-align: center;
	padding: 1vw 0.5vw;
	min-height: 2.5em;
	margin-bottom: 0.5em;
	background-color: #f1e8dc;
	border-radius: 1vw;
    box-shadow: inset 1px 1px 8px 2px #cc9;
  	-webkit-box-shadow: inset 1px 1px 8px 2px #cc9;
	}