/*online payments*/

.main-banner-section.main-banner-online-payments,
.main-banner-section.main-banner-tenant-portal{
    text-shadow:none;
}

.op-sub-head{
    max-width:520px;
    font-weight:bold;
    font-size:1.1rem;
}

ul.tenant-portal-list{
    list-style:none;
}

ul.tenant-portal-list li:before{
    content: "\2022";
    color: #34C88A;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    font-size:1.3rem;
}

@media only screen and (max-width : 768px) {
    .main-banner-online-payments {
        min-height: 460px;
        background: url(./../images/online-rent-payments_mobile.jpg) no-repeat;
        background-size: cover;
        position: relative;
        z-index: 0;
    }

    .main-banner-tenant-portal {
        min-height: 460px;
        background: url(./../images/tenant-portal_mobile.jpg?id=1) no-repeat;
        background-size: cover;
        position: relative;
        z-index: 0;
    }

    .main-banner-online-payments:before,
    .main-banner-tenant-portal:before{
        background-image: linear-gradient(to right, #F6F7FC 1%, rgba(246, 247, 252, 0.28), transparent);
    }

    .online-payments-sub-btn-text{
        position:relative;
        top:-20px;
        padding-left:5px;
    }

    .op-sub-head {
        display:none;
    }

    .main-banner-online-payments .row,
    .main-banner-tenant-portal .row{
        padding-top:200px;
    }
}


@media only screen and (min-width : 768px) {
    .main-banner-online-payments {
        min-height: 460px;
        background: url(./../images/online-rent-payments_tablet.jpg) no-repeat;
        background-size: cover;
        position: relative;
        z-index: 0;
    }

    .main-banner-tenant-portal {
        min-height: 460px;
        background: url(./../images/tenant-portal_tablet.jpg?id=1) no-repeat;
        background-size: cover;
        position: relative;
        z-index: 0;
    }

    .main-banner-online-payments:before,
    .main-banner-tenant-portal:before{
        background-image: linear-gradient(to right, #F6F7FC 1%, rgba(246, 247, 252, 0.28), transparent);
    }

    .online-payments-sub-btn-text{
        position:relative;
        top:-20px;
        padding-left:43px;
    }
}

@media only screen and (min-width : 1200px) {
    .main-banner-online-payments {
        min-height: 460px;
        background: url(./../images/online-rent-payments_desktop.jpg) no-repeat;
        background-size: cover;
        position: relative;
        z-index: 0;
    }

    .main-banner-tenant-portal {
        min-height: 460px;
        background: url(./../images/tenant-portal_desktop.jpg?id=1) no-repeat;
        background-size: cover;
        position: relative;
        z-index: 0;
    }

    .main-banner-online-payments:before,
    .main-banner-tenant-portal:before{
        background-image: linear-gradient(to right, #F6F7FC 1%, rgba(246, 247, 252, 0.28), transparent);
    }
}


.op-free-trial{
    margin-top:25px;
    color:#31a77d;
}

@media only screen and (max-width : 411px) {
    .home-video-tour {
        margin-left:10px;
    }

    .op-action-btn{
        width:58%;
    }
}

@media only screen and (min-width : 412px) {
    .op-action-btn{
        width:58%;
    }
}




@media only screen and (min-width : 575px) {
    .op-action-btn{
        width:52%;
    }
}

@media only screen and (min-width : 990px) {
    .op-action-btn{
        width:39%;
    }
}

@media only screen and (min-width : 1200px) {
    .op-action-btn{
        width:33%;
    }
}

.static-testimonial-wrapper{
    width:100%;
}

.static-testimonial{
    width:100%;
    border:1px solid #e0e0e0;
    display:block;
    vertical-align: middle;
    border-radius:3px;
    /*background-color: #F8F8F8;*/
    padding:10px 20px;
    margin-bottom:30px;
    background: linear-gradient(#f0f0f0, #f8f8f8);
    color:#333;
    float:left;
}

.testimonial-image{
    border-radius:50%;
    width:75px;
}

.testimonial-container{
    margin-right:30px;
    float:left;
    margin-top:5px;
}

.quotation{
    font-size: 14px;
    margin: 0 auto;
    quotes: "\201C""\201D""\2018""\2019";
    padding: 10px 20px;
    line-height: 1.4;
}

.quotation:before {
    content: open-quote;
    display: inline;
    height: 0;
    line-height: 0;
    left: -3px;
    position: relative;
    top: 15px;
    color: #999;
    font-size: 3em;
}
.quotation::after {
    content: close-quote;
    display: inline;
    height: 0;
    line-height: 0;
    left: 3px;
    position: relative;
    top: 20px;
    color: #999;
    font-size: 3em;
}
.testimonial-name{
    display:block;
    margin:0;
    text-align: center;
    font-size: 12px;
    padding-top:7px;
    color:#006798;
}

.testimonial-title{
    display:block;
    margin:0;
    text-align: center;
    font-size: .7rem;
    padding-top:0;
    font-style:italic;
}


.op-wrapper{
    padding-top:1rem;
    padding-bottom:0;
    transition-delay: 1s;
    max-height: 80px;
    overflow-y: hidden;
    overflow-x: hidden;
    transition: max-height 0.7s linear;

}

.op-wrapper.wrapper--expanded{
    height:365px;
    max-height: 1500px;
}

.op-wrapper.wrapper--collapsed{
    height:80px;
    max-height: 1500px;
}

.op-wrapper .head{
    color:#34C88A;
}

.op-wrapper.wrapper--expanded .feature-section.op-features{
    margin-left:-3rem;
}

.feature-section .feature-block{
    float:left;
    background-color:#fff;
}

.bottom-center-button{
    background-color: #fff;
    top:-30px;
    padding-bottom:30px;
}

.op-wrapper.wrapper--expanded .head{
    width:0;
    overflow:hidden;
}

.inner-header{
    background: #006798;
    color:#fff;
    padding:10px;
}

.expando {
    border-radius: 2px;
    overflow: hidden;
    position: absolute;
    top: -15px;
    left: 340px;
    will-change: transform;
    box-shadow: none;
}




.expando.wrapper--expanded{
    left:45px;
    top:15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.17);
}

.expando.wrapper--collapsed{
    left:340px;
    top:-15px;
    box-shadow: none;
}

@media only screen and (max-width : 411px) {
    .op-wrapper .head h3 {
        font-size: 24px;
    }

    .expando, .expando.wrapper--collapsed {
        left: 300px;
    }

    .op-wrapper.wrapper--collapsed {
        height: 70px;
    }
}

.expando__inner {
    top: 10px;
    left: 10px;
    border-radius: 50%;
    overflow: hidden;
    background: #006798;
    position: absolute;
    will-change: transform;
}

.op-wrapper.wrapper--expanded .expando__inner{
    background:#fff;
}

.expando__inner-inverter {
    will-change: transform;
}

.expando__btn {
    width: 48px;
    height: 48px;
    position: absolute;
    top: 0;
    left: 0;
    background: none;
    border: none;
    outline: none;
    pointer-events: auto;
    cursor: pointer;
    will-change: transform;
    transition:
            transform 0.1s cubic-bezier(0, 0, 0.31, 1),
            opacity 0.2s cubic-bezier(0, 0, 0.31, 1);
}

.expando__content {
    position: absolute;
    left: -10px;
    top: -10px;

    /*border:1px solid #ccc;*/
    pointer-events: none;
    opacity: 0;
    will-change: transform;
    transform: translateY(20px);
    transition:
            transform 0.3s cubic-bezier(0, 0, 0.31, 1),
            opacity 0.3s cubic-bezier(0, 0, 0.31, 1);
}

.expando__close {
    position: absolute;
    right: 10px;
    top: 10px;
    outline: none;
    border: none;
    background: none;
    cursor: pointer;
    color:#fff;
}

.expando__content-list.expando-wrapper {
    width: 1050px;
    margin: 0;
    list-style: none;
    overflow: hidden;
}

@media only screen and (max-width : 411px) {
    .expando.js-expando.wrapper--expanded{
        height:875px !important;
    }
    .expando__content-list.expando-wrapper,
    .expando__inner.js-expando-inner.item--expanded,
    .expando__inner.js-expando-inner.item--expanded .expando__content.js-content{
        width:100% !important;
    }

    .op-wrapper.wrapper--expanded{
        height:940px;
    }

    .expando__inner.js-expando-inner.item--expanded{
        border-radius:0;
    }
}
@media only screen and (min-width : 412px) {
    .expando.js-expando.wrapper--expanded{
        height:845px !important;
    }
    .expando__content-list.expando-wrapper,
    .expando__inner.js-expando-inner.item--expanded,
    .expando__inner.js-expando-inner.item--expanded .expando__content.js-content{
        width:100% !important;
    }

    .op-wrapper.wrapper--expanded{
        height:910px;
    }

    .expando__inner.js-expando-inner.item--expanded{
        border-radius:0;
    }
}

@media only screen and (min-width : 525px) {
    .expando.js-expando.wrapper--expanded{
        height:845px !important;
    }
    .expando__content-list.expando-wrapper,
    .expando__inner.js-expando-inner.item--expanded,
    .expando__inner.js-expando-inner.item--expanded .expando__content.js-content{
        width:100% !important;
    }

    .op-wrapper.wrapper--expanded{
        height:910px;
    }

    .expando__inner.js-expando-inner.item--expanded{
        border-radius:0;
    }
}

@media only screen and (min-width : 768px) {
    .expando.js-expando.wrapper--expanded{
        height:400px !important;
    }
    .expando__content-list.expando-wrapper,
    .expando__inner.js-expando-inner.item--expanded,
    .expando__inner.js-expando-inner.item--expanded .expando__content.js-content{
        width:100% !important;
    }

    .op-wrapper.wrapper--expanded{
        height:465px;
    }

}
@media only screen and (min-width : 990px) {
    .expando.js-expando.wrapper--expanded{
        height:340px !important;
    }
    .expando__content-list.expando-wrapper,
    .expando__inner.js-expando-inner.item--expanded,
    .expando__inner.js-expando-inner.item--expanded .expando__content.js-content{
        width:100% !important;
    }

    .op-wrapper.wrapper--expanded{
        height:415px;
    }

}
@media only screen and (min-width : 1200px) {
    .expando.js-expando.wrapper--expanded{
        height:320px !important;
    }
    .expando__content-list.expando-wrapper,
    .expando__inner.js-expando-inner.item--expanded,
    .expando__inner.js-expando-inner.item--expanded .expando__content.js-content{
        width:100% !important;
    }

    .op-wrapper.wrapper--expanded{
        height:385px;
    }
}

li {
    line-height: 1.9;
}

.item--expanded {
    animation-name: expandAnimation;
    animation-duration: 0.7s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.item__contents--expanded {
    animation-name: expandContentsAnimation;
    animation-duration: 0.7s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.item--collapsed {
    animation-name: collapseAnimation;
    animation-duration: 0.2s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.item__contents--collapsed {
    animation-name: collapseContentsAnimation;
    animation-duration: 0.2s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.item__contents--expanded .expando__content {
    transform: translateY(0px);
    opacity: 1;
    pointer-events: auto;
}

.item__contents--expanded .expando__btn {
    transform: rotate(180deg);
    opacity: 0;
    pointer-events: none;
}



ul.op-links{
    list-style:none;
    padding-left:0;
    margin-left:0;

}
ul.op-links a {
    color:#333;
}
ul.op-links a:hover {
    text-decoration: underline !important;
}

ul.op-links a:before{
    content: '\f058';
    display: inline-block;
    font-family: fontawesome;
    font-size: 14px;
    text-rendering: auto;
    color: #34C88A;
    margin-right:5px;
}



@media only screen and (max-width : 411px) {
    .op-cta-btn-1 button, .op-cta-btn-2 button {
        width:100%;
    }

    .op-more-header{
        padding-left:25px;
        padding-top:20px;
    }

    .op-more-body .col-md-6 {
        margin-top:5px;
        margin-bottom:5px;
    }
}

@media only screen and (min-width : 412px) {
    .op-cta-btn-1 button, .op-cta-btn-2 button {
        width:100%;
    }

    .op-more-header{
        padding-left:30px;
        padding-top:20px;
    }

    .op-more-body .col-md-6 {
        margin-top:5px;
        margin-bottom:5px;
    }
}

@media only screen and (min-width : 575px) {
    .op-cta-btn-1 button {
        width:100%;
    }

    .op-cta-btn-2 {
        margin-top:0 !important;
    }

    .op-cta-btn-2 button {
        width:100%;
        margin-left:0 !important;
    }

    .op-more-header{
        padding-left:50px;
        padding-top:40px;
    }

    .op-more-body .col-md-6 {
        margin-top:1.5rem;
        margin-bottom:1.5rem;
    }
}


@media only screen and (min-width : 768px) {
    .op-cta-btn-1 button{
        width:60%;
        float:right;
    }

    .op-cta-btn-1{
        padding-bottom:1.5rem;
        margin-top:0 !important;
    }

    .op-cta-btn-2 button {
        width:60%;
    }

    .op-more-header{
        padding-left:50px;
        padding-top:40px;
    }

    .op-more-body .col-md-6 {
        margin-top:1.5rem;
        margin-bottom:1.5rem;
    }
}




/*online payments*/