@import url("font-awesome.min.css");

@font-face {
    font-family: "Kanit";
    src: url("fonts-Kanit/Kanit-Medium.ttf");
}
@font-face {
	font-family: "Kanit_Light";
	src: url("fonts-Kanit/Kanit-Light.ttf");
}

#headRegis {
  background-image: url("../images/bg/headRegis.jpg");
}
#headTraining {
  margin-top:90px;
  background-image: url("../images/bg/greeoffice2.jpg");
}

#boxBanner {
	border-radius: 10px;
}

#boxPic {
	border-radius: 8px;
    box-shadow: 0px 0px 20px #888888;
}


#myCarouselMain{
/*margin-left:15px;*/
border: 1px solid #ccc;
border-radius: 10px;
}
#myCarousel{
border: 2px solid #fff;
border-radius: 10px;
}

.container { margin-right: auto; margin-left: auto; padding-left: 0px; padding-right: 0px; }
.row { margin-right: auto; margin-left: auto; }

.underlineHead { border-bottom: medium solid #002147; }
.underlineHead2 { border-bottom: medium dashed #002147; }
.overlineHead { border-top: medium solid #002147; }
.button {
    /*background-color:#999999; */ 
    border: none;
	border-radius: 10px;
    color: white;
    padding: 5px ;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
	min-width:100%;
	height:68px;
}

.button:hover {
	background-color:#000;
	margin-left: 30px;
	box-shadow: 0 10px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

.button_R01 {
    background-color:#660000;
}
.button_R02 {
    background-color:#0099CC;
}
.button_R03 {
    background-color:#FF6633;
}
.button_R1 {
	/*background-color:#FF6633;*/
	background-color:#DF0005;
}
.button_R2 {
    background-color:#009900;
}
.button_R3 {
    background-color:#330000;
}
.button_R4 {
    background-color:#FF00FF;
}
.button_R5 {
    background-color:#663333;
}
.button_R6 {
    background-color:#0033CC;
}
.button_R7 {
    background-color:#CC3300;
}
.button_R8 {
    background-color:#666666;
}
.button_R9 {
    background-color:#999900;
}
.button_R10 {
    background-color:#0066FF;
}
.button_R11 {
    background-color:#006600;
}
.button_R12 {
    background-color:#CC6600;
}

.button_RSTD {
	position:absolute;
	margin: 350px 0 0 0;
    background-color:#FF6600;
	opacity: 1;
	min-width:25%  !important;
	height:90px;

}
.button_RSTD:hover {
    background-color:#000000;
	opacity: 1;
}


.button_R {
	/*background-color:#800000; */
    border: 2px solid #800000;
	border-radius: 4px;
    color:#800000;
    padding: 5px ;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
	min-width:100%;
	height:120px;
}
.button_R:hover {
	background-color:#800000;
	color:#FFFFFF;
	margin-top: -5px;
	box-shadow: 0 10px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}


/********* ���� ***********/
.black-ribbon {
  position: fixed;
  z-index: -9999;
  width: 70px;
}
@media only all and (min-width: 768px) {
  .black-ribbon {
    width: auto;
  }

}

.stick-left { left: 0; }
.stick-right { right: 0; }
.stick-top { top: 0; }
.stick-bottom { bottom: 0; }



@media (max-width: 768px) {
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /*background: white;*/
  box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 3px;
  -moz-box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 3px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 3px;
  z-index: 9999;
  padding: 15px 0;
  overflow: visible;
  transition: padding 0.3s ease-in-out;
  -moz-transition: padding 0.3s ease-in-out;
  -webkit-transition: padding 0.3s ease-in-out;
}

.button_RSTD {
	position:absolute;
	left:10;
	margin: 370px 0 0 0;
    background-color:#FF6600;
	opacity: 1;
	min-width:50%  !important;
	height:80px;
}
}

body {
  background: white;
  font-size: 16px;
  /*font-family: "PT Serif", Georgia, serif;*/
  font-family: 'Kanit', sans-serif;
  font-weight: normal;
  font-style: normal;
  line-height: 28px;
  color: #777777;
  -webkit-font-smoothing: antialiased;
  /* Fix for webkit rendering */
  -webkit-text-size-adjust: 100%;
  
  /*filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1.00);
 -webkit-filter: grayscale(1.00);
 filter: grayscale(1.00);*/
}

h1, h2, h3, h4, h5, h6 {
  /*color: #31373a;
  font-family: "Raleway", sans-serif;*/
  /*color:#00a8d6;*/
  color:002147;
  font-family: 'Kanit', sans-serif;
  font-weight: normal;
  text-align:left;
  margin-top: 10px;
}

h7 {
  color:#fbbf10;
  /*font-family: "Raleway", sans-serif;*/
  font-family: 'Kanit', sans-serif;
  font-weight: normal;
  text-decoration:underline;
  font-size:18px;
}

h8 {
  color:#00a8d6;
  font-size: 30px;
  font-family: 'Kanit', sans-serif;
  font-weight: normal;
  margin-top: 10px;
}
.cpn{
	color:#333333;
}
.site-header {
  position: fixed;
  margin-top: 0px;
  padding: 20px 0;
  /*background-color:#002147;
   background-image: url("../images/background-2400765_1920.jpg");*/
   background-image: url("../images/bg-TopMenu.jpg");
}
.first-widget {
  position: relative;
  margin-top: 68px;
}
.responsive_menu {
  padding: 20px;
  background-color: rgba(49, 55, 58, 0.98);
  display:none;
  position:fixed;
  z-index: 9999;
}

.site-footer {
  /*background-color: #f1f4f5;*/
  background-color:#002147;
  padding: 20px 0;

  font-family: 'Kanit', sans-serif;
}

.footer-menu li a {
  color: #fff;
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 300;
}

.main-nav ul li a {
  color: #ffffff;
  font-size: 16px;
  font-weight: 300;
  text-transform: uppercase;
  font-family: 'Kanit_Light', sans-serif;
  padding: 5px 15px;
  display: block;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}

.blog-posts {
  margin-top: 0px;
}


/**********  Banner  *******************/
.carousel-control{
border-radius: 10px;
}

.carousel-indicators {
	bottom: -35px;
}
.carousel-indicators li {
    width: 15px;
    height: 15px;
	margin: 4px;
    background-color:#CCC;
}
.carousel-indicators .active {
    width: 15px;
    height: 15px;
	margin: 4px;
    background-color: #999;
}

/*********** ���ͧ��¡�ô�ҹ��� ********/
.blog-posts-all{
	margin: 15px;
	padding-left:0px;
	padding-right:0px;
    height:auto;
    border-radius: 8px;
    background-color: white;
	/*border: 1px #CCCCCC solid;*/
    box-shadow: 0px 0px 20px #888888;
	margin-right: auto; margin-left: auto;
}

.copyright-text {
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  font-family: 'Kanit', sans-serif;
}


.archive2-list {
  padding-left:0px;
  margin-left: 0px;
  margin-top: 0px;
  font-size:16px;
  
}
.archive2-list li {
  line-height: 35px;
  width: 100%;
  border-bottom: 1px dashed #aaaaaa;
}
.archive2-list li:before {
  color: #000000;
  margin-right: 10px;
}
.archive2-list li a {
  /*color: #00a8d6;*/
  font-family: 'Kanit_Light', sans-serif;
  color: #000000;
}
.archive2-list li a:hover {
  /*color: #00a8d6;*/
  color: #00a8d6;
}



.archive2-more {
  padding-left:0px;
  margin-left: 0px;
  margin-top: 0px;
  text-align:right;
  
}
.archive2-more li {
  line-height: 35px;
  width: 100%;
  /*border-bottom: 1px dashed #aaaaaa;*/
}
.archive2-more li:before {
  color: #000000;
  margin-right: 10px;
}
.archive2-more li a {
  /*color: #00a8d6;*/
  font-family: 'Kanit', sans-serif;
  color: #000000;
}
.archive2-more li a:hover {
  /*color: #00a8d6;*/
  color: #00a8d6;
}

/*** PANEL PRIMARY ***/
.panel-primary { border-color: #002147; }
.panel-primary > .panel-heading { color: white; background-color: #002147; border-color: #002147; }
.panel-primary > .panel-heading + .panel-collapse .panel-body { border-top-color: #002147; }

.with-nav-tabs.panel-primary .nav-tabs > li > a,
.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
    color: #fff;
}
.with-nav-tabs.panel-primary .nav-tabs > .open > a,
.with-nav-tabs.panel-primary .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
	color: #fff;
	background-color: #3071a9;
	border-color: transparent;
}
.with-nav-tabs.panel-primary .nav-tabs > li.active > a,
.with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
	color: #428bca;
	background-color: #fff;
	border-color: #428bca;
	border-bottom-color: transparent;
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu {
    background-color: #428bca;
    border-color: #3071a9;
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a {
    color: #fff;   
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
    background-color: #3071a9;
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
    background-color: #4a9fe9;
}
/********************************************************************/



/*********************  ��ź����ٻ *******************/

.tiles {
		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;
		postiion: relative;
		margin: -2.5em 0 0 -2.5em;
	}

		.tiles article {
			-moz-transition: -moz-transform 0.5s ease, opacity 0.5s ease;
			-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
			-ms-transition: -ms-transform 0.5s ease, opacity 0.5s ease;
			transition: transform 0.5s ease, opacity 0.5s ease;
			position: relative;
			width: calc(33.33333% - 2.5em);
			margin: 2.5em 0 0 2.5em;
		}

			.tiles article > .image {
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				position: relative;
				display: block;
				width: 100%;
				border-radius: 4px;
				overflow: hidden;
			}

				.tiles article > .image img {
					display: block;
					width: 100%;
				}

				.tiles article > .image:before {
					-moz-pointer-events: none;
					-webkit-pointer-events: none;
					-ms-pointer-events: none;
					pointer-events: none;
					-moz-transition: background-color 0.5s ease, opacity 0.5s ease;
					-webkit-transition: background-color 0.5s ease, opacity 0.5s ease;
					-ms-transition: background-color 0.5s ease, opacity 0.5s ease;
					transition: background-color 0.5s ease, opacity 0.5s ease;
					content: '';
					display: block;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					opacity: 1.0;
					z-index: 1;
					opacity: 0.8;
				}

				.tiles article > .image:after {
					-moz-pointer-events: none;
					-webkit-pointer-events: none;
					-ms-pointer-events: none;
					pointer-events: none;
					-moz-transition: opacity 0.5s ease;
					-webkit-transition: opacity 0.5s ease;
					-ms-transition: opacity 0.5s ease;
					transition: opacity 0.5s ease;
					content: '';
					display: block;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					/*background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cstyle%3Eline %7B stroke-width: 0.25px%3B stroke: %23ffffff%3B %7D%3C/style%3E%3Cline x1='0' y1='0' x2='100' y2='100' /%3E%3Cline x1='100' y1='0' x2='0' y2='100' /%3E%3C/svg%3E");*/
					background-position: center;
					background-repeat: no-repeat;
					background-size: 100% 100%;
					opacity: 0.25;
					z-index: 2;
				}

			.tiles article > a {
				display: -moz-flex;
				display: -webkit-flex;
				display: -ms-flex;
				display: flex;
				-moz-flex-direction: column;
				-webkit-flex-direction: column;
				-ms-flex-direction: column;
				flex-direction: column;
				-moz-align-items: center;
				-webkit-align-items: center;
				-ms-align-items: center;
				align-items: center;
				-moz-justify-content: center;
				-webkit-justify-content: center;
				-ms-justify-content: center;
				justify-content: center;
				-moz-transition: background-color 0.5s ease, -moz-transform 0.5s ease;
				-webkit-transition: background-color 0.5s ease, -webkit-transform 0.5s ease;
				-ms-transition: background-color 0.5s ease, -ms-transform 0.5s ease;
				transition: background-color 0.5s ease, transform 0.5s ease;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				padding: 1em;
				border-radius: 4px;
				border-bottom: 0;
				color: #ffffff;
				text-align: center;
				text-decoration: none;
				z-index: 3;
			}

				.tiles article > a > :last-child {
					margin: 0;
				}

				.tiles article > a:hover {
					/*color: #ffffff !important;*/
					color:#fff !important;
					background-color:#000000;
					opacity: 0.75;
				}

				.tiles article > a h2 {
					margin: 0;
				}

				.tiles article > a .content {
					-moz-transition: max-height 0.5s ease, opacity 0.5s ease;
					-webkit-transition: max-height 0.5s ease, opacity 0.5s ease;
					-ms-transition: max-height 0.5s ease, opacity 0.5s ease;
					transition: max-height 0.5s ease, opacity 0.5s ease;
					width: 100%;
					max-height: 0;
					line-height: 1.5;
					margin-top: 0.35em;
					opacity: 0;
				}

					.tiles article > a .content > :last-child {
						margin-bottom: 0;
					}

			.tiles article.style1 > .image:before {
				background-color: #000;
				opacity: 0.50;
			}


			body:not(.is-touch) .tiles article:hover > .image {
				-moz-transform: scale(1.1);
				-webkit-transform: scale(1.1);
				-ms-transform: scale(1.1);
				transform: scale(1.1);
			}

				body:not(.is-touch) .tiles article:hover > .image:before {
					/*background-color: #333333;
					opacity: 0.35;*/
					background-color:#00FFFF;
					opacity: 0.05;
				}

				body:not(.is-touch) .tiles article:hover > .image:after {
					opacity: 0;
				}

			body:not(.is-touch) .tiles article:hover .content {
				max-height: 15em;
				opacity: 1;
			}

		* + .tiles {
			margin-top: 2em;
		}

		body.is-loading .tiles article {
			-moz-transform: scale(0.9);
			-webkit-transform: scale(0.9);
			-ms-transform: scale(0.9);
			transform: scale(0.9);
			opacity: 0;
		}

		body.is-touch .tiles article .content {
			max-height: 15em;
			opacity: 1;
		}

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

			.tiles {
				margin: -1.25em 0 0 -1.25em;
			}

				.tiles article {
					width: calc(33.33333% - 1.25em);
					margin: 1.25em 0 0 1.25em;
				}

		}

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

			.tiles {
				margin: -2.5em 0 0 -2.5em;
			}

				.tiles article {
					width: calc(50% - 2.5em);
					margin: 2.5em 0 0 2.5em;
				}

		}

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

			.tiles {
				margin: -1.25em 0 0 -1.25em;
			}

				.tiles article {
					width: calc(50% - 1.25em);
					margin: 1.25em 0 0 1.25em;
				}

					.tiles article:hover > .image {
						-moz-transform: scale(1.0);
						-webkit-transform: scale(1.0);
						-ms-transform: scale(1.0);
						transform: scale(1.0);
					}

		}

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

			.tiles {
				margin: 0;
			}

				.tiles article {
					width: 100%;
					margin: 1.25em 0 0 0;
				}

		}



/*************************** ��������͹��鹺��ش **************************/
#scroll {
    position:fixed;
    right:5px;
    bottom:10px;
    cursor:pointer;
    width:35px;
    height:35px;
    background-color:#3498db;
    text-indent:-9999px;
    display:none;
    -webkit-border-radius:60px;
    -moz-border-radius:60px;
    border-radius:60px
}
#scroll span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-12px;
    height:0;
    width:0;
    border:8px solid transparent;
    border-bottom-color:#ffffff;
}
#scroll:hover {
    background-color:#e74c3c;
   opacity:1;filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
}


@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) { /* STYLES GO HERE */
.parallax {
  background-attachment:inherit;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  color: #fff;
  overflow: hidden;
}

}