* {
  box-sizing: border-box;
}

html, body { min-height: 100%; }
a { text-decoration: none; }

.main-header {
    background: -moz-linear-gradient(#3F94BF, #246485);
    background: -o-linear-gradient(#3F94BF, #246485);
    background: -webkit-linear-gradient(#3F94BF, #246485);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3F94BF), color-stop(1, #246485));
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#3F94BF, EndColorStr=#246485)";
    background: linear-gradient(#3F94BF, #246485);
    z-index: 2500;
    padding: 5px;
    text-align: center;
    color: white;
    text-shadow: #222 0 -1px 1px;
    position: fixed;
    width: 100%;
    left: 0;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease
    }
 .main-header a {
   
}

.page-wrap {
  float: right;
  width: 100%;
  transition: width 0.3s ease;
}

.main-nav {
  position: fixed;
  top: 0;
  width: 0;
  height: 100%;
  background: #e2e2e2;
  overflow-y: auto;
  transition: width 0.3s ease;
  
}
 .main-nav a {
    display: block;
    background: -moz-linear-gradient(#3F94BF, #246485);
    background: -o-linear-gradient(#3F94BF, #246485);
    background: -webkit-linear-gradient(#3F94BF, #246485);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3F94BF), color-stop(1, #246485));
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#3F94BF, EndColorStr=#246485)";
    background: linear-gradient(#3F94BF, #246485);
    border-top: 1px solid #484848;
    border-bottom: 1px solid #2E2E2E;
    border-right: 2px;
    border-right-color: #484848;
    color: white;
    padding: 15px;
    height: 62px
    }
    .main-nav li {

list-style-type: none;
    }
.main-nav a:hover, a:focus {
    background: -moz-linear-gradient(#F28D3A, #F0802E);
    background: -o-linear-gradient(#F28D3A, #F0802E);
    background: -webkit-linear-gradient(#F28D3A, #F0802E);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F28D3A), color-stop(1, #F0802E));
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#F28D3A, EndColorStr=#F0802E)";
    background: linear-gradient(#F28D3A, #F0802E)
    }

.main-nav :after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 34px
    }

.content {
  padding: 100px 20px 20px 20px;
}

.close-menu {
  display: none;
}

#main-nav:target {
  width: 220px;
  z-index:3000;
}
#main-nav:target + .page-wrap {
  width: 90%;
}
 #main-nav:target + .page-wrap .open-menu {
     display: none; 
  }
 #main-nav:target + .page-wrap .close-menu {
     display: block;
  }
 #main-nav:target + .page-wrap .main-header {
    width: 90%;
    left: 220px;
  }