﻿

/*.proff_price_frame {
    display: inline-block;
    width: 380px;
    text-align: left;
    position: relative;
    overflow: hidden;
    margin-bottom: 15px;
    padding: 40px 30px;
    padding-left: 185px;
}*/


.proff_text {
    font-family: 'Montserrat';
    font-weight: 500;
    margin-top: 10px;
    text-align: left;
    font-size: 14px;
}

a.proff_buttons {
    display: block;
    position: relative;
    font-size: 17px;
    min-width: 160px;
    margin-left: -5px;
    margin-top: 20px;
    padding: 12px 20px;
}



.proff_price_frame {
    display: inline-block;
    width: 280px;
    text-align: center;
    padding: 40px;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.15), 0px 4px 4px 0px rgba(0, 0, 0, 0.05);
    margin-bottom: 40px;
    transform: scale(0.5) rotateY(90deg);
    transition: 0.7s ease-in-out;
    transition-delay: 0.2s;
}


.show-on-scroll.is-visible .proff_price_frame {
    transform: scale(1) rotateY(5deg);
}



.proff_price_frame.recommended-option {
/*    transition-delay: 1s !important;
*/    margin-left:20px;
}


.proff_header {
    text-align: center;
    font-family: Montserrat;
    font-size: 24px;
    color: #766CD6;
    font-style: normal;
    font-weight: 700;
    line-height: 133.4%; /* 32.016px */
    text-transform: uppercase;
}


.recommended-option .proff_header {
    color: #00c9a5;
}



.proff_text {
    font-family: 'Montserrat';
    color: #000;
    font-weight: 400;
    margin-top: 10px;
    text-align: center;
    line-height: 1.2;
    display: inline-block;
    font-size: 17px;
}


a.proff_buttons {
    display: inline-block;
    position: relative;
    color: #000;
    font-family: 'Montserrat';
    font-size: 17px;
    min-width: 180px;
    text-align: center;
    margin-top: 8px;
    color: #fff;
    background-color: #7267d5;
    border-radius: 30px;
    padding: 16px 50px;
    cursor: pointer;
    transition: 0.3s ease-in;
}

    a.proff_buttons:hover {
        box-shadow: 0 0 0 5px rgba(118, 108, 244, 0.39), 0 0 0 20px rgba(118, 108, 244, 0.16);
        transition: 0.3s ease-in;
        text-decoration: none;
    }

.recommended-option a.proff_buttons {
    background-color: #00c9a5;
    transition: 0.3s ease-in;
}


    .recommended-option a.proff_buttons:hover {
        box-shadow: 0 0 0 5px rgba(4, 210, 173, 0.39), 0 0 0 20px rgba(4, 210, 173, 0.16);
        transition: 0.3s ease-in;
        text-decoration: none;
    }



.price_wrap {
    text-align: center;
    width: 188px;
    height: 188px;
    display: grid;
    vertical-align: middle;
    margin: 20px auto;
    border-radius: 100%;
    background-color: #D9D7EE;
    box-shadow: 1px 1px 5px 0px rgba(118, 108, 214, 0.29) inset;
}


.recommended-option .price_wrap {
    text-align: center;
    display: grid;
    vertical-align: middle;
    margin: 20px auto;
    border-radius: 100%;
    background-color: rgba(4, 210, 173, 0.3);
    box-shadow: 1px 1px 5px 0px rgba(4, 210, 173, 0.25) inset;
}

.price_text {
    color: #FFF;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    font-family: Montserrat;
    font-size: 26px;
    font-style: normal;
    align-content: center;
    text-align: center;
    margin: auto;
    display: grid;
    border-radius: 100%;
    font-weight: 400;
    background-color: #7267d5;
    line-height: 20px;
    box-shadow: 2px 2px 10px rgba(118, 108, 244, 0.39), 2px 2px 0 rgb(95, 89, 168);
    text-transform: uppercase;
    /*    background: linear-gradient(317deg, #7267d5 0%, #7D73E1 100%);
*/
}

.recommended-option .price_text {
    background-color: #00c9a5;
    box-shadow: 2px 2px 10px rgba(4, 210, 143, 0.45), 2px 2px 0 #06bea0;
}


.proff_price_frame.year_price {
    margin-left: 20px;
/*    transition-delay: 0.4s;
*/}



    @media (max-width: 1220px) {
        .proff_price_frame {
            display: inline-block;
            width: 380px;
            text-align: left;
            position: relative;
            overflow: hidden;
            margin-bottom: 15px;
            padding: 40px 30px;
            padding-left: 185px;
        }



        .proff_header {
            text-align: left;
        }

        .proff_text {
            font-family: 'Montserrat';
            font-weight: 500;
            margin-top: 10px;
            text-align: left;
            font-size: 14px;
        }

        .proff_price_frame.year_price {
        margin-left:0;
        }

        .proff_price_frame.recommended-option {
            margin-left: 0;
        }

        .price_wrap {
            text-align: center;
            width: 180px;
            height: 180px;
            position: absolute;
            left: -15px;
            top: 1px;
            margin: 20px auto;
        }

        a.proff_buttons {
            display: block;
            position: relative;
            font-size: 17px;
            min-width: 160px;
            margin-left: -5px;
            margin-top: 20px;
            padding: 12px 20px;
        }
    }



    @media (max-height: 990px) {
        .proff_price_frame {
            margin-bottom: 20px;
        }

        .proff_price_frame {
            margin-bottom: 10px;
        }
    }


    @media (max-width: 767px) {

        .proff_price_frame.recommended-option {
            margin-left: 0;
        }

        .proff_price_frame {
            padding: 25px 25px;
            padding-left: 185px;
        }
    }

@media (max-width: 770px) {

    .price_wrap {
        text-align: center;
        width: 180px;
        height: 180px;
        position: absolute;
        left: -15px;
        top: -12px;
        margin: 20px auto;
    }
}

    @media (max-width: 440px) {

        a.proff_buttons {
            min-width: 57px;
            margin-left: -8px;
            margin-top: 15px;
            padding: 12px 20px;
        }

        .price_wrap {
            width: 140px;
            height: 140px;
            position: absolute;
            left: -15px;
            top: 9px;
            margin: 20px auto;
        }

        .price_text {
            width: 90px;
            height: 90px;
            font-size: 19px;
            font-weight: 600;
            line-height: 1;
        }

        .proff_price_frame {
            padding: 20px 20px;
            padding-left: 140px;
            width: 290px;
        }
    }
