body{
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	overflow:hidden;
}

*:active {
    outline: none;
    border: none;
}

*:focus {
    outline: none;
    border: none;
}

textarea {
  resize: none;
}

#wrapper{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	overflow:hidden;
	background-color:#ffffff;
}

#wrapper .audio-button{
    position:absolute;
    left:60px;
    bottom:60px;
    font-family:"Arial",sans-serif;
    font-size:12px;
    color:#ffffff;
    cursor:pointer;
    z-index:999;
}

#intro{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}

.menu{
	position:absolute;
	top:60px;
	left:85px;
	width:170px;
	height:50px;
	opacity:0;
}

.menu .lines{
	position:relative;
	float:left;
	width:50px;
	height:50px;
	cursor:pointer;
}

.menu .lines .line1{
	position:absolute;
	top:15px;
	left:0px;
	width:37px;
	height:1px;
	background-color:rgba(255,255,255,1);
	transform-origin: 0% 50%;
}

.menu .lines .line2{
	position:absolute;
	top:27px;
	left:0px;
	width:25px;
	height:1px;
	background-color:rgba(255,255,255,0.6);
	transform-origin: 0% 50%;
}

.menu .title{
	position:relative;
	float:left;
	font-family: 'lemon_tuesdayregular',serif;
	font-size:35px;
	color:#ffffff;
	top: -12px;
    margin-left: 10px;
}

.loading{
	position:absolute;
	bottom:10vh;
	left:50%;
	width:500px;
	height:110px;
	margin-left:-250px;
	opacity:0;
}

.loading .loading-circle{
	position:absolute;
	top:0px;
	left:50%;
	margin-left:-25px;
	width:50px;
	height:50px;
	border:2px solid rgba(255,255,255,0.2);
	box-sizing: border-box;
	border-radius:50%;
}

.loading .loading-circle-mask{
	position:absolute;
	top:-2px;
	left:23px;
	width:25px;
	height:50px;
	transform-origin: 0% 50%;
	overflow:hidden;
	animation-name: loader;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.loading .loading-circle-inner{
	position:absolute;
	top:0px;
	left:0px;
	margin-left:-25px;
	width:50px;
	height:50px;
	border:2px solid rgba(255,255,255,1);
	box-sizing: border-box;
	border-radius:50%;
}

.button-circle-mask{
	position:absolute;
	top:-1px;
	left:50%;
	width:calc(50% + 2px);
	height: calc(100% + 2px);
	transform-origin: 0% 50%;
	overflow:hidden;
	animation-name: loader;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	opacity:0;
	transition: opacity 0.3s;
}

.button-hover:hover .button-circle-mask{
	opacity:1;
}

.button-circle-inner{
	position:absolute;
	top:0px;
	left:0px;
	margin-left:calc(-100% - 1px);
	width:calc(200%);
	height:100%;
	border:1px solid rgba(255,255,255,1);
	box-sizing: border-box;
	border-radius:50%;
}

@keyframes loader {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg)}
}

.loading .loading-text{
	position:absolute;
	bottom:0px;
	width:100%;
	text-align:center;
	font-family: 'lemon_tuesdayregular',serif;
	font-size:24px;
	color:#ffffff;
}

.vignette{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	pointer-events: none;
	background-image:url(../assets/intro/vignette.png);
	background-size:100% 100%;
}

.flowers{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	visibility:hidden;
}

.flowers .header{
	position:absolute;
	width:580px;
	height:380px;
	left:50%;
	margin-left:-290px;
	top:7vh;
}

.flowers .header .header-circle{
	position:absolute;
	top:0px;
	left:50%;
	width:380px;
	height:380px;
	margin-left:-190px;
	border:2px solid rgba(255,255,255,0.3);
	box-sizing: border-box;
	border-radius:50%;
}

.flowers .header .header-half-circle{
	position:absolute;
	top:0px;
	left:50%;
	width:190px;
	height:380px;
	margin-left:0px;
	overflow:hidden;
	transform-origin: 0% 50%;
	animation-name: loader;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.flowers .header .header-half-circle-scaler{
	position:absolute;
	top:0px;
	left:0px;
	width:190px;
	height:380px;
}

.flowers .header .header-half-circle-inner{
	position:absolute;
	top:0px;
	left:0px;
	width:380px;
	margin-left:-190px;
	height:380px;
	overflow:hidden;
	border:2px solid rgba(255,255,255,0.5);
	box-sizing: border-box;
	border-radius:50%;
}

.flowers .header .header-flowers{
	position:absolute;
	top:0px;
	left:50%;
	width:180px;
	margin-left:-90px;
	height:252px;
	background-image:url(../assets/flowers/header.png);
	background-size:100% auto;
}

.flowers .header .header-text-left{
	position:absolute;
	top:130px;
	left:0px;
	width:100%;
	height:auto;
	font-family: 'lemon_tuesdayregular',serif;
	font-size:36px;
	color:#ffffff;
	text-align:left;
}


.flowers .header .header-text-right{
	position:absolute;
	top:130px;
	left:0px;
	width:100%;
	height:auto;
	font-family: 'lemon_tuesdayregular',serif;
	font-size:36px;
	color:#ffffff;
	text-align:right;
}

.flowers .header .header-text-center{
	position:absolute;
	top:240px;
	left:0px;
	width:100%;
	height:auto;
	font-family: 'lemon_tuesdayregular',serif;
	font-size:36px;
	color:#ffffff;
	text-align:center;
}

.flowers .new{
	position:absolute;
	top:7vh;
	right:103px;
	width:58px;
	height:58px;
	border:1px solid rgba(255,255,255,0.4);
	box-sizing: border-box;
	border-radius:50%;
	background-image:url(../assets/flowers/newIcon.png);
	background-position:15px center;
	background-size:30px auto;
	background-repeat:no-repeat;
	cursor:pointer;
}

/*.flowers .new-hover{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-color:#ffffff;
	background-image:url(../assets/flowers/newIconBlack.png);
	background-position:15px center;
	background-size:30px auto;
	background-repeat:no-repeat;
	opacity:0;
	border-radius:50%;
	transition:opacity 0.3s;

}*/

/*.flowers .new:hover .new-hover{
	opacity:1;
}*/

.about{
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-525px;
	margin-top:-337px;
	width:1050px;
	height:674px;
	visibility: hidden;
}

.about .about-title{
	position:relative;
	width:100%;
	text-align:center;
	font-size:70px;
	color:#ffffff;
	font-family:'lemon_tuesdayregular',serif;
	margin-bottom:0px;
}

.about .about-text,.message .message-text{
	position:relative;
	width:100%;
	text-align:center;
	font-family:"Arial",sans-serif;
	font-size:16px;
	color:#ffffff;
	line-height: 36px;
	padding-left:100px;
	padding-right:100px;
	box-sizing: border-box;
	overflow-wrap: anywhere;
}


.about .about-text p{
    margin:0;
}

.about .about-author,.message .message-author{
	position:relative;
	width:100%;
	text-align:center;
	font-size:54px;
	color:#ffffff;
	font-family:'lemon_tuesdayregular',serif;
	margin-top:130px;
}

.about .flowersRight{
	position:absolute;
	top:50%;
	right:-130px;
	width:460px;
	height:528px;
	margin-top:-264px;
	background-image:url(../assets/about/flowers-right.png);
	background-size:100% auto;
	background-repeat: no-repeat;
	transform-origin:0% 50%;
}

.about .flowersLeft{
	position:absolute;
	top:50%;
	left:-130px;
	width:453px;
	height:528px;
	margin-top:-264px;
	background-image:url(../assets/about/flowers-left.png);
	background-size:100% auto;
	background-repeat: no-repeat;
	transform-origin:100% 50%;
}


.close-about,.close-message,.close-form{
	position:absolute;
	top:7vh;
	right:103px;
	width:58px;
	height:58px;
	border:1px solid rgba(255,255,255,0.4);
	box-sizing: border-box;
	border-radius:50%;
	background-image:url(../assets/about/close.png);
	background-size:13px auto;
	background-position:center center;
	background-repeat:no-repeat;
	cursor:pointer;
	visibility: hidden;
}

.prev-message{
	position:absolute;
	top:50vh;
	left:103px;
	width:58px;
	height:58px;
	border:1px solid rgba(255,255,255,0.4);
	box-sizing: border-box;
	border-radius:50%;
	background-image:url(../assets/message/arrow-left.png);
	background-position:center center;
	background-repeat:no-repeat;
	cursor:pointer;
	visibility: hidden;
    background-color: rgba(0,0,0,0.25);
}

.next-message{
	position:absolute;
	top:50vh;
	right:103px;
	width:58px;
	height:58px;
	border:1px solid rgba(255,255,255,0.4);
	box-sizing: border-box;
	border-radius:50%;
	background-image:url(../assets/message/arrow-right.png);
	background-position:center center;
	background-repeat:no-repeat;
	cursor:pointer;
	visibility: hidden;
    background-color: rgba(0,0,0,0.25);
}

.message{
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-525px;
	margin-top:-337px;
	width:1050px;
	height:674px;
	visibility: hidden;
}

.message-quote{
	position:relative;
	margin-left:auto;
	margin-right:auto;
	width:60px;
	height:60px;
	border:1px solid rgba(255,255,255,0.8);
	box-sizing: border-box;
	border-radius:50%;
	background-image:url(../assets/message/quote.png);
	background-position:center center;
	background-repeat:no-repeat;
	margin-top:45px;
}

.message .bg{
	position:absolute;
	top:50%;
	left:50%;
	width:2200px;
	height:534px;
	margin-top:-291px;
	margin-left:-1099px;
	background-image:url(../assets/message/bg.png);
}

.message .circle{
	position:relative;
	width:646px;
	height:646px;
	border-radius:50%;
	border:1px solid rgba(255,255,255,0.8);
	background-color:rgba(0,0,0,0.1);
	margin-left:auto;
	margin-right:auto;
	box-sizing:border-box;
}

.message .message-author{
	margin-top:15px;
}

.message .message-text{
	width:460px;
	margin-left:auto;
	margin-right:auto;
	padding-left:0px;
	padding-right:0px;
	font-size:16px;
	line-height:25px;
	margin-top:155px;
	height:286px;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.message .circle-highlight{
	position:absolute;
	top:-1px;
	margin-left:0px;
	left:50%;
	width:323px;
	height:646px;
	border-radius:50%;
	overflow-x:hidden;
	transform-origin:0% 50%;
	animation-name: loader;
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.message .circle-highlight .circle-highlight-inner{
	position: absolute;
    top: 0px;
    left: 0px;
    margin-left: -323px;
    width: 646px;
    height: 646px;
    border-radius: 50%;
    border: 2px solid #4a5de9;
    box-sizing: border-box;
}

.note-button{
  border-width: 1px;
  border-color: rgba(255, 255, 255,0.4);
  border-style: solid;
  border-radius: 20px;
  background-color:rgba(0,0,0,0.05);
  position: absolute;
  right:103px;
  bottom: 20vh;
  width: 238px;
  height: 65px;
  font-size:18px;
  font-family:'Gotham',sans-serif;
  color:#ffffff;
  padding-left:70px;
  line-height:65px;
  box-sizing: border-box;
  transition:border-color 0.2s;
  cursor:pointer;
	
	background-image:url(../assets/flowers/newIcon.png);
	background-position:30px center;
	background-size:30px auto;
	background-repeat:no-repeat;

	transition: border-color 0.2s;

	visibility: hidden;
}


.note-button:hover{

  border-color: rgba(255, 255, 255,1);
}

.form{
	position:absolute;
	top:50%;
	left:50%;
	width:972px;
	height:656px;
	margin-left:-486px;
	margin-top:-328px;
	visibility: hidden;
}

.form .title{
	position:absolute;
	top:-17px;
	left:0px;
	text-align:center;
	font-size:34px;
	font-family:'Gotham',sans-serif;
	color:#ffffff;
	width:100%;
}

.form .title span{
	font-size:70px;
	font-family:'lemon_tuesdayregular',serif;
	line-height:99px;
}

.form .line-left{
	position:absolute;
	top:0px;
	left:0px;
	width:345px;
	height:1px;
	background-color:rgba(255,255,255,0.5);
	transform-origin: 100% 50%;
}

.form .line-right{
	position:absolute;
	top:0px;
	right:0px;
	width:345px;
	height:1px;
	background-color:rgba(255,255,255,0.5);
	transform-origin: 0% 50%;
}

.form input.fullname{
	position:absolute;
	top:40px;
	left:0px;
	width:345px;
	height:55px;
	font-size:18px;
	text-align:center;
	line-height:55px;
	color:#ffffff;
  font-family:'Gotham',sans-serif;

	border-width: 1px;
	border-color: rgba(255, 255, 255,0.05);
	border-style: solid;
	border-radius: 20px;
	background-color: rgba(43, 43, 43,0.05);

	transition:border-color 0.2s;
}
.form input.fullname:focus{
	border-color: rgba(255, 255, 255,0.4);
}

.form input.email{
	position:absolute;
	top:40px;
	right:0px;
	width:345px;
	height:55px;
	font-size:18px;
	text-align:center;
	line-height:55px;
	color:#ffffff;
  font-family:'Gotham',sans-serif;

	border-width: 1px;
	border-color: rgba(255, 255, 255,0.05);
	border-style: solid;
	border-radius: 20px;
	background-color: rgba(43, 43, 43,0.05);

	transition:border-color 0.2s;
}


.form input.email:focus{
	border-color: rgba(255, 255, 255,0.4);
}

.form .textarea{
  border-width: 1px;
  border-color: rgba(255, 255, 255,0.05);
  border-style: solid;
  border-radius: 20px;
  background-color: rgba(43, 43, 43,0.05);
  position: absolute;
  left: 0px;
  top: 140px;
  width: 973px;
  height: 425px;
  font-size:16px;
  padding-left:75px;
  padding-right:75px;
  padding-top:80px;
  box-sizing: border-box;
  color:#ffffff;
  font-family:'Gotham',sans-serif;
  line-height:27px;

	transition:border-color 0.2s;
}


.form .textarea:focus{
	border-color: rgba(255, 255, 255,0.4);
}

.form .emoji-button{
  border-width: 1px;
  border-color: rgba(255, 255, 255,0.4);
  border-style: solid;
  border-radius: 10px;
  position: absolute;
  right: 18px;
  top: 157px;
  width: 104px;
  height: 30px;
  font-size:12px;
  font-family:'Gotham',sans-serif;
  color:#ffffff;
  padding-left:47px;
  line-height:30px;
  box-sizing: border-box;
  transition:border-color 0.2s;
  cursor:pointer;

  background-image:url(../assets/form/emoji.png);
  background-repeat: no-repeat;
  background-position:20px center;
}

.form .emoji-close{
  background-color: rgba(255, 255, 255,0.4);
  border-radius: 10px;
  position: absolute;
  right: 18px;
  top: 17px;
  width: 104px;
  height: 30px;
  font-size:12px;
  font-family:'Gotham',sans-serif;
  color:#24494f;
  padding-left:47px;
  line-height:30px;
  box-sizing: border-box;
  transition:border-color 0.2s;
  cursor:pointer;

  background-image:url(../assets/form/emoji-close.png);
  background-repeat: no-repeat;
  background-position:20px center;

  visibility: hidden;
}


.form .emojis{
  border-width: 1px;
  border-color: rgba(255, 255, 255,0.05);
  border-style: solid;
  border-radius: 20px;
  background-color: rgba(43, 43, 43,0.05);
  position: absolute;
  left: 0px;
  top: 140px;
  width: 973px;
  height: 425px;
  box-sizing: border-box;
  color:#ffffff;

  visibility: hidden;
}

.form .emoji-buttons{
	position:absolute;
	top:50%;
	margin-top:-35px;
	left:0px;
	width:100%;
	height:auto;
	display:flex;
	flex-direction: row;
	justify-content: center;
}

.form .emoji-item{
	position:relative;
	font-size:70px;
	margin-left:17px;
	margin-right:17px;
	width:auto;
	cursor:pointer;
}

.form .emoji-button:hover{

  border-color: rgba(255, 255, 255,0.8);
}


.form .submit{
  border-width: 2px;
  border-color: rgba(255, 255, 255,0.05);
  border-style: solid;
  border-radius: 20px;
  background-color: rgba(43, 43, 43,0.05);
  position: absolute;
  left: 50%;
  margin-left:-117px;
  top: 593px;
  width: 234px;
  height: 61px;
  color:#ffffff;
  font-family:'Gotham',sans-serif;
  font-size:18px;
  text-align:center;
  line-height:61px;
  cursor:pointer;
  transition: border-color 0.3s;

}

.form .submit:hover{
	border-color: rgba(255, 255, 255,0.8);
}

.form .private{
	position:absolute;
	right:10px;
	top:100px;
	font-size:11px;
	font-family:'Gotham',sans-serif;
	color:#ffffff;
	text-align:right;
	width:auto;
}

.form .count{
	position:absolute;
	right: 20px;
    top: 530px;
	font-size:11px;
	font-family:'Gotham',sans-serif;
	color:#ffffff;
	text-align:right;
	width:auto;
}

.mobile-overlay{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index:9999999;
    background-image:url(../assets/mobile_overlay.jpg);
    background-repeat: no-repeat;
    background-color:#000000;
    background-size:100% auto;
    background-position:center;
    display:none;
}

@media all and (max-width: 700px){
    .mobile-overlay{
        display:block !important;
    }
}