/* ------------------------------------------------*/
/* The Martial Arts School - Custom Styles
/* Fonts: 		Sans Serif: "Noto Sans"
/* Weights (Regular, Semi-bold):		400, 600
/* Colours: 
	dark grey: 		#1d1d1b
	mid grey: 		#a6a6a6
	orange: 		#f6a201



/* bg colours */
.dark-grey-bg { background: #1d1d1b; }
.mid-grey-bg { background: #a6a6a6; }
.orange-grey-bg { background: #f6a201; }

/* structure */
.chevron { background: transparent url(/img/bg-hdr-chevron.png) center bottom no-repeat; min-height: 120px; }


/* header */
.header { background: #d2ded4; }


/* logo */
.logo-wrap { padding: 0; background: #1d1d1b; padding: 7px 0; }
.logo-wrap a { display: block;  }
.logo-wrap img { float: right; }

/* contact info header */
.contact-hdr { padding-top: 15px; }
.contact-hdr a { color: #000; font-size: 14px; padding: 7px 7px 7px 7px; }

.contact-hdr-sm { padding-top: 10px; }
.contact-hdr-sm a { color: #1d1d1b; font-size: 34px; padding: 7px 7px 7px 7px; }
.contact-hdr-sm a:hover { color: #f8a201; }


/* social */
.social-hdr { padding-top: 15px; padding-right: 100px;  }
.social-hdr a { display: block; float: right; width: 30px; height: 30px; font-size: 18px; border-radius: 20px; margin-right: 7px; background: #f8a201; color: #fff; padding: 4px 6px; } 
.social-hdr a.soc-fb { padding-left: 10px; } 
.social-hdr a:hover { background: #1d1d1b; }

.social-hdr-sm { padding-top: 12px; padding-right: 100px; }
.social-hdr-sm a { display: block; float: right; width: 30px; height: 30px; font-size: 18px; border-radius: 20px; margin-right: 7px; background: #f8a201; color: #fff; padding: 4px 6px; } 
.social-hdr-sm a.soc-fb { padding-left: 10px; } 
.social-hdr-sm a:hover { background: #1d1d1b; }

.social-hdr a.soc-yt { padding-left: 5px; } 

.social-hdr a.login { padding-left: 8px; margin-left: 13px; background: #5a5555; } 
.social-hdr a.login:hover { background: #f8a201; }


/* nav  */
#mainnav { position: absolute; bottom: 0; height: 63px; background: rgba(255,255,255,0.75) url(/img/bg-nav-chevron.png) 105% bottom no-repeat; padding: 0; }
.parent a { color: #000; font-size: 16px; font-weight: 600; padding: 21px 8px 19px 8px !important; margin-right: 15px; border-bottom: 3px solid #fff; }

.parent:focus,
.parent a:hover,
.parent > a:focus,
.parent a:active { background: none !important; }

.nav { padding: 0 !important; }
.collapse {  padding: 0 !important; }

.parent a:hover,
.parent > a.current { border-bottom: 3px solid #f6a201; }

ul.dropdown-menu { border-radius: 0; box-shadow: none; border: 0 !important; margin-top: 10px; }

ul.dropdown-menu li.chld { font-size: 16px; padding-left: 12px !important; }
ul.dropdown-menu li.chld a { color: #000; padding: 4px 0 4px 4px !important; }

ul.dropdown-menu li.chld a:active { text-decoration: underline; }

ul.dropdown-menu li.chld a.current,
ul.dropdown-menu li.chld a:hover { background: #d2ded4; color: #000; }

ul.dropdown-menu li.chld a.current:hover  { background: #d2ded4 !important; border-bottom: 3px solid #f6a201; }

/* nav - mobile */
.hdr-sm-logo { background: #f6aa18; padding-left: 0; }
.hdr-sm-nav { background: #f6aa18; text-align: right; }
.hdr-sm-nav a { display: block; font-size: 40px; color: #fff; padding-top: 10px; }

.hdr-sm-menu { background: #1d1d1b; padding-top: 25px; text-align: right; }

.hdr-sm-menu ul { list-style-type: none; padding: 0 !important; }
.hdr-sm-menu ul li { background: #1d1d1b; color: #fff; margin: 0; }
.hdr-sm-menu ul li a { position: relative; display: block; color: #fff; font-size: 20px; padding: 7px 35px 7px 7px; }
.hdr-sm-menu ul li a:hover { color: #f6a201; }
.hdr-sm-menu ul li a::after { position: absolute; top: 7px; right: 3px; font-family: "ionicons"; content: '\f104'; font-size: 16px; }

.hdr-sm-menu ul ul { padding: 15px 0 !important; }
.hdr-sm-menu ul ul li a { position: relative; display: block; padding: 7px 45px 7px 7px; font-size: 18px; }
.hdr-sm-menu ul ul li a::after { content: ' '; }

.utils-hdr-sm { text-align: right; color: #fff; padding-bottom: 40px; padding-right: 35px; }
.utils-hdr-sm a { color: #fff; display: block; }

.utils-hdr-sm a.hdr-sm-phone { font-size: 18px; color: #f6a201; margin-top: 15px; }
.utils-hdr-sm a.hdr-sm-email { font-size: 18px; color: #f6a201; margin-top: 15px; margin-bottom: 20px; }

.utils-hdr-sm a.login,
.utils-hdr-sm a.soc-tw,
.utils-hdr-sm a.soc-fb,
.utils-hdr-sm a.soc-yt,
.utils-hdr-sm a.soc-li { display: inline; font-size: 24px; margin-left: 20px; }

 

/* banners */
.bnr-cntr { padding: 0; }
.bnr-item { padding: 0 !important; position: relative; background-position: center center; background-repeat: no-repeat; background-color: #cdddd2; overflow: hidden; width: 100%; height: 700px;  z-index: 1; }
.bnr-caption { position: relative; top: 79%; left: 14%; transform: translateY(-50%); z-index: 999; width: 65%; background: rgba(255,255,255,0.85); padding: 25px; }
.bnr-caption h1 { font-size: 20px; font-weight: 600; }
.bnr-caption p { margin-bottom: 25px; }

.btn-orange { padding: 10px; background: #f6a201; color: #fff; text-decoration: none; }
.btn-white { padding: 10px; background: #fff; color: #000; text-decoration: none; }

.btn-orange:hover,
.btn-white:hover { text-decoration: none; }

.btn-orange:hover { color: #f6a201; background: #fff; }
.btn-white:hover { color: #fff; background: #000; }


/* banners - mobile */
.bnr-cntr-mob { padding: 0; }
.bnr-item-mob { padding: 0 !important; }
.bnr-item-img { background-position: center center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 250px; background-color: #cdddd2; }

.bnr-caption-mob { padding: 25px; background: #424242; }
.bnr-caption-mob h1 { font-size: 20px; font-weight: 600; color: #fff; }
.bnr-caption-mob li { color: #fff; }
.bnr-caption-mob p { margin-bottom: 25px; color: #fff; }

.bnr-pager-mob { margin: 0 auto; position: absolute; top: 229px; left: 50%; transform: translateX(-50%); }
.bnr-pager-mob a { display: block; width: 12px; height: 12px; float: left; background: #424242; font-size: 18px; padding-top: 2px; margin-right: 10px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; }
.bnr-pager-mob a.cycle-pager-active { background: #f0a900; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; color: #fff; }

.bnr-caption-mob .btn-orange,
.bnr-caption-mob .btn-white { text-align: center; display: inline-block; width: 47% !important; }


/* banner sub */
.bnr-cntr-sub { padding: 0; }
.bnr-item-sub { padding: 0 !important; }
.bnr-item-sub { background-position: center center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 370px; background-color: #cdddd2; }


/* home panel */
.hme-panel { padding-top: 10px; min-height: 250px; background: #f2f2f2; border-top: 10px solid #fff; }

.hme-panel-ttl { background-position: left bottom; background-repeat: no-repeat; background-size: contain; padding-left: 0; }

.hme-panel-ttl h2 { display: block; background: transparent url(/img/home-panel-chevron.png) right 0 no-repeat; padding: 11px; font-size: 18px; color: #fff; font-weight: normal; font-weight: 600; width: 75%; padding-left: 105px; }

.hme-panel-txt { padding: 25px; }

.hme-panel-txt-item { width: 85%; background: rgba(255,255,255,0.7); float: none; margin: 0 auto; padding: 20px; }
.hme-panel-txt-item p { font-size: 14px; margin-bottom: 15px; }


/* class slider */
.class-hdr { background: #f2f2f2; padding: 10px 0 0 75px; }
.class-hdr h3 { display: block; margin: 0; background: transparent url(/img/classes-hdr-chevron.png) 0 0 no-repeat; color: #f6a201; font-size: 26px; font-weight: normal; font-weight: 600; padding: 11px 0 11px 45px; border: none !important; }

#class-wrap { padding: 0; }

#per-slide-template { position: absolute; top: 0; z-index: 9999; background: #f2f2f2; border-bottom: 3px solid #f6a201; width: 100%; height: 45px; padding: 0 0 0 97px !important;  }
#per-slide-template a { display: inline-block; margin: 0 !important; padding: 10px !important; color: #000; }
#per-slide-template a.cycle-pager-active,
#per-slide-template a:hover { color: #fff; background: #f6a201; text-decoration: none; }


.class-item { padding: 0 !important; position: relative; background-position: center center; background-repeat: no-repeat; background-color: #cdddd2; overflow: hidden; width: 100%; height: 700px;  z-index: 1; }

.class-caption { position: relative; top: 70%; left: 0; transform: translateY(-50%); z-index: 999; background: transparent url(/img/classes-caption-chevron.png) 0 0 no-repeat; width: 600px; height: 375px; }

.class-caption h4 { font-size: 20px; font-weight: 600; color: #f6a201; padding: 25px 0 0 105px; }

.class-caption p:first-of-type { padding: 35px 125px 25px 105px; color: #fff; }

.class-caption p:nth-of-type(2) { padding: 0 0 0 105px; }


/* gallery */
.gallery-wrap { background: #f2f2f2; padding-top: 10px }

.gallery-hdr { padding: 0 !important; }
.gallery-hdr h5 { display: inline-block; padding: 11px 50px 11px 105px; background: url(/img/home-panel-chevron.png) right 0 no-repeat; color: #fff; font-size: 20px; font-weight: 600;  }

.gallery-wrap-sub { padding: 25px 90px 0 90px; }

.gallery-img { min-height: 270px; text-align: center; }
.gallery-img img { display: block; /*height: 200px; width: auto;*/ height: 100%; width: 100%; margin: 0 auto; }
.gallery-title { font-size: 14px; }

.gallery-img .thumbnail { border: 0; padding: 0; margin: 0; border-radius: 0; }

.gallery-thumbnail { padding: 15px; }
.gallery-thumbnail img { display: block; width: 100%; height: auto; text-align: center; }
.gallery-thumbnail a { display: block; color: #000; font-weight: bold; text-align: center;  }


/* videos */
.video-img { min-height: 290px; text-align: center; }
.video-img img { display: block; height: 250px; width: auto; margin: 0 auto; }

.video-title { font-size: 14px; }

.video-img-sub { min-height: 290px; text-align: center; }
.video-img-sub img { display: block; height: 250px; width: auto; margin: 0 auto; }

.video-title-sub { font-size: 14px; }




/* images/vids select */
.select-imgvid { text-align: center; padding: 15px 0; }

.select-imgvid .select-img,
.select-imgvid .select-vid { display: inline-block; width: 201px; height: 63px; text-align: center; padding-top: 20px; background-repeat: repeat-x; text-decoration: none; }

.select-imgvid .select-img:hover,
.select-imgvid .select-vid:hover { text-decoration: underline; }


/* news home */
.news-cntr { padding: 30px 0 0; border-bottom: 100px solid #f2f2f2; background: #f2f2f2; }
.news-hdr { z-index: 9999; position: absolute; top: 0; left: 0; width: 25%; }
.news-hdr h5 { z-index: 9999; display: block; background: transparent url(/img/chevron-white.png) right 0 no-repeat; padding: 20px; font-size: 18px; color: #f6a201; font-weight: normal; font-weight: 600; padding-left: 105px; }
.news-item { padding: 0 !important; position: relative; background-position: center center; background-repeat: no-repeat; background-color: #f2f2f2; overflow: hidden; width: 100%; height: 600px;  z-index: 1; }
.news-caption { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 999; width: 65%; background: rgba(255,255,255,0.9); padding: 15px 150px 15px 15px; }
.news-caption h6 { display: block; font-size: 20px; font-weight: 600; padding: 0 0 0 75px !important; margin: -25px 0 0 0 !important; }
.news-caption p { display: block; padding: 0 0 0 75px !important; }
.news-caption p a { color: #000 !important; text-decoration: underline; }

.news-caption p:nth-of-type(2) { margin-top: 25px; }

.news-pagn { z-index: 99999; position: absolute; bottom: 0; left: 65%; } 

.news-pagn a { cursor: pointer; }

.news-pagn #prev { display: block; width: 76px; height: 38px; background: transparent url(/img/btn-pagin-news-home.png) 0 0 no-repeat; }
.news-pagn #next { display: block; width: 76px; height: 38px; background: transparent url(/img/btn-pagin-news-home.png) 0 -38px no-repeat; }
.news-pagn #prev:hover { background: transparent url(/img/btn-pagin-news-home-on.png) 0 0 no-repeat; }
.news-pagn #next:hover { background: transparent url(/img/btn-pagin-news-home-on.png) 0 -38px no-repeat; }



/* footer */
.footer { background: #1d1d1b; color: #fff; padding: 25px 25px 25px 25px; }
.footer a { color: #fff; }

.col-ftr2 ul { list-style-type: none; padding: 0; margin: 0; }
.col-ftr2 li { padding-bottom: 7px; }

.col-ftr3 .contactFtr { padding-top: 25px; }
.col-ftr3 .form-control { border-radius: 0; padding: 7px; border: 1px solid #efa100; margin-bottom: 25px; }
.col-ftr3 .button { background: #efa100; padding: 7px; border: none; color: #fff; font-weight: 600; }

.footer-btm { background: #1d1d1b; color: #fff; padding: 0 0 125px 0; }
.footer-btm-col1 { background: #fff url(/img/chevron-ftr.png) left top no-repeat; color: #a6a6a6; padding: 25px 0 10px 50px; }
.footer-btm-col1 a { color: #a6a6a6; }
.footer-btm-col2 { background: #fff; text-align: right; padding: 10px 15px 10px 0; }

.share a { display: inline-block; color: #fff; padding: 7px; padding-top: 12px; border: 1px solid #ccc; width: 50px; height: 50px; text-align: center; border-radius: 50%; margin-left: 7px; font-size: 20px; background: #efa100; }

.share a:hover { color: #a6a6a6; border: 1px solid #a6a6a6; background: #fff }


/* local-menu */ 
.local-menu-wrap { padding: 0 !important; }
.local-menu { background: #fff; }

.local-menu dl { display: inline-table; padding: 0 0 0 0 !important; margin: 0 !important;  background: #999393; width: 100% !important;}

.local-menu dt { padding: 0; position: relative; }
.local-menu dt a { display: block; font-weight: 600; color: #fff; padding: 7px 0 7px 35px !important; cursor: pointer; }
.local-menu dt a:hover { background: #5b5555; text-decoration: none; }
/*.local-menu dt a:before { position: absolute; color: #fff; top:-5px; left: 35px; font-family: "ionicons"; content: '\f20d'; font-size: 20px; }*/

.local-menu dd { display: block; float: left; background: #999393; }
.local-menu dd a { display: block; padding: 5px 10px 5px 10px; color: #fff; font-size: 15px; }

.local-menu dd a:hover,
.local-menu dd a.current { background: #5b5555; text-decoration: none; }


/* main content */
#sub #maincontent { background: #f2f2f2; padding: 0; }

#sub #maincontent h1 { display: block; width: 100%; background: #fff url(/img/bg-sub-mainc-hdr.png) right bottom no-repeat; font-size: 24px; color: #f6a201; font-weight: 400; padding: 15px 0 10px 40px; margin: 0 !important; }

.content-wrap { padding: 10px 35px 35px 35px; }

.content-wrap h1 { font-size: 18px; color: #f6a201; font-weight: 600; margin-bottom: 0; }
.content-wrap h2 { font-size: 17px; color: #f6a201; font-weight: 600; margin-bottom: 0; }
.content-wrap h3 { font-size: 16px; color: #f6a201; font-weight: 600; margin-bottom: 0; }
.content-wrap h4 { font-size: 15px; color: #f6a201; font-weight: 600; margin-bottom: 0; }
.content-wrap h5 { font-size: 14px; color: #f6a201; font-weight: 600; margin-bottom: 0; }
.content-wrap h6 { font-size: 13px; color: #f6a201; font-weight: 600; margin-bottom: 0; }

.content-wrap strong { font-weight: 600; }

.rhcol-sub { padding: 20px 40px 15px 15px !important; margin-top: -6px; }

.btn-orange-sub { display: inline-block; padding: 10px; background: #f6a201; color: #fff; text-decoration: none; }
.btn-white-sub { display: inline-block; padding: 10px; background: #fff; color: #000; text-decoration: none; }

.btn-orange-sub:hover,
.btn-white-sub:hover { text-decoration: none; }

.btn-orange-sub:hover { color: #f6a201; background: #fff; }
.btn-white-sub:hover { color: #fff; background: #000; }

#sub #maincontent .video-wrap-sub { padding-top: 25px; }

#sub #maincontent .video-wrap-sub img { display: block; width: 100%; height: auto; margin: 0 auto; }

#sub #maincontent .video-wrap-sub .video-title-sub { font-size: 14px; text-align: center; padding-bottom: 30px; }

a.gallery-links-sub { display: block; background: #fff url(/img/bg-gallery-links.png) right 0 no-repeat; padding: 7px 0 7px 25px; font-size: 17px; color: #000; }
a.gallery-links-sub:hover { background-position: right -43px; text-decoration: none }

/* class timetable */
.classtimes-wrap { background: #f2f2f2; padding: 0 !important }

h2.class-times-hdr { display: block; background: #f6a201 url(/img/icn-bg-classes-hdr.png) 0 0 no-repeat; color: #fff; font-size: 20px; padding: 10px 0 10px 45px; margin: 0 0 25px 30px; font-weight: normal; }

.classtimes-cntr { padding: 0 45px 25px 75px; }

.classtimes-cntr h3 { background: #f6a201; padding: 7px 0 7px 25px; color: #fff; font-size: 16px; font-weight: normal !important; margin-bottom: 2px; }
.classtimes-cntr h4 { background: #989393; padding: 7px 0 7px 25px; color: #fff; font-size: 14px; font-weight: normal !important; margin-bottom: 2px; }

.ttitem { background: #e6e6e6; padding: 7px 0 7px 25px; color: #000; font-size: 16px; border-bottom: 2px solid #f2f2f2; display: table; width: 100%; }
.ttitem.drk { background: #d5d5d5; }
.ttitem span { display: table-cell; width: 20%; }

.ttitem-age { background: #e6e6e6; padding: 7px 0 7px 25px; color: #000; font-size: 16px; border-bottom: 2px solid #f2f2f2; display: table; width: 100%; }
.ttitem-age.drk { background: #d5d5d5; }
.ttitem-age span { display: table-cell; width: 20%; }


.ttitem-time { background: #e6e6e6; padding: 7px 11px 7px 25px; color: #000; font-size: 14px; border-bottom: 2px solid #f2f2f2; display: table; width: 100%; }
.ttitem-time.drk { background: #f0efef; }
.ttitem-time span { display: table-cell; width: 33%; }


/* login */
#login-form { padding: 20px; }
.alert-box { border: 1px solid red; background: #ffc6cb; width : 400px; padding: 15px 15px 0 15px; margin-left: 50px;  }


/* faqs */
.faqs { list-style-type: none; padding: 0; margin: 0;  }
.faqs .question a { color: #666; display: block; padding: 7px 0; }
.faqs .answer { background: #ccc; padding: 15px; }



/* form */
#intouch { color: #666; font-size: 16px; width: 90%; }

#intouch select,
#intouch textarea,
#intouch input { padding: 7px; width: 100%; border: 1px solid #e0e1e3; background: #fff; border-radius: 0; color: #4d5156; font-weight: 400; margin-bottom: 20px !important; }

#intouch input { margin-bottom: 10px; }

#intouch select { border: 1px solid #e0e1e3; background: #fff url(/img/icn-dropdown.png) 98% center no-repeat; font-size: 16px; color: #999; font-weight: 600; padding: 10px; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; height: 50px; margin-bottom: 10px; }

#intouch .submitctrl { padding-top: 15px; }

#intouch #submit,
#intouch #submit2 { border-radius: 0; background: #f6a201; padding: 7px 0 7px 15px; width: 100%; color: #fff; border: 1px solid #f6a201; text-align: left; font-size: 17px; font-weight: 600; margin-top: 5px; }

#intouch .g-recaptcha { padding: 10px 0 5px 0; }

#intouch .checkbox-inline { position: relative; top: 1px;	}

#intouch #callback { margin-left: 80px;}

.privacy { text-align: right; }
.privacy a { color: #666; }

.control-label { font-weight: normal; }

#intouch fieldset { border: 1px solid #fff; padding: 15px; }

#intouch fieldset legend { font-size: 16px; color: #f6a201; border: none; padding: 0 0 0 15px; }




/* captcha */
@media screen and (max-height: 575px){ .g-recaptcha { transform: scale(0.77); -webkit-transform: scale(0.77); transform-origin: 0 0; -webkit-transform-origin: 0 0; } }

/* checkboxes */
.material-switch > input[type="checkbox"] { display: none; }
.material-switch > label { cursor: pointer; height: 0px; position: relative; width: 40px; }
.material-switch > label::before { background: rgb(0, 0, 0); box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5); border-radius: 8px; content: ''; height: 16px; margin-top: -8px; position: absolute; opacity: 0.3; transition: all 0.4s ease-in-out; width: 40px; }
.material-switch > label::after { background: rgb(255, 255, 255); border-radius: 16px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); content: ''; height: 24px; left: -4px; margin-top: -8px; position: absolute; top: -4px; transition: all 0.3s ease-in-out; width: 24px; }
.material-switch > input[type="checkbox"]:checked + label::before { background: inherit; opacity: 0.5; }
.material-switch > input[type="checkbox"]:checked + label::after { background: inherit; left: 20px; }



/* radio buttons */
#intouch .btn-group label { padding-left: 40px; }
#intouch input[type="radio"]:empty { display: none; }
#intouch input[type="radio"] ~ span:before { position: absolute; display: block; top: 0; bottom: 0; left: 0; content: ''; width: 2.5em; background: #D1D3D4; }
#intouch input[type="radio"]:before { content: '\2714'; text-indent: .9em; color: #C2C2C2; }
#intouch input[type="radio"]:checked ~ span:before { content: '\2714'; text-indent: .3em; color: #fff; background-color: #5cb85c; line-height: 2.5em; }


/* members */
.membersassets,
.membersassets ul { list-style-type: none; }

.membersassets li { padding: 10px 0 10px 0; }
.membersassets a { color: #000; }

/* fluid images */
img.fluid-100 { display: block; width: 100%; height: auto; padding-bottom: 25px; }
img.fluid-80 { display: block; width: 80%; height: auto; padding-bottom: 25px; }
img.fluid-50 { display: block; width: 50%; height: auto; padding: 10px 25px 15px 0; float: left; }


/* tables */

td { padding: 10px; }


/* Costs */
.membership-table { width: 100%; border-collapse: collapse; background: #fff; margin-bottom: 2rem; }
.membership-table th, 
.membership-table td { border: 1px solid #ccc; padding: 1rem; text-align: left; vertical-align: top; }
.membership-table th { background: #eee; color: #000; font-size: 18px; }

/* .membership-table tr { display: flex; flex-wrap: wrap; } */

.col-1 { background-color: #ffc000; width: 50%; }
.col-2 { background-color: #ffecaf; width: 50%; }

.section-title { font-weight: bold; display: block; margin-top: 0.5rem; }

.legend { margin: 1rem 0; font-weight: bold; display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.legend-box { display: inline-block; width: 20px; height: 20px; margin-right: 0.5rem; border: 1px solid #999; vertical-align: middle; }
.legend-box.monthly { background-color: #ffc000; }
.legend-box.payg { background-color: #ffecaf; }

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

.membership-table { border-collapse: collapse; width: 100%; }
/* .membership-table thead { display: none; } */
.membership-table tr { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1rem; border: 1px solid #ccc; padding: 1rem; background: #fff; }
.membership-table td { display: block; width: 100%; border: none; border-bottom: 1px solid #eee; padding: 0.5rem 0; box-sizing: border-box; }
.membership-table .col-1 { background-color: #ffc000; padding: 7px; }
.membership-table .col-2 { background-color: #ffecaf; padding: 7px; }
.membership-table td::before { content: attr(data-label); font-weight: bold; display: block; margin-bottom: 0.25rem; }

}


/* @media screen and (max-width: 768px) {
	.membership-table, 
	.membership-table thead, 
	.membership-table tbody, 
	.membership-table th, 
	.membership-table td, 
	.membership-table tr { display: block; width: 100%; }

	.membership-table tr { margin-bottom: 1rem; border: 1px solid #ccc; padding: 1rem; background: #fff; }

	.membership-table td { border: none; border-bottom: 1px solid #eee; padding: 0.5rem 0; }

	.membership-table .col-1,
	.membership-table .col-2 { padding: 7px; }

	.membership-table tr { display: flex; flex-wrap: wrap; }

	.membership-table .col-1,
	.membership-table .col-2 { width: 50%; box-sizing: border-box; }

	.membership-table td::before { content: attr(data-label); font-weight: bold; display: block; margin-bottom: 0.25rem; }
} */