lamer350

Да тупой! Спасибо за интересный вопрос.
PS. И да, писать надо было просто .menu_block:hover:after

Потому что outer_box b и есть у вас второй блок.
:first-child считает вложения внутри родителя не зависимо от совпадения класса, хоть вы и указали что .outer_box:first-child всеравно он применит стиль к .col-6 который и есть первым блоком внутри .row

https://jsfiddle.net/7qjs4bgd/

Конечно, у вас же сверху фиксированное меню. Вам необходимо в скрипте плавной прокрутки, в формуле вычисления положения блока к которому необходимо прокрутить, отнять высоту плавающего меню.

не понятно в чем проблема, если на рисунке main не правильно использован

Элемент .sub-menu должен быть внутри родительского li чтобы это работало чисто на css.
Ну и соотвесвенно в CSS .main-menu ul li:hover+ .sub-menu - убрать +

<link rel="stylesheet" href="css/media.css" media="only screen and (max-width:840px)">

Вы тут указали что максимальная ширина 840, а в медиа запросах у вас есть 1450 - соответственно этот код и не будет работать.
Это первое, а второе - у вас ошибка в css, собственно после ошибки стили выполнятся не будут все что ниже.
Вы использовали в медиа запросах структуру вложенности что не допустимо для css, это вам не less.
Выполнение стилей дошло вот до этих строк и прекратилось:

@media only screen and (max-width:840px){
.....
.header-main{
    .title{
    font-size: 50px;
    }
....
...
}

Потому собственно код и работает если импортируете его в less, так как он его компилит. А отдельно он не будет работать так как нарушена структура CSS.

Просто надо убрать точку .removeClass("active");

.arc1{
width:100%;
max-width: 200px;
height:200px;
background-color: #000;
}

Все потому что на мобильный устройствах - телефоны автоматически распознаются и генерируются ссылки на них браузером.
Просто в css там где у вас .header_contacts p напишите так: .header_contacts p, .header_contacts p a
Таким образом примените стиль и для ссылок которые генерирует браузер.

Не совсем понятно, если вы указали class A и B, значит вы заранее знаете class B? Пропишите ему так же border-color который вам нужен.
Если цель просто задавать цвет рамки в одном месте - пишите просто: .A, .B {}, а если класс неизвестен заранее - .A, .A * {}

UPD: color в вашем случае не перекрывает border-color, просто есть свойства которые унаследуют (color, font и тд), а есть те которые не унаследуют (border как раз к таким относится). Почитайте об этом отдельно. Потому у вас просто border-color по сути не задан и потому используется цвет из color

css: filter: blur(<размер>);
главное саму форму авторизации выводите вне блока который пытаетесь размыть.