@import "media.less";
@import "font.css";
/* #region import font */
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Dancing+Script');
@import url('https://fonts.googleapis.com/css2?family=Rouge+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Scheherazade+New&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Monsieur+La+Doulaise&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter&family=Playfair+Display&display=swap');

/* #endregion import font */
/* #region Change Font */
.font-title{
	.scehe;
}
.font-body{
	.opsansreg;
}
.font-standard{
	.opsansreg;
}
.font-name{
	.butlerbold;
}
.fbody{
	.mont-reg;
}
.fbold{
	.butlerbold;
}
/* #endregion Change Font */
/* #region font */
.bebas{
	font-family: 'Bebas Neue', cursive;
	font-weight: normal;
	font-style: normal;
	display: swap;
}
.monsieur{
	font-family: 'Monsieur La Doulaise', cursive;
	font-weight: normal;
	font-style: normal;
}
.baskerville{
	font-family: 'Baskerville Normal';
	font-style: normal;
	font-weight: normal;
}
.scehe{
	font-family: 'Scheherazade New', serif;
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
.butlerreg{
	font-family: 'Butler';
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
.butlerbold{
	    font-family: 'Butler';
	    font-weight: bold;
	    font-style: normal;
	    font-display: swap;
}
.mont-light{
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
}
.mont-reg{
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
}
.pinyon{
	font-family: 'Pinyon Script', cursive;
	font-weight: 400;
	font-style: normal;
}
.roguescript{
	font-family: 'Rouge Script', cursive;
}

.dancingscript{
	font-family: 'Dancing Script', cursive;
	font-weight: 400;
	font-style: normal;
}
.opsansreg{
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-style: normal;
}
/* #endregion font */
/* #region Global Tags */
html{
	display: block;
 	scroll-behavior: smooth;
}
*, *::before, *::after {
    box-sizing: border-box;
}
body{
	-ms-overflow-style: none;
	/* IE and Edge */
	scrollbar-width: none;
	/* Firefox */	
	&::-webkit-scrollbar {
		display: none;
	}
	&.noscroll{
		height: 100%;
		overflow: hidden;
	}
	overflow-x: hidden;
}
img {
	height: auto;
	max-width: 100%;
}
a, a:hover, a:focus, a:active{
	text-decoration: none;
	outline:none;
}
a{
	font-size: 14px;
}
p{
	margin-bottom: 0;
}
/* #endregion Global Tags */
/* #region animation */
.zerop{
	padding-left:0;
	padding-right:0;
}
.zeropr{
	padding-right: 0;
}
.zerom{
	margin-left:0;
	margin-right:0;
}
.visible-xxs{
	display: none;
	.media-xxs({
		display: initial !important;	
	});
}
.hidden-xxs{
	display: initial;
	.media-xxs({
		display: none !important;	
	});
}
.animate{
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}
.animate-fast{
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.animate-long-delay{
	-webkit-webkit-transition-delay: 0.8s;
	-moz-webkit-transition-delay: 0.8s;
	-ms-webkit-transition-delay: 0.8s;
	-o-webkit-transition-delay: 0.8s;
	-webkit-transition-delay: 0.8s;
	transition-delay: 0.8s;
}
.animate-delay{
	-webkit-webkit-transition-delay: 0.5s;
	-moz-webkit-transition-delay: 0.5s;
	-ms-webkit-transition-delay: 0.5s;
	-o-webkit-transition-delay: 0.5s;
	-webkit-transition-delay: 0.5s;
   transition-delay: 0.5s;
}
.animate-fast-delay{
	-webkit-webkit-transition-delay: 0.2s;
	-moz-webkit-transition-delay: 0.2s;
	-ms-webkit-transition-delay: 0.2s;
	-o-webkit-transition-delay: 0.2s;
	-webkit-transition-delay: 0.2s;
   transition-delay: 0.2s;
}
.translate-off{
	-webkit-transform: translate(0, 0);
	-moz-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	-o-transform: translate(0, 0);
	transform: translate(0, 0);
}
.translatexy{
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.translatex{
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
}
.translatey{
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}
.grayscale-on{
	-webkit-filter: grayscale(100%) brightness(.8); /* Safari 6.0 - 9.0 */
	-moz-filter: grayscale(100%) brightness(.8);
	-ms-filter: grayscale(100%) brightness(.8);
	-o-filter: grayscale(100%) brightness(.8);
	filter: grayscale(100%) brightness(.8);
}
.grayscale-off{
	-webkit-filter: grayscale(0%) brightness(1); /* Safari 6.0 - 9.0 */
	-moz-filter: grayscale(0%) brightness(1);
	-ms-filter: grayscale(0%) brightness(1);
	-o-filter: grayscale(0%) brightness(1);
	filter: grayscale(0%) brightness(1);
}
.one-column{
	-webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
    -webkit-column-gap: 0px; /* Chrome, Safari, Opera */
    -moz-column-gap: 0px; /* Firefox */
    column-gap: 0px;
}
.two-column{
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 20px; /* Chrome, Safari, Opera */
    -moz-column-gap: 20px; /* Firefox */
    column-gap: 20px;
}
.rotate-cw{
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}
.rotate-ccw{
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
}
.captcha{
	-webkit-transform: scale(0.8);
	-ms-transform: scale(0.8);
	-o-transform: scale(0.8);
	transform: scale(0.8);
	-webkit-transform-origin: top left;
	-moz-transform-origin: top left;
	-ms-transform-origin: top left;
	-o-transform-origin: top left;
	transform-origin: top left;
}
.dark-on{
	-webkit-filter: grayscale(100%) brightness(0); /* Safari 6.0 - 9.0 */
	-moz-filter: grayscale(100%) brightness(0);
	-ms-filter: grayscale(100%) brightness(0);
	-o-filter: grayscale(100%) brightness(0);
	filter: grayscale(100%) brightness(0);
}
.white-on{
	-webkit-filter: grayscale(100%) brightness(3); /* Safari 6.0 - 9.0 */
	-moz-filter: grayscale(100%) brightness(3);
	-ms-filter: grayscale(100%) brightness(3);
	-o-filter: grayscale(100%) brightness(3);
	filter: grayscale(100%) brightness(3);
}
.white-off{
	-webkit-filter: grayscale(0%) brightness(1); /* Safari 6.0 - 9.0 */
	-moz-filter: grayscale(0%) brightness(1);
	-ms-filter: grayscale(0%) brightness(1);
	-o-filter: grayscale(0%) brightness(1);
	filter: grayscale(0%) brightness(1);
}
.appearance{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.bottomshadow {
  -webkit-box-shadow: 0px 0px 15px rgba(0,0,0,.7);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    0px 0px 15px rgba(0,0,0,.7);  /* Firefox 3.5 - 3.6 */
  box-shadow:         0px 0px 15px rgba(0,0,0,.7);  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
.slick-slider{
	margin-bottom: 0;
}
.body-text{
	
	font-size: 15px;
	
	line-height: 1.6;
}
.animated{
	visibility: visible !important;
}
.grecaptcha-badge{
	position: absolute;
	visibility: hidden;
	z-index: 0;
	opacity: 0;
}
.slick-dotted.slick-slider{
	margin-bottom: 0px !important;
}
.wow {
    visibility: hidden;
}
/* #endregion animation */
.ww-oh{
	overflow: hidden;
	backface-visibility: hidden;
	transform-style: preserve-3d;
	position: relative;
}
#butterfly{
	width: 100%;
	height: 100%;
	position: absolute;
	pointer-events: none;
	canvas {
	  position: relative;
	  width: 100% !important;
	  height: 100% !important; 
	  z-index: 6;
	}
}
#canvas{
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
	pointer-events: none;
	transform: rotate(180deg);
}
.dg.ac{
	opacity: 0;
	pointer-events: none;
	display: none;
}
.ww-image{
	backface-visibility: hidden;
	 transform-style: preserve-3d;
	 position: relative;
	&.ww-animation{
		-webkit-animation-name: ww-animation-photo;
	    -moz-animation-name: ww-animation-photo;
	    -o-animation-name: ww-animation-photo;
	    animation-name: ww-animation-photo;
	    animation-duration: 4s;
	    transform-origin: center;
	}
}
.ww-animation{
	backface-visibility: hidden;
	 transform-style: preserve-3d;
	 position: relative;
	&-text {
	    -webkit-animation-name: ww-animation-text;
	    -moz-animation-name: ww-animation-text;
	    -o-animation-name: ww-animation-text;
	    animation-name: ww-animation-text;
	    animation-duration: 1.2s;
	}
}
#ww-parent{
    position: relative;
    z-index: 2;
}
div.ww-date-date:nth-child(2) {
	margin: 0 20px;
}
div.ww-date-date:nth-child(3) {
	margin: 0 20px;
}
div.ww-date-date:nth-child(4) {
	margin: 0 20px;
}
.lp{
	&-triple{
		&-area{
			position: relative;
			padding-top: 50px;
			&-right{
				position: absolute;
				right: 0;
				z-index: 1;
				top: 0;
				img{
					width: 200px;
				}
			}
			&-left{
				position: absolute;
				left: 0;
				top: 0;
				z-index: 1;
				img{
					width: 200px;
				}
			}
			&-photos{
				display: flex;
				flex-flow: row wrap;
				justify-content: center;
				position: relative;
				z-index: 2;
				&-list{
					&:nth-child(1){
						width: 50%;
						height: 40vw;
						margin-bottom: 20px;
					}
					&:nth-child(2){
						width: 30%;
						height: 25vw;
						align-self: flex-end;
						margin-bottom: 20px;
						margin-left: 20px;
					}
					&:nth-child(3){
						width: 75%;
						height: 50vw;
						margin-left: 5%;
					}
					>div{
						width: 100%;
						height: 100%;
					}
					&-img{
						width: 100%;
						height: 100%;
						background-size: cover;
						background-repeat: no-repeat;
						background-position: center;
					}
				}
			}
		}
	}
}
.menu{
	
	.media-xs({
		
	});
	&-wrap{
		position: fixed;
		top: 15px;
		left: 32px;
		display: flex;
		z-index: 99;
		transform: rotate(90deg);
		transform-origin: top left;
		&-list{
			margin-right: 25px;
			.media-xxs({
				margin-right: 20px;	
			});
			a{
				color: #0f3c53;
				.fbody;
				font-size: 12px;
				.media-xxs({
					font-size: 12px;	
				});
			}
		}
	}
	&-date{
		position: fixed;
		right: 18px;
		top: 15px;
		z-index: 23;
		.media-xs({
			
		});
		img{
			width: 17px;
		}
		p{
			color: #0f3c53;
			line-height: 1;
			.scehe;
			font-size: 16px;
			span{
				font-size: 16px;
			}
		}
	}
}
.ww{
	/*position: absolute;
    overflow: hidden;
    z-index: 8;
    backface-visibility: hidden;
    transform-style: preserve-3d;*/
    width: 100%;
    &-accomodation{
    	padding: 0px 10% 0 10%;
    	overflow: hidden;
    	.media-sm({
    		padding: 0px 5%;
		});
		.media-xs({
    		padding: 0px 5%;
		});
    	&-title{
    		margin-bottom: 40px;
    		p{
    			font-size: 48px;
    			color: #8b5f3c;
    			.scehe;
    			line-height: 1;
    			text-align: center;
    			.media-xs({
    				font-size: 36px;	
				});
    		}
    	}
    	&-area{
    		display: flex;
    		align-items: flex-start;
    		justify-content: center;
    		flex-flow: row wrap;
    		width: 100%;
    		&-list{
    			width: 45%;
    			position: relative;
    			.media-sm({
    				width: 48%;	
				});
    			.media-xs({
    				width: 100%;
    				margin-left: 0 !important;
    				margin-right: 0 !important;
    				margin-bottom: 40px;
    				&:nth-child(2){
    					margin-bottom: 0 !important;
    				}
				});
    			.media-xxs({
    				
				});
    			&:nth-child(1){
    				margin-right: 5%;
    				.media-sm({
    					margin-right: 2%;	
					});
					.ww-accomodation-area-list-img{
						&:after{
							content: "";
							bottom: -2vw;
				   			left: -3vw;
				    		width: 16vw;
				    		height: 8vw;
				    		background-image: url("../images/km-flower-htopleft.png");
				    		background-repeat: no-repeat;
				    		background-size: contain;
				    		position: absolute;
				    		z-index: 5;
				    		.media-xs({
				    			bottom: -3vw;
				    			left: -4vw;
				    			width: 18vw;
				    			height: 13vw;	
			    			});
						}
						/*&:before{
							content: "";
							bottom: -2vw;
				   			right: -4vw;
				    		width: 15vw;
				    		height: 7vw;
				    		background-image: url("../images/km-flower-hbottomleft.png");
				    		background-repeat: no-repeat;
				    		background-size: contain;
				    		position: absolute;
				    		z-index: 5;
				    		.media-xs({
				    			bottom: -3vw;
			    			    right: -6vw;
			    			    width: 20vw;
			    			    height: 11vw;	
			    			});
						}*/
					}
    			}
    			&:nth-child(2){
    				margin-left: 5%;
    				.media-sm({
    					margin-left: 2%;	
					});
    				.ww-accomodation-area-list-img{
    					&:before{
    						content:"";
    						background-image: url("../images/km-flower-htopright.png");
    						background-repeat: no-repeat;
    						background-size: contain;
    						right: -2vw;
    					    bottom: -3vw;
    					    width: 8vw;
    						height: 15vw;
    						background-position: center bottom;
    						position: absolute;
    						z-index: 5;
    						.media-xs({
    							right: -6vw;
    						    bottom: -4vw;
    						    width: 15vw;
    						    height: 18vw;	
    						});
    					}
    				}
    				.media-xxs({
    					margin-left: 2.5%;	
					});
    			}
    			&-img{
    				position: relative;
    				height: 250px;
    				width: 100%;
    				background-size: cover;
    				background-repeat: no-repeat;
    				background-position: center;
    				margin-bottom: 20px;
    				.media-xs({
    					height: 200px;	
					});
    				.media-xxs({
    					height: 150px;	
					});
    			}
    			&-desc{
    				p{
    					.mont-reg;
    					font-size: 16px;
    					color: #6c6c6c;
    					text-align: center;
    					span{
    						font-weight: bold;
    					}
    					.media-xxxs({
    						font-size: 14px;	
						});
    				}
    			}
    		}
    	}
    }
    &-travel{
    	padding: 75px 5% 0 5%;
    	.media-sm({
    		padding: 75px 5% 0px 5%;	
    	});
    	.media-xs({
    		padding: 75px 5% 0px 5%;	
    	});
    	&-title{
    		margin-bottom: 50px;
    		p{
    			font-size: 38px;
    			color: #6c6c6c;
    			.scehe;
    			text-align: center;
    			line-height: 1;
    		}
    	}
    	&-area{
    		display: flex;
    		flex-flow: row wrap;
    		&-list{
    			width: 23.5%;
    			margin-left: 1%;
    			margin-right: 1%;
    			border: 1px solid #6c6c6c;
    			border-radius: 10px;
    			padding: 30px 10px 30px 10px;
    			
    			.media-lg({
    				&:nth-child(4n+1){
    					margin-left: 0;
    				}
    				&:nth-child(4n+4){
    					margin-right: 0;
    				}	
    			});
    			.media-md({
    				&:nth-child(4n+1){
    					margin-left: 0;
    				}
    				&:nth-child(4n+4){
    					margin-right: 0;
    				}	
    			});
    			.media-sm({
    				width: 49%;
    				margin-bottom: 30px;
    				&:nth-child(2n+1){
    					margin-left: 0;
    				}
    				&:nth-child(2n+2){
    					margin-right: 0;
    				}	
    			});
    			.media-xs({
    				width: 49%;
    				margin-bottom: 30px;
    				&:nth-child(2n+1){
    					margin-left: 0;
    				}
    				&:nth-child(2n+2){
    					margin-right: 0;
    				}	
    			});
    			.media-xxs({
    				width: 100%;
    				margin-bottom: 30px;
    				margin-left: 0 !important;
    				margin-right: 0 !important;
    			});
    			&-icon{
    				margin-bottom: 15px;
    				text-align: center;
    				img{
    					height: 50px;
    				}
    			}
    			&-title{
    				margin-bottom: 20px;
    				p{
    					text-align: center;
    					.scehe;
    					font-size: 22px;
    					line-height: 1;
    					color: #6c6c6c;
    				}
    			}
    			&-subtitle{
    				p{
    					font-size: 14px;
    					color: #6c6c6c;
    					text-align: center;
    					.mont-reg;
    				}
    			}
    			&-link{
    				text-align: center;
    				a,p{
    					cursor: pointer;
    					display: inline-block;
    					.font-body;
    					font-size: 14px;
    					color: white;
    					padding: 4px 30px;
    					background-color: #3d4f6e;
    					.animate-fast;
    					text-align: left;
    					&:hover{
    						background-color: #3d4f6e;
    						.animate-fast;
    					}
    					.media-xs({
    						font-size: 14px;	
    					});
    				}
    			}
    		}
    	}
    }
    &-inf{
    	padding: 0 10% 50px 10%;
    	display: flex;
    	flex-flow: row wrap;
    	.media-xs({
    		padding: 0 5% 50px 5%;
    	});
    	.media-xxs({
    		padding: 0 0 0px 0;
    	});
    	&-list{
    		width: 50%;
    		.media-xxs({
    			width: 100%;	
    		});
    		&:nth-child(1){
    			border-right: 1px solid #d5d2ce;
    			padding-right: 20px;
    			.media-xxs({
    				border-right: none;
    				padding-right: 0 !important;	
    			});
    			.ww-inf-list{
    				&-title{
    					.media-xxs({
    						padding-left: 10%;
    						&:before{
    							content: "";
    							position: absolute;
    							height: 1px;
    							background-color: #6c6c6c;
    							width: calc(90% ~'-' 130px);
    							top: 18px;
    							right: 0;
    						}
    					});
    					p{
    						text-align: right;
    						.media-xxs({
    							text-align: left;	
    						});
    					}
    				}
    				&-subtitle{
    					.media-xxs({
    						padding-left: 10%;	
    					});
    					p{
    						text-align: right;
    						.media-xxs({
    							text-align: left;	
    						});
    					}
    				}
    				&-item{
    					text-align: right;
    					.media-xxs({
    						text-align: left;
    						padding-left: 10%;	
    					});
    					&-point{
    						a{
    							justify-content: flex-end;
    							.media-xxs({
    								justify-content: flex-start;									
    							});
    							img{
    								order: 2;
    								margin-left: 10px;
    								.media-xxs({
    									margin-left: 0;
    									margin-right: 10px;
    									order: 1;	
    								});
    							}
    							span{
    								.media-xxs({
    									order: 2;	
    								});
    							}
    						}
    					}
    				}
    			}
    		}
    		&:nth-child(2){
    			padding-left: 20px;
    			.media-xxs({
    				padding-left: 0 !important;
    			});
    			.ww-inf-list{
    				.media-xxs({
    					padding-right: 10%;
    				});
    				&-title{
    					.media-xxs({
    						text-align: right;
    						padding-right: 10%;
    						&:before{
    							content: "";
    							position: absolute;
    							height: 1px;
    							background-color: #6c6c6c;
    							width: calc(90% ~'-' 210px);
    							top: 18px;
    							left: 0;
    						}	
    					});
    					p{
    						text-align: left;
    						.media-xxs({
    							text-align: right;	
    						});
    					}
    				}
    				&-subtitle{
    					.media-xxs({
    						padding-right: 10%;
    					});
    					p{
    						text-align: left;
    						.media-xxs({
    							text-align: right;	
    						});
    					}
    				}
    				&-item{
    					text-align: left;
    					.media-xxs({
    						justify-content: flex-end;
    						display: flex;
    						flex-flow: row wrap;
    						padding-right: 10%;
    					});
    					&-point{
    						text-align: left;
    						.media-xxs({
    							text-align: right;
    							width: 100%;
    						});
    						a{
    							justify-content: flex-start;
    							.media-xxs({
    								justify-content: flex-end;									
    							});
    							span{
    								order: 2;
    								.media-xxs({
    									order: 1;	
    								});
    							}
    							img{
    								order: 1;
    								margin-right: 10px;	
    								.media-xxs({
    									order: 2;
    									margin-right: 0;
    									margin-left: 10px;	
    								});
    							}
    						}
    					}
    				}
    			}
    		}
    		&-title{
    			margin-bottom: 15px;
    			position: relative;
    			margin-bottom: 40px;
    			img{
    				width: 140px;
    				.media-xxs({
    					width: 125px;	
    				});
    			}
    			p{
    				color: #6c6c6c;
    				font-size: 38px;
    				.scehe;
    				text-align: left;
    				line-height: 1;
    				.media-xs({
    					font-size: 32px;	
					});
    				.media-xxs({
    					display: inline-block;			
    				});
    				
    			}
    		}
    		&-subtitle{
    			margin-bottom: 20px;
    			p{
    				color: #6c6c6c;
    				font-size: 16px;
    				text-align: left;
    				line-height: 1.3;
    				.mont-reg;
    			}
    		}
    		&-item{
    			padding-bottom: 40px;
    			&-point{
    				margin-bottom: 10px;
    				a{
    					display: flex;
    					align-items: center;
    					color: #6c6c6c;
    					font-size: 16px;
    					line-height: 1.3;
    					.mont-reg;
    					.media-xxs({
    						align-items: flex-start;	
    					});
    					img{
    						width: 14px;
    					}
    				}
    			}
    		}
    	}
    	&-area{
    		display: flex;
    		flex-flow: row wrap;
    		width: 100%;
    		margin-top: 50px;
    		justify-content: center;
    		&-list{
    			&:nth-child(1){
    				margin-right: 30px;
    			}
    			a{
    				display: inline-block;
    				text-align: center;
    				border: 1px solid #d9c391;
    				color: #d9c391;
    				.mont-reg;
    				font-size: 16px;
    				padding: 10px 40px;
    			}
    		}
    	}
    }
    &-lovestory{
    	margin-top: 50px;
    	padding: 0px 20% 0 20%;
    	display: flex;
    	flex-flow: row wrap;
    	.media-xs({
    		padding: 0px 10% 0 10%;	
		});
    	&-img{
    		width: 50%;
    		.media-xxs({
    			width: 70%;	
			});
    	}
    	&-content{
    		width: 70%;
    		margin-top: 10vw;
    		margin-left: -20%;
    		.media-xxs({
    			width: 100%;
    			margin-top: -75px;
    			margin-left: 0;	
    			padding-left: 10%;
			});
    		p{
    			font-size: 16px;
    			line-height: 1.6;
    			.mont-reg;
    			color: #6c6c6c;
    		}
    	}
    	
    }
    &-lovestory2{
    	padding: 0px 40% 50px 10%;
    	.media-xs({
    		padding: 0px 20% 50px 10%;	
		});
    	p{
    		font-size: 16px;
    		line-height: 1.6;
    		.mont-reg;
    		color: #6c6c6c;
    	}
    }
    &-photos{
    	padding: 50px 10% 0 10%;
    	.media-xs({
			padding: 50px 5% 0 5%;
		});
    	&-area{
    		display: flex;
    		align-items: center;
    		&-list{
    			width: 32%;
    			height: 400px;
    			margin-left: 1%;
    			margin-right: 1%;
    			&:nth-child(3n+1){
    				margin-left: 0;
    			}
    			&:nth-child(3n+3){
    				margin-right: 0;
    			}
		    	.media-xs({
					height: 300px;
				});
    			div{
    				width: 100%;
    				height: 100%;
    				background-repeat: no-repeat;
    				background-size: cover;
    				background-position: center;
    			}
    		}
    	}
    }
    &-opening{
    	padding: 0 0 50px 10%;
    	&-area{
    		position: relative;
    		display: flex;
    		flex-flow: row wrap;
    		padding: 50px 10% 0 0;
    		&:before{
    			content: "";
    			position: absolute;
    			top: 0;
    			right: 0;
    			width: 90%;
    			height: 80%;
    			background-color: #98a995;
    			z-index: 2;
    		}
    		&-img{
    			width: 70%;
    			height: 400px;
    			position: relative;
    			z-index: 3;
    			div{
    				width: 100%;
    				height: 100%;
    				background-repeat: no-repeat;
    				background-position: center;
    				background-size: cover;
    			}
    		}
    		&-text{
    			width: 30%;
    			position: relative;
    			z-index: 3;
    			
    		}
    	}
    }
    &-groom{
    	display: flex;
    	flex-flow: row wrap;
    	align-items: center;
    	padding: 0 5%;
    	justify-content: flex-end;
    	&-image{
    		width: 40%;
    		height: 55vw;
    		position: relative;
    		z-index: 2;
    		margin-right: 10%;
    		border-top-right-radius: 20vw;
    		border-bottom-right-radius: 20vw;
    		.media-xs({
    			height: 60vw;
    		});
    		.media-xxs({
    			height: 70vw;
    			width: 50%;
    			margin-right: 0;
    		});
    		&-wrap{
    			background-size: cover;
    			background-repeat: no-repeat;
    			background-position: center;
    			border-top-right-radius: 20vw;
    			border-bottom-right-radius: 20vw;
    			height: 100%;
    			width: 100%;
    			img{
    				border-radius: 20px;
    			}
    		}
    	}
    	&-content{
    		width: 50%;
    		padding-right: 10%;
    		padding-left: 10%;
    		position: relative;
    		z-index: 3;
    		align-self: flex-start;
    		padding-top: 30px;
    		.media-xs({
    			padding-left: 0;
    			padding-top: 10px;
    		});
    		.media-xxs({
    			padding-right: 10px;
    		});
    		&-ig{
    			margin-top: 30px;
    			img{
    				width: 20px;
    			}
    		}
    	}
    }
    &-bride{
    	display: flex;
    	flex-flow: row wrap;
    	align-items: center;
    	padding: 0 5%;
    	justify-content: flex-start;
    	margin-top: -25vw;
    	margin-bottom: 50px;
    	margin-right: -1px;
    	.media-xs({
    		margin-top: -25vw;
    	});
    	.media-xxs({
    		margin-top: -25vw;
    	});
    	&-image{
    		margin-left: 10%;
    		width: 40%;
    		height: 55vw;
    		position: relative;
    		z-index: 2;
    		border-top-left-radius: 20vw;
    		border-bottom-left-radius: 20vw;
    		.media-xs({
    			height: 60vw;
    		});
    		.media-xxs({
    			height: 70vw;
    			width: 50%;
    			margin-left: 0;
    		});
    		&-wrap{
    			background-size: cover;
    			background-repeat: no-repeat;
    			background-position: center;
    			height: 100%;
    			width: 100%;
    			border-top-left-radius: 20vw;
    			border-bottom-left-radius: 20vw;
    			img{
    				border-radius: 20px;
    			}
    		}
    	}
    	&-content{
    		width: 50%;
    		z-index: 3;
    		position: relative;
    		padding-left: 10%;
    		padding-right: 10%;
    		align-self: flex-end;
    		padding-bottom: 50px;
    		.media-xs({
    			padding-bottom: 20px;
    			padding-right: 0;
    		});
    		.media-xxs({
    			padding-left: 20px;
    		});
    		&-ig{
    			margin-top: 30px;
    			text-align: right;
    			img{
    				width: 20px;
    			}
    		}
    	}
    }
    &-shuttle{
    	padding: 50px 10% 50px 10%;
    	overflow: hidden;
    	.media-xxs({
    		padding: 75px 5% 75px 5%;
		});
    	&-title{
    		margin-bottom: 40px;
			padding-bottom: 25px;
    		p{
    			font-size: 48px;
    			color: #8b5f3c;
    			.font-title;
    			line-height: 1;
    			text-align: center;
    			.media-xs({
    				font-size: 36px;	
				});
    		}
    	}
    	&-info{
    		width: 100%;
    		text-align: center;
    		img{
    			max-width: 300px;
    			margin-bottom: 20px;
    		}
    		p{
    			text-align: center;
    			.mont-reg;
    			font-size: 16px;
    			color: #6c6c6c;
    			width: 65%;
    			margin-left: auto;
    			margin-right: auto;
    			.media-xs({
    				width: 100%;	
				});
    		}
    	}
    	&-link{
			text-align: center;
			margin-top: 20px;
			p,a{
				cursor: pointer;
				display: inline-block;
				.font-body;
				font-size: 14px;
				color: white;
				padding: 4px 30px;
				background-color: #08232a;
				.animate-fast;
				text-align: left;
				&:hover{
					background-color: #08232a;
					.animate-fast;
				}
				.media-xs({
					font-size: 14px;	
				});
			}
		}
    }
    &-float{
    	&.one{
	    	.ww-float-gift{
	    		position: fixed;
	    		.translatex;
	    		.animate-fast;
	    		left: 50%;
	    		z-index: 10;
	    		width: 50%;
	    		background-color: rgba(153, 144, 129,0.9);
	    		color: white;
	    		font-size: 18px;
	    		padding: 8px 10px;
	    		text-align: center;
	    		display: block;
	    		cursor: pointer;
	    		bottom: 10px;
	    		&.noshow{
	    			bottom: -75px;
	    			.animate-fast;
	    		}
	    		.media-lg({
	    			width: 300px;	
				});
				.media-xs({
	    			width: 90%;	
				});
	    	}
    	}
    	&.two{
	    	.ww-float-gift{
	    		position: fixed;
	    		.animate-fast;
	    		z-index: 10;
	    		width: 32.5%;
	    		background-color: rgba(153, 144, 129,0.9);
	    		color: white;
	    		font-size: 18px;
	    		padding: 8px 10px;
	    		text-align: center;
	    		display: block;
	    		cursor: pointer;
	    		bottom: 10px;
	    		&:nth-child(1){
	    			left: 15%;
	    		}
	    		&:nth-child(2){
	    			right: 15%;
	    		}
	    		&.noshow{
	    			bottom: -75px;
	    			.animate-fast;
	    		}
	    		.media-lg({
	    			width: 22.5%;
	    			&:nth-child(1){
	    				left: 25%;
	    			}
	    			&:nth-child(2){
	    				right: 25%;
	    			}
				});
				.media-xs({
	    			width: 42.5%;
	    			&:nth-child(1){
	    				left: 5%;
	    			}
	    			&:nth-child(2){
	    				right: 5%;
	    			}
				});
	    	}
    	}
    }
    &-menu{
    	position: fixed;
    	top: 0;
    	padding-top: 10px;
    	padding-bottom: 10px; 
    	display: flex;
    	justify-content: center;
    	width: 100%;
    	z-index: 15;
    	opacity: 1;
    	.animate-fast;
		color: #000000;
    	&.affix{
    		.animate-fast;
    		pointer-events: initial;
    		opacity: 1;
    		background-color: rgba(153, 144, 129,0.9);
    		a,p{
    			color: white;
    			text-shadow: none;
    		}
    	}
    	.media-xxs({
    	
    	});
    	&-list{
    		margin-right: 25px;
    		margin-left: 25px;
    		.media-xs({
    			margin-left: 10px;
    			margin-right: 10px;	
    		});
    		a,p{
    			color: black;
    			.scehe;
    			font-size: 14px;
    			cursor: pointer;
    			.media-xxs({
    				font-size: 14px;	
    			});
    			.media-xxxs({
    				font-size: 12px;	
				});
    		}
    	}
    }
    &-wrapper{
    	background-image: url("../images/at-pattern2-soft.png");
    	background-repeat: repeat;
    	background-size: 800px;

    }
    &-wrapper2{
    	background-image: url("../images/cover-portrait-old.jpg");
    	background-size: cover;
    	background-repeat: no-repeat;
    	background-position: center;
    	background-color: #f1f2f4;
		position: relative;
    	.media-xs({
		
		});
    	.media-xxs({
			
		});
		
    }
    &-wrapper3{
    	background-image: url("../images/cover-portrait-old.jpg");
    	background-size: cover;
    	background-repeat: no-repeat;
    	background-position: center;
    	background-color: #f1f2f4;
    	.media-xxs({
    		background-image: url("../images/cover-portrait-old.jpg");
    		background-size: cover;
		});
    }
    &-wrapper4{
    	background-image: url("../images/rj-flower-04.svg"),
    						url("../images/cover-portrait-old.jpg");
    	background-size: 500px, cover;
    	background-repeat: no-repeat;
    	background-position: bottom left, bottom center;
    	background-color: #f1f2f4;
    	.media-xs({
			background-size: 400px, cover;
		});
    }
    &-bg{
    	padding: 200px 0;
    	background-color: #e1ead3;
    	border-top-left-radius: 30vw;
    	margin-top: -200px;
    	background-image: url("../images/im-flower-rightbottom.png");
    	background-repeat: no-repeat;
    	background-position: right bottom;
    	background-size: 400px;
    	.media-xs({
    		background-size: 250px;	
    		padding: 100px 0;
    		margin-top: -90px;
		});
    }
	&-header{
		display: flex;
		align-items: center;
		padding: 50px 10%;
		position: relative;
		background-image: url("../images/al-flower-br.svg");
		background-position: right bottom;
		background-size: 400px;
		background-repeat: no-repeat;
		.media-sm({
			background-size: 400px;
		});
		.media-xs({
			background-size: 300px;
			padding: 50px 5%;
		});
		.media-xxs({
			background-size: 200px;
			padding: 50px 3%;
		});
		&-name{
			width: 70%;
			order: 2;
			padding-left: 50px;
			text-align: center;
			margin-left: -15%;
			z-index: 3;
			.media-lg({
				padding-left: 10%;	
			});
			.media-xs({
				padding-left: 10px;	
			});
			img{
				width: 45vw;
				.media-lg({
					width: 45vw;
				});
				.media-xs({
					width: 45vw;
				});

			}
			&-subtitle{
				transform: rotate(-5deg);
				margin-top: -30px;
				.media-xs({
					margin-top: -15px;	
				});
				.media-xxs({
					margin-top: -5px;	
				});
				p{
					.font-standard;
					text-align: right;
					color: #193836;
					font-size: 12px;
					font-style: italic;
					.media-xxs({
						font-size: 10px;
					});
				}
			}
		}
		&-carousel{
			position: relative;
			width: 45%;
			height: 100%;
			z-index: 2;
			order: 1;
			.media-md({
				width: 52%;	
			});
			.media-sm({
				width: 60%;	
			});
			.media-xs({
				width: 90%;	
			});
		}
		
	}
    &-video{
    	position: fixed;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    	z-index: 2;
    	&.start{
    		position: relative;
    	}
    	&-area{
    		display: flex;
    		flex-flow: row wrap;
    		min-height: 100vh;
    		align-items: center;
    		justify-content: center;
    		position: relative;
    		// .media-sm({
    		// 	min-height: 75vh;	
			// });
    		// .media-xs({
    		// 	min-height: 75vh;	
			// });
    		&.justwish{
    			.ww-video-area-content-open{
    				bottom: 150px;
    			}
    			.ww-video-area-arrow{
    				padding-bottom: 150px;
    			}
    		}
    		&-content{
    			padding-top: 75px;
    			z-index: 3;
    			width: 100%;
    			height: 100%;
    			flex-flow: row wrap;
    			align-self: flex-start;
    			width: 100%;
    			
    			&-logo{
    				align-self: center;
    				text-align: center;
    				position: absolute;
    				left: 50%;
    				top: 40%;
    				.translatexy;
    				img{
    					width: 150px;
    					.media-xxs({
    						width: 150px;	
						});
    				}
    			}
    			&-title{
    				position: absolute;
    				left: 50%;
    				.translatexy;
    				bottom: 100px;
    				width: 100%;
    				z-index: 4;
    				.media-xxs({
    					bottom: 120px;	
					});
    				p{
    					color: #3d4f6e;
    					.mont-reg;
    					text-align: center;
    					font-size: 14px;
    					letter-spacing: 2px;
    				}
    			}
    			&-open{
    				position: absolute;
    				left: 50%;
    				.translatexy;
    				bottom: 80px;
    				width: 100%;
    				.media-xxs({
    					bottom: 120px;	
					});
    				p{
    					color: white;
    					.mont-light;
    					text-align: center;
    					font-size: 14px;
    				}
    			}
    		}
    		&-overlay{
    			background-color: rgba(255, 250, 245, 0.85);
    			position: absolute;
    			left: 0;
    			top: 0;
    			width: 100%;
    			z-index: 2;
    			height: 100%;
    		}
    		&-img{
    			position: absolute;
    			width: 100%;
    			height: 100%;
    			left: 0%;
    			
    			top: 0;
    			z-index: 1;
    			overflow: hidden;
    			.ww-image{
    				width: 100%;
    				height: 100%;
	    			background-size: cover;
	    			background-repeat: no-repeat;
	    			background-position: top center;
	    			background-image: url("../images/cover-landscape.jpg");
	    			.media-xxs({
		    			background-image: url("../images/cover-portrait.jpg");		
					});
    			}
    		}
    		&-bg{
    			width: 100%;
    			height: 100px;
    			position: absolute;
    			bottom: -1px;
    			left: 0;
    			z-index: 2;
    			opacity: 1;
    			background: rgb(0,0,0);
    			background: linear-gradient(0deg, rgba(255,236,238,1) 0%, rgba(255,236,238,0) 100%, rgba(204,133,165,1) 185%, rgba(252,214,15,1) 230%);
    			.media-xxs({
    				
				});
    		}
    		/*&-vid{
    			position: absolute;
    			width: 100%;
    			height: 50%;
    			left: 0%;
    			bottom: ;
    			background: rgb(0,0,0);
    			background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%, rgba(204,133,165,1) 185%, rgba(252,214,15,1) 230%);
    			top: 0;
    			z-index: 1;
    			overflow: hidden;
    		}*/
    		&-arrow{
    			position: relative;
    			z-index: 3;
    			width: 100%;
    			position: relative;
    			align-self: flex-end;
    			padding-bottom: 100px;
				.media-xxs({
					padding-bottom: 120px;	
				});
    			#startWebsite{
    				a{
    					display: block;
    					width: 100%;
    					position: absolute;
    					bottom: 0;
    					height: 100vh;
    					left: 0;
    					z-index: 5;
    					.media-xxs({
    						
    					});
    				}
    			}
    			#section07 a {
    			  padding-top: 80px;
    			}
    			#section07 a span {
    			  position: absolute;
    			  top: 0;
    			  left: 50%;
    			  width: 24px;
    			  height: 24px;
    			  margin-left: -12px;
    			  border-left: 1px solid #3c4e6e;
    			  border-bottom: 1px solid #3c4e6e;
    			  -webkit-transform: rotate(-45deg);
    			  transform: rotate(-45deg);
    			  -webkit-animation: sdb07 2s infinite;
    			  animation: sdb07 2s infinite;
    			  opacity: 0;
    			  box-sizing: border-box;
    			}
    			#section07 a span:nth-of-type(1) {
    			  -webkit-animation-delay: 0s;
    			  animation-delay: 0s;
    			}
    			#section07 a span:nth-of-type(2) {
    			  top: 16px;
    			  -webkit-animation-delay: .15s;
    			  animation-delay: .15s;
    			}
    			#section07 a span:nth-of-type(3) {
    			  top: 32px;
    			  -webkit-animation-delay: .3s;
    			  animation-delay: .3s;
    			}
    			@-webkit-keyframes sdb07 {
    			  0% {
    			    opacity: 0;
    			  }
    			  50% {
    			    opacity: 1;
    			  }
    			  100% {
    			    opacity: 0;
    			  }
    			}
    			@keyframes sdb07 {
    			  0% {
    			    opacity: 0;
    			  }
    			  50% {
    			    opacity: 1;
    			  }
    			  100% {
    			    opacity: 0;
    			  }
    			}

    		}
    	}
    }
    &-live{
    	display: block;
    	padding: 0 10% 50px 10%;
    	.media-xxs({
    		padding: 0 5% 25px 5%;	
		});
    	&-cover{
    		img{
    			width: 100%;
    		}
    	}
    	&-wrap{
    		position: relative;
    		padding-top: 55.7%;
    		iframe{
    			position: absolute;
    			top: 0;
    			left: 0;
    			z-index: 2;
    			width: 100%;
    			height: 100%;
    		}
    	}
    }
	&-welcome{
		display: block;
		width: 40%;
		margin-left: 60%;
		padding: 50px 0;
		p{
			line-height: 1.3;
			.font-standard;
			font-size: 12px;
		}
	}
	&-story{
		display: block;
		padding: 50px 10%;
		background-image: url("../images/white-flower-right.png");
		background-size: 300px;
		background-position: right bottom;
		background-repeat: no-repeat;
		.media-xs({
			padding: 50px 10%;	
		});
		&-area{
			display: flex;
			flex-flow: row wrap;
			&-text{
				width: calc(50% ~'+' 30px);
				padding-left: 30px;
				max-width: 400px;
				.media-sm({
					width: 45%;
				});
				.media-xs({
					width: 100%;
					padding-left: 0px;
				});
				
				&-love{
					margin-top: 30px;
					p{
						.font-standard;
						font-size: 14px;
						line-height: 1.3;
						color: #193836;
						.media-lg({
							font-size: 16px;
						});
						.media-xxs({
							font-size: 14px;	
						});
					}
				}
			}
			&-image{
				width: calc(50% ~'-' 30px);
				.media-sm({
					width: 55%;
				});
				.media-xs({
					width: 100%;	
				});
				.ww-oh{
					/*&:nth-child(1){
						.ww-story-area-image-wrap{
							height: 30vw;
							width: 90%;
							.media-lg({
								height: 25vw;	
							});
							.media-xxs({
								height: 50vw;	
							});
						}
						
					}*/
					&:nth-child(1){
						z-index: 3;
						height: 600px;
						width: 100%;
						margin-top: -25px;
						max-width: 400px;
						margin-left: auto;
						margin-right: auto;
						.media-xs({
							width: 100%;	
						});
						.ww-story-area-image-wrap{
							background-position: top center;
							width: 100%;
							height: 100%;
						}
					}
				}
				&-wrap{
					background-size: cover;
					background-position: center;
					background-repeat: no-repeat;
					position: relative;
					
				}
			}
		}
	}
	&-logo{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30px 10% 30px 10%;
		position: relative;
		
		.media-xs({
			padding: 0px 10% 0px 10%;
		});
		img{
			width: 600px;
			.media-xs({
				width: 400px;
			});
		}
	}
	&-logogram{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0px 10% 50px 10%;
		img{
			width: 200px;
			.media-xs({
				width: 150px;
			});
		}
	}
	&-parents{
		display: block;
		padding: 0px 5% 0px 5%;
		.media-lg({
			padding: 0px 15% 0px 15%;
		});
		.media-md({
		});
		.media-sm({
		});
		.media-xs({
			padding: 0px 5% 0px 5%;
		});
		.media-xxs({
			
		});
		&-wrap{
			padding-top: 75px;
			width: 100%;
			position: relative;
		}
		&-img{
			text-align: center;
			margin-bottom: 30px;
			img{
				width: 100px;
			}
		}
		p{
			color: #6c6c6c;
			.mont-light;
			text-align: center;
			font-size: 16px;
			text-transform: uppercase;
			.media-xs({
				font-size: 14px;	
			});
			.media-xxs({
				font-size: 13px;	
			});
			span{
				color: #a89069;
				.scehe;
				line-height: 1.3;
				font-size: 20px;
				.media-xs({
					font-size: 18px;
				});
				.media-xxs({
					font-size: 5.5vw;
				});
			}
			img{
				width: 40px;
			}
			
		}
	}
	&-gift{
		display: block;
		padding: 50px 10% 50px 10%;
		width: 100%;
		background-color: #c2ceb3;
		margin-bottom: -1px;
		text-align: center;
		&-title{
			margin-bottom: 20px;
			p{
				font-size: 32px;
				color: #d9c391;
				.font-title;
				line-height: 1;
				text-align: center;
			}
		}
		&-subtitle{
			margin-bottom: 40px;
			p{
				font-size: 16px;
				padding-right: 2px;
				color: #d9c391;
				.mont-reg;
				text-align: center;
			}
		}
		&-link{
			background-color: #d9c391;
    		color: white;
    		font-size: 14px;
    		padding: 5px 20px;
    		text-align: center;
    		display: inline-block;
    		cursor: pointer;
    		.mont-reg;
		}
	}
	&-hashtag{
		display: block;
		padding: 0px 10% 75px 10%;
		width: 100%;
		position: relative;
		text-align: center;
		.media-lg({
		
		});
		.media-xs({
			
		});
		.media-xxs({
			
		});
		img{
			width: 20px;
			margin-bottom: 20px;
		}
		p,a{
			text-align: center;
			font-size: 28px;
			.scehe;
			font-style: italic;
			color: #6c6c6c;
			display: inline-block;
			position: relative;
			z-index: 3;
			.media-xs({
					
			});
			.media-xxs({
				font-size: 7vw;	
			});
		}
	}
	&-event{
		display: flex;
		flex-flow: row wrap;
		&-right{
			width: 60%;
			background-image: url("../images/sa-flower-leftbig-dark.png");
			background-size: 300px;
			background-position: left bottom;
			background-repeat: no-repeat;
			display: flex;
			flex-flow: row wrap;
			.media-lg({
				background-size: 350px;
			});
			.media-xs({
				background-size: 250px;
				width: 70%;
			});
			.media-xxs({
				background-size: 200px;	
			});
		}
		&-left{
			width: 100%;
			height: 150px;
			position: relative;
			display: flex;
			transform: skew(0deg, -3deg);
			margin-bottom: 20px;
			.media-lg({
				transform: skew(0deg, -2deg);
				height: 250px;
			});
			.media-md({
				transform: skew(0deg, -2deg);
				height: 200px;
			});
			.media-sm({
				
			});
			.media-xs({
				
			});
			.media-xxs({
				
			});
			&-image{
				width: 100%;
				height: 100%;
				&-wrap{
					width: 100%;
					height: 100%;
					background-size: cover;
					background-repeat: no-repeat;
					background-position: center left;
					/*background-attachment: fixed;*/
					.media-xxs({
						background-position: center;	
					});
				}
			}
			&-countdown{
				position: absolute;
				left: 0px;
				bottom: 15px;
				z-index: 2;
				width: 100%;
				&-time{
					display: flex;
					flex-flow: row wrap;
					align-items: center;
					justify-content: stretch;
					height: 100%;
					&-item{
						width: 100%;
						
						flex-flow: row wrap;
						margin-top: 10px;
						margin-bottom: 10px;
						&-wrap{
							transform: rotate(-90deg);
							width: 60px;
							text-align: center;
						}
						&-number{
							display: inline-block;
							color: white;
							font-size: 22px;
							.fbody;
							line-height: 1;
							text-shadow: 0px 2px 2px black;
						}
						&-label{
							display: block;
							color: white;
							font-size: 12px;
							.fbody;

							line-height: 1;
							text-shadow: 0px 2px 2px black;
						}
						p{
							display: inline-block;
							color: white;
							font-size: 24px;
							.fbody;
						}
					}
				}
			}
		}
		&-engagement{
			width: 100%;
			padding-top: 50px;
			padding-left: 15%;
			margin-bottom: 20px;
			.media-md({
				padding-top: 30px;	
			});
			.media-sm({
				padding-top: 20px;
				padding-left: 10%;	
			});
			.media-xs({
				padding-left: 10%;	
				padding-right: 20px;
				padding-top: 0;
			});
			&-title{
				text-align: left;
				margin-bottom: 15px;
				img{
					width: 300px;
					.media-xs({
						width: 250px;	
					});
				}
				p{
					font-size: 40px;
					color: #a35f2d;
					.pinyon;
					.media-sm({
						font-size: 36px;	
					});
					.media-xs({
						font-size: 36px;	
					});
				}
			}
			&-content{
				position: relative;
				padding-top: 10px;
				margin-bottom: 10px;
				/*&:after{
					content: "";
					position: absolute;
					left: 0;
					top: 0;
					width: 50px;
					background-color: #6c6c6c;
					height: 2px;
				}*/
				&-venue{
					p{
						color: #6c6c6c;
						.fbody;
						text-align: left;
						font-size: 16px;
						margin-bottom: 0px;
						.media-xxs({
							font-size: 14px;	
						});
					}
				}
				&-time{
					p{
						color: #6c6c6c;
						.fbody;
						text-align: left;
						font-size: 16px;
						.media-xxs({
							font-size: 14px;	
						});
					}
				}
			}
			&-link{
				margin-top: 10px;
				a{
					color: white;
					background-color: #a35f2d;
					padding: 5px 20px;
					display: inline-block;
					font-size: 12px;
					.font-standard;
					&:hover{
						background-color: #a35f2d;
					}
				}
			}
		}
		&-wedding{
			width: 100%;
			align-self: flex-end;
			padding-bottom: 50px;
			padding-right: 15%;
			text-align: right !important;
			.media-lg({
				
			});
			.media-sm({
				padding-bottom: 20px;
			});
			.media-xs({
				padding-left: 0;
				padding-bottom: 10vw;
			});
			&-title{
				text-align: right;
				margin-bottom: 15px;
				img{
					width: 300px;
				}
				p{
					font-size: 40px;
					color: #a35f2d;
					.pinyon;
					.media-sm({
						font-size: 36px;	
					});
					.media-xs({
						font-size: 36px;	
					});
				}
			}
			&-content{
				position: relative;
				padding-top: 10px;
				/*&:after{
					content: "";
					position: absolute;
					right: 0;
					top: 0;
					width: 50px;
					background-color: #193836;
					height: 2px;
				}*/
				&-venue{
					p{
						color: #193836;
						.fbody;
						text-align: right;
						font-size: 16px;
						margin-bottom: 0px;
						.media-xs({
							text-align: right !important;	
						});
						.media-xxs({
							font-size: 14px;	
						});
					}
				}
				&-time{
					p{
						color: #193836;
						.fbody;
						text-align: right;
						font-size: 16px;
						.media-xs({
							text-align: right !important;	
						});
						.media-xxs({
							font-size: 14px;	
						});
					}
				}
			}
			&-link{
				a{
					color: white;
					background-color: #c8a2c8;
					padding: 2px 5px;
					display: inline-block;
					font-size: 10px;
					.font-standard;
				}
			}
		}
		&-gift{
			width: 100%;
			align-self: flex-end;
			padding: 0px 0 100px 0;
			.media-lg({
				
			});
			.media-sm({
			});
			.media-xs({

			});
			&-title{
				text-align: center;
				margin-bottom: 15px;
				img{
					width: 300px;
				}
				p{
					font-size: 48px;
					color: #a35f2d;
					.pinyon;
				}
			}
			&-content{
				position: relative;
				padding-top: 10px;
				/*&:after{
					content: "";
					position: absolute;
					right: 0;
					top: 0;
					width: 50px;
					background-color: #193836;
					height: 2px;
				}*/
				&-venue{
					p{
						color: #193836;
						.fbody;
						text-align: center;
						font-size: 16px;
						margin-bottom: 0px;
						.media-xxs({
							font-size: 14px;	
						});
					}
				}
				&-time{
					margin-bottom: 20px;
					p{
						color: #193836;
						.fbody;
						text-align: center;
						font-size: 16px;
						.media-xxs({
							font-size: 14px;	
						});
					}
				}
				&-link{
					text-align: center;
					a,p{
					    color: white;
					    background-color: #a35f2d;
					    padding: 5px 20px;
					    display: inline-block;
					    font-size: 12px;
						.fbody;
					    font-weight: 400;
					    font-style: normal;
					    cursor: pointer;
					}
				}
			}
		}  
	}
	&-event{
		&-wishes{
			width: 100%;
			align-self: flex-end;
			padding: 0px 30px 0 30px;
			.media-xs({
				text-align: right !important;
				padding: 0px 30px 0 30px;
			});
			.media-xxs({
				
			});
			&-wrap{
				width: 100%;
			
				.media-xs({
				
				});
			}
			&-title{
				text-align: center;
				position: relative;
				img{
					width: 50px;
					margin-bottom: 30px;
				}
				p{
					color: #d9c391;
					font-size: 48px;
					.scehe;
					text-align: center;
				}
			}
			&-content{
				position: relative;
				padding-top: 10px;
				&:after{
					content: "";
					position: absolute;
					left: 0;
					top: 0;
					width: 50px;
					background-color: #193836;
					height: 2px;
					.media-xs({
						left: auto;
						right: 0;	
					});
				}
				&-venue{
					p{
						color: #6c6c6c;
						.fbody;
						text-align: left;
						font-size: 16px;
						margin-bottom: 0px;
						.media-xs({
							text-align: right !important;	
						});
						.media-xxs({
							font-size: 14px;	
						});
					}
				}
				&-time{
					p{
						color: #6c6c6c;
						.fbody;
						text-align: left;
						font-size: 16px;
						.media-xs({
							text-align: right !important;	
						});
						.media-xxs({
							font-size: 14px;	
						});
					}
				}
			}
			&-slide{
				position: relative;
			
			
				.media-xs({
				
				});
				.slick-track{
					display: flex;
					align-items: stretch;
				}
				.slick-prev-custom{
					position: absolute;
					left: -35px;
					width: 40px;
					top: 50%;
					.translatey;
					border: none;
					background: none;
					outline: none;
					display: block;
					&.slick-disabled{
						display: none !important;
					}
				}
				.slick-next-custom{
					position: absolute;
					right: -35px;
					width: 40px;
					top: 50%;
					.translatey;
					border: none;
					background: none;
					outline: none;
					display: block;
					&.slick-disabled{
						display: none !important;
					}
				}
				&-list{
					outline: none;
					width: 300px;
					outline: none;
					position: relative;
					margin-left: 20px;
					margin-right: 20px;
					display: flex;
					align-items: center;
					height: auto;
					p{
						font-size: 14px;
						color: #72572c;
						.font-standard;
						text-align: center;
						width: 100%;
						line-height: 1.6;
						span{
							font-style: italic;
							display: block;
							font-weight: bold;
						}
					}
					&-wrap{
						position: relative;
						height: 100%;
						display: flex;
						align-items: center;
						flex-flow: row wrap;
						width: 100%;
					}
				}
			}
			&-link{
				margin-top: 30px;
				text-align: center;
				p{
					color: #6c6c6c;
					border: 1px solid white;
					padding: 7px 40px;
					display: inline-block;
					font-size: 14px;
					.font-standard;
					cursor: pointer;
				}
			}
		}
	}
	&-gallery{
		display: block;
		padding: 0px 0 0px 0;
		position: relative;
		z-index: 2;
		overflow-x: hidden;
		/*background-image: url("../images/et-quotebg-bw.png");
		background-repeat: no-repeat;
		background-position: bottom left;
		background-size: 375px;*/
		.media-lg({
		});
		.media-md({
		});
		.media-sm({
		});
		.media-xs({
			background-size: 300px;
		});
		.imgWrapper{
			max-height: initial !important;
		}
		.gallery{
			position: relative;
			&-wrap{
				padding-left: 0;
				width: 100%;
				.slick-prev-custom{
					position: absolute;
					bottom: 0;
					left: 30px;
					border: none !important;
					background: none !important;
					outline: none !important;
					img{
						width: 40px;
					}
				}
				.slick-next-custom{
					position: absolute;
					bottom: 0;
					left: 90px;
					border: none !important;
					background: none !important;
					outline: none !important;
					img{
						width: 40px;
					}
				}
				&-list{
					display: block;
					height: 300px;
					
					img{
						height: 300px !important;
					}
					&-wrap{
						background: none !important;
						img{
							height: 300px !important;
						}
						/*background-size: cover;
						background-repeat: no-repeat;
						width: 100%;
						height: 100%;
						background-position: center;
						img{
							display: none;
						}*/
					}
				}
			}
		}

	}
	&-gallery2{
		display: block;
		padding: 75px 10% 0px 10%;
		position: relative;
		z-index: 2;
		background-size: 500px;
		background-position: left bottom;
		background-repeat: no-repeat;
		position: relative;
		.media-lg({
		});
		.media-md({
		});
		.media-sm({
		});
		.media-xs({
			padding: 50px 10% 0px 10%;
		});
		.imgWrapper{
			max-height: initial !important;
		}
		.gallery2{
				padding: 0px 0 75px 0;
				background-image: url(../images/bungadresscode2.svg);
				background-repeat: no-repeat;
				background-size: 500px;
				background-position: center bottom;
				// &:after{
				// 	content: "";
				// 	bottom: -4vw;
				// 	left: -4vw;
				// 	width: 200vw;
				// 	height: 80vw;
				// 	background-image: url(../images/bungadresscode.svg);
				// 	background-repeat: no-repeat;
				// 	background-size: contain;
				// 	position: absolute;
				// 	z-index: 1;
				// 	pointer-events: none;
				// 	.media-xs({
						
				// 	});
			
			.media-xs({
				background-size: 300px;
				background-position: center bottom;	
			});
			ul{
				display: flex;
				flex-flow: row wrap;
				padding-left: 0;
				margin-bottom: 0;
				position: relative;
				z-index: 5;
				li{
					position: relative;
					list-style-type: none;
					div{
						width: 100%;
						height: 100%;
						background-size: cover;
						background-repeat: no-repeat;
						background-position: center;
						img{
							display: none;
						}
					}
					&:nth-child(1){
						width: 30%;
						height: 30vw;
						margin-top: 5vw;
						.media-xs({
							width: 50%;
							height: 60vw;
						});
					}
					&:nth-child(2){
						width: 30%;
						height: 30vw;
						margin-left: 5%;
						position: relative;
						.media-xs({
							width: 45%;
							height: 50vw;
						});
					}
					&:nth-child(3){
						width: 30%;
						height: 30vw;
						margin-left: 5%;
						margin-top: 5vw;
						.media-xs({
							width: 50%;
							margin-right: 5%;
						});	
					}

					&:nth-child(4){
						width: 30%;
						height: 20vw;
						margin-top: 5vw;
						.media-xs({
							height: 40vw;
							margin-top: -5vw;
							width: 35%;
						});
					}
					&:nth-child(5){
						width: 30%;
						height: 30vw;
						margin-left: 5%;
						margin-top: 0vw;
						.media-xs({
							margin-top: 5vw;
							margin-left: 0;
						});
					}
					&:nth-child(6){
						width: 30%;
						height: 30vw;
						margin-left: 5%;
						margin-top: 5vw;
						.media-xs({
							width: 65%;
							height: 60vw;
						});
					}

					&:nth-child(7){
						width: 30%;
						height: 30vw;
						margin-top: -5vw;
						.media-xs({
							height: 60vw;
							margin-top: -25vw;
						});
					}
					&:nth-child(8){
						width: 30%;
						height: 30vw;
						margin-left: 5%;
						margin-top: 0vw;
						.media-xs({
							width: 55%;
						margin-top: 5vw;
						});
					}
					&:nth-child(9){
						width: 30%;
						height: 20vw;
						margin-left: 5%;
						margin-top: 5vw;
						.media-xs({
							width: 40%;
							height: 50vw;
						});
					}


					&:nth-child(10){
						width: 30%;
						height: 30vw;
						margin-top: 0vw;
						.media-xs({
							width: 45%;
							height: 40vw;
							margin-top: 5vw;
							margin-left: 5%;
						});
					}
					&:nth-child(11){
						width: 30%;
						height: 20vw;
						margin-left: 5%;
						margin-top: 5vw;
						.media-xs({
							width: 60%;
							height: 30vw;
							margin-left: 0%;
						});
					}
					&:nth-child(12){
						width: 30%;
						height: 30vw;
						margin-left: 5%;
						margin-top: 0vw;
						.media-xs({
							height: 50vw;
							margin-top: -5vw;
							width: 35%;
						});
					}

					&:nth-child(13){
						width: 30%;
						height: 30vw;
						margin-top: 5vw;
						.media-xs({
							height: 50vw;
							margin-top: -5vw;
						});
					}
					&:nth-child(14){
						width: 30%;
						height: 30vw;
						margin-left: 5%;
						margin-top: 0vw;
						.media-xs({
							width: 60%;
							height: 40vw;
							margin-top: 5vw;
						});
					}
					&:nth-child(15){
						width: 30%;
						height: 30vw;
						margin-left: 5%;
						margin-top: 5vw;
						.media-xs({
							display: none;
						});
					}

					&:nth-child(16){
						width: 30%;
						height: 20vw;
						margin-top: 5vw;
					}
					&:nth-child(17){
						width: 30%;
						height: 20vw;
						margin-left: 5%;
						margin-top: 0vw;
					}
					&:nth-child(18){
						width: 30%;
						height: 20vw;
						margin-left: 5%;
						margin-top: 5vw;
					}
				}
			}
		}
	}
	&-announce{
		padding: 0 10% 50px 10%;
		p{
			.fbody;
			color: #193836;
			font-size: 14px;
			text-align: center;
		}
	}   
	&-map{
		padding: 50px 50px 0 50px;
		text-align: center;
		.media-xs({
			padding: 50px 40px 0 40px;
		});
		&-title{
			margin-bottom: 30px;
			p{
				font-size: 48px;
				color: #d9c391;
				.font-title;
				line-height: 1;
				text-align: center;
			}
		}
		&-image{
			text-align: center;
			border: 1px solid #d9c391;
			/*border-radius: 45px;*/
			padding: 20px;
			display: inline-block;
			img{
				max-width: 900px;
				width: 100%;
				/*border-radius: 30px;*/
			}
		}
		&-download{
			margin-top: 20px;
			text-align: center;
			width: 100%;
			a{
				color: white;
				background-color: #d9c391;
				padding: 7px 25px;
				display: inline-block;
				font-size: 14px;
				.mont-reg;
			}
		}
	}
	&-love{
		padding: 100px 10%;
		.media-xs({
			padding: 50px 5%;	
		});
		&-img{
			display: flex;
			margin-bottom: 50px;
			align-items: center;
			&-list{
				width: 32%;
				margin-right: 2%;
				margin-left: 2%;
				height: 40vw;
				border-radius: 30px;
				position: relative;
				div{
					background-size: cover;
					background-repeat: no-repeat;
					background-position: center;
					width: 100%;
					height: 100%;
				}
				&:nth-child(1){
					margin-left: 0;
					height: 35vw;
					&:after{
							content: "";
							bottom: -4vw;
				   			left: -4vw;
				    		width: 20vw;
				    		height: 10vw;
				    		background-image: url("../images/km-flower-hbottomleft.svg");
				    		background-repeat: no-repeat;
				    		background-size: contain;
				    		position: absolute;
				    		z-index: 5;
				    		.media-xs({
				    			bottom: -6vw;
			    			    left: -6vw;
			    			    width: 25vw;
			    			    height: 13vw;	
			    			});
					}
					.media-xs({
						height: 50vw;	
					});
				}
				&:nth-child(2){
					&:after{
						content: "";
						bottom: -3vw;
			   			left: -4vw;
			    		width: 20vw;
			    		height: 11vw;
			    		background-image: url("../images/km-flower-htopleft.svg");
			    		background-repeat: no-repeat;
			    		background-size: contain;
			    		position: absolute;
			    		z-index: 5;
			    		.media-xs({
			    			bottom: -3vw;
			    			left: -8vw;
			    			width: 20vw;
			    			height: 16vw;	
		    			});
					}
					&:before{
						content:"";
						background-image: url("../images/km-flower-04.svg");
						background-repeat: no-repeat;
						background-size: contain;
						right: -5vw;
					    bottom: -3vw;
					    width: 10vw;
						height: 20vw;
						background-position: center bottom;
						position: absolute;
						z-index: 5;
						.media-xs({
							right: -8vw;
						    bottom: -4vw;
						    width: 16vw;
						    height: 19vw;	
						});
					}
					.media-xs({
						height: 60vw;	
					});
				}
				&:nth-child(3){
					margin-right: 0;
					height: 35vw;
					&:before{
						content:"";
						background-image: url("../images/km-flower-03.svg");
						background-repeat: no-repeat;
						background-size: contain;
						right: -2vw;
					    bottom: -3vw;
					    width: 14vw;
						height: 10vw;
						background-position: center top;
						position: absolute;
						z-index: 5;
						.media-xs({
							right: -2vw;
						    bottom: -4vw;
						    width: 17vw;
						    height: 14vw;	
						});
					}
					.media-xs({
						height: 50vw;	
					});
				}
			}
		}
		&-story{
			p{
				font-size: 16px;
				line-height: 1.6;
				.mont-reg;
				text-align: center;
			}
		}
	}
	&-info{
		padding: 100px 10% 100px 10%;
		&-title{
			text-align: center;
			margin-bottom: 15px;
			position: relative;
			/*padding-top: 40px;
			&:after{
				content: "";
				width: 25px;
				height: 23px;
				position: absolute;
				top: 10px;
				left: 50%;
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center;
				.translatex;
				background-image: url("../images/wish-gold.svg");
			}*/
			img{
				width: 140px;
				.media-xxs({
					width: 125px;	
				});
			}
			p{
				color: #0f3c53;
				font-size: 48px;
				.pinyon;
				text-align: center;
				.media-xs({
					font-size: 42px;	
				});
			}
		}
		&-subtitle{
			p{
				color: #6c6c6c;
				font-size: 16px;
				text-align: center;
				line-height: 1.3;
			}
		}
		&-area{
			display: flex;
			flex-flow: row wrap;
			width: 100%;
			margin-top: 50px;
			justify-content: center;
			&-list{
				width: 32%;
				margin-left: 1%;
				margin-right: 1%;
				&:nth-child(3n+1){
					margin-left: 0;
				}
				&:nth-child(3n+3){
					margin-right: 0;
				}
				.media-xs({
					width: 70%;
					margin-bottom: 30px;
					margin-left: 15% !important;
					margin-right: 15% !important;
					&:nth-last-child(1){
						margin-bottom: 0;
					}
				});
				.media-xxs({
					width: 100%;
					margin-bottom: 30px;
					margin-left: 0 !important;
					margin-right: 0 !important;
					
				});
				&-image{
					position: relative;
					z-index: 1;
					img{
						width: 100%;
						a{
							display: block;
							text-align: center;
							border: 1px solid #d9c391;
							color: #d9c391;
							.mont-reg;
							font-size: 16px;
							padding: 10px 40px;
							.media-xs({
								padding: 10px;	
							});
						}
					}
				}
				&-link{
					margin-top: -20px;
					position: relative;
					z-index: 2;
					padding-left: 20px;
					a{
						display: inline-block;
						text-align: center;
						color: white;
						background-color: #0f3c53;
						.mont-reg;
						font-size: 14px;
						padding: 10px 20px;
						width: 200px;
						text-align: center;
						.media-xs({
							padding: 10px;	
						});
					}
				}
			}
		}
	}
    &-date{
    	display: flex;
    	flex-flow: row wrap;
    	align-items: center;
    	justify-content: center;
    	padding: 50px 0 0px 0;
    	&-img{
    		width: 100%;
    		margin-bottom: -15px;
    		text-align: center;
    		.media-xs({
    			margin-bottom: -10px;	
    		});
    		img{
    			width: 200px;
    		}
    	}
    	&-day{
    		width: calc(50% ~'-' 50px);
    		text-align: right;
    		.media-xxs({
    			width: calc(50% ~'-'25px);	
    		});
    		p{
    			display: inline-block;
    			position: relative;
    			font-size: 32px;
    			color: #a89069;
    			letter-spacing: 2px;
    			text-align: right;
    			
    			.scehe;
    			.media-xs({
					letter-spacing: 0;	
				});
    			.media-xxs({
    				font-size: 24px;
    				padding: 0 10px;
    			});
    			&:before{
    				content: "";
    				width: 100%;
    				height: 1px;
    				background-color: dark;
    				top: -10px;
    				left: 0;
    				position: absolute;
    			}
    			&:after{
    				content: "";
    				width: 100%;
    				height: 1px;
    				background-color: dark;
    				bottom: -10px;
    				left: 0;
    				position: absolute;
    			}
    		}
    	}
    	&-date{
    		width: 100px;
    		.media-xxs({
    			width: 50px;
    		});
    		p{
    			font-size: 62px;
    			color: #a89069;
    			text-align: center;
				border: solid 1px #a89069;
    			.scehe;
    			.media-xxs({
    				font-size: 44px;
    			});
    		}
    	}
    	&-month{
    		width: calc(50% ~'-' 50px);
    		.media-xxs({
    			width: calc(50% ~'-'25px);	
    		});
    		p{
    			display: inline-block;
    			position: relative;
    			font-size: 32px;
    			letter-spacing: 4px;
    			color: #a89069;
    			text-align: left;
    			.scehe;
    			.media-xs({
    				letter-spacing: 0;	
				});
    			.media-xxs({
    				font-size: 24px;
    				padding: 0 10px;
    				letter-spacing: 2px;
    			});
    			/*&:before{
    				content: "";
    				width: 100%;
    				height: 1px;
    				background-color: dark;
    				top: -10px;
    				left: 0;
    				position: absolute;
    			}
    			&:after{
    				content: "";
    				width: 100%;
    				height: 1px;
    				background-color: white;
    				bottom: -10px;
    				left: 0;
    				position: absolute;
    			}*/
    		}
    	}
    }
    &-header{
    	padding-top: 50px;
    	
    }
}
.countdown02{
	&-date{
		display: flex;
		flex-flow: row wrap;
		align-items: center;
		justify-content: center;
		margin-bottom: 50px;
		&-day{
			width: calc(50% ~'-' 50px);
			text-align: right;
			.media-xxs({
				width: calc(50% ~'-'25px);	
			});
			p{
				display: inline-block;
				position: relative;
				font-size: 24px;
				color: #0f3c53;
				text-align: right;
				padding: 0 20px;
				.fbody;
				.media-xxs({
					font-size: 20px;
					padding: 0 10px;	
				});
				/*&:before{
					content: "";
					width: 100%;
					height: 1px;
					background-color: dark;
					top: -10px;
					left: 0;
					position: absolute;
				}
				&:after{
					content: "";
					width: 100%;
					height: 1px;
					background-color: dark;
					bottom: -10px;
					left: 0;
					position: absolute;
				}*/
			}
		}
		&-date{
			width: 100px;
			.media-xxs({
				width: 35px;
			});
			p{
				font-size: 48px;
				color:  #0f3c53;
				text-align: center;
				.fbody;
				.media-xxs({
					font-size: 32px;	
				});
			}
		}
		&-month{
			width: calc(50% ~'-' 50px);
			.media-xxs({
				width: calc(50% ~'-'25px);	
			});
			p{
				display: inline-block;
				position: relative;
				font-size: 24px;
				color:  #0f3c53;
				text-align: left;
				.fbody;
				padding: 0 20px;
				.media-xxs({
					font-size: 20px;
					padding: 0 10px;
				});
				/*&:before{
					content: "";
					width: 100%;
					height: 1px;
					background-color: dark;
					top: -10px;
					left: 0;
					position: absolute;
				}
				&:after{
					content: "";
					width: 100%;
					height: 1px;
					background-color: white;
					bottom: -10px;
					left: 0;
					position: absolute;
				}*/
			}
		}
	}
}
.shortcutmenu{
	position: fixed;
	bottom: -75px;
	left: 50%;
	.translatex;
	
	z-index: 10;
	.animate;
	width: 300px;
	.media-xxs({
		.translate-off;
		left: 10px;
		width: calc(100% ~'-' 70px);
	});
	&.show{
		bottom: 10px;
		.animate;
	}
	a{
		background-color: #e1ead3;
		color: white;
		font-size: 20px;
		padding: 8px 30px;
		text-align: center;
		display: block;
		.animate;
		&:hover{
			background-color: #3c3c3c;
			.animate;
		}
	}
}
.rsvp{
	padding: 75px 10%;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	/*.media-sm({
		background-position: 116% 45%, -55px 116%, center;	
	});
	.media-xs({
		padding: 40px 10%;	
		background-position: 130% 15%, -55px 120%, center;	
	});
	.media-xxs({
		padding: 40px 5%;	
		background-position: 190% -40%, -55px 120%, center;	
	});*/
	&-title{
		p{
			text-align: center;
			font-size: 60px;
			.font-title;
			color: #e6d6cd;
			position: relative;
			
			.media-sm({
				font-size: 52px;
			});
			.media-xs({
				font-size: 48px;
			});
			.media-xxs({
				font-size: 32px;
			});
		}
	}
	&-subtitle{
		margin-bottom: 40px;
		p{
			text-align: center;
			font-size: 18px;
			.font-body;
			color: #e6d6cd;
			.media-xs({
				font-size: 16px;	
			});
			.media-xxs({
				font-size: 14px;	
			});
		}
	}
	&-form{
		width: 600px;
		margin-left: auto;
		margin-right: auto;
		.media-xs({
			width: 100%;	
		});
		form{
			.form-group{
				margin-bottom: 20px;
				&.button{
					text-align: center;
					margin-left: auto;
					margin-right: auto;
				}
				label{
					display: block;
					font-size: 16px;
					.font-body;
					color: #e6d6cd;
					margin-bottom: 3px;
					.media-xxs({
						font-size: 14px;	
					});
				}
				input{
					width: 100%;
					padding: 10px;
					.font-standard;
					color: #e6d6cd;
					border: 2px solid #e6d6cd;
					font-size: 18px;
					outline: none !important;
					background-color: transparent;
					&:focus{
						border: 2px solid #e6d6cd;
					}
					.media-xs({
						font-size: 16px;	
					});
					&:read-only{
						background-color: #383838 !important;
					}
				}
				textarea{
					width: 100%;
					padding: 10px;
					.font-standard;
					color: #e6d6cd;
					border: 2px solid #e6d6cd;
					font-size: 18px;
					outline: none !important;
					width: 100%;
					background-color: transparent !important;
					resize: vertical;
					&:focus{
						border: 2px solid #e6d6cd;
					}
					.media-xs({
						font-size: 16px;	
					});
				}
				select{
					width: 100%;
					padding: 10px;
					.font-standard;
					color: #e6d6cd;
					font-size: 18px;
					border: 2px solid #e6d6cd;
					outline: none !important;
					background-color: transparent !important;
					.media-xs({
						font-size: 16px;	
					});
					&:focus{
						border: 2px solid #e6d6cd;
					}
					option{
						color: black;
					}
				}
				&-area{
					width: 100%;
					padding: 20px;
					.font-standard;
					color: #6c6c6c;
					border: 2px solid #d9c391;
					font-size: 16px;
					outline: none !important;
					background-color: white;
					background-color: transparent !important;
					ol{
						margin-bottom: 0;
						padding-left: 20px;
					}
				}
			}
		}
	}
}
.quote01{
	position: relative;
	padding: 75px 10% 50px 10%;
	background-image: url("../images/wa-flower-05.svg");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: contain;
	z-index: 1;
	.media-xs({
		padding: 75px 10% 50px 10%;
	});
	&-area{
		width: 100%;
		height: 100%;
		&-text{
			width: 100%;
			padding: 40px 0;
			.media-xxs({
				padding: 20px 0;
			});
			p{
				.mont-reg;
				font-size: 20px;
				color: #6c6c6c;
				text-align: center;
				.media-xs({
					font-size: 18px;	
				});
				.media-xxs({
					font-size: 16px;	
				});
			}
		}
		&-title{
			margin-bottom: 50px;
			
			.media-xxs({
				margin-bottom: 30px;	
				
				position: relative;
			});
			p{
				.font-title;
				font-size: 38px;
				color: #6c6c6c;
				text-align: center;
				line-height: 1;
				.media-sm({
					font-size: 36px;
				});
				.media-xs({
					font-size: 32px;
				});
				.media-xxs({
					font-size: 32px;
					display: inline-block;
					text-align: left;
				});

			}
		}
		&-icon{
			display: flex;
			flex-flow: row wrap;
			
			.media-xs({
				
				
			});
			&-list{
				display: flex;
				flex-flow:  row wrap;
				width: 50%;
				
				margin-bottom: 20px;
				&:nth-child(odd){
					padding-right: 10px;
					.media-xxs({
						padding-right: 0;
					});
				}
				&:nth-child(even){
					padding-left: 10px;
					.media-xxs({
						padding-left: 0;
					});
				}
				.media-lg({
					align-items: center;	
				});
				.media-xxs({
					width: 100%;	
					align-items: center;
				});
				&-img{
					width: 100%;
					text-align: center;
					margin-bottom: 20px;
					.media-lg({
						width: 106px;
						margin-bottom: 0;
					});
					.media-xxs({
						width: 80px;	
						margin-bottom: 0;
					});
				}	
				&-desc{
					width: 100%;
					text-align: center;
					.media-lg({
						width: calc(100% ~'-'106px);	
						text-align: left;
						padding-left: 20px;
						padding-right: 50px;
					});
					.media-xxs({
						width: calc(100% ~'-' 80px);
						padding-left: 10px;
						text-align: left;
					});
					p{
						.mont-reg;
						font-size: 16px;
						color: #6c6c6c;
					}
				}
			}
		}
	}
}
.panel{
	border-radius: 0 !important;
	border: none !important;
	margin-top: 0 !important;
	border-bottom: 1px solid #6c6c6c !important;
	background-color: transparent;
	&-heading{
		background-color: transparent !important;
		border-radius: 0 !important;
		border: none !important;
		padding: 0 !important;
	}
	&-title{
		display: flex;
		align-items: center;
		a{
			width: 100%;
			display: block;
			font-size: 14px;
			.font-body;
			color: white;
			padding: 15px 0;
			position: relative;
			border-bottom: 1px solid white;
			span{
				position: absolute;
				right: 0px;
				top: 20px;
				color: white;
				.animate;
				.animate;
				
			}
			&.clicked{
				span{
					-webkit-transform: rotate(90deg); /* Safari 6.0 - 9.0 */
					-moz-transform: rotate(90deg);
					-ms-transform: rotate(90deg);
					-o-transform: rotate(90deg);
					transform: rotate(90deg);
				}
			}
		}
	}
	&-body{
		
		border-top: none !important;
		&-info{
			margin-bottom: 10px;
			p{
				color: white;
				font-size: 14px;
			}
		}
		.form-group{
			position: relative;
			label{
				width: 100%;
				display: block;
				font-size: 14px;
				.font-body;
				color: white;
			}
			input, textarea{
				width: 100%;
				display: block;
				padding: 7px;
				border-radius: 0 !important;
				border: 1px solid white;
				.font-body;
				color: white;
				background: transparent;
				font-size: 14px;
				border: 1px solid white;
				&:focus{
					border: 1px solid #cdc3ce;
					outline: none !important;
					border-radius: none !important;
				}
			}
			textarea{
				resize: vertical;
				min-height: 100px;
			}
		}
		&-notopen{
			p{
				text-align: center;
				color: white;
				font-size: 16px;
				.font-standard;
			}
		}

		.inf__btn {
			display: inline-block;
			border: 1px solid #c4c4c4;
			border-radius: 3px;
			padding: 5px 12px;
			margin-right: 10px;
			font-size: 12px;
			text-transform: uppercase;
			color: white;
		}
		.inf__hint {
			color: white;
			flex: 1;
			font-size: 12px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
}
.ourstory02{
	padding: 100px 10% 175px 10%;
	background-repeat: repeat-x;
	background-position: bottom center;
	.media-xs({
		background-size: contain;
		padding: 50px 5% 100px 5%;
	});
	.media-xxs({
		background-size: contain;
	});
	&-title{
		margin-bottom: 10px;
		position: relative;
		text-align: center;
		.media-xs({
			
		});
		p{
			font-size: 5vw;
			.font-name;
			color: #fed39c;
			text-align: center;
			span{
				.font-standard;
				font-style: italic;
				font-size: 2vw;
				vertical-align: middle;
				display: inline-block;
				margin-left: 10px;
				margin-bottom: 0px;
				.media-xs({
					font-size: 2.5vw;	
					margin-bottom: -0px;
				});
				.media-xxs({
					font-size: 4vw;	
				});
			}
			.media-xs({
				font-size: 6vw;	
			});
			.media-xxs({
				font-size: 10vw;	
			});
			
		}
	}
	&-desc{
		margin-bottom: 0px;
		p{
			font-size: 18px;
			.font-body;
			color: #fed39c;
			text-align: center;
			.media-xs({
				font-size: 16px;	
			});
			.media-xxs({
				font-size: 14px;	
			});
		}
	}
}
#bsPhotoGalleryModal{
	.modal-dialog{
		display: flex;
		min-height: calc(100% ~'-' (1.75rem * 2));
		-webkit-transform: translate(0,0);
		transform: translate(0,0);
		align-items: center;
		margin: 1.75rem auto;
		width: 800px;
		justify-content: center;
		.media-md({
			width: 800px;	
		});
		.media-sm({
			width: calc(100% ~'-' 40px);
		});
		.media-xs({
			width: calc(100% ~'-' 40px);
			margin: 0.5rem auto;
			min-height: calc(100% ~'-' (0.5rem * 2));	
		});
		.modal-content{
			position: relative;
		    display: -webkit-box;
		    display: -ms-flexbox;
		    display: flex;
		    -webkit-box-orient: vertical;
		    -webkit-box-direction: normal;
		    -ms-flex-direction: column;
		    flex-direction: column;
		    pointer-events: auto;
		    background-color: #fff;
		    background-clip: padding-box;
		    border: 1px solid rgba(0,0,0,.2);
		    border-radius: 0.3rem;
		    outline: 0;
		}
	}
}
#bsPhotoGalleryModal{
	text-align: center;
	.modal-dialog{
		.bsp-controls{
			display: none !important;
		}
	}
	.modal-content{
		text-align: center;
		background-color: transparent !important;
		border: none !important;
		box-shadow: none !important;

		.modal-body{
			display: inline-block;
		}
	}
}
#bsPhotoGalleryModal .bsp-text-container{
	display: none;
}
#bsPhotoGalleryModal .modal-dialog img{
	margin-top: 0 !important;
}

#modalRundown{
	.modal-body{
		.media-xxs({
			padding: 30px 15px !important;	
		});
		&-title{
			p{
				color: #8b5f3c !important;
			}
		}
		&-summary{
			position: relative;
			
			&-list{
				margin-bottom: 0px !important;
				position: relative;
				z-index: 2;
				padding: 5px 0 35px 0;
				&:nth-last-child(1){
					&:before{
						display: none;
					}
				}
				&:before{
					content: "";
					position: absolute;
					width: 1px;
					left: 50%;
					height: 20px;
					bottom: 5px;
					background-color: #b5b5b5;
					z-index: 1;
				}
				&-answer{
					p{
						color: #8b5f3c !important;
					}
				}
			}
		}
	}
}
/* #region KeyFrame */
@keyframes changebg {
  0% {background-color: #ba805c;}
  25% {background-color: #858a7d;}
  50% {background-color: #759293;}
  75% {background-color: #ddc18b;}
  100% {background-color: #ba805c;}
}
@keyframes changedresscode {
  0% {background-color: #ffffff;}
  10% {background-color: #fafaeb;}
  20% {background-color: #f3e4f1;}
  30% {background-color: #d5ebda;}
  40% {background-color: #f4dacd;}
  50% {background-color: #ead3d4;}
  60% {background-color: #b9e2f6;}
  70% {background-color: #c3b4cd;}
  80% {background-color: #b8bfc7;}
  90% {background-color: #dbe1e1;}
  100% {background-color: #ffffff;}
  
  
  
  
  
}
@-webkit-keyframes zoomin {
  0% {transform: scale(1);}
  50% {transform: scale(1.3);}
  100% {transform: scale(1);}
}
@keyframes zoomin {
  0% {transform: scale(1);}
  50% {transform: scale(1.3);}
  100% {transform: scale(1);}
} /*End of Zoom in Keyframes */
@-webkit-keyframes ww-animation-photo {
    0% {
        transform: scale(1.4);
    }

    100% {
        transform:scale(1);
    }
}
@-moz-keyframes ww-animation-photo {
    0% {
        transform: scale(1.4);
    }

    100% {
        transform:scale(1);
    }
}
@-o-keyframes ww-animation-photo {
    0% {
        transform: scale(1.4);
    }

    100% {
        transform:scale(1);
    }
}
@keyframes ww-animation-photo {
    0% {
        transform: scale(1.4);
    }

    100% {
        transform:scale(1);
    }
}
@-webkit-keyframes ww-animation-text {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0px, 100%, 0px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translate3d(0px, 0%, 0px);
    }
}
@-moz-keyframes ww-animation-text {
    0% {
        opacity: 0;
        -moz-transform: translate3d(0px, 100%, 0px);
    }

    100% {
        opacity: 1;
        -moz-transform: translate3d(0px, 0%, 0px);
    }
}
@-o-keyframes ww-animation-text {
    0% {
        opacity: 0;
        -o-transform: translate3d(0px, 100%, 0px);
    }

    100% {
        opacity: 1;
        -o-transform: translate3d(0px, 0%, 0px);
    }
}
@keyframes ww-animation-text {
    0% {
        opacity: 0;
        transform: translate3d(0px, 100%, 0px);
    }

    100% {
        opacity: 1;
        transform: translate3d(0px, 0%, 0px);
    }
}
@keyframes huerotate {
	0% { filter: hue-rotate(0deg);}
	50% { filter: hue-rotate(-90deg);}
	100% { filter: hue-rotate(0deg);}
}
/* #endregion KeyFrame */

/* #region content*/

	/* #region Background Music*/
	.soundonoff{
		position: fixed;
		bottom: 10px;
		left: 10px;
		z-index: 100;
		.animate-fast;
		.media-xs({
			left: 5%;
			bottom: 65px;
			.animate-fast;
		});
		&.noshow{
			bottom: -100px;
		}
		&.muted{
			a{
				img{
					&:nth-child(1){
						display: none;
					}
					&:nth-child(2){
						display: block;
					}
				}
			}
		}
		a{
			background-color: white;
			border-radius: 100%;
			box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
			display: block;
			padding: 10px;
			img{
				width: 20px;
				height: 20px;
				&:nth-child(2){
					display: none;
				}
			}
		}
	}
	/* #endregion Background Music*/
	/* #region Opening Wall*/
	#myModal{
		border-radius: 0 !important;
		padding-right: 0;
		.modal-dialog{
			width: 100% !important;
			margin:0 !important;
			border-radius: 0 !important;
			position: relative;
			overflow: hidden;
	
			position: relative;
			display: flex;
			min-height: 100%;
			.wrapper{
				overflow: hidden;
				text-align: center;
				position: relative;
	
				display: -webkit-box;
				display: -ms-flexbox;
				width: 100%;
				display: flex;
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				-ms-flex-direction: column;
				flex-direction: column;
			}
			.modal-content{
				border-radius: 0 !important;
				min-height: 100vh;
				position: relative;
				display: flex;
				justify-content: center;
				border: none;
				position: relative;
				background-image: url("../images/cover-landscape-bw.jpg?v=3");
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center;
				position: relative;
				padding: 0px 0;
				background-color: white;
				height: 100%;
				.media-xs({
					background-image: url("../images/cover-portrait-bw.jpg?v=3");
					background-position: center;
				});
				.media-xl({
	
				});
				.media-xxl({
	
				});
				
				.media-xs({
	
				});
				.modal-body{
					width: 100%;
					padding: 0;
					overflow: hidden;
					position: relative;
					display: flex;
					align-items: center;
					background-color: white;
					&-close{
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;
						z-index: 4;
					}
					&-bg{
						width: 100%;
						height: 100%;
						position: absolute;
						.putih{
							&:before{
								content :"";
								background-image: url("../images/bungakanan-01.svg");
								background-size: 150px;
								background-repeat: repeat-y;
								background-position: right bottom;
								position: absolute;
								width: 100%;
								height: 100%;
								bottom: 100px;
								right: 0;
								z-index: 2;
								.media-xs({
									background-size: 120px;
								});
								.media-xxxs({
									display: none;
								});
							}
							&:after{
								content :"";
								background-image: url("../images/bungabawah-01.svg");
								background-size: 450px;
								background-repeat: repeat-x;
								background-position: left bottom;
								position: absolute;
								width: 100%;
								height: 100%;
								bottom: 0;
								left: 0;
								z-index: 2;
								.media-xs({
									background-size: 360px;
								});
								.media-xxxs({
									display: none;
								});
							}
						}
						&-cover{
							position: absolute;
							width: calc(100% ~'-' 40px);
							height: calc(100% ~'-' 40px);
							top: 20px;
							left: 20px;
							z-index: 1;
							background-image: url("../images/banner-landscape.jpg");
							background-size: cover;
							background-repeat: no-repeat;
							background-position: center;
							opacity: 1;
							.media-xs({
								background-image: url("../images/banner-portrait.jpg");	
							});
							&:before{
								content :"";
								background-image: url("../images/bungakiri-01.svg");
								background-size: 250px;
								background-repeat: repeat-y;
								background-position: left bottom;
								position: absolute;
								width: 100%;
								height: 100%;
								top: 0;
								left: 0;
								z-index: 2;
								.media-xs({
									background-size: 220px;
								});
								.media-xxxs({
									display: none;
								});
							}
							&:after{
								content :"";
								background-image: url("../images/bungaatas-02.svg");
								background-size: 450px;
								background-repeat: repeat-x;
								background-position: right top;
								position: absolute;
								width: 100%;
								height: 100%;
								top: 0;
								right: 50px;
								z-index: 2;
								.media-xs({
									background-size: 380px;
								});
								.media-xxxs({
									display: none;
								});
							}
						}
					}
					&-text{
						text-align: center;
						display: flex;
						width: 100%;
						height: 90vh;
						max-height: 700px;
						justify-content: center;
						flex-flow: row wrap;
						position: relative;
						z-index: 2;
						&-logo{
							text-align: center;
							width: 100%;
							border-radius: 32vw;
							display: flex;
							align-items: center;
							justify-content: space-evenly;
							flex-direction: column;
							&-img{
								width: 100%;
								text-align: center;
								p{
									margin-bottom: 20px;
									color: #6c6c6c;
									font-size: 16px;
									.scehe;
									letter-spacing: 4px;
									line-height: 1.3;
								}
								img{
									max-width: 250px;
									width: 100%;
									margin-left: auto;
									margin-right: auto;
									.media-xs({
										max-width: 220px;	
									});						
								}
							}
							.media-xs({
								width: 90%;
								
									
							});
						}
						&-side{
							position: absolute;
							height: calc(90vh ~'+' 20px);
							max-height: calc(700px ~'+' 20px);
							text-align: center;
							width: calc(50% ~'+' 20px);
							max-width: 420px;
							top: -10px;
							border-radius: 32vw;
							pointer-events: none;
							z-index: 1;
							border: 1px solid white;
							.media-xs({
								width: calc(80% ~'+' 20px);
								border-radius: 45vw;
									
							});
						}
						&-invite{
							
							padding: 20px;
							background-color: rgba(255,255,255,0.3);
							margin-bottom: 0px;
							padding: 10px 40px;
							&.noname{
								background: none;
							}
							>p{
								color: #6c6c6c;
								font-size: 12px;
								.mont-reg;
								letter-spacing: 2px;
								line-height: 1.3;
							}
						}
						button{
							align-self: flex-end;
							color: white;
							border-radius: 0 !important;
							outline: 0 !important;
							border: none !important;
							font-size: 14px;
							background-color: #f5bcac;
							padding: 8px 40px 10px 40px;
							.font-standard;
							.animate;
						}
					}
				}
			}
		}
		/* Zoom in Keyframes */
	}
	/* #endregion Opening Wall*/
	/* #region profile*/
	.fotogroombride{
		width: 90%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		position: relative;
		margin-top: -20px;
		&:before{
			position: absolute;
			background-image: url('../images/namagroombridebrowndark-01-01.svg');
			background-repeat: no-repeat;
			position: absolute;
			width: 100%;
			height: 100%;
			background-position: center;
			background-size: 500px;
			top: 25%;
			
			.media-xs({
				
			});
		}
		&:after{
			content: "";
			background-image: url("../images/bungasatukanan-02.svg");
			background-position: right bottom;
			position: absolute;
			width: 100%;
			height: 100%;
			background-size: 230px;
			background-repeat: no-repeat;
			bottom: 240px;
			right: -100px;
			z-index: 1;
			pointer-events: none;
			.media-lg({
				background-size: 330px;
				right: -200px;
				opacity: 0.5;
			});
			}
		.groombride{
			z-index: 3;
			display: flex;
			flex-direction: column;
			&:nth-child(1) {
				margin-right: 12.5px;
			}
			&:nth-child(2) {
				margin-top: 180px;
				margin-left: 12.5px;
			}
			img{
				
				width: 220px;
				height: auto;
				margin-bottom: 20px;
			}
		}
	}
	/* #endregion profile*/
	/* #region invitation*/
	.invitation{
		display: block;
		background-image: url("../images/km-flower-petal.svg");
		background-repeat: repeat;
		background-position: center;
		background-size: contain;
		position: relative;		
		margin: 0 5%;
		&:after{
			content: "";
			background-image: url("../images/bungaholmatkanan.svg");
			position: absolute;
			width: 100%;
			height: 100%;
			background-repeat: no-repeat;
			z-index: 1;
			background-size: 150px;
			background-position: right top;
			top: 190px;
			right: -100px;
			transform: rotate(-20deg);
			display: none;
			pointer-events: none;
			.media-xs({
				display: block;
			});
		}
		&:before{
			content: "";
			background-image: url("../images/bungaholmatkiri.svg");
			position: absolute;
			width: 100%;
			height: 100%;
			background-repeat: no-repeat;
			z-index: 1;
			background-size: 150px;
			background-position: left top;
			bottom: -45%;
			left: 80px;
			transform: rotate(-40deg);
			display: none;
			pointer-events: none;
			opacity: 0.5;
			.media-xs({
				display: block;
				bottom: -35%;
			});
			.media-xxs({
				display: block;
				bottom: -45%;
			});
		}
		&-schedule{
			display: flex;
			flex-flow: row wrap;
			padding-top: 50px;
			padding-bottom: 50px;
			&-holmat{
				width: 100%;
				text-align: right;
				padding-left: 0%;
				position: relative;
				margin-bottom: 50px;
				.media-lg({
					width: 50%;
					padding-right: 50px;
					padding-top: 20px;
				});
				.media-md({
					width: 50%;
					padding-right: 50px;
					padding-top: 20px;
				});
				.media-sm({
					width: 50%;
					padding-right: 50px;
					padding-top: 20px;	
				});
				.media-xs({
					text-align: left;	
				});
				&-title{
					text-align: center;
					margin-bottom: 10px;
					position: relative;
					/*&:after{
						content: "";
						width: 25px;
						height: 23px;
						position: absolute;
						top: 10px;
						left: 55%;
						background-size: contain;
						background-repeat: no-repeat;
						background-position: center;
						.translatex;
						background-image: url("../images/star-blue.svg");
					}*/
					.media-lg({
						text-align: right;			    		
					});
					.media-md({
						text-align: right;			    		
					});
					.media-sm({
						text-align: right;			    		
					});
					.media-xs({
						margin-bottom: 10px;
					});
					.media-xxs({
						margin-bottom: 5px;	
					});
					img{
						width: 300px;
					}
					p{
						font-size: 48px;
						color: #6c6c6c;
						.scehe;
						text-align: left;
						line-height: 1;
						.media-lg({
							text-align: right;
							display: inline-block;
						});
						.media-md({
							text-align: right;
							display: inline-block;
							font-size: 38px;
						});
						.media-sm({
							text-align: right;
							display: inline-block;
							font-size: 32px;
						});
						.media-xs({
							font-size: 38px;
						});
						span{
							position: relative;
							.media-xs({
								display: block;		
							});
							&:after{
								.media-xs({
									content:"";
									position: absolute;
									width: calc(100% ~'-' 120px);
									height: 1px;
									background-color: #a89069;
									top: 55%;
									right: 0;
									.translatey;	
								});
							}
						}
					}
				}
				&-content{
					p{
						.scehe;
						font-size: 18px;
						color: #6e6e6e;
						text-align: left;
						line-height: 1.3;
						.media-lg({
							text-align: right;	
						});
						.media-md({
							text-align: right;	
						});
						.media-sm({
							text-align: right;	
						});
						.media-xs({
							font-size: 16px;
						});
						span{
							font-size: 23px;
						}
					}
				}
				&-direction{
					margin-top: 20px;
					a{
						display: inline-block;
						.font-body;
						font-size: 14px;
						color: white;
						padding: 4px 30px;
						background-color: #a89069;
						.animate-fast;
						text-align: left;
						&:hover{
							background-color: #a89069;
							.animate-fast;
						}
						.media-xs({
							font-size: 14px;	
						});
					}
				}
			}
			&-reception{
				width: 100%;
				text-align: right;
				position: relative;
				.media-lg({
					width: 50%;
					padding-left: 50px;
					border-left: 1px solid #CBC7B7;
					padding-top: 20px;
				});
				.media-md({
					width: 50%;
					padding-left: 50px;
					border-left: 1px solid #CBC7B7;
					padding-top: 20px;
				});
				.media-sm({
					width: 50%;
					padding-left: 50px;
					border-left: 1px solid #CBC7B7;
					padding-top: 20px;
				});
				.media-xs({
					text-align: right;
				});
				// &:before{
				// 	content:"";
				// 	position: absolute;
				// 	width: 8%;
				// 	height: 1px;
				// 	background-color: #6e6e6e;
				// 	top: 31px;
				// 	right: 0;
				// 	.translatey;
				// 	.media-lg({
				// 		width: calc(100% ~'-' 50px ~'-' 420px);	
				// 		top: 47px;
				// 	});
				// 	.media-md({
				// 		width: calc(100% ~'-' 50px ~'-' 340px);
				// 		top: 43px;
				// 	});
				// 	.media-sm({
				// 		width: calc(100% ~'-' 50px ~'-' 250px);
				// 		top: 39px;
				// 	});
				// 	.media-xs({
				// 		display: none;	
				// 	});
				// }
				&-title{
					text-align: right;
					margin-bottom: 10px;
					position: relative;
					/*&:after{
						content: "";
						width: 25px;
						height: 23px;
						position: absolute;
						top: 10px;
						left: 50%;
						background-size: contain;
						background-repeat: no-repeat;
						background-position: center;
						.translatex;
						background-image: url("../images/star-blue.svg");
					}*/
					.media-lg({
						text-align: left;
					});
					.media-md({
						text-align: left;
					});
					.media-sm({
						text-align: left;
					});
					.media-xs({
						margin-bottom: 10px;
					});
					.media-xxs({
						margin-bottom: 5px;	
					});
					img{
						width: 300px;
					}
					p{
						font-size: 48px;
						color: #6c6c6c;
						.scehe;
						text-align: right;
						line-height: 1;
						.media-lg({
							text-align: left;
							display: inline-block;
						});
						.media-md({
							text-align: left;
							display: inline-block;
							font-size: 38px;
						});
						.media-sm({
							text-align: left;
							display: inline-block;
							font-size: 32px;
						});
						.media-xs({
							font-size: 38px;
						});
						span{
							position: relative;
							
							.media-xs({
								display: block;	
							});
							&:after{
								.media-xs({
									content:"";
									position: absolute;
									width: calc(100% ~'-' 170px);
									height: 1px;
									background-color: #a89069;
									top: 55%;
									left: 0;
									.translatey;	
								});
							}
						}
					}
				}
				&-content{
					p{
						.scehe;
						font-size: 18px;
						color: #6c6c6c;
						text-align: right;
						line-height: 1.3;
						.media-lg({
							text-align: left;	
						});
						.media-md({
							text-align: left;	
						});
						.media-sm({
							text-align: left;	
						});
						.media-xs({
							font-size: 16px;
						});
						span{
							font-size: 23px;
						}
					}
				}
				&-direction{
					margin-top: 20px;
					text-align: left;
					.media-sm({
						
					});
					.media-xs({
						text-align: right;
					});
					a{
						display: inline-block;
						.font-body;
						font-size: 14px;
						color: white;
						padding: 4px 30px;
						background-color: #a89069;
						.animate-fast;
						text-align: left;
						&:hover{
							background-color: #a89069;
							.animate-fast;
						}
						.media-xs({
							font-size: 14px;	
						});
					}
				}
			}
		}
	}
	/* #endregion invitation*/
	/* #region tanggal & countdown*/
	.tanggal {
		margin: 0 30%;
		.media-xs({
			margin: 0 20%;
		});
		&:after{
			content: "";
			background-image: url("../images/bungasatukiri.svg");
			position: absolute;
			width: 100%;
			height: 100%;
			background-size: 230px;
			background-repeat: no-repeat;
			background-position: left top;
			top: 950px;
			left: -50px;
			z-index: 1;
			pointer-events: none;
			.media-xs({
				display: none;
			});
			.media-lg({
				background-size: 330px;
				opacity: 0.5;
			});
		}
	}
	.cd{
		&-01{
			text-align: center;
			padding: 0px 0 0px 0;
			position: relative;
			&-img{
				text-align: center;
				margin-bottom: -20px;
				img{
					width: 250px;
					.media-xxs({
						width: 200px;	
					});
				}
			}
			&-hashtag{
				position: relative;
				z-index: 3;
				p,a{
					text-align: center;
					font-size: 16px;
					font-style: italic;
					color: #b06a32;
					.mont-reg;
					letter-spacing: 1px;
				}
			}
			&-subtitle{
				position: relative;
				z-index: 2;
				p{
					text-align: center;
					font-size: 13px;
					color: #b06a32;
					.mont-reg;
					letter-spacing: 2px;
	
				}
			}
			&-date{
				text-align: center;
				position: relative;
				z-index: 2;
				&:before{
					content: "";
					position: absolute;
					width: calc(30% ~'-' 175px);
					left: 20%;
					top: 50%;
					height: 1px;
					background-color: #3d4f6e;
					.media-xxs({
						left: 0%;
						width: calc(40% ~'-' 100px);
					});
				}
				&:after{
					content: "";
					position: absolute;
					width: calc(30% ~'-' 175px);
					right: 20%;
					top: 50%;
					height: 1px;
					background-color: #3d4f6e;
					.media-xxs({
						right: 0%;
						width: calc(40% ~'-' 100px);
					});
				}
				img{
					
					width: 300px;
					position: relative;
	
					.media-xxs({
						width: 250px;
						
					});
					
				}
				p{
					position: relative;
					z-index: 3;
					display: inline-block;
					line-height: 1;
					padding-top: 5px;
					padding-bottom: 5px;
					.scehe;
					font-size: 38px;
					color: #b06a32;
					text-align: center;
					letter-spacing: 5px;
					.media-xs({
						font-size: 36px;  
						padding-left: 0px;
						padding-right: 0px;	
					});
					.media-xxs({
						font-size: 8.5vw; 
						letter-spacing: 1px; 
						padding-left: 0px;
						padding-right: 0px;	
					});
				}
			}
		}
		&-middle{
			display: flex;
			flex-flow: row wrap;
			align-items: flex-end;
			&-timer{
				margin: 10px;
				&-time{
					display: flex;
					flex-flow: row wrap;
					align-items: center;
					justify-content: center;
					height: 100%;
					&-item{
						width: 60px;
						text-align: center;
						display: flex;
						justify-content: center;
						align-items: center;
						&-number{
							display: inline-block;
							color: #6c6c6c;
							font-size: 18px;
							line-height: 1;
							.scehe;
	
						}
						&-label{
							color: #6c6c6c;
							font-size: 14px;
							line-height: 1;
							.mont-reg;
						}
					}
				}
			}
		}
	}
	/* #endregion tanggal*/
	/* #region accodomation and shuttle*/
	.wrapcontent{
		text-align: center;
		padding: 0 10%;
		padding-bottom: 50px;
		.wrapcontent-title{
			padding-bottom: 25px;
			font-size: 48px;
			color: #6c6c6c;
			.scehe;
			line-height: 1;
			.media-lg({
				text-align: left;
				display: inline-block;
			});
			.media-md({
				text-align: left;
				display: inline-block;
				font-size: 38px;
			});
			.media-sm({
				text-align: left;
				display: inline-block;
				font-size: 32px;
			});
			.media-xs({
				font-size: 38px;
			});
		}
		.wrapcontent-desc{
			.scehe;
			font-size: 18px;
			color: #6c6c6c;
			line-height: 1.3;
			text-align: center;
			.media-xs({
				font-size: 16px;
			});
			span{
				font-size: 23px;
			}
		}
	}
	/* #endregion accodomation and shuttle*/
	/* #region dresscode*/
		.dresscode{
			padding: 0px 10% 100px 10%;
			background-image: url(../images/bungadresscode.svg);
			background-repeat: no-repeat;
			background-size: 500px;
			background-position: center 9px;
			pointer-events: none;
			.media-xs({
				padding: 0px 5% 75px 5%;	
				background-size: 300px;
				background-position: center 100px;	
			});
			.dresscode-title{
					font-size: 48px;
					padding-bottom: 25px;
					color: #6c6c6c;
					.scehe;
					line-height: 1;
					text-align: center;
					.media-md({
						font-size: 38px;
					});
					.media-sm({
						font-size: 32px;
					});
					.media-xs({
						font-size: 38px;
					});
			}
			.dresscode-area{
				display: flex;
				flex-flow: row wrap;
				justify-content: center;
				width: 100%;
				.dresscode-area-list{
					width: 150px;
					text-align: center;
					.media-xs({
						width: 33%;
					});
					.media-xxs({
						width: 33%;
					});
					.media-xxxs({
						&:nth-child(1){
							margin-bottom: 20px;
						}
					});
					.dresscode-area-list-color{
						margin-left: auto;
						margin-right: auto;
						width: 50px;
						height: 50px;
						background-color: #e9ddcf;
						border-radius: 100px;
						margin-bottom: 20px;
						-webkit-animation: changedresscode 10s ease-in infinite;
						animation: changedresscode 10s ease-in infinite;
						transition: all 10s ease-in-out;
						animation-timing-function: step-end;
						border: 1px solid #d7d7d7;
					}
					.dresscode-area-list-image{
						margin-bottom: 20px;
						text-align: center;
						img{
							width: 50px;
						}
					}
					.dresscode-area-list-title{
						p{
							font-size: 14px;
							text-align: center;
							.mont-reg;
						}
					}
				}
			}
		}
	/* #endregion dresscode*/
	/* #region carousel*/
	.carousel{
		.carousel-indicators{
			display: none;	;
		}
		&-caption{
			position: absolute;
			bottom: 10%;
			padding: 0;
			left: 10%;
			right: 10%;
			.media-md({
				bottom: 15%;	
			});
			.media-sm({
				bottom: 15%;	
			});
			.media-xs({
				bottom: 20%;
			});
			.media-xxs({
				bottom: 5%;	
			});
			h2{
				.font-name;
				font-size: 100px;
				color: white;
				.media-md({
					font-size: 80px;	
				});
				.media-sm({
					font-size: 66px;
					line-height: 1;	
				});
				.media-xs({
					font-size: 40px;	
				});
				.media-xxs({
					margin-top: 0;
					font-size: 28px;	
				});
				span{
					color: white;
				}
			}
			h3{
				.font-name;
				font-size: 72px;
				color: white;
				margin: 0;
				line-height: 1;
				.media-md({
					font-size: 48px;	
				});
				.media-sm({
					font-size: 32px;	
				});
				.media-xs({
					font-size: 24px;	
				});
				.media-xxs({
					font-size: 16px;	
				});
			}
			h5{
				.font-body;
				color: white;
				font-size: 18px;
				.media-xs({
					font-size: 14px;	
				});
				.media-xxs({
					font-size: 12px;	
				});
			}
		}
		&-inner{
			.fill{
				position: relative;
				// width:100%;
				// height:100vh;
				// background-size: cover;
	
				// display: flex;
				// justify-content: center;
				// align-items: center;
				// overflow: hidden;
				img{
					width:100%;
					// -webkit-user-select: none;
					// -moz-user-select: none;
					// -ms-user-select: none;
					-webkit-animation: zoomin 30s ease-in infinite;
					animation: zoomin 30s ease-in infinite;
					transition: all 1s ease-in-out;
					object-fit: cover;
				}
				
				
			}
			.header1{
				background-image: url("../images/cbl-header.jpg");
			}
			.header1xs{
				background-image: url("../images/cbl-header-portrait.jpg");
			}
			.header2{
				background-image: url("../images/cbl-header2.jpg");
			}
			.header2xs{
				background-image: url("../images/cbl-header2-portrait.jpg");
			}
			.header3{
				background-image: url("../images/cbl-header3.jpg");
			}
			.header3xs{
				background-image: url("../images/cbl-header3-portrait.jpg");
			}
			// .item{
			// 	&:nth-child(1){
			// 		.carousel-caption{
			// 			bottom: 5%;
			// 		}
			// 	}
			// 	&:nth-child(2){
			// 		.carousel-caption{
			// 			bottom: 5%;
			// 			top: auto;
			// 			h5{
			// 				br{
			// 					.media-xxs({
			// 						display: none;	
			// 					});
			// 				}
			// 			}
			// 		}
			// 	}
			// 	&:nth-child(3){
			// 		.carousel-caption{
			// 			bottom: 5%;
			// 			top: auto;
			// 			h5{
			// 				br{
			// 					.media-xxs({
			// 						display: none;	
			// 					});
			// 				}
			// 			}
			// 		}
			// 	}
			// }
		}
	}
	/* #endregion carousel*/
	/* #region youtube*/
	.youtube{
    	display: block;
    	padding: 75px 10% 0px 10%;
    	position: relative;
    	margin-left: auto;
    	margin-right: auto;
    	z-index: 4;
    	// .media-sm({
		// 	padding: 75px 15% 0px 15%;
		// });
    	// .media-xs({
    	// 	padding: 75px 20% 0px 20%;	
		// });
    	// .media-xxs({
    	// 	padding: 75px 10% 0px 10%;	
		// });
    	&-cover{
    		img{
    			width: 100%;
    		}
    	}
    	&-wrap{
    		position: relative;
    		padding-top: 56.3%;
    		overflow: hidden;
    		&-trigger{
    			position: absolute;
    			top: 0;
    			left: 0;
    			z-index: 3;
				width: 100%;
				height: 100%;
				img{
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
    		}
    		iframe{
    			position: absolute;
    			top: 0;
    			left: 0;
    			z-index: 2;
    			width: 100%;
    			height: 100%;
    		}
    	}
    }
	/* #endregion youtube*/
	/* #region Wishes*/
	.N01C{
		.countdown{
			&-area{
				position: relative;
				&-blur{
					position: relative;
					z-index: 2;
					>img{
						position: absolute;
						z-index: 3;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						object-fit: cover;
						clip: rect(50px, 95vw, calc(50vh ~'+' 50px), 5vw);
						.media-sm({
							
						});
						.media-xs({
							
						});
						.media-xxs({
						
							clip: rect(50px, 95vw, calc(70vh ~'+' 50px), 5vw);
						});
					}
					&-clip{
						background-color: rgba(255,255,255,0.7);
						padding: 20px;
						width: 100vw;
						height: 50vh;
						position: relative;
						z-index: 4;
						overflow: hidden;
						.media-sm({
						
						});
						.media-xs({
						
						});
						.media-xxs({
							
							height: 70vh;
						});
						&-content{
							position: relative;
							z-index: 3;
							width: 100%;
							height: 100%;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							padding: 2.5%;
							&-logo{
								text-align: center;
								margin-bottom: 30px;
								img{
									width: 100px;
								}
							}
							&-flower{
								width: 100%;
								text-align: center;
								margin-bottom: 20px;
								img{
									width: 	148px;
								}
							}
							&-subtitle{
								p{
									text-align: center;
									color: #6c6c6c;
									font-size: 12px;
									.mont-reg;
								}
							}
							&-date{
								text-align: center;
								position: relative;
								z-index: 2;
								p{
									position: relative;
									z-index: 3;
									display: inline-block;
									line-height: 1;
									padding-top: 5px;
									padding-bottom: 5px;
									.scehe;
									font-size: 38px;
									color: #6c6c6c;
									text-align: center;
									letter-spacing: 1px;
									.media-xs({
										letter-spacing: 0;
										font-size: 26px;  
										padding-left: 0px;
										padding-right: 0px;	
									});
									.media-xxs({
										font-size: 7.5vw; 
										letter-spacing: 0px; 
										padding-left: 0px;
										padding-right: 0px;	
									});
								}
							}
							&-timer{
								margin-top: 0px;
								&-time{
									display: flex;
									flex-flow: row wrap;
									align-items: center;
									justify-content: center;
									height: 100%;
									&-item{
										width: 60px;
										text-align: center;
										display: flex;
										justify-content: center;
										align-items: center;
										.media-xs({
											width: 50px;	
										});
										&-number{
											display: inline-block;
											color: #6c6c6c;
											font-size: 18px;
											line-height: 1;
											.scehe;
	
										}
										&-label{
											color: #6c6c6c;
											font-size: 14px;
											line-height: 1;
											.mont-reg;
										}
									}
								}
							}
						}
					}
				}
				&-nonblur{
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					z-index: 1;
					
					background-repeat: no-repeat;
					background-position: center;
					background-size: cover;
					.media-xxs({
					
					});
				}
			}
		}
	}
	/* #endregion Wishes*/
	/* #region quotes*/
	.quotes{
		display: block;
		padding: 75px 5% 0px 5%;
		text-align: center;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		.media-lg({
			margin-left: auto;
			margin-right: auto;	
		});
		.media-md({
			margin-left: auto;
			margin-right: auto;	
		});
		img{
			width: 70px;
		}
		p,a{
			text-align: center;
			font-size: 1.8vw;
			.monsieur;
			color: #6c6c6c;
			display: block;
			letter-spacing: 0px;
			line-height: 1.6;
			img{
				width: 350px;
				margin-bottom: 0 !important;
				.media-xxs({
					width: 90%;	
				});
			}
			.media-sm({
				font-size: 22px;	
			});
			.media-xs({
				font-size: 22px;		
				letter-spacing: 0px;
			});
			.media-xxs({
				font-size: 4vw;	
			});
		}
	}
	/* #endregion quotes*/
	/* #region footer*/
	.watermark{
		position: absolute;
		left: 50%;
		bottom: 10px;
		.translatex;
		display: block;
		padding-bottom: 0px;
		.watermark-title{
			p{
				text-align: center;
				font-size: 9px;
				font-style: italic;
				.font-standard;
				color: white;
			}
		}
		.watermark-logo{
			text-align: center;
			img{
				width: 150px;
				margin-left: auto;
				margin-right: auto;
				.white-on;
			}
		}
	} 
	.footer{
		width: 100%;
		margin-top: 100px;
		&-copyright{
			padding: 10px 5% 65px 5%;
			a,p{
				color: #6c6c6c;
				text-align: center;
				font-size: 14px;
			}
		}
	}
	.footer{
		position: relative;
		background-repeat: repeat;
		margin-top: -1px;
		&-img{
			position: relative;
			img{
				width: 199%;
			}
		}
	}
	.footer-bawah{
		height: 62px;
		background-color: #202020;
		width: 100%;
	}
	/* #endregion footer*/
/* #endregion content */

//#region Custom

.modal-qrcode{
	display: flex;
  	justify-content: center;
	img{
		width:50%;
	}
}

//#endregion

/* #endregion */

/* #region CH 14 July 2024 */
.form-group {
	&:not(:last-child){
		position: relative;
		border-bottom: 1px solid #b6b6b6;
	}
	&.focus{
		border-bottom: 2px solid #937259 !important;
	}
	
	.input-title {
		position: absolute;
		max-width: calc(100% - (2 * 8px));
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		left: 0px;
		top: 13px;
		padding: 0 16px;
		transition: 250ms;
		user-select: none;
		pointer-events: none;
		z-index : 1;

		font-size: 16px;
		color: #6c6c6c;
		font-family: 'Montserrat', sans-serif;
		font-weight: 400;
	}
	.input-value, .date-value {
		box-sizing: border-box;
		height: 50px;
		border-radius: 4px 4px 0 0;
		
		//When the input is active, no need border for phone
		// &:focus:not(.input-value-phone){
		//     border-bottom: 2px solid #1a73e8 !important;
		// }
		&:focus{
			background-color: #ebebeb;
		}
	}

	.input-value-phone{
		padding-top: 21px;
		padding-bottom: 8px;
		border-radius: 4px 4px 0 0;
		//padding-left: 62px !important;
	}

	//Role
	.input-role{
		box-sizing: border-box;
		height: 50px;
		border-radius: 4px 4px 0 0;
		padding: 0 16px;
	}
	.textarea-value {
		box-sizing: border-box;
		border-radius: 4px 4px 0 0;
		
		&:focus{
			background-color: #ebebeb;
		}
	}
	//When the input is active, no need blue header for phone
	&.focus{
		.input-title {
			color: #937259;
		}
	}
	//When input contains value, it'll be active
	&.select-title{
		background-color: white;
		select{
			border: none;
		}
	}
	&.active{
		.input-title{
			top: 0;
			left:0;
			font-size: 11px !important;
			padding: 6px 16px 0 16px;
			color: #937259 !important;
		}
		.input-value,.textarea-value{
			padding-top: 20px;
			padding-bottom: 6px;
			padding-left: 16px;
		}
		.date-value{
			padding-top: 20px;
			padding-bottom: 6px;
			padding-left: 14px;
		}
	}
}

//Phone
.phone-form-group {
	border-radius: 4px 4px 0 0;
	border-bottom: 1px solid #b6b6b6;
	.input-title {
		padding-left: 50px !important;
	}
	&.error{
		border: 2px solid red !important;
	}
	&.focus:not(.error){
		border-bottom: 2px solid #937259;
	}
}

.iti__country-container {
	padding: 16px;
}
// .iti__selected-country {
// 	padding: 0 6px 0 20px !important;
// }
.editfnamediv{
	margin-top: 10px;
}

.modal-header p{
	margin-bottom: 0;
}
.modal-header-utility{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	background: white;
	margin-bottom: 8px;
	height: 51.6px;
}
.modal-header-utilitydiv {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.donebtn{
	background: none;
}
.donebtndisabled{
	opacity: 0.2 !important;
}
.modalheaderaccount{
	display: flex;
	align-items: center;
	width: 100%;
	background: white;
	margin-bottom: 8px;
	height: 51.6px;
}
.modalheaderfilter{
	display: flex;
	align-items: center;
	width: 100%;
	.media-sm({
		display: none;
	})
}

.margin20 {
	margin: 20px;
}

#modalWishes, #modalThankyou{
	.modal-close{
		cursor: pointer;
		display: inline-block;
		color: white;
		border-radius: 0 !important;
		outline: 0 !important;
		font-size: 20px;
		border: none;
		background-color: #d2cbc2;
		padding: 6px 40px 8px 40px;
		font-family: 'Montserrat', sans-serif;
		font-weight: 400;
	}
}

#modalThankyou .modal-content-wrap{
	background-color: rgba(255,255,255,1) !important;
}
/* #endregion */


/* #region 11. GALLERY G2 */
.galleries {
    background-color: white;
  }
  .gallery {
    padding: 0 5% 0;
  }
  .gallery-area { 
    display: flex;
    flex-flow: row wrap;
  }
  .gallery-item {
    position: relative;
    list-style-type: none;
    padding: 5px;
    height: 30vw;
    @media (max-width: 767px) {
      height: 35vw;
    }
    @media (max-width: 480px) {
      height: 40vw;
    }
  }
    .gallery-item-44 {
      width: 44%;
    }
    .gallery-item-56 {
      width: 56%;
    }

    .gallery-item-24 {
      width: 24%;
    }
    .gallery-item-38 {
      width: 38%;
    }

    .gallery-item-68 {
      width: 68%;
    }
    .gallery-item-32 {
      width: 32%;
    }
    
  .img-inner{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
  }
  .gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .display-button { 
    cursor: pointer;
  }
/* #endregion */