.default {
  width: 100%;
  float: left; }

.videos {
  margin-bottom: 30px; }
  .videos-empty {
    text-align: center; }
    .videos-empty p {
      font-size: 24px; }
  .videos-category {
    margin: 20px 0;
    text-align: center; }
    .videos-category button {
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 10px;
      margin-right: 10px;
      cursor: pointer;
      text-transform: uppercase; }
    .videos-category .active {
      background: #2980b9;
      color: #fff; }
  .videos-first .item {
    margin-bottom: 25px; }
    .videos-first .item-img {
      position: relative;
      margin-bottom: 20px; }
      .videos-first .item-img img {
        width: 100%;
        max-height: 500px;
        object-fit: cover; }
      .videos-first .item-img .video-btn {
        width: 60px;
        height: 60px;
        display: block;
        background: url(../image/wicon21.png) center center no-repeat, rgba(0, 0, 0, 0.5);
        -moz-background-size: 28px auto;
        -o-background-size: 18px auto;
        background-size: 18px auto;
        position: absolute;
        z-index: 3;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        border-radius: 100%; }
    .videos-first .item-title .title {
      margin-bottom: 5px;
      font-size: 16px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden; }
    .videos-first .item-title .time {
      color: #929292; }
  .videos-list {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px; }
    .videos-list .item {
      width: calc(100% / 3 - 10px);
      float: left;
      margin-right: 15px;
      margin-bottom: 15px; }
      .videos-list .item:nth-child(3n+3) {
        margin-right: 0; }
      .videos-list .item-img .video-btn {
        width: 40px;
        height: 40px; }
      .videos-list .item-img img {
        max-width: 100%;
        height: 220px;
        object-fit: cover; }
  .videos-button {
    text-align: center; }
    .videos-button button {
      background: #2980b9;
      color: #fff;
      border: 0;
      border-radius: 4px;
      padding: 15px 25px;
      text-transform: uppercase;
      cursor: pointer; }

/* Loading full page */
#loading_box {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 100000;
  opacity: 0;
  visibility: hidden; }

#loading_image {
  width: 100%;
  height: 100%;
  background: url("/public/assets/image/unnamed.gif") no-repeat center center;
  background-size: 100px; }

/* loading in box */
.loading {
  position: relative;
  transition: 0.2s; }
  .loading:before, .loading:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 100000; }
  .loading:before {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); }
  .loading:after {
    background: url("/public/assets/image/unnamed.gif") no-repeat center center;
    background-size: 100px; }

/* Module progress  */
.progress-box {
  position: fixed;
  top: 0;
  width: 100%;
  height: 3px;
  background: #ffffff;
  transition: 0.1s;
  z-index: 100000;
  display: none; }

.progress-run {
  height: 100%;
  width: 0;
  background: #0000ff;
  display: block;
  transition: 0.1s; }