.wrap {
  display:flex;
  flex-wrap : wrap;
  min-height: 100%;
}

.nav {
  display:flex;
  flex-direction: column;
  background-color: #343131;
}

.section {
  display:flex;
  flex-direction: column;
}

.home {
  text-align : center;
  background-color: #4374D9;
  padding : 15px;
}

.home a {
  color:#fcfcfc;
}

.menu {
  padding-top : 10px;
  background-color : #343131;
}

.current {
  background-color : #FFFFFF;
}

.current>a {
  color: #000000;
}

.current>a:hover {
  background-color : #FFFFFF !important;
}

li:not(.current)>a {
  color : #b3b3b3;
}

.top li>a:hover {
  background-color: #404040;
}

.sub {
  padding-top : 0;
}

.sub .current {
  background-color : #c9c9c9;
}

.sub .current>a:hover {
  background-color : #c9c9c9 !important;
}

.sub li {
  background-color : #edf0f2;
}

.sub .current>a {
  color : #000000;
}

.sub li>a {
  padding-left : 21px;
  color : gray;
}

.sub li>a:hover {
  background-color : #d6d6d6;
}

.section .content {
  padding: 30px;
}

@media screen and (max-width: 640px) {
  body {
    overflow-y : scroll;
  }

  .wrap {
    display : block;
  }

  .nav {
    display : block;
    height: auto;
  }

  .section {
    display : block;
  }
}

@media screen and (min-width: 640px) {
  .nav {
    width: 300px;
  }

  .section {
    width: calc(100% - 300px);
  }
}