@import url('https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,700i');

/* MAIN PAGE media queries */
@media screen and (max-width: 1190px){
	#landingpage .school-kits .school-kits-photo, #landingpage .school-kits .category, #landingpage .school-kits .wrap {
		width: 50% !important;
	}
	.school-kits-photo.photo-blog, .school-kits-travel-blog.category {
		float: right !important;
	}
	#landingpage .competition-banner .text {
		max-width: 45% !important;
	}
	#landingpage .competition-banner .heart {
		opacity: 0.30 !important;
	}
}
@media screen and (max-width: 950px){
	#landingpage #hero .wrap {
		padding: 20px 0 !important;
	}
}
@media screen and (max-width: 625px){
	#landingpage .school-kits .school-kits-photo, #landingpage .school-kits .category, #landingpage .school-kits .wrap {
		width: 100% !important;
	}
	#landingpage .school-kits-photo.purpose, #landingpage .school-kits-photo.travel-blog, #landingpage .school-kits-photo.vlogger {
		display: none !important;
	}
	#landingpage .school-kits-purpose.category {
		background: linear-gradient(-180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.30) 0%), url('../images/cisv-kids-holding-hands.jpg') center/cover;
		color: #fff;
	}
	#landingpage .school-kits-description.travel-blog {
		background: linear-gradient(-180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.30) 0%), url('../images/cisv-kid-writing-2.jpg') center/cover;
		color: #fff;
	}
	#landingpage .school-kits-description.vlogger {
		background: linear-gradient(-180deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.50) 0%), url('../images/cisv-kids-in-circle.jpg') center/cover;
		color: #fff;
	}
	#landingpage .section.right-aligned, #landingpage .section.left-aligned {
		max-width: none !important;
		padding: 40px !important;
	}
	#landingpage .bottom-grid .school-kits-purpose.category {
		background: linear-gradient(-180deg, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0.60) 0%), url('../images/bowa.jpg') center/cover;
		color: #fff;
	}
	#landingpage .bottom-grid .school-kits-photo.photo-blog {
		display: none;
	}
	#landingpage .bottom-grid .school-kits-description.photo-blog {
		background: linear-gradient(-180deg, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0.60) 0%), url('../images/strelka.jpg') center/cover;
		color: #ffffff;
	}
	#landingpage .bottom-grid .school-kits-description.travel-blog {
		background: linear-gradient(-180deg, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.40) 0%), url('../images/wtmw.jpg') center/cover;
	}
	#landingpage .bottom-grid .school-kits-description.vlogger {
		background: linear-gradient(-180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.30) 0%), url('../images/worldmap.jpg') center/cover;
	}
	#landingpage .competition-banner .text {
		max-width: 100% !important;
	}
	#landingpage .competition-banner .cisv-logo {
		position: absolute !important;
		bottom: 30px !important;
		right: 30px !important;
		top: unset !important;
		width: 140px !important;
		height: 45px !important;
	}
}

/* MODALS media queries*/
@media screen and (min-width: 885px){
	/* remove scroll-to-top button from desktop */
	.scroll-to-top {
		display: none !important;
	}
	/* remove 'share to whatsapp' from desktop */
	#landingpage .whatsapp {
		display: none !important;
	}
}
@media screen and (max-width: 885px){
	#landingpage .modal .social-icons {
		display: flex !important;
		margin-bottom: 0px !important;
		right: 10px !important;
		float: right !important;
	}
	#landingpage .modal .social-icons li {
		padding: 5px !important;
	}
	/* remove 'share to pinterest' from mobile */
	#landingpage .pinterest { 
		display: none !important;
	}
	#landingpage .modal .cisv-school-kits-section .wrap {
		padding: 50px 0 !important;
	}
	#landingpage .modal .left-aligned, #landingpage .modal .right-aligned {
		max-width: none !important;
		padding: 6% !important;
	}
	#landingpage .modal .row {
		margin-top: 0px !important;
	}
	#landingpage .modal .vot-percentage .percentage, #landingpage .modal .endorsement-section .endorsement {
		width: 100% !important;
	}
	#landingpage #modals .scroll-to-top {
		/* display: block !important; */
	}
	#landingpage .modal .our-colorful-world, #landingpage .modal .equally-different {
		max-width: none !important;
		margin: 0 !important;
		padding: 30px !important;
		box-sizing: border-box !important;
	}
	#landingpage .cisv-school-kits-section .open-minds-logo-small {
		display: none !important;
	}
	#landingpage #school-kits-modal .cisv-school-kits-section .wrap .description h1, 
	#landingpage #school-kits-modal .cisv-school-kits-section .wrap .description p {
		max-width: none !important;
		padding: 0 30px !important;
	}
	#landingpage #modals #school-kits-modal .modal-content .wrap.section-small {
		padding: 30px !important;
		max-width: none !important;
		box-sizing: border-box !important;
	}
	#landingpage .quote-start {
		left: 30px !important;
		top: -20px !important;
	}
	#landingpage .quote-end {
		right: 30px !important;
		bottom: -20px !important;
	}
	#landingpage .modal .quote-container.quote-small {
		display: block !important;
		width: 100% !important;
		padding: 1px 0 !important;
	}
	#landingpage .modal-content.cisv-about {
		padding: 50px 0 !important;
	}
	#landingpage .vertical-center {
		position: relative;
		top: 50%;
		transform: translateY(-50%);
	}
	#landingpage .download-kits {
		height: 100% !important;
	}
	#landingpage .download-kits .open-minds-logo-small {
		width: 70px !important;
		height: 70px !important;
	}
}
@media screen and (max-width: 600px){
	#landingpage #hero p.loow-logo {
		font-size: 45px !important;
		line-height: 55px !important;
	}
	#landingpage #hero p {
		padding: 0 30px !important;
	}
	#landingpage .modal .school-kit-item {
		background-position: top left !important;
	}
	#landingpage .modal .cisv-school-kits-section .wrap .kit-text {
		/* padding: 180px 0 0 0 !important; */
	}
	#landingpage .modal .collab-logos {
		margin: 0 !important;
	}
}
@media screen and (max-width: 559px){
	#landingpage {
		top: 27px !important;
		position: relative !important;
	}
}

/*  C M S   H A C K S  */
.clearfix {
	display: block !important;
}
body.wide div.center {
	width: 100% !important;
}
body.wide #content {
	width: 100% !important;
}
.center {
	padding: 0px !important;
}

/*  G L O B A L  */
body {
	margin: 0;
	background-color: #171717;
	font-size: 0 !important;
}
p {
	margin: 0;
	padding: 0;
}
h3 {
	margin: 0;
	padding: 0;
}
.header-dot {
	color: #EC008C;
}
#mui-footer {
	margin-top: -10px !important;
}
.horizontal-line {
	width: 40%;
	border-bottom: 1px solid #EC008C;
	margin: 60px auto 56px auto;
	padding: 0;
}
.hidden {
	display: none;
}
.invisible {
	opacity: 0;
}
/* P R E L O A D E R */
#landingloader {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: url('../images/loow-cisv-hero.jpg') no-repeat center center/cover;
	z-index: 0;
	overflow: unset;
	display: none;
}
#momowheel {
	display: none;
	width: 40px;
	height: 40px;
	margin: auto;
	position: absolute;
	top: 20px;
	right: 20px;
	background-image: url('../images/loading-wheel.gif');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

/*  M A I N  */
#landingpage {
	width: 100%;
	max-width: 2500px;
	padding: 0;
	margin: 0 auto;
	background-color: rgba(0, 0, 0, 0);
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	color: #000000;
	overflow: hidden;
}
#landingpage h1 {
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	text-align: center;
	font-size: 40px;
	line-height: 50px;
	color: #EC008C;
}
#landingpage h2 {
	font-size: 32px;
	font-weight: 700;
	line-height: 40px;
	margin-bottom: 40px 0 15px 0;
}
#landingpage h3 {
	font-size: 26px;
	font-weight: 700;
	line-height: 26px;
	margin-bottom: 40px 0 15px 0;
}
#landingpage p {
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 26px;
	padding-bottom: 0;
	max-width: 660px;
	margin: 20px auto;
	text-align: center;
}
#landingpage p.small {
	font-size: 12px;
	line-height: 16px;
	margin: 4px 0 20px 0;
}
#landingpage h3.small {
	font-size: 12px;
	line-height: 16px;
}
#landingpage a {
	font-size: inherit;
	font-weight: 500;
	color: #039BE5;
	text-decoration: none;
}
#landingpage a:hover {
	color: #00CAFE;
}
#landingpage a:active {
	color: #006AC2;
}
#landingpage a#read-the-terms {
	margin-top: 5px;
	display: block;
}
#landingpage .cta {
	height: 40px;
	border: none;
	padding: 0 20px;
	background-color: #55ACEE;
	border-radius: 4px;
	color: #ffffff;
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	display: inline-block;
	line-height: 40px;
	text-decoration: none;
}
#landingpage #about .cta {
	display: table;
	margin: auto;
}
#landingpage .cta:hover {
	background-color: #00CAFE;
	color: #ffffff;
}
#landingpage .cta:active {
	background-color: #0e377e;
	border: 1px solid #006ac2;
	color: #ffffff;
}
#landingpage .cta-ghost {
	height: 40px;
	border: none;
	padding: 0 20px;
	background-color: rgba(0, 0, 0, 0);
	border: 1px solid #039be5;
	border-radius: 4px;
	color: #039be5;
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	display: inline-block;
	line-height: 40px;
	text-decoration: none;
}
#landingpage .cta-ghost:hover {
	background-color: #0e679c;
	border: 1px solid #00cafe;
	color: #00cafe;
}
#landingpage .cta-ghost:active {
	color: #006AC2;
}

/*  H E R O  */
#hero {
	width: 100%;
	height: 50vh;
	min-height: 400px;
	max-height: 548px;
	background-size: cover;
	background-position: center;
	display: table;
	color: #ffffff;
	position: relative;
	overflow: hidden;
}
#landingpage .wrap {
	width: 100%;
	height: 100%;
	max-width: 600px;
	margin: auto;
	padding: 120px 0;
	display: table-cell;
	vertical-align: middle;
}
#hero h1 {
	font-family: 'Lato';
	font-weight: 300;
	font-size: 50px;
	text-align: center;
	margin: auto;
	color: #ffffff;
	width: 95%;
	max-width: 650px;
}
#hero h1 .h1-bold {
	font-family: 'Lato', sans-serif;
	font-weight: 300;
}
#landingpage #hero p {
	padding: 0;
	box-sizing: border-box;
	position: relative;
	z-index: 1;
}
#landingpage #hero p.loow-logo {
	font-size: 70px;
	line-height: 70px;
	max-width: 100%;
	font-weight: 300;
	text-shadow: 0 0 5px rgba(0,0,0,0.20);
}
#landingpage #hero p.loow-logo .bold {
	font-weight: 700;
}
#landingpage #hero .hero-wrap {
	white-space: nowrap;
}
#landingpage .video-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 1;
	background-image: linear-gradient(-1deg, #1E063E 0%, rgba(200,109,215,0.00) 100%);
}
#landingpage #hero .loow-logo, #landingpage #hero p {
	z-index: 11;
}
video#bgvid {
	position: absolute;
	top: 50%;
	z-index: -1;
	width: auto;
	min-width: 100%;
	background-size: cover;
	height: auto;
	min-height: 100%;
	left: 50%;
	-ms-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}
#landingpage #hero #video-controls {
	position: absolute;
	width: 20px;
	height: 20px;
	left: 30px;
	bottom: 30px;
	opacity: 0.3;
	z-index: 11;
	padding: 5px;
	cursor: pointer;
}
#landingpage #hero #video-controls:hover {
	opacity: 1;
}
#landingpage #hero #video-controls .pause {
	width: 20px;
	height: 20px;
	display: block;
	background-image: url('../images/pause.svg');
	background-size: 20px 20px;
	background-position: center;
}
#landingpage #hero #video-controls .play {
	width: 20px;
	height: 20px;
	display: none;
	background-image: url('../images/play.svg');
	background-size: 20px 20px;
	background-position: center;
}
#landingpage .divider {
	width: 80px;
	height: 4px;
	background-image: url('../images/divider.svg');
	position: relative;
	z-index: 100;
	margin: 50px auto;
}
#landingpage .social-icons {
	text-align: center;
	padding: 0;
}

#landingpage .social-icons li {
	display: inline-block;
	width: 30px;
	height: 30px;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.5;
	list-style: none;
	margin: 0 4px;
}

#landingpage .social-icons li:hover {
	opacity: 1;
	cursor: pointer;
}

/*  C A T E G O R I E S  */
#landingpage .school-kits {
	display: block;
	overflow: hidden;
}
#landingpage .school-kits .school-kits-photo,
#landingpage .school-kits .category,
#landingpage .school-kits .wrap {
	width: 25%;
	height: 360px;
	/* overflow: hidden; */
}
#landingpage .category {
	float: left;
	position: relative;
}
#landingpage .school-kits-description .wrap div {
	position: relative;
	top: 25%;
	transform: translateY(-50%);
}
#landingpage .school-kits .wrap {
	padding: 0 40px 0 40px;
}
#landingpage .school-kits h3, #landingpage .school-kits p {
	width: 100%;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
#landingpage .school-kits h3 {
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 33px;
	padding-bottom: 7px;
}
#landingpage .school-kits p {
	text-align: left;
	margin-bottom: 20px;
	font-size: 16px;
	line-height: 22px;
}
#landingpage .bg-blur {
	width: 100%;
	height: 360px;
	background-position: center;
	display: block;
	position: relative;
	overflow: hidden;
	top: -360px;
	z-index: -1;
	transform: scale(1.2);
	filter: blur(10px);
	-webkit-filter: blur(10px);
	-moz-filter: blur(10px);
	-o-filter: blur(10px);
	-ms-filter: blur(10px);
}
#landingpage .school-kits-photo {
	display: block;
	float: left;
	background-size: cover;
}
#landingpage .school-kits-photo.purpose, #modal-purpose .modal-image {
	background: url('../images/cisv-kids-holding-hands.jpg');
	background-size: cover;
	background-position: center;
}
#landingpage .school-kits-purpose .bg-blur {
	background: linear-gradient(-180deg, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.90) 0%), url('../images/cisv-kids-holding-hands.jpg');
	background-size: cover;
	background-position: center;
}
#landingpage .school-kits-photo.photo-blog, #modal-photoblog .modal-image {
	background: url('../images/cisv-matt-looking.jpg');
	background-size: cover;
	background-position: center;
}
#landingpage .school-kits-photo-blog .bg-blur {
	background: linear-gradient(-180deg, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.90) 0%), url('../images/cisv-girls-looking-up.jpg');
	background-size: cover;
	background-position: center;
}
#landingpage .school-kits-photo.travel-blog, #modal-travelblog .modal-image {
	background: url('../images/school-kit-video-thumb-our-colorful-world.jpg');
	background-size: cover;
	background-position: center;
}
#landingpage .school-kits-travel-blog .bg-blur {
	background: linear-gradient(-180deg, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.90) 0%), url('../images/cisv-kid-writing-2.jpg');
	background-size: cover;
	background-position: right;
}
#landingpage .school-kits-photo.vlogger, #modal-vlogger .modal-image {
	background: url('../images/school-kit-video-thumb-equally-different.jpg');
	background-size: cover;
	background-position: center;
}
#landingpage .school-kits-vlogger .bg-blur {
	background: linear-gradient(-180deg, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.90) 0%), url('../images/cisv-kids-in-circle.jpg');
	background-size: cover;
	background-position: center;
}
#landingpage .section {
	width: 100%;
	min-height: 80vh;
	box-sizing: border-box;
	display: inline-block;
}
#landingpage #the-dna-journey {
	background: linear-gradient(-120deg, rgba(0,0,0,0.70) 10%, rgba(0,0,0,0.20) 80%), url('../images/the-dna-journey.jpg') center/cover;
}
#landingpage #five-ways-to-open-our-world {
	background: linear-gradient(120deg, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.20) 80%), url('../images/the-5-ways.jpg') center/cover;
}
#landingpage #the-value-of-travelling {
	background: linear-gradient(-120deg, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.20) 80%), url('../images/the-value-of-travelling.jpg') center/cover;
}

#landingpage .cisv-about .cisv-logo {
	width: 100%;
	height: 90px;
	background: url('../images/cisv-logo-white.png') no-repeat center center/contain;
	margin: auto;
}

#landingpage .section.right-aligned {
	width: 100%;
	max-width: 600px;
	float: right;
	padding: 5% 6% 0 0;
}
#landingpage .section.left-aligned {
	width: 100%;
	max-width: 560px;
	float: left;
	padding: 5% 0 0 6%;
}
#landingpage .section h1, #landingpage .section p {
	text-align: left;
	color: #ffffff;
}
#landingpage .play-icon {
	width: 100%;
	height: 100%;
	cursor: pointer;
	background: url('../images/play-circle.svg') no-repeat center;
}
#landingpage .section p {
	padding-bottom: 10px;
}

#landingpage .competition-banner {
	position: relative;
	height: 360px;
	background-color: #1E063E;
	overflow: hidden;
}
#landingpage .competition-banner .text {
	width: 100%;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	padding: 0 40px;
	box-sizing: border-box;
	z-index: 1;
}
#landingpage .competition-banner .text h3,
#landingpage .competition-banner .text p {
	text-align: left;
	color: rgba(255,255,255,0.9);
}
#landingpage .competition-banner .text {
	max-width: 25%;
}
#landingpage .competition-banner .cisv-logo {
	position: absolute;
	right: 30px;
	top: 30px;
	z-index: 11;
	width: 250px;
	height: 70px;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url('../images/cisv-logo-white.png');
}
#landingpage .competition-banner .heart {
	width: 100%;
	height: 200%;
	background-image: url('../images/heart-lighter-edge.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	display: block;
	position: absolute;
	opacity: 0.7;
	right: 0%;
	top: -40px;
	z-index: 0;
	-ms-transform: rotate(20deg);
	-webkit-transform: rotate(20deg);
	transform: rotate(20deg);
	pointer-events: none;
}

/* BOTTOM GRID */


/* cell 1 */
#landingpage .bottom-grid .school-kits-photo.purpose {
	background-image: url('../images/bowa.jpg');
}

/* cell 2 */
#landingpage .bottom-grid .school-kits-photo.photo-blog {
	background-image: url('../images/strelka.jpg');
}

/* cell 3 */
#landingpage .bottom-grid .school-kits-photo.travel-blog {
	background-image: url('../images/wtmw.jpg');
}

/* cell 4 */
#landingpage .bottom-grid .school-kits-photo.vlogger {
	background-image: url('../images/worldmap.jpg');
}

#landingpage #about {
	padding: 12% 30px;
	background: url('../images/about-bg.jpg') no-repeat center/cover, rgba(255, 255, 255, 1);
	color: #ffffff;
}
#landingpage #about .momondo-logo {
	height: 35px;
	width: auto;
	background-image: url('../images/momondo-logo.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin-bottom: 30px;
}
#landingpage #about button {
	margin: auto;
	display: block;
}
/* M O D A L S */
body.modal-active {
	overflow: hidden;
	pointer-events: none;
}
#modals .scroll-to-top {
	position: fixed;
	width: 55px;
	height: 55px;
	bottom: 15px;
	right: 15px;
	border-radius: 100px;
	background: url('../images/scroll-to-top.svg') no-repeat center/contain, rgba(255,255,255,0.4);
	cursor: pointer;
	pointer-events: all;
	z-index: 111111;
	display: none;
}
#landingpage .download {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 11111111;
}
#landingpage .download-kits {
	width: 100%;
	height: auto;
	max-width: 900px;
	position: fixed;
	background: linear-gradient(-180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.3) 0%), url('../images/cisv-kid-writing-1.jpg') center/cover;
	text-align: center;
	color: #ffffff;
	left: 50%;
	transform: translate(-50%, -50%);
	top: 150%;
	padding: 150px 30px;
	pointer-events: all;
	border-radius: 3px;
	box-sizing: border-box;
	box-shadow: 0 0 150px rgba(255,255,255,0.15);
	-webkit-transition: all 0.75s ease-in-out;
	-moz-transition: all 0.75s ease-in-out;
	-o-transition: all 0.75s ease-in-out;
	transition: all 0.75s ease-in-out;
}
#landingpage .download-kits h3,
#landingpage .download-kits p {
	text-align: center;
	margin-bottom: 30px;
}
#landingpage .download-kits .open-minds-logo-small {
	width: 100px;
	height: 100px;
	left: 30px;
	top: 25px;
	z-index: 111;
	position: absolute;
	background: url('../images/open-minds-logo.png') no-repeat center center/contain;
}
#landingpage .download-kits .close-signup {
	height: 21px;
	color: rgba(255, 255, 255, 0.8);
	font-size: 12px;
	margin-top: 5px;
	margin-bottom: 0px;
	border-bottom: 1px solid rgba(255, 255, 255, 0);
	display: inline-block;
}
#landingpage .download-kits .close-signup a:hover {
	color: rgba(255, 255, 255, 1);
	border-bottom: 1px solid rgba(255, 255, 255, 0);
}
#landingpage .download-kits .close-signup a {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
}
#landingpage .download-bg-overlay {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	pointer-events: all;
	z-index: -1;
}
#landingpage .download-close {
	position: fixed;
	width: 50px;
	height: 50px;
	top: 20px;
	right: 20px;
	cursor: pointer;
	background: url('../images/close.svg') no-repeat center center / 15px rgba(255,255,255,0.9);
	border-radius: 100px;
	box-shadow: 0 0 20px rgba(0,0,0,0.1);
	z-index: 1;
}
#landingpage .modal {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: #18181a;
	overflow: scroll;
	pointer-events: all;
	-webkit-overflow-scrolling: touch;
	z-index: 11111;
	display: none;
}

#landingpage .modal iframe {
	width: 100%;
	height: 100%;
}

#landingpage .modal-content {
	padding: 30px 0;
	box-sizing: border-box;
	text-align: center;
	width: 100%;
	max-width: 1700px;
	margin: auto;
	background-color: #ffffff;
}

#landingpage .iframeDiv {
	display: none;
	height: 45vh;
	max-width: 1700px;
	margin: auto;
}

#landingpage .embedPoster {
	width: 100%;
	height: 45vh;
	max-width: 1700px;
	margin: auto;
	cursor: pointer;
}

/* disable click for modals without video in the hero */
#landingpage .story3-modal .embedPoster,
#landingpage .story4-modal .embedPoster {
	pointer-events: none;
}

#landingpage .story1-modal .embedPoster {
	background: url('../images/cisv-girls-looking-up.jpg') no-repeat center center/cover;
}
#landingpage .story2-modal .embedPoster {
	background: url('../images/the-dna-journey.jpg') no-repeat center center/cover;
}
#landingpage .story3-modal .embedPoster {
	background: url('../images/the-5-ways.jpg') no-repeat center center/cover;
}
#landingpage .story4-modal .embedPoster {
	background: url('../images/the-value-of-travelling.jpg') no-repeat center center/cover;
}
#landingpage .story5-modal .embedPoster {
	background: url('../images/cisv-girls-looking-up.jpg') no-repeat center center/cover;
}

/* vertically centers video-only modal */
#landingpage .video-modal .embedPoster,
#landingpage .video-modal .iframeDiv {
	/* position: relative;
	top: 50%;
	transform: translateY(-50%); */
	height: 100vh;
}
#landingpage .modal.video-modal iframe {
	height: 100%;
	max-height: none;
}


/* The 5 ways */
#landingpage .modal .left-aligned,
#landingpage .modal .right-aligned {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	max-width: 500px;
}
#landingpage .modal .right-aligned {
	float: right;
	padding: 6% 6% 6% 0;
	box-sizing: border-box;
}
#landingpage .modal .left-aligned {
	float: left;
	padding: 6% 0 6% 6%;
	box-sizing: border-box;
}
#landingpage .modal .the-5-ways-section {
	height: 500px;
	background-size: cover;
	background-position: center;
	max-width: 1700px;
	margin: auto;
}
#landingpage .modal .the-5-ways-section h1, #landingpage .modal .the-5-ways-section p {
	text-align: left;
	color: #ffffff;
}

#landingpage .story3-modal #the-5-ways-1 {
	background: linear-gradient(120deg, rgba(0,0,0,0.70) 10%, rgba(0,0,0,0.20) 80%), url('../images/5-ways-1.jpg') center/cover;
}
#landingpage .story3-modal #the-5-ways-2 {
	background: linear-gradient(-120deg, rgba(0,0,0,0.70) 10%, rgba(0,0,0,0.20) 80%), url('../images/5-ways-2.jpg') center/cover;
}
#landingpage .story3-modal #the-5-ways-3 {
	background: linear-gradient(120deg, rgba(0,0,0,0.70) 10%, rgba(0,0,0,0.20) 80%), url('../images/5-ways-3.jpg') center/cover;
}
#landingpage .story3-modal #the-5-ways-4 {
	background: linear-gradient(-120deg, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.20) 0%), url('../images/5-ways-4.jpg') center/cover;
}
#landingpage .story3-modal #the-5-ways-5 {
	background: linear-gradient(120deg, rgba(0,0,0,0.70) 10%, rgba(0,0,0,0.20) 80%), url('../images/5-ways-5.jpg') center/cover;
}

#landingpage .playIcon {
	width: 90px;
	height: 90px;
	background: url('../images/play-icon.svg') no-repeat 36px / 25px rgba(0,0,0,0.4);
	margin: auto;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	border-radius: 100px;
}
#landingpage .social-icons {
	position: relative;
	text-align: center;
	padding: 0;
	z-index: 11;
}

#landingpage .social-icons li {
	display: inline-block;
	width: 30px;
	height: 30px;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.5;
	list-style: none;
	margin: 0 4px;
}

#landingpage .social-icons li:hover {
	opacity: 1;
	cursor: pointer;
}

#landingpage .facebook {
	background-image: url('../images/facebook.svg');
}

#landingpage .twitter {
	background-image: url('../images/twitter.svg');
}

#landingpage .whatsapp {
	background-image: url('../images/whatsapp.svg');
}
#landingpage .pinterest {
	background-image: url('../images/pinterest.svg');
}
#landingpage .emailshare {
	background-image: url('../images/email.svg');
}

#landingpage .modal .social-icons {
	display: inline-block;
	text-align: center;
	padding: 0;
	margin: 0;
	position: relative;
	z-index: 11111;
}

#landingpage .modal .social-icons li {
	opacity: 1;
	border-radius: 50px;
	padding: 10px;
	display: block;
	margin-bottom: 8px;
}

#landingpage .modal .social-icons .facebook {
	background-color: #3B5998;
}
#landingpage .modal .social-icons .twitter {
	background-color: #55ACEE;
}
#landingpage .modal .social-icons .whatsapp {
	background-color: #25D366;
}
#landingpage .modal .social-icons .pinterest {
	background-color: #cb2027;
}
#landingpage .modal .social-icons .emailshare {
	background-color: #e9a70c;
}

#landingpage .modal .row {
	display: inline-block;
	vertical-align: top;
	text-align: left;
	width: 100%;
	margin: 0;
	max-width: 760px;
	padding: 0 30px 30px 30px;
	box-sizing: border-box;
}

#landingpage .modal .row, #landingpage .modal .row h1, #landingpage .modal .row h3, #landingpage .modal .row p {
	color: rgba(0, 0, 0, 0.85);
}

#landingpage .modal h1 {
	text-align: left;
	margin: 0 0 20px 0;
}

#landingpage .modal h3 {
	text-align: left;
	margin: 40px 0 10px 0;
}

#landingpage .modal p {
	text-align: left;
	padding: 0;
	max-width: 100%;
}
#landingpage .modal .collab-logos {
	width: 100%;
	text-align: center;
	margin: 50px 0;
}
#landingpage .modal .collab-logos .momondo-logo,
#landingpage .modal .collab-logos .open-minds-logo,
#landingpage .modal .collab-logos .cisv-logo {
	width: 30%;
	height: 150px;
	display: inline-block;
	background-size: 65%;
	background-position: center;
	background-repeat: no-repeat;
}
#landingpage .momondo-logo {
	background-image: url('../images/momondo-logo.png');
}
#landingpage .open-minds-logo {
	background-image: url('../images/open-minds-logo.png');
}
#landingpage .cisv-logo {
	background-image: url('../images/cisv-logo.png');
}
#landingpage .modal .article-intro {
	font-size: 20px;
	font-style: italic;
}

#landingpage .modal-featured {
	background-color: #F74542;
	color: #ffffff;
	display: table;
	font-weight: 700;
	padding: 10px 20px;
	margin-bottom: 30px;
}

#landingpage .modal .divider {
	background: url('../images/divider.svg') no-repeat left;
	margin: 50px auto 40px auto;
}

#landingpage #modals #school-kits-modal .modal-content .wrap.section-small {
	display: block;
	margin: auto;
	padding: 100px;
	height: auto;
	max-width: 700px;
}

#landingpage #school-kits-modal .cisv-school-kits-section .wrap .description h1 {
	color: #ffffff;
	margin: auto;
	max-width: 700px;
	display: block;
	font-size: 40px;
	line-height: 44px;
}

#landingpage #modals #school-kits-modal .modal-content .wrap.section-small h1 {
	color: #000000;
}

#landingpage .modal .quote-container {
	position: relative;
	width: 100%;
	max-width: 850px;
	padding: 8% 4%;
	box-sizing: border-box;
	margin: 30px auto;
}

#landingpage .modal .quote-container .quote {
	font-size: 24px;
	line-height: 29px;
	text-align: center;
	font-style: italic;
	font-weight: 400;
	color: #3D1367;
}
#landingpage .modal .quote-container p {
	text-align: center;
	font-style: italic;
}
#landingpage .modal .quote-container a {
	text-decoration: none;
}

#landingpage .quote-start {
	position: absolute;
	width: 50px;
	height: 50px;
	left: 0;
	top: 15px;
	background: url('../images/quote.svg') no-repeat center center/contain;
}

#landingpage .quote-end {
	position: absolute;
	width: 50px;
	height: 50px;
	right: 0;
	bottom: 15px;
	background: url('../images/quote.svg') no-repeat center center/contain;
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}
#landingpage .modal .quote-container.quote-small {
	width: 33%;
	margin: auto;
	display: inline-block;
	vertical-align: top;
	padding: 30px 20px;
}
#landingpage .modal .quote-container.quote-small .quote {
	font-size: 20px;
	line-height: 24px;
}
#landingpage .modal .quote-container.quote-small .quoter {
	text-align: center;
	font-style: italic;
	color: #3D1367;
}
#landingpage .modal .quote-container.quote-small .quote-start, 
#landingpage .modal .quote-container.quote-small .quote-end {
	width: 30px;
	height: 30px;
	display: none;
}
#landingpage .modal .endorsement-section {
	margin: 40px 0;
}
#landingpage .modal .endorsement-section .endorsement {
	width: 25%;
	display: inline-block;
	padding: 30px;
	box-sizing: border-box;
	vertical-align: top;
}
#landingpage .modal .endorsement-section .endorsement h1 {
	font-size: 24px;
	font-style: italic;
	font-weight: 700;
	color: #000000;
	text-align: center;
	margin: 10px 0;
	line-height: inherit;
}
#landingpage .modal .endorsement-section .endorsement p {
	font-size: 16px;
	font-style: italic;
	font-weight: 400;
	color: #000000;
	text-align: center;
}
#landingpage .modal .endorsement-section .endorsement .endorser {
	width: 115px;
	height: 115px;
	background-color: #cccccc;
	margin: auto;
	border-radius: 100px;
	background-size: cover;
	border: 1px solid #D6D6D6;
}
#landingpage .modal .endorsement-section .endorsement .endorser1 {
	background-image: url('https://unsplash.it/100/104');
}
#landingpage .modal .endorsement-section .endorsement .endorser2 {
	background-image: url('https://unsplash.it/100/106');
}
#landingpage .modal .endorsement-section .endorsement .endorser3 {
	background-image: url('https://unsplash.it/100/107');
}
#landingpage .modal .endorsement-section .endorsement .name {
	font-weight: bold;
	margin: 0;
}
#landingpage .modal .endorsement-section .endorsement .position {
	color: #000000;
	font-size: 12px;
	padding: 0;
	display: inline-block;
	margin-top: 2px;
	max-width: 200px;
	line-height: 18px;
}
#landingpage .story-image {
	width: 100%;
	height: 390px;
	border-radius: 4px;
}
#landingpage .modal-content.cisv-about {
	background: url('../images/cisv-bg.jpg') no-repeat center center/cover;
	padding: 200px 0;
}
#landingpage .modal-content.cisv-about h3,
#landingpage .modal-content.cisv-about p {
	color: #ffffff;
	text-align: center;
}
#landingpage .modal-content.cisv-about a {
	display: table;
	margin: auto;
}

#landingpage #modals #school-kits-modal .modal-content .cisv-logo {
	width: 100%;
	max-width: 380px;
	height: 120px;
	background: url('../images/cisv-logo-white.png') no-repeat center center/contain;
	margin: auto;
}

#landingpage #project1-modal .story-image {
	background: url('../images/projects/ny-children/story-image.jpg') no-repeat center center/cover;
}

#landingpage #project2-modal .story-image {
	background: url('https://unsplash.it/800/610') no-repeat center center/cover;
}

#landingpage .story-image-text {
	font-size: 16px;
	line-height: 20px;
	font-style: italic;
	margin: 10px 0 30px 0;
}

#landingpage .why-we-support {
	position: relative;
	background-color: #3D1367;
	border-radius: 4px;
	padding: 30px;
	overflow: hidden;
}

#landingpage .why-we-support-bg {
	position: absolute;
	width: 200px;
	height: 100%;
	right: -15px;
	top: -52px;
	/* background: url('../images/ow.svg') no-repeat center / 190px; */
	opacity: 0.5;
}

#landingpage .modal .why-we-support h1 {
	position: relative;
	color: #ffffff;
	font-size: 22px;
	line-height: 27px;
	z-index: 11;
}

#landingpage .modal .why-we-support p {
	position: relative;
	color: #ffffff;
	font-size: 14px;
	line-height: 17px;
	margin: inherit;
	z-index: 11;
}

#landingpage .modal .about-the-founder {
	position: relative;
	border-radius: 4px;
	padding: 30px 30px 30px 35%;
	overflow: hidden;
	margin: 20px 0;
	border: 1px solid #D6D6D6;
}

.about-the-founder-image {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 30%;
	background: url('https://unsplash.it/805/615') no-repeat center center/cover;
}

#landingpage .modal .about-the-founder h1 {
	position: relative;
	color: rgba(0, 0, 0, 0.85);
	font-size: 22px;
	line-height: 27px;
	z-index: 11;
}

#landingpage .modal .about-the-founder p {
	position: relative;
	color: rgba(0, 0, 0, 0.85);
	font-size: 14px;
	line-height: 17px;
	z-index: 11;
}

#landingpage .modal .smallbox {
	width: 48%;
	height: 200px;
	border-radius: 4px;
	display: inline-block;
	margin: 0;
	padding: 30px 0;
	border: 1px solid #D6D6D6;
}

#landingpage .modal .smallbox.project-location {
	float: right;
	background: url('../images/project-origin.png') no-repeat center center/contain;
}

#landingpage .modal .smallbox.timeline {
	background: url('../images/timeline.png') no-repeat center center/contain;	
}
#landingpage .modal .cisv-school-kits-section {
	width: 100%;
	margin-top: 50px;
	box-sizing: border-box;
	background: url('../images/school-kits-bg.jpg') no-repeat center center/cover;
}
#landingpage .modal .school-kit-item {
	width: 100%;
	margin: auto;
	color: #ffffff;
}
#landingpage .modal .cisv-school-kits-section .wrap {
	display: block;
	height: inherit;
	max-width: 100%;
}
#landingpage .modal .cisv-school-kits-section .wrap .kit-text {
	width: 100%;
	display: inline-block;
	text-align: left;
	box-sizing: border-box;
	padding: 0;
}
#landingpage .modal .cisv-school-kits-section h3 {
	margin: 0 0 20px 0;
	color: #ffffff;
}
#landingpage .modal .school-kit-item .video-thumbnail {
	width: 100%;
	height: 225px;
	background-color: #ccc;
	margin: 30px 0;
	border-radius: 3px;
	cursor: pointer;
}
#landingpage .modal .our-colorful-world,
#landingpage .modal .equally-different {
	width: 100%;
	max-width: 425px;
	margin: 30px 50px;
	display: inline-block;
}
#landingpage .modal .school-kit-item .video-thumbnail .play-icon {
	width: 60px;
	height: 60px;
	background: url('../images/play-icon.svg') no-repeat 25px / 18px rgba(0,0,0,0.4);
	margin: auto;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	border-radius: 100px;
}
#landingpage .cisv-school-kits-section .open-minds-logo-small {
	background: url('../images/open-minds-logo-small.png') no-repeat center/cover;
	width: 100px;
	height: 100px;
	left: 50px;
	top: 50px;
	position: relative;
}
#landingpage .modal .cisv-school-kits-section .description h3, 
#landingpage .modal .cisv-school-kits-section .description p {
	color: #ffffff;
	margin: auto;
	box-sizing: border-box;
	max-width: 700px;
}
#landingpage .modal .cisv-school-kits-section .description p {
	font-size: 14px;
	line-height: 20px;
	margin: 20px auto;
}
#landingpage .modal .cisv-school-kits-section .wrap .our-colorful-world .video-thumbnail {
	background: url('../images/school-kit-video-thumb-our-colorful-world.jpg') no-repeat center/cover;
}
#landingpage .modal .cisv-school-kits-section .wrap .equally-different .video-thumbnail {
	background: url('../images/school-kit-video-thumb-equally-different.jpg') no-repeat center/cover;
}
#landingpage .modal .school-kit-item .video-thumb-text {
	font-size: 12px;
	line-height: 18px;
}
#landingpage .modal .our-colorful-world {
	/* background: url('../images/our-colorful-world.png') no-repeat center left/150px; */
}
#landingpage .modal .equally-different {
	/* background: url('../images/equally-different.png') no-repeat center left/150px; */
}
#landingpage .modal .vot-percentage {
	width: 100%;
	text-align: center;
	margin: 50px 0;
}
#landingpage .modal .vot-percentage .percentage {
	width: 31%;
	height: 150px;
	text-align: center;
	display: inline-block;
}
#landingpage .modal .vot-percentage .percentage h1 {
	text-align: center;
	font-size: 64px;
	font-weight: 700;
}
#landingpage .modal .vot-percentage .percentage p {
	text-align: center;	
}
#landingpage .modal-close {
	position: fixed;
	width: 50px;
	height: 50px;
	top: 20px;
	right: 20px;
	cursor: pointer;
	background: url('../images/close.svg') no-repeat center center / 15px rgba(255,255,255,0.9);
	border-radius: 100px;
	box-shadow: 0 0 20px rgba(0,0,0,0.1);
	z-index: 1;
}