@import url(global.css?v=1);

.page {
	position:relative;
	width:100%;
	height:100%;
	text-align:center;
	overflow-x:hidden;
}

.page .topContent {
	height:45%;
	min-height:20em;
}
.page .topContent .bottomLid {
	bottom:-10em;
}

.page .bottomContent {
	background-color:var(--color-surface-tint-neutral);
}

.page .topContent .topBar {
	height:4em;
	padding:1em 1em 0 1em;
	text-align:left;
}
.page .topContent .topBar .icon {
	width:4em;
	height:4em;
}

.page .topContent .topTitle {
	margin:0 1em;
	width:auto;
	align-items:center;
}
.page .topContent .topTitle .movie {
	position:relative;
	width:85%;
	max-width:25em;
	background:#ffffff center no-repeat;
	background-size:contain;
	border-radius:1em;
	box-shadow:0 3px 8px #cccccc;
	z-index:1;
	overflow:hidden;
}
.page .topContent .topTitle .movie:after {			/* this makes sure of 16:9 ratio */
	padding-top:66%;
	display:block;
	content:'';
}
.page .topContent .topTitle .upload {
	position:relative;
	width:100%;
	max-width:30em;
	background:#ffffff center no-repeat;
	background-size:contain;
	border-radius:1em;
	box-shadow:0 3px 8px #cccccc;
	z-index:1;
	overflow:hidden;
}
.page .topContent .topTitle .upload:after {			/* this makes sure of 16:9 ratio */
	padding-top:56.25%;
	display:block;
	content:'';
}
.page .topContent .topTitle .upload .thumb,
.page .topContent .topTitle .upload .overlay,
.page .topContent .topTitle .upload .player {
	position:absolute;
	top:0; right:-2px; bottom:0; left:-3px;
	background:center no-repeat;
	background-size:contain;
	opacity:0.9;
}
.page .topContent .topTitle .thumb .overlay {
	background-image:url(/mywepp/skin/img/personal/overlayMovie.svg);
	cursor:pointer;
}
.page .topContent .topTitle .upload .player {
	display:none;
}
.page .topContent .topTitle .upload .player video {
	width:100%;
	height:100%;
}


/* * *   Media Queries   * * */

@media (orientation:landscape) and (min-width:44em) {
	.page .topContent {
		height:100%;
	}
	.page .topContent .bottomLid {
		bottom:-50%;
	}
}