/*////// HERO SECTION //////*/
section.hero-section {
    background-color: #F3F3F3;
}
div.hero-container {
    max-width: 100% !important;
    height: 55rem;
    background-color: #F3F3F3;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
/*//// HERO FLEX ////*/
div.hero-flex-container {}
div.hero-flex-item {
    margin: 0;
    padding: 0;
}

/*// SHOPPING CART //*/
#shopping-cart-icon {
    position: fixed;
    z-index: 10000;
    right: -0.5rem;
    top: 46.5%;
    width: 9rem;
    height: auto;
}





/*////// PHLASH BANNER SECTION //////*/
section.phlash-banner-section {
    background: var(--Grey-3, #DCDCE5);
    /*background: #3AC6F4;*/
}
div.phlash-banner-container {
    padding: 3rem 6rem;
}
div.phlash-banner-flex-container { }
div.phlash-banner-flex-item {}
#left-phlash-banner-flex-item {}
#left-phlash-banner-flex-item h1 {
    padding: 0;
    margin: 0;
    color: var(--Dark-Blue, #26275F); 
    /* H1 */
    font-family: "Open Sans", sans-serif;
    font-size: 4rem;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    text-transform: capitalize;
    color: var(--Purple, #543894);
}
#right-phlash-banner-flex-item {}
#right-phlash-banner-flex-item p.p1 {
    color: var(--Dark, #242431);
}






/*////// POSTS / PLAN  SECTION //////*/
section.blog-section {}
section.blog-section div.blog-container {
    padding: 6rem 6rem 0 6rem;
}
/*////  ALL PLANS FLEX CONTAINER ////*/
div.blog-container div.all-news-flex-container {
    min-height: 28rem;
    margin-bottom: 4rem;
    justify-content: flex-start;    
}

div.all-news-flex-container div.blog-flex-container {
    min-height: 28rem;
    margin-bottom: 4rem;
    justify-content: flex-start;
    border-radius: 0.6rem;
    border-top: .5rem solid var(--Purple, #543894);
}

/*// RIGHT //*/
div.blog-flex-container div.blog-post-thumb {
    position: relative;
    max-width: 42.7rem;
    padding: 4.5rem;
    border-radius: 0.6rem 0rem 0rem 0.6rem;
    background: var(--Aqua-Light, #BDE3E2);
    background: #3AC6F4; 
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/*// RIGHT //*/
div.blog-flex-container div.blog-post-body {
    /*max-width: calc( 99.9% - 42.7rem );*/
    padding: 4.5rem 6rem;
    background: var(--Grey-4, #F8F8F8);
}

div.blog-flex-container div.blog-post-body h2,
div.blog-flex-container div.blog-post-body h2 a {
    width: 80%;
    color: var(--Dark-Blue, #26275F);
    font-family: "Open Sans", sans-serif;
    font-size: 3rem;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    text-transform: capitalize;
    color: var(--Purple, #543894);  
}

div.blog-flex-container div.blog-post-body p, 
div.blog-flex-container div.blog-post-body p.p2, 
div.blog-flex-container div.blog-post-body ul li {
    color: var(--Dark, #242431);
    font-family: "Open Sans", sans-serif;
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.44; /* 144.444% */
}
div.blog-flex-container div.blog-post-body p, 
div.blog-flex-container div.blog-post-body p.p2, 
div.blog-flex-container div.blog-post-body ul {
    margin-bottom: 1.4rem;
}
div.blog-flex-container div.blog-post-body ul {
    padding-left: 2rem;
}
div.blog-flex-container div.blog-post-body img {
    margin: 3rem 0;
    max-width: 40%;
}

/*//// BLOG EXCERPT ////*/
div.blog-flex-container div.blog-post-excerpt,
div.blog-flex-container div.blog-post-excerpt p, 
div.blog-flex-container div.blog-post-excerpt p.p2, 
div.blog-flex-container div.blog-post-excerpt ul li {
    color: var(--Dark, #242431);
    font-family: "Open Sans", sans-serif;
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.44; /* 144.444% */
}


/*//// BLOG BUTTONS ////*/
div.button-container {
    width: auto;
    height: auto;
    padding: 0 0 0 .2rem;
    margin: 0;
}
div.button-container a.plan-button {
    display: inline-block;
    height: auto;
    min-width: 14rem;
    padding: 0.7rem 3rem;
    margin: 3.5rem 3.5rem 0 0;
    border-radius: 0.6rem;
    background: var(--Yellow-1, #FDB827);
    box-shadow: 0px 3px 5px 0px rgba(36, 36, 49, 0.25);
    color: var(--Dark, #242431);
    text-align: center;
    font-family: "Open Sans", sans-serif;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    letter-spacing: 0.048rem;
    text-transform: uppercase;
    background: var(--Purple, #543894);
    color: #ffffff;  
}




/*////// ADDITIONAL QUESTIONS SECTION //////*/
section.questions-section {
    background: var(--Grey-3, #DCDCE5);
    background: rgba(220, 220, 229, 1);
    background: #ffffff;
}
div.questions-container {
    padding: 4rem 32.5rem 9rem 32.5rem;
}
div.questions-flex-container { }

/*// FULL WIDTH BOXES //*/
div.questions-banner-flex-item {
    padding: 4rem 0 5rem 0;
}
div.questions-banner-flex-item h2 {
    color: var(--Dark, #242431);
    text-align: center;
    /* H2 */
    font-family: "Open Sans", sans-serif;
    font-size: 3rem;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    text-transform: capitalize;
    color: var(--Purple, #543894);
}

/*// LEFT / RIGHT BOXES //*/
div.questions-flex-item {
    max-width: 34.5rem;
    padding: 3.5rem;
    border-radius: 1.6rem;
    text-align: center;
    background: #ffffff;
    box-shadow: 0px -5px 0px 0px #543894, 0px 0px 15px 0px rgba(54, 58, 65, 0.15);
}
div.questions-flex-item h3 {
    color: var(--Dark-Grey, #363A41);
    text-align: center;
    /* H3 */
    font-family: "Open Sans", sans-serif;
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 800;
    line-height: 1.44; /* 144% */
    text-transform: capitalize;
}
div.questions-flex-item p.p3 {
    color: var(--Dark-Grey, #363A41);
    text-align: center;
    /* P3 */
    font-family: "Open Sans", sans-serif;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.56; /* 156.25% */
}
div.questions-flex-item a.question-button {
    display: inline-block;
    height: auto;
    padding: 0.7rem 3rem;
    margin: 3.5rem 0 0 0;
    border-radius: 0.6rem;
    background: var(--Yellow-1, #FDB827);
    box-shadow: 0px 3px 5px 0px rgba(36, 36, 49, 0.25);
    color: var(--Dark, #242431);
    text-align: center;
    font-family: "Open Sans", sans-serif;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    letter-spacing: 0.048rem;
    text-transform: uppercase;
    background: var(--Purple, #543894);
    color: #ffffff;
    width: 90%;
    max-width: 25rem;
}
/*// SPECIFICS //*/
#left-questions-flex-item {}
#right-questions-flex-item {}





/*////// GRANULAR RESPONSIVE //////*/
/*// MOBILE SCREEN //*/
@media only screen and (max-width: 1024px) { 

        /*////// BANNER SECTION //////*/
        #left-phlash-banner-flex-item h1 br { display: none; }
        #right-phlash-banner-flex-item p.p1 br { display: none; }

        /*////// PLAN SECTION //////*/
        div.plan-flex-container div.left-plan-detail { width: 100%; max-width: 100%; height: auto; }
        div.plan-flex-container div.left-plan-detail h2 { width: 100%; }
        
        div.help-container { top: 2rem; bottom: initial; right: 0; width: 50%; }
        div.help-container h4 { width: 90%; }
        div.help-container p { width: 90%; }

        div.plan-flex-container div.right-plan-detail { width: 100%; max-width: 100%; height: auto; }

}
/*// SMALL MOBILE //*/
@media only screen and (max-width: 851px) { 

        /*////// BANNER SECTION //////*/
        section.phlash-banner-section div.phlash-banner-container { padding: 2.5rem 1.5rem; background: var(--Grey-3, #DCDCE5); }
        #left-phlash-banner-flex-item { width: 100%; text-align: center; }
        #left-phlash-banner-flex-item h1 {
            margin-bottom: 1rem;
            color: var(--Dark-Blue, #26275F);
            text-align: center;
            font-style: normal;
            font-weight: 800;
            line-height: 1.3;
            text-transform: capitalize;
        }
        #right-phlash-banner-flex-item { text-align: center; }
        #right-phlash-banner-flex-item p.p1 { 
            color: var(--Dark, #242431); 
            text-align: center;            
            font-style: normal;
            font-weight: 400;
            line-height: 1.5;
        }


        /*////// BLOG SECTION //////*/
        section.blog-section div.blog-container { padding: 2.5rem 1.5rem 6rem 1.5rem; }
        div.blog-flex-container div.left-plan-detail { max-width: 100%; padding: 4rem 2rem; }
        div.blog-flex-container div.blog-post-thumb { }
        div.blog-flex-container div.blog-post-thumb h2 { width: 100%; }
        div.blog-flex-container div.blog-post-body { max-width: 100%; padding: 2rem 2rem; }


        /*////// ADDITIONAL QUESTIONS SECTION //////*/
        div.questions-container { padding: 2.5rem 3rem 6rem 3rem; }

} 
@media only screen and (max-width: 480px) {

        /*////// HERO SECTION //////*/
        section.hero-section { padding-top: 0; }
        section.hero-section div.hero-container { height: 45.7rem; background-position: 35% 100%; }


        /*////// BANNER SECTION //////*/
        section.phlash-banner-section div.phlash-banner-container { padding: 2.5rem 1.5rem; background: var(--Grey-3, #DCDCE5); }
        /*// LEFT //*/
        #left-phlash-banner-flex-item { text-align: center; }
        #left-phlash-banner-flex-item h1 { margin-bottom: 1rem; text-align: center; font-size: 2.8rem; line-height: 1.44; }
        #left-phlash-banner-flex-item h1 br { display: none; }
        /*// RIGHT //*/
        #right-phlash-banner-flex-item { text-align: center; }
        #right-phlash-banner-flex-item p.p1 { text-align: center; font-size: 1.6rem; font-style: normal; font-weight: 400; line-height: 1.55; }
        #right-phlash-banner-flex-item p.p1 br { display: none; }


        /*////// BLOG SECTION //////*/
        section.blog-section div.blog-container { padding: 2.5rem 1.5rem 6rem 1.5rem; }
        div.blog-flex-container div.left-plan-detail { max-width: 100%; padding: 4rem 2rem; }

        div.blog-flex-container div.blog-post-thumb { max-width: 100%; }
        div.blog-flex-container div.blog-post-thumb h2 { width: 100%; }
        div.blog-flex-container div.blog-post-body { max-width: 100%; padding: 2rem 2rem; }

 

        /*////// ADDITIONAL QUESTIONS SECTION //////*/
        div.questions-container { padding: 2.5rem 1.5rem 6rem 1.5rem; }

}
@media only screen and (max-width: 380px) { }
@media only screen and (max-width: 360px) { }
@media only screen and (max-width: 320px) { }



/*//// LANDSCAPE STYLES ////*/
@media screen and (max-width: 851px) and (orientation: landscape) { }
@media screen and (max-width: 667px) and (orientation: landscape) { }
@media screen and (max-width: 570px) and (orientation: landscape) { }