body { padding-top: 40px;}
h4 {font-family: "Playfair Display";}
h3 {font-family: "Playfair Display";}
p {font-family: "Open Sans"; font-size: 17px;}
tbody {font-family: "Open Sans";}
li {font-family: "Open Sans"; font-size: 17px;}
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #343a40 !important; }
.bg-hero { background-color: #ffcccd; z-index: 0}


.coverimage {display: block; position: static;}


.baseimage {
	position: relative;
	z-index: 0;
}

.overlayimage {
	position: absolute;
	display: none;
	top: 0;
  	bottom: 0;
  	left: 0;
 	right: 0;
  	opacity: 0;
 	transition: .3s ease;
	z-index: 2;
	 }

.baseimage:hover + .overlayimage {display: block;}


.titleimage {
	width: 100%;
    height: auto;
    display: flex;
	position: relative;
    justify-content: center;
    align-items: center;
    background-size: cover;
    /* filter:grayscale(70%) saturate(2);
    -webkit-filter: blur(5px); */
	}

.header-font-large{text-transform: uppercase; text-align: center; font-family: 'Playfair'; color: grey; font-size: 18vh; position:absolute; filter: drop-shadow(0px 0px 5px black); -webkit-text-stroke: 1px #578bec;}
.home-font{text-transform: uppercase; text-align: center; font-family: 'bebasregular'; color: #EE6C4D; font-size: 14vh; position: absolute;}



/*SAFETY PAGE*/
#planning {
	background-color: azure;
	padding: 2rem;
}

#rules {
	background-color: mistyrose ;
	padding: 2rem;

}

#clearing {
	background-color: rgb(255, 251, 217);
	padding: 2rem;
}

#storage {
	background-color: rgb(237, 221, 237);
	padding: 2rem;

}


/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom:.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#5bc0de }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }

/* footer */
footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }


@media all and (min-width: 992px) {
	.navbar .nav-item .dropdown-menu{ display: none}
	.navbar .nav-item:hover .nav-link{   }
	.navbar .nav-item:hover .dropdown-menu{ display: block; }
	.navbar .nav-item .dropdown-menu{ margin-top:0; }
}