@charset 'UTF-8';

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html, body{
  height: 100%;
  width:100%;
}

body{
  background: #edf0f1;
  padding-top:54px;
}

body, input, button{

 font-family: 'Roboto', sans-serif;
}

.noFill{
  fill:none;
}

header{

  width:58.9%;
  height: 80px;
  position: relative;
  padding:15px;
  top:-15px;
  margin:0 auto;
  z-index: 5;
  background: #28a1be;
  box-shadow: 0px 2px 4px rgba(44,62,80, .8);
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

header input{
	width:100%;
	height:50px;
	float:left;
  color:#fff;
  font-size: 15px;
  font-weight: 400;
  text-indent:18px;
  padding:0 60px 0 0;
  background: rgba(255,255,255,.2);
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border:0px;
  box-shadow: none;
  outline: none;

  -webkit-appearance:none;
  -moz-appearance:none;
  -ms-appearance:none;
  -o-appearance:none;
  appearance:none;
  
}

header input::-webkit-input-placeholder{

  color:rgba(255,255,255,0.75);
  

}

header input::-moz-input-placeholder{

  color:rgba(255,255,255,0.75);
  
}

header input::-o-input-placeholder{

  color:rgba(255,255,255,0.75);
  
}

header input::-ms-input-placeholder{

  color:rgba(255,255,255,0.75);
  
}

header button{

  width:50px;
  height: 50px;
  position: absolute;
  top:15px;
  right:15px;
  z-index: 2;
  border-radius: 25px;
  background: #fff;
  border:0;
  box-shadow: none;
  outline: none;
  cursor:pointer;

  -webkit-appearance:none;
  -moz-appearance:none;
  -ms-appearance:none;
  -o-appearance:none;
  appearance:none;
}

header button svg{
  width:16px;
  position: absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;

}

header button svg .fill{
  fill:#28a1be;
}

.container{
  width:60%;
  padding:15px;
  position: relative;
  top:-2px;
  margin:0 auto;
}

.todo{
  width:100%;
  float: left;
}

.todo li{
  list-style-type: none;
  width:100%;
  min-height: 50px;
  float: left;
  font-size: 14px;
  font-weight: 500;
  color: #444;
  line-height: 22px;
  background: #fff;
  position: relative;
  border-radius: 5px;
  box-shadow: 0px 1px 2px rgba(44,62,80, 0.10);
  margin:0 0 10px 0;
  padding:14px 100px 14px 14px;
}

.todo li:last-of-type{
  margin-bottom: 0;
}

.todo li .buttons{

  width:100px;
  height: 50px;
  position: absolute;
  top:0;
  right:0;
}

.todo li .buttons button{

  width:50px;
  height: 50px;
  float: left;
  background: none;
  position: relative;
  border:0px;
  box-shadow: none;
  outline: none;
  cursor:pointer;

  -webkit-appearance:none;
  -moz-appearance:none;
  -ms-appearance:none;
  -o-appearance:none;
  appearance:none;

}


.todo li .buttons button:last-of-type:before{

  content: "";
  width:1px;
  height: 30px;
  position: absolute;
  top:10px;
  left:0;
  background: #edf0f1;



}



.todo li .buttons button svg{
  width:22px;
  height: 22px;
  position: absolute;
  top:50%;
  left:50%;
  margin:-11px 0 0 -11px;
}

.todo li .buttons button.complete svg {

  border-radius: 11px;
  border:1.5px solid #25b99a;
  transition:background 0.2s ease;
}

.todo#completed li .buttons button.complete svg{
  background: #25b99a;
  border:0px;
}

.todo:not(#completed) li .buttons button.complete:hover svg{
 background: rgba(37,185,154,0.75);
 
}

.todo:not(#completed) li .buttons button.complete:hover svg .fill{
  fill:#fff;
  
}

.todo#completed li .buttons button.complete svg .fill{
  fill:#fff;
  
}


.todo li .buttons button svg .fill{

  transition:fill 0.2s ease;

}

.todo li .buttons button.remove svg .fill{

  fill:#c0cecb;

}

.todo li .buttons button.remove:hover svg .fill{
  fill:#dd1c32;
}

.todo li .buttons button.complete svg .fill{

  fill:#25b99a;

}

.todo#completed:not(:empty){
  position: relative;
  padding:60px 0 0 0;
}

.todo#completed:not(:empty):before{
 content: "Completed";
 width:150px;
 height: 1px;
 background:#d8e5e0;
 position: absolute;
 top:30px;
 left: 0;
 margin: auto;
 right: 0;
 text-align: center;
 text-transform: uppercase;
 font-size: 22px;
 letter-spacing: .03em;
 color:#25b99a;
}

/*  header*/





.header-wrap {
  width: 100%;
  background: hsla(240,17%,99%,0.97);
  border-bottom: 0.0625em solid #fff;
  position: fixed;
  top:0;
  z-index: 10;
}

.wrapper {
  position: relative;
  width:100%;
  margin: 0 auto;
}

nav, nav ul {
  width: 100%;
  height: 4em;
  display: inline-block;
  position: relative;
}


.header-wrap #logo {
  width: 30%;
  width: 100%;
  text-align: center;
  margin: 0 0 0 -10.285714%;
  margin: 0;
  line-height: 4em;
  display: block;
  position: absolute;
  position: relative;
  text-transform: uppercase;
  z-index: 1;
}

#logo h2, .container h2{
  color: #07170c;
  letter-spacing: .065em;

}

#logo a {
  display: block;
  text-decoration: none;
}

a.effect-shine:hover {
  -webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%);
  -webkit-mask-size: 200%;
  animation: shine 2s infinite;
}

@-webkit-keyframes shine {
  from {
    -webkit-mask-position: 150%;
  }
  
  to {
    -webkit-mask-position: -50%;
  }
}


@media(max-width: 650px){

  .container{
    width:100%;
    float:left;
    top:60px;
  }

  header{
    width:100%;
    top:63px;
    position: fixed;
  }

}