﻿* {
			box-sizing: border-box;
			text-decoration: none;
}
nav { 
			position: fixed;
      top: 0;
      left: 0;
      text-align: center;
      background-color: #ffffff;
      font-weight: bold; 
      width: 100%;
      max-height: 50px;
			z-index: 9999;
}
nav a:link { color: #000000; }
nav a:visited { color: #000000; }
nav a:hover { color: #b3b3b3; }
nav ul {	list-style-type: none; 
					padding: 0 10px;
					font-size: 18px;
}
nav li { display: inline; 
         padding-left: 15px; 
}
header { 
				text-align: center;
				background-color: #000000;
        color: #ffffff;
        font-size:90%;
        min-height: 30px;
				margin-top: 40px;
}
body {
			background-color: #ffffff;
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			text-align: left;
			display: flex;
			flex-direction: column;
}
h3	{
			font-family: "Courier New", serif;
			font-size: 1rem;
}
h5	{ 
			margin-left: 15px;
			font-size: 90%
}
h5	{ font-size: 90%; }
section p 	{ text-align: left; }
footer	{	
			font-family: "Courier New", serif;
			color: #ffee8c;
			height: 40px;
			padding-top: 12px;
			font-size: 80%;
			background-color: #000000;
			font-style: italic;
			text-align: center;
			z-index: 9999;
}
textarea	{ height: 75px; }
input, textarea { display: block;
									min-width: 300px;
}
form { 
			display: flex;
      flex-flow: column nowrap; 
			padding-bottom: 0;
}
input[type="submit"] { 
			grid-column: 2 / 3;
			width: 9em;
			margin-top: 20px;
} 
blockquote	{ 			
			font-family: Georgia, serif;
			line-height: 150%;
			color: #000000;
			width: 400px;
			font-style: italic;
			text-wrap: wrap;
			position: absolute;
			top: 15px;
			right: 25px;
			text-align: center;
			font-size: 120%;
}
table		{
		font-family: "Verdana", Tahoma, sans-serif;
		max-width: 700px;
		margin: 30px 0;
		border: 3px solid DarkGoldenRod;
		background-color: DarkSalmon;
}
tbody tr:nth-of-type(odd) {
  background-color: white;
}
caption	{	
		caption-side: top;
		text-align: center;
		font-weight: bold;
		font-size: 1.3rem;
		padding-bottom: 8px;
 }
th, td 	{ 
		text-align: center;
		font-size: 90%;			
		border: 1px solid Peru;
		padding: 12px;
}
ol li { margin-bottom: 12px; }
ul li { margin-bottom: 12px; }

.header 	{	
			display: flex;
			justify-content: center;
			align-items: center;
			height: 70px;
			min-height: 30px;
			top: 30px;
			padding-top: 10px;
			text-align: center;
			font-size: 100%;
}
.main-wrapper {
			display: flex;
			align-items: flex-start;
			background-repeat: no-repeat;
			background-size: contain;
			height: 800px;
			max-height: 90vh;
}
.about-wrapper {
			background-color: #dcdcdc;
			padding: .5em;
			position: relative;
			min-width: 85%;
			min-height: 80vh;
			max-height: 900px;
}
.contact-wrapper {
			background-image: url(images/DSC_00071-001.jpg);
			background-size: cover;
			background-color: #dcdcdc;
			padding: .5em;
			min-height: 90vh;
			position: relative;
}
#back 	{ 
					color: #ffffff;
					text-align: center
}
.img1	{
			position: absolute;
			top: 150px;
			right: 5px;
			width: 30svh;
}

.img2	{
			position: absolute;
			bottom: 0;
			left: 5px;
			width: 50svh;
}
p::first-letter {
			font-size: 3rem;
			font-weight: bold;
}
#contact-hero { 
			margin: 40px;
			background-image: url(images/A_0405-004.jpg);
			background-size: cover;
			background-repeat: no-repeat;
			margin-left: auto;
			margin-right: auto;
			border: 4px solid #000000;
			z-index: 99999;
			height: 315px;
			width: 800px;
}
#contact	{ 
			margin: 20px;
			color: #ffffff;
}
.ulist	{
			color: #ffffff;
			background-color: DarkOliveGreen;
			font-family: "Tahoma", Arial, serif;
			line-height: 1.5em;
			padding: 30px;
			margin: 40px 0;
}
.olist	{	
			color: #2f4f4f;
			font-family: "Garamond", Verdana, serif;
			font-size: 1.2em;
			padding: 30px;
			margin: 0;
}
.msg	{
			width:22vh;
			line-height: 150%;
			margin-top: 50px;
			text-align: center;
}
.tile {
			background-image: url(images/DSC_0007-002.jpg);
			background-repeat: repeat-y;
			background-color: Khaki;
}
.video-container {
	width: 400px;
	height: 250px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	padding-left: 10px;
}
.video-container video {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/*  ******* BEGIN GALLERY *******  */

.gallery-header {
		color: #ffffff;
		background-color: #000000;
		height: 130px;	
    padding: 4rem 1rem 1rem;
}
.gallery-header h1 { 
		font-size: 2.5rem;
    margin-bottom: 0.5rem;
}
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    max-width: 1200px;
    margin: 50px auto;
    padding: 0 1.5rem 1rem;
}
.gallery-item {
    position: relative;
		border-radius: 8px;
    max-width: 1200px;
		overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    aspect-ratio: 4 / 3;
    cursor: pointer;
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
		object-position: center;
    transition: transform 0.5s ease;
}
.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: #ffffff;
    padding: 2rem 1.5rem 1rem;
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
		align-items: flex-end;
}
.gallery-item:hover img {
    transform: scale(1.05);
}
.gallery-item:hover .overlay {
    opacity: 1;
}
/*  ******* END GALLERY *******  */

@media (min-width: 600px) {
        nv ul         { display: flex;
                      flex-direction: row;
                      flex-wrap: nowrap; 
                      justify-content: flex-start; 
											padding-right: 10px; }
				nav li				{ padding-left: 40px;
											font-size: 20px; }
        section     	{ padding-left: 2em;
											padding-right: 2em;
                      flex: 1; }
				header				{ margin: 0; }
				body					{ margin-top: 30px;
												width: 100%;
												height: 100%; }
				.main-wrapper	{ background-image: url(images/index.jpg);
												background-color: #000000; 
												background-size: cover; }
				.about-wrapper	{	background-image: url(images/A_0097.jpg);
													background-size: cover;
													background-repeat: no-repeat; }
				.contact-wrapper	{ max-height: 80vh; }
				.img1				{ position: absolute;
											top: 120px;
											right: 60px;
											width: 250px; }
				.img2				{ position: absolute;
											bottom: 60px;
											left: 90px;
											width: 450px; }
				.ulist			{ width: 70vh;
											padding: 10px 30px 20px;
											margin-left: 150px; }
				.olist			{ width: 80vh;
											padding: 10px 20px 20px;
											margin-left: 150px; }
				.msg				{ display: none; }
				.video-container { max-width: 600px;
													 max-height: 375px; }
				blockquote	{ color: #ffffff;
											font-size: 140%; }
        form        { width: 60%; 
											max-width: 60em;
											margin: 30px;
											display: grid;
											gap: 1em;
											grid-template-columns: 9em 1fr; }
				table				{ margin: 30px 150px; }
        input[type="submit"] { grid-column: 2 / 3;
                               width: 9em; 
                               margin-bottom: .5em;}    
}
@media (min-width: 1024px) {    
        header { font-size: 120%; }
				.main-wrapper { background-size: contain;
												display: block; }
}


