.b1{
  border:1px solid #D3D3D3;
  border-radius:6px;
  box-sizing:border-box;
  font-family:inherit;
  font-size:11px;
  padding:10px 8px;
color:#7C7C7C;
}
.b2{

  box-sizing:border-box;
  margin-left: 190px;
    font-family:inherit;
  margin-top: -15px;
  color:#7C7C7C;
}
 .b3{
  border:1px solid #D3D3D3;
  border-radius:6px;
  box-sizing:border-box;
  font-family:inherit;
  font-size:15px;
  padding:10px 8px;
  background-color: #24B419;
  color: white;
width: 220px;
}

.b4 {
  border:1px solid #D3D3D3;
  border-radius:6px;
  box-sizing:border-box;
  font-family:inherit;
  font-size:15px;
  padding: 10px 10px 10px 10px ;
color:#7C7C7C;
width: 220px;
height: 100px;
}


#mail {visibility: hidden;}
#mail:checked ~ #popup form {visibility: visible;}
#mail:checked + label {
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  z-index: 99;
  background: #333333;
  cursor: pointer;
  opacity: 0.5;
}
#popup {
  visibility: hidden;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  z-index: 100;
}
#popup form {
font-family: "Lucida Grande", Tahoma; 
font-size: 11px;
  position: absolute;
  top: 50%; left: 50%;
 -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
text-align: center;
  font-size: 16px;
  color:#3b5998;
  background: #fff;
  border-radius: 10px;
  width: 240px;
  padding: 10px 10px 10px 10px ;
}
#popup div:nth-of-type(1) {padding-top: 3%;}
#popup div:nth-last-of-type(1) {padding: 1% 0 4%;}
#popup div:after {
  content: attr(data-title);
  display: block;
  font-size: 50%;
  font-weight: normal;
  text-shadow: none;
}
#popup input {font-size: 100%;}
#popup [type='submit'] {cursor: pointer;}
#popup label:hover {
  color: #dbeaf9;
  cursor: pointer;
}