@charset "UTF-8";


/* Animation for spinners */
.spinner {
	-moz-animation: spin 2s infinite linear;
	-o-animation: spin 2s infinite linear;
	-webkit-animation: spin 2s infinite linear;
	animation: spin 2s infinite linear;
	display: inline-block;
}

@-moz-keyframes spin {
	0% {-moz-transform: rotate(0deg);-o-transform: rotate(0deg);-webkit-transform: rotate(0deg);transform: rotate(0deg);}
	100% {-moz-transform: rotate(359deg);-o-transform: rotate(359deg);-webkit-transform: rotate(359deg);transform: rotate(359deg);}
}
@-webkit-keyframes spin {
	0% {-moz-transform: rotate(0deg);-o-transform: rotate(0deg);-webkit-transform: rotate(0deg);transform: rotate(0deg);}
	100% {-moz-transform: rotate(359deg);-o-transform: rotate(359deg);-webkit-transform: rotate(359deg);transform: rotate(359deg);}
}
@-o-keyframes spin {
	0% {-moz-transform: rotate(0deg);-o-transform: rotate(0deg);-webkit-transform: rotate(0deg);transform: rotate(0deg);}
	100% {-moz-transform: rotate(359deg);-o-transform: rotate(359deg);-webkit-transform: rotate(359deg);transform: rotate(359deg);}
}
@-ms-keyframes spin {
	0% {-moz-transform: rotate(0deg);-o-transform: rotate(0deg);-webkit-transform: rotate(0deg);transform: rotate(0deg);}
	100% {-moz-transform: rotate(359deg);-o-transform: rotate(359deg);-webkit-transform: rotate(359deg);transform: rotate(359deg);}}
@keyframes spin {
	0% {-moz-transform: rotate(0deg);-o-transform: rotate(0deg);-webkit-transform: rotate(0deg);transform: rotate(0deg);}
	100% {-moz-transform: rotate(359deg);-o-transform: rotate(359deg);-webkit-transform: rotate(359deg);transform: rotate(359deg);}
}

/* vertically center align an element 
   parent el requires static height */
.v-center {
  position: relative;
  top: 50%;
  -webkit-transform: perspective(1px) translateY(-50%);
  -ms-transform: perspective(1px) translateY(-50%);
  transform: perspective(1px) translateY(-50%);
}

.flip {
  -ms-transform: rotate(-180deg); 
  -webkit-transform: rotate(-180deg); 
  transform: rotate(-180deg);
  -webkit-transition: 0.2s ease-in-out; 
  transition: 0.2s ease-in-out;
}


/* =======================================================================================



		Icons & Fonts:

			Custom fonts: https://fonts.google.com/
			Google cdn: https://fonts.googleapis.com/css?family=Bitter|Work+Sans:300

			Icon font library: https://fontawesome.com/icons?d=gallery&m=free
			Fontawesome cdn: https://use.fontawesome.com/releases/v5.4.2/css/all.css
			
		Google Fonts:
			
			(none for this template)
			
		Simple Animation:
		
			-webkit-transition: 0.2s ease-in-out; 
  		transition: 0.2s ease-in-out;
			
			expanding boxes:
			
				-webkit-transition: all 100ms ease-in;
				-webkit-transform: scale(1); 
				transition: all 100ms ease-in;
				transform: scale(1);  
			
		Misc:
		
			https://internetingishard.com/html-and-css/flexbox/
			https://nostrongbeliefs.com/flexbox-vertical-ordering/

		Vertical centering non-flex:
		
			{
				position: relative;
				top: 50%;
				-webkit-transform: perspective(1px) translateY(-50%);
				-ms-transform: perspective(1px) translateY(-50%);
				transform: perspective(1px) translateY(-50%);
			}

colors (also have palettes in @library_template/)
https://htmlcolorcodes.com/color-chart/

qr codes:
https://www.qr-code-generator.com/free-generator/?ut_source=google_c&ut_medium=cpc&ut_campaign=en_top_kw&ut_content=qr_generator_exact&ut_term=make%20a%20qr%20code_e&gclid=EAIaIQobChMIjbSQkLiZ7QIVQ77ACh32pgzZEAAYASAAEgJdwPD_BwE

free photos:
https://unsplash.com/
https://images.superfamous.com/
https://nos.twnsnd.co/
https://htmlcolorcodes.com/resources/ultimate-guide-to-free-stock-photos/

flex set:
----------------------------------
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

  display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: box;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
  align-items: center;
  flex-wrap: wrap;

======================================================================================= */

html {
	font-size: 19px;
	scroll-behavior: smooth; 
	transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
}

body {
	padding-top: 170px;
 	font-family: "EB Garamond", Georgia, 'Times New Roman', Times, serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
 	color: #6C3918;
 	background: #f1ddba url(../img/whitenoise-360x370.png) 0 0 repeat;
}



/* =======================================================================================
		Page Header
		Notes:
======================================================================================= */

header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	margin: 0;
	padding-top: 0;
	width: 100%;
  height: 147px;
	background: #f1ddba url(../img/transparent-header.png) 0 0 repeat;

	-webkit-transition: all 300ms ease-in-out 0s;
	transition: all 300ms ease-in-out 0;
}

header h1 a:hover {
	text-decoration: none;
}

header.hdr-sdw {
	box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

hgroup {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: box;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
  align-items: center;
  flex-wrap: nowrap;

	min-height: 100px;
}

header.hdr-alt hgroup {
	-webkit-flex-direction: row;
	flex-direction: row;
}

hgroup h1 {
	margin: 0;
	font-size: 3rem;
	line-height: 1;
}

hgroup h1 span {
	display: block;
	font-size: 0.7rem;
	text-align: center;
}	

hgroup figure {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: box;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
  align-items: center;
  flex-wrap: nowrap;

	margin: 0 18px;
	height: auto;
	width: 80px;

}

hgroup figure img {
	width: 100%;
	/* border: 1px solid #6C3918; 
	border-radius: 50%; */
}

hgroup figure img.noborder {
	border: none;
}



nav {
	position: relative;
	display: block;
	background: #AC8C54 url(../img/whitenoise-360x370.png) 0 0 repeat;
	border-top: 1px solid #6C3918;
	border-bottom: 1px solid #6C3918;
}

nav > ul {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: box;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
  align-items: center;
  flex-wrap: wrap;
}

nav > ul > li {
	position: relative;

	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: box;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
  align-items: center;
  flex-wrap: wrap;

	font-size: 1.1rem;
}

nav > ul > li > a {
	padding: 10px 40px;
	color: #AC7754;
}

nav > ul > li ul.dropdown li a {
	display: block;

	padding: 7px;
	color: #AC7754;
}

nav > ul > li > a:hover,
nav > ul > li ul.dropdown li a:hover {
	text-decoration: none;
	color: #6C3918; /* #77212b; */
	background: rgba(0,0,0,0.1);
}

nav > ul > li ul.dropdown li {
	display: block;
	text-align: center;
	font-size: 0.9rem;
}
	
nav > ul > li ul.dropdown {
	width: 100%;
	background: #AC8C54 url(../img/whitenoise-360x370.png) 0 0 repeat;
	position: absolute;
	top: 48px;
	z-index: 999;
	height: 220px;
	display: none;
}

.hdr-sdw nav > ul > li ul.dropdown {
	box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

	
nav > ul > li:hover ul.dropdown {
	display: block;
}


/* =======================================================================================
		Global Typography
		Notes:
======================================================================================= */

a {
  color: #0000EE; /* #0C1E3A; /* #77212b; */
  text-decoration: none;
}

header a {
	color: #77212b;
}

figure a:hover {
	text-decoration: none;
}

a:hover {
  text-decoration: underline;
}





/* =======================================================================================
		Global Structure / Pages
		Notes:
======================================================================================= */

#page {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: box;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;

  margin: 0 auto;
	padding: 20px;
  max-width: 980px;
  height: 100%;
	min-height: 90vh;

	background: transparent;
}

#page article {
	padding: 20px 32px;
	width: 100%;
	-webkit-transition: all 300ms ease-in-out 50ms;
	transition: all 300ms ease-in-out 50ms;
}

/*
#page article.cnt-sdw {
	box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
	*/

#page article blockquote {
	margin: 32px auto;
	padding: 0 10px 18px 10px;
	width: 90%;
	height: auto;
	color: #6C3918;
	border-left: 1px solid #d07b72;
	border-right: 1px solid #d07b72;
	border-radius: 12px;
}

#page article blockquote p:last-child {
	margin: 0;
}

/*
#page article blockquote p:first-child:before {
	display: inline-block;
	margin: 0;
	padding: 0;
	height: 24px;
	position: relative;
	top: 0.4em;
	content: '\0022';
	font-family: georgia, serif;
	font-size: 2.5rem;
	line-height: 1;
	color: #d07b72;
}
	*/

#page article p {
	margin: 0 auto 16px;
	height: auto;
}

#page figure {
	margin: 32px auto;
	width: 90%;
	max-width: 480px;
	height: auto;
	text-align: center;
}

#page article figure.max220 {
	margin: 0 auto 18px;
	max-width: 220px;
}

#page article figure.max320 {
	margin: 0 auto 18px;
	max-width: 320px;
}

#page article figure.max720 {
	max-width: 720px;
}

#page figure.max140 {
	max-width: 140px;
}

#page article figure.double {
	max-width: 520px;
}

#page article figure.double > div {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: box;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;

	max-width: 520px;
}

#page article figure.double img {
	width: 220px;
	max-width: 220px;
}

#page article figure.right {
	float: right;
	margin: 10px 0 8px 18px;
	width: 200px;
	height: auto;
}

#page article figure figcaption, #appendix figure figcaption {
	font-size: 0.8rem;
	text-align: center;
}

#page figure img {
	margin: 0;
	width: 100%;
	border: 8px solid #6C3918;
	border-radius: 4px;
}

figure#sig {
	margin: 0 auto;
	width: 90%;
	height: auto;
	text-align: center;
	max-width: 100px;
}

figure#sig img {
	margin: 0;
	width: 100%;
}

#page article figure img.noborder {
	border: none;
}

.uparrow i {
	font-style: normal;
}

.uparrow:hover {
	text-decoration: none;
}


/* =======================================================================================
		Gallery
======================================================================================= */

#page article ul.gallery {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: box;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: center;
  align-items: center;
  flex-wrap: wrap;
}

#page article ul.gallery figure {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: box;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;

	margin: 0;
	height: 210px;
	width: 180px;
	overflow: hidden;
}

#page article ul.gallery figure figcaption {
	width: 100%;
}

#page article ul.gallery figure a {
	display: block;
	width: 80%;
	height: auto;
	max-height: 80%;
	border: none;
	overflow: hidden;
}

#page article ul.gallery figure figcaption a {
	width: 100%;
	height: auto;
	max-height: 100%;
}

#page article ul.gallery figure a img {
	margin: 0;
	width: 100%;
	height: auto;
	max-height: 80%;
	border: 8px solid #FDF6CD;
	border-radius: 0;
}

#page article ul.gallery li {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}





/* =======================================================================================
		Global Elements
		Notes:
======================================================================================= */

p {
	margin-bottom: 16px;
	line-height: 1.2em;
	text-align: justify;
}

p.pushleft {
	text-align: left;
}

.center {
	text-align: center;
}

hr {
  position: relative;
  display: block;
  margin: 42px auto;
  height: 0;
	width: 90%;
	overflow: visible;
  border: 1px dashed #eda091;

  transform: rotate(-1deg);
  transform-origin: 50% 0%;
}

hr::after {
  
}

hr::before {
  content: " \263C ";
  position: absolute;
  top: 0;
  left: 50%;
	font-size: 3rem;
  color: #d07b72;
  padding: 0 7px;
	background: #f1ddba url(../img/whitenoise-360x370.png) 0 0 repeat;
  transform: translate(-50%, -50%);
}

.note, .source {
	font-size: 0.9rem;
	color: #d07b72;
}

.source {
	text-align: right;
}

.subtitle {
	font-size: 0.9rem;
}



/* =======================================================================================
		Footer
		Notes:
======================================================================================= */

footer {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: box;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
  align-items: center;
  flex-wrap: wrap;

	margin: 0;
  padding: 32px 0;
  font-size: 0.8rem;
  text-align: center;

	border-top: 2px solid #D6CAA4;
	background: #f1ddba url(../img/transparent-header.png) 0 0 repeat;
	box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
}

footer p {
	margin: 0;
  text-align: center;
}




/* =======================================================================================
		Mobile First Media Queries
		Notes: Typically associate MQs with their relative components/styles
======================================================================================= */

/* mobile styles should be the defaults i.e. "mobile first" */

/* mobile 2 - up to 379px */
@media (min-width: 380px) {
  
}

/* tablet - 380px to 599px */
@media (min-width: 600px) {
  
}

/* desktop  - 600px to 819px */
@media (min-width: 820px) {
  
}

/* desktop 2 - 820px to 1039px */
@media (min-width: 1040px) {
  
}