@keyframes sobre {
    from {left: -1000px;}
    to {left: 0;}
  }


.sobre{
    
    display: flex;
    width: 100%;
    height: 300px;
    justify-content: space-around ;
    align-items: flex-end;
    text-align: left;
    justify-content: flex-start; 
    margin-top: 50px;

    position: relative;
    animation: sobre 2s;

    
}


.treine{
    color: yellow;
    font-weight: 900;
    font-size: 4rem;
    font-family: 'Nunito Sans', sans-serif;
    letter-spacing: 20px;
}

.treine2{
    font-family: 'Nunito', sans-serif;
    font-size: 2rem;
    letter-spacing: 0px;
}

@media screen and (min-width: 1600px){
    .sobre{
     
        height: 550px;
    }

    .treine{
        font-size: 5.5em;
    }

    .treine2{
        font-size: 3.5em;
    }
}


@media screen and (max-width: 700px){

    .sobre{
        height: 560px;
        margin-top: 0;
        margin-bottom: 60px;
        justify-content: center;
        align-items: center;
    }

    .treine2{
        font-size: 1.5em;
    }

    .treine, .treine2 {
       
        text-align: center;
        letter-spacing: 0;
    }

}

@media screen  and (max-width: 420px){

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

    .ma-bottom {
        margin-bottom: 30px ;
    }

    .treine{
        font-size: 3.2em;
    }


    .treine2{
        font-size: 1.1em;
    }

    .sobre{
        margin-top: 30px;
        margin-bottom: 30px;
    }

}