this on top is only an example – you have to know how the font-family name is in your @font-face rule !
maybe it is called Reforma-grotesk – look to your embed code

it will work but if you have a more specific rule with h6 and important than the rule is overwritten.

https://css-tricks.com/specifics-on-css-specificity/#article-header-id-0

i did this to have a setting field for icon-box and icon-list alb element. (sinse Enfold 4 – do not try it if you are using an older version)
You can download those files here: Download
The best way is to have those files in child-theme/shortcodes. folder
and to include them by functions.php in your child-theme:

add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);
function avia_include_shortcode_template($paths){
  $template_url = get_stylesheet_directory();
      array_unshift($paths, $template_url.'/shortcodes/');
  return $paths;
}

for the list i do not set the possibility to have h1 because there should be only one h1 each page!
looks this way: https://postimg.org/gallery/144tcszl8/

well the normal tabs are simple containers for ( you can also insert in tab content shortcodes) content.
the one on your other page (link) are tab-sections from layout-elements (https://kriesi.at/themes/enfold-2017/elements/tab-section/#layer-slider-plugin)
these are capable to style by default. ( btw. it is in layout-element that tab-section because you can even drag f.e. 1/2 containers in it like in a color-section.

try with !important if this does not work without:

#top.category .post-meta-infos {
    display: none;
}

i went back on some test installations of mine to Enfold 4.1.2 or 4.0.5 ( i got both on a duplicator archiv) the troubles come definitly from WordPress 4.9. They changed the mediaelement scripts and many more – the poor WP Bakery Page Builder User f.e. those things do not work. etc etc. pp.

So we are still relatively well. I can live with selfuploaded video to youtube till the next WP Update will fix those bugs.

ok – lets go to eat something

here is source-code if i use on safari – the user agent (ipad/iphone). on top
you see there are fallback video alternatives

and at the bottom safari without user agent – pur – like HighSierra uses it:

ok – i see you have inserted a m4v – video – i will try that instead a mp4
yes i’m on 4.2.2

But please do not do this with older enfold versions – this is an edited version 4.1 and later – since screenoptions are added !

i did that for enfold 4.1 and there seems to be no changes on 4.2 for those shortcodes.
But a child-theme is mandatory

! you can overwrite the files in enfold/config-templatebuilder/avia-shortcodes. folder – but than on updating the parent-theme the things will get lost

see here in action: https://webers-testseite.de/weber/blog/

there are three files to change
you can download all files needed here: https://webers-testseite.de/slideshows_with_h-tag_since_Enfold41.zip

1) create a folder on your child-theme directory called : shortcodes
2) put in those three files in that shortcodes folder
3) insert this to your functions.php of your child theme:

add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);
function avia_include_shortcode_template($paths){
  $template_url = get_stylesheet_directory();
      array_unshift($paths, $template_url.'/shortcodes/');
  return $paths;
}

now you have the opportunity to make a choice which tag should be placed !

But think of that a h1 should only be placed once on a page at the same time.

so if you only have one h1 per slider and only one slider on that page it is ok to have for each slide a h1

but this is a bug of Sierra and his browser-version.
because as you say on OS Yosemite – and on my HighSierra there is no such behavior.

by the way : to get rid of that container on responsive case : goto column options dialog “screen options” and mark the concerning desired behavior.

ok i stop trying to help you – because it seems that you only accept help from mods – bye

hm – i can not reproduce that behavior : Link

the 1/2 columns on top are in a color-section – the columns on bottom aren’t (without surrounding container)
i use high sierra and my safari is : Version 11.0.2 (13604.4.7.1.6)

i can not believe that it is only a matter of OSX Version

Maybe you can insert an invisibel content (text block with   f.e.)

if you are working on a child-theme i do often insert for my customers in function.php:

function admin_head_mod() {
echo '<style type="text/css">
.avia_reset {pointer-events: none !important }
</style>';
}
add_action('admin_head', 'admin_head_mod');

it blocks that click option

or you define a custom hr – there you can choose the width of the hr
choose thin and your desired width of the hr.
Choose no icon for it.
And give a custom class to the hr: “customised-hr”

do this to quick css:

.customised-hr .hr-inner.inner-border-av-border-thin::before {
    content: "○";
    font-size: 24px;
    position: relative;
    left: 0;
    top: -15px;
    color: #e1e1e1;;
    background-color: #fff;
}

.customised-hr .hr-inner.inner-border-av-border-thin {
    border-top-width: 2px;
}

The color of the before content must concern to your hr color you set

see here: https://webers-testseite.de/3images-one-link/

big advantage : make one template of the custom hr and if you need it insert it and only fit the width for it

it is not so complex to create these files – and with shortcode of columns.php it is easy to have this in a child-theme.
But i realy do not know how to get a “child-theme” avia-builder.js – so that these changings are not lost on update of enfold parent theme.

For your study: webers-testseite.de/6thColumns.zip

Because there has to be changes for admin layout there must be some entries (all included in the zip file)
it does not work to put this css to quick css!

function admin_head_mod() {
echo '<style type="text/css">
.avia_layout_builder .av_one_sixth{width:14%;}
.avia_layout_builder .av_five_sixth {width: 80%;}
</style>';
}
add_action('admin_head', 'admin_head_mod');

you only have to define than – the responsive design.