@font-face {
	font-family: GothamBold;
	src: url(../fonts/GothamBold.eot?v=4.2.0);
	src: url(../fonts/GothamBold.eot?#iefix&v=4.2.0) format('embedded-opentype'), url(../fonts/GothamBold.woff?v=4.2.0) format('woff'), url(../fonts/GothamBold.ttf?v=4.2.0) format('truetype'), url(../fonts/GothamBold.svg?v=4.2.0#fontawesomeregular) format('svg');
}

@font-face {
	font-family: gotham-book;
	src: url(../fonts/gotham-book.eot?v=4.2.0);
	src: url(../fonts/gotham-book.eot?#iefix&v=4.2.0) format('embedded-opentype'), url(../fonts/gotham-book.woff?v=4.2.0) format('woff'), url(../fonts/gotham-book.ttf?v=4.2.0) format('truetype'), url(../fonts/gotham-book.svg?v=4.2.0#fontawesomeregular) format('svg');
}

@font-face {
	font-family: gotham-medium;
	src: url(../fonts/gotham-medium-webfont.eot?v=4.2.0);
	src: url(../fonts/gotham-medium-webfont.eot?#iefix&v=4.2.0) format('embedded-opentype'), url(../fonts/gotham-medium-webfont.woff?v=4.2.0) format('woff'), url(../fonts/gotham-medium-webfont.ttf?v=4.2.0) format('truetype'), url(../fonts/gotham-medium-webfont.svg?v=4.2.0#fontawesomeregular) format('svg');
}

/* CSS Document */
body,
html {
	height: 100%;
	width: 100%;
}

*,
:after,
:before {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: inherit;
}

.home-takeOver-wrap {
	background-color: rgba(0, 0, 0, .9);
	height: 100%;
	justify-content: center;
	align-items: center;
	display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox; /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Chrome */
	display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
	position: fixed;
	width: 100%;
	z-index: 1111;
	top: 50%;
	transform: translateY(-50%);
	-mos-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	left: 0;
}
body .home-takeOver {
	background: #333333 !important;
	max-width: 90%;
	max-height: 90vh;
}

	body .home-takeOver .home-takeOver-right {
		max-height: 100%;
		overflow-y: auto;
	}

	.home-takeOver-video-frame iframe {
		position: absolute;
		height: 100% !important;
		top: 0;
		left: 0;
	}

a:focus {
	outline: none;
}

.home-takeOver-left-link:hover {
	cursor: pointer;
}

@media (min-width: 801px) {
	.download-app-wrap {
		display: none !important;
	}

	.sticky-pop-wrap {
		height: auto !important;
	}

	.home-takeOver {
		/*background: url(http://ccd-revamp.maf.ae/-/media/campaigns/earthhours2019/images/mothersdaybg-desktop.png) !important;*/
	}

	.home-takeOver {
		background: rgb(70,195,164); /* Old browsers */
		background: -moz-radial-gradient(center, ellipse cover, rgba(70,195,164,1) 1%, rgba(21,135,107,1) 100%); /* FF3.6-15 */
		background: -webkit-radial-gradient(center, ellipse cover, rgba(70,195,164,1) 1%,rgba(21,135,107,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: radial-gradient(ellipse at center, rgba(70,195,164,1) 1%,rgba(21,135,107,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46c3a4', endColorstr='#15876b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
		border-radius: 10px;
		-mos-border-radius: 10px;
		-webkit-border-radius: 10px;
		padding: 0;
		color: #fff;
		width: 63%;
		max-width: 1000px !important;
		justify-content: center;
		align-items: center;
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		max-height: 680px;
		height: auto;
		position: relative;
		-webkit-box-shadow: -1px 3px 5px 0px rgba(0, 0, 0, 0.16);
		-moz-box-shadow: -1px 3px 5px 0px rgba(0, 0, 0, 0.16);
		box-shadow: -1px 3px 5px 0px rgba(0, 0, 0, 0.16);
		overflow: hidden;
		background-position: 50% 50% !important;
	}

	.home-takeOver-img-large {
		height: 100%;
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}

	.home-takeOver-wrap {
		height: 100%;
		justify-content: center;
		align-items: center;
		display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
		display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
		display: -ms-flexbox; /* TWEENER - IE 10 */
		display: -webkit-flex; /* NEW - Chrome */
		display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
		position: fixed;
		width: 100%;
		z-index: 1111;
		top: 50%;
		transform: translateY(-50%);
		-mos-transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		left: 0;
	}

	section.home-takeOver-wrap:before {
		content: "";
		background: rgba(0, 0, 0, 0.85);
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: -1;
		left: 0;
		top: 0;
	}

	.home-takeOver-btn a {
		background-color: #ffffff;
		color: #bc8f55;
		text-decoration: none;
		min-width: calc(100px + (200 - 100) * ( (100vw - 1024px) / (1920 - 1024)));
		height: calc(28px + (56 - 28) * ( (100vw - 1024px) / (1920 - 1024)));
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		border-radius: 35px;
		font-size: calc(10px + (20 - 10) * ( (100vw - 1024px) / (1920 - 1024)));
		-webkit-transition: all 0.3s ease-out;
		-moz-transition: all 0.3s ease-out;
		-o-transition: all 0.3s ease-out;
		transition: all 0.3s ease-out;
	}

	.home-takeOver-btn {
		width: 150px;
		margin-top: 20px;
	}

	.home-takeOver p {
		font-size: 16px;
		font-family: gotham-book;
	}

	.home-takeOver h3 {
		font-size: 37px;
		line-height: 36px;
		margin-bottom: 6px;
		font-weight: normal;
	}

	.home-takeOver h1 {
		font-size: 42px;
		line-height: 46px;
		margin-bottom: 8px;
		font-family: 'centur-gothic';
		margin-top: 40px;
	}

	.home-takeOver-right:before {
		content: "";
		background-color: #fff;
		height: 200px;
		width: 1px;
		display: block;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		-mos-transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		z-index: 6;
		display: none;
	}

	.home-takeOver-right {
		width: 50%;
		padding-left: 50px;
		padding-right: 60px;
		max-width: 500px;
		position: relative;
	}

	.takeOverClose {
		position: absolute;
		top: 20px;
		right: 20px;
		cursor: pointer;
	
		color: #fff;
	}

	.home-takeOver-left {
		width: 100%;
		max-width: 500px;
		height: 100%;
		padding-right: 40px;
		text-align: right;
	}

	.home-takeOver-btn a {
		-webkit-transition: all 0.3s ease-in;
		-moz-transition: all 0.3s ease-in;
		-o-transition: all 0.3s ease-in;
		transition: all 0.3s ease-in;
	}

		.home-takeOver-btn a:hover {
			background-color: #fff;
			color: #000;
		}

	.home-takeOver-img-mob {
		display: none;
	}
	/* Video Sec */
	.home-takeOver-video .home-takeOver-right h1 {
		font-size: 30px;
		line-height: 38px;
	}

	.home-takeOver-video .home-takeOver-right h3 {
		font-size: 24px;
	}

		.home-takeOver-video .home-takeOver-right h3 strong {
			font-family: GothamBold;
		}

	.home-takeOver-video .home-takeOver-left {
		width: 100%;
		max-width: 360px;
		justify-content: center;
		align-items: center;
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
	}

	.home-takeOver-video .home-takeOver-right {
		max-width: 640px;
		width: 100%;
		padding-left: 0;
	}

		.home-takeOver-video .home-takeOver-right h1 br {
			display: none;
		}

		.home-takeOver-video .home-takeOver-right:before {
			display: none;
		}

	div#homeTakeOverPrivacyCookie:after {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .9);
	}
}

@media (min-width: 320px) and (max-width: 1023px) {
	.home-takeOver {
		border-radius: 10px;
		-mos-border-radius: 10px;
		-webkit-border-radius: 10px;
		padding: 0;
		color: #fff;
		width: 100%;
		max-width: 1000px;
		display: block;
		height: auto;
		position: relative;
		-webkit-box-shadow: -1px 3px 5px 0px rgba(0, 0, 0, 0.16);
		-moz-box-shadow: -1px 3px 5px 0px rgba(0, 0, 0, 0.16);
		box-shadow: -1px 3px 5px 0px rgba(0, 0, 0, 0.16);
		overflow: hidden;
		text-align: center;
		justify-content: center;
		align-items: center;
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		flex-direction: column;
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#46c3a4+1,15876b+100 */
		background: rgb(70,195,164); /* Old browsers */
		background: -moz-radial-gradient(center, ellipse cover, rgba(70,195,164,1) 1%, rgba(21,135,107,1) 100%); /* FF3.6-15 */
		background: -webkit-radial-gradient(center, ellipse cover, rgba(70,195,164,1) 1%,rgba(21,135,107,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: radial-gradient(ellipse at center, rgba(70,195,164,1) 1%,rgba(21,135,107,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46c3a4', endColorstr='#15876b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	}

	div#homeTakeOverPrivacyCookie:after {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .9);
	}

	div#homeTakeOverPrivacyCookie:after {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .9);
		top: 0;
	}

	section.home-takeOver-wrap:before {
		content: "";
		background: rgba(0, 0, 0, 0.85);
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: -1;
		left: 0;
		top: 0;
	}

	.home-takeOver-btn a {
		background-color: #fd0001;
		color: #bc8f55;
		text-decoration: none;
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		border-radius: 35px;
		font-size: calc(10px + (20 - 10) * ( (100vw - 1024px) / (1920 - 1024)));
		-webkit-transition: all 0.3s ease-out;
		-moz-transition: all 0.3s ease-out;
		-o-transition: all 0.3s ease-out;
		transition: all 0.3s ease-out;
		width: calc(160px + (208 - 160) * ( (100vw - 360px) / (1023.98 - 360)));
		height: calc(46px + (60 - 46) * ( (100vw - 360px) / (1023.98 - 360)));
		font-size: calc(16px + (21 - 16) * ( (100vw - 360px) / (1023.98 - 360)));
		line-height: 2.5;
	}

	.home-takeOver-btn {
		width: auto;
		margin-top: 20px;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

	.home-takeOver p {
		font-size: 12px;
	}

	.home-takeOver h3 {
		font-size: 14px;
		line-height: 16px;
		margin-bottom: 6px;
	}

	.home-takeOver h1 {
		font-size: 22px;
		line-height: 24px;
		margin-bottom: 8px;
		margin-top: 0;
	}

	.home-takeOver-right {
		width: 100%;
		padding: 0 22px;
		max-width: 100%;
		position: relative;
		padding-top: 8px;
	}

	.takeOverClose {
		position: absolute;
		top: 0;
		right: 0;
		cursor: pointer;
		color: #fff;
		width: 70px;
		height: 50px;
		padding: 0 0;
	}

		.takeOverClose span {
			display: block;
			width: 100%;
			height: 100%;
			padding: 16px;
		}

	.home-takeOver-left {
		width: 100%;
		max-width: 100%;
		height: auto;
		padding-right: 0;
		text-align: left;
	}

	.home-takeOver-btn a {
		-webkit-transition: all 0.3s ease-in;
		-moz-transition: all 0.3s ease-in;
		-o-transition: all 0.3s ease-in;
		transition: all 0.3s ease-in;
		margin: auto;
	}

		.home-takeOver-btn a:hover {
			background-color: #fd0001;
			color: #000;
		}

	.home-takeOver-img-large {
		display: none;
	}

	.home-takeOver-video .home-takeOver-right h1 {
		font-size: 16px;
		line-height: 20px;
		margin-bottom: 2px;
		font-family: gotham-book;
	}

	.home-takeOver-video .home-takeOver-right h3 {
		font-size: 12px;
	}

	.home-takeOver-video-frame {
		margin-bottom: 10px;
		position: relative;
	}

	.mobnav.addnav {
		z-index: 99 !IMPORTANT;
	}

	html body header {
		overflow-y: auto !important;
		max-height: 100% !important;
	}

	header section.spacer {
		display: none;
	}

	.home-takeOver-video .home-takeOver-right h3 strong {
		font-family: GothamBold;
	}
}

#homeTakeOverPrivacyCookie {
	display: none;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 999;
}

@media (min-width: 800px) and (max-width: 1023px) {

	.home-takeOver-video .home-takeOver-right h1 {
		font-size: 26px;
		line-height: 26px;
		margin-top: 20px;
	}

	.home-takeOver-video .home-takeOver-right h3 {
		font-size: 16px;
	}

	.home-takeOver p {
		font-size: 14px;
	}

	.home-takeOver-btn a {
		padding: 10px 0;
		font-size: 16px;
	}

	.home-takeOver-btn {
		margin-top: 10px;
	}
}

@media (min-width: 768px) and (max-width: 1366px) {

	body .home-takeOver-video .home-takeOver-right h1 {
		font-size: 22px;
		line-height: 24px;
		margin-top: 10px;
	}

	body .home-takeOver-video .home-takeOver-right h3 {
		font-size: 16px;
	}

	body .home-takeOver p {
		font-size: 13px;
	}

	body .home-takeOver-btn {
		width: 190px;
		margin-top: 10px;
	}

		body .home-takeOver-btn a {
			padding: 8px 0;
			font-size: 14px;
			height: 40px;
		}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
	body .home-takeOver-video .home-takeOver-right h1 {
		font-size: 19px;
		line-height: 27px;
	}

	body .home-takeOver {
		max-height: 604px !important;
		margin-top: 64px !important;
	}

	.home-takeOver-left {
		text-align: center !important;
	}
}