Cheizer

data: _.form.serialize(),

Нагуглил :))

var w=$(window).width();//после загрузки страницы сразу фиксируем начальную ширину окна браузера
            $(window).resize(function() {//после изминения окна браузера
                var new_w=$(window).width();//фиксируем новую ширину окна браузера
                if(new_w!=w) {// если "новая" ширина не равна "старой"
                    //alert('1');//делаем то что нам нужно
                    w=new_w;//и в значение "старой" ширины записываем "новую" ширину
                }
            });

//и еще вариант

var w = 0;
$( window ).load( function(){
   w = $( window ).width();
});

$( window ).resize( function(){
  if( w != $( window ).width() ){
    //Do something
    w = $( window ).width();
  }
});

Решение, смещать на свободное расстояние расстояние между пунктами первого меню.

function Menu() {
  var menu = $('#...'), 
  menu_children = menu.children(), 
  submenu = $('#...'),
  submenu_children = submenu.children();
  menu_children.each(function (i, v) {
    var next = $(this).next();
        if(next.length != 0){
        $(submenu_children[i]).css({'width': $(this).next().position().left - $(this).position().left});
      }
      else {
        $(submenu_children[i]).css({'width': $(this).width()});
      }
      });
  }

Нашел решение, продублировать пришлось код для двух колонок, не красиво, но с этим буду разбираться дальше, так как нужно для вторых колонок, вычесть высоту первых при условии что центральная колонка выше обоих. Сложно пипец.

jQuery(function($){
	
	var max_col_height = 0; // максимальная высота, первоначально 0
	$('.box_one').each(function(){ // цикл "для каждой из колонок"
		if ($(this).height() > max_col_height) { // если высота колонки больше значения максимальной высоты,
			max_col_height = $(this).height(); // то она сама становится новой максимальной высотой
		}
	});
	$('.box_one').height(max_col_height); // устанавливаем высоту каждой колонки равной значению максимальной высоты
//////////	
	var max_col_height2 = 0; // максимальная высота, первоначально 0
	$('.box_two').each(function(){ // цикл "для каждой из колонок"
		if ($(this).height() > max_col_height2) { // если высота колонки больше значения максимальной высоты,
			max_col_height2 = $(this).height(); // то она сама становится новой максимальной высотой
		}
	});
	$('.box_two').height(max_col_height2); // устанавливаем высоту каждой колонки равной значению максимальной высоты
	
});

Разобрался, в проверке нужно было так

if(astr == 'astr'){
    map.panTo(new google.maps.LatLng(57.170336067504834,65.5674305));
    map.setZoom(12);
   }

В общем, если вы прячете блок с картой по принципу display none block. То достаточно выполнить событие resize для карты.
Или в функцию отдельную запихнуть и вызывать ее когда нужно, или на событие on click

function showMap(){
google.maps.event.trigger(map, 'resize');
}
//или
$('#btn').on('click', function() {
    showMap();
google.maps.event.trigger(map, 'resize');  //или сразу
	});

Но у меня другая проблема, в модальных окнах это не сработает, так как в дереве при загрузке не было карты, и нужно инициализировать карту в окне. Тут нужно смотреть доки popup окна вашего и на callback функцию вешать вызов функции initialize(); или на события event. Но нужно вызвать initialize(); пример

$('.get-direction').on('click',function() {
    // if map is null (the first time), initiate Google maps;
    if (! map) {
      initialize();
    }
    searchAddress( $(this).html() );
    showMap();
  });
  $('.close-map').click(function() {
    hideMap();
  });

Разобрался методом тыка и интуиции, нужно было добавить в BIND кода еще BIND на CHANGE

.bind('change', function () {
                                    _.submitFu()
                            })

Попробуйте рисункам прописать align-self:center; или align-items:center

решение

const swiperSlides = document.getElementsByClassName('swiper-slide');

s6.on('slideChange', function() {
  const otherSlides = swiperSlides
  for (let index = 0; index < swiperSlides.length; index++) {
    const element = swiperSlides[index];
    element.getElementsByTagName('a')[0].style.display = 'none'
  }

  const linkElemCurrentSlide = swiperSlides[s6.realIndex].getElementsByTagName('a')
  linkElemCurrentSlide[0].style.display = 'block'
});

Очень просто, стилями.

Вот стили для Google CART готовые https://snazzymaps.com/explore?tag=dark

Вот тут в можете создать свой стиль https://mapstyle.withgoogle.com/

А вот пример серой карты https://codepen.io/Cheizer/pen/wxMqLz

Вот черной https://codepen.io/Cheizer/pen/EzNvVB

Копируйте те или иные стили в опциях в свой код и все styles: [..........]

У вас на строку стоит CSS правило

.sec1 .ar0 h2 {
    padding-right: 245px;
}

Поэтому при уменьшении сразу места не хватает, и получается перенос строки.

Сделайте так

article h2{
    width: 100%;
    max-width: 518px;
}
.sec1 .ar0 h2 {
    /* padding-right: 245px; */
}

Решение

var IDs = [];
$("#pagepiling").find(".section").each(function(){ IDs.push(this.id); });

$('#pagepiling').pagepiling({
	    		menu: '#menu',
	    		anchors: IDs,
			    sectionsColor: ['white', '#ee005a', '#2C3E50'],
			});