Как задать вертикальный резиновый отступ между 2 блоками в зависимости от высоты viewport?

Question

ValeraValera @cluberr

HTML
CSS

Как задать вертикальный резиновый отступ между 2 блоками в зависимости от высоты viewport?

Есть страница
вот как выглядит

, вот ее код

<header class="container vh100">
        <div class="vertical-center">
            <div class="row">
                <div class="logo__wripper col-md-12">
                    <a href="#">
                        <img src="./images/logo_hirez.png" alt="GoMobile" class="logo">
                    </a>
                </div>
            </div>
            <div class="row">
                <div class="velcome-text col-md-12">
                    <p>Привет! Мы агентство мобильного маркетинга Go Mobile. Единая точка входа в мир мобайла. <br>В первую очередь, мы агентство, а кроме того - платформа закупки мобильного трафика (Bidder) <br>и мобильная CPA/CPI сеть.</p>
                    <form method="post" action="#" class="">
                        <p>Круто! Что делать?</p>
                        <p>Напишите, как вас зовут
                            <input type="text" class="form-text" size="8" name="name">, что хотите
                            <input type="text" class="form-text" size="8" name="target"> и ваш e-mail
                            <input type="text" class="form-text" size="8" name="email"> .</p>
                        <p class="text-center">
                            <button class="send btn btn-lg">Отправить</button>
                        </p>
                        <p>Если еще сомневаетесь, то <a href="http://gomobile.ru/#portfolio">вот для вас наши кейсы,</a> ну и <a href="">общая презентация об агентстве.</a></p>
                        <p>Для коллег из рекламных агентств <a href="#">здесь</a> отдельное предложение.</p>
                    </form>
                </div>
            </div>
        </div>
    </header>

и css который выравнивает блок

.vh100 {
    height: 100vh;
    position: relative;
}

.vertical-center {
    position: absolute;
    top: 50%;
  transform: translateY(-50%);
}

как сделать чтобы отступ между logo и velcome-text зависил от высоты вьюпорта ?
если уменьшать высоту страницы уменьшается отступ и в итоге лого прилипает к тексту