#main {
	margin: 0 0 0 0;
	padding: 0em 0 0em 0;
	width: 100%;
	height: 100%;
	/*background-image: url("../../images/website room v2.png");
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;*/
	overflow: hidden;
}

#main_mobile {
	display: none;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background-color: #e4d3be;
	overflow-y: scroll;
}

	@media screen and (max-width: 480px) {

		#main {
			display: none;
		}

		#main_mobile {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		#main_mobile a {
			margin: 10% 8% 10% 8%;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		#main_mobile p {
			font-family: "Ysabeau Office";
			font-size: 13pt;
			font-weight: 450;
			color: #581908;
			line-height: 1.5em;
			margin: 0 2em 1em 2em;
		}

	}

#main_light {
	margin: 0 0 0 0;
	padding: 0em 0 0em 0;
	width: 100%;
	height: 100%;
	background-color: #e4d3be;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-evenly;
	overflow: hidden;
}

#main_dark {
	margin: 0 0 0 0;
	padding: 0em 0 0em 0;
	width: 100%;
	height: 100%;
	background-color: #581908;
	display: flex;
	flex-direction: row;
	align-items: start;
	justify-content: space-evenly;
	overflow: hidden;
}

#main_projects {
	margin: 0 0 0 0;
	padding: 0em 0 0em 0;
	width: 100%;
	height: 100%;
	background-color: #581908;
	overflow-y: scroll;
	overflow-x: hidden;
}

	@media screen and (max-width: 900px) {
		#main_projects {
			background-color: #e4d3be;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}

	@media screen and (max-width: 480px) {
		#main_light {
			display: none;
		}

		#main_dark {
			display: none;
		}

		#main_projects {
			background-color: #e4d3be;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}
		

body {
	margin: 0;
	padding: 0;
	height: 100vh;
	width: 100vw;
}

svg {
	position: absolute;
	height: 100%;
	width: 100%;
	overflow: hidden;
}

image.bg {
	width: 100%;
	height: auto;
	position: absolute;
}

h2 {
	margin: 0;
}

h4 {
	margin: 0;
}

p {
	text-indent: 3em;
}

a {
	color: inherit;
}

hr {
	border: none;
	border-top: 3px dotted #581908;
	text-align: center;
	width: 75vw;
	display: none;
}


/* Index */
.bookshelf_container, .end_table_container {
	fill: #fff5de;
	font-family: "Zilla Slab", serif;
	z-index: 1;
	position: absolute;
	font-size: 30pt;
	font-weight: bold;
	letter-spacing: .03em;
}

.gallery_container, .desk_container {
	fill: #581908;
	font-family: "Zilla Slab", serif;
	z-index: 1;
	position: absolute;
	font-size: 30pt;
	font-weight: bold;
}

.bookshelf_container:hover .bookshelf {
	scale: 1.07;
	/*top: 5.4%;
	left: 9%;*/
}

.gallery_container:hover .gallery {
	scale: 1.1;
	/*top: 14.5%;
	left: 30.5%;*/
}

/*.desk_container:hover .desk {
	width: 26.8%;
	top: 45%;
	left: 26%;
}*/

.end_table_container:hover .end_table {
	scale: 1.1;
	/*top: 56.5%;
	left: 75%;*/
}

.bookshelf_container:hover .selected {
	opacity: 1;
	transition-delay: 0.2s;
}

.bookshelf_container:hover .projects {
	opacity: 1;
	transition-delay: 0.2s;
}

.gallery_container:hover .about_me {
	opacity: 1;
	transition-delay: 0.2s;
}

/*.desk_container:hover .this_room {
	opacity: 1;
	transition-delay: 0.2s;
}*/

.end_table_container:hover .contact {
	opacity: 1;
	transition-delay: 0.2s;
}

.bookshelf {
	transform-box: fill-box;
	transform-origin: 70% 90%;
	transition: all 0.3s ease;
	/*position: absolute;
	width: 19.8%;
	left: 9.6%;
	top: 9.7%;
	transition: all 0.3s ease;*/
}

.gallery {
	transform-box: fill-box;
	transform-origin: center;
	transition: all 0.3s ease;
	/*position: absolute;
	width: 19.8%;
	left: 31%;
	top: 16%;
	transition: all 0.3s ease;*/
}

.desk {
	transform-box: fill-box;
	transform-origin: center;
	transition: all 0.3s ease;
	/*position: absolute;
	width: 24.8%;
	left: 27%;
	top: 47%;
	transition: all 0.3s ease;*/
}

.end_table {
	transform-box: fill-box;
	transform-origin: 50% 90%;
	transition: all 0.3s ease;
	/*position: absolute;
	width: 12%;
	left: 75.5%;
	top: 59.7%;
	transition: all 0.3s ease;*/
}

.selected {
	position: absolute;
	transition: all 0.3s ease;
	/*left: 18.7%;
	top: 8%;*/
	opacity: 0;
}

.projects {
	position: absolute;
	transition: all 0.3s ease;
	/*left: 18.7%;
	top: 35.5%;*/
	opacity: 0;
}

.about_me {
	position: absolute;
	transition: all 0.3s ease;
	/*left: 32.3%;
	top: 16.5%;*/
	opacity: 0;
}

.this_room {
	position: absolute;
	transition: all 0.3s ease;
	left: 35%;
	top: 72%;
	opacity: 0;
}

.contact {
	position: absolute;
	transition: all 0.3s ease;
	/*left: 79.2%;
	top: 63.5%;*/
	opacity: 0;
}

.back {
	position: absolute;
	font-size: 10pt;
	right: 3%;
	top: 5%;
	font-family: "Zilla Slab", serif;
	padding: 1vh 1vw 1vh 1vw;
	align-self: start;
	border: 3px solid black;
	border-radius: 10px;
	z-index: 1;
}

	@media screen and (max-width: 480px) {
		.back {
			font-size: 8pt;
			right: 5%;
			z-index: 1;
		}
	}

.back.dark {
	background-color: #581908;
	color: #fff5de;
}

.back.light {
	background-color: #fff5de;
	color: #581908;
}

a.back:link {
	text-decoration: none;
}

a.back:visited {
	text-decoration: none;
}

a.back:hover {
	text-decoration: underline;
}


/* Slideshow */
.slideshow-container {
  max-height: 70%;
  width: 30%;
  position: sticky;
  top: 10vh;
  margin-top: 10vh;
  padding-bottom: 8vh;

}

@media screen and (max-width: 900px) {
	.slideshow-container {
		width: 60%;
		position: relative;
		top: 0;
		margin: 0;
	}
}

.slideshow-container img {
	max-width: 100%;
	height: auto;
}

.mySlides1 {
  display: none;
}

.mySlides2 {
  display: none;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  font-family: "Ysabeau Office";
	color: #581908;
	font-weight: 500;
  position: relative;
  bottom: 8px;
  margin-top: 2vh;
  width: 100%;
  text-align: center;
}

.numbertext {
  color: #e4d3be;
  font-family: "Ysabeau Office";
  font-size: 14px;
  padding: 8px 12px;
  font-weight: 500;
  background-color: rgb(0,0,0,.5);
  position: absolute;
  top: 0;
}

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}


/* Projects */
.cottage_container, .sacred_container, .north_container {
	width: 90%;
	margin: 2% 5% 2% 5%;
	display: flex;
	flex-direction: row;
	align-items: start;
	justify-content: space-evenly;
	border: 5px solid black;
	background-color: #e4d3be;
}

.text_container {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: "Ysabeau Office";
	color: #581908;
	font-weight: 500;
	margin-top: 10vh;
	max-width: 50%;
	font-size: 14pt;
	line-height: 1.5em;
}

.mobile_show {
	display: none;
}

.mobile_hide {

}

	@media screen and (max-width: 900px) {
		.north_container {
			flex-direction: column;
			align-items: center;
			padding-bottom: 10vh;
		}

		.north_container div.text_container {
			max-width: 90%;
		}

		.cottage_container, .sacred_container, .north_container {
			flex-direction: column;
			align-items: center;
			border: none;
			width: 95%;
			margin-left: 0;
			margin-right: 0;
		}

		.text_container {
			max-width: 90%;
			text-wrap: pretty;
		}

		hr {
			display: block;
		}
	}

	@media screen and (max-width: 600px) {
		.mobile_show {
			display: block;
		}

		.mobile_hide {
			display: none;
		}
	}

	@media screen and (max-width: 380px) {
		.text_container {
			font-size: 12pt;
		}
	}

.title {
	font-family: "Zilla Slab", serif;
	color: #581908;
	font-size: 20pt;
	text-align: center;
	margin: .5vh 0 .5vh 0;
	letter-spacing: 0.1em;
	text-wrap: balance;
}

.subtitle {
	font-family: "Zilla Slab", serif;
	font-size: 16pt;
	font-weight: 600;
	text-align: center;
	margin: .5vh 0 .5vh 0;
}

@media screen and (max-width: 380px) {
	.title {
		font-size: 16pt;
	}
	.subtitle {
		font-size: 14pt;
	}
}

#read_more_link_cottage, #read_more_link_sacred, #read_more_link_north {
	cursor: pointer;
	align-self: start;
	margin-bottom: 7vh;
	padding: 0 1vw 0 1vw;
	background-color: #581908;
	font-family: "Zilla Slab", serif;
	color: #e4d3be;
}

iframe {
	width: 35%;
	aspect-ratio: 16 / 9;
	min-width: 320px;
	min-height: 150px;
	margin-top: 10vh;
	position: sticky;
	top: 10vh;
	margin-bottom: 15vh;
}

.video_link {
	display: none;
	font-family: "Zilla Slab", serif;
	color: #581908;
	font-weight: 600;
	margin-bottom: 5vh;
	max-width: 90%;
	font-size: 12pt;
	line-height: 1.5em;
}

	@media screen and (max-width: 900px) {
		iframe {
			width: 60vw;
			height: 33.75vw;
			position: relative;
			margin: 0;
			top: 0;
			padding-bottom: 5vh;
		}
	}

	@media screen and (max-width: 380px) {
		iframe {
			display: none;
		}

		.video_link {
			display: block;
		}
	}



/* About Me */
.frame {
	width: 55vw;
	height: 75vh;
	position: relative;
	padding: 30px;
	/*display: flex;
	flex-direction: row;
	align-items: center;*/
}

.about_me_text {
	background-color: #fff5de;
	border: 3px solid black;
	height: 100%;
	overflow-y: scroll;
	box-sizing: border-box;
	padding: 2.5em 1.5em 2em 1.5em;
}

.about_me_text p {
	font-family: "Ysabeau Office";
	font-size: 16pt;
	font-weight: 550;
	margin: 1em 2em 1em 2em;
	color: #581908;
	line-height: 1.65;
	text-wrap: balance;
}

.headshot {
	width: 26%;
}


/* Contact */
.contact_sticky {
	position: absolute;
	width: 30vw;
	height: auto;
}

.contact_text {
	fill: #581908;
	color: #581908;
	font-family: "Zilla Slab", serif;
	z-index: 1;
	position: absolute;
	font-size: 25pt;
	font-weight: bold;
}

.contact_link {
	fill: #581908;
	color: #581908;
	font-family: "Ysabeau Office";
	z-index: 1;
	position: absolute;
	font-size: 25pt;
	font-weight: 500;
}

@media screen and (max-width: 480px) {
	.contact_text, .contact_link {
		position: relative;
		text-align: center;
		font-size: 22pt;
		margin-top: .1em;
		margin-bottom: .1em;
	}

	#main_mobile a.contact_link {
		position: relative;
		text-align: center;
		font-size: 22pt;
		margin-top: .1em;
		margin-bottom: .8em;
		display: block;
	}
}

@media screen and (max-width: 380px) {
	.contact_text, .contact_link {
		position: relative;
		text-align: center;
		font-size: 16pt;
		margin: .1em;
	}

	#main_mobile a.contact_link {
		position: relative;
		text-align: center;
		font-size: 16pt;
		margin-top: .1em .1em .8em .1em;
		display: block;
	}
}

.note {
	position: absolute;
	width: 20vw;
	height: auto;
}