html, body{
  width:100%;
  height:100%;
  font-size:16px;
}

/* HEADER */
header{
  background-color:rgb(240,240,240);
  border-bottom:5px solid rgb(60,60,60);
  width:100%;
  min-height:5em;
  position:fixed;
  top:0;
  z-index:10;
}

  header .inside{
    width:100%;
    max-width:1600px;
    height:5em;
    margin:0 auto;
    padding:1em 2em;
    display:flex;
    align-items:center;
  }

  /* HEADER FIGURE > LOGO */
  header figure.logoframe{
    display:inline-block;
    max-width:20em;
    width:100%;
    margin:0;
    padding:0 1em 0 0;
    border-right:1px solid rgb(200,200,200);
  }

    header figure.logoframe a{
      display:block;
    }

    header #mobile-menu{
      display:none;
    }

    header nav{
      width:100%;
      height:100%;
      overflow:visible;
    }

      header nav ul{
        display:flex;
        flex-wrap:wrap;
        justify-content: flex-end;
        align-items:center;
        width:100%;
        height:100%;
        margin:0;
        padding:0;
        overflow:visible;
      }

        header nav ul li{
          position:relative;
          height:100%;
          margin:0 0.5em;
          list-style-type: none;
          display:flex;
          align-items:center;
        }

          header nav ul li .link-wrapper{
            width:100%;
            display:flex;
            justify-content:space-between;
            align-items:center;
          }

          header  nav ul li.submenu .link-wrapper{
            padding-right:0.5em;
          }

              header nav ul li a{
                display:flex;
                align-items:center;
                height:100%;
                white-space:nowrap;
                padding:1em 0.5em;
              }

              header nav ul li a:hover,
              header nav ul li a:focus{
                text-decoration:none;
              }

              header nav ul li a:active,
              header nav ul li a.active{
                text-decoration:underline;
              }

              header nav ul li a.active:hover{
                cursor:default;
              }

              header nav ul li button{
                background-color:transparent;
                border:none;
                width:1em;
                height:1em;
                padding:0;
                position:relative;
              }

              header nav ul li.submenu button::before,
              header nav ul li.submenu button::after{
                display:block;
                content:"";
                width:0.5em;
                height:0.125em;
                background-color:rgb(200,200,200);
                position:absolute;
                top:50%;
                bottom:50%;
                transition:background-color ease-in-out .25s;
              }

              header nav ul li.submenu button::before{
                left:0.1em;
                transform:rotate(45deg);
              }

              header nav ul li.submenu button::after{
                right:0.1em;
                transform:rotate(-45deg);
              }

              header nav ul li.submenu:hover button::before,
              header nav ul li.submenu:hover button::after{
                background-color:rgb(60,60,60);
              }

      /* LV 2 NAVIGATION */
      header nav ul li ul.level_2{
        background-color:rgb(240,240,240);
        border-bottom:5px solid rgb(60,60,60);
        width:max-content;
        height:auto;
        justify-content:inherit;
        display:block;
        position:absolute;
        top:2.5em;
        left:0;
        opacity:0;
        transition:all ease-in-out .2s;
      }

      header nav ul li.last ul.level_2{
        right:0;
      }

      header nav ul li.submenu:hover > ul.level_2{
        top:3em;
        opacity:1;
      }

        header nav ul li.submenu ul.level_2 li{
          width:100%;
          margin:0;
        }

          header nav ul li.submenu ul.level_2 li a{
            width:100%;
            padding:0.5em 1em;
          }

          header nav ul li.submenu ul.level_2 li a{

          }

  @media (max-width: 832px) {

    header .inside{
      justify-content:space-between;
    }

    header #mobile-menu{
      display:block;
      background-color:transparent;
      border:none;
      margin-left:1em;
      padding:1.5em;
      position:relative;
      z-index:100;
    }

      header #mobile-menu div{
        width:2em;
        height:0.25em;
        background-color:rgb(60,60,60);
        border-radius:0.1em;
        position:absolute;
      }

        header #mobile-menu div:nth-child(1){
          top:0.75em;
          left:0.5em;
          opacity:1;
          transition:all ease-in-out .5s;
        }

        header #mobile-menu div:nth-child(2){
          top:1.4em;
          left:0.5em;
          transition:all ease-in-out .5s;
        }

          header #mobile-menu div:nth-child(2)::before,
          header #mobile-menu div:nth-child(2)::after{
            display:block;
            content:"";
            width:100%;
            height:100%;
            background-color:rgb(60,60,60);
            position:absolute;
            transition:all ease-in-out .5s;
          }

        header #mobile-menu div:nth-child(3){
          bottom:0.75em;
          left:0.5em;
          opacity:1;
          transition:all ease-in-out .5s;
        }

        header #mobile-menu.toggled-menu div:nth-child(odd){
          opacity:0;
        }

        header #mobile-menu.toggled-menu div:nth-child(2){
          background-color:rgba(60,60,60,0);
        }

        header #mobile-menu.toggled-menu div:nth-child(2)::before{
          transform:rotate(45deg);
        }

        header #mobile-menu.toggled-menu div:nth-child(2)::after{
          transform:rotate(-45deg);
        }

    header nav{
      background-color:rgb(255,255,255);
      display:flex;
      justify-content:center;
      align-items:center;
      position:fixed;
      top:0;
      right:0;
      width:0;
      height:0;
      padding:0;
      opacity:0;
      z-index:20;
      transition:all ease-in-out .5s;
    }

    header nav.block{
      overflow:hidden !important;
    }

    header nav.mobile{
      width:100%;
      height:100%;
      padding:1em;
      opacity:1;
    }

      header nav ul{
        display:block;
        width:auto;
        height:auto;
      }

        header nav ul li{
          display:flex;
          align-items:baseline;
          height:auto;
          margin:0;
        }

        header nav ul li.submenu button{
          width:2em;
          height:2em;
          margin-top:0.5em;
          align-self:center;
        }

        header nav ul li.submenu button::before,
        header nav ul li.submenu button::after{
          width:1em;
          height:0.25em;
          left:0.5em;
          transition:all ease-in-out .25s;
        }

        header nav ul li.submenu button::before{
          top:0.6em;
          bottom:inherit;
        }

        header nav ul li.submenu button::after{
          bottom:0.6em;
          top:inherit;
        }

        header nav ul li.submenu button.dropped::before{
          top:1.15em;
        }

        header nav ul li.submenu button.dropped::after{
          bottom:1.15em;
        }

          header nav ul li.submenu a{
            min-width:4.5em;
            margin-right:0.5em;
            margin-bottom:0;
          }

          header nav ul li a,
          header nav ul li.submenu a{
            font-size:2em;
            padding:0;
          }

      /* LV 2 NAVIGATION */
      header nav ul li ul.level_2{
        background-color:transparent;
        border:0;
        width:0;
        height:0;
        position:initial;
        overflow:hidden;
        transition:all ease-in-out .5s;
      }

      header nav ul li.toggle-sub ul.level_2{
        display:block;
        width:100%;
        height:100%;
        opacity:1;
      }

        header nav ul li.submenu ul.level_2 li{

        }

          header nav ul li.submenu ul.level_2 li a{
            width:max-content;
            padding:0;
          }

  }

  /* MAIN */
  main{
    padding-top:6em;
    width:100%;
    height:100%;
    min-height:100vh;
  }

    /* ----- BUTTON STYLES ----- */


      /*
      #button__area a{
        display:flex;
        justify-content:center;
        align-items:center;
        position:relative;
        width:100%;
        height:20em;
      }

        #button__area a span{
          font-size:2em;
          background-color:rgba(60,60,60,0);
          display:flex;
          justify-content:center;
          align-items:center;
          position:absolute;
          top:0;
          right:0;
          bottom:0;
          left:0;
          width:100%;
          height:100%;
          opacity:0;
          transition:all ease .25s;
        }

        #button__area a:hover > span{
          font-size:2.25em;
          color:rgb(255,255,255);
          background-color:rgba(60,60,60,0.5);
          opacity:1;
        }

        #button__area a img{
          width:100%;
          height:100%;
          object-fit:cover;
        }
        */


    /* ----- SNAP BOXEN ----- */
    .snap main .inside{
      width:100%;
      height:100vh;
      overflow-y:scroll;
      scroll-snap-type:y mandatory;
    }

      .snap main .inside .mod_article{
        width:100%;
        min-height:100vh;
        background-color:rgb(250,250,250);
        display:flex;
        justify-content:center;
        align-items:center;
        margin:0 0 5px 0;
        scroll-snap-align:center;
      }

      .snap main .inside .mod_article:nth-child(even){
        background-color:rgb(180,180,180);
      }

      .snap h1, h2{
        text-align:center;
      }