/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
//	ALLGEMEIN
//
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */


	* 			{ padding: 0; margin: 0; box-sizing: border-box; }
	html, body 	{ height: 100%; overflow: hidden; }
	img			{ border: 0px solid; -webkit-user-select: none; -moz-user-select: none; -ms-user-select:none; user-select: none; }
	a 			{ outline: 0; text-decoration: none; }
	


/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
//	BACKGROUND
//
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */


	body {
		/* background-image: url("../img/BG-2.jpg"); */
		width: 100%;
		height: 100%;
		background-size: cover;
		/* box-shadow: 0 0 20% rgba(0,0,0,0.9) inset; */
	}
	#wrapper{
		width: 100%;
		height: 100%;
		z-index: 50;
		position: absolute;
	}
	#background{
		background-image:url('../img/gradient.png');
		width: 100%;
		background-size: cover;
		height: 100%;
		object-fit: cover;
		position: absolute;
	}
	
	.preload-image {
		width: 1px;
		height: 1px;
		position: absolute;
		top: 100%;
		left: 0;	

	}


/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
//	FONTS
//
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */


/* @font-face {
    font-family:'Helvetica';
    src:url("../fonts/helvetica.eot") format("eot"),
		url("../fonts/helvetica.woff") format("woff"),
		url("../fonts/helvetica.ttf") format("truetype");
    font-style:normal;font-weight:400;
}
@font-face {
    font-family:'Helvetica-Bold';
    src:url("../fonts/helvetica-bold.eot") format("eot"),
		url("../fonts/helvetica-bold.woff") format("woff"),
		url("../fonts/helvetica-bold.ttf") format("truetype");
    font-style:normal;font-weight:400;
} */

@font-face {
    font-family:'Interstate-Regular';
    src:url("../fonts/InterstateOT-Regular.eot") format("eot"),
		url("../fonts/InterstateOT-Regular.woff") format("woff"),
		url("../fonts/InterstateOT-Regular.ttf") format("truetype");
    font-style:normal;font-weight:400;
}
@font-face {
    font-family:'Interstate-Bold';
		src:url("../fonts/Interstate-Bold.woff") format("woff");
    font-style:normal;font-weight:400;
}

@font-face {
    font-family:'Tchibo-Pen';
		src:url("../fonts/TchiboPen.woff") format("woff");
    font-style:normal;font-weight:400;
}

@font-face {
    font-family:'Roboto-Bold';
		src:url("../fonts/Roboto-Bold.woff") format("woff");
    font-style:normal;font-weight:400;
}




/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
//	ANIMATION
//
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

#animation_container{
	position: absolute;
	background-color: black;
	width: 100%;
	height: 100%;
	bottom:0;
	min-width: 50vw;
	left: 0;
	z-index: 10;
	display: grid;
	justify-content: center;
	align-items: center;
	align-content: center;
}
.top_left{
	position: absolute;
	left: 0; top: 0;
	height: 45vh; width: 30vw;
	display: flex;
	justify-content: center;

}
.top_right{
	position: absolute;
	right: 0; top: 0;
	height: 25vh;width: 30vw;
	display: flex;
	justify-content: center;
}
.bottom_left{
	position: absolute;
	left: 5vw; bottom: 0;
	height: 28vh;width: 40vw;
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
}
.bottom_right{
	position: absolute;
	right: 5vw; bottom: 0;
	height: 28vh;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}


.top_left img{
	height: 100%;
}
.top_right img{
	height: 100%;
}
.bottom_left img{
	height: 100%;
}
.bottom_right img{
	height: 100%;
}



img#reindeer{
	position: absolute;
  	top: 50%;
  	left: 0;
  	height: 300px;
	z-index: 1000!important;

}



/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
//	ENVELOPE
//
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */


	#envelope {
		width: 680px;
		height: 680px;

		position: absolute;
		display: none;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}

	#envelope-front, #envelope-back {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		box-shadow: 0px 10px 20px rgba(0,0,0,0.2);

	}

	#envelope-front {
		/* background: transparent url("../img/envelope-test.png") no-repeat center center; */
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		padding-left: 42px;
		color: #CC3B5E;
	}


	#envelope-front p {
		font-family: 'Interstate-Regular';
		opacity: 1;
	}


	#envelope-front #user-title {
		font-size: 32px;
		padding-top: 293px;
		font-weight: 500;
	}


	#envelope-front #user-name {
		font-family: 'Interstate-Bold', 'Roboto-Bold';
		max-width:90%;
		font-size: 48px;
		font-weight: 500;
		padding-top: 20px;
		word-break: break-word;

	}


	#envelope-front #user-surname {
		font-family: 'Interstate-Bold', 'Roboto-Bold';
		font-weight: 500;
		max-width:90%;
		font-size: 48px;
		word-break: break-word;
	}


	#envelope-back {
		display: none;
		border-radius: 10px;
		background: transparent url("../img/envelope-back.jpg") no-repeat top center;
		  backface-visibility: visible;
	}



	#envelope-cover {
		width: 100%;
		height: 51%;
		position: absolute;
		top: 0;
		left: 0;
		background: transparent url("../img/envelope-cover-front.png") no-repeat top center;
		z-index: 5;
	}


	#envelope-cover.open {
		background: transparent url("../img/envelope-cover-back.png") no-repeat bottom center !important;
	}


	#envelope-back-bottom {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: transparent url("../img/envelope-back-bottom.png") no-repeat bottom center;
		z-index: 4;
	}



/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
//	ENVELOPE CARD
//
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */


	#envelope-card {
		width: 660px;
		height: 660px;
		position: absolute;
		top: 10px;
		left: 10px;
		background: #d9d4ce url("../img/card-background.png") no-repeat center center;
		z-index:2;
		display: none;
		border-radius: 30px;
		box-shadow: 0px 5px 20px rgba(0,0,0,0.4);
		padding: 328px 7.4% 0 7.4%;
	}


	#envelope-card p {
		text-align: center;
		font-family: "Interstate-Regular"; color: #FFF;
		font-size: 18px;
		line-height: 20px;
		word-break: break-word;
		/* font-weight: 800; */
	}
	
	#envelope-card.bg p {
		text-align: center;
		font-family: "Interstate-Regular "!important; 
		color: #FFF;
		font-size: 20px;
		font-size: 20px;
		/* padding: 0 40px; */
	}


	p.txt{	font-family: "Interstate-Regular"; color: #FFF; white-space: pre-line; font-size: 20px;
		line-height: 30px; max-height:200px;overflow: hidden;
	}
	p#sender{
		font-family: "Tchibo-Pen";
		font-size: 24px;

	}


	p.salut,p.txt {
	padding-bottom:25px!important;
	overflow:visible;

	}
	img#button{
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		padding-bottom: 30px;
	}



/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
//	MEDIA
//
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */


	/* Portrait and Landscape */
	@media only screen and (min-device-width: 300px) and (max-device-width: 700px) and (-webkit-min-device-pixel-ratio: 2) 
  	{ 

		#envelope-card {
			padding-left: 60px;
			padding-right: 60px;
		}

		.bottom_right{
			display: none;
		}
		#ornament_1{
			display: none;
		}
	}

	@media (max-width: 800px) {
		
		#wrapper{
			zoom: 0.5;
			-moz-transform: scale(0.5);
		}
		.bottom_right{
			display: none;
		}
		#ornament_1{
			display: none;
		}

	}

	@media (max-width: 700px) {
		
		.bottom_left{
			width: 100%;
			height:40vw!important;
			justify-content: center;
		}
		.bottom_left img{
			height: auto;
		}

		img#ornament_2{
			height: 50%;
		}
		img#ornament_3{
			height: 80%;
		}

	}

	@media (max-width: 1200px) {
		
		.bottom_left{
			width: 100%;
			height:300px;
			justify-content: center;
		}
		.bottom_right{
			display: none;
		}


	}



	#confetti-canvas{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
	}

	#bottom_center{
		position: fixed;
		bottom:0;
		margin-bottom: -50vh;
		left: 0;
		width: 100%;
		height: 20vh;
	}
	

	#top_center{
		position: fixed;
		top:0;
		margin-top: -50vh;
		left: 5%;
		width: 90%;
		height: 20vh;
	}