@font-face {
    font-family: 'aktiv-grotesk';
    font-weight: 400;
    src: url('fonts/aktiv-grotest-400.woff2') format('woff2'), url('fonts/aktiv-grotest-400.woff') format('woff'), url('fonts/aktiv-grotest-400.eot') format('embedded-opentype');
}

@font-face {
    font-family: 'aktiv-grotesk';
    font-weight: 700;
    src: url('fonts/aktiv-grotest-700.woff2') format('woff2'), url('fonts/aktiv-grotest-700.woff') format('woff'), url('fonts/aktiv-grotest-700.eot') format('embedded-opentype');
}

body {
    background: #fff !important;
}

.breadcrumbs {
    background: #fff !important;
}

figure img {
    max-width: 100%;
    max-height: inherit;
}
article#sumup figure {margin:0px;}
article#sumup {
    width: 100%;
    max-width:900px !important;
    display: block;
    margin: 0 auto;
}

article#sumup .logo {
    margin-top: 40px;
}
article#sumup h1, article#sumup h2, article#sumup h3, article#sumup h4, article#sumup h5, article#sumup p, article#sumup span, article#sumup a,article#sumup strong {font-family: 'aktiv-grotesk', arial, sans-serif !important;}

article#sumup p {
    font-size: 16px;
}

article#sumup p.small {
    font-size: 14px;
}
/* hero */
article#sumup .hero {display:flex; flex-direction:row; margin-top:40px;}
article#sumup .hero .text, article#sumup .hero .images {width:50%; display:flex; flex-flow:column; justify-content:center;}
article#sumup .hero h1 {
    font-family: 'aktiv-grotesk', arial, sans-serif !important;
    font-weight:700;
    font-size:66px;
    color:#000 !important;
    letter-spacing: -1px;
    margin: 0px;
    line-height: 0.9;
}

article#sumup .hero p {
    max-width: 260px;
}

/* card readers */
article#sumup .card-readers {text-align:center;margin-top:80px;display: flex;flex-direction: column;align-items: center;}
article#sumup .card-readers h2 {font-size:66px; font-weight:700; color:#000 !important; line-height:0.9; max-width:590px;}

/* cost */
article#sumup .card-readers .cost h3 {font-size:60px; margin-bottom:0px;}
article#sumup .card-readers .cost p {max-width:400px}
article#sumup .card-readers .threes {display:flex;gap: 30px;margin: 40px 0px;flex-wrap: wrap;justify-content: center;}

article#sumup .card-readers .threes div p {
    margin-top: 0px;
}

article#sumup .card-readers .threes div {
    min-width: 150px;
}

article#sumup .card-readers .threes div h3 {
    font-size: 60px;
    margin: 0px;
}

/* products */
article#sumup .products {display:flex;margin-top:80px;gap:2%;flex-direction: row;}
article#sumup .products .product {flex-basis:49%;background:#f2f2f2;border-radius:10px;padding:5%;display: flex;flex-direction: column;flex-grow: 1;}

article#sumup .products .product img.air {
    margin-left: 50px;
}

article#sumup  a.butn {
    background: #3063e9;
    padding: 10px 20px;
    color: #fff;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 700;
    margin-top: 20px;
    display: block;
    width: fit-content;
    font-size: 12px;
    font-family: 'aktiv-grotesk', arial, sans-serif !important;
    transition:0.3s;
}
article#sumup  a.butn:hover {color:#fff; background:#000; transition:0.3s;}
article#sumup .products .product figure {
    margin-bottom: 20px;
    max-height: 220px;
    text-align: center;
}

article#sumup .products .product h4 {
    font-size: 36px;
    font-weight: 700;
    line-height: 0.9;
    margin: 0px;
}
article#sumup .icons {display:flex;justify-content: space-between;margin-top: 80px;text-align: center;flex-wrap: wrap;justify-content: center;}

article#sumup .icons.six {
    margin-top: 80px;
    margin-bottom: 80px;
}
article#sumup .icons .icon {width:32.666666%;padding: 0px 30px;}

article#sumup .icons .icon figure {
    min-height: 35px;
}

article#sumup .icons .icon h5 {
    font-size: 16px;
    margin: 20px 0px 0px 0px;
}

article#sumup .icons .icon p {
    margin-top: 10px;
    font-size: 14px;
}
article#sumup .business {display:flex;margin-top:80px;margin-bottom: 40px;flex-direction: row;}
article#sumup .business .phone {width:50%; text-align:Center;}
article#sumup .business .text {width:50%;}

article#sumup .business .text h3 {
    font-size: 36px;
    margin-bottom: 0px;
    margin-top: 0px;
    font-weight: 700;
}

article#sumup .business .text h4 {
    font-size: 22px;
    font-weight: normal;
    margin-top: 20px;
}
article#sumup .trustpilot {display:flex;justify-content:center;align-items:center;gap:12px;margin-bottom: 80px;}

article#sumup .versus {margin-top:80px;}

article#sumup .versus .outer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    margin-bottom: 40px;
}

article#sumup .versus .outer .inner {
    border: 3px solid #000;
    padding: 20px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    flex-grow: 100;
}

article#sumup .versus .outer .inner .bottom {
    background: #000;
    color: #fff;
    text-align: center;
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: -20px;
    padding: 20px;
    margin-top: 40px;
}

article#sumup .versus .outer .inner .bottom p {
    font-size: 60px;
    margin: 0px;
    font-weight: 700;
    line-height: 0.7;
}

article#sumup .versus .outer .inner .bottom p span {
    font-size: 100px;
}

article#sumup .versus .outer .inner .bottom p span.pm {
    font-size: 30px;
}

article#sumup .versus .outer .inner .bottom p span sup {
    font-size: 50px;
}

article#sumup .versus .outer .inner p:last-of-type {
    flex-grow: 1;
}

article#sumup .versus .outer .inner h3 {
    font-size: 34px;
    margin-top: 0px;
}

article#sumup .versus .outer .one {
    width: 49%;
    display: flex;
    flex-direction: column;
}

article#sumup .versus .outer .payg {
    width: 49%;
}

article#sumup .versus .outer h2 {
    font-size: 60px;
    font-weight: 800;
    color: #000 !important;
}

article#sumup .versus .inner .payg {
    width: 50%;
}
@media screen and (max-width: 899px) {
  article#sumup .hero h1, article#sumup .card-readers h2, article#sumup .card-readers .cost h3, article#sumup .versus .outer h2 {font-size:40px;}
article#sumup .versus .outer .inner h3 {font-size:24px;}
}
@media screen and (max-width: 599px) {
   article#sumup .hero {flex-direction:column}
    article#sumup .hero .text, article#sumup .hero .images {width:100%; text-align:center;}
article#sumup .hero p {max-width:none; padding:0px 50px}
article#sumup .products {flex-direction:column}
article#sumup .products .product {margin-top:40px;text-align: center;}
    article#sumup .business {flex-direction:column;}
    article#sumup .business .phone, article#sumup .business .text {width:100%; text-align:center;}
    article#sumup .business .phone {margin-bottom:40px;}
     article#sumup .business .text {padding:0px 20px}
article#sumup .versus .outer {flex-direction:column;}
article#sumup .versus .outer .payg, article#sumup .versus .outer .one {width:100%;margin-top: 30px;}
article#sumup .icons .icon {width:50%; margin-bottom:40px}
article#sumup .trustpilot {flex-direction: column;gap: 4px;}
article#sumup .hero h1, article#sumup .card-readers h2, article#sumup .card-readers .cost h3, article#sumup .versus .outer h2 {text-align:center; font-size:30px}
article#sumup a.butn {margin:0 auto;}
article#sumup .hero .text {margin-bottom:30px}
article#sumup .products {margin-top:0px}
}