/* GOOGLE FONT "LATO" */
@import url(//fonts.googleapis.com/css?family=Lato:400,100,900);

/* =====[ COLORS ]============================================================================== */
.ptp-design4-front,.ptp-design4-back {
    font-family:Lato, sans-serif;
    float:left;
    width:220px;
    height:220px;
    background:#FFF;
    -webkit-border-radius:100%;
    -moz-border-radius:100%;
    border-radius:100%;
    -webkit-box-shadow:0 0 10px 0 #dbdbdb;
    box-shadow:0 0 10px 0 #dbdbdb;
    -webkit-transition:all .3s ease-in-out;
    -moz-transition:all .3s ease-in-out;
    -o-transition:all .3s ease-in-out;
    -ms-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out;
}

.ptp-design4-color-1-bg { background:#6baba1; }
.ptp-design4-color-1-font,.ptp-design4-color1-price { color:#6baba1; }

.ptp-design4-color-2-bg { background:#e0a32e; }
.ptp-design4-color-2-font,.ptp-design4-color-2-price { color:#e0a32e; }

.ptp-design4-color-3-bg { background:#e7603b; }
.ptp-design4-color-3-font,.ptp-design4-color-3-price { color:#e7603b; }

.ptp-design4-color-4-bg { background:#9ca780; }
.ptp-design4-color-4-font,.ptp-design4-color-4-price { color:#9ca780; }

/* MAIN LIST */
.ptp-design4-pricingtable { display:block; text-align:center; width:100%; margin:20px 0 0; padding:0; }
.ptp-design4-pricingtable i { padding-right:5px; }
.ptp-design4-pricingtable > .ptp-design4-col { width:220px; height:220px; display:inline-block; margin:8px; }

/* FRONT ELEMENTS */
.ptp-design4-front > div { text-align:center; /*color:#60bad7;*/}
.ptp-design4-title { font-size:25px; text-transform:uppercase; text-align:center; padding:25px 10px 17px; }
.ptp-design4-price span { font-weight:900; vertical-align:top; line-height:0.7; }
.ptp-design4-price .ptp-design4-total { font-size:90px; }
.ptp-design4-currency,.ptp-design4-end { font-size:40px; }
.ptp-design4-description { text-align:center; }
.ptp-design4-front .ptp-design4-description { color:#9b9b9b; font-size:14px; line-height:1.2; padding:14px 45px 0; }

/* BACK ELEMENTS */
.ptp-design4-back .ptp-design4-title { color:#FFF; }
.ptp-design4-back .ptp-design4-description { width:70%; margin:auto; padding: 0px; }
.ptp-design4-back .ptp-design4-description .ptp-design4-bullet-item { color:#FFF; text-align:center; line-height:1.4; padding: 0px; margin: 0px; }
.ptp-design4-popular { font-size:30px; /*color:#60bad7;*/ position:absolute; left:0; top:0; opacity:0; }

/* CIRCLE ANIMATIONS */

.ptp-design4-circle {
    border-radius:50%;
    position:relative;
    -webkit-transition:all .4s ease-in-out;
    -moz-transition:all .4s ease-in-out;
    -o-transition:all .4s ease-in-out;
    -ms-transition:all .4s ease-in-out;
    transition:all .4s ease-in-out;
}

.ptp-design4-info {
    position:absolute;
    border-radius:50%;
    opacity:0;
    -moz-transform:scale(0) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -webkit-transform:scale(0) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -o-transform:scale(0) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -ms-transform:scale(0) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    transform:scale(0) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -webkit-backface-visibility:hidden;
}

.ptp-design4-circle:hover .ptp-design4-front {
    -moz-transform:scale(1.1);
    -webkit-transform:scale(1.1);
    -o-transform:scale(1.1);
    -ms-transform:scale(1.1);
    transform:scale(1.1);
    opacity:1;
}

.ptp-design4-circle:hover .ptp-design4-info {
    -moz-transform:scale(1) rotate(360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -webkit-transform:scale(1) rotate(360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -o-transform:scale(1) rotate(360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -ms-transform:scale(1) rotate(360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    transform:scale(1) rotate(360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    opacity:1;
}

.ptp-design4-circle:hover .ptp-design4-front-popular {
    border-radius:10% 50% 50% 50%;
}

.ptp-design4-circle:hover .ptp-design4-popular {
    opacity:1;
    animation:popularAnim 1s 1;
    -webkit-animation:popularAnim 1s 1;
}

@keyframes popularAnim
{
    from {opacity:0; left:40px;}
    to {opacity:1; left:0;}
}

@-webkit-keyframes popularAnim /* Safari and Chrome */
{
    from {opacity:0; left:40px;}
    to {opacity:1; left:0;}
}