/* ----- BEGIN MAIN ----- */

#header {
    height: 3.5625rem;
    border-bottom: 1px solid white;
}

#page-content {
    margin-top: 3.5rem;
    height: calc(100% - 7.5rem);
    background: #253175
}

/* ----- BEGIN LOGO ----- */

#st-peters-logo {
    font-family: "Raleway", Helvetica, sans-serif;
    text-transform: uppercase;
    text-decoration: none !important;
    text-align: center;
    color: white;
    font-size: 1.875rem;
    line-height: 1.93rem;
    letter-spacing: 0.2rem;
    font-variant: normal;
    font-weight: 500;
    text-shadow: 0px 1px 3px black;
    transition: opacity 0s 0s, top 0.5s, height 0s 0s, z-index 0.5s step-end, overflow 0.5s step-start;
    position: absolute;
    top: 6rem;
    z-index: 2005;
    width: 100%;
    height: 0;
    margin-top: 0rem;
    overflow: visible;
    display: none;
}

#st-peters-logo img {
    transition: 0.5s;
    height: 8rem;
}

#st-peters-logo .st-peters-slogan {
    top: calc(100vh - 23.3rem);
    position: fixed;
    margin: 0 auto;
    width: 100%;
    height: 3.5rem;
    line-height: 3.5rem;
    text-transform: none;
    font-weight: normal;
    display: none;
}

/* ---- LOGO TRANSITIONS ---- */

/* show the crest only when the page is loaded */
#st-peters-logo.loaded {
    opacity: 1;
}

#st-peters-logo.today-active {
    opacity: 0;
    top: 1.4rem;
    transition: opacity 0.5s 0.5s, top 0.5s, height 0s 0.5s, z-index 0.5s step-start;
    z-index: 4000;
    height: 0;
}

#st-peters-logo.today-active img {
    height: 4.5rem !important;
    transition: 0.5s;
}

#st-peters-logo h2, #st-peters-logo h3 {
    transition: opacity 0.5s, height 0s, margin 0s, width 0s, font-size 0.5s;
    opacity: 1;
}

/* TODO: JOSH: fix animation of text opacity */
#st-peters-logo.today-active h2, #st-peters-logo.today-active h3,  #st-peters-logo.today-active .st-peters-slogan{
    transition: opacity 0.5s, height 0s 0.5s, margin 0s 0.5s, width 0s 0.5s;
    opacity: 0;
    height: 0;
    margin: 0;
    display: none;
}

#st-peters-logo h2 {
    font-size: 1.8rem;
}

#st-peters-logo h3 {
    font-size: 1.5rem;
}

/* overrides for start-centred */

#st-peters-logo.instant, #st-peters-logo.instant img, #st-peters-logo.instant h2, #st-peters-logo.instant h3 {
    transition: 0s !important;
}

#st-peters-logo.start-animation, #st-peters-logo.start-animation img, #st-peters-logo.start-animation h2, #st-peters-logo.start-animation h3 {
    transition: 1.5s ease-in-out !important;
}

#st-peters-logo.start-centred {
    top: 20%;
}

#st-peters-logo.start-centred h2 {
    font-size: 2rem !important;
    margin-top: 1.25rem;
    margin-bottom: 0.625rem;
}

#st-peters-logo.start-centred h3 {
    font-size: 1.6rem !important;
    margin-top: 1.25rem;
    margin-bottom: 0.625rem;
}

#st-peters-logo.start-centred img {
    height: 9rem !important;
}

    div.st-peters-slogan.show {
        transition: 0.5s;
        opacity: 1;
        display: block;
    }

/* ----- END LOGO ----- */

#header .school-logo {
    opacity: 0;
}
.school-logo-small #logo-home img{
    height: inherit;
}

    #header .school-logo.inactive {
        transition: 0.2s ease-out;
        opacity: 0;
        height: 0;
        overflow: hidden;
    }

    #header .school-logo.today-active {
        transition: 0.3s 0.2s ease-in;
        opacity: 1;
        overflow: visible;
    }
    #header.today-active
    {
        transition: z-index 1s;
        z-index: 4001;
    }

/* ---- ZPLANES ---- */

.st-peters-bg {
    width: 100vw;
    height: calc(100vh - 3.5rem - 4rem);
    background: #253175;
    padding-top: 0px;
    display: none;
}

div.st-peters-zp {
    height:100%;
    width:100%;
}

div.zp-wrap {
    position: relative;
    height: 100%;
    width: 100%;
}

div.zp-wrap > div > div {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
}

    /* default scalewrap */
    div.zp-wrap > div {
        transition: opacity 1s ease-in-out;
           -webkit-transition:opacity 1s ease-in-out;
        opacity: 0;
        position: absolute;
        height: 100%;
        width: 100%;
    }

    /* Bottom pane */
    div.zp-wrap > div.zp-scale-wrap.ready {
        opacity: 1;
    }

    /* Top pane which fades in and out */
    div.zp-wrap > div.zp-scale-wrap-2.active {
        opacity: 1;
    }
    
    div.zp-wrap > div.zp-scale-wrap-2.active.fadeout {
        opacity: 0;
    }

        /* Active Pane*/
        div.zp-wrap > div.active > div.z-1 {
            transition: transform 8s ease-in-out;
           -webkit-transition: transform 8s ease-in-out;
            -webkit-transform: scale(1.10);
            -ms-transform:  scale(1.10);
             transform: scale(1.10);
            position: absolute;
        }

        div.zp-wrap > div.active > div.z-2 {
             transition: transform 8s ease-in-out;
           -webkit-transition:transform 8s ease-in-out;
            -webkit-transform: scale(1.15);
            -ms-transform:  scale(1.15);
             transform: scale(1.15);
            position: absolute;
        }

        div.zp-wrap > div.active > div.z-3 {
               transition: transform 8s ease-in-out;
           -webkit-transition:transform 8s ease-in-out;
            -webkit-transform: scale(1.20);
            -ms-transform:  scale(1.20);
             transform: scale(1.20);
            position: absolute;
        }

/* ---- END ZPLANES ---- */

/* ----- BEGIN RIBBON ----- */

#home-header {
    top: calc(100% - 23.3rem);
    position: fixed;
    width: 100%;
    height: 3.5rem;
    background: #253175;
    transition: 0.5s !important;
    z-index: 2005;
    will-change: transform;
}

#home-header.today-active {
    top: 3.5rem !important;
    transition: 0.5s;
    z-index: 2001;
}

/* ----- Home menu animation -----  */    

    /* prefade behaviour */

    #home-header.prefade {
        background: transparent;
    }

        #home-header.prefade #home-menu {
            border-bottom: 1px solid transparent;
            border-top: 1px solid transparent;
            background: inherit;
        }

        #home-header.prefade home-menu {
            border-bottom: 1px solid transparent;
            border-top: 1px solid transparent;
            background: inherit;
        }

#home-menu {
    background: inherit;
    border-bottom: 1px solid white;
    border-top: 1px solid white;
    text-align: center;
}

#home-header.prefade #home-menu li.underline {
    opacity: 0 !important;
}

#home-header.prefade #home-menu li.background {
    opacity: 0 !important;
}

#home-header.prefade #home-menu li.hover-dropdown > .dropdown-menu {
    opacity: 0 !important;
    height: 0 !important;
}

#home-header.prefade #home-menu li.hover-dropdown > a {
    cursor: default;
}

/* ---- white lines intro animation ---- */

#white-lines {
    position: absolute;
    top: 0;
    width: 100%;
    transition: width 0.5s;
    background: transparent;
    height: 3.5rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
}

    #white-lines.pre-animate {
        width: 0%;
    }

/* ---- stp today overrides  ---- */

/* ST: Fix so that hovering over the homepage header when STPToday is active will push it ontop of STPToday */
#home-header.today-active:hover {
    z-index: 2004;
}

#home-header.today-active #home-menu .navigation {
    margin-left: 3.5em;
}

#home-header.today-active #home-menu .navigation li.crest-pedestal {
    padding: 0 !important;
    width: 0;
    margin: 0;
}

#home-header.today-active #home-menu .navigation li.crest-pedestal {
    height: 2.10rem;
    width: 7.3rem;
    vertical-align: top;
}