/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
  color: #222;
}

body {
  font-size: 1em;
  line-height: 1.4;
}

/*
    * Remove text-shadow in selection highlight: h5bp.com/i
    * These selection declarations have to be separate.
    * Customize the background color to match your design.
    */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
    * A better looking default horizontal rule
    */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
    * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
    */

img {
  vertical-align: middle;
}

/*
    * Remove default fieldset styles.
    */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
    * Allow only vertical resizing of textareas.
    */

textarea {
  resize: vertical;
}

/* ==========================================================================
      Author's custom styles
      ========================================================================== */
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
a {
  color: red;
}
.description {
  font-style: italic;
  font-size: 17px;
  font-weight: 200;
}
body {
  background: #f7f7f7;
  font-size: 14px;
  margin: 22px 0;
}
.container {
  margin: 0 auto;
  overflow: hidden;
  width: 100%;
  padding: 0 20px;
}

@media only screen and (min-width: 600px) {
  .container {
    padding: 0;
    width: 600px;
  }
}

#head-menu {
  background: #444;
  margin: 10px 0 0 0;
  padding: 0;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  border-radius: 3px;
  text-align: center;
}

#head-menu li {
  flex-grow: 1;
}
#head-menu li a {
  border-right: 1px solid #111;
  color: #fff;
  display: block;
  padding: 10px 18px;
  text-decoration: none;
}

#head-menu a:hover {
  background: #555;
}
#content {
  background: #fff;
  border: 1px solid #eee;
  margin: 20px 0;
  padding: 5px 20px;
  border-radius: 3px;
}

.logo-container {
  text-align: center;
}

/* logo-downloadtip {
  margin: auto;
  display: block;
} */

/* ==========================================================================
      Helper classes
      ========================================================================== */

/*
    * Hide from both screenreaders and browsers: h5bp.com/u
    */

.hidden {
  display: none !important;
  visibility: hidden;
}

/*
    * Hide only visually, but have it available for screenreaders: h5bp.com/v
    */

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/*
    * Extends the .visuallyhidden class to allow the element to be focusable
    * when navigated to via the keyboard: h5bp.com/p
    */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

/*
    * Hide visually and from screenreaders, but maintain layout
    */

.invisible {
  visibility: hidden;
}

/*
    * Clearfix: contain floats
    *
    * For modern browsers
    * 1. The space content is one way to avoid an Opera bug when the
    *    `contenteditable` attribute is included anywhere else in the document.
    *    Otherwise it causes space to appear at the top and bottom of elements
    *    that receive the `clearfix` class.
    * 2. The use of `table` rather than `block` is only necessary if using
    *    `:before` to contain the top-margins of child elements.
    */

.clearfix:before,
.clearfix:after {
  content: ' '; /* 1 */
  display: table; /* 2 */
}

.clearfix:after {
  clear: both;
}

/*
    * For IE 6/7 only
    * Include this rule to trigger hasLayout and contain floats.
    */

.clearfix {
  *zoom: 1;
}