diff --git a/go.mod b/go.mod
index 88a6697..1a39232 100644
--- a/go.mod
+++ b/go.mod
@@ -5,6 +5,7 @@ go 1.13
require (
github.com/emvi/iso-639-1 v0.0.0-20190602002026-5ad2c26993cd
github.com/emvi/logbuch v0.0.0-20191002134629-fd76a46de20c
- github.com/mholt/certmagic v0.9.0 // indirect
- github.com/rs/cors v1.7.0 // indirect
+ github.com/gorilla/mux v1.7.3
+ github.com/mholt/certmagic v0.9.0
+ github.com/rs/cors v1.7.0
)
diff --git a/js/parts.js b/js/parts.js
new file mode 100644
index 0000000..5319ec0
--- /dev/null
+++ b/js/parts.js
@@ -0,0 +1,532 @@
+var offset = window.screen.width > 512 ? 20 : 10;
+
+var controller = new ScrollMagic.Controller();
+
+var part2 = new TweenMax.from("#part2", 1, {
+ x: "-100vw",
+ ease: Power2.easeOut
+});
+
+var part2Scene = new ScrollMagic.Scene({
+ triggerElement: "#rental",
+ duration: "250",
+})
+.setTween(part2)
+.addTo(controller);
+
+var part3 = new TweenMax.from("#part3", 1, {
+ x: "-100vw",
+ ease: Power2.easeOut
+});
+
+var part3Scene = new ScrollMagic.Scene({
+ triggerElement: "#rental",
+ duration: "250",
+ offset: this.offset
+})
+.setTween(part3)
+.addTo(controller);
+
+var part4 = new TweenMax.from("#part4", 1, {
+ x: "-100vw",
+ y: "100%",
+ rotation: 2,
+ ease: Power2.easeOut
+});
+
+var part4Scene = new ScrollMagic.Scene({
+ triggerElement: "#rental",
+ duration: "250",
+ offset: 2*this.offset
+})
+.setTween(part4)
+.addTo(controller);
+
+var part5 = new TweenMax.from("#part5", 1, {
+ x: "100vw",
+ ease: Power2.easeOut
+});
+
+var part5Scene = new ScrollMagic.Scene({
+ triggerElement: "#rental",
+ duration: "250"
+})
+.setTween(part5)
+.addTo(controller);
+
+var part6 = new TweenMax.from("#part6", 1, {
+ x: "100vw",
+ ease: Power2.easeOut
+});
+
+var part6Scene = new ScrollMagic.Scene({
+ triggerElement: "#rental",
+ duration: "250",
+ offset: 3*this.offset
+})
+.setTween(part6)
+.addTo(controller);
+
+var part7 = new TweenMax.from("#part7", 1, {
+ x: "100vw",
+ ease: Power2.easeOut
+});
+
+var part7Scene = new ScrollMagic.Scene({
+ triggerElement: "#rental",
+ duration: "250",
+ offset: 4*this.offset
+})
+.setTween(part7)
+.addTo(controller);
+
+var part8 = new TweenMax.from("#part8", 1, {
+ x: "-100vw",
+ y: "200%",
+ rotation: 4,
+ ease: Power2.easeOut
+});
+
+var part8Scene = new ScrollMagic.Scene({
+ triggerElement: "#rental",
+ duration: "250",
+ offset: 5*this.offset
+})
+.setTween(part8)
+.addTo(controller);
+
+var part9 = new TweenMax.from("#part9", 1, {
+ x: "-100vw",
+ y: "300%",
+ rotation: 4,
+ ease: Power2.easeOut
+});
+
+var part9Scene = new ScrollMagic.Scene({
+ triggerElement: "#rental",
+ duration: "250",
+ offset: 5*this.offset
+})
+.setTween(part9)
+.addTo(controller);
+
+var part10 = new TweenMax.from("#part10", 1, {
+ x: "100vw",
+ y: "600%",
+ rotation: -12,
+ ease: Power2.easeOut
+});
+
+var part10Scene = new ScrollMagic.Scene({
+ triggerElement: "#rental",
+ duration: "250",
+ offset: 6*this.offset
+})
+.setTween(part10)
+.addTo(controller);
+
+var part11 = new TweenMax.from("#part11", 1, {
+ x: "-100vw",
+ y: "800%",
+ rotation: 12,
+ ease: Power2.easeOut
+});
+
+var part11Scene = new ScrollMagic.Scene({
+ triggerElement: "#rental",
+ duration: "250",
+ offset: 7*this.offset
+})
+.setTween(part11)
+.addTo(controller);
+
+var part12 = new TweenMax.from("#part12", 1, {
+ x: "100vw",
+ y: "500%",
+ rotation: -16,
+ ease: Power2.easeOut
+});
+
+var part12Scene = new ScrollMagic.Scene({
+ triggerElement: "#rental",
+ duration: "250",
+ offset: 8*this.offset
+})
+.setTween(part12)
+.addTo(controller);
+
+var part13 = new TweenMax.from("#part13", 1, {
+ x: "100vw",
+ y: "400%",
+ rotation: -24,
+ ease: Power2.easeOut
+});
+
+var part13Scene = new ScrollMagic.Scene({
+ triggerElement: "#rental",
+ duration: "250",
+ offset: 9*this.offset
+})
+.setTween(part13)
+.addTo(controller);
+
+var part14 = new TweenMax.from("#part14", 1, {
+ x: "-100vw",
+ y: "400%",
+ rotation: 24,
+ ease: Power2.easeOut
+});
+
+var part14Scene = new ScrollMagic.Scene({
+ triggerElement: "#rental",
+ duration: "250",
+ offset: 10*this.offset
+})
+.setTween(part14)
+.addTo(controller);
+
+var part15 = new TweenMax.from("#part15", 1, {
+ x: "-100vw",
+ y: "400%",
+ rotation: 24,
+ ease: Power2.easeOut
+});
+
+var part15Scene = new ScrollMagic.Scene({
+ triggerElement: "#rental",
+ duration: "250",
+ offset: 11*this.offset
+})
+.setTween(part15)
+.addTo(controller);
+
+var part16 = new TweenMax.from("#part16", 1, {
+ x: "100vw",
+ y: "400%",
+ rotation: 24,
+ ease: Power2.easeOut
+});
+
+var part16Scene = new ScrollMagic.Scene({
+ triggerElement: "#rental",
+ duration: "250",
+ offset: 12*this.offset
+})
+.setTween(part16)
+.addTo(controller);
+
+var part17 = new TweenMax.from("#part17", 1, {
+ x: "-100vw",
+ y: "400%",
+ rotation: 24,
+ ease: Power2.easeOut
+});
+
+var part17Scene = new ScrollMagic.Scene({
+ triggerElement: "#rental",
+ duration: "250",
+ offset: 13*this.offset
+})
+.setTween(part17)
+.addTo(controller);
+
+var part181 = new TweenMax.from("#part18-1", 1, {
+ x: "100vw",
+ y: "800%",
+ rotation: -32,
+ ease: Power2.easeOut
+});
+
+var part181Scene = new ScrollMagic.Scene({
+ triggerElement: "#rental",
+ duration: "250",
+ offset: 14*this.offset
+})
+.setTween(part181)
+.addTo(controller);
+
+var part182 = new TweenMax.from("#part18-2", 1, {
+ x: "100vw",
+ y: "800%",
+ rotation: -32,
+ ease: Power2.easeOut
+});
+
+var part182Scene = new ScrollMagic.Scene({
+ triggerElement: "#rental",
+ duration: "250",
+ offset: 15*this.offset
+})
+.setTween(part182)
+.addTo(controller);
+
+var part191 = new TweenMax.from("#part19-1", 1, {
+ x: "-100vw",
+ y: "800%",
+ rotation: 32,
+ ease: Power2.easeOut
+});
+
+var part191Scene = new ScrollMagic.Scene({
+ triggerElement: "#rental",
+ duration: "250",
+ offset: 16*this.offset
+})
+.setTween(part191)
+.addTo(controller);
+
+var part192 = new TweenMax.from("#part19-2", 1, {
+ x: "-100vw",
+ y: "800%",
+ rotation: 32,
+ ease: Power2.easeOut
+});
+
+var part192Scene = new ScrollMagic.Scene({
+ triggerElement: "#rental",
+ duration: "250",
+ offset: 18*this.offset
+})
+.setTween(part192)
+.addTo(controller);
+
+var part20 = new TweenMax.from("#part20", 1, {
+ x: "100vw",
+ y: "800%",
+ rotation: -32,
+ ease: Power2.easeOut
+});
+
+var part20Scene = new ScrollMagic.Scene({
+ triggerElement: "#rental",
+ duration: "250",
+ offset: 19*this.offset
+})
+.setTween(part20)
+.addTo(controller);
+
+var part21 = new TweenMax.from("#part21", 1, {
+ x: "-100vw",
+ y: "800%",
+ rotation: 32,
+ ease: Power2.easeOut
+});
+
+var part21Scene = new ScrollMagic.Scene({
+ triggerElement: "#rental",
+ duration: "250",
+ offset: 20*this.offset
+})
+.setTween(part21)
+.addTo(controller);
+
+var part22 = new TweenMax.from("#part22", 1, {
+ x: "100vw",
+ y: "800%",
+ rotation: -32,
+ ease: Power2.easeOut
+});
+
+var part22Scene = new ScrollMagic.Scene({
+ triggerElement: "#rental",
+ duration: "250",
+ offset: 21*this.offset
+})
+.setTween(part22)
+.addTo(controller);
+
+var part23 = new TweenMax.from("#part23", 1, {
+ x: "-100vw",
+ y: "2400%",
+ rotation: 32,
+ ease: Power2.easeOut
+});
+
+var part23Scene = new ScrollMagic.Scene({
+ triggerElement: "#rental",
+ duration: "250",
+ offset: 22*this.offset
+})
+.setTween(part23)
+.addTo(controller);
+
+var part24 = new TweenMax.from("#part24", 1, {
+ x: "100vw",
+ y: "1000%",
+ rotation: -32,
+ ease: Power2.easeOut
+});
+
+var part24Scene = new ScrollMagic.Scene({
+ triggerElement: "#rental",
+ duration: "250",
+ offset: 23*this.offset
+})
+.setTween(part24)
+.addTo(controller);
+
+var part25 = new TweenMax.from("#part25", 1, {
+ x: "-100vw",
+ y: "1000%",
+ rotation: 32,
+ ease: Power2.easeOut
+});
+
+var part25Scene = new ScrollMagic.Scene({
+ triggerElement: "#rental",
+ duration: "250",
+ offset: 24*this.offset
+})
+.setTween(part25)
+.addTo(controller);
+
+var part26 = new TweenMax.from("#part26", 1, {
+ x: "100vw",
+ y: "1000%",
+ rotation: -32,
+ ease: Power2.easeOut
+});
+
+var part26Scene = new ScrollMagic.Scene({
+ triggerElement: "#rental",
+ duration: "250",
+ offset: 25*this.offset
+})
+.setTween(part26)
+.addTo(controller);
+
+var part27 = new TweenMax.from("#part27", 1, {
+ x: "-100vw",
+ y: "1600%",
+ rotation: 32,
+ ease: Power2.easeOut
+});
+
+var part27Scene = new ScrollMagic.Scene({
+ triggerElement: "#rental",
+ duration: "250",
+ offset: 26*this.offset
+})
+.setTween(part27)
+.addTo(controller);
+
+var part28 = new TweenMax.from("#part28", 1, {
+ x: "100vw",
+ y: "1600%",
+ rotation: -32,
+ ease: Power2.easeOut
+});
+
+var part28Scene = new ScrollMagic.Scene({
+ triggerElement: "#rental",
+ duration: "250",
+ offset: 33*this.offset
+})
+.setTween(part28)
+.addTo(controller);
+
+var part291 = new TweenMax.from("#part29-1", 1, {
+ x: "-100vw",
+ y: "1600%",
+ rotation: 32,
+ ease: Power2.easeOut
+});
+
+var part291Scene = new ScrollMagic.Scene({
+ triggerElement: "#rental",
+ duration: "250",
+ offset: 32*this.offset
+})
+.setTween(part291)
+.addTo(controller);
+
+var part292 = new TweenMax.from("#part29-2", 1, {
+ x: "-100vw",
+ y: "1600%",
+ rotation: 32,
+ ease: Power2.easeOut
+});
+
+var part292Scene = new ScrollMagic.Scene({
+ triggerElement: "#rental",
+ duration: "250",
+ offset: 31*this.offset
+})
+.setTween(part292)
+.addTo(controller);
+
+var part30 = new TweenMax.from("#part30", 1, {
+ x: "100vw",
+ y: "1600%",
+ rotation: -32,
+ ease: Power2.easeOut
+});
+
+var part30Scene = new ScrollMagic.Scene({
+ triggerElement: "#rental",
+ duration: "250",
+ offset: 34*this.offset
+})
+.setTween(part30)
+.addTo(controller);
+
+var part311 = new TweenMax.from("#part31-1", 1, {
+ x: "-100vw",
+ y: "3200%",
+ rotation: 32,
+ ease: Power2.easeOut
+});
+
+var part311Scene = new ScrollMagic.Scene({
+ triggerElement: "#rental",
+ duration: "250",
+ offset: 30*this.offset
+})
+.setTween(part311)
+.addTo(controller);
+
+var part312 = new TweenMax.from("#part31-2", 1, {
+ x: "-100vw",
+ y: "3200%",
+ rotation: 32,
+ ease: Power2.easeOut
+});
+
+var part312Scene = new ScrollMagic.Scene({
+ triggerElement: "#rental",
+ duration: "250",
+ offset: 29*this.offset
+})
+.setTween(part312)
+.addTo(controller);
+
+var part321 = new TweenMax.from("#part32-1", 1, {
+ x: "-100vw",
+ y: "3200%",
+ rotation: 32,
+ ease: Power2.easeOut
+});
+
+var part321Scene = new ScrollMagic.Scene({
+ triggerElement: "#rental",
+ duration: "250",
+ offset: 28*this.offset
+})
+.setTween(part321)
+.addTo(controller);
+
+var part322 = new TweenMax.from("#part32-2", 1, {
+ x: "-100vw",
+ y: "3200%",
+ rotation: 32,
+ ease: Power2.easeOut
+});
+
+var part322Scene = new ScrollMagic.Scene({
+ triggerElement: "#rental",
+ duration: "250",
+ offset: 27*this.offset
+})
+.setTween(part322)
+.addTo(controller);
+
diff --git a/main.go b/main.go
index 3a9699a..18b66ae 100644
--- a/main.go
+++ b/main.go
@@ -16,6 +16,8 @@ import (
const (
staticDir = "static"
staticDirPrefix = "/static/"
+ jsDir = "js"
+ jsDirPrefix = "/js/"
envPrefix = "SCHNITTFEST_"
pwdString = "PASSWORD" // do not log passwords!
@@ -63,6 +65,16 @@ func setupRouter() *mux.Router {
fs.ServeHTTP(w, r)
}).Methods("GET")
+ // js
+ js := http.StripPrefix(jsDirPrefix, http.FileServer(http.Dir(jsDir)))
+ router.PathPrefix(jsDirPrefix).HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+ if !disableCache {
+ w.Header().Add("Cache-Control", "max-age=3600")
+ }
+
+ js.ServeHTTP(w, r)
+ }).Methods("GET")
+
// pages
router.HandleFunc("/", pages.LandingPageHandler).Methods("GET")
diff --git a/static/blank.png b/static/blank.png
new file mode 100644
index 0000000..5287762
Binary files /dev/null and b/static/blank.png differ
diff --git a/static/main.css b/static/main.css
index 853a7b5..9be9b30 100644
--- a/static/main.css
+++ b/static/main.css
@@ -1 +1 @@
-html,body,div,span,applet,object,iframe,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,input,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,button,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,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:none;font:inherit;color:var(--black-100);text-decoration:none;vertical-align:baseline;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}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}textarea:focus,input:focus,button:focus{outline:none}.container{max-width:1600px;width:100%;margin-right:auto;margin-left:auto;padding:0 32px;position:relative;box-sizing:border-box}.row{box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}.row.reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.col.reverse{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.col-xs,.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-offset-0,.col-xs-offset-1,.col-xs-offset-2,.col-xs-offset-3,.col-xs-offset-4,.col-xs-offset-5,.col-xs-offset-6,.col-xs-offset-7,.col-xs-offset-8,.col-xs-offset-9,.col-xs-offset-10,.col-xs-offset-11,.col-xs-offset-12{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.col-xs{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-xs-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-xs-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-xs-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-xs-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-xs-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-xs-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-xs-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-xs-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-xs-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-xs-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-xs-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-xs-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-xs-offset-0{margin-left:0}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-11{margin-left:91.66666667%}.start-xs{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-xs{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-xs{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-xs{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-xs{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-xs{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-xs{-ms-flex-pack:distribute;justify-content:space-around}.between-xs{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-xs{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-xs{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}@media only screen and (max-width: 511px){.hide-xs{display:none !important}}@media only screen and (min-width: 512px){.col-sm,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-offset-0,.col-sm-offset-1,.col-sm-offset-2,.col-sm-offset-3,.col-sm-offset-4,.col-sm-offset-5,.col-sm-offset-6,.col-sm-offset-7,.col-sm-offset-8,.col-sm-offset-9,.col-sm-offset-10,.col-sm-offset-11,.col-sm-offset-12{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.col-sm{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-sm-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-sm-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-sm-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-sm-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-sm-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-sm-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-sm-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-sm-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-sm-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-sm-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-sm-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-sm-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-sm-offset-0{margin-left:0}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-11{margin-left:91.66666667%}.start-sm{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-sm{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-sm{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-sm{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-sm{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-sm{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-sm{-ms-flex-pack:distribute;justify-content:space-around}.between-sm{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-sm{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-sm{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.show-xs{display:none !important}}@media only screen and (max-width: 785px){.hide-sm{display:none !important}}@media only screen and (min-width: 786px){.col-md,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-md-offset-0,.col-md-offset-1,.col-md-offset-2,.col-md-offset-3,.col-md-offset-4,.col-md-offset-5,.col-md-offset-6,.col-md-offset-7,.col-md-offset-8,.col-md-offset-9,.col-md-offset-10,.col-md-offset-11,.col-md-offset-12{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.col-md{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-md-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-md-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-md-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-md-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-md-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-md-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-md-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-md-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-md-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-md-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-md-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-md-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-md-offset-0{margin-left:0}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-3{margin-left:25%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-6{margin-left:50%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-9{margin-left:75%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-11{margin-left:91.66666667%}.start-md{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-md{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-md{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-md{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-md{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-md{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-md{-ms-flex-pack:distribute;justify-content:space-around}.between-md{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-md{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-md{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.show-sm{display:none !important}}@media only screen and (max-width: 1023px){.hide-md{display:none !important}}@media only screen and (min-width: 1024px){.col-lg,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-offset-0,.col-lg-offset-1,.col-lg-offset-2,.col-lg-offset-3,.col-lg-offset-4,.col-lg-offset-5,.col-lg-offset-6,.col-lg-offset-7,.col-lg-offset-8,.col-lg-offset-9,.col-lg-offset-10,.col-lg-offset-11,.col-lg-offset-12{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.col-lg{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-lg-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-lg-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-lg-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-lg-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-lg-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-lg-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-lg-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-lg-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-lg-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-lg-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-lg-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-lg-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-lg-offset-0{margin-left:0}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-11{margin-left:91.66666667%}.start-lg{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-lg{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-lg{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-lg{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-lg{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-lg{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-lg{-ms-flex-pack:distribute;justify-content:space-around}.between-lg{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-lg{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-lg{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.show-md{display:none !important}}html{background-color:black;font-family:"Manrope", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";--beige: #F7EEE0;--yellow: #FEBB28;--orange: #FE6732;--red: #F5303C;--pink: #CE2867;--purple: #571B47}h1,h2,h3,p{margin-block-start:0;margin-block-end:0}h1,h2,h3{font-weight:700;line-height:1.1;letter-spacing:-2%}h1{font-size:80px}h2{font-size:64px}h3{font-size:48px}p{font-size:20px;font-weight:500;line-height:1.4}button{font-size:18px;font-weight:600;padding:23px 32px;cursor:pointer;transition:background-color 0.2s ease-in-out}.bg-white{background-color:white}.bg-beige{background-color:var(--beige)}.bg-yellow{background-color:var(--yellow)}.bg-orange{background-color:var(--orange)}.bg-red{background-color:var(--red)}.bg-pink{background-color:var(--pink)}.bg-purple{background-color:var(--purple)}.bg-black{background-color:black}.p-t-l,.p-b-l{padding-top:256px}.p-b-l{padding-bottom:256px}.header{position:fixed;top:0;left:0;right:0;height:96px;color:white;z-index:100}.header .container{height:100%;display:flex;align-items:center}.header .container img{cursor:pointer}.header .container ul{display:flex;flex:1;justify-content:flex-end;text-align:right}.header .container ul li{margin-left:64px;font-size:18px;font-weight:600;cursor:pointer;transition:color 0.2s ease-in-out}.header .container ul li:nth-of-type(1):hover{color:var(--yellow)}.header .container ul li:nth-of-type(2):hover{color:var(--orange)}.header .container ul li:nth-of-type(3):hover{color:var(--red)}.header .container ul li:nth-of-type(4):hover{color:var(--pink)}.section-start .hero{max-height:320px;padding-right:64px}.section-start h1{height:192px;max-height:192px;margin-bottom:64px;color:white}.section-start button.primary{color:black;background-color:var(--yellow);margin-right:32px}.section-start button.primary:hover{background-color:var(--orange)}.section-start button.secondary{color:var(--yellow);background-color:var(--purple)}.section-start button.secondary:hover{background-color:var(--pink)}.section-start .stripe{display:flex;flex-direction:column;flex:1}.section-start .stripe div{height:64px;width:100%}.section-work h2{position:sticky;top:256px;color:white;writing-mode:vertical-lr;-webkit-text-orientation:mixed;text-orientation:mixed}.section-work .videos>div{margin-bottom:64px}.section-work .videos>div:last-of-type{margin:0}.section-service .square{padding:64px}.section-service h3{color:white;margin-bottom:32px}.section-service button{display:inline-flex;color:white;background-color:var(--purple);margin-top:64px}.section-service button:hover{background-color:var(--pink)}
+html,body,div,span,applet,object,iframe,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,input,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,button,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,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:none;font:inherit;color:var(--black-100);text-decoration:none;vertical-align:baseline;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}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}textarea:focus,input:focus,button:focus{outline:none}.container{max-width:1600px;width:100%;margin-right:auto;margin-left:auto;padding:0 32px;position:relative;box-sizing:border-box}.row{box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}.row.reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.col.reverse{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.col-xs,.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-offset-0,.col-xs-offset-1,.col-xs-offset-2,.col-xs-offset-3,.col-xs-offset-4,.col-xs-offset-5,.col-xs-offset-6,.col-xs-offset-7,.col-xs-offset-8,.col-xs-offset-9,.col-xs-offset-10,.col-xs-offset-11,.col-xs-offset-12{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.col-xs{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-xs-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-xs-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-xs-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-xs-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-xs-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-xs-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-xs-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-xs-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-xs-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-xs-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-xs-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-xs-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-xs-offset-0{margin-left:0}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-11{margin-left:91.66666667%}.start-xs{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-xs{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-xs{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-xs{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-xs{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-xs{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-xs{-ms-flex-pack:distribute;justify-content:space-around}.between-xs{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-xs{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-xs{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}@media only screen and (max-width: 511px){.hide-xs{display:none !important}}@media only screen and (min-width: 512px){.col-sm,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-offset-0,.col-sm-offset-1,.col-sm-offset-2,.col-sm-offset-3,.col-sm-offset-4,.col-sm-offset-5,.col-sm-offset-6,.col-sm-offset-7,.col-sm-offset-8,.col-sm-offset-9,.col-sm-offset-10,.col-sm-offset-11,.col-sm-offset-12{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.col-sm{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-sm-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-sm-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-sm-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-sm-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-sm-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-sm-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-sm-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-sm-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-sm-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-sm-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-sm-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-sm-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-sm-offset-0{margin-left:0}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-11{margin-left:91.66666667%}.start-sm{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-sm{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-sm{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-sm{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-sm{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-sm{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-sm{-ms-flex-pack:distribute;justify-content:space-around}.between-sm{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-sm{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-sm{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.show-xs{display:none !important}}@media only screen and (max-width: 785px){.hide-sm{display:none !important}}@media only screen and (min-width: 786px){.col-md,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-md-offset-0,.col-md-offset-1,.col-md-offset-2,.col-md-offset-3,.col-md-offset-4,.col-md-offset-5,.col-md-offset-6,.col-md-offset-7,.col-md-offset-8,.col-md-offset-9,.col-md-offset-10,.col-md-offset-11,.col-md-offset-12{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.col-md{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-md-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-md-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-md-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-md-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-md-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-md-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-md-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-md-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-md-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-md-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-md-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-md-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-md-offset-0{margin-left:0}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-3{margin-left:25%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-6{margin-left:50%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-9{margin-left:75%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-11{margin-left:91.66666667%}.start-md{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-md{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-md{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-md{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-md{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-md{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-md{-ms-flex-pack:distribute;justify-content:space-around}.between-md{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-md{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-md{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.show-sm{display:none !important}}@media only screen and (max-width: 1023px){.hide-md{display:none !important}}@media only screen and (min-width: 1024px){.col-lg,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-offset-0,.col-lg-offset-1,.col-lg-offset-2,.col-lg-offset-3,.col-lg-offset-4,.col-lg-offset-5,.col-lg-offset-6,.col-lg-offset-7,.col-lg-offset-8,.col-lg-offset-9,.col-lg-offset-10,.col-lg-offset-11,.col-lg-offset-12{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.col-lg{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-lg-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-lg-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-lg-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-lg-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-lg-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-lg-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-lg-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-lg-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-lg-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-lg-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-lg-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-lg-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-lg-offset-0{margin-left:0}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-11{margin-left:91.66666667%}.start-lg{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-lg{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-lg{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-lg{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-lg{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-lg{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-lg{-ms-flex-pack:distribute;justify-content:space-around}.between-lg{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-lg{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-lg{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.show-md{display:none !important}}html{background-color:black;font-family:"Manrope", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";--beige: #F7EEE0;--yellow: #FEBB28;--orange: #FE6732;--red: #F5303C;--pink: #CE2867;--purple: #571B47}body{overflow-x:hidden}h1,h2,h3,p{margin-block-start:0;margin-block-end:0}h1,h2,h3{font-weight:700;line-height:1.1;letter-spacing:-2%}h1{font-size:80px}h2{font-size:64px}h3{font-size:48px}p{font-size:20px;font-weight:500;line-height:1.4}button{font-size:18px;font-weight:600;padding:23px 32px;cursor:pointer;transition:background-color 0.2s ease-in-out}.bg-white{background-color:white}.bg-beige{background-color:var(--beige)}.bg-yellow{background-color:var(--yellow)}.bg-orange{background-color:var(--orange)}.bg-red{background-color:var(--red)}.bg-pink{background-color:var(--pink)}.bg-purple{background-color:var(--purple)}.bg-black{background-color:black}.p-t-l{padding-top:192px}.p-b-l{padding-bottom:192px}.header{position:fixed;top:0;left:0;right:0;height:96px;color:white;z-index:100}.header .container{height:100%;display:flex;align-items:center}.header .container img{cursor:pointer}.header .container ul{display:flex;flex:1;justify-content:flex-end;text-align:right}.header .container ul li{margin-left:64px;font-size:18px;font-weight:600;cursor:pointer;transition:color 0.2s ease-in-out}.header .container ul li:nth-of-type(1):hover{color:var(--yellow)}.header .container ul li:nth-of-type(2):hover{color:var(--orange)}.header .container ul li:nth-of-type(3):hover{color:var(--red)}.header .container ul li:nth-of-type(4):hover{color:var(--pink)}.section-start .hero{max-height:320px;padding-right:64px}.section-start h1{height:192px;max-height:192px;margin-bottom:64px;color:white}.section-start button.primary{color:black;background-color:var(--yellow);margin-right:32px}.section-start button.primary:hover{background-color:var(--orange)}.section-start button.secondary{color:var(--beige);background-color:var(--purple)}.section-start button.secondary:hover{background-color:var(--pink)}.section-start .stripe{display:flex;flex-direction:column;flex:1}.section-start .stripe div{height:64px;width:100%}.section-work h2{position:sticky;top:256px;color:white;writing-mode:vertical-lr;-webkit-text-orientation:mixed;text-orientation:mixed}.section-work .videos>div{margin-bottom:64px}.section-work .videos>div:last-of-type{margin:0}.section-service .square{padding:64px}.section-service h3{color:white;margin-bottom:32px}.section-service button{display:inline-flex;color:white;background-color:var(--purple);margin-top:64px}.section-service button:hover{background-color:var(--pink)}.section-rental{overflow:hidden}.section-rental .parts{position:relative;max-width:720px;min-height:256px;margin:0 auto}.section-rental .parts img:not(#part0){position:absolute;filter:contrast(1.3) saturate(0.6) sepia(0.1)}.section-rental .parts #part0{width:100%}.section-rental .parts #part1{width:29%;left:34%}.section-rental .parts #part2{width:8.5%;left:24%;margin-top:2%}.section-rental .parts #part3{width:19%;left:0;margin-top:2%}.section-rental .parts #part4{width:17%;left:2%;margin-top:15%}.section-rental .parts #part5{width:5.5%;left:70%;margin-top:9%}.section-rental .parts #part6{width:22%;left:64%;margin-top:1%}.section-rental .parts #part7{width:12.5%;left:87.5%;margin-top:1%}.section-rental .parts #part8{width:37%;left:30%;margin-top:28%}.section-rental .parts #part9{width:22.5%;left:0;margin-top:28%}.section-rental .parts #part10{width:49%;left:20%;margin-top:40%}.section-rental .parts #part11{width:14%;left:2%;margin-top:36%}.section-rental .parts #part12{width:27%;left:72%;margin-top:31%}.section-rental .parts #part13{width:24%;left:48%;margin-top:48%}.section-rental .parts #part14{width:19%;left:24%;margin-top:48%}.section-rental .parts #part15{width:4.5%;left:15%;margin-top:47%}.section-rental .parts #part16{width:24%;left:75%;margin-top:48%}.section-rental .parts #part17{width:7.5%;left:2%;margin-top:44%}.section-rental .parts #part18-1{width:14%;left:46%;margin-top:72%}.section-rental .parts #part18-2{width:14%;left:46%;margin-top:86%}.section-rental .parts #part19-1{width:17%;left:22%;margin-top:70%}.section-rental .parts #part19-2{width:17%;left:22%;margin-top:84%}.section-rental .parts #part20{width:13.5%;left:66%;margin-top:73%}.section-rental .parts #part21{width:11.5%;left:6%;margin-top:73%}.section-rental .parts #part22{width:13.5%;left:84%;margin-top:73%}.section-rental .parts #part23{width:28%;left:22%;margin-top:102%}.section-rental .parts #part24{width:37.5%;left:60%;margin-top:100%}.section-rental .parts #part25{width:20%;left:14%;margin-top:105%}.section-rental .parts #part26{width:40%;left:43%;margin-top:106%}.section-rental .parts #part27{width:22.5%;left:20%;margin-top:115%}.section-rental .parts #part28{width:22%;left:47%;margin-top:130%}.section-rental .parts #part29-1{width:3%;left:4%;margin-top:106%}.section-rental .parts #part29-2{width:3%;left:8%;margin-top:106%}.section-rental .parts #part30{width:19%;left:70%;margin-top:116%}.section-rental .parts #part31-1{width:2.5%;left:13%;margin-top:125.5%}.section-rental .parts #part31-2{width:2.5%;left:16%;margin-top:125.5%}.section-rental .parts #part32-1{width:2.75%;left:20%;margin-top:126%}.section-rental .parts #part32-2{width:2.75%;left:24%;margin-top:126%}
diff --git a/static/part1.png b/static/part1.png
new file mode 100644
index 0000000..4571c95
Binary files /dev/null and b/static/part1.png differ
diff --git a/static/part10.png b/static/part10.png
new file mode 100644
index 0000000..7df24d9
Binary files /dev/null and b/static/part10.png differ
diff --git a/static/part11.png b/static/part11.png
new file mode 100644
index 0000000..481eff7
Binary files /dev/null and b/static/part11.png differ
diff --git a/static/part12.png b/static/part12.png
new file mode 100644
index 0000000..42b8182
Binary files /dev/null and b/static/part12.png differ
diff --git a/static/part13.png b/static/part13.png
new file mode 100644
index 0000000..fd7cbac
Binary files /dev/null and b/static/part13.png differ
diff --git a/static/part14.png b/static/part14.png
new file mode 100644
index 0000000..49c4ab1
Binary files /dev/null and b/static/part14.png differ
diff --git a/static/part15.png b/static/part15.png
new file mode 100644
index 0000000..7546f52
Binary files /dev/null and b/static/part15.png differ
diff --git a/static/part16.png b/static/part16.png
new file mode 100644
index 0000000..e7c2373
Binary files /dev/null and b/static/part16.png differ
diff --git a/static/part17.png b/static/part17.png
new file mode 100644
index 0000000..ccf661f
Binary files /dev/null and b/static/part17.png differ
diff --git a/static/part18.png b/static/part18.png
new file mode 100644
index 0000000..055b12c
Binary files /dev/null and b/static/part18.png differ
diff --git a/static/part19.png b/static/part19.png
new file mode 100644
index 0000000..9ffee42
Binary files /dev/null and b/static/part19.png differ
diff --git a/static/part2.png b/static/part2.png
new file mode 100644
index 0000000..9df1eb7
Binary files /dev/null and b/static/part2.png differ
diff --git a/static/part20.png b/static/part20.png
new file mode 100644
index 0000000..18b2282
Binary files /dev/null and b/static/part20.png differ
diff --git a/static/part21.png b/static/part21.png
new file mode 100644
index 0000000..1a94b30
Binary files /dev/null and b/static/part21.png differ
diff --git a/static/part22.png b/static/part22.png
new file mode 100644
index 0000000..b946c65
Binary files /dev/null and b/static/part22.png differ
diff --git a/static/part23.png b/static/part23.png
new file mode 100644
index 0000000..d650d7f
Binary files /dev/null and b/static/part23.png differ
diff --git a/static/part24.png b/static/part24.png
new file mode 100644
index 0000000..8e0a07a
Binary files /dev/null and b/static/part24.png differ
diff --git a/static/part25.png b/static/part25.png
new file mode 100644
index 0000000..98958b0
Binary files /dev/null and b/static/part25.png differ
diff --git a/static/part26.png b/static/part26.png
new file mode 100644
index 0000000..a5dc5f6
Binary files /dev/null and b/static/part26.png differ
diff --git a/static/part27.png b/static/part27.png
new file mode 100644
index 0000000..4bf3161
Binary files /dev/null and b/static/part27.png differ
diff --git a/static/part28.png b/static/part28.png
new file mode 100644
index 0000000..6c91c11
Binary files /dev/null and b/static/part28.png differ
diff --git a/static/part29.png b/static/part29.png
new file mode 100644
index 0000000..fb4118d
Binary files /dev/null and b/static/part29.png differ
diff --git a/static/part3.png b/static/part3.png
new file mode 100644
index 0000000..82084d3
Binary files /dev/null and b/static/part3.png differ
diff --git a/static/part30.png b/static/part30.png
new file mode 100644
index 0000000..49e2de4
Binary files /dev/null and b/static/part30.png differ
diff --git a/static/part31.png b/static/part31.png
new file mode 100644
index 0000000..65a5bf8
Binary files /dev/null and b/static/part31.png differ
diff --git a/static/part32.png b/static/part32.png
new file mode 100644
index 0000000..7d69679
Binary files /dev/null and b/static/part32.png differ
diff --git a/static/part4.png b/static/part4.png
new file mode 100644
index 0000000..fca28ea
Binary files /dev/null and b/static/part4.png differ
diff --git a/static/part5.png b/static/part5.png
new file mode 100644
index 0000000..af9070a
Binary files /dev/null and b/static/part5.png differ
diff --git a/static/part6.png b/static/part6.png
new file mode 100644
index 0000000..db713ca
Binary files /dev/null and b/static/part6.png differ
diff --git a/static/part7.png b/static/part7.png
new file mode 100644
index 0000000..6a55e56
Binary files /dev/null and b/static/part7.png differ
diff --git a/static/part8.png b/static/part8.png
new file mode 100644
index 0000000..93902b9
Binary files /dev/null and b/static/part8.png differ
diff --git a/static/part9.png b/static/part9.png
new file mode 100644
index 0000000..809438e
Binary files /dev/null and b/static/part9.png differ
diff --git a/style/sass/main.scss b/style/sass/main.scss
index 5a07cfe..e5172bf 100644
--- a/style/sass/main.scss
+++ b/style/sass/main.scss
@@ -13,6 +13,10 @@ html {
--purple: #571B47;
}
+body {
+ overflow-x: hidden;
+}
+
h1, h2, h3, p {
margin-block-start: 0;
margin-block-end: 0;
@@ -85,15 +89,15 @@ button {
}
.p { // padding
- &-t, &-b { // top
+ &-t { // top
&-l { // large
- padding-top: 256px;
+ padding-top: 192px;
}
}
&-b { // bottom
&-l { // large
- padding-bottom: 256px;
+ padding-bottom: 192px;
}
}
}
@@ -173,7 +177,7 @@ button {
}
button.secondary {
- color: var(--yellow);
+ color: var(--beige);
background-color: var(--purple);
&:hover {
@@ -233,3 +237,244 @@ button {
}
}
}
+
+.section-rental {
+ overflow: hidden;
+
+ .parts {
+ position: relative;
+ max-width: 720px;
+ min-height: 256px;
+ margin: 0 auto;
+
+ img:not(#part0) {
+ position: absolute;
+ filter: contrast(1.3) saturate(0.6) sepia(0.1);
+ }
+
+ #part0 {
+ width: 100%;
+ }
+
+ #part1 {
+ width: 29%;
+ left: 34%;
+ }
+
+ #part2 {
+ width: 8.5%;
+ left: 24%;
+ margin-top: 2%;
+ }
+
+ #part3 {
+ width: 19%;
+ left: 0;
+ margin-top: 2%;
+ }
+
+ #part4 {
+ width: 17%;
+ left: 2%;
+ margin-top: 15%;
+ }
+
+ #part5 {
+ width: 5.5%;
+ left: 70%;
+ margin-top: 9%;
+ }
+
+ #part6 {
+ width: 22%;
+ left: 64%;
+ margin-top: 1%;
+ }
+
+ #part7 {
+ width: 12.5%;
+ left: 87.5%;
+ margin-top: 1%;
+ }
+
+ #part8 {
+ width: 37%;
+ left: 30%;
+ margin-top: 28%;
+ }
+
+ #part9 {
+ width: 22.5%;
+ left: 0;
+ margin-top: 28%;
+ }
+
+ #part10 {
+ width: 49%;
+ left: 20%;
+ margin-top: 40%;
+ }
+
+ #part11 {
+ width: 14%;
+ left: 2%;
+ margin-top: 36%;
+ }
+
+ #part12 {
+ width: 27%;
+ left: 72%;
+ margin-top: 31%;
+ }
+
+ #part13 {
+ width: 24%;
+ left: 48%;
+ margin-top: 48%;
+ }
+
+ #part14 {
+ width: 19%;
+ left: 24%;
+ margin-top: 48%;
+ }
+
+ #part15 {
+ width: 4.5%;
+ left: 15%;
+ margin-top: 47%;
+ }
+
+ #part16 {
+ width: 24%;
+ left: 75%;
+ margin-top: 48%;
+ }
+
+ #part17 {
+ width: 7.5%;
+ left: 2%;
+ margin-top: 44%;
+ }
+
+ #part18-1 {
+ width: 14%;
+ left: 46%;
+ margin-top: 72%;
+ }
+
+ #part18-2 {
+ width: 14%;
+ left: 46%;
+ margin-top: 86%;
+ }
+
+ #part19-1 {
+ width: 17%;
+ left: 22%;
+ margin-top: 70%;
+ }
+
+ #part19-2 {
+ width: 17%;
+ left: 22%;
+ margin-top: 84%;
+ }
+
+ #part20 {
+ width: 13.5%;
+ left: 66%;
+ margin-top: 73%;
+ }
+
+ #part21 {
+ width: 11.5%;
+ left: 6%;
+ margin-top: 73%;
+ }
+
+ #part22 {
+ width: 13.5%;
+ left: 84%;
+ margin-top: 73%;
+ }
+
+ #part23 {
+ width: 28%;
+ left: 22%;
+ margin-top: 102%;
+ }
+
+ #part24 {
+ width: 37.5%;
+ left: 60%;
+ margin-top: 100%;
+ }
+
+ #part25 {
+ width: 20%;
+ left: 14%;
+ margin-top: 105%;
+ }
+
+ #part26 {
+ width: 40%;
+ left: 43%;
+ margin-top: 106%;
+ }
+
+ #part27 {
+ width: 22.5%;
+ left: 20%;
+ margin-top: 115%;
+ }
+
+ #part28 {
+ width: 22%;
+ left: 47%;
+ margin-top: 130%;
+ }
+
+ #part29-1 {
+ width: 3%;
+ left: 4%;
+ margin-top: 106%;
+ }
+
+ #part29-2 {
+ width: 3%;
+ left: 8%;
+ margin-top: 106%;
+ }
+
+ #part30 {
+ width: 19%;
+ left: 70%;
+ margin-top: 116%;
+ }
+
+ #part31-1 {
+ width: 2.5%;
+ left: 13%;
+ margin-top: 125.5%;
+ }
+
+ #part31-2 {
+ width: 2.5%;
+ left: 16%;
+ margin-top: 125.5%;
+ }
+
+ #part32-1 {
+ width: 2.75%;
+ left: 20%;
+ margin-top: 126%;
+ }
+
+ #part32-2 {
+ width: 2.75%;
+ left: 24%;
+ margin-top: 126%;
+ }
+ }
+}
diff --git a/template/landing_page.html b/template/landing_page.html
index dc8486f..bb4b730 100644
--- a/template/landing_page.html
+++ b/template/landing_page.html
@@ -30,7 +30,7 @@
Schnittfest
-