Como fazer um slide de conteúdo horizontal JS de px para% responsivo

Isso está me enlouquecendo: eu tenho um pequeno jquery que desliza três divs horizontalmente.

FIDDLE

Editar 3:Demonstração ao vivo; site completo mostrando como eu quero que ele funcione..até Eu chego a menos de 775px. Por favor, redimensione a janela para ver o que quero dizer.

EDIT, por demanda popular. O que eu quero: em telas pequenas, digamos de 700 e abaixo. Eu quero um painel para preencher a tela. De uma vez.

2ª edição:Ele funciona bem acima de 700px. Abaixo disso; Eu gostaria que a tela mostrasse apenas um painel de cada vez e, quando desejado (um clique no painel atual), o próximo painel deslizaria para o lado. Ou seja Nenhuma coluna empilhada, que é o design responsivo clássico. Por favor, veja o Fiddle. Tudo fica bem até você minimizar a janela do navegador ou usar um dispositivo móvel.

Eu defino panel1 e panel2 comofixed width, e use um css calc para manter o terceiro painel em 100% menos painel1 (200px) e painel2 (200px):(calc 100% - 400px)

Isso funciona bem, até eu entrar em telas pequenas. Em seguida, fica descontrolado: os painéis são empilhados verticalmente uns sobre os outros (quero ocultar os painéis não ativos) e, devido às larguras fixas, "vejo" pequenos pedaços de painéis esmagados à direita. Idealmente, quero que cada painel preencha as telas pequenas em 100%.

O que eu preciso de ajuda é isso:

Eu também devo

encontre uma maneira de substituir essa definição de JS da distância do slide de pixels para%

 var margins = {
        panel1: 0,
        panel2: -200,
        panel3: -400,               
    }

..e, portanto, ser capaz de fazer o meu css calc (100% - 20%) ou algo parecido.

..ou, pelo menos, encontrar uma maneira de esconder painéis quando em telas pequenas.

Todos os ponteiros são muito apreciados.