* { 
    font-family:'Courier New', Courier, monospace;
    font-size: 14px;
}
html {
    position:relative;
    min-height:100%
   }
body {
    margin-bottom:60px;
    background:#fff;
    color:#666
}

.nav {
    margin-bottom:25px;
    text-transform:uppercase
}
.nav-pills>li>a,
.nav-pills>li>a:focus,
.nav-pills>li>a:hover {
    font-size:15px;
    list-style: none;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    background-color:transparent;
    color:#000;
    border-radius:0;
    padding:10px 30px 10px 0
}
.nav-pills>li>a:hover {
    color:#999
}
.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
    background-color:transparent;
    color:#333;
    border-radius:0
}
.footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:60px;
    background-color:#f5f5f5
}

.container {
    width:auto;
    max-width:680px;
    padding:0 15px
}
.container .text-muted {
    margin:20px 0
}
.container .text-muted {
    margin:20px 0
}
.page-header {
    border-bottom-color:#aaa;
    margin:40px 0 10px
}

.lead {
    margin-bottom:35px
}
.page-body {
    line-height:22px;
    font-size:14px
}
h3 {
    text-align:center;
    font-size:15px;
    text-transform:uppercase;
    margin-top:10px;
    color:#666
}
.thumbnail {
    margin-bottom:5px;
    border:none;
    border-radius:0;
    object-fit: contain;
    margin-left: auto;
    margin-right: auto;
    display: block;
    /* width: 50%; */
}
.thumbnailhl{
    list-style: none;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    background-color:transparent;
    color:#000;
    border-radius:0;
}
.thumbnailhl:hover{
    color:#999;
    opacity:.8
}

.project-entry {
    margin-bottom:20px;
    display:block
}
.project-entry a:hover {
    text-decoration:none
}
.project-description {
    margin-bottom:20px
}
.bottom-margin {
    margin-bottom:20px
}
.title>a {
    font-size:35px;
    list-style: none;
    display: inline-block;
    text-align: left;
    text-decoration: none;
    background-color:transparent;
    color:#000;
    border-radius:0;
    padding:10px 30px 10px 0
  }
   
  .row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
  }
  
  /* Create four equal columns that sits next to each other */
  .column {
    flex: 25%;
    max-width: 90%;
    padding: 0 4px;
  }
  .column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
  }
  /* Responsive layout - makes a two column-layout instead of four columns */
  @media screen and (max-width: 800px) {
    .column {
      flex: 50%;
      max-width: 50%;
    }
  }
  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
    .column {
      flex: 100%;
      max-width: 100%;
    }
  }