body {
margin: 0;
font-size: 0.9em;
}

#banks{width:90% margin 0 auto;}
@media screen and (max-width: 600px) {
    
    #banks {width:90%;
       display: block;
    }

}


 #cardNoLabel {
    position: relative;
    line-height: 15px
}
 #cardNoLabel:after {
    position: absolute;
    content: "";
    width: 30px;
    height: 20px;
    top: 50px;
    left: 5px;
    background: url('karttipi.png') no-repeat;
    background-size: 30px 62px
}
 #cardNoLabel.amex:after {
    background-position: 0 -42px
}
 #cardNoLabel.mastercard:after {
    background-position: 0 0
}
 #cardNoLabel.visa:after {
    background-position: 0 -21px
}
 #cardNoLabel.icon-hidden:after {
    display: none
}

table.tbl { 
    top: 0; background-color:#EDEDED; border: 1px solid #ccc !important;
  border-collapse: collapse;border-radius:3px;
  border-spacing: 0; float:left; padding:2px;
  width: 23%;  margin:0px 8px 15px 10px; display:inline-block; vertical-align:top;

}

table.tbl td {
  text-align: center;
  padding: 8px; border: 1px solid #fff; 
}
table.tbl th { text-align:center; color: #000000; padding:2px 8px;}
table.tbl tr:nth-child(even){background-color: #f2f2f2; }
table.tbl td:nth-child(2){width:100%}
@media screen and (max-width: 600px) {
 table.tbl {
    width: 100%;

  }
}

table#t {
  border-collapse: collapse; background:#fff;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd; display: table;clear: both; margin-top:20px;
}

table#t th, table#t td {
  text-align: left;
  padding: 8px;
}

table#t tr:nth-child(even){background-color: #f2f2f2}



hr {
    border: none;
    border-top: 1px dashed #ccc;
  }

.col-25 {
  float: left;
  width: 35%;
  margin-top: 6px; text-align:left
}

.col-75 {
  float: left;
  width: 65%;
  margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

input#gobutton{  margin-top:0px;
cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
padding:25px; /*add some padding to the inside of the button*/
background:#28bff9; /*the colour of the button*/
width:100%;
border:1px solid #fff; 
/*style the text*/
color:#f3f3f3;
font-size:1.1em; font-weight:bold;  display: table;clear: both;border-radius:10px;
}
/***NOW STYLE THE BUTTON'S HOVER AND FOCUS STATES***/
input#gobutton:hover, input#gobutton:focus{
background-color :#11b9f9; /*make the background a little darker*/
}
#formunki{width:65%; text-align:center; margin:auto}
.copy{ width:100%; text-align:center}
fieldset
{


padding:26px;	
}


.legend
{
  margin-bottom:0px;
  margin-left:16px;
}
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
  #formunki{ width:100%}
}
.header {
  background-color: #fff;
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
margin-top:5px; float:left;
  width: 100%;
border-bottom: 1px dashed #ccc !important;
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #fff;
}

.header li a {
  display: block; color:#000 !important;
  padding: 20px 20px;
  border-right: 1px solid #f4f4f4;
  text-decoration: none;font-size: 1.4em;
}

.header li a:hover,
.header .menu-btn:hover {
  background-color: #f4f4f4;
}

.header .logo {
  display: block;
  float: left;
  font-size: 2em;
  padding: 10px 20px;
  text-decoration: none;
}

/* menu */

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}

/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: 240px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

/* 48em = 768px */

@media (min-width: 48em) {
  .header li {
    float: left;
  }
  .header li a {
    padding: 20px 30px;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
}