/*
    HTML5 Reset :: style.css
    ----------------------------------------------------------
    We have learned much from/been inspired by/taken code where offered from:
    
    Eric Meyer                  :: http://meyerweb.com
    HTML5 Doctor                :: http://html5doctor.com
    and the HTML5 Boilerplate   :: http://html5boilerplate.com
    
-------------------------------------------------------------------------------*/
/* Let's default this puppy out
-------------------------------------------------------------------------------*/
html,
body,
body div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
figure,
footer,
header,
menu,
nav,
section,
time,
mark,
audio,
video,
details,
summary {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
  background: transparent;
}
article,
aside,
figure,
footer,
header,
nav,
section,
details,
summary {
  display: block;
}
/* Handle box-sizing while better addressing child elements: 
   http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */
/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
   If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img,
object,
embed {
  max-width: 100%;
}
/* force a vertical scrollbar to prevent a jumpy page */
html {
  overflow-y: scroll;
}
/* we use a lot of ULs that aren't bulleted. 
    don't forget to restore the bullets within content. */
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
del {
  text-decoration: line-through;
}
abbr[title],
dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help;
}
/* tables still need cellspacing="0" in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
th {
  font-family: NewLibrisBold;
  vertical-align: bottom;
}
td {
  font-weight: normal;
  vertical-align: top;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}
input,
select {
  vertical-align: middle;
}
pre {
  white-space: pre;
  /* CSS2 */
  white-space: pre-wrap;
  /* CSS 2.1 */
  white-space: pre-line;
  /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word;
  /* IE */
}
input[type="radio"] {
  vertical-align: text-bottom;
}
input[type="checkbox"] {
  vertical-align: bottom;
}
.ie7 input[type="checkbox"] {
  vertical-align: baseline;
}
.ie6 input {
  vertical-align: text-bottom;
}
select,
input,
textarea {
  font: 99% sans-serif;
}
table {
  font-size: inherit;
  font: 100%;
}
small {
  font-size: 85%;
}
strong {
  font-family: NewLibrisBold;
}
td,
td img {
  vertical-align: top;
}
/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
/* standardize any monospaced elements */
pre,
code,
kbd,
samp {
  font-family: monospace, sans-serif;
}
/* hand cursor on clickable elements */
.clickable,
label,
input[type=button],
input[type=submit],
input[type=file],
button {
  cursor: pointer;
}
/* Webkit browsers add a 2px margin outside the chrome of form elements */
button,
input,
select,
textarea {
  margin: 0;
}
/* make buttons play nice in IE */
button,
input[type=button] {
  width: auto;
  overflow: visible;
}
/* scale images in IE7 more attractively */
.ie7 img {
  -ms-interpolation-mode: bicubic;
}
/* prevent BG image flicker upon hover 
   (commented out as usage is rare, and the filter syntax messes with some pre-processors)
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
*/
/* let's clear some floats */
.clearfix:before,
.clearfix:after {
  content: "\0020";
  display: block;
  height: 0;
  overflow: hidden;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  zoom: 1;
}

/* imports
-------------------------------------------------------------------------------*/
/* LESS Variablen
-------------------------------------------------------------------------------*/
/* Farben:
-------------------------------------------------------------------------------*/
/* Fonts:
-------------------------------------------------------------------------------*/
@font-face {
  font-family: 'dejavu_sansextralight';
  src: url('/fonts/DejaVuSans-ExtraLight-webfont.eot');
  src: url('/fonts/DejaVuSans-ExtraLight-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/DejaVuSans-ExtraLight-webfont.woff') format('woff'), url('/fonts/DejaVuSans-ExtraLight-webfont.ttf') format('truetype'), url('/fonts/DejaVuSans-ExtraLight-webfont.svg#dejavu_sansextralight') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'dejavu_sansbook';
  src: url('/fonts/DejaVuSans-webfont.eot');
  src: url('/fonts/DejaVuSans-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/DejaVuSans-webfont.woff') format('woff'), url('/fonts/DejaVuSans-webfont.ttf') format('truetype'), url('/fonts/DejaVuSans-webfont.svg#dejavu_sansbook') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'dejavu_sansbold';
  src: url('/fonts/DejaVuSans-Bold-webfont.eot');
  src: url('/fonts/DejaVuSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/DejaVuSans-Bold-webfont.woff') format('woff'), url('/fonts/DejaVuSans-Bold-webfont.ttf') format('truetype'), url('/fonts/DejaVuSans-Bold-webfont.svg#dejavu_sansbold') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'dejavu_sans_monobook';
  src: url('/fonts/DejaVuSansMono-webfont.eot');
  src: url('/fonts/DejaVuSansMono-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/DejaVuSansMono-webfont.woff') format('woff'), url('/fonts/DejaVuSansMono-webfont.ttf') format('truetype'), url('/fonts/DejaVuSansMono-webfont.svg#dejavu_sans_monobook') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'dejavu_sans_monobold';
  src: url('/fonts/DejaVuSansMono-Bold-webfont.eot');
  src: url('/fonts/DejaVuSansMono-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/DejaVuSansMono-Bold-webfont.woff') format('woff'), url('/fonts/DejaVuSansMono-Bold-webfont.ttf') format('truetype'), url('/fonts/DejaVuSansMono-Bold-webfont.svg#dejavu_sans_monobold') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'dejavu_sans_monooblique';
  src: url('/fonts/DejaVuSansMono-Oblique-webfont.eot');
  src: url('/fonts/DejaVuSansMono-Oblique-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/DejaVuSansMono-Oblique-webfont.woff') format('woff'), url('/fonts/DejaVuSansMono-Oblique-webfont.ttf') format('truetype'), url('/fonts/DejaVuSansMono-Oblique-webfont.svg#dejavu_sans_monooblique') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Schriftgrößen:
-------------------------------------------------------------------------------*/
/* Grundwerte:
-------------------------------------------------------------------------------*/
/* Grid Berechnungen
-------------------------------------------------------------------------------*/
/* MenuButton Lines
-----------------------------------------------------*/
#menuButton {
  right: 16px;
  top: 16px;
  position: fixed;
  width: 28px;
  height: 28px;
  background-color: transparent;
  pointer-events: all;
  cursor: pointer;
  outline: none;
  padding: 0px;
  border: none;
  z-index: 60;
}
.lines {
  display: inline-block;
  width: 24px;
  height: 1px;
  background: #FFF;
  position: absolute;
  left: 2px;
  top: 14px;
  -webkit-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  /* easeInOutQuart */
}
#menuButton.active .lines {
  background-color: transparent;
}
.lines:before,
.lines:after {
  display: inline-block;
  width: 24px;
  height: 1px;
  background: #FFF;
  position: absolute;
  left: 0;
  content: '';
  -webkit-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  /* easeInOutQuart */
}
.lines:before {
  top: -6px;
}
.lines:after {
  top: 6px;
}
#menuButton.active .lines:before,
#menuButton.active .lines:after {
  -ms-transform-origin: 50% 50%;
  /* IE 9 */
  -webkit-transform-origin: 50% 50%;
  /* Safari */
  transform-origin: 50% 50%;
  top: 0;
  background-color: white;
}
#menuButton.active .lines:before {
  -ms-transform: rotate3d(0, 0, 1, 45deg);
  /* IE 9 */
  -webkit-transform: rotate3d(0, 0, 1, 45deg);
  /* Safari */
  transform: rotate3d(0, 0, 1, 45deg);
}
#menuButton.active .lines:after {
  -ms-transform: rotate3d(0, 0, 1, -45deg);
  /* IE 9 */
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
  /* Safari */
  transform: rotate3d(0, 0, 1, -45deg);
}
/* Nav Hauptmenü
-----------------------------------------------------*/
nav {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.15);
  display: block;
  width: 100%;
  height: 325px;
  top: -325px;
  padding: 20px 16px;
  text-align: center;
  z-index: 50;
  overflow: hidden;
  -webkit-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  /* easeInOutQuart */
}
nav ol,
nav h1 {
  opacity: 0;
  -webkit-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
}
header.open nav {
  top: 0px;
  background-color: #303030;
}
header.open nav ol,
header.open nav h1 {
  opacity: 1;
}
ol {
  list-style: none;
}
.menuActive {
  color: #888;
  text-decoration: underline;
}
nav li a,
footer li a {
  color: #9d9d9d;
  text-decoration: none;
  width: 100%;
  padding: 6px;
  display: block;
  -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
}
nav a::before,
footer a::before {
  background-color: rgba(255, 255, 255, 0);
  -webkit-transition: all 0.4s;
          transition: all 0.4s;
}
nav a:hover::before,
nav a:focus::before,
footer a:hover::before,
footer a:focus::before {
  background-color: rgba(255, 255, 255, 0.15);
}
nav a:hover,
footer a:hover {
  color: white;
}
#menuBranding {
  display: block;
  margin-top: 75px;
  font-size: 11px;
}
/*** submenu **/
.subMenu {
  margin-top: 76px;
  display: block;
  width: 100%;
  background-color: #474747;
  font-size: 18px;
  padding: 16px 24px;
  text-align: center;
  overflow: hidden;
  -webkit-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  /* easeInOutQuart */
}
.subMenu ol li {
  display: inline-block;
}
.subMenu ol li a {
  display: inline-block;
  width: auto;
  padding-left: 12px;
  padding-right: 12px;
}
/* ghost buttons
--------------------------------------------------------------------------------------------------*/
/* Vars
-----------------------------------*/
.ghost-button {
  display: inline-block;
  max-width: 200px;
  min-width: 100px;
  padding: 8px;
  border-radius: 5px;
  text-align: center;
  outline: none;
  text-decoration: none;
  -webkit-transition: border-color 0.3s ease-out, color 0.3s ease-out;
          transition: border-color 0.3s ease-out, color 0.3s ease-out;
  cursor: pointer;
}
.ghost-button.neutral:hover,
.ghost-button.neutral:focus,
.ghost-button.neutral:active {
  color: #ffffff;
  border-color: #ffffff;
  -webkit-transition: border-color 0.4s ease-in, color 0.4s ease-in;
          transition: border-color 0.4s ease-in, color 0.4s ease-in;
  text-decoration: none;
}
.neutral {
  color: #9d9d9d;
  border: 2px solid #9d9d9d;
}
.ghost-button.src:hover,
.ghost-button.src:focus,
.ghost-button.src:active {
  color: #76abca;
  border-color: #76abca;
  -webkit-transition: border-color 0.4s ease-in, color 0.4s ease-in;
          transition: border-color 0.4s ease-in, color 0.4s ease-in;
  text-decoration: none;
}
.src {
  color: #428bca;
  border: 2px solid #428bca;
}
.ghost-button.success:hover,
.ghost-button.success:focus,
.ghost-button.success:active {
  color: #77dd77;
  border-color: #77dd77;
  -webkit-transition: border-color 0.4s ease-in, color 0.4s ease-in;
          transition: border-color 0.4s ease-in, color 0.4s ease-in;
  text-decoration: none;
}
.success {
  color: #0db223;
  border: 2px solid #0db223;
}
.ghost-button.warning:hover,
.ghost-button.warning:focus,
.ghost-button.warning:active {
  color: #ffb347;
  border-color: #ffb347;
  -webkit-transition: border-color 0.4s ease-in, color 0.4s ease-in;
          transition: border-color 0.4s ease-in, color 0.4s ease-in;
  text-decoration: none;
}
.warning {
  color: #ff9600;
  border: 2px solid #ff9600;
}
.ghost-button.cancel:hover,
.ghost-button.cancel:focus,
.ghost-button.cancel:active {
  color: #ff6961;
  border-color: #ff6961;
  -webkit-transition: border-color 0.4s ease-in, color 0.4s ease-in;
          transition: border-color 0.4s ease-in, color 0.4s ease-in;
  text-decoration: none;
}
.cancel {
  color: #a81d01;
  border: 2px solid #a81d01;
}
/* home
--------------------------------------------------------------------------------------------------*/
#bigPicture .code {
  padding-top: 4px;
  color: #a85a4d;
  font-size: 30px;
  background-color: rgba(0, 0, 0, 0.15);
  font-family: dejavu_sans_monobook, sans-serif;
  cursor: pointer;
}
/* Blog
-------------------------------------------------------------------------------*/
.blogItem a {
  display: inline;
}
.area {
  border: 1px solid #2c2c2c;
  border-radius: 8px;
  padding: 16px;
  margin-top: 8px;
  margin-bottom: 16px;
  overflow: hidden;
}
.area label {
  margin-bottom: 4px;
}
.area.nomargin {
  margin: 0px;
}
ul.info-list li {
  width: 100%;
  margin-bottom: 1px;
  font-size: 14px;
}
.source {
  color: #428bca;
  border: 2px solid #428bca;
}
a.source {
  min-width: 80px;
  color: #428bca;
  padding: 0px 4px 0px 4px;
  position: relative;
  display: inline-block;
  outline: none;
  vertical-align: bottom;
  text-decoration: none;
  white-space: nowrap;
  -webkit-transition: all 0.3s;
          transition: all 0.3s;
  z-index: 0;
}
.ghost-button.source:hover,
.ghost-button.source:focus,
.ghost-button.source:active {
  color: #76ABCA;
  border-color: #76ABCA;
  -webkit-transition: border-color 0.4s ease-in, color 0.4s ease-in;
          transition: border-color 0.4s ease-in, color 0.4s ease-in;
  text-decoration: none;
}
.tag {
  padding: 0 4px;
  margin-bottom: 4px;
  margin-left: 4px;
}
iframe {
  max-width: 500px;
  margin-left: auto;
}
code {
  color: #a85a4d;
  background-color: rgba(0, 0, 0, 0.15);
  font-family: dejavu_sans_monobook, sans-serif;
}
.blogItem {
  word-wrap: break-word;
}
.blogItem iframe {
  width: 100%;
  float: none;
  margin-left: auto;
  padding-bottom: 16px;
}
.paginationBtn {
  cursor: pointer;
}
.edit {
  cursor: pointer;
}
.blogContentTextarea {
  width: 100%;
  height: 300px;
}
.checkBoxAdjust {
  margin-top: -4px;
}
/* Blog
-------------------------------------------------------------------------------*/
#projectItems .area {
  cursor: pointer;
}
#projectItems .area h3 {
  text-align: center;
  padding-top: 16px;
}
/*******************/
/* Common style */
.grid figure {
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
  /*min-width: 320px;
  max-width: 480px;*/
  max-height: 360px;
  width: 292px;
  background: #3085a3;
  text-align: center;
  cursor: pointer;
}
.grid figure img {
  position: relative;
  display: block;
  min-height: 100%;
  max-width: 100%;
  opacity: 0.8;
}
.grid figure figcaption {
  padding: 1em;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.25em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.grid figure figcaption::before,
.grid figure figcaption::after {
  pointer-events: none;
}
.grid figure figcaption,
.grid figure figcaption > a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
  z-index: 1000;
  text-indent: 200%;
  white-space: nowrap;
  font-size: 0;
  opacity: 0;
}
.grid figure h2 {
  word-spacing: -0.15em;
  font-weight: 300;
}
.grid figure h2 span {
  font-weight: 800;
}
.grid figure h2,
.grid figure p {
  margin: 0;
}
.grid figure p {
  letter-spacing: 1px;
  font-size: 68.5%;
}
/*---------------*/
/***** Roxy *****/
/*---------------*/
figure.effect-roxy {
  background: -webkit-linear-gradient(45deg, #ff89e9 0%, #05abe0 100%);
  background: linear-gradient(45deg, #ff89e9 0%, #05abe0 100%);
}
figure.effect-roxy img {
  max-width: none;
  width: -webkit-calc(160%);
  width: calc(160%);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-50px, 0, 0);
  transform: translate3d(-50px, 0, 0);
}
figure.effect-roxy figcaption::before {
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;
  border: 1px solid #fff;
  content: '';
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-20px, 0, 0);
  transform: translate3d(-20px, 0, 0);
}
figure.effect-roxy figcaption {
  text-align: left;
}
figure.effect-roxy p {
  padding-top: 1em;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-10px, 0, 0);
  transform: translate3d(-10px, 0, 0);
}
figure.effect-roxy:hover img {
  opacity: 0.7;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
figure.effect-roxy:hover figcaption::before,
figure.effect-roxy:hover p {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
/* Loader
-------------------------------------------------------------------------------*/
.loaderContainer {
  background-color: #303030;
}
.loader {
  color: #29B63C;
  width: 150px;
  height: 150px;
  line-height: 150px;
  margin: 100px auto;
  position: relative;
  box-sizing: border-box;
  text-align: center;
  z-index: 0;
  text-transform: uppercase;
}
.loader:before,
.loader:after {
  opacity: 0;
  box-sizing: border-box;
  content: "\0020";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 100px;
  border: 5px solid #29B63C;
  box-shadow: 0 0 50px #29B63C, inset 0 0 50px #29B63C;
}
.loader:after {
  z-index: 1;
  -webkit-animation: gogoloader 3s infinite 1s;
}
.loader:before {
  z-index: 2;
  -webkit-animation: gogoloader 3s infinite 1s;
}
@-webkit-keyframes gogoloader {
  0% {
    -webkit-transform: scale(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 0;
  }
}
/* Shadowbox
-------------------------------------------------*/
.shadowbox {
  background-color: #303030;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 1000;
}
.loaderBox {
  position: relative;
  margin: 0 auto;
  top: 10%;
  height: 80%;
  overflow: hidden;
}
/* facebook
-------------------------------------------------------------------------------*/
.fb-like {
  display: inline-block;
  float: left;
}
.socialNetworks {
  display: inline-block;
  text-align: center;
  margin: 0 auto;
}
/* google+
-------------------------------------------------------------------------------*/
/* 404
-------------------------------------------------------------------------------*/
/************************** Animation  **************************/
.nameAnimation {
  height: 110px;
  overflow: hidden;
  -webkit-animation: asciiAnimationView 2s;
  animation: asciiAnimationView 2s;
}
.helmigAscii {
  white-space: pre;
  margin: 0;
  padding: 0px;
  border: 0px;
  position: relative;
  text-shadow: 0px 0px 0px lime, 0px 0px 0px red, 0px 0px 0px lime, 0px 0px 0px red;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
#animationBox:hover .helmigAscii {
  text-shadow: 4px 4px 0px #00ff00, -4px -4px 0px #ff0000, 8px 0px 0px #00ff00, -8px 0px 0px #ff0000;
}
.scrollLeft {
  -webkit-animation: asciiAnimationLeft 1s linear 2s infinite alternate;
  animation: asciiAnimationLeft 1s linear 2s infinite alternate;
}
.scrollRight {
  -webkit-animation: asciiAnimationRight 1s linear 2s infinite alternate;
  animation: asciiAnimationRight 1s linear 2s infinite alternate;
}
@-webkit-keyframes asciiAnimationView {
  from {
    height: 0px;
    opacity: 0;
  }
  to {
    height: 110px;
    opacity: 1;
  }
}
@keyframes asciiAnimationView {
  from {
    height: 0px;
    opacity: 0;
  }
  to {
    height: 110px;
    opacity: 1;
  }
}
@-webkit-keyframes asciiAnimationLeft {
  from {
    left: -1px;
    opacity: 1;
  }
  to {
    left: 1px;
    opacity: 0.5;
  }
}
@keyframes asciiAnimationLeft {
  from {
    left: -1px;
    opacity: 1;
  }
  to {
    left: 1px;
    opacity: 0.5;
  }
}
@-webkit-keyframes asciiAnimationRight {
  from {
    left: 1px;
    opacity: 1;
  }
  to {
    left: -1px;
    opacity: 0.5;
  }
}
@keyframes asciiAnimationRight {
  from {
    left: 1px;
    opacity: 1;
  }
  to {
    left: -1px;
    opacity: 0.5;
  }
}
/************************** Media Queries **************************/
/*@media screen and (max-width: 848px) {
  #animationBox{
    height: 220px;

    margin-top:-110px;
    margin-left:-280px;
    display: inline-block;
  }
}

@media screen and (max-width: 565px) {
  #animationBox{
    height: 330px;

    margin-top:-165px;
    margin-left:-160px;
    display: inline-block;
  }
}*/
/* CSS
-------------------------------------------------------------------------------*/
html {
  background: #303031;
}
body {
  color: #9d9d9d;
  font: 14px dejavu_sansbook, sans-serif;
}
footer {
  /*.grid_100{
    padding-top: 18px;
  }*/
  padding-top: 46px;
  padding-bottom: 46px;
}
hr {
  border: solid #2c2c2c 1px;
  height: 1px;
}
a {
  color: #9d9d9d;
  text-decoration: none;
  padding: 6px;
  display: block;
  -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
}
a::before,
a::before {
  background-color: rgba(255, 255, 255, 0);
  -webkit-transition: all 0.4s;
          transition: all 0.4s;
}
a:hover,
a:hover {
  color: white;
}
.desktopOnly {
  display: none;
}
section {
  padding: 4em 1.5em;
}
.sectionGrey {
  background: #383839;
}
article {
  max-width: 900px;
  margin: 0 auto;
  padding-bottom: 1.5em;
}
article.tight {
  max-width: 700px;
}
.fullWidth {
  width: 100%;
}
.topSpace {
  margin-top: 0;
}
.topSpaceFull {
  margin-top: 0;
}
.bottomSpace {
  margin-bottom: 1em;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-align: center;
  margin-bottom: 1em;
  font-weight: normal;
  font-style: normal;
  line-height: 120%;
}
h1 {
  font: 20px dejavu_sansextralight, sans-serif;
}
h3 {
  text-align: left;
}
strong {
  font-family: dejavu_sans_monobold;
}
.text_center {
  text-align: center;
}
.small {
  font-size: 11px;
}
.left {
  float: left;
}
.right {
  float: right;
}
.center {
  margin-left: auto;
}
.clear {
  clear: both;
  height: 0px;
}
.bottomspace {
  padding-bottom: 48px;
}
.bottomspace_small {
  padding-bottom: 16px;
}
.rightspace {
  margin-right: 48px;
}
.rightspace_small {
  margin-right: 16px;
}
.center_txt {
  text-align: center;
}
div.error {
  padding: 16px;
  background-color: rgba(168, 29, 1, 0.55);
  font-size: 14px;
  line-height: 140%;
  margin-bottom: 16px;
}
/* grid
-------------------------------------------------*/
.grid_10,
.grid_15,
.grid_20,
.grid_25,
.grid_30,
.grid_33,
.grid_40,
.grid_50,
.grid_60,
.grid_70,
.grid_75,
.grid_80,
.grid_100 {
  float: left;
  padding: 0px 16px;
  -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
}
.grid_10 {
  width: 10%;
}
.grid_15 {
  width: 15%;
}
.grid_20 {
  width: 20%;
}
.grid_25 {
  width: 25%;
}
.grid_30 {
  width: 30%;
}
.grid_33 {
  width: 33.333333333333333333%;
}
.grid_40 {
  width: 40%;
}
.grid_50 {
  width: 50%;
}
.grid_60 {
  width: 60%;
}
.grid_70 {
  width: 70%;
}
.grid_75 {
  width: 75%;
}
.grid_80 {
  width: 80%;
}
.grid_100 {
  width: 100%;
  float: none;
}
.nopadding {
  padding: 0px;
}
.highpadding {
  padding-left: 32px;
  padding-right: 32px;
}
.unpublished {
  border: solid red 2px;
}
/* Media queries
-------------------------------------------------------------------------------*/
@media screen and (max-width: 570px) {
  input[type=file] {
    width: 75%;
  }
}
@media screen and (min-width: 800px) {
  body {
    font-size: 16px;
  }
  h1 {
    font-size: 28px;
  }
  .topSpace {
    margin-top: 80px;
  }
  .topSpaceFull {
    margin-top: 130px;
  }
  .grid_33 {
    width: 33.333333333%;
    float: left;
    margin-top: 1em;
  }
  section {
    padding: 2em 1.5em;
  }
  nav {
    top: 0px;
    height: 80px;
    background-color: #303030;
    font-size: 18px;
    padding: 16px 24px;
  }
  nav h1 {
    display: none;
  }
  nav li,
  footer li {
    display: inline-block;
  }
  nav li a,
  footer li a {
    display: inline-block;
    width: auto;
    padding-left: 12px;
    padding-right: 12px;
  }
  header.open {
    top: 79px;
  }
  #menuButton {
    display: none;
  }
  header ol {
    opacity: 1;
    padding-top: 6px;
  }
  #menuBranding {
    display: none;
  }
  div.checklist ul li {
    background-position: 0px 4px;
  }
  .mobileOnly {
    display: none;
  }
  .desktopOnly {
    display: block;
  }
  #fbButton {
    display: inline-block;
    float: left;
  }
  #googleButton {
    display: inline-block;
    float: left;
  }
}
/* Print styles
-------------------------------------------------------------------------------*/