@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,500;1,6..96,500&family=Lato:ital,wght@0,300;0,700;1,300&display=swap');
/*
  font-family: "Bodoni Moda", serif;
  font-family: "Lato", sans-serif;
*/
html {
	--font-heading: "Bodoni Moda", serif;
	--font-body: "Lato", sans-serif;
	--color-dkBlue: RGB(40,59,81);
	--color-dkBlueRGBA: RGBA(40,59,81,.8);
	--color-ltBlue: RGB(181,206,210);
	--color-mdGreen: RGB(74,99,96);
	--color-hilight: RGB(105,196,255);
	--color-grayBlue: RGB(186,196,206);
	--color-grayBlueRGBA: RGBA(186, 196,206,.5);
}

/****/
/*cover page styles*/
@media (min-width: 768px) {
      .bi {
        vertical-align: -.125em;
        fill: currentColor;
      }

      .bd-mode-toggle {
        z-index: 1500;
      }

      .bd-mode-toggle .dropdown-menu .active .bi {
        display: block !important;
      }

	/*separate code to help carousel on mobile*/
	.carousel-inner {
		height: 560px;
	}

}
/*end cover page styles*/



body {
	font-family: var(--font-body);
	padding-bottom: 0px;
}

#bkgdVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: 1;
}

.cover-container {
	position: fixed;
	z-index: 10;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
}

h1 {
	text-shadow: 1px 1px 15px RGBA(0,0,0,.35);
}

h3.brand, h3.brand:link, nav h3.brand, nav h3.brand a:link {
	color: #fff;
	text-decoration: none;
}

header {
	background-color: var(--color-dkBlueRGBA);
}

.btn {
	background-color: var(--color-dkBlueRGBA);
	color: var(--color-ltBlue);
	font-family: var(--font-heading);
}

.btn:hover {
	background-color: var(--color-dkBlue);
	color: var(--color-hilight);
}

.whiteBox {
	background-color: RGBA(255,255,255,.5);
	color: var(--color-dkBlue);
}

.cvr.logo {
	max-width: 80%;
	height: auto;
	max-height: 300px;
}

header nav a:link {
	color: #fff;
	border-bottom: 4px solid RGBA(40,59,81,0);
}

header nav a:hover {
	background-color: RGBA(255,255,255,.2);
	border-bottom: 4px solid var(--color-hilight);
}


footer .nav-link {color: #fff;}


#overview header #navOverview,
#products header #navProducts,
#cemeteries header #navCemeteries,
#ourstory header #navStory,
header nav a:link.active {
	border-bottom: 4px solid var(--color-hilight);
}



.icon {
	height: 100px;
	width: auto;
	max-width: 100%;
}

/****/
/*overview page*/
#overview .logo {
	height: 200px;
	width: auto;
	max-width: 100%;
	padding: 20px;
	background-color: RGBA(255,255,255,.75);
}

#overview .hero {
	background-image: url('../img/shutterstock_2452666027.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.bkgd-ltGray {
	background-color: var(--color-grayBlueRGBA);
}

.carousel .carousel-item {height: 300px;}
.carousel p.lead {
	font-family: var(--font-heading);
	font-style: italic;
}

.carousel .imgContainer {
	min-height: 300px;
}

.carouselImg {
	background-repeat: no-repeat;
	background-size: cover;
	background-color: #acacac;
}

#joyceImg {
	background-image: url('../img/shutterstock_2115835496-sm.jpg');
	background-position: center center;
}
#jasonImg {
	background-image: url('../img/shutterstock_2218725909-sm.jpg');
	background-position: center center;
}
#mikeyImg {
	background-image: url('../img/shutterstock_1632308131-sm.jpg');
	background-position: center center;
}

/****/
/*products page*/
#products .coverImg {
	background-image: url('../img/Firefly_2.jpg');
	background-size: cover;
	background-position: center 72%;
}

#products h1 {color: #fff;}

#products .productImg {
	width: 100%;
	height: auto; 
}

/****/
/*our story page*/
#ourstory .coverImg {
	background-image: url('../img/Firefly family members of all ages, both men and women gathered in front of tombstone in cemetery lo.jpg');
	background-size: cover;
	background-position: center 40%;
}

.feature-icon-small {
	/*background-color: var(--color-dkBlue);
	height:80px;
	width: 80px;*/
	height: 100px;
}
.feature-icon-small img {
	max-height: 90%;
	max-width: 90%;
	width: auto;
}


#ourstory .imgContainer {height: 400px;}
#ourstory .img-fluid {max-height: 100%;}


/****/
/*cemeteries*/
#cemeteries .coverImg {
	background-image: url('../img/Firefly modern headstone in peaceful cemetery 36137.jpg');
	background-size: cover;
	background-position: center 14%;
}