@charset "utf-8";
/* CSS Document */

.navigation { width: 90%;  height: 100%;  position: fixed;  top: 0;  right: 0;  bottom: 0;  left: 0;  z-index: 0;  list-style: none;  background: #111;}
 .nav-item {
  width: 66px;
  
}
.nav-item a {
  display: block;
  padding: 1em;
  background: -webkit-linear-gradient(315deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
  background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
  color: white;
  text-decoration: none;
  -webkit-transition: color 0.2s, background 0.7s;
          transition: color 0.2s, background 0.7s;
}
.nav-item a:hover {
  color: #c74438;
  background: -webkit-linear-gradient(315deg, rgba(0,0,0,0) 0%, rgba(75,20,20,0.65) 100%);
  background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(75,20,20,0.65) 100%);
}
.site-wrap { min-height: 100%;  min-width: 100%;
  background-color: #F8F8F8;
  background-image:url(imgs/bkgd.png);
  background-repeat:repeat-x;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 21;
 }
.nav-trigger { position: absolute;  clip: rect(0, 0, 0, 0);}

/* Make the Magic Happen */
.nav-trigger + label, .site-wrap {  -webkit-transition: left 0.6s;   transition: left 0.6s;}
.nav-trigger:checked + label { left: 70px;}
.nav-trigger:checked ~ .site-wrap {  left: 70px;  box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);}