header .plus{
    color: #24a777;
    font-size: 26px;
    line-height: 1;
}
.calc{
  position: relative;
}
.namein{
    width: 80%;
    margin: 0 auto 30px;
}
.namein::after{
    content: " ";
    display: block;
    clear: both;
}
.name{
  display: block;
  float: left;
  width: 60%;
  font-size: 20px;
  padding: 8px 2%;
  line-height: 1;
  border: none;
  outline: 3px solid #ccc;
  -webkit-transition: outline 300ms ease-out;
  -moz-transition: outline 300ms ease-out;
  -o-transition: outline 300ms ease-out;
  transition: outline 300ms ease-out;
}
button,
.namein span{
   display: block;
   float: right;
   width: 8%;
   height: 39px;
   line-height: 1;
   font-weight: 700;
   margin-left: 3%;
   font-size: 39px;
   border: none;
   outline: 3px solid #ccc;
   color: #24a777;
   -webkit-transition: outline 300ms ease-out;
   -moz-transition: outline 300ms ease-out;
   -o-transition: outline 300ms ease-out;
   transition: outline 300ms ease-out;
}
.namein span{
    font-size: 26px;
    line-height: 38px;
}
button{
    cursor: pointer;
}
.namein button:nth-child(2){
    background-image: url('restart.png');
    background-repeat: no-repeat;
    background-position: center;
}
#name:focus,
button:hover{
    outline: 3px solid #24a777;
}
@media all and (max-width: 580px){
    .namein{
        width: 100%;
    }
    .name{
        width: 54%;
    }
    button,
    .namein span{
        width: 10%;
    }
}