<?php
    include('config.php');
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="robots" content="nofollow, noarchive, nosnippet, noodp, notranslate, noimageindex">
    <title>
        Map
    </title>
    <link href="css/path.css" rel="stylesheet" type="text/css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-124267345-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-124267345-1');

        var eventCategory = '<?=(isset($_GET['c8']) ? $_GET['c8'] : 'none');?>';

        window.sendGoogleTrackEvent = function(action, label, labelValue, category) {
            if (typeof action === 'undefined'){
                // We do nothing because there's nothing to send
            } else {
                if (typeof category === 'undefined')
                    category = eventCategory;

                if (typeof labelValue === 'undefined')
                    labelValue = 'NONE';

                if (typeof label === 'undefined')
                    label = 'NONE';

                gtag('event', action, {
                    'event_category': category,
                    'event_label': label,
                    'value': labelValue
                });
            }
        }

        window.sendGoogleTrackEvent('01. home');
    </script>

    <script>
        window.firstName = '<?=(isset($_GET['firstname']) ? $_GET['firstname'] : '');?>';
    </script>
</head>
<body class="offers-step silver-page">

<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport">
<!-- URL Bar BG on Android -->
<meta name="theme-color" content="#34559b">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&amp;display=swap"
      rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&amp;display=swap" rel="stylesheet">

<link href="//fonts.googleapis.com/css?family=Open+Sans:500,300,400,600,700,800,400italic" rel="stylesheet"
      type="text/css">
<link href="https://fonts.googleapis.com/css?family=Pacifico|Sedgwick+Ave" rel="stylesheet">


<div id="global-preloader">
    <div></div>
</div>

<div id="us-all-wrapper" style="opacity: 1;">
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&amp;display=swap"
          rel="stylesheet">

    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&amp;display=swap" rel="stylesheet">

    <style type="text/css">

        #global-preloader {

            position: fixed;

            z-index: 99999999;

            background: white;

            top: 0px;

            left: 0px;

            width: 100%;

            height: 100%;

            display: flex;

            justify-content: center;

            align-items: center;

        }


        #global-preloader > div {

            height: 50px;

            width: 50px;

            border-radius: 50%;

            border-top: 4px solid #1172d7;

            animation: loadtate 0.5s linear infinite;

        }

        body {

            margin: 0px;

            padding: 0px;

        }


        #hf-main-head {

            background: #135EC7;

            margin-bottom: 0;

            height: 155px;


        }


        #top-hf-header {


            display: flex;

            justify-content: space-between;

            box-sizing: border-box;

            padding: 0px 45px;

            flex-direction: row;

            height: 66px;

            font-size: 11px;

            align-items: center;

            color: #fff;

            font-family: 'Roboto', sans-serif;

            position: relative;

        }


        #hf-reward {


            font-weight: bold;

            font-size: 16px;

            line-height: 26px;

            text-align: center;

            letter-spacing: 0.02em;

            text-transform: uppercase;

            color: #FFFFFF;

            position: absolute;

            left: 50%;

            width: 480px;

            margin-left: -240px;

            top: 50%;

            height: 26px;

            margin-top: -13px;

        }


        #hf-topterms {

            font-family: Poppins;


        }


        #hf-topterms a {

            color: #fff;

            font-size: 10px;

            text-decoration: none;

            font-family: inherit;

        }


        #bottom-hf-header {


            margin: auto;

            width: 650px;

            height: 110px;

            display: flex;

            justify-content: space-between;

            align-items: center;

            position: relative;

            top: -18px;


        }


        #bottom-hf-header *, #bottom-hf-header {

            font-family: 'Poppins', sans-serif;

        }


        #bottom-hf-header > div {


            font-family: Poppins;

            font-style: normal;

            font-weight: bold;

            font-size: 26px;

            line-height: 64px;

            text-align: center;

            box-sizing: border-box;

            min-width: 64px;

            color: #FFFFFF;

            position: relative;

            height: 64px;

            width: auto;

            display: block;

            background: url(/CampImg/13225/locked-hf.svg) no-repeat center center transparent;

            background-size: 64px 64px;


        }


        #bottom-hf-header > div:after {

            content: "";

            display: block;

            width: 28px;

            height: 8px;

            border-radius: 12px;

            background: #00419C;

            position: absolute;

            right: -33px;

            top: 50%;

            margin-top: -4px;


        }


        #bottom-hf-header > div#reward-tab:after {

            display: none;

        }


        #bottom-hf-header > div#reward-tab {

            background: white;

            height: 110px;

            width: 110px;

            overflow: hidden;

            border-radius: 50%;

        }


        #bottom-hf-header > div#reward-tab img {


            max-height: 70px;

            max-width: 80px;

            position: absolute;

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);

        }


        /** PAGE SPECIFIC STYLES **

    ***************************/


        #survey-tab:before {


            content: "Take our brief survey!";

            display: none;


        }


        #offers-tab:before {


            content: "Claim Rewards!";

            display: none;


        }


        .survey-step #survey-tab:before, .offers-step #offers-tab:before {


            display: block;

        }


        .survey-step #survey-tab, .offers-step #offers-tab {

            background: #00419C;

            height: 64px;

            border-radius: 64px;

            display: inline-block;

            width: 398px;

            position: relative;


        }


        .offers-step #survey-tab {


            background-image: url(/CampImg/13225/checked-hf.svg);

        }


        .offers-step #survey-tab:after {


            background-color: #8FFF00;

        }


        /** INFLOW **/


        #hf-inflow {
            min-height: 480px;
        }


        #Sitefooter {

            display: none;

        }


        #lbprogress-btn {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }


        #lbprogress-btn.pending:after {
            position: absolute;
            color: white;
            content: "1";
            background: #EE4853;
            border-radius: 50%;
            text-align: center;
            font-weight: 600;
            font-family: Roboto;
            right: -4px;
            top: -1px;
            line-height: 15px;
            width: 15px;
            height: 15px;
            font-size: 10px;

        }

        .survey-step #lbprogress-btn.pending:after {
            display: none;
        }

        .survey-step #lbprogress-btn {
            display: none;
        }


        /*** MOBILE MEDIA QUERIES ***

    *****************************/


        @media all and (max-width: 868px) {

            #hf-main-head {

                display: flex;

                margin-bottom: 0vw;

                height: 14.93vw;

            }


            #top-hf-header #ncclogo, #top-hf-header #hf-topterms, #bottom-hf-header > div#reward-tab img {

                display: none;

            }

            #top-hf-header {

                padding: 0;

                height: 9.6vw;


            }


            #hf-reward {


                font-size: 2.93333vw;

                line-height: 4.8vw;


                position: relative;

                left: 0;

                width: 100%;

                margin-left: 0;

                top: 0;

                height: 4.8vw;

                margin-top: 0;


            }


            #bottom-hf-header {

                margin: auto;

                width: 74%;

                height: 9.6vw;

                top: 0;


            }


            #bottom-hf-header > div {


                font-size: 4.53333vw;

                line-height: 9.6vw;

                min-width: 9.6vw;

                background-size: 9.6vw 9.6vw;

                height: 9.6vw;


            }


            #bottom-hf-header > div:after {
                width: 4vw;
                height: 1.06667vw;
                right: -5.06667vw;
                margin-top: -0.53333vw;
            }


            #survey-tab:before {

                content: "Take Survey!";

            }


            .survey-step #survey-tab, .offers-step #offers-tab {
                height: 9.6vw;

                border-radius: 9.6vw;

                width: 41.6vw;
            }

            #bottom-hf-header > div#reward-tab {

                background: url(/CampImg/13225/reward-icon.svg) no-repeat center center white;

                height: 9.6vw;

                width: 9.6vw;

                overflow: visible;

                background-size: auto 6.1333vw;

                border-radius: 50%;

            }

            #lbprogress-btn.pending:after {
                position: absolute;
                right: -2vw;
                top: -1vw;
                line-height: 5.7vw;
                color: white;
                content: "1";
                background: #EE4853;
                border-radius: 50%;
                text-align: center;
                font-weight: 600;
                font-family: Roboto;
                width: 5.87vw;
                height: 5.87vw;
                font-size: 3.467vw;
            }

        }

        @media all and (min-width: 868px) {
            #lbprogress-btn {
                display: none;
            }
        }


        /** ANIMATIONS ****

  *******************/


        @keyframes loadtate {

            0% {

                transform: rotate(0deg);

            }

            100% {

                transform: rotate(360deg);

            }

        }


    </style>

    <script>
        var dealsList = [];
        var dealsPageNum = 1;
        var uemail = "";
        var productAPIURL = "https://contact.rewardzoneusa.com/api/incentivestatus?p=credit&e=";
        var dealsPageClass = {
            1: "silver",
            2: "gold",
            3: "platinum",
            4: "platinum"
        };

        var dealsPageClassSelected = dealsPageClass[dealsPageNum];
        var emptyTemplate = '<div class="lboffer-empty"><span><p>You <em>must</em> complete {{dealsToComplete}} to continue towards your reward!</p> <div class="lbback">Back to Deals</div></span></div>';
        var lbofferTemplate = '<div data-id="{{id}}" class="lboffer-item {{dealClass}} {{state}}"><div class="lboffer-icon"><img src="{{imgURL}}" /></div><div class="lboffer-info"><span class="lboffer-title">{{offerTitle}}</span><span class="lboffer-status"></span></div></div>';

        $(document).ready(function (e) {
            $("body").addClass('offers-step');

            $("#viewoffer-sets").attr('data-description', "Deals you viewed:");

            $(".cpa_offer").on('click', function () {
                $("#lbprogress-btn").addClass('pending');
            })


            $("#lbprogress-btn").click(function () {

                $("#lb-inner-cont").scrollTop(0);

                getCurrentDealsProgress();

                $(this).removeClass('pending');
                sessionStorage.setItem('cpawall-activity-status-top', true);

                $("#lb-blackbox").fadeIn(100);
                $("#lb-headbox").delay(100).fadeIn(100);

                if (typeof jOfferCrossSubmit === 'function') {

                    jOfferCrossSubmit(438, 8);

                }

                $("body").addClass('lbshown');
                $("body").removeClass('notice-pending');


            });


            $("#lbox-close, #lb-blackbox, #lb-continuebtn, .lbback, #notice-close, #pending-notice").on('click', function () {

                $("#lb-blackbox").delay(100).fadeOut(100);
                $("#lb-headbox").fadeOut(100);

                $("body").removeClass('lbshown notice-pending');

            });

            $("#lb-headbox > h4").click(function () {

                $("#lb-inner-cont").scrollTop(0);

                if (typeof jOfferCrossSubmit === 'function') {

                    jOfferCrossSubmit(413, 8);

                }

                $("#lb-inner-cont").animate({
                    scrollTop: $("#p-requirements .p-3").position().top - 195
                }, 'slow');


            });

            var continueIfCompleted = function () {
                if (dealsPageNum == 4) {
                    $("#lbox-close").trigger('click');
                } else {
                    jPgNext(1);
                }
            }

            var getCurrentDealsProgress = function () {
                uemail = jLead.email;
                $("#lb-offers-progress").addClass('loading');

                $.ajax({
                    url: productAPIURL + uemail,
                    type: 'GET',
                    contentType: "application/json; charset=UTF-8",
                    crossDomain: true,
                    success: function (data) {
                        constructOfferSet(data.list);
                    },
                    error: function (x, y, z) {
                        constructOfferSet([]);
                        console.log(x);
                    }
                });
            }

            var constructOfferSet = function (deals) {
                dealsList = deals.sort((a, b) => (a.status > b.status) ? 1 : -1);
                populateDealsProgress();
            }

            var populateDealsProgress = function () {
                if (dealsList.length == 0) {
                    $("#lb-offers-progress").removeClass('active');
                    var toComplete = "1 deal";
                    if (typeof pageSettings != "undefined") {
                        var deals = parseInt($(".dealsToComplete").html());
                        toComplete = deals == 1 ? deals + " deal" : deals + " deals";
                    }
                    $("#lb-headbox").addClass("no-activity");
                } else {
                    $("#lb-headbox").removeClass("no-activity");
                    $("#lb-headbox").removeClass("active");
                    $("#offer-sets, #viewoffer-sets").empty();

                    var i;
                    var activityCount = 0;

                    dealsList = dealsList.reverse();

                    for (i = 0; i < dealsList.length; i++) {

                        var id = dealsList[i].id;
                        var title = dealsList[i].name;
                        var imgURL = dealsList[i].image;
                        var state = dealsList[i].status;
                        var levent = dealsList[i].lead_event || "";

                        var ostatus;

                        var dealClass = dealsList[i].type;

                        var temp = lbofferTemplate;

                        var entity;

                        if (state == 200 && levent == 'credit' || state == 3 && levent == '') {

                            entity = "offer-sets";
                            ostatus = "completed";

                        } else {

                            entity = "viewoffer-sets";
                            ostatus = "pending";

                        }


                        temp = temp.replace(/{{offerTitle}}/g, title);
                        temp = temp.replace(/{{imgURL}}/g, imgURL);
                        temp = temp.replace(/{{dealClass}}/g, dealClass);
                        temp = temp.replace(/{{state}}/g, ostatus);


                        var pagetype = dealsPageClassSelected == "Platinum2" ? "Platinum" : dealsPageClassSelected;
                        var fPageType = pagetype.toLowerCase();


                        if (dealsList[i].type != null) {

                            var type = dealsList[i].type.toLowerCase() == "platinum2" ? "platinum" : dealsList[i].type.toLowerCase();


                            if (fPageType == type && state == 200 || fPageType == type && state == 3 && levent == '') {

                                $("#lb-offers-progress #" + entity).append(temp);
                                activityCount++;

                            } else if (state == 3 && levent == 'credit') {

                                $("#lb-offers-progress #" + entity).append(temp);
                                activityCount++;

                            } else if (state != 3 && state != 200) {

                                $("#lb-offers-progress #" + entity).append(temp);
                                activityCount++;

                            }

                        }


                    }


                    if (activityCount == 0) {

                        $("#lb-headbox").addClass("no-activity");
                        $("#lb-offers-progress").removeClass("active");
                    } else {

                        $("#lb-headbox").removeClass("no-activity");
                        $("#lb-offers-progress").addClass("active");
                    }


                }

                setEmptyState();
                setCompletedState();

                setTimeout(function () {
                    $("#lb-offers-progress").removeClass('loading');
                }, 500);


            }

            var setEmptyState = function () {


                var toComplete = "deal";
                var is = "is"

                if (typeof pageSettings != "undefined") {

                    var deals = parseInt($(".dealsToComplete").html());
                    toComplete = deals == 1 ? "deal" : "deals";
                    is = deals == 1 ? "is" : "are";

                }

                var temp = $(".dealsToComplete").html() + " " + dealsPageClass[dealsPageNum] + " " + toComplete + "!";

                $("#current_page_completed i").html(dealsPageClass[dealsPageNum].toUpperCase() + " " + toComplete.toUpperCase() + ":");
                $("#mrs > span b").html(temp);


            }

            var setCompletedState = function () {


                var completed = 0;
                var pagetype = dealsPageClassSelected == "Platinum2" ? "Platinum" : dealsPageClassSelected;

                var fPageType = pagetype.toLowerCase();

                for (var i = 0; i < dealsList.length; i++) {

                    var state = dealsList[i].status;
                    var levent = dealsList[i].lead_event || "";


                    if (state == 3 && levent == '' || state == 200 && levent == 'credit') {


                        if (typeof dealsList[i].type !== "undefined") {


                            var type = dealsList[i].type.toLowerCase();
                            var ftype = type == 'platinum2' ? 'platinum' : type;


                            if (fPageType == ftype) {

                                completed++;

                            }

                        }


                    }

                }


                if (completed >= parseInt($(".dealsToComplete").html())) {

                    $("#lb-headbox").addClass('completed-page');

                } else {

                    $("#lb-headbox").removeClass('completed-page');

                }


            }

            var displayCurrentPage = function(pid) {
                var css = "";
                switch (pid) {
                    case 'silver':
                        css = 'silver-page';
                        break;
                    case 'gold':
                        css = 'gold-page';
                        break;
                    case 'platinum':
                        css = 'platinum-page';
                        break;
                    case 'platinum2':
                        css = 'platinum2-page';
                        break;
                    default:
                        css = 'silver-page';
                        break;
                }
                $('body').addClass(css);
                setTimeout(function() {
                    dispatchCPAEvents(pid);
                    $("#wall-global-wrapper").css('opacity', '1');
                    $("#global-preloader").fadeOut(200);
                }, 500);
            }

            displayCurrentPage('silver');


            // called from CPA Wall cid custom script - AfterStackRender()/afterRender()

            var dispatchCPAEvents = function(pageid) {
                var evt;
                switch (pageid) {
                    case 'silver':
                        evt = $.Event('initiateGlobalLoader');
                        $(window).trigger(evt);
                        break;
                    case 'gold':
                        evt = $.Event('initiateEngagementLoader');
                        $(window).trigger(evt);
                        $(".default-entity").remove();
                        break;
                    case 'platinum':
                        $(".default-entity").remove();
                        break;
                    case 'platinum2':
                        $(".default-entity").remove();
                        break;

                    default:
                        evt = $.Event('initiateGlobalLoader');
                        $(window).trigger(evt);
                        break;
                }

                // remove headers no being used.

                $("#" + pageid + "-header").siblings('.header-entity').remove();

                pageid = pageid == 'platinum2' ? 'platinum' : pageid;

                $("#tpage b, .pageName").html(pageid);



            }


            var updateFirstLightBox = function(e) {
                // get the first offer info
                var $obj = $(e);
                var offerid = $obj.data('id');
                var offerTitle = $obj.find('.offer_txt h1').text();
                var srcImg = $obj.find('.offer_img a').html();
                // attach info to the lightbox
                $("#oheader > u").html(offerTitle);
                $("#offerLightbox #okaybtn").attr('onclick', 'javascript:s.go(' + offerid + ')');
                $("#offerLightbox").fadeIn(250);
                $("#offerDarkBox").slideDown(250);
            }


        });


    </script>



    <style type="text/css">


        #lb-blackbox {

            position: fixed;
            z-index: 99999998;
            background: rgba(0, 0, 0, 0.6);
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            display: none;
            cursor: pointer;


        }

        .notice-pending #lb-blackbox {

            z-index: 99998;
        }

        #lb-headbox {

            position: fixed;
            top: 50%;
            width: 93vw;
            max-width: 100vw;
            background: white;
            left: 50%;
            z-index: 99999999;
            text-align: center;
            display: none;
            height: 134vw;
            overflow: hidden;
            border-radius: 5px;
            margin-left: -46.5vw;
            margin-top: -67vw;


        }

        #lb-headbox > div {

            height: 0px;
            padding: 0px;
        }

        #lb-headbox > div#lb-inner-cont {

            max-height: 70vw;
            overflow: auto;
            height: auto;
            padding: 39vw 0vw 10.66667vw 0vw;

        }

        #lb-headbox.no-activity > div#lb-inner-cont {

            /* padding: 31vw 0vw 10.66667vw 0vw; */
        }

        #lb-headbox.no-activity #viewoffer-sets, .completed-page #current_page_incomplete, .completed-page #viewoffer-sets, .completed-page #offer-set-disclaimer, .completed-page #lb-offers-progress .lbback {

            display: none !important;
        }

        .completed-page #mrs > span#current_page_completed {
            /* display:block; */
            display: flex;
        }

        .completed-page #lb-offers-progress .lbcontinue {
            display: block;
        }

        #lb-headbox #lb-head-band {

            background: #00419c;
            padding-top: 5.5vw;
            padding-bottom: 0vw;
            position: absolute;
            z-index: 99999;
            margin: auto;
            left: 2.3vw;
            display: block;
            width: 88vw;
            top: 105vw;
            border-radius: 4px;
            display: none;
        }

        #lb-offers-progress {

            padding: 1vw 0vw;
            min-height: 84vw;
            margin-bottom: 0vw;
            position: relative;
        }

        #lb-offers-progress.loading > div {

            display: none !important;
        }

        #lb-offers-progress.loading:after {

            width: 6vw;
            height: 6vw;
            top: 50%;
            left: 50%;
            margin-left: -3vw;
            margin-top: -3vw;
            border-radius: 50%;
            content: "";
            border-top: 0.8vw solid #1172d7;
            -webkit-animation: loadtate 0.3s linear infinite;
            animation: loadtate 0.3s linear infinite;
            position: absolute;

        }

        #pending-notice {

            width: 92%;
            background: #fff;
            display: none;
            justify-content: flex-start;
            flex-direction: row;
            padding: 1.7vw 4.4vw;
            position: fixed;
            align-items: center;
            z-index: 99999999;
            top: 20vw;
            height: 15.46vw;
            box-sizing: border-box;
            border-radius: 3px;
            color: #C1272D;
            font-size: 3.73vw;
            font-family: Roboto;
        }

        .notice-pending #pending-notice {

            display: flex;
        }


        #reward-red {
            border-right: 1px solid #edbfc0;
            height: 90%;
            background: url(/CampImg/13247/header/redish-reward.svg) no-repeat center left transparent;
            background-size: 7.46vw;
            width: 11.20vw;
            margin-right: 4vw;

        }

        #notice-close {

            position: absolute;
            top: -8.66667vw;
            left: -2.33333vw;
            width: 8vw;
            height: 8vw;
            background: url(/CampImg/13247/header/white-xed.svg) no-repeat center top transparent;
            background-position: center center;
            background-size: 3.46667vw 3.46667vw;
            cursor: pointer;
            z-index: 999;
        }

        div#pending-notice:after {
            content: "";
            width: 0px;
            height: 0px;
            border-bottom: 1.6vw solid #fff;
            border-left: 1.6vw solid transparent;
            border-right: 1.6vw solid transparent;
            position: absolute;
            right: 5.06vw;
            top: -1.33vw;
        }

        #lb-rewardimg {

            text-align: center;
        }

        #lb-rewardimg img {

            max-width: 33.66667vw;
            max-height: 33.66667vw;
        }

        #lb-headbox > div {
            position: relative;

        }

        #lb-headbox > h4 {

            margin: 0px;
            display: block;
            font-family: Roboto;
            font-style: normal;
            font-weight: 500;
            font-size: 3.46vw;
            line-height: 100%;
            text-align: center;
            letter-spacing: 0.01em;
            text-decoration-line: underline;
            color: #939393;
            background: white;
            padding: 0vw 0vw 4.5vw 0vw;
            position: absolute;
            bottom: 0px;
            width: 100%;
            z-index: 999;
            box-sizing: border-box;
            cursor: pointer;
        }

        #lb-headbox > h4:before {

            border-top: 0px solid #eaeaea;
            width: 95%;
            display: block;
            margin: auto;
            content: "";
            padding-bottom: 4vw;
        }

        #lbox-close {

            position: absolute;
            top: 1.66667vw;
            right: 1.66667vw;
            width: 8vw;
            height: 8vw;
            background: url(/CampImg/13247/header/white-xed.svg) no-repeat center top transparent;
            background-position: center center;
            background-size: 3.46667vw 3.46667vw;
            cursor: pointer;
            z-index: 999;

        }

        #lb-headbox h1 {

            font-family: Poppins;
            font-style: normal;
            font-weight: bold;
            font-size: 5.33333vw;
            line-height: 8.8vw;

            text-align: center;
            margin: 0px;


            color: #1E1E1E;

        }

        #lb-headbox > div > span {

            font-family: Roboto;
            font-style: normal;
            font-weight: 500;
            font-size: 4vw;
            line-height: 5.86667vw;
            text-align: center;
            letter-spacing: 0.02em;
            margin: auto;
            margin-top: 3.46667vw;
            display: block;
            width: 76%;
            margin-bottom: 4.8vw;
            color: #1E1E1E;
        }

        #lb-continuebtn {

            margin: auto;
            background: #C1272D;
            border-radius: 17.33333vw;
            line-height: 12vw;
            color: white;
            cursor: pointer;
            text-transform: uppercase;
            font-family: Poppins;
            font-style: normal;
            font-weight: 600;
            font-size: 3.73333vw;
            min-width: 40.0vw;
            display: inline-block;
            text-align: center;
            margin-top: 7vw;
            margin-bottom: 6vw;


        }

        #lb-continuebtn:hover {
            background-color: #ee4853;
        }


        #hf-heading {

            background: transparent;
            text-align: center;
            display: flex;
            width: 100%;
            height: 0px;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        /** lb button on header
        #lbprogress-btn {

            text-align: center;
            color: #fff;
            margin: 0px;
            padding-left: 0px;
            padding-right: 0px;
            border-radius: 50%;
            height: 13.3vw;
            line-height: 13.3vw;
            display: flex;
            align-items: center;
            flex-direction: row;
            justify-content: space-around;
            font-family: Roboto;
            font-style: normal;
            font-weight: normal;
            font-size: 2.93333vw;
            cursor: pointer;
            min-width: 0vw;
            border: 0px solid #fff;
            box-sizing: border-box;
            position: relative;
            top: 1px;
            position: fixed;
            top: 15px;
            width: 13.3vw;
            right: 15px;
            background: #00419C;
            z-index: 99999;


        }

        #lbprogress-btn img {

                width: auto;
    height: 6.3vw;
    position: relative;
    top: 1px;

        }
    **/

        #hf-head-cont {

            margin: auto;
            width: 100%;
            height: 9.86667vw;
            position: relative;
            text-align: left;
            margin-bottom: 0vw;
            padding-bottom: 4vw;

        }

        #hf-head-cont:after {

            position: absolute;
            width: 0px;
            height: 0px;
            border-top: 3vw solid white;
            border-left: 3vw solid transparent;
            border-right: 3vw solid transparent;
            left: 51.2vw;
            top: -5.5vw;
            content: "";
        }

        #hf-bar {

            height: 5.86667vw;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: row;
            margin: auto;
            width: 100%;

        }

        #label-bar {

            width: 82%;
            margin: auto;
            line-height: 4vw;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-direction: row;
            align-self: flex-start;
            margin-top: 0.8vw;
            position: relative;
            left: -0.7vw;

        }

        #label-bar > div {

            font-family: Roboto;
            font-style: normal;
            font-weight: bold;
            font-size: 2.66667vw;
            line-height: 3.2vw;
            text-align: center;
            letter-spacing: 0.04em;
            color: #fff;

        }

        #label-bar > div#t-offers, #label-bar > div#t-survey {

            color: #8fff00;

        }

        #label-bar > div#t-gold {
            position: relative;
            left: 1.86667vw;
        }

        #label-bar > div#t-silver {
            position: relative;
            left: 0.5vw;
        }

        #label-bar > div#t-platinum {
            position: relative;
            left: 1.3vw;
        }

        .i-bar {

            width: 13.66667vw;
            height: 1px;
            background: #fff;
            border-radius: 1.33333vw;
        }

        .loc {

            height: 5.86667vw;
            width: 4.26667vw;
            margin-right: 1.6vw;
            margin-left: 1.7vw;
            background: url(/CampImg/13247/header/lockgray.svg) no-repeat center center transparent;
            background-size: 4.26667vw 4.53333vw;

        }

        #t-deals {

            position: relative;
            left: 1vw;
        }

        #t-reward {

            position: relative;
            left: 1vw;
        }

        #hf-reward.loc {

            background: url(/CampImg/13247/header/whiterewardbox.svg);
            width: 5.33333vw;
            background-size: 5.33333vw 5.86667vw;

        }

        #hf-head-cont #survey, #hf-head-cont #offers {
            background-image: url(/CampImg/13247/header/green-blue-check.svg);
            background-size: 4.26667vw 4.26667vw;
        }

        #hf-head-cont .i-s, #hf-head-cont .i-o {
            height: 0.53333vw;
            background: #78D600;
        }

        .gold-page #hf-head-cont .i-silver, .platinum-page #hf-head-cont .i-silver, .platinum2-page #hf-head-cont .i-silver, .platinum-page #hf-head-cont .i-gold, .platinum2-page #hf-head-cont .i-gold {
            height: 1px;
            background: #78D600;
        }


        /** CLASSES COME FROM js added to BODY **/

        .silver-page #silver, .gold-page #gold, .platinum-page #platinum, .platinum2-page #platinum, #deals.loc {
            background: url(/CampImg/13247/header/white-circle.svg);
            background-size: 4.26667vw 4.26667vw;
            background-repeat: no-repeat;
            background-position: center center;
        }


        .gold-page #silver, .platinum-page #gold, .platinum-page #silver, .platinum2-page #gold, .platinum2-page #silver {

            background-image: url(/CampImg/13247/header/green-circle.svg);
            background-size: 4.26667vw 4.26667vw;
        }

        .silver-page #label-bar > div#t-silver, .gold-page #label-bar > div#t-gold, .platinum-page #label-bar > div#t-platinum, .platinum2-page #label-bar > div#t-platinum, #label-bar > div#t-reward {

            color: #fff;
            font-weight: 600;

        }

        .gold-page #label-bar > div#t-silver, .platinum-page #label-bar > div#t-gold, .platinum2-page #label-bar > div#t-gold, .platinum-page #label-bar > div#t-silver, .platinum2-page #label-bar > div#t-silver {

            color: #78D600;
        }


        /** NOTIFICATION  on header

    #lbprogress-btn.pending:after {
        position: absolute;
    right: -1.3vw;
    top: 0vw;
    line-height: 4.7vw;
    color: white;
    content: "1";
    background: #EE4853;
    border-radius: 50%;
    text-align: center;
    font-weight: 600;
    font-family: Roboto;
    width: 4.5vw;
    height: 4.5vw;
    font-size: 2.2vw;
}
    **/

        /** TERMS **/


        #mrs {
            text-align: center;
            position: absolute;
            width: 100%;
            top: 0vw;
            padding-bottom: 0vw;
            left: 0px;
            text-transform: none;
            font-weight: normal;
            color: #fff;
            font-family: Roboto;
            font-size: 3.93vw;
            background: #fff;
            z-index: 9;
            line-height: 17vw;
            padding-top: 0vw;
            height: auto;
            display: block;
            box-sizing: border-box;
            box-shadow: 0px 15px 6vw rgba(0, 0, 0, 0.08);
        }

        #mrs > span {

            font-family: Poppins;
            font-style: normal;
            font-weight: bold;
            font-size: 5.06vw;
            line-height: 6.93vw;
            text-align: center;
            letter-spacing: 0.02em;
            color: #1E1E1E;
            margin: auto;
            width: 89%;
            display: block;
            padding: 0;
            height: 27vw;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        #mrs > span#current_page_completed {
            display: none;
            color: #78D600;

        }

        #mrs > span#current_page_completed i {
            color: #1E1E1E;
            font-style: normal;
        }

        #mrs > span > i {

            text-transform: none;
            font-style: normal;
        }


        #mrs > span b {
            color: #C1272D;
            text-transform: uppercase;
        }


        #mrs > div {
            text-align: center;
            height: 11.2vw;
            padding-bottom: 0vw;
            background: #135EC7;;
            line-height: 11.2vw;
            font-size: 2.93vw;
            /*margin-bottom: 9vw;*/
            font-weight: 500;

        }

        #mrs > div img {

            max-height: 100%;
        }

        #lb-offers-progress.loading + #p-requirements {
            display: none;
        }

        #p-requirements {

            margin: auto;
            width: 88%;
            text-align: justify;
            color: #939393;
            font-size: 13px;
            line-height: 18px;
            font-family: Roboto;
            padding-bottom: 25vw;
            padding-top: 150px;

        }

        #p-requirements a {

            color: #939393;
        }

        #p-requirements * {

            font-family: Roboto;
        }

        #p-requirements li {

            font-size: 13px;
            line-height: 18px;
            font-family: Roboto;
        }

        #p-requirements > center > span {
            font-family: Roboto;
            text-decoration: underline;
            font-weight: 500;
            font-size: 3.46vw;
            display: inline-block;
            margin-bottom: 7vw;
            color: #939393;
            cursor: pointer;
        }

        #p-requirements p {
            font-family: Roboto;
            font-style: normal;
            font-weight: normal;
            font-size: 13px;
            line-height: 18px;

            text-align: justify;
            letter-spacing: 0.01em;
            margin: 0px;
            padding-bottom: 15px;

            color: #939393;
        }


        /* width */
        #lb-inner-cont::-webkit-scrollbar {
            width: 2px;
        }

        /* Track */
        #lb-inner-cont::-webkit-scrollbar-track {
            box-shadow: inset 0 0 5px grey;
            border-radius: 10px;
        }

        /* Handle */
        #lb-inner-cont::-webkit-scrollbar-thumb {
            background: #1e1e1e;
            border-radius: 10px;
        }

        /* Handle on hover */
        #lb-inner-cont::-webkit-scrollbar-thumb:hover {
            background: #1e1e1e;
        }

        body.lbshown {

            overflow: hidden;
        }


        /** OFFER SET **/

        .lboffer-item {

            width: 90%;
            margin: auto;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 3.2vw;
            position: relative;

        }

        #offer-set-disclaimer {
            margin: auto;
            width: 87%;
            font-size: 3.76vw;
            padding: 0vw 0vw 0vw 0vw;
            box-sizing: border-box;
            color: #C1272D;
            line-height: 5.26vw;
            font-family: roboto;
            font-style: normal;
            padding-bottom: 10vw;
            display: none;
            margin-top: 8vw;

        }

        #offer-sets {

            margin: auto;
            width: 93%;
        }

        #viewoffer-sets {
            position: relative;
            padding-top: 5vw;
            width: 93%;
            margin: auto;
            border-top: 1px solid #EAEAEA;
            margin-top: 8vw;
        }

        #viewoffer-sets:before {

            content: attr(data-description);
            font-family: Roboto;
            font-style: normal;
            font-weight: 500;
            font-size: 3.46vw;
            line-height: 4.8VW;
            text-align: center;
            letter-spacing: 0.02em;
            display: block;
            padding-bottom: 5vw;
            color: #525252;
            text-transform: none;

        }

        #offer-set-disclaimer .lbback {
            margin-top: 10.13vw;
        }

        #viewoffer-sets .lboffer-title {

            font-size: 3.46vw;

            color: #525252;

        }

        .dis-container {
            border-radius: 4px;
            border: 1px solid #C1272D;
            text-align: center;
            box-sizing: border-box;
            position: relative;
            padding: 4vw 6vw;
            box-shadow: 2.66vw 3.73vw 3.73vw rgba(0, 0, 0, 0.13);

        }

        .dis-container:before {

            content: "";
            position: absolute;
            top: -4vw;
            left: 50%;
            margin-left: -3.16vw;
            width: 5.33vw;
            height: 5.33vw;
            line-height: 5.33vw;
            background: url(/CampImg/13247/header/blindericon.svg) no-repeat center center #fff;
            background-repeat: no-repeat;
            background-size: 5.33vw;
            opacity: 1;
            font-size: 2.93vw;
            color: #C1272D;
            display: block;
            border: 1vw solid white;
        }

        .dis-container > p {

            margin: 0px;
            font-size: 4vw;
            text-transform: uppercase;
            letter-spacing: 0.9vw;
            padding-bottom: 0.9vw;
        }

        .dis-container em {

            text-decoration: underline;
            font-style: normal;
        }

        div#lb-offers-progress.active #offer-set-disclaimer {

            display: block;
        }

        .lboffer-empty {

            margin: auto;
            width: 75%;
            font-size: 4.26vw;
            padding: 12vw 0vw 0vw 0vw;
            box-sizing: border-box;
            color: #1e1e1e;
            line-height: 6vw;
            font-family: Poppins;
            font-style: normal;
            font-weight: bold;

        }

        .lboffer-empty p {
            margin: 0px;
            padding: 3vw 0vw;
        }

        .lboffer-empty p em {

            font-style: normal;
            font-weight: bold;
            color: #c1272d;
            text-decoration: underline;
            text-transform: uppercase;
        }

        .lbback, .lbcontinue {

            margin: auto;
            line-height: 11.73vw;
            border-radius: 11.73vw;
            background: #c1272D;
            width: 42.66vw;
            text-transform: uppercase;
            font-family: Poppins;
            font-style: normal;
            font-weight: 600;
            font-size: 3.73vw;
            text-align: center;
            color: #FFFFFF;
            margin-top: 10vw;
            cursor: pointer;
        }

        .lbcontinue {
            display: none;
        }

        .lboffer-item:after {

            content: "";
            position: absolute;
            top: 3.7vw;
            right: 0px;
            width: 5.33vw;
            height: 5.33vw;
            background-size: 5.33vw;
            background-repeat: no-repeat;
        }

        #offer-sets .lboffer-item:before {

            content: "";
            position: absolute;
            top: 3.7vw;
            right: 7vw;
            width: 5.33vw;
            height: 5.33vw;
            background-size: 5.33vw;
            background-repeat: no-repeat;
        }


        #offer-sets .lboffer-item.Silver:before {

            background-image: url(/CampImg/13247/header/silver.svg);
        }

        #offer-sets .lboffer-item.Gold:before {

            background-image: url(/CampImg/13247/header/gold.svg);
        }

        #offer-sets .lboffer-item.Platinum:before, #offer-sets .lboffer-item.Platinum2:before {

            background-image: url(/CampImg/13247/header/platinum.svg);
        }


        #viewoffer-sets .lboffer-item {

            cursor: pointer;
        }

        #viewoffer-sets .lboffer-info {
            padding-top: 0vw;
            width: 48vw;
        }

        #viewoffer-sets .lboffer-item:after {

            content: "";
            position: absolute;
            top: 2vw;
            right: 0px;
            width: 5.33vw;
            height: 5.33vw;
            line-height: 5.33vw;
            background: url(/CampImg/13247/header/blindericon.svg) no-repeat center center transparent;
            background-repeat: no-repeat;
            background-size: 5.33vw;
            opacity: 1;
            font-size: 2.93vw;
            color: #C1272D;
            display: block;

        }


        .lboffer-item.completed:after {

            background-image: url(/CampImg/13247/header/full-on-check.svg) !important;
        }


        .lboffer-icon {

            height: 10.66vw;
            width: 10.66vw;
            border-radius: 50%;
            border: 1px solid #a5a5a5;
            padding: 0.8VW;
            display: flex;
            overflow: hidden;
            margin-right: 4VW;
        }

        #viewoffer-sets div.pending .lboffer-status:before {

            display: none !important;

        }

        #viewoffer-sets .lboffer-icon {

            height: 8vw;
            width: 8vw;
            border-radius: 50%;
            border: 1px solid #a5a5a5;
            padding: 0.5VW;
            display: flex;
            overflow: hidden;
            margin-right: 2.6VW;
        }


        .lboffer-icon img {

            width: 100%;
            height: auto;
            border-radius: 50%;
        }

        .lboffer-info {
            padding-top: 0vw;
            width: 48vw;

        }

        .lboffer-title {

            font-family: Roboto;
            font-style: normal;
            font-weight: normal;
            font-size: 4vw;
            line-height: 5.86vw;
            color: #1E1E1E;
            display: block;
            text-align: left;
            width: 93%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .lboffer-status, .lboffer-status:before {

            content: "Deal viewed - Checking completion...";
            font-family: Roboto;
            font-style: normal;
            font-weight: 500;
            font-size: 2.93vw;
            line-height: 4.26vw;
            letter-spacing: 0.02em;
            display: none;
            color: #3897F0;
            text-align: left;

        }

        div.pending .lboffer-status:before {
            content: "Deal viewed - Checking completion...";

        }

        div.completed .lboffer-status:before {
            content: "Completed!";
            color: #78D600;
        }

        /*** WEB RESPONSIVE **/

        @media all and (min-width: 868px) {


            #p-requirements {

                padding-bottom: 35px;
            }

            #lb-headbox #lb-head-band {
                padding-top: 19px;
                top: 312px;
                width: 390px;
                left: 15px;
            }

            #mrs {
                text-align: center;
                position: absolute;
                width: 100%;
                top: 0px;
                left: 0px;
                text-transform: none;
                font-weight: normal;
                color: #fff;
                font-family: Roboto;
                font-size: 15px;
                padding: 0px;
                line-height: 42px;
                height: 42px;
            }

            #p-requirements > center > span {

                font-size: 14px;

                margin-bottom: 34px;

                padding-top: 17px;

            }


            #lb-headbox {

                top: 50%;
                left: 50%;
                margin-left: -210px;
                margin-top: -215px;
                max-width: 420px;
                background: white;
                width: 420px;
                min-height: 430px;
                box-sizing: border-box;
                transform: translate(0, 0);
                max-height: 395px;
                border-radius: 5px;
                overflow: hidden;


            }

            #lb-headbox > div#lb-inner-cont {

                padding: 13px 10px 45px 10px;
                height: 328px;

            }

            #lb-offers-progress.loading:after {
                width: 30px;
                height: 30px;
                top: 50%;
                left: 50%;
                margin-left: -15px;
                margin-top: -15px;
                border-top: 3px solid #1172d7;

            }

            #lbox-close {


                top: 7px;
                right: 6px;
                width: 30px;
                height: 30px;
                background-size: 15px 15px;
                cursor: pointer;

            }

            #lb-headbox h1 {


                font-size: 20px;
                line-height: 33px;

                margin: 0px;


            }

            #lb-rewardimg img {
                max-width: 150px;
                max-height: 83px;
            }

            #lb-headbox > div > span {

                font-size: 15px;
                line-height: 22px;
                text-align: center;
                letter-spacing: 0.02em;

                margin-top: 13px;
                display: block;

                margin-bottom: 18px;

            }

            #lb-continuebtn {


                border-radius: 65px;
                line-height: 45px;

                font-size: 14px;
                min-width: 206px;

                margin-top: 30px;
                margin-bottom: 20px;


            }


            /** On header
       #lbprogress-btn {
           padding-left: 0px;
            padding-right: 0px;
            border-radius: 50%;
            height: 44px;
            line-height: 44px;
            cursor: pointer;
            font-size: 11px;
            min-width: 0px;
            border: 0px solid #fff;
            width: 44px;
        }


        #lbprogress-btn.pending:after {

            right: -4px;
            top: -1px;
            line-height: 15px;
            width: 15px;
            height: 15px;
            font-size: 10px;

        }

        #lbprogress-btn img {

               width: 21px;
                height: auto;
                margin-left: 0px;
        }
**/
            #hf-heading {

                height: 0px;

            }

            .lboffer-item {

                margin-bottom: 16px;
            }

            #hf-head-cont:after {

                border-top: 10px solid white;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                left: 234px;
                top: -19px;

            }

            #hf-head-cont {

                width: 390px;
                height: 37px;
                margin-bottom: 0px;
                padding-bottom: 20px;


            }

            #lb-offers-progress {
                padding: 15px 0vw;
                min-height: 288px;

            }

            .lboffer-icon {
                height: 46px;
                width: 46px;
                border-radius: 50%;
                border: 1px solid #a5a5a5;
                padding: 2px;
                display: flex;
                overflow: hidden;
                margin-right: 15px;
            }

            .lboffer-title {

                font-size: 15px;
                line-height: 22px;

            }

            .lboffer-status, .lboffer-status:before {

                font-size: 13px;
                line-height: 19px;

            }

            .lboffer-item:after {
                content: "";
                position: absolute;
                top: 5px;
                right: 0px;
                width: 21px;
                height: 21px;
                background-size: 21px;

            }


            .lboffer-info {
                padding-top: 7px;
                width: 240px;
            }

            #offer-set-disclaimer {
                margin: auto;
                width: 83%;
                font-size: 15px;
                padding: 15px 0vw 0vw 0vw;

                line-height: 22px;

                padding-bottom: 25px;

            }

            .lbback {

                line-height: 44px;
                border-radius: 44px;

                width: 160px;

                font-size: 14px;

                margin-top: 33px;

            }


            div#lb-offers-progress.active:before {

                font-size: 15px;
                line-height: 17px;

                width: 76%;
                margin: auto;
                padding: 10px 0px 25px 0px;

            }

            .lboffer-empty {
                margin: auto;
                width: 65%;
                font-size: 15px;
                padding: 20px 0vw 0vw 0vw;
                box-sizing: border-box;
                color: #C1272D;
                line-height: 22px;
                font-family: roboto;
                font-style: normal;
            }

            #lb-headbox > h4:before {

                padding-bottom: 12px;

            }

            #lb-headbox > h4 {

                padding: 0vw 0vw 17px 0vw;

            }


            #hf-bar {

                height: 27px;


            }

            #label-bar {

                line-height: 15px;
                margin-top: 0px;
                width: 86%;

            }

            #label-bar > div {


                font-size: 10px;
                line-height: 12px;
                text-align: center;
                letter-spacing: 0.04em;


            }

            #label-bar > div#t-offers, #label-bar > div#t-survey {

                color: #fff;

            }

            #label-bar > div#t-gold {

                left: 7px;
            }

            #label-bar > div#t-platinum {

                left: 5px;
            }

            #label-bar > div#t-silver {

                left: 1px;
            }


            .i-bar {

                width: 75px;
                height: 1px;

                border-radius: 5px;
            }

            .loc {

                height: 22px;
                width: 16px;
                margin-right: 5px;
                margin-left: 5px;

                background-size: 16px 17px;

            }


            #deals.loc {

                background-size: 16px auto;

            }

            #t-deals {

                left: 5px;
            }

            #t-reward {

                left: 5px;
            }

            #hf-reward.loc {


                width: 20px;
                background-size: 20px 22px;

            }

            #hf-head-cont #survey, #hf-head-cont #offers {

                background-size: 16px 16px;
            }

            #hf-head-cont .i-s, #hf-head-cont .i-o {
                height: 2px;

            }


        }

    </style>

    <div class="default-entity" id="shipping-loader">
        <script src="js/path.js"></script>
        <script type="text/javascript">
            var varDuration = 8500;
            var rewardDuration = 1000;
            var subStepsDuration = 2300;
            var islider = "";
            var w = "";
            var animItem = "";
            var stepButtonClick = false;
            var isUserClick = true;


            $(window).on('initiateGlobalLoader', function (e) {


                $(".vname").html(window.firstName);


                initGlobalLoader();


            });


            var showTheWall = function () {

                sendGoogleTrackEvent('02. redirect');
                window.location.href = window.location.href + 'wall.php';

                $("body").removeClass('loading');
                $("#wall-cid").show();
                $("#shipping-loader").fadeOut();


            }

            var trackUserClick = function () {
                // track clicks if user performed an action (no timeout)
                if (isUserClick) {


                    if (typeof jOfferCrossSubmit === 'function') {

                        jOfferCrossSubmit(438, 7);

                    }


                }

            }

            var initGlobalLoader = function () {

                $("#shipping-loader").css('display', 'flex');


                $.getJSON('maploader.json', function (data) {

                    animItem = bodymovin.loadAnimation({
                        wrapper: document.getElementById('svgContainer'),
                        animType: 'svg',
                        loop: false,
                        autoplay: false,
                        animationData: data
                    });

                    $("body").addClass('loading');
                    $("#wall-cid").hide();


                    $("#map-loader-bar").animate({left: '0px'}, {

                        duration: varDuration,
                        complete: function () {

                            showTheWall();
                        }

                    });


                    setTimeout(function () {

                        initSteps();

                    }, 800);


                });


            }


            var initSteps = function () {
                var counter = 1;
                var spans = $(".ltext-block p").length;

                $(".ltext-block p").eq(0).fadeIn(200);

                showAndHidePin(counter, spans);

                islider = setInterval(function () {
                    if (counter < spans) {


                        // $(".ltext-block p").eq(counter-1).hide();
                        // $(".ltext-block p").eq(counter).fadeIn(200);
                        counter++;

                        showAndHidePin(counter, spans);


                    } else {
                        clearInterval(islider);

                    }
                }, subStepsDuration);
            }


            var showAndHidePin = function (position, total) {

                var greetings = ["Done!", "Finished!", "Complete this &<br>the reward could be yours!"];

                var pin = '<div id="uv-pin" class="mappin activated pinposition' + position + '"><span>' + greetings[position - 1] + '</span></div>';

                $("#lmap-container").append(pin);


                setTimeout(function () {

                    if (position != 3) {

                        $(".mappin").addClass('completed');

                        setTimeout(function () {

                            $("#uv-pin").remove();

                        }, 400);

                    }

                }, 1000);


            }
        </script>
        <style type="text/css">


            body {
                margin: 0px;
                padding: 0px;
                font-family: 'Roboto', sans-serif;
            }


            body.loading {

                overflow: hidden;
                height: 100%;
            }

            #svgContainer {

                margin: auto;
                position: relative;
                z-index: 99;
                height: 88vw;
                width: 85.33333vw;
                background: #fff;
                overflow: hidden;
            }


            #svgContainer svg {
                width: 176% !important;
                height: 176% !important;
                z-index: 9;
                position: absolute;
                top: 49%;
                left: 54%;
                transform: translate(-48.4%, -50%) !important;
            }


            #lmap-container {

                position: relative;
                width: 85.33333vw;
                height: 85.33333vw;
                margin: auto;
                margin-bottom: 4vw;

            }


            #shipping-loader {
                font-family: 'Poppins', sans-serif;
                position: fixed;
                z-index: 99999;
                top: 0px;
                left: 0px;
                height: 100%;
                width: 100%;
                padding: 0px 0px;
                box-sizing: border-box;
                background: #EEEEEE;
                display: flex;
                justify-content: center;
                justify-items: center;
                align-items: center;
                display: none;
                flex-direction: column;

            }

            #s-main {
                margin: 2.8vw 0px 6vw 0px;
                width: 93%;
                max-width: 100%;
                background: white;
                padding-top: 22vw;
                box-sizing: border-box;
                position: relative;
                overflow: hidden;
                padding-bottom: 4vw;
                border-radius: 1.33333vw;

            }


            #loader-contbtn {

                margin: 0px;
                width: 64.53333vw;
                height: 13.33333vw;
                line-height: 13.33333vw;
                border-radius: 14.66667vw;
                border: 0.53333vw solid #fff;
                background: #EE4853;
                color: white;
                font-size: 5.33333vw;
                font-family: Poppins;
                font-style: normal;
                font-weight: 600;
                cursor: pointer;
                z-index: 99;
                text-align: center;
                position: relative;
                margin-bottom: 0vw;
                opacity: 0;


                transition: all .3s;
                left: 120%;


            }

            #loader-contbtn.pulsate {


                -webkit-animation: pulsate 1.5s ease-in infinite;


                animation: pulsate 1.5s ease-in infinite;
            }

            #loader-contbtn img {

                position: absolute;
                top: 4.8vw;
                right: 2.66667vw;
            }

            .ltext-block {

                text-align: center;
                padding-top: 0px;

                margin: auto;

                width: 92%;

                box-sizing: border-box;
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 8.53333vw;

            }

            .ltext-block p {

                display: none;
                font-family: Poppins;
                font-style: normal;
                font-weight: bold;
                font-size: 5.4vw;
                line-height: 8.0vw;
                margin: auto;
                opacity: 1;
                text-align: center;
                color: #000000;

            }

            .mappin {

                line-height: 11.5vw;
                min-height: 12vw;
                color: white;
                font-family: Poppins;
                font-style: normal;
                font-weight: bold;
                font-size: 4vw;
                text-align: center;
                letter-spacing: 0.01em;
                background: #C1272D;
                box-shadow: 2.66667vw 5.33333vw 2.93333vw rgba(0, 0, 0, 0.15);
                height: 12vw;
                position: absolute;
                display: inline-block;
                z-index: 9999;
                min-width: 28.8vw;
                box-sizing: border-box;
                padding-left: 2.13333vw;
                padding-right: 2.13333vw;
                border-radius: 13.33333vw;
                -webkit-animation: popOut 0.3s ease-in forwards;
                animation: popOut 0.3s ease-in forwards;
                -webkit-animation-iteration-count: 1;
                animation-iteration-count: 1;


            }


            .mappin span {

                text-overflow: ellipsis;
                display: block;
                overflow: hidden;
                width: 100%;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .mappin:after {

                border-left: 4vw solid transparent;
                border-top: 4vw solid #C1272D;
                height: 0px;
                width: 0px;
                position: absolute;
                left: 50%;
                margin-left: -4vw;
                content: "";
                bottom: -2.66667vw;
                border-right: 4vw solid transparent;

            }


            .mappin.activated {

                -webkit-animation: popIn 0.3s ease-in forwards;

                animation: popIn 0.3s ease-in forwards;
                -webkit-animation-iteration-count: 1;
                animation-iteration-count: 1;
            }

            .mappin.activated.completed {

                -webkit-animation: popOut 0.3s ease-in forwards;

                animation: popOut 0.3s ease-in forwards;
                -webkit-animation-iteration-count: 1;
                animation-iteration-count: 1;
            }

            .mappin.pinposition1 {

                top: 66%;
                left: 11.5%;
                width: 22.93vw;


            }

            .mappin.pinposition2 {

                top: 53%;
                left: 61.5%;
                width: 30.13VW;


            }

            .mappin.pinposition3 {

                top: 16%;
                left: 17.5%;
                width: auto;
                min-width: 55.2vw;
                max-width: 55.46667vw;
                height: auto;
                border-radius: 14.66667vw;
                padding: 0px 5.33333vw;
                min-height: 18.4vw;

            }

            .mappin.pinposition4 {

                top: 12%;
                left: -0.5%;


            }


            .mappin.pinposition3 span {

                display: block;
                overflow: hidden;
                width: 100%;
                text-overflow: initial;
                white-space: unset;
                line-height: 5.6vw;
                padding: 3.06667vw 0.53333vw;
                font-size: 4vw;
                font-weight: 600;
                box-sizing: border-box;

            }


            #last-steps-header {

                display: flex;
                justify-content: center;
                align-content: center;
                align-items: center;
                font-family: Poppins;
                font-style: normal;
                font-weight: bold;
                font-size: 8vw;
                text-align: center;
                margin: 0px;
                width: 100%;
                color: #FFFFFF;


            }


            #loder-reward-cont {
                width: 36.66667vw;
                height: 23.2vw;
                margin: auto;
                position: absolute;
                top: -17vw;
                z-index: 99999;
                left: 50%;
                margin-left: -18.33333vw;

            }

            #loder-reward-cont img {
                max-height: 100%;
            }

            #map-loader-bar {

                height: 1.33333vw;
                position: absolute;
                bottom: 0px;
                width: 100%;
                left: -100%;
                background: #00419C;
                border-radius: 1.33333vw;
                display: block;
                z-index: 9999999;
                opacity: 0;


            }


            @media all and (min-width: 868px) {


                #svgContainer {

                    margin: auto;
                    position: relative;
                    z-index: 99;
                    height: 330px;
                    width: 320px;
                    background: #fff;
                    overflow: hidden;
                }


                #svgContainer svg {
                    width: 176% !important;
                    height: 176% !important;
                    z-index: 9;
                    position: absolute;
                    top: 49%;
                    left: 54%;
                    transform: translate(-53%, -50%) !important;
                }


                #lmap-container {

                    position: relative;
                    width: 320px;
                    height: 320px;
                    margin: auto;
                    margin-bottom: 15px;

                }


                #shipping-loader {
                    font-family: 'Poppins', sans-serif;
                    position: fixed;
                    z-index: 99999;
                    top: 0px;
                    left: 0px;
                    height: 100%;
                    width: 100%;
                    padding: 0px 0px;
                    box-sizing: border-box;
                    background: #EEEEEE;
                    display: flex;
                    justify-content: center;
                    justify-items: center;
                    align-items: center;
                    display: none;
                    flex-direction: column;

                }

                #s-main {
                    margin: 18px 0px 45px 0px;
                    width: 93%;
                    max-width: 100%;
                    background: white;
                    padding-top: 105px;
                    box-sizing: border-box;
                    position: relative;
                    overflow: hidden;
                    padding-bottom: 15px;
                    border-radius: 5px;

                }


                #loader-contbtn {

                    margin: 0px;
                    width: 242px;
                    height: 50px;
                    line-height: 50px;
                    border-radius: 55px;
                    border: 2px solid #fff;
                    background: #EE4853;
                    color: white;
                    font-size: 20px;
                    font-family: Poppins;
                    font-style: normal;
                    font-weight: 600;
                    cursor: pointer;
                    z-index: 99;
                    text-align: center;
                    position: relative;
                    margin-bottom: 35px;
                    opacity: 0;


                    transition: all .3s;
                    left: 120%;


                }

                #loader-contbtn.pulsate {


                    animation: pulsate 1.5s ease-in infinite;
                }

                #loader-contbtn img {

                    position: absolute;
                    top: 18px;
                    right: 10px;
                }

                .ltext-block {

                    text-align: center;
                    padding-top: 0px;

                    margin: auto;

                    width: 92%;

                    box-sizing: border-box;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    min-height: 32px;

                }

                .ltext-block p {

                    display: none;
                    font-family: Poppins;
                    font-style: normal;
                    font-weight: bold;
                    font-size: 24px;
                    line-height: 30px;
                    margin: auto;
                    opacity: 1;
                    text-align: center;
                    color: #FFFFFF;

                }

                .mappin {

                    line-height: 45px;
                    min-height: 45px;
                    color: white;
                    font-family: Poppins;
                    font-style: normal;
                    font-weight: bold;
                    font-size: 15px;
                    text-align: center;
                    letter-spacing: 0.01em;
                    background: #C1272D;
                    box-shadow: 10px 20px 11px rgba(0, 0, 0, 0.15);
                    height: 45px;
                    position: absolute;
                    z-index: 9999;
                    width: 108px;
                    box-sizing: border-box;
                    padding-left: 8px;
                    padding-right: 8px;
                    border-radius: 50px;
                    animation: popOut 0.3s ease-in forwards;
                    animation-iteration-count: 1;
                    min-width: 93px;


                }


                .mappin span {

                    text-overflow: ellipsis;
                    display: block;
                    overflow: hidden;
                    width: 100%;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .mappin:after {

                    border-left: 15px solid transparent;
                    border-top: 15px solid #C1272D;
                    height: 0px;
                    width: 0px;
                    position: absolute;
                    left: 50%;
                    margin-left: -15px;
                    content: "";
                    bottom: -10px;
                    border-right: 15px solid transparent;

                }


                .mappin.activated {

                    animation: popIn 0.3s ease-in forwards;
                    animation-iteration-count: 1;
                }

                .mappin.activated.completed {

                    animation: popOut 0.3s ease-in forwards;
                    animation-iteration-count: 1;
                }

                .mappin.pinposition1 {

                    top: 67%;
                    left: 9.5%;
                    width: 123px;

                }

                .mappin.pinposition2 {

                    top: 53%;
                    left: 64.5%;

                    width: 93px;


                }

                .mappin.pinposition3 {

                    top: 16%;
                    left: 19%;
                    width: auto;
                    min-width: 108px;
                    max-width: 208px;
                    height: auto;
                    border-radius: 55px;
                    padding: 0px 20px;
                    min-height: 69px;

                }

                .mappin.pinposition4 {

                    top: 12%;
                    left: -0.5%;


                }


                .mappin.pinposition3 span {

                    display: block;
                    overflow: hidden;
                    width: 100%;
                    text-overflow: initial;
                    white-space: unset;
                    line-height: 21px;
                    padding: 13px 2px;
                    font-size: 15px;
                    font-weight: 600;
                    box-sizing: border-box;

                }


                #last-steps-header {

                    display: flex;
                    justify-content: center;
                    align-content: center;
                    align-items: center;
                    font-family: Poppins;
                    font-style: normal;
                    font-weight: bold;
                    font-size: 30px;
                    text-align: center;
                    margin: 0px;
                    width: 100%;
                    color: #FFFFFF;


                }


                #loder-reward-cont {
                    width: 160px;
                    height: 102px;
                    margin: auto;
                    position: absolute;
                    top: -75px;
                    z-index: 99999;
                    left: 50%;
                    margin-left: -80px;

                }

                #loder-reward-cont img {
                    max-height: 100%;
                }

                #map-loader-bar {

                    height: 5px;
                    position: absolute;
                    bottom: 0px;
                    width: 100%;
                    left: -100%;
                    background: #00419C;
                    border-radius: 5px;
                    display: block;
                    z-index: 9999999;
                    opacity: 0;


                }


                #s-main {

                    width: 550px;
                    border-radius: 5px;

                }


            }


            /** ANIMATIONS **/


            @keyframes popIn {

                0% {
                    transform: scale(0);
                }

                70% {

                    transform: scale(1.4);
                }

                100% {

                    transform: scale(1)
                }


            }


            @keyframes popOut {

                0% {
                    transform: scale(1);
                }

                30% {

                    transform: scale(1.4);
                }

                100% {

                    transform: scale(0)
                }

            }

            @keyframes pulsate {

                0% {

                    left: 5px;

                }

                10% {

                    left: -5px
                }

                20% {

                    left: 5px
                }

                30% {

                    left: 0px;
                }

                100% {

                    left: 0px;
                }

            }

        </style>


        <div id="last-steps-header">
            <div class="ltext-block">
                <p style="display: block">You are now entering the last stage <br><br>Thanks for your participation so far!</p>
                <p>Great work!</p>
                <p>Reserving yor Reward... </p>
            </div>
        </div>

        <div id="s-main">

            <div id="lmap-container">
                <div id="loder-reward-cont" class="DynDivCont1">
                    <img src="<?=$imageName;?>" alt="">
                </div>
                <div id="svgContainer"></div>
            </div>

            <div id="map-loader-bar"></div>
        </div>


    </div>

</div>

<script>
    $(document).ready(function () {
        $("#us-all-wrapper").css('opacity', 1)
    });
</script>
</body>
</html>