/*********************
GENERAL STYLES
*********************/
body {
  font-family: karmina-sans, sans-serif;
  font-size: 100%;
  line-height: 1.5;
  color: rgba(60, 60, 60, 1); 
}

#menu ul {
  padding: 0;
  margin: 0;
  list-style-type: none; 
}

img {
  max-width: 100%;
  height: auto;
  margin: 0;
  vertical-align: middle; 
}

.splashimg {
  width: 100%; 
}

.indeximg {
  width: 100%; 
}

.image {
  text-align: center; 
}

.img-deck {
  border: 1px solid rgba(74, 74, 74, 1);
  margin-bottom: 1em;
}

.content {
  margin-top: 1.45em;
  margin-bottom: 2em;
}

figcaption {
  font-family: karmina, serif;
  text-align: center;
  font-style: italic;
}

.inner-container {
  margin-top: 2em;
}

/*********************
LINK STYLES
*********************/
a, a:visited {
  color: rgba(86,86,86,1);
  -webkit-transition: color 0.2s;
  -moz-transition: color 0.2s;
  -ms-transition: color 0.2s;
  -o-transition: color 0.2s;
  -transition: color 0.2s;
  transition: color 0.2s;
  /* on hover */
  /* on click */
  /* mobile tap color */ }
  a:hover, a:focus, a:visited:hover, a:visited:focus {
    color: rgba(220, 66, 0, 1); }
  a:link, a:visited:link {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3); }

::-moz-selection {
  background: rgba(250, 205, 130, 1);
  text-shadow: none; 
}

::selection {
  background: rgba(250, 205, 130, 1);
  text-shadow: none; 
}

/*********************
HEADING STYLES
*********************/
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
  font-family: karmina, serif;
  text-rendering: optimizelegibility;
  font-weight: 400;
}

h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a {
  text-decoration: none; 
}

h1, .h1 {
  font-size: 2.5em;
  line-height: 1.333em; 
}

h2, .h2 {
  font-size: 1.5em;
  line-height: 1.15em;
  margin: 0.4em 0 0 0; 
}

h3, .h3 {
  font-size: 1.2em;

}

/*********************
HEADER STYLES
*********************/
/*#logo {
  text-align: center;
  margin-top: 1em; }

#logo img {
  max-width: 200px;
  opacity: 0.8; }*/

/*********************
NAVIGATION STYLES
*********************/
/*a.nav-toggle {
  display: block;
  padding: 0.5em;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  margin: 1em auto 0 auto;
  color: rgba(77,77,77,1);
  font-weight: 300; 
}

a.nav-toggle:hover, a.nav-toggle:focus {
  color: rgba(249,174,74,1);
  outline: none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  -transition: all 0.3s;
  transition: all 0.3s; 
}*/

#menu {
  /*font-family: karmina, serif;*/
  margin: 0 auto;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  -ms-transition: all 0.35s;
  -o-transition: all 0.35s;
  -transition: all 0.35s;
  transition: all 0.35s; 
}

#menu.active {
  max-height: 25em; 
}

#menu li {
  border-bottom: 1px solid rgba(204, 204, 204, 1); 
}

#menu li:last-child {
  border-bottom: 0; 
}

#menu li a {
  text-align: center;
  display: block;
  text-decoration: none;
  padding: 0.5em;
  background-color: rgba(238, 238, 238, 1); 
}

.about {
  text-align: center;
  font-style: italic;
  line-height: 1;
  font-size: 1em;
  color: rgba(204, 204, 204, 1);
  padding: 1em 1em 0 1em;
}

figure {
  margin: 0 0 1em 0;
  padding: 0;
}

figcaption {
  font-size: 0.9em;
  /*color: rgba(204, 204, 204, 1);*/
}

/*********************
DESKTOP
*********************/

@media (min-width: 768px) {
  /*a.nav-toggle {
    display: none; 
  }*/

  #menu {
    padding-top: 1em; 
  }
  #menu li {
    border: none; 
  }

  #menu li a {
    text-align: right;
    padding: 0.25em;
    background-color: rgba(255, 255, 255, 1); 
  }

  .first {
    margin-left: 0; 
  }

  .last {
    float: right; 
  }

  .about {
    text-align: right;
    padding: 1em 0 0 0;
  }

  .content {
    margin-left: 220px;
  }

  .indeximg {
    max-width: 400px;
  }

  .navigation {
  float: left;
  /*width: 22.9%;
  max-width: 200px;*/
  width: 200px;
  text-align: right;
  padding: 0;
  position: fixed;
  }

}