/* Pure CSS checkbox replacement */
/* Do not attempt to re-position this elements */
/* They must remain in the same structured location to the thumbnail to work properly */

  #template_tn > input.toggle   {
         max-height: 0;
          max-width: 0;
            opacity: 0;
            display: none;
  }

  .SlideButton {
            display: block;
           position: fixed;
              width: 220px;
             height: 30px;
               left: 0;
  }

  .SlideButton label span {
              float: left;
       padding-left: 40px;
        line-height: 30px;
              color: #888;
               font: italic normal normal 14pt Andy, Arial;
            display: block;
         text-align: center;
        text-shadow: 0 1px 0 #ccc,
                     0 2px 0 #c9c9c9,
                     0 3px 0 #bbb,
                     0 4px 0 #b9b9b9,
                     0 5px 0 #aaa,
                     0 6px 1px rgba(0,0,0,.1),
                     0 0 5px rgba(0,0,0,.1),
                     0 1px 3px rgba(0,0,0,.3),
                     0 3px 5px rgba(0,0,0,.2),
                     0 5px 10px rgba(0,0,0,.25),
                     0 10px 10px rgba(0,0,0,.2),
                     0 20px 20px rgba(0,0,0,.15);
  }

  /* The following provides the "container" for our toggle in its default (off) state */

  .SlideButton label {
            display: block;
           position: relative;
              float: left;
             margin: 6px 10px 6px 25px;
         box-shadow: inset 0 0 0px 1px #d5d5d5;
    /*    text-indent: -5000px;   */
             height: 18px;
              width: 30px;
      border-radius: 15px;
             cursor: pointer;
  }

  /* The following provides the green background for the "on" state of our toggle - it is hidden when the switch is off */

  .SlideButton label:before {
            content: "";
           position: absolute;
            display: block;
             height: 18px;
              width: 18px;
                top: 0;
               left: 0;
      border-radius: 15px;
         background: rgba(19,191,17,0);
         transition: 250ms ease-in-out;
  }

  /* The following provides the actual switch and its drop shadow */

  .SlideButton label:after {
            content: "";
           position: absolute;
            display: block;
             height: 18px;
              width: 18px;
                top: 0;
               left: 0px;
      border-radius: 15px;
         background: white;
         box-shadow: inset 0 0 0 1px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.2);
         transition: 250ms ease-in-out;
  }

  /* The following defines the "on" state for the switch */

  input.toggle:checked + .SlideButton label:before {
              width: 30px;
         background: rgba(19,191,17,1);
  }

  input.toggle:checked + .SlideButton label:after  {
               left: 12px;
         box-shadow: inset 0 0 0 1px rgba(19,191,17,1), 0 2px 4px rgba(0,0,0,.2);
  }

  #Business_cb.toggle ~ .Business_c_tn,
  #Organization_cb.toggle ~ .Organization_c_tn,
  #Personal_cb.toggle ~ .Personal_c_tn {
            display: none;
  }

  #Business_cb.toggle:checked ~ .Business_c_tn,
  #Organization_cb.toggle:checked ~ .Organization_c_tn,
  #Personal_cb.toggle:checked ~ .Personal_c_tn {
            display: inline;
  }

  input.toggle:checked + .SlideButton span {
              color: #000;
  }
 #category0_div {
                top: 23vh;
  }

  #category1_div {
                top: 26vh;
  }

  #category2_div {
                top:29vh;
  }

  #category3_div {
                top:300px;
  }

  #category4_div {
                top:330px;
  }

  #category5_div {
                top:360px;
  }

  #category6_div {
                top:390px;
  }
