#search {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -webkit-transform: translate(0px, -100%) scale(0, 0);
    -moz-transform: translate(0px, -100%) scale(0, 0);
    -o-transform: translate(0px, -100%) scale(0, 0);
    -ms-transform: translate(0px, -100%) scale(0, 0);
    transform: translate(0px, -100%) scale(0, 0);
    opacity: 0;
    z-index: 1040;
    color: #fff;
    overflow-y:auto;
}

    #search.open {
        -webkit-transform: translate(0px, 0px) scale(1, 1);
        -moz-transform: translate(0px, 0px) scale(1, 1);
        -o-transform: translate(0px, 0px) scale(1, 1);
        -ms-transform: translate(0px, 0px) scale(1, 1);
        transform: translate(0px, 0px) scale(1, 1);
        opacity: 1;
    }

    #search input[type="search"] {
        /*position: absolute;
        top: 50%;
        width: 100%;
        color: rgb(255, 255, 255);
        background: rgba(0, 0, 0, 0);
        font-size: 60px;
        font-weight: 300;
        text-align: center;
        border: 0px;
        margin: 51px auto 0px;
        padding-left: 30px;
        padding-right: 30px;
        outline: none;*/
        background: rgba(255, 255, 255, 1) none repeat scroll 0 0;
        border: 0 none;
        border-radius: 5px;
        color: rgb(0, 0, 0);
        font-size: 28px;
        font-weight: 300;
        margin: auto 10px auto 0;
        outline: medium none;
        padding: 10px 30px 10px 15px;
        text-align: left;
        width: 93%;
        }

    .SearchBTN {
        background-color: #e84c3d;
        border-color: #d03425;
        border-radius: 5px;
        color: #fff;
        display: inline-block;
        font-size: 27px;
        line-height: 50px;
        padding: 5px 17px;
        }
      .SearchBTN:hover, .SearchBTN:focus {
        color: #fff;
        background-color: #db3f30;
        }
    #search .close {
        border-color: #d03425;
        color: #e0e0e0;
        font-size: 38px;
        opacity: 1;
        padding: 0 17px;
        /*position: fixed;*/
        right: 15px;
        top: 15px;
    }
    #search hr {
        border-top: 1px solid #a2a2a2 !important;
        border-bottom: none !important;
    }
@media (min-width: 992px) and (max-width: 1199px) {
    #search input[type="search"] {
        width: 91%;
    }
}
@media (min-width: 767px) and (max-width: 991px){
    #search input[type="search"]
    {
        width: 89%;
    }
}
@media (max-width: 767px) {
    .SearchBTN {
        font-size: 19px;
        line-height: 32px;
        padding: 5px 10px;
    }
    #search input[type="search"] {
        font-size: 16px;
        margin: auto 5px auto 0;
        padding: 10px 30px 10px 15px;
        width: 81%;
    }
    #search .form-control {
        margin-bottom: 10px;
    }
}