/* this page contains overrides for the plans styles */
/* it gives the grey/green with "most popular" plan look */

.plans section[role="main"] .starred h2 {
    font-family: Helvetica, arial, sans-serif;
    font-weight:lighter;
}
.plans section[role="main"] .starred .favorite {
    background:#fff url(images/gold_star.svg) no-repeat 5% .5em;
    background-size: 1.125em;
    text-transform: uppercase;
    color: #2a7;
    margin-top: -1.5em;
    margin-left: 20%;
    margin-right: 20%;
    width: 47%;
    font-family: Helvetica, arial, sans-serif;
    font-weight:bold;
    padding:.455em 4% .545em 11%;
    -webkit-border-radius: 2px;
       -moz-border-radius: 2px;
         -o-border-radius: 2px;
            border-radius: 2px;
    box-shadow: 0px 2px 0px 0px #1F9865;
}
section[role="main"] .starred .compare_plans header {
    padding: 4em 0 0;
    background-color:#678!important;
}
    section[role="main"] .starred .compare_plans .advanced_plan  header {
        background-color:#3ca!important;
    }
    section[role="main"] .starred .compare_plans header h4 {
        color:#456!important;
        margin-top: .334em;
    }
        section[role="main"] .starred .compare_plans .advanced_plan header h4 {
            color:#086!important;
        }
        section[role="main"] .starred .compare_plans .team_plan header h4 {
            color:#fff!important;
        }
        section[role="main"] .starred .compare_plans header h4 .amount {
            color:#fff!important;
        }
            section[role="main"] .starred .compare_plans header h4 .amount .currency {
                font-size: .6em;
                vertical-align: top;
                font-weight: lighter;
                padding-top: 0.25em;
                display: inline-block;
            }
    section[role="main"] .starred .compare_plans header a,
    section[role="main"] .starred .compare_plans footer a {
        width: 80%;
        padding-right: 15%;
        background-color:#456!important;
        background-position: 95% 19px!important;
        color:#fff!important;
        -webkit-transition: all .5s linear;
           -moz-transition: all .5s linear;
            -ms-transition: all .5s linear;
             -o-transition: all .5s linear;
                transition: all .5s linear;
    }
        section[role="main"] .starred .compare_plans header a:hover,
        section[role="main"] .starred .compare_plans footer a:hover {
            background-color:#9ac!important;
        }
    section[role="main"] .starred .compare_plans header a {
        margin: 2.5em 0 0;
        padding-top: 1.2em;
    }
        section[role="main"] .starred .compare_plans .advanced_plan header a,
        section[role="main"] .starred .compare_plans .advanced_plan footer a {
            background-color:#2b9!important;
        }
            section[role="main"] .starred .compare_plans .advanced_plan header a:hover,
            section[role="main"] .starred .compare_plans .advanced_plan footer a:hover {
                background-color:#2eb!important;
            }
section[role="main"] .starred .compare_plans .description {
    padding:1px;
}
    section[role="main"] .starred .compare_plans .description h3 {
        display:none;
    }
    section[role="main"] .compare_plans .description ul li {
        margin: 0.4em 0;
    }
section[role="main"] .starred .compare_plans footer a {
    margin: 0;
    padding-top: 1.125em;
    padding-bottom: 1.125em;
}
.plans section[role="main"] .starred h3.divider {
    margin:0;
    height:0;
}
.plans .starred .full .col h4 {
    font-weight: bolder;
    font-size: 1.6em;
    margin:0;
}
.plans .starred .full .col p {
    font-size: 1.3em;
    margin: 0;
}
section[role="main"] .starred .compare_plans.team_contact div.form {
    background:#456;
    margin:5em 0 0;
}
    section[role="main"] .starred .compare_plans.team_contact div.form a.back {
        background:#fff!important;
        color:#456!important;
        border:none;
        top: -5.5em;
        height: 1em;
        padding: 1em 1.5em;
    }


@media only screen and (min-width: 540px) {

    section[role="main"] .starred .compare_plans div.plan {
        margin-top: 1.25em;
    }

}

@media only screen and (min-width: 750px) {

    section[role="main"] .compare_plans .description {
        min-height: 28em;
    }

}