﻿.skeleton {
  position: relative;
  overflow: hidden;
  border: none!important;
  border-radius:5px;
  background-color:transparent !important;
  background-image:none!important;
  margin-bottom: 5px!important;
}
.skeleton-img {
  height: 100px!important;
  width: 200px!important;
}
.skeleton-title {
  display: inline-block;
  height: 36px!important;
  width: 70%!important;
}
.skeleton-title1 {
  display: inline-block;
  height: 24px!important;
  width: 70%!important;
}
.skeleton-desc1 {
  display: inline-block;
  height: 24px!important;
  width: 100%!important;
}
.skeleton-desc2 {
  display: inline-block;
  height: 40px!important;
  width: 100%!important;
}
.skeleton-desc {
  display: inline-block;
  height: 70px!important;
  width: 100%!important;
}
.skeleton-date {
  display: inline-block;
  height: 20px!important;
  width: 72px!important;
}
.skeleton-bigTitle {
  display: inline-block;
  height: 20px!important;
  width: 72px!important;
  margin: 10px 0;
}
.skeleton::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #bbb;
  animation: skeleton-loading-ani 1.5s ease-in-out infinite alternate;
}

@keyframes skeleton-loading-ani { 
  from { 
    background-color: #dddddd90;
  }
  to { 
    background-color: #dddddd30;
  }
}

@media (min-width: 320px) and (max-width:767px) {
  .skeleton-img {
    height: 100px!important;
    width: 100%!important;
  }
  .skeleton-title {
    height: 20px!important;
    width: 70%!important;
  }
  .skeleton-desc {
    height: 70px!important;
    width: 100%!important;
  }
}