Михаил Горячкин

Читай документацию, там все написано. Вот пример:

var owl = $('.owl-carousel');
owl.owlCarousel();
// Go to the next item
$('.customNextBtn').click(function() {
    owl.trigger('next.owl.carousel');
})

Можно повесить пагинацию на любые кнопки.

Ну самый примитивный вариант выглядит так:
Создаете у себя там класс в css:

.visible {
  visibility: visible !important;
}

Потом дописываем убогий js, после вызова wow.init(), что-то типо того:

var scroll = window.pageYOffset, array = [];
wow.boxes.forEach(function (box) {
    let pos = $(box).position(), height = $(box).height();
    if (pos.top + height < scroll) {
        $(box).addClass("visible");
    } else {
        array.push(box);
    }
});
wow.boxes = array;

Смысл в том что мы при загрузке страницы смотрим где у нас тусит скролл, берем все элементы, которые подписаны на анимацию и проверяем их позицию, и если они уже были прокручены, то мы удаляем их из подписки и делаем их видимыми. Это кустарный вариант, но идея понятна, так что подкручивайте и вперед.

Это просто пичаль! Вы посмотрите свой css, все траблы из-за этой вот строчки:

.main-nav:hover .sub-menu {
    visibility: visible;
    opacity: 1;
}

Как раз тут и прописано, что подменю появляется, при наведении на весь блок. Вам надо убрать это правило и поставить например так:

.menu-item:hover .sub-menu {
    visibility: visible;
    opacity: 1;
}

И будет вам счастье.

Вот, держите простой пример.

Да бога ради, я вообще не встречал более удобной системы для натяжки своего диза на движок, чем есть в modx-се. Так что делайте все как обычно, хоть с gulp, хоть с webpack-ком (тут пишу про то с чем сам работаю). Весь процесс выглядит примерно так:
1) Кидаете финальный билд фронта на ftp (обычно это папка assets/templates/тут название вашего шаблона);
2) Далее в админке создаете шаблон, или открываете стандартный, копируете туда свою разметку.
3) Правите пути к js-сам, картинкам и css-сам.
4) У тут просто открываете страницу с этим шаблоном и радуетесь тому на сколько вы красава).

Ну а там конечно уже разбиваете шаблон на чанки, а где предполагается вывод динамического контента узайте сниппеты, коих много на любой вкус в репозитории, ну или пишете свои. Ну что такое сниппеты и чанки сами прочитаете.

Ну так поставьте div-вам:
position: relative;
ибо по дефолту static стоит, а с ним z-index не работает, а так меняйте z-index как хотите.

Вот держите вам самую простую демочку. Эффекты смены я думаю добавите сами.

Ну так делаете у одного элемента правый бордер темного цвета, а у последующего левый бордер светлого и получите глубину.

Ну что касается viewport-та то вы можете сделать что-то вроде этого:

<meta name="viewport" content="width=device-width,initial-scale=1" id="viewport" />

(function (w, d) {
	var viewport = d.querySelector('#viewport'), 
      	viewports = {
    		default:  viewport.getAttribute('content'),
    		small: 'width=320'
  		};

	var viewport_set = function() {
        screen.width <= 320 ?  viewport.setAttribute( 'content', viewports.small) :  viewport.setAttribute( 'content', viewports.default );
	}
	//При загрузке
	viewport_set();
	// При изменении
	w.onresize = function() { 
  		viewport_set(); 
	}
}(window, document));

Ну а дальше уже в css media запросами, либо при подключении:

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="mobile-device.css" />

поменяйте их местами и будет вам счастье:
Вместо:

box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 10px rgba(23, 127, 246,0);

Надо:

box-shadow:  0 0 10px rgba(23, 127, 246,0), inset 0 1px 1px rgba(0,0,0,.075);

Грубый вариант решения вашей проблемы, ну если использовать чисто css, будет примерно такой:
HTML:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS:

ul {
    width: 70%;
    font-size: 0;
    list-style: none;
}
ul li {
    display: inline-block;
    width: 50%;
    padding: 10% 0;
    overflow: hidden;
    background-size: cover;
    background-position: 50% 50%;
}
ul li:nth-child(1) {
    background-image: url(http://untifler.narod.ru/photos/gaf8-1s.jpg);
}
ul li:nth-child(2) {
    background-image: url(http://www.gjkt.cz/files/images/budova.jpg);
}
ul li:nth-child(3) {
    background-image: url(http://imageproxy.jxs.cz/~nd04/jxs/cz~/856/512/fbafffc141_70326674_o2.jpg);
}
ul li:nth-child(4) {
    background-image: url(http://untifler.narod.ru/photos/gaf8-1s.jpg);
}
img {
    width: 100%;
}

Может вас такой вариант устроит, а иначе js вам в помощь.

Сделаете так:

.talk:before{
    content:"";
    position: absolute;
    left: 100%;
    top:  50%;
    margin-top: -13px;
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-left: 16px solid black;
    border-bottom: 13px solid transparent;
}