/* CSS reset � best to start from scratch */
   html,
   body,
   div,
   span,
   applet,
   object,
   iframe,
   h1,
   h2,
   h3,
   h4,
   h5,
   h6,
   p,
   blockquote,
   pre,
   a,
   abbr,
   acronym,
   address,
   big,
   cite,
   code,
   del,
   dfn,
   em,
   font,
   img,
   ins,
   kbd,
   q,
   s,
   samp,
   small,
   strike,
   strong,
   sub,
   sup,
   tt,
   var,
   b,
   u,
   i,
   center,
   dl,
   dt,
   dd,
   ol,
   ul,
   li,
   fieldset,
   form,
   label,
   legend,
   table,
   caption,
   tbody,
   tfoot,
   thead,
   tr,
   th,
   td {
       margin: 0;
       padding: 0;
       border: 0;
       outline: 0;
       text-decoration: none;
   }

   body {
       height: 100%;
       min-height: 600px;
       width: 100%;
       font-family: 'Share Tech Mono', monospace; 
       font-size: 1.4em;
   }

   *,
   *:after,
   *:before {
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
       box-sizing: border-box;
       text-align: center;
   }

   header,
   nav,
   footer,
   section {
       display: block;
   }

   header {
       height: 120vh;
   }

   header:after {
       content: "";
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       background-size: cover;
       background: url(/../images/logo.png) no-repeat center center fixed;
       opacity: 0.4;
   }

   #wrapper {
       margin: 30px auto 0;
       text-align: center;
   }

   footer {
       color: #aaa;
       text-align: center;
       margin: 2em auto;
       width: 100%;
   }

   .footer-links {
       padding: 1em;
   }

   h1 {
       font-size: 30vh;
       font-family: 'Nova Mono', monospace;
   }

   h2 {
       font-size: 4em;
   }

   h3 {
       margin-top: 1em;
   }

   p {
       margin-bottom: 0.5em;
   }

   li {
       margin-bottom: 1em;
   }

   #wrapper nav {
       padding: 1em 0;
       width: 100%;
   }

   #wrapper nav ul {
       list-style: none;
       text-align: center;
   }

   .horizontal-list li {
       display: inline-block;
       padding: 0 1em;
   }

   #content {
       height: 100%;
   }

   #content>div {
       height: 100vh;
       min-height: 400px;
       padding-top: 2vh;
       padding-bottom: 2vh;
       position: relative;
       overflow: hidden;
   }

   #content>hr {
       height: 5vh;
       min-height: 30px;
       border: none;
       background: none;
   }

   .button {
       cursor: pointer;
   }


   @media (max-aspect-ratio: 4/3) {
       .circle {
           font-weight: bolder;
           font-size: 3vw;
           line-height: 1em;
           width: 20vw;
           height: 20vw;
           -moz-border-radius: 50%;
           -webkit-border-radius: 50%;
           border-radius: 50%;
           text-align: center;
           vertical-align: middle;
           position: relative;
       }


       .circle::after {
           content: '';
           width: 20vw;
           height: 20vw;
           top: 0;
           bottom: 0;
           left: 0;
           right: 0;
           border: 2vw solid black;
           -moz-border-radius: 50%;
           -webkit-border-radius: 50%;
           border-radius: 50%;
           text-align: center;
           vertical-align: middle;
           position: absolute;
           z-index: 2;
       }

       .circle div {
           height: 18vw;
           width: 18vw;
           padding-top: 2vw;
           display: table-cell;
           vertical-align: middle;
       }

       .circle.small {
           width: 15vw;
           height: 15vw;
           font-size: 2vw;
       }

       .circle.small::after {
           width: 15vw;
           height: 15vw;
           border: 1.5vh solid black;
       }

       .circle.small div {
           height: 13vw;
           width: 13vw;
           padding-top: 2vw;
           display: table-cell;
           vertical-align: middle;
       }
   }

   @media (min-aspect-ratio: 4/3) {
       .circle {
           font-weight: bolder;
           font-size: 4vh;
           line-height: 1em;
           width: 25vh;
           height: 25vh;
           -moz-border-radius: 50%;
           -webkit-border-radius: 50%;
           border-radius: 50%;
           text-align: center;
           vertical-align: middle;
           position: relative;
       }

       .circle::after {
           content: '';
           width: 25vh;
           height: 25vh;
           top: 0;
           bottom: 0;
           left: 0;
           right: 0;
           border: 2vh solid black;
           -moz-border-radius: 50%;
           -webkit-border-radius: 50%;
           border-radius: 50%;
           text-align: center;
           vertical-align: middle;
           position: absolute;
           z-index: 2;
       }

       .circle div {
           height: 23vh;
           width: 23vh;
           padding-top: 2vh;
           display: table-cell;
           vertical-align: middle;
       }

       .circle.small {
           width: 15vh;
           height: 15vh;
           font-size: 2vh;
       }

       .circle.small::after {
           width: 15vh;
           height: 15vh;
           border: 1.5vh solid black;
       }

       .circle.small div {
           height: 13vh;
           width: 13vh;
           padding-top: 2vh;
           display: table-cell;
           vertical-align: middle;
       }
   }

   .circle:hover::after {
       border-left-color: dimgrey;
       border-right-color: dimgrey;
       border-top-color: darkgrey;
   }

   .stroke {
       color: white;
       text-shadow: -1px -1px 0 #000,
           1px -1px 0 #000,
           -1px 1px 0 #000,
           1px 1px 0 #000;
   }

   .blue {
       background: #0039bb;
   }

   .yellow {
       background: #ffe400;
   }

   .red {
       background: #cd0000;
   }

   .grey {
       background: #999999;
   }

   .download-icon {
       fill: #0000ff;
   }

   .download-link {
       position: absolute;
       width: 100%;
       bottom: 6vh;
   }

   .download-link a {
       font-size: 2em;
       vertical-align: top;
   }

   .circle.disabled {
       border: none;
   }

   .disabled:before {
       content: "";
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       background: #fff;
       opacity: 0.75;
       top: 0;
       left: 0;
       bottom: 0;
       right: 0;
       position: absolute;
       z-index: 10;
   }

   #hbv:after,
   #dir:after {
       content: "";
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       opacity: 0.4;
       top: 0;
       left: 0;
       bottom: 0;
       right: 0;
       position: absolute;
       z-index: -1;
   }

   #hbv:after {
       background: url(/../images/hbv.png) no-repeat center center fixed;
       background-size: cover;
   }

   #dir:after {
       background: url(/../images/dir.png) no-repeat center center fixed;
       background-size: cover;
   }

   #cmb {
       background: #eee;
   }

   #donate {
       height: calc(100vh - 5.5em) !important;
   }

   #donate-form {
       padding-top: 4em;
       width: 100vw;
       -ms-transform: scale(1.2, 1.2);
       /* IE 9 */
       -webkit-transform: scale(1.2, 1.2);
       /* Safari */
       transform: scale(1.2, 1.2);
   }