/*
Version: 1.0
*/


/* ----------------------------------------------------
	GOOGLE FONTS
-------------------------------------------------------
------------------------------------------------------- */


/*@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);*/
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam:ital,wght@0,400;0,600;1,400;1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display+SC:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Khmer&display=swap');                                  /*Khmer */
@import url('https://fonts.googleapis.com/css2?family=Krub:ital,wght@0,400;0,600;1,400;1,600&display=swap'); /* Thai */

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.2.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

.font-display {
    font-family: 'Playfair Display SC', serif;
}

.font-VN {
    font-family: "Be Vietnam script=latin rev=1" !important;
}

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fa-arrow-left:before {
  content: "\f060";
}
.fa-edit:before,
.fa-pencil-square-o:before {
  content: "\f044";
}


/* ----------------------------------------------------
	SKELETON
------------------------------------------------------- */
html { scroll-behavior: smooth;
    overflow-x: hidden;
    height: 100%;
    box-sizing: border-box;
}


body {
	background: #FFFFFF;
	color: #fff;
	font-weight: 400;
	font-size: 1em;
	font-family: "Be Vietnam";
	margin:0;
	padding:0;
    min-height: 100%;
}

p {
    font-family: Open Sans, sans-serif;
}

*, *:after, *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

/* Some text attributes */
.white {
	color: white !important;
}


.underline {
	text-decoration: underline !important;
}

/* ----- */

.footer {
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0rem;
    background-color: #008b8b;
    height: 30px;
    text-align: center;
    color: #fff;
}

.footer  ul > li {
    display: inline;
    padding-left: 20px;
    padding-right: 20px;
}

.sapphire-ul {
    list-style: none;
    padding-left: 0;
}
.sapphire-ul li{
    position: relative;
    padding-left: 20px;
}
.sapphire-ul li:before {
    content: '';
    width: 14px;
    height: 14px;
    position: absolute;
    background-image: url('images/sapphire-25px.png');
    background-size: cover;
    background-position: center;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.sapphire-map-div {
	max-width	: 900px;
	max-height	: 675px;
	width 		: 80vw;
	height		: calc(80vw * 0.75);
	border		: 0;
    margin-left : auto;
    margin-right: auto;
    margin-bottom:25px;
    display		: flex;
    text-agign  : center;
    align-items	: center;
    justify-content: center;
    -moz-box-shadow:    5px 5px 6px 2px #555;
    -webkit-box-shadow: 5px 5px 6px 2px #555;
    box-shadow:         5px 5px 6px 2px #555;
}

.sapphire-map-div iframe {
	width: 		100%;
	height:		100%
}

/*-- contact --*/

.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea{
		outline:none;
		float: left;
		width:48.35%;
		outline: none;
		border:1px solid #E3E2E2;
		padding: 12px 10px;
		font-size: 14px;
		background: white;
		margin-right: 1.45em;
		color: #AEAEAE;
	}
.contact-form textarea{
		width:60%;
		resize:none;
		min-height: 250px;
	}
.contact-form input[type="submit"],.contact-form input[type="reset"]{
		width: 48.4%;
		background: none;
		color: #49C0DB;
		font-size: 16px;
		background: white;
		padding: 12px 0;
		outline: none;
		border: 1px solid #49C0DB;
		margin-top: 2em;
		transition:.5s all;
		-webkit-transition:.5s all;
		-moz-transition:.5s all;
		-ms-transition:.5s all;
		-o-transition:.5s all;
	}
	
.contact-form input:disabled[type="submit"]{
		
		color: grey;		
		font-size: 16px;
		background: #ccffff;
		text-decoration-line: line-through;
}	

.contact-form input[type="reset"]{
		margin-left:1em;
	}
.contact-form input[type="submit"]:hover,.contact-form input[type="reset"]:hover{
		color:#fff;
		background: #E6B61C;
		border: 1px solid #B28D16;
	}
.contact-form::-webkit-input-placeholder {
		color: #000 !important;
	}
.contact-grid{
		margin:4em 0 0;
		border: 2px solid grey;
		-moz-box-shadow:    5px 5px 6px 2px #555;
		-webkit-box-shadow: 5px 5px 6px 2px #555;
		box-shadow:         5px 5px 6px 2px #555		
	}
.contact-form input[type="text"]:nth-child(3),.contact-form input[type="text"]:nth-child(4){
	margin:1.5em 0;
	}
.contact-form input[type="text"]:nth-child(3){
	margin-right: 1.45em;
	}
.contact-form input[type="email"]:nth-child(2){
	margin-right: 0;
	}
.contact-bottom-grids p{
	text-align:center;
	margin:3em auto;
	width:80%;
	font-size:14px;
	color:#999;
	line-height:1.8em;
}
.contact-bottom-grid{
	text-align:center;
}
.contact-bottom-grid h4,.contact-bottom-grid a{
	color:#999;
	margin:0;
	font-size:0.9em;
	font-family: 'Playfair Display', serif;
	line-height: 1.5em;
}
.contact-bottom-grid a:hover{
	color:#49C0DB;
}
.contact-bottom-grid h4 span{
	display:block;
	margin:.5em 0 0;
}
.dot{
	width: 100px;
    height: 100px;
    border-radius: 100%;
    border: 3px solid #E1E1E1;
    margin: 0 auto 1em;
    background:#E6B61C;
	transition:.5s all;
	-webkit-transition:.5s all;
	-moz-transition:.5s all;
	-o-transition:.5s all;
	-ms-transition:.5s all;
}
.dot span{
	font-size:2em;
	color:#fff;
	top:1em;
}
.contact-bottom-grid:hover .dot{
	background:#49C0DB;
}

/* simulate progress bar */

.loading-hidden {
	display: hidden !important;
}
.loading, .loading>td, .loading>th, .nav li.loading.active>a, .pagination li.loading, .pagination>li.active.loading>a, .pager>li.loading>a {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
    background-size: 40px 40px;
    animation: 2s linear 0s normal none infinite progress-bar-stripes;
    -webkit-animation: progress-bar-stripes 2s linear infinite;
	display: visible;
}
li.loading.active.loading-success > a{
		background-color: #47a447 !important;
}
figure.effect-zoe p.icon-links a,p.admin a,input[type="submit"],.related-posts-grid-right h5 a,.welcome-grid i,.related-posts-grid-right a,.more a,.services-grid1-bottom h4 a,.welcome-grid p,ul.footbo li a,ul.foot-nav li a,.footer p a{
	transition:.5s ease-in;
	-webkit-transition:.5s ease-in;
	-moz-transition:.5s ease-in;
	-o-transition:.5s ease-in;
	-ms-transition:.5s ease-in;
}
/*-- helpers --*/
.fixed {
    position: fixed;
    z-index: 1000;
    top: 0px;
    width: 100%;
}
/*-- //contact --*/
/* ******************************************************
	Related 
*********************************************************/

.related {
    background: #fff;
    font-family: "Be Vietnam", sans-serif;
    color: #566473;
    font-weight: 300;
    text-align: center;
	margin-bottom:0;
	padding:3em 0;
}
.related p {
    font-size: 1.5em;
    text-align: center;
}
.related a h3 {
	line-height: 1.25;
    margin: 0;
    padding: 0.5em 0 0.3em;
    text-align: left;
	color: #235992;
	font-weight:400;
}
.related a {
	border: 1px solid #9db6cf;
	display: inline-block;
	text-align: center;
	margin: 20px 10px;
	padding: 25px;
}
.related a:hover {
	border-color: #566473;
	color: #566473;
}
.related a img {
	max-width: 100%;
	opacity: 0.8;
}

.related a:hover img,
.related a:active img {
	opacity: 1;
}


/* ----------------------------------------------------
	WRAPPER
------------------------------------------------------- */

.wrapper{
	margin:0 auto;

}

section{ float:left; width:100%;}

@media only screen and (min-width:240px) and (max-width: 768px){
	section{
		padding:0 15px;
	}
	.cctop {

	text-align: center;
	}
	.cctop a{
		display:block;
	}
	.cctop span.right {
	float: none;
	}
	.cctop span.right a {
	float: none;
	}
	
	.contact-form input[type="reset"] {
		margin-left: 0em;
	}	
	
	.contact-form input[type="text"], .contact-form input[type="email"] {
    width: 95%;
	}
	
	.contact-form textarea  {
		width: 95% !important;
	}
}

/* ******************************************************
	Responsive Grids
*********************************************************/

.rt-container {
	margin: 0 auto;
	padding-left:12px;
	padding-right:12px;
}
.rt-row:before, .rt-row:after {
  display: table;
  line-height: 0;
  content: "";
}

.rt-row:after {
  clear: both;
}
[class^="col-rt-"] {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  padding: 0 15px;
  min-height: 1px;
  position: relative;
}


@media (min-width: 768px) {
  .rt-container {
    width: 750px;
  }
  [class^="col-rt-"] {
    float: left;
    width: 49.9999999999%;
  }
  .col-rt-6, .col-rt-12 {
    width: 100%;
  }

}

@media (min-width: 1200px) {
	.rt-container {
		width: 1170px;
	}
	.col-rt-1 {
		width:16.6%;
	}
	.col-rt-2 {
		width:30.33%;
	}
	.col-rt-3 {
		width:50%;
	}
	.col-rt-4 {
		width: 67.664%;
	}
	.col-rt-5 {
		width: 83.33%;
	}


}

@media only screen and (min-width:240px) and (max-width: 768px){
	 .ScriptTop h1, .ScriptTop ul {
		text-align: center;
	}
	.ScriptTop h1{
		margin-top:0;
		margin-bottom:15px;
	}
	.ScriptTop ul{
		 margin-top:12px;
	}

	.ScriptHeader h1,
	.ScriptHeader h2,
	.scriptnav ul{
		text-align:center;
	}
	.scriptnav ul{
		 margin-top:12px;
	}
	#float-right{
		float:none;
	}
	
	/* scale recaptcha */
	#rc-imageselect, .g-recaptcha {
		transform: scale(0.75);
		transform-origin: 0 0;
	}

}