.col-2dot4,
.col-sm-2dot4,
.col-md-2dot4,
.col-lg-2dot4,
.col-xl-2dot4 {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
.col-2dot4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}
@media (min-width: 540px) {
    .col-sm-2dot4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}
@media (min-width: 720px) {
    .col-md-2dot4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}
@media (min-width: 960px) {
    .col-lg-2dot4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}
@media (min-width: 1140px) {
    .col-xl-2dot4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}

.table-borderless td,
.table-borderless th {
    border-top:0;
}

@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?4l9i56');
  src:  url('../fonts/icomoon.eot?4l9i56#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?4l9i56') format('truetype'),
    url('../fonts/icomoon.woff?4l9i56') format('woff'),
    url('../fonts/icomoon.svg?4l9i56#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
[class^="icon-icon-"], [class*=" icon-icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1rem;
  font-size:1.1rem;
  vertical-align:bottom;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-icon-course:before {
  content: "\e900";
}
.icon-icon-dc:before {
  content: "\e901";
}
.icon-icon-home:before {
  content: "\e902";
}
.icon-icon-ifc:before {
  content: "\e903";
}
.icon-icon-info:before {
  content: "\e904";
}
.icon-icon-karoten:before {
  content: "\e905";
}
.icon-icon-question:before {
  content: "\e906";
}
.icon-icon-tri:before {
  content: "\e907";
}
html {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
}
body {
  font-family: 'Open Sans', sans-serif;
  font-size: 100%;
  color:#575756;

}
body.fe {
  padding-top:57px;
}
.fp {
  font-family: 'Playfair Display', serif;
}
.clearfix::after {
    display: block;
    clear: both;
    content: "";
}
:focus {
  outline:none !important;
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #bbb !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #bbb !important;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #bbb !important;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #bbb !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #bbb !important;
}

::placeholder { /* Most modern browsers support this now. */
   color:    #bbb !important;
}


.smaller {
  font-size:95%;
}
.small {
  font-size:.85rem;
}
.b {
  font-weight:bold;
}
.w300 {
  font-weight:300;
}
.w400 {
  font-weight:400;
}
.w600 {
  font-weight:600;
}
.w700 {
  font-weight:700;
}
a {
  color:inherit;
}
a:hover {
  color:#b9c008;
  text-decoration:none;
}
.gray {
  color:#b1b1b1;
}
.light-gray {
  color:rgba(255,255,255,0.5) !important;
}
.green {
  color:#b9c008 !important;
}
.green2 {
  color:#888c2f !important;
}
.bg-green {
  background-color:#b9c008;
}
.bg-dark {
  background-color:#575756 !important;
}
.white {
  color:#fff;
}
.black {
  color:#1d1d1b;
}
.orange {
  color:#eb6608;
}
.bg-orange {
  background-color:#eb6608 !important;
}
.bg-light {
  background-color:#f6f6f6!important;
}
.outline-1 {
  outline:1px solid #eee;
}
.text-shadow {
  text-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important
}
.lh1 {
  line-height:100%;
}


a.text-white:not(.btn):hover {
  color:#b9c008 !important;
}
.hero-title {
  font-size:4rem;
}

#top-header {
  background-color:#575756;
  height:58px;
}
#main-menu {
  top:0px;
  padding-top:0;
  padding-bottom:0;
}
#main-menu .nav-link {
  padding-left:1rem;
  padding-right:1rem;
  letter-spacing:1px;
  font-weight:300;
}
#main-menu .nav-item {
  text-align:center;
}
.navbar-dark .navbar-toggler {
  border-color:transparent;
  padding:1.6rem .5rem;
  border-radius:0;
  border:0;
}

.main-menu-btn {
  /* display: -ms-flexbox!important;
  display: flex!important; */
  -ms-flex-align: center!important;
  align-items: center!important;
  color: #888c2f;
  border-left: 1px solid #666;
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
}
.main-menu-btn:hover {
  color:#eee;
}
#navbarCollapse>ul {
  padding-bottom:1rem;
}

#search-bar {
  background:#575756;
  position:absolute;
  top:0;
  left:15px;
  right:15px;
  height:66px;
  z-index:9;
  display:flex;
  color:#aaa;
}
#search-bar input[type=text] {
  background:transparent;
  border:none;
  border-bottom:1px solid #aaa;
  margin:10px 15px 10px 0;
  font-size:1.4rem;
  color:white;
  width:100%;
}
#badge-cart-qty-mobile {
  display:none;
  width:20px;
  height:20px;
  margin-left:-3px;
  text-align:center;
  line-height:20px;
}
#badge-cart-qty {
  display:none;
}
.badge-cart-qty {
  width:20px;
  height:20px;
  margin-left:-3px;
  text-align:center;
  line-height:20px;
}

body.fe #main-body {
  min-height: calc( 100vh -  287px - 57px );
}

.img-as-bg {
  background-size:cover;
  background-position:center center;
  background-repeat: no-repeat;
}
.hero-image {
  background-size:cover;
  background-position:center center;
  background-repeat: no-repeat;
  position:relative;
  height:55vh;
  min-height:400px;
}
.hero-image.v40 {
  height:45vh;
  min-height:300px;
}
.hero-image.v30 {
  height:35vh;
  min-height:200px;
}
.hero-image.darken::before {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:rgba(0,0,0,0.4);
  display:block;
  content:"";
  z-index: 0;
}
.darken * {
  z-index:1;
}
.swiper-button-next,
.swiper-button-prev {
  color:rgba(255,255,255,0.4);
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
  color:rgba(255,255,255,0.8);
}

.featured-swiper.swiper-button-next {
  color:rgba(0,0,0,0.3);
  right:-22px;
}
.featured-swiper.swiper-button-prev {
  color:rgba(0,0,0,0.3);
  left:-10px;
}
.featured-swiper.swiper-button-next:hover,
.featured-swiper.swiper-button-prev:hover {
  color:rgba(0,0,0,0.5);
}
.featured-swiper.swiper-button-next:after {
  /* font-family: "Font Awesome 5 Pro";
  content: "\f054";
  font-weight:300;
  display:block; */
  font-size:2rem;
}
.featured-swiper.swiper-button-prev:after {
  /* font-family: "Font Awesome 5 Pro";
  content: "\f053";
  font-weight:300;
  display:block; */
  font-size:2rem;
}
.tag {
  /* border:1px solid #e6e6e6;
  background-color:transparent; */
  background-color:#efefef;
  color:#777;
  font-weight:400;
  padding:.35rem;

}
.mx-n15 {
  margin-left:-15px;
  margin-right:-15px;
}
.mx-n8 {
  margin-left:-8px;
  margin-right:-8px;
}
.combo-arrow {
  position:relative;
}
.combo-arrow:before {
  position:absolute;
  top:24%;
  right:10px;
  content: "\f078";
  font-family:"Font Awesome 5 Pro";
  display:block;
}

.academy-card {
  padding-left:5px;
  padding-right:5px;
  margin-bottom:15px;
}
.academy-card-desc {
  height:84px;
  overflow: hidden;
}
.academy-card-thumb {
  padding-top:56.25%;
  position:relative;
}
.academy-card-thumb>a {
  position:absolute;
  top:0;
  right:0;
  left:0;
  bottom:0;
}


.course-card {
  /* width:100%;
  max-width:300px;
  padding-top:200%;
  max-height:600px;
  position:relative; */
  max-width:300px;
  width:100%;
  padding-left:5px;
  padding-right:5px;
  margin-bottom:15px;
}

.course-card .inner {
  position:relative;
  background-color:#fff;
}
.course-card .course-thumb {
  width:100%;
  background-size:cover;
  background-position:center center;
  background-repeat: no-repeat;
  padding-top:120%;
  position:relative;
}
.course-thumb a,
.content-thumb a
 {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}
.prod-expiry {
  position:absolute;
  top:5px;
  left:5px;
  color:#fff;
  background:rgba(184,192,6,0.8);
  /* border-radius:3px; */
  padding:3px 5px;
  font-size:.9rem;
}
.prod-expiry.expired {
  background:rgba(192,6,6,0.6);
}
.course-card .course-body {
  padding:1rem 1.2rem;
}
.course-card-category {
  height:21px;
  overflow: hidden;
  margin-bottom:.2rem;
  color: #b9c008 !important;
}
.course-card-title {
  height:38px;
  overflow: hidden;
  margin-bottom:.3rem;
  line-height:1.3;
}
.course-card-desc {
  height:74px;
  font-size:90%;
  overflow: hidden;
  margin-bottom:.5rem;
}
.course-card-price {
  /* font-weight:600; */
  font-size:1.4rem;
  margin-top:.5rem;
  margin-bottom:1rem;
  height:30px;
}
.course-card-tags {
  height:44px;
  overflow: hidden;
}
.flex-middle {
  -ms-flex-pack: center!important;
  justify-content: center!important;
  -ms-flex-align: center!important;
  align-items: center!important;
}
/* .locked .course-thumb:before {
  content:"";
  display:block;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:rgba(0,0,0,0.5);
} */
.locked-overlay {
  display:none;
}
.locked .locked-overlay {
  color:#fff;
  text-align: center;
  position:absolute;
  z-index:0;
  top:0;
  bottom:0;
  right:0;
  left:0;
  background-color:rgba(0,0,0,0.5);
  display: -ms-flexbox!important;
  display: flex!important;
  -ms-flex-direction: column!important;
  flex-direction: column!important;
}
.locked:hover .locked-overlay>span {
  background-color:rgba(255,255,255,0.9);
  color:#444;
}


.ellipsis1 {
  display: -webkit-box !important;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow:hidden;
  white-space:normal;
}
.ellipsis2 {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
  white-space:normal;
}
.ellipsis3 {
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:hidden;
  white-space:normal;
}
.ellipsis4 {
  display: -webkit-box !important;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow:hidden;
  white-space:normal;
}

#member-sidebar-wrapper {
  position:absolute;
  height:100%;
  width:100%;
  max-width:360px;
  right:0;
}

#member-sidebar {
  overflow-y:scroll;
  position:sticky;
  top:0;
  /* height:100%; */
  max-height:100vh;
  z-index:-1;
  background:#f6f6f6!important;
  /* -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
  -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
  box-shadow: 0 5px 10px rgba(0,0,0,.2); */
}


body.member-sidebar-open #member-sidebar {
  right:0;
  z-index:9;
}
#member-wrapper {
  background-color: #f6f6f6;
}

#member-content {
  width:100%;
  min-height:80vh;
}
.menu-icon {
  text-align:center;
  margin-right:5px;
  height:16px;
  width:13px;
  display:inline-block;
}
/* .icon-course {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M98.5,26.15a74,74,0,1,0,74,74A74.11,74.11,0,0,0,98.5,26.15Zm47.75,40.79H128.74a100.36,100.36,0,0,0-6.19-19.74A58.53,58.53,0,0,1,146.25,66.94Zm10.48,33.24a58.16,58.16,0,0,1-2.67,17.45H131.13a173.79,173.79,0,0,0,.91-17.45,173.79,173.79,0,0,0-.91-17.45h22.93A58.16,58.16,0,0,1,156.73,100.18ZM98.5,158.42c-4,0-10.12-9.06-14-25h28.06C108.62,149.36,102.5,158.42,98.5,158.42ZM81.72,117.63a157.45,157.45,0,0,1,0-34.9h33.56a156.92,156.92,0,0,1,1,17.45,157.06,157.06,0,0,1-1,17.45ZM40.26,100.18a57.85,57.85,0,0,1,2.68-17.45H65.87a167.76,167.76,0,0,0,0,34.9H42.94A57.85,57.85,0,0,1,40.26,100.18ZM98.5,41.94c4,0,10.12,9.06,14,25H84.47C88.38,51,94.5,41.94,98.5,41.94Zm-24,5.26a99.69,99.69,0,0,0-6.19,19.74H50.74A58.56,58.56,0,0,1,74.45,47.2ZM50.74,133.42H68.26a99.69,99.69,0,0,0,6.19,19.74A58.63,58.63,0,0,1,50.74,133.42Zm71.81,19.74a100.36,100.36,0,0,0,6.19-19.74h17.51A58.61,58.61,0,0,1,122.55,153.16Z'/%3E%3Cpath d='M100,4.17A95.83,95.83,0,1,0,195.83,100,95.94,95.94,0,0,0,100,4.17Zm0,184.55A88.72,88.72,0,1,1,188.72,100,88.83,88.83,0,0,1,100,188.72Z'/%3E%3C/svg%3E");

} */
#member-menu span {
  display:inline-block;
}


ul#member-menu {
  /* padding-top:.5rem; */
  padding-bottom:.5rem;
}
ul#member-menu,
ul#member-menu ul,
ul#member-menu ul ul {
  font-size:1rem;
  list-style-type: none;
  padding-left:0;
  margin-bottom:0;
}
ul#member-menu>li,
ul#member-menu>li>ul>li,
ul#member-menu>li>ul>li>ul>li {
  padding-left:1.5rem;
  position:relative;
}
ul#member-menu>li {
  padding-top:.15rem;
  padding-bottom:.15rem;
}
ul#member-menu>li>a,
ul#member-menu>li>ul>li>a,
ul#member-menu>li>ul>li>ul>li>a {
  padding-top:.5rem;
  padding-bottom:.5rem;
}
.sub-menu-toggler {
  position:absolute;
  top: .25rem;
  right: 4px;
  width: 2.2rem;
  height: 2rem;
  line-height: 2.2rem;
  text-align:center;
  cursor:pointer;
  z-index:1;
}
.sub-menu-toggler:hover {
  color: #b9c008;
}
.sub-menu-toggler:before {
  font-family:"Font Awesome 5 Pro";
  content: "\f054";
  display:block;
}
.active>.sub-menu-toggler:before,
.open>.sub-menu-toggler:before {
  font-family:"Font Awesome 5 Pro";
  content: "\f078";
  display:block;
  font-
}
ul#member-menu li:last-of-type {
  padding-bottom:0;
}
ul#member-menu li a {
  display:block;
}
ul#member-menu>li.open-active,
ul#member-menu>li.active {
  background-color:#fff;
}
ul#member-menu li.active>a,
ul#member-menu li.active>span,
ul#member-menu li.open-active>a>.menu-icon
/* ,ul#member-menu li:hover>span  */
{
  color: #b9c008;
}
#member-menu li.active>a>.menu-icon,
#member-menu li.open-active>a>.menu-icon {
  font-size:1.4rem;
  margin-left:-3px;
  margin-right:8px;
}
#member-menu li.active>a>.menu-text,
#member-menu li.active>.menu-text {
  font-weight:bold;
  color:#333;
}

.breadcrumb {
  font-size:.9rem;
  color:#888;
  border-radius:0;
  background-color:unset;
  border-bottom:1px solid #eee;
  margin-bottom:0;
}
.breadcrumb span {
  font-weight:600;
  color:#414141;
}
.breadcrumb .far{
  line-height:unset;
  margin-left:4px;
  margin-right:4px;
}

.content-card {
  padding-left:5px;
  padding-right:5px;
  padding-bottom:15px;
  width:100%;
  max-width:220px;
}
.content-thumb {
  padding-top:56.25%;
  position:relative;
}
.content-card .inner {
  position:relative;
  background:#fff;
}
.content-card-body {
  /* padding:.5rem; */
  display: -ms-flexbox!important;
  display: flex!important;
  line-height:1.3;
}
.content-icon {
  /* width:1.5rem;
  height:1.5rem; */
  /* padding-top:2px; */
  margin-right:5px;
  font-weight:300;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;

}
.content-icon:before {
  display:block;
  font-family:"Font Awesome 5 Pro";
  font-size:1.3rem;
  font-weight:600;
  content:"\f02d";
}
.icon-video:before {
  content:"\f144";
}
.icon-audio:before {
  content:"\f028";
  /* content:"\f028"; */
}
.icon-file:before {
  content:"\f019";
}


.content-card-title {
  max-height:38px;
  /* font-weight:600; */
  margin-top:3px;
}

#member-settings {
  display:none;
  width:280px;
  position: absolute;
  top: 66px;
  z-index: 10;
  padding-top: 10px;
  padding-bottom:10px;
  background: #fff;
  text-align: left;
  right:0;
  border:1px solid #eee;
  /* border-radius:5px; */
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
  -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
  box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
/* #member-settings.d-block {
  display:none !important;
} */

ul.footer-links {
  font-size:95%;
}
ul.footer-links li {
  margin-bottom:3px;
}

#playlist-wrapper {
  margin:1rem;
  border-left:1px solid #ddd;
  border-top:1px solid #ddd;
  /* border-right:1px solid #ddd; */
}

.playlist-card {
  border-bottom:1px solid #ddd;
  border-right:1px solid #ddd;
  padding-left:1rem;
  padding-right:1rem;
  -ms-flex-align: center!important;
  align-items: center!important;
  /* display: -ms-flexbox!important;
  display: flex!important; */
}
.playlist-card .playlist-content-title {
  /* color: #575757; */
}

.playlist-card.locked {
  color:#bbb;
}
.playlist-content-title {
  padding-top:1.2rem;
  padding-bottom:1.2rem;
  max-width:85%;
  width:100%;
}

.playlist-card:not(.locked):hover,
.playlist-card.active {
  background:#eee;
  color:#444;
}
.playlist-card.active .playlist-content-title {
  font-weight:bold;
}

.manual-overflow {
  overflow-x:scroll;
}
.manual-overflow .swiper-slide {
  max-width:220px;
}

.content-add-to-cart {
  background-color:#ee5500;
  color:#fff !important;
  border-radius:0;
  display:block;
}
.after-content .content-add-to-cart{
  width:100%;
}

@media (min-width:361px) {
  #badge-cart-qty-mobile {
    display:inline-block;
  }
  #member-sidebar-wrapper {
    max-width:280px;
  }
  body.layout-content #member-sidebar {
    outline:1px solid #ddd;
  }

}

@media (min-width:576px) {
  /* #member-sidebar-wrapper {
    max-width:280px;
  } */
  #search-bar {
    left:140px;
  }
  .after-content {
    position:relative;
  }
  .after-content .content-add-to-cart {
    width:150px;
    margin-left:auto;
    position:absolute;
    top:0;
    right:0;
  }
}
@media (min-width:768px) {

}
@media (min-width:992px) {
  #search-bar {
    height:64px;
  }

  #navbarCollapse>ul {
    padding-bottom:0
  }
  #main-menu .nav-item {
    text-align:initial;
  }
  #main-menu {
    font-size:13px;
  }
  /* #member-settings.d-block {
    display:block !important;
  } */
  /* #member-settings {
    top:64px;
  } */
  #member-wrapper {
    background-color: #f6f6f6;
  }
  body:not(.layout-content) #member-content {
    width:calc(100% - 280px);
  }

  body:not(.layout-content) #member-sidebar-wrapper {
    position: relative;
    height:unset;
  }
  body:not(.layout-content) #member-sidebar {
    z-index:0;
    right:unset;
  }
  #playlist-wrapper {
    min-height:80vh;
    margin:0;
    border-top:none;
  }
  #content-playlist {
    position:sticky;
    top:0;
  }

}

@media (min-width:1200px) {
  #main-menu .nav-link {
    padding-left:1.4rem;
    padding-right:1.4rem;
  }
}