@font-face {
              font-family: DinProBlack;
              src: url(DIN_Pro-Black_900.ttf);
              font-display: swap;
          }

          .dinPro{
              font-family: DinProBlack, sans-serif;
          }
@font-face {
	      font-family:DinProCondensedRegular;
	      src: url(DIN-Pro-Condensed-Regular-400.ttf);
	      font-display: swap;
}
	  .dinCondensed{
	      font-family: DinProCondensedRegular, sans-serif;
	}
          #fixed-left-navbar{text-align: center; }
          #fixed-left-navbar .open
          {
              display: block;
          }
          #shell .open
          {
              margin-left: 150px;
              margin-right: -150px;
          }
          #shell{
              margin: 0 0 0 150px;
              padding: 0;
          }
          #fixed-left-navbar ul li{height: 100%; width: 100%; line-height: 3rem; text-align: left}
          #fixed-left-navbar ul li a{
              display: block;
              text-decoration: none; text-underline: none; letter-spacing: 2px; font-weight: bold; color: #6A6A6A;
              padding: 10px 0 10px 30px;
              text-align: left;
              font-size: 1.1rem;
              font-family: DinProBlack, sans-serif;

          }
          #fixed-left-navbar{background: #000000; color: #f7f7f7; position: fixed; margin-left: 0; width: 150px; height: 100%;}
          #fixed-left-navbar ul li a:hover {color: #6A6A6A; background: #212121;}
          #fixed-left-navbar ul {margin: 0; padding: 0;}

          #fixed-left-navbar ul li.active>a,
          a[aria-expanded="true"]{
              color: #111111;
              background: #F7F7F7;
          }

          #navheader {padding: 20px;}
          #navheader img{display: block; margin: 20px auto}

          body{overflow-x: hidden;}

        #fixed-left-navbar button{width: 75%; color: #6A6A6A; margin: 10px 0; height: 50px; font-weight: bold}


        #socials{bottom: 0; text-align: center;  width: 70px; height: 70px; margin: 20px auto; }

        #topMobileNav{
            background: #111111; width: 100%; height: 60px; text-align: center;
        }

        .hamburger{float: left; height: 60px; width: 60px; border: 0; padding: 0; margin: 0;}
        .hamburger:focus{outline: #6A6A6A}


        #fixed-left-navbar.is-open {
            display: block;
        }


        #fixed-left-navbar.is-open ul li a{transition: all .3s}
        #shell.is-open{margin-right: -150px; margin-left: 150px;}


        .is-hidden{
            transition: all .3s;
            display: none;
        }

        h1{font-family: DinProBlack, sans-serif}

        /* sized so a long title fits inside a ~345px-wide 16:9 overlay card
           (5-card deck on a 1920px display) */
        .articleCardTitle{
            font-size: clamp(15px, 0.7vw + 8px, 22px);
            line-height: 1.15;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
        }
        .articleCardDate{
            font-size: clamp(12px, 0.4vw + 6px, 16px);
        }
        /* backstop: never let overlay text spill past the card */
        .card-img-overlay{
            overflow: hidden;
        }

        /* Bootstrap 4 card-decks never wrap on their own; without a minimum
           width the cards squeeze into a single row on tablets */
        .card-deck .card{
            min-width: 250px;
        }

        .parallax{
            background-attachment: fixed;
        }
        /* fixed background-attachment is broken/janky on iOS and most
           mobile browsers */
        @media (max-width: 991px) {
            .parallax{
                background-attachment: scroll;
            }
        }


        .responsive{
            max-width: 100%;
            max-height: 450px;
        }

        .socialIcons{
            width: 25px; opacity: 50%; padding: 1px; margin-bottom: 4px;
        }

        @media (max-width: 575px) {
            #fixed-left-navbar{
                display: none;
            }
            #shell{
                margin-left: 0;
            }
            /* keep the toggle bar above the open drawer so the menu can
               always be closed */
            #topMobileNav{
                display: inherit;
                position: sticky;
                top: 0;
                z-index: 1040;
            }
            /* open the nav as an overlay below the toggle bar instead of
               pushing #shell sideways */
            #fixed-left-navbar.is-open{
                display: block;
                top: 60px;
                height: calc(100% - 60px);
                z-index: 1030;
                box-shadow: 2px 0 8px rgba(0, 0, 0, 0.5);
            }
            #shell.is-open{
                margin-left: 0;
                margin-right: 0;
            }
        }
        @media (min-width: 576px) {
            #topMobileNav{
                display: none;
            }
            #shell{
                margin-right: 0;
            }
        }