html * {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}

*,
html {
	scroll-behavior: smooth;
}

*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	background-color: #f6f3ef;
	overflow-x: hidden;
}

/* Default logo for small screens */
.logo {
	background-image: url('https://sparobelyn.com/img/logo-small.webp');
	background-size: contain;
	width: 210px;
	height: 178px;
	background-repeat: no-repeat
}

/* Medium screens */
@media screen and (min-width: 768px) {
	.logo {
		background-image: url('https://sparobelyn.com/img/logo-medium.webp');
		width: 200px;
		height: 169px;
		background-repeat: no-repeat
	}
}

/* Large screens */
@media screen and (min-width: 1024px) {
	.logo {
		background-image: url('https://sparobelyn.com/img/logo-large.webp');
		width: 210px;
		height: 178px;
		background-repeat: no-repeat
	}
}





div.media {
	float: left;
	padding-bottom: 0;

	width: 85%;
}

video {
	height: auto !important;
	width: 100% !important;
	margin: 0 auto;
	display: block;
	margin: 0 auto;
	opacity: .8;
}


.overflow-x-hidden {
	overflow-x: hidden;
}

iframe {
	width: 100%;
}

.font-size-22 {
	font-size: 22px !important;
}

.text-blue {
	/* color:rgba(33,83,123,.8); */
	color: #000d5f !important;

}

h1 {
	font-family: 'Fahkwang', sans-serif;
}

ul.text-white a {
	color: #fff;
	text-decoration: none;
}

ul.text-dark a {
	color: #000;
	text-decoration: none;
}

li {
	font-size: 20px;
}

li.nav-item {
	font-size: 15px !important;
	font-family: 'Fahkwang', sans-serif !important;
	text-transform: uppercase;
}


li.nav-item a {
	color: #07397b;
	font-weight: 300;
	font-size: 19px;
	padding-left: 1em !important;
	padding-right: 1em !important;
	text-align: center;

}

.phone {
	font-size: 19px;
	font-weight: 300;
	line-height: 40px;
	padding: 11px;
}

.bi-telephone-fill {
	margin-right: -6px;
}

.book-btn {
	background-color: #07397b;
	border: none;
	color: white;
	text-transform: uppercase;
	font-family: 'Square Market', sans-serif;
	letter-spacing: 1px;
	line-height: 48px;
	padding: 0 28px;
	border-radius: 8px;
	font-weight: 500;
	font-size: 14px;
	cursor: pointer;
	display: inline-block;
	text-decoration: none;
	justify-content: center;
	align-items: center;
	display: inline-block;
}

.book-btn:hover {
	color: #b0bcb6;
}

.btn-outline-red {
	border-color: #1f487c;
	border-radius: 0;
}

.btn-dark {
	color: #fff;
	background-color: #07397b;
	border-color: #d7e3bd;
	padding: 1em 2em;
}

.btn-dark:hover {
	color: #1f487c;
	background-color: #d7e3bd;
	border-color: #d7e3bd;
}

img {
	max-width: 100%;
}

h2 a {
	text-decoration: none;
}

h2 a:hover,
ul.text-white li a:hover {
	color: #d7e3bd !important;
}

h4 {
	font-size: 22px;
}

h6 {
	font-weight: 400;
	font-size: 13px;
	color: #07397b;
}

.contact {
	background: #fff;
	padding: 6px;
	width: 50%;
	margin: 0 auto;
}

.pic-border {
	float: none;
	width: 89px;
	border: 3px solid rgb(2, 160, 161);
	border-bottom-left-radius: 50px;
	overflow: hidden;
	border-top-left-radius: 50px;
	border-bottom-right-radius: 50px;
	margin-top: 0px !important;
	margin-bottom: 0px !important;
}

.flex-item {
	justify-content: space-evenly;

}

.treatment-list {
	list-style-type: circle;
	font-size: 1.5em;
}


.navbar {
	border-bottom: solid 10px #b0bcb6;
	z-index: 10;
}

.navbar-brand img {

	width: 100%;
	max-width: 210px;
	height: auto;

}

.bg-gray {
	/* background:rgba(33,83,123,.8);  */
	background: #b0bcb6;
	padding: 15px 20px;

}

.bg-green {
	background: #07397b;
	color: #fff;
}


/* verticle scroll */
header.masthead {
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: 50% 50%;
	background-size: cover;
}


.cd-img-replace {
	display: inline-block;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}

.cd-section a {
	text-decoration: none;
}

.cd-section {
	min-height: 100%;
	position: relative;
}

.cd-section h3 {
	font-size: 1em;
}

#section2.cd-section h1,
#section3.cd-section h1,
#section4.cd-section h1 {

	text-align: center;
	font-family: 'Fahkwang', sans-serif;
	color: rgba(33, 83, 123, .8);
	padding: 15px 20px;
	font-size: 2.3em;
	line-height: 1em;
	font-weight: 200;
	width: fit-content;
	margin: 0 auto;
	text-transform: uppercase;
	color: #000d5f;
}

#sectionCommon.cd-section h1,
#section1.cd-section h1 {
	font-family: 'Fahkwang', sans-serif;
	color: #07397b;
	text-transform: uppercase;
	opacity: .2;

}

.text-blue {
	color: #07397b !important;
}

a.text-blue:hover {
	color: #0f4792 !important;
}

.text-opacity {
	opacity: .3;
}

.cd-section h1 {
	font-size: 4vw;
	color: #07397b;

}

.cd-section h2,
h2 {
	font-family: 'Fahkwang', sans-serif;
	color: #07397b;
	font-weight: 200;

}

.cd-section p {

	font-size: 1.25rem;
	font-weight: 300;

}

.cd-section p.small {
	font-size: 1.5em;
	text-align: left;
}

.cd-section p.body-txt {
	color: #000;
	font-size: 24px;
	font-weight: 300;

}

.cd-section p.text-white {
	color: #fff;
	font-size: 24px;
	font-weight: 300;

}

#section1 {
	height: auto;
	background-color: #daddd8;

}

#sectionCommon {
	height: 100vh;
	background-color: #d7e0e9;
	padding: 0;
}

#section2,
#section3,
#section4 {
	min-height: auto;
}

#sectionCommon,
#section1 {
	padding: 0;
}

#section2 {
	background-color: #f6f3ef;
	/* Used if the image is unavailable */
}

#section3 {
	background-color: #f6f3ef;
	/* Used if the image is unavailable */
}

#section4 {
	background-color: #f6f3ef;
	/* Used if the image is unavailable */
}




.cd-nav-trigger {
	display: none;
}

.no-touch #cd-vertical-nav {
	position: fixed;
	right: 40px;
	top: 50%;
	bottom: auto;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: 888;
}

.no-touch #cd-vertical-nav li {
	text-align: right;
}

.no-touch #cd-vertical-nav a {
	display: inline-block;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.no-touch #cd-vertical-nav a:after {
	content: "";
	display: table;
	clear: both;
}

.no-touch #cd-vertical-nav a span {
	display: inline-block;
	float: right;
	-webkit-transform: scale(.6);
	-moz-transform: scale(.6);
	-ms-transform: scale(.6);
	-o-transform: scale(.6);
	transform: scale(.6);
}

.no-touch #cd-vertical-nav a:hover span {
	/*	-webkit-transform:scale(.8);
	-moz-transform:scale(.8);
	-ms-transform:scale(.8);
	-o-transform:scale(.8);
	transform:scale(.8); */
	font-size: 1.5em;

}

.no-touch #cd-vertical-nav a:hover .cd-label {
	opacity: 1;
	line-height: 8px;

}

a:hover .cd-label.first {

	color: #21577b !important;

}


/* a .cd-label.first { color:#fff!important;} */


.no-touch #cd-vertical-nav a.is-selected .cd-label {
	opacity: 1;
	font-size: 1.5em;
	line-height: 2px;
}


.no-touch #cd-vertical-nav a.is-selected .cd-dot {
	background-color: #b0bcb6;
	position: relative;
	top: 8px;
	height: 18px;
	width: 18px;
	border-radius: 50%;
}

.no-touch #cd-vertical-nav .cd-dot {
	position: relative;
	top: 8px;
	height: 18px;
	width: 18px;
	border-radius: 50%;
	background-color: #f4f4f4;
	-webkit-transition: -webkit-transform .2s, background-color .5s;
	-moz-transition: -moz-transform .2s, background-color .5s;
	transition: transform .2s, background-color .5s;
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	border: 1px solid #000;
}

.no-touch #cd-vertical-nav .cd-label {
	position: relative;
	margin-right: 10px;
	padding: .4em .5em;
	color: #21577b;
	font-size: 24px;
	font-size: .875rem;
	-webkit-transition: -webkit-transform .2s, opacity .2s;
	-moz-transition: -moz-transform .2s, opacity .2s;
	transition: transform .2s, opacity .2s;
	opacity: 0;
	-webkit-transform-origin: 100% 50%;
	-moz-transform-origin: 100% 50%;
	-ms-transform-origin: 100% 50%;
	-o-transform-origin: 100% 50%;
	transform-origin: 100% 50%
}

/* side nav bar mobile */
.touch .cd-nav-trigger {
	display: block;
	position: fixed;
	bottom: 30px;
	right: 5px;
	height: 44px;
	width: 44px;
	border-radius: .25em;
	background: rgba(255, 255, 255, .9);
	padding: 1em;
	z-index: 2;
}

.touch .cd-nav-trigger span {
	background-color: #3e3947;
	border-radius: 50%;
	bottom: auto;
	right: auto;
	height: 4px;
	left: 50%;
	top: 50%;
	position: absolute;
	width: 4px;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.touch .cd-nav-trigger span::before,
.touch .cd-nav-trigger span::after {
	background-color: inherit;
	border-radius: inherit;
	content: '';
	height: 100%;
	left: 0;
	position: absolute;
	width: 100%;
}

.touch .cd-nav-trigger span::before {
	top: -9px;
}

.touch .cd-nav-trigger span::after {
	bottom: -9px;
}

.touch #cd-vertical-nav {
	bottom: 30px;
	max-height: 90%;
	max-width: 400px;
	position: fixed;
	right: 5%;
	width: 90%;
	z-index: 1;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	-webkit-transform-origin: right bottom;
	-moz-transform-origin: right bottom;
	-ms-transform-origin: right bottom;
	-o-transform-origin: right bottom;
	transform-origin: right bottom;
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);
	-webkit-transition-property: -webkit-transform;
	-moz-transition-property: -moz-transform;
	transition-property: transform;
	-webkit-transition-duration: .2s;
	-moz-transition-duration: .2s;
	transition-duration: .2s;
	border-radius: .25em;
	background-color: rgba(255, 255, 255, .9);
}

.touch #cd-vertical-nav a {
	display: block;
	padding: 1em;
	border-bottom: 1px solid rgba(62, 57, 71, .1);
}

.touch #cd-vertical-nav a span:first-child {
	display: none;
}

.touch #cd-vertical-nav a.is-selected span:last-child {
	color: #d88683;
}

.touch #cd-vertical-nav.open {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	z-index: 77;
}

.touch #cd-vertical-nav.open+.cd-nav-trigger {
	background-color: transparent;
}


nav#cd-vertical-nav.open a {
	color: #000;
	text-decoration: none;
}

.touch #cd-vertical-nav.open+.cd-nav-trigger span {
	background-color: transparent;
}

.touch #cd-vertical-nav.open+.cd-nav-trigger span::before,
.touch #cd-vertical-nav.open+.cd-nav-trigger span::after {
	background-color: #3e3947;
	height: 3px;
	width: 20px;
	border-radius: 0;
	left: -8px;
}

.touch #cd-vertical-nav.open+.cd-nav-trigger span::before {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 1px;
}

.touch #cd-vertical-nav.open+.cd-nav-trigger span::after {
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	-o-transform: rotate(135deg);
	transform: rotate(135deg);
	bottom: 0;
}

.touch #cd-vertical-nav li:last-child a {
	border-bottom: none;
}


footer {
	padding-top: .6em;
	padding-bottom: .6em;
	position: relative;
}

.fb svg,
.twit svg,
.linked svg {
	height: 26px;
	width: 26px;
}

#btn-back-to-top {
	position: fixed;
	bottom: 20px;
	left: 20px;
	display: none;
	z-index: 999999;
	background: #b0bcb6;
	border-radius: 50px;
}


.btn-floating.btn-lg {
	width: 52px;
	height: 52px;
}



/*    ****************************** start testimonials *************************** */



.testim {
	width: 100%;

}

.testim .wrap {
	position: relative;
	width: 100%;
	max-width: 1020px;
	padding: 40px 20px;
	margin: auto;
	z-index: 0;
	background: #b0bcb6;
}

.testim .arrow {
	display: block;
	position: absolute;
	color: #eee;
	cursor: pointer;
	font-size: 2em;
	top: 50%;
	transform: translateY(-50%);
	transition: all .3s ease-in-out;
	padding: 5px;
	z-index: 22222222;
}

.testim .arrow:before {
	cursor: pointer;
}

.testim .arrow.left {
	left: 10px;
}

.testim .arrow.right {
	right: 10px;
}

.testim .arrow:hover {
	color: #ea830e;
}

.testim .dots {
	text-align: center;
	position: absolute;
	width: 100%;
	bottom: 60px;
	left: 0;
	display: block;
	z-index: 1;
	height: 12px;
}

.testim .dots .dot {
	list-style-type: none;
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 1px solid #eee;
	margin: 0 7px;
	cursor: pointer;
	transition: all .5s ease-in-out;
	position: relative;
}

.testim .dots .dot.active,
.testim .dots .dot:hover {
	background: #d7e3bd;
	border-color: #d7e3bd;
}

.testim .dots .dot.active {
	animation: testim-scale .5s ease-in-out forwards;
}

.testim .cont {
	position: relative;
	overflow: hidden;
}

.testim .cont>div {
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	padding: 0 0 70px 0;
	opacity: 0;
}

.testim .cont>div.inactive {
	opacity: 1;
}

.testim .cont>div.active {

	position: relative;
	opacity: 1;

}

.testim .cont div .img img {
	display: block;
	width: 100px;
	height: 100px;
	margin: auto;
	border-radius: 50%;
}

.testim .cont div h2 {
	color: #fff;
	font-size: 1em;
	margin: 15px 0;
	font-weight: 700;
}

.testim .cont div p {
	font-size: 1.15em;
	color: #07397b;
	width: 80%;
	margin: auto;
	font-weight: 400;
}

.testim .cont div.active .img img {
	animation: testim-show .5s ease-in-out forwards;
}

.testim .cont div.active h2 {
	animation: testim-content-in .4s ease-in-out forwards;
}

.testim .cont div.active p {
	animation: testim-content-in .5s ease-in-out forwards;
}

.testim .cont div.inactive .img img {
	animation: testim-hide .5s ease-in-out forwards;
}

.testim .cont div.inactive h2 {
	animation: testim-content-out .4s ease-in-out forwards;
}

.testim .cont div.inactive p {
	animation: testim-content-out .5s ease-in-out forwards;
}



@keyframes testim-scale {
	0% {
		box-shadow: 0px 0px 0px 0px #eee;
	}

	35% {
		box-shadow: 0px 0px 10px 5px #eee;
	}

	70% {
		box-shadow: 0px 0px 10px 5px #ea830e;
	}

	100% {
		box-shadow: 0px 0px 0px 0px #ea830e;
	}
}

@keyframes testim-content-in {
	from {
		opacity: 0;
		transform: translateY(100%);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes testim-content-out {
	from {
		opacity: 1;
		transform: translateY(0);
	}

	to {
		opacity: 0;
		transform: translateY(-100%);
	}
}

@keyframes testim-show {
	from {
		opacity: 0;
		transform: scale(0);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes testim-hide {
	from {
		opacity: 1;
		transform: scale(1);
	}

	to {
		opacity: 0;
		transform: scale(0);
	}
}

/* coding with nick */

/* Responsive */

@media all and (max-width: 300px) {
	body {
		font-size: 14px;
	}
}

@media all and (max-width: 500px) {
	.testim .arrow {
		font-size: 1.5rem;
	}

	.testim .cont div p {
		line-height: 25px;
	}
}

.bg-cream {
	background-color: #f6f3ef;

}





#sectionz .image {
	background-image: url("../img/slide5.webp");
}

#sectiony .image {
	background-image: url("../img/slide4.webp");
}

#sectionx .image {
	background-image: url("../img/slide3.webp");
}

#sectionz,
#sectiony,
#sectionx {
	padding: 0;
	height: 100vh;
}



.containerz,
.containery,
.containerx {
	display: flex;
	align-content: center;
	align-items: center;
	flex-direction: column;
	flex-wrap: nowrap;
	height: 100%;
	justify-content: space-around;
	position: relative;
	width: 100%;
}

.containerz section,
.containery section,
.containerx section {
	flex: 1;
	display: flex;
}

.containerz section .image,
.containery section .image,
.containerx section .image {
	background-attachment: fixed;
	background-size: cover;
	width: 100vw;
	height: 100vh;
	background-color: #b0bcb6;
	position: absolute;
	z-index: 500;
	opacity: 0.4;
	background-repeat: no-repeat;
	background-position: center;
}


.containerz section .stuff,
.containery section .stuff,
.containerx section .stuff {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	height: 100%;
	width: 100%;
	max-width: 70%;
	justify-content: center;
	text-align: center;
	z-index: 1000;
	color: #21577b;
	margin: 0 auto;
	font-size: 26px;

}



.containerz section .stuff:before,
.containerz section .stuff:after,
.containery section .stuff:before,
.containery section .stuff:after,
.containerx section .stuff:before,
.containerx section .stuff:after {
	width: 50%;
	height: 1px;
	display: block;
	background-color: rgba(0, 0, 0, .2);
	content: "";
	margin: 30px auto;
}


/* *************** paralax scroll * ********* */
.containerp {
	display: flex;
	align-content: center;
	align-items: center;
	flex-direction: column;
	flex-wrap: nowrap;
	height: 100%;
	justify-content: space-around;
	position: relative;
	width: 100%;
}

.containerp section {
	flex: 1;
	display: flex;
	padding: 0;
	z-index: 1;

}


#sectionCommon.containerp section:nth-child(1) .image {
	background-repeat: no-repeat;

}

#section1.containerp section:nth-child(1) .image {
	background-image: url(https://sparobelyn.com/img/slide1.jpg);
	background-repeat: no-repeat;
}

#sectionCommon.containerp section .image,
.containerp section .image {
	background-attachment: fixed;
	background-size: cover;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 500;
	opacity: 0.4;
	background-position: center;
}

.containerp section .stuff {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	height: 100%;
	width: 100%;
	max-width: 70%;
	justify-content: center;
	text-align: center;
	z-index: 1000;
	margin: 0 auto;
	font-size: 26px;
	position: relative;
}

.containerp section .stuff h2 {
	margin: 0px;
}

.containerp section .stuff:before,
.containerp section .stuff:after {
	width: 50%;
	height: 1px;
	display: block;
	background-color: rgba(0, 0, 0, .5);
	opacity: .5;
	content: "";
	margin: 30px auto;
}


.line-blue {
	min-height: 10px;
	background: #b0bcb6;
}


#services .book-btn {
	position: fixed;
	right: 20px;
}



/* ------------------------------------------------------------------ @ media ------------------------------------------------------------------------ */









@media only screen and (max-width:1195px) {
	li.nav-item a {
		font-size: 16px;
		text-align: center;
	}

	#section1 {
		height: auto;
	}

	#sectionCommon {
		height: 100vh;
	}

	#section2,
	#section3,
	#section4,
	#section5 {
		height: auto;
	}

}


@media (max-width:991px) {
	.cd-section h1 {
		font-size: 8vw;
	}

	.no-touch #cd-vertical-nav {
		display: none;
	}

	#sectionCommon,
	#section1 {
		height: auto;
	}

	.cd-section-intro {
		background-position: 50%;
		background-size: cover;
	}

	#section1.cd-section h1,
	#section2.cd-section h1,
	#section3.cd-section h1,
	#section4.cd-section h1 {}

	.top-contact,
	.top-contact a {
		width: 100%;
		text-align: center;

	}

	body#services .top-contact a {
		width: auto !important;
		text-align: center;

	}
	div.media {
		float: left;
		padding-bottom: 0;
		width:100%;
	}


}

@media only screen and (min-width:768px) {




	.touch .cd-nav-trigger,
	.touch #cd-vertical-nav {
		bottom: 40px;

	}

	header.masthead {
		background-size: contain;
	}

}



@media only screen and (max-width:767px) {


	div.media {
		float: left;
		padding-bottom: 0;
		width: 100%;
	}


	.containerz section .image,
	.containery section .image,
	.containerx section .image {
		background-attachment: relativinitiale;
		background-size: contain;
		width: 100%;
		height: 40vh;
		position: absolute;
		z-index: 500;
		opacity: 0.4;
		background-repeat: no-repeat;
		background-position: center;
	}

	#sectionz,
	#sectiony,
	#sectionx {
		padding: 0;
		height: 40vh;
	}

	.contact {
		width: 100%;
	}



}


@media (max-width:575px) {
	.cd-section p {
		font-size: 24px;
	}

	.cd-section p.body-txt {
		font-size: 1.2rem;
	}

	.treatment-list {
		font-size: 1.2em;
	}

	#section2.cd-section img,
	#section3.cd-section img,
	#section4.cd-section img,
	#section5.cd-section img {}

	div.media {
		float: left;
		padding-bottom: 0;
		margin: 0 auto;
		background: #b0bcb6;
		width: 100%;
	}

	.containerz section .image, .containery section .image, .containerx section .image {
		background-attachment: inherit;
		background-size: cover;
		width: 100%;
		height: 40vh;
		position: absolute;
		background-position: center;
		z-index: 500;
		opacity: 0.4;
		background-repeat: no-repeat;
		/* background-position: bottom; */
	}



}


@supports(-webkit-touch-callout: none) {

	#section1,
	#section2,
	#section3,
	#section4,
	#section5 {
		/* CSS specific to iOS devices */
		background-attachment: inherit;
	}

}