	@import url(//fonts.googleapis.com/css?family=Alegreya+Sans:300,300italic);
	@import url(//fonts.googleapis.com/css2?family=Great+Vibes&display=swap);
	
	:root {
	--bulma-body-font-size:16px;
	}
	.row-gray { background-color:#edf8f0; border-top:1px solid #D6EFDE; border-bottom:1px solid #D6EFDE; }
	.quote-box-container { position:relative; z-index:10;  }
		.quote-box { width:300px; height:300px; padding:30px; margin:3vh auto;  display:flex; flex-direction:column; justify-content:center; background-color:#3A6265; color:#ffffff; text-align:center; text-transform:uppercase; overflow:hidden; }
		.quote-box::after { width:350px; height:300px; z-index:1; left:0; position:absolute; content:''; background-image:url('/images/lotus-flower.png'); background-size:cover; background-position:center center; opacity:0.1; }

	.has-col-3 { column-count: 3; }
	.has-col-2  { column-count: 2; }
	
	.has-col-count-2, 
	.has-col-count-3, 
	.has-col-count-4, 
	.has-col-count-5 { column-count: 2; }
	
	.cell.is-vcentered { display:flex; flex-direction:column; justify-content:center; }
	
	.hero.is-primary { background-color:#3A6265; background-image:url('/images/cranial-sacral-massage-session.jpg'); background-size:cover; background-position:center center; position:relative; }
		.hero.is-primary h1 { font-size: clamp(4.8rem, -0.875rem + 8.333vw, 5.6rem); color:#ffffff; font-weight:400; text-transform:uppercase; }
		.hero.is-primary .subtitle { color:#ffffff; font-size: clamp(1.8rem, -0.875rem + 8.333vw, 2.8rem); }
	.hero.is-primary::before { position:absolute; display:block; content:''; width:100%; height:100%; top:0; left:0; right:0; bottom:0; opacity:0.2; z-index:1; background-color:#000000; }
	.hero.is-primary .hero-body { position:relative; z-index:2; }
	.hero.is-primary::after,
		#buy-now::after { width:700px; height:500px; z-index:1; left:-8%; bottom:-150px; position:absolute; content:''; background-image:url('/images/lotus-white.png'); background-size:cover; background-position:center center; opacity:0.1; }

	.navbar-burger { color:#ffffff; }
	
	#buy-now { background-color:#000000; background-image:url('/images/massage-session.jpg'); background-size:cover; background-position:center center; position:relative; }
		#buy-now::before { position:absolute; display:block; content:''; width:100%; height:100%; top:0; left:0; right:0; bottom:0; opacity:0.4; z-index:1; background-color:#000000; }
		#buy-now .hero-body { position:relative; z-index:2; }
		#buy-now .button, .button.is-link { background-color:#40a560; color:#ffffff; }
			#buy-now .button:hover, .button.is-link:hover { background-color:#3A6265; color:#ffffff; }
	.brand-container { padding:20px; }
	
	a:link { color:#40a560; }
	a:visited { color:#000000; }
	a:hover { color:#3A6265; }
	a:active, a:focus { color:#3A6265; }
	
	.hero-head a.navbar-item.is-active { background-color:#ffffff; color:#000000; }
		.hero-head a.navbar-item.is-active:hover { color:#ffffff; }
	.hero-head a.navbar-item { color:#ffffff; }
	.hero-head a.navbar-item:hover { background-color:#3A6265; }
	
	footer a.navbar-item:hover { color:#000000; }
	
	.img-container { padding:15px; }
	.decoration { opacity:0.7; }
	.decoration-white {  filter: saturate(0) brightness(0) invert(1); }
	.note { font-style:italic; color:#3A6265; }	
	
	/*style*/
	body { font-family: 'Alegreya Sans', sans-serif; font-weight:300; }
	h1, h2, h3, h4, h5, h6,
	.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 { color:#3A6265; font-weight:400; text-transform:uppercase; text-align:center; }
	
	.quote-box, .quote-box h3 {  font-family: "Great Vibes", cursive; color:#ffffff!important; font-style:normal; font-weight:400; text-transform:none; font-size:2.4rem; }
	
	h1, .content h1,
		#buy-now .title.title-combo {  font-size: clamp(2.8rem, -0.875rem + 8.333vw, 3.6rem); }
	h2, .content h2 {  font-size: clamp(1.4rem, -0.875rem + 8.333vw, 1.8rem); }
	h3, .content h3 {  font-size: clamp(1.2rem, -0.875rem + 8.333vw, 1.4rem); }
	h4, .content h4, 
	h5, .content h5 {  font-size: clamp(1rem, -0.875rem + 8.333vw, 1.8rem); }
	h6, .content h6 {  font-size: clamp(1rem, -0.875rem + 8.333vw, 1.2rem); }
	
	.button-container { padding:20px; }
		.button { text-transform:uppercase; }
	
	.great-vibes-regular, .subtitle { font-size: clamp(1.4rem, -0.875rem + 8.333vw, 1.8rem); font-family: "Great Vibes", cursive!important; font-weight: 400; font-style: normal; text-align:center; color:#40a560; }

	.main .title, .content .title { font-weight:400; }
	.subtitle + .title, .subtitle + .content p.title { margin-bottom:0; }
	.title.title-combo, .content h2.title.title-combo { margin-top:0; }
	.nowrap { white-space:no-wrap; }
	
	#hours td { padding:0; margin:0; }
		#hours {width:100%; }

	.sidr ul li.nav_logo { padding:15px 15px 0 15px; }
	
	.vagaro a {font-size:14px; color:#AAA; text-decoration:none;}
	
	.main .button.is-primary { background-color:#40a560; color:#ffffff; }
		.main .button.is-primary:hover { background-color:#3A6265; color:#ffffff; }
		
		#types-of-cards .icon-text { padding:20px 0; border-bottom:1px solid #edf8f0; }
		#types-of-cards .icon-text .fa-spa { color:#40a560; }
	.button-container { text-align:center; }
		.button-container a.button { margin:0 auto; }

@media (max-width:767px) {
	
	.hero.is-primary h1 { font-size: clamp(2.8rem, -0.875rem + 8.333vw, 3.6rem); }
	.header .is-5 { padding:20px; }
		.brand-container { padding:0; }
		
	.fixed-grid > .grid { grid-template-columns:auto; }

	.footer .level-item { width:100%; }
	.footer .level-item .navbar { width:100%; text-align:center; }

	.quote-box-container { top:-75px; }
	
	.sider .button-container { padding:15px;  }
		.sider .button.is-primary { padding:12px 8px;  }
		
		
	#types-of-cards .columns { display:flex; flex-direction:column-reversed; }
	
	
	/*cards */
	.cell.is-col-span-3 { --bulma-grid-cell-column-span: 1!important; }
}

@media (min-width:1024px) {

	.quote-box-container { left:-75px; text-align:center; }
	
	.has-col-count-2 { column-count: 2; }
	.has-col-count-3 { column-count: 3; }
	.has-col-count-4 { column-count: 4; }
	
	
}

@media (min-width:1216px) {
	.icon-text, .icon-text-desc { text-transform:uppercase; font-size:1.6rem; white-space:nowrap; }

}	