/**************** Header / Footer ******************* *
 *  1. Header
 *      1.1. Offcanvas
 *  2. Footer
*****************************************************/

/******************** 1. Header *********************/


/**** 1.1. Offcanvas ****/
.active-content #offcanvas-content,
#offcanvas-content {
  opacity: 1;
  visibility: visible;
}

body #offcanvas-content,
body #offcanvas-feed {
  display: block !important;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s, visibility .5s;
  pointer-events: none;
}

body #offcanvas-content {
  z-index: 4;
}

#offcanvas-content.active-content,
#offcanvas-feed.active-feed,
.active-feed #offcanvas-feed,
.active-alt-content #offcanvas-content {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

/* .active-alt-content #offcanvas-content {
  z-index: 4;
} */

.active-feed.active-alt-content #offcanvas-feed {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

#offcanvas-content .uk-offcanvas-bar {
  max-width: none !important;
  width: 100%;
  left: 0;
  background-color: rgba(0, 0, 0, .9);
  padding: 40px 30px;
}

.active-alt-content #offcanvas-content .uk-offcanvas-bar {
  background-color: rgba(255, 255, 255, .9);  
  background-image: url(../../img/content-border-mobile.svg), url(../../img/content-border-mobile.svg);
  background-repeat: no-repeat, no-repeat;
  background-size: 22px, 20px;
  background-position: left center, right center;
}

.active-feed #offcanvas-content .uk-offcanvas-bar {
  background-color: rgba(255, 255, 255, .9);
}

#offcanvas-feed .uk-offcanvas-bar {
  height: calc(100% - 131px);
  max-width: none !important;
  width: 100%;
  left: 0;
  background-color: #fff;
  padding: 40px 17px;
}

#offcanvas-content .uk-offcanvas-bar > div,
#offcanvas-feed .uk-offcanvas-bar > div {
  margin-top: 50px;
}

#offcanvas-content h2,
#offcanvas-content p {
  color: #FFF;
  font-family: "Roboto Mono";
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;  
}

.active-alt-content #offcanvas-content h2,
.active-alt-content #offcanvas-content p {
  color: #000;
}

#offcanvas-content p {
  font-family: "Helixa";
}

#offcanvas-content h2 {
  margin-bottom: 30px;
}

#offcanvas-content p {
  margin-top: 0;
}

#offcanvas-content h2 + p {
  margin-bottom: 20px;
}

/******************** 2. Footer *********************/