#hero {

}

#hero picture {
    /*padding-bottom: 50%;*/
    height: 50vw;
    min-height: 500px;
    max-height: 960px;
}

body[class*="template_exhibition-php"] #hero picture {
    /*padding-bottom: 50%;*/
    height: 30vw;
    min-height: calc(320px + var(--masthead-height));
    max-height: 540px;
}


@media all and (max-width: 899px) {
    #hero picture {
        height: 0;
        padding-bottom: 75%;
    }

    body[class*="template_exhibition-php"] #hero picture {
        height: 0;
        padding-bottom: calc(240px + var(--masthead-height));
        max-height: 360px;
    }


}

@media all and (max-width: 599px) {
    #hero picture {
        height: 0;
        padding-bottom: 100%;
    }
    body[class*="template_exhibition-php"] #hero picture {
        height: 0;
        padding-bottom: calc(240px + var(--masthead-height));
        max-height: 360px;
    }
}


body.hashero #main {
    padding-top: 0 !important;
}

@media all and (min-width: 1024px) {
    body.hashero #masthead {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background: none;
        border-bottom-color: #909090;
    }
}


@media all and (max-width: 1023px) {

    body.hashero:not(.scrolled) #masthead {background: none;
        border-bottom-color: #909090; }


    body.navshown #masthead {

        background: var(--dark-purple) !important;
    }
}

@media all and (min-width: 1024px) {

    body.hashero.subnavshown #masthead {

        background: var(--dark-purple);
    }
    body.hashero #mainmenu { border-bottom-color: transparent; }
    body.hashero #mainmenu > .wrapper > ul:not(#toplinks) > li > a {
        color:white;
    }
    body.hashero #mainmenu > .wrapper > ul > li > a > span::after {
         background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve"><polygon fill="%23FFFFFF" points="10,15.4 1.3,6.7 2.7,5.3 10,12.6 17.3,5.3 18.7,6.7 	"/></svg>') !important;

     }
}


/*body.hashero #masthead::before {*/
  #hero::before {
    content:"";
    display: block; width: 100%; height: calc((var(--masthead-height) * 2.5) + 48px);
    position: absolute; top: 0; left: 0;
      z-index: 5;
    background-size: cover;
      opacity: 0.9;
    background-image: var(--grad_down);
}