.paywhirl_browser * {
    transition:
        all 1s ease-in-out,
        opacity 0.5s ease-in-out,
        font-size 1s ease-in-out;
}
.paywhirl_browser .box_icon {
    transition:
        all 1s ease-in-out,
        opacity 0s ease-in-out,
        font-size 1s ease-in-out;
}

.paywhirl_browser .paywhirl_browser_modal {
    transition:
        all 1s ease-in-out,
        opacity 3s ease-in-out,
        font-size 1s ease-in-out;
    opacity: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.paywhirl_browser.plans.single_plan.checkout .paywhirl_checkout_icon,
.paywhirl_browser.plans.single_plan.checkout .paywhirl_checkout_button {
    transition:
        all 1s ease-in-out,
        opacity 3s ease-in-out,
        font-size 1s ease-in-out;
}

.paywhirl_browser.step_one,
.paywhirl_browser.step_two,
.paywhirl_browser.step_three {
    border-color: rgba(31, 89, 117, 0.5);
}

.paywhirl_checkout_button,
.paywhirl_checkout_icon {
    opacity: 0;
    height: 0;
    color: #fff;
}

.paywhirl_browser.plans.single_plan .paywhirl_loading_bar {
    height: 0;
    width: 0;
}

.paywhirl_checkout_icon {
    width: 10px;
    padding: 3px;
    position: absolute;
    top: -8px;
    left: 98px;
    display: none;
}

.paywhirl_checkout_button {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: none;
    padding: 4px 10px;
    border-radius: 5px;
}

.paywhirl_browser {
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid #e2e2e2e2;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 4px 5px 10px 0px rgba(26, 26, 67, 0.1);

    background: #fff;
}

.paywhirl_browser_menu {
    background: #fff;
    height: 40px;
    position: relative;
}

.paywhirl_browser_header {
    background: #f0f4fa;
    height: 50px;
    position: relative;
}

.paywhirl_browser.plans
    .paywhirl_browser_plans
    .paywhirl_browser_plan
    div.plan_loading_bar {
    opacity: 0;
    border: 1px solid #fff;
}

.paywhirl_browser .box_icon {
    opacity: 0;
    color: #fff;
    font-size: 0px;
    text-align: center;
}

.paywhirl_browser_logo {
    position: absolute;
    padding: 5px;
    font-size: 12px;
    background: #f1f1f1;
    border-radius: 100px;
    top: 6px;
    left: 10px;
    color: #fff;
}

.paywhirl_browser_menu_items {
    position: absolute;
    right: 10px;
    top: 10px;
}

.paywhirl_browser_menu_items div {
    width: 30px;
    height: 3px;
    background: #f1f1f1;
    display: inline-block;
    margin-right: 10px;
    border-radius: 50px;
}

/* Default Plans */
.paywhirl_browser.plans .paywhirl_browser_plans {
    position: relative;
    top: -30px;
}

.paywhirl_browser.plans .paywhirl_browser_plans .paywhirl_browser_plan {
    border: 1px solid #f1f1f1;
    border-radius: 0px;
    padding: 10px;
    min-height: 120px;
    width: 70px;
    box-shadow: 2px 2px 20px #f1f1f1;
    background: #fff;
}

.paywhirl_browser.plans
    .paywhirl_browser_plans
    .paywhirl_browser_plan.first_plan {
    position: absolute;
    left: 45px;
    top: 10px;
}

.paywhirl_browser.plans
    .paywhirl_browser_plans
    .paywhirl_browser_plan.second_plan {
    position: absolute;
    left: 125px;
    top: 10px;
}

.paywhirl_browser.plans
    .paywhirl_browser_plans
    .paywhirl_browser_plan.third_plan {
    position: absolute;
    left: 205px;
    top: 10px;
}

.paywhirl_browser.plans
    .paywhirl_browser_plans
    .paywhirl_browser_plan
    .paywhirl_plan_logo {
    background: #000;
    color: #fff;
    padding: 7px 10px 7px 10px;
    border-radius: 100px;
    position: absolute;
    left: 20px;
    top: -10px;
    font-size: 10px;
}

.paywhirl_browser.plans
    .paywhirl_browser_plans
    .paywhirl_browser_plan.first_plan
    .paywhirl_plan_logo {
    background: #03a9f4;
}

.paywhirl_browser.plans
    .paywhirl_browser_plans
    .paywhirl_browser_plan.first_plan
    .plan_button {
    background: #03a9f4;
}

.paywhirl_browser.plans
    .paywhirl_browser_plans
    .paywhirl_browser_plan.second_plan
    .paywhirl_plan_logo {
    background: #0288d1;
}

.paywhirl_browser.plans
    .paywhirl_browser_plans
    .paywhirl_browser_plan.second_plan
    .plan_button {
    background: #0288d1;
}

.paywhirl_browser.plans
    .paywhirl_browser_plans
    .paywhirl_browser_plan.third_plan
    .paywhirl_plan_logo {
    background: #1f5975;
}

.paywhirl_browser.plans
    .paywhirl_browser_plans
    .paywhirl_browser_plan.third_plan
    .plan_button {
    background: #1f5975;
}

.paywhirl_browser.plans
    .paywhirl_browser_plans
    .paywhirl_browser_plan
    div.plan_feature {
    height: 3px;
    background: #e2e2e2;
    margin-top: 10px;
}

.paywhirl_browser.plans
    .paywhirl_browser_plans
    .paywhirl_browser_plan
    .plan_button {
    position: absolute;
    left: 5px;
    color: #fff;
    font-size: 8px;
    text-align: center;
    padding: 5px;
    background: #000;
    bottom: 5px;
    width: 58px;
    letter-spacing: 0.8px;
    font-family: Arial, "sans-serif";
    border-radius: 5px;
}

/* SINGLE PLAN */
.paywhirl_browser.plans.single_plan .second_plan,
.paywhirl_browser.plans.single_plan .third_plan {
    opacity: 0;
}
.paywhirl_browser.plans.single_plan .first_plan {
    width: 230px;
}
.paywhirl_browser.plans.single_plan .first_plan .paywhirl_plan_logo {
    left: 98px;
}

.paywhirl_browser.plans.single_plan
    .paywhirl_browser_plans
    .paywhirl_browser_plan
    div.plan_button {
    width: 209px;
    left: 10px;
}

.paywhirl_browser.plans.single_plan
    .paywhirl_browser_plans
    .paywhirl_browser_plan.second_plan
    div.plan_button {
    width: 0px;
}

.paywhirl_browser.plans.single_plan
    .paywhirl_browser_plans
    .paywhirl_browser_plan.third_plan
    div.plan_button {
    width: 0px;
}

/* DOUBLE PLAN */
.paywhirl_browser.plans.double_plan .third_plan {
    opacity: 0;
}
.paywhirl_browser.plans.double_plan .first_plan {
    width: 110px;
}
.paywhirl_browser.plans.double_plan .second_plan {
    width: 110px;
    left: 170px !important;
}
.paywhirl_browser.plans.double_plan .first_plan .paywhirl_plan_logo {
    left: 43px;
}

.paywhirl_browser.plans.double_plan .second_plan .paywhirl_plan_logo {
    left: 43px;
}

.paywhirl_browser.plans.double_plan
    .paywhirl_browser_plans
    .paywhirl_browser_plan
    div.plan_button {
    width: 93px;
    left: 8px;
}

.paywhirl_browser.plans.double_plan
    .paywhirl_browser_plans
    .paywhirl_browser_plan.third_plan
    div.plan_button {
    width: 0px;
}

/* SQUARE PLANS */
.paywhirl_browser.plans.square_plans .paywhirl_browser_plan {
    border-radius: 0;
}

.paywhirl_browser.plans.square_plans .paywhirl_browser_plans {
    top: -45px;
}

.paywhirl_browser.plans.square_plans .first_plan {
    width: 70px;
    min-height: 90px;
    top: 30px !important;
    left: 55px !important;
}
.paywhirl_browser.plans.square_plans .second_plan {
    z-index: 99;
}
.paywhirl_browser.plans.square_plans .third_plan {
    width: 70px;
    min-height: 90px;
    top: 30px !important;
    left: 195px !important;
}

.paywhirl_browser.plans
    .paywhirl_browser_plans.square_plans
    .paywhirl_browser_plan
    div.plan_feature {
    margin-top: 5px !important;
}

.paywhirl_browser.plans.square_plans
    .first_plan
    .plan_feature:nth-of-type(odd) {
    margin-top: -5px !important;
}

.paywhirl_browser.plans.square_plans
    .third_plan
    .plan_feature:nth-of-type(even) {
    margin-top: -5px !important;
}

.paywhirl_browser.plans.square_plans .hide_on_square {
    opacity: 0;
}

/* BUILD A BOX STEP ONE */

.paywhirl_browser.plans.single_plan.step_one .box_icon,
.paywhirl_browser.plans.single_plan.step_two .box_icon,
.paywhirl_browser.plans.single_plan.step_three .box_icon {
    opacity: 1;
    color: #e2e2e2;
    text-align: center;
    position: absolute;
    top: 30px;
    font-size: 40px;
    left: 90px;
}

.paywhirl_browser.plans.single_plan.step_one .paywhirl_browser_plan {
    box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.3);
}

.paywhirl_browser.single_plan.step_one .paywhirl_browser_modal,
.paywhirl_browser.single_plan.step_two .paywhirl_browser_modal,
.paywhirl_browser.single_plan.step_three .paywhirl_browser_modal {
    background: rgba(31, 89, 117, 0.5);
    opacity: 1;
}

.paywhirl_browser.plans.single_plan.step_one
    .paywhirl_browser_plans
    .paywhirl_browser_plan
    div.plan_button {
    opacity: 0;
}

.paywhirl_browser.plans.single_plan.step_one
    .paywhirl_browser_plans
    .paywhirl_browser_plan
    div.plan_feature {
    opacity: 0;
}

.paywhirl_browser.plans.single_plan.step_one
    .paywhirl_browser_plans
    .paywhirl_browser_plan
    div.plan_loading_bar {
    height: 5px;
    border: 1px solid #e2e2e2;
    position: relative;
    opacity: 1;
    top: 20px;
    display: block;
}
.paywhirl_browser.plans.single_plan.step_one
    .paywhirl_browser_plans
    .paywhirl_browser_plan
    div.plan_loading_bar_inner {
    height: 5px;
    background-color: #03a9f4;
    width: 33.33%;
    position: relative;
}

.paywhirl_browser.plans.single_plan.step_one
    .paywhirl_browser_plans
    .paywhirl_browser_plan
    div.plan_loading_bar_inner_dot {
    position: absolute;
    right: -5px;
    top: -4px;
    height: 12px;
    width: 12px;
    background-color: #03a9f4;
    border-radius: 50px;
}

/* BUILD A BOX STEP TWO */
.paywhirl_browser.plans.single_plan.step_two
    .paywhirl_browser_plans
    .paywhirl_browser_plan
    div.plan_button {
    opacity: 0;
}

.paywhirl_browser.plans.single_plan.step_two .paywhirl_browser_plan {
    box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.3);
}

.paywhirl_browser.plans.single_plan.step_two
    .paywhirl_browser_plans
    .paywhirl_browser_plan
    div.plan_feature {
    opacity: 0;
}

.paywhirl_browser.plans.single_plan.step_two
    .paywhirl_browser_plans
    .paywhirl_browser_plan
    div.plan_loading_bar {
    height: 5px;
    border: 1px solid #e2e2e2;
    position: relative;
    opacity: 1;
    top: 20px;
    display: block;
}
.paywhirl_browser.plans.single_plan.step_two
    .paywhirl_browser_plans
    .paywhirl_browser_plan
    div.plan_loading_bar_inner {
    height: 5px;
    background-color: #0288d1;
    width: 66.66%;
    position: relative;
}

.paywhirl_browser.plans.single_plan.step_two
    .paywhirl_browser_plans
    .paywhirl_browser_plan
    div.plan_loading_bar_inner_dot {
    position: absolute;
    right: -5px;
    top: -4px;
    height: 12px;
    width: 12px;
    background-color: #0288d1;
    border-radius: 50px;
}

/* BUILD A BOX STEP THREE */
.paywhirl_browser.plans.single_plan.step_three
    .paywhirl_browser_plans
    .paywhirl_browser_plan
    div.plan_button {
    opacity: 0;
}

.paywhirl_browser.plans.single_plan.step_three .paywhirl_browser_plan {
    box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.3);
}

.paywhirl_browser.plans.single_plan.step_three
    .paywhirl_browser_plans
    .paywhirl_browser_plan
    div.plan_feature {
    opacity: 0;
}

.paywhirl_browser.plans.single_plan.step_three
    .paywhirl_browser_plans
    .paywhirl_browser_plan
    div.plan_loading_bar {
    height: 5px;
    border: 1px solid #e2e2e2;
    position: relative;
    opacity: 1;
    top: 20px;
    display: block;
}
.paywhirl_browser.plans.single_plan.step_three
    .paywhirl_browser_plans
    .paywhirl_browser_plan
    div.plan_loading_bar_inner {
    height: 5px;
    background-color: #1f5975;
    width: 100%;
    position: relative;
}

.paywhirl_browser.plans.single_plan.step_three
    .paywhirl_browser_plans
    .paywhirl_browser_plan
    div.plan_loading_bar_inner_dot {
    position: absolute;
    right: -5px;
    top: -4px;
    height: 12px;
    width: 12px;
    background-color: #1f5975;
    border-radius: 50px;
}

/* CHECKOUT */
.paywhirl_browser.plans.single_plan.checkout
    .paywhirl_browser_plans
    .paywhirl_browser_plan
    div.plan_button {
    opacity: 0;
}

.paywhirl_browser.plans.single_plan.checkout .paywhirl_modal {
    opacity: 0;
}

.paywhirl_browser.plans.single_plan.checkout .paywhirl_plan_logo {
    opacity: 0;
}

.paywhirl_browser.plans.single_plan.checkout .paywhirl_browser_plans {
    top: -40px;
}

.paywhirl_browser.plans.single_plan.checkout
    .paywhirl_browser_plans
    .first_plan {
    min-height: 130px;
}

.paywhirl_browser.plans.single_plan.checkout
    .paywhirl_browser_plans
    .paywhirl_checkout_button {
    font-size: 9px;
    text-align: center;
    display: block;
    background: #3ecf8e;
    color: #fff;
    font-family: Arial, "sans-serif";
    height: 20px;
    opacity: 1;
}

.paywhirl_browser.plans.single_plan.checkout
    .paywhirl_browser_plans
    .paywhirl_checkout_icon {
    color: #fff;
    background: #3ecf8e;
    opacity: 1;
    display: block;
    padding: 3px 11px;
    border-radius: 20px;
    text-align: center;
    width: auto;
    height: auto;
}

@media (min-width: 880px) {
    .paywhirl_browser {
        transform: scale(1.3) translateX(50px) translateY(0) perspective(3190px)
            rotateY(-29deg) rotateX(4deg) rotate(1deg);
        box-shadow:
            1px 1px 5px 0 rgba(26, 26, 67, 0.05),
            39px 62.5px 125px -25px rgba(50, 50, 93, 0.5),
            23.4px 37.5px 75px -37.5px rgba(0, 0, 0, 0.6);
    }

    body.ios-safari .paywhirl_browser {
        transform: scale(1.3) translateX(50px) translateY(0);
    }
}