// quand on survole hoverable,
// on montre hover-show
.hoverable {
  .hover-show {
    opacity: 0;
    @extend .fast-ease;
  }
  &:hover .hover-show {
    opacity: 1;
    @extend .fast-ease;
  }
}

.revealable {
  opacity: 0;
  @extend .fast-ease;
  &:hover {
    opacity: 1;
    @extend .fast-ease;
  }
}

.active {
  .revealable {
    opacity: 1;
    color: $white;
    @extend .fast-ease;
  }
}

.clickable {
  cursor: pointer;
}

.hover-hl {
  &:hover {
    background: mix($dark, $white);
    color: $white;
  }
}
.triangle-right {

  @extend .fast-ease;

  opacity: 0;
  position: fixed;
  margin: 71px;
  padding: 15px;
  //margin: 1em 0 3em;
  color: $main-color;
  background: $white;
  width: 20%;
  //height: 10%;
  top: 0px;
  left: 0;
  .square:hover & {
    opacity: 1;
    @extend .fast-ease;
  }
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  border: solid 3px $main-color;

}