html {
	height:100%;
}
body {
	background-color:white;
	overflow: hidden;
	height:100%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
}

img {margin:10px;}

#container {
	position:relative;
	height:100%;
	background-color: black;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom center;
	background-image: url("../img/background_s.jpg");
}
#greeting3D {
	position:absolute;
    top:50%;
    left:50%;
	transform: translate(-50%,-50%);
	cursor: pointer;
	/*border:1px solid white;*/
}

#envelope {
	position: relative;
	height: 100vh;
	width: 159.5vh;
	;
	transform-style: preserve-3d;
	transform: perspective(1500px) rotateY(180deg) translate3d(0,0,1000px);
	outline: 1px solid transparent;
	-webkit-backface-visibility: hidden;
	/*border:1px solid red;*/
}

#envelope_front {
	position: absolute;
	height: 100%;
	width: 100%;
	background-color: #013f5e;
	background-image: url(../img/cover_front.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	transform: rotateY(180deg)translate3d(0,0,2px);
}


#envelope_inner {
	position: absolute;
	height: 100%;
	width: 100%;
	background-color: #013f5e;
	transform: translate3d(0,0,1px);
}

#envelope_back {
	position:absolute;
	height: 100%;
	width: 100%;
	background-image: url(../img/cover_back.png);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: contain;
	transform: translate3d(0,0,0px);
}

#envelope_flap {
	position: absolute;
	height: 70%;
	width: 100%;
	transform: translate3d(0,1px,1px);
	transform-origin: center top;
	/*border:1px solid green;*/
}

#envelope_flap_inner {
	position: absolute;
	height: 100%;
	width: 100%;
	background-image: url(../img/cover_flap_inner.png);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: contain;
	opacity: 0;
}

#envelope_flap_outer {
	position: absolute;
	height: 100%;
	width: 100%;
	background-image: url(../img/cover_flap_outer.png);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: contain;
}

#card {
	position: absolute;
	height: 98%;
	width: 98%;
	left:1%;
	top:1%;
	transform: translate3d(0,0,-1px);
	outline: 1px solid transparent;
	/*border:1px solid yellow;*/
}

#card_front {
	position: absolute;
	height: 100%;
	width: 100%;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: contain;
	background-color: transparent;
	/*background-image: url(../img/card-fallback.jpg);*/
}

#card_front video {
	position:absolute;
	top:50%;
	left:50%;
	height: 100%;
	width: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url(../img/card-fallback.png);
	transform: translate(-50%, -50%);
}

.audio-controls,
.video-controls {
	position: absolute;
	display:none;
	cursor: pointer;
}

.controls {
	position: absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
}
.controls div {
	position: absolute;
	width: 50px;
    height:50px;
    cursor: pointer;
}
.controls>div {
    opacity: 0.6;
}
.controls div div {	
	background-size: 50px auto;
}

.controls .playpause-audio {
	display: none !important;
	left:1% !important;
	bottom: 1.5% !important;
	width: 5vh;
	height: 5vh;
	opacity: 1;
	background-image: url(../img/playmute.png);
	background-size: 5vh 15vh;
	background-position-y: -10vh;
	/*border: 1px solid white;*/
}
.controls .playpause-audio.paused {
	background-position-y: -5vh;
}
#playpauseaudio.replay {
	background-position-y: 0;
}

.controls .playpause-video {
    top: 50%;
    left:50%;
    width: 150px;
    height:150px;
    transform: translate(-50%, -50%);
}
.controls .playpause-video div {
	width: inherit;
    height:inherit;
    background-image: url(../img/playpause.png);
	background-size: 150px auto;
	animation:zoomout 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.controls .playpause-video.paused div {
    background-position: 0 -150px;
}

@-moz-keyframes zoom { 
	0% { transform: scale(1);}
	30% { transform:scale(1.1); } 
	100% { transform: scale(1);}
}
@-webkit-keyframes zoom { 
	0% { transform: scale(1);}
	30% { transform:scale(1.1); } 
	100% { transform: scale(1);}
}
@keyframes zoomin { 
	0% { transform: scale(1);}
	100% { transform: scale(1.1);}
}
@keyframes zoomout { 
	0% { transform: scale(1.1);}
	100% { transform: scale(1);}
}

.controls .mute {
    top:7%;
	left:1%;
}
.controls .mute div {
    background-image: url(../img/mute.png);
    animation:zoomout 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.controls .mute.muted div{
    background-position-y: 50px;
}

.controls .fullscreen {
    bottom:6%;
	right:1%;
}
.controls .fullscreen div {
    background-image: url(../img/fullscreen.png);
    animation:zoomout 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.controls .fullscreen.isfullscreen div {
    background-position-y: 50px;
}

.controls .subtitleonoff {
	display: none !important;
    bottom:6%;
    right:1%;
	margin-right:80px;
}
.controls .subtitleonoff div {
    background-image: url(../img/subtitle.png);
	background-position: 0 0; 
	animation: zoomout 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.controls .subtitleonoff.ison div {
    background-position-y: 50px;
}


#gsap-controls {
  position:absolute;
  display: none;
  width:80vw;
  left:10vw;
  bottom:20px;
}

#play_btn, .play {
    float:right;
    margin-top:20px;
}

#eule {
	display: none;
	position: absolute;
	opacity: 0;
	bottom: 5vh;
	left: 3vw;
	height: 10vw;
	width: 20vw;
	background-image: url(../img/bastel-mich-eule.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom left;
	cursor: pointer;
	transition: transform 1s;
}
#eule:hover {
	transform: scale(1.1);
}

#footer {
	position: absolute;
	bottom:0;
	right:0;
	color: white;
}
#footer a {
	text-decoration: none;
	color: white;
	color: rgba(255,255,255,0.7);
}
#footer a:hover {
	color: rgba(255,255,255,0.8);
}
#footer div{
	float: right;
	margin: 5px 20px;
}

@media (hover: hover) and (pointer: fine) {

	.controls div:hover {
		opacity: 0.8 !important;
	}

	.controls .playpause-video:hover div {
		-webkit-animation:zoom 0.6s ease-in-out;
		-moz-animation:zoom 0.6s ease-in-out;
		animation:zoomin 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
	}
	.controls .mute:hover div {
		-webkit-animation:zoom 0.6s ease-in-out;
		-moz-animation:zoom 0.6s ease-in-out;
		animation:zoomin 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
	}
	.controls .fullscreen:hover div {
		-webkit-animation:zoom 0.6s ease-in-out;
		-moz-animation:zoom 0.6s ease-in-out;
		animation:zoomin 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
	}
	.controls .subtitleonoff:hover div {
		-webkit-animation:zoom 0.6s ease-in-out;
		-moz-animation:zoom 0.6s ease-in-out;
		animation:zoomin 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
	}
  }

@media (max-aspect-ratio: 8/5) {

	#envelope {
		height: 62.7vw;
		width: 100vw;
	}

	#card_front div {
		font-size:2vw;
	}

	#eule {
		bottom: 6vh;
		left: 5vw;
		height: 15vh;
		width: 30vh;
		max-width: 100vw;
	}
}

@media only screen and (max-width: 600px) {

	.controls .playpause-video {
		width: 80px;
		height:80px;
	}
	.controls .playpause-video div {
		background-size: 80px auto;
	}
	.controls .playpause-video.paused div {
		background-position: 0 -80px;
	}

}

@media (min-aspect-ratio: 1/1) {
	
	#container {
		background-size: cover;
	}
}

@media only screen and (min-width: 600px) {

	#container {
	  background-image: url("../img/background_m.jpg");
	}
}
@media only screen and (min-width: 1200px) {
  
	#container {
	  background-image: url("../img/background.jpg");
	}
}