<a data-toggle="modal" data-target="#FindASalonMenuModal" class="btn btn-lg btn-phia">FIND A SALON</a>

<div class="top-right FindASalonMenu modal fade" id="FindASalonMenuModal" tabindex="-1" role="dialog" aria-labelledby="FindASalonMenuModalLabel">

    <div class="inner">

        <div class="search-box ">
            <div class="row">
                <div class="col-md-12 text-center buttons-block">

                   <p><a class="btn btn-lg btn-outline-dark btn-block  btn-toggle" data-destination="#location-box">Search by Salon/Location</a></p>

                    <h6 class="or">OR</h6>

                    <p><a class="btn btn-lg btn-outline-dark  btn-block btn-toggle" data-destination="#stylist-box">Search by Stylist</a></p>

                    <h6 class="or">OR</h6>

                    <p><a class="btn btn-lg btn-outline-dark  btn-block btn-toggle" data-destination="#service-box">Search by Service</a></p>


                </div>
            </div>
        </div>

        <div id="location-box" class="location-box toggleSearch" style="display: none;">

            <p class=""><a class="btn btn-lg btn-outline-dark btn-block" href="" data-dismiss="modal">Salon 1</a></p>

            <p class="mt20"><a class="btn btn-lg btn-outline-dark  btn-block" href="#" target="_blank">Salon 2</a></p>

            <p class="mt20"><a class="btn btn-lg btn-outline-dark  btn-block" href="#" target="_blank">Salon 3</a></p>


            <p class="close sidebarClose"> Back <i class="fas fa-angle-right"></i></p>

        </div> <!-- close location-box -->

        <div id="stylist-box" class="stylist-box toggleSearch" style="display: none;">

            <div class="row mb20">
                <p class="close sidebarClose"> Back <i class="fas fa-angle-right"></i></p>
            </div>

            <div class="row">


                <div class="col-xs-6 col-sm-4 modal-talent">
                    <a href="#">
                        <img class="img-responsive img-circle" src="https://via.placeholder.com/150">
                        <p>Name</p>
                    </a>
                </div>

                <div class="col-xs-6 col-sm-4 modal-talent">
                    <a href="#">
                        <img class="img-responsive img-circle" src="https://via.placeholder.com/150">
                        <p>Name</p>
                    </a>
                </div>

                <div class="col-xs-6 col-sm-4 modal-talent">
                    <a href="#">
                        <img class="img-responsive img-circle" src="https://via.placeholder.com/150">
                        <p>Name</p>
                    </a>
                </div>

                <div class="col-xs-6 col-sm-4 modal-talent">
                    <a href="#">
                        <img class="img-responsive img-circle" src="https://via.placeholder.com/150">
                        <p>Name</p>
                    </a>
                </div>

                <div class="col-xs-6 col-sm-4 modal-talent">
                    <a href="#">
                        <img class="img-responsive img-circle" src="https://via.placeholder.com/150">
                        <p>Name</p>
                    </a>
                </div>

                <div class="col-xs-6 col-sm-4 modal-talent">
                    <a href="#">
                        <img class="img-responsive img-circle" src="https://via.placeholder.com/150">
                        <p>Name</p>
                    </a>
                </div>


            </div><!-- close row -->

            <p class="close sidebarClose"> Back <i class="fas fa-angle-right"></i></p>

        </div><!-- close stylist-box -->

<div id="service-box" class="service-box toggleSearch" style="display: none;">

            <div class="row mb20">
                <p class="close sidebarClose"> Back <i class="fas fa-angle-right"></i></p>
            </div>

            <div class="row">
                <div class="col-xs-6 uc">
                    <p><a class="service btn btn-lg btn-outline-dark btn-block btn-toggle" data-destination="#service-options" data-filter="location-1 location-3" href="#">Service 1</a></p>
                    <p><a class="service btn btn-lg btn-outline-dark btn-block btn-toggle" data-destination="#service-options" data-filter="location-1 location-2" href="#">Service 2</a></p>
                    <p><a class="service btn btn-lg btn-outline-dark btn-block btn-toggle" data-destination="#service-options" data-filter="location-1 location-2" href="#">Service 3</a></p>
                    <p><a class="service btn btn-lg btn-outline-dark btn-block btn-toggle" data-destination="#service-options" data-filter="location-1 location-2" href="#">Service 4</a></p>

                </div>

                <div class="col-xs-6">
                    <p><a class="service btn btn-lg btn-outline-dark btn-block btn-toggle" data-destination="#service-options" data-filter="location-3" href="#">Service 5</a></p>
                    <p><a class="service btn btn-lg btn-outline-dark btn-block btn-toggle" data-destination="#service-options" data-filter="location-2 location-3" href="#">Service 6</a></p>
                    <p><a class="service btn btn-lg btn-outline-dark btn-block btn-toggle" data-destination="#service-options" data-filter="location-1 location-2 location-3" href="#">Service 7</a></p>
                    <p><a class="service btn btn-lg btn-outline-dark btn-block btn-toggle" data-destination="#service-options" data-filter="location-1 location-2" href="#">Service 8</a></p>
                </div>
            </div>


            <p class="close sidebar Close"> Back <i class="fas fa-angle-right"></i></p>

        </div><!-- close service-box -->

        <div id="service-options" class="service-box toggleSearch" style="display: none;">

            <div class="row mb20">
                <p class="close sidebarClose"> Back <i class="fas fa-angle-right"></i></p>
            </div>

            <div class="row">
                <div class="col-xs-12 uc">
                    <p data-value="location-1"><a class="btn btn-lg btn-outline-dark btn-block" href="">Location 1</a></p>
                    <p data-value="location-2"><a class="btn btn-lg btn-outline-dark btn-block" href="">Location 2</a></p>
                    <p data-value="location-3"><a class="btn btn-lg btn-outline-dark btn-block" href="">Location 3</a></p>
                </div>
            </div>

            <p class="close sidebarClose"> Back <i class="fas fa-angle-right"></i></p>

        </div><!-- close service-box -->

    </div><!-- close inner -->


    <div class="row">
        <div class="col-md-12 col-lg-12 col-sm-12 hideModal" data-dismiss="modal">
            <h5 id="hideModal">
                HIDE SEARCH MODAL <i class="fas fa-angle-right"></i>
            </h5>
        </div>
    </div>
</div><!-- close top-right FindASalonMenu modal fade -->

.btn-phia {
  background-color: #6b8155;
  border-color: #6b8155;
  color:#fff !important;
  border-radius: 30px;
  padding:15px 30px !important;
}
.btn-outline-dark,
.btn-outline-dark:focus,
.btn-outline-dark:active,
.btn-outline-dark.active  {
  background-color: rgba(0,0,0,0);
  border-color: #6b8155;
  color:#6b8155;
  border-radius: 30px;
  padding:15px 30px;
  
}

/*MODAL*/
.logged-in .FindASalonMenu {
  top: 148px;
}

.modal-backdrop{
  background-color:rgba(255, 255, 255, .8) !important;
  background-color:rgba(1, 1, 1, 1) !important;
}
.modal-backdrop.in{
  opacity: .7!important;
}


.FindASalonMenu {
    background: rgba(255, 255, 255, 1);
    width: 400px;
    overflow: hidden;
    padding: 0px;
    position:fixed;
    top: 90px;
    right: 0!important;
    left: unset;
    height:800px;
}

.FindASalonMenu .inner{
  padding: 40px 30px;
}
.FindASalonMenu .dropdown-menu{
    width: 100%;
}
#modlogo {
    font-weight: bold;
    font-size: 40px;
    color: black;
    text-align: center;
    margin-top: 0px;
}
#moddescr {

    font-size: 26px;
    color: black;
    text-align: center;
    margin: 20px 0;
    font-weight: 200;
    line-height: 36px;
}
#moddescr1 {
    color: #333;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 20px;
}
.FindASalonMenu .modal-btn{
    border: 1px solid gray;
    border-radius: 25px;
    background: transparent;
    height: 50px;
    width: 100%;
}
.fnt{
    font-size: 12px;
    color: black;
}
.FindASalonMenu .or{
    font-weight: 900;
   
    text-align: center;
    color: rgb(107, 128, 85);
}
#hideModal{
    float: right;
    font-size: 16px;
    cursor: pointer;
    font-weight: 100;
    color: #707070;
    padding-top:20px;
}
#hideModal i{
    font-size: 12px;
    margin-left: 10px;
}

/*---------END MODAL----------*/


/*  FindASalonMenu  */

.buttons-block p, .buttons-block h6{
  margin-bottom: 20px
}
#service-box p{
  margin-bottom: 10px;
}

#service-box .btn-outline-dark{
  font-size: 12px;
  text-transform: uppercase;
}
#service-box p .btn-outline-dark{
  font-size: 12px;
  text-transform: uppercase;
}
.modal-talent{
  margin-bottom: 10px;
  text-align: center;
}
.modal-talent img{
  height:100px;
}

.modal-talent a{
  color:#6b8155 !important;
}

@media screen and (max-height:890px){
 .FindASalonMenu{
   height:auto;
   bottom:0;
  overflow:auto;
 }
}

$(document).ready(function () {
  $('.btn-toggle').click(function () {
    // var destination = $(this).attr("href");
    var destination = $(this).data('destination')
    $('.search-box').hide()
    $(destination).show()
  })

  $('.close').click(function () {
    $('.search-box').show()
    $('.toggleSearch').hide()
  })
})

$(document).on('click', '.modal-backdrop', function () {
  $('.modal').modal('hide')
})

$('[data-filter]').click(function () {
  var $destination = $(this.dataset.destination)
  var values = this.dataset.filter.split(' ')

  $destination.find('[data-value]').each(function () {
    // Hide elements that have a data-value that is not
    // included in the data-filter values
    this.hidden = values.indexOf(this.dataset.value) === -1
  })
})