html {
    font-size: 16px;
  }

body {
	background-attachment: fixed;
	background-color:#4076eb;
	background-image: url('/img/gradient_background.png');
	background-position: left bottom;
	background-repeat: repeat;
	font-family: Trebuchet MS,Helvetica,Sans-Serif;
	font-size: 1em;
	min-width:400px;
	color: #fff;
    padding:0;
    margin: 0;
}

span a, p a, h2 a {
    color: #f5e187;
    text-decoration:none;
    }
h2 a:hover {
        color: #d6bbf0;
    }
.responsive_show {
display: none;
}

.content {
margin:0px;
padding:0px;
}

.tflx-parent {
    display: flex;
    min-height: 3em; 
    overflow: auto;
    padding: .4em;
    /* border: 1px solid gray; */
}
.tflx-child {
    flex-grow: 1;
    }
.album-purchase a, .buynow a {
    color:#ffffc2;
    text-decoration:none;
    text-shadow:.15em .15em .25em rgba(0, 0, 0, .4);
    text-align:left;
    margin-bottom:1em;
    padding: .6em;
    padding-left:1em;
    background: rgba(75, 17, 114, 0.3); 
    background-color: rgba(17, 76, 145, 0.4);
    background-color: rgba(47, 96, 155, 0.4);
    border-radius: 1em;
    -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, .5);
        -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, .5);
        box-shadow:5px 5px 10px rgba(0, 0, 0, .5);

    -webkit-transition: all .3s; /* For Safari 3.0 to 6.0 */
    transition: all .3s; /* For modern browsers */
}
.album-purchase a:hover, .buynow a:hover {
    background-color: rgba(157, 95, 199, 0.3);
    /* filter: drop-shadow(.05em .05em .05em #500f64); */
    text-shadow:.15em .15em .25em rgba(0, 0, 0, .8);
}
.in-line {
    display:inline-block;
    }
.buynow {
    width:160px;
    font-size:1.1em;
    padding-top:0.5em;
   }
.buynow a {
  
  border-radius: 1em;
  text-shadow:.15em .15em .25em rgba(0, 0, 0, .8);
  background-color: rgba(211, 113, 236, 0.5);
  background-color: rgb(155, 79, 226,0.6);
  margin-right:2em;
  padding:.35em 1.2em .35em 1em;

    
}
.buynow a:hover{
    background-color: rgba(172, 91, 192, 0.4);
    background-color: rgb(155, 79, 226,0.4);
    background-color: rgba(211, 113, 236, 0.5);
}
.album-wrapper {
    margin-top:4em; 
}

.btn {
    border:1px solid #036;
    background-color: #28B;
    padding: 7px 12px;
    padding: .4em .7em;
    margin-bottom:0em;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    color:white;
    border-radius: 7px;
  }
  
  /* On mouse-over */
  .btn:hover {
      background-color: #178;
  }

.first { 
    margin-top: 0 !important; 
}
.center-me, .icon-row   {
    text-align: center;
}
.icon-row img {
    height: 45px;
    padding-right:.1em;
    padding-right:.1em;
    display: inline-block;
}
.image-link{
    display: inline-block;
}
.topbanner { 
    /* position: relative; */
    max-width:100%;
    min-width:600px;
    height: 0;
    padding-bottom: max(28.2%, 163px);
}


img {
	max-width:100%;
    margin-left:auto;
    margin-right:auto;
    }
.read_more_link{
    color:#ffffc2;
    text-decoration:none;
    font-style:italic;
   
}
.mission p, .bio p {

font-size:1.1em;
}
.notes-content{
    max-width: 80ch;
    line-height: 1.4em;
    /* margin-left:6rem; */
    
}
.album-notes-inner {
    padding-left:1em;
}
.notes-label{
padding-bottom:.5em;
font-style:italic;
    text-transform: lowercase;
    font-weight:800;
}
img { 
    object-fit: contain;
  }

/* for embedded videos with 16:9 ratio other than top banner which uses other classes */
  .video-container, .video-container-50 { 
      position: relative; 
      margin-top:1em;
      padding-bottom: 56.25%; 
      height: 0; 
      overflow: hidden; }

      .video-container-50 { 
        padding-bottom: 50%;
}

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


.topnav {
        -webkit-box-shadow:10px 10px 20px rgba(0, 0, 0, .75);
        -moz-box-shadow:10px 10px 20px rgba(0, 0, 0, .75);
        box-shadow:10px 10px 20px rgba(0, 0, 0, .75);
        background-color:#3c2fed;
        border-bottom:1px solid #999;
        border-top:1px solid #999;
        
        /* width:80%; */
        margin-left: auto;
        margin-right: auto;
        margin-bottom:1.5em;
        width: clamp(300px, 105em, 100%);
        
    }



.leftnav {
    min-width: 30ch;
    max-width: 35ch;
    text-shadow:.1em .1em .2em #222;
}

.unlink {
color:#ffffc2;
text-decoration:none; 
}

.unlink a:hover {
    color:#ffffc2;
    
    }

.decor {
    border: 1px solid #999; 
    border-radius: 10px; 
    margin: .5em;   
    padding: .5em; 
  }
   
.main-content {
    padding:   1em;
    min-width: 45em;
    max-width: 90em;
}

.rightnav {
   width: clamp(25ch, 35ch, 40ch);
}

.rightnav img {
    /* width: clamp(80%, 90%, 120%); */
    display: block; 
    margin-left: auto; 
    margin-right: auto;
}

.rightnav h3 {
    text-align: center;
}

.rightnav a {
    color:#ffffc2;
    text-decoration:none; 
}
.menu-horizontal a, .menu-vertical a, #fragrance-link a  {
    box-sizing: border-box;
    text-decoration: none;
    color:#ffffc2;
}

.menu-horizontal a:hover {
    color:#ddabff;
}

.menu-horizontal {
margin: .9em .6em .9em 3em;
font-weight:700px;
}

.menu-horizontal
 ul { 
    color:#ffffc2;
    font-family: Arial, Helvetica, sans-serif;
    font-size:1em;
    list-style: none; 
    margin: 0; 
    padding: 0; 
    display: flex;
    justify-content:flex-start;
    flex-flow: row wrap; 
}
.menu-horizontal li {
    flex:content;
    margin: 0 1.5em 0 1.2em;
    white-space: nowrap;
    line-height: 1.7em; 
    }

.menu-vertical ul li a,.small-menu ul li a, #fragrance-link ul li a {
color:#ffffc2;
text-decoration:none;
}
.menu-vertical #music_categories a, #fragrance-link ul li a {
    color:#ffffd5;
    }
.menu-vertical #music_categories a:hover, #fragrance_categories a:hover {
        color:#e2bcff;
        }
.menu-vertical {
    font-size:1em;
    font-weight:900;
}
.small-menu {
    font-size:1em;
    font-weight:900;
    display:inline-block;
    align-items:center;
    margin-top:0;
    margin-left:auto;
    margin-right:auto;
    width:100%;
    text-shadow:.1em .1em .2em #222;
}
.small-menu ul { 
    display: flex;
    flex-flow:row nowrap;
    justify-content: space-around;
    margin:0;
    padding:0;
 }

 .small-menu ul li {
    letter-spacing: .06em;
    flex:content;
    margin:.7em 1.3em;
    padding: .6em 1em;
    background: rgba(211, 113, 236, 0.5);
    border-radius: .3em;
    -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, .5);
    -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, .5);
    box-shadow:5px 5px 10px rgba(0, 0, 0, .5);
}
.menu-vertical ul { 
    display: flex;
    flex-flow: column wrap;
}
.menu-vertical ul,.small-menu ul { 
    list-style: none; 
    margin:.5em;
    margin-top:1em; 
    padding: 0;
    height:auto;
    color:#fff;
    text-align:center;  
}
#fragrance-link ul { 
    list-style: none;
    margin:0;
    padding: .35em;  
}
.menu-vertical ul li:not(#music_categories) {
    flex:content;
    text-align:left;
    margin-bottom:1em;
    padding: .5em;
    padding-left:1em;
    background-color: rgba(211, 113, 236, 0.5);
    /* letter-spacing: .04em; */
    border-radius: 1em;
    -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, .5);
    -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, .5);
    box-shadow:5px 5px 10px rgba(0, 0, 0, .5);
    -webkit-transition: background-color .1s; /* For Safari 3.0 to 6.0 */
    transition: background-color .1s; /* For modern browsers */
 }

 .menu-vertical ul li:hover:not(#music_categories), .small-menu li:hover {
   
    background-color: rgba(172, 91, 192, 0.4);
}

@keyframes bg-animation {
    0% { background-position:left; }
    100% { background-position:right;}
}
.new_releases  {
    margin-left:auto;
    margin-right:auto;
    width: 55%;
    background-image: linear-gradient(to right, 
    rgb(10, 119, 255), rgba(182, 212, 13, 0.692),rgb(14, 245, 149),rgb(100, 166, 241),
    rgb(78, 202, 20),rgb(10, 119, 255),rgb(100, 166, 241),rgb(10, 119, 255),rgb(162, 72, 199),
    rgb(78, 202, 20),rgb(10, 119, 255),rgb(100, 166, 241),rgb(0, 119, 255), rgb(162, 72, 199),
    rgb(165, 13, 212),rgb(245, 152, 14),rgb(202, 190, 20), rgb(100, 166, 241),
    rgb(0, 119, 255), rgb(127, 60, 235),rgb(0, 119, 255),rgb(13, 107, 124),rgb(162, 72, 199)
     );
    background-size:900%;
    padding:.3em 1em;
    line-height: 1.5em;
    margin-top:1.5em;
    margin-bottom:.2em;
    font-size: 1.2em;
    color:#ffffc2;
    text-align: center;
    text-shadow:.15em .15em .25em rgba(0, 0, 0, .6);
    filter: drop-shadow(0 0 30px #333);
    border-radius: .3em;
    animation: bg-animation 45s infinite alternate;
    animation-timing-function: linear;
}
.disco_gradient a,.disco_gradient2 a, .disco_gradient2 a div{
    text-decoration:none;
    color: rgba(256, 240, 210, 0.9);
    }
    .disco_gradient div:hover,.disco_gradient2 div:hover,.disco_gradient2:hover{
    color: rgba(226, 240, 250, 1);
    opacity:.85;
    }
.disco_gradient{
    filter: drop-shadow(0 0 5px #333);
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
    height:140px;
    width:140px;
    border-radius:50%;
    margin-left:auto;
    margin-right:auto;
    padding:0;
    font-size:1.1em;
    font-weight:900;
    text-shadow:.15em .15em .25em rgba(0, 0, 0, .6);
    color: rgba(256, 240, 210, 0.9);
    background-image: conic-gradient(
    from -15deg,
    rgb(167, 52, 167),
    rgb(191, 104, 212),
    violet,
    rgb(241, 78, 78),
    rgb(245, 159, 55),
    rgb(240, 179, 65),
    rgb(211, 162, 2),
    rgb(132, 230, 76),
    rgb(69, 204, 69),
    rgb(48, 187, 187),
    rgb(80, 80, 235),
    rgb(126, 55, 177),
    rgb(180, 52, 180) 
    );
}
.disco_gradient2{
    transition: all 0.2s ease;
    filter: drop-shadow(0 0 5px #333);
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
    height:140px;
    width:140px;
    border-radius:50%;
    margin-top:35px;
    margin-left:auto;
    margin-right:auto;
    padding:0;
    font-size:1.1em;
    font-weight:900;
    text-shadow:.15em .15em .25em rgba(0, 0, 0, .6);
    color: rgba(256, 240, 210, 0.9);
    text-decoration:none;
    background-image: conic-gradient(
    from -15deg,
    rgb(167, 52, 167),
    rgb(191, 104, 212),
    violet,
    rgb(241, 78, 154),
    rgb(253, 166, 60),
    rgb(240, 65, 182),
    rgb(179, 205, 241),
    rgb(98, 136, 207),
    rgb(50, 130, 204),
    rgb(101, 48, 187),
    rgb(80, 80, 235),
    rgb(126, 55, 177),
    rgb(180, 52, 180) 
    );
}

.discography {
    margin-left:5em; 
}
.discography p {
    color:#ffffff;
    text-shadow:.15em .15em .25em rgba(0, 0, 0, .6); 
    font-size:1.2em;
    
}
.blanco {
    color:#ffffff;
}
.text_shadow {
    text-shadow:.15em .15em .25em rgba(0, 0, 0, .6); 
}
.filter_shadow {
    filter: drop-shadow(0 0 30px #333);  
}
.new_releases h3 {
    text-shadow:.15em .15em .25em rgba(0, 0, 0, .6);   
}

.menu-vertical ul li:first-child, .card-reading {
    background-image: linear-gradient(to right, 
    rgb(78, 202, 20),rgb(10, 119, 255),rgb(100, 166, 241),rgb(0, 119, 255), rgb(162, 72, 199),
    rgb(165, 13, 212),rgb(245, 152, 14),rgb(202, 190, 20), rgb(100, 166, 241),
    rgb(0, 119, 255), rgb(108, 52, 199),rgb(0, 119, 255),rgb(13, 124, 118),rgb(10, 119, 255),rgb(162, 72, 199),
    rgba(195, 13, 212, 0.692),rgb(100, 166, 241),rgb(14, 245, 149),rgb(100, 166, 241),
    rgb(78, 202, 20),rgb(10, 119, 255),rgb(100, 166, 241),rgb(10, 119, 255),rgb(162, 72, 199) );
    background-size:900%;
    background-position:left;
    padding:.3em 1em;
    line-height: 1.5em;
    margin-bottom:1em;
    font-size: 1.3em;
    color: #fff;
    text-align: center;
    text-shadow:.15em .15em .25em rgba(0, 0, 0, .6);
    border-radius: .7em;
   
    animation: bg-animation 45s infinite alternate;
    animation-timing-function: linear;
}

#fragrance-link {
    background-image: linear-gradient(to right, 
    rgb(10, 119, 255),rgb(162, 72, 199),
    rgba(195, 13, 212, 0.692),rgb(100, 166, 241),rgb(14, 145, 149),rgb(100, 166, 241),
    rgb(135, 20, 202),rgb(10, 119, 255),rgb(100, 166, 241),rgb(10, 119, 255),rgb(162, 72, 199),
    rgb(78, 202, 20),rgb(10, 119, 255),rgb(100, 166, 241),rgb(0, 119, 255), rgb(162, 72, 199),
    rgb(165, 13, 212),rgb(245, 152, 14),rgb(202, 190, 20), rgb(100, 166, 241),
    rgb(0, 119, 255), rgb(108, 52, 199),rgb(0, 119, 255),rgb(13, 124, 118) );
    background-size:1400%;
    background-position:left;
    padding:.2em 1em .6em 1em;
    line-height: 1.5em;
    margin-bottom:1em;
    font-size: 1.3em;
    font-weight:900;
    text-align: center;
    text-shadow:.15em .15em .25em rgba(0, 0, 0, .6);
    border-radius: .7em;
    animation: bg-animation 75s infinite alternate;
    animation-timing-function: linear;
    position:relative;
    top:-.5em;
    width:16em;
    height:2em; 
    margin-left:auto;
    margin-right:auto;
    filter: drop-shadow(.2em .2em .2em #14142b);
} 

.card-reading {
    padding:.1em .6em;
    line-height: 1.2em; 
    filter: drop-shadow(.2em .2em .2em #04042b);
    text-shadow:.15em .15em .25em rgba(0, 0, 0, .8);
    
    background-image: linear-gradient(to right, 
    rgb(78, 202, 20),rgb(10, 119, 255),rgb(100, 166, 241),rgb(10, 119, 255),rgb(162, 72, 199),
    rgb(165, 13, 212),rgb(245, 152, 14),rgb(202, 190, 20), rgb(100, 166, 241),
    rgb(0, 119, 255), rgb(108, 52, 199),rgb(0, 119, 255),rgb(13, 124, 118),rgb(10, 119, 255),rgb(162, 72, 199),
    rgba(195, 13, 212, 0.692),rgb(100, 166, 241),rgb(8, 172, 103),rgb(100, 166, 241)
     );
    -webkit-transition: all .4s; /* For Safari 3.0 to 6.0 */
    transition: all .4s; /* For modern browsers */
}
.menu-vertical ul li:first-child > a , .new_releases a, #fragrance_categories a {
    color:#ffffc2;
    -webkit-transition: color 1s; /* For Safari 3.0 to 6.0 */
    transition: all 1s; /* For modern browsers */
    
}
.menu-vertical ul li:first-child:hover > a , .new_releases:hover a, #fragrance_categories:hover a {
    color:rgba(256, 200, 256, 0.7);
    filter: drop-shadow(.05em .05em .05em #500f64);
  }
 

  .card-reading:hover {
    padding:.15em .65em;
    transform: translate(0, -.09em);
    /* color:rgba(256, 200, 256, 0.8); */
    color:#f7ee8d;
  }
 p{
    line-height: 1.2;
 }

 footer {
    height: 2em;
    text-align:center;
}


/* for music.html page */
#banner, #banner p, #banner h2, #banner h3, #content h2 {
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
  	color: #ffffff;
  	text-shadow: 2px 2px 3px #000000;
	font-size: 1.2em;
	font-weight: 700;
	line-height:1.8em;
	}
    #content h2 {
        line-height:1.4em;   
    }
    #content h2.album-title  {
        color: rgb(255,254,171); 
    }
#content .album-meta-text h2 {
    text-align:left;
    letter-spacing: .03em;
}
#content .album-meta-text h3 {
    text-align:left;
    letter-spacing: .05em;
}
#banner h2 {
color: #fffeab;
margin-top:32px;
margin-bottom:5px;
font-size: 1.2em;
text-decoration:none;
border-bottom: 0px;
}
#content h2 a {
    color: #fffeab;
}
#content h2 a:hover {
    color: #ddabff;
}
#banner p {
margin-top:3px;	
font-size: 1em;
}
#banner .quote {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 24px;
	line-height:36px;
	font-style:italic;
	font-weight:normal;
}
#banner h3 {
    font-size: 1em;
}
.bld {
    font-weight:800;
    font-size: 1.15em;
}
.frag a {
    color:#fff;
}
.frag a:hover {
    color:#ddabff;
}
.bio p, .mission p {
    text-indent:  1.4em;
    text-shadow: 1px 1px 2px #222;
    margin-bottom:1.4em;
}
.bold-name {
    font-weight:800; 
    color: rgb(255, 249, 149);
    /* font-style: italic; */
    }
.italc{
    font-style:italic;
}
.f7e {
    color:#f7ee8d;
    font-style:italic;
    padding-left: 1em;
}
.f7eN {
    color:#f7ee8d;
    padding-left: 1em;
}
.marg-left{
text-align: left;
margin-left:18%;
margin-right:18%;
}
.frag {
    /* margin-left:calc(10% - 95px); 
    margin-right:calc(10% - 95px); */
    max-width:95ch;
    margin-left:auto;
    margin-right:auto;
    margin-top:3em;
    
    }
.frag p {
    margin-top:2.5em;
    line-height: 1.4em;
    line-height: 1.5em;
    font-size: 1.25em;
}
div .album-release-date, .solfeggio {
     margin-top:1em;
     margin-left:16em;
     text-shadow: 1px 1px 2px #222;
    }
    .solfeggio h3 {
        margin-bottom:.2em;
    }
    .solfeggio p {
        font-style:italic;
        margin-top:0;
    }
    .solfeg {
        text-shadow: 1px 1px 2px #222;
        color:#d49cfa;
        color:#fff;
        
        margin-bottom:4em;
    }
    .solfeg h2 {
font-size: 1.5em;
color:#d49cfa;
color: #f7ee8d;
text-shadow: .1em .12em .13em #222;
margin-bottom:0;
    }
    .solfeg h3 {
    margin-top:.4em;
    font-size:1.3em;
    font-style:italic;
    font-weight: 700;
    margin-bottom:0;
    }
    .solfeg ul {
        margin-top:.9em;
    }
    .solfeg li {
line-height: 1.3em;

margin-bottom:.8em;
font-size: 1.1em;
    }
.fade-in {
    animation: fadein 8s;
    -moz-animation: fadein 8s; /* Firefox */
    -webkit-animation: fadein 8s; /* Safari and Chrome */
    -o-animation: fadein 8s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
/* for pages like healing music with lists of albums */
.album-title {
    font-size:10em;

}
.album-artist {
display:none;
}
.subt {
margin-top:0;
margin-left:10em;
font-size:1.6em;
color: #fefbb8;
color: rgb(255,254,171);
/* color:white; */
text-shadow: .12em .12em .15em #222;
opacity:.9;
}	

.mantra {
    font-size:1.4em;
    line-height:1.6em;
    max-width: 60ch;
    margin-top:1.2em;
    margin-bottom:.75em;
    margin-left: 12%;
    margin-right:11%;
    color:#fff;
    text-shadow: 4px 2px 4px #222;
    
}
.mantra span {
font-size:1.6em;
font-weight: 600;
}
.cd_review_div p {
    font-size:1.1em;
    max-width: 55ch;
    text-shadow: 1px 1px 2px #222;
    margin-bottom:1.4em;
}
.cd_review_div table tr td img {
/* padding-right:.8em; */
margin-right:.8em;
 padding-bottom:.3em;
 vertical-align: top; 
 border: solid 2px #fff;  
}
.cd_reviews {
    max-width: 55ch;
    text-indent:  1.4em;
    line-height: 1.5em;
    
}
.cd_review_div table tr td {
    vertical-align: top; 
    padding-right: 1.5em;  
}

.more {
    color: #fff;
    font-size:1.3em;
}

.more a {
    color: #fffeab;
}
.more a:hover {
    color: #ddabff;
}
.horizontal-flip {
    transform: scaleX(-1);
  }

.fragrance p {
    align:left;
    margin-left: 1.7em;
    margin-top: 2em;
    margin-right:1.5em;
    text-shadow: 2px 2px 2px #222;
    font-size:1.1em;
    line-height: 1.45em;
}
.entry p, #content p {
	
max-width: 75ch;
margin-right:auto;
margin-left:auto;
	}
.entry p {
    line-height: 1.4em;
}

.album-meta-text .album-title {
    /* max-width: 37ch;   */
    max-width: 50ch; 
}

/* grid setup  */

.show_remove {
    display: block;
}
.remove_show {
    display:none;
}
 .topbanner { grid-area: topbanner  }
 .topnav { grid-area: topnav;   }
 .leftnav { grid-area: leftnav; }
 .main-content { grid-area: main; }
 .rightnav { grid-area: rightnav;}
 footer { grid-area: footer  }



 /* big screen, seven column grid (three content columns essentially) side blanks cols for centering @ 1100 and up  */
 .grid-div
 {
     /* set maximum width based on top banner max, center everything with auto left right margins */
margin-left:auto;
margin-right:auto;
max-width:1800px;
    display: grid;
/* align-items: start; */
justify-content: center;
grid-template-columns: auto auto auto auto auto;
grid-template-rows: auto auto auto 10%;
grid-template-areas:
    "topbanner topbanner topbanner topbanner topbanner"
    "topnav topnav topnav topnav topnav"
    ". leftnav main rightnav ."
    ". . footer . .";
   
}

/* two column grid 1080 to 1400, (but reacts at more like 1260?) */
 @media only screen and (max-width: 1400px) and (min-width: 1080px) {
    .grid-div {
        grid-template-columns: 20em 1fr;
        grid-template-rows: auto auto auto auto 50% 10%;
        grid-template-areas:
            "topbanner topbanner"
            "topnav topnav"
            "leftnav main"
            "rightnav main"
            ". main"
            "footer footer";
        }


 }


/* two column simpler grid 1080 and below */
 @media all and (max-width: 1080px) {
    .grid-div {
        grid-template-columns: 90%;
        grid-template-rows: auto auto auto auto 10%;
        grid-template-areas:
            "topbanner"
            "topnav"
            "leftnav"
            "main"
            "footer";
        }

    .show_remove {
        display:none;
    }   
    .remove_show {
        display: block;
    }
    .menu-horizontal { 
        margin: .9em 0em .9em 0em; 
    }
    .menu-horizontal li {
    flex:content;
    margin: 0 .7em 0 0.5em;
    white-space: nowrap;
    line-height: 1.7em; 
    }
    
    .leftnav { 
        min-width:96.4%;    
        max-width: 96.4%;
        width:96.4%;
    }
    .menu-vertical {
        font-size:.9em;
    }
    .menu-vertical ul li:first-child {
        padding:.2em .6em;
        line-height: 1.3em;
        margin-bottom:.3em;
        font-size: 1.1em;
    }
    .menu-vertical ul li:not(#music_categories) {
        margin-bottom:.3em;
        padding: .3em;
        padding-left:.6em;
        padding-right:.9em;
    }
    .menu-vertical ul { 
        flex-flow: row wrap;  
        gap: 8px;
    }
    .menu-vertical ul li:not(#music_categories) {
        flex-grow:0;
        max-width:50%;
        min-width: 20%;
        text-align:center;
        
    }
    .disco_gradient2 {
        display: none;
    }
}

/* end grid setup */