<style>
	.whmpress_domain_price_list.whmpress.simple-cloud ul li {
		padding: 0px 20px;
		padding-top: 40px;
	}
	.whmpress_domain_price_list.whmpress.simple-cloud ul li:nth-child(odd) a{
		background-image: url({$odd_image});
		background-size: cover;
	}
	.whmpress_domain_price_list.whmpress.simple-cloud ul li:nth-child(odd) a:hover{
		 background-image: url({$odd_hover_img});
		 background-size: cover;
	 }
	.whmpress_domain_price_list.whmpress.simple-cloud ul li:nth-child(even) a{
		background-image: url({$even_image});
		background-size: cover;
	}
	.whmpress_domain_price_list.whmpress.simple-cloud ul li:nth-child(even) a:hover{
		background-image: url({$even_hover_img});
		background-size: cover;
	}

	.whmpress_domain_price_list.whmpress.simple-cloud ul li span.domain_tld_value.price_value {
		font-size: 40px;
		color: #fff;
		width: 100%;
		display: block;
		text-align: left;
	}

	.whmpress_domain_price_list.whmpress.simple-cloud ul li span.price_complete {
		font-size: 26px;
		color: #ffcf00;
	}
	.whmpress_domain_price_list.whmpress.simple-cloud ul li span.price_register_off {
		font-size: 20px;
		color: #a9b0b4;
		margin-left: 10px;
	}
	.whmpress_domain_price_list.whmpress.simple-cloud ul i.fa.fa-angle-left.slick-arrow  {
		display: inline-block;
		position: absolute;
		left: -26px;
		top: 92px;
		font-size: 42px;
		cursor: pointer;
		width: 42px;
		text-align: center;
		z-index: 99999;
		color: #181818;
	}
	.whmpress_domain_price_list.whmpress.simple-cloud ul i.fa.fa-angle-right.slick-arrow  {
		display: inline-block;
		position: absolute;
		right: -26px;
		top: 92px;
		font-size: 42px;
		cursor: pointer;
		width: 42px;
		text-align: center;
		z-index: 99999;
		color: #181818;
	}
	.whmpress_domain_price_list.whmpress.simple-cloud ul li{
		position: relative;
	}
	.whmpress_domain_price_list.whmpress.simple-cloud ul span.whmpress_promo_text_tld {
		background: #e90a4a;
		position: absolute;
		top: 14px;
		right: 2px;
		color: #fff;
		width: 58px;
		height: 58px;
		text-align: center;
		border-radius: 100%;
		line-height: 58px;
		font-size: 20px;
		transform: rotate(15deg);
		z-index: 9999;
	}
</style>

<div class="whmpress_domain_price_list whmpress simple-cloud">
    <ul>
        {foreach $data as $domain}
            <li>
                <a {if $params.action_url ne ''} href="{$params.action_url}"{else} href="#"{/if}
                        class="{if $domain.details.promo eq '1'}whmpress_has_tooltip{/if}"
                >
                    {if {$show_promotions|lower eq 'yes'} and {$domain.details.promo eq '1'}}
                        <span class="whmpress_tooltip">
							<strong>{$domain.details.promo_text}</strong><br>
							<span>{$domain.details.promo_details}</span>
						</span>
                    {/if}
					{if $domain.details.promo_text eq ''}
						<span class=""><strong>{$domain.details.promo_text}</strong></span>
						{else}
						<span class="whmpress_promo_text_tld">{$domain.details.promo_text}</span>
					{/if}
                    <span class="domain_tld">
						<span class="domain_tld_title price_title">TLD Text:</span>
						<span class="domain_tld_value price_value">{$domain.tld}</span>
					</span>
                    <span class="registration_price">
						{*<span class="registration_price_title price_title">Register for </span>*}
						<span class="registration_price_value price_value">
                        <span class="price_complete">{$domain.simple_register}</span>
                            {*<span class="price_unit">$</span><span class="price_amount">9</span><span class="price_decimal">.</span><span class="price_fraction">98</span>*}
						</span>
						<span class="price_register_off"><del>{$domain.details.promo_details}{$domain.details.promo_register_off}</del></span>
					</span>
                    {*<span class="registration_duration">*}
						{*<span class="registration_duration_title price_title">Registration Period:</span>*}
						{*<span class="registration_duration_value price_value">{$domain.years}</span>*}
					{*</span>*}
                    {if {$show_renewal|lower eq 'yes'} and {$domain.renewal ne ''}}
                        <span class="renew_price">
		                <span class="renew_price_title price_title">Renew Price:</span>
		                <span class="renew_price_value price_value">
	                        <span class="price_complete">{$domain.renewal}</span>
		                </span>
					</span>
                    {/if}
                    {if {$show_trasnfer|lower eq 'yes'} and {$domain.transfer ne ''}}
                        <span class="transfer_price">
						<span class="transfer_price_title price_title">Transfer Price:</span>
						<span class="transfer_price_value price_value">
							<span class="price_complete">{$domain.transfer}</span>
						</span>
					</span>
                    {/if}
                </a>
            </li>
        {/foreach}
    </ul>
</div>

<script type="text/javascript">
    /* Default comment here */


    jQuery('.whmpress_domain_price_list.whmpress.simple-cloud ul').slick({
        dots: false,
        infinite: true,
        speed: 300,
        slidesToShow: 4,
        slidesToScroll: 4,
        nextArrow: '<i class="fa fa-angle-right" aria-hidden="true"></i>',
        prevArrow: '<i class="fa fa-angle-left" aria-hidden="true"></i>',
        fade:false,
        autoplay: true,
        autoplaySpeed: 2000,
        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 3,
                    infinite: true,
                    dots: false,
                }
            },
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
            // You can unslick at a given breakpoint now by adding:
            // settings: "unslick"
            // instead of a settings object
        ]
    });
    jQuery(document).on('ready',function () {
        jQuery('.whcom_row.whcom_sleek_products .whcom_label_product.whcom_radio').first().addClass('whcom_checked');
    });
</script>