body,
    html {
        overflow: hidden;
        margin: 0;
        padding: 0;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
    }

    .pp-section {
        height: calc(100% - 60px);
        position: absolute;
        top: 60px;
        width: 100%;
        backface-visibility: hidden;
    }

    .pp-easing {
        transition: all 1s cubic-bezier(.55, .085, 0, .99);
        transition-timing-function: cubic-bezier(.55, .085, 0, .99)
    }

    #pp-nav {
        position: fixed;
        z-index: 100;
        margin-top: -32px;
        top: 50%;
        opacity: 1
    }

    #pp-nav.right {
        right: 10px
    }

    #pp-nav.left {
        left: 10px
    }

    .pp-section.pp-table {
        display: table
    }

    .pp-tableCell {
        display: table-cell;
        vertical-align: middle;
        width: 100%;
        height: 100%
    }

    .pp-slidesNav {
        position: absolute;
        z-index: 4;
        left: 50%;
        opacity: 1
    }

    .pp-slidesNav.bottom {
        bottom: 17px
    }

    .pp-slidesNav.top {
        top: 17px
    }

    #pp-nav ul,
    .pp-slidesNav ul {
        margin: 0;
        padding: 0
    }

    #pp-nav li,
    .pp-slidesNav li {
        display: block;
        width: 14px;
        height: 16px;
        margin: 7px;
        position: relative
    }

    .pp-slidesNav li {
        display: inline-block
    }

    #pp-nav li a,
    .pp-slidesNav li a {
        display: block;
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        cursor: pointer;
        text-decoration: none
    }

    #pp-nav li .active span,
    .pp-slidesNav .active span {
        background: #fff;
    }

    #pp-nav span,
    .pp-slidesNav span {
        top: 0;
        left: 2px;
        width: 12px;
        height: 12px;
        background: rgba(255, 255, 255, .5);
        border-radius: 50%;
        position: absolute;
        z-index: 1
    }

    .pp-tooltip {
        position: absolute;
        top: -2px;
        color: #CC2089;
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
        max-width: 220px
    }

    .pp-tooltip.right {
        right: 20px
    }

    .pp-tooltip.left {
        left: 20px
    }

    .pp-scrollable {
        overflow-y: scroll;
        height: 100%
    }

    .tagline {
        z-index: 10;
        text-align: center;
        width: 100%;
        height: 100%;
        display: flex;
        display: -ms-flexbox;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-align: center;
        align-items: center;
        background: rgba(0, 0, 0, 0.4);
    }

    .tagline h2 {
        font-size: 3.5rem;
        line-height: .8;
        margin-bottom: 0;
        color: #F59532;
        background: linear-gradient(rgb(255, 178, 100), #F59531);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .hearts {
        position: absolute;
        height: 70px;
        background: transparent url(../i/hearts.svg) no-repeat;
        background-size: auto 100%;
        z-index: 3;
        text-align: center;
        padding: 1.625rem 0 0 4rem;
        top: 20px;
        left: 1.5rem;
    }

    .hearts h2 {
        font: 1.375rem/1 'Montserrat', sans-serif;
        font-weight: 700 !important
    }

    @media screen and (min-width: 25em) {
        .tagline h2 {
            font-size: 4.5rem;
        }

        .hearts h2 {
            font-size: 1.625rem;
        }
    }

    @media screen and (min-width: 30em) {
        .tagline h2 {
            font-size: 5.5rem;
        }
    }

    @media screen and (min-width: 48em) {
        .tagline {
            width: 50%;
            background: none;
        }

        .tagline h2 {
            font-size: 7rem;
        }
    }

    @media screen and (min-width: 120em) {
        .tagline h2 {
            font-size: 9rem;
        }
    }

    a.olay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 8;
    }

    [class*=tag-r],
    .tag-l {
        background: rgba(255, 255, 255, .95);
        padding: 1.5rem;
        position: absolute;
        bottom: 0;
        width: 100%;
        z-index: 9;
        color: #333;
    }

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

    [class*=tag-r].inv,
    .tag-l.inv {
        background-color: rgba(0, 0, 0, .8);
    }

    [class*=tag-r] p:last-child,
    .tag-l p:last-child {
        margin-bottom: 0
    }

    #p1 {
        background: #000 url(../i/home1.jpg) no-repeat;
    }

    #p3 {
        background: #fff url(../i/new2.jpg) no-repeat;
        background-position: center bottom !important;
    }

    #p4 {
        background: #fff url(../i/step1.jpg) no-repeat;
    }

    #p5 {
        background: #fff url(../i/step2.jpg) no-repeat;
    }

    #p6 {
        background: #fff url(../i/step3.jpg) no-repeat;
    }

    #p7 {
        background: #fff url(../i/yoo.jpg) no-repeat;
    }

    .g1 {
        background: linear-gradient(rgb(255, 65, 84), #B32432);
    }

    .g2 {
        background: linear-gradient(rgb(255, 168, 75), #F59531);
    }

    .g3 {
        background: linear-gradient(rgb(255, 68, 180), #CC2189);
    }

    .g1,
    .g2,
    .g3 {
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .section {
        background-size: cover !important;
        background-position: center center !important;
    }

    @media screen and (min-width: 48em) {
        #p1 {
            background-image: url(../i/home1@2x.jpg);
        }

        #p3 {
            background-image: url(../i/new2@2x.jpg);
            background-position: left center !important;
        }

        #p4 {
            background: #fff url(../i/step1@2x.jpg) no-repeat;
            background-position: center top !important;
        }

        #p5 {
            background: #fff url(../i/step2@2x.jpg) no-repeat;
            background-position: center top !important;
        }

        #p6 {
            background: #fff url(../i/step3@2x.jpg) no-repeat;
            background-position: center 20% !important;
        }

        #p7 {
            background-image: url(../i/yoo@2x.jpg);
        }

        [class*=tag-r] {
            right: 2rem;
            width: 40%;
            bottom: auto;
            padding-top: 130px
        }

        .tag-rt{
            top: 0;
            padding-top: 3rem;
        }

        .tag-l {
            left: 1rem;
            width: 40%;
            bottom: auto;
            text-align: left;
        }

        #b1 #p7 [class*=tag-r] {
            bottom: 130px;
        }

        [class*=tag-r],
        .tag-l,
        [class*=tag-r].inv,
        .tag-l.inv {
            background-color: transparent;
        }

        [class*=tag-r] p,
        .tag-l p {
            text-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        }
    }

    @media screen and (min-width: 64em) {

        [class*=tag-r],
        .tag-l {
            width: 33%;
        }
    }