@import "media.less";
@import "../css/font.css";


@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Display:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Baskervville:ital@0;1&display=swap');

@dark: #383330;
@gray: #b6aea3;
@gray2: #b5ada2;
@dgray: #524b47;
@softgray: #e9e9e7;
@red: #ed1c24;
@bgmenu: #97928c;

@menuwhite: #eaeae8;

.font-title{
	.baskerville;
}
.font-ititle{
	.baskervillei;
}
.font-standard{
	.opsansreg;
}
.font-name{

}
.fbody{
	.monxlight;
}
.fbold{
	.monsmbold;
}
.baskerville{
	font-family: 'Baskervville', serif;
	font-weight: normal;
	font-style: normal;
}
.baskervillei{
	font-family: 'Baskervville', serif;
	font-weight: normal;
	font-style: italic;
}
.libre{
	font-family: 'Libre Baskerville', serif;
	font-weight: normal;
	font-style: normal;

}
.noto{
	font-family: 'Noto Serif Display', serif;
	font-weight: 300;
}
.americana{
	font-family: 'Americana BT';
	src: url('../fonts/AmericanaBT-Roman.eot');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
.monxlight{
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	font-style: normal;
}
.monsmbold{
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-style: normal;
}
.opsansreg{
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-style: normal;
}
.broadsheet{
	font-family: 'Broadsheet LDO';
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
.broadsheeti{
	font-family: 'Broadsheet LDO';
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}
html{
	display: block;
	height: 100%;
 	scroll-behavior: smooth;
 	overflow-x: hidden;
}
*, *::before, *::after {
    box-sizing: border-box;
}
body{
	height: 100%;
	-ms-overflow-style: none;
	/* IE and Edge */
	scrollbar-width: none;

	/* Firefox */
	&::-webkit-scrollbar {
		display: none;
	}
}
img {
	height: auto;
	max-width: 100%;
}
.zerop{
	padding-left:0;
	padding-right:0;
}
.zeropr{
	padding-right: 0;
}
.zeropl{
	padding-left: 0;
}
.zerom{
	margin-left:0;
	margin-right:0;
}
a, a:hover, a:focus, a:active{
	text-decoration: none;
	outline:none;
}
a{
	font-size: 14px;
}
p{
	margin-bottom: 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;
}
.master{
}
.wrapper{
	height: calc(100% ~'-' 57px);
	position: relative;
	.scroll{
	    position: fixed;
	    z-index: 26;
	    top: 0;
	    left: 70px;
	    width: 1px;
	    height: 100vh;
	    background-color: @gray;
	    transform-origin: 0 0;
	    transition: transform .8s cubic-bezier(1, 0, 0, 1);
	    will-change: transform;
	    transition-delay: 0.5s;
	    .media-sm({
	    	left: 50px;
    	});
	    .media-xs({
	    	left: 50px;
    	});
    	.media-xxs({
    		left: 1px;
		});
	    &-indicator{
		    position: absolute;
		    top: 0px;
		    left: -1px;
		    width: 3px;
		    height: 100px;
		    transition: transform .2s linear;
		    background-color: #161616;
	    }
	    &.cny{
	    	.scroll-indicator{
	    		width: 20px;
	    		left: -10px;
	    		background-color: transparent;
	    		background-image: url("../images/cny-pa-scroll.svg");
	    		background-size: 18px;
	    		background-repeat: no-repeat;
	    		background-position: center;
	    	}
	    }
	}
}
.wrap{

	/*background-image: url("../images/marmer-background.jpg");
	background-repeat: no-repeat;
	background-size: cover;*/
	min-height: 100%;
}
.ww-oh{
	overflow: hidden;
	backface-visibility: hidden;
	 transform-style: preserve-3d;
	 position: relative;
}
.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;
	}
	>div{

	}
}
.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;
	}
}

body.show-loader {
  /*  overflow: hidden;*/
}

/*.pa-loader {
    background: lightgray;
    position: fixed;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99;
    transform-origin: 0 0;
    top: 0;
    left: 0;
    #logo-loader{
    	max-width:220px;
    }
    .media-sm({
        .pa-loader {
            transform-origin: 0 0;
        }
        .pa-loader #logo-loader{
            max-width: 30%;
	    }
	});
    .media-xs({
        .pa-loader {
            transform-origin: 0 0;
        }
        .pa-loader #logo-loader{
            max-width: 70%;
	    }
	});
}*/
.loader-animation {
    animation: shrink 0.5s cubic-bezier(0.4, 0, 1, 1);
    -webkit-animation: shrink 0.5s cubic-bezier(0.4, 0, 1, 1);
    transform-origin: 0 0;
}
.button01{
	a{
		.fbold;
		color: @dark;
		font-size: 12pt;
		position: relative;
		display: inline-block;
		&:hover{
			&:after{
				content: "";
				width: 00%;
				.animate;
			}
		}
		&:after{
			content: "";
			width: 100%;
			height: 2px;
			background-color: @gray;
			bottom: -5px;
			left: 50%;
			.translatex;
			position: absolute;
			.animate;
		}
	}
}
.button02{
	position: relative;
	display: inline-block;
	width: 100%;
	&:hover{
		&:after{
			content: "";
			width: 100%;
			.animate;
		}
		a,button{
			color: white;
			.animate;
		}
	}
	&:after{
		content: "";
		width: 0%;
		height: 100%;
		background-color: @dark;
		bottom: 0px;
		left: 0%;
		position: absolute;
		.animate;
		z-index: 1;
	}
	a,button{
		width: 100%;
		.fbold;
		color: @dark;
		font-size: 9pt;
		position: relative;
		z-index: 2;
		display: inline-block;
		border: 1px solid @gray;
		padding: 10px 5px;
		background-color: transparent;
		.animate;
		.media-sm({
			font-size: 8pt;
		});
		.media-xs({
			font-size: 8pt;
		});
	}
}
.htitle{
	position: absolute;
	top: 15px;
	left: 0%;
	z-index: 23;
	width: 100%;
	padding: 0px 10% 0px 10%;
	.media-sm({
		padding: 0px 5% 0px 10%;
	});
	.media-xs({
		padding: 0px 5% 0px 70px;
		top: 32px;
	});

	.media-xxs({
		padding: 0px 5% 0px 5%;
		top: 0;
		width: 100%;
		display: flex;
		height: 58px;
		align-items: flex-end;
		padding-bottom: 12px;
		position: fixed;
		&.affix{
			background-color: white;
		}
	});

	&.white{
		p,a{
			color: white !important;
		}
		&.affix{
			p,a{
				color: @dark !important;
			}
		}
	}
	&.home{
		position: fixed;
		width: 100%;
	}
	&-area{
		display: flex;
		width: 100%;
		&-page{
			width: calc(100% ~'-' 30px);
			.media-xxs({
				padding-left: 30px;
			});
			p{
				color: @dark;
				.fbody;
				font-size: 10pt;
				line-height: 1;
			}
		}
		&-home{
			width: calc(100% ~'-' 30px);
			display: flex;
			.media-xxs({
				padding-left: 30px;
			});
			&-on{
				color: @dark;
				.fbody;
				font-size: 10pt;
				line-height: 1;
				.fbold;
			}
			&-number{
				margin-left: 30px;
				.animate;
				color: @dark;
				.fbody;
				font-size: 10pt;
				line-height: 1;
				span{
					.fbold;
				}
			}
		}
		&-lang{
			width: 30px;
			position: relative;
			&:hover{
				.htitle-area-lang-list{
					&:nth-child(2){
						display: block;
						.animate-fast;
					}
				}
			}
			&-list{
				position: relative;
				a,p{
					color: @dark;
					.fbold;
					font-size: 10pt;
					line-height: 1;
					cursor: pointer;
					display: block;
				}
				&:nth-child(2){
					position: absolute;
					top: 100%;
					left: 0;
					display: none;
					.animate-fast;
					width: 100%;
					a{
						padding: 5px 0;
						color: @dark;
						.animate-fast;
						display: block;
						&:hover{
							color: @red;
							.animate-fast;
						}
					}
				}
			}
		}
	}
}
.modal-centered{
	.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;
		.media-md({
			width: 800px;
		});
		.media-sm({
			width: 600px;
		});
		.media-xs({

			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;
		    width: 100%;
		    pointer-events: auto;
		    background-color: #fff;
		    background-clip: padding-box;
		    border: 1px solid rgba(0,0,0,.2);
		    border-radius: 0.3rem;
		    outline: 0;
		}
	}
}
#modalProduct{
	padding-left: 0 !important;
	.modal-dialog{
		.media-xs({
			margin: 20px;
			min-height: calc(100% ~'-' 40px);
			width: calc(100% ~'-' 40px);
		});
		.modal-close{
			position: absolute;
			right: -20px;
			top: -20px;
			border: none;
			background: @dark !important;
			color: white;
			z-index: 3;
			padding: 0;
			border-radius: 100px;
			width: 40px;
		    height: 40px;
			span{
				font-size: 36px;
				line-height: 1;
			}
		}
		.modal-body{
			position: relative;
			&-slide{
				.slick-prev-custom{
					position: absolute;
					top: 50%;
					left: -15px;
					border: none;
					border-radius: 100px;
					width: 30px;
					height: 30px;
					background-color: white;
					outline: none;
					cursor: pointer;
					display: flex !important;
					align-items: center;
					justify-content: center;
					padding: 0;
					z-index: 2;
					.animate;
					.translatey;
					&:hover{
						.animate;
						box-shadow: inset 0em 0em 10em rgba(0,0,0,0.3) !important;
					}
					img{
						.animate;
						.dark-on;
						width: 15px;
					}
					&.slick-disabled{
						background-color: @gray !important;
						.animate;
						img{
							.white-off;
							.animate;
						}
						&:hover{
							box-shadow: none !important;
						}
					}
				}
				.slick-next-custom{
					position: absolute;
					padding: 0;
					top: 50%;
					right: -15px;
					border: none;
					border-radius: 100px;
					width: 30px;
					height: 30px;
					background-color: white;
					.animate;
					outline: none;
					cursor: pointer;
					line-height: 1;
					z-index: 2;
					display: flex !important;
					align-items: center;
					justify-content: center;
					.translatey;
					&:hover{
						.animate;
						box-shadow: inset 0em 0em 10em rgba(0,0,0,0.3) !important;
					}
					img{
						.dark-on;
						.animate;
						width: 15px;
					}
					&.slick-disabled{
						background-color: @gray !important;
						.animate;
						img{
							.white-off;
							.animate;
						}
						&:hover{
							box-shadow: none !important;
						}
					}
				}
				&-list{
					&-img{

					}
					&-link{
						text-align: center;
						margin-top: 20px;
						>div{
							width: auto;
							a{
								padding-left: 30px;
								padding-right: 30px;
							}
						}
					}
				}
			}
		}
	}
}
.pa{
	min-height: 100%;
	position: relative;
	&-home{
		background-color: white;
		padding: 100px 0% 75px 10%;
		.media-sm({
			padding: 100px 0% 50px 10%;
		});
		.media-xs({
			padding: 100px 0% 50px 70px;
		});
		.media-xxs({
			padding: 100px 0% 50px 10%;
		});
		&-area{
			display: flex;
			flex-flow: row wrap;
			&-left{
				width: 40%;
				margin-right: -19vw;
				position: relative;
				z-index: 3;
				pointer-events: none;

				.media-xs({
					width: 50%;
					margin-right: -50%;
				});
				.media-xxs({
					width: 70%;
					margin-right: -70%;
				});
				&-name{
					max-width: 480px;
					h1{
						.font-title;
						font-size: 89pt;
					}
				}
			}
			&-right{
				width: calc(60% ~'+' 19vw);
				position: relative;
				z-index: 2;
				padding-top: 30px;
				.media-xs({
					width: 100%;
					padding-top: calc(21vw ~'+' 20px);
				});
				.media-xxs({
					padding-top: 29vw;
				});
				&-connect{
					text-align: right;
					margin-bottom: 30px;
					padding-right: 10%;
					a{
						display: inline-block;
						font-size: 10pt;
						color: @dark;
						.fbold;
					}
					.media-xxs({
						display: none;
					});
				}
				&-slide{
					.media-xxs({
						padding-top: 50px;
					});
					&-wrap{
						.slick-prev-custom{
							position: absolute;
							bottom: -50px;
							right: calc(10% ~'+' 42px);
							border: none;
							border-radius: 100px;
							width: 30px;
							height: 30px;
							background-color: #7c7872;
							outline: none;
							cursor: pointer;
							display: flex !important;
							align-items: center;
							justify-content: center;
							padding: 0;
							.animate;
							.media-xs({
								right: calc(5% ~'+' 42px);
							});
							&:hover{
								.animate;
								box-shadow: inset 0em 0em 10em rgba(0,0,0,0.8) !important;
							}
							img{
								.white-on;
								.animate;
								width: 15px;
							}
							&.slick-disabled{
								background-color: @gray !important;
								.animate;
								img{
									.white-off;
									.animate;
								}
								&:hover{
									box-shadow: none !important;
								}
							}
						}
						.slick-next-custom{
							position: absolute;
							padding: 0;
							bottom: -50px;
							right: 10%;
							border: none;
							border-radius: 100px;
							width: 30px;
							height: 30px;
							background-color: #7c7872;
							.animate;
							outline: none;
							cursor: pointer;
							line-height: 1;
							display: flex !important;
							align-items: center;
							justify-content: center;
							.media-xs({
								right: 5%;
							});
							&:hover{
								.animate;
								box-shadow: inset 0em 0em 10em rgba(0,0,0,0.8) !important;
							}
							img{
								.white-on;
								.animate;
								width: 15px;
							}
							&.slick-disabled{
								background-color: @gray !important;
								.animate;
								img{
									.white-off;
									.animate;
								}
								&:hover{
									box-shadow: none !important;
								}
							}
						}
						&-list{
							margin-right: 20px;
							outline: none;
							&-image{
								a{
									display: block;
									height: 400px;
									.media-xs({
										height: 300px;
									});
									img{
										height: 400px;
										.animate;
										.grayscale-off;
										.media-xs({
											height: 300px;
										});
									}
									&:hover{
										img{
											.animate;
											.grayscale-on;
										}
									}
								}
							}
						}
					}
				}
			}
			&-fond{
				width: calc(40% ~'-' 19vw);
				padding-right: 40px;
				margin-top: -50px;
				.media-md({
					padding-right: 20px;
				});
				.media-sm({
					width: 400px;
					margin-top: 0px;
					padding-top: 30px;
				});
				.media-xs({
					width: 400px;
					margin-top: 0px;
					padding-top: 20px;
				});
				&-content{
					margin-bottom: 30px;
					p{
						font-size: 12pt;
						color: @dark;
						.fbody;
						line-height: 1.3;
						.media-md({
							font-size: 11pt;
						});
						.media-xs({
							font-size: 11pt;
						});
					}
				}
				&-link{

				}
			}
		}
	}
	&-socmed{
		position: fixed;
		z-index: 20;
		top: 20px;
		right: 30px;
		display: flex;
		&.light{
			.pa-socmed-list{
				a{
					color: white;
				}
			}
		}
		&-list{
			margin-left: 15px;
			a{
				display: block;
				color: black;
				font-size: 18px;
			}
		}
	}
	&-menu{
		position: fixed;
		top: 15px;
		left: 10%;
		display: flex;
		z-index: 3;
		.media-xxs({
			left: 5%;
		});
		&-list{
			margin-right: 25px;
			.media-xxs({
				margin-right: 20px;
			});
			a{
				.media-xxs({
					font-size: 12px;
				});
			}
		}
	}
	&-journey{
		margin-left: 70px;
		padding: 100px 0% 50px 0;
		min-height: 100%;
		.media-xxs({
			margin-left: 0;
		});
		&-area{
			&-title{
				margin-bottom: 50px;
				padding-left: calc(10% ~'-' 70px);
				padding-right: 10%;
				.media-sm({
					padding-left: calc(10% ~'-' 70px);
				});
				.media-xs({
					padding-left: 0;
				});
				.media-xxs({
					padding-left: 10%;
				});
				img{
					width: 80%;
				}
			}
			&-content{
				&-list{
					padding-left: calc(10% ~'-' 70px);
					padding-right: 10%;
					display: flex;
					flex-flow: row wrap;
					margin-bottom: 50px;
					border-bottom: 1px solid @gray;
					padding-bottom: 50px;
					&:nth-last-child(1){
						border-bottom: none;
					}
					.media-sm({
						padding-left: calc(10% ~'-' 70px);
					});
					.media-xs({
						padding-left: 0;
					});
					.media-xxs({
						padding-left: 10%;
						padding-right: 10%;
					});
					&-thumb{
						width: 200px;
						.media-xs({
							width: 150px;
						});
						.media-xxs({
							width: 100%;
							margin-bottom: 20px;
						});
						a{
							display: block;
							width: 100%;
							img{
								width: 100%;
							}
						}
					}
					&-desc{
						width: calc(100% ~'-' 200px);
						display: flex;
						flex-flow: row wrap;
						padding-left: 50px;
						.media-xs({
							width: calc(100% ~'-' 150px);
							padding-left: 20px;
						});
						.media-xxs({
							width: 100%;
							padding-left: 0;

						});
						&-title{
							width: 100%;
							margin-bottom: 20px;
							a{
								font-size: 40pt;
								color: @dark;
								line-height: 1.1;
								.font-title;
								.media-md({
									font-size: 38pt;
								});
								.media-sm({
									font-size: 32pt;
								});
								.media-xs({
									font-size: 20pt;
								});
							}
						}
						&-link{
							width: 100%;
							align-self: flex-end;
						}
					}
				}
			}
			&-more{
				&-link{
					text-align: center;
					margin-top: 30px;
				}
			}
		}
	}
	&-dj{
		&-header{
			&-slide{
				position: relative;
				&-list{

				}
				ul.slick-dots{
					position: absolute;
					bottom: 20px;
					right: 20px;
					width: 20px;
					li{
						display: block;
						&.slick-active{
							button{
								&::before{
									color: white;
									font-size: 12px;
								}
							}
						}
						button{
							&::before{
								color: white;
								opacity: 1;
							}
						}
					}
				}
			}

		}
		&-content{
			padding: 50px 10% 50px 10%;
			.media-sm({
				padding: 50px 5% 50px 10%;
			});
			.media-xs({
				padding: 50px 10% 50px 70px;
			});
			.media-xxs({
				padding: 50px 10% 50px 10%;
			});
			&-title{
				margin-bottom: 30px;
				h1{
					margin-top: 0;
					color: @dark;
					.font-title;
					font-size: 38pt;
					line-height: 1;
					.media-sm({
						font-size: 28pt;
					});
					.media-xs({
						font-size: 24pt;
					});
					.media-xxs({
						font-size: 20pt;
					});
				}
			}
			&-date{
				margin-bottom: 50px;
				.media-xs({
					margin-bottom: 30px;
				});
				p{
					color: @dark;
					.fbold;
					font-size: 14pt;
					line-height: 1;
					.media-xs({
						font-size: 12pt;
					});
					.media-xxs({
						font-size: 10pt;
					});
				}
			}
			&-video{
				display: block;
				margin-bottom: 30px;
				&-wrap{
					position: relative;
					padding-top: 55.7%;
					iframe{
						position: absolute;
						top: 0;
						left: 0;
						z-index: 2;
						width: 100%;
						height: 100%;
					}
				}
			}
			&-desc{
				p,h1,h2,h3,h4,h5,div,ol,ul,li,span{
					color: @dark;
					font-size: 16pt !important;
					line-height: 1.6 !important;
					.fbody;
					.media-xs({
						font-size: 14pt !important;
					});
					.media-xxs({
						font-size: 12pt !important;
					});
				}
			}
		}
	}
	&-fmd{
		&-header{
			&-slide{
				position: relative;
				&-list{
					position: relative;
					img{
						width: 100%;
					}
					&-content{
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						background-color: rgba(56,51,48,0.8);
						padding: 20px 5% 20px 10%;
						.media-sm({
							padding: 20px 5% 20px 10%;
						});
						.media-xs({
							padding: 20px 5% 20px 70px;
						});
						.media-xxs({
							padding: 20px 5% 50px 5%;
						});
						&-scroll{
							display: flex;
							flex-flow: row wrap;
							margin-bottom: 10px;
							align-items: center;
							justify-content: flex-end;
							&-text{
								p{
									color: white;
									font-size: 10pt;
									.fbody;
									line-height: 1.3;
									.media-xxs({
										font-size: 8pt;
									});
								}
							}
							&-line{
								width: 20%;
								height: 1px;
								background-color: white;
								margin: 0 20px;
								.media-xs({
									width: 10%;
									margin: 0 10px;
								});
								.media-xxs({
									width: 10%;
									margin: 0 5px;
								});
							}
							&-font{
								p{
									color: white;
									font-size: 10pt;
									.fbody;
									line-height: 1.3;
									.media-xxs({
										font-size: 8pt;
									});
								}
							}
						}
						&-name{
							width: 80%;
							margin-left: auto;
							p{
								text-align: right;
								font-size: 24pt;
								color: white;
								.font-title;
								.media-xs({
									font-size: 20pt;
								});
							}
						}
					}
				}
				ul.slick-dots{
					position: absolute;
					bottom: 20px;
					left: 0px;
					width: 100%;
					text-align: left;
					padding-left: 10%;
					.media-sm({
						padding-left: 10%;
					});
					.media-xs({
						padding-left: 70px;
					});
					.media-xxs({
						padding-left: 10%;
					});
					li{
						margin-left: 0;
						margin-right: 0;
						&.slick-active{
							button{
								&::before{
									color: white;
									font-size: 12px;
								}
							}
						}
						button{
							&::before{
								color: white;
								opacity: 1;
							}
						}
					}
				}
			}
			&-video{
				display: block;
				&-wrap{
					position: relative;
					padding-top: 55.7%;
					iframe{
						position: absolute;
						top: 0;
						left: 0;
						z-index: 2;
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		&-content{
			padding: 50px 10% 50px 10%;
			.media-sm({
				padding: 50px 5% 50px 10%;
			});
			.media-xs({
				padding: 50px 10% 50px 70px;
			});
			.media-xxs({
				padding: 50px 10% 50px 10%;
			});
			&-header{
				display: flex;
				flex-flow: row wrap;
				align-items: flex-end;
				margin-bottom: 50px;
				&-left{
					width: 200px;
					.media-xs({
						width: 100%;
						margin-bottom: 50px;
					});
					&-companion{
						margin-bottom: 30px;
						.media-xs({
							margin-bottom: 20px;
						});
						&-title{
							p{
								font-size: 10pt;
								color: @dark;
								.fbody;
							}
						}
						&-name{
							p{
								font-size: 10pt;
								color: @dark;
								.fbold;
							}
						}
					}
					&-event{
						&-title{
							p{
								font-size: 10pt;
								color: @dark;
								.fbody;
							}
						}
						&-name{
							p{
								font-size: 10pt;
								color: @dark;
								.fbold;
							}
						}
					}
				}
				&-right{
					width: calc(100% ~'-' 200px);
					.media-xs({
						width: 100%;
					});
					p{
						font-size: 7vw;
						.font-title;
						color: @dark;
						line-height: 1;
					}
				}
			}
			&-desc{
				p,h1,h2,h3,h4,h5,span,div{
					color: @dark;
					font-size: 16pt !important;
					line-height: 1.6 !important;
					.fbody !important;;
					word-wrap: break-word;
					.media-xs({
						font-size: 14pt !important;
					});
					.media-xxs({
						font-size: 12pt !important;
					});
				}
			}
			&-gallery{
				margin-bottom: 30px;
				.imgWrapper{
					max-height: initial !important;
				}
				.gallery{
					overflow: hidden;
				  &-wrap{
				  	display: grid;
				  	grid-template-columns: repeat(6, 12.65vw);
				  	grid-template-rows: repeat(6, 9vw);
				  	grid-gap: 1%;
				  	padding-left: 0;
				  	width: 100%;
				  	&-list{
				  		display: block;
				  		&-wrap{
				  			background-size: cover;
				  			background-repeat: no-repeat;
				  			width: 100%;
				  			height: 100%;
				  			background-position: center;
				  			img{
				  				display: none;
				  			}
				  		}
				  		&:nth-child(1){
				  			grid-column-start: 1;
				  			grid-column-end: 3;
				  			grid-row-start: 1;
				  			grid-row-end: 3;
				  		}
				  		&:nth-child(2){
				  			grid-column-start: 3;
				  			grid-column-end: 5;
				  			grid-row-start: 1;
				  			grid-row-end: 5;
				  		}
				  		&:nth-child(3){
				  			grid-column-start: 5;
				  			grid-column-end: 7;
				  			grid-row-start: 1;
				  			grid-row-end: 3;
				  		}
				  		&:nth-child(4){
				  			grid-column-start: 1;
				  			grid-column-end: 3;
				  			grid-row-start: 3;
				  			grid-row-end: 7;
				  		}
				  		&:nth-child(5){
				  			grid-column-start: 3;
				  			grid-column-end: 5;
				  			grid-row-start: 5;
				  			grid-row-end: 7;
				  		}
				  		&:nth-child(6){
				  			grid-column-start: 5;
				  			grid-column-end: 7;
				  			grid-row-start: 3;
				  			grid-row-end: 7;
				  		}
				  	}
				  }
				}
			}
		}
		&-more{
			background-color: @dark;
			padding: 50px 10% 50px 10%;
			.media-sm({
				padding: 50px 5% 50px 10%;
			});
			.media-xs({
				padding: 50px 10% 50px 70px;
			});
			.media-xxs({
				padding: 50px 10% 50px 10%;
			});
			&-title{
				margin-bottom: 40px;
				p{
					color: white;
					font-size: 22pt;
					.font-title;
					text-align: center;
				}
			}
			.pa-fond-area-moments-content-list-title a{
				color: white;
			}
			.pa-fond-area-moments-content-list-link .button01 a{
				color: white;
			}
		}
	}
	&-origin{
		padding: 100px 5% 100px 10%;
		background-color: @softgray;
		.media-sm({
			padding: 50px 5% 50px 10%;
		});
		.media-xs({
			padding: 50px 10% 50px 70px;
		});
		.media-xxs({
			padding: 50px 10% 50px 10%;
		});
		&-area{
			display: flex;
			flex-flow: row wrap;
			&-left{
				width: 35%;
				padding-top: 100px;
				.media-md({
					padding-top: 150px;
				});
				.media-xs({
					width: 75%;
					padding-top: 0px;
				});
				img{

				}
			}
			&-right{
				width: 80%;
				margin-left: -15%;
				display: flex;
				flex-flow: row wrap;
				.media-xs({
					margin-left: 0;
					width: 100%;
					padding-left: 0;
					padding-top: 20px;
				});
				&-title{
					margin-bottom: 30px;
					width: 100%;
					p{
						font-size: 48pt;
						.font-title;
						color: @dark;
						line-height: 1.1;
						letter-spacing: 2px;
						.media-md({
							font-size: 36pt;
						});
						.media-sm({
							font-size: 28pt;
						});
						.media-xs({
							font-size: 23pt;
						});
						span{
							.font-ititle;
							display: inline-block;
							position: relative;
							&:before{
								content: "";
								position: absolute;
								width: 100%;
								bottom: 0;
								left: 0;
								height: 1px;
								background-color: @gray2;
							}
						}
					}
				}
				&-subtitle{
					width: 100%;
					padding-left: 30%;
					padding-right: 20%;
					.media-sm({
						padding-right: 10%;
						margin-bottom: 30px;
					});
					.media-xs({
						margin-bottom: 30px;
						padding-right: 10%;
						padding-left: 0;
					});
					p{
						font-size: 19pt;
						color: @dark;
						.fbody;
						line-height: 1.3;
						.media-sm({
							font-size: 16pt;
						});
						.media-xs({
							font-size: 16pt;
						});
					}
				}
				&-link{
					width: 100%;
					align-self: flex-end;
					padding-left: 30%;
					.media-xs({
						padding-left: 0;
					});
					a{
						.fbold;
						font-size: 10pt;
						color: @dark;
						display: inline-block;
						position: relative;
						&:after{
							content: "";
							position: absolute;
							height: 2px;
							left: 0;
							bottom: 0;
							width: 100%;
							background-color: @gray2;
						}
					}
				}

			}
		}
	}
	&-connect{
		background-color: white;
		padding: 100px 10% 200px 10%;
		background-image: url("../images/connect-title-right.svg");
		background-size: 700px;
		background-repeat: no-repeat;
		background-position: 90% 100%;
		.media-sm({
			background-size: 600px;
		});
		.media-xs({
			background-size: 400px;
			padding: 50px 10% 150px 70px;
		});
		.media-xxs({
			padding: 50px 10% 100px 10%;
			background-size: 300px;
		});
		&.page{
			background-image: none;
			padding: 100px 10% 50px 10%;
			.media-sm({
				padding: 100px 5% 50px 10%;
			});
			.media-xs({
				padding: 100px 5% 50px 70px;
			});
			.media-xxs({
				padding: 100px 5% 50px 5%;
			});
		}
		&-area{
			display: flex;
			flex-flow: row wrap;
			&-title{
				width: 100%;
				margin-bottom: 50px;
				.media-xs({
					margin-bottom: 30px;
				});
				img{
					width: 80%;
					.media-xs({
						width: 90%;
					});
				}
			}
			&-left{
				padding-top: 30px;
				width: 50%;
				.media-xs({
					width: 100%;
					order: 2;
				});
				&-address{
					margin-bottom: 20px;
					p{
						.fbody;
						font-size: 12pt;
						color: @dark;
						line-height: 1.6;
						.media-sm({
							font-size: 11pt;
						});
						.media-xxs({
							font-size: 10pt;
						});
					}
				}
				&-label{
					margin-bottom: 5px;
					p{
						.fbody;
						font-size: 10pt;
						color: @gray2;
						line-height: 1.3;
					}
				}
				&-hours{
					margin-bottom: 20px;
					p{
						.fbody;
						font-size: 12pt;
						color: @dark;
						line-height: 1.6;
						.media-sm({
							font-size: 11pt;
						});
						.media-xxs({
							font-size: 10pt;
						});
					}
				}
				&-contact{
					&-list{
						margin-bottom: 10px;
						p{
							.fbody;
							font-size: 12pt;
							color: @dark;
							line-height: 1.6;
							.media-sm({
								font-size: 11pt;
							});
							.media-xxs({
								font-size: 10pt;
							});
						}
					}
				}
			}
			&-right{
				width: 50%;
				.media-xs({
					width: 100%;
					order: 1;
				});
				&-subtitle{
					margin-bottom: 30px;
					p{
						font-size: 19pt;
						color: @dark;
						.fbody;
						line-height: 1.3;
						.media-sm({
							font-size: 15pt;
						});
						.media-xs({
							font-size: 14pt;
						});
					}
				}
				&-form{
					display: block;
					width: 100%;
					form{
						display: flex;
						flex-flow: row wrap;
						width: 100% !important;
						padding: 0 !important;
						margin: 0 !important;
						.form-group{
							width: 100%;
							margin-bottom: 20px;
							&.half{
								width: 50%;
								.media-xs({
									width: 100%;
									padding-left: 0 !important;
									padding-right: 0 !important;
								});
							}
							input{
								display: block;
								width: 100%;
								border: none;
								border-bottom: 1px solid @gray;
								font-size: 12pt;
								color: @dark;
								padding: 10px 10px;
								.fbody;
								&:focus{
									border-bottom: 1px solid @dark;
									outline: none;
								}
								.media-sm({
									font-size: 11pt;
								});
								.media-xs({
									font-size: 11pt;
								});
							}
							select{
								width: 100%;
								display: block;
								border: none;
								border-bottom: 1px solid @gray;
								font-size: 12pt;
								color: @dark;
								padding: 10px 10px;
								overflow-x: hidden;
								.fbody;
								&:focus{
									border-bottom: 1px solid @dark;
									outline: none;
								}
								.media-sm({
									font-size: 11pt;
								});
								.media-xs({
									font-size: 11pt;
								});
								option{
									background-color: #eaeae8;
									color: @dark;
									font-size: 12pt;
									.fbody;
									padding: 5px 0;
									height: 50px;
									width: 100%;
									.media-sm({
										font-size: 11pt;
									});
									.media-xs({
										font-size: 11pt;
									});
								}
							}
							&.button{
								display: flex;
								flex-flow: row wrap;
								.form-group-list{
									width: calc(40% ~'-' 10px);
									&:nth-child(1){
										.media-xxs({
											margin-bottom: 15px;
										});
									}
									&:nth-last-child(1){
										margin-left: 20px;
										.media-xxs({
											margin-left: 0;
										});
									}
									.media-md({
										width: calc(50% ~'-' 10px);
									});
									.media-sm({
										width: calc(50% ~'-' 10px);
									});
									.media-xs({
										width: calc(50% ~'-' 10px);
									});
									.media-xxs({
										width: 100%;
									});
								}
							}
							button{
								display: block;
							}
						}
					}
				}
			}
		}
	}
	&-fond{
		&-area{
			padding: 100px 10% 50px 10%;
			.media-sm({
				padding: 100px 5% 50px 10%;
			});
			.media-xs({
				padding: 100px 10% 50px 70px;
			});
			.media-xxs({
				padding: 100px 10% 50px 10%;
			});
			&-title{
				width: 100%;
				margin-bottom: 50px;
				.media-xs({
					margin-bottom: 30px;
				});
				img{
					width: 80%;
					.media-xs({
						width: 90%;
					});
				}
			}
			&-subtitle{
				width: 40%;
				margin-bottom: 50px;
				.media-md({
					width: 50%;
				});
				.media-sm({
					width: 65%;
				});
				.media-xs({
					width: 80%;
				});
				.media-xxs({
					width: 100%;
				});
				p{
					.fbody;
					font-size: 14pt;
					color: @dark;
					.media-sm({
						font-size: 13pt;
					});
					.media-xs({
						font-size: 12pt;
					});
					.media-xxs({

					});
				}
			}
			&-moments{
				&-filter{
					display: flex;
					flex-flow: row wrap;
					margin-bottom: 50px;
					.media-xs({
						align-items: flex-start;
					});
					&-category{
						width: calc(100% ~'-' 150px);
						display: flex;
						flex-flow: row wrap;
						align-items: center;

						&-title{
							width: 100px;
							.media-xs({
								width: 100%;
								padding-left: 10px;
							});
							p{
								font-size: 12pt;
								color: @dark;
								.fbody;
							}
						}
						&-form{
							width: calc(100% ~'-' 100px);
							.media-xs({
								width: 100%;
							});
							form{
								select{
									-webkit-appearance: none;
									  -moz-appearance: none;
									  background: transparent;
									  background-image: url("../images/dropdown-arrow.svg");
									  background-repeat: no-repeat;
									  background-size: 14px;
									 background-position: calc(100% ~'-' 10px) calc(50% ~'-' 1px);
									  border: none;
									  font-size: 12pt;
									  color: @dark;
									  .fbody;
									  padding: 5px 50px 5px 10px;
									  outline: none;
								}
							}
						}
					}
					&-thumbnail{
						width: 150px;
						display: flex;
						flex-flow: row wrap;
						text-align: right;
						margin-left: auto;
						justify-content: flex-end;
						&-list{
							width: 30px;
							margin-left: 20px;
							.media-xs({
								width: 20px;
								margin-left: 15px;
							});
							&.active, &:hover{
								img{
									opacity: 1;
								}
							}
							img{
								width: 30px;
								opacity: 0.4;
								.media-xs({
									width: 20px;
								});
								.media-xxs({

								});
							}
						}
					}
				}
				&-content{
					display: flex;
					flex-flow: row wrap;
					&.simplelist{
						.pa-fond-area-moments-content-list{
							width: 100%;
							display: flex;
							flex-flow: row wrap;
							margin-bottom: 40px;
							margin-left: 0 !important;
							margin-right: 0 !important;
							&-image{
								width: 100px;
								margin-bottom: 0;
								.media-xs({
									width: 75px;
								});
								.media-xxs({
									width: 50px;
								});
							}
							&-title{
								min-height: auto;
								margin-bottom: 20px;
								a{
									.media-xs({
										font-size: 12pt;
									});
								}
							}
							&-detail{
								width: calc(100% ~'-' 100px);
								padding-left: 20px;
								.media-xs({
									width: calc(100% ~'-' 75px);
								});
								.media-xxs({
									width: calc(100% ~'-' 50px);
								});
							}
							&-link{
								align-self: flex-end;
								a{
									font-size: 10pt;
									.media-xs({
										font-size: 8pt;
									});
								}
							}
						}
					}
					&-list{
						margin-bottom: 60px;
						.media-lg({
							width: 32%;
							margin-left: 1%;
							margin-right: 1%;
							&:nth-child(3n+1){
								margin-left: 0;
							}
							&:nth-child(3n+3){
								margin-right: 0;
							}
						});
						.media-md({
							width: 32%;
							margin-left: 1%;
							margin-right: 1%;
							&:nth-child(3n+1){
								margin-left: 0;
							}
							&:nth-child(3n+3){
								margin-right: 0;
							}
						});
						.media-sm({
							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: 49%;
							margin-left: 1%;
							margin-right: 1%;
							&:nth-child(2n+1){
								margin-left: 0;
							}
							&:nth-child(2n+2){
								margin-right: 0;
							}
						});
						.media-xxs({
							width: 100%;
							margin-left: 0% !important;
							margin-right: 0% !important;

						});
						&:hover{
							img{
								.animate;
								.grayscale-on;
							}
						}
						img{
							width: 100%;
							.animate;
							.grayscale-off;
						}
						&-image{
							margin-bottom: 20px;
							a{
								display: block;

							}
						}
						&-title{
							margin-bottom: 30px;
							min-height: 100px;
							a{
								font-size: 14pt;
								color: @dark;
								.fbody;
							}
						}
						&-link{

						}
					}
				}
			}
		}
	}
	&-theorigin{
		&-header{
			display: flex;
			align-items: flex-start;
			flex-flow: row wrap;
			padding: 100px 15% 100px 15%;
			.media-sm({
				padding: 100px 5% 50px 10%;
			});
			.media-xs({
				padding: 100px 10% 50px 70px;
			});
			.media-xxs({
				padding: 100px 10% 50px 10%;
			});
			&-logo{
				width: calc(100% ~'-' 200px);
				margin-right: -300px;
				position: relative;
				z-index: 3;
				pointer-events: none;
				/*&:after{
					content:"";
					position: absolute;
					right: -25%;
					width: 50%;
					height: 1px;
					bottom: 5vw;
					background-color: @dark;
					.media-xs({
						display: none;
					});
				}*/
				.media-xs({
					margin-right: 0;
					width: 80%;
				});
				.media-xxs({
					margin-right: 0;
					width: 80%;
				});
				&-name{
					h1{
						.font-title;
						font-size: 89pt;
					}
				}
			}
			&-slideshow{
				width: 500px;
				position: relative;
				z-index: 2;
				padding-top: 12vw;
				padding-right: 100px;
				.media-xs({
					margin-top: -30px;
					padding-top: 0;
					width: 90%;
					padding-right: 0;
				});
				.media-xxs({
					margin-top: -30px;
					padding-top: 0;
					width: 100%;
					padding-right: 0;
				});
				&-connect{
					text-align: right;
					margin-bottom: 30px;
					padding-right: 10%;
					a{
						display: inline-block;
						font-size: 10pt;
						color: @dark;
						.fbold;
					}
				}
				&-slide{
					&-wrap{
						ul.slick-dots{
							position: absolute;
							top: 20px;
							right: -20px;
							width: 20px;
							.media-xxs({
								right: 20px;
								top: auto;
								bottom: 20px;
							});
							li{
								display: block;
								&.slick-active{
									button{
										&::before{
											color: @dark;
											font-size: 12px;
											.media-xxs({
												color: white;
											});
										}
									}
								}
								button{
									&::before{
										color: @gray;
										opacity: 1;
										.media-xxs({
											color: white;
										});
									}
								}
							}
						}
						.slick-prev-custom{
							position: absolute;
							bottom: -50px;
							right: calc(10% ~'+' 42px);
							border: none;
							border-radius: 100px;
							width: 30px;
							height: 30px;
							background-color: #7c7872;
							outline: none;
							cursor: pointer;
							display: flex !important;
							align-items: center;
							justify-content: center;
							padding: 0;
							.animate;
							&:hover{
								.animate;
								box-shadow: inset 0em 0em 10em rgba(0,0,0,0.8) !important;
							}
							img{
								.white-on;
								.animate;
								width: 15px;
							}
							&.slick-disabled{
								background-color: @gray !important;
								.animate;
								img{
									.white-off;
									.animate;
								}
								&:hover{
									box-shadow: none !important;
								}
							}
						}
						.slick-next-custom{
							position: absolute;
							padding: 0;
							bottom: -50px;
							right: 10%;
							border: none;
							border-radius: 100px;
							width: 30px;
							height: 30px;
							background-color: #7c7872;
							.animate;
							outline: none;
							cursor: pointer;
							line-height: 1;
							display: flex !important;
							align-items: center;
							justify-content: center;
							&:hover{
								.animate;
								box-shadow: inset 0em 0em 10em rgba(0,0,0,0.8) !important;
							}
							img{
								.white-on;
								.animate;
								width: 15px;
							}
							&.slick-disabled{
								background-color: @gray !important;
								.animate;
								img{
									.white-off;
									.animate;
								}
								&:hover{
									box-shadow: none !important;
								}
							}
						}
						&-list{
							outline: none;
							&-image{
								a{
									display: block;
									height: 400px;
									width: 400px;
									background-size: cover;
									background-repeat: no-repeat;
									background-position: center;
									.media-xxs({
										height: 90vw;
										width: 90vw;
									});
								}
							}
						}
					}
				}
			}
		}
		&-content{
			position: relative;
			&-menu{
				position: absolute;
				top: 100px;
				left: 10vw;
				z-index: 4;
				&.fixed{
					position: fixed;
					z-index: 10;
				}
				.media-sm({
					top: 50px;
				});
				.media-xs({
					top: 53px;
					left: 70px;
				});
				.media-xxs({
					display: none;
				});
				&-list{
					margin-bottom: 7px;
					&.active{
						a{
							color: @dark;
						}
					}
					&:nth-last-child(1){
						&.active{
							a{
								color: white;
							}
						}
					}
					a{
						text-align: right;
						display: block;
						color: @gray;
						font-size: 10pt;
						.fbold;
					}
				}
			}
			&-identity{
				padding: 100px 5% 0 30%;
				background-color: @softgray;
				.media-sm({
					padding: 50px 5% 0 30%;
				});
				.media-xs({
					padding: 50px 10% 0 180px;
				});
				.media-xxs({
					padding: 50px 10% 0 10%;
				});
				&-desc{
					margin-bottom: 30px;
					p{
						font-size: 19pt;
						color: @dark;
						line-height: 1.3;
						.fbody;
						.media-xs({
							font-size: 16pt;
						});
						.media-xxs({
							font-size: 14pt;
						});
					}
				}
				&-special{
					img{
						width: 70%;
						.media-xxs({
							width: 100%;
						});
					}
				}
			}
			&-boards{
				padding: 50px 5% 50px 30%;
				.media-sm({
					padding: 50px 5% 50px 30%;
				});
				.media-xs({
					padding: 50px 10% 50px 180px;
				});
				.media-xxs({
					padding: 50px 10% 50px 10%;
				});
				&-image{
					margin-bottom: 30px;
				}
				&-desc{
					margin-bottom: 30px;
					p{
						font-size: 19pt;
						color: @dark;
						line-height: 1.3;
						.fbody;
						.media-xs({
							font-size: 16pt;
						});
						.media-xxs({
							font-size: 14pt;
						});
					}
				}
				&-link{
					&-list{
						position: relative;
						margin-bottom: 20px;
						a{
							position: relative;
							display: block;
							.font-title;
							font-size: 4vw;
							color: @dark;
							line-height: 1;
							display: inline-block;
							.media-xxs({
								font-size: 7vw;
							});
							&:after{
								content: "";
								position: absolute;
								bottom: 0;
								left: 0;
								width: 100%;
								height: 1px;
								background-color: @bgmenu;
							}
							span{
								font-size: 2vw;
								.broadsheet;
								margin-right: 20px;
								color: @bgmenu;
								.media-xxs({
									font-size: 3vw;
								});
							}
						}
					}
				}
			}
			&-witness{
				padding: 150px 10% 150px 30%;
				background-color: @dark;
				background-image: url("../images/quote-element.svg");
				background-repeat: no-repeat;
				background-position: 95% 20%;
				background-size: 150px;
				.media-lg({
					padding: 250px 10% 250px 30%;
				});
				.media-sm({
					padding: 100px 5% 100px 30%;
				});
				.media-xs({
					padding: 100px 10% 100px 180px;
					background-position: 90% 5%;
				});
				.media-xxs({
					padding: 100px 10% 100px 10%;
					background-position: 70% 10%;
				});
				&-slide{
					margin-left: 0%;
					.media-sm({
						margin-left: 0;
					});
					.media-xs({
						margin-left: 0;
					});
					.slick-prev-custom{
						position: absolute;
						bottom: 0px;
						left: 120px;
						border: none;
						border-radius: 100px;
						width: 30px;
						height: 30px;
						background-color: white;
						outline: none;
						z-index: 9;
						cursor: pointer;
						display: flex !important;
						align-items: center;
						justify-content: center;
						padding: 0;
						.animate-fast;
						.media-sm({
							left: 70px;
						});
						.media-xs({
							bottom: -50px;
							left: 0;
						});
						&:hover{
							.animate-fast;
							background-color: @dgray;
							img{
								.animate-fast;
								.white-on;
							}
						}
						img{
							.animate-fast;
							.dark-on;
							width: 15px;
						}
						&.slick-disabled{
							background-color: @dgray !important;
							.animate;
							img{
								.white-off;
								.animate;
							}
							&:hover{
								box-shadow: none !important;
							}
						}
					}
					.slick-next-custom{
						position: absolute;
						padding: 0;
						bottom: 0px;
						left: 160px;
						border: none;
						border-radius: 100px;
						width: 30px;
						height: 30px;
						background-color: white;
						.animate-fast;
						outline: none;
						cursor: pointer;
						line-height: 1;
						display: flex !important;
						z-index: 9;
						align-items: center;
						justify-content: center;
						.media-sm({
							left: 110px;
						});
						.media-xs({
							bottom: -50px;
							left: 40px;
						});
						&:hover{
							.animate-fast;
							background-color: @dgray;
							img{
								.animate-fast;
								.white-on;
							}
						}
						img{
							.animate-fast;
							.dark-on;
							width: 15px;
						}
						&.slick-disabled{
							background-color: @dgray !important;
							.animate;
							img{
								.white-off;
								.animate;
							}
							&:hover{
								box-shadow: none !important;
							}
						}
					}
					&-list{
						outline: none;
						display: flex !important;
						flex-flow: row wrap;
						&-image{
							width: 200px;
							border-radius: 200px;
							img{
								border-radius: 200px;
							}
							.media-sm({
								width: 150px;
							});
							.media-xs({
								width: 200px;
								margin-bottom: 50px;
							});
						}
						&-desc{
							width: calc(100% ~'-' 200px);
							padding-left: 50px;
							.media-sm({
								padding-left: 30px;
							});
							.media-xs({
								width: 100%;
								padding-left: 0;
							});
							&-name{
								margin-bottom: 30px;
								p{
									color: white;
									font-size: 20pt;
									.font-title;
									.media-xs({
										font-size: 18pt;
									});
								}
							}
							&-testimony{
								p{
									color: white;
									font-size: 16pt;
									line-height: 1.3;
									.fbody;
									.media-lg({
										font-size: 14pt;
									});
									.media-xxs({
										font-size: 14pt;
									});
								}
							}
						}
					}
				}
			}
			/*&-thearts{
				padding: 100px 5% 30px 30%;
				background-color: @softgray;
				.media-sm({
					padding: 50px 5% 30px 30%;
				});
				.media-xs({
					padding: 50px 10% 30px 180px;
				});
				.media-xxs({
					padding: 50px 10% 30px 10%;
				});
				&-area{
					display: flex;
					flex-flow: row wrap;
					align-items: flex-start;
					&-list{
						width: 50%;
						margin-bottom: 40px;
						&:nth-child(odd){
							padding-right: 10px;
						}
						&:nth-child(even){
							padding-left: 10px;
						}
						&:nth-child(1){
							.media-xs({
								order: 1;
							});
						}
						&:nth-child(2){
							.media-xs({
								order: 6;
							});
						}
						&:nth-child(3){
							.media-xs({
								order: 2;
							});
						}
						&:nth-child(4){
							.media-xs({
								order: 7;
							});
						}
						&:nth-child(5){
							.media-xs({
								order: 3;
							});
						}
						&:nth-child(6){
							.media-xs({
								order: 8;
							});
						}
						&:nth-child(7){
							.media-xs({
								order: 4;
							});
						}
						&:nth-child(8){
							.media-xs({
								order: 9;
							});
						}
						&:nth-child(9){
							.media-xs({
								order: 5;
							});
						}
						&:nth-child(10){
							.media-xs({
								order: 10;
							});
						}
						.media-xs({
							width: 100%;
							padding-left: 0 !important;
							padding-right: 0 !important;
						});
						&-title{
							p{
								color: @dark;
								line-height: 1.3;
								.fbody;
								font-size: 22pt;
								span{
									font-size: 32pt;
								}
							}
						}
						&-meaning{
							margin-bottom: 20px;
							p{
								font-size: 14pt;
								color: @dark;
								line-height: 1.3;
								.fbody;
								.media-xs({
									font-size: 12pt;
								});
							}
						}
						&-bible{
							p{
								font-size: 10pt;
								color: @dark;
								line-height: 1.3;
								.fbody;
								span{
									display: block;
								}
								.media-xs({
									font-size: 12pt;
								});
							}
						}
					}
				}
				&-desc{
					margin-bottom: 30px;
					p{
						font-size: 19pt;
						color: @dark;
						line-height: 1.3;
						.fbody;
						.media-xs({
							font-size: 16pt;
						});
						.media-xxs({
							font-size: 14pt;
						});
					}
				}
				&-special{
					img{
						width: 70%;
						.media-xxs({
							width: 100%;
						});
					}
				}
			}*/
			&-thearts{
				padding: 100px 5% 30px 30%;
				background-color: @softgray;
				.media-sm({
					padding: 50px 5% 30px 30%;
				});
				.media-xs({
					padding: 50px 10% 30px 180px;
				});
				.media-xxs({
					padding: 50px 10% 30px 10%;
				});
				&-title{
					margin-bottom: 20px;
					&-list{
						cursor: pointer;
						outline: none;
						width: 6vw;
						&.slick-current{
							p{
								font-weight: bold;
								color: @dark;
							}
						}
						&:nth-child(1){
							text-align: left;
						}
						&:nth-child(2){
							text-align: left;
						}
						&:nth-child(3){
							text-align: left;
						}
						&:nth-child(4){
							text-align: left;
							padding-left: 7px;
							.media-xs({
								padding-left: 4px;
							});
						}
						&:nth-child(5){
							text-align: left;
						}
						&:nth-child(6){
							text-align: left;
						}
						&:nth-child(7){
							text-align: left;
						}

						&:nth-child(8){
							text-align: right;
						}
						&:nth-child(9){
							text-align: right;
						}
						&:nth-child(10){
							text-align: right;
							p{
								/*padding-right: 7px;*/
							}
						}
						p{
							color: @gray;
							line-height: 1.3;
							.font-title;
							font-size: 5vw;
							.media-xxs({
								font-size: 7vw;
							});
						}
						.media-xs({
							width: calc(9vw ~'-' 20px);
						});
						.media-xxs({
							width: 8vw;
						});
					}
				}
				&-area{
					/*display: flex;
					flex-flow: row wrap;
					align-items: flex-start;*/
					&-list{
						margin-bottom: 40px;
						.media-xs({

						});
						&-title{
							p{
								color: @dark;
								line-height: 1.3;
								.fbody;
								font-size: 22pt;
								span{
									font-size: 32pt;
								}
							}
						}
						&-meaning{
							margin-bottom: 20px;
							p{
								font-size: 16pt;
								color: @dark;
								line-height: 1.3;
								.fbody;
								.media-xs({
									font-size: 14pt;
								});
							}
						}
						&-bible{
							p{
								font-size: 12pt;
								color: @dark;
								line-height: 1.3;
								.fbody;
								span{
									display: block;
								}
								.media-xs({
									font-size: 12pt;
								});
							}
						}
					}
				}
				&-desc{
					margin-bottom: 30px;
					p{
						font-size: 19pt;
						color: @dark;
						line-height: 1.3;
						.fbody;
						.media-xs({
							font-size: 16pt;
						});
						.media-xxs({
							font-size: 14pt;
						});
					}
				}
				&-special{
					img{
						width: 70%;
						.media-xxs({
							width: 100%;
						});
					}
				}
			}
		}
	}
	.christmaspack, .cnypack{
		display: none;
	}
	&.snow{
		.christmaspack{
			display: block;
			#canvas{
				position: absolute;
				left: 0;
				bottom: 0;
				z-index: 6;
				pointer-events: none;
				/*transform: rotate(180deg);*/
			}
		}
		.pa-home, .pa-theorigin-header{
			background-image: url("../images/christmas2-bg-top.png"),
								url("../images/christmas2-bg.png");
			background-size: 80%, cover;
			background-repeat: no-repeat;
			background-position: left bottom, center;

			/*background-image: url("../images/christmas-bg-top.png");
			background-size: 100%;
			background-repeat: no-repeat;
			background-position: center calc(100% ~'+' 10vw);*/

			.media-xxs({
				background-size: 135%;
				background-position: 10% bottom, center;
			});
		}
		.pa-connect{
			/*background-image: url("../images/christmas-bg-bottom2.svg"),
							url("../images/christmas-bg-bottom.png");
			background-size: 20%, 100%;
			background-repeat: no-repeat;
			background-position: 95% 5%, bottom center;*/

			background-image: url("../images/christmas2-bg-bottom-left.png"),
							url("../images/christmas2-bg-bottom-right.png"),
							url("../images/christmas2-bg.png");
			background-size: 600px, 125px, cover;
			background-repeat: no-repeat;
			background-position: left bottom, right bottom, center;

			padding: 50px 10% 150px 10%;
			.media-md({
				background-size: 500px, 125px, cover;
			});
			.media-sm({
				background-size: 450px, 100px, cover;
			});
			.media-xs({
				background-position: -40px bottom, right bottom, center;
				background-size: 300px, 75px, cover;
			});
			.media-xxs({

			});
			&.page{
				/*background-image: url("../images/christmas-bg-bottom.png");
				background-size: 100%;
				background-repeat: no-repeat;
				background-position: bottom center;
				.media-xs({
					background-size: 100%;
					background-position: bottom center;
					padding: 100px 5% 100px 70px;
				});
				.media-xxs({
					background-size: 115%;
					background-position: left bottom;
					padding: 100px 5% 100px 5%;
				});*/
				background-image: url("../images/christmas2-bg-bottom-left.png"),
								url("../images/christmas2-bg-bottom-right.png"),
								url("../images/christmas2-bg.png");
				background-size: 600px, 125px, cover;
				background-repeat: no-repeat;
				background-position: left bottom, right bottom, center;

				padding: 50px 10% 150px 10%;
				.media-md({
					background-size: 500px, 125px, cover;
				});
				.media-sm({
					background-size: 450px, 100px, cover;
				});
				.media-xs({
					background-position: -40px bottom, right bottom, center;
					background-size: 300px, 75px, cover;
				});
				.media-xxs({

				});
			}
		}
		.pa-origin, .pa-theorigin-content-identity, .pa-theorigin-content-thearts{
			background-image: url("../images/christmas-bg-snow1.svg"),
								url("../images/christmas-bg-snow2.svg");
			background-size: 20%, 30%;
			background-repeat: no-repeat;
			background-position: 5% 95%, 95% 5%;
			.media-xs({
				background-size: 25%, 35%;
			});
		}
		.pa-home-area-left-name{
			>img{
				display: none;
			}
		}
		.pa-theorigin-header-logo{
			>img{
				display: none;
			}
		}
		.pa-journey-wrap, .pa-dj{
			/*background-image: url("../images/christmas-bg-bottom.png");
			background-size: 100%;
			background-repeat: no-repeat;
			background-position: bottom center;
			background-color: white;
			.media-xs({
				background-size: 100%;
				background-position: bottom center;
			});
			.media-xxs({
				background-size: 115%;
				background-position: left bottom;
			});*/
			background-image: url("../images/christmas2-bg-bottom-left.png"),
							url("../images/christmas2-bg-bottom-right.png");
			background-size: 400px, 100px;
			background-repeat: no-repeat;
			background-position: left bottom, right bottom;

			padding: 50px 10% 150px 10%;
			.media-md({
				background-size: 450px, 100px;
			});
			.media-sm({
				background-size: 400px, 100px;
			});
			.media-xs({
				background-position: -40px bottom, right bottom;
				background-size: 300px, 75px;
			});
		}
		.pa-theorigin-content-boards{
			/*background-image: url("../images/christmas-bg-bottom2.svg"),
							url("../images/christmas-bg-bottom.png");
			background-size: 20%, 100%;
			background-repeat: no-repeat;
			background-position: 20% calc(100% ~'-' 30vw), bottom center;
			.media-xs({
				background-size: 30%, 100%;
				background-position: 20% calc(100% ~'-' 30vw), bottom center;
			});
			.media-xxs({
				background-size: 30%, 115%;
				background-position: 95% 2%, left bottom;
			});*/
			background-image: url("../images/christmas2-bg-bottom-left.png"),
							url("../images/christmas2-bg-bottom-right.png");
			background-size: 400px, 100px;
			background-repeat: no-repeat;
			background-position: left bottom, right bottom;

			padding: 50px 10% 150px 10%;
			.media-md({
				background-size: 450px, 100px;
			});
			.media-sm({
				background-size: 400px, 100px;
			});
			.media-xs({
				background-position: -40px bottom, right bottom;
				background-size: 300px, 75px;
			});
		}
		.pa-fond{
			background-image: url("../images/christmas-bg-top.png");
			background-size: 100%;
			background-repeat: no-repeat;
			background-position: center 200px;
			.media-xxs({
				background-size: 115%;
				background-position: left 275px;
			});
			&-area{
				/*background-image: url("../images/christmas-bg-bottom2.svg"),
								url("../images/christmas-bg-bottom.png");
				background-size: 20%, 100%;
				background-repeat: no-repeat;
				background-position: 80% calc(100% ~'-' 30vw), bottom center;
				.media-xs({
					background-size: 30%, 100%;
					background-position: 80% calc(100% ~'-' 30vw), bottom center;
				});
				.media-xxs({
					background-size: 30%, 115%;
					background-position: 80% calc(100% ~'-' 30vw), left bottom;
				});*/
				background-image: url("../images/christmas2-bg-bottom-left.png"),
								url("../images/christmas2-bg-bottom-right.png");
				background-size: 600px, 125px;
				background-repeat: no-repeat;
				background-position: left bottom, right bottom;

				padding: 50px 10% 150px 10%;
				.media-md({
					background-size: 500px, 125px;
				});
				.media-sm({
					background-size: 450px, 100px;
				});
				.media-xs({
					background-position: -40px bottom, right bottom;
					background-size: 300px, 75px;
				});
				.media-xxs({

				});
			}
		}
		.pa-fmd-content{
			/*background-image: url("../images/christmas-bg-bottom2.svg"),
							url("../images/christmas-bg-bottom.png");
			background-size: 20%, 100%;
			background-repeat: no-repeat;
			background-position: 80% calc(100% ~'-' 30vw), bottom center;
			.media-xs({
				background-size: 30%, 100%;
				background-position: 80% calc(100% ~'-' 30vw), bottom center;
			});
			.media-xxs({
				background-size: 30%, 115%;
				background-position: 80% calc(100% ~'-' 30vw), left bottom;
			});*/
			background-image: url("../images/christmas2-bg-bottom-left.png"),
							url("../images/christmas2-bg-bottom-right.png");
			background-size: 400px, 100px;
			background-repeat: no-repeat;
			background-position: left bottom, right bottom;

			padding: 50px 10% 150px 10%;
			.media-md({
				background-size: 450px, 100px;
			});
			.media-sm({
				background-size: 400px, 100px;
			});
			.media-xs({
				background-position: -40px bottom, right bottom;
				background-size: 300px, 75px;
			});
			&-wrap{
				background-image: url("../images/christmas-bg-top.png");
				background-size: 100%;
				background-repeat: no-repeat;
				background-position: center 50px;
				.media-xxs({
					background-size: 115%;
					background-position: left 175px;
				});
			}
		}
	}
	&.cny{
		.cnypack{
			display: block;
		}
		.pa-home-area-left-name{
			>img{
				display: none;
			}
		}
		.pa-dj{
			&-content{
				background-image: url("../images/cny-pa-2lampion.svg"),
									url("../images/cny-pa-cloud-01.svg"),
									url("../images/cny-pa-cloud-01.svg");
				background-size: 150px, 150px, 150px;
				background-position: 95% top, 74% 150px, left 70%;
				background-repeat: no-repeat;
				.media-xs({
					background-size: 100px, 150px, 150px;
					background-position: 95% top, 50% 125px, left 70%;
				});
			}
		}
		.pa-connect{
			background-image: url("../images/cny-pa-2lampion.svg"),
								url("../images/cny-pa-cloud-01.svg"),
								url("../images/cny-pa-cloud-02.svg"),
								url("../images/cny-pa-bird.svg");
			background-size: 150px, 150px, 150px, 125px;
			background-position: 95% top, 74% 150px, 20% 95%, 10% 80%;
			background-repeat: no-repeat;
			.media-xs({
				background-size: 100px, 150px, 150px, 125px;
				background-position: 95% top, 74% 150px, 20% 95%, 95% 90%;
			});
			&.page{
				background-image: url("../images/cny-pa-2lampion.svg"),
									url("../images/cny-pa-cloud-01.svg"),
									url("../images/cny-pa-cloud-01.svg");
				background-size: 150px, 150px, 150px;
				background-position: 95% top, 74% 150px, left 70%;
				background-repeat: no-repeat;
				.media-xs({
					background-size: 100px, 150px, 150px;
					background-position: 95% top, 50% 125px, left 70%;
				});
			}
		}
		.pa-journey-wrap{
			background-image: url("../images/cny-pa-3lampion.svg"),
								url("../images/cny-pa-cloud-01.svg"),
								url("../images/cny-pa-cloud-01.svg");
			background-size: 150px, 150px, 150px;
			background-position: 95% top, 70% 150px, left 70%;
			background-repeat: no-repeat;
			.media-xs({
				background-size: 150px, 150px, 150px;
				background-position: 95% top, 50% 125px, left 70%;
			});
		}
		.pa-fmd-content{
			background-image: url("../images/cny-pa-3lampion-flip.svg"),
								url("../images/cny-pa-cloud-01.svg"),
								url("../images/cny-pa-cloud-02.svg");
			background-size: 150px, 150px, 150px;
			background-position: 9% top, 50% 50px, 95% 200px;
			background-repeat: no-repeat;
			.media-xs({
				background-position: 95% top, 10% 50px, 95% 250px;
			});
		}
		.pa-fond{
			background-image: url("../images/cny-pa-3lampion.svg"),
								url("../images/cny-pa-cloud-01.svg"),
								url("../images/cny-pa-cloud-01.svg");
			background-size: 150px, 150px, 150px;
			background-position: 95% top, 70% 150px, left 70%;
			background-repeat: no-repeat;
			.media-xs({
				background-size: 100px, 150px, 150px;
				background-position: 95% top, 50% 125px, left 70%;
			});
		}
		.pa-home{
			background-image: url("../images/cny-pa-bghome.svg"),
								url("../images/cny-pa-bghome-02.svg"),
								url("../images/cny-pa-lampion-long.svg"),
								url("../images/cny-pa-cloud-01.svg"),
								url("../images/cny-pa-cloud-02.svg"),
								url("../images/cny-pa-lampion-long.svg");
			background-repeat: no-repeat;
			background-size: contain, contain, 75px, 150px, 150px, 75px;
			background-position: left top, right center, 5% top, 5% 80%, 60% 50px, 80% -175px;
			.media-xs({
				background-image: url("../images/cny-pa-bghome.svg"),
									url("../images/cny-pa-lampion-long.svg"),
									url("../images/cny-pa-cloud-01.svg"),
									url("../images/cny-pa-cloud-02.svg"),
									url("../images/cny-pa-lampion-long.svg");
				background-repeat: no-repeat;
				background-size: contain, 60px, 150px, 150px, 60px;
				background-position: left top, 5% top, 5% 90%, 80% 175px, 80% -125px;
			});
		}
		.pa-theorigin-header-logo{
			>img{
				display: none;
			}
		}
		.pa-theorigin-header{
			background-image: url("../images/cny-pa-bghome.svg"),
								url("../images/cny-pa-bghome-02.svg"),
								url("../images/cny-pa-lampion-long.svg"),
								url("../images/cny-pa-cloud-01.svg"),
								url("../images/cny-pa-cloud-02.svg"),
								url("../images/cny-pa-lampion-long.svg");
			background-repeat: no-repeat;
			background-size: contain, contain, 75px, 150px, 150px, 75px;
			background-position: left top, right center, 5% top, 5% 80%, 60% 50px, 80% -175px;
			.media-xs({
				background-image: url("../images/cny-pa-bghome.svg"),
									url("../images/cny-pa-lampion-long.svg"),
									url("../images/cny-pa-cloud-01.svg"),
									url("../images/cny-pa-cloud-02.svg"),
									url("../images/cny-pa-lampion-long.svg");
				background-repeat: no-repeat;
				background-size: contain, 60px, 150px, 150px, 60px;
				background-position: left top, 5% top, 5% 90%, 80% 175px, 80% -125px;
			});
		}
		.pa-theorigin-content-boards{
			background-image: 	url("../images/cny-pa-cloud-02.svg"),
								url("../images/cny-pa-bird.svg");
			background-size:  150px, 125px;
			background-position:  20% 95%, 10% 80%;
			background-repeat: no-repeat;
			.media-xs({
				background-size:  150px, 125px;
				background-position:  20% 95%, 95% 90%;
			});
		}
	}
    &-banner-home{
        padding: 100px 10% 75px 10%;
        .wrapper{
            position: relative;
            img{
                width: 100%;
                height: calc(100vh ~'-' 100px);
                object-fit: cover;
            }
            &::before{
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                background: transparent;
                background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
            }
            .content{
                position: absolute;
                bottom: 0;
                color: #fff;
                padding: 24px;

                h1{
                    font-family: 'Baskervville', serif;
                }

                a{
                    color: #fff;
                    text-decoration: underline;
                    font-family: 'Montserrat', sans-serif;
                    font-weight: 600;
                    font-style: normal;
                    font-size: 10pt;
                }
            }
        }
    }
}



.panel{
	border-radius: 0 !important;
	border: none !important;
	margin-top: 0 !important;
	border-bottom: 1px solid @dark !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;
			.fbody;
			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;
				.fbody;
				color: white;
			}
			input, textarea{
				width: 100%;
				display: block;
				padding: 7px;
				border-radius: 0 !important;
				border: 1px solid white;
				.fbody;
				color: white;
				background: transparent;
				font-size: 14px;
				border: 1px solid white;
				&:focus{
					border: 1px solid @dark;
					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;
		}
	}
}
nav{

	background-color: transparent;
	&.navbar{
		margin-bottom: 0;
		border: none;
	}
	.menu02{
		&.tmp01{
			width: 100%;
			background-color: #1d1d1d;
			padding: 15px 10%;
			z-index: 99;
			.media-md({
				padding: 15px 5%;
			});
			.media-sm({
				padding: 15px 5%;
			});
			.media-sm({
				padding: 15px 2%;
			});
			.media-xs({
				padding: 0;
			});
			&.affix{
				top: 0;
			}
			.menu02-burger{
				display: flex;
				align-items: center;
				.media-lg({
					display: none;
				});
				.media-md({
					display: none;
				});
				.media-sm({
					display: none;
				});
				.media-xs({
					padding: 15px 10%;
				});
				&-logo{
					order: 1;
					width: 100px;
				}
				&-icon{
					order: 2;
					text-align: right;
					width: calc(100% ~'-' 100px);
					button{
						float: none;
						margin: 0 !important;
						&:hover, &:focus{
							background-color: @dark !important;
							border: 1px solid @dark !important;
						}
					}
				}
			}
			.menu02-navigation{
				display: flex;
				justify-content: center;
				align-items: center;
				&-link{
					order: 1;
					text-align: center;
					border: none !important;
					box-shadow: none !important;
					margin-bottom: 0;
					min-height: auto;
					border-radius: 0;
					padding-left: 0;
					padding-right: 0;
					width: 100%;
					ul{
						margin: 0;
						padding-left: 0;
						float: none;
						position: relative;
						&:before{
							.media-xs({
								content: "";
								position: absolute;
								top: 1px;
								width: 100%;
								height: 1px;
								left: 0;
								background-color: #464646;
							});
						}
						.media-xs({
							width: 100%;
							padding: 15px 10%;
							border-top: 1px solid #000000;
						});
						li{
							display: inline-block;
							margin-left: 10px;
							margin-right: 10px;
							vertical-align: middle;
							float: none;
							.media-md({
								margin-left: 7px;
								margin-right: 7px;
							});
							.media-sm({
								margin-left: 5px;
								margin-right: 5px;
							});
							.media-xs({
								display: block;
								text-align: center;
							});
							&.menu02-navigation-link-initial{
								.media-xs({
									display: none;
								});
							}
							&.active, &:hover{
								a{
									color: @dark;
									background-color: transparent !important;
								}
							}
							a{
								color: white;
								.fbody;
								font-size: 16px;
								padding: 0 !important;
								line-height: 1.3;
								display: block;
								.media-md({
									font-size: 16px;
								});
								.media-sm({
									font-size: 16px;
									padding: 5px 0;
								});
								.media-xs({
									font-size: 14px;
									padding: 5px 0;
								});
							}
						}
					}
				}
			}
		}
	}
	.simplemenu{
		padding: 10px 5%;
		background-color: @dark;
		display: flex;
		align-items: center;
		&-logo{
			width: 50%;
			a{
				display: block;
				.font-name;
				color: @dark;
				font-size: 24px;
				img{
					height: 30px;
				}

			}
		}
		&-link{
			width: 50%;
			text-align: right;
			a{
				.fbody;
				font-size: 16px;
				color: white;
				.animate;
				&:hover{
					.animate;
					color: @dark;
				}
			}
		}
	}
}

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

.footer{
	&.white{
		.footer-area{
			border-top: 1px solid @dark;
			background-color: white;
			&-copyright{
				p{
					color: @dark;
				}
			}
			&-developer{
				p,a{
					color: @dark;
				}
			}
			&-backtotop{
				p,a{
					color: @dark;
				}
				img{
					.dark-on;
				}
			}
		}
	}
	&-area{
		width: 100%;
		background-color: @dark;
		display: flex;
		flex-flow: row wrap;
		padding: 20px 10% 20px 10%;
		align-items: center;
		.media-xs({
			padding: 20px 10% 20px 70px;
		});
		.media-xxs({
			padding: 20px 10% 20px 10%;
		});
		&-copyright{
			width: 40%;
			.media-xs({
				width: 100%;
				margin-bottom: 15px;
			});
			p{
				color: white;
				font-size: 12px;
				.fbold;
				text-align: left;
				.media-xs({
					font-size: 11px;
				});
			}
		}
		&-developer{
			width: 40%;
			.media-xs({
				width: 60%;
			});
			p{
				color: white;
				font-size: 12px;
				.fbody;
				text-align: left;
				.media-xs({
					font-size: 11px;
				});
			}
			a{
				color: white;
				font-size: 12px;
				.fbold;
				.media-xs({
					font-size: 11px;
				});
			}
		}
		&-backtotop{
			width: 20%;
			.media-xs({
				width: 40%;
			});
			a{
				justify-content: flex-end;
				color: white;
				font-size: 12px;
				.fbold;
				display: flex;
				img{
					width: 14px;
				}
				span{
					margin-left: 10px;
				}
				.media-xs({
					font-size: 11px;
				});

			}
		}
	}
}
#myModal{
	border-radius: 0 !important;
	padding-right: 0;
	.modal-dialog{
		width: 100% !important;
		margin:0 !important;
		border-radius: 0 !important;
		position: relative;
		&:before{
			content: "";
			position: absolute;
			width:25px;
			height: calc(100% ~'-' 50px);
			top: 25px;
			left: 0;
			background-image: url("../images/border-gold-v.png");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			z-index: 10;
		}
		&:after{
			content: "";
			position: absolute;
			width: 25px;
			height: calc(100% ~'-' 50px);
			top: 25px;
			right: 0;
			background-image: url("../images/border-gold-v.png");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			z-index: 10;
		}
		.modal-content{
			border-radius: 0 !important;
			min-height: 100vh;
			position: relative;
			display: flex;
			align-items: flex-end;
			justify-content: center;
			border: none;
			position: relative;
			background-image: url("../images/cover-landscape.jpg");
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
			position: relative;
			padding: 25px;
			.media-xs({
				background-image: url("../images/cover-portrait.jpg");
				background-position: top center;
			});
			&:before{
				content: "";
				position: absolute;
				width: 100%;
				height: 25px;
				top: 0;
				left: 0;
				background-image: url("../images/border-gold-h.png");
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center;
				z-index: 10;
			}
			&:after{
				content: "";
				position: absolute;
				width: 100%;
				height: 25px;
				bottom: 0;
				left: 0;
				background-image: url("../images/border-gold-h.png");
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center;
				z-index: 10;
			}
			.media-xl({

			});
			.media-xxl({

			});

			.media-xs({

			});
			.modal-body{
				width: 100%;

				&-text{
					text-align: center;
					p{
						line-height: 1;
						color: white;
						&:nth-child(1){
							font-size: 14px;
							margin-bottom: 10px;
						}
						&:nth-child(2){
							.font-name;
							font-size: 100px;
							span{

							}
							br{
								display: none;
								.media-xs({

								});
							}
							.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: 32px;
							});
						}
					}
					&-logo{
						text-align: center;
						margin-bottom: 100px;
						img{
							width: 300px;
							.media-xxs({
								width: 250px;
							});
						}
					}
					button{
						margin-bottom: 50px;
						color: white;
						border-radius: 0 !important;
						outline: 0 !important;
						border: none !important;
						font-size: 14px;
						background-color: @dark;
						padding: 8px 40px 10px 40px;
						.font-standard;
						.animate;
						&:hover{
							.animate;
							background-color: @dark;
						}
					}
				}
			}
		}
	}
	/* Zoom in Keyframes */
}
.carousel{
	.carousel-indicators{
		.media-xxs({
			display: none;
		});
	}
	&-caption{
		bottom: 20%;
		padding: 0;
		left: 10%;
		right: 10%;
		.captionHeader{

		}
		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{
			.fbody;
			color: white;
			font-size: 18px;
			.media-xs({
				font-size: 14px;
			});
			.media-xxs({
				font-size: 12px;
			});
		}
	}
	&-inner{
		.fill{
			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;
				    overflow: hidden;
			}
		}
		.item{
			&:nth-child(1){
				.carousel-caption{

				}
			}
			&:nth-child(2){
				.carousel-caption{
					bottom: 15%;
					top: auto;
					h5{
						br{
							.media-xxs({
								display: none;
							});
						}
					}
				}
			}
			&:nth-child(3){
				.carousel-caption{
					bottom: 15%;
					top: auto;
					h5{
						br{
							.media-xxs({
								display: none;
							});
						}
					}
				}
			}
		}
	}
}

.borderimage{
	width: 100%;
	img{
		width: 100%;
	}
}
#bsPhotoGalleryModal{
	text-align: center;
	.modal-dialog{
		display: inline-block;
		width: auto;
	}
	.modal-content{
		text-align: center;
		background-color: transparent !important;
		border: none !important;
		box-shadow: none !important;

		.modal-body{
			display: inline-block;
		}
	}
}
#modalWishes{
	border-radius: 0 !important;
	padding: 0 !important;
	.modal-dialog{
		width: 100%;
		height: 100%;
		margin: 0 !important;
		position: relative;
		.modal-close{
			position: absolute;
			right: 0px;
			top: 0px;
			border: none;
			background: none !important;
			color: white;
			z-index: 3;
			padding: 0 14px;
			span{
				font-size: 36px;
			}
		}
		.modal-content{
			background-color: @dark;
			border-radius: 0;
			position: relative;
			border: none;
			padding: 0 10%;
			min-height: 100%;
			.modal-body{
				width: 100%;
				padding: 30px 15px;
				&-title{
					position: relative;
					margin-bottom: 40px;
					padding-bottom: 10px;
					z-index: 2;
					text-align: center;
					.media-xxs({
						margin-bottom: 40px;
					});
					img{
						width: 200px;
						margin: auto;
					}
				}
				&-text{
					text-align: center;
					form{
						.form-group{
							width: 100%;
							label{
								display: block;
								width: 100%;
								font-size: 14px;
								.fbody;
								color: white;
								text-align: left;
							}
							#count{
								text-align: right;
								.fbody;
								font-size: 12px;
								color: @dark;
							}
							input,textarea{
								width: 100%;
								display: block;
								outline: none;
								padding: 10px;
								font-size: 16px;
								color: white;
								.font-standard;
								.fbody;
								border: 1px solid white;
								background-color: transparent;
							}
							textarea{
								resize: vertical;
							}
							button{
								margin-top: 20px;
								color: white;
								border-radius: 0 !important;
								outline: 0 !important;
								font-size: 14px;
								border: 1px solid white;
								background-color: transparent;
								padding: 6px 40px 8px 40px;
								.font-standard;
								&:hover{
									background-color: white;
									color: @dark
								}
							}
							#count{
								font-size: 12px;
								.font-standard;
								color: white;
							}
						}
					}
				}
			}
		}
	}
}
@-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) rotateY(90deg);
    }

    100% {
        opacity: 1;
        -webkit-transform: translate3d(0px, 0%, 0px) rotateY(0deg);
    }
}

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

    100% {
        opacity: 1;
        -moz-transform: translate3d(0px, 0%, 0px) rotateY(0deg);
    }
}

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

    100% {
        opacity: 1;
        -o-transform: translate3d(0px, 0%, 0px) rotateY(0deg);
    }
}

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

    100% {
        opacity: 1;
        transform: translate3d(0px, 0%, 0px) rotateY(0deg);
    }
}

.navbar{
	min-height: auto;
	margin-bottom: 0;
	border: none;
	position: fixed;
	z-index: 27;
	height: 58px;
	top: 0;
	left: 0;
	width: auto;
	&.affix{
		background-color: white;
	}
	#page-wrapper {
	    position: fixed;
	    top: 0;
	    left: 0;
	    width: 100vw;
	    height: 100vh;
	    z-index: 8;
	}
	#btn {
	    position: fixed;
	    z-index: 22;
	    top: 30px;
	    left: 28px;
	    cursor: pointer;
	    transition: left 500ms cubic-bezier(.6, .05, .28, .91);
	    .animate;
	    .media-sm({
	    	left: 18px;
    	});
	    .media-xs({
	    	left: 18px;
	    	top: 15px;
    	});
	    .btn-wrap{
	    	display: flex;
	    	flex-flow: row wrap;
            .img-logo{
                width: 30px;
                height: 30px;
                background-size: 100%;
                background-image: url('../images/logo-arrow.png');
                &.close{
                    background-image: url('../images/close.png');
                    opacity: 1;
                }
            }
	    	.burger-line{

	    	    background-color: black;
	    	    transition: transform 500ms cubic-bezier(.6, .05, .28, .91), opacity 500ms, background-color 250ms;
	    	    &:nth-child(1){
	    	    	height: 30px;
	    	    	width: 3px;
	    	    	background-color: #161616;
	    	    	.animate-fast;
	    	    }
	    	    &:nth-child(2){
	    	    	margin-left: 10px;
	    	    	height: 15px;
	    	    	width: 3px;
	    	    	align-self: flex-end;
	    	    	background-color: @gray;
	    	    	.animate-fast;
	    	    }
	    	}
	    }
	    .burger-menu{
	    	position: absolute;
	    	right: calc(100% ~'+' 10px);
	    	top: 46%;
	    	.translatey;
	    	.media-xxs({
	    		display: none;
    		});
	    	p{
	    		color: #9b9b9b;
	    		.fbody;
	    		.animate;
	    	}
	    }
	    &.active{
	    	.burger-line{
	    	    background-color: white !important;
	    	    &:nth-child(1){
	    	    	transform: translateY(0px) rotate(45deg);
	    	    	.animate-fast;
	    	    	.media-xxs({
	    	    		margin-left: 9px;
    	    		});
	    	    }
	    	    &:nth-child(2){
	    	    	margin-left: 0;
	    	    	height: 30px;
	    	    	transform: translateY(0px) rotate(-45deg);
	    	    	.animate-fast;
	    	    	margin-left: -3px;
	    	    }
	    	}
	    	.burger-menu{
	    		p{
	    			color: white;
	    			.animate;
	    		}
	    	}
	    }
	    &.light{
	    	.burger-line{
	    		background-color: white;
	    	}
	    }
	}
	#box {
	    position: fixed;
	    z-index: 21;
	    top: 0px;
	    left:0;
	    width: 100%;
	    opacity: 0;
	    height: 100%;
	    background-color: @bgmenu;
	    color: black;
	    overflow: auto;
	    transition: all 350ms cubic-bezier(.6, .05, .28, .91);
	    padding: 100px 0% 75px 10%;
	    pointer-events: none;
	    .media-sm({
	    	padding: 100px 0% 50px 10%;
	    });
	    .media-xs({
	    	padding: 100px 0% 50px 70px;
	    });
	    .media-xxs({
	    	padding: 100px 0% 50px 10%;
	    });
	    -ms-overflow-style: none;
	    /* IE and Edge */
	    scrollbar-width: none;
	    /* Firefox */
	    &::-webkit-scrollbar {
	    	display: none;
	    }
	}
	#box.active {
	   pointer-events: initial;
	    opacity: 1;
	}
	.menu-area{
		display: flex;
		flex-flow: row wrap;
		&-left{
			width: 40%;
            .logo-left{
                width: 60%;
                margin: 0 auto;
                .media-xxs({
                    margin: 0;
                });
            }
            .logo-left-footer{
                width: 70%;
                margin: 0 auto;
                .media-xxs({
                    margin: 0;
                });
            }
			.media-xxs({
				width: 70%;
			});
			&-logo{
				margin-bottom: 50px;
				max-width: 480px;
			}

		}
		&-right{
			width: 60%;
			padding-left: 60px;
			padding-right: 40px;
			.media-xs({
				width: 100%;
				padding-left: 0px;
				margin-bottom: 30px;
			});
			&-list{
				margin-bottom: 20px;
				&.active{
					>a, >p{
						color: @dark;
						.fbold;
						.animate;
					}
				}
				>a{
					.fbody;
					color: @menuwhite;
					font-size: 36pt;
					line-height: 1;
					display: block;
					.animate;
					&:hover{
						color: @dark;
						.fbold;
						.animate;
					}
					.media-md({
						font-size: 32pt;
					});
					.media-sm({
						font-size: 24pt;
					});
					.media-xs({
						font-size: 16pt;
					});
				}
				>p{
					.fbody;
					color: @menuwhite;
					font-size: 36pt;
					line-height: 1;
					display: block;
					.animate;
					.media-md({
						font-size: 32pt;
					});
					.media-sm({
						font-size: 24pt;
					});
					.media-xs({
						font-size: 16pt;
					});
				}
				&-sub{
					padding-left: 50px;
					position: relative;
					padding-top: 30px;
					margin-top: 30px;
					&:before{
						content: "";
						position: absolute;
						top: 0;
						left: 0;
						width: 50px;
						background-color: @menuwhite;
						height: 1px;
					}
					.media-xs({
						padding-top: 20px;
						margin-top: 20px;
					});
					&-list{
						margin-bottom: 30px;
						.media-xs({
							margin-bottom: 20px;
						});
						&.active{
							>a{
								color: @dark;
								.fbold;
								.animate;
							}
						}
						>a{
							.fbody;
							color: @menuwhite;
							font-size: 21pt;
							line-height: 1;
							display: block;
							.animate;
							&:hover{
								color: @dark;
								.fbold;
								.animate;
							}
							.media-sm({
								font-size: 18pt;
							});
							.media-xs({
								font-size: 14pt;
							});
						}
					}
				}
			}
		}
		&-quick{
			display: flex;
			width: 40%;
			margin-top: -100px;
			.media-xs({
				flex-flow: row wrap;
				margin-top: 0;
				width: 100%;
			});
			.media-xxs({

			});

			&-link{
				.media-xs({
					padding-right: 50px;
				});
				&-list{
					margin-bottom: 20px;
					&.active{
						>a{
							color: @dark;
							.fbold;
							.animate;
						}
					}
					a{
						.fbody;
						color: @menuwhite;
						font-size: 12pt;
						line-height: 1;
						display: block;
						.animate;
						&:hover{
							color: @dark;
							.fbold;
							.animate;
						}
						.media-sm({
							font-size: 10pt;
						});
						.media-xs({
							font-size: 10pt;
						});
					}
				}
			}
			&-socmed{
				width: 120px;
				&-list{
					margin-bottom: 20px;
					&.active{
						>a{
							color: @dark;
							.fbold;
							.animate;
						}
					}
					a{
						.fbody;
						color: @menuwhite;
						font-size: 12pt;
						line-height: 1;
						display: block;
						.animate;
						text-align: right;
						&:hover{
							color: @dark;
							.fbold;
							.animate;
						}
						.media-sm({
							font-size: 10pt;
						});
						.media-xs({
							font-size: 10pt;
							text-align: left;
						});
					}
				}
			}
		}
	}
	.items {
	    position: relative;
	    .item{
	        position: relative;
	        cursor: pointer;
	        transition: all 250ms;
	        margin-bottom: 10px;
	        &.current{
	        	a{
	        		color: @dark;
	        	}
	        }
	        >a{
	        	display: inline-block;
	        	vertical-align: top;
				position: relative;
				padding: 10px 0 0px 6px;
				.fbody;
				color: white;
				font-size: 16px;
				.fbody;
				&.active{
					color: @dark;
				}
				&:hover{
					&:before{
						content: "";
						width: 100%;
						.animate;
					}
				}
				&:before{
					content: "";
					border-bottom: 1px solid white;
					width: 0%;
					position: absolute;
					bottom: -3px;
					right: 0;
					.animate;
				}
				img{
					display: inline-block;
					width: 20px;
					padding-top: 2px;
					vertical-align: top;
				}
	        }
	        &:hover{
	        	.item-sub{
	        		opacity: 1;
	        		visibility: visible;
	        	}
	        }
	        &-sub{
	        	display: inline-block;
	        	vertical-align: top;
	        	position: relative;
	        	padding-left: 60px;
	        	width: calc(100% ~'-' 140px);
    			&:before{
    				content: "";
    				position: absolute;
    				top: 13px;
    				left: 15px;
    				width: 30px;
    				height: 4px;
    				border-radius: 2px;
    				background-color: @dark;
    				.media-xxs({
    					display: none;
					});
    			}
    			.media-xs({
					display: block;
					width: 100%;
				});
				.media-xxs({
					padding-left: 25px;
				});
	        	ul{
	        		padding-left: 0;
	        		li{
	        			list-style-type: none;
	        			a{
	        				display: block;
	        				padding: 5px 30px 5px 0px;
	        				color: white;
	        				font-size: 14px;
	        				&.active{
	        					color: @dark;
	        				}
	        				&:hover{
	        					color: @dark;
	        				}
	        			}
	        		}
	        	}
	        }
	    }
	}
	#btn, #btn * {
	    will-change: transform;
	}
	#box {
	    will-change: transform, opacity;
	}
}