/* Welcom */

.welcom { display: flex; flex-direction: column; justify-content: space-around; align-items: center; align-content: center; width: 100%; height: calc(100vh - 50px); position: relative; }
.welcom .enter { display: flex; flex-direction: column; align-items: center; align-content: center; margin-bottom: 100px; }
.welcom .enter h1 { margin: 40px; width: auto; text-align: center; color: var(--background-color); text-transform: none; font-weight: lighter; font-size: 48px; line-height: 1em; text-shadow: 0 0 10px rgba(0, 0, 0, 0.25); }
.welcom .enter h1 span { display: inline-block; vertical-align: bottom; }
.welcom .enter h1 span.use-case-sentence { display: block; margin-top: 20px; }
.welcom .enter img { width: 80px; margin-bottom: 40px; border-radius: 50%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
.welcom .enter nav { display: flex; flex-direction: column; align-items: center; align-content: center; width: 100%; margin-top: 20px; }
.welcom .enter .button { width: 100%; max-width: 300px; margin: 20px 0 0 0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }

@media screen and (max-width:800px){
	.welcom { height: 100vh; justify-content: center; transition: all ease-in-out.2s; }
	.welcom .enter { padding: 25px; margin-bottom: 200px; }
	.welcom .enter img { width: 60px; margin-bottom: 20px; }
	.welcom .enter h1 { margin: 20px; font-size: 26px; line-height: 1.4em; }
	.welcom .enter h1 span.use-case-sentence { margin-top: 0; }
	.welcom .enter nav { margin-top: 20px; }
	.welcom .enter .button { margin-top: 10px; }
}


ul.use-cases { position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #000; }
ul.use-cases li { opacity: 0; transition:all ease-in-out .4s; }
ul.use-cases li.current { opacity: 1; }
ul.use-cases figure { position: absolute; top: 0; bottom: 0; left: 0; right: 0;transition: opacity 1.2s ease-in-out; }
ul.use-cases figure img { width: 100%; height: 100%; object-fit:cover; opacity: .7; }
ul.use-cases figure figcaption { position: absolute; left: 0; bottom: 0; padding:0 5px; color: var(--background-color); opacity: .3; font-size: 10px; text-shadow: 0 0 10px rgba(0, 0, 0, 0.25); }


/* Feature */

.discover { height: 0; }
.discover .button { position: relative; top: -60px; margin: auto; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }

@media screen and (max-width:800px){
	.discover .button { top: -260px; }
}

.feature { min-height: 50vh; padding: 120px 20px; position: relative; display: flex; justify-content: center; flex-direction: column; }
.feature:nth-child(even) { background: var(--background-alt-color); }
.feature .wrapper { display: flex; flex-direction: row; justify-content: space-around; align-items: center; align-content: center; }
.feature figure { order: 1; width: 600px; height: 400px; }
.feature figure img { width: 100%; height: auto; }
.feature article { order: 2; width: calc(100% - 600px); }
.feature article h2 { font-size: 24px; line-height: 1.4em; color: var(--heading-color); }
.feature article p { margin-top: 10px; }
.feature:nth-child(even) article { padding-left: 150px; }
.feature:nth-child(odd) article { order: 0; padding-right: 150px; }

@media screen and (max-width:800px){
	.feature { padding:40px 20px; }
	.feature .wrapper { flex-direction: column; }
	.feature figure { order: 1; width: 100%; height: auto; }
	.feature article,
	.feature:nth-child(even) article,
	.feature:nth-child(odd) article { order: 2; padding: 0; margin: 20px; width: auto; }
	.feature article h2 { font-size: 20px; text-align: center; margin-bottom: 10px; }
	.feature article p { margin-top: 10px; }
}





/* Account && Editorial */

.account,
.editorial { width: 100%; }
.account > .wrapper,
.editorial > .wrapper { display: flex; flex-direction: row; }

.account h2 { margin: 40px 10px 20px 10px; font-size: 22px; }
.account h3 { margin: 10px; }

.editorial:after { content: ""; z-index: -1; position: absolute; top: 0; left: 0; right: 0; height: 200px; background: var(--background-alt-color); }
.editorial main:not(.with-aside) { max-width: 800px; margin: auto; }

.editorial h1 { font-size: 42px; color: var(--heading-color); }

.editorial .form { margin: auto; margin-bottom: 40px; }


@media screen and (max-width:800px){
	.editorial:after { height: 100px; }
}


/* Article */

.articles {  }


/* Article */

.article { width: 100%; padding: 20px 0; }
.editorial .article { padding: 40px 0; }
.editorial .article:not(:first-of-type) { border-top: var(--border); }
.process-step .article { text-align: center; }
.article h1 { margin: 40px 0; padding: 40px; text-align: center; font-size: 42px; line-height: 1.4em; background: var(--background-color); color: var(--main-color); border: var(--border); }
.article h2 { position: relative; padding: 60px 0 20px 0; margin-bottom: 40px; font-size: 22px; line-height: 1.4em; font-weight: normal; color: inherit; }
.article h2:first-child { padding-top: 0; }
.article h2:after { content: ""; position: absolute; left: 0; bottom: -10px; width: 40px; height: 3px; background: var(--main-color); }
.article h3 { font-size: 18px; line-height: 1.4em; margin: 40px 0 10px 0; color: inherit; text-transform: uppercase; }
.article h4 { font-size: 14px; line-height: 1.4em; margin: 30px 0 10px 0; text-transform: uppercase; }
.article h3:not(:first-child) { padding: 20px 0 10px 0; }
.article p,
.article dl,
.article ul,
.article code { margin: 10px 0; }
.article p { position: relative; line-height: 1.6em; }
.article p.mentions { margin-top: 20px; font-size: 8px; line-height: 1.2em; }
.article p.help { padding: 20px; background: var(--background-alt-color); }
.article ul { margin-left: 20px; list-style: none; }
.article ul li { margin: 10px 0; }
.article ul li:before { content: "– "; display: inline-block; width: 1em; margin-left: -1em; color: var(--main-color); }
.article dl { display: flex; flex-direction: row; flex-wrap: wrap; }
.article dl dt { width: 25%; font-weight: normal; }
.article dl dd { width: 75%; }
.article code { display: block; padding: 10px 15px; background: var(--background-alt-color); border:var(--border); border-radius: 3px; font-family: monospace; font-weight: 300; font-size: 13px; white-space: pre-wrap; word-break: break-word; tab-size: 30px; user-select: text; }
.article strong { font-weight: 400; }
.article a:not(.button) { border-bottom: dotted 1px var(--link-color); color: var(--link-color); }

@media (hover: hover) {
	.article a:not(.button):hover { border-bottom-style: solid; }
}

.article ul.team-member-list { margin: 20px 0; list-style: none; display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; }
.article ul.team-member-list li { width: 200px; }
.article ul.team-member-list li:before { content: none; }
.article ul.team-member-list li figure { width: 125px; height: 125px; margin: 20px auto; border-radius: 50%; overflow: hidden; }
.article ul.team-member-list li figure img { display: block; object-fit: cover; width: 100%; height: auto; }
.article ul.team-member-list li h3 { margin: 0; padding: 0; text-align: center; text-transform: none; }
.article ul.team-member-list li h4 { margin: 0; padding: 0; text-align: center; font-size: 10px; }
.article ul.team-member-list li nav { display: flex; flex-direction: row; justify-content: center; }
.article ul.team-member-list li nav a { text-decoration: none; border: none; }

.article ul.partner-list { margin: 20px 0; list-style: none; display: flex; flex-direction: row; flex-wrap: wrap; }
.article ul.partner-list li { width: 120px; }
.article ul.partner-list li:before { content: none; }
.article ul.partner-list li figure { width: 100px; height: 100px; margin: 20px auto; }
.article ul.partner-list li figure img { display: block; object-fit: cover; width: 100%; height: auto; filter: grayscale(100%); }


@media screen and (max-width:800px){
	.article,
	.editorial section.section.text { margin:0; box-shadow:none; }
	.editorial .article { padding: 0; }
	.article:not(:first-of-type) { margin-top: 40px; padding-top: 40px; }
	.article code { tab-size: 20px; }
	.article h1 { margin: 0 0 20px 0; font-size: 30px; }
	.article h2:first-child,
	.article h3:first-child { margin-top: 0; }
}