/* 
    Document   : custom
    Created on : Aug 19, 2013, 2:46:38 PM
    Author     : kae
    Description:
        Purpose of the stylesheet follows.
*/

@charset "utf-8";

@font-face {
    font-family: ThaiSansLite;
    font-style: normal;
    src: url('../font/thaisanslite_r1.otf');
}

@font-face {
    font-family: ThaiSansLite;
    font-style: normal;
    src: url('../font/thaisanslite_r1.ttf');
}

/*
 Font Name: Kanit
 Weights: 300, 400, 500
*/

@font-face {
    font-family: 'kanit';
    src: url('../font/Kanit/Kanit-Light.ttf');
    src: url('../font/Kanit/Kanit-Light.ttf?#iefix') format('embedded-opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'kanit';
    src: url('../font/Kanit/Kanit-Medium.ttf');
    src: url('../font/Kanit/Kanit-Medium.ttf?#iefix') format('embedded-opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'kanit';
    src: url('../font/Kanit/Kanit-Regular.ttf');
    src: url('../font/Kanit/Kanit-Regular.ttf?#iefix') format('embedded-opentype');
    font-weight: 400;
    font-style: normal;
}

/** Paging **/
.paging_counter{ text-align: center; }
.paging {
    text-align: center;
}
.paging .current,
.paging .disabled,
.paging a {
    text-decoration: none;
    padding: 5px 8px;
    display: inline-block
}
.paging > span {
    display: inline-block;
    border: 1px solid #ccc;
    border-left: 0;
}
.paging > span:hover {
    background: #efefef;
}
.paging .prev {
    border-left: 1px #ccc solid;
}
.paging .next {

}
.paging .disabled {
    color: #ddd;
}
.paging .disabled:hover {
    background: transparent;
}
.paging .current {
    background: #efefef;
    color: #c73e14;
}

body{ background-color: #ffffff; font-family: "kanit"; font-size: 16px; }
label{ font-weight: normal; }
.showborder{ border: 1px red solid; }
.clear{ clear: both; }
.display-none{ display: none; }
.text-align-left{ text-align: left; }
.text-align-right{ text-align: right; }
.text-align-center{ text-align: center; }
/*a{ color: #2f2f2f; }
a:hover{ color: #2f2f2f; }*/

h1,h2,h3,h4{ font-family: 'Kanit'; font-weight: normal; }

.row-centered {
    text-align:center;
}
.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
}

.top-bar{ width: 100%; height: 30px; background-color: #3d3c3a; }

.header{ position: relative; }
.header .title{ padding-left: 20px; padding-top: 10px; float: left; }
.header .title h1{ color: #fff; font-size: 40px; font-weight: bold; padding: 0px; margin: 0px 0px 10px 0px; }
.header .title h2{ color: #fff; font-size: 30px; font-weight: bold; padding: 0px; margin: 0px; }
.header .logo{ float: left; padding: 5px;}
.header .logo img{ max-width: 100px; }
.header .www{ right: 0px; padding: 5px 20px 0px 0px; position: absolute; }
.header .www a{ color: #fff; font-weight: bold; }
.header .search{}
.header .search{ width: 200px; right: 0px; margin-top: 65px; margin-right: 20px; position: absolute; }
.header .search input[type="text"]{ font-size: 12px !important; }

/*Nav Default*/
.navbar-desktop{ background-color: #1a6ac1; height: 30px; margin-top: 15px; }
.navbar-desktop ul{ margin: 0px; padding: 0px; }
.navbar-desktop ul li{ float: left; width: 16.5%; list-style: none; line-height: 15px; margin-top: 7px; text-align: center; border-right: 2px #fff solid; }
.navbar-desktop ul li:last-child { border:0px; }
.navbar-desktop ul li.active{ /*background: url('/img/header-menu/menu-active.jpg') repeat-x;*/ }
.navbar-desktop ul li div{ padding: 0px 15px; }
.navbar-desktop ul li div a{ color: #fff; font-size: 15px; }
.navbar-desktop li.icon-facebook{ width: 50px; text-align: center; padding: 0px; margin-top: 2px; }

.navbar-desktop ul li:hover .lev1{ display: block; background-color: #1a6ac1; }
.navbar-desktop ul li .lev1{ position: absolute; z-index: 999; display: none; width: inherit; border: 0px; margin-top: 2px; }
.navbar-desktop ul li .lev1 li{ float: none; padding: 5px 0px 5px 10px; text-align:left; width: 100%; height: auto; line-height:15px; white-space: nowrap; border: 0px; border-top: 1px #a6c2d0 solid; }
.navbar-desktop ul li .lev1 li:hover{ background-color: #397ac1; }
.navbar-desktop ul li .lev1 li a{ font-size: 15px; color: #ffffff; }

/*Nav Mobile*/
.navbar-mobile{ display: none; background-color: #1a6ac1; height: 40px; line-height: 50px; }
.navbar-mobile .icon{ width: 40px; }
.navbar-mobile .icon img{ cursor: pointer; margin-left: 5px; }
.navbar-mobile .menu{ background-color: #fff; width: 100%; position: relative; display: none; z-index: 9999; border-bottom: 5px #1a6ac1 solid; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; box-shadow: 2px 2px 15px #818283; border-left: 2px #1a6ac1 solid; border-right: 2px #1a6ac1 solid; }
.navbar-mobile .menu ul{ margin: 0px; padding-left: 20px; }
.navbar-mobile .menu ul li{ list-style: none; width: 100%; }
.navbar-mobile .menu ul li .bullet{ background: url('/img/icons/icon-arrow.png') left center no-repeat; padding-left: 25px; }
.navbar-mobile .search{ float: right; width: 200px; margin: 4px 4px 0px 0px; }
.navbar-mobile .search input{ }
/*.navbar-mobile .icon-facebook{ float: right; width: 40px; padding: 3px; }*/

.inner-block{ background-color: #fff; display: inline-block; width: 100%; }
.page-title{ padding: 0px 0px 0px 0px; margin: 0px; text-shadow: 2px 2px 8px #acadae; color: #000; font-size: 35px; }

.frm-search{  }
.frm-search input[type="text"]{ font-size: 14px; background-color: transparent; border: 0px; border-bottom: 1px #acadae solid; margin-top: 2px; padding: 2px; width: 130px; color: #ccc; }
.frm-search input[type="submit"]{ display: none; }

.default-block1 .first img{ height: 150px; }

.default-videos{  }
.default-videos .item{ width:100%; max-height: 330px; overflow: hidden; display: inline-block; position: relative; }
.default-videos .item .title{
    width: 100%; padding: 10px; position: absolute; background-color: #000; color: #fff;
    /*visibility: hidden;*/
    opacity: 0.5;
    transition: visibility 0s, opacity 0.7s linear;
}
.default-videos .item:hover .title{
    visibility: visible;
    opacity: 0.7;
}

.content-list{}
.content-list .item{}
.content-list .item .image {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.content-list .item .image img {
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* IE 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
}
.content-list .item:hover img {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
    transform:scale(1.25);
}

.video-list{}
.video-list .item{}
.video-list .item .image {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.video-list .item .image img {
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* IE 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
}
.video-list .item:hover img {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
    transform:scale(1.25);
}

.btn-goto-top {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #1a6ac1;
    color: white;
    cursor: pointer;
    padding: 10px;
    border-radius: 10px;
    opacity: 0.7;
    font-size: 12px;
}

.btn-goto-top:hover {
    background-color: #555;
}

.lesson-tab{ }
.lesson-tab ul{ margin: 0px; padding: 0px; border-bottom: 5px #ffb200 solid; display: table; width: 100%; }
.lesson-tab ul li{ list-style: none; float: left; margin-right: 5px; }
.lesson-tab ul li div{ padding: 10px 20px; color: #fff; font-size: 20px; }
.lesson-tab ul li div a{  }

.volunteer-bar{ width: 100%; padding: 5px; background-color: #fff; text-align: right; font-size: 13px; display: inline-block; }

.register-box{ border-right: 1px #ccc solid; }

.playstore-banner{ width: 100px; height: 30px; margin-top: -40px; margin-left: 20px; position:relative; }
.playstore-banner-more{ width: 200px; height: 35px; margin-top: -25px; float: right; position:relative; }

.main-nav-scrolled {
    position: fixed !important;
    left: 0;
    right: 0;
    top: 0;
}

.coach-list{}
.coach-list .video-pay{ position: absolute; width: 60%; margin: 0px auto; display: none; }
.coach-list .thumb:hover .video-pay{ display: block; }

.thumbnail-left{ display: none; }

@media (max-width: 500px) {
    .thumbnail-left{ display: block; }
    .thumbnail-right{ display: none; }
}