start-page {
	display: block;
	width: 100%;
	height: 100%;
	padding-top: var(--scale8-8);
	background-color: var(--ml-background-moodlight-color);
	box-sizing: border-box;
	transition: padding 0.5s ease;
}

start-page p {
	opacity: 0.9;
}

start-page header,
start-page footer {
	display: block;
	width: calc(100% - var(--scale8-16));
	margin: 0 auto;
	height: auto;
	transition: width 0.5s ease;
}

start-page header {
	margin-bottom: var(--gutter-margin-l);
}

start-page header .header-text-highlight {
	color: var(--ml-softblue);
}

start-page footer {
	background-color: var(--ml-background-color);
	padding: var(--gutter-margin);
	margin-bottom: var(--scale8-15);
	border-bottom-left-radius: var(--scale8-1);
	border-bottom-right-radius: var(--scale8-1);
	box-sizing: border-box;
}

start-page content {
	display: block;
	width: calc(100% - var(--scale8-16));
	padding: var(--scale8-10) var(--gutter-margin);
	height: auto;
	border: 1px solid black;
	margin: 0 auto;

	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

start-page content.round-top {
	border-top-left-radius: 45%;
	border-top-right-radius: 45%;
	height: 1000px;
}

.content-decoration {
	position: absolute;
}

.content-decoration.cog {
	left: 0;
	top: 60%;
	transform-origin: left;
	scale: 0.6;
}

.content-decoration.triangle {
	right: 0;
	top: 50%;
	transform-origin: right;
	scale: 0.6;
}

start-page ml-hero-header {
	--text-color: var(--ml-nightsky);
	background-position: left bottom;
}

start-page ml-hero-header.teacher {
	background-position: left center;
	--read-more-display: flex;
}

start-page ml-hero-header.teacher::part(cta) {
	display: none;
}

start-page ml-hero-header h1 {
	width: 100%;
	font-size: var(--rem-5xl);
	line-height: var(--scale8-10);
	font-family: var(--header-font-family);
	color: var(--ml-nightsky) !important;
	margin: 0;
	filter: drop-shadow(1px 1px 0px var(--ml-primary-color));
}

start-page ml-hero-header.student h1 {
	color: var(--ml-secondary-color) !important;
}

start-page ml-hero-header .trustindex {
	display: flex;
	margin-bottom: var(--scale8-1);
}

start-page ml-hero-header .trustindex > * {
	text-align: left !important;
}

start-page ml-hero-header .trustindex .ti-header {
	padding: 0 !important;
	user-select: none;
	cursor: pointer;
}

start-page ml-hero-header .trustindex .ti-header:hover {
	transform: none !important;
}

start-page ml-hero-header .trustindex .ti-small-logo {
	display: none !important;
}

start-page ml-hero-header .trustindex .ti-mob-row span.nowrap {
	visibility: hidden;
}

html.ml body start-page ml-hero-header .trustindex .ti-mob-row span.nowrap strong {
	visibility: visible;
	color: var(--ml-nightsky) !important;
}


start-page content.ml-boxed {
	background-color: var(--ml-background-view);
	border: 0;
}

start-page content.no-padding {
	padding: 0 !important;
}

start-page .color-grid-maintitle,
start-page .get-started-in-seconds-maintitle {
	display: flex;
	justify-content: center;
	font-size: var(--rem-4xl);
	margin-bottom: 64px;
}


start-page .color-grid-maintitle ml-heading-typewriter::part(stroke) {
	stroke: var(--ml-gold);
	transform: translateY(60%);
	rotate: 1deg;
}


start-page .color-grid-subtitle {
	display: flex;
	justify-content: center;
	margin-bottom: 64px;
	font-family: var(--text-font-family);
	font-size: var(--rem-base);
	width: 60%;
	opacity: 0.9;
	margin: 0 auto;
	margin-bottom: 64px;
	text-align: center;

}

start-page ml-color-grid::part(square-image1) {
	background-image: url(img/hand-phone-exercise.webp);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}


start-page ml-color-grid::part(square-image2) {
	background-color: transparent;
	background-image: url(img/teacher-flex.webp);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 0;
	height: 100%;
	width: 100%;
}

start-page ml-color-grid::part(square-image2b) {
	background-color: transparent;
	background-image: url(img/explanation-box-tablet.webp);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 0;
	height: 100%;
	width: 100%;
}

start-page ml-color-grid::part(square-image3) {
	background-image: url(img/haircut90.webp);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

[lang="sv"] start-page ml-color-grid::part(cta2) {
	display: none;
}

start-page content ml-spacer {
	margin: var(--scale8-10) auto;
}

start-page .section-heading {
	text-align: center;
	margin: var(--scale8-4);
	margin-top: 0;
}

start-page .section-heading {
	font-size: var(--rem-4xl);
}

start-page .section-heading.how-it-works-heading{
	margin-bottom: 64px;
}

start-page content.content-news {
	position: relative;
}

start-page .section-heading ml-heading-typewriter {
	align-items: center;
}

start-page .section-heading ml-heading-typewriter.news-maintitle {
	white-space: nowrap;
}

start-page p.news-text {
	font-family: var(--text-font-family);
	text-align: center;
	width: 55%;
	margin: 0 auto;
}

start-page ml-news-feed {
	width: 100%;
	margin: auto;
	margin-top: var(--gutter-margin);
}

start-page .btn-news-section-more {
	margin-top: var(--gutter-margin-s);
	max-width: 250px;
	max-height: 50px;
	margin-left: auto;
	margin-right: auto;
}

start-page ml-start-slogan {
	border-radius: 8px;
}


start-page .how-it-works {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 90%;
	overflow: hidden;
	margin: 0 auto;
}

start-page p.how-it-works-subtitle {
	text-align: center;
	width: 60%;
	margin: 0 auto;
	margin-bottom: 42px;
	font-family: var(--text-font-family);
}

start-page .how-it-works .section1,
start-page .how-it-works .section2 {
	display: flex;
	flex-direction: row;
	gap: 16px;
	width: 100%;
	overflow: hidden;
}


start-page .how-it-works .card {
	display: flex;
	flex-direction: column;
	white-space: break-spaces;
	width: 100%;
	aspect-ratio: 1;
	position: relative;
	padding: 0;
	background-color: var(--ml-background-lowlight-color);
	color: var(--ml-text-color);
	overflow: hidden;
	box-sizing: border-box;
	border-style: solid;
	border-radius: var(--ml-card-border-radius);
	border-width: var(--ml-card-border-width);
	border-color: var(--ml-card-border-color);
}

.animations-wrap {
	display: flex;
}

start-page .how-it-works .animation {
	background-size: cover;
	background-position: center;
	width: 50%;
	height: 100%;
	margin: 0 auto;
	left: 0;
	top: 0;
}

start-page .how-it-works .card1 {
	background-color: #FEE27E !important;
}

start-page .how-it-works .card1 .animation {
	background-size: cover;
	background-position: center;
	width: 90%;
	margin: 0 auto;
	left: 0;
	top: 0;
}

start-page .how-it-works .card2 {
	background-image: url(img/track-your-progress-transparent.webp);
	background-size: cover;
	background-position: center;
	background-color: var(--ml-border-color);
}

.country-se start-page .how-it-works .card2 {
	background-image: url(img/track-your-progress-transparent-se.webp);
}

start-page .how-it-works h3 {
	color: var(--ml-secondary-color);
	display: flex;
	font-size: var(--rem-xl);
	justify-content: flex-start;
	flex-direction: column;
	margin-left: 7%;
	margin-top: 24px;
	margin-bottom: 10px;
	z-index: 100;
}

start-page .how-it-works p.subtitle {
	font-family: var(--text-font-family);
	text-align: center;
	margin-bottom: 24px;
}

start-page .how-it-works .card p {
	color: white;
	font-family: var(--text-font-family);
	padding: 0 7%;
	z-index: 100;
}


start-page .how-it-works .card1 h3,
start-page .how-it-works .card1 p,
start-page .how-it-works .card2 h3,
start-page .how-it-works .card2 p {
	color: var(--ml-text-color);
}

start-page .how-it-works .card1 p,
start-page .how-it-works .card2 p {
	opacity: 0.9;
}

/*.safari*/ start-page .how-it-works .card1 {
	background-image: unset;
	background-color: rgba(255, 231, 128, 1);
}

start-page .how-it-works .card3 ml-progress-bar-circular {
	margin: auto;
}

start-page .how-it-works .card3 {
	display: flex;
	flex-direction: row;
	height: 40vw;
	background-size: cover;
	background-position: center;
	background-image: url(img/blue-blur.webp);
}

start-page .how-it-works .card3 .column1,
start-page .how-it-works .card3 .column2 {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 16px;
}

start-page .how-it-works .card3 .column1 {
	padding-right: 0;
}

start-page .how-it-works .card3 .column2 {
	padding-left: 0;
}

start-page .how-it-works .card3 .create-edit-share {
	background-image: url(img/create-edit-share.webp);
	background-size: contain;
	background-position: 50% 20%;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
}

.country-se start-page .how-it-works .card3 .create-edit-share {
	background-image: url(img/create-edit-share-se.webp);
}


start-page .how-it-works .card3 h3 {
	margin-left: 3.5%;
}


start-page .how-it-works .card3 .animation {
	width: auto;
}

/*.safari*/ start-page .how-it-works .card3 .animation {
	border-radius: 16px;
	height: 415px;
	margin-top: 64px;
}


start-page .how-it-works .card3 p {
	text-align: left;
	padding-left: 3.5%;
}

start-page .knowgaps-banner {
	width: calc(100% - var(--gutter-margin-l));
	height: 600px;
	padding: 0;
	border-radius: 8px;
	overflow: hidden;
}

start-page .knowgaps-banner .image-wrap {
	background-image: url(img/knowgaps-banner.webp);
	background-size: cover;
	background-position: center;
	height: 100%;
}

start-page .knowgaps-banner .text-wrap {
	width: 50%;
	height: 100%;
	margin-left: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 32px;
	padding: 64px;
	padding-left: 0;
}

start-page .knowgaps-banner .text-wrap h2 {
	font-size: var(--rem-4xl);
}

start-page .knowgaps-banner .text-wrap button {
	border: 0;
	font-size: var(--rem-base);
}


start-page .spacer-above-bottom-cta {
	margin: 320px auto;
}

start-page ml-start-bottom-cta {
	transform: translateY(-580px);
}


/* HERO VIDEO FULLSCREEN. surrounding elements that need to adapt when running fullscreen video mode. wiki and wordpress */
body.hero-video-fullscreen start-page,
body.hero-video-fullscreen .container-base,
.ml-divi body.hero-video-fullscreen #page-container #main-content {
	padding-top: 0;
}

body.hero-video-fullscreen ml-topnav,
body.hero-video-fullscreen ml-knowgaps-topnav {
	display: none;
}

body.hero-video-fullscreen start-page header {
	width: 100%;
}
/* END HERO VIDEO FULLSCREEN*/


@media all and (max-width: 1239px) {

	start-page content ml-spacer {
		margin: var(--scale8-5) auto;
	}

	start-page .how-it-works .section1,
	start-page .how-it-works .section2,
	start-page .how-it-works .card3 .card-wrap {
		flex-direction: column;
	}

	start-page .how-it-works .card3 {
		height: auto;
	}

	start-page .how-it-works .card3 .create-edit-share {
		height: 100%;
		min-height: 250px;
		margin: 0;
	}

	start-page .how-it-works .card3 .animation {
		width: 100%;
	}

	/*.safari*/ start-page .how-it-works .card3 .animation {
		height: 100%;
		margin: 24px;
		width: calc(100% - 48px);
	}

	start-page .how-it-works .card3 {
		aspect-ratio: unset;
	}


	start-page content.round-top {
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
	}

}

@media all and (max-width: 904px) {

	start-page {
		padding-top: var(--gutter-margin);
	}

	start-page header {
		margin-bottom: var(--gutter-margin);
		width: calc(100% - var(--gutter-margin));
	}

	start-page footer {
		width: calc(100% - var(--scale8-4));
	}

	start-page content {
		width: calc(100% - var(--gutter-margin));
		padding: var(--scale8-6) var(--gutter-margin-s);
	}

	start-page ml-hero-header h1 {
		font-size: var(--rem-4xl);
		line-height: 52px;
	}

	start-page ml-start-header::part(text-section) {
		width: 100%;
		margin: 0;
	}

	start-page ml-start-header::part(image-section) {
		position: absolute;
		opacity: 0.02;
		height: 300px;
		display: none;
	}

	start-page ml-spacer {
		margin: var(--scale8-7) auto;
	}

	ml-heading-typewriter::part(main-wrap),
	start-page .color-grid-maintitle ml-heading-typewriter::part(main-wrap),
	start-page .news-maintitle ml-heading-typewriter::part(main-wrap) {
		flex-direction: column;
		line-height: 42px;
	}

	start-page ml-heading-typewriter.how-it-works-main-title::part(main-wrap) {
		flex-direction: row;
	}

	start-page .color-grid-subtitle {
		flex-direction: column;
		text-align: center;
		margin-bottom: 32px;
	}

	start-page .how-it-works .card3 {
		flex-direction: column;
	}

	start-page .how-it-works .card3 .column1 {
		padding-right: 16px;
	}

	start-page .how-it-works .card3 .column2 {
		padding-left: 16px;
	}

}

@media all and (max-width: 599px) {

	start-page {
		padding-top: 8px;
	}

	start-page header {
		width: calc(100% - var(--gutter-margin-xs));
	}

	start-page header {
		margin-bottom: var(--gutter-margin-s);
	}

	start-page .color-grid-subtitle {
		width: 100%;
	}

	start-page content,
	start-page footer {
		width: 100%;
		padding: var(--gutter-margin) var(--gutter-margin-s);
	}

	start-page ml-spacer {
		margin: var(--scale8-2) auto;
	}

	start-page .slides {
		height: 80lvh;
	}

	start-page ml-hero-header.student {
		background-position: 30% 0%;
		height: 80lvh;
	}

	start-page ml-hero-header.teacher {
		background-position: 5% 0;
	}

	start-page ml-hero-header.parent {
		background-position: 25% 0;
	}

	start-page ml-hero-header h1 {
		font-size: var(--rem-3xl);
	}

	start-page ml-hero-header .trustindex .ti-header {
		scale: 0.85;
		transform-origin: left;
	}

	start-page ml-hero-header .trustindex .ti-stars {
		margin: 0 !important;
	}

	start-page ml-news-feed {
		width: auto;
		flex-direction: column;
	}

	start-page p.news-text {
		width: 100%;
	}

	start-page .section-heading.how-it-works-heading {
		margin-bottom: 32px;
	}

	start-page p.how-it-works-subtitle {
		width: 100%;
	}

	start-page .how-it-works {
		width: 100%;
	}

	start-page .how-it-works h3 {
		margin-left: auto;
		margin-right: auto;
		padding: 0 7%;
	}

	start-page .how-it-works .card1 {
		height: 475px;
	}

	start-page .how-it-works .card1 .animation {
		width: 85%;
	}

	start-page .how-it-works .card2 {
		background-size: contain;
		background-repeat: no-repeat;
		background-position: bottom;
		height: 500px;
	}

	start-page .how-it-works .card2 {
		height: 440px;
	}

	start-page .how-it-works .card1 h3,
	start-page .how-it-works .card2 h3 {
		padding: 0 7%;
	}

	start-page .how-it-works .card3 h3 {
		padding: 0;
	}

	start-page content.round-top {
		height: 675px;
	}

	start-page .how-it-works .card3 {
		height: 740px;
		padding: 0;
	}


	start-page .how-it-works .card3 .create-edit-share {
		min-height: 150px;
	}

	start-page .how-it-works .card3 .animation {
		margin-top: 0;
	}

}