body,html{overflow:hidden;margin:0}body{background:#000}canvas{-webkit-transition:opacity 1s 2s;transition:opacity 1s 2s;opacity:0}canvas.show{opacity:1}.loader{-webkit-transition:opacity 1s,visibility 1s;transition:opacity 1s,visibility 1s;position:absolute;margin:auto;top:0;right:0;bottom:0;left:0;width:44px;height:120px}.loader.hide{opacity:0;visibility:hidden}.description{color:#fff;text-align:center;position:absolute;width:100%;bottom:20px}.percentage{color:grey;font-family:sans-serif;font-weight:lighter;text-align:center;position:absolute;bottom:0;background:grey;height:4px}.house-part1,.house-part2,.house-part3{position:absolute;width:40px;height:40px;top:0;overflow:hidden;margin-left:-20px;left:50%}.house-part1:before,.house-part2:before,.house-part3:before{content:"";display:block;width:80%;height:80%;background:red;-webkit-transform:translate(13%,82%) rotate(45deg);transform:translate(13%,82%) rotate(45deg)}.house-part1{-webkit-transform:translate(0,-18px) rotate(0);transform:translate(0,-18px) rotate(0);-webkit-animation:housePart1 2s infinite;animation:housePart1 2s infinite}.house-part1:before{background:-webkit-linear-gradient(45deg,#0ff,#00f);background:linear-gradient(45deg,#0ff,#00f);-webkit-animation:colorsAnimation 2s infinite;animation:colorsAnimation 2s infinite}.house-part2{-webkit-transform:translate(14px,2px) rotate(45deg);transform:translate(14px,2px) rotate(45deg);-webkit-animation:housePart2 2s infinite;animation:housePart2 2s infinite}.house-part2:before{background:-webkit-linear-gradient(45deg,#ff00ff,red);background:linear-gradient(45deg,#ff00ff,red);-webkit-animation:colorsAnimation 7s infinite;animation:colorsAnimation 7s infinite}.house-part3{-webkit-transform:translate(-13px,31px) rotate(-135deg);transform:translate(-13px,31px) rotate(-135deg);-webkit-animation:housePart3 2s infinite;animation:housePart3 2s infinite}.house-part3:before{background:-webkit-linear-gradient(45deg,#ff0,orange);background:linear-gradient(45deg,#ff0,orange);-webkit-animation:colorsAnimation 23s infinite;animation:colorsAnimation 23s infinite}@-webkit-keyframes housePart1{0%{-webkit-transform:translate(0,-18px);transform:translate(0,-18px)}33%{-webkit-transform:translate(14px,2px) rotate(45deg);transform:translate(14px,2px) rotate(45deg)}66%{-webkit-transform:translate(-13px,31px) rotate(-135deg);transform:translate(-13px,31px) rotate(-135deg)}100%{-webkit-transform:translate(0,-18px);transform:translate(0,-18px)}}@keyframes housePart1{0%{-webkit-transform:translate(0,-18px);transform:translate(0,-18px)}33%{-webkit-transform:translate(14px,2px) rotate(45deg);transform:translate(14px,2px) rotate(45deg)}66%{-webkit-transform:translate(-13px,31px) rotate(-135deg);transform:translate(-13px,31px) rotate(-135deg)}100%{-webkit-transform:translate(0,-18px);transform:translate(0,-18px)}}@-webkit-keyframes housePart2{0%{-webkit-transform:translate(14px,2px) rotate(45deg);transform:translate(14px,2px) rotate(45deg)}33%{-webkit-transform:translate(-13px,31px) rotate(-135deg);transform:translate(-13px,31px) rotate(-135deg)}66%{-webkit-transform:translate(0,-18px);transform:translate(0,-18px)}100%{-webkit-transform:translate(14px,2px) rotate(45deg);transform:translate(14px,2px) rotate(45deg)}}@keyframes housePart2{0%{-webkit-transform:translate(14px,2px) rotate(45deg);transform:translate(14px,2px) rotate(45deg)}33%{-webkit-transform:translate(-13px,31px) rotate(-135deg);transform:translate(-13px,31px) rotate(-135deg)}66%{-webkit-transform:translate(0,-18px);transform:translate(0,-18px)}100%{-webkit-transform:translate(14px,2px) rotate(45deg);transform:translate(14px,2px) rotate(45deg)}}@-webkit-keyframes housePart3{0%{-webkit-transform:translate(-13px,31px) rotate(-135deg);transform:translate(-13px,31px) rotate(-135deg)}33%{-webkit-transform:translate(0,-18px);transform:translate(0,-18px)}66%{-webkit-transform:translate(14px,2px) rotate(45deg);transform:translate(14px,2px) rotate(45deg)}100%{-webkit-transform:translate(-13px,31px) rotate(-135deg);transform:translate(-13px,31px) rotate(-135deg)}}@keyframes housePart3{0%{-webkit-transform:translate(-13px,31px) rotate(-135deg);transform:translate(-13px,31px) rotate(-135deg)}33%{-webkit-transform:translate(0,-18px);transform:translate(0,-18px)}66%{-webkit-transform:translate(14px,2px) rotate(45deg);transform:translate(14px,2px) rotate(45deg)}100%{-webkit-transform:translate(-13px,31px) rotate(-135deg);transform:translate(-13px,31px) rotate(-135deg)}}@-webkit-keyframes colorsAnimation{0%{background:-webkit-linear-gradient(45deg,#0ff,#00f);background:linear-gradient(45deg,#0ff,#00f)}25%{background:-webkit-linear-gradient(45deg,#ff00ff,red);background:linear-gradient(45deg,#ff00ff,red)}50%{background:-webkit-linear-gradient(45deg,#ff0,orange);background:linear-gradient(45deg,#ff0,orange)}75%{background:-webkit-linear-gradient(45deg,#000,grey);background:linear-gradient(45deg,#000,grey)}100%{background:-webkit-linear-gradient(45deg,#0ff,#00f);background:linear-gradient(45deg,#0ff,#00f)}}@keyframes colorsAnimation{0%{background:-webkit-linear-gradient(45deg,#0ff,#00f);background:linear-gradient(45deg,#0ff,#00f)}25%{background:-webkit-linear-gradient(45deg,#ff00ff,red);background:linear-gradient(45deg,#ff00ff,red)}50%{background:-webkit-linear-gradient(45deg,#ff0,orange);background:linear-gradient(45deg,#ff0,orange)}75%{background:-webkit-linear-gradient(45deg,#000,grey);background:linear-gradient(45deg,#000,grey)}100%{background:-webkit-linear-gradient(45deg,#0ff,#00f);background:linear-gradient(45deg,#0ff,#00f)}}