*
{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
body
{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  background:#eee;
  -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  flex-flow: column nowrap;
  justify-content: space-between;
}

.container
{
  width:80%;
  padding: 20px;
}

.container h2
{
  width: 100%;
  color:navy;
  font-size: 36px;
  text-align:center;
  margin-bottom:10px;
}

.container .row100
{
  position: relative;
  width:100%;
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
}

.container .row100 .col
{
  position:relative;
  width:100%;
  padding:0 10px;
  margin:30px 0 10px;
  transition:0.5s;
}

.container .row100 .inputBox
{
  position:relative;
  width:100%;
  height:40px;
  color:navy;
}

.container .row100 .inputBox input,
.container .row100 .inputBox.textarea textarea
{
  position:absolute;
  width:100%;
  height:100%;
  background:transparent;
  box-shadow: none;
  border:none;
  outline: none;
  font-size:18px;
  font-weight: bold;
  padding:0 10px;
  z-index:1;
  color:white;
}

.container .row100 .inputBox .text
{
  position:absolute;
  top:0;
  left:0;
  line-height: 40px;
  font-size: 18px;
  padding: 0 10px;
  display: block;
  transition:0.5s;
  pointer-events: none;
}

.container .row100 .inputBox input:focus + .text,
.container .row100 .inputBox input:valid + .text
{
  top:-35px;
  left:-10px;
}

.container .row100 .inputBox .line
{
  position: absolute;
  bottom:0;
  display:block;
  width:100%;
  height:2px;
  background:#99a3a4 ;
  transition: 0.5s;
  border-radius: 2px;
  pointer-events: none;
}

.container .row100 .inputBox input:focus ~ .line,
.container .row100 .inputBox input:valid ~ .line
{
  height: 100%;
}

.container .row100 .inputBox.textarea
{
  position:relative;
  width:100%;
  height: 100px;
  padding: 10px 0;
}

.container .row100 .inputBox.textarea textarea
{
  height: 100%;
  resize: none;
}
.container .row100 .inputBox textarea:focus + .text,
.container .row100 .inputBox textarea:valid + .text
{
  top:-35px;
  left:-10px; f
}

.container .row100 .inputBox textarea:focus ~ .line,
.container .row100 .inputBox textarea:valid ~ .line
{
  height: 100%;
}
input[type="submit"]
{
  border:none;
  padding: 7px 35px;
  cursor:pointer;
  outline: none;
  font-weight: bold;
  background:#99a3a4;
  color:#fff;
  font-size: 18px;
  border-radius: 2px;
}