@import url('../../../OneCol1/Css/screen/OneCol1Screen.css');

/* ############################################################################
   ## 
   ##  Landing Page
   ##
   ######################################################################### */

#Template {
    width: 100%;
    max-width: none;
    background: #000;
}

    #Template #Header {
        box-sizing: border-box;
        width: 100%;
    }

        #Template #Header #ShoppingCartSummaryShort {
            display: none;
        }

        #Template #PageContainer {

        }

            #Template #PageContainer #SubHeader {
                position: relative;
            }

#Content {

}

#Page {
    float: left;
    padding: 30px;
    margin: auto;
    margin-top: -120px;
    background-color: rgba(0,0,0,0.65);
    backdrop-filter: none;
}

    #TrailNav {
    }

        #TrailNav .separator {
            display: none;
        }
    
    #Page #PageContent {
    }

        #Page #PageContent #Primary {
            padding: 0;
            margin-top: 0;
        }

        #Page #PageContent #Secondary {
        }
        
            #Page #PageContent #Secondary #SecondaryContent {
            }

    #Tertiary {
        display: none;
    }

    #Footer {
        box-sizing: border-box;
        width: 100%;
        max-width: 1440px;
        margin: 0 auto;
        padding: 40px 40px 0 40px;
    }

.fixedWidth {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 40px;
}

        .rotator .rotatorElements .rotatorElement .pageFragment .text {
            bottom: 300px !important;
            left: 30% !important;
            background: none !important;
        }

            .rotator .rotatorElements .rotatorElement .pageFragment .text .title {
                display: none;
            }
    
    .cards.postcards {

    }

        .cards.postcards .content {

        }

            .cards.postcards .contentItem {

            }

                .cards.postcards .contentItem .text {
                    display: flex !important;
                    align-content: space-between;
                    height: 100%;
                }

                    .cards.postcards .contentItem .text h3.title {
                        font-weight: 900;
                        line-height: 1em;
                        color: #000;
                    }

                    .cards.postcards .contentItem .text .summary {
                        display: block;
                    }

                        .cards.postcards .contentItem .text .summary a {
                            Color: #000;
                            font-weight: bold;
                            font-size: 28px;
                        }

/* ############################################################################
   ## 
   ##  Layout for Different Screen Sizes
   ##
   ##  Be sure to co-ordinate these layouts with the responsive sizes used in all templates in the site, or you'll run into trouble.
   ##
   ######################################################################### */

@media screen and (max-width: 767px) {

    #SubHeader .rotator {
        max-height: 650px !important;
    }

    .rotator .rotatorElements .rotatorElement .pageFragment .text {
        bottom: 60px !important;
        left: 0 !important;
    }

    #TemplateWrapper {
        padding: 0;
        overflow: visible;
    } 

        #Template #PageContainer #SubHeader {
            /* top: -235px; */
            width:100%;
            top: 0;
        }

    #Header #AnchorMenu {
        /* display: block; */ /* Sometimes it's good to show the anchor menu on the home page. */
    }

    #Header .mainMenu {
        /* display: block; */ /* Sometimes it's good to show the main menu on the home page. */
    }

    #Content {}

    #PrimaryContent {
        float: none;
        width: 100%;
    }


    #Footer {
        float: left;
        margin-top: 450px;
    }

}

@media screen and (max-width: 460px) {
    .fixedWidth {
        padding: 0 20px;
    }
}