html, body, p, th, td, li, dd, dt {
	font-size: 1em;
	font-family: Arial,Helvetica,"sans-serif"
}

h1 {font-size: 2em;}
h2 {font-size: 1.5em}
h3 {font-size: 1.2em}
h4 {font-size: 1.0em}
h5 {font-size: .9em}
h6 {font-size: .8em}

body {
  margin-top: 2rem;
}
ul{
	list-style: none;
	padding: 0;
}
a {text-decoration: none;}
/**
 * Hidden fallback
 */
[hidden] {
  display: none;
  visibility: hidden;
}
/**
 * Styling navigation
 */
header {
  margin-right: auto;
  margin-left: auto;
  box-shadow: 0 3px 12px rgba(0,0,0,.25);
}
/**
 * Styling top level items
 */
.nav a,
.nav label {
  display: block;
  padding: .85rem;
  color: #fff;
  background-color: #0d0d0d;
  box-shadow: inset 0 -1px lighten(#0d0d0d, 3%);
  transition: all .25s ease-in;
  &:focus,
  &:hover {
    color: rgba(255,255,255,.5);
    background: darken(#0d0d0d, 7%);
  }
}
.nav label {cursor: pointer;}
/**
 * Styling first level lists items
 */
.group-list a,
.group-list label {
  padding-left: 2rem;
  background: #383838;
  box-shadow: inset 0 -1px lighten(#383838, 7%);
  &:focus,
  &:hover {background: darken(#383838, 7%);}
}
/**
 * Styling second level list items
 */
.sub-group-list a,
.sub-group-list label {
  padding-left: 4rem;
  background: #4a4a4a;
  box-shadow: inset 0 -1px lighten(#4a4a4a, 7%);
  &:focus,
  &:hover {background: darken(#4a4a4a, 7%);}
}
/**
 * Styling third level list items
 */
.sub-sub-group-list a,
.sub-sub-group-list label {
  padding-left: 6rem;
  background-color: #666666;
  box-shadow: inset 0 -1px lighten(#666666, 7%);
  &:focus,
  &:hover {background: darken(#666666, 7%);}
}
/**
 * Hide nested lists
 */
.group-list,
.sub-group-list,
.sub-sub-group-list {
  height: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s ease-in-out;
}
 
.nav__list input[type=checkbox]:checked + label + ul {
	/* reset the height when checkbox is checked */
  max-height: 1000px;
}

label > span {
  float: right;
  transition: transform .65s ease;
}
.nav__list input[type=checkbox]:checked + label > span {transform: rotate(90deg);}


.logo {
	text-align: center;
	padding-top: 48px;
}