#search {
    opacity: 0.5;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    border-top: 32px solid transparent;
 

    pointer-events: none;

   visibility: hidden;  /* display: none;display: block; */
    z-index: 99;
}


#search::before {
display:block; width:100vw; height:100vh; position:fixed; top:0; left:0; content:"";
background:rgba(0,0,0,0.75);  pointer-events:auto;
} 

body.searchshown #search {
     visibility: visible;
    opacity: 1;
}
#search> div {
    padding-left: 300px;
    /*padding-right: 70px;*/
}
#search> .wrapper > div { display: flex; justify-content: flex-end; pointer-events: auto; align-items:center;
}
#search form {
   opacity: 0; 
     font-family: inherit;
    display: flex; justify-content: flex-end; align-items: center;
    position: relative;
    z-index: 9999; pointer-events: auto;
      transition: all 0.3s ease ;  transform:translateX(48px);

	
}


body.searchshown #search form {
    opacity: 1; transform: none;  
flex:1; max-width:600px;
	}

#search form > div{
    background:white;
    border: 2px solid var(--black); border-radius: 300px; padding:4px 8px 4px 16px;height: 64px;display:flex; align-items:center;
}
#search form div{ 
flex:1; 
}
#search form label::after{ content: attr(data-text); }
#search form label { color: white; white-space:nowrap; margin-right: 1em; }
#search form label,
#search form div > input[type="text"] {font-size: 16px; 
}


 
#search { 
}
 
 #search input
{font-size:17px; line-height:1;  font-family:inherit;}

#search input { height: 32px; line-height: 1; outline: none; background:none; padding: 0;
    border: none;

    font-weight: 600 !important; font-family: inherit;

}
#search input:focus-visible  {box-shadow: 0 0 0 2px white , 0 0 0 4px var(--orange); border-radius: 2px;}

 
#search >div,
#search >input[type="text"] { flex:1;  }
#search input[type="text"]{ width:100%; padding:0 0 0; margin-right: 6px; background:white; margin-right: 6px;  }
 
#search input[type="submit"] {
    cursor: pointer; background-color: var(--bg-purple); border-radius: 50%;
    text-indent: -999px; width:36px; min-width:48px; height: 48px;
    background-size: 24px 24px; 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 34 34" style="enable-background:new 0 0 34 34;" xml:space="preserve"><path fill="%23110E19" d="M26.4,24.1l6.9,6.9L31,33.3l-6.9-6.9c-2.5,2-5.7,3.2-9,3.2c-7.9,0-14.4-6.5-14.4-14.4S7.2,0.7,15.1,0.7 s14.4,6.5,14.4,14.4C29.6,18.4,28.4,21.6,26.4,24.1z M23.2,22.9c2-2.1,3.2-4.9,3.2-7.8c0-6.2-5-11.2-11.2-11.2S3.9,9,3.9,15.1 s5,11.2,11.2,11.2c2.9,0,5.7-1.1,7.8-3.2L23.2,22.9z"/></svg>');

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

 


/*@media all and (min-width: 900px) and (max-width: 1023px) { */
@media all and (max-width: 1023px)  {

#search {
 
 
    border-top:8px solid transparent; 
 

}

#search> div { padding-left:0 ; }
}

/*



#search form div input { height: 44px; outline: none; background:none; padding: 0;
    border: none;

    font-weight: 600 !important; font-family: inherit;

}
#search form div input:focus-visible {box-shadow: 0 0 0 2px white , 0 0 0 4px var(--orange); border-radius: 2px;}

#search form div input[type="text"]{  min-width: 400px; padding:0 4px; }
#search form div input[type="submit"]{   }

#search form div input[type="submit"] {
    cursor: pointer;
    text-indent: -999px; width:40px; min-width:40px;
    background-size: 24px 24px; 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 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"><path fill="%23111B29" d="M14,0.1c-5.5,0-9.9,4.5-9.9,9.9c0,2.4,0.8,4.6,2.2,6.3l-6.3,6.3l1.4,1.4l6.3-6.3c1.7,1.4,3.9,2.2,6.3,2.2 c5.5,0,9.9-4.5,9.9-9.9C23.9,4.5,19.5,0.1,14,0.1z M14,16.9c-3.8,0-6.9-3.1-6.9-6.9s3.1-6.9,6.9-6.9c3.8,0,6.9,3.1,6.9,6.9 S17.8,16.9,14,16.9z"/></svg>');

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


*/

#closesearch {   max-width: 56px; margin-left: var(--unit);pointer-events: auto;   }

 /*
@media all and (max-width: 1199px) {
#search form div input[type="text"]{  min-width: 360px;   }
}
@media all and (max-width: 1099px) {
    #search form div input[type="text"]{  min-width: 320px;   }
}
@media all and (max-width: 999px) {
    #search form div input[type="text"]{  min-width: 280px;   }
}

*/
@media all and (max-width: 599px) {
 
 #search form label::after{ content: attr(data-mobile); }
 

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