/*
	The following file is based on the HTML5 Boilerplate and has been adapted by Luke Roughley for the Couponshop website.
	Credit to Nicolas Gallagher, Jonathan Neal, Kroc Camen, and the H5BP dev community and team.
==========================================================================
	Base styles
========================================================================== */
html, button, input, select, textarea {
    color: #333b45;
    border-radius: 36px;
}
body {
    font-size: 1em;
    line-height: 1.4;
}

html {
    overflow: -moz-scrollbars-vertical;
    overflow-y: scroll;
}

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

.x {
    display: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
    max-width: 100%;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.checkbox * {
    display: inline;
}

.checkbox {
    margin: 10px 0;
}

.headerBackground,
#headerFullpage {
    pointer-events: none;
}

#nav2,
.logo {
    pointer-events: auto;

}

.logo {
    margin-top: 13px;
    margin-left: 10px;
}

.ticks-list {
    list-style-type: none;
}

.ticks-list li {
    list-style-type: none;
    height: 28px;
    line-height: 28px;
    background-image: url('/frontend/img/tick-circle-icon.png');
    background-repeat: no-repeat;
    background-size: 28px 28px;
    text-indent: 35px;
    margin-bottom: 10px;
    background-position: left;
}

/* ==========================================================================
   Utility
   ========================================================================== */
.u-no-style {
    list-style: none;
}

.u-rel {
    position: relative;
}

.text-large {
    font-size: 1.5em;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/* ==========================================================================
   Layout
   ========================================================================== */
.l-row:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

* html .l-row {
    zoom: 1;
}

/*IE6*/
*:first-child + html .clearfix {
    zoom: 1;
}

/*IE7*/


@media (min-width: 768px) {
    .l-one-third, .l-two-thirds {
        padding-left: 1em;
        padding-right: 1em;
        box-sizing: border-box;
    }

    .l-one-third {
        float: left;
        width: 33.33332%;
    }

    .l-two-thirds {
        float: left;
        width: 66.66665%;
    }

    .l-one-third.l-first, .l-two-thirds.l-first {
        padding-left: 0;
    }

    .l-one-third.l-last, .l-two-thirds.l-last {
        padding-right: 0;
    }
}


/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */
.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   MAIN STYLING
   ========================================================================== */
#mti_wfs_colophon {
    display: none !important;
}

/* TYPOGRAPHY */
h1, h2, h3, h4, h5, h6, p, a, ul, li, button, form, fieldset, textarea, input section, header, footer, table, td, tr, small, select {
    font-family: 'Lato', arial, helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: #333B45;
}

p, a, ul, li, button, form, formset, textarea, input section, header, footer {
    font-family: 'Lato', arial, helvetica, sans-serif;
    margin: 0;
    padding: 0;
    /*font-size: 13px;*/
}

.subNote {
    display: block;
    margin-top: 20px;
}

.subNote.smaller {
    font-size: 9px;
}

/* DEFAULTS */
label {
    font-family: 'Lato', arial, helvetica, sans-serif;
    color: #222;
    display: block;
}

input[type="date"] {
    padding: 5px;
    margin: 5px 0;
}

button{
    border-radius: 36px;
}
.normalbutton.bottom {
    display: block;
    width: 100%;
    font-weight: 600;
    font-size: 16px;
    height: 35px;
    line-height: 35px;
    margin-top: 15px;
}

#notifications .error {
    padding: 2%;
    margin: 2% 4%;
    width: 100%;
    color: #222;
    width: auto;
    font-size: 25px;
    text-decoration: underline;
    font-weight: 300;
    text-align: center;
    cursor: pointer;
}

/* CONTAINER */
body, html {
    color: #333B45;
    background-color: white;
    min-width: 320px;
}

#container {
    min-height: 100%;
    position: relative;
    min-width: 300px;
    margin: 0 auto;
    background-color: #fff;
}

#main {
    width: 78%;
    margin: 0 auto;
    clear: both;
}

#mainalternate {
    width: 100%;
    padding-top: 20px;
    clear: both;
}

.highlighted {
    color: #79A782;
    font-size: 16px;
    font-weight: bold;
    text-decoration: underline;
}

.nonfooter {
    position: relative;
    clear: both;
    overflow: visible;
    padding-bottom: 146px;
}

/* HEADER */
header {
    width: 78%;
    border-bottom: 1px solid #99d0cc;
    margin: 0 auto 20px;
}

.mainlogo {
    float: left;
}

.mainlogo img {
    width: 120px;
    padding: 15px 0;
    margin-bottom: 0;
    float: left;
}

.logoTag {
    float: left;
    top: 35px;
    left: 10px;
    position: relative;
}

#register {
    float: right;
}

#loginButton.selected, #registerButton.selected {
    background-color: #ccc !important;
    color: #333B45 !important;
}

.topcontainer {
    display: none;
}

.topcontainer form, .topcontainer form label {
    font-size: 12px;
    color: #555;
}

.topcontainer input {
    margin-bottom: 10px;
    width: 100%;
}

.topcontainer input[type="button"], .topcontainer input[type="submit"] {
    x§font-weight: 400;
    text-transform: uppercase;
    margin: 20px auto 0;
    width: 150px;
}

.display-container {
    display: block !important;
    position: absolute;
    top: 35px;
    background-color: #ccc;
    color: #333B45;
    z-index: 9999;
    width: 210px;
    padding: 40px;
    box-shadow: 2px 2px 2px #444;
}

#nav_account {
    position: relative;
}

#nav_account #loginButton:hover, #nav_account #registerButton:hover {
    background-color: #ccc;
    color: #333B45;
    cursor: pointer;
}

.logoutButton {
    padding: 10px 15px;
    background-color: #79A782;
    color: #fff;
    border: 0;
    width: 50px;
    font-size: 14px;
    background-color: #79A782 !important;
    color: #fff !important;
}

.logoutButton:hover {
    background-color: #79A782 !important;
    color: #fff !important;
}

label.error {
    display: block;
    position: static;
}

#notifications {
    width: 70%;
    position: static;
    padding: 0 15%;
    z-index: 2;
    margin-bottom: 20px;
}

.logoAlt {
    display: none;
}

/* nav */
#nav_main {
    float: left;
    font-size: 0;
    margin-top: 25px;
    margin-left: 50px;
}

#nav_main a {
    font-size: 14px;
    display: inline-block;
    padding: 10px 15px;
    background-color: #b8e4e2;
    color: #fff;
}

#nav_main a:hover,
#contact #nav_main a.contactButton,
#about #nav_main a.aboutButton,
#how-it-works #nav_main a.howitworksButton,
#markets #nav_main a.marketsButton,
#faqs #nav_main a.faqsButton {
    background-color: #79A782;
}

/* Mob nav */
#nav_mobile {
    display: none;
    width: 35px;
    height: 35px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #79A782;
    cursor: pointer;
}

#nav_mobile img {
    width: 80%;
    margin: 10%;
}

#mobile_menu {
    position: fixed;
    width: 350px;
    left: -350px;
    -webkit-transition: left ease 0.44s;
    transition: left ease 0.44s;
    background-color: #79A782;
    z-index: 3;
    min-height: 100%;
}

#mobile_menu a {
    display: block;
    font-size: 14px;
    padding: 10px 15px;
    border-top: 1px solid #b8e4e2;
    color: #fff;
}

#mobile_menu.on {
    left: 0;
}

.mobileMenuClose {
    padding: 10px 15px;
    font-size: 14px;
    cursor: pointer;
    color: #fff;
    background-color: #b8e4e2;
}

/* Login */
#loginButton {
    padding: 10px 15px;
    background-color: #79A782;
    color: #fff;
    border: 0;
    float: right;
    width: 50px;
    font-size: 14px;
}

#loginButton:hover {
    background-color: #79A782 !important;
    color: #fff !important;
}

.logincontainer {
    padding: 20px;
    background-color: #fff;
    clear: both;
    position: absolute;
    width: 260px;
    right: 0;
    top: 65px;
    border: 1px solid #c1e1df;
    margin-top: -1px;
    z-index: 2;
}

.logincontainer form {
    color: #333B45;
}

.logincontainer input[type="text"],
.logincontainer input[type="password"] {
    border: 1px solid #333B45;
}

.login .buttontop {
    float: left;
    cursor: pointer;
    padding: 0;
}

.login .forms {
    width: 100%;
    clear: both;
    padding-top: 10px;
}

.login .current {
    background-color: #ccc;
    color: #333B45;
}

.login label {
    color: #333B45;
}

.login .col {
    width: 100%;
    float: left;
}

.login p span {
    width: 100px;
    display: inline-block;
}

.login p input[type="text"],
.login p input[type="date"],
.login p input[type="email"],
.login p input[type="password"] {
    margin-top: 10px;
    width: 200px;
}

/* Application */
#main.application {
    max-width: 900px;
    min-width: 740px;
    height: auto;
    border: 1px solid #c1e1df;
    position: relative;
    padding: 0;
}

#main.application #form_stage {
    width: 100%;
    height: 45px;
    background-color: #c1e1df;
}

#main.application #form_stage div {
    padding: 15px;
    font-size: 12px;
    max-width: 150px;
    display: inline-block;
    color: #7aa19f;
    text-align: center;
}

#main.application #form_stage div.selected {
    background-color: #fff;
    color: #333B45;
}

#main.application .applicationForm {
    padding: 15px;
    display: none;
    margin: 10px 0;
    position: relative;
}

#main.application .applicationForm.selected {
    display: block;
}

div.half {
    width: 46%;
    padding: 2%;
    float: left;
}

div.full {
    padding: 5%;
}

table tr.incomplete td:last-child,
table tr.failure td:last-child,
table tr.error td:last-child,
table tr.success td:last-child,
table tr.processing td:last-child,
table tr.incomplete td:last-child a,
table tr.failure td:last-child a,
table tr.error td:last-child a,
table tr.success td:last-child a,
table tr.processing td:last-child a {
    color: #fff;
    border: none;
}

table tr td:last-child {
    background-color: #fff;
}

table tr.failure td:last-child,
table tr.error td:last-child {
    background-color: #111;
}

table tr.success td:last-child {
    background-color: #BE1E62;
}

.entryTable tr th:last-child {
    border-bottom: 1px solid rgb(122, 161, 159);
}

.headlinks3 {
    display: none;
}

#nav_account h3 {
    padding: 10px 15px;
    background-color: #79A782;
    color: #fff;
    border: 0;
    float: right;
    min-width: 50px;
    font-size: 14px;
    margin-top: 25px;
}

#nav_account:hover h3 {
    background-color: #79A782;
    cursor: pointer;
}

#nav_account:hover .headlinks3 {
    display: block;
    position: absolute;
    top: 64px;
    right: 0;
    z-index: 200;
}

#nav_account:hover .headlinks3 a {
    display: block;
}

#nav_account:hover .headlinks3 a:hover {
    background-color: #fff;
}

#main.application #applicationNotifications p.error {
    padding: 2%;
    background-color: #924530;
    border: 1px solid #482720;
    margin: 4% 4% 0;
    color: #fff;
    width: auto;
}

#main.application input[type="text"] {
    display: block;

}

#main.application input[type="text"].help {
    display: block;
    width: 70%;
    float: left;
}

#main.application input[type="file"] {
    width: 200px;
    padding: 10px 15px;
    background-color: #79A782;
    color: #fff;
    border: 0;
    font-size: 14px;
    float: left;
}

#application #nav_main,
#application #nav_mobile,
#application #mobile_menu {
    display: none !important;
}

.helppopup {
    min-width: 300px;
    max-width: 600px;
    height: auto;
    position: fixed;
    top: 40px;
    left: 0;
    right: 0;
    margin: auto;
    padding: 20px;
    z-index: 500;
    display: none;
    border: 1px solid #c1e1df;
    background-color: #fff;
    max-height: 70%;
    overflow-y: scroll;
}

.helppopup h3,
.helppopup h5,
.helppopup h6 {
    font-size: 16px;
    margin-bottom: 10px;
}

.helppopup .helppopupClose {
    position: absolute;
    width: 34px;
    height: 34px;
    top: 0;
    right: 0;
    background-color: #924530;
    color: #fff;
    line-height: 34px;
    text-align: center;
    cursor: pointer;
    font-size: 18px;
}

.helptext {
    width: 20%;
    float: left;
    position: relative;
}

.helptext span {
    color: #333B45;
    width: 30px;
    height: 30px;
    margin-left: 15px;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    display: block;
    border-radius: 30px;
    border: 2px solid #333B45;
    cursor: pointer;
}

.helptext.toggle span {
    border: 3px solid #79A782;
    color: #79A782;
    font-weight: bold;
}

.helptext p {
    max-width: 300px;
    min-width: 100px;
    font-size: 10px;
    padding: 10px;
    z-index: 3;
    color: #333B45;
    display: none;
    position: absolute;
    background-color: #e0efef;
    border: 1px solid #c1e1df;
    top: 5px;
    right: 55px;
}

.helptext:hover p {
    display: block;
}

#main.application label {
    margin: 0 0 5px;
    clear: left;
    padding-top: 15px;
}

#entry_form img {
    display: block;
    margin: 20px auto;
}

#entry_form p {
    font-size: 13px;
}

#changePasswordForm input[type="password"] {
    width: 100%;
    margin-bottom: 20px;
}

#changePasswordForm input.error, select.error {
    margin-bottom: 60px !important;
}

#changePasswordForm label.error {
    top: 45px !important;
}

.changePassword .btn-l {
    text-align: center;
}

.store_info {
    padding: 20px;
    margin: 20px;
    background-color: #eaf9f9;
    border: 1px solid #efffff;
    color: #333B45;
}

#payl8r_info {
    color: #666;
}

.btn {
    padding: 10px 15px;
    background-color: #40388E;
    color: #fff;
    border: 0;
    font-size: 16px;
    font-weight: bold;
    border-radius: 36px;

}

.btn:hover {
    background-color: #ADA8D0;
    color: #fff;
    font-weight: 900;
}

label.error {
    background-color: #EBEEF5;
    color: #000 !important;
    padding: 2% !important;
    margin: 0 !important;
    position: absolute;
    top: 45px !important;
    width: 96%;
}

input.error,
select.error {
    margin-bottom: 35px !important;
}

select.error + label.error {
    top: 63px !important;
}

.entryTable {
    font-size: 14px;
    background-color: #fff;
}

.entryTable tr td:last-child {
    width: 200px;
}

.entryTable th {
    color: #fff;
    background-color: #79A782;
    padding: 15px 5px;
}

.entryTable td {
    padding: 5px;
    text-align: center;
}

.entryTable tr {
    padding: 10px 5px;
}

.entryTable tr {
    background-color: rgb(255, 255, 255);
}

.entryTable tr td {
    color: #fff;
}

.entryTable tr td a {
    color: #BE1E62;
    font-family: 'Lato', arial, helvetica, sans-serif;
}

.entryTable tr:nth-child(2n) {
    background-color: rgb(255, 255, 255);
}

.entryTable tr td {
    color: #111;
}

.costBreakdown {
    display: none;
    padding: 10px;
    margin-top: 15px;
    background-color: #c1e1df;
}

.radio {
    position: relative;
}

.leftRadio {
    clear: both;
    float: left;
    margin-right: 20px;
}

.rightRadio {
    float: left;
}

#main.application .btn {
    margin-top: 10px;
    float: right;
    display: block;
}

#main.application h4 {
    font-size: 18px;
    border-bottom: 1px solid #6d8684;
    padding-bottom: 15px;
    margin-left: 2%;
    margin-right: 2%;
}

#main.application form div h4 {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 15px;
}

#main.application input[type="text"],
#main.application input[type="password"],
#main.application input[type="email"] {
    width: 100%;
    display: block;
    border: 1px solid #7b8483;
}

#main.application .dob {
    position: relative;
}

#main.application .dob.help {
    width: 70%;
    float: left;
}

#main.application .dob input {
    width: 20%;
    margin-right: 1%;
    display: inline-block;
}

#main.application .dob .year {
    width: 40%;
}

#main.application select {
    padding: 5px;
    font-size: 10px;
}

#applicationLoading {
    width: 100%;
    height: 100%;
    position: absolute;
    margin-top: -45px;
    background-color: #fff;
    display: none;
}

#applicationLoading img {
    display: block;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

#ownCar_checked,
#ownHome_checked,
#isItOnFinance_checked {
    display: none;
}

#main.application .btn.back {
    float: none;
    background-color: #888;
    clear: both;
    margin-left: 2%;
}

/* home */
.slideBanner {
    width: 400%;
    position: relative;
    left: 0;
    margin-top: 10px;
    -webkit-transition: left ease 1s;
    transition: left ease 1s;
    background-color: #b8e4e2;
}

.slideBanner .slide {
    font-size: 0;
    width: 25%;
    float: left;
    position: relative;
    background-color: #b8e4e2;

}

.slideBanner .slide .imageContent {
    width: 60%;
    float: left;
    position: relative;
}

.slideBanner .slide .imageContent img {
    width: 100%;
}

.slideBanner .slide .textContent {
    padding: 5%;
    font-size: 12px;
    height: 90%;
    margin-left: 60%;
    color: #fff;
}

.slideBanner .slide .textContent h3 {
    color: #fff;
    margin-bottom: 20px;
    font-size: 30px;
}

.slideBanner .slide .textContent p {
    color: #fff;
    font-size: 16px;
    line-height: 22px;
}

.slideBanner .slide .textContent .button {
    padding: 15px 10px;
    background-color: #79A782;
    display: block;
    margin-top: 20px;
    color: #fff;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}

.three-col {
    width: 100%;
    position: relative;
    margin-top: 2.5%;
}

.three-col .col {
    width: 30%;
    margin-left: 5%;
    position: relative;
    float: left;
}

.three-col .col:first-child {
    margin-left: 0;
}

.three-col .col.homeCall {
    position: relative;
}

.three-col .col.homeCall .content {
    height: 90%;
    border: 3px solid #b8e4e2;
}

.three-col .col.homeCall .content a {
    display: block;
    padding: 20px;
}

.three-col .col.homeCall .content a h2 {
    color: #333B45;
    border-bottom: 1px dotted #79A782;
    padding-bottom: 20px;

}

#bankLogicFormsContainer iframe {
    width: 100%;
    height: 800px;
}

.three-col .col.homeCall p {
    font-size: 16px;
    color: #333B45;
    line-height: 22px;
    padding: 20px 0;
}

.three-col .col.homeCall button {
    padding: 10px 15px;
    background-color: #b8e4e2;
    border: 0;
    color: #fff;
}

.three-col .col.homeCall a:hover button {
    background-color: #79A782;
}

#pagination {
    padding-top: 10px;
    margin: 20px 30px;
}

#pagination a {
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 35px;
    color: #FFFFFF;
    text-align: center;
    background-color: #6a6a6a;
}

#pagination a.current {
    background-color: #EBEEF5;
    color: #000;
}

/* Pages */
.mainHeading {
    background-color: #b8e4e2;
    color: #fff;
    padding: 10px 20px;
    border-bottom: 3px solid #79A782;
    margin: 30px 0 20px;
    font-family: 'Lato', arial, helvetica, sans-serif;
    font-weight: normal;
}

.contactForm {
    width: 80%;
    position: relative;
    margin: 0 auto;
}

.contactForm .error {
    position: static;
    top: 0 !important;
}

.contactForm h3 {
    font-weight: normal;
    font-size: 20px;
}

.contactForm .half {
    position: relative;
}

.contactForm label {
    margin-top: 10px;
}

.contactForm input.error {
    margin-bottom: 0 !important;
}

.contactForm input[type="text"],
.contactForm input[type="email"] {
    width: 100%;
}

.contactForm textarea {
    height: 200px;
    resize: none;
    width: 94%;
    border: 1px solid #ccc;
    padding: 3%;
}

#sname {
    display: none;
}

.about p {
    margin-bottom: 2em;
    line-height: 2;
    font-size: 1em;
}

.markets-grid {
    background: #79A782;
    border-radius: 25px;
    color: #fff;
    text-align: center;
    width: 300px;
    height: 300px;
    margin: 2em auto;
    display: block;
    padding-top: 90px;
    max-width: 100%;
    box-sizing: border-box;
}

.markets-grid h3 {
    color: #fff;
    max-width: 90%;
    margin: 0 auto;
}

.markets-grid img {
    width: 93px;
    margin-bottom: 1em;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.markets-grid section {
    height: 93px;
    position: relative;
}

#faqs #main p {
    font-weight: bold;
    margin: 0 30px;
}

#faqs #main li {
    list-style-type: none;
}

#faqs #main p.small {
    font-size: 12px;
    font-weight: normal;
    margin-bottom: 20px;
}


/* FOOTER */
footer {
    height: 116px;
    position: absolute;
    color: #fff;
    bottom: 0;
    width: 100%;
    clear: both;
}

footer .top-footer {
    padding: 20px 11%;
    width: 78%;
    background-color: #79A782;
}

footer p {
    text-align: center;
    color: #fff;
}

footer .sub-footer {
    padding: 10px 11%;
    width: 78%;
    height: 20px;
    background-color: #b8e4e2;
    color: #528986;
}

footer .sub-footer a {
    color: #fff;
}

footer .sub-footer .left {
    float: left;
}

footer .sub-footer .right {
    float: right;
}

.footer4 {
    /*position: relative;*/
    /*bottom: 0;*/
    /*width: 100%;*/
}

/**
	*
	FULLPAGE
	*
**/
#full {
    width: 100%;
}

#full #container {

    width: 100%;
    margin: 0;
    min-width: 300px;
    max-width: none;
}

#headerFullpage {
    position: absolute;
    top: 0;
    z-index: 200;
    /*height: 150px !important;*/
    width: 96%;
    padding: 2%;
    padding-top: 10px;
    background-color: #EDEDED;
}

#headerFullpage #payl8rLogo {
    width: 200px;
    float: left;
    -webkit-transition: width 0.45s;
    transition: width 0.45s;
    max-width: 40%;
}

#headerFullpage .logo.large #payl8rLogo {
    width: 600px;
}

#headerFullpage #nav2 {
    float: right;
}

#payl8rLogo2 {
    max-width: 500px;
    width: 100%;
}

#retailers #fullpage .logoContainer {
    max-width: 500px;
    width: 60%;
    margin: 0 auto;
}

#retailer_slide1 {
    background-image: url('../img/retailers1.jpg');
    background-position: center;
    background-size: cover;
}

#customer_slide1 {
    background-image: url('../img/customers1.jpg');
    background-position: center;
    background-size: cover;
}

#retailer_slide3 p {
    color: #fff !important;
}

#retailer_slide3 h2, #retailer_slide1 h2 {
    text-align: center !important;
    margin-top: 10px;
}

#retailer_slide3 .col_4 {
    margin-top: 15px;
}

#fullpage #retailer_slide3 .col_4 h3 {
    margin-bottom: 37px;
}

#retailer_slide6 {
    background-image: url('../img/retailers5.jpg');
    background-position: center;
    background-size: cover;
}

#retailer_slide3,
#retailer_slide10,
#retailer_slide12,
#customer_slide6,
#contact_slide,
#slide_404,
#terms_slide,
#privacy_slide {
    background: #79A782; /* Old browsers */
    background: -moz-linear-gradient(left, #79A782 0%, #85cd64 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #79A782 0%, #85cd64 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #79A782 0%, #85cd64 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#79A782', endColorstr='#85cd64', GradientType=1); /* IE6-9 */
}

.btn-l {
    border-radius: 3px;
    background: #3C3C3B;
    height: 52px;
    width: 280px;
    align-self: flex-end;
    color: white;
    line-height: 52px;
    display: block;
    transition: border 0.2s, color 0.2s, background-color 0.2s;
    border: 0;
    cursor: pointer;
    margin-top: 54px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 400;
    border-radius: 36px;
}

#UpdatePasswordButton {
    border-radius: 3px;
    background: #423893;
    width: 280px;
    align-self: flex-end;
    color: white;
    line-height: 52px;
    display: block;
    transition: border 0.2s, color 0.2s, background-color 0.2s;
    border: 0;
    cursor: pointer;
    margin-top: 54px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 400;
    border-radius: 36px;
}

#UpdatePasswordButton:hover {
    background: #ADA8D0;
}

.slide-icon {
    width: 64px;
    height: auto;
    display: block;
    margin-bottom: 15px;
}

.center-icon {
    width: 96px;
    margin: 0 auto;
}

.long-icon {
    width: 60%;
}

.blue {
    color: #000000 !important;
}

#fp-nav ul li a span {
    background-color: #5F6D80 !important;
}

#fp-nav ul li a.active span {
    background-color: #423893 !important;
}

.slidedown .float-outer {
    display: table;
    height: 100%;
    width: 100%;
}

.slidedown .half {
    width: 32%;
    padding: 9%;
    display: table-cell;
    float: none;
    vertical-align: middle;
}

.slidedown .half.img-half {
    padding: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100%;
}

.slidedown .half h2, .slidedown .half h1 {
    margin-bottom: 20px;
}

.slidedown .half .btn-l {
    margin: 45px 0 30px;
}

.slidedown p {
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
}

.rightBox {
    float: right;
    width: 300px;
    background-color: #5A2A7D;
    opacity: 0.7;

    padding: 20px;
}

.rightBox * {
    color: #fff;
    font-size: 42px;
}

.fullBox {
    width: 92%;
    padding: 2% 4%;
    background-color: #5A2A7D;
    opacity: 0.7;
    text-align: center;
}

.fullbox * {
    text-align: center;
}

#fullpage h3 {
    font-family: 'Lato', arial, helvetica, sans-serif;
    color: #fff;
    font-size: 38px;
}

#fullpage h5 {
    color: #fff;
    font-size: 24px;
}

.fullBox.blue {
    background-color: #00AE9C;
}

.fullBox.pink {
    background-color: #BE1E62;
}

.fullBox .ultralight {
    font-family: 'Lato', arial, helvetica, sans-serif;
    color: #fff;
    margin: 15px auto 0;
}

.col_5 .subCol .ultralight {
    font-family: 'Lato', arial, helvetica, sans-serif;
}

#login .dob input {
    width: 30%;
}

.slide4 .fp-tableCell {
    vertical-align: top;
}

.slide4 .fullBox {
    margin-top: 70px;
}

.checkmark {
    display: inline-block;
    width: 33px;
    height: 33px;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.checkmark_stem {
    position: absolute;
    width: 5px;
    height: 18px;
    background-color: #ccc;
    left: 16px;
    top: 5px;
}

.checkmark_kick {
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: #ccc;
    left: 12px;
    top: 18px;
}

.logoContainer {
    max-width: 40%;
    margin: -30px auto 0;
}

.col_5 {
    width: 60%;
    margin: 0 auto;
}

.col_4 {
    width: 80%;
    margin: 30px auto 0;
    text-align: center;
}

.col_5 .subCol {
    width: 18%;
    margin: 0 1%;
    float: left;
}

.col_4 .subCol {
    width: 21%;
    margin: 0 2%;
    text-align: center;
    float: left;
}

.col_4 .subCol * {
    text-align: center;
}

.col_5 .subCol .ultralight {
    font-size: 16px;
}

.subCol .slide-icon {
    margin: 0 auto;
}

#fullpage .col_4 h3 {
    font-family: 'Lato', arial, helvetica, sans-serif;
    margin-bottom: 20px;
}

#fullpage .col_4 .subCol h5 {
    font-size: 16px;
    margin: 20px 0;
    font-family: 'Lato', arial, helvetica, sans-serif;
}

#fullpage .col_4 .subCol h5.larger {
    font-size: 20px;
    font-weight: 300;
}

.btn-large {
    width: 300px;
    padding: 20px;
    display: block;
    margin: 20px auto;
    font-size: 52px;
    border: 1px solid #fff;
    color: #fff;
    text-align: center;
}

.btn-med {
    width: 140px;
    padding: 20px;
    display: block;
    margin: 20px 0;
    font-size: 32px;
    border: 1px solid #fff;
    color: #fff;
    text-align: center;
    background-color: transparent;
}

.btn-med.smaller {
    width: auto;
    padding: 10px 15px;
    font-size: 24px;
}

body .btn-med:hover {
    background-color: #fff !important;
    color: rgb(0, 174, 156) !important;
}

.btn-large:hover {
    background-color: #fff;
    color: #3C3C3B;
}

#retailers .btn-large {
    background-color: #fff;
    color: #3C3C3B;
}

#retailers .btn-large:hover {
    background-color: transparent;
    color: #fff;
    border: 1px solid #fff;
}

#container {
    display: none;
}

.container {
    height: 100%;
}

#nav2 {
    padding-left: 20px;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 8px;
}

#nav2 a {
    float: right;
    position: relative;
    color: #000000;
    height: 50px;
    font-size: 18px;
    margin-right: 25px;
    border-radius: 40px;
    line-height: 48px;
    width: auto;
    display: block;
    padding: 0 20px;
    background-color: transparent;
}

#nav2 .navButton {
    cursor: pointer;
    float: right;
    margin: 0;
}

#burgerHeader {
    color: #000000;
}

#slidebar {
    position: fixed;
    display: table;
    left: 100%;
    width: 100%;
    height: 100%;
    -webkit-transition: left ease 0.44s;
    transition: left ease 0.44s;
    z-index: 999;
    background: #EDEDED;
}

#slidebar .inner {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    display: grid;
    grid-template-columns: 33% 33% 33%;
}

#menuClose {
    width: 48px;
    height: auto;
    position: absolute;
    top: 30px;
    cursor: pointer;
    right: 30px;
}

#slidebar .logo {
    top: 30px;
    left: 30px;
    position: absolute;
}

#slidebar ul {
    list-style-type: none;
    margin-left: 30%;
}

#slidebar li,
#slidebar li a {
    font-size: 40px;
    font-weight: 300;
    line-height: 50px;
    margin-bottom: 10px;
}

#SideBarDashboard,#SideBarOrders,#SideBarStatement,#SideBarPaymentCard,#SideBarShopifyIntegration,#SideBarChangePassword,#SideBarLogout,#SideBarResource{
    position: relative;
    margin: 0px -6px -58px;
    line-height: 70px;
    color: #3C3C3B;
    padding-left: 5px;
    width: fit-content;
}

#underLineSideBarDashboard, #underLineSideBarOrders, #underLineSideBarStatement, #underLineSideBarPaymentCard,
#underLineSideBarShopifyIntegration,#underLineSideBarChangePassword,#underLineSideBarLogout,#underLineSideBarResource,
#underLineSideBarYourTitleResourcesResourceHub,#underLineSideBarPayl8rTitleResourceHub,#underLineSideBarYourTitleResourceHub {
    height: 14px;
    background: #ADA8D0;
    z-index: -1;
    padding-bottom: 0rem;
    display: inline-block;
}

#underLineSideBarDashboard {
    width: 193px;
    opacity: 0;
}

#underLineSideBarOrders {
    width: 123px;
    opacity: 0;
}

#underLineSideBarStatement {
    width: 195px;
    opacity: 0;
}
#underLineSideBarResource{
	width: 242px;
	opacity: 0;
}

#underLineSideBarPaymentCard {
    width: 242px;
    opacity: 0;
}

#underLineSideBarShopifyIntegration {
    width: 325px;
    opacity: 0;
}

#underLineSideBarChangePassword {
    width: 303px;
    opacity: 0;
}
#underLineSideBarYourTitleResourcesResourceHub{
	background: #FBC857;
	width: 198px;
	margin-left: 70px;;
}
#underLineSideBarPayl8rTitleResourceHub{
	background: #77A681;
	width: 117px;
	margin-left: 70px;
}

#underLineSideBarYourTitleResourceHub{
	width: 75px;
	margin-left: 75px;
}

#underLineSideBarLogout {
    width: 121px !important;
    opacity: 0;

}

.iconsSideBar {
    margin-top: 30px !important;
}

.iconSideBar {
    width: 64px;
    height: 64px;
}

#slidebar li.small,
#slidebar li.small a {
    font-size: 16px;
    line-height: 30px;
}

#slidebar li .btn-l,
#slidebar li .btn-l:hover {
    font-size: 18px;
    color: #333B45;
    font-weight: 600;
    margin: 20px 0;
}

#fullpage h2.fullLarge, #retailer_slide1 h1.fullLarge {
    font-size: 60px;
    max-width: 60%;
    text-align: center;
    margin: 0 auto;
    font-weight: 300;
    color: #fff;
}

#fullpage h2.medium-large {
    font-size: 40px;
    font-weight: 300;
    color: #fff;
}

.med {
    font-weight: 300;
}

#fullpage h3 {
    font-size: 28px;
    max-width: 65%;
    font-family: 'Lato', arial, helvetica, sans-serif;
    text-align: center;
    margin: 0 auto;
    font-weight: 300;
}

#home #homeButton,
#retailers #retailersButton,
#login #logregButton {
    background-color: #fff;
    color: #fff;
}

#nav2 a:hover {
    background-color: #fff;
    color: #3C3C3B;
}


#signingBlackLogo {
    width: 100%;
    height: auto;
}


.headerBackground {
    opacity: 0.6;
    position: absolute;
    width: 100%;
    height: 118px;
    top: 0;
    left: 0;
    z-index: -10;
}

#fullpage {
    display: none;
}

#fullpage label {
    margin-bottom: 10px;
    margin-top: 20px;
    font-weight: 300;
}

#fullpage select,
#fullpage option {
    padding: 10px;
}

#fullpage textarea {
    height: 100px;
    width: auto;
    display: block;
    padding: 1%;
    width: 98%;
}

#faqs .headerFullpage {
    height: auto;
}

ul.accordion {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.accordion label + input[type='radio'] {
    display: none;
}

ul.accordion li {
    color: #423893;
    border-bottom: 1px solid #fff;
    padding-bottom: 15px;
}

ul.accordion li p {
    color: #222;
}

ul.accordion label {
    color: #423893;
    display: block;
    padding: 10px;
    font-size: 16px;
    font-family: 'Lato', arial, helvetica, sans-serif;
}

ul.accordion label:hover {
    cursor: pointer;
}

ul.accordion div.content {
    overflow: hidden;
    padding: 0 10px;
    display: none;
    color: #222;
}

ul.accordion label + input[type='radio']:checked + div.content {
    display: block;
}

#faqs_slide .half {
    padding: 10px;
    box-sizing: border-box;
    width: 50%;
    text-align: center;
}

.btn-blk {
    border-radius: 50px;
    color: #fff;
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    padding: 0 25px;
    position: static;
    font-weight: 400;
    display: inline-block;
    vertical-align: bottom;
    cursor: pointer;
    background-color: #333B45;
}

#login_slide {
    background: #79A782; /* Old browsers */
    background: -moz-linear-gradient(left, #79A782 0%, #85cd64 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #79A782 0%, #85cd64 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #79A782 0%, #85cd64 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#79A782', endColorstr='#85cd64', GradientType=1); /* IE6-9 */

}

.slide-inner {
    border-radius: 10px;
    max-width: 62%;
    background-color: #fff;
    -webkit-box-shadow: 0 3px 4px 0 rgba(133, 133, 133, 0.37);
    -moz-box-shadow: 0 3px 4px 0 rgba(133, 133, 133, 0.37);
    box-shadow: 0 3px 4px 0 rgba(133, 133, 133, 0.37);
    margin: 0 auto;
    padding: 3%
}

#SITable img {
    margin-left: 10px;
    width: 14px;
    height: auto;
}

.standard-input,
#opc_input {
    padding: 14px;
    border: 0;
    border-bottom: 1px solid #ddd;
    display: block;
    width: 100%;
    font-size: 14px;
    margin-bottom: 10px;
    text-align: center;
    box-sizing: border-box;
    -webkit-transition: border 0.2s, color 0.2s, background-color 0.2s;
    transition: border 0.2s, color 0.2s, background-color 0.2s;
    background-repeat: no-repeat;
    background-size: auto 22px;
    background-position: 97%;
    background-image: none;
    margin-top: 40px;
    border-radius: 36px;
}

#fullpage .slide-inner p,
#fullpage .slide-inner h2,
#fullpage .slide-inner h3,
#fullpage .slide-inner h4,
#fullpage .slide-inner h5,
#fullpage .slide-inner a,
#fullpage .slide-inner span,
#fullpage .slide-inner {
    color: #333B45;
}

.slide-inner .half {
    padding: 2% 4%;

    width: 20%;

}

.btn-blue,
.btn-blue:hover {
    background-color: #000000;
}

#full .contactForm h5 {
    font-size: 22px;
    font-weight: 400;
    text-align: center;
}

#full .contactForm p {
    color: #898D93;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    font-weight: 300;
    margin-top: 20px;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}

#full .contactForm select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    border-bottom: 1px solid #ddd;
    background: url('/frontend/img/payl8r-down-c.png') no-repeat;
    background-position: 97% center;
    text-align: center !important;
    background-size: 30px;
    margin-top: 20px;
    padding: 16px 10%;
    width: 100% !important;
}

#full .contactForm .standard-input {
    text-align: left;
    padding: 16px 10%;
}

#full .contactForm textarea {
    padding: 16px 10%;
    width: 80%;
    border-radius: 10px;
    margin-top: 40px;
}

.slidedown .contactForm .half {
    vertical-align: top;
    text-align: center;
}

.slidedown .contactForm .half .slide-icon {
    width: 32px;
    height: auto;
    margin: 30px auto 10px;
}

.hero {
    height: 300px;
    line-height: 300px;
    font-size: 60px;
    position: relative;
    background: #79A782; /* Old browsers */
    background: -moz-linear-gradient(left, #79A782 0%, #85cd64 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #79A782 0%, #85cd64 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #79A782 0%, #85cd64 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#79A782', endColorstr='#85cd64', GradientType=1); /* IE6-9 */
    color: #fff;
    font-weight: 300;
    font-family: 'Lato', arial, helvetica, sans-serif;
    text-align: center;
}

.hero .hero-buttons {
    position: absolute;
    bottom: 30px;
    width: 320px;
    margin: 0 auto;
    text-align: center;
    width: 100%;
}

.hero .hero-buttons .hero-button {
    border-radius: 50px;
    color: #fff;
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    padding: 0 25px;
    position: static;
    font-weight: 400;
    display: inline-block;
    vertical-align: bottom;
    cursor: pointer;
}

.hero .hero-buttons .hero-button.selected,
.hero .hero-buttons .hero-button:hover {
    color: #423893;
    background-color: #fff;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */
.hidden {
    display: none !important;
    visibility: hidden;
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

.graphSection {
    display: flex;
    justify-content: flex-start;
}

.relative {
    position: relative;
}

.ca {
    text-align: center;
    font-weight: 400;
}

#fullpage #accounts_slide label.error {
    padding: 1% 2% !important;
    font-size: 17px;
}

/* notifications */
#notificationsBar {
    position: relative;
    margin-bottom: 0;
}

#notificationsBar .errors,
#notificationsBar .warnings,
#notificationsBar .successes,
#notificationsBar .generals {
    margin-top: 2px;
}

#notificationsBar .errors p,
#notificationsBar .warnings p,
#notificationsBar .successes p,
#notificationsBar .generals p {
    padding: 10px 40px;
    color: #fff;
}

#notificationsBar .errors p {
    background-color: #aa2222;
}

#notificationsBar .warnings p {
    background-color: #aaaa22;
}

#notificationsBar .successes p {
    background-color: #22aa22;
}

#notificationsBar .generals p {
    background-color: #222;
}

#notificationsBar div p:nth-child(2n) {
    opacity: 0.9 !important;
}

.hero-buttons a {
    color: #fff;
}

.hero-buttons .hero-button:hover a,
.hero-buttons .selected a {
    color: #423893;
}

.info-box {
    width: 48%;
    margin: 1%;
    float: left;
    background-color: rgba(12, 188, 198, 1);
    color: #fff;
    position: relative;
    border-radius: 4px;
}

#TotalschartContainer {
    z-index: 1;
}

.box {
    margin-top: 20px;
}

.info-box a {
    padding: 15px;
    height: 100%;
    display: block;
    background-color: rgba(0, 0, 0, 0.4);
    cursor: default;
}

.info-box.important a {
    background-color: transparent;
    cursor: pointer;
}

.info-box.important:hover a {
    background-color: rgba(0, 255, 145, 0.5);
}

.info-box h4,
.info-box p {
    color: #fff;
    text-align: center;
}

.info-box h4 {
    font-weight: 300;
}

.progress-meter {
    border-radius: 30px;
    height: 60px;
    width: 100%;
    background-color: #F8F8FE;
    position: relative;
    overflow: hidden;
    margin-top: 24px;
}

.progress-meter .stage {
    background-color: #40388E;
    opacity: 0.8;
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 10;
}

.progress-meter-inner {
    position: relative;
    z-index: 20;
    padding-top: 6px;
}

.progress-meter-inner * {
    text-align: center;
}

.order-section {
    padding: 15px;
    position: relative;
}

.order-section.order-details {
    background-color: #f8f8f8;
}

.order-section .t {
    position: absolute;
    top: -12px;
    padding: 2px;
    background-color: #fff;
    font-size: 20px;
    font-weight: 300;
}

.detail {
    margin-top: 10px;
    font-size: 16px;
    font-weight: 400;
}

.line {
    margin-top: 10px;
    border-bottom: 1px solid #ddd;
}

.detail strong {
    font-weight: 700;
    font-size: 18px;
}

.detail.error,
.detail.error * {
    color: red !important;
    font-weight: bold !important;
    cursor: pointer;
}

.detail-expander {
    padding: 4px 15px;
    background-color: #F8F8F8;
    margin-bottom: 4px;
}

.detail-expander strong {
    display: block;
}

.detail-expander .more {
    display: none;
}

.detail-expander.expanded .more {
    display: block;
    padding: 4px;
    background-color: rgba(0, 0, 0, 0.075);
    position: relative;
}

#retailer_orders table {
    margin: 20px auto 10px;
    width: 100%;
    min-width: 820px;
}

#retailer_orders table tr td {
    padding: 15px;
}

#retailer_orders table tr {
    background-color: #fff;
}

#retailer_orders table tr:nth-child(2n) {
    background-color: #fdfdfd;
}

#retailer_orders .tabs {
    background-color: #fff;
    width: 100%;
    padding-top: 20px;
}

#retailer_orders .tab {
    float: left;
    margin-right: 2px;
    cursor: pointer;
    font-size: 11px;
    padding: 10px;
}

#retailer_orders .tab.selected {
    background-color: #65c6c0;
}

#retailer_orders .button-bar {
    text-align: center;
    margin-top: 20px;
}

#retailer_orders .button-bar .button {
    border: 0;
    background-color: #EBEEF5;
    color: #000;;
    padding: 10px;
    text-align: center;
    border-radius: 3px;
    display: inline-block;
    margin-bottom: 7px;
}

#retailer_orders .button-bar .button.selected {
    background-color: #000000;
    color: #EBEEF5;
}

.retailer-header {
    /*background: #423893; !* Old browsers *!*/
    height: 45px !important;
    position: relative !important;
}

#retailer_orders h3,
#retailer_orders h4 {
    text-align: center;
}

#graph_form {
    text-align: center;
    margin-top: 20px;
}

/* HELPERS */
.payl8r-helper-button {
    width: 25px;
    height: 25px;
    border-radius: 15px;
    color: #fff;
    background-color: #EBEEF5;
    text-align: center;
    line-height: 25px;
    font-weight: 700;
    display: inline-block;
    margin-right: 10px;
    position: relative;
    cursor: pointer;
}

.payl8r-helper-button.payl8r-selected .payl8r-helper-text {
    display: block;
}
.btnDanger{
    color: #fff;
    background-color: #d9534f;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    -ms-touch-action: manipulation;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    border-bottom: none;
    border-bottom-style: none !important;
    border: none !important;
    border-radius: 36px;
}

.btnDefault{
    color: #FFFFFF;
    background-color: #40388E;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    -ms-touch-action: manipulation;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    border-bottom: none;
    border-bottom-style: none !important;
    border: none !important;
    border-radius: 36px;
}

.btnDanger{
    background-color: #de5d5a;
    border-color: #de5d5a;
}
.btnDefault:hover{
    background-color: #ADA8D0;
    border-color: #ADA8D0;

}

.payl8r-helper-text {
    display: none;
    position: absolute;
    background-color: #EBEEF5;
    border: 1px solid #EBEEF5;
    color: #333B45;
    padding: 15px;
    top: 35px;
    left: 35px;
    line-height: 20px;
    font-size: 12px;
    z-index: 5;
    width: 270px;
    text-align: left;
}

#orders_table td {
    font-size: 12px;
}
/* ==========================================================================
   resource-hub page
   ========================================================================== */
.titleResourceHub{
	position: relative;
	margin: 5px 16px -26px 70px;
	/*line-height: 55px;*/
	font-family: 'Lato', arial, helvetica, sans-serif;
	font-size: 40px;
	font-weight: 400;
}
#allGuidesText,#brokerText,#iarText,#marketingText{
	position: relative;
	margin: -13px 9px -30px 0px;
	line-height: 59px;
	font-family: 'Lato', arial, helvetica, sans-serif;
	font-size: 20px;
	font-weight: 900;
}
#underLineAllGuides,#underLineBroker,#underLineIar,#underLineMarketing{
	height: 14px;
	background: #ADA8D0;
	z-index: -1;
	padding-bottom: 0rem;
	display: inline-block;
	width: 94px;
}
#underLineMarketing{
	background: #ADA8D0;
	width: 175px;
}
#underLineBroker{
	background: #77A681;
	width: 127px;
}

#underLineIar{
	background: #FBC857;
	width: 99px;
}
.arrow{
	display: flex;
	justify-content: end;
}
.topSectionOfSectionThumbnail{
	display: grid;
	grid-template-columns: auto auto;
	width: 90%;
	margin-left: 67px;
}
#payl8rTitleResourceHub{
	font-weight: 900;
}
.separatorResourceHub,.bottomSeparatorResourceHub{
	width: 90%;
	margin-left: 67px;
}
.downArrowAllGuides,.upArrowAllGuides,.downArrowBroker,.upArrowBroker,.upArrowIar,.downArrowIar,.downArrowMarketing,.upArrowMarketing{
	width: 25px;
	height: 25px;
	display: none;
}
.upArrowAllGuides,.upArrowBroker,.upArrowIar,.upArrowMarketing{
	display: block;
}


.textResourceHub{
	margin-top: 16px;
	margin-left: 70px;
	text-align: justify;
}

.sectionsResourceHub{
	display: grid;
	grid-template-columns: auto auto auto auto auto;
	margin: 20px;
}

.topSectionResourceHub{
	display: grid;
	grid-template-columns: 80% auto;
	width: 100%;
}
.bottomSectionResourceHub{
	margin-top: 30px;
}

.cornerIllustration{
	width: 100%;
}
.leftSectionResourceHub{
 	display: flex;
	flex-direction: column;
}

.rightSectionResourceHub{
	display: flex;
	justify-content: end;
}
.allGuidesSection,.brokerSection,.iarSection,.marketingSection{
	display: none;
}
.allGuidesSectionThumbnail,.brokerSectionThumbnail,.iarSectionThumbnail, .marketingSectionThumbnail{
	padding: 0px 45px 0px 45px;
	display: grid;
	grid-template-columns: auto auto auto auto auto;
	margin: 20px;

}


.thumbnail{
	margin-top: 20px;
}
.thumbnailResourceHub {
	border: 1px solid #ddd; /* Gray border */
	border-radius: 4px;  /* Rounded border */
	padding: 5px; /* Some padding */
	width: 150px; /* Set a small width */
}

/* Add a hover effect (blue shadow) */
.thumbnailResourceHub:hover {
	box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
.downloadIcon,.magnifyingGlassIcon {
	padding: 2px; /* Some padding */
	width: 20px; /* Set a small width */
}
/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */

@media only screen and (max-width: 780px) {
    #fullpage #accounts_slide .hero,
    #fullpage #accounts_passwordchange_slide .hero,
    #fullpage #account_dashboard_slide .hero,
    #fullpage #customer_order_details_slide .hero {
        font-size: 40px;
    }

    #underLineSideBarDashboard {
        width: 97px;
        margin-top: 24px;
    }

    #underLineSideBarOrders {
        width: 63px;
        margin-top: 24px;
    }

	#underLineSideBarResource {
		width: 122px;
		margin-top: 24px;
	}

    #underLineSideBarStatement {
        width: 99px;
        margin-top: 24px;
    }

    #underLineSideBarPaymentCard {
        margin-top: 24px;
        width: 122px;
    }

    #underLineSideBarShopifyIntegration {
        width: 163px;
        margin-top: 24px;
    }

    #underLineSideBarChangePassword {
        width: 152px;
        margin-top: 24px;
    }

    #underLineSideBarLogout {
        width: 60px !important;
        margin-top: 24px;
    }
}

@media only screen and (min-width: 620px) {
    input[type="checkbox"] + label span {
        background-color: transparent;
    }

    header .main-nav a {
        display: inline-block;
    }

    #nav_account {
        float: right;
    }

    .display-container {
        width: 310px;
        left: -40px !important;
    }

}

@media only screen and (min-width: 820px) {
    header img {
        margin: 0 0 20px 0;
    }

    header .main-navs {
        float: left;
    }

    header .main-nav, header .other-nav {
        width: 150px;
    }
}

@media only screen and (max-width: 1420px) {
    .slideBanner .slide .textContent h3 {
        font-size: 20px;
    }

    .slideBanner .slide .textContent p {
        font-size: 12px;
        line-height: 18px;
    }
}

@media only screen and (max-width: 1180px) {
    .slideBanner .slide .imageContent {
        float: none;
        width: 100%;
    }

    .slideBanner .slide .textContent {
        margin: 0;
    }
}

@media only screen and (max-width: 960px) {
    #fp-nav {
        display: none;
    }

    .hide4mobile {
        display: none;
    }

    #nav_main {
        display: none;
    }

    #nav_mobile {
        display: block;
    }
}

@media only screen and (max-width: 880px) {
    #home .hideForMobile {
        display: none;
    }

    .slide-inner {
        max-width: 90% !important;
    }

    #notifications .error {
        margin: 5% 4%;
        font-size: 18px;
    }
}

@media only screen and (max-width: 800px) {
    .hide800 {
        display: none;
    }

    #main {
        width: 93%;
    }

    .three-col .col {
        width: 100%;
        margin: 0 0 20px;
    }

    footer .sub-footer {
        height: 40px;
    }

    footer .sub-footer .left,
    footer .sub-footer .right {
        float: none;
        font-size: 10px;
    }

    .non-mobile {
        display: none;
    }

    .mainlogo {
        margin-left: 15px;
    }

    #nav_account {
        margin-right: -14%;
    }

    #login {
        margin: 0;
    }

    .logincontainer {
        top: 40px;
    }

    div.half {
        width: 96%;
    }

    #form_stage {
        display: none;
    }

    #main.application {
        min-width: 300px;
    }
}

.how-it-works .l-row h2 {
    margin-top: 3em;
}

.how-it-works p {
    margin-top: 1em;
}

.how-it-works img {
    margin-top: 2em;
    margin-bottom: 2em;
}

.white {
    color: #fff;
}

.white * {
    color: #fff;
}

.white li {
    padding-bottom: 10px;
}

.whitePs p {
    color: #fff;
}

@media (max-width: 767px) {
    .how-it-works img {
        display: none;
    }

    #slidebar ul {
        margin-left: 30px;
    }

    #slidebar .logo {
        display: none;
    }

    #slidebar li a,
    #slidebar li {
        line-height: 30px;
        font-size: 20px;
    }

    #slidebar li.small a {
        line-height: 24px;
        font-size: 14px;
    }

    .btn-l {
        width: 77%;
    }

    #retailerLoginButton.btn-l, #customerLoginButton.btn-l {
        width: 100%;
    }

    #slidebar .btn-l {
        line-height: 50px;
    }
}

@media screen and (min-width: 800px) and (max-width: 1200px) {
    #login .btn-med {
        font-size: 20px;
        width: auto;
        padding: 10px 15px;
    }
}

@media (max-width: 1190px) {
    .slidedown .float-outer {
        display: block;
    }

    .slidedown .half {
        width: 100% !important;
        display: block !important;
        height: 50%;
        box-sizing: border-box;
    }

    .slidedown .half.img-half {
        width: 100%;
        height: 50%;
        display: none !important;
    }

    .slide-icon {
        margin-top: 30px;
    }
}

@media (max-width: 640px) {
    .btn-med {
        font-size: 20px;
        width: auto;
        padding: 10px 15px;
    }

    .hideForMobile {
        display: none !important;
    }

    #headerFullpage #payl8rLogo {
        margin-top: 10px;
        margin-left: 10px;
        width: 160px;
    }

    .rightBox {
        float: right;
        width: 92%;
        padding: 2% 4%;
        background-color: #5A2A7D;
        opacity: 0.7;
        text-align: center;
        padding: 20px;
    }

    .rightBox * {
        color: #fff;
        font-size: 30px;
    }

    .fullBox {
        width: 92%;
        padding: 2% 4%;
        background-color: #5A2A7D;
        opacity: 0.7;
        text-align: center;
    }

    .fullbox * {
        text-align: center;
    }

    #fullpage h3 {
        font-family: 'Lato', arial, helvetica, sans-serif;
        color: #fff;
        font-size: 28px;
    }

    #fullpage h5 {
        color: #fff;
        font-size: 15px;
    }

    .ultralight {
        font-size: 11px;
    }

    .col_4, .col_5 {
        width: 96%;
    }

    .btn-large {
        max-width: 80%;
    }

    #fullpage h2.fullLarge, #retailer_slide1 h1.fullLarge {
        font-size: 38px;
    }

    #retailer_slide1 h2.fullLarge {
        font-size: 28px;
    }

    #fullpage h2.medium-large {
        font-size: 28px;
    }

    #fullpage h3.med {
        font-size: 24px;
    }

    #fullpage .col_4 .subCol h5 {
        font-size: 14px;
    }

    #fullpage .col_4 .subCol h5.larger {
        font-size: 16px;
    }
}

@media (max-width: 570px) {
    .hide570 {
        display: none !important;
    }

    .col_5 .subCol .ultralight {
        font-size: 12px;
    }

    .col_5 .subCol:nth-child(1) {
        margin-left: 33%;
    }

    .col_5 .subCol:nth-child(3) {
        margin-left: 22%;
        clear: left;
    }

    #pagination a {
        width: 20px;
        font-size: 8px;
    }

    .box {
        margin-top: 60px;
    }

    body {
        font-size: 10px;
    }

    #graph {
        margin-top: 10px;
    }

    .retailerLogo {
        height: 30px !important;
    }

    #burgerHeader {
        width: 30px !important;
    }

    .box {
        margin-top: 100px;
    }

}

@media (max-width: 430px) {
    #headerFullpage #payl8rLogo {
        width: 130px;
    }

    #nav2 #logregButton {
        font-size: 14px;
        padding-top: 4px;
    }

    .logoTag {
        display: none;
    }

    #fullpage h2.fullLarge, #retailer_slide1 h1.fullLarge {
        font-size: 30px;
    }

    #retailer_slide1 h2.fullLarge {
        font-size: 18px;
    }

    #fullpage h2.medium-large {
        font-size: 20px;
    }

    #fullpage h3.med {
        font-size: 18px;
    }

    #fullpage .col_4 .subCol h5 {
        font-size: 12px;
    }

    #fullpage .col_4 .subCol h5.larger {
        font-size: 14px;
    }
}

/* ==========================================================================
   Print styles.
   ========================================================================== */
@media print {
    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a, a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    .ir a:after,
    a[href^="javascript:"]:after, a[href^="#"]:after {
        content: "";
    }

    pre, blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr, img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p, h2, h3 {
        orphans: 3;
        widows: 3;
    }

    h2, h3 {
        page-break-after: avoid;
    }
}

/* ==========================================================================
   Customer Accounts
   ========================================================================== */

.customer_account_banner {
    height: 100px;
}

.logo_customer_account {
    margin: 0;
    margin-left: 10px;
}

#content_wrapper_container {

}

#content_container_left {

}

#content_container_right {

}

#content_container_left .content_block, #content_container_right .content_block {

}

.retailer-plugin-logo {
    margin-top: 30px;
    /*height: 50px;*/
    /*width: 32%;*/
    display: block;
    text-align: center;
    /*position: relative;*/
}

#retailer_slide1 h1, #retailer_slide1 h2 {
    color: white;
    font-weight: 300;
}

#retailer_slide1 h1 {
    max-width: 90% !important;
}

#retailer_slide1 .button-container, #retailer_slide4 .button-container {
    text-align: center;
    margin-top: 60px;
}

#retailer_slide1 .button-container .btn-l,
#retailer_slide2 .button-container .btn-l,
#retailer_slide8 .button-container .btn-l,
#retailer_slide9 .button-container .btn-l,
#retailer_slide5 .button-container .btn-l,
#retailer_slide4 .button-container .btn-l,
#retailer_slide7 .button-container .btn-l,
#retailer_slide11 .button-container .btn-l {
    color: white;
    padding: 3px;
    margin: 15px 30px 0 30px;
    display: inline-block;
    background: none;
    background-color: rgb(12, 188, 198);
    width: 150px;
    -webkit-transition: none;
    transition: none;
    text-indent: 0;
}

#retailer_slide1 .button-container .btn-l:hover,
#retailer_slide2 .button-container .btn-l:hover,
#retailer_slide8 .button-container .btn-l:hover,
#retailer_slide9 .button-container .btn-l:hover,
#retailer_slide5 .button-container .btn-l:hover,
#retailer_slide4 .button-container .btn-l:hover,
#retailer_slide7 .button-container .btn-l:hover,
#retailer_slide11 .button-container .btn-l:hover {
    background-color: rgb(194, 237, 36);
    color: rgb(51, 59, 69);
}

#retailer_slide2 .button-container .btn-l,
#retailer_slide8 .button-container .btn-l,
#retailer_slide9 .button-container .btn-l,
#retailer_slide5 .button-container .btn-l,
#retailer_slide7 .button-container .btn-l,
#retailer_slide11 .button-container .btn-l {
    margin-left: auto !Important;
    margin-right: auto !important;
    width: 50%;
    display: block;
}


#retailer_slide2 .button-container,
#retailer_slide8 .button-container,
#retailer_slide9 .button-container,
#retailer_slide5 .button-container,
#retailer_slide11 .button-container {
    padding-top: 10px !important;
}

#retailer_slide10 p a {
    font-size: 30px !important;
}

#retailer_slide10 p a img {
    height: 32px;
}


@media only screen and (max-width: 780px) {
    #retailer_slide10 p a {
        font-size: 20px !important;
    }

    #retailer_slide10 p a img {
        height: 22px;
    }
}

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

}
@media only screen and (min-width: 820px) {

}

@media only screen and (max-width: 1420px) {

}
@media only screen and (max-width: 1200px) {

	.allGuidesSectionThumbnail, .brokerSectionThumbnail, .iarSectionThumbnail,.marketingSectionThumbnail {
		grid-template-columns: auto auto auto;
	}

}

@media only screen and (max-width: 1180px) {

}

@media only screen and (max-width: 960px) {
	.separatorResourceHub,.topSectionOfSectionThumbnail,.bottomSeparatorResourceHub{
		width: 85%;
	}
	.allGuidesSectionThumbnail, .brokerSectionThumbnail, .iarSectionThumbnail,.marketingSectionThumbnail {
		grid-template-columns: auto auto;
	}
}

@media only screen and (max-width: 880px) {

}

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

}

@media (max-width: 767px){
    
}

@media (max-width: 600px){
	.titleResourceHub{
		font-size: 30px;
	}
	#underLineSideBarYourTitleResourceHub {
		width: 57px;
	}
	#underLineSideBarPayl8rTitleResourceHub {
		width: 85px;
	}
	.allGuidesSectionThumbnail, .brokerSectionThumbnail, .iarSectionThumbnail,.marketingSectionThumbnail {
		grid-template-columns: auto;
	}

	#underLineSideBarYourTitleResourcesResourceHub {
		width: 147px;
	}
	.separatorResourceHub,.topSectionOfSectionThumbnail,.bottomSeparatorResourceHub{
		width: 80%;
	}
	.cornerIllustration{
		display: none;
	}
	.topSectionResourceHub {
		grid-template-columns: 90%;
	}
	p{
		/*font-size: 9px;*/
	}
}

@media (max-width: 450px){
	.separatorResourceHub,.topSectionOfSectionThumbnail,.bottomSeparatorResourceHub{
		width: 70%;
	}

}

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

}

@media (max-width: 1190px) {

}

@media (max-width: 640px) {

}

@media (max-width: 570px) {

}

.retailer_slide4 p {
    font-size: 18px !important;
}

@media (max-width: 430px) {
    #retailer_slide1 h1.fullLarge {
        font-size: 30px;
    }

    #retailer_slide1 h2 {
        font-size: 20px;
        text-align: center;
    }

    #retailer_slide1 .button-container {
        margin-top: 30px;
    }

    #retailer_slide1 .button-container .btn-l {
        margin-top: 10px;
    }

    .retailer_slide4 p {
        font-size: 14px !important;
    }
}


@media (max-width: 320px) {

    .retailer-plugin-logo {
        margin-top: 5px;
        display: block;
        text-align: center;
    }

    .retailer-plugin-logo img {
        height: 20px;
    }

    #retailer_slide4 .button-container {
        margin-top: 10px;
    }

    #retailer_slide10 p a {
        font-size: 18px !important;
    }

    #retailer_slide10 p a img {
        height: 20px;
    }
}


#contract_preview h1, #contract_preview h2, #contract_preview h3, #contract_preview h4, #contract_preview h5, #contract_preview h6, #contract_preview p, #contract_preview table, #contract_preview caption, #contract_preview tbody, #contract_preview tfoot, #contract_preview thead, #contract_preview tr, #contract_preview th, #contract_preview td {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    /*vertical-align: baseline;*/
}

#contract_preview table {
    border-collapse: collapse;
    border-spacing: 0;
}

#contract_preview {
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 10px;
    height: 200px;
    width: 100%;
    margin-bottom: 10px;
    border: 1px solid rgba(128, 128, 128, .81);
}

#contract_preview #contractDoc li {
    margin-left: 20px !important;
}


.itemised-table td, .itemised-table th {
    width: auto;
    vertical-align: top;
    background-color: transparent !important;
}

.itemised-table tfoot td {
    font-weight: bold;
}

.itemised-table tr, .itemised-table, .itemised-table td, .itemised-table th {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    /*border-bottom: 1px solid rgb(128, 128, 128) !important;*/
}

.itemised-description {
    text-align: left !important;
}


.itemised-quantity, .itemised-price {
    text-align: right !important;
    padding-left: 8px !important;
}

.itemised-price {
    white-space: nowrap;
}