    <!DOCTYPE html>
    <html lang="en-US">
    <head>
        <title>Mago Digital</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="50K Seguidores. 
Te enseño todo lo que sé sobre la web. ">
        <meta name="keywords" content="Hy.page">
        <meta name="author" content="Hy.pages">
        <link href="/fonts/avenir-lt-std/style.css" rel="stylesheet" type="text/css"/>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
        <!-- Javascripts -->
        <script
            src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>
        <style>
            body, p, div, button {
                font-family: 'Avenir', sans-serif;
            }
        </style>
        <link rel="canonical" href="https://camilocuadros.com/"/>
        <meta property="og:image" content="https://ucarecdn.com/ec735dc8-1ed9-4d18-9c37-819cbbafaed3/"/>
        <meta property="og:url" content="http://camilocuadros.com/"/>
        <meta property="og:title" content="Mago Digital"/>
        <meta property="og:description" content="50K Seguidores. 
Te enseño todo lo que sé sobre la web. "/>
        <meta name="twitter:card" content="summary_large_image">
        <meta name="twitter:site" content="http://camilocuadros.com/">
        <meta name="twitter:title" content="Mago Digital">
        <meta name="twitter:description" content="50K Seguidores. 
Te enseño todo lo que sé sobre la web. ">
        <meta name="twitter:image:src" content="https://ucarecdn.com/ec735dc8-1ed9-4d18-9c37-819cbbafaed3/">
        

                    <link rel="icon" href="https://cdn.hyax.com/9d8cfbfc-f170-41ca-b113-3a8b1cf680ff/"/>
            		
		<script>
		    function resizeIframe(iframe) {
		  	        setTimeout(function () {
		  	            var height = iframe.contentWindow.document.body.scrollHeight;
		  	            var height_increase = height + 10;
		  	            iframe.height = height_increase + "px";
		  	            console.log('resizing it here');
		  	            setTimeout(function () {
		  	                var height = iframe.contentWindow.document.body.scrollHeight;
		  	                var height_increase = height + 10;
		  	                iframe.height = height_increase + "px";
		  	                console.log('resizing it here #2');
		  	            }, 4000);
		  	        }, 2000);
		  	    }
		</script>
			
    </head>
    <body>
    <style>
    .loader {
        border: 16px solid #f3f3f3; /* Light grey */
        border-top: 16px solid #3498db; /* Blue */
        border-radius: 50%;
        width: 120px;
        height: 120px;
        animation: spin 2s linear infinite;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    .centertwo {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: #222;
        width: 100%;
        height: 100%;
    }
</style>
<div class='centertwo' id="main-loader">
    <div class="loader"></div>
</div>
<script>
    $(document).ready(function () {
        $("#main-loader").hide();
		
    });
</script>
    <!-- Google Tag Manager -->
    <script>(function (w, d, s, l, i) {
            w[l] = w[l] || [];
            w[l].push({
                'gtm.start':
                    new Date().getTime(), event: 'gtm.js'
            });
            var f = d.getElementsByTagName(s)[0],
                j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : '';
            j.async = true;
            j.src =
                'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
            f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', 'false');</script>
    <!-- End Google Tag Manager -->
    


    <!-- Google Tag Manager (noscript) -->
    <noscript>
        <iframe src="https://www.googletagmanager.com/ns.html?id=false"
                height="0" width="0" style="display:none;visibility:hidden"></iframe>
    </noscript>
    <!-- End Google Tag Manager (noscript) -->
    <script>
    function closemodal(modal_id) {
        var v = document.getElementById(modal_id);
        v.className = "modal";
        var reset = "/link-pages/blank?project_id=2989";
        $('#purchase-iframe').attr('src', reset);
    }
</script>

    <div id="full_navigation" style='position: fixed; top: 0px; left: 0px; width: 100%;
			padding: 10px; background-color: #222; color: #FFF; font-size: 13px; z-index: 1; text-align: center'>
        <a style='text-decoration: underline; color: #FFFFFF' href='https://camilocuadros.com/login'>Login</a>  | <a href="https://camilocuadros.com/members" style='text-decoration: underline; color: #FFFFFF'>Members</a>     </div>
    <script src="https://kit.fontawesome.com/0976d4c02d.js" crossorigin="anonymous"></script>
<!-- put vue up top-->
<script src='//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js'></script>
<script src="https://hyax.com/vue/vue-color-master/dist/vue-color.min.js"></script>
<link href="/easyfonts/fonts.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.2/css/bulma.min.css">
<div id="design" v-cloak style='text-align: center; width: 100%;' :style="{ 'background-color': background_color }">
    <div class="modal" id="purchase-modal">
        <div class="modal-background"></div>
        <div class="modal-content">
            <!-- Any other Bulma elements you want -->
            <div class="box" style="padding: 0px; overflow: auto">
                <iframe id='purchase-iframe' src="/link-pages/blank?project_id=2989"
                        style="width: 450px; min-height: 550px; max-width: 100%" onload="resizeIframe(this)"></iframe>
                <div style="width: 100%; padding: 13px; text-align: center; font-size: 12px; color: #40c057;">
                    <i class="fas fa-lock" aria-hidden="true"></i> &nbsp; SECURE PAYMENTS BY STRIPE & PAYPAL
                </div>
            </div> <!-- end box -->
        </div> <!-- end modal-content -->
        <button class="modal-close is-large" aria-label="close" onclick="closemodal('purchase-modal')"
                style="padding: 5px; margin-right: 15px; min-width: initial; min-height: initial; border: 0px"></button>
    </div>
    <v-style v-cloak>
        #design::before { content: ""; background-image: url( {{ generateFullUrl(background_image) }} ); background-size: cover; position: absolute; top: 0px; right: 0px;
        bottom: 0px; left: 0px; opacity: {{ background_image_opacity }}; background-position: center; } .link-text::before { content: ""; background-color:
        {{ link_background_color }}; background-size: cover; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; opacity: 0.9; }
    </v-style>
    <div id="homepage-design"
         style='position: relative; width: 450px; max-width: 100%; padding: 30px; padding-top: 60px; margin: auto; min-height: 100vh'>
                    <img src="https://ucarecdn.com/193624a3-f50b-48bf-9233-7ce82eda92d6/-/preview/"
                 style="border-radius: 100px; max-width: 80px; text-align: center; margin-bottom: 20px">
                    <h1 class="LinkPages-top-h1" :style="{ 'color': headline_color, 'font-family': text_font_family }">{{ title }}
                    </h1>
        <div class="description" :style="{ 'color': text_color,'font-family': text_font_family }">{{ description}}
        </div>
        <div style='margin-top: 10px'>
            <div v-if="json_social.phone_number" v-on:click='open_new_tab("tel://" + json_social.phone_number)'
                 class='one-social-link-wide'
                 :style="{ 'background-color': link_background_color, 'color': link_text_color }">
                <i class="fas fa-phone"></i> &nbsp; CALL ME
            </div> <!-- end one social link-->
            <div v-if="json_social.email" v-on:click='open_new_tab("mailto:" + json_social.email)'
                 class='one-social-link-wide'
                 :style="{ 'background-color': link_background_color, 'color': link_text_color }">
                <i class="fas fa-envelope-open-text"></i> &nbsp; EMAIL ME
            </div> <!-- end one social link-->
        </div>
        <div v-if='two_step_form == 1'>
            <div v-on:click='two_step_form = 0'
                 style='margin-top: 20px; display: block; width: 100%; padding: 20px; font-size: 13px; color: #FFF; vertical-align: middle'
                 :style="{ 'background-color': button_color }">{{ email_button }}
            </div>
        </div>
        <div id='enable-box'
             v-show="two_step_form == 0 && enable_box == 1 && (enable_name == 1 || enable_phonenumber == 1)"
             style="margin-top: 20px; margin-bottom: 20px; width: 100%; color: rgb(34, 34, 34); border-radius: 6px; max-width: 600px; background-color: #CCC; display: block;">
            <div style='display: block; width: 100%; padding: 20px; background-color: #f1f1f1; vertical-align: middle'>
                <input style='background: none; width: 100%; border: 0px' placeholder='you@email.com' id='email'>
            </div>
            <div v-if='enable_name == 1'
                 style='display: block; width: 100%; padding: 20px; background-color: #f1f1f1; vertical-align: middle'>
                <input style='background: none; width: 100%; border: 0px' id='fullname' placeholder='Your name'>
            </div>
            <div v-if='enable_phonenumber == 1'
                 style='display: block; width: 100%; padding: 20px; background-color: #f1f1f1; vertical-align: middle'>
                <input style='background: none; width: 100%; border: 0px' id='phonenumber' placeholder='Your number'>
            </div>
            <div id="email-button"
                 style='cursor: pointer; display: block; width: 100%; padding: 20px; font-size: 13px; color: #FFF; vertical-align: middle'
                 :style="{ 'background-color': button_color }">{{ email_button }}
            </div>
        </div>
        <!-- end enable box -->
        <div id='enable-box-2' v-show="two_step_form == 0 && enable_box == 1 && !enable_name && !enable_phonenumber"
             style="margin: auto; margin-top: 20px; margin-bottom: 20px; width: 100%; color: rgb(34, 34, 34); border-radius: 6px; width: 100%; max-width: 500px; background-color: #CCC; display: table;">
            <div style='display: table-cell; width: 65%; padding: 20px; background-color: #f1f1f1; vertical-align: middle'>
                <input id='email-2' style='background: none; width: 100%; border: 0px' placeholder='you@email.com'>
            </div>
            <div id="email-button-2"
                 style='cursor: pointer; display: table-cell; width: 35%; padding: 20px; font-size: 12px; color: #FFF; vertical-align: middle'
                 :style="{ 'background-color': button_color }">{{ email_button }}
            </div>
        </div>
                <div id='check'
             style='display: none; font-size: 14px; line-height: 140%; padding: 10px; background-color: #FFF; margin-top: 20px; margin-bottom: 20px'>
            <i class="fas fa-check" style='color: #15c318'></i> &nbsp;
            Thanks! Stay tuned for emails from us!
        </div> <!-- end stay-tuned -->
        <div id='social-links' style='padding-top: 10px; text-align: center; margin: auto'>
            <div v-if="json_social.facebook && json_social.add_facebook"
                 v-on:click='open_new_tab("https://facebook.com/" + json_social.facebook)' class='one-social-link'
                 :style="{ 'background-color': link_background_color, 'color': link_text_color }">
                <i class="fab fa-facebook-f"></i>
            </div> <!-- end one social link-->
            <div v-if="json_social.instagram && json_social.add_instagram"
                 v-on:click='open_new_tab("https://instagram.com/" + json_social.instagram)' class='one-social-link'
                 :style="{ 'background-color': link_background_color, 'color': link_text_color }">
                <i class="fab fa-instagram"></i>
            </div> <!-- end one social link-->
            <div v-if="json_social.tiktok && json_social.add_tiktok"
                 v-on:click='open_new_tab("https://tiktok.com/@" + json_social.tiktok)' class='one-social-link'
                 :style="{ 'background-color': link_background_color, 'color': link_text_color }">
                <i class="fab fa-tiktok"></i>
            </div> <!-- end tiktok -->
            <div v-if="json_social.twitter && json_social.add_twitter"
                 v-on:click='open_new_tab("https://twitter.com/" + json_social.twitter)' class='one-social-link'
                 :style="{ 'background-color': link_background_color, 'color': link_text_color }">
                <i class="fab fa-x-twitter"></i>
            </div> <!-- end twitter -->
            <div v-if="json_social.youtube && json_social.add_youtube" v-on:click='open_new_tab(json_social.youtube)'
                 class='one-social-link'
                 :style="{ 'background-color': link_background_color, 'color': link_text_color }">
                <i class="fab fa-youtube"></i>
            </div> <!-- end twitter -->
            <div v-if="json_social.snapchat && json_social.add_snapchat"
                 v-on:click='open_new_tab("https://snapchat.com/add/" + json_social.snapchat)' class='one-social-link'
                 :style="{ 'background-color': link_background_color, 'color': link_text_color }">
                <i class="fab fa-snapchat-ghost"></i>
            </div> <!-- end snapchat-->
            <div v-if="json_social.linkedin && json_social.add_linkedin"
                 v-on:click='open_new_tab("https://linkedin.com/in/" + json_social.linkedin)' class='one-social-link'
                 :style="{ 'background-color': link_background_color, 'color': link_text_color }">
                <i class="fab fa-linkedin-in"></i>
            </div> <!-- end linkedin -->
            <div v-if="json_social.pinterest && json_social.add_pinterest"
                 v-on:click='open_new_tab("https://pinterest.com/" + json_social.pinterest)' class='one-social-link'
                 :style="{ 'background-color': link_background_color, 'color': link_text_color }">
                <i class="fab fa-pinterest-p"></i>
            </div> <!-- end pinterest  -->
            <div v-if="json_social.twitch && json_social.add_twitch"
                 v-on:click='open_new_tab("https://twitch.tv/" + json_social.twitch)' class='one-social-link'
                 :style="{ 'background-color': link_background_color, 'color': link_text_color }">
                <i class="fab fa-twitch"></i>
            </div> <!-- end spotify  -->
            <div v-if="json_social.spotify && json_social.add_spotify" v-on:click='open_new_tab(json_social.spotify)'
                 class='one-social-link'
                 :style="{ 'background-color': link_background_color, 'color': link_text_color }">
                <i class="fab fa-spotify"></i>
            </div> <!-- end spotify  -->
            <div v-if="json_social.soundcloud && json_social.add_soundcloud"
                 v-on:click='open_new_tab("https://soundcloud.com/" + json_social.soundcloud)' class='one-social-link'
                 :style="{ 'background-color': link_background_color, 'color': link_text_color }">
                <i class="fab fa-soundcloud"></i>
            </div> <!-- end spotify  -->
        </div> <!-- end social links-->
        <div id='list-of-links' style="width: 100%; margin: auto; margin-top: 30px;">
            <!-- start real list of links --->
            <div v-for="(link, index) in links">
                <div
                    :class="{ 'emphasized-shine-preview': link.icon_or_image == 'preview' && link.emphasize == 'shine', 'emphasized-shine-regular': link.icon_or_image != 'preview' && link.emphasize == 'shine', 'emphasized-shake': link.emphasize == 'shake' }"
                    v-show="showDate(link) && link.hidden != 1">
                    <div v-if="link.icon_or_image == 'preview' && link.type != '4'" class='preview-link one-link'
                         style='margin-bottom: 20px; width: 100%; height: 280px; color: rgb(34, 34, 34); border-radius: 6px; margin-bottom: 20px; max-width: 600px; background-size: cover; background-position: center; overflow: hidden; position: relative; cursor: pointer'
						:style="{ 'background-position': 'center', 'background-size': 'cover', 'background-image': `url(${generateFullUrl(link.background_image)})` }"
						
                        
                         v-on:click="increase_click(index)">
                        <!-- regular link -->
                        <div class='link-text' v-if="link.title || link.description"
                             style='display: block; width: 100%; position: absolute; bottom: 0px; left: 0px; vertical-align: middle; text-align: left; padding: 20px;'
                             :style="{ 'color': link_text_color }">
                            <div style='position: relative'>
                                {{ link.title }} <br/>
                                <div v-if='link.description' class='link-description'
                                     style='font-size: 80%; opacity: 0.7;' :style="{ color: link_text_color }">
                                    {{ link.description }}
                                </div>
                                <span v-else-if='link.url'
                                      style='font-size: 80%; opacity: 0.7;'
                                      :style="{ color: link_text_color }">
												{{ link.url }}
												</span>
                            </div> <!-- end position relative-->
                        </div>  <!-- end regular link start purchase link -->
                    </div> <!-- end preview and link type not 4-->
                    <div v-else-if="link.icon_or_image == 'preview' && link.type == '4'" class='preview-link one-link'
                         style='margin-bottom: 20px; width: 100%; height: 280px; color: rgb(34, 34, 34); border-radius: 6px; margin-bottom: 20px; max-width: 600px; background-size: cover; background-position: center; overflow: hidden; position: relative; cursor: pointer'
						:style="{ 'background-position': 'center', 'background-size': 'cover', 'background-image': `url(${generateFullUrl(link.background_image)})` }"
                        
                         v-on:click="activate_purchase(link.product_type, link); increase_click(index)">
                        <div class='link-text'
                             style='display: block; width: 100%; position: absolute; bottom: 0px; left: 0px; vertical-align: middle; text-align: left; padding: 20px;'
                             :style="{ 'color': link_text_color }">
                            <!-- purchase product  -->
                            <div style='display: table; width: 100%; position: relative'>
                                <div style='display: table-cell; width: 75%; white-space: normal;
     vertical-align: middle; text-align: left' :style="{ color: link_text_color }">
                                    <div :style="{ color: link_text_color }">{{ link.title }}</div>
                                    <div v-if='link.description' class='link-description'
                                         :style="{ color: link_text_color }">{{ link.description }}
                                    </div>
                                </div>
                                <div style='display: table-cell; width: 25%; padding-right: 10px; vertical-align: middle; text-align: right'>
                                    <div :style="{ color: link_text_color }" style=' white-space: nowrap; font-size: 13px;
				    overflow-wrap: break-word;
				    display: inline; opacity: 0.8; color: rgb(34, 34, 34);'>${{ link.product_price }}
                                    </div>
                                </div>
                            </div> <!-- end table -->
                        </div> <!-- end link text-->
                    </div> <!-- end link type == 4 && preview -->
                    <div v-else-if="link.icon_or_image == 'large_image' && link.type != 4"
                         style='display: block; width: 100%;' v-on:click="increase_click(index)">
                        <img class='link_image_url' :src="generateFullUrl(link.image_url)"  style='margin-bottom: 20px; cursor: pointer'>
                    </div>
                    <div v-else-if="link.icon_or_image =='large_image' && link.type == 4">
                        <img class='link_image_url' :src="generateFullUrl(link.image_url)" style='margin-bottom: 20px; cursor: pointer'
                             v-on:click="activate_purchase(link.product_type, link); increase_click(index)">
                    </div>
                    <div v-else-if="link.type == '1' || link.type == '2'"
                         class='regular-link one-link link-type-one link-type-two' style="margin-bottom: 20px"
                         :style="{ 'background-color': link_background_color, 'border': '2px solid ' + link_box_border_color  }"
                         v-on:click="increase_click(index)">
                        <div style='display: table; width: 100%;'>
                            <div style='display: table-cell; width: 15%; padding-right: 15px; vertical-align: middle'>
                                <div v-if="link.icon_or_image == 'icon'"
                                     style='width: 60px; height: 60px; border-radius: 6px; font-size: 30px; padding: 10px; color: #FFFFFF'
                                     :style="{ 'background-color': link.icon_color }">
                                    <i :class="link.icon"></i>
                                </div>
                                <div class='icon-image' v-else-if="link.icon_or_image == 'image'"
                                     style='background-size: cover; background-position: center; width: 60px; height: 60px; border-radius: 6px; font-size: 30px; padding: 10px; color: #FFFFFF;'
                                     :style="{ 'background': 'url(' + generateFullUrl(link.image_url) + ')', 'background-size': 'cover', 'background-position': 'center' }">
                                </div> <!-- -->
                            </div>
                            <div style='display: table-cell; width: 75%; white-space: normal;
     vertical-align: middle; text-align: left' :style="{ color: link_text_color }">
                                {{ link.title }}<br/>
                                <div v-if='link.description' class='link-description'
                                     :style="{ color: link_text_color }">{{ link.description }}
                                </div>
                                <div v-else class='link-description' :style="{ color: link_text_color }">
                                    {{ external_url(link) }}
                                </div>
                            </div>
                                                    </div>
                    </div> <!-- end one-link -->
                    <div v-else-if="link.type == '3'" class='regular-link one-link' style="margin-bottom: 20px"
                         :style="{ 'background-color': link_background_color, 'border': '2px solid ' + link_box_border_color }">
                        <div class="videoWrapper" v-if="link.isVideo == 1">
                            <div v-html='link.embed_code'></div>
                        </div>
                        <div v-else>
                            <iframe onload="resizeIframe(this)" style='border: 0px; width: 100%'
                                    :id="'embed-code-' + link.embed_code_id"
                                    :src="'/embed-codes/view?id=' + link.embed_code_id"
                                    scrolling="no" allowtransparency="true"></iframe>
                        </div>
                    </div> <!-- end one-link -->
                    <div v-else-if="link.type == '4'" class='one-link' style="margin-bottom: 20px"
                         :style="{ 'background-color': link_background_color, 'border': '2px solid ' + link_box_border_color }"
                         v-on:click='activate_purchase(link.product_type, link); increase_click(index)'>
                        <!-- purchase product  -->
                        <div style='display: table; width: 100%;'>
                            <div style='display: table-cell; width: 15%; padding-right: 15px; vertical-align: middle'>
                                <div v-if="link.icon_or_image == 'icon'"
                                     style='width: 60px; height: 60px; border-radius: 6px; font-size: 30px; padding: 10px; color: #FFFFFF'
                                     :style="{ 'background-color': link.icon_color }">
                                    <i :class="link.icon"></i>
                                </div>
                                <div class='icon-image' v-else-if="link.icon_or_image == 'image'"
                                     style='background-size: cover; background-position: center; width: 60px; height: 60px; border-radius: 6px; font-size: 30px; padding: 10px; color: #FFFFFF;'
                                     :style="{ 'background': 'url(' + generateFullUrl(link.image_url) + ')', 'background-size': 'cover', 'background-position': 'center' }"
                                     v-on:click='activate_purchase(link.product_type, link); increase_click(index)'>
                                </div> <!-- -->
                            </div>
                            <div style='display: table-cell; width: 75%; white-space: normal;
     vertical-align: middle; text-align: left' :style="{ color: link_text_color }">
                                {{ link.title }}<br/>
                                <div v-if='link.description' class='link-description'
                                     :style="{ color: link_text_color }">{{ link.description }}
                                </div>
                            </div>
                            <div style='display: table-cell; width: 10%; padding-right: 10px; vertical-align: middle; text-align: right'>
                                <div :style="{ color: link_text_color }" style=' white-space: nowrap; font-size: 13px;
   overflow-wrap: break-word;
   display: inline; opacity: 0.8; color: rgb(34, 34, 34);'>${{ link.product_price }}
                                </div>
                            </div>
                        </div>
                    </div> <!-- end one-link -->
                    <div v-else-if="link.type == '5'" class='regular-link one-link' style="margin-bottom: 20px"
                         :style="{ 'background-color': link_background_color, 'border': '2px solid ' + link_box_border_color }"
                         v-on:click=' increase_click(index); activate_donation(link.donation_amount, link.description)'>
                        <!-- ask for a donation  -->
                        <div style='display: table; width: 100%;'>
                            <div style='display: table-cell; width: 15%; padding-right: 15px; vertical-align: middle'>
                                <div v-if="link.icon_or_image == 'icon'"
                                     style='width: 60px; height: 60px; border-radius: 6px; font-size: 30px; padding: 10px; color: #FFFFFF'
                                     :style="{ 'background-color': link.icon_color }">
                                    <i :class="link.icon"></i>
                                </div>
                                <div class="icon-image" v-else-if="link.icon_or_image == 'image'"
                                     style='background-size: cover; background-position: center; width: 60px; height: 60px; border-radius: 6px; font-size: 30px; padding: 10px; color: #FFFFFF;'
                                     :style="{ 'background': 'url(' + generateFullUrl(link.image_url) + ')', 'background-size': 'cover', 'background-position': 'center' }">
                                </div> <!-- end icon or image -->
                            </div>
                            <div style='display: table-cell; width: 75%; white-space: normal;
     vertical-align: middle; text-align: left' :style="{ color: link_text_color }">
                                {{ link.title }}
                                <div class='link-description' v-if='link.description'
                                     style='font-size: 80%; opacity: 0.7;' :style="{ color: link_text_color }">
                                    {{ link.description }}
                                </div>
                            </div>
                            <div style='display: table-cell; width: 10%; padding-right: 10px; vertical-align: middle; text-align: right'>
                                <div :style="{ color: link_text_color }" style=' white-space: nowrap; font-size: 13px;
							    overflow-wrap: break-word;
							    display: inline; opacity: 0.8; color: rgb(34, 34, 34);'>$                                    {{ link.donation_amount }}
                                </div>
                            </div>
                        </div>
                    </div> <!-- end one-link -->
                    <div v-else-if="link.type == '6'" class='regular-link one-link' style="margin-bottom: 20px"
                         :style="{ 'background-color': link_background_color, 'border': '2px solid ' + link_box_border_color }"
                         v-on:click='increase_click(index); activate_request(link.donation_amount, link.description)'>
                        <!-- take requests  -->
                        <div style='display: table; width: 100%;'>
                            <div style='display: table-cell; width: 15%; padding-right: 15px; vertical-align: middle'>
                                <div v-if="link.icon_or_image == 'icon'"
                                     style='width: 60px; height: 60px; border-radius: 6px; font-size: 30px; padding: 10px; color: #FFFFFF'
                                     :style="{ 'background-color': link.icon_color }">
                                    <i :class="link.icon"></i>
                                </div>
                                <div class="icon-image" v-else-if="link.icon_or_image == 'image'"
                                     style='background-size: cover; background-position: center; width: 60px; height: 60px; border-radius: 6px; font-size: 30px; padding: 10px; color: #FFFFFF;'
                                     :style="{ 'background': 'url(' + generateFullUrl(link.image_url) + ')', 'background-size': 'cover', 'background-position': 'center' }">
                                </div> <!-- -->
                            </div>
                            <div style='display: table-cell; width: 75%; white-space: normal;
     vertical-align: middle; text-align: left' :style="{ color: link_text_color }">
                                {{ link.title }}<br/>
                                <div class='link-description' v-if='link.description'
                                     style='font-size: 80%; opacity: 0.7;' :style="{ color: link_text_color }">
                                    {{ link.description }}
                                </div>
                            </div>
                            <div style='display: table-cell; width: 10%; padding-right: 10px; vertical-align: middle; text-align: right'>
                                <div :style="{ color: link_text_color }" style='white-space: nowrap; font-size: 13px;
						    overflow-wrap: break-word;
						    display: inline; opacity: 0.8; color: rgb(34, 34, 34);'>$                                    {{ link.donation_amount }}
                                </div>
                            </div>
                        </div>
                    </div> <!-- end one-link -->
                </div> <!-- end link-animation  -->
            </div> <!-- end v-for -->
            <!-- end real list of links --->
        </div>         <!-- end list of links-->
    </div> <!-- end homepage-design -->
</div> <!-- end design -->
<script>
    
    Vue.component('v-style', {
        render: function (createElement) {
            return createElement('style', this.$slots.default)
        }
    });
    var vm = new Vue({
        el: "#design",
        data() {
            return {
                title: `Mago Digital`,
                description: `50K Seguidores. 
Te enseño todo lo que sé sobre la web. `,
                email_button: `Suscríbete`,
                button_color: '#111111',
                show_button_color: false,
                headline_color: `#FFFFFF`,
                show_headline_color: false,
                link_text_color: `#FFFFFF`,
                show_link_text_color: false,
                link_background_color: '#111111',
                show_link_background_color: false,
                link_box_border_color: '#2c2c2c',
                show_link_box_border_color: false,
                link_text_color: '#FFFFFF',
                show_link_text_color: false,
                text_color: '#FFFFFF',
                show_text_color: false,
                text_font_family: `Montserrat`,
                background_color: '#000E2F',
                background_image: ``,
                background_image_opacity: ``,
                show_background_color: false,
                background_image_current: ``,
                product_price_current: ``,
                design_page: `home`,
                enable_box: 0,
                enable_name: 0,
                enable_phonenumber: 0,
                two_step_form: 0,
                json_social: {"add_spotify":"true","spotify":"https:\/\/open.spotify.com\/show\/3W3MuPl8affXNWkGn6GqxM?si=T5p4An3dRVa-E8-GTaAm4Q&dl_branch=1","add_soundcloud":"false","soundcloud":"","add_twitter":"false","twitter":"","add_snapchat":"false","snapchat":"","add_facebook":"false","facebook":"","add_tiktok":"true","tiktok":"mago.digital","add_instagram":"true","instagram":"magodigital_","add_pinterest":"false","pinterest":"","add_youtube":"true","youtube":"https:\/\/youtube.com\/@MagoDigitalYT","add_linkedin":"true","linkedin":"camilocuadros","add_twitch":"false","twitch":""},
                links: [{"link_id":"pvq2ut","project_id":"2989","title":"\u00danete a mi Grupo de Whatsapp","description":"","icon":"fas fa-link","url":"https:\/\/chat.whatsapp.com\/FM4esqRIVBSEeMbA41ec7p","product_type":"product","product_id":"0","product_price":"","product":"false","plan":"false","plan_id":"0","plan_name":"","product_name":"","is_editing":"false","donation":"10","image_url":"https:\/\/cdn.hyax.com\/e1b8aa5c-2490-41b7-a928-52404a78b7fd\/-\/quality\/smart\/-\/format\/auto\/null","background_image":"https:\/\/static.whatsapp.net\/rsrc.php\/v3\/yo\/r\/J5gK5AgJ_L5.png","icon_or_image":"image","social_platform":"twitter","emphasize":"shake","type":"1","embed_code":"","embed_code_id":"","show_icon_color":"false","icon_color":"#85C700","show_icon_color_box":"false","show_icon_box":"false","total_clicks":"30","hidden":"0"},{"link_id":"tjoypxa","project_id":"2989","title":"\u00danete a mi canal de Telegram","description":"","icon":"fas fa-link","url":"https:\/\/t.me\/joinchat\/81A_2m5HRwwyNzZk","product_type":"product","product_id":"0","product_price":"","product":"false","plan":"false","plan_id":"0","plan_name":"","product_name":"","is_editing":"false","donation":"10","image_url":"https:\/\/cdn.hyax.com\/b63dfada-4187-42aa-bf54-4c36b55d42cc\/-\/quality\/smart\/-\/format\/auto\/-\/preview\/","background_image":"","icon_or_image":"image","social_platform":"twitter","emphasize":"0","type":"1","embed_code":"","embed_code_id":"","show_icon_color":"false","icon_color":"#2ec5d3","show_icon_color_box":"false","show_icon_box":"false","total_clicks":"188","hidden":"0"},{"link_id":"njkef","project_id":"2989","title":"Mi Canal de Youtube","description":"Te ense\u00f1o en unos minutos trucos de la web","icon":"fas fa-play-circle","url":"https:\/\/youtube.com\/@MagoDigitalYT","product_type":"product","product_id":"0","product_price":"","product":"false","plan":"false","plan_id":"0","plan_name":"","product_name":"","is_editing":"false","donation":"10","image_url":"https:\/\/ucarecdn.com\/d7ed54ca-cb98-429e-9d66-e9d80306f508\/interfacewhiter.png","background_image":"","icon_or_image":"icon","social_platform":"twitter","emphasize":"false","type":"1","embed_code":"","embed_code_id":"","show_icon_color":"false","icon_color":"#D32E2E","show_icon_color_box":"false","show_icon_box":"false","total_clicks":"148","hidden":"0"},{"link_id":"znp827","project_id":"2989","title":"Instagram","description":"","icon":"fas fa-link","url":"https:\/\/www.instagram.com\/magodigital_\/","product_type":"product","product_id":"0","product_price":"","product":"false","plan":"false","plan_id":"0","plan_name":"","product_name":"","is_editing":"false","donation":"10","image_url":"https:\/\/cdn.hyax.com\/c39b1f44-88b4-4002-bd50-20306d280148\/-\/quality\/smart\/-\/format\/auto\/null","background_image":"","icon_or_image":"image","social_platform":"twitter","emphasize":"false","type":"1","embed_code":"","embed_code_id":"","show_icon_color":"false","icon_color":"#2ec5d3","show_icon_color_box":"false","show_icon_box":"false","total_clicks":"83","hidden":"0"},{"link_id":"pbxt3","project_id":"2989","title":"Linkedin - Camilo Cuadros","description":"Conoce mi vida profesional","icon":"fas fa-link","url":"https:\/\/www.linkedin.com\/in\/camilocuadros\/","product_type":"product","product_id":"0","product_price":"","product":"false","plan":"false","plan_id":"0","plan_name":"","product_name":"","is_editing":"false","donation":"10","image_url":"https:\/\/cdn.hyax.com\/d1e8627a-f23c-4f8d-8f51-1c75783c6e79\/-\/quality\/smart\/-\/format\/auto\/null","background_image":"","icon_or_image":"image","social_platform":"twitter","emphasize":"false","type":"1","embed_code":"","embed_code_id":"","show_icon_color":"false","icon_color":"#2ec5d3","show_icon_color_box":"false","show_icon_box":"false","total_clicks":"161"},{"link_id":"pm1jty","project_id":"2989","title":"PODCAST\ud83c\udf99\ufe0f2040 FM \ud83e\udd16 SPOTIFY","description":"2040.fm es un podcast en donde converso con David Rubio sobre el futuro de la tecnolog\u00eda de hoy al a\u00f1o 2040.","icon":"fas fa-link","url":"https:\/\/solo.to\/2040.fm","product_type":"product","product_id":"0","product_price":"","product":"false","plan":"false","plan_id":"0","plan_name":"","product_name":"","is_editing":"false","donation":"10","image_url":"https:\/\/cdn.hyax.com\/09754641-ea6c-4c7b-b474-e7a573dd3bee\/-\/quality\/smart\/-\/format\/auto\/-\/crop\/376x355\/35,28\/-\/preview\/","background_image":"","icon_or_image":"image","social_platform":"twitter","emphasize":"false","type":"1","embed_code":"","embed_code_id":"","show_icon_color":"false","icon_color":"#2ec5d3","show_icon_color_box":"false","show_icon_box":"false","total_clicks":"55","hidden":"0"},{"link_id":"26f22q","project_id":"2989","title":"TikTok","description":"En 1 minuto o menos te ense\u00f1o todos los trucos m\u00e1gicos de la web. \ud83e\uddd9\u200d\u2642\ufe0f\u2728\ud83c\udf10","icon":"fas fa-link","url":"https:\/\/www.tiktok.com\/@mago.digital","product_type":"product","product_id":"0","product_price":"","product":"false","plan":"false","plan_id":"0","plan_name":"","product_name":"","is_editing":"false","donation":"10","image_url":"https:\/\/cdn.hyax.com\/c5af7192-1455-4dcd-95fd-e10b0999d340\/-\/quality\/smart\/-\/format\/auto\/null","background_image":"","icon_or_image":"image","social_platform":"twitter","emphasize":"false","type":"1","embed_code":"","embed_code_id":"","show_icon_color":"false","icon_color":"#2ec5d3","show_icon_color_box":"false","show_icon_box":"false","total_clicks":"58","hidden":"0"},{"link_id":"v1efff","project_id":"2989","title":"Descarga ONLY OFFICE - Software Libre","description":"Usa software libre como ONLY OFFICE para que no tengas que pagar por licencias.","icon":"far fa-file-word","url":"https:\/\/www.onlyoffice.com\/es\/download-desktop.aspx","product_type":"product","product_id":"0","product_price":"","product":"false","plan":"false","plan_id":"0","plan_name":"","product_name":"","is_editing":"false","donation":"10","image_url":"https:\/\/ucarecdn.com\/d7ed54ca-cb98-429e-9d66-e9d80306f508\/interfacewhiter.png","background_image":"","icon_or_image":"icon","social_platform":"twitter","emphasize":"false","type":"1","embed_code":"","embed_code_id":"","show_icon_color":"false","icon_color":"#FF7800","show_icon_color_box":"true","show_icon_box":"false","total_clicks":"76","hidden":"0"}]            }
        },
        methods: {
			
		    generateFullUrl(link_image_url) {
		         const keyword = '/quality';
		         const url = link_image_url;
		         let newUrl = link_image_url;
				 
				 const cloudfront = 'cloudfront';
				 
				 const hyax = 'cdn.hyax.com';
				 
				 const ucare = 'ucarecdn';
				 
				 if (!url.includes(cloudfront) && ( url.includes(hyax) || url.includes(ucare) ) )
				 {
				 	
					
				 
			         if (url.includes(keyword)) {
			           // Insert the text "smart_resize/420x420/-/" in front of 'quality'
			           newUrl = url.replace(keyword, '/resize/420/-' + keyword);
			         } else {
			           // Insert the text "-/smart_resize/420x420/-/quality/smart/-/format/auto/" at the very end of the url
			           newUrl = url + '-/resize/420/-/quality/smart/-/format/auto/';
			         }
					 
					 
				 
			 	 }
				 
				 
		         return newUrl;
		       },
			extra_parameters(link) {
			      const keywords = ['null', 'quality', 'auto'];
			      const url = link.image_url;
			      let found = false;

			      keywords.forEach(keyword => {
			        if (url.includes(keyword)) {
			          found = true;
			        }
			      });

			      return found ? '?extra-parameter=true' : '-/quality/smart/-/format/auto/null';
			    },
            showDate(link) {
                if (!link.date) {
                    return true;
                } else {
                    let givenDate1 = new Date(link.date);  // Past Date
                    let givenDate2 = Date.now(); // future Date
                    // If diff is positive, then given date is PAST
                    let diff = new Date().getTime() - givenDate1.getTime();
                    if (diff > 0) {
                        return true;
                    }
                    if (diff < 0) {
                        return false;
                    }
                    return true;
                }
            },
            resizeIFrameToFitContent(iFrame) {
                console.log('resizing...');
                iFrame.width = iFrame.contentWindow.document.body.scrollWidth;
                iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
                console.log('resizing...' + iFrame.width + iFrame.height);
            },
            open_new_tab(url) {
                window.open(url, "_blank");
            },
            increase_click(index) {
                var total_clicks = this.links[index].total_clicks;
                // alert("Link value original =" + total_clicks);
                var integer = parseInt(total_clicks, 10);
                this.links[index].total_clicks = integer + 1;
                //  alert("Link value new = " + this.links[index].total_clicks);
                this.save_links();
                console.log("Link value increased to: " + this.links[index].total_clicks);
                $.ajax({
                    url: "/link-pages/increaseclick?id=2161",
                    type: "POST",
                    success: function (success) {
                    }
                });
                if (this.links[index].url) {
                    this.open_new_tab(this.links[index].url);
                }
                //window.location.href = this.links[index].url;
            },
            activate_request(donation_amount, description) {
                var loc = "/link-pages/donation?donation_or_request=request&donation_amount=" + donation_amount + "&project_id=2989&description=" + description;
                $('#purchase-iframe').attr('src', loc);
                $("#purchase-modal").addClass('is-active');
                var total_clicks = this.links[index].total_clicks;
                // alert("Link value original =" + total_clicks);
                var integer = parseInt(total_clicks, 10);
                this.links[index].total_clicks = integer + 1;
                //  alert("Link value new = " + this.links[index].total_clicks);
                this.save_links();
                //alert("Link value increased to!" + link.total_clicks);
                $.ajax({
                    url: "/link-pages/increaseclick?id=2161",
                    type: "POST",
                    success: function (success) {
                    }
                });
            },
            activate_donation(donation_amount, description) {
                if (!donation_amount) {
                    var donation_amount = '0';
                }
                var loc = "/link-pages/donation?donation_or_request=donation&donation_amount=" + donation_amount + "&project_id=2989&description=" + description;
                $('#purchase-iframe').attr('src', loc);
                $("#purchase-modal").addClass('is-active');
            },
            activate_purchase(type, link) {
                if (type == 'product' || !type) {
                    var loc = "/link-pages/purchase?product_type=" + type + "&product_id=" + link.product_id;
                } else if (type == 'membership') {
                    var loc = "/membership-plans/memberpurchase?membership_plan_id=" + link.plan_id;
                }
                $('#purchase-iframe').attr('src', loc);
                $("#purchase-modal").addClass('is-active');
            },
            get_product_price(link) {
                // console.log('product id is -- ' + link.product_id);
                if (link.product_type == 'product') {
                    var product_id = link.product_id;
                    $.ajax({
                        url: "/link-pages/productprice?type=product&product_id=" + link.product_id,
                        type: "POST",
                        success: function (success) {
                            var returned = success;
                            this.product_price_current = success;
                            link.product_price = success;
                            console.log('now product price is ' + this.product_price_current);
                        }
                    });
                } else {
                    var plan_id = link.plan_id;
                    $.ajax({
                        url: "/link-pages/productprice?type=membership&product_id=" + link.plan_id,
                        type: "POST",
                        success: function (success) {
                            var returned = success;
                            this.product_price_current = success;
                            link.product_price = success;
                            console.log('now product price is ' + this.product_price_current);
                        }
                    });
                }
                //this.save_links();
                return this.product_price_current;
            },
            get_background_image(link, check_url) {
                console.log('the url is' + check_url);
                var returned = 'https://i.ytimg.com/vi/4DfU5XJ2rMg/maxresdefault.jpg';
                $.ajax({
                    url: "/link-pages/metatag?received=" + check_url,
                    type: "POST",
                    success: function (success) {
                        console.log('returned url from method is ' + success);
                        var returned = success;
                        this.background_image_current = success;
                        link.background_image = success;
                        console.log('now this background image current is ' + this.background_image_current);
                    }
                });
                this.save_links();
                return this.background_image_current;
                //return 'https://i.ytimg.com/vi/4DfU5XJ2rMg/maxresdefault.jpg';
            },
            save_links() {
                console.log('starting to save links');
                $.ajax({
                    url: "/link-pages/savelinks?id=2161&public_key=2161",
                    type: "POST",
                    data: {
                        links: this.links
                    },
                    success: function (data) {
                        //alert('saved links');
                        console.log('links saved');
                    }
                });
            },
            external_url(link) {
                if (link.url) {
                    var pathArray = link.url.split('/');
                    var protocol = pathArray[0];
                    var host = pathArray[2];
                    if (host) {
                        return host;
                    }
                } else {
                    return '';
                }
                return '';
            },
            save() {
                $.ajax({
                    url: "/link-pages/savesettings?id=2161",
                    type: "POST",
                    data: {
                        title: this.title,
                        description: this.description,
                        email_button: this.email_button,
                        button_color: this.button_color,
                        headline_color: this.headline_color,
                        link_text_color: this.link_text_color,
                        link_background_color: this.link_background_color,
                        link_box_border_color: this.link_box_border_color,
                        link_text_color: this.link_text_color,
                        text_color: this.text_color,
                        text_font_family: this.text_font_family,
                        background_color: this.background_color,
                        enable_box: this.enable_box
                    },
                    success: function (data) {
                        alert('saved');
                    }
                });
                // working on
            }
        },
        mounted: function () {
            for (var i = 0; i < this.links.length; i++) {
                var this_url = this.links[i].url;
                console.log('1 - the url is ' + this_url);
                if (this.links[i].icon_or_image == 'preview') {
                    if (!this.links[i].background_image) {
                        this.links[i].background_image = this.get_background_image(this.links[i], this_url);
                        console.log('2 - turning background image on URL ' + this_url + ' to become this background_image -- ' + this.get_background_image(this.links[i], this_url));
                    }
                }
                if (this.links[i].plan_id) {
                    this.links[i].product_price = this.get_product_price(this.links[i], this.links[i].plan_id);
                    console.log('5 - changing product price of ' + this.links[i].product_id + ' to become this product price -- ' + this.links[i].product_price);
                } else {
                    console.log('WARNING - no product id for ' + i)
                }
                if (this.links[i].product_id) {
                    this.links[i].product_price = this.get_product_price(this.links[i], this.links[i].product_id);
                    console.log('3 - changing product price of ' + this.links[i].product_id + ' to become this product price -- ' + this.links[i].product_price);
                } else {
                    console.log('WARNING - no product id for ' + i)
                }
                if (this.links[i].embed_code) {
                    var string = this.links[i].embed_code;
                    var wordyoutube = 'youtube';
                    var checkyoutube = string.indexOf(wordyoutube);
                    var wordvimeo = 'vimeo';
                    var checkvimeo = string.indexOf(wordvimeo);
                    if ((checkvimeo > 0) || (checkyoutube > 1)) {
                        this.links[i].isVideo = 1;
                    }
                    if (this.links[i].embed_code_id) {
                        /*

                        var iFrame = document.getElementById( 'embed-code-' +  this.links[i].embed_code_id);

                      iFrame.height = iFrame.contentWindow.document.body.scrollHeight;


                       console.log('resizing height to -- ' +  iFrame.height);
                      */
                    }
                    if (!this.links[i].date) {
                        this.links[i].date = '0';
                    }
                    if (!this.links[i].hidden) {
                        this.links[i].hidden = '0';
                    }
                } else {
                    console.log('WARNING - no product id for ' + i)
                }
            }
        }
    });
</script>
<script>
	
	

    $("#email-button").click(function () {
        var email = $("#email").val();
        var phonenumber = 0;
        var fullname = 'Anonymous';
        if (document.getElementById("fullname") !== null) {
            var fullname = $("#fullname").val();
        }
        if (document.getElementById("phonenumber") !== null) {
            var phonenumber = $("#phonenumber").val();
        }
        var tag = 'pre-launch';
        if (!email) {
            alert('Please enter your email!');
            return;
        }
        console.log('full name is ' + fullname + ' phonenumber is ' + phonenumber);
        $.ajax({
            type: 'POST',
            url: "/people/add?project_id=2989&link_page_id=2161",
            data: {
                email: email,
                fullname: fullname,
                phonenumber: phonenumber,
                tag: tag
            }
        }).done(function (response) {
            if (response == 'success') {
                $("#email").hide();
                $("#email-button").hide();
                $("#enable-box").hide();
                $("#check").fadeIn();
            } else if (response == 'already') {
                alert("You've already signed up!");
            } else {
                alert('Please correct your email address.');
            }
        });
    });
    $("#email-button-2").click(function () {
        var email = $("#email-2").val();
        var phonenumber = 0;
        var fullname = 'Anonymous';
        if (document.getElementById("fullname") !== null) {
            var fullname = $("#fullname").val();
        }
        if (document.getElementById("phonenumber") !== null) {
            var phonenumber = $("#phonenumber").val();
        }
        var tag = 'pre-launch';
        if (!email) {
            alert('Please enter your email!');
            return;
        }
        console.log('full name is ' + fullname + ' phonenumber is ' + phonenumber);
        $.ajax({
            type: 'POST',
            url: "/people/add?project_id=2989&link_page_id=2161",
            data: {
                email: email,
                fullname: fullname,
                phonenumber: phonenumber,
                tag: tag
            }
        }).done(function (response) {
            if (response == 'success') {
                $("#email-2").hide();
                $("#email-button-2").hide();
                $("#enable-box-2").hide();
                $("#check").fadeIn();
            } else if (response == 'already') {
                alert("You've already signed up!");
            } else {
                alert('Please correct your email address.');
            }
        });
    });
</script>
<style>
    .icon-image {
        background-size: cover !important;
        background-position: center !important;
    }

    .one-link {
        margin: auto;
        width: 100%;
        color: rgb(34, 34, 34);
        border-radius: 6px;
        padding: 15px;
        max-width: 500px;
        cursor: pointer;
        transition: all .1s ease-in-out;
    }

    .one-link:hover {
        transform: scale(1.03);
    }

    .preview-link {
        height: 280px;
        overflow: hidden;
    }

    .regular-link {
        min-height: 94px;
        overflow: hidden;
    }

    .form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: #555;
        opacity: 1; /* Firefox */
    }

    .nav-items {
        display: table;
        width: 200px;
        margin-bottom: 12px;
    }

    .nav-item {
        display: table-cell;
    }

    #product-title {
        font-size: 30px;
        margin-bottom: 20px;
    }

    .LinkPages-product-description {
        position: relative;
    }

    .price {
        font-size: 16px;
        position: absolute;
        bottom: 0px;
        left: 10px;
        right: 0px;
        padding: 30px;
    }

    .inactive-step2 {
        background-color: #f6fafc;
        cursor: pointer;
    }

    .active-step2 {
        background-color: #FFFFFF;
        border-right: 1px solid #e9edef;
    }

    .active-step-left {
        background-color: #FFFFFF;
        border-left: 1px solid #e9edef;
    }

    .main-body {
        width: 100%;
        max-width: 1120px;
        margin: auto;
        text-align: left;
    }

    .large-blue-purchase-button {
        background-color: #30bbf0;
        color: #FFF;
        border-radius: 3px;
        width: 100%;
        border: 0px;
        height: 55px;
        font-size: 16px;
    }

    #bottom-purchase-menu {
        position: absolute;
        left: 0px;
        bottom: 0px;
        width: 100%;
        background-color: #FFFFFF;
        border-top: 2px solid #EEE;
        z-index: 5;
    }

    #purchase {
        width: 600px;
        padding: 20px;
        margin: auto;
        margin-top: 10px;
        margin-bottom: 20px;
        text-align: center;
    }

    #login {
        width: 600px;
        padding: 20px;
        padding-top: 0px;
        margin: auto;
        margin-bottom: 20px;
        text-align: center;
    }

    .single-product {
        width: 900px;
        margin: auto;
    }

    .subscribe-top {
        background-color: #07bbf1;
        color: #FFFFFF;
    }

    .topitem {
        display: inline-block;
        vertical-align: top;
        font-size: 15px;
        line-height: 25px;
        padding: 12px;
        padding-left: 25px;
        padding-right: 25px;
        text-align: center;
        cursor: pointer;
        height: 100%;
        font-family: 'Avenir', sans-serif;
        border: 0px solid #DDD;
    }

    .form-control-gray {
        font-size: 13px;
        border-radius: 3px;
        background-color: #EEE;
        color: #555;
        padding: 16px;
        width: 100%;
        border: 0px;
        box-sizing: border-box;
    }

    .display-table {
        width: 100%;
        display: table;
    }

    .display-table-cell-33 {
        width: 33% !important;
        vertical-align: top;
        padding-right: 2%;
        display: table-cell !important;
    }

    #main-menu {
        height: 50px;
        background-color: #FFF;
        width: 620px;
        z-index: 100;
        font-size: 13px;
        color: #777;
        border-radius: 0px;
        text-align: right;
        position: absolute;
        top: 0px;
        right: 0px;
        z-index: 38;
        font-family: 'Avenir', sans-serif;
    }

    .form-control-white {
        color: #000000;
        background-color: #FFFFFF;
        padding: 5px;
        border-radius: 3px;
        border: 1px solid #EEE;
        width: 100%;
    }

    .blinking {
        animation: blinker 1s linear infinite;
        float: right;
        font-size: 10px;
        position: relative;
        top: 4px;
        cursor: pointer;
    }

    @keyframes blinker {
        50% {
            opacity: 0;
        }
    }

    .float-right-span-click {
        float: right;
        position: relative;
        top: 2px;
        color: #000000;
        font-size: 10px;
        cursor: pointer;
    }

    .top {
        margin: auto;
        margin-top: 80px;
        margin-bottom: 0px;
        width: 700px;
        font-family: Roboto, sans-serif;
        text-align: center;
        max-width: 90%;
    }

    .email-box {
        border: 1px solid #DDD;
        border-radius: 8px;
        padding: 10px;
        background: #FFFFFF;
        margin-top: 30px;
        margin-bottom: 15px;
        -webkit-box-shadow: 0 13px 27px -5px rgba(50, 50, 93, .05), 0 8px 16px -8px rgba(0, 0, 0, .05), 0 -6px 16px -6px rgba(0, 0, 0, .005);
        box-shadow: 0 13px 27px -5px rgba(50, 50, 93, .05), 0 8px 16px -8px rgba(0, 0, 0, .05), 0 -6px 16px -6px rgba(0, 0, 0, .005);
        width: 100%;
        display: table;
    }

    .email-box-container {
        width: 450px;
        max-width: 80%;
        margin: auto;
        margin-bottom: 25px;
        font-size: 13px;
        color: #888;
    }

    .LinkPages-top-h1 {
        text-align: center;
        font-size: 42px;
        margin-bottom: 5px;
        font-weight: bold;
    }

    h2 {
        font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 30px;
        font-weight: 500;
        line-height: 120%;
        text-rendering: geometricPrecision;
        color: #001828;
        margin-top: 8%;
        margin-bottom: 4%;
    }

    .modal-content {
        width: 450px;;
    }

    @media only screen and (max-width: 600px) {
        .modal-content {
            max-width: 100%;
        }

        .box {
        }

        .LinkPages-top-h1 {
            text-align: center;
            font-size: 33px;
            margin-bottom: 5px;
            font-weight: 800
        }

        .email-box-container {
            width: 100%;
            max-width: 100%;
            padding-left: 5%;
            padding-right: 5%;
        }

        .hide-mobile {
            display: none;
        }
    }

    .total-LinkPages-count a {
        color: #07bbf1;
    }

    .LinkPages-product-title {
        font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, 'Oswald', Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        text-rendering: geometricPrecision;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-size: 26px;
        padding: 30px;
        line-height: 120%;
        font-weight: 600;
        padding-bottom: 25px;
        padding-top: 25px;
        color: #001828;
    }

    .LinkPages-product-description {
        font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        color: #888;
        font-size: 14px;
        line-height: 180%;
        padding: 30px;
        padding-top: 0px;
    }

    .LinkPages-product-div {
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid #EEE;
        -webkit-box-shadow: 0 13px 27px -5px rgba(50, 50, 93, .05), 0 8px 16px -8px rgba(0, 0, 0, .05), 0 -6px 16px -6px rgba(0, 0, 0, .005);
        box-shadow: 0 13px 27px -5px rgba(50, 50, 93, .05), 0 8px 16px -8px rgba(0, 0, 0, .05), 0 -6px 16px -6px rgba(0, 0, 0, .005);
        transition: all .2s ease-in-out;
        height: 100%;
        text-align: left;
        margin-bottom: 40px;
    }

    #design-left {
        overflow: hidden;
        width: 270px;
        position: absolute;
        left: 20px;
        top: 20px;
        /* outline: 10px solid #FFF; */
        background: #FFFFFF;
        border-radius: 8px;
        /* padding: 10px; */
        z-index: 9;
        display: block;
        border-radius: 8px;
        background-color: #FFFFFF;
        box-shadow: 0 0 20px rgba(0, 0, 0, .05);
        border: 2px solid #e9edef;
    }

    #design-left label {
        color: #555;
    }

    #design-right {
        display: block;
        width: 100%;
        padding-top: 100px;
        padding-left: 30px;
        padding-right: 30px;
        text-align: center;
        background-color: #FFFFFF;
    }

    #design {
        display: block;
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    .description {
        font-size: 16px;
        color: #001828;
    }

    .single-item-title {
        font-size: 14px;
        color: #555555;
    }

    .single-item-title-block {
        padding: 10px;
        border-bottom: 1px solid #CCCCCC;
    }

    .dropper {
        float: right;
        font-size: 13px;
        color: #555555;
    }

    .single-design-item {
        display: block;
    }

    .hyax-drop-content {
        padding: 10px;
        display: none;
    }

    .enclosed-div {
        padding: 0px;
        padding-top: 35px;
        border-radius: 8px
    }

    .grey-scroll-area {
        background-color: #393c42;
        padding: 20px;
        border-radius: 6px;
    }

    .hide-mobile {
    }

    .link-description {
        font-size: 80%;
        opacity: 0.7;
        line-height: 140%;
        margin-top: 1%;
    }

    .emphasized-shake {
        /* Start the shake animation and make the animation last for 0.5 seconds */
        animation: shake 3.72s ease infinite;
    }

    .emphasized-shine {
        position: relative;
        border-radius: 6px;
        overflow: hidden;
    }

    .emphasized-shine-regular {
        position: relative;
        border-radius: 6px;
        height: 94px;
        overflow: hidden;
        margin-bottom: 20px;
    }

    .emphasized-shine-preview {
        position: relative;
        border-radius: 6px;
        height: 280px;
        overflow: hidden;
        margin-bottom: 20px;
    }

    .emphasized-shine > .regular-link {
        height: 94px;
        overflow: hidden;
    }

    .emphasized-shine > .preview-link {
        height: 280px;
        overflow: hidden;
    }

    .emphasized-shine-regular > .regular-link:after {
        animation: shine 3s ease-in-out infinite;
        animation-fill-mode: forwards;
        content: "";
        position: absolute;
        top: -110%;
        left: -210%;
        width: 200%;
        height: 200%;
        opacity: 0;
        transform: rotate(30deg);
        background: rgba(255, 255, 255, 0.13);
        background: linear-gradient(
                to right,
                rgba(255, 255, 255, 0.13) 0%,
                rgba(255, 255, 255, 0.13) 77%,
                rgba(255, 255, 255, 0.5) 92%,
                rgba(255, 255, 255, 0.0) 100%
        );
    }

    .emphasized-shine-preview > .preview-link:after {
        animation: shine 3s ease-in-out infinite;
        animation-fill-mode: forwards;
        content: "";
        position: absolute;
        top: -110%;
        left: -210%;
        width: 200%;
        height: 200%;
        opacity: 0;
        transform: rotate(30deg);
        background: rgba(255, 255, 255, 0.13);
        background: linear-gradient(
                to right,
                rgba(255, 255, 255, 0.13) 0%,
                rgba(255, 255, 255, 0.13) 77%,
                rgba(255, 255, 255, 0.5) 92%,
                rgba(255, 255, 255, 0.0) 100%
        );
    }

    @keyframes shake {
        0% {
            transform: translate(0, 0)
        }
        1.78571% {
            transform: translate(5px, 0)
        }
        3.57143% {
            transform: translate(0, 0)
        }
        5.35714% {
            transform: translate(5px, 0)
        }
        7.14286% {
            transform: translate(0, 0)
        }
        8.92857% {
            transform: translate(5px, 0)
        }
        10.71429% {
            transform: translate(0, 0)
        }
        100% {
            transform: translate(0, 0)
        }
    }

    @keyframes shine {
        10% {
            opacity: 1;
            top: -30%;
            left: -30%;
            transition-property: left, top, opacity;
            transition-duration: 0.7s, 0.7s, 0.15s;
            transition-timing-function: ease;
        }
        100% {
            opacity: 0.8;
            top: -30%;
            left: -30%;
            transition-property: left, top, opacity;
        }
    }

    .one-social-link {
        width: 40px;
        height: 40px;
        border-radius: 6px;
        font-size: 14px;
        padding: 10px;
        display: inline-block;
        margin: 5px;
        cursor: pointer;
        transition: all .1s ease-in-out;
    }

    .one-social-link-wide {
        height: 40px;
        border-radius: 6px;
        font-size: 14px;
        padding: 10px;
        display: inline-block;
        margin: 5px;
        cursor: pointer;
        transition: all .1s ease-in-out;
    }

    @media only screen and (max-width: 600px) {
        .one-social-link {
            width: 30px;
            height: 30px;
            border-radius: 6px;
            font-size: 11px;
            padding: 8px;
            display: inline-block;
            margin: 5px;
        }
    }

    .one-social-link:hover {
        transform: scale(1.03);
    }

    .videoWrapper {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        height: 0;
    }

    .videoWrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    [v-cloak] > * {
        display: none;
    }

    [v-cloak]::before {
        content: "";
    }

    [v-cloak] > * {
        display: none
    }

    [v-cloak]::before {
        content: "loading…"
    }
</style>
    <!-- Facebook Pixel Code -->
    <script>
        !function (f, b, e, v, n, t, s) {
            if (f.fbq) return;
            n = f.fbq = function () {
                n.callMethod ?
                    n.callMethod.apply(n, arguments) : n.queue.push(arguments)
            };
            if (!f._fbq) f._fbq = n;
            n.push = n;
            n.loaded = !0;
            n.version = '2.0';
            n.queue = [];
            t = b.createElement(e);
            t.async = !0;
            t.src = v;
            s = b.getElementsByTagName(e)[0];
            s.parentNode.insertBefore(t, s)
        }(window, document, 'script',
            'https://connect.facebook.net/en_US/fbevents.js');
        fbq('init', 'false');
        fbq('track', 'PageView');
    </script>
    <noscript>
        <img height="1" width="1"
             src="https://www.facebook.com/tr?id=false&ev=PageView
				&noscript=1"/>
    </noscript>
    <!-- End Facebook Pixel Code -->
        <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=false"></script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }

        gtag('js', new Date());
        gtag('config', 'false');
    </script>
    


	   

    </body>
    </html>
