@charset "UTF-8";
#preload, #preloadedImages, .hide {
	position:absolute;
	left:-9999px;
	top:-9999px
}
.browser h4, .title, h3 {
	text-transform:uppercase
}
h3, header {
	color:#FFF
}
.browser .download a, .da-slide .da-link, .github, .main_menu ul li a, .title a:hover {
	text-decoration:none
}
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
	margin:0;
	padding:0;
	border:0;
	font:inherit;
	vertical-align:baseline
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
	display:block
}
ol, ul {
	list-style:none
}
blockquote, q {
	quotes:none
}
blockquote:after, blockquote:before, q:after, q:before {
	content:'';
	content:none
}
table {
	border-collapse:collapse;
	border-spacing:0
}
textarea {
	overflow:auto
}
#preload, .c_browsers, .container, .hide, .hidetext, .kwicks>*, .menu a {
	overflow:hidden
}
abbr, span.abbr {
	border-bottom:none
}
.clear {
	clear:both;
	height:0
}
h3, h4, h5 {
	position:relative;
	float:left
}
.hidetext {
	text-indent:100%;
	white-space:nowrap
}
body {
	font-size:16px;
	line-height:16px;
	font-family: 'Kanit', sans-serif;
	font-weight:500;
	font-style:normal;
	color:#222;
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing:antialiased;
	-ms-font-smoothing:antialiased;
	font-smoothing:antialiased;
	-moz-font-feature-settings:"calt=1, liga=1, clig=1, kern=1";
	-moz-font-feature-settings:"calt" 1, "liga" 1, "clig" 1, "kern" 1;
	-ms-font-feature-settings:"calt", "liga", "clig", "kern";
	-o-font-feature-settings:"calt", "liga", "clig", "kern";
	-webkit-font-feature-settings:"calt", "liga", "clig", "kern";
	font-feature-settings:"calt", "liga", "clig", "kern"
}
html:lang(zh-Hans) body, html:lang(zh-Hant) body {
font-family:"Microsoft Yahei UI", "Microsoft Yahei", "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif
}
html:lang(ar) body {
font-family:Arial, sans-serif
}
.main_menu ul li:nth-child(8) a span, html:lang(ar) .browser .center h2, html:lang(ar) .browser .statistic span, html:lang(ar) .browser h4, html:lang(ar) .title h1 {
font-family:"Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif
}
::-moz-selection {
background:#b3d4fc;
text-shadow:none
}
::selection {
background:#b3d4fc;
text-shadow:none
}
#preloadedImages {
	overflow:hidden
}
#preload {
	display:inline;
	width:0;
	height:0
}
h3, h4, h5 {
	display:block
}
h3 {
	font-size:12px;
	line-height:14px;
	font-weight:700
}
.title h1, h4, h5 {
	font-weight:800
}
h4, h5 {
	font-size:10px;
	line-height:10px
}
html:lang(zh-Hans) h3, html:lang(zh-Hant) h3 {
font-size:14px
}
html:lang(zh-Hans) h4, html:lang(zh-Hant) h4 {
font-size:12px
}
html:lang(ar) h3 {
font-size:17px
}
header {
	position:fixed;
	top:0;
	width:100%;
	height:70px;
	z-index:1500
}


.header h1 {
    font-family: 'Cagliostro', sans-serif;
    font-weight: normal;
    font-size: 30px;
    padding: 20px;
    color: #ddd;
}


.btnCloseNav span, .menu a {
	position:absolute;
	width:28px
}
.home header {
	background:rgba(255, 255, 255, .1)
}
.menu {
	cursor:pointer
}
.menu a {
	left:30px;
	top:25px;
	height:19px;
	z-index:200;
	text-indent:-5555px
}
.btnCloseNav .l1 {
	margin-top:-8px
}
.btnCloseNav .l3 {
	margin-top:8px
}
.btnCloseNav span {
	display:block;
	left:0;
	top:8px;
	height:3px;
	background:#FFF;
	border-radius:3px;
	-webkit-background-clip:padding-box;
	-moz-background-clip:padding-box;
	background-clip:padding-box;
-webkit-transition:margin .13s ease-out .23s, opacity .13s ease-out .23s, -webkit-transform .13s ease-out;
-moz-transition:margin .13s ease-out .23s, opacity .13s ease-out .23s, -moz-transform .13s ease-out;
-ms-transition:margin .13s ease-out .23s, opacity .13s ease-out .23s, -ms-transform .13s ease-out;
transition:margin .13s ease-out .23s, opacity .13s ease-out .23s, transform .13s ease-out
}
.browser, .c_browsers {
	position:relative;
	height:100%
}
.title a {
	color:#fff
}
.title h1 {
	margin:20px auto 0;
	text-align:center;
	font-size:15px
}
.title p {
	font-size:12px;
	margin:0;
	text-align:center;
	font-weight:700
}
.title h3 {
	margin:29px 0 0 110px;
	font-weight:800
}
html:lang(zh-Hans) .title p, html:lang(zh-Hant) .title p {
font-size:14px
}
html:lang(ar) .title p {
font-size:16px;
padding-top:5px
}
.browserVersion {
	display:none
}
.newBrowser {
	display:block
}
.c_browsers {
	width:100%;
	opacity:1;
-webkit-transition:opacity .17s ease-in-out;
-moz-transition:opacity .17s ease-in-out;
-o-transition:opacity .17s ease-in-out;
transition:opacity .17s ease-in-out
}
.browser {
	float:left;
	width:20%;
	color:#FFF;
-webkit-transition:background .17s ease-in-out;
-moz-transition:background .17s ease-in-out;
-o-transition:background .17s ease-in-out;
transition:background .17s ease-in-out
}
.browser .download, .browser .statistic, .main_menu ul li:nth-child(8) #hoefler-logo #text {
-webkit-transition:opacity .3s ease-in-out;
-moz-transition:opacity .3s ease-in-out;
-o-transition:opacity .3s ease-in-out
}
.browser h2 {
	position:absolute;
	left:50%;
	top:0;
	width:200px;
	height:auto;
	margin-left:-100px;
	text-align:center;
	font-size:12px;
	font-weight:700
}
.browser h2 span, .browser h2.edge span {
	position:relative;
	width:100px;
	height:100px;
	margin:0 auto 35px;
	display:block
}
.browser h2 span {
	background:url(../imgs/browsers-bg.png) no-repeat;
	background-size:auto 200px
}
.browser h2.edge span {
	background:url(../imgs/browsers-bg-edge.png) no-repeat;
	background-size:auto 200px
}
.browser h4, .browser h5 {
	margin-bottom:10px;
	width:100%
}
.browser h5 {
	opacity:.5;
	text-transform:none
}
.browser .download, .browser .statistic {
	display:block;
	opacity:0;
transition:opacity .3s ease-in-out
}
.allowHover .browser:hover .download, .allowHover .browser:hover .statistic {
	opacity:1
}
.allowHover .browser .download a {
	left:-5555px
}
.allowHover .browser:hover .download a {
	left:0
}
.browser .center {
	display:block;
	position:absolute;
	top:35%;
	left:0;
	width:100%;
	height:40%
}
.browser .download, .browser .statistic {
	position:absolute;
	width:260px;
	left:50%;
	text-align:center
}
.browser .statistic {
	top:15%;
	font-size:12px;
	text-transform:uppercase;
	margin-left:-130px
}
html:lang(ar) .browser .statistic {
font-size:15px
}
.browser .statistic span {
	display:block;
	font-size:58px;
	margin:0;
	line-height:58px;
	font-weight:700
}
.browser .download {
	bottom:0;
	margin-left:-130px
}
.browser .download a {
	display:block;
	position:relative;
	margin:0 auto 15px;
	width:210px;
	padding:20px 0 16px;
	font-weight:800;
	font-size:15px;
	line-height:15px;
	text-align:center;
	color:#FFF;
	border-radius:30px;
	border:3px solid #FFF;
-webkit-transition:background-color .3s;
-moz-transition:background-color .3s;
-o-transition:background-color .3s;
transition:background-color .3s
}
.browser .download a.edge-btn, .browser .download a.macos-btn {
	width:250px
}
html:lang(ar) .browser .download a {
font-size:20px
}
.browser .download a:hover {
	background-color:#FFF
}
#chrome .download a:hover {
	color:#f2b635
}
#internetExplorer .download a:hover {
	color:#00caff
}
#firefox .download a:hover {
	color:#f19a2a
}
#safari .download a:hover {
	color:#00a0e6
}
#opera .download a:hover {
	color:#f25648
}
html:lang(ar) .browser h4 {
font-size:15px
}
.available {
	position:absolute;
	left:50%;
	top:90%;
	width:200px;
	text-align:center;
	margin-left:-100px
}
.available ul {
	width:100%;
	height:25px;
	text-align:center;
	margin-top:15px
}
.available ul li {
	display:inline-block;
	width:25px;
	height:25px;
	margin:0 5px;
	text-indent:-5555px;
	text-align:left;
	background:url(../imgs/operatingsystems-bg.png) no-repeat;
	background-size:auto 25px
}
.keep_calm p.center, .main_menu ul li a {
	text-transform:uppercase;
	text-align:center
}
.available ul li.windows {
	background-position:0 0
}
.available ul li.mac {
	background-position:-25px 0
}
.available ul li.linux {
	background-position:-50px 0
}
.available ul li span {
	display:none
}
#chrome {
	background-color:#f2b635
}
#chrome h2 span {
	background-position:0 0
}
.allowHover #chrome:hover h2 span {
	background-position:0 -100px
}
#firefox {
	background-color:#f19a2a
}
#firefox h2 span {
	background-position:-100px 0
}
.allowHover #firefox:hover h2 span {
	background-position:-100px -100px
}
#internetExplorer {
	background-color:#00caff
}
#internetExplorer h2 span {
	background-position:-200px 0
}
.allowHover #internetExplorer:hover h2 span {
	background-position:-200px -100px
}
#safari {
	background-color:#00a0e6
}
#safari h2 span {
	background-position:-300px 0
}
.allowHover #safari:hover h2 span {
	background-position:-300px -100px
}
#opera {
	background-color:#f25648
}
#opera h2 span {
	background-position:-400px 0
}
.allowHover #opera:hover h2 span {
	background-position:-400px -100px
}
.c_browsers>div:first-child {
	z-index:50
}
.c_browsers>div:first-child+div {
	z-index:40
}
.c_browsers>div:first-child+div+div {
	z-index:30
}
.c_browsers>div:first-child+div+div+div {
	z-index:20
}
.c_browsers>div:first-child+div+div+div+div {
	z-index:10
}
.c_browsers.hideBrowsers {
	opacity:0
}
.c_browsers .browser.firstAnim {
	width:20%!important;
	position:absolute;
	opacity:1;
	-webkit-transition:width 1.1s cubic-bezier(.57, .01, .13, 1.03);
	-moz-transition:width 1.1s cubic-bezier(.57, .01, .13, 1.03);
	-o-transition:width 1.1s cubic-bezier(.57, .01, .13, 1.03);
	transition:width 1.1s cubic-bezier(.57, .01, .13, 1.03)
}
.c_browsers>div:first-child.firstAnim {
	left:0
}
.c_browsers>div:first-child+div.firstAnim {
	left:20%
}
.c_browsers>div:first-child+div+div.firstAnim {
	left:40%
}
.c_browsers>div:first-child+div+div+div.firstAnim {
	left:60%
}
.c_browsers>div:first-child+div+div+div+div.firstAnim {
	left:80%
}
.allowHover .browser:before {
	display:block;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	content:"";
	opacity:0;
	background:url(../imgs/shadow.png) center 35% no-repeat;
-webkit-transition:opacity .3s linear;
-moz-transition:opacity .3s linear;
-o-transition:opacity .3s linear;
transition:opacity .3s linear
}
.main_menu:after, .pusher:after {
	content:''
}
.allowHover .browser:hover:before {
	opacity:1
}
.kwicks {
	display:block;
	list-style:none;
	position:relative;
	margin:0;
	padding:0
}
.kwicks>* {
	display:block;
	padding:0;
	margin:0
}
.kwicks.kwicks-processed>* {
	margin:0;
	position:absolute
}
.kwicks-horizontal>* {
	float:left
}
.kwicks-horizontal>:first-child {
	margin-left:0
}
.kwicks-vertical>:first-child {
	margin-top:0
}
*, ::before, :after {
-moz-box-sizing:border-box;
box-sizing:border-box
}
#content, .container, .pusher, body, html {
	height:100%
}
#content {
	overflow-y:hidden
}
#content.home {
	background:#f2b635
}
#content, .inner {
	position:relative;
	height:100%
}
.container {
	position:relative
}
.pusher {
	-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:-webkit-transform .3s;
-moz-transition:-moz-transform .3s;
-ms-transition:-ms-transform .3s;
transition:transform .3s
}
.pusher:after {
	position:absolute;
	top:0;
	left:0;
	z-index:1050;
	visibility:hidden;
	width:100%;
	height:100%;
	background:#000;
	opacity:0;
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
-o-transition:all .5s ease;
transition:all .5s ease
}
.pusher {
	position:relative;
	left:0;
	height:100%;
	overflow:visible;
	-webkit-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
	backface-visibility:hidden;
	-webkit-perspective:1200px;
	-moz-perspective:1200px;
	perspective:1200px
}
.loadContent, .nav_wrapper {
	position:absolute;
	height:100%;
	top:0
}
.comp_body, .composer, .da-slide .da-txt p, .da-slider, .keep_calm, .main_menu {
	overflow:hidden
}
.loadContent {
	display:block;
	left:0;
	width:100%;
	-webkit-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
	backface-visibility:hidden;
	-webkit-perspective:1200px;
	-moz-perspective:1200px;
	perspective:1200px
}
.current {
	z-index:100
}
.next {
	z-index:99
}
.page-hide {
	left:100%
}
.page-show {
	left:0
}
.menu_open .pusher:after {
	opacity:.2;
	visibility:visible
}
.nav_wrapper {
	left:0;
	width:300px;
	background:#F2B635
}
.nav_wrapper span {
	position:fixed;
	float:left;
	width:100%;
	top:0;
	height:75px;
	background:rgba(255, 255, 255, .1)
}
.main_menu, .main_menu:after {
	height:100%;
	position:absolute;
	top:0
}
.main_menu .close:hover {
	background-image:url(../imgs/close.png);
	-moz-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	-o-transform:rotate(90deg);
	transform:rotate(90deg);
	-webkit-transform:rotate(90deg)
}
.main_menu {
	left:0;
	z-index:100;
	visibility:hidden;
	width:300px;
	background:#F2B635;
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
-o-transition:all .5s ease;
transition:all .5s ease
}
.main_menu:after {
	right:0;
	width:100%;
	background:rgba(0, 0, 0, .2);
	opacity:1;
-webkit-transition:opacity .5s;
-moz-transition:opacity .5s;
-o-transition:opacity .5s;
transition:opacity .5s
}
.menu_open .main_menu:after {
	width:0;
	height:0;
	opacity:0;
-webkit-transition:opacity .5s, width .1s .5s, height .1s .5s;
-moz-transition:opacity .5s, width .1s .5s, height .1s .5s;
-o-transition:opacity .5s, width .1s .5s, height .1s .5s;
transition:opacity .5s, width .1s .5s, height .1s .5s
}
.main_menu ul {
	margin:0;
	padding:70px 0 0;
	list-style:none;
	top:0;
	position:absolute;
	height:100%;
	width:100%
}
.main_menu ul li {
	display:table;
	position:relative;
	width:100%;
	padding:0;
	height:16.2%;
	background-color:#6F6F6F;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.menu_open .main_menu ul li {
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.main_menu ul li:nth-child(2) {
background:#6F6F6F
}
.main_menu ul li:nth-child(3) {
background:#646464
}
.main_menu ul li:nth-child(4) {
background:#5E5E5E
}
.main_menu ul li:nth-child(5) {
background:#595959
}
.main_menu ul li:nth-child(6) {
background:#545454
}
.main_menu ul li:nth-child(7) {
background:#4f4f4f;
height:8%
}
.main_menu ul li:nth-child(8) {
background:#4b4a4a;
height:12%
}
.main_menu ul li:nth-child(8) a span {
font-size:15px
}
.main_menu ul li:nth-child(8) img {
width:170px;
margin-top:15px
}
#hoefler-logo {
	width:180px
}
.main_menu ul li:nth-child(8) #hoefler-logo #text {
transition:opacity .3s ease-in-out;
opacity:.3
}
.main_menu ul li:nth-child(8) #hoefler-logo #logo {
-webkit-transition:opacity .3s ease-in-out;
-moz-transition:opacity .3s ease-in-out;
-o-transition:opacity .3s ease-in-out;
transition:opacity .3s ease-in-out;
opacity:.5
}
.main_menu ul li:nth-child(8):hover #hoefler-logo #logo, .main_menu ul li:nth-child(8):hover #hoefler-logo #text {
opacity:1
}
.main_menu ul li a {
	outline:0;
	color:#FFF;
	text-shadow:0 0 1px rgba(255, 255, 255, .1);
	letter-spacing:1px;
	font-weight:700;
	font-size:13px;
	display:table-cell;
	vertical-align:middle;
-webkit-transition:background .3s, box-shadow .3s;
-moz-transition:background .3s, box-shadow .3s;
-o-transition:background .3s, box-shadow .3s;
transition:background .3s, box-shadow .3s
}
.keep_calm, .keep_calm p.center {
	font-weight:600;
	letter-spacing:-3px
}
html:lang(zh-Hans) .main_menu ul li a, html:lang(zh-Hant) .main_menu ul li a {
font-size:15px
}
html:lang(ar) .main_menu ul li a {
font-size:16px
}
html:lang(ar) .main_menu ul li.last a {
font-size:13px
}
.main_menu ul li a span em {
	font-size:10px
}
.main_menu ul li a.active {
	pointer-events:none;
	position:relative
}
.menu_open .main_menu ul li a {
	opacity:1;
-webkit-transition:all .2s;
-moz-transition:all .2s;
transition:all .2s
}
.main_menu ul li a:hover {
	background:#DC4A3E;
	background:rgba(0, 0, 0, .2);
	color:#fff;
	-webkit-box-shadow:inset 0 -1px transparent;
	-moz-box-shadow:inset 0 -1px transparent;
	box-shadow:inset 0 -1px transparent
}
.main_menu ul li.about_link a:hover, .main_menu ul li.hone_link a:hover, .main_menu ul li.how_link a:hover {
	background:0 0
}
.main_menu ul li a[rel=external] {
	padding-left:11px
}
.main_menu ul li a[rel=external] span {
	padding-right:11px;
	background:0 0
}
.main_menu ul li a[rel=external]:hover span {
	background:url(../imgs/icon-link-external.png) top right no-repeat;
	background-size:10px 9px
}
.main_menu .lang-picker {
	height:70px;
	background:#4F4F4F;
	position:absolute;
	top:0;
	left:0
}
.main_menu .lang-picker>a:hover {
	background:#4A4A4A
}
.main_menu .lang-open>a, .main_menu .lang-open>a:hover {
	background:0 0
}
.main_menu .lang-picker a .lang-arrow {
	display:inline-block;
	position:relative;
	top:-2px;
	width:10px;
	height:6px;
	margin:0 -20px 0 10px;
	background:url(../imgs/icon-lang-arrow.png) center no-repeat;
	background-size:100%
}
.main_menu .lang-picker ul {
	top:-1670px;
	left:0;
	width:335px;
	overflow-x:hidden;
	z-index:-1;
-webkit-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
-o-transition:all .3s ease-in-out;
-ms-transition:all .3s ease-in-out;
transition:all .3s ease-in-out
}
.main_menu .lang-picker ul li {
	background-color:#EE4F44;
	height:70px;
	width:300px
}
.main_menu .lang-picker ul li:last-child {
	box-shadow:0 10px 12px rgba(0, 0, 0, .15)
}
.main_menu .lang-picker.lang-openColor>a {
	position:relative;
	background-color:#EE4F44;
	z-index:120
}
.main_menu .lang-picker li a, .main_menu .lang-picker>a {
	width:100%
}
.main_menu .lang-picker:hover {
	display:table
}
.main_menu .lang-picker li a:hover {
	background:#DC4A3E
}
.menu_open .lang-picker.lang-openColor {
	background-color:#EE4F44
}
.menu_open .lang-picker.scrolling:after {
	content:' ';
	width:100%;
	height:8px;
	position:absolute;
	top:68px;
	left:0;
	background:url(../imgs/lang_shadow.png) center no-repeat rgba(238, 79, 68, .4);
	background-size:100%;
	box-shadow:0 2px 8px rgba(238, 79, 68, .35);
	opacity:1;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
transition:all .2s ease-in-out
}
.menu_open .scrolling.fadeOut:after {
	opacity:0
}
.menu_open .lang-picker.lang-open ul {
	left:0;
	opacity:1;
	padding-top:0;
	top:70px;
-webkit-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
-o-transition:all .3s ease-in-out;
-ms-transition:all .3s ease-in-out;
transition:all .3s ease-in-out
}
.keep_calm, .main_menu .menu_overlay {
	left:0;
	top:0;
	width:100%;
	height:100%;
	position:absolute
}
.main_menu .menu_overlay {
	opacity:0;
	background:rgba(0, 0, 0, .2);
	pointer-events:none;
-webkit-transition:opacity .2s linear;
-moz-transition:opacity .2s linear;
-o-transition:opacity .2s linear;
-ms-transition:opacity .2s linear;
transition:opacity .2s linear
}
.menu_open .main_menu .menu_overlay.active {
	opacity:1
}
.effect.container {
	-webkit-perspective:1500px;
	-moz-perspective:1500px;
	-ms-perspective:1500px;
	-o-perspective:1500px;
	perspective:1500px;
	-webkit-perspective-origin:0 50%;
	-moz-perspective-origin:0 50%;
	-ms-perspective-origin:0 50%;
	-o-perspective-origin:0 50%;
	perspective-origin:0 50%
}
.effect.menu_open .pusher {
	-webkit-transform-style:preserve-3d;
	-moz-transform-style:preserve-3d;
	-ms-transform-style:preserve-3d;
	-o-transform-style:preserve-3d;
	transform-style:preserve-3d;
	-webkit-transform:translate3d(300px, 0, 0);
	-moz-transform:translate3d(300px, 0, 0);
	-ms-transform:translate3d(300px, 0, 0);
	-o-transform:translate3d(300px, 0, 0);
	transform:translate3d(300px, 0, 0);
-webkit-transition:-webkit-transform .5s;
-moz-transition:-moz-transform .5s;
-ms-transition:-ms-transform .5s;
transition:transform .5s;
	cursor:url(../imgs/close_.png), auto;
	cursor:-webkit-image-set(url(../imgs/close_.png) 1x, url(../imgs/close__2x.png) 2x), auto
}
.effect.main_menu {
	background-color:transparent
}
.effect.menu_open .effect.main_menu {
	cursor:default;
	z-index:5555
}
.no-csstransforms3d .pusher, .no-js .pusher {
	padding-left:300px
}
.effect.main_menu ul li {
	-webkit-transform:translate(-100%, 0);
	-moz-transform:translate(-100%, 0);
	-ms-transform:translate(-100%, 0);
	-o-transform:translate(-100%, 0);
	transform:translate(-100%, 0)
}
.effect.menu_open .effect.main_menu ul li:first-child {
	visibility:visible;
	z-index:5;
	-webkit-transition-timing-function:cubic-bezier(.57, .01, 0, 1);
	transition-timing-function:cubic-bezier(.57, .01, 0, 1);
	-webkit-transition-property:-webkit-transform;
	transition-property:transform;
	-webkit-transform:translate(0, 0);
	transform:translate(0, 0)
}
.effect.menu_open .effect.main_menu ul li+li, .effect.menu_open .effect.main_menu ul li+li+li {
	visibility:visible;
	-webkit-transition-timing-function:cubic-bezier(.57, .01, 0, 1);
	-webkit-transition-property:-webkit-transform;
	-webkit-transform:translate(0, 0)
}
.effect.menu_open .effect.main_menu ul li+li {
	z-index:4;
-webkit-transition-delay:.1s;
transition-delay:.1s;
	transition-timing-function:cubic-bezier(.57, .01, 0, 1);
	transition-property:transform;
	transform:translate(0, 0)
}
.effect.menu_open .effect.main_menu ul li+li+li {
	z-index:3;
-webkit-transition-delay:.15s;
transition-delay:.15s;
	transition-timing-function:cubic-bezier(.57, .01, 0, 1);
	transition-property:transform;
	transform:translate(0, 0)
}
.effect.menu_open .effect.main_menu ul li+li+li+li, .effect.menu_open .effect.main_menu ul li+li+li+li+li {
	-webkit-transition-timing-function:cubic-bezier(.57, .01, 0, 1);
	-webkit-transition-property:-webkit-transform;
	-webkit-transform:translate(0, 0);
	visibility:visible
}
.effect.menu_open .effect.main_menu ul li+li+li+li {
	z-index:2;
-webkit-transition-delay:.2s;
transition-delay:.2s;
	transition-timing-function:cubic-bezier(.57, .01, 0, 1);
	transition-property:transform;
	transform:translate(0, 0)
}
.effect.menu_open .effect.main_menu ul li+li+li+li+li {
	z-index:1;
-webkit-transition-delay:.25s;
transition-delay:.25s;
	transition-timing-function:cubic-bezier(.57, .01, 0, 1);
	transition-property:transform;
	transform:translate(0, 0)
}
.effect.menu_open .effect.main_menu ul li+li+li+li+li+li {
	visibility:visible;
	z-index:1;
-webkit-transition-delay:.3s;
transition-delay:.3s;
	-webkit-transition-timing-function:cubic-bezier(.57, .01, 0, 1);
	transition-timing-function:cubic-bezier(.57, .01, 0, 1);
	-webkit-transition-property:-webkit-transform;
	transition-property:transform;
	-webkit-transform:translate(0, 0);
	transform:translate(0, 0)
}
.keep_calm {
	display:none;
	background:rgba(0, 0, 0, .8);
	z-index:9999
}
.keep_calm p.center {
	position:absolute;
	left:50%;
	top:50%;
	width:580px;
	height:600px;
	margin-left:-290px;
	margin-top:-300px;
	color:#FFF;
	font-size:80px;
	line-height:84px
}
.keep_calm p.center .xs {
	display:block;
	font-size:32px;
	line-height:120px
}
.keep_calm .close {
	position:absolute;
	top:25px;
	right:25px;
	text-indent:-5555px;
	width:22px;
	height:21px;
	background:url(../imgs/close_2x.png) no-repeat;
	background-size:22px 21px
}
@media screen and (max-width:700px), screen and (max-height:670px) {
.keep_calm p.center {
width:280px;
height:340px;
margin-left:-140px;
margin-top:-140px;
font-size:43px;
line-height:47px
}
.keep_calm p.center .xs {
font-size:16px;
line-height:60px;
letter-spacing:-1px
}
}
@media screen and (max-height:670px) {
.browser .center {
height:50%
}
}
.hidden {
	display:none!important;
	visibility:hidden
}
#nprogress {
	pointer-events:none
}
#nprogress .bar {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:3px;
	z-index:4000;
	background-color:transparent
}
#preloadedImages {
	display:inline;
	width:0;
	height:0;
	background-image:url(../imgs/btns-bg.png)
}
#container {
	display:block
}
#content, .container, .pusher, body, html {
	overflow-x:hidden
}
.social {
	width:auto;
	position:relative;
	float:right;
	margin:0 40px 0 0
}
.social .socialcount {
	display:block;
	position:relative;
	float:left;
	margin:25px 0 0 20px
}
.social .socialcount li {
	display:block;
	float:left
}
.social .socialcount li.twitter {
	margin-right:12px
}
.social .fb {
	float:left;
	width:19px;
	height:19px;
	background:url(../imgs/social-bg.png) -24px 0 no-repeat;
	background-size:auto 19px
}
.social .twt {
	float:left;
	width:22px;
	height:19px;
	background:url(../imgs/social-bg.png) no-repeat;
	background-size:auto 19px
}
.da-slide, .da-slider {
	width:100%;
	height:100%
}
.project .about_link, .project .nav_wrapper {
	background-color:#00CAFF
}
.how .how_link, .how .nav_wrapper {
	background-color:#6b29ba
}
.da-slider {
	margin:0 auto;
	background-color:#00CAFF;
-webkit-transition:background-color .7s ease-out;
-moz-transition:background-color .7s ease-out;
-o-transition:background-color .7s ease-out;
-ms-transition:background-color .7s ease-out;
transition:background-color .7s ease-out
}
.da-arrows span, .github {
-webkit-transition:all .2s ease;
-moz-transition:all .2s ease;
-o-transition:all .2s ease;
-ms-transition:all .2s ease;
	cursor:pointer
}
.da-slide {
	position:absolute;
	top:0;
	left:0;
	text-align:left
}
.github {
	color:#FFF;
	border-bottom:2px dashed #FFF;
	padding:0;
	border-radius:0;
transition:all .2s ease
}
.github:hover {
	color:#FFF;
	background:#ECBF08
}
.da-slide-current {
	z-index:1000
}
.da-slider-fb .da-slide {
	left:100%
}
.da-slider-fb .da-slide.da-slide-current {
	left:0
}
.da-link {
-webkit-transition:background .2s ease;
-moz-transition:background .2s ease;
-o-transition:background .2s ease;
-ms-transition:background .2s ease;
transition:background .2s ease
}
.da-link:hover {
	background-color:#fff
}
.cause .da-link:hover {
	color:#00CAFF
}
.da-slide .da-txt {
	position:relative;
	width:700px;
	height:580px;
	top:50%;
	margin-top:-250px
}
.da-slide .da-txt h2 {
	font-family:'Gotham SSm A', 'Gotham SSm B', Helvetica, Arial, sans-serif;
	font-weight:800;
	font-style:normal;
	letter-spacing:-3px
}
html:lang(ar) .da-slide .da-txt h2 {
width:500px;
font-family:Arial, sans-serif;
text-align:right;
white-space:normal
}
.da-slide .da-link, .da-slide .da-txt h2 {
	white-space:nowrap;
	color:#FFF;
	float:left
}
html:lang(ar) .da-slide .da-txt h2 img {
height:58px
}
.da-slide .da-txt .da-link, .da-slide .da-txt h2, .da-slide .da-txt p.desc {
	position:relative;
	opacity:0;
	left:110%
}
.da-slide .da-txt .da-link, .da-slide .da-txt p.desc {
	font-family:'Gotham SSm A', 'Gotham SSm B', Helvetica, Arial, sans-serif;
	font-weight:800;
	font-style:normal
}
html:lang(ar) .da-slide .da-txt p.desc {
font-family:Arial, sans-serif;
text-align:right
}
html:lang(ar) .da-slide .da-txt .da-link {
margin:0 0 0 250px
}
.da-slide .da-txt p {
	opacity:1;
	position:absolute;
	left:110%
}
.da-slide .da-img {
	position:absolute;
	opacity:0;
	text-align:center;
	top:50%;
	margin-top:-250px;
	width:45%
}
.project .da-slide .da-img {
	margin-top:-320px
}
.project .da-slide.cause .da-img {
	width:350px;
	margin-top:-390px
}
.project .da-slide.cause .da-img p {
	position:relative;
	width:100%;
	text-align:center;
	left:0;
	top:0;
	margin:20px 0 0 30px
}
.project .da-slide.steps .da-img {
	width:500px
}
.da-slider-fb .da-slide .da-link, .da-slider-fb .da-slide h2, .da-slider-fb .da-slide p {
	left:10%;
	opacity:1
}
.da-slider-fb .da-slide .da-img {
	left:60%;
	opacity:1
}
.da-slide .da-txt h2 {
	width:auto;
	z-index:10;
	padding-left:110px;
	font-size:80px;
	margin:0;
	line-height:1
}
.da-slide .da-txt h2 span {
	display:inline-block;
	position:relative;
	margin-top:-30px
}
.da-slide .da-txt p {
	float:left;
	width:500px;
	color:#FFF;
	margin:55px 0 45px;
	font-weight:700;
	font-size:24px;
	line-height:32px;
	text-align:left;
	padding-left:110px
}
.da-slide .da-link {
	display:block;
	position:relative;
	padding:13px 66px 13px 30px;
	border-radius:30px;
	border:3px solid #FFF;
	margin-left:110px;
	font-size:18px;
	line-height:18px;
	text-align:center
}
.da-slide .da-link span {
	display:block;
	position:absolute;
	right:18px;
	top:0;
	width:30px;
	height:100%;
	background:url(../imgs/btns-bg.png) no-repeat;
	background-size:auto 22px
}
.cause .da-link.da-link-next, .steps .da-link.da-link-next, .works .da-link.da-link-next {
	padding-right:50px
}
.cause .da-link.da-link-next span, .steps .da-link.da-link-next span, .works .da-link.da-link-next span {
	background-position:-300px center;
	right:10px
}
.cause .da-link.da-link-next:hover {
	color:#00c8ff
}
.cause .da-link.da-link-next:hover span {
	background-position:-330px center
}
.works .da-link.da-link-next:hover {
	color:#E73D51
}
.works .da-link.da-link-next:hover span {
	background-position:-360px center
}
.steps .da-link.da-link-next:hover {
	color:#ECBF08
}
.steps .da-link.da-link-next:hover span {
	background-position:-390px center
}
.download .da-link:hover {
	background-color:#FFF;
	color:#6B29BA
}
.download .da-link span {
	background-position:0 center;
	right:15px
}



.download .da-link:hover span {
	background-position:-30px center
}
.da-link.clip_copy {
	display:block;
	float:left;
	clear:left
}
.da-link.clip_copy span {
	background-position:-180px center
}
.insertInProject .da-link:hover, .insertInProject .zeroclipboard-copied, .insertInProject .zeroclipboard-is-hover {
	background-color:#FFF;
	color:#23DC71
}
.insertInProject .da-link:hover span, .insertInProject .zeroclipboard-is-hover span {
	background-position:-210px center
}
.insertInProject .zeroclipboard-copied span {
	background-position:-90px center
}
.includeHTML .da-link:hover, .includeHTML .zeroclipboard-copied, .includeHTML .zeroclipboard-is-hover {
	background-color:#FFF;
	color:#edc100
}
.includeHTML .da-link:hover span, .includeHTML .zeroclipboard-is-hover span {
	background-position:-240px center
}
.includeHTML .zeroclipboard-copied span {
	background-position:-120px center
}
.callPlugin .da-link:hover, .callPlugin .zeroclipboard-copied, .callPlugin .zeroclipboard-is-hover {
	background-color:#FFF;
	color:#eb404e
}
.callPlugin .da-link:hover span, .callPlugin .zeroclipboard-is-hover span {
	background-position:-270px center
}
.callPlugin .zeroclipboard-copied span {
	background-position:-150px center
}
.da-slide .da-link:focus {
	outline:0
}
.da-dots {
	position:absolute;
	width:100%;
	left:0;
	bottom:43px;
	text-align:center;
	z-index:1001;
	-moz-user-select:none;
	-webkit-user-select:none
}
.da-dots span {
	display:inline-block;
	position:relative;
	width:20px;
	height:20px;
	top:0;
	border-radius:50%;
	border:10px solid #FFF;
	margin:10px;
	cursor:pointer
}
.how .da-dots span.da-dots-current, .project .da-dots span.da-dots-current {
	border:3px solid #FFF;
-webkit-transition:all .25s ease;
-moz-transition:all .25s ease;
-o-transition:all .25s ease;
-ms-transition:all .25s ease;
transition:all .25s ease
}
.da-dots span:hover {
	-webkit-transform:scale(1.2);
	-moz-transform:scale(1.2);
	-ms-transform:scale(1.2);
	-o-transform:scale(1.2);
	transform:scale(1.2);
-webkit-transition:border .25s ease;
-moz-transition:border .25s ease;
-o-transition:border .25s ease;
-ms-transition:border .25s ease;
transition:border .25s ease
}
.da-dots span.da-dots-current:hover {
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-ms-transform:scale(1);
	-o-transform:scale(1);
	transform:scale(1)
}
.da-arrows {
	-moz-user-select:none;
	-webkit-user-select:none
}
.da-arrows span {
	position:absolute;
	bottom:45px;
	height:40px;
	width:35px;
	z-index:1002;
transition:all .2s ease
}
.da-slider:hover .da-arrows span {
	opacity:1
}
.da-arrows span:after {
	content:'';
	position:absolute;
	height:30px;
	width:18px;
	top:5px;
	left:5px;
-webkit-transition:all .2s ease;
-moz-transition:all .2s ease;
-o-transition:all .2s ease;
-ms-transition:all .2s ease;
transition:all .2s ease
}
.da-arrows span.da-arrows-next:after {
	background:url(../imgs/arrow_right.png) top left no-repeat;
	background-size:100%
}
.da-arrows span.da-arrows-prev:after {
	background:url(../imgs/arrow_left.png) top left no-repeat;
	background-size:100%;
	left:auto;
	right:0
}
.da-arrows span.da-arrows-next:hover:after {
	left:10px
}
.da-arrows span.da-arrows-prev:hover:after {
	right:5px
}
.da-arrows span.da-arrows-prev {
	left:50%;
	margin-left:-140px
}
.da-arrows span.da-arrows-next {
	right:50%;
	margin-right:-140px
}
.cause .da-img p:before, .works .da-img p:before {
	content:'';
	height:34px;
	display:block;
	margin:0 auto 15px;
	background:#FFF
}
.da-slide-current .da-link, .da-slide-current h2, .da-slide-current p {
	left:0;
	opacity:1
}
.da-slide-current .da-img {
	opacity:1
}
.da-img p {
	display:block;
	position:absolute;
	font:600 italic 17px/17px 'Chronicle Display A', 'Chronicle Display B', Helvetica, arial, sans-serif;
	color:#fff
}
.cause .da-img p, .download .da-img p {
	top:570px
}
.cause .da-img p {
	left:140px
}
.cause .da-img p:before {
	width:2px
}
.works .da-img p {
	top:570px;
	width:807px;
	left:0;
	text-align:center
}
.works .da-img p:before {
	width:2px
}
.steps .da-img p {
	top:170px;
	left:auto;
	right:0;
	text-align:left;
	width:170px
}
.steps .da-img p:before, html:lang(ar) .steps .da-img p:after {
content:'';
width:34px;
height:2px;
display:block
}
.steps .da-img p:before {
	background:#FFF;
	float:left;
	margin:13px 20px 20px 0
}
html:lang(ar) .steps .da-img p {
text-align:right;
right:50px
}
html:lang(ar) .steps .da-img p:before {
background:0 0
}
html:lang(ar) .steps .da-img p:after {
position:absolute;
top:13px;
left:49px;
background:#FFF
}
.cause h2, .download h2 {
-webkit-animation:fromRightAnim1 1.2s cubic-bezier(.57, .01, 0, 1) .5s both;
-moz-animation:fromRightAnim1 1.2s cubic-bezier(.57, .01, 0, 1) .5s both;
-ms-animation:fromRightAnim1 1.2s cubic-bezier(.57, .01, 0, 1) .5s both;
-o-animation:fromRightAnim1 1.2s cubic-bezier(.57, .01, 0, 1) .5s both;
animation:fromRightAnim1 1.2s cubic-bezier(.57, .01, 0, 1) .5s both
}
.cause p.desc, .download p.desc {
-webkit-animation:fromRightAnim1 1.3s cubic-bezier(.57, .01, 0, 1) .4s both;
-moz-animation:fromRightAnim1 1.3s cubic-bezier(.57, .01, 0, 1) .4s both;
-ms-animation:fromRightAnim1 1.3s cubic-bezier(.57, .01, 0, 1) .4s both;
-o-animation:fromRightAnim1 1.3s cubic-bezier(.57, .01, 0, 1) .4s both;
animation:fromRightAnim1 1.3s cubic-bezier(.57, .01, 0, 1) .4s both
}
.cause .da-link, .download .da-link {
-webkit-animation:fromRightAnim1 1.4s cubic-bezier(.57, .01, 0, 1) .5s both;
-moz-animation:fromRightAnim1 1.4s cubic-bezier(.57, .01, 0, 1) .5s both;
-ms-animation:fromRightAnim1 1.4s cubic-bezier(.57, .01, 0, 1) .5s both;
-o-animation:fromRightAnim1 1.4s cubic-bezier(.57, .01, 0, 1) .5s both;
animation:fromRightAnim1 1.4s cubic-bezier(.57, .01, 0, 1) .5s both
}
.cause .da-img {
-webkit-animation:slide1ImgFromRight 1.3s cubic-bezier(.57, .01, 0, 1) .4s both;
-moz-animation:slide1ImgFromRight 1.3s cubic-bezier(.57, .01, 0, 1) .4s both;
-ms-animation:slide1ImgFromRight 1.3s cubic-bezier(.57, .01, 0, 1) .4s both;
-o-animation:slide1ImgFromRight 1.3s cubic-bezier(.57, .01, 0, 1) .4s both;
animation:slide1ImgFromRight 1.3s cubic-bezier(.57, .01, 0, 1) .4s both
}
.download .da-img {
-webkit-animation:slide2ImgFromRight 1.3s cubic-bezier(.57, .01, 0, 1) .4s both;
-moz-animation:slide2ImgFromRight 1.3s cubic-bezier(.57, .01, 0, 1) .4s both;
-ms-animation:slide2ImgFromRight 1.3s cubic-bezier(.57, .01, 0, 1) .4s both;
-o-animation:slide2ImgFromRight 1.3s cubic-bezier(.57, .01, 0, 1) .4s both;
animation:slide2ImgFromRight 1.3s cubic-bezier(.57, .01, 0, 1) .4s both
}
.composer {
	position:relative;
	width:807px;
	height:672px;
	margin-right:-42px
}
.comp_body, .comp_header, .outdated_notice {
	width:100%;
	position:absolute
}
.comp_header {
	top:0;
	left:0;
	z-index:100
}
.comp_header img {
	position:absolute;
	top:0;
	left:0
}
.outdated_notice {
	top:-150px;
	left:0;
	height:170px;
	z-index:50
}
.outdated_notice img {
	position:absolute;
	left:0
}
.comp_body {
	top:105px;
	height:447px;
	z-index:4
}
.comp_body .move1 {
	position:absolute;
	top:0;
	left:0;
	z-index:2
}
.comp_body .move2 {
	position:absolute;
	top:0;
	left:0;
	z-index:1
}
.comp_body .move3 {
	position:absolute;
	top:0;
	left:100%;
	z-index:1;
-webkit-transition:left .9s ease-in-out 5s;
-moz-transition:left .9s ease-in-out 5s;
-o-transition:left .9s ease-in-out 5s;
transition:left .9s ease-in-out 5s
}
.goAnim .outdated_notice {
	top:0;
-webkit-transition:top .3s linear 3s;
-moz-transition:top .3s linear 3s;
-o-transition:top .3s linear 3s;
-ms-transition:top .3s linear 3s;
transition:top .3s linear 3s
}
.goAnim .comp_body .move1 {
	z-index:1;
	-webkit-transition-delay:2s;
	-moz-transition-delay:2s;
	-o-transition-delay:2s;
	transition-delay:2s
}
.goAnim .comp_body .move2 {
	z-index:2;
	-webkit-transition-delay:5s;
	-moz-transition-delay:5s;
	-o-transition-delay:5s;
	transition-delay:5s
}
.goAnim .comp_body .move3 {
	z-index:3;
	left:0
}
.goAnim .outdated_notice .btn_animation {
	display:block;
	position:absolute;
	left:304px;
	top:59px;
	width:225px;
	height:79px;
	background:url(../files/pics/about-how-mouse-anim.png) no-repeat;
	background-size:auto 79px
}
.how .da-slider {
	background-color:#6B29BA
}
.slide-from h2 {
-webkit-animation:fromRightAnim1 1.2s cubic-bezier(.57, .01, 0, 1) .4s both;
-moz-animation:fromRightAnim1 1.2s cubic-bezier(.57, .01, 0, 1) .4s both;
-ms-animation:fromRightAnim1 1.2s cubic-bezier(.57, .01, 0, 1) .4s both;
-o-animation:fromRightAnim1 1.2s cubic-bezier(.57, .01, 0, 1) .4s both;
animation:fromRightAnim1 1.2s cubic-bezier(.57, .01, 0, 1) .4s both
}
.slide-from p.desc {
-webkit-animation:fromRightAnim1 1.3s cubic-bezier(.57, .01, 0, 1) .4s both;
-moz-animation:fromRightAnim1 1.3s cubic-bezier(.57, .01, 0, 1) .4s both;
-ms-animation:fromRightAnim1 1.3s cubic-bezier(.57, .01, 0, 1) .4s both;
-o-animation:fromRightAnim1 1.3s cubic-bezier(.57, .01, 0, 1) .4s both;
animation:fromRightAnim1 1.3s cubic-bezier(.57, .01, 0, 1) .4s both
}
.slide-from .da-link {
-webkit-animation:fromRightAnim1 1.4s cubic-bezier(.57, .01, 0, 1) .4s both;
-moz-animation:fromRightAnim1 1.4s cubic-bezier(.57, .01, 0, 1) .4s both;
-ms-animation:fromRightAnim1 1.4s cubic-bezier(.57, .01, 0, 1) .4s both;
-o-animation:fromRightAnim1 1.4s cubic-bezier(.57, .01, 0, 1) .4s both;
animation:fromRightAnim1 1.4s cubic-bezier(.57, .01, 0, 1) .4s both
}
.cause.slide-from .da-img {
-webkit-animation:slide1ImgFromRight 1.3s cubic-bezier(.57, .01, 0, 1) .4s both;
-moz-animation:slide1ImgFromRight 1.3s cubic-bezier(.57, .01, 0, 1) .4s both;
-ms-animation:slide1ImgFromRight 1.3s cubic-bezier(.57, .01, 0, 1) .4s both;
-o-animation:slide1ImgFromRight 1.3s cubic-bezier(.57, .01, 0, 1) .4s both;
animation:slide1ImgFromRight 1.3s cubic-bezier(.57, .01, 0, 1) .4s both
}
.how .da-slide.slide-from .da-img, .works.slide-from .da-img {
-webkit-animation:slide2ImgFromRight 1.3s cubic-bezier(.57, .01, 0, 1) .4s both;
-moz-animation:slide2ImgFromRight 1.3s cubic-bezier(.57, .01, 0, 1) .4s both;
-ms-animation:slide2ImgFromRight 1.3s cubic-bezier(.57, .01, 0, 1) .4s both;
-o-animation:slide2ImgFromRight 1.3s cubic-bezier(.57, .01, 0, 1) .4s both;
animation:slide2ImgFromRight 1.3s cubic-bezier(.57, .01, 0, 1) .4s both
}
.steps.slide-from .da-img {
-webkit-animation:slide3ImgFromRight 1.3s cubic-bezier(.57, .01, 0, 1) .4s both;
-moz-animation:slide3ImgFromRight 1.3s cubic-bezier(.57, .01, 0, 1) .4s both;
-ms-animation:slide3ImgFromRight 1.3s cubic-bezier(.57, .01, 0, 1) .4s both;
-o-animation:slide3ImgFromRight 1.3s cubic-bezier(.57, .01, 0, 1) .4s both;
animation:slide3ImgFromRight 1.3s cubic-bezier(.57, .01, 0, 1) .4s both
}
@-webkit-keyframes fromRightAnim1 {
0% {
left:-110%;
opacity:0
}
100% {
left:0;
opacity:1
}
}
@-moz-keyframes fromRightAnim1 {
0% {
left:-110%;
opacity:0
}
100% {
left:0;
opacity:1
}
}
@-o-keyframes fromRightAnim1 {
0% {
left:-110%;
opacity:0
}
100% {
left:0;
opacity:1
}
}
@keyframes fromRightAnim1 {
0% {
left:-110%;
opacity:0
}
100% {
left:0;
opacity:1
}
}
@-webkit-keyframes slide1ImgFromRight {
0% {
left:110%;
opacity:0
}
100% {
left:64%;
opacity:1
}
}
@-moz-keyframes slide1ImgFromRight {
0% {
left:110%;
opacity:0
}
100% {
left:64%;
opacity:1
}
}
@-o-keyframes slide1ImgFromRight {
0% {
left:110%;
opacity:0
}
100% {
left:64%;
opacity:1
}
}
@keyframes slide1ImgFromRight {
0% {
left:110%;
opacity:0
}
100% {
left:64%;
opacity:1
}
}
@-webkit-keyframes slide2ImgFromRight {
0% {
right:-110%;
opacity:0
}
100% {
right:0;
opacity:1
}
}
@-moz-keyframes slide2ImgFromRight {
0% {
right:-110%;
opacity:0
}
100% {
right:0;
opacity:1
}
}
@-o-keyframes slide2ImgFromRight {
0% {
right:-110%;
opacity:0
}
100% {
right:0;
opacity:1
}
}
@keyframes slide2ImgFromRight {
0% {
right:-110%;
opacity:0
}
100% {
right:0;
opacity:1
}
}
@-webkit-keyframes slide3ImgFromRight {
0% {
left:110%;
opacity:0
}
100% {
left:55%;
opacity:1
}
}
@-moz-keyframes slide3ImgFromRight {
0% {
left:110%;
opacity:0
}
100% {
left:55%;
opacity:1
}
}
@-o-keyframes slide3ImgFromRight {
0% {
left:110%;
opacity:0
}
100% {
left:55%;
opacity:1
}
}
@keyframes slide3ImgFromRight {
0% {
left:110%;
opacity:0
}
100% {
left:55%;
opacity:1
}
}
.slide-to h2, .slide-to p.desc {
	-webkit-animation:toLeftAnim1 1s ease both;
	-moz-animation:toLeftAnim1 1s ease both;
	-o-animation:toLeftAnim1 1s ease both;
	-ms-animation:toLeftAnim1 1s ease both;
	animation:toLeftAnim1 1s ease both
}
.slide-to .da-link {
	-webkit-animation:toLeftAnim1 1s ease;
	-moz-animation:toLeftAnim1 1s ease;
	-o-animation:toLeftAnim1 1s ease;
	-ms-animation:toLeftAnim1 1s ease;
	animation:toLeftAnim1 1s ease
}
.cause.slide-to .da-img {
-webkit-animation:slide1ImgToLeft .7s cubic-bezier(.49, .01, .82, .65) .1s both;
-moz-animation:slide1ImgToLeft .7s cubic-bezier(.49, .01, .82, .65) .1s both;
-o-animation:slide1ImgToLeft .7s cubic-bezier(.49, .01, .82, .65) .1s both;
-ms-animation:slide1ImgToLeft .7s cubic-bezier(.49, .01, .82, .65) .1s both;
animation:slide1ImgToLeft .7s cubic-bezier(.49, .01, .82, .65) .1s both
}
.cause.slide-to .da-img .gif, .steps.slide-to .da-img .gif {
	opacity:0;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter:alpha(opacity=0)
}
.how .da-slide.slide-to .da-img, .works.slide-to .da-img {
-webkit-animation:slide2ImgToLeft .7s cubic-bezier(.49, .01, .82, .65) .1s both;
-moz-animation:slide2ImgToLeft .7s cubic-bezier(.49, .01, .82, .65) .1s both;
-o-animation:slide2ImgToLeft .7s cubic-bezier(.49, .01, .82, .65) .1s both;
-ms-animation:slide2ImgToLeft .7s cubic-bezier(.49, .01, .82, .65) .1s both;
animation:slide2ImgToLeft .7s cubic-bezier(.49, .01, .82, .65) .1s both
}
.steps.slide-to .da-img {
-webkit-animation:slide3ImgToLeft .7s cubic-bezier(.49, .01, .82, .65) .1s both;
-moz-animation:slide3ImgToLeft .7s cubic-bezier(.49, .01, .82, .65) .1s both;
-o-animation:slide3ImgToLeft .7s cubic-bezier(.49, .01, .82, .65) .1s both;
-ms-animation:slide3ImgToLeft .7s cubic-bezier(.49, .01, .82, .65) .1s both;
animation:slide3ImgToLeft .7s cubic-bezier(.49, .01, .82, .65) .1s both
}
@-webkit-keyframes toLeftAnim1 {
0% {
left:0;
opacity:1
}
100% {
left:-110%;
opacity:0
}
}
@-moz-keyframes toLeftAnim1 {
0% {
left:0;
opacity:1
}
100% {
left:-110%;
opacity:0
}
}
@-o-keyframes toLeftAnim1 {
0% {
left:0;
opacity:1
}
100% {
left:-110%;
opacity:0
}
}
@keyframes toLeftAnim1 {
0% {
left:0;
opacity:1
}
100% {
left:-110%;
opacity:0
}
}
@-webkit-keyframes slide1ImgToLeft {
0% {
left:64%;
opacity:1
}
100% {
left:-50%;
opacity:1
}
}
@-moz-keyframes slide1ImgToLeft {
0% {
left:64%;
opacity:1
}
100% {
left:-50%;
opacity:1
}
}
@-o-keyframes slide1ImgToLeft {
0% {
left:64%;
opacity:1
}
100% {
left:-50%;
opacity:1
}
}
@keyframes slide1ImgToLeft {
0% {
left:64%;
opacity:1
}
100% {
left:-50%;
opacity:1
}
}
@-webkit-keyframes slide2ImgToLeft {
0% {
right:0;
opacity:1
}
100% {
right:150%;
opacity:1
}
}
@-moz-keyframes slide2ImgToLeft {
0% {
right:0;
opacity:1
}
100% {
right:150%;
opacity:1
}
}
@-o-keyframes slide2ImgToLeft {
0% {
right:0;
opacity:1
}
100% {
right:150%;
opacity:1
}
}
@keyframes slide2ImgToLeft {
0% {
right:0;
opacity:1
}
100% {
right:150%;
opacity:1
}
}
@-webkit-keyframes slide3ImgToLeft {
0% {
left:55%;
opacity:1
}
100% {
left:-50%;
opacity:1
}
}
@-moz-keyframes slide3ImgToLeft {
0% {
left:55%;
opacity:1
}
100% {
left:-50%;
opacity:1
}
}
@-o-keyframes slide3ImgToLeft {
0% {
left:55%;
opacity:1
}
100% {
left:-50%;
opacity:1
}
}
@keyframes slide3ImgToLeft {
0% {
left:55%;
opacity:1
}
100% {
left:-50%;
opacity:1
}
}
#bubbles {
	position:absolute;
	width:100px;
	height:100%;
	top:0;
	padding:100px 0;
	left:40%
}
.bubble {
	position:absolute;
	width:60px;
	height:60px;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	border-radius:50%
}
.goAnim .b1, .goAnim .b2 {
	width:100px;
	position:absolute
}
.bottom_bubbles {
	position:absolute;
	bottom:0;
	left:35%;
	opacity:0;
-webkit-transition:opacity .3s ease-in-out;
-moz-transition:opacity .3s ease-in-out;
-o-transition:opacity .3s ease-in-out;
transition:opacity .3s ease-in-out
}
.goBubbles .bottom_bubbles {
	opacity:1
}
.goAnim .b1 {
	height:83px;
	background:url(../files/pics/bubble.png) no-repeat;
	background-size:auto 83px;
	-webkit-animation:moveBubble 5s linear infinite, sideToSide 5s ease-in-out infinite alternate;
	-moz-animation:moveBubble 5s linear infinite, sideToSide 5s ease-in-out infinite alternate;
	-o-animation:moveBubble 5s linear infinite, sideToSide 5s ease-in-out infinite alternate
}
.goAnim .b2 {
	height:75px;
	background:url(../files/pics/bubble-small.png) no-repeat;
	background-size:auto 75px;
	-webkit-animation:moveBubble 6s linear infinite, sideToSide2 7s ease-in-out infinite alternate;
	-moz-animation:moveBubble 6s linear infinite, sideToSide2 7s ease-in-out infinite alternate;
	-o-animation:moveBubble 6s linear infinite, sideToSide2 7s ease-in-out infinite alternate
}
@-webkit-keyframes moveBubble {
0% {
-webkit-transform:translateY(420px)
}
100% {
-webkit-transform:translateY(-320px)
}
}
@-moz-keyframes moveBubble {
0% {
-moz-transform:translateY(420px)
}
100% {
-moz-transform:translateY(-320px)
}
}
@keyframes moveBubble {
0% {
transform:translateY(420px)
}
100% {
transform:translateY(-320px)
}
}
@-webkit-keyframes sideToSide {
0%, 100% {
margin-left:0
}
25%, 75% {
margin-left:30px
}
50% {
margin-left:-10px
}
}
@-webkit-keyframes sideToSide2 {
0%, 100% {
margin-left:0
}
25%, 75% {
margin-left:-20px
}
50% {
margin-left:20px
}
}
@-moz-keyframes sideToSide {
0%, 100% {
margin-left:0
}
25%, 75% {
margin-left:30px
}
50% {
margin-left:-10px
}
}
@-moz-keyframes sideToSide2 {
0%, 100% {
margin-left:0
}
25%, 75% {
margin-left:-20px
}
50% {
margin-left:20px
}
}
@keyframes sideToSide {
0%, 100% {
margin-left:0
}
25%, 75% {
margin-left:30px
}
50% {
margin-left:-10px
}
}
@keyframes sideToSide2 {
0%, 100% {
margin-left:0
}
25%, 75% {
margin-left:-20px
}
50% {
margin-left:20px
}
}
@media screen and (max-width:1250px) {
.da-slide .da-img {
width:35%
}
.works .da-img p {
width:100%
}
}
.error404 {
	background:url(../files/404-bg.jpg) top center no-repeat;
	-webkit-background-size:cover;
	-ms-background-size:cover;
	background-size:cover
}
.error404 .keep_calm {
	display:block;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	font-weight:600;
	letter-spacing:-3px;
	background:rgba(0, 0, 0, .8);
	z-index:9999;
	overflow:hidden
}
.error404 .keep_calm p.center {
	width:800px;
	height:500px;
	margin:-250px 0 0 -400px
}
a {
	cursor:pointer
}
a.link-oldones {
	display:none
}
@media screen and (max-width:840px) {
.error404 .keep_calm p.center {
font-size:70px;
line-height:72px
}
}
@media screen and (max-width:700px), screen and (max-height:670px) {
.error404 .keep_calm p.center {
width:280px;
height:340px;
margin:-140px 0 0 -140px;
white-space:normal;
font-size:43px;
line-height:47px
}
}
.proj01, .proj01 #da-slider, .proj01 .main_menu ul li a.active {
	background-color:#00CAFF
}
.proj02, .proj02 #da-slider, .proj02 .main_menu ul li a.active {
	background-color:#e73d51
}
.proj03, .proj03 #da-slider, .proj03 .main_menu ul li a.active {
	background-color:#ecbf08
}
.how01, .how01 #da-slider, .how01 .main_menu ul li a.active {
	background-color:#6b29ba
}
.how02, .how02 #da-slider, .how02 .main_menu ul li a.active {
	background-color:#23dc71
}
.how03, .how03 #da-slider, .how03 .main_menu ul li a.active {
	background-color:#ecbf08
}
.how04, .how04 #da-slider, .how04 .main_menu ul li a.active {
	background-color:#e73d51
}
.chromeBg, .chromeBg #content, .chromeBg .main_menu ul li a.active {
	background-color:#f2b635
}
.firefoxBg, .firefoxBg #content, .firefoxBg .main_menu ul li a.active {
	background-color:#f19a2a
}
.internetExplorerBg, .internetExplorerBg #content, .internetExplorerBg .main_menu ul li a.active {
	background-color:#00caff
}
.safariBg, .safariBg #content, .safariBg .main_menu ul li a.active {
	background-color:#00a0e6
}
.operaBg, .operaBg #content, .operaBg .main_menu ul li a.active {
	background-color:#f25648
}
* {
	padding:0;
	margin:0;
}
body {
	-webkit-font-smoothing:antialiased;
	color: #e5e7e6;
font-family: 'Kanit', sans-serif;
	background:#000000!important;
}
a {
	background:none;
	-webkit-transition: none;
	-moz-transition:none;
	text-decoration:none;
}
a:hover {
	background:none;
	-webkit-transition: none;
	-moz-transition:none;
	text-decoration:none;
}
a:active, a:focus {
	background:none;
	-webkit-transition: none;
	-moz-transition:none;
	text-decoration:none;
}
ul {
}
li {
}
.tagcloud {
}
.tagcloud a {
    font-size: 15px;
}
#social {
	width:50px;
	height:35px;
	position:absolute;
	right:15px;
	bottom:11px;
	z-index:9;
}
#social a#s:hover {
	background:none;
	text-decoration:none;
	padding:0px;
	top:5px;
	opacity:1.0;
}
#social a#s {
	background:none;
	text-decoration:none;
	padding:0px;
	top:0px;
	opacity:0.9;
}

.header {
	position:absolute;
	z-index:99;
	width:100%;
    padding: 20px;
}

#portfolio li {
    display: flex;
    position: relative;
    color: #fff;
    justify-content: center;
}
#portfolio li .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size:15px;
    padding: 30px;
    font-weight: 300;
    position: absolute;
    top: 0vh;
    height: 50vh;
    left: 100px;
    width: 35.5vw;
    z-index: 888888888888;
    background: rgba(38,38,38,0.5);
}
#portfolio li img {
    width:auto;
    height:50vh;
    z-index: 2;
    right: 100px;
    float: right;
    position: relative;
    overflow: hidden;
}
#portfolio li .content a {
    text-align: center;
    display: flex;
    width: 100%;
    margin: 30px 0px;
}


#portfolio a {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    text-align: right!important;
    align-content: flex-end;
    align-items: flex-end;
}

#portfolio img {
    float: right;
    width: 50vw;
}

.message { padding:10px; margin:15px 0; display:block; text-align:left }
.message-title { font-weight:bold; font-size:1.25em }
.message-body { margin-top:4px }
.error, .notice, .success { padding:.8em; width: 100%; margin-bottom:1em; border:2px solid #ddd }
.error { background:transparent; color:#fff; border-color:transparent}
.notice { background:#FFF6BF; color:#514721; border-color:#FFD324 }
.success { background:#E6EFC2; color:#264409; border-color:#C6D880 }
.error a { color:#fff }
.notice a { color:#514721 }
.success a { color:#264409 }

.wrapper form input[type=text] {
    width: 100%;
    padding: 10px 20px;
    border: 1px solid rgba(256,256,256,0.5);
    background: none!important;
    color: #fff;
    outline: none;
    margin-bottom: 20px;
    transition: all 0.2s;
}
.wrapper form textarea {
    width: 100%;
    padding: 10px 20px;
    border: 1px solid rgba(256,256,256,0.5);
    background: none;
    resize: none;
    height: 170px;
    margin-bottom: 20px;
    color: #fff;
    outline: none;
    transition: all 0.2s;
}
.wrapper form input[type=submit] {
    padding: 10px 20px;
    border: 1px solid rgba(256,256,256,0.5);
    color: #fff;
    width: 100%;
    float: right;
    cursor: pointer;
    background: none;
    outline: none;
    transition: all 0.2s;
}

.wrapper form input[type=text]:focus, .wrapper form input[type=submit]:focus, .wrapper form textarea {
    box-shadow: 0px 0px 5px #fff;
    border-width: 1px;
}

#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9099900;
  background-color:rgba(0,0,0,0.3);
  display:none;
  width: 100vw!important;
  height: 100vh!important;
}  
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:50vw;
  height:200px;
  display:none;
  z-index:90999001;
  padding:20px;
  border-radius: 15px;
  text-align: center;
}
#boxes #dialog {
  width:80vw; 
  height:auto;
  padding:10px;
  background-color:rgba(0,0,0,0.9);
  border: 2px solid #ddd;
  box-shadow: 0 0px 5px rgba(256,256, 256, .8);
font-family: 'Roboto', cursive;

}
.maintext{
	text-align: center;
 font-family: 'Kanit', sans-serif;
  text-decoration: none;
}

#lorem{
font-family: 'Roboto', cursive;
	font-size:13px;
  text-align: justify;
    padding:10px;
      font-size:15px;
    font-weight: 400;
    line-height: 30px;
}
#lorem h1 {
    font-size: 30px;
    padding: 30px 0px;
}
#popupfoot{
font-family: 'Roboto', cursive;
	font-size: 16pt;
  padding: 10px 20px;
}
#popupfoot a{
	text-decoration: none;
}
.agree:hover{
  background-color: #D1D1D1;
}
.popupoption:hover{
	background-color:#D1D1D1;
	color: green;
}
.popupoption2:hover{
	
	color: red;
}
.close.agree {
    position: absolute;
    top: -25px;
    right: -25px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: #fff;
    background:rgba(0,0,0,1) url(../images/close.svg) no-repeat center center;
    background-size:30%;
    border: 2px solid rgba(256,256, 256,1);
    box-shadow: 0 0px 5px rgba(256,256, 256, .8);
    text-shadow: 0px;
    text-align: center;
    line-height: 60px;
    font-weight: 500;
    font-size: 16px;
    z-index: 9999999999;
    opacity: 1;
}



.logo {
	width:120px;
	position:absolute;
	bottom:20px;
	left:50%;
    margin-left: -60px;
	z-index:99;	
}

#index_wrap {
	width:100vw;
	height:100vh;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
	margin:auto;
	position:relative;
	z-index:9;
	left:-45px;
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
}
#index_inner_wrap {
	width:1000px;
	float:left;
}

#index_inner_wrap a#b:hover {
	font-size:20px;
	padding:8px;
	color:#000;
	position:relative;
	z-index:9;
	cursor: default;
}
#index_inner_wrap a:link, #index_inner_wrap a:visited {
	text-decoration: none;
	font-weight: normal;
	cursor:auto;
	text-shadow:none;
	position:relative;
	cursor:pointer;
}
#index_inner_wrap a:hover {
	padding:8px;
	background:#fff;
	position:relative;
	z-index:20;
	cursor:pointer;
	-webkit-transition:   font-size 0s ease-in-out;
	-moz-transition:   font-size 0s ease-in-out;
	-o-transition:font-size 0s ease-in-out;
	-ms-transition:font-size 0s ease-in-out;
	transition: font-size 0s ease-in-out;
	font-size:20px;
	border-radius:4px;
}

#uswrap {
	float: left;
	height: 362px;
	width: 430px;
	padding-top:0px;
	margin:-30px 0px 0px -50px;
	position: relative;
}
.uswrap1 {
	float:left;
	height:300px;
	width:430px;
	position:relative;
	clear: left;
	margin:0px 0px 0px -50px;
}
.europe {
	float:right;
	height:580px;
	width:570px;
	position:relative;
	padding-top:60px;
	
}
#k1 {
	position: absolute;
	left: 40px;
	top: 128px;
}
#k2 {
	position: absolute;
	left: 13px;
	top: 128px;
	text-transform: uppercase;
}
#k3 {
	position: absolute;
	left: 26px;
	top: 128px;
}
#k4 {
	position: absolute;
	left: 54px;
	top: 128px;
}
#k5 {
	position: absolute;
	left: 137px;
	top: 128px;
}
#k6 {
	position: absolute;
	left: 257px;
	top: 128px;
}
#k7 {
    position: absolute;
    left: 204px;
    top: 128px;
}
#k8 {
    position: absolute;
    left: 141px;
    top: 110px;
    font-size: 13px;
}
#k9 {
	position: absolute;
	left: 218px;
	top: 128px;
}
#k10 {
	position: absolute;
	left: 11px;
	top: 146px;
}
#k11 {
	position: absolute;
	left: 74px;
	top: 146px;
}
#k11 a {
	color:#e9b18d;
}
#k12 {
	position: absolute;
	left: 203px;
	top: 146px;
}
#k13 {
	position: absolute;
	left: 62px;
	top: 163px;
	font-size: 13px;
}
#k14 {
	position: absolute;
	left: 146px;
	top: 163px;
}
#k15 {
	position: absolute;
	left: 380px;
	top: 163px;
}
#k16 {
	position: absolute;
	left: 250px;
	top: 163px;
}
#k17 {
	position: absolute;
	left: 70px;
	top: 181px;
	color:#26c5cf;
}
#k17 a {
	color:#26c5cf;
}
#k18 {
	position: absolute;
	left: 187px;
	top: 181px;
	color:#779a5a;
}
#k18 a {
	color:#779a5a;
}
#k19 {
	position: absolute;
	left: 66px;
	top: 198px;
}
#k20 {
	position: absolute;
	left: 103px;
	top: 198px;
}
#k21 {
	position: absolute;
	left: 51px;
	top: 216px;
}
#k22 {
	position: absolute;
	left: 108px;
	top: 216px;
	color:#b0a43b;
}
#k22 a {
	color:#b0a43b;
}
#k23 {
	position: absolute;
	left: 101px;
	top: 513px;
}
#k24 {
	position: absolute;
	left: 50px;
	top: 234px;
	color:#e9b18d;
}
#k24 a {
	color:#e9b18d;
}
#k25 {
	position: absolute;
	left: 145px;
	top: 234px;
}
#k26 {
	position: absolute;
	left: 56px;
	top: 252px;
}
#k27 {
	position: absolute;
	left: 116px;
	top: 252px;
}
#k28 {
	position: absolute;
	left: 69px;
	top: 270px;
}
#k29 {
	position: absolute;
	left: 110px;
	top: 270px;
	color:#cd5874;
}
#k29 a {
	color:#cd5874;
}
#k30 {
	position: absolute;
	left: 84px;
	top: 288px;
	color:#b0a43b;
}
#k30 a {
	color:#b0a43b;
}
#k31 {
	position: absolute;
	left: 85px;
	top: 306px;
}
#k32 {
    position: absolute;
    left: 133px;
    top: 306px;
}
#k33 {
	position: absolute;
	left: 251px;
	top: 163px;
}
#k34 {
	position: absolute;
	left: 288px;
	top: 198px;
}
#k35 {
	position: absolute;
	left: 247px;
	top: 163px;
}
#k36 {
    position: absolute;
    left: 227px;
    top: 216px;
}
#k37 {
	position: absolute;
	left: 321px;
	top: 196px;
}
#k38 {
	position: absolute;
	left: 278px;
	top: 146px;
}
#k39 {
	position: absolute;
	left: 336px;
	top: 146px;
}
#k40 {
    position: absolute;
    left: 236px;
    top: 110px;
}
#k41 {
	position: absolute;
	left: 275px;
	top: 94px;
}
#k42 {
	position: absolute;
	left: 273px;
	top: 128px;
}
#k43 {
	position: absolute;
	left: 288px;
	top: 76px;
}
#k44 {
    position: absolute;
    left: 322px;
    top: 94px;
}
#k45 {
    position: absolute;
    left: 360px;
    top: 94px;
    color: #779a5a;
}
#k45 a {
	color:#779a5a;
}
#k46 {
	position: absolute;
	left: 371px;
	top: 76px;
}
#k47 {
	position: absolute;
	left: 337px;
	top: 111px;
}
#k48 {
	position: absolute;
	left: 382px;
	top: 128px;
}
#k49 {
	position: absolute;
	left: 378px;
	top: 146px;
}
#k50 {
    position: absolute;
    left: 442px;
    top: 128px;
}
#k51 {
	position: absolute;
	left: 107px;
	top: 324px;
}
#k52 {
	position: absolute;
	left: 139px;
	top: 344px;
}
#k53 {
	position: absolute;
	left: 189px;
	top: 1px;
}
#k54 {
	left: 187px;
	top: 18px;
	position: absolute;
}
#k55 {
	position: absolute;
	left: 184px;
	top: 34px;
	color:#7caf61;
}
#k55 a {
	color:#7caf61;
}
#k56 {
	position: absolute;
	left: 174px;
	top: 51px;
}
#k57 {
	position: absolute;
	left: 255px;
	top: 46px;
}
#k58 {
	position: absolute;
	left: 267px;
	top: 46px;
}
#k59 {
	position: absolute;
	left: 249px;
	top: 51px;
}
#k60 {
	position: absolute;
	left: 188px;
	top: 84px;
}
#k61 {
	position: absolute;
	left: 173px;
	top: 65px;
}
#k62 {
	position: absolute;
	left: 299px;
	top: 58px;
}
#k63 {
	position: absolute;
	left: 179px;
	top: 68px;
}
#k64 {
	position: absolute;
	left: 169px;
	top: 84px;
}
#k65 {
    position: absolute;
    left: 198px;
    top: 100px;
}
#k66 {
	position: absolute;
	left: 188px;
	top: 90px;
}
#k67 {
	position: absolute;
	left: 196px;
	top: 99px;
}
#k68 {
	position: absolute;
	left: 202px;
	top: 117px;
}
#k70 {
    position: absolute;
    left: 303px;
    top: 117px;
    color: #b0a43b;
}
#k70 a {
	color:#b0a43b;
}
#k71 {
	position: absolute;
	left: 207px;
	top: 133px;
}
#k72 {
    position: absolute;
    left: 246px;
    top: 135px;
    color: #00CCFF;
}
#k72 a {
	color:#00CCFF;
}
#k73 {
    position: absolute;
    left: 328px;
    top: 136px;
}
#k74 {
	position: absolute;
	left: 211px;
	top: 149px;
}
#k75 {
    position: absolute;
    left: 267px;
    top: 150px;
    color: #cd5874;
}
#k75 a {
	color:#cd5874;
}
#k76 {
    position: absolute;
    left: 217px;
    top: 168px;
}
#k77 {
    position: absolute;
    left: 221px;
    top: 185px;
}
#k78 {
    position: absolute;
    left: 227px;
    top: 203px;
}
#k80 {
    position: absolute;
    left: 230px;
    top: 219px;
    color: #00CCFF;
}
#k80 a {
	color:#00CCFF;
}
#k81 {
    position: absolute;
    left: 236px;
    top: 235px;
}
#k82 {
    position: absolute;
    left: 239px;
    top: 253px;
    color: #b9cf26;
}
#k82 a {
	color:#b9cf26;
}
#k83 {
    position: absolute;
    left: -8px;
    top: 177px;
}
#k84 {
	position: absolute;
	left: 25px;
	top: 176px;
}
#k85 {
	position: absolute;
	left: 79px;
	top: 115px;
	color:#cd5874;
}
#k85 a {
	color:#cd5874;
}
#k86 {
	position: absolute;
	left: 138px;
	top: 120px;
}
#k87 {
	position: absolute;
	left: 70px;
	top: 126px;
}
#k88 {
	position: absolute;
	left: 110px;
	top: 128px;
}
#k89 {
	position: absolute;
	left: 134px;
	top: 126px;
	color:#b0a43b;
}
#k89 a {
	color:#b0a43b;
}
#k90 {
	position: absolute;
	left: 246px;
	top: 92px;
	color:#00CCFF;
}
#k90 a {
	color:#00CCFF;
}
#k91 {
    position: absolute;
    left: 330px;
    top: 92px;
}
#k92 {
	position: absolute;
	left: 357px;
	top: 104px;
}
#k93 {
	position: absolute;
	left: 207px;
	top: 110px;
}
#k94 {
	position: absolute;
	left: 403px;
	top: 107px;
}
#k95 {
	position: absolute;
	left: 386px;
	top: 115px;
}
#k96 {
	position: absolute;
	left: 480px;
	top: 118px;
}
#k97 {
	position: absolute;
	left: 320px;
	top: 110px;
}
#k98 {
	position: absolute;
	left: 47px;
	top: 143px;
}
#k99 {
    position: absolute;
    left: 111px;
    top: 143px;
}
#k100 {
	position: absolute;
	left: 215px;
	top: 136px;
}
#k101 {
	position: absolute;
	left: 227px;
	top: 134px;
}
#k102 {
	position: absolute;
	left: 267px;
	top: 127px;
}
#k103 {
	position: absolute;
	left: 336px;
	top: 130px;
}
#k104 {
	position: absolute;
	left: 382px;
	top: 127px;
	color:#779a5a;
}
#k104 a {
	color:#779a5a;
}
#k105 {
	position: absolute;
	left: 495px;
	top: 127px;
}
#k106 {
	position: absolute;
	left: 507px;
	top: 114px;
}
#k107 {
	position: absolute;
	left: 118px;
	top: 149px;
}
#k108 {
	position: absolute;
	left: 167px;
	top: 151px;
}
#k109 {
    position: absolute;
    left: 266px;
    top: 144px;
    color: #00CCFF;
}
#k109 a {
	color:#00CCFF;
}
#k110 {
	position: absolute;
	left: 311px;
	top: 142px;
}
#k111 {
    position: absolute;
    left: 391px;
    top: 144px;
}
#k112 {
	position: absolute;
	left: 395px;
	top: 145px;
}
#k113 {
    position: absolute;
    left: 488px;
    top: 144px;
}
#k114 {
	position: absolute;
	left: 507px;
	top: 139px;
	color:#e9b18d;
}
#k114 a {
	color:#e9b18d;
}
#k115 {
	position: absolute;
	left: 92px;
	top: 160px;
	color:#e9b18d;
}
#k115 a {
	color:#e9b18d;
}
#k116 {
    position: absolute;
    left: 247px;
    top: 160px;
}
#k117 {
    position: absolute;
    left: 376px;
    top: 160px;
}
#k118 {
	position: absolute;
	left: 414px;
	top: 156px;
}
#k119 {
	position: absolute;
	left: 31px;
	top: 177px;
	color:#779a5a;
}
#k119 a {
	color:#779a5a;
}
#k120 {
    position: absolute;
    left: 195px;
    top: 177px;
}
#k121 {
	position: absolute;
	left: 262px;
	top: 177px;
}
#k122 {
    position: absolute;
    left: 328px;
    top: 177px;
}
#k123 {
    position: absolute;
    left: 446px;
    top: 177px;
}
#k124 {
    position: absolute;
    left: 500px;
    top: 160px;
}
#k125 {
	position: absolute;
	left: 26px;
	top: 194px;
}
#k126 {
    position: absolute;
    left: 168px;
    top: 195px;
}
#k127 {
    position: absolute;
    left: 327px;
    top: 195px;
    color: #b0a43b;
}
#k127 a {
	color:#b0a43b;
}
#k128 {
	position: absolute;
	left: 369px;
	top: 182px;
}
#k129 {
	position: absolute;
	left: 435px;
	top: 184px;
}
#k130 {
	position: absolute;
	left: 458px;
	top: 185px;
}
#k131 {
	position: absolute;
	left: 423px;
	top: 188px;
}
#k132 {
	position: absolute;
	left: 466px;
	top: 197px;
}
#k133 {
	position: absolute;
	left: 33px;
	top: 211px;
}
#k134 {
	position: absolute;
	left: 82px;
	top: 203px;
}
#k135 {
	position: absolute;
	left: 93px;
	top: 202px;
}
#k136 {
	position: absolute;
	left: 155px;
	top: 202px;
}
#k137 {
	position: absolute;
	left: 199px;
	top: 205px;
}
#k138 {
	position: absolute;
	left: 325px;
	top: 196px;
	color:#e9b18d;
}
#k138 a {
	color:#e9b18d;
}
#k139 {
	position: absolute;
	left: 449px;
	top: 195px;
}
#k140 {
	position: absolute;
	left: 18px;
	top: 212px;
}
#k141 {
	position: absolute;
	top: 212px;
	left: 13px;
	color:#cd5874;
}
#k141 a {
	color:#cd5874;
}
#k142 {
	position: absolute;
	left: 96px;
	top: 222px;
}
#k143 {
	position: absolute;
	left: 103px;
	top: 213px;
}
#k144 {
	position: absolute;
	left: 167px;
	top: 214px;
}
#k145 {
	position: absolute;
	left: 117px;
	top: 230px;
	color:#00CCFF;
}
#k145 a {
	color:#00CCFF;
}
#k146 {
    position: absolute;
    left: 231px;
    top: 213px;
    color: #b9cf26;
}
#k146 a {
	color:#b9cf26;
}
#k147 {
    position: absolute;
    left: 379px;
    top: 213px;
    color: #cd5874;
}
#k147 a {
	color:#cd5874;
}
#k148 {
    position: absolute;
    left: 474px;
    top: 213px;
}
#k149 {
	position: absolute;
	left: 30px;
	top: 236px;
}
#k150 {
	position: absolute;
	left: 3px;
	top: 252px;
}
#k151 {
	position: absolute;
	left: -13px;
	top: 269px;
}
#k152 {
	position: absolute;
	left: 34px;
	top: 269px;
}
#k153 {
	position: absolute;
	left: 72px;
	top: 258px;
	color:#e9b18d;
}
#k153 a {
	color:#e9b18d;
}
#k154 {
	position: absolute;
	left: 189px;
	top: 264px;
}
#k155 {
	position: absolute;
	left: -19px;
	top: 275px;
}
#k156 {
	position: absolute;
	left: -27px;
	top: 286px;
}
#k157 {
	position: absolute;
	left: -27px;
	top: 303px;
	color:#b0a43b;
}
#k157 a {
	color:#b0a43b;
}
#k158 {
	position: absolute;
	left: 77px;
	top: 270px;
}
#k159 {
    position: absolute;
    left: 31px;
    top: 286px;
}
#k160 {
	position: absolute;
	left: 83px;
	top: 274px;
}
#k161 {
	position: absolute;
	left: 172px;
	top: 284px;
}
#k162 {
	position: absolute;
	left: 143px;
	top: 284px;
}
#k163 {
	position: absolute;
	left: 216px;
	top: 288px;
}
#k164 {
	position: absolute;
	left: 25px;
	top: 296px;
}
#k165 {
	position: absolute;
	left: 44px;
	top: 297px;
}
#k166 {
	position: absolute;
	left: 65px;
	top: 297px;
}
#k167 {
	position: absolute;
	left: 92px;
	top: 298px;
}
#k168 {
	position: absolute;
	left: 106px;
	top: 296px;
}
#k169 {
    position: absolute;
    left: 207px;
    top: 303px;
}
#k170 {
	position: absolute;
	left: 10px;
	top: 303px;
}
#k171 {
	position: absolute;
	left: -215px;
	top: 82px;
}
#k172 {
    position: absolute;
    left: 114px;
    top: 320px;
}
#k173 {
	position: absolute;
	left: -29px;
	top: 320px;
	color:#00CCFF;
}
#k173 a {
	color:#00CCFF;
}
#k174 {
	position: absolute;
	left: 205px;
	top: 316px;
}
#k175 {
    position: absolute;
    left: 176px;
    top: 321px;
    color: #779a5a;
}
#k175 a {
	color:#779a5a;
}
#k176 {
	position: absolute;
	left: -11px;
	top: 337px;
	color:#e9b18d;
}
#k176 a {
	color:#e9b18d;
}
#k177 {
    position: absolute;
    left: 166px;
    top: 339px;
}
#k178 {
	position: absolute;
	left: -6px;
	top: 354px;
}
#k179 {
    position: absolute;
    left: 30px;
    top: 355px;
}
#k180 {
    position: absolute;
    left: 161px;
    top: 356px;
}
#k181 {
	position: absolute;
	left: 22px;
	top: 372px;
	color:#cd5874;
}
#k181 a {
	color:#cd5874;
}
#k182 {
	position: absolute;
	left: 112px;
	top: 372px;
}
#k183 {
	position: absolute;
	left: 162px;
	top: 385px;
}
#k184 {
	position: absolute;
	left: 69px;
	top: 396px;
}
#k185 {
	position: absolute;
	left: 67px;
	top: 390px;
}
#k186 {
	position: absolute;
	left: 75px;
	top: 408px;
}
#k187 {
	position: absolute;
	left: 188px;
	top: 442px;
}
#k188 {
	position: absolute;
	left: 78px;
	top: 425px;
}
#k189 {
    position: absolute;
    left: 80px;
    top: 443px;
    color: #779a5a;
}
#k189 a {
	color:#779a5a;
}
#k190 {
	position: absolute;
	left: 144px;
	top: 443px;
	font-size: 13px;
}
#k191 {
	position: absolute;
	left: 152px;
	top: 236px;
}
#k192 {
	position: absolute;
	left: 195px;
	top: 237px;
}
#k193 {
	position: absolute;
	left: 226px;
	top: 231px;
}
#k194 {
    position: absolute;
    left: 370px;
    top: 231px;
    color: #779a5a;
}
#k194 a {
	color:#779a5a;
}
#k195 {
    position: absolute;
    left: 499px;
    top: 232px;
}
#k196 {
	position: absolute;
	left: 429px;
	top: 233px;
}
#k197 {
	position: absolute;
	left: 188px;
	top: 248px;
	color:#7caf61;
}
#k197 a {
	color:#7caf61;
}
#k198 {
    position: absolute;
    left: 359px;
    top: 248px;
    color: #00CCFF;
}
#k198 a {
	color:#00CCFF;
}
#k199 {
    position: absolute;
    left: 421px;
    top: 249px;
}
#k200 {
	position: absolute;
	left: 422px;
	top: 243px;
}
#k201 {
	position: absolute;
	left: 209px;
	top: 264px;
}
#k202 {
    position: absolute;
    left: 353px;
    top: 264px;
}
#k203 {
    position: absolute;
    left: 416px;
    top: 265px;
    color: #e9b18d;
}
#k203 a {
	color:#e9b18d;
}
#k204 {
	position: absolute;
	left: 236px;
	top: 280px;
}
#k205 {
    position: absolute;
    left: 316px;
    top: 281px;
}
#k206 {
    position: absolute;
    left: 449px;
    top: 282px;
    color: #b0a43b;
}
#k206 a {
	color:#b0a43b;
}
#k207 {
	position: absolute;
	left: 287px;
	top: 297px;
}
#k208 {
    position: absolute;
    left: 294px;
    top: 313px;
}
#k209 {
    position: absolute;
    left: 297px;
    top: 329px;
    color: #00CCFF;
}
#k209 a {
	color:#00CCFF;
}
#k210 {
    position: absolute;
    left: 309px;
    top: 345px;
}
#k211 {
    position: absolute;
    left: 314px;
    top: 363px;
}
#k212 {
	position: absolute;
	left: 484px;
	top: 241px;
}
#k213 {
	position: absolute;
	left: 366px;
	top: 298px;
}
#k214 {
	position: absolute;
	left: 368px;
	top: 316px;
}
#k215 {
	position: absolute;
	left: 388px;
	top: 313px;
}
#k216 {
	position: absolute;
	left: 382px;
	top: 353px;
}
#k217 {
	position: absolute;
	left: 403px;
	top: 334px;
}
#k218 {
	position: absolute;
	left: 142px;
	top: 449px;
}
#k219 {
	position: absolute;
	left: 84px;
	top: 461px;
	color:#e9b18d;
}
#k219 a {
	color:#e9b18d;
}
#k220 {
    position: absolute;
    left: 93px;
    top: 479px;
    color: #cd5874;
}
#k220 a {
	color:#cd5874;
}
#k221 {
    position: absolute;
    left: 100px;
    top: 495px;
    color: #00CCFF;
}
#k221 a {
	color:#00CCFF;
}
#k222 {
    position: absolute;
    left: 113px;
    top: 531px;
}
#k223 {
    position: absolute;
    left: 158px;
    top: 461px;
}
#k224 {
	position: absolute;
	left: 389px;
	top: 370px;
}
#k225 {
	position: absolute;
	left: 394px;
	top: 387px;
}
#k226 {
    position: absolute;
    left: 448px;
    top: 353px;
}
#k227 {
	position: absolute;
	left: 441px;
	top: 368px;
}
#k228 {
    position: absolute;
    left: 436px;
    top: 371px;
    color: #b9cf26;
}
#k228 a {
	color:#b9cf26;
}
#k229 {
    position: absolute;
    left: 437px;
    top: 387px;
}
#k230 {
    position: absolute;
    left: 451px;
    top: 405px;
}
#k231 {
	position: absolute;
	left: 462px;
	top: 388px;
}
#k232 {
	position: absolute;
	left: 509px;
	top: 390px;
}
#k233 {
	position: absolute;
	left: 529px;
	top: 409px;
}
#k234 {
	position: absolute;
	left: 504px;
	top: 429px;
}
#k235 {
	position: absolute;
	left: 476px;
	top: 444px;
}
#k236 {
	position: absolute;
	left: 536px;
	top: 444px;
}
#k237 {
	position: absolute;
	left: 460px;
	top: 460px;
	color:#e9b18d;
}
#k237 a {
	color:#e9b18d;
}
#k238 {
    position: absolute;
    left: 556px;
    top: 460px;
}
#k239 {
	position: absolute;
	left: 447px;
	top: 463px;
}
#k240 {
	position: absolute;
	left: 429px;
	top: 475px;
	color:#00CCFF;
}
#k240 a {
	color:#00CCFF;
}
#k241 {
    position: absolute;
    left: 532px;
    top: 476px;
}
#k242 {
	position: absolute;
	left: 430px;
	top: 490px;
	color:#b0a43b;
}
#k242 a {
	color:#b0a43b;
}
#k243 {
    position: absolute;
    left: 541px;
    top: 491px;
}
#k244 {
    position: absolute;
    left: 469px;
    top: 524px;
    color: #cd5874;
}
#k244 a {
	color:#cd5874;
}
#k245 {
    position: absolute;
    left: 443px;
    top: 506px;
}
#k246 {
    position: absolute;
    left: 511px;
    top: 524px;
    color: #779a5a;
}
#k246 a {
	color:#779a5a;
}
#k247 {
    position: absolute;
    left: 528px;
    top: 542px;
}


#particles-js {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0px;
    top: 0px;
    overflow: hidden;
}




#sidenav-toggle {
  width:40px;
  right: 20px;
  height: 35px;
  position: fixed;
  z-index: 999119;
  margin: 30px auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#sidenav-toggle span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #ddd;
    text-shadow: 0px 2px 3px transparent;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}


#sidenav-toggle span:nth-child(1) {
  top: 0px;
}

#sidenav-toggle span:nth-child(2) {
  top: 10px;
}

#sidenav-toggle span:nth-child(3) {
  top: 20px;
}

#sidenav-toggle.open span:nth-child(1) {
  top: 10px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

#sidenav-toggle.open span:nth-child(2) {
  opacity: 0;
  left: -60px;
}

#sidenav-toggle.open span:nth-child(3) {
  top: 10px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.sidenav {
	background:rgba(38,38,38,0.9);
	display:block;
	font-size:16px;
	font-weight:400;
	height:100%;
	right:0;
	position:fixed;
	overflow:auto;
	transform:translate(300px, 0);
	transition:transform .3s;
	top:0;
	width:300px;
	z-index:100000;
}
.sidenav.show {
	transform:translate(0, 0)
}
.sidenav-brand {
	background:rgba(38,38,38,0.8);
	color:#fff;
	font-size:1.2em;
	font-weight:300;
	line-height:32px;
	width:100%;
	text-align:left;
	padding:75px 25px 0px;
}

.sidenav-brand span {
	font-weight:600;
	font-size:inherit;
	float:right;	
}

.sidenav-dropdown-icon.show {
	display:block
}
.sidenav-overlay {
	background:rgba(0,0,0,0.4);
	display:none;
	height:100%;
	left:0;
	position:fixed;
	top:0;
	width:100%;
	z-index:99
}
.sidenav-no-scroll {
	overflow:hidden!important
}

.get-started {
  border:2px solid #31809B;
  color:#9BDBF8;
  padding:7px 20px;
    font-weight: 500;
  text-align:center;
  font-size:15px;
  margin:15px 0px 30px;
  border-radius:5px;
    transition: all 0.5s;
  display:inline-block;	
}
.get-started:hover {
	border-color:#3C6;
	color:#fff;	
}
::-webkit-scrollbar-track {
    background:#999;	
}
::-webkit-scrollbar {
    width: 5px;
} 
/* Handle */
::-webkit-scrollbar-thumb {
  background:#666;	
}


#address {
    font-size: 25px;
    font-weight: 300;
}

.drilldown {
  overflow: hidden;
  width: 100%;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
.drilldown ul.drilldown-root {
	padding:0px;
	margin:0px;	
}
.drilldown ul.drilldown-root li {
	position:relative !important;
	width:100%;
	float:left;
}

.drilldown a {
	background:transparent;
	padding:15px 20px;
	width:100%;
	float:left;
	font-size:14px;
	font-weight:300;
	text-decoration:none;
	color:#fff;	
	border-top:1px solid #333;
}
.drilldown a:hover {
	background:#1d1d1d;
	color:#fff;	
}
.drilldown span {
	cursor:pointer;
	color:#fff;
	font-size:15px;	
}
.drilldown span.drilldown-more {
	position:relative;
	right:0px;
    float: left;
    width: 100%;
	top:0px;
    border-top: 1px solid #333;
	padding:16px 25px 16px 20px;
	font-size:15px;	
    font-weight: 300;
}
.drilldown span.drilldown-more:hover {
    background: #1d1d1d;
    color: #fff;
}
.drilldown span.drilldown-more .text-right {
    position: absolute;
    right: 18px;
    top: 18px;
}

.drilldown-footer {
	float:left;
	width:100%;
	color:#666;
	margin:50px 0px;
	text-align:center;
}
.drilldown-footer h1 {
	font-size:13px;
	font-weight:500;
	text-transform:capitalize;
	letter-spacing:0px;
		
}
.drilldown-sub {
  display: none;
}
.drilldown-back {
  font-weight: bold;
  padding:15px 20px;
  background:#222;
  font-weight: 300;
  color:#fff;
  float:left;
  width:100%;
}

.center-things {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wrapper.service {
    padding: 0px 0px;
    text-align: center;
} 
.wrapper.service h4 {
    width: 100%;
    float: left;
    font-size: 20px;
    font-weight: 300;
    margin: 20px 0px;
}
.wrapper.service ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
    line-height: 35px;
}

.wrapper.service ul li a {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}


.wrapper {
    height: 100%;
    width: 100%;
font-family: 'Kanit', sans-serif;
    color: #999;
    padding:0px 30px;
    position: relative;
    z-index: 99999;
    line-height: 30px;
    font-size: 14px;
    font-weight: 400;
}
.wrapper_proc {
    width: 90%;
    position: absolute;
    margin: auto 5%;
    z-index: 991;
    top: 0px;
}
.wrapper h1 {
    color: #999;
    text-align: center;
    font-size: 30px;
    margin: 40px 0px;
    font-weight: 300;
    line-height: 50px;
}

.process_wrap {
    float: left;
    width: calc(100% / 9);
    padding:5px;
}
.process {
    background: rgba(256,256,256,0.05);
    text-align: center;
    
    border: 1px solid transparent;
    padding: 20px 20px 10px 20px;
}
.process p {
    height: 160px;
    display: none
}
.process img {
    margin: auto;
    width: 100%;
    cursor: pointer;
}


/*! lightslider - v1.1.3 - 2015-04-14
* https://github.com/sachinchoolur/lightslider
* Copyright (c) 2015 Sachin N; Licensed MIT */
/** /!!! core css Should not edit !!!/**/ 

.lSSlideOuter {
    overflow: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}
.lightSlider:before, .lightSlider:after {
    content: " ";
    display: table;
}
.lightSlider {
    overflow: hidden;
    margin: 0;
}
.lSSlideWrapper {
    max-width: 100%;
    overflow: hidden;
    position: relative;
}
.lSSlideWrapper > .lightSlider:after {
    clear: both;
}
.lSSlideWrapper .lSSlide {
    -webkit-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    -webkit-transition: all 1s;
    -webkit-transition-property: -webkit-transform,height;
    -moz-transition-property: -moz-transform,height;
    transition-property: transform,height;
    -webkit-transition-duration: inherit !important;
    transition-duration: inherit !important;
    -webkit-transition-timing-function: inherit !important;
    transition-timing-function: inherit !important;
}
.lSSlideWrapper .lSFade {
    position: relative;
}
.lSSlideWrapper .lSFade > * {
    position: absolute !important;
    top: 0;
    left: 0;
    z-index: 9;
    margin-right: 0;
    width: 100%;
}
.lSSlideWrapper.usingCss .lSFade > * {
    opacity: 0;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-transition-duration: inherit !important;
    transition-duration: inherit !important;
    -webkit-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-timing-function: inherit !important;
    transition-timing-function: inherit !important;
}
.lSSlideWrapper .lSFade > *.active {
    z-index: 10;
}
.lSSlideWrapper.usingCss .lSFade > *.active {
    opacity: 1;
}
/** /!!! End of core css Should not edit !!!/**/

/* Pager */
.lSSlideOuter .lSPager.lSpg {
    margin: 10px 0 0;
    padding: 0;
    text-align: center;
}
.lSSlideOuter .lSPager.lSpg > li {
    cursor: pointer;
    display: inline-block;
    padding: 0 5px;
}
.lSSlideOuter .lSPager.lSpg > li a {
    background-color: #222222;
    border-radius: 30px;
    display: inline-block;
    height: 8px;
    overflow: hidden;
    text-indent: -999em;
    width: 8px;
    position: relative;
    z-index: 99;
    -webkit-transition: all 0.5s linear 0s;
    transition: all 0.5s linear 0s;
}
.lSSlideOuter .lSPager.lSpg > li:hover a, .lSSlideOuter .lSPager.lSpg > li.active a {
    background-color: #428bca;
}
.lSSlideOuter .media {
    opacity: 0.8;
}
.lSSlideOuter .media.active {
    opacity: 1;
}
/* End of pager */

/** Gallery */
.lSSlideOuter .lSPager.lSGallery {
    list-style: none outside none;
    padding-left: 0;
    margin: 0;
    overflow: hidden;
    transform: translate3d(0px, 0px, 0px);
    -moz-transform: translate3d(0px, 0px, 0px);
    -ms-transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    -o-transform: translate3d(0px, 0px, 0px);
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.lSSlideOuter .lSPager.lSGallery li {
    overflow: hidden;
    -webkit-transition: border-radius 0.12s linear 0s 0.35s linear 0s;
    transition: border-radius 0.12s linear 0s 0.35s linear 0s;
}
.lSSlideOuter .lSPager.lSGallery li.active, .lSSlideOuter .lSPager.lSGallery li:hover {
    border-radius: 5px;
}
.lSSlideOuter .lSPager.lSGallery img {
    display: block;
    height: auto;
    max-width: 100%;
}
.lSSlideOuter .lSPager.lSGallery:before, .lSSlideOuter .lSPager.lSGallery:after {
    content: " ";
    display: table;
}
.lSSlideOuter .lSPager.lSGallery:after {
    clear: both;
}
/* End of Gallery*/

/* slider actions */
.lSAction > a {
    width: 32px;
    display: block;
    top: 50%;
    height: 32px;
    background-image: url('../images/controls.png');
    cursor: pointer;
    position: absolute;
    z-index: 99;
    margin-top: -16px;
    opacity: 0.5;
    -webkit-transition: opacity 0.35s linear 0s;
    transition: opacity 0.35s linear 0s;
}
.lSAction > a:hover {
    opacity: 1;
}
.lSAction > .lSPrev {
    background-position: 0 0;
    left: 10px;
}
.lSAction > .lSNext {
    background-position: -32px 0;
    right: 10px;
}
.lSAction > a.disabled {
    pointer-events: none;
}
.cS-hidden {
    height: 1px;
    opacity: 0;
    filter: alpha(opacity=0);
    overflow: hidden;
}


/* vertical */
.lSSlideOuter.vertical {
    position: relative;
}
.lSSlideOuter.vertical.noPager {
    padding-right: 0px !important;
}
.lSSlideOuter.vertical .lSGallery {
    position: absolute !important;
    right: 0;
    top: 0;
}
.lSSlideOuter.vertical .lightSlider > * {
    width: 100% !important;
    max-width: none !important;
}

/* vertical controlls */
.lSSlideOuter.vertical .lSAction > a {
    left: 50%;
    margin-left: -14px;
    margin-top: 0;
}
.lSSlideOuter.vertical .lSAction > .lSNext {
    background-position: 31px -31px;
    bottom: 10px;
    top: auto;
}
.lSSlideOuter.vertical .lSAction > .lSPrev {
    background-position: 0 -31px;
    bottom: auto;
    top: 10px;
}
/* vertical */


/* Rtl */
.lSSlideOuter.lSrtl {
    direction: rtl;
}
.lSSlideOuter .lightSlider, .lSSlideOuter .lSPager {
    padding-left: 0;
    list-style: none outside none;
}
.lSSlideOuter.lSrtl .lightSlider, .lSSlideOuter.lSrtl .lSPager {
    padding-right: 0;
}
.lSSlideOuter .lightSlider > *,  .lSSlideOuter .lSGallery li {
    float: left;
}
.lSSlideOuter.lSrtl .lightSlider > *,  .lSSlideOuter.lSrtl .lSGallery li {
    float: right !important;
}
/* Rtl */

@-webkit-keyframes rightEnd {
    0% {
        left: 0;
    }

    50% {
        left: -15px;
    }

    100% {
        left: 0;
    }
}
@keyframes rightEnd {
    0% {
        left: 0;
    }

    50% {
        left: -15px;
    }

    100% {
        left: 0;
    }
}
@-webkit-keyframes topEnd {
    0% {
        top: 0;
    }

    50% {
        top: -15px;
    }

    100% {
        top: 0;
    }
}
@keyframes topEnd {
    0% {
        top: 0;
    }

    50% {
        top: -15px;
    }

    100% {
        top: 0;
    }
}
@-webkit-keyframes leftEnd {
    0% {
        left: 0;
    }

    50% {
        left: 15px;
    }

    100% {
        left: 0;
    }
}
@keyframes leftEnd {
    0% {
        left: 0;
    }

    50% {
        left: 15px;
    }

    100% {
        left: 0;
    }
}
@-webkit-keyframes bottomEnd {
    0% {
        bottom: 0;
    }

    50% {
        bottom: -15px;
    }

    100% {
        bottom: 0;
    }
}
@keyframes bottomEnd {
    0% {
        bottom: 0;
    }

    50% {
        bottom: -15px;
    }

    100% {
        bottom: 0;
    }
}
.lSSlideOuter .rightEnd {
    -webkit-animation: rightEnd 0.3s;
    animation: rightEnd 0.3s;
    position: relative;
}
.lSSlideOuter .leftEnd {
    -webkit-animation: leftEnd 0.3s;
    animation: leftEnd 0.3s;
    position: relative;
}
.lSSlideOuter.vertical .rightEnd {
    -webkit-animation: topEnd 0.3s;
    animation: topEnd 0.3s;
    position: relative;
}
.lSSlideOuter.vertical .leftEnd {
    -webkit-animation: bottomEnd 0.3s;
    animation: bottomEnd 0.3s;
    position: relative;
}
.lSSlideOuter.lSrtl .rightEnd {
    -webkit-animation: leftEnd 0.3s;
    animation: leftEnd 0.3s;
    position: relative;
}
.lSSlideOuter.lSrtl .leftEnd {
    -webkit-animation: rightEnd 0.3s;
    animation: rightEnd 0.3s;
    position: relative;
}
/*/  GRab cursor */
.lightSlider.lsGrab > * {
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: -o-grab;
  cursor: -ms-grab;
  cursor: grab;
}
.lightSlider.lsGrabbing > * {
  cursor: move;
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: -o-grabbing;
  cursor: -ms-grabbing;
  cursor: grabbing;
}
#adaptive {
    width: 70%;
    padding: 0px 0xp;
    height: 100vh;
    padding: 0px;
    font-size: 16px;
    font-weight:300;
    float: left;
    line-height: 35px;
    text-align: center;
}

#adaptive h5 {
    font-size: 30px;
    float: left;
    margin: 30px 0px;
    font-weight: 300;
    line-height: 50px;
    width: 100%;
}
#adaptive a {
    color: #fff;
    margin: 30px 0px;
    display: inline-block;
}



#testimonials li {
    
    font-weight: 400;
    background: rgba(256,256,256,0.2);
}

#testimonials h5 {
    font-size: 17px;
    width: 100%;
    font-weight: 400;
    margin: 20px 0px;
    line-height: 30px;
}
#testimonials div {
    padding: 50px 60px;
    height: 400px;
    font-size: 12px;
    display: flex;
    background: rgba(256,256,256,0.2);
    flex-direction: column;
    justify-content: center;
}