/* CSS INDEX
------------
CSS HEADER
CSS NAV
CSS MAIN
CSS SCROLL TO TOP
CSS FOOTER
CSS FORMS
CSS GALLERY
*/

html { scroll-behavior: smooth; }

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

body {
	font-family: 'Libre Franklin', sans-serif; /* https://fonts.google.com/specimen/Libre+Franklin */
	background-color: #fff;
	color: #333;
	position: relative;
	}

p {
	font-family: Cormorant;
	font-weight: 400;
	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,h2,h3,h4 {
	font-family: Cormorant;
	font-weight: 600;
	}
h1 {
	position: absolute; top: 16vw;
    right: 40%;
    transform: translateX(30%);
	font-size: 240% ;
	color: #fff;
	}
h2 {
	text-align: center;
	margin-top: 2em;
	background: url("../images/header0.jpg") 0 0 no-repeat #fff;
    background-size: 100vw;
    padding: 0.5em 0;
    border-top: 2px solid #999;
	}

.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: 20vw;
	background: url("../images/header0.jpg") 0 0 no-repeat #fff;
    background-size: 100vw;
	font-size: 1.2vw;
	transition: 0.5s;
	}

/* =============================================================================
// CSS NAV
/* ============================================================================= */
/*
nav { margin-top: 2vw; }
*/
nav { margin-top: 0; }

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

.home { background-color: transparent; }
.home img { height: 12vw; width: auto; }

@media screen and (max-width: 600px) {
	.home img { height: 10vw; width: auto; }
	.box {
		background-color: transparent;
		position: relative; top: -0.7em;
		}
	.box a {
		padding: 0;
		font-size: 200%;
		color: #339;
		}
	.box a span {
		display: block;
		position: relative; top: 1em;
		}
	.images a:after {
		font-size: 8vw;
		font-family: 'Material Icons';
		content:"collections";
		color: #339;
		display: block;
		}
	.videos a:after {
		font-size: 8vw;
		font-family: 'Material Icons';
		content:"video_library";
		color: #339;
		display: block;
		}
	.soundcloud a:after {
		font-size: 8vw;
		font-family: 'Material Icons';
		content:"library_music";
		color: #339;
		display: block;
		}
	.articles a:after {
		font-size: 8vw;
		font-family: 'Material Icons';
		content:"library_books";
		color: #339;
		display: block;
		}
	.websites a:after {
		font-size: 8vw;
		font-family: 'Material Icons';
		content:"language";
		color: #339;
		display: block;
		}
	.about a:after {
		font-size: 8vw;
		font-family: 'Material Icons';
		content:"face";
		color: #339;
		display: block;
		}
	}

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

main {
	margin: 18vw 10vw 0;
	padding-top: 2vw;
	}
@media screen and (max-width: 1000px) {
	main { margin: 18vw 5vw 0; }
	}

/*	=============================================================================
	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 FOOTER
/* ============================================================================= */

footer {
	margin-top: 1em;
	padding: 1vw;
	background-color: #eee;
	}

footer p { text-align: center; }

#socialmedia {
	margin: auto;
	width: 10vw;
	height: 3vw;
	text-align: center;
	display: grid;
    grid-gap: 1vw;
    grid-template-columns: repeat(3, 1fr);
	}
#socialmedia a { text-decoration: none; }
#socialmedia span { width: 2vw; }

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

@media screen and (max-width: 600px) {
	#socialmedia .fb:after { font-size: 5vw; }
	#socialmedia .inst:after { font-size: 5vw; }
	#socialmedia .tw:after { font-size: 5vw; }
	}

/* =============================================================================
// 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; }

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


.gallery {
	position: relative;
	margin-top: 2vw;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-evenly;
	grid-gap: 4vw;
/*	display: grid;
    grid-gap: 3vw;
    grid-template-columns: repeat(4, 1fr); */
	}
/*
@media screen and (max-width: 600px) {
	.gallery { grid-template-columns: repeat(2, 1fr); }
	}

@media screen and (max-width: 400px) {
	.gallery { grid-template-columns: repeat(1, 1fr); }
	}
*/
#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;
	}

@media screen and (max-width: 600px) {
	#largeImage img { max-width: 90vw; }
	}

.image {
	width: 200px;
	margin: 0 4px 2em;
	background-color: #f6f3ef;
	}
.image img {
	width: 100%;
	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;
	}

#gallery_medium .description {
	color: #63c;
	font-weight: 600;
	font-size: 110%;
	}