html {
font-family: sans-serif;
line-height: 1.15;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
html,
body {
overflow-x: hidden
}
article,
aside,
footer,
header,
nav,
section {
display: block
}
h1 {
font-size: 2em;
margin: .67em 0
}
figcaption,
figure {
display: block
}
figure {
margin: 1em 40px
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible
}
main {
display: block
}
pre {
font-family: monospace, monospace;
font-size: 1em
}
a {
background-color: transparent;
-webkit-text-decoration-skip: objects
}
a:active,
a:hover {
outline-width: 0
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted
}
b,
strong {
font-weight: inherit;
font-weight: bolder
}
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em
}
dfn {
font-style: italic
}
mark {
background-color: #ff0;
color: #000
}
small {
font-size: 80%
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sub {
bottom: -.25em
}
sup {
top: -.5em
}
audio,
video {
display: inline-block
}
audio:not([controls]) {
display: none;
height: 0
}
img {
border-style: none
}
svg:not(:root) {
overflow: hidden
}
button,
input,
optgroup,
select,
textarea {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
margin: 0
}
button {
overflow: visible
}
button,
select {
text-transform: none
}
[type=reset],
[type=submit],
button,
html [type=button] {
-webkit-appearance: button
}
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
border-style: none;
padding: 0
}
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
outline: 1px dotted ButtonText
}
input {
overflow: visible
}
[type=checkbox],
[type=radio] {
box-sizing: border-box;
padding: 0
}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px
}
[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}
fieldset {
border: 1px solid silver;
margin: 0 2px;
padding: .35em .625em .75em
}
legend {
box-sizing: border-box;
display: table;
padding: 0;
color: inherit;
white-space: normal
}
progress {
display: inline-block;
vertical-align: baseline
}
textarea {
overflow: auto
}
details {
display: block
}
summary {
display: list-item
}
menu {
display: block
}
canvas {
display: inline-block
}
[hidden],
template {
display: none
}
.foundation-mq {
font-family: "small=0&medium=40em&large=64em&xlarge=75em&xxlarge=90em"
}
html {
box-sizing: border-box;
font-size: 100%
}
*,
:after,
:before {
box-sizing: inherit
}
body {
margin: 0;
padding: 0;
background: #fff;
font-family: Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
font-weight: 400;
line-height: 1.5;
color: #0a0a0a;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
img {
display: inline-block;
vertical-align: middle;
max-width: 100%;
height: auto;
-ms-interpolation-mode: bicubic
}
textarea {
height: auto;
min-height: 50px;
border-radius: 4px
}
select {
box-sizing: border-box;
width: 100%
}
.map_canvas embed,
.map_canvas img,
.map_canvas object,
.mqa-display embed,
.mqa-display img,
.mqa-display object {
max-width: none !important
}
button {
padding: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
border-radius: 4px;
background: 0 0;
line-height: 1;
cursor: auto
}
[data-whatinput=mouse] button {
outline: 0
}
pre {
overflow: auto
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit
}
.is-visible {
display: block !important
}
.is-hidden {
display: none !important
}
[type=color],
[type=date],
[type=datetime-local],
[type=datetime],
[type=email],
[type=month],
[type=number],
[type=password],
[type=search],
[type=tel],
[type=text],
[type=time],
[type=url],
[type=week],
textarea {
display: block;
box-sizing: border-box;
width: 100%;
height: 2.4375rem;
margin: 0 0 1rem;
padding: .5rem;
border: 1px solid #cacaca;
border-radius: 4px;
background-color: #fff;
box-shadow: inset 0 1px 2px hsla(0, 0%, 4%, .1);
font-family: inherit;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #0a0a0a;
transition: box-shadow .5s, border-color .25s ease-in-out;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none
}
[type=color]:focus,
[type=date]:focus,
[type=datetime-local]:focus,
[type=datetime]:focus,
[type=email]:focus,
[type=month]:focus,
[type=number]:focus,
[type=password]:focus,
[type=search]:focus,
[type=tel]:focus,
[type=text]:focus,
[type=time]:focus,
[type=url]:focus,
[type=week]:focus,
textarea:focus {
outline: 0;
border: 1px solid #8a8a8a;
background-color: #fff;
box-shadow: 0 0 5px #cacaca;
transition: box-shadow .5s, border-color .25s ease-in-out
}
textarea {
max-width: 100%
}
textarea[rows] {
height: auto
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #cacaca
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #cacaca
}
input::placeholder,
textarea::placeholder {
color: #cacaca
}
input:disabled,
input[readonly],
textarea:disabled,
textarea[readonly] {
background-color: #e6e6e6;
cursor: not-allowed
}
[type=button],
[type=submit] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 4px
}
input[type=search] {
box-sizing: border-box
}
[type=checkbox],
[type=file],
[type=radio] {
margin: 0 0 1rem
}
[type=checkbox]+label,
[type=radio]+label {
display: inline-block;
vertical-align: baseline;
margin-left: .5rem;
margin-right: 1rem;
margin-bottom: 0
}
[type=checkbox]+label[for],
[type=radio]+label[for] {
cursor: pointer
}
label>[type=checkbox],
label>[type=radio] {
margin-right: .5rem
}
[type=file] {
width: 100%
}
label {
display: block;
margin: 0;
font-size: .875rem;
font-weight: 400;
line-height: 1.8;
color: #0a0a0a
}
label.middle {
margin: 0 0 1rem;
padding: .5625rem 0
}
.help-text {
margin-top: -.5rem;
font-size: .8125rem;
font-style: italic;
color: #0a0a0a
}
.input-group {
display: -ms-flexbox;
display: flex;
width: 100%;
margin-bottom: 1rem;
-ms-flex-align: stretch;
align-items: stretch
}
.input-group>:first-child {
border-radius: 4px 0 0 4px
}
.input-group>:last-child>* {
border-radius: 0 4px 4px 0
}
.input-group-button,
.input-group-button a,
.input-group-button button,
.input-group-button input,
.input-group-button label,
.input-group-field,
.input-group-label {
margin: 0;
white-space: nowrap
}
.input-group-label {
padding: 0 1rem;
border: 1px solid #cacaca;
background: #e6e6e6;
color: #0a0a0a;
text-align: center;
white-space: nowrap;
display: -ms-flexbox;
display: flex;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-ms-flex-align: center;
align-items: center
}
.input-group-label:first-child {
border-right: 0
}
.input-group-label:last-child {
border-left: 0
}
.input-group-field {
border-radius: 0;
-ms-flex: 1 1 0;
flex: 1 1 0;
height: auto;
min-width: 0
}
.input-group-button {
padding-top: 0;
padding-bottom: 0;
text-align: center;
display: -ms-flexbox;
display: flex;
-ms-flex: 0 0 auto;
flex: 0 0 auto
}
.input-group-button a,
.input-group-button button,
.input-group-button input,
.input-group-button label {
height: auto;
-ms-flex-item-align: stretch;
align-self: stretch;
padding-top: 0;
padding-bottom: 0;
font-size: 1rem
}
fieldset {
margin: 0;
padding: 0;
border: 0
}
legend {
max-width: 100%;
margin-bottom: .5rem
}
.fieldset {
margin: 1.125rem 0;
padding: 1.25rem;
border: 1px solid #cacaca
}
.fieldset legend {
margin: 0;
margin-left: -.1875rem;
padding: 0 .1875rem
}
select {
height: 2.4375rem;
margin: 0 0 1rem;
padding: .5rem;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 1px solid #cacaca;
border-radius: 4px;
background-color: #fff;
font-family: inherit;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #0a0a0a;
background-image: url("data:image/svg+xml;utf8,");
background-origin: content-box;
background-position: right -1rem center;
background-repeat: no-repeat;
background-size: 9px 6px;
padding-right: 1.5rem;
transition: box-shadow .5s, border-color .25s ease-in-out
}
@media screen and (min-width:0\0) {
select {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg==)
}
}
select:focus {
outline: 0;
border: 1px solid #8a8a8a;
background-color: #fff;
box-shadow: 0 0 5px #cacaca;
transition: box-shadow .5s, border-color .25s ease-in-out
}
select:disabled {
background-color: #e6e6e6;
cursor: not-allowed
}
select::-ms-expand {
display: none
}
select[multiple] {
height: auto;
background-image: none
}
.is-invalid-input:not(:focus) {
border-color: #cc4b37;
background-color: #faedeb
}
.is-invalid-input:not(:focus)::-webkit-input-placeholder {
color: #cc4b37
}
.is-invalid-input:not(:focus):-ms-input-placeholder {
color: #cc4b37
}
.is-invalid-input:not(:focus)::placeholder {
color: #cc4b37
}
.form-error,
.is-invalid-label {
color: #cc4b37
}
.form-error {
display: none;
margin-top: -.5rem;
margin-bottom: 1rem;
font-size: .75rem;
font-weight: 700
}
.form-error.is-visible {
display: block
}
.grid-container {
padding-right: .625rem;
padding-left: .625rem;
max-width: 1200px;
margin: 0 auto
}
@media print,
screen and (min-width:40em) {
.grid-container {
padding-right: .9375rem;
padding-left: .9375rem
}
}
.grid-container.fluid {
padding-right: .625rem;
padding-left: .625rem;
max-width: 100%;
margin: 0 auto
}
@media print,
screen and (min-width:40em) {
.grid-container.fluid {
padding-right: .9375rem;
padding-left: .9375rem
}
}
.grid-container.full {
padding-right: 0;
padding-left: 0;
max-width: 100%;
margin: 0 auto
}
.grid-x {
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap
}
.cell {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
min-height: 0;
min-width: 0;
width: 100%
}
.cell.auto {
-ms-flex: 1 1 0;
flex: 1 1 0
}
.cell.shrink {
-ms-flex: 0 0 auto;
flex: 0 0 auto
}
.grid-x>.auto,
.grid-x>.shrink {
width: auto
}
.grid-x>.small-1,
.grid-x>.small-10,
.grid-x>.small-11,
.grid-x>.small-12,
.grid-x>.small-2,
.grid-x>.small-3,
.grid-x>.small-4,
.grid-x>.small-5,
.grid-x>.small-6,
.grid-x>.small-7,
.grid-x>.small-8,
.grid-x>.small-9,
.grid-x>.small-full,
.grid-x>.small-shrink {
-ms-flex-preferred-size: auto;
flex-basis: auto
}
@media print,
screen and (min-width:40em) {
.grid-x>.medium-1,
.grid-x>.medium-10,
.grid-x>.medium-11,
.grid-x>.medium-12,
.grid-x>.medium-2,
.grid-x>.medium-3,
.grid-x>.medium-4,
.grid-x>.medium-5,
.grid-x>.medium-6,
.grid-x>.medium-7,
.grid-x>.medium-8,
.grid-x>.medium-9,
.grid-x>.medium-full,
.grid-x>.medium-shrink {
-ms-flex-preferred-size: auto;
flex-basis: auto
}
}
@media print,
screen and (min-width:64em) {
.grid-x>.large-1,
.grid-x>.large-10,
.grid-x>.large-11,
.grid-x>.large-12,
.grid-x>.large-2,
.grid-x>.large-3,
.grid-x>.large-4,
.grid-x>.large-5,
.grid-x>.large-6,
.grid-x>.large-7,
.grid-x>.large-8,
.grid-x>.large-9,
.grid-x>.large-full,
.grid-x>.large-shrink {
-ms-flex-preferred-size: auto;
flex-basis: auto
}
}
.grid-x>.small-1 {
width: 8.33333%
}
.grid-x>.small-2 {
width: 16.66667%
}
.grid-x>.small-3 {
width: 25%
}
.grid-x>.small-4 {
width: 33.33333%
}
.grid-x>.small-5 {
width: 41.66667%
}
.grid-x>.small-6 {
width: 50%
}
.grid-x>.small-7 {
width: 58.33333%
}
.grid-x>.small-8 {
width: 66.66667%
}
.grid-x>.small-9 {
width: 75%
}
.grid-x>.small-10 {
width: 83.33333%
}
.grid-x>.small-11 {
width: 91.66667%
}
.grid-x>.small-12 {
width: 100%
}
@media print,
screen and (min-width:40em) {
.grid-x>.medium-auto {
-ms-flex: 1 1 0;
flex: 1 1 0;
width: auto
}
.grid-x>.medium-shrink {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto
}
.grid-x>.medium-1 {
width: 8.33333%
}
.grid-x>.medium-2 {
width: 16.66667%
}
.grid-x>.medium-3 {
width: 25%
}
.grid-x>.medium-4 {
width: 33.33333%
}
.grid-x>.medium-5 {
width: 41.66667%
}
.grid-x>.medium-6 {
width: 50%
}
.grid-x>.medium-7 {
width: 58.33333%
}
.grid-x>.medium-8 {
width: 66.66667%
}
.grid-x>.medium-9 {
width: 75%
}
.grid-x>.medium-10 {
width: 83.33333%
}
.grid-x>.medium-11 {
width: 91.66667%
}
.grid-x>.medium-12 {
width: 100%
}
}
@media print,
screen and (min-width:64em) {
.grid-x>.large-auto {
-ms-flex: 1 1 0;
flex: 1 1 0;
width: auto
}
.grid-x>.large-shrink {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto
}
.grid-x>.large-1 {
width: 8.33333%
}
.grid-x>.large-2 {
width: 16.66667%
}
.grid-x>.large-3 {
width: 25%
}
.grid-x>.large-4 {
width: 33.33333%
}
.grid-x>.large-5 {
width: 41.66667%
}
.grid-x>.large-6 {
width: 50%
}
.grid-x>.large-7 {
width: 58.33333%
}
.grid-x>.large-8 {
width: 66.66667%
}
.grid-x>.large-9 {
width: 75%
}
.grid-x>.large-10 {
width: 83.33333%
}
.grid-x>.large-11 {
width: 91.66667%
}
.grid-x>.large-12 {
width: 100%
}
}
.grid-margin-x:not(.grid-x)>.cell {
width: auto
}
.grid-margin-y:not(.grid-y)>.cell {
height: auto
}
.grid-margin-x {
margin-left: -.625rem;
margin-right: -.625rem
}
@media print,
screen and (min-width:40em) {
.grid-margin-x {
margin-left: -.9375rem;
margin-right: -.9375rem
}
}
.grid-margin-x>.cell {
width: calc(100% - 1.25rem);
margin-left: .625rem;
margin-right: .625rem
}
@media print,
screen and (min-width:40em) {
.grid-margin-x>.cell {
width: calc(100% - 1.875rem);
margin-left: .9375rem;
margin-right: .9375rem
}
}
.grid-margin-x>.auto,
.grid-margin-x>.shrink {
width: auto
}
.grid-margin-x>.small-1 {
width: calc(8.33333% - 1.25rem)
}
.grid-margin-x>.small-2 {
width: calc(16.66667% - 1.25rem)
}
.grid-margin-x>.small-3 {
width: calc(25% - 1.25rem)
}
.grid-margin-x>.small-4 {
width: calc(33.33333% - 1.25rem)
}
.grid-margin-x>.small-5 {
width: calc(41.66667% - 1.25rem)
}
.grid-margin-x>.small-6 {
width: calc(50% - 1.25rem)
}
.grid-margin-x>.small-7 {
width: calc(58.33333% - 1.25rem)
}
.grid-margin-x>.small-8 {
width: calc(66.66667% - 1.25rem)
}
.grid-margin-x>.small-9 {
width: calc(75% - 1.25rem)
}
.grid-margin-x>.small-10 {
width: calc(83.33333% - 1.25rem)
}
.grid-margin-x>.small-11 {
width: calc(91.66667% - 1.25rem)
}
.grid-margin-x>.small-12 {
width: calc(100% - 1.25rem)
}
@media print,
screen and (min-width:40em) {
.grid-margin-x>.auto,
.grid-margin-x>.shrink {
width: auto
}
.grid-margin-x>.small-1 {
width: calc(8.33333% - 1.875rem)
}
.grid-margin-x>.small-2 {
width: calc(16.66667% - 1.875rem)
}
.grid-margin-x>.small-3 {
width: calc(25% - 1.875rem)
}
.grid-margin-x>.small-4 {
width: calc(33.33333% - 1.875rem)
}
.grid-margin-x>.small-5 {
width: calc(41.66667% - 1.875rem)
}
.grid-margin-x>.small-6 {
width: calc(50% - 1.875rem)
}
.grid-margin-x>.small-7 {
width: calc(58.33333% - 1.875rem)
}
.grid-margin-x>.small-8 {
width: calc(66.66667% - 1.875rem)
}
.grid-margin-x>.small-9 {
width: calc(75% - 1.875rem)
}
.grid-margin-x>.small-10 {
width: calc(83.33333% - 1.875rem)
}
.grid-margin-x>.small-11 {
width: calc(91.66667% - 1.875rem)
}
.grid-margin-x>.small-12 {
width: calc(100% - 1.875rem)
}
.grid-margin-x>.medium-auto,
.grid-margin-x>.medium-shrink {
width: auto
}
.grid-margin-x>.medium-1 {
width: calc(8.33333% - 1.875rem)
}
.grid-margin-x>.medium-2 {
width: calc(16.66667% - 1.875rem)
}
.grid-margin-x>.medium-3 {
width: calc(25% - 1.875rem)
}
.grid-margin-x>.medium-4 {
width: calc(33.33333% - 1.875rem)
}
.grid-margin-x>.medium-5 {
width: calc(41.66667% - 1.875rem)
}
.grid-margin-x>.medium-6 {
width: calc(50% - 1.875rem)
}
.grid-margin-x>.medium-7 {
width: calc(58.33333% - 1.875rem)
}
.grid-margin-x>.medium-8 {
width: calc(66.66667% - 1.875rem)
}
.grid-margin-x>.medium-9 {
width: calc(75% - 1.875rem)
}
.grid-margin-x>.medium-10 {
width: calc(83.33333% - 1.875rem)
}
.grid-margin-x>.medium-11 {
width: calc(91.66667% - 1.875rem)
}
.grid-margin-x>.medium-12 {
width: calc(100% - 1.875rem)
}
}
@media print,
screen and (min-width:64em) {
.grid-margin-x>.large-auto,
.grid-margin-x>.large-shrink {
width: auto
}
.grid-margin-x>.large-1 {
width: calc(8.33333% - 1.875rem)
}
.grid-margin-x>.large-2 {
width: calc(16.66667% - 1.875rem)
}
.grid-margin-x>.large-3 {
width: calc(25% - 1.875rem)
}
.grid-margin-x>.large-4 {
width: calc(33.33333% - 1.875rem)
}
.grid-margin-x>.large-5 {
width: calc(41.66667% - 1.875rem)
}
.grid-margin-x>.large-6 {
width: calc(50% - 1.875rem)
}
.grid-margin-x>.large-7 {
width: calc(58.33333% - 1.875rem)
}
.grid-margin-x>.large-8 {
width: calc(66.66667% - 1.875rem)
}
.grid-margin-x>.large-9 {
width: calc(75% - 1.875rem)
}
.grid-margin-x>.large-10 {
width: calc(83.33333% - 1.875rem)
}
.grid-margin-x>.large-11 {
width: calc(91.66667% - 1.875rem)
}
.grid-margin-x>.large-12 {
width: calc(100% - 1.875rem)
}
}
.grid-padding-x .grid-padding-x {
margin-right: -.625rem;
margin-left: -.625rem
}
@media print,
screen and (min-width:40em) {
.grid-padding-x .grid-padding-x {
margin-right: -.9375rem;
margin-left: -.9375rem
}
}
.grid-container:not(.full)>.grid-padding-x {
margin-right: -.625rem;
margin-left: -.625rem
}
@media print,
screen and (min-width:40em) {
.grid-container:not(.full)>.grid-padding-x {
margin-right: -.9375rem;
margin-left: -.9375rem
}
}
.grid-padding-x>.cell {
padding-right: .625rem;
padding-left: .625rem
}
@media print,
screen and (min-width:40em) {
.grid-padding-x>.cell {
padding-right: .9375rem;
padding-left: .9375rem
}
}
.small-up-1>.cell {
width: 100%
}
.small-up-2>.cell {
width: 50%
}
.small-up-3>.cell {
width: 33.33333%
}
.small-up-4>.cell {
width: 25%
}
.small-up-5>.cell {
width: 20%
}
.small-up-6>.cell {
width: 16.66667%
}
.small-up-7>.cell {
width: 14.28571%
}
.small-up-8>.cell {
width: 12.5%
}
@media print,
screen and (min-width:40em) {
.medium-up-1>.cell {
width: 100%
}
.medium-up-2>.cell {
width: 50%
}
.medium-up-3>.cell {
width: 33.33333%
}
.medium-up-4>.cell {
width: 25%
}
.medium-up-5>.cell {
width: 20%
}
.medium-up-6>.cell {
width: 16.66667%
}
.medium-up-7>.cell {
width: 14.28571%
}
.medium-up-8>.cell {
width: 12.5%
}
}
@media print,
screen and (min-width:64em) {
.large-up-1>.cell {
width: 100%
}
.large-up-2>.cell {
width: 50%
}
.large-up-3>.cell {
width: 33.33333%
}
.large-up-4>.cell {
width: 25%
}
.large-up-5>.cell {
width: 20%
}
.large-up-6>.cell {
width: 16.66667%
}
.large-up-7>.cell {
width: 14.28571%
}
.large-up-8>.cell {
width: 12.5%
}
}
.grid-margin-x.small-up-1>.cell {
width: calc(100% - 1.25rem)
}
.grid-margin-x.small-up-2>.cell {
width: calc(50% - 1.25rem)
}
.grid-margin-x.small-up-3>.cell {
width: calc(33.33333% - 1.25rem)
}
.grid-margin-x.small-up-4>.cell {
width: calc(25% - 1.25rem)
}
.grid-margin-x.small-up-5>.cell {
width: calc(20% - 1.25rem)
}
.grid-margin-x.small-up-6>.cell {
width: calc(16.66667% - 1.25rem)
}
.grid-margin-x.small-up-7>.cell {
width: calc(14.28571% - 1.25rem)
}
.grid-margin-x.small-up-8>.cell {
width: calc(12.5% - 1.25rem)
}
@media print,
screen and (min-width:40em) {
.grid-margin-x.small-up-1>.cell {
width: calc(100% - 1.25rem)
}
.grid-margin-x.small-up-2>.cell {
width: calc(50% - 1.25rem)
}
.grid-margin-x.small-up-3>.cell {
width: calc(33.33333% - 1.25rem)
}
.grid-margin-x.small-up-4>.cell {
width: calc(25% - 1.25rem)
}
.grid-margin-x.small-up-5>.cell {
width: calc(20% - 1.25rem)
}
.grid-margin-x.small-up-6>.cell {
width: calc(16.66667% - 1.25rem)
}
.grid-margin-x.small-up-7>.cell {
width: calc(14.28571% - 1.25rem)
}
.grid-margin-x.small-up-8>.cell {
width: calc(12.5% - 1.25rem)
}
.grid-margin-x.medium-up-1>.cell {
width: calc(100% - 1.875rem)
}
.grid-margin-x.medium-up-2>.cell {
width: calc(50% - 1.875rem)
}
.grid-margin-x.medium-up-3>.cell {
width: calc(33.33333% - 1.875rem)
}
.grid-margin-x.medium-up-4>.cell {
width: calc(25% - 1.875rem)
}
.grid-margin-x.medium-up-5>.cell {
width: calc(20% - 1.875rem)
}
.grid-margin-x.medium-up-6>.cell {
width: calc(16.66667% - 1.875rem)
}
.grid-margin-x.medium-up-7>.cell {
width: calc(14.28571% - 1.875rem)
}
.grid-margin-x.medium-up-8>.cell {
width: calc(12.5% - 1.875rem)
}
}
@media print,
screen and (min-width:64em) {
.grid-margin-x.large-up-1>.cell {
width: calc(100% - 1.875rem)
}
.grid-margin-x.large-up-2>.cell {
width: calc(50% - 1.875rem)
}
.grid-margin-x.large-up-3>.cell {
width: calc(33.33333% - 1.875rem)
}
.grid-margin-x.large-up-4>.cell {
width: calc(25% - 1.875rem)
}
.grid-margin-x.large-up-5>.cell {
width: calc(20% - 1.875rem)
}
.grid-margin-x.large-up-6>.cell {
width: calc(16.66667% - 1.875rem)
}
.grid-margin-x.large-up-7>.cell {
width: calc(14.28571% - 1.875rem)
}
.grid-margin-x.large-up-8>.cell {
width: calc(12.5% - 1.875rem)
}
}
.small-margin-collapse,
.small-margin-collapse>.cell {
margin-right: 0;
margin-left: 0
}
.small-margin-collapse>.small-1 {
width: 8.33333%
}
.small-margin-collapse>.small-2 {
width: 16.66667%
}
.small-margin-collapse>.small-3 {
width: 25%
}
.small-margin-collapse>.small-4 {
width: 33.33333%
}
.small-margin-collapse>.small-5 {
width: 41.66667%
}
.small-margin-collapse>.small-6 {
width: 50%
}
.small-margin-collapse>.small-7 {
width: 58.33333%
}
.small-margin-collapse>.small-8 {
width: 66.66667%
}
.small-margin-collapse>.small-9 {
width: 75%
}
.small-margin-collapse>.small-10 {
width: 83.33333%
}
.small-margin-collapse>.small-11 {
width: 91.66667%
}
.small-margin-collapse>.small-12 {
width: 100%
}
@media print,
screen and (min-width:40em) {
.small-margin-collapse>.medium-1 {
width: 8.33333%
}
.small-margin-collapse>.medium-2 {
width: 16.66667%
}
.small-margin-collapse>.medium-3 {
width: 25%
}
.small-margin-collapse>.medium-4 {
width: 33.33333%
}
.small-margin-collapse>.medium-5 {
width: 41.66667%
}
.small-margin-collapse>.medium-6 {
width: 50%
}
.small-margin-collapse>.medium-7 {
width: 58.33333%
}
.small-margin-collapse>.medium-8 {
width: 66.66667%
}
.small-margin-collapse>.medium-9 {
width: 75%
}
.small-margin-collapse>.medium-10 {
width: 83.33333%
}
.small-margin-collapse>.medium-11 {
width: 91.66667%
}
.small-margin-collapse>.medium-12 {
width: 100%
}
}
@media print,
screen and (min-width:64em) {
.small-margin-collapse>.large-1 {
width: 8.33333%
}
.small-margin-collapse>.large-2 {
width: 16.66667%
}
.small-margin-collapse>.large-3 {
width: 25%
}
.small-margin-collapse>.large-4 {
width: 33.33333%
}
.small-margin-collapse>.large-5 {
width: 41.66667%
}
.small-margin-collapse>.large-6 {
width: 50%
}
.small-margin-collapse>.large-7 {
width: 58.33333%
}
.small-margin-collapse>.large-8 {
width: 66.66667%
}
.small-margin-collapse>.large-9 {
width: 75%
}
.small-margin-collapse>.large-10 {
width: 83.33333%
}
.small-margin-collapse>.large-11 {
width: 91.66667%
}
.small-margin-collapse>.large-12 {
width: 100%
}
}
.small-padding-collapse {
margin-right: 0;
margin-left: 0
}
.small-padding-collapse>.cell {
padding-right: 0;
padding-left: 0
}
@media print,
screen and (min-width:40em) {
.medium-margin-collapse,
.medium-margin-collapse>.cell {
margin-right: 0;
margin-left: 0
}
}
@media print,
screen and (min-width:40em) {
.medium-margin-collapse>.small-1 {
width: 8.33333%
}
.medium-margin-collapse>.small-2 {
width: 16.66667%
}
.medium-margin-collapse>.small-3 {
width: 25%
}
.medium-margin-collapse>.small-4 {
width: 33.33333%
}
.medium-margin-collapse>.small-5 {
width: 41.66667%
}
.medium-margin-collapse>.small-6 {
width: 50%
}
.medium-margin-collapse>.small-7 {
width: 58.33333%
}
.medium-margin-collapse>.small-8 {
width: 66.66667%
}
.medium-margin-collapse>.small-9 {
width: 75%
}
.medium-margin-collapse>.small-10 {
width: 83.33333%
}
.medium-margin-collapse>.small-11 {
width: 91.66667%
}
.medium-margin-collapse>.small-12 {
width: 100%
}
}
@media print,
screen and (min-width:40em) {
.medium-margin-collapse>.medium-1 {
width: 8.33333%
}
.medium-margin-collapse>.medium-2 {
width: 16.66667%
}
.medium-margin-collapse>.medium-3 {
width: 25%
}
.medium-margin-collapse>.medium-4 {
width: 33.33333%
}
.medium-margin-collapse>.medium-5 {
width: 41.66667%
}
.medium-margin-collapse>.medium-6 {
width: 50%
}
.medium-margin-collapse>.medium-7 {
width: 58.33333%
}
.medium-margin-collapse>.medium-8 {
width: 66.66667%
}
.medium-margin-collapse>.medium-9 {
width: 75%
}
.medium-margin-collapse>.medium-10 {
width: 83.33333%
}
.medium-margin-collapse>.medium-11 {
width: 91.66667%
}
.medium-margin-collapse>.medium-12 {
width: 100%
}
}
@media print,
screen and (min-width:64em) {
.medium-margin-collapse>.large-1 {
width: 8.33333%
}
.medium-margin-collapse>.large-2 {
width: 16.66667%
}
.medium-margin-collapse>.large-3 {
width: 25%
}
.medium-margin-collapse>.large-4 {
width: 33.33333%
}
.medium-margin-collapse>.large-5 {
width: 41.66667%
}
.medium-margin-collapse>.large-6 {
width: 50%
}
.medium-margin-collapse>.large-7 {
width: 58.33333%
}
.medium-margin-collapse>.large-8 {
width: 66.66667%
}
.medium-margin-collapse>.large-9 {
width: 75%
}
.medium-margin-collapse>.large-10 {
width: 83.33333%
}
.medium-margin-collapse>.large-11 {
width: 91.66667%
}
.medium-margin-collapse>.large-12 {
width: 100%
}
}
@media print,
screen and (min-width:40em) {
.medium-padding-collapse {
margin-right: 0;
margin-left: 0
}
.medium-padding-collapse>.cell {
padding-right: 0;
padding-left: 0
}
}
@media print,
screen and (min-width:64em) {
.large-margin-collapse,
.large-margin-collapse>.cell {
margin-right: 0;
margin-left: 0
}
}
@media print,
screen and (min-width:64em) {
.large-margin-collapse>.small-1 {
width: 8.33333%
}
.large-margin-collapse>.small-2 {
width: 16.66667%
}
.large-margin-collapse>.small-3 {
width: 25%
}
.large-margin-collapse>.small-4 {
width: 33.33333%
}
.large-margin-collapse>.small-5 {
width: 41.66667%
}
.large-margin-collapse>.small-6 {
width: 50%
}
.large-margin-collapse>.small-7 {
width: 58.33333%
}
.large-margin-collapse>.small-8 {
width: 66.66667%
}
.large-margin-collapse>.small-9 {
width: 75%
}
.large-margin-collapse>.small-10 {
width: 83.33333%
}
.large-margin-collapse>.small-11 {
width: 91.66667%
}
.large-margin-collapse>.small-12 {
width: 100%
}
}
@media print,
screen and (min-width:64em) {
.large-margin-collapse>.medium-1 {
width: 8.33333%
}
.large-margin-collapse>.medium-2 {
width: 16.66667%
}
.large-margin-collapse>.medium-3 {
width: 25%
}
.large-margin-collapse>.medium-4 {
width: 33.33333%
}
.large-margin-collapse>.medium-5 {
width: 41.66667%
}
.large-margin-collapse>.medium-6 {
width: 50%
}
.large-margin-collapse>.medium-7 {
width: 58.33333%
}
.large-margin-collapse>.medium-8 {
width: 66.66667%
}
.large-margin-collapse>.medium-9 {
width: 75%
}
.large-margin-collapse>.medium-10 {
width: 83.33333%
}
.large-margin-collapse>.medium-11 {
width: 91.66667%
}
.large-margin-collapse>.medium-12 {
width: 100%
}
}
@media print,
screen and (min-width:64em) {
.large-margin-collapse>.large-1 {
width: 8.33333%
}
.large-margin-collapse>.large-2 {
width: 16.66667%
}
.large-margin-collapse>.large-3 {
width: 25%
}
.large-margin-collapse>.large-4 {
width: 33.33333%
}
.large-margin-collapse>.large-5 {
width: 41.66667%
}
.large-margin-collapse>.large-6 {
width: 50%
}
.large-margin-collapse>.large-7 {
width: 58.33333%
}
.large-margin-collapse>.large-8 {
width: 66.66667%
}
.large-margin-collapse>.large-9 {
width: 75%
}
.large-margin-collapse>.large-10 {
width: 83.33333%
}
.large-margin-collapse>.large-11 {
width: 91.66667%
}
.large-margin-collapse>.large-12 {
width: 100%
}
}
@media print,
screen and (min-width:64em) {
.large-padding-collapse {
margin-right: 0;
margin-left: 0
}
.large-padding-collapse>.cell {
padding-right: 0;
padding-left: 0
}
}
.small-offset-0 {
margin-left: 0
}
.grid-margin-x>.small-offset-0 {
margin-left: calc(0% + .625rem)
}
.small-offset-1 {
margin-left: 8.33333%
}
.grid-margin-x>.small-offset-1 {
margin-left: calc(8.33333% + .625rem)
}
.small-offset-2 {
margin-left: 16.66667%
}
.grid-margin-x>.small-offset-2 {
margin-left: calc(16.66667% + .625rem)
}
.small-offset-3 {
margin-left: 25%
}
.grid-margin-x>.small-offset-3 {
margin-left: calc(25% + .625rem)
}
.small-offset-4 {
margin-left: 33.33333%
}
.grid-margin-x>.small-offset-4 {
margin-left: calc(33.33333% + .625rem)
}
.small-offset-5 {
margin-left: 41.66667%
}
.grid-margin-x>.small-offset-5 {
margin-left: calc(41.66667% + .625rem)
}
.small-offset-6 {
margin-left: 50%
}
.grid-margin-x>.small-offset-6 {
margin-left: calc(50% + .625rem)
}
.small-offset-7 {
margin-left: 58.33333%
}
.grid-margin-x>.small-offset-7 {
margin-left: calc(58.33333% + .625rem)
}
.small-offset-8 {
margin-left: 66.66667%
}
.grid-margin-x>.small-offset-8 {
margin-left: calc(66.66667% + .625rem)
}
.small-offset-9 {
margin-left: 75%
}
.grid-margin-x>.small-offset-9 {
margin-left: calc(75% + .625rem)
}
.small-offset-10 {
margin-left: 83.33333%
}
.grid-margin-x>.small-offset-10 {
margin-left: calc(83.33333% + .625rem)
}
.small-offset-11 {
margin-left: 91.66667%
}
.grid-margin-x>.small-offset-11 {
margin-left: calc(91.66667% + .625rem)
}
@media print,
screen and (min-width:40em) {
.medium-offset-0 {
margin-left: 0
}
.grid-margin-x>.medium-offset-0 {
margin-left: calc(0% + .9375rem)
}
.medium-offset-1 {
margin-left: 8.33333%
}
.grid-margin-x>.medium-offset-1 {
margin-left: calc(8.33333% + .9375rem)
}
.medium-offset-2 {
margin-left: 16.66667%
}
.grid-margin-x>.medium-offset-2 {
margin-left: calc(16.66667% + .9375rem)
}
.medium-offset-3 {
margin-left: 25%
}
.grid-margin-x>.medium-offset-3 {
margin-left: calc(25% + .9375rem)
}
.medium-offset-4 {
margin-left: 33.33333%
}
.grid-margin-x>.medium-offset-4 {
margin-left: calc(33.33333% + .9375rem)
}
.medium-offset-5 {
margin-left: 41.66667%
}
.grid-margin-x>.medium-offset-5 {
margin-left: calc(41.66667% + .9375rem)
}
.medium-offset-6 {
margin-left: 50%
}
.grid-margin-x>.medium-offset-6 {
margin-left: calc(50% + .9375rem)
}
.medium-offset-7 {
margin-left: 58.33333%
}
.grid-margin-x>.medium-offset-7 {
margin-left: calc(58.33333% + .9375rem)
}
.medium-offset-8 {
margin-left: 66.66667%
}
.grid-margin-x>.medium-offset-8 {
margin-left: calc(66.66667% + .9375rem)
}
.medium-offset-9 {
margin-left: 75%
}
.grid-margin-x>.medium-offset-9 {
margin-left: calc(75% + .9375rem)
}
.medium-offset-10 {
margin-left: 83.33333%
}
.grid-margin-x>.medium-offset-10 {
margin-left: calc(83.33333% + .9375rem)
}
.medium-offset-11 {
margin-left: 91.66667%
}
.grid-margin-x>.medium-offset-11 {
margin-left: calc(91.66667% + .9375rem)
}
}
@media print,
screen and (min-width:64em) {
.large-offset-0 {
margin-left: 0
}
.grid-margin-x>.large-offset-0 {
margin-left: calc(0% + .9375rem)
}
.large-offset-1 {
margin-left: 8.33333%
}
.grid-margin-x>.large-offset-1 {
margin-left: calc(8.33333% + .9375rem)
}
.large-offset-2 {
margin-left: 16.66667%
}
.grid-margin-x>.large-offset-2 {
margin-left: calc(16.66667% + .9375rem)
}
.large-offset-3 {
margin-left: 25%
}
.grid-margin-x>.large-offset-3 {
margin-left: calc(25% + .9375rem)
}
.large-offset-4 {
margin-left: 33.33333%
}
.grid-margin-x>.large-offset-4 {
margin-left: calc(33.33333% + .9375rem)
}
.large-offset-5 {
margin-left: 41.66667%
}
.grid-margin-x>.large-offset-5 {
margin-left: calc(41.66667% + .9375rem)
}
.large-offset-6 {
margin-left: 50%
}
.grid-margin-x>.large-offset-6 {
margin-left: calc(50% + .9375rem)
}
.large-offset-7 {
margin-left: 58.33333%
}
.grid-margin-x>.large-offset-7 {
margin-left: calc(58.33333% + .9375rem)
}
.large-offset-8 {
margin-left: 66.66667%
}
.grid-margin-x>.large-offset-8 {
margin-left: calc(66.66667% + .9375rem)
}
.large-offset-9 {
margin-left: 75%
}
.grid-margin-x>.large-offset-9 {
margin-left: calc(75% + .9375rem)
}
.large-offset-10 {
margin-left: 83.33333%
}
.grid-margin-x>.large-offset-10 {
margin-left: calc(83.33333% + .9375rem)
}
.large-offset-11 {
margin-left: 91.66667%
}
.grid-margin-x>.large-offset-11 {
margin-left: calc(91.66667% + .9375rem)
}
}
.grid-y {
display: -ms-flexbox;
display: flex;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap
}
.grid-y>.cell {
width: auto
}
.grid-y>.auto,
.grid-y>.shrink {
height: auto
}
.grid-y>.small-1,
.grid-y>.small-10,
.grid-y>.small-11,
.grid-y>.small-12,
.grid-y>.small-2,
.grid-y>.small-3,
.grid-y>.small-4,
.grid-y>.small-5,
.grid-y>.small-6,
.grid-y>.small-7,
.grid-y>.small-8,
.grid-y>.small-9,
.grid-y>.small-full,
.grid-y>.small-shrink {
-ms-flex-preferred-size: auto;
flex-basis: auto
}
@media print,
screen and (min-width:40em) {
.grid-y>.medium-1,
.grid-y>.medium-10,
.grid-y>.medium-11,
.grid-y>.medium-12,
.grid-y>.medium-2,
.grid-y>.medium-3,
.grid-y>.medium-4,
.grid-y>.medium-5,
.grid-y>.medium-6,
.grid-y>.medium-7,
.grid-y>.medium-8,
.grid-y>.medium-9,
.grid-y>.medium-full,
.grid-y>.medium-shrink {
-ms-flex-preferred-size: auto;
flex-basis: auto
}
}
@media print,
screen and (min-width:64em) {
.grid-y>.large-1,
.grid-y>.large-10,
.grid-y>.large-11,
.grid-y>.large-12,
.grid-y>.large-2,
.grid-y>.large-3,
.grid-y>.large-4,
.grid-y>.large-5,
.grid-y>.large-6,
.grid-y>.large-7,
.grid-y>.large-8,
.grid-y>.large-9,
.grid-y>.large-full,
.grid-y>.large-shrink {
-ms-flex-preferred-size: auto;
flex-basis: auto
}
}
.grid-y>.small-1 {
height: 8.33333%
}
.grid-y>.small-2 {
height: 16.66667%
}
.grid-y>.small-3 {
height: 25%
}
.grid-y>.small-4 {
height: 33.33333%
}
.grid-y>.small-5 {
height: 41.66667%
}
.grid-y>.small-6 {
height: 50%
}
.grid-y>.small-7 {
height: 58.33333%
}
.grid-y>.small-8 {
height: 66.66667%
}
.grid-y>.small-9 {
height: 75%
}
.grid-y>.small-10 {
height: 83.33333%
}
.grid-y>.small-11 {
height: 91.66667%
}
.grid-y>.small-12 {
height: 100%
}
@media print,
screen and (min-width:40em) {
.grid-y>.medium-auto {
-ms-flex: 1 1 0;
flex: 1 1 0;
height: auto
}
.grid-y>.medium-shrink {
height: auto
}
.grid-y>.medium-1 {
height: 8.33333%
}
.grid-y>.medium-2 {
height: 16.66667%
}
.grid-y>.medium-3 {
height: 25%
}
.grid-y>.medium-4 {
height: 33.33333%
}
.grid-y>.medium-5 {
height: 41.66667%
}
.grid-y>.medium-6 {
height: 50%
}
.grid-y>.medium-7 {
height: 58.33333%
}
.grid-y>.medium-8 {
height: 66.66667%
}
.grid-y>.medium-9 {
height: 75%
}
.grid-y>.medium-10 {
height: 83.33333%
}
.grid-y>.medium-11 {
height: 91.66667%
}
.grid-y>.medium-12 {
height: 100%
}
}
@media print,
screen and (min-width:64em) {
.grid-y>.large-auto {
-ms-flex: 1 1 0;
flex: 1 1 0;
height: auto
}
.grid-y>.large-shrink {
height: auto
}
.grid-y>.large-1 {
height: 8.33333%
}
.grid-y>.large-2 {
height: 16.66667%
}
.grid-y>.large-3 {
height: 25%
}
.grid-y>.large-4 {
height: 33.33333%
}
.grid-y>.large-5 {
height: 41.66667%
}
.grid-y>.large-6 {
height: 50%
}
.grid-y>.large-7 {
height: 58.33333%
}
.grid-y>.large-8 {
height: 66.66667%
}
.grid-y>.large-9 {
height: 75%
}
.grid-y>.large-10 {
height: 83.33333%
}
.grid-y>.large-11 {
height: 91.66667%
}
.grid-y>.large-12 {
height: 100%
}
}
.grid-padding-y .grid-padding-y {
margin-top: -.625rem;
margin-bottom: -.625rem
}
@media print,
screen and (min-width:40em) {
.grid-padding-y .grid-padding-y {
margin-top: -.9375rem;
margin-bottom: -.9375rem
}
}
.grid-padding-y>.cell {
padding-top: .625rem;
padding-bottom: .625rem
}
@media print,
screen and (min-width:40em) {
.grid-padding-y>.cell {
padding-top: .9375rem;
padding-bottom: .9375rem
}
}
.grid-frame {
overflow: hidden;
position: relative;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-ms-flex-align: stretch;
align-items: stretch;
width: 100vw
}
.cell .grid-frame {
width: 100%
}
.cell-block {
overflow-x: auto;
max-width: 100%
}
.cell-block,
.cell-block-y {
-webkit-overflow-scrolling: touch;
-ms-overflow-stype: -ms-autohiding-scrollbar
}
.cell-block-y {
overflow-y: auto;
max-height: 100%
}
.cell-block-container {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
max-height: 100%
}
.cell-block-container>.grid-x {
max-height: 100%;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap
}
@media print,
screen and (min-width:40em) {
.medium-grid-frame {
overflow: hidden;
position: relative;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-ms-flex-align: stretch;
align-items: stretch;
width: 100vw
}
.cell .medium-grid-frame {
width: 100%
}
.medium-cell-block {
overflow-x: auto;
max-width: 100%;
-webkit-overflow-scrolling: touch;
-ms-overflow-stype: -ms-autohiding-scrollbar
}
.medium-cell-block-container {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
max-height: 100%
}
.medium-cell-block-container>.grid-x {
max-height: 100%;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap
}
.medium-cell-block-y {
overflow-y: auto;
max-height: 100%;
-webkit-overflow-scrolling: touch;
-ms-overflow-stype: -ms-autohiding-scrollbar
}
}
@media print,
screen and (min-width:64em) {
.large-grid-frame {
overflow: hidden;
position: relative;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-ms-flex-align: stretch;
align-items: stretch;
width: 100vw
}
.cell .large-grid-frame {
width: 100%
}
.large-cell-block {
overflow-x: auto;
max-width: 100%;
-webkit-overflow-scrolling: touch;
-ms-overflow-stype: -ms-autohiding-scrollbar
}
.large-cell-block-container {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
max-height: 100%
}
.large-cell-block-container>.grid-x {
max-height: 100%;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap
}
.large-cell-block-y {
overflow-y: auto;
max-height: 100%;
-webkit-overflow-scrolling: touch;
-ms-overflow-stype: -ms-autohiding-scrollbar
}
}
.grid-y.grid-frame {
width: auto;
overflow: hidden;
position: relative;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-ms-flex-align: stretch;
align-items: stretch;
height: 100vh
}
@media print,
screen and (min-width:40em) {
.grid-y.medium-grid-frame {
width: auto;
overflow: hidden;
position: relative;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-ms-flex-align: stretch;
align-items: stretch;
height: 100vh
}
}
@media print,
screen and (min-width:64em) {
.grid-y.large-grid-frame {
width: auto;
overflow: hidden;
position: relative;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-ms-flex-align: stretch;
align-items: stretch;
height: 100vh
}
}
.cell .grid-y.grid-frame {
height: 100%
}
@media print,
screen and (min-width:40em) {
.cell .grid-y.medium-grid-frame {
height: 100%
}
}
@media print,
screen and (min-width:64em) {
.cell .grid-y.large-grid-frame {
height: 100%
}
}
.grid-margin-y {
margin-top: -.625rem;
margin-bottom: -.625rem
}
@media print,
screen and (min-width:40em) {
.grid-margin-y {
margin-top: -.9375rem;
margin-bottom: -.9375rem
}
}
.grid-margin-y>.cell {
height: calc(100% - 1.25rem);
margin-top: .625rem;
margin-bottom: .625rem
}
@media print,
screen and (min-width:40em) {
.grid-margin-y>.cell {
height: calc(100% - 1.875rem);
margin-top: .9375rem;
margin-bottom: .9375rem
}
}
.grid-margin-y>.auto,
.grid-margin-y>.shrink {
height: auto
}
.grid-margin-y>.small-1 {
height: calc(8.33333% - 1.25rem)
}
.grid-margin-y>.small-2 {
height: calc(16.66667% - 1.25rem)
}
.grid-margin-y>.small-3 {
height: calc(25% - 1.25rem)
}
.grid-margin-y>.small-4 {
height: calc(33.33333% - 1.25rem)
}
.grid-margin-y>.small-5 {
height: calc(41.66667% - 1.25rem)
}
.grid-margin-y>.small-6 {
height: calc(50% - 1.25rem)
}
.grid-margin-y>.small-7 {
height: calc(58.33333% - 1.25rem)
}
.grid-margin-y>.small-8 {
height: calc(66.66667% - 1.25rem)
}
.grid-margin-y>.small-9 {
height: calc(75% - 1.25rem)
}
.grid-margin-y>.small-10 {
height: calc(83.33333% - 1.25rem)
}
.grid-margin-y>.small-11 {
height: calc(91.66667% - 1.25rem)
}
.grid-margin-y>.small-12 {
height: calc(100% - 1.25rem)
}
@media print,
screen and (min-width:40em) {
.grid-margin-y>.auto,
.grid-margin-y>.shrink {
height: auto
}
.grid-margin-y>.small-1 {
height: calc(8.33333% - 1.875rem)
}
.grid-margin-y>.small-2 {
height: calc(16.66667% - 1.875rem)
}
.grid-margin-y>.small-3 {
height: calc(25% - 1.875rem)
}
.grid-margin-y>.small-4 {
height: calc(33.33333% - 1.875rem)
}
.grid-margin-y>.small-5 {
height: calc(41.66667% - 1.875rem)
}
.grid-margin-y>.small-6 {
height: calc(50% - 1.875rem)
}
.grid-margin-y>.small-7 {
height: calc(58.33333% - 1.875rem)
}
.grid-margin-y>.small-8 {
height: calc(66.66667% - 1.875rem)
}
.grid-margin-y>.small-9 {
height: calc(75% - 1.875rem)
}
.grid-margin-y>.small-10 {
height: calc(83.33333% - 1.875rem)
}
.grid-margin-y>.small-11 {
height: calc(91.66667% - 1.875rem)
}
.grid-margin-y>.small-12 {
height: calc(100% - 1.875rem)
}
.grid-margin-y>.medium-auto,
.grid-margin-y>.medium-shrink {
height: auto
}
.grid-margin-y>.medium-1 {
height: calc(8.33333% - 1.875rem)
}
.grid-margin-y>.medium-2 {
height: calc(16.66667% - 1.875rem)
}
.grid-margin-y>.medium-3 {
height: calc(25% - 1.875rem)
}
.grid-margin-y>.medium-4 {
height: calc(33.33333% - 1.875rem)
}
.grid-margin-y>.medium-5 {
height: calc(41.66667% - 1.875rem)
}
.grid-margin-y>.medium-6 {
height: calc(50% - 1.875rem)
}
.grid-margin-y>.medium-7 {
height: calc(58.33333% - 1.875rem)
}
.grid-margin-y>.medium-8 {
height: calc(66.66667% - 1.875rem)
}
.grid-margin-y>.medium-9 {
height: calc(75% - 1.875rem)
}
.grid-margin-y>.medium-10 {
height: calc(83.33333% - 1.875rem)
}
.grid-margin-y>.medium-11 {
height: calc(91.66667% - 1.875rem)
}
.grid-margin-y>.medium-12 {
height: calc(100% - 1.875rem)
}
}
@media print,
screen and (min-width:64em) {
.grid-margin-y>.large-auto,
.grid-margin-y>.large-shrink {
height: auto
}
.grid-margin-y>.large-1 {
height: calc(8.33333% - 1.875rem)
}
.grid-margin-y>.large-2 {
height: calc(16.66667% - 1.875rem)
}
.grid-margin-y>.large-3 {
height: calc(25% - 1.875rem)
}
.grid-margin-y>.large-4 {
height: calc(33.33333% - 1.875rem)
}
.grid-margin-y>.large-5 {
height: calc(41.66667% - 1.875rem)
}
.grid-margin-y>.large-6 {
height: calc(50% - 1.875rem)
}
.grid-margin-y>.large-7 {
height: calc(58.33333% - 1.875rem)
}
.grid-margin-y>.large-8 {
height: calc(66.66667% - 1.875rem)
}
.grid-margin-y>.large-9 {
height: calc(75% - 1.875rem)
}
.grid-margin-y>.large-10 {
height: calc(83.33333% - 1.875rem)
}
.grid-margin-y>.large-11 {
height: calc(91.66667% - 1.875rem)
}
.grid-margin-y>.large-12 {
height: calc(100% - 1.875rem)
}
}
.grid-frame.grid-margin-y {
height: calc(100vh + 1.25rem)
}
@media print,
screen and (min-width:40em) {
.grid-frame.grid-margin-y {
height: calc(100vh + 1.875rem)
}
}
@media print,
screen and (min-width:64em) {
.grid-frame.grid-margin-y {
height: calc(100vh + 1.875rem)
}
}
@media print,
screen and (min-width:40em) {
.grid-margin-y.medium-grid-frame {
height: calc(100vh + 1.875rem)
}
}
@media print,
screen and (min-width:64em) {
.grid-margin-y.large-grid-frame {
height: calc(100vh + 1.875rem)
}
}
.align-right {
-ms-flex-pack: end;
justify-content: flex-end
}
.align-center {
-ms-flex-pack: center;
justify-content: center
}
.align-justify {
-ms-flex-pack: justify;
justify-content: space-between
}
.align-spaced {
-ms-flex-pack: distribute;
justify-content: space-around
}
.align-right.vertical.menu>li>a {
-ms-flex-pack: end;
justify-content: flex-end
}
.align-center.vertical.menu>li>a {
-ms-flex-pack: center;
justify-content: center
}
.align-top {
-ms-flex-align: start;
align-items: flex-start
}
.align-self-top {
-ms-flex-item-align: start;
align-self: flex-start
}
.align-bottom {
-ms-flex-align: end;
align-items: flex-end
}
.align-self-bottom {
-ms-flex-item-align: end;
align-self: flex-end
}
.align-middle {
-ms-flex-align: center;
align-items: center
}
.align-self-middle {
-ms-flex-item-align: center;
align-self: center
}
.align-stretch {
-ms-flex-align: stretch;
align-items: stretch
}
.align-self-stretch {
-ms-flex-item-align: stretch;
align-self: stretch
}
.align-center-middle {
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center
}
.small-order-1 {
-ms-flex-order: 1;
order: 1
}
.small-order-2 {
-ms-flex-order: 2;
order: 2
}
.small-order-3 {
-ms-flex-order: 3;
order: 3
}
.small-order-4 {
-ms-flex-order: 4;
order: 4
}
.small-order-5 {
-ms-flex-order: 5;
order: 5
}
.small-order-6 {
-ms-flex-order: 6;
order: 6
}
@media print,
screen and (min-width:40em) {
.medium-order-1 {
-ms-flex-order: 1;
order: 1
}
.medium-order-2 {
-ms-flex-order: 2;
order: 2
}
.medium-order-3 {
-ms-flex-order: 3;
order: 3
}
.medium-order-4 {
-ms-flex-order: 4;
order: 4
}
.medium-order-5 {
-ms-flex-order: 5;
order: 5
}
.medium-order-6 {
-ms-flex-order: 6;
order: 6
}
}
@media print,
screen and (min-width:64em) {
.large-order-1 {
-ms-flex-order: 1;
order: 1
}
.large-order-2 {
-ms-flex-order: 2;
order: 2
}
.large-order-3 {
-ms-flex-order: 3;
order: 3
}
.large-order-4 {
-ms-flex-order: 4;
order: 4
}
.large-order-5 {
-ms-flex-order: 5;
order: 5
}
.large-order-6 {
-ms-flex-order: 6;
order: 6
}
}
.flex-container {
display: -ms-flexbox;
display: flex
}
.flex-child-auto {
-ms-flex: 1 1 auto;
flex: 1 1 auto
}
.flex-child-grow {
-ms-flex: 1 0 auto;
flex: 1 0 auto
}
.flex-child-shrink {
-ms-flex: 0 1 auto;
flex: 0 1 auto
}
.flex-dir-row {
-ms-flex-direction: row;
flex-direction: row
}
.flex-dir-row-reverse {
-ms-flex-direction: row-reverse;
flex-direction: row-reverse
}
.flex-dir-column {
-ms-flex-direction: column;
flex-direction: column
}
.flex-dir-column-reverse {
-ms-flex-direction: column-reverse;
flex-direction: column-reverse
}
@media print,
screen and (min-width:40em) {
.medium-flex-container {
display: -ms-flexbox;
display: flex
}
.medium-flex-child-auto {
-ms-flex: 1 1 auto;
flex: 1 1 auto
}
.medium-flex-child-grow {
-ms-flex: 1 0 auto;
flex: 1 0 auto
}
.medium-flex-child-shrink {
-ms-flex: 0 1 auto;
flex: 0 1 auto
}
.medium-flex-dir-row {
-ms-flex-direction: row;
flex-direction: row
}
.medium-flex-dir-row-reverse {
-ms-flex-direction: row-reverse;
flex-direction: row-reverse
}
.medium-flex-dir-column {
-ms-flex-direction: column;
flex-direction: column
}
.medium-flex-dir-column-reverse {
-ms-flex-direction: column-reverse;
flex-direction: column-reverse
}
}
@media print,
screen and (min-width:64em) {
.large-flex-container {
display: -ms-flexbox;
display: flex
}
.large-flex-child-auto {
-ms-flex: 1 1 auto;
flex: 1 1 auto
}
.large-flex-child-grow {
-ms-flex: 1 0 auto;
flex: 1 0 auto
}
.large-flex-child-shrink {
-ms-flex: 0 1 auto;
flex: 0 1 auto
}
.large-flex-dir-row {
-ms-flex-direction: row;
flex-direction: row
}
.large-flex-dir-row-reverse {
-ms-flex-direction: row-reverse;
flex-direction: row-reverse
}
.large-flex-dir-column {
-ms-flex-direction: column;
flex-direction: column
}
.large-flex-dir-column-reverse {
-ms-flex-direction: column-reverse;
flex-direction: column-reverse
}
}
.callout {
position: relative;
margin: 0 0 1rem;
padding: 1rem;
border: 1px solid hsla(0, 0%, 4%, .25);
border-radius: 4px;
background-color: #fff;
color: #0a0a0a
}
.callout>:first-child {
margin-top: 0
}
.callout>:last-child {
margin-bottom: 0
}
.callout.primary {
background-color: #d7ecfa;
color: #0a0a0a
}
.callout.secondary {
background-color: #eaeaea;
color: #0a0a0a
}
.callout.success {
background-color: #e1faea;
color: #0a0a0a
}
.callout.warning {
background-color: #fff3d9;
color: #0a0a0a
}
.callout.alert {
background-color: #f7e4e1;
color: #0a0a0a
}
.callout.small {
padding: .5rem
}
.callout.large {
padding: 3rem
}
.hide {
display: none !important
}
.invisible {
visibility: hidden
}
@media screen and (max-width:39.9375em) {
.hide-for-small-only {
display: none !important
}
}
@media screen and (max-width:0),
screen and (min-width:40em) {
.show-for-small-only {
display: none !important
}
}
@media print,
screen and (min-width:40em) {
.hide-for-medium {
display: none !important
}
}
@media screen and (max-width:39.9375em) {
.show-for-medium {
display: none !important
}
}
@media screen and (min-width:40em) and (max-width:63.9375em) {
.hide-for-medium-only {
display: none !important
}
}
@media screen and (max-width:39.9375em),
screen and (min-width:64em) {
.show-for-medium-only {
display: none !important
}
}
@media print,
screen and (min-width:64em) {
.hide-for-large {
display: none !important
}
}
@media screen and (max-width:63.9375em) {
.show-for-large {
display: none !important
}
}
@media screen and (min-width:64em) and (max-width:74.9375em) {
.hide-for-large-only {
display: none !important
}
}
@media screen and (max-width:63.9375em),
screen and (min-width:75em) {
.show-for-large-only {
display: none !important
}
}
.show-for-sr,
.show-on-focus {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
border: 0
}
.show-on-focus:active,
.show-on-focus:focus {
position: static !important;
width: auto;
height: auto;
overflow: visible;
clip: auto;
white-space: normal;
-webkit-clip-path: none;
clip-path: none
}
.hide-for-portrait,
.show-for-landscape {
display: block !important
}
@media screen and (orientation:landscape) {
.hide-for-portrait,
.show-for-landscape {
display: block !important
}
}
@media screen and (orientation:portrait) {
.hide-for-portrait,
.show-for-landscape {
display: none !important
}
}
.hide-for-landscape,
.show-for-portrait {
display: none !important
}
@media screen and (orientation:landscape) {
.hide-for-landscape,
.show-for-portrait {
display: none !important
}
}
@media screen and (orientation:portrait) {
.hide-for-landscape,
.show-for-portrait {
display: block !important
}
}
@font-face {
font-family: Avenir-Light;
src: url(../fonts/Avenir/AvenirLTStandard/AvenirLTStd-Light.otf)
}
@font-face {
font-family: Avenir-Medium;
src: url(../fonts/Avenir/AvenirLTStandard/AvenirLTStd-Medium.otf)
}
@font-face {
font-family: Avenir-Heavy;
src: url(../fonts/Avenir/AvenirLTStandard/AvenirLTStd-Heavy.otf)
}
@font-face {
font-family: Avenir-Roman;
src: url(../fonts/Avenir/AvenirLTStandard/AvenirLTStd-Roman.otf)
}
.avenir-light {
font-family: Avenir-Light, sans-serif
}
.avenir-bold {
font-family: Avenir-Heavy, sans-serif
}
body {
background-color: #fff;
font-family: Avenir-Roman, sans-serif;
color: #5d6268;
font-weight: 300
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: Avenir-Medium, sans-serif;
color: #36383a;
font-weight: 400;
line-height: 1.1
}
h1 span.subtitle,
h2 span.subtitle,
h3 span.subtitle,
h4 span.subtitle,
h5 span.subtitle,
h6 span.subtitle {
display: block;
font-size: .7em;
padding-top: .25rem;
font-family: Avenir-Light, sans-serif
}
.header-text {
max-width: 550px;
margin-left: auto;
margin-right: auto
}
.header-text--mb-lg {
margin-bottom: 4rem
}
.text-readable {
max-width: 550px;
margin-left: auto;
margin-right: auto
}
.text-bold {
font-family: Avenir-Heavy, sans-serif
}
.text-lead {
font-size: 1.5rem
}
@media screen and (max-width:40rem) {
.text-lead {
font-size: 1.2rem
}
}
.icon-credit-card-payment,
.with-icon-credit-card-payments a:before {
background-image: url(../images/credit-card-payments.png)
}
.icon-credit-card-payment,
.icon-recurring-payment,
.with-icon-credit-card-payments a:before,
.with-icon-recurring-payments a:before {
content: "";
vertical-align: middle;
margin-right: 13px;
display: inline-block;
height: 38px;
width: 38px;
background-repeat: no-repeat;
background-size: 38px 38px
}
.icon-recurring-payment,
.with-icon-recurring-payments a:before {
background-image: url(../images/recurring-payments.png)
}
.icon-bpay,
.with-icon-bpay-payments a:before {
background-image: url(../images/bpay-payments.png)
}
.icon-bpay,
.icon-customer-management,
.with-icon-bpay-payments a:before,
.with-icon-customer-management a:before {
content: "";
vertical-align: middle;
margin-right: 13px;
display: inline-block;
height: 38px;
width: 38px;
background-repeat: no-repeat;
background-size: 38px 38px
}
.icon-customer-management,
.with-icon-customer-management a:before {
background-image: url(../images/xero.png)
}
.icon-virtual-terminal,
.with-icon-virtual-terminal a:before {
background-image: url(../images/virtual_terminal-feature.png)
}
.icon-customers,
.icon-virtual-terminal,
.with-icon-customers a:before,
.with-icon-virtual-terminal a:before {
content: "";
vertical-align: middle;
margin-right: 13px;
display: inline-block;
height: 38px;
width: 38px;
background-repeat: no-repeat;
background-size: 38px 38px
}
.icon-customers,
.with-icon-customers a:before {
background-image: url(../images/customer-management.png)
}
.icon-developers,
.with-icon-developers a:before {
background-image: url(../images/developers.png)
}
.icon-developers,
.icon-payment-request,
.with-icon-developers a:before,
.with-icon-payment-request a:before {
content: "";
vertical-align: middle;
margin-right: 13px;
display: inline-block;
height: 38px;
width: 38px;
background-repeat: no-repeat;
background-size: 38px 38px
}
.icon-payment-request,
.with-icon-payment-request a:before {
background-image: url(../images/payment-request-feature.png)
}
.icon-corporate-options,
.with-icon-corporate-options a:before {
background-image: url(../images/pa-icons/corporate-options.svg)
}
#developers #stats-home {
padding-top: 12rem;
position: relative;
}
#developer-help {
background-color: #F9F9F9;
border-top: 2px solid #EFEFEF;
}
#developer-help .text-lead {
max-width: 620px;
margin-left: auto;
margin-right: auto;
}
a {
text-decoration: none
}
.secondary-link a {
transition: .3s
}
.secondary-link a:hover {
color: #fff
}
.top-bar-right .menu li a:hover {
color: #d51e33;
transition: .2s
}
.float-left {
float: left !important
}
.float-right {
float: right !important
}
.float-center {
display: block;
margin-right: auto;
margin-left: auto
}
.clearfix:after,
.clearfix:before {
display: table;
content: " ";
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-order: 1;
order: 1
}
.clearfix:after {
clear: both
}
.container,
.container-lg,
.container-medium {
margin: 0 auto
}
.container-medium {
max-width: 64rem
}
.container {
max-width: 71.25rem
}
.container-lg {
max-width: 85rem
}
.container--padding,
.container-lg {
padding-left: 1rem;
padding-right: 1rem
}
.section {
padding: 5.625rem 0
}
.section--mb-0 {
padding-bottom: 0 !important
}
.section--border-bottom {
border-bottom: 1px solid #e6e9ec
}
.with-border-top {
border-top: 1px solid #e6e9ec
}
.xsm-container {
max-width: 350px
}
section.xero-invoices-lg {
z-index: 100;
width: 100vw
}
@media screen and (max-width:64rem) {
section.xero-invoices .ccfcScreen {
max-height: 30rem;
}
section.xero-invoices .b-steps-img-flow li,
section.xero-invoices .v-steps-img-flow li {
bottom: 0;
}
}
#cc-processing #developer-friendly {
padding-top: 12rem;
}
.content--off {
background-color: #f9f9f9
}
table {
width: 100%;
border-collapse: collapse
}
table.lg-font {
font-size: 1.375rem
}
@media screen and (min-width:40rem) {
.bordered-red {
border-left: .125rem solid #d51e33;
border-right: .125rem solid #d51e33
}
}
@media screen and (min-width:40rem) {
.bordered-green {
border-left: .125rem solid #00c45e;
border-right: .125rem solid #00c45e
}
}
@media screen and (min-width:40rem) {
.bordered-red-top {
border-top: .125rem solid #d51e33
}
}
@media screen and (min-width:40rem) {
.bordered-green-top {
border-top: .125rem solid #00c45e
}
}
@media screen and (min-width:40rem) {
.bordered-red-bottom {
border-bottom: .125rem solid #d51e33
}
}
@media screen and (min-width:40rem) {
.bordered-green-bottom {
border-bottom: .125rem solid #00c45e
}
}
.td-lg-padding td {
font-size: .625rem;
padding: 1rem .9375rem
}
.bpay-icon-small,
.eft-small,
.td-label-icon {
display: none
}
@media screen and (max-width:40rem) {
.td-lg-padding td {
min-width: 50px
}
table.lg-font {
font-size: .7rem
}
.td-lg-padding td {
padding: .5rem 0
}
.trophy-icon {
display: none
}
.bpay-icon {
width: 30px
}
}
.text-left {
text-align: left !important
}
.text-right {
text-align: right !important
}
.text-center {
text-align: center !important
}
.text-lowercase {
text-transform: lowercase !important
}
.text-uppercase {
text-transform: uppercase !important
}
.text-capitalize {
text-transform: capitalize !important
}
.text-display {
margin-bottom: 0
}
.no-margin {
margin: 0 !important
}
.text-small {
font-size: .8rem
}
.text-stat {
font-size: 3rem;
font-family: Avenir-Light, sans-serif;
margin-bottom: 0
}
@media screen and (max-width:40rem) {
.text-stat {
font-size: 2rem
}
}
@media screen and (max-width:374px) {
.text-stat {
font-size: 1.5rem
}
}
.text-highlight-new {
position: relative;
display: inline-block
}
@media screen and (min-width:64rem) {
.text-highlight-new:after {
content: "";
width: 100%;
left: 0;
bottom: -4px;
height: 1px;
background: #2b86f0;
position: absolute
}
.text-highlight-new span {
position: absolute;
right: 0;
top: -34px;
border-radius: 12px;
color: #fff;
background: #2b86f0;
padding: .5rem .75rem;
font-size: 12px;
text-transform: uppercase;
line-height: 1;
font-weight: 700
}
.text-highlight-new span:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: transparent;
border-top-color: #2b86f0;
border-width: 4px;
margin-left: -4px
}
.text-highlight-new span.alt {
top: 0;
right: 0;
font-size: .5rem;
transform: translateX(120%)
}
.text-highlight-new span.alt:after {
top: 50%;
left: 0
}
}
@media screen and (max-width:64rem) {
.text-highlight-new {
display: inline;
border-bottom: 1px solid #2b86f0
}
.text-highlight-new span {
display: none
}
}
.checked-1,
.checked-2,
.checked-3,
.checked-4,
.checked-5,
.checked-6,
.checked-7,
.checked-8 {
transform: translateY(-25px);
opacity: 0
}
.vertical-steps {
list-style: none;
padding: 0
}
.vertical-steps .v-step {
opacity: .3;
transition: .3s;
position: relative;
padding-left: 111px;
margin-bottom: 50px
}
.vertical-steps .v-step.opc-animate {
opacity: 1
}
.vertical-steps .v-step:last-child:after {
display: none
}
.vertical-steps .fl-img {
display: block;
position: absolute;
top: 0;
left: 0;
width: 80px;
text-align: center
}
.vertical-steps .v-step-1:after {
top: 1.65rem;
height: 6.5rem
}
.vertical-steps .v-step-1:after,
.vertical-steps .v-step-2:after {
content: "";
display: block;
border-left: 1px solid #e6e9ec;
position: absolute;
left: 2.5rem
}
.vertical-steps .v-step-2:after {
top: 3.5rem;
height: 4.55rem
}
.vertical-steps .v-step-2 img,
.vertical-steps .v-step-3 img {
position: relative;
top: -.625rem
}
section.xero-invoices-lg .vertical-steps {
list-style: none;
padding: 0
}
section.xero-invoices-lg .vertical-steps .fix-step {
opacity: .3;
transition: .3s;
position: relative;
padding-left: 6.9375rem;
margin-bottom: 5rem
}
section.xero-invoices-lg .vertical-steps .fix-step.opc-animate {
opacity: 1
}
section.xero-invoices-lg .vertical-steps .fix-step.opc-animate-off {
opacity: .3
}
section.xero-invoices-lg .vertical-steps .fix-step:last-child {
margin-bottom: 4.375rem
}
section.xero-invoices-lg .vertical-steps .fix-step:last-child:after {
display: none
}
section.xero-invoices-lg .vertical-steps .fl-img {
display: block;
position: absolute;
top: 0;
left: 0;
width: 5rem;
text-align: center
}
section.xero-invoices-lg .vertical-steps .fix-step-1:after {
content: "";
height: 100%;
display: block;
border-left: 1px solid #e6e9ec;
position: absolute;
top: 1.65rem;
left: 2.5rem;
height: 8.5rem
}
section.xero-invoices-lg .vertical-steps .fix-step-2:after {
content: "";
height: 100%;
display: block;
border-left: 1px solid #e6e9ec;
position: absolute;
top: 3.5rem;
left: 2.5rem;
height: 6.55rem
}
section.xero-invoices-lg .vertical-steps .fix-step-2 img,
section.xero-invoices-lg .vertical-steps .fix-step-3 img {
position: relative;
top: -.625rem
}
section#cc-processing .fix-step-1:after {
height: 7.5rem
}
section#cc-processing .vertical-steps .v-step-1:after {
height: 5.75rem
}
#howBpayWorks ul.vertical-steps {
list-style: none;
padding: 0;
-ms-flex: auto;
flex: auto;
-webkit-margin-after: 0;
-webkit-margin-before: 0
}
#howBpayWorks ul.vertical-steps .b-step {
opacity: .3;
transition: .3s;
margin-bottom: 0;
position: relative;
padding-left: 0
}
#howBpayWorks ul.vertical-steps .b-step.opc-animate {
opacity: 1
}
#howBpayWorks ul.vertical-steps .b-step:after {
content: "";
height: 100%;
display: block;
border-left: 0;
position: absolute;
top: 39px;
left: 40px
}
#howBpayWorks ul.vertical-steps .b-step:last-child:after {
display: none
}
#howBpayWorks ul.vertical-steps li {
display: block;
float: left;
width: 33%
}
#howBpayWorks ul.vertical-steps .fl-img {
display: block;
position: absolute;
top: 0;
left: 0;
width: 80px;
text-align: center
}
#howBpayWorks .process-arrows {
width: 3.9375rem;
height: 1.1875rem;
position: absolute;
top: 30%;
right: -31px
}
#dots {
width: 100%;
fill: #ccc
}
.hidden {
visibility: hidden
}
@media screen and (min-width:40rem) {
#howBpayWorks ul.vertical-steps .b-step {
opacity: 1
}
}
@media screen and (max-width:40rem) {
#howBpayWorks ul.vertical-steps li {
width: 100%;
padding-bottom: 2.5rem
}
#howBpayWorks ul.vertical-steps .b-step {
opacity: 1
}
#howBpayWorks .process-arrows {
display: none
}
.vertical-steps .v-step {
opacity: 1
}
}
.b-steps-img-flow li,
.v-steps-img-flow li {
list-style: none;
width: 0;
height: 0
}
.b-steps-img-flow li img,
.v-steps-img-flow li img {
opacity: 1;
transition: .9s ease-out
}
.b-steps-img-flow li.opc-img-animate,
.v-steps-img-flow li.opc-img-animate {
width: auto;
height: auto
}
.b-steps-img-flow li.opc-img-animate img,
.v-steps-img-flow li.opc-img-animate img {
opacity: 1;
transition: .9s;
transform: translateY(0)
}
.b-steps-img-flow li img,
.v-steps-img-flow li img {
transform: translateX(0) !important
}
.fix-steps-img-flow li {
list-style: none;
width: 0;
height: 0;
top: -7px;
}
.fix-step:hover {
opacity: 1
}
.fix-steps-img-flow {
position: relative;
list-style: none;
height: 100%
}
.fix-steps-img-flow li {
position: absolute;
height: auto !important;
width: auto !important
}
.fix-step-img {
opacity: 0
}
.fix-step-img.active {
opacity: 1;
transform: translate(0) !important
}
.fix-step-img-1 {
opacity: 0
}
.b-step,
.v-step {
cursor: pointer
}
.b-step:hover,
.v-step:hover {
opacity: 1
}
.b-steps-img-flow,
.v-steps-img-flow {
position: relative;
list-style: none;
height: 100%
}
.b-steps-img-flow li,
.v-steps-img-flow li {
position: absolute;
height: auto !important;
width: auto !important
}
.b-steps-img-flow li img,
.v-steps-img-flow li img {
opacity: 1 !important;
transform: translate(0) !important
}
.b-step-img,
.v-step-img {
opacity: 0;
transition: all .3s ease-in-out;
transform: translateY(-28px) !important
}
.b-step-img.active,
.v-step-img.active {
opacity: 1;
transform: translate(0) !important
}
@media screen and (max-width:64rem) {
section.xero-invoices-lg {
display: none
}
}
@media screen and (min-width:64.0625rem) {
section.xero-invoices {
display: none
}
}
.bg-black-darker {
color: #fff;
background-color: #1d1e1f
}
.bg-grey-light {
background-color: #f9f9f9
}
.bg-customers-washed {
background-image: url(../images/bg-customers-washed.png);
background-size: cover;
background-repeat: no-repeat
}
.bg-red {
color: #fff;
background: #d51e33;
background: linear-gradient(90deg, #d51e33 0, #ec4062)
}
.bg-lrg {
background: #52e28e;
background: linear-gradient(135deg, #52e28e, #00baed)
}
section#bpay-is-better.bg-black-darker {
background: url(../images/bpay-better-back.svg) no-repeat 50%;
background-size: cover;
background-color: #1d1e1f
}
section#partial-cleared-fund.bg-black-darker {
background: url(../images/cleared-funds-back.svg) no-repeat 50%;
background-size: cover;
background-color: #1d1e1f
}
section#send-pay-requests.bg-black-darker {
background: url(../images/send-pay-requests-back.svg) no-repeat 50%;
background-size: cover;
background-color: #1d1e1f
}
section#send-pay-requests.bg-red-darker {
background: url(../images/send-pay-requests-back.svg) no-repeat 50%;
background-size: cover;
background-color: #DC3B4D;
color: #fff;
}
section#send-pay-requests.bg-red-darker .dev-item h3 {
color: #fff;
}
.bg-off-white {
background-color: #f9f9f9
}
.bg-light-gradient {
background-image: linear-gradient(-180deg, hsla(0, 0%, 99%, 0), #f9f9f9)
}
.bg-xero {
background-color: #13b5ea
}
#bpay-page .xero-invoices,
#bpay-page .xero-invoices-lg,
#xero .xero-invoices,
#xero .xero-invoices-lg {
background-color: #f9f9f9
}
.relative {
position: relative
}
@media screen and (min-width:64.0625rem) {
.fix {
position: fixed;
top: 0;
left: 0
}
}
.v-container {
display: table;
height: 100%;
width: 100%
}
.v-center {
display: table-cell;
vertical-align: middle
}
.center-vert {
top: 50%;
transform: translateY(-50%)
}
.center-vert,
.two-cell-seperator {
position: relative
}
.two-cell-seperator:after,
.two-cell-seperator:before {
content: "";
position: absolute;
top: 0;
left: 50%
}
.two-cell-seperator:after {
display: block;
height: 100%;
border-left: 1px solid #e6e9ec
}
.two-cell-seperator:before {
content: "OR";
display: block;
white-space: pre-line;
width: 40px;
line-height: 130%;
padding: 5px;
background: #fff;
margin-left: -20px;
z-index: 2;
top: calc(50% - 28px)
}
@media screen and (max-width:40rem) {
.two-cell-seperator {
position: relative
}
.two-cell-seperator:after,
.two-cell-seperator:before {
content: "";
position: absolute;
top: 0;
left: 50%
}
.two-cell-seperator:after {
display: block;
height: 1px;
width: 60%;
border-top: 1px solid #e6e9ec;
top: calc(50% - .25rem);
left: 20%
}
.two-cell-seperator:before {
content: "OR";
display: block;
white-space: pre-line;
width: 40px;
line-height: 130%;
padding: 5px;
background: #fff;
margin-left: -20px;
z-index: 2;
top: calc(50% - 1rem)
}
.two-cell-seperator .biller-pulse img {
padding-top: 4rem
}
}
body .button.button-lg {
min-width: 254px
}
.logo {
margin-left: 1.75rem
}
body .hero .button {
margin-top: 1.5rem
}
body #partial-upgrade-payments .cell.svg-main-wrap {
padding: 0 1.5rem
}
body #partial-upgrade-payments .inner-text {
padding-top: 0
}
body #partial-upgrade-payments #upgradePayments {
margin-top: 14px;
transform: perspective(600px) rotateY(-15deg)
}
body #partial-upgrade-payments svg {
margin: 0 !important;
width: 100%
}
#partial-upgrade-payments .section-header {
text-align: center
}
#howBpayWorks h3,
#partial-biller-codes h3 {
margin-top: 2rem
}
#partial-cleared-fund {
padding-bottom: 9.375rem
}
.secondary-link {
color: #d51e33;
transition: .2s
}
.text-60-filter p {
opacity: .6
}
p {
font-size: 1rem
}
.header-text {
font-size: 1.75rem
}
.header-text-small {
font-size: 1.6rem
}
h1 {
margin-top: 0
}
h1,
h2,
h3 {
font-weight: 400;
letter-spacing: .01em;
-webkit-margin-before: 0;
-webkit-margin-after: 0
}
h1 {
font-size: 2rem;
margin-bottom: 1.9rem
}
@media screen and (min-width:40rem) {
h1 {
font-size: 2.5rem
}
}
h2 {
font-size: 1.75rem;
margin-bottom: 1.9rem;
margin-top: 0
}
@media screen and (min-width:40rem) {
h2 {
font-size: 2rem
}
}
h3 {
font-size: 1.375rem;
margin-bottom: 1.375rem
}
h3,
h4 {
margin-top: 0
}
h4 {
font-size: 1.125rem
}
p {
-webkit-margin-before: 0;
-webkit-margin-after: 0;
margin-bottom: 1.9rem
}
.capitalized {
text-transform: capitalize
}
.off-canvas-wrapper {
overflow: hidden
}
.white-text {
color: #fff
}
.text-link {
color: #d51e33
}
.text-link:hover {
color: #a81828
}
.ccfc-featured-items h3 {
font-size: 1.125rem
}
.ccfc-featured-items .item {
max-width: 20.5rem;
margin: 0 0 2.8125rem auto
}
.ccfc-featured-items p {
font-size: .875rem;
opacity: .6
}
.ccfc-featured-items .icon {
width: 1.25rem;
margin-left: .4375rem
}
.ccfc-featured-items .icon-mobile {
width: 1.25rem;
display: none
}
.ccfc-screen {
position: relative
}
.ccfc-screen .main-screen {
height: 20.3125rem;
width: 35.9375rem;
background-repeat: no-repeat;
background-size: cover;
transform: translateX(500px);
opacity: 0
}
.ccfc-screen .phone-elem {
position: absolute;
bottom: -2.5rem;
width: 7.5rem;
height: 14.75rem;
left: 21.25rem;
right: 0;
margin: 0 auto;
transform: translateX(500px);
opacity: 0
}
.ccfc-screen .right-freq-container {
position: absolute;
top: 23%;
right: 0
}
.ccfc-screen .freq {
position: absolute;
top: 22%;
height: 4.375rem;
width: 2.4375rem
}
.ccfc-screen .freq .signal {
position: absolute;
animation: a .8s infinite alternate ease-in-out
}
.ccfc-screen .freq.left-freq {
left: -3.125rem
}
.ccfc-screen .freq.right-freq {
right: -3.125rem;
transform: rotate(180deg)
}
.ccfc-screen .freq .long-signal {
width: 1.5rem;
left: 0;
top: 0;
animation-delay: .6s
}
.ccfc-screen .freq .small-signal {
top: .75rem;
left: 1.1875rem;
width: 1rem;
animation-delay: .3s
}
@keyframes a {
0% {
opacity: 0
}
to {
opacity: 1
}
}
.mf-item {
padding: 0 1.5rem;
position: relative
}
.bg-off-white.sign-up {
background-color: #f9f9f9
}
.bg-off-white.sign-up .oval-s-1,
.bg-off-white.sign-up .oval-s-2 {
opacity: .5
}
.grid-padding-x>.cell {
padding: 0 1.5rem
}
.element-header.with-margin-bottom {
margin-bottom: 2.125rem
}
.td-label-icon {
margin-right: .625rem
}
.main-table img {
width: 1.0625rem
}
section#partial-cleared-fund .header-wrap {
maring-bottom: 0 !important
}
section#bpay-is-better {
padding-bottom: 8.25rem
}
.xero-invoices {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.xero-invoices .cell-2 {
display: none
}
.why-choose-us h2 {
margin-bottom: 5.5625rem
}
.why-choose-us h3 {
font-size: 1.25rem
}
.why-choose-us img {
width: 14px;
margin-right: 4px
}
#partial-cleared-fund .header-wrap {
margin-bottom: 0 !important
}
@media (min-width:64.0625rem) {
.gr h2 {
padding-left: 78px
}
.gr h2 img {
left: 0
}
.gr .container-medium {
max-width: 768px
}
.gr .button {
margin-top: 0
}
.td-lg-padding td {
font-size: 1.375rem
}
body .hero .button.button-lg {
margin-top: 0;
min-width: 268px
}
.ccfc-featured-items p {
font-size: 16px
}
.ccfc-screen .freq {
height: 94px
}
.ccfc-screen .main-screen {
height: 525px;
width: 64rem
}
.ccfc-screen .phone-elem {
bottom: -86px;
width: 232px;
height: 423px
}
.ccfc-screen .freq .long-signal {
width: 32px
}
.ccfc-screen .freq .small-signal {
left: 22px;
width: 1.5rem
}
.why-choose-us img {
width: 30px
}
.xero-invoices p {
font-size: 16px
}
.xero-invoices .header-text {
margin-bottom: 5.625rem
}
.container-small,
body .container-medium {
max-width: 64rem
}
.section {
padding: 5.625rem 0
}
.header-text {
font-size: 32px
}
body #partial-upgrade-payments svg {
width: auto
}
body #partial-upgrade-payments .container-medium,
body #partial-upgrade-payments .container-small {
max-width: 64rem
}
.element-header.with-margin-bottom {
margin-bottom: 2.78rem
}
.container-medium {
max-width: 64rem;
width: 100%
}
.container-small {
max-width: 768px;
width: 100%;
margin: 0 auto
}
.main-table img {
width: 26px
}
.td-lg-padding td {
font-size: 22px
}
.main-table .trophy-icon {
width: 51px;
left: calc(50% - 22px);
bottom: -42px;
transform: translateY(-50px) scale(2);
opacity: 0
}
.main-table .bpay-icon {
width: 63px
}
.table-pbp {
max-width: 47.875rem;
margin: 0 auto
}
.tablet-up-none {
display: none !important
}
}
.svg-icons {
margin: auto;
height: 5.75rem
}
@media screen and (max-width:64rem) {
h1 {
font-size: 2rem
}
.container-small,
body .container-medium {
max-width: 90%;
margin-left: auto;
margin-right: auto
}
.section {
padding: 4.5rem 0
}
#partial-biller-codes p {
max-width: 11.5625rem;
margin: auto
}
.ccfc-featured-items .item {
margin: 0 auto 45px
}
.ccfc-featured-items .item:last-of-type {
margin: 0 auto
}
#partial-cleared-fund {
padding-bottom: 5.375rem
}
.ccfc-screen .main-screen {
height: 26.5625rem
}
.ccfc-screen .phone-elem {
bottom: -35px;
width: 140px;
height: 266px;
left: 0
}
.ccfc-screen .freq,
.ccfc-screen .right-freq-container {
top: 30%
}
.phone-elem {
left: 0
}
.td-lg-padding td {
font-size: 1rem
}
.why-choose-us h2 {
margin-bottom: 2.5rem
}
.tablet-up-none {
display: block
}
.tablet-up-none a img {
max-width: 70%
}
}
@media (min-width:40rem) {
.mobile-up-none {
display: none !important
}
.mobile-down-none {
display: block !important
}
.header-text.small-wrap {
max-width: 443px;
margin-left: auto;
margin-right: auto
}
.xero-invoices .cell-2 {
display: block
}
body #partial-upgrade-payments .inner-text {
padding-top: 0
}
body #partial-upgrade-payments .section-header {
text-align: right
}
.grid-padding-x>.cell {
padding: 0 16px
}
.container-medium,
.container-small {
max-width: 478px;
margin: 0 auto
}
.main-table img {
width: 1.625rem
}
.main-table img.bpay-icon {
width: 3rem
}
.main-table img.trophy-icon {
left: calc(50% - 25px);
bottom: -45px;
width: 3rem
}
section#partial-cleared-fund .cell-1 {
text-align: right;
padding-top: 0
}
body .hero.small {
height: 311px
}
body .hero .button {
margin-top: 1.75rem
}
body .hero.small {
padding-top: 4.813rem
}
body .hero .button.button-lg {
min-width: 16.75rem
}
}
@media screen and (max-width:40rem) {
.mobile-up-none {
display: block
}
.mobile-down-none {
display: none
}
.section {
padding: 4rem 0
}
p {
font-size: .875rem
}
section#bpay-is-better {
padding-bottom: 2.5rem
}
#partial-biller-codes div.small-12.medium-6.cell:first-of-type {
padding-bottom: 2rem
}
#howBpayWorks .invoice:after,
#howBpayWorks .payment:after {
display: none
}
#howBpayWorks h3 {
margin-top: 0
}
#howBpayWorks p {
margin-bottom: 0
}
#howBpayWorks div.mf-item {
margin-bottom: 2.5rem
}
#howBpayWorks div.mf-item:last-of-type {
margin-bottom: 0
}
#howBpayWorks .svg-icons {
max-width: 6.5rem;
width: 24%;
float: left;
margin-right: 6%;
clear: both
}
#howBpayWorks .howBPAY-text {
float: left;
text-align: left;
max-width: 70%
}
.header-text,
h2 {
font-size: 1.5rem;
margin-bottom: 2rem
}
h3 {
font-size: 1.25rem;
margin-bottom: .75rem
}
.ccfc-featured-items .item {
margin: 0 auto 45px;
text-align: center
}
#partial-cleared-fund .inner-text {
padding-right: 1.5rem !important
}
.ccfc-featured-items .icon {
display: none
}
.ccfc-featured-items .icon-mobile {
display: inline-block
}
.element-header.with-margin-bottom {
margin-bottom: 0
}
.why-choose-us img {
width: 1.25rem
}
.footer .colophon,
.footer .inner-footer {
text-align: center
}
}
@media screen and (max-width:40rem) {
.hide-mobile {
display: none
}
}
@media screen and (min-width:40rem) {
.show-mobile {
display: none !important
}
}
.mb-sm {
margin-bottom: 3rem
}
@media screen and (max-width:40rem) {
.mb-sm {
margin-bottom: 2rem
}
}
.mb-md {
margin-bottom: 6rem
}
@media screen and (max-width:40rem) {
.mb-md {
margin-bottom: 4rem
}
}
@media screen and (max-width:40rem) {
.mb-0-sm {
margin-bottom: 0 !important
}
}
.mb-0 {
margin-bottom: 0 !important
}
@media screen and (max-width:40rem) {
.mb-md-sm {
margin-bottom: 2rem
}
}
.align-items-center {
-ms-flex-align: center;
align-items: center
}
.img-max-width-90 {
max-width: 90%
}
.header {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 500
}
.top-bar {
max-width: 1048px;
margin: 0 auto
}
@media (max-width:64rem) {
body.popup-menu-active {
overflow: hidden;
position: fixed
}
body.popup-menu-active .top-bar-right {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
overflow-x: hidden
}
.mobile-menu {
display: block
}
.header .logo {
margin-top: 1rem
}
.header .top-bar .top-bar-right {
position: fixed;
background: #fff;
right: 0;
top: 0;
width: 100%;
padding: 0;
padding-top: 1.375rem;
text-align: left;
pointer-events: none;
margin-top: 0;
height: 100%;
box-shadow: 0 3px 16px 4px rgba(0, 0, 0, .2);
transform: translateX(100px);
transform-origin: 100% 0;
opacity: 0;
will-change: transform, opacity;
transition-property: transform, opacity;
transition-duration: .25s
}
.header .top-bar-right .menu {
padding: 0;
margin: 0
}
.header .top-bar-right .menu li a {
color: #1d1e1f;
display: block;
font-size: 16px;
line-height: 200%;
box-shadow: inset 0 -1px 0 0 #e7e9eb;
padding: 12px 24px
}
.header .top-bar-right .menu li {
display: block
}
.header .top-bar-right .menu li:last-child a {
box-shadow: none
}
.header .top-bar-right .menu li ul li:last-child a {
box-shadow: inset 0 -1px 0 0 #e7e9eb
}
.popup-menu-active .header .top-bar .top-bar-right {
opacity: 1;
pointer-events: visible;
transform: none
}
.top-bar-right .menu li {
display: block
}
.menu.submenu {
display: block !important
}
}
.mobile-menu-wrap {
width: 50px
}
.mobile-menu-wrap .mobile-menu {
top: 1.1rem;
right: 1.125rem
}
.nav-wrap-menu {
position: absolute;
right: 0;
z-index: 20
}
.mobile-menu {
position: relative;
height: 43px;
width: 43px;
display: inline-block;
right: 1.25rem
}
.mobile-menu i {
top: 10px
}
.mobile-menu i:before {
top: 9px
}
.mobile-menu i:after {
top: 18px
}
.mobile-menu i,
.mobile-menu i:after,
.mobile-menu i:before {
font-size: 0;
display: inline-block;
position: absolute;
width: 32px;
height: 3px;
border-radius: 1px;
background: #fff
}
.mobile-menu i:after,
.mobile-menu i:before {
content: ""
}
.mobile-menu.inverse i:after,
.mobile-menu.inverse i:before {
background: #1d1e1f;
top: 13px
}
.mobile-menu.inverse i {
background: 0 0
}
.mobile-menu.close i:before {
transform: rotate(-45deg)
}
.mobile-menu.close i:after {
transform: rotate(45deg)
}
@media screen and (min-width:1025px) {
.mobile-menu {
display: none
}
.is-dropdown-submenu-parent a:after {
content: "" !important;
display: inline-block;
height: 8px;
width: 14px;
background-image: url(../images/pa-icons/down-caret.svg);
margin-top: -4px !important
}
.is-dropdown-submenu-parent a {
position: relative;
padding-right: 1.375rem
}
.is-dropdown-submenu-parent a:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1em;
font-size: 2em;
display: block;
content: "\f107";
right: 0;
left: auto;
font-family: FontAwesome
}
}
@media screen and (max-width:64rem) {
.is-dropdown-submenu-parent a {
background-color: #e9e9e9
}
.is-dropdown-submenu-parent ul li a {
background-color: #fff
}
.current-menu-parent a:after,
.is-dropdown-submenu-parent a:after {
content: "" !important;
position: relative;
display: inline-block;
height: 8px;
width: 14px;
background: url(../images/pa-icons/down-caret-blk.svg) 50%;
background-repeat: no-repeat;
margin-top: -4px !important;
margin-left: 5px
}
.current-menu-parent ul li a:after {
display: none
}
a.tablet-sign-up {
position: absolute;
display: block;
right: 90px;
top: 22px
}
a.responsive-logo {
content: "";
width: 100%;
display: block;
background: url(../images/pay-advantage-drk.svg) 0 no-repeat;
padding: .5rem 1.25rem
}
.popup-menu-active .header .top-bar .top-bar-right {
opacity: 1;
pointer-events: visible;
transform: none
}
.top-bar-right .menu li {
display: block
}
.menu.submenu {
display: block !important
}
.mobile-menu {
display: block
}
}
@media screen and (min-width:1025px) {
a.tablet-sign-up {
display: none !important
}
}
@media screen and (max-width:40rem) {
a.tablet-sign-up {
display: none !important
}
}
.logo {
display: block;
background: no-repeat url(../images/pay-advantage.svg);
font-size: 0;
width: 200px;
height: 40px;
margin-top: 1rem
}
.footer .logo {
width: 92%
}
.top-bar-right .menu li {
display: inline-block
}
.top-bar-right .menu li a {
color: #fff;
padding: 0 20px;
font-size: 14px
}
.header.nav-down {
position: fixed;
background-color: rgba(0, 0, 0, .4);
padding-bottom: 22px;
width: 100%;
transition: .3s;
top: 0
}
.header.nav-down .top-bar-right #menu-main-menu {
margin-top: 1.25rem !important
}
.header.nav-down .logo {
margin-top: 1rem !important
}
.header.nav-up {
position: fixed;
transition: .3s;
top: -110px
}
.is-dropdown-submenu {
border-radius: 8px;
overflow: hidden;
left: 100%;
display: block;
width: 341px;
padding: 0;
background: #fff;
display: block !important;
pointer-events: none;
box-shadow: 0 3px 16px 4px rgba(0, 0, 0, .2);
transform: scale(.95);
transform-origin: 100% 0;
opacity: 0;
will-change: transform, opacity;
transition-property: transform, opacity;
transition-duration: .25s
}
.is-dropdown-submenu.menu li {
display: block
}
.is-dropdown-submenu.menu li a {
color: #36383a;
display: block;
box-shadow: inset 0 -1px 0 0 #e7e9eb;
padding: 11px 18px
}
.is-dropdown-submenu.menu li a:after {
display: none
}
@media screen and (max-width:64rem) {
.header.nav-down {
padding-bottom: 1.25rem
}
.top-bar-right .menu li.is-dropdown-submenu-parent a {
margin-right: 0 !important
}
.is-dropdown-submenu {
position: relative !important;
border-radius: 0;
overflow: hidden;
left: 100%;
z-index: 1;
display: block;
width: 100%;
padding: 0;
background: #fff;
display: block !important;
pointer-events: none;
opacity: 1 !important;
transform: scale(1);
box-shadow: 0 0
}
.is-dropdown-submenu.menu li {
display: block
}
.is-dropdown-submenu.menu li a {
color: #36383a;
display: block;
box-shadow: inset 0 -1px 0 0 #e7e9eb !important;
padding: 0;
margin-right: 0 !important
}
.is-dropdown-submenu.menu li a:after {
display: none
}
.popup-menu-active .is-dropdown-submenu {
pointer-events: visible
}
}
.is-dropdown-submenu-parent {
position: relative
}
.is-dropdown-submenu-parent.is-active .is-dropdown-submenu {
opacity: 1;
pointer-events: auto
}
.pa-popup input[type=submit] {
border-radius: 8px;
display: inline-block;
font-size: 1.125rem;
padding: 12px 0;
cursor: pointer;
transition: .3s;
text-align: center;
background-color: #d51e33;
border: 2px solid #d51e33;
color: #fff;
width: 100%;
margin-top: 20px;
margin-bottom: 1rem
}
@media screen and (max-width:40rem) {
.pa-popup input[type=submit] {
margin: 0 0 1rem
}
}
.pa-popup input[type=submit]:disabled {
opacity: .5
}
.pa-popup input[type=submit]:hover {
background-color: rgba(213, 30, 51, 0);
border: 2px solid #d51e33;
color: #d51e33 !important
}
.hero {
background: #1d1e1f;
padding-top: 4.375rem;
color: #fff;
overflow: hidden;
position: relative
}
.hero h1 {
line-height: 1.1;
margin: auto
}
.hero--std {
padding-bottom: 2rem;
padding-top: 6rem
}
@media screen and (min-width:40rem) {
.hero--std {
padding-top: 10rem;
padding-bottom: 4rem
}
}
.hero-dev {
position: relative;
padding-top: 8rem;
padding-bottom: 13rem;
text-align: center;
background-image: url(../images/dev/dev-header-graphic.png);
background-position: bottom
}
.hero-dev,
.hero-dev__icon {
background-repeat: no-repeat
}
.hero-dev__icon {
width: 167px;
height: 84px;
background-image: url(../images/dev/code-icon-isometric.png);
background-size: contain;
position: absolute;
left: 50%;
margin-left: -83px
}
.hero-dev h1 {
margin-bottom: 3rem
}
.hero-dev h2 {
font-size: 1.5rem;
max-width: 490px;
margin-left: auto;
margin-right: auto
}
.hero-vt {
padding: 8rem 0;
background: #1d1e1f;
color: #fff
}
@media screen and (max-width:40rem) {
.hero-vt {
padding: 6rem 0 6rem
}
}
.hero-vt h1,
.hero-vt h2,
.hero-vt h3,
.hero-vt h4,
.hero-vt h5,
.hero-vt p {
color: #fff
}
.hero-vt h3 {
font-size: 1.3rem
}
@media screen and (min-width:64rem) {
.hero-vt h3 {
margin-bottom: 0
}
}
@media screen and (max-width:40rem) {
.hero-vt__item {
margin-bottom: 1rem
}
.hero-vt__item:last-child {
margin-bottom: 0
}
}
@media screen and (max-width:40rem) {
.hero-vt__item .hero-vt-icon {
margin-bottom: .25rem
}
}
.hero-customer-management {
padding: 8rem 0 28rem;
background: #1d1e1f url(../images/hero-customer-management.png);
background-size: cover;
background-repeat: no-repeat;
color: #fff;
text-align: center
}
@media screen and (max-width:40rem) {
.hero-customer-management {
padding: 6rem 0 5rem
}
}
.hero-customer-management h1 {
max-width: 500px;
margin-left: auto;
margin-right: auto
}
.hero-alt,
.hero-customer-management h1,
.hero-customer-management h2,
.hero-customer-management h3,
.hero-customer-management h4,
.hero-customer-management h5,
.hero-customer-management p {
color: #fff
}
.hero-alt {
background: #1d1e1f;
padding-top: 7rem;
padding-bottom: 20rem;
overflow: hidden;
position: relative
}
@media screen and (min-width:40rem) {
.hero-alt {
padding-top: 10rem
}
}
.hero-alt h1 {
line-height: 1.1;
margin: auto;
color: #fff
}
.hero-alt h3 {
color: #fff
}
.hero-alt__inner {
margin-bottom: 2rem
}
.hero-inner-content {
position: relative;
top: 50%;
transform: translateY(-50%)
}
.hero-inner-content.with-bottom-sign-up {
padding-bottom: 2rem
}
section.hero-sign-up {
position: relative
}
section.hero-sign-up>.cell {
position: absolute;
top: -1.9375rem
}
.hero.home {
height: 38.875rem;
background-image: url(../images/hero-images/pa-homepage-hero.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: 50%
}
.hero.home h1 {
margin-bottom: 2rem;
line-height: 1.1;
font-size: 3.25rem
}
.payment-options-summary {
width: 314px;
height: 68px;
background: url(../images/payment-options-summary.svg) 50% no-repeat;
background-size: contain;
margin: 0 auto
}
#reviews .payment-options-summary {
height: 55px;
margin-bottom: 28px;
}
@media screen and (max-width:40rem) {
.payment-options-summary {
width: 200px
}
}
#reviews .reviews_awards {
display: flex;
flex-direction: column;
align-items: center;
}
.hero-payment-request {
padding: 10rem 0 14rem;
overflow: visible;
margin-bottom: 12rem;
text-align: center;
}
@media screen and (max-width:40rem) {
.hero-payment-request {
padding-top: 7rem;
padding-bottom: 16rem;
margin-bottom: 15rem
}
}
.hero-payment-request h1 {
margin-bottom: 1.5rem;
}
.hero-payment-request__image {
transform: translateY(55%) translateX(-50%);
left: 50%;
position: absolute;
bottom: 0;
background-image: url(../images/hero-images/payment-request-header.png);
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
height: 357px;
width: calc(100% - 5rem);
max-width: 886px
}
@media (-moz-min-device-pixel-ratio:2),
(-webkit-min-device-pixel-ratio:2) {
.hero-payment-request__image {
background-image: url(../images/hero-images/payment-request-header@2x.png)
}
}
@media screen and (max-width:40rem) {
.hero-payment-request__image {
background-image: url(../images/hero-images/payment-request-header-mobile.png);
height: 600px;
width: calc(100% - 4rem);
left: 50%;
transform: translateX(-50%) translateY(55%)
}
}
@media screen and (max-width:40rem) and (-moz-min-device-pixel-ratio:2),
screen and (max-width:40rem) and (-webkit-min-device-pixel-ratio:2) {
.hero-payment-request__image {
background-image: url(../images/hero-images/payment-request-header-mobile@2x.png)
}
}
/* For when the client logo testimonial carousel is between CTA and footer */
/* Currently on Payment Requests and Xero Integration pages */
.page-id-170 .footer,
.page-id-46 .footer {
position: relative;
padding-top: 12rem;
}
.page-id-170 .slick-list,
.page-id-46 .slick-list {
z-index: 10;
}
.hero.small {
height: 19.4375rem
}
.bg-black-darker h1,
.bg-black-darker h2,
.bg-black-darker h3,
.bg-black-darker h4,
.bg-black-darker h5,
.bg-black-darker h6,
.bg-lrg h1,
.bg-lrg h2,
.bg-lrg h3,
.bg-lrg h4,
.bg-lrg h5,
.bg-lrg h6,
.bg-red h1,
.bg-red h2,
.bg-red h3,
.bg-red h4,
.bg-red h5,
.bg-red h6,
.bg-xero h1,
.bg-xero h2,
.bg-xero h3,
.bg-xero h4,
.bg-xero h5,
.bg-xero h6,
.hero h1,
.hero h2,
.hero h3,
.hero h4,
.hero h5,
.hero h6 {
color: #fff
}
#ddebit section.hero {
height: 36.0625rem
}
#ddebit section.hero img {
max-width: 54.125rem
}
#ddebit section.hero h1 {
margin-bottom: 1rem
}
#ddebit section.hero #recPayments02cont {
display: none
}
#ddebit #options-high-volume {
padding-top: 12rem;
}
#cc-processing section.hero {
height: 24.375rem;
background-image: url(../images/hero-images/cc-processing-hero.png);
background-position: top;
background-size: cover;
background-repeat: no-repeat
}
#cc-processing section.hero h1 {
max-width: 38.75rem;
margin: auto
}
#reviews section.hero {
height: 520px;
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat
}
#reviews #review_signup .pa-popup {
margin-top: 0;
}
#reviews #review_signup h2 {
margin-right: 0 !important;
}
#reviews #client-reviews {
margin: 80px 0 100px;
}
#reviews .reviews_grid_item {
width: 25%;
float: left;
padding: 8px;
}
@media (min-width: 768px) and (max-width: 991.98px) {
#reviews .reviews_grid_item {
width: 33.3%;
}
}
@media (min-width: 576px) and (max-width: 767.98px) {
#reviews .reviews_grid_item {
width: 50%;
}
}
@media (max-width: 575.98px) {
#reviews .reviews_grid_item {
width: 100%;
}
}
#reviews .reviews_grid_item>div {
padding: 22px;
box-shadow: 0 0 20px 0px rgb(0 0 0 / 10%);
position: relative;
background: #fff;
}
@media (max-width: 575.98px) {
#reviews .reviews_grid_item>div {
width: 95%;
margin: 0 auto;
}
}
#reviews .reviews_grid_item>div::before {
content: "";
background-image: url('https://www.payadvantage.com.au/wp-content/uploads/2022/11/google-icon.png');
background-repeat: no-repeat;
background-size: contain;
width: 26px;
height: 26px;
position: absolute;
top: 10px;
right: 10px;
}
#reviews .reviews_icon img {
width: 46px;
height: 46px;
border: 1px solid #ccc;
border-radius: 50%;
}
#reviews .reviews_icon {
margin: 0 auto;
text-align: center;
padding: 10px 0;
}
#reviews .reviews_name {
text-align: center;
padding: 10px 0;
font-weight: bold;
}
#reviews .reviews_stars {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAWCAYAAAA1vze2AAAAqUlEQVR4AWLwySwkGv/YzgworgwwAIphGHqJXWgX6nl6q55o/GHxCX4bUx9hMK9JYwucFSmAubW2ZifED8Q7IXEgcmRqVNDsgBhBrAMSBJEiqwAGAaBRhiDvBk1A3mkRyb2CXSYLlmWFnbArffoMIrjS6qy3Sm/Z/068CPEbyKpKhfCDyA0yNE95MKtRGe9LiSz9O3hKclv6Y76ictQzqbmjyhIkyVi+8wCta5MKDP5AeAAAAABJRU5ErkJggg==);
height: 22px;
width: 125px;
margin: 0 auto;
}
#reviews .reviews_text {
text-align: center;
font-size: 14px;
padding: 10px 0;
}
#reviews .reviews_feature {
display: flex;
align-items: center;
margin-bottom: 32px;
}
#reviews .reviews_feature img {
max-width: 50px;
height: auto;
}
#reviews .reviews_feature_text {
padding-left: 10px;
text-align: left;
}
#reviews .reviews_feature_text h4 {
margin-bottom: 4px;
}
#reviews .reviews_feature_text span {
font-size: 14px;
color: #8d8d8d;
}
#reviews .reviews_features_wrap {
max-width: 860px;
margin: 0 auto;
padding-top: 28px;
}
#xero section.hero {
height: 32.063rem;
overflow: hidden;
background-image: url(../images/hero-images/xero_hero_icons.png);
background-repeat: no-repeat;
background-position: center bottom;
padding-bottom: 10rem
}
#xero section.hero h1 {
margin-bottom: 3.5rem
}
@media screen and (max-width:40rem) {
#xero section.hero {
height: 26.063rem;
background-image: none;
padding-bottom: 4rem;
}
#xero section.hero h1 {
margin-bottom: 1.5rem
}
}
#xero .bpay-and-ccard,
#xero .pay-adv-only,
#xero .xero-and-settings {
position: absolute;
top: 14.5rem;
width: 100%;
text-align: center;
height: 12.375rem;
background: url(../images/hero-images/plays-nice-with-xero.png) no-repeat 50%
}
#xero .bpay-and-ccard {
background: url(../images/hero-images/bpay-and-ccard.png) no-repeat 50%
}
#xero .pay-adv-only {
background: url(../images/hero-images/xero_hero_pa.png) no-repeat 50%
}
#xero .xero-and-settings {
background: url(../images/hero-images/xero-and-settings.png) no-repeat 50%
}
#xero .xero-icons-outside {
position: absolute;
top: 27.5rem;
width: 100%;
text-align: center;
height: 12.375rem;
background: url(../images/hero-images/xero_hero_xero.png) no-repeat 50%;
left: -10.05rem
}
#xero .xero-icons-pa {
position: absolute;
top: 25.8rem;
width: 100%;
text-align: center;
height: 12.375rem;
background: url(../images/hero-images/xero_hero_pa.png) no-repeat 50%;
right: -10.05rem
}
@media screen and (max-width:40rem) {
#xero .xero-icons-outside {
width: 9rem;
left: 2rem;
top: 19rem;
background-size: contain;
}
#xero .xero-icons-pa {
width: 9rem;
right: 2rem;
top: 21rem;
background-size: contain;
}
}
#contact-us section.hero {
height: 32.875rem;
padding-top: 11.25rem;
background-image: url(../images/hero-images/contact-hero-back.svg);
background-position: center 1rem;
background-repeat: no-repeat;
overflow: visible
}
#contact-us section.hero h2 {
font-size: 1.875rem;
margin-bottom: 3.625rem
}
#contact-us section.hero p {
color: hsla(0, 0%, 100%, .6)
}
#pricing section.hero {
height: 17.6875rem;
background-position: top;
background-size: cover;
background-repeat: no-repeat
}
#pricing .hero-alt .award-mini {
display: block;
margin: 0 auto;
width: initial;
max-width: 400px;
padding-bottom: 1.2rem;
}
.client-logos-carousel-pricing {
margin: 0 auto;
}
.client-logos-carousel-pricing,
.client-logos-carousel-pricing.slick-initialized .slick-slide {
width: 45rem;
}
@media screen and (max-width:64rem) {
.client-logos-carousel-pricing,
.client-logos-carousel-pricing.slick-initialized .slick-slide {
width: 80vw;
}
}
.client-logos-carousel-wrapper-pricing {
padding: 0 1.5rem;
}
.client-logos-testimonial-pricing {
text-align: center;
position: relative;
}
.client-logos-testimonial-pricing h3 {
padding: 0 2rem;
}
.client-logos-testimonial-pricing::before,
.client-logos-testimonial-pricing::after {
background-repeat: no-repeat;
background-size: contain;
content: "";
position: absolute;
width: 1.3rem;
height: 1.3rem;
}
.client-logos-testimonial-pricing::before {
background-image: url(../images/pricing/open-quote.svg);
left: 0;
}
.client-logos-testimonial-pricing::after {
background-image: url(../images/pricing/end-quote.svg);
right: 0;
top: 2.4rem;
}
@media screen and (max-width:64rem) {
.client-logos-testimonial-pricing::after {
top: initial;
bottom: 2rem;
}
}
.client-logos-carousel-wrapper-pricing .slick-slider .slick-prev,
.client-logos-carousel-wrapper-pricing .slick-slider .slick-next {
position: absolute;
top: 1rem;
z-index: 500;
width: 3rem;
height: 3rem;
opacity: 1;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
@media screen and (max-width:64rem) {
.client-logos-carousel-wrapper-pricing .slick-slider .slick-prev,
.client-logos-carousel-wrapper-pricing .slick-slider .slick-next {
top: 2rem;
}
}
.client-logos-carousel-wrapper-pricing .slick-slider .slick-prev {
left: -80px;
}
@media screen and (max-width:64rem) {
.client-logos-carousel-wrapper-pricing .slick-slider .slick-prev {
left: -45px;
}
}
.client-logos-carousel-wrapper-pricing .slick-slider .slick-next {
right: -80px;
}
@media screen and (max-width:64rem) {
.client-logos-carousel-wrapper-pricing .slick-slider .slick-next {
right: -45px;
}
}
.client-logos-carousel-wrapper-pricing .slick-slider .slick-prev .fa-angle-left::before,
.client-logos-carousel-wrapper-pricing .slick-slider .slick-next .fa-angle-right::before {
color: #fff;
font-size: 2.2rem;
position: relative;
top: -1px;
}
.client-logos-carousel-wrapper-pricing .slick-slider .slick-prev .fa-angle-left::before {
right: 2px;
}
.client-logos-carousel-wrapper-pricing .slick-slider .slick-next .fa-angle-right::before {
left: 2px;
}
@media screen and (max-width:64rem) {
.hero.home {
height: 38.875rem;
background-position: 80%
}
}
@media screen and (max-width:40rem) {
.hero.home {
height: 75vh;
padding-top: 0;
background-position: 50%
}
.hero.home h1 {
margin-bottom: 2rem;
font-size: 2.25rem
}
#recPayments01cont {
display: none
}
#ddebit section.hero {
height: 28rem
}
#ddebit #recPayments02cont {
display: block !important
}
}
a.button {
border-radius: 8px;
display: inline-block;
background: #f9f9f9;
padding: 10px 20px;
cursor: pointer;
transition: .3s;
line-height: 1rem;
text-align: center;
font-family: Avenir-Heavy, sans-serif
}
a.button.primary-button,
a.button.secondary-button {
background-color: #d51e33;
border: 2px solid #d51e33;
color: #fff !important
}
a.button.outline-button {
background-color: transparent;
border: 2px solid #d51e33;
color: #fff !important
}
a.button.outline-button:hover {
background-color: #d51e33
}
a.button.primary-button:hover,
a.button.secondary-button:hover {
background-color: rgba(213, 30, 51, 0);
border: 2px solid #d51e33;
color: #d51e33 !important
}
a.button.primary-gradient {
background-image: linear-gradient(90deg, #ec4062 0, #d51e33 50%);
color: #fff !important;
background-size: 200% auto
}
a.button.primary-gradient:hover {
background-position: 100%
}
a.button.button-lg {
font-size: 18px;
padding: 22px 15px
}
@media screen and (min-width:40rem) {
a.button.button-lg {
min-width: 268px
}
}
a.button.button-md {
font-size: 18px;
min-width: 272px
}
a.button.long-btn {
min-width: 271px;
color: #0a0a0a
}
a.button.secondary-button {
background-color: #d51e33;
color: #fff
}
li.button {
border-radius: 8px;
display: inline-block;
cursor: pointer;
transition: .3s;
line-height: 1rem;
text-align: center;
background-color: #d51e33;
border: 2px solid #d51e33;
color: #fff !important;
margin-left: 10px
}
li.button:hover {
background-color: rgba(213, 30, 51, 0);
border: 2px solid #d51e33;
color: #d51e33 !important
}
li.button a {
display: inline-block;
padding-top: 10px !important;
padding-bottom: 10px !important
}
@media screen and (max-width:64rem) {
li.button {
border-radius: 0;
text-align: left;
padding: 0 2px;
margin-left: 0
}
li.button a {
color: #fff !important
}
}
.footer {
padding-top: 5.625rem;
font-size: 14px
}
.footer .brand {
margin: 0 auto 40px
}
.footer .inner-footer {
margin-bottom: 5.625rem
}
.footer .inner-footer-mobile {
text-align: center;
padding-top: 30px;
display: none
}
.footer .links {
margin: 0;
padding: 0;
list-style: none
}
.footer .links li {
margin: 0 0 8px
}
.footer .links a {
color: #fff
}
.footer .links a:hover {
color: #d51e33;
transition: .2s
}
.footer .social-media-section a {
color: #fff
}
.footer .social-media-section a:hover {
color: #d51e33;
transition: .2s
}
.footer .colophon {
padding: 2rem 0;
border-top: 1px solid hsla(0, 0%, 100%, .1)
}
.footer h3 {
font-size: 1.125rem;
margin-bottom: 1.125rem
}
.footer .graphic-icon {
height: 25px;
vertical-align: middle;
width: 25px;
margin-right: 8px;
background-size: 25px 25px
}
.footer .fb-icon {
height: 19px;
vertical-align: middle;
width: 18px;
margin-left: 14px
}
@media (max-width:64rem) {
.footer-logo {
display: none
}
}
@media (max-width:40rem) {
.footer {
padding-top: 0
}
.inner-footer {
display: none
}
.inner-footer-mobile {
display: block !important
}
.footer .colophon {
border-top: 0
}
}
@media (min-width:641px) {
.social-media-section {
text-align: right
}
}
.footer-cta-content {
text-align: center;
position: relative
}
.footer-cta-content--spacing {
margin-top: 3rem;
margin-bottom: 3rem
}
@media screen and (min-width:40rem) {
.footer-cta-content {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center
}
.footer-cta-content h3 {
margin-bottom: 0
}
.footer-cta-content h2,
.footer-cta-content h3 {
margin-right: 2rem !important
}
}
.award-footer {
display: inline-flex;
justify-content: right;
}
.award-footer #footer_pcidss {
width: 43px;
height: 41px;
margin-right: 6px;
}
@media screen and (min-width:40rem) {
.award-footer {
text-align: right
}
}
@media screen and (min-width:40rem) {
.award-footer .award-mini {
text-align: left
}
}
@media screen and (max-width:40rem) {
.award-footer .award-mini {
display: none
}
}
@media screen and (min-width:40rem) {
.details-footer {
text-align: left
}
}
input.parsley-error,
textarea.parsley-error {
border-color: red;
margin-bottom: .5rem
}
input.parsley-error:focus,
textarea.parsley-error:focus {
border-color: red
}
.parsley-errors-list {
padding-left: 0;
list-style: none;
margin-top: 0;
font-size: .85rem;
color: red;
margin-bottom: 1rem
}
.spinner {
position: absolute;
left: calc(50% - 35px);
top: calc(50% - 35px);
height: 70px;
width: 70px;
text-align: center
}
.spinner-relative {
position: relative
}
.spinner>div {
width: 18px;
height: 18px;
background-color: #d51e34;
border-radius: 100%;
display: inline-block;
animation: b 1.4s infinite ease-in-out both
}
.spinner .bounce1 {
animation-delay: -.32s
}
.spinner .bounce2 {
animation-delay: -.16s
}
@keyframes b {
0%,
80%,
to {
transform: scale(0)
}
40% {
transform: scale(1)
}
}
.pa-popup-container {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
z-index: 2
}
.pa-popup {
margin-top: 100px;
background: #fff;
max-width: 500px;
margin-left: auto;
margin-right: auto;
padding: 3rem;
z-index: 3;
position: relative;
}
@media screen and (max-width:40rem) {
.pa-popup {
margin: 10px auto;
padding: 1.5rem
}
}
.award-mini {
display: inline-block;
text-align: left
}
.award-mini--sm {
font-size: .8rem
}
.award-mini--push-top {
margin-top: 1rem
}
.award-mini__content {
display: -ms-flexbox;
display: flex
}
.award-mini__badge {
width: 38px;
height: 44px;
background: url(../images/cio-badge.png);
background-size: contain;
background-repeat: no-repeat;
margin-right: .5rem
}
.an-container {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: start;
justify-content: flex-start;
width: 100%;
position: relative
}
@media screen and (max-width:40rem) {
.an-container {
-ms-flex-direction: column;
flex-direction: column;
margin-left: .5rem;
margin-right: .5rem;
width: calc(100% - 1rem)
}
}
.item1 {
-ms-flex: 0 1 30%;
flex: 0 1 30%;
width: 30%;
margin-right: 1rem
}
@media screen and (max-width:40rem) {
.item1 {
-ms-flex-order: 2;
order: 2
}
}
.item2 {
-ms-flex: 0 1 60%;
flex: 0 1 60%;
width: 60%
}
@media screen and (max-width:40rem) {
.item2 {
-ms-flex-order: 1;
order: 1
}
}
.item3 {
-ms-flex: 0 1 30%;
flex: 0 1 30%;
width: 30%;
height: 200px
}
@media screen and (max-width:40rem) {
.item3 {
display: none
}
}
.item1,
.item2,
.item3 {
position: relative;
transition: opacity .4s ease-in-out, transform .8s ease-in-out;
opacity: 1
}
@media screen and (max-width:40rem) {
.item1,
.item2,
.item3 {
-ms-flex: 0 1 100%;
flex: 0 1 100%;
width: 100%;
margin-bottom: 3rem
}
}
@media screen and (max-width:40rem) {
.pricing-item {
box-shadow: 0 30px 43px -19px #7b8082
}
}
.animation-test-enter,
.animation-test-leave-to {
opacity: 0
}
.animation-test-leave-active {
position: absolute
}
.marketing-item h4 {
color: #fff
}
.marketing-item h4 img {
margin-right: .25rem
}
.icon-line {
width: 75px;
height: 75px;
background-image: url(../images/virtual_terminal/head-cart.svg);
background-position: 50%;
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
margin-bottom: 1rem
}
.icon-line--team {
background-image: url(../images/virtual_terminal/team.svg)
}
.icon-line--xero {
background-image: url(../images/virtual_terminal/xero.png)
}
.tick-list-subtitle {
display: -ms-flexbox;
display: flex;
list-style: none;
-ms-flex-pack: justify;
justify-content: space-between;
max-width: 700px;
margin: 0 auto 2rem;
font-size: 1.2rem;
font-family: Avenir-Light, sans-serif
}
@media screen and (max-width:40rem) {
.tick-list-subtitle {
display: block;
text-align: left;
margin-bottom: 2rem
}
}
.tick-list-subtitle li {
position: relative;
padding-left: calc(22px + .5rem)
}
.tick-list-subtitle li:before {
content: "";
position: absolute;
left: 0;
width: 22px;
height: 20px;
background-image: url(../images/pa-tick-white.svg);
background-size: contain;
background-repeat: no-repeat
}
.list-check-green {
list-style: none;
padding-left: 0
}
.list-check-green li {
position: relative;
font-family: Avenir-Medium, sans-serif;
color: #fff;
font-size: 1.25rem;
padding-left: 2rem;
margin-bottom: 1.5rem
}
.list-check-green li:before {
content: "";
position: absolute;
left: 0;
top: 4px;
width: 22px;
height: 16px;
background-image: url(../images/check-green.svg);
background-repeat: no-repeat
}
@media screen and (max-width:40rem) {
.list-check-green li {
font-size: 1rem;
margin-bottom: 1rem
}
}
.list-check-green--dark li {
color: #1d1e1f
}
.list-check-green--small li {
font-size: 1rem;
color: #5d6268;
text-align: left;
margin-bottom: .5rem;
padding-left: 1.5rem
}
.list-check-green--small li:before {
width: 16px;
background-size: contain
}
@media screen and (max-width:40rem) {
.list-check-green--dark-sm li {
color: #1d1e1f
}
}
.icon-vertical-row {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 2rem
}
.icon-vertical {
padding: 0 2rem
}
@media screen and (max-width:40rem) {
.icon-vertical {
padding: 0 .5rem
}
}
.icon-vertical__image {
width: 42px;
height: 42px;
margin-bottom: 1rem;
background-size: contain;
background-position: 50%;
background-repeat: no-repeat;
display: inline-block
}
.icon-vertical__image--flying-mail {
background-image: url(../images/flying-mail.svg)
}
.icon-vertical__image--search-magnifier {
background-image: url(../images/search-magnifier.svg)
}
.icon-vertical__image--refund-black-red {
background-image: url(../images/refund-black-red.svg)
}
.icon-vertical__image--virtual-terminal {
background-image: url(../images/virtual_terminal-feature.png)
}
.icon-vertical__image--recurring-payments {
background-image: url(../images/recurring-payments.png)
}
.icon-vertical__image--bpay {
background-image: url(../images/bpay-payments.png)
}
.icon-vertical__image--code {
background-image: url(../images/dev/how-it-works-embed.svg)
}
.icon-vertical__image--payment {
background-image: url(../images/dev/how-it-works-payment.svg)
}
.icon-vertical__image--redirection {
background-image: url(../images/dev/how-it-works-redirection.svg)
}
.icon-vertical__image--sandbox-replica {
background-image: url(../images/dev/sandbox-replica.svg)
}
.icon-vertical__image--sandbox-free {
background-image: url(../images/dev/sandbox-free.svg)
}
.icon-vertical__image--sandbox-simulate {
background-image: url(../images/dev/sandbox-simulate.svg)
}
@media screen and (max-width:40rem) {
.icon-vertical {
margin-bottom: 1rem
}
}
.pa-header-default {
background: #1d1e1f;
height: 72px
}
.block {
display: block
}
[data-aos=fade-up] {
transform: translate3d(0, 50px, 0)
}
[data-aos^=fade][data-aos^=fade] {
transition-timing-function: cubic-bezier(.215, .61, .355, 1);
transition-property: all
}
.link-highlight {
position: relative;
z-index: 1;
display: inline-block
}
.link-highlight,
.link-highlight:before {
transition: all .3s cubic-bezier(.4, 0, .2, 1)
}
.link-highlight:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: -.25em;
right: -.25em;
background-color: #d51e33;
transform-origin: center left;
transform: scaleX(0)
}
.link-highlight:hover {
color: #fff
}
.link-highlight:hover:before {
transform: scaleX(1);
transform-origin: center left
}
.floating-b-box {
position: absolute;
top: -100px;
transform: rotate(316deg);
left: -118px
}
.floating-b-box .inner {
width: 333px;
height: 468px;
display: block;
position: relative
}
.floating-b-box .inner:after,
.floating-b-box .inner:before {
content: "";
position: absolute;
background: hsla(0, 0%, 100%, .02);
display: inline-block;
height: 468px;
width: 222px;
border-radius: 25.02px
}
.floating-b-box .inner:after {
left: 111px;
top: -155px
}
.float-bpay-img {
position: absolute;
background: url(../images/bpay.png) no-repeat 100% 0;
max-width: 692px;
width: 100%;
height: 741px;
top: 0;
left: -85px
}
.float-ddebit-hero {
position: absolute;
background: url(../images/hero-images/ddebit-hero-back.svg) no-repeat top;
max-width: 100vw;
width: 100%;
height: 37.8125rem;
top: 0;
left: 0
}
#upgradePayments>svg {
box-shadow: 0 10px 20px #ccc;
margin-left: 50px;
border-radius: 12px
}
.trophy-icon {
position: absolute;
left: calc(50% - 9px);
bottom: -25px
}
section#partial-customer-syncing h2 {
padding-top: 1.85rem;
line-height: 1.1;
text-align: right
}
section#partial-customer-syncing p {
max-width: 22.375rem;
margin-left: auto;
text-align: right
}
section#partial-customer-syncing img {
width: 100%;
max-width: 23.75rem;
top: 50%;
transform: translateY(-50%);
position: relative
}
@media screen and (max-width:40rem) {
section#partial-customer-syncing h2,
section#partial-customer-syncing p {
text-align: center
}
section#partial-customer-syncing p {
margin-right: auto
}
}
section#partial-analytics-insights {
background-color: #f9f9f9
}
section#partial-analytics-insights .track-revenue {
position: relative;
margin-bottom: 5.9375rem
}
section#partial-analytics-insights .track-revenue div:first-of-type {
text-align: right
}
section#partial-analytics-insights .track-revenue img.graph {
width: 100%;
max-width: 38.875rem;
margin-left: 5.9375rem
}
section#partial-analytics-insights .customer-sign-ups {
position: relative
}
section#partial-analytics-insights .customer-sign-ups img.stats {
width: 100%;
max-width: 38.875rem;
margin-bottom: 1.5625rem;
padding-right: 5.9375rem
}
section#partial-analytics-insights img.icon {
max-width: 4.0625rem;
margin-bottom: 1.875rem
}
@media screen and (max-width:64rem) {
img.stats {
padding-right: 3rem !important
}
img.graph {
margin-left: 3rem !important;
padding-right: 1rem !important
}
}
@media screen and (max-width:40rem) {
.track-revenue {
margin-bottom: 4rem !important
}
.track-revenue div:first-of-type {
text-align: center !important
}
.track-revenue h3 {
margin-bottom: 1.875rem
}
.customer-sign-ups {
text-align: center !important
}
img.stats {
padding-right: 0 !important;
margin: 0 auto
}
img.graph {
margin-left: auto !important;
margin-right: auto;
padding-right: 1rem !important
}
}
section#partial-biller-codes img {
width: auto;
max-width: 15.5rem
}
section#send-pay-requests h2 {
max-width: 32.5rem;
margin: 0 auto 6.25rem
}
section#send-pay-requests .dev-item img {
height: 129px !important;
width: auto;
margin-bottom: 1.875rem
}
section#send-pay-requests .dev-text h3 {
margin-top: 0
}
section#send-pay-requests p {
max-width: 13.75rem
}
@media screen and (max-width:40rem) {
section#send-pay-requests h2 {
max-width: 32.5rem;
margin: 0 auto 3.5rem
}
section#send-pay-requests .dev-item img {
max-width: 6.5rem;
width: 24%;
float: left;
margin-right: 6%;
margin-top: -1.5rem;
margin-bottom: 0
}
section#send-pay-requests .dev-item .dev-text {
float: left;
text-align: left;
max-width: 70%
}
section#send-pay-requests .dev-item h3 {
margin-top: 0
}
section#send-pay-requests .dev-item p {
max-width: 22rem;
margin-bottom: 1rem
}
section#send-pay-requests .grid-x div.dev-item {
margin-bottom: 2rem
}
section#send-pay-requests .grid-x div.dev-item:last-of-type {
margin-bottom: 0
}
}
section#partial-create-recurring {
padding: 9.5rem 0;
background: url(../images/create-recurring-back.svg) no-repeat 0;
background-size: auto 100%
}
section#partial-create-recurring img {
max-width: 36.1875rem;
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-filter: drop-shadow(0 20px 30px #d7d7d8);
filter: drop-shadow(0 20px 30px #d7d7d8)
}
section#partial-create-recurring ul {
padding: 0;
margin: 0 0 2.375rem
}
section#partial-create-recurring ul li {
list-style-type: none;
padding-left: 2rem;
background: url(../images/pa-tick-black.svg) no-repeat 0;
background-size: 1.25rem
}
@media screen and (max-width:40rem) {
section#partial-create-recurring {
padding: 2.5rem 0
}
section#partial-create-recurring img {
-webkit-filter: drop-shadow(0 10px 10px #d7d7d8);
filter: drop-shadow(0 10px 20px #d7d7d8)
}
section#partial-create-recurring svg {
margin-bottom: 2rem
}
}
.manage-customers {
padding-left: 1.5rem;
padding-right: 1.5rem;
background: #F9F9F9;
}
.manage-customers h3 {
font-size: 1.125rem
}
.manage-customers .manage-key-points {
padding-top: 4.6875rem
}
@media screen and (max-width:40rem) {
.manage-key-points {
padding-top: 0 !important
}
.manage-key-points .small-12 {
margin-bottom: 1.5rem
}
.manage-key-points .small-12:last-of-type {
margin-bottom: 0
}
}
section#partial-accept-cards {
padding: 7.5rem 0;
background: url(../images/accept-cards-back.svg) no-repeat 0;
background-size: 15.0625rem;
text-align: right;
background-color: #1d1e1f;
padding-top: 12rem;
}
section#partial-accept-cards ul {
padding: 0;
margin: 0 0 2.375rem
}
section#partial-accept-cards ul li {
list-style-type: none;
padding-right: 2rem;
background: url(../images/pa-tick-white.svg) no-repeat 100%;
background-size: 1.25rem
}
section#partial-accept-cards .accept-cards-text {
top: 50%;
transform: translateY(-50%);
position: relative;
margin-right: 7.75rem;
margin-left: auto;
max-width: 23.6875rem
}
@media screen and (max-width:64rem) {
section#partial-accept-cards {
padding: 9rem 0 4.5rem
}
section#partial-accept-cards .accept-cards-text {
margin-right: 1rem !important
}
section#partial-accept-cards .button.long-btn {
min-width: 14.375rem
}
section#partial-accept-cards .accept-cards img {
max-width: 470px;
width: 100%
}
}
@media screen and (max-width:40rem) {
section#partial-accept-cards {
padding: 12rem 0 3.5rem;
text-align: left
}
section#partial-accept-cards .button.long-btn {
min-width: 16.9375rem
}
section#partial-accept-cards ul {
padding: 0;
margin: 0 0 2.375rem
}
section#partial-accept-cards ul li {
list-style-type: none;
padding-left: 2rem;
background: url(../images/pa-tick-red.svg) no-repeat 0;
background-size: 1.25rem
}
section#partial-accept-cards .accept-cards {
margin-bottom: 2rem
}
}
.dev-item {
transition: all .1s ease-in-out
}
.dev-item a.secondary-link:hover {
color: #fff;
text-decoration: underline
}
.dev-item h3 {
margin-top: 1.875rem
}
.dev-item p {
max-width: 13rem;
margin-left: auto;
margin-right: auto
}
.dev-item img {
height: 4.125rem
}
.dev-item:last-child {
margin-bottom: 0
}
@media screen and (max-width:40rem) {
.dev-item img {
max-width: 6.5rem;
width: 24%;
float: left;
margin-right: 6%
}
.dev-item .dev-text {
float: left;
text-align: left;
max-width: 70%
}
.dev-item h3 {
margin-top: 0
}
.dev-item p {
max-width: 22rem;
margin-bottom: 1rem
}
.grid-x div.dev-item {
margin-bottom: 3rem
}
.grid-x div.dev-item:last-of-type {
margin-bottom: 0
}
}
section#partial-upgrade-billing .center-vert {
padding-left: 4.375rem
}
section#partial-upgrade-billing h2 img {
max-width: 5.625rem;
margin-top: 1rem
}
section#partial-upgrade-billing ul {
padding: 0;
margin: 0 0 2.375rem
}
section#partial-upgrade-billing ul li {
list-style-type: none;
padding-left: 2rem;
background: url(../images/pa-tick-black.svg) no-repeat 0;
background-size: 1.25rem
}
@media screen and (max-width:64rem) {
section#partial-create-recurring {
padding: 3.5rem 0
}
section#partial-create-recurring img {
margin-bottom: 5rem
}
}
@media screen and (min-width:40rem) {
section#partial-upgrade-billing {
padding: 6.5625rem 0
}
}
@media screen and (max-width:40rem) {
section#partial-upgrade-billing .upgrade-billing-graphic {
margin-bottom: 2.5rem
}
section#partial-upgrade-billing .center-vert {
padding-left: 0
}
section#partial-upgrade-billing svg {
margin-bottom: 2rem
}
}
section#partial-virtual-terminal {
padding-bottom: 11.5rem
}
section#partial-virtual-terminal .vert-terminal {
margin-bottom: 9.375rem
}
section#partial-virtual-terminal .vert-terminal .center-vert {
padding-left: 2.125rem
}
section#partial-virtual-terminal .vert-terminal p {
max-width: 23rem;
margin-bottom: 0
}
section#partial-virtual-terminal .vert-terminal img {
width: 100%;
max-width: 25.5rem;
position: relative
}
section#partial-virtual-terminal .what-to-sync {
text-align: right
}
section#partial-virtual-terminal .what-to-sync .center-vert {
padding-right: 5.75rem
}
section#partial-virtual-terminal .what-to-sync p {
max-width: 18rem;
margin-bottom: 0;
margin: 0 0 0 auto
}
section#partial-virtual-terminal .what-to-sync img {
width: 100%;
max-width: 22.125rem;
position: relative
}
@media screen and (max-width:40rem) {
section#partial-virtual-terminal {
padding-bottom: 2.5rem
}
section#partial-virtual-terminal .vert-terminal {
text-align: center;
margin-bottom: 3.5rem
}
section#partial-virtual-terminal .vert-terminal .center-vert {
padding-left: 0
}
section#partial-virtual-terminal .vert-terminal p {
max-width: 100%;
margin-bottom: 0
}
section#partial-virtual-terminal .what-to-sync {
text-align: center
}
section#partial-virtual-terminal .what-to-sync .center-vert {
padding-right: 0
}
section#partial-virtual-terminal .what-to-sync p {
max-width: 100%
}
section#partial-virtual-terminal .what-to-sync img {
margin-bottom: 2rem
}
}
section#partial-vt-in-cloud {
padding: 8rem 0 4rem
}
@media screen and (max-width:40rem) {
section#partial-vt-in-cloud {
padding: 6rem 0 2rem
}
}
section#partial-vt-in-cloud h2 {
text-align: center;
margin-bottom: 3.5rem
}
section#partial-vt-in-cloud .inner-text {
text-align: center
}
section#partial-vt-in-cloud .vt-inner {
display: inline-block
}
section#partial-vt-in-cloud .on-charge-fees,
section#partial-vt-in-cloud .store-cards,
section#partial-vt-in-cloud .virtual-terminal {
float: left
}
section#partial-vt-in-cloud .store-cards {
text-align: center;
max-width: 14.25rem;
padding-right: 2.75rem;
padding-top: 5rem
}
section#partial-vt-in-cloud .store-cards img {
max-height: 4.5rem;
margin-bottom: 1rem;
max-width: 6rem
}
section#partial-vt-in-cloud .virtual-terminal {
background: url(../images/phone-back.svg) no-repeat top;
background-size: 100% auto;
max-width: 25.875rem;
max-height: 34rem;
padding: 8% .75rem 0;
overflow: hidden
}
section#partial-vt-in-cloud .virtual-terminal video {
width: 100%;
max-width: 24.25rem
}
section#partial-vt-in-cloud .on-charge-fees {
display: block;
max-width: 14.25rem;
padding-left: 2.75rem;
padding-top: 5rem;
text-align: center
}
section#partial-vt-in-cloud .on-charge-fees img {
width: 100%;
max-height: 4.5rem;
max-width: 5.625rem;
margin-bottom: 1rem
}
section#partial-vt-in-cloud .on-charge-fees-sm {
display: none
}
@media screen and (max-width:64rem) {
section#partial-vt-in-cloud .virtual-terminal {
padding: 9.5% .75rem 0;
max-width: 55%
}
section#partial-vt-in-cloud .virtual-terminal img {
width: 100%;
max-width: 24.25rem
}
section#partial-vt-in-cloud .on-charge-fees {
display: none
}
section#partial-vt-in-cloud .on-charge-fees-sm {
display: block
}
}
@media screen and (max-width:40rem) {
section#partial-vt-in-cloud .inner-text {
margin-top: 4rem;
}
section#partial-vt-in-cloud h2 {
text-align: center;
margin-bottom: 2rem
}
section#partial-vt-in-cloud .store-cards {
text-align: center;
width: 100%;
max-width: 30rem;
padding-right: 0;
padding-top: 0
}
section#partial-vt-in-cloud .store-cards img {
max-height: 4.5rem;
margin-bottom: 1rem;
max-width: 6rem
}
section#partial-vt-in-cloud .virtual-terminal {
max-width: 100%;
max-height: 30rem
}
}
section#partial-your-logo {
padding: 9.5rem 0;
background: url(../images/your-logo-back.jpg) no-repeat 50%;
background-size: cover;
text-align: center
}
section#partial-your-logo p {
max-width: 26rem;
margin: 0 auto 2.6875rem;
opacity: .6
}
@media screen and (max-width:40rem) {
section#partial-your-logo {
padding: 4.5rem 0;
background-size: 220%;
text-align: left
}
}
section#partial-failures-to-success {
background-color: #f9f9f9
}
section#partial-failures-to-success .large-10 {
text-align: center
}
section#partial-failures-to-success .large-10 img {
margin-bottom: 4.125rem
}
section#partial-failures-to-success .large-10 p {
margin-bottom: 4.25rem
}
section#partial-failures-to-success .large-5 .icon-text {
display: block;
margin: auto;
max-width: 21.5rem;
overflow: hidden
}
section#partial-failures-to-success .large-5 img {
float: left;
margin: .6rem 1rem;
margin-left: 0
}
section#partial-failures-to-success .large-5 p {
max-width: 18rem;
margin: auto;
float: left
}
section#partial-failures-to-success #failure-success {
margin-bottom: 2.5rem
}
@media screen and (max-width:64rem) {
section#partial-failures-to-success .large-5 p {
max-width: 80% !important;
margin: auto
}
section#partial-failures-to-success .large-10 img {
margin-bottom: 3rem !important
}
section#partial-failures-to-success .large-10 p {
margin-bottom: 2.5rem
}
}
@media screen and (max-width:40rem) {
section#partial-failures-to-success .large-10 img {
margin-bottom: 2rem !important
}
section#partial-failures-to-success .auto-prompts {
padding-bottom: 1.5rem
}
}
section#options-high-volume .dev-text p {
margin-bottom: 0;
max-width: 16.25rem
}
section#options-high-volume .button {
padding: 1.125rem 0;
margin-top: 5.625rem;
font-size: 1.125rem
}
@media screen and (max-width:40rem) {
section#options-high-volume .button {
margin-top: 2.5rem !important
}
}
section#partial-create-and-authorise {
position: relative;
overflow: hidden;
padding: 4rem 0 0
}
section#partial-create-and-authorise .create-authorise {
text-align: center;
background: url(../images/create-and-authorise-arrow.svg) no-repeat 50%;
background-size: auto 100%;
padding: 5rem 0 6.375rem;
margin-bottom: 5.625rem
}
section#partial-create-and-authorise .create-authorise h2 {
text-align: center;
padding: 1.5rem 0;
background-color: #fff;
margin-bottom: 0
}
section#partial-create-and-authorise .create-authorise h2 span {
color: #d51e33
}
@media screen and (max-width:40rem) {
section#partial-create-and-authorise {
padding: 2rem 0 0
}
section#partial-create-and-authorise .create-authorise {
margin-bottom: 2.5rem
}
}
section#partial-create-send-authorise {
position: relative;
overflow: hidden;
padding: 4rem 0 0
}
section#partial-create-send-authorise h3 {
margin-bottom: 0;
}
section#partial-create-send-authorise p {
margin-bottom: 1.4rem;
margin-top: 0.7rem;
}
section#partial-create-send-authorise .authorise,
section#partial-create-send-authorise .create,
section#partial-create-send-authorise .send,
section#partial-create-send-authorise .relax2 {
float: left;
max-width: 16rem;
margin-right: 3.5rem;
margin-left: auto;
z-index: 15
}
section#partial-create-send-authorise .send {
margin-bottom: 1.4rem;
}
section#partial-create-send-authorise .authorise img,
section#partial-create-send-authorise .create img,
section#partial-create-send-authorise .send img,
section#partial-create-send-authorise .relax2 img {
max-width: 11.25rem
}
section#partial-create-send-authorise .send p {
margin-bottom: 0.7rem;
}
section#partial-create-send-authorise .authorise,
section#partial-create-send-authorise .send,
section#partial-create-send-authorise .relax2 {
opacity: 0.2;
padding-top: 20px;
}
section#partial-create-send-authorise .ddebit-phone {
position: relative;
padding: 4.375rem .75rem 0;
height: 38.375rem
}
section#partial-create-send-authorise .ddebit-phone:before {
content: "";
background-color: #fff;
width: 100%;
height: 30%;
position: absolute;
top: -20%;
left: 0;
z-index: 10
}
section#partial-create-send-authorise .ddebit-phone:after {
content: "";
background: url(../images/ddebit-phone-back.svg) no-repeat top;
background-size: 100% auto;
width: 100%;
max-width: 25.875rem;
height: 45.625rem;
overflow: hidden;
position: absolute;
top: -11.5%;
left: 0;
z-index: 12
}
section#partial-create-send-authorise .ddebit-phone img {
width: 100%;
max-width: 24.25rem
}
section#partial-create-send-authorise .direct-debit-request,
section#partial-create-send-authorise .new-direct-debit,
section#partial-create-send-authorise .new-message,
section#partial-create-send-authorise .direct-debit-relax {
position: absolute;
height: auto !important;
width: auto !important
}
section#partial-create-send-authorise .direct-debit-request,
section#partial-create-send-authorise .new-message,
section#partial-create-send-authorise .direct-debit-relax {
opacity: 0;
visibility: hidden
}
section#partial-create-send-authorise .relax {
opacity: 0;
text-align: center;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
padding-top: 4.5rem
}
section#partial-create-send-authorise .relax p {
max-width: 31.25rem;
opacity: .6;
margin: auto
}
section#partial-create-send-authorise .relax img {
margin-bottom: 1.5rem
}
section#partial-create-send-authorise .relax .large-tick {
opacity: 0;
transform: scale(.1)
}
.create-send-mobile {
display: none
}
@media screen and (max-width:64rem) {
section#partial-create-send-authorise .authorise,
section#partial-create-send-authorise .create,
section#partial-create-send-authorise .send {
width: 75%
}
section#partial-create-send-authorise .ddebit-phone {
padding: 16.5% 3.5% 0;
max-width: 100%
}
section#partial-create-send-authorise .ddebit-phone:before {
content: "";
background-color: #fff;
width: 100%;
height: 27%;
position: absolute;
top: -20%;
left: 0;
z-index: 10
}
section#partial-create-send-authorise .ddebit-phone:after {
content: "";
background: url(../images/phone-back.svg) no-repeat top;
background-size: 100% auto;
width: 100%;
max-width: 100%;
height: 111.5%;
overflow: hidden;
position: absolute;
top: 0;
left: 0
}
section#partial-create-send-authorise .ddebit-phone img {
width: 100%;
max-width: 93%
}
}
@media screen and (max-width:40rem) {
section#partial-create-send-authorise .create-send-desktop {
display: none !important
}
section#partial-create-send-authorise .create-send-mobile {
display: block;
position: relative;
overflow: hidden;
padding: 0
}
section#partial-create-send-authorise .create-send-mobile .authorise-sm,
section#partial-create-send-authorise .create-send-mobile .create-sm,
section#partial-create-send-authorise .create-send-mobile .send-sm,
section#partial-create-send-authorise .create-send-mobile .relax2-sm {
max-width: 16rem;
margin: 0 auto 2rem;
position: relative;
text-align: center;
z-index: 15
}
section#partial-create-send-authorise .create-send-mobile .authorise-sm img,
section#partial-create-send-authorise .create-send-mobile .create-sm img,
section#partial-create-send-authorise .create-send-mobile .send-sm img,
section#partial-create-send-authorise .create-send-mobile .relax2-sm img {
max-width: 11.25rem
}
section#partial-create-send-authorise .create-send-mobile .authorise-sm,
section#partial-create-send-authorise .create-send-mobile .send-sm,
section#partial-create-send-authorise .create-send-mobile .relax2-sm {
padding-top: 20px
}
section#partial-create-send-authorise {
padding: 1.5rem 0
}
section#partial-create-send-authorise h2 {
text-align: center;
margin-bottom: 2rem
}
section#partial-create-send-authorise .authorise,
section#partial-create-send-authorise .create,
section#partial-create-send-authorise .send,
section#partial-create-send-authorise .relax2 {
text-align: center;
top: 4rem;
transform: none;
margin-right: 0;
width: 100%;
max-width: 80%;
padding-right: 0;
padding-top: 0
}
section#partial-create-send-authorise .send {
top: 2rem
}
section#partial-create-send-authorise .ddebit-phone {
max-width: 100%
}
section#partial-create-send-authorise .ddebit-phone img {
width: 93%;
max-width: 31.25rem
}
section#partial-create-send-authorise .direct-debit-request,
section#partial-create-send-authorise .new-direct-debit,
section#partial-create-send-authorise .new-message,
section#partial-create-send-authorise .direct-debit-relax {
position: absolute;
height: auto !important;
width: 93% !important
}
}
section#client-logos-testimonials {
background-color: #F9F9F9;
padding-bottom: 0 !important;
margin-bottom: -9rem;
}
section#client-logos-testimonials img.client-satisfaction-rating {
margin-bottom: 1.6rem;
}
section#client-logos-testimonials .slick-list {
padding-top: 20px !important;
padding-bottom: 40px !important;
z-index: 100;
}
section#client-logos-testimonials .slick-slider.slick-initialized {
visibility: visible;
width: 100vw;
max-width: initial;
margin-top: -20px;
}
.client-logos-carousel .slick-slide {
margin: 0 20px;
}
.client-logos-testimonial {
padding: 70px 70px 30px;
box-shadow: 0px 0px 6px #d2d2d2;
background-image: url(../images/testimonial-quote.png);
background-repeat: no-repeat;
background-position: 20px 30px;
border-radius: 8px;
background-color: #fff;
}
@media screen and (max-width:40rem) {
.client-logos-testimonial {
padding: 80px 40px 30px;
}
}
section#client-logos-testimonials .slick-slider .slick-prev,
section#client-logos-testimonials .slick-slider .slick-next {
position: absolute;
top: 9rem;
z-index: 500;
border-radius: 50%;
background: #000;
width: 3rem;
height: 3rem;
opacity: 1;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
section#client-logos-testimonials .slick-slider .slick-prev {
right: 90vw;
}
section#client-logos-testimonials .slick-slider .slick-next {
left: 90vw;
}
section#client-logos-testimonials .slick-slider .slick-prev .fa-angle-left::before,
section#client-logos-testimonials .slick-slider .slick-next .fa-angle-right::before {
color: #fff;
font-size: 2.2rem;
position: relative;
top: -1px;
}
section#client-logos-testimonials .slick-slider .slick-prev .fa-angle-left::before {
right: 2px;
}
section#client-logos-testimonials .slick-slider .slick-next .fa-angle-right::before {
left: 2px;
}
.slick-disabled {
opacity: 0 !important;
}
@media screen and (min-width:1400px) {
.client-logos-carousel .slick-slide {
max-width: 71.25rem;
}
}
@media screen and (min-width:992px) and (max-width:1399.98px) {
.client-logos-carousel .slick-slide {
max-width: 51.25rem;
}
}
@media screen and (min-width:576px) and (max-width:991.98px) {
.client-logos-carousel .slick-slide {
max-width: 85vw;
}
.client-logos-testimonial {
padding: 70px 50px 20px;
}
}
@media screen and (max-width:650px) {
section#client-logos-testimonials .slick-slider.slick-initialized {
margin-top: 20px;
}
}
@media screen and (max-width:575.98px) {
.client-logos-carousel .slick-slide {
max-width: 85vw;
}
section#client-logos-testimonials .slick-slider.slick-initialized {
margin-top: 20px;
}
section#client-logos-testimonials .slick-slider .slick-prev {
right: 87vw;
}
section#client-logos-testimonials .slick-slider .slick-next {
left: 87vw;
}
section#client-logos-testimonials .slick-slider .slick-prev,
section#client-logos-testimonials .slick-slider .slick-next {
width: 2.5rem;
height: 2.5rem;
}
}
section#perfect-for-memberships {
padding: 4.75rem 0
}
section#perfect-for-memberships .grid-padding-x>.cell {
padding: 0
}
section#perfect-for-memberships h2 {
margin-bottom: 3rem
}
section#perfect-for-memberships p {
max-width: 13.75rem;
margin-bottom: 0
}
section#perfect-for-memberships .membership-icons {
border: 1px solid #e6e9ec;
border-radius: 10px;
padding: 1.375rem
}
section#perfect-for-memberships .membership-icons img {
max-width: 4.875rem;
max-height: 3.5rem;
margin-bottom: 1rem
}
@media screen and (max-width:64rem) {
section#perfect-for-memberships .membership-icons {
margin-bottom: 1.5rem
}
}
@media screen and (max-width:40rem) {
section#perfect-for-memberships {
padding: 2.5rem 0 1rem
}
section#perfect-for-memberships p {
max-width: 13.75rem
}
section#perfect-for-memberships .grid-padding-x>.cell {
padding: 0 1rem
}
section#perfect-for-memberships .dev-item {
margin-bottom: 0
}
section#perfect-for-memberships .membership-icons {
overflow: hidden
}
section#perfect-for-memberships .membership-icons img {
margin-bottom: 0
}
}
section#partial-pricing-plans {
position: relative;
margin-top: -20rem;
text-align: center;
padding-top: 2rem
}
@media screen and (min-width:40rem) {
section#partial-pricing-plans {
padding-bottom: 5rem
}
}
section#partial-pricing-plans .grid-padding-x>.cell {
padding: 0 .25rem
}
section#partial-pricing-plans .pricing-tables {
position: relative
}
section#partial-pricing-plans h3 {
font-size: 1.25rem
}
section#partial-pricing-plans .promo-code a,
#sign-up-popup2 .promo-code a,
.pa-popup .promo-code a {
color: #d51e33
}
section#partial-pricing-plans .promo-code .promo-code_input,
#sign-up-popup2 .promo-code .promo-code_input,
.pa-popup .promo-code .promo-code_input {
display: -ms-flexbox;
display: flex
}
section#partial-pricing-plans .promo-code .promo-code_input input,
#sign-up-popup2 .promo-code .promo-code_input input,
.pa-popup .promo-code .promo-code_input input {
border-top-right-radius: 0;
border-bottom-right-radius: 0
}
section#partial-pricing-plans .promo-code .promo-code_input button,
#sign-up-popup2 .promo-code .promo-code_input button,
.pa-popup .promo-code .promo-code_input button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
width: 100px;
height: 39px;
transition: .3s;
text-align: center;
background-color: #d51e33;
border: 2px solid #d51e33;
color: #fff
}
section#partial-pricing-plans .promo-code .promo-code_input button:hover:not([disabled]),
#sign-up-popup2 .promo-code .promo-code_input button:hover:not([disabled]),
.pa-popup .promo-code .promo-code_input button:hover:not([disabled]) {
background: 0 0;
color: #d51e33;
cursor: pointer
}
section#partial-pricing-plans .promo-code .promo-code_input button:disabled,
#sign-up-popup2 .promo-code .promo-code_input button:disabled,
.pa-popup .promo-code .promo-code_input button:disabled {
opacity: .3
}
section#partial-pricing-plans .high-volume {
background-color: #fff;
box-shadow: 0 2px 10px 0 rgba(0, 0, 50, .1);
padding-top: 1.5rem;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
margin-bottom: 3rem
}
section#partial-pricing-plans .high-volume p {
max-width: 11.5rem;
color: #878f97;
margin: 0 auto 2rem
}
section#partial-pricing-plans .high-volume a {
background-color: #1d1e1f;
width: 100%;
padding: 1rem 0;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
transition: .2s;
display: block;
color: #fff
}
section#partial-pricing-plans .high-volume a:hover {
background-color: #d51e33
}
section#partial-pricing-plans .still-not-sure img {
max-width: 1.125rem
}
section#partial-pricing-plans .still-not-sure a {
color: #d51e33;
font-weight: 400
}
section#partial-pricing-plans .pricing-plan-body {
background-color: #fff;
font-weight: 400
}
section#partial-pricing-plans .pricing-plan-body .pricing-part {
margin-bottom: 2.75rem
}
section#partial-pricing-plans .pricing-plan-body .pricing-part:last-child {
margin-bottom: 0
}
section#partial-pricing-plans .pricing-plan-body .pricing-part h3 {
font-size: 1.2rem;
margin-bottom: .5rem;
text-align: left
}
section#partial-pricing-plans .pricing-plan-body .pricing-part h3 img {
max-width: 2.125rem;
margin-right: .675rem
}
section#partial-pricing-plans .pricing-plan-body .pricing-part .pricing-line {
display: -ms-flexbox;
display: flex;
-ms-flex-align: baseline;
align-items: baseline;
width: 100%;
margin: .625rem 0
}
section#partial-pricing-plans .pricing-plan-body .pricing-part .pricing-line span.price {
font-size: 1.375rem;
color: #36383a;
margin-right: .25rem
}
section#partial-pricing-plans .pricing-plan-body .pricing-part .pricing-line span.price-plus {
font-size: .875rem;
color: #36383a
}
section#partial-pricing-plans .pricing-plan-body .pricing-part .pricing-line span.price-description {
margin-left: auto;
font-size: .8rem;
position: relative;
padding-left: 1rem
}
section#partial-pricing-plans .pricing-plan-body .pricing-part .pricing-line span.price-description:before {
content: "";
position: absolute;
left: 0;
background-image: url(../images/check-green.svg);
background-repeat: no-repeat;
background-size: contain;
width: 12px;
height: 12px;
top: 6px
}
.plan-form form {
text-align: left;
padding: 2rem;
background-color: #fff;
border-radius: 8px;
border: 1px solid #e7e9eb
}
.plan-form form .left {
padding-right: 5px
}
.plan-form form .right {
padding-left: 5px
}
.plan-form form input[type=submit] {
border-radius: 8px;
display: inline-block;
font-size: 1.125rem;
padding: 12px 0;
cursor: pointer;
transition: .3s;
text-align: center;
background-color: #d51e33;
border: 2px solid #d51e33;
color: #fff;
width: 100%;
margin-top: 20px;
margin-bottom: 1rem
}
.plan-form form input[type=submit]:disabled {
opacity: .5
}
.plan-form form input[type=submit]:hover {
background-color: rgba(213, 30, 51, 0);
border: 2px solid #d51e33;
color: #d51e33 !important
}
.plan-form p {
text-align: center;
color: #1d1e1f;
padding: 0;
margin-top: 1rem;
margin-bottom: 0;
font-weight: 400
}
#more,
#more02 {
display: none
}
button#full-breakdown,
button#full-breakdown-popular {
color: #d51e33;
transition: .2s;
cursor: pointer
}
button#full-breakdown-popular:hover,
button#full-breakdown:hover {
color: #36383a
}
@media screen and (max-width:64rem) {
section#partial-pricing-plans span.price-description {
font-size: .875rem
}
}
.pricing-tables-container {
-ms-flex-align: center;
align-items: center
}
@media screen and (min-width:40rem) {
.pricing-tables-container {
display: -ms-flexbox;
display: flex;
margin-bottom: 5rem
}
}
.pricing-tables-container__details {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
background: #fff;
padding: 1rem;
padding-top: 2rem;
position: relative
}
@media screen and (min-width:40rem) {
.pricing-tables-container__details {
border-bottom: 1px solid #90959b;
padding: 3rem;
box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .15);
border-bottom: 0
}
}
.pricing-tables-container__details h2 {
font-size: 1.5rem
}
.pricing-tables-container__form {
background: #fff;
padding: 1rem;
padding-top: 2rem;
padding-bottom: 0;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
text-align: left
}
@media screen and (min-width:40rem) {
.pricing-tables-container__form {
padding: 3rem
}
}
.pricing-tables-container__form input[type=submit] {
border-radius: 8px;
display: inline-block;
font-size: 1.125rem;
padding: 12px 0;
cursor: pointer;
transition: .3s;
text-align: center;
background-color: #d51e33;
border: 2px solid #d51e33;
color: #fff;
width: 100%;
margin-top: 20px;
margin-bottom: 1rem
}
@media screen and (max-width:40rem) {
.pricing-tables-container__form input[type=submit] {
margin-bottom: 2rem
}
}
.pricing-tables-container__form input[type=submit]:disabled {
opacity: .5
}
.pricing-tables-container__form input[type=submit]:hover {
background-color: rgba(213, 30, 51, 0);
border: 2px solid #d51e33;
color: #d51e33 !important
}
.on-charge-fees-icon {
width: 30px;
height: 30px;
background-image: url(../images/on-charge-fees.svg);
background-size: contain;
display: inline-block;
background-repeat: no-repeat;
background-position: 50%;
margin-left: 1rem;
position: relative;
top: 10px
}
.footer-cta {
background: #f9f9f9;
text-align: center
}
@media screen and (min-width:40rem) {
.footer-cta {
background: #fff
}
}
.footer-cta__title {
color: #1d1e1f;
font-family: Avenir-Light, sans-serif;
font-size: 20px;
margin-bottom: 1rem
}
@media screen and (min-width:40rem) {
.footer-cta__title {
padding-right: 2rem;
font-size: 26px;
margin-bottom: 0
}
}
.footer-cta__title b {
font-family: Avenir-Medium, sans-serif
}
.footer-cta .container {
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center
}
@media screen and (min-width:40rem) {
.footer-cta .container {
display: -ms-flexbox;
display: flex
}
}
.sign-up {
padding: 6.5625rem 0;
background-color: #d51e33;
overflow: hidden;
position: relative
}
.sign-up--xero {
background-color: #1d1e1f;
background-image: url(../images/bg-xero-dark.png);
background-size: cover;
background-repeat: no-repeat
}
.sign-up--xero h2 {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center
}
.sign-up .button {
padding: 1.125rem 0;
font-size: 1.125rem
}
.sign-up h2 {
margin: 0
}
.sign-up .oval {
position: absolute
}
.sign-up .oval-s-1 {
left: -20%;
width: 1259px;
top: 0;
animation: d 30s ease-in-out infinite alternate
}
.sign-up .oval-s-2 {
right: -20%;
width: 1959px;
top: 1.25rem;
animation: c 30s ease-in-out infinite alternate
}
.sign-up .grid-x {
position: relative
}
.debiting .cell-1,
.start-accepting .cell-1 {
text-align: right !important
}
.debiting .cell-2,
.start-accepting .cell-2 {
text-align: left !important
}
.start-accepting {
background-image: url(../images/cta-red-blocks.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.gr h2 {
position: relative;
padding-left: 5.5rem;
text-align: left;
line-height: 1.2 !important
}
.gr h2 img {
position: absolute;
left: 1.1875rem;
top: 0
}
.gr h2 span {
display: inline-block
}
@keyframes c {
0% {
transform: rotate(1turn) translate(0) scaleY(1)
}
to {
transform: rotate(0) translate(200px, 20px) scaleY(1.6)
}
}
@keyframes d {
0% {
transform: rotate(0) translate(-200px, -29px) scaleY(1)
}
to {
transform: rotate(1turn) translate(60px, 2px) scaleY(1.6)
}
}
@media (min-width:64.0625rem) {
.sign-up .header-text-small {
max-width: 359px
}
.sign-up .oval {
display: block
}
.sign-up .button {
margin-top: 0
}
.sign-up.gr .oval {
display: block
}
.sign-up .button {
border: 2px solid #f9f9f9;
background-color: #f9f9f9;
transition: .2s
}
.sign-up .button:hover {
background-color: hsla(0, 0%, 98%, 0);
color: #f9f9f9
}
}
@media screen and (max-width:64rem) {
.sign-up .header-text-small {
margin: auto
}
.sign-up h2 {
margin: 0
}
.debiting .cell-1,
.debiting .cell-2,
.start-accepting .cell-1,
.start-accepting .cell-2 {
text-align: center !important
}
}
@media (min-width:40rem) {
.sign-up .header-text-small {
margin-left: auto;
margin-right: 0
}
}
@media (max-width:40rem) {
.sign-up {
padding: 3.5rem 0
}
.sign-up .header-text-small {
margin-right: auto;
font-size: 1.4rem
}
.sign-up h2.white-text {
line-height: 1.2 !important;
margin-bottom: 1rem
}
.gr h2 {
margin-bottom: 2rem !important
}
}
.sign-up-xero-logo {
display: inline-block;
background-image: url(../images/xero-logomark-white.svg);
background-size: contain;
background-repeat: no-repeat;
width: 86px;
height: 24px;
font-size: 0;
margin-left: .5rem
}
#contact-us p {
max-width: 9.375rem;
margin: 0 auto
}
#contact-us p a {
color: #d51e33
}
#contact-us p a:hover {
color: #fff
}
#contact-us .medium-3 img {
margin-bottom: 1rem
}
#contact-us .contact-form {
background-color: #fff;
border-radius: 4px;
box-shadow: 0 10px 20px 0 rgba(54, 56, 58, .1);
position: relative;
padding: 2.5rem;
margin: -19.375rem auto 5rem;
max-width: 25.9375rem
}
section#trusted-by-thousands h2 {
font-size: 1rem;
color: #b8bdc2
}
section#trusted-by-thousands .trusted-by-thousands {
overflow: visible
}
section#trusted-by-thousands .trusted-by-thousands img {
width: 100%;
margin-bottom: 1rem;
max-width: 420px
}
section#trusted-by-thousands .left {
padding-right: 5px
}
section#trusted-by-thousands .right {
padding-left: 5px
}
section#trusted-by-thousands input[type=submit] {
border-radius: 8px;
display: inline-block;
font-size: 1.125rem;
padding: 12px 0;
cursor: pointer;
transition: .3s;
text-align: center;
background-color: #d51e33;
border: 2px solid #d51e33;
color: #fff;
width: 100%
}
section#trusted-by-thousands input[type=submit]:disabled {
opacity: .5
}
section#trusted-by-thousands input[type=submit]:hover {
background-color: rgba(213, 30, 51, 0);
border: 2px solid #d51e33;
color: #d51e33 !important
}
@media screen and (max-width:40rem) {
#contact-us .contact-form {
margin-top: 0;
padding: 4%;
box-shadow: 0 0
}
section#trusted-by-thousands .left {
padding-right: 0
}
section#trusted-by-thousands .right {
padding-left: 0
}
}
@media screen and (max-width:40rem) {
.logos-container {
padding: 3rem 0
}
}
@media screen and (max-width:40rem) {
.logos-container--alt {
padding: 0
}
}
.logos-container h2 {
font-size: 1rem;
color: #b8bdc2
}
.content-not-found {
text-align: center
}
.content-not-found img {
margin-bottom: 2rem
}
.hero-vt-icon {
width: 70px;
height: 70px;
background-image: url(../images/virtual_terminal/recurring_charge.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: 50%;
display: inline-block;
margin-bottom: 1rem
}
.hero-vt-icon--save-cards {
background-image: url(../images/virtual_terminal/save_cards.svg)
}
.hero-vt-icon--fast-deposits {
background-image: url(../images/virtual_terminal/fast_deposits.svg)
}
.hero-vt-icon--no-hardware {
background-image: url(../images/virtual_terminal/no_hardware.svg)
}
.hero-vt-icon--clock-black-red {
background-image: url(../images/pa-icons/clock-black-red.svg)
}
.hero-vt-icon--card-black-red {
background-image: url(../images/pa-icons/card-black-red.svg)
}
.hero-vt-icon--alerts-black-red {
background-image: url(../images/pa-icons/reporting-and-alerts-black-red.svg)
}
.hero-vt-icon--lightning-bolt-black-red {
background-image: url(../images/pa-icons/lightning-bolt-black-red.svg)
}
.hero-vt-icon--on-charge-black-red {
background-image: url(../images/pa-icons/on-charge-black-red.svg)
}
.hero-vt-icon--no-hardware-mobiles {
background-image: url(../images/virtual_terminal/send.svg)
}
.vt-top-banner {
background: #d51e33;
background: linear-gradient(90deg, #d51e33 0, #ec4062);
padding: 3rem 0
}
.vt-top-banner h2 {
margin: 0;
color: #fff;
text-align: center;
font-size: 1.8rem
}
.vt-top-banner__highlight {
font-style: italic
}
.about-us-header {
background-image: url(../images/about_header.png);
background-repeat: no-repeat;
background-size: cover;
padding: 8rem 0 9rem;
position: relative
}
@media screen and (min-width:40rem) {
.about-us-header {
padding: 13rem 0 14rem
}
}
.about-us-header__container {
padding: 0 20px
}
@media screen and (min-width:40rem) {
.about-us-header__container {
display: -ms-flexbox;
display: flex;
max-width: 800px;
margin: 0 auto
}
}
.about-us-header__title {
padding-right: 6rem
}
.about-us-header__title h1 {
font-size: 3rem;
font-family: Avenir-Heavy, sans-serif
}
@media screen and (min-width:40rem) {
.about-us-header__title h1 {
font-size: 4rem
}
}
.about-us-header__title h1 span {
display: block;
font-size: 1.5rem;
font-family: Avenir-Medium, sans-serif
}
.about-us-header__description {
font-family: Avenir-Light, sans-serif;
font-size: 1.5rem;
color: #1d1e1f
}
@media screen and (min-width:40rem) {
.about-us-header__description {
font-size: 2rem
}
}
.about-us-header__description strong {
font-family: Avenir-Medium, sans-serif
}
.about-us-header:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 74px;
background-color: #1d1e1f
}
.about-us-quote {
position: relative;
background: #fff;
margin: -100px auto 0;
max-width: 800px;
padding: 3rem 20px;
font-family: Avenir-Light, sans-serif;
font-style: italic;
font-size: 1.4rem
}
@media screen and (min-width:40rem) {
.about-us-quote {
padding: 3rem 3rem 3rem 8rem
}
}
@media screen and (max-width:40rem) {
.about-us-quote {
padding-top: 6rem
}
}
.about-us-quote:before {
content: ""
}
.payment-reminders-image,
.xero-send-requests-image {
max-width: 863px;
margin-left: auto;
margin-right: auto;
display: block;
width: 100%
}
.xero-send-requests-image {
max-width: 683px;
width: calc(100% - 1.5rem)
}
.pa-blog-item-featured {
position: relative;
height: 85vh;
overflow: hidden
}
@media screen and (max-width:40rem) {
.pa-blog-item-featured {
max-height: none;
height: auto
}
}
.pa-blog-item-featured-image {
display: block;
width: 100%;
height: 100%;
background: #1d1e1f
}
@media screen and (max-width:40rem) {
.pa-blog-item-featured-image {
height: 50vh
}
}
.pa-blog-item-featured-image img {
object-fit: cover;
height: 100%;
width: 100%
}
.pa-blog-item-featured-content {
position: absolute;
bottom: 0;
width: 50%;
padding: 5rem;
background-color: #fff;
max-width: 700px;
left: 65%;
transform: translateX(-50%)
}
@media screen and (max-width:40rem) {
.pa-blog-item-featured-content {
position: relative;
width: 100%;
left: 0;
transform: none;
padding: 2rem;
border-bottom: 1px solid #e6e9ec
}
}
.pa-blog-item-featured-content:before {
content: "";
width: 100px;
height: 100px;
background-image: url(../images/arrow-diagonal-red.svg);
background-repeat: no-repeat;
background-size: contain;
top: -40px;
right: 30px;
position: absolute;
transition: all .3s cubic-bezier(.4, 0, .2, 1);
transform: translateX(0) translateY(0)
}
@media screen and (max-width:40rem) {
.pa-blog-item-featured-content:before {
display: none
}
}
.pa-blog-item-featured-content:hover:before {
transform: translateX(8px) translateY(-8px)
}
.pa-blog-item-featured-content h2 {
margin-bottom: 2.5rem;
margin-top: 2rem
}
.pa-blog-item-featured-content h2 a {
font-size: 3rem;
font-family: Avenir-Black, Avenir-Heavy, sans-serif;
color: #1d1e1f
}
@media screen and (max-width:40rem) {
.pa-blog-item-featured-content h2 a {
font-size: 2rem
}
}
.pa-blog-item-featured-content p {
color: #36383a;
font-size: 1.125rem;
max-width: 415px
}
.pa-blog-item-featured-content .link {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: end;
justify-content: flex-end;
margin-top: 2rem
}
.pa-blog-item-featured-content .link a {
color: #d51e33;
font-family: Avenir-Heavy, sans-serif
}
.pa-byline {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between
}
.pa-byline__part {
font-weight: Avenir-Light, sans-serif;
font-size: .875rem;
color: #878f97;
text-transform: uppercase
}
.pa-byline__part a {
color: #878f97
}
.pa-blog-card {
height: 500px;
border: 1px solid #e6e9ec;
background-color: #fff;
margin-bottom: 1.5rem;
color: #5d6268;
transition: all .3s cubic-bezier(.4, 0, .2, 1)
}
@media screen and (max-width:40rem) {
.pa-blog-card {
display: -ms-flexbox;
display: flex;
height: auto;
border: none;
border-bottom: 1px solid #e6e9ec
}
}
.pa-blog-card:hover {
margin-top: -.5rem
}
@media screen and (min-width:40rem) {
.pa-blog-card:hover {
box-shadow: 0 12px 29px 0 rgba(0, 0, 0, .15)
}
}
.pa-blog-card p {
color: #5d6268
}
.pa-blog-card__image {
height: 200px;
overflow: hidden;
display: block;
margin-bottom: 1rem;
background: #f9f9f9
}
@media screen and (max-width:40rem) {
.pa-blog-card__image {
-ms-flex-order: 2;
order: 2;
-ms-flex: 0 0 80px;
flex: 0 0 80px;
height: 80px
}
}
.pa-blog-card__image img {
object-fit: cover;
height: 100%;
width: 100%
}
.pa-blog-card__content {
padding: 2rem;
position: relative
}
@media screen and (max-width:40rem) {
.pa-blog-card__content {
font-size: .8rem;
padding-top: 0
}
}
.pa-blog-card__content h2 {
font-size: 1.125rem;
margin-top: 1rem;
font-family: Avenir-Heavy, sans-serif;
color: #1d1e1f
}
.pa-blog-card__content .pa-byline__part {
font-size: .65rem
}
.pa-blog-card__read-more {
bottom: 1rem;
right: 1rem;
font-family: Avenir-Heavy, sans-serif;
color: #1d1e1f;
padding-right: 20px
}
.pa-blog-card__read-more,
.pa-blog-card__read-more:after {
position: absolute;
transition: all .3s cubic-bezier(.4, 0, .2, 1)
}
.pa-blog-card__read-more:after {
content: "";
right: 0;
top: 50%;
transform: translateY(-50%);
background-image: url(../images/arrow-diagonal-red.svg);
background-size: contain;
width: 16px;
height: 16px;
background-position: 50%;
background-repeat: no-repeat
}
.pa-blog-card--lg {
display: -ms-flexbox;
display: flex
}
.pa-blog-card--lg .pa-blog-card__image {
height: 100%;
-ms-flex: 0 0 40%;
flex: 0 0 40%
}
@media screen and (max-width:40rem) {
.pa-blog-card--lg .pa-blog-card__image {
-ms-flex: 0 0 80px;
flex: 0 0 80px;
height: 80px
}
}
@media screen and (max-width:40rem) {
.pa-blog-card--lg .pa-blog-card__read-more {
display: none
}
}
.pa-blog-single-header {
height: 80vh;
overflow: hidden;
position: relative
}
@media screen and (max-width:40rem) {
.pa-blog-single-header {
height: 50vh
}
}
.pa-blog-single-header picture {
width: 100%;
height: 100%;
display: block;
background: #1d1e1f
}
.pa-blog-single-header picture img {
object-fit: cover;
height: 100%;
width: 100%
}
@media screen and (min-width:40rem) {
.pa-blog-single {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between
}
}
.pa-blog-single__side {
-ms-flex: 0 0 300px;
flex: 0 0 300px;
padding-left: 2rem
}
@media screen and (max-width:40rem) {
.pa-blog-single__side {
display: none
}
}
.pa-blog-single__content {
-ms-flex: 0 1 100%;
flex: 0 1 100%;
max-width: 700px;
padding: 5rem;
background: #fff;
margin-top: -50vh;
z-index: 2;
font-size: 1.125rem;
color: #5d6268
}
@media screen and (max-width:40rem) {
.pa-blog-single__content {
margin-top: 0;
padding: 2rem;
padding-top: 0
}
}
.pa-blog-single__content p {
font-size: 1.125rem
}
.pa-blog-single__content h1 {
font-family: Avenir-Black, Avenir-Heavy, sans-serif;
margin-top: 2rem;
font-size: 3.75rem;
color: #1d1e1f
}
@media screen and (max-width:40rem) {
.pa-blog-single__content h1 {
font-size: 1.625rem
}
}
.pa-blog-single__content h2 {
font-size: 1.625rem;
color: #1d1e1f;
font-family: Avenir-Black, Avenir-Heavy, sans-serif;
margin-top: 3rem
}
@media screen and (max-width:40rem) {
.pa-blog-single__content h2 {
font-size: 1.125rem
}
}
.pa-blog-single__content h3,
.pa-blog-single__content h4,
.pa-blog-single__content h5,
.pa-blog-single__content h6 {
color: #1d1e1f
}
.pa-blog-tags {
margin: 0;
padding: 0;
margin-bottom: 3rem
}
.pa-blog-tags__tag {
display: inline-block;
margin-right: 1rem;
margin-bottom: 1rem
}
.pa-blog-tags__tag a {
background: #e6e9ec;
color: #878f97;
font-size: .875rem;
padding: .5rem 1rem;
border-radius: 1rem
}
.related-posts h3 {
font-size: 1.375rem;
font-family: Avenir-Black, Avenir-Heavy, sans-serif;
color: #1d1e1f;
margin-bottom: 3rem
}
.related-post {
margin-bottom: 2rem
}
.related-post h4 {
font-size: 1.125rem;
font-family: Avenir-Black, Avenir-Heavy, sans-serif;
color: #1d1e1f
}
.related-post h4 a {
color: #1d1e1f
}
@media screen and (min-width:40rem) {
.share-buttons {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 9
}
}
@media screen and (max-width:40rem) {
.share-buttons {
margin-bottom: 2rem
}
}
.share-buttons a {
display: block;
width: 74px;
height: 74px;
background: #fff;
border: 1px solid #e7e9eb;
font-size: 0;
text-align: center;
line-height: 74px;
background-size: 20px;
background-position: 50%;
background-repeat: no-repeat;
border-bottom: none
}
@media screen and (max-width:40rem) {
.share-buttons a {
width: 40px;
height: 40px;
border: none;
background-size: 10px;
display: inline-block;
margin-right: 1rem
}
}
.share-buttons a:last-child {
border-bottom: 1px solid #e7e9eb
}
@media screen and (max-width:40rem) {
.share-buttons a:last-child {
border: none
}
}
.share-buttons a.facebook {
background-image: url(../images/social/facebook.svg)
}
.share-buttons a.twitter {
background-image: url(../images/social/twitter.svg);
background-size: 30px
}
@media screen and (max-width:40rem) {
.share-buttons a.twitter {
background-size: 20px
}
}
.share-buttons a.linked-in {
background-image: url(../images/social/linked-in.svg);
background-size: 30px
}
@media screen and (max-width:40rem) {
.share-buttons a.linked-in {
background-size: 20px
}
}
.pa-next-article {
position: relative;
overflow: hidden;
display: block;
background: #1d1e1f;
color: #fff;
padding: 10rem 0
}
@media screen and (max-width:40rem) {
.pa-next-article {
padding: 8rem 0
}
}
.pa-next-article:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(29, 30, 31, .5);
transition: all .3s cubic-bezier(.4, 0, .2, 1);
transition-delay: 200
}
.pa-next-article__content {
position: relative;
z-index: 2;
max-width: 730px
}
@media screen and (max-width:40rem) {
.pa-next-article__content {
padding: 0 2rem
}
}
.pa-next-article__content h2 {
color: #fff;
font-family: Avenir-Black, Avenir-Heavy, sans-serif;
font-size: 3.75rem;
margin-bottom: 0
}
@media screen and (max-width:40rem) {
.pa-next-article__content h2 {
font-size: 2.125rem
}
}
.pa-next-article picture {
position: absolute;
top: 0;
width: 100%;
height: 100%
}
.pa-next-article picture img {
object-fit: cover;
width: 100%;
height: 100%
}
.pa-next-article__arrow {
position: absolute;
right: 0;
top: 0;
background: #fff url(../images/arrow-diagonal-red.svg);
padding: 6rem;
z-index: 3;
background-repeat: no-repeat;
background-size: 50%;
background-position: 50% 50%;
transition: all .3s cubic-bezier(.4, 0, .2, 1)
}
@media screen and (max-width:40rem) {
.pa-next-article__arrow {
padding: 2.5rem
}
}
.pa-next-article:hover .pa-next-article__arrow {
background-position: 60% 40%
}
.pa-next-article:hover:after {
background: rgba(29, 30, 31, .4)
}
@media screen and (min-width:40rem) {
.customer-other-features h2 {
margin-bottom: 3rem
}
}
.dropdown.menu.medium-horizontal>li.opens-left>.is-dropdown-submenu {
top: 100%;
left: auto
}
.is-dropdown-submenu {
position: absolute;
top: 100%;
left: auto;
z-index: 1;
display: none;
min-width: 200px
}
.top-bar-right .menu li.is-dropdown-submenu-parent a {
padding-right: 22px;
margin-right: 20px
}
.hero.small {
-ms-flex-align: stetch;
align-items: stetch
}
.hero-inner-content,
.hero.small {
display: -ms-flexbox;
display: flex
}
.hero-inner-content {
-ms-flex-align: center;
align-items: center;
width: 100%
}
#partial-upgrade-payments .inner-text {
padding-top: 3rem
}
#partial-upgrade-payments .cell.svg-main-wrap {
padding-left: 2.8125rem
}
#partial-cleared-fund .header-wrap {
margin-bottom: 1.625rem
}
#partial-cleared-fund .inner-text {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-right: 0;
padding-top: 1.4rem
}
#partial-cleared-fund .inner-text .ccfc-featured-items {
width: 100%
}
b,
strong {
font-weight: 400;
font-family: Avenir-Heavy, sans-serif
}
.inner-content ol {
counter-reset: a;
font-size: .875rem
}
.inner-content ol>li {
counter-increment: a;
margin: 1rem 0
}
.inner-content ol ol {
padding-top: 1rem;
column-count: 2;
column-gap: 70px;
-moz-column-gap: 70px
}
.inner-content ol ol>li {
display: block;
margin: 1.05rem 0
}
.inner-content ol ol>li:first-of-type {
margin-top: 0
}
.inner-content ol ol>li:before {
content: counters(a, ".") ". ";
margin-left: -2rem
}
.inner-content ol ol ol {
column-count: 1
}
.inner-content ol ol ol>li:before {
content: counters(a, ".") ". ";
margin-left: -3.2rem
}
.inner-content .entry-content {
padding-top: 50px;
padding-bottom: 50px
}
@media screen and (max-width:64rem) {
.inner-content ol ol {
column-count: 1
}
}
.mt-2 {
margin-top: 2rem
}
.mt-4 {
margin-top: 4rem
}
.mb-2 {
margin-bottom: 2rem
}
.mb-3 {
margin-bottom: 3rem
}
.customer_payment_syncing {
padding-top: 8.8rem
}
@media screen and (max-width: 40rem) {
.customer_payment_syncing {
padding-top: 6.8rem;
}
}
.customer_payment_syncing .header-text {
max-width: 580px
}
.dev-hosted-pages {
color: #fff;
}
.dev-hosted-pages {
padding-bottom: 16rem;
}
@media screen and (max-width: 40rem) {
.dev-hosted-pages {
padding-bottom: 15rem;
}
}
.dev-hosted-pages .lead {
color: #fff;
font-size: 1.2rem;
}
@media screen and (min-width: 40rem) {
.dev-hosted-pages .lead {
font-size: 1.4rem;
}
}
.dev-hosted-pages ul {
color: #fff;
font-size: 1rem;
}
@media screen and (min-width: 40rem) {
.dev-hosted-pages ul {
font-size: 1.2rem;
}
}
.dev-hosted-pages__content {
background: #fff;
margin-top: -12rem;
padding-top: 2rem;
}
@media screen and (min-width: 40rem) {
.dev-hosted-pages__content {
padding: 3rem;
}
}
.dev-api .text-lead {
max-width: 620px;
margin-left: auto;
margin-right: auto;
}
.dev-api ul {
display: -ms-flexbox;
display: flex;
max-width: 620px;
margin: 3rem auto 2rem;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-flow: wrap;
flex-flow: wrap;
list-style: none;
}
@media screen and (max-width: 40rem) {
.dev-api ul {
padding-left: 0;
}
}
.dev-api ul li {
margin-bottom: 0.75rem;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
}
@media screen and (max-width: 40rem) {
.dev-api ul li {
-ms-flex: 100%;
flex: 100%;
text-align: center;
}
}
.dev-api ul li a {
color: #ff4258;
}
.dev-test-sandbox .text-lead {
max-width: 620px;
margin-bottom: 3rem;
margin-left: auto;
margin-right: auto;
}
.about-stats-grid {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
}
.about-stats-grid>div {
padding-right: 4rem;
}
.about-stats-grid>div p {
margin-bottom: 0;
}
@media screen and (max-width: 575.98px) {
.about-stats-grid {
flex-direction: column;
align-items: center;
}
.about-stats-grid>div {
padding-right: 0;
padding-bottom: 20px;
}
}
.about-stats-grid>div:last-child {
padding-right: 0;
}
.about-stats-grid__mastercard-logo {
display: block;
width: 150px;
height: 52px;
background-image: url(https://www.payadvantage.com.au/wp-content/themes/pay-advantage/assets/images/mastercard-visa-icon-border.png);
background-repeat: no-repeat;
background-size: contain;
margin-bottom: 10px;
background-position: 0 8px;
}
@media screen and (max-width: 40rem) {
.about-stats-grid__mastercard-logo {
width: 130px;
height: 45px;
}
}
.sandbox-steps {
padding: 3rem;
border: 1px solid #e6e9ec;
display: -ms-flexbox;
display: flex;
margin-top: 4rem;
}
@media screen and (max-width: 40rem) {
.sandbox-steps {
margin-top: 2rem;
display: block;
padding: 2rem;
}
}
.sandbox-step {
-ms-flex: 33.33%;
flex: 33.33%;
font-size: 22px;
color: #1d1e1f;
position: relative;
padding-left: 2.5rem;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
margin-right: 3rem;
line-height: 1.3;
}
@media screen and (max-width: 40rem) {
.sandbox-step {
margin-bottom: 1rem;
}
.sandbox-step:last-child {
margin-bottom: 0;
}
}
.sandbox-step:last-child {
margin-right: 0;
}
.sandbox-step:before {
content: "1";
position: absolute;
left: 0;
font-size: 40px;
color: #e6e9ec;
}
.sandbox-step:nth-child(2):before {
content: "2";
}
.sandbox-step:nth-child(3):before {
content: "3";
}
#payment-request-header {
padding-top: 2rem;
}
#payment-request-header .container {
text-align: center;
margin-bottom: 3rem;
}
#payment-request-header .header-text {
max-width: initial;
}
#payment-requests-installments {
margin-bottom: 0;
padding-bottom: 0;
}
.responsive-embed {
position: relative;
display: block;
width: 100%;
padding: 0;
overflow: hidden;
max-width: 560px;
margin: 0 auto;
}
@media screen and (max-width:575.98px) {
.responsive-embed {
max-width: 100%;
}
}
.responsive-embed::before {
display: block;
content: "";
}
.responsive-embed .responsive-embed-item,
.responsive-embed iframe,
.responsive-embed embed,
.responsive-embed object,
.responsive-embed video {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.widescreen::before {
padding-top: 56.25%;
}
@media screen and (min-width: 40rem) {
.subscription-simplified-container {
margin-top: -26rem;
display: -ms-flexbox;
display: flex;
max-width: 800px !important;
margin-bottom: 5rem;
}
}
@media screen and (max-width: 40rem) {
.subscription-simplified-container {
margin-top: -4rem;
margin-bottom: 2.5rem;
}
}
@media screen and (min-width: 40rem) {
.subscription-simplified-container .list-check-green {
margin-left: 2rem;
}
}
.subscription-simplified-container-2 {
padding-bottom: 2rem;
}
@media screen and (min-width: 40rem) {
.subscription-simplified-container-2 {
max-width: 800px !important;
padding-bottom: 5rem;
}
}
@media screen and (min-width: 40rem) {
.subscriptions-simplified-content .list-check-green {
margin-right: 2rem;
}
}
@media screen and (min-width: 40rem) {
.subscriptions-simplified-content {
display: -ms-flexbox;
display: flex;
}
}
.subscriptions-simplified-content img {
-ms-flex-order: 2;
order: 2;
}
.subscriptions-simplified-content ul {
-ms-flex-order: 1;
order: 1;
}
.p-0 {
padding: 0 !important;
}
#sign-up-popup img.client-satisfaction-rating {
max-width: 22rem;
margin-bottom: 1.4rem;
margin-top: 0.3rem;
}
@media (max-width:575.98px) {
.img_desktop {
display: none !important;
}
.img_mobile {
display: block !important;
margin: 0 auto;
}
}
@media (min-width:576px) {
.img_desktop {
display: block !important;
margin: 0 auto;
}
.img_mobile {
display: none !important;
}
}
.max_width_100 {
max-width: 100% !important;
}
.pa-popup-close {
display: block;
position: absolute;
top: 4px;
right: 8px;
width: 16px;
height: 16px;
}
.pa-popup-close:hover {
cursor: pointer;
}
#global_google_review {
position: fixed;
bottom: 20px;
right: 20px;
box-shadow: 0 0 15px rgb(0 0 0 / 15%);
z-index: 10;
}
@media (max-width: 575.98px) {
#global_google_review {
width: 140px;
}
.reviews_features_wrap {
padding-left: 15px;
padding-right: 15px;
}
}
/*Code by zainab*/
.footer-text{
font-size: 12px!important;
text-align: center!important;
}