#header {
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 1024px;
}

#header_hype_wrapper {
	position: relative;
	margin: 0 auto;
	width: 100%;
	/* This is a trick to maintain a width/height ratio all in css, taking advantage of the fact that padding-top is % relative to width. The wrapper has the right dimension, and then the hype container is absolute-positioned within the container, and it maintains its size ratio thanks to Hype js. See https://stackoverflow.com/questions/20157752/set-height-to-percent-of-width/20157916#20157916 */
	/* header y/x ratio = 440/1024 */
	padding-top: 42.96875%; 
	/*background-color: yellow;*/ /*for debugging*/
}

#header_hype_container {
	position: absolute;
	top: 0;
	width: 100%;
}

.HYPE_scene {
	/* This overrides the inline style applied to all scenes by Hype. Apparently, there is no setting in Hype for that. */
	overflow: visible !important;
}

#header, #header_hype_wrapper, #header_hype_container {
	overflow: visible;
}

.outer_block {
	/* This is the only way to hide vertical overflow for #header. For some reason, using `overflow-y: hidden` gets applied to both directions, no matter what I try. */
	/* I can't set the `z-index` of #header to -1, because then the 'Dive Again' button can't be clicked */
	z-index: +1;
}