style.css

body, header, nav, main, footer, h1, h3, ul, fiwure, figcaption {
			margin: 0;
			padding: 0;
			border: 0;
		}
		
		img {
			max-width: 100%;
			display: block;
		}
		
		* {
			box-sizing: border-box;
		}		
		
body {
	background-color: #c7f0d2;
}


.tab-desk{
	display: none;
}

table{
	display: none;
}


/*Styles for Hamburger menu*/
.topnav {
  overflow: hidden;
  background-color: #e0a56e;
  position: relative;
}

.topnav #myLinks {
  display: none;
}

.topnav a,.topnav p {
  color: #44592f;
  font-weight: bold;
  padding: 14px 16px;
  text-decoration: none;
  font-family: Geneva, Arial, sans-serif;
  font-size: 17px;
  display: block;
}

.topnav a.icon {
  background-color: #44592f;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #c7f0d2;
  color: #eb7f2d;
	font-family: 'Pacifico', cursive;
}
/*end HUmburger styles*/




	


container {
			padding: 2%;
		}

#welcome {
		text-align: center;
		font-size: 2em;
		
	}
	

/* The Modal (background) */
#myBtn{
	margin: 0 auto;
			display: block;
			padding: 1%;
			background-color: #e0a56e;
			font-size: 1em;
			font-weight: bold;
			color: #44592f;
			border-radius: 15px;
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #e0a56e;
  border-radius: 5px;
  width: 30%;
}

#button{
margin: 0 auto;
			display: block;
			padding: 1%;
			background-color: #e0a56e;
			font-size: 1em;
			font-weight: bold;
			color: #44592f;
			border-radius: 8px;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

@keyframes jinglebells{
		0%{transform: rotate(20deg); }
		
		100%{transform: rotate(-20deg);}
		}
		
#bells {
		animation: jinglebells 1s linear alternate infinite;
		}

	
.frame {
	position: relative;
	max-width: 200px;
	margin: 2% auto;
}

.pic-text {
	position: absolute;
	bottom: 0;
	background: rgba(0,0,0,0.5);
	color: #fff;
	width: 100%;
	padding: 20px;
	text-align: center;
	font-size: 1.5em;
	font-weight: bold;
}

#details{
	display: none;
}


/*Styles for easyzoom*/
.zoom {
			display:inline-block;
			position: relative;
		}
.zoom img {
			display: block;
		}

.zoom img::selection { background-color: transparent; }
		
/*Styles for easyzoom*/

#flickr{
	padding: 2% 20%;
}

#flickr p{
	text-align: center;
	font-weight: bold;
	font-size: 1em;
}

.image {
	float: left;
	padding: 10px;
	border: solid 1px rgb(27,45,94);
	background-color: white;
	margin: 0 30px 30px 0;
}
.image:hover {
	border-color: red;
	background-color: rgb(204,204,204);	
}

.clearLeft{
	clear: left;
}

#contactform, #mcontactform{
	padding-top:5px;
}

#contactform label{
	float:left;
  width:110px;
  padding-right:10px;
  text-align:right;
  margin-top:5px;
}

#contactform input, #contactform textarea, #mcontactform input, #mcontactform textarea{
	margin-top:5px;
}

#contactform label.error,#mcontactform label.error {
  float: right;
  width: auto;
  position: relative;
  color: red;
  font-weight:bold;
  padding-left: 5px;
}
#contactform input.error, #contactform textarea.error,#mcontactform input.error, #mcontactform textarea.error {
  border: 2px red solid;
}

#contactform #submit,#mcontactform #submit {
			margin: 0 auto;
			display: block;
			padding: 1%;
			background-color: #e0a56e;
			font-size: 1em;
			font-weight: bold;
			color: #44592f;
			border-radius: 8px;
		}



/*Styles for tablet*/
@media screen and (min-width: 630px) {
	
	.mobile{
		display:none;
	}
	
	.tab-desk{
		display: block;
	}
	
	table{
		display: block;
	}
	
	header h1 {
	text-align: center;
	color: #eb7f2d;
	font-family: 'Pacifico', cursive;
	font-size: 2em;
	padding-bottom: 12px;
	float: left;
}

#myBtn{
	
	float: right;
}

nav {
	clear: left;
	background-color: #e0a56e;

}

nav ul {
		list-style-type: none;
		text-align: center;
	}

nav li{
		display: inline-block;
		border-top: none;
		border-right: 1px solid #d69045;
		font-family: Geneva, Arial, sans-serif;
		font-size: 150%;
	}

nav li a{
		display: block;
		color: #44592f;
		padding: 0.5em 2em;
		text-decoration: none;
		font-family: Geneva, Arial, sans-serif;
	}
		
				
	nav li:last-child {
		border-right: none;
	}
	
	
	
	
	
	#grid {
		padding: 0 10%;
		display: grid;
		grid-template-columns: auto auto auto;
		grid-gap: 20px;
	}
	
	.frame {
		opacity: 0.9;
	}
	.pic-text {
		font-size: 1em;
		padding: 10px;
	}
	
	footer a{
		text-decoration: none;
	}
	
	
	
}
/*Styles for Desktop*/
@media screen and (min-width: 1015px), print {
	
	nav li a:hover{
			color: #eb7f2d;
			background-color: #c7f0d2;
	}
		
	nav li p:hover{
			color: #eb7f2d;
			background-color: #c7f0d2;
	}
		
	.pic-text {
		font-size: 1.5em;
		padding: 20px;
	}
	
	.frame {
		opacity: 0.9;
	}
	
	.frame:hover {
		opacity: 1;
		box-shadow: 8px 8px 10px #808080;
	}
	
	#accordian{
		padding-left: 10%;
	}
}