// Orange
.btn-holder
  width: 100%
  text-align: center

.btn
  display: inline-block
  position: relative
  height: 50px
  margin: 0 auto
  padding: 0 60px 0 20px
  line-height: 50px
  background: #EEA905
  color: #fff
  font-family: 'DIN Next W02 Regular',arial, sans-serif
  border-radius: 5px
  cursor: pointer

  -webkit-box-shadow: inset 0px -2px 0px 0px rgba(208,149,0,1)
  -moz-box-shadow: inset 0px -2px 0px 0px rgba(208,149,0,1)
  box-shadow: inset 0px -2px 0px 0px rgba(208,149,0,1)gem

  &::after
    content: ''
    display: block
    position: absolute
    top: 50%
    right: 20px
    margin-top: -10px
    height: 20px
    width: 20px
    background: url("/images/structure/coevering_sprite.png") no-repeat scroll -330px -10px transparent

  &:hover
    background: #F09600

  &.next
    margin-top: 80px



.btn.green
  display: block
  background: #8DB9C6
  height: 80px
  line-height: 80px
  padding-left: 80px
  color: rgba(255, 255, 255, .8)
  +transition(color 200ms ease-out)
  white-space: nowrap

  -webkit-box-shadow: none
  -moz-box-shadow: none
  box-shadow: none

  +respond-to(handheld)
    padding-left: 20px 

  &:before
    content: ''
    position: absolute
    top: 20px
    left: 20px
    display: block
    width: 40px
    height: 40px
    background: url("/images/structure/coevering_sprite.png") no-repeat
    opacity: .6
    +transition(opacity 200ms ease-out)

    +respond-to(handheld)
      display: none

  &:hover
    color: #fff

    &:before
      opacity: 1

  &.phone
    margin-bottom: 30px
    &:before
      background-position:  -320px -160px
  &.email
    &:before
      background-position:  -370px -160px

  .target
    position: absolute
    top: 21px
    left: 21px
    z-index: 50
    width: 40px
    height: 40px

  &.phone
    position: relative
    z-index: 2

    .over
      .start
        background-position:  -110px -140px

    .out
      .start
        background-position: -110px -50px

  &.mail
    .over
      .start
        background-position:  -200px -140px
    .out
      .start
        background-position: -200px -50px

a.btnOrange
  display: inline-block
  position: relative
  margin: 30px 0 0 0
  height: 60px
  cursor: pointer

  .btnLabel
    display: block
    float: left
    padding-top: 23px
    height: 37px
    color: #fff
    font-size: .928571429em
    text-transform: uppercase
    line-height: 1em

  .start, .end
    display: block
    float: left
    height: 60px
    background: no-repeat url('/images/structure/coevering_sprite.png')

  .start
    width: 30px

  .end
    width: 50px

  .over
    position: absolute
    top: 0
    left: 0
    z-index: 10
    opacity: 0
    filter: alpha(opacity=0)

    .start
      background-position:  -10px -110px
    .end
      background-position:  -50px -110px
    .btnLabel
      background: repeat-x url('/images/structure/orangeBtn_over.jpg')

  .out
    position: relative

    .start
      background-position:  -10px -40px
    .end
      background-position:  -50px -40px
    .btnLabel
      background: repeat-x url('/images/structure/orangeBtn_out.jpg')


// Green
a.btnGreen
  display: inline-block
  z-index: 0
  position: relative
  margin: 0 0 10px 0
  width: 340px
  height: 80px
  cursor: pointer

  .over
    position: absolute
    top: 0
    left: 0
    z-index: 10
    opacity: 0
    filter: alpha(opacity=0)

    .btnLabel
      background: repeat-x url('/images/structure/btnGreen_over.jpg')

  .out
    position: relative

    .btnLabel
      background: repeat-x url('/images/structure/btnGreen_out.jpg')

  .start, .end
    display: block
    float: left
    height: 80px
    background: no-repeat url('/images/structure/coevering_sprite.png')

  .start
    width: 80px

  .end
    width: 40px

  .btnLabel
    display: block
    float: left
    padding: 32px 0 0 0
    width: 220px
    height: 48px
    color: #fff
    font-size: 0.95em
    font-family: 'DIN Next W02 Regular',arial, sans-serif
    line-height: 1em

  .out .end, .over .end
    background-position: -290px -50px

  .target
    position: absolute
    top: 21px
    left: 21px
    z-index: 50
    width: 40px
    height: 40px

  &.phone
    position: relative
    z-index: 2

    .over
      .start
        background-position:  -110px -140px

    .out
      .start
        background-position: -110px -50px

  &.mail
    .over
      .start
        background-position:  -200px -140px
    .out
      .start
        background-position: -200px -50px


.detail
  display: block
  position: absolute
  bottom: -35px
  left: 50%
  z-index: 60
  padding: 15px
  height: 10px
  background: #56565A
  color: #fff
  line-height: 0.5em
  white-space: nowrap
  opacity: 0
  filter: alpha(opacity=0)

  .arrow
    display: block
    position: absolute
    top: -10px
    left: 50%
    margin-left: -8px
    width: 16px
    height: 10px
    background: url('/images/structure/coevering_sprite.png') -460px -10px

  .label
    display: block
    position: relative
    z-index: 100