article does not appear after CSS

I created a graphic in CSS that works fine, but when trying to position it on the page with CSS it disappears.

The CSS is this:

<?php
    header("Content-type: text/css");

    /*Aqui começa o Gráfico */
    $pqtv = 0.75;
    $qtv = $pqtv * 100;
    $grau = $pqtv * 180;
    //linear gradient
    $corlinear = "orange";
    $corlinearHEX = "102, 102, 102,";
    $cordafonte = "orange";
    $cordefundo = "#fff";
        ?>

    .quantidades {
      float: left;
      position: relative;
      transform: rotate(<?php echo $grau ?>deg);
         background: linear-gradient(0deg, <?php echo $corlinear; ?> 50%, rgba(<?php echo $corlinearHEX; ?> 0.2) 50%); }
      .quantidades, .quantidades:before, .quantidades:after {
        width: 12rem;
        height: 12rem;
        border-radius: 50%; }
      .quantidades:before, .quantidades:after {
        position: absolute;
        top: 0;
        left: 0;
        color: <?php echo $cordafonte; ?>;
        text-align: center; }
      .quantidades:before {
        content: "QTDES";
        width: 12rem;
        height: 12rem;
        background: <?php echo $cordefundo; ?> content-box;
        border-radius: 50%;
        padding: .5em;
        box-sizing: border-box;
        font-size: 2rem;
        line-height: 8rem;
        transform: rotate(-<?php echo $grau ?>deg); }
      .quantidades:after {
        content: "<?php echo $qtv; ?>%";
        line-height: 13rem;
        background: linear-gradient(Transparent 50%, <?php echo $cordefundo; ?> 50%);
        transform: scale(1.1) rotate(-<?php echo $grau ?>deg);
        line-height: 13rem; }


    /*Aqui o posicionamento do gráfico na página */
    #content1{
        background: #e7eef5;
        margin-top: 37px; 
        margin-left:8px;
    }

Here the HTML:

 <article  id="content1">
    <div class="quantidades"></div>
    </article>