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

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

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

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

Это просто пичаль! Вы посмотрите свой 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) У тут просто открываете страницу с этим шаблоном и радуетесь тому на сколько вы красава).

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

Замените ф-ю:

jQuery(".niceCheck").mousedown(function() {
     changeCheck(jQuery(this));
});

На

jQuery('.niceCheck').live('click', function () {
changeCheck(jQuery(this));
});

И давно бы пора взять версию jQuery по новее и использовать .on.

В общем не совсем понятно зачем вам это все на чистом js-се, ну да ладно, вот вам демка. Вроде все учел, что вам было надо, если нет то сами подправите. Сам js такой:

(function(w, d){
  
  var childOf = function (child, parent) {
    while((child=child.parentNode) && child!==parent); 
    return !!child;
  };
  
  var initApp = function() {
      var activeTab,
          menu = d.querySelector('#menu'),
          firstLevel = menu.children || [], 
          ln = firstLevel.length;
    
      var tabClickHandler = function (e) {
        e.preventDefault();
        if (!activeTab) {
          activeTab = this;
        } else {
          activeTab.classList.remove('active');
          activeTab = this;
        }
        this.classList.add('active');
      };
  
      var innerTabClickHandler = function (e) {
        e.preventDefault();
        e.stopPropagation();
        if (activeTab) {
          activeTab.classList.remove('active');
        }
      };
  
      var closeMenuHandler = function (e) {
        var target = e.target || e.srcElement;

        if(!childOf(target, menu)) {
            if (activeTab) {
              activeTab.classList.remove('active');
            }
        }
      };
      
      if (!ln) return;
      
      while(ln--) {
        var tab = firstLevel[ln], 
            secondLevel = tab.querySelectorAll('ul > li') || [],
            lnS = secondLevel.length;
       
        tab.addEventListener('click', tabClickHandler, false);
        while(lnS--) {
          var innerTab = secondLevel[lnS];
          innerTab.addEventListener('click', innerTabClickHandler, false);
        }
      }
      
      d.addEventListener('click', closeMenuHandler, false);
  };
  
  w.addEventListener('DOMContentLoaded', initApp);
}(window, document));

Работать будет с IE9 и выше. Для анимации раскрытия используется обычный css.

$("input[type=text]").each(function() {
    var input = $(this), id = this.id;
    input.attr('name', id);
});

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

Ну что касается 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;
}