/* -------------------- */
/*   Header Styleguide  */
/* -------------------- */

#header-styleGuide{
  background: #04825B;  
  height: 50%;
  padding: 1em 0;
}

.header-styleGuide-wrap{
  text-align: center;
  margin: 9rem auto;
  width: 50%;
    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
}

.header-styleGuide-wrap h1{
  color: #FFF;
  line-height: 115%;
  margin-bottom: 0.7em;
}

.header-styleGuide-wrap p{
  color: #FFF;
  font-family: "Lora";
  font-weight: 300;
  font-size: 16px;
  width: 75%;
  margin: 0 auto;
  line-height: 175%;
}

.styleguide h1, .styleguide h2, .styleguide h3, 
.styleguide h4, .styleguide h5, .styleguide h6{
  font-family: "Open Sans";
  /*color: #555;*/
  text-transform: none;
}

.styleGuide h2{
  margin-bottom: 0rem;
}

/* ------------------- */
/*   Header Citations  */
/* ------------------- */

#header-citations{
  background: #F6B710;  
  height: 23rem;
  padding: 1em 0;
}

.header-citations-wrap{
  text-align: center;
  margin: 4rem auto;
  width: 800px;
    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
}

.header-citations-wrap h1{
  color: #FFF;
  font-size: 68px;
  line-height: 115%;
  margin-bottom: 10px;
}

.header-citations-wrap p{
  color: #FFF;
  font-family: "Lora";
  font-weight: 300;
  font-size: 16px;
  width: 600px;
  margin: 0 auto;
  line-height: 175%;
}

.grid-col{
  display: inline-block;
  text-align: left;
  margin-right: 5em;
}

/* --------------------- */
/*   Table of Contents   */
/* --------------------- */

#TOC-styleGuide {
  margin: 0 auto; 
  text-align: center;
  padding: 2em 0;
  border-bottom: 0.4em solid #DDDDDD;
  border-top: 0.4em solid #333;
  background-color: #444; 
  margin-bottom: 3em;
}

#TOC-styleGuide ul{
  padding: 0;
  line-height: 170%;
  list-style-type: none;
  color: #FFF;
}

#TOC-styleGuide a{
  font-weight: 400;
  color: #EEE;
  font-size: 14px;
  transition: color 0.2s ease;
    text-decoration: none;
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

#TOC-styleGuide a:hover, #TOC-styleGuide a:focus {
  text-decoration: none;
  color: orange;
}

#TOC-styleGuide li span{
  position: relative;
  left: -0.9em;
}

#TOC-styleGuide p{
  color: #FFF;
  font-family: "Open Sans";
  font-weight: 700;
  font-size: 14px;
   -webkit-animation: fadein 1.5s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1.5s; /* Firefox < 16 */
        -ms-animation: fadein 1.5s; /* Internet Explorer */
         -o-animation: fadein 1.5s; /* Opera < 12.1 */
            animation: fadein 1.5s;
}

/* ------------------- */
/*       Sections      */
/* ------------------- */

.sections-styleGuide{ 
  border-bottom: 0.1em dotted #aaa;
  margin: 3em 0;
  padding-bottom: 2rem;
}

/* =============================== */
/*             COLORS              */
/* =============================== */

.swatch-preview {
    border-top: 0.1em solid rgba(0, 0, 0, 0.1);
    border-bottom: 0.1em solid rgba(0, 0, 0, 0.1);
    display: block;
    height: 3.5em;
    width: 100%;
    /*margin: 0 0.8em 0.5em 0;*/
}

.grid-item{
  color: #FFF;
  background-color: #bbb;
  margin: 1em 0;
  padding: 0.8em;
}

.grid-color{
  /*  float: left;
    display: block;
    width: 90%;
    margin-bottom: 3em;*/
    box-shadow: 0 0 0.1em rgba(0, 0, 0, 0.5)
  }

/*.grid-color:last-of-type{
    margin-right: 0%;
  }*/

/*.swatch-preview::after{
  content: " ";
  display: block;
  clear: both;
}*/

.noBullet li, .noBullet ul{
    list-style-type: none;
    margin-left: -1em;
    padding: 0;
}

#colors h3{
  color: #000;
}

/* =============================== */
/*          TEXT ELEMENTS          */
/* =============================== */

/* ------------ */
/*   Headings   */
/* -------------*/

.units{
  color: #AAA;
}

.headings h1{
  text-align: left;
  font-family: "Open Sans";
  /*text-transform: uppercase;*/
}

.headings h2{
  text-align: left;
  font-family: "Open Sans";
  /*text-transform: uppercase;*/
}

.headings h3{
  text-align: left;
  font-family: "Open Sans";
  /*text-transform: uppercase;*/
}

.headings h4{
  text-align: left;
  font-family: "Open Sans";
  /*text-transform: uppercase;*/
}

.headings h5{
  text-align: left;
  font-family: "Open Sans";
  /*text-transform: uppercase;*/
}

.headings h6{
  text-align: left;
  font-family: "Open Sans";
  /*text-transform: uppercase;*/
}

/* =================================== */
/*          COMBINED ELEMENTS          */
/* =================================== */

/* ------------------- */
/*        Nav Bar      */
/* ------------------- */

.nav-main-styleGuide{
  background-color: rgba(255,255,255,0.95);
  border-top: 0.4em solid rgba(255,255,255,0);
  border-bottom: 0.1em solid #ccc;
}

/* ------------------- */
/*   Product Listing   */
/* ------------------- */

.sections-styleGuide .grid-1-3 img {
  width: 90%;
  height: 12em;
  background-color: #DDD;
  border: 0.1em solid #FFF;
  -webkit-transition: background-color 0.1s ease-out;
  transition: background-color 0.1s ease-out;
}

.sections-styleGuide .grid-1-3 img:hover {
  border: 0.1em solid #aaa;
}

/* --------------- */
/*       Form      */
/* --------------- */

.sections-styleGuide #shortForm{
  margin: 0;
}
/* ---------------- */
/*       Code       */
/* ---------------- */

section code {
  background-color: #f5f5f5;
  padding: 1em 2em;
  display: block;
  font-size: 12px;
  margin: 1.25rem 0;
}

/* ---------------- */
/*    Citations     */
/* ---------------- */

ul.citations {
  margin-left: 0.25em;
  padding-left: 0.25em;
}

ul.citations li {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
  padding-bottom: 1em;
}

ul.citations li strong {
  font-weight: normal;
  font-style: italic;
}

cite {
  font-style: normal;
}