body {
  position: relative; }

.menu-list .menu-dropdown-list a.is-active {
  background-color: #8a9efb; }

.page {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 100vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }

.menu-mobile-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  background-color: #000;
  display: none;
  opacity: 0;
  pointer-events: none;
  -webkit-transition-duration: .2s;
     -moz-transition-duration: .2s;
          transition-duration: .2s;
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  transition-property: opacity;
  z-index: 2; }

.navbar {
  -webkit-column-gap: 1rem;
     -moz-column-gap: 1rem;
          column-gap: 1rem; }

.navbar-brand {
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

.logo {
  font-size: 2rem; }

.wrapper {
  -webkit-box-flex: 1;
     -moz-box-flex: 1;
      -ms-flex: 1;
          flex: 1; }

.breadcrumb {
  margin: 1rem 0; }

.sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 100%;
  -webkit-transition-duration: .2s;
     -moz-transition-duration: .2s;
          transition-duration: .2s;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  -moz-transition-property: transform, -moz-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform, -moz-transform;
  z-index: 3; }

.sidebar.is-active {
  display: block; }

.page-date {
  margin-bottom: 1rem;
  color: #9a9898; }

.columns-container {
  position: relative;
  padding: 0 1rem 1rem; }

.content pre {
  padding: 0; }

.content table {
  border: 1px solid #dbdbdb; }
  .content table tr:first-child td {
    font-weight: bold; }
  .content table td, .content table th {
    vertical-align: middle;
    padding: 0.625rem; }

.content code table td, .content code table th {
  padding: 0;
  font-weight: normal; }

.content .code-wrap code {
  max-height: 300px; }

.card {
  margin-bottom: 1rem; }

.card-image img {
  -o-object-fit: cover;
     object-fit: cover; }

.media-content {
  display: block;
  overflow-y: hidden; }

.footer {
  padding: 3rem 1.5rem 3rem; }

.counter,
.copyright,
.socials {
  text-align: center; }

.menu_container {
  text-align: center; }

::-webkit-scrollbar {
  width: 13px;
  height: 3px; }

::-webkit-scrollbar-button {
  background-color: #666; }

::-webkit-scrollbar-track {
  background-color: #999; }

::-webkit-scrollbar-track-piece {
  background-color: #ffffff; }

::-webkit-scrollbar-thumb {
  height: 50px;
  background-color: #666;
  border-radius: 3px; }

::-webkit-scrollbar-corner {
  background-color: #999; }

::-webkit-resizer {
  background-color: #666; }

/**************************************************RESPONSIVE**********************************************************/
@media screen and (max-width: 768px) {
  .columns-container.is-active .menu-mobile-overlay {
    opacity: .8;
    pointer-events: auto; }
  .sidebar.is-active {
    -webkit-transform: translateX(100%);
       -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
            transform: translateX(100%); }
  .sidebar {
    position: absolute;
    top: 0;
    left: -13.25rem;
    bottom: 0;
    margin: 0.75rem 0 0 0;
    width: 13.25rem;
    background-color: #fff; } }

@media screen and (max-width: 768px) {
  .menu-mobile-overlay {
    display: block; } }

@media screen and (min-width: 769px), print {
  .sidebar {
    margin: 0; } }

@media screen and (min-width: 390px), print {
  .logo {
    font-size: 3rem; } }

/**************************************************ADDONS**************************************************************/
/*

====== Zoom effect ======

*/
.mfp-zoom-in {
  /* start state */
  /* animate in */
  /* animate out */ }
  .mfp-zoom-in .mfp-with-anim {
    opacity: 0;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -webkit-transform: scale(0.8);
       -moz-transform: scale(0.8);
        -ms-transform: scale(0.8);
            transform: scale(0.8); }
  .mfp-zoom-in.mfp-bg {
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out; }
  .mfp-zoom-in.mfp-ready .mfp-with-anim {
    opacity: 1;
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1); }
  .mfp-zoom-in.mfp-ready.mfp-bg {
    opacity: 0.8; }
  .mfp-zoom-in.mfp-removing .mfp-with-anim {
    -webkit-transform: scale(0.8);
       -moz-transform: scale(0.8);
        -ms-transform: scale(0.8);
            transform: scale(0.8);
    opacity: 0; }
  .mfp-zoom-in.mfp-removing.mfp-bg {
    opacity: 0; }

/*

====== Newspaper effect ======

*/
.mfp-newspaper {
  /* start state */
  /* animate in */
  /* animate out */ }
  .mfp-newspaper .mfp-with-anim {
    opacity: 0;
    -webkit-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
    -webkit-transform: scale(0) rotate(500deg);
       -moz-transform: scale(0) rotate(500deg);
        -ms-transform: scale(0) rotate(500deg);
            transform: scale(0) rotate(500deg); }
  .mfp-newspaper.mfp-bg {
    opacity: 0;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s; }
  .mfp-newspaper.mfp-ready .mfp-with-anim {
    opacity: 1;
    -webkit-transform: scale(1) rotate(0deg);
       -moz-transform: scale(1) rotate(0deg);
        -ms-transform: scale(1) rotate(0deg);
            transform: scale(1) rotate(0deg); }
  .mfp-newspaper.mfp-ready.mfp-bg {
    opacity: 0.8; }
  .mfp-newspaper.mfp-removing .mfp-with-anim {
    -webkit-transform: scale(0) rotate(500deg);
       -moz-transform: scale(0) rotate(500deg);
        -ms-transform: scale(0) rotate(500deg);
            transform: scale(0) rotate(500deg);
    opacity: 0; }
  .mfp-newspaper.mfp-removing.mfp-bg {
    opacity: 0; }

/*

====== Move-horizontal effect ======

*/
.mfp-move-horizontal {
  /* start state */
  /* animate in */
  /* animate out */ }
  .mfp-move-horizontal .mfp-with-anim {
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-transform: translateX(-50px);
       -moz-transform: translateX(-50px);
        -ms-transform: translateX(-50px);
            transform: translateX(-50px); }
  .mfp-move-horizontal.mfp-bg {
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s; }
  .mfp-move-horizontal.mfp-ready .mfp-with-anim {
    opacity: 1;
    -webkit-transform: translateX(0);
       -moz-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0); }
  .mfp-move-horizontal.mfp-ready.mfp-bg {
    opacity: 0.8; }
  .mfp-move-horizontal.mfp-removing .mfp-with-anim {
    -webkit-transform: translateX(50px);
       -moz-transform: translateX(50px);
        -ms-transform: translateX(50px);
            transform: translateX(50px);
    opacity: 0; }
  .mfp-move-horizontal.mfp-removing.mfp-bg {
    opacity: 0; }

/*

====== Move-from-top effect ======

*/
.mfp-move-from-top {
  /* start state */
  /* animate in */
  /* animate out */ }
  .mfp-move-from-top .mfp-content {
    vertical-align: top; }
  .mfp-move-from-top .mfp-with-anim {
    opacity: 0;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
    -webkit-transform: translateY(-100px);
       -moz-transform: translateY(-100px);
        -ms-transform: translateY(-100px);
            transform: translateY(-100px); }
  .mfp-move-from-top.mfp-bg {
    opacity: 0;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s; }
  .mfp-move-from-top.mfp-ready .mfp-with-anim {
    opacity: 1;
    -webkit-transform: translateY(0);
       -moz-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0); }
  .mfp-move-from-top.mfp-ready.mfp-bg {
    opacity: 0.8; }
  .mfp-move-from-top.mfp-removing .mfp-with-anim {
    -webkit-transform: translateY(-50px);
       -moz-transform: translateY(-50px);
        -ms-transform: translateY(-50px);
            transform: translateY(-50px);
    opacity: 0; }
  .mfp-move-from-top.mfp-removing.mfp-bg {
    opacity: 0; }

/*

====== 3d unfold ======

*/
.mfp-3d-unfold {
  /* start state */
  /* animate in */
  /* animate out */ }
  .mfp-3d-unfold .mfp-content {
    -webkit-perspective: 2000px;
       -moz-perspective: 2000px;
            perspective: 2000px; }
  .mfp-3d-unfold .mfp-with-anim {
    opacity: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-transform: rotateY(-60deg);
       -moz-transform: rotateY(-60deg);
            transform: rotateY(-60deg); }
  .mfp-3d-unfold.mfp-bg {
    opacity: 0;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s; }
  .mfp-3d-unfold.mfp-ready .mfp-with-anim {
    opacity: 1;
    -webkit-transform: rotateY(0deg);
       -moz-transform: rotateY(0deg);
            transform: rotateY(0deg); }
  .mfp-3d-unfold.mfp-ready.mfp-bg {
    opacity: 0.8; }
  .mfp-3d-unfold.mfp-removing .mfp-with-anim {
    -webkit-transform: rotateY(60deg);
       -moz-transform: rotateY(60deg);
            transform: rotateY(60deg);
    opacity: 0; }
  .mfp-3d-unfold.mfp-removing.mfp-bg {
    opacity: 0; }

/*

====== Zoom-out effect ======

*/
.mfp-zoom-out {
  /* start state */
  /* animate in */
  /* animate out */ }
  .mfp-zoom-out .mfp-with-anim {
    opacity: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-transform: scale(1.3);
       -moz-transform: scale(1.3);
        -ms-transform: scale(1.3);
            transform: scale(1.3); }
  .mfp-zoom-out.mfp-bg {
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out; }
  .mfp-zoom-out.mfp-ready .mfp-with-anim {
    opacity: 1;
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1); }
  .mfp-zoom-out.mfp-ready.mfp-bg {
    opacity: 0.8; }
  .mfp-zoom-out.mfp-removing .mfp-with-anim {
    -webkit-transform: scale(1.3);
       -moz-transform: scale(1.3);
        -ms-transform: scale(1.3);
            transform: scale(1.3);
    opacity: 0; }
  .mfp-zoom-out.mfp-removing.mfp-bg {
    opacity: 0; }

/*

====== "Hinge" close effect ======

*/
@-webkit-keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out; }
  20%, 60% {
    -webkit-transform: rotate(80deg);
            transform: rotate(80deg);
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out; }
  40% {
    -webkit-transform: rotate(60deg);
            transform: rotate(60deg);
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out; }
  80% {
    -webkit-transform: rotate(60deg) translateY(0);
            transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out; }
  100% {
    -webkit-transform: translateY(700px);
            transform: translateY(700px);
    opacity: 0; } }
@-moz-keyframes hinge {
  0% {
    -moz-transform: rotate(0);
         transform: rotate(0);
    -moz-transform-origin: top left;
         transform-origin: top left;
    -moz-animation-timing-function: ease-in-out;
         animation-timing-function: ease-in-out; }
  20%, 60% {
    -moz-transform: rotate(80deg);
         transform: rotate(80deg);
    -moz-transform-origin: top left;
         transform-origin: top left;
    -moz-animation-timing-function: ease-in-out;
         animation-timing-function: ease-in-out; }
  40% {
    -moz-transform: rotate(60deg);
         transform: rotate(60deg);
    -moz-transform-origin: top left;
         transform-origin: top left;
    -moz-animation-timing-function: ease-in-out;
         animation-timing-function: ease-in-out; }
  80% {
    -moz-transform: rotate(60deg) translateY(0);
         transform: rotate(60deg) translateY(0);
    opacity: 1;
    -moz-transform-origin: top left;
         transform-origin: top left;
    -moz-animation-timing-function: ease-in-out;
         animation-timing-function: ease-in-out; }
  100% {
    -moz-transform: translateY(700px);
         transform: translateY(700px);
    opacity: 0; } }
@keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
       -moz-transform: rotate(0);
            transform: rotate(0);
    -webkit-transform-origin: top left;
       -moz-transform-origin: top left;
            transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
       -moz-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out; }
  20%, 60% {
    -webkit-transform: rotate(80deg);
       -moz-transform: rotate(80deg);
            transform: rotate(80deg);
    -webkit-transform-origin: top left;
       -moz-transform-origin: top left;
            transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
       -moz-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out; }
  40% {
    -webkit-transform: rotate(60deg);
       -moz-transform: rotate(60deg);
            transform: rotate(60deg);
    -webkit-transform-origin: top left;
       -moz-transform-origin: top left;
            transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
       -moz-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out; }
  80% {
    -webkit-transform: rotate(60deg) translateY(0);
       -moz-transform: rotate(60deg) translateY(0);
            transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
       -moz-transform-origin: top left;
            transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
       -moz-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out; }
  100% {
    -webkit-transform: translateY(700px);
       -moz-transform: translateY(700px);
            transform: translateY(700px);
    opacity: 0; } }

.hinge {
  -webkit-animation-duration: 1s;
     -moz-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-name: hinge;
     -moz-animation-name: hinge;
          animation-name: hinge; }

.mfp-with-fade .mfp-content, .mfp-with-fade.mfp-bg {
  opacity: 0;
  -webkit-transition: opacity .5s ease-out;
  -moz-transition: opacity .5s ease-out;
  transition: opacity .5s ease-out; }

.mfp-with-fade.mfp-ready .mfp-content {
  opacity: 1; }

.mfp-with-fade.mfp-ready.mfp-bg {
  opacity: 0.8; }

.mfp-with-fade.mfp-removing.mfp-bg {
  opacity: 0; }

/* preview styles */
html {
  font-family: "Calibri", "Trebuchet MS", "Helvetica", sans-serif; }

h3 {
  margin-top: 0;
  font-size: 24px; }

a,
a:visited {
  color: #1760BF;
  text-decoration: none; }

a:hover {
  color: #c00; }

.links li {
  margin-bottom: 5px; }

h4 {
  margin: 24px 0 0 0; }

.bottom-text {
  margin-top: 40px;
  border-top: 2px solid #CCC; }
  .bottom-text a {
    border-bottom: 1px solid #CCC; }
  .bottom-text p {
    max-width: 650px; }