/*
colours
green: #bbbc9b;
brown: #4e2e13;
off-white: #f5f5f5;
black: #000000
white: #ffffff
*/

@font-face {
  font-family: 'UntitledSans';
  src: url(assets/font/untitledsans/untitled-sans-web-regular.woff);
}

@font-face {
  font-family: 'GaramondURW-RegIta';
  src: url('assets/font/urwgaramond/font.woff2') format('woff2'), url('assets/font/urwgaramond/font.woff') format('woff');
}

.underline{
	border-bottom: 2px;
}

html{
position: fixed;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 10px;
background-color: #bbbc9b;
font-family: 'UntitledSans';
font-size: 10px;
letter-spacing: 0.25px;
line-height: 17px;
color: #4e2e13 !important;
scroll-behavior: smooth;
overflow: hidden;
}

#wrapper{
border: 15px solid;
width: 100%;
height: 100%;
box-sizing: border-box;
margin: 0;
border-image: url(border-brown.png) 33.33% repeat;
border-image-repeat: repeat;
transition: 0.5s;
overflow: hidden !important;
overflow-y: scroll !important;
}

#header{
width: 100%;
position: fixed;
top: 40px;
height: 40px;
left: 0px;
z-index: 999999999999 !important;
}

.navigation-container{
height: 40px;
width: 100%;
display: none;
position: absolute;
z-index: 9999;
}

.navigation{
width: 100%;
text-align: center;
position: absolute; 
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 9999 !important; 
width: auto;
text-align: center;
}

.span{
font-family: 'GaramondURW-RegIta' !important;
font-size: 17px;
text-align: center !important;
line-height: 25px;
}

#middle{
width: 470px;
display: table;
position: relative;
margin: auto;
color: #4e2e13;
font-size: 12px;
line-height: 20px;
z-index: -999999999 !important;
padding-top: 75px !important;
}

.image-container{
	width: 100%;
	padding-bottom: 30px !important;
	text-align: center !important;
}

figcaption{
	padding-top: 5px;
}

.image-container img{
	width: 300px;
	margin: auto;
	display: block;
}

.copy{
text-align: left;
display: block;
margin: auto;
width: 100% !important;
}

#wrapper::-webkit-scrollbar {
  display: none !important;
}

/*@media screen and (min-height: 1000px) {
  #middle{
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
  }
}*/

#footer{
	width: 100%;
	bottom: 80px !important;
	position: absolute;
	line-height: 20px;
	left: 0px;
	right: 0px;
	text-align: center;
}

a:link{
text-decoration: none;
color: #4e2e13;
}

a:visited{
text-decoration: none;
color: #4e2e13;
}

a:link{
text-decoration: none;
color: #4e2e13;
}

a:active{
text-decoration: none;
color: #4e2e13;
}

a:hover{
text-decoration: underline;
transition: 0.5s;
}