html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6,article,aside,details,figcaption,footer,header,hgroup,menu,nav,section{
margin:0;padding:0}
h1,h2,h3,h4,h5,h6{
font-size:100%;font-weight:400}
ul{
list-style:none}
button,input,select,textarea{
margin:0}
html{
box-sizing:border-box}
*,*::before,*::after{
box-sizing:inherit}
img,svg,embed,iframe,object,video{
height:auto;max-width:100%}
audio{
max-width:100%}
iframe{
border:0}
table{
border-collapse:collapse;border-spacing:0}
td,th{
padding:0;text-align:left}
b{
font-weight:600;font-size:1.01em}
i{
font-style:italic}
@font-face{
font-family:'notosans';font-style:normal;font-weight:400;src:local('Noto Sans'),local('NotoSans'),url('https://static.artificialmuseum.com/font/notosans-400-normal.woff2') format('woff2')}
@font-face{
font-family:'notosans';font-style:normal;font-weight:700;src:local('Noto Sans Black'),local('NotoSans-Black'),url('https://static.artificialmuseum.com/font/notosans-700-normal.woff2') format('woff2')}
@font-face{
font-family:'notosans';font-style:italic;font-weight:400;src:local('Noto Sans Italic'),local('NotoSans-Italic'),url('https://static.artificialmuseum.com/font/notosans-400-italic.woff2') format('woff2')}
*{
box-sizing:border-box;scrollbar-color:#fafafa #0c0c0c;scrollbar-width:thin}
.visible{
display:inherit !important}
::-webkit-scrollbar{
width:6px}
::-webkit-scrollbar-track{
background:#0c0c0c}
::-webkit-scrollbar-thumb{
background-color:#fafafa;border-radius:20px}
body{
background-color:#fafafa;color:#0c0c0c;font-family:notosans,ubuntu,"Segoe UI",roboto,"Lucida Grande","Helvetica Neue",helvetica,arial,sans-serif
;font-size:15px;line-height:1.2;margin:0;min-height:100vh;overflow-x:hidden;overflow-y:scroll;overscroll-behavior:none;padding:0 15px;position:absolute;width:100%}
h1{
font-size:1.5em}
h2{
font-size:2em}
h3{
font-size:1.2em}
h4{
font-size:1.1em}
h1,h2,h3,h4,h5{
margin:1em 0 0.5em}
p{
margin:0 0 1em}
a{
color:#000}
a.no-style{
text-decoration:none}
nav{
line-height:1em}
nav ul{
color:#333;display:inline-block;list-style:none;margin:0;padding:0}
nav ul .active,nav ul a.active{
-webkit-text-decoration:underline 2px;text-decoration:underline 2px}
nav li{
cursor:pointer;float:left;margin:0 1em 0 0;-webkit-user-select:none;-moz-user-select:none;user-select:none}
nav li:last-child{
margin:0}
.nav.menu.toggle.list{
text-decoration:none}
.nav.menu.toggle.list span:last-child{
color:#666}
.nav.menu.toggle.list.exit span:first-child{
color:#666}
.nav.menu.toggle.list.exit span:last-child{
color:#0c0c0c}
canvas{
display:block;left:0;position:fixed;top:0}
header.main,footer.main{
background-color:#fafafa;display:inline-block;margin:0;width:100%}
header.main nav a,header.main nav span,footer.main nav a,footer.main nav span{
font-size:14px}
header.main nav.right,footer.main nav.right{
float:right}
header.main nav.left,footer.main nav.left{
float:left}
header.main a,footer.main a{
text-decoration:none}
.nav{
cursor:pointer}
#show-artifact{
color:white;background-color:black;margin:1em 0}
header.main{
font-size:18px;padding:7px 0 3px;top:0}
header.main nav{
font-size:16px}
header.main .logo{
display:inline-block}
header.main .logo span{
cursor:pointer;float:left;line-height:1;margin:-1px 3px 0;padding:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}
header.main .logo span.logo{
font-size:18px;font-weight:900}
header.main .logo svg{
cursor:pointer;float:left;height:17px}
header.main .logo ul{
background:#0c0c0c;height:0;overflow:hidden;padding:0 0.5em;position:absolute;top:1.5em}
header.main .logo ul li{
margin:0.8em 0.5em 0.5em 0}
header.main .logo:hover ul,header.main .logo:active ul,header.main .logo.visible ul{
height:auto}
footer.main{
bottom:0;padding:10px 15px}
footer.main nav li{
font-size:0.9em}
.friendListItem img{
margin:0 1em 1em 0}
.exitScreenButton{
height:26px;position:fixed;right:15px;top:60px;width:26px}
.arrow{
display:block;position:absolute;right:0;top:25px;width:15px}
.arrow.up{
display:none}
.screen-visible .screen.visible{
display:block}
.screen-visible .screen.visible .detail.visible .arrow.up{
display:block}
.screen-visible .screen.visible .detail.visible .arrow.down{
display:none}
.screen-visible .screen.visible .sub{
margin:15px 0 0;overflow-y:scroll;width:100%}
.screen-visible .screen.visible.list,.screen-visible .screen.visible.help{
border-top:1px solid #e0e0e0}
.screen-visible .screen.visible.list nav,.screen-visible .screen.visible.help nav{
display:inline-block;margin:15px 0;width:100%}
.screen-visible .screen.visible.list nav ul,.screen-visible .screen.visible.help nav ul{
display:inline-block;float:right}
#map-container{
height:calc(100% - 40px);outline:none;position:fixed;top:30px;width:calc(100vw - 30px)}
.content{
display:inline-block;position:relative;top:60px;width:100%}
.VideoEmbed{
height:0;overflow:hidden;padding-bottom:calc(56.25% - 1px);position:relative}
.VideoEmbed iframe{
height:100%;left:0;position:absolute;top:0;width:100%}
.Partners img{
max-height:62px;width:auto}
button,.button{
background:#fafafa;border:0 none;cursor:pointer;padding:2px;color:#0c0c0c;font-family:notosans,ubuntu,"Segoe UI",roboto,"Lucida Grande","Helvetica Neue",helvetica,arial,sans-serif
;letter-spacing:1px;outline:none;text-align:center;text-decoration:none;text-transform:uppercase;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}
button.styled,.button.styled{
background:#fafafa;border-radius:2em;box-shadow:5px 0 10px #eaeaea -5px 0 10px #0c0c0c;display:block;font-size:1em;margin:0 auto;padding:0.8em}
button.styled.margin,.button.styled.margin{
margin:1em auto 0}
button.inline,.button.inline{
display:inline-block}
button.inverse,.button.inverse{
background:#0c0c0c;box-shadow:none;color:#fafafa}
button:disabled{
background:#555;color:#0c0c0c;cursor:not-allowed}
.phase-1-link{
text-align:center}
.backToTop{
height:auto;margin:4em auto 1em;width:26px}
.rotate{
animation:rotation 5s;animation-iteration-count:infinite;animation-timing-function:linear;transform-origin:50% 50%}
@keyframes rotation{
from{
transform:rotate(0deg)}
to{
transform:rotate(359deg)}
}
#Locator{
bottom:0;color:#0c0c0c;display:none;font-size:1.5em;left:auto;padding:5px;position:fixed;right:0;top:auto;z-index:5000}
#Locator div,#Locator a{
color:#0c0c0c;float:left}
#LocatorButton{
background-color:#fafafa;border-bottom-left-radius:0.5em;border-top-left-radius:0.5em;border-top-right-radius:0.5em;float:left;font-size:1.2em;padding:0.3em 0.3em 0}
#LocatorInactive,#LocatorCloseToCity,#LocatorActive,#LocatorTimeout{
background-color:#fafafa;display:none;margin:0;position:relative;padding:0 0.5em 0.1em 0.2em;top:0.54em}
.warning{
background-color:rgba(0,0,0,0.8);color:#fafafa;display:none;left:15px;position:fixed;text-align:center;top:36px;width:calc(100vw - 30px);z-index:2001}
.warning .container{
margin:0 auto;max-width:400px;padding:15px}
.warning .container button{
margin:1em auto}
.warning svg{
width:50px;height:50px}
.warning .w{
display:none}
.warning .cancel-button{
cursor:pointer;position:absolute;right:15px;top:15px}
#timeout-warning-webgl-disabled{
display:none}
#timeout-warning-info,#timeout-warning-confirm,#timeout-warning-header,#timeout-warning-header-done{
display:none}
.popup{
background-color:rgba(0,0,0,0.8);color:#fafafa;display:none;left:15px;position:fixed;text-align:center;width:calc(100vw - 30px);top:36px;z-index:4000}
.popup .container{
margin:0 auto;max-width:400px;padding:15px}
.popup .cancel-button{
cursor:pointer;position:absolute;right:15px;top:15px}
body.three-running{
overflow:hidden}
#three-container{
display:none}
#three-canvas{
background-color:#000;outline:none;z-index:10000}
#hud{
color:#0c0c0c;display:none;position:relative;top:0;left:0;text-align:center}
#hud #hud-menu{
display:none}
#hud #hud-menu-sub{
display:none}
#hud #hud-menu-record-video{
display:none}
#hud .w{
background-color:rgba(0,0,0,0.4);height:auto;left:50vw;max-width:90vw;opacity:0;padding:20px 70px;position:fixed;top:50vh;transform:translate(-50%,-50%);transition:opacity 500ms,visibility 500ms;visibility:hidden}
#hud .w.visible{
opacity:1;transition:opacity 500ms,visibility 500ms;visibility:visible}
#hud-exit-button{
border:0 none;background:transparent;cursor:pointer;left:auto;margin:0;padding:0;position:fixed;right:10px;top:10px;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:40px}
#hud-exit-button:focus{
background:transparent}
#three-video{
width:0;height:0;left:0;top:0;position:absolute;overflow:hidden}
#toggle-animation-button{
width:66px;height:48px;position:fixed;left:1em;bottom:1em;display:none}
#toggle-animation-button .visible{
display:block}
#toggle-animation-button svg{
position:absolute;max-height:100%;max-width:100%}
#toggle-animation-button .pause{
display:none}
#toggle-animation-button.play .play{
display:none}
#toggle-animation-button.play .pause{
display:block}
.leaflet-map-pane canvas{
z-index:100}
.leaflet-map-pane svg,.leaflet-tile-pane{
z-index:200}
.leaflet-pane,.leaflet-overlay-pane{
z-index:400}
.leaflet-shadow-pane{
z-index:500}
.leaflet-marker-pane{
z-index:600}
.leaflet-tooltip-pane{
z-index:650}
.leaflet-popup-pane{
z-index:700}
.leaflet-zoom-box{
z-index:800}
.leaflet-control{
z-index:800}
.screen{
z-index:999}
.leaflet-top,.leaflet-bottom,header.main,footer.main{
z-index:1000}
#onboardings{
z-index:3000}
#hud,#hud .w,#hud-exit-button{
z-index:11000}
@media screen and (min-width:400px){
.screen[data-name="about"].visible .team li{
max-width:47%;float:left;margin:0 2.99% 0 0}
.screen[data-name="about"].visible .team li:nth-child(2n){
margin:0 0 0 2.99%}
.screen[data-name="about"].visible .manifest.questions span{
display:block}
}
@media screen and(maxHeight:500px) and(orientation:landscape){
#map-container{
font-size:0.8em}
}
@media screen and (min-width:500px){
body{
font-size:14px}
.screen.list .location .artifact picture,.screen.list .artist .artifact picture{
width:50%;float:right}
.screen.list .location .artifact .info,.screen.list .artist .artifact .info{
width:45%}
.screen[data-name="help"].visible .sub{
font-size:inherit}
.screen[data-name="about"].visible .team{
margin:0 0 5em}
.screen[data-name="about"].visible .mission .manifest{
width:80%}
.screen[data-name="about"].visible .support img{
width:auto;height:70px}
}
@media screen and (min-width:800px){
body{
font-size:16px}
.screen-visible:not(.about) #map-container{
width:calc(100vw - 520px)}
.screen-visible:not(.about) #timeout-warning,.screen-visible:not(.about) #toofar-warning,.screen-visible:not(.about) .popup{
width:calc(100vw - 515px)}
.screen.visible{
left:auto;right:0;width:500px}
.screen[data-name="list"] .detail .button.close{
display:none}
.screen[data-name="about"].visible{
font-size:20px}
.screen[data-name="about"].visible .content{
margin:120px auto 0;padding:0 50px}
.screen[data-name="about"].visible .artist-list{
font-size:1.5em}
.screen[data-name="about"].visible .mission > div,.screen[data-name="about"].visible .mission .challenge{
margin:120px 0 0}
.screen[data-name="about"].visible .mission .solution{
display:inline-block}
.screen[data-name="about"].visible .mission .solution .explained{
width:55%;float:left;margin:0}
.screen[data-name="about"].visible .mission .solution picture{
float:right;width:35%;margin:0}
.screen[data-name="about"].visible .mission .solution picture img{
margin:0}
.screen[data-name="about"].visible .mission .manifest{
margin:0 auto;max-width:1200px;width:70%}
.screen[data-name="about"].visible .mission .manifest.questions{
margin:1em auto}
.screen[data-name="about"].visible .mission .challenge picture{
max-width:40%;float:left;height:auto}
.screen[data-name="about"].visible .mission .challenge picture img{
width:100%;height:auto}
.screen[data-name="about"].visible .mission .challenge .postulate{
float:right;max-width:55%;margin:0}
.screen[data-name="about"].visible .team li{
width:31%}
.screen[data-name="about"].visible footer{
background:linear-gradient(#0c0c0c 0,#fafafa 420px);padding:70px 0 50px;font-size:18px}
.screen[data-name="about"].visible footer svg.logo{
right:50px}
}
@media screen and (min-width:1200px){
.screen.visible{
width:600px}
.screen-visible:not(.about) #map-container{
width:calc(100vw - 620px)}
.screen-visible:not(.about) #timeout-warning,.screen-visible:not(.about) .popup{
width:calc(100vw - 615px)}
.screen[data-name="about"].visible{
font-size:30px}
.screen[data-name="about"].visible .cities ul li{
font-size:2em}
.screen[data-name="about"].visible .mission .manifest{
font-size:2em}
.screen[data-name="about"].visible .mission .solution .explained,.screen[data-name="about"].visible .mission .challenge .postulate{
width:50%}
.screen[data-name="about"].visible .mission .solution picture,.screen[data-name="about"].visible .mission .challenge picture{
width:45%}
.screen[data-name="about"].visible .featured-artist .artists{
font-size:1.5em}
.screen[data-name="about"].visible .featured-artist .artists .artifact-name{
font-size:1.2em}
.screen[data-name="about"].visible footer{
background:linear-gradient(#0c0c0c 0,#fafafa 470px)}
}
@media screen and (min-width:1600px){
.screen.visible{
width:700px}
.screen-visible:not(.about) #map-container{
width:calc(100vw - 720px)}
.screen-visible:not(.about) #timeout-warning,.screen-visible:not(.about) .popup{
width:calc(100vw - 720px)}
}
#arm-pointer-lock-activate {
z-index: 10900;
}
#arm-pointer-lock-activate button {
background: transparent;
}