@import url('/App_Sites/newcollege/Templates/OneCol1/Css/OneCol1.css');

/* ############################################################################
   ## 
   ##  Popup1
   ##  No main menu, trail nav, page functions, footer, tertiary/sub menu
   ##
   ############################################################################ 

   | Header                               |
   |______________________________________|
   | SubHeader                            |
   |______________________________________|
   |                                      |
   | Primary                              |
   |                                      |
   |______________________________________|
   | Secondary                            |
   |______________________________________|
   | PageBottom                           | (PageFunctions)
   |______________________________________|
   | Footer                               |
   |                                      |
   
    <TemplateWrapper>
        <Template>
            <AccessibilityToolbar />
            <Header />
            <SubHeader />
            <Content>
                <Page>
                    <PageTop>
                        <TrailNav />
                        <PageFunctionsTop />
                    </PageTop>
                    <PageContent>
                        <Primary />
                        <Secondary />
                    </PageContent>
                    <PageBottom>
                        <PageFunctionsBottom />
                    </PageBottom>
                </Page>
                <Tertiary />
            </Content>
            <Footer />
        </Template>
    </TemplateWrapper>
*/

body {
}

#TemplateWrapper {
    margin: 0;
    padding: 0;
}

#Template {
    width: 100%;
    min-width: 0;
}

#AccessibilityToolbar,
#Header, 
#PageTop,
#PageFunctionsTop, 
#PageFunctionsBottom, 
.logged-in, 
.logged-out, 
#LoginStatus, 
#ShoppingCartSummaryShort, 
#Tertiary,
#TertiaryTop,
#Footer {
    display: none !important;
}

#JumpToMenu, #JumpToSearch {
    display: none !important;
}

#SubHeader {
    margin: 0 auto;
    padding: 0;
    width: 100%;
}

    #SubHeader .featureBox5 {
        display: flex;
        justify-content: space-between;
    }

        #SubHeader .featureBox5 .logo {
            max-width: 220px;
        }

        #SubHeader ~ #Content #Page #PageContent #Primary #PageTitle, [data-name="SubHeader"] ~ #Content #Page #PageContent #Primary #PageTitle {
            position: relative;
            top: 0;
            color: #000;
        }

    #SubHeader .contentHeader {
        height: 60vh;
        overflow: hidden;
    }

    #SubHeader .contentHeader .bannerContent {
        position: relative;
        z-index:2;
        height: 60vh;
    }

    #SubHeader .contentHeader:after {
        content: "";
        width: 100%;
        height: 60vh;
        background: #358366;
        -webkit-transform: skew(20deg);
        -moz-transform: skew(20deg);
        -o-transform: skew(20deg);
        transform: skew(-40deg);
        position: absolute;
        right: -59%;
        top: 74px;
        z-index: 1;
        transition: cubic-bezier(0.075, 0.82, 0.165, 1);
        transition-duration: 0.45s;
    }

        #SubHeader .contentHeader .bannerContent .bannerText {
            position: absolute;
            width: 50%;
            right:0;
            bottom: 0;
            padding-bottom: 90px;
            padding-right: 30px;
        }

            #SubHeader .contentHeader .bannerContent .bannerText h1 {
                color: #fff;
            }

    #SubHeader .contentHeader .bannerImage {
        max-width: 100vw;
        position: absolute;
        top: 74px;
        z-index: 0;
        height: 60vh;
        overflow: hidden;
        transition: cubic-bezier(0.075, 0.82, 0.165, 1);
        transition-duration: 0.45s;
    }

        #SubHeader .contentHeader .bannerImage img {
            margin-top: -15%;
            transition: cubic-bezier(0.075, 0.82, 0.165, 1);
            transition-duration: 0.45s;
            width: auto;
            max-width: none;
            height: 100vh;
        }

#Page {
}

    #PageTop {
    }

    #Page #PageContent {
        width: 100%;
        clear: both;
        margin-bottom: 0;
    }
    
        #Page #PageContent #Primary {
        }

            #Page #PageContent #Primary #PrimaryContent {
            }

        #Page #PageContent #Secondary {
            margin-top: 30px;
        }

            #Page #PageContent #SecondaryContent {
                padding: 0;
            }

                #Page #PageContent #SecondaryContent .footer {
                    border-top: 10px solid #358366;
                    padding: 40px 0;
                }

                    #Page #PageContent #SecondaryContent .footer .footerLogo {
                        max-width: 75px;
                        width: 100%;
                        margin-right: 20px;
                    }

                    #Page #PageContent #SecondaryContent .footer .footer-list {
                        margin-top: 0;
                        padding-left: 0;
                        list-style: none;
                    }

                        #Page #PageContent #SecondaryContent .footer .footer-list li {
                            font-size: 14px;
                            line-height: 1.25em;
                        }

                        #Page #PageContent #SecondaryContent div.cols-2.layout-2 {
                        }
                        
                            #Page #PageContent #SecondaryContent div.cols-2.layout-2 > .col:nth-child(2n-1) {
                                width: 62.5%;
                                margin-bottom: 0;
                            }
                    
                            #Page #PageContent #SecondaryContent div.cols-2.layout-2 > .col:nth-child(2n-0) {
                                width: 32.5%;
                                margin-bottom: 0;
                            }

    #PageBottom {
    }

hr {
    background: #5c5c5c;
    margin: 1.5em 0 1.5em;
}

.featureBox5 {
    background-color: #358366;
    color: #fff;
    padding: 15px;
}

.background-dark {
    background-color: #252525;
}

.button,
.headerButton {
    color: #171b4a !important;
    background-color: #edf0f1;
    padding: 15px 30px;
    line-height: 190%;
    border: 2px solid transparent !important;
    text-decoration: none !important;
    font-weight: bold;
}

    .button:after {
        display: none;
    }

    .button:hover,
    .headerButton:hover {
        text-decoration: underline !important;
        border: 2px solid #171b4a !important;
        background-color: #edf0f1;
    }

.button-secondary {
    padding: 15px 30px;
    color: #fff !important;
    background-color: transparent;
    border: #fff 2px solid;
    font-weight: bold;
}

    .button-secondary:hover {
        color: #fff !important;
        background-color: #171b4a;
        
    }

button.button, input.button, input#SubmitMember {
    padding: 15px 50px 15px 30px;
}

    /* 
    Shapes 
*/
.max-width {
    max-width: 1380px;
    width: 100%;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
}

.button-rounded {
    border-radius: 5px;
}

.flex-row {
    display: flex;
}

.align-center {
    align-items: center;
}

.align-end {
    align-items: end;
}

.justify-end {
    justify-content: end;
}

div.cols-3.layout-4 {
}

    div.cols-3.layout-4 > .col:nth-child(3n-2) {
        width: 40%;
        margin-bottom: 0;
    }

    div.cols-3.layout-4 > .col:nth-child(3n-1) {
        width: 28%;
        margin-bottom: 0;
    }

    div.cols-3.layout-4 > .col:nth-child(3n-0) {
        width: 28%;
        margin-bottom: 0;
    }


/* ############################################################################
   ## 
   ##  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: 1400px) { 
    #SubHeader .contentHeader .bannerContent .bannerText {
        width: 100%;
        padding:0 30px 90px 30px;
    }
}

@media screen and (max-width: 1100px) {
    #PageContainer {
        border-top: none;
    }
}

@media screen and (max-width: 1200px) { 
    #SubHeader .contentHeader .bannerImage img {
        margin-top: 0;
        height: 100%;
        width: auto;
        max-width: none;
    }
}

@media screen and (max-width: 1100px) {
    #PageContainer {
        border-top: none;
    }
}

@media screen and (max-width: 900px) { 
    #SubHeader .contentHeader .bannerOverlay {
        right: -50%;
    }
}

@media screen and (max-width: 700px) { 
    #SubHeader .contentHeader .bannerImage img {
        margin-top: 0;
        height: 100%;
        width: auto;
        max-width: none;
    }
}

@media screen and (max-width: 600px) {
    .headerButton {
        width: auto;
        padding: 10px 20px;
    }

    #SubHeader .contentHeader,
    #SubHeader .contentHeader .bannerContent,
    #SubHeader .contentHeader:after,
    #SubHeader .contentHeader .bannerImage {
        height: 500px;
    }

    #SubHeader .contentHeader:after {
        right: -42%;
    }

    #SubHeader .contentHeader .bannerImage:after {
        position: absolute;
        height: 100%;
        width: 100%;
        background-color: rgba(0,0,0,.5);
        top: 0;
        left: 0;
        display: block;
        content: "";
    }

    #SubHeader .contentHeader .bannerContent .bannerText {
        position: relative;
        padding: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: end;
        margin-top: 0;
        padding-bottom: 40px;
        box-sizing: border-box;
    }

    #SubHeader .contentHeader .bannerContent .bannerText .headerButton,
    #SubHeader .contentHeader .bannerContent .bannerText .button-secondary {
        width: auto;
        display: block;
        text-align: center;
        margin-bottom: 10px;
        line-height: 100%;
        padding: 10px 20px;
    }
}

@media screen and (max-width: 464px) { 
    #SubHeader .featureBox5 {
        flex-wrap: wrap;
    }

    #SubHeader .featureBox5 .logo {
        margin-bottom: 15px;
    }

    #SubHeader .contentHeader .bannerImage {
        top: 122px;
    }

    #SubHeader .contentHeader:after {
        top: 122px;
    }
}