.metro .form
{
    padding: 20px 20px 20px 20px;
    border: 1px solid #CCC;
    position: relative;
    margin: 0px 0px 10px;
    background-color: #FDFDFD !important;
    min-height: 100px;
    display: block;
}


.metro .span1,
.metro .size1 {
  width: 8% !important;
}
.metro .span2,
.metro .size2 {
  width: 17% !important;
}
.metro .span3,
.metro .size3 {
  width: 25% !important;
}
.metro .span4,
.metro .size4 {
  width: 33% !important;
}
.metro .span5,
.metro .size5 {
  width: 42% !important;
}
.metro .span6,
.metro .size6 {
  width: 50% !important;
}
.metro .span7,
.metro .size7 {
  width: 58% !important;
}
.metro .span8,
.metro .size8 {
  width: 67% !important;
}
.metro .span9,
.metro .size9 {
  width: 75% !important;
}
.metro .span10,
.metro .size10 {
  width: 83% !important;
}
.metro .span11,
.metro .size11 {
  width: 92% !important;
}
.metro .span12,
.metro .size12 {
  width: 100% !important;
}

@media only screen and (max-width: 800px) {
  
.metro .span1,
.metro .size1 {
  width: 50% !important;
}
.metro .span2,
.metro .size2 {
  width: 50% !important;
}
.metro .span3,
.metro .size3 {
  width: 50% !important;
}
.metro .span4,
.metro .size4 {
  width: 50% !important;
}
.metro .span5,
.metro .size5 {
  width: 100% !important;
}

.metro .span6,
.metro .size6 {
  width: 100% !important;
}

.metro .span7,
.metro .size7 {
  width: 100% !important;
}
.metro .span8,
.metro .size8 {
  width: 100% !important;
}
.metro .span9,
.metro .size9 {
  width: 100% !important;
}
.metro .span10,
.metro .size10 {
  width: 100% !important;
}
.metro .span11,
.metro .size11 {
  width: 100% !important;
}
.metro .span12,
.metro .size12 {
  width: 100% !important;
}

}