@import "reset.css"

$theme = #e5605c;

a
  color $theme
  text-decoration none

.clear
  clear both

body
  font-family Georgia, Helvetica
  color lighten(black, 30)

  > header
    position fixed
    top 0
    left 0
    width 100%
    z-index 100

    nav
      display block
      text-align center
      margin 0 auto
      max-width 1080px
      background rgba($theme, 0)
      box-shadow 0 0 10px rgba(black, .3)
      border-radius 0 0 20px 20px
      background rgba(white, .7)
      transition background .5s linear

      h1
        display inline
        img
          vertical-align middle
      a
        background rgba(white, 0)
        color $theme
        font-weight bold
        font-style italic
        float left
        width 195px
        height 80px
        line-height 80px
        transition background .2s linear
        &:hover
          background rgba(white, .3)

        &.logo
          width 300px

  &.scroll
    > header nav
      background white
section
  padding 5em 0 3em 0
  border-bottom 10px solid darken($theme, 10)
  h1
    font-size 2em
    font-weight bold
    color $theme
    text-align center
    margin 0 0 1em 0
  h2
    font-size 1.5em
    font-weight bold
    margin 1em 0 .5em 0

  .container
    max-width 1080px
    margin 0 auto

#carousel
  padding 0
  .container
    height 800px
    width 100%
    max-width 100%
    overflow hidden
    position relative

    .slide
      left 0
      top 0
      width 100%
      height 800px
      position absolute
      text-align center
      transition transform .5s cubic-bezier(0.42, 0, 0.51, 1)
      color white

      &.next
        transform translateX(100%)
      &.prev
        transform translateX(-100%)

      .image
        background-size cover
        width 100%
        height 100%

      .content
        position absolute
        top 50%
        margin-top -200px
        width 100%
        height 400px;

      h2
        font-size 3em
        font-style italic
        text-shadow 2px 2px 10px rgba(black, .5)
        padding 1em

      .caption
        font-size 2em
        color black
        margin 1em
        background rgba(white, .5)

      a
        padding 1em
        display inline-block
        background $theme
        border-radius 100px
        color white

  nav
    a
      position absolute
      top 50%
      height 40px
      width 40px
      background url(arrow-left.svg)
      color transparent
      display block
      left 10px
      text-shadow 0 0 10px white

      &.next
        left auto
        right 10px
        background url(arrow-right.svg)

#carte
  background url(symphony.png)
  h1
    text-shadow 0 1px 1px rgba(black, .2)
  .pizza
    width 328px
    position relative
    float left
    margin 1em
    border-radius 10px
    z-index 80
    overflow hidden
    box-shadow 0 2px 4px rgba(black, .2)
    background white

    h2
      padding 0 .5em
    p
      font-size .95em
      padding 1em

    .price
      position absolute
      top .5em
      right .5em
      padding 1em
      background $theme
      color white

#equipe
  background $theme
  h1
    color white

  .member
    background white
    float left
    padding 1em
    margin 1em
    border-radius 10px
    text-align center
    box-shadow 0 5px 20px darken($theme, 10)
    h2
      color $theme
    .image
      height 200px
      width 200px
      border-radius 200px
      overflow hidden
      box-shadow inset 0 0 10px rgba(black, .2)

#services
  background url(symphony.png)

  ul
    height 100%
    width 350px
    float left
    li
      margin 0 1em 1em 0
      border-radius 4px
      overflow hidden
      a
        text-align center
        font-style italic
        font-size 1.2em
        display block
        padding .5em
        background rgba(white, .7)
        &.active
          background $theme
          color white
        &:hover
          background rgba($theme, .2)

  .services
    float left

  .service
    background white
    width 720px
    display none
    overflow hidden
    border-radius 10px
    box-shadow 0 5px 10px rgba(black, .2)
    &.active
      display block

    .text
      padding 1em
#nous-trouver
  background darken($theme, 50)

#evenements
  background $theme
  h2
    color white
    text-align center
    margin-top -2em
  .entry
    display inline-block
    padding 1.5em
    background white
    border-radius 1em
    box-shadow 0 3px 10px rgba(0,0,0,0.2)
    margin 1em
  .Titre
    font-size 1.5em
    color black
    margin-bottom .5em
  .Date
    float: right
    color $theme
  .Illustration
    img
      border 2px solid $theme
      width 300px
      margin-right 1em