﻿main, main > * {
    display: block
}

main {
    width: 100%;
    margin: 0 auto
}

    main > * {
        margin: 32px auto
    }

section:not(.clear-section-bottom-margin) {
    margin-bottom: 1em;
}

#product-features-section .sub-header {
    font-size: 2.25em !important
}

@media (max-width: 767px) {
    .product-page .section-wrapper .section-header {
        max-width: 325px;
        margin: 0 auto;
    }
}

/*
    Styles for new product pages
    TODO: move these to CMS when product page is ready
*/

.product-page #feature-seal-banner {
    background-color: #F0FBFF; /* Beluga Blue */
    padding-top: 80px !important;
}

#features-carousel.flex-container-block .section-header {
    margin-bottom: 50px;
}

    #features-carousel.flex-container-block .section-header .section-header-text {
        padding: 10px 0;
    }

    #features-carousel.flex-container-block .section-header .section-header-desc {
        font-size: 20px;
        line-height: 28px;
    }

@media (min-width: 768px) {
    #features-carousel.flex-container-block .section-header {
        max-width: 735px;
        margin-left: auto;
        margin-right: auto;
    }

    #features-carousel.flex-container-block .flex-container {
        max-width: 1140px;
        margin: auto;
    }
}

#product-get-started-steps {
}

    #product-get-started-steps .flex-container-items .flex-item:not(.flex-item-secondary-image-wrapper) {
        max-width: 390px !important;
    }

    #product-get-started-steps .flex-container-items .flex-item.flex-item-secondary-image-wrapper {
        max-width: 178px !important;
    }

    #product-get-started-steps.flex-container-block .section-header .section-header-text {
        padding-bottom: 50px;
    }

#faq-section-classicfaqcontainer-wrapper .faq-section-header h2 {
    font-size: 30px;
}

/*START: hack this is to match the boxes above it*/
@media (max-width: 991px) {
    .product-page .product-cta-banner-block.container {
        width: 90%;
        padding: 32px 42px;
    }
}

@media (min-width: 911px) and (max-width: 991px) {
    .product-page .product-cta-banner-block .flex-container .flex-item.product-cta-banner-title {
        max-width: 407px;
    }
}

@media (min-width: 1200px) {
    .product-cta-banner-block {
        max-width: 1180px;
    }
}
/*END: hack this is to match the boxes above it*/