/*=============================================>>>>>
= Site Styles ( Every Page ) =
===============================================>>>>>*/

/* Dark-Blue Background */
body { background-color: #002c73; }

/*----------- Site Wrapper -----------*/
.wrapper {
  /* Spaces out the edges of the site */
  margin: 16px;
}


/*----------- Site Header -----------*/
  .header__link,
  .header__logo {
    /* Properly holds <a> & removes extra pixels from <img> */
    display: block;
    /* Ensures <img> is responsive */
    max-width: 100%;
    height: auto;
    border: 1.5px solid #333;
    -webkit-border-radius: 3px;
    margin 0 4px;
  }
  .header__title {
    text-transform: capitalize;
  }


/*----------- Site Navigation -----------*/
.navigation {
  /* IE 8 - Uknown Number of Links */
  display: table;
  table-layout: inherit;
  width: 100%;
}
  .navigation__list {
    /* Reset List Style */
    list-style: none;
    padding-left: 0;
    /* Responsive Table Grid */
    display: table-row;
  }
    .navigation__item {
      /* Responsive Table Cell */
      display: table-cell;
      text-align: center;
    }
      .navigation__link {
        /* CSS RESET */
        text-decoration: none;
        /* Block Button */
        box-sizing: border-box;
        display: block;
        /* Link Button Styles */
        padding: 8px 4px;
        background-color: #001f52;
        color: #EEE;
        /* Transition Colors for Modern Browsers */
        transition: background-color 200ms ease-out, color 200ms ease-out;
        border: 1.5px solid #333;
        -webkit-border-radius: 3px;
      }
        .navigation__link:hover,
        .navigation__link:focus,
        .navigation__link:active {
          background-color: #CCC;
          color: #222;
        }


/*= Site Styles ( Every Page ) =*/
/*=============================================<<<<<*/



/*=============================================>>>>>
= Comics Section Styles =
===============================================>>>>>*/

  .comic-section__title {
    /* Reset <h2> styles */
    margin-top: 0;
    margin-bottom: 0;
  	font-size: 100%;
    font-weight: bold;
    color: #EEE;
    text-shadow: 0 0 2px 0 black;
  }
  .comic-section__content {
    /* Adds spacing to compensate for caption being removed from flow */
    /* Adjust according to font size */
    margin-bottom: 18px;
  }

    .comic-section__comic {
      /* CSS Reset for <figure> */
      display: block;
      margin: 0;
    }
      .comic-section__image {
        /* Removes space from just below the <img> tag */
        display: block;
        /* Ensures <img> is responsive */
        max-width: 100%;
        height: auto;
      }
      .comic-section__caption {
        position: absolute;
        bottom: -18px;
        left: 0;
        right: 0;
        color: #BBB;
      }

    .comic-section__prev,
    .comic-section__next {
      /* Icon Spacing */
      box-sizing: border-box;
      padding-left: 8px;
      padding-right: 8px;

      /* Link Visuak Styles */
      /* IE 8 Solid Colors only */
      background-color: #222;
      /* Modern Browsers */
      background-color: rgba( 0, 0, 0, .05 );
      color: #FFFFFF;

      /* Hides Button Visibility until hovered or used */
      /* IE 8 Opacity */
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      /* Modern Opacity */
      opacity: 0;

      transition: 150ms opacity ease-out;
    }
      /* Creates a fade-in effect, or a cut on IE8 */
      .comic-section__prev:hover,
      .comic-section__prev:focus,
      .comic-section__prev:active,
      .comic-section__next:hover,
      .comic-section__next:focus,
      .comic-section__next:active {
        /* IE 8 Opacity */
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        /* Modern Opacity */
        opacity: 1;
      }

  .comic-section__social-sharing {
    /* Create gap from content */
    margin-top: 32px;
    color: #EEE;
  }
/*= End of Comics Section Styles =*/
/*=============================================<<<<<*/