/* @import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900); */
body {
    background-color: #141414;
    background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEyMCc+Cgk8ZGVmcz4KCQk8cGF0dGVybiBwYXR0ZXJuVW5pdHM9J3VzZXJTcGFjZU9uVXNlJyBpZD0nYycgd2lkdGg9JzYwJyBoZWlnaHQ9JzEyMCcgeD0nMCcgeT0nMCcgdmlld0JveD0nMCAwIDUgMTAnPgoJCQk8cGF0aCBmaWxsLW9wYWNpdHk9JzAnIHN0cm9rZT0nIzI5MjkyOScgc3Ryb2tlLXdpZHRoPScwLjA5JyBkPSdNLTIsMUw3LDEwTS0yLDZMNywxNU0tMiwtNEw3LDUnLz4KCQk8L3BhdHRlcm4+CgkJPHBhdHRlcm4gcGF0dGVyblVuaXRzPSd1c2VyU3BhY2VPblVzZScgaWQ9J2MyJyB3aWR0aD0nNjAnIGhlaWdodD0nMTIwJyB4PScxMDAlJyB5PScwJyB2aWV3Qm94PScwIDAgNSAxMCc+CgkJCTxwYXRoIGZpbGwtb3BhY2l0eT0nMCcgc3Ryb2tlPScjMjkyOTI5JyBzdHJva2Utd2lkdGg9JzAuMDknIGQ9J003LDFMLTIsMTBNNyw2TC0yLDE1TTcsLTRMLTIsNScvPgoJCTwvcGF0dGVybj4KCTwvZGVmcz4KCTxyZWN0IHdpZHRoPSc1MCUnIGhlaWdodD0nMTAwJScgZmlsbD0ndXJsKCNjKScvPgoJPHJlY3QgeD0nNTAlJyB3aWR0aD0nNTAlJyBoZWlnaHQ9JzEwMCUnIGZpbGw9J3VybCgjYzIpJy8+Cjwvc3ZnPg==');
    
      margin:0; padding:0;
      overflow-x:hidden;
      height:100%;
      font-family: 'Lato', Helvetica, arial, sans-serif;
      font-weight: 300;
      font-size: 20px;
      line-height: 1.45;
      color: #eee;
      color: rgba(255,255,255,.85);
  }
  #container { 
      padding-top: 50px;
  }
  #content {
      max-width: 43em;
      padding:10px;
      margin: 0 auto;
  }
  h1 {
      font-size: 4.8em;
      font-weight: 100;
      text-transform: uppercase;
      margin: 0;
  }
  h3 {
      font-size: 2.4em;
      font-weight: 300;
      line-height: 1.5;
  }
  p, li {
      font-size: 1.7em;
  }
  a {
      font-weight: 700;
      text-decoration: none;
      color: #fff;
  }
  a:hover {
      text-decoration: underline;
  }
  p#pleft {
      max-width:20em;
      float:left;
  }
  p#pright {
      max-width:20em;
      float:left;
  }
  ul {
      clear:both;
  }
  
  
  html { font-size: 62.5%; }
  body { font-size: 1em;}
  
  .note{
    background-color: #0b0b0b; /* or any other background color */
    padding: 10px;
    border-radius: 5px;
    font-style: italic;
  }
 
  /* PYRAMID CODE */
  .stage {
    -webkit-transform:scale(1.85);
    transform:scale(0.85);
    float:right;
    margin-right:120px;
    margin-top:30px;
    width:0px; height:0px;
    
    position:relative;  
    -webkit-perspective:1200px;
    -webkit-perspective-origin:50% 50%;
    perspective:1200px;
    perspective-origin:50% 50%;
  }
  .pyramid3d {
    position:relative;
    width:150px;
    height:150px;
    
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateX(75deg) rotate(65deg);
    transform: rotateX(75deg) rotate(65deg);
    -webkit-animation: turnPyramid 10s linear infinite;
    animation: turnPyramid 10s linear infinite;
  }
  .triangle {
    -webkit-transform-style:preserve-3d;
    transform-style:preserve-3d;
    width:0; height:0;
    background:none;
  }
  .triangle:before{
    content:"";
    position: absolute;
    height: 0; width: 0;
    border-style: solid;
    border-width: 176px 75px 0 75px;
  }
  .side1 { -webkit-transform: translatex(0) rotatey(115.2deg) rotatez(90deg); transform: translatex(0) rotatey(115.2deg) rotatez(90deg); }
  .side2 { -webkit-transform: translatex(150px) rotatez(90deg) rotatex(64.8deg); transform: translatex(150px) rotatez(90deg) rotatex(64.8deg); }
  .side3 {  -webkit-transform: translatez(0) rotatex(64.8deg); transform: translatez(0) rotatex(64.8deg); }
  .side4 { -webkit-transform: translatey(150px) rotatex(115.2deg); transform: translatey(150px) rotatex(115.2deg); }
  .side1:before{ border-color: rgba(115, 115, 0, 0.3) transparent transparent transparent; }
  .side2:before{ border-color: rgba(20, 90, 225, 0.3) transparent transparent transparent; }
  .side3:before{ border-color: rgba(255,   0, 0, 0.3) transparent transparent transparent; } 
  .side4:before{ border-color: rgba(0, 255, 255, 0.3) transparent transparent transparent; }
  
  
  @-webkit-keyframes turnPyramid { 100% { -webkit-transform: rotateX(75deg) rotate(425deg); } }
  @keyframes turnPyramid { 100% { transform: rotateX(75deg) rotate(425deg); } }
  
  @media (max-width: 300px) {
      html { font-size: 70%; }
      .stage { -webkit-transform:scale(0.05); transform:scale(0.05); }
  }
  @media (max-width: 440px) {
      h1 { line-height:55px; }    
  }
  @media (max-width: 460px) { 
    .stage { position:absolute; top:25px; left:50%; margin-left:-45px; } 
    h1 { margin-top:50px; text-align:center; }
  }
  @media (max-width:600px) { .stage { -webkit-transform:scale(0.55); transform:scale(0.55); margin-right:60px; } }
  @media (min-width: 600px) {
      html { font-size: 80%; }
      .stage { -webkit-transform:scale(0.68); transform:scale(0.68); margin-right:80px; }
  }
  @media (min-width: 880px) {
      html { font-size: 120%; }
      p, li { font-size: 1em; }
      p#pright { margin-left:3em; }
      .stage { -webkit-transform:scale(0.85); transform:scale(0.85); margin-right:120px; }
  }