@font-face {
              font-family: DinProBlack;
              src: url(DIN_Pro-Black_900.ttf);
          }

          .dinPro{
              font-family: DinProBlack, sans-serif;
          }
@font-face {
	      font-family:DinProCondensedRegular;
	      src: url(DIN-Pro-Condensed-Regular-400.ttf);
}
	  .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}

        .articleCardTitle{
            font-size: 1vw;
	    overflow: hidden;
        }
        .articleCardDate{
            font-size:1vw;
        }


        .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;

            }
            #topMobileNav{
                display: inherit;
            }

	    .articleCardTitle, .articleCardDate
	    {
		font-size: 20px;
	    }
        }
        @media (min-width: 576px) {
            #topMobileNav{
                display: none;
            }
            #shell{
                margin-right: 0;
            }
	    .articleCardTitle, .articleCardDate
	    {
		font-size: 1vw;
	    }
        }