@import url('https://fonts.googleapis.com/css?family=Inconsolata:700');
 * {
   
 .searchcontainer {
   position: absolute;
   margin: auto;
   top: 15px;
   right: 35px;
   width: 300px;
   height: 100px;
}
 .searchcontainer .search {
   position: absolute;
   margin: auto;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   width: 80px;
   height: 80px;
   background: #cfbad8;
   border-radius: 50%;
   transition: all 1s;
   z-index: 4;
   box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.4);
}
 .searchcontainer .search:hover {
   cursor: pointer;
}
 .searchcontainer .search::before {
   content: "";
   position: absolute;
   margin: auto;
   top: 22px;
   right: 0;
   bottom: 0;
   left: 22px;
   width: 12px;
   height: 2px;
   background: white;
   transform: rotate(45deg);
   transition: all 0.5s;
}
 .searchcontainer .search::after {
   content: "";
   position: absolute;
   margin: auto;
   top: -5px;
   right: 0;
   bottom: 0;
   left: -5px;
   width: 25px;
   height: 25px;
   border-radius: 50%;
   border: 2px solid white;
   transition: all 0.5s;
}
 .searchcontainer input {
   font-family: 'Inconsolata', monospace;
   position: absolute;
   margin: auto;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   width: 50px;
   height: 50px;
   outline: none;
   border: none;
   background: #cfbad8;
   color: white;
   text-shadow: 0 0 10px #cfbad8;
   padding: 0 80px 0 20px;
   border-radius: 30px;
   box-shadow: 0 0 25px 0 #cfbad8, 0 20px 25px 0 rgba(0, 0, 0, 0.2);
   transition: all 1s;
   opacity: 0;
   z-index: 5;
   font-weight: bolder;
   letter-spacing: 0.1em;
}
 .searchcontainer input:hover {
   cursor: pointer;
}
 .searchcontainer input:focus {
   width: 150px;
   opacity: 1;
   cursor: text;
}
 .searchcontainer input:focus ~ .search {
   right: -250px;
   background: #323232;
   z-index: 6;
}
 .searchcontainer input:focus ~ .search::before {
   top: 0;
   left: 0;
   width: 25px;
}
 .searchcontainer input:focus ~ .search::after {
   top: 0;
   left: 0;
   width: 25px;
   height: 2px;
   border: none;
   background: white;
   border-radius: 0%;
   transform: rotate(-45deg);
}
 .searchcontainer input::placeholder {
   color: white;
   opacity: 0.5;
   font-weight: bolder;
}