.index-splash {
    background-position: center top;
    background-size: cover;
    height: 600px;
}

.index-splash-title {
    font-family: "PT Sans Bold";
}

.index-splash-content {
    clear: both;
    color: #fff;
    margin: 0px auto;
    width: 940px;
}

.index-splash-text {
    float: left;
    padding: 145px 0px 0px 0px;
}

.index-splash-desc {
    margin: 5px 0px 30px 0px;
    width: 475px;
}

.index-splash-store {
    width: 350px;
    padding-left: 65px;
    text-align: center;
}

.index-splash-store .store-button {
    margin: 0px 15px 15px 0px;
}

.index-splash-phone {
    float: right;
    margin-right: -80px;
}

.index-splash-phone img {
    width: 488px;
    height: 600px;
    opacity: 0;

    -webkit-transition: all 400ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
       -moz-transition: all 400ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
        -ms-transition: all 400ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
         -o-transition: all 400ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
            transition: all 400ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

.index-splash-phone img.anim {
    opacity: 1;
}

@media screen and (max-width: 767px) {
    .index-splash-text {
        margin-left: auto;
        margin-right: auto;
    }

    .index-splash-phone {
        display: none;
    }
}

@media screen and (max-width: 940px) {
    .index-splash {
        height: 320px;
    }

    .index-splash-content {
        width: auto;
    }

    .index-splash-text {
        float: none;
        padding: 30px;
        max-width: 350px;
    }

    .index-splash-phone {
        height: 300px;
    }

    .index-splash-desc {
        width: auto;
    }

    .index-splash-store {
        margin: 0px auto;
        padding: 0px;
        width: 265px;
    }

    .index-splash-store .store-button {
        margin: 0px 5px 10px 0px;
    }

    .index-splash-phone {
        margin-top: 20px;
        margin-right: 60px;
    }

    .index-splash-phone img {
        opacity: 1;
        height: 300px;
        width: 244px;
    }
}

.index-press {
    clear: both;
    background: white; 
    margin: 10px 0px;
    padding: 5px;
    width: 100%;
    text-align: center;
}

.index-press-logo {
    display: inline-block;
    margin: 20px;
}

.index-press img {
    vertical-align: middle;
    height: 30px;
}

.index-press ul li {
    display: inline;     
}

.index-press ul {
    margin: 0px;
    padding: 0px;
}

.index-board {
    position: relative;
    height: 460px;
    width: 100%;
}

.index-board-content {
    color: #fff;
    margin: 0px auto;
    width: 940px;
}

.index-board-fees {
    background-color: #f6a74e;
    z-index: 2;
}

.index-board-notifications {
    background-color: #65a02c;
    z-index: 3;
}

.index-board-pay {
    background-color: #788ea6;
    z-index: 4;
}

.index-board-image {
    display: inline-block;
    margin-top: 60px;
    position: relative;
}

.index-board-image.anim {
    -webkit-animation-name: toast;
       -moz-animation-name: toast;
        -ms-animation-name: toast;
         -o-animation-name: toast;
            animation-name: toast;
    -webkit-animation-duration: 1.25s;
       -moz-animation-duration: 1.25s;
        -ms-animation-duration: 1.25s;
         -o-animation-duration: 1.25s;
            animation-duration: 1.25s;
    -webkit-animation-fill-mode: forwards;
       -moz-animation-fill-mode: forwards;
        -ms-animation-fill-mode: forwards;
         -o-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}

.index-board-image.anim-reverse {
    -webkit-animation-name: toastreverse;
       -moz-animation-name: toastreverse;
        -ms-animation-name: toastreverse;
         -o-animation-name: toastreverse;
            animation-name: toastreverse;
    -webkit-animation-duration: 1.25s;
       -moz-animation-duration: 1.25s;
        -ms-animation-duration: 1.25s;
         -o-animation-duration: 1.25s;
            animation-duration: 1.25s;
    -webkit-animation-fill-mode: forwards;
       -moz-animation-fill-mode: forwards;
        -ms-animation-fill-mode: forwards;
         -o-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}

.index-board-image-frame {
    width: 397px;
    height: 761px;
}

.index-board-image-screen {
    position: absolute;
    top: 137px;
    left: 41px;
    width: 320px;
    height: 480px;
}

@-webkit-keyframes toast {
    0%      { top:    0px; -webkit-animation-timing-function:ease; }
    35%     { top: -245px; -webkit-animation-timing-function:ease; }
    100%    { top: -230px; }
}
@-moz-keyframes toast {
    0%      { top:    0px; -moz-animation-timing-function:ease; }
    35%     { top: -245px; -moz-animation-timing-function:ease; }
    100%    { top: -230px; }
}
@-ms-keyframes toast {
    0%      { top:    0px; -ms-animation-timing-function:ease; }
    35%     { top: -245px; -ms-animation-timing-function:ease; }
    100%    { top: -230px; }
}
@-o-keyframes toast {
    0%      { top:    0px; -o-animation-timing-function:ease; }
    35%     { top: -245px; -o-animation-timing-function:ease; }
    100%    { top: -230px; }
}
@keyframes toast {
    0%      { top:    0px; animation-timing-function:ease; }
    35%     { top: -245px; animation-timing-function:ease; }
    100%    { top: -230px; }
}

@-webkit-keyframes toastreverse {
    0%      { top: -230px; -webkit-animation-timing-function:ease; }
    100%    { top:    0px; }
}
@-moz-keyframes toastreverse {
    0%      { top: -230px; -moz-animation-timing-function:ease; }
    100%    { top:    0px; }
}
@-ms-keyframes toastreverse {
    0%      { top: -230px; -ms-animation-timing-function:ease; }
    100%    { top:    0px; }
}
@-o-keyframes toastreverse {
    0%      { top: -230px; -o-animation-timing-function:ease; }
    100%    { top:    0px; }
}
@keyframes toastreverse {
    0%      { top: -230px; animation-timing-function:ease; }
    100%    { top:    0px; }
}

.index-board-text {
    display: inline-block;
    margin: 90px 0px 0px 135px;
    vertical-align: top;
    width: 400px;
}

.index-board-content-reverse .index-board-text {
    margin: 90px 135px 0px 0px;
}

.index-board-text p {
    margin-top: 10px;
}

@media screen and (max-width: 940px) {
    .index-splash-desc {
        margin: 5px 0px 15px 0px;
    }

    .index-board {
        height: 400px;
        overflow: hidden;
    }

    .index-board-content {
        width: auto;
    }

    .index-board-image {
        display: block;
        left: 50%;
        margin-left: -98px;
        position: absolute;
        top: 105px;
    }

    .index-board-image-frame {
        height: 380.5px;
        width: 198.5px;
    }

    .index-board-image-screen {
        position: absolute;
        top: 68px;
        left: 20px;
        width: 161px;
        height: 240px;
    }

    .index-board-text {
        display: block;
        margin: 0px;
        padding: 27px 30px;
        width: auto;
    }

    .index-board-content-reverse .index-board-text {
        margin: 0px;
    }
}

.index-features {
    margin: 0px auto;
    width: 940px;
    background: #fff;
    padding-top: 55px;
    position: relative;
    z-index: 10;
}

.index-feature {
    display: inline-block;
    vertical-align: top;
    width: 230px;
}

.index-feature-image {
    display: inline-block;
    margin-right: 10px;
}

.index-feature-image.auto {
    width: 41px;
    height: 42px;
}

.index-feature-image.setup {
    width: 48px;
    height: 48px;
}

.index-feature-image.secure {
    width: 42px;
    height: 47px;
}

.index-feature-image.logo {
    width: 46px;
    height: 46px;
}

.index-feature-text {
    display: inline-block;
    vertical-align: top;
    width: 157px;
}

.index-feature-text p {
    font-size: 14px;
}

@media screen and (max-width: 940px) {
    .index-features {
        padding-top: 20px;
        width: 100%;
    }

    .index-feature {
        display: block;
        margin: 20px auto;
        width: 233px;
    }

    .index-feature-image.auto {
        height: 30px;
        margin: 0px 3px;
        width: 30px;
    }

    .index-feature-image.setup {
        height: 36px;
        margin: 0px;
        width: 36px;
    }

    .index-feature-image.secure {
        height: 35.25px;
        margin: 0px 2.25px;
        width: 31.5px;
    }

    .index-feature-image.logo {
        height: 34.5px;
        margin: 0px 0.75px;
        width: 34.5px;
    }

    .index-feature-text {
        margin-top: -3px;
        margin-left: 15px;
        width: 175px;
    }
}

.page-store {
    position: relative;
    z-index: 10;
    background: #fff;
}

.page-footer {
    position: relative;
    z-index: 10;
}