.flip-card {
      background-color: transparent;
      width: 300px;
      height: 200px;
      border: 1px solid #f1f1f1;
      perspective: 1000px; /* Necessário para o 3D */
    }

    .flip-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      transition: transform 0.8s; /* Duração da animação */
      transform-style: preserve-3d; /* Permite que os elementos filhos mantenham sua 3D-ness */
    }

    .flip-card:hover .flip-card-inner {
      transform: rotateY(180deg); /* Efeito de virar */
    }

    .flip-card-front, .flip-card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden; /* Oculta o lado oposto */
    }

    .flip-card-front {
      background-color: #f0f8ff;
      color: black;
      display: flex; /* Para centralizar o conteúdo, se necessário */
      align-items: center;
      justify-content: center;
    }

    .flip-card-back {
      background-color: #2980b9;
      color: white;
      transform: rotateY(180deg); /* Gira a div traseira para que não fique invertida ao aparecer */
      display: flex; /* Para centralizar o conteúdo, se necessário */
      align-items: center;
      justify-content: center;
    }

  .pad {   
  display:inline-block; position:relative; z-index:1; width:auto; height:auto; margin:20px; padding:25px;
  border-radius:20px;
  background:linear-gradient(0.06deg, rgba(250, 250, 250, 1) 0%, 
                                      rgba(246, 246, 246, 1) 29.62%, 
                                      rgba(234, 234, 234, 1) 58.47%, 
                                      rgba(215, 215, 215, 1) 86.92%, 
                                      rgba(204, 204, 204, 1) 99.22%); 
  box-shadow:-4px 8px 8px rgba(0,0,0,0.1), -8px 16px 16px rgba(0,0,0,0.1), -16px 32px 32px rgba(0,0,0,0.15), -32px 64px 64px rgba(0,0,0,0.25);  
}
.pad:before {
  content:''; position:absolute; z-index:-1; top:0; left:0; right:0; bottom:0; margin:0;
}
.pad-z { 
  border-radius:0 100px; 
  background:linear-gradient(0.01000000000001deg, rgba(179, 179, 179, 1) 8.92%, 
                                                  rgba(213, 213, 213, 1) 31.91%, 
                                                  rgba(240, 240, 240, 1) 54.33%, 
                                                  rgba(250, 250, 250, 1) 67.52%); 
  
}
.pad.z:before {   
  margin:8px;
  border-radius:0 96px;
  background:linear-gradient(0.06deg, rgba(250, 250, 250, 1) 0%, 
                                      rgba(246, 246, 246, 1) 29.62%, 
                                      rgba(234, 234, 234, 1) 58.47%, 
                                      rgba(215, 215, 215, 1) 86.92%, 
                                      rgba(204, 204, 204, 1) 99.22%); 
}
.pad.a {
  border-radius:150px 0;
  box-shadow:-1px -1px 2px #eee, -1px 0px 3px #eee, -4px 8px 8px rgba(0,0,0,0.1), -8px 16px 16px rgba(0,0,0,0.1), -16px 32px 32px rgba(0,0,0,0.15), -32px 64px 64px rgba(0,0,0,0.25);
}
.pad.a:before {
  border-radius:168px 0;
}
.pad.b:before {
  border-radius:140px 0;
}
.pad.y:before {  
  border-left        : 15px solid rgba(179, 179, 179, 1);
  border-right       : 15px solid rgba(250, 250, 250, 1);
  border-radius      : 5px;
  box-sizing         : border-box;
  background-position: 0 0, 0 100%;
  background-repeat  : no-repeat;
  background-size    : 100% 20px;
  background-image   : linear-gradient(to right, rgba(179, 179, 179, 1) 0%, rgba(250, 250, 250, 1) 100%), 
                       linear-gradient(to right, rgba(179, 179, 179, 1) 0%, rgba(250, 250, 250, 1) 100%);
}



.pad.x { 
  background:linear-gradient(9deg, #acd07f 0%, #cdf595 100%);
    box-shadow:0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb,-4px 8px 8px rgba(0,0,0,0.1), -8px 16px 16px rgba(0,0,0,0.1), -16px 32px 32px rgba(0,0,0,0.15), -32px 64px 64px rgba(0,0,0,0.25);
}

.pad.x.y { 
  background:linear-gradient(9deg, #acd07f 0%, #cdf595 100%);
}

.pad-z-y {
  box-sizing: content-box;
  border-radius: 100px 100px 100px 100px;
  background: rgb(103,173,213);
  margin: 20px;
}

.pad.z.y:before {
  border-left        : 15px solid rgba(179, 179, 179, 1);
  border-right       : 15px solid rgba(250, 250, 250, 1);
  border-radius      : 10px 100px; margin:0px;
  box-sizing         : border-box;
  background-position: 0 0, 0 100%;
  background-repeat  : no-repeat;
  background-size    : 100% 20px;
  background-image   : linear-gradient(to right, rgba(179, 179, 179, 1) 0%, rgba(250, 250, 250, 1) 100%), 
                       linear-gradient(to right, rgba(179, 179, 179, 1) 0%, rgba(250, 250, 250, 1) 100%);  
}

.pad-w { box-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 0px 0 #b9b9b9, 0 5px 0 rgba(125, 125, 125, 0.2), 0 6px 1px rgba(0, 0, 0, 0.2), 0 0 5px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.2), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.2), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.2), 0 0 4px white, 0 0px 3px white, 1px 1px 5px rgba(255, 155, 0, 0.37), 1px 1px 10px rgba(102, 60, 0, 0.5); 
}

.pad.v {
  box-shadow: 0px 1px 2px #eee, 0px 2px 2px #e9e9e9, 0px 3px 2px #ccc, 0px 4px 2px #c9c9c9, 0px 5px 2px #bbb, 0px 6px 2px #b9b9b9, 0px 7px 2px #999, 0px 7px 2px rgba(0,0,0,.5), 0px 7px 2px rgba(0,0,0,0.1), 0px 7px 2px rgba(0,0,0,.73), 0px 3px 5px rgba(0,0,0,.3), 0px 5px 10px rgba(0,0,0,.37), 0px 10px 10px rgba(0,0,0,.1), 0px 20px 20px rgba(0,0,0,0.1);  
}

.pad.u {
   box-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}

.pad.t {
  box-shadow:0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15); 
}
.pad.s {
  box-shadow: 0px 1px 2px #eee, 0px 2px 2px #e9e9e9, 0px 3px 2px #ccc, 0px 4px 2px #c9c9c9, 0px 5px 2px #bbb, 0px 6px 2px #b9b9b9, 0px 7px 2px #999, 0px 7px 2px rgba(0,0,0,.5), 0px 7px 2px rgba(0,0,0,0.1), 0px 7px 2px rgba(0,0,0,.73), 0px 3px 5px rgba(0,0,0,.3), 0px 5px 10px rgba(0,0,0,.37), 0px 10px 10px rgba(0,0,0,.1), 0px 20px 20px rgba(0,0,0,0.1);
}
.pad.r {
  box-shadow:0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}
.pad.q {
  box-shadow:0px 1px 2px #eee, 0px 1px 3px #eee, 0px 2px 3px #e9e9e9, 0px 2px 5px #e9e9e9, 0px 3px 5px #ccc, 0px 4px 6px #c9c9c9, 0px 5px 2px #bbb, 0px 6px 2px #b1b9b9, 0px 7px 2px #999, 0px 7px 2px rgba(0,0,0,0.5), 0px 7px 2px rgba(0,0,0,0.1), 0px 7px 2px rgba(0,0,0,0.73), 0px 0px 5px rgba(255,255,255,0.3), 0px 0px 6px rgba(255,255,255,1), 0px 0px 5px rgba(255,255,255,1), 0px 0px 5px rgba(255,255,255,0.1);
}
.pad.p {
  box-shadow:0 1px 0 #444, 0 2px 0 #373737, 0 3px 0 #555, 0 4px 0 #474747, 0 5px 0 #666, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
}

.pad.o {
  box-shadow:0px 1px 0px #ccc, 0px 2px 0px #c9c9c9, 0px 3px 0px #bbb, 0px 4px 0px #b9b9b9, 0px 5px 0px #aaa, 0px 6px 1px rgba(0,0,0,0.1), 0px 0px 5px rgba(0,0,0,0.1), 0px 1px 3px rgba(0,0,0,0.3), 0px 3px 5px rgba(0,0,0,0.2), -4px 8px 8px rgba(0,0,0,0.1), -8px 16px 16px rgba(0,0,0,0.37), -16px 32px 32px rgba(0,0,0,0.25), -32px 64px 64px rgba(0,0,0,0.25);
}

.pad.n.y {
  background-image:linear-gradient(-6deg, #94dfff 0%, #67d1fb 13%, darken(#38a3d1,7%) 100%);
}

.pad.m {
   box-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 0px 0 #b9b9b9, 0 5px 0 rgba(125, 125, 125, 0.2), 0 6px 1px rgba(0, 0, 0, 0.2), 0 0 5px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.2), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.2), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.2), 0 0 4px white, 0 0px 3px white, 1px 1px 5px rgba(255, 155, 0, 0.37), 1px 1px 10px rgba(102, 60, 0, 0.5);
}

.pad.i {
  background-image:linear-gradient(to top,  #fff 0%, #fff 50%, #90dffe 73%, );
}

/*
 *  Everything below here is related to the background gradient hue effect.
    Tudo aqui abaixo está relacionado ao efeito de matiz de gradiente de fundo.
 */
/*   ORIGINAL
article {
  align-items: center;
  background-image: linear-gradient(to right, #054f7d, #00a7cf, #efe348, #861a54, #054f7d);
  background-size: 600%;
  background-position: 0 0;
  box-shadow: inset 0 0 5em rgba(0, 0, 0, 0.5);
  /*display: flex;
  font-family: 'Lato', Arial, sans-serif;
  height: 100%;
  justify-content: center;*/
  /* Animation */
/*  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-name: gradients;
}
*/

article {
  align-items: center;
  background-image: linear-gradient(to right, #d9eefc, #f1fbfd, #fcfcfc, #c6edfc, #d9eefc);
  background-size: 600%;
  background-position: 0 0;
  box-shadow: inset 0 0 5em rgba(169, 200, 251, 0.5);
  /*display: flex;
  font-family: 'Lato', Arial, sans-serif;
  height: 100%;
  justify-content: center;*/
  /* Animation */
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-name: gradients;
}

@keyframes gradients {
    0% { background-position: 0  0; }
   25% { background-position:50% 0; }
   50% { background-position:90% 0; }
   60% { background-position:60%;   }
   75% { background-position:40%;   }
  100% { background-position: 0  0; }
}
/*
body { 
  margin:15px; text-align:center; 
  * { 
    font-family:Heebo; letter-spacing:-.05em; 
  }
  h1 { 
    text-align:center; 
    text-shadow:0px 1px 0px #ccc, 0px 2px 0px #c9c9c9, 0px 3px 0px #bbb, 0px 4px 0px #b9b9b9, 0px 5px 0px #aaa, 0px 6px 1px rgba(0,0,0,0.1), 0px 0px 5px rgba(0,0,0,0.1), 0px 1px 3px rgba(0,0,0,0.3), 0px 3px 5px rgba(0,0,0,0.2), -4px 8px 8px rgba(0,0,0,0.1), -8px 16px 16px rgba(0,0,0,0.37), -16px 32px 32px rgba(0,0,0,0.25), -32px 64px 64px rgba(0,0,0,0.25); 
    span { 
      font-family:Syncopate; display:inline-block; font-size:120%; display:block; padding:0; margin:0;
    }
    a { 
      font-size:.43em; display:inline-block; padding:3px 10px 0 0; margin:-10px 0; text-shadow:0px 0px 1px white, 0px 0px 2px white; text-decoration:none; 
    }
  }
}
*/  

.titulo-3d {
   color: #009acf;
   transform: rotateY(20deg);
   text-shadow: 1px 1px 0px #b3eafc, 
                2px 2px 0px #dad9d9;

}