body{
background-color:#f9f9f9;
color:#333333;
padding:0px;
margin:0px;
font-family:tahoma,gill sans,helvetica,arial,sans-serif;
}

#outer {
width:100%;
margin-top:0px;
margin-bottom:20px;
%border:1px dotted white;
min-height:90vh;
}

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

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

h2 {
font-family:futura;
font-size:1.2em;
margin:0;
}

h1 {
font-family:futura;
font-size:2.5em;
margin:0;
}

form {
color:#e19c53;
}

.type {
}

#top {
display:block;
width:100%;
margin:0px;
padding:0px;
padding-bottom:4px;
%background-color:black;
border-bottom:2px solid black;
}

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

#content {
width:96%;
%padding-top:20px;
%border:1px blue solid;
text-align:center;
margin:0 auto;
}

.line {
height:1px;
background-color:#333333;
width:auto;
margin-top:20px;
margin-bottom:20px;
}

.textBox {
max-width:600px;
margin-left:auto;
margin-right:auto;
padding:0px 20px 0px 20px;
%border:1px solid white;
text-align:justify;
line-height:1.4em;
}

.imgContainer {
width:96%;
display:block;
margin-left:auto;
margin-right:auto;
}

.photo {
width:100%;
height:auto;
%border:2px solid black;
padding:2px;
box-sizing:border-box;
display:block;
}

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

.slide {
width:100%;
position:absolute;
border:4px solid black;
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.3;
}

#leftButton {
left:4px;
}

#rightButton {
right:4px;
}


/* ------ MODAL ------- */


/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 2;
padding-top:0px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color:rgba(255,255,255,0.9);
}

/* Modal Content */
.modal-content {
position:relative;
%background-color: black;
margin:auto;
margin-top:0px;
margin-bottom:0px;
top:0px;
padding:0px;
width:98%;
height:100%;
%border:1px solid white;
}

.modalSlides {
display: none;	
%border:1px solid blue;
}

.modalSlides img {
object-fit:contain;
width:100%;
min-width:1000px;
height:auto;
max-height:88vh;
position:absolute;
top:50%;
-ms-transform:translateY(-50%);
transform:translateY(-50%);
%border:1px blue solid;
%box-sizing:border-box;
}

/* The Close Button */
.close {
z-index:2;
color: #333333;
text-align:center;
position: fixed;
padding:0px;
width:40px;
height:40px;
line-height:40px;
top: 2px;
right: 2px;
font-size: 40px;
font-weight: bold;
%border:1px white solid;
}

.close:hover,
.close:focus,
.prev:hover,
.next:hover {
background-color:none;
text-decoration: none;
cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
z-index:2;
cursor: pointer;
position: absolute;
top: 50%;
width:60px;
height:60px;
line-height:60px;
padding:0px 4px 0px 4px;
margin-top: -30px;
color:#333333;
font-weight: bold;
font-size: 40px;
transition: 0.6s ease;
user-select: none;
-webkit-user-select: none;
%border:1px white solid;
}

/* Position the "next button" to the right */
.next {
right: 0;
text-align:right;
}


@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) {

	
}

@media screen and (min-width:800px) {
	%#outer {width:800px;}

	.slideButton {font-size:40px;line-height:40px;width:40px;}
	
	h1 {font-size:3.5em;}
	h2 {font-size:1.4em;}

	.photo {border-width:4px;}

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

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

}

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

	#content {width:1000px;}

	.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;}
}