* {box-sizing: border-box;}

    .wrapper {
        max-width: 1400px;
        margin: 0 auto;
        font: 1.2em Helvetica, arial, sans-serif;
    }

    
    .wrapper > * {
    /*    border: 2px solid #f08c00; */
        padding: 5px;
    }

    a {
        text-decoration: none;
        color: #1c75bc;
    }

    nav ul {
        list-style: none;
        margin: 0;
      display: flex;
      justify-content: space-between;
        padding: 0.2em 0.2em 0.2em 0.2em;
    }

    header ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    aside ul {
        list-style: none;
        margin: 0;
        padding: 0;


    } 

    aside a {
        color: #a0f6aa;
        text-decoration: none;
    }
    aside .cd-accordion-menu {
        width: 90%;
/*        max-width: 600px; */
        background: #4d5158;
/*        margin: 4em auto; */
/*        box-shadow: 0 4px 40px #70ac76; */
    }
    
    aside .cd-accordion-menu ul {
        /* by default hide all sub menus */
        display: none;
    }

    aside .cd-accordion-menu li {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    aside .cd-accordion-menu input[type=checkbox] {
        /* hide native checkbox */
        position: absolute;
        opacity: 0;
    }    

    aside .cd-accordion-menu label, .cd-accordion-menu a {
        position: relative;
        display: block;
/*        padding: 18px 18px 18px 64px; */
        background: #4d5158;
        color: #ffffff;
/*        font-size: 1.6rem; */
    }

    aside .no-touch .cd-accordion-menu label:hover, aside .no-touch .cd-accordion-menu a:hover {
        background: #52565d;
    }

    aside .cd-accordion-menu label::before,
    aside .cd-accordion-menu label::after,
    aside .cd-accordion-menu a::after {
        /* icons */
        content: '';
        display: inline-block;
        width: 16px;
        height: 16px;
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    aside .cd-accordion-menu label {
        cursor: pointer;
    }
    
    aside .cd-accordion-menu label::before, aside .cd-accordion-menu label::after {
        background-image: url(/static/img/cd-icons.svg);
        background-repeat: no-repeat;
    }

    aside .cd-accordion-menu label::before {
        /* arrow icon */
        left: 18px;
        background-position: 0 0;
        -webkit-transform: translateY(-50%) rotate(-90deg);
        -moz-transform: translateY(-50%) rotate(-90deg);
        -ms-transform: translateY(-50%) rotate(-90deg);
        -o-transform: translateY(-50%) rotate(-90deg);
        transform: translateY(-50%) rotate(-90deg);
    }

    aside .cd-accordion-menu label::after {
        /* folder icons */
        left: 41px;
        background-position: -16px 0;
    }
    
    aside .cd-accordion-menu a::after {
        /* image icon */
        left: 36px;
        background: url(/static/img/cd-icons.svg) no-repeat -48px 0;
    }

    aside .cd-accordion-menu input[type=checkbox]:checked + label::before {
        /* rotate arrow */
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    
    aside .cd-accordion-menu input[type=checkbox]:checked + label::after {
        /* show open folder icon if item is checked */
        background-position: -32px 0;
    }
    
    aside .cd-accordion-menu input[type=checkbox]:checked + label + ul,
    aside .cd-accordion-menu input[type=checkbox]:checked + label:nth-of-type(n) + ul {
        /* use label:nth-of-type(n) to fix a bug on safari (<= 8.0.8) with multiple adjacent-sibling selectors*/
        /* show children when item is checked */
        display: block;
    }
    
    aside .cd-accordion-menu ul label,
    aside .cd-accordion-menu ul a {
        background: #35383d;
        box-shadow: inset 0 -1px #41444a;
        padding-left: 0;
    }
    
    aside .no-touch .cd-accordion-menu ul label:hover,
    aside .no-touch .cd-accordion-menu ul a:hover {
        background: #3c3f45;
    }
    
    aside .cd-accordion-menu > li:last-of-type > label,
    aside .cd-accordion-menu > li:last-of-type > a,
    aside .cd-accordion-menu > li > ul > li:last-of-type label,
    aside .cd-accordion-menu > li > ul > li:last-of-type a {
        box-shadow: none;
    }
    
    aside .cd-accordion-menu ul label::before {
        left: 36px;
    }
    aside .cd-accordion-menu ul label::after,
    aside .cd-accordion-menu ul a::after {
        left: 59px;
    }
    
    aside .cd-accordion-menu ul ul label,
    aside .cd-accordion-menu ul ul a {
        padding-left: 100px;
    }
    
    aside .cd-accordion-menu ul ul label::before {
        left: 54px;
    }
    
    aside .cd-accordion-menu ul ul label::after,
    aside .cd-accordion-menu ul ul a::after {
        left: 77px;
    }
    
    aside .cd-accordion-menu ul ul ul label,
    aside .cd-accordion-menu ul ul ul a {
        padding-left: 118px;
    }
    aside .cd-accordion-menu ul ul ul label::before {
        left: 72px;
    }
    aside .cd-accordion-menu ul ul ul label::after,
    aside .cd-accordion-menu ul ul ul a::after {
        left: 95px;
    }
    
    user ul {
        list-style: none;
        margin: 0;
        padding: 0.2em 0.0em 0.2em 0.0em;
        display: flex;
        justify-content: flex-end;
    }

    user a i {
        color: #1c75c;
    }

    nav li {
        padding: 0.2em 0.0em 0.2em 0.0em;
    }

    nav a {
        color: white;
    }
    
    nav a i {
        color: white;
    }

.main-head {
    grid-area: header;
}
.main-user {
    grid-area: user;
    background: #ededed;
}

.content {
  grid-area: content;
}
.main-nav {
    grid-area: nav;
    background: #1c75bc;
}
.side {
  grid-area: sidebar;
  background: #4d5158;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;/*  background: #4d5158; */
}

.ad {
  grid-area: ad;
}
.main-footer {
  grid-area: footer;
}

.wrapper {
  display: grid;
  grid-gap: 2px;
  grid-template-areas: 
  "header"
   "user"
   "nav"
   "content"
   "sidebar"
   "ad"
   "footer";
}

@media (max-width: 449px) {
    nav a {
        font-size: 0px;
    }

    nav a i {
        font-size: 20px;
    }
}

@media (min-width: 450px) {
  .wrapper {
    grid-template-columns: 1fr 3fr;
    grid-template-areas: 
    "header  header"
        "user user"
      "nav     nav"
      "sidebar content"
      "ad      footer";
  }

  nav ul {
      display: flex;
      justify-content: space-between;
  }

  header ul {
/*      flex-direction: row;*/
      display: flex;
      justify-content: space-between; 
  }

  
}



@media (min-width: 768px) {
  .wrapper {
    grid-template-columns: 1fr 5fr 1fr;
    grid-template-areas: 
    "header header  header user"
        "nav nav nav nav"
      "sidebar    content content content"
      "sidebar    content content content"
      "ad footer  footer footer"
   }

  nav ul {
      flex-direction: row;
/*      display: flex;
      justify-content: space-between; */
  }

   header ul {
     flex-direction: row; 
   }



}

aside .cd-accordion-menu.animated label::before {
  /* this class is used if you're using jquery to animate the accordion */
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}