/* ==========================================
   Header Search
========================================== */

.header-right{
    display:flex;
    align-items:center;
    margin-left:auto;
}

.header-search{
    position:relative;
    display:flex;
    align-items:center;
}

.search-icon{
    width:38px;
    height:38px;
    border:none;
    background:transparent;
    color:#ffffff;
    font-size:20px;
    cursor:pointer;
    border-radius:50%;
    transition:0.25s;
}

.search-icon:hover{
    background:rgba(255,255,255,.15);
}

.header-search-form{
    overflow:hidden;
    width:0;
    opacity:0;
    transition:width .30s ease, opacity .25s ease;
}

.header-search-form.active{
    width:240px;
    opacity:1;
    margin-left:10px;
}

.header-search-form input{

    width:100%;

    padding:10px 14px;

    border:none;

    border-radius:20px;

    outline:none;

    font-size:14px;

    box-sizing:border-box;

}

.header-search-form input::placeholder{

    color:#888;

}

/* Mobile */

@media(max-width:768px){

.header-search-form.active{

    width:180px;

}

}
.header-right{
    margin-left:auto;
    display:flex;
    align-items:center;
}
.header-right{
    margin-left:auto;
    margin-right:20px;
}