/* barlow-regular - latin */
    @font-face {
        font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
        font-family: 'Barlow';
        font-style: normal;
        font-weight: 400;
        src: url('fonts/barlow-v12-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
            url('fonts/barlow-v12-latin-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    * {
        font-family: Barlow, Arial, Helvetica, sans-serif;
    }

    /**************************************************/
    /*      navbar toggle button (from bootstrap)     */
    /**************************************************/


    .navbar-toggler[aria-expanded="false"] span:nth-child(2) {
        opacity: 1;
    }
    .navbar-toggler[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }
    .navbar-toggler[aria-expanded="true"] span:first-child {
        transform: rotate(-45deg);
        position: relative;
        top: 7.5px;
        top: 11px;
    }
    .navbar-toggler[aria-expanded="true"] span:last-child {
        transform: rotate(45deg);
        bottom: 9px;
        position: relative;
    }
    .navbar-toggler span{
        display: block;
        width: 35px;
        height: 4px;
        background: #1641ff;
        background:white; /*black;*/
        margin: auto;
        margin-bottom: 6px;
        transition: all 400ms linear;
        cursor: pointer;
    }
    button.navbar-toggler{
        margin-top: 85px;
        margin-right:20px;
        border:0px;
        background-color:rgb(64, 64, 64);
        float:right;
    }

    button.navbar-toggler:focus {
        outline: none;
    }
    
    .hide {
        display:none;
    }
    
    #site-logo{
        position:absolute;
    }

    @media screen and (min-width: 1020px) {  /* > 1019px */

    .header-bar, .header-bar-filler{
        height:120px;
    }

    #menu{
        margin-top:63px;
        float:right;
        background:#404040;
        padding:3px;
    }

    .menu-item-container {
        display:block;
        width: fit-content;
        min-width:150px;
        background:#404040;
     }

    .menu-item-container.level1 {
        position:relative;
        display: inline-block;
        text-align: center;
        z-index:1;
    }
    .menu-item-container.level2, .menu-item-container.level3  {
        position:absolute;
        z-index:2;
    }

    .menu-item{
        max-width:180px;
        padding:8px;
        transition: background 0.2s linear, display 0.2s linear;
        cursor:default;
        color:white;
        font-size:16px;
        min-height:30px;
        display: flex;
        justify-content: left;
        align-items: center;
    }
    .menu-item.level1{
        display:inline-block;
        max-width:200px;
        min-width:70px;
        line-height:35px;
        z-index:1;
        border:1px solid #404040;
        border-radius:10px;
        padding:4px 8px 6px 8px;
        margin:2px;
    }

    .menu-item.selected{
        background:#606060;
    }
    .menu-item.selectedpage{
        border:1px solid #808080;
    }
    .has-level2-sub-menu::after {  /* arrow down for submenu */
        position: relative;
        content: "";
        top: 17px;
        margin-left: 5px;
        width: 0;
        height: 0;
        border: 5px solid transparent;
        border-color: white transparent transparent transparent;
    }
    .has-level3-sub-menu::before { /* arrow left for submenu */
        position: relative;
        content: url('img/leftmarker.png');
        top:1px;
        margin-right: 7px;
    }
    }
    /* small menu */
    @media screen and (max-width: 1019px) {  /* < 1020px */
    .header-bar, .header-bar-filler{
        height:120px;
    }

    #menu {
        background:#f0f0f0;
        margin-top: 120px;
        float:none;
    }

    #phonemenu{
        background:#f0f0f0;
    }

    #phonemenu li {
        list-style: none;
        padding:10px;
        border-bottom:1px solid lightgray;
        cursor:default;
    }
    #phonemenu li:hover{
        background:#d0d0d0;
    }

    #phonemenu li button{
        margin-right:10px;
    }
    #phonemenu li .nobut{
        padding-left:28px;
    }
    #phonemenu ul .expanded{
        background:#e0e0e0;
    }
    #phonemenu ul ul {
        margin-block-start: 3px;
        padding-inline-start:40px;
    }
    #phonemenu .toggle-expand {
        margin-right:10px;
        width:15px;
    }
}