/* SIDEBAR */
@media (min-width: 821px) {
  .nb_sidebar {position: fixed; width: 280px; top: 100px; text-align: left; z-index: 50; color: #fff; background-color: rgba(0,0,0,0.5); font-size: 14px; }
  .nb_sidebar, .container, .custom_widget > *:not(#nbs_leftbutton):not(#nbs_rightbutton), body.openright .nb_sidebar.me_right, body.openleft .nb_sidebar.me_left {transition: all .2s linear}
  .custom_widget > *:not(#nbs_leftbutton):not(#nbs_rightbutton) {opacity: 0;}
  .custom_widget {margin: 10px}
  .custom_widget h3 {font-size: 20px; color: #369bac;}
  .custom_widget p {font-size: 16px;}
  #nbs_leftbutton, #nbs_rightbutton, body.openleft #nbs_leftbutton, #nbs_leftbutton:hover, body.openright #nbs_rightbutton, #nbs_rightbutton:hover, body.openleft .me_left .custom_widget > *:not(#nbs_leftbutton), body.openright .me_right .custom_widget > *:not(#nbs_rightbutton) {opacity: 1 !important}
  body.openright .nb_sidebar.me_right {box-shadow: 0 0 5px rgba(0, 0, 0, 0.1)}
  body.openright .nb_sidebar.me_right {right: 0; border-radius: 5px 0px 0px 5px;}
  body.openleft .nb_sidebar.me_left {left: 0; border-radius: 0px 5px 5px 0px;}

  #nbs_rightbutton, #nbs_leftbutton {position: absolute; padding: 3px; top: 90px; display: block; border-radius: 100%; height: 70px; width: 70px; transition: all .5s; z-index: 9; font-size: 36px; color: #fff; text-transform: uppercase; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); background-color: rgba(0,0,255,0.5);  border: 0}
  #nbs_rightbutton:focus, #nbs_leftbutton:focus {outline: 0}
  #nbs_rightbutton {right: 335px}
  #nbs_leftbutton {left: 335px}
  .nbs_textclose {text-align: center}
  .nbs_textclose a {cursor: pointer}

  .nb_sidebar.me_right {right: -280px}
  .nb_sidebar.me_left {left: -280px}
  body .container {left: 0}
  body.openright .container, body.openright .tabs {left: -120px !important}
  body.openleft .container, body.openleft .tabs {left: 120px !important}
}

@media (max-width: 820px)  {
  .nb_sidebar {position: fixed; width: 280px; top: 44px; text-align: left; z-index: 50; color: #fff; background-color: rgba(0,0,0,0.5); font-size: 14px; }
  .nb_sidebar, .container, .custom_widget > *:not(#nbs_leftbutton):not(#nbs_rightbutton), body.openright .nb_sidebar.me_right, body.openleft .nb_sidebar.me_left {transition: all .2s linear}
  .custom_widget > *:not(#nbs_leftbutton):not(#nbs_rightbutton) {opacity: 0;}
  .custom_widget {margin: 10px}
  .custom_widget h3 {font-size: 20px; color: #369bac;}
  .custom_widget p {font-size: 16px;}
  #nbs_leftbutton, #nbs_rightbutton, body.openleft #nbs_leftbutton, #nbs_leftbutton:hover, body.openright #nbs_rightbutton, #nbs_rightbutton:hover, body.openleft .me_left .custom_widget > *:not(#nbs_leftbutton), body.openright .me_right .custom_widget > *:not(#nbs_rightbutton) {opacity: 1 !important}
  body.openright .nb_sidebar.me_right {box-shadow: 0 0 5px rgba(0, 0, 0, 0.1)}
  body.openright .nb_sidebar.me_right {right: 0; border-radius: 5px 0px 0px 5px;}
  body.openleft .nb_sidebar.me_left {left: 0; border-radius: 0px 5px 5px 0px;}

  #nbs_rightbutton, #nbs_leftbutton {position: absolute; padding: 3px; bottom: 0px; display: block; border-radius: 0% 20% 20% 0%; height: 70px; width: 50px; transition: all .5s; z-index: 9; font-size: 24px; color: #fff; text-transform: uppercase; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); background-color: rgba(0,0,255,0.5);  border: 0}
  #nbs_rightbutton:focus, #nbs_leftbutton:focus {outline: 0}
  #nbs_rightbutton {right: 280px}
  #nbs_leftbutton {left: 280px}
  .nbs_textclose {text-align: center}
  .nbs_textclose a {cursor: pointer}

  .nb_sidebar.me_right {right: -280px}
  .nb_sidebar.me_left {left: -280px}
  body .container {left: 0}
  body.openright .container, body.openright .tabs {left: -120px !important}
  body.openleft .container, body.openleft .tabs {left: 120px !important}
}