section.teaser.micropayment{
padding: 64px 0 0 0;
}
section.teaser.micropayment picture.bg_image img {
object-position: center;
}
section.teaser div.teaser-wrapper {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
section.teaser::before {
width: 80%;
z-index: 2;
left: 0;
background: rgba( var(--micropayment_secondary), 0.4);
}
section.teaser::after {
width: 64%;
left: 0;
opacity: 0.3;
}
section.teaser div.flex {
height: 100%;
gap: 0;
position: relative;
z-index: 9;
align-items: stretch;
}
section.teaser.text-align-center div.flex {
justify-content: center;
position: relative;
}
.micropayment section.teaser .flex div.text {
position: relative;
z-index: 9;
}
.micropayment section.teaser .flex div.text.asset-type-empty {
flex: 1;
width: 100%;
max-width: 100%;
}
.micropayment section.teaser .flex div.assets {
flex-direction: initial;
position: relative;
display: flex;
top: auto;
max-height: 700px;
position: absolute;
right: 0;
bottom: 0;
height: 100%;
width: 50%;
z-index: 1;
}
.micropayment section.teaser .flex div.assets div.image {
height: 100%;
width: 100%;
}
section.teaser div.image picture,
section.teaser div.image picture img {
object-fit: contain;
object-position: bottom;
position: relative;
z-index: 9;
}
section.teaser div.image.image-position-center picture,
section.teaser div.image.image-position-center picture img {
align-items: center;
}
section.teaser div.image.image-position-top picture,
section.teaser div.image.image-position-top picture img {
align-items: flex-start;
}
section.teaser div.image.image-position-bottom picture,
section.teaser div.image.image-position-bottom picture img {
align-items: flex-end;
}
section.teaser div.image picture {
z-index: 6;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
.micropayment section.teaser div.image picture img {
width: auto;
max-height: 100%;
height: initial;
object-fit: contain;
}
section+section.teaser div.image picture {
height: 100%;
z-index: 6;
}
section+section.teaser div.image.image-position-center picture,
section+section.teaser div.image.image-position-center picture img {
padding: 80px 0;
}
section.teaser div.text {
display: flex;
align-items: flex-start;
flex-direction: column;
padding: 64px 0 96px 0;
position: relative;
z-index: 9;
align-self: center;
}
section.teaser.teaser-height-small div.text {
padding: 80px 0 40px;
}
section.teaser.text-align-center div.text {
justify-content: center;
align-items: center;
}
section+section.teaser div.text {
padding: 80px 0;
}
section.teaser div.text {
max-width: calc(var(--micropayment_maxWidth) / 1.8 );
}
section.teaser div.text h1,
section.teaser div.text h2 {
position: relative;
z-index: 1;
width: 125%;
letter-spacing: -2px
}
section.teaser div.text.asset-type-empty h1,
section.teaser div.text.asset-type-empty h2 {
width: 100%;
}
section.teaser div.text p:not(.subheadline) {
font-size: var(--micropayment_text_medium_fontSize);
line-height: var(--micropayment_text_medium_lineHeight);
font-weight: var(--micropayment_text_medium_fontWeight);
}
section.teaser div.text p.lead {
font-size: var(--micropayment_text_large_fontSize);
line-height: var(--micropayment_text_large_lineHeight);
font-weight: var(--micropayment_text_medium_fontWeight);
}
section.teaser div.text div.buttons {
padding: 24px 0;
}   section.teaser.teaser-height-full {
height: calc( 100vh - 88px);
padding-bottom: 0;
}
section.teaser.teaser-height-full .content {
height: 100%;
}
@media ( max-width: 768px ) {
section.teaser.teaser-height-full {
height: auto;
}	
}   section.teaser.image-type-logo .flex {
gap: 64px;
}
section.teaser.image-type-logo div.text {
max-width: 100%;
}
section.teaser.image-type-logo div.text h1,
section.teaser.image-type-logo div.text h2 {
width: 100%;
}
section.teaser.image-type-logo div.text p {
width: 80%;
}
section.teaser.image-type-logo div.image {
display: flex;
justify-content: flex-end;
align-items: center;
}
section.teaser.image-type-logo div.image div.image-content {
height: auto;
display: inline-flex;
position: relative;
left: auto;
top: auto;
justify-content: center;
}
section.teaser.image-type-logo div.image picture {
padding: 48px;
height: auto;
max-height: 50%;
width: 100%;
position: relative;
left: auto;
bottom: auto;
width: auto;
transform: none;
}
section.teaser.image-type-logo div.image picture img {
width: 100%;
height: 100%;
object-fit: contain;
position: relative;
left: auto;
bottom: auto;
border-radius: 0;
}
section.teaser.image-type-logo div.image picture.vector img {
min-width: 100%;
max-width: 100%;
}
section.teaser.image-type-logo div.image div.image-content div.bg {
border-radius: var(--micropayment_borderRadiusBigs);
}
@media ( max-width: 1200px ) {
section.teaser div.flex {
align-items: initial;
flex-direction: column;
}
section.teaser div.text h1,
section.teaser div.text h2 {
font-size: 72px;
line-height: 80px;
width: 100%;
}
.micropayment section.teaser div.flex {
flex-direction: column;
}
.micropayment section.teaser div.flex div.text {
flex: 1 1 100%;
padding-bottom: 0;
max-width: 100%;
}
.micropayment section.teaser .flex div.assets {
flex-direction: initial;
display: flex;
top: auto;
max-height: inherit;
position: relative;
right: auto;
bottom: auto;
height: initial;
width: 100%;
z-index: 1;
display: block;
}
.micropayment section.teaser .flex div.assets div.image {
max-height: 100%;
display: block;
}
.micropayment section.teaser .flex div.assets div.image picture {
width: 100%;
height: 100%;
display: block;
}
.micropayment section.teaser .flex div.assets div.image picture img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
display: block;
}
}
@media ( max-width: 768px ) {
section.teaser div.flex {
flex-direction: column;
}
section.teaser div.text {
padding: 48px 0 0 0;
}
section.teaser div.text h1,
section.teaser div.text h2,
section.teaser div.text .headline {
font-size: var(--micropayment_headline_h1_fontSize);
line-height: var(--micropayment_headline_h1_lineHeight);
width: 100%;
}
section.teaser div.content {
padding: 0;
}
section.teaser div.image {
order: -1;
justify-content: center;
}
section.teaser div.image div.image-content {
position: relative;
left: initial;
bottom: initial;
height: 32vh;
width: initial;
}
section.teaser div.image div.image-content picture {
width: initial;
}
.micropayment section.teaser div.flex div.text {
padding: 48px 24px 24px 24px;
border-radius: 32px 32px 0 0;
background: rgba( var(--micropayment_white), 1);
}
.micropayment section.teaser div.flex div.text article {
max-width: 100%;
}
section.teaser p.subheadline {
color: rgba(var(--micropayment_black), .72);
}
section.teaser div.text .headline {
color: rgba(var(--micropayment_dark), 1);
}
section.teaser div.text p:not(.subheadline) {
color: var(--micropayment_textColor);
}
.micropayment section.teaser .flex div.assets {
position: relative;
right: auto;
bottom: auto;
width: 100%;
height: auto;
max-height: 400px;
padding: 0 24px;
}
.micropayment section.teaser .flex div.assets div.image {
max-height: 40vh;
display: block;
}
.micropayment section.teaser .flex div.assets div.image  picture img {
max-height: 40vh !important;
}
.micropayment section.teaser .flex .flexbox.assets.right.assets.right {
order: -1;
}
}
@media ( max-width: 589px ) {
section.teaser div.text h1,
section.teaser div.text h2 {
font-size: 40px;
line-height: 48px;
}
section.teaser.teaser-height-small div.flex {
min-height: initial;
}
section.teaser div.image div.image-content {
height: 72vh;
}
}section.api div.content {
padding: 0;
width: 100%;
}
section.api div.content div#api {
width: 100%;
}
section.api div.content div#api > div.flex {
gap: 0;
}
section.api div.content div#api > div.flex .article-content {
height: initial;
max-width: 100%;
padding-bottom: 24px;
}
section.api div.content div#api > div.flex div.flexbox > .flex {
gap: 24px;
}
section.api div.content div#api > div.flex div.flexbox > .flex + .flex {
border-top: 1px solid var(--micropayment_borderColor);
padding-top: 48px;
}
section.api div.content div#api > div.flex div.flexbox > .flex .flexbox.assets {
max-width: 33.3%;
}
section.api div.content div#api > div.flex div.flexbox > .flex .flexbox.text {
min-width: 66.6%;
}
section.api div.content div#api > div.flex .micropayment-card {
margin-bottom: 0;
height: initial;
max-width: 100%;
padding: 0;
border: none;
}
section.api div.content div#api code {
background-color:  rgba(var(--micropayment_light), 1);
color: rgba( var(--micropayment_black), 1 );
font-family: Consolas, Monaco, 'Courier New', monospace;
font-size: var(--micropayment_text_small_fontSize);
line-height: var(--micropayment_text_small_lineHeight);
border: 1px solid var(--micropayment_borderColor);
padding: 2px 8px;
border-radius: 4px;
}
section.api div.content div#api > div.flex .article-content a:not(.micropayment-btn) {
color: rgba( var(--micropayment_primary), 1);
}
section.api div.content div#api > div.flex .article-content picture {
width: 100%;
}
section.api div.content div#api > div.flex .article-content picture img {
border-radius: var(--micropayment_borderRadiusBigs);
border: 1px solid var(--micropayment_borderColor);
max-width: 100%;
}
section.api div.content div#api > div.flex .article-content picture.picture.vector {
min-width: 160px;
min-height: 160px;
max-width: 160px;
max-height: 160px;
aspect-ratio: 1 / 1;
padding: 0 24px;
border-radius: var(--micropayment_borderRadius);
border: 1px solid var(--micropayment_borderColor);
margin-bottom: 24px;
}
section.api div.content div#api > div.flex .micropayment-card picture.picture.vector img {
border: none;
}
section.api div.content div#api > div.flex .copy_code {
display: flex;
flex-wrap: nowrap;
gap: 24px;
justify-content: space-between;
}
section.api div.content div#api > div.flex .copy_code.copied {
box-shadow: 0 0 0 4px rgba( var(--micropayment_primary), 0.8 );
}
section.api div.content div#api > div.flex .copy_code {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 24px;
border-radius: var(--micropayment_borderRadius);
border: 1px solid var(--micropayment_borderColor);
background-color: rgba(var(--micropayment_light), 1);
padding: 4px 8px;
}
section.api div.content div#api > div.flex .copy_code code {
border: none;
background: initial;
padding: 0;
white-space: initial;
}
section.api div.content div#api > div.flex .copy_code .btn::after {
display: none;
}
section.api div.content div#api > div.flex .copy_code .btn:hover {
transform: initial;
}
@media ( max-width: 1200px ) {
section.api div.content div#api > div.flex div.flexbox > .flex .flexbox.text {
max-width: initial;
}
}
@media ( max-width: 768px ) {
section.api div.content div#api > div.flex {
flex-direction: column;
}
}   section.api div.content div#api .article-content  {
counter-reset: step-counter;
}
section.api div.content div#api > div.flex .micropayment-card.steps {
padding-left: 48px;
position: relative;
}
section.api div.content div#api > div.flex .micropayment-card.steps::before {
counter-increment: step-counter;
content: counter(step-counter) ". ";
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
position: absolute;
z-index: 9;
top: 12px;
left: 0;
transform: translateX(-50%);
background: rgba( var(--micropayment_white), 1 );
border: 1px solid var(--micropayment_borderColor);
border-radius: var(--micropayment_borderRadius);
font-size: var(--micropayment_text_small_fontSize);
line-height: var(--micropayment_text_small_lineHeight);
}   section.api div.content div#api > div.flex .micropayment-card.steps.logo::before {
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
section.api div.content div#api > div.flex .micropayment-card.steps.logo picture.picture {
position: absolute;
left: 0;
top: 50%;
z-index: 19;
transform: translateX(-50%) translateY(-50%);
min-width: 48px;
min-height: 48px;
max-width: 48px;
max-height: 48px;
background: rgba( var(--micropayment_white), 1);
padding: 4px;
border: initial;
}
section.api div.content div#api > div.flex .micropayment-card.steps.logo picture.picture img {
border-radius: initial;
border: initial;
}   div#api div.api-sidebar {
border-right: 1px solid var(--micropayment_borderColor);
order: -1;
width: 100%;
min-width: calc( var(--micropayment_apiSidebarWidth) / 2);
max-width: calc( var(--micropayment_apiSidebarWidth) / 2);
padding: 24px;
}
div#api div.api-sidebar aside {
position: sticky;
top: 80px;
width: 100%;
}
div#api div.api-sidebar aside div.micropayment-card {
box-shadow: initial;
border-radius: initial;
}
div#api div.api-sidebar aside ul {
gap: 16px;
padding: 0 0 24px 0;
display: flex;
flex-direction: column;
}
div#api div.api-sidebar aside ul li {
list-style: none;
font-size: var(--micropayment_text_fontSize);
line-height: var(--micropayment_text_lineHeight);
padding: 0;
}
div#api div.api-sidebar aside ul li a {
font-weight: var(--micropayment_headline_sub_fontWeight);
font-size: var(--micropayment_headline_sub_fontSize);
line-height: var(--micropayment_headline_sub_lineHeight);
}
div#api div.api-sidebar aside ul li.current-menu-item > a {
font-weight: 700;
}
div#api div.api-sidebar aside ul ul {
padding-top: 16px;
padding-left: 24px;
}   div#api div.api-sidebar.api-sidebar-toc {
width: var(--micropayment_apiSidebarWidth);
min-width: var(--micropayment_apiSidebarWidth);
max-width: var(--micropayment_apiSidebarWidth);
}
div#api div.api-sidebar.api-sidebar-toc aside {
width: 100%;
min-width: initial;
max-width: initial;
}
@media ( max-width: 768px ) {
div#api div.api-sidebar.api-sidebar-toc {
max-width: 100%;
min-width: 100%;
width: 100%;
border: none;
}	
}   div#api div.api-content {
display: flex;
flex-direction: column;
padding: 40px;
}
div#api div.api-content h2 {
padding-top: 24px;
}
div#api div.api-content h2:first-of-type {
padding-top: 0;
border: initial;
}
@media ( max-width: 768px ) {
div#api div.api-content {
padding: 0 24px;
}	
}   div.api_articles {
display: flex;
flex-direction: column;
gap: 24px;
}
div.api_articles div.api_article {
border: 1px solid var(--micropayment_borderColor);
border-radius: var(--micropayment_borderRadiusBigs);
padding: 24px;
}
div.api_articles div.api_article div.api_versions {
display: flex;
flex-direction: column;
gap: 0;
width: calc(100% + 48px);
margin-left: -24px;
}
div.api_articles div.api_article div.api_versions div.api_version {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
padding: 12px 24px;
}
div.api_articles div.api_article div.api_versions div.api_version:hover {
background: rgba(var(--micropayment_light), 1);
}
div.api_articles div.api_article div.api_versions div.api_version div.api_version_column {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
width: 100%;
max-width: 40%;
min-width: 40%;
gap: 16px;
}
div.api_articles div.api_article div.api_versions div.api_version div.api_version_column.version {
max-width: 20%;
min-width: 20%;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 4px;
}
div.api_articles div.api_article div.api_versions div.api_version div.api_version_column .micropayment-btn::after {
content: '';
display: none;
}
div.api_versions div.api_version div.api_version_column .micropayment-btn:hover {
transform: initial;
}   div.api_articles div.api_article div.api_versions div.read_more {
display: flex;
justify-content: flex-end;
order: 99;
margin-top: 16px;
padding: 0 24px;
}
div.api_articles div.api_article div.api_versions div.read_more small {
cursor: pointer;
}
div.api_articles div.api_article div.api_versions div.read_more small:hover {
color: rgba( var(--micropayment_primary), 1);
}
div.api_articles div.api_article div.api_versions div.api_versions_old {
display: none;
flex-direction: column;
}
div.api_articles div.api_article div.api_versions div.api_versions_old div.api_version {
border-top: 1px solid var(--micropayment_borderColor);
}   #api div.plugin {
border-radius: var(--micropayment_borderRadiusBigs);
padding: 40px;
display: flex;
flex-direction: column;
margin-bottom: 24px;
}
#api div.plugin div.plugin_header {
display: flex;
align-items: center;
flex-wrap: nowrap;
padding-bottom: 24px;
gap: 40px;
}
#api div.plugin div.plugin_header picture {
height: 80px;
width: 200px;
}
#api div.plugin div.plugin_header picture img {
height: 100%;
width: 100%;
object-fit: contain;
}
#api div.plugin div.plugin_header h2 {
padding: 0;
}
#api div.plugin div.facts {
display: flex;
justify-content: space-between;
padding-bottom: 24px;
gap: 24px;
}
#api div.plugin div.facts ul {
padding: 0;
flex-grow: 1;
display: flex;
flex-wrap: wrap;
}
#api div.plugin div.facts ul li {
list-style: none;
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
width: 100%;
}
#api div.plugin div.facts ul li a {
font-size: 14px;
}
#api div.plugin div.facts ul li.title {
padding-bottom: 16px;
font-size: var(--micropayment_text_fontSize);
}   #api div.plugin div.facts ul.payments {
flex-grow: 2;
}
#api div.plugin div.facts ul.payments li {
width: 50%;
}
#api div.plugin div.facts ul.payments li.title {
width: 100%;
}
#api div.plugin div.facts ul.payments li picture {
height: 20px;
width: 32px;
margin-right: 8px;
}
#api div.plugin div.facts ul.payments li picture img {
width: 100%;
height: 100%;
object-fit: contain;
}aside {
width: 320px;
min-width: 320px;
max-width: 320px;
position: sticky;
top: 80px;
display: flex;
flex-direction: column;
gap: 24px;
order: -1;
}   aside div.revilodesign-card {
padding: 0;
box-shadow: var(--revilodesign_cardShadow);
border: none;
}
aside div.revilodesign-card div.title {
padding: 8px 24px;
border-bottom: 1px solid rgba( var(--revilodesign_black), .1 );
font-size: var(--revilodesign_headline_h4_fontSize);
line-height: var(--revilodesign_headline_h4_lineHeight);
font-weight: var(--revilodesign_headline_h4_fontWeight);
}
aside div.revilodesign-card ul {
padding: 24px;
display: flex;
flex-direction: column;
gap: 4px;
}
aside div.revilodesign-card ul li {
list-style: none;
color: var(--revilodesign_textColor);
}
.revilodesign aside div.revilodesign-card a {
color: var(--revilodesign_textColor);
font-weight: var(--revilodesign_text_fontWeight);
font-size: var(--revilodesign_text_small_fontSize);
line-height: var(--revilodesign_text_small_lineHeight);
}
aside div.revilodesign-card ul li ul {
padding:  4px 0 0 24px;
}   aside div.toc {
border-radius: initial;
}
aside div.toc div.title {
padding-bottom: 12px;
font-weight: 500;
font-size: var(--micropayment_text_small_fontSize);
line-height: var(--micropayment_text_small_lineHeight);
text-transform: uppercase;
letter-spacing: 2px;
}
aside div.toc ul {
gap: 4px;
padding: 0;
}
aside div.toc ul li{
list-style: none;
}
aside div.toc ul li.h1,
aside div.toc ul li.h2,
aside div.toc ul li.h3,
aside div.toc ul li.h4,
aside div.toc ul li.h5,
aside div.toc ul li.h6 {
padding: 0;
font-weight: initial;
line-height: initial;
font-size: initial;
}
aside div.toc ul li ul {
padding: 0 0 0 16px;
}
aside div.toc ul li a {
font-weight: var(--micropayment_text_small_fontWeight);
font-size: var(--micropayment_text_small_fontSize);
line-height: var(--micropayment_text_small_lineHeight);
}
aside div.toc ul li a.active {
color: rgba( var(--micropayment_primary), 1);
}
@media ( max-width: 768px ) {
aside {
width: 100%;
max-width: 100%;
min-width: 100%;
position: relative;
top: auto;
padding: 64px 0 0 0;
}
aside div.toc {
border: none;
padding: 0;
background: rgba( var(--micropayment_light), 1);
border-radius: var(--micropayment_borderRadius);
}
aside div.toc div.title {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 24px;
}
aside div.toc div.title::after {
content: "\f061";
font-family: 'Font Awesome 6 Pro';
font-style: normal;
font-weight: 300;
margin-left: auto;
transform: rotate(90deg);
transition: var(--micropayment_transition);
}
aside div.toc.open div.title::after {
transform: rotate(-90deg);
}
aside div.toc div.list {
display: none;
}
aside div.toc ul {
display: flex;
flex-direction: column;
gap: 8px;
}
aside div.toc li a {
border: none;
padding: 0;
padding: 8px 16px;
width: 100%;
display: block;
}
}