.bbhd-search-box-wrap {
    display: inline-block;
}
.bbhd-btn-search{
    @extend .transition;
}
.bbhd-search-box {
    background-color: rgba(0, 0, 0, 0.85);
    color: #fff;
    transition: all 0.3s ease 0.15s;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999999;
    visibility: hidden;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    @extend .transition;
    
    &.bbhd-visible {
        visibility: visible;
        opacity: 1;
        .container {
            form {
                top: 0;
            }
        }
    }
    
    .container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        
        form {
            position: relative;
            width: 90%;
            max-width: 650px;
            top: 50px;
            @extend .transition;
            .bbhd-search-txt {
                margin-bottom: 0;
                padding: 17px 0;
                width: 100%;
                border: 0;
                border-bottom: 1px solid #fff;
                background-color: transparent;
                color: #fff;
                font-weight: 300;
                font-size: 26px;
                line-height: 1.2em;
                padding-right: 40px;
                box-sizing: border-box;
                
                &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
                  color: #fff;
                }
                &::-moz-placeholder { /* Firefox 19+ */
                  color: #fff;
                }
                &:-ms-input-placeholder { /* IE 10+ */
                  color: #fff;
                }
                &:-moz-placeholder { /* Firefox 18- */
                  color: #fff;
                }
            }
            .bbhd-search-submit {
                position: absolute;
                right: 0;
                top: 50%;
                margin-top: -12px;
                height: 25px;
                width: 25px;
                background: transparent;
                border: none;
                @extend .transition;
                
                &:hover {
                    opacity: .7;
                }
                span {
                    display: block;
                    height: 100%;
                    width: 100%;
                    &:after {
                        content: '';
                        display: block;
                        height: 10px;
                        width: 1px;
                        background-color: #fff;
                        position: absolute;
                        top: 13px;
                        left: 17px;
                        transform: rotate(-45deg);
                    }
                    &:before {
                        content: '';
                        display: block;
                        height: 15px;
                        width: 15px;
                        border-radius: 50%;
                        border: 1px solid #fff;
                        position: absolute;
                        top: 0;
                        left: 0;
                    }
                }
            }
            .bbhd-search-close {
                position: fixed;
                top: 50px;
                right: 50px;
                display: block;
                height: 20px;
                width: 20px;
                cursor: pointer;
                @extend .transition;
                &:hover {
                    opacity: .5;
                }
                
                span {
                    position: relative;
                    display: block;
                    height: 20px;
                    width: 20px;
                    &:before, &:after {
                        content: '';
                        display: block;
                        height: 20px;
                        width: 1px;
                        background-color: #fff;
                        position: absolute;
                        top: 0;
                        left: 50%;
                    }
                    &:before {
                        transform: rotate(45deg);
                    }
                    &:after {
                        transform: rotate(-45deg);
                    }
                }
            }
        }
    }
}