@media (max-width: 600px) {
    #sapo-logo {
        width: 200%;
    }

    #sapo-banner-image {
        display: none;
    }

    #heading-div {
        display: none;

    }

    #mobile-heading-div {
        display: inline!important;

    }

    #mobile-landing-page-heading {
        font-size: 1.8em!important;
        text-align: center;
    }

    #grey-nav {
        display: none;
    }

    #mobile-grey-nav {
        display: inline!important;
    }

    #second-fold-div {
        display: none;
    }

    #mobile-second-fold-div {
        display: inline!important;
    }

    #ect-div {
        display: none;
    }

    #mobile-ect-div {
        display: inline!important;
    }

    #benefits-div {
        display: none;
    }

    #mobile-benefits-div {
        display: inline!important;
    }

    #ect-2-div {
        display: none;
    }

    #mobile-ect-2-div {
        display: inline!important;
    }

    #how-it-works {
        display: none;
    }

    #mobile-how-it-works {
        display: inline!important;
    }

    .footer {
        display: none;
    }
}

body, html {
    height: 100%;
}

body {
    overflow-x: hidden;
    overflow-y: scroll;
    font-family: Arial,Helvetica,sans-serif;
}

.layout {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    margin: 0;
}

img {
    border: 0;
}

li {
    display: inline;
    list-style: none;
}

.vertical-center {
    margin: 0;
    position: absolute;
    top: 50%;
    text-align: center;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.pt-serif {
    font-family: Serif;
}

.poppins {
    font-family: Poppins;
}

.home-header {
    position: relative;
    left: 12em;
    top: 5em;
}

.main-content {
    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 1s; /* Firefox < 16 */
    -ms-animation: fadein 1s; /* Internet Explorer */
    -o-animation: fadein 1s; /* Opera < 12.1 */
    animation: fadein 1s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-duration: 1s;
}

.app {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: max-content max-content min-content max-content;
    grid-template-rows: -webkit-max-content -webkit-max-content -webkit-min-content -webkit-max-content;
    grid-template-rows: max-content max-content min-content max-content;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    align-items: start;
    justify-content: stretch;
}

header {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows:  100px auto;
    grid-template-areas:
            "header";
}

.header--sapo {
    display: flex;
    align-items: center;
    grid-area: header;
    box-shadow: 0 4px 2px -2px gray;
    position: absolute;
    width:100%;
    background: rgba(233, 233, 232, .8);
    padding: 15px;

}

.wrapper-header {
    display: inline-grid;
    grid-template-columns: 1fr 3fr;
    grid-template-areas: "logo menu";
    max-width:1170px;
    width: 100%;
    grid-gap: 20px;
    margin: 0 auto;

}

.logo-sapo {
    grid-area: logo;
    place-self: start;
}

.logo-sapo img {
    max-width: 160px;
    height: auto;
}

@media (min-width: 1070px) {
    .logo-sapo img {
        max-width: 215px;
    }
}

.nav--sapo {
    display: none;
    grid-area: menu;
    place-items: center;
    place-self: center;
    width: 100%;
}

.nav--sapo ul {
    display: flex;
    justify-content: end;
    width: 100%;
}

@font-face {
    font-display: block;
    font-family: "Poppins-SemiBold";
    src: url("//fonts.gstatic.com/s/poppins/v5/9VWMTeb5jtXkNoTv949NpVQlYEbsez9cZjKsNMjLOwM.eot?#iefix");
    src: url("//fonts.gstatic.com/s/poppins/v5/9VWMTeb5jtXkNoTv949NpVQlYEbsez9cZjKsNMjLOwM.eot?#iefix") format("eot"),
    url("//fonts.gstatic.com/s/poppins/v5/9VWMTeb5jtXkNoTv949Npfk_vArhqVIZ0nv9q090hN8.woff2") format("woff2"),
    url("//fonts.gstatic.com/s/poppins/v5/9VWMTeb5jtXkNoTv949NpRsxEYwM7FgeyaSgU71cLG0.woff") format("woff"),
    url("//fonts.gstatic.com/s/poppins/v5/9VWMTeb5jtXkNoTv949NpS3USBnSvpkopQaUR-2r7iU.ttf") format("truetype"),
    url("//fonts.gstatic.com/l/font?kit=9VWMTeb5jtXkNoTv949NpaWUboTb-jS2tyCOQMtm97g&skey=ce7ef9d62ca89319&v=v5#Poppins") format("svg");
}

.nav--sapo li a {
    color: #ED1A2F;
    font-size: 16px;
    /*padding: 15px;*/
    /*margin-left: 10px;*/
    font-family: "Poppins-SemiBold", sans-serif;
}

@media (min-width: 767px) {
    .nav--sapo li a {
        padding: 5px;
    }
}

@media (min-width: 1160px) {
    .nav--sapo li a {
        padding: 15px;
    }
}

.nav--sapo li a.active {
    color: rgb(212, 19, 23);
}

.nav--sapo li a:hover {
    color: rgb(212, 19, 23);
    transition: color .4s ease 0s;
}

.nav--sapo li.account-btn a {
    padding: 12px 30px;
    background: #016BB7;
    color: #ffffff;
    font-family: Poppins;
    font-size: 14px;
    font-weight: 500;
    border-radius: 0.25rem;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
}

.nav--sapo li.account-btn a:hover {
    background: #e2584c;
}

.mobile-toggle {
    padding: 5px 15px;
    font-size: 20px;
    color: #53535f;
    background: #ffffff;
    width: 60px;
    border:0;
    display: block;
    transition: background-color 0.3s;
    -webkit-transition: background-color 0.3s;
    -moz-transition: background-color 0.3s;
    -o-transition: background-color 0.3s;
    -ms-transition: background-color 0.3s;
    border-radius: .25rem;
    justify-self: end;
}

.mobile-toggle.open + .nav--sapo {
    display: grid;
    width: 250px;
    position: fixed;
    top: 100px;
    bottom: 0;
    left: 0;
    background: #ffffff;
    padding: 5px;
    z-index: 9;
    place-items: flex-start;
}

.mobile-toggle.open + .nav--sapo ul, .mobile-toggle.open + .nav--sapo li {
    display: block;
}
.mobile-toggle.open + .nav--sapo li {
    padding: 30px 5px;
}

.mobile-toggle.open + .nav--sapo li a {
    font-size: 14px;
}

@media (min-width: 1070px) {
    .mobile-toggle {
        display: none;
    }
    .nav--sapo {
        display: grid;
    }
}

.mobile-toggle i::before {
    content: "\e077";
}

.anticon::before {
    font-family: "anticon" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.banner {
    width: 100%;
    min-height: 250px;
    background-size:cover;
    position: relative;
}

@media (min-width: 767px) {
    .banner {
        min-height: 390px;
    }
}

.banner--blue {
    background-color: rgb(26, 43, 109);
}

.banner--n:after {
    content: none !important;
}

.banner:before {
    position: relative;
}
.banner:after {
    content: '';
    background-color: rgb(26, 43, 109);
    width: 50%;
    display: block;
    height: 15px;
    bottom: -15px;
    position: absolute;
}

.main-content {
    position: relative;
}

@font-face {
    font-display: block;
    font-family: 'Spinnaker';
    font-style: normal;
    font-weight: 400;
    src: local('Spinnaker'), local('Spinnaker-Regular'), url(https://fonts.gstatic.com/s/spinnaker/v11/w8gYH2oyX-I0_rvR6HmX1XYKiumCB-Eo.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-display: block;
    font-family: 'Spinnaker';
    font-style: normal;
    font-weight: 400;
    src: local('Spinnaker'), local('Spinnaker-Regular'), url(https://fonts.gstatic.com/s/spinnaker/v11/w8gYH2oyX-I0_rvR6HmX23YKiumCBw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.splash {
    background-color: rgb(242, 242, 242);
    padding: 15px;
    position: absolute;
    left: 40px;
    right: 0;
    bottom: -60px;
    width:60%;
    animation: 1s in-out forwards;
}


@keyframes in-out {
    0% {
        transform: translateX(-100%);
        transform-origin: left;
    }

    100% {

        transform-origin: left;
        transform: translateX(0%);
    }
}

.splash h1, .splash span {
    font-size: 19px;
    color: rgb(26, 43, 109);
    font-family: 'Spinnaker', sans-serif;
    position: relative;
    display: inline-block;
}

.splash:not(.not) h1:after, .splash:not(.not) span:after {
    content: '';
    background: rgb(26, 43, 109);
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 18%;
    height: 3px;
}

@font-face {
    font-display: block;
    font-family: "Helvetica-W01-Light";
    src: url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/717f8140-20c9-4892-9815-38b48f14ce2b.eot?#iefix");
    src: url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/717f8140-20c9-4892-9815-38b48f14ce2b.eot?#iefix") format("eot"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/03805817-4611-4dbc-8c65-0f73031c3973.woff") format("woff"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/d5f9f72d-afb7-4c57-8348-b4bdac42edbb.ttf") format("truetype"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/05ad458f-263b-413f-b054-6001a987ff3e.svg#05ad458f-263b-413f-b054-6001a987ff3e") format("svg");
}

.splash p {
    font-family: "Helvetica-W01-Light", sans-serif;
    font-size: 17px;
    color: #000;
    margin-left: 25%;
    margin-right: 5%;
    padding-top: 25px;
}

@media (min-width: 767px) {
    .splash h1, .splash span {
        font-size: 59px;
        line-height: 59px;
    }
    .splash p {
        font-size: 22px;
    }
}

.splash--cta {
    position: absolute;
    bottom: -116px;
    right: 166px;
    font-family: "Helvetica-W01-Light", sans-serif;
    font-size: 18px;
    color: #ffffff;
}

@media (min-width: 767px) {
    .splash {
        padding: 70px 40px 30px;
        left: unset;
        right: -50px;
        bottom: -180px;
    }

    .splash--cta {

        bottom: -237px;
        right: -50px;
    }
}


.splash--cta a {
    display: flex;
    color: #ffffff;
}

.splash--cta div:first-child {
    background: rgb(26, 43, 109);
    padding: 5px 20px;;
    font-size: 26px;
}

.splash--cta div:first-child:hover {
    background: rgb(212, 19, 23);
    transition: background .4s ease 0s;
}

.splash--cta div:last-child {
    background: rgb(212, 19, 23);
    padding: 15px 30px;
    display: flex;
    align-items: center;
}

.splash--cta div:last-child:hover {
    background: rgb(26, 43, 109);
    transition: background .4s ease 0s;
}

.h1-w {
    color: #ffffff;
    font-family: 'Spinnaker', sans-serif;
    font-size: 60px;
    letter-spacing: 1px;
}

/*.h1-b {*/
/*    color: black;*/
/*    font-family: 'Spinnaker', sans-serif;*/
/*    font-size: 60px;*/
/*    letter-spacing: 1px;*/
/*}*/

.ghost-form {
    max-width: 860px;
    margin: 0 auto;
}

.ghost-form label {
    color: black;
    display: block;
    font-family: "Helvetica-W01-Light", sans-serif;
    font-size: 16px;
    font-weight: bold;
}

.ghost-form input, .ghost-form textarea {
    background: transparent;
    border: 2px solid transparent;
    border-bottom: 2px solid black;
    color: black;
    font-size: 16px;
    padding: 5px 10px;
    width: 100%;
}

.ghost-form input:hover, .ghost-form textarea:hover {
    border: 2px solid black;
}

.ghost-form button[type="submit"] {
    width: 100%;
    border: none;
    color: black;
    font-family: 'Spinnaker', sans-serif;
    font-size: 24px;
    padding: 15px;
    transition: background .4s ease 0s;
}

.ghost-form button[type="submit"]:hover {
    background: rgb(212, 19, 23);

}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

footer.footer {
    background: #016BB7;
    color: #FFF;
    padding: 0 15px;
    position: relative;
    left: 0;
    bottom: 0;
    border-bottom: 5px solid #016BB7;
}

.footer .footer-content {
    border: 0;
}

input.error {
    border:1px solid red!important;
}
label.error {
    color: red!important;
}
input.is-inavlid {
    border:1px solid red!important;
}
label.is-invalid {
    color: red!important;
}

.progress {
    margin-bottom: 5px!important;
}

.text-warning-darker {
    color: #ff7007 !important;
}

[data-change-password] .label.is-invalid {
    font-size: 12px;
}