@charset "UTF-8";
/* CSS Document */
html {scroll-behavior: smooth !important;}

body {
            opacity: 0;
            animation: fadeIn 2s forwards;
        }
        @keyframes fadeIn {
            to {
                opacity: 1;
            }
        }

@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
    max-width: 2500px !important;/*1280px before 95%*/
    margin: 0 auto 0 !important;
    }

a {scroll: smooth !important;}

h1 {font-size: 2em;}
	h2 {font-size: 2.6em !important; } 
    h3 {font-size: 1.4em !important; border: 0px solid blue}

h1, h2, h3, h4, h5, h6 {
	color: white;
}

p {
	text-align: left;
	color: #aaa;
	font-size: 95% !important;
}
@media screen and (max-width: 480px) {
	h1 {border: 0px solid blue; font-size: 1.3em !important; font-weight: 700} 
}


.jumbotron {/*
    background-image: url(/images/HHH.jpg) !important;
    background-size: contain !important;
    background-repeat: no-repeat; */
}

.bodySection {
    max-width: 1280px;
    margin: 0 auto 0;
}

.navbar-toggler {}
.navbar-toggler, .navbar-toggler:hover, .navbar-toggler:active  {
  border-color: transparent !important;
}/*UNRESOLVED REVISIT*/

.nav, #navbarSupportedContent/*, .navbar, .navbar-expand-lg, .navbar-light, .bg-light*/  {
    background-color: white;
    padding-left: 1em;
    margin-left: 1em;
    min-width: 1024px !important;
	/*max-width: 3em !important;*/
    border: 0px solid blue !important;
	opacity: .95 !important;
	border-bottom: .19em solid #999 !important; 
	border-left: .1em solid #888 !important; 
	border-right: 1px solid black; 
	opacity: .94; 
	border-radius: 0px 0px 0px 12px !important;
	font-weight: bold!important 
} /*@media and screen and (max-width: 1924px) {
	#navbarSupportedContent, .collapse {border: 3px solid blue !important}}*/

.navbar-collapse {border: 3px solid blue !important;
    margin-top: -0em
    }
.nav-item .dropdown {display: block}

.header .headerImg { 
        margin-top: 2.8em !important;
        border: 2px solid orange ;
        border-radius: 0 0 0 1em ;
    }
@media screen and (max-width: 479px) {
    .hide-mobile {
        display: none !important;
        visibility: hidden !important;
    }
    .header .headerImg666 {
        margin-top: 3em !important}
     .navbar-toggler {
        margin-right: -1em !important;
        width: 50px;
        border: none;
    }
}
@media screen and (min-width: 479px) {
    .hide-desktop {
        display: none !important;
        visibility: hidden !important;    
    }
     .navbar-toggler  {border: 0px solid blue;
        margin-top: -10px
    }
    
}

.navbar {
    position: fixed;
    width: 100%;
    z-index: 99; 
    opacity: 1;
    height: 2.7em;
    
    }@media screen and (max-width: 667px) {
		.placeholder {}
}

.allCaps {
    text-transform: uppercase;
}

.dark-blue {color: darkblue !important;
    
}
.darkgoldenrod {color: darkgoldenrod !important}

.btnText320 {font-size: 1em !important;
    color: #fff !important;
    margin-top: 0em;
}

.caption {
    text-align: center !important; 
    margin: 0 auto 0 !important;
    border: 0px solid blue !important;
    color: #777;
    font-style:italic;
}

.collapse {
	background-color: #F8F9FA !important; 
	/*opacity: .95;*//*superseded @ line 44 #navbarSupportedContent*/ 
	border-bottom: 2px solid #FF8C00 !important; 
	border-left: 2px solid #FF8C00 !important; 
	border-radius: 0px 0px 0px 12px; 
	margin-top: -1px;
	box-shadow: 9px 1px 22px 0px black;
	
}

.blockquote {
	font-size: 1.05rem !important
}



p {
	font-family: "Arial Narrow", sans-serif, "Helvetica Neue", "Lucida Grande", Arial;
  font-stretch: auto !important;
	font-size: 1em 
}@media screen and (max-width: 480px) {
	
}

.opacityNav {
	opacity: .91 !important;
}
#top a:hover {
	text-decortion: none; 
}

.mobileMarginLeft { /*originally meant for poems but not used. */
	border: 0px solid blue !important;
}@media screen and (max-width: 480px) {
	.mobileMarginLeft {
	margin-left: 7% !important; margin-top: 1em;
	border: 0px solid blue;
	width: 93%}
}



.borderBlue3 {
	border: 3px solid blue;
}

.fluid-text {
	/*font-size: 120% !important;*/
}

.header4Black {
	background-color: #333
}

.navBgColor {
	background-color: black
}

.flushRight {
	text-align: right;
	margin: 3% 2% 0 1%;
}
.flushLeft {
	text-align: left;
	margin: 3% 0 0 2%;
}
.flushCenter {
	text-align: center;
	margin: 3% 0 0 0;
	
}

.copyright {
	font-size: .7em !important
}

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.bg-light {
	opacity: .95 !important
}
a.bg-light:hover, a.bg-light:focus,
button.bg-light:hover,
button.bg-light:focus {
  background-color: #dae0e5 !important;
}

hr {
	color: white !important;
	border: 1px solid white;
	opacity: .15;
	margin: 1em auto 1em;
	width: 64%;
}

.hr100 {
	width: 100%;
}

/*slide*/

#slider {
    position: absolute;
    width: 100%;
    
    transform: translateX(+100%);
    -webkit-transform: translateX(+100%);
}

.slide-in {
    animation: slide-in 0.9s forwards;
    -webkit-animation: slide-in 0.9s forwards;
}

.slide-out {
    animation: slide-out 0.5s forwards;
    -webkit-animation: slide-out 0.6s forwards;
}
    
@keyframes slide-in {
    100% { transform: translateX(0%); }
}

@-webkit-keyframes slide-in {
    100% { -webkit-transform: translateX(0%); }
}
    
@keyframes slide-out {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}

@-webkit-keyframes slide-out {
    0% { -webkit-transform: translateX(0%); }
    100% { -webkit-transform: translateX(-100%); }
}

/*End Slide*/


.lyrics {
	font-size: 1.1em !important;
	font-family: "Arial Narrow", sans-serif;
	text-align: left; max-width: 540px; 
	margin: 0 auto 0;
	color: teal; 
	line-height: 2em !important;
}@media screen and (max-width: 414px) {
	.lyrics {border: 0px solid blue;
			font-size: .9em;	
	}
}