string(96) "https://api.templatemonster.com/products/v2/products/en?language=en&ids=413708&expand=properties"
string(16182) "[{"templateId":413708,"typeId":1,"typeName":"Website template","typeUrl":"website-templates","categoryId":444,"categoryName":"Jewelry Templates","templateTitle":"Jewelry Responsive Website Template","templatePreviewHtmlTitle":"Starry Heavens - Jewelry Tailwind with Next js Template","templateDemoHtmlTitle":"Live preview for Starry Heavens - Jewelry Tailwind with Next js Template #413708","typeShortName":"Website","templatePreviewFBTitle":"<h2>Features</h2><p>Next.js is a powerful web design framework that combines sleek aesthetics with exceptional user experience, customization options, and integration with the latest web technologies. Whether you're launching a new online store or refreshing an existing one, Next.js provides the tools and features you need to captivate visitors and drive conversions effectively.</p><p>Next.js Template is indeed a highly versatile and visually stunning web design framework that follows the latest web design trends, providing a sleek and modern aesthetic. Here's how Next.js sets itself apart and delivers an exceptional user experience:</p><ul><li><strong>High-Quality Imagery:</strong> TAs mentioned earlier, high-resolution images are crucial for showcasing jewelry in all its brilliance. The template should support large, high-quality images that allow customers to zoom in and appreciate the intricate details of each piece.</li><li><strong>Responsive Design:</strong> Utilize Next-js responsive design utilities to ensure your jewelry website looks great and functions smoothly across various devices and screen sizes, from desktop computers to smartphones.</li><li><strong>Customizable Color Palette:</strong> Next-js extensive color palette and utility classes make it easy to customize the color scheme of your website to reflect your brand identity or the aesthetics of your jewelry collection.</li><li><strong>Image Galleries: </strong>Implement image gallery components using Next-js utility classes to showcase high-quality images of your jewelry pieces. Enable features like image zooming and lightboxes to allow customers to view products in detail.</li><li><strong>Product Filtering and Sorting:</strong> Use Next-js form and interactive utilities to create filtering and sorting options that help customers narrow down their search for specific types of jewelry, such as rings, necklaces, or earrings.</li><li><strong>Shopping Cart and Checkout:</strong> Develop a seamless shopping cart and checkout process using Next-js form and button utilities. Ensure that the checkout flow is intuitive and easy to navigate, with clear prompts for entering shipping details, payment information, and order review.</li><li><strong>SEO Optimization:</strong> Implement SEO best practices using Next-js HTML and meta tag utilities to improve the visibility of your jewelry website in search engine results. Optimize page titles, meta descriptions, and image alt text to attract organic traffic and potential customers.</li><li><strong>Tabs:</strong> The template supports tabbed content, making it easy to organize and present different types of information or product details in a user-friendly manner.</li><li><strong>Social Media Integration:</strong> Incorporate social media sharing buttons and widgets using Next-js flexbox and button utilities to encourage visitors to share their favorite jewelry items on platforms like Instagram, Facebook, and Pinterest.</li><li><strong>Product Detail Pages:</strong> Design individual product detail pages that provide comprehensive information about each jewelry item, including descriptions, pricing, materials, and additional images. Next-js layout and typography utilities can help structure these pages for optimal readability and visual appeal.</li><li><strong>Grid Layouts:</strong> Next-js grid system allows you to create flexible and responsive layouts for displaying your jewelry collection. Organize product listings, featured items, and promotional banners in visually appealing grid arrangements.</li><li><strong>Dropdown Menu:</strong> Clare offers a dropdown menu feature for streamlined navigation, allowing visitors to easily access different sections or categories of your website.</li><li><strong>Font Awesome:</strong> The template integrates Font Awesome, a popular icon library, providing a wide selection of icons that can be used to enhance the visual appeal and functionality of your website.</li><li><strong>Promotional Banners and Offers:</strong> The template should support promotional banners and offers that highlight special deals, discounts, or new arrivals. Eye-catching banners help draw attention to key promotions and encourage customers to explore further.</li></ul><h2>File included:</h2><ul><li>HTML files</li><li>css files</li><li>js files</li><li>Documentation in HTML</li></ul><h2>Photos :</h2><p>The 'images' on the demo site are purely for demonstration reasons and are not included in the main download package.</p><p>All Images Obtained Through 'Google Image Search'</p><p>Freepik</p><p>Unsplash</p><h2>Fonts :</h2><ul><li>Font Awesome - https://fontawesome.com/</li><li>Themify Icons</li></ul><h2>Frameworks / Scripts :</h2><ul><li>Tailwind</li><li>jQuery</li><li>Swiper Slider</li><li>Magnific-popup</li></ul><p>Note : All images are just for preview or demo purpose only, Not include in the download package.</p>","templateFullTitle":"Starry Heavens - Jewelry Tailwind with Next js Template","templatePreviewMetaDescription":"FeaturesNext.js is a powerful web design framework that combines sleek aesthetics with exceptional user experience, customization options, and integration with","templateDemoMetaDescription":"The live preview for this Starry Heavens - Jewelry Tailwind with Next js Template Website Template (#413708) is made available for you to get yourself informed about the design before you purchase it. Go through the pages, examine the images, press the buttons, explore the functionality.","specificTemplateNameListing":null,"specificTemplateNamePreview":null,"anchorTitle":"Starry Heavens - Jewelry Tailwind with Next js Template","anchorFeature":"Responsive","isInvertOrder":true,"isRTL":true,"anchorType":"","templateUrl":"/website-templates/starry-heavens-jewelry-tailwind-with-next-js-template-413708.html","userRating":0,"designIndex":1,"authorUserId":"78168322","exclusive":"1","state":1,"price":52,"inserted_date":"2024-04-24","sent":0,"downloads":0,"search_words":"fashion clean collections gold golden jewelry jewels online present ring rings shop shopping silver store watch watches ecommerce brand beauty","is_adult":0,"exc_price":2100,"sent_date":"2024-04-24 12:22:17","last_upload":"2024-04-24 12:28:15","package_id":295,"hasExclusivePrice":1,"screenshots":[{"id":3495005,"templ_id":413708,"filename":"413708-original.jpg","width":965,"height":600,"href":"","window_params":"","scr_type_id":334,"banner_url":"","banner_open_url":"","banner_open_window_params":"","wide":0},{"id":3495006,"templ_id":413708,"filename":"413708-big.jpg","width":965,"height":600,"href":"","window_params":"","scr_type_id":311,"banner_url":"","banner_open_url":"","banner_open_window_params":"","wide":0},{"id":3495007,"templ_id":413708,"filename":"413708-med.jpg","width":370,"height":370,"href":"","window_params":"","scr_type_id":312,"banner_url":"","banner_open_url":"","banner_open_window_params":"","wide":0},{"id":3495008,"templ_id":413708,"filename":"413708-m.jpg","width":145,"height":156,"href":"","window_params":"","scr_type_id":9,"banner_url":"","banner_open_url":"","banner_open_window_params":"","wide":0},{"id":3495009,"templ_id":413708,"filename":"413708-b.jpg","width":430,"height":267,"href":"","window_params":"","scr_type_id":57,"banner_url":"","banner_open_url":"","banner_open_window_params":"","wide":0}],"demoUrl":"/demo/413708.html","image":"https://s.tmimgcdn.com/scr/413700/starry-heavens-jewelry-tailwind-with-next-js-template_413708-original.jpg","searchHash":"bdba124f9a9ef4376beb114e7bcfecb4","previewHash":"2e1c966eb74f6099621e13d9e6697ac6","authorNickname":"WebbyCrown","lowLevelTopic":"Jewelry Templates","weightedRating":null,"annualSale":null,"monthlySales":null,"quarterlySales":null,"productBoost":126,"onSale":0,"finalPrice":50,"discountPercent":0,"discountAmount":0,"semiannualSales":null,"properties":{"features":["Responsive","Mobile Layout Included","Single Product","eCommerce","Dropdown Menu","Sample content","MegaMenu","Blog","Gallery","HTML 5"],"styles":["Clean","Dark","Mobile"],"isLastAdded":"1","popularity":"Zero Downloads","topic":["Jewelry Templates","Fashion & Beauty"],"isFree":"none","color":["black","white","grey","brown","pink"],"showVariantForcibly":"b","exclusive":"1","alreadyPacked":"1","marketplaceMembership":"One","imagesIncluded":"Yes","tags":["beauty","brand","clean","collections","fashion","gold","golden","jewelry","jewels","online","present","ring","rings","shop","shopping","silver","store","watch","watches","ecommerce"],"paidSupport":"Yes","webServerCompatibility":"Apache 2.4","generalSoftwareRequirements":["Code editing tool","ZIP unarchiver"],"authorUserId":"78168322","frameworks":"Node.js v18.x","excerpt":"<p>Next.js is a powerful web design framework that combines sleek aesthetics with exceptional user experience, customization options, and integration with the latest web technologies.</p>","nameOfTheTemplate":"Starry Heavens - Jewelry Tailwind with Next js Template","previewScreensOrVideoURLs":"https://s3u.tmimgcdn.com/u78168322/038e94e38a5754371053b310e6ddde09.jpg, https://s3u.tmimgcdn.com/u78168322/a99c0de55568b5a09d43aea88d3d9745.jpg, https://s3u.tmimgcdn.com/u78168322/42c403dfba23e3dc024545964b245ac5.jpg, https://s3u.tmimgcdn.com/u78168322/160f5c8b5d648dd5ca62e411ac0bef44.jpg, https://s3u.tmimgcdn.com/u78168322/d5f20eb6dccde3567f644034d95dba6b.jpg, https://s3u.tmimgcdn.com/u78168322/b5b95064b83124b360affead6cb95c2e.jpg","shortDescription":"<h2>Features</h2><p>Next.js is a powerful web design framework that combines sleek aesthetics with exceptional user experience, customization options, and integration with the latest web technologies. Whether you're launching a new online store or refreshing an existing one, Next.js provides the tools and features you need to captivate visitors and drive conversions effectively.</p><p>Next.js Template is indeed a highly versatile and visually stunning web design framework that follows the latest web design trends, providing a sleek and modern aesthetic. Here's how Next.js sets itself apart and delivers an exceptional user experience:</p><ul><li><strong>High-Quality Imagery:</strong> TAs mentioned earlier, high-resolution images are crucial for showcasing jewelry in all its brilliance. The template should support large, high-quality images that allow customers to zoom in and appreciate the intricate details of each piece.</li><li><strong>Responsive Design:</strong> Utilize Next-js responsive design utilities to ensure your jewelry website looks great and functions smoothly across various devices and screen sizes, from desktop computers to smartphones.</li><li><strong>Customizable Color Palette:</strong> Next-js extensive color palette and utility classes make it easy to customize the color scheme of your website to reflect your brand identity or the aesthetics of your jewelry collection.</li><li><strong>Image Galleries: </strong>Implement image gallery components using Next-js utility classes to showcase high-quality images of your jewelry pieces. Enable features like image zooming and lightboxes to allow customers to view products in detail.</li><li><strong>Product Filtering and Sorting:</strong> Use Next-js form and interactive utilities to create filtering and sorting options that help customers narrow down their search for specific types of jewelry, such as rings, necklaces, or earrings.</li><li><strong>Shopping Cart and Checkout:</strong> Develop a seamless shopping cart and checkout process using Next-js form and button utilities. Ensure that the checkout flow is intuitive and easy to navigate, with clear prompts for entering shipping details, payment information, and order review.</li><li><strong>SEO Optimization:</strong> Implement SEO best practices using Next-js HTML and meta tag utilities to improve the visibility of your jewelry website in search engine results. Optimize page titles, meta descriptions, and image alt text to attract organic traffic and potential customers.</li><li><strong>Tabs:</strong> The template supports tabbed content, making it easy to organize and present different types of information or product details in a user-friendly manner.</li><li><strong>Social Media Integration:</strong> Incorporate social media sharing buttons and widgets using Next-js flexbox and button utilities to encourage visitors to share their favorite jewelry items on platforms like Instagram, Facebook, and Pinterest.</li><li><strong>Product Detail Pages:</strong> Design individual product detail pages that provide comprehensive information about each jewelry item, including descriptions, pricing, materials, and additional images. Next-js layout and typography utilities can help structure these pages for optimal readability and visual appeal.</li><li><strong>Grid Layouts:</strong> Next-js grid system allows you to create flexible and responsive layouts for displaying your jewelry collection. Organize product listings, featured items, and promotional banners in visually appealing grid arrangements.</li><li><strong>Dropdown Menu:</strong> Clare offers a dropdown menu feature for streamlined navigation, allowing visitors to easily access different sections or categories of your website.</li><li><strong>Font Awesome:</strong> The template integrates Font Awesome, a popular icon library, providing a wide selection of icons that can be used to enhance the visual appeal and functionality of your website.</li><li><strong>Promotional Banners and Offers:</strong> The template should support promotional banners and offers that highlight special deals, discounts, or new arrivals. Eye-catching banners help draw attention to key promotions and encourage customers to explore further.</li></ul><h2>File included:</h2><ul><li>HTML files</li><li>css files</li><li>js files</li><li>Documentation in HTML</li></ul><h2>Photos :</h2><p>The 'images' on the demo site are purely for demonstration reasons and are not included in the main download package.</p><p>All Images Obtained Through 'Google Image Search'</p><p>Freepik</p><p>Unsplash</p><h2>Fonts :</h2><ul><li>Font Awesome - https://fontawesome.com/</li><li>Themify Icons</li></ul><h2>Frameworks / Scripts :</h2><ul><li>Tailwind</li><li>jQuery</li><li>Swiper Slider</li><li>Magnific-popup</li></ul><p>Note : All images are just for preview or demo purpose only, Not include in the download package.</p>","uniqueKeywords":"fashion,clean,collections,gold,golden,jewelry,jewels,online,present,ring,rings,shop,shopping,silver,store,watch,watches,ecommerce,brand,beauty","advImage":"https://s3u.tmimgcdn.com/u78168322/536848c909cdd11919afec0781a6a251.jpg","affiliateSells":"1","authorMainScreenshot":"https://s3u.tmimgcdn.com/u78168322/a0009638e233cfadfd1c46fd5e1a8e2b.jpg","livePreviewURL":"https://starry-heavens.vercel.app/","metaDescription":"FeaturesNext.js is a powerful web design framework that combines sleek aesthetics with exceptional user experience, customization options, and integration with","saleSells":"1","templateSupportOptions":"[]","demoMetaDescription":"The live preview for this Starry Heavens - Jewelry Tailwind with Next js Template Website Template (#413708) is made available for you to get yourself informed about the design before you purchase it. Go through the pages, examine the images, press the buttons, explore the functionality.","customUrl":"/website-templates/starry-heavens-jewelry-tailwind-with-next-js-template-413708.html","productSize":"12821483","types":"HTML Website Templates","templateIcon":"icon-monster_dark","hELPURL":"/quick-start-guide/website-template/","followUpLetter":"website-template-offers","productFamily":"None","templateGroup":"HTML Templates","category":"Website templates"}}]"
array(17) {
  [0]=>
  string(15) "HTTP/1.1 200 OK"
  [1]=>
  string(20) "Server: nginx/1.22.0"
  [2]=>
  string(35) "Date: Sun, 05 May 2024 10:06:09 GMT"
  [3]=>
  string(45) "Content-Type: application/json; charset=UTF-8"
  [4]=>
  string(17) "Connection: close"
  [5]=>
  string(130) "Access-Control-Expose-Headers: X-Pagination-Current-Page, X-Pagination-Page-Count, X-Pagination-Per-Page, X-Pagination-Total-Count"
  [6]=>
  string(12) "Vary: Accept"
  [7]=>
  string(27) "X-Pagination-Total-Count: 1"
  [8]=>
  string(26) "X-Pagination-Page-Count: 1"
  [9]=>
  string(28) "X-Pagination-Current-Page: 1"
  [10]=>
  string(25) "X-Pagination-Per-Page: 20"
  [11]=>
  string(293) "Link: <http://products/api/v2/products/en?language=en&ids=413708&expand=properties&page=1>; rel=self, <http://products/api/v2/products/en?language=en&ids=413708&expand=properties&page=1>; rel=first, <http://products/api/v2/products/en?language=en&ids=413708&expand=properties&page=1>; rel=last"
  [12]=>
  string(38) "Expires: Sun, 05 May 2024 10:11:09 GMT"
  [13]=>
  string(26) "Cache-Control: max-age=300"
  [14]=>
  string(16) "Direct_API: true"
  [15]=>
  string(22) "X-Cache-Status: BYPASS"
  [16]=>
  string(24) "X-Up: 159.203.151.221:80"
}
https://starry-heavens.vercel.app/<!DOCTYPE html>
<html lang="en">
<head>
    <title>#413708 Preview</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=11; IE=10; IE=9; IE=8;"/>
    <link rel="canonical" href="https://rms.templates.com/demo/413708.html">
    <link rel="stylesheet" type="text/css" href="/themes/theme-2018-v03-en/css/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="/themes/theme-2018-v03-en/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="/themes/theme-2018-v03-en/css/styles.css"/>
    <link rel="stylesheet" type="text/css" href="/themes/theme-2018-v03-en/css/demo.css"/>
    <link rel="stylesheet" type="text/css" href="/themes/theme-2018-v03-en/css/jquery.fancybox.css" />
    <link rel="icon" type="image/png" href="/themes/theme-2018-v03-en/images/favicon.png"/>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="/themes/theme-2018-v03-en/js/jquery.form.js"></script>
    <script type="text/javascript" src="/themes/theme-2018-v03-en/js/jquery.validate.js"></script>
    <script type="text/javascript" src="/themes/theme-2018-v03-en/js/jquery.fancybox.js"></script>
    <script type="text/javascript" src="/themes/theme-2018-v03-en/js/demo-main.js"></script>
    <link rel="stylesheet" type="text/css" href="/themes/theme-2018-v03-en/css/fontello-embedded.css"/>
    <script charset="utf-8">
        //TODO: some strange value
        var min_height = 600;
        $(function () {
            resizeFrame();
        });
        function resizeFrame() {
            if (0 == 0
        )
            return false;
            var main_iframe = $('#preview');
            var height = $(window).height() - $('#preview-bar:visible').outerHeight();
            /* if ($.browser.opera)
                height += 5; */
            if (height < min_height)
                height = min_height;
            $('#preview').height(height);
            $('#iframelive').height(height);
            if ($(window).width() < 1400)
                $('#min-hide-this').hide();
            else
                $('#min-hide-this').show();
        }
        $(window).resize(function () {
            resizeFrame();
        }).load(function () {
            resizeFrame();
        });
        $(document).ready(function(){
            $('#close').click(function(e){
                e.preventDefault();
                $('#preview-bar').hide();
            });
        })
    </script>
    <script type="text/javascript">
        window.su = 'https://rms.templates.com/';
    </script>
    

    <script>
    $(function () {

    $('#frame_controls .device_item').click(function(){
            $(this).siblings().removeClass('device_current');
            $(this).addClass('device_current');
            var className = $(this).data('device');
            $('#showframe').attr('class', className);
            return false;
        });

    });
    </script>
    <style>
    /* Frame with demo-----  */

/* Desktop */
#showframe {
    width: 100%;
    margin: 0 auto;
    /*
    position: relative;
    z-index: 1;
    */
}
    #showframe .hide_wrap {
        overflow: hidden;
    }
    #showframe iframe {
        width: 100%;
        height: 100%;
        display:block;
        vertical-align: top;
    }

/* Tablet landscape */
#showframe.tab_land {
    margin-top: 30px;
    /*width: 1224px;*/
    width: 1200px;
    padding: 38px 103px 37px 85px;
    background: url(../images/tab_landscape.png) 0 0 no-repeat;
}
    #showframe.tab_land .hide_wrap {
        width: 1024px;
                height: 640px;
        -webkit-border-radius: 3px;
            -ms-border-radius: 3px;
                border-radius: 3px;
    }
    #showframe.tab_land .hide_wrap iframe {
        width: 1041px !important;
        height: 640px !important;
    }

/* Tablet portrait */
#showframe.tab_port {
    margin-top: 30px;
    /*width: 480px;*/
    width: 540px;
    padding: 65px 27px 78px 28px;
    background: url(../images/tab_portrait.png) 0 0 no-repeat;
}
    #showframe.tab_port .hide_wrap {
        width: 480px;
        height: 640px;
        -webkit-border-radius: 3px;
            -ms-border-radius: 3px;
                border-radius: 3px;
    }
    #showframe.tab_port .hide_wrap iframe {
    	width: 497px !important;
		height: 640px !important;
	}

/* Tablet mobile */
#showframe.mobile {
	margin-top: 30px;
	/*width: 320px;*/
	width: 360px;
	padding: 92px 19px 102px 19px;
	background: url(../images/mobile.png) 0 0 no-repeat;
}
	#showframe.mobile .hide_wrap {
		width: 320px;
		height: 520px;
		-webkit-border-radius: 3px;
			-ms-border-radius: 3px;
				border-radius: 3px;
	}
	#showframe.mobile .hide_wrap iframe {
		width: 337px !important;
		height: 520px !important;
	}
#frame_controls .device_tablet_landscape:before{
    transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);

}

/* Mobile landscape */
#showframe.mobile_land {
	margin-top: 30px;
	/*width: 1024px;*/
	width: 800px;
	padding: 15px 103px 37px 90px;
	background: url(../images/mobile_landscape.png) 0 0 no-repeat;
}
	#showframe.mobile_land .hide_wrap {
		width: 1024px;
				height: 640px;
		-webkit-border-radius: 3px;
			-ms-border-radius: 3px;
				border-radius: 3px;
	}
	#showframe.mobile_land .hide_wrap iframe {
		width: 520px !important;
		height: 320px !important;
	}
	#frame_controls .device_mobile_landscape:before{
    transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);

}

/*Device Styles start*/
#frame_controls {
	display: inline-block;
	vertical-align: top;
	height:100%;
	/*
	margin-left:10em;
	*/
}
	#frame_controls .device_item {
		display: inline-block;
		vertical-align: top;
		/*font-size: 1.5em;*/
		height: 54px;
		/*line-height: 54px;*/
		text-align:center;

		width: 54px;
		margin-left:2px;
		/*background-color: #233448;*/

		/*padding: 0 12px;*/
		color: #546171;
	}
	#frame_controls .device_item:hover {
		color: #fff;
		/*
		background-color: #15e27f;
		*/
	}
	#frame_controls .device_current {
		color: #fff;	/* #15e27f; */
		/*
		background-color: #15e27f;
		*/
	}
/*Device Styles End*/
	.pricer{
		max-width:100px!important;
		min-width:100px!important;
		}

    </style>
    <style>
	/*Advanced Styles*/
a {
	text-decoration: none;
	-webkit-transition: color .3s ease, background-color .3s ease;
	    -ms-transition: color .3s ease, background-color .3s ease;
	        transition: color .3s ease, background-color .3s ease;
}
body, a, a:visited, a:active {
	color: #fff;
}
a:active {
	outline: none;
}

[class*="icon-"]:before {
	margin:0;
	padding:0;
	line-height:inherit;
	vertical-align:baseline;
}


#header {
	background-color: #0a1d33;
	height: 54px;
	text-align: center;
	position: relative;
	z-index: 2;
}
#header:after {
	content:' ';
	display:block;
	width: 100%;
	height:0;
	clear:both;
}

#header .left_col {
	float: left;
	height: 54px;
}

	#logo {
		display: inline-block;
		vertical-align: top;
		text-align:center;
		/*margin-right: 1px;*/
	}
		#logo img {
			vertical-align: top;
			width: auto;
			height: 54px;
			max-height:100%;
		}

	#socials {
		display: inline-block;
		vertical-align: top;
		height:100%;
	}
		#socials .social_item {
			display: inline-block;
			vertical-align: top;
			font-size: 16px;
			width: 54px;
			height: 54px;
			line-height: 54px;
			text-align:center;
			/*
			margin-left:2px;
			background-color: #233448;
			*/
			border-right: 1px solid #2f3f51;
		}


	#theme_selector {
		display: inline-block;
		vertical-align: top;
		color: #dedfe0;
		position:relative;
		/*
		background-color: #233448;
		margin-left: 2px;
		*/
		border-right: 1px solid #2f3f51;
		text-align: left;
	}
		#theme_selector .current_theme {
			display: block;
			width: 390px;
			height: 54px;
			line-height: 54px;
			overflow:hidden;
			padding: 0 3em 0 2em;
			color: #dedfe0;
			-webkit-box-sizing: border-box;
				-ms-box-sizing: border-box;
					box-sizing: border-box;
		}
		#theme_selector .current_theme:hover {
			color: #fff;
		}
		#theme_selector .current_theme:after {
			content: '\e825';
			font-family: 'fontello';
			display:inline-block;
			vertical-align:top;
			line-height: 56px;
			font-size: 1.25em;
			position:absolute;
			z-index:1;
			right: 1.5em;
			top: 0;
			-webkit-transition: -webkit-transform 0.5s ease;
			-ms-transition: -ms-transform 0.5s ease;
			transition: transform 0.5s ease;
		}
		#theme_selector .current_theme:hover:after {
			color: #fff;
		}
		#theme_selector .theme_selector_opened:after {
			-webkit-transform: rotate(180deg);
			-ms-transform: rotate(180deg);
			transform: rotate(180deg);
		}
			#theme_selector .current_theme_name {
				width: 100%;
				overflow: hidden;
			}
		#theme_selector .related_themes {
			display: none;
			width: 390px;
			padding: 2em;
			-webkit-box-sizing: border-box;
				-ms-box-sizing: border-box;
					box-sizing: border-box;
			position: absolute;
			left: 0;
			top: 54px;
			background-color: #0a1d33;
		}
			#theme_selector .themes_list {
				list-style: none;
				padding: 0;
				margin: 0;
			}
			#theme_selector .themes_list li {
				position: relative;
				padding-left: 2em;
			}
			#theme_selector .themes_list li:before {
				content: " ";
				display: block;
				position: absolute;
				top: 11px;
				left: 0;
				width: 1em;
				height: 2px;
				background-color: #15e27f;
			}
			#theme_selector .themes_list li a {
				display:block;
				color: #dedfe0;
			}
			#theme_selector .themes_list li.active a,
			#theme_selector .themes_list li a:hover {
				color: #15e27f;
			}
			#theme_selector .themes_list li + li {
				margin-top: 0.5em;
			}
			#theme_selector .placeholder {
				width: 100%;
				margin-top: 1em;
			}
			#theme_selector .placeholder img {
				width: 100%;
				max-width:100%;
				height: auto;
				vertical-align: top;
			}

#frame_controls {
	display: inline-block;
	vertical-align: top;
	height:100%;
	/*
	margin-left:10em;
	*/
}
	#frame_controls .device_item {
		display: inline-block;
		vertical-align: top;
		font-size: 1.5em;
		height: 54px;
		line-height: 54px;
		text-align:center;
		/*
		width: 54px;
		margin-left:2px;
		background-color: #233448;
		*/
		padding: 0 12px;
		color: #546171;
	}
	#frame_controls .device_item:hover {
		color: #fff;
		/*
		background-color: #15e27f;
		*/
	}
	#frame_controls .device_current {
		color: #fff;	/* #15e27f; */
		/*
		background-color: #15e27f;
		*/
	}
	#frame_controls .device_tablet_landscape:before {
		-webkit-transform:rotate(-90deg);
			-ms-transform:rotate(-90deg);
				transform:rotate(-90deg);
	}


#header .right_col {
	float: right;
	display:inline-block;
	vertical-align: top;
	height: 54px;
}
	#header .right_col > a {
		display: inline-block;
		vertical-align:top;
		height: 54px;
		line-height:54px;
		text-align:center;
		padding: 0 3.4em;
		font-size: 10px;
		font-weight:bold;
		text-transform: uppercase;
		letter-spacing:1px;
		/*
		margin-left: 2px;
		background-color: #233448;
		*/
		border-left: 1px solid #2f3f51;
	}
	#header .right_col > a:hover {
		background-color: #ff1f00;
	}
	#header .right_col > a:before {
		margin-right: 0.5em;
		vertical-align: top;
		font-size:1.25em;
	}
	#header .right_col > a.docs {
		padding: 0 3.6em;
	}
	#header .right_col > a.purchase {
		color: #fff;
		background-color: #15e27f;
		padding: 0 4em;
		border-left: none;
	}
	#header .right_col > a.purchase:hover,
	#header .right_col > a.docs:hover {
		color: #0a1d33;
		background-color: #f7f7f7;
	}
	#header .right_col > a.closeframe {
		padding:0 !important;
		letter-spacing:0 !important;
		width: 54px;
		visibility: hidden;
	}
	#header .right_col > a.closeframe:hover {
		color: #15e27f;
		background-color: #0a1d33;
	}
	#header .right_col > a.closeframe:before {
		margin-right: 0;
	}


.openframe,
.basket {
	display: block;
	width: 54px;
	height: 54px;
	line-height:54px;
	background-color: #0a1d33;
	text-align:center;
	font-size: 14px;
	font-weight:bold;
	text-transform: uppercase;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 3;
	-webkit-transition: color 0.3s ease, background-color 0.3s ease;
	-ms-transition: color 0.3s ease, background-color 0.3s ease;
	transition: color 0.3s ease, background-color 0.3s ease;
}
.basket {
	background-color:#15e27f;
	z-index: 1;
	font-size: 18px;
}
.basket:hover {
	color: #0a1d33;
	background-color: #f7f7f7;
}
.openframe:before {
	content: '\e815';
	font-family: 'fontello';
	display: inline-block;
	width: 1em;
	height: 1em;
	line-height: 1em;
	-webkit-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);
	-webkit-transition: -webkit-transform 0.5s ease;
	-ms-transition: -ms-transform 0.5s ease;
	transition: transform 0.5s ease;
}
body.header_off .openframe:before {
	/*
	content: '\e829';
	*/
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}
.openframe:hover {
	color: #15e27f;
	background-color: #0a1d33;
}


/* Frame with demo
-----------------------------  */

/* Desktop */
#showframe {
	width: 100%;
	margin: 0 auto;
	/*
	position: relative;
	z-index: 1;
	*/
}
	#showframe .hide_wrap {
		overflow: hidden;
	}
	#showframe iframe {
		width: 100%;
		height: 100%;
		display:block;
		vertical-align: top;
	}

/* Tablet landscape */
#showframe.tab_land {
	margin-top: 30px;
	width: 1224px;
	padding: 38px 103px 37px 85px;
	background: url(../images/tab_landscape.png) 0 0 no-repeat;
}
	#showframe.tab_land .hide_wrap {
		width: 1024px;
		height: 640px;
		-webkit-border-radius: 3px;
			-ms-border-radius: 3px;
				border-radius: 3px;
	}
	#showframe.tab_land .hide_wrap iframe {
		width: 1041px !important;
		height: 640px !important;
	}

/* Tablet portrait */
#showframe.tab_port {
	margin-top: 30px;
	width: 540px;
	padding: 65px 27px 78px 28px;
	background: url(../images/tab_portrait.png) 0 0 no-repeat;
}
	#showframe.tab_port .hide_wrap {
		width: 480px;
		height: 640px;
		-webkit-border-radius: 3px;
			-ms-border-radius: 3px;
				border-radius: 3px;
	}
	#showframe.tab_port .hide_wrap iframe {
		width: 497px !important;
		height: 640px !important;
	}

/* Tablet mobile */
#showframe.mobile {
	margin-top: 30px;
	width: 360px;
	padding: 92px 19px 102px 19px;
	background: url(../images/mobile.png) 0 0 no-repeat;
}
	#showframe.mobile .hide_wrap {
		width: 320px;
		height: 520px;
		-webkit-border-radius: 3px;
			-ms-border-radius: 3px;
				border-radius: 3px;
	}
	#showframe.mobile .hide_wrap iframe {
		width: 337px !important;
		height: 520px !important;
	}




@media (max-width: 1529px) {
	body {
		font-size:13px;
		line-height:20px;
	}
	#header,
	#header .left_col,
	#header .right_col,
	#logo img {
		height:42px;
	}
	#socials .social_item {
		font-size: 14px;
		width: 42px;
		height: 42px;
		line-height: 42px;
	}
	#theme_selector .current_theme {
		width: 300px;
		height: 42px;
		line-height: 42px;
		padding: 0 2em 0 1.5em;
	}
	#theme_selector .current_theme:after {
		line-height: 42px;
		right: 1em;
	}
	#theme_selector .related_themes {
		width: 300px;
		padding: 1.5em;
		top: 42px;
	}
	#frame_controls .device_item {
		height: 42px;
		line-height: 42px;
		padding: 0 10px;
	}
	#header .right_col > a {
		height: 42px;
		line-height:42px;
		padding: 0 2em !important;
	}
	#header .right_col > a.closeframe {
		width: 42px;
	}
	.openframe,
	.basket {
		width: 42px;
		height: 42px;
		line-height:42px;
		font-size: 12px;
	}
}
@media (max-width: 1199px) {
	#frame_controls {
		display:none;
	}
}
@media (max-width: 1023px) {
	#header .right_col > a.docs {
		display: none;
	}
}
@media (max-width: 959px) {
	#header .right_col > a.customization {
		display: none;
	}
}
@media (max-width: 767px) {
	#socials {
		display: none;
	}
	#theme_selector .current_theme {
		width: 270px;
		padding: 0 1.5em 0 1em;
	}
	#theme_selector .current_theme:after {
		right: 0.5em;
	}
	#theme_selector .related_themes {
		width: 270px;
		padding: 1em;
	}
	#header .right_col > a {
		font-size: 10px;
	}
}
@media (max-width: 639px) {
	#theme_selector .current_theme {
		display: none;
	}
}
@media (max-width: 479px) {
	body {
		font-size:12px;
		line-height:18px;
	}
	#header,
	#header .left_col,
	#header .right_col,
	#logo img {
		height:36px;
	}
	#socials .social_item {
		font-size: 14px;
		width: 36px;
		height: 36px;
		line-height: 36px;
	}
	#header .right_col > a {
		height: 36px;
		line-height:36px;
		font-size: 10px;
	}
	#header .right_col > a.purchase {
		letter-spacing:0;
	}
	#header .right_col > a.closeframe {
		width: 36px;
	}
	.openframe,
	.basket {
		width: 36px;
		height: 36px;
		line-height:36px;
	}
}
	</style>



</head>
<body id="fullscreen-preview">
    <div id="preview-bar">
        <ul id="bar-inner">
            <li class="tm-logo block">
                <a href="https://rms.templates.com/">
                    <img src="/themes/theme-2018-v03-en/images/Logo_white.png" alt="">
                </a>
            </li>
            <li class="block inner info">
                Website Templates #413708            </li>
            <!--responsivator HTML-->
            <li class="block inner info" id="frame_controls">
                <a href="#" class="icon-desktop device_item device_desktop device_current" data-width="100%" data-device="desktop"></a>
                <!--<a href="#" class="icon-tablet device_item device_tablet_landscape" data-width="960" data-device="tab_land"></a>-->
                <a href="#" class="icon-tablet device_item device_tablet_portrait" data-width="480" data-device="tab_port"></a>
                <a href="#" class="icon-mobile device_item device_mobile" data-width="320" data-device="mobile"></a>
                <!--<a href="#" class="icon-mobile device_item device_mobile_landscape" data-width="320" data-device="mobile_land"></a>-->
			</li>

                        <li class="block inner"><a href="https://www.templatehelp.com/preset/cart.php?act=add&amp;templ=413708&amp;pr_code=11111111" class="btn2">
            	Buy Now
            	                <span>
                    $48                <span>
                        </a></li>
                        <a href="#" id="close">Close</a>
        </ul>
    </div>
    <!--<div id="iframelive" class="no-responsive">-->
    <div id="showframe">

        <div id="preview-wrapper" class="hide_wrap">

                            <div class="technical-problems">
                    <p>Technical operations</p>
                    <p class="problems-message">Live demo of this template will be available within 5-6 hours.</p>
                    <p>
                        <a href="/website-templates-type">Go back to the template gallery</a>
                    </p>
                </div>
                    </div>
    </div>
</body>
</html>