/* CSS for Hi-Dukes site original */

/* <!-- basic globally common stuff --> */
/* <style> */
@media only screen {

    * {
        margin: 0; padding: 0;
        text-decoration:none; list-style: none;
        box-sizing: border-box;   border-style: none;
    }

    *, *::before, *::after {
        box-sizing: inherit;
    }

    html {
        font: normal calc(.70em + 1vw)/1em  Helvetica, Arial, sans-serif;
        min-width:16em;
        height:100%;
        min-height: 100vh;
        min-height:-webkit-fill-available;
    }

    html { -webkit-text-size-adjust: 108%; }
    /* deals with iphone iframe weirdness */

    header, section, footer, aside, nav, main, article, figure {
        display: block;
    }

    h1, h2, h3, h4, h5, h6, p, a {
        margin:0; padding:0;
    }

    h1, h2,h3,h4,h5,h6, a {
        font-family:  Helvetica, Arial, sans-serif;
        font-weight: 700;
        color:rgb(112, 13, 13);
    }

    .opened-press a.press-link  {
        font-size:75%;
        line-height: 1.125em;
    }

    .opened-press h2 {
        font-size:165%;
        line-height:1.125em;
        margin-bottom:.25em;
    }

    h3 {
        font-size:165%;
        line-height:1.35em;
        margin-bottom:.25em;
    }

    h3.evencol {
        font-size:130%;
        margin-bottom:.25em;
        /* background:red; */
    }

    h4 {
        font-size:135%;
        line-height:1.125em;
        margin-bottom:.25em;
    }

    .h4-small  {
        font-size:115%;
        line-height:1.125em;
        margin-bottom:.5em;
    }

    h5 {
        font-size:102%;
        line-height:1.23em;
        margin-bottom:.25em;
    }

    h4.nonbar,  h6 {
        line-height:1.125em;
    }

    h4.nonbar {
        font-weight: 700;
        font-size:100%;
        margin-bottom:1.5em;
    }

    p {
        margin-bottom:1em;
    }

    p.p90 {
        font-size:85%;
        /* color:red; */
    }



    p + figure, h3 + figure {
        margin-top:.25em;
    }
    /* controls space after a p before a figure */

    figure {
        margin:0;
        padding:0;
    }

    figcaption + h3, figcaption + p {
        margin-top:0;
    }

    figure + h5 {
        margin-top:.4em;
    }

    a.sidebyside + h3 {
        margin-top:.5em;
    }

    .small-character {
        font-size:90%;
    }

    .bannerbox > figcaption {
        font-size:1em;
        line-height:1.125em;
    }

    .fullwidth {
        grid-column:1/-1;
        /* background:red; */
    }

    .ab-onefull-even {
        grid-column:1/-1;
    }

    .reponsive-multi-column {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 1rem;
    }


    /* #assemblies,
    #barn,
    #basma,
    #ben-seni,
    #blackbird,
    #blue-moon,
    #circus,
    #concerts,
    #dance-res,
    #danceresidency,
    #danceresidency,
    #diri,
    #education,
    #education-edu,
    #eliyahu,
    #erdelezi,
    #erdelezi-studio,
    #erotevmenos,
    #ethnorobics,
    #ethnorobics-edu,
    #fests,
    #fotia,
    #galicianer,
    #hi-dukes-festival,
    #hold-whatcha,
    #holiday-concerts,
    #homeschool,
    #homeschool-edu,
    #house,
    #instructional,
    #instruction-videos,
    #in-classroom,
    #klez-usa,
    #lectures,
    #librarian,
    #library,
    #library-edu,
    #long-road,
    #lshana,
    #lu-yehi,
    #mavro,
    #mes-stou,
    #music-res,
    #musicresidency,
    #neighbors,
    #nigun,
    #nishka,
    #parades,
    #private,
    #private-wed,
    #rebbe,
    #romania,
    #route-66,
    #ruchenica,
    #rumelaj,
    #sala,
    #school,
    #scoala,
    #shote-for-esma,
    #specialneeds,
    #specialneeds-edu,
    #team,
    #thalassaki,
    #top-klez-usa,
    #top-long-road,
    #top-neighbors,
    #top-twohundred-years,
    #top-xmas,
    #turkey,
    #twohundred-years,
    #ulv
    #ushti,
    #WMYOB,
    #xmas,
    #zhita
    {
        scroll-margin-top: calc(5rem + 20vh);
        scroll-snap-margin-top:calc(5rem + 20vh);
    } */

    *:target {
        scroll-margin-top: calc(5rem + 20vh);
        scroll-snap-margin-top:calc(5rem + 20vh);
    }


    a .splash-video-title {
        line-height:1.125em;
        text-decoration:none;
        padding-bottom:.065em;
        padding-top:.25em;
        /* margin-bottom:.25em; */
        border-bottom:.1em solid #330000;
        /* background:red; */
    }

    .youtubearrowovervidimage + h3 {
        margin-top:.65em;
    }

    p a {
        font-size:87%;
        text-decoration:none;
        padding-bottom:.065em;
        border-bottom:.1em solid #330000;
    }

    .block {
        display:block;
    }

    h1 a, h2 a, h3 a, h4 a, h5 a, a p.vidcap-small {
        text-decoration:none;
        padding-bottom:.065em;
        border-bottom:.08em solid #330000;
    }

    a:link, a:visited {
        color: #330000; margin:0; padding:0;
    }

    a:hover, a:focus, a:active {
        margin:0; padding:0;
        color: white;
        background:#330000;
        outline:none;
    }
    /* controls all video A calls being acted on, including menu */

    a.youtubearrowovervidimage:hover, a.youtubearrowovervidimage:focus, a.youtubearrowovervidimage:active,
    a.fb:hover, a.fb:focus, a.fb:active,a.sidebyside:hover, a.sidebyside:focus, a.sidebyside:active
    {
        background:rgb(112, 13, 13);
    }
    /* controls all video A calls */

    .youtubearrowovervidimage h5 {
        text-decoration:none;
        padding-bottom:.065em;
        border-bottom:.08em solid #330000;

    }

    .n { font-weight: 400; font-style:normal; }

    .nit {
        font-weight: normal; font-style:normal !important;
    }

    .bd { font-weight:700;  }

    .it { font-style: italic; }

    .u { text-decoration: underline; }

    .clr { color:rgb(112, 13, 13); }
    /* color: rgba(204, 102, 102, 1); */

    .clr-yellow {
        background:rgb(255, 202, 103);
    }

    .blk { color: black; }

    .cntr, .cnt { text-align:center; }

    .nowrap {
        white-space: nowrap;
    }

    /* .squeeze80 {
        font-size: clamp(1em, 1em + 1vw, 1.75em);
        transform: scale(.8,1); text-align:left; margin-left:-10.5%;
    } */
    /* was for email urls which would break col width */

    .phone-head {
        font-size:1.75em;
        line-height:1.0em;
        margin:0;
    }

    .phone {
        font-size:150%;
        margin-bottom: .25em;
        line-height:1.0125em;
    }
    /* can not apply margin:0 because of squeeze80 has a needed margin call due to the transform */

    .phone::before {
        content: "\260e";
        /* margin-right: 0.5em;  */
        font-weight:normal;
    }

    .phone {
          font-weight:normal;
    }

    h4.phone  {
        font-weight:700;
    }

    .articlebox h3 {
        line-height:1.125em;
        margin-bottom:.25em;
    }

    .ab-lcol h3:first-of-type {
        margin-bottom:.25em;
    }

    .articlebox h3.phone-head {
        margin: 0;
    }

    .rule {
        margin-top:.5em;
        border-bottom: .3em solid rgba(204, 102, 102, 1) ;
        margin-bottom:1.5em;
    }

    .rule-top  {
        margin-top:.5em;
        border-top: .3em solid rgba(204, 102, 102, 1) ;
        padding-top: 3em;
        margin-bottom:1.5em;
    }

    .rule-bottom  {
        margin-top:.5em;
        border-bottom: .3em solid rgba(204, 102, 102, 1) ;
        padding-bottom: 2em;
        margin-bottom:1.5em;
    }

    #contact-rule {
        border-top:
        5px solid rgba(204, 102, 102, 1) !important;
        grid-column:2/3;
        z-index:10;
    }
    /* !important overrides the imported contact-rule css  */
    /* margin forces a space below so that the content is not pasted to the page end  */

    #contact-email {
        -ms-word-break: break-all;
        word-break: break-all;
        word-break: break-word;
    }

    #copyright-stuff {
        line-height:1.125em!important;
    }
    /* for the imported contact info's copyright graph */

    .tm50 {
        font-size: 50%; line-height: 0; font-weight: normal; white-space: nowrap;
    }

    .small {
        font-size: 80%; font-weight: normal;
    }

    .krn02 { letter-spacing: -.02em; }

    .krn03 {  letter-spacing: -.03em; }

    .krn04 { letter-spacing: -.04em; }

    .krn05 { letter-spacing: -.05em; }

    .krn06 {  letter-spacing: -.06em; }

    .krn07 {  letter-spacing: -.07em; }

    .krn08 { letter-spacing: -.08em; }

    .krn09 { letter-spacing: -.09em; }

    .krn1 {  letter-spacing: -.1em; }

    .krn15 { letter-spacing: -.15em; }

    .hyphen-zero { letter-spacing: -.01em; }

    /* controls letter kerning  */

    .shortlinehyphens {
        word-break:normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
    }

    .nobreak {
        break-inside: avoid-column;
        -webkit-column-break-inside: avoid;
        -moz-column-break-inside: avoid;
        -o-column-break-inside: avoid;
        column-break-inside: avoid;
        page-break-inside: avoid;
        display: inline-block;
        break-before: avoid-column;
        break-after: avoid-column;
        break-inside: avoid-column;
    }

    .above {  margin-top: .25em;   }

    .above-1em { margin-top: 2em; }

    .above-1em-real { margin-top: 1em; }

    .above-minus-1-25em {
        margin-top:-1.25em;
    }

    .below {  margin-bottom: .5em;   }

    .bottom_05em {
        margin-bottom: .5em;
    }

    .bottom {
        margin-bottom: 1em;
    }

    .bottom_1em {
        margin-bottom: 1em;
    }

    .coltop {  margin-top: 1.5em;   }

    .top_1em {
        margin-top: 1em;
    }

    .border-thin {
        border: solid rgba(51, 0, 0, 1) .05em;
        width: calc(100% - 2px);
        height: calc(100% - 2px);
    }

    .thinborder {
        border: 1px solid rgba(51, 0, 0, 1) ;
        width: calc(100% - 2px);
        height: calc(100% - 2px);
    }

    .thinborder2p {
        border: 2px solid rgba(51, 0, 0, 1) ;
    }

    img {
        display:block;
        width: 100%;
        max-width: 100%;
        object-fit: cover;
        margin:0; padding:0;
        background:rgba(245,240,240,1);
    }


    figure [src*="svg"] {
        background:rgba(255,255,250,1);
    }

    a:hover figure [src*="svg"] {
        background:rgba(112, 13, 13, 0);
    }

    .cropimg {
            width: auto; overflow: hidden;
    }
    /* Header's img box - contains the cropped img's box */

    .pointer  { cursor: pointer; }

    .float-half-col  {
        width:50%;
        margin-right:1em;
        float: left;
    }



    /* AUDIO CARD */

        .audio-card {
            display:grid;
            grid-template-columns: 2rem .5rem 1fr ;
            grid-template-rows: auto  ;
            margin-top:1em;
        }

        h4.audio-card-number {
            grid-column: 1/2;
            grid-row: 1 / 2;
            text-align:right;
            margin:0; padding:0;
        }

        .audio-card-title {
            grid-column: 3/4;
        }

        p.title-pronounce {
            grid-column: 3/4;
            margin-top:-.25em;
            margin-bottom:.125em;
        }

        audio {
            grid-column: 3/4;
            margin:0; padding:0;
            margin-bottom:.4em;
        }

        p.run-time {
            grid-column: 3/4;
        }

        p.track-info {
            grid-column: 3/4;
        }


    /* END AUDIO CARD */




    /* REF quotes stuff */


    .dropcap {
        float: left;
        margin: 0 0 .3em 0em;
    }

    .dropcap:before, .dropcap:after {
        content: "";
        display: block;
    }

    .dropcap:after {
        margin-top: -.5em;
    }

    span.dropcap.q {
        font: bold 350%/.82em  Helvetica, Arial, sans-serif;
        font-weight:700;
        color:rgb(112, 13, 13);
    }

    .q:before {
        content: "\201C";
        font: normal 75%/0em  Helvetica, Arial, sans-serif;
        position:relative;
        top:.4em; left:0;
        display: block;
    }
    /*-.45em this is the left dbl quote mark */

    .postq  { margin-top:1em; }

    .return, .returnhand {
        font-style:normal; font-weight:700;
        /* color:rgba(204, 102, 102, 1);  */
        color:rgb(112, 13, 13);
    }

    .return:before, .returnhand:before  {
        content: "\A\2014";    white-space: pre;
    }

    .returnhand:after {
        content: "\A\270D "; white-space: pre;
        font-size:200%; text-align:center;
        display:grid; justify-self:center;
    }

    .ref {
            font-size: 90%;
            line-height:1.3em;
    }

    /* end ref quotes */



    /* video stuff */

    figure figcaption.vidcap, figure figcaption.vidcap-big {
        margin-top:.5em; font-size:larger;
    }

    .shadow:hover, .shadow:focus, .shadow:active {
        -moz-box-shadow: -0.3em 0.3em 0.1em 0.05em rgba(102, 50, 100, 0.5) ;
        -webkit-box-shadow: -0.3em 0.3em 0.1em 0.05em rgba(102, 50, 100, 0.5) ;
        box-shadow: -0.3em 0.3em 0.1em 0.05em rgba(102, 50, 100, 0.5) ;
    }

    .large-figcap {

        font-weight: 700;
        font-size: 110%;
        line-height:1.25em;
        margin-top:.25em;
        margin-bottom:1em;
        color:rgb(112, 13, 13);
    }

    .vidcap-big  {
        font-weight: 900;
        font-size: 130%;
        line-height:1.25em;
        color:rgb(112, 13, 13);
    }

    .youtubearrowovervidimage:hover .vidcap-big,
    .youtubearrowovervidimage:focus .vidcap-big,
    .youtubearrowovervidimage:active .vidcap-big,
    figure:hover.vidcap-big,
    figure:focus.vidcap-big,
    figure:active.vidcap-big    {
        font-weight: 900;
        font-size: 130%;
        line-height:1.25em;
        color:white;
    }

    .youtubearrowovervidimage:hover  .splash-video-title, .youtubearrowovervidimage:focus  .splash-video-title, .youtubearrowovervidimage:active  .splash-video-title {
        color:white;
    }

    .vidcap-side, .imgcap-side  {
        font-weight: 700;
        font-size: 90%;
        line-height:1.125em;
        color:rgb(112, 13, 13);
    }


    .brochure .vidcap-side {
        font-weight: 700;
        font-size: 80%;
        line-height:1.125em;
        /* color:rgb(112, 223, 13);         */
    }

    .youtubearrowovervidimage:hover .vidcap-side, .youtubearrowovervidimage:focus .vidcap-side, .youtubearrowovervidimage:active .vidcap-side,
    .sidebyside:hover .vidcap-side, .sidebyside:focus .vidcap-side, .sidebyside:active .vidcap-side, .fb:hover .vidcap-side, .fb:focus .vidcap-side, .fb:active .vidcap-side
    {
        color:white;
    }

    a h4 {
        border-bottom: 2px solid rgba(33, 0, 0, 1); margin-bottom:.5em;
        padding-bottom:.3em;
    }

    .link-img:hover, .link-img:focus, .link-img:active, a:hover h4, a:focus h4, a:active h4 , a:hover h5, a:focus h5 , a:active h5 {
        background:rgb(112, 13, 13);
        color:white;
    }


    figure:hover .large-figcap, figure:focus .large-figcap, figure:active .large-figcap {
        margin-top:.25em; background:rgb(112, 13, 13); color:white;
    }


    .video_iframe-container {
        position:relative;
        width:100%; height:0;
        padding-bottom:56.25%;
    }
    /* margin-bottom seems to only work on the nb-video page's single video - keep tabs on this */

    .video_iframe-container iframe {
        position:absolute; top:0; left:0; width:100%; height:100%;
    }

    .video-clip-container {
        overflow: hidden;
        position:relative;
        width:100%; height:0;
        padding-bottom:56.25%;
        z-index:0;
    }

    .video-clipping-img {
        position:absolute;
        top:-15.9%; left:0;
        width:100.1%;
    }

    .video-clip-container:hover span, .video-clip-container:focus span, .video-clip-container:active span {
        color:black ;
    }


    figcaption:hover, figcaption:focus, figcaption:active {
        color:white;
        display:block;
    }

    figcaption.imgcap-side:hover  {
        color:rgb(112, 13, 13);
    }

    figcaption.imgcap {
        font-size:.9em; line-height:1.25em;
        font-style:italic; font-weight:700;
        color:rgb(112, 13, 13);
        margin-top:.25em; margin-bottom:1.5em;
        padding:0em;
        background:none;
    }

    .youtubearrowovervidimage {
        display:grid;
        grid-template-columns:1fr;
        grid-template-rows: 1fr ;
    }

    .sidebyside, .sidebyside-expand-card {
        display:grid;
        grid-template-columns:1.2fr .5em minmax(2.5em, .5fr);
        grid-template-rows: auto;
    }

    .sidebyside-expand-card {
        grid-column:1 / -1;
        grid-row:1 / -1;
        z-index:0;
    }

    .sidebyside-expand-card.link-img {
        grid-row:1/2;
    }

    .sidebyside.brochure {
        display:grid;
        grid-template-columns:1fr .5em minmax(2.5em, .5fr);
        grid-template-rows: auto;
    }

    .sidebyside figcaption, .sidebyside-2p1l2d  figcaption, .sidebyside .brochure figcaption, .sidebyside-expand-card figcaption.vidcap-side {
        grid-column:3/4;
        grid-row:1/2;
        z-index:0;
        place-self: end;
    }

    .overunder-sidebyside {
        display:grid;
        grid-template-columns:1fr;
        grid-template-rows: auto;
        color:rgb(112, 13, 13);
    }


    .fb {
        display:grid;
        grid-template-columns:.25fr .5em 1fr;
        grid-template-rows: auto;
        padding-top:2em;
    }

    .fb figcaption {
        place-self:center;
        justify-self: left;
        grid-column:3/4;
        z-index:0;
    }


    .youtubearrowovervidimage figure, .youtubearrowovervidimage img {
        grid-column:1/2;
        grid-row:1/2;
    }
    /* positions utube arrow over image */


    .youtubearrowovervidimage  a:hover,
    .youtubearrowovervidimage  a:focus, .youtubearrowovervidimage  a:active
    {
       color:white; opacity:100%; font-size:100%;
       background:#330000; display:block;
       margin-bottom:0; margin-top:0;
    }


    .sidebyside ~ .fb,  a.fb, .sidebyside.brochure {
        margin-bottom: 1em;
    }

    /* end video stuff */



    /* site-map stuff */

    #sitemap {
        grid-column:2/3;
        display:grid;
        grid-template-columns:1fr;
        grid-template-rows: auto 1fr;
        height:33em;
        -webkit-overflow-scrolling: touch;
    }

    #sitemap iframe {
        align-self:start;
        grid-column:1/2;
        grid-row:1/2;
        width:100%;
        height:calc( 30em + 1vh);
        position:relative;
        top:0em;
        border-bottom: 2px solid rgba(204, 102, 102, 1);
    }

    /* end site-map stuff */


    /* start loading rotating figure */

    .loader-box::before {
        content:"Loading . . .";
        place-content: end;
        font-size:1em;
        line-height:1.5em;
        padding:.5em 0;
        color:red;
    }

    .loader-box {
        /* min-height: 100%; */
        margin: 0;
        display: grid;
        place-content: center;
        align-self: start;
    }

    .loader-box svg {
        animation: rotate 1.75s linear infinite;
        animation-iteration-count: 5;
        animation-fill-mode: both;
    }

    img.loader {
        animation: rotate 1.75s linear infinite;
        animation-iteration-count: 5;
        animation-fill-mode: both;
    }

    @keyframes rotate {
        to {
            transform: rotate(360deg);
        }
    }

    /* end loading rotating figure */


}
/* </style> */
/* <!-- end basic globally common stuff --> */














/* <!-- foundation title rotate stuff --> */
/* <style> */
@media only screen {

    .title-rotate_v-rl_180 {
        -webkit-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        display: inline-block;
        margin:0; padding:0;
        text-align:right;
    }

    .slogan-bar h3.title-rotate_v-rl_180 {
        -webkit-writing-mode: horizontal-tb;
        writing-mode: horizontal-tb;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        margin:0; padding:0;
        padding-bottom:.5em;
        margin-top:.75rem;
        text-align:left;
        /* background:red; */
        position:relative;
        top:0;
        left:0;
        /* height:2em; */
    }
}
/* </style> */
/* <!-- end foundation title rotate stuff --> */







/* <!-- header box info --> */
/* <style> */
@media only screen {

    /* 1st child of article, parent to hdrow1, h1 headblock, h2 subblock, hdrow2 */

    #hdrow1, #hdrow2 {
        grid-column: 1/4;
        grid-row: 1/2;
        background:rgba(245,240,240,1);
    }
            #hdrow2 {
                grid-column: 1/4;
                grid-row: 3/4;
                background:rgba(245,240,240,1);
            }

            #headblock {
                grid-column: 2/3;
                grid-row: 1/4;

                display: grid;
                grid-template-columns:1fr;
                grid-template-rows: 8vw 7.5vw 3vw ;
                width:100%;
                background: rgba(51, 0, 0, 1);
                z-index:1000;
            }
            /* 2nd child of header, parent to hdr-modal, hdr-music */

            #hdr-modal {
                padding-top:3vw;
                width:100%;
                grid-column: 1/2;
                grid-row: 1/2;
                display:grid;
                align-items: end;
                text-align: center;
                z-index:10;
            }
            /* 1st child of headblock */

            #hdr-music {
                grid-column: 1/2;
                grid-row: 2/3;
                z-index:10;
                letter-spacing: 0.6vw;
                display:grid;
                align-items: start;
                text-align: center;
                padding-top:.6vw;
                padding-left:.5vw;
            }
            /* 2nd child of headblock */

            #subblock {
                grid-column: 1/-1;
                grid-row: 2/3;
                display: grid;
                grid-template-columns:1fr 30vw 1fr;
                grid-template-rows: 1fr ;
                z-index:0;
                background:rgba(245,240,240,1);
            }
            /* 3rd child of header, parent to sub-world, sub-music, sub-bands */

            #sub-world {
                grid-column: 1/2;
                grid-row: 1/1;
                display:grid;
                align-items: start;
                text-align:right;
                z-index:0;
                padding-right:1.5vw;
                width:calc(100% - 1.5vw);
            }
            /* 1st child of subblock */

            #sub-music {
                grid-column: 2/3;
                grid-row: 1/2;
                width:100%;
                align-items: start;
            }
            /* 2nd child of subblock */

            #sub-bands {
                grid-column: 3/4;
                grid-row: 1/2;
                text-align:left;

                display:grid;
                align-items: start;
                padding-left:1vw;
                width:calc(100% - 1vw);
            }
            /* 3rd child of subblock */
        }

/* </style> */
/* <!-- end header box info --> */






/* <!-- Nav General --> */
/* <style> */
/* NAV General */

@media only screen {

    #popupmenu.hide {
        display:none;
    }
    /* above hides menu iframe and close button */
    #popupmenu:target  {
        display: grid; margin-bottom:0;
    }
    /* above reveals menu iframe and close button */
    /* above makes close button display as block */

    #popupmenu {
        grid-column:1 / -1;
        grid-row:1 / -1;

        align-self:end;
        right: 0;
        bottom: 0em;
        margin:0; padding:0;
        z-index:6010;
        background:none;
        border-top-left-radius:0.5rem;
        border-top-right-radius:0.5rem;
    }
    /* 3rd child of body,  parent of #menuiframe, #closebutton */

    nav {
        grid-column:1 / -1;
        grid-row:1 / -1;

        display: block;
        width: 100%;
        margin:0; padding:0;
        border: none;
        z-index:6000;
        align-self: end;
    }
    /* 2nd child of body, parent of openmenu.nav-borders */

    #openmenu:hover, #openmenu:focus, #openmenu:active, #closebutton:hover, #closebutton:focus, #closebutton:active {
        background: rgba(204, 102, 102, 1);
        text-shadow: 0 2px 3px black, -.02rem .2rem .2rem rgba(0, 0, 0, .5);
    }

    #menuiframe iframe {
        background: rgba(255, 255, 255,.75);
    }

    #closebutton {
        background:  rgba(51, 0, 0, 1);
    }
    /* 2nd child of popupmenu, parent of closebuttonholder */

    .closemenubutton:hover, .closemenubutton:focus, .closemenubutton:active {
        cursor:pointer;
    }

    .closemenubutton,
    #close_pre, #close_post {
        font-family:  Helvetica, Arial, sans-serif;
        font-style:normal; text-align:center;
        line-height:0;
        color: white;
        border: none;
    }

}

/* </style> */
/* <!--    end Nav General --> */


/* <!-- General press css  style port --> */
/* <style> */
@media only screen {


    .newsclipping {
        z-index:1;
        margin-bottom:calc(.25em + 1vw);
    }

    .newsclipping a:hover .newscap {
        color:white;
    }

    .newsbox .newscap p .addon-newscap {
        display:block;
    }

    .newsbox {
        width:100% ;
        display:grid;
        grid-template-columns:1fr;
        grid-template-rows:auto 1fr;
    }

    .newsclip-container {
        width:100%; height:0;
        overflow: hidden;
        position:relative;
        padding-bottom:56.25%;
        margin-bottom:.5em;
    }
    /* padding-bottom:56.25%; critical to keeping proportions */

    .newsclip-imgbox {
        width:100%;
        grid-column:1 / 1;
        grid-row:1 / 1;
    }

    .newscap {
        grid-column:1 / 1;
        grid-row: 2 / 2;
        align-self:start;
    }

    .newscap {
        font-size:1em;
        font-style: normal;
        font-weight:bold;
        color:black;
    }

}

/* </style> */
/* <!-- General press css  style port --> */












/* <!-- General style port --> */
/* <style> */
@media only screen {

    html {
        font: normal calc(.70em + 1vw)/1em  Helvetica, Arial, sans-serif;
    }

    body {
        display: grid;
        grid-template-columns:1fr;
        /* grid-template-rows: auto 1fr ; */
        margin:0; padding:0;
        /* min-height: calc(100vh + .01em);
        min-height: -webkit-fill-available; */
        background:rgba(255,250,250,1);
        grid-template-rows: auto;
        position: relative;
    }
    /* parent to article, nav, popupmenu, firstcol, lastcol */

    article {
        grid-column: 1/-1;
        grid-row: 1/-1;

        display: grid;
        grid-template-columns:1fr 5rem;
        grid-template-rows: auto 1fr ;
        /* background:cornsilk;         */
    }

    .back {
        grid-column: 2/3;
        grid-row:1/-1;
        height: calc(100% - 3.5em);
        padding: 0 .5rem;
        display:grid;
        z-index:2;
    }

    .back-text {
        font-weight:400;
        height:1em;
        height:.75em;
        align-self: end;
        bottom:3.5em;
        display:grid;
        grid-template-columns:.65rem auto;
        grid-template-rows:1fr;
    }

    .back-text:before {
        content:"\003C";
        font-size:100%;

        grid-column: 1/2;
        grid-row:1/2;
    }

    .back-text:after {
        content:"BACK";
        font-size:75%;
        grid-column: 2/3;
        grid-row:1/2;
    }

    a.back-text {
        padding-bottom:.15em;
        border-bottom: 2px solid rgba(204, 102, 102, 1);
    }

    .articlebox {
        grid-column: 1/2;
        grid-row: 1/-1;

        margin:0;
        padding-top:0em;
        padding-bottom:10vh;
        /* background:tan;   */
        /* background:rgba(255, 202, 103, .1);            */
        display: grid;
        grid-template-columns:1fr;
        grid-template-rows: auto 1fr ;
    }

    .articlebox.full {
        display:grid;
        grid-template-columns:1rem 1fr 1rem ;
        /* background:grey;  */
    }

    .banner {
        grid-column:2/3;
        grid-row:1/2;
    }

    .ab-lcol, .ab-rcol {
        grid-column:2/3;
    }

    .title-nav-col {
        grid-column: 2/3;
        grid-row: 1/-1;
        background:#ffcc66;
        z-index:0;
    }

    .slogan-bar {
        margin-bottom:1rem;
        text-align:left;
        z-index:50;
        top:0;
        grid-column: 2/3;
    }

    .slogan-bar h2  {
        background:rgba(204, 102, 102, 1);
        font-size:100%;
        line-height:1.25em;
        font-weight:900;
        color:white;
        text-align:center;
        text-shadow: -2px 2px 1px #330000;
        padding:.25em 0 .25em .25rem;
        padding-top:.125rem;
    }

    .fullwidth-gutters {
        grid-column:2/3;
        /* background:red; */
    }


    /* grid-template-columns:1fr 19vw; the 19vw makes the nav button fit into the bannerbox-col space note also to change the nav's grid col call to 1/-1
    and the openmenu-burger-center size back to 1.5em */

    p {
        font-size: clamp(1rem, calc(0.9545rem + 0.3636vw), 1.05rem);
        line-height:calc(1.05em + 1vw);
    }
    /* font-size: clamp(1rem, 1.0000rem + 0.2667vw, 1.07rem); */

    p.p90 {
        font-size:95%;
        line-height:1.3em;
    }

    .sticky {
        position: -webkit-sticky;
        position: -moz-sticky;
        position: -o-sticky;
        position: sticky;
    }

    .abBoxA {
        grid-column:1/-1;
        grid-row:1/-1;
        display:grid;
        grid-template-columns:1rem 1fr 1rem 19vw;
        grid-template-rows: 1fr auto ;
    }

    /* .title { background:greenyellow; } */

    .titlebar {
        grid-column: 2/3;
        grid-row: 1/2;
        top:1em;

        z-index:2;
        display:grid;
        /* background: pink; */
    }

    .titlebar.withvidbanner   {
        grid-column: 2/3;
        grid-row: 5/-1;
        place-self: start ;
        /* top:1em; */
    }

    .title {
      font-family:  Helvetica, Arial, sans-serif;
      font-weight:400;
      font-size:1.5rem;
      margin:0; padding:0;
      width:1rem;
      position:relative;
      left:.75rem;
    }

    .slogan-bar .title {
        font-family:  Helvetica, Arial, sans-serif;
        font-weight:400;
        font-size:1.125rem;
        margin:0; padding:0;
        width:100%;
        position:relative;
        left:0rem;
      }

    .slogan-bar {
        background:rgba(255,250,250,1);
    }

    h1.title, h2.title {
        display: grid;

    }

    .title-small-new {
        font-size:120%;
        line-height:.816em;
        font-weight:400;
        margin:0; padding:0;
    }

    .title-big-new {
        font-size:157%;
        font-weight:900;
        line-height:.80em;
        margin:0; padding:0;
    }

    .line-one {
        grid-column: 1 / 3;
        grid-row: 1/2;
        align-self: end;
        /* background:thistle; */
    }

    .slogan-bar .line-one {
        grid-column: 1 / -1;
        display:block;
    }

    .line-one-left {
        grid-column: 1 / 2;
        grid-row: 1/2;
    }

    .title-left-csm {
        font-size: 65%;
    }

    .title.short {
        font-size:145%;
    }

    .line-one-right {
        grid-column: 2/3;
        grid-row: 1/2;
    }

    .title-right-csm {
        color:rgb(112, 13, 13);
        font-weight: 900;
        font-size: 162%;
        position: relative;
        left: 0.22em;
    }

    .line-two {
        grid-column: 1/3;
        grid-row: 2/3;
        align-self: start;
        /* background:powderblue; */
    }

    .slogan-bar .line-two {
        grid-column: 1/-1;
        grid-row: 2/3;
        align-self: start;
        /* background:powderblue; */
    }


    /* This is where all active content is put */

    .articlebox.withbannerbox {
        grid-column:1/4;
        grid-row: 1/-1;
        display:grid;
        grid-template-columns:1rem 1fr 1rem ;
    }

    .ab-row {
        grid-column:2/3;
    }

    .ab-twocol-even {
        grid-column: 1/-1;
        display:grid;
        grid-template-columns:1fr 1rem 1fr;
    }

    .ab-row.none-odd, .ab-row.even-two  {
        grid-column:2/3;
        /* background:papayawhip; */
    }



    /* .ab-rcol , .ab-row.even-two .ab-rcol{
        grid-column:2/3;
    } */

    .ab-row-even {
        grid-column:1/-1;
        margin-bottom:1em;
    }

    .jhdvid-ab-row-even {
        grid-column:2/3;
        margin-bottom:1em;
        background:#ffcc66;
    }

    .ab-lcol-even {
        grid-column:1/2;
        /* grid-row: 2/3; */
    }

    .ab-rcol-even {
        grid-column:3/4;
        /* grid-row: 2/3; */
    }



    .popup-video.hide {
        display:none;
    }

    .popup-video:target  {
        grid-column:2/5;
        grid-row:3/4;

        display: grid;
        grid-template-columns:1fr;
        grid-template-rows:auto 2rem;
        margin-bottom:0;
        margin-top:0;
        z-index:300;
        background:rgba(245,240,240,1);
    }
    /* cof abBoxA */

    .popup-video figure {
        grid-column:1/2;
        grid-row:1/2;

        display:grid;
        grid-template-columns:1fr;
        grid-template-rows:auto 1rem auto;
    }
    /* 1st cof popup-video */

    .popup-video figcaption {
        grid-column:1/2;
        grid-row:3/4;
    }
    /*  2nd cof figure */

    .popup-video:hover figure {
        background:rgba(245,240,240,1);
    }

    .popup-video:hover figcaption {
        color:black;
        background:rgba(245,240,240,1);
    }

    .close-video {
        grid-column:1/2;
        grid-row:2/3;
    }
    .close-video::before {
        content:"CLICK TO CLOSE VIDEO";
        color: white;
        background:rgb(112, 13, 13);
    }
    /* 2nd cof popup-video */

    .close-video {
        right: 0rem;
        bottom: 0rem;
        display:grid;
        text-align:center;
        align-items:center;
        height: 2rem;
        background:rgb(112, 13, 13);
        font-weight:700;
        color: white;
        content: "CLOSE SECTION";
        cursor: pointer;
        border-radius:0.5rem;
        margin-bottom:1rem;
    }

    .close-video:hover, .close-video:hover::before {
        background-color: black;
    }






    .withoutbannerbox {
        grid-column: 4/5;
        grid-row: 3/-1;
    }

    .h2_rule {
        margin-top:-.25em;
        line-height:1.25em;
        grid-column:1/-1;
        grid-row:1/2;
    }


    .AB-Row-head, .AB-Row-head-ruled   {
        background:rgba(255,250,250,1);
    }

    .AB-Row-head, .AB-Row-head-ruled, .AB-Row-head-full   {
        grid-column:1/4;
        display:grid;
        grid-template-columns:1fr;
        grid-template-rows:auto;
        margin-bottom:1em;
        top:0;
        z-index:100;
    }

    .AB-Row-head h4, .AB-Row-head-full h4 {
        font-weight:900;
        color:white;
        padding:0 0 .25em 0;
        background:rgba(204, 102, 102, 1);
        text-shadow: 0 2px 3px black, -.02rem .2rem .2rem rgba(0, 0, 0, .5);
        text-align:center;
        border-bottom: .2em solid rgba(51, 0, 0, 1) ;
        display:block;
    }

    .h4_bar, .h4_bar.press {
        top:0;
        z-index:200;
        display:block;
        margin:0;
        background:rgba(245,240,240,1);
    }

    .h4_bar .press {
        background:rgba(255,250,250,1);
    }



    .color_bar {
        font-size:100%;
        line-height:1.25em;
        color:white;
        font-weight:900;
        text-align:center;
        display:block;
        margin-bottom:.125em;
        padding:0 0 .25em 0;
        background:rgba(204, 102, 102, 1);
        text-shadow: 0 2px 3px black, -.02rem .2rem .2rem rgba(0, 0, 0, .5);
    }

    .h4_bar-sub {
        font-weight:700;
        font-size:80%;
        line-height:1em;
        text-align:left;
        display:block;
        margin-bottom:1.5em;
        padding:.25em 0 .5em 0;
        border-bottom: .2em solid rgba(51, 0, 0, 1) ;
    }

    .h4_bar-sub.press {
        /* margin-top:-1em;
        padding:.5em 0 .5em 0;
        color:green;
        height:3em; */
    }

    .AB-Row-head h5 {
        font-weight:900;
        color:#330000;
        grid-column:1/4;
        grid-row:2/3;
        margin-top:0em;
        padding:.5em .25em .25em .25em;
        background:rgba(224, 224, 224, 1);
        text-align:center;
        border-bottom: .2em solid rgba(51, 0, 0, 1) ;
        display:block;
    }



    .AB-Row-head h5 {
        font-weight:900;
        color:#330000;
        grid-column:1/4;
        grid-row:2/3;
        margin-top:0em;
        padding:.5em .25em .25em .25em;
        background:rgba(224, 224, 224, 1);
        text-align:center;
        border-bottom: .2em solid rgba(51, 0, 0, 1) ;
        display:block;
    }



    .h2_rule {
        border-bottom: .2em solid  rgb(112, 13, 13) ;
        display:block;
        color:rgba(51, 0, 0, 1);
        padding-bottom:.15em;
        margin-bottom:.65em;
    }



    /* RECORDING STUFF */

    .html5player {
        grid-column:1/4;
        grid-row:2/3;
        height:auto;
        width:auto;
        margin:0;
        padding:0 0 2em 0;
    }

    .player {
        width:calc(100% - .125em);
    }

    figcaption.player {
        font-size:1rem; line-height:1.0rem;font-style:normal; font-weight:700;
        color:rgb(112, 13, 13);
        margin-top:1.25rem;
        margin-bottom:.25rem;
        padding:0rem;
        background:white;
    }

    figcaption.player span {
        font-style:normal; font-weight:400; font-size:.85em; line-height:.85em;
        color:rgba(0, 0, 0,1);
    }

    .html5player {
        margin-top:-.75rem;
    }

    audio {
        margin-top:.125em;
        margin-left:.5em;
        filter: aqua (10%) saturate(10%) grayscale(1) contrast(99%) invert(0%);
        width: 95%;
        height: 2em;
        background:rgba(204, 102, 102, 1);
        -moz-box-shadow: -0.3em 0.3em 0.1em 0.05em rgba(102, 50, 100, 0.5) ;
        -webkit-box-shadow: -0.3em 0.3em 0.1em 0.05em rgba(102, 50, 100, 0.5) ;
        box-shadow: -0.3em 0.3em 0.1em 0.05em rgba(102, 50, 100, 0.5) ;
        -moz-border-radius:.3rem .3rem .3rem .3rem ;
        -webkit-border-radius:.3rem .3rem .3rem .3rem ;
        border-radius:.3rem .3rem .3rem .3rem ;
    }



    /* end recording stuff */
    /* 2nd child of articlebox */



    /* EXPAND CARD START */

    .expand-card-top:hover p, .expand-card-top:focus p, .expand-card-top:active p, .expand-card a:hover, .expand-card a:focus, .expand-card a:active {
        background:rgb(112, 13, 13);
        color:white;
    }

    .popup-video,
    .opened-card, .opened-card:hover, .opened-card p, .opened-card:hover a {
        color: rgba(51, 0, 0, 1);
    }

    .expand-card-title {
        line-height:1.125em;
        text-decoration:none;
        padding-bottom:.065em;
        padding-top:.25em;
        margin-bottom:.35em;
        border-bottom:.1em solid #330000;
    }

    .expand-card {
        margin-bottom:1em;
        display:grid;
        grid-template-columns: 1fr ;
        grid-template-rows:auto ;
    }

    .expand-card p, .opened-card p {
        font-weight:400;
    }

    .expand-card-top {
        grid-column:1 / -1;
        grid-row:1/-1;
        display:grid;
        grid-template-columns: 1fr ;
        grid-template-rows:1fr  ;
    }
    /* 1st cof card */

    .expand-card-img {
        grid-column:1 / -1;
        background:rgb(112, 13, 13);
    }
    /* 1st cof expand-card-top */

    /* #fests:target, #library:target, #parades:target,  #house:target, #barn:target, #circus:target, #private-wed:target, #team:target, #school:target, #homeschool:target, #ethnorobics:target, #lectures:target, #specialneeds:target {
        scroll-margin-top: calc(5rem + 12vw);
    } */





    /* Unopened untargeted card */
    .opened-card, .opened-press {
        display: none;
    }
    /* 2nd cof expand-card-top */

    /* Opened targeted card */
    .opened-card:target {
        scroll-margin-top: calc(9rem + 12vw);
        grid-column:1 / -1;
        grid-row:1 / -1;
        width: 100%;
        height: 100%;
        display:grid;
        z-index:2;
    }

    .opened-press:target {
        scroll-margin-top: calc(9rem + 12vw);
        margin-bottom:calc(9rem + 12vw);
        grid-column:2/3;
        grid-row:1 / 2;
        width: 100%;
        height: 100%;
        display:grid;
        z-index:5;
        /* background:red; */
    }

    /* opened-card content */
    .opened-card a, .opened-press a {
        grid-column:1 / -1;
        z-index:3;
        right: 0rem;
        top: 6rem;
    }
    /* 2nd cof expand-card-top */
    /* background-color: lightpink; */

    .opened-press a {
        top: 0rem;
    }

    /* opened-card "Close" toggle */
    .opened-card .close, .opened-press .close {
        display: block;
    }

     .opened-card, .opened-card .close:hover,
     .opened-press, .opened-press .close:hover
     {
        background:rgba(255,250,250,1);
    }

    .opened-card .close::after, .opened-press .close::after {
        right: 0rem;
        bottom: 0rem;
        display:grid;
        text-align:center;
        align-items:center;
        height: 2rem;
        background:rgb(112, 13, 13);
        font-weight:700;
        color: white;
        content: "CLOSE SECTION";
        cursor: pointer;
        border-radius:0.5rem;
        margin-bottom:1rem;
    }
    .opened-press .close::after
    {
        content: "CLICK TO CLOSE CLIPPING";
    }

    .opened-card .close:hover::after,

    .opened-press .close:hover::after {
        background-color: black;
    }

    .opened-press .caption:hover {
        color: black;
    }

    .caption {
        font-weight: bold;
    }

    .opened-press .caption {
        margin-top:.25em;
    }

    .reponsive-multi-column .caption {
        margin-top:.25em;
    }


    #menuiframe {
        background: rgba(255, 255, 255,.85);
    }
    /* affects only land and desk */

    /* END EXPAND CARD */




    /* </style> */


}

/* </style> */
/* <!-- end general port --> */











/* <!-- DROID PORT STRUCTURE -->  */
/* <style> */


    @supports (display:grid)
    {
        @media only screen and (max-width:420px)
        {



            /* parent to article, splash, nav, popupmenu, firstcol, lastcol */
            /* grid-template-columns:1fr 19vw; the 19vw makes the nav button fit into the bannerbox-col space note also to change the nav's grid col call to 1/-1
            and the openmenu-burger-center size back to 1.5em */

            header {
                grid-column: 6/7;
                grid-row: 1/-1;
                align-self:start;
                top: 0;
                z-index:100;
                background:#ffcc66;
                margin-bottom:0;
            }



            /* NAVIGATION MENU PORT */

            nav {
                grid-column:2 / -1;
                grid-row:1 / -1;
                align-self:end;
                bottom: 0;
                z-index:1005;
            }
            /* 2nd child of body - parent of openmenu.nav-borders */
            /*
            z-index needed on press page to keep the button above the article links
            */

            .nav-borders {
                width:auto;  height: 3em;
                background: rgba(51, 0, 0, 1);
                border-top-left-radius: .5rem;
                border-top-right-radius: .5rem;
            }
            /* 1st child of nav, parent to openmenu-burger-center */

            #openmenu {
                display: grid;
                grid-template-columns:1fr;
                /* grid-template-rows: auto; */
                grid-template-rows: 1fr;
                align-self:end;
                z-index:15;
                position:fixed;
                bottom:0;
                width:5rem;
            }
            /* 1st child of nav */
            /* parent to openmenu-burger-center */

            #openmenu-burger-center {
                font: 1.125em/ 1em  Helvetica, Arial, sans-serif;
                text-align:center;
                font-weight: 700;
                color:white;
                align-self:center;
                margin:0; padding: 0;
                border: none;
            }
            /* only child of openmenu */

            #popupmenu {
                display: grid;
                grid-template-columns:1fr;
                grid-template-rows:auto 1fr;
            }
            /* 3rd child of body,  parent of #menuiframe, #closebutton */

            #menuiframe {
                width:100%; height:70vh;
                background: none;
                grid-column: 1 / -1;
                grid-row: 1 / 2;
                align-self:end;
                bottom:0;
                -webkit-overflow-scrolling: touch;

                display: grid;
                grid-template-columns:.25rem auto .75rem;
                grid-template-rows:1fr;
                background: rgba(255, 255, 255,.65);
                border-top-left-radius:0.5rem;
                border-top-right-radius:0.5rem;
            }
            /* 1st child of #popupmenu.hide, parent to iframe menu */

            #menuiframe iframe {
                grid-column: 2 / 3;
                grid-row: 1 / -1;

                height:70vh; width:100%;
                margin:0; padding:0;
                padding-right:.5em;
                align-self:end;
                left: 0;
                bottom: 0em;
            }
            /*
            1st child of #menuiframe portrait and land.
            page height must match #menuiframes height
            */

            #closebutton {
                margin:0; padding:0;
                z-index:5;
                grid-column: 1 / -1;
                grid-row: 1 / -1;
                align-self:end;
            }
            /* 2nd child of popupmenu  */

            #closebutton {
                display: grid;
                grid-template-columns:1fr;
                grid-template-rows: 1fr;
                z-index:5;
            }
            /* 2nd child of popupmenu.hide, parent to closebuttonholder */
            /* the frs center the closebuttonholder box */

            .closebuttonholder {
                grid-column:2/3;
                grid-row: 1/-1;
            }
            /* 1st child of closebutton, parent to closemenubutton */

            .closemenubutton  {
                align-items: center;
                height:1em;
                padding:.9rem 0;
                font-size:1.5em;
                font-weight:bold;

                display:grid;
                grid-template-columns:1fr .5rem 1fr;
                grid-template-rows: 1fr;
                background:none;
            }
            /* 1st child of closebuttonholder
            holds "CLOSE MENU" sections */
            /* parent of close_pre, close_post, closebutton_post */

            #close_pre {
                grid-column: 1 / 2;
                grid-row: 1 / 1;
                line-height:1em;
                place-self:end;
            }
            /* 1st child of closemenubutton, holds "CLOSE" */

            #close_post {
                grid-column: 3 / 4;
                grid-row: 1 / 1;
                line-height:1em;
                place-self:start;
            }
            /* 2nd child of closemenubutton, holds "MENU" */

            .closebutton_post {
                opacity:0;
            }
            /* 3rd child of closemenubutton, holds "xed circle" */

            #closebutton:hover .closebuttonholder, #closebutton:focus .closebuttonholder, #closebutton:active .closebuttonholder {
                background:rgba(204, 102, 102, 1);
                border-top-left-radius:.5rem;
                border-top-right-radius:.5rem;
                cursor:pointer;
            }

            a#closebutton {
                text-shadow: 0 2px 3px black, -.02rem .2rem .2rem rgba(0, 0, 0, .5);
                border: none;
            }
            /* set general font treatments */



            /* END NAVIGATION */





        }
    }

/* </style> */
/* <!-- end DROID PORT STRUCTURE -->  */



















/* <!-- @media only screen and (min-width: 420px) and (max-width:920px)  --> */
/* <!-- DROID LAND STRUCTURE --> */

/* <style> */
    /* <!-- DROID LAND STRUCTURE --> */

    @supports (display:grid)
    {
        @media only screen and (min-width: 420px) and (max-width:920px)
        {
            .slogan-bar h3.title-rotate_v-rl_180 {
                -webkit-writing-mode: vertical-rl;
                writing-mode: vertical-rl;
                -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
                display: inline-block;
                margin:0; padding:0;
                text-align:right;
                top:calc(.125rem + 2vw);
                left:.75em;
                height:20em;
            }

            /* <!-- end landscape title rotate stuff --> */


            html {
                font: normal calc(.55em + 1vw)/1em  Helvetica, Arial, sans-serif;
                background:none;
            }
            /* defines base font droid */

            body {
                display: grid;
                grid-template-columns: 1fr;
                grid-template-rows: auto 1fr ;
                margin:0; padding:0;
                min-height: calc(100vh + .01em);
                min-height: -webkit-fill-available;
                background:rgba(255,250,250,1);
            }
            /* parent to article, splash, nav, popupmenu, firstcol, lastcol */

            .articlebox {
                grid-column: 1/-1;
                display:grid;
                grid-template-columns:  1fr 5rem ;
                grid-template-rows: auto  1fr ;
                /* background:pink; */
            }

            .articlebox.full {
                display:grid;
                grid-template-columns:5.5rem 1.5rem 1fr 1.5rem 5rem;
                /* background:grey;  */
            }

            .banner  {
                grid-column:3/4;
                grid-row: 1/2;
                margin-bottom:1em;
            }

            .ab-row {
                grid-column:3/4;
            }

            .ab-lcol, .ab-rcol {
                grid-column:3/4;
            }

            .slogan-bar {
                padding:.12rem .4rem;
                grid-column:1;
                grid-row:1/2;
                height:calc(5.75em + 2vw);
                background:rgba(204, 102, 102, 1);
            }

            .slogan-bar h2  {
                text-align:right;
                font-size:140%;
                line-height:1.15em;
                padding:0;
                padding-top:0em;
                padding-top:.125rem;
            }

            .slogan-bar .title {
                font-family:  Helvetica, Arial, sans-serif;
                font-weight:400;
                font-size:1.125rem;
                margin:0; padding:0;
                width:100%;
              }

            .fullwidth-gutters {
                grid-column:3/4;
                /* background:red; */
            }

            #contact-rule {
                grid-column:3/4;
                /* background:red; */
            }

            .bannerbox-col {
                grid-column: 6/9;
            }

            .abBoxA {
                grid-column: 1/-1;
                grid-row: 1/-1;
                display: grid;
                grid-template-columns: 5.5rem 1.125rem 1fr 1.125rem 2vw 4.5rem 2vw;
                grid-template-rows: auto  1fr ;
            }

            .articlebox.withbannerbox {
                grid-column: 1/5;
                display:grid;
                grid-template-columns: 5.5rem 1.125rem 1fr 1.125rem ;
                grid-template-rows: auto  1fr ;
                /* background:pink; */
            }

            .bannerbox  {
                grid-column:3/4;
                grid-row: 1/2;
                margin-bottom:1em;
            }

            .ab-row.none-odd , .ab-row.even-two {
                grid-column: 3/4;
                display:grid;
                grid-template-columns:1fr;
            }

            .ab-row.none-odd .ab-lcol, .ab-row.none-odd .ab-rcol, .ab-row.none-odd .fullwidth {
                grid-column:1/-1;
            }

            .titlebar.withbanner {
                grid-column:7/8;
                grid-row: 1/2;
                top:1em;
                display:grid;
                /* background:red; */
            }

            .titlebar h2.contact, .titlebar h2.csm, .titlebar h2.short {
                margin:0 1vw;
            }
            /* experiement with grid placement calls like justify-self and align-self to replace this */

            .titlebar h2.mmbands {
                margin:0 1vw;
             }

            .titlebar.withoutbanner {
                grid-column: 1/2;
                grid-row: 2/-1;
                place-self: start ;
                top:1em;
            }

            .jhd {
               font-size:1.55rem;
            }

            /* .slogan-bar h3 .jhd {
                font-size:1.25rem;
                background:red;
             } */

            .mmbands {
               font-size:4vw;
            }

            .contact {
                font-size:3.75vw;
            }

            .csm {
                font-size:3.4vw;
            }

            .title-big-new.short {
                font-size:3.2vw;
            }

            .title-left-csm {
                font-size: 65%;
            }

            .title-right-csm {
                font-size: 162%;
                position: relative;
                left: 0.22em;
            }

            .back-text {
                bottom:4em;
            }

            .popup-video:target  {
                grid-column:2/5;
                grid-row:1/4;
                background:rgba(245,240,240,1);
            }
            /* cof abBoxA */

            *:target {
                scroll-margin-top: calc(7rem + 4vw);
            }

            .opened-card:target {
                scroll-margin-top: calc(7rem + 4vw);
            }

            .opened-press:target {
                scroll-margin-top: calc(9rem + 12vw);
                grid-column: 3/4;
            }

            p {
                font-size: clamp(1rem, 0.7900rem + 0.8000vw, 16px);
                line-height:clamp(1.25rem, 1.0400rem + 0.8000vw, 25px);
            }

            .phone {
                font-size:150%;
                margin-bottom: .5em;
            }

            header {
                grid-column: 6/7;
                grid-row: 1/-1;
                display: grid;
                grid-template-columns:18vw;
                grid-template-rows: 12vw  ;
                background:rgba(245,240,240,1);
            }
            /* 1st child of article, parent to hdrow1, h1 headblock, h2 subblock, hdrow2 */

            header h1 {
                font-family: Helvetica, Arial, sans-serif; font-size: 4vw; line-height:1em;
                color:white;
                text-align:center;
            }

            /* header h2 {
                font-family: 'Sansita Swashed', cursive;
                font-weight: bold;
                font-size: 4vw; line-height:1em;
                text-align:center;
                color:rgba(51, 0, 0, 1);
            } */

            #headblock {
                grid-column: 1/-1;
                grid-row: 1/-1;
                align-self:start;
                top: 0;

                display: grid;
                grid-template-columns:1fr;
                grid-template-rows: 4.75vw 5vw ;
                width:100%;
                margin:0; padding:0;
                padding-bottom:.25em;
                background: rgba(51, 0, 0, 1);
                z-index:3000;
            }
            /* 2nd child of header, parent to hdr-modal, hdr-music */

            #hdr-modal {
                padding-top:2vw;
            }
            /* 1st child of headblock */

            #hdr-music {
                letter-spacing: 0.35vw;
                display:grid;
                align-items: start;
                text-align: center;
                padding-top:.6vw;
                padding-left:.5vw;
                width: calc( 100% - .5vw );
            }
            /* 2nd child of headblock */

            #subblock {
                grid-column: 1/-1;
                grid-row: 2/3;
                align-items: start;
                align-self:start;
                top: 12vw;
                display: grid;
                grid-template-columns:1fr 17vw 1fr ;
                grid-template-rows: 4vw 4vw 4vw;
                z-index:1001;
                margin:0; padding:0;
            }
            /* 3rd child of header, parent to sub-world, sub-music, sub-bands */

            #sub-world {
                grid-column: 1/-1;
                grid-row: 1/1;
                align-items: start;
                justify-self: end;
                text-align:center;
                z-index:0;
                width:100%;
                padding:0;
            }
            /* justify-self controls l-r axis */
            /* align-items controls up-dwn axis */
            /* 1st child of subblock */

            #sub-music {
                grid-column: 1/-1;
                grid-row: 2/3;
                width:100%;
                align-items: start;
                justify-self: start;
                text-align:center;
            }
            /* 2nd child of subblock */

            #sub-bands {
                grid-column: 1/-1;
                grid-row: 3/4;
                text-align:center;
                width:100%;
                padding:0;
                align-items: start;
            }
            /* 3rd child of subblock */

            .sidebyside {
                display:grid;
                grid-template-columns:1.25fr .5em minmax(2.5em, .5fr);
                grid-template-rows: auto;
            }

            .overunder-sidebyside {
                display:grid;
                grid-template-columns:1fr .5em clamp(41%, 36%, 41%);
                grid-template-rows: auto;
            }

            .overunder-sidebyside figcaption {
                grid-column: 3;
            }

            .above-minus-1-25em {
                margin-top:1.0em;
            }


            .rule-bottom  {
                margin-top:0;
                padding-bottom: 2em;
                margin-bottom:1.5em;
            }



            /* site-map stuff */

            #sitemap {
                height:12em;
                grid-column:3/4;
            }

            #sitemap iframe {
                align-self:start;
                height:calc( 90vh - 5em);
                height:clamp(20em, 28em, calc( 90vh - 5.5em));
                height:calc( 14em - 2vh);
                position:relative; top:0;
                border-bottom: 2px solid rgba(204, 102, 102, 1);
            }

            .footgroup-head {
                grid-column: 1/-1;
            }

            ul.footgroup {
                list-style:none;
                column-count: 2;
                column-gap: 2vw;
            }

            .site-second li {
                -webkit-column-break-inside: avoid;
                page-break-inside: avoid;
                break-inside: avoid;
            }

            /* end site-map stuff */

            /* NAVIGATION LANDSCAPE */

            nav {
                grid-column:2/3;
                grid-row:1 / -1;
                align-self:end;
                z-index:2005;
                bottom: 0;

            }
            /* 2nd child of body, parent of openmenu.nav-borders */

            .nav-borders {
                grid-column:6/9;
                grid-row:1 / -1;
                height: 3.5em;
                width: auto;
                background: rgba(51, 0, 0, 1);
                border-top-left-radius: .5rem;
                border-top-right-radius: .5rem;

                align-self:end;
                bottom: 0;
            }
            /* 1st child of nav, parent to openmenu-burger-center */

            #openmenu {
                display: grid;
                grid-template-columns:1fr;
                grid-template-rows: 1fr;
                position:fixed;
                bottom:0;
                width:5rem;
                align-self:end;
                z-index:15;
            }
            /* 1st child of nav */
            /* parent to .openmenu-burger-center */

            #openmenu-burger-center {
                font: 1.5rem/1.5em  Helvetica, Arial, sans-serif;
                font-weight: 700;
                color:white;
                align-self:center;
                text-align:center;
                margin:0;
                padding-bottom: 0;
            }
            /* only child of openmenu */

            #popupmenu {
                grid-column: 1 / -1;
                grid-row: 1 / -1;
                display: grid;
                grid-template-columns:18vw 1fr 5rem;
                margin:0; padding:0;
            }
            /* 3rd child of body,  parent of #menuiframe, #closebutton */

            #menuiframe {
                width:100%;
                height:80vh;
                margin:0; padding:0;
                grid-column: 2/3;
                grid-row: 1 / -1;
                align-self:start;
                bottom:0;
                -webkit-overflow-scrolling: touch;
            }
            /* 1st child of #popupmenu.hide, parent to iframe menu */

            #menuiframe iframe {
                height:calc(80vh - 2%);
                width:100%;
                border-top-left-radius:0.5rem;
                border-top-right-radius:0rem;
                border-bottom-left-radius:0.5rem;
            }
            /*  1st child of #menuiframe portrait and land.  page height must match #menuiframes height  */

            #closebutton {
                height:34vh;
                margin:0; padding:0;
                z-index:5;
                grid-column: 3/4;
                grid-row: 1/-1;
                align-self:end;
                bottom:0;
                border-top-left-radius: .5rem;
                border-top-right-radius: .5rem;
                display: grid;
                grid-template-columns:1fr;
                grid-template-rows: 1fr;
            }
            /* 2nd child of popupmenu, parent of closebuttonholder */

            #closebutton:hover, #closebutton:focus, #closebutton:active
            {
                border-top-left-radius: .5rem;
                border-top-right-radius: .5rem;
            }

            .closemenubutton {
                height:32vh;
                grid-column: 1/2;
                grid-row: 1/2;
                place-self:center;
                display: grid;
                grid-template-columns:1fr;
                grid-template-rows: auto 1.5em 1.5em auto;
                font-size:100%;
            }
            /* 1st child of closebuttonholder
                holds "CLOSE MENU" sections */
            /* parent of close_pre, close_post, closebutton_post */

            #close_pre {
                grid-column: 1/2;
                grid-row: 1/2;
                text-align:center;
                place-self:end;
            }
            /* 1st child of closemenubutton, holds "CLOSE" */

            #close_post {
                grid-column: 1/2;
                grid-row: 2/2;
                text-align:center;
            }
            /* 2nd child of closemenubutton, holds "MENU" */

            .closebutton_post {
                grid-column: 1/2;
                grid-row: 3/4;
                margin-top:2vw;
                padding:0;
                width: 100%;
                text-align:center;
                place-self:center;
            }
            /* 3rd child of closemenubutton, holds "xed circle" */

            #close_pre, #close_post {
                font: 1.25rem/ 1em  Helvetica, Arial, sans-serif;
                font-weight: 700;
            }

            .closebutton_post {
                font: 2rem/ 1em  Helvetica, Arial, sans-serif;
                font-style:normal;
                text-align:center;
                line-height:0;
                color: white;
                border: none;
                opacity:1;
            }
            /* 3rd child of closemenubutton, holds "xed circle" */

            /* END NAVIGATION LANDSCAPE */



        }

    }

/* </style> */
/* <!-- end DROID LAND STRUCTURE --> */



























/* <!-- DESK CSS CODE  --> */
/* <style> */
    /* DESK CSS CODE  */


    @supports (display:grid)
    {
        @media only screen  and (min-width: 920px)
        {

            .slogan-bar h3.title-rotate_v-rl_180 {
                -webkit-writing-mode: vertical-rl;
                writing-mode: vertical-rl;
                -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
                display: inline-block;
                margin:0; padding:0;
                text-align:right;
                top:1.125rem;
                left:.75em;
                height:20em;
            }

            html {
            font: normal 18px/1em  Helvetica, Arial, sans-serif;
            }
            /* sets overall base font size etc. */
            /*
            min-width is existential to prevent width overflows when browser window gets too narrow
            */
            p {
                line-height:1.35rem;
            }

            body {
                display: grid;
                grid-template-columns: minmax(0vw, 1fr)  900px  minmax(0vw, 1fr);
                grid-template-rows: auto 1fr;
                width:100%;
                margin:0; padding:0;
                min-height: calc(100vh + .01em);
                min-height: -webkit-fill-available;
                background:rgba(255,250,250,1);
            }
            /*20px 104px 24px 558px 26px 160px  parent to article, splash, nav, popupmenu, firstcol, lastcol  */

            article {
                grid-column: 2/3;
                grid-row: 1/-1;
                display: grid;
                grid-template-columns: 1fr 5rem;
                /* background:tan; */
            }

            .back {
                grid-column: 2/3;
                grid-row:1/-1;
            }

            .back-text {
                bottom:4.0rem;
            }

            .articlebox {
                grid-column: 1/2;
                grid-row: 1/-1;
                display:grid;
                grid-template-columns: 1fr 5rem;
                /* grid-template-rows: auto  1fr 10em; */
                /* background:red; */
            }

            .articlebox.full {
                grid-column: 1/2;
                display:grid;
                grid-template-columns:5.5rem 1.5rem 2fr 1.5rem 1fr 1.5rem;
                /* background:aqua;  */
            }

            .slogan-bar {
                padding:.12rem .4rem;
                grid-column:1;
                grid-row:1/2;
                height:6.80rem;
                top:0;
                background:rgba(204, 102, 102, 1);
            }

            .slogan-bar h2  {
                text-align:right;
                font-size:140%;
                line-height:1.15em;
                padding:0;
                padding-top:.125rem;
            }

            .banner {
                grid-column:3/6;
                grid-row:1/2;
                margin-bottom:1em;
            }

            .ab-row {
                grid-column:3/6;
            }

            .ab-row.none-odd  {
                grid-column: 3/6;
                display:grid;
                grid-template-columns:2fr 1.5rem 1fr;
                /* background:tan; */
            }

            .ab-row.none-odd .ab-lcol, .ab-row.none-odd .ab-rcol {
                grid-row:1;
                /* background:red; */
            }

            .ab-lcol, .ab-rcol {
                grid-row:2;
            }

            .ab-row.none-odd .ab-lcol {
                grid-column:1/2;
            }

            .ab-row.none-odd .ab-rcol {
                grid-column:3/4;
                /* background:pink; */
            }

            .ab-lcol {
                grid-column:3/4;
            }
            .ab-rcol {
                grid-column:5/6;
            }

            .onecol-twocol-even {
                display:grid;
                grid-template-columns:1fr 1rem 1fr;
                grid-column:3/4;
            }

            .ab-lcol-even {
                grid-column:1/2;
            }

            .ab-rcol-even {
                grid-column:3/4;
            }

            .fullwidth-gutters {
                grid-column:3/6;
                /* background:red; */
            }

            .h4_bar {
                top:0em;
            }

            #contact-rule, #sitemap {
                grid-column:3/6;
                /* background:red; */
            }


            .abBoxA {
                grid-column:2/10;
                grid-row:1/-1;
                display: grid;
                grid-template-columns: 100px 20px 640px 20px 20px 80px 20px ;
                grid-template-rows: auto 1fr;
                /* background:pink; */
            }
            /* 1st child of body */

            .articlebox.withbannerbox {
                grid-column: 1/5;
                display:grid;
                grid-template-columns: 100px 20px 640px ;
                grid-template-rows: auto  1fr 10em;
                /* background:red; */
            }

            .bannerbox {
                grid-column: 4/7;
                grid-row: 1/2;
                margin-bottom:1em;
            }

            .bannerbox.splash, .bannerbox.withbanner {
                grid-column:4/5;
                grid-row: 2/3;
            }

            .bannerbox-vid {
                grid-column: 5/6;
                grid-row: 2/3;
            }

            .popup-video:target  {
                grid-column:3/6;
                grid-row:1/4;
                background:rgba(245,240,240,1);
            }
            /* cof abBoxA */

            .opened-card:target {
                scroll-margin-top: 9rem;
            }

            .opened-press:target {
                scroll-margin-top: 9rem;
                grid-column: 3/6;
            }

            .titlebar.withbanner, .titlebar.withoutbanner, .titlebar.withvidbanner {
                grid-column: 7/8;
                grid-row: 1/2;
                /* place-self: start ; */
                top:1em;
                /* background:aqua; */
            }
            .bannerbox-col {
                grid-column: 6/9;
                grid-row: 1/-1;
                background:#ffcc66;
                z-index:0;
            }

            .jhd {
               font-size:28px;
            }

            .mmbands {
                font-size:36px;
            }

            .contact {
                font-size:34px;
            }

            .csm {
                font-size:31px;
            }



            .titlebar h2.mmbands, .titlebar h2.contact, .titlebar h2.csm, .titlebar h2.short {
                grid-row: 1/-1;
                margin:0 10px;
                margin-top:-18px;
            }
            /* .titlebar h2.mmbands,  .titlebar h2.contact background:red; */


            .ab-row.odd {
               display: grid;
               grid-template-columns:356px 17px 179px;
            }


            .ab-row-even {
                display: grid;
                grid-template-columns:1fr 1em 1fr;
            }
            .ab-row-even .ab-lcol-even  {
                grid-column:1/2;
            }

            .ab-row-even .ab-rcol-even {
                grid-column:3/4;
            }

            .h4_bar {
                top:0em;
            }

            p {
                font-size: 1rem;
                line-height:1.25rem;
            }


            header {
                grid-column: 7/8;
                grid-row: 1/-1;
                display: grid;
                grid-template-columns:166px;
                grid-template-rows: 111px  ;
                background:rgba(245,240,240,1);
            }

            header h1 {
                font-family:  Helvetica, Arial, sans-serif;
                font-size: 36px; line-height:1em;
                color:white;
                text-align:center;
            }

            /* header h2 {
                font-family: 'Sansita Swashed', cursive;
                font-weight: bold;
                font-size: 36px; line-height:1em;
                text-align:center;
                color:rgba(51, 0, 0, 1);
            } */
            /* 1st child of article, parent to hdrow1, h1 headblock, h2 subblock, hdrow2 */
            /* rebuild following land model? */

            #headblock {
                grid-column: 1/2;
                grid-row: 1/-1;
                align-self:start;
                top: 0;

                display: grid;
                grid-template-columns:1fr;
                grid-template-rows: 35px 36px   ;

                width:100%;
                margin:0; padding:0;
                padding-bottom:28px;
                background: rgba(51, 0, 0, 1);
                z-index:3000;
            }
            /* 2nd child of header, parent to hdr-modal, hdr-music */

            #hdr-modal {
                padding-top:18px;
            }
            /* 1st child of headblock */

            #hdr-music {
                letter-spacing: 0.09em;
                padding-top:14px;
                padding-left:4px;
                width: calc( 100% - 4px );
            }
            /* 2nd child of headblock */

            #subblock {
                grid-column: 1/2;
                grid-row: 1/2;

                align-items: start;
                align-self:start;
                top: 111px;
                display: grid;
                grid-template-columns:1fr;
                grid-template-rows: auto auto auto;
            }
            /* 3rd child of header, parent to sub-world, sub-music, sub-bands */

            #sub-world {
                grid-column: 1/-1;
                grid-row: 1/1;
                align-items: start;
                justify-self: end;
                text-align:center;
                z-index:0;
                width:100%;
                padding:0;
            }
            /* justify-self controls l-r axis */
            /* align-items controls up-dwn axis */
            /* 1st child of subblock */

            #sub-music {
                grid-column: 1/-1;
                grid-row: 2/3;
                width:100%;
                align-items: start;
                justify-self: start;
                text-align:center;
            }
            /* 2nd child of subblock */

            #sub-bands {
                grid-column: 1/-1;
                grid-row: 3/4;
                text-align:center;
                width:100%;
                padding:0;
                align-items: start;
            }
            /* 3rd child of subblock */

            .withoutbannerbox {
                grid-column: 5/6;
                grid-row: 3/-1;
            }

            .sidebyside, .sidebyside-2p1l2d {
                display:grid;
                grid-template-columns:1.75fr .5em minmax(4.5em, .30fr);
                grid-template-rows: auto;
            }

            /* .sidebyside-2p1l2d figcaption  {
                grid-column:3/4;
                grid-row:1/2;
                z-index:0;
                place-self: end;
            } */

            .rule-bottom  {
                margin-top:0;
                border-bottom: 0 solid rgba(104, 102, 102, 1) ;
                padding-bottom: 0;
                margin-bottom:0;
                /* padding-bottom: 2em; */
                /* margin-bottom:1.5em; */
            }

            .fb {
                display:grid;
                grid-template-columns:60px .5em 1fr;
                grid-template-rows: auto;
                padding-top:2em;
                /* background:red; */
            }

            .sidebyside.brochure {
                display:grid;
                grid-template-columns:80px .5em 1fr;
                grid-template-rows: auto;
            }

            ul.footgroup {
                list-style:none;
                column-count: 3;
                column-gap: 20px;
                font-size:90%;
            }

            .site-second li {
                -webkit-column-break-inside: avoid;
                page-break-inside: avoid;
                break-inside: avoid;
            }

            ul.site-second {
                margin-left:0;
                padding-left:20px;
            }

            ul.site-third {
                margin-left:0;
                padding-left:20px;
            }



            /* NAVIGATION Desk */

            nav {
                grid-column:2/3;
                grid-row:1 / -1;
                align-self:end;
                z-index:2005;
                bottom: 0;

            }
            /* 2nd child of body, parent of openmenu.nav-borders */

            .nav-borders {
                grid-column:7/8;
                grid-row:1 / -1;
                height: 3.5em;
                width: auto;
                background: rgba(51, 0, 0, 1);
                border-top-left-radius: .5rem;
                border-top-right-radius: .5rem;

                align-self:end;
                bottom: 0;
            }
            /* 1st child of nav, parent to openmenu-burger-center */

            #openmenu {
                width:5rem;
                display: grid;
                grid-template-columns:1fr;
                grid-template-rows: 1fr;
                align-self:end;
                z-index:15;
                position:fixed;
                bottom:0;
            }
                /* 1st child of nav */
                /* parent to .openmenu-burger-center */

                #openmenu-burger-center {
                    font: 27px/1.5em  Helvetica, Arial, sans-serif;
                    font-weight: 700;
                    color:white;
                    align-self:center;
                    text-align:center;
                    margin:0; padding-bottom: 0;
                }
                /* only child of openmenu */


            #popupmenu {
                grid-column: 1/-1;
                grid-row: 2 / -1;
                display: grid;
                grid-template-columns:18vw 1fr 5rem;
                /* grid-template-columns:48px 612px 120px ; */
                margin:0; padding:0;
                /* background:red; opacity:.5; */
            }
            /* 3rd child of body,  parent of #menuiframe, #closebutton */

                #menuiframe {
                    width:100%;
                    height:510px;
                    grid-column: 2/3;
                    grid-row: 1 / -1;
                    align-self:start;
                    bottom:0;
                    -webkit-overflow-scrolling: touch;
                }
                /* 1st child of #popupmenu.hide, parent to iframe menu */

                #menuiframe iframe {
                    height:calc(510px - 2%);
                    width:100%;
                    border-top-left-radius:0.5rem;
                    border-top-right-radius:0rem;
                    border-bottom-left-radius:0.5rem;
                }
                /*
                1st child of #menuiframe portrait and land.  page height must match #menuiframes height
                */

                #closebutton {
                    height:216px;
                    margin:0; padding:0;
                    z-index:5;
                    grid-column: 3/4;
                    grid-row: 1/-1;
                    align-self:end;
                    bottom:0;
                    border-top-left-radius: .5rem;
                    border-top-right-radius: .5rem;

                    display: grid;
                    grid-template-columns:1fr;
                    grid-template-rows: 1fr;
                }
                /* 2nd child of popupmenu, parent of closebuttonholder */

                #closebutton:hover, #closebutton:focus, #closebutton:active {
                    border-top-left-radius: .5rem;
                    border-top-right-radius: .5rem;
                }

                .closemenubutton {
                    height:100%;
                    margin:0; padding:0;
                    grid-column: 1/2;
                    grid-row: 1/2;
                    place-self:center;

                    display: grid;
                    grid-template-columns:1fr;
                    grid-template-rows: auto 1.5em 1.5em auto;
                    font-size:100%;
                }
                /* 1st child of closebuttonholder
                holds "CLOSE MENU" sections */
                /* parent of close_pre, close_post, closebutton_post */

                #close_pre {
                    grid-column: 1/2;
                    grid-row: 1/2;
                    text-align:center;
                    place-self:end;
                }
                /* 1st child of closemenubutton, holds "CLOSE" */

                #close_post {
                    grid-column: 1/2;
                    grid-row: 2/2;
                    text-align:center;
                    padding:0;
                }

                .closebutton_post {
                    grid-column: 1/2;
                    grid-row: 4/5;
                    margin-top:-.125em;
                    padding:0;
                    width: 100%;
                    text-align:center;
                }
                /* 3rd child of closemenubutton, holds "xed circle" */

                #close_pre, #close_post {
                    font: 22px/ 1em  Helvetica, Arial, sans-serif;
                    font-weight: 700;
                }

                .closebutton_post {
                    font: 36px/ 1em  Helvetica, Arial, sans-serif;
                    font-style:normal; text-align:center;
                    line-height:0;
                    color: white;
                    border: none;
                    opacity:1;
                }

                /* END NAVIGATION */








                #firstcol, #lastcol {
                    background:rgba(255, 202, 103, .5);
                }

                #firstcol {
                    grid-column:1/2;
                    grid-row:1/-1;
                }
                /* 4th child of body */

                #lastcol {
                    grid-column:3/4;
                    grid-row:1/-1;
                }
                /* 5th child of body */

                #coverleft {
                    grid-column: 1/2;
                    grid-row: 1/-1;
                    width:100%;
                    background:rgb(255, 202, 103);
                }

                #coverright {
                    grid-column: 7/8;
                    grid-row: 1/-1;
                    width:100%;
                    background:rgb(255, 202, 103);
                }





        }
        /* end (min-width: 921px) */
    }
    /* end @supports desk */
    /* END DESKTOP */

/* </style> */
/* <!-- DESK CSS CODE  -->   */










/* <!-- MC SAFARI CSS PORT CODE --> */
/* <style> */

    /* <!-- MC SAFARI CSS PORT CODE --> */

@media not all and (min-resolution:.001dpcm)
{
    @supports (display:grid)
    {
        @media only screen
        {
                p {
                    font: normal calc(1em + 1.45vw)/calc(1em + 1.125vw)  Helvetica, Arial, sans-serif;
                }

                .h2_rule {
                    line-height:calc(1em + 1.25vw);
                    padding-bottom:calc(.05em + 1.25vw);
                }

                h2.title {
                    /* background:red; */
                    display: grid;
                    grid-template-columns:1fr auto;
                    grid-template-rows: calc( 1em + 1vw )  calc( 1em + 1vw) ;
                    position:relative;
                    right:-.5vw;
                }
                /* .line-one { background:aqua; } */
                /* .line-two { background:yellow; } */

                .title-small-new {
                    font-size:136%;
                    line-height:.9em;
                    font-weight:400;
                    margin:0; padding:0;
                  }

                  .title-big-new {
                    font-size:159%;
                    font-weight:900;
                    line-height:.75em;
                    margin:0; padding:0;
                  }

                .sidebyside, .sidebyside-2p1l2d {
                    display:grid;
                    grid-template-columns:1.25fr .5em minmax(4.5em, .5fr);
                    grid-template-rows: auto;
                }

                .sidebyside figcaption, .sidebyside-2p1l2d figcaption   {
                    grid-column:3/4;
                    grid-row:1/2;
                    z-index:0;
                    place-self: end;
                }


        }
        /* end @media only screen and (max-width: 420px) */
    }
    /* end @supports (display:grid) */
}
/* end @media not all and (min-resolution:.001dpcm) */
/* <!-- END MC SAFARI CSS PORT CODE --> */




/* SAF LAND  */

@media not all and (min-resolution:.001dpcm)
{
    @supports (display:grid)
    {
        @media only screen and (min-width: 420px) and (max-width:920px)
        {

            /* body {
                display: grid;
                grid-template-columns: 1fr;
                grid-template-rows: auto 1fr ;
                margin:0; padding:0;
                min-height: 100%;
                min-height: -webkit-fill-available;
                background:rgba(255,250,250,1);
            }  */

            /* grid-template-columns:2vw 12vw 2vw 1fr 3vw 18vw;
            grid-template-rows: 1em auto 1em auto 1fr ; */

            p {
                font: normal calc(1em + .9vw)/calc(1em + .95vw)  Helvetica, Arial, sans-serif;
            }

            #bandtitle-jhd { width:1.85em; }
            /* Width call is necessary
            due to a safari-only weirdness that ignores placement code that the other browsers all adhere to properly
            */


            /* .sidebyside-2p1l2d {
                display:grid;
                grid-template-columns:1fr;
                grid-template-rows: auto;
            }

            .sidebyside-2p1l2d figcaption  {
                grid-column:1/2;
                grid-row:2/3;
                z-index:0;
                place-self: start;
            } */

            .titlebar.withbanner {
                left:.5em;
            }

            .titlebar h2.contact {
                margin:0;
            }

            .contact {
                font-size:4.75vw;
                line-height:1em;
            }

            h2.title {
                right:0;
            }

            #title-big {
                font-size:155%;
            }

            nav { height:16vw; }

            .nav-borders { height:16vw; }

            #openmenu-burger-center {
                display:block;
                height:100%;
                align-self:start;
                text-align:center;
                margin:0;
                padding-top: .25em;
                padding-bottom: 0;
            }
            /* only child of openmenu */

            #menuiframe {
                width:100%;
                height:65vh;
                margin:0; padding:0;
                grid-column: 2/3;
                grid-row: 1 / -1;
                align-self:start;
                bottom:0;
                -webkit-overflow-scrolling: touch;
            }
            /* 1st child of #popupmenu.hide, parent to iframe menu */

            #menuiframe iframe {
                height:calc(65vh - 2%);
                width:100%;
                border-top-left-radius:0.5rem;
                border-top-right-radius:0rem;
                border-bottom-left-radius:0.5rem;
            }

            #closebutton {
                height:calc(35vh + 4em);
            }



        }
        /* @media (min-width: 420px) */
    }
    /* @end supports */
}
/* end @media  */
/* END SAF LAND  */



/* SAF desk  */

@media not all and (min-resolution:.001dpcm)
{
    @supports (display:grid)
    {
        @media only screen and (min-width: 920px)
        {
            body {
                grid-template-columns: minmax(0vw, 1fr)  900px  minmax(0vw, 1fr);
            }

            .abBoxA {
                grid-template-columns: minmax(0vw, 1fr) 20px 104px 24px 584px 26px 170px minmax(0vw, 1fr);
            }



                p {
                    font: normal 1.175em/1.2em  Helvetica, Arial, sans-serif;
                }

                h3 {
                    font-size:28px;
                }

                h4.nonbar {
                    font-size:17px;
                }

                .h4_bar {
                    font-size:17px;
                }

                header {
                    grid-template-columns:170px;
                    grid-template-rows: 111px  ;
                }

                header h1 {
                    font-size: 28px; line-height:1em;
                    text-align:center;
                }

                header h2 {
                    font-size: 28px;
                     line-height:calc(1.25em + 2px);
                    text-align:center;
                }

                .contact {
                    font-size:33px;
                }

                #popupmenu {
                    /* grid-template-columns:184px 574px 170px ; */
                    grid-template-columns:18vw 1fr 5rem;
                }

                .nav-borders {
                    height: calc(92px + 3em);
                }

                #openmenu-burger-center {
                    font-size:24px;
                    padding-top:4px;
                    align-self:start;
                }
                #closebutton {
                    height:calc(300px + 4em);
                }

                #close_pre, #close_post {
                    font: 22px/ 1em  Helvetica, Arial, sans-serif;
                    font-weight: 700;
                }


                /* #hdr-modal {background:teal;} */



        }
        /* @media (min-width: 420px) */
    }
    /* @end supports */
}
/* end @media  */
/* END SAF Desk narrow  */






/* </style> */

/* <!-- end saf code --> */



/* <style> */
/* MC firefox */

@supports (-moz-osx-font-smoothing: auto) {

    /* #hdr-modal {background:pink;} */

    p {
        font-size: 125%;
        line-height:125%;
    }
}
/* end @supports */


/* </style> */
/* <!-- end MC firefox --> */



/* <style> */
    /* NON-MC firefox */
@supports (-moz-appearance: none) and (not (-moz-osx-font-smoothing: auto)) {
    p {
        font-size: 100%;
        line-height:125%;
        color:black;
    }
}
/* end @supports */
/* </style> */
/* <!-- end NON-MC firefox --> */