/********* CSS RESETS **********/

img {
	max-width:100%;
}

h1, h2, h3, p, ul, ol {
	margin: 0;
	padding: 0;
}

/********* End CSS Reset *********/
  
body {
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight:300;
	color:#a49d91;
	background-color: #f1eade;
}

/********* Hero *********/
.hero {
	position: relative;
	width: 100vw;
	height: 50vh;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 10px;
	color: #EFEFEF;
} 

.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("images/goldenfall.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
	width:100%;
    opacity: brightness(80%);
	padding-top: 20px;
}

.hero-text {
	font-family: 'Times New Roman', Times, serif;
	font-weight: 40px;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: rgb(241, 236, 226);
  }

header {
	padding-bottom:20px;
	background:#f3ede8;
}

.accordion {
	background-color: #dbd1b3;
	color: #a38560;
	cursor: pointer;
	padding: 18px;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 15px;
	transition: 0.4s;
  }
  
  .active, .accordion:hover {
	background-color: #b9b094; 
  }
  
  .panel {
	padding: 10px 18px;
	display: none;
	background-color: #eeebe0;
	overflow: hidden;
  }
#art {
	 background:#d8c8b3;
	}
	* {
		box-sizing: border-box;
	  }
	  
	body {
		margin: 0;
		font-family: libre 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	}

	#top { padding-left: 20px 0;}

	#top article { padding: 40px; }

	#top h1 {
		font-family: Arial, Helvetica, sans-serif;
		color: #b0a99d;
		text-align: center;
		padding-top: 50px;
	}

	#top p {
		padding: 20px;
		padding-top: 10px;
	}
	/* The grid: Four equal columns that floats next to each other */
	.column {
	float: left;
	width: 25%;
	padding: 20px;
	}

	/* Style the images inside the grid */
	.column img {
	opacity: 0.8; 
	cursor: pointer; 
	}

	.column img:hover {
	opacity: 1;
	}

	/* Clear floats after the columns */
	.row:after {
	content: "";
	display: table;
	clear: both;
	}

	/* The expanding image container (positioning is needed to position the close button and the text) */
	.container {
	position: relative;
	display: none;
	}

	/* Expanding image text */
	#imgtext {
	position: absolute;
	bottom: 15px;
	left: 15px;
	color: rgb(116, 100, 81);
	font-size: 20px;
	}

	/* Closable button inside the image */
	.closebtn {
	position: absolute;
	top: 10px;
	right: 15px;
	color: white;
	font-size: 35px;
	cursor: pointer;
	}

	header h2 { 
		font-style: italic;
		color:#551434;
		font-size: 5vw;
		padding-top: 30px;
		display: flex;
	}

	footer h1 { font-size: 2vw; }

	footer h2 { font-size: 12px; }

	.wild { 
		color:#55711e;
		font-size:25px;
	}

	.olives { 
		color:#551434;
		font-size:25px;
	}

	.art { 
		color:#b64c92; 
		font-size:25px;
	}


	h1 {
		text-transform:uppercase;
		font-weight:100;
	}

	p { line-height: 1.3em; }

	/********** Footer Rules **********/
	footer {
		
		background:#f3ede8;
		padding:5px;
	}

	footer h1 {
	font-size: 15px;
	}

	/* Closable 
	footer section {
		flex:1;
		padding: 5px 0;
	}
	button inside the image */
	footer section:last-of-type{
		padding-left: 5px;
		padding-top: 10px;
	}

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

	header{ 
        display: flex;
        padding-bottom: 0;
    }

    header h1 {
        font-size: 8vw;
    }

	header img {
        width: 100%;
    }

    #top p, footer p {
        font-size: 24px;
    }
}

#page {
	width: 100%;
	height: auto;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media only screen and (min-width: 600px) {
	#page {
		margin:auto;
	}
	.column {
		-ms-flex: 100%;
		flex: 100%;
		max-width: 100%;
	  }

    header{ 
        display: flex;
        padding-bottom: 0;
    }

    header h2 {
        font-size: 3.6vw;
		padding-left: 15px;
		padding-top: 17px;
    }

    header img {
        width: 100%;
    }
	.accordion {
		float: none;
		width: 100%;
	}
	footer {
		display: flex;
	}

    #top p, footer p {
        font-size: 12px;
    }
}

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

		#page {
			width:100%;
			height: auto;
			margin:auto;
		}
		
		.column {
			-ms-flex: 100%;
			flex: 100%;
			max-width: 100%;
		  }
		  .accordion {
			display: flex;
		}
		header h1 {
			font-size:75px;
		}

		header h2 {
			font-size: 12px;
		}

		footer {
			display: flex;
			background:#f3ede8;
			padding:5px;
		}

		.wild { 
			color:#55711e;
			font-size:50px;
		}
	
		.olives { 
			color:#551434;
			font-size:50px;
		}
	
		.art { 
			color:#b64c92; 
			font-size:50px;
		}
	}