@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");

* {
font-family: Roboto, sans-serif;
padding: 0;
margin: 0;
}

html, body {
width: 100%;
height: 100%;
}

.flexbox {
position: fixed;
width: 100%;
height: 70%;
display: flex;
justify-content: center;
align-items: center;
}

.search {
margin: 20px;
}

.search > h3 {
font-weight: normal;
}

.search > h1,
.search > h3 {
color: #000000;
margin-bottom: 15px;
}

.search > div {
display: inline-block;
position: relative;
}

.search > div:after {
content: "";
background: #717182;
width: 4px;
height: 20px;
position: absolute;
top: 40px;
right: 2px;
transform: rotate(135deg);
}

.search > div > input {
color: #717182;
font-size: 16px;
background: transparent;
width: 25px;
height: 25px;
padding: 10px;
border: solid 3px #717182;
outline: none;
border-radius: 35px;
transition: width 0.5s;
}

.search > div > input::placeholder {
color: #eee;
opacity: 0;
transition: opacity 150ms ease-out;
}

.search > div > input:focus::placeholder {
opacity: 1;
}

.search > div > input:focus,
.search > div > input:not(:placeholder-shown) {
width: 250px;
}