deleted file mode 100644

@@ -1,348 +0,0 @@

-@if not-imported("import_once_func") { @import "import_once_func"; }

-@if not-imported("framework") { @import "framework"; }

-

-/*

- ------ HEADER ------

-*/

-$header-height-desktop: 50px;

-$header-height-mobile: 50px;

-#header {

-  height: $header-height-desktop;

-  position: fixed;

-  left: 0;

-  right: 0;

-  top: 0;

-  z-index: 10;

-  @include transition(all 0.25s);

-

-  > .inside {

-    @include centered-1200;

-    position: relative;

-    z-index: 1;

-  }

-

-  + #container {

-    padding-top: $header-height-desktop + 20px;

-    height: 100vh;

-  }

-

-  body:not(.-mobile-menu-active) .hide& {

-    @include transform(translate(0,-100%));

-  }

-  .scrolled& {

-    background-color: $color-bg-secondary;

-  }

-}

-

-#main-nav {

-  position: absolute;

-  right: 0;

-  top: 0;

-  &,

-  .level_1 {

-    height: $header-height-desktop;

-  }

-  .level_1 {

-    display: flex;

-    align-items: center;

-

-    > li {

-      flex: 1 0 0;

-      padding: 0 60px 0 0;

-

-      &:last-child {

-        padding-right: 0;

-      }

-

-      > {

-        span,

-        strong,

-        a {

-          font-size: font-size(18px);

-          font-weight: 300;

-          color: $color-nav;

-          line-height: 1.5;

-          position: relative;

-

-          &:before {

-            position: absolute;

-            left: 50%;

-            right: 50%;

-            top: 100%;

-            content: '';

-            height: 2px;

-            background-color: $color-bg-secondary;

-            opacity: 0;

-            visibility: hidden;

-            @include transition(all 0.25s cubic-bezier(0,0,0,1));

-          }

-

-          &.trail,

-          &.active {

-            &:before {

-              left: 0;

-              right: 0;

-              opacity: 1;

-              visibility: visible;

-            }

-          }

-

-          .scrolled & {

-            color: $color-nav-invert;

-

-            &:before {

-              background-color: $color-bg-tertiary;

-            }

-          }

-        }

-        a {

-          &:hover {

-            &:before {

-              left: 0;

-              right: 0;

-              opacity: 1;

-              visibility: visible;

-            }

-          }

-        }

-      }

-    }

-  }

-}

-

-#nav-bar {

-

-  .bar-logo {

-    opacity: 0;

-    visibility: hidden;

-    position: absolute;

-    left: 0;

-    top: 5px;

-    @include transition(all 0.25s);

-    z-index: 1;

-

-    .scrolled &,

-    .-mobile-menu-active & {

-      opacity: 1;

-      visibility: visible;

-    }

-    .-mobile-menu-active & {

-      top: 45px;

-      left: 50%;

-      @include transform(translate(-50%,-50%));

-    }

-  }

-

-  .close {

-    display: none;

-  }

-

-  @include for-tablet {

-    .nav {

-      position: fixed;

-      top: 0;

-      left: 0;

-      width: 100%;

-      height: 100%;

-      background: rgba(#000, 30%);

-      opacity: 0;

-      visibility: hidden;

-      @include transition(all 0.5s cubic-bezier(0.25, 1, 0.5, 1));

-

-      .panel {

-        position: absolute;

-        top: 50%;

-        left: 50%;

-        background: rgba($color-bg-secondary, 95%);

-        padding: 50px;

-        @include box-sizing(border-box);

-        @include transform(translate(-50%, -50%));

-        max-width: 1200px;

-        width: 80%;

-        max-height: 90%;

-        overflow-y: auto;

-        font-size: font-size(20px);

-

-        @include for-mobile {

-          width: 100%;

-          height: 100%;

-          max-height: none;

-          padding: 90px 55px 30px 55px;

-          font-size: font-size(18px);

-        }

-

-        .close {

-          cursor: pointer;

-          position: absolute;

-          right: 20px;

-          top: 5px;

-          line-height: 1;

-          width: 40px;

-          height: 40px;

-          @include box-sizing(border-box);

-          z-index: -1;

-          text-align: center;

-          display: flex;

-          align-items: center;

-          justify-content: center;

-          font-size: 40px;

-          background: url('data:image/svg+xml;utf8,%3Csvg width="100%" height="100%" viewBox="0 0 30 30" version="1.1" stroke="%23ffffff" stroke-width="2px" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="fill-rule:evenodd;clip-rule:evenodd;"%3E%3Cpath d="M25,5L5,25"/%3E%3Cpath d="M25,25L5,5"/%3E%3C/svg%3E') no-repeat;

-

-          span {

-            visibility: hidden;

-          }

-        }

-      }

-    }

-  }

-}

-

-#hamburger {

-  z-index: 1;

-  display: none;

-  position: absolute;

-  top: 0;

-  right: 0;

-  -webkit-transform: translate3d(0, 0, 0);

-  -moz-transform: translate3d(0, 0, 0);

-  -ms-transform: translate3d(0, 0, 0);

-  -o-transform: translate3d(0, 0, 0);

-  transform: translate3d(0, 0, 0);

-  cursor: pointer;

-

-  @include for-mobile {

-    z-index: 0;

-  }

-

-  //display: block;

-  width: 50px;

-  height: 50px;

-  //position: relative;

-

-

-  .line {

-    position: absolute;

-    left: 5px;

-    height: 2px;

-    width: 40px;

-    background: $color-text-invert;

-    display: block;

-    transition: 0.5s;

-    transform-origin: center;

-    //@include box-shadow(1px 1px 2px rgba(0,0,0,0.7));

-

-    &:nth-child(1) { top: 14px; }

-    &:nth-child(2) { top: 24px; }

-    &:nth-child(3) { top: 34px; }

-  }

-  .-mobile-menu-active & {

-    .line {

-      //@include box-shadow(1px 1px 2px rgba(0,0,0,0));

-      &:nth-child(1){

-        transform: translateY(10px) rotate(-45deg);

-      }

-      &:nth-child(2){

-        opacity:0;

-      }

-      &:nth-child(3){

-        transform: translateY(-10px) rotate(45deg);

-      }

-    }

-    ~ .nav {

-      //display: block;

-      opacity: 1;

-      visibility: visible;

-    }

-  }

-}

-.-mobile-menu-active {

-  #header {

-    position: fixed !important;

-    left: 0;

-    right: 0;

-    top: 0;

-  }

-  /*#main-nav {

-    display: block;

-  }*/

-}

-

-@include for-tablet {

-  #main-nav {

-    position: relative;

-    height: auto;

-    > .level_1 {

-      display: block;

-      padding: 0 15px;

-      overflow-y: auto;

-      /*position: absolute;

-      top: 150px;

-      bottom: 0;

-      left: 0;

-      right: 0;*/

-      height: auto;

-

-

-      > li {

-        flex: none;

-        padding: 0;

-        text-align: center;

-

-        > a,

-        > span,

-        > strong {

-          color: $color-text-invert;

-          line-height: 2.25;

-          font-size: font-size(25px);

-

-          &.active,

-          &.trail {

-            &:before {

-              visibility: visible;

-              opacity: 1;

-              right: 35%;

-              left: 35%;

-            }

-          }

-        }

-

-        &.submenu {

-          ul {

-            position: relative;

-            display: block;

-            overflow: hidden;

-            height: 0;

-            padding: 0;

-          }

-

-          .-mobile-menu-active & {

-            &.trail,

-            &:hover {

-              ul {

-                visibility: visible;

-                opacity: 1;

-                padding: 15px;

-                height: auto;

-              }

-            }

-

-            &:hover,

-            &:focus-within {

-              ul {

-                visibility: visible;

-                opacity: 1;

-                padding: 15px;

-                height: auto;

-              }

-            }

-          }

-        }

-      }

-    }

-  }

-

-  #hamburger {

-    display: block;

-  }

-}

-

new file mode 100644

@@ -0,0 +1,348 @@

+@if not-imported("import_once_func") { @import "import_once_func"; }

+@if not-imported("framework") { @import "framework"; }

+

+/*

+ ------ HEADER ------

+*/

+$header-height-desktop: 50px;

+$header-height-mobile: 50px;

+#header {

+  height: $header-height-desktop;

+  position: fixed;

+  left: 0;

+  right: 0;

+  top: 0;

+  z-index: 10;

+  @include transition(all 0.25s);

+

+  > .inside {

+    @include centered-1200;

+    position: relative;

+    z-index: 1;

+  }

+

+  + #container {

+    padding-top: $header-height-desktop + 20px;

+    height: 100vh;

+  }

+

+  body:not(.-mobile-menu-active) .hide& {

+    @include transform(translate(0,-100%));

+  }

+  .scrolled& {

+    background-color: $color-bg-secondary;

+  }

+}

+

+#main-nav {

+  position: absolute;

+  right: 0;

+  top: 0;

+  &,

+  .level_1 {

+    height: $header-height-desktop;

+  }

+  .level_1 {

+    display: flex;

+    align-items: center;

+

+    > li {

+      flex: 1 0 0;

+      padding: 0 60px 0 0;

+

+      &:last-child {

+        padding-right: 0;

+      }

+

+      > {

+        span,

+        strong,

+        a {

+          font-size: font-size(18px);

+          font-weight: 300;

+          color: $color-nav;

+          line-height: 1.5;

+          position: relative;

+

+          &:before {

+            position: absolute;

+            left: 50%;

+            right: 50%;

+            top: 100%;

+            content: '';

+            height: 2px;

+            background-color: $color-bg-secondary;

+            opacity: 0;

+            visibility: hidden;

+            @include transition(all 0.25s cubic-bezier(0,0,0,1));

+          }

+

+          &.trail,

+          &.active {

+            &:before {

+              left: 0;

+              right: 0;

+              opacity: 1;

+              visibility: visible;

+            }

+          }

+

+          .scrolled & {

+            color: $color-nav-invert;

+

+            &:before {

+              background-color: $color-bg-tertiary;

+            }

+          }

+        }

+        a {

+          &:hover {

+            &:before {

+              left: 0;

+              right: 0;

+              opacity: 1;

+              visibility: visible;

+            }

+          }

+        }

+      }

+    }

+  }

+}

+

+#nav-bar {

+

+  .bar-logo {

+    opacity: 0;

+    visibility: hidden;

+    position: absolute;

+    left: 0;

+    top: 5px;

+    @include transition(all 0.25s);

+    z-index: 1;

+

+    .scrolled &,

+    .-mobile-menu-active & {

+      opacity: 1;

+      visibility: visible;

+    }

+    .-mobile-menu-active & {

+      top: 45px;

+      left: 50%;

+      @include transform(translate(-50%,-50%));

+    }

+  }

+

+  .close {

+    display: none;

+  }

+

+  @include for-tablet {

+    .nav {

+      position: fixed;

+      top: 0;

+      left: 0;

+      width: 100%;

+      height: 100%;

+      background: rgba(#000, 30%);

+      opacity: 0;

+      visibility: hidden;

+      @include transition(all 0.5s cubic-bezier(0.25, 1, 0.5, 1));

+

+      .panel {

+        position: absolute;

+        top: 50%;

+        left: 50%;

+        background: rgba($color-bg-secondary, 95%);

+        padding: 50px;

+        @include box-sizing(border-box);

+        @include transform(translate(-50%, -50%));

+        max-width: 1200px;

+        width: 80%;

+        max-height: 90%;

+        overflow-y: auto;

+        font-size: font-size(20px);

+

+        @include for-mobile {

+          width: 100%;

+          height: 100%;

+          max-height: none;

+          padding: 90px 55px 30px 55px;

+          font-size: font-size(18px);

+        }

+

+        .close {

+          cursor: pointer;

+          position: absolute;

+          right: 20px;

+          top: 5px;

+          line-height: 1;

+          width: 40px;

+          height: 40px;

+          @include box-sizing(border-box);

+          z-index: -1;

+          text-align: center;

+          display: flex;

+          align-items: center;

+          justify-content: center;

+          font-size: 40px;

+          background: url('data:image/svg+xml;utf8,%3Csvg width="100%" height="100%" viewBox="0 0 30 30" version="1.1" stroke="%23ffffff" stroke-width="2px" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="fill-rule:evenodd;clip-rule:evenodd;"%3E%3Cpath d="M25,5L5,25"/%3E%3Cpath d="M25,25L5,5"/%3E%3C/svg%3E') no-repeat;

+

+          span {

+            visibility: hidden;

+          }

+        }

+      }

+    }

+  }

+}

+

+#hamburger {

+  z-index: 1;

+  display: none;

+  position: absolute;

+  top: 0;

+  right: 0;

+  -webkit-transform: translate3d(0, 0, 0);

+  -moz-transform: translate3d(0, 0, 0);

+  -ms-transform: translate3d(0, 0, 0);

+  -o-transform: translate3d(0, 0, 0);

+  transform: translate3d(0, 0, 0);

+  cursor: pointer;

+

+  @include for-mobile {

+    z-index: 0;

+  }

+

+  //display: block;

+  width: 50px;

+  height: 50px;

+  //position: relative;

+

+

+  .line {

+    position: absolute;

+    left: 5px;

+    height: 2px;

+    width: 40px;

+    background: $color-text-invert;

+    display: block;

+    transition: 0.5s;

+    transform-origin: center;

+    //@include box-shadow(1px 1px 2px rgba(0,0,0,0.7));

+

+    &:nth-child(1) { top: 14px; }

+    &:nth-child(2) { top: 24px; }

+    &:nth-child(3) { top: 34px; }

+  }

+  .-mobile-menu-active & {

+    .line {

+      //@include box-shadow(1px 1px 2px rgba(0,0,0,0));

+      &:nth-child(1){

+        transform: translateY(10px) rotate(-45deg);

+      }

+      &:nth-child(2){

+        opacity:0;

+      }

+      &:nth-child(3){

+        transform: translateY(-10px) rotate(45deg);

+      }

+    }

+    ~ .nav {

+      //display: block;

+      opacity: 1;

+      visibility: visible;

+    }

+  }

+}

+.-mobile-menu-active {

+  #header {

+    position: fixed !important;

+    left: 0;

+    right: 0;

+    top: 0;

+  }

+  /*#main-nav {

+    display: block;

+  }*/

+}

+

+@include for-tablet {

+  #main-nav {

+    position: relative;

+    height: auto;

+    > .level_1 {

+      display: block;

+      padding: 0 15px;

+      overflow-y: auto;

+      /*position: absolute;

+      top: 150px;

+      bottom: 0;

+      left: 0;

+      right: 0;*/

+      height: auto;

+

+

+      > li {

+        flex: none;

+        padding: 0;

+        text-align: center;

+

+        > a,

+        > span,

+        > strong {

+          color: $color-text-invert;

+          line-height: 2.25;

+          font-size: font-size(25px);

+

+          &.active,

+          &.trail {

+            &:before {

+              visibility: visible;

+              opacity: 1;

+              right: 35%;

+              left: 35%;

+            }

+          }

+        }

+

+        &.submenu {

+          ul {

+            position: relative;

+            display: block;

+            overflow: hidden;

+            height: 0;

+            padding: 0;

+          }

+

+          .-mobile-menu-active & {

+            &.trail,

+            &:hover {

+              ul {

+                visibility: visible;

+                opacity: 1;

+                padding: 15px;

+                height: auto;

+              }

+            }

+

+            &:hover,

+            &:focus-within {

+              ul {

+                visibility: visible;

+                opacity: 1;

+                padding: 15px;

+                height: auto;

+              }

+            }

+          }

+        }

+      }

+    }

+  }

+

+  #hamburger {

+    display: block;

+  }

+}

+