.opcionesdePago{
    display: block;
    width: 90%;
    height: auto;
    margin: 2% 5%;
    background: rgb(241, 231, 231);
    border-radius: 10px;
    font-family: 'Crimson Pro', serif;
    padding: 2%;
    color: rgb(65, 56, 56);

}
.botonesPagoPedido{
    float: right;
    background: darkblue;
    color: white;
    width: 15%;
    padding: 3px;
    border-radius:5px;
    margin: 0% 5%;
    cursor: pointer;
}

/* separacion de texto  */
.concretar_elPedido br{
    display: none;
}

.textoTransferencia{
    font-size: 16px;
}

/* RESPONSIVE A PARTIR DE ESTE PUNTO */
@media screen and (max-width: 700px){
    .opcionesdePago button{
        width: auto;
    }
}
@media screen and (max-width: 625px){
    .opcionesdePago{
        font-size: 13px;
    
    }
    .textoTransferencia{
        font-size: 13px;
    }
}
@media screen and (max-width: 525px){
    .opcionesdePago{
        font-size: 11px;
    
    }
    .opcionesdePago button{
        width: 80px;
        font-size: 10px;
    }
    .textoTransferencia{
        font-size: 12px;
    }
}
@media screen and (max-width: 475px){
    .opcionesdePago{
        font-size: 10px;
    
    }
    .opcionesdePago button{
        width: 60px;
        font-size: 7px;
    }
    .textoTransferencia{
        font-size: 11px;
    }
}
@media screen and (max-width: 420px){
    .opcionesdePago{
        font-size: 10px;
    
    }
    .opcionesdePago button{
        width: 40px;
        font-size: 7px;
        margin: 0%;
    }

}
@media screen and (max-width: 350px){
    .opcionesdePago{
        font-size: 9px;
    
    }
    .opcionesdePago button{
        width: 35px;
        font-size: 7px;
        margin: 0%;
    }
    .textoTransferencia{
        font-size: 10px;
    }
}
@media screen and (max-width: 315px){
    .concretar_elPedido br{
        display: block;
    }
    
}
@media screen and (max-width: 255px){
    .textoTransferencia{
        font-size: 8px;
    }
    
}