/*=========================================== START ==============================================*/
@media (min-width: 769px) {
	.menu .logo-nav svg path { fill: #fff }
	.page {padding: 0 10px;}
}
.home-start {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  max-width: 1584px;
  height: 750px;
  border-radius: 0 0 30px 30px;
}
.home-start .bnn {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border-radius: 0px 0px 30px 30px;
  background: rgba(42, 82, 54, 1);
}
.home-start .bnn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}
.home-start .bnn .video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bse-Black, #1F1F21);
}
.home-start .bnn .video video {
  opacity: .7;
  width: 100%;
  position: absolute;
  transform: translateY(-10%);
}
.home-start .container {
  position: relative;
  max-width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: end;
  padding: 0 76px 162px;
}
.home-start .container {
  opacity: 0;
}
.home-start.ready .container {
  opacity: 1;
  animation: fadeIn 1.2s both;
}
.home-start .green-box {
  width: 100%;
  max-width: 633px;
  padding: 30px;
  border-radius: 30px;
  background: rgba(42, 82, 54, 0.90);
}
.home-start h1 {
  color: #fff;
  border: none;
  color: var(--White, var(--White, #FFF));
  font-family: "lektorat-text-variable", sans-serif;
  font-size: 48px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: -0.96px;
  margin: 0;
  padding: 0;
}
.home-start .pause-play {
  font-family: "lektorat-text-variable", sans-serif;
  position: absolute;
  left: 84px;
  bottom: 86px;
  border-radius: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0px 1px 3px 0px #000;
  color: #1F1F21;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: normal; /* 11.64px */
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  width: auto;
}
.home-start .pause-play:hover {
  background: rgba(255, 255, 255, 1);
}
.home-start .pause-play:before {
  content: '\f04c';
  font-family: 'Font Awesome 6 Pro';
}
.home-start .pause-play:after {
  content: ' Pause';
}
.home-start .pause-play.active:before {
  content: '\f04b';
  font-family: 'Font Awesome 6 Pro';
}
.home-start .pause-play.active.active:after {
  content: ' Play';
}
.home-start .pause-play.mobile.active:before {
  content: '\f04b';
  font-family: 'Font Awesome 6 Pro';
}
.home-start .pause-play.mobile:after {
  content: ' Play';
}
.home-start .pause-play.mobile:before {
  content: '\f04c';
  font-family: 'Font Awesome 6 Pro';
}
.home-start .pause-play.mobile:after {
  content: ' Pause';
}

.home-start .mute-unmute {
  position: absolute;
  right: 110px;
  bottom: 48px;
  border-radius: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0px 1px 3px 0px #000;
  color: #1F1F21;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 97%; /* 11.64px */
  letter-spacing: 1.8px;
  text-transform: uppercase;
  text-decoration: none;
}
.home-start .mute-unmute:hover {
  background: rgba(255, 255, 255, 1);
}
.home-start .mute-unmute:before {
  content: '\f2e2';
  font-family: 'Font Awesome 6 Pro';
}
.home-start .mute-unmute.active:before {
  content: '\f028';
  font-family: 'Font Awesome 6 Pro';
}

@media (max-width: 1420px) {
  .home-start .bnn .video video {
    width: auto;
    height: 121%;
    left: 50%;
    transform: translate(-50%, 0);
  }
}
@media (max-width: 768px) {
  .home-start .pause-play {
	  bottom: 100%;
	  left: 15px;
	  margin-bottom: 15px;
	  font-size: 10px;
	  width: auto;
	  padding: 8px;
  }
  .home-start {
    height: auto;
    border-radius: 15px;
  }
  .home-start .bnn {
    position: relative;
    height: auto;
    overflow: hidden;
    border-radius: 0;
  }
  .home-start .bnn picture {
    display: block;
  }
  .home-start .container {
	width: 100%;
	padding: 0;
	border-radius: 0;
  }
  .home-start .container .green-box {
	border-radius: 0;
	max-width: none;
	padding: 15px 30px 30px;
	border-top: solid 1px #fff;
  }
  .home-start .container h1 {
    color: var(--White, var(--White, #FFF));
    font-family: "lektorat-text-variable", sans-serif;
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: -0.56px;
  }
}

/* Schools */
.schools-section {
	margin-top: -50px;
}
.schools-section .container {
  opacity: 0;
}
.schools-section.ready .container {
  opacity: 1;
  animation: fadeInUp 1.2s both;
}
.schools-section .bento-box {
	padding: 30px 60px 60px;
	background: var(--Primary-Blue, #B0DFDB);
}
.schools-section .row {
	gap: 45px;
}
.schools-section .row > div {
	width: calc(25% - 34px);
}
.cta {
	min-height: 165px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 15px;
	padding: 10px;
	background: var(--White, #FFF);
	transition: all .3s ease;
	/* Logo Dropshadow */
	box-shadow: 8px 8px 0px 0px var(--Primary-Blue---Dark, #7AC9C2);
}
.cta:hover {
	border-radius: 15px;
	background: var(--Primary-Blue---Light, #E6F5F4);
	/* Logo Dropshadow */
	box-shadow: 8px 8px 0px 0px var(--Primary-Blue---Dark, #7AC9C2);
}
.cta:after {
  content: '\f35a';
  font-family: 'Font Awesome 6 Pro';
  font-weight: 600;
  transition: all .3s ease;
  opacity: 1;
  font-size: 36px;
  color: var(--Parrot-Green, #1B9E69);
  font-size: 24px;
  font-style: normal;
  line-height: normal;
  margin: 10px 0 0;
}
.cta img {
	max-width: 100%;
	max-height: 108px;
	max-width: 207px;
	max-height: 120px;
}
@media (max-width: 1200px) {
	.schools-section .row {
		gap: 15px;
	}
	.schools-section .row > div {
		width: calc(25% - 12px);
	}
}
@media (max-width: 991px) {
	.schools-section .row {
		gap: 30px;
	}
	.schools-section .row > div {
		width: calc(50% - 15px);
	}
}
@media (max-width: 768px) {
	.schools-section .bento-box {
		padding: 30px;
	}
	.schools-section {
		margin-top: 30px;
	}
	.schools-section .row > div {
		width: 100%;
	}
}

/* Join */
.join-section {}
.join-section .container {
  opacity: 0;
}
.join-section.ready .container {
  opacity: 1;
  animation: fadeInUp 1.2s both;
}
.join-section .bento-box {
	background: var(--Cobalt-Blue, #567EBF);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.join-section .bento-box .info {
	background: #fff;
	border-radius: 15px;
	padding: 60px;
	max-width: 626px;
	position: relative;
}
.join-section .bento-box .info h2 {
	margin: 0 0 8px;
}
.join-section .bento-box .info p {
	max-width: 450px;
	margin: 0 0 13px;
}
.join-section .bento-box .bnn {margin-left: -20%;}
.join-section .bento-box .bnn img {
	border-radius: 15px;
	width: 100%;
	height: 100%;
	object-fit: cover
}
@media (max-width: 991px) {
	.join-section .bento-box {
		flex-direction: column;
		gap: 15px;
	}
	.join-section .bento-box > div {
		min-width: auto;
		width: 100%;
		margin: 0!important;
	}
	.join-section .bento-box .info {
		padding: 30px;
	}
	.join-section .bento-box div.bnn {
		position: relative;
		padding-bottom: 49%;
	}
	.join-section .bento-box div.bnn img {
		position: absolute;
	}
}

/* Mission */
.mission-section {
}
.mission-section .container {
  opacity: 0;
}
.mission-section.ready .container {
  opacity: 1;
  animation: fadeInUp 1.2s both;
}
.mission-section .bento-box {
	background: rgba(255, 255, 255, 0.30);
	position: relative;
	overflow: hidden;
}
.mission-section .bento-box:before {
	content: '';
	position: absolute;
	z-index: -1;
	right: 60px;
	top: 50%;
	transform: translateY(-50%) rotate(15deg);
	width: 371px;
	height: 371px;
	background-image: url(../img/Meeting-Street-Schools-Seal-cadmium-orange.svg);
	background-repeat: no-repeat;
	background-size: 371px;
}
.mission-section .bento-box h2 {
    margin: 0 0 8px;
}
.mission-section .bento-box p {
	max-width: 620px;
	margin: 0 0 13px;
}
@media (max-width: 991px) {
	.mission-section .bento-box {
		padding: 30px;
		padding-top: 150px;
	}
	.mission-section .bento-box:before {
		z-index: 0;
		left: 30px;
		right: unset;
		top: -29px;
		transform: rotate(15deg);
		width: 165px;
		height: 165px;
		background-size: 165px;
	}
}

/* News */
.news-section {}
.news-section .container {
  opacity: 0;
}
.news-section.ready .container {
  opacity: 1;
  animation: fadeInUp 1.2s both;
}
@media (min-width: 1201px) {
	.news-section .bento-box .news-grid {
	    gap: 30px;
	}
	.news-section .bento-box .news-grid > div {
		width: calc(33.3333% - 20px);
	}
}
.news-section .bento-box .news-cta {
	height: 100%;
    display: block;
    border-radius: 15px;
	overflow: hidden;
	background: var(--Parrot-Green, #1B9E69);
    box-shadow: 8px 8px 0px 0px var(--Parrot-Green---Dark, #105D3E);
	transition: all .3s ease;
}
.news-section .bento-box .news-cta:hover {
	background: #1C895D;
}
.news-section .bento-box .news-cta .bnn {
	display: block;
	position: relative;
	padding-bottom: 80.2%;
}
.news-section .bento-box .news-cta .bnn img {
	position: absolute;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.news-section .bento-box .news-cta .info {
	display: flex;
	gap: 15px;
	align-items: start;
	padding: 15px;
	color: var(--White, var(--White, #FFF));
	font-family: "lektorat-text-variable", sans-serif;
	font-size: 24px;
	font-style: normal;
	font-weight: 600;
	line-height: 1.2em;
}
.news-section .bento-box .news-cta .info:after {
  display: flex;
  height: 100%;
  align-items: end;
  content: '\f35a';
  font-family: 'Font Awesome 6 Pro';
  font-weight: 600;
  transition: all .3s ease;
  opacity: 1;
  font-size: 36px;
  color: #fff;
  font-size: 24px;
  font-style: normal;
  line-height: normal;
}
@media (max-width: 991px) {
	.news-section .bento-box .news-grid {
		gap: 30px;
	}
}