body {
    background-image: url("ep_naturalwhite.png"), url("pink_rice.png");
    background-repeat: repeat-x, repeat;
}


h1 {
    color:black;
    text-align: center;
    font-family:futura;
}

p {
    font-family: FUTURA;
    font-size: 20px;
    text-align: center;
}

  
#nav {
width:750px;
margin:0 auto;
list-style:none;
}
#nav li {
float:center;
}
#nav a {
display:block;
text-align:center;
width:150px; /* fixed width */
text-decoration:none;
font-family: Futura;




* 
  box-sizing: border-box

html, body
  height: 100%
  min-height: 600px

body
  background-color: #222224
  background-image: linear-gradient(#17191f,#252a35)
  height: 100%
  font-family:  'roboto','helvetica neue', arial, sans-serif

.carousel 
  position: relative
  width: 600px
  height: 400px
  overflow: hidden
  margin: 0 auto
  box-shadow: 0 2px 6px rgba(0,0,0,0.3)
  
  &:hover
    .slide:after,
    .counter,
    .slide:before
      opacity: 1

.slide 
  float: right
  position: absolute
  z-index: 1
  width: 600px
  height: 400px
  background-color: #eee
  text-align: center
  transition: opacity 0.4s
  opacity: 1

  &:before
    content: attr(annot)
    display: block
    position: absolute
    left: 20px
    bottom: 20px
    color: rgba(255,255,255,0.9)
    font-size: 14px
    font-weight: 300
    z-index: 12
    opacity: 0
    transition: opacity 0.3s
    text-shadow: 0 0 1px black
  
  &:after
    content: attr(slide)
    display: block
    position: absolute
    bottom: 0
    transition: opacity 0.3s
    width: 100%
    height: 80px
    opacity: 0
    background-image: linear-gradient(transparent, rgba(0,0,0,0.5))
    text-align: left
    text-indent: 549px
    line-height: 101px
    font-size: 13px
    color: rgba(255,255,255,0.9)
    text-shadow: 0 0 1px black

.counter
  position: absolute
  bottom: 20px
  right: 1px
  height: 20px
  width: 60px
  z-index: 2
  text-align: center
  color: #fff
  line-height: 21px
  font-size: 13px
  opacity: 0
  transition: opacity 0.3s

.faux-ui-facia 
  top: 0
  right: 0
  float: right
  position: absolute
  margin-top:0
  z-index: 9
  height: 100%
  width: 100%
  opacity: 0
  cursor: pointer
  
  &:checked 
    z-index: 8
  
    + .slide 
      opacity: 0

    &:nth-child(1):checked
      z-index: 9
    
  &:nth-child(1):checked
    float: left
    z-index: 9
    
    + .slide
        opacity: 1
    
    ~ .faux-ui-facia
      float: left
      z-index: 8

      + .slide
        opacity: 0
      
      &:checked
        z-index: 9

        + .slide
          opacity: 1


/* --- Intro text --- */
.intro
  padding: 80px 0 60px 0
  text-align: center
  color: #fff
  margin: auto
  width: 800px

  .intro__title 
    font-weight: 200
    font-size: 32px
    color: #fff

  .intro__body
    color: #fff
    font-size: 16px
    line-height: 24px
    font-weight: 300
    opacity: 0.48
    padding: 0 160px
    margin: 0