main a:link:hover, main a:visited:hover {
  text-decoration: none;
  outline: solid 0.1em;
}

.symbol {
  display: inline-block;
  margin-right: 5%;
  margin-bottom: 1em;
}

body {
  background-color: #A6BDA5;
  color: #292929;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "archivo narrow",helvetica,sans-serif;
}

h1 {
  color: #215A3B;
}

h2 {
  color: #205A1E;
}

h1 {
  margin-top: 1em;
}

h2 {
  margin-top: 1em;
  margin-bottom: 0.9em;
}

p {
  margin-bottom: 1em;
}

nav {
  border-top: 0.3em solid #205A1E !important;
  box-shadow: 0 0.15em 0.15em rgba(0, 0, 0, 0.3);
}

nav h1 {
  margin: inherit;
}

.navbar {
  min-height: 5em;
}

.navbar-brand {
  padding-top: 0.4em;
}

main .row, footer .row {
  padding-top: 2em;
  padding-bottom: 2.5em;
}

main .row:first-child {
  padding-top: 9em;
}

main .row:nth-child(2n+1) {
  background-color: #FFFFFF;
}

main .row:nth-child(2n) {
  background-color: #EDF1ED;
}

footer, .divider {
  text-align: center;
  background-color: inherit !important;
}

main [href^="#"]::after {
  font-size: 80%;
  vertical-align: text-top;
  content: " #"
}

*:target{
  outline: 0.15em solid rgba(0, 0, 0, 0.3);
  outline-offset: 8px;
}

figure {
  text-align: center;
}
figure img {
  margin: auto;
  max-width:100%;
}

#slider {
    max-width: 640px;
    height: 320px;
    margin: 20px auto 50px;
    position: relative;
}

#slider img {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    width: 100%;
    max-height:320px;
  
    border: 8px solid #fff;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
}

#slider img:target {
    opacity: 1;
    -webkit-transition: all 1.5s ease-in-out;
    -moz-transition: all 1.5s ease-in-out;
    -ms-transition: all 1.5s ease-in-out;
    -o-transition: all 1.5s ease-in-out;
    transition: all 1.5s ease-in-out;
}

#slider img#ten {
    opacity: 1;
 }

#slider img:not(:target), #slider img:target ~ img#ten  {
  opacity: 0;
}


/* Navigation */

#slider ul{
  position: absolute;
  width: 100%;
  text-align:center;
  bottom: -65px;
  padding:0;
}

#slider ul li {
  display: inline-block;
  margin: 0 .5em;
}

#slider ul li a{
  margin: 0;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  height: 15px;
  width: 15px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;  
  background: #ccc;

}

#slider ul li a[href="#ten"] {
  /* by default set ten to be selected */
  background: #777;
}

#one:target ~ ul li a[href="#one"],
#two:target ~ ul li a[href="#two"],
#three:target ~ ul li a[href="#three"],
#four:target ~ ul li a[href="#four"],
#five:target ~ ul li a[href="#five"],
#six:target ~ ul li a[href="#six"],
#seven:target ~ ul li a[href="#seven"],
#eight:target ~ ul li a[href="#eight"],
#nine:target ~ ul li a[href="#nine"],
#ten:target ~ ul li a[href="#ten"]{
  /*when #id is the target set the link to change to selected color*/
  background: #777;
}

#one:target ~ ul li a[href="#ten"],
#two:target ~ ul li a[href="#ten"],
#three:target ~ ul li a[href="#ten"],
#four:target ~ ul li a[href="#ten"],
#five:target ~ ul li a[href="#ten"],
#six:target ~ ul li a[href="#ten"],
#seven:target ~ ul li a[href="#ten"],
#eight:target ~ ul li a[href="#ten"],
#nine:target ~ ul li a[href="#ten"]{
  /*set default selected color of ten to change to unselected when any other slide is the target  */
   background: #ccc;
}