/****************************** CSS VARIABLES ******************************/

:root {
	--background: #f8f8f8;
	--blue: rgb(27, 56, 99);
	--blue-light: hsl(216, 50%, 30%);
	--grey-light: hsl(0, 0%, 93%);
	--grey-medium: hsl(0, 0%, 88%);
	--orange: rgb(243, 94, 7);
	--orange-dark: rgb(193, 75, 6);
	--orange-light: hsl(22, 87%, 57%);
	--white: #fff;
	--black: rgb(51, 51, 51);
}

div {
	max-height: 999999px !important;  /*stop android chrome resizing text*/
	text-size-adjust: none !important;  /*same, but doesn't appear to work*/
}

/****************************** GLOBAL ******************************/

p, ul, ol, .btn {
	font-size: 1.0rem;
}
html:lang(th) p, html:lang(th) ul, html:lang(th) ol, html:lang(th) .btn {
	font-size: 1.1rem;
}

/* Reduce all font sizes under 576px */
html {
	/*font-size: 0.88rem;*/
}

/* sm */
@media (min-width: 576px) {
	html {
		font-size: 1.0rem;
	}
}

/* md */
@media (min-width: 768px) {
	html {
		font-size: 1.0rem;
	}
}

/* lg */
@media (min-width: 992px) {
	html {
		font-size: 1.0rem;
	}
}

/* xl */
@media (min-width: 992px) {
	html {
		font-size: 1.0rem;
	}
}

/* Sharpen rescaled images chrome/edge/firefox */
body {
	image-rendering: -webkit-optimize-contrast;
}

/* Sharpen rescaled images Safari 7.1+*/
_::-webkit-full-page-media, _:future, :root body {
	image-rendering: auto;
	}
/* Test puts full stop after date on Safari
_::-webkit-full-page-media, _:future, :root p.small.text-uppercase.mb-0.text-orange::after {
	content: ".";
}*/

.navbar-brand,
.soft {
	/* Soften logo (not using any more) */
	/*image-rendering: auto;*/

}

html:lang(en) body {
	font-family: "Poppins", sans-serif;
}

html:lang(th) body {
  font-family: "Noto Sans Thai", sans-serif;
}

body {
	font-weight: 400;
	background: var(--background);
	/* attempt to solve google wider than viewport issue*/
	overflow-x: hidden;
	color: var(--blue) !important;
	line-height: 1.6; /* don't use rem as it's inconsistent on chrome mobile */
}

/* Reduce borders of objects when focused */
*,*:focus,*:hover{
	outline:none !important;
}

/* Force xl size to be wider */
@media (min-width: 1420px) {
	.container-fluid {
		width: 1400px;
	}
}

/* New full-width class to override above */
.full-width {
	width: 100%;
}

/****************************** TYPOGRAPHY ******************************/
h1, h2, h3, h4, h5, h6, .lead, h5.card-header {
	line-height: 1.1;
	/* Close up heading line-height */
}

h1, .lead {
	font-size: 2.25rem;
	font-weight: 700 !important;
}

html:lang(th) h1, html:lang(th) .lead {
	font-size: 2.5rem;
	font-weight: 700 !important;
}

/* Increase h1 and .lead on lg (default is 2.5rem) */
@media (min-width: 992px) {

	h1,
	.lead {
		font-size: 3.6rem;
	}
	html:lang(th) h1,
	html:lang(th) .lead {
		font-size: 3.96rem;
	}
}

h1.smaller {
	font-size: 2.3rem; /*Used on home page*/
}

html:lang(th) h1.smaller {
	font-size: 2.53rem; /*Used on home page*/
}

h2, h5.card-header {
	font-size: 2rem;
	font-weight: 700;
}

html:lang(th) h2, html:lang(th) h5.card-header {
	font-size: 2.2rem;
	font-weight: 700;
}


/* Reduce h2 (but not foot h2) on xs (default is 2.0rem) */
@media (min-width: 0px) and (max-width: 576px) {
	h2, h5.card-header {
		font-size: 1.4rem !important;
	}
	html:lang(th) h2, html:lang(th) h5.card-header {
		font-size: 1.54rem !important;
	}
}


h2 small {
	line-height: 1.3 !important;
}

h2.smaller {
	font-size: 2.0rem; /*Used for thumbnails at foot, smaller on phones only - see below*/
}

html:lang(th) h2.smaller {
	font-size: 2.2rem; /*Used for thumbnails at foot, smaller on phones only - see below*/
}

/* Reduce .smaller headings on xs (default is 2.0rem) */
@media (min-width: 0px) and (max-width: 576px) {
	h2.smaller {
		font-size: 1.4rem !important;
	}
	html:lang(th) h2.smaller {
		font-size: 1.54rem !important;
	}
}

h2.muted {
	font-size: 1.1rem !important; /*Contact page */
	font-weight: 700 !important;
	margin-bottom: 0rem !important;
	line-height: 1.1 !important;
}

html:lang(th) h2.muted {
	font-size: 1.21rem !important; /*Contact page */
}

h3 {
	font-weight: 700; /* Donate boxes and possibly more*/
	font-size: 1.6rem;
	line-height: 1.3 !important;
}

html:lang(th) h3 {
	font-size: 1.6rem;
}

/* Reduce h3 on xs (default is 2.0rem) */
@media (min-width: 0px) and (max-width: 576px) {
	h3 {
		font-size: 1.2rem !important;
	}
	html:lang(th) h3 {
		font-size: 1.32rem !important;
	}
}

h4 {
	font-weight: 700; /* Donate boxes and possibly more*/
	font-size: 1.0rem;
	line-height: 1.3 !important;
}

html:lang(th) h4 {
	font-size: 1.1rem;
}

/* Reduce h4 on xs (default is 2.0rem) */
@media (min-width: 0px) and (max-width: 576px) {
	h4 {
		font-size: 1.0rem !important;
	}
	html:lang(th) h4 {
		font-size: 1.1rem !important;
	}
}

/****************************** LINKS ******************************/
/*
a {
	color: var(--blue);

}

a:visited {
	color: var(--blue);
}

a:hover {
	color: var(--orange);
	 !important;
	text-decoration: none;
}

a:active {
	color: var(--blue);
}
*/

/* Remove underlines prior to hovering */
a {
	text-decoration: none !important;
}

/* h1 color */
a h1, a h2, .blue-link {
	color: var(--blue);
}
a:hover h1, a:hover h2, .blue-link:hover {
	color: var(--orange);
}

/* text within paragraphs etc color */
p a, ul a {
	color: var(--orange);
}
p a:hover, ul a:hover {
	color: var(--orange-dark);
}

/* p, ul when background is orange*/
.background-orange p a,
.background-orange ul a {
	color: var(--white);
}
. p a:hover,
.background-orange ul a:hover {
	color: var(--white);
}

/* p, ul when background is orange and text is white on same div parent */
.background-orange.text-white p a,
.background-orange.text-white ul a {
	color: var(--white);
}
.background-orange.text-white p a:hover,
.background-orange.text-white ul a:hover {
	color: var(--blue);
}

/* h2, p when background is dark blue*/
a.background-blue h2,
.background-blue h2,
a.background-blue p,
.background-blue ul a,
.background-blue p {
	color: var(--white);
}
/*.background-blue a:hover h2,
a.background-blue h2:hover,
.background-blue p a:hover,
.background-blue ul a:hover
 {
	color: var(--orange) !important;
}*/
/* footer text within paragraphs etc color */
.footer p a {
	color: var(--blue) !important;
}
.footer p a:hover {
	color: var(--orange) !important;
}

/****************************** FORM ******************************/

label {
	text-transform: uppercase;
}
/* Remove default styling from Safari */
.form-control {
	-webkit-appearance: none !important;
}
/****************************** BUTTONS ******************************/

.btn-primary, .btn-secondary {
	text-align: left;
}

.btn-primary {
	background-color: var(--blue);
	border: none;
	border-color: var(--blue);
	border-radius: 0;
}

.btn-primary:hover, .btn-primary:hover:active {
	background-color: var(--orange) !important;
	border: none;
	border-color: var(--orange);
}

.background-orange .btn-primary:hover, .background-orange .btn-primary:active {
	background-color: var(--blue-light) !important;
	border: none;
	border-color: var(--blue-light) !important;
}

.btn-secondary {
	background-color: var(--orange) !important;
	border-color: var(--orange) !important;
	border: none;
	border-radius: 0;
}

.btn-secondary:hover {
	background-color: var(--blue) !important;
	border: none;
	border-color: var(--blue) !important;
}

.btn-lg {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.3;
	padding: 1.5rem;
/*	padding-right: 10rem; */
/*	padding-bottom: 3rem; */
	width: 100%;
	text-align: left;
}
html:lang(th) .btn-lg {
	font-size: 1.76rem;
}

/****************************** BORDERS ******************************/

.border,
.border-top,
.border-right,
.border-bottom,
.border-left,
.border-0,
.border-top-0,
.border-right-0,
.border-bottom-0,
.border-left-0 {
	border-color: var(--white) !important;
}

/****************************** SHADED ROW ******************************/
/*
.shaded-row {
	background: rgba(141, 108, 36, 0.05);
	border-top: solid 1px white;
}
*/
/****************************** NAVBAR ******************************/


/* Font size */
.navbar li {
	font-size: 1.0rem;
	font-weight: 700;
	padding-bottom: 0rem; /* reset padding after adding it to normal lists */
}
html:lang(th) .navbar li {
	font-size: 1.1rem;
}
.navbar-nav li {
	list-style-type: none; /* remove bullets after changing their style below for normal use */
}
/* Helps if too many items cause wrapping on desktop */
@media (min-width: 992px) {
	.navbar-nav > .nav-item {
		text-align: right;
	}
}
/* Phone*/
@media screen and (max-width: 40em) {
	.navbar,
	.dropdown-item {
		font-size: 1rem;
	}
	html:lang(th) .navbar,
	.dropdown-item {
		font-size: 1.1rem;
	}
}

/* Phone drop down in white box*/
@media screen and (max-width: 62em) {
	.navbar-nav {
		background: var(--background);
		padding-top: 1rem;
	}
}

/* Phone hamburger icon outline */
.navbar-toggler {
	background: var(--orange);
	border: none;
}

/* Phone hamburger icon three horizontal lines */
.navbar-toggler-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
}

/* Phone hamburger icon rounded corners */
.navbar-toggler {
	border-radius: 0 !important;
}

/* Phone hamburger icon make bigger with padding */
.navbar-toggler {
	padding: 6px;
}

/* Limit width to 1920px */
.navbar {
	max-width: 1400px !important;
	margin-left: auto;
	margin-right: auto;
}

/* Active page highlight */
li.nav-item.active > a.nav-link,
li.nav-item.active > a.dropdown-item {
	color: var(--blue) !important;
}

/* Nav drop down heading when menu dropped down */
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show > .nav-link {
	color: var(--blue);
}

/* Drop down menu */
.dropdown-menu {
	border: none;
	background-color: var(--background);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	padding-top: 0;
}

/* Drop down menu item */
.dropdown-item {
	font-weight: 700;
	color: var(--orange);
	padding-left: 1rem;

}

/* Drop down menu hover */
.dropdown-item:focus,
.dropdown-item:hover {
	color: var(--blue);
}

/* Drop down menu hover */
a.dropdown-item:focus,
a.dropdown-item:hover {
	color: var(--blue);
}

/* Drop down menu active */
.dropdown-item:active {
	background-color: inherit;
}

/* Color */
.navbar-light .navbar-nav .nav-link {
	color: var(--orange);
}

/* Hover color */
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
	color: var(--blue) !important;
}

/* Visited link color */
.nav-link:visited,
a.dropdown-item:visited {
	color: var(--orange);
}
/* Visited link color */
a.dropdown-item:visited:focus,
a.dropdown-item:visited:hover {
	color: var(--blue);
}

/****************************** NAVBAR LOGO ******************************/

/* Logo */
/* Reduce space above and below nav section */
.navbar-brand {
	padding-top: 0;
	padding-bottom: 0;
	margin-left: 0.5rem;
}

@media (max-width: 576px) {
	.navbar-brand {
		margin-top: -0.25rem;
		margin-left: -0.35rem;
	}
}

@media (min-width: 577px) and (max-width: 991px) {
	.navbar-brand {
		margin-top: 0;
		margin-left: 0;
	}
}

@media (min-width: 992px) {
	.navbar-brand {
		margin-top: 0.5rem;
		margin-left: 0.5rem;
	}
}

/****************************************************************************/
/************************* SLICK.CSS 1.60*************************/
/****************************************************************************/

/* Slider */
/* Slider */
.slick-slider
{
	position: relative;

	display: block;
	box-sizing: border-box;

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

	-webkit-touch-callout: none;
	-khtml-user-select: none;
	-ms-touch-action: pan-y;
		touch-action: pan-y;
	-webkit-tap-highlight-color: transparent;
}

.slick-list
{
	position: relative;

	display: block;
	overflow: hidden;

	margin: 0;
	padding: 0;
}
.slick-list:focus
{
	outline: none;
}
.slick-list.dragging
{
	cursor: pointer;
	cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
	-webkit-transform: translate3d(0, 0, 0);
	   -moz-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		 -o-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
}

.slick-track
{
	position: relative;
	top: 0;
	left: 0;

	display: block;
}
.slick-track:before,
.slick-track:after
{
	display: table;

	content: '';
}
.slick-track:after
{
	clear: both;
}
.slick-loading .slick-track
{
	visibility: hidden;
}

.slick-slide
{
	display: none;
	float: left;

	height: 100%;
	min-height: 1px;
}
[dir='rtl'] .slick-slide
{
	float: right;
}
.slick-slide img
{
	display: block;
}
.slick-slide.slick-loading img
{
	display: none;
}
.slick-slide.dragging img
{
	pointer-events: none;
}
.slick-initialized .slick-slide
{
	display: block;
}
.slick-loading .slick-slide
{
	visibility: hidden;
}
.slick-vertical .slick-slide
{
	display: block;

	height: auto;

	border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
	display: none;
}


/****************************************************************************/
/************************* SLICK-THEME.CSS 1.60*************************/
/****************************************************************************/

/* Slider */
.slick-loading .slick-list {
	background: var(--background) url('slick160/ajax-loader.gif') center center no-repeat;
}

/* Arrows */
.slick-prev,
.slick-next {
	font-size: 0;
	line-height: 0;

	position: absolute;
	bottom: 0%;

	display: block;

	width: 20px;
	height: 20px;
	padding: 0;
	-webkit-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	transform: translate(0, -50%);

	cursor: pointer;

	color: transparent;
	border: none;
	outline: none;
	background: transparent;
}

/* Remove blue outline when clicked */
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
	outline: none;
}

/* Highlight when rollover */
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
	opacity: 1;
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
	opacity: .25;
}

.slick-prev:before,
.slick-next:before {
	font-family: 'slick';
	font-size: 20px;
	/* adjust line height if aligned arrows at bottom */
	line-height: 1.07;

	opacity: .75;
	color: var(--white);

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Dots */
.slick-dotted.slick-slider {
	margin-bottom: 30px;
}

.slick-dots {
	position: absolute;
	bottom: -25px;

	display: block;

	width: 100%;
	padding: 0;
	margin: 0;

	list-style: none;

	text-align: center;
}

.slick-dots li {
	position: relative;

	display: inline-block;

	width: 20px;
	height: 20px;
	margin: 0 5px;
	padding: 0;

	cursor: pointer;
}

.slick-dots li button {
	font-size: 0;
	line-height: 0;

	display: block;

	width: 20px;
	height: 20px;
	padding: 5px;

	cursor: pointer;

	color: transparent;
	border: 0;
	outline: none;
	background: transparent;
}

.slick-dots li button:hover,
.slick-dots li button:focus {
	outline: none;
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
	opacity: 1;
}

.slick-dots li button:before {
	font-family: 'slick';
	font-size: 6px;
	line-height: 20px;

	position: absolute;
	top: 0;
	left: 0;

	width: 20px;
	height: 20px;

	content: '•';
	text-align: center;

	opacity: .25;
	color: var(--black);

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before {
	opacity: .75;
	color: var(--black);
}


/****************************************************************************/
/****************************** SLICK MY CSS******************************/
/****************************************************************************/

/* Remove left and right margins */
.slick-list {
	padding: 0 !important;
}

/****************************** SLICK ARROWS ******************************/

/* Prev/Next move inside window to prevent horizontal scroll bar + prev icon dissapearing fix */
.slick-prev {
	right: 168px;
	z-index: 1;
	margin-bottom: 83px;
}

.slick-next {
	right: 84px;
	margin-bottom: 83px;
}

/* Placement for reduced arrow sizes on xs (see below) */
@media (min-width: 0px) and (max-width: 768px) {
	.slick-prev {
		right: 116px;
		z-index: 1;
		margin-bottom: 57px;
	}

	.slick-next {
		right: 58px;
		margin-bottom: 57px;
	}
}

/* Fix Safari arrows disappearing etc issue */
.slick-prev,
.slick-next {
	width: auto;
	height: auto;
}

/* Prev/Next icon color + font size*/
.slick-prev:before,
.slick-next:before {
	position: absolute; /* fixes safari padding not working */

	font-size: 40px;
	padding: 20px 25px;
}

/* Reduce arrow sizes on xs */
@media (min-width: 0px) and (max-width: 768px) {

	.slick-prev:before,
	.slick-next:before {
		font-size: 25px;
		padding: 15px 18px;
	}
}

/* Fix left arrow being grey on page load */
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
	opacity: 1 !important;
}

/* Prev/Next icon */
.slick-prev:before {
	content: "◀︎" !important;
}

.slick-next:before {
	content: "▶︎";
}

/* Color */
.slick-prev:before,
.slick-next:before {
	color: var(--blue);
	background: var(--white);
	opacity: 1.0;
}

/* Hover Color */
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
	background: var(--orange);
	color: var(--white);
}

/****************************** SLICK CURSOR ******************************/

/* Hand cursor */
.slick {
	cursor: -webkit-grab;
	cursor: grab;
}

/****************************** BOOTSTRAP ******************************/

.border-top {
	border-color: var(--white) !important;
}

small {
	font-weight: inherit !important;
}

/****************************** COLORS  ******************************/

.background-orange {
	background: var(--orange);
}

.background-blue {
	background: var(--blue);
}

.background-light-blue {
	background: var(--grey-light);
}

.text-orange {
	color: var(--orange);
}

.text-blue {
	color: var(--blue);
}

.text-white {
	color: var(--white);
}

a > .text-white:hover {
	color: var(--blue) !important;
	text-decoration: none;
}

/****************************** PAGINATION  ******************************/
.pagination-lg .page-link {
	font-size: 1rem;
}
.page-item {
	list-style-type: none; /* remove bullets after changing their style below for normal use */
}
.disabled {
	pointer-events: none !important;
}
.page-link {
	background: var(--grey-light);
	border: 1px solid var(--background);
	color: var(--blue);
}
.page-item.active .page-link {
	background-color: var(--blue);
	border: 1px solid var(--background);
}
.page-link:hover {
	color: var(--white) !important;
	background-color: var(--orange);
}
.page-link:visited {
	color: var(--blue);
}
/* Seperator - three dots */
.MarkupPagerNavSeparator {
	padding-top: .7rem;
}
/* Remove rounded corners on regular and large size pagination */
.page-item:first-child .page-link,
.pagination-lg .page-item:first-child .page-link {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.page-item:last-child .page-link,
.pagination-lg .page-item:last-child .page-link {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

/* Make number links square */
.pagination-lg .page-link {
	padding-left: 1.35rem !important;
	padding-right: 1.35rem !important;
}

/* Make left arrow link square */
.MarkupPagerNavPrevious > .page-link {
	padding-left: 1.0rem !important;
	padding-right: 1.1rem !important;
}

/* Make right arrow link square */
.MarkupPagerNavNext > .page-link {
	padding-left: 1.1rem !important;
	padding-right: 1.0rem !important;
}

/**************** LIST OF DOGS AT FOOTER - CURRENT DOG STYLING  **************************/

div.current-dog {
	background: var(--grey-medium);
}
div.current-dog.background-blue {
	background: var(--grey-medium);
}


/* Grey out option
.current-dog p, .current-dog h2  {
	color:  hsl(193, 0%, 65%);
}

.current-dog .relative.tags > div > p {
	background:  hsl(193, 0%, 65%);
}
.current-dog img {
	filter: saturate(0%) opacity(30%);
}
*/

/* Orange border option
div.current-dog {
	border: solid 3px var(--orange);
}
*/

/* Blue box option
div.current-dog {
	background: var(--blue);
}
.current-dog .pt-4   {
	border-top: solid 1px white;
}
.current-dog p, .current-dog h2  {
	color:  white;
}
*/

/**************** DONATE PAGE PAYPAL LOGO **************************/

.paypal-logo {
	display: block;
	margin-top: 1.0rem;
	width: 5rem;
}

/**************** TEXT PAGE COLUMNS **************************/

.col-span-all {
	column-span: all;
}

	@media (min-width: 1200px) {

		.columns-2 h1 {
			font-size: 3.6rem;
		}
		html:lang(th) .columns-2 h1 {
			font-size: 3.96rem;
		}
		.columns-2 h2 {
		}

		.columns-2 {
			column-count: 2;
			/*column-fill: auto;*/ /*Firefox doesn't like this */
		/*	column-rule: solid 1px rgba(4, 76, 96, 0.25);*/
			column-gap: 4.9rem;
		}

		.columns-2 p,
		.columns-2 ul,
		.columns-2 ol,
		.columns-2 .btn {
			font-size: 1.0rem;
		}
		html:lang(th) .columns-2 p,
		html:lang(th) .columns-2 p.columns-2 ul,
		html:lang(th) .columns-2 p.columns-2 ol,
		html:lang(th) .columns-2 p.columns-2 .btn {
			font-size: 1.1rem;
		}

		.columns-2 p,
		.columns-2 ul,
		.columns-2 ol {
			padding-right: 0rem;
		}

/*
		.columns-2 h2 {
			-webkit-column-break-before: always;
			-moz-column-break-before: always;
			column-break-before: always;
			-webkit-column-break-after: inherit;
			-moz-column-break-after: inherit;
			column-break-after: inherit;
		}
*/

	}


	@media (min-width: 768px) {

			.columns-3 {
				column-count: 2;
				/*column-fill: auto;*/ /*Firefox doesn't like this */
				/*column-rule: solid 1px rgba(4, 76, 96, 0.25);*/
				column-gap: 4.9rem;
			}

		}


	@media (min-width: 1200px) {

		.columns-3 h1 {
			font-size: 3.6rem;
		}
		html:lang(th) .columns-3 h1 {
			font-size: 3.96rem;
		}
		.columns-3 h2 {
/*			max-width: 24rem;*/
		}

		.columns-3 {
			column-count: 3;
			/*column-fill: auto;*/ /*Firefox doesn't like this */
			/*column-rule: solid 1px rgba(4, 76, 96, 0.25);*/
			column-gap: 4.9rem;
		}

		.columns-3 p,
		.columns-3 ol,
		.columns-3 ul,
		.columns-3 .btn {
			font-size: 1.0rem;
		}
		html:lang(th) .columns-3 p,
		html:lang(th) .columns-3 ol,
		html:lang(th) .columns-3 ul,
		html:lang(th) .columns-3 .btn {
			font-size: 1.1rem;
		}
		.columns-3 p,
		.columns-3 ul {
			padding-right: 0rem;
		}

	}

/* Avoid gaps at top of columns when using lists */
/* When used in conjunction with col-span-all, breaks on safari */
.columns-2 li, .columns-3 li, .columns-2 div, .columns-3 div {
	break-inside: avoid;
}


/**************** ADOPT THUMBNAIL OVERLAY TAGS **************************/
.relative {
	position: relative;
}
.relative.tags > div {
	position: absolute;
	left: 0;
	bottom: 0;
}
.relative.tags > div > p {
	display: inline-block;
	background: var(--blue);
	color: var(--white);
	padding: 0.3rem 0.5rem;
	line-height: 1.0rem;
	margin: 0;
	white-space: no-wrap;
	font-size: 0.7rem;
	letter-spacing: .03rem;
	font-weight: 700;
	text-transform: uppercase;
	margin-right: 0px;
	border-collapse: separate !important;
}
html:lang(th) .relative.tags > div > p {
	font-size: 0.77rem;
}
.relative.tags > div > p+p {
	border-left: 1px solid var(--grey-light);
}

/**************** BREADCRUMBS **************************/
.breadcrumb {
	background-color: inherit !important;
	text-transform: uppercase;
	font-size: 0.8rem;
	/*display: flex;
	justify-content: flex-end; align right */
	padding: 0;
}
html:lang(th) .breadcrumb {
	font-size: 0.88rem;
}
.breadcrumb li {
	padding-bottom: 0; /* remove padding below */
	list-style-type: none; /* remove bullets after changing their style below for normal use */
}
/* Bootstrap active class */
.breadcrumb .active {
	color: var(--blue);
}
/* Dividers */
.breadcrumb-item+.breadcrumb-item::before {
	color: var(--blue);
	content: "/";
}
/* CSS link order */
.breadcrumb a {
	color: var(--blue);
}
.breadcrumb a:visited {
	color: var(--blue);
}
.breadcrumb a:hover {
	color: var(--blue);
}
.breadcrumb a:active {
	color: var(--blue);
}

/**************** REMOVE GUTTERS FROM FOOTER GRID ON PHONES **************************/
@media (max-width: 576px) {
	.container-fluid {
		padding-left: 0;
		padding-right: 0;
	}
	.row {
		margin-left: 0;
		margin-right: 0;
	}
	.col-3, .col-4, .col-6, .col-9, .col-sm-6, .col-md-4, .col-md-6, .col-md-8, .col-md-12, .col-12, .col-lg-6 {
		padding-left: 0;
		padding-right: 0;
	}
	.col-6 {
		border-right: solid 1px white;
	}
}

/**************** LISTS / BULLETS **************************/
/* Move bullets to left */
ul, ol {
	padding-left: 1.2rem;
}
/* Now fully outset bullets on large screens */
@media (min-width: 992px) {
	ul, ol {
		list-style-position: outside;
		padding-left: 0rem;
	}
}
/* Increase space between lines*/
li {
	padding-bottom: 1rem;
}
li {
	list-style-type: square;
}

/**************** BANNER ON HOME PAGE **************************/

.banner	.relative {
	position: relative;
}

.banner .relative .lead+.lead {
	position: relative;
	padding-top: 5.5rem !important; /*4.0 perfect spacing */
}

.banner .absolute {
	position: absolute;
	font-size: 10rem;
}
html:lang(th) .banner .absolute {
	font-size: 11rem;
}

/****************************** ICOMOON ICONS ******************************/

/* My styling */
.icon-new-tab:before {
	font-size: 0.8rem;
	vertical-align: text-top;
}
.icon-play3:before {
	font-size: 1.2rem;
	/*position: absolute;
	bottom: 1rem;*/
	vertical-align: bottom;
}
.icon-pushpin:before {
	 float: right;
	font-size: 1.5rem;
}

/* Footer social icons */
.footer-social .icon-facebook2:before {
	font-size: 1.8rem;
}
.footer-social .icon-instagram:before {
	font-size: 1.8rem;
}
.footer-social a+ a {
	margin-left: 0.7rem;
}

/* Contact page social icons */
.contact-social .icon-line:before {
	font-size: 3.6rem;
}
.contact-social .icon-facebook2:before {
	font-size: 3.6rem;
}
.contact-social .icon-instagram:before {
	font-size: 3.6rem;
}
	/* Remove column right hand white border on phones */
	@media (max-width: 576px) {
		.contact-social .col-6 {
			border-right: none;
		}
	}
	/* Prevent social icons spreading out too far apart */
	@media (min-width: 576px) {
		.contact-social div {
			max-width: 15rem;
		}
	}
	/* Prevent social IDs colliding in Thai language */
	.contact-social .small {
		font-size: 80%;
	}

/* Link colors */
a .icon {
	color: var(--white);
}
a:visited .icon {
	color: var(--white);
}
a:hover .icon {
	color: var(--white);
}
a:active .icon {
	color: var(--white);
}

/*
.icon-paypal:before {
	font-size: 1.2rem;
	margin-left: 1rem
}
.icon-credit-card:before {
	font-size: 1.3rem;
	margin-left: 1rem
}
.icon-library:before {
	font-size: 1.1rem;
	margin-left: 1rem
}
.icon-qrcode:before {
	font-size: 1.1rem;
	margin-left: 1rem
}
.icon-eject:before {
	font-size: 1.8rem;
	position: absolute;
	bottom: 1rem;
	left: 46%;
}
*/




/* Contents of icon CSS file */

@font-face {
  font-family: 'icomoon';
  src:  url('icomoon/fonts/icomoon.eot?3ugpvu');
  src:  url('icomoon/fonts/icomoon.eot?3ugpvu#iefix') format('embedded-opentype'),
	url('icomoon/fonts/icomoon.ttf?3ugpvu') format('truetype'),
	url('icomoon/fonts/icomoon.woff?3ugpvu') format('woff'),
	url('icomoon/fonts/icomoon.svg?3ugpvu#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
.icon-line:before {
  content: "\e900";
  color: #00c300;
}
*/
.icon-pushpin:before {
  content: "\e946";
}
.icon-play3:before {
  content: "\ea1c";
}
.icon-new-tab:before {
  content: "\ea7e";
}
.icon-facebook2:before {
  content: "\ea91";
}
.icon-instagram:before {
  content: "\ea92";
}


/****************************** COLLAPSE / DONATE BOXES ******************************/
.collapse-header-orange {
	background: var(--orange);
	color: var(--white);
}
.collapse-header-orange:hover {
	background: var(--orange-light);
	color: var(--white);
}
.collapse-header-orange h3:hover, a.collapse-header-orange p:hover {
	color: var(--white) !important;
}
.collapse-header-blue {
	background: var(--blue);
	color: var(--white);
}
.collapse-header-blue:hover {
	background: var(--blue-light);
	color: var(--white);
}
.collapse-header-blue h3:hover, a.collapse-header-blue p:hover {
	color: var(--white) !important;
}

/****************************** LANGUAGE SELECTOR ******************************/
/* Thai font when english selected*/
.language-selector {
	font-family: 'Prompt', sans-serif;
}
.language-selector a.btn {
	font-size: 0.9rem !important;
/*	margin-top: 1rem !important;*/
}

/* CSS for single button option, phones */
@media (max-width: 991px) {
	.language-selector a.btn {
		width: 42px;
		height: 42px;
		padding: 0;
		text-align: center;
		line-height: 42px; /* Equal to div height */
	}
}

/* CSS for single button option, desktop */
@media (min-width: 992px) {
	.language-selector a.btn {
			padding-left: 0.30rem !important;
			padding-right: 0.25rem !important;
	}
	.language-selector a.btn small {
			padding-left: 0.22rem !important;
			padding-right: 0.27rem !important;
	}
}

@media (min-width: 992px) {
	.language-selector {
		position: absolute !important;	/* put at top right on desktop */
		top: 0;
		right: 0;
		margin-right: 15px;
		margin-top: 0 !important;
	}
	.navbar-nav > li {
		margin-top: 3rem; /* move other nav items down */
	}
	.nav-link {
		padding-left: 1rem !important; /* right align last nav item with page content */
		padding-right: 0 !important;
	}
}

/* Mobile [back when it was within the menu on phones, 2020]*/
@media (max-width: 992px) {
	.language-selector {
	/* 	margin-top: 2rem; Move it down beneath logo */
	/* 	margin-bottom: 1rem; Move it higher away from nav items */
	}
}

/* Mobile [now that it is outside of meny on phones, 2022]*/
/* Move left a bit, away from nav icon */
/* navbar-brand needs to have class of flex-grow-1, to avoid horiz centering */
@media (max-width: 992px) {
	.language-selector {
	margin-right: 1rem;
	}
}
@media (min-width: 992px) {
/* Align it on row of nav items on desktop */
	.language-selector {
		margin-top: .125rem;
		padding-left: 1rem;
	}
}

/****************************** HOME LOGO IN BANNER ******************************/
@media (min-width: 992px) and (max-width: 1199px) {
.home-logo {
	width: 240px !important;
	}
}

@media (min-width: 1200px) {
.home-logo {
	width: 280px !important;
	}
}

/****************************** FORMBUILDER ******************************/

/* Fieldset: remove padding */
#treatment-request .card-header,
#treatment-request .card-body {
	padding: 0;
}

/* Fieldset: remove background and border */
#treatment-request .card-header,
#treatment-request .card-body,
#treatment-request .Inputfield {
	background: none;
	border: none;
}

/* Fieldset: increase space below headings */
#treatment-request h5.card-header {
	margin-bottom: 1.5rem;
}

/* Fieldset: increase space above headings, but not for first */
#treatment-request div.fieldset + div.fieldset h5.card-header {
	margin-top: 2.25rem;
}

/* Labels: font weight */
#treatment-request .InputfieldHeader {
	font-weight: 400 !important;
}

/* Labels: add back padding above/below */
#treatment-request label {
	padding-top: calc(.375rem + 1px);
	padding-bottom: calc(.375rem + 1px);
	margin-bottom: 0;
	font-size: inherit;
	line-height: 1.5;
}

/* Labels: required asterisk color */
#treatment-request .InputfieldStateRequired > .InputfieldHeader:first-child:after {
	color: var(--orange);
	font-weight: 700;
}

/* File upload: "add file" button */
#treatment-request p.InputfieldFormBuilderFileAdd button {
	color: var(--blue);
	border-width: 1px;
	border-color: var(--blue);
	border-style: solid;
	background: var(--white); /* Otherwise too dark in Safari */
}

/* File upload: remove padding from whole area */
#treatment-request .InputfieldFormBuilderFileUpload fieldset {
	padding: 0;
}

/* File upload: remove padding below image sections and add padding between first image section and heading */
#treatment-request p.InputfieldFormBuilderFileAdd,
#treatment-request li.InputfieldFormBuilderFileUpload {
	padding-top: 1rem;
	padding-bottom: 0rem;
}

/* File upload: remove margin between 'choose file' and image below */
#treatment-request .InputfieldFormBuilderFilePreviewImageSet {
	margin-top: 0rem;
}

/* File upload: remove more margin between image sections */
#treatment-request .InputfieldForm fieldset, #treatment-request .InputfieldForm .InputfieldFieldset {
	margin-bottom: .5rem;
}

/* File upload: hide delete checkbox (which shows when form is submitted with error, and if then ticked and resubmitted the file is retained, but the notification email doesn't contain a link to it. Additionally, the checkbox status appears to save with the cookie (if 'save form state with cookie' is enabled))
IF ATTACHMENTS NOT GETTING THROUGH, ENSURE THIS HIDDEN CHECKBOX ISN'T ACTUALLY TICKED
*/
#treatment-request .InputfieldFormBuilderFileDelete {
	display: none !important;
}

/* File upload: fix filesize color */
#treatment-request .InputfieldFormBuilderFileSize {
	opacity: 1;
}

/* Radio buttons: make labels lowercase */
#treatment-request .InputfieldRadiosWidth label {
	text-transform: none;
}

/* Radio buttons: reduce gap beneath */
#treatment-request .InputfieldRadiosWidth li {
	padding-bottom: 0;
}

/* Placeholder text: make feinter */
#treatment-request input::placeholder {
  color: var(--blue-light);
}

/* Alert: move lower */
#treatment-request .alert-success {
	margin-top: 1rem;
}

/* Full width text fields: make narrower on large screens */
@media (min-width: 768px) {
#treatment-request #wrap_Inputfield_brief_history_of_patient,
#treatment-request #wrap_Inputfield_prove_you_are_human,
#treatment-request #wrap_Inputfield_prove_you_are_human	{
		width: 50% !important;
	}
}

/* Notes text: make blue instead of grey */
.text-muted {
	color: var(--blue) !important;
}

/* คลาสสำหรับซ่อนข้อความ แต่ Google ยังอ่านเจอ (SEO Friendly) */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}


/* Nicer looking form, but need to give indication of where to click to type

#treatment-request .card-body {
	background-color: var(--white);
}


#treatment-request input, textarea, select {
	border: none !important;
}

#treatment-request label {
	padding-left: 1.75rem;
}

#treatment-request .InputfieldContent {
	padding-left: 1rem;
}

#treatment-request .form-group {
	border-top: solid 1px #ddd;
	padding-top: 1rem;
	padding-bottom: 0rem;
	background-color: var(--white);
	margin-bottom: 0;
}

#treatment-request .form-group:nth-of-type(odd) {
	border-right: solid 1px #ddd;
}

#treatment-request li {
	padding-bottom: 1rem;
}

#treatment-request ul.InputfieldRadiosWidth li {
	padding-bottom: 0;
}
*/