 <head>
<meta charset="UTF-8">
<meta name="description" content="Architectures of Participation">
<meta name="keywords" content="The Bartlett School of Architecture,Participation,Architectures of Participation,Urban Design, B-Pro, RC 12, London, Architecture, University College London, Participatory Systems, Technology, Adam Greenfield, Usman Haque, Baonan Jiao, Cassie Cui, Huan Liu, Jianing Zheng, Jiaying Yang, Masayuki Sado, Meiying Yu, Moritz Maria Karl, Qingrui Meng, Tianyue Li, Yiying Hao, Yuan-Tse Kao, Yu Zhang, Xin Yu">
<meta name="author" content="RC 12">
</head> 

/*BUTTON HOVER*/

body {
  font-family: "Courier New", Courier, monospace;
  oncontextmenu="return false";
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* .button */

.hover {
    display: inline-block;
  position: fixed;
  font-family: Impact, Charcoal, sans-serif;
  top:0;
  font-size: 3.5vw;
  z-index: 9999;
  font-weight: bold;
    border: none;
    overflow: hidden;
    outline: none;
    background: transparent;
  cursor: pointer;
  font-weight: bold;
}


.hover span {
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -o-transition: 0.6s;
    transition: 0.6s;
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    transition-delay: 0.1s;
}

.hover:before,
.hover:after {
    content: '';
    position: absolute;
    width: 100%;
    text-align: left;
    opacity: 0;
    -webkit-transition: .4s,opacity .6s;
    -moz-transition: .4s,opacity .6s;
    -o-transition: .4s,opacity .6s;
    transition: .4s,opacity .6s;
}

/* :before */

.hover:before {
    content: attr(data-hover);
    -webkit-transform: translate(-150%,0);
    -moz-transform: translate(-150%,0);
    -ms-transform: translate(-150%,0);
    -o-transform: translate(-150%,0);
    transform: translate(-150%,0);
}

/* :after */

.hover:after {
    content: attr(data-active);
    -webkit-transform: translate(150%,0);
    -moz-transform: translate(150%,0);
    -ms-transform: translate(150%,0);
    -o-transform: translate(150%,0);
    transform: translate(150%,0);
}

/* Span on :hover and :active */

.hover:hover span,
.hover:active span {
    opacity: 0;
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    -ms-transform: scale(0.3);
    -o-transform: scale(0.3);
    transform: scale(0.3);
}

/*  
    We show :before pseudo-element on :hover 
    and :after pseudo-element on :active 
*/

.hover:hover:before,
.hover:active:after {
    opacity: 1;
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -ms-transform: translate(0,0);
    -o-transform: translate(0,0);
    transform: translate(0,0);
    -webkit-transition-delay: .1s;
    -moz-transition-delay: .1s;
    -o-transition-delay: .1s;
    transition-delay: .1s;
}

/* 
  We hide :before pseudo-element on :active
*/

.hover:active:before {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}


* {
  box-sizing: border-box;
}

loc {
  position: fixed;
  background-color: white;
  top:0;
  height: 4.5vw;
  width: 100%;
  z-index: 99;
}

ud {
    font-family: Impact, Charcoal, sans-serif;
  position: fixed;
  float:right;
  top: 2vw;
  right: 2vw;
  font-size: 1.5vw;
  z-index: 999;
  font-weight: bold;
}

imgCaption {
  position: relative;
    font-weight: bold;
  padding: 0.1vw;
  font-size: 1.5vw;
  /*
      font-family: Impact, Charcoal, sans-serif;
  */
  
  font-family: Impact, Charcoal, sans-serif;
}

imgCaption2 {
  position: relative;
  font-size: 2vw;
  float: left;
  padding: 1.5em;
}


/* ---- button ---- */

.button {
  display: inline-block;
  font-family: "Courier New", Courier, monospace;
  border: none;
  font-size: 1.5vw;
    color:black;
  cursor: pointer;
  background-color: white;
}

.button:hover {
  color: white;
  background-color: black;
}

.button:active,
.button.is-checked {
  font-weight: bold;
  background-color: black;
}

.button.is-checked {
  color:white;
}

.button:active {}


/* ---- button-group ---- */

.button-group:after {
  content: '';
  display: block;
  clear: both;
}


/*DISTANCE AND STUFF BETWEEN THE BUTTONS*/

.button-group .button {

}


/* ---- isotope ---- */

.grid {
  width: 100%;
  top: 17vw;
}


/* clear fix */

.grid:after {
  content: '';
  display: block;
  clear: both;
}


/* ui group */

.ui-group {
  display: inline-block;
}

.ui-group .button-group {
  display: inline-block;
  top: 4.1vw;
  position: fixed;
  z-index: 99;
  background-color: white;
}


/* color-shape */

.color-shape {
  float: left;
  width: 7vw;
  height: auto;
  /*
    filter: grayscale(100%);
  */
}


/* CAN BE DELETED LATER */

.color-shape.redbaonan {
  float: left;
  width: 7vw;
  height: auto;
}

.color-shape.redaddie {
  float: left;
  width: 7vw;
  height: auto;
}

.color-shape.redjianing {
  float: left;
  width: 7vw;
  height: auto;
}

.color-shape.bluekao {
  float: left;
  width: 7vw;
  height: auto;
}

.color-shape.bluequin {
  float: left;
  width: 7vw;
  height: auto;
}

.color-shape.bluecassie {
  float: left;
  width: 7vw;
  height: auto;
}

.color-shape.bluetian {
  float: left;
  width: 7vw;
  height: auto;
}

.color-shape.yellowjia {
  float: left;
  width: 7vw;
  height: auto;
}

.color-shape.yellowmasa {
  float: left;
  width: 7vw;
  height: auto;
}

.color-shape.yellowmo {
  float: left;
  width: 7vw;
  height: auto;
}

.color-shape.greenhuan {
  float: left;
  width: 7vw;
  height: auto;
}

.color-shape.greenmeiying {
  float: left;
  width: 7vw;
  height: auto;
}

.color-shape.greenxin {
  float: left;
  width: 7vw;
  height: auto;
}

.color-shape.black {
  float: left;
  width: 7vw;
  height: auto;
}

.color-shape.orange {
  float: left;
  width: 14vw;
  height: 1.8em;
  overflow:hidden;
}

.color-shape.magenta {
  display: block;
  float: left;
  width: 14vw;
  height: 1.8em;
  overflow:hidden;
}

.color-shape.cyan {
    display: block;
  float: left;
  width: 14vw;
  height: 1.8em;
  overflow:hidden;
}

.color-shape.wide, .color-shape.big { 
    display: block;
  width: 14vw;
  height: 1.8em;
    overflow:hidden;
}


/* ---- .grid-item ---- */

.color-shape:hover {
  text-decoration: underline;
  cursor: pointer;
  /*
    opacity: 0.5;
    filter: alpha(opacity=50) grayscale(100%);
  */
  filter: grayscale(0);
}

.color-shape.is-expanded {
  width: 40vw;
  height: auto;
    filter: grayscale(0);
}

.color-shape.wide.is-expanded {
  width: 40vw;
}

.color-shape.is-expanded:hover {
  width: 40vw;
  height: auto;
}

.color-shape.wide.is-expanded:hover {
  width: 40vw;
}