body {
	padding-top: 70px;
 /* to prevent overlap */
	background-color: #f3d8d8;
 /* light marroon*/;
}
	 /* displays a blue border behind the title*/
	 
	 
      /*styles for the top navbar */
	  
.d-flex.justify-content-around.mt-2 {
	background-color: #f2cec6;
 /* light */
	color: #985c58;
 /* dark marron*/
	font-size: 20px;
	font-family: Palatino, serif;
}

h2 {
	color: #985c58;
 /* dark marron*/
	font-family: Palatino, serif;
	font-size: 30px;
}

navbar-nav {
}

.col-sm-4.p-3.my-auto p {
	color: #985c58;
 /* dark marron*/
	font-family: Palatino, serif;
}

p {
	color: #985c58;
 /* dark marron*/
	font-family: Palatino, serif;
	font-size: 20px;
}

.btn.btn-lg {
	color: #985c58;
/* dark marron*/
	background-color: #F2C2B33B;
 /*light marron*/
	font-family: Palatino, serif;
}

h1 {
	color: #985c58;
 /* dark marron*/;
}

#accordion .btn {
	white-space: break-spaces;
}
.accordion-button.collapsed {
	color: #985c58;
/* dark marron*/
	background-color: #F2C2B33B;
 /*light marron*/
	font-family: Palatino, serif;
	
}
.card-footer {
	color: #985c58;
 /* dark marron*/
	text-align: center;
	font-size: 15px;
	font-family: Palatino, serif;
}
	/* styling the collasp buttons*/
	
btn-md.collapsed {
	color: #985c58;
 /* dark marron*/
	text-align: center;
	font-size: 20px;
	font-family: Palatino, serif;
}

.card-header {
	color: #985c58;
 /* dark marron*/
	background-color: #F2C2B33B;
 /*light marron*/
	font-size: 20px;
	font-family: Palatino, serif;
}

a {
	color: #985c58;
 /* dark marron*/
	text-align: center;
	font-size: 20px;
	font-family: Palatino, serif;
}

.list-group-item {
	color: #985c58;
 /* dark marron*/
	font-size: 20px;
	font-family: Palatino, serif;
}

ul {
	color: #985c58;
 /* dark marron*/
	font-size: 17px;
	font-family: Palatino, serif;
}

.card-body {
	color: #985c58;
 /* dark marron*/;
}	
/* overlay text over an image*/
.text-overlay {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	padding: 0.5rem;
	text-align: center;
	font-size: 16px;
}

.image-container {
	position: relative;
	width: 100%;
	text-align: center;
}

/*Enlarged image for modal*/
.modal-dialog.picture {
	padding-left: 15px;
	padding-right: 15px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

@media only screen and (max-width: 767px) {
	.modal-dialog {
		width: 100%;
	}
}

/*Enlarged table of cost for modal*/
.modal-dialog.cost {
	padding-left: 15px;
	padding-right: 15px;
	max-width: 50%;
	margin-left: auto;
	margin-right: auto;
}

@media only screen and (max-width: 767px) {
	.modal-dialog {
		width: 100%;
	}
}