(function () {
    document.write(`
  
    <div class="single_tap_literature_gesture">
	
        <svg viewBox="0 0 200 200">
            <circle class="tap-1" cx="89.43" cy="64.48" r="19.46"/>
            <path class="hand-tap" d="M139.93,102.68,98.81,95.75V65.2A9.25,9.25,0,0,0,89.56,56h0a9.25,9.25,0,0,0-9.25,9.25v57.36L71,111.77c-3.61-3.61-8.44-3.89-13.08,0,0,0-7.24,5.84-3.83,9.25l34,34h42.63a9.25,9.25,0,0,0,9.07-7.43l6.82-34.09A9.28,9.28,0,0,0,139.93,102.68Z"/>
          </svg>
    
    </div>
    
    <style>
    
    svg {
        display: inline-block;
        margin: 3% auto;
    }
   
    .single_tap_literature_gesture {
        position: absolute;
        opacity: 0;
        z-index: 5;
    }

    .single_tap_literature_gesture * {
        transform-origin: 50% 50%;
        perspective: 100px;
    }

    .hand-tap{
        fill: #fff;
        stroke: #000;
        stroke-width: 3px;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    
    .tap-1{
        fill: transparent;
        stroke: #000;
        stroke-width: 3px;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .tap-1 {
        opacity: .5;
    }

    @keyframes tap {
        0% {
            transform: rotateX(0deg);
        }
        10% {
            transform: rotateX(12.5deg);
        }
        25% {
            transform: rotateX(25deg);
        }
    }
    
    @keyframes tap-circle {
	0% {
            transform: scale(0);
            opacity: 0;
        }
        75% {
            transform: scale(1.05);
            opacity: .6;
        }
        80% {
            transform: scale(1);
            opacity: .5;
        }
    }

    .hand {
        transform-origin: 25% 50%;
    }

    .hand-tap {
        animation: tap 1.25s ease-out backwards;
        animation-iteration-count:infinite;
    }

    .tap-1{
        animation: tap-circle 1.25s ease-out backwards;
        animation-iteration-count:infinite;
    }

    </style>
  
    <script>
        function gesture_single_tap_literature_fadein(width, top, left) {
            $('.single_tap_literature_gesture').css("top", top);
            $('.single_tap_literature_gesture').css("left", left);
            $('.single_tap_literature_gesture').css("width", width);
            $('.single_tap_literature_gesture').css("opacity", "0.8");
	    }

        function gesture_single_literature_fadeOut(time) {
                setTimeout(function() {
                $('.single_tap_literature_gesture').fadeOut();
            }, time);
        }
    </script>

    `);
  })();