*{margin:0; padding:0;}
[v-cloak]{ display: none!important; }
html{
	background-color: #F8F7FB;
	color:#200B4F;
}
html, input, select, button, textarea{
	font-family: 'Space Grotesk', sans-serif;
	font-size:14pt;
	font-weight:300;
}
input, textarea, select, button, .btn{
	font-size:1rem;
}

:root {
	--noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 2000 2000' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
	--noise-size: 2000px;
}

/*maybe make h2, h3 semibold 600*/
h1, h2, h3{ 
	font-weight:700;
	font-size: 2em;
}
h1{ text-transform:uppercase; }
h2{ font-size: 1.5em; }
h3, h4{ font-size:1.2em; }
h4{ font-weight:400; }
h5{ font-weight:400; font-size:1.1em; }
h6{ font-weight:700; font-size:1em; }

b{ font-weight:400; }
b b, b.strong{ font-weight:700; }

h1, h2, h3, h4, h5, h6, p, li{
	margin-bottom:1em;
}
p.last{ margin-bottom:0; }
.content > h2{ margin-bottom:0.5em; }
input, textarea, .textbox, select, button, .btn{
	margin-bottom:1rem;
}
input, textarea, .textbox, select{ margin-top:0.5rem; }
form .group{
	margin-top:0.5em;
}

img{ max-width:100%; }
ol, ul{
	list-style-position:outside;
	padding-left:1.24em;
}
ul.semantic{
	list-style:none;
	padding:0;
}
hr{ 
	border:0;
	border-top:1px solid #d6c9e3;
	margin:1em 0;
}
a{
	color:#fe5858;
	text-decoration:underline;	 
}
/*a:visited{ color:#6f45cf; }*/
.dark a, .footer a{ color:#a791d9; }
.nowrap{ white-space:nowrap; }
.rel{ position:relative; }
.invisible{ opacity:0; }
.visible{ opacity:1; }
.transitionable{ transition:all 0.2s linear; }
.present-invisible{ position: absolute; top:0; left:0; opacity:0; }
.preload{
	position:absolute;
	width:1px; height:0px;
	opacity:0;
	pointer-events:none;
}

.softcorner,
input, textarea, .textbox, 
.checklabel .checkbox, .btn, button,
.ico, .iconed:before,
.pricing-table .ribbon .highlight,
.menu .profile .actions,
.app-search-list,
.bookademo, .bookademo .inside,
html.dashboard .tutorial li .title:before, html.dashboard .tutorial li .title:after,
.dashboard-menu-items .app .image, .app-meta .decoration,
.how .example .image{
	border-radius:3px;
}
.card,
.how .page,
.pricing-table li,
.status-message,
.app-message .box,
.tab, .tab:before{
	border-radius:4px;
}

.gradientcontainer,
html.dashboard .tutorial .step4{
	background: linear-gradient(90deg, #6B29FF, #935efe, #fcdbdd, #FE827A, #6B29FF); 
	background-size:200% auto;
		/*other gradients*/
		/*background: linear-gradient(90deg, #6B29FF, #935efe, #fcdbdd, #FE827A); */ 
	animation: gradientmove linear 10s infinite;
}
.gradientcontainer.smallobject{
	background-size:1600% auto;
	animation-name:gradientmovebig;
	animation-duration:150s;
}

input, textarea, .textbox, .btn, a.btn, button{ 
	border: none;
	outline: none;
	/*padding:0.65em 1em;*/
	padding:0.5em 1em;
	box-sizing:border-box;
	line-height:1.5;
	vertical-align:middle;
}
textarea{ vertical-align:top; }
input[type="file"]{
	height:2.5em;
}

input, textarea, .textbox{
	max-width:100%;
	/*
	background:rgba(39,18,85,0.8);
	color:#F8F7FB;
	*/
	background:#F8F7FB;
	color:#200B4F;
	transition:all 0.1s cubic-bezier(0.7, 0, 1, 1);
	outline: 1px solid rgb(167, 95, 155, 0.4); /*so only the opacity would transition, not width*/ 
}
input.light, textarea.light, .textbox.light{
	background:rgba(255,255,255,0.2);
	color:#F8F7FB;	
	outline: 1px solid rgba(255,255,255, 0);
}
/*
input::placeholder{
	color:rgba(248, 247, 251, 0.7);
	font-style:italic;
}
*/
input::placeholder{ 
	font-weight:400;
	color:#5b4c7d;
	font-style:normal;
	transition:all 0.2s linear;
}
input:focus::placeholder{
	color:rgba(91, 76, 125, 0.5);
}
input:placeholder-shown { text-overflow: ellipsis; }
/*regular*/
input[type="text"]:focus, input[type="text"]:active,
input[type="password"]:focus, input[type="password"]:active,
input[type="email"]:focus, input[type="email"]:active,
input[type="number"]:focus, input[type="number"]:active,
input[type="tel"]:focus, input[type="tel"]:active,
textarea:focus, textarea:active,
.textbox:focus, .textbox:active{
	outline: 1px solid rgb(167, 95, 155, 0.4);
	box-shadow: rgba(39,18,85,0.2) 0 0 1em 0.2em;
	transition-timing-function:cubic-bezier(0, 0, 0.3, 1);
}
/*light*/
input.light[type="text"]:focus, input.light[type="text"]:active,
input.light[type="password"]:focus, input.light[type="password"]:active,
input.light[type="email"]:focus, input.light[type="email"]:active,
input.light[type="number"]:focus, input.light[type="number"]:active,
input.light[type="tel"]:focus, input.light[type="tel"]:active,
textarea.light:focus, textarea.light:active,
.textbox.light:focus, .textbox.light:active{
	outline: 1px solid rgba(255,255,255, 0.15);
	box-shadow: rgba(255, 255, 255, 0.15) 0 0 1em 0.2em;
}

input.error, textarea.error, .textbox.error,
input.touched:invalid, textarea.touched:invalid{
	outline-color: #FE5858; 
}

input[type="text"]:disabled, input[type="password"]:disabled, input[type="email"]:disabled, input[type="number"]:disabled, input[type="tel"]:disabled, textarea:disabled,
input[type="text"]:read-only, input[type="password"]:read-only, input[type="email"]:read-only, input[type="number"]:read-only, input[type="tel"]:read-only, textarea:read-only,
.textbox:read-only{
	box-shadow:none;
}

.checklabel{ 
	position:relative; 
	cursor:pointer;
}
.checklabel.inactive{ pointer-events:none; }
.checklabel input[type="checkbox"]{
	width:0; height:0; opacity:0; position:absolute;
}
.checklabel .checkbox{
	position:relative;
	box-sizing:border-box;
	
	vertical-align: baseline;
	margin-bottom: -0.1em;
	margin-right:0.25em;
	
	content:" ";display:inline-block;
	width:1em; height:1em;
	outline: 1px solid rgb(167, 95, 155, 0.4);
	
	transition: background 250ms cubic-bezier(0.4,0,0.23,1), box-shdow 0.1s cubic-bezier(0.7, 0, 1, 1);
}
.checklabel input[type="checkbox"]:focus ~ .checkbox{
	box-shadow: rgba(39,18,85,0.2) 0 0 1em 0.1em;
}
.checklabel input[type="checkbox"]:checked ~ .checkbox{
	/*border: .5em solid rgb(167, 95, 155, 0.4);*/
	background:rgb(167, 95, 155, 0.4);
}
.checklabel input[type="checkbox"]:disabled ~ span{
	opacity:0.5;
}
.checklabel input[type="checkbox"]:checked ~ .checkbox:before{
	content: "";
	position: absolute;
	top: 0.4em;
	left: 0.2em;
	border-right: 0.15em solid transparent;
	border-bottom: 0.15em solid transparent;
	transform: rotate(45deg);
	transform-origin: 0% 100%;
	animation: checkbox-check 0.1s cubic-bezier(.4,.0,.23,1) forwards;
}
@keyframes checkbox-check{
	0%{
		width: 0;
		height: 0;
		border-color: #935EFE;
		transform: translate3d(0,0,0) rotate(45deg);
	}
	33%{
		width: .2em;
		height: 0;
		transform: translate3d(0,0,0) rotate(45deg);
	}
	100%{    
		width: .2em;
		height: .5em;    
		border-color: #935EFE;
		transform: translate3d(0,-.5em,0) rotate(45deg);
	}
}

button, .btn, a.btn, input[type="submit"]{
	display:inline-block;
	text-decoration:none;
	text-align:center;
	
	position:relative;
	overflow:hidden;
	font-weight:400;
	cursor:pointer;
	
	background:	#FF746F;
	background: linear-gradient(113deg, #FE827A 0%, #FE5858 50%, #FE5858 100%);
	background-size:200%;
	color:#FDE4E7;
	
	transition: all 0.13s linear;
	transition-property:background, box-shadow
}
.btn.minsize, button.minsize{ min-width:6em; }
button.inactive, .btn.inactive, a.btn.inactive, input[type="submit"].inactive{
	pointer-events:none;
	opacity:0.7;
}
button.inactive_eventable, .btn.inactive_eventable, a.btn.inactive_eventable, input[type="submit"].inactive_eventable{
	opacity:0.7;
	cursor:default;
}
button.pink, .btn.pink, a.btn.pink, input[type="submit"].pink{
	background-color: #da72a7;
	background-image: linear-gradient(113deg, #FF7676 0%, #9F6AF5 50%, #9F6AF5 100%);
}
button.white, .btn.white, a.btn.white, input[type="submit"].white{
	background: #F8F7FB;
	color:#200B4F;
}
button.transparent, .btn.transparent, a.btn.transparent, input[type="submit"].transparent{
	background: rgba(248, 247, 251, 0.5);
	outline:1px solid #f1edf9;
	padding:calc(0.5em - 1px) 1em; /*nitpicking*/
	color: #210b4e;
}
button.stronger, .btn.stronger, a.btn.stronger, input[type="submit"].stronger{
	outline-color:#d6c9e3; 
}
button > *, .btn > *, input[type="submit"] > *{ vertical-align:middle; }

button:not(.inactive_eventable):hover, .btn:not(.inactive_eventable):hover, input[type="submit"]:not(.inactive_eventable):hover,
button:not(.inactive_eventable):focus, .btn:not(.inactive_eventable):focus, input[type="submit"]:not(.inactive_eventable):focus{
	background-color:#FE5858;
	background-position:100%;
	transition:background-position 0.2s cubic-bezier(0.29, 0.01, 0.41, 1.02);
}
button.pink:not(.inactive_eventable):hover, .btn.pink:not(.inactive_eventable):hover, input[type="submit"].pink:not(.inactive_eventable):hover,
button.pink:not(.inactive_eventable):focus, .btn.pink:not(.inactive_eventable):focus, input[type="submit"].pink:not(.inactive_eventable):focus{
	background-color:#9F6AF5;
}
button.white:not(.inactive_eventable):hover, .btn.white:not(.inactive_eventable):hover, input[type="submit"].white:not(.inactive_eventable):hover,
button.white:not(.inactive_eventable):focus, .btn.white:not(.inactive_eventable):focus, input[type="submit"].white:not(.inactive_eventable):focus{
	background-color:#ebe9ef;
}
button.transparent:not(.inactive_eventable):hover, .btn.transparent:not(.inactive_eventable):hover, input[type="submit"].transparent:not(.inactive_eventable):hover,
button.transparent:not(.inactive_eventable):focus, .btn.transparent:not(.inactive_eventable):focus, input[type="submit"].transparent:not(.inactive_eventable):focus{
	background: rgba(248, 247, 251, 0.8);
}
button.stronger:not(.inactive_eventable):hover, .btn.stronger:not(.inactive_eventable):hover, a.btn.stronger:not(.inactive_eventable):hover, input[type="submit"].stronger:not(.inactive_eventable):hover{
	background:#f1eaf9;
}
button:not(.inactive_eventable):active, .btn:not(.inactive_eventable):active, input[type="submit"]:not(.inactive_eventable):active{
	box-shadow: inset 0.075em 0.075em 0 0.005em rgba(0,0,0,0.2);
	padding:0.55em 0.93em 0.45em 1.07em;  
}
button.transparent:not(.inactive_eventable):active, .btn.transparent:not(.inactive_eventable):active, input.transparent[type="submit"]:not(.inactive_eventable):active{
	box-shadow: inset 0.075em 0.075em 0 0.005em rgba(0,0,0,0.05);
	padding:calc(0.55em - 1px) 0.93em calc(0.45em - 1px) 1.07em;
}
.form-errors{
	list-style:none; 
	padding:0;
	color:#FE5858;	
	margin-top: -0.6rem;
	text-align: right;
	max-height:4em; /*for animation*/
	overflow:hidden;
	
	transition:opacity 0.2s linear 0.4s, max-height 0.8s ease-in;
}
.form-errors.hidden{ 
	opacity:0;
	max-height:0; 
}
.status-message{
	padding:1em;
	background:rgba(191, 117, 179, 0.1);
	background:linear-gradient(90deg, rgba(147, 94, 254, 0.15), rgba(254, 130, 122, 0.15));
}
.status-message.error{
	background:#FE5858;
	color:#F8F7FB;
}
.status-message.error a{
	color:#F8F7FB;
}
.external-circle{
	display:inline-block;
	width:1.5em; height:1.5em;
	border-radius:1em;
	margin-left: 0.8rem;
	
	background:#F8F7FB url('/img/arrow-gradient.svg') center center no-repeat;
	background-size:35%;
}

.app-message{
	position:fixed;
	left:0; top:0;
	width:0; height:100%;
	/*overflow:hidden;*/
	overflow: auto;
	display:flex;
	align-items:center;
	justify-content:center;
	
	transition:width 0s linear;
	transition-delay:0.15s;
	
	z-index:30;
}
.app-message .cover{
	position:absolute;
	width:100%; height:100%; left:0; top:0;
	background:rgba(0,0,0,0);
}
.app-message .box{
	position:relative;
	background:#F8F7FB;
	border:1px solid #d6c9e3;
	box-shadow: rgba(0,0,0,0.08) 0.5em 0.5em 0 0;
	box-shadow: rgba(0,0,0,0.08) 1em 1em 0 0;
	text-align:center;
	
	box-sizing:border-box;
	margin:auto;
	padding:1em;
	padding-bottom:0; /*buttons/image take care of this*/
	width:32em;
	max-width:90vw;
	/*max-height:80vh;*/
	
	transition:all 0.15s ease-in;
	transition-property:transform, opacity;
	
	opacity:0;
	transform:translateY(2em);
}
.app-message .inside{
	overflow:auto;
}
.app-message.wide .box{
	width: 52em;
	max-height: 90vh;
}

.app-message .title{ font-size:1.2rem; }
.app-message .actions{ margin-top:1.5em; }
.app-message .actions .confirmation{ display:none; }
.app-message.confirmation .actions .confirmation{ display:inline-block; }
.app-message.confirmation .actions .notice{ display:none; }

.app-message .actions .btn{ margin-bottom:1.2rem; }
.app-message .btn{
	margin-left:0.5em;
	margin-right:0.5em;
}
.message-active .app-message{
	width:100%;
	transition-delay:0s;
}
.message-active body{ overflow:hidden; }
.message-active .app-message .box{
	transform:translateY(0);
	opacity:1;
	transition-timing-function:ease-out;
	overflow:auto;
}
.message-active .main, .message-active .header, .message-active .footer, .message-active .menu, .message-active .menutoggle{
	filter:blur(3px);
}

.app-message .app{ font-weight:bold; }

.expander .top{
	position:relative;
	cursor:pointer;
}
.expander .top .label{ display:block; }
.expander .handle, .datepick .handle{
	position:absolute;
	right:0.35em;
	top:50%;
	margin-top:-0.5em;
	height:1em; width:1em;
	background:url('/img/dropdown.svg') center center no-repeat;
	background-size:contain;
	transform:rotate(-90deg);
	transition:all 0.15s cubic-bezier(0.6, 0.01, 1, 1);
}
.expander .target{
	overflow:hidden;
	max-height:0; 
	transition:all 0.15s cubic-bezier(0.6, 0.01, 1, 1);
}
.add-spawn .expander .target{
	transition-duration:0.4s;
}
.expander .target .contents{ padding-top:0.5em; }
.expander.open .handle, .datepick.open .handle, .dropdown.open .expander .handle{
	transform:rotate(0.001deg);
	transition-timing-function: cubic-bezier(0, 0, 0.4, 1);
}
.expander.open .target, .dropdown.open .expander .target{ 
	max-height:none; 
	transition-timing-function: cubic-bezier(0, 0, 0.4, 1);
}
.expander.inactive .handle{ display:none; }
.expander.inactive{ pointer-events:none; }

.highlightwrap{
	position:relative;
}
.superhighlight{
	background:#6B29FF;
	background: linear-gradient(90deg, #6B29FF, #0f1fd9); /*#f87384*/
	color:white;
	display:inline-block;
	font-size:0.6em;
	padding:0 0.3em;
	font-weight:400;
	margin-left:0.1em;
	transform:translateY(-0.4rem);
}
/* rainbow text */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.rainbow{
		background:#6B29FF;
		background: linear-gradient(90deg, #6B29FF, #0f1fd9); /*#f87384*/
		-webkit-background-clip: text;
		background-clip:text;
		-webkit-text-fill-color: transparent;
		text-fill-color:transparent;
		color:transparent;
	}
	.rainbow.animated{
		background-image:linear-gradient(90deg, #6B29FF, #935efe, #fcdbdd, #FE827A, #6B29FF);
		background-size:200% auto;
		background-attachment:fixed;
		animation: gradientmove linear 10s infinite;
	}
	.rainbow.animated.darker{
		background-image:linear-gradient(90deg, #6B29FF, #935efe, #cf4bcb, #FE827A, #6B29FF);
	}
}
/* inline highlighter */
.highlight{
	position:relative;
	display: inline;
	padding:0 0.2em;
}
.highlight:not(.tilted),
.highlight.btn:not(.tilted),
.highlight.tilted:before{
	color: #F8F7FB;
	background: linear-gradient(90deg, #6B29FF, #935efe, #fcdbdd, #FE827A, #6B29FF); 
	background-size:200% auto;
		/*other gradients*/
		/*background: linear-gradient(90deg, #6B29FF, #935efe, #fcdbdd, #FE827A); */ 
		/*background: url('/img/noisy-background-gradient.jpg'); background-size:100% auto;*/
		/*background: url('/img/noisy-background-gradient.svg'); animation: fixgradientmove linear 60s infinite;*/
		/*background: url('/img/noisy-background-gradient-repeating.jpg'); animation: fixgradientmove linear 60s infinite; */ 
	background-attachment: fixed;
	animation: gradientmove linear 10s infinite;

	/*white-space: pre-wrap;*/
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.highlight.smallobject{
	background-size:1600% auto;
	animation-name:gradientmovebig;
	animation-duration:113s;
}
@keyframes gradientmove {
	0% { background-position: 0 0; }
	100% { background-position: 200% 0; }
}
@keyframes gradientmovebig {
	0% { background-position: 0 0; }
	100% { background-position: 1600% 0; }
}

@keyframes fixgradientmove {
	0% { background-position: 0 0; }
	100% { background-position: -1200px 0; }
}
.highlight.less{
	background:#9d82d3;
}
/*noisy version works only work on a single line*/
.highlight.noisy{
	position:relative;
	white-space:nowrap;
}
.highlight.noisy:before{ 
	content:""; position:absolute; left:0; top:0; width:100%; height:100%;
	background:var(--noise) repeat;
	background-size:var(--noise-size);
	mix-blend-mode:overlay; 
}
/*tilted highlight, also works only on a single line/block. requires extra span so the background would not cover the text*/
.highlight.tilted{
	position:relative;
	display: inline-block;
	color: #F8F7FB;
}
.highlight.tilted:before{
	content:""; position:absolute;
	/* left:0; top:0; width:100%; height:100%; safari does not like this*/
	top:0; right:0; bottom:0; left:0;
	transform: rotate(-1deg);
}
.highlight.tilted span{ position:relative; }

.loading-image{
	height:2em;
	margin-left:0.1em;
}

.hide-belowtablets{ display:none; }
.hide-belowregulardesktops{ display:none; }

/* generic layout */
.main-menu-items .item,
.footer-items .item{ margin-bottom:0.25em; }
.header{
	padding:2em;
	max-width:1500px;
	margin-left:auto; margin-right:auto;
}
.header a{ text-decoration:none; }
.header .logo.full{ display:none; }
.logo{ height:2rem; }
.footer{
	background:#271255;
	color:rgba(248, 247, 251, 0.7);
}
.footer a:not(.btn){ text-decoration:none; }
.footer a:not(.btn):hover{ text-decoration:underline; }
.footer .logo{ 
	height:1.6em;
	margin-bottom:1em; 
}
.footer .title{ color:#F8F7FB; }
.footer .main-menu{ 
	margin:1em auto;
}
.footer .title, .footer .logo, .footer .copyright{
	margin-top:2rem;
}

.menu .main-menu-items{ margin-bottom:2em; }
.footer .main-menu-items,
.footer .footer-items,
.dashboard-menu-items ul,
.menu ul{
	list-style:none;
	padding:0;
	font-weight:400; 
}
.menu ul ul,
.dashboard-menu-items ul ul, .dashboard-menu-items ul .level2{
	font-weight:300;
	font-size:0.9em;
}
.sidebar ul ul a:not(.btn){ font-weight:300; }

.main-menu-items .new{
	display: inline-block;
	margin-left: 0.2em;
	margin-top: -0.2em;
	font-size:0.75em;
	vertical-align:super;
	color:#fe5959;
}

.dashboard-menu-items .item .with-icon:before{
	content:"";
	display: inline-block;
	vertical-align: middle;
	width: 1em;
	height: 1em;
	margin-right: 0.4em;
	margin-top: -0.25em;
	background: url('/img/library.svg') center center no-repeat;
	background-size: contain;
}
.dashboard-menu-items .apps .with-icon:before{
	background-image: url('/img/apps.svg');
}

.menutoggle{
	position:fixed;
	right:2em;
	top:2.05em;  
	height:1.8em;
	width:2em;
	cursor:pointer;
	z-index:9;
}
.menutoggle .line{
	width:100%;
	height:6px;
	background:linear-gradient(133deg, #d4bdfd, #f58398);
	position:absolute;
	left:0;
	transition: all 0.2s ease-in-out;
	transform-origin:0 100%;
}
.menutoggle .line:before{
	content:"";display:block;
	width:100%; height:100%; top:0; left:0;
	background:#210b4e;
	opacity:0;
	transition:all 0.2s linear;
}
.menutoggle .line:nth-of-type(1){
	top:0;
}
.menutoggle .line:nth-of-type(2){
	top:50%; margin-top:-3px;
}
.menutoggle .line:nth-of-type(3){
	bottom:0;
}
.menutoggle .line:last-of-type{
	margin-bottom:0;
}
.menu-active .menutoggle .line:nth-of-type(1){
	transform:rotate(45deg);
}
.menu-active .menutoggle .line:nth-of-type(2){
	transform: translateX(50%);
	opacity: 0;
}
.menu-active .menutoggle .line:nth-of-type(3){
	transform:rotate(-45deg);
	transform-origin:0 0;
}
.menu-active .menutoggle .line:before{ 
	opacity:1;
}
.menu{
	position:fixed;
	right:0; top:0; bottom:0;
	overflow:hidden;
	/*width:100%;
	max-width:0;*/
	width:0;
	background:#F8F7FB url('/img/gradient-spheres-noisy.jpg') center center no-repeat;
	color:#210b4e;
	/*opacity:0.4;*/
	
	transition:all 0.25s cubic-bezier(0.35, 0, 0.4, 1);
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	
	overflow-y:auto;
}
.menu-active .menu{                                            
	transition: all 0.35s cubic-bezier(0, 0, 0.3, 1);
	width:100%;
	opacity:1;
	z-index:10;
}
.menu-active .menutoggle{ z-index: 11; }
.menu-active, .menu-active body{
	overflow:hidden;
}
.menu .inside{ 
	width:100vw; /*to keep the items from jumping when menu opens up*/
	height:100%;
	box-sizing:border-box;
	padding:2em;
	overflow-y: auto;
	overflow-x: hidden;
	
	display: flex;
	flex-direction: column;
	justify-content: space-between; 
}
.menu .logo{
	max-height:1.7em; margin-top:0.05em;
	max-width:calc(100vw - 7.5em);
	display:block;
	margin-bottom:3em;
}
.menu a:not(.btn){
	color:#210b4e;
	text-decoration:none;
}
.menu ul{ list-style:none; padding:0; }
.menu .nav .item, .menu .nav .add-app,
.menu .profile .actions a:not(.btn){ 
	font-size:1.1em;
	margin-bottom:0.5em;
}
.menu .nav .apps{
	margin-bottom:0;
}
.menu .item:last-of-type{
	margin-bottom:0;
	margin-right:0;
}
.menu .item.active a{ 
	font-weight:bold;
}
.menu .auth{
	margin-top:2em;
}
.menu .auth .btn{
	width:100%;
	margin-bottom:0;
}
/* handled by .menu .item:last-of-type 0 margin
.menu .auth .item:last-of-type .btn{ 
	margin-bottom:0;
}
*/
.menu .profile a > * {
	vertical-align:middle;
}
.menu .profile .image{
	height:2.5em;
}
.menu .profile .name{
	min-width:2em;
	margin-left:1em;
	font-weight: 700;
	line-break: anywhere;
}
.menu .profile .name .entity{
	display: block;
	max-width: 100%;
	max-height: 1.15em;
	min-width: 4em;
	object-fit: contain;
	margin:auto;
	margin-top:0.5em;
	transform: translateY(-0.1em);
}
.menu .profile .actions{ margin-top:1em; }
.menu .profile .actions a{
	display:block;
}
.menu .profile .actions form{ margin-top:1em; }
.menu .profile a.edit{ display:none; }

/*not rendering main menu in the dashboard now*/
/*.menu.dashboard-version .main-menu-items{ display:none; }*/

.dashboard-menu-items .powered, .dashboard-menu-items .items{
	padding-bottom:2em;
	margin-bottom:2em;	
	border-bottom:1px solid rgba(248, 247, 251, 0.5);
}
.menu .dashboard-menu-items .items{ margin-bottom:0; }
.dashboard-menu-items .credits,
.dashboard-menu-items .powered .product{
	display:block;
	position:relative;
	padding: 0.5em;
	background: rgb(248, 247, 251, 0.25);
	border:1px solid #f1edf9;
	border-left-width:0;
	border-radius:3px;
	font-weight:300;
}
.menu .nav .credits{ margin-bottom:1em; }
.dashboard-menu-items .credits:before,
.spawns.listing .spawn .card:before{
	content: "";
	display: block;
	position: absolute;
	top: -1px;
	bottom:-1px;
	left: 0;
	width: 0.2em;
	background:linear-gradient(0deg, #A575FE 0%, #FF746F 100%);
}
.dashboard-menu-items .credits .num{ 
	float:right; 
	background:linear-gradient(315deg, #A575FE 0%, #FF746F 100%);
	padding:0 0.5em;
	color:#F8F7FB;
}
.dashboard-menu-items .powered, .menu .nav .powered{ font-size:1em; }
.dashboard-menu-items .powered .product{
	border-left-width:1px;
	margin-bottom:1em;
}
.dashboard-menu-items .powered .symbol{
	float: left;
	height: 2.5em;
	display: block;
	margin-right: 1em;
	border-radius: 3px;
}
.dashboard-menu-items .powered .name{ font-weight:400; }
.dashboard-menu-items .powered p a{ text-decoration:underline; }
.dashboard-menu-items .powered > *:last-child{ margin-bottom:0; }
.add-app{
	position:relative;
}
.add-app .adder{
	margin-bottom:0;
}
.dashboard-menu-items .add-app{
	cursor:pointer;
	height:2em;
}
.dashboard-menu-items .add-app:before{
	content:""; display:inline-block;
	width:1em; height:1em;
	background:url('/img/add-app.svg') center center no-repeat; 
	background-size:contain;
	color:#F8F7FB;
	vertical-align:middle;
	transition:all 0.15s cubic-bezier(0.7, 0, 1, 1);
	transform:rotate(0.01deg);
	margin-right:0.2em;
	
	margin-top: 0.45em;
	margin-bottom: 0.5em;
}
.dashboard-menu-items .add-app:hover:before{
	transform:rotate(90deg);
	transition-timing-function:cubic-bezier(0, 0, 0, 0.9);
}
.dashboard-menu-items .add-app .textual{
	vertical-align: middle;
	display: inline-block;
	line-height: 1.7;
	opacity: 0.75;
}
.dashboard-menu-items div:not(.app-search-list) .app{
	position:relative;
	margin-bottom:0.5em;
	padding-right:1.7em;
}
.apps .app .remove{
	position:absolute;
	right:0.2em; top:0.4em;
	width:1em; height:1em;
	/*background:url('/img/remove-app.svg') center center no-repeat;*/
	background:url('/img/close.svg') center center no-repeat;
	background-size:contain;
	vertical-align:middle; 
	transition:all 0.15s cubic-bezier(0.7, 0, 1, 1);
	transform:rotate(0.01deg);
	cursor:pointer;
}
.apps .app.removing .remove{ opacity:0.5; }
.apps .app .remove:hover{
	transform:rotate(90deg);
	transition-timing-function:cubic-bezier(0, 0, 0, 0.9);
}
/*@media (pointer: fine) {*/
@media (hover: hover) {
	.apps .app .remove{ display:none; }
	.apps .app:hover .remove{
		display:block;
	}
}
.dashboard-menu-items .app .image{ 
	height: 1.8em;
	vertical-align:middle; 
}
/*todo: move these to dashboard*/
.dashboard-menu-items .app[data-store=googleplay]:after,
.dashboard-menu-items .app[data-store=appstore]:after{
	content:""; display:block;
	position: absolute;
	width: 1em;
	height: 1em;
	top: 1.05rem;
	left: 1.05rem;
	background: transparent url('/img/googleplay.svg') center center no-repeat;
	background-size: 70% auto;
	filter: drop-shadow(-1px -1.5px rgba(248, 247, 251, 0.7));
}
.dashboard-menu-items .app[data-store=appstore]:after{
	background-image: url('/img/appstore.svg');
	filter: drop-shadow(-1px -1px rgba(248, 247, 251, 0.5));
}
.dashboard-menu-items .apps .textual{
	vertical-align:middle; 
	display:inline;
}
.dashboard-menu-items .app-searchable{
	position:absolute;
	top:1px; bottom:1px; right:1px;
	left:1.6em;
}
.dashboard-menu-items .app-search-list{
	left:-1.5em;
}
.dashboard-menu-items .add-app .adder{
	display:block;
	box-sizing:border-box;
	font-size:1em;
	width:100%; 
	margin:0;
	padding: 0.1em 0.5em 0.1em 1.8em; 
	height:100%;
}
.dashboard-menu-items .app-searchable:after{
	width: 1em;
	height: 1em;
	top:0.45em; left:0.45em;
}
.add-app .app_label{
	position: absolute;
	height: 2.3em; line-height:2.3;
	left: 0;
	right: 2px;
	top: 2px;
	margin-left: 2px;
	
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
	
	background: #F8F7FB url(/img/loading-dark.svg) 0.5em center no-repeat;
	background-size: auto 1em;
	padding-left: 2em;
	padding-right: 0.25em;
	/* font-style: italic; */
	/*color: rgba(32, 11, 79, 0.8);*/
	color: rgb(181 134 176);
	
	transition:padding 0.2s linear;
	display:none;
}
.dashboard-menu-items .add-app .app_label{
	height: 1.7em; line-height:1.7;
}
.add-app .loading .app_label{
	display:block;
}
.add-app .preselected .app_label{
	display:block;
	padding-left: 0.5em;
	background-image: url(/img/check.svg);
	background-position: right 0.5em center;
	color: rgba(32, 11, 79, 0.8);
}
.dashboard-menu-items .apps .close{
	position:absolute;
	top: 0.4em;
	right: 0.22em;
	background:url('/img/close.svg') center center no-repeat; 
	background-size:contain;
	width:1em; height:1em;
}


.badinput{
	animation: shake 0.39s ease-out both;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
}
@keyframes shake {
	87.5% { transform: translate3d(-1px, 0, 0); }
	75% { transform: translate3d(2px, 0, 0); }
	12.5%, 37.5%, 62.5% { transform: translate3d(-4px, 0, 0); }
	25%, 50% { transform: translate3d(4px, 0, 0); }
}

.app-searchable{ position:relative; }
.app-searchable:after{
	content: "";
	display: block;
	position: absolute;
	left: 0.65em; top: 0.65em;
	background: url(/img/search.svg?v=1) center center no-repeat;
	background-size: contain;
	width: 1.2em;
	height: 1.2em;
}
.app-searchable.loading:after,
.app-searchable.preselected:after{
	display:none;
}
.app-search-input{
	display:block;
	padding-left: 2.4em;
	padding-right: 1em;
	margin-top:0;
	width:100%;
}
.app-searchable .stores{
	position: absolute;
	right: 0;
	top: 100%;
}
.app-searchable .stores .store{
	margin-top: 0.35em;
	height:0.8em;
	opacity:0.8;
	margin-left:0.1em;
}
.app-search-list{
	position:absolute;
	left:0; right:0;
	top:100%;
	background:#F8F7FB;
	text-align:left;
	z-index:1;
}
.app-search-list ul{
	list-style:none;
	padding:0;
}
.app-search-list li,
.app-search-list .status{
	position:relative;
	margin:0;
	padding:0.3em 0.6em; margin:0;
}
.app-search-list li:first-of-type{ padding-top:0.6em; }
.app-search-list li:last-of-type{ padding-bottom:0.6em; }
.app-search-list li.marked{
	background:rgb(156 128 167 / 15%);
}
.app-search-list .app{ cursor:pointer; }
.app-search-list .app:after{ content:"";display:block;width:0;height:0;clear:both; }
.app-search-list .img{
	width:2em; height:2em;
	margin-right:0.4em;
	display:inline-block;
	border-radius:2px;
	float:left;
}
.app-search-list .status{
	font-size:0.9em;
	max-height:0;
	overflow:hidden;
	padding:0.5em 0.75em;
}
.app-search-list .status .loading-image{
	width: 1.3em;
	height: 1.3em;
	padding-right: 0.4em;
	opacity: 0.8;
	vertical-align: top;
}
.app-search-list .status .text{
	vertical-align:top;
}
.app-search-list .status:not(.shown){
	padding-top:0; padding-bottom:0;
}
.app-search-list .status.shown{
	max-height:3rem;
	transition:all 0.2s ease-out;
} 
.app-search-list .title,
.app-search-list .developer{
	font-size:0.8em;
	vertical-align: top;
	line-height:1.25;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.app-search-list .findhint{
	padding: 0.6em;
	font-size: 0.9em;
	border-top: 1px solid #eae5ef;
	display:none;
}
.app-search-list .findhint.shown{ display:block; }
.app-search-list .title{ font-weight:400; }
.app-search-list .developer{ transform: translateY(0.2em); }
.app-search-list .store{
	height: 1em;
	vertical-align: inherit;
	margin-right: 0.15em;
}

/*subpages generics*/
.section{ 
	position:relative;
	padding:2em 0;
}
.content{
	padding:1em; 
	max-width:1024px;
	margin:auto;
}
.section.preface .content{
	max-width:896px;
}

.ico, .iconed:before{
	display:inline-block;
	vertical-align:bottom;
	
	width:2em; height:2em;
	margin-right:0.5em;
	
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
}
.iconed:before{ content:""; }

.softshadow, .ico, .iconed:before,  
.how .steps .title:after{
	/*box-shadow: 0.3em 0.3em 0.5em 0.05em rgba(107, 40, 255, 0.16);*/
	/*box-shadow:0.4rem 0.4rem 0.6rem 0.06rem rgba(107, 40, 255, 0.16);*/
	box-shadow:0 0.4rem 0.6rem 0.1rem rgba(107, 40, 255, 0.16);
}

.card, .how .page{
	background:#F8F7FB;	
	box-shadow: rgba(0,0,0,0.08) 0.5em 0.5em 0 0;
	padding:1em;
	box-sizing:border-box;
}
.card{ margin-bottom:1em; }
a.post-try, .post-try{ display:none; }

.info{
	display:block;
	position:absolute;
	width:1em; height:1em;
	top:1em;right:1em;
	background:url('/img/info-plain.svg') center center no-repeat;
	background-size:contain;
}
.info .details{
	position: absolute;
	width: 12em;
	max-width:calc( 100vw - 6.5rem );
	top: 100%;
	right: 0;
	padding: 0.5em 1em;
	border-radius: 3px;
	font-size: 0.8em;
	text-align: left;
	background: #271255;
	color: #F8F7FB;
	transition:all 0.075s ease-in;
	pointer-events:none;
	opacity:0;
}
.info:hover .details{
	margin-top: 0.7em;
	opacity:1;
	transition-timing-function: ease-out;
	z-index:5;
}
.info .details > span{
	display:block;
}

/* actual subpages */
body.index h1, body.index h2{
	text-transform:uppercase;
}
body.index .head-main{
	overflow:hidden; /*for diamonds*/
}

.section.intro{
	position: relative;
	text-align:center;
	padding-top:0;
}
.intro .content{
	padding-top:0;
	position: relative;
}
.intro h1{ 
	margin:auto;
	max-width:20em;
	font-size:1.7em;	
}
.intro .subheadline{ 
	max-width:37em;
	margin: 1.5em auto;
	margin-bottom: 1.9em;
}
.intro .actions{
	position: relative;
	margin-bottom: 3em;
	min-height: 4em;
}
.intro .actions .buttons{
	padding-bottom: 0;
	max-height: 0;
	overflow: hidden;
	transition: all 0.2s ease-in;
}
.intro .actions .btn{
	font-size: 0.9em;
}
.intro .actions .buttons.shown{
	max-height: 5em;
	padding-bottom: 0.5em;
}
.intro .bookademo{
	max-width:30em;
	margin:auto;
	padding:0px;
	box-shadow:0 1em 3em -1em rgba(0,0,0,0.25);
	background:white; /*gradient bg*/

	overflow: hidden;
	max-height: 0;
	opacity: 0; visibility: hidden; /* safari */

	transition: max-height 0.6s ease-out;
	transition-delay: 0.15s;
}
.intro .bookademo.shown{
	max-height: 9em;
	margin-bottom:3em;
	opacity: 1; visibility: visible; /* safari */
}
.intro .bookademo .inside{
	position:relative;	
	
	/*regular adspawn gradient but softer*/
	background: linear-gradient(90deg, #6B29FF90, #935efe90, #fcdbdd90, #FE827A90, #6B29FF90);
	background: linear-gradient(90deg, rgba(107, 41, 255, 0.56), rgba(147, 94, 254, 0.56), rgba(252, 219, 221, 0.56), rgba(254, 130, 122, 0.56), rgba(107, 41, 255, 0.56));
	background-attachment: fixed;
	background-size:200% auto;
	animation: gradientmove linear 10s infinite; 
	
	padding:1em;
}
.intro .bookademo h2{
	font-size:1.2em;
	text-transform: none;
	margin-top:0;
	color: #F8F7FB;
	text-shadow: 0 0 1.5em rgba(67, 0, 165, 0.75);
}
.intro .bookademo .email{
	text-align:left;
	background:rgba(255,255,255,0.5);
	box-shadow: 0 0.2em 1.3em 0 rgba(0,0,0,0.05);
	margin:0;
	margin-bottom: 0.75em;
	margin-top: 0.75em;
	
	font-weight:400; 
	color:#5b4c7d;
	text-align:left;
	vertical-align: middle;
	width: 100%;
}
.intro .bookademo .email::placeholder{
	font-style:normal;
	text-align:left;
}
.intro .bookademo button{
	min-width: 6em;
	margin-bottom:0; 
	vertical-align:middle;
	background: #FE5858;
	background-position: center center;
	transition:background-color 0.2s linear;
	text-transform: none;
}
.intro .bookademo button:hover{
	background: #FE827A;
}
.intro .bookademo.progress input, 
.intro .bookademo.progress button{
	pointer-events:none;
}
.intro .bookademo.progress button{
	background-color: rgba(255,255,255,0.5);
	background-image: url(/img/loading-dark.svg);
	background-repeat:no-repeat;
	background-size: auto 55%;
	color:transparent;
	transition:background-color 0.3s linear;
}
.intro .bookademo .aftersubmit{
	font-weight: 400;
	margin-top:1.3rem; margin-bottom: 1.3rem;
	height:1.4rem;
	opacity:0;
	display:none;
}
@media screen and (min-width:600px){
	.intro .bookademo.shown{
		margin-bottom:4em;
	}
	.intro .bookademo .inputwrap{
		display:flex;
	}
	.intro .bookademo .email{
		flex:1;
	}
	.intro .bookademo button{
		margin-top:0.75em;
		margin-bottom: 0.75em;
		margin-left: 0.5em;
	}
}

.intro .app-searchable{
	margin-left:auto;
	margin-right:auto;
	max-width:30em;
}
.intro .getfreecreatives .inputwrap{
	position:relative;
}
.intro .inputborder{
	position: relative;
	display: block;
	background: linear-gradient(113deg, #FF7676 0%, #9F6AF5 50%, #9F6AF5 100%);
	padding:1.0px;
	border-radius:3px;
	margin-bottom:1em;
}
.intro .getfreecreatives .pre-input button b{
	font-size:1.08em;
}
.intro .storelink,
.intro .email{ 
	display:block; 
	width:100%;
	margin:0;
	text-align:center;
	/*background:rgba(255,255,255,0.5);*/
	background:white;
	box-shadow: 0 0.2em 1.3em 0 rgba(0,0,0,0.05);
	
	font-weight:400; 
	color:#5b4c7d;
	text-align:left;
}
.intro .storelink::placeholder,
.intro .email::placeholder{
	font-style:normal;
	text-align:left;
	/*padding-left:0.15em;*/
}
.intro .storelink{
	padding-left:2.45em;
}
.intro .storelink::placeholder{
	font-size:0.8em;
}
.intro .movable.incoming,
.intro .childmovable.incoming .movable{
	opacity:0;
	transform:translateX(-2rem);
}
.intro .movable.inplace,
.intro .childmovable.inplace .movable{
	opacity:1;
	transform:translateX(0);
	transition:all 0.21s cubic-bezier(0, 0.63, 0.3, 0.63);
}
.intro .movable.leaving,
.intro .childmovable.leaving .movable{
	transition:all 0.21s cubic-bezier(0.63,0,0.63,0.29);
	opacity:0;
	transform:translateX(2rem);
}
.intro .movable.away,
.intro .childmovable.away{
	display:none;
}
/*platform demo is animated bottom up*/
.intro .childmovable.leaving .platform-demo,
.intro .childmovable.incoming .appimg,
.intro .childmovable.incoming .appname{
	transform:translateY(-2rem);
}
.intro .childmovable.incoming .platform-demo,
.intro .childmovable.leaving .appimg,
.intro .childmovable.leaving .appname{
	transform:translateY(2rem);
}
.intro .childmovable.inplace .platform-demo,
.intro .childmovable.inplace .appimg,
.intro .childmovable.inplace .appname{
	transform:translateY(0);
}
.intro .childmovable .appimg{
	transition-delay:0.17s;
}
.intro .headlines.away h1,
.intro .headlines.away p{
	display:none;
}
.intro .headlines.leaving h1,
.intro .headlines.leaving p{
	transition:all 0.21s cubic-bezier(0.63,0,0.63,0.3);
	opacity:0;
	transform:translateY(-3rem);
	transition-delay:0.17s;
}
.intro .headlines.leaving p{
	transition-delay:0.25s;
}

.intro .getfreecreatives .enter-email.childmovable p,
.intro .getfreecreatives .post-email.childmovable p{
	transition-delay:0.06s;
}
.intro .getfreecreatives .enter-email.childmovable form,
.intro .getfreecreatives .post-email.childmovable form{
	transition-delay:0.10s;
}
.intro .getfreecreatives .post-email.childmovable .platform-demo{
	transition-delay:0.18s;
	transition-duration:0.5s;
	transition-timing-function:cubic-bezier(0.2, 0.6, 0.33, 0.95);
}
.intro .getfreecreatives h2{
	margin-bottom:1rem;
}
.intro .selected-storelink{
	/*display:none;*/
}
.intro .selected-storelink .appimg{
	display:inline-block;
	width:6em;
	background:linear-gradient(113deg, #FF7676 0%, #9F6AF5 50%, #9F6AF5 100%);
	padding:2px;
	border-radius:6px;
	overflow:hidden;
}
.intro .selected-storelink img{
	display:block;
}
.intro .selected-storelink .appname span{
	display:inline-block;
	/*background: linear-gradient(90deg, #6B29FF, #fe5959); /*#935efe, #fcdbdd, #FE827A, #6B29FF*/ 
	background:linear-gradient(90deg, #5f24e3 0%, #fe5959 80%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent; 
	font-weight:900;
}
.intro .enter-email form{
	margin:0 auto;
	max-width:15em;
}
.intro .enter-email .precache{
	width:1px;
	height:0;
	opacity:0.001;
	display:block;
}
.intro .enter-email button{
	margin-bottom:0;
}
.intro .platform-demo,
.intro .platform-demo img{
	position:relative;
	display:block;
	border-radius:4px;
	overflow:hidden;
}
.intro .platform-demo{
	padding:1px;
	padding-bottom:0;
	margin-top:2em;
}
.intro .platform-demo .topborder{
	position:absolute;
	top:0; left:0;
	width:100%; height:5px;
	background: linear-gradient(90deg, #FF7676 0%, #9F6AF5 50%, #9F6AF5 100%);
}
.intro .platform-demo:before,
.intro .platform-demo:after{
	content:""; display:block;
	position:absolute;
	left:0; top:4px;
	width:1px; height:100%;
	background: linear-gradient(180deg, #FF7676 0%, #FF7676 50%, #FF767600 100%);
}
.intro .platform-demo:after{
	left:auto; right:0;
	background: linear-gradient(180deg, #9F6AF5 0%, #9F6AF5 50%, #9F6AF500 100%);
}
.intro .platform-demo .btn{
	/*position:absolute;
	top:80%;
	left:50%;
	transform:translateX(-50%);
	*/
	margin-top:-1em;
}
/*
.intro label{
	display:block;
	//color:rgba(248, 247, 251, 0.7);
	color: rgba(34, 18, 83, 0.95);
	font-weight:300;
	margin-bottom:1em;
} 
*/
.intro .app-search-list{
	z-index:6;
}

.platform-showcase{
	position:relative;
	/*background:linear-gradient(90deg, #ffd8d7 0%, #fe958f 100%);*/
	background:linear-gradient(90deg, #6b28ff 0%, #935efe 34%, #ff958a 100%);
}
.platform-showcase .bg{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;

	background: url('/img/diamond-gradient.png') calc( 40vw - 48em ) 40% no-repeat;
	background-size: auto 75em;
}
.platform-showcase .content{
	position:relative;
	padding-bottom:1em;
	padding-top:1em;
}
.whitebox{
	position:relative;
	display: inline-block;
}
.whitebox:before{
	content:""; position:absolute; left:-0.5em; top:0; right:-0.5em; height:100%;
	display:block;
	background:white;
	/*white-space: pre-wrap;*/
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	transform: rotate(-1deg);
}
.whitebox span{
	position: relative;
	color:#200b4f;
	background: linear-gradient(90deg, #6B29FF 0%, #935efe 34%, #FE827A 100%);

	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-fill-color: transparent;
	color: transparent;
}
.platform-showcase .subheadline{
	text-transform: uppercase;
	font-size: 1.25em;
	margin: 0.5em auto 1em auto;
}
.platform-showcase .feature-controls{
	position:absolute;
	top: 2em;
	text-align: left;
	left: 1em; right:1em;
	overflow:hidden;
	color: white;
	text-align: center;
	font-weight:700;
	font-size:1.25em;
	margin-bottom:0.5em;
	z-index:5;
}
.platform-showcase .btn{
	font-weight: 700;
}
.platform-showcase .btn span{
	/*background-image: linear-gradient(90deg, #6B29FF, #935efe, #fcdbdd, #FE827A, #6B29FF);*/
	background-image: linear-gradient(113deg, #FF7676 0%, #9F6AF5 50%, #9F6AF5 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-fill-color: transparent;
	color: transparent;
}
.platform-showcase .feature-controls .btn{
	display: none;
}
.platform-showcase .feature-controls li{
	margin-bottom:0.5em;
	cursor:pointer;

	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
.platform-showcase .feature-controls li:after{
	content: "";
	display:inline-block;
	width: 0.5em;
	height: 0.5em;
	background-color: #fe5959;
	margin-left:0.5em;
	margin-right:0.5em;

	transform: translateX(0.5em) translateY(-0.1em) rotate(45deg);
	opacity:0;
	transition:all 0.15s cubic-bezier(0.77,0,1,1);
}
.platform-showcase .feature-controls .active{
	position:relative;
	color:#fe5959;
	cursor:default;
}
.platform-showcase .feature-controls .active:after{
	opacity:1;
	transform: translateX(0em) translateY(-0.1em) rotate(45deg);
	transition-timing-function:cubic-bezier(0,0,0.23,1);
}
.platform-showcase .dropgradient{
	position:absolute;
	width:100%; height:40em;
	top:0; left:0;
	overflow:hidden;
	pointer-events:none;
	z-index:4;
}
.platform-showcase .dropgradient:before{
	content:""; display:block;
	position:absolute;
	width: 200%;
	height: 200%;
	top: -80%;
	left: -80%;
	/*background:radial-gradient(circle, rgba(255,216,215,1) 0%, rgba(255,216,215,0.7) 20%, rgba(254,149,143,0) 50%);*/
	background:radial-gradient(circle, rgba(95, 30, 173, 0.87) 0%, rgba(254,149,143,0) 50%);
}
.platform-showcase .visuals-wrap{
	position: relative;
	margin-top:12em;
}
.platform-showcase video,
.platform-showcase img{
	max-width:100%;
	max-height:100%;
	display:block;
}
.platform-showcase .sizer{
	pointer-events:none;
	opacity:0;
}
.platform-showcase .visuals{
	position:absolute;
	left: 5%;
	width: 90%;
	top: 5%;
	height: 100%;
}
.platform-showcase .visual{
	position:absolute;
	border-radius:4px;
	overflow:hidden;
	transition:all 0.2s ease-out;
	opacity:0;
	filter: blur(3px);
	pointer-events: none;
}

.platform-showcase .visual.prev{
	transform: translate(-10vw, 0) scale(0.9);
	opacity: 0.5;
	z-index: 2;
}
.platform-showcase .visual.next{
	transform:translate(10vw, 0) scale(0.9);
	opacity: 0.5;
	z-index: 2;
}
.platform-showcase .visual.awayprev{
	transform: translate(-20vw, 0) scale(0.8);
	opacity:0;
	z-index:1;
}
.platform-showcase .visual.awaynext{
	transform: translate(20vw, 0) scale(0.8);
	opacity:0;
	z-index:1;
}
.platform-showcase .visual.active{
	transform: translate(0, 0) scale(1);
	opacity: 1;
	z-index: 3;
	filter: blur(0);
	cursor: pointer;
	pointer-events: auto;
}

.platform-showcase .prompt{
	position: absolute;

	background: #F8F7FB;
	border-radius: 5px;
	padding: 0.75em 0.8em;

	bottom: 2em;
	z-index: 3;
	font-size: 0.8em;
	max-width: 30em;
	margin: auto;
	left: 0;
	right: 0em;
	box-shadow: 0 1em 1em -1em rgba(0,0,0,0.3);
	text-align: left;
}

.autotype .word{
	display: inline-block;
}
.autotype .word .hidden{
	opacity: 0;
}
.autotype .cursor{
	position: absolute;
	display: inline-block;
}
/*.autotype .cursor:before{
	content: "_";
	display: inline-block;
	height: 100%;
	width: 0.3em;
	width: 1ch;
	background: #200B4F;
	color: transparent;
}
*/

.showcase-details-active .showcase-details{
	width:100%;
	transition-delay:0s;
}
.showcase-details-active body{ overflow:hidden; }
.showcase-details-active .steps{
	filter: blur(3px);
}
.showcase-details-active .showcase-details .box{
	transform:translateY(0);
	opacity:1;
	transition-timing-function:ease-out;
	overflow:auto;
}
.showcase-details-active .main, .showcase-details-active .header, .showcase-details-active .footer, .showcase-details-active .menu, .showcase-details-active .menutoggle{
	filter:blur(3px);
}

.showcase-details{
	position:fixed;
	left:0; top:0;
	width:0; height:100%;
	/*overflow:hidden;*/
	overflow: auto;
	display:flex;
	align-items:center;
	justify-content:center;
	
	transition:width 0s linear;
	transition-delay:0.15s;
	
	z-index:30;
}
.showcase-details .cover{
	position:absolute;
	width:100%; height:100%; left:0; top:0;
	background:rgba(0,0,0,0);
}
.showcase-details .box{
	position:relative;
	background:#F8F7FB;
	border:1px solid #d6c9e3;
	border-radius:6px;
	box-shadow: rgba(0,0,0,0.08) 0.5em 0.5em 0 0;
	box-shadow: rgba(0,0,0,0.08) 1em 1em 0 0;
	text-align:center;

	display: flex;
	max-width: 90vw;
	max-height: 90vh;
	flex-direction: column;

	box-sizing:border-box;
	margin:auto;
	
	transition:all 0.15s ease-in;
	transition-property:transform, opacity;
	
	opacity:0;
	transform:translateY(2em);
}
.showcase-details .inside{
	padding: 1em 1.5em 1em 1.5em;
}
.showcase-details .navigational.arrows{
	display: block;
}
.showcase-details .navigational .arrow{
	right:0.5rem;
	background-position: center 0.2em;
}
.showcase-details .navigational .arrow.left{
	left:0.5rem;
}
.showcase-details .inside{
	overflow:auto;
}
.showcase-details .box > .inside{
	position:relative;
	display: flex;
	height: 100%;
}
.showcase-details .preview{
	height: 100%;
	display: none;
	margin-bottom: 0;
}
.showcase-details .preview.active{ display: block; }
.showcase-details .preview > .wrap{
	position: relative;
	margin: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
}
.showcase-details .video{
	flex: 1;
	display: flex;
}
.showcase-details video{
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 3px;
}
.showcase-details p{
	width: 100%;
	max-width: 20rem;
	margin:1em auto;
	margin-bottom: 0;
	font-size: 0.8em;
	flex-shrink: 0;
}

.nooverflow{ overflow:hidden }

.section.preface,
/*.section.how,*/
.section.pricing,
.section.about-us .stats,
html.auth body{
	background: url('/img/gradient-4.svg') center center no-repeat;
	background-size:100% 100%;
	
	background:
		radial-gradient(circle at 5% 100%, 
			rgba(255,255,255,0.7), rgba(255,255,255,0) 65%), 
		radial-gradient(circle at 100% 100%, 
			rgba(255,64,64,0.4), rgba(255,64,64,0) 75%), 
		radial-gradient(circle at 100% 0%, 
			rgba(255,165,236,0.4), rgba(255,165,236,0) 75%),
		radial-gradient(circle at 0 0, 
			rgba(80,0,255,0.4), rgba(80,0,255,0) 75%),
		linear-gradient(white, white);
		
	/*
		radial-gradient(circle at 30% 70%, 
			rgba(255,255,255,0.7), rgba(255,255,255,0) 65%), 
		radial-gradient(circle at 70% 70%, 
			rgba(255,64,64,0.4), rgba(255,64,64,0) 75%), 
		radial-gradient(circle at 70% 30%, 
			rgba(255,165,236,0.4), rgba(255,165,236,0) 75%),
		radial-gradient(circle at 30% 30%, 
			rgba(80,0,255,0.4), rgba(80,0,255,0) 75%),
		linear-gradient(white, white);
	background-size:200% 200%;
	animation: bgmove 12s ease infinite;
	/**/
}
@keyframes bgmove {
	0%{background-position:0% 10%}
	33%{background-position:100% 0%}
	66%{background-position:80% 100%}
	100%{background-position:0% 10%}
}
.section.revenue{
	color:#F8F7FB;
}
.step0 .iconed:before{ background-image:url('/img/ico-upload.svg'); }
.step1 .iconed:before{
	background-image:url('/img/ico-identify.svg');
	background-image: url('/img/ico-identify.svg'), linear-gradient(90deg, #6b28ff 46.6%, #935efe 100%);
	background-size: 90% 80%, 100% 100%;
}
/*.step2 .iconed:before{ background-image:url('/img/ico-brain.svg'); }*/
.step2 .ico{ background-image:url('/img/ico-brain-transparent.svg'); }
.step3 .iconed:before{ background-image:url('/img/ico-touches.svg'); }

.step2 .gradientcontainer{ display:inline-block; margin-right:0.5em; }
.step2 .ico{ margin-right:0; }

.section.how{
	padding-top: 0;
}
.how .steps{
	position:relative;
	list-style:none;
	padding-left:3em; /*1em regular "content" padding + 2em*/
	padding-right:1em;
	margin-bottom:2em;
}
.how .steps:before,
.how .steps:after{
	content:""; display:block;
	position:absolute;
	/*background:rgba(248,247,251); /*#F8F7FB*/
	background: rgba(147, 94, 254, 1);
	width:0.3em;
	left:1.35em;
	top:1.5em;
	bottom:5em;
}
.how .steps:after{
	top:auto;
	height:5em;
	bottom:0;
	/*background:linear-gradient(180deg, rgba(248,247,251, 1), rgba(248,247,251, 0));*/
	background:linear-gradient(180deg, rgba(147, 94, 254, 1), rgba(147, 94, 254, 0));
}
.how .steps .title{ position:relative; }
.how .steps .title:after{
	content:""; display:block;
	font-size:1rem;
	margin-right: 0.93em;
	width:0.6em; height:0.6em;
	border:0.3em solid #F8F7FB;
	position:absolute;
	/*top:0.6em;*/
	bottom:0.28em;
	right:100%;
	background:linear-gradient(135deg, #6B29FF, #935efe 35%, #EBC7E2 100%); /*#7B3EFF ->*/ 
}
.how .steps .iconed:before{
	margin-right:0.775em; /*0.93 * [1/1.2 ~ title size reduction to 1rem]*/
}

/*
.how .examples{ 
	padding-bottom:3em;
	max-width:896px;
}
.how .examples h3{
	margin-bottom: 0;
	padding-bottom: 1em;	
}
.how .examples h3 .inner{
	margin: auto;
	max-width: 20em;
}
.how .example{
	padding-top:1.2em;
	position:relative;
}
.how .examples h3,
.how .example{
	border-bottom:2px solid #efe3f4;
}
.how .example .pre{
	text-transform:uppercase;
	text-align:right;
	font-weight:400;
	font-size:0.8em;
	margin-bottom:1.5rem;
	padding-left:4rem;
	min-height:2rem;
}
.how .example .image{
	background:transparent center center no-repeat;
	background-size:cover;
	width:3em; height:3em; 
	display:inline-block;
	position:absolute;
	top:0.75em;
	
	box-shadow: 0 0 0.5em rgba(0,0,0,0.5) inset;
}
.how .example h4{
	font-size:1.25em;
	text-transform:uppercase;
	font-weight:700;
	margin-bottom:1.25em;
	
	line-height: 1em;
	margin-top: 0.5rem;
}
.how .example .game{
	white-space:nowrap;
	font-weight:700;
}

.example.leaving .dynamic{
	opacity:0;
	transition:all 0.2s cubic-bezier(0.75, 0, 1, 1);
}
.example .textual{ transform:translateX(0.0001px); }
.example.leaving .textual{
	transform:translateX(-1rem); 
}
.example.leaving.reverse .textual{
	transform:translateX(1rem); 
}

.example.leaving .headline, .example.arriving .headline{  transition-delay:0.2s; }
.example.leaving .copy, .example.arriving .copy{ transition-delay:0.1s; }

.example.left .dynamic{
	opacity:0;
	transition:none;
}
.example.left .textual{ transform:translateX(1rem); }
.example.left.reverse .textual{ transform:translateX(-1rem); }

.example.arriving .dynamic{
	opacity:1;
	transition-property:all;
	transition-duration:0.2s;
	transition-timing-function:cubic-bezier(0, 0, 0.25, 1);
	transform:translateX(0);
}
.example.leaving .image, .example.arriving .image{ transition-duration:0.4s; }
*/
.navidots{
	list-style:none;
	padding-left: 0;
		
	display: flex;
	/*justify-content: space-evenly;*/
	justify-content:center;
	gap:4vw;
	margin-top: 1em;
}
.navidots .dot{
	position:relative;
	list-style: none;
	color: transparent;
	display:inline-block;
	width: 2vw; height: 2vw;
	border-radius: 1.5em;
	background: #efe3f4;
	font-size: 0.4em;
	transition:all 0.2s linear;
}
.navidots .dot.active{
	background:#FE827A;
}
/*
.examples .navidots .dot:after{
	content:"";display:block;
	position:absolute;
	width:200%; height:200%;
	left:-50%;top:-50%;
}*/

.how .page .bottom{
	margin-top:2em;
	text-align:center;
}

.section.revenue{
	background: linear-gradient(290deg, #6b29ff, #935efe) center center no-repeat;
}
.section.revenue h2{
	margin-bottom:0.25em;
}
.revenue .casewrap{
	margin-top:1em;
	margin-bottom:1em;
}
.revenue .based{ 
	font-size:0.8em;
	font-weight:400;
	margin-top: 1rem;
	margin-bottom: 0;
}
.revenue .bottom{ margin-top:1em; }
.revenue .half img{ width:100%; }
.revenue .results{
	list-style:none;
	padding-left:0;
	margin-top:1rem;
}
.revenue .results li{
	display:flex;
	margin-bottom:0.5em;
}
.revenue .results .highlight{
	font-weight:700;
	font-size:2em;
	margin-right:0.25em;
}
.revenue .results .rest{
	align-self: end;
	margin-bottom: 0.4em;
	line-height: 1.2;
	font-weight: 400;
}

.advantages{
	color:#200B4F;
	margin-top: 3rem;
}
.advantages .iconed:after{ content:"";display:block;clear:both;height:0; }
.advantages .iconed:before{
	width:2.5em; height:2.5em;
	float:left;
	margin-right:1.25rem;
}
.advantage0 .iconed:before{
	background-image:url('/img/ico-cog.svg');
}
.advantage1 .iconed:before{
	background-image:url('/img/ico-mortarboard.svg');
}
.advantage2 .iconed:before{
	background-image:url('/img/ico-graph.svg');
}
.advantage3 .iconed:before{
	background-image:url('/img/ico-star-place.svg');
}
.advantages .card p{ margin-bottom:0; }

.testimonials .content{ position:relative; }
.testimonials .bg, .testimonials .bg div{ 
	position:absolute;
	left:0; top:0; width:100%; height:100%;
} 
.testimonials .bg .layer1{
	background:
		radial-gradient(circle at 60% 25%, 
			rgba(255,64,64,0.4), rgba(255,64,64,0) 37%),
		radial-gradient(circle at 35% 50%, 
			rgba(80,0,255,0.4), rgba(80,0,255,0) 37%),
		radial-gradient(circle at 70% 70%, 
			rgba(255,165,236,0.7), rgba(255,165,236,0) 37%),
		linear-gradient(white, white);
}
.testimonials .bg .layer2{
	background:var(--noise) repeat;
	background-size:var(--noise-size);
	mix-blend-mode:soft-light; /* hard-light/screen also decent*/ 
}

.pricing-table{
	position:relative;
	list-style:none;
	padding:0;
}
.pricing-table li{
	position:relative;
	background:#F8F7FB;
	margin-bottom:2em;
}
.pricing-table .inside{
	padding:1em;
}
.pricing-table .top{ 
	box-sizing:border-box; 
}
.pricing-table .top .preprice{ margin-bottom:1em; }
.pricing-table .top .preprice b{ font-weight: 900; }
.pricing-table .top .shortdesc{
	font-size:0.9em;
	margin-bottom:0;
	max-width:25em;
}
.pricing-table .title{
	font-weight:700;
	font-size:1.5em;
	margin-bottom:0.5em;
}
.pricing-table .price{
	font-weight:700;
	font-size:2em;
	line-height:1;
}
.pricing-table tbody,
.pricing-table .top .shortdesc{
	font-size: 0.8em;
}
.pricing-table table{
	width:100%;
	border-collapse: collapse;
	margin-top:1em;
	table-layout: fixed;
}
.pricing-table table tr:nth-child(2n+1){
	/*background:rgba(107,41,255, 3%);*/
	background:#f1edf9;
}
.pricing-table th, .pricing-table td{
	vertical-align: top;
	padding:1em;
	text-align: left;
}
.pricing-table td{
	text-align: center;
}
.pricing-table .misc{
  font-size: 0.8em;
}
.pricing-table .misc th {
  font-weight: normal;
}
.pricing-table .outputs{ position:relative; }
.pricing-table .outputs .info{
	display: inline-block;
	position: relative;
	top: 0.25em;
	right: auto;
	margin-left: 0;
	font-weight: normal;
}
.pricing-table .bottom{
	position:relative;
	margin-top:1.5em;
	text-align:center;
}
.pricing-table .bottom .btn{
	margin-bottom:0.5rem;
}
.pricing-table .bottom .overbot{
	position:absolute;
	margin-bottom: 0.35em;
	bottom:100%;
	left:0;
	width:100%;
}
.pricing-table .cancelled{
	text-decoration:line-through;
	opacity:0.75;
}
.pricing-table .ribbon .highlight{
	font-size: 0.9em;
	padding: 0.5em 1em;
	text-transform: uppercase;
	line-height: 1;
	display:inline-block;
}
.pricing-table .ribbon{
	position:absolute;
	top:0;left:0;right:0;margin:auto; 
	margin-top:-0.75em; 
	text-align:center;
}
.pricing-table .yes, .pricing-table .no{
	display:inline-block;
	width:1em; height:1em;
	background:url('/img/check.svg') center center no-repeat;
	background-size:contain;
}
.pricing-table .no{
	background-image:url('/img/no.svg');
	opacity:0.3;
}
.pricing-table .emphasized{ font-weight:700; }
.pricing-table .free-conditions{ font-size:0.9em; }
.pricing-table .points{ vertical-align:top; }
.pricing-table .info{ margin-top: 0.1em; }
.pricing-table .info .details{ width:16em; }
.pricing-table .app_icon{
	display:inline-block;
	margin-top:1em;
}

.pricing-table .equivalent{
	font-size: 0.8em;
}
.pricing-table .equivalent th,
.pricing-table .equivalent td{
	font-weight: normal;
	padding-top: 0;
}
.pricing-table .equivalent td.emphasized{ font-weight: 700; }
.pricing-table .equivalent th{ padding-left:1rem; }
.pricing-table .equivalent td{ padding-left:1rem; }
.pricing-table .tier-enterprise .equivalent td{ padding-left:1em; }

.pricing-table .outlined:before,
.pricing-table .popular:before{
	content: ''; position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	border-radius: inherit; 
	border-top:3px solid #6B29FF;
	pointer-events:none;
} 
.pricing-table .outlined .inside,
.pricing-table .pouplar .inside{ 
	position:relative;
	border-radius: inherit;
}
.pricing-table .outlined .inside:before,
.pricing-table .outlined .inside:after,
.pricing-table .popular .inside:before,
.pricing-table .popular .inside:after{
	content: ''; position: absolute;
	width:3px;
	top: 3px; bottom: 2em;
	left:0; 
	background: linear-gradient(180deg, #6B29FF, #FE5858, rgba(255, 149, 138, 0) );
}
.pricing-table .outlined .inside:after,
.pricing-table .popular .inside:after{
	left:auto;right:0;
}
.section.pricing{overflow:hidden;} /*because of the badge overflow on mobiles*/
.pricing-table .badge{
	position: absolute;
	top: -3em; right: -1em;
	width: 8em; height: 8em;
	
	background: #f85353; border-radius: 50%;
	background: url(/img/badge-star.svg);
	background-size:100% 100%;
	color: #F8F7FB;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align:center;
	
	font-size:0.8em;
	
	transform: rotate(15deg);
	z-index:1;
}
.pricing-table .num{
	font-size:1.8em;
	font-weight:900;
	line-height:1.1;
}
.pricing-table .text{
	font-size:0.85em;
	font-weight:500;
}
.pricing-table .contact-content{
	display:none;
}

.about-us .people,
.testimonials .people{
	margin-top:2em;
}
.about-us .people,
.testimonials .people,
.about-us .skills,
.companies{
	list-style:none;
	padding:0;
}
.about-us .photo,
.testimonials .photo{
	max-width:10em;
	margin:auto;
	display:block;
	margin-bottom:1em;
	border-radius:50%;
	overflow:hidden;
}
.about-us .description{
	max-width:830px;
	margin-left:auto;
	margin-right:auto;
}
.about-us .name{
	text-align:center;
	font-weight:bold;
	margin-bottom:0;
}
.about-us .position{
	text-align:center;
}

.about-us .person{
	margin-bottom:4em;
}
.about-us .person:last-of-type{
	margin-bottom:0;
}
.about-us .people .person{
	max-width:25em;
	margin-left:auto;
	margin-right:auto;
}
.about-us .stats{
	border: 1px solid #d6c9e3;
	padding:0;
	overflow:hidden;
/*
	background: linear-gradient(290deg, #6b29ff, #935efe) center center no-repeat;
	color:white;
*/
}
.about-us .stats .textual{
/*
	background: linear-gradient(290deg, #6b29ff, #935efe) center center no-repeat;
	border-top: 1px solid rgba(195, 172, 225, 0.27);
*/
	border-top: 1px solid rgba(195, 172, 225, 0.5);
}
.about-us .stats .head{
	margin-bottom:0;
	text-align:center;
	padding-top:1em;
}
.about-us .stats .skills,
.about-us .stats .textual{
	padding:1em;
}
.about-us .stats .skill,
.about-us .stats .group{
	display:flex;
	flex-direction:row;
}
.about-us .stats .skill:last-of-type,
.about-us .stats .group:last-of-type{
	margin-bottom:0;
}
.about-us .label{ 
	width:55%;
	padding-right:0.5em
	box-sizing:border-box;
}
.about-us .textual .label{
	width:49%;
	width:calc(55% - 1em);
}
.about-us .star{
	color:transparent;
	background:url(/img/star-square.svg) center center no-repeat;
	background-size:contain;
	width:1.4em; height:1.4em;
	/*
	display:inline-block;
	width:1.2em;height:1.2em;
	margin-right:3px;
	*/
}
.about-us .stats .icon{
	display:inline-block;
	width:1em;height:1em;
	background:url(/img/icon-game.svg) center center no-repeat;
	background-size:contain;
	vertical-align:top;
	margin-top:0.1em;
}
.about-us .stats .icon.writing{
	background-image:url(/img/icon-writing.svg);
}
.about-us .stats .icon.creativity{
	background-image:url(/img/icon-lightbulb.svg);
}
.about-us .stats .icon.development{
	background-image:url(/img/icon-brain-filled.svg);
}
.about-us .stats .icon.visuality{
	background-image:url(/img/icon-painting.svg);
}

.testimonials{
	padding-top:0;
	border-top:1px solid #fed7d9
}
.testimonials .title{
	margin-bottom:0;
}
.testimonials .people-wrap{
	padding-left:0;
	padding-right:0;
}
.testimonials .person{
	margin-bottom:1em;
}
.testimonials .name{
	font-weight:bold;
	text-align:right;
	margin-top:1em;
	margin-bottom:0.25em;
}
.testimonials .position{
	text-align: right;
	font-style: italic;
	margin-bottom:0;
}
.testimonial{
	box-sizing:border-box;
	padding-left:1em;
	padding-right:1em;
}
.testimonial .quote:before{
	content: "\201C";
	margin-right:0.1em;
}
.testimonial .quote:after{
	content: "\201D";
	margin-left:0.1em;
}
.testimonial .quote:before,
.testimonial .quote:after{
	position:relative;
	display:inline-block;
	font-weight:bold;
	vertical-align:bottom;
	font-size:2.5em;
	line-height:1rem;
	top:0.15em;
}
.navigational.arrows{
	display:none;
}
.navigational .arrow{
	position: absolute;
	right: 0.35em;
	top: 40%;
	margin-top: -0.5em;
	height: 1em;
	width: 1em;
	background: url(/img/dropdown.svg) center center no-repeat;
	background-size: contain;
	transform: rotate(-90deg);
	cursor:pointer;
}
.navigational .arrow.left{
	transform: rotate(90deg);
	right:auto;
	left:0.35em;
}

.experience{ position:relative; }
.experience .showcase{
	position:relative;
	width:100%;
	overflow:hidden;
}

.experience .title{
	font-size:1.15em;
	font-weight:normal;
	text-transform:none;
	margin-bottom:2rem;
	text-align:center;
}
.experience .companies{
	/*
	text-align:center;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-evenly;
	*/
	display:flex;
	flex-direction:row;
	white-space:nowrap;
	text-align:left;
	margin-bottom:4em;
	/*animation: logoslidee linear 5s infinite;*/
}
/*
@keyframes logoslide {
	from { transform: translateX(0); }
	to { transform: translateX(-200%); }
}
*/
.experience .company{
	list-style:none;
	display:inline-block;
	margin: 0 1em;
}
.experience .company:last-of-type{
	margin-right:0;
}
.experience .company img{
	max-height:3em;
	max-width:10em;
	display:block;
	-webkit-filter: grayscale(1);
	filter: grayscale(1);
	transition:all 0.2s linear;
}
.experience .company a:hover img{
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}

html.auth, html.auth body{ min-height:100vh; }
html.auth body{
	display: flex;
	align-items: center;
	justify-content: center;
	
	background-size: 200% 200%;
	animation: bgmove 10s ease infinite;
}
html.auth .main{position:relative;}
html.auth .logo{
	display: block;
	height:4em;
	margin: auto;
	margin-bottom: 2em;
}
html.auth .card{
	max-width:30em;
}
html.auth input:not([type=checkbox]){
	display:block;
	width:100%;
}
html.auth .bot{
	margin-top:2em;
	text-align:center;
}

.gradientalive {
	position: absolute; left:0;top:0;
	width: 100%;
	height: 100%;
}
.auth .gradientalive{ position:fixed; }
.gradientalive .g1 {
	background: radial-gradient(circle at 5% 100%, rgba(255,255,255,0.7), rgba(255,255,255,0) 65%);
	animation: gradientalivemove1 6s ease infinite;
}
.gradientalive .g2 {
	background: radial-gradient(circle at 100% 100%, rgba(255,64,64,0.4), rgba(255,64,64,0) 75%);
	animation: gradientalivemove2 7s ease infinite;
}
.gradientalive .g3 {
	background: radial-gradient(circle at 100% 0%, rgba(255,165,236,0.4), rgba(255,165,236,0) 75%);
	animation: gradientalivemove3 5s ease infinite;
}
.gradientalive .g4 {
	background: radial-gradient(circle at 0 0, rgba(80,0,255,0.3), rgba(80,0,255,0) 75%);
	animation: gradientalivemove4 9s ease infinite;
}
.gradientalive > div{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: 200% 200%;
}
@keyframes gradientalivemove1 {
	0% { background-position: 0% 80%; }
	25% { background-position: 100% 20%; }
	50% { background-position: 0% 60%; }
	75% { background-position: 100% 40%; }
	100% { background-position: 0% 80%; }
}
@keyframes gradientalivemove2 {
	0% { background-position: 20% 100%; }
	25% { background-position: 80% 0%; }
	50% { background-position: 30% 100%; }
	75% { background-position: 70% 0%; }
	100% { background-position: 20% 100%; }
}
@keyframes gradientalivemove3 {
	0% { background-position: 100% 30%; }
	25% { background-position: 0% 70%; }
	50% { background-position: 100% 50%; }
	75% { background-position: 0% 90%; }
	100% { background-position: 100% 30%; }
}
@keyframes gradientalivemove4 {
	0% { background-position: 40% 0%; }
	25% { background-position: 60% 100%; }
	50% { background-position: 20% 0%; }
	75% { background-position: 80% 100%; }
	100% { background-position: 40% 0%; }
}

ul.articles{
	list-style:none;
	padding:0;
}
.articles a{
	text-decoration:none;
	color:#200B4F;
}
.articles .body, .articles .meta{
	display:block;
}
.articles .card{
	display:block;
	border:1px solid #d6c9e3;
	overflow:hidden;
}
.article .link{
	color:#fe5858;
	text-decoration:underline;
}
.articles a:hover .link{ text-decoration:none; }
.articles .published{ float:right; }
.articles .meta:after{ content:"";clear:both;display:block; }
.articles .title{ font-size:1.25em; }
.articles .image{
	margin: -1em;
	margin-bottom:1em;
}
.articles .image > div{
	height:60vw;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
}
.articles .image .desktop{ display:none; }
article .tags, .article .tags{
	list-style:none; padding:0;
}
article .tags li, .article .tags li{
	position:relative;
	display:inline-block;
	margin:0;
	margin-right:0.5em;
	margin-bottom:0.5em;
	padding:0.25em;
	border-radius:0.25em;

	background-color: #f79ca0;

	font-size:0.875em;
	font-weight:500;
	line-height:1;
}
.article .tags li a{
	color:#fff;
	text-decoration:none;
}
article .tags li{
	background-color:#f8f7fb;
}
article .tags li a{
	text-decoration:none;
	color:#f79ca0;
}

/*detail*/
article .detail .content,
body.tos .detail .content,
body.privacy-policy .detail .content{ 
	max-width:37em; 
}
article .detail .image{
	width:100%;
	margin-bottom:2em;
}
article .meta{
	text-align:right;
	margin-bottom:1em;
}
.article .lead{
	margin-bottom:1em;
}
.article .lead p:last-of-type{
	margin-bottom:0;
}