@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon&family=Open+Sans+Condensed:wght@300&display=swap');


	* {box-sizing: border-box;}	
	a {text-decoration: none; color: #000;}
	html {font-size: 16px;}

/****** THESES ARE VERY IMPORTANT VALUES DO NOT MESS  */	
	.s-container {
		position: relative; 
		display: flex; 
		justify-content: center; 
		align-items: center;  
		flex-direction: column; 
		width: 100%; 
		height: 80vh;		
	}
	
	svg {
		position: absolute;
		top: 0;
	}
/**************************************/	
		
	
/******** MAIN NAV   **/	
	.main-nav-box {
		
	}

	.main-nav-top {
		height: 0.625rem;
		flex-shrink: 0;
		align-self: stretch;
		background: #533019;
	}
	
	.main-nav {
		flex-shrink: 0;
		justify-content: center;
		
		display: flex; 
		padding: .5rem 2rem;
		align-items: center;
		gap: 20%;
		/*gap: 15.125rem;*/
		align-self: stretch;
		background: #EBE9E1;
	}

	.main-nav img:hover {
		cursor: pointer;
	}
	
	.main-nav-text-box {
		/*width: 28.4375rem;*/
	}
	
	.main-nav h3 {
		margin-bottom: 0;
		color: #000;
		text-align: center;
		/* PQ text */
		font-family: 'Open Sans Condensed', sans-serif;
		font-size: 2.25rem;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
		text-transform: uppercase;
	}
	
	.main-nav p {
		padding-top: 0;
		margin-top: 0;
		color: #000;
		text-align: center;
		/* Bullet list */
		font-family: 'Libre Caslon', serif;
		font-size: 1.25rem;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}
	
	.main-nav span {
		color: #000;
		text-align: center;
		font-family: 'Libre Caslon', serif;
		font-size: 0.8375rem;
		font-style: normal;
		font-weight: 400;
		text-transform: uppercase;
		line-height: normal;
		width: 8rem;
	}
	
	.page-nav {
		display: flex;
		padding: 0.75rem 0rem;
		justify-content: center;
		align-items: flex-start;
		align-content: flex-start;
		gap: 0.75rem;
		align-self: stretch;
		flex-wrap: wrap;
	}
	
	.page-nav a {
		text-decoration: none;
		display: flex;
		padding: 0.3rem 1.15rem;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 0.625rem;
		border-radius: 0.125rem;
		border: 1px solid #533019;
		background: #F7F5F1;
		
		color: #000;
		text-align: center;
		font-family: 'Open Sans Condensed', sans-serif;
		font-size: 1rem;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
		text-transform: uppercase;

	}
	
	.page-nav a:hover, a.current {
		background: #533019;
		color: #ebe9e1;
		text-decoration: underline;
	}
	
/******** MAIN NAV END   **/
	
/******** MODAL   **/	
	
.modal-content {
  background-color: #EbE9E1;
  position: relative;
  margin: auto;
  padding: 20px;
  width: 90%;
  max-width: 1200px;
  	border-radius: 0.125rem;
border: 2px solid #533019;	
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding: 3rem 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.80);
		
}

.modal h2, .modal h3 {
	text-align: center;
  border-bottom: 1px solid #000;
  padding-bottom: 6px;
}
.modal h3 {margin: auto 80px;}

#modalContent {

	}
	
#modalContent h2, #menu h2 {
	color: #000;
	font-family: 'Libre Caslon', serif;
	font-size: 2.5rem;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	text-transform: capitalize;
}	

#modalContent ul, #menu ul {
	column-count: 2;
    column-width: 350px;
	column-gap: 12%;
	width: 80%;
	margin: auto;
	padding: 1.75em;
		
}

#modalContent li, #menu li {
	list-style: square;
	break-inside: avoid;
	padding-bottom: .65em;	
}
#modalContent li {
	font-size: 1.3rem;
	line-height: 1.45rem;
}

#menu li {
	font-size: 1.25rem;
	list-style: none;
}

#menu ul {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: flex-start;
	align-content: flex-start;
	gap: 1.5rem;
	align-self: stretch;
	flex-wrap: wrap;	
}
	
#menu li.thumb {
		
	display: flex;
	max-width: 30%;
	min-height: 11rem;
	padding: 0.75rem;
	flex-direction: column;
	align-items: center;
	gap: 1.75rem;
	border-radius: 0.125rem;
	border: 1px solid #533019;
	background-color: #E9E9E9;
	text-align: center;
	color: #000;
}	

#menu li.thumb a {
	width:100%;
	height: 100%;
}

#menu li.thumb:hover {
	box-shadow: 4px 4px 10px #888888;	
}

#menu li.thumb:hover, #menu li.thumb a:hover {	
	background-color: #533019;
	color: #fff;
}
	
#menu li img {
	min-height: 6.25rem;
	max-width: 100%;
	flex-shrink: 0;
	align-self: stretch;		
}	
	


#slideshow-container {
  max-width: 1000px;
	
  position: relative;
  text-align: center;
  margin: auto;
	
}	

#slideshow-container div {
	/*	height: 45vh;
	max-height: 33%; */
}

#slideshow-container img {
	max-width: 100%;

	max-height: 600px;
	object-fit: contain;
	
	/*max-height: 670px;
	max-width: 100%;*/
}

/*
#slideshow-container {
  max-width: 1000px;	min-height: calc(100vh - 500px);
  position: relative;
  text-align: center;
  margin: auto;
	
}	

#slideshow-container img {
	max-width: 100%;
	max-height: 36.6vw;
	object-fit: contain;
	
	/*max-height: 670px;
	max-width: 100%;
} */
	

.mySlides {
    display: none;
}

	
.dot {
  height: 12px;
  width: 12px;
  margin: 10px 3px;
  background-color: #bbb;
  /*border-radius: 50%;*/
  display: inline-block;
  transition: background-color 0.6s ease;
  cursor: pointer;
}
	
.active {
  background-color: #533019;
}
	
#slideToggle {
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: .8rem;
	font-family: 'Open Sans Condensed', sans-serif;	
	
	display: none;
}

.toggle {
	padding: .25rem .5rem;
	border: solid 1px #533019;
	background-color: #ebece1;
	border-radius: 2px;
}

.toggle:hover {
	background-color: #533019;
	color: #ebece1;
}
	
#close {
  text-align: center;
  font-family: 'Open Sans Condensed', sans-serif;
  letter-spacing: .2em;
  display: none;
  border-top: 1px solid #000;
  padding-top: 6px;
}

#close a, .nav a {
  color: #000;	
  text-decoration: none;
}

#close a:hover, .nav a:hover {
  text-decoration: underline;
}
	
/******** MODAL END  **/	

/*	
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.75s;
  animation-name: fade;
  animation-duration: 1.75s;
}

@-webkit-keyframes fade {
  from {display: none}
  to {display: block;}
}

@keyframes fade {
  from {display: none}
  to {display: block;}
}
*/
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.75s;
  -webkit-animation-timing-function: ease-in;
  animation-name: fade;
  animation-duration: 1.75s;
  animation-timing-function: ease-in;
}

@-webkit-keyframes fade {
  from {opacity: .5}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .8}
  to {opacity: 1}

}