@font-face{
	src:url('../font/mainFont.ttf');
	font-family: dafont;
}

@font-face{
		src:url('../font/Poppins/Poppins-ExtraLight.ttf');
		font-family: SF;
}

@font-face{
		src:url('../font/Poppins/Poppins-Light.ttf');
		font-family: PopMed;
}

@font-face{
		src:url('../font/calistha/Calistha.otf');
		font-family: Harland;
}

* {
	box-sizing: border-box;
}

body, html{
	width: 100%;
	height: 100%;
	margin: 0;
	font-family: "Prata", serif;
}

body{
	overflow: hidden;
}

body.start{
	overflow: auto;
}

body .segment{
	opacity: 0;
}

.segment.nav{
	overflow: hidden;
}

body.start .segment{
	opacity: 100;
}

.segment{
	height: auto;
	//font-family: PopMed;
}

.overlay{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}


.mask{
	background: rgba(0,0,0,0.2);
}

.segment.home{
	//background: url('../pict/pict-1.jpeg');
	background-size: cover;
	background-position: 50% 50%;
	position: relative;
	height: 85%;
	border-width: 0px 2px 0px 2px;
	border-style: solid;
	border-color: white;
	background-attachment: fixed;
}

.segment.home .mask{
	z-index: 999;
}

.overlay.pict-img{
	background: rgba(0,0,0,0.1);
	color: gold;
	font-family: dafont;
	font-size: 65px;
	z-index: 1000;
}

.img-box-nav{
	z-index: 1001;
}

.img-box-nav .swiper-pagination-bullet{
	background: white;
	opacity: .4;
}

.img-box-nav .swiper-pagination-bullet.swiper-pagination-bullet-active{
	opacity: 1;
}

.img-box{
	width: 100%;
	height: 100%;
}


.message-pagination .swiper-pagination-bullet{
	background: black;
	opacity: .2;
}

.message-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
	opacity: .8;
}

/*
0917
1030
1166
0361 v
0852
0411 v
0431 v
*/

.swiper-slide.one{
	background: url('../pict/pre/LNK_0361.jpg');
	background-size: cover;
	background-position: 50% 50%;
}

.swiper-slide.three{
	background: url('../pict/pre/LNK_0983.jpg');
	background-size: cover;
	background-position: 50% 60%;
}

.swiper-slide.two{
	background: url('../pict/pre/LNK_1141.jpg');
	background-size: cover;
	background-position: 50% 80%;
}

.bg-carousel-container{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.post-carousel-container{
	overflow: hidden;
}

.post-carousel-container-swiper{
	width: 100%;
	height: 100%;
}

.carousel-nav{
	width: 30px;
	height: 450px;
	position: absolute;
	right: 40px;
	z-index: 1000;
	font-family: SF;
	opacity: 0;
}

.swiper-pagination-bullet{
	background: none;
}

.carousel-nav-num{
	height: 200px;
	//background: red;
}

.carousel-nav-arrow{
	height: 125px;
	cursor: pointer;
	transition: all .8s;
}

.swiper-button-disabled{

}

.carousel-nav-num-item{
	height: 33%;
	width: 100%;
	position: relative;
	color: white;
	font-size: 15px;
	transition: all .5s;
}

.post-nav-num-container{
	width: 150px;
}

.post-nav-holder .swiper-horizontal>.swiper-pagination-bullets, .post-nav-holder .swiper-pagination-bullets.swiper-pagination-horizontal,.post-nav-holder .swiper-pagination-custom,.post-nav-holder .swiper-pagination-fraction{
	width: 100%;
}

.post-nav-item{
	width: 30%;
	height: 100%;
	margin: 0;
	position: relative;
	font-size: 15px;
	font-family: SF;
	transition: all .5s;
}

.post-nav-holder .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.post-nav-holder .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
	//margin: 0;
	background: black;
}

.post-nav-holder .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active,.post-nav-holder .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active{
	background: red;
}

.carousel-nav-num-item span, .post-nav-item span, .post-nav-arrow{
	cursor: pointer;
}

.carousel-nav-num-item.swiper-pagination-bullet-active{
	font-size: 25px;
}

.carousel-nav-num-item.after-bullet span::after, .post-nav-item.after-bullet span::after{
	width: 5px;
	height: 5px;
	border-radius: 100px;
	background: white;
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%) translateY(-50%);
}

.post-nav-item.after-bullet span::after{
	left: 100%;
	top: 50%;
	background: rgb(215,187,109);
}

.carousel-nav-arrow, .carousel-nav-num-item{
	opacity: 0.5;
}

.carousel-nav-num-item.swiper-pagination-bullet-active{
	opacity: 0.9;
}
	
.post-nav-holder .swiper-pagination-bullet{
	opacity: 0.4;
}

.post-nav-container{
	width: 100%;
	height: 100%;
}

.post-nav-item.swiper-pagination-bullet-active{
	opacity: 0.9;
	font-size: 17px;
}

.carousel-nav-arrow:hover, .carousel-nav-num-item:hover{
	opacity: 1;
	font-size: 20px;
}

.post-nav-item:hover{
	font-size: 18px;
}

.carousel-nav-arrow img{
	height: 100%;
}

.mouse-scroll-icon-holder{
	width: 35px;
	height: 35px;
	position: absolute;
	bottom: 25px;
	opacity: 0.8;
	z-index: 1000;
	opacity: 0;
	cursor: pointer;
}
.mouse-scroll-icon-holder:active{
	opacity: 0.9;
}

.mouse-scroll-icon-holder:active{
	opacity: 1;
}

.mouse-scroll-icon-holder>img{
	height: 100%;
}

.segment.nav{
	height: 60px;
	display: flex;
	flex-wrap: wrap;
	padding: 10px 0px;
}

.segment.story{
	min-height: 100%;
	height: auto;
	display: flex;
	flex-wrap: wrap;
	position: relative;
	justify-content: center;
	overflow: hidden;
	//filter: grayscale(100%);
	padding: 60px 0px 0px 0px;
	//background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(183, 110, 121, 0.15) 60%, rgba(255,255,255,1) 100%);
}

.overlay.pict.story{
	background: url("../pict/pre/LNK_1255.jpg");
	background-size: cover;
	background-position: 50% 50%;
	background-attachment: fixed;
	//filter: grayscale(100%);
}

.segment.story .overlay.mask{
	//background: rgba(0,0,0, 0.15);
	//background: linear-gradient(180deg, rgb(243,243,243) 0%,rgba(0,0,0, 0.15) 30%,rgba(0,0,0, 0.15) 70%, rgb(255,255,255) 100%);
	//background: linear-gradient(180deg, rgb(251,244,244) 0%,rgba(0,0,0, 0.15) 30%,rgba(0,0,0, 0.15) 70%, rgb(255,255,255) 100%);
	//background: linear-gradient(180deg, rgb(247,246,242) 0%,rgba(0,0,0, 0.15) 30%,rgba(0,0,0, 0.15) 70%, rgb(255,255,255) 100%);
}


.segment.us{
	height: 800px;
	//background: red;
	padding: 30px 50px;
	//box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.1);
	position: relative;
	//background: rgb(243,243,243);
	//background: rgba(247,232,234, 0.5);
	background: rgb(247,246,242);
	background: white;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	font-family: SF;
}

.segment.us>.container{
	height: 100%;
	width: 50%;
	//background: green;
	position: relative;
}

.segment.us>.container.right{
	//background: blue;
	padding: 20px;
	overflow: hidden;
	order: 1;
	width: 100%;
	height: 40%;
}

.segment.us>.container.left{
	//background: green;
	order: 2;
	width: 100%;
	height: 60%;
}

.socmed-post.holder{
	width: 33%;
	height: 100%;
	background: white;
	padding: 20px 20px 0px 20px;
	//box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.1);
}

.post-nav-holder{
	height: 15%;
	position: relative;
	width: 500px;
	//background: red;
	display: flex;
	flex-wrap: wrap;
}

.post-nav-arrow{
	width: 60px;
	height: 100%;
}

.post-nav-arrow img{
	width: 100%;
}

.post-carousel-container{
	height: 100%;
	//background: blue;
}

.post-carousel-container-swiper{
	height: 85%;
	width: 100%;
	overflow: hidden;
	//box-shadow: 5px 5px 5px 0px rgb(0 0 0 / 10%);
}

.socmed-mock{
	 height: 180px;
	 width: 50%;
	 border-radius: 0px;
	 overflow: hidden;
	 background: white;
	 padding: 10px 20px;
	 position: relative;
	 left: 0%;
	 //box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.1);
}

.segment.us.show .socmed-mock{
	left: 0;
}

.socmed.name-holder{
	height: 50%;
	//background: green;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.socmed.text-holder{
	height: 50%;
	//background: red;
	padding: 10px 0px;
	font-size: 13px;
	opacity: 0;
}

.socmed.pp{
	width: 70px;
	height: 70px;
	border-radius: 100px;
}

.socmed-mock.adit .socmed.pp{
	background: url("../pict/pre/LNK_1525.jpg");
	background-size: cover;
	background-position: 50% 30%;
}

.socmed-mock.evy .socmed.pp{
	background: url("../pict/pre/LNK_1547 copy.jpg");
	background-size: cover;
	background-position: 50% 30%;
}

.socmed.name{
	width: 80%;
	height: 100%;
	//background: blue;
	padding-left: 20px;
}

.segment.us .socmed.pp, .segment.us .socmed.name{
	opacity: 0;
}

.segment.us.show .socmed.pp, .segment.us.show .socmed.name, .segment.us.show .socmed.text-holder{
	opacity: 1;
	transition: all 4s;
}

.socmed.name-top, .socmed.name-bottom{
	height: 50%;
	//background: red;
	display: flex;
	align-items: center;
	font-size: 16px;
}

.socmed.name-top{
	font-weight: bold;
}

.socmed.name-bottom{
	font-size: 12px;
	align-items: flex-start;
}

.socmed-post.pict{
	height: 85%;
	margin: auto;
}

.socmed-post.pict.one{
	background: url("../pict/pre/LNK_0917.jpg");
	background-size: cover;
	background-position: 50% 30%;
}

.socmed-post.pict.three{
	background: url("../pict/pre/LNK_1030.jpg");
	background-size: cover;
	background-position: 50% 60%;
}

/*
1255
*/

.socmed-post.pict.two{
	background: url("../pict/pre/LNK_0431.jpg");
	background-size: cover;
	background-position: 50% 40%;
}

.socmed-post.pict.five{
	background: url("../pict/pre/LNK_1093.jpg");
	background-size: cover;
	background-position: 50% 60%;
}

.socmed-post.pict.four{
	background: url("../pict/pre/LNK_1541.jpg");
	background-size: cover;
	background-position: 50% 25%;
}


.socmed-post.pict.six{
	background: url("../pict/pre/LNK_0852.jpg");
	background-size: cover;
	background-position: 50% 60%;
}


.socmed-post.caption{
	height: 15%;
	font-weight: bold;
	font-size: 15px;
	opacity: 0;
	transition: all 2s;
}

.socmed-post.pict{
	transition: all 2s;
	opacity: 0;
	height: 0;
}

.segment.us.show .socmed-post.pict{
	opacity: 1;
	height: 85%;
}

.segment.us.show .socmed-post.caption{
	opacity: 1;
}

.float{
	position: absolute;
}

.float.box{
	left: 0;
	width: 35%;
	height: 100%;
	top: 0%;
	background: linear-gradient(90deg, rgba(183, 110, 121, 0.1) 0%, rgb(243,243,243) 100%)
}
	
.pp-holder{
	height: 330px;
	margin-top: 45px;
	position: relative;
	//gap:  20px;
	//border-bottom: 1px dashed black;
}

.pp-holder-item{
	width: 37.5%;
	height: 100%;
}

.pp-holder-item.mid{
	width: 25%;
}

.pp-item{
	width: 40%;
	height: 210px;
	display: flex;
	background: rgba(245, 246, 250, 0.5);
	font-family: SF;
	box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.1);

}

.pp-item.sign{
	width: 100px;
	box-shadow: none;
	background: none;
}

.love-sign{
	width: 80px;
	height: 80px;
	text-align: center;
	//background: red;
}

.love-sign>img{
	height: 100%;
}

.pp-item.left{
	box-shadow: -5px 5px 5px 0px rgba(0,0,0,0.1);
}

.pp-pict-holder{
	width: 30%;
	height: 100%;
	//background: blue;
}

.pp-bio-holder{
	width: 70%;
	//height: 100%;
	//background: yellow;
	padding: 20px;
}

.pp-bio-holder{
	width: 100%;
}

.pp-pict{
	width: 100%;
	height: 100%;
}

.pp-pict.adit{
	background: url('../pict/pict-1.jpeg');
	background-size: cover;
	background-position: 50% 50%;
}

.pp-pict.evy{
	background: url('../pict/sample.png');
	background-size: cover;
	background-position: 50% 50%;
}

.pp-pict.aditevy{
	width: 220px;
	height: 220px;
	background: url('../pict/sample.png');
	background-size: cover;
	border-radius: 200px;
	background-position: 50% 50%;
}

.pp-bio.name{
	height: 50px;
	//background: green;
	display: flex;
	font-weight: bold;
	align-items: center;
	justify-content: flex-end;
}

.pp-bio-item.name{
	height: auto;
	font-size: 20px;
}

.pp-holder-item.left{
	justify-content: flex-end;
	display: flex;
}

.pp-holder-item.right{
	justify-content: flex-start;
	display: flex;
	align-items: flex-end;
}

.pp-bio-holder{
	width: 70%;
	font-size: 14px;
	font-family: SF;
}

.pp-bio-holder *{
	text-align: right;
}

.pp-holder-item.right .pp-bio-holder *{
	text-align: left;
}

.pp-bio-holder>div{
	margin-top: 10px;
}

.pp-soc-med-item{
	
}

.pp-soc-med-wrapper{
	display: flex;
	justify-content: flex-end;
}

.pp-holder-item.right .pp-soc-med-wrapper{
	justify-content: flex-start;
}

.pp-soc-med-holder{
	width: 40px;
	height: 40px;
	margin-left: 10px;
	border-radius: 100px;
	background: rgb(35,55,82);
	color: white;
	cursor: pointer;
}

.pp-holder-item.right .pp-soc-med-holder{
	margin-left: 0;
	margin-right: 10px;
}

.pp-soc-med-holder:hover{
	opacity: 0.9;
}

.pp-soc-med-holder:nth-child(2n){
	background: #b76e79;
}

.pp-soc-med-holder:nth-child(3n){
	//background: #74CDCD;
}


.pp-bio-item.name{
	font-weight: bold;
}

.pp-bio.text{
	height: 100px;
	//background: blue;
	//padding: 20px 0px;;
	text-align: right;
}

.pp-socmed-holder{
	height: 20px;
	//background: red;
	text-align: center;
	gap:  20px;
}

.pp-item.right .pp-bio.name{
	justify-content: flex-start;
}

.pp-item.right .pp-bio.text{
	text-align: left;
}

.segment.us .title-text-holder{
	border: 1px solid #b76e79;
	color: black;
	font-size: 16px;
}

.segment.pictures{
	min-height: 100%;
	height: auto;
	margin-top: 50px;
	background: white;
	//background: rgba(183, 110, 121, 0.2);
	//background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(183, 110, 121, 0.15) 60%, rgba(255,255,255,1) 100%);
}

.story-item{
	min-height: 100%;
	position: relative;
}

.story-item.left{
	width: 75%;
}

.story-item.right{
	width: 25%;
}

.story-item.right .qt-holder{
	width: 100%;
	height: 40%;
	border-left: 1px solid rgb(35,55,82);
	//background: rgb(35,55,82);
	background: rgb(53,53,53);
	color: white;
	padding: 35px;
	text-align: center;
	font-size: 18px;
	//font-style: italic;
}

.qt-holder .row{
	opacity: 0;
	transition: all 5s;
}

.qt-holder.show .row{
	opacity: 1;
}

.qt-holder .row.one{
	height: 10%;
}
.qt-holder .row.two{
	height: 80%;
	font-size: 15px;
	font-family: SF;
	//font-style: italic;
}
.qt-holder .row.three{
	height: 10%;
	font-family: SF;
}

.qt-sign{
	font-size: 45px;
	color: gold;
}

.qt-src{
	font-size: 15px;
	font-style: normal;
}

.segment.margin{
	margin-top: 40px;
}

.parent-center{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap:  wrap;
}

.navbar{
	height: 100%;
}

.navbar.logo{
	width: 10%;
}

.navbar.socmed{
	width: 20%;
}

.navbar.logo{
	border-right: 1px solid black;
}

.navbar.navigation{
	width: 70%;
	gap:  55px;
}

.navbar.socmed{
	gap:  23px;
	font-weight: bold;
	font-size: 16px;
}

.nav-item{
	cursor: pointer;
	transition: all 0.1s;
}

.nav-item:not(.non-hover):hover, .nav-item.active{
	color: #b76e79;
}

.title-bar{
	height: auto;
	width: 100%;
	z-index: 1000;
}

.title.name-holder{
	height: 153px;
	padding: 0px 0px 20px 0px;
	position: relative;
}

.title.date, .title.quote{
	height: 40px;
}

.title.name{
	height: 153px;
	width: 50%;
	//border: 4px solid white;
	font-size: 150px;
	color: gold;
	opacity: 0;
	font-family: dafont;
}

@keyframes opacityDisplay{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 100;
	}
}

.title.date, .title.quote{
	color: white;
	font-size: 19px;
	position: relative;
	font-family: SF;
}

.title.date.home, .title.quote{
	opacity: 0;
}

body.start .title.date.home, body.start .title.quote{
	animation-name: opacityDisplay;
  	animation-duration: 4s;
  	animation-fill-mode: forwards;
}

body.start .title.name{
	animation-name: opacityDisplay;
  	animation-duration: 1.5s;
  	animation-fill-mode: forwards;
  	animation-delay: 1s;
}

.carousel-nav, .mouse-scroll-icon-holder{
	opacity: 0;
}

body.start .carousel-nav, body.start .mouse-scroll-icon-holder{
  animation-name: opacityDisplay;
  animation-duration: 5s;
  animation-fill-mode: forwards;	
}

.title.quote{
	font-style: italic;
	font-size: 15px;
	font-family: SF;
	margin-top: 20px;
}

a{
	color: inherit;
	text-decoration: none;
}

.segment-title{
	font-size: 20px;
	height: 50px;
	position: relative;
}

.title-text-holder{
	height: 100%;
	padding: 0px 25px;
	border-bottom: 1px solid black;
}

.story-container{
	height: 90%;
	padding: 50px;
	margin-top: 25px;
	position: relative;
}

.story-timeline-item{
	min-height: 150px;
	display: flex;
	width: 80%;
	flex-wrap: wrap;
	margin:  auto;
}

.timeline-marker{
	width: 180px;
	min-height: 100%;
	position: relative;
}

.timeline-circ{
	width: 100px;
	height: 100px;
	border-radius: 100px;
	//background: green;
	position: relative;
	//border: 2px solid #c0392b;
	//border: 1px solid rgb(215,187,109);
	//border: 1px solid rgb(53,53,53);
	//border: 1px solid rgba(255,255,255,.5);
	background-size: cover;
	overflow: hidden;
	background-position: 50% 50%;
}

#vid-pre, #vid-pre-box{
	width: 100%;
}

#vid-pre{
	
}

.yt-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}

.yt-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.timeline-circ.quote{
	background: rgb(53,53,53);
	color: gold;
	font-size: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.timeline-circ.quote span{
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

.story-timeline-item:nth-child(2n) .timeline-circ{
	//border: 2px solid #FF849D;
}

.story-timeline-item:nth-child(1n) .timeline-circ{
	//border: 3px solid #FFD87C
}

.story-timeline-item:nth-child(3n) .timeline-circ{
	//border: 3px solid #74CDCD
}

.timeline-content{
	width: 70%;
	min-height: 100%;
	padding: 25px 0px;
}

.story-timeline-item .timeline-circ{
	opacity: 0;
	transition: all 1s;
}

.story-timeline-item .timeline-content{
	left: 150%;
	position: relative;
	transition: all 1s;
}

.story-timeline-item.quote .timeline-content-item.date{
	display: none;
}

.story-timeline-item.quote .timeline-content-wrapper{
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.story-timeline-item.show .timeline-circ{
	opacity: 1;
}

.story-timeline-item.show .timeline-content{
	left: 0;
}

.timeline-content-wrapper{
	width: 100%;
	min-height: 100%;
	background: rgba(245, 246, 250, 1);
	padding: 25px;
	border-radius: 5px;
	font-family: SF;
}

.timeline-bar{
	width: 1px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	background: rgb(215,187,109);
	background: rgb(53,53,53);
}

.timeline-content-item.date{
	height: 30px;
	justify-content: flex-start;
	border-bottom: .2px dashed black;
}

.timeline-content-item.text{
	height: auto;
	font-size: 13px;
	justify-content: flex-start;
	padding: 10px 0px 0px 0px;
}

.segment.pictures .qt-holder{
	height: 70px;
	width: 100%;
	font-size: 15px;
	opacity: 0;
	font-family: SF;
	transition: all 2s;
}

.segment.pictures.show .qt-holder{
	opacity: 1;
}

.segment.pictures .qt-holder .qt-sign{
	font-size: 32px;
	color: black;
}

.qt-holder .qt-text{
	font-style: italic;
}

.pict-container{
	width: 90%;
	margin: auto;
	min-height: 100%;
	padding: 25px 0px;
}

.grid {
  max-width: 100%;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */

.grid-sizer,
.grid-item {
  width: 25%;
}

.grid-item {
  height: 350px;
  overflow: hidden;
  float: left;
  padding: 8px;
  cursor: pointer;
  position: relative;
  border-radius: 30px;
  transition: all .3s;
}

.grid-item-holder{
	width: 90%;
	height: 90%;
	position: relative;
}

.grid-item:hover{
	opacity: 0.9;
}

.img-holder{
	width: 100%;
	height: 100%;
	position: relative;
	background: white;
	overflow: hidden;
}

#snow-box{
	position: absolute;
	left: 0;
	top: 0;
}

.desc-holder{
	height: 0px;
	overflow: hidden;
	transition: all .5s;
	width: 100%;
	position: absolute;
	left:  0;
	bottom: 0;
	color: black;
	background: white;
	font-size: 15px;
	font-family: SF;
	text-align: center;
}

.grid-item:hover .desc-holder, .desc-holder.show{
	height: 40px;
}

.img-holder>img, .img-holder>.img{
	//width: 100%;
	//height: 100%;
	width: 0%;
	height: 0%;
	transition: all 2s;
	transition-timing-function: ease-in;
	position: relative;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
}

.segment.pictures.show .grid-item:nth-child(2n) .img-holder>img, .segment.pictures.show .grid-item:nth-child(2n) .img-holder>.img{
	transition: all 2s;
}

.segment.pictures.show .grid-item:nth-child(3n) .img-holder>img, .segment.pictures.show .grid-item:nth-child(3n) .img-holder>.img{
	transition: all 3.5s;
}

.segment.pictures.show .grid-item:nth-child(4n) .img-holder>img. .segment.pictures.show .grid-item:nth-child(4n) .img-holder>.img{
	transition: all 1.5s;
}

.segment.pictures.show .grid-item .img-holder>img, .segment.pictures.show .grid-item .img-holder>.img{
	width: auto;
	height: 100%;
}

.grid-item--width2 { width:  50%; }
.grid-item--width3 { width:  25%; }
.grid-item--width4 { width:  50%; }

.grid-item--height2 { height: 400px; }
.grid-item--height3 { height: 360px; }
.grid-item--height4 { height: 400px; }


.grid-item.wide{
	//height: 400px;
	width: 50%;
	border-radius: 0;
}

.grid-item.wide .desc-holder{
	height: 40px;
}

.grid-item-container{
	width: 100%;
	height: 100%;
	background: white;
	padding: 8px;
	display: flex;
	flex-wrap: wrap;
}

.grid-item.wide .img-holder{
	width: 60%;
	height: 100%;
}

.grid-item.wide .text-holder{
	width: 40%;
	height: 100%;
	padding: 15px;
	font-family: SF;
	font-size: 12px;
	overflow: auto;
}

.grid-item.wide .text-holder h1{
	margin-bottom: 8px;
}

.grid-item.wide.text-left .img-holder{
	order: 1;
}

.grid-item.wide.text-left .text-holder{
	order: 2;
}

#tree{
	width: 100%;
	height: 1000px;
}


/*---------------------------------------------------*/
/*  mouse cursor animation
/*---------------------------------------------------*/
.mouseCursor {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  border-radius: 50%;
  transform: translateZ(0);
  visibility: hidden;
}

.cursor-inner {
  margin-left: -3px;
  margin-top: -3px;
  width: 6px;
  height: 6px;
  z-index: 10000001;
  background-color: gold;
  transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.cursor-inner.cursor-hover {
  margin-left: -30px;
  margin-top: -30px;
  width: 60px;
  height: 60px;
  background-color: gold;
  opacity: 0.2;
}

.cursor-outer {
  margin-left: -15px;
  margin-top: -15px;
  width: 30px;
  height: 30px;
  border: 2px solid gold;
  box-sizing: border-box;
  z-index: 10000000;
  opacity: 0.3;
  transition: all 0.08s ease-out;
}

.cursor-outer.cursor-hover {
  opacity: 0;
}

.mim_tm_all_wrap[data-magic-cursor=hide] .mouseCursor {
  display: none;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  z-index: -1111;
}

.segment.timer-wedding{
	min-height: 350px;
	background: url("../pict/wallpaperbetter (2).jpg");
	background-attachment: fixed;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	position: relative;
}

.segment.timer-wedding .segment-title{
	height: 120px;
	color: yellow;
	font-family: Harland;
	font-size: 65px;
	//background: red;
}

.segment.timer-wedding .title-text-holder{
	border: none;
	align-items: flex-end;
}

.segment.timer-wedding .overlay{
	background: rgba(0,0,0,0.5);
}

.title.date.timer{
	opacity: 0;
	transition: all 5s;
}

.segment.timer-wedding.show .title.date.timer{
	opacity: 1;
}

.timer-holder{
	height: 300px;
	//background: red;
	flex-wrap: wrap;
	padding-bottom: 25px;
	gap: 10px;
	position: relative;
}

.timer-item{
	width: 200px;
	height: 80%;
	background: rgba(255,255,255,0.1);
	color: white;
	font-family: SF;
}

.timer-num{
	height: 70%;
	font-size: 65px;
}

.timer-label{
	height: 30%;
	font-size: 18px;
}

.border-default{
	border-left: 2px solid white;
	border-right: 2px solid white;
}

.segment.the-wedding{
	height: 850px;
	background: white;
	margin-top: 2px;
	overflow: hidden;
	padding-top: 80px;
	padding-left: 25px;
	padding-bottom: 80px;
}

.invitation-item{
	height: 100%;
}

.invitation-item.maps{
	width: 35%;
}

.maps-detail-container{
	height: 100%;
	background: rgba(53,53,53);
	//border: 2px solid black;
	//border-bottom: none;
	overflow: hidden;
}

.invitation-item  .segment-title{
	font-size: 20px;
	height: 60px;
	font-family: SF;
	color: white;
}

.invitation-item-detail.address{
	font-size: 13px;
	padding: 25px;
	text-align: center;
	border-top: 1px solid rgba(255,255,255,0.1);
}

.invitation-item-detail.gmaps-holder{
	height: 270px;
	display: flex;
	justify-content: center;
	//padding: 0px 10px 0px 10px;
}

.gmaps{
	width: 100%;
	height: 100%;
}

.location-carousel{
	height: 272px;
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid black;
	//background: green;
}

.invitation-item  .segment-title .title-text-holder{
	align-items: flex-end;
	border-bottom: none;
}

.invitation-item.detail{
	width: 65%;
	position: relative;
	top: -150%;
	transition: all 1.5s;
}

.segment.the-wedding.show .invitation-item.detail{
	top: 0;
}

.invitation-item .mason{
	width: 50%;
	height: 100%;
	//background: green;
}

.mason-image.one{
	background: url("../pict/hilton-1.jpeg");
	background-size: cover;
	background-position: 50% 50%;
}

.mason-image.two{
	background: url("../pict/hilton-2.jpeg");
	background-size: cover;
	background-position: 50% 50%;
}

.mason-image.three{
	background: url("../pict/hilton-3.webp");
	background-size: cover;
	background-position: 50% 50%;
}

.mason-image{
	width: 100%;
	height: 0%;
	transition: all 2s;
	border-top: 2px solid black;
	border-bottom: 2px solid black;
}

.mason.left .mason-image{
	border-right: 2px solid black;
}

.mason.right .mason-image{
	border-left: 2px solid black;
	height: 50%;
}

.invitation-item .grid-item.two, .invitation-item .grid-item.three{
	width: 50%;
	height: 50%;
}

.segment.the-wedding.show .mason-image.one{
	width: 100%;
	height: 100%;
}

.segment.the-wedding.show .mason-image.two, .segment.the-wedding.show .mason-image.three{
	width: 100%;
	height: 50%;
}

.invitation-item-det{
	padding: 25px;
}

.invitation-item-det:nth-child(1){
	width: 100%;
	height: 50%;
	//background: green;
}

.invitation-item-det.reception{
	height: 50%;
}

.invitation-item-det:nth-child(2){
	width: 100%;
	height: 50%;
	//background: blue;
}

.agenda{
	width: 100%;
	height: 100%;
	//background: red;
	font-family: SF;
}

.agenda-title{
	height: 30%;
	//background: blue;
	font-family: Harland;
	font-size: 70px;
}

.agenda-hour{
	height: 10%;
}

.agenda-location{
	height: 15%;
	font-size: 18px;
	font-weight: bold;
}

.agenda-location-address{
	height: 20%;
	padding: 0px 25px;
	font-size: 14px;
	text-align: center;
	margin: auto;
	width: 80%;
}

.agenda-view-map{
	height: 25%;
}

.view-map{
	width: 30%;
	height: 40px;
}

.view-map-btn{
	width: 100%;
	height: 100%;
	background: rgba(53,53,53,1);
	border: 1px solid black;
	color: white;
	font-family: SF;
	cursor: pointer;
}

.agenda-location-maps{
	height: 25%;
	flex-wrap: wrap;
}

.holy-matrimory-item{
	width: 25%;
	height: 100%;
	border: 2px solid white;
}

.holy-matrimory-item.one{
	background: url("../pict/cetiya-1.jpeg");
	background-size: cover;
}

.holy-matrimory-item.two{
	background: url("../pict/cetiya-2.png");
	background-size: cover;
	background-position: 50% 50%;
}

.holy-matrimory-item.three{
	background: url("../pict/cetiya-3.png");
	background-size: cover;
	background-position: 0% 50%;
}

.separator{
	height: 1px;
	width: 80%;
	position: relative;
	margin:  auto;
	background: rgba(0,0,0,0.2);
	margin-top: 15px;
	margin-bottom: 15px;
}

.separator .circ{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 15px;
	height: 15px;
	border: 1px solid rgba(0,0,0,0.2);
	background: white;
	border-radius: 100px;
	transform: translateX(-50%) translateY(-50%);
}

.segment.register{
	height: 750px;
	position: relative;
	background: url("../pict/wallpaperbetter (1).jpg");
	background-attachment: fixed;
	background-position: 50% 50%;
}

.segment.register .segment-title{
	//background: green;
	height: 150px;
	position: relative;
	color: white;
}

.segment.register .overlay.mask{
	background: rgba(0,0,0,0.6);
}

.segment.register .title-text-holder{
	font-family: Harland;
	position: relative;
	font-size: 80px;
	align-items: flex-end;
	border: none;
}

.registration-item.rsvp{
	height: 500px;
	width: 600px;
	background: white;
	margin: auto;
	margin-top: 25px;
	font-size: 30px;
	position: relative;
	padding: 25px;
	font-family: SF;
}

.registration-form.error{
	font-size: 13px;
	color: red;
	text-align: center;
}

.registration-form.rsvp, .registration-form.input{
	height: 15%;
	//background: green;
	color: black;
	padding: 10px 0px;
}

.registration-form.input.textarea{
	height: 25%;
}

.registration-form.input.textarea textarea{
	font-family: SF;
}

.registration-input{
	width: 100%;
	background: white;
	border: 1px solid #ececec;
	padding: 0px 10px;
	height: 100%;
}

.registration-input.textarea{
	padding: 10px;
}

#send-rsvp, #rsvp-submitted{
	width: 200px;
	height: 50px;
	background: #BD945A;
	border: 1px solid #BD945A;
	color: white;
	cursor: pointer;
	transition: all .3s;
}

#rsvp-submitted{
	display: none;
}

.registration-item.rsvp.submitted #send-rsvp{
	display: none;
}

.registration-item.rsvp.submitted #rsvp-submitted{
	display: block;
}

#send-rsvp:hover{
	background: white;
	color: black;
}

.segment.footer{
	height: 200px;
}

.segment.messages{
	height: 500px;
	padding: 0px 50px;
	overflow: hidden;
	border-bottom: 1px solid rgba(0,0,0,0.12);
}

.message-item{
	width: 300px;
	height: 150px;
	//border:  1px solid rgba(0,0,0,0.12);
	margin-right: 25px;
	margin-bottom: 25px;
	opacity: 0;
	transition: all 1.5s;
}

.message-container-swiper{
	width: 100%;
	height: 100%;
}

.swiper-button-next, .swiper-button-prev{
	color: rgba(0,0,0,.3);
	transition: all .2s;
}

.swiper-button-next:hover, .swiper-button-prev:hover{
	color: rgba(0,0,0,.5);
}

.message-page{
	width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	overflow: auto;
	align-items: center;
	justify-content: center;
}

.message-page-holder{
	height: 95%;
}

.segment.messages.show .message-item{
	opacity: 1;
}

.message-item{
	padding: 0px 10px;
	font-family: SF;
	/*/color: white;*/
}

.message-name{
	height: 40%;
	border-bottom: 1px solid rgba(0,0,0,0.12);
	display: flex;
	font-size: 35px;
	align-items: center;
	font-family: Harland;
}

.message-text{
	height: 60%;
	padding: 10px 0px;
	font-size: 12px;
	overflow: auto;
}

.segment.footer .slide{
	position: relative;
	opacity: 0;
	transition: all 2s;
}

.segment.footer.show .slide{
	opacity: 1;
}

.segment.footer .fade{
	opacity: 0;
	transition: all 3.5s;
}

.segment.footer.show .fade{
	opacity: 1;
}

.footer-item{
	height: 20%;
	font-family: SF;
}

.footer-item.label{
	font-size: 22px;
	font-family: 'Cormorant Garamond', serif;	
}

.footer-item.date, .footer-item.quote{
	font-size: 14px;
	font-style: italic;
	font-family: 'Cormorant Garamond', serif;
}

.footer-item.quote{
	font-size: 14px;
	font-style: normal;
}

.footer-item.marks{
	font-size: 14px;
	font-family: SF;
	margin-top: 20px;
}


.progress-wrap {
    position: fixed;
    right: 60px;
    bottom: 60px;
    height: 60px;
    width: 60px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px rgb(95 58 252 / 20%);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

.progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.progress-wrap svg.progress-circle path {
    stroke: #2d3436;
    stroke-width: 4;
    box-sizing: border-box;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

svg{
	vertical-align: middle;
}

.progress-wrap::after {
    position: absolute;
    content: '\f176';
    font-family: "FontAwesome";
    text-align: center;
    line-height: 60px;
    font-size: 18px;
    color: #2c3941;
    left: 0;
    top: 0;
    height: 60px;
    width: 60px;
    cursor: pointer;
    display: block;
    z-index: 1;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

.progress-wrap.light::after {
	color: white;
}

.progress-wrap.light svg.progress-circle path {
	stroke: white;
}

.progress-wrap svg path {
    fill: none;
    transition: all 2s;
}

.progress-wrap.light svg path {
	fill: #2d3436;
}

.music-control{
	width: 60px;
	height: 60px;
	position: fixed;
	border: 1.5px solid black;
	border-radius: 50px;
	left: 60px;
	bottom: 60px;
	z-index: 10000;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	cursor: pointer;
}

.music-control.light{
	border: 1.5px solid white;
	color: white;
}

.music-control #play-music-btn{
	display: block;
}

.music-control #pause-music-btn{
	display: none;
}

.music-control.playing #play-music-btn{
	display: none;
}

.music-control.playing #pause-music-btn{
	display: block;
}

.welcome-page{
	position: fixed;
	top: 50%;
	left: 50%;
	width: 50%;
	transform: translateX(-50%) translateY(-50%);
	height: 100%;
	background: rgba(0,0,0,1);
	transition: top .8s, opacity .5s;
	width: 100%;
	z-index: 1000;
}

.welcome-page .bg.overlay{
	background: url('../pict/pre/LNK_0431.jpg');
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

body.start .welcome-page{
	top: -50%;
	overflow: hidden;
	opacity: 0;
}

.text-holder-welcome{
	height: 260px;
	width: 600px;
	position: absolute;
	left: 25%;
	color: black;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	z-index: 1000000;
	font-family: SF;
}

.text-holder-welcome.left{
	//background: red;
}

.text-holder-welcome>*{
	display: flex;
	align-items: center;
	justify-content: center;
}

.text-holder-welcome>.top{
	height: 50%;
	font-size: 45px;
	display: flex;
	align-items: center;
	opacity: 0;
	animation-name: opacityDisplay;
  	animation-duration: 2.5s;
  	animation-fill-mode: forwards;
}
.text-holder-welcome>.bottom{
	height: 35%;
	opacity: 0;
	animation-name: opacityDisplay;
  	animation-duration: 3s;
  	animation-fill-mode: forwards;
}

.text-holder-welcome>.marks{
	height: 15%;
	font-size: 13px;
	opacity: 0;
	animation-name: opacityDisplay;
  	animation-duration: 3.5s;
  	animation-fill-mode: forwards;
}

#button-open{
	background: gold;
	padding: 15px;
	color: black;
	font-family: SF;
	width: 60%;
	font-size: 15px;
	height: 50px;
	transition: all .5s;
}

#button-open:hover{
	opacity: 0.7;
}

body .music-control{
	display: none;
}
body.start .music-control{
	display: flex;
}

#timeline-hello.marked{
	background: rgb(223,183,140);
	color: white;
	transition: none;
}
/*# sourceMappingURL=main.css.map */