/*https://www.freecodecamp.org/news/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862/*/
/*https://www.ios-resolution.com/*/

.hidemobile{ display:none;}

/*smallest tablets*/
@media (min-width:600px){
	.hidemobile{ display:block;}
	h1, h2{ font-size: 2.5em; }
	h2{ font-size:2em; }
	h3{ font-size: 1.5em; }
	
	.section.preface .content > .lead{
		max-width:33rem;
	}
	
	.card, .how .page {
		box-shadow:rgba(0,0,0,0.08) 1em 1em 0 0;
	}
	.card{ margin-bottom:2em; }
	
	.intro h1{ font-size:2em; }
	.intro .superhighlight{
		font-size:0.8em;
		transform:none;
		position:absolute;
		bottom:100%; margin-bottom:-0.2em;
		left:100%; margin-left:-0.35rem;
	}
	
	.intro .getfreecreatives{
		max-width:40em;
		margin-left:auto;
		margin-right:auto;
		margin-bottom:6em;
	}
	.intro .app-searchable{
		max-width:32em;
	}
	.intro .app-searchable .inputborder{
		padding:0;
		background:transparent;
		margin-bottom:0;
	}
	.intro .getfreecreatives .app-searchable{
		display:flex;
		
		background: linear-gradient(113deg, #FF7676 0%, #9F6AF5 50%, #9F6AF5 100%);
		padding:2px;
		border-radius:3px;
	}
	.intro .getfreecreatives .pre-input .inputwrap{
		flex-grow:1;
		position:relative;
	}
	.intro .getfreecreatives .pre-input button,
	.intro .getfreecreatives .pre-input input{
		margin-bottom:0;
	}
	.intro .getfreecreatives .pre-input button{
		font-size:0.8em;

		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}
	.intro .pre-input .storelink{
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
	.intro .app-searchable .stores{
		top:auto;
		bottom:0;
		right:0.2em;
	}
	.platform-showcase .content{
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
	}
	.platform-showcase .dropgradient{
		display:none;
	}
	.platform-showcase .visuals-wrap{
		flex: 1.1;
		margin-right:3em;
		margin-left:1em;
		margin-top: 0;
	}
	.platform-showcase .feature-controls{
		/*flex: 1;*/
		width:60%;

		position:relative;
		top: auto;
		left: auto;
		right: auto;
		margin-bottom: 0;
	}
	.platform-showcase .prompt{
		bottom: -2em;
		width: 30vw;
		max-width: none;
		left: -4vw;
	}
	.platform-showcase .control{
		padding-right:1em;
	}
	.platform-showcase .feature-controls .btn{
		display: inline-block;
	}
	.platform-showcase .btn.afterfeatures{
		display: none;
	}
	.showcase-details .box{
		height: 90vh;
		max-height: calc(924px + 7rem);
	}
	.showcase-details .inside {
		padding: 1.5em 2.5em 1em 2.5em;
	}
	.showcase-details .navigational .arrow{
		font-size: 2em;
		right: 1rem;
	}
	.showcase-details .navigational .arrow.left{
		left: 1rem; 
		right: auto;
	}

	.diamond.transitioning{
		transition: all 0.1s linear;
	}
	.intro .diamond{
		position:absolute;
		background:url('/img/diamond.png') center center no-repeat;
		background-size:contain;
		width:80vw; height:80vw;
		max-width:1000px; max-height:1000px;
		left:50%;
		top: 5%;
		margin-left: -60vw;
		pointer-events:none;
	}
	.intro .diamond.second{
		width:10em;
		height:10em;
		margin-left: -30vw;
		top: -14em;
	}
	.revenue .diamonds{
		position:absolute;
		left:0;top:0;width:100%;height:100%;
	}
	.revenue .diamond{
		position:absolute;
		background:url('/img/diamond-dark.png') center center no-repeat;
		background-size:contain;
		width:70vw; height:70vw;
		max-width:800px; max-height:800px;
		left: -13vw;
		top: -13vw;
		opacity:0.85;
		pointer-events:none;
	}
	.revenue .diamond.second{
		left:50%;
		top:7em;
	}
	.revenue .content{ position: relative; }

	.footer .links{
		display: flex;
		flex-direction: row;
		align-items: normal;
	}
	.footer .main-menu-items{ padding-right:1.6em; }
	
	.how .steps{ padding-left:4em; }
	.how .steps:before, .how .steps:after{ left:1.85em; }
	.how .steps:before{ 
		top:2em;
		bottom:3em;
	}
	.how .steps:after{ height:3em; }
	.how .steps .title{ font-size:1.5em; }
	.how .steps .title:after{ margin-right: 1.43em; }
	.how .steps .iconed:before{ margin-right: 0.9533em; } /* 1.43 * [1/1.5 ~ title size reduction to 1rem] */


	.revenue .based{
		font-size:1em;
	}
	.advantages .card{
		margin-left:1em;
		margin-right:1em;
	}
	
	.pricing-table .top .shortdesc{
		font-size:1em;
	}
	
	.testimonials .person{
		padding-left:10vw;
		padding-right:10vw;
	}
	
	html.auth .card{ width:25em; }
	
	html.dashboard .tutorial{
		margin-left:1em;
		margin-right:1em;
	}
	html.dashboard .tutorial .action{
		margin-bottom:0.5em;
	}
	html.dashboard .tutorial .step > .inside{
		padding-bottom:1em;	
	}
	/*html.dashboard .workspace > .inside{ padding-left:1em; padding-right:1em; }*/
	body.app .app-meta .decoration{ margin-top:0.7em; width:5.1em; height:5.1em; }
	
	.spawns.listing .add-spawn .title,
	/*body.app.aso .card .head*/
	.cards .head.title,
	.app-screen-switcher{ 
		font-size:1.15em; 
	}
	.spawns.listing .add-spawn .details{
		display: flex;
	    flex-direction: row;
	    align-items: start;
	}
	.spawns.listing .add-spawn .picker{
		flex-grow:1;
		margin-right:1em;
		margin-bottom:0;
		width:auto;
	}
	.creditable-summary .total-cost .inner{ max-width:none; }
	body.apps .app-meta .title{ font-size: 1.65rem; }
	
	body.app .new-spawns .spawn .card{
		box-shadow:rgba(0,0,0,0.08) 0.5em 0.5em 0 0;
	}
	.spawn .info .details{ width:auto; }
	.spawn .info .when{ white-space:nowrap; }

	.image-journeys{ gap: 1em; }
	.image-journeys .actions .textual{ display: inline-block; }
	.image-journeys .actions .visual{ position: relative; bottom:0; }
	/*.generated-images .card{
		margin-bottom:1.5em;
	}
	.generated-images .item,
	.generated-images .item:nth-child(3n){
		width:21%;
		margin-right:5.3%;
	}
	.generated-images .item:nth-child(4n){
		margin-right: 0;
	}*/
	.generated-images {
		gap:2em;
	}
    .generated-images .item {
    	flex: 0 0 calc(25% - 1.5em); 
    }
	.app-message .gentime{ float:right; }
	.app-message .style{ float:left; }
	.app-message .icon-actions{
		display:flex;
		gap:1em;
		justify-content: space-between;
	}
	.app-message .icon-actions .btn{
		font-size:0.8em; 
		flex: 1;
		margin-bottom: 1em;
		text-align: center;
	}
	.app-message .icon-actions .btn:not(:last-child){
		margin-bottom:1em;

	}
	.app-message.images-multiple .image-wrap{ width: 75%; }
	.app-message.images-multiple .dimension{flex-grow:1;}
	.app-message.images-multiple .gentime{
		margin-bottom: 0.75em;
		float: right;
	}
	.app-message.images-multiple .export-more{
		position: absolute;
		top: 1px; right: 1px;
		margin: 0;
		min-width: 0;
		margin-left: 0.5rem;
	}
	.app-message .all-exports{
		position: absolute;
		top: 2.75em;
		right: 0;
		left: 75%;
		margin-left: 0.5em;
		bottom: 1.5em
	}
	.app-message .all-exports:after{
		width: 100%;
		bottom: 0;
		height: 1em;
		top: auto;
		background: linear-gradient(to top, rgba(248,247,251,1), rgba(248,247,251,0));
	}
	.app-message .all-exports .list{
		white-space: normal;
		padding: 0;
		border: 0;
		height: 100%;
	}
	.app-message .all-exports li{
		display: block;
		margin-right: 0;
		width: 100%;
		height: auto;
		padding-top:100%;
		margin-bottom: 0.5em;
	}
	.app-message .all-exports li:last-child{
		margin-bottom:0.625em;
	}
	
	.tablefields{
		display:table;
	}
	.tablefields .tablerow{
		display:table-row;
		vertical-align:top;
	}
	.tablefields .tablecell{
		display: table-cell;
		padding-bottom:1em;
	}
	.tablefields .labels{
		vertical-align:top;
		text-align:right;
		box-sizing:border-box;
		padding-right:0.85em;
	}
	.tablefields .labels.middle{
		vertical-align:middle;
	}
	.tablefields .labels.oneline-middle{
		padding-top:0.6em;
	}
	.tablefields .inputs{
		width:100%;
		max-width:80%;
		position:relative;
	}
	
	body.app.aso .stores{ display:block; }

	.dropdown.art_style .label{ padding-right:0; }
	.dropdown.art_style .unselect{ top:50%; margin-top: -0.625em; }
	.dropdown.art_style .option span,
	.dropdown.art_style .label span{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.dropdown.art_style .caption{
		display: inline;
	}
	.dropdown.art_style .samples{
		float:none;
	}
	.dropdown.art_style img{
		height: 2.75em;
		margin-top:0;
		margin-left: 0.5em;
	}
	.dropdown.art_style .highlight.pro{
		position: absolute;
		bottom: -0.5em;
	}
	.dropdown.art_style .top .highlight.pro{
		left: auto;
		right: 0.5em;
		bottom: 0.25em;
	}
	/*
	.dropdown.art_style .label img{
		height:1.5em;
	}*/
	
	body.library .filters{
		margin-left:-0.5em;
		margin-right:-0.5em;
	}
	body.library .filters:after{
		content:"";display:block;clear:both;
	}
	body.library .filter{
		float:left;
    	box-sizing:border-box;
		width:50%;
    	padding: 0 0.5em;
	}
	body.library .filter:nth-child(2n+1){ clear:both; }
	body.library .datepick .text.selected{
		line-height: 1.5rem; 
		font-size:0.8em; 
	}
	
	.articles{
		padding-left:1em; padding-right:1em;
	}
	.articles .image{ 
		margin:-2em;
		margin-bottom:1em;
	}
	.articles .image .mobile{ display:none; }
	.articles .image .desktop{ display:block; }
	.articles .image > div{ height:50vw; }
}

/*regular tablets*/
@media (min-width:760px){
	body.index h2{
		font-size: 3em;
		text-align:center;
	}
	.menu-active .menu{ box-shadow: 0 0 3em 0 rgba(0,0,0,0.3); }
	.menu-active .menu, .menu .inside{
		width:20em;
	}	
	.menu-active, .menu-active body{
		overflow:auto;
	}
	.main, .header{
		transition:filter 0.15s linear;
	}
	.menu-active .main, .menu-active .header, .menu-active .footer{
		filter:blur(3px);
	}
	.menucover{
		position:fixed;
		width:0; height:100%; right:0; top:0;
		background:rgba(0,0,0,0);
		transition:background 0.15s linear;
	}
	.menu-active .menucover{
		width:100%;
		background:rgba(0,0,0,0.3);
	}
	
	.halves{ position:relative; }
	.halves:after{ content:"";display:block;clear:both;height:0; }
	.halves .half{
		box-sizing:border-box;
		float:left; width:50%; 
	}
	.halves .half:nth-child(2n+1){ clear:both; }
	.halves.stretched{
		display: flex;
		flex-wrap:wrap;
		flex-direction: row;
	}
	.halves.stretched .half{
		float:none;
	}
	.stretched.cards .card{
		height:100%;
		margin-bottom:0; /*making use of flex, margin collapse does not work here, have to re-define the spaces on parent */
	} 
	.stretched.cards .item{ margin-bottom:2em; }
	
	.hide-belowtablets{ display:block; }
	.hide-tabletsup{ display:none; }
	
	.intro label{ display:none; }
	
	.footer .half{ float:right; }
	.footer .title, .footer .title{ 
		font-size:2em;
	}
	.footer .title{ margin-top: 0.73em; }
	.footer .main-menu-items{ padding-right:3em; }
	
	.intro .getfreecreatives h2{
		font-size:2em;
	}
	.platform-showcase h2{
		margin-bottom: 1rem;
	}
	.platform-showcase h2 img{
		width: 100%;
		max-width: 6em;
		margin: auto;
	}
	.platform-showcase .sizer{
		width:290px;
	}
	.platform-showcase .visuals{
		left: 20px;
		width: 300px;
		top: -10px;
	}
	.platform-showcase .visuals-wrap{
		margin-left:2em;
	}
	.platform-showcase .prompt{
		width: auto;
		max-width: 30em;
		bottom: 2em;
	}
	
	.how .steps{
		padding-left:1.5em;
		padding-right:1.5em;
		max-width: 900px; /*todo: find a snapping grid for approximately this size*/
		margin: auto;
	}
	.how .steps:after{
		clear: both;
		/*reset*/
		position: relative; height: 0; bottom: unset; background: none;
	}
	.how .steps li{
		position:relative;
		float: left;
		width: 50%;
		box-sizing:border-box;
		padding:1.8em 1.5em 1.5em 1.5em;
		/*border:5px solid #F8F7FB; /*using px because of webkit rendering inconsistencies with border/pseudo element and em units*/
		border:5px solid rgba(147, 94, 254, 1);
	}
	.how .steps li:nth-child(2n+1){
		clear:both;
	}
	.how .steps .title{ font-size:1.25em; }
	.how .steps p{ margin-bottom:0; }
	.how .steps .step0{ border:0; border-top:5px solid transparent; }
	.how .steps .step1{ border-left:0; border-bottom:0; }
	.how .steps .step2{ border-right:0; }
	.how .steps .step3{ border-left:0; border-bottom:0; border-right:0; }
	.how .steps .step2 .title{ min-height:2em; }
	.how .steps .step2, .how .steps .step3{
		padding-top:1.8em;
	}
	.how .steps:before{ display:none }
	.how .steps .title:after{
		margin-right:1.07em;
		top:0.65em;
	}
	.how .steps .step0:before, .how .steps .step2:before, .how .steps .step3:before{
		content:""; display:block; position:absolute;
		/*background: #F8F7FB;*/
		background: rgba(147, 94, 254, 1);
		width:5px;
		right: 0;
		bottom:0; 
		top: 3em;
	}
	.how .steps .step2:before{ right:0; }
	.how .steps .step0:before{
		width:auto;
		top:auto; bottom:100%;	
		height:5px;
		right:0; 
		left:2.75em;
	} 
	.how .steps .step3:before{
		top:auto;
		bottom:100%;
		height:5em;
	}
	.how .step0 .title:after, 
	.how .step1 .title:after{
		bottom: 100%;
		top: auto;
		right: auto;
		left: 0.65em;
		margin-bottom: 1.35em;
	}
	.how .page h3{ text-align:center; }

	.how .page .bottom{ text-align:center; }

	.section.revenue h2{
		margin-bottom:0;
	}
	.revenue .subheadline,
	.revenue .based{
		text-align:center;
	}
	.revenue .bottom{ margin-top:0; }
	.revenue .half{ padding:0 1em; }
	.revenue .advantages .half{ padding:0; }

	.advantages .title{
		font-size:1.15em;
	}
	.advantages .bg .layer1{
		/*
		background:
			radial-gradient(circle at 57% 47%, 
				rgba(255,64,64,0.38), rgba(255,64,64,0) 38%),
			radial-gradient(circle at 37% 55%, 
				rgba(80,0,255,0.27), rgba(80,0,255,0) 34%),
			linear-gradient(#F8F7FB, #F8F7FB);
		*/
		background: #F8F7FB url('/img/gradient-spheres-noisy.jpg') center center no-repeat;
	}

	.about-us .description{
		text-align:center;
	}

	html.auth .card{ width:28em; }
	
	body.apps .app-meta .title{
		margin-bottom:0.55rem;
	}
	body.apps .app-meta .decoration{ 
		width:5em; height:5em;
		margin-bottom:0; 
	}
	
	body.app .new-spawns .spawn .card{
		box-shadow:rgba(0,0,0,0.08) 1em 1em 0 0;
	}
	body.app .new-spawns .spawn:last-child{
		margin-bottom:2rem;
	}

	body.app.image .image-journeys{
		width: 58%;
		float: left;
	}
	body.app.image .image-actions{
		float: right;
		width: 40%;
	}
	body.app.image .generation-actions{
		border-bottom:0;
	}

	.app-message.images-multiple .export-more{
		left: 75%;
	}
}
@media (min-width:790px){
	.platform-showcase .visuals{
		left: 0;
		right: 0;
		margin: auto;
		width:260px;
	}
	.platform-showcase .sizer{
		width:248px;
	}
	.platform-showcase .control{
		padding-right:0;
	}
	.platform-showcase .prompt{
		bottom: -1em;
	}
}
/*larger tablets/tablets landscape/small desktop*/
@media (min-width:900px){
	h2{ font-size: 2em; }
	h3{ font-size: 1.5em; }
	
	.menu-active .menucover, .menutoggle{ display:none; }
	.menu-active:not(.message-active) .header, .menu-active:not(.message-active) .main{
		filter:none;
	}
	.menu, .menu-active .menu{ 
		position:absolute;
		background:none;
		box-shadow:none;
		overflow:visible;
		
		width: auto;
		bottom: auto;
		right: 6em;
		left: 5em;
		
		z-index:10;
	}
	.menu-active .menu .inside, .menu .inside{
		width:auto;
		overflow:visible;
		padding:0;
		padding-top:2.25em;
	}
	.menu .nav{
		margin-right: 9em;
		text-align: center;
    }
    
	.menu .logo{ display:none; }
	.menu .item, .menu .nav, .menu .auth,
	.menu .main-menu-items{
		display:inline-block;
	}
	.menu .main-menu-items .item{
		font-size:1em;
		margin-right: 2vw;
	}
	.menu .item .btn{ margin-bottom:0; }
	.menu .auth{
		top: 0;
		position: absolute;
		right: -5em;
		margin-top: 1.525em;
	}
	.menu .profile{
		margin-top: 0.1em;
	}
	.menu .profile .name{
		max-width: 7em;
		white-space: nowrap;
		text-overflow: ellipsis;
		display: inline-block;
		overflow: hidden;
	}
	.menu .profile .name .entity{
		margin-top:0.25em;
	}
	.menu .profile a.edit{ display:block; }
	.menu .profile .actions{
		box-sizing:border-box;
		position: absolute;
		width: 10em;
		right: 0;
		background: #f8f7fb;
		box-shadow: 0 0.5em 1em 0 rgba(0,0,0,0.2);
		overflow:hidden;
		
		transform:translateY(-0.5em);
		opacity:0;
		max-height:0;  padding:0;
		transition:transform 0.1s ease-out, opacity 0.1s ease-out, max-height 0s 10.15s linear, padding 0s 10.15s linear;
	}
	.menu .profile .actions.visible{
		max-height:90vh;
		padding:1em;
		transform:translateY(0);
		opacity:1;
		transition:transform 0.1s ease-out, opacity 0.1s ease-out;
	}
	.menu .profile .actions a:not(.btn){
		font-size:1em;
		margin-bottom:1em;
	}

	.intro h1{ font-size:2.5em; } 
	.intro .diamond.first{
		top:-2vw;
		margin-left:-50vw;
	}
	
	html.dashboard{
		background: #F8F7FB url('/img/bg-dashboard.jpg') right top no-repeat;
	}
	.menu.dashboard-version .main-menu-items{ display:block; }
	.menu .dashboard-menu-items{ display:none; }
	html.dashboard .workspace{ display:flex; }
	html.dashboard .workspace > .inside{ width:100%; box-sizing:border-box; }
	html.dashboard .sidebar{ 
		display:flex;
		width:15em; flex: 0 0 15em;
		box-sizing:border-box;
		padding:1em; 
		/*5.7 header, 20 footer */
		/*min-height: calc(100vh - 25.7em);*/
		min-height: calc(100vh - 5.7em);
		align-self:flex-start; 
	}
	html.dashboard .main{ 
		display:flex; 
		width:100%;
		flex-direction:row;
		/*align-items:flex-start;*/ 
	}
	html.dashboard .workspace{ flex-grow:1; }
	.sidebar .dashboard-menu-items{ 
		width:100%;
		min-height:25em;
		display: flex;
		flex-direction: column-reverse;
		justify-content:space-between; 
	}
	.sidebar .dashboard-menu-items .powered{
		padding-bottom:0;  
		border-bottom:0; 
		margin-bottom:0.5em;
	}
	.sidebar .item:not(:last-child){
		margin-bottom:0.75em;
	}
	.sidebar .item.apps{ 
		margin-bottom:0; 
	}
	.sidebar a:not(.btn){
		color:#200B4F;
		text-decoration:none;
		font-weight:700;
	}
	.sidebar .app-search-list .apps{
		font-size:1em;
	}
	.sidebar .app-search-list{
		/*left: -0.6em;*/
		left: -2.1em;
		/*outline: 1px solid rgba(107, 40, 255, 0.16); box-shadow:none;*/
	}
	/*
	.sidebar .app-search-list li, .sidebar .app-search-list .status{
		padding-left:0;
	}
	*/
	.app-chopchop-head{
		position: absolute;
		padding:0;
		top: -4.4em;
		left: 0;
		right: 13em;
	}
	body.app .app-chopchop-head h1{
		font-size: 1em;
		margin-top:0.3em;
	}

	/*.platform-showcase .sizer{ width:230px; }
	.platform-showcase .visuals{ top:-25px; }*/
	.platform-showcase .visual.prev{
		transform:translate(-13vw, 0) scale(0.8);
	}
	.platform-showcase .visual.next{
		transform:translate(13vw, 0) scale(0.8);
	}

	.app-screen-switcher{ font-size: 1em; }
	
	.about-us .people{
		display:flex;
		flex-direction:row;
		gap: 1em;
	}
	.about-us .people .person{
		flex: 1 1 25%;
		margin-bottom:1em;
	}
	.about-us .stats .skills,
	.about-us .stats .textual{
		font-size: 0.8em;
	}
	.about-us .stats .rating{
		font-size:0.75em;
	}
	.about-us .stats .skill{
		gap:0.5em;
	}
	.about-us .card{
		box-shadow: rgba(0, 0, 0, 0.08) 0.5em 0.5em 0 0;
	}
	.experience .title{
		/*font-size:1.2em;*/
	}
	.experience .company{
		margin:1em; 
	}
	
	.testimonials .arrows{
		display:block;
	}
	.testimonials .people-wrap .track{
	    mask-image: linear-gradient(to right, transparent, black 6em, black calc(100% - 6em), transparent);
	}
	.testimonials .person{
		padding-left:5vw;
		padding-right:5vw;
	}
	.testimonials .navidots{
		display:none;
	}
	
	.dashboard-menu-items .items, .dashboard-menu-items .credits, .dashboard-menu-items .powered .product{
		border-color:#d6c9e3;
	}
	.dashboard-menu-items .items{ 
		border-bottom:0;
		padding-bottom:0; 
	}
	.dashboard-menu-items .credits{ margin-top:2em;}
	html.dashboard .tutorial{
		margin-left:0;
	}
	.sidebar .dashboard-menu-items .add-app:before{
		margin-right:0.4em;
	}
	
	/*darker transparent colors for buttons that are on a light background todo:reconsider this place of definition*/
	.menu .btn.transparent,
	.dashboard-menu-items .btn.transparent{
		outline-color:#d6c9e3;
	}
	
	.card, .how .page{ padding:2em; }
	
	body.index .pricing-table{ margin-top:4em; }
	.pricing-table{ display:flex; }
	.pricing-table li{
		box-sizing:border-box;
		position:relative;
		padding:0;
		flex: 1 1 33%;
	}
	.pricing-table li .inside{
		/*padding:1.5em 0 0.25em 0; */
		padding:1.5em 0 0 1em 0; 
	}

	/* our pricing tables are not tightly packed only in dashboard now */
	html:not(.dashboard) .pricing-table > li:not(:first-child):not(:last-child):not(.popular) {
		border:1px solid #d6c9e3;
		border-width:0 1px;
		border-radius:0;
	}
	html:not(.dashboard) .pricing-table > li:not(:first-child){
	}
	html:not(.dashboard) .pricing-table > li:first-child{
		border-top-right-radius:0;
		border-bottom-right-radius:0;
	}
	html:not(.dashboard) .pricing-table > li:last-child{
		border-top-left-radius:0;
		border-bottom-left-radius:0;
	}

	.pricing-table table{
		table-layout: fixed; 
	}
	.pricing-table tbody,
	.pricing-table .top .shortdesc{
		font-size: 0.85em;
	}
	.pricing-table .price{ font-size:1.35em; }
	.pricing-table th{ 
		width:50%; 
		padding-right: 0;
	}
	.pricing-table td{
		width:50%;
		padding-left: 0;
	}
	/*.pricing-table .points td span:not(.unlimited){ padding-right:1.5em; }*/
	.pricing-table .yes, .pricing-table .no{
		/*float:right*/
		display: inline-block;
	}
	.pricing-table .equivalent td,
	.pricing-table .tier-enterprise .equivalent td{
		padding-left: 0;
	}
	.pricing-table .tier-enterprise .equivalent td{
		transform: translateX(-0.1em);
	}
	.pricing-table .bottom .btn, .pricing-table .bottom button {
		font-size: 0.8em;
	}
	/*.pricing-table > li:last-of-type .top{
		margin-right:0;
	}*/
	.pricing-table .ribbon{
		position:absolute;
		width:100%;
		top: 0; margin-top:0;
	}
	.pricing-table .ribbon .highlight{	
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}
	.pricing-table .popular{ 
		margin-top:-2.5em;
		padding-top:0;
		border-bottom-left-radius:0;
		border-bottom-right-radius:0;
	}
	.pricing-table .popular .inside{
		/*padding-top: 5.75em;*/
		padding-top:3.5em;
	}
	html:not(.dashboard) .pricing-table .top .preprice{ 
		min-height:5em;
	}
	html:not(.dashboard) .pricing-table .top .shortdesc{ 
		max-width:19em; 
	}
	.dashboard .pricing-table{
		flex-direction:column;
		width:100%;
	}
	.dashboard .pricing-table li{ flex:100%; }
	
	/*intro for desktops with small resolutions, will set it back to higher value in latter mediaqueries below, if the height is sufficient*/
	.intro .subheadline{	
		margin: 1em auto;
		margin-bottom: 1.4em;
	}
	.targeting .profile .box .number{
		font-size:1.5em;
		line-height:1;
	}
	.how .example .pre{ padding-right:11rem; }
	.how .example .image{
		width:10em; height:10em;
	}
	.how .example .copy{ font-size:1.25em; }

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

	.advantages .title {
		font-size: 1.25em;
	}
	
	body.app .app-meta{
		display:inline-block;
		width:100%;
	}
	body.apps .apps-wrap{ padding-top:1em; }
	body.apps .app-meta .title{
		font-size:1.5rem;
	}
	body.library .filter .picker{ 
		position:absolute;
	}
	body.library .filter{
		position:relative;
		height: 2.5em;
		margin-bottom:1em;
	}
	body.library .filter:nth-child(1), body.library .filter:nth-child(2){ z-index:4; }
	body.library .filter:nth-child(3), body.library .filter:nth-child(4){ z-index:3; }
	
	/*
		todo: implement this as css grid masonry
		like https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb
	*/
	.articles .article{ 
		width:50%; float:left; 
		box-sizing:border-box;
	}
	.articles .article:nth-child(2n){
		padding-left:1em; 
	}
	.articles .article:nth-child(2n+1){
		padding-right:1em; 
		clear:left; 
	}
	.articles:after{ clear:both;content:"";display:block; }
	.articles .image > div{ height:25vw; }
}


/*special intro for tablets/vertical desktops*/
@media (min-width:600px) and (orientation: portrait){
	.section.intro{ padding-top:1em; } /*todo: check if it's good*/
	.showcase-details .box{
		height: auto;
		max-height: 95vh;
	}
}
/*special section dedicated to making the intro as visible as possible on horizontal desktops*/
@media (orientation: landscape) and (min-width: 900px) and (min-height:	650px){
	.intro h1{ font-size:2.3em; }
	.intro .subheadline{	
		margin: 1.5em auto;
		margin-bottom: 1.9em;
	}

	.showcase-details .box{ max-width: 52vh; }
	.showcase-details .navigational .arrow{
		right: 0.5rem;
	}
	.showcase-details .navigational .arrow.left{
		left: 0.5rem; right: auto;
	}

	.section.intro{ padding-top: 2em; }
	.intro .getfreecreatives{ margin-bottom:8em; }
}
@media (orientation: landscape) and (min-width: 900px) and (min-height:	750px){
	.section.intro{ padding-top:2em; }
	.intro h1{ font-size:3em; }
	.intro .search .inside{ padding:1.5em 1.25em; }
	.intro .selected-storelink .appimg{
		width:8em;
	}
}
@media (orientation: landscape) and (min-width: 900px) and (min-height:	800px){
	.intro h1{ font-size:2.8em; }
	.intro .subheadline{
		margin: 1.75em auto;
		margin-bottom: 2.15em;
	}

	html.auth .logo{ margin-bottom:4em; }
}
@media (orientation: landscape) and (min-width: 900px) and (min-height:	850px){
	.intro .content{ max-width:1200px; }
	.intro h1{ font-size:3.5em; }
	.intro .subheadline{
		font-size:1.25em;
		margin-top:2rem;
		margin-bottom:2.4rem;
	}
	.intro .storelink::placeholder{
		font-size:1em
	};
	.intro .app-searchable{ max-width:35em; }

	.section.intro{
		margin-top:0;
		padding-top: 4em;
	}
	.intro .getfreecreatives{ margin-bottom:8em; }
}
@media (orientation: landscape) and (min-width: 900px) and (min-height:	1000px){
	.section.intro{ padding-top:6em; }

	.showcase-details .previews{ margin: auto; }
}
@media (orientation: landscape) and (min-width: 900px) and (min-height:	1300px){
	/*.section.intro{ padding-top:6em; }*/
}

/*regular desktop*/
@media (min-width:1200px){
	.section{ padding:3em 0; }
	body.index h2{ font-size: 4em; }
	body.index .revenue h2{ font-size:3em }

	.section.preface .content,
	.section.examples .content{
		max-width:1024px;
	}

	.content{ max-width:1200px; }
	html.dashboard .workspace{ padding-left:2em; }
	body.app.chopchop .workspace{ padding: 0; }

	.hide-belowregulardesktops{ display:block; }
	.hide-regulardesktopsup{ display:none; }		

	.section.intro{ 
		padding-bottom: 4em;
		font-size:1.1em;
	}
	.platform-showcase h2{
		margin-bottom: 0;
	}
	.platform-showcase .subheadline{
		font-size: 1.75em;
		margin-top: 1.25rem;
	}
	.platform-showcase .sizer{
		width:320px;
	}
	.platform-showcase .content{
		padding:0;
		overflow:visible;
	}
	.platform-showcase .visuals{
		top:-43px;
		width:360px;
	}
	.platform-showcase .visual.next{
		transform:translate(250px, 0) scale(0.7);
	}
	.platform-showcase .visual.prev{
		transform:translate(-250px, 0) scale(0.7);
	}
	.platform-showcase .visual.awaynext{
		transform:translate(340px, 0) scale(0.6);
	}
	.platform-showcase .visual.awayprev{
		transform:translate(-340px, 0) scale(0.6);
	}
	.platform-showcase .prompt{
		bottom: 2em;
	}

	.how .steps{
		max-width:1300px;
		padding-left:5em;
	}
	.how .steps li{ width:25%; }
	.how .steps li:nth-child(1){ width:25%; }
	.how .steps li:nth-child(2){ width:24%; }
	.how .steps li:nth-child(3){ width:26%; }
	.how .steps li:nth-child(2n+1){ clear:none; }
	.how .steps .iconed:before{
		display:block;
		margin-bottom:0.5em;
	}
	.how .step0 .iconed:before{
		position:absolute;
		right:100%;
	}
	.how .steps .step1, .how .steps .step2, .how .steps .step3{
		/*border:0.3em solid #F8F7FB;*/
		border:0.3em solid rgba(147, 94, 254, 1);
	}
	.how .steps .step0{
		border:0;
		padding-left:0;
		padding-top:5.2em;
	}
	.how .steps .step1{
		border-top:0;
		padding-top:0;
	}
	.how .steps .step2{
		border-left:0;
		border-right:0;
		border-bottom:0;
	}
	.how .steps .step3{
		border-top: 0;
		border-bottom: 0;
		border-right: 0;
		padding-top:0;
	}
	.how .steps .step0:before{
		right:auto;
		width:0.3em;
		height:4em;
		top:0;
		left:3em;
	}
	.how .steps .step0:after{
		content:"";display:block;position:absolute;
		/*background:#F8F7FB;*/
		background: rgba(147, 94, 254, 1);
		top:0; height:0.3em;
		right:0;
		left:3em;
	}
	.how .steps .step2:before{ display:none; }
	.how .steps .step3:before{
		bottom:0; left:0;
		height:0.3em;
		width:5em;
		/*background: linear-gradient(90deg, #F8F7FB, transparent);*/
		background: linear-gradient(90deg, rgba(147, 94, 254, 1), rgba(147, 94, 254, 0));
	}
	.how .step1 .title, .how .step3 .title{
		margin-top:-1.2rem;
	}
	.how .steps .title:after{
	    top: 3.3em;
	}
	.how .step0 .title:after{
		top: auto;
		left: 2.62em;
		margin-bottom: 0.5em;
	}
	.how .step1 .title:after{
	    left: auto;
	    right:100%;
	}
	.how .step2 .title{ line-height:1.25; }
	.how .step2 .gradientcontainer{
		float:left;
		margin-top:0.25em;
	}

	.revenue .results,
	.revenue .subheadline{
		font-size:1.25em;
	}

	.intro .diamond.first{
		/*top:-600px;*/
		margin-left:-500px;
		top:-100px;
	}
	.intro .diamond.second{
		margin-left:-400px;
	}
	.revenue .diamond.first{
		left: auto;
		right: 50%;
		margin-right: -5em;
		top: -8em;
	}

	.pricing-table .top, .pricing-table .bottom{
		margin-left:1rem;
		margin-right:1rem;
	}

	.about-us .people{
		gap: 2em;
	}
	.about-us .people .person{
		/*flex: 1 1 33%;*/
	}
	.about-us .stats .skills,
	.about-us .stats .textual{
		font-size: 1em;
	}
	.about-us .card{
		box-shadow: rgba(0, 0, 0, 0.08) 1em 1em 0 0;
	}
	/*
	.experience .companies{
		justify-content:center;
	}
	*/
	.experience .company{
		margin:0 2em;
	}
	/*
	.testimonials .people-wrap{
	    mask-image: linear-gradient(to right, transparent, black 6em, black calc(100% - 6em), transparent);
	}
	*/
	.testimonials .person{
		padding-left:1em;
		padding-right:1em;
	}

	html.dashboard .tutorial{
		max-width:38em;
	}
	html.dashboard .sidebar{
		width:17em;
		flex-basis:17em;
	}
	
	html.dashboard .workspace > .inside{ 
		padding-left:0;
	    box-sizing: content-box; 
	}
	html.dashboard .cards .half:not(.bigger){ width:50%; }
	html.dashboard .cards .half{
		max-width:none;
		padding-left:1em; 
		padding-right:1em;
	}
	html.dashboard .cards .bigger,
	body.app.image .cards .active-generation{
		max-width:42em; /*40em min width meta + 2em card padding*/
	}
	body.icon .parameters.parameters > .item{
		max-width: 38.15em;
	}
	.generated-images{
		max-width: 38em;
	}
	body.icon .dropdown.art_style img{
		height: 3.5em;
	}

	/* //todo: delete me
	.generated-images .item,
	.generated-images .item:nth-child(3n){
		width: 22.75%;
		margin-right: 3%;
		width: calc(25% - 1.5em);
		margin-right: calc(2em);
	}
	.generated-images .item:nth-child(4n + 1) {
		clear:both;
	}
	*/

	.app-screen-switcher{ font-size: 1.2em; }

	html.dashboard .cards.halves{
		margin-left:-1em; 
		margin-right:-1em;
	}
		
	body.app .app-meta{
		min-width:40em;
	}
	.spawns.listing .add-spawn .picker .cost{
		min-width: 7em;
		text-align: center;
	}
	.spawns.listing .add-spawn .amount-label .hide-belowregulardesktops:before{
		content:"×";display:inline-block;
		margin-right:0.7rem;
	}
	.image-journeys .images-wrap{
		/*max-width: 70%;*/
	}
	.image-journeys .actions{
		display: flex;
		flex-wrap: wrap;
	}
	.image-journeys .btn:first-child{
		margin-right:6%;
		margin-right:calc(1em + 0);
	}
	.image-journeys .btn:not(.export){
		width:47%;
		width:calc(50% - 0.5em);
		margin-bottom: 0;
	}
	.image-journeys .btn.export{
		margin-top:1em;
	}
	.image-journeys .btn .textual{
		display: block;
	}
	.image-journeys .btn .visual{
		position:absolute;
		bottom:0.5em;
	}
	body.apps .app-meta .title{
	    font-size: 1.25rem;
	    margin-bottom:1rem;
	}

	body.app.image .generation-actions .actionwrap form{
		display: flex;
		gap: 0.5em;
	}
	body.app.image .generation-actions input{
		width: auto;
		flex: 1;
	}
	body.app.image .generation-actions button{
		flex: 0 0 auto;
	}
	
	.tablefields .labels{
		min-width:10em;
	}
	
	.section.pricing .content{ max-width:1800px; }
	.pricing-table .top .shortdesc{
		min-height:4em;
	}
	.dashboard .pricing-table .top .shortdesc{
		font-size:0.9em;
		min-height: 6em;
	}
	.dashboard .pricing-table .top .title{
		white-space:nowrap;
	} 
	.dashboard .pricing-table{
		flex-direction: row;
		gap:0.25em;
	}
	.dashboard .pricing-table li{
		flex: 0 1 33%;
		/*margin: 0 0.5em;*/
		margin-top:0;
	}
	.dashboard .pricing-table li .inside{
		padding:1.5em 0 0 0; 
	}
	html:not(.dashboard) .pricing-table li:first-child .inside{ 
		padding-left:1em;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0; 
	}
	html:not(.dashboard) .pricing-table li:last-child .inside{
		padding-right:1em;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}
	.pricing-table th{ padding-right:1em; width:56%; }
	
	.pricing-table tbody,
	.pricing-table .top .shortdesc{
		font-size: 0.9em;
	}
	/*.pricing-table th{ width:35%; }
	.pricing-table td{ width:65%; }*/
	
	.dashboard .pricing-table th{
		padding-right:0.5em;
	}
	.dashboard .pricing-table td{
		padding-left:0.5em;
	}
	.dashboard .pricing-table .ribbon{ font-size:0.8em; }
	
	body.library .filter{ width:25%; }
	body.library .filter:nth-child(2n+1){ clear:none; }
	
	
	.articles .article{ 
		width:33%;
		padding-left:1em; padding-right:1em;
	}
	.articles .article:nth-child(2n+1){ clear:none; }
	.articles .article:nth-child(3n+1){
		clear:left; padding-left:0;
	}
	.articles .article:nth-child(3n){
		padding-right:0;
	}
	.articles .image > div{ height:250px }
}
@media (min-width:1400px){
	input, textarea, select, button, .btn{
    	font-size:14pt;
	}
	.content{ 
		padding-left:0; 
		padding-right:0; 
		max-width:1250px;
	}

	.header .logo.minimal{ display:none; }
	.header .logo.full{ display:block; }
	
	.menu, .menu-active .menu{
		left: 15em;
		right:15em;
	}

	.menu .auth{ right: -14em;}
	.menu .nav{ margin-right:0; }
	.menu .nav .item{ margin-right:1em; }
	.menu .profile .name{ max-width: 8em; }

	.menu .inside{ padding-top:0; }
	.menu .nav{
		position: absolute;
		top:2.25em;
		left: 0; right: 0;
		margin-left: auto; margin-right:auto;
		max-width: 750px;
	}
	
	.content .cards{
		/* this fits them to the content's max width*/
		/*i think they kind of look nice if they're centered a bit too, as they also cast a shadow. not sure*/
		margin-left:-1em; margin-right:-1em;  
	} 
	.card{ padding:1.5em; }
	.articles .image{ 
		margin:-1.5em;
		margin-bottom:1em;
	}

	body.index h2{ font-size: 4em; }
	body.index .revenue h2{ font-size:3.5em }
	
	html.dashboard .header{
		max-width:none;
		padding-left:1em; padding-right:1em;
	}
	html.dashboard .workspace{
		padding-left:3em;
		padding-right:3em;
	}
	body.app.chopchop .workspace{ padding: 0; }
	html.dashboard body.subscription .workspace{
		padding-left:0;
		padding-right: 1em;
	}

	.app-chopchop-head{
		left: 1em;
		/*top:-2em;*/
		left: 2em;
	}
	body.app .app-chopchop-head .app-meta .decoration{
		width: 3em;
		height: 3em;
	}
	body.app .app-chopchop-head h1{
		font-size: 1.75em;
		margin-top: 0.15em;
	}

	.how .steps{
		max-width:1600px;
		padding-left: 7em;
		padding-right: 1.5em;
	}
	.how .steps li{ padding:1.7em;}
	.how .steps .title{
		margin-right:-1em;
		font-size:1.3em;
	}
	.how .steps .title:after{
		margin-right:1.27em;
		top: 3.45em;
	}
	.how .step0 .title:after{ top:auto; }
	.how .steps .iconed:before{
		display:block;
		margin-bottom:0.5em;
		margin-right:1.3533em;
	}
	.how .steps .step3{
		/*padding-right;*/	
	}
	.advantages .title{
		font-size:1.2em;
	}
	.advantages .card .title, .advantages .card p{
		position:relative;
		margin-left:5.75rem;
	}
	.advantages .iconed:before{
		position:absolute;
		right:100%;
		width:4.2rem; height:4.2rem;
		margin-right: 1.5rem;
	}

	.section.pricing{ padding-left: 1em; padding-right: 1em; }
	.pricing-table tbody{ font-size:1em; }
	.dashboard .pricing-table tbody,
	.dashboard .pricing-table .top .shortdesc{
		font-size:0.8em;
	}
	.pricing-table th{ width:65%; }
	.pricing-table td{ width:36%; }
	.dashboard .pricing-table .ribbon{ font-size:0.9em; }
	.pricing-table .badge{
		top: -3em; right: -2em;
	}
	.dashboard body.subscription .workspace > .inside{
		max-width: 1400px;
		padding-right: 0;
	}
	.dashboard .pricing-table .top .shortdesc{
		min-height:5em;
	}
	.pricing-table .text{ font-size:0.9em; }
	.pricing-table .num{ font-size:2em; }

	.about-us .content{
		max-width:1300px;
	}
	.about-us .stats .rating{
		font-size:0.85em;
	}
	.about-us .textual .label{
		width: calc(53% - 1em);
	}
	.about-us .textual .value{
		white-space:nowrap;
	}
}
@media (min-width:1500px){
	body.index h2{ font-size: 4.5em; }

	.platform-showcase .feature-controls{
		width: 55%;
	}

	.how .steps li{ padding:2em;}
	.how .steps .title:after{
		margin-right:1.55em;
	}
}
@media (min-width:1600px){
	/*dashboard content center*/
	.cards.panel > .item,
	body.copy .add-spawn, body.copy .new-spawns,
	.cards.generated-images{
		margin-left: auto;
		margin-right: auto;
	}

	/*body.library .datepick .text.selected{ font-size:0.85em; }*/
	.dashboard .pricing-table .top .shortdesc{
		min-height:4em;
	}
	body.app.chopchop .workspace > .inside{
		padding-right: 12em;
	}

	.app-message .box{
		width:36em;
	}
	.app-message.wide .box{
		width: 72em;
	}
	.about-us .content{
		max-width:1600px;
		padding-left:3em;
		padding-right:3em;
	}
	.about-us .stats .rating{
		font-size:1em;
	}
	.about-us .people {
		gap: 3em;
	}
}
@media (min-width:1800px){
	body.index h2{ font-size: 5em; }
	body.index .revenue h2{ font-size:4em }

	html{ font-size:16pt; }
	input, textarea, select, button, .btn{
    	font-size:15pt;
	}
	.about-us .stats .rating{
		font-size:0.9em;
	}
	.menu .nav{
		max-width:850px;
	}
	.intro .content{ max-width:1400px; }
	.intro > .content{ max-width:1500px; }
	.intro h1{ font-size:4em; }
	.index .section.intro{ font-size:1em; }
	.platform-showcase .sizer{
		width: 400px;
	}
	.platform-showcase .visuals{
		width: 460px;
		top: -50px;
	}
}
@media (min-width:2400px){
	
}