/* This css file is to over write bootstarp css
---------------------------------------------------------------------- 
Theme Name: Circle - Responsive Round Pricing Tables
Theme URI: http://bootstrapmb.com
Author: AdamThemes
Author URI: http://bootstrapmb.com
Description: Circle - Responsive Round Pricing Tables by AdamThemes
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: pricing, table, css3, circle, adamthemes, responsive
*---------------------------------------------------------------------- */


/*---------------------------------------------------------------------- /
Table of Contents 
------------------------------------------------------------------------ /
// . General Settings
// . Sections
// . Circle Animation & Hover
// . Classic Circle & Hover
// . Pricing Buttons
// . FontAwesome fa class
// . Media Queries

------------------------------------------------------------------------ /
Table of Contents End
------------------------------------------------------------------------*/


/* ======= GENERAL  SETTINGS  ======= */

body {
    font-family: "Lato", sans-serif;
    font-weight: 300;
    color: #3C4857;
    margin: 0;
}

a {
    color: #e91e63;
    text-decoration: none;
}

a:hover {
    color: #e91e63;
    text-decoration: underline;
}

p {
    color: #3C4857;
}

.header {
    padding: 15px 0;
    text-align: center;
}

.footer {
    padding: 15px 0;
    background: #fafafa;
    text-align: center;
}

h3,
.h3 {
    font-size: 1.5em;
    line-height: 1.5em;
    margin: 15px 0 15px;
}

h4,
.h4 {
    font-size: 1.3em;
    line-height: 1.55em;
}

h5,
.h5 {
    font-size: 0.9em;
    line-height: 1em;
    margin: 15px 0;
    font-weight: 300;
}

h6,
.h6 {
    font-size: 1.0em;
    text-transform: uppercase;
    font-weight: 700;
    color: #3C4857;
}


/* ======= SECTIONS  ======= */

.section-pricing {
    z-index: 3;
    position: relative;
}

.section-gray {
    background: #E5E5E5;
}

[class*="pricing-"] {
    padding: 120px 0 120px 0;
}


/* ======= CIRCLE ANIMATIONS & HOVER  ======= */

.block {
    list-style: none;
    display: block;
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 0
}

.block i {
    padding-right: 5px
}

.block >li {
    width: 250px;
    height: 250px;
    display: inline-block;
    margin: 12px
}

.circle-animation-front,
.circle-animation-back {
    float: left;
    width: 250px;
    height: 250px;
    background: #fff;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    -webkit-box-shadow: 0 0 3px 0 #e3dfd6;
    box-shadow: 0 0 3px 0 #e3dfd6;
    -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;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.color-info .bg,
.color-info .choose span {
    background: linear-gradient(60deg, #26c6da, #0097a7);
}

.color-info .title,
.color-info .price,
.color-info .icon {
    color: #26c6da
}

.color-warning .bg,
.color-warning .choose span {
    background: linear-gradient(60deg, #ffa726, #f57c00);
}

.color-warning .title,
.color-warning .price,
.color-warning .icon {
    color: #ffac34
}

.color-success .bg,
.color-success .choose span {
    background: linear-gradient(60deg, #66bb6a, #388e3c);
    color: #ffffff;
}

.color-success .title,
.color-success .price,
.color-success .icon {
    color: #6ec071
}

.color-danger .bg,
.color-danger .choose span {
    background: linear-gradient(60deg, #ef5350, #d32f2f);
}

.color-danger .title,
.color-danger .price,
.color-danger .icon {
    color: #f6594e
}

.circle-animation-front > div {
    text-align: center
}

.circle-animation-front span.icon {}

.circle-animation-front span.icon img {
    position: relative;
    font-size: 60px;
    padding: 0;
    width: 48px; /* 示例宽度 */
    height: 48px; /* 示例高度 */
}

.title {
    font-size: 1.0em;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    padding: 40px 0 15px 0;
}

.price span {
    vertical-align: top;
    line-height: 0.7
}

.price span.currency {
    position: relative;
    top: 25px;
    font-size: 26px;
    font-weight: 400;
}

.price .total {
    font-size: 3.8em;
    line-height: 1.1em;
    font-weight: 700;
    font-family: "Lato", "Times New Roman", serif;
}

.currency,
.end {
    position: relative;
    top: 40px;
    font-size: 18px;
    font-weight: 400;
    font-family: "Lato", "Times New Roman", serif;
}

.circle-animation-back .title,
.circle-animation-back .currency,
.circle-animation-back .price span,
.circle-animation-back p {
    color: #fff;
}

.circle-animation-back .description ul {
    list-style: none;
    padding: 0;
    max-width: 240px;
    margin: 10px auto;
}

.circle-animation-back .description ul li {
    color: #FFF!important;
    text-align: center;
    list-style: none;
    line-height: 1.5;
    font-size: 15px;
}

.circleanimation {
    text-align: center;
    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 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.information {
    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
}

.circleanimation:hover .circle-animation-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
}

.circleanimation:hover .information {
    -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
}


/* ======= CLASSIC CIRCLE & HOVER  ======= */

.circle {
    background: #ffffff;
    padding: 20px;
    text-align: center;
    height: 210px;
    width: 210px;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    /* Firefox 4 */
    -webkit-transition: all 0.5s;
    /* Safari and Chrome */
    -o-transition: all 0.5s;
    /* Opera */
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.img-circle {
    border-radius: 50%;
}

.circle h6 {
    margin: 15px 0 15px 0;
    padding: 0;
}

.circle span.icon i {
    position: relative;
    padding: 0;
    font-size: 3.8em;
    line-height: 1.15em;
}

.circle span.price-large {
    font-size: 3.8em;
    line-height: 1.15em;
    font-weight: 700;
    font-family: "Lato", "Times New Roman", serif;
}

.price-dollar {
    position: relative;
    top: -17px;
    font-size: 26px;
    font-weight: 400;
}

.price-small {
    font-size: 18px;
    font-weight: 400;
    font-family: "Lato", "Times New Roman", serif;
}

.c1:hover {
    background: #39b3d7;
    color: #ffffff;
}

.c1 .info {
    color: #39b3d7;
}

.c1:hover .info {
    color: #ffffff;
}

.c1:hover p {
    color: #fff;
}

.c2:hover {
    background-color: #ff9800;
    color: #ffffff;
}

.c2:hover p {
    color: #fff;
}

.c2 .warning {
    color: #ff9800;
}

.c2:hover .warning {
    color: #ffffff;
}

.c3:hover {
    background: linear-gradient(60deg, #66bb6a, #388e3c);
    color: #ffffff;
}

.c3:hover p {
    color: #fff;
}

.c3 .success {
    color: #4caf50;
}

.c3:hover .success {
    color: #ffffff;
}

.c4:hover {
    background: #f44336;
    color: #ffffff;
}

.c4:hover p {
    color: #fff;
}

.c4 .danger {
    color: #f44336;
}

.c4:hover .danger {
    color: #ffffff;
}

.c5:hover {
    background: #ffffff;
    color: #ffffff;
}

.c5:hover p {
    color: #fff;
}

.c5 .white {
    color: #ffffff;
}

.c5:hover .white {
    color: #ffffff;
}

.c5 .price-small {
    color: #fff;
}

.c5 p {
    color: #fff;
}


/* Circle Info CSS  */

.circle-info {
    background: linear-gradient(60deg, #26c6da, #0097a7);
    padding: 20px;
    text-align: center;
    height: 210px;
    width: 210px;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    /* Firefox 4 */
    -webkit-transition: all 0.5s;
    /* Safari and Chrome */
    -o-transition: all 0.5s;
    /* Opera */
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.img-circle-info {
    border-radius: 50%;
}

.circle-info h6 {
    margin: 15px 0 15px 0;
    padding: 0;
    color: #fff;
}

.circle-info p {
    color: #fff;
}

.circle-info span.icon i {
    position: relative;
    top: -17px;
    font-size: 26px;
    font-weight: 400;
    color: #fff;
}

.circle-info span.price-large {
    font-size: 3.8em;
    line-height: 1.15em;
    font-weight: 700;
    font-family: "Lato", "Times New Roman", serif;
    color: #fff;
}

.price-small {
    font-size: 18px;
    font-weight: 400;
    font-family: "Lato", "Times New Roman", serif;
}

.circle-info .price-small {
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    font-family: "Lato", "Times New Roman", serif;
}

.c32:hover {
    background: linear-gradient(60deg, #26c6da, #0097a7);
    color: #ffffff;
}

.c32 .info {
    color: #FFF;
}

.c32:hover .info {
    color: #ffffff;
}


/* Circle Success CSS  */

.circle-success {
    background: linear-gradient(60deg, #66bb6a, #388e3c);
    padding: 20px;
    text-align: center;
    height: 210px;
    width: 210px;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    /* Firefox 4 */
    -webkit-transition: all 0.5s;
    /* Safari and Chrome */
    -o-transition: all 0.5s;
    /* Opera */
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.img-circle-success {
    border-radius: 50%;
}

.circle-success h6 {
    margin: 15px 0 15px 0;
    padding: 0;
    color: #fff;
}

.circle-success p {
    color: #fff;
}

.circle-success span.icon i {
    position: relative;
    top: -17px;
    font-size: 26px;
    font-weight: 400;
    color: #fff;
}

.circle-success span.price-large {
    font-size: 3.8em;
    line-height: 1.15em;
    font-weight: 700;
    font-family: "Lato", "Times New Roman", serif;
    color: #fff;
}

.price-small {
    font-size: 18px;
    font-weight: 400;
    font-family: "Lato", "Times New Roman", serif;
}

.circle-success .price-small {
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    font-family: "Lato", "Times New Roman", serif;
}

.c33:hover {
    background: linear-gradient(60deg, #66bb6a, #388e3c);
    color: #ffffff;
}

.c33 .success {
    color: #FFF;
}

.c33:hover .success {
    color: #ffffff;
}


/* Circle Warning CSS  */

.circle-warning {
    background: linear-gradient(60deg, #ffa726, #f57c00);
    padding: 20px;
    text-align: center;
    height: 210px;
    width: 210px;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    /* Firefox 4 */
    -webkit-transition: all 0.5s;
    /* Safari and Chrome */
    -o-transition: all 0.5s;
    /* Opera */
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.img-circle-warning {
    border-radius: 50%;
}

.circle-warning h6 {
    margin: 15px 0 15px 0;
    padding: 0;
    color: #fff;
}

.circle-warning p {
    color: #fff;
}

.circle-warning span.icon i {
    position: relative;
    top: -17px;
    font-size: 26px;
    font-weight: 400;
    color: #fff;
}

.circle-warning span.price-large {
    font-size: 3.8em;
    line-height: 1.15em;
    font-weight: 700;
    font-family: "Lato", "Times New Roman", serif;
    color: #fff;
}

.price-small {
    font-size: 18px;
    font-weight: 400;
    font-family: "Lato", "Times New Roman", serif;
}

.circle-warning .price-small {
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    font-family: "Lato", "Times New Roman", serif;
}

.c34:hover {
    background: linear-gradient(60deg, #ffa726, #f57c00);
    color: #ffffff;
}

.c34 .warning {
    color: #FFF;
}

.c34:hover .warning {
    color: #ffffff;
}


/* Circle Danger CSS  */

.circle-danger {
    background: linear-gradient(60deg, #ef5350, #d32f2f);
    padding: 20px;
    text-align: center;
    height: 210px;
    width: 210px;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    /* Firefox 4 */
    -webkit-transition: all 0.5s;
    /* Safari and Chrome */
    -o-transition: all 0.5s;
    /* Opera */
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.img-circle-danger {
    border-radius: 50%;
}

.circle-danger h6 {
    margin: 15px 0 15px 0;
    padding: 0;
    color: #fff;
}

.circle-danger p {
    color: #fff;
}

.circle-danger span.icon i {
    position: relative;
    top: -17px;
    font-size: 26px;
    font-weight: 400;
    color: #fff;
}

.circle-danger span.price-large {
    font-size: 3.8em;
    line-height: 1.15em;
    font-weight: 700;
    font-family: "Lato", "Times New Roman", serif;
    color: #fff;
}

.price-small {
    font-size: 18px;
    font-weight: 400;
    font-family: "Lato", "Times New Roman", serif;
}

.circle-danger .price-small {
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    font-family: "Lato", "Times New Roman", serif;
}

.c35:hover {
    background: linear-gradient(60deg, #ef5350, #d32f2f);
    color: #ffffff;
}

.c35 .danger {
    color: #FFF;
}

.c35:hover .danger {
    color: #ffffff;
}


/* ======= PRICING BUTTONS  ======= */

.btn,
.navbar > li > a.btn {
    border: none;
    border-radius: 20px;
    position: relative;
    padding: 6px 18px;
    margin: 0px;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0;
    will-change: box-shadow, transform;
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn.btn-round {
    border-radius: 30px;
}


/* btn-danger */

.btn.btn-danger {
    color: #FFFFFF;
    background-color: #f6594e;
    border-color: #f6594e;
    box-shadow: 0 2px 2px 0 rgba(244, 67, 54, 0.14), 0 3px 1px -2px rgba(244, 67, 54, 0.2), 0 1px 5px 0 rgba(244, 67, 54, 0.12);
}

.btn.btn-danger:focus,
.btn.btn-danger:active,
.btn.btn-danger:hover {
    box-shadow: 0 14px 26px -12px rgba(244, 67, 54, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(244, 67, 54, 0.2);
}


/* btn-success */

.btn.btn-success {
    color: #FFFFFF;
    background-color: #6ec071;
    border-color: #6ec071;
    box-shadow: 0 2px 2px 0 rgba(76, 175, 80, 0.14), 0 3px 1px -2px rgba(76, 175, 80, 0.2), 0 1px 5px 0 rgba(76, 175, 80, 0.12);
}

.btn.btn-success:focus,
.btn.btn-success:active,
.btn.btn-success:hover {
    box-shadow: 0 14px 26px -12px rgba(76, 175, 80, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(76, 175, 80, 0.2);
}


/* btn-info */

.btn-info {
    color: #fff;
    background-color: #5bc0de;
    border-color: #5bc0de;
    box-shadow: 0 2px 2px 0 rgba(0, 188, 212, 0.14), 0 3px 1px -2px rgba(0, 188, 212, 0.2), 0 1px 5px 0 rgba(0, 188, 212, 0.12);
}

.btn.btn-info:focus,
.btn.btn-info:active,
.btn.btn-info:hover {
    background-color: #70c8e2;
    border-color: #70c8e2;
    box-shadow: 0 2px 2px 0 rgba(0, 188, 212, 0.14), 0 3px 1px -2px rgba(0, 188, 212, 0.2), 0 1px 5px 0 rgba(0, 188, 212, 0.12);
    color: #fff;
}


/* btn-warning */

.btn-warning {
    color: #fff;
    background-color: #ffac34;
    border-color: #ffac34;
    box-shadow: 0 2px 2px 0 rgba(255, 152, 0, 0.14), 0 3px 1px -2px rgba(255, 152, 0, 0.2), 0 1px 5px 0 rgba(255, 152, 0, 0.12);
}

.btn.btn-warning:focus,
.btn.btn-warning:active,
.btn.btn-warning:hover {
    box-shadow: 0 14px 26px -12px rgba(255, 152, 0, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(255, 152, 0, 0.2);
    background-color: #ffac34;
    border-color: #ffac34;
    color: #fff;
}


/* btn-white */

.btn.btn-white {
    color: #3C4857;
    background-color: #fff;
    border-color: #fff;
    box-shadow: 0 2px 2px 0 rgba(153, 153, 153, 0.14), 0 3px 1px -2px rgba(153, 153, 153, 0.2), 0 1px 5px 0 rgba(153, 153, 153, 0.12);
}

.btn.btn-white:focus,
.btn.btn-white:active,
.btn.btn-white:hover {
    box-shadow: 0 4px 4px 0 rgba(153, 153, 153, 0.24), 0 3px 1px -2px rgba(153, 153, 153, 0.3), 0 1px 5px 0 rgba(153, 153, 153, 0.32);
}


/* FontAwesome fa class */

.fa {
    font-size: 12px;
}


/* ======= MEDIA QUERIES  ======= */

@media only screen and (min-width:0) and (max-width:959px) {
    .content-wrapper {
        top: 0;
    }
    #center {
        top: 0;
        height: auto;
        padding: 30px 0;
    }
}

@media only screen and (min-width:480px) and (max-width:959px) {
    #center {
        left: -239px;
        width: 478px;
    }
}

@media only screen and (min-width:0px) and (max-width:479px) {
    #center {
        left: -118px;
        width: 236px;
    }
}