@charset "utf-8";

/* CSS Document */





.video-wrap {

	position: fixed;

	z-index: 9999999999;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	pointer-events: none;

	display: -webkit-flex;

	display: flex;

	-webkit-align-items: center;

	align-items: center;

}



.video-wrap--show {

	pointer-events: auto;

}



.video-inner {

	position: relative;

	overflow: hidden;

	width: 100%;

	height: 100%;

	margin: 0 auto;

	opacity: 0;

	background: black;

}



.video-wrap--show .video-inner {

	opacity: 1;

}



.video-player {

	position: absolute;

	top: 50%;

	width: 100%;

	-webkit-transform: translate3d(0,-50%,0);

	transform: translate3d(0,-50%,0);

}



/* Content */

.content {

	position: relative;

}



/* Loader */

.loader {

	font-size: 2.5em;

	position: absolute;

	top: 50%;

	left: 50%;

	-webkit-transform: translate3d(-50%,-50%,0);

	transform: translate3d(-50%,-50%,0);

}



.video-loaded .loader {

	opacity: 0;

	pointer-events: none;

	-webkit-transition: opacity 0.3s;

	transition: opacity 0.3s;

}



/* Button */

.action {

	font-family: 'Avenir Next', 'Helvetica Neue', 'Lato', 'Segoe UI', Helvetica, Arial, sans-serif;

	font-size: 1.15em;

	font-weight: bold;

	position: relative;

	overflow: hidden;

	margin: 0;

	padding: 1em 2em;

	color: #fff;

	border: 2px solid;

	border-radius: 40px;

	background: none;

	-webkit-flex: none;

	cursor:pointer;

	

	flex: none;

}



.action:focus {

	outline: none;

}



.action__label {

	display: inline-block;

	margin: 0 0 0 0.75em;

}



.action__label--hidden {

	position: absolute;

	top: 200%;

}



.action--play {

	display: block;

	margin: 1em auto;

	opacity: 0;

	pointer-events: none;

	-webkit-transition: opacity 0.3s 0.1s;

	transition: opacity 0.3s 0.1s;

}



.video-loaded .action--play {

	opacity: 1;

	pointer-events: auto;

}



.action--close {

	line-height: 1;

	position: absolute;

	z-index: 1000;

	top: 30px;

	right: 30px;

	width: 60px;

	height: 60px;

	padding: 0;

	opacity: 0;

	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;

	transition: transform 0.3s, opacity 0.3s;

	-webkit-transform: scale3d(0.7,0.7,1);

	transform: scale3d(0.7,0.7,1);

}



.video-wrap--show .action--close {

	opacity: 1;

	-webkit-transition-delay: 1.2s;

	transition-delay: 1.2s;

	-webkit-transform: scale3d(1,1,1);

	transform: scale3d(1,1,1);

}



@media screen and (min-width: 25em) {

	.deco-stack__img {

		width: 20vw;

		height: 20vw;

	}

	.video-inner {

		width: 30vw;

		height: 30vw;

		border: 20px solid #fff;

		-webkit-transform: scale3d(0.1,0.1,1) rotate3d(0,0,1,-5deg);

		transform: scale3d(0.1,0.1,1) rotate3d(0,0,1,-5deg);

	}

	.video-wrap--show .video-inner {

		opacity: 0;

		-webkit-animation: showVideo-1 1.25s forwards;

		animation: showVideo-1 1.25s forwards;

	}

	.video-wrap--hide .video-inner {

		-webkit-animation: hideVideo 1.25s forwards;

		animation: hideVideo 1.25s forwards;

	}

	.video-player {

		left: 50%;

		width: auto;

		height: 100vh;

		-webkit-transition: -webkit-transform 1s;

		transition: transform 1s;

		-webkit-transform: translate3d(-50%,-50%,0) scale3d(0.7,0.7,1) rotate3d(0,0,1,5deg);

		transform: translate3d(-50%,-50%,0) scale3d(0.7,0.7,1) rotate3d(0,0,1,5deg);

	}

	.video-wrap--show .video-player,

	.video-wrap--hide .video-player {

		-webkit-transform: translate3d(-50%,-50%,0) scale3d(1,1,1);

		transform: translate3d(-50%,-50%,0) scale3d(1,1,1);

	}

}



/* This is the same as an aspect ratio of 16/9.

Here we take the viewport height as main measure

and size the video-inner accordingly.

The video itself will use the viewport width as main 

measure so that we ensure a filling of the screen.

*/

@media screen and (min-width: 25em) and (min-aspect-ratio: 1280/720) {

	.deco-stack__img {

		width: 20vh;

		height: 20vh;

	}

	.video-inner {

		width: 30vh;

		height: 30vh;

	}

	.video-wrap--show .video-inner {

		-webkit-animation: showVideo-2 1.25s forwards;

		animation: showVideo-2 1.25s forwards;

	}

	.video-player {

		width: 100vw;

		height: auto;

	}	

}



/* Animation for showing the video wrapper */

@-webkit-keyframes showVideo-1 {

	50% {

		width: 50vw;

		height: 50vw;

		opacity: 1;

		-webkit-transform: scale3d(0.5,0.5,1) rotate3d(0,0,1,-5deg);

		transform: scale3d(0.5,0.5,1) rotate3d(0,0,1,-5deg);

	}

	100% {

		width: 100vw;

		height: 100vh;

		opacity: 1;

		-webkit-transform: scale3d(1,1,1) rotate3d(0,0,1,0deg);

		transform: scale3d(1,1,1) rotate3d(0,0,1,0deg);

	}

}



@keyframes showVideo-1 {

	50% {

		width: 50vw;

		height: 50vw;

		opacity: 1;

		-webkit-transform: scale3d(0.5,0.5,1) rotate3d(0,0,1,-5deg);

		transform: scale3d(0.5,0.5,1) rotate3d(0,0,1,-5deg);

	}

	100% {

		width: 100vw;

		height: 100vh;

		opacity: 1;

		-webkit-transform: scale3d(1,1,1) rotate3d(0,0,1,0deg);

		transform: scale3d(1,1,1) rotate3d(0,0,1,0deg);

	}

}



/* Alternate animation for showing the video wrapper */

@-webkit-keyframes showVideo-2 {

	50% {

		width: 50vh;

		height: 50vh;

		opacity: 1;

		-webkit-transform: scale3d(0.5,0.5,1) rotate3d(0,0,1,-5deg);

		transform: scale3d(0.5,0.5,1) rotate3d(0,0,1,-5deg);

	}

	100% {

		width: 100vw;

		height: 100vh;

		opacity: 1;

		-webkit-transform: scale3d(1,1,1) rotate3d(0,0,1,0deg);

		transform: scale3d(1,1,1) rotate3d(0,0,1,0deg);

	}

}



@keyframes showVideo-2 {

	50% {

		width: 50vh;

		height: 50vh;

		opacity: 1;

		-webkit-transform: scale3d(0.5,0.5,1) rotate3d(0,0,1,-5deg);

		transform: scale3d(0.5,0.5,1) rotate3d(0,0,1,-5deg);

	}

	100% {

		width: 100vw;

		height: 100vh;

		opacity: 1;

		-webkit-transform: scale3d(1,1,1) rotate3d(0,0,1,0deg);

		transform: scale3d(1,1,1) rotate3d(0,0,1,0deg);

	}

}



/* Animation for hiding the video wrapper */

@-webkit-keyframes hideVideo {

	0% {

		width: 100vw;

		height: 100vh;

		opacity: 1;

		-webkit-transform: scale3d(1,1,1) rotate3d(0,0,1,0deg);

		transform: scale3d(1,1,1) rotate3d(0,0,1,0deg);

	}

	100% {

		width: 100vw;

		height: 100vh;

		opacity: 0;

		-webkit-transform: scale3d(1,1,1) rotate3d(0,0,1,0deg);

		transform: scale3d(1,1,1) rotate3d(0,0,1,0deg);

	}

}



@keyframes hideVideo {

	0% {

		width: 100vw;

		height: 100vh;

		opacity: 1;

		-webkit-transform: scale3d(1,1,1) rotate3d(0,0,1,0deg);

		transform: scale3d(1,1,1) rotate3d(0,0,1,0deg);

	}

	100% {

		width: 100vw;

		height: 100vh;

		opacity: 0;

		-webkit-transform: scale3d(1,1,1) rotate3d(0,0,1,0deg);

		transform: scale3d(1,1,1) rotate3d(0,0,1,0deg);

	}

}