/*
For a more professional header, footer, navigation, mega menu, and sidebar, 
I recommend you to checkout this awesome jQuery plugin and CSS framework:
https://myflashlabs.github.io/24component-bars/
It lets you create almost any kind of bar fast and easy. Cheers!
*/
.pr {
  margin: 0;
  font-family: Arial, sans-serif;
}
.pr body {
  margin: 0;
}

/*
*,
*:after,
*:before {
  box-sizing: border-box;
}
*/

.m-a-0 {
  margin: 0 !important;
}

.m-t-0 {
  margin-top: 0 !important;
}

.m-r-0 {
  margin-right: 0 !important;
}

.m-b-0 {
  margin-bottom: 0 !important;
}

.m-l-0 {
  margin-left: 0 !important;
}

.m-x-0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.m-y-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.m-a {
  margin: 12px !important;
}

.m-t {
  margin-top: 12px !important;
}

.m-r {
  margin-right: 12px !important;
}

.m-b {
  margin-bottom: 12px !important;
}

.m-l {
  margin-left: 12px !important;
}

.m-x {
  margin-right: 12px !important;
  margin-left: 12px !important;
}

.m-y {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

.m-x-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}

.p-a-0 {
  padding: 0 !important;
}

.p-t-0 {
  padding-top: 0 !important;
}

.p-r-0 {
  padding-right: 0 !important;
}

.p-b-0 {
  padding-bottom: 0 !important;
}

.p-l-0 {
  padding-left: 0 !important;
}

.p-x-0 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.p-y-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.p-a {
  padding: 12px !important;
}

.p-t {
  padding-top: 12px !important;
}

.p-r {
  padding-right: 12px !important;
}

.p-b {
  padding-bottom: 12px !important;
}

.p-l {
  padding-left: 12px !important;
}

.p-x {
  padding-right: 12px !important;
  padding-left: 12px !important;
}

.p-y {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}

@media (min-width: 480px) {
  .text-xs-left {
    text-align: left !important;
  }

  .text-xs-right {
    text-align: right !important;
  }

  .text-xs-center {
    text-align: center !important;
  }
}
@media (min-width: 768px) {
  .text-sm-left {
    text-align: left !important;
  }

  .text-sm-right {
    text-align: right !important;
  }

  .text-sm-center {
    text-align: center !important;
  }
}
@media (min-width: 992px) {
  .text-md-left {
    text-align: left !important;
  }

  .text-md-right {
    text-align: right !important;
  }

  .text-md-center {
    text-align: center !important;
  }
}
@media (min-width: 1200px) {
  .text-lg-left {
    text-align: left !important;
  }

  .text-lg-right {
    text-align: right !important;
  }

  .text-lg-center {
    text-align: center !important;
  }
}
.w-full {
  width: 100% !important;
}

.bg-color-white {
  background-color: #eee !important;
}

.bg-color-black {
  background-color: #1a1a1a !important;
}

.bg-color-white-secondary {
  background-color: #e1e1e1 !important;
}

.bg-color-black-secondary {
  background-color: #272727 !important;
}

.text-color-white {
  color: #eee !important;
}

.text-color-black {
  color: #1a1a1a !important;
}

.curved {
  border-radius: 4px !important;
}

.rounded {
  border-radius: 100px !important;
}



.l24-bar {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  /*width: 100%;*/
  min-height: 24px;
  /*margin-bottom: 24px;*/
  transition: all 0.3s;
  transition-timing-function: cubic-bezier(0.09, 0.68, 0, 0.99);
  z-index: 2000;
}
.l24-bar:before, .l24-bar:after {
  content: "";
  display: table;
}
.l24-bar:after {
  clear: both;
}

.l24-bar--pos-fixed-top,
.l24-bar--pos-fixed-bottom {
  position: fixed;
  margin-bottom: 0;
  z-index: 2010;
}

.l24-bar--pos-fixed-top {
  top: 0;
  left: 0;
}

.l24-bar--pos-fixed-bottom {
  bottom: 0;
  left: 0;
}

.l24-bar--visual-footer {
  margin-top: 24px;
  margin-bottom: 0;
}

@media (max-width: 768px) {
    
 .l24-list--visual-collapsible {
    text-align: center;
    background-color: #e8e8e8;
    padding: 10px!important;
    border-radius: 0px 0px 10px 10px;
  }
    
  .l24-list--visual-collapsible .l24-list__item {
        font-size: 20px;
        margin: 5px 0px 12px 0px!important;
    }
}

@media (min-width: 768px) {
  .l24-bar--visual-brand-focus .l24-bar__brand {
    flex: 1 1 auto;
  }
    
 
}
@media (min-width: 768px) {
  .l24-bar--visual-brand-focus .l24-bar__collapse {
    order: -1;
    flex: 0 1 auto;
  }
}

.l24-bar__brand,
.l24-bar__collapse,
.l24-bar__utilities,
.l24-bar__toggle {
  margin: 4px;
  transition: all 0.3s;
}

.l24-bar__utilities--visual-wide {
  flex: 1 1 auto;
}

.l24-bar__brand {
  flex: 1 1 auto;
  font-size: 24px;
  line-height: 1.3333333;
  overflow: hidden;
}
.l24-bar__brand a {
  display: inline-block;
}
.l24-bar__brand a:link, .l24-bar__brand a:visited, .l24-bar__brand a:hover, .l24-bar__brand a:active, .l24-bar__brand a:focus {
  color: inherit;
  text-decoration: none;
}
.l24-bar__brand img {
  max-width: 100%;
  height: auto;
  vertical-align: initial;
}
@media (min-width: 768px) {
  .l24-bar__brand {
    flex: 0 1 auto;
  }
}

@media (min-width: 768px) {
  .l24-bar__toggle {
    display: none;
  }
}

.l24-bar__collapse {
  display: none;
  margin: 0;
  flex: 1 1 100%;
  order: 99;
  transition: padding 0.3s;
  border-top: 1px solid rgba(204, 204, 204, 0.4);
}
@media (min-width: 768px) {
  .l24-bar__collapse {
    display: block !important;
    height: auto !important;
    margin: 4px;
    flex: 2 0 auto;
    order: 0;
    border-top: 0;
  }
}
.no-js .l24-bar__collapse, .l24-bar__collapse.l24-bar__collapse--state-open {
  display: block;
}
.l24-bar--pos-fixed-top .l24-bar__collapse, .l24-bar--pos-fixed-bottom .l24-bar__collapse {
  max-height: 340px;
  overflow-y: auto;
}
@media (max-device-width: 480px) and (orientation: landscape) {
  .l24-bar--pos-fixed-top .l24-bar__collapse, .l24-bar--pos-fixed-bottom .l24-bar__collapse {
    max-height: 200px;
  }
}
@media (min-width: 768px) {
  .l24-bar--pos-fixed-top .l24-bar__collapse, .l24-bar--pos-fixed-bottom .l24-bar__collapse {
    overflow-y: visible;
  }
}

.l24-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

@media (max-width: 767px) {
  .l24-list--visual-collapsible > .l24-list__item {
    display: list-item;
    padding: 0;
  }
  .l24-list--visual-collapsible > .l24-list__item:hover {
    background-color: rgba(204, 204, 204, 0.2);
  }
  .l24-list--visual-collapsible .l24-link {
    display: block;
    width: 100%;
    padding: 8px;
  }
  .l24-list--visual-collapsible .l24-link:hover, .l24-list--visual-collapsible .l24-link:active, .l24-list--visual-collapsible .l24-link:focus {
    opacity: 1;
  }
}

.l24-list__item {
  display: inline-block;
  padding: 4px;
  transition: all 0.3s;
}
.l24-list__item:first-child {
  margin: 0;
}

.l24-link:link, .l24-link:visited, .l24-link:hover, .l24-link:active, .l24-link:focus {
  color: inherit;
  transition: all 0.3s;
  text-decoration: none;
}
.l24-link[disabled] {
  opacity: 0.4;
  pointer-events: none;
}

.l24-link--effect-alpha:hover, .l24-link--effect-alpha:active, .l24-link--effect-alpha:focus {
  opacity: 0.6;
}