.SearchBox {
    display: inline-block;
}

.Holder {
    display: flex;
    align-items: center;
    border: solid 1px rgba(255,255,255,.85);
    height: 100%;
    width: 100%;
    background-color: black;
    height: 30px;
    width: 160px
}

.Holder svg {
    padding: 15px 5px;
}

.Holder input {
    border: none;
    outline: none;
    color: white;
    width: 100%;
    background-color: transparent;
}

.Holder input:hover {
    color: white;
}

.search-animation-enter {
    opacity: 0;
}

.search-animation-enter-active {
    opacity: 1;
    -webkit-animation: scale-up-hor-right 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	animation: scale-up-hor-right 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.search-animation-exit {
    opacity: 1;
}

.search-animation-exit-active {
	-webkit-animation: scale-down-hor-right 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: scale-down-hor-right 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


@-webkit-keyframes scale-up-hor-right {
0% {
    -webkit-transform: scaleX(0.4);
            transform: scaleX(0.4);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
}
100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
}
}
@keyframes scale-up-hor-right {
0% {
    -webkit-transform: scaleX(0.4);
            transform: scaleX(0.4);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
}
100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
}
}

@-webkit-keyframes scale-down-hor-right {
0% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
}
100% {
    -webkit-transform: scaleX(0.3);
            transform: scaleX(0.3);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
}
}
@keyframes scale-down-hor-right {
0% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
}
100% {
    -webkit-transform: scaleX(0.3);
            transform: scaleX(0.3);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
}
}

@media(min-width: 600px) {
    .Holder {
        height: 30px;
        width: 250px
    }
}

@media(min-width: 1650px) {
    .Holder {
        height: 50px;
        width: 400px;
    }

    .Holder svg {
        padding: 35px 15px;
    }

    .Holder input {
        font-size: 1.1vw;
    }
}