@font-face {
    font-family: "Open Sans";
    src: url(../fonts/OpenSans-Regular-webfont.woff2) format("woff2"), url(../fonts/OpenSans-Regular-webfont.woff) format("woff"), url(../fonts/OpenSans-Regular-webfont.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Open Sans";
    src: url(../fonts/OpenSans-Semibold-webfont.woff2) format("woff2"), url(../fonts/OpenSans-Semibold-webfont.woff) format("woff"), url(../fonts/OpenSans-Semibold-webfont.ttf) format("truetype");
    font-weight: 700;
    font-style: normal;
}

html {
    box-sizing: border-box;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    font-size: 62.5%;
}

body, h1 {
    font-size: 1rem;
}

p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}


a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
    margin: 0;
    border: 0;
    padding: 0;
    font: inherit;
    vertical-align: baseline;
}

body,
button,
input,
keygen,
select,
textarea {
    font-family: "Open Sans", sans-serif;
    color: #4a4a50;
}

h3 {
  font-size: 1.2rem;
  line-height: 3rem;
  margin-bottom: 20px;
}

.no-touch .payment-list.payment-list__column .payment-list--link .payment-list--text, .touch .payment-list.payment-list__column .payment-list--link .payment-list--text {
    color: #4a4a50;
}

main, header, section, footer {
  margin: 0;
  padding: 20px;
  border: 1px solid #000000;
  color: #ffffff;
}

.Header {
  padding: 0 10px;
  color: #fff;
  text-align: left;
  background-color: #414141;
  height: 64px;
}

.Header__logo {
    position: absolute;
    display: inline-block;
}

.Header__logo {
    text-align: center;
    padding-right: 10px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.Header__logo-holder {
    width: 130px;
    height: 57px;
    overflow: hidden;
}

.Header__logo-animation {
    width: 260px;
    height: 134px;
    -webkit-transform: scale(.5) translate(-50%,-50%);
    transform: scale(.5) translate(-50%,-50%);
    background-image: url(../images/logo_spritesheet.png);
    position: absolute;
    top: 0;
    left: 0;
}

#container {
  padding: 10px;
}

.container.footer {
    padding: 28px 0px 30px 0;
    align-items: center;
    max-width: 150px;
    height: 310px;
}

.container:has( > #params) {
    height: 30px;
    max-width: 100%;
}

#choseMethod {
    margin: 10px auto;
}

#params input {
    max-width: 150px;
}

/* #options, #choseMethod {
  display: flex;
  flex-direction: column;
} */

.row {
    display: flex;
    width: 300px;
    height: 40px;
}

.col {
    flex: 1;
}

#options label {
    width: 120px;
}

button {
    margin: 0px auto;
    max-width: 150px;
}

#pay {
    width: 100%;
    height: 35px;
}

#paybutton {
    padding: 10px 0 20px;
}

.payment-list--item .grow {
  -moz-transition: height .5s;
  -ms-transition: height .5s;
  -o-transition: height .5s;
  -webkit-transition: height .5s;
  transition: height .5s;
  height: 0;
  overflow: hidden;
}

/* @media screen and (min-width: 640px){
    #container {
        display: flex;
    }

    #config {
        flex: 0 1 300px;
        background: #d22b1f;
    }

    #integrations {
        flex: 0 1 300px;
        background: #129a22;
    }

    #securefields {
        flex: 1;
        border: 1px solid #000000;
        background: #673ab7;
    }
}

@media screen and (min-width: 800px){

} */