@charset "utf-8";
body,div,dl,dd,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td {margin:0;padding:0; box-sizing:border-box; -moz-box-sizing:border-box;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style: none;}
ol, ul, li {font-family: inherit;font-size: 100%;font-weight: inherit;font-style: inherit;vertical-align: baseline;white-space: normal;text-align: left;margin: 0;padding: 0;border: 0;outline: 0;background: transparent;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight: normal;}
input:focus{outline:none;}
textarea:focus{outline:none;}
button{appearance: none; background: transparent;}
    :root{
  --maxwidth:1000px;
  --gtime:0.4s;
}


.clearfix:after {visibility: hidden;display: block;font-size: 0; content:' '; clear: both; height: 0;}
.trans{transition:all var(--gtime);}
.transcolor{transition:color var(--gtime), background-color var(--gtime);}
.layer{display:block; position:absolute; top:0; right:0; bottom:0; left:0;}
:root{
 --bg:rgb(0, 0, 0);
 --bg:oklch(0.000 0.000 0.000 / 1.000);
 --fg:rgb(238, 238, 238);
 --fg:oklch(0.950 0.000 0.000 / 1.000);
}

@font-face {
  font-family: 'julius';
  src: url('julius_sans.woff2') format('woff2'),
  url('julius_sans.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


:root{
  --default : 'Arial','Helvetica','Roboto',sans-serif;
  --julius : 'julius','Arial','Helvetica','Roboto',sans-serif;
}
div.xrtf{
  --g-fs:1em;
  --p-fs:0.875em; --p-lh:2.100em;  --p-m:2.100em 0 2.100em 0;
  --h1-fs:2.723em; --h1-lh:1.350em; --h1-m:1.350em 0 0.675em 0;
  --h2-fs:1.865em; --h2-lh:1.970em; --h2-m:1.970em 0 0.985em 0;
  --h3-fs:1.277em; --h3-lh:1.438em; --h3-m:1.438em 0 1.438em 0;
  --h4-fs:0.875em; --h4-lh:2.100em; --h4-m:2.100em 0 2.100em 0;
  --h5-fs:0.875em; --h5-lh:2.100em; --h5-m:2.100em 0 2.100em 0;
  --h6-fs:0.875em; --h6-lh:2.100em; --h6-m:2.100em 0 2.100em 0;
  --p-color:var(--fg);
  --h1-color:var(--fg);
  --h2-color:var(--fg);
  --h3-color:var(--fg);
  --h4-color:var(--fg);
  --h5-color:var(--fg);
  --h6-color:var(--fg);
  --link:var(--fg);
  --visited:var(--fg);
  --hover:var(--fg);
  --active:var(--fg);
  --h1-fontfamily:'julius';
  --h2-fontfamily:'julius';
  --h3-fontfamily:'julius';
  --h4-fontfamily:'julius';
  --h5-fontfamily:'julius';
  --h6-fontfamily:'julius';
  --indent:1em;
}



div.xrtf{font-size:var(--g-fs); font-family:var(--global-fontfamily); color:var(--p-color); font-variant-ligatures:normal; font-optical-sizing:auto;}
div.xrtf p {font-size: var(--p-fs);  line-height:var(--p-lh);   margin: var(--p-m); hyphens:auto; text-align:justify;}
div.xrtf h1{font-size: var(--h1-fs); line-height: var(--h1-lh); margin: var(--h1-m); color:var(--h1-color); font-family:var(--h1-fontfamily); text-wrap:balance;}
div.xrtf h2{font-size: var(--h2-fs); line-height: var(--h2-lh); margin: var(--h2-m); color:var(--h2-color); font-family:var(--h2-fontfamily); text-wrap:balance;}
div.xrtf h3{font-size: var(--h3-fs); line-height: var(--h3-lh); margin: var(--h3-m); color:var(--h3-color); font-family:var(--h3-fontfamily); text-wrap:balance;}
div.xrtf h4{font-size: var(--h4-fs); line-height: var(--h4-lh); margin: var(--h4-m); color:var(--h4-color); font-family:var(--h4-fontfamily); text-wrap:balance;}
div.xrtf h5{font-size: var(--h5-fs); line-height: var(--h5-lh); margin: var(--h5-m); color:var(--h5-color); font-family:var(--h5-fontfamily); text-wrap:balance;}
div.xrtf h6{font-size: var(--h6-fs); line-height: var(--h6-lh); margin: var(--h6-m); color:var(--h6-color); font-family:var(--h6-fontfamily); text-wrap:balance;}

div.xrtf strong{font-family:var(--strong-fontfamily);}
div.xrtf b{font-family:var(--strong-fontfamily);}
div.xrtf em{font-family:var(--italic-fontfamily);}
div.xrtf i{font-family:var(--italic-fontfamily);}
div.xrtf a:link{color:var(--link);}
div.xrtf a:visited{color:var(--visited);}
div.xrtf a:hover{color:var(--hover);}
div.xrtf a:active{color:var(--active);}

div.xrtf ol {list-style-type: decimal; margin:var(--p-m); margin-left:var(--indent); font-size:var(--p-fs); line-height:var(--p-lh);}
div.xrtf ul {list-style-type: disc; margin:var(--p-m); margin-left:var(--indent); font-size:var(--p-fs); line-height:var(--p-lh);}
div.xrtf li ol{margin:0 0 0 var(--indent); font-size:1em;}
div.xrtf li ul{margin:0 0 0 var(--indent); font-size:1em;}

div.xrtf dl {margin:var(--p-m); font-size:var(--p-fs); line-height:var(--p-lh); color:var(--p-color);}
div.xrtf dt {font-weight:bold;}
div.xrtf dd {margin-left: var(--indent);}

div.xrtf blockquote{margin-left: var(--indent);}
div.xrtf blockquote p:first-child:before{content:open-quote;}
div.xrtf blockquote p:last-child:after{content:close-quote;}

div.xrtf hr{ border:0; height:1px; color:var(--border); background-color:var(--border); margin:-1px auto 0 auto; width:50%; }
div.xrtf hr:after {visibility: hidden;display: block;font-size: 0; content:''; clear: both; height: 0;}

div.xrtf table{width:100%; border-collapse:collapse; margin:var(--p-m); font-size:var(--p-fs); line-height:var(--p-lh);}
div.xrtf table caption{padding:0px 5px 0px 5px; font-weight:bold;}
div.xrtf th,td {padding:0px 5px 0px 5px; vertical-align:top;}
div.xrtf td {position:relative;}
div.xrtf td:before{content:''; display:block; background:var(--p-color); position:absolute; top:0; left:0; right:0; height:1px;}
div.xrtf th {font-weight:bold;}

div.xrtf sup, sub {vertical-align: baseline; position: relative; top: -0.4em;}
div.xrtf sub {top: 0.4em;}

div.xrtf address{font-size:var(--p-fs); line-height:var(--p-lh); margin:var(--p-m);}
div.xrtf pre{font-size:var(--p-fs); line-height:var(--p-lh); margin:var(--p-m);}
:root{
 --icon-arrow_right:url(arrow_right.svg);
 --icon-arrow_left:url(arrow_left.svg);
 --icon-menu:url(menu.svg);
 --icon-like:url(like.svg);
 --icon-close:url(close.svg);
}
div.xrtf{max-width:60ch;}
div.xrtf p{text-align:justify; hyphens:auto;}
div.xrtf img{max-width:100%;}

div.exhibitors div.xrtf {padding: 0 0 0 20px;}
div.exhibitors div.xrtf h1 {text-transform: uppercase;}
div.exhibitors div.person {float: left;position: relative;padding: 15px 25px;}
div.exhibitors div.person a {display: block;position: absolute;top: 0;right: 0;bottom: 0;left: 0;}
div.exhibitors div.person a span {display: none;}
div.exhibitors div.person:hover {background: #333;}

@media screen and (max-width: 800px) {
	div.exhibitors {margin: 50px auto 20px auto;}
	div.exhibitors div.person {float: none;}
}

div.exhibition{display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-gap: 20px; padding:20px;}
div.poster{position:relative;}
div.poster:hover img{box-shadow: 0px 0px 75px 0px rgba(255,255,255,0.6);}
div.exhibition img{display:block; height: 210px; width: 150px; margin: auto; object-fit:contain;}
div.exhibition p{font-size:0.8em; text-align:center; padding:20px;}
div.exhibition a{display:block; position:absolute; inset:0; }
div.exhibition a span{display:none;}

div.xgalframe{position:fixed; top:80px; bottom:65px; left:0; right:0; background:var(--bg); padding:4px; overflow:hidden;}
div.xgalframe div.ximg{position:absolute; inset:0; padding:5vw; transition: all 0.5s;}
div.xgalframe div.ximg img{width:100%; height:100%; object-fit:contain; opacity:0; transition:all 0.5s;}
div.xgalframe div.ximg video{width:100%; height:100%; object-fit:contain;}
div.xgalframe div.ximg p{text-align: center; margin: 20px; font-size: 0.8em;}
div.xgalframe div.xprev{transform:translate(-100%,0)}
div.xgalframe div.xme{transform:translate(0,0);}
div.xgalframe div.xnext{transform:translate(100%,0)}
div.xgalframe div.xhidden{transition:none;}
div.xgalframe a.xbtn{display:block; position:absolute; width:25px; height:25px; background:url(close.svg) no-repeat center center; background-size:contain;}
div.xgalframe a.xclose{right:20px; top:20px; background-image:url(close.svg);}
div.xgalframe a.n{background-image:url(arrow_right.svg); right:20px; top:50%;}
div.xgalframe a.p{background-image:url(arrow_left.svg); left:20px; top:50%;}
div.xgalframe a.xbtn:hover{transform:scale(1.1);}
div.xgalframe a.xbtn span{display:none;}
div.xgalframe a.likebtn{display:block; position:absolute; top:20px; left:20px; text-decoration:none; font-size:0.8em; color:var(--fg);
  padding:10px 10px 10px 30px; background:url(like.svg) no-repeat left center; background-size:20px;
}
div.xgalframe a.likebtn:hover{transform:scale(1.1);}

div.load:before{content: ''; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%;
    background:conic-gradient(var(--fg), var(--bg)); width: 80px; height: 80px; z-index:-1; animation: rot 1s infinite;}

div.load:after{content: '';display: block;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);border-radius: 50%;background: var(--bg); width: 79px; height: 79px; z-index:-1;}

@keyframes rot{
  0% {transform:translate(-50%,-50%) rotate(360deg);}
  100% {transform:translate(-50%,-50%) rotate(0deg)};
}

div.xflatgallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(400px,1fr)); grid-gap:20px; padding:20px;}
div.xflatgallery img{width:100%;}

.xframe{max-width: var(--maxwidth); margin: 0 auto; padding: 40px 40px 80px 40px;}
footer{display:grid; grid-template-columns:1fr 1fr 1fr;}
footer a{display:block; aspect-ratio: 2 / 1; background-repeat: no-repeat; background-position: center center; background-size: 30%;}
div.mandatory{font-size:0.8em; max-width:60ch;}
div.mandatory p{text-align:center; hyphens:none;}

div.header-holder{position:absolute; position:fixed; top:0; left:0; right:0; backdrop-filter:blur(10px); --webkit-backdrop-filter:blur(10px); z-index:10000;}
div.header{max-width:var(--maxwidth); margin:0 auto; padding:1vw 2vw; grid-gap:2vw; display:grid; grid-template-columns:1fr 1fr;}
div.header a.logo{display:block; height:50px; background:url(typozone5_logo.svg) no-repeat left center; background-size:contain;}
div.header a.logo span{display:none;}
div.header a.lang{display:block; text-decoration:none; align-self:center; justify-self:right; color:var(--fg); text-transform:uppercase; font-size:0.8em;}

body{background-color:var(--bg); color:var(--fg); font-family:var(--default); padding-top: 100px;}

nav{position:fixed; bottom:0; left:0; right:0; display:grid; grid-template-columns:100px auto 100px;  background:var(--bg); border-top:1px solid rgba(255,255,255,0.2);}
nav a.menu{display:none;}
nav a.navlink{display:grid; background:var(--icon-arrow_left) no-repeat center center; background-size:20px;}
nav a.navlink.next{background-image:var(--icon-arrow_right);}
nav a.navlink span{display:none;}
nav a.navlink:hover{animation: shake 1.2s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;}
nav div.menu{align-self:center; justify-self:center;}
nav div.menu a{display:inline-block; text-decoration: none; padding:2em 2em;text-transform: uppercase;	font-size: 0.8em; position:relative; color:#fff; white-space:nowrap;}
nav div.menu a:after{content:''; display:block; position: absolute; bottom:0; left:0; right:0; height:0; background:#fff; transition: all 0.5s;}
nav div.menu a.sel:after{height:4px; }
nav div.menu a:hover:after{height:20px; }
nav div.menu a:active{color:var(--bg);}
nav div.menu a:active:after{height:50px;z-index: -1;}

@media (orientation:portrait){
	nav a.menu{display:block; height:66px; width:66px; justify-self:center; background:var(--icon-menu) no-repeat center center; background-size:20px;}
	nav a.menu span{display:none;}
	nav div.menu{position:fixed; bottom:76px; left:50%; transform:translate(-50%,120%); border:1px solid #333; transition:all 0.3s; opacity:0; background:var(--bg);}
	nav div.menu.open{transform:translate(-50%,0); opacity:1;}
	nav div.menu a{display:block; text-align:center; padding:2em 6em;}
	nav div.menu a.sel:after{height:1px; }
	nav div.menu a:active:after{height:100%;}
}

@keyframes shake{
  0%, 100% {transform: translateX(0);}
  10%, 30%, 50%, 70% {transform: translateX(-10px);}
  20%, 40%, 60% {transform: translateX(10px);}
  80% {transform: translateX(8px);}
  90% {transform: translateX(-8px);}
}

div.grid {margin: 0 auto 40px auto;max-width: var(--max-width);display: grid;grid-template-columns: 1fr 2fr;grid-template-rows: auto auto;grid-gap: 60px;}
div.grid div.left {text-align: right;padding: 220px 0 0 20px;}
div.grid div.left a {display: block;text-decoration: none;padding: 10px 10px 10px 20px;margin: 0 -10px 0 0;}
div.grid div.left a:link {color: var(--fg);}
div.grid div.left a:visited {color: var(--fg);}
div.grid div.left a:hover {color: var(--fg);background: #333;}
div.grid div.right {padding: 0 20px 0 0;}
div.grid div.rtf h1 {text-transform: uppercase;}
div.grid div.rtf h2 {text-transform: uppercase;font-weight: normal;}

@media screen and (max-width: 800px) {
  div.grid {margin: 80px auto 40px auto;}
  div.grid div.right {grid-row-start: 1; grid-row-end: 2; grid-column-start: 1; grid-column-end: 3; padding: 20px;}
  div.grid div.left {grid-row-start: 2; grid-row-end: 3; grid-column-start: 1; grid-column-end: 3; padding: 20px; text-align: left;}
  div.grid div.left a {margin: 0;}
}

div.orglist div.organisation {margin: 0px 0 20px 0;position: relative;}
div.orglist div.organisation h2 {text-transform: uppercase;font-size: 1.4em;}
div.orglist div.organisation h3 {text-transform: uppercase;font-size: 1em;}
div.orglist div.organisation a{display: block;position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px;}
div.orglist div.organisation a span {display: none;}