/*@media all and (min-width: 900px) {*/
@media all and (min-width: 1024px) {

    #mainmenu .translate,
    #mainmenu #toplinks{ display:none !important; }

    #mainmenu {
       border-bottom: 1px solid var(--light-purple); /**/
    }
/*    #mainmenu::after { content:""; display: block; height: 1px; width: 100%; background: #6F6F6F;
        position: relative; pointer-events: none;
        z-index: 2;}*/

    #mainmenu .wrapper {
        display: flex;
        position: static !important;
        flex-wrap: wrap;
    }


    #mainmenu > .wrapper:first-child > ul {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    /*#masthead a:focus-visible,*/
    #mainmenu > .wrapper:first-child > ul > li > a:focus-visible > span {
        box-shadow: 0 0 0 2px white, 0 0 0 4px var(--orange);
        border-radius: 4px;
    }


    #mainmenu .wrapper > ul > li > div {
       /* display: none;*/

        visibility:hidden;opacity: 0;
        transition: opacity 0.2s ease;
        position: absolute; z-index: 20;
        left: 0;


        top: 100%;top: calc(100% - 1px);
        width: 100%;

        /*opacity: 0; visibility: hidden;*/

        padding: 32px;
        padding-left: 0;
        padding-right: 0;
        border-bottom: 4px solid var(--yellow);

        background: var(--bg-purple);

        box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.10), 0px 21px 46px 0px rgba(0, 0, 0, 0.10), 0px 83px 83px 0px rgba(0, 0, 0, 0.09), 0px 186px 112px 0px rgba(0, 0, 0, 0.05), 0px 331px 132px 0px rgba(0, 0, 0, 0.01), 0px 518px 145px 0px rgba(0, 0, 0, 0.00);


    }
    #mainmenu .wrapper > ul > li > div::before { content:""; display: block; height: 1px; width: 100%; background: #6F6F6F;
        position: absolute; top:0; left: 0; pointer-events: none;
        z-index: 2;}


    @keyframes opensubmenu {
        0% {
            -webkit-transform: scale(0);
            transform: scale(0)
        }
        50% {
            opacity: 1;
            -webkit-transform: none;
            transform: none
        }
    }

    #mainmenu .wrapper > ul > li:hover > div, #mainmenu .wrapper > ul > li > div:hover,
    #mainmenu .wrapper > ul > li.active > div {

        /*display: block; */visibility:visible;opacity: 1; transition: opacity 0.25s ease-in;

       /* -webkit-animation: opensubmenu .75s ease-out 1 normal forwards;
        animation: opensubmenu .75s ease-out 1 normal forwards;*/
    }

    #mainmenu .wrapper > ul > li > div#submenu_about-us1
  /*  #mainmenu .wrapper > ul > li > div[id^="submenu_research"]*/
    { visibility:visible;opacity: 1; transition: opacity 0.25s ease-in;}


    #mainmenu .submenu .wrapper > ul {
       /* width: var(--grid-twothirds);*/
        flex: 1;
        column-count: 2;
        column-gap: var(--gutter);
        position: relative;

    }



    #mainmenu #submenu_research-programmes .wrapper > ul {
        flex: 1;
        display: flex; justify-content: space-between;
        column-count: 1;
    }

    #mainmenu #submenu_research-programmes .wrapper > ul > li,
    #mainmenu #submenu_research-programmes .wrapper > ul > li.double {
        width: var(--grid-half);
    }



    #mainmenu .submenu .wrapper > aside {

        width: var(--grid-third);
        margin-left: var(--gutter);  margin-bottom: 64px;


    }

}


@media all and (max-width: 1023px) {
    #mainmenu .submenu .wrapper > aside {
        padding-top: 16px;
    }
}
@media all and (min-width: 1200px) {

    #mainmenu .submenu .wrapper > ul {
        column-count: 3;
    }
    #mainmenu #submenu_research-programmes .wrapper > ul > li.double > ul {
        column-count: 2;

    }

    #mainmenu #submenu_research-programmes .wrapper > ul > li {

        width: var(--grid-third);
    }
    #mainmenu #submenu_research-programmes .wrapper > ul > li.double {
        width: var(--grid-twothirds);
    }

    #mainmenu .submenu .wrapper > aside {

        width: var(--grid-quarter);

    }


}
#mainmenu .submenu .wrapper > aside {
    max-width: 480px;
}

#mainmenu div.wrapper>p:first-child {
     font-family: var(--headingfont);
    /*font-weight: 700;*/font-weight: 400;
    font-size: 36px;
    line-height: 120%;

    margin: 0 0 32px;
    width: 100%; /*border: 1px dashed red;*/
}

h3>a,
h2.h2>a,
#mainmenu div.wrapper>p:first-child a { color: inherit}

h3>a:focus-visible,
h2.h2>a:focus-visible,
#mainmenu  div.wrapper>p:first-child a:focus-visible {
    box-shadow: 0 0 0 1px white, 0 0 0 3px var(--orange);
    border-radius: 2px;
     }


#mainmenu li > ul {


}

#mainmenu li .wrapper > ul > li {
    padding: 12px 8px; padding: 0 0 64px;
    font-size: 14px;
    line-height: 140%;

    break-inside: avoid-column;
}
#mainmenu li .wrapper > ul > li.double {
    break-inside: auto;
}

@media all and (max-width: 1023px) {
    #mainmenu li .wrapper > ul > li {
        padding: 0 0 32px;

    }

}
@media all and (max-width: 899px) {

    #mainmenu li .wrapper > ul > li {
       /* padding: 0px 0;*/ /*margin: 24px 0;*/
    }
}


#mainmenu li .wrapper > ul > li strong {

    /*display: inline-block; display: inline-flex; align-content: center; flex-wrap: wrap;*/
    font-weight: 700;


}
#mainmenu li .wrapper > ul > li > a {

     display: block;
    font-size: 20px;
    line-height: 120%;
    margin-bottom: 0;
}
#mainmenu li .wrapper > ul > li > a:not(:only-child) {
    margin-bottom: 1.2em;
}
#mainmenu li .wrapper > ul > li strong::after{
    transition: all 0.2s ease;
    background-position: center; background-size: cover; background-repeat: no-repeat;
    width: 1.25em; height: 1em; display: inline-block; content:"\00A0";  margin-left: 0.25em; /*float: right;*/
    position: relative;
    top: 0.2em;
    background-image: url('data:image/svg+xml;utf8, <svg fill="%23111B29" 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"><path d="M11.8,14.9l-1.2-1.2l3-3H3.5V9h10.1l-3-3l1.2-1.2l5,5L11.8,14.9z"/></svg> ');
}

#mainmenu li .wrapper > ul > li a[href*="//"]:not([href*="//ria.newgraphic.ie"]):not([href*="//ria.ie"]):not([href*="//www.ria.ie"]):not([href^="mailto:"]) strong::after{ transform: rotate(-45deg) translateY(-0.1em); }

#mainmenu li .wrapper > ul > li a:hover strong::after{
    margin-left: 0.75em;

}
#mainmenu li .wrapper > ul > li a>span {
    padding-top: 0.25em;
    display: inline-block;
}


#mainmenu li .wrapper > ul > li a {
    color: var(--black);
}

#mainmenu li .wrapper > ul > li li a:focus-visible,
#mainmenu li .wrapper > ul > li a:focus-visible strong:first-child {
    box-shadow: 0 0 0 1px white, 0 0 0 3px var(--orange);
    border-radius: 2px;
}




#mainmenu li .wrapper > ul > li ul {

}

#mainmenu li .wrapper > ul > li li {


    font-weight: 400;
    font-size: 16px;
    line-height: 130%;

    margin:0 0 1.5em 0;
}

@media all and (max-width: 1023px) {
    #mainmenu li .wrapper > ul > li > a:not(:only-child),
    #mainmenu li .wrapper > ul > li li {
        margin-bottom: 20px;
    }
}
#mainmenu li .wrapper > ul > li li:last-child {
    margin-bottom: 0;
}


#mainmenu li .wrapper > ul > li li a {
     color: var(--black2);
}
#mainmenu li .wrapper > ul > li li a:hover{
    color: var(--black);

}

h3>a,
h2.h2>a,
#mainmenu .wrapper > p:first-child a,
#mainmenu li .wrapper > ul > li li a,
#mainmenu li .wrapper > ul > li a>strong:first-child {
    transition: all 0.2s ease; cursor: pointer;
    text-decoration: none;
    padding:2px 0  ;
    background-image: linear-gradient(var(--purple), var(--purple)), linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
    background-position: 0 100%, 0 100%;
    background-repeat: no-repeat, no-repeat;
    background-size: 0 2px, 100% 2px;
    transition: background-size .3s;

}

h3>a:hover,
h2.h2>a:hover,
#mainmenu .wrapper > p:first-child a:hover,
#mainmenu li .wrapper > ul > li li a:hover,
#mainmenu li .wrapper > ul > li a:hover>strong:first-child  {
    background-size: 100% 2px, 100% 2px

}

h2.h2>a {
    padding:2px 0 4px ;
    background-size: 0 4px, 100% 4px;
    background-image: linear-gradient(var(--orange), var(--orange)), linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
}
h3>a {
    padding: 0;
    background-size: 0 4px, 100% 4px;
}

h2.h2>a {
    padding:0 0 ;
}
h3>a:hover,
h2.h2>a:hover {
    background-size: 100% 4px, 100% 4px
}