адаптивная верстка

Есть модалочка

Код (CSS):

1. #bg_popup, #bg_popup2{
2.     background-color: rgba(0, 0, 0, 0.8);
3.     display: none;
4.     position: fixed;
5.     z-index: 99999;
6.     top: 0;
7.     right: 0;
8.     bottom: 0;
9.     left: 0;
10. }
11.  
12. #popup {
13.     background: #fff;
14.     width: 550px;
15.     margin: 15% auto;
16.     padding: 5px 20px 13px 20px;
17.     border: 1px solid #f39c12;
18.     position: relative;
19.     -webkit-box-shadow: 0px 0px 20px #000;
20.     -moz-box-shadow: 0px 0px 20px #000;
21.     box-shadow: 0px 0px 20px #000;
22.     -webkit-border-radius: 15px;
23.     -moz-border-radius: 15px;
24.     border-radius: 5px;
25. }

ширина 550px

Хочу что бы когда открывалась на телефоне (320 х 700 например), она занимала 80% ширины экрана

пробовал так

Код (CSS):

1. @media (max-width: 768px) {
2.  
3.     #popup {
4.         width: 80%;
5.     }
6. }

чет не работает...
куда смотреть подскажите пожалуйста

вот скрин при мобильном окне 320х700

 

Видимо второе