#gif {
  position: absolute; /* ou fixed se quiser presa à tela */
  left: 300px;   /* eixo X */
  top: 250px;    /* eixo Y */
  z-index: 10;   /* sobreposição */
  width: 260px;  /* tamanho */
  background-color: #e8e40fd5;
}

/* Mobile (até 380px) */
@media (max-width: 380px) {
  #gif {
    left: 270px;
    top: 95px;
    z-index: 3;
    width: 150px;
    opacity: 0.7;
    background-color: #ffffff00;
        opacity: 0.2;

  }
}

/* Mini Tablet (381px até 670px) */
@media (min-width: 381px) and (max-width: 670px) {
  #gif {
    left: 300px;
    top: 85px;
    z-index: 3;
    width: 250px;
    background-color: #ffffff00;
    opacity: 0.2;
  }
}

/* Tablet (671px até 991px) */
@media (min-width: 671px) and (max-width: 991px) {
  #gif {
    left: 470px;
    top: 120px;
    z-index: 5;
    width: 300px;
    background-color: #ffffff00;
    opacity: 0.2;

   }
}

/* Notebook (992px até 1200px) */
@media (min-width: 992px) and (max-width: 1200px) {
  #gif {
    left: 240px;
    top: -110px;
    z-index: 6;
    width: 240px;
    background-color: #ffffff00;
    opacity: 0.2;

  }
}


/* Notebook1 (1200px até 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
  #gif {
    left: 290px;
    top: -110px;
    z-index: 6;
    width: 240px;
    background-color: #ffffff00;
    opacity: 0.2;

  }
}



/* Desktop (1400px até 1920px) */
@media (min-width: 1400px) and (max-width: 1920px) {
  #gif {
    left: 420px;
    top: -80px;
    z-index: 6;
    width: 340px;
    background-color: #ffffff00;
    opacity: 0.2;

  }
}

/* Big (1921px pra cima) */
@media (min-width: 1921px) {
  #gif {
    left: 500px;
    top: 300px;
    z-index: 12;
    width: 400px;
    background-color: #ffffff00;
    opacity: 0.2;

  }
}