html { 
  position: relative;
  min-height: 100%; 
}

body {
  margin-bottom: 60px; /* Margin bottom by footer height */
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
  line-height: 1.25em;
}

.container {
  
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px; /* Set the fixed height of the footer here */
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}

.creditCardForm {
    max-width: 700px;
    background-color: #fff;
    margin: auto;
    overflow: hidden;
    padding: 25px;
    color: #4c4e56;
}
.creditCardForm label {
    width: 100%;
    margin-bottom: 10px;
}
.creditCardForm .heading {
    text-align: center;
    color: #4c4e56;
}
.creditCardForm .footing {
    text-align: right;
    color: #4c4e56;
}
.creditCardForm .payment {
    float: left;
    font-size: 16px;
    padding: 10px 25px;
    margin-top: 20px;
    position: relative;
}
.creditCardForm .payment .form-group {
    float: left;
    margin-bottom: 15px;
}
.creditCardForm .payment .form-control {
    line-height: 40px;
    height: auto;
    padding: 0 16px;
}
.creditCardForm .owner {
    width: 63%;
    margin-right: 10px;
}
.creditCardForm #card-cvv {
    width: 18%;
	min-width:5em;
}
.creditCardForm #card-number-field {
    width: 100%;
}
.creditCardForm #expiration-date {
    width: 48%;
}
.creditCardForm #credit_cards {
    width: 20%;
    margin-top: 25px;
    text-align: right;
}
.creditCardForm #pay-now {
    width: 100%;
    margin-top: 25px;
}
.creditCardForm #pay-amount {
    width: 35%;
}

.creditCardForm #billing-address {
    width: 100%;
    margin-top: 25px;
}

.creditCardForm #card-addressUnit 	{  margin-left: 10px; width: 13%; min-width:5em; 	}
.creditCardForm #card-addressNum 	{  margin-left: 10px; width: 17%; min-width:5em;	}
.creditCardForm #card-addressName 	{  margin-left: 10px; width: 40%; min-width:12em;}
.creditCardForm #card-addressCity 	{  margin-left: 10px; width: 40%; min-width:12em;	}
.creditCardForm #card-addressProvince{ margin-left: 10px; width: 20%; min-width:5em;	}
.creditCardForm #card-addressPostal {  margin-left: 10px; width: 20%; min-width:6em;	}
.creditCardForm #addressPostal 		{  text-transform: uppercase;	  }

.creditCardForm .payment .btn {
    width: 100%;
    margin-top: 3px;
    font-size: 24px;
    background-color: #2ec4a5;
    color: white;
}
.creditCardForm .payment select {
    padding: 10px;
    margin-right: 15px;
}
.transparent {
    opacity: 0.2;
}
@media(max-width: 650px) {
    .creditCardForm .owner,
    .creditCardForm #pay-amount,
    .creditCardForm #expiration-date,
    .creditCardForm #credit_cards,
	.creditCardForm #card-addressName,
	.creditCardForm #card-addressPostal	{   width: 100%; 		}
	
	.creditCardForm #card-addressUnit,
	.creditCardForm #card-addressNum,
	.creditCardForm #card-cvv			{   width: 40%;  		}
		
    .creditCardForm #credit_cards 		{   text-align: left;	}
}