html {
        font-family: verdana;
      }

      body {
        margin: 0;
      }

      header {
        background: #fff;
        width:100%;
        height: 329px;        
        display:flex;
        flex-direction:row;
        /* align-items: center;
        justify-content: space-between;   
        background-image:url('gfx/bg-header.png');
        background-position-x: right;
        background-repeat: no-repeat;*/
      }      
            
      #header-left-container {
          display:flex;
          flex-direction:row;                   
          flex:40%;
          align-items:center;
      }
      
      #header-left-logo-container {
        /*  flex:306px; */
          max-height:329px;
      }
      
      #header-left-logo-container img {
          max-width:306px;
      }
       
      #header-left-text-container {
          flex:auto;
          align-items:center;         
      }
      
      #header-left-text-container h1 {
          font-size:1.2em;
          font-weight:normal;
          font-family:verdana;
          margin:0;
      }
      
      #header-left-text-container h2 {
          font-size:1em;
          font-weight:normal;
          font-style:italic;
          font-family:verdana;
          margin:0;
      }
            
      #header-right-container {
          flex:60%;
          display:flex;
          flex-direction:column;
          background-image:url('gfx/logo-right.png');
          background-position-x:right;
          background-repeat: no-repeat;
          justify-content:flex-end;
      }
                        
      nav {          
          display:flex;
          flex-direction:row;      
          flex-wrap:wrap;
          height:56%;
          width:76%;
          border-top:6px solid #122624;
          align-items:center;
          justify-content: flex-start;
          align-content:space-evenly;
      }
      
      nav a {
          /*flex:auto 1;
          margin: 5px;*/
          margin-right:5%;
          font-size: 18px;
          line-height: 1.5;          
          font-weight:bold;
          color:#000;
          text-decoration: none;
      }
      
      nav a .nav-dot {
            height: 25px;
            width: 25px;
            background-color: #5e8b6e;
            border-radius: 50%;
            display: inline-block;          
            margin-right:1em;
            vertical-align:middle;
      }
      
      nav a:hover {
          color:#707070;
      }
           
      #main {
          width:100%;
          background-color:#000;
          padding-top:40px;
      }
      
      section, section.sp-single-container  {
        display: flex;
        flex-wrap:wrap;
        flex-direction: row;
        background-color:#000;
        justify-content: center;
        width:100%;
        align-items: center;
        justify-content: space-around;       
        margin:0;
      }
      
      .sp-single-container {
        justify-content:center !important;
      }
      
      
      section article {
          /*flex-basis: 450px;
           flex:450px 1;          */
          flex: 0 2 440px;
          background-color:#fff;
          color: #000;
          margin:30px 10px;
      }
      
      section article img {
          max-width:440px;          
      }
      
      .article-content {
          padding:20px;
      }    
      
      .sp-single {
          flex: 0 0 90%;
          padding-top:20px;
          padding-bottom:20px;
      }
      
      .sp-single img{
          max-width:100%;
      }
      
      .sp-single img.size-post-thumbnail {
          margin:0 auto;
          display:block
      }
      
      #bottom-separator {
          width:100%;
          height:60px;
          background-color:#cfcac2;
          border-bottom: 6px solid #122624;
      }
           
      footer {
          width:100%;
          background-color: #fbebd2;          
          text-align:center;
          font-size: 0.9em;
          padding: 0.4em 0;
          color:#707070;
      }
            
      
            
      @media all and (max-width: 500px) {
          header {
              flex-direction:column;
              flex-wrap:wrap;
              height:auto;
              background: #fff;
              background-image:none;
              align-content: center;
              justify-content: center;
              /* align-items: center;            */
          }
                 
          #header-left-logo-container {
              max-height:100px;
          }
          
          #header-left-logo-container img {
              max-width:93px;
          }
                         
       #header-left-text-container h1 {
          font-size:0.9em;
          font-weight:normal;
          font-family:verdana;
          margin:0;
      }
      
      #header-left-text-container h2 {
          font-size:0.7em;
          font-weight:normal;
          font-style:italic;
          font-family:verdana;
          margin:0;
      }
      
      #header-right-container {
          background-position-x:385%;
      }
            
          nav {              
              flex-direction:row;
              width:100%;
          }
          
          #main {
              padding-top:0;
          }
          
    /*       #header-logo-wrapper {
              border-bottom: 5px solid #122624;
              width:100%;
          }
       */             
          nav a {
              padding:5px 15px;
              text-align:center;
              font-size:1em;
              margin:10px;
          }
          
          #bottom-separator {
              border-top: 8px solid #122624;
              border-bottom:0;
          }

          section {
              margin:0 0 5px;
          }
          
          section article {
              margin:0;
              flex: 0 2 auto;
          }
          
          section article img {
              max-width:100%;       
              border-top: 3px solid #122624;
              border-bottom: 3px solid #122624;
          } 
          
          footer {              
              border-top:2px solid #122624;              
              font-size:0.7em;
              padding: 10px 0;
          }
      }
      
      @media all and (min-width: 501px) and (max-width:1153px) {
          nav a {
              font-size:13px;
              line-height:normal;   
          }
      }
/*      
      h1 {
        
      }

      article {

      }    

      section {
        display: flex;
      }

      article {
        flex: 1 200px;
      }

      article:nth-of-type(3) {
        flex: 3 200px;
        display: flex;
        flex-flow: column;
      }

      article:nth-of-type(3) div:first-child {
        flex: 1 100px;
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: space-around;
      }

      button {
        flex: 1 auto;
        margin: 5px;
        font-size: 18px;
        line-height: 1.5;
      }
      
    */