@import url(https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap);
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
html,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,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}ol,ul{list-style:none}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}a:focus{outline:thin dotted}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace, serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"“" "”" "‘" "’"}small{font-size:80%}sub{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;top:-0.5em}sub{bottom:-0.25em}img{max-width:100%;height:auto}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"]{-webkit-appearance:button;cursor:pointer}input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}.clearfix{zoom:1}.clearfix:before{content:"";display:table}.clearfix:after{content:"";display:table;clear:both}html{font-family:'Roboto', sans-serif;line-height:1;font-size:16px}a{text-decoration:none;color:black}h1{color:#FF4384;font-size:36px;font-weight:bold;letter-spacing:0px}h2{color:#fff;font-size:24px;font-weight:bold;letter-spacing:0px}h3{color:#003164;font-size:16px;font-weight:bold;letter-spacing:0px}.container{width:100vw;height:100vh;display:-webkit-box;display:flex;overflow:hidden}.container>div{-webkit-box-flex:0;flex:0 0 450px}.col-6.col-6{-webkit-box-flex:2;flex-grow:2;background-color:#FFEDF7}.col-2.col-2{-webkit-box-flex:0;flex-grow:0;background-color:#FFEDF7}.col-4.col-4{-webkit-box-flex:1;flex-grow:1;background-color:#003164}.task{width:450px;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column wrap;padding:48px 85px}.add-todo{display:-webkit-box;display:flex;-webkit-box-flex:0;flex:0 0 40px;margin:0 2.5px 100px 2.5px}.add-todo input{padding:16px;-webkit-box-flex:1;flex-grow:1;border:none}.add-todo input::-webkit-input-placeholder{color:#FF4384;font-size:inital;font-weight:bold;letter-spacing:0px;font-style:italic}.add-todo input::-moz-placeholder{color:#FF4384;font-size:inital;font-weight:bold;letter-spacing:0px;font-style:italic}.add-todo input:-ms-input-placeholder{color:#FF4384;font-size:inital;font-weight:bold;letter-spacing:0px;font-style:italic}.add-todo input::-ms-input-placeholder{color:#FF4384;font-size:inital;font-weight:bold;letter-spacing:0px;font-style:italic}.add-todo input::placeholder{color:#FF4384;font-size:inital;font-weight:bold;letter-spacing:0px;font-style:italic}.add-todo input:focus{border:none;outline:none}.add-todo button{width:40px;cursor:pointer;border:none;outline:none}.add-todo__input{background-color:#fff}.add-todo__btn{color:#FF4384;font-size:16px;font-weight:bold;letter-spacing:0px;background-color:#fff}.list h3{padding:10px}.list li{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row wrap;-webkit-box-align:center;align-items:center;border-bottom:1px solid rgba(0,49,100,0.2)}.list-item--ative{padding:20px 0px}.list-item--ative h3{color:#003164;font-size:24px;font-weight:bold;letter-spacing:0px}.list-item__checked{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row wrap;border:2px solid #003164;background-color:transparent;border-radius:100%;width:24px;height:24px}.list-item__checked.list-item__checked--active{width:48px;height:48px}.list-item__infos{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column wrap;max-width:85%}.list-item__amount-list{display:-webkit-box;display:flex;margin-left:10px}.list-item__amount-list li{width:12px;height:12px;border:1px solid #FF4384;border-radius:50%;margin-right:5px;background-color:#FF4384}.list-item__time{display:-webkit-box;display:flex;color:#FF4384;font-size:170px;font-weight:bold;letter-spacing:0px}.list-item__btn{display:-webkit-box;display:flex;border-radius:50%;border:none;text-align:center;padding:20px 30px}.list-item__btn--big{width:96px;height:96px;color:#FF4384;font-size:50px}.list-item__btn--big::after{content:"";display:inline-block;width:14px;height:14px;background-color:#fff;position:absolute;left:100%;bottom:0px}.list-item__btn--small{width:24px;height:24px;border:2px solid #003164;font-size:12px;padding:3px 5px;color:#003164;background-color:transparent}.count-down{width:500px;height:500px;position:absolute;top:15%;border:2px solid #FF4384;border-radius:50%}.process-mask{position:absolute;top:0%;width:250px;height:500px;overflow:hidden}.process-mask.right{right:0}.process-mask.left{left:0}.process-bar{width:476px;height:476px;border-radius:50%;border:12px solid transparent;-webkit-transform:rotate(45deg);transform:rotate(45deg);position:absolute}.process-bar.right{border-top:12px solid #FF4384;border-right:12px solid #FF4384;right:0%}.process-bar.left{border-bottom:12px solid #003164;border-left:12px solid #003164;left:0%}.rightcircle{-webkit-animation:circle_right 2.5s linear;animation:circle_right 2.5s linear}.leftcircle{-webkit-animation:circle_left 1.5s linear;animation:circle_left 1.5s linear;-webkit-animation-delay:2.5s;animation-delay:2.5s}@-webkit-keyframes circle_right{0%{-webkit-transform:rotate(-135deg);transform:rotate(-135deg)}100%{-webkit-transform:rotate(45deg);transform:rotate(45deg)}}@keyframes circle_right{0%{-webkit-transform:rotate(-135deg);transform:rotate(-135deg)}100%{-webkit-transform:rotate(45deg);transform:rotate(45deg)}}@-webkit-keyframes circle_left{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg)}100%{-webkit-transform:rotate(225deg);transform:rotate(225deg)}}@keyframes circle_left{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg)}100%{-webkit-transform:rotate(225deg);transform:rotate(225deg)}}.circle{border-radius:50%;width:96%;height:96%;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);background-color:#FF4384}.circle .list-item__btn--big{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.nav{display:-webkit-box;display:flex;-webkit-box-pack:end;justify-content:flex-end}.nav li{padding:48px 48px 0px 48px;cursor:pointer}.nav i{color:#fff;font-size:30px;font-weight:normal;letter-spacing:0px}.logo{-webkit-transform:rotate(90deg);transform:rotate(90deg);-webkit-transform-origin:49px 100%;transform-origin:49px 100%;cursor:pointer;margin-top:100%}.logo h2{color:#fff}