CSS Firefox - Ширина верхнего отступа меняется

У меня есть отзывчивая веб-страница, в которой я пытаюсь показать модальный образ внутри. Ниже приведен html модального

<div id="open_modal" class="modal">
    <div id="chicken">
        <img src="images/chicken.png" alt="McChicken"/>
        <div class="kosullar" title="lorem ipsum">Katılım Koşulları</div>
    </div>
</div>

И следующее: css, который у меня есть для модального

.modal {
  display: block;
  overflow: auto;
  z-index: 1001;
  position: absolute;
  height: 100%;
  overflow: hidden;
  padding-top: 77px;
  padding-bottom: 10px;
  opacity: 1 !important;
}

#chicken{
    height: 100%;   
    color: #fff;
    overflow: hidden;
    text-align: center;
    float:left;
}

#chicken img{
    height: 100%;   
    float: left;
}

.kosullar{
    color: #fff;
    font-size: 10px;
    height: 20px;
    background-color: #2B9BC8 !important;
    float: left;
    position: absolute;
    bottom: 15px;
    padding: 2px;
    text-align: center;
    cursor: pointer;
    border: 1px solid;
    width: 100%;
}

Как вы можете видеть в css, я добавил 77px верхнее дополнение к модальному классу, чтобы он не перекрывался с моей навигационной панелью. Кроме того, модальная должна иметь ту же высоту, что и дисплей, и его ширина должна автоматически рассчитываться в соответствии с соотношением сторон изображения. Это очень хорошо работает в Chrome (и IE, а также на удивление), но это плохо работает в Firefox. На Firefox изображение выглядит так, как должно было, но ширина модала шире, чем должно быть. Чтобы быть конкретным, ширина модала - это то, что должно было быть, если на модальном не было отступов. Как мне изменить этот css, чтобы Firefox быстро вычислил ширину модального. Вы можете посетить adwin.com.tr, чтобы увидеть проблему самостоятельно.