/* mjoanisse start > */
.jbar {
  background: #e6192b;
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px;
  width: 100%;
  z-index: 8000;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.jbar-content {
  display: block;
  padding-right: 44px; }
  .jbar-content, .jbar-content p, .jbar-content * {
    color: #fff;
    line-height: 1.25; }
  .jbar-content :last-child {
    margin-bottom: 0; }

.jbar-cross {
  width: 24px;
  height: 24px;
  display: block;
  background: #4a4a4a;
  -webkit-transition: background-color 250ms ease;
  -moz-transition: background-color 250ms ease;
  -ms-transition: background-color 250ms ease;
  -o-transition: background-color 250ms ease;
  transition: background-color 250ms ease;
  position: absolute;
  top: 50%;
  margin-top: -12px;
  right: 20px;
  cursor: pointer; }
  .jbar-cross:before, .jbar-cross:after {
    display: block;
    content: '';
    background: #fff;
    height: 2px;
    width: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25%;
    margin-top: -1px; }
  .jbar-cross:before {
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg); }
  .jbar-cross:after {
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg); }
  .jbar-cross:hover {
    background: #8a8d8a; }

@media screen and (max-width: 640px) {
  .jbar {
    padding: 15px; }

  .jbar-cross {
    right: 15px; }

  .jbar-content, .jbar-content * {
    font-size: 14px; } }