.search-container {
    width: 590px;
    display: block;
    margin: 0 0 0 auto;
    margin-bottom: 40px;
}

input#search-bar {
    margin: 0 auto;
    width: 60%;
    height: 45px;
    padding: 0 20px;
    font-size: 1rem;
    border: 1px solid #d0cfce;
    outline: none;
    &:focus {
        border: 1px solid #008abf;
        transition: 0.35s ease;
        color: #008abf;
        &::-webkit-input-placeholder {
            transition: opacity 0.45s ease;
            opacity: 0;
        }
        &::-moz-placeholder {
            transition: opacity 0.45s ease;
            opacity: 0;
        }
        &:-ms-placeholder {
            transition: opacity 0.45s ease;
            opacity: 0;
        }
    }
}
.search-icon {
    position: relative;
    height: 59px;
    right: 52px;
}
#blog-search {
    position: relative;
    right: 53px;
}
#blog-clear {
    position: relative;
    right: 49px;
}
.btnContainer {
}
@media only screen and (max-width: 530px) {
    #blog-search {
        display: block;
        position: relative;
        right: 0px;
    }
    #blog-clear {
        /* position: relative; */
        /* display: block; */
        right: -11px;
    }
    .btnContainer {
        display: flex;
    }
}