/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100vh;
}

body {
  font-size: 1rem;
  /* Margin bottom by footer height */
  margin-bottom: 4rem;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

body.bg-dark {
  background-color: var(--dark, #222) !important;
  color: var(--light, #f8f9fa) !important;
}

body.sticky-footer {
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100vh;
  -ms-flex-direction: column;
}

#body-wrapper { padding-top: 2rem; }
.header-fixed #body-wrapper {margin-top: 4rem; }
.header-fixed .hero + #start > #body-wrapper { margin-top: 0; padding-top: 1rem;}

/* --------------------------------------------------------------------------
 * Footer styling
 * -------------------------------------------------------------------------- */
 footer {
  padding: 1rem 0 0;
  position: absolute;
  bottom: 0;
}
.sticky-footer footer {
  position: sticky;
  bottom: 0;
}
.footer {
  border-top: 1px solid var(--primary, #ff8400 );
  padding: 0.8em 1em;
  font-size: 0.8em;
  background-color: var(--light, #f8f9fa);
}
.footer .copyright {
    float: right;
    font-style: italic;
    font-size: small;
}
body.bg-dark .footer {
  background-color: var(--dark-grey, #333);
}

/* --------------------------------------------------------------------------
 * Images
 * -------------------------------------------------------------------------- */
img.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/** Heading subtitles **/
h2 .subtitle,
h3 .subtitle,
h4 .subtitle {
    font-weight: normal;
    font-size: 0.75em;
    display: block;
}

/** Extra columns spacing **/
.extra-spacing:not(.col-12), :not(.col12) > .e-content { padding-right: 1rem; }
@media (max-width: 840px) { .extra-spacing:not(.col-12), :not(.col12) > .e-content { padding-right: 0; } }

/** Breadcrumbs styling **/
#breadcrumbs { padding-left: 0; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; margin-top: -0.5rem; margin-bottom: 1rem; }
#breadcrumbs i { display: none; }
#breadcrumbs span, #breadcrumbs a { padding: 0 0.2rem; }
#breadcrumbs span:first-child, #breadcrumbs a:first-child { padding-left: 0; }
#breadcrumbs span:not(:first-child)::before, #breadcrumbs a:not(:first-child)::before { color: var(--secondary, #aaa); content: "/"; padding-right: 0.5rem; }

/** Blog Listing **/
.blog-listing .bricklayer-column { padding-left: 0px; padding-right: 25px; }
.blog-listing .card { margin-bottom: 25px; border: 0; box-shadow: 0 10px 25px -9px rgba(0, 0, 0, 0.5); }
.blog-listing .card-footer { text-align: right; background-color: white; border-top: 0;}
.blog-listing .blog-date { font-size: 13px; }
body.bg-dark .blog-listing .card-header,
body.bg-dark .blog-listing .card,
body.bg-dark .blog-listing .card-footer {background-color: black;}

/** Blog Item **/
.content-title { margin-bottom: 2rem; }
.content-title h2 { margin-bottom: 0.5rem; }
.label { font-size: 12px; text-transform: uppercase; }

/** Pagination **/
ul.pagination { -ms-flex-pack: center; justify-content: center; }
body.bg-dark .pagination .page-item:not(.active) .page-link:not(:hover) {
  background-color: var(--dark,  #222);
  border-color: var(--dark-grey, #333);
}
.prev-next { margin-top: 3rem; }

/* --------------------------------------------------------------------------
 * Header styling, including Bootstrap Navbar and logo
 * -------------------------------------------------------------------------- */
 
/* Header */
#header {
  border-bottom: 1px solid rgba(172, 179, 194, 0.2);
  background: var(--light, #f8f9fa);
  color: var(--dark, #222);
}

.header-dark #header { color: var(--light, #f8f9fa); background: var(--dark, #222); }
.header-dark.header-transparent #header { background: rgba(0, 0, 0, 0.05); }
.header-transparent #header { background: rgba(255, 255, 255, 0.05); }

.header-fixed #header { position: fixed; top: 0; z-index: 2; }

/* Navigation bar */
.navbar {
  align-items: flex-start;
  padding-top: 0rem;
  padding-bottom: 0rem;
}
.navbar, .navbar .dropdown-item  { font-size: 1.2rem; }
.header-fixed #header.scrolled .navbar, .header-fixed #header.scrolled .navbar .dropdown-item { font-size: 0.9rem; }

.navbar .navbar-section:not(:first-child):last-child {
  justify-content: flex-end;
}

/* navbar brand - Logo */
.navbar-brand {
  display: flex;
  margin: 0.5rem;
  padding: 0rem;
  align-items: center;
}

.navbar-brand a {
  display: flex;
  text-decoration: none;
}
.navbar-brand .logo-title {
  font-family: "Permanent Marker", cursive;
  font-size: 2rem;
  color: var(--primary, #ff8400);
  padding-left: 1rem;
}
#header.scrolled .navbar-brand .logo-title {
  font-size: 1.2rem;
}
.navbar .navbar-brand svg,
.navbar .navbar-brand img {
  height: 3rem;
  display: inherit;
}
#header .navbar-brand svg path {
  fill: var(--primary, #ff8900);
}
.header-dark #header .navbar-brand svg path {
  fill: var(--primary, #ff8900);
}

/* Navbar nav menus */
.navbar .desktop-menu {
  padding-bottom: 0;
}
.navbar .mobile-sep {
  display: block;
  margin-bottom: 1rem;
  width: 100%;
  height: 1rem;
  color: var(--primary, #ff8400);
  background-color: var(--primary, #ff8400);
}

/* navbar sub-menus */
.navbar ul.nav-child {
  margin: 0px;
  padding: 0px;
}

/* expand sublevel to the right / left */
.navbar-nav .nav-child .dropdown-menu {
  top: 0px;
  left: 100%;
}
/* expand sublevel on hover */
.navbar-nav .dropdown:hover>.dropdown-menu {
  display: block;
}

/* menu typographie */
.navbar-nav .nav-item  > .nav-link,
.navbar-nav .nav-child .dropdown-item {
  text-transform: uppercase;
}

/* menu colors */
.navbar-nav .nav-link { color: var(--dark, #222); }
.header-dark .navbar-nav .nav-link { color: #fff; }

.navbar-nav .dropdown-menu { background-color: var(--light, #f8f9fa);}
.header-dark .navbar-nav .dropdown-menu { background-color: var(--dark, #222);}

.header-transparent .navbar-nav .dropdown-menu { background-color:rgba(255,255, 255, 0)}
.header-dark.header-transparent .navbar-nav .dropdown-menu { background-color:rgba(0,0, 0, 0.05)}

.navbar-nav .nav-item,
.navbar-nav .nav-item.active,
.navbar-nav .nav-item:active,
.navbar-nav .nav-item:hover,
.navbar-nav .dropdown-item,
.navbar-nav .dropdown-item.active,
.navbar-nav .dropdown-item:active,
.navbar-nav .dropdown-item:hover  {
  background: inherit;
}

/* menu animation */
.navbar-nav .nav-item  > .nav-link,
.navbar-nav .nav-child .dropdown-item {
  display: inline-block;
  position: relative;
  border: 0;
}

.navbar-nav .nav-item > .nav-link:after,
.navbar-nav .dropdown-menu.nav-child .dropdown-item:after {
   content: " ";
   background: var(--primary, #ff8400);
   position: absolute;
   left: 0px;
   right: 0px;
   top: 0;
   bottom: auto;
   width: 100%;
   height: 0.4rem;
   border: 0;
   padding: 0;
   margin: 0;
   transform: scaleX(0);
   transition: transform 0.5s;
}

.navbar-nav .dropdown-menu.nav-child .dropdown-item:after {
  right: auto;
  bottom: 0px;
  width: 0.5rem;
  height: 100%;
  transform: scaleY(0);
}

.navbar-nav .nav-item.active > .nav-link:after,
.navbar-nav .nav-item > .nav-link:hover:after  {
 transform: scaleX(1);
}

.navbar-nav .dropdown-menu.nav-child .active >.dropdown-item:after,
.navbar-nav .dropdown-menu.nav-child .dropdown-item.active:after,
.navbar-nav .dropdown-menu.nav-child .dropdown-item:hover:after  {
 transform: scaleY(1);
}

@media (max-width: 991.98px){
    div.navbar-collapse {
        max-height: 90vh;
        overflow: auto;
    }
    .navbar-nav .nav-link {
      padding-top: 0px;
      padding-left: 15px;
    }
    .navbar-nav .nav-child .dropdown-item {
      padding-left: 23px;
    }
    .navbar-nav .nav-child .nav-child .dropdown-item {
      padding-left: 31px;
    }

    /* left red bar indicator */
    .navbar-nav .nav-item > .nav-link:after,
    .navbar-nav .dropdown-menu.nav-child .dropdown-item:after  {
       content: " ";
       background: var(--primary, #ff8400);
       position: absolute;
       bottom: 0px;
       left: 0px;
       top: 0px;
       width: 8px;
       height: 100%;
       border: 0;
       padding: 0;
       margin: 0;
       transform: scaleY(0);
       transition: transform 0.5s;
    }
    .navbar-nav .dropdown-menu.nav-child .dropdown-item:after {
        left: 8px;
    }
    .navbar-nav .dropdown-menu.nav-child .nav-child .dropdown-item:after {
        left: 16px;
    }
  
    .navbar-nav .nav-item.active > .nav-link:after,
    .navbar-nav .nav-item > .nav-link:hover:after  {
      transform: scaleY(1);
    }
}

/* navbar menu toggler  */
button.navbar-toggler {
  z-index: 3;
}
.navbar-toggler #menu-toggle{
  position: absolute;
  z-index: 100;
  top: 1.3rem;
  right: 0rem;
  width: 28px;
  height: 24px;
  cursor: pointer;
  transition: opacity .25s ease,top .5s ease;      
}
.navbar-toggler #menu-toggle span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
cursor: pointer;
transition: all .35s ease;
border: none;
background: var(--primary, #ff8400);
}
.navbar-toggler #menu-toggle span:nth-of-type(2) { top: 8px;}
.navbar-toggler #menu-toggle span:nth-of-type(3) { top: 16px;}

/* fixed scrolled  header */
body.header-fixed.header-animated #header.scrolled .navbar-toggler #menu-toggle {top: .5rem;}
body.header-fixed.header-animated #header.scrolled .navbar-brand img, 
body.header-fixed.header-animated #header.scrolled .navbar-brand svg {
  height: 1.75rem;
}

/* --------------------------------------------------------------------------
 * Hero styling
 * -------------------------------------------------------------------------- */
 .overlay-light, .overlay-dark, .overlay-light-gradient, .overlay-dark-gradient { z-index: 0; }
 .hero { position: relative; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; padding-top: 6rem; padding-bottom: 7rem; background-size: cover; background-position: center; }
 .hero h1 { color: #242931; font-size: 4rem; font-family: "Permanent Marker", cursive; text-shadow: 3px 3px 3px #ababab;}
 .hero h2 { color: rgba(36, 41, 49, 0.8); font-size: 2.5rem; }
 .hero.hero-fullscreen { min-height: 100vh; }
 .hero.hero-large { min-height: 500px; }
 .hero.hero-medium { min-height: 400px; padding-bottom: 5rem;}
 .hero.hero-small { min-height: 110px; padding-bottom: 4rem;}
 .hero.hero-tiny { min-height: 8rem; padding-bottom: 2rem;}
 .header-fixed .hero { background-position: 50% 0; }
 @media (max-width: 840px) { .hero h1 { font-size: 3rem; }
   .hero h2 { font-size: 1.75rem; } }
 @media (max-width: 600px) { .hero h1 { font-size: 2rem; }
   .hero h2 { font-size: 1.25rem; } }
 .hero.text-light h1 { color: var(--white, #fff); text-shadow: 3px 3px 3px #333;}
 .hero.text-light h2 { color: rgba(255, 255, 255, 0.8); }
 .hero p { font-size: .9rem; font-weight: 300; }
 .hero #to-start { display: inline-block; position: absolute; bottom: 3rem; font-size: 3rem; cursor: pointer; }
 .hero.hero-medium #to-start { display: inline-block; position: absolute; bottom: 2rem; font-size: 2.5rem; cursor: pointer; }
 .hero.hero-small #to-start { display: inline-block; position: absolute; bottom: 1rem; font-size: 2rem; cursor: pointer; }
 .hero.hero-tiny #to-start { display: inline-block; position: absolute; bottom: 0.5rem; font-size: 2rem; cursor: pointer; }

 .image-overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; }
 .overlay-light .image-overlay { background: rgba(255, 255, 255, 0.4); }
 .overlay-light-gradient .image-overlay { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2)); }
 .overlay-dark .image-overlay { background: rgba(0, 0, 0, 0.4); }
 .overlay-dark-gradient .image-overlay { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)); }
 
.title-h1h2 h1 { margin-bottom: 0.5rem; }
.title-h1h2 h1 strong, .title-h1h2 h1 bold { font-weight: 700; }
.title-h1h2 h1 + h2 { margin-top: 0; }
.title-h1h2 h1 + h2, h1 + h2 { margin-bottom: 50px; font-weight: 700; }

/* --------------------------------------------------------------------------
 * Sidebar 
 * -------------------------------------------------------------------------- */
#sidebar { border-top: 3px solid var(--primary, #ff8400); padding-top: 0.3rem;}
#sidebar .sidebar-content h1, #sidebar .sidebar-content h2, #sidebar .sidebar-content h3, #sidebar .sidebar-content h4, #sidebar .sidebar-content h5, #sidebar .sidebar-content h6 { color: var(--primary, #ff8400); }
#sidebar .sidebar-content:not(:last-child) { margin-bottom: 2rem;}
#sidebar .sidebar-list ul {padding-left: 1rem;}
#sidebar .sidebar-list span.subtitle {font-family: 'News Cylce', 'Arial Narrow', Arial, sans-serif; font-weight: 400; font-size: 0.7rem; text-transform: uppercase; color: var(--dark, #222);}
body.bg-dark #sidebar .sidebar-list span.subtitle {color: var(--light, #f8f9fa);}
#sidebar .menu { z-index: 300; min-width: 180px; margin: 0; padding: .4rem; list-style: none; transform: translateY(.2rem); border-radius: .1rem; background: #fff; box-shadow: 0 .05rem .2rem rgba(69,77,93,.3); }
#sidebar .menu .menu-badge {position: absolute; top: 0; right: 0; display: -ms-flexbox; display: flex; height: 100%; -ms-flex-align: center; align-items: center; }
#sidebar .menu .menu-item { position: relative; margin-top: 0; padding: 0 .4rem; text-decoration: none; }
#sidebar .menu .menu-item > a {display: block; margin: 0 -.4rem; padding: .2rem .4rem; text-decoration: none; color: inherit; border-radius: .1rem; }
#sidebar ul.related-pages { box-shadow: none; padding: 0; z-index: 1; }
#sidebar ul.related-pages li { border-bottom: 1px solid #e7e9ed; }
#sidebar ul.related-pages li:last-child { border-bottom: 0; }
#sidebar ul.archives { list-style: none; margin-left: 0; padding-left: 0;}
#sidebar ul.archives .label { vertical-align: text-top; }
#sidebar div.separator {border-top: 3px solid var(--primary, #ff8400); margin: 0; padding: 0.25rem 0;}

/* --------------------------------------------------------------------------
 * Animations
 * -------------------------------------------------------------------------- */
.default-animation, #header, #header nav.navbar, #header nav.navbar .dropdown-item, #header .navbar-brand svg, #header .navbar-brand img, #header .navbar-brand .logo-title, .modular-features.small .feature-icon i, .modular-features .feature-icon { transition: all 0.5s ease; }
.pulse { animation-name: pulse_animation; animation-duration: 2000ms; transform-origin: 70% 70%; animation-iteration-count: infinite; animation-timing-function: linear; }
@keyframes pulse_animation { 0% { transform: scale(1); }
  30% { transform: scale(1); }
  40% { transform: scale(1.08); }
  50% { transform: scale(1); }
  60% { transform: scale(1); }
  70% { transform: scale(1.05); }
  80% { transform: scale(1); }
  100% { transform: scale(1); } }

/* --------------------------------------------------------------------------
 *  glightbox cusomizing
 * -------------------------------------------------------------------------- */
.glightbox-clean .gslide-description { background-color: var(--light, #f8f9fa);}
body.bg-dark .glightbox-clean .gslide-description { background-color: var(--dark-grey, #333);}

/* --------------------------------------------------------------------------
 *  ui-polaroid
 * -------------------------------------------------------------------------- */
body.bg-dark .polaroid {background-color: var(--light, #f8f9fa); color: var(--dark, #222); box-shadow: 2px -2px 20px 0px rgba(0, 0, 0, 0.5);}


/* --------------------------------------------------------------------------
 *  divers
 * -------------------------------------------------------------------------- */
.fa--after.fa-external-link:before {
  content: "";
  padding: 0;
}
.fa--after.fa-external-link:after {
  font-family:  FontAwesome;
  content: "\f08e";
  padding-left: 0.5em;
  position: relative;
}