@import url('https://fonts.googleapis.com/css?family=Battambang|Hind+Vadodara&display=swap');
* {
    padding: 0;
    margin: 0;
}

body {
    /*font-family: Roboto-Regular,Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,sans-serif;*/
    /*font-family: 'Battambang','Hind Vadodara', sans-serif !important;*/
    font-family: 'Battambang', Roboto, Helvetica, Tahoma, Arial, "Microsoft YaHei";
    padding: course-block;
    background: #fff;
}

hr {
    margin-top: 0px;
    margin-bottom: 0px;
}

li {
    list-style: none;
}

a,
a:hover {
    text-decoration: none;
    color: #333333
}

.pd-0 {
    padding: 0px
}

.preload * {
    -webkit-transition: none!important;
    -moz-transition: none!important;
    -ms-transition: none!important;
    -o-transition: none!important;
    transition: none!important
}


/*===============================================
=================================================
              header top
=================================================
================================================= */

.wrapper-header {
    width: 100%;
}

.header-top {
    height: 50px;
    padding: 15px;
    border-bottom: solid 1px #C8C8C8
}

.head-language {
    margin-right: 10px
}

.head-language img {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    padding: 3px;
    margin-top: -7px;
    border: solid 1px #ddd
}

.head-language span {
    margin-right: 10px;
    padding: 0px 3px
}

.head-language a:hover {
    color: #5068ff
}

.head-info li {
    float: left;
    padding: 0px 7px
}

.head-account {
    float: right
}

.head-account li {
    float: left;
    padding: 0px 3px;
    text-transform: uppercase;
    cursor: pointer;
}

.head-account li a:hover {
    color: #5068FF
}
.noti-count{
    background: #5068FF;
    color: #fff;
    position: absolute;
    right: -14px;
    margin-top: -13px;
    border-radius: 100%;
    width: 23px;
    height: 23px;
    font-size: 12px;
    line-height: 24px;
    text-align: center;
}
.count {
    background: #5068FF;
    color: #fff;
    position: absolute;
    right: 231px;
    margin-top: -13px;
    border-radius: 100%;
    width: 23px;
    height: 23px;
    font-size: 12px;
    line-height: 24px;
    text-align: center;
}

.favorite {
    margin-right: 20px;
    font-size: 14px
}

.person-img {
    text-align: center;
    margin-top: 5px
}

.img-sophal {
    width: 130px;
    border-radius: 100%;
    border: solid 1px #C8C8C8;
    padding: 10px;
    margin-top: 51px;
}

.person-des {
    width: 700px
}


/* Search by Category
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.search-category {
    width: 55%;
}

.search-category .content-logo {
    width: 50%;
    float: right;
    padding: 6px 0px
}

.search-category .category {
    width: 25%;
    float: left;
    margin: 30px auto;
}

.search-category .category .oc-menu-bar {
    position: relative;
}

.search-category .category .oc-menu-bar .icon-list {
    position: absolute;
    top: 30%;
    left: 100%;
    color: #6f6f6f;
    font-size: 13px;
}

.search-category .category .oc-menu-bar .category-select {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-transition: none;
    border: 0px;
    background: #FFFFFF;
    color: #6f6f6f;
    padding: 12px 10px 12px 10px;
    text-transform: none;
    font-size: 15px;
    font-weight: 700;
    display: inline-block;
    vertical-align: top;
    line-height: 24px;
    border: 1px solid #C8C8C8;
    border-radius: 3px;
    -webkit-border-radius: 10px;
    -moz-appearance: 10px;
    width: 215px;
    font-size: 13px;
    height: 50px;
}


/*––––––––––search-category .input-group––––––––––––––*/

.search-category .input-group {
    width: 75%;
    float: left;
    margin: 30px auto;
}

.search-category .input-group .form-control {
    height: 50px;
    border: solid 1px #C8C8C8;
    border-radius: 0;
    width: 91%;
    margin-left: 40px;
}

.search-category .input-group .form-control:focus {
    box-shadow: none;
}

.search-category .input-group .btn {
    min-height: 50px;
    border-radius: 0;
    background: #5068FF;
    color: #fff;
    font-weight: 600;
    padding-right: 5px;
    border-radius: 0px 10px 10px 0px;
    width: 75px
}

.search-category .input-group .btn:hover {
    background: #1616F7;
}

.search-category .input-group .btn i {
    font-size: 18px;
    padding-right: 10px;
}


/*===============================================
=================================================
              wrapper-menu
=================================================
================================================= */

.main-menu-toggle {
    display: none
}

.wrapper-menu {
    width: 100%;
    position: absolute;
    z-index: 2;
}

.main-menu {
    background: #5068FF;
    height: 50px;
    text-align: center;
}

.main-menu ul {
    padding: 15px
}

.main-menu li {
    display: inline;
    padding: 20px;
}

.main-menu a {
    color: #fff;
    text-transform: uppercase
}
/*================MMenu=========================*/
nav {
    display: none
}

/*===============================================
=================================================
              wrapper-login
=================================================
================================================= */

.waraper-login {
    width: 100%;
    padding: 20px;
    float: left;
}

.login-page {
    width: 40%;
    background: #fff;
    box-shadow: #eeee 2px 2px 5px 5px;
    height: 420px;
    padding: 40px
}

.login-page .register {
    color: #5068FF
}

.login-page h4 {
    padding: 20px;
    text-transform: uppercase
}

.login-page input[type=text],
.login-page input[type=email],
.login-page input[type=password],
.login-page textarea {
    position: relative;
    display: block;
    width: 100%;
    height: 46px;
    color: #222;
    font-size: 14px;
    line-height: 36px;
    padding: 0px 50px;
    border: 1px solid #ddd;
    background-color: #fff;
    transition: all .3s ease;
    -ms-transition: all .3s ease;
    -webkit-transition: all .3s ease;
}

.login-page input[type=text]:focus,
.login-page input[type=email]:focus,
.login-page input[type=password]:focus,
.login-page textarea:focus {
    border-color: #5068FF
}

.login-page textarea {
    height: 200px;
    resize: none
}

.login-page .theme-btn {
    font-size: 16px;
    font-weight: 700;
    margin-top: 10px;
    text-transform: capitalize;
    padding: 16px 39px;
    border: 2px solid #5068ff;
    background: #5068ff;
    display: inline-block;
    position: relative;
    line-height: 14px;
    cursor: pointer;
    color: #fff
}

.login-page .theme-btn:hover {
    color: #5068ff;
    border-color: #5068ff;
    background: 0 0
}

.login-page input.error,
.login-page select.error,
.login-page textarea.error {
    border-color: red!important
}

.login-page label.error {
    display: block;
    line-height: 24px;
    padding: 5px 0 0;
    margin: 0;
    text-transform: uppercase;
    font-size: 12px;
    color: red;
    font-weight: 500
}

.login-page label {
    padding: 10px 0px 0px
}

.input-group-text {
    padding: 0px;
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 400;
    color: #495057;
    text-align: center;
    background-color: #00b42d;
    border-radius: 0px;
    padding: 13px 0px;
}

.input-group-text i {
    color: #fff;
    width: 45px;
    height: 45px;
    text-align: center;
    line-height: 45px;
    font-size: 14px;
    position: absolute;
    z-index: 111;
    background: #5068ff;
}

.input-group-prepend {
    float: left;
}


/*===============================================
=================================================
              wrapper-register
=================================================
================================================= */

.waraper-register {
    width: 100%;
    padding: 20px;
    float: left;
}

.register-page {
    width: 40%;
    background: #fff;
    box-shadow: #eeee 2px 2px 5px 5px;
    height: 570px;
    padding: 40px
}

.register-page .register {
    color: #5068FF
}

.register-page h4 {
    text-transform: uppercase
}

.register-page input[type=text],
.register-page input[type=email],
.register-page input[type=password],
.register-page textarea {
    position: relative;
    display: block;
    width: 100%;
    height: 46px;
    color: #222;
    font-size: 14px;
    line-height: 36px;
    padding: 0px 50px;
    border: 1px solid #ddd;
    background-color: #fff;
    transition: all .3s ease;
    -ms-transition: all .3s ease;
    -webkit-transition: all .3s ease;
}

.register-page input[type=text]:focus,
.register-page input[type=email]:focus,
.register-page input[type=password]:focus,
.register-page textarea:focus {
    border-color: #5068FF
}

.register-page textarea {
    height: 200px;
    resize: none
}

.register-page .theme-btn {
    font-size: 16px;
    font-weight: 700;
    margin-top: 10px;
    text-transform: capitalize;
    padding: 16px 39px;
    border: 2px solid #5068ff;
    background: #5068ff;
    display: inline-block;
    position: relative;
    line-height: 14px;
    cursor: pointer;
    color: #fff
}

.register-page .theme-btn:hover {
    color: #5068ff;
    border-color: #5068ff;
    background: 0 0
}

.register-page input.error,
.register-page select.error,
.register-page textarea.error {
    border-color: red!important
}

.register-page label.error {
    display: block;
    line-height: 24px;
    padding: 5px 0 0;
    margin: 0;
    text-transform: uppercase;
    font-size: 12px;
    color: red;
    font-weight: 500
}

.register-page label {
    padding: 10px 0px 0px
}

.input-group-text {
    padding: 0px;
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 400;
    color: #495057;
    text-align: center;
    background-color: #00b42d;
    border-radius: 0px;
    padding: 13px 0px;
}

.input-group-text i {
    color: #fff;
    width: 45px;
    height: 45px;
    text-align: center;
    line-height: 45px;
    font-size: 14px;
    position: absolute;
    z-index: 111;
    background: #5068ff;
}

.input-group-prepend {
    float: left;
}


/*===============================================
=================================================
              wrapper-expertation
=================================================
================================================= */

.wrapper-expertation{
    width: 100%;
    padding: 10px 0px 0px;
    float: left;
}
.price-expertation{
    text-align:center;
    font-weight: bold;
    color: #ED1C24;
}
.price-expertation span{
    font-size: 18px
}
.name-expertation{
    font-weight: bold;
}
.name-expertation:hover{
    color: #5068FF;
    font-weight: bold;
}
.bg-detail{
    background: #C3CDFC;
    width: 80px;
    height: 80px;
    border-radius: 100%;
}
.bg-image-de{
    float: left;
    margin-left: 15px;
    margin-top: 15px;
    width: 50px;
    height: 50px;
}
.bg-desc{
    float: right;
    width: 256px;
    margin-top: -60px;
}
.expertation{
    border-bottom:solid 5px #5068ff;
    clear: both;
    padding: 10px;
    height: 100px;
    box-shadow: #eee 2px 2px 3px 3px;
}
.wrapper-expertation .view-more{
    background: #5068FF;
    color: #fff;
    padding: 5px 15px;
}
/*===============================================
=================================================
              wrapper-popular-course
=================================================
================================================= */
.wrapper-popular-course{
    width: 100%;
    float: left;
    padding: 10px 0px 10px 0px;
}
.wrapper-popular-course h4{
    text-transform: uppercase;
}
.list-popular{
    height:400px;
    background: #fff;
    float: left;
    padding: 10px;
    margin-right: 10px;
    margin-top: 10px;
    box-shadow: #7C8A92 1px 2px 3px;
}
.list-popular img{
    width: 100%;
    height: 180px
}
.list-popular .des{
    padding: 10px;
    line-height: 5px;
    border-top: dotted solid 3px #C8C8C8
}
.list-popular .des a :hover , .book_title:hover{color: #5068ff}
.list-popular .des p{
    font-size: 12px;
    color: #999999
}
.list-popular-rule{border: dashed 1px #C8C8C8 }
.top-star{color: #ffc010;margin-top: 10px}
.top-star span{
    color: #333339;
    font-family: 'Battambang', Roboto, Helvetica, Tahoma, Arial, "Microsoft YaHei";
    font-size: 11px
}
.list-popular .price{
    line-height: 35px;
}
.list-popular .price del{font-size: 14px !important}
.list-popular .price span{
    color:#ED1C24;
    font-weight: bold;
    font-size: 20px
}
.bt-popular{text-align: center;padding: 15px}
.bt-detail{
    border: solid 1px #eee;
    padding: 10px 13px;
    border-radius: 25px 0px 0px 25px;
    float: left;
    width: 110px
}
.bt-detail:hover{color: #5068FF}
.bt-buy{
    border: solid 1px #eee;
    padding: 10px 11px;
    border-radius: 0px 25px 25px 0px;
    float: left;
    width: 83px;
    cursor: pointer;
}
.bt-buy:hover{color: #5068FF}


.wrapper-expertation {
    width: 100%;
    padding: 10px 0px 0px;
    float: left;
}

.price-expertation {
    text-align: center;
    font-weight: bold;
    color: #ED1C24;
}


/*===============================================
=================================================
              wrapper-news
=================================================
================================================= */
.wrapper-news{
    width: 100%;
    padding: 10px;
    float: left;
    background: #fff
}
.wrapper-news{
    width: 100%;
    padding: 10px;
    float: left;
    background: #eee
}
.wrapper-news h4{text-transform: uppercase;}
.list-news{
    margin-right: 10px;
    margin-top: 10px;
    height: 360px
}
.list-news img{width: 100%;height: 200px}
.list-news .date{border: solid 1px #C8C8C8;padding: 4px 0px;width: 120px}
.list-news .detail{border: solid 1px #C8C8C8;padding: 0px;width: 120px}
.list-news span{background: #5068FF;color: #fff;padding: 2px 5px}

.price-expertation span {
    font-size: 18px
}

.name-expertation {
    font-weight: bold;
}

.name-expertation:hover {
    color: #5068FF;
    font-weight: bold;
}

.bg-detail {
    background: #C3CDFC;
    width: 80px;
    height: 80px;
    border-radius: 100%;
}

.bg-image-de {
    float: left;
    margin-left: 15px;
    margin-top: 15px;
    width: 50px;
    height: 50px;
}

.bg-desc {
    float: right;
    width: 256px;
    margin-top: -60px;
}

.expertation {
    border-bottom: solid 5px #5068ff;
    clear: both;
    padding: 10px;
    height: 100px;
    box-shadow: #eee 2px 2px 3px 3px;
}

.wrapper-expertation .view-more {
    background: #5068FF;
    color: #fff;
    padding: 5px 15px;
}


/*===============================================
=================================================
              wrapper-popular-course
=================================================
================================================= */

.wrapper-popular-course {
    width: 100%;
    float: left;
    padding: 10px 0px 10px 0px;
}

.wrapper-popular-course h4 {
    text-transform: uppercase;
}

.list-popular {
    height: 400px;
    background: #fff;
    float: left;
    padding: 10px;
    margin-right: 10px;
    margin-top: 10px;
    box-shadow: #7C8A92 1px 2px 3px;
}

.list-popular img {
    width: 100%;
    height: 180px
}

.list-popular .des {
    padding: 10px;
    line-height: 5px;
    border-top: dotted solid 3px #C8C8C8
}

.list-popular .des a :hover,
.book_title:hover {
    color: #5068ff
}

.list-popular .des p {
    font-size: 12px;
    color: #999999
}

.list-popular-rule {
    border: dashed 1px #C8C8C8
}

.top-star {
    color: #ffc010;
    margin-top: 10px
}

.top-star span {
    color: #333339;
    font-family: 'Battambang', Roboto, Helvetica, Tahoma, Arial, "Microsoft YaHei";
    font-size: 11px
}

.list-popular .price {
    line-height: 35px;
}

.list-popular .price del {
    font-size: 14px !important
}

.list-popular .price span {
    color: #ED1C24;
    font-weight: bold;
    font-size: 20px
}

.bt-popular {
    text-align: center;
    padding: 15px
}

.bt-detail {
    border: solid 1px #eee;
    padding: 10px 13px;
    border-radius: 25px 0px 0px 25px;
    float: left;
    width: 110px
}

.bt-detail:hover {
    color: #5068FF
}

.bt-buy {
    border: solid 1px #eee;
    padding: 10px 11px;
    border-radius: 0px 25px 25px 0px;
    float: left;
    width: 83px;
    cursor: pointer;
}

.bt-buy:hover {
    color: #5068FF
}


/*---------hover image-----------*/

.image-hover .title {
    color: #1a1a1a;
    text-align: center;
    margin-bottom: 10px;
}

.content-hover {
    position: relative;
    max-width: 400px;
    margin: auto;
    overflow: hidden;
}

.content-hover .content-overlay {
    background: #5068FF;
    position: absolute;
    height: 100%;
    width: 20%;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    -webkit-transition: all 0.4s ease-in-out 0s;
    -moz-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
}

.content-hover:hover .content-overlay {
    opacity: 1;
}

.content-image {
    width: 100%;
}

.content-details {
    position: absolute;
    text-align: center;
    padding-left: 1em;
    padding-right: 1em;
    width: 100%;
    top: 50%;
    left: 50%;
    opacity: 0;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

.content-details i {
    border: solid #fff 1px;
    padding: 5px;
    border-radius: 100%
}

.content-hover:hover .content-details {
    top: 50%;
    left: 10%;
    opacity: 1;
}

.content-details a {
    color: #fff;
}

.content-details li {
    font-weight: 500;
    letter-spacing: 0.15em;
    margin-bottom: 0.5em;
    text-transform: uppercase;
}

.content-details p {
    color: #fff;
    font-size: 0.8em;
}

.fadeIn-left {
    left: 20%;
}


/*---------end hover image-----------*/

.plese-click {
    float: left;
    padding: 10px;
    color: #999999
}

.page {
    position: absolute;
    /* right: 0; */
    bottom: 0;
    background: #E8532C;
    padding: 8px 10px;
    color: #fff;
    border-radius: 0px 10px 0px 0px;
}


/*===============================================
=================================================
              wrapper-news
=================================================
================================================= */

.wrapper-news {
    width: 100%;
    padding: 10px;
    float: left;
    background: #fff
}

.wrapper-news {
    width: 100%;
    padding: 10px;
    float: left;
    background: #eee
}

.wrapper-news h4 {
    text-transform: uppercase;
}

.list-news {
    margin-right: 10px;
    margin-top: 10px;
    height: 360px
}

.list-news img {
    width: 100%;
    height: 200px
}

.list-news .date {
    border: solid 1px #C8C8C8;
    padding: 4px 0px;
    width: 120px
}

.list-news .detail {
    border: solid 1px #C8C8C8;
    padding: 0px;
    width: 120px
}

.list-news span {
    background: #5068FF;
    color: #fff;
    padding: 2px 5px
}


/*===============================================
=================================================
              wrapper-category
=================================================
================================================= */

.wrapper-category {
    width: 100%;
    padding: 10px;
    float: left;
}

.wrapper-category h4 {
    text-transform: uppercase;
}

.list-category {
    border: solid 1px #eee;
    margin-right: 10px;
    margin-top: 10px;
}

.list-category img {
    width: 100px;
}

.category-des {
    float: right;
    line-height: 5px;
    margin-right: 70px
}


/*===============================================
=================================================
              waraper-menu-detail
=================================================
================================================= */

.waraper-menu-detail {
    width: 100%;
    background: #515570;
    height: 200px
}

.menu-detail h4 {
    color: #fff;
    padding: 60px;
}

.menu-detail {
    text-align: center;
}

.menu-detail li {
    display: inline;
    padding: 10px;
    color: #fff;
}

.menu-detail a {
    color: #fff;
    line-height: 5px
}

.list-menu-detail {
    margin-top: -60px
}

.list-menu-detail span {
    color: #fff
}


/*===============================================
=================================================
              waraper-course-detail
=================================================
================================================= */

.mg-layout {
    margin-right: 15px
}

.waraper-course-detail {
    width: 100%;
    padding: 20px;
    float: left;
}

.waraper-course-detail .title-course {
    font-size: 20px;
    color: #333333
}

.top-star-detail .name-post {
    color: #515570;
    padding: 0px 10px 0px 0px
}

.top-star-detail li {
    display: inline;
}

.top-star-detail {
    color: #ffc010;
    margin-top: -10px;
}

.top-star-detail span {
    color: #333333
}

.star-lay {
    float: right;
    margin-right: 360px
}

.title-des {
    background: #515570;
    padding: 10px;
    color: #fff;
    border-left: solid 15px #5068FF;
    font-size: 16px;
    margin-top: 20px;
    width: 100%
}

.course-duration {
    width: 50%;
    float: left;
    padding: 10px
}

.course-duration span {
    font-size: 17px;
    color: #484848
}

.course-duration i {
    float: right;
    font-size: 25px;
    color: #484848
}

.title-course-detail {
    width: 100%;
    float: left;
}

.title-course-list {
    width: 60%;
    margin-left: 75px;
    margin-top: -20px
}

.list-video li {
    background: #E6E6E6;
    width: 100%;
    float: left;
}

.list-video li {
    margin-top: 3px
}

.list-video i {
    left: 45px;
    margin-top: 10px;
    color: #fff;
    position: absolute;
    font-size: 16px
}

.preview {
    background: #5068ff;
    color: #ffff;
    padding: 3px 15px;
    border-radius: 10px;
    font-size: 10px;
    margin-top: -1px;
    position: absolute;
    z-index: 2
}

.preview:hover {
    color: #fff
}

.time {
    color: #999999;
}

.img-course {
    width: 50px
}

.video-radio {
    float: right;
    margin-top: 1px;
    color: #999999;
    font-size: 12px;
    padding: 0px 10px
}

.video-radio-leten {
    float: right;
    margin-top: -28px;
    color: #999999;
    font-size: 12px;
    padding: 0px 70px
}

.mg-video {
    margin-right: -39px;
    width: 100px;
    float: right;
    padding: 10px 40px
}

.mg-video-detail {
    float: right;
    padding: 0px 20px 0px 0px;
    margin-top: 9px
}

.end-of-course {
    text-align: center;
    color: #66B032;
    margin-top: -26px;
    margin-left: 190px
}


/*.video-radio .leten{padding: 0px 115px;}*/

.desc-view-book {
    width: 70%
}

.desc-view-book p {
    text-align: center;
    font-size: 11px
}

.bt-view-book {
    background: #5068ff;
    color: #fff;
    padding: 5px 20px;
    border-radius: 20px
}

.bt-view-book:hover {
    color: #fff
}

.list-review {
    padding: 10px;
    border-top: solid 1px #eeee;
    margin-top: 10px;
}

.name-review {
    float: left;
    width: 15%;
}

.name-review img {
    border-radius: 100%;
    width: 50px;
    height: 50px;
    text-align: center;
}

.name-desc {
    float: right;
    width: 85%
}

.star-review li {
    display: inline;
    color: #FFC010
}

.star-review .date {
    float: right;
    color: #CCCCCC
}

.modal-dialog {
    width: 50% !important;
    margin: 30px auto;
}

.modal-body {
    position: relative;
    padding: 0px;
}

.close {
    position: absolute;
    right: -30px;
    top: -13px;
    z-index: 999;
    font-size: 4rem;
    font-weight: normal;
    color: #fff;
    opacity: 1;
}

.coures-video {
    width: 100%;
    background: #ffff;
}

.name-title-course {
    width: 88%;
    float: right;
    margin-top: 7px;
}

.coures-video iframe {
    width: 100%;
    height: 250px
}

.video-detail-price {
    background: #ffff;
    box-shadow: #eee 0px 3px 3px 2px;
    width: 100%
}

.video-detail-price .fix-price {
    color: red;
    font-size: 30px;
    text-align: center;
    font-weight: bold;
}

.video-detail-price del {
    font-size: 15px;
    color: #99ACC6;
    font-weight: normal;
}

.video-detail-price .desc {
    padding: 5px 25px
}

.bank {
    padding: 10px;
    font-weight: bold;
    text-align: center;
}

.buy {
    text-align: center;
    background: #5068FF;
    padding: 10px;
}

.bt-buynow {
    color: #ffff
}

.review {
    margin-top: 10px;
    width: 100%
}

.list-review-detail {
    background: #fff;
    width: 100%;
    box-shadow: #eee 2px 3px 3px;
    float: left;
    margin-top: 5px
}

.review-img img {
    width: 30%;
    float: left;
    height: 75px
}

.review-desc {
    width: 70%;
    padding: 0px 10px;
    float: right;
}

.review-star-desc {
    display: flex;
    line-height: 2px
}

.review-star-desc li {
    color: #ffcd17
}

.amount-star {
    color: #484D6A;
    padding: 0px 2px;
    line-height: 15px
}

.price-review {
    color: red;
    font-weight: bold;
    font-size: 14px
}

.review-desc del {
    color: #99B1D0;
    font-weight: normal;
    font-size: 12px
}
.layout-row-list-detail{
    width: 100%;
    float: left;
}
/*------ load more ------*/

.load-review {
    width: 100%;
    display: none;
    padding: 10px;
    border-width: 0 1px 1px 0;
    border-style: solid;
    border-color: #fff;
    box-shadow: 0 1px 1px #ccc;
    margin-bottom: 5px;
    background-color: #f1f1f1;
    float: left;
}

#loadMore {
    padding: 5px 20px;
    text-align: center;
    border-radius: 20px;
    color: #000;
    transition: all 600ms ease-in-out;
    -webkit-transition: all 600ms ease-in-out;
    -moz-transition: all 600ms ease-in-out;
    -o-transition: all 600ms ease-in-out;
}


/*------ MP3 ------*/

.container-audio {
    width: 100%;
    height: auto;
    padding: 10px;
    border-radius: 5px;
    color: #444;
    overflow: hidden;
}

.container-audio img {
    width: 100%;
    height: 350px
}

.container-audio p {
    text-align: center;
    padding: 10px;
    background: #eee;
}

audio {
    width: 100%;
}

audio:nth-child(2),
audio:nth-child(4),
audio:nth-child(6) {
    margin: 0;
}

.modal-content-custome {
    width: 450px !important;
}

.modal-custom {
    width: 500px !important;
}

.modal-log-custom {
    width: 30% !important
}


/*===============================================
=================================================
              wrapper-book
=================================================
================================================= */

.wrapper-book {
    width: 100%;
    float: left;
    padding: 20px
}

.wrapper-book h4 {
    text-transform: uppercase;
}

.wrapper-book .list-popular {
    background: #fff;
    float: left;
    padding: 10px;
    margin-right: 10px;
    margin-top: 10px;
    box-shadow: #7C8A92 1px 2px 3px;
    width: 95%;
}

.wrapper-book .list-popular img {
    width: 70%;
    border: solid #eee 1px;
    padding: 10px
}

.wrapper-book .list-popular .des {
    padding: 10px;
    line-height: 5px;
    border-top: dotted solid 3px #C8C8C8
}

.wrapper-book .list-popular .des p {
    font-size: 12px;
    color: #999999
}

.wrapper-book .list-popular-rule {
    border: dashed 1px #C8C8C8
}

.wrapper-book .top-star {
    color: #ffc010;
    margin-top: 10px
}

.wrapper-book .top-star span {
    color: #333339;
    font-family: 'Battambang', Roboto, Helvetica, Tahoma, Arial, "Microsoft YaHei";
    font-size: 11px
}

.wrapper-book .list-popular .price {
    line-height: 35px;
}

.wrapper-book .list-popular .price del {
    font-size: 16px !important
}

.wrapper-book .list-popular .price span {
    color: #ED1C24;
    font-weight: bold;
    font-size: 26px
}

.wrapper-book .bt-popular {
    text-align: center;
    padding: 15px
}

.wrapper-book .bt-detail {
    border: solid 1px #eee;
    padding: 10px 13px;
    border-radius: 25px 0px 0px 25px;
    float: left;
    width: 110px
}

.wrapper-book .bt-detail:hover {
    color: #5068FF
}

.wrapper-book .bt-buy {
    border: solid 1px #eee;
    padding: 10px 11px;
    border-radius: 0px 25px 25px 0px;
    float: left;
    width: 83px
}

.wrapper-book .bt-buy:hover {
    color: #5068FF
}


/*===============================================
=================================================
              wrapper-book-detail
=================================================
================================================= */

.waraper-book-detail {
    width: 100%;
    padding: 20px
}

.book-price span {
    font-weight: bold;
    font-size: 30px;
    color: red
}

.book-price del {
    color: #99A8C5
}

.bt-buy-book {
    background: #5068FF;
    color: #fff;
    padding: 10px 100px
}

.img-book-mobile {
    width: 300px;
    height: 350px
}

.for-pay {
    margin-top: 20px;
    cursor: pointer;
}

.bt-buy-book:hover {
    color: #fff
}

.wishlist {
    border: solid 1px #99A8C5;
    padding: 10px;
    color: #99A8C5
}

.wishlist:hover {
    color: #5068FF
}

.star-book-detail i {
    color: #FFC010
}

.star-book-detail span {
    color: #000000
}


/*---- slide in book detail page----*/

.wrap {
    width: 100%;
    height: 100%;
}

.slick-slide img {
    width: 100%;
    height: 270px;
    width: 95%
}

.slider-wrapper {
    width: 100%;
    text-align: center;
}

.prev1 {
    background: #5068ff;
    padding: 8px;
    color: #fff;
    cursor: pointer;
    position: absolute;
    position: relative;
    bottom: 13%;
    width: 30px;
    height: 30px;
    z-index: 9999;
}

.next1 {
    background: #5068ff;
    padding: 8px;
    color: #fff;
    cursor: pointer;
    position: absolute;
    position: relative;
    bottom: 13%;
    width: 30px;
    height: 30px;
    z-index: 9999;
}


/*===============================================
=================================================
              wrapper-news-detail
=================================================
================================================= */

.wrapper-news-detail {
    width: 100%;
    padding: 20px
}

.news-detail-left span {
    float: left;
    padding: 0px 5px 5px;
    color: #9F9CB8
}

.news-detail-left img {
    width: 100%
}

.news-detail-des {
    padding: 10px 0px 0px 0px
}

.list-blog-news {
    background: #fff;
    box-shadow: #eee 1px 2px 2px;
    display: flex;
    border-bottom: solid 1px #eeee
}

.list-news-detail-des {
    padding: 0px 10px 10px
}

.list-news-detail-des span {
    color: #9F9CB8
}

.list-blog-news p {
    font-weight: bold;
    padding: 10px 0px
}

.list-blog-news img {
    width: 120px;
    height: 90px
}


/*---- Our Gallary---*/

.magnific-img img {
    width: 175px;
    height: 180px;
}

.magnific-img {
    display: inline-block;
    padding: 2px
}

a.image-popup-vertical-fit {
    cursor: -webkit-zoom-in;
}

.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
    opacity: 0;
    -webkit-backface-visibility: hidden;
    /* ideally, transition speed should match zoom duration */
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
    opacity: 1;
}

.mfp-with-zoom.mfp-ready.mfp-bg {
    opacity: 0.98;
}

.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
    opacity: 0;
}

.mfp-arrow-left:before {
    border-right: none !important;
}

.mfp-arrow-right:before {
    border-left: none !important;
}

button.mfp-arrow,
.mfp-counter {
    opacity: 0 !important;
    transition: opacity 200ms ease-in, opacity 2000ms ease-out;
}

.mfp-container:hover button.mfp-arrow,
.mfp-container:hover .mfp-counter {
    opacity: 1 !important;
}


/* Magnific Popup CSS */

.mfp-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1042;
    overflow: hidden;
    position: fixed;
    background: #0b0b0b;
    opacity: 0.8;
}

.mfp-wrap {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1043;
    position: fixed;
    outline: none !important;
    -webkit-backface-visibility: hidden;
}

.mfp-container {
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 0 8px;
    box-sizing: border-box;
}

.mfp-container:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
    display: none;
}

.mfp-content {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
    text-align: left;
    z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
    width: 100%;
    cursor: auto;
}

.mfp-ajax-cur {
    cursor: progress;
}

.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
    cursor: -moz-zoom-out;
    cursor: -webkit-zoom-out;
    cursor: zoom-out;
}

.mfp-zoom {
    cursor: pointer;
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
    cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
    cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.mfp-loading.mfp-figure {
    display: none;
}

.mfp-hide {
    display: none !important;
}

.mfp-preloader {
    color: #CCC;
    position: absolute;
    top: 50%;
    width: auto;
    text-align: center;
    margin-top: -0.8em;
    left: 8px;
    right: 8px;
    z-index: 1044;
}

.mfp-preloader a {
    color: #CCC;
}

.mfp-preloader a:hover {
    color: #FFF;
}

.mfp-s-ready .mfp-preloader {
    display: none;
}

.mfp-s-error .mfp-content {
    display: none;
}

button.mfp-close,
button.mfp-arrow {
    overflow: visible;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    display: block;
    outline: none;
    padding: 0;
    z-index: 1046;
    box-shadow: none;
    touch-action: manipulation;
}

button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

.mfp-close {
    width: 44px;
    height: 44px;
    line-height: 44px;
    position: absolute;
    right: 0;
    top: 0;
    text-decoration: none;
    text-align: center;
    opacity: 0.65;
    padding: 0 0 18px 10px;
    color: #FFF;
    font-style: normal;
    font-size: 28px;
    font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover,
.mfp-close:focus {
    opacity: 1;
}

.mfp-close:active {
    top: 1px;
}

.mfp-close-btn-in .mfp-close {
    color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
    color: #FFF;
    right: -6px;
    text-align: right;
    padding-right: 6px;
    width: 100%;
}

.mfp-counter {
    position: absolute;
    top: 0;
    right: 0;
    color: #CCC;
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
}

.mfp-arrow {
    position: absolute;
    opacity: 0.65;
    margin: 0;
    top: 50%;
    margin-top: -55px;
    padding: 0;
    width: 90px;
    height: 110px;
    -webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
    margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
    opacity: 1;
}

.mfp-arrow:before,
.mfp-arrow:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 35px;
    margin-left: 35px;
    border: medium inset transparent;
}

.mfp-arrow:after {
    border-top-width: 13px;
    border-bottom-width: 13px;
    top: 8px;
}

.mfp-arrow:before {
    border-top-width: 21px;
    border-bottom-width: 21px;
    opacity: 0.7;
}

.mfp-arrow-left {
    left: 0;
}

.mfp-arrow-left:after {
    border-right: 17px solid #FFF;
    margin-left: 31px;
}

.mfp-arrow-left:before {
    margin-left: 25px;
    border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
    right: 0;
}

.mfp-arrow-right:after {
    border-left: 17px solid #FFF;
    margin-left: 39px;
}

.mfp-arrow-right:before {
    border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
    padding-top: 40px;
    padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
    top: -40px;
}

.mfp-iframe-scaler {
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #000;
}


/* Main image in popup */

img.mfp-img {
    width: auto;
    max-width: 100%;
    height: auto;
    display: block;
    line-height: 0;
    box-sizing: border-box;
    padding: 40px 0 40px;
    margin: 0 auto;
}


/* The shadow behind the image */

.mfp-figure {
    line-height: 0;
}

.mfp-figure:after {
    content: '';
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 40px;
    display: block;
    right: 0;
    width: auto;
    height: auto;
    z-index: -1;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #444;
}

.mfp-figure small {
    color: #BDBDBD;
    display: block;
    font-size: 12px;
    line-height: 14px;
}

.mfp-figure figure {
    margin: 0;
}

.mfp-bottom-bar {
    margin-top: -36px;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    cursor: auto;
}

.mfp-title {
    text-align: left;
    line-height: 18px;
    color: #F3F3F3;
    word-wrap: break-word;
    padding-right: 36px;
}

.mfp-image-holder .mfp-content {
    max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
    cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape),
screen and (max-height: 300px) {
    /**
       * Remove all paddings around the image on small screen
       */
    .mfp-img-mobile .mfp-image-holder {
        padding-left: 0;
        padding-right: 0;
    }
    .mfp-img-mobile img.mfp-img {
        padding: 0;
    }
    .mfp-img-mobile .mfp-figure:after {
        top: 0;
        bottom: 0;
    }
    .mfp-img-mobile .mfp-figure small {
        display: inline;
        margin-left: 5px;
    }
    .mfp-img-mobile .mfp-bottom-bar {
        background: rgba(0, 0, 0, 0.6);
        bottom: 0;
        margin: 0;
        top: auto;
        padding: 3px 5px;
        position: fixed;
        box-sizing: border-box;
    }
    .mfp-img-mobile .mfp-bottom-bar:empty {
        padding: 0;
    }
    .mfp-img-mobile .mfp-counter {
        right: 5px;
        top: 3px;
    }
    .mfp-img-mobile .mfp-close {
        top: 0;
        right: 0;
        width: 35px;
        height: 35px;
        line-height: 35px;
        background: rgba(0, 0, 0, 0.6);
        position: fixed;
        text-align: center;
        padding: 0;
    }
}

@media all and (max-width: 900px) {
    .mfp-arrow {
        -webkit-transform: scale(0.75);
        transform: scale(0.75);
    }
    .mfp-arrow-left {
        -webkit-transform-origin: 0;
        transform-origin: 0;
    }
    .mfp-arrow-right {
        -webkit-transform-origin: 100%;
        transform-origin: 100%;
    }
    .mfp-container {
        padding-left: 6px;
        padding-right: 6px;
    }
}


/*===============================================
=================================================
              wrapper-event
=================================================
================================================= */

.waraper-event {
    width: 100%;
    padding: 10px;
    float: left;
}

.waraper-event h4 {
    text-transform: uppercase
}

.list-event {
    background: #f2f3f7;
    margin-right: 10px;
    margin-top: 15px;
    height: 270px;
}

.date-event {
    background: #5068FF;
    color: #fff;
    text-align: center;
    padding: 5px 19px;
    font-size: 15px;
    border-radius: 20px;
}

.list-event h5 {
    text-align: center;
    padding: 10px;
    line-height: 22px
}

.event-address {
    text-align: center;
    border-top: #eee solid 1px;
    padding: 20px;
    height: 140px
}

.event-detail-left img {
    width: 100%
}


/*===============================================
=================================================
              wrapper-event-detail
=================================================
================================================= */

.waraper-event-detail {
    width: 100%;
    padding: 20px
}

.event-detail-left {
    color: #515570
}

.list-event-detail {
    border: solid 1px #eee;
    margin-top: 10px
}

.list-event-detail p:hover {
    color: #00001F
}

.bg-date {
    background: #5068FF
}

.bg-date p {
    color: #fff;
    padding: 10px 10px 10px 10px
}

.bg-date p:hover {
    color: #fff
}

.list-event-detail a {
    padding: 10px;
    font-weight: bold;
}

.list-event-detail .desc {
    padding: 0px 10px
}


/*===============================================
=================================================
              wrapper-about
=================================================
================================================= */

.waraper-about {
    width: 100%;
    padding: 20px
}

.our-skill-desc {
    margin-top: 10px
}

.about-gold {
    padding: 20px;
    border: solid 1px #eee;
    background: #C3CDFC;
    margin-top: 20px;
}


/*===============================================
=================================================
              wrapper-contact
=================================================
================================================= */

.waraper-contactus {
    width: 100%;
    padding: 20px
}

.list-contact {
    background: #f2f3f7;
    padding: 20px;
    height: 100px;
    margin-right: 10px
}

.list-contact p {
    text-align: center;
}

.massage-us {
    width: 100%;
    margin-top: 50px;
    float: left;
}

.massage-us input[type=text],
.massage-us input[type=email],
.massage-us input[type=password],
.massage-us textarea {
    position: relative;
    display: block;
    width: 100%;
    height: 46px;
    color: #222;
    font-size: 14px;
    line-height: 36px;
    padding: 0px 30px;
    border: 1px solid #ddd;
    background-color: #fff;
    transition: all .3s ease;
    -ms-transition: all .3s ease;
    -webkit-transition: all .3s ease
}

.massage-us input[type=text]:focus,
.massage-us input[type=email]:focus,
.massage-us input[type=password]:focus,
.massage-us textarea:focus {
    border-color: #5068FF
}

.massage-us textarea {
    height: 200px;
    resize: none
}

.massage-us .theme-btn {
    font-size: 16px;
    font-weight: 700;
    margin-top: 10px;
    text-transform: capitalize;
    padding: 16px 39px;
    border: 2px solid #5068ff;
    background: #5068ff;
    display: inline-block;
    position: relative;
    line-height: 14px;
    cursor: pointer;
    color: #fff
}

.massage-us .theme-btn:hover {
    color: #5068ff;
    border-color: #5068ff;
    background: 0 0
}

.massage-us input.error,
.massage-us select.error,
.massage-us textarea.error {
    border-color: red!important
}

.massage-us label.error {
    display: block;
    line-height: 24px;
    padding: 5px 0 0;
    margin: 0;
    text-transform: uppercase;
    font-size: 12px;
    color: red;
    font-weight: 500
}

.massage-us label {
    padding: 10px 0px 0px
}


/*===============================================
=================================================
              wrapper-payment
=================================================
================================================= */

.waraper-payment {
    width: 100%;
    padding: 20px
}

.mg-choosen {
    padding: 0px 20px
}

.payment-left {
    background: #fff;
    box-shadow: #eee 1px 3px 3px 3px;
}

.payment-left label {
    padding: 10px 0px 0px
}

.title-des-pay {
    background: #515570;
    padding: 10px;
    color: #fff;
    border-left: solid 15px #5068FF;
    font-size: 16px;
    width: 100%
}

.img-payment-big {
    width: 300px;
    height: 350px;
    padding: 20px
}

.img-book-course {
    width: 100px;
    height: 110px;
    padding: 7px 0px 2px;
    float: left;
}

.payment-left p {
    padding: 10px 15px
}

.price-list-video {
    float: right;
    padding: 24px 495px 0px 0px;
    font-weight: bold;
}

.price-list-book {
    float: right;
    padding: 29px 505px 0px 0px;
    font-weight: bold;
}

.list-select-video {
    width: 100%;
    padding: 0px 15px 5px 15px
}

.checkbox input {
    border: solid 1px red
}

.payment-right {
    background: #fff;
    box-shadow: #eee 1px 3px 3px 3px;
    padding: 5px
}

.payment-right label {
    font-size: 13px
}

.payment-right h3 {
    text-align: center
}

.payment-right .theme-btn:hover {
    color: #5068ff;
    border-color: #5068ff;
    background: 0 0
}

.payment-right .theme-btn {
    width: 100%;
    font-size: 16px;
    font-weight: 700;
    margin-top: 10px;
    text-transform: capitalize;
    padding: 16px 39px;
    border: 2px solid #5068ff;
    background: #5068ff;
    display: inline-block;
    position: relative;
    line-height: 14px;
    cursor: pointer;
    color: #fff
}

.title-pay {
    margin-top: 10px;
    font-size: 16px
}

.title-way {
    font-size: 16px;
    font-weight: bold;
}

.list-way-to-pay {
    display: inline;
    padding: 10px
}

.border-img img {
    border: solid 1px #eee;
    margin-right: 7px;
    padding: 10px
}

.img-pay {
    width: 70px !important;
    height: 70px !important
}

.aba-pay1 {
    height: 100px;
    padding: 10px 25px;
}

.aba-pay1 .img-pay {
    margin-top: 15px
}

.aba-pay2 {
    height: 100px;
    padding: 10px 25px;
}

.aba-des1 {
    float: right;
    width: 240px;
    line-height: 0px;
    margin-top: 20px;
    font-weight: bold;
}

.aba-des2 {
    float: right;
    width: 240px;
    line-height: 0px;
    margin-top: 10px;
    font-weight: bold
}

.aba-pay {
    width: 100%;
    background: red;
    padding: 10px
}

.test {
    line-height: 16px !important;
}

.list-payment {
    display: flex;
}

.payment-right p {
    padding: 10px 20px
}

.payment-price {
    font-size: 20px;
    font-weight: bold;
}

.pay-cate {
    margin-top: -30px;
    font-size: 12px;
    color: #909797
}

.pay-total {
    border-top: solid 1px #eeee;
}

.title-total {
    width: 100px
}

.subtotal {
    display: flex;
}

.subtotal .total {
    padding: 10px;
    font-weight: bold;
    margin-left: 190px
}

.total-amount {
    border-top: solid 1px #eeee;
}

.subtotal-a {
    display: flex
}

.subtotal-a .title-total {
    font-weight: bold;
}

.subtotal-a .total {
    padding: 10px;
    font-weight: bold;
    margin-left: 190px;
    font-size: 20px
}

.check-amount-video {
    float: left;
    padding: 24px 10px 0px 0px;
}

.text-amount-video {
    float: right;
    font-size: 12px;
    padding: 27px 5px 0px 0px;
}

.list-video-payment li {
    border-bottom: solid 1px #eee
}

.list-video-payment .img-course {
    width: 90px;
    height: 70px;
    padding: 5px 0px
}

.title-list-book {
    font-weight: bold;
    margin-top: -20px
}

.f-price {
    padding: 15px;
    float: left;
    margin-top: 10px
}


/*===============================================
=================================================
              warapper-payment-success
=================================================
================================================= */

.warapper-payment-success {
    width: 100%;
    padding: 100px
}

.payment-lay {
    width: 500px;
    background: #fff;
    margin: 0 auto;
    box-shadow: #eee 2px 2px 3px 3px;
    padding: 20px;
}

.payment-lay img {
    width: 250px;
    height: 250px
}

.bt-done {
    background: #5068FF;
    padding: 5px 30px;
    color: #fff
}

.bt-done:hover {
    color: #ffff
}


/*===============================================
=================================================
              wrapper-footer
=================================================
================================================= */

.wrapper-footer {
    width: 100%;
    padding: 10px;
    float: left;
    background: #222222;
    color: #fff
}

.wrapper-footer li a {
    color: #fff
}

.social li {
    width: 30px;
    height: 30px;
    float: left;
    border: solid 1px #fff;
    border-radius: 100%;
    padding: 5px 9px;
    margin-right: 10px
}

.footer-small {
    width: 100%;
    padding: 10px 0px 0px 10px;
    float: left;
}

.footer-small .design {
    float: right;
}

.design a {
    color: #999999
}

.pagination {
    float: right
}

.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
    background: #5068ff;
    border-color: #5068ff;
}


/*===============================================
=================================================
              Live Chat Fb
=================================================
================================================= */

.fb-livechat,
.fb-widget {
    display: none
}

.ctrlq.fb-button,
.ctrlq.fb-close {
    position: fixed;
    right: 24px;
    cursor: pointer
}

.ctrlq.fb-button {
    z-index: 1;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyOCAxMjgiIGhlaWdodD0iMTI4cHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB3aWR0aD0iMTI4cHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnPjxyZWN0IGZpbGw9IiMwMDg0RkYiIGhlaWdodD0iMTI4IiB3aWR0aD0iMTI4Ii8+PC9nPjxwYXRoIGQ9Ik02NCwxNy41MzFjLTI1LjQwNSwwLTQ2LDE5LjI1OS00Niw0My4wMTVjMCwxMy41MTUsNi42NjUsMjUuNTc0LDE3LjA4OSwzMy40NnYxNi40NjIgIGwxNS42OTgtOC43MDdjNC4xODYsMS4xNzEsOC42MjEsMS44LDEzLjIxMywxLjhjMjUuNDA1LDAsNDYtMTkuMjU4LDQ2LTQzLjAxNUMxMTAsMzYuNzksODkuNDA1LDE3LjUzMSw2NCwxNy41MzF6IE02OC44NDUsNzUuMjE0ICBMNTYuOTQ3LDYyLjg1NUwzNC4wMzUsNzUuNTI0bDI1LjEyLTI2LjY1N2wxMS44OTgsMTIuMzU5bDIyLjkxLTEyLjY3TDY4Ljg0NSw3NS4yMTR6IiBmaWxsPSIjRkZGRkZGIiBpZD0iQnViYmxlX1NoYXBlIi8+PC9zdmc+) center no-repeat #0084ff;
    width: 40px;
    height: 40px;
    text-align: center;
    bottom: 24px;
    border: 0;
    outline: 0;
    border-radius: 60px;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    -o-border-radius: 60px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .06), 0 2px 32px rgba(0, 0, 0, .16);
    -webkit-transition: box-shadow .2s ease;
    background-size: 80%;
    transition: all .2s ease-in-out
}

.ctrlq.fb-button:focus,
.ctrlq.fb-button:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .09), 0 4px 40px rgba(0, 0, 0, .24)
}

.fb-widget {
    background: #fff;
    z-index: 2;
    position: fixed;
    width: 360px;
    height: 435px;
    overflow: hidden;
    opacity: 0;
    bottom: 0;
    right: 24px;
    border-radius: 6px;
    -o-border-radius: 6px;
    -webkit-border-radius: 6px;
    box-shadow: 0 5px 40px rgba(0, 0, 0, .16);
    -webkit-box-shadow: 0 5px 40px rgba(0, 0, 0, .16);
    -moz-box-shadow: 0 5px 40px rgba(0, 0, 0, .16);
    -o-box-shadow: 0 5px 40px rgba(0, 0, 0, .16)
}

.fb-credit {
    text-align: center;
    margin-top: 8px
}

.fb-credit a {
    transition: none;
    color: #bec2c9;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    text-decoration: none;
    border: 0;
    font-weight: 400
}

.ctrlq.fb-overlay {
    z-index: 0;
    position: fixed;
    height: 100vh;
    width: 100vw;
    -webkit-transition: opacity .4s, visibility .4s;
    transition: opacity .4s, visibility .4s;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .05);
    display: none
}

.ctrlq.fb-close {
    z-index: 4;
    padding: 0 6px;
    background: #365899;
    font-weight: 700;
    font-size: 11px;
    color: #fff;
    margin: 8px;
    border-radius: 3px
}

.ctrlq.fb-close::after {
    content: 'x';
    font-family: sans-serif
}


/** ==============================================
 * Dashboard Account Setting
 ==================================================*/

.dashboard-setting {
    width: 100%;
    background: #F2F2F2;
    padding: 70px 0px;
}

.link-menu {
    margin-top: 30px
}

.accordion {
    width: 100%;
    background: #FFF;
    border: 1px solid #ddd;
    padding: 0px 20px 20px 20px;
    margin: 10px 0px 10px 0px;
    box-shadow: #eee 2px 3px 3px;
    border-radius: 10px
}

.accordion h3 {
    padding: 10px 0px;
    text-align: center;
    color: #5068FF;
}

.accordion .link {
    cursor: pointer;
    display: block;
    padding: 15px 15px 15px 42px;
    font-size: 14px;
    font-weight: 700;
    position: relative;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.accordion .link a {
    text-decoration: none;
    color: #4d4d4d;
}

.accordion .link:hover i,
.accordion a .link:hover {
    color: #ffff;
}

.accordion .link:hover {
    background: #183ace;
}

.accordion li i {
    position: absolute;
    top: 16px;
    left: 12px;
    font-size: 18px;
    color: #4d4d4d;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.accordion li i.fa-chevron-down {
    right: 12px;
    left: auto;
    font-size: 16px;
}

.accordion li.current-menu {
    background: #5068ff
}

.accordion li.current-menu a,
.accordion li.current-menu i {
    color: #4E4E4E;
}

.accordion li.open i.fa-chevron-down {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}


/**
 * Submenu
 -----------------------------*/

.submenu {
    display: none;
    background: #2a3c91;
    font-size: 14px;
}

.submenu li {
    border-bottom: 1px solid #e9e9ec;
}

.submenu a {
    background: #3F88F7;
    display: block;
    text-decoration: none;
    color: #fff;
    padding: 12px;
    padding-left: 42px;
    -webkit-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

.submenu a:hover {
    background: #2040cf;
    color: #fff !important;
}


/** ==============================================
 * My Profile
 ==================================================*/

.profile-img img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-top: 20px
}

.profile-img p {
    line-height: 5px
}

.profile-img .profile-logout {
    border: solid 1px #eee;
    padding: 10px 20px;
    box-shadow: #eee 2px 3px 3px;
}

.profile-img .profile-logout:hover {
    color: #5068FF
}

.main-profile {
    width: 100%;
    padding: 20px;
    border: solid 1px #ddd;
    float: left;
    margin-top: 10px;
    background: #fff;
    border-radius: 10px;
    box-shadow: #eee 2px 3px 3px;
    margin-left: 10px
}

.main-profile h4 {
    text-transform: uppercase;
    color: #515570;
    text-align: center;
    border-bottom: solid 1px #eee;
    padding: 10px
}

.main-profile input[type=text],
.main-profile input[type=email],
.main-profile input[type=password] {
    position: relative;
    display: block;
    width: 100%;
    height: 46px;
    color: #222;
    font-size: 14px;
    line-height: 36px;
    padding: 0px 20px;
    border: 1px solid #ddd;
    background-color: #fff;
    transition: all .3s ease;
    -ms-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    float: left;
    margin: 10px;
}

.main-profile textarea {
    position: relative;
    display: block;
    width: 100%;
    height: 70px;
    color: #222;
    font-size: 14px;
    line-height: 36px;
    padding: 0px 20px;
    border: 1px solid #ddd;
    background-color: #fff;
    transition: all .3s ease;
    -ms-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    float: left;
    margin: 10px;
}

.main-profile .custome-upload {
    position: relative;
    display: block;
    width: 100%;
    height: 46px;
    color: #222;
    font-size: 14px;
    line-height: 36px;
    padding: 0px 20px;
    border: 1px solid #ddd;
    background-color: #fff;
    transition: all .3s ease;
    -ms-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    float: left;
    margin: 10px;
}

.main-profile input[type=text]:focus,
.main-profile input[type=email]:focus,
.main-profile input[type=password]:focus,
.main-profile textarea:focus {
    border-color: #5068FF
}

.main-profile label {
    margin-bottom: 11px !important
}

.main-profile label.error {
    display: block;
    line-height: 24px;
    padding: 5px 0 0;
    margin: 0;
    text-transform: uppercase;
    font-size: 12px;
    color: red;
    font-weight: 500;
}

.main-profile label {
    padding: 10px 0px 10px
}

.fa-heart {
    color: #F08C2C !important;
}

.rate-custom {
    margin: 0px !important;
}

.form-control {
    min-height: 45px;
    background: #fff;
    box-shadow: none !important;
    border-color: #e3e3e3;
    border-radius: 0px !important;
}

.btn-edit {
    background: #5068FF;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    padding: 4px 15px
}

.btn-cancel {
    background: #E11A22;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    padding: 4px 15px
}

.btn-save {
    background: #CF4E1E;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    padding: 4px 15px;
    border: solid 2px #CF4E1E;
}

.btn-update {
    background: #48c0d0;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    padding: 4px 15px
}

.bt-right {
    float: right;
    margin-top: 10px
}

.browse_file {
    margin-left: 0px !important
}


/********** File Input Style starts here ********/

.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.inputfile+label {
    max-width: 80%;
    font-size: 14px;
    /* 20px */
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    /* 10px 20px */
}

.no-js .inputfile+label {
    display: none;
}

.inputfile:focus+label,
.inputfile.has-focus+label {
    outline: -webkit-focus-ring-color auto 5px;
}

.inputfile+label * {
    /* pointer-events: none; */
    /* in case of FastClick lib use */
}

.inputfile+label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.25em;
    /* 4px */
    margin-right: 0.25em;
    /* 4px */
}


/* style 2 */

.inputfile-2+label {
    color: #000;
    border: 1px solid #dddd;
    padding: 10px;
    margin-left: 10px;
    margin-top: 10px
}

.inputfile-3+label {
    color: #515570;
    border: 1px solid #dddd;
    padding: 10px;
    font-size: 10px
}

.inputfile-2:focus+label,
.inputfile-2.has-focus+label,
.inputfile-2+label:hover {
    color: #722040;
}


/** ==============================================
 * My Order
 ==================================================*/

.des-order {
    display: flex;
    border-bottom: 1px solid #eee;
    margin-top: 5px;
    padding: 10px
}

.des-order img {
    width: 100px;
    height: 100px
}

.order-name {
    margin-left: 10px;
    width: 400px
}

.date-order {
    margin-left: 100px;
    color: #99A2BF;
    width: 310px;
    margin-top: 7px
}

.delete-order a {
    margin-left: 80px;
    font-size: 18px;
    color: #99A2BF
}

.write-review {
    background: #5068FF;
    padding: 5px 5px;
    height: 30px;
    width: 160px;
    color: #fff;
    font-size: 12px;
    margin-left: 10px;
}

.write-reviews {
    background: #5068FF;
    padding: 5px 5px;
    height: 30px;
    width: 160px;
    color: #fff;
    font-size: 12px;
    margin-left: 10px;
}

.write-review button {
    color: #fff;
    padding: 16px;
}

.write-review:hover {
    color: #fff
}

.order {
    line-height: 10px
}

.order-name .price del {
    color: #A2A2BF;
}

.des-order .price span {
    color: red;
    font-size: 16px;
    font-weight: bold
}

.des-order .price {
    margin-top: 6px
}

.custome-content {
    border: 0px solid rgba(0, 0, 0, .2) !important;
    border-radius: 0px !important;
    width: 600px;
    height: 450px;
}

.custome-dialog {
    width: 30% !important
}

.form-review {
    padding: 20px
}


/*------ order rate star in popup ------*/

.inner-content input[type="radio"] {
    display: none;
}

.inner-content i {
    color: #dddddd;
    font-size: 28px;
    cursor: pointer;
}

.inner-content input[type="radio"]:checked~label i {
    color: #FFD700;
}

.inner-content {
    width: 100%;
    direction: rtl;
    margin-left: -420px;
    margin-top: -20px;
}

.inner-content h3 {
    margin: 0 0 15px 0;
    font-size: 24px;
}

.inner-content input:checked+label {
    color: #555;
    border: 0px;
    border-top: 0px;
    border-bottom: 0px;
    cursor: pointer;
}

.btn-submit {
    color: #fff !important;
    background-color: #5068FF;
    width: 150px;
    float: right;
    margin-top: 20px
}


/** ==============================================
 * My Fevorite
 ==================================================*/

.des-fevorite {
    display: flex;
    border-bottom: 1px solid #eee;
    margin-top: 5px;
    padding: 10px
}

.des-fevorite img {
    width: 100px;
    height: 110px
}

.fevorite-name {
    margin-left: 10px;
    width: 330px
}

.date-favorite {
    margin-left: 100px;
    color: #99A2BF;
    width: 200px
}

.delete-favorite a {
    margin-left: 80px;
    font-size: 18px;
    color: #99A2BF
}

.buy-fevorite {
    background: #5068FF;
    padding: 10px;
    margin-top: 20px;
    width: 150px
}

.buy-fevorite a {
    color: #fff;
    padding: 26px
}

.fevorite {
    line-height: 10px
}


/** ==============================================
 * Billing History
 ==================================================*/

.none-desktop {
    display: none
}

.head-billing {
    display: flex;
    background-color: #5068FF;
}

.head-billing h5 {
    padding: 2px 30px;
    color: #fff;
}

.body-billing {
    display: flex;
    border-bottom: solid 1px #eee
}

.body-billing p {
    padding: 10px 30px 0px 30px
}

.view-play {
    background: #da9e31;
}

.view-leten {
    background: #0A9E4D;
}

.no-count {
    padding: 5px;
    font-size: 11px
}

.type {
    color: #00B42D
}

.fa-exclamation-triangle {
    color: #d3d34f;
}


/*===============================================
=================================================
                    Excersise
=================================================
================================================= */

.list-video-excersise {
    background: #fff;
    padding: 50px;
    box-shadow: #ddd 2px 3px 3px 3px;
}

.list-video-excersise li {
    background: #577284;
    padding: 10px;
}

.list-video-excersise a {
    color: #fff;
    font-weight: bold;
    font-size: 16px;
}

.button-ex {
    background-color: #5068ff;
    /* Green */
    border: none;
    color: white;
    padding: 5px 60px;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
    margin-right: 54px;
}

.answer-position {
    margin-left: 25px
}

.label-answer {
    font-size: 16px;
}

.button1 {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 6px 19px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.submit-button {
    background-color: #5068FF;
    border: none;
    color: white;
    padding: 6px 19px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}


/* //loading */

.loader {
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
}

.loader>img {
    width: 100px;
}

.loader.hidden {
    animation: fadeOut 1s;
    animation-fill-mode: forwards;
}

@keyframes fadeOut {
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

.notifications-menu-width{
    width: 400px !important;
}
.info-desc{
    padding: 10px  5px;
}
.bg-content1{
    color:#FF3333;
    font-weight: bold;
    font-size: 15px;
    text-align: center
}
.bg-content2{
    color: #fff;
    background: #3366FF;
    text-align: center;
    border-radius: 0px 0px 8px 8px;
}
.bg-announce{
    float: left;
    margin-top: 4px;
    border-radius: 10px;
    background: #FFCC00;
    border: solid 3px #FF9900;
    width: 100%
}

/* //youtube iframe */
.info-desc{
    text-align: center;
    padding: 10px  5px ;
}
.wrap{
    height: 500px;
    overflow: hidden
}

.iframe-width {
    height:500px;
    background:#000000;
    position: relative;
    width: 100%
}

#overlay{
    left: 0;
    width: 100%;
    height: 448px;
    background-color: transparent;
    z-index: 1;
    position: absolute;
    margin-top: -500px
}

.view{
    text-align: center;
    background: #5068FF;
    margin-top: 0px;
    padding: 10px;
    position: absolute;
    width: 100%;
}
.view a{
    color: #fff
}
.fa-check-circle{
    color: green !important;
}