/* Neste modelo o flip é padrão com o back estático em dispositivos móveis */
.block-3 {
    margin-bottom: 0;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
    -ms-transform: perspective(1000px);
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    margin-bottom: 30px; }
    @media (max-width: 991.98px) {
      .block-3 {
        margin-bottom: 20px; } }
    .block-3:hover .back, .block-3.hover .back {
      -webkit-transform: rotateY(0deg);
      -moz-transform: rotateY(0deg);
      -o-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      transform: rotateY(0deg); }
    .block-3:hover .front, .block-3.hover .front {
      -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      -o-transform: rotateY(180deg);
      transform: rotateY(180deg); }
    .block-3, .block-3 .front, .block-3 .back {
      width: 100%;
      height: 400px; }
    .block-3 .flipper {
      -webkit-transition: 0.3s;
      -webkit-transform-style: preserve-3d;
      -ms-transition: 0.3s;
      -moz-transition: 0.3s;
      -moz-transform: perspective(1000px);
      -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
      -webkit-transition: 0.6s;
      -o-transition: 0.6s;
      transition: 0.6s;
      transform-style: preserve-3d;
      position: relative; }
    .block-3 .front, .block-3 .back {
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
      backface-visibility: hidden;
      border-radius: 0px;
      -webkit-transition: 0.3s;
      -webkit-transform-style: preserve-3d;
      -webkit-transform: rotateY(0deg);
      -moz-transition: 0.3s;
      -moz-transform-style: preserve-3d;
      -moz-transform: rotateY(0deg);
      -o-transition: 0.3s;
      -o-transform-style: preserve-3d;
      -o-transform: rotateY(0deg);
      -ms-transition: 0.3s;
      -ms-transform-style: preserve-3d;
      -ms-transform: rotateY(0deg);
      transition: 0.3s;
      transform-style: preserve-3d;
      transform: rotateY(0deg);
      position: absolute;
      top: 0;
      left: 0; }
    .block-3 .front {
      -webkit-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      background: rgba(144, 238, 144, 0.3);
      z-index: 2;
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat; }
      .block-3 .front:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: .7;
        background: rgba(255, 255, 255, 0);
        background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 38%, rgba(0, 0, 0, 0.4) 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(38%, rgba(255, 255, 255, 0.15)), color-stop(100%, rgba(0, 0, 0, 0.4)));
        background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 38%, rgba(0, 0, 0, 0.4) 100%);
        background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 38%, rgba(0, 0, 0, 0.4) 100%);
        background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 38%, rgba(0, 0, 0, 0.4) 100%);
        background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(38%, rgba(255, 255, 255, 0.15)), to(rgba(0, 0, 0, 0.4)));
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 38%, rgba(0, 0, 0, 0.4) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000', GradientType=0 ); }
      .block-3 .front .box {
        position: absolute;
        bottom: 0;
        left: 20px;
        right: 20px;
        bottom: 20px; }
        .block-3 .front .box h2, .block-3 .front .box p {
          color: #fff;
          margin: 0;
          padding: 0;
          line-height: 1.5; }
        .block-3 .front .box h2 {
          font-size: 20px;
          font-weight: 600; }
        .block-3 .front .box p {
          font-size: 12px; }
    .block-3 .back {
      background: #008000;
      -webkit-box-shadow: 0 0 70px -10px rgba(0, 0, 0, 0.4);
      box-shadow: 0 0 70px -10px rgba(0, 0, 0, 0.4);
      -webkit-transform: rotateY(-180deg);
      -moz-transform: rotateY(-180deg);
      -o-transform: rotateY(-180deg);
      -ms-transform: rotateY(-180deg);
      transform: rotateY(-180deg); }
    .block-3 .back p {
      position: absolute;
      top: 40px;
      left: 0;
      right: 0;
      text-align: center;
      padding: 0 20px;
      font-size: 16px;
      color: rgba(255, 255, 255, 0.9); }
      .block-3 .back p.botoes {
        position: absolute;
        top: 340px;
        /* z-index: 100; */
        left: 0;
        right: 0;
        text-align: center;
        padding: 0 20px;
        font-size: 16px;
        color: rgba(255, 255, 255, 0.9); }
      .block-3 .author {
      bottom: 0;
      position: absolute;
      bottom: 20px;
      left: 20px;
      right: 20px;
      width: 100px; }
      .block-3 .author .image {
        width: 60px; }
        .block-3 .author .image img {
          border-radius: 50%;
          max-width: 100%; }
      .block-3 .author .name {
        color: #fff;
        font-weight: 600; }
      .block-3 .author .position {
        display: block;
        color: rgba(255, 255, 255, 0.9);
        font-size: 13px;
        font-family: "Poppins", Arial, sans-serif;
        font-weight: normal; }
    @media (max-width: 991.98px) {
        .block-3 .front {
            -webkit-transform: rotateY(0deg);
            -moz-transform: rotateY(0deg);
            -o-transform: rotateY(0deg);
            -ms-transform: rotateY(0deg);
            transform: rotateY(0deg); }
        .block-3 .back {
            -webkit-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg);
            -o-transform: rotateY(180deg);
            transform: rotateY(180deg); } }