.tab {
      cursor: pointer;
      padding: 10px 20px;
      margin: 0px 1px;
      background: linear-gradient(175deg, #004080 0%, #a4c8defc 100%);
      display: inline-block;
      color: #fff;
      border-radius: 5px 5px 0px 0px;
      box-shadow: 0 0.5rem 0.8rem #ccc;
    }

    .panels {
      background: #fff;
      box-shadow: 0 0rem 1.5rem #f8f8f8;
      min-height: 100%;
      width: 100%;
      max-width: 100%;
      border-radius: 0px;
      overflow: hidden;
      padding: 20px;
    }

    .panel {
      display: none;
      animation: fadein .8s;
    }

    @keyframes fadein {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    .panel-title {
      font-size: 1.5em;
      font-weight: bold
    }

    .radio {
      display: none;
    }

    #menu1:checked~.panels #menu1-panel,
    #menu2:checked~.panels #menu2-panel,
    #menu3:checked~.panels #menu3-panel,
    #menu4:checked~.panels #menu4-panel,
    #menu5:checked~.panels #menu5-panel,
    #menu6:checked~.panels #menu6-panel,
    #menu7:checked~.panels #menu7-panel,
    #menu8:checked~.panels #menu8-panel,
    #menu9:checked~.panels #menu9-panel,
    #menu10:checked~.panels #menu10-panel,
    #menu11:checked~.panels #menu11-panel,
    #menu12:checked~.panels #menu12-panel {
      display: block
    }

    #menu1:checked~.tabs #menu1-tab,
    #menu2:checked~.tabs #menu2-tab,
    #menu3:checked~.tabs #menu3-tab,
    #menu4:checked~.tabs #menu4-tab,
    #menu5:checked~.tabs #menu5-tab,
    #menu6:checked~.tabs #menu6-tab,
    #menu7:checked~.tabs #menu7-tab,
    #menu8:checked~.tabs #menu8-tab,
    #menu9:checked~.tabs #menu9-tab,
    #menu10:checked~.tabs #menu10-tab,
    #menu11:checked~.tabs #menu11-tab,
    #menu12:checked~.tabs #menu12-tab {
      background: #fffffff6;
      color: #000;
      border-top: 3px solid #FFCC00;
    }