
/*#region MEDIA QUERIES */
/*#region  Extra large devices (large desktops, 1200px and up) */
@media (max-width: 1400px) {
    .mainMenu > li,
    .logoWrapper {
        margin-right: 4rem;
    }

}

/*#endregion*/


/*#region Large devices (tablets, desktops less than 1200px)*/
@media (max-width: 1199px) {

    .mainMenu > li,
    .logoWrapper {
        margin-right: 3rem;
    }
  
    /* content banners */
    .HeaderBannerWrapper.Large {
        height: 600px;
    }
    .totalsWrapper {
        padding:1rem;
    }
}
/*#endregion*/


/*#region Medium devices (tablets in portrait, less than 991px) */
@media (max-width: 991px) {

    .header {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
        -ms-grid-rows: 1fr auto;
        grid-template-rows: 1fr auto;
        height: auto;
        grid-row-gap: 5px;
    }
        .header .logoWrapper {
            grid-row: 1;
            grid-column: 1;
        }
        .header nav {
            grid-row: 2;
            grid-column: 1 / span 2;
        }
        .header .headerLinksWrapper {
            grid-row: 1;
            grid-column: 2;
            display:flex;
            justify-content: flex-end;
        }
    .headerLinks > ul {
        margin: 0;
    }
    .logoWrapper img {
        max-width: 300px;
    }
    .mainMenu {
        justify-content: space-between;
        margin: 0;
    }
        .mainMenu > li  {
            margin-right: 0;
        }
    .headerLinks a {
        margin: 0;
    }
    .headerLinksWrapper .jsHeaderLinkContainer {
        display: none;
    }

    .header .headerLinksWrapper #topcartlink {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 8rem;
        height: 6rem;
        align-items: center;
    }

    .header .headerLinksWrapper .headerLinksCart {
        position: relative;
        display: block;
        width: 50px;
        height: 43px;
        background: transparent url(/Themes/ConnectedFaith/Content/images/top_nav_cart_icon.svg) no-repeat;
        background-size: 50px 40px;
    }

    .header .headerLinksWrapper .headerLinksCartQty {
        display: inline-block;
        border-radius: 50%;
        font-size: 1.6rem;
        font-weight: 600;
        color: #333333 !important;
        width: 26px;
        height: 26px;
        position: absolute;
        left: 7px;
        top: -3px;
        text-align: center;
        line-height: 2.1rem;
        overflow: hidden;
    }
    .mainMenu li > ul {
        display: none;
    }

    .form-fields.twoColumnForm {
        grid-template-columns: 1fr;
    }
	
	.CFWhatPeopleSayWrapper .FlexWrapper .ItemWrapper:nth-child(3) {display: none;}

    
}

/*#endregion*/

@media screen and (min-width: 768px) {
    .mobileOnly {
        display: none;
    }
}
/*#region Small devices (landscape phones, less than 768px)  */
@media screen and (max-width: 767px) {

    .mobileHide {
        display: none;
    }
    h1 {
        font-size: 3rem;
    }

    h2, h3 {
        font-size: 2.4rem;
    }

    .ProductExtrasButtonText {
        border-bottom: 1px solid #79afcd;
    }

    .LinkProductExtrasButton {
        color: #79afcd;
        border-bottom: 1px solid #79afcd;
    }

    .productSelector li.selected .radioButton:after {
        background-color: #79afcd;
    }

    button, .button, .button-1, .button-2, input[type='submit'], input[type='button'] {
        padding: 1rem;
    }

    /* slider */
    .sliderNavWrapper .prev {
        background: #79afcd url('/Themes/ConnectedFaith/Content/images/carousel_arrow_left.svg') 8px 6px no-repeat;
    }

    .sliderNavWrapper .next {
        background: #79afcd url(/Themes/ConnectedFaith/Content/images/carousel_arrow_right.svg) 11px 6px no-repeat;
    }



    .customer-info-page .customerSettingsWrapper .form-fields .inputs {
        flex-direction: column;
    }

    .customer-info-page.readonly .customerSettingsWrapper .form-fields .inputs input {
        text-indent: 0;
    }

    .form-fields {
        grid-row-gap: 1rem;
    }


    /******************* cart **********************/

    .totalsWrapper {
        border: none;
        padding: 0;
    }

    .cart td.mCartButtons .mRemoveItem {
        color: #79afcd;
    }


    .twoColumnWrapper {
        grid-template-columns: 1fr;
    }
    /* mega menu */
    .header {
        padding: 0;
        -ms-grid-columns: 8rem 1fr 8rem;
        grid-template-columns: 8rem 1fr 8rem;
        -ms-grid-rows: 1fr;
        grid-template-rows: 1fr;
    }

        .header nav {
            grid-column: 1;
            grid-row: 1;
            width: 8rem;
            height: 6rem;
            position: relative;
            align-items: center;
        }

        .header .logoWrapper {
            grid-column: 2;
        }

        .header .headerLinksWrapper {
            grid-column: 3;
            margin: 0;
        }

            .header .headerLinksWrapper ul {
                margin: 0;
            }



    .logoWrapper {
        margin: 0;
        padding: 0 1rem;
    }

    #menuToggle {
        display: block;
        position: relative;
        z-index: 1;
        -webkit-user-select: none;
        user-select: none;
        position: absolute;
    }

        #menuToggle input {
            display: block;
            width: 64px;
            height: 51px;
            position: absolute;
            top: -15px;
            left: -15px;
            cursor: pointer;
            opacity: 0;
            z-index: 1002;
            -webkit-touch-callout: none;
        }

        /* hamburger */
        #menuToggle > span {
            display: block;
            width: 33px;
            height: 4px;
            margin-bottom: 5px;
            position: relative;
            background: #605E5E;
            border-radius: 3px;
            z-index: 1001;
            transform-origin: 4px 0px;
            transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;
            left: 0;
        }

            #menuToggle > span.top {
                transform-origin: 0% 0%;
            }

            #menuToggle > span.middle {
                transform-origin: 0% 100%;
            }

        /* 
     * Transform all the slices of hamburger
     * into a crossmark.
     */
        #menuToggle > input:checked {
            left: calc(80vw - 8rem);
        }

            #menuToggle > input:checked ~ span {
                opacity: 1;
                transform: rotate(45deg) translate(1px, -2px);
                left: calc(80vw - 8rem);
            }

        #menuToggle input:checked ~ span.middle {
            opacity: 0;
            transform: rotate(0deg) scale(0.2, 0.2);
        }

        #menuToggle input:checked ~ span.bottom {
            transform: rotate(-45deg) translate(-2px, -1px);
        }

        #menuToggle input:checked ~ ul {
            transform: none;
        }

    .mainMenu {
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        width: 80%;
        margin: 0;
        background: #fff;
        z-index: 1000;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 20vh 2rem 0 8vw;
        list-style-type: none;
        -webkit-font-smoothing: antialiased;
        transform-origin: 0% 0%;
        transform: translate(-100%, 0);
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
        justify-content: start;
    }

        .mainMenu li {
            margin: 0;
            padding: 1.5rem 0;
            position: relative;
        }

            .mainMenu li.highlight a {
                color: #EC6961;
            }

            .mainMenu li > a {
                color: #605E5E;
            }

            .mainMenu li > a {
                font-size: 2.4rem;
                text-transform: uppercase;
            }


    /* overlay */
    #menuToggle .mobileMenuOverlay {
        background: #000;
        opacity: 0;
        visibility: hidden;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 0;
        height: 0;
        z-index: -111;
        -moz-transition: visibility .5s, height 0s, width 0s, opacity 0.5s linear;
        -webkit-transition: visibility .5s, height 0s, width 0s, opacity 0.5s linear;
        -o-transition: visibility .5s, height 0s, width 0s, opacity 0.5s linear;
        transition: visibility .5s, height 0s, width 0s, opacity 0.5s linear;
    }

    #menuToggle input:checked ~ .mobileMenuOverlay {
        opacity: .5;
        visibility: visible;
        width: 100%;
        height: 100%;
        -moz-transition: visibility .5s, height 0s, width 0s, opacity 0.5s linear;
        -webkit-transition: visibility .5s, height 0s, width 0s, opacity 0.5s linear;
        -o-transition: visibility .5s, height 0s, width 0s, opacity 0.5s linear;
        transition: visibility .5s, height 0s, width 0s, opacity 0.5s linear;
        z-index: 999;
    }



    /* newsletter */


    .divNewsletterWrapper iframe {
        width: 100%;
    }

    .e2ma_signup_form {
        width: 100%;
        padding: 0;
    }

    /* footer */
    footer {
        padding: 2rem 1rem;
        margin-top: 2rem;
    }

    .footer-lower {
        flex-direction: column;
    }

    .copyrightWrapper {
        font-size: 1.4rem;
    }

    /* content banners */
    .ContentBannerWrapper .SecondaryBannerWrapper .BannerTextWrapper,
    .ContentBannerWrapper .SecondaryBannerWrapper .BannerImageWrapper {
        flex-basis: 100%;
    }

    .ContentBannerWrapper .SecondaryBannerWrapper .BannerImageWrapper {
        min-height: 50vh;
    }

    .ContentBannerWrapper .SecondaryBannerWrapper .BannerTextWrapper.Bottom .SecondaryContentWrapper,
    .ContentBannerWrapper .SecondaryBannerWrapper.Fill .BannerTextWrapper .SecondaryContentWrapper,
    .ContentBannerWrapper .SecondaryBannerWrapper .BannerTextWrapper .SecondaryContentWrapper {
        display: block;
        position: initial;
        width: 100%;
        transform: translate(0, 0);
        padding: 40px 3%;
        font-size: 1.8rem;
    }

    .ContentBannerWrapper .SecondaryBannerWrapper .BannerTextWrapper.Right {
        order: 2;
    }

    /* pricing banners */
    .contentPricingWrapper {
        flex-direction: column;
    }
        .contentPricingWrapper .pricingContentWrapper {
            min-height: auto;
        }
        .contentPricingWrapper .pricingContentWrapper {
            padding: 20px 10px;
        }
        .contentPricingWrapper .contentPricingButtonWrapper {
            position: static;
        }
            .contentPricingWrapper .contentPricingButtonWrapper .button {
                margin-top: 10px;
                display: block;
            }
			
	.CFWhatPeopleSayWrapper .FlexWrapper .ItemWrapper:nth-child(2) {display: none;}
	.CFWhatPeopleSayWrapper .FlexWrapper .ItemWrapper:nth-child(3) {display: none;}
	
}
/* #endregion */



