/* styles by Green Labo Bangkok 2023 */
html {
  scroll-behavior: smooth;
}
body {
	background: #fff;
	font-family: 'Open Sans', sans-serif;
	font-size: 22px;
	line-height: 1.6;
	color: #222;
}

.setclear {clear: both; float: none;}
.font-serif {font-family: 'Libre Baskerville', serif;}
h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	margin-bottom: 20px;
}
.sec-heading {
	margin-bottom: 100px;
	font-size: 40px;
	font-family: 'Libre Baskerville', serif;
	text-align: center;
	text-transform: capitalize;
	color: #001A4B;
}
.hdgp-left img, .hdgp-right img {height: 32px; width: auto;}
.hdgp-left {padding-right: 30px;}
.hdgp-right {margin-left: 30px;}

.sectionbox {padding: 40px 0;}
.subsectionbox {margin-bottom: 40px;}
ul {list-style-type: square;}
.no-lists {list-style-type: none; padding-left: 0;}
.nospcbttm {padding-bottom: 0!important; margin-bottom: 0!important;}
.getshadow {box-shadow: 0 0 5px #222;}
.getcorner {border-radius: 5px;}
.txtshadow {text-shadow: 0 0 3px #000;}
.br-1024, .br-ipxl, .br-768, .br-736, .br-667, .br-568, .br-414, .br-375, .br-360, .br-320 {display: none;}
.view-pc, .view-mb, .hidely {display: none;}

.textnavy {color: #001A4B;}
.bgnavy {background-color: #001A4B;}

.separetor {height: 1px; border-bottom: 1px solid #ddd;}

.button-booking {text-align: center; margin-bottom: 0;}

/* strat preloader */
#preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	overflow: hidden;
	background: #ffffff;
}

#preloader:before {
	content: "";
	position: fixed;
	top: calc(50% - 0px);
	left: calc(50% - 30px);
	border: 6px solid #ffffff;
	border-top-color: var(--bs-dark);
	border-bottom-color: var(--bs-dark);
	border-radius: 50%;
	width: 60px;
	height: 60px;
	-webkit-animation: animate-preloader 1s linear infinite;
	animation: animate-preloader 1s linear infinite;
}

@keyframes animate-preloader {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
/* end preloader */

/* header & top navigation */
header {
	background-color: #001A4B;
	line-height: 1;
	padding: 18px 0;
	color: #fff;
}
#hdrTxtOpenedTimes {font-size: 17px; margin-top: 5px; margin-bottom: 10px;}
#hdrTxtCall {font-size: 35px; font-weight: 700;}
#hdrLeft img {height: 64px; width: auto;}
#hdrRight {padding-right: 60px; position: relative;}
#topphoneimg {position: absolute; right: 0; top: 0;}
#topphoneimg img {height: 64px; width: auto;}

/* hero & slide section */
#herosec {background: #C98FB5;}
.carousel-indicators {margin-bottom: 0;}
#bellePHLPslides a img {opacity: 1;}

/* promotions */
#specialPromo {background: #72D0D9;}

/* events */
#events {padding: 0; text-align: center;}
#events img {width: 100%; height: auto;}
#eventContBox {
	width: 70%;
	margin: 0 auto;
	padding: 100px 140px;
	color: #fff;
	background: transparent url('img/bg-event.png') repeat center center;
	font-weight: 300;
}
#eventContBox h4 {font-size: 35px; font-weight: 300; margin-bottom: 72px;}
#eventContBox h3 {font-size: 90px; font-weight: 700; margin-bottom: 120px;}
#eventContBox ul {text-align: left;}
#eventContBox dl {font-size: 25px;}
#eventContBox dt {width: 30%; float: left; font-weight: 300;}
#eventContBox dd {width: 70%; float: left;}
.evt-row {clear: both; float: none;}
.evnt-date, .evnt-name, .evnt-time {text-align: left;}
.evnt-name, .evnt-time {float: left;}
.evnt-date {margin-top: 40px;}
.evnt-name {width: 70%;}
.evnt-time {width: 29%;}

.accordion-header a{text-decoration: none;}

/* intro */
#intro {
	padding-top: 150px;
	padding-bottom: 150px;
	font-size: 20px;
	font-weight: 300;
	line-height: 40px;
	letter-spacing: 1.6px;
	color: #001C4D;
	background: #f9f9f9 url('img/bg-intro.jpg') no-repeat center center;
	background-size: cover;
}
#intro h3 {
	font-size: 30px;
	font-weight: normal;
	letter-spacing: 1.5px;
	font-family: 'Libre Baskerville', serif;
	margin-bottom: 50px;
}
#intro .separetor {margin: 75px 0;}

/* our services */
#ourServices {
	padding-bottom: 100px;
	font-size: 22px;
	color: #001C4D;
}
#ourServices h3 {
	font-size: 35px;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 30px;
}
.svc-left {
	padding-top: 75px;
	padding-bottom: 75px;
	padding-right: 75px;
	border-right: 1px solid #eee;
}
.svc-right {
	padding-top: 75px;
	padding-bottom: 75px;
	padding-left: 75px;
}
.svc-icons {margin-top: 20%; margin-bottom: 40px;}
.svc-icons img {max-width: 98px;}

/* cast study */
#caseStudy {
	padding-top: 100px;
	padding-bottom: 100px;
}
#caseStudy h2.sec-heading {margin-bottom: 182px;}
.csdy-box {
	padding: 85px 55px 55px;
	background: #EAF2F5;
	text-align: center;
	margin-bottom: 100px;
	position: relative;
}
.csdhd {
	height: 55px;
	line-height: 55px;
	position: relative;
	margin-top: -125px;
	margin-bottom: 30px;
}
.csdhdlft {
	width: 0;
	height: 0;
	border-bottom: 60px solid #001A4B;
	border-left: 30px solid transparent;
	position: absolute;
	left: -3px;
	top: 0;
}
.csdhdrgt {
	width: 0;
	height: 0;
	border-top: 60px solid #001A4B;
	border-right: 30px solid transparent;
	position: absolute;
	right: -3px;
	top: 0;
}
.csdhdmn {
	background: #001A4B;
	color: #fff;
	font-size: 22px;
	font-weight: bold;
	text-align: center;
	padding: 15px 30px;
}

/* video section */
#movieBox {
	padding-top: 100px;
	padding-bottom: 200px;
}
#mbwrapper {position: relative;}
#mbvhdtxt {
	text-align: center;
	font-size: 32px;
	font-weight: 300;
	font-family: 'Libre Baskerville', serif;
	color: #001C4D;
}
#mbvbddr {
	border: 7px solid #001C4D;
	width: 80%;
	min-height: 640px;
	margin: 0 auto;
}
#mbvid {
	position: absolute;
	left: 0;
	top: 13%;
	z-index: 2;
	width: 100%;
	height: 100%;
}
#mvhdbx h3 {
	font-size: 90px;
	font-weight: 700;
	color: #001C4D;
}
#mvhdbx h3 span {
	font-size: 24px;
	font-weight: 300;
	display: block;
}

/* why Belle */
#whyBelle {padding-top: 200px;}
#whyBelle h2 img {
	height: 44px;
	margin-left: 20px;
	margin-right: 20px;
	vertical-align: baseline;
}
.whybllrow {
	padding-top: 54px;
	padding-bottom: 54px;
	position: relative;
}
.wbpnt {
	text-align: center;
	margin-bottom: 30px;
}
.wbpnt img {
	height: 40px;
	width: auto;
}
.whyb-box {
	padding: 30px 60px 30px;
	background: #fff;
	box-shadow: 10px 10px 0 #001C4D;
	font-size: 14px;
	line-height: 27px;
	color: #001C4D;
}
.whyb-box h3 {
	font-size: 20px;
	font-weight: 700;
	padding-bottom: 5px;
	border-bottom: 2px solid #001C4D;
	margin-bottom: 30px;
}

/* flows */
.flow-row {
	padding-top: 50px;
	padding-bottom: 50px;
}
.bflw-box {
	position: relative;
	padding-left: 160px;
}
.bflw-box  h3 {
	font-size: 35px;
	font-weight: 700;
	margin-top: 0;
	margin-bottom: 30px;
}
.bflwnum {
	min-height: 210px;
	padding-right: 40px;
	border-right: 4px solid #001F59;
	position: absolute;
	left: 0;
	width: 100px;
	top: 5%;
}
.bflwnum img {height: 120px; width: auto;}

/* store locations */
.accordion-button {
	font-size: 24px;
	font-weight: bold;
	background: #001E58 url('img/bg-shop-plus-icon.jpg') no-repeat right center;
	color: #fff;
}
.accordion-button:not(.collapsed) {background-color: #001E58;color: #fff;}
.accordion-item:first-of-type .accordion-button {border-top-left-radius: 0; border-top-right-radius: 0;}
.accordion-item:first-of-type, .accordion-item:last-of-type .accordion-button.collapsed, .accordion-item:last-of-type .accordion-collapse {border-radius: 0;}
.accordion-item {border: none; margin-bottom: 20px;}
.accordion-item:last-child {margin-bottom: 0px;}
.accordion-body {padding: 40px;}
.accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M8 0a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 0 1 0-2h6V1a1 1 0 0 1 1-1z' clip-rule='evenodd'/%3e%3c/svg%3e");
  transform: scale(.7) !important;
}
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z' clip-rule='evenodd'/%3e%3c/svg%3e");
}
.shop-infobx {padding: 80px 80px; font-size: 18px;}
.sifrow {border-bottom: 1px solid #707070;}
.sif-title, .sif-data {padding-top: 30px; padding-bottom: 30px;}
.sif-title {border-bottom: 5px solid #002265;}
.sif-title h4 {font-size: 20px; font-weight: bold; color: #001C4D; margin-bottom: 0;}
.gmapbox {padding-top: 80px; padding-bottom: 40px; height: 390px;}
.shpnmespc {display: inline-block; width: 7px;}

/* reservation form */
#belleForm {padding-top: 130px; padding-bottom: 0;}
#reservationForm {min-height: 2000px;}
#formBox {position: relative;}
#formTagRmvr {
	width: 100%;
	height: 150px;
	background: #fff;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 99999;
}

/* form styling */
#tnfrmwrapper input[type=text], #tnfrmwrapper input[type=tel], #tnfrmwrapper input[type=email], #tnfrmwrapper input[type=select], #tnfrmwrapper input[type=date], #tnfrmwrapper select, #tnfrmwrapper textarea {width: 100%; padding: 0 10px;}
#tnfrmwrapper textarea {max-height: 200px;}
#tnfrmwrapper input[type=submit] {
	background: transparent linear-gradient(180deg, #001B4C 0%, #0E388B 100%) 0% 0% no-repeat padding-box;
	border-radius: 20px;
	color: #fff;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	line-height: 64px;
	min-width: 265px;
}
.frmrow {clear: both; float: none; min-height: 50px; margin-bottom: 40px;}
.fldlable {display: inline-block; width: 25%; text-align: right; padding-right: 10px; vertical-align: top; font-size: 15px; font-weight: bold; color: #001C4D;}
.fldlable sup {color: red;}
.fldinput {display: inline-block; width: 74%; vertical-align: middle;}
.tnform {line-height: 50px; border: 1px solid #707070;}
#tnfrmwrapper select {padding: 10px;}
.text-area .fldinput {vertical-align: top;}


/* footer social media */
#footerSNS {
	text-align: center;
	padding-top: 75px;
	padding-bottom: 270px;
}
#footerSNS a {
	text-decoration: none;
	color: #001A4B;
}
#footerSNS a img.img-fluid {height: 32; width: auto; max-width: 32px;}
#footerSNS ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
#footerSNS ul li {
	display: inline;
	margin: 0 22px;
}

/* footer */
footer {padding: 42px 0; color: #fff; background-color: #001A4B; text-align: center;}
#copyright {font-size: 15px; margin: 0;}

/* back to TOP */
#back2top {
	position: fixed;
	right: 60px;
	bottom: 60px;
	z-index: 999;
}
#back2top a img {opacity: 1;}

/* side navigation */
#sideNav {
	position: fixed;
	right: 0;
	top: 20%;
	z-index: 9;
}
#sideNav ul {list-style-type: none; padding: 0;}
#sideNav a img {max-width: 44px; opacity: 1;}

@media screen and (min-width: 1440px) {
	.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {max-width: 1380px;}
	.accordion-body {padding: 82px 70px;}
	#bellePHLPslides {min-height: 300px;}
}

@media screen and (min-width: 641px) {
	.view-pc {display: block;}
	.sectionbox {padding: 140px 0;}
	#hdrRight {text-align: right;}
	.half-page {width: 80%; margin: 0 auto;}
	.svc-left  {text-align: right;}
	#mvhdbx h3 {margin-top: 90%;}
	.wbpnt {margin-top: -40px;}
	.whyb-box {position: absolute; top: 5%; z-index: 3; width: 50%;}
	.wyb-left {left: 5%;}
	.wyb-right {right: 5%;}
	#wbbx01 {margin-top: 5.5%;}
	#wbbx02 {margin-top: 6.5%;}
	#wbbx03 {margin-top: 6%;}
}

@media screen and (max-width: 1024px) {
	.container {overflow: hidden;}
	.half-page {width: 80%; margin: 0 auto;}
	.sectionbox {padding: 60px 0;}
	#intro .separetor {margin: 44px 0;}
	#hdrTxtOpenedTimes {font-size: 12px;}
	#hdrTxtCall {font-size: 27px;}
	#events {padding: 60px 0;}
	#events h2 {margin-bottom: 44px;}
	#eventContBox {width:80%; padding: 50px 70px;}
	#eventContBox h4 {font-size: 24px; margin-bottom: 30px;}
	#eventContBox h3 {font-size: 44px; margin-bottom: 60px;}
	#intro, #caseStudy {padding: 60px 0;}
	.sec-heading {font-size: 32px; margin-bottom: 40px;}
	#intro h3 {font-size: 20px; margin-bottom: 30px;}
	#intro p {line-height: 1.6;}
	.svc-left, .svc-right {padding-top: 35px; padding-bottom: 35px;}
	.svc-icons {margin-top: 5%;}
	#ourServices {padding-bottom: 60px;}
	#caseStudy h2.sec-heading {margin-bottom: 90px;}
	#ourServices h3 {margin-bottom: 20px;}
	#caseStudy {font-size: 16px;}
	.csdhdmn {font-size: 12px;}
	.csdy-box {margin-bottom: 50px;}
	.csdhdlft {border-bottom: 50px solid #001A4B; border-left: 10px solid transparent; top: 7px;}
	.csdhdrgt {border-top: 40px solid #001A4B; border-right: 10px solid transparent; top: 10px; right: -5px;}
	#movieBox {padding: 60px 0;}
	#mbvbddr {min-height: 440px;}
	#mbvhdtxt {font-size: 24px;}
	#mvhdbx h3 {font-size: 50px;}
	#mvhdbx h3 span {font-size: 12px;}
	#whyBelle {padding-top: 60px; padding-bottom: 0;}
	#whyBelle h2 img {height: 30px;}
	#whyBelle .sec-heading {margin-bottom: 20px;}
	.whyb-box {padding: 10px 20px; font-size: 12px; line-height: 1.6;}
	.whyb-box h3 {font-size: 16px; margin-bottom: 16px;}
	.wbpnt img {height: 30px;}
	#wbbx01 {margin-top: 6.5%;}
	#wbbx02 {margin-top: 8.5%;}
	#wbbx03 {margin-top: 7.5%;}
	#belleFlows .sec-heading {margin-bottom: 0;}
	.bflw-box {font-size: 14px;}
	.bflw-box h3 {font-size: 24px; margin-bottom: 16px;}
	.bflwnum {min-height: 160px;}
	.shop-infobx {padding: 40px;}
	#belleForm {padding-top: 60px;}
	#footerSNS {padding-top: 0; padding-bottom: 100px;}
	#formBox {min-height: 1200px;}
}

@media screen and (max-width: 768px) {
	.br-768 {display: block;}
	.button-booking img.img-fluid {max-width: 40%;}
	#hdrTxtCall {font-size: 24px;}
	#eventContBox h3 {margin-bottom: 30px;}
	.svc-left {padding-right: 30px;}
	.svc-right {padding-left: 30px;}
	#ourServices h3 {font-size: 24px;}
	.svc-icons {margin-top: 0; margin-bottom: 20px;}
	.svc-icons img {max-height: 64px;}
	#svcSec1, #svcSec2, #svcSec3 {font-size: 16px; line-height: 1.6;}
	.csdy-box {padding: 20px;}
	.csdhd {margin-top: -20px; margin-left: -20px; margin-right: -20px; margin-bottom: 20px; height: auto; line-height: 1;}
	.csdhdmn {font-size: 12px; padding: 10px; display: block;}
	.csdhdlft, .csdhdrgt {display: none;}
	#caseStudy h2.sec-heading {margin-bottom: 30px;}
	#mbvhdtxt {font-size: 20px;}
	#whyBelle h2 img {height: 20px;}
	#whyBelle h2 img#belleLogoOnHeading {height: 30px;}
	.whyb-box {font-size: 9px;}
	.whyb-box h3 {font-size: 14px; margin-bottom: 10px;}
	.wbpnt {margin-bottom: 10px;}
	#wbbx01 {margin-top: 8%;}
	#wbbx02 {margin-top: 7%;}
	#wbbx03 {margin-top: 9%;}
	.bflw-box h3 {font-size: 20px; margin-bottom: 10px;}
	.bflw-box {font-size: 12px; padding-left: 120px}
	.bflwnum {padding-right: 20px;}
	#footerSNS {font-size: 18px;}
}

@media screen and (max-width: 640px){
	.view-mb {display: block;}
	.container {overflow: hidden;}
	#blsrvpictmb {margin-bottom: 35px;}
	.button-booking img.img-fluid {max-width: 80%;}
	#eventContBox {font-size: 14px;}
	#eventContBox {padding-left: 30px; padding-right: 30px;}
	#svcSec1, #svcSec2, #svcSec3, #wbbx01, #wbbx02, #wbbx03, .bflw-box, #accdbox, #formBox, #footerSNS {width: 80%; margin: 0 auto;}
	.row>* {padding-left: 0; padding-right: 0;}
	.svc-left, .svc-right {padding: 30px 0 0;}
}

@media screen and (max-width: 414px) {
	.br-414 {display: block;}
	#hdrLeft {display: none;}
	#hdrLeft img {height: 44px; margin-bottom: 16px;}
	#hdrTxtOpenedTimes, #hdrTxtCall {text-align: left;}
	#hdrTxtOpenedTimes {margin-bottom: 5px;}
	#hdrRight {padding-left: 30%; padding-right: 0;}
	#topphoneimg {left: 18%;}
	#topphoneimg img {height: 44px;}
	.sectionbox, #intro, #caseStudy, #movieBox {padding: 30px 0;}
	#events, #events .container {padding: 0;}
	#events h2 {margin-bottom: 20px;}
	#eventContBox {padding:20px 40px; width: 100%;}
	.evnt-name {width: 60%;}
	.evnt-time {width: 39%;}
	#eventContBox h4 {margin-bottom: 16px;}
	#eventContBox dt, #eventContBox dd {width: 100%;}
	#eventContBox dt {text-align: center; font-weight: 700;}
	#eventContBox ul {font-size: 20px;}
	.hdgp-left img, .hdgp-right img {height: 16px;}
	.sec-heading {font-size: 20px; margin-bottom: 30px;}
	.hdgp-left {padding-right: 10px;}
	.hdgp-right {margin-left: 10px;}
	#intro h3 {margin-bottom: 16px;}
	#ourServices .sec-heading {margin-bottom: 0;}
	.svc-left {border-right: none;}
	.csdhdmn {font-size: 24px;}
	#mbvhdtxt {margin-bottom: 20px;}
	#mbvid {top:28%;}
	#mbvbddr {min-height: 280px;}
	#mvhdbx {text-align: center; padding-top: 0;}
	#mvhdbx h3 {margin-bottom: 0;}
	#whyBelle {padding-top: 30px;}
	#whyBelle h2 img {height: 10px;}
	#whyBelle h2 img#belleLogoOnHeading {height: 24px; margin-left: 5px; margin-right: 5px;}
	.whybllrow {padding-bottom: 30px;}
	#ourServices h3 {margin-bottom: 10px;}
	#ourServices {padding-bottom: 30px;}
	.whyb-box, .bflw-box {font-size: 14px;}
	.whyb-box h3 {font-size: 18px; margin-bottom: 20px;}
	.whybllrow {padding-top: 30px;}
	.wbpnt {margin-bottom: 20px;}
	#wbbx01, #wbbx02, #wbbx03 {margin-top: 3%;}
	.bflwnum {min-height: 100px;}
	.accordion-button {font-size: 14px;}
	.accordion-body, .shop-infobx {padding: 10px;}
	#footerSNS {text-align: left; padding-bottom: 30px;}
	#footerSNS ul li {display: block; margin-bottom: 16px;}
	#back2top {right: 0; bottom: 0; text-align: right;}
	#back2top a img.img-fluid {max-width: 50%;}
	#intro .heading-mb, #caseStudy .heading-mb, #belleForm .heading-mb {margin-bottom: 30px;}
	#belleStores .heading-mb {margin-bottom: 20px;}
	#footerSNS ul li:last-child {margin-bottom: 0;}
	#belleForm {padding-top: 30px;}
	#csBttmTxt {font-size: 20px;}
	#footerSNS ul {padding-left: 10%;}
}
@media screen and (max-width: 390px) {
	#mbvid {top:30%;}
	.sif-title {padding: 30px 0 15px;}
	.sif-data {padding-top: 15px; padding-bottom: 15px;}
	#back2top a img.img-fluid {max-width: 40%;}
}
@media screen and (max-width: 375px) {
	#sideNav {top:21.5%;}
	.accordion-button {font-size: 12px;}
	.bflwnum img {height: 80px;}
	.bflw-box {padding-left: 90px;}
	.bflwnum {width: 70px;}
	#sideNav a img {max-width: 44px;}
}
@media screen and (max-width: 320px) {
	#sideNav {top:25%;}
	#hdrLeft img {height: 32px; margin-bottom: 10px;}
	#hdrTxtOpenedTimes {font-size: 10px;}
	#hdrTxtCall {font-size: 16px;}
	#topphoneimg img {height: 36px;}
	#mbvbddr {min-height: 200px;}
	#mbvid {top:32%;}
	.flow-row {padding-top: 30px; padding-bottom: 30px;}
	#intro .separetor {margin-top: 30px; margin-bottom: 30px;}
	.sif-title {font-size: 16px;}
	.sif-data {font-size: 14px;}
	.accordion-button {font-size: 10px;}
}