/* Template Name: My Story*/

.ip-banner{
	display: none;
}

#inner-page-wrapper{
	margin-bottom: 0;
}

#inner-page-wrapper > .container{
	width: 100%;
	padding: 0;
}

.mystry{}
.mystry__banner{
	position: relative;
}
.mystry__banner--image{
	position: relative;
	z-index: 0;
}
.mystry__banner--image:before{
	content:'';
	display: block;
	position: absolute;
	z-index: 1;
	inset: 0;
	background: #000;
	opacity: 0.6;
}
.mystry__banner--image canvas{
	display: block;
	width: 100%;
	height: auto;
	background-size: cover;
	background-position: center center;
	position: relative;
	z-index: 0;
	min-height: 400px;
}
.mystry__banner--title{
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 20px;
	margin: 0 auto;
	max-width: 1052px;
}
.mystry__banner--title h2{
	font-weight: 400;
	font-size: min(13.333vw,50px);
	font-family: var(--title-font);
	line-height: 1.2;
    color: #fff;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    position: relative;
}
.mystry__main{
	position: relative;
}
.mystry__main--container{
	max-width: 1600px;
	margin: 0 auto;
}
.mystry__top{
	position: relative;
	z-index: 0;
}
.mystry__top--content{
	font-size: 15px;
	font-weight: 300;
	letter-spacing: 0.025em;
	line-height: 1.765;
	color:#3e3e3f;
	margin: 0 auto;
	max-width: 640px;
	padding: 40px 20px;
}
.mystry__top--highlight{
	color: var(--primary-color);
	font-family: var(--title-font);
	font-weight: 500;
	font-style: italic;
	letter-spacing: 0;
	line-height: 1.2;
	font-size: 1.765em;
}
.mystry__top--highlight p{
	font-size: inherit;
	margin: 1.6em 0 0;
}
.mystry__top--desc{
	margin: 0.588em 0 0;
}
.mystry__top--desc p{
	margin: 1.882em 0 0;
	font-size: inherit;
}
.mystry__top--img{
	position: relative;
	margin: 0 auto;
	max-width: 600px;
}
.mystry__top--img img{
	position: relative;
	z-index: 0;
}
.mystry__mid{
	position: relative;
	z-index: 1;
}
.mystry__canvas{
	background: #000;
	position: relative;
	margin: 50px auto 0;
	max-width: 1052px;
	padding: 71px 20px;
    width: calc(100% - 40px);
}
.mystry__canvas--img{
	position: absolute;
	z-index: 0;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0.15;
}
.mystry__canvas--content{
	color:#fff;
	font-family: var(--title-font);
	text-align: center;
	font-weight: 500;
	font-style: italic;
	font-size: min(7vw,40px);
	letter-spacing: 0.025em;
}
.mystry__mid--desc{
	font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.025em;
    line-height: 1.765;
    color: #3e3e3f;
    margin: 0 auto;
    max-width: 1052px;
    width: calc(100% - 40px);
}
.mystry__mid--desc p{
	margin: 1.882em 0 0;
	font-size: inherit;
}
.mystry__bottom{
	margin: 54px 0 0;
	padding: 0 0 60px;
}
.mystry__bottom--img{
	position: relative;
	margin: 0 auto;
	max-width: 600px;
}
.mystry__bottom--img img{
	position: relative;
	z-index: 0;
}
.mystry__bottom--desc{
	font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.025em;
    line-height: 1.765;
    color: #3e3e3f;
    margin: 40px auto 0;
    max-width: 640px;
    padding: 0 20px;
}
.mystry__bottom--desc p{
	font-size: inherit;
	margin: 1.882em 0 0;
}
@media only screen and (min-width: 992px) {
	.mystry__bottom--desc,
	.mystry__top--content{
		font-size: min(1.063vw,17px);
		margin: 0;
		max-width: none;
		padding: 0 0;
	}
	.mystry__mid--desc{
		font-size: min(1.063vw,17px);
	}
	.mystry__banner--title{
		text-align: right;
	}
	.mystry__banner--title h2{
		max-width: max-content;
		margin-left: auto;
	}
	.mystry__banner--title h2:before{
		content: '';
		display: block;
		position: absolute;
		height: 1px;
		background: #fff;
		top: 0.6em;
		right: calc(100% + 0.35em);
		width: 100vw;
	}
	.mystry__top{
		display: flex;
		flex-flow: row wrap;
		align-items: flex-start;
		justify-content: center;
	}
	.mystry__top--left{
		width: 53.8125%;
		padding: min(4.375vw,70px) 0 0 min(17.063vw,273px);
		position: relative;
		z-index: 1;
	}
	.mystry__top--right{
		width: 46.1875%;
		position: relative;
		z-index: 0;
	}
	.mystry__top--img{
		margin-left: -17.321%;
		max-width: none;
	}
	.mystry__top--img:before{
		content:'';
		display: block;
		position: absolute;
		z-index: 1;
		inset: 0;
		pointer-events: none;
		background: url(../../images/my-story/mystry-fade-01.png) center center no-repeat;
		background-size: cover;
	}
	.mystry__top--img img{
		object-fit: cover;
        object-position: center bottom;
        aspect-ratio: 867 / 1048;
	}
	.mystry__top--desc{
		padding: 0 3.2em min(5.625vw,90px) 0
	}
	.mystry__canvas{
		margin: max(-4.375vw,-70px) auto 0;
	}
	.mystry__canvas--content{
		font-size: min(2.5vw,40px);
	}
	.mystry__bottom{
		display: flex;
		flex-flow: row wrap;
		align-items: flex-start;
		justify-content: center;
	}
	.mystry__bottom--left{
		width: 36.625%;
		position: relative;
		z-index: 0;
	}
	.mystry__bottom--right{
		width: 63.375%;
		padding: min(4.375vw,70px) min(15.812vw,253px) 0 min(6.25vw,100px);

		position: relative;
		z-index: 1;
	}
	.mystry__bottom--img{
		margin: 0 -27.304% 0 0;
		max-width: none;
	}
	.mystry__bottom--img:before{
		content: '';
	    display: block;
	    position: absolute;
	    z-index: 1;
	    inset: 0;
	    pointer-events: none;
	    background: url(../../images/my-story/mystry-fade-02.png) center center no-repeat;
	    background-size: cover;
	}
	.mystry__bottom--img img{
		aspect-ratio: 867/1048;
		object-fit: cover;
		object-position: center center;
	}
}