html, body
{
  font-family: 'Arial', 'Helvetica', sans-serif;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.mdl-layout__container
{
  max-width: 1920px;
  box-shadow: rgba(0.0,0.0,0.0,0.2) 0px 10px 10px;
}

.portfolio-header {
    position: relative;
    background-image: url(img/bg.png);
  }
  
.portfolio-header .mdl-layout__header-row {
  padding: 0;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

  .mdl-layout__title {
    font-size: 14px;
    text-align: center;
    font-weight: 300;
  }
  
  .is-compact .mdl-layout__title span {
    display: none;
  }
  
  .portfolio-logo-row {
    min-height: 48px;
  }
  
  .is-compact .portfolio-logo-row {
    min-height: auto;
  }
  
  .is-compact .portfolio-logo {
    height: 50px;
    width: 50px;
    margin-top: 7px;
  }
  
  .portfolio-navigation-row {
    background-color: rgba(0, 0, 0, 0.08);
    text-transform: uppercase;
    height: 45px;
  }
  
  .portfolio-navigation-row  .mdl-navigation {
    text-align: center;
    max-width: 900px;
    width: 100%;
  }
  
  .portfolio-navigation-row .mdl-navigation__link {
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
    line-height: 42px;
  }
  
  .portfolio-header .mdl-layout__drawer-button {
      background-color: rgba(197, 197, 197, 0.44);
  }
  
  .portfolio-navigation-row .is-active {
    position: relative;
    font-weight: bold;
  }
  
  .portfolio-navigation-row .is-active:after {
    content: "";
    width: 70%;
    height: 2px;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgb(164,0,0);
    left: 15%;
  }

  .mdl-navigation__link.narrow
  {
    flex-grow: 0;
    width: 32px;
    padding-right: 12px;
    padding-left: 12px;
  }

  .mdl-navigation__link img
  {
     filter: grayscale(100%) brightness(180%) contrast(50%) ;
     opacity: 0.8;
  }

  .mdl-navigation__link img:hover
  {
     filter: grayscale(0%) brightness(100%) contrast(100%);
     opacity: 1.0;
  }
  
  img.article-image {
    width: 100%;
    height: auto;
  }
  
  .portfolio-max-width {
    max-width: 900px;
    margin: auto;
  }
  
  .portfolio-copy {
    max-width: 700px;
  }

  #resume-banner
  {
    background-image: url(img/resume-banner.jpg);
  }  

  resume-section
  {
    display: flex; 
    margin-bottom: 12px;
  }

  resume-section>left
  {
    width: 160px; 
    text-align: right; 
    padding-right: 8px;
  }

  resume-section>left>h5
  {
    margin-top: 0px; 
    margin-bottom: 2px;
  }

  resume-section>right
  {
    width: 340px; 
    margin-left: 4px; 
    padding-left: 8px; 
    border-left: 4px solid lightgray;
  }

  resume-section>right>ul
  {
    margin-top: 4px;
    margin-bottom: 4px;
    padding-left: 16px;
  }

  .no-padding {
    padding: 0;
  }
  
  .no-left-padding{
    padding-left: 0;
  }
  
  .no-bottom-padding {
    padding-bottom: 0;
  }
  
  .padding-top {
    padding: 10px 0 0;
  }

  .icon
  {
    width: 80px;
    height: 80px;
  }

  p
  {
    line-height: 1.4;
  }

  hr
  {
    border-top: 2px dotted rgba(0, 0, 0, 0.2);
    margin-left: 12px;
    margin-right: 12px;
  }

  ul 
  {
    list-style-image: url('img/dot.png');
  }

  ul.white
  {
    list-style-image: url('img/dot-white.png');
  }  

  content
  {
    display: flex;
    flex-direction: column;
  }

  banner
  {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 120px;
    padding-right: 120px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    background-size: cover;
    background-position-y : center; 
  }

  banner.reverse
  {
    flex-direction: row-reverse;
  }

  banner.dark
  {
    background-color:rgb(96, 0, 0);
    color: white;
  }

  banner.dark img
  {
    filter: invert(100%);
  }

  .qr
  {
    filter: none;
    background-image: url('img/qrcode.png');
    min-width: 220px;
    min-height: 220px;
    height: 220px;
    max-width: 220px;
    max-height: 220px;
  }
  banner.dark ul
  {
    list-style-image: url('img/dot-white.png');
  }

  .middle
  {
    align-content: center;
  }

  .dark
  { 
    color : white;
    text-shadow: 0px 2px 5px black ;
    background-color: rgb(92,92,92);
    background-blend-mode: multiply;   
  }

  .dark.hoverable:hover
  {
    background-color: rgb(128,128,128);
  }

  .bright
  {
    background-color: rgb(230,230,230);
    background-blend-mode: overlay;     
  }

  .bright img
  {
    filter: brightness(0%);
  }

  .bright.hoverable:hover img
  {
    filter: brightness(100%);
  }  

  .bright.hoverable:hover
  {
    background-color: rgb(80,80,80);
    filter: brightness(100%);
    color: white;
    text-shadow: 0px 0px 5px black;
  }

  .red-button
  {
    color: white;
    background-color: rgb(164,0,0);
  }

  .red-button:hover
  {
    color: white;
    background-color: rgb(164,0,0);
  } 

  h5
  {
    margin-top:8px;
  }
  
  column
  {
    width: 600px;
    display: block;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 22px;
  }

  .center
  {
    text-align: center;
  }

  .right
  {
    text-align: right;
  }

  .width-400
  {
    width: 400px;
  }

  .width-max
  {
    width: 80%;
  }
  .cover-image
  {
    width: 100%;
    height: 100%;
    object-fit:cover;
  }

  img.clickable
  {
    cursor:pointer;
  }

  .mdl-mini-footer {
    background-color: rgb(210,210,210);
    background-blend-mode: multiply;
    background-image: url(img/bg.png);
    padding-top: 12px;  
    padding-bottom: 12px;  
  }
  
  .header-flex
  {
    width: 860px;
    display: flex;
    flex-direction: row;
    align-items: top;
    flex-wrap: nowrap;
    height: 33px;
  }

  .header-logo-left
  {
    width: 363px;
    background-image: url(img/logo-left.png);
  }  

  .header-logo-right
  {
    width: 188px;
    background-image: url(img/logo-right.png);
  }  

  .header-spacer
  {
    flex-grow: 2;
  }

  .header-mobile-spacer
  {
    width: 0px;
  }

  .footer
  {
    font-size: 12px;
    color: rgb(40,40,40);
    margin-bottom: 0px;
  }

  .footer a, .footer a:visited
  {
    color: rgb(40,12,12);
    font-weight: bolder;
    text-decoration: none;
  }

  .footer a:hover
  {
    color: rgb(40,12,12);
    font-weight: bolder;
    text-decoration: underline;
  }

  #fs-panel
  {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(10,10,10,0.9);
    z-index: 10;
    display: none;
  }

  #close-button
  {
    position: fixed;
    right: 0;
    top: 0;
    color: white;
    background-color: rgba(10,10,10,0.7);
    width: 40px;
    height: 40px;
    z-index: 12;
    cursor: pointer;
  }

  #fs-image
  {
    box-sizing: border-box;
    margin:auto;
    padding: 32px;
    max-width: 100%;
    max-height: 100%;
  }

  #main-video
  {
    height: 400px; 
  }

  #main-video-banner
  {
    /* #main-video height -40 */
    height: 360px; 
  }

  @media only screen and (max-width: 1024px) {

    #main-video
    {
      height: 480px; 
  
    }

    #main-video-banner
    {
      /* #main-video height -40 */
      height: 440px;
    }

    #main-video-column
    {
       max-width: 480px;
       width: 480px;
    }

    .header-mobile-spacer
    {
      width: 80px;
      background-color:rgba(0,0,0,0);
    } 
    .header-flex
    {
      width: 100%;
      padding-left: 96px;
      padding-right: 128px;
    }
    .header-logo-right
    {
      display: none;
    }
    .mdl-layout__header .mdl-layout__drawer-button
    {
      margin-left: 0px;
      margin-top:0px;
      color: white;
      background-color : rgb(164,0,0);
      height: 56px;

    }

    .mdl-layout__header .mdl-layout__drawer-button i
    {
      padding-top: 16px;
    } 

    a.mdl-navigation__link.is-active
    {
      background-color: rgb(164,0,0);
    }

    .mdl-layout__drawer .mdl-navigation .mdl-navigation__link.is-active
    {
      color: white;
    }

    .mdl-layout__drawer .mdl-navigation .mdl-navigation__link:hover
    {
      color: rgb(164,0,0);
    }

    resume-section>left
    {
      width: 100px;
    } 

    resume-section>right
    {
      width: 200px;
      font-size: 12px;
    }

    resume-section>left>h5
    {
      font-size: 16px;
    }   

    resume-section>right>ul
    {
      font-size: 12px;
    } 
    
    banner
    {
      padding-left: 20px;
      padding-right: 20px;
      background-position: center;
    }

    .dark
    {
      background-color: rgb(128,128,128);
    }

    .bright.hoverable:hover img
    {
      filter: brightness(0%);
    }  
  
    .bright.hoverable:hover
    {
      background-color: rgb(230,230,230);
      color: black;
      text-shadow: none;
    }

    column
    {      
      width: 360px;
      max-width: 360px;
      overflow-wrap: break-word;
      overflow: auto;
    }

    .header-logo-left
    {
      margin-top: 3px;
      margin-left: 5px;
      width: 80%;
      height: 80%;
      background-size:contain;
      background-repeat: no-repeat;
    }
    
    .width-400
    {
      width: 400px;
    }  

    #resume-banner
    {
      justify-content: right;
      background-image: url(img/resume-banner-mobile.jpg);
    }     

  }