#primary-nav {padding: 0 20px;}
.blocknav {}
.bg-dark {background-color: #111!important;}

.navbar-brand {background: transparent url(http://mattkirkland.com/css/i/logo.png) top left no-repeat; background-position: 0 px; text-indent: -9999px; width: 200px; margin-top: 20px; padding-bottom: 0px; }

ul.blocknav li { font-family: 'Oswald', sans-serif; font-size: 28px; line-height: 1.1;  opacity: 1.0;  width: 70px; height: 70px; overflow: hidden; text-transform: uppercase;  font-weight: 400;
	transition: all 0.5s;
	-moz-transition: all 0.5s; /* Firefox 4 */
	-webkit-transition: all 0.5s; /* Safari and Chrome */
	-o-transition: all 0.5s; /* Opera */}
ul.blocknav li:hover {width: 220px; height: 70px; opacity: 1.0; }
.navbar-dark .navbar-nav .nav-link {color: rgba(255,255,255,0.9);}

ul.blocknav li {}
ul.blocknav li a {opacity: 1.0; height: 70px; padding-top: 20px; display: inline-block; width: 240px; padding-right: 20px;}
	ul.blocknav li#blog a {background: #E83F97 url(http://mattkirkland.com/css/img/nav_dome.png) top left no-repeat; background-position: 16px 20px; padding-left: 70px; padding-top: 20px; }
	ul.blocknav li#work a {background: #2DC3DF url(http://mattkirkland.com/css/img/nav_work.png) top left no-repeat; background-position: 20px 21px; padding-left: 70px; padding-top: 20px; }
	ul.blocknav li#personal a {background: #F3D53E url(http://mattkirkland.com/css/img/nav_personal.png) top left no-repeat; background-position: 20px 20px; padding-left: 70px; padding-top: 20px; }
	ul.blocknav li#libris a {background: #99C445 url(http://mattkirkland.com/css/img/nav_libris.png) top left no-repeat; background-position: 23px 18px; padding-left: 70px; padding-top: 20px; }
	ul.blocknav li#contact a {background: #666666 url(http://mattkirkland.com/css/img/nav_contact.png) top left no-repeat; background-position: 25px 18px; padding-left: 70px; padding-top: 20px;}


  @media (max-width: 979px) {

    .navbar-collapse {margin-left: -25px; margin-right: -25px;}
  	.navbar a.brand {margin-top: 0px;  margin-left: 20px; padding-top: 10px; background-position: 0 10px;}
  	ul.blocknav li {width: 100%; display: block; border-radius: none; clear: left; float: none; opacity: 1.0; }
  		ul.blocknav li:hover {width: 100%;
  			}
  	ul.blocknav li a {color: #fff; font-weight: 400; width: 100%; }
  	.nav-collapse .nav > li {clear: left; float: left; margin-bottom: 0px;}
  		.nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a {font-weight: 400;}

  	.navbar-inverse .nav-collapse .nav > li > a, .navbar-inverse .nav-collapse .dropdown-menu a {color: #fff;}
  	.navbar-inverse .navbar-inner {}
  }


  body {background: #ededed; color: #151515; }
  .draggable {
    width: 600px;
    max-height: 400px;
    position: absolute;
    overflow: auto;
    padding: 20px 40px;
    border: 1px solid #fff;
    border-radius: 4px;
    border-top: 22px solid #fff;
    filter: drop-shadow(rgba(0,0,1,0.4) 0rem 0.5rem 0.5rem);
    font-family: "Karla", sans-serif;
    letter-spacing: -0.02em;
  }
  #div1 /* this is the green footer info */ {
    background-color: #99C445;
    color: #ededed;
    background-image: url(karshi.png);
    background-size: 12%;
    background-repeat: no-repeat;
    background-position: right bottom;
    z-index: 1;
    top: 72%;
    left: 20%;
  }
  #div1 a {color: #ededed; text-decoration: underline;}
  #about {
    background-color: #e83f97;
    color: #eee;
    z-index: 10;
    top: 55%;
    left: 40%;
    padding-bottom: 0;
    padding: 40px 30px;

 }
  #about a {color: #fee; text-decoration: underline;}
  #div3 {
    background-color: #8cd9df;
    z-index: 0;
    top: 20%;
    right: 15%;
    padding: 0;
  }
  #ursum {
    background-color: #fff;
    z-index: 0;
    top: 15%;
    left: 12%;
    padding: 0;
  }
  #div4 {
    z-index: 0;
    top: 40%;
    right: 2%;
    padding: 0;
  }
  #localcrush {
    background-color: #fff;
    background-size: cover;
    z-index: 2;
    top: 32%;
    right: 10%;
    padding: 0;
  }
  #tilman {
    background-color: #f26964;
    z-index: 1;
    top: 8%;
    right: 20%;
    padding: 0;
  }
  #pancakes {
    background-color: #fff;
    color: #151515;
    font-family: "Helvetica Neue", Arial, Sans-serif;
    z-index: 2;
    top: 40%;
    right: 52%;
    padding: 0;
    width: 600px;
    height: 348px;
  }
  #dracula {
    background-color: #151515;
    color: #151515;
    z-index: 1;
    top: 23%;
    right: 45%;
    padding: 0;
    height: 360px;
  }
  #birds {
    z-index: 0;
    background: #ededed;
    top: 60%;
    height: 200px;
  }
  .updates {
    height: 600px;
    background-color: #111;
    color: #ededed;
    font-family: monospace;
    font-size: 13px;
    }
  .updates table { border-radius: 4px; margin: 0.4rem;}
  .updates tr { cursor: pointer;  }
    .updates th {border-bottom: none; border-top: none;}
  .updates td {border: none;}
  .updates td:first-child {color: gray; text-align: right;}
  .updates td:nth-child(2) {color: yellow; }
  .updates tr.bnb td:nth-child(2) {color: #2ec3e0;}
  .updates tr.elk td:nth-child(2) {color: #99C445;}
  .updates tr.blog td:nth-child(2) {color: #e83f97;}
  .updates td a {width: 95%; display: inline-block; color: #eee;}
  .updates tr:hover {background-color: rgba(200,200,200,0.1)}
  .updates .table td, .updates .table th {padding: .1rem;}
  .updates .big {font-weight: 600; background-color: rgba(200,200,0,0.3)}

  #birds p.text-small {font-size: 0.7em; margin-top: 1em;}

  /* Update Table */
  .footsies {background: #151515; color: #eee; margin-top: 90vh; padding-top: 5rem;}
  .table td, .table th {border-top: 1px solid rgba(255,255,255,0.1)}
  .footsies tr.exlibris td:nth-child(2) {color: #99C445; text-transform: lowercase;}
  .footsies tr.BNB td:nth-child(2) {color: #2ec3e0;  text-transform: lowercase;}
  .footsies tr.attain td:nth-child(2) {color: #e83f97;  text-transform: lowercase;}
  .footsies td:nth-child(2) {color: yellow;  text-transform: lowercase;}
  .footsies a {color: #fff; }
  .footsies tr:hover {background: rgba(255,255,255,0.1)}
  .footsies tbody tr td:first-child {opacity: 0.5;}
  .footsies .table td, .footsies .table th {padding: 0.5rem 0;}



  @media (max-width: 767px) {
    .draggable {
      max-width: 100%;
      margin-left: 5%
      max-height: auto;
      position: relative;
      overflow: auto;
      max-height: none;
      height: auto;
    }
    #div1, #div2, #div3, #div4, #birds, #dracula, #pancakes, #tilman, #localcrush, #about, #ursum {
      left: 0;
      max-width: 100%;
      margin-top: 20px;
      height: auto;
      top: 0;
      padding: 20px 10px;


    }


    .updates { height: 40%; top: 50%; left: 5%; width: 90%;}

    .footsies {margin-top: 10vh;}
    .footsies .container {max-width: none;}
    /* Hide the table header on small screens */
    table thead {
      display: none;
    }
    /* Make the table, tbody, tr, and td display as block elements */
    table, tbody, tr, td {
      display: block;
      width: 100%;
    }
    /* Style each table row as a block with a bottom border to simulate a divider */
    tbody tr {
      border-top: 1px solid rgba(255,255,255,0.1);
      padding-top: 0.5rem;
    }
    /* Make the first two cells (Date and Category) inline */
    tbody tr td:first-child,
    tbody tr td:nth-child(2) {
      display: inline;
      opacity: 0.5;
      padding-bottom: 0;
    }

    /* Ensure the third cell (Update Text) starts on its own line */
    tbody tr td:nth-child(3) {
      display: block;
      padding-top: 0;
      margin-top: 0;
    }
    .table td, .table th {border-top: none;}

  }