@import "https://fonts.googleapis.com/css?family=Roboto|Source+Sans+Pro";
* {
  margin:0px;
  padding:0px;
  box-sizing:border-box;
  text-decoration:none;
}
body {
  background:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.7)),url("https://goo.gl/op28UD") center no-repeat;
  bakground-size:cover;
  height:100vh;
}
.form {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:640px;
  height:360px;
  background:transparent;
}
.form > div {
  width:50%;
  height:100%;
  padding:15px;
}

.form > div.left {
  float:left;
  text-align:center;
  background:rgba(0,220,200,0.5);
  padding-top:80px;
  color:#eee;
}
.form .left h2 {
  font-size:42px;
  font-family:"Source sans pro",sans-serif;
  margin-bottom:8px;
}
.form .left > p {
  color:#ddd;
  font-size:14px;
  font-family:"Roboto",sans-serif;
}
.form .left > div {
  margin-top:40px;
}
.form .left > div p {
  font-family:"Roboto",sans-serif;
  font-size:16px;
  margin-bottom:20px;
}
.form .left > div a {
  color:#111;
  font-family:"Roboto",sans-serif;
  text-transform:uppercase;
  padding:8px 20px;
  background:#eee;
}

.form .right {
  display:flex;
  flex-wrap:wrap;
  padding-top:20px;
  padding-left:20px;
  padding-right:20px;
  background:#fafafa;
}
.form .right .row-2,.form .right .row {
  display:flex;
  justify-content:space-between;
  margin:5px 0px;
}
.form .right .row > div ,.form .right .row{
  width:100%;
}
.form .right .row-2 > div {
  width:47%;
}
.form .right input {
  width:100%;
  height:32px;
  border:1px solid #ccc;
  font-family:"Source sans pro",sans-serif;
  padding-left:8px;
  margin-top:3px;
}
.form .right input[type="button"] { 
  background:#333;
  color:#eee;
  font-family:"Source sans pro",sans-serif;
  text-transform:uppercase;
  height:40px;
  font-size:17px;
}
.form .right label {
  color:#444;
  font-family:"Source sans pro",sans-serif;
}