/*!
* Neon template
* Template styles
*/

/* Loading animation */
@media all {

  html {
    transition: var(--transition-slow);
    transition-property: filter;
  }
  
  .gallery {
    background-color: var(--color-dark);
  }

  .loading {
    display: none;
  }

  .ready {
    display: block;
    filter: brightness(0);
  }

}

/* General transitions */
@media all {
  a {
    transition: var(--transition-default);
  }
}

/* Fonts */
@media all {

  .page {    
    font: var(--font-1);
  }

  .hx {
    font: var(--font-2);
  }

}

/* Page */
@media all {  

  html {    
    background-color: var(--color-gray-dark);
  }
  
  .page {    
    background-color: var(--color-light);    
    max-width: var(--def-max-width-page);
  }

  .page-header {
    background-color: var(--color-dark);    
  }

}

/* Page Component - Navigation - List */
@media all {

  .nav-link {
    font: var(--font-1-bold);
    padding-top: var(--pad-ver-med);
    padding-bottom: var(--pad-ver-med);
    color: var(--color-light);
  }

  .nav-link:hover {
    color: var(--color-1);
  }

  .nav-list-item .nav-list .nav-link {
    font: var(--font-1);
  }

}

/* Page Component - Navigation - Horizontal */
@media all {

  .navtype-horizontal .navigation-main {
    margin-right: calc(-1 * var(--pad-hor-sml))
  }

  .js-disabled .nav-link ,
  .navtype-horizontal .nav-link {
    background-color: var(--color-dark);
  }
  
  .navtype-horizontal .nav-link {
    padding: var(--pad-ver-med) var(--pad-hor-sml);
  }

  .navtype-horizontal .nav-lvl-1 .nav-link {
    padding-top: var(--pad-ver-sml);
    padding-bottom: var(--pad-ver-sml);
  }

}

/* Page Component - Navigation - Offcanvas */
@media all {

  .offcanvas-toggle {
    margin-right: calc(-1 * var(--pad-hor-med));
    padding: var(--pad-ver-med) var(--pad-hor-med);
  }

  .navtype-offcanvas .page-offcanvas {
    background-color: var(--color-dark-trans);
  }

  .page-offcanvas {
    top: calc(var(--pad-ver-med) * 2 + var(--logo-size));
  }

  .nav-toggle-sublevel ,
  .nav-toggle-back {
    padding-top: var(--pad-ver-med);
    padding-bottom: var(--pad-ver-med);
  }
  
  /* overlay */
  .navtype-offcanvas .page-content::after {
    background-color: var(--color-dark-trans);
    transition: var(--transition-default);
    transition-property: opacity;
    opacity: 1;
  }
  
  .navtype-offcanvas.offcanvas-toggled .page-content::after {
    opacity: 1;
  }

}

/* Page Component - Logo */
@media all {

  .logo {
    padding: var(--pad-ver-med) var(--pad-hor-med);
    margin-left: calc(-1 * var(--pad-hor-med));
    fill: var(--color-light);
  }

  .logo:hover {
    fill: var(--color-1);
  }

}

/* Common styles */
@media all {

  header ,
  p {
    /*! max-width: var(--max-width-text); */
  }

}

/* Container */
@media all {
  
}

/* Content Element - common styles */
@media all {
  
}

/* Content Element - Neon Textmedia */
@media all {


  /* general styles */

  .text {
  }

  /* behind */

  .behind .media {
    overflow: hidden;
    position: relative;
    background: var(--color-gray-dark);
  }

  .behind .media::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background: rgb(var(--rgb-dark),.5);
  }
  
  
  .behind .media img {
    filter: var(--filter-blur);
  }

  .behind .text {
    color: var(--color-light);
    z-index: 2;
  }

  /* beside */

  /* beside-center*/

  /* inside */

}