/* load font 
@import url("../../../fonts/i01_vfont/css/stylesheet.css");
@import url("../../../fonts/i02_vfont2/css/stylesheet.css");
@import url("../../../fonts/i03_vfont3/css/stylesheet.css");
*/

@import url("../../../fonts/i05_social/css/stylesheet.css");
@import url("../../../fonts/i04_material/css/stylesheet.css");
@import url("../../../fonts/un_sarabun/css/stylesheet.css");
@import url("../../../fonts/true/css/stylesheet.css");
@import url("../../../fonts/kanit/css/stylesheet.css");

/* General */
	html {
		/*height:100%;*/
		text-rendering: auto !important;/*optimizeLegibility !important;*/
	    -webkit-font-smoothing: antialiased !important;background:#fff;
		margin:0;padding:0;	
		width:100%;height:auto;overflow:auto;overflow-x:hidden;
		xbackground:#ff008c;
	}
	body {
		height:auto;width:100%;text-decoration: none; text-align:center;background:none;color:#222;overflow-x:hidden;
		font-family:'Kanit',arial,tahoma;letter-spacing:0;overflow-x:hidden;/*-webkit-overflow-scrolling: touch;*/
		font-weight:bold;
		margin:0;padding:0;
		background:#ff008c;color:#fff;
	}
	div { word-wrap:break-word;vertical-align:top;text-align:left; }
	a,a:link,a:active,a:visited  { text-decoration:none;color:#222;transition:all 0.15s; }
	a:hover {color: #4f72a2;cursor:pointer;}
	br { clear: left; }
	tr {vertical-align:top;}
	td {vertical-align:top;text-align:left;	}
	input.text { padding:4px;font-size:15px;font-family:inherit;border:1px solid #ccc;background:#fafafa; }
	input.text:focus { background:#eee;border-color:#00c9f4; }
	select { 	border:1px solid #ddd; }
	input,textarea,select {font-family:inherit;	}
	textarea { border:1px solid #ddd; 	}
	.hide { display:none !important; }
	.hidden { display:none; }
	.txt-left { text-align:left !important; }
	.txt-center { text-align:center !important; }
	.txt-right { text-align:right !important; }
	.text-title { font-size:160%;color:#222; }
	.bold {
		font-weight:bold;
	}
	span.space { visibility:hidden; }
	span.required:after {
		content:'*';margin-left:5px;color:#99e7d9;color:red;
	}

	input[type="text"],
	input[type="password"],
	textarea {
		transition:all .15s;padding:5px;border-radius:3px;
	}

	.line-bottom { border-bottom:1px solid #eee; }

	div.menu-opened-bg { display:none;background:#000;width:100%;height:100%;position:absolute;top:0;left:0;z-index:2;opacity:0.5; }

	.base-color {
		color:#99e7d9 !important;
	}
	.base-bgcolor {
		background-color:#99e7d9;
	}

	select.no-arrow {
		-webkit-appearance:none;
	}

/*	Styling Scroll bar 
	::-webkit-scrollbar {
	  width: 6px;
	}

	::-webkit-scrollbar-track {
	  border-radius: 6px;
	}

	::-webkit-scrollbar-thumb {
	  border-radius: 6px;
	  background:rgba(0,0,0,0.4);
	} */

/* UI Effect */
	.blur { 
		-webkit-filter: blur(20px);
		-moz-filter: blur(20px);
		-o-filter: blur(20px);
		-ms-filter: blur(20px);
		filter: blur(20px);
		opacity: 0.7;
	}

/* Page transitions */
	.page-transition { transform: transale3d(0,0,0);-webkit-transform: transale3d(0,0,0); }
	.page-transition.trans-out { -webkit-transition:none;transition:none;opacity:0;transform:scale(0.2);-webkit-transform:scale(0.2); }
	.page-transition.trans-in { opacity:1;transition:transform 0.3s linear;transform:scale(1.0); }

/* Responsive Template */
	xdiv.langs { position:absolute;top:4px;right:10px; }
	.rs-debug { display:none; }
	.rs-mb { display:none; }
	.rs-divider { clear:both; }
	.rs-lf { display:none;clear:both; }
	.rs-grid > .rs-divider { clear:both !important; }
	.rs-dt { display:; }
	.rs-grid { width:100%;}
	.rs-grid > div.rs-grid:first-child { margin-left:0; }
	.rs-grid > div.rs-grid { float:left;/*background:#ccc;*/  }
	.rs-grid2 > div.rs-grid { width:49%;margin-left:2%; }
	.rs-grid3 > div.rs-grid { width:32%;margin-left:2%; }
	.rs-grid4 > div.rs-grid { width:23.5%;margin-left:2%; }
	.rs-grid5 > div.rs-grid { width:18.4%;margin-left:2%; }
	.rs-grid6 > div.rs-grid { width:15%;margin-left:2%; }
	.rs-grid7 > div.rs-grid { width:12.571%;margin-left:2%; }
	.rs-grid8 > div.rs-grid { width:10.75%;margin-left:2%; }
	.rs-grid9 > div.rs-grid { width:9.3333%;margin-left:2%; }
	.rs-grid10 > div.rs-grid { width:8.2%;margin-left:2%; }
	.rs-grid11 > div.rs-grid { width:7.27272%;margin-left:2%; }
	.rs-grid12 > div.rs-grid { width:6.5%;margin-left:2%; }
	div.rs-grid.rs-full { width:100%;margin:0;}
	div.rs-grid > div.rs-grid.rs-topmargin { margin-top:20px; }
	div.rs-grid3 > div.rs-grid2 { width:66%; }
	div.rs-grid4 > div.rs-grid2 { width:49%; }
	div.rs-grid4 > div.rs-grid3 { width:74.5%; }
	div.rs-grid5 > div.rs-grid2 { width:38.8%; }
	div.rs-grid5 > div.rs-grid3 { width:59.2%; }
	div.rs-grid5 > div.rs-grid4 { width:79.6%; }
	div.rs-grid6 > div.rs-grid2 { width:32%; }
	div.rs-grid6 > div.rs-grid3 { width:49%; }
	div.rs-grid6 > div.rs-grid4 { width:66%; }
	div.rs-grid6 > div.rs-grid5 { width:83%; }
	div.rs-grid7 > div.rs-grid2 { width:27.142%; }
	div.rs-grid7 > div.rs-grid3 { width:41.713%; }
	div.rs-grid7 > div.rs-grid4 { width:56.284%; }
	div.rs-grid7 > div.rs-grid5 { width:70.855%; }
	div.rs-grid7 > div.rs-grid6 { width:85.426%; }
	div.rs-grid8 > div.rs-grid2 { width:23.5%; }
	div.rs-grid8 > div.rs-grid3 { width:36.25%; }
	div.rs-grid8 > div.rs-grid4 { width:49%; }
	div.rs-grid8 > div.rs-grid5 { width:61.75%; }
	div.rs-grid8 > div.rs-grid6 { width:74.5%; }
	div.rs-grid8 > div.rs-grid7 { width:87.25%; }
	div.rs-grid9 > div.rs-grid2 { width:20.6666%; }
	div.rs-grid9 > div.rs-grid3 { width:31.9999%; }
	div.rs-grid9 > div.rs-grid4 { width:43.3332%; }
	div.rs-grid9 > div.rs-grid5 { width:54.6665%; }
	div.rs-grid9 > div.rs-grid6 { width:65.9998%; }
	div.rs-grid9 > div.rs-grid7 { width:77.3331%; }
	div.rs-grid9 > div.rs-grid8 { width:88.6664%; }

	.mobile-front-topmenu-button { display:none; }
	ul.front-topmenu { display:inline-block; }

	@media screen and (max-width: 540px) {
		.rs-mbmargin { width:95%;margin-left:2.5%; }
		.rs-mleft { text-align:left !important; }
		.rs-mright { text-align:right !important; }
		.mobile-front-topmenu-button { display:inline; }
		ul.front-topmenu { display:none; }
		.rs-debug { display:none;width:80px;height:40px;background:#fff;opacity:0.9;font-size:20px;position:absolute;top:0px;left:0px;z-index:200; }
		.rs-divider { clear:both; }
		.rs-lf { display:block;clear:both; }
		.rs-mb { display:inline-block; }
		.rs-dt { display:none;}
		.rs-mb100 { width:100%; }
		.rs-mcenter { text-align:center !important; }
		div.rs-grid > div.rs-grid { width:100% !important;margin-left:0;margin-top:10px;margin-bottom:20px; }
		div.rs-grid > div.rs-child { margin:0; }
		div.rs-grid > div.rs-grid:first-child { margin-top:0px; }
		div.rs-grid > div.rs-grid:last-child { margin-bottom:0px; }
		div.rs-grid > div.rs-grid.rs-topmargin > div.rs-grid { margin-top:0px;margin-bottom:0px; }
	}


	.btn-default-back:before {
		font-family:'vfont-material';content:'\e110';
	}

	a.btn-bg,
	a.btn-bg:visited,
	a.btn-bg:hover,
	a.btn-bg:link {
		background:	#99e7d9;color:#786e62;box-shadow:1px 1px 2px #786e62;border-radius:3px;
	}
	a.btn-bg:active {
		box-shadow:1px 3px 3px #b4a89a;
	}

/* Mobile App */
	body { 
		width:100%;margin:0;padding:0;font-family:'Kanit',Arial,Tahoma;font-size:20px;letter-spacing:-0.15px;
	}
	/* Font for different screen size */
	@media screen and (min-width: 480px) { body { font-size:20px; } } 
	@media screen and (min-width: 800px) { body { font-size:20px; } } 
	@media screen and (min-width: 1200px) { body { font-size:20px; } } 
	@media screen and (min-width: 1600px) { body { font-size:22px; } } 



.btn-search {
	cursor:pointer;
}

.color-orange {
	color:#f8a430;
}

div.bg {
	width:100%;height:100%;position:fixed;top:0;left:0;
	background:url(../../images/bg.jpg) no-repeat;
	background-position:center top;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover !important;	
}

.hide {
	display:none !important;
}
input[type="text"] {
	transition:all 0.2s;border:0;background:#f2f2f2;border-radius:5px;padding:4px 10px;width:80%;max-width:300px;font-size:0.8em;font-family:inherit;font-weight:bold;
}
input[type="text"]:hover {
	background:#fff;
}
input[type="text"]:focus {
	background:#fff;box-shadow:0 0 10px #d4d202;
}



a.btn,
a.btn:visited,
a.btn:link {
	font-family:'Kanit';background:#fff;color:#ff008c !important;vertical-align:middle;cursor:pointer;display:inline-block;transition:all .15s;
	padding:0 12px;height:35px;line-height:35px;font-size:20px;text-decoration:none;border-radius:20px;
	text-shadow:none;
	width:60% !important;max-width:200px !important;
}
a.btn:hover {
	background:#fff;
}
a.btn:active {
	position:relative;top:1px;
}
a.btn.wide {
	padding:0 30px;
}


a.btn.pink,
a.btn.pink:visited,
a.btn.pink:link {
	font-family:'Kanit';background:#ff008c;color:#fff !important;vertical-align:middle;cursor:pointer;display:inline-block;transition:all .15s;
	padding:0 12px;height:35px;line-height:35px;font-size:20px;text-decoration:none;border-radius:10px;
	text-shadow:none;
	width:60% !important;max-width:200px !important;
}
a.btn.pink:hover {
	background:#fff;color:#ff008c !important;
}
a.btn.pink.active {
	background:#fff;color:#ff008c !important;
}

a.btn.white,
a.btn.white:visited,
a.btn.white:link {
	font-family:'Kanit';background:#fff;color:#ff008c !important;vertical-align:middle;cursor:pointer;display:inline-block;transition:all .15s;
	padding:0 12px;height:35px;line-height:35px;font-size:20px;text-decoration:none;border-radius:20px;
	text-shadow:none;
	width:60% !important;max-width:200px !important;
}
a.btn.white:hover {
	background:#ff008c;color:#fff !important;
}
a.btn.white.active {
	background:#ff008c;color:#fff !important;
}

a.btn-menu {
	position:absolute;right:10px;display:inline-block;z-index:30;
}
a.btn-menu:before {
	font-size:30px;font-family:'vfont-material';content:'\e20e';cursor:pointer;transition:all 0.15s ease-in-out;
}
a.btn-menu.active:before {
	content:'\e209';
}

ul.menu {
	overflow:hidden;padding:10px 0;margin:0;list-style:none;padding-bottom:0;border-bottom:0px solid #ccc;
	transition:all 0.2s ease-in-out;
	transform:translateY(-10%);opacity:0;
	background:none;visibility:hidden;z-index:20;margin:0 auto;max-width:1440px;box-shadow:0 1px 2px #000;display:none;
}
ul.menu.active {
	transform:scale(1);opacity:1;visibility:visible;transform:translateY(0);background:rgba(255,255,255,0.95);
}
ul.menu li {
	margin:0;padding:0;
}
ul.menu a {
	padding:10px 10px;display:block;margin:0;line-height:1em;font-size:1.3em;text-align:right;cursor:pointer;transition:all 0.15s;padding-right:20px;
	font-weight:bold;
}
ul.menu a:hover,
ul.menu a.active {
	color:#1892b7;
}
ul.menu a.btn-menu-lang {
	font-size:1em;margin:0 1px;padding:5px;border-radius:4px;
	display:inline-block;margin-right:12px;
}
ul.menu a.btn-menu-lang:hover,
ul.menu a.btn-menu-lang.active {
	background:#213c67;color:#fff;
}

ul.menu.submenu {
	transform:scale(1);opacity:1;visibility:visible;transform:translateY(0);display:inline-block;border:0;box-shadow:none;background:#f3f3f3;border-radius:3px;padding:5px 10px;position:relative;top:11px;padding-right:20px;	
}
ul.menu.submenu a {
	display:block;margin:0;line-height:1em;text-align:left;cursor:pointer;transition:all 0.15s;padding-right:20px;
	display:none;padding:0;
	font-size:0.75em;
}
ul.menu.submenu a.active {
	display:block;
}
ul.menu.submenu.opened a {
	display:block;padding:8px 0;
}

ul.menu.submenu:after {
	font-family:'vfont-material';content:'\e10f';margin-left:10px;display:inline-block;position:absolute;right:-2px;bottom:-8px;color:#aaa;font-size:20px;padding-right:3px;padding-left:3px;
}
ul.menu.submenu.opened:after {
	display:none;
}

div.inner {
	display:block;padding:10px 2.5%;max-width:960px;position:relative;margin:0 auto;
	width:95%;
}
div.header {
	position:fixed;top:0;z-index:50;width:100%;
	background:rgba(255,255,255,0.9);
	height:auto;xline-height:55px;margin:0 auto;color:#fff;transition:all 0.15s;
	/*border-bottom:2px solid #213c67;*/
	xposition:relative;background:#fff;
	padding-bottom:10px;
	height:110px;overflow:hidden;
}
div.header img.icon {
	width:30px;border:0;margin:0;padding:0;position:relative;top:3px;
}
div.header div.langs {
	position:absolute;xright:5px;xtop:25px;font-size:14px;font-weight:normal;color:#fff;
	
	position:relative;text-align:center;top:5px;font-size:15px;
}
div.langs a.btn-lang {
	display:inline-block;margin:0 0px;padding:5px 10px;border-radius:5px;background:#ccc;
	line-height:1em;color:#fff;cursor:pointer;width:60px;text-align:center;
}
div.langs a.btn-lang:hover,
div.langs a.btn-lang.active {
	background:#ff008c;color:#fff;
}
img.logo {
	position:absolute;xleft:5px;xtop:5px;
	width:50%;height:auto;max-height:auto;max-width:auto;border-radius:10px;background:#fff;padding:3px 5px;

	position:relative;display:block;width:90%;margin:0 auto;
}
div.subheader {
	position:fixed;top:55px;z-index:40;width:100%;
	background:rgba(255,255,255,0.94);
	height:45px;line-height:45px;margin:0 auto;color:#fff;transition:all 0.15s;
	border-bottom:2px solid transparent;vertical-align:middle;
}
div.subheader .inner {
	position:relative;padding:0 0.5%;display:block;margin:0 auto;
}
div.subheader .title {
	font-size:0.6em;display:inline-block;background:#213c69;padding:5px;height:auto;line-height:1em;vertical-align:top;position:relative;top:13px;
}
div.footer {
	padding-top:0px;padding-bottom:0px;background:#ff008c;margin-top:0px;
	color:#fff;text-align:center;
	height:auto;position:relative;bottom:0;margin:0;padding:10px 0;
	font-size:0.8em;font-weight:300;
}







span.socials {
	position:absolute;top:-20px;right:14px;color:#222;font-size:12px;display:none;
}
span.socials a {
	margin:0 2px;font-size:22px;position:relative;top:5px;
}
ul.menu li.socials {
	display:block;text-align:right;color:#222;border-top:1px solid #eee;background:#f2f2f2;padding:10px 0;padding-right:12px;background:rgba(240,240,240,0.9);border-bottom:2px solid #ccc;
}
ul.menu li.socials a.btn-youtube {
	top:6px;
}
ul.menu li.socials a {
	display:inline;padding:0 5px;position:relative;top:4px;padding-right:0;padding-left:5px;
}


div.panes {
	display:block;padding:0;margin:0;position:relative;
	background:none;padding-top:0;
	/*z-index:3;*/
	height:auto;
	overflow:hidden;
	margin-top:120px;
}
div.panes div.pane-mask {
	position:absolute;background:rgba(0,0,0,0.5);width:100%;height:100%;
	z-index:100;left:0;top:0;
	display:none;transition:all 0.1s;
}
div.page-mask {
	position:absolute;background:rgba(0,0,0,0.15);width:100%;height:100%;
	z-index:100;left:0;top:0;
	visibility:hidden;transition:all 0.2s;
	background:#fff;
	z-index:-10;
	-webkit-transition-timing-function: ease-out;
	-moz-transition-timing-function: ease-out;
	-ms-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}
div.page-mask.active {
	z-index:100;left:0;top:0;
	visibility:visible;transition:all 0.2s;
}
div.page-mask2 {
	position:fixed;background:rgba(0,0,0,0.65);width:100%;height:100%;
	left:0;top:0;
	visibility:hidden;transition:all 0.2s;
	z-index:-10;
	opacity:0;
	-webkit-transition-timing-function: ease-out;
	-moz-transition-timing-function: ease-out;
	-ms-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}
div.page-mask2.active {
	opacity:1;
	z-index:10000000;left:0;top:0;
	visibility:visible;transition:all 0.2s;
}
div.pane {
	overflow:hidden;
	padding:0 0;margin:0 auto;padding-top:0;
	text-align:center;
	display:block;
	transition:opacity 0s;
	opacity:0;
	position:absolute;
	-webkit-transition-timing-function: ease-out;
	-moz-transition-timing-function: ease-out;
	-ms-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	transition-timing-function: ease-out;

	xoverflow:hidden;position:relative !important;height:auto !important;
	padding:0 0;margin:0 auto;padding-top:0;
	text-align:center;
	display:none;
}
div.pane.pane-slide-left {
	-webkit-transform:translate3d(-100%,0,0);
	-moz-transform:translate3d(-100%,0,0);
	-ms-transform:translate3d(-100%,0,0);
	-o-transform:translate3d(-100%,0,0);
	transform:translate3d(-100%,0,0);
	-webkit-transition-timing-function: ease-out;
	-moz-transition-timing-function: ease-out;
	-ms-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}
div.pane.pane-slide-right {
	-webkit-transform:translate3d(100%,0,0);
	-moz-transform:translate3d(100%,0,0);
	-ms-transform:translate3d(100%,0,0);
	-o-transform:translate3d(100%,0,0);
	transform:translate3d(100%,0,0);
	-webkit-transition-timing-function: ease-out;
	-moz-transition-timing-function: ease-out;
	-ms-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}
div.pane.active {
	opacity:1;
	transition:opacity 0.7s, transform 0.4s;
	-webkit-transform:translate3d(0,0,0);
	-moz-transform:translate3d(0,0,0);
	-ms-transform:translate3d(0,0,0);
	-o-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
	-webkit-transition-timing-function: ease-out;
	-moz-transition-timing-function: ease-out;
	-ms-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	position:relative;
	display:block;
}
div.pane div.step-title {
	font-size:1em;display:block;text-align:center;padding-bottom:5px;padding-top:20px;line-height:1.25em;
}
div.pane div.step-content {
	padding:10px 0;text-align:center;margin:0 auto;
}
div.pane span.step-actions {
	display:block;bottom:0;text-align:center;
	width:100%;left:0;
	position:relative;padding-top:0;
}
div.pane span.step-actions > a.btn {
	font-size:20px;height:35px;line-height:35px;padding:0;
	margin:0 1px;width:80px;vertical-align:middle;
}
div.pane span.step-actions > a.btn.flat {
	background:none;color:#666;font-size:0.9em;
}
div.pane span.step-actions div.share {
	padding-top:30px;display:block;text-align:center;
}
div.pane span.step-actions div.share a {
	display:inline-block;
}
div.pane span.step-actions > a > img,
div.pane span.step-actions div.share img {
	width:35px;height:35px;
}
div.pane span.step-actions > a > img {
	position:relative;top:10px;
}
div.panes a.btn-start {
	position:absolute;top:0;right:0;font-size:26px;
	background:#0095da;color:#fff;display:inline-block;padding:0 10px;line-height:45px;height:40px;vertical-align:middle;
	border-radius:3px;cursor:pointer;z-index:6;
	border-radius:50%;width:70px;height:70px;font-size:20px;padding:0;margin:0;box-shadow:1px 1px 2px #444;right:5px;
	line-height:1em;text-align:center;vertical-align:middle;transition:all 0.2s;

	position:fixed;background:none;left:0px;top:-5px;width:50px;height:50px;box-shadow:none;z-index:2000000;opacity:0.8;
}
div.panes a.btn-start span.btn-icon {
	position:relative;line-height:1.6em;font-size:42px;top:0;z-index:2000000;
}
div.panes a.btn-start span.txt {
	margin-top:0px;display:inline-block;line-height:0.6em;
	display:none;
}
div.panes a.btn-start:hover {
	background:#29bbff;box-shadow:2px 2px 8px #777;
	background:none;box-shadow:none;
	opacity:1;
}
div.panes a.btn-start:active {
	top:1px;
}

div.pane.step01 {
	background-color:#fff !important;
}
div.pane.step01 div.block {
	background-size:280% auto !important;height:auto;	
	background-position:60% 10% !important;
	overflow:hidden;
}
div.pane.step02 {
	background-color:#ff008c !important;
	background-size:200% auto !important;
	background-position:55% 0 !important;
}

[lang-id="share2"],
[lang-id="share3"],
span.step-actions {
	text-align:center;
}

div.pane.step02 span.step-actions {
	position:fixed;bottom:50px;height:45px;background:rgba(0,0,0,0.5);
	z-index:30000;

	position:relative;bottom:auto;height:auto;background:none;
}
div.pane.step02 span.step-actions a.btn {
	top:5px;position:relative;
	width:80px;	
}
/*
div.panes a.btn-text {
	position:absolute;top:0;left:0;font-size:26px;
	background:#0095da;color:#fff;display:inline-block;padding:0 10px;line-height:45px;height:40px;vertical-align:middle;
	border-radius:3px;cursor:pointer;z-index:6;
	border-radius:50%;width:70px;height:70px;font-size:20px;padding:0;margin:0;box-shadow:1px 1px 2px #444;right:5px;
	line-height:1em;text-align:center;vertical-align:middle;transition:all 0.2s;
}
div.panes a.btn-text span.btn-icon {
	position:relative;line-height:1.6em;font-size:26px;top:2px;
}
div.panes a.btn-text span.txt {
	margin-top:0px;display:inline-block;line-height:0.6em;
}
div.panes a.btn-text:hover {
	background:#29bbff;box-shadow:2px 2px 8px #777;
}
div.panes a.btn-text:active {
	top:1px;
}
*/
span.devide-btn {
	font-size:0.9em;display:inline-block;padding:0 10px;color:#999;position:relative;top:-30px;
}
span.btn-create-image {
	display:inline-block;width:110px;height:110px;background:#dedede;border:1px solid #ccc;cursor:pointer;
	transition:all 0.1s;border-radius:25px;	
	display:block;text-align:center;margin:20px auto;
	color:#ff008c;
}
span.btn-create-image:hover {
	background:#d9d9d9;
}
span.btn-create-image span.title {
	color:#ff008c;font-size:0.75em;display:block;text-align:center;vertical-align:middle;line-height:1.5em;
	margin-top:30%;
}
span.btn-create-image span.title:before {
	font-family:'vfont-material';content:'\e100';font-size:34px;color:#ff008c;display:block;text-align:center;vertical-align:middle;		
	content:'\e145';margin-bottom:10px;
}
span.btn-create-image.camera span.title:before {
	content:'\e145';
}
span.btn-create-image.facebook span.title:before {
	font-family:'app-social';content:'\ea90';color:#3b5998;
}

a.btn-share,
a.btn-share:visited,
a.btn-share:link {	
	margin-top:0 !important;
}
a.btn-share:hover {
	
}
a.btn-share img {
	width:56px !important;height:auto !important;
	transform:scale(1);
	transition:all 0.1s;
}
a.btn-share:hover img {
	transform:scale(1.05);
}

div#img-container {
	position:relative;
}
div#img-frames {
	position:absolute;width:250px;height:250px;top:0;left:0;z-index:2;
}
div#img-frames img.frame {
	width:250px;height:250px;
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;

	cursor:move;
	opacity:0;
	-webkit-transition: opacity 0.1s;
	-moz-transition: opacity 0.1s;
	-ms-transition: opacity 0.1s;
	-o-transition: opacity 0.1s;
	transition: opacity 0.1s;
	-webkit-transform:translate3d(0,0,0);
	-moz-transform:translate3d(0,0,0);
	-ms-transform:translate3d(0,0,0);
	-o-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
	-webkit-transition-timing-function: ease-out;
	-moz-transition-timing-function: ease-out;
	-ms-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}
div#img-frames img.frame.active {
	opacity:1;
	-webkit-transition: opacity 0.1s;
	-moz-transition: opacity 0.1s;
	-ms-transition: opacity 0.1s;
	-o-transition: opacity 0.1s;
	transition: opacity 0.1s;
	-webkit-transform:translate3d(0,0,0);
	-moz-transform:translate3d(0,0,0);
	-ms-transform:translate3d(0,0,0);
	-o-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
	-webkit-transition-timing-function: ease-out;
	-moz-transition-timing-function: ease-out;
	-ms-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	position:relative;
}
div#canvas {
	width:250px;height:250px;border:1px solid #eee;background:#f6f6f6;margin:0 auto;
	text-align:center;vertical-align:middle;position:relative;
}
img#img-canvas {
	width:100%;height:auto;margin:0 auto;display:inline-block;
}
img#img-canvas.portrait {
	width:auto;height:100%;margin:0 auto;
}
div#frame-nav {
	position:absolute;top:35%;width:100%;z-index:3;
}
div#frame-nav a:before {
	font-family:'vfont-material';font-size:90px;color:#bebebe;position:absolute;
	transition:all 0.1s;
}
div#frame-nav a.nav-left:before {
	content:'\e110';left:-70px;
}
div#frame-nav a.nav-right:before {
	content:'\e111';right:-70px;
}
div#frame-nav a:hover:before {
	color:#6dabff;
}
div#frame-nav a:active:before {
	padding-top:2px;
}

span.char-info {
	font-size:15px;padding:0 30px;text-align:left;display:block;
}

div#sliders {
	position:relative;padding:5px 0;margin:0 auto;display:block;text-align:center;
	padding-bottom:0;
	padding-top:40px;
}
div#sliders span.slider {
	display:block;padding:5px 0;padding-top:0;
}
div#sliders span.slider:before {
	font-family:'vfont-material';font-size:30px;margin-right:10px;color:#fff;
}
div#sliders span.slider.zoom:before {
	content:'\e311';
}
div#sliders span.slider.rotate:before {
	content:'\e1ab';
}
div#sliders span.slider input {
	width:80%;max-width:230px;
}

@media screen and (min-width: 480px) {
	body {
		background-size:120% auto;
	}
}
@media screen and (min-width: 540px) {
	body {
		background-size:100% auto;
	}
}
@media screen and (min-width: 720px) {
	span.btn-create-image {
		display:inline-block;margin:0 20px;margin-top:10px;
	}
	div.header {
		text-align:center;
	}

	div.subheader .inner {
		padding:0px 2.5%;
	}
	a.btn,
	a.btn:visited,
	a.btn:link {		
		padding:0 20px;height:35px;line-height:35px;font-size:20px;
	}
	a.btn.wide {
		padding:0 40px;
	}
}

@media screen and (min-width: 860px) {

}

.desktop-only {
	display:none;
}
.mobile-br {
	display:block;
}

@media screen and (min-width: 960px) {

	div.pane.step01 div.block {
		background-size:100% auto !important;height:470px !important;	
		background-position:auto !important;
	}
	.desktop-only {
		display:block;
	}
	.mobile-br {
		display:none;
	}
	div.pane.step02 {
		background-size:100% auto !important;
		background-position:auto !important;
	}

	[lang-id="share2"],
	[lang-id="share3"],
	span.step-actions {
		text-align:left !important;
	}

	a.btn-menu {
		display:none;
	}
	span.socials {
		display:inline;right:5px;
	}
	ul.menu {
		padding:0;padding-bottom:0;border-bottom:0px solid #ccc;box-shadow:none;
		transform:scale(1) translateY(0);opacity:1;visibility:visible;background:none;
		display:inline-block;text-align:center;width:auto;margin:0 auto;max-width:1440px;	
		position:absolute;bottom:5px;right:2px;line-height:1em;display:inline-block;
	}
	ul.menu li {
		float:left;
	}
	ul.menu li.socials {
		display:none;
	}
	ul.menu a {
		padding:0 12px;display:inline-block;margin:0;line-height:1em;font-size:0.9em;text-align:center;
	}
	ul.menu a.btn-menu-lang {
		font-size:0.6em;margin:0 1px;
	}
	ul.menu.submenu {
		left:0;position:relative;top:10px;background:none;padding:0 10px;
	}
	ul.menu.submenu:after {
		display:none;
	}
	ul.menu.submenu a {
		font-size:0.8em;display:inline-block;padding:10px 10px;
	}
	ul.menu.submenu a {
		
	}
	div.inner {

	}
	div.header {
		position:fixed;xheight:40px;xline-height:40px;padding:0;margin:0 auto;height:80px;
	}
	div.subheader {
		position:relative;top:2px;height:60px;line-height:60px;border-color:#213c67;
	}
	div.subheader .inner {
		padding:0px 2.5%;left:8px;
	}
	div.subheader .title {
		vertical-align:middle;position:relative;top:-8px;z-index:2;padding-right:1px;margin-right:5px;height:16px;font-size:0.7em;line-height:1.1em;
	}
	div.subheader .title:after {
		font-family:'vfont-material';content:'\e01b';font-size:41px;position:absolute;top:-8px;right:-27px;color:#213c69;z-index:1;line-height:1em;
	}
	div.header div.langs {
		position:absolute;right:5px;top:27px;font-size:14px;font-weight:normal;color:#fff;		
	}
	img.logo {
		position:absolute;left:5px;top:7px;
		width:auto;height:60px;max-height:auto;max-width:auto;xborder-radius:10px;background:#fff;padding:3px 5px;
	}
	div.panes {
		margin-top:80px;
	}
}


/**
* Alert box
*/
	.blockOverlay {
		z-index:20000;
	}
	.hilight {
		font-size:2em;color:#227f12;
	}
	.bgcolor-orange {
		background-color:#f7a530;
	}
	.bgcolor-blue {
		background-color:#1893b7;
	}
	.bgcolor-green {
		background-color:#a6cf4f;
	}
	.bgcolor-pink {
		background-color:#f1827e;
	}
	.color-un {
		color:#213c69
	}
	.color-white {
		color:#fff !important; 
	}
	.color-green {
		color:#227f12;
	}
	.color-red {
		color:red;
	}
	div.o2-alert-overlay {
		height:100%;width:100%;
		-webkit-background:rgba(0,0,0,0.6);
		-ms-background:rgba(0,0,0,0.6);
		-moz-background:rgba(0,0,0,0.6);
		-o-background:rgba(0,0,0,0.6);	
		background:rgba(0,0,0,0.6);
		position:fixed;top:0;left:0;z-index:100;
		opacity:0;
		visibility:hidden;
		-webkit-transition: all 0.15s;
		-ms-transition: all 0.15s;
		-moz-transition: all 0.15s;
		-o-transition: all 0.15s;
		transition: all 0.15s;
	}
	div.o2-alert-overlay.active {
		opacity:1;visibility:visible;
	}
	div.o2-alert-overlay div.o2-alert-box {
		position:relative;display:block;visibility:hidden;opacity:0;text-align:left;		
		background:#ffffff;border:1px solid #ccc;border-radius:5px;padding:0 0;
		margin:0 auto;width:90%;box-shadow:2px 2px 8px #000;z-index:101 !important;font-size:0.6em;
		color:#222;
		-webkit-transition: all 0.3s;
		-ms-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-o-transition: all 0.3s;
		transition: all 0.3s;
		-webkit-transform:translateY(-100%);
		-ms-transform: translateY(-100%);
		-moz-transform:translateY(-100%);
		-o-transform:translateY(-100%);
		transform:translateY(-100%);
	}
	div.o2-alert-overlay.active div.o2-alert-box {
		visibility:visible;opacity:1;
		-webkit-transform:translateY(80px);
		-ms-transform: translateY(80px);
		-moz-transform:translateY(80px);
		-o-transform:translateY(80px);
		transform:translateY(80px);
	}
	div.o2-alert-box div.inner {
		display:block;padding:20px 5%;position:relative;
	}
	div.o2-alert-box a.btn-close {
		display:inline-block;cursor:pointer;
	}
	div.o2-alert-box a.btn-close:before {
		position:absolute;top:5px;right:5px;content:'\e209';font-family:'vfont-material';font-size:26px;color:#ccc;
		padding:5px;
		color:#eee;top:-15px;right:-15px;
		background:#227f12;
		-webkit-border-radius:50%;
		-ms-border-radius:50%;
		-moz-border-radius:50%;
		-o-border-radius:50%;
		border-radius:50%;
	}
	div.o2-alert-box a.btn-close:hover:before {
		color:#999;cursor:pointer;
		color:#fff;
	}
	@media screen and (min-width: 960px) {
		div.o2-alert-overlay div.o2-alert-box {
			margin:0 auto;width:40%;font-size:0.7em;
		}
		div.o2-alert-box div.inner {
			display:block;padding:30px 5%;position:relative;
		}
	}



/**
*	Custom page
*/
	div.pane-show {
		z-index:-10;
		-webkit-transition:transform 0.35s, opacity 0.4s;
		-moz-transition:transform 0.35s, opacity 0.4s;
		-ms-transition:transform 0.35s, opacity 0.4s;
		-o-transition:transform 0.35s, opacity 0.4s;
		transition:transform 0.35s, opacity 0.4s;
		-webkit-transition-timing-function: ease-out;
		-moz-transition-timing-function: ease-out;
		-ms-transition-timing-function: ease-out;
		-o-transition-timing-function: ease-out;
		transition-timing-function: ease-out;
		opacity:0.3;
	}
	div.pane-show.active {
		z-index:1;
		-webkit-transition:transform 0.35s, opacity 0.2s;
		-moz-transition:transform 0.35s, opacity 0.2s;
		-ms-transition:transform 0.35s, opacity 0.2s;
		-o-transition:transform 0.35s, opacity 0.2s;
		transition:transform 0.35s, opacity 0.2s;
		-webkit-transition-timing-function: ease-out;
		-moz-transition-timing-function: ease-out;
		-ms-transition-timing-function: ease-out;
		-o-transition-timing-function: ease-out;
		transition-timing-function: ease-out;
		opacity:1;
	}
	div.pane-show.page-scale {
		opacity:0;
		-webkit-transform:scale(0.4) translate3d(0,0,0);
		-moz-transform:scale(0.4) translate3d(0,0,0);
		-ms-transform:scale(0.4) translate3d(0,0,0);
		-o-transform:scale(0.4) translate3d(0,0,0);
		transform:scale(0.4) translate3d(0,0,0);
		-webkit-transition:transform 0.25s, opacity 0.2s;
		-moz-transition:transform 0.25s, opacity 0.2s;
		-ms-transition:transform 0.25s, opacity 0.2s;
		-o-transition:transform 0.25s, opacity 0.2s;
		transition:transform 0.25s, opacity 0.2s;
	}
	div.pane-show.page-scale.active {	
		opacity:1;
		-webkit-transform:scale(1) translate3d(0,0,0);
		-moz-transform:scale(1) translate3d(0,0,0);
		-ms-transform:scale(1) translate3d(0,0,0);
		-o-transform:scale(1) translate3d(0,0,0);
		transform:scale(1) translate3d(0,0,0);
	}
	div.pane-show.page-fade {
		opacity:0;
		-webkit-transform:translate3d(0,0,0);
		-moz-transform:translate3d(0,0,0);
		-ms-transform:translate3d(0,0,0);
		-o-transform:translate3d(0,0,0);
		transform:translate3d(0,0,0);
		-webkit-transition:transform 0.35s, opacity 0.2s;
		-moz-transition:transform 0.35s, opacity 0.2s;
		-ms-transition:transform 0.35s, opacity 0.2s;
		-o-transition:transform 0.35s, opacity 0.2s;
		transition:transform 0.35s, opacity 0.2s;
	}
	div.pane-show.page-fade.active {	
		opacity:1;
		-webkit-transform:translate3d(0,0,0);
		-moz-transform:translate3d(0,0,0);
		-ms-transform:translate3d(0,0,0);
		-o-transform:translate3d(0,0,0);
		transform:translate3d(0,0,0);
	}
	div.pane-show.page-slide-top {
		-webkit-transform:translate3d(0,-100%,0);
		-moz-transform:translate3d(0,-100%,0);
		-ms-transform:translate3d(0,-100%,0);
		-o-transform:translate3d(0,-100%,0);
		transform:translate3d(0,-100%,0);
	}
	div.pane-show.page-slide-top.active {		
		-webkit-transform:translate3d(0,0,0);
		-moz-transform:translate3d(0,0,0);
		-ms-transform:translate3d(0,0,0);
		-o-transform:translate3d(0,0,0);
		transform:translate3d(0,0,0);
	}
	div.pane-show.page-slide-bottom {
		-webkit-transform:translate3d(0,100%,0);
		-moz-transform:translate3d(0,100%,0);
		-ms-transform:translate3d(0,100%,0);
		-o-transform:translate3d(0,100%,0);
		transform:translate3d(0,100%,0);
	}
	div.pane-show.page-slide-bottom.active {		
		-webkit-transform:translate3d(0,0,0);
		-moz-transform:translate3d(0,0,0);
		-ms-transform:translate3d(0,0,0);
		-o-transform:translate3d(0,0,0);
		transform:translate3d(0,0,0);
	}
	div.pane-show.page-slide-right {
		-webkit-transform:translate3d(100%,0,0);
		-moz-transform:translate3d(100%,0,0);
		-ms-transform:translate3d(100%,0,0);
		-o-transform:translate3d(100%,0,0);
		transform:translate3d(100%,0,0);
	}
	div.pane-show.page-slide-right.active {		
		-webkit-transform:translate3d(0,0,0);
		-moz-transform:translate3d(0,0,0);
		-ms-transform:translate3d(0,0,0);
		-o-transform:translate3d(0,0,0);
		transform:translate3d(0,0,0);
	}
	div.pane-show.page-slide-left {
		-webkit-transform:translate3d(-100%,0,0);
		-moz-transform:translate3d(-100%,0,0);
		-ms-transform:translate3d(-100%,0,0);
		-o-transform:translate3d(-100%,0,0);
		transform:translate3d(-100%,0,0);
	}
	div.pane-show.page-slide-left.active {		
		-webkit-transform:translate3d(0,0,0);
		-moz-transform:translate3d(0,0,0);
		-ms-transform:translate3d(0,0,0);
		-o-transform:translate3d(0,0,0);
		transform:translate3d(0,0,0);
	}




/* Special styling for WebKit/Blink 
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 1px solid #000000;
  border-radius: 3px;
  background: #8eabc0;  
  cursor: pointer;
  padding:12px 12px;
  margin-top: 0;  
}

input[type=range]::-moz-range-thumb {

  border: 1px solid #000000;
  border-radius: 3px;
  background: #8eabc0;
  cursor: pointer;
  padding:12px 12px;
}

input[type=range]::-ms-thumb { 
  border: 1px solid #000000;
  border-radius: 3px;
  background: #8eabc0;
  cursor: pointer;
  padding:12px 12px;
}
*/

input[type=range] {
  height: 25px;
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
  background:transparent;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000;
  background: #f696bf;
  border-radius: 3px;
  border: 0px solid #000000;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 1px solid #f696bf;
  height: 24px;
  width: 24px;
  border-radius: 25px;
  background: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #f696bf;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000;
  background: #f696bf;
  border-radius: 1px;
  border: 0px solid #000000;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 1px solid #f696bf;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #f696bf;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #f379ad;
  border: 0px solid #000000;
  border-radius: 2px;
  box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-fill-upper {
  background: #f696bf;
  border: 0px solid #000000;
  border-radius: 2px;
  box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-thumb {
  margin-top: 1px;
  box-shadow: 0px 0px 0px #000000;
  border: 1px solid #f696bf;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #f696bf;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #f379ad;
}
input[type=range]:focus::-ms-fill-upper {
  background: #fff;
}


.overlays {	
	z-index:-1;
	width:100%;
	position:fixed;bottom:0;
}
.overlays.active {
	z-index:101;
}
.overlays .overlay {	
	background:rgba(255,255,255,0.95);border-top:1px solid #eee;
	padding:20px;margin:0 auto;padding-top:0;
	text-align:center;
	display:block;	
	opacity:0;
	position:absolute;
	-webkit-transition-timing-function: ease-out;
	-moz-transition-timing-function: ease-out;
	-ms-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	transition:opacity 0s, transform 0.2s;
}
.overlays .overlay.slide-up {
	-webkit-transform:translate3d(0,100%,0);
	-moz-transform:translate3d(0,100%,0);
	-ms-transform:translate3d(0,100%,0);
	-o-transform:translate3d(0,100%,0);
	transform:translate3d(0,100%,0);
	-webkit-transition-timing-function: ease-out;
	-moz-transition-timing-function: ease-out;
	-ms-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}
.overlays .overlay.active {
	opacity:1;
	transition:opacity 0s, transform 0.2s;
	-webkit-transform:translate3d(0,0,0);
	-moz-transform:translate3d(0,0,0);
	-ms-transform:translate3d(0,0,0);
	-o-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
	-webkit-transition-timing-function: ease-out;
	-moz-transition-timing-function: ease-out;
	-ms-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	position:relative;
}
.overlay-form > span {
	display:block;padding:2px 5px;
}
.overlay-form input,
.overlay-form textarea {
	border:1px solid #eee;
	background:#f2f2f2;
	border-radius:3px;
	padding:2px;
	display:block;
	width:95%;
	margin:0 auto;
	font-size:22px;
	line-height:0.95em;
}
.overlay-form input[type="checkbox"] {
	display:inline;width:auto;margin-right:10px;
	text-align:left;
}


span.btn-create-image,
span.btn-create-image:hover {
	padding:0;margin:0;position:relative;width:auto;height:auto;
	background:none;border:0;

}