html,
body {
  background: rgb(240,239,239);
  background: radial-gradient(circle, rgba(240,239,239,1) 0%, rgba(240,239,239,1) 47%, rgba(243,245,245,1) 100%);
}

/* HEADER */

  .logo {
    margin: 20px auto;
    padding: 10px 0;
  }

/* MENU */

  #menu {

  }
  #first-panel {
    margin:0 auto 40px;
    padding: 20px 10px 10px;
    list-style: none;
    color: #777;
    background-color: #FFF;
    border-radius: 8px;
    box-shadow: -20px -20px 60px #bebebe, -20px -20px 60px #ffffff;
  }
    .head {
      position: relative;
      margin-top: 5px;
      padding: 15px 0 15px 20px;
      font-size: 1.2em;
      text-transform: uppercase;
      border-top: 1px solid #EFEFEF;
    }
    .head:first-child {
      margin-top: 0;
      padding-top: 0;
      border: none;
    }
    .head::before {
      content: '';
      position: absolute;
      left: 5px;
      top: 30px;
      width:7px;
      height:7px;
      border-right:2px solid black;
      border-bottom:2px solid black;
      transform: translateY(-50%) rotate(-45deg);
      transition: 0.2s ease-in-out;
    }
    .head:first-child::before {
      top: 15px;
    }
    .head.active::before {
      top: 24px;
      transform: rotate(45deg);
    }
    .head.active:first-child::before {
      top: 10px;
    }
      .head > span {
        cursor: pointer;
      }
      .sub-menu,
      .sub-menu-2 {
        max-height: 0;
        padding: 0;
        list-style: none;
        opacity: 0;
        transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
      }
      .head.active .sub-menu,
      .sub-head.active .sub-menu-2 {
        max-height: 4000px;
        opacity: 1;
      }
        .sub-menu > li,
        .sub-menu-2 > li {
          position: relative;
          padding: 5px 0 10px;
          border-top: 1px dotted #DEDEDE;
        }
          .sub-menu > li > .path,
          .sub-menu-2 > li > .path {
            display: inline-block;
            font-size: 0.7em;
          }
          .sub-menu > li > .title,
          .sub-menu-2 > li > .link {
            text-transform: capitalize;
            font-size: 1em;
          }
      .sub-menu {
        font-size: 0.7em;
      }
        .sub-menu > li {
          line-height: 0.9em;
        }
        .sub-menu > li:first-child {
          padding-top: 0;
          border: none;
        }
        .sub-menu .sub-head::before {
          content: '';
          position: absolute;
          left: -10px;
          top: 27px;
          width:4px;
          height:4px;
          border-right:1px solid #999;
          border-bottom:1px solid #999;
          transform: translateY(-50%) rotate(-45deg);
          transition: 0.2s ease-in-out;
        }
        .sub-menu .sub-head:first-child::before{
          top: 22px;
        }
        .sub-menu .sub-head.active::before {
          top: 24px;
          transform: rotate(45deg);
        }
        .sub-menu .sub-head.active:first-child::before{
          top: 19px;
        }
          .sub-head > .path,
          .sub-head > .title {
            cursor: pointer;
          }
          .sub-menu-2 {
            overflow-y: hidden;
          }
            .sub-menu-2 > li:first-child {
              border:none;
            }

/* CONTENT */

#wiki {
 padding-bottom: 40px;
}
  #device-type,
  #path {
      display: block;
  }
  #device-type {
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px dotted #BABABA;
  }

  #screenshot {
    margin: 25px auto;
    border-radius: 5px;
    border: 2px solid rgba(34, 65, 93, .4);
  }

  h1 {
    margin-top: 20px;
    color: rgb(34, 65, 93);
  }


/* FOOTER */