/* MODAL FADE LEFT RIGHT BOTTOM */
.modal.fade:not(.in).left .modal-dialog {
	-webkit-transform: translate3d(-25%, 0, 0);
	transform: translate3d(-25%, 0, 0);
}
.modal.fade:not(.in).right .modal-dialog {
	-webkit-transform: translate3d(25%, 0, 0);
	transform: translate3d(25%, 0, 0);
}
.modal.fade:not(.in).bottom .modal-dialog {
	-webkit-transform: translate3d(0, 25%, 0);
	transform: translate3d(0, 25%, 0);
}


/* MODAL FADE  RIGHT  */
.modal.right .modal-dialog {
	position:absolute;
	top:0;
	right:0;
	margin:0;
}


.modal.left .modal-dialog.modal-sm {
    max-width: 300px;
}

.modal.left .modal-content, .modal.right .modal-content {
    /*min-height: 100vh;*/
    height: auto;
    border: 0;
    /*height: 100%;*/
    overflow-y: auto;
}


/* MODAL FADE LEFT   */
.modal.left .modal-dialog {
	position:absolute;
	top:0;
	left:0;
	margin:0;
}

/* MODAL FADE  BOTTOM */
.modal.bottom .modal-dialog {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
}

 .modal.bottom .modal-dialog.modal-sm {
       width: 100%;
    }

.modal.bottom .modal-content {
    /*min-height: 100vh;*/
    height: 100vh !important;
    border: 0;
    /*height: 100%;*/
    overflow-y: auto;
}








/*<button type="button" data-toggle="modal" data-target="#sidebar-right" class="btn btn-primary navbar-btn pull-left" > Right Sidebar</button >

<button type="button" data-toggle="modal" data-target="#sidebar-left" class="btn btn-primary navbar-btn pull-right" > Left Sidebar</button >*/


/*<!-- Sidebar Left -->
<div class="modal fade left" id="sidebar-left" tabindex="-1" role="dialog" >
<div class="modal-dialog modal-sm" role="document" >
<div class="modal-content" >
<div class="modal-header" >
<button type="button" class="close" data-dismiss="modal" > <span aria-hidden="true" > &times;</span > </button >
<h4 class="modal-title" > Left Sidebar</h4 >
</div >
<div class="modal-body" >
<a href="#home" class="btn btn-block btn-default btn-lg" > Home</a >
<!-- Split button -->
<div class="btn-group btn-block" >
<a role="button" href="#services" class="text-left btn btn-lg btn-default col-xs-10" > Services</a >
<button type="button" class="btn btn-lg btn-default col-xs-2 dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >
<span class="fa fa-chevron-down" > </span >
<span class="sr-only" > Toggle Dropdown</span >
</button >
<ul class="dropdown-menu btn-block" >
<li > <a href="#design" > Design</a > </li >
<li role="separator" class="divider" > </li >
<li > <a href="#develop" > Develop</a > </li >
<li role="separator" class="divider" > </li >
<li > <a href="#support" > Support</a > </li >
</ul >
</div >

<a href="#about" class="btn btn-block btn-default btn-lg" > About</a >

<hr >

<div class="form-group" >
<div class="input-group" >
<input class="form-control" placeholder="Search" >
<span class="input-group-btn" >
<button class="btn btn-default" type="button" > <i class="fa fa-fw fa-search" > </i > </button >
</span >
</div >
</div >

<hr >

<div class="btn-group btn-group-justified" >
<a class="btn btn-instagram btn-lg" href="https://www.instagram.com/jorenerene/" target="_blank" > <i class="fa fa-fw fa-instagram" > </i > </a >
<a class="btn btn-twitter btn-lg" href="https://www.twitter.com/jorenerene/" target="_blank" > <i class="fa fa-fw fa-twitter" > </i > </a >
<a class="btn btn-github btn-lg" href="https://www.github.com/jorenerene/" target="_blank" > <i class="fa fa-fw fa-github" > </i > </a >
</div >

</div >
</div >
</div >
</div >
<!-- Sidebar Right -->
<div class="modal fade right" id="sidebar-right" tabindex="-1" role="dialog" >
<div class="modal-dialog modal-sm" role="document" >
<div class="modal-content" >
<div class="modal-header" >
<button type="button" class="close" data-dismiss="modal" > <span aria-hidden="true" > &times;</span > </button >
<h4 class="modal-title" > Right Sidebar</h4 >
</div >
<div class="modal-body" >

<ul class="nav nav-pills nav-stacked text-center lead" >
<li role="presentation" class="active" > <a href="#home" > Home</a > </li >
<li role="presentation" class="dropdown" >
<a href="#" class="dropdown-toggle" id="myTabDrop1" data-toggle="dropdown" aria-controls="myTabDrop1-contents" aria-expanded="false" > Services <span class="fa fa-fw fa-chevron-down" > </span > </a >
<ul class="dropdown-menu btn-block" >
<li > <a href="#design" role="tab" > Design</a > </li >
<li > <a href="#develop" role="tab" > Develop</a > </li >
<li > <a href="#support" role="tab" > Support</a > </li >
</ul >
</li >
<li role="presentation" > <a href="#about" > About</a > </li >
</ul >

<hr >

<div class="form-group hide" >
<div class="input-group" >
<input class="form-control" placeholder="Search" >
<span class="input-group-btn" >
<button class="btn btn-default" type="button" > <i class="fa fa-fw fa-search" > </i > </button >
</span >
</div >
</div >

<div class="form-group has-feedback" >
<input type="text" class="form-control" id="search-right" placeholder="Search" >
<span class="glyphicon glyphicon-search form-control-feedback" aria-hidden="true" > </span >
</div >

<hr >

<div class="btn-group-vertical center-block" >
<a class="btn btn-instagram btn-lg" href="https://www.instagram.com/jorenerene/" target="_blank" > <i class="fa fa-fw fa-instagram" > </i > </a >
<a class="btn btn-twitter btn-lg" href="https://www.twitter.com/jorenerene/" target="_blank" > <i class="fa fa-fw fa-twitter" > </i > </a >
<a class="btn btn-github btn-lg" href="https://www.github.com/jorenerene/" target="_blank" > <i class="fa fa-fw fa-github" > </i > </a >
</div >

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