diff --git a/assets/icons.svg b/assets/icons.svg new file mode 100644 index 0000000..7a6ae5a --- /dev/null +++ b/assets/icons.svg @@ -0,0 +1,972 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/apple-touch-icon.png b/assets/images/apple-touch-icon.png new file mode 100644 index 0000000..696a286 Binary files /dev/null and b/assets/images/apple-touch-icon.png differ diff --git a/assets/images/favicon.png b/assets/images/favicon.png new file mode 100644 index 0000000..27ad55e Binary files /dev/null and b/assets/images/favicon.png differ diff --git a/assets/images/image01.png b/assets/images/image01.png new file mode 100644 index 0000000..b5ca2db Binary files /dev/null and b/assets/images/image01.png differ diff --git a/assets/images/image02.jpg b/assets/images/image02.jpg new file mode 100644 index 0000000..4c6715e Binary files /dev/null and b/assets/images/image02.jpg differ diff --git a/assets/images/image03.jpg b/assets/images/image03.jpg new file mode 100644 index 0000000..4c6715e Binary files /dev/null and b/assets/images/image03.jpg differ diff --git a/assets/images/image04.png b/assets/images/image04.png new file mode 100644 index 0000000..b5ca2db Binary files /dev/null and b/assets/images/image04.png differ diff --git a/assets/images/share.jpg b/assets/images/share.jpg new file mode 100644 index 0000000..234539b Binary files /dev/null and b/assets/images/share.jpg differ diff --git a/assets/main.css b/assets/main.css new file mode 100644 index 0000000..e4b3132 --- /dev/null +++ b/assets/main.css @@ -0,0 +1,2152 @@ +html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}body{-webkit-text-size-adjust:none}mark{background-color:transparent;color:inherit}input::-moz-focus-inner{border:0;padding:0}input[type="text"],input[type="email"],select,textarea{-moz-appearance:none;-webkit-appearance:none;-ms-appearance:none;appearance:none} + +*, *:before, *:after { + box-sizing: border-box; +} + +body { + line-height: 1.0; + min-height: var(--viewport-height); + min-width: 320px; + overflow-x: hidden; + word-wrap: break-word; + background-color: #FFFFFF; +} + +:root { + --background-height: 100vh; + --site-language-alignment: left; + --site-language-direction: ltr; + --site-language-flex-alignment: flex-start; + --site-language-indent-left: 1; + --site-language-indent-right: 0; + --site-language-margin-left: 0; + --site-language-margin-right: auto; + --viewport-height: 100vh; +} + +html { + font-size: 16pt; +} + +u { + text-decoration: underline; +} + +strong { + color: inherit; + font-weight: bolder; +} + +em { + font-style: italic; +} + +code { + background-color: rgba(144,144,144,0.25); + border-radius: 0.25em; + font-family: 'Lucida Console', 'Courier New', monospace; + font-size: 0.9em; + font-weight: normal; + letter-spacing: 0; + margin: 0 0.25em; + padding: 0.25em 0.5em; + text-indent: 0; +} + +mark { + background-color: rgba(144,144,144,0.25); +} + +spoiler-text { + -webkit-text-stroke: 0; + background-color: rgba(32,32,32,0.75); + text-shadow: none; + text-stroke: 0; + color: transparent; + cursor: pointer; + transition: color 0.1s ease-in-out; +} + +spoiler-text.active { + color: #FFFFFF; + cursor: text; +} + +s { + text-decoration: line-through; +} + +sub { + font-size: smaller; + vertical-align: sub; +} + +sup { + font-size: smaller; + vertical-align: super; +} + +a { + color: inherit; + text-decoration: underline; + transition: color 0.25s ease; +} + +a[onclick]:not([href]) { + cursor: pointer; +} + +deferred-script { + display: none; +} + +#wrapper { + -webkit-overflow-scrolling: touch; + align-items: flex-start; + display: flex; + flex-direction: column; + justify-content: flex-start; + min-height: var(--viewport-height); + overflow: hidden; + position: relative; + z-index: 2; +} + +#main { + --alignment: var(--site-language-alignment); + --flex-alignment: var(--site-language-flex-alignment); + --indent-left: var(--site-language-indent-left); + --indent-right: var(--site-language-indent-right); + --margin-left: var(--site-language-margin-left); + --margin-right: var(--site-language-margin-right); + --border-radius-tl: 0; + --border-radius-tr: 0; + --border-radius-br: 0; + --border-radius-bl: 0; + align-items: center; + display: flex; + flex-grow: 0; + flex-shrink: 0; + justify-content: center; + max-width: 100%; + position: relative; + text-align: var(--alignment); + z-index: 1; + transition: opacity 1s ease-in-out 0s; +} + +#main > .inner { + --padding-horizontal: 6rem; + --padding-vertical: 4rem; + --spacing: 1.5rem; + --width: 100vw; + border-radius: var(--border-radius-tl) var(--border-radius-tr) var(--border-radius-br) var(--border-radius-bl); + max-width: 100%; + position: relative; + width: var(--width); + z-index: 1; + padding: var(--padding-vertical) var(--padding-horizontal); +} + +#main > .inner > header { + margin-bottom: var(--spacing); +} + +#main > .inner > footer { + margin-top: var(--spacing); +} + +#main > .inner > * > * { + margin-top: var(--spacing); + margin-bottom: var(--spacing); +} + +#main > .inner > * > :first-child { + margin-top: 0 !important; +} + +#main > .inner > * > :last-child { + margin-bottom: 0 !important; +} + +#main > .inner > .full { + margin-left: calc(var(--padding-horizontal) * -1); + max-width: calc(100% + calc(var(--padding-horizontal) * 2) + 0.4725px); + width: calc(100% + calc(var(--padding-horizontal) * 2) + 0.4725px); +} + +#main > .inner > .full:first-child { + border-top-left-radius: inherit; + border-top-right-radius: inherit; + margin-top: calc(var(--padding-vertical) * -1) !important; +} + +#main > .inner > .full:last-child { + border-bottom-left-radius: inherit; + border-bottom-right-radius: inherit; + margin-bottom: calc(var(--padding-vertical) * -1) !important; +} + +#main > .inner > .full.screen { + border-radius: 0 !important; + max-width: 100vw; + position: relative; + width: 100vw; + left: 0; + margin-left: calc(var(--padding-horizontal) * -1); + right: auto; +} + +#main > .inner > * > .full { + margin-left: calc(-6rem); + max-width: calc(100% + 12rem + 0.4725px); + width: calc(100% + 12rem + 0.4725px); +} + +#main > .inner > * > .full.screen { + border-radius: 0 !important; + max-width: 100vw; + position: relative; + width: 100vw; + left: 0; + margin-left: calc(-6rem); + right: auto; +} + +#main > .inner > .active > .full:first-child { + margin-top: -4rem !important; + border-top-left-radius: inherit; + border-top-right-radius: inherit; +} + +#main > .inner > .active { + border-top-left-radius: inherit; + border-top-right-radius: inherit; + border-bottom-left-radius: inherit; + border-bottom-right-radius: inherit; +} + +#main > .inner > .active > .full:last-child { + border-bottom-left-radius: inherit; + border-bottom-right-radius: inherit; + margin-bottom: -4rem !important; +} + +body.is-loading #main { + opacity: 0; +} + +body #wrapper:after { + background-position: center; + background-repeat: no-repeat; + background-size: contain; + content: ''; + display: block; + height: 3.75rem; + left: calc(50% - 1.875rem); + opacity: 0; + pointer-events: none; + position: fixed; + top: calc(50% - 1.875rem); + transition: opacity 1s ease, visibility 1s; + visibility: hidden; + width: 3.75rem; + z-index: 100000; +} + +body.is-loading { + pointer-events: none; +} + +body.is-loading.with-loader #wrapper:after { + background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iOTZweCIgaGVpZ2h0PSI5NnB4IiB2aWV3Qm94PSIwIDAgOTYgOTYiIHpvb21BbmRQYW49ImRpc2FibGUiPjxzdHlsZT5jaXJjbGUgeyBmaWxsOiB0cmFuc3BhcmVudDsgc3Ryb2tlOiAjRTNFM0UzOyBzdHJva2Utd2lkdGg6IDJweDsgfTwvc3R5bGU+PGRlZnM+PGNsaXBQYXRoIGlkPSJjb3JuZXIiPjxwb2x5Z29uIHBvaW50cz0iMCwwIDQ4LDAgNDgsNDggOTYsNDggOTYsOTYgMCw5NiIgLz48L2NsaXBQYXRoPjwvZGVmcz48ZyBjbGlwLXBhdGg9InVybCgjY29ybmVyKSI+PGNpcmNsZSBjeD0iNDgiIGN5PSI0OCIgcj0iMzIiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGF0dHJpYnV0ZVR5cGU9IlhNTCIgdHlwZT0icm90YXRlIiBmcm9tPSIwIDQ4IDQ4IiB0bz0iMzYwIDQ4IDQ4IiBkdXI9IjFzIiByZXBlYXREdXI9ImluZGVmaW5pdGUiIC8+PC9nPjwvc3ZnPg=='); + opacity: 1; + transform: scale(1.0); + visibility: visible; +} + +body.is-playing.with-loader #wrapper:after { + opacity: 0; + transform: scale(0.5); + transition: opacity 0.25s ease, transform 0.75s ease, visibility 0.25s; + visibility: hidden; +} + +body.is-instant #main, body.is-instant #main > .inner > *,body.is-instant #main > .inner > section > * { + transition: none !important; +} + +body.is-instant:after { + display: none !important; + transition: none !important; +} + +h1, h2, h3, p { + direction: var(--site-language-direction); + position: relative; +} + +h1 span.p, h2 span.p, h3 span.p, p span.p { + display: block; + position: relative; +} + +h1 span[style], h2 span[style], h3 span[style], p span[style], h1 strong, h2 strong, h3 strong, p strong, h1 a, h2 a, h3 a, p a, h1 code, h2 code, h3 code, p code, h1 mark, h2 mark, h3 mark, p mark, h1 spoiler-text, h2 spoiler-text, h3 spoiler-text, p spoiler-text { + -webkit-text-fill-color: currentcolor; +} + +h1.style1, h2.style1, h3.style1, p.style1 { + color: #000000; + font-family: 'Inter', sans-serif; + font-size: 2em; + line-height: 1.25; + font-weight: 700; +} + +h1.style1 a, h2.style1 a, h3.style1 a, p.style1 a { + text-decoration: underline; +} + +h1.style1 a:hover, h2.style1 a:hover, h3.style1 a:hover, p.style1 a:hover { + text-decoration: none; +} + +h1.style1 span.p:nth-child(n + 2), h2.style1 span.p:nth-child(n + 2), h3.style1 span.p:nth-child(n + 2), p.style1 span.p:nth-child(n + 2) { + margin-top: 1rem; +} + +h1.style1 > *, h2.style1 > *, h3.style1 > *, p.style1 > * { + display: inline-block; + line-height: 1.2; +} + +h1.style2, h2.style2, h3.style2, p.style2 { + color: #000000; + font-family: 'Inter', sans-serif; + letter-spacing: -0.075rem; + width: 100%; + font-size: 2em; + line-height: 1.25; + font-weight: 700; +} + +h1.style2 a, h2.style2 a, h3.style2 a, p.style2 a { + text-decoration: underline; +} + +h1.style2 a:hover, h2.style2 a:hover, h3.style2 a:hover, p.style2 a:hover { + text-decoration: none; +} + +h1.style2 span.p:nth-child(n + 2), h2.style2 span.p:nth-child(n + 2), h3.style2 span.p:nth-child(n + 2), p.style2 span.p:nth-child(n + 2) { + margin-top: 1rem; +} + +h1.style3, h2.style3, h3.style3, p.style3 { + color: #000000; + font-family: 'Inter', sans-serif; + letter-spacing: 0.025rem; + width: calc(100% + 0.025rem); + font-size: 1em; + line-height: 1.625; + font-weight: 400; +} + +h1.style3 a, h2.style3 a, h3.style3 a, p.style3 a { + text-decoration: underline; +} + +h1.style3 a:hover, h2.style3 a:hover, h3.style3 a:hover, p.style3 a:hover { + text-decoration: none; +} + +h1.style3 span.p:nth-child(n + 2), h2.style3 span.p:nth-child(n + 2), h3.style3 span.p:nth-child(n + 2), p.style3 span.p:nth-child(n + 2) { + margin-top: 1rem; +} + +h1.style6, h2.style6, h3.style6, p.style6 { + text-align: center; + text-transform: uppercase; + color: #000000; + font-family: 'Inter', sans-serif; + letter-spacing: 0.2rem; + width: calc(100% + 0.2rem); + font-size: 1em; + line-height: 1.25; + font-weight: 700; +} + +h1.style6 a, h2.style6 a, h3.style6 a, p.style6 a { + text-decoration: underline; +} + +h1.style6 a:hover, h2.style6 a:hover, h3.style6 a:hover, p.style6 a:hover { + text-decoration: none; +} + +h1.style6 span.p:nth-child(n + 2), h2.style6 span.p:nth-child(n + 2), h3.style6 span.p:nth-child(n + 2), p.style6 span.p:nth-child(n + 2) { + margin-top: 1rem; +} + +h1.style6 > *, h2.style6 > *, h3.style6 > *, p.style6 > * { + display: inline-block; + line-height: 1.2; +} + +h1.style7:not(:first-child), h2.style7:not(:first-child), h3.style7:not(:first-child), p.style7:not(:first-child) { + margin-top: 2rem !important; +} + +h1.style7:not(:last-child), h2.style7:not(:last-child), h3.style7:not(:last-child), p.style7:not(:last-child) { + margin-bottom: 2rem !important; +} + +h1.style7, h2.style7, h3.style7, p.style7 { + text-align: center; + color: #000000; + font-family: 'Inter', sans-serif; + font-size: 2em; + line-height: 1.25; + font-weight: 700; +} + +h1.style7 a, h2.style7 a, h3.style7 a, p.style7 a { + text-decoration: underline; +} + +h1.style7 a:hover, h2.style7 a:hover, h3.style7 a:hover, p.style7 a:hover { + text-decoration: none; +} + +h1.style7 span.p:nth-child(n + 2), h2.style7 span.p:nth-child(n + 2), h3.style7 span.p:nth-child(n + 2), p.style7 span.p:nth-child(n + 2) { + margin-top: 1rem; +} + +h1.style7 > *, h2.style7 > *, h3.style7 > *, p.style7 > * { + display: inline-block; + line-height: 1.2; +} + +h1.style8, h2.style8, h3.style8, p.style8 { + text-align: center; + color: #000000; + font-family: 'Inter', sans-serif; + font-size: 1.5em; + line-height: 1.25; + font-weight: 700; +} + +h1.style8 a, h2.style8 a, h3.style8 a, p.style8 a { + text-decoration: underline; +} + +h1.style8 a:hover, h2.style8 a:hover, h3.style8 a:hover, p.style8 a:hover { + text-decoration: none; +} + +h1.style8 span.p:nth-child(n + 2), h2.style8 span.p:nth-child(n + 2), h3.style8 span.p:nth-child(n + 2), p.style8 span.p:nth-child(n + 2) { + margin-top: 1rem; +} + +h1.style8 > *, h2.style8 > *, h3.style8 > *, p.style8 > * { + display: inline-block; + line-height: 1.2; +} + +.image { + display: block; + line-height: 0; + max-width: 100%; + position: relative; +} + +.image .frame { + -webkit-backface-visibility: hidden; + -webkit-transform: translate3d(0, 0, 0); + display: inline-block; + max-width: 100%; + overflow: hidden; + vertical-align: top; + width: 100%; +} + +.image .frame img { + border-radius: 0 !important; + max-width: 100%; + vertical-align: top; + width: inherit; +} + +.image.full .frame { + display: block; +} + +.image.full:first-child .frame { + border-top-left-radius: inherit; + border-top-right-radius: inherit; +} + +.image.full:last-child .frame { + border-bottom-left-radius: inherit; + border-bottom-right-radius: inherit; +} + +.image.style1 { + text-align: left; +} + +.image.style1 .frame { + width: 7rem; + transition: none; +} + +.image.style1 .frame img { + transition: none; +} + +.image.style2 { + text-align: left; +} + +.image.style2 .frame { + width: 8rem; + transition: none; +} + +.image.style2 .frame img { + transition: none; +} + +.links { + display: flex; + justify-content: var(--flex-alignment); + letter-spacing: 0; + line-height: 1.5; + padding: 0; +} + +.links li { + position: relative; +} + +.links li a { + direction: var(--site-language-direction); + display: block; +} + +#links04 { + justify-content: flex-end; + gap: 1.5rem; + flex-direction: row; + flex-wrap: wrap; + text-transform: uppercase; + font-family: 'Inter', sans-serif; + letter-spacing: 0.025rem; + margin-right: -0.025rem; + font-size: 1em; + font-weight: 700; +} + +#links04 li a { + color: #000000; + text-decoration: none; +} + +#links04 li a:hover { + text-decoration: underline; +} + +#links04 .n01 a { + color: #FFFFFF; +} + +#links01 { + justify-content: flex-end; + gap: 1.5rem; + flex-direction: row; + flex-wrap: wrap; + text-transform: uppercase; + font-family: 'Inter', sans-serif; + letter-spacing: 0.025rem; + margin-right: -0.025rem; + font-size: 1em; + font-weight: 700; +} + +#links01 li a { + color: #000000; + text-decoration: none; +} + +#links01 li a:hover { + text-decoration: underline; +} + +#links01 .n01 a { + color: #FFFFFF; +} + +#links02 { + justify-content: flex-end; + gap: 1.5rem; + flex-direction: row; + flex-wrap: wrap; + text-transform: uppercase; + font-family: 'Inter', sans-serif; + letter-spacing: 0.025rem; + margin-right: -0.025rem; + font-size: 1em; + font-weight: 700; +} + +#links02 li a { + color: #000000; + text-decoration: none; +} + +#links02 li a:hover { + text-decoration: underline; +} + +#links03 { + justify-content: flex-end; + gap: 1.5rem; + flex-direction: row; + flex-wrap: wrap; + text-transform: uppercase; + font-family: 'Inter', sans-serif; + letter-spacing: 0.025rem; + margin-right: -0.025rem; + font-size: 1em; + font-weight: 700; +} + +#links03 li a { + color: #000000; + text-decoration: none; +} + +#links03 li a:hover { + text-decoration: underline; +} + +.container { + position: relative; +} + +.container > .wrapper { + vertical-align: top; + position: relative; + max-width: 100%; + border-radius: inherit; +} + +.container > .wrapper > .inner { + vertical-align: top; + position: relative; + max-width: 100%; + border-radius: inherit; + text-align: var(--alignment); +} + +#main .container.full:first-child > .wrapper { + border-top-left-radius: inherit; + border-top-right-radius: inherit; +} + +#main .container.full:last-child > .wrapper { + border-bottom-left-radius: inherit; + border-bottom-right-radius: inherit; +} + +#main .container.full:first-child > .wrapper > .inner { + border-top-left-radius: inherit; + border-top-right-radius: inherit; +} + +#main .container.full:last-child > .wrapper > .inner { + border-bottom-left-radius: inherit; + border-bottom-right-radius: inherit; +} + +.container.style3 { + display: flex; + width: 100%; + align-items: center; + justify-content: flex-start; + background-color: #000000; + border-color: #000000; + border-style: solid; +} + +.container.style3 > .wrapper > .inner { + --gutters: 9rem; + --padding-horizontal: 2rem; + --padding-vertical: 1rem; + padding: var(--padding-vertical) var(--padding-horizontal); +} + +.container.style3 > .wrapper { + max-width: var(--width); + width: 100%; +} + +.container.style3.default > .wrapper > .inner > * { + margin-bottom: var(--spacing); + margin-top: var(--spacing); +} + +.container.style3.default > .wrapper > .inner > *:first-child { + margin-top: 0 !important; +} + +.container.style3.default > .wrapper > .inner > *:last-child { + margin-bottom: 0 !important; +} + +.container.style3.columns > .wrapper > .inner { + flex-wrap: wrap; + display: flex; + align-items: flex-start; +} + +.container.style3.columns > .wrapper > .inner > * { + flex-grow: 0; + flex-shrink: 0; + max-width: 100%; + text-align: var(--alignment); + padding: 0 0 0 var(--gutters); +} + +.container.style3.columns > .wrapper > .inner > * > * { + margin-bottom: var(--spacing); + margin-top: var(--spacing); +} + +.container.style3.columns > .wrapper > .inner > * > *:first-child { + margin-top: 0 !important; +} + +.container.style3.columns > .wrapper > .inner > * > *:last-child { + margin-bottom: 0 !important; +} + +.container.style3.columns > .wrapper > .inner > *:first-child { + margin-left: calc(var(--gutters) * -1); +} + +.container.style3.columns > .wrapper > .inner > *:before { + border-left: solid 1px #000000; + content: ''; + display: block; + margin-left: calc((var(--gutters) * -0.5) - 0.5px); + position: absolute; + width: 0; + height: calc(100% - (var(--padding-vertical) * 2)); + top: var(--padding-vertical); +} + +.container.style3.columns > .wrapper > .inner > *:first-child:before { + display: none; +} + +.container.style3.default > .wrapper > .inner > .full { + margin-left: calc(var(--padding-horizontal) * -1); + max-width: none !important; + width: calc(100% + (var(--padding-horizontal) * 2) + 0.4725px); +} + +.container.style3.default > .wrapper > .inner > .full:first-child { + margin-top: calc(var(--padding-vertical) * -1) !important; + border-top-left-radius: inherit; + border-top-right-radius: inherit; +} + +.container.style3.default > .wrapper > .inner > .full:last-child { + margin-bottom: calc(var(--padding-vertical) * -1) !important; + border-bottom-left-radius: inherit; + border-bottom-right-radius: inherit; +} + +.container.style3.columns > .wrapper > .inner > div > .full { + margin-left: calc((var(--gutters) * -0.5) + 0.5px); + max-width: none !important; + width: calc(100% + var(--gutters) + 0.4725px - 1px); +} + +.container.style3.columns > .wrapper > .inner > div:first-child > .full { + margin-left: calc(var(--padding-horizontal) * -1); + width: calc(100% + var(--padding-horizontal) + calc(var(--gutters) * 0.5) + 0.4725px - 0.5px); +} + +.container.style3.columns > .wrapper > .inner > div:last-child > .full { + width: calc(100% + var(--padding-horizontal) + calc(var(--gutters) * 0.5) + 0.4725px - 0.5px); +} + +.container.style3.columns > .wrapper > .inner > div > .full:first-child { + margin-top: calc(var(--padding-vertical) * -1) !important; +} + +.container.style3.columns > .wrapper > .inner > div > .full:last-child { + margin-bottom: calc(var(--padding-vertical) * -1) !important; +} + +.container.style3.columns > .wrapper > .inner > div:first-child, .container.style3.columns > .wrapper > .inner > div:first-child > .full:first-child { + border-top-left-radius: inherit; +} + +.container.style3.columns > .wrapper > .inner > div:last-child, .container.style3.columns > .wrapper > .inner > div:last-child > .full:first-child { + border-top-right-radius: inherit; +} + +.container.style3.columns > .wrapper > .inner > .full { + align-self: stretch; +} + +.container.style3.columns > .wrapper > .inner > .full:first-child { + border-bottom-left-radius: inherit; + border-top-left-radius: inherit; +} + +.container.style3.columns > .wrapper > .inner > .full:last-child { + border-bottom-right-radius: inherit; + border-top-right-radius: inherit; +} + +.container.style3.columns > .wrapper > .inner > .full > .full:first-child:last-child { + border-radius: inherit; + height: calc(100% + (var(--padding-vertical) * 2)); +} + +.container.style3.columns > .wrapper > .inner > .full > .full:first-child:last-child > * { + border-radius: inherit; + height: 100%; + position: absolute; + width: 100%; +} + +#container12 > .wrapper > .inner > :nth-child(1) { + width: calc(50% + (var(--gutters) / 2)); + --alignment: left; + --flex-alignment: flex-start; + --indent-left: 1; + --indent-right: 0; + --margin-left: 0; + --margin-right: auto; +} + +#container12 > .wrapper > .inner > :nth-child(2) { + width: calc(50% + (var(--gutters) / 2)); + --alignment: right; + --flex-alignment: flex-end; + --indent-left: 0; + --indent-right: 1; + --margin-left: auto; + --margin-right: 0; +} + +.container.style1 { + display: flex; + width: 100%; + align-items: center; + justify-content: flex-start; + background-color: transparent; + border-color: #E3E3E3; + border-style: solid; +} + +.container.style1 > .wrapper > .inner { + --gutters: 9rem; + --padding-horizontal: 0rem; + --padding-vertical: 0rem; + padding: var(--padding-vertical) var(--padding-horizontal); +} + +.container.style1 > .wrapper { + max-width: var(--width); + width: 100%; +} + +.container.style1.default > .wrapper > .inner > * { + margin-bottom: var(--spacing); + margin-top: var(--spacing); +} + +.container.style1.default > .wrapper > .inner > *:first-child { + margin-top: 0 !important; +} + +.container.style1.default > .wrapper > .inner > *:last-child { + margin-bottom: 0 !important; +} + +.container.style1.columns > .wrapper > .inner { + flex-wrap: wrap; + display: flex; + align-items: flex-start; +} + +.container.style1.columns > .wrapper > .inner > * { + flex-grow: 0; + flex-shrink: 0; + max-width: 100%; + text-align: var(--alignment); + padding: 0 0 0 var(--gutters); +} + +.container.style1.columns > .wrapper > .inner > * > * { + margin-bottom: var(--spacing); + margin-top: var(--spacing); +} + +.container.style1.columns > .wrapper > .inner > * > *:first-child { + margin-top: 0 !important; +} + +.container.style1.columns > .wrapper > .inner > * > *:last-child { + margin-bottom: 0 !important; +} + +.container.style1.columns > .wrapper > .inner > *:first-child { + margin-left: calc(var(--gutters) * -1); +} + +.container.style1.columns > .wrapper > .inner > *:before { + border-left: solid 1px #E3E3E3; + content: ''; + display: block; + margin-left: calc((var(--gutters) * -0.5) - 0.5px); + position: absolute; + width: 0; + height: calc(100% - (var(--padding-vertical) * 2)); + top: var(--padding-vertical); +} + +.container.style1.columns > .wrapper > .inner > *:first-child:before { + display: none; +} + +.container.style1.default > .wrapper > .inner > .full { + margin-left: calc(var(--padding-horizontal) * -1); + max-width: none !important; + width: calc(100% + (var(--padding-horizontal) * 2) + 0.4725px); +} + +.container.style1.default > .wrapper > .inner > .full:first-child { + margin-top: calc(var(--padding-vertical) * -1) !important; + border-top-left-radius: inherit; + border-top-right-radius: inherit; +} + +.container.style1.default > .wrapper > .inner > .full:last-child { + margin-bottom: calc(var(--padding-vertical) * -1) !important; + border-bottom-left-radius: inherit; + border-bottom-right-radius: inherit; +} + +.container.style1.columns > .wrapper > .inner > div > .full { + margin-left: calc((var(--gutters) * -0.5) + 0.5px); + max-width: none !important; + width: calc(100% + var(--gutters) + 0.4725px - 1px); +} + +.container.style1.columns > .wrapper > .inner > div:first-child > .full { + margin-left: calc(var(--padding-horizontal) * -1); + width: calc(100% + var(--padding-horizontal) + calc(var(--gutters) * 0.5) + 0.4725px - 0.5px); +} + +.container.style1.columns > .wrapper > .inner > div:last-child > .full { + width: calc(100% + var(--padding-horizontal) + calc(var(--gutters) * 0.5) + 0.4725px - 0.5px); +} + +.container.style1.columns > .wrapper > .inner > div > .full:first-child { + margin-top: calc(var(--padding-vertical) * -1) !important; +} + +.container.style1.columns > .wrapper > .inner > div > .full:last-child { + margin-bottom: calc(var(--padding-vertical) * -1) !important; +} + +.container.style1.columns > .wrapper > .inner > div:first-child, .container.style1.columns > .wrapper > .inner > div:first-child > .full:first-child { + border-top-left-radius: inherit; +} + +.container.style1.columns > .wrapper > .inner > div:last-child, .container.style1.columns > .wrapper > .inner > div:last-child > .full:first-child { + border-top-right-radius: inherit; +} + +.container.style1.columns > .wrapper > .inner > .full { + align-self: stretch; +} + +.container.style1.columns > .wrapper > .inner > .full:first-child { + border-bottom-left-radius: inherit; + border-top-left-radius: inherit; +} + +.container.style1.columns > .wrapper > .inner > .full:last-child { + border-bottom-right-radius: inherit; + border-top-right-radius: inherit; +} + +.container.style1.columns > .wrapper > .inner > .full > .full:first-child:last-child { + border-radius: inherit; + height: calc(100% + (var(--padding-vertical) * 2)); +} + +.container.style1.columns > .wrapper > .inner > .full > .full:first-child:last-child > * { + border-radius: inherit; + height: 100%; + position: absolute; + width: 100%; +} + +#container07 > .wrapper > .inner > :nth-child(1) { + width: calc(30% + (var(--gutters) / 2)); +} + +#container07 > .wrapper > .inner > :nth-child(2) { + width: calc(70% + (var(--gutters) / 2)); +} + +#container02 > .wrapper > .inner > :nth-child(1) { + width: calc(50% + (var(--gutters) / 2)); +} + +#container02 > .wrapper > .inner > :nth-child(2) { + width: calc(50% + (var(--gutters) / 2)); +} + +#container13 > .wrapper > .inner > :nth-child(1) { + width: calc(50% + (var(--gutters) / 2)); +} + +#container13 > .wrapper > .inner > :nth-child(2) { + width: calc(50% + (var(--gutters) / 2)); +} + +#container11 > .wrapper > .inner > :nth-child(1) { + width: calc(50% + (var(--gutters) / 2)); +} + +#container11 > .wrapper > .inner > :nth-child(2) { + width: calc(50% + (var(--gutters) / 2)); +} + +#container04 > .wrapper > .inner > :nth-child(1) { + width: calc(30% + (var(--gutters) / 2)); +} + +#container04 > .wrapper > .inner > :nth-child(2) { + width: calc(70% + (var(--gutters) / 2)); +} + +#container10 > .wrapper > .inner > :nth-child(1) { + width: calc(50% + (var(--gutters) / 2)); + --alignment: left; + --flex-alignment: flex-start; + --indent-left: 1; + --indent-right: 0; + --margin-left: 0; + --margin-right: auto; +} + +#container10 > .wrapper > .inner > :nth-child(2) { + width: calc(50% + (var(--gutters) / 2)); + --alignment: right; + --flex-alignment: flex-end; + --indent-left: 0; + --indent-right: 1; + --margin-left: auto; + --margin-right: 0; +} + +#container01 > .wrapper > .inner > :nth-child(1) { + width: calc(30% + (var(--gutters) / 2)); +} + +#container01 > .wrapper > .inner > :nth-child(2) { + width: calc(70% + (var(--gutters) / 2)); +} + +#container08 > .wrapper > .inner > :nth-child(1) { + width: calc(45% + (var(--gutters) / 2)); +} + +#container08 > .wrapper > .inner > :nth-child(2) { + width: calc(55% + (var(--gutters) / 2)); +} + +#container09 > .wrapper > .inner > :nth-child(1) { + width: calc(25% + (var(--gutters) / 4)); +} + +#container09 > .wrapper > .inner > :nth-child(2) { + width: calc(25% + (var(--gutters) / 4)); +} + +#container09 > .wrapper > .inner > :nth-child(3) { + width: calc(25% + (var(--gutters) / 4)); +} + +#container09 > .wrapper > .inner > :nth-child(4) { + width: calc(25% + (var(--gutters) / 4)); +} + +hr { + align-items: center; + border: 0; + display: flex; + justify-content: var(--flex-alignment); + min-height: 1rem; + padding: 0; + position: relative; + width: 100%; +} + +hr:before { + content: ''; +} + +hr.style1:not(:first-child) { + margin-top: 3rem !important; +} + +hr.style1:not(:last-child) { + margin-bottom: 3rem !important; +} + +hr.style1:before { + width: 100%; + background-color: #E3E3E3; + height: 1px; +} + +hr.style2:not(:first-child) { + margin-top: 3rem !important; +} + +hr.style2:not(:last-child) { + margin-bottom: 3rem !important; +} + +hr.style2:before { + width: 100%; + background-color: #E3E3E3; + height: 1px; + border-radius: 0px; +} + +.buttons { + cursor: default; + display: flex; + justify-content: var(--flex-alignment); + letter-spacing: 0; + padding: 0; +} + +.buttons li { + max-width: 100%; + text-align: var(--alignment); +} + +.buttons li a { + align-items: center; + justify-content: center; + max-width: 100%; + text-align: center; + text-decoration: none; + vertical-align: middle; + white-space: nowrap; +} + +.buttons.style2 { + --flex-alignment: flex-end; + --alignment: right; + gap: 1.25rem; + flex-direction: row; + flex-wrap: wrap; +} + +.buttons.style2 li a { + display: inline-flex; + width: auto; + height: 3rem; + line-height: 3rem; + padding: 0 1.5rem; + vertical-align: middle; + text-transform: uppercase; + font-family: 'Inter', sans-serif; + letter-spacing: 0.025rem; + padding-left: calc(0.025rem + 1.5rem); + font-size: 1em; + font-weight: 400; + border-radius: 2.5rem; + flex-direction: row-reverse; + transition: transform 0.25s ease, color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease; +} + +.buttons.style2 li a svg { + display: block; + fill: #FFFFFF; + flex-grow: 0; + flex-shrink: 0; + height: 100%; + min-width: 18px; + width: 1.875em; + margin-left: 0.5em; + margin-right: calc(-0.125em + 0.025rem); + transition: fill 0.25s ease; +} + +.buttons.style2 li a .label { + direction: var(--site-language-direction); + overflow: hidden; +} + +.buttons.style2 .button { + background-color: #000000; + color: #FFFFFF; +} + +.buttons.style2 li a:hover { + transform: scale(1.025); +} + +.icons { + display: flex; + flex-wrap: wrap; + justify-content: var(--flex-alignment); + letter-spacing: 0; + padding: 0; +} + +.icons li { + position: relative; + z-index: 1; +} + +.icons li a { + align-items: center; + display: flex; + justify-content: center; +} + +.icons li a svg { + display: block; + position: relative; +} + +.icons li a + svg { + display: block; + height: 100%; + left: 0; + pointer-events: none; + position: absolute; + top: 0; + width: 100%; + z-index: -1; +} + +.icons li a .label { + display: none; +} + +.icons.style1 { + font-size: 1.75em; + gap: 1.5rem; +} + +.icons.style1 li a { + border-radius: 0.5rem; + height: 1em; + width: 1em; + transition: transform 0.25s ease, color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease; +} + +.icons.style1 li a svg { + height: 100%; + width: 100%; + transition: fill 0.25s ease; +} + +.icons.style1 a svg { + fill: #000000; +} + +.icons.style1 li a + svg { + transition: transform 0.25s ease, fill 0.25s ease, stroke 0.25s ease; +} + +.icons.style1 li a:hover { + transform: scale(1.2); +} + +.icons.style1 li a:hover + svg { + transform: scale(1.2); +} + +.video { + position: relative; +} + +.video video { + display: inline-block; + max-width: 100%; + vertical-align: top; +} + +.video .frame { + display: inline-block; + max-width: 100%; + overflow: hidden; + position: relative; + vertical-align: top; +} + +.video .frame:before { + content: ''; + display: block; + width: 100%; +} + +.video .frame iframe { + bottom: 0px; + height: 100%; + left: 0px; + position: absolute; + right: 0px; + top: 0px; + width: 100%; + background-color: #000000; +} + +.video.full video { + display: block; +} + +.video.full:first-child video { + border-top-left-radius: inherit; + border-top-right-radius: inherit; +} + +.video.full:last-child video { + border-bottom-left-radius: inherit; + border-bottom-right-radius: inherit; +} + +.video.full .frame { + display: block; +} + +.video.full:first-child .frame { + border-top-left-radius: inherit; + border-top-right-radius: inherit; +} + +.video.full:last-child .frame { + border-bottom-left-radius: inherit; + border-bottom-right-radius: inherit; +} + +#video01 video { + width: 100vw; + object-fit: cover; + object-position: center; +} + +#video01 .frame { + width: 100vw; + object-fit: cover; + object-position: center; +} + +#video01 .frame:before { + padding-top: 56.25%; +} + +.list { + display: block; +} + +.list ul, .list ol { + display: inline-block; + max-width: 100%; + text-align: var(--site-language-alignment); + vertical-align: middle; +} + +.list ul li, .list ol li { + direction: var(--site-language-direction); + display: flex; + position: relative; +} + +.list ul li:before, .list ol li:before { + background-repeat: no-repeat; + content: ''; + display: block; + flex-grow: 0; + flex-shrink: 0; + font-variant: normal !important; + letter-spacing: 0 !important; + order: 1; + position: relative; +} + +.list ul li:after, .list ol li:after { + content: ''; + display: block; + flex-grow: 0; + flex-shrink: 0; + order: 2; + pointer-events: none; +} + +.list ul li p, .list ol li p { + flex-grow: 1; + flex-shrink: 1; + order: 3; +} + +.list ul li:first-child, .list ol li:first-child { + margin-top: 0 !important; +} + +#list01 { + color: #000000; + font-family: 'Inter', sans-serif; + letter-spacing: 0.025rem; + font-size: 1em; + line-height: 1.625; + font-weight: 400; +} + +#list01 a { + text-decoration: none; +} + +#list01 a:hover { + text-decoration: underline; +} + +#list01 ul { + width: 100%; +} + +#list01 ul li { + margin-top: 0.5rem; +} + +#list01 ul li:after { + width: 0.625rem; +} + +#list01 ul li:before { + background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2040%2040%22%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2210%22%20fill%3D%22%23E3E3E3%22%20%2F%3E%3C%2Fsvg%3E'); + border-radius: 0.5rem; + background-position: left 60%; + background-repeat: no-repeat; + background-size: contain; + height: 1.625rem; + line-height: 1.625rem; + min-width: 0.76171875rem; +} + +@media (max-width: 1920px) { + +} + +@media (max-width: 1680px) { + html { + font-size: 12pt; + } +} + +@media (max-width: 1280px) { + html { + font-size: 12pt; + } +} + +@media (max-width: 1024px) { + +} + +@media (max-width: 980px) { + html { + font-size: 10pt; + } +} + +@media (max-width: 736px) { + html { + font-size: 12pt; + } + + + + #main > .inner { + --padding-horizontal: 2rem; + --padding-vertical: 3rem; + --spacing: 1.5rem; + } + + #main > .inner > * > .full { + margin-left: calc(-2rem); + max-width: calc(100% + 4rem + 0.4725px); + width: calc(100% + 4rem + 0.4725px); + } + + #main > .inner > * > .full.screen { + margin-left: calc(-2rem); + } + + #main > .inner > .active > .full:first-child { + margin-top: -3rem !important; + } + + #main > .inner > .active > .full:last-child { + margin-bottom: -3rem !important; + } + + h1.style1, h2.style1, h3.style1, p.style1 { + letter-spacing: 0rem; + width: 100%; + font-size: 2em; + line-height: 1.25; + } + + h1.style2, h2.style2, h3.style2, p.style2 { + letter-spacing: -0.065625rem; + width: 100%; + font-size: 2em; + line-height: 1.25; + } + + h1.style3, h2.style3, h3.style3, p.style3 { + letter-spacing: 0.021875rem; + width: calc(100% + 0.021875rem); + font-size: 1em; + line-height: 1.625; + } + + h1.style6, h2.style6, h3.style6, p.style6 { + letter-spacing: 0.175rem; + width: calc(100% + 0.175rem); + font-size: 1em; + line-height: 1.25; + } + + h1.style7:not(:first-child), h2.style7:not(:first-child), h3.style7:not(:first-child), p.style7:not(:first-child) { + margin-top: 1.5rem !important; + } + + h1.style7:not(:last-child), h2.style7:not(:last-child), h3.style7:not(:last-child), p.style7:not(:last-child) { + margin-bottom: 1.5rem !important; + } + + h1.style7, h2.style7, h3.style7, p.style7 { + letter-spacing: 0rem; + width: 100%; + font-size: 2em; + line-height: 1.25; + } + + h1.style8, h2.style8, h3.style8, p.style8 { + letter-spacing: 0rem; + width: 100%; + font-size: 1.5em; + line-height: 1.25; + } + + .image.style1 .frame { + width: 7rem; + } + + .image.style2 .frame { + width: 8rem; + } + + #links04 { + gap: 1.5rem; + letter-spacing: 0.021875rem; + margin-right: -0.021875rem; + font-size: 1em; + } + + #links01 { + gap: 1.5rem; + letter-spacing: 0.021875rem; + margin-right: -0.021875rem; + font-size: 1em; + } + + #links02 { + gap: 1.5rem; + letter-spacing: 0.021875rem; + margin-right: -0.021875rem; + font-size: 1em; + } + + #links03 { + gap: 1.5rem; + letter-spacing: 0.021875rem; + margin-right: -0.021875rem; + font-size: 1em; + } + + + + .container.style3:not(:first-child) { + margin-top: 4rem !important; + } + + .container.style3:not(:last-child) { + margin-bottom: 4rem !important; + } + + .container.style3 > .wrapper > .inner { + --gutters: 4rem; + --padding-horizontal: 2rem; + --padding-vertical: 1rem; + } + + .container.style3.columns > .wrapper > .inner { + flex-direction: column !important; + flex-wrap: nowrap !important; + } + + .container.style3.columns > .wrapper > .inner > span { + height: 0; + margin-top: calc(var(--gutters) * -1); + pointer-events: none; + visibility: hidden; + } + + .container.style3.columns > .wrapper > .inner > span:first-child + div:before { + display: none !important; + } + + .container.style3.columns > .wrapper > .inner > *:first-child { + margin-left: 0 !important; + padding-top: 0 !important; + } + + .container.style3.columns > .wrapper > .inner > * { + padding: calc(var(--gutters) * 0.5) 0 !important; + } + + .container.style3.columns > .wrapper > .inner > *:before { + border-top: solid 1px #000000 !important; + height: 0 !important; + margin-left: 0 !important; + top: auto !important; + margin-top: calc((var(--gutters) * -0.5) - 0.5px) !important; + left: var(--padding-horizontal) !important; + width: calc(100% - (var(--padding-horizontal) * 2)) !important; + } + + .container.style3.columns > .wrapper > .inner > *:last-child { + padding-bottom: 0 !important; + } + + .container.style3.columns > .wrapper > .inner > *:first-child:before { + display: none !important; + } + + .container.style3.columns > .wrapper > .inner > *:last-child:before { + display: block !important; + } + + .container.style3.columns > .wrapper > .inner > div > .full { + margin-left: calc(var(--padding-horizontal) * -1); + width: calc(100% + (var(--padding-horizontal) * 2) + 0.4725px); + } + + .container.style3.columns > .wrapper > .inner > div:first-of-type > .full { + margin-left: calc(var(--padding-horizontal) * -1); + width: calc(100% + (var(--padding-horizontal) * 2) + 0.4725px); + } + + .container.style3.columns > .wrapper > .inner > div:last-of-type > .full { + margin-left: calc(var(--padding-horizontal) * -1); + width: calc(100% + (var(--padding-horizontal) * 2) + 0.4725px); + } + + .container.style3.columns > .wrapper > .inner > div > .full:first-child { + margin-top: calc((var(--gutters) * -0.5) + 0.5px) !important; + } + + .container.style3.columns > .wrapper > .inner > div > .full:last-child { + margin-bottom: calc((var(--gutters) * -0.5) + 0.5px) !important; + } + + .container.style3.columns > .wrapper > .inner > div:first-of-type > .full:first-child { + margin-top: calc(var(--padding-vertical) * -1) !important; + } + + .container.style3.columns > .wrapper > .inner > div:last-of-type > .full:last-child { + margin-bottom: calc(var(--padding-vertical) * -1) !important; + } + + .container.style3.columns > .wrapper > .inner > div:first-of-type, .container.style3.columns > .wrapper > .inner > div:first-of-type > .full:first-child { + border-top-left-radius: inherit; + border-top-right-radius: inherit; + } + + .container.style3.columns > .wrapper > .inner > div:last-of-type, .container.style3.columns > .wrapper > .inner > div:last-of-type > .full:last-child { + border-bottom-left-radius: inherit; + border-bottom-right-radius: inherit; + } + + .container.style3.columns > .wrapper > .inner > div:first-of-type, .container.style3.columns > .wrapper > .inner > div:first-of-type > .full:last-child { + border-bottom-left-radius: 0 !important; + } + + .container.style3.columns > .wrapper > .inner > div:last-of-type, .container.style3.columns > .wrapper > .inner > div:last-of-type > .full:first-child { + border-top-right-radius: 0 !important; + } + + .container.style3.columns > .wrapper > .inner > .full > .full:first-child:last-child { + height: auto; + } + + .container.style3.columns > .wrapper > .inner > .full > .full:first-child:last-child > * { + height: auto; + position: relative; + width: auto; + } + + #container12 > .wrapper > .inner > :nth-child(1) { + --alignment: left; + --flex-alignment: flex-start; + --indent-left: 1; + --indent-right: 0; + --margin-left: 0; + --margin-right: auto; + min-height: 100% !important; + width: 100% !important; + } + + #container12 > .wrapper > .inner > :nth-child(2) { + --alignment: right; + --flex-alignment: flex-end; + --indent-left: 0; + --indent-right: 1; + --margin-left: auto; + --margin-right: 0; + min-height: 100% !important; + width: 100% !important; + } + + + + .container.style1:not(:first-child) { + margin-top: 4rem !important; + } + + .container.style1:not(:last-child) { + margin-bottom: 4rem !important; + } + + .container.style1 > .wrapper > .inner { + --gutters: 4rem; + --padding-horizontal: 0rem; + --padding-vertical: 0rem; + } + + .container.style1.columns > .wrapper > .inner { + flex-direction: column !important; + flex-wrap: nowrap !important; + } + + .container.style1.columns > .wrapper > .inner > span { + height: 0; + margin-top: calc(var(--gutters) * -1); + pointer-events: none; + visibility: hidden; + } + + .container.style1.columns > .wrapper > .inner > span:first-child + div:before { + display: none !important; + } + + .container.style1.columns > .wrapper > .inner > *:first-child { + margin-left: 0 !important; + padding-top: 0 !important; + } + + .container.style1.columns > .wrapper > .inner > * { + padding: calc(var(--gutters) * 0.5) 0 !important; + } + + .container.style1.columns > .wrapper > .inner > *:before { + border-top: solid 1px #E3E3E3 !important; + height: 0 !important; + margin-left: 0 !important; + top: auto !important; + margin-top: calc((var(--gutters) * -0.5) - 0.5px) !important; + left: var(--padding-horizontal) !important; + width: calc(100% - (var(--padding-horizontal) * 2)) !important; + } + + .container.style1.columns > .wrapper > .inner > *:last-child { + padding-bottom: 0 !important; + } + + .container.style1.columns > .wrapper > .inner > *:first-child:before { + display: none !important; + } + + .container.style1.columns > .wrapper > .inner > *:last-child:before { + display: block !important; + } + + .container.style1.columns > .wrapper > .inner > div > .full { + margin-left: calc(var(--padding-horizontal) * -1); + width: calc(100% + (var(--padding-horizontal) * 2) + 0.4725px); + } + + .container.style1.columns > .wrapper > .inner > div:first-of-type > .full { + margin-left: calc(var(--padding-horizontal) * -1); + width: calc(100% + (var(--padding-horizontal) * 2) + 0.4725px); + } + + .container.style1.columns > .wrapper > .inner > div:last-of-type > .full { + margin-left: calc(var(--padding-horizontal) * -1); + width: calc(100% + (var(--padding-horizontal) * 2) + 0.4725px); + } + + .container.style1.columns > .wrapper > .inner > div > .full:first-child { + margin-top: calc((var(--gutters) * -0.5) + 0.5px) !important; + } + + .container.style1.columns > .wrapper > .inner > div > .full:last-child { + margin-bottom: calc((var(--gutters) * -0.5) + 0.5px) !important; + } + + .container.style1.columns > .wrapper > .inner > div:first-of-type > .full:first-child { + margin-top: calc(var(--padding-vertical) * -1) !important; + } + + .container.style1.columns > .wrapper > .inner > div:last-of-type > .full:last-child { + margin-bottom: calc(var(--padding-vertical) * -1) !important; + } + + .container.style1.columns > .wrapper > .inner > div:first-of-type, .container.style1.columns > .wrapper > .inner > div:first-of-type > .full:first-child { + border-top-left-radius: inherit; + border-top-right-radius: inherit; + } + + .container.style1.columns > .wrapper > .inner > div:last-of-type, .container.style1.columns > .wrapper > .inner > div:last-of-type > .full:last-child { + border-bottom-left-radius: inherit; + border-bottom-right-radius: inherit; + } + + .container.style1.columns > .wrapper > .inner > div:first-of-type, .container.style1.columns > .wrapper > .inner > div:first-of-type > .full:last-child { + border-bottom-left-radius: 0 !important; + } + + .container.style1.columns > .wrapper > .inner > div:last-of-type, .container.style1.columns > .wrapper > .inner > div:last-of-type > .full:first-child { + border-top-right-radius: 0 !important; + } + + .container.style1.columns > .wrapper > .inner > .full > .full:first-child:last-child { + height: auto; + } + + .container.style1.columns > .wrapper > .inner > .full > .full:first-child:last-child > * { + height: auto; + position: relative; + width: auto; + } + + #container07 > .wrapper > .inner > :nth-child(1) { + min-height: 100% !important; + width: 100% !important; + } + + #container07 > .wrapper > .inner > :nth-child(2) { + min-height: 100% !important; + width: 100% !important; + } + + #container02 > .wrapper > .inner > :nth-child(1) { + min-height: 100% !important; + width: 100% !important; + } + + #container02 > .wrapper > .inner > :nth-child(2) { + min-height: 100% !important; + width: 100% !important; + } + + #container13 > .wrapper > .inner > :nth-child(1) { + min-height: 100% !important; + width: 100% !important; + } + + #container13 > .wrapper > .inner > :nth-child(2) { + min-height: 100% !important; + width: 100% !important; + } + + #container11 > .wrapper > .inner > :nth-child(1) { + min-height: 100% !important; + width: 100% !important; + } + + #container11 > .wrapper > .inner > :nth-child(2) { + min-height: 100% !important; + width: 100% !important; + } + + #container04 > .wrapper > .inner > :nth-child(1) { + min-height: 100% !important; + width: 100% !important; + } + + #container04 > .wrapper > .inner > :nth-child(2) { + min-height: 100% !important; + width: 100% !important; + } + + #container10 > .wrapper > .inner > :nth-child(1) { + --alignment: left; + --flex-alignment: flex-start; + --indent-left: 1; + --indent-right: 0; + --margin-left: 0; + --margin-right: auto; + min-height: 100% !important; + width: 100% !important; + } + + #container10 > .wrapper > .inner > :nth-child(2) { + --alignment: right; + --flex-alignment: flex-end; + --indent-left: 0; + --indent-right: 1; + --margin-left: auto; + --margin-right: 0; + min-height: 100% !important; + width: 100% !important; + } + + #container01 > .wrapper > .inner > :nth-child(1) { + min-height: 100% !important; + width: 100% !important; + } + + #container01 > .wrapper > .inner > :nth-child(2) { + min-height: 100% !important; + width: 100% !important; + } + + #container08 > .wrapper > .inner > :nth-child(1) { + min-height: 100% !important; + width: 100% !important; + } + + #container08 > .wrapper > .inner > :nth-child(2) { + min-height: 100% !important; + width: 100% !important; + } + + #container09 > .wrapper > .inner > :nth-child(1) { + min-height: 100% !important; + width: 100% !important; + } + + #container09 > .wrapper > .inner > :nth-child(2) { + min-height: 100% !important; + width: 100% !important; + } + + #container09 > .wrapper > .inner > :nth-child(3) { + min-height: 100% !important; + width: 100% !important; + } + + #container09 > .wrapper > .inner > :nth-child(4) { + min-height: 100% !important; + width: 100% !important; + } + + hr.style1:not(:first-child) { + margin-top: 2rem !important; + } + + hr.style1:not(:last-child) { + margin-bottom: 2rem !important; + } + + hr.style2:not(:first-child) { + margin-top: 2rem !important; + } + + hr.style2:not(:last-child) { + margin-bottom: 2rem !important; + } + + hr.style2:before { + width: 100rem; + } + + .buttons.style2 { + gap: 1.25rem; + } + + .buttons.style2 li a { + letter-spacing: 0.025rem; + padding-left: calc(0.025rem + 1.5rem); + font-size: 1em; + } + + .buttons.style2 li a svg { + width: 1.875em; + } + + .icons.style1 { + font-size: 1.75em; + gap: 1.5rem; + } + + #video01 video { + object-fit: cover; + object-position: center; + } + + #video01 .frame { + object-fit: cover; + object-position: center; + } + + #list01 { + letter-spacing: 0.021875rem; + font-size: 1em; + line-height: 1.625; + } + + #list01 ul li:after { + width: 0.625rem; + } + + #list01 ul li:before { + height: 1.625rem; + line-height: 1.625rem; + min-width: 0.76171875rem; + } +} + +@media (max-width: 480px) { + #main > .inner { + --spacing: 1.3125rem; + } +} + +@media (max-width: 360px) { + #main > .inner { + --padding-horizontal: 1.5rem; + --padding-vertical: 2.25rem; + --spacing: 1.125rem; + } + + #main > .inner > * > .full { + margin-left: calc(-1.5rem); + max-width: calc(100% + 3rem + 0.4725px); + width: calc(100% + 3rem + 0.4725px); + } + + #main > .inner > * > .full.screen { + margin-left: calc(-1.5rem); + } + + #main > .inner > .active > .full:first-child { + margin-top: -2.25rem !important; + } + + #main > .inner > .active > .full:last-child { + margin-bottom: -2.25rem !important; + } + + h1.style1, h2.style1, h3.style1, p.style1 { + font-size: 1.5em; + } + + h1.style2, h2.style2, h3.style2, p.style2 { + font-size: 1.5em; + } + + h1.style3, h2.style3, h3.style3, p.style3 { + font-size: 1em; + } + + h1.style6, h2.style6, h3.style6, p.style6 { + font-size: 1em; + } + + h1.style7, h2.style7, h3.style7, p.style7 { + font-size: 1.5em; + } + + h1.style8, h2.style8, h3.style8, p.style8 { + font-size: 1.5em; + } + + #links04 { + gap: 1.125rem; + font-size: 1em; + } + + #links01 { + gap: 1.125rem; + font-size: 1em; + } + + #links02 { + gap: 1.125rem; + font-size: 1em; + } + + #links03 { + gap: 1.125rem; + font-size: 1em; + } + + .container.style3 > .wrapper > .inner { + --gutters: 4rem; + --padding-horizontal: 1.5rem; + --padding-vertical: 0.75rem; + } + + .container.style1 > .wrapper > .inner { + --gutters: 4rem; + --padding-horizontal: 0rem; + --padding-vertical: 0rem; + } + + .buttons.style2 { + gap: 0.9375rem; + } + + .icons.style1 { + gap: 1.125rem; + } + + #list01 { + font-size: 1em; + } + + #list01 ul li:after { + width: 0.625rem; + } + + #list01 ul li:before { + height: 1.625rem; + line-height: 1.625rem; + min-width: 0.76171875rem; + } +} \ No newline at end of file diff --git a/assets/main.js b/assets/main.js new file mode 100644 index 0000000..f90486a --- /dev/null +++ b/assets/main.js @@ -0,0 +1,2649 @@ +/* Carrd Site JS | carrd.co | License: MIT */ + +(function() { + + // Main. + var on = addEventListener, + off = removeEventListener, + $ = function(q) { return document.querySelector(q) }, + $$ = function(q) { return document.querySelectorAll(q) }, + $body = document.body, + $inner = $('.inner'), + client = (function() { + + var o = { + browser: 'other', + browserVersion: 0, + os: 'other', + osVersion: 0, + mobile: false, + canUse: null, + flags: { + lsdUnits: false, + }, + }, + ua = navigator.userAgent, + a, i; + + // browser, browserVersion. + a = [ + [ + 'firefox', + /Firefox\/([0-9\.]+)/ + ], + [ + 'edge', + /Edge\/([0-9\.]+)/ + ], + [ + 'safari', + /Version\/([0-9\.]+).+Safari/ + ], + [ + 'chrome', + /Chrome\/([0-9\.]+)/ + ], + [ + 'chrome', + /CriOS\/([0-9\.]+)/ + ], + [ + 'ie', + /Trident\/.+rv:([0-9]+)/ + ] + ]; + + for (i=0; i < a.length; i++) { + + if (ua.match(a[i][1])) { + + o.browser = a[i][0]; + o.browserVersion = parseFloat(RegExp.$1); + + break; + + } + + } + + // os, osVersion. + a = [ + [ + 'ios', + /([0-9_]+) like Mac OS X/, + function(v) { return v.replace('_', '.').replace('_', ''); } + ], + [ + 'ios', + /CPU like Mac OS X/, + function(v) { return 0 } + ], + [ + 'ios', + /iPad; CPU/, + function(v) { return 0 } + ], + [ + 'android', + /Android ([0-9\.]+)/, + null + ], + [ + 'mac', + /Macintosh.+Mac OS X ([0-9_]+)/, + function(v) { return v.replace('_', '.').replace('_', ''); } + ], + [ + 'windows', + /Windows NT ([0-9\.]+)/, + null + ], + [ + 'undefined', + /Undefined/, + null + ] + ]; + + for (i=0; i < a.length; i++) { + + if (ua.match(a[i][1])) { + + o.os = a[i][0]; + o.osVersion = parseFloat( a[i][2] ? (a[i][2])(RegExp.$1) : RegExp.$1 ); + + break; + + } + + } + + // Hack: Detect iPads running iPadOS. + if (o.os == 'mac' + && ('ontouchstart' in window) + && ( + + // 12.9" + (screen.width == 1024 && screen.height == 1366) + // 10.2" + || (screen.width == 834 && screen.height == 1112) + // 9.7" + || (screen.width == 810 && screen.height == 1080) + // Legacy + || (screen.width == 768 && screen.height == 1024) + + )) + o.os = 'ios'; + + // mobile. + o.mobile = (o.os == 'android' || o.os == 'ios'); + + // canUse. + var _canUse = document.createElement('div'); + + o.canUse = function(property, value) { + + var style; + + // Get style. + style = _canUse.style; + + // Property doesn't exist? Can't use it. + if (!(property in style)) + return false; + + // Value provided? + if (typeof value !== 'undefined') { + + // Assign value. + style[property] = value; + + // Value is empty? Can't use it. + if (style[property] == '') + return false; + + } + + return true; + + }; + + // flags. + o.flags.lsdUnits = o.canUse('width', '100dvw'); + + return o; + + }()), + trigger = function(t) { + dispatchEvent(new Event(t)); + }, + cssRules = function(selectorText) { + + var ss = document.styleSheets, + a = [], + f = function(s) { + + var r = s.cssRules, + i; + + for (i=0; i < r.length; i++) { + + if (r[i] instanceof CSSMediaRule && matchMedia(r[i].conditionText).matches) + (f)(r[i]); + else if (r[i] instanceof CSSStyleRule && r[i].selectorText == selectorText) + a.push(r[i]); + + } + + }, + x, i; + + for (i=0; i < ss.length; i++) + f(ss[i]); + + return a; + + }, + escapeHtml = function(s) { + + // Blank, null, or undefined? Return blank string. + if (s === '' + || s === null + || s === undefined) + return ''; + + // Escape HTML characters. + var a = { + '&': '&', + '<': '<', + '>': '>', + '"': '"', + "'": ''', + }; + + s = s.replace(/[&<>"']/g, function(x) { + return a[x]; + }); + + return s; + + }, + thisHash = function() { + + var h = location.hash ? location.hash.substring(1) : null, + a; + + // Null? Bail. + if (!h) + return null; + + // Query string? Move before hash. + if (h.match(/\?/)) { + + // Split from hash. + a = h.split('?'); + h = a[0]; + + // Update hash. + history.replaceState(undefined, undefined, '#' + h); + + // Update search. + window.location.search = a[1]; + + } + + // Prefix with "x" if not a letter. + if (h.length > 0 + && !h.match(/^[a-zA-Z]/)) + h = 'x' + h; + + // Convert to lowercase. + if (typeof h == 'string') + h = h.toLowerCase(); + + return h; + + }, + scrollToElement = function(e, style, duration) { + + var y, cy, dy, + start, easing, offset, f; + + // Element. + + // No element? Assume top of page. + if (!e) + y = 0; + + // Otherwise ... + else { + + offset = (e.dataset.scrollOffset ? parseInt(e.dataset.scrollOffset) : 0) * parseFloat(getComputedStyle(document.documentElement).fontSize); + + switch (e.dataset.scrollBehavior ? e.dataset.scrollBehavior : 'default') { + + case 'default': + default: + + y = e.offsetTop + offset; + + break; + + case 'center': + + if (e.offsetHeight < window.innerHeight) + y = e.offsetTop - ((window.innerHeight - e.offsetHeight) / 2) + offset; + else + y = e.offsetTop - offset; + + break; + + case 'previous': + + if (e.previousElementSibling) + y = e.previousElementSibling.offsetTop + e.previousElementSibling.offsetHeight + offset; + else + y = e.offsetTop + offset; + + break; + + } + + } + + // Style. + if (!style) + style = 'smooth'; + + // Duration. + if (!duration) + duration = 750; + + // Instant? Just scroll. + if (style == 'instant') { + + window.scrollTo(0, y); + return; + + } + + // Get start, current Y. + start = Date.now(); + cy = window.scrollY; + dy = y - cy; + + // Set easing. + switch (style) { + + case 'linear': + easing = function (t) { return t }; + break; + + case 'smooth': + easing = function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 }; + break; + + } + + // Scroll. + f = function() { + + var t = Date.now() - start; + + // Hit duration? Scroll to y and finish. + if (t >= duration) + window.scroll(0, y); + + // Otherwise ... + else { + + // Scroll. + window.scroll(0, cy + (dy * easing(t / duration))); + + // Repeat. + requestAnimationFrame(f); + + } + + }; + + f(); + + }, + scrollToTop = function() { + + // Scroll to top. + scrollToElement(null); + + }, + loadElements = function(parent) { + + var a, e, x, i; + + // IFRAMEs. + + // Get list of unloaded IFRAMEs. + a = parent.querySelectorAll('iframe[data-src]:not([data-src=""])'); + + // Step through list. + for (i=0; i < a.length; i++) { + + // Load. + a[i].contentWindow.location.replace(a[i].dataset.src); + + // Save initial src. + a[i].dataset.initialSrc = a[i].dataset.src; + + // Mark as loaded. + a[i].dataset.src = ''; + + } + + // Video. + + // Get list of videos (autoplay). + a = parent.querySelectorAll('video[autoplay]'); + + // Step through list. + for (i=0; i < a.length; i++) { + + // Play if paused. + if (a[i].paused) + a[i].play(); + + } + + // Autofocus. + + // Get first element with data-autofocus attribute. + e = parent.querySelector('[data-autofocus="1"]'); + + // Determine type. + x = e ? e.tagName : null; + + switch (x) { + + case 'FORM': + + // Get first input. + e = e.querySelector('.field input, .field select, .field textarea'); + + // Found? Focus. + if (e) + e.focus(); + + break; + + default: + break; + + } + + // Deferred script tags. + + // Get list of deferred script tags. + a = parent.querySelectorAll('deferred-script'); + + // Step through list. + for (i=0; i < a.length; i++) { + + // Create replacement script tag. + x = document.createElement('script'); + + // Set deferred data attribute (so we can unload this element later). + x.setAttribute('data-deferred', ''); + + // Set "src" attribute (if present). + if (a[i].getAttribute('src')) + x.setAttribute('src', a[i].getAttribute('src')); + + // Set text content (if present). + if (a[i].textContent) + x.textContent = a[i].textContent; + + // Replace. + a[i].replaceWith(x); + + } + + }, + unloadElements = function(parent) { + + var a, e, x, i; + + // IFRAMEs. + + // Get list of loaded IFRAMEs. + a = parent.querySelectorAll('iframe[data-src=""]'); + + // Step through list. + for (i=0; i < a.length; i++) { + + // Don't unload? Skip. + if (a[i].dataset.srcUnload === '0') + continue; + + // Mark as unloaded. + + // IFRAME was previously loaded by loadElements()? Use initialSrc. + if ('initialSrc' in a[i].dataset) + a[i].dataset.src = a[i].dataset.initialSrc; + + // Otherwise, just use src. + else + a[i].dataset.src = a[i].src; + + // Unload. + a[i].contentWindow.location.replace('about:blank'); + + } + + // Video. + + // Get list of videos. + a = parent.querySelectorAll('video'); + + // Step through list. + for (i=0; i < a.length; i++) { + + // Pause if playing. + if (!a[i].paused) + a[i].pause(); + + } + + // Autofocus. + + // Get focused element. + e = $(':focus'); + + // Found? Blur. + if (e) + e.blur(); + + // Deferred script tags. + // NOTE: Disabled for now. May want to bring this back later. + /* + + // Get list of (previously deferred) script tags. + a = parent.querySelectorAll('script[data-deferred]'); + + // Step through list. + for (i=0; i < a.length; i++) { + + // Create replacement deferred-script tag. + x = document.createElement('deferred-script'); + + // Set "src" attribute (if present). + if (a[i].getAttribute('src')) + x.setAttribute('src', a[i].getAttribute('src')); + + // Set text content (if present). + if (a[i].textContent) + x.textContent = a[i].textContent; + + // Replace. + a[i].replaceWith(x); + + } + + */ + + }; + + // Expose scrollToElement. + window._scrollToTop = scrollToTop; + + // "On Load" animation. + // Set loader timeout. + var loaderTimeout = setTimeout(function() { + $body.classList.add('with-loader'); + }, 500); + + // Create load handler. + var loadHandler = function() { + setTimeout(function() { + + // Stop loader. + clearTimeout(loaderTimeout); + + // Unmark as loading. + $body.classList.remove('is-loading'); + + // Mark as playing. + $body.classList.add('is-playing'); + + // Wait for animation to complete. + setTimeout(function() { + + // Remove loader. + $body.classList.remove('with-loader'); + + // Unmark as playing. + $body.classList.remove('is-playing'); + + // Mark as ready. + $body.classList.add('is-ready'); + + }, 1000); + + }, 100); + }; + + // Load event. + on('load', loadHandler); + + // Sections. + (function() { + + var initialSection, initialScrollPoint, initialId, + header, footer, name, hideHeader, hideFooter, disableAutoScroll, + h, e, ee, k, + locked = false, + scrollPointParent = function(target) { + + while (target) { + + if (target.parentElement + && target.parentElement.tagName == 'SECTION') + break; + + target = target.parentElement; + + } + + return target; + + }, + scrollPointSpeed = function(scrollPoint) { + + let x = parseInt(scrollPoint.dataset.scrollSpeed); + + switch (x) { + + case 5: + return 250; + + case 4: + return 500; + + case 3: + return 750; + + case 2: + return 1000; + + case 1: + return 1250; + + default: + break; + + } + + return 750; + + }, + doNextScrollPoint = function(event) { + + var e, target, id; + + // Determine parent element. + e = scrollPointParent(event.target); + + if (!e) + return; + + // Find next scroll point. + while (e && e.nextElementSibling) { + + e = e.nextElementSibling; + + if (e.dataset.scrollId) { + + target = e; + id = e.dataset.scrollId; + break; + + } + + } + + if (!target + || !id) + return; + + // Redirect. + if (target.dataset.scrollInvisible == '1') + scrollToElement(target, 'smooth', scrollPointSpeed(target)); + else + location.href = '#' + id; + + }, + doPreviousScrollPoint = function(e) { + + var e, target, id; + + // Determine parent element. + e = scrollPointParent(event.target); + + if (!e) + return; + + // Find previous scroll point. + while (e && e.previousElementSibling) { + + e = e.previousElementSibling; + + if (e.dataset.scrollId) { + + target = e; + id = e.dataset.scrollId; + break; + + } + + } + + if (!target + || !id) + return; + + // Redirect. + if (target.dataset.scrollInvisible == '1') + scrollToElement(target, 'smooth', scrollPointSpeed(target)); + else + location.href = '#' + id; + + }, + doFirstScrollPoint = function(e) { + + var e, target, id; + + // Determine parent element. + e = scrollPointParent(event.target); + + if (!e) + return; + + // Find first scroll point. + while (e && e.previousElementSibling) { + + e = e.previousElementSibling; + + if (e.dataset.scrollId) { + + target = e; + id = e.dataset.scrollId; + + } + + } + + if (!target + || !id) + return; + + // Redirect. + if (target.dataset.scrollInvisible == '1') + scrollToElement(target, 'smooth', scrollPointSpeed(target)); + else + location.href = '#' + id; + + }, + doLastScrollPoint = function(e) { + + var e, target, id; + + // Determine parent element. + e = scrollPointParent(event.target); + + if (!e) + return; + + // Find last scroll point. + while (e && e.nextElementSibling) { + + e = e.nextElementSibling; + + if (e.dataset.scrollId) { + + target = e; + id = e.dataset.scrollId; + + } + + } + + if (!target + || !id) + return; + + // Redirect. + if (target.dataset.scrollInvisible == '1') + scrollToElement(target, 'smooth', scrollPointSpeed(target)); + else + location.href = '#' + id; + + }, + doNextSection = function() { + + var section; + + section = $('#main > .inner > section.active').nextElementSibling; + + if (!section || section.tagName != 'SECTION') + return; + + location.href = '#' + section.id.replace(/-section$/, ''); + + }, + doPreviousSection = function() { + + var section; + + section = $('#main > .inner > section.active').previousElementSibling; + + if (!section || section.tagName != 'SECTION') + return; + + location.href = '#' + (section.matches(':first-child') ? '' : section.id.replace(/-section$/, '')); + + }, + doFirstSection = function() { + + var section; + + section = $('#main > .inner > section:first-of-type'); + + if (!section || section.tagName != 'SECTION') + return; + + location.href = '#' + section.id.replace(/-section$/, ''); + + }, + doLastSection = function() { + + var section; + + section = $('#main > .inner > section:last-of-type'); + + if (!section || section.tagName != 'SECTION') + return; + + location.href = '#' + section.id.replace(/-section$/, ''); + + }, + resetSectionChangeElements = function(section) { + + var ee, e, x; + + // Get elements with data-reset-on-section-change attribute. + ee = section.querySelectorAll('[data-reset-on-section-change="1"]'); + + // Step through elements. + for (e of ee) { + + // Determine type. + x = e ? e.tagName : null; + + switch (x) { + + case 'FORM': + + // Reset. + e.reset(); + + break; + + default: + break; + + } + + } + + }, + activateSection = function(section, scrollPoint) { + + var sectionHeight, currentSection, currentSectionHeight, + name, hideHeader, hideFooter, disableAutoScroll, + ee, k; + + // Section already active? + if (!section.classList.contains('inactive')) { + + // Get options. + name = (section ? section.id.replace(/-section$/, '') : null); + disableAutoScroll = name ? ((name in sections) && ('disableAutoScroll' in sections[name]) && sections[name].disableAutoScroll) : false; + + // Scroll to scroll point (if applicable). + if (scrollPoint) + scrollToElement(scrollPoint, 'smooth', scrollPointSpeed(scrollPoint)); + + // Otherwise, just scroll to top (if not disabled for this section). + else if (!disableAutoScroll) + scrollToElement(null); + + // Bail. + return false; + + } + + // Otherwise, activate it. + else { + + // Lock. + locked = true; + + // Clear index URL hash. + if (location.hash == '#home') + history.replaceState(null, null, '#'); + + // Get options. + name = (section ? section.id.replace(/-section$/, '') : null); + hideHeader = name ? ((name in sections) && ('hideHeader' in sections[name]) && sections[name].hideHeader) : false; + hideFooter = name ? ((name in sections) && ('hideFooter' in sections[name]) && sections[name].hideFooter) : false; + disableAutoScroll = name ? ((name in sections) && ('disableAutoScroll' in sections[name]) && sections[name].disableAutoScroll) : false; + + // Deactivate current section. + + // Hide header and/or footer (if necessary). + + // Header. + if (header && hideHeader) { + + header.classList.add('hidden'); + header.style.display = 'none'; + + } + + // Footer. + if (footer && hideFooter) { + + footer.classList.add('hidden'); + footer.style.display = 'none'; + + } + + // Deactivate. + currentSection = $('#main > .inner > section:not(.inactive)'); + currentSection.classList.add('inactive'); + currentSection.classList.remove('active'); + currentSection.style.display = 'none'; + + // Unload elements. + unloadElements(currentSection); + + // Reset section change elements. + resetSectionChangeElements(currentSection); + + // Activate target section. + + // Show header and/or footer (if necessary). + + // Header. + if (header && !hideHeader) { + + header.style.display = ''; + header.classList.remove('hidden'); + + } + + // Footer. + if (footer && !hideFooter) { + + footer.style.display = ''; + footer.classList.remove('hidden'); + + } + + // Activate. + section.classList.remove('inactive'); + section.classList.add('active'); + section.style.display = ''; + + // Trigger 'resize' event. + trigger('resize'); + + // Load elements. + loadElements(section); + + // Scroll to scroll point (if applicable). + if (scrollPoint) + scrollToElement(scrollPoint, 'instant'); + + // Otherwise, just scroll to top (if not disabled for this section). + else if (!disableAutoScroll) + scrollToElement(null, 'instant'); + + // Unlock. + locked = false; + + } + + }, + sections = {}; + + // Expose doNextScrollPoint, doPreviousScrollPoint, doFirstScrollPoint, doLastScrollPoint. + window._nextScrollPoint = doNextScrollPoint; + window._previousScrollPoint = doPreviousScrollPoint; + window._firstScrollPoint = doFirstScrollPoint; + window._lastScrollPoint = doLastScrollPoint; + + // Expose doNextSection, doPreviousSection, doFirstSection, doLastSection. + window._nextSection = doNextSection; + window._previousSection = doPreviousSection; + window._firstSection = doFirstSection; + window._lastSection = doLastSection; + + // Override exposed scrollToTop. + window._scrollToTop = function() { + + var section, id; + + // Scroll to top. + scrollToElement(null); + + // Section active? + if (!!(section = $('section.active'))) { + + // Get name. + id = section.id.replace(/-section$/, ''); + + // Index section? Clear. + if (id == 'home') + id = ''; + + // Reset hash to section name (via new state). + history.pushState(null, null, '#' + id); + + } + + }; + + // Initialize. + + // Set scroll restoration to manual. + if ('scrollRestoration' in history) + history.scrollRestoration = 'manual'; + + // Header, footer. + header = $('#header'); + footer = $('#footer'); + + // Show initial section. + + // Determine target. + h = thisHash(); + + // Contains invalid characters? Might be a third-party hashbang, so ignore it. + if (h + && !h.match(/^[a-zA-Z0-9\-]+$/)) + h = null; + + // Scroll point. + if (e = $('[data-scroll-id="' + h + '"]')) { + + initialScrollPoint = e; + initialSection = initialScrollPoint.parentElement; + initialId = initialSection.id; + + } + + // Section. + else if (e = $('#' + (h ? h : 'home') + '-section')) { + + initialScrollPoint = null; + initialSection = e; + initialId = initialSection.id; + + } + + // Missing initial section? + if (!initialSection) { + + // Default to index. + initialScrollPoint = null; + initialSection = $('#' + 'home' + '-section'); + initialId = initialSection.id; + + // Clear index URL hash. + history.replaceState(undefined, undefined, '#'); + + } + + // Get options. + name = (h ? h : 'home'); + hideHeader = name ? ((name in sections) && ('hideHeader' in sections[name]) && sections[name].hideHeader) : false; + hideFooter = name ? ((name in sections) && ('hideFooter' in sections[name]) && sections[name].hideFooter) : false; + disableAutoScroll = name ? ((name in sections) && ('disableAutoScroll' in sections[name]) && sections[name].disableAutoScroll) : false; + + // Deactivate all sections (except initial). + + // Initially hide header and/or footer (if necessary). + + // Header. + if (header && hideHeader) { + + header.classList.add('hidden'); + header.style.display = 'none'; + + } + + // Footer. + if (footer && hideFooter) { + + footer.classList.add('hidden'); + footer.style.display = 'none'; + + } + + // Deactivate. + ee = $$('#main > .inner > section:not([id="' + initialId + '"])'); + + for (k = 0; k < ee.length; k++) { + + ee[k].className = 'inactive'; + ee[k].style.display = 'none'; + + } + + // Activate initial section. + initialSection.classList.add('active'); + + // Load elements. + loadElements(initialSection); + + if (header) + loadElements(header); + + if (footer) + loadElements(footer); + + // Scroll to top (if not disabled for this section). + if (!disableAutoScroll) + scrollToElement(null, 'instant'); + + // Load event. + on('load', function() { + + // Scroll to initial scroll point (if applicable). + if (initialScrollPoint) + scrollToElement(initialScrollPoint, 'instant'); + + }); + + // Hashchange event. + on('hashchange', function(event) { + + var section, scrollPoint, + h, e; + + // Lock. + if (locked) + return false; + + // Determine target. + h = thisHash(); + + // Contains invalid characters? Might be a third-party hashbang, so ignore it. + if (h + && !h.match(/^[a-zA-Z0-9\-]+$/)) + return false; + + // Scroll point. + if (e = $('[data-scroll-id="' + h + '"]')) { + + scrollPoint = e; + section = scrollPoint.parentElement; + + } + + // Section. + else if (e = $('#' + (h ? h : 'home') + '-section')) { + + scrollPoint = null; + section = e; + + } + + // Anything else. + else { + + // Default to index. + scrollPoint = null; + section = $('#' + 'home' + '-section'); + + // Clear index URL hash. + history.replaceState(undefined, undefined, '#'); + + } + + // No section? Bail. + if (!section) + return false; + + // Activate section. + activateSection(section, scrollPoint); + + return false; + + }); + + // Hack: Allow hashchange to trigger on click even if the target's href matches the current hash. + on('click', function(event) { + + var t = event.target, + tagName = t.tagName.toUpperCase(), + scrollPoint, section; + + // Find real target. + switch (tagName) { + + case 'IMG': + case 'SVG': + case 'USE': + case 'U': + case 'STRONG': + case 'EM': + case 'CODE': + case 'S': + case 'MARK': + case 'SPAN': + + // Find ancestor anchor tag. + while ( !!(t = t.parentElement) ) + if (t.tagName == 'A') + break; + + // Not found? Bail. + if (!t) + return; + + break; + + default: + break; + + } + + // Target is an anchor *and* its href is a hash? + if (t.tagName == 'A' + && t.getAttribute('href') !== null + && t.getAttribute('href').substr(0, 1) == '#') { + + // Hash matches an invisible scroll point? + if (!!(scrollPoint = $('[data-scroll-id="' + t.hash.substr(1) + '"][data-scroll-invisible="1"]'))) { + + // Prevent default. + event.preventDefault(); + + // Get section. + section = scrollPoint.parentElement; + + // Section is inactive? + if (section.classList.contains('inactive')) { + + // Reset hash to section name (via new state). + history.pushState(null, null, '#' + section.id.replace(/-section$/, '')); + + // Activate section. + activateSection(section, scrollPoint); + + } + + // Otherwise ... + else { + + // Scroll to scroll point. + scrollToElement(scrollPoint, 'smooth', scrollPointSpeed(scrollPoint)); + + } + + } + + // Hash matches the current hash? + else if (t.hash == window.location.hash) { + + // Prevent default. + event.preventDefault(); + + // Replace state with '#'. + history.replaceState(undefined, undefined, '#'); + + // Replace location with target hash. + location.replace(t.hash); + + } + + } + + }); + + })(); + + // Browser hacks. + // Init. + var style, sheet, rule; + + // Create