/****************************************
 * DIV GIRATORIO EJE VERTICAL
 * *************************************/ 
     .rotate {
        background: transparent;
        border: none;
        width: 100%;
        height: 100vh;
        overflow: visible;
        justify-content: center;
        align-items: center;
        display: flex;
    }

     .rotate div.Card {
       perspective: 100vw;
       font-size: 14px;
       overflow: visible;
       /*margin: 2.5rem;*/
       width: 60rem;
       height: 42rem;
       max-width: 95%;
     }


     .rotate  .Cara,
     .rotate  .Cruz {
          width: 100%;
          height: 100%;
          padding: 1rem;
          position: absolute;
          border-radius: 5px;
          -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
          transition: transform ease-out 1s;
     }

     .rotate .Cruz {
          position: absolute;
          transform: rotateY(-180deg);
     }

     .rotate .Flip.Cara {
          transform: rotateY(-180deg) !important;
     }

     .rotate .Flip.Cruz {
          transform: rotateY(-360deg) !important;
     }

/*
<div class="rotate" id="MarcoCard">
     <div id="Card" class="Card" style="width: 32rem;height: 35rem;">
        <div class="Cara" id="Cara">
        </div>
        <div class="Cruz" id="Cruz">
        </div>
    </div>
</div>

<script>
    var btn_volver= document.getElementById("btn_volver");
    btn_volver.addEventListener('click', function() {
        check_nrp.click();
        flip();
    });

    var check_nrp= document.getElementById("check_nrp");
    check_nrp.addEventListener('change', function() {
        if (this.checked) flip();
    });

    function flip() {
      document.getElementById("Cruz").classList.toggle("Flip");
      document.getElementById("Cara").classList.toggle("Flip");
    }
</script>
*/