header h1{
    text-indent: -9999px;
}

header .header-top{
    display : flex;
    align-items : center;
    justify-content : center;
    padding : 30px 0;
}

header .logo{
    width : 180px;
    margin-right : 5%;
}


header .search-wrap{
    height : 50px;
    max-width : 500px;
    width : 90%;
    margin-top : 20px;
}

header .search-wrap input{
    width : 100%;
    height : 50px;
    border : 1px solid brown;
    padding : 0 10px;
}

header .search-bar-wrap{
    position : relative;
}

header .search-bar-wrap button{
    position : absolute;
    display : inline-block;
    width : 20px;
    height : 100%;
    top : 0;
    right : 10px;
}

header .search-bar-wrap .icon.search{
    display : inline-block;
    width : 100%;
    height : 100%;
    background-position : center;
    background-repeat : no-repeat;
    background-size : 20px;
    background-image : url('/images/icons/search.svg');
}

header nav{
    border-bottom : 1px solid #efefef;
    width: 100%;
    height: 50px;
    background-color: rgba(255,255,255,0.8);
    transition : 0.2s;
}

header nav.on{
    position : fixed;
    top : 0;
    left : 0;
    z-index : 999;
}

header nav > div{
    display : flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    padding : 0 20px;
}

header nav > div > ul{
    display : flex;
    align-items: center;
    justify-content: space-around;
    height : 50px;
    width : 1000px;
    font-size : 1.2em;
}

header nav > div > ul > li{
    letter-spacing : -1px;
    
    
}

header .today{
    text-align : right;
    margin-bottom : 20px;
    font-size : 14px;
    font-weight : 700;
}

@media screen and (max-width : 768px){
    .header-top{
        width : 95%;
        margin : auto;
        flex-direction: column;
    }

    header .logo{
        width : 120px;
    }
}