.reveal {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 0;
    width: 30px;
    height: 30px;
    background-color: #EB268F;
    border-radius: 100px;
    
    text-align: center;
    cursor: pointer;
    transition: height .3s ease-in-out,
                width .3s ease-in-out,
                border-radius .3s ease-in-out,
                margin .3s ease-in-out;
  }
  
  .reveal > img {
    width: 25px;
    margin: 3px;
  }
  
  .reveal-content {
    width: 500px;
    padding: 10px;
    background-color: #fff;
    opacity: 0;
    text-align: center;
    pointer-events: none;
    transition: opacity .01s ease-in-out;
  }
  
  .reveal-content img {
    width: 240px;
    opacity: 0;
    transition: width .01s ease-in-out,
                opacity .01s ease-in-out;
  }
  
  .reveal-content p {
    margin: 10px 0;
    color: .2d2d2d;
    margin-top: -20px;
    opacity: 0;
    transition: margin .01s ease-in-out,
                opacity .01s ease-in-out;
  }
  
  .reveal:hover {
    width: 500px;
    z-index: 1;
    border-radius: 5px;
    margin-left: -50px;
  }
  
  .reveal:hover .reveal-content {
    opacity: 1;
    pointer-events: all;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    transition: opacity .3s ease-in-out .3s;
  }
  
  .reveal:hover .reveal-content img {
    width: 480px;
    opacity: 1;
    transition: width .3s ease-in-out .4s,
                opacity .3s ease-in-out .4s;
  }
  
  .reveal:hover .reveal-content p {
    margin-top: 10px;
    opacity: 1;
    transition: margin .3s ease-in-out .6s,
                opacity .3s ease-in-out .6s;
  }

  .pdfspot {
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 0;
      width: 30px;
      height: 30px;
      background-color: #EB268F;
      border-radius: 100px;
      
      text-align: center;
      cursor: pointer;
      transition: height .3s ease-in-out,
                  width .3s ease-in-out,
                  border-radius .3s ease-in-out,
                  margin .3s ease-in-out;
    }
    
    .pdfspot > img {
      width: 18px;
      margin: 3px 0;
    }



    .pasilloText {
      width: 1000px;
      padding: 10px;
      background-color: #fff;
      opacity: 0;
      text-align: center;
      pointer-events: none;
      transition: opacity .01s ease-in-out;
    }
    
    .pasilloText img {
      width: 500px;
      opacity: 0;
      transition: width .01s ease-in-out,
                  opacity .01s ease-in-out;
    }
    
    .pasilloText p {
      margin: 10px 0;
      color: .2d2d2d;
      margin-top: -20px;
      opacity: 0;
      transition: margin .01s ease-in-out,
                  opacity .01s ease-in-out;
    }
    
    
    .reveal:hover .pasilloText {
      opacity: 1;
      pointer-events: all;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      transition: opacity .3s ease-in-out .3s;
    }
    
    .reveal:hover .pasilloText img {
      width: 900px;
      opacity: 1;
      transition: width .3s ease-in-out .4s,
                  opacity .3s ease-in-out .4s;
    }
    
    .reveal:hover .pasilloText p {
      margin-top: 10px;
      opacity: 1;
      transition: margin .3s ease-in-out .6s,
                  opacity .3s ease-in-out .6s;
    }