@media screen and (min-width: 45em) {

.search-interface{
    width: 30%;
    float: right;
}

}

.search-interface input {

display: block;
-webkit-box-sizing: border-box;
width: 100%;
padding: 6px 4px;
padding-left: 2em;
font: inherit;
border-radius: 3px;
border: 1px solid #ccc;
background: url(../svg/search.svg) 6px 45% no-repeat;
background-size: 16px;

}

.search-interface button {

position: absolute;
left: -9999em;
bottom: 3px;
border: 1px solid #ddd;
border-radius: 2px;
background: #f8f8f8;
font: inherit;
font-weight: 600;
font-size: 16px;
color: #555;
padding: 4px 12px;

}

.search-interface button:hover {

background-color: #eee;
color: #111;
border-color: #bbb;

}

.sr-only, .search-interface span.label-text {

position: absolute;
overflow: hidden;
width:1px;
height:1px;
margin: -1px;
padding:0;

}