/* =================================
   FLOATING SEARCH BUTTON
================================= */


/* =================================
   FLOATING SEARCH BUTTON CENTER
================================= */


#searchBtn{

    position:fixed;


    left:50%;


    bottom:25px;


    transform:translateX(-50%);



    width:60px;


    height:60px;



    border-radius:50%;



    border:none;



    background:#c62828;



    color:white;



    font-size:25px;



    cursor:pointer;



    z-index:9999;



    box-shadow:0 5px 15px rgba(0,0,0,.3);


}


/* =================================
   SEARCH OVERLAY CENTER
================================= */


#searchOverlay{


    display:none;


    position:fixed;


    top:0;


    left:0;


    width:100%;


    height:100%;


    background:rgba(0,0,0,.45);


    z-index:9998;



    /* CENTER BOX */


    align-items:center;


    justify-content:center;



}



/* =================================
   SEARCH BOX
================================= */


#searchBox{


    width:90%;


    max-width:600px;



    background:white;


    border-radius:15px;



    padding:20px;



    box-shadow:0 10px 30px rgba(0,0,0,.3);



    animation:searchOpen .2s ease;

}




/* Animation */

@keyframes searchOpen{


    from{

        transform:scale(.9);

        opacity:0;

    }


    to{

        transform:scale(1);

        opacity:1;

    }


}




/* =================================
   SEARCH INPUT
================================= */


#searchInput{


    width:100%;


    padding:15px 18px;


    font-size:18px;



    border:1px solid #ddd;


    border-radius:10px;



    outline:none;



}




#searchInput:focus{


    border-color:#c62828;


}




/* =================================
   RESULT AREA
================================= */


#searchResult{


    margin-top:15px;


    max-height:450px;


    overflow-y:auto;



}




/* =================================
   RESULT LIST
================================= */


.searchItem{


    padding:15px;



    border-bottom:1px solid #eee;


}



.searchItem:last-child{


    border-bottom:none;


}




.searchItem a{


    font-size:17px;


    font-weight:bold;


    color:#c62828;


    text-decoration:none;


}




.searchItem a:hover{


    text-decoration:underline;


}




.searchItem p{


    margin:8px 0 0;


    font-size:14px;


    line-height:1.5;


    color:#555;


}




/* =================================
   MOBILE
================================= */


@media(max-width:600px){


    #searchBox{


        width:95%;


        padding:15px;


    }



    #searchBtn{


        width:55px;


        height:55px;


        right:20px;


        bottom:20px;


    }



    #searchInput{


        font-size:16px;


    }


}