/* ---------[ Responsive Design Elements ]--------- */
@media only screen and (max-width: 768px) {

}

@media only screen and (max-width:640px) {
    .hl-bt-act{
        display:none;
    }
}

@media only screen and (max-width:768px) {
    #page {
        min-width: 320px;
    }
    .wrapper{
        width: 100%;
    }
    #header{
        padding: 9px 20px;
    }
    .site-name {
        font-size: 13px;
    }
    .site-slogan {
        font-size: 11px;
        margin-bottom: 0;
    }

    #highlight .head {
        margin-bottom: 0;
    }

    #highlight {
        min-height: auto;
    }
    .hl-title {
        display: table;
        font-size: 21px;
        margin: 20px auto 15px;
        width: 100%;
    }
    .hl-list {
        margin: 20px auto 0;
    }
    .hl-list > li {
        margin: 5px 0;
        padding: 0px 10px 10px;
        width: 100%;
    }



    .hl-list > li:nth-child(1),
    .hl-list > li:nth-child(2),
    .hl-list > li:nth-child(3) {
        background: none;
    }

    #highlight .next-bt {
        margin: 10px 0 30px;
    }
    .hl-next {
        max-width: 290px;
        text-align: center;
    }
    .hl-next > span:first-child {
        border-radius: 10px;
        border-right: 1px solid #fff;
    }
    .hl-next > span:last-child {
        border-radius: 10px;
        float: none;
        margin-top: 10px;
    }
    #program::after, #program::before{
        display: none;
    }
    .program-inner {
        height: auto;
        margin: 0 auto;
        padding: 0 0 10px;
    }
    .program-inner::before{
        display: none;
        background-image: url("../images/m/girl.png");
    }
    .pg-title {
        font-size: 30px;
        padding: 15px 0 10px;
    }
    .pg-title .pstar {
        background-image: url("../images/m/star-white.png");
        height: 45px;
        width: 33px;
    }
    .pg-title .pg-ttm {
        font-size: 14px;
        line-height: 1;
        margin: 5px 10px 0 0;
    }
    .pg-title .yellow {
        font-size: 26px;
    }
    .pg-ttm2 {
        font-size: 12px;
        height: auto;
        line-height: 20px;
        margin-left: 4px;
        margin-top: 0;
    }
    .pg-title .pg-ttm1 {
        font-size: 30px;
    }
    .pg-ttlg {
        font-size: 25px;
        margin-top: 0;
    }

    .pg-title .pg-ttm2 .pstar {
        display: none;
    }
    .pg-des {
        font-size: 12px;
        margin-top: -10px;
        text-align: justify;
    }
    .pg-list {
        background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
        font-size: 13px;
        margin: 0;
        padding: 15px 0;
    }
    .pg-list > li {
        min-height: 80px;
        padding: 5px 0 30px 75px;
    }
    .next-bt {
        font-size: 20px;
        height: 40px;
        line-height: 39px;
        padding: 0 20px;
    }
    #system{
        background: #fff;
    }
    .buld {
        background: rgba(0, 0, 0, 0) url("../images/m/buld.png") no-repeat scroll center bottom;
        height: 79px;
        left: auto;
        right: 0;
        top: -10px;
        width: 63px;
    }
    .sys-title {
        font-size: 16px;
        margin: 10px;
        position: relative;
        z-index: 2;
    }
    .sys-title > span span {
        display: block;
        float: none;
    }
    .sys-title .pstar {
        display: none;
        margin: 0;
    }
    .sys-title .pstar:first-child{
        display: block;
    }
    .sys-list {
        padding: 40px 20px 0;
    }
    .sys-list > li {
        font-size: 13px;
        margin-bottom: 20px;
        margin-right: 10%;
        padding: 110px 0 0;
        text-align: justify;
        width: 45%;
    }
    .sys-list > li:nth-child(2n+1) {
        clear: both;
    }
    .sys-list > li:nth-child(2n){
        margin-right: 0;
    }
    .sys-list > li:nth-child(1) {
        background: rgba(0, 0, 0, 0) url("../images/books.png") no-repeat scroll center 0;
        margin-top: 0;
    }
    .sys-list > li:nth-child(2) {
        background: rgba(0, 0, 0, 0) url("../images/clipboard.png") no-repeat scroll center 0;
        margin-top: 0;
    }
    .sys-list > li:nth-child(3) {
        background: rgba(0, 0, 0, 0) url("../images/video.png") no-repeat scroll center 0;
        margin-top: 0;
    }
    .sys-list > li:nth-child(4) {
        background: rgba(0, 0, 0, 0) url("../images/video-lecture.png") no-repeat scroll center 0;
    }

    .st-title {
        font-size: 20px;
    }
    .flipster .flipster-nav {
        margin-bottom: 0;
        padding: 0 20px;
    }
    .flipster .flipster-nav .flip-nav-category, .flipster .flipster-nav .no-category {
        width: 130px;
        margin-bottom: 10px;
    }
    .flipster .flipster-nav .flip-nav-category.flip-nav-current .flip-nav-items {
        display: none;
    }
    .teacher-tabs > li {
        margin: 5px 0;
        width: 90px;
    }
    .course-teacher-wr {
        background: transparent none repeat scroll 0 0;
        float: left;
        left: auto;
        margin-right: 15px;
        padding: 75px 0 0;
        position: relative;
        top: auto;
        width: 75px;
        height: auto;
    }
    .course-teacher-wr:after{
        display: none;
    }
    .flip-item{
        max-width: 100%;
    }
    .course-wrapper {
        border: medium none;
        margin: 0;
        padding: 0 20px;
        width: 100%;
    }
    .course-wrapper-inner{
        padding: 0;
    }
    .course-subject {
        display: none;
    }
    .course-teacher-degree {
        display: none !important;
    }
    .course-teacher-name {
        display: none !important;
    }
    .course-teacher-img {
        border: 5px solid #fff;
        box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.35);
        height: 94px;
        width: 73px;
    }
    .course-name{
        font-size: 16px;
        text-align: center;
    }
    .course-name, .course-action{
        margin-left: -95px;
    }
    .course-video {
        float: none;
        max-width: 100%;
        margin: 0 auto;
    }
    .learn-free-bt-wr {
        background: transparent none repeat scroll 0 0;
        float: none;
        padding: 10px 0;
        text-align: center;
    }

    .course-wr {
        float: left;
        margin-left: -90px;
        width: 100%;
    }
    .course {
        margin: 0 0 0 95px;
        height: auto;
    }

    .course-description {
        min-height: 138px;
    }

    .teacher-detail-view {
        font-size: 12px;
        width: 75px;
    }
    .video-youtube{
        max-width: 100%;
    }
    .courses-box .next-bt-wr{
        display: none;
    }
    .carousel-teacher {
        width: 100%;
    }
    .carousel-teacher .carousel-control.left{
        left: 0;
    }
    .carousel-teacher .carousel-control.right{
        right: 0;
    }
    .t-title .star{
        display: none;
    }
    .t-title {
        font-size: 16px;
    }
    .t-des {
        font-size: 16px;
        font-weight: 300;
    }

    .student-title {
        font-size: 26px;
    }
    .flipster-student .flip-items {
        padding: 0;
    }

    .student {
        margin: 0 20px;
        width: 260px;
    }
    .carousel-student-inner::before, .carousel-student-inner::after{
        display: none;
    }
    .carousel-student-inner{
        padding: 0;
    }
    .student-des {
        font-size: 12px;
    }
    .flipster-student {
        margin: 0 auto;
    }
    #comment-box {
        background: transparent;
        width: 100%;
    }
    .copyright {
        line-height: 1.25;
    }
    .flipto-prev, .flipto-next{
        display: block;
    }

    .video-item {
        float: none;
        margin: 10px auto;
        width: 100%;
    }

    .video{
        margin: 0 auto;
    }
    .popup-bottom-left{
        position: relative;
        left: 0;
        margin-left: 0;
        margin-bottom: 30px;
    }
    .pg-title{
        text-align: center;
    }
    .pg-des > span:nth-child(1){
        width: 100%;
        margin: 0 0 15px;
        float: none;
    }
    .pg-des > span:nth-child(2){
        float: none;
        margin: 0 auto;
        text-align: center;
        width: 275px;
    }
    #comments {
        margin-top: 0;
        padding: 0;
    }
    .what-content {
        background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
        padding: 10px;
    }

    /* start new */
    .count-box-wrapper {
        text-align: center;
    }

    .hl-count-box {
        position: relative;
        left: 0;
        text-align: center;
        display: inline-block;
        margin: 0 auto;
    }

    #program .p-header h2 {
        font-size: 30px;
    }

    #program .p-content {
        padding: 0 30px;
    }

    #program .p-content .p-selling {
        font-size: 18px;
    }

    #program .p-bottom .next-bt {
        line-height: 45px;
        font-size: 20px;
        min-width: 170px;
    }

    .p-content .p-selling .box-count-time {
        display: block;
        margin: 20px auto;
        text-align: center;
    }

    .count-down-course-2 {
        margin: auto;
    }

    .slide-wrapper .c-description .c-title {
        font-size: 14px;
    }

    .count-down-course-2 .c-section .date .c-number {
        font-size: 30px;
    }

    .at-title {
        font-size: 14px;
    }

    .hl-title-2 {
        font-size: 16px;
        margin: 25px auto 0px;
    }

    .hl-title-3 {
        font-size: 13px;
    }

    .c-header h2 {
        font-size: 21px;
        margin: 20px auto 0px;
    }

    #course .tab-content .tab-pane {
        margin-top: 10px;
    }

    .feedback-button {
        font-size: 16px;
    }

    #course .tab-content .slide-wrapper {
        width: 100%;
    }

    #program .p-bottom .box-count-hs {
        background-size: 100%;
        height: 105px;
        width: 130px;
        top: -60px;
        left: -35px;
    }

    #program .p-bottom .box-count-in {
        background-size: 102%;
        height: 85px;
        width: 114px;
        margin: 7px 0 0 7px;
    }

    #program .p-bottom .box-count-in .count {
        font-size: 30px;
        font-weight: 900;
        padding-top: 6px;
    }

    #program .p-bottom .box-count-in .c-title {
        font-size: 11px;
    }

    #course .tab-content .slide-wrapper {
        width: 100%;
    }
    .slide-wrapper .c-description {
        display: inline-block;
        width: auto;
        margin: 0 30px;
    }

    .slide-wrapper .c-description .c-content .cr-btn {
        margin: 15px auto;
        width: 100%;
    }

    .slide-wrapper .c-description .c-content .course-video {
        padding: 0;
    }

    .slide-wrapper .button-right img,
    .slide-wrapper .button-left img
    {
        width: 50%;
        height: auto;
    }

    #course .course-video-learn::before {
        margin: -26px 0 0 -27px;
    }

    .slide-wrapper .c-description .c-content .cr-btn .next-bt {
        font-size: 14px;
    }

    #highlight .next-bt-wr .next-bt {
        font-size: 20px;
    }

    .video-trailer-course {
        margin: auto;
        width: 100%;
        height: 150px;
    }

    .modal-dialog {
        width: 540px;
        margin: 30px auto;
    }

    .login-box-left {
        margin-right: 15px;
    }
    /* end new */
}

@media only screen and (max-width:479px) {
    #header{
        padding: 9px 10px;
    }
    .hl-list {
        font-size: 12px;
    }
    .hl-title > span {
        display: block;
    }


    .what-title {
        font-size: 20px;
        line-height: 1.25;
    }
    .what-header {
        padding: 10px;
    }
    .what-title > strong {
        font-size: 30px;
    }
    .what-title .arrow1 {
        display: none;
    }
    .what-title .arrow2 {
        display: none;
    }
    .what-des {
        font-size: 14px;
    }

    .what-content {
        background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
        padding: 10px;
    }
    .what-box-des {
        font-size: 13px;
    }
    .what-box {
        border: medium none;
        padding: 15px 0;
    }
    .what-box-des2 {
        font-size: 13px;
    }
    .what-box-list > li {
        margin-bottom: 10px;
        width: 100%;
    }
    .what-box-content {
        font-size: 14px;
    }
    .what-content .next-bt {
        margin: 0 0 20px;
    }

    .left-features, .right-features {
        margin: 0;
        padding: 20px 15px;
        width: 100%;
    }
    .left-features {
        float: none;
    }
    .right-features-wr {
        float: none;
        margin-left: 0;
    }
    .feature-title {
        font-size: 22px;
    }
    .feature-list {
        font-size: 14px;
        margin: 20px 0;
    }
    .feature-list > li {
        background-position: 0 0 !important;
        float: left;
        height: auto;
        margin-bottom: 20px;
        padding: 0 15px 0 35px !important;
        text-align: justify;
        width: 50%;
    }
    .feature-list > li:nth-child(2n+1) {
        clear: both;
    }
    .what-box-list {
        margin: 0;
    }
    .feature-slogan{
        display: none;
    }

    #features .next-bt {
        margin: 15px 0;
    }

    #know, #reserve {
        padding: 5px 10px;
    }
    .know-title {
        padding: 0 10px;
    }
    .know-title > span {
        padding-bottom: 5px;
    }
    .know-list {
        font-size: 14px;
        padding: 0 20px 0 30px;
    }
    .know-list > li {
        float: none;
        margin-left: 0;
        width: 100%;
    }
    .know-bt-des {
        font-size: 15px;
        font-weight: normal;
        padding: 18px 10px;
    }
    #know .next-bt {
        border-radius: 15px;
        font-size: 20px;
        padding: 0 20px;
    }
    #know .next-bt::before {
        display: none;
    }
    .reserve-title {
        font-size: 20px;
    }
    #reserve .wrapper {
        padding: 0 10px;
    }
    .reserve-des {
        font-size: 16px;
    }

    #know, #reserve {
        padding: 5px 10px;
    }
    .know-title {
        padding: 0 10px;
    }
    .know-title > span {
        padding-bottom: 5px;
    }
    .know-list {
        font-size: 14px;
        padding: 0 20px 0 30px;
    }
    .know-list > li {
        float: none;
        margin-left: 0;
        width: 100%;
    }
    .know-bt-des {
        font-size: 15px;
        font-weight: normal;
        padding: 18px 10px;
    }
    #know .next-bt {
        border-radius: 15px;
        font-size: 20px;
        padding: 0 20px;
    }
    #know .next-bt::before {
        display: none;
    }
    .reserve-title {
        font-size: 20px;
    }
    #reserve .wrapper {
        padding: 0 10px;
        height: auto;
    }
    .reserve-des {
        font-size: 16px;
    }
    .cta-box {
        background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
        height: auto;
        padding: 0;
    }
    .countdown_section .countdown_amount {
        font-size: 30px;
        width: 56px;
    }
    .clockdown {
        padding: 0;
    }
    .numdown {
        padding: 10px 0;
    }
    .t-title > span {
        border-bottom: medium none;
    }
    .social-link{
        display: none;
    }
    #site-logo{
        margin-left: 0;
    }
    .name-slogan {
        width: 235px;
        text-align: center;
    }

    .logo img {
        width: 40px;
        margin: 2px;
    }

    .site-name{
        padding: 0 0 5px;
    }
    .ebook-title {
        background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
        color: #de3c0d;
        font-size: 24px;
        padding: 20px 10px;
        text-indent: 0;
    }
    .ebook-left {
        float: none;
        margin: 0 10px;
        width: auto;
    }
    .el-title {
        font-size: 15px;
    }
    .elc-des {
        font-size: 20px;
    }
    .ebook-right-wr {
        float: none;
        margin-left: 0;
        padding: 0 20px;
    }
    .ebook-right-wr::before{
        display: none;
    }
    .ebook-right {
        margin-left: 0;
        padding-bottom: 5px;
    }
    .er-title {
        background: transparent none repeat scroll 0 0;
        padding-right: 0;
    }
    .er-title > span:nth-child(1) {
        font-size: 36px;
        margin: 0;
    }
    .er-title > span:nth-child(2) {
        font-size: 22px;
        text-align: right;
    }
    .eb-list {
        font-size: 14px;
        font-weight: normal;
        margin: 30px 0 15px;
        padding: 10px;
        width: auto;
    }
    .teachers-box .next-bt {
        display: table-cell;
        font-size: 14px;
        line-height: 1.25;
        vertical-align: middle;
    }
    .teachers-box .next-bt-wr {
        display: table;
        padding: 0 15px;
    }

    /* new 2 */
    .stmodal .modal-dialog {
        width: 100%;
    }

    .modal-dialog {
        width: 100% !important;
        margin: auto 10px;
    }
    .stmodal .control-group label {
        margin-left: 2px;
    }

    .control-mwr {
        width: 100%;
    }

    #updateInfoModal.stmodal .control-group textarea,
    #updateInfoModal.stmodal .control-group input[type="text"],
    #updateInfoModal.stmodal .control-group input[type="email"] {
        width: 100%;
    }

    .login-box-left {
        width: 100%;
        border: none;
        margin-right: 0px;
        padding-right: 0px;
    }

    .login-box-right {
        float: none;
        width: 100%;
    }
    .social-login {
        text-align: center;
    }
    /* end new 2 */
}

@media only screen and (min-width: 481px) and (max-width:640px) {
    #loginModal .modal-dialog {
        width: 480px !important;
    }
    .modal-dialog {
        width: 480px !important;
    }
    .stmodal .control-group textarea,
    .stmodal .control-group input[type="text"],
    .stmodal .control-group input[type="email"] {
        width: 250px;
    }
}

@media only screen and (min-width: 641px) and (max-width: 768px) {

}
@media only screen and (min-width: 769px) and (max-width: 991px) {

}

@media only screen and (min-width: 769px) and (max-width: 959px) {

}

@media only screen and (min-width: 960px) and (max-width: 1040px) {

}