@import url(http://fonts.googleapis.com/css?family=Fira+Sans:400,700);body{font-family:'Fira Sans', 'Helvetica Neue', Arial, sans-serif}h1,h2,h3,h4,h5,h6{margin:0}h1{font-size:18px;line-height:1}.SignIn__button,.Todo__delete-btn,.AddTodo__btn{display:inline-block;webkit-appearance:none;border:1px solid #E1633E;color:#E1633E;padding:12px;margin:0;background:transparent;border-radius:4px;font-size:16px;line-height:1;cursor:pointer}.SignIn__button>*,.Todo__delete-btn>*,.AddTodo__btn>*{vertical-align:middle}.SignIn__button{border-color:#fff;color:#fff}.Todo__delete-btn{border:0}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes loading{0%{-webkit-transform:translateY(0);transform:translateY(0)}25%{-webkit-transform:translateY(12px);transform:translateY(12px);opacity:0}50%{-webkit-transform:translateY(0);transform:translateY(0)}75%{-webkit-transform:translateY(-12px);transform:translateY(-12px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes loading{0%{-webkit-transform:translateY(0);transform:translateY(0)}25%{-webkit-transform:translateY(12px);transform:translateY(12px);opacity:0}50%{-webkit-transform:translateY(0);transform:translateY(0)}75%{-webkit-transform:translateY(-12px);transform:translateY(-12px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0)}}.Header{background:#E1633E;color:#fff;text-align:center;padding:16px}.Header__name{font-size:12px;color:#FFF4F0}.SignIn{box-sizing:border-box;width:375px;height:667px;padding:32px;background:#E1633E;color:#fff;text-align:center}.SignIn__title{margin-bottom:16px}.SignIn__body{position:relative;height:75px;margin-top:-75px;top:50%}.SignIn__button{width:100%}.List{width:100%;overflow:hidden}.List__list-items{display:block;margin:0;padding:0;max-height:507px;width:100%;padding-right:24px;overflow-y:scroll;overflow-x:hidden}.List--hasCompleted .List__list-items{max-height:441px}.List__clear-btn{box-sizing:border-box;display:block;background:#FFF4F0;color:#E1633E;border:0;outline:0;margin:0;cursor:pointer;width:100%;padding:24px;font-size:16px;position:absolute;bottom:0;-webkit-transition:all 200ms cubic-bezier(0.5, -0.25, 0.5, 1.25);transition:all 200ms cubic-bezier(0.5, -0.25, 0.5, 1.25)}.List__clear-btn[disabled]{-webkit-transform:translateY(70px);transform:translateY(70px);opacity:0}.List__clear-btn .clearIcon{fill:#E1633E;padding:2px;border:1px solid #E1633E;border-radius:50%;vertical-align:middle;margin-left:12px}.Todo{display:block;background:#fff;border-bottom:1px solid #EEE;padding:24px;width:91%}.Todo__input{box-sizing:border-box;display:inline-block;width:76%;padding:8px;font-size:16px;border:0}.Todo__input:focus{outline:none;text-decoration:none}.Todo__input--done{text-decoration:line-through}.Todo-enter{opacity:0.01;-webkit-transform:translateY(-25px);transform:translateY(-25px)}.Todo-enter.Todo-enter-active{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition:all 400ms cubic-bezier(0.5, -0.5, 0.25, 1.5);transition:all 400ms cubic-bezier(0.5, -0.5, 0.25, 1.5)}.Todo-leave{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition:all 400ms cubic-bezier(0.5, -0.5, 0.25, 1.5);transition:all 400ms cubic-bezier(0.5, -0.5, 0.25, 1.5)}.Todo-leave.Todo-leave-active{opacity:0.01;-webkit-transform:translateY(-125px);transform:translateY(-125px)}.AddTodo{display:block;background:#fff;border-bottom:1px solid #EEE;padding:24px}.AddTodo__input{margin-left:42px;box-sizing:border-box;display:inline-block;width:74%;padding:8px;font-size:16px;border:0}.AddTodo__input:focus{outline:none;text-decoration:none}.Checkbox{display:inline-block;padding:4px 16px 4px 0;vertical-align:middle}.Checkbox input{display:none}.Checkbox__svg{overflow:hidden}.Checkbox__svg rect{fill:#fff;stroke:#CCC}.Checkbox__svg path{fill:#fff;-webkit-transform:translateY(50px);transform:translateY(50px)}.Checkbox__svg *{-webkit-transition:all 200ms cubic-bezier(0.15, 0.85, 0.25, 1.15);transition:all 200ms cubic-bezier(0.15, 0.85, 0.25, 1.15)}.Checkbox__svg--checked rect{fill:#E1633E;stroke:#E1633E}.Checkbox__svg--checked path{-webkit-transform:translateY(0);transform:translateY(0)}body,html{margin:0;padding:0}body{background:#ffe1d7}.App{width:375px;height:667px;margin:32px auto;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,0.15);position:relative;overflow:hidden;-webkit-animation:fadeIn 200ms ease-in;animation:fadeIn 200ms ease-in}@media (max-width: 650px){.App{margin:0}}.App--signed-in *,.App--loading *{-webkit-animation:fadeIn 200ms ease-in-out;animation:fadeIn 200ms ease-in-out}.App__loading-body{width:64px;height:64px;text-align:center;position:absolute;top:50%;left:50%;margin-top:-32px;margin-left:-32px;color:#E1633E}.App__loading-spinner{margin-bottom:12px}.App__loading-spinner:before,.App__loading-spinner:after{content:"";display:block;width:16px;height:8px;margin:0 auto;background:#E1633E}.App__loading-spinner:before{top:8px;-webkit-animation:loading 2s ease-in-out 0.5s infinite;animation:loading 2s ease-in-out 0.5s infinite}.App__loading-spinner:after{top:16px;-webkit-animation:loading 2s ease-in-out infinite;animation:loading 2s ease-in-out infinite}