@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:400,900&display=swap');
@import url("https://use.typekit.net/rsb3cmn.css");

/*COLORS
Grey: #f5f5f5;
Grey Dark: #535353;
Font: #535353;
Purple CTA: #a15e98;
Purple light: rgba(244,229,247,1);

Blob Prune: #a15e98;
Blob Blue: #dddcf2;
Blob Peach: #f4daeb;
*/

/*Page width*/
/*Small: 5.5vw;
Medium: 10vw;
Wide: 15vw;*/

* {
	box-sizing: border-box;
}

a {
	color: #a15e98;
	outline: none;
	text-decoration: none;
	transition: color 0.6s ease;
}

a:hover,
a:hover h1,
a:hover h2,
a:hover h3,
a:hover h4,
a:hover h5,
.story-multi-item a h2 span:hover,
.story-multi-item a h5 span:hover{
	color: #d9abd6;
	transition: color 0.6s ease;
	border-color: #d9abd6;
}

a:hover .story-cta > img,
.story-cta:hover img{
	opacity: 0.5;
	transition: opacity 0.3s ease;
}

.story-multi-item > .story-cta > img{
	opacity: 0.7;
}

a.link-d{
	display: block;
}

a.link-m{
	display: none;
}

body{
	background-color: #f5f5f5;
	margin: 0;
}

button{
	background-color: #252525;
	border: 1px solid #f0e81a; /*Yellow*/
	cursor: pointer;
	border-radius: 6px;
	outline: none;
	padding: 10px 16px;
}

button h4{
	color: #f0e81a;
	text-transform: uppercase;
	margin: 0;
}

html{
	scroll-behavior: smooth;
}

footer{
	background-color: #eaeaea;
	color: #535353;
	float: left;
	position: relative;
	width: 100%;
}

footer a{
	color: #535353;
	display: block;
}

footer ul{
	margin: 0;
	padding: 0 5.5vw;
	width: 100%;
}

footer ul li:nth-child(1){
	padding: 2.2vw 2.2vw 1.5vw 0;
}

footer ul li:nth-child(2){
	padding: 2.2vw 0;
}

footer ul li:nth-child(3){
	padding: 2.2vw 0 2.2vw 2.2vw;
}

footer ul li{
	float: left;
	list-style: none;
	padding: 2%;
	width: 33%;
}

footer ul li img{
	float: left;
	margin: 0 10px 10px 0;
	max-width: 170px;
}

footer ul li span{
	float: left;
	width: 100%;
}

footer ul li span img {
	filter: grayscale(1);
	margin: 0 8px 0 0;
	width: 22px;
}

footer ul li span img,
footer ul li span h6{
	float: left;
	line-height: 20px;
	margin-bottom: 17px;
}

footer ul li span i{
	float: left;
	margin-right: 8px;
}

footer h6 {
	margin: 0 0 12px;

	font-size: 16px;
	line-height: 22px;
}

footer h6:nth-child(3){
	display: block;
	float: left;
	margin: 0;
	width: 100%;
}

footer a.social {
	float: left;
	width: 50px;
}

h1,h2,h3,h5, span, .sidenav{
	font-family: minerva-modern, sans-serif; 
	margin: 0;
}

h1 {
	font-size: 40px;
	font-weight: 600;
	letter-spacing: 0.2px;
}

h2{
	font-size: 26px;
	font-weight: 700;
	letter-spacing: 0.8px;
}

h3{
	font-size: 60px;
	font-weight: 400;
	line-height: 65px;
}

h4{
	font-family: 'Nunito Sans', sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 29px;
}

h5{
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.3px;
	line-height: 24px;
}

h6{
	font-family: 'Nunito Sans', sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 27px;
}

ul{
	list-style-type: circle;
	padding-inline-start: 20px;
}

#clearfix{
	content: "";
	clear: both;
	display: flex;
}

/*#clearfix::after{
	content: "";
	clear: both;
	display: flex;
}*/

#max{
	margin: auto;
	max-width: 1100px;
}

.ani-delay-1{
	animation-delay: 0.2s;
}

.bkg-gray{
	background-color: #f5f5f5;
}

.bkg-pink{
	background-color: #f4daeb;
}

.bkg-lightpurple {
	background-color: #f7f5ff;
}

.bkg-purple {
	background-color: rgba(244,229,247,1);
}

.bkg-white{
	background-color: #fff;
}

.button-stroke{
	border: 2px solid #a15e98;
	border-radius: 7px;
	cursor: pointer;
	font-size: 16px;
	padding: 14px 28px !important;
}

.col {
	float: left;
	width: 50%;
}

.col-3 {
	float: left;
	margin: 1vh 2vw 0;
	width: 20vw;
}

.col-3 > h5 {
    padding-top: 0 !important;
}

.col-4 {
	float: left;
	margin: 3.5vw 2% 2vw;
    width: 21%;
}

.container {
	padding-top: 60px;
}

.container-center {
	display: block;
	margin: 0 auto;
	width: 100%;
}

.disp-lg{
	display: block;
}

.disp-m{
	display: none;
}

.disp-sm{
	display: none;
}

.fadeinup {
	opacity: 0;
	animation-name: fadeInUp;
	-webkit-animation-name: fadeInUp;

	animation-duration: 3.3s;
	animation-fill-mode: both;
	-webkit-animation-duration: 3.3s;
	-webkit-animation-fill-mode: both
}

	@keyframes fadeInUp {
		from {
			transform: translate3d(0,40px,0)
		}

		to {
			transform: translate3d(0,0,0);
			opacity: 1
		}
	}

	@-webkit-keyframes fadeInUp {
		from {
			transform: translate3d(0,40px,0)
		}

		to {
			transform: translate3d(0,0,0);
			opacity: 1
		}
	}

.fade_scroll {
	opacity: 1;
}

.fade_scroll.in-view {
	-moz-animation: fade_scroll-ani 2s ease-out both;
	-webkit-animation: fade_scroll-ani 2s ease-out both;
	animation: fade_scroll-ani 2s ease-out both;
	animation-delay: 1.3s;
}

	@-moz-keyframes fade_scroll-ani {
		0%   {opacity: 1;}
		99%  {opacity: 0;}
		100% {display: none !important;opacity: 0;}
	}

	@-webkit-keyframes fade_scroll-ani {
		0%   {opacity: 1;}
		99%  {opacity: 0;}
		100% {display: none !important;opacity: 0;}
	}

	@keyframes fade_scroll-ani {
		0%   {opacity: 1;}
		99%  {opacity: 0;}
		100% {display: none !important;opacity: 0;}
	}

.footer-location{
	color: black;
	float: left;
	max-width: 200px;
}

.footer-maker{
	background-color: #dadada;
	float: left;
	padding: 12px 0;
	text-align: center;
	width: 100%;
}

.footer-maker h6,
.footer-maker a{
	color: #404042;
	margin: 0;
}

.header{
	background: center top / cover no-repeat;
	height: 25vw;
	max-height: 500px;
	overflow: hidden;
	width: 100%;
}

.header h1{
	position: absolute;
	text-align: center;
	text-transform: uppercase;
	top: 11vw;
	width: 100%;
}

.header img{
	width: 100%;
}

.header-underline{
	display: block;
	margin: 0 auto;
	position: absolute;
	top: 18vw;
	width: 100%;
}

.header-underline span{
	background-color: #f0e81a;
	box-sizing: border-box;
	display: block;
	height: 8px;
	margin: 0 auto;
	overflow: hidden;
	width: 90px;

	-webkit-animation: scale-up 1.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.2s both;
	animation: scale-up 1.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.2s both;
}

	@-webkit-keyframes scale-up {
		0% {
			-webkit-transform: scaleX(0.4);
			        transform: scaleX(0.4);
		}
		100% {
			-webkit-transform: scaleX(1);
			        transform: scaleX(1);
		}
	}
	@keyframes scale-up {
		0% {
			-webkit-transform: scaleX(0.4);
			        transform: scaleX(0.4);
		}
		100% {
			-webkit-transform: scaleX(1);
			        transform: scaleX(1);
		}
	}

.mob-hidden{
	display: block;
}

.mob-visible{
	display: none;
}

.mobile-br{
	display: none;
}

.pulse {
	box-shadow: 0 0 0 rgba(161, 94, 152, 0.6);

	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-name: pulse;
}

.pulse:hover {
	animation: none;
}

	@-webkit-keyframes pulse {
		0% {
			-webkit-box-shadow: 0 0 0 0 rgba(161, 94, 152, 0.6);
		}
		70% {
			-webkit-box-shadow: 0 0 0 20px rgba(161, 94, 152, 0.2);
		}
		100% {
			-webkit-box-shadow: 0 0 0 0 rgba(161, 94, 152, 0);
		}
	}

	@keyframes pulse {
		0% {
			-moz-box-shadow: 0 0 0 0 rgba(161, 94, 152, 0.6);
			box-shadow: 0 0 0 0 rgba(161, 94, 152, 0.6);
		}
		70% {
			-moz-box-shadow: 0 0 0 20px rgba(161, 94, 152, 0.2);
			box-shadow: 0 0 0 20px rgba(161, 94, 152, 0.2);
		}
		100% {
			-moz-box-shadow: 0 0 0 0 rgba(161, 94, 152, 0);
			box-shadow: 0 0 0 0 rgba(161, 94, 152, 0);
		}
	}

.section{
	margin: 0 auto;
	max-width: 1200px;
}

.section:after {
	content: "";
	display: table;
	clear: both;
}

.section-bkg{
	background-color: #5b5b5b;
	display: inline-block;
	padding: 20px 0;
	width: 100%;
}


/* ====== NAV ====== */
	.anchor {
		display: block;
		position: relative;
		top: -60px;
		visibility: hidden;
	}

	nav{
		background-color: rgba(255,255,255,0.9);
		height: 60px;
		position: fixed;
		width: 100%;
		z-index: 100;
	}

	nav > span{
		cursor: pointer; 
		float: left;
		padding: 10px 20px 0;
		position: relative;
	}

	nav > span > img{
		height: 40px;
		transition: 0.5s
	}

	.nav-name{
		height: auto;
		left: 35vw;
		padding-top: 8px;
		position: absolute;
		width: 30vw;
	}

	.nav-name img{
		height: 38px;
		width: 100%;
	}

	.nav-sm{
		display: none;
	}

	.nav-social{
		float: right;
		padding: 10px 20px 0 0;
		position: relative;
	}

	.nav-social a{
		float: left;
	}

	.nav-social img{
		height: 40px;
		transition: 0.5s
	}

	/*Hover desaturate icon*/
	.nav-social a img:hover,
	span > img:hover,
	.nav-name img:hover,
	.sidenav img:hover,
	.hp-textbanner-close img:hover{
		filter: saturate(0%);
	}

	.sidenav {
		background-color: #f7f5ff;
		background: -moz-linear-gradient(left,  #f7f5ff 0%, #f7f5ff 250px, rgba(0,0,0,0.7) 250px, rgba(0,0,0,0.7) 100%);
		background: -webkit-linear-gradient(left,  #f7f5ff 0%,#f7f5ff 250px,rgba(0,0,0,0.7) 250px,rgba(0,0,0,0.7) 100%);
		background: linear-gradient(to right,  #f7f5ff 0%,#f7f5ff 250px,rgba(0,0,0,0.7) 250px,rgba(0,0,0,0.7) 100%);
		height: 100%;		
		left: 0;
		overflow-x: hidden;
		padding-top: 0px;
		position: fixed;
		top: 0;
		transition: 0.5s;
		width: 0;
		z-index: 200;
	}

	.sidenav a,
	.sidenav span{
		color: #535353;
		text-decoration: none;
		transition: 0.3s;
	}

	.sidenav a {
		display: block;
		font-size: 25px;
		padding: 8px 8px 8px 32px;
		width: 250px;
	}

	.sidenav a:hover,
	nav > span:hover,
	.nav-social > a:hover {
		color: #d9abd6;
	}

	.sidenav .closebtn {
		color: #a15e98;
		font-size: 46px;
		line-height: 46px;
		padding: 0px 8px 8px 14px;
	}

	.sidenav img {
		height: 40px;
		margin-top: 10px;
	}

	.sidenav span{
		display: inline;
		font-size: 11px;
		height: 38px;
		line-height: 34px;
		letter-spacing: 1.5px;
		padding: 8px 8px 0 32px;
		text-transform: uppercase; 
		text-align: center;
		width: 250px;

		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	.sidenav-collapse{
		height: 100vh;
		overflow: hidden;
		padding: 0 !important;
		position: absolute;
		right: 0;
		top: 0;
		width: calc(100vw - 250px) !important;
    }
/* ====== /NAV ====== */


/* ====== TEXT BANNER ====== */
	#hp-textbanner{
		/* === On/Off Toggle === */
		display: none;

		background-color: #e0ddee;
		border-bottom: 2px solid #ece9fb;
		/*height: 60px;*/
		margin: auto;
		padding: 0;
		position: fixed;
		top: 60px;
		width: 100%;
		z-index: 20
	}

	#hp-textbanner h6{
		display: table;
		font-size: 15px;
		letter-spacing: 0.25px;
		line-height: 23px;
		margin: 6px 0 0 23px;
		position: relative;
		text-align: center;
		width: calc(100% - 80px);
	}

	a.hp-textbanner-close{
		background: #ece9fb;
		float: right;
		height: 50px;
		margin: 0 0 0 18px;
		position: relative;
		width: 50px;
	}

	.hp-textbanner-close img{
		padding: 13px;
		width: 100%;
	}
/* ====== /TEXT BANNER ====== */


/* ====== HOMEPAGE ====== */
	section {
		padding-top: 60px;
		height: 100vh;
		/*scroll-snap-align: start;*/
		position: relative;
	}

	.col-4 h4,
	.col-4 h5{
		text-align: left;
	}

	.col-4 h5{
		font-size: 20px;
	}

	.blob1,
	.blob2,
	.blob3,
	.blob4,
	.blob5{
		position: absolute;
		z-index: 0;
	}

	.blob1 {
		fill: #dddcf2; /*light blue*/
		left: 14vw;
		top: 4vw;
		width: 30vw;

		animation: move 25s ease-in-out infinite;
	}

	.blob2 {
		fill: #dddcf2; /*light blue*/
		left: 72vw;
		top: 3vw;
		width: 50vmax;

		animation: movetwo 35s ease-in-out infinite;
	}

	.blob3 {
		fill: #a15e98; /*prune*/
		left: 50vw;
		top: -20vw;
		width: 50vmax;

		animation: movethree 20s ease-in-out infinite;
	}

	.blob4 {
		fill: #f4daeb; /*peach*/
		left: 0;
		top: 0;
		width: 48vmax;

		animation: movefour 30s ease-in-out infinite;
	}

	.blob5 {
		fill: #f4daeb; /*peach*/
		left: 78vw;
		top: 32vw;
		width: 24vmax;

		animation: movefive 40s ease-in-out infinite;
	}

		@keyframes move {
			0% { transform: scale(1, 0.9) translate(2vw, 3vh); }
			30% { transform: scale(0.9, 0.9) translate(8vw, 3vh) rotate(1deg); }
			50% { transform: scale(0.8, 1) translate(11vw, 2vh) rotate(6deg); }
			60% { transform: scale(0.7, 1) translate(5vw, 5vh) rotate(2deg); }
			80% { transform: scale(0.8, 1) translate(0vw, 5vh) rotate(-3deg); }
			100% { transform: scale(1, 0.9) translate(2vw, 3vh) }
		}

		@keyframes movetwo {
			0% { transform: scale(1) translate(1vw, 3vh); }
			30% { transform: scale(0.8, 1) translate(3vw, 3vh) rotate(1deg); }
			50% { transform: scale(0.8, 1) translate(2vw, 2vh) rotate(2deg); }
			60% { transform: scale(1) translate(0vw, -1vh) rotate(1deg); }
			80% { transform: scale(1.1) translate(0vw, 0vh) rotate(-1deg); }
			100% { transform: scale(1) translate(1vw, 3vh);}
		}

		@keyframes movethree {
			0% { transform: scale(1.1, 1) translate(0vw, 0vh); }
			30% { transform: scale(1, 0.9) translate(-1vw, 1vh); }
			50% { transform: scale(1.1, 0.7) translate(-2vw, 1vh); }
			60% { transform: scale(1.3, 0.8) translate(-3vw, 2vh); }
			80% { transform: scale(1.3, 1) translate(-2vw, 0vh); }
			100% { transform: scale(1.1, 1) translate(0vw, 0vh); }
		}

		@keyframes movefour {
			0% { transform: scale(1, 0.8) translate(0vw, 3vh); }
			30% { transform: scale(0.9, 0.9) translate(-4vw, 3vh) rotate(1deg); }
			50% { transform: scale(0.8, 1) translate(-11vw, 3vh) rotate(3deg); }
			60% { transform: scale(0.9, 1) translate(-7vw, 5vh) rotate(2deg); }
			80% { transform: scale(1, 1) translate(-3vw, 5vh) rotate(-2deg); }
			100% { transform: scale(1, 0.8) translate(0vw, 3vh);}
		}

		@keyframes movefive {
			0% { transform: scale(1) translate(0vw, 0vh); }
			30% { transform: scale(0.8, 1) translate(-2vw, 0vh) rotate(11deg); }
			50% { transform: scale(0.9, 1.1) translate(-2vw, -1vh) rotate(18deg); }
			60% { transform: scale(1.1) translate(0vw, -1vh) rotate(11deg); }
			80% { transform: scale(1.2) translate(0vw, -1vh) rotate(-2deg); }
			100% { transform: scale(1) translate(1vw, 0vh); }
		}

	.demo a {
		bottom: 0;
		color: #fff;
		display: inline-block;
		left: 50%;
		position: absolute;
		-webkit-transform: translate(0, -50%);
		transform: translate(0, -50%);
		transition: opacity .3s;
		z-index: 2;
	}

	.demo a:hover {
		opacity: .5;
	}

	#section04 a span {
		border-left: 1px solid #fff;
		border-bottom: 1px solid #fff;
		box-sizing: border-box;
		height: 24px;
		left: 50%;
		margin-left: -12px;
		position: absolute;
		top: 0;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
		width: 24px;

		-webkit-animation: scrolld 2s infinite ease-out;
		animation: scrolld 2s infinite ease-out;
	}

		@-webkit-keyframes scrolld {
			0% { -webkit-transform: rotate(-45deg) translate(0, 0); }
			60% { -webkit-transform: rotate(-45deg) translate(-10px, 10px); }
			100% { -webkit-transform: rotate(-45deg) translate(0, 0); }
		}

		@keyframes scrolld {
			0% { transform: rotate(-45deg) translate(0, 0); }
			60% { transform: rotate(-45deg) translate(-10px, 10px); }
			100% { transform: rotate(-45deg) translate(0, 0); }
		}

	.fadeInRight-button {
		position: absolute;
		right: 10vw;
		top: 40vh;
	}

	.fas.fa-2x{
		padding: 0 1vw;
	}

	.hp-cert{
		bottom: 10vh;
		position: absolute;
		text-align: center;
		width: 100%;
	}

	.hp-cert h5{
		font-size: 18px;
		padding: 0 !important;
		margin: 0 !important;
		text-transform: inherit !important;
	}

	.hp-cert img{
		display: none;
		height: 10vh;
		margin: 0 auto;
	}

	.hp-hr{
		border: 0.5px solid #000;
		margin: 34px 0;
		max-width: 80px;
	}

	.hp-insta{
		margin: 0 auto;
		max-width: 800px;
		padding: 0 14px;
	}

	.hp-moon{
		background-image: url(https://www.overthemoonbirth.ca/svg/moonset.svg);
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		height: 100%;
	}

	.hp-quote{
		display: inline-block;
		padding: 0 20vh;
		text-align: center;
		width: 100%;
	}

	.hp-quote p{
		font-family: serif;
		font-size: 50px;
		font-style: italic;
		padding: 10vw;
	}

	.hp-section-title{
		margin: 0 auto;
		padding: 30px 0;
		text-align: center;
		text-transform: uppercase;
		width: 100%;
	}

	.hp-services{
		background-color: lavender;
	}

	.hp-services-frame{
		height: 100vh;
	}

	.hp-services-frame a{
		display: inline-block;
	}

	.hp-services-frame h2{
		font-family: 'Nunito Sans', sans-serif;
		font-size: 17px;
		font-weight: 400;
		letter-spacing: inherit;
		line-height: 29px;
		margin: 0;
		max-width: 440px;
		width: 32vw;
	}

	.hp-services-frame h4{
		margin: 0;
		max-width: 440px;
		width: 32vw;
	}

	.hp-services-frame h5{
		letter-spacing: 0.4px;
		margin-bottom: 10px;
		padding-top: 20vh;
		text-transform: uppercase;
	}

	.hp-services-frame > img{
		float: right;
		height: calc(100% - 60px);
		pointer-events: none
	}

	.hp-services-frame > img.hp-services-wiretwo {
		height: calc(100% - 60px);
		padding-top: 10vh;
	}

	.hp-services-top{
		/*padding-top: 16vh;*/
		padding-top: 11vw;
	}

	.hp-services-top h1{
		font-size: 60px;
		font-weight: 400;
		line-height: 65px;
		max-width: 340px;
	}

	.hp-services-top p{
		/*margin: 0;*/
		width: 100vw;
	}

	.hp-services-intro{
		background-color: #f5f5f5;
		width: 100%;
		z-index: 2;
	}

	.hp-services-intro h2{
		position: absolute;
		text-align: center;
		text-transform: uppercase;
		top: 48vh;
		width: 100%;
	}

	.intro-button {
		background-color: #a15e98;
		border-radius: 50%;
		height: 140px;
		padding: 16px;
		width: 140px;
		z-index: 100;
	}

	.intro-button:hover{
		transition: opacity 0.6s ease;
	}

	.intro-button h6{
		color: white;
		font-family: minerva-modern, sans-serif; 
		font-size: 26px;
		font-weight: bold;
		line-height: 26px;
		margin: 0;
		text-align: center;
	}

	.intro-button img{
		display: block;
		margin: auto;
		width: 46px;
	}

	.intro-button-m-frame{
		display: none;
	}

	.section1{
		background-color: rgb(244,229,247);
		overflow: hidden;
		padding-top: 0;
	}

	.section-title{
		padding-top: 30px;
		text-align: center;
	}

	.section-title-sub{
		display: block;
		margin: 10px auto 0;
		max-width: 52vw;
		text-align: center;
	}

	.slideshow-container {
		height: 100vh;
		margin: auto;
		position: relative;
		width: 100%;
	}

	.slideshow-img{
		height: 100vh;
		transform: translateX(-50%);
		overflow: hidden;
	}

	.slideshow-fade {
	  -webkit-animation-name: fade;
	  -webkit-animation-duration: 3s;
	  animation-name: fade;
	  animation-duration: 3s;
	}

		@-webkit-keyframes fade {
			from {opacity: .4} 
			to {opacity: 1}
		}

		@keyframes fade {
			from {opacity: .4} 
			to {opacity: 1}
		}

	.slideshow-mob-fade{
		display: none;
	}

	.slideshow-myslides {
		display: none;
	}

	.tooltip-home {
		position: relative;
		display: inline-block;
	}

	.tooltip-home .tooltiptext-home {
		background-color: #e0ddee;
		border-radius: 6px;
		color: #000;
		height: 100%;
		padding: 5px 0;
		position: absolute;
		text-align: center;
		visibility: hidden;
		z-index: 1;

		/* Position the tooltip text - see examples below! */
		width: 120px;
		top: 100%;
		left: 50%;
		margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
	}

	.tooltip-home:hover .tooltiptext-home {
		visibility: visible;
	}

	.tooltip-home .tooltiptext-home::after{
		display: none;
	}

	.tooltiptext-home h6{
		margin: 0;
	}

	.z5{
		position: relative;
		z-index: 5;
	}
/* ====== /HOMEPAGE ====== */


/* ====== ABOUT ====== */
	.about{
		background-image: url('https://www.overthemoonbirth.ca/img/jenna-profile3.png');
		background-position: left center;
		background-repeat: no-repeat;
		background-size: 100%;
		float: left;
		width: 100%;
	}

	.about,
	.about-jenna{
		min-height: 65vh;
		height: 100%;
	}

	.about-bkg-t{
		display: none;
	}

	.about-cert{
		display: inline-block;
		width: 100%;
	}

	.about-cert img{
		float: left;
		margin: 2vw 2vw 0 0;
		width: 7vw;
	}

	.about-pic{
		display: block;
		height: 75vh;
		float: left;
		overflow: hidden;
		width: 45vw;
	}

	.about-pic img{
		width: 100%;
	}

	.about-text{
		background-color: #f4daeb;
		display: block;
		float: right;
		padding: 5.5vw 5.5vw 5.5vw 2vw;
		width: 50vw;
	}

	.c-3col{
		display: block;
		margin: 0 auto;
		max-width: 1200px;
		padding: 10px 20px;	
	}

	.bio-2col-image{
		display: table-cell;
		height: auto;
		padding: 0 0 0 6%;
		width: 33%;
	}

	.bio-2col-image > img{
		width: 100%;
	}

	.bio-2col-item{
		padding: 0 4%;
		width: 42%;
	}

	.bio-2col-text{
		padding: 40px 6% 0;
		width: 48%;
	}

	.bio-2col-text > h1,
	.bio-2col-text h3{
		background-color: #000;
		margin: 0;
	}

	.bio-2col-text > h1{
		padding: 20px 40px 0;
	}

	.bio-2col-text h3{
		padding: 20px 40px;
	}

	.bio-button{
		background-color: #5b5b5b;
		border-top: 2px solid #000;
		color: #eee;
		height: 92px;
		font-size: 22px;
		transition: 0.3s;
	}

	.bio-button img{
		border-right: 2px solid #000; 
		height: 52px;
		padding: 20px 28px 20px 26px;
	}

	a .bio-button:hover{
		background-color: #000;
	}

	.bio-button-text{
		float: right;
		padding: 30px 60px 0 0;
		text-align: center;
	}
/* ====== /ABOUT ====== */


/* ====== CONTACT ====== */
	label {
		color: #666;
		display: block;
		padding: 0.5em 6%;
		position: absolute;
		left: calc(220px + 6%);
		text-align: center;
		top: 60px;
		width: calc(94% - 310px);
		z-index: 10;
	}

	label:hover {
		color: #000;
	}

	label::before:hover{
		background-color: orange;
	}

	label::before {
		background-color: #e0ddee;
		border-radius: 50%;
		content: "+";
		display: inline-block;
		font-weight: 900;
		font-size: 40px;
		height: 50px;
		left: 10px;
		margin-right: 3px;
		margin-top: 9px;
		position: absolute;
		vertical-align: text-top;
		width: 50px;
	}

	#expandbutton{
		height: calc(100% - 20px);
		top: auto;
		z-index: 100;
	}

	#expand {
		height: 0px;
		overflow: hidden;
		transition: height 0.5s;
	}

	#toggle:checked ~ #expand {
		height: 100%;
		min-height: 300px;
	}

	#toggle:checked ~ label::before {
		content: "-";
		line-height: 42px;
	}

	.c-2col,
	.c-3col{
		display: block;
		margin: 0 auto;
		max-width: 1200px;
		padding: 10px 20px;	
	}

	.c-2col{
		padding: 2% 0;
	}

	.c-2col-item{
		padding: 5vw 5.5vw;
		width: 49vw;
		max-width: 1200px;
	}

	h1.c-title{
		color: #f0e81a;
		margin: 0;
	}

	.contact{
		background-color: #e0ddee;
	}

	.contact h3{
		margin-top: 24px;
	}

	.contact-icons{
		float: left;
		margin: 10px 0;
		width: 100%;
	}

	.contact-icons h4,
	.contact-icons .fas{
		float: left;
		margin: 0;
		user-select: all;
		-webkit-user-select: all;
	}

	.contact-icons img {
		float: left;
		height: 27px;
		padding: 2px 10px 0 0
	}

	.expand-about{
		padding: 4vw 12vw 4vw 5.5vw;
	}

	.expand-about img{
		float: left;
		margin: 0 4% 0 0;
		width: 20%;
	}

	.expand-text{
		float: left;
		width: 70%;
	}

	.questions-form h5{
		margin: 24px 0 12px 0;
		text-transform: uppercase;
	}

	.questions-form input,
	.questions-form textarea,
	.questions-form select,
	.questions-form option{
		border: 2px solid #f5f5f5;
		border-radius: 6px;
		font-family: 'Nunito Sans', sans-serif;
		font-size: 14px;
		line-height: 18px;
		min-height: 45px;
		padding: 0 20px;
		width: 100%;
	}

	.questions-form textarea{
		padding: 10px 20px;
	}

	.questions-send{
		background-color: #a15e98;
		border: 0 !important;
		color: white;
		font-family: 'Nunito Sans', sans-serif;
		font-size: 18px;
		font-weight: 600;
		margin: 20px 0;
	}

	.toggle-title{
		background-color: #f5f5f5;
		height: 100px;
		padding: 2vw 5.5vw;
	}

	.toggle-title:hover{
		background-color: #a15e98;
	}

	.toggle-title label {
		left: 0;
		text-align: left;
	}

	.toggle-title label::before {
		content: "";
		width: 0;
	}

	.tooltip {
		position: relative;
		display: inline-block;
	}

	.tooltip .tooltiptext {
		visibility: hidden;
		width: 140px;
		background-color: #555;
		color: #fff;
		text-align: center;
		border-radius: 6px;
		padding: 5px;
		position: absolute;
		z-index: 1;
		bottom: 150%;
		left: 50%;
		margin-left: -75px;
		opacity: 0;
		transition: opacity 0.3s;
	}

	.tooltip .tooltiptext::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 50%;
		margin-left: -5px;
		border-width: 5px;
		border-style: solid;
		border-color: #555 transparent transparent transparent;
	}

	.tooltip:hover .tooltiptext {
		visibility: visible;
		opacity: 1;
	}
/* ====== /CONTACT ====== */


/* ====== STORIES & ARTICLE ====== */
	.article-author{
		background-color: #fff;
		display: inline-block;
		margin: 2vw 0 2vw 10vw;
		padding: 2vw;
	}

	.article-author img{
		border-radius: 50%;
		display: inline-block;
		height: 140px;
		margin-right: 2vw;
		vertical-align: top;
	}

	.article-author-text{
		width: 42vw;
	}

	.article-author-text,
	.article-author-text h2,
	.article-author-text h4{
		display: inline-block;
	}

	.article-breadcrumbs{
		background-color: white;
		display: table;
		padding: 10px 20px 6px 10vw;
		position: absolute;
		width: 100%;
		z-index: 10;
	}

	.article-breadcrumbs h6{
		float: left;
		margin: -3px 0 0;
	}

	.article-breadcrumbs img{
		float: left;
		height: 20px;
		padding-right: 2vw;
	}

	.article-cta-all{
		margin: 3vw 0 5vw;
	}

	.article-header{
		background-position: center top;
		background-repeat: no-repeat;
		background-size: cover;
		min-height: 12vw;
	}

	.article-header-title{
	    margin: -6vw 10vw 0 10vw;
	}

	.article-header-title h1,
	.article-header-title h4{
		background-color: white;
		content: "";
		clear: both;
		display: inline-block;
		float: left;
		padding: 8px 20px;
	}

	.article-header-title h4{
		margin: 0;
	}

	.article-header-1{
		background-image: url(https://www.overthemoonbirth.ca/img/otmb-stories-header.png);
	}

	.article-share{
		content: "";
		clear: both;
		float: left;
		margin-top: 30px;
	}

	.article-text{
		display: inline-block;
		margin: 4vw 34vw 0 10vw;
	}

	.article-pullquote{
		font-size: 40px;
		font-family: minerva-modern, sans-serif;
		line-height: 57px;
		margin: 40px 80px;
	}

	.article-pullquote span{
		font-size: 70px;
		line-height: 0px;
		vertical-align: middle;
	}

	.fa-quote-left{
		color: #bebbca;
		font-size: 170px;
		position: absolute;
		right: 10vw;
		top: 14vh;
		z-index: 0;
	}

	.slick-slide {
		margin: 0px 20px;
		opacity: 1;
		transition: all ease-in-out .3s;
	}

	.slick-active {
		opacity: 1;
	}

	.slick-current {
		opacity: 1;
	}

	.slick-list.draggable {
		width: calc(100vw - 10.5vw); /*6vw x 2 for .slick-prev and .slick-next*/
		margin: 0 auto;
	}

	.slick-slide img{
		width: auto;
	}

	.slick-prev:before,
	.slick-next:before {
	  color: black;
	}

	.slider {
		width: 50%;
		margin: 100px auto;
	}

	.story-cta1{
		float: left;
		text-align: center;
		width: 100%;
	}

	.story-cta{
		color: #a15e98;
		display: inline-block;
	}

	.story-cta img{
		height: 11px;
		float: right;
		margin: 7px 0 0 5px;
		width: auto !important;
	}

	.story-cta i{
		float: right;
		line-height: 24px;
		margin-left: 5px;
		margin-top: 0.7px;
	}

	h5.story-cta {
		letter-spacing: 1.2px;
	}

	.story-cta.button-stroke i{
		margin-top: 0;
	}

	.story-img{
		margin-bottom: 30px;
		max-height: 120px;
		overflow: hidden;
		width: 100%;
	}

	.story-img img{
		width: 100%;
	}

	.story-multi{
		margin: 0 auto !important;
		overflow: hidden;
		padding: 5vh 0;
		width: 98vw;
	}

	.story-multi-m{
		display: none;
	}

	.story-multi .slick-prev{
		padding-left: 2vw;
	}

	.story-multi .slick-next{
		padding-right: 2vw;
	}

	.story-multi .slick-prev,
	.story-multi .slick-next{
		background-color: #f7f5ff;
		border-radius: 0;
		height: 100%;
		width: 6vw;
	}

	.story-multi .slick-next::before,
	.story-multi .slick-prev::before{
		color: #a15e98;
		font-size: 30px;
	}

	.story-multi .slick-prev:hover,
	.story-multi .slick-prev:focus,
	.story-multi .slick-next:hover,
	.story-multi .slick-next:focus{
		background-color: #d9abd6;
		color: white;
		transition: color 0.6s ease;
		transition: background-color 0.6s ease;
	}

	.story-multi-item {
		display: block;
		float: left;
		padding: 0 3vw;
		width: 32vw;
	}

	.story-multi-item h2 span,
	.story-multi-item h5 span{
		color: #535353;
		font-weight: 600;
		text-transform: uppercase;
	}

	.story-multi-item h2{
		border-bottom: 2px solid purple;
		display: inline-block;
		margin-bottom: 8px;
	}

	.story-prevtext{
		color: #535353;
		margin: 12px 0;
	}

	.story-topq{
		padding: 4vh 10vw 6vw;
	}

	.story-topq hr{
		margin: 6vh 0 3vh;
	}

	.story-topq-left,
	.story-topq-right{
		display: block;
		text-transform: uppercase;
	}

	.story-topq-left h5,
	.story-topq-right h5{
		font-weight: 400;
	}

	.story-topq-left{
		color: #a15e98;
		float: left;
	}

	.story-topq-pullquote{
		color: #535353;
		font-size: 64px;
		font-family: minerva-modern, sans-serif;
		line-height: 90px;
		margin-bottom: 3vh;
	}

	.story-topq-right{
		float: right;
	}

	.story-topq-right h5 a{
		color: #535353;
	}
/* ====== /STORIES & ARTICLE ====== */


/* ====== PACKAGES ====== */
	.package-bub{
		float: right;
		margin-right: 6vw;
	}

	.package-header{
		background-position: left top;
		background-repeat: no-repeat;
		background-size: 50vw;
		height: 18.8vw;
		margin: 0;
		overflow: hidden;
		position: relative;
	}

	.package-header h3 {
		margin: -30px 0 0 3vw;
		position: absolute;
		z-index: 2;
	}

	.package-header img{
		height: 19vw;
		position: absolute;
		width: 50vw;
		z-index: 1;
	}

	.package-header-text{
		padding: 2vw 0 4vw;
	}

	.package-logo{
		height: auto;
		left: 18vw;
		opacity: 0;
		padding: 17vh 16vw !important;
		width: 64% !important;

		-webkit-animation: logo-ani 4s infinite;
		animation: logo-ani 4s infinite;
		animation-delay: 6s;
	}

		@-webkit-keyframes logo-ani {
			0%   {opacity: 0;}
			100% {opacity: 1;}
		}

		@keyframes logo-ani {
			0%   {opacity: 0;}
			100% {opacity: 1;}
		}

	.package-moonrise-bkg {
		-webkit-animation: moonupbkg-ani 6s 1;
		animation: moonupbkg-ani 6s 1;
	}

		@-webkit-keyframes moonupbkg-ani {
			0%   {-webkit-filter: brightness(0.8) saturate(2); filter: brightness(0.8) saturate(2);}
			100% {-webkit-filter: brightness(1); filter: brightness(1);}
		}

		@keyframes moonupbkg-ani {
			0%   {-webkit-filter: brightness(0.8) saturate(2); filter: brightness(0.8) saturate(2);}
			100% {-webkit-filter: brightness(1); filter: brightness(1);}
		}

	.package-moonrise-moon{
		-webkit-animation: moonrise-moon-ani 9s 1 ease-out;
		animation: moonrise-moon-ani 9s 1 ease-out;
	}

		@-webkit-keyframes moonrise-moon-ani {
			0%   {bottom: -160px;}
			60%  {bottom: 12px;}
			70%  {bottom: 6px;}
			85%  {bottom: 8px;}
			100% {bottom: 1px;}
		}

		@keyframes moonrise-moon-ani {
			0%   {bottom: -160px;}
			60%  {bottom: 12px;}
			70%  {bottom: 6px;}
			85%  {bottom: 8px;}
			100% {bottom: 1px;}
		}

	.package-moonrise-moonup {
		-webkit-animation: moonup-ani 6s 1;
		animation: moonup-ani 6s 1;
	}

		@-webkit-keyframes moonup-ani {
			0%   {-webkit-filter: brightness(0.75); filter: brightness(0.75);}
			20%  {-webkit-filter: brightness(0.85); filter: brightness(0.85);}
			40%  {-webkit-filter: brightness(0.95); filter: brightness(0.95);}
			100% {-webkit-filter: brightness(1); filter: brightness(1);}
		}

		@keyframes moonup-ani {
			0%   {-webkit-filter: brightness(0.75); filter: brightness(0.75);}
			20%  {-webkit-filter: brightness(0.85); filter: brightness(0.85);}
			40%  {-webkit-filter: brightness(0.95); filter: brightness(0.95);}
			100% {-webkit-filter: brightness(1); filter: brightness(1);}
		}

	.package-moonrise-moonuptwo {
		-webkit-animation: moonuptwo-ani 6s 1;
		animation: moonuptwo-ani 6s 1;
	}

		@-webkit-keyframes moonuptwo-ani {
			0%   {-webkit-filter: brightness(0.7); filter: brightness(0.7);}
			30%  {-webkit-filter: brightness(0.85); filter: brightness(0.85);}
			60%  {-webkit-filter: brightness(0.95); filter: brightness(0.95);}
			100% {-webkit-filter: brightness(1); filter: brightness(1);}
		}

		@keyframes moonuptwo-ani {
			0%   {-webkit-filter: brightness(0.7); filter: brightness(0.7);}
			30%  {-webkit-filter: brightness(0.85); filter: brightness(0.85);}
			60%  {-webkit-filter: brightness(0.95); filter: brightness(0.95);}
			100% {-webkit-filter: brightness(1); filter: brightness(1);}
		}

	.package-section{
		display: table;
		height: auto;
		padding: 5vw 0;
		width: 100%;
	}

	.package-section li{
		margin-bottom: 10px;
	}

	.package-section > img{
		float: left;
	}

	.package-section-cta-button{
		color: #a15e98;
		display: block;
		margin: 5vh auto 0;
		width: 220px;
	}

	.package-section h2,
	.package-section h3{
		text-align: center;
	}

	.package-section-img,
	.package-section-text{
		float: left;
	}

	.package-section-img{
		width: 29vw;
		z-index: 1;
	}

	.package-section-img > img{
		float: right;
		width: 100%;
	}

	.package-section-img-labour,
	.package-section-img-post{
		background-size: 35%;
		background-position: 88% center;
		background-repeat: no-repeat;
	}

	.package-section-text{
		padding-right: 1vw;
		max-width: 560px;
		width: 45vw;
		z-index: 2;
	}

	.package-section-text h2{
		text-transform: uppercase;
	}

	.package-section-text h2:nth-child(3){
		color: #a15e98;
		text-align: center;
	}

	.package-section-text h4{
		color: #535353;
		margin-bottom:0;
	}

	.package-section-text h4:nth-child(4){
		color: #a15e98;
	}

	.package-section-text p{
		padding-left: 20px;
	}

	.package-subtitle{
		padding-left: 2vw;
		position: absolute;
		top: 19.5vh;
		z-index: 10;	
    }

    .package-subtitle-fix{
		display: block;
		max-width: 1200px;
		margin: auto;
		width: 100%;
    }

	.package-title{
		 padding:4vh 0 9vh;
	}
/* ====== /PACKAGES ====== */



/* RESPONSIVE ================================================================================================== */
/* custom styles for xl desktop */
@media screen and (min-width:1400px) {
	.article-header-title{
		margin: -3vw 10vw 0 0;
	}

	.article-max{
		margin: 0 auto;
		max-width: 950px;
	}

	.article-text{
		margin: 0;
	}
}

/* custom styles for sm desktop */
@media screen and (min-width:1251px) {
	.hp-services-frame > img.hp-services-wiretwo {
		bottom: 20px;
		position: absolute;
		right: 11vw;
	}

	.package-section-img > img {
		width: auto;
	}

	.package-section-img-labour{
		background-image: url(https://www.overthemoonbirth.ca/img/otmb-package-labour.png);
	}

	.package-section-img-post{
		background-image: url(https://www.overthemoonbirth.ca/img/otmb-package-post.png);
	}
}

/* custom styles for HEIGHT sm desktop */
@media screen and (max-height:670px) {
	.hp-cert{
		bottom: 3vh;
	}

	.hp-services-frame h2{
		max-width: 50ch;
		width: 50ch;
	}
}

/* custom styles for tablet */
@media screen and (min-width:701px) and (max-width:1250px) {
	footer ul img {
		display: block;
		margin: 3vh auto 0;
		max-height: 34px;
		width: 30vw;
	}

	footer ul li {
		width: 100%;
		text-align: center;
	}

	footer ul li span {
		margin: 0 auto;
	}

	footer ul li:nth-child(2) {
		float: left;
		margin: 0 6%;
		width: calc(94% - 5.5vw);
	}

	footer ul li:nth-child(3){
		padding: 0;
		width: 100%;
	}

	footer ul li:nth-child(4) {
		display: none;
	}

	footer ul li:nth-child(5){
		padding: 2% 8%;
	}

	footer ul li:nth-child(6){
		padding: 0 0 2%;
	}

	footer ul li span{
		clear: both;
		content: "";
		display: inline-block;
		width: auto;
	}

	footer ul li span:nth-child(even) {
		float: right;
		margin-top: -40px;
	}

	#max{
		padding: 0 10vw;
	}

	.about{
		background-image: none;
		display: flex;
		flex-direction: row-reverse;
	}

	.about-cert img{
		width: 8vw;
	}

	.about-bkg-t{
		background-image: url(https://www.overthemoonbirth.ca/img/jenna-profile-t3.png);
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		display: block;
		min-height: 100px;
		width: 40vw;
	}

	.about-text{
		padding: 5.5vw;
		width: 60vw;
	}

	.article-header {
		min-height: 20vw;
	}

	.c-2col-item{
		padding: 5% 4.5%;
		width: 48.8vw;
	}

	.col-4{
		margin: 4vw 0 0 4vw;
		width: 17vw;
	}

	.col-4-1st {
		margin: 4vw 0 0 0;
	}

	.disp-lg{
		display: none;
	}

	.disp-m{
		/*important tag added for footer tablet size fix*/
		display: block !important;
	}

	.disp-sm{
		display: none;
	}

	.fadeInRight-button{
		right: 13vw;
		top: 41vh;
	}

	.footer-location{
		max-width: 100%;
		width: 100%;
	}

	.footer-location br{
		display: none;
		min-width: 100%;
	}

	.hp-moon{
		background-size: 100%;
		background-position: center top;
		min-height: 20vh;
		height: 100vh;
	}

	.hp-cert{
		position: relative;

		bottom: auto;
	}

	.hp-cert h5{
		padding: 3vw 0 0;
	}

	.hp-quote{
		min-height: 220px;
		width: 100%;
	}

	.hp-quote p{
		padding: 0;
	}

	.hp-services-frame h2{
		width: 40vw;
	}

	.hp-services-frame h4 {
		width: 40vw;
	}

	.hp-services-frame > img{
		height: 88%;
		opacity: 0.3;
		padding-top: 30px;
		padding-right: 2vw;
		position: absolute;
		right: 0;
		top: 60px;
	}

	.hp-services-frame > img.hp-services-wiretwo {
		height: 72%;
		padding-top: 9vh;
		padding-right: 4vw;
	}

	.hp-services-top {
		padding-top: 14vh;
	}

	.package-section-img-labour{
		background-position: right 11vw;
	}

	.package-section-img-post{
		background-position: right 8vw;
	}

	.package-section-img-labour{
		background-image: url(https://www.overthemoonbirth.ca/img/otmb-package-labour.png);
	}

	.package-section-img-post{
		background-image: url(https://www.overthemoonbirth.ca/img/otmb-package-post.png);
	}

	.package-section-img{
		display: none;
	}

	.package-section-img img{
		display: none;
	}

	.package-section-text{
		max-width: 100%;
		width: 100%;
	}

	.package-section-text p{
		margin: -20px 0 0;
		padding: 0;
		text-align: center;
	}

	.package-section-text h2:nth-child(1),
	.package-section-text h4:nth-child(2){
		max-width: 560px;
		width: 45vw;
	}

	.package-section-text h2:nth-child(3){
		margin-top: 30px;
	}

	.package-subtitle {
		top: calc(12vh + 55px);
	}

	.package-title {
		padding: 4vh 0 7vh;
	}

	.section-title-sub{
		max-width: 88vw;
	}

	.slick-slide {
		margin: 0 2vw;
	}

	.story-img{
		margin-bottom: 10px;
	}

	.story-cta1{
		margin-top: 6vw;
	}

	.story-img{
		max-height: 110px;
	}

	.story-multi{
		width: 100%;
	}

	.story-multi .slick-prev, .story-multi .slick-next{
		width: 9vw;
	}

	.story-multi-item{
		padding: 0 10px;
	}

	.story-prevtext{
		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 5;
		-webkit-box-orient: vertical;
	}
}

/* custom styles for mobile */
@media screen and (max-width:700px) {
	h2{
		font-size: 22px;
	}

	h3{
		font-size: 34px;
		line-height: 40px;
	}

	footer {
		padding: 5vw 8vw;
	}

	footer a.social{
		float: none;
	}

	footer ul img{
		display: block;
		margin: 0 auto 4px;
		max-width: 130px;
		width: 30vw;
	}

	footer ul li{
		width: 100%;
		text-align: center;
	}

	footer ul li:nth-child(2){
		margin: 4% 0 0 2.3vw;
		min-width: 240px;
		padding: 2% 0;
		width: 60vw;
	}

	footer ul li:nth-child(3){
		padding: 0;
	}

	footer ul li:nth-child(3) > h6,
	footer ul li:nth-child(6) > h6{
		margin: 0 auto;
	}

	footer ul li:nth-child(6){
		padding: 0;
	}

	footer ul li span{
		display: inline-block;
		float: none;
		height: 30px;
		margin: 0 auto;
		width: auto;
	}

	h1{
		font-size: 26px;
	}

	h4{
		font-size: 16px;
		line-height: 24px;
	}

	h6{
		font-size: 13px;
		line-height: 17px;
	}

	label{
		font-size: 35px;
		left: calc(180px + 8vw);
		width: auto;
	}

	label::before{
		font-size: 35px;
		font-weight: 900;
		height: 40px;
		margin-top: 0;
		width: 40px;
	}

	#toggle:checked ~ label::before {
		line-height: 36px;
	}

	label::before{
		font-weight: 400;
		line-height: 39px;
	}

	nav{
		height: 56px;
	}

	nav > span,
	.nav-social{
		padding: 10px 14px 0;
	}

	nav > span > img,
	.nav-social img{
		height: 36px;
	}

	section{
		padding-top: 20px;
	}

	#toggle:checked ~ #expand{
		display: inline-table;
		height: 100%;
		min-height: auto;
	}

	#hone{
		display: none;
	}

	#hp-textbanner{
		top: 56px;
	}

	.about{
		background-image: url(https://www.overthemoonbirth.ca/img/jenna-profile-m3.png);
		background-size: contain;
		background-position: top center;
	}

	.about-cert img{
		margin: 4vw 7vw 0 0;
		width: 20vw;
	}

	.about-text{
		background-color: transparent;
		width: 100%;
		padding: 52vw 8vw 8vw;
	}

	.about-text h1{
	    font-size: 35px;
    }

	.article-author{
		margin: 6vw 2vw 2vw;
		width: 96vw;
	}

	.article-author img{
		height: auto;
		padding: 2vw 22vw;
		width: 100%;
	}

	.article-share{
		margin: 20px 0 20px;
	}

	.article-author-text{
		margin: 2vw;
		width: 90vw;
	}

	.article-breadcrumbs{
		height: 40px;
		margin-left: 0;
		position: relative;
	}

	.article-breadcrumbs h6 {
		font-size: 16px;
		margin: 2px 0 0;
	}

	.article-breadcrumbs img{
		padding-right: 4vw;
	}

	.article-header {
		min-height: 22vw;
	}

	.article-pullquote{
		font-size: 25px;
		line-height: 40px;
		margin: 40px 0;
	}

	.article-pullquote span {
		font-size: 50px;
	}

	.article-text{
		margin: 4vw 10vw 0;
	}

	@keyframes move {
		0% { transform: scale(1, 0.9) translate(2vw, 17vh); }
		30% { transform: scale(0.9, 0.9) translate(8vw, 17vh); }
		50% { transform: scale(0.8, 1) translate(11vw, 16vh); }
		60% { transform: scale(0.7, 1) translate(5vw, 19vh); }
		80% { transform: scale(0.8, 1) translate(0vw, 19vh); }
		100% { transform: scale(1, 1) translate(1vw, 14vh);}
	}

	@keyframes movetwo {
		0% { transform: scale(1) translate(1vw, 3vh); }
		30% { transform: scale(0.8, 1) translate(3vw, 3vh) rotate(1deg); }
		50% { transform: scale(0.8, 1) translate(2vw, 3vh) rotate(2deg); }
		60% { transform: scale(1) translate(0vw, 0vh) rotate(1deg); }
		80% { transform: scale(1.2) translate(0vw, -3vh) rotate(-1deg); }
		100% { transform: scale(1) translate(1vw, 0vh); }
	}

	@keyframes movethree {
		0% { transform: scale(1.1, 1) translate(0vw, 0vh); }
		30% { transform: scale(1, 0.9) translate(-1vw, 1vh); }
		50% { transform: scale(1.1, 0.7) translate(-2vw, 1vh); }
		60% { transform: scale(1.3, 0.8) translate(-3vw, 2vh); }
		80% { transform: scale(1.3, 1) translate(-2vw, 0vh); }
		100% { transform: scale(1.2, 1) translate(-1vw, -1vh); }
	}

	@keyframes movefour {
		0% { transform: scale(1, 0.8) translate(1vw, 17vh); }
		30% { transform: scale(0.9, 0.9) translate(-8vw, 17vh); }
		50% { transform: scale(0.8, 1) translate(-16vw, 17vh); }
		60% { transform: scale(0.9, 1) translate(-11vw, 19vh); }
		80% { transform: scale(1, 1) translate(-9vw, 19vh); }
		100% { transform: scale(1, 0.9) translate(0vw, 17vh);}
	}

	@keyframes movefive {
		0% { transform: scale(1) translate(0vw, 60vh); }
		30% { transform: scale(0.8, 1) translate(-2vw, 60vh) rotate(11deg); }
		50% { transform: scale(0.9, 1.1) translate(-2vw, 59vh) rotate(18deg); }
		60% { transform: scale(1.1) translate(0vw, 59vh) rotate(11deg); }
		80% { transform: scale(1.3) translate(0vw, 59vh) rotate(-2deg); }
		100% { transform: scale(1) translate(1vw, 60vh); }
	}

	.c-2col-item {
		padding: 5% 2%;
		width: 100%;
	}

	.col-3{
		width: 39.5vw;
	}

	.col-4{
		margin: 4vw 0 4vw 8vw;
		min-height: 22vh;
		width: 38vw;
	}

	.col-4 h5{
		font-size: 17px;
	}

	.container {
		padding-top: 56px;
	}

	.contact{
		padding: 0 8vw;
	}

	h2.contact-text{
		font-size: 26px;
	}

	.disp-lg{
		display: none;
	}

	.disp-m{
		display: none;
	}

	.disp-sm{
		display: block;
	}

	.expand-about{
		padding: 0 8vw;
	}

	.expand-about img,
	.expand-text{
		margin: 0;
		width: 100%;
	}

	.expand-about img{
		max-height: 160px;
		width: auto;
	}

	.fa-quote-left{
		font-size: 150px;
		top: 16vh;
	}

	.fadeInRight-button{
		display: none;
		right: 10vw;
		top: 31vh;
	}

	.footer-location{
		font-size: 14px;
		float: none;
		line-height: 19px;
		margin: 6px -1px 0 0;
		padding: 0;
		text-align: center;
	}

	.header {
		height: 38vw;
	}

	.header h1 {
		top: 16vw;
	}

	.header-underline{
		top: 34vw;
	}

	.header-underline span{
		height: 6px;
	}

	.hp-cal{
		padding: 0 14px;
	}

	.hp-cert{
		bottom: 3vh;
		display: inline-block;
		margin: 4vw 0 8vw;
		min-height: 18vw;
		position: relative;
		width: 82vw;
	}

	.hp-cert br:nth-child(1){
		display: none;
	}

	.hp-hr{
		margin: 24px 0;
	}

	.hp-quote{
		height: 30vh;
		padding: 5vh 5vh;
		width: 100%;
	}

	.hp-quote p{
		font-size: 28px;
		line-height: 34px; 
		margin: 11vw 0 0;
		padding: 0;
	}

	.hp-services-frame{
		padding: 0 5vh;
	}

	.hp-services-frame a{
		width: 70vw;
	}

	.hp-services-frame h2{
		font-size: 16px;
		line-height: 24px;
		max-width: 316px;
		max-width: 290px;
		width: 100%;
	}

	.hp-services-frame h4{
		max-width: 316px;
		max-width: 290px;
		width: 100%;
	}

	.hp-services-frame h5{
		font-size: 14px;
		line-height: 22px;
		padding-top: 15vh;
	}

	.hp-services-frame > img{
		bottom: 0;
		height: calc(100vh - 38px);
		opacity: 0.1;
		position: absolute;
		right: 0;
	}

	.hp-services-top{
		padding-top: 16vh;
	}

	.hp-services-top h1{
		font-size: 34px;
		line-height: 40px;
		max-width: 190px;
	}

	.hp-services-top p{
		margin: 0;
	}

	.hp-quote{
		padding: 0 5vh;
	}

	.intro-button{
		height: 100px;
		padding: 3px;
		width: 100px;
	}

	.intro-button h6{
	    display: inline-block;
	    font-size: 20px;
	    line-height: 20px;
	    padding-left: 10px;
	}

	.intro-button-m {
		border-radius: 7px;
		display: flex;
		height: 45px;
		justify-content: center;
		padding: 13px 0;
		width: 80vw;
	}

	.intro-button-m img{
		height: 20px;
		float: left;
		width: auto;
	}

	.intro-button-m-frame{
		display: inline;
		position: relative;
		width: 100%;
	}

	.mob-hidden{
		display: none;
	}

	.mob-visible{
		display: block;
	}

	.mobile-br{
		display: block;
	}

	/*.nav-lg{
		display: none;
	}*/

	.nav-name {
		padding-top: 13px;
		max-width: 33%;
	}

	.nav-name img{
		height: 30px;
		max-width: 110px;
	}

	.nav-sm{
		display: block;
	}

	.package-header{
		background-size: 70vw;
		height: 26.7vw;
		padding: 0 10vw;
	}

	.package-header img{
		height: 27vw;
		width: 70vw;
	}

	.package-header-text{
		padding: 2vw 10vw 5vh;
	}

	.package-bub{
		margin: 12px 20px 0 0;
	}

	.package-section{
		padding: 5vh 10vw;
	}

	.package-section-cta{
		height: auto;
		padding: 5vh 10vw 6vh;
	}

	.package-section-cta-button{
		margin: 4vh auto 0;
	}

	.package-section-img > img {
		display: none;
	}

	.package-section-pattern{
		background-image: url(https://www.overthemoonbirth.ca/img/otmb-stories-header.png);
		background-size: cover;
		background-repeat: no-repeat;
		height: 60px;
	}

	.package-section-text{
		width: 100%;
	}

	.package-section-text h4, /*new*/
	.package-section-text h6{
		margin: 4vw 0 0;
	}

	.package-subtitle{
		font-size: 31px;
		top: calc(60px + 10vh);
	}

	.package-subtitle-fix{
		padding-left: 10vw;
	}

	.package-title{
		 padding:4vh 10vw 6vh;
	}

	.row{
		padding: 0 2%;
		width: 96%;
	}

	.section-title-sub{
		margin: 0 auto;
		max-width: 82vw;
	}

	.sidenav{
		background: #f7f5ff;
	}

	.sidenav a {
		display: block;
		padding: 8px 0;
		text-align: center;
		width: 100vw;
	}

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

	.sidenav span{
		display: block;
		height: 38px;
		padding: 8px 0;
		text-align: center;
		width: 100vw;
	}

	.sidenav-collapse{
		display: none !important;
	}

	.slideshow-container,
	.slideshow-mob-fade {
		height: 92vh;
	}

	.slideshow-mob-fade{
		display: block;
		position: absolute;
		width: 100%;
	}

	.slideshow-mob-fade img{
		height: 30vh;
		padding-top: 62vh;
		/*value is total a vh listed above*/
		opacity: 0.6;
		position: absolute;
		width: 100%;
		z-index: 4;
	}

	.story-img {
		margin-bottom: 8px;
		max-height: 100px;
	}

	.story-multi{
		display: none !important;
	}

	.story-multi-m{
		display: block;
	}

	.story-multi-m hr{
		background-color: #dadada;
		border: 0;
		display: block;
		float: left;
		height: 1.5px;
		margin: 0 8vw;
		width: 84vw;
	}

	.story-multi-item{
		padding: 5vh 8vw;
		width: 100vw;
	}

	.story-multi-item-titlemob{
		width: 180px;
	}

	.story-prevtext{
		display: none;
	}

	.story-topq-pullquote {
		font-size: 30px;
		line-height: 45px;
	}

	.story-topq-right{
		float: left;
	}
}
/* /RESPONSIVE ================================================================================================== */