@charset "utf-8";

/* -----------------------------------------------------------------------------------------------------------------
	large tablet / compact desktop
----------------------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 1250px) {
	.global-nav li {
		margin-left: 25px;
	}

	.hero-copy {
		width: 52%;
	}

	.hero-constellation {
		opacity: .38;
	}

	.thumb-copy {
		padding-left: 12px;
		padding-right: 10px;
	}

	.app-copy h3 {
		font-size: 31px;
	}

	.simple-features li {
		padding-left: 5px;
		padding-right: 5px;
	}
}

@media screen and (max-width: 1050px) {
	.section-inner,
	.section-heading {
		width: 90%;
	}

	.header-inner {
		width: 94%;
	}

	.suite-logo {
		width: 28%;
	}

	.global-nav {
		width: 72%;
	}

	.global-nav li {
		margin-left: 18px;
	}

	.global-nav a {
		font-size: 9px;
	}

	.global-nav .nav-free a {
		padding-left: 16px;
		padding-right: 16px;
	}

	.hero-copy {
		left: 5%;
		width: 60%;
	}

	.hero-controls {
		left: 5%;
		width: 90%;
	}

	.hero-image-editor,
	.hero-image-browser {
		background-position: 68% center;
	}

	.vision-copy {
		width: 63%;
	}

	.vision-orbit {
		width: 34%;
	}

	.vision-copy h2 {
		font-size: 44px;
	}

	.app-story {
		padding-bottom: 120px;
		padding-top: 120px;
	}

	.app-visual,
	.app-browser .app-visual {
		float: none;
		margin-bottom: 68px;
		width: 100%;
	}

	.app-copy,
	.app-browser .app-copy {
		float: none;
		margin: 0 auto;
		max-width: 720px;
		padding-top: 0;
		width: 85%;
	}

	.app-copy h3 {
		font-size: 36px;
	}

	.download-card {
		padding-left: 27px;
		padding-right: 27px;
	}

	.download-card h3 {
		font-size: 23px;
	}

	.creator-heading {
		margin-bottom: 85px;
	}

	.creator-portrait {
		width: 50%;
	}

	.creator-copy {
		width: 44%;
	}

	.creator-copy h3 {
		font-size: 42px;
	}

	.creator-role {
		padding-left: 2.3%;
		padding-right: 2.3%;
	}

	.project-banner {
		height: 330px;
	}

	.banner-copy strong {
		font-size: 26px;
	}
}

/* -----------------------------------------------------------------------------------------------------------------
	750px mobile canvas
----------------------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 850px) {
	body {
		font-size: 18px;
	}

	#site-header {
		padding: 14px 0;
	}

	#site-header.is-fixed {
		padding: 10px 0;
	}

	.suite-logo {
		width: 36%;
	}

	.logo-star {
		font-size: 34px;
	}

	.logo-type strong {
		font-size: 29px;
	}

	.logo-type small {
		font-size: 9px;
	}

	.global-nav {
		width: 64%;
	}

	.global-nav ul {
		width: 100%;
	}

	.global-nav li {
		margin-left: 0;
		text-align: center;
		width: 25%;
	}

	.global-nav li:nth-child(1),
	.global-nav li:nth-child(2) {
		display: none;
	}

	.global-nav li:nth-child(3) {
		width: 44%;
	}

	.global-nav li.nav-free {
		float: right;
		width: 56%;
	}

	.global-nav a {
		font-size: 8px;
		letter-spacing: .10em;
		white-space: nowrap;
	}

	.global-nav .nav-free a {
		padding: 0 8px;
	}

	#mainvisual {
		height: 1050px;
		min-height: 1050px;
	}

	.hero-copy {
		left: 6%;
		max-width: 610px;
		top: 17%;
		width: 82%;
	}

	.hero-copy h1,
	.hero-copy h2 {
		font-size: 58px;
	}

	.hero-tag {
		font-size: 17px;
	}

	.hero-app {
		font-size: 22px;
	}

	.hero-lead {
		font-size: 16px;
	}

	.hero-image {
		background-position: 63% center;
	}

	.hero-shade {
		background:
			linear-gradient(90deg, rgba(3, 9, 38, .70) 0%, rgba(5, 16, 55, .46) 66%, rgba(1, 4, 18, .08) 100%),
			linear-gradient(0deg, rgba(1, 5, 24, .55) 0%, rgba(1, 4, 20, .01) 52%, rgba(22, 43, 104, .06) 100%);
	}

	.hero-constellation {
		display: none;
	}

	.hero-controls {
		bottom: 36px;
		left: 5%;
		width: 90%;
	}

	.hero-thumbnails {
		width: 91%;
	}

	.hero-thumb {
		height: 108px;
		margin-right: 1.5%;
		width: 31.83%;
	}

	.thumb-image {
		height: 46px;
		width: 100%;
	}

	.thumb-copy {
		padding: 9px 10px;
		width: 100%;
	}

	.thumb-copy small {
		font-size: 7px;
	}

	.thumb-copy strong {
		font-size: 10px;
	}

	.slide-toggle {
		height: 54px;
		margin-top: 27px;
		width: 54px;
	}

	.pause-icon:before {
		left: 22px;
	}

	.pause-icon:after {
		right: 22px;
	}

	.scroll-guide {
		display: none;
	}

	.voyage-meter {
		display: none;
	}

	.cosmic-nebula {
		filter: blur(48px);
	}

	.hero-sparkles i:nth-child(2),
	.hero-sparkles i:nth-child(4),
	.hero-sparkles i:nth-child(6) {
		display: none;
	}

	.vision-section:after,
	.applications-section:after,
	.download-section:after {
		font-size: 58px;
	}

	.vision-section {
		min-height: 1080px;
		padding-bottom: 130px;
		padding-top: 160px;
	}

	.vision-copy {
		float: none;
		width: 100%;
	}

	.vision-copy h2 {
		font-size: 47px;
	}

	.vision-copy > p:not(.english-title) {
		font-size: 17px;
	}

	.vision-orbit {
		float: none;
		height: 330px;
		margin: 60px auto 0;
		width: 100%;
	}

	.orbit-one {
		height: 230px;
		margin: -115px 0 0 -115px;
		width: 230px;
	}

	.orbit-two {
		height: 320px;
		margin: -160px 0 0 -160px;
		width: 320px;
	}

	.applications-section {
		padding-top: 140px;
	}

	.section-heading {
		margin-bottom: 90px;
	}

	.section-heading h2 {
		font-size: 46px;
	}

	.app-story {
		padding-bottom: 100px;
		padding-top: 100px;
	}

	.app-copy,
	.app-browser .app-copy {
		width: 100%;
	}

	.app-copy h3 {
		font-size: 40px;
	}

	.app-name {
		font-size: 20px;
	}

	.app-description {
		font-size: 17px;
	}

	.simple-features span {
		font-size: 12px;
	}

	.stella-button {
		font-size: 15px;
		padding-bottom: 18px;
		padding-top: 18px;
	}

	.stella-button i {
		top: 15px;
	}

	.download-section {
		padding-bottom: 150px;
		padding-top: 150px;
	}

	.heading-lead {
		font-size: 17px;
	}

	.download-list {
		margin-left: 0;
		margin-right: 0;
	}

	.download-card {
		float: none;
		margin: 0 0 28px;
		min-height: 0;
		padding: 42px 42px 36px;
		width: 100%;
	}

	.download-card h3 {
		font-size: 30px;
		min-height: 0;
	}

	.download-card > p:not(.download-number):not(.download-label) {
		font-size: 15px;
		min-height: 0;
	}

	.download-card a {
		font-size: 16px;
		padding-bottom: 16px;
		padding-top: 16px;
	}

	.download-card small {
		font-size: 10px;
	}

	.free-note {
		font-size: 13px;
	}

	.booth-banner {
		background-position: 58% center;
		min-height: 520px;
		padding: 75px 45px;
	}

	.booth-copy {
		max-width: 410px;
	}

	.booth-copy strong {
		font-size: 34px;
	}

	.booth-copy em {
		font-size: 15px;
		max-width: 320px;
	}

	.booth-action {
		bottom: 45px;
		left: 45px;
		right: auto;
	}

	.fanbox-support {
		margin-top: 30px;
		padding: 54px 5.5% 38px;
	}

	.fanbox-intro-copy,
	.fanbox-intro-action {
		float: none;
		width: 100%;
	}

	.fanbox-intro-action {
		padding-top: 30px;
	}

	.fanbox-intro-action small {
		text-align: left;
	}

	.fanbox-intro h3 {
		font-size: 32px;
	}

	.fanbox-plan,
	.fanbox-plan + .fanbox-plan {
		float: none;
		min-height: 0;
		padding: 36px 5%;
		width: 100%;
	}

	.fanbox-plan + .fanbox-plan {
		margin-top: 22px;
	}

	.fanbox-plan > p:not(.fanbox-plan-index):not(.fanbox-plan-price):not(.fanbox-saving) {
		min-height: 0;
	}

	.fanbox-message {
		padding-left: 1%;
		padding-right: 1%;
	}

	.fanbox-message p {
		font-size: 13px;
		text-align: left;
	}

	.fanbox-message strong {
		display: block;
		font-size: 17px;
		margin: 0 0 8px;
	}

	.fanbox-renewal-note {
		font-size: 10px;
		text-align: left;
	}

	.creator-section {
		padding-bottom: 155px;
		padding-top: 155px;
	}

	.creator-section:before {
		font-size: 18vw;
		right: -20%;
		top: 96px;
	}

	.creator-section:after {
		font-size: 70px;
		right: 5%;
		top: 2.4%;
	}

	.creator-light {
		height: 330px;
		top: 13%;
	}

	.creator-heading {
		margin-bottom: 80px;
		max-width: 650px;
	}

	.creator-heading h2 {
		font-size: 48px;
		line-height: 1.55;
	}

	.creator-heading-lead {
		font-size: 17px;
		line-height: 1.9;
	}

	.creator-mobile-break {
		display: inline;
	}

	.creator-portrait,
	.creator-copy {
		float: none;
		width: 100%;
	}

	.creator-portrait figure {
		height: 690px;
	}

	.creator-portrait figcaption {
		bottom: 38px;
		left: 42px;
	}

	.creator-portrait figcaption span {
		font-size: 43px;
	}

	.creator-portrait figcaption small {
		font-size: 10px;
	}

	.portrait-coordinate {
		font-size: 9px;
	}

	.creator-copy {
		padding-top: 72px;
	}

	.creator-role-label {
		font-size: 11px;
		margin-bottom: 24px;
	}

	.creator-copy h3 {
		font-size: 51px;
	}

	.creator-copy h3 small {
		font-size: 13px;
	}

	.creator-copy > p:not(.creator-role-label) {
		font-size: 17px;
		line-height: 2.15;
	}

	.creator-copy .creator-intro {
		font-size: 21px;
	}

	.creator-signature {
		margin-top: 48px;
	}

	.creator-signature strong {
		font-size: 31px;
	}

	.technology-disclosure {
		margin-top: 105px;
		padding: 50px 6%;
	}

	.disclosure-title,
	.disclosure-copy,
	.disclosure-facts {
		float: none;
		width: 100%;
	}

	.disclosure-title > p {
		font-size: 10px;
	}

	.disclosure-title h3 {
		font-size: 35px;
	}

	.disclosure-copy {
		border-left: 0;
		border-top: 1px solid rgba(145, 205, 255, .20);
		margin-top: 32px;
		padding: 31px 0 0;
	}

	.disclosure-copy p {
		font-size: 16px;
	}

	.disclosure-facts {
		margin-top: 31px;
		padding-left: 0;
	}

	.disclosure-facts p {
		padding: 12px 0;
	}

	.disclosure-facts small {
		font-size: 9px;
	}

	.disclosure-facts strong {
		font-size: 13px;
	}

	.experience-heading,
	.related-heading {
		margin-bottom: 60px;
		margin-top: 120px;
	}

	.experience-heading h3,
	.related-heading h3 {
		font-size: 43px;
	}

	.creator-roles {
		margin-left: -1%;
		margin-right: -1%;
	}

	.creator-role {
		margin-left: 1%;
		margin-right: 1%;
		min-height: 390px;
		padding: 40px 4% 42px;
		width: 48%;
	}

	.creator-role h4 {
		font-size: 18px;
	}

	.creator-role > p:last-child {
		font-size: 15px;
		line-height: 2;
	}

	.role-number {
		font-size: 11px;
	}

	.role-symbol {
		font-size: 35px;
	}

	.creator-process {
		padding: 0;
	}

	.process-item {
		border-bottom: 1px solid rgba(138, 200, 255, .14);
		min-height: 135px;
		padding: 34px 3% 28px;
		width: 50%;
	}

	.process-item:nth-of-type(1),
	.process-item:nth-of-type(5) {
		border-right: 1px solid rgba(138, 200, 255, .14);
	}

	.process-arrow {
		display: none;
	}

	.process-item b {
		font-size: 10px;
	}

	.process-item span {
		font-size: 13px;
	}

	.process-item small {
		font-size: 12px;
	}

	.related-heading > p:last-child {
		font-size: 16px;
		line-height: 1.9;
	}

	.project-banners {
		margin-left: 0;
		margin-right: 0;
	}

	.project-banner {
		float: none;
		height: 410px;
		margin: 0 0 32px;
		width: 100%;
	}

	.project-banner .banner-copy {
		bottom: 39px;
		left: 42px;
		max-width: 76%;
	}

	.banner-copy small {
		font-size: 10px;
	}

	.banner-copy strong {
		font-size: 34px;
	}

	.banner-copy em {
		font-size: 14px;
		margin-top: 10px;
	}

	.project-banner > b {
		bottom: 39px;
		height: 49px;
		line-height: 46px;
		right: 39px;
		width: 49px;
	}

	#footer {
		padding-top: 130px;
	}

	.footer-message strong {
		font-size: 47px;
	}

	.footer-brand {
		width: 42%;
	}

	.footer-nav {
		width: 32%;
	}

	.footer-social {
		width: 26%;
	}

	.footer-social p {
		letter-spacing: .10em;
	}

	.footer-bottom p,
	.footer-bottom a {
		font-size: 9px;
	}
}