/*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:var(--shadow-large);
	}
	.card{ margin-bottom:2em; }
	
	.intro h1{ font-size:2em; }
	.intro .actions .btn{ font-size:1em; }
	.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 .getfreecreatives .post-email p{
		position: relative;
		z-index: 2;
	}
	.intro .getfreecreatives .post-email .arrow{
		display: inline-block;
		position: absolute;
		top: 100%;
		margin-top: -0.5em;
		margin-left: 0.5em;
	}
	.intro .app-searchable{
		max-width:32em;
	}
	.intro .app-searchable .inputborder{
		padding:0;
		background:transparent;
		margin-bottom:0;
		margin-right: calc(-1 * var(--border-radius-inputs));
	}
	.intro .getfreecreatives .app-searchable{
		display:flex;
		
		/*background: var(--main-button-calm-gradient);*/
		padding:2px;
		border-radius:var(--border-radius-inputs);
	}
	.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:2.35em; }
	.how .steps:before{ 
		top:2em;
		bottom:3em;
	}
	.how .steps:after{ height:3em; }
	.how .steps .title{ font-size:1.5em; }
	.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; }
	
	.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; }

	.job-offers{
		grid-template-columns: repeat(auto-fit, 10em);
	}
}

/*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 .links{
		display: block;
	}
	/*.footer .half{ float:right; }*/
	.footer .contactspace{ height:4.8rem; } 
	.footer .title, .footer .title + p{ margin:0; }
	.footer .main-menu-items{ padding-right:3em; }
	.footer .halves{
		display: flex;
		flex-flow: row-reverse;
	}
	.footer .half.contact{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.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 var(--color-base); /*using px because of webkit rendering inconsistencies with border/pseudo element and em units*/
		border:5px solid var(--rainbow-3);
	}
	.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 .iconed:before{
		display: block;
		position: absolute;
		margin: 0;
		margin-bottom: 0.55em;
		bottom: 100%;
		left: 0;
	}
	.how .step2 .iconed:before,
	.how .step3 .iconed:before{
		margin-bottom: -1.95em;
		left: auto;
		right: 100%;
		margin-right: 0.3em;
	}
	.how .steps .step0:before, .how .steps .step2:before, .how .steps .step3:before{
		content:""; display:block; position:absolute;
		/*background: var(--color-base);*/
		background: var(--rainbow-3);
		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 .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: var(--color-base) url('/img/gradient-spheres-noisy.jpg') center center no-repeat;
	}

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

	html.auth .card{ width:28em; }
}
@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/very small desktop*/
@media (min-width:900px){
	h2{ font-size: 2em; }
	h3{ font-size: 1.5em; }

	.header{ padding:1.6em }
	.header .logo{ height:2.4rem }
	.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: 11em;
		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: 1.4vw;
	}
	.menu .item .btn{ margin-bottom:0; }
	.menu .auth{
		top: 0;
		position: absolute;
		right: -4.5em;
		margin-top: 1.525em;
	}

	.intro h1{ font-size:2.5em; } 
	.intro .actions .btn{ font-size:1.05em; }
	.intro .diamond.first{
		top:-2vw;
		margin-left:-50vw;
	}

	.platform-showcase .visual.prev{
		transform:translate(-13vw, 0) scale(0.8);
	}
	.platform-showcase .visual.next{
		transform:translate(13vw, 0) scale(0.8);
	}
	.about-us .people{
		display:flex;
		flex-direction:row;
		gap: 1em;
	}
	.about-us .people .person{
		flex: 1 1 25%;
		margin-bottom:1em;
	}

	.about-us .star:after{
		top:0.5em;
	}
	.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:var(--shadow-medium);
	}
	.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;
	}
	
	/*darker transparent colors for buttons that are on a light background*/
	.menu .btn.transparent{
		outline-color:var(--color-layout-border);
	}
	
	.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;
		flex: 1 1 33%;
	}

	html:not(.dashboard) .pricing-table > li:not(:first-child){
	}

	.pricing-table table{
		table-layout: fixed; 
	}
	.pricing-table tbody,
	.pricing-table .top .shortdesc{
		font-size: 0.85em;
	}
	.pricing-table th{ width:50%; }
	.pricing-table td{ width:50%; }
	.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 .popular{ 
	}
	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;
	}
	.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;
	}

	/*
		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; }

	.job-offers{
		grid-template-columns: repeat(auto-fit, 12em);
	}
	.hiring .preface h1{
		font-size: 4em;
	}
	html.auth .main{
		width: 100%;
		min-height: 100vh;
	}
	html.auth .content{
		padding: 0;
		max-width: none;
		min-height: 100vh;
	}
	html.auth .card{
		min-height: 100vh;
		max-width: none;
		width:50%;
		border-radius: 0;
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: none;
	}
	html.auth .card .inside{
		max-width: 25em;
	}
	html.auth .logo{
		margin:0;
		position: fixed;
		left: 75%; top:50%;
		transform: translate(-50%, -50%);
		height:auto; width:10%;
	}
}


/*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 .actions .btn{font-size:1.25em}
	.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;
	}
}
@media (orientation: landscape) and (min-width: 900px) and (min-height:	850px){
	.intro .content{ max-width:1200px; }
	.intro h1{ font-size:3.5em; }
	.intro .actions .btn{font-size:1.3em}
	.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){
	.content{ max-width:1200px; }
	.section{ padding:3em 0; }

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

	body.index h2{ font-size: 4em; }
	body.index .revenue h2{ font-size:3em }

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

	.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{
		left: 0;
		bottom: auto;
		top:-0.3em;
		margin-left: -2.3em;
	}
	.how .step0 .iconed:before{
		margin-left: 1.5em;
		bottom: auto;
		top: -2.4em;
	}
	.how .steps .step1, .how .steps .step2, .how .steps .step3{
		/*border:0.3em solid var(--color-base);*/
		border:0.3em solid var(--rainbow-3);
	}
	.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:var(--color-base);*/
		background: var(--rainbow-3);
		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, var(--color-base), transparent);*/
		background: linear-gradient(90deg, var(--rainbow-3), transparent);
	}
	.how .step1 .title, .how .step3 .title{
		margin-top:-1.2rem;
	}
	.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;
	}

	.about-us .people{
		gap: 2em;
	}
	.about-us .stats .skills,
	.about-us .stats .textual{
		font-size: 1em;
	}
	.about-us .stats .rating{
		font-size: 0.95em;
	}
	.about-us .card{
		box-shadow:var(--shadow-large);
	}
	.experience .company{
		margin:0 2em;
	}
	.testimonials .person{
		padding-left:1em;
		padding-right:1em;
	}
	
	.section.pricing .content{ max-width:1800px; }
	.pricing-table .top .shortdesc{
		min-height:4em;
	}
	html:not(.dashboard) .pricing-table li:first-child{ 
		padding-left:1em;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0; 
	}
	html:not(.dashboard) .pricing-table li:last-child{
		padding-right:1em;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}
	.pricing-table th{ width:56%; }
	
	.pricing-table tbody,
	.pricing-table .top .shortdesc{
		font-size: 0.9em;
	}

	.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 }
}

/*regular desktop/high dpi laptops*/
@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: -13em;}
	.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 }

	.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 .iconed:before{ margin-left: -2.45em; }
	.how .step0 .iconed:before{ margin-left: 1.42em; }
	.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; }
	/*//here*/
	/*.pricing-table tbody{ font-size:1em; }*/
	.pricing-table th{ width:60%; }
	.pricing-table td{ width:40%; }
	.pricing-table .badge{
		top: -3em; right: -2em;
	}
	.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:1em;
	}
	.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 .iconed::before { margin-left: -2.65em; }
	.how .step0 .iconed::before { margin-left: 1.42em; }
}

/*larger desktop*/
@media (min-width:1600px){
	.menu .auth{
		right: auto;
		left: 50%;
		margin-left: 24em;
		white-space: nowrap;
	}
	.app-message .box{
		width:36em;
	}
	.app-message.wide .box{
		width: 72em;
	}
	 .platform-showcase .prompt {
		bottom: 6em;
		left: auto;
		right: 0;
		margin-right: -12em;
		width: 25em;
	}
	.about-us .content{
		max-width:1600px;
		padding-left:3em;
		padding-right:3em;
	}
	.about-us .stats .rating{
		font-size:1em;
	}
	.about-us .people {
		gap: 3em;
	}
}

/*large desktops*/
@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;*/
		max-width:1000px
	}
	.intro .content{ max-width:1400px; }
	.intro > .content{ max-width:1500px; }
	.intro h1{ font-size:4em; }
	.intro .subheadline{ 
		font-size: 1.5em;
	 }
	.intro .actions .btn{font-size:1.5em}
	.index .section.intro{ font-size:1em; }
	.platform-showcase .sizer{
		width: 400px;
	}
	.platform-showcase .visuals{
		width: 460px;
		top: -50px;
	}
}

/*big screens*/
@media (min-width:2400px){
		
}