@import url('https://fonts.googleapis.com/css?family=Aleo:300,400,700');

@import url('https://fonts.googleapis.com/css?family=Satisfy');

@import url('https://fonts.googleapis.com/css?family=Caveat');

@import url('https://fonts.googleapis.com/css?family=Merienda');

@import url('https://fonts.googleapis.com/css?family=Marck+Script');
	@import url('https://fonts.googleapis.com/css?family=Ubuntu:300,300i,400,400i,500,500i,700,700i&subset=greek');


html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

	margin: 0;

	padding: 0;

	border: 0;

	vertical-align: baseline;

	box-sizing: border-box;

	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

	display: block;

}

body {

	line-height: 1;

	font-family: 'Ubuntu', sans-serif;



}

ol, ul {

	list-style: none;

}

blockquote, q {

	quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

	content: '';

	content: none;

}

table {

	border-collapse: collapse;

	border-spacing: 0;

}

body,html{

	width: 100%;

	height: 100%;

	overflow: hidden;

}

:root{



	--font1: #E52626;

	--font2: #1B22B0;

	--font3: #DE1AC9;

	--font1Style: 50px;

	--font2Style: 27px;

	--font3Style: 54px;

	--font1Family: 'Ubuntu', sans-serif;

	--font2Family: 'Ubuntu', sans-serif;

	--font3Family: 'Ubuntu', sans-serif;

}



.loader{

	position: fixed;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background: rgba(212, 65, 65, 0.98);

	display: flex;

	align-items: center;

	justify-content: center;

	z-index: 9999999;

	text-align: center;

	transition: all 0.6s ease-out;

	padding: 0 40px;

}



.loader.hide{

	opacity: 0;

	visibility: hidden;

}



.loader h2{

	font-size: 26px;

	letter-spacing: 2px;

	font-weight: bold;

	margin-top: 20px;

	color: #fff;

}



.envelope-container{

	width: 100%;

	height: 100%;

	display: flex;

	align-items: center;

	justify-content: center;

	position: absolute;

	top: 0;

	left: 0;

	overflow: hidden;

	transition: all 3s ease-in;

	z-index: 99999;

}

.envelope-container.open{

	opacity: 0;

	visibility: hidden;

}

.envelope-container:before{

	content: "";

	width: 50%;

	height: 100%;

	position: absolute;

	top: 0;

	left: 0;

	background: url('../images/1444.jpg') repeat center center / 450px;

	transition: all 3s ease-in;

}



.envelope-container:after{

	content: "";

	width: 50%;

	height: 100%;

	position: absolute;

	top: 0;

	right: 0;

	background: url('../images/1444.jpg') repeat center center / 450px;

	transition: all 3s ease-in;

}



.envelope-container.open:before{

	left: -100%;

}

.envelope-container.open:after{

	right: -100%;

}



.envelope-logo{

  animation: shake 2.5s cubic-bezier(.36,.07,.19,.97) both infinite;

  transform: translate3d(0, 0, 0);

  backface-visibility: hidden;

  perspective: 1000px;

  z-index: 2;

  transition: all 0.3s ease-out;

  margin: 0 auto 110px auto;

  position: relative;

}



.envelope-image{

	width: 200px;

	height: 200px;

	background: #fff url(../images/click-here.png) no-repeat center top 10px / 80px;

	box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.4);

	cursor: pointer;

	display: flex;

	align-items: center;

	justify-content: center;

	border-radius: 100%;

	margin: 0 auto;

	position: relative;

	z-index: 2;

}





.envelope-image img{

	width: 80%;



}



.bow{

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%, -50%);

	width: 450px;

	animation-duration: 5s;

}



.envelope-logo.open{

	opacity: 0;

	visibility: hidden;

}



.envelope-info{

	color: #fff;

	font-weight: bold;

	z-index: 2;
	background-color:#f52f22;
	border-radius: 99px;
	padding: 10px;

	text-align: center;

	position: relative;
	transition:all 2s ease-out;

}

.envelope-info.fadeout{
	transform:translateY(1000px);
	opacity: 0;
}

.envelope-info h3{

	font-size: 30px;






}

.envelope-info h2{

	font-size: 18px;

	line-height: 1;


}



.card-container{

	width: 100%;

	height: 100%;

	position: relative;

	display: flex;

	align-items: center;

	justify-content: center;

}

.card-container:before{

	content: "";

	width: 100%;

	height: 100%;

	position: absolute;

	top: 0;

	left: 0;

	background: url('../images/1442.jpg') repeat center center / cover;

	filter: grayscale(100%);

	transition: all 0.3s ease-out;

}

.card-container.step1:before{

	filter: grayscale(0%);

}

.card-box{

	background: transparent;

	text-align: center;

	max-width: 650px;
	width: 100%;
	height: 380px;
	padding: 40px;

	position: relative;

	padding: 20px;

	transition: all 0.3s ease-out;

	position: relative;

	counter-reset: step;

	z-index: 2;



}

.mobile-info{
	font-size: 14px;
	color: #fff;
	margin-top: 10px;
	transition: all 0.3s ease-out;
	display: none;
}

.mobile-info.not{
	opacity: 0;
}

.card-inner-content{
	width: 100%;
	height: 90%;
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.card-inner-content p{
	font-size: 16px;
	line-height: 1.4;
	max-height: 100%;
}

.card-inner-name{
	position: absolute;
	bottom: 45px;
	right: 65px;
	font-size: 18px;
}

.card-inner-food{
	position: absolute;
	bottom: -30px;
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
	text-align: center;
	background:#AA2D1B;
	padding: 15px;
	font-size: 14px;
	font-weight: 300;
	color: #fff;
	transform-origin: top center;
	backface-visibility: hidden;
	transition: all 0.3s ease-out;
	opacity: 0;
	visibility: hidden;
}

.card-inner-food.active{
	bottom: -44px;
	visibility: visible;
	opacity: 1;
}

.card-box-inner{

	background: #fff;

	width: 100%;

	height: 100%;

	padding: 40px;

}

.card-box.step1{

	background: #c6311c;

}

.card-box h2{

	font-weight: normal;

	line-height: 1.2;

}

.card-box.step2 h2{

	font-family: 'Satisfy', cursive;

	font-size: 41px;
	transition: all 0.3s ease-out;

}

.card-box.step2.balance h2{
	font-size: 53px;
	color: rgba(212, 65, 65, 1);
}

.font1,
.font2,
.font3{
	transition: all 0.3s ease-out;
}

.card-box.step2.balance .font1,
.card-box.step2.balance .font2,
.card-box.step2.balance .font3{
	font-size: 42px !important;
	color: rgba(212, 65, 65, 1) !important;
	font-family: 'Satisfy', cursive !important;
}

.card-buttons-left{

	position: absolute;

	left: -295px;

	top: 50%;

	transform: translateY(-50%);

	counter-reset: step;

}

.card-buttons-left h2{
	font-weight: bold;
	color: #000;
	font-size: 18px;
	margin-bottom: 5px;
}

.card-buttons-right{

	position: absolute;

	right: -295px;

	top: 50%;

	transform: translateY(-50%);



}



.step-button{

	width: 275px;

	border-radius: 60px;

	background: #393939;

	box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2);

	padding: 20px 0px;

	color: #fff;

	font-size: 15px;

	margin-bottom: 20px;

	cursor: pointer;

	transition: all 0.3s ease-out;

	position: relative;



}

.step-button:before{

	content: "";

	width: 100%;

	height: 100%;

	background:rgba(255,255,255,0.95) url('noun_Check_1763825.svg') no-repeat center center / 35px;

	opacity: 0;

	visibility: hidden;

	transition: all 0.3s ease-out;

	position: absolute;

	top: 0;

	left: 0;

	border-radius: 60px;



}

.step-button.done{

	background: #c6311c;

}

.step-button:last-child{

	margin: 0;

}

.step-button:hover{

	transform: scale(1.1);

}

.font1.color{

	color: var(--font1);

}

.font2.color{

	color: var(--font2);

}

.font3.color{

	color: var(--font3);

}

.font1.style{

	font-size: var(--font1Style);

}

.font2.style{

	font-size: var(--font2Style);

}

.font3.style{

	font-size: var(--font3Style);

}

.card-box.step2 h2 .font1.family{

	font-family: var(--font1Family);

}

.card-box.step2 h2 .font2.family{

	font-family: var(--font2Family);

}

.card-box.step2 h2 .font3.family{

	font-family: var(--font3Family);

}

.step-button:after{

	content: counter(step);



counter-increment: step;



position: absolute;



top: -12px;



right: 0;



width: 25px;



height: 25px;



border-radius: 100%;



line-height: 25px;



background: #fbda29;



color: #3e3e3e;



font-size: 12px;



}

.benice{

	position: absolute;

	top: 0;

	left: 50%;

	transform: translateX(-50%);

	max-width: 1024px;

	width: 100%;

	text-align: center;
	z-index: 2;

}



.BN-circle3.active{

	top: 0;

}



.benice.active .BN-circle1,

.benice.active .BN-circle2{

	top: 0;

}

	.BN-circle1 {

		position: absolute;

		top: -500px;

		left: 0;

		padding-top: 40px;

		transition: all 0.4s ease-out;



	}



	.BN-circle1:before{

		content: "";

		position: absolute;

		top: 0;

		left: 50%;

		transform: translateX(-50%);

		width: 2px;

		height: 100%;

		background: #fff;

	}



	.bn-item1{

		width: 250px;

		height: 250px;

		border-radius: 99999px;

		background-color: #fff;

		box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.4);

		background-image: url(../images/benice1.gif);

		position: relative;
		background-position: -120px;

		z-index: 2;

	}



	.BN-circle2 {

		position: absolute;

		top: -450px;

		right: 0;

		padding-top: 150px;
		z-index: 999;

		transition: all 0.4s 0.5s ease-out;

	}



	.BN-circle2:before{

		content: "";

		position: absolute;

		top: 0;

		left: 50%;

		transform: translateX(-50%);

		width: 2px;

		height: 100%;

		background: #fff;

	}



	.bn-item2{

		width: 250px;

		height: 250px;

		border-radius: 99999px;

		background-color: #fff;

		box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.4);

		background-image: url(../images/benice3.gif);

		background-size: 150%;

		background-position: center;

		position: relative;

		z-index: 2;

	}





	.BN-circle3 {

		position: absolute;

		top: -520px;

		padding-top: 75px;

		left: 50%;

		transform: translateX(-50%);

		transition: all 0.4s 1s ease-out;

		z-index: 3;

	}



	.BN-circle3:before{

		content: "";

		position: absolute;

		top: 0;

		left: 50%;

		transform: translateX(-50%);

		width: 2px;

		height: 100%;

		background: #fff;

	}



	.bn-item3{

		width: 200px;

		height: 200px;

		border-radius: 99999px;

		background-color: #fff;

		box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.4);


			background-size: cover;

			position: relative;

		z-index: 2;
		overflow: hidden;

	}

	.bn-item3 img{
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center center;
	}



	#sound,
	#song{

		position: absolute;

		z-index: -1;

		opacity: 0;

	}



.mobile-menu img{

	width: 65%;

	transition: all 0.3s ease-out;

}

.mobile-menu.on img{

	opacity: 0;

}



.menu-options{

	width: 100%;

	display: none;

	z-index: 10;
	position: relative;
	margin-top: 46px;

}



.menu-options ul{

	width: 100%;

}



.menu-options ul li{

	width:300px;

	font-size: 17px;

	background: rgba(212, 65, 65, 1) url('noun_Arrow_2094738.svg') no-repeat center right 10px / 30px;

	color: #fff;

	border-radius: 60px;

	position: absolute;

	top: 0;

	left: 55%;

	transform: translateX(-50%);

	transition: all 0.3s ease-out;

	opacity: 0;

	visibility: hidden;

	font-weight: bold;

	letter-spacing: 1px;

	padding: 25px 45px 25px 20px;
	z-index: 2;

}



.menu-options ul li.menu1{

	left: 50%;

	opacity: 1;

	visibility: visible;

}

.menu-options ul li.complete{
	opacity: 0;
	visibility: hidden;
	left: 45%;
}
.menu-options ul li.menu2.show{
	left: 50%;
	opacity: 1;
	visibility: visible;
}
.menu-options ul li.menu3.show{
	left: 50%;
	opacity: 1;
	visibility: visible;
}
.menu-options ul li.menu4.show{
	left: 50%;
	opacity: 1;
	visibility: visible;
}
.menu-options ul li.menu5.show{
	left: 50%;
	opacity: 1;
	visibility: visible;
}
.menu-options ul li.menu6.show{
	left: 50%;
	opacity: 1;
	visibility: visible;
}

.stamp{
	position: absolute;
	bottom:40px;
	right: 40px;
	opacity: 0;
}

.stamp.logo-in{
	opacity: 1;
}

.stamp img{
	height: 24px;
}

.happy-faces{
	position: absolute;
	bottom:30px;
	left: 35px;
	opacity: 0;
	transition: all 0.3s ease-out;
}
.happy-faces.happy{
	opacity: 1;
}
.happy-faces img{
	height: 40px;
	transition:all 0.3s ease-out;
	animation: jump 2s ease-out infinite;
}

.happy-faces img:nth-child(2){
	animation-delay: 0.4s;
}
.happy-faces img:nth-child(3){
	animation-delay: 0.6s;
}
.happy-faces img:nth-child(4){
	animation-delay: 0.8s;
}
.wishes-container{
	transform:translateY(-20px);
    opacity: 0;
    transition:all 0.3s ease-out;
}

.wishes-container.new{
	transform:translateY(0px);
    opacity: 1;
    margin-top: 75px;
}

.wishes-container h3{
	color: #fff;
    font-size: 16px;
    background: url(../images/ribbon-hor.png) no-repeat center center / 325px;
    text-align: center;
    width: 100%;
    height: 85px;
    padding-top: 46px;
}

@keyframes shake {

  10%, 90% {

    transform: translate3d(-1px, 0, 0);

  }



  20%, 80% {

    transform: translate3d(2px, 0, 0);

  }



  30%, 50%, 70% {

    transform: translate3d(-4px, 0, 0);

  }



  40%, 60% {

    transform: translate3d(4px, 0, 0);

  }

}


@keyframes jump {

  0%{
  	transform:translateY(0);
  }
  50%{
	transform:translateY(-15px);
  }
  100%{
	transform:translateY(0);
  }

}

@media (max-width: 1146px){

	.card-buttons-left,

	.card-buttons-right{

		display: none;

	}

	.mobile-menu{

		display: flex;

	}

	.menu-options{

		display: block;

	}


	.BN-circle1{
		display: none;
	}

	.benice{
		z-index: 3;
		bottom:0;
		top: auto !important;
	}

	.BN-circle2::before,
	.BN-circle3::before{
		display: none;
	}

	.bn-item2{
		width: 150px;
		height: 150px;
	}

	.bn-item3{
		width: 150px;
		height: 150px;
	}

	.BN-circle3{
		top: -60px;
		left: 10px;
		transform: none;
	}

	.BN-circle2{
		left: 10px;

		top: -130px;
	}

	.benice.active .BN-circle2{
		top: -165px;
		padding: 0;
	}

	.BN-circle3.active{
		top: -165px;
		padding: 0;
	}

}

@media (max-width:768px){
	.card-container{
		overflow: hidden;
	}
	.card-box.step2 h2{

		font-size: 6vw;

	}

	.mobile-info{
		display: block;
	}

	.card-inner-food.active{
		width: 100%;
		bottom: -48px;
		padding: 10px;
	}

	.card-box.step2 h2 .font1,
	.card-box.step2 h2 .font2,
	.card-box.step2 h2 .font3{
		font-size: 6vw !important;
	}


	.card-box.step2.balance .font1,
	.card-box.step2.balance h2,
	.card-box.step2.balance .font2,
	.card-box.step2.balance .font3{
		font-size: 6vw !important;
	}
}

@media (max-width:655px){

	.envelope-info h2{

		font-size: 8vw;

	}

	.envelope-info h3{

		font-size: 5vw;

	}

}

@media (max-width: 470px){

	.envelope-image{

		width: 150px;

		height: 150px;

	}

	.bow{

		width: 310px;

	}

	.card-box.step2 h2{

		font-size: 7vw;

	}

	.card-box.step2 h2 .font1,
	.card-box.step2 h2 .font2,
	.card-box.step2 h2 .font3{
		font-size: 7vw !important;
	}


	.card-box.step2.balance .font1,
	.card-box.step2.balance h2,
	.card-box.step2.balance .font2,
	.card-box.step2.balance .font3{
		font-size: 7vw !important;
	}


	.menu-options ul li{
		width: 100%;
	}

	.card-container{
		display: block;
	}

	.happy-faces img{
		height: 24px;
	}

	.card-box{
		height: 320px;
	}




}

@media (max-width: 440px){

.menu-options ul li{

		font-size: 5vw

	}

}

.credits {
	position: fixed;
	bottom:20px;

	z-index: 99;
	padding: 10px;
	width: 500px;
	font-size: 16px; color: #000;
	background-color: #fff;
	border-radius: 40px;
	left: 50%;
margin-left: -250px;
}
.credits span {
	color: #FF0004;
}