body{
background-color:black;
color:#c0c0c0;
padding:0px;
margin:0px;
font-family:avenir,trebuchet MS,verdana,tahoma,sans-serif;
font-size:1.1em;
display:flex;
flex-direction:column;
min-height:100vh;
}

.container {
%border:1px solid gray;
display:flex;
flex-direction:column;
flex:1;
}

.footer {
display:flex;
width:100%;
align-self:flex-end;
justify-content:center;
text-align:center;
font-size:0.6em;
%border:1px solid white;
}

.center {
margin-left:auto;
margin-right:auto;
}

/*  Hamburger Menu  */

ul {
list-style-type:none;
display:block;
flex-wrap:wrap;
list-style-position:inside;
padding-inline-start:0;
line-height:2;
}

#menu {
display:none;
position:fixed;
top:0px;
margin:0px;
padding:0px;
%border:1px solid white;
width:100%;
height:100%;
flex-direction:column;
align-items:center;
text-align:center;
justify-content:center;
background-color:black;
z-index:50;
}

.menu {
display:block;
margin-left:auto;
margin-right:auto;
text-decoration:none;
margin:0px;
margin-left:0px;
padding:0px;
font-size:40px;
margin-bottom:30px;
%border:1px solid white;
}

.logoContainer {
display:flex;
align-items:center;
justify-content:center;
}

.logo {
display:block;
width:auto;
height:26px;
margin-left:16px;
margin-right:16px;
}

#close {
position:absolute;
right:20px;
top:0px;
text-decoration:none;
font-size:40px;
font-family:futura;
font-weight:bold;
}

/*  Header  */

#top {
display:flex;
position:relative;
width:100%;
margin:0px;
padding:0px;
padding-bottom:4px;
%background-color:black;
%border-bottom:1px solid white;
}

#topleft {
align-items:left;
%border:1px solid white;
}

#topright {
display:flex;
width:100%;
align-items:center;
justify-content:right;
%border:1px solid white;
}

#banner {
display:block;
width:500px;
max-width:80vw;
height:auto;
margin-top:4px;
}

#bannerlink {
}

#topmenu {
display:none;
flex-wrap:wrap;
justify-content:center;
%width:60%;
margin-left:auto;
margin-right:auto;
text-align:right;
align-items:center;
font-size:16px;
%border:1px solid white;
font-family:"avenir next";
}

.topmenu {
text-decoration:none;
font-size:20px;
margin-left:16px;
margin-right:16px;
%border:1px solid white;
}

#menuSymbol {
display:block;
margin-right:20px;
%border:1px solid white;
}

#menuimg {
width:40px;
}

/* Organizing Elements */

.spacer {
display:block;
width:100%;
height:2vw;
}

.outer {
display:flex;
flex-wrap:wrap;
position:relative;
width:100%;
%border:1px blue solid;
text-align:center;
align-items:center;
justify-content:center;
%margin-bottom:20px;
}

.inner {
display:flex;
flex-wrap:wrap;
width:100%;
align-items:center;
justify-content:center;
height:100%;
min-height:300px;
%border:1px solid white;
}

.textBox {
%width:90%;
max-width:600px;
%overflow:hidden;
margin-left:auto;
margin-right:auto;
margin-top:40px;
margin-bottom:40px;
padding-left:20px;
padding-right:20px;
%border:1px solid white;
text-align:justify;
line-height:1.2em;
box-sizing:border-box;
}

/* Image Overlay */

.overlay {
display:block;
position:absolute;
top:0;
width:100%;
height:100%;
align-items:center;
%opacity:0.5;
background-image:linear-gradient(to bottom,black,rgba(0,0,0,0.2),black);
font-family:futura;
%font-weight:bold;
}

.overlayLabel {
display:flex;
width:100%;
%max-width:1000px;
margin-left:auto;
margin-right:auto;
height:100%;
align-items:center;
text-align:center;
justify-content:center;
font-size:7vw;
font-family:futura;
font-weight:bold;
line-height:1.6em;
text-shadow:3px 3px 5px black;
%border:1px solid white;
}

.labelBox {
display:block;
flex-wrap:wrap;
justify-content:center;
align-items:center;
width:100%;
text-align:center;
margin:0px;
padding:0;
opacity:0.8;
font-family:futura;
font-weight:bold;
color:white;
%border:1px solid white;
text-shadow:3px 3px 5px black;
}

.label1 {
font-size:7.6vw;
%border:1px solid white;
line-height:1em;
}

.label2 {
font-size:4.6vw;
line-height:1em;
}

.label3 {
font-size:3.5vw;
%order:1px solid white;
}

/* Font Styling  */

a {
text-decoration:underline;
color:white;
}

form {
color:#e19c53;
}

.type {
}

h1 {
font-family:futura;
font-size:10vw;
margin:0;
}

h2 {
font-family:futura;
font-size:1.2em;
%font-weight:normal;
margin:0;
text-align:center;
}

/* Images  */

img {
width:100%;
margin-left:auto;
margin-right:auto;
}

.imagelink {
text-decoration:none;
}

a.imagelink img {
box-sizing:border-box;
border:8px solid white;
}

.galleryContainer {
display:flex;
position:relative;
width:100%;
align-items:center;
justify-content:center;
background-color:black;
}

.gallery {
position:absolute;
opacity:0;
transition:opacity 0.5s;
box-sizing:border-box;
border:4px solid white;
}

.galleryInline {
border:none;
}

.gallery:hover {
cursor:pointer;
}

.slides {
position:relative;
width:100%;
%max-width:2000px;
height:auto;
aspect-ratio:8/3;
margin-left:auto;
margin-right:auto;
%background-color:#181818;
margin-bottom:10px;
%border:1px solid brown;
}

.slide {
width:100%;
position:absolute;
%border:4px solid white;
top:50%;
-ms-transform:translateY(-50%);
transform:translateY(-50%);
opacity:0;
transition:opacity 0.5s;
}

.slide:hover {
cursor:pointer;
}

.slideButton {
padding:4px;
background-color:white;
color:black;
border:none;
font-size:20px;
line-height:20px;
width:20px;
margin:0;
position:absolute;
top:50%;
-ms-transform:translateY(-50%);
transform:translateY(-50%);
opacity:0.2;
}

.leftButton {
left:4px;
}

.rightButton {
right:4px;
}


@media screen and (min-width:570px) {

	%h1 {font-size:3.5em;}
	%h2 {font-size:1.4em;}
	#slides {}

	.slideButton {font-size:30px;line-height:30px;width:30px;}


}

@media screen and (min-width:768px) {
%.overlayLabel{font-size:2em;}
.gallery {border-width:8px;}
#menu{font-size:20px;}
}

@media screen and (min-width:800px) {
	body {font-size:1.2em;}
	#topmenu{display:flex;}
	#menuSymbol{display:none;}
	%.overlayLabel{font-size:2.2em;}
	.labelBox {}
	%.label1 {font-size:7vw;}
	.label3 {font-size:2.5vw;}
	.slideButton {font-size:40px;line-height:40px;width:40px;}
	

	%h2 {font-size:2em;}

	.photo {border-width:4px;}

	.prev, .next {font-size:60px;}

}

@media screen and (min-width:900px) {
	h1 {font-size:90px;}
}

@media screen and (min-width:1000px) {
.overlayLabel {font-size:70px;}
%.label1 {font-size:80px;}
%.label2 {font-size:50px;}
%.label3 {font-size:25px;}

}

@media screen and (min-width:1200px) {
.outer {flex-wrap:nowrap;}
.inner {width:50%;}
%.textBox {padding:0;}
.prev, .next {font-size:80px;}

%.close{font-size:100px;line-height:100px;}
}

@media screen and (min-width:1920px) {

	#slides {}

	#banner {}
}

@media screen and (min-width:2500px) {

	#banner {}
}

@media only screen and (max-device-width: 480px) {
	body {
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
	}
}

@media (hover:hover) {
	.slideButton:hover {cursor:pointer;opacity:0.7;}
}