/* WIDTH */
@media screen and (max-width: 1380px) {
    .panelbar li .expanded-info .col-sm-8.col-md-8.col-lg-8 {
        width: 50%;
    }

        .panelbar li .expanded-info .col-sm-8.col-md-8.col-lg-8 h3 {
            font-size: 18px;
        }

    .panelbar li .expanded-info .lady-bg {
        background-repeat: no-repeat;
        right: -55px;
        float: right;
        background-size: 55%;
        background-position-x: 75%;
    }

    .panelbar li .expanded-info .lady-bubble {
        float: right;
        left: -70%;
    }
}

@media screen and (max-width: 1302px) {
    .panelbar li .expanded-info .col-sm-8.col-md-8.col-lg-8 {
        width: 50%;
    }

        .panelbar li .expanded-info .col-sm-8.col-md-8.col-lg-8 h3 {
            font-size: 18px;
        }

    .panelbar li .expanded-info .lady-bg {
        background-repeat: no-repeat;
        right: -60px;
        float: right;
        bottom: -40px;
        background-size: 75%;
        background-position-x: 75%;
    }

    .panelbar li .expanded-info .lady-bubble {
        float: right;
        left: -80%;
        top: -40px;
    }
}

@media screen and (max-width: 1195px) {
    .panelbar li .expanded-info .col-sm-8.col-md-8.col-lg-8 {
        width: 50%;
    }

        .panelbar li .expanded-info .col-sm-8.col-md-8.col-lg-8 h3 {
            font-size: 18px;
        }

    .panelbar li .expanded-info .lady-bg {
        background-repeat: no-repeat;
        right: -80px;
        float: right;
        bottom: -40px;
        background-size: 75%;
        background-position-x: 75%;
    }

    .panelbar li .expanded-info .lady-bubble {
        float: right;
        left: -80%;
        top: -40px;
    }
}

@media screen and (min-width: 1599px) {
    .panelbar li .expanded-info .lady-bg {
        background-repeat: no-repeat;
        right: 0;
    }

    .panelbar li .expanded-info .lady-bubble {
        float: right;
        left: -55%;
    }
}

@media screen and (min-width: 1600px) {
    .panelbar li .expanded-info .lady-bg {
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-position: right;
        right: 0;
    }

    .panelbar li .expanded-info .lady-bubble {
        float: right;
        left: -40%;
    }
}

@media screen and (min-width: 1700px) {
    .panelbar li .expanded-info .lady-bg {
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-position: right;
        right: 0;
    }

    .panelbar li .expanded-info .lady-bubble {
        float: right;
        left: -35%;
    }
}

@media screen and (min-width: 1800px) {
    .panelbar li .expanded-info .lady-bg {
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-position: right;
        right: 0;
    }

    .panelbar li .expanded-info .lady-bubble {
        float: right;
        left: -35%;
    }
}

@media screen and (min-width: 2000px) {
    .panelbar li .expanded-info .lady-bg {
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-position: right;
        right: 0;
    }

    .panelbar li .expanded-info .lady-bubble {
        float: right;
        left: -30%;
    }
}

@media screen and (min-width: 2200px) {
    .panelbar li .expanded-info .lady-bg {
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-position: right;
        right: 0;
    }

    .panelbar li .expanded-info .lady-bubble {
        float: right;
        left: -30%;
    }
}

@media screen and (min-width: 2500px) {
    .panelbar li .expanded-info .lady-bg {
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-position: right;
        right: 0;
    }

    .panelbar li .expanded-info .lady-bubble {
        float: right;
        left: -20%;
    }
}

@media screen and (max-width: 1095px) {
    .panelbar li .expanded-info .lady-bg {
        background-repeat: no-repeat;
        right: -40px;
        float: right;
        bottom: -40px;
        background-size: 75%;
        background-position-x: 75%;
    }

    .panelbar li .expanded-info .lady-bubble {
        float: right;
        left: -80%;
        width: 80%;
        top: -60px;
    }

    .panelbar li .expanded-info .col-sm-8.col-md-8.col-lg-8 {
        width: 45%;
    }

        .panelbar li .expanded-info .col-sm-8.col-md-8.col-lg-8 h3 {
            font-size: 14px;
        }
        #row1 .hero-list .hero-card{
            min-height: 210px;
        }
}



/* HEIGHTS */
@media screen and (max-height: 999px) and (max-width: 1200px){

    #row1 {
        /*outline: 1px solid red;*/
    }

    .onboarding-modal {
        top: 40px !important;
        left: 90px !important;
        right: 40px;
        width: 110% !important;
    }

        .onboarding-modal .modal-content .modal-body {
            zoom: 90%;
        }

            .onboarding-modal .modal-content .modal-body small {
                font-size: 13px;
            }
}





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

    .hero-list .hero-card .card-step-info{
        min-height: 120px;
    }
}
@media screen and (min-width: 1201px) and (max-width: 1300px) {

    .hero-list .hero-card .card-step-info {
        min-height: 100px;
    }
}


@media (min-height: 1000px) {
    #R1-S2modal .modal-dialog .modal-content .modal-body {
        min-height: 700px;
        padding-bottom: 50px;
    }

}