* {
  padding: 0;
  margin: 0
}
*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { display: table; content: ''; }
.clearfix:after { clear: both; }
body {
  
    color: #fa8072;
  font-family: ocr-a-std, monospace;
  position: relative;
}
body {
  background: black;
}
li {
  list-style: none
}
a {
  text-decoration: none
}
div.bot {
  position: fixed;
  -webkit-animation: fall 9s 1 linear;
  animation: fall 9s 1 linear;
}

div.bot pre {
  -webkit-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear;
}

@-webkit-keyframes fall {
  from {top: -6em;}
  to {top: 4000px;} /* > vertically oriented '4k' monitor */
}
@keyframes fall {
  from {top: -6em;}
  to {top: 4000px;}
}

@-webkit-keyframes spin {
    from {-webkit-transform:rotate(0deg);}
    to {-webkit-transform:rotate(360deg);}
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}
h1 {


}
h2 {
    padding: 0 0 .7em 0;
}
.wrapper {
  width: 80%;
  margin: auto;
}
p {
    padding: 0 0 1em 0;
    font-family: t26-carbon, monospace;

font-weight: 100;

font-style: normal;
color: #ccc
}
p a {
  color: inherit
}
 header  ul li {
    margin: 0 7em;
}
p.heading {
    color: #ff07ea;
    padding: 2em 0;
}
/*.pp {
  height: 100%;
  position: relative;
  width: 50px;
  top: 0;
  left: 0;
}
.pp a {
position: absolute;
    bottom: 30px;
    left: -80px;
    transform: rotate(90deg);
    width: 200px;
    font-size: 11px;
    color: #666;
    text-decoration: none;
}*/
@media only screen and (max-width: 800px) {
 header ul li {
    margin: 0 1em;
} 
}



.box {
  height: 300px;
    border-radius: 19px;
    margin: 4em 0 2em 0;
    background-size: cover;
    background-position: center center;
}
.coinland {
  background-image: url(images/coinland04.jpg)
}
.goodman {
  background-image: url(images/goodman01.jpg)
}
.circa {
background-image: url(images/circa01.jpg) }
.eftpos {
background-image: url(images/eftpos01.jpg) }
.jack {
background-image: url(images/jack05.png) }
.jcd {
background-image: url(images/jcdecaux01.jpg) }
.pl {
background-image: url(images/pocketlegal02.jpg) }
.jeremie {
background-image: url(images/jeremie06.jpg) }

a.projectLink {
    position: relative;
    text-decoration: none;
    color: #f91ae6
}
a.projectLink:before {
    content: "";
    width: 16px;
    height: 1px;
    position: absolute;
    top: 8px;
    background: #f91ae6;
    right: -41px;
    transform: rotate(-45deg);
}
a.projectLink:after {
        position: absolute;
    right: -40px;
    border: 1px solid #f91ae6;
    width: 14px;
    height: 14px;
    content: "";
    border-left: none;
    border-bottom: none;
    top: 2px;
}
footer {
  margin: 3em 0;
}
footer p {
  font-size: 0.7em
}
.wrapper {
  width: 85%;
  margin:auto;
}
header {
    padding: 3em 0;
}
a.logo {
    color: #fff;
}
ul.menu li {
    float: right;
    text-align: right;
    margin: 0 0 0 2.5em;
}
ul.menu li a {
    color: #fff;
}
.row.pageHeading h1 {
    font-size: 11em;
    opacity: 0.2;
    text-align: center;
    color: #01ffdd;
    position: fixed;
    width: 100%;
    z-index: 9;
    user-select: none;
    text-shadow: 1px 1px 6px black;
}
.pp ul {
    padding: 0 0 1.2em 2em;
}
.pp ul li {
    color: #ccc;
    font-size: 1em;
    font-family: t26-carbon, monospace;
    list-style: hebrew;
}


@media only screen and (min-width: 800px) and (max-width: 950px) {
.row.pageHeading h1 {
    font-size: 8em;
}
}
@media only screen and (min-width: 700px) and (max-width: 799px) {
.row.pageHeading h1 {
    font-size: 7em;
    position: relative;
}
}
@media only screen and (max-width: 699px) {
.row.pageHeading h1 {
    font-size: 3em;
    position: relative;
}
p {
  font-size: 1.7em 
}
.pp ul li {
    font-size: 1.7em;
}
}