styles.css

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-family: inherit;
	font-size: 100%;
	vertical-align: baseline;
}

body {
  color: #000;
	background: #fff;
	font-family: "bilo", sans-serif;
	font-weight: 400;
	line-height: 1.3;
	-webkit-font-smoothing: antialiased;
	--cta-color: #ffa500;
}

ol,
ul {
	list-style: none;
}

table {
	border-collapse: separate;
	border-spacing: 0;
	vertical-align: middle;
}

caption,
th,
td {
	text-align: left;
	font-weight: normal;
	vertical-align: middle;
}

a img {
	border: none;
}

*::-moz-selection {
	background: #32e39f;
}

*::selection {
	background: #32e39f;
}

.link {
	color: #32e39f;
	text-decoration: none;
}

.link:hover,
.link:focus {
	text-decoration: underline;
}

.layout {
	max-width: maxWidth;
}

.header {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 36px;
	padding: 8px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.header__title>* {
	color: #07373b;
	font-family: "atten-round-new", sans-serif;
	font-size: 32px;
	font-weight: 500;
	text-decoration: none;
}

.header__menu {
	display: none;
}

@media only screen and (min-width: 640px) {
	.header__menu {
		display: block;
	}
}

.menu {
	display: flex;
	font-size: 20px;
	font-family: "bilo", sans-serif;
	font-weight: 500;
}

.menu__item {
	padding-left: 20px;
}

.menu__item-link {
	display: inline-block;
	position: relative;
	color: #006080;
	text-decoration: none;
	padding: 10px 0;
}

.menu__item-link:after {
	content: "";
	position: absolute;
	width: 0;
	height: 3px;
	display: block;
	margin-top: 2px;
	right: 0;
	background: rgba(50, 227, 159, 0.8);
	transition: width 0.2s ease;
	-webkit-transition: width 0.2s ease;
}

.menu__item-link:hover:after,
.menu__item-link:focus:after {
	width: 100%;
	left: 0;
	background: rgba(50, 227, 159, 0.8);
}

.hero {
	position: relative;
	color: #fff;
	padding: 40px 36px;
	height: 65vh;
	min-height: 320px;
	background-color: #006080;
	overflow: hidden;
}

@media only screen and (min-width: 640px) {
	.hero {
		min-height: 400px;
	}
}

.hero__image {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: visible;
	background-size: 150%;
	background-position: -20% 45%;
}

@media only screen and (min-width: 640px) {
	.hero__image {
		background-size: 700px;
		background-position: 10% 0;
	}
}

@media only screen and (min-width: 1024px) {
	.hero__image {
		background-size: 800px;
		background-position: center 10%;
	}
}

.hero__content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 0;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	height: 100%;
}

@media only screen and (min-width: 640px) {
	.hero__content {
		justify-content: flex-end;
	}
}

.hero__slogan {
	display: inline-block;
	font-family: "atten-round-new", sans-serif;
	font-size: calc(40px + (74 - 40) * ((100vw - 320px) / (1440 - 320)));
	font-weight: 800;
	line-height: 1.1;
	padding: 250px 0 0 0;
	width: 100%;
}

@media only screen and (min-width: 640px) {
	.hero__slogan {
		padding: 0 60px;
		padding: 0 60px 100px 60px;
		width: 50%;
	}
}

.teaser {
	position: relative;
	background: linear-gradient(90deg, rgba(0, 96, 128, 0.85), rgba(112, 215, 204, 0.85));
	color: #07373b;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 84px 0 72px 0;
}

@media only screen and (min-width: 640px) {
	.teaser {
		padding: 112px 0;
	}
}

@media only screen and (min-width: 1024px) {
	.teaser {
		padding: 140px 0 132px 0;
	}
}

.teaser__wrapper {
	margin: 0 36px;
}

.teaser__content {
	max-width: 600px;
}

.teaser__headline {
	margin: 20px 0;
	font-family: "atten-round-new", sans-serif;
	font-size: 32px;
	font-weight: 800;
	line-height: 1.1;
}

@media only screen and (min-width: 640px) {
	.teaser__headline {
		font-size: 44px;
		margin: 32px 0;
	}
}

@media only screen and (min-width: 1024px) {
	.teaser__headline {
		font-size: 52px;
	}
}

.teaser__subline {
	font-family: "atten-round-new", sans-serif;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.1;
	margin: 32px 0;
}

@media only screen and (min-width: 640px) {
	.teaser__subline {
		margin: 40px 0 40px 0;
		font-size: 26px;
		max-width: 600px;
	}
}

@media only screen and (min-width: 1024px) {
	.teaser__subline {
		margin: 40px 0 60px 0;
		font-size: 28px;
		max-width: 100%;
	}
}

.teaser__text {
	font-size: 18px;
	margin: 16px 0;
}

@media only screen and (min-width: 640px) {
	.teaser__text {
		font-size: 20px;
		margin: 20px 0;
	}
}

.teaser__decoration {
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.teaser__wave-top {
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	height: 40px;
	background-image: url("../images/waves/wave-top-mobile.svg");
	background-position-x: 100px;
}

@media only screen and (min-width: 640px) {
	.teaser__wave-top {
		height: 50px;
		background-image: url("../images/waves/wave-top.svg");
		background-position-x: center;
	}
}

.teaser__wave-bottom {
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	height: 40px;
	background-image: url("../images/waves/wave-bottom-mobile.svg");
	background-position-x: 100px;
}

@media only screen and (min-width: 640px) {
	.teaser__wave-bottom {
		height: 50px;
		background-image: url("../images/waves/wave-bottom.svg");
		background-position-x: center;
	}
}

.teaser__next-up {
	text-align: center;
}

.teaser__next-up-icon {
	width: 24px;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	transform-origin: bottom;
	animation-name: bounce;
	animation-timing-function: ease;
}

@media only screen and (min-width: 640px) {
	.teaser__next-up-icon {
		width: 28px;
	}
}

@media only screen and (min-width: 1024px) {
	.teaser__next-up-icon {
		width: 32px;
	}
}

.about-us {
	background-color: #07373b;
	color: #fff;
	padding: 40px 0;
}

@media only screen and (min-width: 640px) {
	.about-us {
		padding: 40px 0 100px 0;
	}
}

@media only screen and (min-width: 1024px) {
	.about-us {
		padding: 80px 0 120px 0;
	}
}

.about-us__wrapper {
	margin: 0 36px;
	display: flex;
	flex-direction: column;
}

@media only screen and (min-width: 640px) {
	.about-us__wrapper {
		margin: 0 auto;
		padding: 0 32px;
		flex-direction: row;
		max-width: 1000px;
	}
}

@media only screen and (min-width: 1024px) {
	.about-us__wrapper {
		padding: 0 60px;
	}
}

.about-us__teaser {
	margin: 12px 0 32px 0;
	display: flex;
	flex-direction: column;
	max-width: 400px;
}

@media only screen and (min-width: 640px) {
	.about-us__teaser {
		max-width: 500px;
		padding-left: 40px;
	}
}

@media only screen and (min-width: 1024px) {
	.about-us__teaser {
		padding-left: 60px;
		flex-basis: 600px;
	}
}

.about-us__icon {
	align-self: flex-end;
	width: 200px;
}

.about-us__headline {
	margin: 20px 0;
	font-family: "atten-round-new", sans-serif;
	font-size: 32px;
	font-weight: 800;
	line-height: 1.1;
}

@media only screen and (min-width: 640px) {
	.about-us__headline {
		font-size: 44px;
		margin: 32px 0;
	}
}

@media only screen and (min-width: 1024px) {
	.about-us__headline {
		font-size: 52px;
	}
}

.about-us__slogan {
	font-family: "atten-round-new", sans-serif;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.1;
	margin: 12px 0;
	max-width: 80%;
}

@media only screen and (min-width: 640px) {
	.about-us__slogan {
		font-size: 22px;
		max-width: 100%;
		padding-top: 20px;
	}
}

@media only screen and (min-width: 1024px) {
	.about-us__slogan {
		max-width: 80%;
		font-size: 28px;
	}
}

.about-us__subline {
	font-family: "atten-round-new", sans-serif;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.1;
	margin: 12px 0;
}

@media only screen and (min-width: 640px) {
	.about-us__subline {
		margin: 24px 0;
		font-size: 28px;
	}
}

.about-us__text {
	font-size: 18px;
	margin: 16px 0;
}

@media only screen and (min-width: 640px) {
	.about-us__text {
		font-size: 20px;
		margin: 20px 0;
	}
}

.about-us__cta {
	margin: 32px 0;
}

@media only screen and (min-width: 640px) {
	.about-us__cta {
		margin-top: 40px;
	}
}

.insights {
	background-color: #fff;
	color: #07373b;
	padding: 60px 36px;
	max-width: 1000px;
	display: flex;
	flex-direction: column;
	margin: 0 auto;
}

@media only screen and (min-width: 640px) {
	.insights {
		padding: 40px 36px 80px 36px;
	}
}

@media only screen and (min-width: 1024px) {
	.insights {
		padding: 60px 36px 100px 36px;
		flex-direction: row;
		align-items: flex-end;
	}
}

.insights__wrapper {
	max-width: 600px;
}

.insights__wrapper:last-child {
	text-align: center;
}

@media only screen and (min-width: 1024px) {
	.insights__wrapper:first-child {
		margin-right: 40px;
	}

	.insights__wrapper:last-child {
		margin-left: 40px;
	}
}

.insights__headline {
	margin: 20px 0;
	font-family: "atten-round-new", sans-serif;
	font-size: 32px;
	font-weight: 800;
	line-height: 1.1;
}

@media only screen and (min-width: 640px) {
	.insights__headline {
		font-size: 44px;
		margin: 32px 0;
	}
}

@media only screen and (min-width: 1024px) {
	.insights__headline {
		font-size: 52px;
	}
}

.insights__subline {
	font-family: "atten-round-new", sans-serif;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.1;
	margin: 12px 0;
}

@media only screen and (min-width: 640px) {
	.insights__subline {
		font-size: 28px;
	}
}

.insights__text {
	font-size: 18px;
	margin: 16px 0;
}

@media only screen and (min-width: 640px) {
	.insights__text {
		font-size: 20px;
		margin: 20px 0;
	}
}

.badges {
  display: flex;
  justify-content: space-between;
	flex-wrap: wrap;
  align-items: center;
  margin-top: 20px;
}

.google-play-badge img {
  height: 75px;
}

.app-store-badge img {
  height: 77px;
}

.insights__image {
	width: 70%;
	height: auto;
	margin-top: 32px;
}

@media only screen and (min-width: 640px) {
	.insights__image {
		width: 400px;
	}
}

.sponsor {
	background-color: #07373b;
	color: #fff;
}

.sponsor__wrapper {
	max-width: 1200px;
	margin: 0 auto;
}

.sponsor__text {
	font-size: 18px;
	padding: 16px 36px;
}

@media only screen and (min-width: 640px) {
	.sponsor__text {
		font-size: 20px;
		padding: 32px 36px;
		text-align: center;
	}
}

.team {
	background-image: linear-gradient(90deg, rgba(0, 96, 128, 0.85), rgba(112, 215, 204, 0.85)), url("../images/backgrounds/earth-patterns-unsplash-mobile.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 40px 36px;
}

@media only screen and (min-width: 640px) {
	.team {
		padding: 52px 36px;
	}
}

@media only screen and (min-width: 1024px) {
	.team {
		padding: 60px 36px;
		background-image: linear-gradient(90deg, rgba(0, 96, 128, 0.85), rgba(112, 215, 204, 0.85)), url("../images/backgrounds/earth-patterns-unsplash.jpg");
	}
}

.team__wrapper {
	margin: 0 auto;
	max-width: 1200px;
}

@media only screen and (min-width: 640px) {
	.team__content {
		margin: 40px auto;
	}
}

@media only screen and (min-width: 1024px) {
	.team__content {
		margin: 60px auto;
	}
}

.team__headline {
	font-family: "atten-round-new", sans-serif;
	font-size: 32px;
	font-weight: 800;
	line-height: 1.1;
	color: #fff;
	margin: 32px 0;
}

@media only screen and (min-width: 640px) {
	.team__headline {
		font-size: 44px;
		margin: 20px 0;
	}
}

@media only screen and (min-width: 1024px) {
	.team__headline {
		font-size: 52px;
		margin: 32px 0;
	}
}

.team__subline {
	font-family: "atten-round-new", sans-serif;
	font-size: 28px;
	font-weight: 800;
	line-height: 1.1;
	color: #fff;
	margin: 24px 0;
}

@media only screen and (min-width: 640px) {
	.team__subline {
		font-size: 36px;
		margin: 32px 0;
	}
}

@media only screen and (min-width: 1024px) {
	.team__subline {
		font-size: 40px;
	}
}

.team__facts {
	margin-bottom: 60px;
	display: flex;
	flex-wrap: wrap;
}

.team__facts>* {
	margin: 0 0 20px 0;
	max-width: 320px;
}

@media only screen and (min-width: 640px) {
	.team__facts>* {
		margin: 0 20px 20px 0;
	}
}

.card {
	color: #07373b;
	background-color: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-sizing: border-box;
}

@media only screen and (min-width: 640px) {
	.card {
		width: 280px;
		min-height: 340px;
	}
}

.card--facts {
	padding: 20px;
	text-align: center;
}

.card__details {
	padding: 12px 20px 16px 20px;
}

.card__image {
	width: 100%;
}

.card__icon {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 120px;
	padding-bottom: 8px;
}

.card__description {
	font-size: 16px;
	font-weight: 500;
	margin: 20px 0;
}

.card__link {
	font-size: 16px;
	font-weight: 500;
}

.card__link,
.card__link:visited {
	color: #006080;
	text-decoration: none;
}

.card__link:hover,
.card__link:active,
.card__link:focus {
	color: #32e39f;
	text-decoration: underline;
}

.person__name {
	font-family: "atten-round-new", sans-serif;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.1;
}

.person__role {
	font-size: 16px;
	font-weight: 500;
}

.person__links {
	margin-top: 12px;
	display: flex;
	justify-content: space-between;
}

.person-list {
	display: flex;
	flex-wrap: wrap;
}

.person-list>* {
	margin: 0 0 20px 0;
	max-width: 320px;
}

@media only screen and (min-width: 640px) {
	.person-list>* {
		margin: 0 20px 20px 0;
	}
}

.participate {
	padding: 40px 36px 60px 36px;
	color: #07373b;
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
}

@media only screen and (min-width: 640px) {
	.participate {
		padding: 80px 36px 140px 36px;
	}
}

@media only screen and (min-width: 1024px) {
	.participate {
		flex-direction: row;
		align-items: flex-end;
	}

	.participate__wrapper {
		flex-basis: 50%;
	}

	.participate__wrapper:first-child {
		margin-right: 40px;
	}

	.participate__wrapper:last-child {
		margin-left: 40px;
	}
}

.participate__headline {
	font-family: "atten-round-new", sans-serif;
	font-size: 32px;
	font-weight: 800;
	line-height: 1.1;
	margin: 20px 0;
}

@media only screen and (min-width: 640px) {
	.participate__headline {
		font-size: 44px;
		margin: 32px 0;
	}
}

@media only screen and (min-width: 1024px) {
	.participate__headline {
		font-size: 52px;
	}
}

.participate__subline {
	font-family: "atten-round-new", sans-serif;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.1;
	margin: 12px 0;
	line-height: 1.3;
}

@media only screen and (min-width: 640px) {
	.participate__subline {
		font-size: 28px;
	}
}

.participate__text {
	font-size: 18px;
	margin: 16px 0;
	max-width: 600px;
}

@media only screen and (min-width: 640px) {
	.participate__text {
		font-size: 20px;
		margin: 20px 0;
	}

	.participate__text--align-bottom {
		margin: 20px 0 0 0;
	}
}

.participate__roles {
	list-style: none;
	margin-left: 40px;
	font-size: 18px;
}

@media only screen and (min-width: 640px) {
	.participate__roles {
		font-size: 20px;
		margin-left: 52px;
	}
}

.participate__roles li {
	position: relative;
	padding: 4px 0;
}

.participate__roles li:before {
	content: "—";
	position: absolute;
	left: -28px;
}

@media only screen and (min-width: 640px) {
	.participate__roles li:before {
		left: -32px;
	}
}

.participate__roles em {
	font-weight: 500;
}

.alumni {
	background-color: #07373b;
	color: #fff;
	padding: 40px 0;
}

@media only screen and (min-width: 640px) {
	.alumni {
		padding: 40px 0 100px 0;
	}
}

@media only screen and (min-width: 1024px) {
	.alumni {
		padding: 60px 0 100px 0;
	}
}

.alumni__wrapper {
	margin: 0 36px;
	display: flex;
	flex-direction: column;
}

@media only screen and (min-width: 640px) {
	.alumni__wrapper {
		margin: 0 auto;
		padding: 0 32px;
		max-width: 1000px;
	}
}

@media only screen and (min-width: 1024px) {
	.alumni__wrapper {
		padding: 0 60px;
	}
}

.alumni__headline {
	margin: 20px 0;
	font-family: "atten-round-new", sans-serif;
	font-size: 32px;
	font-weight: 800;
	line-height: 1.1;
}

@media only screen and (min-width: 640px) {
	.alumni__headline {
		font-size: 44px;
		margin: 32px 0;
	}
}

@media only screen and (min-width: 1024px) {
	.alumni__headline {
		font-size: 52px;
	}
}

.alumni__text {
	font-size: 18px;
	margin: 0 0 16px 0;
	max-width: 1000px;
}

@media only screen and (min-width: 640px) {
	.alumni__text {
		font-size: 20px;
		margin: 0 0 20px 0;
	}
}

.alumni__list {
	list-style: none;
	font-size: 18px;
}

@media only screen and (min-width: 640px) {
	.alumni__list {
		font-size: 20px;
	}
}

.alumni__list li {
	color: #fff;
	position: relative;
	padding: 4px 0;
}

.alumni__list li:before {
	position: absolute;
	left: -28px;
}

@media only screen and (min-width: 640px) {
	.alumni__list li:before {
		left: -32px;
	}
}

.alumni__list li em {
	font-weight: bold;
}

@media only screen and (min-width: 1024px) {
	.alumni__list {
		-moz-columns: 2;
		columns: 2;
	}
}

@keyframes bounce {
	0% {
		transform: translateY(0);
	}

	30% {
		transform: translateY(-12px);
	}

	45% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(0);
	}
}

.footer {
	position: relative;
	background-color: #07373b;
	color: #fff;
	padding: 120px 0;
}

@media only screen and (min-width: 640px) {
	.footer {
		padding: 160px 0 100px 0;
	}
}

@media only screen and (min-width: 1024px) {
	.footer {
		padding: 180px 0;
	}
}

.footer__content {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 36px;
	display: flex;
	flex-direction: column;
}

@media only screen and (min-width: 640px) {
	.footer__content {
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
}

@media only screen and (min-width: 1024px) {
	.footer__content {
		justify-content: space-around;
		align-items: flex-end;
		flex-wrap: nowrap;
	}
}

@media only screen and (min-width: 1024px) {
	.footer__content {
		flex-wrap: nowrap;
	}
}

.footer__decoration {
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.footer__wave {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 40px;
	background-image: url("../images/waves/wave-footer-mobile.svg");
	background-position-x: 100px;
}

@media only screen and (min-width: 640px) {
	.footer__wave {
		height: 50px;
		background-image: url("../images/waves/wave-footer.svg");
		background-position-x: center;
	}
}

.footer__caption {
	font-family: "atten-round-new", sans-serif;
	font-size: 28px;
	font-weight: 500;
	line-height: 1.1;
}

.footer__resources,
.footer__contact {
	margin-top: 80px;
}

@media only screen and (min-width: 640px) {

	.footer__resources,
	.footer__contact {
		width: 50%;
	}
}

@media only screen and (min-width: 1024px) {

	.footer__resources,
	.footer__contact {
		width: 25%;
		margin-top: 0;
	}
}

@media only screen and (min-width: 640px) {
	.footer__logos {
		width: 100%;
	}
}

@media only screen and (min-width: 1024px) {
	.footer__logos {
		width: 40%;
	}
}

.footer__link {
	display: block;
	margin-top: 12px;
	font-family: "atten-round-new", sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.1;
	color: #32e39f;
	text-decoration: none;
}

@media only screen and (min-width: 640px) {
	.footer__link {
		margin-top: 16px;
	}
}

.footer__link:hover,
.footer__link:focus {
	text-decoration: underline;
}

.footer__link--credit {
	display: inline;
	font-size: 16px;
}

.footer__climateMind {
	margin-bottom: 32px;
}

@media only screen and (min-width: 640px) {
	.footer__climateMind {
		margin-bottom: 40px;
	}
}

.footer__climateMind-logo {
	width: 100%;
	max-width: 277px;
	height: auto;
}

@media only screen and (min-width: 640px) {
	.footer__climateMind-logo {
		width: 277px;
		height: 167px;
	}
}

.footer__socialMedia {
	display: flex;
}

.footer__socialMedia>* {
	margin-right: 12px;
}

.footer__socialMedia-icon {
	width: 44px;
	height: 44px;
}

.footer__credit {
	font-family: "atten-round-new", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.1;
	line-height: 1.3;
	margin-top: 32px;
}

.button,
input[type="submit"] {
	display: inline-block;
	box-sizing: border-box;
	text-align: center;
	padding: 10px 24px;
	min-width: 160px;
	border: 0;
	border-radius: 10px;
	background-color: #32e39f;
	text-decoration: none;
	cursor: pointer;
	color: #07373b;
	font-family: "atten-round-new", sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.1;
}

@media only screen and (min-width: 640px) {

	.button,
	input[type="submit"] {
		font-size: 22px;
	}
}

.button:hover,
input[type="submit"]:hover {
	background-color: #82efc5;
}