body{padding-top:50px;padding-bottom:20px;background:-webkit-linear-gradient(-45deg,#22bcb9,#006c67);background:linear-gradient(-45deg,#22bcb9,#006c67)}.body-content{padding-left:15px;padding-right:15px}input,select,textarea{max-width:280px}*,*:before,*:after{box-sizing:border-box}html,body{height:100%;margin:0;padding:0;width:100%}.calorie-counter{background:-webkit-linear-gradient(top left,#4d4d4d,#000);background:linear-gradient(to bottom right,#4d4d4d,#000);-webkit-animation:load 1s ease-out forwards;-moz-animation:load 1s ease-out forwards;animation:load 1s ease-out forwards;-webkit-transform:translate3d(-50%,-40%,0);-moz-transform:translate3d(-50%,-40%,0);-ms-transform:translate3d(-50%,-40%,0);-o-transform:translate3d(-50%,-40%,0);transform:translate3d(-50%,-40%,0);background-color:#4d4d4d;border-radius:4px;box-shadow:36px 36px 76px 0 rgba(0,0,0,.26),16px 16px 100px 0 #0b2b08;color:#fff;height:640px;font-family:"Offside",sans-serif;font-weight:500;left:50%;opacity:0;padding:38px 46px;position:absolute;text-align:center;top:50%;width:400px}.calorie-counter__title{color:#666;font-size:18px;margin-bottom:10px}.calorie-counter__date{font-size:22px;margin-bottom:15px}.chart svg{height:100%;width:100%}.chart__background{fill:none;height:100%;position:relative;stroke:#5a5a59;stroke-width:20px;width:100%}.chart__foreground{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);-webkit-transition:stroke-dashoffset 1s ease-in;-moz-transition:stroke-dashoffset 1s ease-in;transition:stroke-dashoffset 1s ease-in;fill:none;height:100%;left:0;position:absolute;stroke-dasharray:630px;stroke-dashoffset:630px;stroke-linecap:round;stroke-width:20px;stroke:#35f0ed;top:0;width:100%}.chart__count{color:#999;font-size:16px;position:relative}.chart__count div{color:#fff;font-size:22px}.chart .chart__container{display:inline-block;height:100%;position:relative;width:100%}.chart--calorie .chart__container{height:220px;width:220px}.chart--calorie .chart__count{top:-135px}.chart--protein,.chart--carbs{float:left;margin-bottom:50px;text-align:left;width:50%}.chart--protein .chart__container,.chart--carbs .chart__container{height:30px;width:30px}.chart--protein .chart__foreground,.chart--carbs .chart__foreground{stroke:#b1fff8}.chart--protein .chart__count,.chart--carbs .chart__count{color:#999;display:inline-block;font-size:14px;padding-left:10px;position:relative;text-align:left;top:2px;overflow:hidden}.chart--protein .chart__count div,.chart--carbs .chart__count div{color:#fff;font-size:14px}.chart--carbs{float:none;overflow:hidden}.chart--carbs .chart__foreground{stroke:#fec6a8}.calorie__count{background-color:#b584ff;padding:23px}.calorie__count__consumed,.calorie__count__remaining{font-size:16px}.calorie__count__consumed span,.calorie__count__remaining span{display:block;font-size:22px}.calorie__count__consumed{overflow:hidden}.calorie__count__remaining{background-color:#fff;box-shadow:19px 19px 49px 0 rgba(0,0,0,.36);color:#4d4d4d;float:right;padding:24px;position:relative;right:-15px;top:-35px;width:60%}@-webkit-keyframes load{from{-webkit-transform:translate3d(-50%,-40%,0);opacity:0}to{-webkit-transform:translate3d(-50%,-50%,0);opacity:1}}@-moz-keyframes load{from{-moz-transform:translate3d(-50%,-40%,0);opacity:0}to{-moz-transform:translate3d(-50%,-50%,0);opacity:1}}@keyframes load{from{-webkit-transform:translate3d(-50%,-40%,0);-moz-transform:translate3d(-50%,-40%,0);-ms-transform:translate3d(-50%,-40%,0);-o-transform:translate3d(-50%,-40%,0);transform:translate3d(-50%,-40%,0);opacity:0}to{-webkit-transform:translate3d(-50%,-50%,0);-moz-transform:translate3d(-50%,-50%,0);-ms-transform:translate3d(-50%,-50%,0);-o-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0);opacity:1}}.clock{position:relative;font-family:monaco,consolas,"courier new",monospace;font-size:2.3rem;line-height:1.375}.clock:before,.clock:after{position:absolute;top:0;bottom:0;content:':';z-index:2;line-height:1.15;color:#333}.clock:before{left:2.325em}.clock:after{right:2.325em}.clock span{position:relative;display:inline-block;padding:0 .25em;margin:0 .06125em;z-index:1;-webkit-transform:perspective(750);-moz-transform:perspective(750);-ms-transform:perspective(750);transform:perspective(750);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d}.clock span:first-child{margin-left:0}.clock span:last-child{margin-right:0}.clock span:nth-child(2),.clock span:nth-child(4){margin-right:.3em}.clock span:nth-child(3),.clock span:nth-child(5){margin-left:.3em}.clock span:before,.clock span:after{position:absolute;left:0;top:0;right:0;bottom:0;color:#eee;text-shadow:0 1px 0 #fff;background:#333;border-radius:.125em;outline:1px solid transparent;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:-webkit-transform .75s,opacity .75s;-moz-transition:-moz-transform .75s,opacity .75s;-ms-transition:-ms-transform .75s,opacity .75s;transition:transform .75s,opacity .75s}.clock span:before{opacity:1;z-index:1;content:attr(data-old);-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translate3d(0,0,0) rotateX(0);-moz-transform:translate3d(0,0,0) rotateX(0);-ms-transform:translate3d(0,0,0) rotateX(0);transform:translate3d(0,0,0) rotateX(0)}.clock span:after{opacity:0;z-index:2;content:attr(data-now);-webkit-transform-origin:0 100%;-moz-transform-origin:0 100%;-ms-transform-origin:0 100%;transform-origin:0 100%;-webkit-transform:translate3d(0,-102.5%,0) rotateX(90deg);-moz-transform:translate3d(0,-102.5%,0) rotateX(90deg);-ms-transform:translate3d(0,-102.5%,0) rotateX(90deg);transform:translate3d(0,-102.5%,0) rotateX(90deg)}.clock .flip:before{opacity:0;-webkit-transform:translate3d(0,102.5%,0) rotateX(-90deg);-moz-transform:translate3d(0,102.5%,0) rotateX(-90deg);-ms-transform:translate3d(0,102.5%,0) rotateX(-90deg);transform:translate3d(0,102.5%,0) rotateX(-90deg)}.clock .flip:after{opacity:1;-webkit-transform:translate3d(0,0,0) rotateX(0);-moz-transform:translate3d(0,0,0) rotateX(0);-ms-transform:translate3d(0,0,0) rotateX(0);transform:translate3d(0,0,0) rotateX(0)}.clock-box{padding:3.5em 0}