Serdji

Скорее всего он краситься, просто цвет #f5f5f5 это практический белый цвет. Может Вы хотите такой вот цвет #EDE9DE

Попробуйте так

background: rgba(245,245,245,1);
background: -moz-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(246,246,246,1) 50%, rgba(237,237,237,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(245,245,245,1)), color-stop(50%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1)));
background: -webkit-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(246,246,246,1) 50%, rgba(237,237,237,1) 100%);
background: -o-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(246,246,246,1) 50%, rgba(237,237,237,1) 100%);
background: -ms-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(246,246,246,1) 50%, rgba(237,237,237,1) 100%);
background: linear-gradient(to bottom, rgba(245,245,245,1) 0%, rgba(246,246,246,1) 50%, rgba(237,237,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#ededed', GradientType=0 );

if( window.location.pathname == undefined ||  window.location.pathname == '/') {
   $( 'button' ).hide();
};

setInterval(function  () {
	// body...
}, 180000) // 30 минут

Попробуйте использовать этот плагин. Он удобней и больше функционала.

А вы правильно настроили форму. Я сам использовал этот плагин на своем проекте, и он без всяких велосипедов добавляет этот класс. Если форма не прошла валидацию будет

<label id="lastname-error" class="error" for="lastname">Введите не мение 3-х символов</label>

Если прошла

<label id="lastname-error" class="error valid" for="lastname">Готово!</label>

Я бы на вашем месте подключил JQuery и сделал следующие. Допустим у нас есть<div id="mapBox"> у него своя высота, которая меняется как я понимаю от размеров монитора и у нас есть див в который обвернута карта <div id="map">, тогда в JQuery пишем всего две строчки и все будет работать

var mapHeight = $( '#mapBox' ).height();
$( '#map' ).css('height', mapHeight);

Можно попробовать с помощь Flexbox верстки. Видосики на эту тему тут

Попробуй запихнуть после div.row теги label && input в div.col-lg-* col-md-* col-sm-* col-xs-*

Примерно так

<div class="row">
   <div class="col-lg-* col-md-* col-sm-* col-xs-*">
      <label>.....</label>
      <input>
   </div>
</div>

* - это значение ширины в bootstrap от 1 до 12.

Тут нужно условие, можно на JQuery написать, примерно так

var height = $(window).height(),
		width  = $(window).width();

		if (height > 600 && width > 1900) {
			$('.....').animate({
				param1: value1,
				param2: value2},
				speed, function() {
			});
		} else {
			$('.....').animate({
				param1: value1,
				param2: value2},
				speed, function() {
			});
		};

Это
$('.....').animate

Имеется в виду объект или объекты которые должны перемещаться.

Я думаю Вам будет интересно посмотреть этот урок

На самом деле да, картинкой самое простое. Но если заморочеться, можно было бы создать кучу дивов со свойством display: inline-block;, что бы они шли друг за другом, добавить им нижней бордер border-bottom: 1px solid black; и border-radius. Соответственно ширину и возможно высоту. как сделать вогнутый бордер тут Как добиться обратного эффекта border-radius на css?

При фразе "после загрузки страницы" есть подозрение что дело в JS. Но так же если отображается нормально в CentOS 6 и Chromium может быть проблема в кроссбраузерности.
-webkit-
-moz-
-ms-
-o-
Конечно хорошо бы, что бы Вы дали ссылку на ваш сайт, так можно было бы точнее дать ответ.

Мне фронт нравится потому, что можно экспериментировать, видить сразу результат и получать всякие красивые штучки, а в беки этого нет, но без бека ничего нормально работать не будет