/****************************/
/* PRICING PAGE             */
/****************************/
#pricingPage {
    padding:80px 20px 20px 20px;
    background-image:url(/static/images/backgrounds/cross-gray-bg.png);
    background-repeat: no-repeat;
}
#pricingPage h1 {
    font: 600 46px poppins, lucida, arial, sans-serif;
    text-align: center;
}
#pricingPage h2 {
    font: 26px merriweather, palatino, serif;
    font-weight: bold;
    font-style: italic;
    text-align: center;
    margin:20px 0;
}
/*--------------------------*/
/* PLANS                    */
/*--------------------------*/
#pricingPage__plans {
    display:flex;
    flex-flow:row nowrap;
    justify-content: center;
}
.pricingPage__plan {
    width:320px;
    margin:20px;
    padding:20px;
    border:1px solid var(--gray-200);
}
.pricingPage__plan h3 {
    font: 600 16px poppins, lucida, arial, sans-serif;
    margin: 0 0 12px 0;
    letter-spacing: 4px;
}
.pricingPage__plan p {
    font: 600 14px poppins, lucida, arial, sans-serif;
    margin: 10px 0;
}
.pricingPage__price {
    font: 600 16px poppins, lucida, arial, sans-serif;
    margin: 10px 0;
}
#pricingPage__freePlanButton, #pricingPage__premiumPlanButton {
    width:100%;
    margin:10px 0 20px 0;
}
.pricingPage__planDetails {
    margin:10px 0;
}
.pricingPage__planDetails h4 {
    font: bold 14px merriweather, palatino, serif;
}
.pricingPage__planDetails ul {
    padding-left:20px;
}
.pricingPage__planDetails li {
    font: 14px merriweather, palatino, serif;
    line-height: 1.57;
    margin:10px 0;
    list-style-image: url(/static/images/subscriptions/blue-check.svg);
}

/*--------------------------*/
/* COMPARE                  */
/*--------------------------*/
#pricingPage__compare h3 {
    background: url(/static/images/arrows/black-down-arrow.svg) no-repeat center bottom/20px 18px transparent;
    font: italic bold 23px merriweather, palatino, serif;
    text-align: center;
    margin: 80px 0 0 0;
    padding: 0 0 24px 0;
}
#pricingPage__compareHeader {
    max-width:770px;
    margin:20px auto 0 auto;
    display:flex;
    flex-flow:row nowrap;
    border:1px solid var(--gray-200);
    background-color: var(--gray-100);
}
.pricingPage__compareHeaderCell {
    width:50%;
    text-align: center;
    font: 600 16px poppins, lucida, arial, sans-serif;
    letter-spacing: 4px;
    padding: 20px 0;
}
#pricingPage__compareTable {
    max-width:770px;
    margin:0 auto;
    display:flex;
    flex-flow:row nowrap;
}
.pricingPage__compareCell {
    width:50%;
    padding: 20px;
}
.pricingPage__compareCell.right {
    border-left:1px solid var(--gray-200);
}
.pricingPage__compareCell div {
    background-image:url(/static/images/misc/stroke-blue.png);
    background-position: left 10px;
    background-repeat: no-repeat;
    background-size: 15px 2px;
    font: 14px merriweather, palatino, serif;
    line-height: 1.57;
    min-height:26px;
    padding:0 0 0 24px;
}
.pricingPage__compareCell div.spacer {
    background-image:unset;
}

/*--------------------------*/
/* LINKS                    */
/*--------------------------*/
#pricingPage__links {
    max-width:770px;
    margin: 80px auto 120px auto;
}
#pricingPage__links h3 {
    font: bold italic 23px merriweather, palatino, serif;
    text-align: center;
}
#pricingPage__linksBar {
    display:flex;
    flex-flow:row nowrap;
    justify-content: space-evenly;
    margin:40px 0;
}
#pricingPage__linksBar a {
    font: 16px poppins, lucida, arial, sans-serif;
}

/*--------------------------*/
/* MOBILE                   */
/*--------------------------*/
@media only screen and (max-width : 767px) and (orientation : portrait) {
    #pricingPage h1 { font-size: 36px; }
    #pricingPage h2 { font-size: 20px; }
    #pricingPage__plans { flex-flow:column; }
    .pricingPage__plan { width:calc(100% - 80px); }
    .pricingPage__plan p { font-weight: 300; font-size: 12px; }
    #pricingPage__compare h3 { margin: 40px 0 0 0; }
    .pricingPage__compareCell div {
        font-size: 12px;
        min-height:36px;
        background-position: left 8px;
    }
    #pricingPage__links { margin: 40px auto; }
    #pricingPage__linksBar { flex-flow:column; margin:20px 0;}
    #pricingPage__linksBar a { text-align:center; margin:10px 0; }
}