@font-face {
    font-family: 'bold-houschka';
    src: url('/fonts/HouschkaAltPro-Bold.woff2'),
	 url('/fonts/HouschkaAltPro-Bold.woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: 'extra-houschka';
    src: url('/fonts/HouschkaAltPro-ExtraBold.woff2'),
	 url('/fonts/HouschkaAltPro-ExtraBold.woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
    font-family: 'medium-houschka';
    src: url('/fonts/HouschkaAltPro-Medium.woff2'),
	 url('/fonts/HouschkaAltPro-Medium.woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
    font-family: 'light-houschka';
    src: url('/fonts/HouschkaAltPro-Light.woff2'),
	 url('/fonts/HouschkaAltPro-Light.woff');
	font-weight: normal;
	font-style: normal;
}





html{scroll-behavior: smooth;}

html, body, p, ul, li, a, div, article, main, header{ font-family: 'medium-houschka'; color: #2c2c2c;}

h1, h2, h3, h4, h5{ font-family: 'extra-houschka'; font-weight: normal;}
h1, h2{color: #fff; }
h3, h4, h5{color: #4a0d66;}
/*H1*/
@media (min-width: 100px) {
    h1{font-size: 36px;}
    h2, h3{font-size: 26px;}
    h4{font-size: 22px;}
    h5{font-size: 18px;}
}
@media (min-width: 768px) {
    h1{font-size: 40px;}
    h2, h3{font-size: 32px;}
    h4{font-size: 24px;}
    h5{font-size: 18px;}
}
@media (min-width: 1200px) {
    h1{font-size: 50px;}
    h2, h3{font-size: 32px;}
    h4{font-size: 26px;}
    h5{font-size: 18px;}
}
/*P*/
@media (min-width: 100px) { a, p{font-size: 18px;} }
@media (min-width: 1200px) { a, p{font-size: 22px;} }

/*LINKS*/
a {
    color: #359A8E;  
    text-decoration: none;
}
a:hover {
    color: #256D65;
    text-decoration: none;
}
a.linkArrow:hover, a.linkArrow{text-decoration: none; }
a.linkArrow i.fa-arrow-right{ text-decoration: none; margin-right: 10px; font-size: 14px;}
a.linkArrow i.fa-chevron-right{ text-decoration: none; margin-left: 10px; font-size: 14px;}
a.linkArrow span{ text-decoration: none;}
a.linkArrow:hover span{ text-decoration: underline;}
/*BUTTONS*/

.btn{
    font-size: 18px;
    padding: 18px 40px;
}

.btn-primary{
    background-color: #4A0D66;
    border-color: #4A0D66;
    color: #fff;
    font-family: 'extra-houschka';
}
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show>.btn-primary.dropdown-toggle:focus,
.btn-primary:active,
.btn-primary:hover{
    background-color: #37094C;
    border-color: #37094C;
    color: #fff;
}
.btn-secondary{
    background-color: #58595B;
    border-color: #58595B;
    color: #fff;
    font-family: 'extra-houschka';
}
.btn-secondary:active,
.btn-secondary:hover{
    background-color: #808285;
    border-color: #808285;
    color: #fff;
}
.btn-secondary.green{
    background-color: #359A8E;
    border-color: #359A8E;
    color: #fff;
    font-family: 'extra-houschka';
}
.btn-secondary.green:active,
.btn-secondary.green:hover{
    background-color: #256D65;
    border-color: #256D65;
    color: #fff;
}
.btn-secondary.orange{
    background-color: #FFA400;
    border-color: #FFA400;
    color: #fff;
    font-family: 'extra-houschka';
}
.btn-secondary.orange:active,
.btn-secondary.orange:hover{
    background-color: #E09000;
    border-color: #E09000;
    color: #fff;
}
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show>.btn-primary.dropdown-toggle:focus,
.btn-primary:focus, 
.btn-primary.focus{box-shadow: 0 0 0 0.2rem rgba(130,138,145,.5);}

.btn-primary.chevron, .btn-secondary.chevron{line-height: 15px;}
.btn-primary.chevron::after, .btn-secondary.chevron::after{
    font: var(--fa-font-solid);
    content: "  \f054";
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;

    text-decoration: none;
    float: right;
    white-space: pre;
    padding: 3px 0px 0px;
}
/**/
.btn-primary.stacked{
    font-size: 18px;
    color: #fff;
    -webkit-box-shadow: 0 7px #37094C;
    -moz-box-shadow: 0 7px #37094C;
    box-shadow: 0 7px #37094C;
    border: 0px;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
    vertical-align: top;
    margin-bottom: 2px;
}
.btn-primary:hover.stacked{
    border: 0px;
    -webkit-box-shadow: 0 5px #37094C;
    -moz-box-shadow: 0 5px #37094C;
    box-shadow: 0 5px #37094C;
    margin-top: 2px;
    margin-bottom: 0px;
}
.btn-secondary.stacked{
    font-size: 18px;
    color: #fff;
    background-color: #808285;
    -webkit-box-shadow: 0 7px #58595B;
    -moz-box-shadow: 0 7px #58595B;
    box-shadow: 0 7px #58595B;
    border: 0px;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
    vertical-align: top;
    margin-bottom: 2px;
}
.btn-secondary:hover.stacked{
    border: 0px;
    background-color: #808285;
    -webkit-box-shadow: 0 5px #58595B;
    -moz-box-shadow: 0 5px #58595B;
    box-shadow: 0 5px #58595B;
    margin-top: 2px;
    margin-bottom: 0px;
}
.btn-secondary.green.stacked{
    font-size: 18px;
    color: #fff;
    background-color: #359A8E;
    -webkit-box-shadow: 0 7px #256D65;
    -moz-box-shadow: 0 7px #256D65;
    box-shadow: 0 7px #256D65;
    border: 0px;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
    vertical-align: top;
    margin-bottom: 2px;
}
.btn-secondary.green:hover.stacked{
    border: 0px;
    background-color: #359A8E;
    -webkit-box-shadow: 0 5px #256D65;
    -moz-box-shadow: 0 5px #256D65;
    box-shadow: 0 5px #256D65;
    margin-top: 2px;
    margin-bottom: 0px;
}
.btn-secondary.orange.stacked{
    font-size: 18px;
    color: #fff;
    background-color: #FFA400;
    -webkit-box-shadow: 0 7px #E09000;
    -moz-box-shadow: 0 7px #E09000;
    box-shadow: 0 7px #E09000;
    border: 0px;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
    vertical-align: top;
    margin-bottom: 2px;
}
.btn-secondary.orange:hover.stacked{
    border: 0px;
    background-color: #FFA400;
    -webkit-box-shadow: 0 5px #E09000;
    -moz-box-shadow: 0 5px #E09000;
    box-shadow: 0 5px #E09000;
    margin-top: 2px;
    margin-bottom: 0px;
}
/*****************/
/*****************/
/*BACK TO TOP*/
.backToTop a:active, .backToTop a:visited, .backToTop a:link{text-decoration: none; }
.backToTop a{display: inline-block; width: auto; font-size: 4px;line-height: 7px; margin-bottom: 50px; margin-top: 50px;}
.backToTop a:hover{ text-decoration: none; }
.backToTop a::after{
    clear: both;
    content: "BACK TO TOP";
    display: block;
    color: #359A8E;
    text-decoration: underline;
    font-size: 20px;
    width: auto;
    text-align: center;
    line-height: 30px;
    padding-bottom: 5px;
}
.backToTop a:hover::after{
    text-decoration: none;
}
.backToTop #angleUp{height: 35px; width: auto; margin-bottom: 15px;  }
.backToTop #angleUp path{fill: #359A8E; }
/*
BACKTOTOP WITH ID
*/
a#backToTop:active, a#backToTop:visited, a#backToTop:link{text-decoration: none; }
@media(min-width: 100px){
    a#backToTop{
      display: inline-block;
      width: auto;
      font-size: 4px;
      line-height: 7px;
      margin-bottom: 50px; margin-top: 10px;
    }
}
@media(min-width: 768px){
    a#backToTop{
      display: inline-block;
      width: auto;
      font-size: 4px;
      line-height: 7px;
      margin-bottom: 50px; margin-top: 100px;
    }
}


@media(min-width: 992px){
    a#backToTop{
      display: inline-block;
      width: auto;
      font-size: 4px;
      line-height: 7px;
      margin-bottom: 50px; margin-top: 90px;
    }
}
@media(min-width: 1200px){
    a#backToTop{
      display: inline-block;
      width: auto;
      font-size: 4px;
      line-height: 7px;
      margin-bottom: 50px; margin-top: 75px;
    }
}
/* special break */
@media(min-width: 1202px){
    a#backToTop{
      display: inline-block;
      width: auto;
      font-size: 4px;
      line-height: 7px;
      margin-bottom: 50px; margin-top: 70px;
    }
}
a#backToTop:hover{ text-decoration: none; }
a#backToTop::before{
    clear: both;
    /* content: "Listen to the songs and stories"; */
    content: "Hear the stories";
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    width: auto;
    text-align: center;
    line-height: 30px;
    padding-bottom: 5px;

}
a#backToTop:hover::before{
    text-decoration: underline;
}
#backToTop #chevronDown{height: 35px; width: auto; margin-bottom: 15px;  }
#backToTop #chevronDown path{fill: #fff; }


/**/

.w-33{
    width: 33%;
}


.mainlogo_header {
    max-width: 350px;
    width: 100%;
}


.mainlogo_footer {
    max-width: 400px;
    width: 100%;
}





#navigation{
    background-color: #4a0d66;
    padding: 10px 0px;
}
#navigation ul{margin-bottom: 0px;}
#navigation ul li{
    float: left; 
    width: auto;
    list-style: none; 
    margin-left: 10px;      
}
#navigation ul li a{
    color: #fff;
}
#navigation ul li a:hover{
    text-decoration: underline; 
    color: #fff;
}
#navigation .btn-secondary{
    background-color: #4a0d66;
    border: 1px solid #fff; 
    text-decoration: none; 
}
#navigation .btn-secondary:hover{
    border: 1px solid #ccc; 
    text-decoration: none; 
    background-color: #37094C;
}
#navigation .btn-secondary:focus, 
#navigation .btn-secondary:active{
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
}






.logoBar{ 
    background-color: #4a0d66;
    padding-top: 20px; 
    padding-bottom: 20px; 
}
.logoBar .st0,
.logoBar .cls-1{fill: #fff; }

.logoBar #musicMomentsLogo,
.logoBar #musicMomentsTopLogo{
    width: auto;
/*    height: 60px; */
    height: 45px;
}
/**/
.logoBar .hitBox{
    height: 50px; 
/*    border: 1px solid #ff0000;*/
    display: inline-block;
    cursor: pointer;
}
.logoBar .hitContainer{
    width: 400px; 
    height: auto; 
    display: block; 
/*    border: 1px solid #fff; */
    z-index: 20; 
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0; 
    text-align: left; 
}
.logoBar .hitBox#musicMoments{ 
    width: 205px;
}
.logoBar .hitBox#alzheimers{ 
    width: 154px;
    margin-left: 10px; 
    margin-right: 18px; 
}
/**/
.logoBar .mobile .hitBox{
    height: 30px; 
/*    border: 1px solid #ff0000;*/
    display: inline-block;
    cursor: pointer;
    z-index: 20; 
    top: 0px; left: 0px; right:0px; bottom: 0px; 
    position: absolute; 
 
    
}

.logoBar .mobile .hitBox#musicMoments,
.logoBar .mobile .hitBox#alzheimers{ 
    margin-left: auto; 
    margin-right: auto;
    width: 250px;
}
.logoBar .mobile .hitBox#musicMoments{ }
.logoBar .mobile .hitBox#alzheimers{    margin-top: 35px; }







@media(min-width:100px ){
    .banner{
        background-color: #4a0d66;
        padding:0px;
        background-repeat: no-repeat;
        background-position:  0 0;
        background-size: cover;
        background-image: url(/musicmoments/images/mobile-banner-sting.webp);
    }
    .bannerHeight{
        min-height: 515px;
    }
    .verticalAlign{
        padding: 30px inherit;
    }

}
@media (min-width: 768px) {
    .banner{
        background-image:none;
        background-color: #4a0d66;
        padding:0px;
        background-repeat: no-repeat;
        background-position:  0 0;
        background-size: cover;
    }
    .bannerHeight{
        min-height: 650px;
    }
    .verticalAlign{
        padding: 30px inherit;
    }
}

/* Sean: changed text-transform: uppercase for homepage H1 */

h1 {font-weight: normal; margin-right: 10px; margin-left: 10px; text-transform: uppercase;}
h1 .thin{ font-family: 'light-houschka';}
h1 .bold{ font-family: 'medium-houschka'; font-weight: 900; }
h1 .extra{ font-family: 'extra-houschka';}

/***AREA1***/
#area1{
    padding: 30px 0px;
    background-color: #58595B;
}
#area1 p, #area1 h3, #area1 h4, #area1 h5{ color: #fff;}

/***AREA2***/
#area2{
    padding: 30px 0px;
    background-color: #359A8E;
}
#area1 h3, #area1 h4, #area1 h5{ margin-bottom: 20px; }
.whiteText, .whiteText p, .whiteText h3, .whiteText h4, .whiteText h5{ color: #fff;}
.heroImage{
        background-color: #58595b;
        background-repeat: no-repeat;
}
@media (min-width: 100px) {
    .heroImage{
        background-size: auto  ;
        background-position: bottom center ;
        height: 500px;
    }
    .planetImage{ background-image: url(../images/stock-background-mobile.jpg);}
}
@media (min-width: 768px) {
    .heroImage{
        background-size: auto 100% ;
        background-position: 0 0 ;
        height: auto;
    }
    .planetImage{ background-image: url(../images/stock-background.jpg);}
}
/*AREA3*/
#area3{
    padding: 30px 0px;
    background-color: #4A0D66;
}
#area3 p, #area3 h3, #area3 h4, #area3 h5{ color: #fff;}

/***FEATURED CARD***/
.featuredCard{
    -webkit-border-radius: 12px;
    -moz-border-radius:    12px;
    border-radius:         12px;
    -webkit-box-shadow: 1px 2px 4px 2px #000;
    -moz-box-shadow:    1px 2px 4px 2px #000;
    box-shadow:         1px 2px 4px 2px #000;
    background-color: #fff;
    padding: 0px 0px 20px ;
}
.featuredCard p, .featuredCard h3, .featuredCard h4, .featuredCard h5{
    color: #808285;
    padding: 0px 15px 0px;
}
.cardImg, .cardImg img{
    -webkit-border-radius: 12px 12px 0 0;
    -moz-border-radius:    12px 12px 0 0;
    border-radius:         12px 12px 0 0;

}
.cardImg img{
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.cardImg{
    margin-bottom: 20px;
}


@media (min-width: 100px) {
    .cardImg img{width: 100%; height: 300px; background-size: cover; }
}
@media (min-width: 576px) {
    .cardImg img{width: 100%; height: 300px; }
}
@media (min-width: 768px) {
    .cardImg image{ width: 100%; height: 250px; }
}
@media (min-width: 992px) {
    .cardImg img{width: 100%; height: 200px; }
}
@media (min-width: 1200px) {
    .cardImg img{width: 100%; height: 200px; }
}

.cardImg.img01 img{ background-image: url(../images/carousel/01.jpg);}
.cardImg.img02 img{ background-image: url(../images/carousel/02.jpg);}
.cardImg.img03 img{ background-image: url(../images/carousel/03.jpg);}
.cardImg.img04 img{ background-image: url(../images/carousel/04.jpg);}
.cardImg.img05 img{ background-image: url(../images/carousel/05.jpg);}
.cardImg.img06 img{ background-image: url(../images/carousel/06.jpg);}


/***BACKGROUND BRAINS***/
.bgBrainPurple{
    background-image: url(../images/background-pattern-purple.gif);
    background-position: 0 0 ;
    background-repeat: repeat;
    background-color: 4A0D66;
}
.bgBrainGray{
    background-image: url(../images/background-pattern-gray.gif);
    background-position: 0 0 ;
    background-repeat: repeat;
    background-color: 4A0D66;
}
.bgBrainGreen{
    background-image: url(../images/background-pattern-green.gif);
    background-position: 0 0 ;
    background-repeat: repeat;
    background-color: 4A0D66;
}
/***musicHasAnAmazingPower***/
h3#behindTheMusic{margin-top: 32px; }

h3#favoriteArtists {margin-top: 50px; margin-bottom: 50px;}
#musicHasAnAmazingPower{ margin-bottom: 40px;  }

#musicHasAnAmazingPower i{
    display: block;
    float: left;
    width: auto;
    height: auto;
    font-size: 69px;
    font-style: normal;
    line-height: 64px;
    font-family: extra-houschka;
    padding: 0px 15px 0 0;
}

#oneAlbum{ 
    margin-bottom: 45px; 
}



@media(min-width: 100px){
    .profiles a{display: block;
        border: 2px solid #848484;
        background-color:#f1f2f2;
        padding: 5px;
        border-radius: 100px;
        -webkit-border-radius: 100px;
        -moz-border-radius: 100px;
        vertical-align: middle;
        line-height: 0px;
        text-align: left;
    }
    .profiles a:active, .profiles a:focus, .profiles a:hover{
        background-color: #d1d3d4;
        border-color: #4a0d66;
    }
}

@media(max-width: 767px){
    .profiles {
        max-height:140px;
    }
}

@media(min-width: 768px){
    .profiles{text-align: center;}
    .profiles a{
        display: block;
        border: 0;
        background-color: transparent;
        padding: 0;
        border-radius: unset;
        -webkit-border-radius: unset;
        -moz-border-radius: unset;
        vertical-align: top;
        line-height: 0px;
        text-align: center;
    }
    .profiles a:active, .profiles a:focus, .profiles a:hover{
        background-color: transparent;
        border-color: unset;
    }
}

@media(min-width: 100px){
    .profiles .description{
        display: inline-block;
        vertical-align:top;
        /* margin-top: 5%; */
        margin-top: 39px;
        line-height: 22px;
    }
}
@media(min-width: 768px){
    .profiles .description{
        display: inline-block;
        vertical-align:top;
        margin-top: 20px;
        line-height: 22px;
    }
}
@media(min-width: 100px){
    .profiles a::before{
        content: "";
        font-size: 0px;
        width:100px ;
        height:100px;
        display: inline-block;
         border-radius: 100px;
        -webkit-border-radius: 100px;
        -moz-border-radius: 100px;
        background-size:cover;
        background-repeat: no-repeat;
        background-position: center;
        margin-right: 5px;
        margin-top: 0px;
    }
}

@media(min-width: 360px){
    .profiles a::before{
        margin-right: 20px;
    }
}

@media(min-width: 768px){
    .profiles a::before{
        padding: 100% 0 0 0 ;
        content: "";
        font-size: 0px;
        width:100%;
        height:auto;
    /*    padding: 0 50% 0 0 0;*/
    /*    float: left; */
        display: block;
         border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        background-size:cover;
        background-repeat: no-repeat;
        background-position: center;
        margin-right: 0px;
        margin-top: 0px;
    }


}




@media(min-width: 100px){
	#oneAlbum #anthonyHamilton.profiles{margin-top: 15px;}
	#oneAlbum .profiles{ margin-top: 0px; margin-bottom: 10px; }
}
@media(min-width: 768px){
	#oneAlbum .profiles{ margin-top: 15px; margin-bottom: 10px; }
}



/*SHARE YOUR STORY USING #MYMUSICMOMENTS*/
#shareYourStory{
    background-image: url(../images/social-background.webp);
    background-repeat: no-repeat;
    background-position: 50% 20%  ;
    background-size: cover;
     color: #fff;
    text-align: center;
    height: 550px;
}
#shareYourStory #socialButtons, #shareYourStory h3, #shareYourStory p{
    color: #fff;
}

#shareYourStory h3{
    font-size: 8vw;
}

@media(min-width: 576px){
    #shareYourStory h3{
        font-size: 36px;
        margin-left: 5.0rem;
        margin-right: 5.0rem;
    }}

.alignVertical{
    vertical-align: middle;
    display: table-cell;
}
#socialButtons a#fb, #socialButtons a#t, #socialButtons a#ig{
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 45px;
    width: 45px;
    display:inline-block;
}
#socialButtons a#t{margin-left: 20px; margin-right: 20px; }
#socialButtons{margin-top: 40px; }


/*ABOUT THE ALZHEIMERS ASSOCIATION*/
#aboutTheAlzheimersAssociation{
    background-color: #f1f2f2;
    padding:60px 0 54px ;
}
#aboutTheAlzheimersAssociation .alzCard{
    background-color: #fff;
    width: 100%;
    -webkit-border-radius: 4px;
    -moz-border-radius:    4px;
    border-radius:         4px;
    -webkit-box-shadow: 1px 1px 2px 1px #808285;
    -moz-box-shadow:    1px 1px 2px 1px #808285;
    box-shadow:         1px 1px 2px 1px #808285;
    padding: 20px 0 20px 0px;
    display: table; /* for vertical alginment */
    height: 270px; /* for vertical alginment */
}
#aboutTheAlzheimersAssociation .alzCard .alignVertical{
    display: table-cell;
    vertical-align: middle;
}
/* TOPIMAGE*/

#aboutTheAlzheimersAssociation .topImage .alzCard{
    min-height: 450px;
    padding: 0 0 20px 0px;
}

#aboutTheAlzheimersAssociation .topImage .alzCard::before{
    content: " ";
    font-size: 0px;
    width: 100%;
    padding: 50% 0 0 0;
    display: block;
    background-size: cover;
    background-position: center;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius:    4px 4px 0 0;
    border-radius:         4px 4px 0 0;
}



.description h4{
    font-size:4vw;
    color: #2c2c2c;
}

.profiles a:hover h4{ 
    text-decoration: none; 
    color: #359A8e;
}

@media(min-width: 360px){
    .description h4 {
        font-size:18px; 
    }
}

@media(min-width: 768px){
    .description h4 {
        font-size:22px; 
    }
    
    .profiles p{
        margin-bottom: 0px; 
    }
}


@media(min-width: 100px){
    #aboutTheAlzheimersAssociation h4{
        font-size: 26px;
    }
    #aboutTheAlzheimersAssociation p{
        font-size: 18px;
        max-width: 740px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media(min-width: 1200px){
    #aboutTheAlzheimersAssociation h4{
        font-size: 32px;
    }
    #aboutTheAlzheimersAssociation p{
        font-size: 22px;
        max-width: 740px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Sean: Put original .alzCard into min-width sections for mobile and desktop.
Use desktop as original, font-size: 22px updated for mobile  */

@media(min-width: 100px){
    #aboutTheAlzheimersAssociation .alzCard h5{
        font-size: 22px;
        font-weight: normal;
        font-family: 'bold-houschka';
        margin-top: 0px;
    }
    #aboutTheAlzheimersAssociation .alzCard p{
        font-size: 18px;
        margin-left: 15px;
        margin-right: 15px;
    }
    #aboutTheAlzheimersAssociation .alzCard a.btn{
        padding: 10px 50px;
    }
    #aboutTheAlzheimersAssociation .alzCard a.btn:hover{}
}

@media(min-width: 1200px){
    #aboutTheAlzheimersAssociation .alzCard h5{
        font-size: 26px;
        font-weight: normal;
        font-family: 'bold-houschka';
        margin-top: 0px;
    }
    #aboutTheAlzheimersAssociation .alzCard p{
        font-size: 18px;
        margin-left: 15px;
        margin-right: 15px;
    }
    #aboutTheAlzheimersAssociation .alzCard a.btn{
        padding: 10px 50px;
    }
    #aboutTheAlzheimersAssociation .alzCard a.btn:hover{}
}







/*BANNER*/
#banner{
    background-color: #fff;
}

/*GRAY AREA*/

.grayBG{
    background-color: #f1f2f2;
    padding: 30px 0 1px 0;
}

@media(min-width: 768px){
    .grayBG{
        background-color: #f1f2f2;
        padding: 30px 0px 60px 0px;
    }
}
#subpage .banner{}

#subpage #musicHasAnAmazingPower h4{
    font-size: 32px;
    font-family:'extra-houschka';
    margin-top: 60px;
}
@media(min-width: 100px){
    #subpage #musicHasAnAmazingPower h4{ margin-bottom: 0px;}
}
@media(min-width: 576px){
    #subpage #musicHasAnAmazingPower h4{ margin-bottom: 0px;}
}
@media(min-width: 768px){
    #subpage #musicHasAnAmazingPower h4{ margin-bottom: 20px;}
}
@media(min-width: 992px){
    #subpage #musicHasAnAmazingPower h4{ margin-bottom: 30px;}
}

/**/
#subpage #banner .soundCloudClip{ margin-top: 30px; margin-bottom: 30px; }

#subpage #banner h1{ color: #4a0d66; margin-top: 50px; margin-bottom: 10px; text-transform: none;}

/* Sean - Added font-size: 26px for the top banner h2 artist song title */
#subpage #banner h2{
    color: #2c2c2c;
    margin-bottom: 40px;
    font-style: italic;
    font-family: 'bold-houschka', sans-serif;
    font-size: 26px;
}
#subpage #banner h1, #subpage #banner h2{text-align: center; }
#subpage #songsOpenPeopleUp {
    text-align: center;
    margin-bottom: 20px;
 }



#subpage .bigQuote h3,
#subpage #songsOpenPeopleUp h3{
    background-image: url(../images/big-apostrophe.gif);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    font-size: 26px;
    font-family: 'bold-houschka', sans-serif;
    color: #2c2c2c;
    padding: 24px 0px 5px;
    margin-bottom: 30px;
}



#subpage #songsOpenPeopleUp .portraits{text-align: center;}
#subpage #songsOpenPeopleUp .portraits img{
    width: 95%;
    height: auto;
    margin-bottom: 30px;
}


#subpage #songsOpenPeopleUp .mobilePortraits{text-align: center;}
#subpage #songsOpenPeopleUp .mobilePortraits img{
    width: 95%;
    height: auto;
    margin-bottom: 30px;
}


@media(min-width: 768px){
    #subpage #songsOpenPeopleUp .portraits{ text-align: center; margin-bottom: 20px;  }
    #subpage #songsOpenPeopleUp .portraits img{
        width: 32%;
        height: auto;
        display: inline-block;
    }
}







#subpage #songsOpenPeopleUp .portraits img:nth-child(2){ margin-right: 2%; margin-left: 2%; }

/* Sean - change font-size (was 22px), added line-height: 27px */
#subpage #songsOpenPeopleUp p{
    text-align: left;
    font-size: 18px;
    line-height: 27px;
}

#subpage #musicHasAnAmazingPower .btn.green{padding: 11px 30px; font-family: 'bold-houschka';}
#subpage #oneAlbum{}
#subpage #musicMomentsCover h4{

}
#subpage a#musicMomentsCover{
    display: block;
    width: auto;
    height: auto;
    margin-bottom: 30px;
    margin-top: 30px;
}
@media(min-width: 100px){
    #subpage a#musicMomentsCover{
        margin-right: 50px;
        margin-left: 50px;
    }
}
@media(min-width: 768px){
    #subpage a#musicMomentsCover{
        margin-right: 0;
        margin-left: 0;
    }
}


#subpage #musicMomentsCover img{
    background-image: url(../images/music-moments-cover.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: auto;
/*    padding-top:100%;*/
}

/*
#subpage #musicMomentsCover:hover img{
    background-image: url(../images/music-moments-cover-over.jpg);
}
*/

#subpage #aboutTheAlzheimersAssociation{background-color: transparent;}


/*ACCORDIAN SKINNING*/
#subpage #songsOpenPeopleUp .accordion{
    text-align: left;

}
#subpage #songsOpenPeopleUp .accordion h2{  text-align: left; }
.card{
    border: none;
    text-align: left;
}
.card .card-body{padding: 0px;}
.card-header {
    background-color: transparent;
    padding: unset;
}

#subpage .accordion h2 button:focus,
#subpage .accordion h2 button{
    font-family: 'medium-houschka';
    font-weight: normal;
    border: none;
    background-color: transparent;
/*    color: #2c2c2c;*/
    color: #359a8e;
    outline: none;
}
#subpage .accordion h2 button:hover{
    color: #256D65;
}

/**/
/**/
#subpage .accordion h2 button.collapsed::before{
    font: var(--fa-font-solid);
    content: "\f0fe";
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;    
    text-decoration: none;
    margin-right: 10px;
}
#subpage .accordion h2 button.collapsed::after{
    font-family: 'medium-houschka';
    content: "Read more";
    text-decoration: underline;
}
#subpage .accordion h2 button.collapsed:hover::after{
    text-decoration:underline;
}
/**/
#subpage .accordion h2 button::before{
    font: var(--fa-font-solid);
    content: "\f146 ";
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;    
    text-decoration: none;
    margin-right: 10px;
}
#subpage .accordion h2 button::after{
    font-family: 'medium-houschka';
    content: "Read less";
    text-decoration: underline;
}
#subpage .accordion h2 button:hover::after{
    text-decoration:underline;
}

#subpage .accordion h2 button{ font-size: 18px!important; }

#subpage .accordion .card-header{border: none;}




/* update 2021/8/30 */
.soundCloudClip a,
.soundCloudClip p{
  font-size: 18px;
  font-family: 'extra-houschka';
}
.soundCloudClip a{text-decoration: underline;}
.soundCloudClip a:hover{text-decoration: underline;}









.playPause:focus,
.playPause:active,
.playPause{
    z-index:100;
    position: absolute;
    bottom:0px;
    right: 0px;
    margin-right: 10px;
    margin-bottom: 10px;
    width: 50px;
    height: 50px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 0px;
    background-color: transparent;
    border: 1px solid #000;
    color: #000;
    outline:0px;
    transition-property: color, border-color ;
  transition-duration: .5s;
  transition-timing-function: linear;
  transition-delay: 0s;

}
.playPause:hover{
    border-color: rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.3);
    cursor: pointer;
}
.videoContainer{
    height: 650px;
    width: 100%;
    overflow: hidden;
     z-index: 1500;
    position: absolute;
/*    top: 0;*/
    left: 0;
}
@media(min-width: 100px){
    #videoBackground{
        display: none;
    }
}
@media(min-width: 768px){
    #videoBackground{
        z-index: 10;
        position: absolute;
    /*    top: -50%;*/
/*        right: 0px; left: 0px;*/
        width: auto;
        height: auto;
        margin-left: -50%;
        min-height: 100%;
        min-width: 100%;
        display: block;
    }
}

@media(min-width: 992px){
    #videoBackground{ margin-left: -30%; }
}
@media(min-width: 1200px){
    #videoBackground{ margin-left: 0; }
}
/*h1{ text-transform: uppercase; }*/

@media(min-width: 100px){
    .floatingBox{
        margin-top: 150px;
        z-index: unset;
        position: unset;
        top:0px; bottom: 0px; right: 0px; left: 0px;
    }
    .bgFix .floatingBox{ padding-top: 210px;}
}

@media(min-width: 768px){
    .floatingBox{
        margin-top: 150px;
        z-index: 75;
        position: absolute;
        top:0px; bottom: 0px; right: 0px; left: 0px;
    }
    .bgFix .floatingBox{ padding-top: 310px;}
}

.bgFix .floatingBox{ margin-top:0px; z-index: 1000; border-top: 1px solid #4a0d66; }
.bgFix .videoContainer{ z-index: 10;}

.bigPlayBtn i{display: none; }
.bigPlayBtn{
    width: 125px;
    height: 125px;
    background-color: transparent;
    background-image: url('../images/playbutton.png');
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 70px;
    text-decoration: none;
}
.bigPlayBtn:hover{
    text-decoration: none;
    background-image: url('../images/playbutton-hover.png');
}
@media(min-width: 100px){
    .bigPlayBtn{
        width: 100px;
        height: 100px;
    }
}
@media(min-width: 768px){
    .bigPlayBtn{
        width: 125px;
        height: 125px;
    }
}
/*MODAL FADED BACK DROP OPACITY*/
.modal-backdrop.show,
.bigFix .modal-backdrop.show {
    opacity: 1.0;
}
.modal-body{
    padding: 0px;
    background-color: transparent;
}
.modal.fade.show{overflow: hidden; }
.modal-content{background-color: transparent; border: 0;}
.modal-header{border:0px; padding: 0px; }
button.close{color: #fff; opacity: 1.0;}
button.close:hover{color: #fff; opacity: .7;}


/**/
@media(min-height: 100px){
    .height-responsive{
        width: 85%;    
        margin-left: auto;
        margin-right: auto;
    }
}
@media(min-height: 900px){
    .height-responsive{
        width: 100%;        
    }
}








#socialMedia{
    background-color: #359A8E;
    padding: 20px 0;
    color: #fff;
}
#socialMedia,
#socialMedia h1, #socialMedia h2, #socialMedia h3,
#socialMedia h4,#socialMedia h5, #socialMedia p, #socialMedia a { color: #fff; }

.bottomBtn span{margin-top: 999px;}
a.bottomBtn{
    background-position: center; 
    background-size: 60%; 
    background-repeat: no-repeat; 
    background-color: #4A0D66;
    padding: 40px 0  0 ; 
    width: 40px;
    overflow: hidden; 
    display: inline-block;
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    margin-right: 10px;
}
a.bottomBtn:hover{background-color: #37094C;}
a.facebook.bottomBtn{ background-image: url(../images/logo-facebook.png);}
a.twitter.bottomBtn{ background-image: url(../images/logo-twitter.png);}
a.email.bottomBtn{ background-image: url(../images/logo-email.png);}


#socialMedia .share{
    margin-bottom: 10px; 
    font-size: 32px; 
    font-family: 'extra-houschka';
}
@media (min-width: 100px) { .socialButtons{text-align: center} }
@media (min-width: 768px) { .socialButtons{text-align: right} }









@media(min-width: 100px){
	#footer #musicMomentsLogo {
	    width: 100%;
	    height: auto;
	}
}
@media(min-width: 768px){
	#footer #musicMomentsLogo {
	    width: 400px;
	    height: auto;
	}
}

#footer {
    background-color: #4a0d66;
    padding: 55px 0px 20px;
    color: #fff;
}

#footer p,
#footer h1,
#footer h2,
#footer h3,
#footer h4,
#footer h5 {
    color: #fff;
}


#footer .hitBox {
    display: block;
    /*    border: 1px solid #fff; */
    z-index: 20;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    cursor: pointer;
}
@media(min-width: 100px){
	#footer .hitBox {
	    width: 100%;
	    height: 48px;
	}
}
@media(min-width: 768px){
	#footer .hitBox {
	    width: 410px;
	    height: 48px;
	}
}
#footer .hitBox#musicMoments {}

#footer .hitBox#alzheimers {
    margin-top: 52px;
}

/*FOOTER LINKS*/
#footer #policyLinks {
    color: #fff;
    font-size: 18px;
    font-family: 'medium-houschka', sans-serif;
    margin-top: 32px;
}

#footer #policyLinks a {
    color: #fff;
    text-decoration: underline;
    font-size: 18px;
}

#footer #policyLinks a:hover {
    color: #D1D3D4;
}

#footer #social {
    color: #fff;
    width: auto;
    height: auto;
    font-size: 18px;
    margin-top: 20px;
    margin-bottom: 50px;
}

#footer #stayConnected {
    color: #fff;
    display: inline-block;
    margin-right: 11px;
    font-family: 'bold-houschka', sans-serif;
    font-size: 18px;
}

#footer #socialFB,
#footer #socialTwitter,
#footer #socialIG {
    display: inline-block;
    /*
    width:auto;
    height: auto;
*/
    padding: 0 25px 0 0;
    margin-right: 11px;
    height: 25px;
    width: auto;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

#footer a#socialFB {
    background-image: url(../images/icon-fb.png);
}

#footer a#socialTwitter {
    background-image: url(../images/icon-twitter.png);
}

#footer a#socialIG {
    background-image: url(../images/icon-instagram.png);
}

#footer a#socialFB:hover {
    background-image: url(../images/icon-fb-over.png);
}

#footer a#socialTwitter:hover {
    background-image: url(../images/icon-twitter-over.png);
}

#footer a#socialIG:hover {
    background-image: url(../images/icon-instagram-over.png);
}


@media(min-width: 100px) {
    #footer .twenty47 {
        font-weight: bold;
    }
}

@media(min-width: 768px) {
    #footer .twenty47 {
        font-weight: normal;
    }
}
#footer #legal a{
    color: #fff; 
    text-decoration: underline;
}

#footer #legal a:hover{
    color: #D1D3D4 !important;
}

@media(min-width: 100px) {
    #footer #legal a,
    #footer #legal p {
        font-size: 16px;
    }
}

@media(min-width: 768px) {
    #footer #legal a,
    #footer #legal p {
        font-size: 18px;
    }
}








/* Dean note: Initial circular images shown on load in the artist list */

#anthonyHamilton a::before{background-image:url(/musicmoments/images/bio-link/anthony-hamilton.webp);}
#bandOfHorses a::before{background-image:url(/musicmoments/images/bio-link/band-of-horses.webp);}
#brettEldredge a::before{background-image:url(/musicmoments/images/bio-link/brett-eldredge.webp);}
#electraMustaine a::before{background-image:url(/musicmoments/images/bio-link/electra-mustaine.webp);}
#jasonIsbell a::before{background-image:url(/musicmoments/images/bio-link/jason-isbell.webp);}
#joanJett a::before{background-image:url(/musicmoments/images/bio-link/joan-jett.webp);}
#laurenAlaina a::before{background-image:url(/musicmoments/images/bio-link/lauren-alaina.webp);}
#leeAnnWomack a::before{background-image:url(/musicmoments/images/bio-link/lee-ann-womack.webp);}
#luisFonsi a::before{background-image:url(/musicmoments/images/bio-link/luis-fonsi.webp);}
#musiqSoulchild a::before{background-image:url(/musicmoments/images/bio-link/musiq_soulchild-artistgridimage.webp);}
#nileRodgers a::before{background-image:url(/musicmoments/images/bio-link/nile-rodgers.webp);}
#saraEvans a::before{background-image:url(/musicmoments/images/bio-link/sara-evans.webp);}
#sharonVanEtten a::before{background-image:url(/musicmoments/images/bio-link/sharon-van-etten.webp);}
#sting a::before{background-image:url(/musicmoments/images/bio-link/sting.webp);}
#theHeadAndTheHeart a::before{background-image:url(/musicmoments/images/bio-link/the-head-and-the-heart.webp);}
#walkTheMoon a::before{background-image:url(/musicmoments/images/bio-link/walk-the-moon-artistgridimage.webp);}
#mickeyguyton a::before{background-image:url(/musicmoments/images/bio-link/Mickey-Guyton-gridimage.webp);}
#amyGrant a::before{background-image:url(/musicmoments/images/bio-link/amy-grant-rollover.png );}


/* Dean note: Hover over images below */

#anthonyHamilton a:hover::before{background-image:url(/musicmoments/images/bio-link/anthony-hamilton-over.gif);}
#bandOfHorses a:hover::before{background-image:url(/musicmoments/images/bio-link/band-of-horses-over.gif);}
#brettEldredge a:hover::before{background-image:url(/musicmoments/images/bio-link/brett-eldredge-over.gif);}
#electraMustaine a:hover::before{background-image:url(/musicmoments/images/bio-link/electra-mustaine-over.gif);}
#jasonIsbell a:hover::before{background-image:url(/musicmoments/images/bio-link/jason-isbell-over.gif);}
#joanJett a:hover::before{background-image:url(/musicmoments/images/bio-link/joan-jett-over.gif);}
#laurenAlaina a:hover::before{background-image:url(/musicmoments/images/bio-link/lauren-alaina-rollover.gif);}
#leeAnnWomack a:hover::before{background-image:url(/musicmoments/images/bio-link/lee-ann-womack-over.gif);}
#luisFonsi a:hover::before{background-image:url(/musicmoments/images/bio-link/luis-fonsi-over.gif);}
#musiqSoulchild a:hover::before{background-image:url(/musicmoments/images/bio-link/rollover-musiq.gif);}
#nileRodgers a:hover::before{background-image:url(/musicmoments/images/bio-link/nile-rodgers-over.gif);}
#saraEvans a:hover::before{background-image:url(/musicmoments/images/bio-link/sara-evans-rollover.gif);}
#sharonVanEtten a:hover::before{background-image:url(/musicmoments/images/bio-link/sharon-van-etten-over.gif);}
#sting a:hover::before{background-image:url(/musicmoments/images/bio-link/sting-over.gif);}
#theHeadAndTheHeart a:hover::before{background-image:url(/musicmoments/images/bio-link/the-head-and-the-heart-over.gif);}
#walkTheMoon a:hover::before{background-image:url(/musicmoments/images/bio-link/walk-the-moon-rollover.gif);}
#mickeyguyton a:hover::before{background-image:url(/musicmoments/images/bio-link/mickey-guyton-over.gif);}
#amyGrant a:hover::before{background-image:url(/musicmoments/images/bio-link/amy-grant-rollover.gif);}






@media (min-width: 768px) {
    .col-md-5ths {
        max-width: 20%;
        float: left;
    }
}










#landingPage #musicHasAnAmazingPower h4{
    font-size: 32px;
    font-family:'extra-houschka';
}
@media(min-width: 100px){
    #landingPage #musicHasAnAmazingPower h4{ 
       margin-top: 0; 
       margin-bottom: 0px;
   }
}
@media(min-width: 576px){
    #landingPage #musicHasAnAmazingPower h4{ 
       margin-top: 0; 
       margin-bottom: 0px;
   }
}
@media(min-width: 768px){
    #landingPage #musicHasAnAmazingPower h4{ 
       margin-top: 60px; 
       margin-bottom: 20px;
   }
}
@media(min-width: 992px){
    #landingPage #musicHasAnAmazingPower h4{ 
       margin-top: 60px;
       margin-bottom: 30px;
   }
}

#landingPage #musicHasAnAmazingPower .btn.green{padding: 11px 30px; font-family: 'bold-houschka';}
#landingPage #oneAlbum{}
#landingPage #musicMomentsCover h4{

}
#landingPage a#musicMomentsCover{
    display: block;
    width: auto;
    height: auto;
    margin-bottom: 30px;
    margin-top: 30px;
}
@media(min-width: 100px){
    #landingPage a#musicMomentsCover{
        margin-right: 50px;
        margin-left: 50px;
    }
}
@media(min-width: 768px){
    #landingPage a#musicMomentsCover{
        margin-right: 0;
        margin-left: 0;
    }
}
#landingPage #musicMomentsCover img{
    background-image: url(../images/music-moments-cover.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: auto;
}








@media (min-width: 576px){
    .modal-dialog-centered::before {
        height: calc(100vh - 3.0rem)!important;
    }
}


/*FORMATING*/
.clear{clear: both;}

/*COLOR*/
.grayBG { background-color: #f1f2f2;}
.flowerBG { 
    background-image: url(../images/flower.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: auto; 
    
}






.videoEmbed {
    padding-top: 0;
    padding-bottom: 56.25%;
    position: relative;
}

.videoEmbed iframe, .videoEmbed object, .videoEmbed embed, .videoEmbed video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
}

.embed-responsive-16by9::before {
    padding-top: 56.25%;
}

.embed-responsive::before {
    display: block;
    content: "";
}


.logobar-video{
    padding-top: 20px;
    padding-bottom: 20px;
}

button.close {
    color: #fff;
    opacity: 1.0;
    background-color: transparent;
    border: 0;
}

.modal-body{
    width:  100%;
    margin: auto;
}

@media (min-width: 768px){
    .modal-body{
        width:  85%;
    }
}

/* Dean note: Right align the close button */
.modal-header{
    margin-left: auto;
}

.close {
    font-size: 3rem;
}






.social-media-icons-container-shareicons{
    display: inline-grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px; 

}

.social-media-icons-container-shareicons .twitter-link-shareicons{
    display: block; 
    order: 2;    
}

/* Dean note: hiding this icon since we don't use. */
 .social-media-icons-container-shareicons .linkedin-link-shareicons{
    display: none; 
    order: 3;
}

.social-media-icons-container-shareicons .facebook-link-shareicons{
   display: block; 
   order: 3;
}

.social-media-icons-container-shareicons .instagram-link-shareicons{
    display: block; 
    order: 1;
}

/* Dean note: hiding this icon since we don't use. */
 .social-media-icons-container-shareicons .tiktok-link-shareicons{
    display: none; 
    order: 5;
 }

.social-media-links-shareicons{
    transition: .5s;
    color: #FFFFFF;
    font-size: 42px;
}

.social-media-links-shareicons:hover{
    color: #359A8E;
}







.social-media-icons-container-bottomicons{
    display: inline-grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px; 

}

.social-media-icons-container-bottomicons .twitter-link-bottomicons{
    display: block; 
    order: 2;    
}

/* Dean note: hiding this icon since we don't use. */
 .social-media-icons-container-bottomicons .linkedin-link-bottomicons{
    display: none; 
    order: 5;
}

.social-media-icons-container-bottomicons .facebook-link-bottomicons{
   display: block; 
   order: 1;
}

.social-media-icons-container-bottomicons .instagram-link-bottomicons{
    display: block; 
    order: 3;
}

/* Dean note: hiding this icon since we don't use. */
 .social-media-icons-container-bottomicons .tiktok-link-bottomicons{
    display: none; 
    order: 4;
 }

.social-media-icons-container-bottomicons > a.social-media-links-bottomicons{
    transition: .5s;
    color: #FFFFFF;
    font-size: 26px;
}

.social-media-icons-container-bottomicons > a.social-media-links-bottomicons:hover{
    opacity: .5;
    color: #359A8E;
}