body{
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	background: url(images/pepel.jpg) no-repeat;
	background-size: cover;
}


.middle{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.btn{
  position: relative;
  display: block;
  background: url();
  color: #6EB5FF;
  font-size: 14px;
  font-family: "verdana";
  text-decoration: none;
  margin: 10px 0;
  border: 2px solid #F8E1E7;
  padding: 14px 10px;
  text-transform: uppercase;
  overflow: hidden;
  transition: 1s all ease;
}
.btn::before{
  background: #ced9ed;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: -1;
  transition: all 0.6s ease;
}

.btn1::before{
  width: 0%;
  height: 100%;
}

.btn1:hover::before{
  width: 100%;
}


.btn2::before{
  width: 100%;
  height: 0%;
}
.btn2:hover::before{
  height: 100%;
}

.btn3::before{
  width: 100%;
  height: 0%;
  transform: translate(-50%,-50%) rotate(45deg);
}
.btn3:hover::before{
  height: 380%;
}

.btn4::before{
  width: 100%;
  height: 0%;
  transform: translate(-50%,-50%) rotate(-45deg);
}
.btn4:hover::before{
  height: 380%;
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}

.btnsubmit{
  position: relative;
  display: block;
  background: url();
  color: #efc8dd;
  font-size: 14px;
  font-family: "verdana";
  text-decoration: none;
  margin: 10px 0;
  border: 2px solid #d7e9db;
  padding: 14px 10px;
  text-transform: uppercase;
  overflow: hidden;
  transition: 1s all ease;
}

.btnsubmit::before{
  background: #33b5e5;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: -1;
  transition: all 0.6s ease;
}


.panel-body{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
}