html, body, .page {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  transition: all .8s cubic-bezier(0.54, 0.35, 0.29, 0.99);
  -webkit-transition: all .8s cubic-bezier(0.54, 0.35, 0.29, 0.99);
  -moz-transition: all .8s cubic-bezier(0.54, 0.35, 0.29, 0.99);
  -o-transition: all .8s cubic-bezier(0.54, 0.35, 0.29, 0.99);  
  color: #fff;
  overflow: hidden; 
}

* {
  font-family: 'Raleway','open sans', 'lato', 'helvetica', sans-serif;
}
ul#menu {
    position: absolute;
}
.page {
    position: absolute;
    left: 100%;
}

#myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
  }
  .scene .carre{
    width:200px;
    height:200px;
    background-color:red;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
  }
  #p1:target ~ .demo-1 #p1 {
      left:100px;
      background-color:blue;
  }
  #p2:target ~ .demo-1 #p2 {
      left:100px;
      background-color:green;
  }
  #p3:target ~ .demo-1 #p2 {
      left:100px;
      background-color:purple;
  } 
  #p4:target ~ .demo-1 #p3 {
    left:100px;
    background-color:purple;
  }