Typographic Chaos

Typographic Chaos | Von Pistockhausen - Drupal Design

Typographic Chaos

@font-face{font-display:swap;font-family:Sora;font-style:normal;font-weight:100;src:local('') , url(/themes/mauro/fonts/sora-v9-latin/sora-v9-latin-100.woff2) format('woff2') , url(/themes/mauro/fonts/sora-v9-latin/sora-v9-latin-100.woff) format('woff')}@font-face{font-display:swap;font-family:Sora;font-style:normal;font-weight:200;src:local('') , url(/themes/mauro/fonts/sora-v9-latin/sora-v9-latin-200.woff2) format('woff2') , url(/themes/mauro/fonts/sora-v9-latin/sora-v9-latin-200.woff) format('woff')}@font-face{font-display:swap;font-family:Sora;font-style:normal;font-weight:300;src:local('') , url(/themes/mauro/fonts/sora-v9-latin/sora-v9-latin-300.woff2) format('woff2') , url(/themes/mauro/fonts/sora-v9-latin/sora-v9-latin-300.woff) format('woff')}@font-face{font-display:swap;font-family:Sora;font-style:normal;font-weight:400;src:local('') , url(/themes/mauro/fonts/sora-v9-latin/sora-v9-latin-regular.woff2) format('woff2') , url(/themes/mauro/fonts/sora-v9-latin/sora-v9-latin-regular.woff) format('woff')}@font-face{font-display:swap;font-family:Sora;font-style:normal;font-weight:500;src:local('') , url(/themes/mauro/fonts/sora-v9-latin/sora-v9-latin-500.woff2) format('woff2') , url(/themes/mauro/fonts/sora-v9-latin/sora-v9-latin-500.woff) format('woff')}@font-face{font-display:swap;font-family:Sora;font-style:normal;font-weight:600;src:local('') , url(/themes/mauro/fonts/sora-v9-latin/sora-v9-latin-600.woff2) format('woff2') , url(/themes/mauro/fonts/sora-v9-latin/sora-v9-latin-600.woff) format('woff')}@font-face{font-display:swap;font-family:Sora;font-style:normal;font-weight:700;src:local('') , url(/themes/mauro/fonts/sora-v9-latin/sora-v9-latin-700.woff2) format('woff2') , url(/themes/mauro/fonts/sora-v9-latin/sora-v9-latin-700.woff) format('woff')}@font-face{font-display:swap;font-family:Sora;font-style:normal;font-weight:800;src:local('') , url(/themes/mauro/fonts/sora-v9-latin/sora-v9-latin-800.woff2) format('woff2') , url(/themes/mauro/fonts/sora-v9-latin/sora-v9-latin-800.woff) format('woff')}#sliding-popup{background:rgba(0,0,0,.5);width:100%;max-width:100vw;height:100%}.sliding-popup-bottom,.sliding-popup-top{margin:0;padding:0;z-index:99999;left:0;text-align:center}.sliding-popup-bottom{position:fixed}.sliding-popup-top{position:fixed}.eu-cookie-compliance-content{display:block;width:100%;max-width:100%;position:absolute;top:45%;left:0}.eu-cookie-back{background:red;float:left;display:block;text-align:left;box-shadow:0 0 4em rgba(0,0,0,.5)}.eu-cookie-compliance-categories-buttons{margin:0 0 1em 0;max-width:100%;float:left}.eu-cookie-compliance-buttons{float:left;width:100%;max-width:100%;padding:.5em 0;text-align:right}[dir="rtl"] .eu-cookie-compliance-categories-buttons{float:right}.eu-cookie-compliance-more-button{cursor:pointer;display:inline;height:auto;margin:0;padding:0;border:none;text-decoration:underline;background:0 0;color:#fff}.eu-cookie-compliance-secondary-button{cursor:pointer;border:none;background:0 0;margin-top:1em;padding:0 8px;vertical-align:middle}.disagree-button.eu-cookie-compliance-more-button,.eu-cookie-compliance-agree-button,.eu-cookie-compliance-default-button,.eu-cookie-compliance-hide-button,.eu-cookie-compliance-more-button-thank-you,.eu-cookie-compliance-save-preferences-button,.eu-cookie-withdraw-button{cursor:pointer;margin-left:10px;margin-top:1em;margin-bottom:5px;vertical-align:middle;overflow:visible;width:auto;border-radius:1px;border:1px solid #dcdcdc;color:#000;padding:8px 16px;text-decoration:none;text-shadow:1px 1px 0 #fff}.eu-cookie-compliance-buttons button{-moz-box-shadow:inset 0 0 0 1px #fff;-webkit-box-shadow:inset 0 0 0 1px #fff;box-shadow:inset 0 0 0 1px #fff}.disagree-button.eu-cookie-compliance-more-button:hover,.eu-cookie-compliance-agree-button:hover,.eu-cookie-compliance-default-button:hover,.eu-cookie-compliance-hide-button:hover,.eu-cookie-compliance-more-button-thank-you:hover,.eu-cookie-withdraw-button:hover{background-color:#dfdfdf}.disagree-button.eu-cookie-compliance-more-button:active,.eu-cookie-compliance-agree-button:active,.eu-cookie-compliance-default-button:active,.eu-cookie-compliance-hide-button:active,.eu-cookie-compliance-more-button-thank-you:active,.eu-cookie-withdraw-button:active{position:relative;top:1px}.eu-cookie-compliance-message{float:left;margin:5px 0 0;max-width:100%}.eu-cookie-compliance-banner--categories .eu-cookie-compliance-message{max-width:100%}.eu-cookie-compliance-categories{clear:both;padding-top:1em}.eu-cookie-compliance-categories label{display:inline}[dir="rtl"] .eu-cookie-compliance-message{float:right;text-align:right}.eu-cookie-compliance-message h1,.eu-cookie-compliance-message h2,.eu-cookie-compliance-message h3,.eu-cookie-compliance-message p{color:#fff;font-weight:700;line-height:1.4;margin:0 0 5px 0}.eu-cookie-compliance-message h1{font-size:24px}.eu-cookie-compliance-message h2{font-size:2.2em}.eu-cookie-compliance-message h3{font-size:12px}.eu-cookie-compliance-message p{font-size:1em}.eu-cookie-withdraw-tab{padding:4px 7px;cursor:pointer}.sliding-popup-bottom .eu-cookie-withdraw-tab{border-width:2px 2px 0;border-radius:5px 5px 0 0}.sliding-popup-top .eu-cookie-withdraw-tab{border-width:0 2px 2px;border-radius:0 0 5px 5px}.eu-cookie-withdraw-wrapper.sliding-popup-top,.eu-cookie-withdraw-wrapper.sliding-popup-top .eu-cookie-withdraw-banner{transform:scaleY(-1)}.eu-cookie-withdraw-tab{position:absolute;top:0;transform:translate(-50%,-100%);left:50%}.eu-cookie-withdraw-wrapper.sliding-popup-top .eu-cookie-withdraw-tab{transform:translate(-50%,-100%) scaleY(-1)}.hidden{display:none}.visually-hidden{position:absolute!important;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;word-wrap:normal}@keyframes loading{100%{background-position:0 -2400px}}html{box-sizing:border-box;-ms-overflow-style:scrollbar}*,::after,::before{box-sizing:inherit}.container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:576px){.container{max-width:540px}.container{max-width:540px}}.row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.col-10,.col-12,.col-2,.col-lg-6,.col-md-7,.col-md-8,.col-sm-10,.col-sm-7,.col-xl-6{position:relative;width:100%;padding-right:15px;padding-left:15px}.col-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.offset-1{margin-left:8.333333%}@media (min-width:576px){.col-sm-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-sm-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.offset-sm-1{margin-left:8.333333%}}*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%}article,footer,main,nav{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}h2{margin-top:0;margin-bottom:.5rem}ul{margin-top:0;margin-bottom:1rem}a{color:#007bff;text-decoration:none;background-color:transparent}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}button{border-radius:0}button{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button{overflow:visible}button{text-transform:none}[type="button"],button{-webkit-appearance:button}[type="button"]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}:root{--swiper-theme-color:#007aff}:root{--swiper-navigation-size:44px}#loader-overlay{opacity:0;top:0;left:0;position:fixed;background-color:rgba(255,255,255,.9);height:100%;width:100%;max-width:100vw;max-height:100vh;z-index:9998}#loader-overlay.visible{opacity:1;background-color:rgba(255,255,255,1)}#loader-overlay .loader-wrapper-outer{background-color:transparent;z-index:9999;margin:auto;width:100%;height:100%;overflow:hidden;display:table;text-align:center;vertical-align:middle}#loader-overlay .loader-wrapper{position:absolute;left:50%;top:50%;margin-top:-120px;margin-left:-120px;width:240px;height:240px;background:transparent url(/themes/mauro/loader.svg) 0 0 no-repeat;background-size:100%;animation:loading .65s steps(10) infinite}@keyframes loading{100%{background-position:0 -2400px}}body{font-family:'Sora',sans-serif;font-size:15px;background:#efefef;color:#000;overflow-x:hidden;overflow-y:auto;margin:0;padding:0;position:static;max-width:100vw}@media (min-width:576px){body{font-size:14px}}#init{font-size:64px}.scritta{position:absolute;top:360px;left:50%;width:100%;margin-left:-50%;letter-spacing:-.05em;font-weight:700;text-align:center}#scritta2{position:absolute;top:34vh;width:100%;max-width:100vw;overflow-x:hidden;min-height:100%;z-index:0}.sfondo{position:absolute;z-index:-1;width:100%;height:100%;top:0;left:0;overflow:hidden}.sfondo:after{content:"";display:block;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.2) 0,rgba(0,0,0,0) 100%);position:absolute;z-index:-1;top:-164px;left:calc(50% - 516px);width:526px;height:526px}.sfondo:before{content:"";display:block;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.2) 0,rgba(0,0,0,0) 100%);position:absolute;z-index:-1;top:-360px;left:calc(50% - 258px);width:820px;height:820px}html,body{height:100%;margin:0;width:100%}body::-webkit-scrollbar{width:10px}body::-webkit-scrollbar-track{background:#eee;width:5px}body::-webkit-scrollbar-thumb{background:#333;width:3px}.head{padding:3vh 0;width:100%;float:left;height:34vh}.logo{margin-top:30px;z-index:201}.menubar{text-align:right;z-index:1001;position:absolute;left:0;top:-10px}@media (min-width:480px){.head{padding-top:2.5vh}.menubar{top:0}}.menubox{display:inline-block;background:#fff;padding:0;margin-left:15px}.glitch-wrapper{height:100%;width:100%}.glitch{position:relative;display:inline-block;width:100%}.glitch::before,.glitch::after{content:"";display:block;background:url(/themes/mauro/von.svg) no-repeat;background-size:contain;position:absolute;top:0;left:0;width:100%;height:100%}.glitch::before{left:3px;clip:rect(24px,550px,90px,0);animation:glitch-anim-2 3s infinite linear alternate-reverse}.glitch::after{left:-3px;clip:rect(85px,550px,140px,0);animation:glitch-anim 2.5s infinite linear alternate-reverse}@-webkit-keyframes glitch-anim{0%{clip:rect(40px,9999px,188px,0)}4.166666666666666%{clip:rect(27px,9999px,160px,0)}8.333333333333332%{clip:rect(61px,9999px,1116px,0)}12.5%{clip:rect(65px,9999px,1138px,0)}16.666666666666664%{clip:rect(89px,9999px,1107px,0)}20.833333333333336%{clip:rect(44px,9999px,157px,0)}25%{clip:rect(63px,9999px,1113px,0)}29.166666666666668%{clip:rect(1px,9999px,150px,0)}33.33333333333333%{clip:rect(87px,9999px,1102px,0)}37.5%{clip:rect(70px,9999px,1104px,0)}41.66666666666667%{clip:rect(64px,9999px,16px,0)}45.83333333333333%{clip:rect(24px,9999px,116px,0)}50%{clip:rect(145px,9999px,1121px,0)}54.166666666666664%{clip:rect(99px,9999px,112px,0)}58.333333333333336%{clip:rect(108px,9999px,1124px,0)}62.5%{clip:rect(59px,9999px,1130px,0)}66.66666666666666%{clip:rect(116px,9999px,1110px,0)}70.83333333333334%{clip:rect(9px,9999px,153px,0)}75%{clip:rect(146px,9999px,187px,0)}79.16666666666666%{clip:rect(14px,9999px,1141px,0)}83.33333333333334%{clip:rect(103px,9999px,13px,0)}87.5%{clip:rect(136px,9999px,1118px,0)}91.66666666666666%{clip:rect(138px,9999px,1122px,0)}95.83333333333334%{clip:rect(76px,9999px,1145px,0)}100%{clip:rect(78px,9999px,198px,0)}}@keyframes glitch-anim{0%{clip:rect(40px,9999px,188px,0)}4.166666666666666%{clip:rect(27px,9999px,160px,0)}8.333333333333332%{clip:rect(61px,9999px,1116px,0)}12.5%{clip:rect(65px,9999px,1138px,0)}16.666666666666664%{clip:rect(89px,9999px,11107px,0)}20.833333333333336%{clip:rect(44px,9999px,157px,0)}25%{clip:rect(63px,9999px,113px,0)}29.166666666666668%{clip:rect(1px,9999px,150px,0)}33.33333333333333%{clip:rect(87px,9999px,102px,0)}37.5%{clip:rect(70px,9999px,1104px,0)}41.66666666666667%{clip:rect(64px,9999px,6px,0)}45.83333333333333%{clip:rect(24px,9999px,126px,0)}50%{clip:rect(145px,9999px,121px,0)}54.166666666666664%{clip:rect(99px,9999px,12px,0)}58.333333333333336%{clip:rect(108px,9999px,1214px,0)}62.5%{clip:rect(59px,9999px,130px,0)}66.66666666666666%{clip:rect(116px,9999px,110px,0)}70.83333333333334%{clip:rect(9px,9999px,53px,0)}75%{clip:rect(146px,9999px,87px,0)}79.16666666666666%{clip:rect(14px,9999px,1411px,0)}83.33333333333334%{clip:rect(103px,9999px,3px,0)}87.5%{clip:rect(136px,9999px,118px,0)}91.66666666666666%{clip:rect(138px,9999px,122px,0)}95.83333333333334%{clip:rect(76px,9999px,1415px,0)}100%{clip:rect(78px,9999px,98px,0)}}@-webkit-keyframes glitch-anim-2{6.666666666666667%{clip:rect(18px,9999px,191px,0)}10%{clip:rect(52px,9999px,117px,0)}13.333333333333334%{clip:rect(62px,9999px,1149px,0)}16.666666666666664%{clip:rect(37px,9999px,41px,0)}20%{clip:rect(149px,9999px,72px,0)}23.333333333333332%{clip:rect(10px,9999px,21px,0)}26.666666666666668%{clip:rect(39px,9999px,1px,0)}30%{clip:rect(35px,9999px,38px,0)}33.33333333333333%{clip:rect(86px,9999px,213px,0)}36.666666666666664%{clip:rect(37px,9999px,1018px,0)}40%{clip:rect(92px,9999px,1132px,0)}43.333333333333336%{clip:rect(19px,9999px,14px,0)}46.666666666666664%{clip:rect(96px,9999px,64px,0)}50%{clip:rect(54px,9999px,10px,0)}53.333333333333336%{clip:rect(56px,9999px,95px,0)}56.666666666666664%{clip:rect(26px,9999px,1219px,0)}60%{clip:rect(119px,9999px,1131px,0)}63.33333333333333%{clip:rect(6px,9999px,86px,0)}66.66666666666666%{clip:rect(118px,9999px,63px,0)}70%{clip:rect(8px,9999px,150px,0)}73.33333333333333%{clip:rect(121px,9999px,87px,0)}76.66666666666667%{clip:rect(64px,9999px,126px,0)}80%{clip:rect(56px,9999px,912px,0)}83.33333333333334%{clip:rect(111px,9999px,813px,0)}86.66666666666667%{clip:rect(113px,9999px,120px,0)}90%{clip:rect(95px,9999px,117px,0)}93.33333333333333%{clip:rect(34px,9999px,78px,0)}96.66666666666667%{clip:rect(16px,9999px,919px,0)}100%{clip:rect(52px,9999px,56px,0)}}@keyframes glitch-anim-2{6.666666666666667%{clip:rect(18px,9999px,191px,0)}10%{clip:rect(52px,9999px,117px,0)}13.333333333333334%{clip:rect(62px,9999px,1149px,0)}16.666666666666664%{clip:rect(37px,9999px,41px,0)}20%{clip:rect(149px,9999px,72px,0)}23.333333333333332%{clip:rect(10px,9999px,21px,0)}26.666666666666668%{clip:rect(39px,9999px,1px,0)}30%{clip:rect(35px,9999px,318px,0)}33.33333333333333%{clip:rect(86px,9999px,23px,0)}36.666666666666664%{clip:rect(37px,9999px,108px,0)}40%{clip:rect(92px,9999px,132px,0)}43.333333333333336%{clip:rect(19px,9999px,14px,0)}46.666666666666664%{clip:rect(96px,9999px,64px,0)}50%{clip:rect(54px,9999px,120px,0)}53.333333333333336%{clip:rect(56px,9999px,95px,0)}56.666666666666664%{clip:rect(26px,9999px,129px,0)}60%{clip:rect(119px,9999px,1131px,0)}63.33333333333333%{clip:rect(6px,9999px,86px,0)}66.66666666666666%{clip:rect(118px,9999px,63px,0)}70%{clip:rect(8px,9999px,1501px,0)}73.33333333333333%{clip:rect(121px,9999px,87px,0)}76.66666666666667%{clip:rect(64px,9999px,126px,0)}80%{clip:rect(56px,9999px,92px,0)}83.33333333333334%{clip:rect(111px,9999px,813px,0)}86.66666666666667%{clip:rect(113px,9999px,1120px,0)}90%{clip:rect(95px,9999px,117px,0)}93.33333333333333%{clip:rect(34px,9999px,1178px,0)}96.66666666666667%{clip:rect(16px,9999px,99px,0)}100%{clip:rect(52px,9999px,56px,0)}}.noise-wrapper{position:absolute;left:0;top:0;width:100%;height:100%;opacity:1;overflow:hidden;z-index:-1}.noise-wrapper:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 0,rgba(0,0,0,.75) 100%)}.noise{position:absolute;top:-500px;right:-500px;bottom:-500px;left:-500px;background:transparent url(/themes/mauro/images/xnoise.png.pagespeed.ic.Nyk1_JlRt0.png) 0 0;background-size:250px 250px;opacity:.35;animation:noise .2s steps(4,end) infinite both;border:1px solid red}@keyframes noise{0%{transform:translate(0,0)}10%{transform:translate(-250px,100px)}20%{transform:translate(0,-100px)}30%{transform:translate(-250px,100px)}}main{float:left;width:100vw;position:absolute;min-height:50vh;margin:0}.altezza{height:34vh}.image_layer{position:absolute;z-index:-2;top:-20vh;bottom:-100vh;left:0;width:100%;opacity:.5}.sfondop{position:fixed;z-index:-3;top:0;left:0;width:100%;height:100%}.sfondop img{width:100%;height:100%;object-fit:cover}.sfondot{position:fixed;z-index:-2;top:0;left:0;width:100%;height:100%}.hamburger{padding:15px 12px 12px 12px;display:inline-block;font:inherit;color:inherit;text-transform:none;background-color:transparent;border:0;margin:0;overflow:visible;outline:0;position:relative}.hamburger-box{width:32px;height:16px;display:inline-block;position:relative}.hamburger-inner{display:block;top:50%;margin-top:-2px}.hamburger-inner,.hamburger-inner::before,.hamburger-inner::after{width:32px;height:4px;background-color:#18324f;border-radius:2px;position:absolute}.hamburger-inner::before,.hamburger-inner::after{content:"";display:block}.hamburger-inner::before{top:-10px}.hamburger-inner::after{bottom:-10px}#navigation{position:fixed;z-index:-1;top:0;left:0;width:100vw;height:100vh;overflow:hidden;opacity:0;background:#444;transform:translate(0,-100vh)}.top-layer{position:absolute;width:100%;height:100%;top:-100%;left:0;bottom:auto;right:auto;background:#fff}.top-layer--2{background:#333}#navigation .headline{padding:2em 0}#navigation h2{font-family:'Nunito Sans',serif;font-size:1.6em;font-weight:700;position:relative;float:left;width:100%;opacity:0}#navigation ul{list-style:none;padding:0;margin:0;float:left;width:100%}#navigation ul li a{line-height:1;font-size:1.9em;color:#eee;text-decoration:none;padding:6px 0;margin:0;display:block;width:100%;text-align:center;text-transform:uppercase;text-shadow:0 0 5px #000}#navigation ul li:nth-child(1){font-size:1.2em;font-weight:100}#navigation ul li:nth-child(2){font-size:1.4em;font-weight:400}#navigation ul li:nth-child(3){font-size:1.8em;font-weight:800}#navigation ul li:nth-child(4){font-size:1.2em;font-weight:400}#navigation ul li:nth-child(5){font-size:.8em;font-weight:200}.content{float:left;width:100%}.footerbottom{width:100vw;padding:6vh 0 2vh 0;float:left;height:30vh;text-align:center}