@import url(sukhumvit/sukhumvit.css);
@import url(http://fonts.googleapis.com/css?family=Sarabun);
.orgNode {
	/* font-family: 'Sarabun', sans-serif; */
	width: 8%;
	height: auto;
	background-image: linear-gradient(pink, lightgreen);
	border-radius: 5%;
}

/*ติดริบบิน*/
	.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; }

body {
    background-color: #f2f2f2;
    /* font-family: "sukhumvit_setlight",Arial; */
		font-family: 'IBM Plex Sans Thai', sans-serif !important;
    /*font-weight: 300;*/
    font-size: 100%;
    color: #555;

    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;

   margin-top: 70px;
}

/* Titles */
h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
    /*color: #333;*/
}


/* Paragraph & Typographic */
p {
    line-height: 28px;
    margin-bottom: 25px;
}

.centered {
    text-align: center;
}

/* Links */
a {
    color: #e96d11;
    word-wrap: break-word;

    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}

a:hover,
a:focus {
    color: #af5411;
    text-decoration: none;
    outline: 0;
}

a:before,
a:after {
    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}

 hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}


.navbar {
	font-weight: 800;
	font-size: 105%;
	padding-top: 15px;
	padding-bottom: 15px;
}

.navbar-inverse {
	background: #107aab;
	background: linear-gradient(to bottom right, #107aab, #4abeef);
	/*border-color: #2d2d2d;*/
}

.navbar-inverse .navbar-nav > .active > a {
	background: #fbf803;
	color: #224863 !important;
}

.navbar-inverse .navbar-brand {
	color: #FFF;
	font-weight: bolder;
	font-size: 22px;
	letter-spacing: 1px;
}

.navbar-inverse .navbar-brand i {
	color: #ff7878;
	font-size: 22px;
	letter-spacing: 1px;
}

/*TILT*/
.tilt {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.tilt:hover {
  -webkit-transform: rotate(-0.3deg);
     -moz-transform: rotate(-0.3deg);
       -o-transform: rotate(-0.3eg);
      -ms-transform: rotate(-0.3deg);
          transform: rotate(-0.3deg);
}

/* ==========================================================================
   Wrap Sections
   ========================================================================== */

#headerwrap {
	background: url(../img/header-bg.jpg) no-repeat center top;
	margin-top: -10px;
	padding-top:20px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 500px;
	width: 100%;

    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#headerwrap h1 {
	margin-top: 80px;
	color: white;
	text-align:right;
	font-size: 4.3em;
	font-weight: 400;
	letter-spacing: 3px;
}

#headerwrap h2 {
	color: white;
	font-size: 3.3em;
	font-weight: 700;
	text-align:right;
	/*letter-spacing: 2px;*/
	text-transform: uppercase;
}
#headerwrap h1, #headerwrap h2{ color: #f42888;}

/* Dark Grey Wrap */
#dg {
	background: #e0e0e0;
	padding-top: 10px;
	padding-bottom: 10px;
	/*text-align: center;*/
}

#dg h4 {
	font-weight: 700;
}

/* Light Grey */
#lg {
	background: #ebebeb;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
}

#lg h4 {
	font-weight: 700;
}


/* Red Wrap */
#r {
	background: #4e3c3e;
	padding-top: 15px;
	padding-bottom: 15px;
}

#r h4 {
	color: white;
	font-weight: 700;
}

#r p {
	color: white;
}
#r div{ color: #FFC; }
#r label{ margin-bottom: 15px; }
/* #r select{ font-family: sukhumvit_setlight,Verdana, Geneva, sans-serif !important; } */

/* Blue Wrap */

#blue {
	background: #a9cadd;
	padding-top: 35px;
	padding-bottom: 15px;
}

#blue h4 {
	color: white;
	font-weight: 700;
}
#blue h1{ color: #FFF; font-weight: 700; font-size: 2em; }

#blue p {
	color: white;
}



/* Footer Wrap */
#f {
	background: #2d2d2d;
	padding-top: 15px;
	padding-bottom: 30px;
	color: #FFF;
}

#f i {
	color: #bdbdbd;
	font-size: 30px;
	padding: 20px;
}

#f i:hover {
	color: #ff7878;
}

/****** SECTIONS *****/

.w {
	padding-top: 10px;
}

.w h4 {
	font-weight: 700;
}

.w i {
	color: #ff7878;
	font-size: 30px;
}


.wb {
	padding-top: 15px;
	margin-bottom: 10px;
}

.wb h4 {
	font-weight: 700;
}

.desc {
	padding-top: 35px;
}

.desc h4 {
	font-weight: 700;
}

.desc i {
	color: #ff7878;
	font-size: 12px;
	padding: 5px;
}

/***** MODAL CONTACT *****/
.modal-content {
	border-radius: 0px;

}

.modal-header {
	background: #bdbdbd;
	color: white;
}

.modal-header h4 {
	font-weight: 700;
}

.modal-body {
	background: #f2f2f2;
    /* font-family: "Lato"; */
    font-weight: 300;
    font-size: 16px;
    color: #555;
}

.modal-footer {
	background: #f2f2f2;
	margin-top: 0px;
}

/* ==========================================================================
   Pricing Tables
   ========================================================================== */

.pricing-option {
    padding-bottom: 40px;
}

.pricing-option .pricing-top {
    position: relative;
    background: #222;
    color: white;
    text-align: center;
    font-weight: bold;

    padding: 40px 20px 30px 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.pricing-option .pricing-top .special-label {
    display: block;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #1abc9c;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: bold;
    padding: 3px 0;
}

.special .pricing-top {
    background: black;
}

.pricing-option .pricing-edition {
    text-transform: uppercase;
    display: block;
    font-size: 25px;
    letter-spacing: 8px;
}

.pricing-option .price {
    display: inline-block;
    position: relative;
}

.pricing-option .price sup {
    position: absolute;
    top: 50px;
    left: -10px;
    font-size: 24px;
}

.pricing-option .price .price-amount {
    font-size: 108px;
    letter-spacing: -4px;
}

.pricing-option .price small {
    position: relative;
    left: -10px;
    font-size: 18px;
}

.pricing-option ul {
    list-style: none;
    margin: 0;
    background: #eee;
    text-align: center;
    padding-left: 0px;
}

.pricing-option ul li {
    border-bottom: solid 1px #e1e1e1;
    padding-top: 20px;
    padding-bottom: 20px;
}

.pricing-option .pricing-signup {
    display: block;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    padding: 15px 10px;
    color: white;
    background: #1abc9c;
}

.pricing-option .pricing-signup:hover {
    background: #ff7878;
}

.img-news{ width: 100%; border: solid 1px #CCC; background-color: #CCC; }

.page-news{ display:block; margin: 10px auto; padding: 15px;  width: 95%; font-size: 0.9em; font-weight: 600; color:#333;}
.page-news a{ width: 50px; padding: 4px 8px; background-color:#9bcfe0; }
.page-news .act{ width: 50px; padding: 4px 8px; background-color:#F96; font-size: 1.2em !important;}
.menu-year{ margin: 20px 5px; width: 100; color:#333; font-size: 1em; font-weight: 700 }
.menu-year a{ padding: 5px 10px; color:#999; background-color:#CCC}
.menu-year a:hover{padding: 5px 10px; color:#000; background-color:#FC0 }

.gallery{margin: 20px 15px; padding: 19px 13px; background-color:#FFF; box-shadow: 5px 3px 3px #d7d7d7; }
.gallery img{ width: 100%; }
.gallery .img{ width: 100%; height: 16px; }
.gallery a{ color: #333; }
.gallery a:hover{ color:#fe7507; }
.gallery .topic1{ margin-top: 10px; line-height: 20px;}

.clr{ clear:both; }
.t1{ font-size: 0.8em; }
.link{ margin: 10px 0px 0px 0px; display:block; }
.link2{ padding-left: 5px; font-size: 0.9em; }
.link2 a{margin: 2px 0px 0px 0px; padding: 2px 10px; display:block; text-align:left; }
.link2 a:hover{ padding: 4px 10px; background-color:#d1dbe0; color: #333;}
.left{ text-align:left; }
.justify{ text-align:justify; text-justify:inter-cluster; }

.table1{ margin: 0 auto; width: 75%; }
.table1 span{ margin: 0px 0px; padding: 5px; display: inline-block; line-height: 25px; }

.people{ width: 100%; }
.people ul{ margin: 0px auto; padding: 0px; list-style: none; }
.people ul li{ padding: 10px; display:inline-block; width: 30%; text-align:center; vertical-align: top;}
.people ul li img{ margin-bottom: 10px; }

.mrgb10{ padding: 10px; }
.counter{ color: #FC6; }
.icon-link1{ background-position:left; background-image:url(../img/icon1.png); background-repeat:no-repeat; padding: 0px 25px 0px 0px; margin:0px; width: 25px; height: 25px; display:inline;  }
.tel{ margin:auto; width: 80%; border: 1px #999 solid;  }
.tel .bg-head{ background-color: #5cb4c4; color: #FFF; }
.line-tel{  border-bottom:#999 1px dotted; }

hr{ margin: 0px; border-collapse: 0px; border-style:dashed; }
.attachnews{ width: 100%; padding: 5px; }
.attachnews div{ margin: 12px 0px; }
.attachnews a{ padding: 2px 5px; background-color: #5e8094; border-radius: 3px; color: #FFF; }
.attachnews a:hover{ background-color:#f6ae13;  }
.mrgt_0{ margin-top: 0px !important; }

.green-office, .sarn-rbru{ margin: 10px auto; padding: 5px; width: 96%; background-color:#E1E1E1; }
.more{ margin: 4px 6px 10px 0px; font-size: 0.8em; }
.more a{ padding: 2px 4px; width: 30%; background-color:#919291; color:#FFF; text-decoration:none; border-radius: 4px;}
.more a:hover{ background-color:#F60; }


@media (max-width: 480px) {
.col-sw80{ width: 80%;}
.col-w20{ width: 100%; }
}

@media (min-width: 768px) {
.col-mw90{ width: 90%; }
.col-w20{ width: 40%; }
}
@media (min-width: 1200px){
.col-lw100{ width: 100%; }
.col-w20{ width: 14%; }

}