.joyride-beacon {
  display: inline-block;
  height: 36px;
  position: relative;
  width: 36px;
  z-index: 1500; }
  .joyride-beacon .inner {
    -webkit-animation: joyride-beacon-inner 1.2s infinite ease-in-out;
            animation: joyride-beacon-inner 1.2s infinite ease-in-out;
    background-color: #f04;
    border-radius: 50%;
    display: block;
    height: 50%;
    left: 50%;
    opacity: 0.7;
    position: relative;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 50%; }
  .joyride-beacon .outer {
    -webkit-animation: joyride-beacon-outer 1.2s infinite ease-in-out;
            animation: joyride-beacon-outer 1.2s infinite ease-in-out;
    background-color: rgba(255, 0, 68, 0.2);
    border: 2px solid #f04;
    border-radius: 50%;
    display: block;
    height: 100%;
    left: 0;
    opacity: 0.9;
    position: absolute;
    top: 0;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    -webkit-transform-origin: center;
        -ms-transform-origin: center;
            transform-origin: center;
    width: 100%; }

.joyride-overlay {
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1500; }

.joyride-hole {
  border-radius: 4px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 0, 0, 0.5);
  position: absolute; }
  .joyride-hole.safari {
    box-shadow: 0 0 999px 9999px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 0, 0, 0.5); }

.joyride-tooltip {
  background-color: #fff;
  border-radius: 8px;
  color: #555;
  cursor: default;
  -webkit-filter: drop-shadow(-1px -2px 3px rgba(0, 0, 0, 0.3)) drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.3));
          filter: drop-shadow(-1px -2px 3px rgba(0, 0, 0, 0.3)) drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.3));
  opacity: 0;
  padding: 20px;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  width: 290px;
  z-index: 1510; }
  @media screen and (min-width: 480px) {
    .joyride-tooltip {
      width: 360px; } }
  @media screen and (min-width: 960px) {
    .joyride-tooltip {
      width: 450px; } }
  .joyride-tooltip.animate {
    -webkit-animation: joyride-tooltip 0.4s forwards;
            animation: joyride-tooltip 0.4s forwards;
    -webkit-animation-timing-function: cubic-bezier(0, 1.05, 0.55, 1.18);
            animation-timing-function: cubic-bezier(0, 1.05, 0.55, 1.18); }
  .joyride-tooltip header {
    border-bottom: 1px solid #f04;
    margin-bottom: 12px;
    padding-bottom: 6px;
    position: relative; }
    .joyride-tooltip header h4 {
      color: #555;
      font-size: 20px;
      margin: 0; }
    .joyride-tooltip header a {
      color: #555;
      font-size: 2.5rem;
      line-height: 0.7;
      position: absolute;
      right: 0;
      text-decoration: none;
      top: 0; }
  .joyride-tooltip main {
    font-size: 16px;
    margin-bottom: 18px; }
  .joyride-tooltip footer {
    text-align: right; }
    .joyride-tooltip footer .primary {
      background-color: #f04;
      border-radius: 4px;
      color: #fff;
      padding: 6px 12px;
      text-decoration: none;
      -webkit-transition: background-color 0.2s ease-in-out;
              transition: background-color 0.2s ease-in-out; }
      .joyride-tooltip footer .primary:hover {
        background-color: #ff1f5a; }
    .joyride-tooltip footer .secondary {
      color: #f04;
      margin-right: 10px; }
    .joyride-tooltip footer .skip {
      color: #ccc;
      float: left;
      margin-right: 10px; }
  .joyride-tooltip .triangle {
    background-repeat: no-repeat;
    overflow: hidden;
    position: absolute; }
  .joyride-tooltip.bottom, .joyride-tooltip.bottom-left, .joyride-tooltip.bottom-right {
    margin-top: 18px; }
    .joyride-tooltip.bottom .triangle, .joyride-tooltip.bottom-left .triangle, .joyride-tooltip.bottom-right .triangle {
      background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2236px%22%20height%3D%2218px%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpolygon%20points%3D%220%2C%200%208%2C%208%2016%2C0%22%20fill%3D%22%23fff%22%20transform%3D%22scale%282.25%29%20rotate%28180 8 4%29%22%3E%3C%2Fpolygon%3E%3C%2Fsvg%3E");
      height: 18px;
      left: 50%;
      top: -16px;
      width: 36px; }
  .joyride-tooltip.top, .joyride-tooltip.top-left, .joyride-tooltip.top-right {
    margin-bottom: 18px; }
    .joyride-tooltip.top .triangle, .joyride-tooltip.top-left .triangle, .joyride-tooltip.top-right .triangle {
      background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2236px%22%20height%3D%2218px%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpolygon%20points%3D%220%2C%200%208%2C%208%2016%2C0%22%20fill%3D%22%23fff%22%20transform%3D%22scale%282.25%29%20rotate%280%29%22%3E%3C%2Fpolygon%3E%3C%2Fsvg%3E");
      bottom: -16px;
      height: 18px;
      left: 50%;
      width: 36px; }
  .joyride-tooltip.bottom .triangle, .joyride-tooltip.top .triangle {
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%); }
  .joyride-tooltip.bottom-left .triangle, .joyride-tooltip.top-left .triangle {
    left: 3%; }
    @media screen and (min-width: 480px) {
      .joyride-tooltip.bottom-left .triangle, .joyride-tooltip.top-left .triangle {
        left: 2%; } }
  .joyride-tooltip.bottom-right .triangle, .joyride-tooltip.top-right .triangle {
    left: 86%; }
    @media screen and (min-width: 480px) {
      .joyride-tooltip.bottom-right .triangle, .joyride-tooltip.top-right .triangle {
        left: 88%; } }
    @media screen and (min-width: 768px) {
      .joyride-tooltip.bottom-right .triangle, .joyride-tooltip.top-right .triangle {
        left: 90%; } }
  .joyride-tooltip.left {
    margin-right: 18px; }
    .joyride-tooltip.left .triangle {
      background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218px%22%20height%3D%2236px%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpolygon%20points%3D%220%2C%200%208%2C%208%2016%2C0%22%20fill%3D%22%23fff%22%20transform%3D%22scale%282.25%29%20rotate%28270 8 8%29%22%3E%3C%2Fpolygon%3E%3C%2Fsvg%3E");
      height: 36px;
      right: -16px;
      width: 18px; }
  .joyride-tooltip.right {
    margin-left: 18px; }
    .joyride-tooltip.right .triangle {
      background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218px%22%20height%3D%2236px%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpolygon%20points%3D%220%2C%200%208%2C%208%2016%2C0%22%20fill%3D%22%23fff%22%20transform%3D%22scale%282.25%29%20rotate%2890 4 4%29%22%3E%3C%2Fpolygon%3E%3C%2Fsvg%3E");
      height: 36px;
      left: -16px;
      width: 18px; }

@-webkit-keyframes joyride-tooltip {
  0% {
    -webkit-transform: scale(0.1);
            transform: scale(0.1); }
  100% {
    opacity: 1;
    -webkit-transform: perspective(1px) scale(1);
            transform: perspective(1px) scale(1); } }

@keyframes joyride-tooltip {
  0% {
    -webkit-transform: scale(0.1);
            transform: scale(0.1); }
  100% {
    opacity: 1;
    -webkit-transform: perspective(1px) scale(1);
            transform: perspective(1px) scale(1); } }

@-webkit-keyframes joyride-beacon-inner {
  20% {
    opacity: 0.9; }
  90% {
    opacity: 0.7; } }

@keyframes joyride-beacon-inner {
  20% {
    opacity: 0.9; }
  90% {
    opacity: 0.7; } }

@-webkit-keyframes joyride-beacon-outer {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  45% {
    opacity: 0.7;
    -webkit-transform: scale(0.75);
            transform: scale(0.75); }
  100% {
    opacity: 0.9;
    -webkit-transform: scale(1);
            transform: scale(1); } }

@keyframes joyride-beacon-outer {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  45% {
    opacity: 0.7;
    -webkit-transform: scale(0.75);
            transform: scale(0.75); }
  100% {
    opacity: 0.9;
    -webkit-transform: scale(1);
            transform: scale(1); } }