/* Custom CSS */

body {
	font-size: 14px;
	line-height: 1.7;
	font-weight: $font-light;
}

p:empty {
	display: none;
}

i,
svg,
.svg-inline--fa {
	vertical-align: middle;
	margin-right: 5px;

	&.circle {
		padding: 4px;
	}
}

a,
button,
.button {
	.bg-gold,
	&.bg-gold {
		&:hover {
			background-color: $theme-color-dark-gold !important;
			color: white;
		}
	}
	.bg-white,
	&.bg-white {
		&:hover {
			background-color: $theme-color-light-grey !important;
		}
	}
}

input,
textarea,
select,
.form-control,
.form-check-input[type=checkbox] {
	border-radius: 0;
	color: $theme-color-dark-grey;
}

.form-check-input {
	margin-top: 5px;
}

nav,
.navbar-nav {
	position: relative;
	transition: .2s;
	-webkit-transition: .2s;

	.nav-link {
		position: relative;
		padding: 8px 14px;
		margin-bottom: 10px;
		text-transform: uppercase;
		font-weight: $font-regular;
		border-radius: $radius / 2;
		color: $theme-color-dark;

		&:hover {
			background-color: rgba(0,0,0,.1);
			color: $theme-color-dark;
		}
	}
}

.navbar-brand img {
	max-width: 150px;
}

footer {
	position: relative;
	z-index: 1;

	.menu-title {
		display: inline-block;
		font-size: 1.4em;
		padding: 5px 2px 5px 0;
		text-transform: capitalize;
		border-bottom: 2px solid $theme-color-gold;
	}

	nav,
	.navbar-nav {
		.nav-link {
			margin-bottom: 0;
			color: white;
			width: calc(100% + 14px);
			left: -14px;

			&:hover {
				background-color: rgba(0,0,0,.3);
				color: white;
			}
		}
	}

	p .svg-inline--fa {
		font-size: .7em;
	}
}

.panel-layout {
	.panel-has-style:last-child,
	.panel-grid:last-child {
		padding-bottom: 60px;
	}

	.so-panel {
		margin: 0 !important;
	}

	.clean-cta {
		padding: 30px 0 50px;

		.sow-cta-base {
			border: 0;
			background: none;
			.sow-cta-title {
				margin-bottom: 25px;
			}
		}
		.sow-cta-wrapper {
			display: flex;
			flex-direction: column;
			text-align: center;
		}
	}
}

div.wpcf7 .ajax-loader,
.wpcf7-spinner {
	display: none;
}

.wpcf7-not-valid-tip {
	background-color: rgba(255,255,255,.5);
	font-size: 12px;
	padding: 1px 5px;
	color: red;
	border-radius: 3px;
	display: inline-block;
	margin-top: 3px;
	line-height: 1.1;
	position: absolute;
	z-index: 1;
	display: none;
}

.wpcf7 form {
	.wpcf7-response-output {
		display: none;
		background-color: $theme-color-white;
		border: 1px solid $theme-color-gold;
		max-width: 300px;
		margin: 3px auto;
		padding: 1px 8px 4px;
		font-size: 13px;
		line-height: 1.3;
	}
	&.invalid .wpcf7-response-output {
		display: block;
		color: red;
	}
	&.sent .wpcf7-response-output {
		display: block;
	}
}

.error {
	input,
	select {
		border-color: red !important;
		color: red !important;
		&::placeholder {
			color: red !important;
		}
	}
	label {
		color: red !important;
	}
	&:after {
		content: '';
		display: block;
		font-size: 10px;
		text-align: left;
		color: red;
		border-top-color: red !important;
	}
}
.error-empty:after {content: 'This field is required.'}
.error-email:after {content: 'Not a valid email.'}
.error-phone:after {content: 'Phone length must be within 8-15 characters.'}
.error-empty.error-th:after {content: 'ต้องระบุฟิลด์นี้'}
.error-email.error-th:after {content: 'ไม่ใช่ที่อยู่อีเมลที่ถูกต้อง'}
.error-phone.error-th:after {content: 'ความยาวของโทรศัพท์ต้องไม่เกิน 8-15 ตัวอักษร'}
.error-empty.error-zh:after {content: '該字段為必填項'}
.error-email.error-zh:after {content: '不是有效的電子郵件地址'}
.error-phone.error-zh:after {content: '電話號碼長度必須在 8-15 個字符內'}

.contact-form {
	.select-arrow {
		top: 29px;
	}
	input[type="submit"] {
		margin: 0 !important;
	}
	& ~ .wpcf7-response-output {
		text-align: center;
		margin: 3px auto !important;
	}
}

.fixed-top {
	box-shadow: 0 0 10px rgba(0,0,0,.2);
	// & ~ .page {
	// 	margin-top: 112px;
	// }
}

.btn {
	border-radius: 0;
	padding-left: 1em;
	padding-right: 1em;
}

.background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0,0,0,.5);
	transition: .2s;
	-webkit-transition: .2s;
}

.btn-image {
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

.close {
	background: $theme-color-gold;
	border-radius: $radius / 2;
	cursor: pointer;
	color: white;
	text-decoration: none;
	border: 0;
	line-height: 1;
	width: 30px;
	height: 30px;

	&:hover {
		background: $theme-color-dark-gold;
	}
}

.menu-title {
	padding: 6px 14px;
	color: $theme-color-gold;
	font-family: $text-font;
	font-size: 1.1em;
	font-weight: $font-bold;
}

.navbar-light {
	.navbar-toggler {
		border: 0;
		position: absolute;
		right: 45px;
		padding: 0;
	}
	.navbar-toggler-icon {
		background-image: url('../img/icons/menu.png');
	}
}

.language-country-selectors {
	position: absolute;
	right: 20px;
	width: 30px;
	height: 30px;
	margin-bottom: 5px;
	background-image: url('../img/icons/globe.png');
	background-size: 66%;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
}

.language-selector {
	position: absolute;
	right: 0px;
	top: 35px;
	z-index: 1;
	padding: 5px;
	background-color: $theme-color-white;
	border: 1px solid $theme-color-gold;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	text-align: center;
	justify-content: center;
	display: none;

	& > * {
		padding: 10px;
		text-decoration: none;
		color: $theme-color-dark;
		text-transform: uppercase;
		font-weight: $font-bold;
		min-width: 150px;
		display: block;
	}
}

.banner {
	.caption {
		margin: 60px 40px;
		max-width: 400px;
	}

	h1, h2, h3, h4, h5, h6 {
		margin-bottom: 20px;
	}

	p, h1, h2, h3, h4, h5, h6, button, a {
		text-shadow: 0 0 1px white;
	}
	button {
		box-shadow: 1px 1px 1px rgba(0,0,0,.5);
	}

	&.text-white {
		p, h1, h2, h3, h4, h5, h6 {
			text-shadow: 0 0 10px black;
		}
	}

	&.fixed {
		display: flex;
		align-items: center;
		min-height: 400px;
		height: 50vh;

		img {
			position: fixed;
			top: 50px;
			width: 100%;
			height: auto;
			z-index: -1;
			left: 50%;
			transform: translateX(-50%);
			-webkit-transform: translateX(-50%);
			animation: .5s ease-in 0s both fadeIn;
			-webkit-animation: .5s ease-in 0s both fadeIn;
		}

		& ~ .content {
			box-shadow: 0 0 10px rgba(0,0,0,.2);
		}
	}

	&.home-banner {
		height: 480px;

		.container {
			position: relative;
			top: 500px;
			max-width: 1320px;
		}
		// img {
		// 	height: 800px;
		// 	left: 30%;
		// 	top: -100px;
		// }
		.caption {
			margin: auto;
		}
		h1 {
			font-family: $text-font, sans-serif;
		}
	}

	&.page-banner {
		align-items: flex-end;
		overflow: hidden;
		height: 480px;

		.container {
			padding: 0;
			width: 100%;
			max-width: 1120px;
		}

		.caption {
			margin: 0 0 40px;
			text-align: center;
			border-bottom: 5px solid $theme-color-gold;
			max-width: 100%;

			&:before {
				content: '';
				display: block;
				position: absolute;
				left: 0;
				margin-top: -20px;
				width: 100vw;
				height: 130px;
				background: linear-gradient(to right, rgba(255,255,255,0.3), rgba(255,255,255,0) 50%);
				background: -webkit-linear-gradient(to right, rgba(255,255,255,0.3), rgba(255,255,255,0) 50%);
			}
		}

		h1 {
			margin-bottom: 10px;
			font-family: $text-font, sans-serif;
		}

		.subtitle {
			position: relative;
			display: none;
			padding: 0 30px;
			left: -30px;

			&:before,
			&:after {
				content: '';
				display: block;
				position: absolute;
				top: 50%;
				width: 100vw;
				border-bottom: 3px solid $theme-color-gold;
				box-shadow: 0 1px 1px rgba(0,0,0,.3);
			}

			&:before {
				left: -100vw;
			}

			&:after {
				right: -100vw;
			}

			&.empty {
				padding: 0;
				width: 0;
			}
		}
	}

	&.aboutus-banner {
		img {
			top: 0;
		}
	}

	&.contact-banner {
		height: 300px;
		min-height: 300px;
	}
}

.content {
	img {
		height: auto;
		max-width: 100%;
	}
}

.peerage-title .widget-title {
	font-size: 1.5em;
	padding: 10px 40px 6px;
	margin-bottom: 20px;
	color: $theme-color-gold;
	background-color: $theme-color-dark;
	width: 100%;
}

.peerage-content .textwidget {
	padding-left: 40px;
}

.icon-md img {
	height: 40px;
	margin: 20px auto;
}

.ol-lg {
	font-size: 2.4em;
	vertical-align: middle;
	color: $theme-color-gold;
	font-family: $title-font;
	margin-right: 6px;
}

.sow-image-container .so-widget-image {
	display: block;
	min-width: 100%;
	max-width: 100%;
	height: auto;
}

.overlay-img-text {
	position: relative;

	.widget-title {
		position: absolute;
		text-shadow: 0 0 5px black;
	}
	img {
		transition: .2s;
		-webkit-transition: .2s;
	}

	& > div,
	& > a {
		position: relative;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.img-container,
	.sow-image-container {
		overflow: hidden;
		transition: .2s;
		-webkit-transition: .2s;
		text-decoration: none;
		outline: none;
		user-select: none;
		-webkit-user-select: none;
		color: $theme-color-white;

		&:hover {
			opacity: .9;

			img {
				transform: scale(1.1);
				transform: -webkit-scale(1.1);
			}
		}
	}
}

.form-gold {
	.form-group {
		color: $theme-color-gold;
	}
	input,
	textarea,
	select,
	.form-check-input {
		border-color: $theme-color-gold;
	}
}

.select-arrow {
	position: absolute;
	display: block;
	top: 0;
	right: 0;
	width: 10px;
	height: 10px;
	margin: 11px 16px;
	border-right: 1px solid;
	border-bottom: 1px solid;
	transform: rotate(45deg);
	transform: -webkit-rotate(45deg);
}

.underline-input {
	background: none;
}

.bricks {
	text-align: center;
	color: $theme-color-gold2;

	& > * {
		display: inline-block;
		margin: 6px;
		border: 1px solid $theme-color-gold2;
		padding: 6px;
		width: 140px;
	}
}

.cta {
	display: flex;
	flex-direction: column;
	text-align: center;
	padding: 30px 0 40px;
	box-shadow: 0 0 10px rgba(0,0,0,.2);
	
	.cta-title {
		margin-bottom: 25px;
	}

	&.bg-white {
		box-shadow: none;
	}
	.btn {
		text-transform: uppercase;
		font-size: 20px;
		font-weight: $font-light;
	}
}

.newsletter {
	display: flex;
	flex-direction: column;
	border: 3px solid $theme-color-gold;
	text-align: center;

	.newsletter-title {
		display: inline-block;
		background-color: $theme-color-gold;
		color: white;
		padding: 8px 16px;
		font-size: 18px;
		font-weight: $font-light;
		margin: auto;
		text-transform: uppercase;
	}
	.newsletter-content {
		font-family: $title-font;
		font-size: 20px;
		font-weight: $font-bold;
		color: $theme-color-gold;
		margin: 25px 0 0;
	}

	input {
		border: 0;
		border-bottom: 2px solid $theme-color-gold;
	}
}

.socmed {
	a {
		text-decoration: none;
	}
	i,
	svg {
		width: 24px;
		height: 24px;
		text-align: center;
		margin: 0 10px 20px 0;
	}
}

.form-banner {
	max-width: 300px;
	margin-left: auto;
	margin-right: auto;
	animation: .5s ease-in .2s both fadeIn;
	-webkit-animation: .5s ease-in .2s both fadeIn;

	input[type="email"],
	input[type="number"],
	input[type="text"],
	select,
	textarea {
		background: none;
		border: 0;
		border-bottom: 1px solid $theme-color-grey;
		margin-top: 15px;

		&:focus {
			background: none;
		}
	}
	.select-arrow {
		top: 10px;
	}
	.form-check-input[type="checkbox"] {
		width: 20px;
		height: 20px;
		border: 1.5px solid $theme-color-gold;
		margin-right: 8px;

		&:not(:checked) {
			background: none;
		}
	}
	.form-check-label {
		vertical-align: middle;
		text-shadow: 1px 1px 1px $theme-color-dark;
	}
	input[type="submit"] {
		text-transform: uppercase;
		width: 100%;
		font-size: 19px;
		font-weight: 300;
		padding: 10px;
	}
	.small2 {
		font-size: 16px;
	}
}

.logos {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	margin: auto;

	img {
		width: auto;
		max-width: 80px;
		max-height: 60px;
		margin: 15px 10px;
	}
}

.full-image,
.full-image2 {
	display: flex;
	height: 100%;
	overflow: hidden;
	align-items: center;
	justify-content: center;
	flex: 1;
	position: relative;

	&.center {
		overflow: hidden;
		align-items: center;
		justify-content: center;
	}
	img {
		min-height: 100%;
		height: 100%;
		min-width: 100%;
		width: initial;
		max-width: initial;
	}
}

.news {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	margin: .5rem 0;
	padding: .4rem 0;
	width: 100%;
	line-height: 1.5;

	img,
	.full-image {
		max-width: 120px;
		border-radius: 20px;
		height: auto;
	}
	.news-content {
		margin-bottom: 10px;
		padding-right: 10px;
	}
	.news-title {
		display: block;
		color: $theme-color-dark;
		text-decoration: underline;
		margin-bottom: 8px;
	}
	.news-link {
		color: $theme-color-gold;
		text-decoration: none;
		word-break: break-all;
		font-size: 90%;
		display: inline-block;
	}
}

// theme2 can be removed & styles inside merged to respective elements once approved (must for all pages changes) to tidy up css.
.theme2 {
	overflow: hidden;
	font-size: 16px;
	font-weight: $font-regular;

	h3, .h3 {
		margin-bottom: 1.5rem;
	}
	p {
		margin-bottom: 1.5rem;
		font-size: 16px;
	}
	.btn,
	input[type="submit"] {
		text-transform: uppercase;
		font-size: 18px;
		padding: .6rem 1.2rem;
		margin-right: 20px;

		&:last-child {
			margin-right: 0;
		}
	}
	.container {
		max-width: 1320px;

		&.wide {
			max-width: 1600px;
		}
	}
	.icon-md img {
		height: 40px;
		margin: 10px auto;
	}
	.container,
	[class*='col-'] {
		padding: 0;
	}
	.row {
		margin: 0;
	}
	.card {
		display: flex;
		flex-direction: column;
		height: 100%;
		border: 0;
		border-radius: 0;

		h3 {
			font-size: 24px;
		}

		.card-content {
			display: flex;
			flex-direction: column;
			flex: 1;
			padding: 2.2rem 1.6rem;
			overflow: hidden;
		}
		.card-title {
			font-size: 21px;
			margin-bottom: 1.2rem;
			text-align: center;
		}
		.card-image {
			border-radius: 12px;
			margin-bottom: 1rem;
			flex: none;
			img {
				position: relative;
				border-radius: 12px;
				min-width: auto;
				width: 100%;
				height: auto;
				min-height: 100%;
			}
		}
		.full-image2 {
			flex: none;
			height: auto;

			img {
				height: initial;
			}
		}
	}
	&.home {
		padding-top: 620px;
	}
	.services {
		justify-content: center;
		font-weight: $font-regular;
	}
	.membership {
		font-weight: $font-regular;

		ul {
			padding-left: 1rem;
		}
		.widget-title {
			background-color: $theme-color-gold;
			margin-left: auto;
			margin-right: auto;
			max-width: 580px;
			padding: .8rem 2rem;
			margin-bottom: 1.5rem;
			font-size: 26px;
			color: $theme-color-white;
		}
		.box {
			max-width: 1000px;
			margin: auto;
		}
		.left {
			border: 2px solid $theme-color-gold;
			border-radius: 20px;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 30px;
		}
		.right {
			border-radius: 20px;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		ul {
			text-align: left;
			text-align-last: left;
			flex: 1;
		}
	}
	.ol-lg {
		font-family: $title-font;
		font-size: 70px;
		font-weight: $font-bold;
		color: $theme-color-white;
		margin-right: 14px;
	}
	.contact-form {
		input[type="email"],
		input[type="number"],
		input[type="text"],
		select {
			border-radius: 12px;
			padding: 10px 16px;
			// margin-bottom: 10px;
		}
		input[type="checkbox"] {
			width: 20px;
			height: 20px;
			background: none;
			border: 1.5px solid $theme-color-gold;
			margin-right: 8px;
			vertical-align: middle;
		}
		.form-group {
			margin-top: 10px;
		}
		.wpcf7-list-item-label {
			vertical-align: middle;
		}
		.form-check {
			padding-left: 0;
		}
		input[type="submit"] {
			text-transform: uppercase;
			font-size: 19px;
			font-weight: 300;
			padding: 10px 60px;
		}
		::placeholder {
			color: $theme-color-grey;
		}
		.error:after {
			font-size: 12px;
		}
	}
	&.footer {
		.container {
			position: relative;
		}
		.btn {
			font-weight: $font-light;
		}
		nav,
		.navbar-nav {
			.nav-link {
				width: 100%;
				left: auto;
			}
		}
		.menu-title {
			font-family: $text-font, sans-serif;
			font-size: 20px;
			font-weight: $font-regular;
			color: $theme-color-white;
			border-bottom: 1px solid $theme-color-white;
			padding: 5px 0;
		}
		.newsletter {
			border: 1px solid $theme-color-white;

			.newsletter-title {
				position: relative;
				top: -18px;
				font-weight: $font-light;
			}
			.newsletter-content {
				font-family: $text-font, sans-serif;
				font-weight: $font-light;
				font-size: 24px;
				line-height: 1.2;
				color: $theme-color-white;
				margin: 0;
			}
			input[type="email"] {
				border-bottom: 1px solid $theme-color-white;

				&::placeholder {
					color: $theme-color-white;
				}
			}
		}
		.footer-address {
			display: flex;
			align-items: center;

			p {
				font-size: 12px;
				font-weight: $font-light;
			}
			a {
				position: absolute;
				bottom: -120px;
				right: 0px;
				margin-right: 10px;
			}
		}
	}
}

/* Animations */

@keyframes fadeIn {
   0% {opacity: 0;}
   100% {opacity: 1;}
}

/* Ids */

#wpadminbar { display:none; }
#header-navbar {
	position: absolute;
	right: 15px;
	top: 5px;
	min-width: 250px;
	z-index: 2;

	.background {
		z-index: 0;
	}
	.navbar-collapse {
		position: relative;
		background-color: white;
		border: 2px solid $theme-color-gold;
		padding: 15px;
		border-radius: $radius;
		z-index: 1;
	}
	.close {
		position: absolute;
		top: 0;
		right: 0;
		margin: 15px;
	}
}

#why-peerage {
	.full-image2 {
		img {
			left: -10%;
			transform: none;
			-webkit-transform: none;
		}
	}
}

#membership {
	.panel-grid-cell > div {
		display: flex;
		flex-direction: column;

		.so-panel:nth-child(2) {
			flex: 1;
		}
	}
}

#success-stories,
#reviews {
	max-width: 1120px;
	.card {
		flex: none;
		max-width: 350px;
		margin-left: auto;
		margin-right: auto;
	}
	.news {
		.news-link {
			color: $theme-color-grey;
		}
		img,
		.full-image {
			min-width: 140px;
		}
	}
}

#countries {
	max-width: 1000px;
}

.size-full {
	max-width: 100%;
	height: auto;
}


/* Importants */

.flex-1 {
	flex: 1;
}
.btn-dark-2 {
	background-color: $theme-color-dark !important;
	border: 2px solid $theme-color-gold !important;
	color: $theme-color-gold !important;
	cursor: pointer;

	&:hover {
		background-color: black !important;
	}
}
.btn-gold-2 {
	background-color: $theme-color-gold !important;
	border: 2px solid $theme-color-dark !important;
	color: $theme-color-dark !important;
	cursor: pointer;

	&:hover {
		background-color: $theme-color-dark-gold !important;
	}
}
.bg-wall {
	background-image: url('../img/backgrounds/back-white.webp') !important;
	background-size: cover;
	background-position: center;
	background-color: $theme-color-light-grey;
	color: $theme-color-dark;
}
.bg-white,
.bg-theme-white {
	background-color: $theme-color-white !important;
	color: $theme-color-dark;
}
.bg-gold,
.bg-theme-gold {
	background-color: $theme-color-gold !important;
	color: white;
}
hr.bg-gold {
	background-color: $theme-color-gold !important;
	height: 1.5px;
	opacity: 1;
}
.bg-gold2,
.bg-gold2-right,
.bg-theme-gold2 {
	background-color: $theme-color-gold2 !important;
}
.bg-dark-gold,
.bg-theme-dark-gold {
	background-color: $theme-color-dark-gold !important;
	color: white;
}
.bg-dark,
.bg-theme-dark {
	background-color: $theme-color-dark !important;
	color: white;
}
.bg-grey,
.bgg-theme-grey {
	background-color: $theme-color-grey !important;
	color: white;
}
.bg-grey2,
.bgg-theme-grey2 {
	background-color: $theme-color-grey2 !important;
	color: white;
}
.border-gold {
	border-color: $theme-color-gold !important;
}
.color-gold,
.color-theme-gold {
	color: $theme-color-gold !important;
}
.color-dark-gold,
.color-theme-dark-gold {
	color: $theme-color-dark-gold !important;
}
.color-dark,
.color-theme-dark {
	color: $theme-color-dark !important;	
}
.color-grey,
.color-theme-grey {
	color: $theme-color-grey !important;
}
.circle {
	border-radius: 50% !important;
}
.text-center {
	text-align-last: center !important;
}
.text-left,
.text-start {
	text-align-last: left !important;
}
.text-justify {
	text-align: justify;
}
.text-justify-center {
	text-align: justify;
	text-align-last: center;
}
.no-space .panel-grid-cell {
	flex: 1;
	margin: 0 !important;
}
.space-xs .panel-grid-cell {
	flex: 1;
	margin-right: 0.25rem;
}
.space-sm .panel-grid-cell {
	flex: 1;
	margin-right: 0.5rem;
}
.space-md .panel-grid-cell {
	flex: 1;
	margin-right: 1rem;
}
.space-lg .panel-grid-cell {
	flex: 1;
	margin-right: 1.5rem;
}
.wpcf7 form .wpcf7-response-output{color:black !important;border: none !important;}