#search {

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

    --form-base:96px;
}

form.searchform,
#search {
    --form-base:96px;
}
#search > div {    background:var(--ttl_lightyellow) !important;  color:black;  }

#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::before {
    display:block; width:100vw; height:100vh; position:fixed; top:0; left:0; content:"";
    background:rgba(58, 58, 58,0.5);  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; }


#search form {
    opacity: 0;
    font-family: inherit;
/*    display: flex; justify-content: flex-end; align-items: center;*/
    position: relative;
     pointer-events: auto;
    /*
    transition: all 0.3s ease ;  transform:translateX(48px);
    */


}


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

form.searchform > div,
#search form > div{
    background:white;
    border: 1px solid transparent; 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;
}


form.searchform { max-width: 960px;}

form.searchform label::after,
#search form label::after{ content: attr(data-text); }


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

form.searchform label,
#search form label {  white-space:nowrap; display: block;
    font-size: calc(var(--form-base) / 2); padding-left: calc(var(--form-base) / 3); margin-bottom: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;

}
form.searchform label { font-size: var(--bodytext_size); }

form.searchform input,
#search 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;

}
form.searchform input:focus-visible  ,
#search input:focus-visible  {  border-radius: 2px;


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


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

form.searchform input[type="text"],
#search input[type="text"]{ width:100%; padding:0 0 0; background:white; margin-right: 8px;  }

form.searchform input[type="submit"],
#search input[type="submit"] {
    cursor: pointer; background-color: var(--ttl_black); border-radius: 50%;
    text-indent: -999px; width:calc(var(--form-base) * 0.6666); min-width:calc(var(--form-base) * 0.6666); height: calc(var(--form-base) * 0.6666);
    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>');

}
form.searchform input[type="submit"]:hover,
#search input[type="submit"]:hover {
    opacity: 0.7;

}



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


}


@media all and (max-width: 899.98px)  {
    form.searchform,
#search {
     --form-base:64px;
}

    form.searchform label { padding-left: 0;}

}

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

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


}

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