/* 
	#pink #FADAD8 
	#beige #DD9D99
	#red #F04346
	#peach #FCF3DE
*/
/********************************************************************************************************/
/*-------------------*\
    #FONT-FACE
\*-------------------*/
@import url('https://fonts.googleapis.com/css?family=ZCOOL+XiaoWei&display=swap');

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/CormorantGaramond-Regular.eot');
    src: url('../fonts/CormorantGaramond-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/CormorantGaramond-Regular.woff2') format('woff2'),
        url('../fonts/CormorantGaramond-Regular.woff') format('woff'),
        url('../fonts/CormorantGaramond-Regular.ttf') format('truetype'),
        url('../fonts/CormorantGaramond-Regular.svg#CormorantGaramond-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/CormorantGaramond-Bold.eot');
    src: url('../fonts/CormorantGaramond-Bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/CormorantGaramond-Bold.woff2') format('woff2'),
         url('../fonts/CormorantGaramond-Bold.woff') format('woff'),
         url('../fonts/CormorantGaramond-Bold.ttf') format('truetype'),
         url('../fonts/CormorantGaramond-Bold.svg#CormorantGaramond-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/CormorantGaramond-Light.eot');
    src: url('../fonts/CormorantGaramond-Light.eot?#iefix') format('embedded-opentype'),
         url('../fonts/CormorantGaramond-Light.woff2') format('woff2'),
         url('../fonts/CormorantGaramond-Light.woff') format('woff'),
         url('../fonts/CormorantGaramond-Light.ttf') format('truetype'),
         url('../fonts/CormorantGaramond-Light.svg#CormorantGaramond-Light') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/CormorantGaramond-Medium.eot');
    src: url('../fonts/CormorantGaramond-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/CormorantGaramond-Medium.woff2') format('woff2'),
        url('../fonts/CormorantGaramond-Medium.woff') format('woff'),
        url('../fonts/CormorantGaramond-Medium.ttf') format('truetype'),
        url('../fonts/CormorantGaramond-Medium.svg#CormorantGaramond-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/CormorantGaramond-SemiBold.eot');
    src: url('../fonts/CormorantGaramond-SemiBold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/CormorantGaramond-SemiBold.woff2') format('woff2'),
         url('../fonts/CormorantGaramond-SemiBold.woff') format('woff'),
         url('../fonts/CormorantGaramond-SemiBold.ttf') format('truetype'),
         url('../fonts/CormorantGaramond-SemiBold.svg#CormorantGaramond-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Work Sans';
    src: url('../fonts/WorkSans-Regular.eot');
    src: url('../fonts/WorkSans-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/WorkSans-Regular.woff2') format('woff2'),
        url('../fonts/WorkSans-Regular.woff') format('woff'),
        url('../fonts/WorkSans-Regular.ttf') format('truetype'),
        url('../fonts/WorkSans-Regular.svg#WorkSans-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Work Sans';
    src: url('../fonts/WorkSans-Light.eot');
    src: url('../fonts/WorkSans-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/WorkSans-Light.woff2') format('woff2'),
        url('../fonts/WorkSans-Light.woff') format('woff'),
        url('../fonts/WorkSans-Light.ttf') format('truetype'),
        url('../fonts/WorkSans-Light.svg#WorkSans-Light') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Work Sans';
    src: url('../fonts/WorkSans-Medium.eot');
    src: url('../fonts/WorkSans-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/WorkSans-Medium.woff2') format('woff2'),
        url('../fonts/WorkSans-Medium.woff') format('woff'),
        url('../fonts/WorkSans-Medium.ttf') format('truetype'),
        url('../fonts/WorkSans-Medium.svg#WorkSans-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Work Sans';
    src: url('../fonts/WorkSans-SemiBold.eot');
    src: url('../fonts/WorkSans-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/WorkSans-SemiBold.woff2') format('woff2'),
        url('../fonts/WorkSans-SemiBold.woff') format('woff'),
        url('../fonts/WorkSans-SemiBold.ttf') format('truetype'),
        url('../fonts/WorkSans-SemiBold.svg#WorkSans-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
}

/********************************************************************************************************/
/*-------------------*\
    #TYPOGRAPHY
\*-------------------*/



body {
    background: #ffffff;
    color: #484848;
    font: normal 15px/24px 'Work Sans', sans-serif;
    letter-spacing: 0;
    margin: 0;
    overflow-x: hidden;
    position: relative;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-overflow-scrolling: touch;
}

h1{
	color: #212121;
	font-family: 'Cormorant Garamond', sans-serif;
	font-weight: normal;
	margin: 0 0 16px;
}
h2, 
h3, 
h4, 
h5, 
h6{
	color: #212121;
	font-family: 'ZCOOL XiaoWei', sans-serif;
	font-weight: normal;
	margin: 0 0 16px;
}


/********************************************************************************************************/
/*-------------------*\
    #GENERAL FOR ALL
\*-------------------*/

html {
	scroll-behavior: smooth;
}

a,
a:visited{
	color: inherit;
	text-decoration: none;
	-webkit-transition: all 0.3s ease-in-out 0s;
	-o-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
}

a:hover,
a:visited:hover{
	color: inherit;
	text-decoration: none;
}

a:focus{
	outline: none;
	text-decoration: none;
}

ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

section{
	/*overflow: hidden;*/
	position: relative;
	padding: 130px 0;
}

img{
	border: 0;
	vertical-align: middle;
	width: 100%;
}

.dis-table{
	display: table;
	height: 100%;
	width: 100%;
}

.dis-tablecell{
	display: table-cell;
	vertical-align: middle;
}

.align-center{
	align-items: center;
	display: flex;
}

.align-bottom{
	align-items: flex-end;
	display: flex;
}

.text-right{
	text-align: right;
}

.text-left{
	text-align: left;
}

.text-white{
	color: #ffffff;
}

.text-dark{
	color: #484848;
}

.container-fluid{
	/*padding: 0 150px;*/
}

.gapTop-50{
	padding-top: 50px;
}
.gapTop-32{
	padding-top: 32px;
}

.no-padding{
	padding: 0;
}

.bg-blue{
	background: #15BBCD;
}
.bg-yellow{
	background: #fbb81f;
	color: #000 !important;
}

.bg-pink{
	background: #FADAD8;
	color: #000 !important;
}

.bg-peach {
	background-color: #FCF3DE;
}

.pos-rel{
	position: relative;
}

.pos-static{
	position: static;
}

.divider{
	height: 1px;
	position: relative;
}

.divider:before{
    background: #000000;
	content: "";
    height: 1px;
    left: 50%;
    position: absolute;
    top: 0;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 230px;
}

.divider:after{
    background-color: white;
    border: 1px solid rgb(0,0,0);
    content: "";
    height: 8px;
	width: 8px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: rotate(45deg) translate(-50%, -50%);
	-ms-transform: rotate(45deg) translate(-50%, -50%);
	-o-transform: rotate(45deg) translate(-50%, -50%);
	transform: rotate(45deg) translate(-50%, -50%);
    z-index: 1;
}

.border-right{
	border-right: solid 1px #DDDDDD;
}

.border-right:before{
	border: solid 1px #DDDDDD;
    content: '';
    height: 8px;
    position: absolute;
    right: -4px;
    top: -9px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 8px;
}


/********************************************************************************************************/
/*----------------------*\
    #HEADER
\*----------------------*/

.site-header{
	bottom: auto;
	left: 0;
	position: absolute;
	padding: 30px 7% 0;
	right: 0;
	top: 0;
	margin: 0 auto;
	z-index: 10;
}

header.site-header.nav-up, 
header.site-header.nav-down {
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.site-branding{
	display: inline-block;
}

.site-branding .logo-dark,
.side-menuOpen .site-branding .logo-light{
	display: none;
}

.side-menuOpen .site-branding .logo-dark{
	display: block;
}

.menu-toggle {
	display: inline-block;
    float: right;
    margin-top: 15px;
    position: relative;
	text-transform: uppercase;
	display: flex;
	align-items: center;
}

/*---------------------*\
    #SITE NAVIGATION 
\*---------------------*/

.navigation li.menu	a{
	font-family: 'Cormorant Garamond', sans-serif;
	font-weight: normal;
	font-size: 75px;
	line-height: normal;
	-webkit-transition: all 0.3s ease-in-out;
	     -o-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
}

.navigation li.menu	a:hover{
	padding-left: 25px;
}

.second-navigation li{
	display: inline-block;
	margin-left: 40px;
	-webkit-transition: all 0.3s ease-in-out;
	     -o-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
}

.second-navigation li:first-child{
	margin-left: 0;
}

/*------------------*\
    #TOGGLE MENU 
\*------------------*/

.toggle-menu{
	display: inline-block;
	height: 20px;
	position: relative;
	width: 35px;
}

body.side-menuOpen .menu-toggle .toggle-menu{
	left: -20px;
}

.toggle-menu span:before,
.toggle-menu span:after{
	content: '';
	display: block;
}

.toggle-menu span,
.toggle-menu span:before,
.toggle-menu span:after{
	background-color: #212121;
}

.toggle-menu span,
.toggle-menu span:before,
.toggle-menu span:after{
	border-radius: 0;
	height: 2px;
	left: 0;
	position: absolute;
	width: 100%;
	-webkit-transition: all 0.15s ease;
	   -moz-transition: all 0.15s ease;
	     -o-transition: all 0.15s ease;
	        transition: all 0.15s ease;
}

.toggle-menu span:before{
	top: 10px;
	left: 12px;
}

.toggle-menu span:after{
	top: 20px;
}

.toggle-menu.active span,
.toggle-menu.active span:before,
.toggle-menu.active span:after{
	background-color: #212121; 
}

.toggle-menu.active span{
	-webkit-transform: translate3d(0px , 10px, 0) rotate(45deg);
	    -ms-transform: translate3d(0px , 10px, 0) rotate(45deg);
	     -o-transform: translate3d(0px , 10px, 0) rotate(45deg);
	        transform: translate3d(0px , 10px, 0) rotate(45deg);
}

.toggle-menu.active span:before{
	opacity: 0; 
	-webkit-transform: translate3d(-6px, -6px, 0 ) rotate(-45deg);
	    -ms-transform: translate3d(-6px, -6px, 0 ) rotate(-45deg);
	     -o-transform: translate3d(-6px, -6px, 0 ) rotate(-45deg);
	        transform: translate3d(-6px, -6px, 0 ) rotate(-45deg);
}

.toggle-menu.active span:after{
	-webkit-transform: translate3d(0, -20px, 0) rotate(-90deg);
	    -ms-transform: translate3d(0, -20px, 0) rotate(-90deg);
	     -o-transform: translate3d(0, -20px, 0) rotate(-90deg);
	        transform: translate3d(0, -20px, 0) rotate(-90deg);
}

/*----------------------*\
    #TOGGLE MENU WRAP
\*----------------------*/

body.side-menuOpen{
	position: fixed;
	width: 100%;
}

#toggle-menu-wrap{
	background: #ffffff;
	color: #212121;
	display: block;
	height: 100vh;
	left: auto;
	overflow: hidden;
	position: fixed;
	padding: 200px 0 0;
	right: 0;
	top: 0;
	width: 100%;
	z-index: 10;
	-webkit-transform: translate3d(100%, 0, 0);
	    -ms-transform: translate3d(100%, 0, 0);
	     -o-transform: translate3d(100%, 0, 0);
	        transform: translate3d(100%, 0, 0);
	-webkit-transition: all 0.3s ease-in-out;
	     -o-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
}

.side-menuOpen #toggle-menu-wrap{
	-webkit-transform: translate3d(0, 0, 0);
	    -ms-transform: translate3d(0, 0, 0);
	     -o-transform: translate3d(0, 0, 0);
	        transform: translate3d(0, 0, 0);
}

#toggle-menu-wrap .bottom-row{
	padding-top: 80px;
}

/********************************************************************************************************/
/*-----------------------*\
    #HEADER VARIATIONS
\*-----------------------*/

.header-with-image{
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	min-height: 60vmin;
	position: relative;
}

.header-without-image{
	background: #FADAD8;
	color: #484848;
	padding: 150px 0 80px;
}

.header-title{
	color: #484848;
	font-family: 'Cormorant Garamond';
	font-size: 60px;
	font-weight: normal;
	line-height: normal;
	margin-bottom: 18px;
	text-align: center;
}

.header-subtitle{
	color: #484848;
	margin: 0 auto;
	text-align: center;
	width: 376px;
}

.overlay{
	position: relative;

}

.overlay:before{
	background: #000000;
    bottom: 0;
    content: '';
    left: 0;
    opacity: 0.5;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

.overlay .header-title{
	position: relative;
	z-index: 2;
}


/********************************************************************************************************/
/*------------------------*\
    #FOOTER
\*------------------------*/

/*-------------------*\
    #FOOTER TOP
\*-------------------*/

.site-footer{
	background: #FADAD8;
	color: #484848;
	padding: 170px 0 0;
}

.site-footer .location-block{
	color: #AAAAAA;
}

.site-footer .location-block .email{
	display: block;
	position: relative;
	top: auto;
}

.site-footer .footer-logo{
	margin-bottom: 60px;
}

.site-footer .footer-logo img{
	width: 170px;
}

.site-footer .footer-detail{
	width: 50%;
}

/*-------------------*\
    #FOOTER MIDDLE
\*-------------------*/

.site-footer .footer-middle{
	padding-top: 76px;
	padding-bottom: 100px;
}

.site-footer .footer-middle .nav-title{
	font-weight: 600;
	text-transform: uppercase;
}

.site-footer .second-navigation{
	margin-top: 35px;
}

.site-footer .second-navigation li{
	margin-left: 25px;
}

.site-footer .second-navigation li:first-child{
	margin-left: 0
}

/*-------------------*\
    #FOOTER BOTTOM
\*-------------------*/

.footer-bottom .copyright{
	border-top: solid 1px #484848;
	color: #757575;
	font-size: 14px;
	line-height: normal;
	padding: 30px 0;
	display: flex;
	justify-content: space-between;
}

.footer-bottom .copyright li{
	display: inline-block;
	width: 49%;
}

.footer-bottom .copyright li a:hover{
	color: #016064;
}

.footer-bottom .copyright li:last-child{
	text-align: right;
}


/********************************************************************************************************/
/*-------------------*\
    #SLIDER
\*-------------------*/

.main-slider .swiper-slide{
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	height: 100vh;
	position: relative;
	width: 100%;
	z-index: 2;
}

.main-slider .swiper-pagination{
	position: absolute;
	bottom: 60px;
	left: 7%;
	text-align: left;
}

.main-slider .swiper-pagination .swiper-pagination-bullet-active{
	display: inline-block !important;
}

.main-slider .swiper-pagination .swiper-pagination-bullet-active{
	background: none;
	color: #ffffff;
	font-family: 'Cormorant Garamond', sans-serif;
	font-size: 38px;
}

.main-slider .swiper-pagination .swiper-pagination-bullet{
	display: none;
}

.main-slider .swiper-pagination{
   	color: #212121;
    font-family: 'Cormorant Garamond', sans-serif;
    font-size: 26px;
    z-index: 10;
}

.main-slider .swiper-pagination .swiper-pagination-current{
	font-size: 50px;
}
.swiper-wrapper{
	position: relative;
}

/*--------------------*\
    #SLIDER CONTENT
\*--------------------*/
.swiper-slide .content{
	position: absolute;
	color: #ffffff;
	font-size: 16px;
	line-height: 1.5;
	width: 100%;
	top: 50%;
	transform: translate(0,-50%);
	left: 0;
}
.swiper-slide .overlay{
	position: absolute;
	width: 100vw;
	height: 100vh;
	background: rgba(0,0,0,0.4);
	z-index: -1;
	top: 0;
	right:0;
	left: 0;
	margin:0 auto;
}

.swiper-slide .content h1{
	color: #212121;
	font-size: 70px;
}

.swiper-slide .content p{
	color: #212121;
	max-width: 470px;
	width: 100%;
}

/*--------------------*\
    #SLIDER ARROW
\*--------------------*/

.swiper-button-group {
	position: absolute;
	bottom: 60px;
	right: 7%;
	display: flex;
}
.swiper-button-next, 
.swiper-button-prev{
	position: relative;
	background-size: cover; 
	height: 20px;
	width: 40px;
}

.swiper-button-next{
	background-image: url('../images/arrow-next.svg');
	margin-left: 50px;
}

.swiper-button-prev{
	background-image: url('../images/arrow-prev.svg');
}

/********************************************************************************************************/
/*------------------------*\
    #BLOCK CONTENT STYLE
\*------------------------*/

/*----------------------*\
    #SOCIAL MEDIA ICON
\*----------------------*/

.social-media-icon li{
	display: inline-block;
	margin-left: 30px;
}

.social-media-icon li:first-child{
	margin-left: 0;
}

.social-media-icon li a{
	font-size: 20px;
	color: #F04346;
}
.social-media-icon li a:hover{
	color: #DD9D99;
}

/*-------------------*\
    #BUTTON STYLE
\*-------------------*/

.btn-arch{
	background: transparent;
	display: inline-block;
	padding: 12px 40px;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	border-radius: 8px;
	text-align: center;
	-webkit-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
}

.btn-arch--small {
	background: transparent;
	display: inline-block;
	padding: 6px 20px;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	border-radius: 8px;
	text-align: center;
	-webkit-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
}

.btn-default-space{
	margin-top: 40px;
	margin-right: 30px; 
}
.btn-default-space:nth-last-of-type(1) {
	margin-top: 40px;
	margin-right: 0;
}

.btn-tab{
	color: #212121 !important;
	display: inline-block;
}
.menu-container {
	height: 80%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.menu-toggle .btn-tab{
	/* color: #ffffff !important; */
	margin-right: 100px;
}

.side-menuOpen .menu-toggle .btn-tab{
	color: #212121 !important;
	margin-right: 115px;
}

.side-menuOpen .menu-toggle .btn-tab:before{
	background-image: url(../images/add-default.svg);
}

/* .btn-tab:before{
	background-image: url(../images/add-beige.svg);
    background-repeat: no-repeat;
    background-size: cover;
    content: '';
    display: inline-block;
    height: 16px;
    margin-right: 20px;
    vertical-align: middle;
    width: 16px;
} */

.white{
	border: solid 1px #ffffff;
	color: #ffffff;
}

.white:hover{
	background: #ffffff;
	border-color: #ffffff;
	color: #212121 !important;
}
.black-text {
	color: #212121 !important;
}
.black{
	border: solid 1px #212121;
	color: #212121;
}

.beige {
	border: solid 1px #DD9D99;
	color: #484848 !important;
}

.beige:hover {
	background: #DD9D99;
	color: #fff !important;
}

.red {
	border: solid 1px #F04346;
	color: #F04346 !important;
}
.red:hover {
	background: #F04346;
	color: #fff !important;
}

.black:hover{
	background: #212121;
	border-color: #212121;
	color: #ffffff !important;
}

/*------------------------*\
    MEDIA IMAGE WARP
\*------------------------*/

.media-wrap{
	background-repeat: no-repeat;
	background-size: cover;
	height: 785px;
	left: 50%;
	margin-left: calc(50% - 50vw);
	position: relative;
	width: auto;
}

.object-half{
	width: 50vw;
}

.media-object-right{
	left: 0;
	margin-left: 0;
	margin-right: calc(50% - 50vw);
}


/*------------------*\
    LOCATION BLOCK
\*------------------*/

.location-block{
	position: relative;
}

.location-block h1{
	font-size: 44px;
}

.location-block .email{
	font-size: 18px;
	/* left: 0; */
	/* position: absolute; */
	/* top: 200px; */
}
.location-block a.phone {
	margin-bottom: 1rem;
	display: block;
}
/*WhySUki*/
#whysuki{
	/*min-height: 90vh;*/
	padding: 16vh 0;
	position: relative;
}
#whysuki .whysuki__image {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
}
#whysuki .image-overflow-down{
	width: 100%;
	height: 100%;
	position: relative;
	margin-bottom: 0;
}

#whysuki .image-overflow-down img{
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;
	
	object-fit: contain;
	object-position: center bottom;
}
/*WhySuki*/
/*-----------------------*\
    CONTENT BLOCK
\*-----------------------*/

.content .title{
	color: #AAAAAA;
	display: inline-block;
	font-size: 14px;
	padding-bottom: 8px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
} 
.title {
	color: #F04346;
}
.content .title {
	color: #F04346;
}

.content .content-title{
	font-size: 40px;
	line-height: 48px;
	margin-bottom: 24px;
}

/*-----------------------*\
    VIDEO BLOCK
\*-----------------------*/

.video-section {
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.5);
}
.video-section video{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	object-fit: cover;
	object-position: center;
	/*vertical-align: bottom;*/
	z-index: -1;
}

.video-section .content{
	bottom: 200px;
	display: inline-block;
	left: 370px;
	position: absolute;
	width: 500px;
}

.video-section .content .content-title{
	font-weight: bold;
}

.video-section .videoController{
	margin-top: 50px;
	position: relative;
}

.video-section .videoController .video-control{
	border: solid 1px #ffffff;
	border-radius: 50%;
	display: inline-block;
	height: 80px;
	position: relative;
	width: 80px;
}

.video-section .videoController .video-control.paused:after,
.video-section .videoController .video-control.playing:before{
	opacity: 0;
}

.video-section .videoController .video-control:before,
.video-section .videoController .video-control:after{
	font-family: 'FontAwesome';
	font-size: 25px;
	left: 50%;
	position: absolute;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.video-section .videoController .video-control:before{
	content: '\f04b';
}

.video-section .videoController .video-control:after{
	content: '\f04c';
}

.video-section .videoController .timer{
	display: inline-block;
	font-size: 18px;
	line-height: 1;
    position: absolute;
    margin-left: 30px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.video-section .videoController .timer p{
	margin-bottom: 5px;
}

.video-section .videoController .duration{
	font-size: 14px;
	opacity: 0.3;
}

.video-section .videoController .duration:after{
	content: 'min';
	margin-left: 7px;
}

/*-----------------------*\
    SERVICE BLOCK
\*-----------------------*/

.service{
	color: #212121;
}

.events{
	padding: 150px 0 200px;
}

.service:after{
	background: url('../images/lady.png') no-repeat scroll center/cover;
	content: '';
	display: inline-block;
	min-height: 100vh;
	height: 120%;
	position: absolute;
	right: -2%;
	top: 4%;
	width: 500px;
	z-index: -1;
}

.service .content,
.events .content{
	padding-bottom: 60px;
}

/*--------------------------*\
    BOX CONTENT WRAP BLOCK
\*--------------------------*/

.box-content-wrap .counter{
	font-family: 'Cormorant Garamond';
	font-weight: normal;
	margin-bottom: 25px;
}

.box-content-wrap .counter .current-count{
	font-size: 24px
}

.box-content-wrap .counter .total-count{
	font-size: 12px;
}

.box-content-wrap .title{
	font-size: 32px;
}

.box-content-wrap .date{
	color: #AAAAAA;
	font-size: 14px;
	margin-bottom: 16px;
	text-transform: uppercase;
}

.box-content-wrap .author{
	color: #484848;
	margin-left: 15px;
}

.box-content-wrap .btn-tab{
	display: inline-block;
	margin-top: 60px;
}

/*-----------------------*\
    DETAIL BLOCK
\*-----------------------*/

.detail .content p{
	opacity: 0.7;
}

.detail .content .title{
	color: #212121;
}

.product-wrap .prod-img{
	position: relative;
}

.product-wrap figcaption figure{
	position: absolute;
}

.product-wrap figcaption .indicator{
	background-image: url('../images/Group 19.png');
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
	height: 30px;
	width: 30px;
}

.product-wrap figcaption .design-snipe-1{
	left: 10%;
	top: 0;
}

.product-wrap figcaption .design-snipe-2{
	left: 50%;
	top: 38%;
}

.product-wrap figcaption .prod-detail{
	color: #212121;
	display: block;
	left: 130px;
	position: relative;
	top: -100px;
	width: 300px;
}

.product-wrap figcaption .prod-detail.prod-title{
	font-family: 'Cormorant Garamond';
	font-weight: normal;
	font-size: 36px;
	line-height: normal;
}

.product-wrap figcaption .prod-detail.prod-price{
	font-size: 16px;
}

.product-wrap figcaption .straight-line{
	background-image: url('../images/line.svg');
	background-repeat: no-repeat;
	background-position: center;
	height: 120px;
	left: 18px;
	top: -95px;
	width: 100px;
}

.product-wrap figcaption .straight-line,
.product-wrap figcaption .prod-detail{
	opacity: 0;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.product-wrap figcaption .indicator:hover .straight-line,
.product-wrap figcaption .indicator:hover .prod-detail{
	opacity: 1
}

.product-wrap figcaption .indicator:hover .prod-detail.prod-price{
	opacity: 0.7;
}

/*-----------------------*\
    TESTIMONIAL BLOCK
\*-----------------------*/

.testimonial{
	padding: 50px 0;
}

.testimonial .swiper-container{
	height: 500px;
	width: 100%;
}

.testimonial .swiper-slide{
    align-items: center;
    display: flex;
	justify-content: center;
}

.testimonial .swiper-slide .testimonial-content{
	font-family: 'Cormorant Garamond';
	font-weight: normal;
	font-size: 40px;
	line-height: normal;
	padding-top: 15px;
	padding-left: 30px;
	position: relative;
}

.testimonial .swiper-slide .testimonial-content:before{
	background-image: url('../images/quote.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	content: '';
	display: inline-block;
	height: 15px;
	left: 0;
	top: 0;
	position: absolute;
	width: 20px;
}

.testimonial .testimonial-content .author{
	font-family: 'Work Sans', sans-serif;
	font-size: 16px;
	font-weight: normal;
	position: relative;
	margin-top: 24px;
	display: inline-block;
}

.testimonial .testimonial-content .author:before{
	border: solid 1px #707070;
	content: '';
	left: -30px;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 20px;
}

.testimonial-pagination {
	display: flex;
	flex-direction: column;
}

.testimonial-pagination .swiper-pagination-bullet{
	background: transparent;
	width: 10px;
	height: 10px;
	border: solid 1px #212121;
	border-radius: 0;
	margin: 8px 0 !important;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	transition: background-color .15s ease;
}

.testimonial-pagination .swiper-pagination-bullet:hover {
	background: rgba(0, 0, 0, 0.2);
}

.testimonial-pagination .swiper-pagination-bullet:focus {
	outline: none;
}

.testimonial-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
	background: #212121;
}

/*-----------------------*\
    INSTAGRAM BLOCK
\*-----------------------*/

.insta-wrapper{
	text-align: center;
}

.insta-wrapper-mt {
	margin-top: 100px;
}

.insta-wrapper img{
	margin-bottom: 60px;
}

.insta-wrapper img:last-child{
	margin-bottom: 0;
}

.insta .insta-header{
	font-size: 14px;
	/*margin-top: -100px;*/
	text-align: center;
}

.insta .insta-header i.fa{
	font-size: 36px;
	margin-bottom: 15px;
}

.insta .insta-header .insta-id{
	font-size: 40px;
	margin-top: 22px;
	margin-bottom: 60px;
}

/*-----------------------*\
    POST BLOCK
\*-----------------------*/

.post{
	margin-bottom: 60px;
}

.post .post-wrapper {
	display: block;
}

.post .post-thumbnail{
	margin-bottom: 24px;
	position: relative;
	width: 100%;
	padding-top: 100%;
	overflow: hidden;
}

.post .post-thumbnail img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;

	transition: transform .8s ease;
}

.post .post-wrapper .date{
	position: absolute;
	background: #ffffff;
	bottom: 0;
	color: #757575;
	font-size: 14px;
	left: 0;
	padding: 8px 20px 8px 0;
}

.post .post-content .post-title{
	font-size: 30px;
	line-height: normal;
	margin-bottom: 12px;
}

.post .post-content .post-category{
	color: #757575;
	font-size: 14px;
	margin-right: 30px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.post .post-content .price{
	color: #212121;
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.post .post-content .btn-tab{
	display: inline-flex;
	margin-top: 30px;
	align-items: center;
	letter-spacing: 0.1em;
}
.post .post-content .btn-tab span {
	transition: transform .25s ease;
}
.post .post-content .btn-tab::before{
	content: '+';
	display: inline-block;
	color: #212121;
	background-image: none;
	font-size: 18px;
	line-height: 15px;
	margin-right: 8px;
	transition: color .2s ease;
}

.post .post-wrapper:hover .post-thumbnail img {
	transform: scale(1.1);
}
.post .post-wrapper:hover .post-content .btn-tab span {
	transform: translateX(8px);
}
.post .post-wrapper:hover .post-content .btn-tab::before {
	color: #FBB81F;
}

/*------------------------*\
    #NEWS LETTER
\*------------------------*/

.newsletter{
	background: #F04346;
	text-align: center;
}

.newsletter .content{
	margin: 0 auto;
	width: 600px;
}

.newsletter .content .title{
	color: #ffffff;
}

.newsletter .content h2{
	font-size: 36px;
	margin: 0 auto;
	width: 450px;
}

.newsletter form.default-form{
	margin-top: 48px;
}

.newsletter form.default-form .btn-arch{
	margin: 0 0 0 40px;
	cursor: pointer;
}

.newsletter .default-form label{
	color: #ffffff;
	text-align: left;
}

/*------------------------*\
    #DEFAULT FORM
\*------------------------*/

form.default-form .form-group{
	clear: both;
	display: inline-block;
	margin-bottom: 20px;
	width: 70%;
}

form.default-form label{
	color: #AAAAAA;
	display: block;
	font-size: 14px;
	font-weight: normal;
	/*margin-left: 12px;*/
	margin-bottom: 3px;
	text-transform: uppercase;
}

form.default-form .form-group.msg-box{
	width: 100% !important;
}

select.form-control:not([size]):not([multiple]) {
	height: 42px;
}

form.default-form .form-control{
	background: transparent;
    border-radius: 0;
    display: inline-block;
    height: 42px;
	transition: border-color .15s ease;
	padding: .375rem .5rem;
}
form.default-form .form-control:hover {
	border-color: #212121;
}
form.default-form .form-control:focus {
	border-color: #212121;
	box-shadow: none;
}

form.default-form .form-control--light{
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.4);
}
form.default-form .form-control--light:hover {
	border-color: #fff;
}
form.default-form .form-control--light:focus {
	border-color: #fff;
	box-shadow: none;
}

form.default-form .btn-arch{
    float: none;
    height: 45px;
	padding: 0;
    width: 130px;
}

form.default-form textarea.form-control{
	height: 135px;
}


/********************************************************************************************************/
/*-------------------------*\
    #PAGE SPECIFIC STYLES
\*-------------------------*/

/*------------------------*\
    #ARTIST PAGE STYLE
\*------------------------*/

.about-header .content{
	margin: 0 auto;
	text-align: center;
	width: 60%;
}

/*------------------------*\
    #ARTIST CAROUSEL
\*------------------------*/
.artist-list {
	padding: 0;
}

.artist-list .artist-container {
	height: 100vh;
	position: relative;
}

.artist-list .artist-name-full {
	position: absolute;
	top: 19%;
	left: 0;
	width: 100%;
}

.artist-list .artist-name-full .title {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #484848;
}

.artist-list .artist__image {
	width: 500px;
	height: 600px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.artist-list .artist__image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.artist-list .artist__name {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	height: 145px;
	overflow: hidden;

	display: flex;
	align-items: center;

	font-size: 120px;
	font-family: 'Cormorant Garamond', sans-serif;
	white-space: nowrap;
	color: #212121;
	user-select: none;
}

.artist-list .artist__name.artist__name--back {
	z-index: -1;
}

.artist-list .artist__name.artist__name--back span:nth-of-type(2) {
	color: transparent;
}
.artist-list .artist__name.artist__name--front span:nth-of-type(1) {
	color: transparent;
}

.artist-list .artist__description {
	position: absolute;
	width: 256px;
	right: 10px;
	top: 63%;
}

.artist-list .artist__description p {
	color: #484848;
}


/********************************************************************************************************/
/*------------------------*\
    #FAQ PAGE
\*------------------------*/

.faq .faq-title{
	font-size: 36px;
	margin-bottom: 10px;
}

.faq-section:nth-of-type(n+2) {
	margin-top: 80px;
}

.faq .nav-tabs{
	border: none;
}

.faq .nav-tabs li{
	float: none;
}

.faq .nav-tabs > li.active > a, 
.faq .nav-tabs > li.active > a:focus, 
.faq .nav-tabs > li.active > a:hover{
	border: none;
}

.faq .nav > li > a{
	color: #AAAAAA;
	border: none;
	padding: 10px 0;
}

.faq .nav > li.active > a{
	color: #212121;
}

.faq .nav > li > a:hover{
	background: none;
	border: none;
}

/*------------------------*\
    #FAQ ACCORDION
\*------------------------*/

.panel-default{
	border: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	margin-bottom: 0;

	border-bottom: 1px solid #DDD;
	padding: 28px 0;
}
.panel-default:nth-last-of-type(1){
	border-bottom: none;
}

.panel-default > .panel-heading{
	background: none;
	border: none;
	padding: 0;
}

.panel-default .panel-title{
	font-size: 24px;
	margin-bottom: 0;
	cursor: pointer;
}

.panel-default>.panel-heading+.panel-collapse>.panel-body{
	border: none;
	padding: 20px 0 10px;
	line-height: 1.75;
}

.panel-group{
	margin-bottom: 0;
}

.panel-default > .panel-heading a{
	border: none;
	display: block;
	/*padding: 30px 0;*/
	position: relative;
}

.panel-default > .panel-heading a.collapsed{
}

.panel-group .panel+.panel {
    margin-top: 0px;
}

.panel-default .panel-heading a.collapsed:after,
.panel-default .panel-heading a:after{
	content: '\f0d7';
	color: #AAAAAA;
	font-family: 'FontAwesome', sans-serif;
	font-size: 16px;
	position: absolute;
	right: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}

.panel-default .panel-heading a:after{
	content: '\f0d8';
	color: #111111;
}

/*------------------------*\
    FAQ FORM
\*------------------------*/

.faq-form{
	overflow: visible;
}

.faq-form .content .content-title{
	font-size: 36px;
	margin-bottom: 10px;
}

.faq-form .media-wrap{
	bottom: -50px;
	display: inline-block;
	left: 80%;
	width: 565px;
}

.faq-form form.default-form{
	margin-top: 36px;
}

.faq-form form.default-form .form-group,
.contact-form form.default-form .form-group{
	width: 100%;
}

.faq-form form.default-form .msg-box{
	width: 100%;
}

.faq-form form.default-form .form-group:nth-child(even),
.contact-form form.default-form .form-group:nth-child(even){
	margin: 0;
}

.faq-form form.default-form .btn-arch,
.contact-form form.default-form .btn-arch{
	float: right;
}

.faq-form .faq-form__image {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
}
.faq-form .image-overflow-down{
	width: 100%;
	height: calc(100% + 3rem);
	position: relative;
	margin-bottom: 0;
}

.faq-form .image-overflow-down img{
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	object-fit: contain;
	object-position: right bottom;
}


/********************************************************************************************************/
/*------------------------*\
    ABOUT PAGE
\*------------------------*/

.abt-section3,
.abt-section7{
	padding-top: 0;
}

.abt-section4 .abt-section4__image {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
}
.abt-section4 .abt-section4__image .image-overflow-down {
	width: 100%;
	height: 100%;
	position: relative;
	margin-bottom: 0;
}

.abt-section4 .abt-section4__image .image-overflow-down img {
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	object-fit: contain;
	object-position: center bottom;
}

.abt-section5{
	padding-bottom: 0;
}


/********************************************************************************************************/
/*-------------------*\
    #SINGLE POST
\*-------------------*/

.single-wrapper {
	padding: 70px 0 130px;
}

.single-wrapper .same-gap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 50px;
}

.single-wrapper .registration span{
	display: block;
}

.single-wrapper .registration span.title{
	color: #757575;
	font-size: 14px;
	margin-bottom: 8px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.single-wrapper .registration span.content{
	color: #212121;
}

.single-wrapper .content-title{
	margin-bottom: 24px;
}

.single-wrapper p,
.single-wrapper ul{
	margin-bottom: 50px;
}

.single-wrapper .content .content-title{
	font-size: 36px;
}

.single-wrapper .content li{
	margin-bottom: 20px;
	padding-left: 24px;
	position: relative;
}

.single-wrapper .content li:before {
    content: '';
    left: 0;
    position: absolute;
    top: 11px;
    width: 12px;
	height: 1px;
	background: #212121;
}

.single-wrapper .instructors{
    display: block;
    overflow: hidden;
	margin: 0 -15px 70px;
}

.single-wrapper .instructors li{
	color: #757575;
	display: inline-block;
	float: left;
	padding: 0 15px;
	width: 33.33333333%
}

.single-wrapper .instructors li h3{
	line-height: normal;
	margin: 12px 0 5px;
	font-size: 24px;
}

.single-wrapper .instructors li p{
	margin: 0;
}

/********************************************************************************************************/
/*-------------------*\
    #GALLERY PAGE
\*-------------------*/

.gallery-list .gallery-wrapper{
	margin-bottom: 100px;
	overflow: hidden;
	position: relative;
	background: #FFF;
	width: 100%;
	display: block;
}

.gallery-list .gallery-thumbnail{
	width: 100%;
	position: relative;
	padding-top: 66.66%;
	margin-bottom: 0;
	display: block;
	overflow: hidden;
}
.gallery-list .gallery-thumbnail img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;

	transition: transform .8s ease;
}

.gallery-list .gallery-title {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	display: flex;
	align-items: center;

	pointer-events: none;
}

.gallery-list .gallery-title .gallery-title__sub {
	position: absolute;
	bottom: 100%;
}

.gallery-list .gallery-title .gallery-title__btn {
	position: absolute;
	top: calc(100% + 36px);
}

.gallery-title a, .gallery-title span {
	pointer-events: all;
}

.gallery-title h1{
	font-size: 60px;
	font-weight: bold;
	line-height: normal;
	color: #ddd;
	mix-blend-mode: exclusion;
	margin-left: 30px;
	display: inline-block;
}

.gallery-title span{
	font-size: 14px;
	margin-right: 24px;
}

.gallery-title .date{
	color: #757575;
}

.gallery-wrapper .btn-tab{
	display: inline-flex;
	align-items: center;
	letter-spacing: 0.1em;
}
.gallery-wrapper .btn-tab span {
	transition: transform .25s ease;
}
.gallery-wrapper .btn-tab::before{
	content: '+';
	display: inline-block;
	color: #212121;
	background-image: none;
	font-size: 18px;
	line-height: 15px;
	margin-right: 8px;
	transition: color .2s ease, transform .25s ease;
}

.flip .gallery-title {
	text-align: right;
}
.flip .gallery-title h1{
	margin-right: 30px;
	margin-left: 0;
}
.flip .gallery-title span{
	margin-left: 24px;
	margin-right: 0;
}

.gallery-wrapper.gallery-wrapper--hover .gallery-thumbnail img {
	transform: scale(1.1);
}
.gallery-wrapper.gallery-wrapper--hover .gallery-title .btn-tab span {
	transform: translateX(8px);
}
.gallery-wrapper.gallery-wrapper--hover .gallery-title .btn-tab::before {
	color: #FBB81F;
}

.flip .gallery-wrapper.gallery-wrapper--hover .gallery-title .btn-tab span {
	transform: unset;
}
.flip .gallery-wrapper.gallery-wrapper--hover .gallery-title .btn-tab::before {
	transform: translateX(-8px);
}

/*-------------------*\
    #SINGLE GALLERY
\*-------------------*/

section.image-gallery {
	padding: 80px 0 130px 0
}

.main-gallery a {
	display: block;
	width: 100%;
	position: relative;
	padding-top: 75%;
}

.main-gallery .main-gallery-item:nth-of-type(n+5) {
	margin-top: 30px;
}

.main-gallery a img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/********************************************************************************************************/
/*-------------------*\
    #CONTACT PAGE
\*-------------------*/

.contact-form .content .content-title{
	margin-bottom: 16px;
}

.contact-form .content-box{
	margin-top: 50px;
}

.contact-form .content-box .title-box{
	color: #AAAAAA;
	display: block;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 6px;
}

.contact-form .content-box{
	font-size: 16px;
}

.location-wrapper{
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	height: 636px;
}

.contact-location .location-block{
	font-size: 18px;
	line-height: normal;
}

.contact-location .location-block h1{
	font-size: 75px;
}

.contact-location .location-block .btn-tab{
	margin-top: 65px;
}


/********************************************************************************************************/
/*-------------------*\
    #Spacing
\*-------------------*/
.fw-py-section {
	padding: 130px 0;
}

/********************************************************************************************************/
/*-------------------*\
    #Images
\*-------------------*/
.fw-image--1-1 {
	width: 100%;
	position: relative;
	padding-top: 100%;
	margin-bottom: 0;
}
.fw-image--1-1 img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.fw-image--95 {
	width: 100%;
	position: relative;
	padding-top: 95%;
	margin-bottom: 0;
}
.fw-image--95 img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.fw-image--120 {
	width: 100%;
	position: relative;
	padding-top: 120%;
	margin-bottom: 0;
}
.fw-image--120 img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.fw-image--130 {
	width: 100%;
	position: relative;
	padding-top: 130%;
	margin-bottom: 0;
}
.fw-image--130 img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.fw-image--100p {
	width: 100%;
	position: relative;
	height: 100%;
	margin-bottom: 0;
}
.fw-image--100p img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.fw-image--60 {
	width: 100%;
	position: relative;
	height: 60vmin;
	margin-bottom: 0;
}
.fw-image--60 img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/********************************************************************************************************/
/*-------------------*\
    #List
\*-------------------*/
.fw-sidebar {
	list-style: none;
	display: flex;
	flex-direction: column;
}
.fw-sidebar li {
	margin-bottom: 16px;
}

.fw-sidebar li a {
	color: #757575;
	transition: color .15s ease !important;
}
.fw-sidebar li a:hover {
	color: #212121;
}
.fw-sidebar li.active a {
	color: #212121;
}

/********************************************************************************************************/
/*-------------------*\
    #Separator
\*-------------------*/

.fw-separator {
	width: 1px;
	height: 250px;
	position: relative;
	background: #DDD;
}
.fw-separator:before {
	content: '';
	position: absolute;

	width: 7px;
	height: 7px;

	top: -8px;
	left: 50%;

	border: 1px solid #DDD;

	transform: translateX(-50%) rotate(45deg);
}

/********************************************************************************************************/
/*-------------------*\
    #Sticky
\*-------------------*/

.fw-position-sticky {
	position: sticky;
	top: 30px;
}

/********************************************************************************************************/
/*-------------------*\
    #Button
\*-------------------*/
.fw-btn-text {
	text-decoration: none;
	color: #212121;
	position: relative;
	/*padding-bottom: 2px;*/
	display: inline-block;
}
.fw-btn-text::after {
	content: '';
	position: absolute;
	bottom: 1px;
	left: 0;
	width: 100%;
	height: 1px;
	background: #212121;
	transition: transform .15s ease-out;
	transform-origin: right;
}
.fw-btn-text:hover::after {
	transform: scaleX(0);
	transition: transform .15s ease-in;
}


.fw-text-large {
	font-size: 2.3rem;
}

.fw-btn-plus {
	display: inline-flex;
	align-items: center;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 14px;
	margin-top: 24px;
	color: #212121;
}
.fw-btn-plus span {
	transition: transform .25s ease;
}
.fw-btn-plus::before{
	content: '+';
	display: inline-block;
	color: #212121;
	background-image: none;
	font-size: 18px;
	line-height: 15px;
	margin-right: 8px;
	transition: color .2s ease;
}

.fw-btn-plus:hover span {
	transform: translateX(8px);
}

.fw-btn-plus:hover::before {
	color: #FBB81F;
}

.p-light {
	color: rgba(72, 72, 72, 0.70);
}

.text-grey {
	color: #AAAAAA;
}

.text-fixed {
	width: 270px;
}

.mb-50{
	margin-bottom: 50px;
}

.product-card {
	width: 100%;
	height: 400px;
	background-color: #fff;
	border-radius: 20px;
	padding: 0 25px 34px 25px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	margin-bottom: 40px;
}

.product-link:hover .product-card {
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.product-link:hover .product-card img {
	transform: translateY(-10px);
}

.product-card img {
	height: auto;
	max-width: fit-content;
	margin: 0 auto;
	margin-bottom: 20px;
	transition: transform 0.5s ease;
}

.mb-40 {
	margin-bottom: 40px;
}

.product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
	grid-auto-rows:  500px ;
	grid-gap: 50px 30px;
}

.product {
	/* height: 100px; */
	/* background-color: yellow; */
	padding: 10px;
	transition: box-shadow 0.25s ease;
}

.product img {
	height: 350px;
	object-fit: cover;
	margin-bottom: 18px;
}

.product p.product-price {
	font-family: "ZCOOL XiaoWei";
	 font-size: 20px;
	 color: #212121;
}

.product-grid a:hover .product {
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}