@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;700&family=Open+Sans:wght@400;700&display=swap');
/*
@font-face{
	font-family:"Didot W01 Roman";
	src:url("/css/fonts/didot.woff2") format("woff2"),
	url("/css/fonts/didot.woff") format("woff");
}*/

html
{
	height: 100%;
}

body
{
	/*font-family: 'Didot W01 Roman', serif;*/
	font-family: 'Cormorant Garamond', serif;
	font-weight: 300;
	color: #000;
	background: #fff;
	overflow-x: hidden;
	font-size: 85%;
	min-height: 100%;
	position: relative;
}

body#landing
{
	background: #090110;
}

a, a:hover, a:active, button, button:hover, button:active
{
    -webkit-transition: color .1s ease-in-out, background-color .1s ease-in-out;
    -moz-transition: color .1s ease-in-out, background-color .1s ease-in-out;
    -o-transition: color .1s ease-in-out, background-color .1s ease-in-out;
    transition: color .1s ease-in-out, background-color .1s ease-in-out;
}

a, button
{
	outline: none;
	text-decoration: none !important
}

b, strong
{
	font-weight: bold;
}

/*               NAV
---------------------------------------*/
#navContent
{
	position: fixed;
	width: 100%;
	height:100%;
	top: 0;
	left: 0;
	overflow: hidden;
	display: none;
	z-index: 10;
	font-size: 1rem;
}

#navContent > div
{
	position: absolute;
	background: #000;
	width: 50%;
	height: 100%;
	background: rgba(0,0,0,0.8);
	transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94) 0s;
}

#navContent .bgLeft
{
	background: #000;
	left: 0;
	top: 100%;
	opacity: .8
}

#navContent .bgRight
{
	background: #000;
	left: unset;
	right: 0;
	top: -100%;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	padding-top: 10%;
	padding-left: 4%;
}

#navContent.active .bgLeft, #navContent.active .bgRight
{
	top: 0;
}

#navContent ul
{
	margin: 0;
}

#navContent ul li
{
	list-style: none;
	margin-top: 1.2rem;
	padding-bottom: .9em;
}


#navContent a
{
	color: #fff;
	opacity: 0;
	position: relative;
	padding: 0 .9em .2em 0;
	display: inline-block;
	position: relative;
}

#navContent a::after
{
	content: '';
	display: block;
	height: 1px;
	width: 100%;
	background: #9f7b87;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: left center;
	transform-origin: left center;
	-webkit-transition: transform 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
	transition: transform 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
	margin-top: 10px;
	position: absolute;
}

#navContent a:hover::after, #navContent li.active > a::after
{
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

#navContent ul a
{
	text-transform: uppercase;
}

#navContent ul.submenu a
{
	text-transform: none;
}

#navContent a:hover, #navContent li.active > a
{
	color: #9f7b87;
}

#navContent ul.submenu li
{
	display: none;
}

.menu
{
	width: 24px;
	height: 22px;
	background-image: url(/imgs/menu-white.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	position: fixed;
	right: 4%;
	top: 40px;
	cursor: pointer;
	z-index: 11;
}

.menu.open
{
	background-image: url(/imgs/menu-close.png);
}

.menu:hover
{
	opacity: .7 !important
}

.menu:active
{
	opacity: .5 !important
}

.menu.close
{
	opacity: 0;
	background-image: url(/imgs/icon-close.png);
}

.menu.close:hover
{
	opacity: 1
}

.vertical-center
{
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */

  display: flex;
  align-items: center;
}

/*               LANDING
---------------------------------------*/
#landing .img-flowers
{
	max-width: 80%;
	max-height: 80vh;
	position: absolute;
	right: 0;
	top: -6%;
}

#landing .logo
{
	width: 50%;
	max-width: 90%;
	margin-bottom: 3%;
}

#landing .vertical-center
{
	vertical-align: end;
}

#landing
{
	background-color: #10151b;
}

#landing .d-flex
{
	position: absolute;
	width: 100%;
	min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
    min-height: 100vh; /* These two lines are counted as one :-)       */
    justify-content: flex-end;
	padding: 0 0 7% 0;
}


#landing .row
{
	height: 100%;
}

.btn1
{
	display: inline-block;
	border: 1px solid #847a7b;
	color: #f5e3e3;
	padding: .9rem 5rem;
	cursor: pointer;
}

.btn1:hover
{
	border-color: #fff;
	color: #fff;
}

/*               HEADER
---------------------------------------*/
#header
{
	width: 100%;
	height: 100px;
	line-height: 100px;
	position: fixed;
	border-bottom: 2px solid #f5e3e3;
	background: #fff;
	z-index: 5;
}

#header img.logo
{
	max-height: 75px;
}

body:not(#landing) .menu:not(.open)
{
	background-image: url(/imgs/menu-black.png);
}

/*
.container
{
	height: 100%;
	padding-bottom: 40px;
}*/

#content > .row
{
	min-height: 100vh;
}

#content .left
{
	margin-top: 100px;
	color: #fff;
	padding: 0 0 40px 3rem;
}

#content .right
{
	margin-top: 100px;
	padding: 3vh 4% 70px 4%;
}

#content .txt
{
	white-space: pre-line;
}

#content .txt, body#interest #content .right li, body#contact .container .row, #content .txt, body#homeoherbal #content .right
{
	font-family: 'Open Sans', sans-serif;
	font-size: 130%;
}

/*               WELCOME
---------------------------------------*/

body#welcome #content .left
{
	background-image: url("/imgs/img-welcome3.jpg");
}

.float-txt
{
	position: absolute;
	right: 10%;
	text-align: right;
	z-index: 2;
	color: #fff;
}

.float-txt h1, body#contact h1, body#modules .onecol h1
{
	font-weight: bold;
	font-kerning: normal;
	font-size: 2.7rem;
	margin-top: 0 !important;
	letter-spacing: 2px;
}

.float-txt p, body#contact .container > p, body#modules .onecol > p
{
	font-size: 1em;
	margin-bottom: 0;
	letter-spacing: 1px;
}

/*               ABOUT
---------------------------------------*/
.image-roll.bg {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-position: center top;
	background-repeat: no-repeat;
	background-color: #000;
	background-size: contain;
}

.image-roll img {
	display: none;
}

.image-roll:not(.bg) img.active {
	display: unset !important;

}
body#about #content .left
{
	position: relative;
	background-color: #000;
	/*background-image: url("/imgs/about-me-2023.jpg");
	background-position: center top;
	background-repeat: no-repeat;*/
}

#content .d-flex
{
	flex-direction: column;
}

#content .d-flex.left
{
	justify-content: center;
}

body#about #content .left img
{
	display: none;
}

body#about .img-wrapper
{
	display: none;
	position: relative;
}

body#about .logos img
{
	max-height: 34px;
}

body#about .logos img:not(:last-child)
{
	margin-right: 1rem;
}

/*               INTEREST
---------------------------------------*/
body#interest #content > .row
{
	background-color: #9b7c7e;
}

body#interest #content .left
{
	background-image: url("/imgs/img-interest.png");
	background-position: center;
}

body#interest #content .right, body#homeoherbal #content .right
{
	background-color: #bc8f8f;
}

body#interest #content .right h2
{
	text-align: left !important;
	text-transform: uppercase;
	font-size: unset;
	border-bottom: 2px solid #e1a1a1;
	padding-bottom: .5rem;
	margin-top: 5%;
	font-weight: bold;
	letter-spacing: 1px;
	line-height: 1.4;
}

body#interest #content .right ul
{
	margin-left: 0;
	padding-left: 17px;
	text-align: left !important;
}

/*               HOMEOHERBAL
---------------------------------------*/
body#homeoherbal #content .right h3 {
	font-family: 'Cormorant Garamond', serif;
	margin: 0;
	font-size: inherit;
	font-weight: bold;
	display: inline;
	letter-spacing: 1px;
}

body#homeoherbal #content .right h2
{
	font-family: 'Cormorant Garamond', serif;
	font-size: smaller !important;
	text-transform: uppercase;
	font-size: unset;
	border-bottom: 2px solid #e1a1a1;
	padding-bottom: .5rem;
	margin-top: 5%;
	font-weight: bold;
	letter-spacing: 1px;
	line-height: 1.4;
}

body#homeoherbal #content .left
{
	background-image: url("/imgs/healthy-jojoba-oil-composition_v_min.jpg");
	background-position: center;
	background-size: cover;
}

body#homeoherbal #content .right .row {
	white-space: pre-line
}

body#homeoherbal .block-text {
	white-space: normal;
	background-color: rgba(255,255,255,0.2);
	padding: 1rem;
}

body#homeoherbal .block-text a {
	color: #fff;
}

body#homeoherbal .block-text a:hover {
	opacity: .7;
}

body#homeoherbal .block-text a:active {
	opacity: .5;
}

/*              HOW
---------------------------------------*/

body#how #content .left
{
	background-image: url(/imgs/img-how.jpg);
}

/*               MODULES
---------------------------------------*/
body#modules .onecol
{
	text-align: center;
	margin-top: 100px;
	padding-bottom: 90px;
	padding-top: 2%;
	background-image: url(/imgs/modules-bg.jpg);
	background-size: cover;
	justify-content: center;
}

body#modules .onecol h1
{
	margin-bottom: .6rem !important;
}

body#modules .onecol > p
{
	margin-bottom: 2rem;
}

body#modules .onecol h2
{
	font-size: 2em;
	font-weight: bold;
	/*margin-top: 30%*/
}

body#modules #content .modules
{
	flex-direction: row;
	justify-content: center;
}

body#modules #content .module
{
	width: 300px;
	height: 300px;
	background: #000;
	color: #fff;
	background-repeat: no-repeat;
	background-size: 100%;
	justify-content: center;
	cursor: pointer;
}

body#modules #content .module a
{
	color: #fff !important;
}

body#modules #content .modules .module:not(:last-child)
{
	margin-right: 2rem;
}

body#modules #content .module.m1
{
	background-image: url(/imgs/img-rose1.jpg);
}

body#modules #content .module.m2
{
	background-image: url(/imgs/img-rose2.jpg);
}

body#modules #content .module.m3
{
	background-image: url(/imgs/img-rose3.jpg);
}

body#modules #content h1
{
	margin: 0 0 3% 0;
}

body#modules #content .btn
{
	font-size: .9em;
	display: inline-block;
	width: 60%;
	margin: 1.5em auto;
	padding: .6em 0;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 0;
	color: #fff;
}

body#modules #content .btn:hover
{
	border: 1px solid #fff;
}

/*              CONTACT
---------------------------------------*/
/*body#contact #content .row
{
	min-height: unset;
}

body#contact #content
{
	padding-bottom: 40px;
}*/

body#contact .top
{
	margin-top: 100px;
	background: #030406;
	color: #fff;
	background-image: url(/imgs/img-flowers-contact.jpg);
	background-repeat: no-repeat;
	background-position: right top;
	background-size: 400px;
}

body#contact .top .container > h1, body#contact .top .container > p
{
	text-align: center;
}

body#contact .col.icon
{
	max-width: 20px;
}

body#contact a {
	color: #fff;
}

body#contact a:hover {
	color: #9f7b87;
}

input, textarea
{
	background: 0 0;
	border: none;
	display: block;
	width: 100%;
	padding: 1rem .5rem;
	border-bottom: 1px solid #fff;
	color: #a8a8a8;
	font-size: .8em;
	letter-spacing: .3em;
}

input.has-error, textarea.has-error
{
	border-bottom: 1px solid #f03f3f
}

body#contact .icon-s a:hover
{
	opacity: .8;
}

body#contact .icon-s a:hover, body#contact .icon-s a:active
{
	opacity: .7;
}


/*               FOOTER
---------------------------------------*/
footer
{
	box-sizing: content-box;
	width: 100%;
	height: 40px;
	line-height: 40px;
	position: absolute;
	bottom: 0;
	border-top: 2px solid #f5e3e3;
	background: #fff;
	color: #cebfbf;
	z-index: 1;
	text-align: center;
	font-size: .7em;
	letter-spacing: .05rem;
}

footer a
{
	color: #cebfbf;
}

footer a:hover
{
	color: #ae7373
}

.grow
{
	transition: all .2s ease-in-out;
}
.grow:hover
{
	transform: scale(1.05);
}

/*
==============================================
slideLeft
==============================================
*/


.slideLeft{
	animation-name: slideLeft;
	-webkit-animation-name: slideLeft;

	animation-duration: .5s;
	-webkit-animation-duration: .5s;

	animation-timing-function: ease-in-out;
	-webkit-animation-timing-function: ease-in-out;

	visibility: visible !important;
}

@keyframes slideLeft {
	0% {
		right: -30%;
	}
	100% {
		right: 0;
	}
}

@-webkit-keyframes slideLeft {
	0% {
		right: -30%;
	}
	100% {
		right: 0;
	}
}

.slideUp {
	animation-name: slideUp;
	-webkit-animation-name: slideUp;

	animation-duration: 1s;
	-webkit-animation-duration: 1s;

	animation-timing-function: ease;
	-webkit-animation-timing-function: ease;

	visibility: visible !important;
}

@keyframes slideUp {
	0% {
		transform: translateY(100%);
	}
	100% {
		transform: translateY(0%);
	}
}

@-webkit-keyframes slideUp {
	0% {
		-webkit-transform: translateY(100%);
	}
	100% {
		-webkit-transform: translateY(0%);
	}
}


.slideDown {
	animation-name: slideDown;
	-webkit-animation-name: slideDown;

	animation-duration: 1s;
	-webkit-animation-duration: 1s;

	animation-timing-function: ease;
	-webkit-animation-timing-function: ease;

	visibility: visible !important;
}

.fade-in
{
	opacity:0;
	-webkit-animation:fadeIn ease-in 1;
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	-webkit-animation-duration:.2s;
	-moz-animation-duration:.2s;
	animation-duration:.2s;
}

.fade-in2
{
	opacity:0;
	-webkit-animation:fadeIn ease 1;
	-moz-animation:fadeIn ease 1;
	animation:fadeIn ease 1;
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	-webkit-animation-duration:.2s;
	-moz-animation-duration:.2s;
	animation-duration:.2s;
	animation-delay: .1s;
}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

@keyframes slideDown {
	0% {
		transform: translateY(0%);
	}
	100% {
		transform: translateY(100%);
	}
}

@-webkit-keyframes slideDown {
	0% {
		-webkit-transform: translateY(0%);
	}
	100% {
		-webkit-transform: translateY(100%);
	}
}

@media (min-width: 2400px) {

}

@media (min-width: 1921px) {
	body
	{
		font-size: 100%;
	}

	body#modules #content .module
	{
		width: 400px;
		height: 400px;
	}
}

@media (max-width: 1080px) {
	body#modules #content .module
	{
		width: 220px;
		height: 220px;
		font-size: .7rem;
	}
}

@media (max-width: 991px) {
	#landing .logo
	{
		width: 85%;
	}

	.menu
	{
		top: 40px !important;
	}

	/*
	#content .left {
		padding: 0;
		background-position: center;
		width: 80vw;
		height: 80vw;
		margin: 130px auto 0;
	}*/

	#content .left
	{
		padding: 0;
		background-position: center;
		width: 100%;
		height: 200px;
	}

	.float-txt
	{
		left: 0;
		width: 100%;
		text-align: center;
	}

	#content .right
	{
		text-align: center;
		margin-top: 0;
		padding-top: 0;
		padding-left: 2%;
		padding-right: 2%;
	}

	body#about #content .left
	{
		display: none !important;
	}

	#content .right .img-wrapper
	{
		display: block;
		margin: 130px 0 1rem 0;
	}

	#content .right .img-wrapper img
	{
		max-width: 95%
	}

	#content .right .img-wrapper .float-txt
	{
		bottom: 10%;
	}

	body#interest #content > .row
	{
		align-content: flex-start;
	}

	body#interest #content .left
	{
		background-position: center -320px;
	}

	body#interest #content .right
	{
		align-self: flex-start;
	}

	body#interest #content .right h2
	{
		margin-top: 10%;
	}

	body#modules #content .onecol
	{
		padding-top: 5%;
	}

	body#contact .top
	{
		background-size: 35%
	}
}

@media (max-width: 767px) {
	#landing .d-flex
	{
		justify-content: center;
		padding: 30% 0 0 0;
	}

	body#modules #content .modules
	{
		flex-direction: column;
	}

	body#modules #content .modules .module
	{
		margin: 2rem auto !important;
	}
}

@media (max-width: 576px) {
	#navContent .bgRight
	{
		padding-left: 10%;
	}

	body#interest #content .right li
	{
		font-size: 120%;
	}

	body#contact .container .row
	{
		font-size: 120%;
	}

	#navContent .bgLeft
	{
		display: none;
	}

	#navContent .bgRight
	{
		width: 100%;
	}

	#navContent ul
	{
		padding: 0;
	}

	#landing .img-flowers
	{
		max-width: 95%;
	}

	#landing .logo
	{
		width: 90%;
	}

	#landing .d-flex
	{
		justify-content: center;
		padding: 15% 0 0 0;
	}

	#header img.logo
	{
		max-width: 70%
	}

	#header
	{
		height: 70px;
		line-height: 70px;
	}

	#content .right .img-wrapper
	{
		display: block;
		margin: 80px 0 .5rem 0;
	}

	#content .left, body#modules .onecol, body#contact .top
	{
		margin-top: 70px;
	}

	.menu
	{
		width: 16px;
		height: 17px;
		right: 4% !important;
		top: 28px !important;
	}

	.float-txt
	{
		font-size: .9em;
	}

	body#interest #content .right h2
	{
		margin-top: 7%;
	}

	body#modules #content .onecol
	{
		padding-top: 10%;
	}

	body#modules #content .module
	{
		width: 280px;
		height: 280px;
	}
}