@import "https://fonts.googleapis.com/css?family=Raleway:100,300,600";
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Scada:wght@400;700&display=swap');

input {
	height: 33px!important
}

#nav {
	padding-top:0;
}
#nav ul li {
	padding: 2% 0;
}
#nav ul li:hover {
	background-color: #1e1e1e;
}
#logo {
	top:-8px;
}
#menus {
	margin-top:-42px;
}

.theme {
	font-family: 'Roboto', sans-serif;
	color: #222
}

.theme .sections {
	text-align:center;
	justify-content:center;
	padding:32px 16px 42px;

}

.theme .sections p {
	text-align:left;
}

.theme h1 {
	font-size: 60px;
	font-weight: 300;
	letter-spacing: -1px;
	line-height: 1;
	margin: 10px 0 10px;
	color: #eee
}

.theme .sections h2 {
	font-family: 'Arial Black', sans-serif;
	font-size: 2.75em;
	font-weight: 800;
	margin-bottom: 1em;
	line-height: 1.2em;
	display: block;
}

.theme .sections .sli h2 {
	font-family: 'Cinzel', sans-serif;
	color: #a72525;
	font-size: 2em;
}

.theme .sections .sli h3 {
	font-family: 'Cinzel', sans-serif;
	font-weight: 700;
	font-size: 1.5em;
}

.theme .sections .sli p {
	text-align: justify;
}

.theme .sections h3 {
	font-family: 'Scada', sans-serif;
	font-size: 1.5em;
}

.theme h3 {
	font-size: 1.125em;
	font-weight: 200;
	margin-bottom: 5px;
	line-height: 1.2em
}

.theme .medium {
	font-size: 1.1em
}

.theme .theme-byline {
	color: #ddd;
	font-size: 20px;
	font-weight: 300;
	line-height: 1.25;
	margin-bottom: 40px
}

.theme p {
	font-size: 15px;
	line-height: 1.5;
	font-weight: 400;
	color: #111;
}

.theme img {
	margin: 5px auto
}

.theme .span3 .images {
	position: relative;
	width: 100%
}

.theme .span3 .sidebartv {
	margin-top: -11px;
	padding-top: 10px
}

.theme .bottom-features {
	padding-top: 15px
}


.white {
	background-color: #fff
}

.alphawhite {
	background: rgba(255, 255, 255, 1);
	border-radius: 8px 24px 8px 36px;
}

.flex article.alphawhite header p {
	text-align:center;
	margin-bottom:0px;
	font-size:20px!important;
	padding-top: 12px;
}

.flex article.alphawhite p {
	font-size: 14px;
	font-weight: 400;
	padding: 0 12px 8px;
}

.alphawhite dd p {
	color: #000;
	font-weight: 400;
}

.lightgray {
	background-color: #f7f7f7;
	border-top:1px solid #e8e8e8;
}

.gray {
	background-color: #e9e9e9;
	border-top:1px solid #e8e8e8;
}

.maroon {
	background: url(../images/texture-overlay.png);
	opacity: 0.9;
	background-color: #850b0b;
}

.maroon h2 {
	color: #fff;
}

.family {
	background: linear-gradient( rgba(0,0,0,0.2), rgba(0,0,0,0.2) ), url(../images/thai-family-law-section.jpg);
	background-size: cover;
	background-repeat: no-repeat;
}

.white-sep {
	background-color: #fff;
	border-top:1px solid #e8e8e8
}

.region .flex .gmbadd {
	font-size:15px;
	padding:15px 8px;
}

.region .flex .phone {
	font-size: 1.5em!important;
	padding: 8px;
}

.region .flex article a{
	background:none;
	text-decoration:none;
	color: #eee;
	font-weight:600;
}

@media(max-width:767px) {
	.theme .container {
		padding-left: 10px;
		padding-right: 10px
	}
}

@media(min-width:321px) and (max-width:767px) {
	body {
		overflow-x: hidden
	}
}

#cssmenu {
	background: rgba(228, 222, 196, 0.7);
	border: 1px solid #d1cbb3;
	list-style: none;
	margin-bottom: 20px;
	width: 100%;
	position:relative;
}

#cssmenu h3 {
	padding: 0 20px;
	font-size: 20px
}

#cssmenu ul {
	margin-top: 5px;
	margin-left: 0;
	border-top: 1px solid #fff
}

#cssmenu li {
	margin-left: 0;
	padding: 0;
	list-style: none
}

#cssmenu ul li,
#cssmenu ul ul li {
	margin: 0
}

#cssmenu .menu>li>a {
	height: 1.7em!important;
	line-height: 1.6em!important
}

#cssmenu a {
	background: none;
	border-bottom: 1px solid #fff;
	display: block;
	margin: 0;
	padding: 8px 20px;
	text-decoration: none;
	font-weight: normal
}

#cssmenu a:hover {
	background: url('../images/hover.gif') left center no-repeat;
	color: #333;
	padding-bottom: 8px;
	background-color: rgba(199, 199, 199, 0.5)
}


@media(width:320px) {

	.theme p {
		min-height: 80px;
		font-size: 15px
	}

	body {
		overflow-x: hidden
	}
	#cssmenu {
		width: 320px;
		overflow: hidden
	}
}



	.container9 article, .container9 footer, .container9 header, .container9 section {
		display: block;
	}
	
	.container9 .civil {
		 background:url(../../home/images/thailand-civil-and-criminal-law.jpg);
		 background-size:cover
	}

	.container9 .flex-2 footer {
		display: flex;
		justify-content:center;
	}

	.container9 header {
		height:auto!important
	}

	.container9 {
		color: #9a9a9a;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 13pt;
		font-weight: 300;
		line-height: 1.65;
	}

		@media screen and (max-width: 1680px) {

			.container9 {
				font-size: 11pt;
			}

		}

		@media screen and (max-width: 1280px) {

			.container9 {
				font-size: 11pt;
			}

		}

		@media screen and (max-width: 980px) {

			.container9 {
				font-size: 12pt;
			}

		}

		@media screen and (max-width: 736px) {

			.container9 {
				font-size: 12pt;
			}

		}

		@media screen and (max-width: 480px) {

			.container9 {
				font-size: 12pt;
			}

		}

	.container9 a {
		color: #a72525;
	}

		.container9 a:hover {
			text-decoration: underline;
			color: #bd2525;
		}
	.container9 dd p a{
		font-weight: 400;
	}
	
	.container9 p {
		margin: 0 0 2em 0;
	}

	.container9 h3{
		color: #a72525;
		font-weight: 300;
		line-height: 1.4;
		margin: 0 0 1em 0;
	}

	.container9 h3 {
		font-size: 1.35em;
	}


	.container9 .inner {
		max-width: 75em;
		margin: 0 auto;
	}

		@media screen and (max-width: 1280px) {

			.container9 .inner {
				max-width: 90%;
			}
			.container9 .contact .map {
				position: relative;
			}
			.container9 .contact .map .gmap {
				position: absolute;
				left: 50%;
				top: 50%;
				-webkit-transform: translateY(-50%) translateX(-50%);
				height: 97%;
				width: 100%;
			}

		}

		@media screen and (max-width: 480px) {

			.container9 .inner {
				max-width: 85%;
			}

		}

/* Section/Article */
	.container9 section.special, .container9 article.special {
		text-align: center;
	}

		.container9 section.special article, .container9 article.special article {
			text-align: left;
		}

	.container9 section.wrapper, .container9 article.wrapper {
		padding: 0.5em 0;
	}

		.container9 section.wrapper header, .container9 article.wrapper header {
			margin-bottom: 4em;
		}

			.container9 section.wrapper header h2, .container9 article.wrapper header h2 {
				font-size: 2.5em;
				margin: 0 0 .5em 0;
			}

			.container9 section.wrapper header p, .container9 article.wrapper header p {
				font-size: 1em;
			}

		.container9 section.wrapper article header, .container9 article.wrapper article header {
			margin: 0;
		}

		.container9 section.wrapper.style1, .container9 article.wrapper.style1 {
			background: #5385c1;
			color: #bacee6;
		}



		@media screen and (max-width: 980px) {

			.container9 section.wrapper, .container9 article.wrapper {
				padding: 0;
			}
			.container9 .contact .map .gmap {
				position: relative;
				width: 100%;
				height: auto;
			}

		}

		@media screen and (max-width: 736px) {
			
			.region .flex .gmbadd img {
				display:none;
			}

			.container9 section.wrapper header, .container9 article.wrapper header {
				margin-bottom: 2em;
			}

				.container9 section.wrapper header h2, .container9 article.wrapper header h2 {
					font-size: 2em;
				}

				.container9 section.wrapper header p, .container9 article.wrapper header p {
					font-size: .9em;
				}

		}

		@media screen and (max-width: 480px) {

			.container9 section.wrapper, .container9 article.wrapper {
				text-align: center;
			}

				.container9 section.wrapper article, .container9 article.wrapper article {
					text-align: center;
				}

		}

	.container9 header h3 {font-weight: 600}
	.container9 header h3 + p {
		font-size: 1.1em;
		margin-top: -0.8em;
	}

dl {
		margin: 0 0 2em 0;
	}

		dl dt {
			display: block;
			font-weight: 600;
			margin: 0 0 1em 0;
			font-size: 18px;
			color: #111;
		}

		dl dd {
			margin-left: 2em;
		}

/* Image */

	.image {
		border-radius: 0;
		border: 0;
		display: inline-block;
		position: relative;
	}

		.image img {
			border-radius: 0;
			display: block;
		}

		.image.fit {
			display: block;
			margin: 0 0 2em 0;
			width: 100%;
		}

			.image.fit img {
				width: 100%;
			}


/* Flex */

	.container9 .flex {
		display: -ms-flexbox;
		-ms-flex-wrap: wrap;
		-ms-flex-pack: justify;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-moz-justify-content: space-between;
		-webkit-justify-content: space-between;
		-ms-justify-content: space-between;
		justify-content: space-between;
	}

	.container9 .marg-bottom {
		margin-bottom: 40px!important;
	}
	.container9 .flex .fambox {
		border:1px solid #dfdfdf;
	}

	.container9 .flex .corpbox {
		padding: 0 0 16px;
		border:1px solid #a8a8a8;
		border-top: 5px solid #850b0b;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		position: relative;
	}
	.container9 .flex .corpbox header,.container9 .flex .propertybox header  {
		background: #850b0b;
	}
	.container9 .flex .corpbox p {
		padding: 0 24px 48px;
		text-align: justify;
	}
	.container9 .flex .corpbox footer {
		position: absolute;
		bottom: 8px;
		left: 35%;
	}
	.container9 .flex .propertybox {
		border:1px solid #a8a8a8;
		border-top: 5px solid #850b0b;
		padding:0px 0px 20px;
		background:#fff;
		box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
	}
	.container9 .flex .propertybox footer {
		margin-top: 60px;
	}
	.container9 .flex .propertybox.propimg header h3 a {
		color: #fff;
		padding: 0 16px;
	}
	.container9 .flex .propertybox.propimg h3 a span {
		display: block;
		font-size: 18px;
	}
	.container9 .flex .propertybox.propimg h3 a {
		color: #850b0b;
	}
	.container9 .flex .propertybox.propimg h3 {
		margin-bottom: 0;
	}
	.container9 .flex .propertybox.propimg a img {
		margin-top: 0;
	}
	.container9 .flex .propertybox p {
		padding:0px 16px;
	}
	.container9 .flex .propertybox ul {
		list-style-type:square;
		text-align:left;
		padding:0px 8px;
	}
	.container9 .flex .propertybox ul li {
		margin-bottom: 8px;
		color: #333;
	}

	.container9 .flex .visabox,.container9 .flex .visabox p {
		text-align:center;
	}
	.container9 .flex .visabox {
		text-align: center;
	}
	.container9 .flex .visabox .flagcontainer {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.container9 .flex .visabox .flags {
		border-radius: 50%;
		border:6px solid #9e9e9e;
		width: 200px;
		height: 200px;
		overflow:hidden;
		margin-bottom: 24px;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}
	.container9 .flex .visabox .flags img {
		height: 200px;
		margin: 0;
	}
	.container9 .flex .corpbox h3, .container9 .flex .propertybox h3 {
		text-align:center;
		padding:12px 0;
		line-height: 1.2em;
	}
	.container9 .flex .corpbox h3 a, .container9 .flex .propertybox h3, .container9 .flex .propertybox h3 a {
		color: #fff;
	}
	.container9 .flex .corpbox .button {
		margin-bottom:16px
	}
	.container9 .flex.contact .contactdetails, .container9 .flex.contact .gmap {
		box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.33), 0 8px 20px 0 rgba(0, 0, 0, 0.33);
	}
	.container9 .flex.contact article p,.container9 .flex.contact article li {
		font-size: 18px;
		font-family: "Open Sans", Arial;
	}
	.container9 .flex.contact article .office strong {
		font-size: 20px;
	}
	.container9 .flex.contact article .office {
		font-weight: 200 !important;
	}
	.container9 .flex.contact article p, .container9 .flex.contact article li,.container9 .flex.contact article li a {
		color: #fff !important;
	}
	.container9 .flex.contact article li a:hover {
		color: #fff59c !important;
	}
	.container9 .flex.contact article li {
		line-height: 16px;
	}
	.container9 .flex.contact article .gmap {
		border:1px solid #a8a8a8;
		padding: 8px;
		background: #ddd;
	}
	.container9 .flex.contact .contactdetails {
		padding: 16px 8px 8px;
		border: 1px solid #a8a8a8;
		background: #fff;
	}

		.container9 .flex.flex-2 article {
			width: 47%;
		}

		.container9 .flex.flex-3 article {
			position: relative;
			width: 31%;
		}
		
		.container9 .flex.flex-5 article {
			margin-top:24px;
			position: relative;
			width: 18%;
		}
		.container9 .flex.flex-5 article .button {
			width: 50%;
			border-radius: 4px 12px;
		}

		.container9 .flex.custom .w33 li .button {
			width: 85%;
			border-radius: 4px 12px;
			padding: 2px 8px;
		}

		.container9 .flex.custom article.w10 {
			position: relative;
			width: 10%!important;
			text-align: left;
		}
		.container9 .flex.custom article.w33 {
			position: relative;
			width: 33%;
		}
		.container9 .flex.custom article.w33 h2 {
			color: #000;
		}
		.container9 .flex.custom article.w66 {
			position: relative;
			width: 58%;
			text-align: left;
		}
		.container9 .flex.custom article.w75 {
			position: relative;
			width: 73%;
			text-align: left;
		}
		.container9 .flex.fam-last .famlastcontainer {
			width: 33%;
		}
		.container9 .flex.fam-last .famlastcontainer p {
			padding-bottom:20px;
		}

			.container9 .flex.flex-3 article:before, .container9 .flex.custom article:before {
				content: '';
				position: absolute;
				width: 100%;
				height: 100%;
				right: -2em;
				top: 0;
				/* border-right: 1px solid #dbdbdb; */
				pointer-events: none;
			}
			.container9 .flex.flex-3 article.propertybox:before,.container9 .flex article.fambox:before,.container9 .flex article.visabox:before, .family .container9 .flex.custom article:before {
				border-right: none;
			}
			
			.container9 .flex.flex-5 article:before{
				content: '';
				position: absolute;
				width: 100%;
				height: 100%;
				right: -2em;
				top: 0;
				pointer-events: none;
			}

			.container9 .flex.flex-3 article:last-child:before, .container9 .flex.flex-5 article:last-child:before, .container9 .flex.custom article:last-child:before {
				border: none;
			}
			
			.container9 .inner .fam-last {
				justify-content:center;
			}


		@media screen and (max-width: 980px) {

			.nav_menu ul { margin-top: 60px !important; }

			.region .flex .gmbadd, .region .flex article.phone {
				text-align: center!important;
				padding: 4px;
			}
			.region .flex article {
				margin: 0px!important;
			}
			.region .flex article.phone {
				padding-bottom: 8px!important;
			}
			.family .container9 .marg-bottom {
				margin-bottom: 0px;
			}

			.container9 .flex.flex-2 article {
				width: 100%;
				margin-bottom: 2em;
			}
			
			.container9 .flex.custom article.filler, .container9 .flex.custom article.w10 {
				display:none;
			}
			
			.cor-img {
				height: 280px
			}

				.container9 .flex.flex-2 article:last-child {
					margin-bottom: 0;
				}

			.container9 .flex.flex-3, .container9 .flex.flex-5, .container9 .flex.custom {
				-moz-flex-direction: column;
				-webkit-flex-direction: column;
				-ms-flex-direction: column;
				flex-direction: column;
			}

				.container9 .flex.flex-3 article {
					width: 100%;
					padding-bottom: 2em;
					margin-bottom: 3em;
				}

				.container9 .flex.custom article {
					width: 100%!important;
					border-bottom: 1px solid #dbdbdb;
					padding-bottom: 0;
					margin-bottom: 1em;
				}
				.container9 .flex.fam-last .famlastcontainer {
					width: 100%!important;
				}
				.container9 .flex.flex-5 article {
					width: 100%!important;
					padding-bottom: 0.125em;
					margin-bottom: 0.125em;
				}
				.container9 .flex.flex-5 article .button {
					width: 86%;
					font-size: 20px;
				}
				
				.container9 .flex.custom .w33 li .button {
					width: 90%;
				}
				
				.column {
					width: 100%!important;
					display: block;
				}
				
				.column:after {
					content: '';
					width: 100%;
					
				}

					.container9 .flex.flex-3 article:last-child, .container9 .flex.custom article:last-child {
						border: none;
						padding-bottom: 0;
						margin: 0 0 1em 0;
					}
					.container9 .flex.flex-5 article:first-child {
						margin-top: 0;
					}

					.container9 .flex.flex-3 article:before, .container9 .flex.flex-5 article:before, .container9 .flex.custom article:before {
						display: none;
					}
					.container9 .flex .corpbox p {
						padding: 0 24px;
					}
					.container9 .flex .corpbox footer {
						position: static;
					}
					
					.container9 .flex .propertybox {
						padding-bottom:28px!important;
					}

			.theme .sections {
				padding:16px 0px 24px !important;
			}
			.container9 dl {
				text-align: left;
			}
			.container9 dl dt {
				font-size:1.5em;
			}
			.container9 p {
				font-size:1.25em;
			}
			.container9 .alphawhite header p {
				font-size: 1.25em !important;
			}
			.container9 .alphawhite p {
				font-size:1.125em!important;
			}
			.container9 .flex.contact article .gmap {
				width: 98.5%;
			}
		}

/* Button */
	.container9 .button {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		background-color: #5a5a5a;
		border-radius: 0;
		border: 0;
		color: #ffffff !important;
		cursor: pointer;
		display: inline-block;
		font-weight: 600;
		height: 2.85em;
		line-height: 2.95em;
		padding: 0 1.5em;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
	}

		.container9 .button:hover {
			background-color: #676767;
		}

		.container9 .button:active {
			background-color: #4d4d4d;
		}

		.container9 .button.icon {
			padding-left: 1.35em;
		}

			.container9 .button.icon:before {
				margin-right: 0.5em;
			}

		.container9 .button.special {
			background-color: #5385c1;
			color: #ffffff !important;
		}

			.container9 .button.special:hover {
				background-color: #6692c8;
			}

			.container9 .button.special:active {
				background-color: #4278b8;
			}

		.container9 .button:disabled {
			background-color: #9a9a9a !important;
			box-shadow: inset 0 -0.15em 0 0 rgba(0, 0, 0, 0.15);
			color: #fff !important;
			cursor: default;
			opacity: 0.25;
		}

		@media screen and (max-width: 480px) {

			.container9 .button {
				padding: 0;
				width: 100%;
			}

		}

@media (max-width: 639px) {
	.container9 .office {margin-bottom: 1em;}
	.container9 .contactinfo {margin-left: 0px}
	.container9 .flex.flex-3 .location {margin-bottom: 0px}
	.container9 .flex.contact article .office strong {font-size:22px;line-height:1.3em}
}

/* Icon */
	ul.contactinfo {
		margin-left: 4px;
		margin-bottom: 16px;
		margin-top: -10px;
	}
	ul.contactinfo li {
		margin-top: 0;
		font-size: 20px;
		color: #000;
		margin-bottom:8px;
	}
	.fa, .fa-solid, .fa-brands {
		margin-right: 12px;
		font-size: 24px!important;
	}
	i.fa, i.fa-solid, i.fa-brands {
		width: 28px;
	}
	
	ul.icons {
		cursor: default;
		list-style: none;
		padding-left: 0;
		margin-left: 0px;
		margin-top: 24px;
	}
	
	ul.icons li a img {
		border:none !important;
	}

		ul.icons li {
			display: inline-block;
			padding: 0 1em 0 0;
		}

			ul.icons li:last-child {
				padding-right: 0;
			}


@media screen and (max-width: 480px) {

	.container9 .flex.contact .contactdetails {
		padding: 16px 6px 6px;
	}
	.container9 .flex.contact article .gmap {
		padding:0;
		width: 99%;
	}

	ul.contactinfo {
		margin: 0 0 2em 1.125em;
	}

		ul.contactinfo li {
			padding: 0;
			display: block;
			text-align: left;
			width: 100%;
		}

			ul.contactinfo li:first-child {
				padding-top: 0;
			}

			ul.contactinfo li > * {
				margin: 0 !important;
				font-size: 0.875em;
			}

				ul.contactinfo li > *.icon:before {
					margin-left: -2em;
				}
}