/* loading */
.top-loading{
    margin-top : 130px;
    margin-left: 130px;
  }
  @media (max-width: 768px) {
    .top-loading{
      margin-top : 190px;
      margin-left: 30px;
    }
  }
  
  .delay-loading{
    -webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
         -moz-animation: fadein 5s; /* Firefox < 16 */
          -ms-animation: fadein 5s; /* Internet Explorer */
           -o-animation: fadein 5s; /* Opera < 12.1 */
              animation: fadein 5s;
  }
  @keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  
  /* Firefox < 16 */
  @-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  
  /* Safari, Chrome and Opera > 12.1 */
  @-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  
  /* Internet Explorer */
  @-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  
  /* Opera < 12.1 */
  @-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  /* progress bar 1 */
  .spinner {
    position: relative;
  }
  .spinner div {
    width: 5px;
    height: 5px;
    position: absolute;
    left: -20px;
    top: 0;
    background-color: #dc3545;
    border-radius: 50%;
    animation: move 4s infinite cubic-bezier(.2,.64,.81,.23);
  }
  .spinner div:nth-child(2) {
    animation-delay: 150ms;
  }
  .spinner div:nth-child(3) {
    animation-delay: 300ms;
  }
  .spinner div:nth-child(4) {
    animation-delay: 450ms;
  }
  @keyframes move {
    0% {left: 0%;}
    75% {left:100%;}
    100% {left:100%;}
  }
  /* fine progress bar 1 */
  
  /* progress bar 2 */
  .progress {
    height: 4px;
    border-radius: 0;
  }
  /* fine progress bar 2 */
  
  /* progress bar 3 */
  .loader {
    height: 4px;
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: #ddd;
  }
  .loader:before{
    display: block;
    position: absolute;
    content: "";
    left: -200px;
    width: 200px;
    height: 4px;
    background-color: #dc3545;
    animation: loading 2s linear infinite;
  }
  
  @keyframes loading {
    from {left: -200px; width: 30%;}
    50% {width: 30%;}
    70% {width: 70%;}
    80% { left: 50%;}
    95% {left: 120%;}
    to {left: 100%;}
  }
  
  @-moz-keyframes loading {
    from {left: -200px; width: 30%;}
    50% {width: 30%;}
    70% {width: 70%;}
    80% { left: 50%;}
    95% {left: 120%;}
    to {left: 100%;}
  }
  
  @-webkit-keyframes loading {
    from {left: -200px; width: 30%;}
    50% {width: 30%;}
    70% {width: 70%;}
    80% { left: 50%;}
    95% {left: 120%;}
    to {left: 100%;}
  }
  
  @-ms-keyframes loading {
    from {left: -200px; width: 30%;}
    50% {width: 30%;}
    70% {width: 70%;}
    80% { left: 50%;}
    95% {left: 120%;}
    to {left: 100%;}
  }
  
  @-o-keyframes loading {
    from {left: -200px; width: 30%;}
    50% {width: 30%;}
    70% {width: 70%;}
    80% { left: 50%;}
    95% {left: 120%;}
    to {left: 100%;}
  }
  /* fine progress bar 3 */