#search {

    position: fixed; top: 0;
    left: 0;
    width:100%;

    --form-base:96px;
}
#pseudoform,
body.search {
    --form-base:96px;
}
#search .wrapper > div { margin-top: 16px; background:var(--submenu_blue) !important;  color:white; border-radius:var(--section-radius); padding: 0 var(--section-padding); }

#search {
    opacity: 0;
     pointer-events: none;

    visibility: hidden;  /* display: none;display: block; */
    z-index: 99;
    box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.25);
    z-index: 9999;
}

#search p {  height: var(--masthead-height); display: flex; align-items: center; justify-content: space-between;}
#search::before {
    display:block; width:100vw; height:100vh; position:fixed; top:0; left:0; content:"";
    background:rgba(58, 58, 58,0.8);
    background:rgba(0, 0, 0,0.75);
    pointer-events:auto;
    z-index: -1;
}

body.searchshown #search {
    visibility: visible;
    opacity: 1;
}
#search .wrapper {
    display: block;
    padding-bottom: calc(var(--gutter_big) * 2);
}
#search .wrapper > p:first-child {
    height: var(--masthead-height);
    display: flex; align-items: center; justify-content: flex-end;
}

#masthead #search .wrapper { height: auto; }

#searchform {
    opacity: 0;

/*    display: flex; justify-content: flex-end; align-items: center;*/
    position: relative;

    /*
    transition: all 0.3s ease ;  transform:translateX(48px);
    */

}
.searchform { padding-bottom: 24px; color:black; font-family: inherit; pointer-events: auto;}


body.searchshown #search .wrapper > p {
    pointer-events: auto;
}
body.searchshown #searchform {
    opacity: 1; transform: none;
    flex:1; /*max-width:600px;*/
}

.searchform > div{
    background:rgba(255, 255, 255, 0.12);
    border: 2px solid var(--white); border-radius: 300px; padding:calc(var(--form-base) / 6) calc(var(--form-base) / 6) calc(var(--form-base) / 6) calc(var(--form-base) / 3); height: var(--form-base); display:flex; align-items:center;

    /*width:calc(100% + calc(var(--form-base) / 3) + calc(var(--form-base) / 6)); transform: translateX(calc(0px - (var(--form-base) / 6)));*/
    width: calc(100% + calc(var(--form-base) / 6));

    width: 100%;


}


@media all and (min-width: 900px)  {
    .searchform > div{  /* width: calc(100% + 32px); margin-left: -16px;*/ }
}
.searchform > div:has(input[type="text"]:focus-visible){
  /*  background-color: white; color: black;*/
}
.searchform div{
}
.searchform label::after{ content: attr(data-text); }


.searchform div > input[type="text"] {
    font-size: calc(var(--form-base) / 4); font-size: var(--bodytext_size);  color: #FFF;
}

/* Full cross-browser support */
.searchform div > input[type="text"]::-webkit-input-placeholder {
    color: #FFF;
}
.searchform div > input[type="text"]::-moz-placeholder {
    color: #FFF;
}
.searchform div > input[type="text"]:-ms-input-placeholder {
    color: #FFF;
}
.searchform div > input[type="text"]::placeholder {
    color: #FFF;
}




.searchform label {  white-space:nowrap; display: block; font-family: futura-pt, sans-serif; font-weight: 700; color:white;
    font-size: calc(var(--form-base) / 2); padding-left: calc(var(--form-base) / 3); margin-bottom: 16px;
    font-style: normal;

    line-height: 120%;

}
#pseudoform.searchform label {font-size: var(--bodytext_size);}
#pseudoform.searchform { padding-bottom: 0;}

#search {
}

.searchform input {
    line-height:1;  font-family:inherit;

    height: calc(var(--form-base) / 2);  outline: none; background:none; padding: 0;
    border: none;

    font-weight: 600 !important;

}
.searchform input:focus-visible  {  border-radius: 2px;


    outline: 3px solid black; outline-offset: 1px; box-shadow: 0 0 0 6px white;
}


#search >div,
.searchform >input[type="text"] { flex:1;  }

.searchform input[type="text"]{ width:100%; padding:0 0 0;  margin-right: 8px;  }

.searchform button[type="button"],
.searchform button[type="submit"] {
    cursor: pointer; background-color: var(--white); border-radius: 50%;
    position: relative;
     width:calc(var(--form-base) * 0.6666); min-width:calc(var(--form-base) * 0.6666); height: calc(var(--form-base) * 0.6666);

    height:64px; line-height:64px; min-width: 64px;width: 64px;/**/

    /* text-indent: -999px;
    background-size: calc(var(--form-base) / 3) calc(var(--form-base) / 3); background-repeat: no-repeat; background-position: center;

    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve"><path fill="white" d="M34.2,32.5l-6.7-6.7c2.1-2.5,3.4-5.8,3.4-9.3c0-8-6.5-14.5-14.5-14.5S1.8,8.5,1.8,16.5S8.3,31,16.3,31 c3.7,0,7.2-1.4,9.7-3.8l6.7,6.7L34.2,32.5z M3.8,16.5C3.8,9.6,9.4,4,16.3,4c6.9,0,12.5,5.6,12.5,12.5S23.2,29,16.3,29 C9.4,29,3.8,23.4,3.8,16.5z"/></svg>');
    */

}

.searchform button[type="button"] i.icon::after,
.searchform button[type="submit"] i.icon::after{
    position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%);
    content: "\e80d";
    display: block;
    font-family: "esero";
    font-size: 32px;

}

.searchform input[type="submit"]:hover {
    opacity: 0.7;

}




@media all and (max-width: 899.98px)  {

#search {
     --form-base:90px;
}
    #search button[type="submit"] {
        height: 60px;
        line-height: 60px;
        min-width: 60px;
        width: 60px;
    }
}

@media all and (max-width: 599.98px) {

    .searchform label { font-size:24px; margin-bottom:8px; }
    .searchform label::after{ content: attr(data-mobile); }


}

@media all and (max-width: 449px) {
    .searchform ::placeholder { color: transparent; }
    #search form:-ms-input-placeholder { color: transparent;}
    .searchform ::-ms-input-placeholder { color: transparent; }
}