yes – or you decide to influence the placeholder text and input text.

#top .header_color input::placeholder,
#top .header_color input[type="search"] {
  color: #fff !important;
}

or a combination:

#top .header_color input::placeholder,
#top .header_color input[type="search"] {
  color: #fff !important;
}

#top .header_color #s {
	background: linear-gradient(-90deg,#7ea338,#3b4b1e);
}

you can have it in between the first and second column:

#footer .flex_column.first  {
  border-right: 1px solid rgba(255,255,255,.3);
}

or more nearby the content of your first column:

#footer .flex_column.first .widget {
  border-right: 1px solid rgba(255,255,255,.3);
  padding-right: 30px;
}

on my iPad i do not see any blue pop ups.
have you erased your device cacheing?

can you make the link to your page public? releasecfs etc. i found a lot about you – but i do not see the “highlight” you are talking about.
Presumption would be the background of: .html_stretched #wrap_all

ok – thanks

maybe you decide to style it a little:

#lang_sel_list {
  display:  inline-block !important;
  background-color: rgba(255,255,255,0.3);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border-radius: 5px;
  padding: 5px ;
}

#lang_sel_list > ul {
  display:  flex !important;
}

#lang_sel_list .wpml-ls-item {
  position: relative;
  left: 0 !important;
}

#lang_sel_list .wpml-ls-link {
  text-decoration: none !important;
}

#lang_sel_list .wpml-ls-link:hover {
  background-color: rgba(0,0,0,0.3);
}

on WPML – Languages – there is in the options : “Menu language switcher ” Add a new one.
Then you see the options for that menu you choose

if the switchers are not inside a menu – you can scroll down a bit and have : “Custom language switchers” mark it and customise it there.

i do not have an enfold setting with header on the left and WPML – so i can not test it for you.
if that position does not belong to these settings:

try: https://kriesi.at/support/topic/wpml-language-switcher-8/#post-695476

but: i think these filters and action hooks are deprecated now. on : class-avia-wpml.php lines 86 to 110 there are more options to influence. i think a mod should instruct you with these new “options”

or read this for more info: https://wpml.org/documentation/theme-compatibility/enfold/#enfold-language-switcher

when you download the files from transfonter ( you can pick out from that zip the woff and ttf files into a folder with name you like to give.
You do not need any other files inside your zip than the pure font-formats!
F.e. name that folder for all the open-sans fonts “Open Sans” – see:

zip this folder ! BUT be carefull on your Mac OS – because OS will have inside that folder hidden files ( this is typical for OSX folders ).
Some of the OSX Compressor Tools like BetterZip have an option to zip for PC ( then these hidden system files will not be in this zip file)
these are your “MACOSX (font-family: macosx) “. ( But you can erase these “Fonts” from Font Manager.

This “4ab16c3952a6f71bb538afe303ac6379.woff2” happens because you have uploaded directly the downloaded zip file.

if you rename the zip.file to f.e “Open Sans” then the Font Manager will show the folder name as Font Name (green) – and the filenames will end in the original implemented postscript font-family name.

By the way: uploaded Fonts – are at the end of the drop-downlist under: “Uploaded Fonts”
sorry to mention this – but some participants do not scroll down to the end of the list ;)

To better advise; is there a link to this page?
If you don’t want to make the link public, you’ll have to wait until the mods are here to see your private message.

this is one idea –

#top.page-id-102 #av_section_1 .flex_column img {
  filter: brightness(0.5)
}

or with two filters and hover effect:

#top.page-id-102 #av_section_1 .flex_column img {
  -webkit-filter: brightness(0.6) blur(3px);
  filter: brightness(0.6) blur(3px);
  transition: filter 1s ease;
}

#top.page-id-102 #av_section_1 .flex_column:hover img {
  -webkit-filter: brightness(0.8) blur(0.5px);
  filter: brightness(0.8) blur(0.5px);
  transition: filter 1s ease;
} 

but maybe you like a frosted glass effect behind your caption:

/***** here only for those images inside column 4,5 and 6 *****/
#top.page-id-102 #av_section_1 .flex_column:nth-of-type(n+4) .av-slideshow-caption {
  border-radius: 10px;
  background-color: rgba(0,0,0,0.3);
  width: calc(100% - 34px);
  margin: 0 auto !important;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

if you change your font color to black then switch to a white frosted glas ;)

btw: it seems to be better if you switch to single rows on 990px for that color section.

Your code should actually work because of the important setting.
Try first renewing the caching / merging of Enfold?

_______

on your selector there are only classes ! A class is not so high in specifity than an ID.
not knowing your page – i can not say if your selctor is the right one – but try:

@media only screen and (max-width: 767px)  {
  #top #main .avia-section .content {
    padding-top: 0;
    padding-bottom: 0;
  }
}

if you have sound on that video – There will be (for the lightbox video) a button ( if you set muted ) to activate sound – or if you set without muted – the vimeo video will play with sound!
on the preview videos it will make no sence – if there are more than one Video. – Real cacophony

It runs with your video on iPhone – but the loop not. After the video the related Videos are shown.

see https://webers-testseite.de/youtube-background/
After you have inspect it – i will remove your video from my page

PS: if i remove the playlist parameter ( see bottom color-section) the video stops playing on iPhone – but does not show those related videos allways :
see screenshot from iPhone:

you can only influence the select box ( as check boxes, radio buttons etc. ) by replacing the original html by a different html structure.

put this to your child-theme functions.php:
( it is specific to your form – because the selector for that form element is given by the ID: #element_avia_6_1
on other form elements it might be a different ID )

function style_select_options(){
?>
<script>
window.addEventListener("DOMContentLoaded", function () { 
    (function($) {     
        $('.avia_ajax_form #element_avia_6_1').addClass('custom-select');
    })(jQuery);

    var x, i, j, l, ll, selElmnt, a, b, c;
    /* Look for any elements with the class "custom-select": */
    x = document.getElementsByClassName("custom-select");
    l = x.length;
    for (i = 0; i < l; i++) {
      selElmnt = x[i].getElementsByTagName("select")[0];
      ll = selElmnt.length;
      /* For each element, create a new DIV that will act as the selected item: */
      a = document.createElement("DIV");
      a.setAttribute("class", "select-selected");
      a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
      x[i].appendChild(a);
      /* For each element, create a new DIV that will contain the option list: */
      b = document.createElement("DIV");
      b.setAttribute("class", "select-items select-hide");
      for (j = 1; j < ll; j++) {
        /* For each option in the original select element,
        create a new DIV that will act as an option item: */
        c = document.createElement("DIV");
        c.innerHTML = selElmnt.options[j].innerHTML;
        c.addEventListener("click", function(e) {
            /* When an item is clicked, update the original select box,
            and the selected item: */
            var y, i, k, s, h, sl, yl;
            s = this.parentNode.parentNode.getElementsByTagName("select")[0];
            sl = s.length;
            h = this.parentNode.previousSibling;
            for (i = 0; i < sl; i++) {
              if (s.options[i].innerHTML == this.innerHTML) {
                s.selectedIndex = i;
                h.innerHTML = this.innerHTML;
                y = this.parentNode.getElementsByClassName("same-as-selected");
                yl = y.length;
                for (k = 0; k < yl; k++) {
                  y[k].removeAttribute("class");
                }
                this.setAttribute("class", "same-as-selected");
                break;
              }
            }
            h.click();
        });
        b.appendChild(c);
      }
      x[i].appendChild(b);
      a.addEventListener("click", function(e) {
        /* When the select box is clicked, close any other select boxes,
        and open/close the current select box: */
        e.stopPropagation();
        closeAllSelect(this);
        this.nextSibling.classList.toggle("select-hide");
        this.classList.toggle("select-arrow-active");
      });
    }

    function closeAllSelect(elmnt) {
      /* A function that will close all select boxes in the document,
      except the current select box: */
      var x, y, i, xl, yl, arrNo = [];
      x = document.getElementsByClassName("select-items");
      y = document.getElementsByClassName("select-selected");
      xl = x.length;
      yl = y.length;
      for (i = 0; i < yl; i++) {
        if (elmnt == y[i]) {
          arrNo.push(i)
        } else {
          y[i].classList.remove("select-arrow-active");
        }
      }
      for (i = 0; i < xl; i++) {
        if (arrNo.indexOf(i)) {
          x[i].classList.add("select-hide");
        }
      }
    }

    /* If the user clicks anywhere outside the select box,
    then close all select boxes: */
    document.addEventListener("click", closeAllSelect); 

});
</script>
<?php
}
add_action('wp_footer', 'style_select_options');

after that for quick.css:

/*the container must be positioned relative:*/
.custom-select {
  font-family: inherit;
  text-transform: uppercase;
}

.custom-select select {
  display: none !important;
}

#top .select-selected {
  background-color: var(--enfold-main-color-bg);
  border-color: var(--enfold-main-color-primary);
  border-width: 1px;
  height: 41px;
  font-size: 12px;
  color: var(--enfold-main-color-primary);
  opacity: 0.7
}

/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 18px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #666 transparent transparent transparent;
}

/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #666 transparent;
  top: 12px;
}

/*style the items (options), including the selected item:*/
.select-items div,
.select-selected {
  color: #FFF;
  padding: 2px 15px 2px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  user-select: none;
}

/*style the items (options), including the selected item:*/
.select-selected {
  padding: 5px 15px 2px;
}

/*style items (options):*/
.select-items {
  position: absolute;
  background-color: #ddd;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  font-size: 12px
}

/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: #7d2a7e;
  color: #fff !important;
}

Looks then this way – but you can now style each option and pseudo states to your needs:

• This reply was modified 3 weeks, 5 days ago by Guenni007.