@charset "UTF-8";
/* CSS Document */

/* header */

header{
	
	/* min-height: 250px;
	background-repeat: no-repeat;
	background-position: left center; 
	background-color: rgba(0,0,0,1.00);
	position: fixed;    */
}

		.headerbar a:link {color:white;}
		.headerbar a:visited {visited:purple;}
		.headerbar a:hover {color:red;}
		.headerbar a:active {color:yellow;}

.headerbar {
	/* background-color: rgba(0,0,0,1.00); */
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	min-height: 50px; 
	
}


		.logo {
	
			min-height: 50px;
			width: 200px;
			background-color: rgba(0,243,243,0.00);
			margin: 0px auto; 
			float:left; 
}

/* navigation */

@media screen and (max-width: 800px) {
  .largescreennav {
    display: none;
  }
}
nav ul /* This formats our unordered list that contains the navigation buttons */ {
		margin: 0px; /* This removes any preset margin in the <ul> tag */
		padding-right: 0px; /* This removes any preset padding in the <ul> tag */
		list-style-type: none; /* This removes the bullet in some browsers */
		list-style-image: none; /* This removes the bullet in other browsers */
		display: flex; /* This display:flex property contols the <li> button holders in our <ul> menu container */
		flex-direction: row; /* This groups our button holders into a nice little row */
		justify-content: right; 
		padding-left: 5%;
		margin-right: 15px;
		float: right;
		position: relative;
		z-index: 10000;
	
	
	}




		nav ul li /* This is a holder for each button */ {
			width: 100%;
			height: 50px;
			padding-left: 5px;
			float: none;
  			display: block;
		}

			nav ul li a /* OUR BUTTON -=APPLAUSE=- */ {
				height: 45px;
				background-color: rgba(0,0,0,1);
				display: flex; /* This display:flex will let us horizontally and vertically center the type in our buttons */
				align-items: right; /* Vertically align the type */
				justify-content: right; /* Horizontally align the type */
				color: rgba(232,162,113,1.00);
				text-decoration: none;
				font-size: 2rem;
				border-right: 2px solid rgba(0,0,0,0.00); /* Look Stille! Sans borders */
				border-left: 2px solid rgba(0,0,0,0.00);
				font-family: 'Baumans', cursive;
				
				
			}

				nav ul li a:hover {
					background-color: rgba(255,255,255,0.05);
				}

		/* These complete the notch effect established in our nav ul li a */

		nav ul li:first-child /* A dark border on the left of the first <li> tag */ {
			border-left: 2px solid rgba(22,116,142,0.00) ;
		}

		nav ul li:last-child /* A light border on the right of the last <li> tag */ {
			border-right: 2px solid rgba(34,176,215,0.00);
		}


/* Drop down menu time! */

nav ul li ul {
	flex-direction: column; /* This makes our dropdown menu buttons flow down in a column */
	display: none; /* This hides our dropdown menu when it is not needed */
}

nav ul li:hover ul {
	display: block; /* This reveals our dropdown menu when one of the main navigation menu button containers is rolled over */
}

	nav ul li ul li {
		width: 225px; /* This widens our dropdown menu buttons so that they are actually clickable */
	}

		nav ul li ul li a /* This gives our buttons a unique look so that we can see the dropdown menu earlier */ {
			border: 2px solid rgba(0,0,0,1.00);
			background-color: rgba(0,0,0,1.00);
			color: rgba(232,162,113,1.00);
			
		}


nav ul li ul li:first-child {
	border-left: none; /* This removes the extra left border from the inner list items since it is unneeded on our dropdown menu */
}

nav ul li ul li:last-child {
	border-right: none; /* This removes the extra right border from the inner list items since it is unneeded on our dropdown menu */
}





.div-button {
    position: absolute;
    right: 30px;
    top: 10px;
    z-index: 10000;
    cursor: pointer;
    color: rgba(232,162,113,1.00);
    font-size: 2rem;
    transition: 1000ms;
}

.div-button:hover {
    color: rgba(248,209,183,1.00);
}

#div-trigger {
    display: none;
}

div {
    width: 300px;
    height: 100%;
    padding: 10px 0px;
    background-color: rgba(232,162,113,0.00);
    opacity: 0;
    transform: translateX(100vw);
    transition: 750ms;
	
	
}

div ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    list-style-image: none;
	float: right;
	
	position: relative;
	
	align-items: right; /* Vertically align the type */
	justify-content: right; /* Horizontally align the type */
}

div ul li {
    display: block;
	color: rgba(232,162,113,1.00);
    background-color: rgba(0,0,0,1.00);
    text-decoration: none;
    text-align: center;
    font-size: 2rem;
}

div ul li a {
    display: block;
    width: 300px;
    color: rgba(232,162,113,1.00);
    background-color: rgba(0,0,0,1.00);
    text-decoration: none;
    text-align: center;
    font-size: 2rem;
    padding: 10px 0px;
    transition: 1000ms;
		border: 2px solid rgba(0,0,0,1.00);
}

div ul li ul {
	flex-direction: column; /* This makes our dropdown menu buttons flow down in a column */
	display: none; /* This hides our dropdown menu when it is not needed */
}

div ul li:hover ul {
	display: block; /* This reveals our dropdown menu when one of the main navigation menu button containers is rolled over */
}


		nav div ul li ul li a /* This gives our buttons a unique look so that we can see the dropdown menu earlier */ {
			border: 2px solid rgba(0,0,0,1.00);
			background-color: rgba(0,0,0,0.00);
			color: rgba(232,162,113,1.00);
		}

div ul li a:hover {
	border: 2px solid rgba(0,0,0,1.00);
			background-color: rgba(0,0,0,0.00);
			color: rgba(232,162,113,1.00);
}

input[type="checkbox"]:checked ~ div {
    opacity: 1;
    transform: translateX(0vw);
}

@media screen and (min-width: 800px) {
  .div-button  {
    display: none;
  }
}










/* body */

body {
	margin: 20px;
	background-color: rgba(0,0,0,1.00); /*this is how you write a coment in a css file */
	padding: 0;
	/* height: 100%; */
	text-align: left;
	color: rgba(232,162,113,1.00);
	font-family: 'Baumans', cursive;
	
}


a.link:link {
	color: rgba(18,9,2,1.00); 
	text-decoration: none;  
	list-style-type: none; 
	list-style-image: none;
	max-width: flex;
	float: none;
	border: 2px solid rgba(232,162,113,1.00);
	background-color: rgba(232,162,113,1.00);
	padding: 5px 25px;
 	text-align: center;
	display: inline-block;
	border-radius: 18px;
	font-size: 1.2rem;
}
a.link:visited {visited: rgba(255,255,255,1.00); }
a.link:hover {color: rgba(255,255,255,1.00) }
a.link:active {color:yellow;}


.headerphoto {
	width: 100%;
	min-width: 100%;
	background-color: rgba(243,243,243,0.00);
	text-align: center;
}

/* body copy */
.header {
	font-size: 2rem;
}
.title {
	font-size: 1.5rem;
}


.about{
	display: flex;
	flex-wrap:wrap;
	flex-direction: row;
	width: 90%;
	min-height: 300px;
	min-width: 300px; 
	background-color: rgba(243,243,243,0.00);
	margin: 10px auto; 
	margin-top: 50px;
	justify-content: center;
	align-content: center;
}

.aboutbody{
	flex: 50%;
	min-height: 300px;
	min-width: 300px;
	background-color: rgba(160,2,5,0.00);
	margin: 5px auto; 
	
	flex-flow: wrap-reverse;
	position: left;
	align-content: center;
	
}

.aboutbodycopy{
	min-height: 300px;
	min-width: 300px;
	background-color: rgba(160,2,5,0.00);
	margin: 5px auto; 
	
	position: left;
	align-content: center;
	
}

.aboutpic{
	width: 40% ;
	min-height: 300px;
	min-width: 300px; 
	background-color: rgba(243,243,243,0.00);
	align-content: center;
	margin-left: 15px;
	
	
}

.photos{
	width: 85%;
	display: flex;
	flex-wrap:wrap;
	justify-content: center;
	/* min-height: 400px;
	min-width: 680px; */ 
	background-color: rgba(243,243,243,0.00);
	margin: 15px auto; 
	
}

.gallerypics{
	width: 25%; 
	min-height: 300px;
	min-width: 300px; 
	max-height: 2000px;
	max-width: 2000px;
	background-color: rgba(243,243,243,0.00);
	margin: 15px auto;
	justify-content: center;
	text-align: center;
	padding: 5px;
	
}




.forms{
	display: flex;
	flex-wrap:wrap;
	flex-direction: column;
	width: 90%;
	min-height: 300px;
	min-width: 300px; 
	background-color: rgba(243,243,243,0.00);
	margin: 10px auto; 
	margin-top: 50px;
	justify-content: center;
	align-content: center;
}


.forms2{
	display: flex;
	flex-wrap:wrap;
	flex-direction: column;
	width: 90%;
	min-height: 300px;
	min-width: 50px; 
	background-color: rgba(243,243,243,0.00);
	margin: 10px auto; 
	margin-top: 50px;
	justify-content: center;
	align-content: center;
}




.inputname{
	min-width: 100px;
}

.input{
	min-width: 300px;
}

.input2{
	min-width: 300px;
	min-height: 60px;
}


.email{
	color: rgba(232,162,113,1.00); 
	text-decoration: none;  
	list-style-type: none; 
	list-style-image: none;
	max-width: flex;
	float: none;
	border: 2px solid rgba(232,162,113,0);
	background-color: rgba(232,162,113,0);
	padding: 5px 15px;
 	text-align: center;
	display: inline-block;
	border-radius: 18px;
	font-size: 2rem;
	max-height: 25px;
}

.formbutton2{
	
	margin: auto;
}

.formbutton{
	color: rgba(18,9,2,1.00); 
	text-decoration: none;  
	list-style-type: none; 
	list-style-image: none;
	max-width: flex;
	float: none;
	border: 2px solid rgba(232,162,113,1.00);
	background-color: rgba(232,162,113,1.00);
	padding: 5px 15px;
 	text-align: center;
	display: inline-block;
	border-radius: 18px;
	font-size: 1rem;
	
	
}








.footerbar {
	background-color: rgba(0,0,0,1.00);
	/* position: fixed; */
	left: 0px;
	right: 15px;
	bottom: 0px;
	width: 100%;
	min-height: 20px;
	
}