/*EXPLORE*/
section.explore {
	display: block;
	position: relative;
	overflow: hidden;
	padding-top: 66px;
	height: 120vh;
	background-color: transparent;
	transition: background-color 1.5s ease;
}
	section.explore #one-world {
		margin-top: 66px;
		position: absolute;
		display: flex;
		width: 150vw;
		transition: top 1s ease, left 1s ease, transform 1.5s ease;
		visibility: hidden;
	}
		section.explore #one-world div {
			width: 50vw;
			position: relative;
			opacity: 0;
			transition: opacity 3s ease;
		}
		section.explore #one-world div.show {
			opacity: 1;
			transition: opacity 1s ease;
		}
			section.explore #one-world div video {
				width: 100%;
			}
	main:not(.home) section.explore {
		height: 100vh;
		overflow: hidden;
	}
		main:not(.home) section.explore #one-world {
			visibility: visible;
		}
	section.explore.zoom, 
	section.explore.small-zoom {
		background-color: #EBE8E4;
	}
	section.explore.zoom #one-world {
		transform: scale(2);
	}
	section.explore.small-zoom #one-world {
		transform: scale(1.5);
	}
	section.explore .page {
		position: relative;
		opacity: 0;
		height: 0;
		overflow: hidden;
		transition: opacity 0s ease;
		display: flex;
	}
	section.explore .page.show {
		height: 100vh;
		opacity: 1;
		overflow: visible;
		transition: opacity 0s ease;
	}
		section.explore .info {
			z-index: 10;
			position: relative;
			width: 50%;
			padding: 12vh 40px;
			background: rgba(255, 255, 255, 0.9);
			overflow-y: scroll;
		}
			section.explore .info h3 {
				padding: 0 0 2.2em 80px;
			}
			section.explore .info h3 a:hover {
				font-weight: bold;
				font-family: FF-OrstedSans-Bold, "Orsted Sans", sans-serif;
				text-decoration: none;
			}
			section.explore .info .navigation {
				display: flex;
				padding-top: 1em;
			}
				section.explore .info .navigation a {
					border-radius: 40px;
					margin-top: 4px;
					height: 40px;
					overflow: hidden;
					min-width: 40px;
					width: 40px;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 8px;
					opacity: 0.4;
				}
				section.explore .info .navigation span {
					width: 40px;
					padding: 8px;
					min-width: 40px;
					display: flex;
				}
				section.explore .info .navigation a:hover svg {
					fill: white;
				}
				section.explore .info .navigation h1 {
					padding: 0 40px;
					width: 100%;
				}
			section.explore .info .content {
				width: 100%;
				padding: 1em 80px;
			}
				section.explore .info .content img {
					padding: 2em 0 7em 0;
					width: 100%;
				}

			section.explore .info>.area {
				opacity: 0;
				visibility: hidden;
				overflow: hidden;
				display: none;
			}
			section.explore .info>.show {
				opacity: 1;
				visibility: visible;
				overflow: visible;
				display: block;
			}
				section.explore .info .area>.case {
					opacity: 0;
					visibility: hidden;
					height: 0;
					overflow: hidden;
				}
				section.explore .info .area>.show {
					opacity: 1;
					visibility: visible;
					overflow: visible;
				}
		
		section.explore .video {
			position: relative;
			width: 50%;
		}
			section.explore .video a {
				position: absolute;
			}
			section.explore .video .area {
				z-index: 5;
				position: absolute;
				width: 100%;
				height: 100%;
				opacity: 0;
				visibility: hidden;
			}
			section.explore .video .area.show {
				opacity: 1;
				visibility: visible;
				transition: opacity 1s ease 1.5s;
			}
				section.explore .video .area a.back {
					padding:4vw;
					opacity: 0.9;
				}

		
/*DOT*/
section.explore a.dot {
	text-decoration: none;
	color: white;
	font-size: 0.8em;
	display: flex;
	align-items: center;
	z-index: 5;
}
section.explore a.dot:hover,
section.explore a.dot.selected {
	z-index: 10;
}
	section.explore a.dot>b {
		flex-shrink: 0;
		position: relative;
		width: 40px;
		height: 40px;
		border-radius: 40px;
		border: 8px solid rgba(255, 255, 255, 0.6);
	}
		section.explore a.dot>b>b {
			display: inline-block;
			width: 100%;
			height: 100%;
			border-radius: 100%;
		}
		section.explore a.dot:hover>b>b,
		section.explore a.dot.selected>b>b {
			transform: scale(1.2);
		}
	section.explore .page.show a.dot>b {
		animation: pulse 1s ease-in-out 2s 5 alternate;
	}
	@keyframes pulse {
	  from { border: 8px solid rgba(255, 255, 255, 0.6); scale: 1; }
	  to { border: 8px solid rgba(255, 255, 255, 0);
	  scale: 1.1; }
	}

	section.explore a.dot span {
		text-align: center;
		position: relative;
		opacity: 0;
		border-radius: 10px;
		padding: 5px 8px;
		margin-left: 10px;
		line-height: 1.2em;
	}
	section.explore a.dot:hover span,
	section.explore a.dot.selected span {
		opacity: 1;
	}  

/*THEME COLORS*/
.offshore-excellence h2,
.offshore-excellence h3,
.offshore-excellence h3 a,
.offshore-excellence h3 b {
	color: #644B76;
}
.offshore-excellence a.button {
	color: #644B76;
	background: #E8F3F4;
}
.offshore-excellence a.button:hover {
	color: white;
	background: #644B76;
}
.offshore-excellence a.dot:hover>b,
.offshore-excellence.zoom a.dot:hover>b,
.offshore-excellence a.dot.selected>b,
.offshore-excellence.zoom a.dot.selected>b {
	border-color: rgba(100,75,118, 0.6);
}
.offshore-excellence a.dot:is(.selected)>b,
.offshore-excellence a.dot:hover>b {
	border-color: rgba(100,75,118, 0.6) !important;
}
.offshore-excellence a.dot>b>b, {
	background: rgba(100,75,118, 0.8);
}
.offshore-excellence a.dot>b>b,
.offshore-excellence a.dot span,
.offshore-excellence .info .navigation a:hover,
.offshore-excellence footer .navigation a:hover {
	background: rgba(100,75,118, 1);
}
.offshore-excellence .info .navigation svg,
.offshore-excellence footer .navigation svg {
	fill: #644B76;
}

.systems-integration h2,
.systems-integration h3,
.systems-integration h3 a,
.systems-integration h3 b {
	color: #8ECCC8;
}
.systems-integration a.button {
	color: #8ECCC8;
	background: #E8F3F4;
}
.systems-integration a.button:hover {
	color: white;
	background: #8ECCC8;
}
.systems-integration a.dot:hover>b,
.systems-integration.zoom a.dot:hover>b,
.systems-integration a.dot.selected>b,
.systems-integration.zoom a.dot.selected>b {
	border-color: rgba(142,204,200, 0.6);
}
.systems-integration a.dot:is(.selected)>b,
.systems-integration a.dot:hover>b {
	border-color: rgba(142,204,200, 0.6) !important;
}
.systems-integration a.dot>b>b, {
	background: rgba(142,204,200, 0.8);
}
.systems-integration a.dot>b>b,
.systems-integration a.dot span,
.systems-integration .info .navigation a:hover,
.systems-integration footer .navigation a:hover {
	background: rgba(142,204,200, 1);
}
.systems-integration .info .navigation svg,
.systems-integration footer .navigation svg {
	fill: #8ECCC8;
}

.partnerships h2,
.partnerships h3,
.partnerships h3 a,
.partnerships h3 b {
	color: #FCB60D;
}
.partnerships a.button {
	color: #FCB60D;
	background: #FEF8E7;
}
.partnerships a.button:hover {
	color: white;
	background: #FCB60D;
}
.partnerships a.dot:hover>b,
.partnerships.zoom a.dot:hover>b,
.partnerships a.dot.selected>b,
.partnerships.zoom a.dot.selected>b {
	border-color: rgba(252,182,13, 0.6) !important;
}
.partnerships a.dot:is(.selected)>b,
.partnerships a.dot:hover>b {
	border-color: rgba(252,182,13, 0.6) !important;
}
.partnerships a.dot>b>b, {
	background: rgba(252,182,13, 0.8);
}
.partnerships a.dot>b>b,
.partnerships a.dot span,
.partnerships .info .navigation a:hover,
.partnerships footer .navigation a:hover  {
	background: rgba(252,182,13, 1);
}
.partnerships .info .navigation svg,
.partnerships footer .navigation svg {
	fill: #FCB60D;
}