@import "variables"
@import "compass/css3/border-radius"

.price-tag-container
  position: absolute
  display: inline-block

  &:hover
    .popup
      display: inline
  .popup
    background-color: #ffffff
    display: none
    div
      float: left
      position: absolute
      z-index: 99
      left: 65px
      top: -50px
      color: #ffffff
      width: 150px
    img
      float: left
      position: absolute
      z-index: 99
      left: 5px
      top: -55px
    &:before
      border: solid
      border-color: rgba(0,0,0,.8) transparent
      border-width: 6px 6px 0 6px
      bottom: 15px
      content: ""
      left: 50%
      position: absolute
    &:after
      background: rgba(0,0,0,.8)
      border-radius: 5px
      bottom: 21px
      color: #fff
      content: ""
      height: 52px
      padding: 5px 15px
      position: absolute
      width: 220px



.price-tag
  display: inline-block
  width: auto
  height: $tag-height
  background-color: $light-blue
  +border-radius(3px 4px 4px 3px)
  border-left: 1px solid $green
  top: 5px
  /* This makes room for the triangle */
  margin-left: 19px
  position: relative
  color: white
  font-weight: 500
  font-size: 16px
  line-height: $tag-height
  padding: 0 10px 0 10px

  &:hover
    text-decoration: none
    color: #ffffff

/* Makes the triangle */
.price-tag:before
  content: ""
  position: absolute
  display: block
  left: -$tag-height/2 + 1
  width: 0
  height: 0
  border-top: $tag-height/2 solid transparent
  border-bottom: $tag-height/2 solid transparent
  border-right: $tag-height/2 solid $light-blue
  +border-radius(3px 4px 4px 3px)

/* Makes the circle */
.price-tag:after
  content: ""
  background-color: white
  +border-radius(50%)
  width: 4px
  height: 4px
  display: block
  position: absolute
  left: 0
  top: $tag-height/2 - 2

@media (min-width: 768px)
  .cover-image-container
    height: 500px
    img
      margin: auto

#thumbnails
  margin-top: 20px
  img:hover
    cursor: pointer

.headline
  text-align: center

h1
  margin-bottom: 15px