/*******************************
* MODAL AS LEFT/RIGHT SIDEBAR
* Add "left" or "right" in modal parent div, after class="modal".
* Get free snippets on bootpen.com
*******************************/
.modal.left .modal-dialog,
.modal.right .modal-dialog {
    position: fixed;
    margin: auto;
    width: 320px;
    /*width: 320px;*/
    height: 100%;
    -webkit-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
    -o-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
}

.modal.left .modal-content,
.modal.right .modal-content {
    height: 100%;
    overflow-y: auto;
}

.modal.left .modal-body,
.modal.right .modal-body {
    padding: 15px 15px 80px;
}

/*Left*/
.modal.left.fade .modal-dialog{
    left: -320px;
    -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
    -o-transition: opacity 0.3s linear, left 0.3s ease-out;
    transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.left.fade.in .modal-dialog{
    left: 0;
}

/*Right*/
.modal.right.fade .modal-dialog {
    right: -320px;
    -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
    -o-transition: opacity 0.3s linear, right 0.3s ease-out;
    transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.fade.in .modal-dialog {
    right: 0;
}

/* ----- MODAL STYLE ----- */
.modal-content {
    border-radius: 0;
    border: none;
}

.modal-header {
    border-bottom-color: #EEEEEE;
    background-color: #FAFAFA;
}

/* ---- button ---- */

/*.button {
  display: inline-block;
  padding: 0.5em 1.0em;
  background: #EEE;
  border: none;
  border-radius: 7px;
  background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
  color: #222;
  font-family: sans-serif;
  font-size: 16px;
  text-shadow: 0 1px white;
  cursor: pointer;
}*/

.button:hover {
    /*background-color: #28F;*/
    /*text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);*/
    /*color: #222;*/
    /*border-color: #28F;*/
}

.button:active,
.button.is-checked {
    background-color: #00416B;
}

/*.button.is-checked {
  color: white;
  text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}*/

/*.button:active {
  box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}*/

/* ---- button-group ---- */

.button-group:after {
    content: '';
    display: block;
    clear: both;
}

.button-group .button {
    /*float: left;*/
    /*    border-radius: 0;*/
    /*margin-left: 0;*/
    /*margin-right: 1px;*/
    /*margin: 1px;*/

    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

.button-group .button:first-child { 
    /*border-radius: 0.5em 0 0 0.5em;*/ 
    margin: 1px;
}
.button-group .button:last-child { 
    /*border-radius: 0 0.5em 0.5em 0;*/
    margin: 1px;
}

.button-group:first-child { 
    /*border-radius: 0.5em 0 0 0.5em;*/ 
    margin: 1px;
}

.button-group:last-child { 
    /*border-radius: 0 0.5em 0.5em 0;*/
    margin: 1px;
}

/* ---- isotope ---- */

/*.grid {
  background: #EEE;
  max-width: 1200px;
}*/

/* clear fix */
/*.grid:after {
  content: '';
  display: block;
  clear: both;
}*/

/* ui group */

/*.ui-group {
  display: inline-block;
}*/

/*.ui-group h3 {
  display: inline-block;
  vertical-align: top;
  line-height: 32px;
  margin-right: 0.2em;
  font-size: 16px;
}*/

/*.ui-group .button-group {
  display: inline-block;
  margin-right: 20px;
}*/

.btn-group .btn + .btn, .btn-group .btn + .btn-group, .btn-group .btn-group + .btn, .btn-group .btn-group + .btn-group {
    margin: 1px;
}