@charset "utf-8";
@import url("../fonts/Kanit/font.css");

body{
    font-family: 'Kanit-Regular';
    background-color: #fafafa;
    color: #07665a;
    font-size: 16px;
}
/*----- color -----*/
.fpink500{
   color: #E91E63;
}
.fpink900{
    color: #c50868;
}
.fcyan200{
   color:  #80DEEA;
}
.fTeal300{
    color: #4DB6AC;
}
.fTeal500{
    color: #009688;
}
.fTeal800{
    color: #009688;
}
.fblue100{
    color: #BBDEFB;
}
.flgreen500{
    color: #8BC34A;
}
.bg-greenA700{
    background-color: #64DD17;     
}
.bg-blue500{
    background-color: #2196F3;
}
.bg-teal500{
    background-color: #009688;
}
.bg-pink500{
    background-color: #E91E63;
}
.bg-facebook{
    background-color:#6083d0;
}
td { 
    padding:5px;  
}

/*---------header------*/
#tooltop {
    color: #E9E9E9;
    padding-top: 10px;
}
#tooltop a {
    color: #E9E9E9;
}
.header-logo ,.header-logo span{

    padding-bottom: 10px;
     color: #920c3d;
}
.header-logo a{
    font-style: normal;  
    color: aliceblue;
    text-decoration: none;
}
.top-header{
        background-color: #F50057;
}
.top-header img.logo {
    margin-top: -15px;
    transition: all .5s ease 0s;
    -webkit-transition: all .5s ease 0s;
    -moz-transition: all .5s ease 0s;
    -o-transition: all .5s ease 0s;
    -ms-transition: all .5s ease 0s;
}
.nav-container{
    border-bottom: 3px solid #ff005e;
    /*background-color: #004D40;*/
}
.f-nav{
    z-index: 9999;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background-color: #F50057;
    /*background-color:#004D40;*/
}
.navbar-default {
    background-color: transparent;
    border-color: transparent;
    margin-bottom: 0;
   /* margin-top: 8px;*/
    transition: all .5s ease 0s;
    -webkit-transition: all .5s ease 0s;
    -moz-transition: all .5s ease 0s;
    -o-transition: all .5s ease 0s;
    -ms-transition: all .5s ease 0s;
}
.nav-bar {
    margin-top: 10px;
}
.navbar-toggle span {
    color: #fff;
}

ul.nav {
    margin: 0;
    padding: 0;
}
.nav-pills > .active > a, .nav-pills > .active > a:hover {
    background-color: red;
}
.navbar-nav li a.menu ,.nav-justified li a.menu {
    font-size: 24px;
    color: #FFFFFF;
/*    text-transform: uppercase;
    transition: all .7s ease 0s;
    -webkit-transition: all .7s ease 0s;
    -moz-transition: all .7s ease 0s;
    -o-transition: all .7s ease 0s;
    -ms-transition: all .7s ease 0s;*/
/*    font-weight: bold;*/
}
/*.navbar-default .navbar-nav>li>a:hover {
    color: #E91E63;
}*/
.nav-pills>li>a:hover {
	background-color: #FF6699;
}
.nav-pills .open>a, .nav-pills .open>a:active, .nav-pills .open>a:focus{
    background-color: #AA0139;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #000;
}
.nav-container ul.nav li a.active {
    color: #FFFFFF ;
}
.nav-container.fa-nav > ul.nav li a.active {
    color: #FFFFFF !important;
}
.navbar-default .navbar-toggle {
    border-color: #fff;
   /* margin-top: 4px;*/
}
.navbar .navbar-nav {
    display: inline-block;
    float: none;
}

.navbar .navbar-collapse {
    text-align: center;
}

.slideh {
    /*padding-top: 48px;*/
    /*padding-bottom: 48px;*/

    margin-bottom: 30px;
    color: #FFFFFF;
    overflow: hidden;
}
.carousel-inner{
    height: 280px;
     overflow: hidden;
}

/* this make our menu fixed top */
/* carousel */
#quote-carousel 
{
    padding-top: 0;
    padding-right: 10px;
    padding-left: 10px; /* margin-top: 30px;*/
}

/* Control buttons  */
#quote-carousel .carousel-control
{
  background: none;
  color: #222;
  font-size: 2.3em;
  text-shadow: none;
  margin-top: 30px;
}
/* Previous button  */
#quote-carousel .carousel-control.left 
{
  left: -30px;
}
/* Next button  */
#quote-carousel .carousel-control.right 
{
  right: -30px !important;
}
/* Changes the position of the indicators */
#quote-carousel .carousel-indicators 
{
  right: 50%;
  top: auto;
  bottom: 0px;
  margin-right: -19px;
}
/* Changes the color of the indicators */
#quote-carousel .carousel-indicators li 
{
  background: #c0c0c0;
}
#quote-carousel .carousel-indicators .active 
{
  background: #333333;
}
#quote-carousel img
{
/*  width: 400px;*/
  /*height: 300px;*/
    /*width: 100%;*/
}
/* End carousel */

.item blockquote {
    border-left: none; 
    margin: 0;
}

.item blockquote img {
    margin-bottom: 10px;
}

/*.item blockquote p:before {
    content: "\f10d";
    font-family: 'Fontawesome';
    float: left;
    margin-right: 10px;
}
*/
.jumbotron{
    line-height: 25px;
    color: #0A0A0A;
}
#conbody{
    min-height: 500px;
}

/**
  MEDIA QUERIES
*/

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { 
    #quote-carousel 
    {
      margin-bottom: 0;
      padding: 0 40px 30px 40px;
    }
    
}

/* Small devices (tablets, up to 768px) */
@media (max-width: 768px) { 
    
    /* Make the indicators larger for easier clicking with fingers/thumb on mobile */
    
    #quote-carousel .carousel-indicators {
        bottom: -20px !important;  
    }
    #quote-carousel .carousel-indicators li {
        display: inline-block;
        margin: 0px 5px;
        width: 15px;
        height: 15px;
    }
    #quote-carousel .carousel-indicators li.active {
        margin: 0px 5px;
        width: 20px;
        height: 20px;
    }
}
/*คอร์สเรียน*/
h4.media-heading a{
    color: #c50868;
}
/* ไอคอนหัวข้อ*/
.item_content{
    font-weight: 500;
}
.item_content i.fa {
    color: white;
    display: block;
    font-size: 30px;
    line-height: 100px;
    margin-bottom: 16px;
    text-align: center;
}
.hico {
    font-size: 26px;
    color: aliceblue;
    display: inline-block;
    padding: .5em;
}
.bord-circle {
    border-radius: 50%;
}
/* margin */
.mg-b10{
    margin-bottom: 20px;
}
.mg-b20{
    margin-bottom: 20px;
}
.mg-t20{
    margin-top: 20px;
}
.mg-t30{
    margin-top: 30px;
}
.mg-t40{
    margin-top: 40px;
}
.mg-t50{
    margin-top: 50px;
}
.mg-t80{
    margin-top: 80px;
}
.media{
    padding-top: 20px;
}