#logo
  .c1
  .c2
  .d
  .h

@import compass

html
  height: 100%
  +background(#F2E1AC)
  position: relative

#logo
  position: absolute
  top: 50%
  margin-top: -100px
  left: 50%
  margin-left: -150px
  +inline-block
  width: 300px  
  height: 200px

  .c1, .c2
    position: absolute
    top: 0
    height: 200px
    width: 200px
    +border-radius(100px)
    content: ''

  .c1
    left: 0
    +background(rgba(#63A69F, 0.5))

  .c2
    right: 0
    +background(rgba(#F2594B, 0.5))

  .d, .h, .h:before, .h:after
    position: absolute
    top: 50%
    z-index: 1
    +background(rgba(#fff, 0.75))


  .d
    left: 50%
    margin-left: -110px
    margin-top: -60px
    height: 120px
    width: 100px
    +border-radius(20px 60px 60px 20px)

  .h
    right: 50%
    margin-right: -110px
    margin-top: -15px
    height: 30px
    width: 100px
    +border-radius(20px)

    &:before, &:after
      margin-top: -60px
      width: 30px
      height: 120px
      +border-radius(20px)
      content: ''

    &:before
      left: 0

    &:after
      right: 0



@keyframes left-circle
  0%
    +opacity(0)
    left: 100%
  
  100%
    +opacity(1)
    left: 0

@keyframes right-circle
  0%
    +opacity(0)
    right: 100%
  
  100%
    +opacity(1)
    right: 0

@keyframes letters
  0%
    +opacity(0)

  50%
    +opacity(0)

  100%
    +opacity(1)


#logo
  .c1, .c2
    animation-duration: 2s
    animation-timing-function: ease

  .c1
    animation-name: left-circle

  .c2
    animation-name: right-circle

  .d, .h
    animation-name: letters
    animation-duration: 2s
    animation-timing-function: ease