@keyframes planos {
    from {left: -1500px;}
    to {left: 0;}
  }

.planos{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-items: center;

    position: relative;
    animation: planos 3s;
}
.retPlanos{
    
    position:relative;
    text-align: center;
    margin-top: 20px;
    width: 250px;
    background-color: rgb(251,243,21, 0.8);
    box-sizing: border-box;
    padding:50px;
   
}

.inscrevaSe{
    display: inline-block;
    position: relative;
    background-color: rgb(39, 38, 38, 0.8);
    padding: 5px 30px 5px 30px;
    bottom: 0;
    font-size: 1em;
}

.inscrevaSe:hover{
    transition: 1s;
    background-color: rgba(0, 0, 0);
}


.retPlanos h1{
    font-size: 1.3em;
    color: white;
    margin-bottom: 10px;
}

.retPlanos h4{
    font-size: 1em;
    margin-bottom: 10px;
    color: black;
    font-weight: 900;
}

@media screen and (min-width: 1600px){

    .retPlanos h1{
        font-size: 2em;;
    }

    .retPlanos h4{
        font-size: 1.8em;;
    }
    .retPlanos{
        width: 300px;
        margin-bottom: 70px;
    }

    .inscrevaSe{
        background-color: rgb(39, 38, 38, 0.8);
        padding: 15px 40px 15px 40px;
        bottom: 0;
        font-size: 1.5em;
    }

}

@media (max-width:420px){

    @keyframes planos {
        from {left: -500px;}
        to {left: 0;}
      }

      body{
          background-position-x: -800px;
      }

      .planos{
 
    
        position: relative;
        animation: planos 3s;
    }
}