﻿.fq-marker-button {
  display: block;
  margin-top: 20px; }
  .fq-marker-button-center {
    width: 80px;
    height: 80px;
    position: relative;
    cursor: pointer; }
    .fq-marker-button-center--small {
      width: 64px;
      height: 64px; }
    .fq-marker-button-center:hover .fq-marker-button-1 {
      border-color: rgba(255, 255, 255, 0.9) transparent; }
    .fq-marker-button-center:hover .fq-marker-button-2 {
      border-color: transparent #10b8d2; }
    .fq-marker-button-center:hover .fq-marker-button-3 {
      border-color: rgba(255, 255, 255, 0.9) transparent; }
    .fq-marker-button-center:hover .fq-marker-button-content {
      color: rgba(255, 255, 255, 0.9); }
  .fq-marker-button-center--small .fq-marker-button-1 {
    display: none; }
  .fq-marker-button-center:hover .fq-marker-button-3 {
    background: rgba(255, 255, 255, 0.9); }
  .fq-marker-button-center:hover .fq-marker-button-content {
    color: #10b8d2; }
  .fq-marker-button-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    transition: all 500ms ease-in; }
  .fq-marker-button-1 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border-style: solid;
    border-width: 50%;
    border-color: rgba(255, 255, 255, 0.6) transparent;
    box-sizing: border-box;
    animation: animate-cw 13s linear infinite;
    transition: all 1s ease-in-out; }
  .fq-marker-button-2 {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    border-radius: 50%;
    position: absolute;
    top: 8px;
    left: 8px;
    border-style: solid;
    border-width: 2px;
    border-color: transparent #10b8d2;
    animation: animate-ccw 10s linear infinite;
    transition: all 1s ease-in; }
  .fq-marker-button-3 {
    position: absolute;
    top: 14px;
    left: 14px;
    border-radius: 50%;
    width: calc(100% - 32px);
    height: calc(100% - 32px);
    border-style: solid;
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.6) transparent;
    animation: animate-cw 6s linear infinite;
    transition: all 500ms ease-in-out; }

@keyframes animate-cw {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

@keyframes animate-ccw {
  0% {
    transform: rotate(360deg); }
  100% {
    transform: rotate(0deg); } }
