html {
    font-family: "Raleway", Roboto, Helvetica, Verdana, sans-serif !important;
}

body {
    background: #fff;
}

p {
    margin: 0 0 1rem;
}

a {
   outline: 0 !important; 
     text-decoration: none;
}
a:hover{
    text-decoration: none;
}

body, input, select, textarea {
    font-size: 1rem;
    font-weight: 100;
    line-height: 1.75rem;
}
#page-content {
   width: 100%;
    height: calc(100% - 11rem);
    margin-top: 7rem;
    background: white;
    position: fixed;
    background: white;
    z-index: 1;
}

    /* Loading */
    #page-content.spinner {
    }

    #header #content-menu .navigation, #home-header.today-active #home-menu .navigation
    {
            margin-left: 2.5rem;
    }
        #page-content.spinner > div {
            opacity: 0;
        }

        /* Crest hover fix - so navigtion doesnt pop open with just the blue background*/
.school-logo-tablet #logo-home{
    height: 3.5rem;
    width: 3rem;
    display: inline-block;
}
.no-mobile #logo-home {
    height: 6.5rem;
      width: 8rem;
    display: inline-block;
    position: absolute;
    margin-left: -4rem;
    left: 50%;
    margin-top: 1.1rem;
}

.no-mobile #logo-home img{
 height: 5.5rem;
}

.school-logo-tablet {
    display: none;
    line-height: 3.5rem;
}

    .school-logo-tablet #logo-home img {
        height: 2.75rem;
    }

.mobile-only, .mobile-only-inline {
    display: none !important;
}

a.non-clickable-header {
    pointer-events: none;
    cursor: default;
}

/* Stop Click Events from happening on top menu when device is touch*/
html.touch ul.navigation li.hover-dropdown > a.top-nav {
    pointer-events: none;
    touch-action: none;
    cursor: default;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

img.responsive {
    max-width: 100%;
    height: auto;
}

#gmap_canvas, #stp_gmap_location_canvas {
    min-height: 18rem;
    height: calc(100vh - 2rem);
    height: calc(100% - 2rem);
}

#gmap_canvas img {
    max-width: none !important;
    background: none !important;
}

.toggle {
    text-decoration: none;
    height: 60px;
    left: 0;
    position: absolute;
    top: 0;
    width: 90px;
    outline: 0;
    border: 0;
}
/* To use absolute wrap, simply add class absolute-wrap and it will center it and prevent item from having any effect on its surrounding items. Note: it uses max width of the page*/
div.absolute-wrap {
    position: absolute;
    width: 100%;
    height: 0;
    left: 0;
    text-align: center;
}
/* To use relative wrap, place the div with relative-rap class at top of container you want it to be relative to, and then the contents can be positioned however you want relative to it without it affecting the other items in the container*/
div.relative-wrap{
    position: relative;
    float: right;
    height: 0;
    top: 0;
    margin: 0;
    padding: 0;
}

li.hover-dropdown > a:active,
li.hover-dropdown > a:focus {
    box-shadow: inset 0px 0px 65px rgba(0,0,0,0.3);
}

/* Content for Menus */

div.content {
    background: white;
    position: relative;
}

div.content h2, #news-events h2 {
    text-transform: uppercase;
    color: black;
}

#news-events h2 {
    color: white !important;
}

div.content span.caps {
    text-transform: uppercase;
}

.content-gutter-left, .content-gutter-right {
    width: 5rem;
    display: inline-block;
    height: 100%;
    text-align: center;
}

.article-top {
    width: calc(100% - 10rem);
    float: left;
    display: inline-block;
}

.content-pane {
    width: calc(100% - 10rem);
    float: left;
    padding-top: 1rem;
    padding-bottom: 3rem;
}

div.content-next, div.content-prev {
    position: relative;
    cursor: pointer;
    color: #0F3682;
    top: 48%;
}

.content-gutter-right {
    float: right;
}

.content-gutter-left {
    float: left;
}

/* Call to action buttons etc*/
.open-day-popup{
    width: 17rem;
    display: block;
    position: fixed;
    bottom: -1rem;
    z-index: 1;
    left: 27rem;
    font-size: 1.25rem;
    font-weight: bold;
    box-shadow: 0 0 6px 2px rgba(0, 22, 64, 0.17);
    border: 1px solid white;
    color: #001640;
    opacity: 0;
}
.open-day-popup-wrap{
        background: white;
    z-index: 1;
    padding: 1rem;
}
.popup-triangle-fixed{
    border-top: 10px solid transparent;
    border-left: 10px solid transparent;
    border-right: 10px solid white;
    border-bottom: 10px solid white;
    position: absolute;
    bottom: -10px;
    width: 0;
    left: calc(50% - 20px);
    transition: 0.3s;
    margin: 0 auto;
    box-shadow: 0 0 5px black;
    padding: 0px;
    z-index: -1;
    transform: rotateZ(45deg);
    box-shadow: 0 0 12px 3px rgba(0, 22, 64, 0.17);
}
/*.open-day-popup::after{
        border-top: 20px solid rgb(255, 255, 255);
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    content: "";
    display: block;
    height: 0;
    position: absolute;
        bottom: -1rem;
    width: 0;
    left: calc(50% - 20px);
    transition: 0.3s;
    margin: 0 auto;
    padding: 0px;
}*/

.open-day-popup span.fa{
font-size: 2rem;
    margin-right: 0.25rem;
    display: inline-block;
    line-height: 3rem;
    vertical-align: middle;
}
.open-day-popup .open-day-text{
display: inline-block;
    margin-left: 0.5rem;
    width: calc(100% - 5.5rem);
    font-size: 0.8rem;
    vertical-align: middle;
    font-weight: normal;
}
.open-day-popup img{
    width: 4rem;
}
.open-day-popup .open-day-text span.link-text,   .open-day-popup .open-day-text span.link-text-subtitle{
    display: block;
}
.open-day-popup span.fa-close{
    float: right;
    position: absolute;
    right: 0rem;
    top: 0;
    line-height: 1rem;
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.43);
    padding: 0.5rem;
    cursor: pointer;
}
.open-day-popup span.fa-close:hover{
    color: black;
}

.stp-honeypot{
    float: right;
    position: absolute;
    left: 100%;
}


div.call-to-action {
    text-align: center;
    background: #001640;
    border-top: 1px solid white;
}

    div.call-to-action > div.action-button {
        color: #d6ddec;
        display: inline-block;
        position: relative;
        padding: 0 1.5rem;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.0833333rem;
    }

div.call-to-action {
    position: fixed;
    bottom: 0px;
    width: 100%;
   z-index: 2006;
    height: 4rem;
    line-height: 4rem;
}

div.call-to-action > div > span {
    padding-right: 0.5rem;
    display: inline-block;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
}

div.action-button {
    transition: background 0.5s;
}

    div.action-button > img {
        height: 1.6875rem;
        padding-right: 0.75rem;
    }

    div.action-button span.st-peters-today-owl img {
            padding: 0.05rem;
            margin-top: 0;
            border: 1px solid white;
            border-radius: 100%;
            height: 1.35rem;
            margin: 0px 6px 1px 0px;
    }

    div.action-button:hover, div.action-button:active {
        cursor: pointer;
        transition: all 0.5s;
        color: white !important;
        background: #010e27;
    }
.st-peters-today-btn.today-active {
    background: #1c3c77 !important;
}

/* Timeline CSS*/
.stp-timeline {
    width: 100%;
    height: 2rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.stp-timeline-wrap {
    position: relative;
    display: block;
}
.stp-timeline-point {
    display: inline-block;
    z-index: 1;
    width: 11rem;
    color: #2c3f80;
    font-size: 0.8rem;
}
.stp-timeline-point::before {
    border: 1px solid #1e3277;
    content: '';
    width: 1rem;
    height: 1rem;
    border-radius: 100%;
    display: inline-block;
    margin-right: 0.5rem;
    vertical-align: middle;
    background: #1e3277;
    background: white;
    box-shadow: inset 0px 0px 0px 3px #fff;
}
.stp-timeline-wrap::before {
    border-bottom: 2px solid #2c3f80;
    width: 100%;
    display: block;
    position: absolute;
    content: '';
    top: 0.85rem;
    z-index: -1;
}
.stp-timeline-point.active .stp-timeline-date{
	font-weight: bold;
    transition: 0.3s;
}
.stp-timeline-point.active:hover::before {
    border: 1px solid black;
}
.stp-timeline-point:hover::before {
    border: 2px solid black;
    cursor: pointer;
}
.stp-timeline-point:hover {
    cursor: pointer;
}
.stp-timeline-point:hover .stp-timeline-date {
    color: black;
}
.stp-timeline-point-pointer{
    position: absolute;
    border: 2px solid #1e3277;
    content: '';
    width: 1rem;
    height: 1rem;
    border-radius: 100%;
    display: inline-block;
    margin-right: 0.5rem;
    margin-top: 0.45rem;
    vertical-align: middle;
    background: #1e3277;
    box-shadow: inset 0px 0px 0px 3px #fff;
}
div.center {
    text-align: center;
}

div.wrap {
    display: inline-block;
    width: 100%;
    text-align: center;
}
#footer div.footer-contact a{
    padding: 1rem;
    display: block;
    background: #4167af;
    color: white;
    margin-left: 1rem;
    margin-right: 1rem;
        margin-bottom: 2rem;
    cursor: pointer;
    border: 1px solid white;
}
#footer .footer-address{
    font-size: 0.9rem;
    line-height:1.2rem;
    margin-bottom: 2rem;
}
#footer div.footer-contact a span.fa-phone{
        font-size: 2rem;
    vertical-align: middle;
    margin-right: 0.5rem;
}
#footer div.footer-contact a span.text{
        font-size: 1.25rem;
    line-height: 2rem;
    vertical-align: middle;
}
#footer {
    padding-bottom: 3rem;
    text-align: center;
    color: white;
    background: #173e88;
    padding-top: 1rem;
}
#footer ul.icons li a img{
    height: 1.5rem;
     margin: 0 0.5rem;
}
    #footer ul.icons {
    margin: 0;
    padding: 0;
      margin-bottom: 2rem;
            margin-left: 1rem;
    margin-right: 1rem;
}

        #footer ul.icons li {
    display: inline-block;
    list-style: none;
}

            #footer ul.icons li .fa {
    color: white;
    cursor:pointer;
    font-size: 1.25rem;
}

nav.main ul li.search {
    float: left;
    top: 0;
    position: absolute;
    left: 0;
    height: 2.7rem !important;
    padding-left: 0.5rem !important;
}

    nav.main ul li.search a {
        text-indent: 1.5625rem;
        text-transform: uppercase;
        line-height: 3.3125rem;
        letter-spacing: 0.25em;
        font-size: 0.75rem;
    }


/*  ---- top menu ---- */

#header div.absolute-wrap {
    left: 0;
    top: 0;
    height: 0;
}

#home-header #home-menu {
    height: inherit;
    line-height: inherit;
    overflow: hidden;
    display: block;
  
}

#header .main ul li > a {
    text-decoration: none;
    border-bottom: 0;
    color: #fff;
    overflow: hidden;
    position: relative;
    z-index: 1000;
}

#header a,
#home-menu a {
    color: inherit;
    text-decoration: none;
}

#header ul,
#home-header ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.navigation,
.full-width-heading,
.external-links,
#content-menu {
    line-height: 3.5rem;
    height: 3.5rem;
}

.external-links {
    float: right;
    text-transform: uppercase;
    margin-right: 1rem !important;
}
.external-links li{
    padding-right:0.5rem;
}
#header #content-menu ul li a,
#home-header #home-menu ul li a {
    border-bottom: 0;
    font-weight: 400;
    letter-spacing: 0.15rem;
    text-transform: uppercase;
    height: 100%;
    display: block;
}

#header ul li,
#home-menu ul li,
#content-menu ul li {
    display: inline-block;
    padding-left: 0;
}

    #header ul li.hover-dropdown {
        height: 3.375rem;
    }

    #header ul li a:hover, #home-menu ul li a:hover {
        color: white;
    }

/* top dark blue area */
#header, #home-menu {
    background-color: #001640;
    color: #d6ddec;
    height: 7rem;
    left: 0;
    width: 100%;
    letter-spacing: 0.25em;
    font-size: 0.75rem;
    z-index: 3006;
}


#header {
    position: fixed;
    top: 0;
}

    #header #content-menu {
        width: 100%;
    }

.navigation {
    opacity: 1;
    margin-top: 0px;
    width: auto;
    display: inline-block;
}

    /* padding for the top level menu items ie 'WELCOME' 'ACADMIC' 'SPORTS'... */
    .navigation > li > a {
        padding-left: 1rem;
        padding-right: 1rem;
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }

    /* hover on any top menu item (accessed via inherit) */
    ul.navigation > li ul li a:hover {
        color: white;
    }



/* ---- ribbon menu ---- */

/* triangle */
#content-menu ul.navigation > li > a::after,
#home-menu ul.navigation > li > a::after {
    border-bottom: 20px solid rgb(255, 255, 255);
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    content: "";
    display: block;
    height: 0;
    position: relative;
    top: 2px;
    width: 0;
    transition: 0.3s;
    margin: 0 auto;
    padding: 0px;
}

/* triangle popup - hover and slider-select */
#content-menu ul.navigation > li:hover > a::after,
#content-menu ul.navigation:not(:hover) > li.current-folio > a::after,
#home-menu ul.navigation > li.slider-select > a::after {
    top: -0.8rem !important;
    transition: 0.3s;
}

/* ribbon dropdown blue background tray (before slide out) */
.navigation > li.background {
    width: 100%;
    position: absolute;
    background: rgb(70,86,144);
    height: 0rem;
    margin-top: 3.4375rem;
    transition: height 0.3s;
    -webkit-transition: height 0.3s;
    left: 0px;
    display: block;
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
     visibility: visible;
    border-bottom: 0px solid transparent;
}
#content-menu .navigation > li.background {
     will-change: auto;
     height: 0rem !important;
     visibility: hidden;
     transition:height 0.3s 0s, visibility 0.3s 0s;
}
/* ribbon dropdown blue background (after slide out) */
#content-menu .navigation:hover > li.background {
  height:  17rem !important;
  visibility: visible;
    border-bottom: 1px solid white;
  transition: height 0.3s 0s, visibility 0.3s 0s;
}

/* HOME ribbon dropdown blue background (before fade) */
#home-menu .navigation > li.background {
    opacity: 0;
    transition: opacity 0.3s, height 0s 0.3s !important;
    border-bottom: 0px solid transparent;
    height: 0;
}

/* HOME ribbon dropdown blue background (after fade) */
#home-menu .navigation.drawer-open > li.background {
    height: 16rem !important;
    opacity: 1;
    transition: opacity 0.3s !important;
    border-bottom: 1px solid white;
}


/* Wrapper for the Navigation on all other pages (Non-home)*/
#content-menu {
    overflow: hidden;
    width: 100%;
    display: block;
    background: rgb(37, 49, 117);
    text-align: center;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
}

/* white underline below tagline before hover */
*.navigation li.underline {
    width: 100%;
    position: absolute;
    margin-top: 3.4375rem;
    left: 0px;
    display: block !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    visibility: hidden;
    opacity: 0;
   transition: visibility 0.3s 0s,  opacity 0.3s,  height 0s 0.3s;
    height: 0rem !important;
    border-bottom: 1px solid white;
    background: none !important;
}

/* show the tagline underline when the navigation is active */
#content-menu ul.navigation:hover li.underline {
    opacity: 1;
    height: 3.5rem !important;
  visibility: visible;
  transition: visibility 0s 0s,  opacity 0.3s, height 0s 0s;
}

/* always show the tagline underline on the homepage */
#home-menu ul.navigation.ready li.underline {
    opacity: 1;
    height: 3.5rem !important;
    transition: opacity 0.3s;
    background: rgb(70,86,144) !important;
    visibility: visible;
}

/* hide the tagline underline if TODAY is active */
#home-menu.today-active ul.navigation.ready li.underline {
    height: 0 !important;
    opacity: 0!important;
    border-bottom: none;
}

/* show the tagline underline */
#home-menu.today-active ul.navigation:hover li.underline {
    height: 3.5rem !important;
    opacity: 1 !important;
    border-bottom: 1px solid white;
}

/* on the homepage hide the menu items by default (the intro sequence reenables them) */
#home-menu .navigation li.hover-dropdown {
    opacity: 0;
    height: 100%;
}

/* ribbon menu dropdown trays which contain text */
.dropdown-menu {
    background: transparent;
    position: absolute;
    top: 100%;
    left: 0;
    border-radius: 0;
    width: 100%;
    float: left;
    margin: 0 !important;
    margin-top: -1px !important;
    font-size: inherit;
    text-align: left;
    list-style: none;
    box-shadow: none !important;
    border: none;
    padding: 0 !important;
    display: block;
    overflow: hidden;
    height: 0;
    opacity: 0;
    z-index: 3005;
    transition: height 0.3s, opacity 0s 0.3s;
}
#content-menu ul.navigation > li.background.no-hover, 
#content-menu ul.navigation > li.underline.no-tagline{
    height: 0 !important;
     border: none !important;
}
#content-menu .navigation:hover li.hover-dropdown:hover .dropdown-menu.no-hover{
    height: 3.5rem !important;
}
#content-menu .navigation:hover li.hover-dropdown .dropdown-menu.no-tagline .full-width-heading {
  display: none !important;
}

/* ---- HOME RECODE ---- */

#home-menu .navigation .dropdown-menu {
    opacity: 1;
    height: 0rem;
    transition: opacity 0s 0s, height 0s 0.3s;
    overflow: visible;
}

#home-menu .navigation li.hover-dropdown.slider-select .dropdown-menu {
    height: 3.5rem;
    transition: opacity 0s 0s, height 0s 0s;
}

#home-menu .navigation.drawer-open li.hover-dropdown.slider-select.drawer-open .dropdown-menu:not(.no-hover) {
    height: 29rem;
    transition: opacity 0s 0s, height 0s 0s;
}


/* State when menu isn't hovered (drawer-open)*/
#home-menu .navigation li.hover-dropdown div.dropdown-menu > div.full-width-heading {
    opacity:0;
    height: 0 !important;
    visibility: hidden;
    /* transition: opacity 0.3s 0s, height 0s 0.3s, visibility 0s 0s; */
}

#home-menu .navigation li.hover-dropdown.slider-select div.dropdown-menu > div.full-width-heading {
    opacity: 1;
    height: 3.5rem !important;
    visibility: visible;
    /* transition: opacity 0.3s 0s, height 0s 0s, visibility 0s 0s; */
}
#home-menu .navigation li.hover-dropdown div.dropdown-menu .full-width-heading:after{
     visibility: hidden;
}
/* State when menu is hovered (drawer-open)*/
#home-menu .navigation li.hover-dropdown.drawer-open div.dropdown-menu .full-width-heading:after{
     visibility: visible;
}
#home-menu .navigation.drawer-open li.hover-dropdown div.dropdown-menu > div.full-width-heading{
     opacity:0;
    height: 0 !important;
    visibility: hidden;
       transition: opacity 0.3s 0s, height 0s 0.3s, visibility 0s 0.3s;
}
#home-menu .navigation.drawer-open li.hover-dropdown.slider-select div.dropdown-menu > div.full-width-heading {
    opacity: 1;
    height: 3.5rem !important;
    visibility: visible;
    transition: opacity 0.3s 0s, height 0s 0s, visibility 0s 0s;
}

#home-menu .navigation li.hover-dropdown div.dropdown-menu > ul.sub-dropdown-container {
    opacity: 0;
    height: 0 !important;
    visibility: hidden;
    transition: opacity 0.3s 0s, height 0s 0.3s, visibility 0s 0.3s;
}

#home-menu .navigation.drawer-open li.hover-dropdown.slider-select.drawer-open div.dropdown-menu > ul.sub-dropdown-container {
    opacity: 1;
    height: auto !important;
    visibility: visible;
    transition: opacity 0.3s 0s, height 0s 0s, visibility 0s 0s;
}

/* ---- CONTENT PAGES MENU ----*/

#content-menu .navigation .dropdown-menu {
    opacity: 0;
    height: 0rem;
    visibility: hidden;

    transition: opacity 0.3s 0s, height 0.3s 0s, visibility 0s 0.3s;
}


#content-menu .navigation:hover li.hover-dropdown .dropdown-menu {
    height: 17rem;
    z-index: 0;
    transition: opacity 0.3s 0s, height 0.3s 0s, visibility 0s 0.3s, z-index 0s;
}

#content-menu .navigation:hover li.hover-dropdown:hover .dropdown-menu {
    opacity:1;
    visibility: visible;
    z-index: 1;
    transition: opacity 0.3s 0s, height 0.3s 0s, visibility 0s 0s, z-index 0s;
}

/* ---- END CONTENT PAGES MENU ----*/

/* section taglines eg 'JOIN US AT ST PETER'S FOR OUTSTANDING... ' */
.full-width-heading {
    display: block !important;
    text-transform: uppercase;
    border-bottom: 0px solid transparent;
    text-align: center;
    overflow-y: hidden;
    line-height: 3.5rem;
    height: 3.5rem;
}

    /* section tagline text */
    ul.navigation div.full-width-heading > a {
        padding-left: 0px !important;
        padding-right: 0px !important;
        margin-left: 0px !important;
        margin-right: 0px !important;
    }

    /* section tagline triangle under */
    .full-width-heading:after {
        border-bottom: 1.25rem solid rgb(255, 255, 255);
        border-left: 1.25rem solid transparent;
        border-right: 1.25rem solid transparent;
        content: "";
        display: block;
        height: 0;
        position: relative;
        top: -0.7rem;
        width: 0;
        transition: 0.4s 0.1s;
        margin: 0 auto;
        padding: 0px;
        visibility: hidden;
    }
    li.hover-dropdown:hover .full-width-heading:after{
        visibility: visible;
    }

    /* glowing text on hover */
    .full-width-heading a:hover,
    .full-width-heading a:focus {
        color: inherit;
        text-decoration: underline;
        background-color: transparent;
    }

/* this contains the sub sections, not including the tagline */
.sub-dropdown-container {
    height: auto !important;
    text-align: center;
}

/* this contains each section, eg, 'ACADEMIC EXCELLENCE' and the sub items */
.sub-dropdown-section {
    vertical-align: top;
    height: auto !important;
    margin-right: 1rem;
    margin-top: 0.6rem;
    margin-bottom: 1rem;
}

/* this is the section header, eg, 'ACADEMIC EXCELLENCE' */
.sub-dropdown-header {
    margin-top: 0rem;
    margin-bottom: 0.5rem;
    letter-spacing: 1px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
    text-align: left;
    line-height: 2rem;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !Important;
    padding-right: 0 !Important;
}
.sub-dropdown-header.no-children{
    border-bottom: none !important;
}

/* this is a column of sub-section items eg 'Rugby, Football, Cricket...' */
.sub-dropdown-items {
    display: inline-block;
    vertical-align: top;
    margin-right: 1rem !important;
    float: left;
}

    /* List items for sub-section items eg 'Rugby, Football, Cricket...' */
    .sub-dropdown-items > li {
        display: block !important;
        border-left: none !important;
        line-height: 1.8rem;
        letter-spacing: 0.06rem;
        text-align: left;
    }

        /* Links for sub-section items eg 'Rugby, Football, Cricket...' */
        .sub-dropdown-items > li > a {
            text-transform: none !important;
            letter-spacing: 0.06rem !important;
            margin-left: 0 !important;
            margin-right: 0 !Important;
            padding-left: 0 !Important;
            padding-right: 0 !Important;
        }

/* ---- end ribbon menu ---- */

/* Modal Validation CSS*/

.invalid-msg {
    display: none;
}
#Recaptcha{
        position: relative;
    bottom: 13rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
.recatpcha-validation-msg{
    text-align:left;
    opacity: 0;
}
.recaptcha-placeholder{
    height: 5.375rem;
}
.recatpcha-validation-msg.invalid{
    opacity: 1;
}
.field-validation-valid .invalid-msg, .field-validation-error .valid-msg {
    display: none;
}

.field-validation-error .invalid-msg {
    display: inline;
}


/*-- Modal CSS--*/

/*Default Modal CSS - heights dynamically updated in JS*/
.modal .modal-dialog  
  {
    width: 38rem;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.modal {
    z-index: 4050;
    height: 100%;
}

.modal-header, .modal-footer {
    border: none;
}
.modal-footer{
    text-align: left;
    margin-top: 2rem;
}
.modal-content {
    width: 38rem;
    border-radius: 0px;
    color: black;
    padding: 2rem;
    overflow: hidden;
    height: 100%;
}
.grecaptcha-badge{
    z-index: 5000;
    margin-right: -3rem;
    margin-bottom: 1rem;
}

.contact-box {
    width: 100%;
    margin-top: 2rem;
}

.contact-box .col-left, .contact-box .col-right {
    margin-bottom: 1rem;
}

.contact-box .col-left {
    font-weight: bold;
}

.col-left, .col-right {
    float: left;
    width: 50%;
}

.contact-box .contact-row .col-left span {
    display: block;
    font-weight: normal;
}

.contact-box .contact-row::after{
    display: block;
    content: '';
    clear: both;
}


/* Modal Sub-Modal Transitions */
.modal-content > div.show {
    display: block !important;
    opacity: 0;
    width: 100%;
    transition: 0.3s opacity;
}

.modal-content > div.hide {
    display: none !important;
}

.modal-content > div.slide-left {
     opacity: 0;
    transition: opacity .3s ease-out;
}
.modal-content > div.slide-right {
    opacity: 0;
    transition: opacity .3s ease-out;
}
.modal-content > div.slide-center {
    opacity: 1;
      transition: opacity .3s ease-out;
}


#admissions-modal .col-md-6:nth-child(even), #admissions-modal .col-sm-6:nth-child(even){
    padding-right: 0;
    padding-left: 0;
}
#admissions-modal .col-md-6:nth-child(odd), #admissions-modal .col-sm-6:nth-child(odd){
    padding-left: 0;
    padding-right: 0;
}
#school-contacts-modal .modal-body{
        padding: 1rem 0.5rem;
}


#admissions-modal .modal-dialog .modal-header, #request-prospectus .modal-header  {
    margin-bottom: 2rem;
}
#admissions-modal .action-button span {
    font-size: 1rem;
    display: inline-block !important;
    color: white !important;
}
#admissions-modal .action-button {
    height: 3rem;
       background: #001640;
    width: 100%;
    text-transform: uppercase;
    font-size: 1rem;
        padding: 0 1.5rem;
}

#enquire-modal.book-a-tour-active .modal-dialog, #enquire-modal.enrolment-active .modal-dialog {
    width: 98vw;
}

    #enquire-modal.book-a-tour-active .modal-dialog::after {
        left: 12rem;
    }

#enquire-modal .enquiry-landing .modal-body {
    margin-top: 2rem;
}

/* Triangle under modal dialog CSS TRICKS*/
/*#enquire-modal .modal-dialog::after {
    border-top: 30px solid rgb(255, 255, 255);
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    content: "";
    display: block;
    height: 0;
    position: relative;
    top: -2px;
    width: 0;
    transition: 0.3s;
    margin-left: 2rem;
    padding: 0px;
}*/

.modal-content .modal-header {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    
}
.modal-content .modal-body, .modal-content .modal-footer{
    padding: 0.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
.modal-dialog .back-btn:hover, 
.modal-dialog .back-btn:active {
    opacity: 0.5;
}

.modal-dialog .back-btn {
    top: 0;
    left: 1rem;
    font-size: 3.5rem;
    width: 4rem;
    font-weight: normal;
    float: left;
    position: relative;
    display: block;
    opacity: 0.2;
    cursor: pointer;
}
div.footer{
    clear:both;
}
#footer-logos{
    background: white;
}
#footer-logos .footer-logos-block img{
    width: 100%;
    height: auto;
}
#footer-logos .col-sm-6{
    padding: 2rem;
}
#footer-logos .col-sm-6{
    padding: 1rem;
}
#footer span.label{
    font-family: Raleway;
}
#footer p.copyright{
    font-size: 0.8rem;
    line-height:1.1rem;
}
.modal-dialog .close {
    float: right;
    font-size: 5rem;
    font-weight: normal;
    position: absolute;
    right: 1rem;
    padding: 0rem 1rem;
    display: block;
    z-index: 3000;
}
#profile-modal .modal-dialog .close{
    top: 1rem;
}
/* Modal Code for Contact Us etc*/
.stp-jw-button {
    border: 1px solid #253175;
    border-radius: 5px;
    padding: 0.75rem;
    cursor: pointer;
    margin: 0.75rem 0rem;
        transition: 0.3s;
}
.stp-jw-button:hover{
    background: rgba(51, 122, 183, 0.12);
    transition: 0.3s;
}
.stp-no-border-button:hover a {
    text-decoration: none;
}
.stp-no-border-button a > span{
    transition: 0.3s;
}
.stp-no-border-button:hover a > span{
    background: rgb(70,86,144);
    transition: 0.3s;
}
.stp-no-border-button a > div{
    transition: 0.3s;
}
.stp-no-border-button:hover a > div 
{
    color: rgb(70,86,144);
    transition: 0.3s;
}

.stp-jw-button img.stp-circle-image{
        display: inline-block;
    margin-right: 1rem;
    border-radius: 100%;
}
.stp-no-border-button{
        margin: 0.5rem 0rem;
}
    .stp-no-border-button div.text-wrap{
        display: inline-block;
        font-weight: bold;
        color: #001640;
    }

    .stp-no-border-button span.fa-angle-right{
        font-size: 2rem;
    }

/* Custom CSS to make the circle effect that fontawsome icons have with -circle- and apply it to those that dont have it but want it*/
/* Sized to suit a 3rem*/
span.circle-btn-wrap {
    background: #001640;
    color: white;
    font-size: 1.5rem;
    line-height: 2.57rem;
    border-radius: 100%;
    padding: 0.5rem;
    position: relative;
    height: 2.57rem;
    width: 2.57rem;
    display: block;
    padding: 0;
    text-align: center;
    vertical-align: middle;
}
.contact-group-break{
    height:0;
    /* border-bottom: 1px solid rgb(244, 244, 244); */
    margin: 1.5rem 0;
}
.lnum {
    font-variant-numeric: lining-nums;
    -moz-font-feature-settings: "lnum" 1;
    -moz-font-feature-settings: "lnum=1";
    -ms-font-feature-settings: "lnum" 1;
    -o-font-feature-settings: "lnum" 1;
    -webkit-font-feature-settings: "lnum" 1;
    font-feature-settings: "lnum" 1;
}

.stp-jw-button span.circle-btn-wrap {
    display: inline-block;
    vertical-align: middle;
    margin-right: 1rem;
}


    .prospectus-choice-back span.fa-chevron-circle-left {
    font-size: 3rem;
    vertical-align: top;
    color: #001640;
    float: left;
        line-height: 2.57rem;
    vertical-align: middle;
}

.stp-jw-button span.fa-chevron-circle-right {
    font-size: 3rem;
    vertical-align: middle;
    color: #001640;
    
    line-height: 2.57rem;
}

.stp-jw-button div.text-wrap {
    width: calc(100% - 7rem);
    display: inline-block;
    vertical-align: middle;
}
.submit-button .text-wrap{
    width: calc(100% - 3rem);
    display: inline-block;
    vertical-align: middle;
}
.stp-jw-button.one-side div.text-wrap {
    width: calc(100% - 3rem);
    display: inline-block;
    vertical-align: middle;
}

   .stp-jw-button div.text-wrap > span {
       display: block;
   }

        .stp-jw-button div.text-wrap > span.upper-text {
            text-transform: uppercase;
            color: #253175;
            letter-spacing: 0.05rem;
            font-weight: 600;
        }
            
        .stp-jw-button div.text-wrap > span.center-text {
            font-size: 1rem;
            line-height: 3rem;
            padding-left: 0.5rem;
            line-height: 2.57rem;
            color: #253175;
            letter-spacing: 0.05rem;
            text-transform: uppercase;
            font-weight: 600;
            text-align: center;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

/* modal backdrop */
.modal-backdrop {
    background-color: #19234f;
    z-index: 3040;
}

    .modal-backdrop.in {
        opacity: .7;
    }

.modal-subtitle {
    text-align: center;
    font-size: 1.5em;
    letter-spacing: 0.05rem;
    color: #337ab7;
margin-bottom: 2rem;
    margin-top: 0rem;
}

.modal-title {
    color: black;
    font-size: 2rem;
    padding: 0;
    text-align: center;
    font-weight: 400;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
}

.modal-body {
    position: relative;
    padding: 0px;
}

.modal-footer, .modal-header {
    padding: 0;
}

.modal-content p {
text-align: center;
    margin-bottom: 0;
    padding: 0.5rem 0;
    font-size: 1rem;
    position: relative;
}

.modal-content .btn {
    font-size: 22px;
    font-weight: 100;
}

.modal-content button.modal-close {
    float: right;
    font-size: 15pt;
    padding: 8px;
}
.modal-intro-text {
    margin-left: 0 !important;
    text-align: center !Important;
    margin-bottom: 1rem !IMPORTANT;
    font-weight: 600;
    color: #001640;
}
.parent-info p span.text , 
.book-a-tour p span.text, 
.admissions-enquiry p span.text {
 width: calc(100% - 3.57rem);
 display: inline-block;
 
    vertical-align: middle;
}
.parent-info p, 
.book-a-tour p, 
.openday-info p, 
.book-a-tour p, 
.admissions-enquiry p, 
.book-a-visit p,
#request-prospectus-modal .modal-content p {
    text-align: left;
    margin-left: -1.5rem;
}

.modal-body span.circle-btn-wrap {
        display: inline-block;
    margin-right: 1rem;
}

.modal-row .col-left {
    background: #b0b4bf;
    border-radius: 5px 0 0 5px;
    padding: 0.5rem;
}
.modal-row .col-wrap {
    background: white;
    height: 2.75rem;
    line-height: 3rem;
    padding-left: 0.75rem;
    font-size: 0.75rem;
    border-radius: 3px;
    border: 1px solid #253175;
}



.modal-row.phone-email .col-left {
    padding-right: 1.5rem;
    width: 40%;
}

.modal-row.phone-email .col-right {
    padding-left: 1.5rem;
    width: 60%;
}
.col-full-width .modal-row .col-left{
    padding-right:0.25rem !important;
}
 .col-full-width .modal-row .col-right{
     padding-left:0.25rem !important;
 }
.col-full-width .modal-row .col-left, .col-full-width .modal-row .col-right {
    padding: 0;
}

.modal-row .col-right {
    background: #b0b4bf;
    border-radius: 0 5px 5px 0px;
    padding: 0.5rem;
    /* margin-bottom: 0.5rem; */
}
.modal-row .col-left {
    /* margin-bottom: 0.5rem; */
}
.col-between {
        position: absolute;
        margin: 0 auto;
        margin-left: -1rem;
        margin-top: 1.25rem;
        background: #82909b;
        color: white;
        border-radius: 100%;
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
        line-height: 2rem;
        text-align: center;
        left: 40%;
    }

 .col-full-width {
    background: #b0b4bf;
    border-radius: 5px;
    padding: 0.5rem;
}
 .recatpcha-container .g-recaptcha{
         border: solid 1px #253175;
    display: block;
    background: white;
    overflow: hidden;
    border-radius: 3px;
 }
 .recatpcha-container .g-recaptcha > div
 {
         margin: 0 auto;
 }
 .modal-contacts{
  float: right;
    font-size: 1rem !important;
   color: #253175;
    letter-spacing: 0.05rem;
    line-height: 2.57rem;
    background-color: white;
    /* padding: 1rem 0rem; */
    padding-right: 1rem;
    border: 1px solid #001640;
    text-transform: uppercase;
    width: 17rem;
    font-weight: 600 !important;
    position: relative;
    top: 3.5rem;

 }
 .modal-contacts:hover{
  background: rgba(51, 122, 183, 0.12) !important;
   border: 1px solid #001640;
    transition: 0.3s;
    color: #253175 !important;
 } 
 .modal-contacts span.fa{
     float: right;
       color: #253175 !important;
    right: 0;
      font-size: 1.5rem !important;
    line-height: 2.57rem;
 }
.modal-directions {
    float: right;
    position: relative;
    margin: 0;
    padding: 0;
    background: #f0ede5;
    margin-top: 3.5rem;
}
    
    .modal-directions a {
    display: block;
    position: relative;
    font-size: 1rem;
    padding: 0.5rem;
    line-height: 2.57rem;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none !important;
    }

    .modal-directions span {
    display: inline-block !important;
    margin-right: 1rem !Important;
}
        .modal-directions span.text {
            width: calc(100% - 3rem);
}
.parent-info textarea.text-box, .book-a-tour textarea.text-box {
    resize: none;
}

.text-box {
    color: black !important;
    width: 100%;
    border: solid 1px #253175;
    display: block;
    padding: 0.5rem;
    border-radius: 3px;
    font-size: 1rem;
    font-weight: 100;
    line-height: 1.75em;
    margin-bottom: 0.25rem;
}

.submit-button {
    float: right;
    font-size: 1rem !important;
    width: 14rem;
    line-height: 2.57rem;
    background-color: rgba(1, 134, 1, 0.67);
    text-transform: uppercase;
    position: relative;
    font-weight: bold !important;
}
.btn-submit-prospectus{
     width: calc(100% - 10.5rem);
}
 .modal-content   .submit-button .fa {
        float: right !important;
        background: green;
        margin-right: 0 !important;
        margin-left: 0 !Important;
        vertical-align: middle;
    }
.modal-content button.modal-back:hover {
    background-color: rgba(130, 144, 155, 0.87);
}

.modal-content button.modal-back {
    float: left;
    font-size: 1rem;
    line-height: 2.57rem;
    color: white;
    background-color: #b0b4bf;
    padding-right: 2rem;
    position: relative;
    text-transform: uppercase;
    font-weight: 600;
}
    
.modal-content .modal-back span.circle-btn-wrap, .modal-content .submit-button span.circle-btn-wrap {
    display: inline-block;
}

    .modal-content button.modal-back span.fa {
        color: #fff;
        vertical-align: top;
        background: #82909b;
        margin-right: 2rem;
        display: inline-block;
        position: relative;
        vertical-align: middle;
    }

.modal-button-wrap {
    text-align: center;
}

.field-validation-error {
    color: red;
}

.custom-radio span {
    font-size: 43px;
    color: #2B7DD2;
    text-align: center;
    cursor: pointer;
    display: block;
    margin-bottom: 0.75rem;
}

.custom-radio {
    margin: 30px 0.75rem;
    text-align: center;
    display: inline-block;
}

.custom-radio-wrap {
    text-align: center;
}

.custom-radio.active, .custom-radio.active span, .custom-radio span.active {
    color: #5AB65A;
}

.custom-radio:hover, .custom-radio:hover span {
    color: #7DBDFF;
    cursor: pointer;
}

.form-control {
    height: 44px;
    padding: 0.5rem 12px;
    font-size: 18px;
}

.select-wrapper {
    position: relative;
    width: 100%;
}

    .select-wrapper .form-group {
        width: 100%;
        margin-bottom: 0;
    }

    .select-wrapper select {
        color: black !important;
        width: 100%;
        border: solid 1px #253175;
        display: block;
        padding: 0.5rem;
        border-radius: 3px;
        font-size: 1.3rem;
        height: 2.75rem;
        font-weight: 100;
        font-size: 0.8rem;
    }

select option {
    background-color: #FFFFFF !important;
     padding: 0.5rem;
}

.select-wrapper label, label {
    font-weight: normal !important;
}

.table-form {
    width: 95%;
    margin: 0px auto;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

.table-form tr td {
    padding: 0.5rem 6px;
    font-size: 1rem;
}
div.table-wrap {
    background: white;
    border-radius: 3px;
    border: 1px solid #253175;
    margin-bottom: 0.25rem;
}
.col-left .select-wrapper{

}
/*.book-a-tour .modal-body p {
    text-align: left;
}

.book-a-tour .modal-footer {
    width: 50%;
    float: left;
}

.book-a-tour .reserve-validate {
    float: right;
    width: 50%;
    text-align: center;
    margin-top: -60px;
}

.book-a-tour #booking-calendar {
    float: right;
    width: 50%;
}

.book-a-tour .modal-button-wrap {
    float: left;
    width: 100%;
}

#enquireForm .book-a-tour {
    width: 60%;
    margin: 0 auto;
    display: block;
}*/
@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes spinner {
    to {
        -webkit-transform: rotate(360deg);
    }
}


.spinner:before {
    content: 'Loading…';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3rem;
    height: 3rem;
    margin-top: -1.5rem;
    margin-left: -1.5rem;
}

.spinner:not(:required):before {
    content: '';
    border-radius: 50%;
    border: 1px solid rgb(91, 146, 183);
    border-top-color: rgb(255, 255, 255);
    animation: spinner .6s linear infinite;
    -webkit-animation: spinner 0.6s linear infinite;
}

.st-peters-today {
    position: fixed;
    overflow: hidden;
    height: 100%;
    width: 100%;
    background: white;
    left: 0;
    transition: top 0.5s;
    top: 100%;
    z-index: 2001;
    margin-top: 7rem;
    will-change: transform;
}

.st-peters-today div.owl-page-next, .st-peters-today div.owl-page-prev {
    display: block !important;
}

.st-peters-today .stp-placeholder {
    width: 100%;
    height: 100%;
    background: rgba(0, 43, 126, 0.31);
    padding: 1.5rem;
}

.st-peters-today .keys-wrap {
    width: 100%;
    height: 100%;
    border: 1px solid white;
}

    .st-peters-today .keys-wrap img {
        vertical-align: middle;
        display: block;
        margin: 30% auto;
        width: 50% !important;
    }

.st-peters-today .content-block .columnContent img.columnResponsive {
    opacity: 0;
    transition: opacity 0.5s;
}

    .st-peters-today.today-active, .st-peters-today.today-actual {
        margin-top: 7rem;
        top: 0;
    }
/*Begin overrides for /stpeterstoday full page*/
.st-peters-today.today-actual .st-peters-today-heading > span{
    width: auto;
}
div.st-peters-today-heading > span {
    vertical-align: middle;
    font-size: 2.5rem;
}
div.st-peters-today-heading > span.tag-heading{
    color: #2c789e;
    font-weight: 500;

}
div.st-peters-today-heading button.st-peters-dismiss-btn {
    font-size: 5rem;
    position: absolute;
    right: 1.5rem;
    top: 0rem;
    font-weight: normal;
}

.st-peters-today-heading {
    display: block !important;
    letter-spacing: 0.125rem;
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
    width: calc(100% - 10rem);
    width: calc(100% - 10rem);
    float: left;
    display: inline-block;
    padding-top: 1rem;
padding-bottom: 1rem;
}

    .st-peters-today.today-active .st-peters-today-heading .st-peters-today-owl img {
        border: 3px solid black;
    }

.st-peters-today-owl {
    display: inline-block;
    vertical-align: middle;
}

    .st-peters-today-owl img {
        margin-top: 0px;
        padding: 0.5625rem;
        border: 3px solid black;
        border-radius: 100%;
        height: 4.375rem;
        margin: 0px 0.5rem;
    }

.st-peters-today .spinner:before {
    width: 2.5rem;
    height: 2.5rem;
    margin-top: -1.25rem;
    margin-left: -1.25rem;
}

.st-peters-today .spinner:not(:required):before {
border: 2px solid #0f3682;
border-top-color: rgb(255, 255, 255);
}

.st-peters-today .spinner > div {
    opacity: 0;
}

.st-peters-today .columnContent {
    transition: opacity 0.3s;
    opacity: 1;
}

    .st-peters-today .columnContent:hover {
    opacity: 0.9;
}

div.ajax-result.result-div {
    vertical-align: middle;
    font-size: 30px;
    padding: 20px;
    padding-top: 0px;
    width: 100%;
    text-align:center;
}

div.ajax-result .result-text, .owl-result-text, .stp-result-text {
    margin-top: 40px;
    font-size: 20px;
    text-align: center;
}

div.ajax-result img.owl-success {
    margin: 0 auto;
    display: block;
    margin-top: 60px;
}

div.ajax-result img.load-complete {
    transform: scale(1.2);
    -webkit-transition: 0.7s;
    transition: 0.7s;
}

div.ajax-result span.owl-success {
    margin: 0 auto;
    display: block;
    margin-top: 60px;
    background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjMsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4wLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL1RSLzIwMDEvUkVDLVNWRy0yMDAxMDkwNC9EVEQvc3ZnMTAuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4wIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSIxMjZweCIgaGVpZ2h0PSIxMjYuMnB4IiB2aWV3Qm94PSIwIDAgMTI2IDEyNi4yIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMjYgMTI2LjIiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGNpcmNsZSBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iIzVCQTJCRSIgY3g9IjQ3IiBjeT0iNjMuMiIgcj0iNDMiLz4NCjxnIGlkPSJYTUxJRF85XyI+DQoJPGc+DQoJCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik02OC44LDg5LjFDNjguOCw4OS4xLDY4LjgsODkuMSw2OC44LDg5LjFDNjguOCw4OS4xLDY4LjgsODkuMSw2OC44LDg5LjF6Ii8+DQoJCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik02OC44LDg5LjFDNjguOCw4OS4xLDY4LjgsODkuMSw2OC44LDg5LjFDNjguOCw4OS4xLDY4LjgsODkuMSw2OC44LDg5LjF6IE00Mi42LDg0LjQNCgkJCWMtMC40LTAuMS0wLjksMC0xLjMtMC4xYy0wLjUsMC4zLTEsMC40LTEuNiwwLjRjLTAuNS0wLjEtMS0wLjItMS41LTAuMmMtMC41LDAuMS0xLjEsMC4xLTEuNiwwLjFjLTAuNCwwLTAuNywwLTEuMS0wLjENCgkJCWMtMC43LTAuMS0wLjgtMC4xLTEuMiwwLjVjLTAuNSwwLjYtMC42LDEuNS0xLjEsMi4yYy0wLjIsMC4zLDAsMC42LDAsMC45YzAsMC41LTAuNCwwLjktMC44LDEuMWMtMC40LDAuMi0wLjcsMC4zLTEuMSwwLjcNCgkJCWMtMC4zLDAuNC0wLjUsMC44LTAuNiwxLjJjLTAuMSwwLjUtMC4yLDEuMS0wLjIsMS43Yy0wLjktMS4xLTEuOS0yLjMtMS4yLTMuOGMwLTEtMC4xLTEuNywwLjYtMi41YzAuNC0wLjUsMS41LTEuMSwxLjUtMS43DQoJCQljLTAuNiwwLjMtMS4zLDAuMy0xLjgsMC43Yy0wLjQsMC4zLTAuOCwwLjUtMS4zLDAuN2MtMC45LDAuNC0yLjQsMS4yLTMuMiwwLjJjLTAuOCwwLjctMS4zLDEuOC0xLjgsMi42Yy0wLjEtMS43LTAuNC0zLjksMS4xLTUuMQ0KCQkJYzAuMy0wLjMsMC40LTAuOCwwLjgtMC45YzAuNC0wLjEsMC43LTAuMiwxLjItMC4yYzAuNCwwLDAuOSwwLjIsMS4zLDBjMC40LTAuMiwwLjgtMC40LDEuMy0wLjZjLTEtMC4yLTEuNi0wLjEtMi42LDAuMg0KCQkJYy0wLjgsMC4zLTEuNiwwLjEtMi40LTAuMWMtMC4zLTAuMS0wLjctMC4zLTAuNy0wLjZjLTAuNCwwLjEtMC45LDAuMS0xLjMsMC4yYy0wLjUsMC4xLTAuOSwwLjItMS40LDAuM2MwLjYtMS4yLDEuMy0yLjcsMi44LTIuOQ0KCQkJYzAuOS0wLjEsMS43LTAuMywyLjYtMC4yYzEsMC4yLDEuOSwwLjMsMywwLjNjMC45LDAsMS44LTAuMiwyLjctMC4yYzAuNywwLDEuNiwwLjMsMi4yLTAuMWMwLjUtMC40LDEtMSwxLjQtMS41DQoJCQljMC41LTAuNywxLTEuMywxLjYtMS45YzAuOC0wLjgsMS0xLjksMS4yLTIuOWMwLjEtMC42LDAuMy0xLjIsMC40LTEuOGMwLjItMC44LTAuNi0xLjQtMS0yYy0xLjEtMS43LTItMy42LTIuOC01LjUNCgkJCWMtMC44LTEuOS0xLjgtNC42LTIuMS01LjljLTAuMi0wLjktMC41LTIuOS0wLjUtMy44YzAtMiwwLjUtNC45LDEuOS03LjZjLTAuMS0xLjksMC4xLTQsMC44LTUuOGMwLjMtMC44LDAuNi0xLjUsMS4xLTIuMg0KCQkJYzAuMi0wLjQsMC43LTAuNywwLjYtMS4yYy0wLjEtMS42LTAuMS0zLjMsMC4xLTQuOWMwLTAuMywwLjEtMC42LDAuMi0wLjljLTAuMy0wLjQtMC42LTAuNy0wLjgtMS4xYy0wLjItMC40LTAuNC0wLjgtMC42LTEuMw0KCQkJYzIuNS0wLjIsNC4zLDEuOCw1LjcsMy42YzAuMywwLjQsMC42LDAuOCwwLjksMS4yYzAuMSwwLjIsMC45LDAuMSwxLjEsMC4yYzEuNywwLjIsMy40LDAuNSw1LDEuMmMxLjIsMC42LDIuNCwxLjMsMy40LDIuMQ0KCQkJYzAuMiwwLjEsMC44LTAuMiwxLjEtMC4zYzAuOC0wLjMsMS43LTAuNCwyLjYtMC41YzIuMi0wLjMsNCwwLjMsNS4yLDIuMmMtMC4zLDAtMC41LDAtMC44LDBjLTAuNSwwLTEuMy0wLjMtMS42LDAuMQ0KCQkJYy0wLjgsMS4xLTEuNCwyLjItMi4yLDMuMmMtMC41LDAuNi0xLjMsMS4zLTEuNiwyYy0wLjQsMS0wLjIsMS45LTAuMywzYy0wLjIsMS45LTAuNiwyLjgtMSwzLjdjMC4zLDAuNiwwLjUsMS4yLDAuOCwxLjgNCgkJCWMwLjEsMC4zLDEuOCwzLjUsMi43LDUuMmMxLjksMy41LDMuOCw2LjksNS41LDEwLjVjMS41LDMuMiwzLDYuNSw0LjQsOS43YzAuMywwLjgsMC42LDEuNSwxLDIuM2MwLjMsMC44LDAuOSwxLjUsMS4zLDIuMg0KCQkJYzAuNiwxLjIsMS4zLDIuNCwxLjgsMy42YzAuMywwLjcsMC45LDEuOCwwLjgsMi43Yy0wLjEsMC41LTAuNiwwLjctMS4xLDAuN2MtMC41LDAtMC41LDAuNS0xLDAuNmMtMC44LDAuMi0yLjEtMC43LTIuOC0xLjENCgkJCWMtMS0wLjctMi0xLjUtMi45LTIuM2MtMS41LTEuMy0yLjktMi42LTQuNC00Yy0wLjQtMC40LTAuMy0wLjItMC44LDAuMWMtMC41LDAuNC0xLDAuNy0xLjUsMC45Yy0wLjUsMC4yLTEuMSwwLjItMS43LDAuMg0KCQkJYy0wLjIsMC0wLjQsMC0wLjYtMC4xYy0wLjMsMC0wLjMsMC4zLTAuNCwwLjVjLTAuNSwwLjktMC41LDEuOC0wLjUsMi43YzAuMywwLjIsMC43LDAuNCwxLDAuNmMwLjQsMC4xLDEtMC40LDEuNC0wLjUNCgkJCWMwLjctMC4yLDEuMSwwLjQsMS43LDAuN2MwLjksMC4zLDEuNSwxLjEsMS45LDEuOWMwLjEsMC4yLDAuMSwwLjQsMC4yLDAuN2MtMC4zLTAuMS0wLjUtMC4xLTAuOC0wLjJjLTAuNC0wLjEtMC43LTAuMi0xLjEtMC4zDQoJCQljLTAuNS0wLjEtMC40LDAtMC44LDAuMmMtMC40LDAuMi0wLjksMC0xLjMtMC4xYy0wLjUtMC4xLTAuNywwLTEuMSwwLjJjLTAuNCwwLjItMC44LDAuMi0xLjIsMC4zYy0wLjYsMC0wLjYsMC0wLjgsMC42DQoJCQljLTAuMiwwLjgtMC41LDEuNS0wLjIsMi4yYzAuNSwxLjEsMC40LDEuOS0wLjMsMi44Yy0wLjgsMS4xLTAuNiwyLjQtMC41LDMuN2MtMC42LTAuNy0xLjQtMS40LTEuOS0yLjJjLTAuNS0wLjktMC45LTIuMi0wLjgtMy4zDQoJCQljMC4xLTEsMC40LTEuOCwwLjMtMi44Yy0wLjYsMC43LTEuMiwxLjItMS42LDIuMWMtMC40LDAuOS0wLjcsMi0xLjcsMi41Yy0wLjMsMC4yLTAuOCwwLjMtMSwwLjVjLTAuMywwLjMtMC40LDAuOS0wLjUsMS40DQoJCQljLTAuMiwwLjctMC40LDEuMy0wLjYsMmMtMC44LTEtMS41LTIuMi0xLjQtMy42YzAtMC41LDAuMi0wLjksMC40LTEuNGMwLjEtMC4zLTAuMS0wLjYsMC4yLTFjMC4zLTAuNCwwLjctMC44LDEuMS0xLjENCgkJCWMwLjUtMC40LDAuNi0wLjYsMC43LTEuMmMtMC44LDAtMS42LDAuMS0yLjIsMC43Yy0wLjUsMC40LTEuOCwxLjYtMi41LDFjLTAuNy0wLjYtMi41LDEuOC0zLDIuNGMwLjEtMC45LDAuMS0xLjgsMC40LTIuNw0KCQkJYzAuMy0wLjgsMC44LTEuNCwxLjMtMi4xYzAtMC44LDAuOC0wLjksMS40LTEuMmMxLTAuMywyLTAuOSwzLjEtMWMwLjksMCwxLjcsMC4xLDIuNS0wLjVjMC43LTAuNSwxLjctMS4yLDIuNi0xLjMNCgkJCWMwLjgsMCwxLjEtMS4zLDEuNC0yYzAuMy0wLjgsMC41LTEuNiwwLjctMi40YzAuMi0wLjgsMC4yLTEuMywwLTIuMWMtMC4zLTEuMS0wLjctMi4xLTEtMy4yYy0wLjEtMC4zLTAuMi0wLjYtMC4zLTAuOA0KCQkJYzAtMC4xLTItMC41LTIuMi0wLjZjMCwxLjMtMC40LDIuNC0xLDMuNmMtMC42LDEuMi0xLjcsMS4zLTIuOSwwLjljLTAuNi0wLjItMS4yLTAuNS0xLjctMC44Yy0wLjUtMC4zLTAuNy0wLjYtMS4yLTAuMw0KCQkJYy0xLjIsMC41LTEuOSwxLjUtMi43LDIuNGMwLjIsMC4yLDAuOC0wLjMsMS4yLTAuMmMwLjQsMCwwLjcsMC4zLDEuMSwwLjRjMC40LDAuMSwwLjQtMC4xLDAuOC0wLjJjMC40LTAuMiwwLjktMC4xLDEuMywwLjINCgkJCWMwLjYsMC41LDEuNSwwLjYsMS45LDEuNGMwLDAsMC44LDEuOCwwLjUsMS44QzQzLjYsODQuNyw0My4xLDg0LjUsNDIuNiw4NC40eiIvPg0KCTwvZz4NCgk8Zz4NCgk8L2c+DQo8L2c+DQo8Zz4NCgk8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iIzNBQUEzNSIgZD0iTTc4LjIsNzAuNmMtMi4zLDAtMy41LTEuOC02LjEtNS4zYy0wLjYtMC44LTEuMi0xLjctMi0yLjcNCgkJYy0yLjMtMy00LjUtNS42LTYtNy40Yy0zLTMuNS00LjEtNC44LTIuOC02LjFjMC44LTAuOCwxLjktMS4yLDMuMy0xLjJjMi45LDAsNi43LDEuOCw4LjcsMi45YzEuOSwxLDIuMiwxLjEsMi43LDEuMQ0KCQljMS0wLjYsNC4xLTMuNiw2LTUuNWMxLjEtMS4xLDIuMi0yLjIsMy0yLjljNS00LjYsMTAuMS04LjksMTUtMTIuOWM1LjQtNC4zLDExLjctOC4zLDE3LjQtMTAuOGMxLjMtMC42LDMuMi0xLjIsNC42LTEuMg0KCQljMC44LDAsMS4zLDAuMiwxLjgsMC43YzAuNCwwLjQsMC42LDAuOSwwLjUsMS41Yy0wLjEsMS4zLTEuMywyLjEtNC4xLDQuMmMtMy41LDIuNi05LjQsNi45LTE2LjUsMTQuNWMtOS42LDEwLjItMTQsMTYtMTkuOCwyNS44DQoJCWMtMS44LDMuMS0zLjQsNS4xLTUuMiw1LjNDNzguNCw3MC42LDc4LjMsNzAuNiw3OC4yLDcwLjZ6Ii8+DQoJPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTEyMS44LDIwLjJjMC4zLDAsMC41LDAuMSwwLjcsMC4yYzEuMiwxLjMtNy42LDQuOC0yMC4xLDE4LjFjLTkuNywxMC4zLTE0LjIsMTYuMi0yMCwyNg0KCQljLTEuNSwyLjYtMi45LDQuNC00LjEsNC41Yy0wLjEsMC0wLjEsMC0wLjIsMGMtMS45LDAtMy0yLjItNi45LTcuM2MtNS4yLTYuOS05LjYtMTAuOS05LTExLjZjMC41LTAuNSwxLjMtMC43LDIuMi0wLjcNCgkJYzIuMiwwLDUuNCwxLjMsOCwyLjdjMiwxLjEsMi42LDEuMywzLjQsMS4zYzAuMSwwLDAuMiwwLDAuMywwYzEtMC4xLDcuMS02LjQsOS42LTguN2M0LjgtNC40LDkuOC04LjcsMTUtMTIuOA0KCQljNC45LTMuOSwxMS4xLTcuOSwxNy4xLTEwLjZDMTE5LjMsMjAuNywxMjAuOSwyMC4yLDEyMS44LDIwLjIgTTEyMS44LDE3LjJjLTEuNiwwLTMuNywwLjctNS4yLDEuNGMtNS44LDIuNi0xMi4yLDYuNi0xNy43LDExDQoJCWMtNSw0LTEwLjEsOC4zLTE1LjEsMTIuOWMtMC44LDAuNy0xLjksMS44LTMsMi45Yy0xLjUsMS40LTQsMy45LTUuMiw0LjljLTAuNS0wLjItMS4zLTAuNi0xLjYtMC44Yy0yLjYtMS40LTYuNC0zLTkuNC0zDQoJCWMtMi4zLDAtMy42LDAuOS00LjMsMS43Yy0wLjksMC45LTEuNiwyLjYsMC4zLDUuMWMwLjYsMC44LDEuNCwxLjcsMi41LDNjMS42LDEuOCwzLjcsNC4zLDYsNy4zYzAuNywxLDEuNCwxLjksMiwyLjYNCgkJYzIuNywzLjcsNC4zLDUuOSw3LjMsNS45YzAuMSwwLDAuMywwLDAuNCwwYzIuOC0wLjIsNC42LTMsNi40LTZjNS43LTkuNywxMC4xLTE1LjQsMTkuNi0yNS41YzctNy41LDEyLjgtMTEuOCwxNi4zLTE0LjMNCgkJYzMuMS0yLjMsNC41LTMuMyw0LjctNS4yYzAuMS0xLTAuMi0xLjktMC45LTIuNkMxMjQuMiwxNy45LDEyMy4zLDE3LjIsMTIxLjgsMTcuMkwxMjEuOCwxNy4yeiIvPg0KPC9nPg0KPC9zdmc+DQo=") no-repeat 5px center;
    width: 130px;
    /* background-size: 58px; */
    height: 101px;
}

div.ajax-result.result-div button.ajax-close {
       margin-top: 6REM;
    width: 100%;
}

@media print {
    #target{
        display: none;
    }

    #header > * {
        display: none !important;
    }

    #header .school-logo-small {
        display: block !important;
    }

    .article-top {
        width: 100% !important;
    }
    .byline-social-media{
        display: none;
    }
    .call-to-action {
        display: none;
    }
    .columnContact, .columnKeys, .columnNav {
        display: none;
    }
    .content-wrap {
        display: block !important;
    }

    #page-content {
        position: static;
    }

    .st-peters-today {
        display: none;
    }

    .content-prev, .content-next {
        display: none;
    }

    #flowedContent {
        display: block;
        visibility: visible !important;
    }
}



/* Login Page Buttons*/
.stp-login-page{
    text-align:center;
        margin-top: 3rem;
            max-width: 768px;
    margin-left: auto;
    margin-right: auto;
}
.stp-login-page a{
    text-align: center;
    text-decoration: none !important;
}
.stp-login-page-item{
    margin-bottom: 4rem;
}
.stp-login-page a span{
        font-size: 4rem;
        margin: 0 auto;
        display: block;
}

.stp-login-page a p{
    font-size: 1.2rem;
    margin-top: 2rem;
}
#header ul.social-links{
    float: left;
    display: inline-block;

}

#header ul.social-links a{
    font-size:1.5rem !important;
    line-height: 3.5rem;
    margin-left:1rem;
    color: white;
    opacity: 0.8;
    cursor: pointer;
}
#header ul.social-links span.fa-lock {
    vertical-align: middle;
}
#header nav.links a:hover,#header .menu-external-links .menu-dropdown ul  a:hover {
    opacity:1;
}

#header .desktop-cta-edu-logos{
    display: inline-block;
    float: left;
    padding-left: 1rem !important;
    line-height:3.5rem;
}

#header .desktop-cta-edu-logos a{
    display: inline-block;
    height: 1.6rem;
    width:auto !important;
    margin: 0 0.4rem;
    vertical-align: middle;
    opacity: 0.8;
}

#header .desktop-cta-edu-logos a img{
     height: 100%;
     width: auto;
      vertical-align:top;
}




/*Contact Details*/
.contact-search{
    text-align:center;
}
.contact-academies{
    max-width: 27rem;
    margin: 0 auto;
    text-align: center;
}
.contact-academies > div{
    display:inline-block;
    font-size:0.8rem;
    text-transform:uppercase;
    font-weight: bold;
    background: #f8f8f8;
    color: #253175;
    padding: 0 0.5rem;
    margin-bottom: 0.2rem;
        cursor: pointer;
}
.contact-search input{
        padding: 0.1rem 0.25rem;
    min-width: 14rem;
}
.contact-search span.fa{
        width: 2rem;
    color: gray;
    cursor:pointer;

}
.contact-search span.fa:hover{
    color:black;
}
.contact-academies > div:hover{
    background: #253175;
    color:white;

}
.search-results {
    margin: 1rem 0;
}
.search-results.spinner > *{
    opacity: 0.3;
    transition:0.3s;
}
.stp-contact {
    /* border: 1px solid #253175; */
    padding: 0.25rem 1rem;
    border-radius: 5px;
    padding-bottom: 0.5rem;
    border: 1px solid #eef1ff;
    /* border-left: 1px solid #f4f6ff; */
    box-shadow: 0px 2px 5px 1px #f9f9f9;
}
.stp-contact[data-type=contact] {
    padding: 0.25rem 1rem;
    border-radius: 5px;
    margin-bottom: 1rem !important;
    border: none !important;
    box-shadow: none !important;
}
.stp-contact .stp-contact-details{
    color: #333e7e;
    text-transform: uppercase;
    /* font-size: 1.24rem; */
    padding: 0.25rem 0rem;
    /* border-bottom: 1px solid #313c7e17; */
    display: block;
}
.stp-contact .stp-contact-details span.role{
    font-weight:bold;
}
.stp-contact .stp-contact-email
{

}
.stp-contact  .stp-contact-phone{

}
.stp-contact span.fa{
    margin-right: 0.5rem;
    border-radius: 100%;
    background: #333e7e;
    color: white;
    width: 1.4rem;
    height: 1.4rem;
    line-height: 1.5rem;
    vertical-align: middle;
    display: inline-block;
    text-align: center;
    font-size: 0.8rem;
}
.stp-contact .link-text-subtitle {
    width: calc(100% - 2.2rem);
    display: inline-block;
    text-overflow: ellipsis;
    overflow-x: hidden;
    vertical-align: middle;
}
.profile-stpyears .stp-years-text {
     font-size: 1.5rem;
     margin-top: 0.25rem;
     text-align: left;
     display: block;
     text-indent: 3px;
}
.profile-accolades{
    display:none;
}