@charset "UTF-8";
/* CSS Document */
/* from codepen */
html {
  		height: 100%;
 		box-sizing: border-box;
}

*, *:before, *:after {
 	 	box-sizing: inherit;
}

/* end codepen */
body {
		padding-left: 20%;
		padding-right: 20%;
		padding-top: 1%;
		/* padding-bottom: 1%; */
		font-family: Tahoma, sans-serif;
	/* from codepen */
	 	position: relative;
 	 	margin: 0;
 	 	padding-bottom: 2rem;
 	 	min-height: 100%;
		background-image: url("/images/mozart-rotated.jpg");
		background-size: cover;
}

nav {
		display: block;
		padding: 1%;
		text-align: center;
		background-color: white;
}

nav a {
		color: black;
		text-decoration: none;
		padding: 1%;
		text-align: center;
}

#mobilemenu {
		display: none;
}

#mobilenav {
		display: none;
}

.overlay {
		height: 100%;
		width: 0;
		position: fixed;
		z-index: 1;
		top: 0;
		left: 0;
		background-color: rgb(0,0,0);
		background-color: rgba(0,0,0, 0.9);
		overflow-x: hidden;
		transition: 0.1s;
}

.overlay-content {
		position: relative;
		top: 25%;
		width: 100%;
		text-align: center;
		margin-top: 30px;
}

.overlay a {
		padding: 8px;
		text-decoration: none;
		font-size: 36px;
		color: white;
		display: block;
		transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  		color: #f1f1f1;
}

.overlay .closebtn {
		position: absolute;
		top: 20px;
		right: 45px;
		font-size: 60px;
}
.closebtn {
		display: none;
}

h1, h2, h3, h4, h5, h6 {
		text-align: center;
		padding-top: 1%;
		padding-bottom: 1%;
}

img {
		display: block;
		margin-left: auto;
		margin-right: auto;
		border-radius: 3%;
}

figcaption {
		font-style: italic;
		padding-top: 1%;
		text-align: center;
}

a {
		font-weight: bold;
		color: black;
}

a.zoomlink:link, 
a.zoomlink:visited {
		background-color: black;
		color: white;
		padding: 5%;
		width: 40%;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: x-large;
}

.center {
		text-align: center;
}

.hide {
		visibility: hidden;
}

.show {
		visibility: visible;
}

div.show {
		border: solid;
}

.button {
		color: white;
		background-color: black;
		width: 25%;
		margin-left: auto;
		margin-right: auto;
		padding: 1%;
		font-size: x-large;
}

.page-container {
		position: relative;
		min-height: 100vh;
		background-color: white;
		padding-left: 5%;
		padding-right: 5%;
		border-radius: 1%;
}

.content-wrap {
		padding-bottom: 1rem;
	/* from codepen */
	  	margin: 0 auto;
 	/*	padding-top: 32px; */
  	/*	max-width: 640px; */
  	/*	width: 94%; */
		background-color: white;
}

footer {
/* fromm codepen */
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		padding: 1rem;
		text-align: center;
}

footer a {
		padding-left: 2%;
}

li {
	list-style-type: none;
}

video {
	width: 75%;
}

/* on restaurants webpage */
.warning {
		background-color: palegoldenrod;
		padding: 1%;
		margin-left: 20%;
		margin-right: 20%;
}

/* on parking webpage */
.map {
		width: 100%;
		height: 100%;
}

/* on condolences webpage and contact webpage */
form {
		text-align: center;
		background-color: white;
}

input[type=text], textarea, select {
		width: 75%;
		padding: 1%;
		margin: 8px 0;
		display: inline-block;
		border: 1px solid #ccc;
		border-radius: 1%;
		box-sizing: border-box;
		font-size: large;
}

textarea {
		resize: none;
}

input[type=submit] {
		width: 100%;
		background-color: black;
		color: white;
		padding: 1%;
		margin: 8px 0;
		border: none;
		border-radius: 1%;
		cursor: pointer;
}


form {
		border: solid;
		border-radius: 1%;
		padding: 5%;
}

html {
		font-size: 16px;
}

h1 {
		font-size: 2rem;
}

h2 {
		font-size: 1.75rem;
}

h3 {
		font-size: 1.5rem;
}

h4 {
		font-size: 1.25rem;
}

h5 {
		font-size: 1rem;
}

h6 {
		font-size: 0.75rem;
}

p {
		font-size: 1rem;
}

li {
		font-size: 1rem;
}


@media screen and (min-width:1001px) and (max-width: 1336px)
{
	nav {
			disply: none;
			padding: 5%;
			background-color: rgba(0,0,0,0.1)
	}
	
	nav a {
			padding: 5%;
			font-size: x-large;
			float: none;
			display: block;
			width: 100%;
			text-align: left;
	}
	
	#mobilemenu {
			display: block;
	}
	
	#fullnav * {
			display: none;
	}
	
	#mobilenav {
			display: block;
			text-align: center;
	}
	
	.closebtn {
			display: block;
	}

	.overlay .closebtn {
			position: absolute;
			top: 20px;
			right: 45px;
			font-size: 60px;
	}
}

@media screen and (max-width: 1000px)
{
	body {
			padding-left: 10%;
			padding-right: 10%;
	}
	
	nav {
			disply: none;
			padding: 5%;
			background-color: rgba(0,0,0,0.1)
	}
	
	nav a {
			padding: 5%;
			font-size: x-large;
			float: none;
			display: block;
			width: 100%;
			text-align: left;
	}
	
	#mobilemenu {
			display: block;
	}
	
	#fullnav * {
			display: none;
	}
	
	#mobilenav {
			display: block;
			text-align: center;
	}
	
	.closebtn {
			display: block;
	}

	.overlay .closebtn {
		  position: absolute;
		  top: 20px;
		  right: 45px;
		  font-size: 60px;
	}
	
	.warning {
			margin: 0;
	}
	
	img {
			width: 50%;
	}
	
	h1 {
			font-size: 2.5rem;
	}

	h2 {
			font-size: 2rem;
	}

	h3 {
			font-size: 1.75rem;
	}

	h4 {
			font-size: 1.5rem;
	}

	h5 {
			font-size: 1.5rem;
	}

	h6 {
			font-size: 1.5rem;
	}

	p {
			font-size: 1.25rem;
	}

	li {
			font-size: 1.25rem;
	}
}