@charset "UTF-8";
/*
===============================$GLOSSARY==============================
For quick traversal use the find command (mac: cmd + f,
windows: cntrl + f) and search for $SECTION_NAME.

$GENERAL
$TYPOGRAPHY

$SITE_HEADER
$SITE_FOOTER
$MAIN_NAV
$SITE_SECTION

$NO_JS_MSG_MODULE
$SIDE_BAR_MODULE
$RESUME_DOWNLOAD_LIST
$CONTACT_STAMPS
$SHOWCASE_MODULE
$BACK_TO_TOP_BTN
$MINI_CAROUSEL
======================================================================




==========================$CODE_STYLE_GUIDE===========================
1. Use BEM-like naming convention.
  - .block__object--modifier{}
2. Do NOT use IDs.
  - they are a pain to deal with.
3. Keep css selectors concise.
  - bad: .section h1 p a small .sub-string
  - good: .title
4. Decouple class names from appearances.
  - bad: .blue-title
  - good: . primary-title
5. Keep components modular.
  - reusability is usually a good thing.
6. Prefix layout classes with l-
  5a. In spirit of modularity separate style from layout
    - bad: .slide-show
    - good: .slide-show .l-slideshow--index
7. Use dashes instead of underscores where applicable
8. Use comments
  - comment templates are graciously provided, PLEASE use them!
  - You WILL NOT remember why you did something the way you did
    5 months from now. Trust me.
9. Prefix javascript hooks with .js-
  - DO NOT use these as style hooks unless absolutely necessary!
10. DO NOT style javascript hooks. Use a different class!
  - bad: .js-hook{color:red;}
  - Note that there are cases where this rule must be broken. In
    those situations it is excusable but for most cases dont do it.
      - ie adding a class with javascript to change styles.
11. Alphabetize properties.
  - exception: any property that affects layout (ie padding). In
    those cases order the properties in the order they are applied
    to an element (top, right, bottom, left).
12. Lowercase hexcode color values.
13. Try to avoid using 'wrapper' and 'container' when naming classes.
  - It's to hard to keep the difference between the two straight.
14. Pick names that make sense.
  - bad: .bsd .gt4 .xyz
  - good: .header
15. If you add a section to the styles update the glossary.
16a. How to calculate total bottom margin of text
  - bottom leading = (font-size - lineheight) / 2
  - total bottom white space = bottom leading + x
    - x = whatever margin you need to add.
  - for more details: http://stackoverflow.com/questions/23247467/how-css-line-height-is-measured
16b. Know your line heights
  - lineheight is the minimum height of a line box. A line box
    wraps a row of text. The spacingbetween lines of text (leading)
    is created when the lineheight is tall enough to push the two
    line boxes apart.
  - I think line height originates from the middle of the line box
    which means it includes ascenders and descenders.
======================================================================



==========================$COMMENT_TEMPLATES==========================
/*---------------------------------*\

  $SECTION_TITLE
  [title comment]
  [$ followed by all caps]
  [underscores]

\*---------------------------------*/

/* Section title comment
====================================================================*/

/**
 * @description: doxygen style comment block. Dont write books with
 *  these. Keep line length reasonable, you shouldnt have to scroll
 *  horizontally to read a comment.
 */

/* basic comment */

/* #em = desired / current */

/*==================================================================*/





/*---------------------------------*\

  $GENERAL
  [general styles and classes]
  [this section must come before
   any other section]

\*---------------------------------*/
:root {
  --primaryColor: #7ab342;
}

html {
  width: 100%;
  height: 100%;
  font-size: 10px;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
  width: 100%;
  height: 100%;
  position: relative;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 1.6rem;
  line-height: 1.5;
  color: #ffffff;
  /* background-color: var(--primaryColor); */
  background: linear-gradient(-25deg, #598230 0%, var(--primaryColor) 100%);
}

main {
  max-width: 505px;
  text-align: center;
}

h1 {
  margin: 0;
  font-size: 3.6rem;
}

a {
  color: var(--primaryColor);
  text-decoration: none;
}

a:link {
  color: var(--primaryColor);
}

a:visited {
  color: var(--primaryColor);
}

a:hover {
  text-decoration: underline;
}

.not-list {
  margin: 0;
  padding: 0;
  list-style: none outside none;
}





/*---------------------------------*\

  $MAIN
  [the main content]

\*---------------------------------*/
main h1 {
  margin-bottom: 15px;
  line-height: 1;
  text-align: center;
}

main h1 img {
  display: inline-block;
  width: 250px;
}

.call-to-action {
  margin: 25px 0 0 0;
}

.call-to-action p {
  margin-bottom: 8px;
}





/*---------------------------------*\

  $SITE_FOOTER
  [site-wide footer styles]

\*---------------------------------*/
.site-footer {
  padding: 0 25px 10px;
  font-size: 1.2rem;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}





/*---------------------------------*\

  $CONTACT_STAMPS
  [styles for contact links]

\*---------------------------------*/
.contact-stamps {
  display: flex;
  justify-content: center;
}

.contact-stamps li {
  margin-right: 9px;
}

.contact-stamps li:last-child {
  margin-right: 0;
}

.contact-stamps li a {
  display: block;
  width: 42px;
  height: 42px;
  text-indent: -9000px;
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background-repeat: no-repeat;
  transition: border 320ms, background-color 320ms;
}

.contact-stamps li a:hover {
  background-color: #ffffff;
}

/* email */
.contact-stamps li.contact-stamp--email a {
  background-image: url(../img/icon-email.svg);
  background-position: center 13px;
  background-size: 22px 200px;
}

.contact-stamps li.contact-stamp--email a:hover {
  background-position: center -87px;
}

/* linkedin */
.contact-stamps li.contact-stamp--linkedin a {
  background-image: url(../img/icon-linkedin.svg);
  background-position: center 8px;
  background-size: 22px 200px;
}

.contact-stamps li.contact-stamp--linkedin a:hover {
  background-position: center -92px;
}