/* most colorization here incase invoke holiday theme */

@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&family=Splash&display=swap'); 
@import url('https://fonts.googleapis.com/css2?family=Protest+Revolution&display=swap');
 
body{
    background-color:white !important;
    
}

:root {
    --font-word-rock: 'Splash', cursive; 
    --font-stylized:"Protest Revolution", cursive;
    --color-cta:#F41E1E;
}
 
.contentContainerMusicSchool{
     background-color:white !important;   
}

.contentContainerMusicSchool .sec-text{
    color:black !important;
    

}

.contentContainerMusicSchool h2, contentContainerMusicSchool h1{
    color:black !important;
}

 

 #heroWithImgConatiner
 {
    background-color:powderblue;
    background-size: 500px 500px;
    background-repeat: repeat;
    background-image: url('hero/hero-bg.webp');
 }




.hero-bottom-strip {
    height: 100px;
    background-image: url('ui-elements/barb-wire-repeating-transition-to-white.png');
    background-size: 78px 35px;
    background-repeat: repeat-x;
    background-position: bottom center; 
}




#heroImageTitle
{
    color:white;
    font-family: var(--font-stylized);

}

#heroImageTitleAccentColor
{
    color:var(--color-cta); 
    font-family: var(--font-stylized);
}

#heroImageContent{
  color:white;
}


.heroText
{
    color:white;
    font-family: var(--font-stylized);
    letter-spacing: 0.05em;  
    font-size:95px !important;
}


  .heroTextIntro{
      color:white;
  }

.wordMusic
{ 
     text-decoration: line-through;  
     text-decoration-thickness:6px;
     text-decoration-color: #000; /* your red */
}

.wordRock
{
    font-family: var(--font-word-rock);
    font-size:50px;
    color:black !important;
    margin-left:5px;
    margin-right:8px;
}


a {
    text-decoration: underline;
    color: #F41E1E;
    transition: color .05s ease;
}

    a:hover {
        color: #B81616;
        text-decoration-color: #B81616; /*color of the underline itself — separate from the text color.*/
        text-decoration: underline;
    }


 .splashMessageTxt {
    color: white !important; 
    text-align: center;
    font-size: 60px !important; 
    line-height:90px;
    font-family:'Cracked Johnnie'; 
}


.feature-card_icon
{
    width:40px;
    height:40px;

}


#heroTransitionBtm {
    height: 75px;
    /*    background-color: rgba(255,33,33,.7);*/
    background-image: url('ui-elements/banner-btm-overlay.webp');
}

#heroImageTransitionBtm {
    background-color: transparent;
    height: 75px;
    background-image: url('ui-elements/banner-btm-overlay.webp');
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}



/* when rollover the nav it will dim the BODY, using an overlay div*/
 #page-dim {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.752); /* dim level */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 900; /* below nav, above page */
}
 body.dimmed #page-dim {
    opacity: 1;
    pointer-events: auto;
}

 .wsmenu-list > li:hover ~ #page-dim,
 .wsmenu-list > li:hover #page-dim {
    opacity: 1;
    pointer-events: auto;
}

 .nav-container-music-school
 {
      background-color:#D9D9D9 !important;
 }


.navIcon {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-image: url('icons/bolt-black.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 2px; /* spacing before text */
    vertical-align: middle;
    margin-top: -2px;
}


.navDropDownIcon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('icons/bolt-black.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right:  2px; /* spacing before text */
    vertical-align: middle;
    margin-top:-2px;
}
 

.ctaBtn {
    background: #F41E1E;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: all .25s ease;
}

    .ctaBtn::after {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 50%;
        height: 100%;
        background: rgba(255,255,255,0.35);
        transform: skewX(-20deg);
        transition: all .4s ease;
    }

    .ctaBtn:hover {
        background: #B81616;
        color: white;
        transform: scale(1.15);
    }

    .ctaBtn:hover::after {
        left: 150%;
    }



.vertical-info-box-title {
    font-size: 26px; 
    color: black !important;
    text-decoration: none;
}

    .vertical-info-box-title:hover {
        color: #B81616 !important;
    }

.vertical-info-box-text {
    color: #3e3e3e !important;
    font-size: 20px !important;
    line-height: 26px !important;
    background-color: transparent;
    min-height: 100px !important;
}

.vertical-info-box-divider {
    margin-top: 1px !important;
    color: #808080;
}

.vertical-info-box-cta {
    font-size: 18px !important;
    color: #777777 !important;
}


/*  rich - this color of the image rollover effect bg, 
    i will overwrite here, so holidays can change color.
    to fiind search for .red"
    tbd name better but then need to replace in entire project.   in figure-music-school. css, tbd will comment out there */
.red:before { 
    background: rgba(0, 0, 0, 0.62) !important; /* black */
  /*  background: rgba(255, 102, 0, 0.42) !important;  orange */
}