#mainNav {
	background-color: #ffffff;
	background: linear-gradient(#ebeaea, #bcbbbb);
	border-bottom: 1px solid #dedede;
}

#mainNav .navbar-brand {
    --bs-navbar-brand-padding-y: 0;
    padding: 0;
    margin: 0;
}

.main-navigation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
	background-color: #ffffff;
	background: linear-gradient(#ebeaea, #bcbbbb);
	padding-top: 0;
}

.main-footer {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
	background-color: #ebeaea; /*#2c3e50*/
	background: linear-gradient(#bcbbbb, #ebeaea);
	color: #000000;
}

#slideshow .carousel-item {
	margin-top: 155px;
    min-height: 100px;  /* or whatever height fits your design */
    background-color: #fafafa;
}

@media (min-width: 992px) {
	#slideshow .carousel-item {
		margin-top: 60px;	/* 190px */
		min-height: 25px;  /* or whatever height fits your design */
		background-color: #fafafa;
	}
}

#slideshow .carousel-caption {
    position: relative;  /* override Bootstrap's absolute positioning */
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    padding: 0;
    color: #454545;
}

.masthead {
	margin-top: 0; /* 115px */
	padding-top: 75px;
	padding-bottom: 0;
}
@media (min-width: 992px) {
	.masthead {
		margin-top: 20px;	/* 165px */
		padding-top: 0;
		padding-bottom: 0;
	}
}

.masthead-cover {
    display: flex;
    width: 100%;
    overflow: hidden;
}

.masthead-cover-img {
    display: block;
    height: auto; /* set dynamically by JS below */
    width: auto;
}

.header-logo {
	max-height: 70px;
}

.header-title {
	margin-left: 80px;
}

.contact-img {
	max-width: 35px;
	margin: .5rem;
}

@media (min-width: 992px) {
	.contact-img {
		max-width: 40px;
		margin: 1rem;
	}
}

/** Flip header cards **/
.flip-card {
    background-color: transparent;
    width: 100%;
    height: 90px;
    perspective: 1000px; /* gives the 3D depth for the flip */
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* hides the side facing away during rotation */
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
	border: 1px solid #dedede;
}

.flip-card-front {
    background-color: #fff;
    color: #222;
}

.flip-card-front img {
    max-width: 100%;
    max-height: 70%;
    object-fit: cover;
    margin-bottom: 0.75rem;
}

.flip-card-back {
    background-color: #666666;/*#2c2c54*/;
    color: #fff;
    transform: rotateY(180deg); /* pre-rotated so it's "facing back" until the parent flips */
}

#section-control-panel {
	background-color: #faf9f9;
}

/** **/
.page-section {
	scroll-margin-top: 85px;
	padding: 1rem 0;
	min-height: 100vh;
}
section:last-of-type {
    padding-bottom: 175px;
}

@media (min-width: 992px) {
	.page-section {
		scroll-margin-top: 0px;	/* 120px */
		margin-bottom: 25px;
		min-height: 100vh;
	}
	section:last-of-type {
		margin-bottom: 25px;
	}
}

.h1-title { 
	font-family: Century Gothic, CenturyGothic, sans-serif; 
	font-size: 42px; 
	font-style: normal; 
	font-variant: normal; 
	font-weight: bold; 
	line-height: 40px; 
}

.h2-title { 
	font-family: 'Forte', sans-serif; 
	font-size: 26px; 
	font-style: normal; 
	font-variant: normal; 
	font-weight: bold; 
	line-height: 30px; 
}

.h3-title { 
	font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif; 
	font-size: 18px; 
	font-style: normal; 
	font-variant: normal; 
	font-weight: bold; 
	line-height: 25px; 
}

.slide-text {
	font-family: sans-serif; 
	font-size: 20px; 
	font-style: normal; 
	font-variant: normal; 
	font-weight: normal; 
	line-height: 25px;
}

.link {
	color: #444444;
	text-decoration: none;
}

.footer-logo {
	height: 60px;
	float: right;
}

.content-text {
    font-size: 1rem;
	line-height: 1.5;
}

@media (min-width: 992px) {
    .content-text {
        font-size: 1.25rem;
		line-height: 2;
    }
}