* {
  box-sizing : border-box;
}
body{
    margin: 0;
    padding: 0;

}


.credit-card {
  width            : 40%;
  /* min-height       : 100px; */
  margin           : 60px auto 0;
  border           : 1px solid #ddd;
  background-color : #004062;
  border-radius: 15px;
  padding: 1em 2em;
  box-shadow: 15px 15px 5px;
  position: relative;
}
/* Diverse Divs */
.form-body {
  min-height    : 340px;
  position: relative;
  /* padding-bottom: 30px; */
}
.form-header{
    min-height: 100px;
    position: relative;
    text-align: center;
}


.date-field{
    position: relative;
    text-align: center;
}


/**/

.title
{
 font-size: 1.875em;
 font-family: 'roboto',sans-serif;
 float: left;
 color: white;

}

.cardlogos-header {

   position: relative;
   display:inline-block;
   width: 100%;
   height: 100%;
}

/* common */
input,select{
    opacity: .7;
    background-color : #004062;
    color: white;
    font-size: 0.875em;
    padding: 5px;
}
.cvv-details, .ExpDate{
    color: white;
    font-size: 0.875em;
    font-family: 'roboto',sans-serif;
}

.month, .year{
    display: inline-block;
}

.card-holder{float: left;clear:both;position: relative;width: 100%;margin-top: 10px;margin-bottom: 10px;}

/* cvv */
.cvv-input{
 /* margin-top: 10px; */
 text-align: center;
 /* clear: both; */
}


.proceed-btn{
    /* float: right; */
    font-family: 'roboto',sans-serif;
    background-color: #989898;
    border: 1px solid white;
    height: 30px;
    /* clear: both; */
}

.yourpaylogo{
    max-height: 60px;
    float: right;
}

.Chip{
    max-width: 10%;
    position: relative;
    float: left;
    margin-top: 10px;
    /* clear: both; */
}

.card-number{
    width: 100%;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
}

.proceed-btn a {
  text-decoration : none;
  cursor          : pointer;
  color           : black;

}


@media screen and (max-width: 480px) {
    .credit-card {
        width:  100% !important;
    }
}