* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  color: #584E4A;
  background-color: #555555;
}

.page {
  height: 100%;
  z-index: 1;
}

.content {
	position: relative;
  height: 200%;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transition: -webkit-transform 0.7s cubic-bezier(1, 0.005, 0.24, 1);
  transition: -webkit-transform 0.7s cubic-bezier(1, 0.005, 0.24, 1);
  transition: transform 0.7s cubic-bezier(1, 0.005, 0.24, 1);
  transition: transform 0.7s cubic-bezier(1, 0.005, 0.24, 1), -webkit-transform 0.7s cubic-bezier(1, 0.005, 0.24, 1);
  background-color: #f0f0f0;
  font-family: roboto_slab;
}

.content_inner {
  height: 50%;
  overflow-y: auto;
  padding: 50px 5%;
}

.tooltip {
position: absolute;
top: 0;
left: 0;
z-index: 2;
font-family: roboto_condensed;
font-size: 24px;
padding: 1px 10px 5px 90px;
letter-spacing: -1px;
background: #ddd;
border-radius: 0 0 7px 0;
border: 1px solid #bbb;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  transition: -webkit-transform 420ms cubic-bezier(1, 0.005, 0.24, 1);
  transition: transform 420ms cubic-bezier(1, 0.005, 0.24, 1);
  transition: transform 420ms ease, -webkit-transform 420ms ease;
}

.tooltip-active {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.menu_toggle {
  z-index: 900;
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  cursor: pointer;
  width: 80px;
  height: 80px;
  background-color: #d21919;
  background-color: #B5341E;
  border-bottom-right-radius: 100%;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.45);
}
.menu_toggle i {
  color: #ddd;
  font-size: 32px;
-webkit-transition: all 420ms ease;
-moz-transition: all 420ms ease;
-ms-transition: all 420ms ease;
-o-transition: all 420ms ease;
transition: all 420ms ease;
}
.menu_toggle:hover i {
  color: #fff;
-webkit-transition: all 420ms ease;
-moz-transition: all 420ms ease;
-ms-transition: all 420ms ease;
-o-transition: all 420ms ease;
transition: all 420ms ease;
}
.menu_toggle:active i {
  opacity: 0.8;
-webkit-transition: all 420ms ease;
-moz-transition: all 420ms ease;
-ms-transition: all 420ms ease;
-o-transition: all 420ms ease;
transition: all 420ms ease;
}
.menu_toggle .menu_open,
.menu_toggle .menu_close {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  margin-left: -25px;
  -webkit-transition: -webkit-transform 0.7s cubic-bezier(1, 0.005, 0.24, 1);
  transition: -webkit-transform 0.7s cubic-bezier(1, 0.005, 0.24, 1);
  transition: transform 0.7s cubic-bezier(1, 0.005, 0.24, 1);
  transition: transform 0.7s cubic-bezier(1, 0.005, 0.24, 1), -webkit-transform 0.7s cubic-bezier(1, 0.005, 0.24, 1);
}
.menu_toggle .menu_open {
  -webkit-transform-origin: -100px -100px;
          transform-origin: -100px -100px;
}
.menu_toggle .menu_close {
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
  -webkit-transform-origin: -100px -160px;
          transform-origin: -100px -160px;
}

#navigation {
  position: fixed;
	top: 0;
	left: 0;
  list-style-type: none;
  margin: 0;
  padding: 60px;
  height: 100%;
  overflow: auto;
  font-family: roboto_slab;
}
#navigation ul {
  padding: 0;
  margin: 0 26px;
  -webkit-transform: translateX(-1200px);
          transform: translateX(-1200px);
  -webkit-transition: -webkit-transform 0.7s 0s cubic-bezier(1, 0.005, 0.24, 1);
  transition: -webkit-transform 0.7s 0s cubic-bezier(1, 0.005, 0.24, 1);
  transition: transform 0.7s 0s cubic-bezier(1, 0.005, 0.24, 1);
  transition: transform 0.7s 0s cubic-bezier(1, 0.005, 0.24, 1), -webkit-transform 0.7s 0s cubic-bezier(1, 0.005, 0.24, 1);
}
#navigation > ul {
  margin: 0 12% 40px;
}
#navigation ul li {
  margin: 10px 0;
  color: #FB6D51;
  font-size: 20px;
  font-family: roboto;
  font-weight: 300;
}

#navigation ul li ul li {
  margin: 5px 0;
}

#navigation ul b {
  color: #fff;
  font-weight: bold;
}

#navigation ul a {
  text-decoration: none;
  color: #ddd;
  -webkit-transition: all 420ms;
  transition: all 420ms;
}

#navigation ul a:hover {
  color: #FB6D51;
}

#navigation ul a:active {
  color: #888;
}

#navigation ul a.page:after {
  content: "";
}

#navigation ul a .icon {
  position: relative;
  display: inline-block;
  margin-right: 25px;
  color: #f0f0f0;
}

#navigation ul a:active .icon {
  color: #F37272;
}

#navigation .zimversion {
  position: fixed;
bottom: 10px;
left: 10px;
font-size: 0.8rem;
  color: #999;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: all 420ms ease;
-moz-transition: all 420ms ease;
-ms-transition: all 420ms ease;
-o-transition: all 420ms ease;
transition: all 420ms ease;
}

#navigation .zimversion a {
  color: #FB6D51;
}

#navigation .zimversion a:hover {
  color: #fff;
}
#navigation .zimversion a::before {
  display: none;
}
#navigation .zimversion a i {
  font-size: 2rem;
}

.shazam .content {
	box-shadow: 0px 0 20px rgba(0,0,0,0.5);
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.shazam .menu_open {
  -webkit-transform: rotate(-30deg);
          transform: rotate(-30deg);
}
.shazam .menu_close {
  -webkit-transform: rotate(0);
          transform: rotate(0);
}
.shazam #navigation ul {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition: -webkit-transform 0.35s 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: -webkit-transform 0.35s 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 0.35s 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 0.35s 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.35s 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.shazam #navigation .zimversion {
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: all 420ms ease-out 1420ms;
-moz-transition: all 420ms ease-out 1420ms;
-ms-transition: all 420ms ease-out 1420ms;
-o-transition: all 420ms ease-out 1420ms;
transition: all 420ms ease-out 1420ms;
}

.shazam .scrollToTop {
  display: none;
}

a {
  color: #B5341E;
  text-decoration: none;
  transition: 0.45s;
  position: relative;
  display: inline-block;
}
a::before {
  content: '';
  transition: inherit;
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: #5294E2;
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
}
a:active, a:hover {
  color: #FB6D51;
  outline: 0;
}
a:active {
  color: #5294E2;
}
a:active::before, a:hover::before {
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
  transform: scaleX(1);
}

a.page:after, a.external-link:after , a.file:after, footer b:before {
  font-family:'WebHostingHub-Glyphs';
  background:none;
  width:auto;
  height:auto;
  font-style:normal;
  margin: 0 3px;
  content: "\f765";
}

a.external-link:after {
  content: "\f332";
}

a.file:after {
  content: "\f0d6";
}

footer b:before {
  content: "\f240";
  color: #ccc;
}

header {
  position: relative;
  z-index: 3;
  text-align: right;
}

.scrollToTop {
  float: right;
}

header a, header .insen {
  color: #ccc;
  text-decoration: none;
  font-size: 24px;
  -webkit-transition: all 420ms ease;
-moz-transition: all 420ms ease;
-ms-transition: all 420ms ease;
-o-transition: all 420ms ease;
transition: all 420ms ease;
}

header .insen {
  color: #FFD2AD;
}

header a::before {
  display: none;
}

header a:hover {
  color: #444;
}

header a:active {
  color: #d21919;
}

section {
  z-index: 15;
}

.page-title h1 {
margin: 10px 0 0;
padding-bottom: 15px;
font-family: roboto_condensed;
font-weight: normal;
font-size: 36px;
letter-spacing: -1px;
}

.page-title h1 i {
  color: #ccc;
  font-weight: normal;
  font-size: 27px;
  -webkit-transition: all 420ms ease;
-moz-transition: all 420ms ease;
-ms-transition: all 420ms ease;
-o-transition: all 420ms ease;
transition: all 420ms ease;
}

.page-title h1:hover i {
  color: #584E4A;

}

.fade {
  width: 100%;
  height: 1px;
  background: #ccc;
}

.fade-top {
  box-shadow: 0 12px 10px rgba(0,0,0,0.45), 0 5px 5px rgba(0,0,0,0.25);
  margin-top: -3px;
  margin-bottom: 25px;
}

.fade-bottom {
  box-shadow: 0 -12px 10px rgba(0,0,0,0.45), 0 -5px 5px rgba(0,0,0,0.25);
  margin-top: 40px;
  margin-bottom: 15px;
}

.page-body {
  line-height: 1.5rem;
}

.page-body img {
  padding: 4px;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0,0,0,0.45);
}

.zim-tag {
  color: #5294E2;
}

footer {
  display: block;
  margin-bottom: 40px;
  overflow: auto;
  padding: 1px 0;
}

pre, tt {
white-space: pre-wrap;
background: #404552;
color: #ccc;
padding: 2px 5px;
border-radius: 7px;
/*border: 3px solid #B5341E;*/
box-shadow: inset 0 0 20px rgba(0,0,0,0.45);
  font-family: saxmono, mono, monospace;
}

.checked-box {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAANOgAADMQBiN+4gQAAAAd0SU1FB9gKGQ8sMEGsKGkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAEBUlEQVRIx62V22tdRRTGf7Nn73P2ybntnNOe3NqkPTGgLTVUUZF6QatSLOKTPgqCIqLgQ0H/A1sQQbBYCBb1QfAxiC8tSO1FqHkwJVKtjdTGNraUmObsc9nXmfGh7cGYpM1D5nHWzPetteZb3wg2eB2YqYm4zSadsMtoboiNBH/3TE0awx6j+MRoxoTg/IYRvP19TQrJS0bzhdHGSyKFkLTtjSKwMjyiEz43ynhtP6bdjBCWyFobAf7eT7VhNF/q1FRbjYjmUohlCVPwnB+6FUxMTJipqSmUUhhjEGKd3bMT4ks/Y6oLBK2Yth8hHYtCJXOix7Nf7xLMzc0xOzvLzp078TyPNE3viW3QJPXzhNWbxFFKHCmMhoLn/FHodd48vGfhapdAacXQlkFK5dL6wIUm6fuTZPuvqDQhaMUYYyiVyuQr6rXDexYuAdi3tSv1ZJNs/R/CaszzT+1na88uXFnCEnJVgivBNN8uTJKmHQI/ptOOcXNZzMz9mOqFs90OHpipWcYwlo5P4ebnuOkrvr5wgrH+h3im7y36MzuwRXYZeKha/OhP0EkadFoxQSdGSotedR/+XwMc2XvKdNUFOFqZx6LKZWIiwjgkikNmLp/hm8sH+K1zjFTHXfBYdTi+eJArzXM0GxFxoBDCopLvo/fqEwi1XPkWkGqjFo2TgB1jOYZUKZTS/D1/ncmLh7jon0IbRWoiTi59ymzzJEEQE3cStNZsGxqlfPE57MBbOR8fP3hDGalOO9fq2DlBvmZw8xa2IxACGn6TydlD/O6f5OzSV/zif0cYhLQaEXGkKBbz7Ov/AOlXV1cxgBJRI3fuSTrpTawt18kWIZN1CFuaONI0w0WOXfsI43YIggh/KUSlhqxrMz74AkOZcWBm9QkH+Gw8NDLuITi+m0yzhluSyJzBLcpblUhFxywSRAEtPwQjsKVN30CNh0uvYuOubSHLtN3J0TO1j0pmBNuFbFWRK0gyPRZpktL2I5JQkclKakNlnh54g6ocvevUr/Ai2a7wineEkcJupA3S1Wg0nVZM2E6wbEF5U5G9Q++wI7sfR7h3N8HVNstykBfzH+KJEZwiWD0aIwxCgJ0R1Mu7GXOeJSuK93bZtQIle4D9pUNU5DC5jEsu55AvZakM5NicGyEj8uuz8bUCQgj67QfY671P3vEoeC69gy695U1U7NG7XV0pUwBjDJa1/JJlWWxzHuflzQe5FJ/GsgUVuZ2t8lEkTvfc0aNHb72flBhjVicQQqCUuvM3/M+WDVguWBrMVdDXEGZlBVEUrVCU9d9s5+fnaTQa2PZyPxEIhJaI1EEoZwX4ncynp6fXrmB4eJjR0VFarRbNZnP9P9rt9gohqNVq1Ov1ZbF/AZGev3hLJ2/zAAAAAElFTkSuQmCC)}
.xchecked-box {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAANOgAADMQBiN+4gQAAAAd0SU1FB9gKGQ8bDYnDxEwAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAEK0lEQVRIx9WVS2hTWRjHf/eR3CY1nbxMH2YiZRQS6qO13YlMVxY3SnVcuNIBFezGpSADLoQqLu1sHJCqdCFSXFpw4YOCSH3BtFqttTNamabX3DS5bfO6uffMoglja3RGcDMHzuac7/z/53++//cd+L8P6VuCPQYZ8ADNgBd4J31DcDcQs+GnHByRocEDv0kfBSjAOlYCs11Q+gpwDegS8LMJ+3QIK0ATzEhV8Odnz5bzw8P4dJ25aJQ/WlvJ1df/K7hSLtOcTNI+Pk69rpMTgqIQhCDvh1/VSpw79+gRrRMTmLZNezLJJsPg+a5dmOEwQlFqg1sWG16/Jv7sGWXDwBACFQjC9HcwIMONKkGp4PGAJGEDS0IQmZlhnWnye3c3eiyGo6qr3WHbrJ+dJf7gAXI6zSIr72T7/fgzmT4FHnTBsgrQBfYvTU0km5vxz86iADnAm0rRPTWFt7cXZccOJJcLAGHb2K9ekT93jmwmwwdAAFpjI6Ntbfxw5879ag7l6o1sr5eHHR3IsRgeQK/M4sQE+YEB7JcvEY6zAj45SWFgAPPxYwzHoQxIkQjTPT0kIxE+Noj8sexFn4/xnh58iQTeSpHkHAdrbIzi0BCOrmNPTpK/eJHM3bt8sCyKQCiR4NWePWSiUZw1+ZLXJm4pFKLhzBlCsRh2RUXacVgeGaF47RrL58+zcP8+RrmMkCQinZ1EL1zAjERqmkH+tLYl1G3bCJw4QUjT0IA0MJfLMX/5MqmHD0nZNiUgtGULG/r7ccXjINWuWbnmqsuFu7sb/4EDNLlcBIEioNs2KUAFGmMxmk6dQm1tRZI+3xBqEkiShBQOox05Ql1nJ26gvuIUAWiKQnj/ftStW5Fk+YuF+NldsbBA4cYN9KdPmaso8Fc62ZJtk7l1C2t0FGdxESHE1xE4hkHh6lX0oSHSpRIewC/LrPf7CSgKNpCamkI/fZr8pUuIZBIcpyaBunahPp1mub+fDyMjGKUSChCsq6Nh717q9u2jbnSU0uAgRrFIwTThyhUCqRS+hgZKLS1fJvDm87SNjZGcnsYUAjcQ8vsJ9/Xh7u1FDgRQN20iks3iDA+zZFmYhQLqzZtsj8WY3L0baY2Sf55ICCKpFHUzM2SEQAJCHg+hY8fQDh5EDgRWDoRC1J88SePRo2geD0XAcBy8b98Sv3ePYDZbbf2rFQjLIphMsmDbaEBQVQkePox26BCSz7e6i4bDrDt+nGYhmBscpFAskheC4Js3bPR4qHphFYEnlcI7P4/jdqNpGu8TCe4oCsXr1z//F2ga3+/cSfTJE0qmSVYIsKzaOZDcbjKyzFIiwfvt21kMBLA07YsetzWNd+3tLLW0sH5igvT8PH9Go/z44kX+E4LGjg7GDYOcy4XlOEgLC//5P/5LCFzxOPLmzWyIx+m6fduu7v0NVGqyTSycKksAAAAASUVORK5CYII=)}
.unchecked-box {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAANOgAADMQBiN+4gQAAAAd0SU1FB9gKGQ8qAt8h3m8AAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAA60lEQVRIx+2VsQqDMBRF70sCLg5OLoKgjk7+lJ/hh+STXBwcnRz8ArMEkrxOFktbaC3tULzTg5e8k5vADXDq70VbobXmvu/hvQczg4heHrJfXxQFuq67blZbMc8zpmlCXddIkgTOuZcBUko45zCOI6y1Nz2xFSEEZFmGOI7fGg4A3nsQEZqmuXOu9jallACAtm3fvmutNaIoAjM/dkBECCF89KCbk4eAb+kEnIAT8EsAM0OIz3hSyrssUvss8t5fg+uIrLXPs0gIgWVZYIyBUurQyYdheO4gz3NUVQVjDNZ1PfSjpWmKsixvehfB9GBZ3NndrgAAAABJRU5ErkJggg==)}


.checked-box, .unchecked-box, .xchecked-box {
  background-repeat: no-repeat;
  background-position: 0px -1px;
  padding-left: 32px;
  list-style: none;
  margin-left: -32px;
  line-height: 27px;
}


@media (min-width: 860px) {
  header {
    text-align: left;
  }
  .content_inner {
    padding: 50px 10%;
  }
  #navigation ul li {
    font-size: 25px;
  }
}