body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}a,a:hover,a:visited{color:inherit;}:focus{outline:0;}body{line-height:1;color:black;background-color:#666;font-family:Arial,Verdana,Helvetica,sans-serif;}ol,ul{list-style:none;}table{border-collapse:separate;border-spacing:0;}caption,th,td{text-align:left;font-weight:normal;}blockquote:before,blockquote:after,q:before,q:after{content:"";}blockquote,q{quotes:"" "";}
body{overflow:hidden; width:100%; height:100%; background-color:#fff; color:#2b2b2b; font-family:Helvetica, Arial, Verdana;}
h1{margin:5% auto 2%; width:70%; font-size:35px; font-weight:bold; text-align:left; line-height:45px;}
p{margin:0 auto 2%; width:70%; line-height:24px; font-size:18px;}

.accelerometer{float:left; width:50%; margin-bottom:3.5%;}
.gyroscope{float:right; width:50%; margin-bottom:3.5%;}
h2{margin:0 auto 2%; width:40%; font-size:10px; color:#f0f0f0; font-weight:bold;}
ul{margin:0 auto 2%; width:40%; font-size:20px; color:#e0e0e0; font-weight:bold;}
li{display:block;}

.particle{position:absolute; width:50px; height:50px; -webkit-border-radius:50px; background-color:rgba(221, 137, 000, 1);}
.particle.animate{-webkit-transition:all .25s ease-out;}

#wrap{position:relative; width:100%; height:100%; overflow:hidden;}

.mcontainer {
	-webkit-perspective: 300; 
	perspective: 300;
}