/* scrollbar */

  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
  }
  ::-webkit-scrollbar-track {
    background-color: transparent;
  }


/* basic css */

  html, body, div {
    display: inline-block;
    margin: auto;
    justify-content: center;
    align-items: center;
    vertical-align: top;
  }
  .container {
    position: absolute;
    width: 80%;
    height: 80%;
    left: 10%;
    top: 10%;
    display: table-cell;
    vertical-align: middle;
  }


/* images */

  .img_wrap {
    position: relative;
    display: inline; 
    justify-content: center; 
    align-items: center;
  }
  .img_desc {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    vertical-align: bottom;
    font-size: 0.8rem;
    font-weight: bold;
    visibility: hidden;
    opacity: 0;
  }
  .img_wrap:hover .img_desc {
    visibility: visible;
    opacity: 1;
  }


/* animations */
  .zoom, .zoom-o, .oz, .ozl, .ozr, .zz, .zzo, .zl, .zlo, .zr, .zro, .zs {
    margin: 0 auto;
    display: inline-block;
    transition: 1s;
  }
  .oz:hover {opacity: 0.33; transition: 0.75s; transform: scale(1.1)}
  .ozl:hover {opacity: 0.33; transform: scale(1.1) rotate(-10deg)}
  .ozr:hover {opacity: 0.33; transform: scale(1.1) rotate(10deg)} 
  .zoom-o, .zzo, .zlo, .zro {opacity: 0.5;}
  .zoom:hover {transform: scale(1.1);}
  .zoom-o:hover {transform: scale(1.1); opacity: 1;}
  .zz:hover, .zzo:hover {transform: scale(1.5); opacity: 1;}
  .zl:hover, .zlo:hover {transform: scale(1.5) rotate(-10deg); opacity: 1;}
  .zr:hover, .zro:hover {transform: scale(1.5) rotate(10deg); opacity: 1;}
  .zs:hover {animation: swing 0.6s infinite;}
  @keyframes swing {
      0% {transform: scale(1.5) rotate(-10deg);}
     49% {transform: scale(1.5) rotate(-10deg);}
     50% {transform: scale(1.5) rotate(10deg);}
     99% {transform: scale(1.5) rotate(10deg);}
    100% {transform: scale(1.5) rotate(-10deg);}
  }
  .spin, .spin-slow, .spin-rev, .spin-slow-rev {
    animation-name: spin;
    animation-duration: 10000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform-origin: center;
  }
  .spin-slow, .spin-slow-rev {animation-duration: 100000ms;}
  .spin-rev, .spin-slow-rev {animation-direction: reverse;}
  @keyframes spin {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
  }