string(96) "https://api.templatemonster.com/products/v2/products/en?language=en&ids=413707&expand=properties"
string(14460) "[{"templateId":413707,"typeId":1,"typeName":"Website template","typeUrl":"website-templates","categoryId":127,"categoryName":"Consulting Templates","templateTitle":"Consulting Responsive Website Template","templatePreviewHtmlTitle":"Grin Motion - Animated Personal Portfolio and Responsive Template","templateDemoHtmlTitle":"Demo Preview for Grin Motion - Animated Personal Portfolio and Responsive Template #413707","typeShortName":"Website","templatePreviewFBTitle":"<p>Grin Motion is not just another landing page template; it's a dynamic, engaging platform designed to showcase your portfolio with style and sophistication. Perfect for artists, designers, photographers, and creatives of all kinds, Grin Motion elevates your online presence with seamless animations and intuitive navigation.</p><p>What sets Grin Motion apart is its emphasis on interactivity and visual appeal. With Grin, your portfolio comes to life as visitors explore your work. Each scroll, click, and hover triggers fluid animations that draw attention to your creations, leaving a lasting impression on your audience.</p><p>Here's how Grin Motion can revolutionize your online portfolio:</p><p><strong>Dynamic Animations</strong>: Grin Motion employs a range of captivating animations that breathe life into your portfolio. From subtle fades to bold transitions, each animation is meticulously crafted to enhance the user experience and captivate your audience.</p><p><strong>User-Friendly Interface</strong>: Navigating your portfolio has never been easier. Grin Motion features an intuitive interface that guides visitors seamlessly through your work. With smooth scrolling and responsive design, users can effortlessly explore your portfolio across devices.</p><p><strong>Customization Options</strong>: Tailor your portfolio to reflect your unique style and brand identity. Grin Motion offers a variety of customization options, allowing you to personalize colors, fonts, layouts, and more. Showcase your creativity and make your portfolio truly your own.</p><p><strong>Easy Integration</strong>: Setting up your Grin Motion portfolio is a breeze. Our simple installation process and comprehensive documentation ensure that you can get your portfolio up and running in no time. Say goodbye to complex coding and hello to effortless integration.</p><p><strong>Engage Your Audience</strong>: With Grin Motion, you have the power to captivate and engage your audience like never before. Whether you're a seasoned professional or just starting out, Grin Motion provides the perfect platform to showcase your talents and leave a lasting impression on visitors or recruiters.</p><h3>FEATURES</h3><ul><li><strong>Clean &amp; latest design</strong></li><li><strong>Dark mode</strong></li><li><strong>1 home pages</strong></li><li><strong>1 inner pages</strong></li><li><strong>SEO Friendly Content</strong></li><li><strong>Easy to customize</strong></li><li><strong>Responsive design</strong></li><li><strong>Cross Browser Compatible</strong></li><li><strong>Tailwindcss</strong></li><li><strong>Custom CSS</strong></li><li><strong>Free Updates</strong></li><li><strong>SVG icons</strong></li><li><strong>Animate on scroll animations</strong></li><li><strong>Link to your social contacts</strong></li><li><strong>Well Structured code</strong></li></ul><h3>FILE INCLUDED</h3><ul><li><strong>HTML file</strong></li><li><strong>1 JSON file</strong></li><li><strong>JS files</strong></li><li><strong>CSS files</strong></li><li><strong>Included 2 SVG icons and sample images</strong></li><li><strong>Documentation</strong></li></ul><h3>SOURCES &amp; CREDITS</h3><ul><li><strong>React</strong></li><li><strong>React-spring (90% of components used)</strong></li><li><strong>Saad Designs(Credit)</strong></li></ul><p><br /></p><p>In conclusion, Grin Motion is more than just a landing page template—it's a dynamic, animating portfolio website that elevates your online presence and showcases your work in style. With its seamless animations, user-friendly interface, customization options, and easy integration, Grin Motion is the ultimate solution for creatives looking to make a statement online. Unlock the full potential of your portfolio with Grin Motion today!</p>","templateFullTitle":"Grin Motion - Animated Personal Portfolio and Responsive Template","templatePreviewMetaDescription":"Grin Motion is not just another landing page template; it's a dynamic, engaging platform designed to showcase your portfolio with style and sophistication.","templateDemoMetaDescription":"Prior to buying it, get acquainted with the high quality Grin Motion - Animated Personal Portfolio and Responsive Template Website Template (#413707) by visiting the live preview. Click through the pages, check out the images, press the buttons, explore the functionality.","specificTemplateNameListing":null,"specificTemplateNamePreview":null,"anchorTitle":"Grin Motion - Animated Personal Portfolio and Responsive Template","anchorFeature":"Premium","isInvertOrder":true,"isRTL":true,"anchorType":"","templateUrl":"/website-templates/grin-motion-animated-personal-portfolio-and-responsive-template-413707.html","userRating":0,"designIndex":1,"authorUserId":"78415016","exclusive":"1","state":1,"price":169,"inserted_date":"2024-04-24","sent":0,"downloads":1,"search_words":"portfolio clean website tech about us it cv green animating futuristic ai amazing consistent 2d 3d responsive attractive beautiful","is_adult":0,"exc_price":2100,"sent_date":"2024-04-24 12:22:15","last_upload":"2024-04-24 12:27:52","package_id":295,"hasExclusivePrice":1,"screenshots":[{"id":3495000,"templ_id":413707,"filename":"413707-original.jpg","width":1600,"height":1000,"href":"","window_params":"","scr_type_id":334,"banner_url":"","banner_open_url":"","banner_open_window_params":"","wide":0},{"id":3495001,"templ_id":413707,"filename":"413707-big.jpg","width":1600,"height":1000,"href":"","window_params":"","scr_type_id":311,"banner_url":"","banner_open_url":"","banner_open_window_params":"","wide":0},{"id":3495002,"templ_id":413707,"filename":"413707-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":3495003,"templ_id":413707,"filename":"413707-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":3495004,"templ_id":413707,"filename":"413707-b.jpg","width":430,"height":269,"href":"","window_params":"","scr_type_id":57,"banner_url":"","banner_open_url":"","banner_open_window_params":"","wide":0}],"demoUrl":"/demo/413707.html","image":"https://s.tmimgcdn.com/scr/413700/grin-motion-animated-personal-portfolio-and-responsive-template_413707-original.jpg","searchHash":"80bc01b99415808f11c3ea9c3d4d46d4","previewHash":"a99bc175e4327834e12d10b84e6c28dc","authorNickname":"abrsh","lowLevelTopic":"Consulting Templates; Management Company Templates; Advertising Agency Templates; IT Templates; Software Templates; Web Design Templates; Personal Page Templates; Designer Portfolio Templates; Office Templates","weightedRating":null,"annualSale":1,"monthlySales":1,"quarterlySales":1,"productBoost":126,"onSale":0,"finalPrice":165,"discountPercent":0,"discountAmount":0,"semiannualSales":1,"properties":{"features":["Premium","Responsive","Search Engine Friendly","Mobile Layout Included","CV","Multipurpose","Light Template","Sample content","Portfolio","HTML 5"],"styles":["Clean","Minimalist","Artworks","Futurist","Geometric","Mobile","Material Design"],"isLastAdded":"1","topic":["Consulting Templates","Management Company Templates","Advertising Agency Templates","IT Templates","Software Templates","Web Design Templates","Personal Page Templates","Design","Designer Portfolio Templates","Office Templates","Design & Photography","Business & Services","Computers & Internet","Society & People"],"isFree":"none","color":"black","showVariantForcibly":"b","exclusive":"1","alreadyPacked":"1","imagesIncluded":"No","tags":["amazing","attractive","beautiful","clean","futuristic","green","portfolio","responsive","tech","website","cv","3d","ai","it","2d","about us","consistent","animating"],"marketplaceMembership":"None","paidSupport":"Yes","webServerCompatibility":["Apache 2.4","Nginx 1.2x"],"pHPVersionCompatibility":["8.1","8.0","7.4","8.2"],"databaseServerCompatibility":["MySQL 8.0","MySQL 5.7","MariaDB 10"],"generalSoftwareRequirements":["Code editing tool","ZIP unarchiver"],"frameworks":"React.js v18.x","authorUserId":"78415016","excerpt":"<p>Introducing Grin Motion - Animated Personal Portfolio &amp; Responsive Template. Let us transform to the Future of animation. </p>","nameOfTheTemplate":"Grin Motion - Animated Personal Portfolio and Responsive Template","previewScreensOrVideoURLs":"https://s3u.tmimgcdn.com/u78415016/28826be274772287eda85c428960a90f.png, //www.youtube.com/embed/TtPIyQGd8-k, https://s3u.tmimgcdn.com/u78415016/61be18821964f760e7583fa8c8769a8c.png, https://s3u.tmimgcdn.com/u78415016/70ed6a938276b7f57440e98be4a36058.png, https://s3u.tmimgcdn.com/u78415016/5f02bb57b7b345898966a807d7d8e1db.png, https://s3u.tmimgcdn.com/u78415016/93dfd3bc32eb440473c2216a3d9072dd.png","shortDescription":"<p>Grin Motion is not just another landing page template; it's a dynamic, engaging platform designed to showcase your portfolio with style and sophistication. Perfect for artists, designers, photographers, and creatives of all kinds, Grin Motion elevates your online presence with seamless animations and intuitive navigation.</p><p>What sets Grin Motion apart is its emphasis on interactivity and visual appeal. With Grin, your portfolio comes to life as visitors explore your work. Each scroll, click, and hover triggers fluid animations that draw attention to your creations, leaving a lasting impression on your audience.</p><p>Here's how Grin Motion can revolutionize your online portfolio:</p><p><strong>Dynamic Animations</strong>: Grin Motion employs a range of captivating animations that breathe life into your portfolio. From subtle fades to bold transitions, each animation is meticulously crafted to enhance the user experience and captivate your audience.</p><p><strong>User-Friendly Interface</strong>: Navigating your portfolio has never been easier. Grin Motion features an intuitive interface that guides visitors seamlessly through your work. With smooth scrolling and responsive design, users can effortlessly explore your portfolio across devices.</p><p><strong>Customization Options</strong>: Tailor your portfolio to reflect your unique style and brand identity. Grin Motion offers a variety of customization options, allowing you to personalize colors, fonts, layouts, and more. Showcase your creativity and make your portfolio truly your own.</p><p><strong>Easy Integration</strong>: Setting up your Grin Motion portfolio is a breeze. Our simple installation process and comprehensive documentation ensure that you can get your portfolio up and running in no time. Say goodbye to complex coding and hello to effortless integration.</p><p><strong>Engage Your Audience</strong>: With Grin Motion, you have the power to captivate and engage your audience like never before. Whether you're a seasoned professional or just starting out, Grin Motion provides the perfect platform to showcase your talents and leave a lasting impression on visitors or recruiters.</p><h3>FEATURES</h3><ul><li><strong>Clean &amp; latest design</strong></li><li><strong>Dark mode</strong></li><li><strong>1 home pages</strong></li><li><strong>1 inner pages</strong></li><li><strong>SEO Friendly Content</strong></li><li><strong>Easy to customize</strong></li><li><strong>Responsive design</strong></li><li><strong>Cross Browser Compatible</strong></li><li><strong>Tailwindcss</strong></li><li><strong>Custom CSS</strong></li><li><strong>Free Updates</strong></li><li><strong>SVG icons</strong></li><li><strong>Animate on scroll animations</strong></li><li><strong>Link to your social contacts</strong></li><li><strong>Well Structured code</strong></li></ul><h3>FILE INCLUDED</h3><ul><li><strong>HTML file</strong></li><li><strong>1 JSON file</strong></li><li><strong>JS files</strong></li><li><strong>CSS files</strong></li><li><strong>Included 2 SVG icons and sample images</strong></li><li><strong>Documentation</strong></li></ul><h3>SOURCES &amp; CREDITS</h3><ul><li><strong>React</strong></li><li><strong>React-spring (90% of components used)</strong></li><li><strong>Saad Designs(Credit)</strong></li></ul><p><br /></p><p>In conclusion, Grin Motion is more than just a landing page template—it's a dynamic, animating portfolio website that elevates your online presence and showcases your work in style. With its seamless animations, user-friendly interface, customization options, and easy integration, Grin Motion is the ultimate solution for creatives looking to make a statement online. Unlock the full potential of your portfolio with Grin Motion today!</p>","uniqueKeywords":"portfolio,clean,website,tech,about us,it,cv,green,animating,futuristic,ai,amazing,consistent,2d,3d,responsive,attractive,beautiful","advImage":"https://s3u.tmimgcdn.com/u78415016/67eb50ca5d0799ed5e8bfc107fc54bce.png","affiliateSells":"1","authorMainScreenshot":"https://s3u.tmimgcdn.com/u78415016/a2ac606a02060d597b1933bf56fb2751.jpg","imageKeyFeatures":"https://s3u.tmimgcdn.com/u78415016/aeb3e73cf59cecd34853f74afff3f342.png","livePreviewURL":"https://openafri.com","metaDescription":"Grin Motion is not just another landing page template; it's a dynamic, engaging platform designed to showcase your portfolio with style and sophistication.","saleSells":"1","templateSupportOptions":"[]","demoMetaDescription":"Prior to buying it, get acquainted with the high quality Grin Motion - Animated Personal Portfolio and Responsive Template Website Template (#413707) by visiting the live preview. Click through the pages, check out the images, press the buttons, explore the functionality.","customUrl":"/website-templates/grin-motion-animated-personal-portfolio-and-responsive-template-413707.html","productSize":"7987975","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:23:21 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=413707&expand=properties&page=1>; rel=self, <http://products/api/v2/products/en?language=en&ids=413707&expand=properties&page=1>; rel=first, <http://products/api/v2/products/en?language=en&ids=413707&expand=properties&page=1>; rel=last"
  [12]=>
  string(38) "Expires: Sun, 05 May 2024 10:28:21 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: 165.227.251.218:80"
}
https://openafri.com<!DOCTYPE html>
<html lang="en">
<head>
    <title>#413707 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/413707.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 #413707            </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=413707&amp;pr_code=11111111" class="btn2">
            	Buy Now
            	                <span>
                    $156                <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>